/* 1. Les variables par défaut (Light) */
:root {
    --bg-color: #ddd;
    --bg-color2: #eee;
    --bg-hard: #fff;
    --bg-soft: #999;
    --bg-revert: #333;
    --grain-filter: none;
    --grain-blend: multiply;
    --icon-filter: none;
    --icon-filter-hover: invert(1);
}

/* 2. Si le système veut du Dark, on change les variables */
@media (prefers-color-scheme: dark) {
:root {
    --bg-color: #333;
    --bg-color2: #292929;
    --bg-hard: #222;
    --bg-soft: #999;
    --bg-revert: #ddd;
    --grain-filter: invert(1);
    --grain-blend: screen;
    --icon-filter: invert(1);
    --icon-filter-hover: none;
}
}

/* 3. Les classes de "force" pour le bouton (plus fortes que la media query) */
[data-theme="light"] {
    --bg-color: #ddd;
    --bg-color2: #eee;
    --bg-hard: #fff;
    --bg-soft: #999;
    --bg-revert: #333;
    --grain-filter: none;
    --grain-blend: multiply;
    --icon-filter: none;
    --icon-filter-hover: invert(1);
}

[data-theme="dark"] {
    --bg-color: #333;
    --bg-color2: #292929;
    --bg-hard: #222;
    --bg-soft: #999;
    --bg-revert: #ddd;
    --grain-filter: invert(1);
    --grain-blend: screen;
    --icon-filter: invert(1);
    --icon-filter-hover: none;
}

html * {
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
}
body {
    font-family: "Lato", sans-serif;
    margin: 0;
    background-color: var(--bg-color); /* Ton gris de base */
    min-height: 100dvh;
    position: relative;
    color:var(--bg-revert);
}
body.menu-is-open .content * {
    pointer-events: none;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;

    /* --- LE SECRET DU GRAIN FIN "HD" --- */
    /* 1. baseFrequency='1.2' : Plus ce chiffre est élevé, plus le grain est petit et dense. */
    /* 2. numOctaves='2' : On baisse un peu pour éviter un aspect trop "nuageux" et garder du piqué. */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='fineNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fineNoise)'/%3E%3C/svg%3E");
    
    /* --- CONTRÔLE DE L'INTENSITÉ --- */
    /* Pour un effet papier confort, on garde l'opacité très basse. */
    /* 0.04 est souvent le "sweet spot" pour un grain perceptible mais pas gênant. */
    opacity: 0.3; 
    filter: var(--grain-filter);
    mix-blend-mode: var(--grain-blend);

    /* --- OPTIMISATION DU RENDU --- */
    /* Force le navigateur à rendre le bruit avec un maximum de netteté */
    image-rendering: pixelated; /* Pour Chrome/Edge/Opera */
    -webkit-print-color-adjust: exact; /* Pour Firefox */
    print-color-adjust: exact; /* Pour Firefox */
    
    /* --- SÉCURITÉ ET EMPLACEMENT --- */
    pointer-events: none; /* Laisse passer les clics */
    z-index: -1; /* Reste en arrière-plan */
}
table {
	border-collapse:collapse;
}
tr.link:hover > td { 
	background-color:var(--bg-revert);
	cursor:pointer;
	color:var(--bg-color); 
}
tr.link:hover .invert-icon {
	filter: var(--icon-filter-hover);
}

