/* Bureava : charte bleu nuit et or, l’univers de la vitrine (le bureau qui travaille la nuit). */
:root {
  --fond: #F7F5F0;
  --surface: #FFFFFF;
  --surface-2: #F1EEE8;
  --encre: #1B2B24;
  --encre-2: #33443C;
  --encre-3: #4E5A54;
  --discret: #66706A;
  --trait: #E4E0D6;
  --trait-doux: #EEEAE1;
  --bord-champ: #D6D1C5;
  --rail: #1E4D3B;
  --rail-texte: #DCE7E1;
  --rail-discret: #A9C2B6;
  --or: #F08A6B;
  --or-texte: #B4553A;
  --principal: #1E4D3B;
  --principal-texte: #F7F5F0;
  --vert: #2E6B4F; --vert-fond: #E6F0EA;
  --orange: #9A5A12; --orange-fond: #F6ECDD;
  --rouge: #9E2F2A; --rouge-fond: #F5E3E1;
  --info-fond: #EDF2EF;
  --ombre: 0 1px 0 rgba(22, 38, 63, 0.04);
  --rayon: 14px;
  --titre: 'Newsreader', Georgia, serif;
  --texte: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #0E1A15; --surface: #15241D; --surface-2: #1B2E25; --encre: #EEF4F0; --encre-2: #D6E0DA; --encre-3: #B6C4BC;
    --discret: #9AAAA2; --trait: #26392F; --trait-doux: #20332A; --bord-champ: #3A5246; --rail: #0A140F; --rail-texte: #C8D6CF;
    --rail-discret: #90A39A; --or-texte: #F08A6B; --principal: #F08A6B; --principal-texte: #1B2B24;
    --vert: #7CC4A0; --vert-fond: #173327; --orange: #E8B26A; --orange-fond: #3A2A12; --rouge: #F09A92; --rouge-fond: #3B1C1B; --info-fond: #1E3128;
    color-scheme: dark;
  }
}
:root[data-theme="sombre"] {
  --fond: #0E1A15; --surface: #15241D; --surface-2: #1B2E25; --encre: #EEF4F0; --encre-2: #D6E0DA; --encre-3: #B6C4BC;
  --discret: #9AAAA2; --trait: #26392F; --trait-doux: #20332A; --bord-champ: #3A5246; --rail: #0A140F; --rail-texte: #C8D6CF;
  --rail-discret: #90A39A; --or-texte: #F08A6B; --principal: #F08A6B; --principal-texte: #1B2B24;
  --vert: #7CC4A0; --vert-fond: #173327; --orange: #E8B26A; --orange-fond: #3A2A12; --rouge: #F09A92; --rouge-fond: #3B1C1B; --info-fond: #1E3128;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--encre); font-family: var(--texte); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--encre); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: 6px; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 16px; z-index: 50; background: var(--surface); padding: 8px 12px; }
[hidden] { display: none !important; }

/* Cadre : rail à gauche sur grand écran, onglets en bas sur téléphone. */
.cadre { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.rail { background: var(--rail); color: var(--rail-texte); padding: 32px 20px; display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marque { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
.marque-nom { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titre); font-size: 22px; color: #F7F5F0; }
.marque-logo { flex: none; border-radius: 7px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.marque-societe { font-size: 13px; color: var(--rail-discret); }
.rail-groupe { display: flex; flex-direction: column; gap: 2px; }
.rail-titre { padding: 0 12px 8px; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rail-discret); }
.rail a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 8px; color: var(--rail-texte); text-decoration: none; font-size: 15px; }
.rail a:hover { background: rgba(247, 245, 240, 0.06); }
.rail a[aria-current="page"] { background: rgba(247, 245, 240, 0.12); color: #F7F5F0; font-weight: 500; }
.rail .compte { font-size: 12px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--or); color: #1B2B24; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.rail-pied { margin-top: auto; padding: 16px 0 0; border-top: 1px solid rgba(220, 226, 236, 0.16); }
.bouton-theme { width: 100%; min-height: 44px; border-radius: 8px; border: 1px solid rgba(220, 226, 236, 0.22); background: transparent; color: var(--rail-texte); cursor: pointer; font-size: 14px; }
.barre-haut, .onglets { display: none; }

.contenu { padding: 48px 56px 80px; min-width: 0; outline: none; overflow-wrap: anywhere; }
.page { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.chargement { color: var(--discret); text-align: center; padding: 80px 0; }

/* Typographie */
.surtitre { font-size: 14px; color: var(--discret); }
h1.titre { margin: 0; font-family: var(--titre); font-weight: 400; font-size: 46px; line-height: 1.1; letter-spacing: -0.4px; }
.chapeau { margin: 0; max-width: 720px; font-size: 18px; line-height: 1.6; color: var(--encre-2); }
.signature { font-size: 13px; color: var(--discret); }
.titre-section { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--discret); }
.entete { display: flex; flex-direction: column; gap: 14px; }
.entete-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section { display: flex; flex-direction: column; gap: 16px; }
.section-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-tete .aside { font-size: 13px; color: var(--discret); }

/* Bandeau de mode */
.bandeau { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 12px; background: var(--info-fond); color: var(--encre-2); font-size: 14px; line-height: 1.5; }
.bandeau strong { color: var(--encre); font-weight: 600; }

/* Cartes et listes */
.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
.liste { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.liste > * + * { border-top: 1px solid var(--trait-doux); }
.vide { margin: 0; padding: 24px; color: var(--encre-3); font-size: 15px; line-height: 1.55; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Décisions */
.decision { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; }
.decision-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.decision h3 { margin: 0; font-family: var(--titre); font-weight: 500; font-size: 23px; line-height: 1.25; }
.decision p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--encre-3); }
.decision .replie { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lien-texte { background: none; border: none; padding: 0; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px; align-self: flex-start; min-height: 32px; }
.avis { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; }
.avis::before { content: ''; width: 9px; height: 9px; border-radius: 5px; background: currentColor; }
.avis.vert { color: var(--vert); } .avis.orange { color: var(--orange); } .avis.rouge { color: var(--rouge); } .avis.neutre { color: var(--discret); }
.avis-texte { font-size: 14px; line-height: 1.55; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); color: var(--encre-2); }
.options { display: flex; flex-wrap: wrap; gap: 8px; }
.tranche { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--encre-2); }

/* Boutons et pastilles */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--principal); background: var(--principal); color: var(--principal-texte); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; text-align: center; }
.bouton.secondaire { background: var(--surface); color: var(--encre); border-color: var(--bord-champ); font-weight: 400; }
.bouton.large { width: 100%; }
/* Un bouton désactivé (« Valider » sans clé Buffer, « Composer » pendant la composition) ne doit pas sembler actif (essai du 08/10/2026). */
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.bouton-icone { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; }
.pastille { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 13px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--surface-2); color: var(--encre-3); }
.pastille.vert { background: var(--vert-fond); color: var(--vert); }
.pastille.orange { background: var(--orange-fond); color: var(--orange); }
.pastille.rouge { background: var(--rouge-fond); color: var(--rouge); }
.pastille.info { background: var(--info-fond); color: var(--encre-2); }
.pastille.fort { background: var(--principal); color: var(--principal-texte); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--bord-champ); background: var(--surface); color: var(--encre); font-size: 14px; cursor: pointer; }
.puce[aria-pressed="true"] { background: var(--principal); color: var(--principal-texte); border-color: var(--principal); }

