/* Système de design de l'ERP (refonte, phase 0b). Les jetons reprennent ceux de la maquette 0a
   validée le 2026-10-29 (Design/maquette-0a), mêmes noms et mêmes valeurs : l'outil
   Design/outils/contrastes.py les contrôle directement dans ce fichier. */

@font-face {
  font-family: 'Manrope';
  src: url('/static/Manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:#f4f2ec;--card:#ffffff;--ink:#0e1626;--ink2:#4b5565;--ink3:#626b78;--line:#e5e1d6;--hover:#f1eee6;--navy:#0b1426;--gold:#b08a3e;--goldInk:#7a5c1c;--goldSoft:#f6eedb;--ok:#1d7a50;--okSoft:#e2f2e9;--warn:#875800;--warnSoft:#fcf0d6;--danger:#a3262a;--dangerSoft:#fbe7e6;--info:#2456a6;--infoSoft:#e6eefb;--btnP:#0f1c38;--btnPInk:#ffffff;--focus:#b08a3e;

  /* Échelle : grille de 4/8, rayons, ombres, durées. */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px;
  --r-s: 10px; --r-m: 12px; --r-l: 16px; --r-xl: 20px; --r-2xl: 26px; --r-rond: 999px;
  --ombre-carte: 0 1px 2px rgba(11,20,38,.04), 0 14px 34px -22px rgba(11,20,38,.22);
  --ombre-bouton: 0 10px 22px -12px rgba(15,28,56,.7);
  --ombre-flottante: 0 18px 40px -18px rgba(0,0,0,.6);
  --d-court: .15s; --d-moyen: .25s; --d-long: .45s;
  --courbe: cubic-bezier(.2,.8,.2,1);
  --t-xs: 12px; --t-s: 13px; --t-m: 15px; --t-l: 17px; --t-xl: 20px; --t-2xl: 26px; --t-3xl: 32px;

  /* Anciens noms, gardés pour les pages pas encore refaites. */
  --surface: var(--card);
  --text: var(--ink);
  --text-soft: var(--ink2);
  --brand: var(--btnP);
  --brand-ink: var(--btnPInk);
  --accent: var(--gold);
  --ok-fond: var(--okSoft);
  --attente: var(--warn);
  --attente-fond: var(--warnSoft);
  --danger-fond: var(--dangerSoft);
  --radius: var(--r-l);
  --gutter: 16px;
  --max: 1100px;
}
@media screen and (prefers-color-scheme: dark) {
  :root {
    --bg:#070b14;--card:#0e1525;--ink:#eef1f6;--ink2:#aab3c2;--ink3:#8f99aa;--line:#1d2840;--hover:#141d31;--navy:#04070e;--gold:#d4b06a;--goldInk:#e3c88d;--goldSoft:#2a2311;--ok:#5cc39a;--okSoft:#0f2a1f;--warn:#e9c275;--warnSoft:#2e240c;--danger:#f19a9c;--dangerSoft:#371517;--info:#93b6f0;--infoSoft:#122341;--btnP:#d4b06a;--btnPInk:#140f04;--focus:#d4b06a;
    --ombre-carte: 0 0 0 1px rgba(255,255,255,.01);
    --ombre-bouton: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--t-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Remise à zéro SANS poids (:where) : toute classe de bouton (.bouton, .pastille…) l'emporte toujours. */
:where(button) { font: inherit; color: inherit; }
a { color: var(--goldInk); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.num { font-variant-numeric: tabular-nums; }
.sauter { position: absolute; left: -999px; }
.sauter:focus { left: var(--gutter); top: 8px; background: var(--card); padding: 8px 12px; z-index: 10; }
.conteneur { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ------------------------------------------------------------------ icônes */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }
.ic.s { width: 16px; height: 16px; }
.ic.l { width: 24px; height: 24px; }

/* ------------------------------------------------- bandeau de démonstration */
.banniere { background: var(--warnSoft); color: var(--warn); font-size: var(--t-s); font-weight: 700; }
.banniere .conteneur { display: flex; align-items: center; gap: var(--e2); min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.banniere strong { font-weight: 800; }
.banniere-plus { font-weight: 600; }
@media (max-width: 640px) { .banniere-plus { display: none; } }

/* ------------------------------------------------------------------ en-tête */
.entete { background: var(--card); border-bottom: 1px solid var(--line); }
.entete .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 10px; padding-bottom: 10px; }
.marque { display: flex; align-items: center; gap: var(--e3); text-decoration: none; color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
.marque:hover { color: var(--ink); }
/* Le symbole doré se perdait sur le fond crème : il est posé sur sa tuile noire, dans les deux modes. */
.marque-tuile { width: 44px; height: 44px; border-radius: 13px; background: #000; display: grid; place-items: center; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(212,176,106,.4), 0 8px 22px -8px rgba(212,176,106,.45); }
.marque-tuile img { width: 38px; height: auto; display: block; }
/* Texte sombre sur or dans les deux modes (blanc sur or ne passait pas l'AA). */
.compteur { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: #d4b06a; color: #1a1305; font-size: var(--t-xs); font-weight: 800; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ coquille */
/* Ordinateur : barre latérale marine (la même dans les deux modes), contenu à droite.
   Téléphone : en-tête compact, barre du bas à quatre rubriques et « Plus ». */
.coquille { display: flex; min-height: 100vh; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.principal main { flex: 1; }
.cote { flex: 0 0 264px; background: var(--navy); color: #c3cbd8; padding: 20px 14px 16px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.cote .marque { color: #fff; padding: 4px 8px 12px; }
.cote .marque:hover { color: #fff; }
.cote a:focus-visible, .cote button:focus-visible { outline-color: #d4b06a; }
.groupe-titre { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #8490a6; padding: 16px 10px 6px; margin: 0; }
.rubriques { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rubrique { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border-radius: 11px; font-size: 14px; font-weight: 700; color: #c3cbd8; text-decoration: none; transition: background .18s, color .18s; }
.rubrique:hover { background: rgba(255,255,255,.06); color: #fff; }
.rubrique[aria-current="page"] { background: rgba(212,176,106,.15); color: #f2dcab; }
.rubrique[aria-current="page"] .ic { color: #e1bf73; }
.rubrique .compteur, .onglet-bas .compteur { margin-left: auto; }
.cote-pied { margin-top: auto; padding-top: 16px; }
.moi { display: flex; gap: 10px; align-items: center; padding: 12px 10px; border-radius: 14px; background: rgba(255,255,255,.05); }
.moi-texte { flex: 1; min-width: 0; }
.moi-texte strong { display: block; color: #fff; font-size: 13.5px; line-height: 1.3; }
.moi-texte span { display: block; font-size: 12px; color: #a3adbf; line-height: 1.35; overflow-wrap: anywhere; }
.moi form { margin: 0; }
.moi-sortir { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: #c3cbd8; background: none; border: 0; cursor: pointer; }
.moi-sortir:hover { background: rgba(255,255,255,.08); color: #fff; }
.appareil { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #a3adbf; padding: 10px 10px 0; margin: 0; }
.appareil-point { width: 8px; height: 8px; border-radius: 50%; background: #5cc39a; box-shadow: 0 0 0 3px rgba(92,195,154,.18); flex: none; }
.appareil-point.personnel { background: #e9c275; box-shadow: 0 0 0 3px rgba(233,194,117,.18); }

.haut { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 36px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 3; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); }
.fil-ariane { margin: 0; font-size: var(--t-s); color: var(--ink3); font-weight: 700; }
.fil-ariane strong { color: var(--ink); font-weight: 800; }
.bouton-icone { margin-left: auto; width: 44px; height: 44px; border-radius: var(--r-m); display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--ink2); position: relative; flex: none; }
.bouton-icone:hover { color: var(--ink); }
.pip { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: #d0453f; box-shadow: 0 0 0 2px var(--card); }
.haut-mobile { display: none; }
.principal main .conteneur { max-width: 1180px; margin: 0; padding: 0 36px; }

.barre-bas { display: none; }

@media (max-width: 899px) {
  .cote, .haut { display: none; }
  .haut-mobile { display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter); background: var(--card); border-bottom: 1px solid var(--line); }
  .haut-mobile .marque { min-height: 44px; }
  .haut-mobile .marque-tuile { width: 38px; height: 38px; border-radius: 11px; }
  .haut-mobile .marque-tuile img { width: 32px; }
  .principal main .conteneur { padding: 0 var(--gutter); }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .barre-bas { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; background: var(--card); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .barre-bas > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
  .onglet-bas { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: 14px; font-size: 11px; font-weight: 800; color: var(--ink3); text-decoration: none; cursor: pointer; list-style: none; }
  .onglet-bas::-webkit-details-marker { display: none; }
  .onglet-bas[aria-current="page"], .onglet-bas.actif, .plus[open] > .onglet-bas { color: var(--ink); }
  .onglet-bas[aria-current="page"] .ic, .onglet-bas.actif .ic, .plus[open] > .onglet-bas .ic { color: var(--goldInk); }
  .onglet-bas[aria-current="page"]::before, .onglet-bas.actif::before { content: ''; position: absolute; top: -6px; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
  .onglet-bas .compteur { position: absolute; top: 2px; left: calc(50% + 4px); margin: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; }
  /* Le voile appartient au résumé : le toucher referme la feuille. */
  .plus[open] > .onglet-bas::after { content: ''; position: fixed; inset: 0; background: rgba(4,8,16,.45); z-index: -1; }
  .feuille { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); max-height: 72vh; overflow-y: auto; background: var(--navy); color: #c3cbd8; border-radius: 24px 24px 0 0; padding: 8px 14px 16px; box-shadow: var(--ombre-flottante); }
  .feuille .rubrique { min-height: 48px; }
}

/* -------------------------------------------------------------- typographie */
main { padding: var(--e6) 0 var(--e12); }
h1 { font-size: var(--t-2xl); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 0 0 var(--e1); }
h2 { font-size: var(--t-l); font-weight: 800; letter-spacing: -.01em; margin: var(--e8) 0 var(--e3); }
h3 { font-weight: 800; }
.sous-titre { color: var(--ink2); margin: 0 0 var(--e5); max-width: 680px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e4) 0; }
.meta { color: var(--ink2); font-size: var(--t-s); margin: 0; }
.discret { color: var(--ink3); }
.extrait { margin: var(--e2) 0 0; color: var(--ink); overflow-wrap: anywhere; }
.texte-long { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--e4) 0; }
@media (min-width: 900px) { h1 { font-size: var(--t-3xl); } }

/* ------------------------------------------------------------------- cartes */
.carte { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--ombre-carte); padding: var(--e4) var(--e5); margin: 0 0 var(--e3); }
.carte h3 { margin: 0 0 var(--e1); font-size: var(--t-l); line-height: 1.3; }
.carte h3 a { text-decoration: none; color: var(--ink); }
.carte h3 a:hover { text-decoration: underline; }

/* Ligne avec tuile d'icône : la brique des listes (accueil, validations, tâches…). */
.ligne { display: flex; align-items: center; gap: 14px; padding: var(--e3); margin: 0 calc(-1 * var(--e2)); border-radius: 14px; color: inherit; text-decoration: none; transition: background var(--d-court); }
a.ligne:hover, button.ligne:hover { background: var(--hover); color: inherit; }
.ligne-texte { flex: 1; min-width: 0; }
.ligne-titre { display: block; font-weight: 800; font-size: 14.5px; line-height: 1.35; }
.ligne-sous { display: block; font-size: var(--t-s); color: var(--ink2); line-height: 1.45; }
.tuile { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--hover); color: var(--ink2); }
.tuile.or { background: var(--goldSoft); color: var(--goldInk); }
.tuile.ok { background: var(--okSoft); color: var(--ok); }
.tuile.attente { background: var(--warnSoft); color: var(--warn); }
.tuile.danger { background: var(--dangerSoft); color: var(--danger); }
.tuile.info { background: var(--infoSoft); color: var(--info); }
.tuile.petite { width: 32px; height: 32px; border-radius: 10px; }
.ligne-meta { display: block; font-size: 12.5px; color: var(--ink3); line-height: 1.45; }
.lignes { list-style: none; margin: 0; padding: 0; }
.ligne-actions { display: flex; gap: var(--e2); flex: none; margin: 0; }

/* ------------------------------------------------------------ aujourd'hui */
/* Le bandeau d'accueil reste bleu nuit dans les deux modes : ses couleurs sont fixes. */
.heros { position: relative; overflow: hidden; border-radius: var(--r-2xl); background: radial-gradient(110% 150% at 88% -10%, #2c3d63 0%, #13213f 42%, #0b1426 100%); color: #fff; padding: 30px 32px 26px; }
.heros-marque { position: absolute; right: -24px; top: -58px; width: 360px; height: auto; opacity: .2; mix-blend-mode: screen; pointer-events: none; }
.heros h1 { position: relative; color: #fff; font-size: 30px; margin: 0; }
.heros-quand { position: relative; color: #b9c3d4; font-size: var(--t-s); margin: 6px 0 0; }
.chiffres { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.chiffre { display: flex; flex-direction: column; gap: 8px; min-height: 44px; padding: 16px 16px 14px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); color: #fff; text-decoration: none; transition: background var(--d-court), transform var(--d-moyen) var(--courbe); }
.chiffre:hover { background: rgba(255,255,255,.11); color: #fff; transform: translateY(-2px); }
.chiffre-n { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.chiffre.chaud .chiffre-n { color: #f2d89c; }
.chiffre-l { display: flex; align-items: center; gap: 6px; font-size: var(--t-s); font-weight: 700; color: #c3cbd8; }
.colonnes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
/* Deux colonnes et une rangée de chiffres seulement quand la place le permet, à côté de la barre latérale. */
@media (min-width: 1180px) {
  .chiffres { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .colonnes { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
.pile { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pile:empty { display: none; }
.carte.bloc { margin: 0; }
.bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--e2); }
.bloc-tete h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--t-l); }
.suite { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: var(--t-s); font-weight: 800; color: var(--goldInk); text-decoration: none; }
.suite:hover { color: var(--ink); }
@media (max-width: 899px) {
  .heros { padding: 22px 20px 20px; border-radius: var(--r-xl); }
  .heros-marque { width: 240px; top: -40px; right: -40px; }
  .heros h1 { font-size: 26px; }
  .chiffres { gap: 10px; margin-top: 18px; }
  .chiffre { padding: 13px 13px 12px; }
  .chiffre-n { font-size: 30px; }
  .colonnes { gap: 16px; margin-top: 16px; }
  .pile { gap: 16px; }
}
@media (max-width: 560px) {
  .ligne:has(.ligne-actions) { flex-wrap: wrap; }
  .ligne-actions { width: 100%; justify-content: flex-end; }
}

/* ------------------------------------------------------------------- badges */
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border-radius: var(--r-rond); font-size: var(--t-xs); font-weight: 800; line-height: 1.3; background: var(--hover); color: var(--ink2); vertical-align: middle; }
.badge.nouveau, .badge.attente { background: var(--warnSoft); color: var(--warn); }
.badge.ok { background: var(--okSoft); color: var(--ok); }
.badge.danger { background: var(--dangerSoft); color: var(--danger); }
.badge.info { background: var(--infoSoft); color: var(--info); }
.badge.or { background: var(--goldSoft); color: var(--goldInk); }
.point { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ------------------------------------------------------------------ avatars */
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; letter-spacing: .01em; background: #efe2c2; color: #5b4310; }
.avatar.petit { width: 30px; height: 30px; font-size: 11.5px; }
.avatar.grand { width: 84px; height: 84px; font-size: 28px; box-shadow: 0 0 0 4px var(--card), 0 0 0 6px var(--gold); }
.avatar.a2 { background: #dbe6f7; color: #1d3d73; }
.avatar.a3 { background: #d9efe2; color: #1c5a3c; }
.avatar.a4 { background: #f5dfdc; color: #7a2226; }
.avatar.a5 { background: #e8e2f6; color: #45307a; }
@media screen and (prefers-color-scheme: dark) {
  .avatar { background: #3b2f16; color: #efd59c; }
  .avatar.a2 { background: #16294a; color: #a9c4f2; }
  .avatar.a3 { background: #123326; color: #8fdcb6; }
  .avatar.a4 { background: #3a1819; color: #f2aaa9; }
  .avatar.a5 { background: #2a2145; color: #c8b8f2; }
}

/* ------------------------------------------------------------------ boutons */
/* Hiérarchie des actions : principal (une par écran), secondaire (contour), discret (fond doux), danger. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 44px; padding: 0 18px; border-radius: var(--r-m); border: 1px solid transparent;
  background: var(--btnP); color: var(--btnPInk); box-shadow: var(--ombre-bouton);
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--d-court) var(--courbe), box-shadow .2s, background .2s;
}
.bouton:hover { color: var(--btnPInk); }
.bouton:active { transform: scale(.97); }
.bouton.secondaire { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: none; }
.bouton.secondaire:hover { background: var(--hover); color: var(--ink); }
.bouton.discret { background: var(--hover); color: var(--ink); box-shadow: none; }
.bouton.discret:hover { color: var(--ink); }
.bouton.danger { background: var(--dangerSoft); color: var(--danger); box-shadow: none; }
.bouton.danger:hover { color: var(--danger); }
.bouton.petit { min-height: 36px; padding: 0 13px; font-size: var(--t-s); border-radius: var(--r-s); }
.bouton[disabled] { opacity: .45; cursor: not-allowed; }
.bouton.lien { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--goldInk); text-decoration: underline; font-weight: 700; }
.bouton.lien:hover { color: var(--ink); }

/* -------------------------------------------- barre de recherche, pastilles */
.recherche { display: flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e2) 0 14px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--line); color: var(--ink3); transition: border-color .2s, box-shadow .2s; }
.recherche:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px var(--goldSoft); }
.recherche input[type=search], .recherche input[type=text] { border: 0; background: none; min-height: 40px; padding: 0; flex: 1; min-width: 0; width: auto; }
.recherche input:focus-visible { outline: none; }
/* Le champ n'a pas son propre anneau : c'est la barre entière qui le porte, comme partout ailleurs. */
.recherche:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.pastilles { display: flex; gap: var(--e2); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.pastille { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--r-rond); border: 1px solid var(--line); background: var(--card); font-weight: 700; font-size: var(--t-s); color: var(--ink2); text-decoration: none; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.pastille:hover { color: var(--ink); }
.pastille[aria-current="page"], .pastille[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ------------------------------------------------------------------- onglets */
.onglets { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; margin: var(--e5) 0 var(--e4); padding: 0; list-style: none; }
.onglet { position: relative; display: inline-flex; align-items: center; gap: var(--e2); min-height: 46px; padding: 0 14px; font-weight: 800; font-size: 14px; color: var(--ink3); white-space: nowrap; text-decoration: none; }
.onglet:hover { color: var(--ink); }
.onglet[aria-current="page"], .onglet[aria-selected="true"] { color: var(--ink); }
.onglet[aria-current="page"]::after, .onglet[aria-selected="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); }

/* --------------------------------------------------------------- états vides */
.vide { color: var(--ink2); padding: var(--e4) var(--e5); border: 1px dashed var(--line); border-radius: var(--r-l); background: color-mix(in srgb, var(--card) 60%, transparent); }
.etat-vide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: var(--e6) var(--e3) var(--e4); }
.etat-vide-titre { font-weight: 800; font-size: var(--t-l); margin: 0; }
.etat-vide p { color: var(--ink2); margin: 0; max-width: 420px; }
.halo { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--okSoft); color: var(--ok); margin-bottom: 6px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--okSoft) 45%, transparent); }
.halo.neutre { background: var(--hover); color: var(--ink2); box-shadow: 0 0 0 8px color-mix(in srgb, var(--hover) 45%, transparent); }

/* ------------------------------------------------- bandeaux d'information */
.bandeau { display: flex; align-items: flex-start; gap: var(--e3); padding: 14px var(--e4); border-radius: 14px; margin: 0 0 var(--e4); font-weight: 700; background: var(--infoSoft); color: var(--info); }
.bandeau.ok, .info { background: var(--okSoft); color: var(--ok); }
.bandeau.attente { background: var(--warnSoft); color: var(--warn); }
.bandeau.danger, .erreur { background: var(--dangerSoft); color: var(--danger); }
.erreur, .info { border-radius: 14px; padding: var(--e3) var(--e4); margin: 0 0 var(--e4); font-weight: 700; }

/* ---------------------------------------------------------------- chronologie */
.chronologie { position: relative; list-style: none; margin: 0; padding: 0 0 0 28px; }
.chronologie::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.chronologie > li { position: relative; padding: 4px 0 18px; }
.chronologie > li::before { content: ''; position: absolute; left: -28px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); box-sizing: border-box; }
.chronologie > li.en-cours::before { border-color: var(--gold); box-shadow: 0 0 0 4px var(--goldSoft); background: radial-gradient(circle, var(--gold) 0 4px, var(--card) 5px); }

/* ------------------------------------------------------------------ squelette */
.squelette { display: block; border-radius: var(--r-s); background: linear-gradient(90deg, var(--hover) 0%, var(--line) 50%, var(--hover) 100%); background-size: 200% 100%; animation: squelette 1.4s ease-in-out infinite; min-height: 14px; }
@keyframes squelette { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ------------------------------------------------------------------ formulaires */
label { display: block; font-weight: 700; margin: var(--e4) 0 6px; }
.aide { color: var(--ink2); font-size: var(--t-s); font-weight: 500; }
input[type=text], input[type=search], input[type=datetime-local], input[type=date], input[type=password], input:not([type]), select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: border-color .2s, box-shadow .2s;
}
input[type=text]:focus, input[type=search]:focus, input[type=datetime-local]:focus, input[type=date]:focus, input[type=password]:focus, input:not([type]):focus, select:focus, textarea:focus { border-color: var(--gold); }
textarea { min-height: 120px; resize: vertical; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--e2) var(--e4) var(--e4); margin: var(--e4) 0; background: var(--card); }
legend { font-weight: 800; padding: 0 6px; }
.case { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; margin: var(--e2) 0; }
.case input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--btnP); }
input[type=file] { display: block; width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--card); border: 1px dashed var(--line); border-radius: var(--r-m); }

/* ------------------------------------------------------------------ tableaux */
.tableau-conteneur { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--ombre-carte); }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); font-weight: 800; }
tbody tr { transition: background var(--d-court); }
tbody tr:hover { background: var(--hover); }
tr:last-child td { border-bottom: 0; }

.grille { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.personne-carte { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.personne-carte .bouton { margin-top: auto; }
.choix-appareil { display: flex; flex-wrap: wrap; gap: 8px 24px; }

dl.fiche { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: var(--e4) 0; }
dl.fiche dt { color: var(--ink3); font-size: var(--t-s); font-weight: 700; }
dl.fiche dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
@media (max-width: 560px) {
  dl.fiche { grid-template-columns: 1fr; gap: 0; }
  dl.fiche dd { margin-bottom: 10px; }
}
.pied { color: var(--ink3); font-size: var(--t-s); padding: var(--e4) 0 var(--e8); }

ul.liste-sans-puce { list-style: none; margin: 0; padding: 0; }
.notification form { margin: 0; }
.notification-bouton { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; overflow-wrap: anywhere; }
.notification-bouton > .ic { flex: none; color: var(--ink3); }
.notification.non-lue .ligne-titre { color: var(--ink); }
.notification:not(.non-lue) .ligne-titre { font-weight: 600; color: var(--ink2); }
.notifications-compte { margin: var(--e1) 0 var(--e2); padding: 0 var(--e2); }

/* Petits écrans : chaque ligne d'un tableau devient une carte, sans défilement horizontal. */
@media (max-width: 640px) {
  table.empile { min-width: 0; }
  table.empile thead { position: absolute; left: -9999px; }
  table.empile tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.empile tr:last-child { border-bottom: 0; }
  table.empile td { display: block; border: 0; padding: 2px 16px; }
  table.empile td[data-l]::before { content: attr(data-l) " : "; color: var(--ink3); font-size: var(--t-s); }
}

/* Messagerie */
.carte.non-lue { border-left: 4px solid var(--gold); }
.conversation.non-lue .ligne-titre { color: var(--ink); }
.conversation:not(.non-lue) .ligne-titre { font-weight: 700; }
.conversation .ligne-sous { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-fin { flex-direction: column; align-items: flex-end; }
.conversation-quand { font-size: var(--t-xs); color: var(--ink2); white-space: nowrap; }
.conversation-tete { display: flex; align-items: center; gap: var(--e3); margin: 0 0 var(--e4); }
.conversation-tete h1 { margin: 0; }
.conversation-tete .avatar, .conversation-tete .tuile { width: 52px; height: 52px; font-size: 17px; }
.fil-carte { padding: var(--e4) var(--e5); }
.fil { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--e4); }
.fil-jour, .fil-nouveaux, .fil-masques { display: flex; align-items: center; gap: var(--e3); margin: var(--e4) 0 var(--e2); font-size: var(--t-xs); font-weight: 800; color: var(--ink2); text-align: center; }
.fil-jour::before, .fil-jour::after, .fil-nouveaux::before, .fil-nouveaux::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.fil-nouveaux { color: var(--goldInk); }
.fil-nouveaux::before, .fil-nouveaux::after { background: var(--gold); }
/* Une personne entre dans la conversation : une pastille centrée, sans bulle (ce n'est pas un message). */
.fil-arrivee { display: flex; justify-content: center; margin: var(--e3) 0; font-size: var(--t-xs); color: var(--ink2); text-align: center; }
.fil-arrivee span { display: inline-flex; align-items: center; gap: var(--e2); padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--r-rond); background: var(--bg); }
.ajout-participants > summary { display: flex; align-items: center; gap: var(--e2); min-height: 44px; cursor: pointer; color: var(--goldInk); font-weight: 800; }
.ajout-participants[open] > summary { margin-bottom: var(--e3); }
.dates-role { margin-top: var(--e2); min-width: 220px; }
.dates-role > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--goldInk); font-weight: 800; }
.dates-role[open] > summary { margin-bottom: var(--e2); }
.fil-masques { justify-content: center; margin-top: 0; }
.message { display: flex; flex-direction: column; align-items: flex-start; max-width: min(78%, 640px); margin-right: auto; }
.message.mien { align-items: flex-end; margin-left: auto; margin-right: 0; }
.message-auteur { margin: var(--e2) 0 4px 14px; font-size: var(--t-xs); color: var(--ink2); }
.message.mien .message-auteur { margin: 0; }
.bulle { background: var(--hover); color: var(--ink); border-radius: 18px 18px 18px 6px; padding: 10px 14px; max-width: 100%; overflow-wrap: anywhere; }
.message.mien .bulle { background: var(--btnP); color: var(--btnPInk); border-radius: 18px 18px 6px 18px; }
.bulle .texte-long { margin: 0; }
.message-quand { margin: 4px 6px 0; font-size: var(--t-xs); color: var(--ink2); }
.fil-ferme { display: flex; align-items: center; gap: var(--e2); margin: var(--e4) 0 0; padding-top: var(--e4); border-top: 1px solid var(--line); color: var(--ink2); }
form.repondre { border-top: 1px solid var(--line); padding-top: var(--e2); }
form.repondre label[for="texte"] { margin-top: var(--e3); }
@media (max-width: 560px) {
  .message { max-width: 90%; }
  .fil-carte { padding: var(--e3); }
  .conversation-fin { flex-direction: row; }
}

/* Pièces jointes : vignettes, jamais d'aperçu (on ne les ouvre pas dans le navigateur). */
ul.pieces { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e2); }
ul.pieces li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.piece { display: flex; align-items: center; gap: var(--e3); min-height: 64px; padding: var(--e2) var(--e3); border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; }
a.piece:hover { border-color: var(--gold); color: var(--ink); }
a.piece > .ic { flex: none; color: var(--goldInk); }
.piece-type { width: 40px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 8px 14px 8px 8px; background: var(--dangerSoft); color: var(--danger); }
.piece-type.image { background: var(--infoSoft); color: var(--info); }
.piece-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.piece-nom { font-weight: 800; font-size: var(--t-s); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piece-meta { font-size: var(--t-xs); color: var(--ink2); }
.bulle ul.pieces { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); min-width: min(220px, 100%); }
.bulle .aide { color: inherit; opacity: .9; }
.carte details { margin-top: 10px; border-top: 1px solid var(--line); padding-top: var(--e2); }
.carte summary { cursor: pointer; color: var(--goldInk); font-weight: 800; min-height: 32px; }

/* Hiérarchie : un arbre replié par <details>, sans script. Chaque niveau rentre d'un cran, avec un filet. */
.compteurs-niveaux { list-style: none; margin: 0 0 var(--e4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.compteurs-niveaux li { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: var(--r-rond); background: var(--card); font-size: var(--t-s); color: var(--ink2); }
.compteurs-niveaux strong { color: var(--ink); font-size: var(--t-m); }
.arbre-carte { padding: var(--e3); }
ul.arbre { list-style: none; margin: 0; padding: 0; }
ul.arbre ul.arbre { margin-left: 21px; padding-left: var(--e3); border-left: 1px solid var(--line); }
.noeud { margin: 2px 0; }
.arbre details.pli { margin: 0; padding: 0; border: 0; }
.noeud-tete { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px var(--e2); border-radius: 14px; color: var(--ink); }
.arbre summary.noeud-tete { cursor: pointer; list-style: none; color: var(--ink); font-weight: inherit; }
.arbre summary.noeud-tete::-webkit-details-marker { display: none; }
.arbre summary.noeud-tete:hover { background: var(--hover); }
.pli-chevron, .pli-vide { width: 20px; flex: none; display: grid; place-items: center; color: var(--ink2); transition: transform var(--d-court); transform: rotate(-90deg); }
details[open] > summary .pli-chevron { transform: none; }
.noeud-tete .ligne-titre .badge { margin-left: 4px; }
.compte-personnes { font-variant-numeric: tabular-nums; }
.noeud-corps { margin: 0 0 var(--e2) calc(20px + 42px + 24px + var(--e2)); }
.noeud-corps > .meta { margin: 0 0 var(--e2); }
.noeud-outils { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: flex-start; }
.arbre .noeud-outils > details { margin: 0; padding: 0; border: 0; }
.arbre .noeud-outils > details > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-rond); background: var(--card); color: var(--ink); font-weight: 700; font-size: var(--t-s); cursor: pointer; list-style: none; }
.arbre .noeud-outils > details > summary::-webkit-details-marker { display: none; }
.arbre .noeud-outils > details > summary:hover { border-color: var(--gold); }
.arbre .noeud-outils > details[open] { flex-basis: 100%; order: 1; padding: var(--e3); border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.arbre .noeud-outils > details[open] > summary { background: var(--btnP); color: var(--btnPInk); border-color: var(--btnP); }
@media (max-width: 560px) {
  .arbre-carte { padding: var(--e2); }
  ul.arbre ul.arbre { margin-left: 9px; padding-left: var(--e2); }
  .noeud-tete { gap: 8px; padding: 8px 4px; align-items: flex-start; }
  .noeud-tete .ligne-fin { width: auto; max-width: none; padding-left: 0; }
  .noeud-corps { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pli-chevron { transition: none; } }

/* Journal d'audit : le sceau de la chaîne, puis un bloc par jour, une ligne repliée par geste. */
.sceau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e4); margin: 0 0 var(--e4); padding: var(--e4); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); }
.sceau-anneau { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--goldSoft); color: var(--goldInk); box-shadow: 0 0 0 6px var(--hover); }
.sceau.ok { border-color: var(--ok); background: var(--okSoft); }
.sceau.ok .sceau-anneau { background: var(--card); color: var(--ok); box-shadow: 0 0 0 6px var(--card); }
.sceau.danger { border-color: var(--danger); background: var(--dangerSoft); }
.sceau.danger .sceau-anneau { background: var(--card); color: var(--danger); box-shadow: 0 0 0 6px var(--card); }
.sceau-texte { flex: 1 1 200px; min-width: 0; }
.sceau-titre { margin: 0; font-weight: 800; font-size: var(--t-m); color: var(--ink); }
.sceau-sous { margin: 4px 0 0; color: var(--ink2); font-size: var(--t-s); overflow-wrap: anywhere; }
.sceau.ok .sceau-titre { color: var(--ok); }
.sceau.danger .sceau-titre { color: var(--danger); }
.sceau-geste { margin: 0; flex: none; }
.sceau-gestes { display: flex; flex-wrap: wrap; gap: var(--e2); flex: none; }
.filtres-journal { margin-bottom: var(--e4); }
.filtres-journal .grille { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.filtres-journal .recherche-journal { grid-column: 1 / -1; }
.journal-jour { margin: var(--e5) 0 var(--e2); font-size: var(--t-s); font-weight: 800; color: var(--ink2); }
.journal-liste { list-style: none; margin: 0; padding: var(--e1) 0; }
.entree-journal + .entree-journal { border-top: 1px solid var(--line); }
.journal-liste details { margin: 0; padding: 0; border: 0; }
.journal-liste summary.journal-ligne { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px var(--e4); cursor: pointer; list-style: none; color: var(--ink); font-weight: inherit; }
.journal-liste summary.journal-ligne::-webkit-details-marker { display: none; }
.journal-liste summary.journal-ligne:hover { background: var(--hover); }
.journal-heure { flex: none; width: 46px; font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--t-s); color: var(--ink2); }
.journal-point { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ink3); }
.journal-point.ok { background: var(--ok); }
.journal-point.attente { background: var(--warn); }
.journal-point.danger { background: var(--danger); }
.journal-ligne .ligne-titre strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; overflow-wrap: anywhere; }
.journal-details { padding: 0 var(--e4) var(--e3) calc(var(--e4) + 46px + 10px + 24px); }
.journal-details > .meta { margin: 0; }
.details-journal { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: var(--e2) 0 0; font-size: 14px; }
.details-journal dt { color: var(--ink3); }
.details-journal dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.details-journal pre { margin: 0; padding: 10px 12px; border-radius: var(--r-m); background: var(--hover); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; }
@media (max-width: 560px) {
  .details-journal { grid-template-columns: 1fr; }
  .details-journal dd { margin-bottom: 6px; }
  .journal-liste summary.journal-ligne { flex-wrap: wrap; padding: 8px var(--e3); gap: 8px 10px; }
  .journal-liste summary.journal-ligne .ligne-texte { flex-basis: calc(100% - 46px - 10px - 20px); order: 1; }
  .journal-details { padding: 0 var(--e3) var(--e3); }
  .sceau { padding: var(--e3); }
}

/* ------------------------------------------------------------------ personnes */
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.centre { text-align: center; margin: 0 0 var(--e4); }
.tete-page { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e2) var(--e5); }
.tete-page .actions { margin: 0 0 var(--e5); }
.filtres { display: flex; flex-direction: column; gap: var(--e3); margin: 0 0 var(--e4); }
.filtres-recherche { display: flex; gap: var(--e2); margin: 0; }
.filtres-recherche .recherche { flex: 1; margin: 0; font-weight: 500; }
.pastille-n { font-size: var(--t-xs); font-weight: 800; color: var(--ink3); }
.pastille[aria-current="page"] .pastille-n { color: inherit; opacity: .8; }
@media (min-width: 1180px) {
  .filtres { flex-direction: row; align-items: center; }
  .filtres-recherche { flex: 0 1 460px; }
}
.p-liste { padding: var(--e2) var(--e3); }
.p-lignes { list-style: none; margin: 0; padding: 0; }
.p-lignes > li + li { border-top: 1px solid var(--line); }
.p-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "qui statut ch" "chemin chemin ch" "ms ms ch"; align-items: center; gap: 6px var(--e3); padding: var(--e3) var(--e2); border-radius: 14px; color: inherit; text-decoration: none; transition: background var(--d-court); }
.p-ligne:hover { background: var(--hover); color: inherit; }
.p-ligne > .ic { grid-area: ch; color: var(--ink3); }
.p-qui { grid-area: qui; display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.p-qui .ligne-sous { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-chemin { grid-area: chemin; font-size: var(--t-s); color: var(--ink2); padding-left: 52px; overflow-wrap: anywhere; }
.p-statut { grid-area: statut; justify-self: end; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.p-ms { grid-area: ms; padding-left: 52px; }
.p-cle { display: none; }
.p-lien { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); color: var(--ink3); font-weight: 600; }
.p-lien.lie { color: var(--ok); }
.p-entete { display: none; }
@media (min-width: 1180px) {
  .p-entete, .p-ligne { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.6fr) 150px 150px 20px; grid-template-areas: "qui chemin statut ms ch"; }
  .p-entete { display: grid; gap: var(--e3); padding: var(--e2) var(--e2) var(--e3); border-bottom: 1px solid var(--line); font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
  .p-chemin, .p-ms { padding-left: 0; }
  .p-statut { justify-self: start; justify-content: flex-start; }
}

/* ----------------------------------------------------------------------- fiche */
.page-onglets { position: relative; }
.retour { margin: 0 0 var(--e3); }
.retour a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; color: var(--ink2); text-decoration: none; }
.retour a:hover { color: var(--ink); }
.fiche-tete { position: relative; overflow: hidden; padding: 0; }
.fiche-haut { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4) var(--e5); padding: var(--e6) var(--e5) var(--e5); background: radial-gradient(120% 140% at 0% 0%, var(--goldSoft) 0%, transparent 55%); }
.fiche-ident { flex: 1; min-width: 220px; }
.fiche-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--e2); }
.fiche-ident h1 { margin: 0; }
.fiche-ident .sous-titre { margin: 6px 0 0; }
.fiche-gestes { display: flex; gap: var(--e2); }
.faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border-top: 1px solid var(--line); }
.fait { background: var(--card); padding: var(--e3) var(--e5); min-width: 0; }
.fait.large { grid-column: 1 / -1; }
@media (min-width: 1180px) { .faits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fait dt { font-size: var(--t-xs); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); margin: 0 0 4px; }
.fait dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.fait dd .meta { font-weight: 500; }
.ancre { position: absolute; top: 0; }
.onglet-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-rond); background: var(--goldSoft); color: var(--goldInk); font-size: var(--t-xs); font-weight: 800; }
/* Onglets sans script : le panneau visé par l'ancre, sinon celui ouvert d'office (.defaut). */
.panneau > h2:first-child, .panneau > .bloc-tete:first-child { margin-top: 0; }
.panneau > .bloc-tete h2 { margin: 0; }
.panneau h2 { margin-top: var(--e6); }
.panneau:not(.defaut) { display: none; }
.ancre:target ~ .panneau { display: none; }
#o-parcours:target ~ .p-parcours, #o-modifier:target ~ .p-modifier, #o-gestes:target ~ .p-gestes, #o-depart:target ~ .p-depart, #o-approuver:target ~ .p-approuver, #o-miennes:target ~ .p-miennes, #o-expirees:target ~ .p-expirees { display: block; }
.onglet.defaut, #o-parcours:target ~ .onglets .o-parcours, #o-modifier:target ~ .onglets .o-modifier, #o-gestes:target ~ .onglets .o-gestes, #o-depart:target ~ .onglets .o-depart, #o-approuver:target ~ .onglets .o-approuver, #o-miennes:target ~ .onglets .o-miennes, #o-expirees:target ~ .onglets .o-expirees { color: var(--ink); }
.onglet.defaut::after, #o-parcours:target ~ .onglets .o-parcours::after, #o-modifier:target ~ .onglets .o-modifier::after, #o-gestes:target ~ .onglets .o-gestes::after, #o-depart:target ~ .onglets .o-depart::after, #o-approuver:target ~ .onglets .o-approuver::after, #o-miennes:target ~ .onglets .o-miennes::after, #o-expirees:target ~ .onglets .o-expirees::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); }
.ancre:target ~ .onglets .onglet.defaut { color: var(--ink3); }
.ancre:target ~ .onglets .onglet.defaut::after { content: none; }
.verrou { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); font-weight: 700; color: var(--ink2); }
.panneau .bloc-tete { flex-wrap: wrap; }
@media (max-width: 560px) {
  .fiche-haut { padding: var(--e5) var(--e4) var(--e4); }
  .fiche-haut .avatar.grand { width: 64px; height: 64px; font-size: 22px; }
  .fait { padding: var(--e3) var(--e4); }
  .fait.long { grid-column: 1 / -1; }
  .page-onglets .onglets { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .page-onglets .onglet { justify-content: center; white-space: normal; text-align: center; }
  .filtres-recherche .bouton { padding-left: 14px; padding-right: 14px; }
}

/* ---------------------------------------------------------------- validations */
.v-carte { padding: var(--e5); margin-bottom: var(--e4); }
.v-haut { display: flex; align-items: flex-start; gap: var(--e3) var(--e4); flex-wrap: wrap; }
.v-haut .tuile { width: 48px; height: 48px; border-radius: 14px; }
.v-titre { flex: 1; min-width: 200px; }
.v-titre h3 { margin: 2px 0 4px; font-size: var(--t-l); line-height: 1.35; }
.v-titre h3 a { color: var(--ink); }
.v-detail { margin: 0; color: var(--ink2); overflow-wrap: anywhere; }
.v-detail strong { font-weight: 600; }
.etapes { display: flex; list-style: none; margin: var(--e5) 0 0; padding: 0; counter-reset: etape; }
.etape { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding-right: var(--e3); }
.etape::before { content: ''; position: absolute; top: 13px; left: 28px; right: 0; height: 2px; background: var(--line); }
.etape:last-child::before { content: none; }
.etape.faite::before { background: var(--gold); }
.etape-point { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 2px solid var(--line); color: var(--ink3); }
.etape.faite .etape-point { background: var(--gold); border-color: var(--gold); color: #1a1405; }
.etape.en-cours .etape-point { border-color: var(--gold); box-shadow: 0 0 0 4px var(--goldSoft); }
.etape.ko .etape-point { background: var(--dangerSoft); border-color: var(--danger); color: var(--danger); }
.etape-texte { display: flex; flex-direction: column; min-width: 0; }
.etape-libelle { font-weight: 800; font-size: var(--t-s); color: var(--ink2); }
.etape.faite .etape-libelle, .etape.en-cours .etape-libelle { color: var(--ink); }
.etape.ko .etape-libelle { color: var(--danger); }
.etape-sous { font-size: var(--t-xs); color: var(--ink2); overflow-wrap: anywhere; line-height: 1.45; }
.v-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--line); }
.v-qui { color: var(--ink2); font-size: var(--t-s); }
.v-alerte { margin: var(--e4) 0 0; }
.v-carte > .meta { margin-top: var(--e4); }
.reflexion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-top: var(--e4); padding: var(--e3) var(--e4); border-radius: 14px; background: var(--goldSoft); color: var(--goldInk); font-weight: 700; font-size: var(--t-s); }
.reflexion-texte { flex: 1; min-width: 200px; }
.reflexion progress { flex: 0 1 220px; width: 220px; height: 8px; border: 0; border-radius: var(--r-rond); background: var(--card); overflow: hidden; appearance: none; }
.reflexion progress::-webkit-progress-bar { background: var(--card); border-radius: var(--r-rond); }
.reflexion progress::-webkit-progress-value { background: var(--gold); border-radius: var(--r-rond); }
.reflexion progress::-moz-progress-bar { background: var(--gold); border-radius: var(--r-rond); }
@media (max-width: 560px) {
  .etapes { flex-direction: column; gap: var(--e3); }
  .etape { flex-direction: row; align-items: center; padding-right: 0; }
  .etape::before { top: 28px; bottom: calc(-1 * var(--e3)); left: 13px; right: auto; width: 2px; height: auto; }
  .v-pied .ligne-actions { width: 100%; }
  .v-pied .ligne-actions .bouton { flex: 1; }
  .reflexion progress { flex-basis: 100%; width: 100%; }
}

/* ------------------------------------------------- tâches, demandes, notifications */
.pile-blocs { display: flex; flex-direction: column; gap: var(--e4); }
.pastilles.filtres { flex-direction: row; margin: 0 0 var(--e4); }
.lignes > li + li { border-top: 1px solid var(--line); }
.ligne-fin { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; flex: none; max-width: 45%; }
.ligne.close .ligne-titre { color: var(--ink2); text-decoration: line-through; text-decoration-color: var(--ink3); }
.echeance { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 10px; border-radius: var(--r-rond); font-size: var(--t-xs); font-weight: 800; background: var(--infoSoft); color: var(--info); }
.echeance.proche { background: var(--warnSoft); color: var(--warn); }
ul.lignes.carte { padding: var(--e2) var(--e3); }
@media (max-width: 560px) {
  .ligne { flex-wrap: wrap; }
  .ligne-fin { max-width: none; width: 100%; justify-content: flex-start; padding-left: 56px; }
  .notification-bouton .ligne-texte { flex-basis: 0; }
}

/* ------------------------------------------------------------------ animations */
/* Le contenu de chaque page arrive par paliers ; la navigation reste en place pendant la transition entre
   deux pages (si le navigateur la connaît). Rien de tout cela quand le système demande moins de mouvement. */
@keyframes entree { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .cote { view-transition-name: cote; }
  .barre-bas { view-transition-name: barre-bas; }
  .banniere { view-transition-name: banniere; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--d-moyen); }
  main > .conteneur > * { animation: entree var(--d-long) var(--courbe) both; }
  main > .conteneur > :nth-child(2) { animation-delay: 40ms; }
  main > .conteneur > :nth-child(3) { animation-delay: 80ms; }
  main > .conteneur > :nth-child(4) { animation-delay: 120ms; }
  main > .conteneur > :nth-child(5) { animation-delay: 160ms; }
  main > .conteneur > :nth-child(n+6) { animation-delay: 200ms; }
  main > .conteneur > :is(.page-onglets, .pile-blocs) { animation: none; }
  .page-onglets > *, .pile-blocs > * { animation: entree var(--d-long) var(--courbe) both; }
  .page-onglets > :nth-child(2), .pile-blocs > :nth-child(2) { animation-delay: 60ms; }
  .page-onglets > :nth-child(3), .pile-blocs > :nth-child(3) { animation-delay: 120ms; }
  .page-onglets > :nth-child(n+4), .pile-blocs > :nth-child(n+4) { animation-delay: 180ms; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ connexion */
.connexion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e6); align-items: start; }
.connexion-marque { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--e5); padding: var(--e10) var(--e8); border-radius: var(--r-2xl); background: var(--navy); color: #eef1f6; min-height: 520px; }
.connexion-symbole { position: absolute; right: -60px; bottom: -40px; width: 340px; height: auto; opacity: .12; pointer-events: none; }
.connexion-accroche { position: relative; margin: auto 0 0; font-size: 40px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; }
.connexion-accroche em { font-style: normal; color: #e3c88d; }
.connexion-points { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); font-size: var(--t-m); color: #c8cfdb; }
.connexion-points li { display: flex; align-items: center; gap: 12px; }
.connexion-points .tuile { background: rgba(212, 176, 106, .16); color: #e3c88d; }
.connexion-form { padding: var(--e4) 0; }
.connexion-form h1 { margin-top: var(--e4); }
.connexion-microsoft { display: flex; width: 100%; min-height: 52px; margin-top: var(--e5); justify-content: center; }
.connexion-form .aide { margin: var(--e2) 0 0; }
.segments { border: 0; padding: 0; margin: var(--e5) 0 0; }
.segments legend { padding: 0; margin-bottom: var(--e2); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-rond); background: var(--hover); border: 1px solid var(--line); }
.seg label { position: relative; display: block; margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-rond); font-weight: 700; font-size: var(--t-s); color: var(--ink2); text-align: center; transition: background var(--d-court), color var(--d-court); }
.seg input:checked + span { background: var(--btnP); color: var(--btnPInk); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.separateur { display: flex; align-items: center; gap: 12px; margin: var(--e6) 0 var(--e3); font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.separateur::before, .separateur::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.personas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e2); }
:where(.persona) { font: inherit; }
.persona { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: var(--e3); border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; transition: border-color var(--d-court), background var(--d-court); }
.persona:hover { border-color: var(--gold); background: var(--hover); }
.persona > .ic { flex: none; color: var(--ink3); }
@media (max-width: 860px) {
  .connexion { grid-template-columns: 1fr; gap: var(--e4); }
  .connexion-marque { min-height: 0; padding: var(--e5); gap: var(--e3); }
  .connexion-accroche { font-size: 26px; margin: 0; }
  .connexion-points { display: none; }
  .connexion-symbole { width: 200px; right: -40px; bottom: -30px; }
  .connexion-form { padding: 0; }
}

/* ------------------------------------------------------------------ réglages */
.reglage { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) 0; }
.reglage-ligne { display: flex; align-items: center; gap: var(--e3); }
.reglage-choix { flex-wrap: wrap; }
.reglage-choix select { width: auto; min-width: 180px; }
.socle-audit { list-style: none; margin: 0 0 var(--e4); padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.socle-audit li { display: flex; align-items: flex-start; gap: 10px; }
.socle-audit .ic { flex: none; margin-top: 3px; color: var(--ink3); }
.regles-audit { border: 0; margin: 0; padding: 0; }
.carte.bloc .meta + .titre-carte { margin-top: var(--e4); }

/* --------------------------------------------------- annonces, annuaire, assistance */
.case.niveau-pays { margin-left: 16px; } .case.niveau-filiale { margin-left: 32px; } .case.niveau-departement { margin-left: 48px; }
@media (max-width: 560px) { .case.niveau-pays { margin-left: 8px; } .case.niveau-filiale { margin-left: 16px; } .case.niveau-departement { margin-left: 24px; } }
.extrait-court { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.annonce.non-lue .ligne-titre { color: var(--ink); }
.lecture { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; }
.lecture progress { width: 96px; height: 6px; appearance: none; -webkit-appearance: none; border: 0; border-radius: var(--r-rond); background: var(--hover); overflow: hidden; }
.lecture progress::-webkit-progress-bar { background: var(--hover); border-radius: var(--r-rond); }
.lecture progress::-webkit-progress-value { background: var(--gold); border-radius: var(--r-rond); }
.lecture progress::-moz-progress-bar { background: var(--gold); border-radius: var(--r-rond); }
.annonce-faits, .etiquettes { list-style: none; margin: 0 0 var(--e4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: center; font-size: var(--t-s); color: var(--ink2); }
.annonce-faits li, .etiquettes li { display: inline-flex; align-items: center; gap: 6px; }
.annonce-texte { margin-bottom: var(--e4); padding: var(--e6); }
.annonce-texte .texte-long { margin: 0; font-size: var(--t-m); line-height: 1.65; }
.annonce-lecture { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); }
.annonce-lecture p { margin: 0; font-weight: 700; }
.zone-danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); border-color: var(--danger); }
.zone-danger .aide { margin: 4px 0 0; }
.zone-titre { margin: 0; font-weight: 800; color: var(--danger); }
.contacts { flex-direction: column; align-items: flex-end; gap: 0; }
.contact { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--t-s); font-weight: 700; color: var(--goldInk); text-decoration: none; overflow-wrap: anywhere; }
.contact:hover { text-decoration: underline; }
.contact .ic { flex: none; }
.annuaire .ligne { margin: 0; }
.avec-icone { display: flex; align-items: flex-start; gap: 10px; }
.avec-icone > .ic { flex: none; margin-top: 2px; }
.demande-aide-tete { display: flex; align-items: center; gap: 12px; margin-bottom: var(--e2); }
.demande-aide-tete h2 { margin: 0; font-size: var(--t-l); }
.assist { padding-bottom: var(--e2); }
.assist .ligne { margin: 0; }
.assist-suite { margin: 0 0 var(--e2) calc(42px + 14px + var(--e3)); }
.assist-suite.actions { margin-top: 0; }
@media (max-width: 560px) {
  .contacts { align-items: flex-start; }
  .assist-suite { margin-left: 0; }
  .annonce-texte { padding: var(--e4); }
}

/* ------------------------------------------------------- pages de détail et formulaires */
form.carte > input[type=hidden]:first-child + :is(label, fieldset),
form.carte > input[type=hidden]:first-child + input[type=hidden] + :is(label, fieldset) { margin-top: 4px; }
.recap { padding: 0; overflow: hidden; }
.recap .faits { display: flex; flex-wrap: wrap; border-top: 0; }
.recap .fait { flex: 1 1 240px; }
.recap .fait.large { flex-basis: 100%; }
.texte-carte .texte-long { margin: 0; line-height: 1.65; }
.titre-carte { margin: 0 0 var(--e2); font-size: var(--t-l); }
.pile-blocs + .info, .carte.bloc + .carte, .carte.bloc + form.carte { margin-top: var(--e4); }
.page-erreur { max-width: 560px; margin: var(--e8) auto; }
.page-erreur .etat-vide-titre { font-size: var(--t-2xl); }
.page-erreur .erreur { margin: var(--e2) 0 var(--e3); }
.reprise + .reprise { border-top: 1px solid var(--line); }
.reprise-gestes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2) var(--e3); padding: 0 var(--e3) var(--e3) 56px; }
.reprise-gestes form { margin: 0; }
.reprise-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2); }
.reprise-choix { display: flex; flex-direction: column; gap: 6px; margin: 0; flex: 1 1 240px; }
.reprise-choix span { font-size: var(--t-s); color: var(--ink2); }
.reprise-tout { margin: 0 0 var(--e3); padding-bottom: var(--e3); border-bottom: 1px solid var(--line); }
.reprise .ligne-fin form { margin: 0; }
@media (max-width: 560px) {
  .reprise-gestes { padding-left: var(--e3); }
}

/* Tranche 52 : connexion sans Microsoft 365, page Sécurité, fiche du code d'activation. */
.connexion-autre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); margin: 0; }
.connexion-autre .bouton { flex: 1 1 260px; justify-content: center; min-height: 48px; }
form.pile { display: block; }
form.pile > label:first-child { margin-top: var(--e2); }
form.pile .actions { margin-top: var(--e4); }
.connexion-form .info, .connexion-form .erreur { margin-top: var(--e3); }
.qr-bloc { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); margin: var(--e4) 0 var(--e2); }
.qr { width: 200px; height: 200px; padding: 6px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); }
.qr-bloc summary { cursor: pointer; font-weight: 700; color: var(--ink2); }
.cle-totp code { font-size: var(--t-m); letter-spacing: .06em; word-break: break-all; user-select: all; }
.pile-cartes { display: flex; flex-direction: column; gap: var(--e3); max-width: 640px; }
.pile-cartes .carte { margin: 0; }
.pile-cartes .carte > h2:first-child { margin-top: 0; }
.fiche-activation { max-width: 640px; }
.fiche-activation h1 { font-size: var(--t-xl, 22px); margin: 0 0 var(--e1, 4px); }
.code-activation { font-size: clamp(19px, 6vw, 26px); font-weight: 800; letter-spacing: .08em; white-space: nowrap; user-select: all; }
.info.attention { background: var(--warnSoft); color: var(--warn); }
.etapes { margin: var(--e4) 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--e1, 4px); }
@media print {
  .fiche-activation { border: 2px solid #111; max-width: none; padding: 8mm; }
  .fiche-activation .code-activation { font-size: 22pt; }
  .info.attention { display: none; }
}

/* Tranche 53 : indice de performance. */
.indice-carte > h2:first-child, .grille-deux .carte > h2:first-child { margin-top: 0; }
.faits.indice-maintenant { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.indice-chiffre { display: block; font-weight: 800; font-size: var(--t-l); }
.indice-avant { display: block; font-size: var(--t-xs); color: var(--ink3); }
.indice-aide { display: block; font-size: var(--t-xs); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink3); }
.indice-table th[scope=row] { font-size: var(--t-s); text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700; }
.tableau-conteneur + .aide { margin: var(--e2) 0 var(--e5); }
.grille-deux { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin-top: var(--e4); }
.grille-deux .carte { margin: 0; }
.titre-section { margin: var(--e6) 0 var(--e1); }
@media (max-width: 640px) {
  .indice-table th[scope=row] { display: block; padding: 2px 16px 6px; border: 0; }
  .grille-deux { grid-template-columns: minmax(0, 1fr); }
}
/* Listes sans vignette (indice, dossier) : sur mobile, le badge s'aligne sur le texte. */
@media (max-width: 560px) { .sans-tuile .ligne-fin { padding-left: 0; } }

/* Tranche 54 : dossier complet. */
.faits.deux-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.indice-carte > .faits + .meta { margin: var(--e3) 0 0; }

/* Tranche 55 : tableau de bord de la direction. */
.faits.pilotage-total { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pilotage-table th[scope=row] { text-transform: none; letter-spacing: 0; font-size: var(--t-s); color: var(--ink); font-weight: 800; }
.pilotage-table .pilotage-filiale th[scope=row] { font-weight: 600; padding-left: var(--e5); }
@media (max-width: 640px) {
  .faits.pilotage-total { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilotage-table th[scope=row] { display: block; padding: 10px 16px 6px; border: 0; }
  .pilotage-table .pilotage-filiale th[scope=row] { padding-left: 16px; }
}

/* ------------------------------------------------------------------ impression */
.imprime-seul { display: none; }
@media print {
  @page { margin: 14mm 12mm; }
  /* Un élément qui sort de display: none relance son apparition : à l'impression, il partirait transparent. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  :root { color-scheme: light; }
  html, body { background: #fff; color: #111; }
  body { font-size: 11pt; }
  .sauter, .banniere, .cote, .haut, .haut-mobile, .barre-bas, .pied, .retour, .onglets, .fiche-gestes, .actions, form, .tete-page .actions { display: none; }
  .coquille, .principal, main { display: block; }
  .conteneur { max-width: none; padding: 0; }
  .carte { background: #fff; color: #111; box-shadow: none; border: 1px solid #b8b8b8; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .badge { border: 1px solid #8a8a8a; background: #fff; color: #111; }
  .meta, .aide, .ligne-sous, .sous-titre, .fait dt { color: #444; }
  .imprime-seul { display: block; margin: 0 0 6mm; font-size: 9pt; color: #444; }
  /* L'identifiant l'emporte sur l'onglet visé par l'ancre (#o-…:target) : on imprime la même chose de partout. */
  #contenu .page-onglets .panneau:not(.imprimable) { display: none; }
  #contenu .page-onglets .panneau.imprimable { display: block; margin-top: 5mm; }
  .fait { background: #fff; }
  .faits { background: #b8b8b8; }
  .avatar { border: 1px solid #8a8a8a; }
}
/* Le mot trouvé par la recherche dans les messages. */
mark { background: var(--goldSoft); color: var(--ink); border-radius: 3px; padding: 0 2px; font-weight: 600; }

/* Tranche 38 : appareils qui reçoivent les push. */
[hidden] { display: none !important; }
.appareils-push li { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); flex-wrap: wrap; padding: var(--e2) 0; }
/* Tranche 39 : participants d'une réunion. */
.participants-reunion li { padding: var(--e2) 0; }

/* Tranche 42 : relances d'une tâche, la plus récente en haut. */
.relances { margin-top: var(--e4); }
.relances li { padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--t-s); }
.relances .texte-long { margin: 4px 0 0; }

/* Le bouton du champ de fichiers prend l'allure d'un bouton secondaire de l'ERP, et non celle du navigateur. */
input[type="file"]::file-selector-button {
  font: inherit; font-size: var(--t-s); font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 8px 14px; margin-right: var(--e3); cursor: pointer;
  transition: background var(--d-court) var(--courbe);
}
input[type="file"]::file-selector-button:hover { background: var(--hover); }

/* Tranche 44 : citation dans une bulle, réponse en préparation, réactions sous le message. */
.citation { display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--e2); padding: 6px 10px; border-left: 3px solid var(--gold); border-radius: 6px; background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--ink); font-size: var(--t-xs); text-decoration: none; }
.message.mien .citation { background: rgba(255,255,255,.12); color: var(--btnPInk); }
a.citation:hover { border-left-color: var(--goldInk); }
.citation span { color: inherit; opacity: .85; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.reponse-a { margin-top: var(--e3); padding: var(--e2) var(--e3); border-left: 3px solid var(--gold); border-radius: var(--r-s); background: var(--goldSoft); }
.reponse-a p { margin: 0; }
.reponse-a a { font-size: var(--t-xs); }
form.reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 6px 0; }
.message.mien form.reactions { justify-content: flex-end; }
.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 6px 0; }
.reaction { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--r-rond); background: var(--card); color: var(--ink); font: inherit; font-size: var(--t-xs); font-weight: 700; cursor: pointer; }
.reaction.moi { border-color: var(--gold); background: var(--goldSoft); color: var(--goldInk); }
.reaction:hover { border-color: var(--gold); }
.carte details.reagir { margin: 0; padding: 0; border: 0; position: relative; }
.reagir > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 28px; padding: 0 8px; border-radius: var(--r-rond); color: var(--ink2); font-size: var(--t-s); font-weight: 700; }
.reagir > summary::-webkit-details-marker { display: none; }
.reagir > summary:hover, .reagir[open] > summary { background: var(--hover); color: var(--ink); }
.reaction-palette { position: absolute; z-index: 2; bottom: calc(100% + 6px); left: 0; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-rond); background: var(--card); box-shadow: var(--ombre-carte); }
.message.mien .reaction-palette { left: auto; right: 0; }
.reaction-choix { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; font-size: 18px; cursor: pointer; }
.reaction-choix:hover { background: var(--hover); transform: scale(1.12); }
.lien-repondre { font-size: var(--t-xs); font-weight: 700; color: var(--ink2); padding: 4px 6px; }
.lien-repondre:hover { color: var(--goldInk); }
.message:target .bulle { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .reaction-choix:hover { transform: none; } }
.reagir > summary { font-size: 15px; filter: grayscale(1); opacity: .75; }
.reagir > summary:hover, .reagir[open] > summary { filter: none; opacity: 1; }
.reagir-plus { font-size: 11px; font-weight: 800; margin-left: 1px; vertical-align: super; }

