/* ========================================================================
   admed-chat - Feuille de style globale
   Variables CSS pour les thèmes (clair / sombre / bleu / vert / sépia)
   Layout 2 colonnes centré, max 1200px, mes messages à droite (80% largeur)
   ======================================================================== */

/* ----- Thème par défaut (clair) ----- */
:root,
[data-theme="clair"] {
    --bg-app:        #f4f5f7;
    --bg-surface:    #ffffff;
    --bg-surface-2:  #fafbfc;
    --bord:          #e3e6ea;
    --texte:         #1c1f24;
    --texte-doux:    #6a737d;
    --primaire:      #4a5b8c;          /* bleu doux comme la capture */
    --primaire-clair:#5e6fa1;
    --primaire-fonce:#3a4970;
    --primaire-texte:#ffffff;
    --bulle-recue:   #eef0f2;
    --bulle-recue-tx:#1c1f24;
    --hover:         #f0f2f4;
    --rouge:         #c84f4f;
    --vert:          #65b06f;
    --ombre:         0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
}

[data-theme="sombre"] {
    --bg-app:        #14161a;
    --bg-surface:    #1d2025;
    --bg-surface-2:  #23272d;
    --bord:          #2e333a;
    --texte:         #e7eaee;
    --texte-doux:    #97a0ab;
    --primaire:      #6781c0;
    --primaire-clair:#7c95d3;
    --primaire-fonce:#4a5b8c;
    --primaire-texte:#ffffff;
    --bulle-recue:   #2a2f36;
    --bulle-recue-tx:#e7eaee;
    --hover:         #262b32;
    --rouge:         #e07b7b;
    --vert:          #7fc28a;
    --ombre:         0 1px 2px rgba(0,0,0,.4);
}

[data-theme="bleu"] {
    --bg-app:        #eaf1f9;
    --bg-surface:    #ffffff;
    --bg-surface-2:  #f5f9fd;
    --bord:          #cfdcec;
    --texte:         #16263c;
    --texte-doux:    #5a6f8a;
    --primaire:      #2660a4;
    --primaire-clair:#3a78c2;
    --primaire-fonce:#1c4a82;
    --primaire-texte:#ffffff;
    --bulle-recue:   #e3ecf6;
    --bulle-recue-tx:#16263c;
    --hover:         #dde7f3;
    --rouge:         #c84f4f;
    --vert:          #2a8848;
    --ombre:         0 1px 3px rgba(20,40,80,.08);
}

[data-theme="vert"] {
    --bg-app:        #eef5ee;
    --bg-surface:    #ffffff;
    --bg-surface-2:  #f5faf5;
    --bord:          #cfe0d0;
    --texte:         #1a2c1d;
    --texte-doux:    #5a7560;
    --primaire:      #3d7a4a;
    --primaire-clair:#549363;
    --primaire-fonce:#2c5e36;
    --primaire-texte:#ffffff;
    --bulle-recue:   #e2ece3;
    --bulle-recue-tx:#1a2c1d;
    --hover:         #dbe8dc;
    --rouge:         #b85050;
    --vert:          #3d7a4a;
    --ombre:         0 1px 3px rgba(20,60,30,.08);
}

[data-theme="sepia"] {
    --bg-app:        #f4ecdc;
    --bg-surface:    #fbf6ec;
    --bg-surface-2:  #f6efe0;
    --bord:          #d8c9a8;
    --texte:         #3a2f1c;
    --texte-doux:    #7a6a4d;
    --primaire:      #8a6a3a;
    --primaire-clair:#a98552;
    --primaire-fonce:#6e522a;
    --primaire-texte:#fbf6ec;
    --bulle-recue:   #ece2cc;
    --bulle-recue-tx:#3a2f1c;
    --hover:         #ebe1c8;
    --rouge:         #b04848;
    --vert:          #6a8443;
    --ombre:         0 1px 3px rgba(60,40,20,.08);
}

/* ----- Reset / base ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* L'attribut HTML `hidden` doit toujours masquer l'élément, même si une
   règle CSS pose `display: flex / grid / table` dessus. */