/* Pôles */
.tuile { display: flex; flex-direction: column; gap: 10px; padding: 18px; text-decoration: none; color: var(--encre); background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; min-height: 132px; }
.tuile:hover { border-color: var(--bord-champ); }
.tuile-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tuile-nom { font-size: 16px; font-weight: 500; }
.tuile-modele { font-size: 12px; color: var(--discret); }
.tuile-texte { font-size: 13px; line-height: 1.45; color: var(--encre-3); }
.tuile-date { margin-top: auto; font-size: 12px; color: var(--discret); }

.fiche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 22px 24px; }
.fiche dt { font-size: 13px; color: var(--discret); }
.fiche dd { margin: 4px 0 0; font-size: 16px; font-weight: 500; }
.outil { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 0 24px; }
.outil span:first-child { font-size: 15px; }

.ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 22px; }
.ligne-titre { font-size: 15px; font-weight: 500; }
.ligne-sous { font-size: 13px; color: var(--discret); margin-top: 3px; }
.ligne-texte { font-size: 14px; line-height: 1.55; color: var(--encre-3); margin-top: 6px; }
button.ligne { width: 100%; border: none; background: transparent; text-align: left; cursor: pointer; color: var(--encre); }
button.ligne[aria-current="true"] { background: var(--surface-2); }

/* Journal */
.entree { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 16px; padding: 16px 22px; align-items: baseline; }
.entree-heure { font-size: 13px; color: var(--discret); font-variant-numeric: tabular-nums; }
.entree-titre { font-size: 15px; font-weight: 500; }
.entree-detail { font-size: 14px; line-height: 1.55; color: var(--encre-3); margin-top: 4px; white-space: pre-line; }   /* les lignes d'un détail (liste du courrier, consigne) restent des lignes */
.niveau { font-size: 11px; font-weight: 600; letter-spacing: 0.6px; }
.niveau.verifie { color: var(--vert); } .niveau.lu { color: var(--orange); } .niveau.deduit { color: var(--discret); }
.jour { font-size: 13px; font-weight: 600; color: var(--encre-2); padding: 18px 2px 8px; text-transform: capitalize; }