/* Tranche 45 : @mentions surlignées, messages épinglés en tête de conversation. */
.mention { font-weight: 700; color: var(--goldInk); }
.mention.mention-moi { padding: 0 3px; border-radius: 4px; background: var(--goldSoft); }
.message.mien .mention { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.badge.mention-badge { min-width: 24px; justify-content: center; padding: 2px 8px; background: var(--goldSoft); color: var(--goldInk); }
.epingles { margin: 0 0 var(--e3); padding: var(--e2) var(--e3); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r-s); background: var(--card); }
.epingles-titre { margin: 0 0 var(--e2); font-size: var(--t-xs); font-weight: 800; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; }
.epingles ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
.epingles li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.epingles li > a { flex: 1 1 260px; min-width: 0; display: flex; gap: 6px; color: var(--ink); text-decoration: none; font-size: var(--t-s); }
.epingles li > a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.epingles li > a strong { flex: none; white-space: nowrap; }
.epingles li > a:hover strong { color: var(--goldInk); }
.epingles form { margin: 0; }
.epingle-marque { margin-left: 6px; font-size: var(--t-xs); font-weight: 700; color: var(--goldInk); }
button.lien-repondre { border: 0; background: transparent; font-family: inherit; cursor: pointer; }

/* Tranche 46 : « lu par » sous mon dernier message d'un groupe. */
.lu-par { margin: 2px 6px 0; font-size: var(--t-xs); color: var(--ink2); }
.lu-par span[aria-hidden] { font-weight: 800; letter-spacing: -2px; margin-right: 2px; }
.lu-par.tous span[aria-hidden] { color: var(--ok); }