[hidden] { display: none !important; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: var(--texte);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
a { color: var(--primaire); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Scrollbar fine et discrète (Firefox + Chrome/Edge/Safari) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bord) transparent;
}
*::-webkit-scrollbar          { width: 8px; height: 8px; }
*::-webkit-scrollbar-track    { background: transparent; }
*::-webkit-scrollbar-thumb    { background: var(--bord); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--texte-doux); }

/* =========================================================================
   PAGE LOGIN
   ========================================================================= */
.page-login {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 1rem;
}
.login-card {
    width: 100%; max-width: 380px;
    background: var(--bg-surface); border: 1px solid var(--bord);
    border-radius: 12px; padding: 2rem;
    box-shadow: var(--ombre);
}
.login-card h1 { margin: 0 0 .25rem; font-size: 1.6rem; color: var(--primaire); }
.login-card .subtitle { margin: 0 0 1.5rem; color: var(--texte-doux); font-size: .9rem; }
.login-card label {
    display: block; margin-bottom: 1rem; font-size: .85rem;
    color: var(--texte-doux); font-weight: 500;
}
.login-card input {
    display: block; width: 100%; margin-top: .35rem;
    padding: .55rem .75rem; border: 1px solid var(--bord); border-radius: 6px;
    background: var(--bg-surface-2);
}
.login-card input:focus {
    outline: 2px solid var(--primaire-clair); outline-offset: -1px;
    background: var(--bg-surface);
}
.login-card button[type=submit] {
    width: 100%; padding: .65rem; border: 0; border-radius: 6px;
    background: var(--primaire); color: var(--primaire-texte); font-weight: 500;
}
.login-card button[type=submit]:hover { background: var(--primaire-fonce); }
.erreur {
    padding: .5rem .75rem; margin-bottom: 1rem; border-radius: 6px;
    background: rgba(200,79,79,.1); color: var(--rouge); font-size: .85rem;
}

/* =========================================================================
   PAGE CHAT
   ========================================================================= */
.page-chat { display: flex; flex-direction: column; height: 100vh; }

/* ----- Top bar ----- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem 1.25rem;
    background: var(--bg-surface); border-bottom: 1px solid var(--bord);
    flex-shrink: 0;
}
.topbar-titre { font-weight: 600; color: var(--primaire); }
.topbar-user { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }

/* =========================================================================
   STATUT — pastilles colorées + sélecteur dropdown dans la topbar
   ========================================================================= */
