/* ==========================================================================
   Le gestionnaire — feuille de style commune.
   Reprise des maquettes v2 du commanditaire (docs/maquettes/styles.css) :
   jetons clair/sombre, coquille, bandeau, panneau, dialogues. Les styles propres
   à un module s'ajoutent avec ce module. Aucun style en ligne (CSP).
   ========================================================================== */

@font-face { font-family: "Spectral"; font-weight: 500; font-display: swap; src: url("polices/spectral-500.d4f6bee97c64.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-weight: 600; font-display: swap; src: url("polices/spectral-600.ccd396b92abd.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-weight: 700; font-display: swap; src: url("polices/spectral-700.456f29ac2c8a.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 400 700; font-display: swap; src: url("polices/worksans-var.97b33529e13b.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 400; font-display: swap; src: url("polices/spacemono-400.049dfc5919c2.woff2") format("woff2"); }

/* Disposition : barre latérale claire à gauche · bandeau · contenu · panneau de détail à droite.
   Couleur : lin clair légèrement froid, encre bleu-noir (stylo-plume), une couleur par membre. */
:root {
  color-scheme: light;
  --fond: #f4f5f1; --surface: #ffffff; --surface-2: #eceee8; --survol: #f3f4ef;
  --encre: #1e2522; --encre-2: #59625d; --encre-3: #8d958f;
  --trait: #dde1da; --trait-2: #e9ece6;
  --accent: #27496f; --accent-2: #e3eaf3; --accent-encre: #27496f; --sur-accent: #ffffff;
  --partage: #6a4c93; --partage-2: #eee8f6;
  --commun: #2f7350; --commun-2: #e2f0e7;
  --anniv: #a2670a; --anniv-2: #f8ecd5;
  --tache: #39687a; --tache-2: #e0edf1;
  --lg-notes: #2a7f86; --lg-messagerie: #a2486e;
  /* Badges Projet des tâches : cinq couleurs, une par projet. */
  --pj0: #2f6b77; --pj0-2: #e0eef1; --pj1: #8a5a12; --pj1-2: #f6ead6; --pj2: #9b3d63; --pj2-2: #f6e3eb;
  --pj3: #4b5a8a; --pj3-2: #e6e9f4; --pj4: #5d6b1f; --pj4-2: #ebefd9;
  --alerte: #b23b2e; --alerte-2: #f8e3df;
  --moyen: #a2670a; --moyen-2: #f8ecd5;
  --bas: #2f7350; --bas-2: #e2f0e7;
  --barre: #fbfbf8; --barre-encre: #3d4541; --barre-3: #8d958f; --barre-survol: #eef0eb; --barre-actif: #e3eaf3;
  --r-s: 6px; --r-m: 12px; --r-l: 16px;
  --ombre-1: 0 1px 2px rgba(30,37,34,.05);
  --ombre-2: 0 20px 50px rgba(30,37,34,.16), 0 2px 6px rgba(30,37,34,.06);
  --barre-l: 236px; --barre-l-r: 68px; --panneau-l: 440px;
  --titre: "Spectral", Georgia, serif;
  --texte: "Work Sans", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --fond: #141816; --surface: #1b201d; --surface-2: #232925; --survol: #212622;
  --encre: #e6ebe7; --encre-2: #a9b2ac; --encre-3: #737c76;
  --trait: #2e3531; --trait-2: #262c28;
  --accent: #8fb4dc; --accent-2: #22303f; --accent-encre: #a9c6e6; --sur-accent: #10151b;
  --partage: #b9a1dc; --partage-2: #2c2538; --commun: #84c39c; --commun-2: #1d2b22;
  --tache: #8cc3d4; --tache-2: #1c2a2f; --lg-notes: #7cc4c9; --lg-messagerie: #e39abb;
  --pj0: #8cc3d4; --pj0-2: #1c2a2f; --pj1: #e0b45e; --pj1-2: #33291a; --pj2: #e39bb9; --pj2-2: #3a2330;
  --pj3: #a9b5e0; --pj3-2: #252a3a; --pj4: #c2cf7e; --pj4-2: #2a2e1b;
  --anniv: #e0b45e; --anniv-2: #33291a; --alerte: #ec8a7c; --alerte-2: #3a2320;
  --moyen: #e0b45e; --moyen-2: #33291a; --bas: #84c39c; --bas-2: #1d2b22;
  --barre: #171b19; --barre-encre: #c9d0cb; --barre-3: #7a837d; --barre-survol: #212622; --barre-actif: #22303f;
  --ombre-1: 0 1px 2px rgba(0,0,0,.4); --ombre-2: 0 20px 50px rgba(0,0,0,.55);
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #141816; --surface: #1b201d; --surface-2: #232925; --survol: #212622;
  --encre: #e6ebe7; --encre-2: #a9b2ac; --encre-3: #737c76;
  --trait: #2e3531; --trait-2: #262c28;
  --accent: #8fb4dc; --accent-2: #22303f; --accent-encre: #a9c6e6; --sur-accent: #10151b;
  --partage: #b9a1dc; --partage-2: #2c2538; --commun: #84c39c; --commun-2: #1d2b22;
  --tache: #8cc3d4; --tache-2: #1c2a2f; --lg-notes: #7cc4c9; --lg-messagerie: #e39abb;
  --pj0: #8cc3d4; --pj0-2: #1c2a2f; --pj1: #e0b45e; --pj1-2: #33291a; --pj2: #e39bb9; --pj2-2: #3a2330;
  --pj3: #a9b5e0; --pj3-2: #252a3a; --pj4: #c2cf7e; --pj4-2: #2a2e1b;
  --anniv: #e0b45e; --anniv-2: #33291a; --alerte: #ec8a7c; --alerte-2: #3a2320;
  --moyen: #e0b45e; --moyen-2: #33291a; --bas: #84c39c; --bas-2: #1d2b22;
  --barre: #171b19; --barre-encre: #c9d0cb; --barre-3: #7a837d; --barre-survol: #212622; --barre-actif: #22303f;
  --ombre-1: 0 1px 2px rgba(0,0,0,.4); --ombre-2: 0 20px 50px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--encre); font: 14px/1.55 var(--texte); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; margin: 0; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-encre); text-decoration: none; }
[hidden] { display: none !important; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic-s { width: 15px; height: 15px; }
.discret { color: var(--encre-2); font-size: 12.5px; }
.tres-discret { color: var(--encre-3); font-size: 12px; }

/* ---------- Coquille ---------- */
.coquille { display: grid; grid-template-columns: var(--barre-l) 1fr; min-height: 100vh; transition: grid-template-columns .2s; }
html.repliee .coquille { grid-template-columns: var(--barre-l-r) 1fr; }

/* ---------- Barre latérale ---------- */
.barre { background: var(--barre); color: var(--barre-encre); border-right: 1px solid var(--trait); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 12px 12px; overflow: hidden; }
/* Marque : logo complet (format d'origine) ; barre repliée ou téléphone : le symbole seul. */
.marque { display: flex; justify-content: center; padding: 4px 0 24px; }
.marque svg { display: block; }
.marque-logo { width: 100%; max-width: 212px; height: auto; }
/* Marque (noyau/marque/) : SVG en ligne, couleurs du thème, une seule source pour le clair et le sombre. */
.lg-s { stroke-width: 1.5px; stroke-linejoin: round; }
.lg-contacts { fill: var(--accent); stroke: var(--accent); }
.lg-calendrier { fill: var(--commun); stroke: var(--commun); }
.lg-taches { fill: var(--anniv); stroke: var(--anniv); }
.lg-fichiers { fill: var(--partage); stroke: var(--partage); }
.lg-notes { fill: var(--lg-notes); stroke: var(--lg-notes); }
.lg-messagerie { fill: var(--lg-messagerie); stroke: var(--lg-messagerie); }
.lg-pic { fill: none; stroke: var(--surface); stroke-width: 2.3px; stroke-linecap: round; stroke-linejoin: round; }
.lg-encre { fill: var(--encre); }
.lg-encre-2 { fill: var(--encre-2); }
.lg-accent { fill: var(--accent-encre); }
.lg-detour { stroke: var(--surface); stroke-width: 2.5px; paint-order: stroke; }
.lg-filet { fill: none; stroke: var(--encre-3); stroke-width: 1.5px; stroke-linecap: round; }
.marque-symbole { display: none !important; width: 40px; height: 40px; }
html.repliee .marque-logo { display: none; }
html.repliee .marque-symbole { display: block !important; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--barre-encre); font-size: 13.5px; white-space: nowrap; position: relative; }
.nav a:hover { background: var(--barre-survol); color: var(--encre); }
.nav a.actif { background: var(--barre-actif); color: var(--accent-encre); font-weight: 600; }
.nav .compteur { margin-left: auto; background: var(--accent); color: var(--sur-accent); font-size: 11px; font-weight: 700; border-radius: 10px; padding: 0 7px; line-height: 18px; }
.nav .libelle { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav .externe { margin-left: auto; opacity: .6; flex: none; }
.nav-sep { height: 1px; background: var(--trait-2); margin: 10px 8px; }
.barre-pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 0; font-size: 11px; color: var(--barre-3); white-space: nowrap; }
.barre-pied .barre-version { margin-right: auto; }
.barre-aide { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 6px; color: var(--barre-3); text-decoration: none; font-size: 12px; }
.barre-aide:hover { color: var(--encre); background: var(--barre-survol); }
html.repliee .barre-aide .libelle { display: none; }
.btn-replier { background: none; border: 0; color: var(--barre-3); cursor: pointer; padding: 6px; border-radius: 6px; display: grid; place-items: center; }
.btn-replier:hover { color: var(--encre); background: var(--barre-survol); }
html.repliee .nav .nav-titre, html.repliee .nav .libelle, html.repliee .nav .externe, html.repliee .barre-version { display: none; }
html.repliee .nav .compteur { position: absolute; top: 2px; right: 2px; padding: 0 5px; font-size: 10px; line-height: 15px; }
html.repliee .nav a { justify-content: center; }
html.repliee .barre-pied { justify-content: center; }
html.repliee .btn-replier .ic { transform: scaleX(-1); }