/* Tranche 47 : statut de présence. Une pastille de couleur, jamais seule : son nom l'accompagne (bulle ou texte caché). */
.presence { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.presence-point { display: block; width: 10px; height: 10px; border-radius: 50%; flex: none; box-sizing: border-box; background: var(--ink3); }
.presence.disponible .presence-point { background: var(--ok); }
.presence.occupe .presence-point { background: var(--danger); }
.presence.ne_pas_deranger .presence-point { background: linear-gradient(var(--card), var(--card)) center / 6px 2px no-repeat, var(--danger); }
.presence.absent .presence-point { background: var(--warn); }
.presence.hors_ligne .presence-point { background: transparent; border: 2px solid var(--ink3); }
.avatar-cadre { position: relative; display: inline-flex; flex: none; }
.avatar-cadre > .presence { position: absolute; right: -2px; bottom: -2px; }
.avatar-cadre > .presence .presence-point { width: 12px; height: 12px; outline: 2px solid var(--card); }
.avatar-cadre > .presence.hors_ligne .presence-point { background: var(--card); }
.moi .avatar-cadre > .presence .presence-point { outline-color: var(--navy); }
.moi .avatar-cadre > .presence.hors_ligne .presence-point { background: var(--navy); border-color: #a3adbf; }
.moi-texte .presence { display: inline-flex; }
.moi-texte .moi-statut { display: inline-flex; margin-top: 3px; padding: 2px 0; font-size: 12px; color: #c3cbd8; text-decoration: none; }
.moi-texte .moi-statut:hover { color: #fff; text-decoration: underline; }
.moi-texte .moi-statut .presence.hors_ligne .presence-point { border-color: #a3adbf; }
.avec { white-space: nowrap; }
.avec .presence { margin-right: 5px; }
.absences { display: grid; gap: var(--e2); margin: var(--e3) 0 0; }
.absences p { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--warnSoft); color: var(--ink); }
.absences p > svg { flex: none; margin-top: 3px; color: var(--warn); }
.statut-actuel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; }
.choix-statut .case strong { display: inline-flex; align-items: center; gap: 8px; }

/* Tranche 48 : équipes et canaux. */
.equipes { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.equipes .carte { margin: 0; }
.equipe-tete { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e2); }
.equipe-tete h2 { margin: 0; font-size: 17px; }
.equipe-tete .meta { margin: 2px 0 0; }
.canaux .ligne { padding: 9px var(--e3); }
.canaux .ligne.non-lue .ligne-titre { color: var(--ink); }
.canaux .ligne:not(.non-lue) .ligne-titre { font-weight: 600; color: var(--ink2); }
.canal-diese { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--hover); color: var(--ink2); font-weight: 800; }
.equipe-actions { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e3) 0 0; }
.onglets-equipe { margin: 0 0 var(--e3); overflow-x: auto; }
.onglets-equipe ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0 0 2px; border-bottom: 1px solid var(--line); }
.onglets-equipe a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; white-space: nowrap; color: var(--ink2); font-weight: 700; font-size: var(--t-s); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -3px; }
.onglets-equipe a:hover { color: var(--ink); }
.onglets-equipe a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
.publications { display: grid; gap: var(--e3); }
.publication { border: 1px solid var(--line); border-radius: 16px; padding: var(--e3) var(--e4); background: var(--card); }
.publication.mien { border-left: 3px solid var(--gold); }
.publication-tete { margin: 0 0 4px; font-size: var(--t-s); color: var(--ink2); }
.publication-tete strong { color: var(--ink); }
.publication-objet { margin: 2px 0 6px; font-size: 16px; }
.publication > .texte-long { margin: 0; overflow-wrap: anywhere; }
.reponses { margin: var(--e3) 0 0; padding: var(--e2) 0 0 var(--e4); border-top: 1px solid var(--line); display: grid; gap: var(--e2); }
.reponse { padding: 0; }
.reponse .texte-long { margin: 0; font-size: var(--t-s); overflow-wrap: anywhere; }
.repondre-publication summary { cursor: pointer; font-weight: 700; font-size: var(--t-s); color: var(--goldInk); padding: 6px 0; list-style: none; }
.repondre-publication summary::-webkit-details-marker { display: none; }
.repondre-publication form { margin: var(--e2) 0 0; }
.repondre-publication textarea { min-height: 70px; }
.nouvelle-publication { margin: 0 0 var(--e2); font-size: 16px; }
.fil-carte.canal form.repondre { margin-top: var(--e4); }
.fichiers-equipe { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.fichiers-equipe .pieces { margin: 0; }
.fichiers-equipe .meta { margin: 4px 0 0; }

/* ---------------------------------------------------------------- message urgent */
.case.case-urgent { margin: var(--e3) 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); }
.case.case-urgent:has(input:checked) { border-color: var(--danger); background: var(--dangerSoft); }
.case.case-urgent input { accent-color: var(--danger); }
.case.case-urgent:has(input:checked) strong { color: var(--danger); }
.message.urgent .bulle { box-shadow: inset 0 0 0 2px var(--danger); }
.urgent-marque { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px; padding: 2px 8px; border-radius: var(--r-rond); background: var(--dangerSoft); color: var(--danger); font-size: var(--t-xs); font-weight: 700; }
.badge.urgent-badge { background: var(--dangerSoft); color: var(--danger); }