.statut-pastille {
    display: inline-block;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--texte-doux);
    border: 2px solid var(--bg-surface);
    box-sizing: content-box;
    flex-shrink: 0;
}
.statut-disponible      { background: #65b06f; }   /* vert */
.statut-consultation    { background: #c84f4f; }   /* rouge */
.statut-reunion         { background: #e09250; }   /* orange */
.statut-pause           { background: #e6c84a; }   /* jaune */
.statut-deplacement     { background: #9b6bb8; }   /* violet */
.statut-ne_pas_deranger { background: #4a4a4a; }   /* gris foncé */
.statut-retour          { background: #4a8acb; }   /* bleu */
.statut-deconnecte      { background: #d0d0d0; }   /* gris clair */

/* Sélecteur dans la topbar */
.statut-selecteur { position: relative; margin-left: .5rem; }
.statut-bouton {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .6rem;
    border: 1px solid var(--bord); border-radius: 6px;
    background: var(--bg-surface);
    color: var(--texte);
    font-size: .82rem;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.statut-bouton:hover { background: var(--hover); border-color: var(--primaire-clair); }
.statut-libelle { white-space: nowrap; }

.statut-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
    min-width: 200px;
    background: var(--bg-surface);
    border: 1px solid var(--bord);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
    padding: .25rem 0;
}
.statut-option {
    display: flex; align-items: center; gap: .55rem;
    width: 100%;
    padding: .45rem .75rem;
    background: transparent; border: 0;
    color: var(--texte);
    font-size: .85rem;
    text-align: left;
    cursor: pointer;
}
.statut-option:hover { background: var(--hover); }

/* Pastille superposée sur les avatars (en bas à droite) */
.avatar-wrap { position: relative; display: inline-block; line-height: 0; }
.avatar-wrap .statut-pastille {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 11px; height: 11px;
    pointer-events: none;
}
.avatar-wrap.taille-petit  .statut-pastille { width: 11px; height: 11px; }
.avatar-wrap.taille-moyen  .statut-pastille { width: 13px; height: 13px; }

/* Pastille inline dans les listes (à côté du nom) */
.statut-inline {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .72rem; color: var(--texte-doux);
    margin-top: 1px;
}
.statut-inline .statut-pastille {
    width: 8px; height: 8px; border-width: 1px;
}
.lien-deconnexion {
    margin-left: .75rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 6px;
    color: var(--texte-doux); font-size: 1.05rem;
    transition: background .12s, color .12s;
}
.lien-deconnexion:hover { background: var(--hover); color: var(--rouge); text-decoration: none; }

/* ----- Layout central ----- */
.layout {
    flex: 1; display: flex; gap: 1rem;
    max-width: 1280px; width: 100%; margin: 0 auto;
    padding: 1rem 1rem 1rem .5rem;
    min-height: 0;       /* indispensable pour que le flex s'adapte au contenu */
    position: relative;  /* pour l'overlay de la modale documents */
}

/* ----- Sidebar verticale 70px ----- */
.sidebar {
    width: 70px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center;
    gap: .35rem; padding: .5rem 0;
    background: var(--bg-surface);
    border: 1px solid var(--bord);
    border-radius: 8px;
    box-shadow: var(--ombre);
}
.btn-sidebar {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--texte-doux);
    font-size: 1.25rem;
    transition: background .12s, color .12s;
}
.btn-sidebar:hover { background: var(--hover); color: var(--texte); }
.btn-sidebar.actif {
    background: var(--primaire);
    color: var(--primaire-texte);
}

/* ----- Avatars ----- */
.avatar { border-radius: 10%; object-fit: cover; background: var(--bg-surface-2); display: block; }
.avatar-petit  { width: 45px; height: 45px; }
.avatar-moyen  { width: 44px; height: 44px; }
.avatar-grand  { width: 56px; height: 56px; }

/* =========================================================================
   COLONNE GAUCHE : LISTE DES CONVERSATIONS
   ========================================================================= */
.colonne-conversations {
    width: 320px; flex-shrink: 0;
    display: flex; flex-direction: column; gap: .75rem; min-height: 0;
    position: relative;
}

/* Panneau de suggestions sous le champ de recherche */
.suggestions {
    position: absolute;
    top: 56px; left: 0; right: 0;
    z-index: 50;
    max-height: 320px; overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--bord);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.suggestion-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--bord);
}
.suggestion-item:last-child { border-bottom: 0; }
.suggestion-item:hover,
.suggestion-item.actif { background: var(--hover); }
.suggestion-item .avatar,
.suggestion-item .avatar-wrap .avatar { width: 45px; height: 45px; }
.suggestion-textes { flex: 1; min-width: 0; }
.suggestion-nom    { font-weight: 500; }
.suggestion-service{ font-size: .75rem; color: var(--texte-doux); }
.suggestion-vide   { padding: .75rem; color: var(--texte-doux); font-style: italic; text-align: center; }

.barre-recherche {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem;
    background: var(--bg-surface); border: 1px solid var(--bord);
    border-radius: 8px; box-shadow: var(--ombre);
}
.barre-recherche input {
    flex: 1; border: 0; outline: none; background: transparent;
    padding: .25rem 0;
}
.btn-icone {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 0; border-radius: 6px; background: transparent;
    color: var(--texte-doux);
}
.btn-icone:hover { background: var(--hover); color: var(--texte); }

.liste-conversations {
    list-style: none; margin: 0; padding: 0;
    background: var(--bg-surface); border: 1px solid var(--bord);
    border-radius: 8px; box-shadow: var(--ombre);
    overflow-y: auto; flex: 1;
}
.liste-conversations .placeholder {
    padding: 1rem; color: var(--texte-doux); font-style: italic;
}
.item-conv {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .85rem; border-bottom: 1px solid var(--bord);
    border-right: 4px solid transparent;   /* placeholder pour éviter saut visuel */
    cursor: pointer; transition: background .1s, border-color .1s;
}
.item-conv.a-non-lus { border-right-color: #4a5b8c; }
.item-conv:last-child { border-bottom: 0; }
.item-conv:hover { background: var(--hover); }
.item-conv.actif { background: var(--hover); }
.item-conv-textes { flex: 1; min-width: 0; }
.item-conv-libelle {
    font-weight: 500; color: var(--texte);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-conv-non-lus {
    color: var(--rouge); font-size: .8rem; font-weight: 600; margin-top: .15rem;
}
.item-conv-photos { display: flex; }
.item-conv-photos .avatar { margin-left: -8px; border: 2px solid var(--bg-surface); }
.item-conv-photos .avatar:first-child { margin-left: 0; }

.icone-groupe {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-surface-2); color: var(--texte-doux);
}

/* =========================================================================
   COLONNE DROITE : CONVERSATION ACTIVE
   ========================================================================= */
.colonne-conversation {
    flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
    background: var(--bg-surface); border: 1px solid var(--bord);
    border-radius: 8px; box-shadow: var(--ombre); overflow: hidden;
}
.vide-state {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: var(--texte-doux); font-style: italic; padding: 2rem;
}

.entete-conv {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem; border-bottom: 1px solid var(--bord);
    background: var(--bg-surface);
}
.btn-retour {
    display: none;       /* visible uniquement en mobile */
    width: 32px; height: 32px; border: 0; background: transparent;
    color: var(--texte-doux); border-radius: 6px;
}
.entete-conv-titre { flex: 1; font-weight: 600; }
.btn-ajouter-membre {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 0; border-radius: 6px;
    background: transparent; color: var(--texte-doux);
    font-size: 1rem;
    transition: background .12s, color .12s;
}
.btn-ajouter-membre:hover { background: var(--hover); color: var(--primaire); }

/* Message système (rejoint la conversation, etc.) */
.message-systeme {
    align-self: center;
    max-width: 80%;
    margin: .5rem 0;
    padding: .35rem .85rem;
    background: var(--bg-surface-2);
    border: 1px dashed var(--bord);
    border-radius: 14px;
    color: var(--texte-doux);
    font-size: .82rem;
    font-style: italic;
    text-align: center;
}

.fil-messages {
    flex: 1; overflow-y: auto;
    padding: 1rem;
    display: flex; flex-direction: column; gap: .5rem;
    background: var(--bg-surface-2);
}

/* Bulles */
.message {
    display: flex; flex-direction: column;
    max-width: 80%;          /* largeur demandée */
}
.message.recu  { align-self: flex-start; }
.message.mien  { align-self: flex-end; align-items: flex-end; }

.message-meta {
    font-size: .7rem; color: var(--texte-doux); margin-bottom: .15rem;
    padding: 0 .25rem;
}
.message-bulle {
    padding: .5rem .75rem; border-radius: 14px;
    line-height: 1.4; white-space: pre-wrap; word-wrap: break-word;
    box-shadow: var(--ombre);
}
.message.mien .message-bulle {
    background: var(--primaire); color: var(--primaire-texte);
    border-bottom-right-radius: 4px;
}
.message.recu .message-bulle {
    background: var(--bulle-recue); color: var(--bulle-recue-tx);
    border-bottom-left-radius: 4px;
}

/* Fichiers attachés dans une bulle (vignette image ou lien fichier) */
.message-fichiers {
    display: flex; flex-direction: column; gap: .35rem;
    margin-top: .3rem;
}
.fichier-image img {
    max-width: 280px; max-height: 280px;
    border-radius: 8px; display: block; cursor: pointer;
    object-fit: cover;
}
.fichier-lien {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem .6rem;
    border-radius: 6px;
    background: rgba(0,0,0,.05);
    color: inherit; text-decoration: none;
    font-size: .85rem;
    max-width: 280px;
}
.message.mien .fichier-lien { background: rgba(255,255,255,.18); }
.fichier-lien:hover { background: rgba(0,0,0,.1); text-decoration: none; }
.message.mien .fichier-lien:hover { background: rgba(255,255,255,.3); }
.fichier-lien-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fichier-lien-taille { color: var(--texte-doux); font-size: .72rem; flex-shrink: 0; }
.message.mien .fichier-lien-taille { color: rgba(255,255,255,.7); }

/* Zone des pièces attachées en attente d'envoi (au-dessus de la saisie) */
.zone-pieces {
    display: flex; align-items: center; gap: .5rem;
    height: 60px;
    padding: 0 .85rem;
    background: var(--bg-surface);
    border-top: 1px solid var(--bord);
    overflow-x: auto; overflow-y: hidden;
}
.zone-pieces:empty { display: none; }
.piece-attente {
    flex-shrink: 0;
    display: flex; align-items: center; gap: .4rem;
    padding: .35rem .5rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--bord);
    border-radius: 6px;
    font-size: .8rem;
    max-width: 220px;
}
.piece-attente .piece-nom {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;
}
.piece-attente .piece-taille { color: var(--texte-doux); font-size: .72rem; }
.piece-attente .piece-supprimer {
    border: 0; background: transparent; cursor: pointer;
    color: var(--texte-doux); padding: 0; line-height: 1;
}
.piece-attente .piece-supprimer:hover { color: var(--rouge); }

/* Indicateur drag-drop sur la zone de saisie */
.zone-saisie.drop-actif {
    background: var(--hover);
    box-shadow: inset 0 0 0 2px var(--primaire-clair);
}

/* Zone de saisie */
.zone-saisie {
    display: flex; align-items: flex-end; gap: .5rem;
    padding: .65rem .85rem;
    background: var(--bg-surface); border-top: 1px solid var(--bord);
    transition: background .15s, box-shadow .15s;
}
.btn-trombone {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 0; border-radius: 50%; background: transparent;
    color: var(--texte-doux); flex-shrink: 0;
}
.btn-trombone:hover { background: var(--hover); color: var(--texte); }
.zone-saisie textarea {
    flex: 1;
    min-height: 38px;
    border: 1px solid var(--bord); border-radius: 5px;
    padding: .5rem .9rem;
    resize: none; outline: none;
    overflow-y: hidden;     /* géré dynamiquement par autosize() */
    line-height: 1.4;
    background: var(--bg-surface-2);
}
.zone-saisie textarea:focus {
    border-color: var(--primaire-clair); background: var(--bg-surface);
}
.btn-envoyer {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 37px;
    border: 0; border-radius: 12%; background: var(--primaire);
    color: var(--primaire-texte);
    margin-bottom: 1px;
}
.btn-envoyer:disabled { background: var(--texte-doux); cursor: not-allowed; }
.btn-envoyer:hover:not(:disabled) { background: var(--primaire-fonce); }

/* =========================================================================
   MODAL SÉLECTEUR DE PERSONNEL
   ========================================================================= */
.modal {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.35);
    padding: 1rem;
}
/* La règle globale [hidden] { display: none !important } gère déjà le masquage. */

/* =========================================================================
   MODALE DOCUMENTS — couvre exactement la zone des trois colonnes
   (sidebar + liste convs + conversation), alignée sur leurs bords.
   ========================================================================= */
.modal-documents {
    /* Enfant direct de .layout (qui est position: relative) :
       on se colle sur ses bords intérieurs grâce aux paddings du layout. */
    position: absolute;
    top: 1rem; right: 1rem; bottom: 1rem; left: .5rem;
    background: transparent;
    align-items: stretch; justify-content: stretch;
    padding: 0;
}
.documents-contenu {
    flex: 1;
    display: flex; flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--bord);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    overflow: hidden;
    min-height: 0;
}
.documents-entete {
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 1.25rem;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--bord);
    flex-shrink: 0;
}
.documents-entete h2 {
    margin: 0; font-size: 1.05rem; font-weight: 600;
    display: flex; align-items: center; gap: .55rem;
    color: var(--texte);
}
.documents-entete h2 i { color: var(--primaire); }
.documents-entete h2 span { display: inline; }

.documents-corps {
    flex: 1; min-height: 0; overflow: auto;
    padding: 0;
}

/* Pied de page partagé par les modales (sélecteur, etc.) */
.documents-pied {
    display: flex; align-items: center; gap: .5rem;
    padding: .65rem 1rem;
    background: var(--bg-surface-2);
    border-top: 1px solid var(--bord);
    flex-shrink: 0;
}
.documents-pied input[type=text] {
    flex: 1;
    padding: .5rem .75rem;
    border: 1px solid var(--bord); border-radius: 6px;
    background: var(--bg-surface);
}

/* Variante pour le sélecteur de personnels : padding interne pour
   l'avertissement et la grille. */
.selecteur-corps {
    display: flex; flex-direction: column; gap: .75rem;
    padding: .75rem;
}
.selecteur-corps .liste-personnels {
    flex: 1; min-height: 0; overflow: auto;
    background: var(--bg-surface);
    border: 1px solid var(--bord);
    border-radius: 8px;
}
.documents-vide {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; gap: .75rem;
    color: var(--texte-doux); font-style: italic;
    padding: 2rem;
}
.documents-vide i { color: var(--bord); }

.documents-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.documents-table thead th {
    position: sticky; top: 0;
    background: var(--bg-surface-2);
    color: var(--texte-doux);
    font-weight: 600;
    text-align: left;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--bord);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.documents-table thead th:hover { background: var(--hover); }
.documents-table thead th.col-actions { cursor: default; text-align: right; }
.documents-table thead th.col-actions:hover { background: var(--bg-surface-2); }
.documents-table thead th.tri-asc::after  { content: ' ▲'; font-size: .7rem; }
.documents-table thead th.tri-desc::after { content: ' ▼'; font-size: .7rem; }

.documents-table tbody td {
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--bord);
    vertical-align: middle;
}
.documents-table tbody tr:nth-child(even) { background: var(--bg-surface-2); }
.documents-table tbody tr:hover           { background: var(--hover); }
.documents-table tbody tr:last-child td   { border-bottom: 0; }

/* Ligne du document ouvert : surlignage vert amande pour repérage */
.documents-table tbody tr.consulte,
.documents-table tbody tr.consulte:nth-child(even) {
    background: #e6f0d6;       /* vert amande clair */
}
[data-theme="sombre"] .documents-table tbody tr.consulte,
[data-theme="sombre"] .documents-table tbody tr.consulte:nth-child(even) {
    background: #2e3a26;
}

.doc-cell-exp {
    display: flex; align-items: center; gap: .5rem;
}
.doc-cell-exp .avatar { width: 28px; height: 28px; }

.doc-cell-nom {
    max-width: 300px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-type-icone { color: var(--texte-doux); margin-right: .35rem; }

.doc-actions {
    display: flex; gap: .35rem; justify-content: flex-end;
    white-space: nowrap;
}
.btn-doc {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .6rem;
    border: 1px solid var(--bord);
    border-radius: 5px;
    background: var(--bg-surface);
    color: var(--texte);
    font-size: .8rem;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.btn-doc:hover    { background: var(--hover); }
.btn-doc.danger:hover {
    background: rgba(200,79,79,.12); border-color: var(--rouge); color: var(--rouge);
}

/* =========================================================================
   MODALE RECHERCHE — même structure que le gestionnaire de documents
   ========================================================================= */
.recherche-corps {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    overflow: hidden;
}
.recherche-barre {
    padding: .65rem 1rem;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--bord);
    flex-shrink: 0;
}
.recherche-barre input {
    width: 100%;
    padding: .55rem .85rem;
    border: 1px solid var(--bord); border-radius: 6px;
    background: var(--bg-surface);
    font-size: .95rem;
}
.recherche-barre input:focus {
    outline: 2px solid var(--primaire-clair); outline-offset: -1px;
}
.recherche-resultats { flex: 1; overflow: auto; }
.recherche-extrait {
    color: var(--texte);
    font-size: .85rem;
    line-height: 1.45;
    max-width: 600px;
}
.recherche-extrait mark {
    background: #fff4a3;
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 600;
}
[data-theme="sombre"] .recherche-extrait mark { background: #5a4a1a; color: #fff7c0; }
.recherche-source {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .15rem .4rem;
    font-size: .7rem; border-radius: 3px;
    background: var(--bg-surface-2); color: var(--texte-doux);
    margin-right: .35rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.recherche-source.fichier { background: rgba(74,91,140,.12); color: var(--primaire); }
.recherche-vide {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; gap: .75rem;
    color: var(--texte-doux); font-style: italic; padding: 2rem;
    text-align: center;
}

/* Surlignage temporaire d'un message ciblé par la recherche */
.message.cible-recherche .message-bulle {
    animation: cible-recherche 3s ease-out;
}
@keyframes cible-recherche {
    0%, 30% { box-shadow: 0 0 0 3px #ffd24c, var(--ombre); }
    100%    { box-shadow: 0 0 0 0 transparent, var(--ombre); }
}

/* Modale d'aperçu de fichier (image, PDF, texte) */
.modal-apercu .apercu-contenu {
    width: 95vw; height: 95vh;
    display: flex; flex-direction: column;
    background: var(--bg-surface);
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.apercu-entete {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem 1rem;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--bord);
    flex-shrink: 0;
}
.apercu-titre {
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.apercu-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.apercu-actions a, .apercu-actions button {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .7rem;
    border: 1px solid var(--bord); border-radius: 6px;
    background: var(--bg-surface); color: var(--texte);
    font-size: .85rem; cursor: pointer; text-decoration: none;
}
.apercu-actions a:hover, .apercu-actions button:hover { background: var(--hover); }
.apercu-corps {
    flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    background: #1a1a1a;
    overflow: auto;
}
.apercu-corps img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
.apercu-corps iframe {
    width: 100%; height: 100%; border: 0;
    background: white;
}
.apercu-corps pre {
    margin: 0; padding: 1rem;
    width: 100%; height: 100%;
    overflow: auto;
    background: var(--bg-surface);
    color: var(--texte);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .85rem; line-height: 1.45;
    white-space: pre-wrap; word-wrap: break-word;
}
.modal-contenu {
    width: 100%; max-width: 1000px; max-height: 86vh;
    display: flex; flex-direction: column; gap: .75rem;
    background: var(--bg-app); padding: 1rem; border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.modal-entete {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 .25rem;
}
.modal-entete h2 {
    margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--texte);
}

.liste-personnels {
    flex: 1; overflow-y: auto;
    background: var(--bg-surface); border: 1px solid var(--bord);
    border-radius: 8px;
}
.service-bloc { padding: .5rem 0; }
.service-titre {
    padding: .4rem .75rem;
    font-size: .8rem; font-weight: 600;
    color: var(--texte-doux); text-transform: uppercase; letter-spacing: .04em;
    background: var(--bg-surface-2); border-bottom: 1px solid var(--bord);
}
.service-grille {
    display: grid;
    /* minmax(0, 1fr) : oblige les colonnes à respecter strictement la largeur
       allouée même si le contenu est large. Sans ça, un nom long ou un statut
       comme "En consultation" élargit sa colonne et déséquilibre la grille. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px; background: var(--bord);
}
.cellule-personnel {
    padding: .75rem .85rem;
    background: var(--bg-surface);
    cursor: pointer; user-select: none;
    font-size: .85rem;
    display: flex; align-items: flex-start;       /* haut : statut sur la ligne du nom */
    gap: .75rem;
    min-height: 90px;
}
.cellule-statut {
    display: flex; align-items: center; gap: .35rem;
    flex-shrink: 0;
    font-size: .72rem;
    color: var(--texte-doux);
    margin-left: auto;     /* pousse à droite, en face du nom */
    max-width: 150px;
    /* Aligne sur la ligne du nom : compense le padding vertical de la cellule
       et la hauteur d'une ligne typique du libellé du nom (~1.2 em) */
    margin-top: 2px;
}
.cellule-statut-texte {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cellule-personnel:hover { background: var(--hover); }
.cellule-personnel.selectionne {
    background: rgba(101,176,111,.18);
    color: var(--vert); font-weight: 500;
}
.cellule-personnel.deja-membre {
    opacity: .55;
    cursor: not-allowed;
    background: var(--bg-surface-2);
}
.cellule-personnel.deja-membre::after {
    content: '✓ déjà membre';
    margin-left: auto;
    font-size: .68rem; color: var(--texte-doux);
}

/* Bandeau d'avertissement dans la modale d'ajout */
.modal-avertissement {
    background: rgba(200, 140, 60, .12);
    border: 1px solid rgba(200, 140, 60, .35);
    border-radius: 6px;
    padding: .55rem .75rem;
    color: var(--texte);
    font-size: .82rem;
    line-height: 1.45;
    display: flex; gap: .55rem; align-items: flex-start;
}
.modal-avertissement i {
    color: #c8893c; flex-shrink: 0; margin-top: 2px;
}
.cellule-personnel .avatar,
.cellule-personnel .avatar-wrap .avatar { width: 40px; height: 40px; flex-shrink: 0; }
.cellule-personnel .avatar-wrap { flex-shrink: 0; }
.cellule-textes  {
    flex: 1; min-width: 0; line-height: 1.3;
    align-self: stretch;
    display: flex; flex-direction: column;
}
.cellule-nom     { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cellule-emploi  {
    font-size: .72rem;
    color: var(--texte-doux);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cellule-personnel.selectionne .cellule-emploi { color: var(--vert); opacity: .8; }

/* Ligne planning : "Présent.e jusqu'à 16h00", "Congés jusqu'au 17/05", etc. */
.cellule-planning {
    font-size: .72rem;
    margin-top: auto;             /* pousse en bas dans la cellule */
    padding-top: .5rem;           /* respiration au-dessus */
    display: inline-flex; align-self: flex-start; align-items: center; gap: .35rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
/* Pastille colorée portée par un span interne, pour que le padding/fond
   ne s'applique qu'au libellé et pas au "margin-top: auto" */
.cellule-planning > .planning-tag {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 2px 8px;
    border-radius: 4px;
}
.cellule-planning i { font-size: .7rem; opacity: .8; }
.cellule-planning.ton-present  > .planning-tag { color: #2f7a3a; background: rgba(101,176,111,.12); }
.cellule-planning.ton-absent   > .planning-tag { color: var(--texte-doux); background: var(--bg-surface-2); }
.cellule-planning.ton-conge    > .planning-tag { color: #b08020; background: rgba(230,200,74,.18); }
.cellule-planning.ton-maladie  > .planning-tag { color: #b54040; background: rgba(200,79,79,.12); }
.cellule-planning.ton-inconnu  > .planning-tag { color: var(--texte-doux); background: transparent; }
[data-theme="sombre"] .cellule-planning.ton-present > .planning-tag { color: #82c98e; background: rgba(101,176,111,.18); }
[data-theme="sombre"] .cellule-planning.ton-conge   > .planning-tag { color: #e0b860; background: rgba(230,200,74,.18); }
[data-theme="sombre"] .cellule-planning.ton-maladie > .planning-tag { color: #e07b7b; background: rgba(200,79,79,.18); }

.modal-actions {
    display: flex; align-items: center; gap: .5rem;
    padding: .25rem 0;
}
.modal-actions input[type=text] {
    flex: 1; padding: .5rem .75rem;
    border: 1px solid var(--bord); border-radius: 6px;
    background: var(--bg-surface);
}
.btn-primaire {
    padding: .55rem 1.5rem; border: 0; border-radius: 6px;
    background: var(--primaire); color: var(--primaire-texte); font-weight: 500;
}
.btn-primaire:disabled {
    background: var(--texte-doux); cursor: not-allowed; opacity: .6;
}
.btn-primaire:hover:not(:disabled) { background: var(--primaire-fonce); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 768px) {
    .layout { flex-direction: column; padding: .5rem; gap: .5rem; }
    .colonne-conversations { width: auto; }
    .colonne-conversation { flex: 1; }
    .page-chat .layout.conv-active .colonne-conversations { display: none; }
    .page-chat .layout:not(.conv-active) .colonne-conversation { display: none; }
    .btn-retour { display: flex; align-items: center; justify-content: center; }
    .service-grille { grid-template-columns: repeat(2, 1fr); }

    /* Sidebar devient horizontale en haut sur mobile */
    .sidebar { width: auto; flex-direction: row; }
    .modal-documents { padding: .5rem; }

    /* On garde la grille personnels en 3 colonnes même en tablette,
       comme demandé. Le responsive plus serré est géré en <480px. */
    .service-grille { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    .service-grille { grid-template-columns: 1fr; }
    .message { max-width: 90%; }
}