/* ---- Système d'onglets ---- */
.tabs-nav {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--bg-color);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tab-btn {
    padding: 8px 18px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--bg-soft);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: 4px 4px 0 0;
    transition: color .15s, border-color .15s;
}
.tab-btn:hover {
    color: var(--bg-revert);
    background-color: var(--bg-color);
}
.tab-btn.active {
    color: var(--bg-revert);
    border-bottom-color: var(--bg-revert);
    background-color: var(--bg-color);
}
.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}
.tabs-select {
    display: none;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 9px 12px;
    background: var(--bg-hard);
    color: var(--bg-revert);
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.dark-light-button {
    width:50px;
    height:50px;
    border-radius:50%;
    margin-left:calc(50% - 25px);
    margin-top:20px;
    margin-bottom:20px;
    background-color:var(--bg-revert);
    cursor:pointer;
    /* Grille : les deux SVGs se superposent exactement au centre */
    display: grid;
    place-items: center;
    z-index: 1000; /* toujours au-dessus du contenu, y compris le mockup mobile */
}
/* Stroke explicite  -  ne passe pas par currentColor/héritage */
.dark-light-button svg {
    grid-area: 1 / 1;        /* superposés dans la même cellule */
    stroke: var(--bg-color); /* contraste garanti avec --bg-revert */
    transition: opacity 0.3s ease;
}

/* ── Ampoule allumée / éteinte ── */
/* Mode clair : éteinte visible, allumée invisible */
.bulb-off { opacity: 1; pointer-events: auto; }
.bulb-on  { opacity: 0; pointer-events: none; }
/* Mode sombre (système) */
@media (prefers-color-scheme: dark) {
    .bulb-off { opacity: 0; pointer-events: none; }
    .bulb-on  { opacity: 1; pointer-events: auto; }
}
/* Mode forcé via data-theme sur <html> */
[data-theme="dark"]  .bulb-off { opacity: 0; pointer-events: none; }
[data-theme="dark"]  .bulb-on  { opacity: 1; pointer-events: auto; }
[data-theme="light"] .bulb-off { opacity: 1; pointer-events: auto; }
[data-theme="light"] .bulb-on  { opacity: 0; pointer-events: none; }
.connect-popup {
    width:400px;
    background-color: var(--bg-color2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius:10px;
    padding:10px;
}
.title {
    text-align: center;
    font-size:30px;
    font-weight: bold;
    padding:10px;
}
.input-label {
    font-style: italic;
    opacity: 0.8;
}
input[type=text], input[type=email], input[type=password], input[type=tel], select {
    border:none;
    border-radius: 5px;
    background-color: var(--bg-hard);
    width:100%;
    padding:10px;
    color:var(--bg-revert);
}
button {
    background-color: var(--bg-color);
    color:var(--bg-revert);
    border:none;
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
}
button:hover {
    cursor: pointer;
    background-color: var(--bg-revert);
    color: var(--bg-color);
}
a {
    text-decoration: none;
    color:inherit;
}
a.link, a.link > div {
    text-decoration: underline;
    cursor:pointer;
}
.invert-icon {
    filter: var(--icon-filter);
}
.dot { display:inline-block; width:15px; height:15px; border-radius:50%; }
.dot-ok      { background:#1a7a1a; }
.dot-ko      { background:#ccc; }
.dot-blocked { background:#990000; }
[data-theme="dark"] .logo-full {
    content: url("../img/logo-full-light.png");
}
.menu-img {
    width:50px;
    vertical-align: middle;
}
.menu-title {
    margin-left: 20px;
}
.menu-button {
    display: none;
}
.menu-button img {
    width:35px;
    height:35px;
    margin:20px;
}
.menu-label {
    padding: 5px 10px;
    color: var(--bg-revert);
    font-weight: bold;
    font-style: normal;
    display: flex;
    gap: 10px;
    align-items: center;
}
.menu-label:hover {
    background-color: var(--bg-revert);
    color: var(--bg-color);
}
.menu-label:hover img {
    filter: var(--icon-filter-hover);
}
.menu-item {
    padding: 5px 10px;
    color: var(--bg-revert);
    font-weight: bold;
    display: flex;
    gap: 10px;
    align-items: center;
}
.menu-collapsible-body .menu-item {
    padding-left: 30px;
}
.menu-item:hover {
    background-color: var(--bg-revert);
    color: var(--bg-color);
}
.menu-item:hover img {
    filter: var(--icon-filter-hover);
}
.menu-item > img {
    width:20px;
}
.menu-notif {
    background-color:#990000;
    color:white;
    padding:0 5px;
    border-radius:5px;
    font-size:10px;
    margin-left:-20px;
    margin-top:-10px;
    z-index: 500;
}
.main {
    max-width:1300px;
    width:100%;
    margin:auto;
    position: relative;
    padding:20px;
}
.mobil-menu {
    display: none;
}
.menu {
    position: fixed;
    height:calc(100dvh - 40px);
    background-color: var(--bg-color2);
    width:250px;
    border-radius:10px;
    overflow-y: auto;
}
.menu-logo {
    font-size: 18px;
    padding:10px;
    font-weight: bold;
}
.content {
    margin-left:270px;
}
.content-div {
    background-color: var(--bg-color2);
    border-radius: 10px;
    padding: 10px;
}
.new-post:hover {
    background-color: var(--bg-revert);
}
.new-post-button {
    margin:auto;
    font-size:30px;
    padding: 50px;
    text-align: center;
    border-radius: 10px;
    border:solid 1px var(--bg-revert);
}
.new-post:hover > .new-post-button {
    border:solid 1px var(--bg-color);
    color: var(--bg-color);
}
.content-title {
    font-weight: bold;
    font-style: italic;
}
.publi-list {
    display:flex;
    overflow-x: auto;
}
.publi {
    margin:5px;
    background-color: var(--bg-color);
    padding:20px;
    border-radius:5px;
    overflow:hidden;
    width:200px;
}
/* Tags dans les tuiles : fond distinct, non cliquables */
.publi .tag { background:var(--bg-hard); pointer-events:none; }
/* Pastille statut dans les tuiles */
.publi-status { display:inline-block; padding:2px 8px; border-radius:8px;
                font-size:10px; font-weight:700; margin-top:6px; }
.ps-open          { background:#dbeafe; color:#1d4ed8; }
.ps-validation    { background:#fef3c7; color:#92400e; }
.ps-validated     { background:#dcfce7; color:#166534; }
.ps-scheduled     { background:#ede9fe; color:#5b21b6; }
.ps-publishing    { background:#dbeafe; color:#1d4ed8; }
.ps-published     { background:#bbf7d0; color:#065f46; }
.ps-failed        { background:#fee2e2; color:#991b1b; }
.ps-cancelled     { background:#f3f4f6; color:#6b7280; }
.publi:hover {
    cursor:pointer;
}
.publi:hover > .publi-img > img,
.publi:hover > .publi-img .ppc-slide img,
.publi:hover > .publi-img .ppc-slide video,
.publi:hover > .publi-img > .publi-preview-video,
.publi:hover > .publi-img > .publi-preview-text {
	transform: scale(1.8);
    z-index: 10;
}
.publi-img {
    width:114px;
    height:114px;
    box-shadow: 0 0 10px 1px #ddd;
    margin-top: 10px;
    margin-bottom: 10px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    position: relative;
}
/* ── Aperçu de version dans les tuiles ── */
.publi-preview-img,
.publi-preview-video {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.publi-preview-video {
    transition: transform 0.3s ease;
}
.publi-preview-text {
    width: 100%; height: 100%;
    transition: transform 0.3s ease;
    background-color: var(--bg-color);
    padding: 6px;
    font-size: 9px; line-height: 1.35;
    overflow: hidden; word-break: break-word;
    box-sizing: border-box;
    color: var(--bg-revert);
    white-space: pre-wrap;
}
/* Carousel */
.ppc-slide {
    position: absolute; top:0; left:0;
    width:100%; height:100%;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.ppc-slide.ppc-active { opacity: 1; }
/* Wrapper tags dans les tuiles */
.publi-tags-wrap { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
/* Tags réseau colorés */
.tag-net          { color:#fff !important; border-color:transparent !important; }
.tag-net:hover    { color:#fff !important; opacity:.8; }
.tag-net-facebook  { background:#3b5998 !important; }
.tag-net-instagram { background:linear-gradient(45deg,#f09433,#dc2743,#bc1888) !important; }
.tag-net-youtube   { background:#FF0000 !important; }
.tag-net-tiktok    { background:linear-gradient(135deg,#69C9D0 0%,#69C9D0 30%,#010101 50%,#EE1D52 70%,#EE1D52 100%) !important; }
.tag-net-linkedin  { background:#0077B5 !important; }
.publi-img img {
    width:104px;
    height:104px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}
.publifull-img {
    width:300px;
    height:300px;
    box-shadow: 0 0 10px 1px #ddd;
    margin-top: 10px;
    margin-bottom: 10px;
}
.publifull-img img {
    width:290px;
    height:290px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}
.facebook {
    border: solid 5px #3b5998;
}
.instagram {
    border: 5px solid transparent; 
    border-image-source: linear-gradient(
        45deg, 
        #f09433 0%, 
        #e6683c 25%, 
        #dc2743 50%, 
        #cc2366 75%, 
        #bc1888 100%
    );
    border-image-slice: 1;
}
.tiktok {
    /* Épaisseur de la bordure */
    border: 5px solid transparent; 
    
    /* Le dégradé part du haut-gauche vers le bas-droite */
    border-image-source: linear-gradient(
        135deg, 
        #69C9D0 0%,   /* Bleu en haut à gauche */
        #69C9D0 30%,   /* Bleu en haut à gauche */
        #010101 50%,  /* Transition vers le noir */
        #EE1D52 70%,  /* Transition vers le noir */
        #EE1D52 100%  /* Rouge en bas à droite */
    );
    
    /* Pour que le dégradé remplisse toute la bordure */
    border-image-slice: 1;
}
.youtube {
    border: solid 5px #FF0000;
}
.linkedin {
    border: solid 5px #0077B5;
}
.tag {
    background-color: var(--bg-color);
    padding:2px 10px;
    font-size:14px;
    font-style: italic;
    border-radius: 10px;
}
.tag:hover {
    cursor:pointer;
    background-color: var(--bg-revert);
    color: var(--bg-color);
}
.publi > .tag, .search-result .tag {
    background-color: var(--bg-color2);
}
.publi > .tag:hover, .search-result .tag:hover {
    background-color: var(--bg-color2);
    color:inherit;
}
.search-result {
    display: flex;
    background-color:var(--bg-color);
    padding:10px;
    margin:20px 0;
    border-radius: 20px;
}
.search-result:hover {
    background-color: var(--bg-revert);
    color:var(--bg-color);
}
.search-result:hover .tag {
    color:var(--bg-revert);
}
.publi-msg {
    border-radius: 20px;
    background-color: var(--bg-color);
    padding:10px;
    width:80%;
    margin-bottom: 10px;
}
.publi-msg-right {
    margin-left:20%;
}
.publi-msg-info {
    border-bottom: solid 5px var(--bg-color2);
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.publi-msg-info-horo {
    font-size:14px;
    font-style: italic;
}
.publi-answer > textarea {
    width: 100%;
    height: auto;
}
#msg-content {
    min-height: 36px;
    max-height: 140px; /* ~5 lignes avant scroll interne */
    resize: none;
    overflow-y: auto;
    line-height: 1.4;
    box-sizing: border-box;
}
textarea {
    border: none;
    border-radius: 20px;
    resize: none;
    background-color: var(--bg-hard);
    color: var(--bg-revert);
    padding:10px;
}
textarea:focus, input:focus{
    outline: none;
}
.radiobutton {
    display: none;
}
.labelbutton {
    cursor:pointer;
    padding:5px 10px;
    border-radius: 10px;
    background-color: var(--bg-color);
}
.labelbutton:hover {
    background-color: var(--bg-revert);
    color: var(--bg-color);
}
.radiobutton:checked + .labelbutton {
    background-color: var(--bg-revert);
    color: var(--bg-color);
}
.create-div, .publi-div {
    display: flex;
}
.add-content {
    border:solid 5px var(--bg-color);
}
.add-content-img {
    display:none;
}
.add-content:hover {
    border:solid 5px var(--bg-revert);
}
.add-content:hover * {
    cursor:pointer;
}
.add-content-comment {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor:pointer;
    padding:5px;
    border-radius: 10px;
    background-color: var(--bg-color);
}
.add-content-comment:hover {
    background-color: var(--bg-revert);
    color: var(--bg-color);
}
.add-content-comment img {
    width:50px;
    height:50px;
}
.conv-list-item {
    padding:10px;
    text-align: center;
}
.conv-list-item:hover {
    background-color: var(--bg-revert);
    color:var(--bg-color);
    cursor:pointer;
}
.conv-list-item > img {
    width:100px;
    height:100px;
}
.account-item > td {
    padding:20px;
}
.account-item > td:last-child {
    white-space: nowrap;
}
.col-modifier {
    white-space: nowrap;
}
.account-item:hover {
    background-color: var(--bg-color);
}
.pbg-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9000;
    justify-content: center;
    align-items: center;
}
.pbg-overlay.open {
    display: flex;
}
.pbg-modal {
    background-color: var(--bg-color2);
    border-radius: 10px;
    padding: 30px;
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.pbg-modal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.pbg-modal-buttons-left,
.pbg-modal-buttons-right {
    display: flex;
    gap: 10px;
}
.account-item-notconnected {
    color:#990000;
    font-weight: bold;
}
.account-item-connected {
    color:#009900;
    font-weight: bold;
}
.index-links {
    position:fixed;
    bottom:20px;
    right:20px;
    font-style:italic;
}
@media (max-width: 1299px) and (orientation: portrait) {
    /* styles mobile */
    .connect-popup {
        width:90%;
    }
    .index-links {
        margin-left:90px;
        overflow: auto;
    }
    .main {
        padding: 0;
        overflow: hidden;
    }
    .mobil-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height:75px;
        display: flex;
        text-align: center;
        background-color: var(--bg-hard);
        transition: transform 0.3s ease, height 0.3s ease;
        transform: translateY(0);
        overflow: hidden;
        z-index: 1000;
    }
    .mobil-menu.slide-up {
        transform: translateY(-100%);
        height: 0;
    }
    .mobil-menu .menu-button {
        display: block;
        width:80px;
    }
    .menu {
        display: block;
        z-index: 1000;
        height: 100dvh;
        border-radius: 0;
        width: 0;
        transition: width 0.3s ease;
        overflow: hidden;
        white-space: nowrap;
    }
    .menu.open {
        width: 250px;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 0 30px 10px black;
    }
    .content {
        margin: 75px 0 0 0; /* 75px = hauteur du mobil-menu fixé */
        height: calc(100dvh - 75px);
        overflow-y: auto; /* scroll vertical dans la zone sous le mobil-menu */
    }
    .content-div {
        border-radius: 0;
    }
    .dark-light-button {
        width:30px;
        height:30px;
        margin-left:calc(50% - 15px);
    } 
    .create-div, .publi-div {
        display: block;
    }
    .labelbutton {
        display: block;
        padding:10px;
        margin-top: 5px;
    }
    .account-item > td {
        padding: 10px 6px !important;
    }
    .col-modifier {
        display: none;
    }
    .col-hide-mobile {
        display: none;
    }
    /* Onglets - select sur mobile */
    .tabs-nav { display: none; }
    .tabs-select { display: block; }
    /* Messagerie - mobile */
    .msg-layout {
        flex-direction: column;
        gap: 0;
        height: calc(100dvh - 75px); /* 75px = hauteur du mobil-menu sticky */
        overflow: hidden;
    }
    .msg-conv-panel {
        width: 100% !important;
        flex: 1;
        min-height: 0;
    }
    /* Sur mobile un seul panneau visible à la fois  -  JS gère le switch */
    #msg-panel {
        display: none;
        flex: 1;
        min-height: 0;
        width: 100%;
    }
}

/* ── Messagerie privée ────────────────────────────────────────────────── */
.msg-layout {
    display: flex;
    gap: 20px;
    align-items: stretch;
    height: calc(100dvh - 40px); /* 100dvh - padding haut/bas de .main */
}
.msg-conv-panel {
    width: 300px;
    flex-shrink: 0;
    overflow-y: auto;
}
.msg-main-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#conv-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.msg-messages-wrap {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    padding-right: 4px; /* évite que la scrollbar colle au bord */
}
@media (pointer: coarse) {
    /* Évite la sélection accidentelle au scroll sur écran tactile */
    .msg-messages-wrap { user-select: none; -webkit-user-select: none; }
}
.msg-reply-wrap {
    flex-shrink: 0;
}

/* Liste des conversations */
.conv-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.conv-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    background: var(--bg-hard);
    border: 1px solid transparent;
}
.conv-item:hover {
    background: var(--bg-hard);
    border-color: var(--bg-revert);
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.conv-item.active {
    border-color: var(--bg-revert);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.conv-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-revert);
    color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 17px;
    flex-shrink: 0;
    letter-spacing: 0;
}
.conv-info {
    flex: 1;
    min-width: 0;
}
.conv-name {
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}
.conv-preview {
    font-size: 12px;
    opacity: .6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
}
.conv-date {
    font-size: 11px;
    opacity: .45;
    margin-top: 2px;
}
.conv-badge {
    background-color: #cc0000;
    color: white;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    flex-shrink: 0;
}

/* Messages */
.publi-msg-content {
    padding-top: 6px;
}
.msg-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.msg-file-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--bg-hard);
    cursor: pointer;
    transition: opacity .15s;
}
.msg-file-thumb:hover { opacity: .8; }
.msg-file-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--bg-hard);
    border-radius: 6px;
    font-size: 13px;
    color: var(--bg-revert);
    text-decoration: none;
}
.msg-file-link:hover { opacity: .8; }
.msg-file-icon { font-size: 16px; }

/* Bouton édition  -  visible au survol */
.publi-msg { position: relative; }
.msg-edit-btn {
    background: transparent;
    border: 1px solid var(--bg-hard);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
    margin-left: 8px;
    vertical-align: middle;
}
.publi-msg:hover .msg-edit-btn { opacity: 1; }

/* Sur écran tactile : le crayon est remplacé par l'appui long */
@media (hover: none) {
    .msg-edit-btn { display: none; }
}

/* Zone d'édition inline */
.msg-edit-area textarea {
    width: 100%;
    min-height: 60px;
    height: auto;
    border-radius: 8px;
}

/* Aperçu des fichiers sélectionnés */
.file-preview-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg-hard);
    border-radius: 5px;
    font-size: 12px;
}

/* Bouton retour mobile */
.btn-back {
    font-size: 12px;
    padding: 4px 10px;
}

/* Barre d'outils de réponse (joindre + envoyer) */
.msg-reply-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
/* Bouton icône rond 40×40 (joindre / micro) */
.msg-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-color2);
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .2s;
}
.msg-icon-btn:hover { background: var(--bg-revert); }
.msg-icon-btn:hover .invert-icon,
.msg-dl-btn:hover .invert-icon,
.msg-file-link:hover .invert-icon,
.msg-edit-btn:hover .invert-icon,
.tag-edit-btn:hover .invert-icon,
#btn-delete-conv:hover .invert-icon,
#btn-voice-delete:hover .invert-icon,
#btn-publi-voice-del:hover .invert-icon { filter: var(--icon-filter-hover); }
/* ── Lecteur vocal custom ────────────────────────────────────────────────── */
.pbg-voice-player {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-color2);
    border-radius: 20px;
    max-width: 300px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
}
.vp-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-color, #ccc);
    background: var(--bg-color);
    color: var(--fg-color);
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.vp-btn:hover { background: var(--bg-revert); color: var(--bg-color); border-color: transparent; }
.vp-btn.vp-playing { background: #990000; color: #fff; border-color: #990000; }
.vp-btn.vp-playing:hover { background: #bb0000; border-color: #bb0000; }
.vp-bar {
    flex: 1;
    height: 4px;
    background: var(--border-color, #ccc);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}
.vp-progress {
    height: 100%;
    background: #990000;
    border-radius: 2px;
    width: 0%;
    pointer-events: none;
}
.vp-time {
    font-size: 11px;
    color: var(--fg-muted);
    flex-shrink: 0;
    min-width: 80px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.msg-edit-save, .msg-edit-cancel { background: var(--bg-color2); }
/* Wrapper textarea : les boutons sont superposés à droite */
.msg-input-wrap {
    position: relative;
    display: block;
}
.msg-input-wrap textarea {
    width: 100%;
    min-height: 52px;
    padding-right: 96px;
    box-sizing: border-box;
}
.msg-input-actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
}

/* ── Spinner inline bouton ──────────────────────────────────── */
.pbg-spinner {
    width: 16px; height: 16px;
    vertical-align: middle;
    display: inline-block;
    animation: pbg-spin 2.8s linear infinite;
}
.pbg-spinner .pbg-track { opacity: .15; }
.pbg-spinner .pbg-arc   { stroke-linecap: round; animation: pbg-dash 2s ease-in-out infinite; }
@keyframes pbg-spin { to { transform: rotate(360deg); } }
@keyframes pbg-dash {
    0%   { stroke-dasharray:   2, 113; stroke-dashoffset:    0; }
    40%  { stroke-dasharray:  98, 113; stroke-dashoffset:  -18; }
    100% { stroke-dasharray:   2, 113; stroke-dashoffset: -113; }
}