/* ---------------------------------------------------------------- modifier ou retirer son message (tranche 49) */
.message-retire { display: flex; align-items: center; gap: 6px; margin: 0; font-style: italic; }
.message.retire .bulle, .message.mien.retire .bulle { background: transparent; color: var(--ink2); box-shadow: inset 0 0 0 1px var(--line); }
.message-quand .modifie { color: var(--ink3); font-style: italic; }
/* Réagir, répondre, épingler, modifier, retirer : une seule ligne sous le message. */
.ligne-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 4px 6px 0; }
.message.mien .ligne-actions { justify-content: flex-end; }
.ligne-actions:empty { display: none; }
.ligne-actions form.reactions, .ligne-actions > .reactions { margin: 0; }
.gestes-message { display: contents; }
.carte details.geste-message { margin: 0; padding: 0; border: 0; }
.carte details.geste-message > summary { display: block; cursor: pointer; list-style: none; font-size: var(--t-xs); font-weight: 700; line-height: 18px; color: var(--ink2); padding: 4px 6px; min-height: 0; }
.geste-message > summary:hover { color: var(--goldInk); }
.geste-message > summary::-webkit-details-marker { display: none; }
.geste-message[open] { order: 1; flex-basis: 100%; }
.geste-message[open] > summary { color: var(--goldInk); }
.geste-message form { margin-top: var(--e2); padding: var(--e3); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); text-align: left; }
.geste-message textarea { width: 100%; }
.message.mien .geste-message[open] > summary { text-align: right; }