/* ---------- Bandeau ---------- */
.principal { min-width: 0; display: flex; flex-direction: column; }
.bandeau { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 10px 28px; background: color-mix(in srgb, var(--fond) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait); }
.salut { font: 600 17px var(--titre); }
.salut .discret { font-family: var(--texte); font-weight: 400; margin-left: 8px; }
.bandeau-titre svg { display: block; height: 66px; width: auto; margin: -6px 0; }
/* Place trop juste pour le bandeau centré : il s'efface (le logo reste dans la barre). */
@media (max-width: 1360px) {
  .bandeau { grid-template-columns: 1fr auto; }
  .bandeau-titre { display: none; }
}
@media (max-width: 1800px) {
  html.panneau-ouvert .bandeau { grid-template-columns: 1fr auto; }
  html.panneau-ouvert .bandeau-titre { display: none; }
}
.bandeau-droite { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.btn-icone { background: none; border: 1px solid transparent; border-radius: 8px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--encre-2); cursor: pointer; }
.btn-icone:hover { background: var(--surface-2); color: var(--encre); }
.utilisateur { position: relative; }
.btn-utilisateur { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--trait); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; }
.btn-utilisateur:hover { border-color: var(--encre-3); }
.btn-utilisateur .nom { font-size: 13px; font-weight: 600; }
.pastille { background: var(--alerte); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0 6px; line-height: 18px; min-width: 18px; text-align: center; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-l); box-shadow: var(--ombre-2); overflow: hidden; z-index: 50; }
.menu-tete { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--trait-2); }
.menu-section { padding: 8px 0; border-bottom: 1px solid var(--trait-2); }
.menu-titre { font-size: 12px; font-weight: 600; color: var(--encre-2); padding: 4px 16px; display: flex; justify-content: space-between; }
.menu a, .menu .notif { display: flex; align-items: center; gap: 10px; padding: 8px 16px; color: var(--encre); font-size: 13px; }
.menu a:hover { background: var(--survol); }
.menu .notif .texte { flex: 1; }
.menu .deconnexion { color: var(--alerte); }
/* ---------- Page ---------- */
.page { padding: 22px 28px 48px; width: 100%; max-width: 1480px; margin: 0 auto; }
/* En-tête de page : titre et description côte à côte sur une ligne ; la description se tronque
   (texte complet en infobulle) pour ne jamais déplacer les boutons (Importer · Exporter · Nouveau). */
.page-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 33px; }
.page-tete > div:first-child { display: flex; align-items: baseline; gap: 14px; min-width: 0; flex: 1; }
.page-tete h1 { font-size: 26px; line-height: 1.15; flex: none; }
.page-tete .sous-titre { color: var(--encre-2); font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-tete .actions { flex: none; }
.actions { display: flex; gap: 8px; align-items: center; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--trait); background: var(--surface); color: var(--encre); border-radius: 8px; padding: 7px 13px; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--encre-3); }
.btn-principal { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.btn-principal:hover { filter: brightness(1.08); border-color: var(--accent); }
.btn-danger { color: var(--alerte); }
.btn-danger:hover { border-color: var(--alerte); }
.btn-plein-danger { background: var(--alerte); border-color: var(--alerte); color: #fff; }
.btn-lien { background: none; border: 0; padding: 0; color: var(--accent-encre); font-size: 12.5px; cursor: pointer; }
/* Action non autorisée : visible, grisée, raison en infobulle (aria-disabled, pas disabled,
   qui masquerait l'infobulle dans certains navigateurs). */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; border-color: var(--trait); background: var(--surface-2); }
.btn-petit { padding: 4px 9px; font-size: 12px; }
/* ---------- Cartes ---------- */
.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-m); box-shadow: var(--ombre-1); }


/* ---------- Barre d'outils (recherche à gauche, filtres, vue à droite) ---------- */
.outils { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.champ-recherche { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--trait); border-radius: 8px; padding: 6px 10px; width: 280px; color: var(--encre-3); }
.champ-recherche input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; color: var(--encre); font-size: 13px; }
.select { border: 1px solid var(--trait); background: var(--surface); border-radius: 8px; padding: 6px 10px; font-size: 13px; color: var(--encre); }

/* ---------- Légende des origines (une par liste, cliquable) ---------- */
.rangee-legende { display: flex; align-items: baseline; gap: 12px; margin: 2px 0 16px; }
.legende { display: flex; gap: 6px; flex-wrap: wrap; }
.legende a { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--trait); background: var(--surface); border-radius: 999px; padding: 4px 12px 4px 10px; font-size: 12.5px; color: var(--encre); }
.legende a:hover { border-color: var(--encre-3); }
.legende .pastille-couleur { width: 10px; height: 10px; border-radius: 3px; }
.legende .nb { font-size: 11.5px; color: var(--encre-2); background: var(--surface-2); border-radius: 999px; padding: 0 7px; font-weight: 600; }
.legende a.eteint { opacity: .45; }
.legende a.eteint .pastille-couleur { background: transparent; box-shadow: inset 0 0 0 1.5px var(--encre-3); }
.pc-moi { background: var(--accent); } .pc-commun { background: var(--commun); } .pc-taches { background: var(--tache); }
/* Origine sans aucun élément : grisée, sans effet. */
.legende .vide-origine { display: inline-flex; align-items: center; gap: 7px; border: 1px dashed var(--trait); border-radius: 999px; padding: 4px 12px 4px 10px; font-size: 12.5px; color: var(--encre-3); cursor: default; }
.legende .vide-origine .pastille-couleur { background: transparent; box-shadow: inset 0 0 0 1.5px var(--encre-3); }
.btn-discret { border-color: transparent; background: none; color: var(--encre-2); }
.btn-discret:hover { color: var(--encre); border-color: var(--trait); }