/* Classeurs */
.classeurs { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.apercu { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.lettre { background: #FFFFFF; color: #1B2B24; border: 1px solid var(--trait); border-radius: 6px; overflow: hidden; }
.lettre-tete { background: #1E4D3B; padding: 16px 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lettre-tete span:first-child { font-family: var(--titre); letter-spacing: 1.6px; color: #F7F5F0; font-size: 15px; }
.lettre-tete span:last-child { font-size: 10px; color: #F08A6B; }
.lettre-corps { padding: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.lettre-objet { font-family: var(--titre); font-size: 16px; line-height: 1.35; }
.lettre-mention { font-size: 10px; letter-spacing: 1.2px; color: #8A7F70; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: 13px; color: var(--discret); }
.champ input, .champ select, .champ textarea { min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bord-champ); background: var(--surface); font-size: 15px; width: 100%; }
.champ textarea { padding: 12px 14px; min-height: 90px; resize: vertical; }
.cases { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; min-width: 0; }
.cases legend { padding: 0; margin-bottom: 4px; font-size: 13px; color: var(--discret); }
.cases label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--encre); cursor: pointer; }
.cases input { width: 18px; height: 18px; accent-color: var(--principal); margin: 0; }
.formulaire { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.formulaire-ligne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.membre { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; }
.membre-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.membre-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.membre.inactif { opacity: 0.72; }
.outils-ligne { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.outils-ligne .champ { flex: 1 1 260px; }

/* Équipe */
.agent { display: grid; grid-template-columns: 200px 260px minmax(0, 1fr) 150px; gap: 24px; padding: 20px 24px; align-items: start; }
.bascule { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.bascule button { min-height: 40px; padding: 0 14px; border-radius: 9px; border: none; background: transparent; color: var(--encre-3); font-size: 14px; font-weight: 500; cursor: pointer; }
.bascule button[aria-pressed="true"] { background: var(--principal); color: var(--principal-texte); }
.legende { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--encre-3); }

/* Feuille « Plus » (téléphone) */
.feuille { position: fixed; inset: 0; z-index: 40; }
.feuille-fond { position: absolute; inset: 0; background: rgba(10, 18, 32, 0.45); }
.feuille-corps { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 18px 18px 0 0; padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
#liens-plus { display: flex; flex-direction: column; }
#liens-plus a { display: flex; align-items: center; min-height: 52px; padding: 0 8px; text-decoration: none; font-size: 16px; border-bottom: 1px solid var(--trait-doux); }
#liens-plus .plus-deconnexion { min-height: 52px; padding: 0 8px; margin-top: 8px; text-align: left; font: inherit; font-size: 16px; color: var(--encre-2, inherit); background: none; border: none; cursor: pointer; }

@media (max-width: 1180px) {
  .contenu { padding: 40px 36px 72px; }
  .grille-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent { grid-template-columns: 180px minmax(0, 1fr); }
  .classeurs { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 899px) {
  .cadre { display: block; }
  .rail { display: none; }
  .barre-haut { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; padding: calc(8px + env(safe-area-inset-top)) 12px 8px 16px; background: var(--rail); color: #F7F5F0; }
  .barre-haut .marque-nom { font-size: 19px; }
  .contenu { padding: 24px 16px calc(96px + env(safe-area-inset-bottom)); }
  .page { gap: 30px; }
  h1.titre { font-size: 34px; }
  .chapeau { font-size: 16px; }
  .onglets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--trait); padding: 4px 4px calc(6px + env(safe-area-inset-bottom)); }
  .onglets a, .onglets button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; font-size: 11px; color: var(--discret); text-decoration: none; border: none; background: none; cursor: pointer; }
  .onglets [aria-current="page"] { color: var(--encre); font-weight: 600; }
  .grille-3, .grille-2 { grid-template-columns: minmax(0, 1fr); }
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche { grid-template-columns: minmax(0, 1fr); }
  .agent { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .formulaire-ligne { grid-template-columns: minmax(0, 1fr); }
  .classeurs { grid-template-columns: minmax(0, 1fr); }
  .apercu { position: static; }
  .entree { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .decision, .ligne, .entree { padding-left: 16px; padding-right: 16px; }
  .outil { padding: 0 16px; }
  .ligne { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .tuile, .puce, .bouton { transition: border-color .15s, background-color .15s; }
}

/* Compte connecté, en bas du rail. */
.rail-compte { display: flex; flex-direction: column; gap: 2px; padding: 0 12px 12px; }
.rail-compte:empty { display: none; }
.rail-compte-nom { font-size: 14px; color: var(--rail-texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lien-rail { background: none; border: none; padding: 0; min-height: 32px; text-align: left; color: var(--rail-discret); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 13px; }
.lien-rail:hover { color: var(--rail-texte); }

/* Classeurs en relief : l'étagère, le classeur ouvert, ses intercalaires et ses feuilles. */
.cherche-classeurs { width: min(340px, 100%); }
.etagere { background: var(--surface-2); border: 1px solid var(--trait-doux); border-radius: 18px; padding: 28px 24px 0; overflow: hidden; }
.rangee { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end; gap: clamp(12px, 2vw, 26px); perspective: 1500px; padding: 34px 28px 2px 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
/* Centré tant que tout tient ; au-delà, l'étagère glisse sous le doigt au lieu de passer à la ligne. */
.rangee > :first-child { margin-left: auto; }
.rangee > :last-child { margin-right: auto; }
.planche { height: 20px; margin: 0 -24px; background: var(--trait); box-shadow: 0 7px 0 var(--bord-champ), 0 16px 26px rgba(22, 38, 63, 0.12); }
.classeur3d { position: relative; flex: 0 0 auto; scroll-snap-align: center; width: clamp(68px, 8.6vw, 92px); height: clamp(200px, 22vw, 280px); padding: 0; border: 0; background: transparent; cursor: pointer; transform-style: preserve-3d; color: #1B2B24; }
.classeur3d:focus-visible { outline: 3px solid var(--or); outline-offset: 6px; border-radius: 8px; }
.c3d-flanc { position: absolute; top: 5px; left: 100%; width: 24px; height: calc(100% - 5px); transform-origin: left center; transform: rotateY(62deg); border-radius: 0 5px 5px 0; }
.c3d-dessus { position: absolute; top: -11px; left: 0; width: 100%; height: 24px; transform-origin: bottom center; transform: rotateX(70deg); border-radius: 5px 5px 0 0; }
.c3d-dos { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 14px 0; border-radius: 7px; box-shadow: inset -7px 0 12px rgba(0, 0, 0, 0.2), inset 5px 0 7px rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.07), 0 16px 26px rgba(22, 38, 63, 0.24); }
.c3d-nb { display: flex; align-items: center; justify-content: center; width: 66%; height: 24px; border-radius: 4px; background: #FBFAF6; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.c3d-etiq { flex: 1; display: flex; align-items: center; justify-content: center; width: 66%; margin: 10px 0; border-radius: 4px; background: #FBFAF6; }
.c3d-etiq span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--titre); font-size: clamp(14px, 1.45vw, 18px); white-space: nowrap; }
.c3d-trou { width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, 0.34); box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5); }
.classeur3d[aria-pressed="true"] { transform: translateY(-24px) rotateY(-14deg) scale(1.04); }
@media (prefers-reduced-motion: no-preference) {
  .classeur3d { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
}
@media (hover: hover) {
  .classeur3d:hover:not([aria-pressed="true"]) { transform: translateY(-10px) rotateY(-6deg); }
}
.classeur-ouvert { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(22, 38, 63, 0.10); }
.couverture { display: flex; flex-direction: column; gap: 12px; padding: 28px; color: #F7F5F0; border-right: 1px solid var(--trait); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.couverture-mention { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; opacity: .85; }
.couverture-titre { margin: 0; font-family: var(--titre); font-weight: 400; font-size: 30px; line-height: 1.1; }
.couverture p { margin: 0; font-size: 15px; line-height: 1.55; opacity: .92; }
.anneaux { margin-top: auto; display: flex; flex-direction: column; gap: 30px; align-items: flex-end; }
.anneaux i { width: 18px; height: 18px; border-radius: 50%; background: #F7F5F0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); }
.interieur { display: flex; flex-direction: column; min-width: 0; }
.intercalaires { display: flex; gap: 4px; padding: 16px 18px 0; border-bottom: 1px solid var(--trait); overflow-x: auto; }
.intercalaires button { min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--fond); color: var(--discret); font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.intercalaires button[aria-selected="true"] { background: var(--surface); color: var(--encre); border-color: var(--trait); }
.feuilles-classeur { display: flex; flex-direction: column; }
.feuilles-classeur > * + * { border-top: 1px solid var(--trait-doux); }
.feuille-classeur { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; width: 100%; min-height: 64px; padding: 10px 22px; border: 0; background: transparent; color: var(--encre); text-align: left; text-decoration: none; cursor: pointer; }
.feuille-classeur[aria-current="true"] { background: var(--surface-2); }
@media (hover: hover) { .feuille-classeur:hover { background: var(--surface-2); } }
.feuille-ico { width: 16px; height: 20px; border-radius: 2px; background: var(--surface-2); box-shadow: 2px 2px 0 var(--trait); }
.feuille-date { font-size: 14px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.apercu-courrier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 720px) {
  .etagere { padding: 22px 12px 0; }
  .planche { margin: 0 -12px; }
  .rangee { gap: 14px 18px; }
  .classeur3d { width: 60px; height: 184px; }
  .classeur-ouvert { grid-template-columns: minmax(0, 1fr); }
  .anneaux { display: none; }
  .couverture { padding: 20px; }
  .feuille-classeur { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; }
  .feuille-ico { display: none; }
  .feuille-date { grid-row: 2; grid-column: 1; font-size: 13px; }
  .feuille-classeur .pastille { grid-row: 1 / 3; grid-column: 2; }
  .apercu-courrier { grid-template-columns: minmax(0, 1fr); }
}

/* Demandes d'accord (étape 3) : la liste des lettres, puis Accepter avec confirmation, ou Refuser avec la raison. */
.demande-accord { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px; }
.lettres-demande summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--encre); }
.lettres-demande ol { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 16px; }
.lettres-demande li { padding-bottom: 14px; border-bottom: 1px solid var(--trait-doux); }
.formulaire-refus { display: flex; flex-direction: column; gap: 10px; }
.message-accord { margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.message-accord.ok { background: var(--vert-fond); color: var(--vert); }
.message-accord.ko { background: var(--orange-fond); color: var(--orange); }

/* L'étage des pôles : une porte par pôle, à sa couleur (--c), et le pôle choisi ouvert en dessous. */
.rail-pole { display: inline-flex; align-items: center; gap: 10px; }
.pastille-pole { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.etage { background: var(--surface-2); border: 1px solid var(--trait-doux); border-radius: 20px; padding: 26px 22px 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.porte { position: relative; display: flex; flex-direction: column; text-align: left; min-height: 280px; padding: 0; border: 0; border-radius: 14px 14px 6px 6px; background: var(--surface); color: var(--encre); cursor: pointer; overflow: hidden; font: inherit; box-shadow: 0 1px 0 var(--trait), 0 14px 26px rgba(22, 38, 63, 0.14); }
.porte:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
.porte[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--c), 0 18px 30px rgba(22, 38, 63, 0.18); }
@media (prefers-reduced-motion: no-preference) {
  .porte { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
  .porte[aria-pressed="true"] { transform: translateY(-6px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .porte:hover:not([aria-pressed="true"]) { transform: translateY(-4px); } }
.linteau { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; background: var(--c); color: #F7F5F0; }
.picto { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; }
.picto svg { width: 22px; height: 22px; stroke: #F7F5F0; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.picto.grand { width: 52px; height: 52px; flex-basis: 52px; border-radius: 14px; }
.picto.grand svg { width: 28px; height: 28px; }
.porte-nom { display: block; font-family: var(--titre); font-size: 21px; line-height: 1.1; }
.porte-agent { display: block; font-size: 12px; opacity: .85; }
.panneau { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px 16px; padding-right: 26px; }
.etat-agent { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; }
.etat-agent i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.etat-agent.actif { background: var(--vert-fond); color: var(--vert); }
.etat-agent.repos { background: var(--surface-2); color: var(--encre-3); }
.porte-dernier { font-size: 14px; line-height: 1.45; color: var(--encre-2); }
.porte-attente { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--orange); }
.jauge { display: block; height: 6px; border-radius: 3px; background: var(--trait-doux); overflow: hidden; }
.porte-attente + .jauge, .porte-dernier + .jauge { margin-top: auto; }
.jauge b { display: block; height: 6px; background: var(--c); }
.porte-depense { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--discret); font-variant-numeric: tabular-nums; }
.poignee { position: absolute; right: 10px; top: 58%; width: 6px; height: 28px; border-radius: 3px; background: var(--trait); }
.pole-ouvert { background: var(--surface); border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(22, 38, 63, 0.10); }
.pole-ouvert-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: var(--c); color: #F7F5F0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.pole-ouvert-tete h2 { margin: 0; font-family: var(--titre); font-weight: 400; font-size: 30px; }
.pole-ouvert-tete p { margin: 4px 0 0; opacity: .9; font-size: 15px; }
.pole-fiche { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.pole-fiche div { display: flex; flex-direction: column; }
.pole-fiche span { opacity: .75; font-size: 12px; }
.pole-ouvert-corps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.colonne-pole { padding: 20px 24px; border-right: 1px solid var(--trait-doux); display: flex; flex-direction: column; gap: 10px; }
.colonne-pole:last-child { border-right: 0; }
.colonne-pole h3 { margin: 0 0 4px; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--discret); }
.colonne-pole ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.colonne-pole li { font-size: 14px; line-height: 1.45; padding-left: 12px; border-left: 3px solid var(--c); overflow-wrap: anywhere; }
.colonne-pole li small { display: block; color: var(--discret); font-size: 12px; }
.vide-court { margin: 0; font-size: 14px; color: var(--encre-3); }
.bouton-pole { align-self: flex-start; margin-top: auto; }
.pole-entete { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: 16px; background: var(--c); color: #F7F5F0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.pole-entete .titre { color: #F7F5F0; margin: 0; }
.pole-entete p { margin: 4px 0 0; opacity: .9; }
.pole-entete-ligne { display: flex; align-items: center; gap: 16px; }
.pole-retour { color: #F7F5F0; opacity: .85; font-size: 14px; text-decoration: none; align-self: flex-start; }
.pole-retour:hover, .pole-retour:focus-visible { opacity: 1; text-decoration: underline; }
.pole-retour:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
@media (max-width: 1000px) { .etage { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pole-ouvert-corps { grid-template-columns: minmax(0, 1fr); } .colonne-pole { border-right: 0; border-bottom: 1px solid var(--trait-doux); } .colonne-pole:last-child { border-bottom: 0; } }
@media (max-width: 520px) { .etage { grid-template-columns: minmax(0, 1fr); padding: 18px 12px; } .porte { min-height: 0; } .pole-entete, .pole-ouvert-tete { padding: 18px; } }

/* ---------- Courrier (Secrétariat) ---------- */
a.lien-ligne { color: var(--encre); text-decoration: none; }
.messages .message + .message { border-top: 1px solid var(--trait-doux); }
.message-tete { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 22px; border: none; background: transparent; color: var(--encre); text-align: left; cursor: pointer; font: inherit; }
.message-tete:hover { background: var(--surface-2); }
.message.ouvert .message-tete { background: var(--surface-2); }
.message-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.message-texte .ligne-titre { font-size: 15px; line-height: 1.45; }
.message-meta { font-size: 12.5px; color: var(--encre-3); }
.message-meta strong { color: var(--encre-2); font-weight: 500; }
.message-corps { padding: 4px 22px 22px; display: flex; flex-direction: column; gap: 18px; }
.message-bloc { display: flex; flex-direction: column; gap: 8px; }
.message-de { font-size: 13px; color: var(--encre-3); overflow-wrap: anywhere; }
.message-objet { font-family: var(--titre); font-size: 17px; line-height: 1.35; }
.message-extrait { margin: 0; padding: 12px 16px; border-left: 3px solid var(--trait); background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 14.5px; line-height: 1.55; color: var(--encre-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.lettre-paragraphe { margin: 0; font-size: 14px; line-height: 1.55; }
.message-note { margin: 0; font-size: 13px; color: var(--encre-3); line-height: 1.5; }
.message-raisons { margin: 0; font-size: 13px; color: var(--encre-3); line-height: 1.5; }
.message-raisons strong { color: var(--encre-2); font-weight: 500; }
.message-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 720px) {
  .message-tete { padding: 14px 16px; gap: 10px; }
  .message-corps { padding: 4px 16px 18px; }
  .message-actions .bouton { flex: 1 1 auto; }
}

/* ---------- Les équipes d'un pôle ---------- */
.equipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.equipe, .directeur { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--trait); border-top: 4px solid var(--c, var(--principal)); border-radius: 12px; }
.directeur { margin-top: 12px; border-top-width: 1px; border-left: 4px solid var(--c, var(--principal)); }
.equipe-nom { font-family: var(--titre); font-size: 19px; color: var(--encre); }
.equipe-role { font-size: 14px; line-height: 1.5; color: var(--encre-2); }
.equipe-remet { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--trait-doux); font-size: 13.5px; color: var(--encre-2); }
.equipe-remet span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); margin-bottom: 2px; }
.chaine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.chaine li { padding: 6px 12px; border-radius: 16px; background: var(--surface-2); font-size: 13.5px; color: var(--encre); }
.chaine li + li::before { content: '→'; margin-right: 8px; color: var(--encre-3); }
.chaine li:last-child { background: var(--c, var(--principal)); color: #fff; }
.chaine li:last-child::before { color: rgba(255,255,255,.75); }

/* Aujourd'hui : l'en-tête du matin, dans l'univers de la vitrine Bureava (bureau du dirigeant au lever du jour). */
.matin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 36px; align-items: end; }
.matin-texte { display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }
.matin-scene { position: relative; aspect-ratio: 480 / 300; border-radius: 16px; overflow: hidden; border: 1px solid var(--trait); box-shadow: 0 18px 40px -24px rgba(22, 38, 63, .45); }
.matin-dessin { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ce-matin { position: absolute; left: 19%; bottom: 5%; width: 50%; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 10px; background: #FBF8F1; color: #1B2B24; border-radius: 3px; box-shadow: 0 10px 22px rgba(40, 20, 0, .3); transform: rotate(-1.6deg); font-size: 13px; line-height: 1.35; }
.ce-matin-titre { font-family: var(--titre); font-size: 20px; line-height: 1.1; border-bottom: 1px solid rgba(22, 38, 63, .12); padding-bottom: 6px; }
.ce-matin ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ce-matin li { display: flex; align-items: center; gap: 7px; }
.ce-matin li i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.ce-matin li b { font-weight: 600; }
.ce-matin p { margin: 0; color: #4E5A54; }
.ce-matin-pied { font-size: 11px; font-weight: 600; color: #B4553A; }

/* Le couloir : une porte par pôle, à sa couleur, le nom peint en or ; le dernier travail sous la porte. */
.couloir { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; padding: 24px 20px 20px; border-radius: 16px; border: 1px solid var(--trait);
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 70%); }
.cporte { display: flex; flex-direction: column; gap: 8px; min-width: 0; text-decoration: none; color: var(--encre); }
.cporte-imposte { height: 12px; border: 3px solid var(--couleur); border-bottom: none; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #FFE8DC, #F6B49E); }
.cporte-battant { position: relative; display: flex; justify-content: center; aspect-ratio: 3 / 5; margin-top: -8px; padding: 22% 6px 0; border-radius: 2px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .16), transparent 16%), var(--couleur); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .07), 0 10px 18px -12px rgba(0, 0, 0, .55); transform-origin: left center; }
.cporte-nom { font-family: var(--titre); font-size: clamp(13px, 1.15vw, 18px); line-height: 1.15; color: #F6B49E; text-align: center; overflow-wrap: anywhere; }
.cporte-poignee { position: absolute; right: 11%; top: 54%; width: 4px; height: 16%; border-radius: 2px; background: #F08A6B; box-shadow: 0 0 6px rgba(227, 169, 59, .5); }
.cporte-texte { font-size: 13px; line-height: 1.4; color: var(--encre-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cporte:focus-visible .cporte-battant, .cporte:hover .cporte-battant { box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .12), 0 0 0 2px var(--or), 0 10px 18px -12px rgba(0, 0, 0, .55); }
@media (prefers-reduced-motion: no-preference) {
  .cporte-battant { transition: transform .25s ease, box-shadow .2s; }
  .cporte:hover .cporte-battant { transform: perspective(700px) rotateY(-16deg); }
}
@media (max-width: 1180px) {
  .matin { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .matin-scene { max-width: 560px; }
  .couloir { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .couloir { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(118px, 36%); overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 14px 14px; }
  .cporte { scroll-snap-align: start; }
  .cporte-nom { font-size: 16px; }
}

/* L'étage des pôles en vrai couloir (Bureava) : mur clair, parquet, une porte à la couleur du pôle,
   imposte éclairée, nom peint en or, poignée de laiton ; la plaque claire de la porte dit l'état du pôle. */
.etage { padding: 40px 24px 54px; border-radius: 18px; gap: 22px 18px;
  background: linear-gradient(180deg, transparent calc(100% - 34px), #7A4E30 calc(100% - 34px), #6A4228), linear-gradient(180deg, #F4F0E8, #ECE6DA); }
:root[data-theme="sombre"] .etage { background: linear-gradient(180deg, transparent calc(100% - 34px), #3A2618 calc(100% - 34px), #2E1E13), linear-gradient(180deg, #1B2E25, #15241D); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .etage { background: linear-gradient(180deg, transparent calc(100% - 34px), #3A2618 calc(100% - 34px), #2E1E13), linear-gradient(180deg, #1B2E25, #15241D); } }
.porte { overflow: visible; margin-top: 14px; min-height: 330px; padding: 0 12px 14px; border-radius: 3px 3px 2px 2px; color: #F7F5F0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .16), transparent 14%), var(--c); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .07), 0 18px 30px -16px rgba(0, 0, 0, .55); }
.porte::before { content: ''; position: absolute; top: -16px; left: -4px; right: -4px; height: 12px; border: 3px solid var(--c); border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #FFE8DC, #F6B49E); }
.porte[aria-pressed="true"] { box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .1), 0 0 0 3px var(--or), 0 22px 34px -16px rgba(0, 0, 0, .6); }
.porte .linteau { flex-direction: column; text-align: center; gap: 10px; padding: 22px 6px 16px; background: none; }
.porte .porte-nom { color: #F6B49E; font-size: 23px; }
.porte .porte-agent { margin-top: 4px; color: #F1EADC; }
.porte .panneau { position: relative; z-index: 1; border-radius: 3px; padding: 12px 14px; margin-right: 10px; color: var(--encre); background: var(--surface); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.porte .poignee { right: 6px; top: 40%; width: 5px; height: 30px; background: #F08A6B; box-shadow: 0 0 8px rgba(227, 169, 59, .55); }
@media (max-width: 899px) { .porte { min-height: 0; } }

/* La page d'un pôle : l'en-tête montre sa pièce, comme dans la vitrine. */
.piece-entete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: stretch; gap: 22px; padding: 0 0 0 24px; overflow: hidden; }
.piece-texte { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 22px 0; }
.piece-dessin { display: block; width: 100%; height: 100%; min-height: 220px; }
@media (max-width: 899px) {
  .piece-entete { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .piece-texte { padding: 18px 18px 20px; order: 2; }
  .piece-dessin { order: 1; min-height: 0; aspect-ratio: 360 / 200; height: auto; }
}

/* États vides : la pièce du pôle en vignette, et une phrase utile. */
.vide-piece { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 20px; padding: 16px 22px 16px 16px; }
.vide-piece .piece-dessin { order: 0; width: 168px; height: auto; min-height: 0; aspect-ratio: 360 / 220; border-radius: 10px; }
.vide-piece p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--encre-3); }
@media (max-width: 520px) { .vide-piece { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; } .vide-piece .piece-dessin { width: 110px; } .vide-piece p { font-size: 14px; } }

/* L'équipe : l'organigramme des responsabilités, du dirigeant aux équipes. */
.organigramme .aside { max-width: 420px; text-align: right; }
.niveaux { display: flex; flex-direction: column; align-items: stretch; }
.niveau { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; }
.niveau-dirigeant { background: var(--rail); color: #F7F5F0; border-color: transparent; }
.niveau-dirigeant .niveau-sous, .niveau-dirigeant .niveau-peut { color: #DCE7E1; }
.niveau-dirigeant .niveau-titre { color: #F6B49E; }
.niveau-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.niveau-titre { font-family: var(--titre); font-size: 22px; line-height: 1.15; }
.niveau-sous { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--discret); }
.niveau-peut { margin: 0; font-size: 15px; line-height: 1.5; color: var(--encre-2); max-width: 820px; }
.niveau-remet { margin: 0; font-size: 13px; color: var(--encre-3); }
.niveau-remet span { margin-right: 8px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--discret); }
.fleche { align-self: center; width: 2px; height: 22px; background: var(--or); position: relative; }
.fleche::before { content: ''; position: absolute; left: -5px; top: -2px; border: 6px solid transparent; border-bottom-color: var(--or); }
.niveau-poles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.niveau-pole { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--c); color: #F7F5F0; text-decoration: none; }
.niveau-pole-nom { font-family: var(--titre); font-size: 15px; line-height: 1.2; color: #F6B49E; }
.niveau-pole-eq { font-size: 12px; opacity: .85; }
@media (max-width: 1180px) { .niveau-poles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) { .niveau-poles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .organigramme .aside { text-align: left; } }

/* La page du matin du directeur général (chaîne des agents) et les demandes qu'il a écartées. */
.page-matin { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-left: 3px solid var(--or); background: var(--surface); border-radius: 0 10px 10px 0; }
.page-matin-tete { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--discret); }
.page-matin p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--encre-2); }
.ligne.ecartee { border-left: 3px solid var(--rouge); }

/* En-têtes avec la vignette d'une pièce (Mémoire, Journal). */
.entete-vignette { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 28px; }
.entete-vignette .piece-dessin { order: 0; width: 220px; height: auto; min-height: 0; aspect-ratio: 360 / 220; border-radius: 14px; border: 1px solid var(--trait); }
@media (max-width: 899px) { .entete-vignette { grid-template-columns: minmax(0, 1fr); gap: 16px; } .entete-vignette .piece-dessin { width: 100%; max-width: 360px; order: -1; } }

/* La porte d'entrée : la façade de nuit à gauche, le formulaire à droite (en haut, sur téléphone). */
.entree-bureau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: calc(100vh - 120px); }
.facade-dessin { display: block; width: 100%; max-height: 78vh; border-radius: 18px; box-shadow: 0 24px 50px -26px rgba(10, 18, 32, .7); }
@media (max-width: 899px) { .entree-bureau { grid-template-columns: minmax(0, 1fr); gap: 20px; min-height: 0; } .facade-dessin { max-height: 240px; } }

/* Pièces (Finances) : la zone de dépôt, puis chaque pièce avec sa vignette, ses montants et les alertes du directeur financier. */
.depot { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.zone-depot { position: relative; flex: 1 1 360px; display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border: 2px dashed var(--bord-champ); border-radius: 14px; background: var(--surface); cursor: pointer; }
.zone-depot:hover, .zone-depot:focus-within { border-color: var(--or); }
.zone-depot input, .bouton-photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zone-depot-titre { font-family: var(--titre); font-size: 21px; }
.zone-depot-texte { font-size: 14px; color: var(--encre-3); }
.bouton-photo { position: relative; align-self: center; }
.liste.pieces { display: flex; flex-direction: column; }
.piece { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--trait-doux); }
.piece:last-child { border-bottom: 0; }
.piece-vignette { width: 84px; height: 108px; object-fit: cover; border-radius: 6px; border: 1px solid var(--trait); background: var(--surface-2); }
.piece-vignette.pdf { display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--encre-3); }
.piece-corps { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.piece-tete { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.piece-montant { font-family: var(--titre); font-size: 22px; font-variant-numeric: tabular-nums; }
.piece-alertes { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.piece-alertes li { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; background: var(--orange-fond); color: var(--orange); }
.piece-correction { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.grille-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
@media (max-width: 720px) { .grille-champs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .piece { grid-template-columns: 64px minmax(0, 1fr); } .piece-vignette { width: 64px; height: 84px; } }

/* Faire signer (Actiz) : le formulaire, puis la confirmation explicite avant tout envoi. */
.formulaire-signature { padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.signature-confirmer { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; border-left: 3px solid var(--or); }
.signature-confirmer p { margin: 0; font-size: 15px; line-height: 1.5; }
a.pastille { text-decoration: none; }

/* Accueil (Standiz) : messages, l'urgent d'abord ; rendez-vous à côté sur grand écran. */
.grille-accueil { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.accueil-message.urgent { border-left: 3px solid var(--rouge); }
.accueil-message .options { margin-top: 8px; }
.accueil-detail summary { cursor: pointer; font-size: 13px; color: var(--discret); }
.accueil-detail p { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; }
@media (max-width: 1180px) { .grille-accueil { grid-template-columns: minmax(0, 1fr); } }

/* Factures : profil de la société, éditeur de pièce (lignes), liste avec actions et confirmations. */
.formulaire-profil, .editeur-facture { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.outils-factures { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lignes-facture { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ligne-facture { display: grid; grid-template-columns: minmax(0, 1fr) 90px 150px 100px 36px; gap: 8px; width: 100%; align-items: center; }
.ligne-facture input, .ligne-facture select { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--bord-champ); border-radius: 10px; background: var(--surface); }
.entete-lignes { font-size: 12px; color: var(--discret); text-transform: uppercase; letter-spacing: 1px; }
.piece-facture .options { margin-top: 8px; }
.piece-facture a.bouton { text-decoration: none; display: inline-flex; align-items: center; }
/* Sur téléphone (essai du 08/10/2026) : sans en-tête, « 75 000 » et « 1 » ne disaient pas lequel était le prix. La désignation
   prend toute la largeur ; dessous, quantité, prix, taxe et la croix, chacun avec son indication. */
@media (max-width: 720px) {
  .ligne-facture { grid-template-columns: 64px minmax(0, 1fr) 88px 36px; }
  .ligne-facture > input[name="designation"] { grid-column: 1 / -1; }
  .ligne-facture:not(.entete-lignes) + .ligne-facture { padding-top: 10px; border-top: 1px solid var(--bord-champ); }
  .entete-lignes { display: none; }
}

/* Présences : formulaires, remise unique du badge ou du lien de borne, badge imprimable (recto et verso). */
.formulaire-employe { padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.formulaire-employe .champ { flex: 1 1 160px; }
.remise { padding: 18px 20px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; border-left: 3px solid var(--or); }
.remise-texte { flex: 1 1 280px; display: flex; flex-direction: column; gap: 10px; }
.remise-texte p { margin: 0; }
.code-perso { font-family: var(--titre); font-size: 26px; letter-spacing: 6px; }
.lien-borne { font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; color: var(--encre-3); }
.borne-qr svg, .badge-verso svg { width: 180px; height: 180px; background: #fff; border-radius: 8px; }
.badge-imprimable { display: flex; gap: 14px; flex-wrap: wrap; }
.badge-recto, .badge-verso { width: 242px; height: 153px; border-radius: 10px; border: 1px solid var(--trait); padding: 14px; display: flex; flex-direction: column; }
.badge-recto { background: #1E4D3B; color: #F6F1E7; justify-content: space-between; }
.badge-marque { font-family: var(--titre); color: #F6B49E; font-size: 15px; }
.badge-nom { font-family: var(--titre); font-size: 22px; line-height: 1.1; }
.badge-service { font-size: 12px; opacity: .85; }
.badge-verso { background: #fff; color: #1B2B24; align-items: center; justify-content: center; gap: 4px; }
.badge-verso svg { width: 112px; height: 112px; }
.badge-code { font-family: ui-monospace, monospace; font-size: 9px; }
@media print {
  body * { visibility: hidden; }
  .badge-imprimable, .badge-imprimable * { visibility: visible; }
  .badge-imprimable { position: absolute; left: 0; top: 0; }
  .badge-recto, .badge-verso { width: 85.6mm; height: 54mm; border: 0.2mm solid #999; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Planning (Présences, étape 5) : deux semaines, un jour par carte, les absences en tête. */
.alerte-planning { border-left: 4px solid var(--rouge); display: grid; gap: 8px; padding: 16px 18px; }
.alerte-planning p, .jour-planning p { margin: 0; }
.semaine-planning { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.jour-planning { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.jour-planning h3 { margin: 0; font-size: 14px; }
.jour-planning h3::first-letter { text-transform: uppercase; }
.jour-planning.aujourdhui { border-color: var(--or); box-shadow: 0 0 0 1px var(--or); }
.jour-planning.passe { opacity: .7; }
.poste-planning { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; padding-top: 6px; border-top: 1px solid var(--trait); }
.poste-planning .options select { max-width: 100%; }
.lien-discret { background: none; border: 0; padding: 4px 0; color: var(--vert); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }
details.carte { padding: 0; }
details.carte > summary { cursor: pointer; font-weight: 600; padding: 14px 18px; }
details.carte > .formulaire-employe { padding-top: 0; }
details.carte > .liste { padding: 0 18px 14px; }
/* Cartes de visite (08/10/2026) : la réponse du serveur dans le formulaire, le champ refusé, l'aperçu de la carte. */
.formulaire-employe > .message-accord, .ligne .message-accord { flex-basis: 100%; margin: 10px 0 0; }
.champ input[aria-invalid="true"] { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-fond); }
.refus-champ { font-size: 13px; line-height: 1.4; color: var(--orange); }
.lien-carte { overflow-wrap: anywhere; }
.lien-carte .lien-discret { margin-left: 6px; }
.apercu-carte { margin-top: 12px; }
.apercu-carte iframe { display: block; width: 100%; max-width: 420px; height: 600px; border: 1px solid var(--trait); border-radius: 18px; background: #F6F1E7; }

/* Paie (Finances, étape 6) : le détail d'un bulletin, dans la liste. */
.bulletin-ligne { align-items: flex-start; }
.detail-bulletin { display: grid; gap: 10px; margin-top: 10px; }
.detail-bulletin .formulaire-employe { padding: 0; }
.table-bulletin { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.table-bulletin th { text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--discret); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--trait); }
.table-bulletin th:first-child, .table-bulletin td:first-child { text-align: left; }
.table-bulletin td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--trait-doux); white-space: nowrap; }
.table-bulletin td:first-child { white-space: normal; }
.table-bulletin tr.fort td { font-weight: 600; color: var(--encre); }
.table-bulletin tr:last-child td { border-bottom: 0; background: var(--vert-fond); }
@media (max-width: 560px) { .table-bulletin { font-size: 12px; } .table-bulletin td, .table-bulletin th { padding: 5px 4px; } }
.detail-bulletin p { margin: 0; }
.bulletin-ligne .pastille { align-self: flex-start; flex: none; }

/* Affiches (Marketing, étape 6) : l'aperçu reprend la mise en page du PDF A4. */
.grille-affiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.affiche-carte { padding: 14px; display: grid; gap: 10px; align-content: start; }
.affiche-apercu { aspect-ratio: 595 / 842; border-radius: 10px; overflow: hidden; display: grid; grid-template-rows: 59.4% 1fr; background: var(--c); color: var(--sur); box-shadow: 0 6px 18px rgba(27, 43, 36, .12); }
.affiche-photo { background-size: cover; background-position: center; background-color: var(--surface-2); }
.affiche-bandeau { padding: 5% 7% 4%; display: flex; flex-direction: column; gap: 5px; min-height: 0; overflow: hidden; }
.affiche-accroche { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.12; }
.affiche-argument { margin: 0; font-size: 11px; line-height: 1.35; opacity: .92; }
.affiche-points { display: flex; flex-wrap: wrap; gap: 5px; }
.affiche-points { gap: 4px; }
.affiche-points span { background: rgba(255, 255, 255, .92); color: var(--c); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.affiche-contact { margin: auto 0 0; font-size: 10px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.affiche-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.affiche-carte .formulaire-employe { padding: 0; }
.vedettes { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; flex-basis: 100%; }
.vedettes legend { font-size: 13px; margin-bottom: 6px; }
.vedettes label { position: relative; cursor: pointer; }
.vedettes input { position: absolute; opacity: 0; }
.vedettes img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 3px solid transparent; display: block; }
.vedettes input:checked + img { border-color: var(--or); }
.vedettes input:focus-visible + img { outline: 2px solid var(--principal); outline-offset: 2px; }

.affiche-carte form.options select { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--bord-champ); background: var(--surface); font: inherit; font-size: 15px; color: var(--encre); }

/* Événements (Marketing, étape 6) : liens personnels, contrôle à l'entrée. */
.liens-invites { padding: 16px 18px; display: grid; gap: 8px; }
.liens-invites p { margin: 0; }
.lien-invite { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 10px; align-items: center; }
.lien-invite code { font-size: 12px; overflow-wrap: anywhere; background: var(--surface-2); padding: 6px 8px; border-radius: 8px; }
@media (max-width: 560px) { .lien-invite { grid-template-columns: 1fr auto; } .lien-invite code { grid-column: 1 / -1; grid-row: 2; } }
.scan-entree { padding: 16px 18px; display: grid; gap: 12px; justify-items: center; }
.scan-entree video { width: min(420px, 100%); border-radius: 14px; background: #000; aspect-ratio: 4 / 3; object-fit: cover; }
.scan-entree input { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--bord-champ); background: var(--surface); font: inherit; }
.scan-resultat { width: min(520px, 100%); border-radius: 16px; padding: 18px; display: grid; gap: 4px; text-align: center; font-size: 22px; }
.scan-resultat span { font-size: 15px; }
.scan-resultat.ok { background: var(--vert-fond); color: var(--vert); }
.scan-resultat.ko { background: var(--rouge-fond); color: var(--rouge); }
.titre-evenement { margin: 0 0 4px; font-family: var(--titre); font-size: 26px; font-weight: 500; line-height: 1.15; }
.ligne > .pastille { align-self: flex-start; justify-self: start; flex: none; }

/* Contrats (Juridique) et Sites (Technique) */
.detail-contrat { display: grid; gap: 12px; margin-top: 10px; }
.detail-contrat p { margin: 0; }
.detail-contrat dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.detail-contrat dt { color: var(--discret); }
.detail-contrat dd { margin: 0; }
.clauses, .questions { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.clauses li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.clauses li div { display: grid; gap: 2px; font-size: 14px; }
.clauses li span:not(.pastille) { color: var(--encre-2); }
.questions li { padding-left: 18px; position: relative; font-size: 14px; }
.questions li::before { content: '?'; position: absolute; left: 0; color: var(--or-texte); font-weight: 700; }
.frise { display: flex; gap: 2px; margin-top: 8px; height: 18px; max-width: 520px; }
.frise i { flex: 1; border-radius: 2px; background: var(--vert); opacity: .75; }
.frise i.ko { background: var(--rouge); opacity: 1; }
@media (max-width: 560px) { .detail-contrat dl { grid-template-columns: 1fr; } }
.plafond-form { display: inline-flex; align-items: center; gap: 6px; }
.plafond-form input { width: 80px; min-height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--bord-champ); background: var(--surface); font: inherit; }

/* Le métier et l'équipe d'agents (L'équipe) */
.carte-metier { padding: 18px 20px; display: grid; gap: 12px; margin-bottom: 22px; }
/* L'adresse de courrier du bureau (écran Courrier). */
.carte-adresse { padding: 18px 20px; display: grid; gap: 12px; margin-bottom: 22px; }
.carte-adresse .formulaire-employe { padding: 0; }
.adresse-saisie { display: flex; align-items: center; gap: 4px; color: var(--discret); }
.adresse-saisie input { flex: 1 1 120px; min-width: 0; }
/* Sur téléphone (390 px), le champ prenait la largeur restante à côté du bouton : « courrier. » et « @bureava.com » se coupaient
   lettre par lettre (essai du 08/10/2026). Le champ prend toute la ligne, les deux morceaux ne se coupent jamais. */
.carte-adresse .formulaire-employe .champ { flex-basis: 100%; }
.adresse-saisie span { flex: none; white-space: nowrap; }
.adresse-courrier { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 17px; overflow-wrap: anywhere; }
.confirmation-transfert { padding: 12px 16px; border-radius: 12px; background: var(--vert-fond); color: var(--vert); line-height: 1.6; }
.code-confirmation { font-family: var(--titre); font-size: 22px; letter-spacing: 3px; font-weight: 600; }
.aide-transfert > summary { cursor: pointer; font-weight: 600; color: var(--vert); }
.aide-transfert p { margin: 10px 0 0; line-height: 1.6; color: var(--encre-2); }
.chapeau-petit { margin: 0; color: var(--encre-2); }
.agents-choix { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.agents-choix li { border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.agents-choix li.retenu { border-color: var(--principal); background: var(--vert-fond); }
.agents-choix label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.agents-choix input { margin-top: 4px; accent-color: var(--principal); }
/* Les consignes au bureau (023) : la Direction les répartit. */
.formulaire-consigne { padding: 18px 20px; display: grid; gap: 10px; margin-bottom: 14px; }
.formulaire-consigne textarea { min-height: 72px; }
.formulaire-consigne .signature { margin: 0; }
/* Les publications sur les réseaux (025) : la semaine à venir, une carte par publication (image, texte, état, actions). */
.semaine-publications { display: grid; gap: 18px; margin-top: 12px; }
.jour-publications h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--encre-2); }
.jour-publications h3::first-letter { text-transform: uppercase; }
.pile-publications { display: grid; gap: 10px; }
.publication { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; padding: 14px; align-items: start; }
.publication-visuel { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--encre-3); font-size: 13px; text-align: center; }
.publication-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.publication-corps { display: grid; gap: 10px; min-width: 0; }
.publication .formulaire-employe { padding: 0; }
.publication form.publication-corps { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.publication-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.publication-meta .ligne-sous { margin-top: 0; }
.publication-texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; color: var(--encre); }
.publication .message-accord, .publication .signature { margin: 0; }
.vignette-aucune { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 8px; border: 3px solid transparent; background: var(--surface-2); font-size: 12px; color: var(--encre-3); }
.vedettes input:checked + .vignette-aucune { border-color: var(--or); }
.vedettes input:focus-visible + .vignette-aucune { outline: 2px solid var(--principal); outline-offset: 2px; }
.case-publication { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--encre-2); flex-basis: 100%; }
@media (max-width: 560px) { .publication { grid-template-columns: minmax(0, 1fr); } .publication-visuel { max-width: 180px; } }

/* La salle de réunion (027) : la table vue d'en haut, la place du pôle qui a la parole s'allume. */
.table-carte { padding: 12px 8px; margin-bottom: 18px; }
.table-reunion { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.table-reunion .plateau { fill: #8A5A36; stroke: #6E4527; stroke-width: 2; }
.table-reunion .nom-place { font: 600 11px var(--texte); fill: var(--discret); }
.table-reunion .place.active .nom-place { fill: var(--encre); }
.table-reunion .halo-place { fill: none; stroke: #E3A93B; stroke-width: 3; opacity: .85; transform-box: fill-box; transform-origin: center; animation: halo-place 1.8s ease-in-out infinite; }
.table-reunion .lumiere { transform-box: fill-box; transform-origin: center; animation: souffle-verity 3s ease-in-out infinite; }
.table-reunion .siege-vous { fill: var(--surface); stroke: #E3A93B; stroke-width: 2; }
.table-reunion .nom-vous { font: 700 10.5px var(--texte); fill: var(--encre); }
@keyframes halo-place { 50% { transform: scale(1.12); opacity: .45; } }
@keyframes souffle-verity { 50% { transform: scale(.82); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .table-reunion .halo-place, .table-reunion .lumiere { animation: none; } }
.sous-titre-seance { margin: 18px 0 8px; font: 600 13px var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--discret); }
.point-seance.parle { box-shadow: inset 3px 0 0 #E3A93B; }
.lien-pole { padding: 0; border: none; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
details.seance-passee summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
details.seance-passee summary::-webkit-details-marker { display: none; }
.lecture-seance { margin: 4px 0 6px; align-items: center; }
.en-parole { color: #A86E10; font-weight: 600; }
.bouton-micro { display: inline-flex; align-items: center; gap: 6px; }
.astuce-micro { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #FBF1DD; color: #6B4A0E; font-size: 14px; }
.parole-directeur { margin: 8px 0 2px; padding: 8px 12px; border-left: 3px solid #E3A93B; background: rgba(227, 169, 59, .08); border-radius: 0 10px 10px 0; font: italic 15px/1.5 var(--titre); color: var(--encre); }

/* La séance vivante (029) : la couleur du métier qui parle, la discussion, la synthèse. */
.bandeau-parole { position: sticky; top: 12px; z-index: 15; display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: var(--c); color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
@media (max-width: 899px) { .bandeau-parole { top: calc(64px + env(safe-area-inset-top)); } }
.bandeau-parole .picto-parole { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.bandeau-parole .picto-parole svg, .picto-synthese svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bandeau-parole .qui-parle { font: 600 13px var(--texte); letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.bandeau-parole p { margin: 4px 0 0; font: italic 16px/1.45 var(--titre); }
.table-reunion .rayon-parole { stroke-width: 3; opacity: .55; stroke-dasharray: 2 5; stroke-linecap: round; }
.table-reunion .halo-place { stroke-width: 4; }
.point-seance { border-left: 4px solid var(--c, transparent); }
.point-seance.parle { box-shadow: inset 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 7%, transparent); }
.puce-pole { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; vertical-align: middle; }
.discussion { margin-top: 12px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--c) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.bulle { max-width: 92%; margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; }
.bulle p { margin: 2px 0 0; }
.bulle .bulle-qui { font: 600 12px var(--texte); letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.bulle.vous { margin-left: auto; background: var(--surface); border: 1px solid var(--trait); }
.bulle.pole { background: var(--c); color: #fff; }
.bulle.attente p { animation: attente-reponse 1.2s ease-in-out infinite; }
@keyframes attente-reponse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .bulle.attente p { animation: none; } }
.decision-proposee { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .35); font-size: 14px; }
.decision-proposee .bouton { background: #fff; color: var(--encre); }
form.decider { margin-top: 10px; }
form.decider label { font: 600 13px var(--texte); }
.synthese-seance { margin: 6px 0 14px; padding: 14px 18px; border-left: 4px solid var(--c); }
.synthese-seance h4 { margin: 12px 0 6px; font: 600 13px var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--discret); }
.ligne-synthese { margin: 4px 0; }
.ligne-synthese::before { content: '·'; margin-right: 8px; color: var(--c); font-weight: 700; }
.synthese-passee { padding: 4px 16px 10px; }
details.echanges-passes { margin-top: 8px; font-size: 14px; }
.bandeau-parole p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
@media (max-width: 899px) { .bandeau-parole { padding: 10px 14px; } .bandeau-parole p { -webkit-line-clamp: 3; font-size: 15px; } .bandeau-parole .picto-parole { width: 30px; height: 30px; } }
form.decider textarea { width: 100%; box-sizing: border-box; margin: 6px 0 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--trait); font: inherit; background: var(--surface); color: var(--encre); resize: vertical; }
.tete-synthese { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.picto-synthese { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c); }
.titre-synthese { font: 500 20px/1.25 var(--titre); color: var(--encre); }