/* Courrier interne (tranche 50) */
.courrier-tete { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--e3); margin: 0 0 var(--e4); padding-bottom: var(--e3); border-bottom: 1px solid var(--line); }
.courrier-tete dt { color: var(--ink2); font-weight: 600; }
.courrier-tete dd { margin: 0; overflow-wrap: anywhere; }
.courrier-personne { white-space: nowrap; }
.courrier .texte-long { font-size: var(--t-m); line-height: 1.65; }
.courrier .actions { align-items: center; }
.courrier-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 var(--e3); max-height: 360px; overflow-y: auto; }
.courrier-cc { margin: var(--e3) 0; }
.courrier-cc > summary { cursor: pointer; font-weight: 600; }
form.en-ligne { display: inline; margin: 0; }
.courrier-suites { margin: 0; padding: var(--e2) var(--e1) 0; font-size: var(--t-m); }
.courrier-origine { margin-top: var(--e4); }
.courrier-origine h2 { font-size: var(--t-m); margin-top: 0; }

/* Appels audio (tranche 51) */
.appel-entrant, .appel-en-cours { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; padding: var(--e2); margin: 0 0 var(--e3); border-radius: var(--r-m); background: var(--okSoft); }
.appel-en-cours { margin: 0 0 var(--e2); }
.appel-entrant p, .appel-en-cours p { margin: 0; flex: 1 1 12rem; }
.appel-entrant .actions { margin: 0; display: flex; gap: var(--e1); }
.appel-entrant .tuile, .appel-pastille { animation: appel-sonne 1.2s ease-in-out infinite; }
@keyframes appel-sonne { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } 50% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .appel-entrant .tuile, .appel-pastille { animation: none; } }
form.appeler { margin: var(--e1) 0 0; }
.fil-appel.manque span { color: var(--danger); }
.appel-tete { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.appel-tete h1 { margin: 0; }
.appel-participants { list-style: none; margin: 0 0 var(--e3); padding: 0; display: grid; gap: var(--e1); }
.appel-participants li { display: flex; align-items: center; gap: var(--e2); }
.appel-actions { flex-wrap: wrap; }
.appel-duree { font-variant-numeric: tabular-nums; }