/* ---------- Tableaux (tri par clic sur chaque en-tête) ---------- */
.tableau { width: 100%; border-collapse: collapse; }
.tableau th { text-align: left; font-size: 12.5px; color: var(--encre-2); font-weight: 500; padding: 10px 14px; border-bottom: 1px solid var(--trait); background: var(--surface); }
.tableau th a.tri { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.tableau th a.tri:hover { color: var(--encre); }
.tableau th[aria-sort] a.tri { color: var(--encre); font-weight: 600; }
.tableau th[aria-sort="ascending"] a.tri::after { content: "▲"; font-size: 9px; }
.tableau th[aria-sort="descending"] a.tri::after { content: "▼"; font-size: 9px; }
.tableau td { padding: 12px 14px; border-bottom: 1px solid var(--trait-2); font-size: 13.5px; vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr[data-panneau] { cursor: pointer; }
.tableau tbody tr[data-panneau]:hover { background: var(--survol); }
.tableau tbody tr.selection { background: var(--accent-2); }
.tableau td .origine { margin-top: 3px; }
.identite { display: flex; align-items: center; gap: 10px; }
.identite .principal-txt { font-weight: 600; white-space: nowrap; }
.tableau td { white-space: nowrap; }
/* Ascenseur : en-têtes toujours visibles. */
.defilement-tableau { max-height: calc(100vh - 290px); min-height: 240px; overflow: auto; border-radius: var(--r-m) var(--r-m) 0 0; }
.defilement-tableau .tableau th { position: sticky; top: 0; z-index: 1; }
.pied-liste { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid var(--trait); color: var(--encre-2); font-size: 12.5px; }
.pagination { display: flex; gap: 4px; }
.etiquette { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; border: 1px solid var(--trait); color: var(--encre-2); border-radius: 6px; padding: 1px 7px; background: var(--surface); }

/* ---------- Avatars et personnes concernées ---------- */
.av { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 11px var(--texte); color: #fff; flex-shrink: 0; letter-spacing: .02em; }
.av-g { width: 40px; height: 40px; font-size: 14px; }
.av-xl { width: 64px; height: 64px; font-size: 22px; }
.av-p { width: 22px; height: 22px; font-size: 9.5px; }
/* Une couleur par membre, la même partout : Membre.couleur (0 à 7) choisit la teinte. */
.m-0 { background: #27496f; } .m-1 { background: #b0533c; } .m-2 { background: #2f7350; } .m-3 { background: #7b5aa6; }
.m-4 { background: #b07a12; } .m-5 { background: #2a7f86; } .m-6 { background: #5a6276; } .m-7 { background: #a2486e; }
.m-ext { background: var(--surface-2); color: var(--encre-2); border: 1px solid var(--trait); }
.m-tous { background: var(--commun); }
.m-grp { background: var(--partage); }
.m-fichier { background: var(--accent); }
.m-note { background: var(--anniv); }

/* ---------- Étiquettes d'origine ---------- */
.origine { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.o-moi { background: var(--accent-2); color: var(--accent-encre); }
.o-partage { background: var(--partage-2); color: var(--partage); }
.o-commun { background: var(--commun-2); color: var(--commun); }
.o-anniv { background: var(--anniv-2); color: var(--anniv); }
/* Tâches : ma place dans la tâche, aux couleurs des origines (responsable comme « à moi »). */
.o-responsable { background: var(--accent-2); color: var(--accent-encre); }
.o-contributeur, .o-createur, .o-observateur { background: var(--partage-2); color: var(--partage); } /* le créateur est rangé sous « Contributeur » */
.point-non-lu { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ---------- Panneau de détail (à droite, identique partout) ---------- */
.panneau { position: fixed; top: 0; right: 0; bottom: 0; width: var(--panneau-l); max-width: 100vw; background: var(--surface); border-left: 1px solid var(--trait); z-index: 60; display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; }
.panneau.ouvert { transform: none; visibility: visible; box-shadow: var(--ombre-2); transition: transform .22s ease; }
.panneau-tete { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--trait-2); }
.panneau-tete .titres { flex: 1; min-width: 0; }
.panneau-tete h2 { font-size: 20px; line-height: 1.2; }
.panneau-tete .type { font-size: 12.5px; color: var(--encre-2); margin-bottom: 2px; display: flex; gap: 8px; align-items: center; }
.panneau-corps { flex: 1; overflow-y: auto; padding: 14px 20px 20px; }
.panneau-pied { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--trait); background: var(--surface); }
.panneau-pied .btn-danger { margin-left: auto; }
.section { padding: 14px 0; border-bottom: 1px solid var(--trait-2); }
.section:last-child { border-bottom: 0; }
.section-titre { font-size: 13px; color: var(--encre); font-weight: 600; margin-bottom: 9px; display: flex; justify-content: space-between; align-items: center; }
.champs { display: grid; grid-template-columns: 22px 1fr; gap: 8px 10px; align-items: center; font-size: 13.5px; }
.champs .ic { color: var(--encre-3); }
.champs .absent { color: var(--encre-3); }
.personnes { display: flex; flex-direction: column; gap: 8px; }
.personne { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.personne .qui { flex: 1; }
.personne .role { font-size: 11.5px; color: var(--encre-2); }
.droit { font-size: 11.5px; color: var(--encre-2); border: 1px solid var(--trait); border-radius: 999px; padding: 1px 8px; }
.lie { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--trait-2); border-radius: 8px; font-size: 13px; margin-bottom: 6px; }
.lie .ic { color: var(--encre-3); }
.lie .quand { margin-left: auto; color: var(--encre-3); font-size: 12px; }
.note-bloc { font-size: 13.5px; color: var(--encre-2); background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.voile { position: fixed; inset: 0; background: rgba(20,16,12,.18); z-index: 55; }

/* Formulaire dans le panneau */
.formulaire { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
.formulaire label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--encre-2); font-weight: 500; }
.formulaire .ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.entree { border: 1px solid var(--trait); background: var(--surface); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; color: var(--encre); width: 100%; }
.entree:focus, .select:focus { outline: 2px solid var(--accent-2); border-color: var(--accent); }
textarea.entree { resize: vertical; min-height: 70px; }

/* Sur ordinateur, le panneau ne recouvre pas : la page se resserre et laisse la place à droite
   (bandeau compris : la cloche et le menu restent accessibles). Sur téléphone, plein écran. */
@media (min-width: 861px) {
  .principal { transition: margin-right .22s ease; }
  html.panneau-ouvert .principal { margin-right: var(--panneau-l); }
  .principal { min-width: 0; }
  .voile { display: none !important; }
}

/* Panneau ouvert sur un écran moyen : le tableau garde l'essentiel (colonnes secondaires
   masquées, comme sur téléphone) pour tenir dans la place restante. */
@media (min-width: 861px) and (max-width: 1700px) {
  html.panneau-ouvert .tableau .masquable { display: none; }
}

/* ---------- Dialogues maison ---------- */
/* Élément <dialog> natif, au rendu des maquettes. */
dialog.dialogue { width: 480px; max-width: calc(100% - 40px); background: var(--surface); color: var(--encre); border: 0; border-radius: var(--r-l); box-shadow: var(--ombre-2); padding: 22px; }
dialog.dialogue::backdrop { background: rgba(20,16,12,.35); }
.dialogue h3 { font-size: 19px; margin-bottom: 4px; }
.dialogue .sous { color: var(--encre-2); font-size: 13px; margin-bottom: 14px; white-space: pre-line; }
.dialogue-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.personne form { margin: 0; }
.btn-retirer { width: 26px; height: 26px; }
.avertissement { background: var(--alerte-2); color: var(--alerte); border-radius: 8px; padding: 9px 12px; font-size: 13px; }

/* ---------- Toast ---------- */
.session-interrompue { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); background: var(--alerte-2); color: var(--alerte); border: 1px solid var(--alerte); padding: 10px 16px; border-radius: 10px; font-size: 13px; box-shadow: var(--ombre-2); z-index: 95; }
.session-interrompue a { color: inherit; font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--encre); color: var(--surface); padding: 10px 16px; border-radius: 10px; font-size: 13px; box-shadow: var(--ombre-2); z-index: 90; }


/* Formulaires et actions du panneau : un formulaire POST se place comme un bouton. */
.panneau-pied { flex-wrap: nowrap; gap: 6px; padding-inline: 16px; }
.panneau-pied .btn { padding-inline: 9px; white-space: nowrap; }
@media (max-width: 480px) { .panneau-pied .libelle-action { display: none; } }
.panneau-pied form { margin: 0; }
.panneau-pied > :last-child { margin-left: auto; }
.panneau-pied .btn-danger { margin-left: 0; }
.case-a-cocher { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--encre) !important; }
/* Panneau des groupes : un groupe par section dépliable. */
.groupe-contacts { margin-bottom: 8px; }
.groupe-contacts form, .candidat { margin: 0; }
.resultats-groupe .candidat { display: flex; align-items: center; gap: 8px; }
.resultats-groupe .candidat .qui { flex: 1; }
.ajout-groupe .champ-recherche { width: 100%; }
.resultats { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.candidat { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; color: var(--encre); cursor: pointer; }
.candidat:hover, .candidat:focus-visible { background: var(--survol); }
.av .ic { width: 14px; height: 14px; }

/* ---------- Menus du bandeau ---------- */
.cloche { position: relative; }
.cloche .pastille { position: absolute; top: -3px; right: -5px; font-size: 10.5px; line-height: 16px; min-width: 16px; padding: 0 4px; }
.menu .notif { align-items: flex-start; border-bottom: 1px solid var(--trait-2); }
.menu .notif .point-non-lu, .carte .notif .point-non-lu { margin-top: 6px; }
.menu .notif.lue { color: var(--encre-2); }
.liste-notifs { max-height: 330px; overflow-y: auto; padding: 0; }
.menu-titre { padding: 12px 16px 8px; align-items: center; }
.menu .menu-pied { justify-content: center; color: var(--accent-encre); font-weight: 500; }
.carte .notif { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; color: var(--encre); border-bottom: 1px solid var(--trait-2); font-size: 13.5px; }
.carte .notif .texte { flex: 1; }
.carte .notif:last-child { border-bottom: 0; }
.point-non-lu.invisible { visibility: hidden; }
.notif .texte { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: inherit; padding: 0 !important; }
.notif .voir { color: var(--accent-encre); font-weight: 500; white-space: nowrap; }
.notif form { margin: 0; }
.btn-coche { width: 28px; height: 28px; }
.menu-compte { width: 280px; }
.menu form { margin: 0; }
/* Déconnexion : bouton de formulaire (POST), au rendu des liens du menu. */
.menu .deconnexion { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: none; border: 0; cursor: pointer; text-align: left; font-size: 13px; }
.menu .deconnexion:hover { background: var(--survol); }

/* ---------- Divers ---------- */
.vide { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 28px 16px; color: var(--encre-3); font-size: 13.5px; }
.erreur { color: var(--alerte); font-size: 13px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Téléphone : barre réduite aux icônes, panneau plein écran ---------- */
@media (max-width: 860px) {
  .coquille { grid-template-columns: var(--barre-l-r) 1fr; }
  .nav .nav-titre, .nav .libelle, .nav .externe, .barre-version { display: none; }
  .barre .marque-logo { display: none; }
  .barre .marque-symbole { display: block !important; }
  .nav a { justify-content: center; }
  .btn-utilisateur .nom, .salut .discret { display: none; }
  .tableau .masquable { display: none; }
  .champ-recherche { width: 100%; }
  .page { padding: 16px; }
  .page-tete { flex-wrap: wrap; }
  .page-tete .sous-titre { display: none; }
  .page-tete .actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  :root { --panneau-l: 100vw; }
}

/* ---------- Pages d'entrée (connexion, double authentification, liens) ---------- */
.page-entree { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.carte-entree { width: 420px; max-width: 100%; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-l); box-shadow: var(--ombre-1); padding: 28px; }
.carte-entree .marque { padding: 0 0 37px; } /* 18 px + 0,5 cm */
.carte-entree .marque-logo { max-width: 300px; }
.champ-mot-de-passe { position: relative; display: block; }
.champ-mot-de-passe .entree { width: 100%; padding-right: 42px; }
.champ-mot-de-passe .btn-icone { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; touch-action: none; user-select: none; }
.champ-mot-de-passe .btn-icone[aria-pressed="true"] { color: var(--accent-encre); }
.carte-entree h1 { font-size: 22px; margin-bottom: 10px; text-align: center; }
.carte-entree p { color: var(--encre-2); }
.carte-entree .formulaire .btn { justify-content: center; }
.carte-charte { width: 760px; }
.texte-charte { max-height: 60vh; overflow-y: auto; margin-bottom: 18px; padding-right: 6px; }
.carte-charte .formulaire + .formulaire { margin-top: 8px; }
.qr { display: flex; justify-content: center; margin: 12px 0; }
.qr svg { background: #fff; border-radius: var(--r-s); }
.cle-totp { display: block; margin-top: 4px; color: var(--encre); letter-spacing: .04em; }
.codes-secours { columns: 2; list-style: none; padding: 0; margin: 14px 0; color: var(--encre); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.date-journal { white-space: nowrap; color: var(--encre-2); }
/* Sélection multiple et import/export des listes. */
.menu-export { width: 280px; }
.choix-menu { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: none; border: 0; cursor: pointer; text-align: left; font-size: 13px; color: var(--encre); }
.choix-menu:hover { background: var(--survol); }
.apercu-import, .bilan { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.apercu-import li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--trait-2); }
.apercu-import .qui { flex: 1; min-width: 0; }
.select-petit { padding: 3px 6px; font-size: 12px; }
.choix-global { flex-direction: row !important; align-items: center; justify-content: space-between; color: var(--encre) !important; }
/* Pages de réglages (Administration, Mon compte) : sections sous l'en-tête de page. */
.o-alerte { background: var(--alerte-2); color: var(--alerte); }
.section-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.section-tete h2 { font-size: 18px; }
.boutons-compte { display: flex; flex-wrap: wrap; gap: 8px; }
.bloc-compte { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.bloc-compte h3 { font-size: 13px; color: var(--encre-2); font-weight: 600; margin-top: 4px; }
.liste-simple { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.liste-simple li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--trait-2); }
.liste-simple li:last-child { border-bottom: 0; }
.liste-simple form { margin: 0; }
/* Aide : sommaire à gauche, texte rendu par markdown-it à droite. */
.aide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.aide-sommaire { display: flex; flex-direction: column; padding: 8px; position: sticky; top: 80px; }
.aide-sommaire a { padding: 7px 10px; border-radius: 8px; color: var(--encre); font-size: 13.5px; }
.aide-sommaire a:hover { background: var(--survol); }
.aide-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-3); padding: 12px 10px 4px; }
.aide-section:first-child { padding-top: 4px; }
.aide-sommaire:has(.aide-section) { max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; }
.aide-sommaire a.actif { background: var(--accent-2); color: var(--accent-encre); font-weight: 600; }
.aide-texte { padding: 22px 28px; line-height: 1.6; }
.aide-texte h1 { font-size: 24px; margin-bottom: 10px; }
.aide-texte h2 { font-size: 18px; margin: 22px 0 8px; }
.aide-texte p, .aide-texte ul { margin: 8px 0; }
.aide-texte ul { padding-left: 20px; }
.aide-texte a { color: var(--accent-encre); text-decoration: underline; }
.aide-texte code { font-family: "Space Mono", monospace; font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.aide-texte pre { background: var(--surface-2); border-radius: var(--r-s); padding: 12px 14px; overflow-x: auto; line-height: 1.35; }
.aide-texte pre code { background: none; padding: 0; font-size: 12.5px; }
@media (max-width: 860px) { .aide { grid-template-columns: 1fr; } .aide-sommaire { position: static; } }
/* Page d'erreur (400, 403, 404, 500) : mêmes carte et thème que la connexion. */
.code-erreur { text-align: center; font-weight: 600; color: var(--encre-3) !important; font-size: 13px; margin-bottom: 8px; }
.actions-erreur { display: flex; gap: 8px; justify-content: center; margin: 18px 0 14px; }
/* Onglets d'une page (Mon compte, Administration). */
.onglets { display: flex; gap: 2px; border-bottom: 1px solid var(--trait); margin: 0 0 18px; overflow-x: auto; }
.onglets a { padding: 9px 14px; font-size: 13.5px; color: var(--encre-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.onglets a:hover { color: var(--encre); }
.onglets a.actif { color: var(--accent-encre); border-bottom-color: var(--accent); font-weight: 600; }
.nav-titre { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--barre-3); padding: 2px 10px 4px; }
.nav a.nav-discret { color: var(--barre-3); font-size: 12.5px; }
/* ---------- Contacts : liste à gauche, carte de visite à droite (§5.3) ---------- */
/* Contacts (§5.3) : la liste dans le bloc de gauche (comme Fichiers et Notes), la carte à droite. */
.page-contacts .carte-visite { width: 85%; } /* 15 % plus étroite que la colonne */
.page-contacts .arbre { padding: 10px 0 0; }
.page-contacts .onglets-espaces { margin: -2px 10px 6px; }
.ligne-contact { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nom-contact { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nom-contact .principal-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nom-contact .etiquette { flex: none; margin-left: auto; } /* le groupe, à droite */
.partage-contact { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--encre-3); }
.outils-liste { margin-bottom: 10px; }
.outils-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Barre d'outils, la même partout : une recherche de largeur fixe (celle de la légende du
   Calendrier), des filtres à la largeur de leur plus long libellé. */
.outils-ligne .champ-recherche { flex: 0 1 270px; width: 270px; min-width: 0; }
.outils-ligne .select { flex: none; width: auto; max-width: 100%; }
.legende-serree { margin: 0 0 14px; }
.titre-partie { font-size: 13px; font-weight: 600; color: var(--encre-2); margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--trait-2); }
.legende-serree > .discret { display: none; }
.legende-serree .legende { flex-wrap: nowrap; gap: 5px; }
.legende-serree .legende a, .legende-serree .legende .vide-origine { padding: 3px 8px 3px 7px; font-size: 12px; gap: 5px; white-space: nowrap; }
.tableau-contacts .identite { gap: 10px; }
.carte-visite { padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 80px; }
.cv-tete { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
/* Le nom garde au moins 220 px : sinon les actions passent dessous. */
.cv-identite { flex: 1 1 220px; min-width: 0; }
.cv-identite h2 { font-size: 22px; margin-bottom: 6px; overflow-wrap: break-word; }
.cv-etiquettes { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cv-actions form { margin: 0; }
.cv-actions .btn { padding-inline: 9px; }
/* Carte de visite : les champs sur deux colonnes, les longs (e-mail, adresse, note) sur toute la largeur. */
.cv-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; border-top: 1px solid var(--trait-2); padding-top: 16px; font-size: 14px; }
.cv-champs > .large { grid-column: 1 / -1; }
.cv-champs > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.cv-champs .absent { color: var(--encre-3); }
.cv-lbl { font-size: 11.5px; color: var(--encre-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.cv-section { border-top: 1px solid var(--trait-2); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cv-section form { margin: 0; }
/* Formulaire de contact du panneau : deux colonnes, tout tient sans ascenseur. */
.formulaire-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; }
.formulaire-contact > * { grid-column: 1 / -1; }
.formulaire-contact > .champ-prenom, .formulaire-contact > .champ-nom,
.formulaire-contact > .champ-telephone_1, .formulaire-contact > .champ-telephone_2 { grid-column: auto; }
.formulaire-contact .entree { padding: 6px 9px; }
/* Panneau ouvert (écran moyen) ou téléphone : la carte passe sous la liste. */
@media (max-width: 1700px) { html.panneau-ouvert .carte-visite { position: static; } }
@media (max-width: 1100px) { .carte-visite { position: static; } }
.tableau tr.selection .o-moi { background: var(--surface); }
.formulaire-contact .resultats:empty { display: none; }
/* Fiche de l'annuaire dans le panneau (ex. membre d'un groupe de partage). */
.carte-panneau { display: flex; flex-direction: column; gap: 18px; }
/* Groupes de partage (Administration, Mon compte) : groupes à gauche, membres à droite. */
.largeur-groupes { max-width: 796px; }
.groupes-split { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 440px); gap: 16px; align-items: start; }
.groupes-split .nombre { width: 1%; text-align: right; white-space: nowrap; }
.carte-groupe { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.groupe-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.groupe-tete h2 { font-size: 19px; overflow-wrap: anywhere; }
.liste-membres { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait-2); }
.liste-membres li { border-bottom: 1px solid var(--trait-2); }
.liste-membres li.tres-discret { padding: 10px 0; }
.liste-membres .personne { padding: 8px 6px; color: var(--encre); border-radius: var(--r-s); }
.liste-membres .personne:hover { background: var(--surface-2); }
.liste-membres .personne .ic-s { color: var(--encre-3); }
@media (max-width: 760px) { .groupes-split { grid-template-columns: 1fr; } }
/* Mon compte : contenu borné, pas toute la largeur. */
.contenu-borne { max-width: 980px; }
.pile-compte { display: flex; flex-direction: column; gap: 16px; }
.bloc-etroit { max-width: 720px; }
.bloc-compte .section-tete h3 { margin-top: 8px; }
/* Écran étroit : les boutons passent sous le titre plutôt que de sortir de la carte. */
.bloc-compte .section-tete { flex-wrap: wrap; }
.bloc-compte .tableau .nombre, .bloc-etroit .nombre { width: 1%; white-space: nowrap; text-align: right; }
.actions-ligne { display: flex; gap: 4px; justify-content: flex-end; }
.actions-ligne form { margin: 0; }
/* Tableaux de Mon compte (favoris, appareils…) : lignes serrées, de même hauteur. */
.bloc-compte > p { margin: 0; }
.bloc-compte .tableau td { padding-top: 7px; padding-bottom: 7px; height: 44px; }
.bloc-compte .actions-ligne .btn-icone { width: 30px; height: 30px; }
.choix-notifications { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 12px; }
.bloc-compte form .actions { display: flex; align-items: center; gap: 12px; }
/* --- Calendrier (§5.2) : maquette v2, mêmes couleurs d'origine que la légende. */
.bascule { display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 3px; gap: 2px; }
.bascule a { border-radius: 7px; padding: 5px 11px; font-size: 12.5px; color: var(--encre-2); display: flex; align-items: center; gap: 6px; }
.bascule a.actif { background: var(--surface); color: var(--encre); box-shadow: var(--ombre-1); font-weight: 600; }
/* Navigation : période au centre, bascule Mensuel · Hebdo à droite, sur la même ligne. */
.cal-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 0 0 8px; }
.cal-navigation + .mois, .cal-navigation + .semaine { margin-bottom: 0; }
.page-calendrier .legende-serree { margin-bottom: 6px; }
.cal-periode { display: flex; align-items: center; gap: 10px; }
.cal-navigation .bascule { justify-self: end; }
.rangee-legende.legende-nav { margin: 0; min-width: 0; }
.cal-navigation h2 { font-size: 20px; min-width: 240px; text-align: center; display: flex; flex-direction: column; line-height: 1.2; }
.cal-navigation .etendue { font: 400 12.5px var(--texte); color: var(--encre-2); }
/* Téléphone : la navigation s'empile, la légende passe à la ligne. Après les règles de bureau,
   de même spécificité, qu'elles remplacent (placées avant, elles ne s'appliquaient jamais). */
@media (max-width: 860px) {
  .cal-navigation { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cal-navigation .bascule { justify-self: center; }
  .cal-navigation h2 { min-width: 0; }
  .legende-serree .legende { flex-wrap: wrap; }
}
/* Ni le mois ni la semaine ne font défiler la page : ils tiennent dans l'écran. */
.mois { height: calc(100vh - 330px); min-height: 420px; grid-template-rows: auto; grid-auto-rows: minmax(0, 1fr); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--trait); border-left: 1px solid var(--trait); border-radius: var(--r-m); overflow: hidden; background: var(--surface); box-shadow: var(--ombre-1); }
.mois .jour-sem { padding: 8px 10px; font-size: 12.5px; color: var(--encre-2); border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); font-weight: 600; }
.cal-case { min-width: 0; min-height: 0; overflow: hidden; padding: 6px 6px 8px; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.cal-case:hover { background: var(--survol); }
.cal-case.hors { background: var(--surface-2); color: var(--encre-3); }
.cal-case.weekend:not(.hors) { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.cal-case .num { font-size: 12.5px; font-weight: 600; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; margin-bottom: 1px; }
.cal-case.aujourdhui .num { background: var(--accent); color: var(--sur-accent); }
.ev { display: flex; align-items: center; gap: 5px; font-size: 12px; border-radius: 5px; padding: 2px 6px; white-space: nowrap; overflow: hidden; line-height: 1.45; color: inherit; }
.ev .ev-titre { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ev .h { font-size: 11px; font-weight: 600; opacity: .85; flex: none; }
.ev .rang { font-size: 10.5px; opacity: .75; flex: none; margin-left: auto; }
.ev .av-p { width: 16px; height: 16px; font-size: 7.5px; border: 0; flex: none; }
.ev-moi { background: var(--accent); color: var(--sur-accent); }
.ev-partage { background: var(--partage-2); color: var(--partage); }
.ev-commun { background: var(--commun-2); color: var(--commun); }
.ev-anniv { background: var(--anniv-2); color: var(--anniv); }
.ev-tache { background: var(--tache-2); color: var(--tache); }
.ev .statut-point { width: 8px; height: 8px; box-shadow: 0 0 0 1.5px var(--surface); }
/* Réponse « peut-être » : en pointillé. */
.ev.incertain, .bloc.incertain { outline: 1.5px dashed currentColor; outline-offset: -1.5px; opacity: .8; }
/* Invitation sans réponse : fond clair, pointillé fin, « ? ». */
.ev.attente, .bloc.attente { background: var(--surface); color: var(--encre-2); outline: 1.5px dotted var(--encre-3); outline-offset: -1.5px; }
.ev .a-repondre { font-weight: 700; flex: none; }
.ev:hover, .bloc:hover { filter: brightness(.96); }
.plus-ev { font-size: 11.5px; color: var(--encre-2); padding-left: 6px; }
.semaine { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-m); box-shadow: var(--ombre-1); overflow: hidden; }
.sem-tete, .sem-journee { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--trait); }
/* Même gouttière que la zone qui défile : en-têtes et colonnes restent alignés. */
.sem-tete, .sem-journee, .sem-corps { overflow-y: scroll; scrollbar-gutter: stable; }
.sem-tete, .sem-journee { overflow-y: hidden; }
.sem-tete div { padding: 8px 6px; text-align: center; font-size: 12px; color: var(--encre-2); border-left: 1px solid var(--trait-2); }
.sem-tete div strong { display: block; font: 600 17px var(--texte); color: var(--encre); }
.sem-tete .aujourdhui strong { color: var(--accent-encre); }
.sem-journee > div { border-left: 1px solid var(--trait-2); padding: 4px; min-height: 30px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sem-journee .lib { font-size: 10.5px; color: var(--encre-3); text-align: right; padding: 8px 6px 0 0; border-left: 0; }
.sem-corps { position: relative; height: calc(100vh - 420px); min-height: 280px; overflow-y: auto; }
.sem-grille { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); position: relative; }
.sem-heures div { height: 48px; font-size: 11px; color: var(--encre-3); text-align: right; padding-right: 8px; transform: translateY(-8px); }
.sem-col { position: relative; border-left: 1px solid var(--trait-2); min-width: 0; }
.sem-col .creneau { display: block; height: 48px; border-bottom: 1px solid var(--trait-2); }
.sem-col .creneau:nth-of-type(odd) { border-bottom-style: dashed; }
.sem-col .creneau:hover { background: var(--survol); }
.sem-col.aujourdhui { background: color-mix(in srgb, var(--accent-2) 35%, transparent); }
.bloc { position: absolute; left: 4px; right: 4px; border-radius: 7px; padding: 4px 7px; font-size: 12px; overflow: hidden; line-height: 1.35; z-index: 1; }
.bloc .h { font-size: 11px; font-weight: 600; opacity: .85; display: block; }
.repere { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.r-moi { background: var(--accent); } .r-partage { background: var(--partage); } .r-commun { background: var(--commun); } .r-anniv { background: var(--anniv); }
/* Réponse d'un participant : Accepté, Peut-être, Refusé, En attente. */
.statut { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.s-accepte { background: var(--commun-2); color: var(--commun); }
.s-peut_etre { background: var(--anniv-2); color: var(--anniv); }
.s-refuse { background: var(--alerte-2); color: var(--alerte); }
.s-attente { background: var(--surface-2); color: var(--encre-2); }
.reponses { display: flex; gap: 6px; margin: 0; }
.reponses .btn.actif { font-weight: 600; border-color: currentColor; }
.resultats-cal { padding: 14px 18px; }
.resultats-cal .carte-tete { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.liste-evenements a { display: flex; align-items: center; gap: 12px; width: 100%; color: inherit; }
.liste-evenements .date { display: flex; flex-direction: column; align-items: center; width: 52px; flex: none; }
.liste-evenements .date .j { font: 600 18px var(--titre); line-height: 1; }
.liste-evenements .date .m { font-size: 11px; color: var(--encre-2); }
.liste-evenements .quoi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.liste-evenements .sous { font-size: 12px; color: var(--encre-2); }
/* Formulaire d'événement : jour et heure côte à côte. */
/* Formulaire sur deux colonnes : un champ par ligne, sauf ceux marqués `demi`. */
.formulaire-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; }
.formulaire-grille > * { grid-column: 1 / -1; }
.formulaire-grille > .demi { grid-column: auto; }
.formulaire-evenement > .champ-jour_debut, .formulaire-evenement > .champ-heure_debut,
.formulaire-evenement > .champ-jour_fin, .formulaire-evenement > .champ-heure_fin { grid-column: auto; }
.formulaire-evenement .champ-journee_entiere { margin-top: -2px; }
.formulaire-evenement .resultats:empty { display: none; }
@media (max-width: 760px) { .mois { height: auto; grid-auto-rows: minmax(72px, auto); } .ev .h, .ev .av-p, .ev .rang { display: none; } }
/* Page des notifications : 70 % de la largeur, filtres Lues / Non lues. */
.page-notifications { max-width: 70%; }
.filtres-etat { display: flex; gap: 6px; margin-bottom: 12px; }
.filtre { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--trait); background: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: var(--encre); }
.filtre.actif { background: var(--accent-2); border-color: var(--accent); color: var(--accent-encre); font-weight: 600; }
@media (max-width: 860px) { .page-notifications { max-width: none; } }
/* Sélecteur de destinataires : puces des choix, recherche, propositions. */
.choix-personnes { display: flex; flex-direction: column; gap: 6px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puces:empty { display: none; }
.puce { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--trait); background: var(--surface-2); border-radius: 999px; padding: 2px 2px 2px 3px; font-size: 12.5px; }
.puce .btn-icone { width: 22px; height: 22px; }
.choix-personnes .resultats { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--trait-2); border-radius: 8px; padding: 3px; }
.choix-personnes .resultats:empty { display: none; }
.choix-personnes .candidat { display: flex; align-items: center; gap: 8px; }
.choix-personnes .candidat .qui { flex: 1; }
.libelle-champ { font-size: 12.5px; color: var(--encre-2); }
.champ-choix { display: flex; flex-direction: column; gap: 6px; }
.choix-personnes .champ-recherche { flex-direction: row; width: auto; }
/* Retour du panneau, avant le titre. */
.panneau-tete .retour-panneau { margin-right: 6px; flex: none; }
/* Champ grisé (ex. heures d'une journée entière) : visible comme tel. */
.entree:disabled, .select:disabled { background: var(--surface-2); color: var(--encre-3); cursor: not-allowed; opacity: .7; }
.formulaire label:has(> .entree:disabled) { color: var(--encre-3); }
/* Champ fichier maison : l'entrée native reste focalisable (validation, clavier) mais invisible. */
.masque-accessible { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.choix-fichier { position: relative; }
.ligne-fichier { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ligne-fichier [data-nom-fichier] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choix-fichier:has(.masque-accessible:focus-visible) .btn { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Nom d'une personne : ouvre sa fiche de l'annuaire. */
.nom-personne { color: inherit; }
.nom-personne:hover { color: var(--accent-encre); text-decoration: underline; }
.panneau-corps > .boutons-compte { margin-top: 10px; }
.dialogue .formulaire { gap: 10px; }
.dialogue .formulaire h3 { margin-bottom: 0; }
.champ-copie { display: flex; gap: 8px; }
.champ-copie .entree { flex: 1; min-width: 0; font-size: 12px; }

/* --- Impression (PDF par le navigateur, §8) : le contenu seul, sur fond blanc. */
@media print {
  .barre, .bandeau, .panneau, .voile, .toast, .session-interrompue, .page-tete .actions, .outils-liste, .rangee-legende,
  .cal-navigation .btn-icone, .cal-navigation .btn, .cal-navigation .bascule, .onglets, .pied-liste,
  dialog { display: none !important; }
  .coquille { display: block !important; }
  html, body, .page { background: #fff !important; color: #000; }
  .page { padding: 0 !important; margin: 0 !important; }
  .page-tete { margin-bottom: 8px; }
  .carte, .mois, .semaine { box-shadow: none !important; }
  .mois { height: auto; grid-auto-rows: minmax(90px, auto); }
  .cal-case { overflow: visible; break-inside: avoid; }
  .sem-corps { height: auto; overflow: visible; }
  .ev, .bloc { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* --- Tâches (§5.4) : maquette v2. */
.vue-ligne { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.vue-ligne .filtres-etat { margin: 0; }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.colonne-k { background: var(--surface-2); border-radius: var(--r-m); padding: 10px; min-height: 200px; transition: background .15s; }
.colonne-k.survol-depot, .termines.survol-depot, .tableau tr.survol-depot { background: var(--accent-2); }
.liste-membres li[draggable] { cursor: grab; }
details.termines > summary { list-style: none; cursor: pointer; position: static; }
details.termines > summary::-webkit-details-marker { display: none; }
details.termines > summary .chevron { color: var(--encre-3); transition: transform .15s; }
details.termines:not([open]) > summary .chevron { transform: rotate(-90deg); }
.termines { margin-top: 14px; background: var(--surface-2); border-radius: var(--r-m); padding: 10px; transition: background .15s; }
/* En-tête de colonne collant : visible sous le bandeau quand la page défile. */
.colonne-k-tete { display: flex; align-items: center; gap: 8px; padding: 8px 4px 10px; margin-top: -6px; font-weight: 600; font-size: 13.5px; position: sticky; top: 59px; z-index: 2; background: var(--surface-2); }
.colonne-k > .afficher-plus, .termines > .afficher-plus { margin-top: 8px; width: 100%; justify-content: center; }
.colonne-k-tete .nb { font-size: 11.5px; color: var(--encre-2); background: var(--surface); border-radius: 999px; padding: 0 7px; }
.statut-point { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.st-afaire { background: var(--encre-3); } .st-encours { background: var(--accent); } .st-attente { background: var(--moyen); } .st-termine { background: var(--commun); }
.cartes-k { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.carte-k { background: var(--surface); border: 1px solid var(--trait); border-radius: 9px; padding: 13px 12px; cursor: grab; box-shadow: var(--ombre-1); }
.carte-k:hover { border-color: var(--encre-3); }
.carte-k.glisse { opacity: .5; }
.carte-k .titre { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; line-height: 1.35; overflow-wrap: break-word; }
/* Carte sur trois lignes : titre ; ma place, projet, priorité ; échéance et intervenants. */
/* 2e ligne : ma place à gauche, le projet au centre, la priorité à droite. */
.carte-k .meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.carte-k .meta .projet-k { max-width: 100%; } /* colonne étroite : passe à la ligne, jamais écrasé */
.carte-k .bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.projet-k { display: inline-block; border-color: transparent; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-0 { background: var(--pj0-2); color: var(--pj0); } .pj-1 { background: var(--pj1-2); color: var(--pj1); }
.pj-2 { background: var(--pj2-2); color: var(--pj2); } .pj-3 { background: var(--pj3-2); color: var(--pj3); }
.pj-4 { background: var(--pj4-2); color: var(--pj4); }
.carte-k.fait .titre { text-decoration: line-through; color: var(--encre-2); }
/* Tâches (§5.4) : projets à gauche (comme Fichiers et Notes), Kanban ou liste à droite. */
.contenu-taches { min-width: 0; }
.projet-arbre span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-projet { display: flex; align-items: center; gap: 2px; }
.ligne-projet .arbre-lien { flex: 1; min-width: 0; }
.ligne-projet .btn-icone { flex: none; opacity: .55; }
.ligne-projet:hover .btn-icone, .ligne-projet .btn-icone:focus-visible { opacity: 1; }
.tableau.tableau-recap { width: auto; min-width: 240px; }
.tableau-recap td { padding: 5px 12px 5px 0; }
.tableau-recap .nombre { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
/* Panneaux de gestion (Projets, Groupes de contacts) : une ligne par élément — un clic, son
   détail ; ses actions à droite — et la création, repliée en bas. */
.liste-gestion li { padding: 9px 0; }
.liste-gestion a { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; flex: 1; }
.liste-gestion a:hover .quoi { color: var(--accent-encre); }
.liste-gestion .quoi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.liste-gestion .sous { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--encre-3); }
.actions-gestion { display: flex; gap: 2px; flex: none; }
.actions-gestion form { margin: 0; }
details.creation { margin-top: 18px; }
details.creation > summary { list-style: none; display: inline-flex; cursor: pointer; }
details.creation > summary::-webkit-details-marker { display: none; }
details.creation[open] > summary { margin-bottom: 14px; }
.compte-arbre { font-size: 11.5px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.termines .cartes-k { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.prio { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.prio::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.prio-haute { color: var(--alerte); } .prio-moyenne { color: var(--moyen); } .prio-basse { color: var(--bas); }
.echeance { font-size: 12px; color: var(--encre-2); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.echeance.retard { color: var(--alerte); font-weight: 600; }
/* Responsable : anneau de couleur ; contributeurs : pile, « +N » au-delà de 3. */
.personnes-tache { display: inline-flex; align-items: center; gap: 6px; }
.av.responsable { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.pile { display: inline-flex; align-items: center; }
.pile .av { border: 2px solid var(--surface); margin-left: -7px; }
.pile .av:first-child { margin-left: 0; }
.pile .plus { margin-left: 4px; font-size: 11.5px; color: var(--encre-2); }
/* Les cinq statuts sur une ligne dans le panneau (repliés seulement s'il est plus étroit). */
.statuts { display: flex; gap: 3px; margin: 0; }
.statuts button { flex: 1 1 auto; border: 1px solid var(--trait); background: var(--surface); border-radius: 999px; padding: 4px 5px; font-size: 11.5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--encre-2); white-space: nowrap; }
@media (max-width: 480px) { .statuts { flex-wrap: wrap; } }
.statuts button.actif { border-color: var(--encre); color: var(--encre); font-weight: 600; background: var(--surface-2); }
.statut-tache { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.liste-taches { max-width: 1100px; }
/* Tableau resserré ; la description en deuxième colonne, deux lignes au plus. */
.liste-taches .tableau th, .liste-taches .tableau td { padding-left: 10px; padding-right: 10px; }
/* Centrés, sauf la tâche et sa description (à gauche). */
.liste-taches .tableau th, .liste-taches .tableau td { text-align: center; }
.liste-taches .tableau th:nth-child(-n+2), .liste-taches .tableau td:nth-child(-n+2) { text-align: left; }
.liste-taches .tableau td .personnes-tache { justify-content: center; }
.liste-taches .col-description { white-space: normal; width: 100%; min-width: 200px; }
.description-liste { font-size: 12.5px; color: var(--encre-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.fil { display: flex; flex-direction: column; gap: 10px; }
.evenement-fil { display: flex; gap: 10px; font-size: 13px; }
.evenement-fil .contenu { flex: 1; min-width: 0; }
.evenement-fil .quand { font-size: 11.5px; color: var(--encre-3); display: flex; gap: 8px; align-items: center; }
.evenement-fil .bulle { background: var(--surface-2); border-radius: 0 10px 10px 10px; padding: 7px 10px; margin-top: 3px; overflow-wrap: break-word; }
.evenement-fil .bulle.supprime { font-style: italic; color: var(--encre-3); }
.evenement-fil.systeme { color: var(--encre-2); align-items: center; }
.evenement-fil.systeme .icone-fil { width: 28px; display: grid; place-items: center; color: var(--encre-3); flex: none; }
.supprimer-commentaire { margin: 0 0 0 auto; }
.saisie-commentaire { display: flex; gap: 8px; margin: 12px 0 0; align-items: flex-end; }
.saisie-commentaire textarea { flex: 1; resize: vertical; min-height: 36px; }
.afficher-plus { align-self: flex-start; }
.fiche-aeree .cv-section { margin-top: 18px; padding-top: 16px; gap: 12px; }
.fiche-aeree .cv-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.details-tache { display: grid; grid-template-columns: 110px 1fr; gap: 10px 12px; margin: 0; font-size: 13.5px; }
.details-tache dt { display: flex; align-items: center; gap: 8px; color: var(--encre-3); }
.details-tache dd { margin: 0; }
.details-tache .prio, .details-tache .echeance { font-size: inherit; justify-self: start; }
.details-tache .absent { color: var(--encre-3); }
.fiche-aeree .fil { gap: 12px; }
[data-unique]:not([data-retirable]) [data-action="retirer-puce"] { display: none; } /* un seul choix obligatoire (responsable) : on remplace ; facultatif (fichier joint, note) : la croix le retire */
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kanban { grid-template-columns: 1fr; } }

/* --- Tableau de bord (§5.1) : Actualités · Événements ; Tâches (deux colonnes) · Notes. */
/* Tuiles des modules, en tête du tableau de bord : les couleurs du bandeau. */
/* Le titre à gauche, les tuiles au centre de la page. */
.tete-accueil { display: grid; grid-template-columns: 1fr auto 1fr; margin-bottom: 14px; }
.tuiles-modules { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.tuile-module { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; padding: 6px 4px; border-radius: var(--r-m); color: var(--encre-2); font-size: 12px; text-decoration: none; }
.tuile-module:hover { background: var(--survol); color: var(--encre); }
.tuile-module .pastille-module { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.tuile-module .pastille-module .ic { width: 22px; height: 22px; }
.tuile-module[aria-disabled="true"] { opacity: .5; cursor: default; }
.tuile-module[aria-disabled="true"]:hover { background: none; color: var(--encre-2); }
.mod-bleu { background: var(--accent-2); color: var(--accent); } .mod-vert { background: var(--commun-2); color: var(--commun); }
.mod-ambre { background: var(--anniv-2); color: var(--anniv); } .mod-violet { background: var(--partage-2); color: var(--partage); }
.mod-sarcelle { background: var(--tache-2); color: var(--tache); }
.mod-rose { background: color-mix(in srgb, var(--lg-messagerie) 14%, var(--surface)); color: var(--lg-messagerie); }
.grille-accueil { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.bloc-bas { align-self: stretch; } /* tâches et notes : même hauteur */
.liste-notes-accueil a { display: flex; align-items: center; gap: 10px; color: inherit; }
.liste-notes-accueil .quoi { display: flex; flex-direction: column; min-width: 0; }
.liste-notes-accueil .sous { font-size: 12.5px; color: var(--encre-3); }
@media (max-width: 1100px) { .grille-accueil { grid-template-columns: minmax(0, 1fr); } .tete-accueil { grid-template-columns: minmax(0, 1fr); } }
.carte-accueil { padding: 14px 18px; }
.carte-accueil .carte-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; }
.carte-accueil .carte-tete h2 { font-size: 17px; white-space: nowrap; }
.carte-accueil .carte-tete .btn-lien { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.barre-actus { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 8px; }
.barre-actus .filtres-etat { margin: 0; }
.barre-actus form { margin: 0; }
/* Une actualité (maquette v2) ; lue : fond grisé, auteur non gras, sans point. */
.actu { display: flex; gap: 12px; align-items: flex-start; padding: 10px 10px; border-top: 1px solid var(--trait-2); color: var(--encre); }
.actu:first-child { border-top: 0; }
.actu:hover { background: var(--survol); }
.actu.lue { background: var(--surface-2); color: var(--encre-2); }
.actu.lue strong { font-weight: 500; }
.actu .pictogramme { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.p-partage { background: var(--partage-2); color: var(--partage); } .p-commun { background: var(--commun-2); color: var(--commun); }
.p-tache { background: var(--moyen-2); color: var(--moyen); }
.actu .texte { flex: 1; min-width: 0; font-size: 13.5px; display: flex; flex-direction: column; }
.actu .extrait { color: var(--encre-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actu .quand { font-size: 12px; color: var(--encre-3); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
/* Actualités : de la hauteur du bloc des événements (même ligne), la liste défile dedans ;
   sa hauteur propre (0) ne compte pas dans celle de la ligne. Repliée : l'en-tête seul. */
.actualites { align-self: stretch; display: flex; flex-direction: column; }
.corps-actus { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.defilement-actus { flex: 1 1 auto; height: 0; min-height: 180px; overflow-y: auto; scrollbar-width: thin; }
.replie /* Lue : fond grisé, texte adouci ; non lue : fond clair et point bleu. */
.carte .notif.lue { background: var(--surface-2); color: var(--encre-2); }
.carte .notif.lue strong { font-weight: 500; }

/* Deux lignes : statut, titre, description (le reste de la ligne, tronquée), intervenants ;
   puis l'échéance, le projet et la priorité. */
.liste-taches-accueil li { padding: 9px 0; }
.liste-taches-accueil a { display: flex; flex-direction: column; gap: 5px; width: 100%; color: inherit; }
.ligne-tache { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ligne-tache .titre-tache { flex: 0 1 auto; max-width: 60%; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-tache .description-tache { flex: 1; min-width: 0; font-size: 12px; color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-tache > :not(.titre-tache, .description-tache) { flex: none; }
.badges-tache { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-left: 17px; font-size: 12px; }
.badges-tache .projet-k { max-width: 160px; }
.echeance.retard .ic { color: var(--alerte); }

/* --- Bas de la carte de visite : Partagé avec · Événements à venir · Tâches en cours. */
.cv-bas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 28px; align-items: start; }
.cv-bas > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.liste-liens { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.liste-liens a { display: flex; align-items: flex-start; gap: 8px; color: inherit; }
.liste-liens a .ic { color: var(--encre-3); margin-top: 2px; flex: none; }
.liste-liens .quoi { display: flex; flex-direction: column; min-width: 0; }
.liste-liens .sous { font-size: 12px; color: var(--encre-2); }

/* --- Sous-tâches (§5.4) : compteur sur la carte, liste à cocher dans le panneau, formulaire. */
.titre-k { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.titre-k .titre { margin-bottom: 0; }
.compte-sous { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 11.5px; font-weight: 600; color: var(--encre-2); background: var(--surface-2); border-radius: 999px; padding: 1px 7px 1px 5px; }
.compte-sous.fini { color: var(--commun); background: var(--commun-2); }
.carte-k .meta { margin-bottom: 2px; }
.sous-taches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.sous-taches form { display: flex; align-items: center; gap: 10px; margin: 0; }
.case-sous-tache { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--encre-3); border-radius: 5px; background: var(--surface); color: var(--sur-accent); cursor: pointer; padding: 0; }
.sous-taches .faite .case-sous-tache { background: var(--commun); border-color: var(--commun); }
.sous-taches .faite span { color: var(--encre-3); text-decoration: line-through; }
.ligne-sous-tache { display: flex; align-items: center; gap: 6px; }
.ligne-sous-tache .entree { flex: 1; }
.ajouter-ligne { align-self: flex-start; }

/* Prochains événements : à droite, le lieu et le lien visio (ouvert directement). */
.ligne-evenement { gap: 12px; }
.ligne-evenement > a { flex: 1; min-width: 0; }
.ligne-evenement .ou { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 42%; font-size: 12px; color: var(--encre-2); }
.ligne-evenement .ou > * { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-evenement .ou .ic { flex: none; color: var(--encre-3); }
.ligne-evenement .ou .absent { color: var(--encre-3); }
.ligne-evenement .sous .statut { margin-left: 4px; }

/* --- Fichiers (§5.6) : arborescence à gauche, liste du dossier à droite. ------------------- */
.fichiers { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.arbre { padding: 10px 10px 12px; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; }
.onglets-espaces { margin: -2px 0 10px; gap: 2px; }
.onglets-espaces a { flex: 1; text-align: center; padding: 6px 4px; font-size: 13.5px; }
.arbre-racines { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.arbre details > summary { list-style: none; display: flex; align-items: center; cursor: pointer; min-width: 0; }
.arbre details > summary::-webkit-details-marker { display: none; }
.arbre details > summary::before { content: "›"; width: 14px; flex: none; color: var(--encre-3); transition: transform .15s; text-align: center; }
.arbre details[open] > summary::before { transform: rotate(90deg); }
.arbre-niveau { list-style: none; margin: 0; padding: 0 0 0 14px; }
.arbre-haut > .arbre-niveau, .arbre-niveau.arbre-haut { padding-left: 0; }
.arbre-niveau > li > .arbre-lien { margin-left: 14px; }
.arbre-lien { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 5px 6px; border-radius: var(--r-s); color: var(--encre); text-decoration: none; }
.arbre-lien span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; }
.arbre-lien .ic { flex: none; color: var(--encre-3); }
.arbre-lien:hover { background: var(--survol); }
.arbre-lien.actif { background: var(--accent-2); color: var(--accent-encre); font-weight: 600; }
.arbre-corbeille { margin: 8px 0 0; border-top: 1px solid var(--trait-2); border-radius: 0; padding-top: 9px; }
.arbre-vide { padding: 3px 6px 3px 20px; color: var(--encre-3); font-size: 12.5px; }
.tete-fichiers { padding: 10px 14px; border-bottom: 1px solid var(--trait); display: flex; flex-direction: column; gap: 8px; }
.outils-fichiers { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fil-ariane { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; font-size: 14px; }
.fil-ariane a { color: var(--encre-2); text-decoration: none; border-radius: var(--r-s); padding: 2px 4px; }
.fil-ariane a:hover { background: var(--survol); color: var(--encre); }
.fil-ariane [aria-current] { font-weight: 600; padding: 2px 4px; }
.fil-ariane .sep { color: var(--encre-3); }
.quota { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--encre-2); white-space: nowrap; }
.jauge { width: 110px; height: 6px; border: 0; border-radius: 999px; background: var(--surface-2); overflow: hidden; appearance: none; }
.jauge::-webkit-progress-bar { background: var(--surface-2); }
.jauge::-webkit-progress-value { background: var(--commun); border-radius: 999px; }
.jauge::-moz-progress-bar { background: var(--commun); border-radius: 999px; }
.quota.alerte { color: var(--alerte); font-weight: 600; }
.quota.alerte .jauge::-webkit-progress-value { background: var(--alerte); }
.quota.alerte .jauge::-moz-progress-bar { background: var(--alerte); }
.barre-selection { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.barre-selection form { display: contents; }
.barre-selection:not(.active) .btn { opacity: .55; }
.tableau-fichiers tbody tr { user-select: none; cursor: default; }
.tableau-fichiers td { padding-top: 7px; padding-bottom: 7px; white-space: nowrap; }
/* Le nom prend la place restante et se tronque (90 % de sa colonne au plus). */
.tableau-fichiers td:first-child { width: 100%; max-width: 0; }
.tableau-fichiers .identite { min-width: 0; }
.nom-fichier { min-width: 0; max-width: 90%; }
.nom-fichier .principal-txt { overflow: hidden; text-overflow: ellipsis; }
.tableau-fichiers tbody tr[data-aller] .principal-txt { cursor: pointer; }
.tableau-fichiers td .origine { margin-top: 0; }
.tableau-fichiers .col-detail { width: 44px; text-align: right; }
.tableau-fichiers th { white-space: nowrap; }
.tableau-fichiers .col-partage { text-align: center; }
.tableau-fichiers .col-partage .av-p { width: 26px; height: 26px; font-size: 10.5px; }
.type-fichier { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.tf-dossier { background: var(--moyen-2); color: var(--moyen); }
.tf-pdf { background: var(--alerte-2); color: var(--alerte); }
.tf-image { background: var(--partage-2); color: var(--partage); }
.tf-texte { background: var(--surface-2); color: var(--encre-2); }
.tf-tableur, .tf-socle { background: var(--commun-2); color: var(--commun); }
.survol-depot, .arbre-lien.survol-depot, tr.survol-depot { background: var(--accent-2) !important; outline: 2px dashed var(--accent); outline-offset: -2px; }
.apercu { height: 170px; width: 100%; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--encre-3); margin: 0 0 10px; border: 1px solid var(--trait-2); overflow: hidden; padding: 0; }
.apercu .ic { width: 42px; height: 42px; stroke-width: 1.3; }
.apercu-image { cursor: zoom-in; }
.apercu-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.actions-fichier { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.actions-fichier form { display: contents; }
.editeur textarea { width: 100%; min-height: 260px; font-family: "Space Mono", monospace; font-size: 13px; resize: vertical; }
.editeur [data-etat-enregistrement] { margin: 4px 0 10px; font-size: 12px; }
.texte-lu { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; background: var(--surface-2); border-radius: var(--r-s); padding: 10px; font-size: 13px; margin: 0 0 10px; }
.visionneuse { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.visionneuse::backdrop { background: rgba(10, 12, 11, .85); }
.visionneuse img { display: block; max-width: 96vw; max-height: 92vh; object-fit: contain; }
.visionneuse .btn-icone { position: fixed; top: 14px; right: 14px; background: var(--surface); }
@media (max-width: 1500px) { html.panneau-ouvert .fichiers { grid-template-columns: 1fr; } html.panneau-ouvert .arbre { position: static; max-height: none; } }
@media (max-width: 960px) { .fichiers { grid-template-columns: 1fr; } .arbre { position: static; max-height: none; } }
.choix-droit { display: flex; flex-direction: column; gap: 10px; }
.formulaire .option-droit { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r-m); background: var(--surface-2); cursor: pointer; font-size: 13.5px; color: var(--encre); }
.formulaire .option-droit:has(input:checked) { background: var(--accent-2); }
.formulaire .option-droit input { margin-top: 3px; flex: none; width: auto; }
.option-droit > span { display: flex; flex-direction: column; gap: 2px; }
.option-droit .tres-discret { font-size: 12.5px; }
/* Bilan d'un dépôt de fichiers : en bas à droite, disparaît seul au bout de 3 s. */
.bilan-depot { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(380px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-m); box-shadow: var(--ombre-2); padding: 12px 14px; animation: bilan-disparait .4s ease 3s forwards; }
.bilan-depot-titre { font-weight: 600; margin-bottom: 6px; }
.bilan-depot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.bilan-depot li { display: flex; align-items: flex-start; gap: 8px; }
.bilan-depot li > span { display: flex; flex-direction: column; min-width: 0; }
.bilan-depot .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bilan-depot .raison { font-size: 12px; color: var(--encre-2); }
.bilan-depot .ok .ic { color: var(--commun); flex: none; margin-top: 2px; }
.bilan-depot .ko .ic { color: var(--alerte); flex: none; margin-top: 2px; }
@keyframes bilan-disparait { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .bilan-depot { animation-duration: .01s; } }

/* --- Notes (§5.7, fiche 0009) : arborescence, note ouverte (éditeur et rendu). --- */
.arbre-notes .arbre-dossier { margin-bottom: 2px; }
.arbre-notes .arbre-niveau .arbre-niveau { padding-left: 14px; }
[data-dossier-cible].survol-depot, [data-note-cible].survol-depot { background: var(--accent-2); outline: 2px dashed var(--accent); outline-offset: -2px; }
.lien-discret { color: inherit; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lien-discret:hover { color: var(--accent-encre); }
.apercu-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions-corbeille { display: flex; gap: 6px; justify-content: flex-end; }
.actions-corbeille form { display: contents; }
/* À la hauteur de la fenêtre (notes.js) : le texte et le rendu défilent dedans, pas la page. */
.note-ouverte { display: flex; flex-direction: column; min-width: 0; min-height: 380px; overflow: hidden; }
.tete-note { padding: 12px 16px 10px; border-bottom: 1px solid var(--trait); display: flex; flex-direction: column; gap: 6px; }
.titre-note { display: flex; align-items: center; gap: 8px; }
.titre-note > * { flex: none; }
.titre-note h2 { margin: 0; font-family: var(--titre); font-size: 22px; font-weight: 600; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titre-note .pousse, .barre-note .pousse { flex: 1; }
.etat-note { font-size: 12px; color: var(--encre-3); }
.etat-note[data-etat="ok"] { color: var(--commun); }
.etat-note[data-etat="erreur"] { color: var(--alerte); }
.titre-note .modification-note { flex: 0 1000 auto; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-note { flex: none; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 6px 12px; background: var(--barre); border-bottom: 1px solid var(--trait-2); }
.btn-outil { display: inline-flex; align-items: center; gap: 5px; font: 13px var(--texte); color: var(--encre); background: none; border: 1px solid transparent; border-radius: 7px; padding: 5px 8px; cursor: pointer; }
.btn-outil:hover { background: var(--survol); border-color: var(--trait); }
.btn-outil.mono { font-family: "Space Mono", monospace; }
.sep-outils { width: 1px; align-self: stretch; background: var(--trait); margin: 3px 4px; }
.barre-note .bascule button { font: 12.5px var(--texte); border: 0; background: none; border-radius: 7px; padding: 5px 10px; color: var(--encre-2); cursor: pointer; }
.barre-note .bascule button[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: var(--ombre-1); font-weight: 600; }
.zone-note { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.zone-note[data-affichage="texte"] { grid-template-columns: minmax(0, 1fr); }
.zone-note[data-affichage="texte"] .rendu-note { display: none; }
.zone-note[data-affichage="rendu"] { grid-template-columns: minmax(0, 1fr); }
.zone-note[data-affichage="rendu"] .editeur-note { display: none; }
.editeur-note { position: relative; border-right: 1px solid var(--trait-2); display: flex; min-height: 0; }
.editeur-note textarea { flex: 1; min-height: 0; overflow: auto; border: 0; outline: 0; resize: none; padding: 16px 18px; font: 13px/1.75 "Space Mono", monospace; color: var(--encre); background: var(--surface); }
.menu-barre-oblique { position: absolute; top: 44px; left: 24px; width: 240px; z-index: 5; }
.menu-barre-oblique .choix-menu { width: 100%; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.menu-barre-oblique .choix-menu.actif { background: var(--accent-2); color: var(--accent-encre); }
.rendu-note { padding: 16px 24px; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; min-width: 0; overflow: auto; }
.rendu-note li.case-md { list-style: none; margin-left: -1.2em; }
.rendu-note img { max-width: 100%; height: auto; border-radius: var(--r-s); break-inside: avoid; }
.rendu-note h1, .rendu-note h2, .rendu-note h3 { font-family: var(--titre); line-height: 1.25; margin: 1.1em 0 .45em; }
.rendu-note h1:first-child, .rendu-note h2:first-child, .rendu-note h3:first-child { margin-top: 0; }
.rendu-note h1 { font-size: 26px; } .rendu-note h2 { font-size: 21px; } .rendu-note h3 { font-size: 17px; }
.rendu-note p, .rendu-note ul, .rendu-note ol, .rendu-note blockquote, .rendu-note pre, .rendu-note table { margin: 0 0 .9em; }
.rendu-note ul, .rendu-note ol { padding-left: 1.4em; }
.rendu-note blockquote { border-left: 3px solid var(--trait); padding: 2px 0 2px 14px; color: var(--encre-2); }
.rendu-note code { font-family: "Space Mono", monospace; font-size: .86em; background: var(--surface-2); border-radius: 5px; padding: 1px 5px; }
.rendu-note pre { background: var(--surface-2); border-radius: var(--r-s); padding: 12px 14px; overflow-x: auto; }
.rendu-note pre code { background: none; padding: 0; font-size: 12.5px; }
.rendu-note table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.rendu-note th, .rendu-note td { border: 1px solid var(--trait); padding: 6px 10px; text-align: left; }
.rendu-note th { background: var(--surface-2); }
.rendu-note hr { border: 0; border-top: 1px solid var(--trait); margin: 1.4em 0; }
.rendu-note .formule { overflow-x: auto; margin: 0 0 .9em; text-align: center; }
.rendu-note math { font-size: 1.1em; }
.formule-erreur { color: var(--alerte); }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type { color: var(--accent); }
.hljs-string, .hljs-attr, .hljs-symbol, .hljs-template-tag { color: var(--commun); }
.hljs-number, .hljs-literal, .hljs-variable { color: var(--anniv); }
.hljs-comment, .hljs-quote { color: var(--encre-3); font-style: italic; }
.hljs-title, .hljs-section, .hljs-name { color: var(--partage); }
/* Citations : une étiquette ; un lien vers le panneau de ce que je vois, le nom seul sinon. */
.citation { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--accent-2); color: var(--accent-encre); text-decoration: none; font-weight: 500; }
a.citation:hover { text-decoration: underline; }
.citation.inaccessible { background: var(--surface-2); color: var(--encre-2); font-weight: 400; }
/* Cités, sous la note : une colonne par type, comme le bas d'une carte de contact. */
.cites-note { flex: none; padding: 10px 16px; border-top: 1px solid var(--trait); max-height: 140px; overflow: auto; }
.cites-note .liste-liens a.inaccessible { color: var(--encre-3); cursor: default; }
.menu-citer { width: 320px; max-height: 360px; overflow: auto; }
.menu-citer .menu-vide { padding: 6px 10px; font-size: 12.5px; }
.choix-dossier { border: 1px solid var(--trait); border-radius: var(--r-m); padding: 8px; max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin: 0; }
.choix-dossier legend { font-size: 12.5px; color: var(--encre-2); padding: 0 4px; }
.formulaire .choix-dossier label { flex-direction: row; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 13.5px; color: var(--encre); font-weight: 400; }
.formulaire .choix-dossier label:has(input:checked) { background: var(--accent-2); color: var(--accent-encre); font-weight: 600; }
.choix-dossier label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choix-dossier input { width: auto; }
.choix-dossier .profondeur-1 { padding-left: 24px; } .choix-dossier .profondeur-2 { padding-left: 42px; }
.choix-dossier .profondeur-3 { padding-left: 60px; } .choix-dossier .profondeur-4 { padding-left: 78px; }
@media (max-width: 1100px) { .titre-note { flex-wrap: wrap; } .zone-note { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); } .editeur-note { border-right: 0; border-bottom: 1px solid var(--trait-2); } }
/* Imprimer une note = son PDF (§5.7) : le rendu seul, pleine page. */
@media print {
  .page-notes .arbre, .tete-note .btn, .tete-note .btn-icone, .tete-note .utilisateur, .tete-note .pile, .barre-note, .editeur-note, .etat-note, .modification-note, .fil-ariane { display: none !important; }
  .page-notes { display: block; }
  .zone-note { display: block; }
  .note-ouverte { border: 0; height: auto !important; overflow: visible; }
  .rendu-note { overflow: visible; }
  .rendu-note { padding: 0; font-size: 12pt; }
}

/* ---------- Messagerie (§5.8) : conversations à gauche, la conversation ouverte à droite ---------- */
.liste-conversations { display: flex; flex-direction: column; gap: 2px; }
.conversation-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: inherit; min-width: 0; }
.conversation-ligne:hover { background: var(--survol); }
.conversation-ligne.actif { background: var(--accent-2); }
.conversation-ligne .quoi { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-ligne .sous { display: block; font-weight: 400; font-size: 12px; color: var(--encre-3); }
.conversation-ligne .compteur { background: var(--accent); color: var(--sur-accent); font-size: 11px; font-weight: 700; border-radius: 10px; padding: 0 7px; line-height: 18px; }
.vide-conversations { padding: 10px; }
.conversation { display: flex; flex-direction: column; height: calc(100vh - 190px); min-height: 420px; position: relative; }
.conversation-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--trait); }
.conversation-tete .titres { display: flex; align-items: center; gap: 12px; min-width: 0; }
.conversation-tete h2 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions-conversation { display: flex; gap: 6px; flex: none; }
.actions-conversation form { margin: 0; }
.fil-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.message { display: flex; gap: 8px; align-items: flex-end; max-width: 78%; }
.message.a-moi { align-self: flex-end; flex-direction: row-reverse; }
.message .bulle { background: var(--surface-2); border-radius: 12px; padding: 7px 11px; min-width: 0; }
.message.a-moi .bulle { background: var(--accent-2); }
.message-tete { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.message-tete .btn-icone { width: 24px; height: 24px; margin-left: auto; opacity: .6; }
.message-tete .btn-icone:hover { opacity: 1; }
.message-texte { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.message-texte a { color: var(--accent-encre); text-decoration: underline; }
.message.supprime .message-texte { font-style: italic; color: var(--encre-3); }
.carte-fichier { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 9px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); color: var(--encre); font-size: 13px; }
.nouveaux-messages { position: absolute; left: 50%; transform: translateX(-50%); bottom: 76px; box-shadow: var(--ombre-2); z-index: 1; }
.composeur { border-top: 1px solid var(--trait); padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.composeur textarea { width: 100%; resize: vertical; min-height: 44px; max-height: 200px; }

.onglets-espaces + .liste-conversations { margin-top: 8px; }
.conversation-ouverte { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }
.composeur-ligne { display: flex; align-items: flex-end; gap: 8px; }
.composeur-ligne textarea { flex: 1; min-height: 40px; }
.composeur-joindre .choix-personnes { width: 100%; }
.panneau-conversation { display: flex; flex-direction: column; padding: 0; overflow: hidden; min-height: 0; }
.panneau-conversation .fil-messages { padding: 12px 16px; }
.panneau-conversation .message { max-width: 92%; }
.panneau-tete .btn-petit { margin-left: auto; }
.liste-participants li { display: flex; align-items: center; gap: 6px; }
.liste-participants li .personne { flex: 1; min-width: 0; }
.liste-participants li form { margin: 0; flex: none; }