/* ============================================================================
   Comptoir de banque alimentaire — système visuel
   Palette de marque : turquoise #44BFD6, teal #1A7D92 / #0F5C6E.
   Séries de graphiques validées (validate_palette.js) : clair #0E8FA8 #eb6834 #4a3aa7 #eda100,
   sombre #1A9DB6 #d95926 #9085e9 #c98500. Le jaune exige un libellé visible (contraste 2.2:1).
   ============================================================================ */

:root {
  color-scheme: light;

  /* marque */
  --marque: #1A7D92;
  --marque-fonce: #0F5C6E;
  --marque-tres-fonce: #0A4553;
  --marque-vive: #44BFD6;
  --marque-pale: #E8F6FA;
  --marque-pale-2: #C9E9F1;

  /* plans */
  --page: #F3F7F9;
  --surface: #FFFFFF;
  --surface-2: #F7FAFB;
  --surface-3: #EDF3F6;
  --lateral: #0B3A45;
  --lateral-2: #0E4652;
  --lateral-encre: #D7EDF3;
  --lateral-encre-2: #8FB9C6;

  /* encre */
  --encre: #0F1F24;
  --encre-2: #4A5F67;
  --encre-3: #5F737B;
  --bord: #DCE6EA;
  --bord-2: #C9D7DD;
  --grille: #E6EDF0;
  --axe: #C9D7DD;

  /* accent et états */
  --accent: #1A7D92;
  --accent-encre: #FFFFFF;
  --accent-doux: #E1F2F6;
  --ok: #0A8A0A;
  --ok-encre: #0A6B0A;
  --ok-doux: #E6F6E6;
  --attention: #fab219;
  --attention-encre: #7A5300;
  --attention-doux: #FFF6DD;
  --serieux: #ec835a;
  --serieux-encre: #8A3C1A;
  --serieux-doux: #FDEDE5;
  --critique: #d03b3b;
  --critique-encre: #A21F1F;
  --critique-doux: #FBE7E7;

  /* séries (identité) */
  --serie-1: #0E8FA8;
  --serie-2: #eb6834;
  --serie-3: #4a3aa7;
  /* Les papiers (immatriculation, assurance) : ni panne, ni urgence — leur propre couleur. */
  --papier: #6a4bc4;
  --papier-doux: #EDE8FB;
  --serie-4: #eda100;
  /* séquentiel teal (magnitude) */
  --seq-1: #5cc3d6;
  --seq-2: #2aa9c0;
  --seq-3: #0E8FA8;
  --seq-4: #0F5C6E;
  --serie-gris: #B8C6CC;

  --ombre-1: 0 1px 2px rgba(15, 31, 36, .05), 0 1px 3px rgba(15, 31, 36, .04);
  --ombre-2: 0 2px 6px rgba(15, 31, 36, .06), 0 8px 24px rgba(15, 31, 36, .06);
  --ombre-3: 0 12px 40px rgba(10, 69, 83, .22);
  --rayon: 12px;
  --rayon-s: 8px;
  --transition: 160ms cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0D1417;
    --surface: #141C1F;
    --surface-2: #192327;
    --surface-3: #1F2B30;
    --lateral: #0A1518;
    --lateral-2: #101E23;
    --lateral-encre: #D7EDF3;
    --lateral-encre-2: #7FA6B2;
    --encre: #EEF4F6;
    --encre-2: #A9BBC2;
    --encre-3: #8A9DA5;
    --bord: #24323A;
    --bord-2: #2E3F47;
    --grille: #1F2C32;
    --axe: #2E3F47;
    --marque-pale: #10262D;
    --marque-pale-2: #163540;
    --accent: #2FAFC8;
    --accent-encre: #06232A;
    --accent-doux: #0F2A32;
    --ok-encre: #4CC94C;  --ok-doux: #0F2A0F;
    --attention-encre: #F5C860; --attention-doux: #2D2410;
    --serieux-encre: #F5A585; --serieux-doux: #2E1A12;
    --critique-encre: #F08080; --critique-doux: #2E1414;
    --serie-1: #1A9DB6; --serie-2: #d95926; --serie-3: #9085e9;
  --papier: #a992f0; --papier-doux: #2A2246; --serie-4: #c98500;
    --seq-1: #1d6f82; --seq-2: #2591a8; --seq-3: #33b3cc; --seq-4: #7fd6e6;
    --serie-gris: #3A4C54;
    --ombre-1: 0 1px 2px rgba(0,0,0,.4);
    --ombre-2: 0 2px 8px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.35);
    --ombre-3: 0 16px 48px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0D1417;
  --surface: #141C1F;
  --surface-2: #192327;
  --surface-3: #1F2B30;
  --lateral: #0A1518;
  --lateral-2: #101E23;
  --lateral-encre: #D7EDF3;
  --lateral-encre-2: #7FA6B2;
  --encre: #EEF4F6;
  --encre-2: #A9BBC2;
  --encre-3: #8A9DA5;
  --bord: #24323A;
  --bord-2: #2E3F47;
  --grille: #1F2C32;
  --axe: #2E3F47;
  --marque-pale: #10262D;
  --marque-pale-2: #163540;
  --accent: #2FAFC8;
  --accent-encre: #06232A;
  --accent-doux: #0F2A32;
  --ok-encre: #4CC94C;  --ok-doux: #0F2A0F;
  --attention-encre: #F5C860; --attention-doux: #2D2410;
  --serieux-encre: #F5A585; --serieux-doux: #2E1A12;
  --critique-encre: #F08080; --critique-doux: #2E1414;
  --serie-1: #1A9DB6; --serie-2: #d95926; --serie-3: #9085e9;
  --papier: #a992f0; --papier-doux: #2A2246; --serie-4: #c98500;
  --seq-1: #1d6f82; --seq-2: #2591a8; --seq-3: #33b3cc; --seq-4: #7fd6e6;
  --serie-gris: #3A4C54;
  --ombre-1: 0 1px 2px rgba(0,0,0,.4);
  --ombre-2: 0 2px 8px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.35);
  --ombre-3: 0 16px 48px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
/* Une icône sans dimension explicite s'étire dans un conteneur en flex : jamais.
   Classe posée par icone() ; toute règle plus précise (.bouton svg, .etiquette svg…) la surpasse. */
.ico { width: 18px; height: 18px; flex: none; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--page); color: var(--encre);
  font: 14.5px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 650; letter-spacing: -.01em; color: var(--encre); }
h1 { font-size: 1.55rem; letter-spacing: -.02em; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 .7rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
::selection { background: var(--marque-pale-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------- coquille */

.coquille { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.lateral {
  background: var(--lateral); color: var(--lateral-encre);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  padding: 1rem .85rem; gap: .25rem;
}
.lateral-marque { display: flex; align-items: center; gap: .7rem; padding: .35rem .5rem 1.1rem; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; color: inherit; border-radius: 10px; }
.lateral-marque:hover .nom { text-decoration: underline; }
.lateral-marque:focus-visible { outline: 2px solid var(--marque-vive); }
.lateral-marque img { width: 38px; height: 38px; border-radius: 10px; background: #fff; padding: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.lateral-marque .nom { font-weight: 700; font-size: .98rem; letter-spacing: -.01em; color: #fff; }
.lateral-marque .sous { font-size: .74rem; color: var(--lateral-encre-2); }
.lateral-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--lateral-encre-2); padding: .9rem .6rem .35rem; font-weight: 700; }
.lateral-lien {
  display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 9px; padding: .58rem .65rem; cursor: pointer;
  color: var(--lateral-encre); font-weight: 500; font-size: .92rem;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.lateral-lien svg { width: 19px; height: 19px; opacity: .8; flex: none; }
.lateral-lien:hover { background: rgba(255,255,255,.07); }
.lateral-lien[aria-current="page"] { background: rgba(68,191,214,.16); color: #fff; box-shadow: inset 3px 0 0 var(--marque-vive); }
.lateral-lien[aria-current="page"] svg { opacity: 1; color: var(--marque-vive); }
.lateral-lien:focus-visible { outline: 2px solid var(--marque-vive); outline-offset: 2px; }
.lateral-lien .raccourci { margin-left: auto; font-size: .7rem; color: var(--lateral-encre-2); background: rgba(255,255,255,.06); padding: .1rem .4rem; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.lateral-pied { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.lateral-user { display: flex; align-items: center; gap: .65rem; padding: .5rem .55rem; border-radius: 10px; }
.lateral-user .nom { font-weight: 600; font-size: .88rem; color: #fff; line-height: 1.2; }
.lateral-user .role { font-size: .74rem; color: var(--lateral-encre-2); }
.lateral-outils { display: flex; gap: .3rem; padding: .35rem .3rem 0; }
.lateral-outils button {
  flex: 1; background: rgba(255,255,255,.06); border: 0; border-radius: 8px; padding: .45rem; cursor: pointer;
  color: var(--lateral-encre); display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-size: .8rem;
  transition: background var(--transition);
}
.lateral-outils button:hover { background: rgba(255,255,255,.12); }
.lateral-outils svg { width: 16px; height: 16px; }

.principal { min-width: 0; display: flex; flex-direction: column; }
/* La barre défile avec la page. Collée en haut, elle recouvrait les tuiles dès le premier
   mouvement de molette : `position: sticky` réserve sa place dans le flux, mais le contenu passe
   dessous, et un entête opaque par-dessus des chiffres n'est pas une barre, c'est un cache. */
.barre {
  z-index: 30;
  display: flex; align-items: center; gap: 1rem; padding: .75rem 1.5rem;
  /* Opaque, et non pas floutée : le contenu passe dessous en défilant, et à 82 % le texte
     d'une carte restait lisible à travers — deux couches de mots l'une sur l'autre. Le flou
     ne rattrape rien là où `backdrop-filter` n'est pas appliqué (GPU absent, capture, impression). */
  background: var(--page);
  border-bottom: 1px solid var(--bord);
}
.barre .retour { flex: none; margin-right: -.25rem; }
.barre-titre h1 { font-size: 1.25rem; }
.barre-titre .fil { font-size: .78rem; color: var(--encre-3); }
.barre-vide { flex: 1; }
/* Version et paternité : présentes partout, jamais dans le chemin de l'œil. Elles cèdent la
   place avant la recherche quand la fenêtre se resserre — l'outil passe avant la mention. */
.signature { flex: none; display: flex; gap: .4rem; align-items: baseline; white-space: nowrap;
             font-size: .7rem; color: var(--encre-2); letter-spacing: .01em; }
.signature .sig-version { font-variant-numeric: tabular-nums; font-weight: 650; }
@media (max-width: 860px) { .signature { display: none; } }
.barre-recherche {
  display: flex; align-items: center; gap: .55rem; width: min(440px, 40vw);
  background: var(--surface); border: 1px solid var(--bord); border-radius: 10px; padding: .48rem .7rem;
  color: var(--encre-3); cursor: text; transition: border-color var(--transition), box-shadow var(--transition);
}
.barre-recherche:hover { border-color: var(--bord-2); }
.barre-recherche:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.barre-recherche svg { width: 17px; height: 17px; flex: none; }
.barre-recherche input { flex: 1; border: 0; background: none; font: inherit; color: var(--encre); outline: none; min-width: 0; }
.barre-recherche input::placeholder { color: var(--encre-3); }
.touche {
  font-size: .68rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--encre-3);
  border: 1px solid var(--bord); border-bottom-width: 2px; border-radius: 5px; padding: .05rem .38rem; background: var(--surface-2);
}
.contenu { padding: 1.4rem 1.5rem 3rem; max-width: 1480px; width: 100%; }
.contenu.entre { animation: entree .28s var(--transition) both; }
@keyframes entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rafraichit { opacity: .45; pointer-events: none; transition: opacity .2s; }

@media (max-width: 960px) {
  /* `clip` et non `hidden` : `hidden` fait du corps un conteneur de défilement, et une barre
     `position: sticky` cesse alors de tenir — elle s'en allait avec la page sur un téléphone. */
  html, body { overflow-x: clip; }
  .coquille { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; flex-direction: row; padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom)); gap: 0; z-index: 40; border-top: 1px solid rgba(255,255,255,.08); }
  .lateral nav { display: flex; flex: 1; gap: .15rem; }
  .lateral-marque, .lateral-section, .lateral-pied, .lateral-actions, .lateral-lien .raccourci { display: none; }
  .lateral-lien { flex: 1; flex-direction: column; gap: .2rem; font-size: .66rem; padding: .4rem .2rem; justify-content: center; }
  .lateral-lien[aria-current="page"] { box-shadow: none; }
  .contenu { padding: 1rem .9rem 5.5rem; }
  .barre { padding: .55rem .9rem; gap: .5rem; }
  .barre-recherche { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; }
  .barre-recherche input, .barre-recherche .touche { display: none; }
  .barre-titre h1 { font-size: 1.1rem; }
  .barre .retour span { display: none; }
  .barre-titre .fil { display: none; }
  .heros { padding: 1.1rem 1.15rem; }
  .tableau-boite { margin: 0 -1.2rem; padding: 0 1.2rem; }
}

/* ---------------------------------------------------------------- grilles et cartes */

.grille { display: grid; gap: 1rem; }
.grille-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grille-egale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grille-2, .grille-egale, .grille-3 { grid-template-columns: 1fr; } }

.carte {
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre-1); padding: 1.05rem 1.2rem; margin-bottom: 1rem; min-width: 0;
}
.carte-entete { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.carte-entete h2 { flex: none; }
.carte-entete .sous { color: var(--encre-3); font-size: .8rem; }
.carte-entete .vide { flex: 1; }

/* En-tête qui plie la carte : tout le titre est cliquable, et le chevron dit dans quel sens. */
.carte-replier { display: flex; align-items: center; gap: .6rem; flex: none; padding: .15rem .3rem .15rem 0;
                 background: none; border: 0; cursor: pointer; color: inherit; text-align: left; border-radius: .4rem; }
.carte-replier:hover h2 { color: var(--marque); }
.carte-replier:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }
.carte-replier svg { flex: none; color: var(--encre-3); transition: transform .15s ease; }
.carte.replie .carte-replier svg { transform: rotate(-90deg); }
.carte.replie { padding-bottom: .9rem; }
.carte.replie .carte-entete { margin-bottom: 0; }

.carte-pied { margin-top: .85rem; padding-top: .7rem; border-top: 1px solid var(--bord); color: var(--encre-3); font-size: .8rem; }

/* ---------------------------------------------------------------- tuiles et héros */

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: .85rem; margin-bottom: 1rem; }
.tuile {
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .95rem 1.05rem .85rem;
  box-shadow: var(--ombre-1); display: flex; flex-direction: column; gap: .15rem; min-width: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}
.tuile-corps { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; min-width: 0; }
.tuile-corps > div { min-width: 0; }
.tuile.ouvrable { cursor: pointer; text-align: left; font: inherit; color: inherit; position: relative; }
.tuile:hover { transform: translateY(-1px); box-shadow: var(--ombre-2); }
.tuile.ouvrable:hover { border-color: var(--accent); }
.tuile.ouvrable:focus-visible { outline: 3px solid var(--accent-doux); outline-offset: 1px; border-color: var(--accent); }
.tuile-fleche { position: absolute; top: .8rem; right: .8rem; color: var(--encre-3); opacity: 0; transition: opacity var(--transition), transform var(--transition); }
.tuile-fleche svg { width: 15px; height: 15px; }
.tuile.ouvrable:hover .tuile-fleche, .tuile.ouvrable:focus-visible .tuile-fleche { opacity: 1; transform: translateX(2px); }
.liste-menages { max-height: 58vh; overflow-y: auto; margin: 0 -1.3rem; padding: 0 1.3rem; }
.tuile-libelle { font-size: .78rem; color: var(--encre-2); font-weight: 500; }
.tuile-valeur { font-size: 1.85rem; font-weight: 680; letter-spacing: -.03em; line-height: 1.05; color: var(--encre); white-space: nowrap; }
.tuile-delta { display: inline-flex; align-items: center; gap: .25rem; font-size: .76rem; font-weight: 600; color: var(--encre-3); margin-top: .25rem; line-height: 1.3; }
.tuile-delta svg { width: 14px; height: 14px; }
.tuile-delta.bon { color: var(--ok-encre); }
.tuile-delta.mauvais { color: var(--critique-encre); }
.tuile-etincelle { flex: none; }
.tuile.accent { background: linear-gradient(135deg, var(--marque-pale), var(--surface) 70%); border-color: var(--marque-pale-2); }
.tuile.alerte .tuile-valeur { color: var(--critique-encre); }

.heros {
  min-width: 0;
  background: linear-gradient(120deg, var(--marque-tres-fonce), var(--marque-fonce) 45%, var(--marque) 100%);
  color: #fff; border-radius: 16px; padding: 1.4rem 1.6rem; margin-bottom: 1rem; position: relative; overflow: hidden;
  box-shadow: var(--ombre-2); display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
}
.heros::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(68,191,214,.45), transparent 65%); pointer-events: none; }
.heros-libelle { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; opacity: .85; font-weight: 600; }
.heros-valeur { font-size: 3.4rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: .15rem 0 .3rem; }
.heros-texte { opacity: .9; font-size: .92rem; max-width: 52ch; }
.heros-actions { display: flex; gap: .5rem; flex-wrap: wrap; position: relative; z-index: 1; }
.direction-onglets { margin: -.3rem 0 .9rem; }
.texte-mois { background: var(--surface-2); border-radius: 10px; padding: .8rem 1rem; }
.texte-mois p { margin: 0 0 .35rem; font-size: .95rem; line-height: 1.5; }
.texte-mois p:last-child { margin-bottom: 0; }
.texte-mois-titre { font-weight: 700; font-size: 1.02rem !important; }
.direction-onglets button { padding: .38rem 1rem; }
@media print { .direction-onglets { display: none !important; } }

/* --- le dossier de subvention : un texte qui se lit comme un document, les chiffres en relief */
.dossier { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); gap: 1rem; margin-bottom: 1rem; align-items: start; }
.recit { background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; padding: 1.7rem 2rem 1.4rem; box-shadow: var(--ombre-1);
  position: relative; overflow: hidden; }
.recit::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--accent), var(--marque-tres-fonce, var(--accent))); }
.recit-sur { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.recit h3 { font-size: 1.55rem; line-height: 1.15; margin: .25rem 0 .2rem; letter-spacing: -.01em; text-wrap: balance; }
.recit-meta { font-size: .8rem; color: var(--encre-3); margin-bottom: 1.1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--bord); }
.recit p { font-size: 1rem; line-height: 1.65; margin: 0 0 .9rem; max-width: 66ch; color: var(--encre); }
.recit p.recit-ouverture { font-size: 1.12rem; line-height: 1.6; }
.recit .chiffre { font-weight: 700; color: var(--encre); background: var(--accent-doux); border-radius: 4px; padding: .02em .22em; margin: 0 .04em; box-decoration-break: clone; -webkit-box-decoration-break: clone; white-space: nowrap; }
.recit-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--bord); }
.cles { display: grid; gap: .5rem; }
.cle { background: var(--surface-2); border-radius: 11px; padding: .7rem .9rem; border-left: 3px solid var(--accent); }
.cle-valeur { font-size: 1.45rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cle-libelle { font-size: .85rem; color: var(--encre-2); margin-top: .1rem; }
.cle-sous { font-size: .75rem; color: var(--encre-3); }
.annees th .meta { font-weight: 400; font-size: .7rem; text-transform: none; letter-spacing: 0; }
.annees td.encours { font-weight: 650; }
.ratios { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.ratio { background: var(--surface-2); border-radius: 11px; padding: .8rem .9rem; }
.ratio b { display: block; font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: .15rem; }
.impression-seule { display: none; }
@media (max-width: 860px) { .dossier { grid-template-columns: 1fr; } .recit { padding: 1.2rem 1.2rem 1rem; } }
@media print {
  .impression-seule { display: block; }
  .recit { box-shadow: none; border-color: #999; break-inside: avoid; }
  .recit::before { display: none; }
  .recit .chiffre { background: none; padding: 0; text-decoration: underline; text-decoration-color: #999; }
  .recit-actions { display: none !important; }
  .cle, .ratio { border: 1px solid #ccc; break-inside: avoid; }
}
.heros .bouton.clair { background: #fff; color: var(--marque-tres-fonce); border-color: #fff; }
.heros .bouton.clair:hover { background: var(--marque-pale); }
.heros .bouton.verre { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; }
.heros .bouton.verre:hover { background: rgba(255,255,255,.22); }
@media (max-width: 720px) { .heros { grid-template-columns: 1fr; } .heros-valeur { font-size: 2.6rem; } }

/* ---------------------------------------------------------------- boutons */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--accent); color: var(--accent-encre); border: 1px solid var(--accent);
  border-radius: 9px; padding: .5rem .95rem; font-weight: 600; font-size: .88rem; cursor: pointer;
  text-decoration: none; white-space: nowrap; line-height: 1.2;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.bouton svg { width: 16px; height: 16px; flex: none; }
.bouton:hover:not(:disabled) { filter: brightness(.94); text-decoration: none; }
.bouton:active:not(:disabled) { transform: translateY(1px); }
.bouton:disabled { opacity: .5; cursor: not-allowed; }
.bouton:focus-visible { outline: 3px solid var(--accent-doux); outline-offset: 1px; box-shadow: 0 0 0 1px var(--accent); }
.bouton.secondaire { background: var(--surface); color: var(--encre); border-color: var(--bord-2); }
.bouton.secondaire:hover:not(:disabled) { background: var(--surface-2); border-color: var(--encre-3); filter: none; }
.bouton.fantome { background: none; border-color: transparent; color: var(--encre-2); }
.bouton.fantome:hover:not(:disabled) { background: var(--surface-3); filter: none; color: var(--encre); }
.bouton.danger { background: var(--critique); border-color: var(--critique); color: #fff; }
.bouton.servir { background: var(--ok); border-color: var(--ok); color: #fff; }
.bouton.petit { padding: .32rem .6rem; font-size: .8rem; border-radius: 7px; }
.bouton.petit svg { width: 14px; height: 14px; }
.bouton.grand { padding: .72rem 1.35rem; font-size: .98rem; border-radius: 11px; }
.bouton.icone { padding: .4rem; width: 32px; height: 32px; }
.bouton.icone.petit { width: 28px; height: 28px; padding: .3rem; }
.barre-boutons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.segments { display: inline-flex; background: var(--surface-3); border-radius: 9px; padding: 3px; gap: 2px; }
.segments button {
  border: 0; background: none; padding: .35rem .75rem; border-radius: 7px; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--encre-2);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.segments button[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: var(--ombre-1); }
/* La barre des heures : l'après-midi d'un coup d'œil. Chaque créneau porte sa période, son
   monde et une jauge — la part du plus chargé. C'est le déséquilibre qu'on vient corriger, pas
   le chiffre isolé ; une rangée de pastilles grises ne le montrait jamais. */
.creneaux { display: flex; gap: .4rem; flex-wrap: wrap; width: 100%; }
.creneau {
  flex: 1 1 96px; min-width: 92px; display: flex; flex-direction: column; gap: .12rem;
  align-items: flex-start; padding: .5rem .6rem .45rem; font: inherit; text-align: left;
  border: 1px solid var(--bord); border-radius: 11px; background: var(--surface);
  color: var(--encre); cursor: pointer; position: relative;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.creneau:hover { border-color: var(--bord-2); transform: translateY(-1px); }
.creneau-heure { font-size: .73rem; font-weight: 650; color: var(--encre-2); letter-spacing: .01em;
                 white-space: nowrap; font-variant-numeric: tabular-nums; }
.creneau-nb { font-size: 1.45rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.creneau-jauge { display: block; width: 100%; height: 4px; border-radius: 999px;
                 background: var(--surface-3); overflow: hidden; margin-top: .1rem; }
.creneau-jauge i { display: block; height: 100%; border-radius: 999px; background: var(--encre-3);
                   transition: width .3s var(--transition); }
.creneau-sous { font-size: .68rem; color: var(--encre-3); min-height: .95em; }

.creneau[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-doux); }
.creneau[aria-pressed="true"] .creneau-heure { color: var(--accent); }
.creneau[aria-pressed="true"] .creneau-jauge i { background: var(--accent); }
/* Le créneau en cours : un liseré, pas une couleur de plus — il peut être sélectionné ou non. */
.creneau.encours { border-color: var(--ok); }
.creneau.encours .creneau-sous { color: var(--ok); font-weight: 650; }
.creneau.encours .creneau-jauge i { background: var(--ok); }
.creneau.sans-rdv .creneau-heure { color: var(--encre-3); font-style: italic; }
.creneau-tout .creneau-jauge i { background: var(--bord-2); }
@media (max-width: 720px) { .creneau { flex-basis: 78px; min-width: 78px; padding: .45rem .5rem; }
                            .creneau-nb { font-size: 1.2rem; } }
.segments .compte { margin-left: .4rem; font-variant-numeric: tabular-nums; font-size: .74rem; padding: .05rem .4rem; border-radius: 999px; background: var(--surface-3); color: var(--encre-2); }
.segments button[aria-pressed="true"] .compte { background: var(--accent-doux); color: var(--accent); }
.compte-liste { font-size: .84rem; color: var(--encre-2); margin: -.2rem 0 .6rem; }
.compte-liste b { color: var(--encre); font-size: .95rem; font-variant-numeric: tabular-nums; }
.segments button:hover:not([aria-pressed="true"]) { color: var(--encre); }

/* ---------------------------------------------------------------- formulaires */

.champ { margin-bottom: .85rem; min-width: 0; }
.champ label { display: block; font-size: .8rem; font-weight: 600; color: var(--encre-2); margin-bottom: .3rem; }
.champ .aide { font-size: .76rem; color: var(--encre-3); margin-top: .25rem; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=email],
input[type=tel], input[type=search], select, textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--bord-2); border-radius: 9px;
  font: inherit; background: var(--surface); color: var(--encre);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:hover, select:hover, textarea:hover { border-color: var(--encre-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--critique); box-shadow: 0 0 0 3px var(--critique-doux); }
textarea { min-height: 84px; resize: vertical; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--encre-3) 50%), linear-gradient(135deg, var(--encre-3) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.champ-case { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .7rem; }
.champ-case input { width: 18px; height: 18px; margin-top: .1rem; flex: none; accent-color: var(--accent); }
.champ-case label { margin: 0; font-weight: 500; color: var(--encre); cursor: pointer; }
.rangee { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.rangee-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .85rem; }
@media (max-width: 620px) { .rangee, .rangee-3 { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--bord); border-radius: var(--rayon); padding: .95rem 1.05rem .3rem; margin: 0 0 1rem; min-width: 0; }
legend { font-weight: 650; color: var(--encre); padding: 0 .45rem; font-size: .88rem; }

.compteur-pas { display: inline-flex; align-items: stretch; border: 1px solid var(--bord-2); border-radius: 9px; overflow: hidden; }
.compteur-pas button { border: 0; background: var(--surface-2); width: 38px; cursor: pointer; font-size: 1.1rem; color: var(--encre-2); }
.compteur-pas button:hover { background: var(--surface-3); color: var(--encre); }
.compteur-pas input { width: 64px; border: 0; border-left: 1px solid var(--bord); border-right: 1px solid var(--bord); border-radius: 0; text-align: center; font-weight: 650; font-size: 1.05rem; }
.compteur-pas input:focus { box-shadow: none; }

.choix-cartes { display: grid; gap: .5rem; }
.choix-carte {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border: 1px solid var(--bord-2); border-radius: 10px; cursor: pointer;
  background: var(--surface); transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.choix-carte:hover { border-color: var(--encre-3); }
.choix-carte input { accent-color: var(--accent); width: 17px; height: 17px; flex: none; }
.choix-carte.choisi { border-color: var(--accent); background: var(--accent-doux); box-shadow: 0 0 0 1px var(--accent); }
.choix-carte .texte { flex: 1; font-weight: 500; }
.choix-carte .montant { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- tableaux */

.tableau-boite { overflow-x: auto; margin: 0 -1.2rem; padding: 0 1.2rem; }
/* La ligne qui commande le compte : c'est elle qu'on lit d'abord dans le panier type. */
tr.ligne-alerte > td { background: var(--attention-doux); }
tr.ligne-alerte > td:first-child { box-shadow: inset 3px 0 0 var(--attention); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--encre-3); font-weight: 700; padding: .5rem .6rem; border-bottom: 1px solid var(--bord); white-space: nowrap;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
th.triable { cursor: pointer; user-select: none; }
th.triable:hover { color: var(--encre); }
th .tri { display: inline-block; width: 10px; margin-left: .3rem; opacity: .5; }
td { padding: .58rem .6rem; border-bottom: 1px solid var(--grille); vertical-align: middle; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.lien-dossier { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--encre); cursor: pointer; text-align: left; }
.lien-dossier:hover { color: var(--accent); }
.cellule-personne { display: flex; align-items: center; gap: .6rem; }
.avatar.photo { padding: 0; overflow: hidden; background: var(--surface-2); }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; color: #fff; flex: none; letter-spacing: .02em;
}
.avatar.grand { width: 56px; height: 56px; font-size: 1.2rem; }

/* ---------------------------------------------------------------- étiquettes, alertes */

.etiquette {
  display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 999px; font-size: .73rem;
  font-weight: 650; white-space: nowrap; border: 1px solid transparent; line-height: 1.5;
}
.etiquette svg { width: 12px; height: 12px; }
/* Une étiquette qui porte une phrase, pas un mot : elle passe à la ligne au lieu d'être coupée.
   L'icône reste calée sur la première ligne, et les coins s'adoucissent — une pilule sur trois
   lignes ne ressemble plus à une pilule. */
.etiquette.multiligne { white-space: normal; align-items: flex-start; text-align: left;
                        border-radius: .55rem; max-width: min(100%, 46ch); line-height: 1.35; padding: .22rem .55rem; }
.etiquette.multiligne svg { margin-top: .18rem; }
.etiquette.actif, .etiquette.oui, .etiquette.bon { background: var(--ok-doux); color: var(--ok-encre); }
.etiquette.suspendu, .etiquette.critique { background: var(--critique-doux); color: var(--critique-encre); }
.etiquette.inactif, .etiquette.neutre { background: var(--surface-3); color: var(--encre-2); }
.etiquette.non, .etiquette.attention { background: var(--attention-doux); color: var(--attention-encre); }
.etiquette.serieux { background: var(--serieux-doux); color: var(--serieux-encre); }
.etiquette.info { background: var(--accent-doux); color: var(--accent); }
:root[data-theme="dark"] .etiquette.info { color: var(--marque-vive); }
.etiquette.restriction { background: var(--critique-doux); color: var(--critique-encre); }

.alerte { display: flex; gap: .7rem; padding: .7rem .9rem; border-radius: 10px; margin-bottom: .5rem; align-items: flex-start; border: 1px solid transparent; }
.alerte svg { width: 18px; height: 18px; flex: none; margin-top: .05rem; }
.alerte-titre { font-weight: 650; font-size: .88rem; }
.alerte-texte { color: var(--encre-2); font-size: .82rem; margin-top: .1rem; }
.alerte.erreur { background: var(--critique-doux); border-color: color-mix(in srgb, var(--critique) 30%, transparent); }
.alerte.erreur svg, .alerte.erreur .alerte-titre { color: var(--critique-encre); }
.alerte.avertissement { background: var(--attention-doux); border-color: color-mix(in srgb, var(--attention) 40%, transparent); }
.alerte.avertissement svg, .alerte.avertissement .alerte-titre { color: var(--attention-encre); }
.alerte.info { background: var(--accent-doux); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.alerte.info svg, .alerte.info .alerte-titre { color: var(--accent); }
.alerte.succes { background: var(--ok-doux); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.alerte.succes svg, .alerte.succes .alerte-titre { color: var(--ok-encre); }

.annonces { display: grid; gap: .4rem; margin-bottom: 1rem; }
.annonce { display: flex; gap: .6rem; align-items: center; padding: .55rem .9rem; border-radius: 10px; font-size: .88rem; font-weight: 500; border: 1px solid transparent; }
.annonce svg { width: 16px; height: 16px; flex: none; }
.annonce.Urgent { background: var(--critique-doux); color: var(--critique-encre); border-color: color-mix(in srgb, var(--critique) 30%, transparent); }
.annonce.Important { background: var(--attention-doux); color: var(--attention-encre); border-color: color-mix(in srgb, var(--attention) 40%, transparent); }
.annonce.Info { background: var(--accent-doux); color: var(--accent); }

/* ---------------------------------------------------------------- fiche ménage */

.fiche-entete { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1rem; flex-wrap: wrap; }
.fiche-entete .identite { flex: 1; min-width: 240px; }
.fiche-entete .dossier { color: var(--encre-3); font-size: .82rem; font-variant-numeric: tabular-nums; margin-top: .15rem; }
.fiche-faits { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin-top: .6rem; }
.fait { display: inline-flex; align-items: baseline; gap: .35rem; background: var(--surface); border: 1px solid var(--bord); border-radius: 8px; padding: .3rem .6rem; font-size: .82rem; }
.fait .valeur { font-weight: 650; }
.fait .libelle { color: var(--encre-3); font-size: .74rem; }
.chemin { display: flex; gap: 4px; margin: 0 0 1rem; }
.chemin-etape { flex: 1; text-align: center; padding: .42rem; font-size: .8rem; font-weight: 600; background: var(--surface-3); color: var(--encre-3); position: relative; }
.chemin-etape:first-child { border-radius: 8px 0 0 8px; }
.chemin-etape:last-child { border-radius: 0 8px 8px 0; }
.chemin-etape.courante { background: var(--accent); color: var(--accent-encre); }
.chemin-etape.courante.Suspendu { background: var(--critique); color: #fff; }
.chemin-etape.courante.Inactif { background: var(--encre-3); color: #fff; }

.chronologie { list-style: none; margin: 0; padding: 0 0 0 1.4rem; position: relative; }
.chronologie::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--grille); border-radius: 2px; }
.chrono { position: relative; padding: .45rem 0 .55rem .4rem; }
.chrono::before { content: ""; position: absolute; left: -1.4rem; top: .85rem; width: 10px; height: 10px; border-radius: 50%; background: var(--serie-1); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--bord); }
.chrono.derogation::before { background: var(--attention); }
.chrono.offert::before { background: var(--serie-3); }
.chrono-titre { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: .88rem; }
.chrono-titre .date { font-weight: 650; }
.chrono-titre .numero { color: var(--encre-3); font-size: .76rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.chrono-detail { color: var(--encre-2); font-size: .8rem; }
.chrono-montants { display: flex; gap: .8rem; font-size: .8rem; margin-top: .15rem; flex-wrap: wrap; }
.chrono-montants b { font-variant-numeric: tabular-nums; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: .55rem 0; border-bottom: 1px solid var(--grille); font-size: .88rem; }
.liste li:last-child { border-bottom: 0; }
.meta { font-size: .76rem; color: var(--encre-3); }
.note.reglee { opacity: .55; }
.detail-ligne { display: grid; grid-template-columns: 130px 1fr; gap: .6rem; padding: .42rem 0; border-bottom: 1px solid var(--grille); font-size: .86rem; }
.detail-ligne:last-child { border-bottom: 0; }
.detail-ligne .libelle { color: var(--encre-3); }

/* ---------------------------------------------------------------- tournée */

.arret { display: grid; grid-template-columns: 36px 1fr auto; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--grille); align-items: start; }
.arret:last-child { border-bottom: 0; }
.arret-numero { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-encre); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; }
.arret.livre .arret-numero { background: var(--ok); color: #fff; }
.arret-nom { font-weight: 650; }
/* Le nombre de boîtes : la donnée que le livreur cherche en premier sur chaque ligne.
   Sobre à une boîte, marqué au-delà — c'est l'exception qui doit sauter aux yeux. */
.arret-fait { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex: none; }
.arret-recu { font-size: .82rem; font-weight: 650; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.arret-boites { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem;
                border-radius: 999px; background: var(--surface-3); color: var(--encre-2);
                font-size: .78rem; font-variant-numeric: tabular-nums; }
.arret-boites svg { width: 13px; height: 13px; }
.arret-boites b { font-weight: 700; }
.arret-boites.plusieurs { background: var(--accent-doux); color: var(--encre); font-weight: 700; }
.arret-adresse { font-size: .86rem; }
.arret-briefing { background: var(--surface-2); border-left: 3px solid var(--accent); padding: .45rem .7rem; border-radius: 0 8px 8px 0; margin-top: .4rem; font-size: .82rem; color: var(--encre-2); }

/* ---------------------------------------------------------------- graphiques */

.viz { position: relative; width: 100%; min-width: 0; }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }
/* La carte, elle, se recadre : en zoomant, les arrêts sortis du champ déborderaient sur les
   cartes voisines. Les graphiques gardent `overflow: visible` pour leurs étiquettes d'axe. */
.viz .carte-svg { overflow: hidden; }
.viz text { font-family: inherit; fill: var(--encre-3); font-size: 11px; }
.viz .grille-h line { stroke: var(--grille); stroke-width: 1; }
.viz .axe line { stroke: var(--axe); stroke-width: 1; }
.viz .ligne { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz .aire { opacity: .1; }
.viz .point { stroke: var(--surface); stroke-width: 2; }
.viz .colonne { transition: opacity var(--transition); }
.viz .colonne:hover, .viz .barre-h:hover { opacity: .8; }
.viz .barre-h { transition: opacity var(--transition); }
.viz .curseur { stroke: var(--encre-3); stroke-width: 1; opacity: 0; pointer-events: none; }
.viz .curseur-point { opacity: 0; pointer-events: none; }
.viz .etiquette-directe { fill: var(--encre); font-weight: 650; font-size: 11px; }
.viz .zone-survol { fill: transparent; cursor: crosshair; }
.viz-entete { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.viz-entete .titre { font-weight: 650; font-size: .88rem; }
.viz-entete .sous { color: var(--encre-3); font-size: .78rem; }
.viz-entete .vide { flex: 1; }
.viz-legende { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--encre-2); margin-top: .5rem; }
.viz-legende span { display: inline-flex; align-items: center; gap: .4rem; }
.viz-legende i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.viz-legende i.trait { height: 2px; width: 14px; border-radius: 1px; }
.viz-tooltip {
  position: fixed; z-index: 300; pointer-events: none; background: var(--encre); color: var(--surface);
  border-radius: 8px; padding: .45rem .65rem; font-size: .78rem; box-shadow: var(--ombre-2); min-width: 120px;
  transform: translate(-50%, calc(-100% - 12px)); transition: opacity .12s;
}
.viz-tooltip .t-titre { color: color-mix(in srgb, var(--surface) 70%, transparent); margin-bottom: .2rem; font-weight: 600; }
.viz-tooltip .t-ligne { display: flex; align-items: center; gap: .45rem; }
.viz-tooltip .t-ligne i { width: 12px; height: 2px; border-radius: 1px; display: inline-block; }
.viz-tooltip .t-ligne b { font-size: .88rem; font-variant-numeric: tabular-nums; }
.viz-tooltip .t-ligne span { color: color-mix(in srgb, var(--surface) 75%, transparent); }
.viz-table { margin-top: .6rem; }
.empile { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface); }
.empile div { transition: opacity var(--transition); min-width: 2px; }
.empile div:hover { opacity: .8; }
.etincelle { width: 84px; height: 30px; }
.etincelle .ligne { fill: none; stroke: var(--serie-gris); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.etincelle .ligne.courant { stroke: var(--serie-1); }
.etincelle .point { fill: var(--serie-1); stroke: var(--surface); stroke-width: 2; }
.carte-svg { background: var(--surface-2); border-radius: 10px; border: 1px solid var(--bord); }
.carte-svg .trajet { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 5 4; }
.carte-svg .retour { fill: none; stroke: var(--axe); stroke-width: 1.5; stroke-dasharray: 3 4; }
.carte-svg .arret-svg circle { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; cursor: pointer; }
.carte-svg .arret-svg.livre circle { fill: var(--ok); }
.carte-svg .arret-svg text { fill: #fff; font-weight: 700; font-size: 11px; text-anchor: middle; pointer-events: none; }
.carte-svg .depot rect { fill: var(--marque-fonce); }
.carte-svg .depot text { fill: #fff; font-weight: 700; font-size: 10px; text-anchor: middle; }
/* L'adresse du livreur : assez grosse pour se lire d'un bout à l'autre d'une pièce et se
   dicter sans erreur. Un clic la sélectionne en entier. */
.lien-livreur { margin: .6rem 0; }
.lien-gros { font: 700 1.35rem/1.3 ui-monospace, Menlo, monospace; letter-spacing: .01em;
             background: var(--surface-3); border: 1px solid var(--bord); border-radius: .6rem;
             padding: .7rem .9rem; margin: .25rem 0; cursor: text; word-break: break-all;
             user-select: all; }
.retour-liste { display: grid; gap: .35rem; }
.retour-ligne { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem;
                border: 1px solid var(--bord); border-radius: .55rem; background: var(--surface-2); }
.retour-ligne.absent { opacity: .62; background: var(--surface-3); }
.retour-qui { flex: 1; min-width: 0; }
.retour-qui .meta { font-size: .8rem; }
.retour-champs { display: flex; gap: .4rem; flex: none; }
.retour-champs input[type=number] { width: 6rem; }
.retour-champs input[type=text] { width: 12rem; }
@media (max-width: 720px) {
  .retour-ligne { flex-wrap: wrap; }
  .retour-champs { width: 100%; }
  .retour-champs input[type=number], .retour-champs input[type=text] { width: auto; flex: 1; }
}
.carte-zone { position: relative; }
.carte-svg { cursor: grab; touch-action: none; }
.carte-svg.glisse { cursor: grabbing; }
/* Les commandes flottent sur la carte, en haut à droite : à portée du pouce sans manger
   la surface utile. Le fond translucide les détache de la trame sans la masquer. */
.carte-commandes { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .25rem;
                   background: color-mix(in srgb, var(--surface) 84%, transparent);
                   backdrop-filter: blur(6px); border: 1px solid var(--bord);
                   border-radius: .5rem; padding: .15rem; }
.carte-commandes .icone span { font-size: 1rem; font-weight: 700; line-height: 1; }
.carte-svg .rue { stroke: var(--grille); stroke-width: 1; }
/* Les distances écrites sur la carte : lisibles par-dessus la trame sans l'effacer.
   Le halo (paint-order) évite d'ajouter un rectangle de fond derrière chaque étiquette. */
.carte-svg .km-troncon { fill: var(--encre-2); font-size: 10px; font-weight: 650; text-anchor: middle;
                         paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
                         pointer-events: none; }
.carte-svg .echelle line { stroke: var(--encre-2); stroke-width: 1.5; }
.carte-svg .echelle text { fill: var(--encre-2); font-size: 10px; font-weight: 650; text-anchor: middle;
                           paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.carte-svg .arret-svg .anneau { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .55; }
.carte-svg .arret-svg:hover .anneau, .carte-svg .arret-svg:focus .anneau { opacity: 1; }

/* ---------------------------------------------------------------- modales, messages, palette */

.voile {
  position: fixed; inset: 0; background: rgba(6, 26, 32, .5); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 2.2rem 1rem; overflow-y: auto;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: voile .18s both;
}
@keyframes voile { from { opacity: 0; } to { opacity: 1; } }
/* La modale borne sa hauteur et fait défiler SON corps, en-tête et pied restant en place.
   Avant, c'était le voile qui défilait et le pied qui « collait » à son bord : comme le voile
   a 2,2 rem de marge intérieure, le pied s'arrêtait 35 px au-dessus du bas de l'écran et les
   dernières lignes se peignaient dessous. Visible dès qu'une liste dépasse la fenêtre. */
.modale { background: var(--surface); border-radius: 16px; box-shadow: var(--ombre-3); width: 100%; max-width: 760px; margin: auto; animation: surgit .22s var(--transition) both; border: 1px solid var(--bord);
          display: flex; flex-direction: column; max-height: calc(100vh - 4.4rem); max-height: calc(100dvh - 4.4rem); }
.modale-corps { overflow-y: auto; }
@keyframes surgit { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.modale.large { max-width: 1040px; }
.modale-entete { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--bord); flex: none; background: var(--surface); border-radius: 16px 16px 0 0; z-index: 2; }
.modale-entete h2 { flex: 1; font-size: 1.1rem; }
.modale-entete > svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.modale-corps { padding: 1.2rem 1.3rem; overflow-y: auto; }
.modale-pied { display: flex; gap: .5rem; justify-content: flex-end; padding: .9rem 1.3rem; border-top: 1px solid var(--bord); background: var(--surface-2); border-radius: 0 0 16px 16px; flex: none; }
.fermer { background: none; border: 0; cursor: pointer; padding: .3rem; border-radius: 7px; color: var(--encre-3); display: inline-flex; }
.fermer svg { width: 18px; height: 18px; }
.fermer:hover { background: var(--surface-3); color: var(--encre); }

.etapes { display: flex; gap: .4rem; margin-bottom: 1rem; }
.etape { flex: 1; display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--encre-3); font-weight: 600; }
.etape i { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); font-style: normal; font-size: .72rem; flex: none; }
.etape.faite i { background: var(--ok-doux); color: var(--ok-encre); }
.etape.courante { color: var(--encre); }
.etape.courante i { background: var(--accent); color: var(--accent-encre); }

.messages { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; max-width: 420px; }
.message { background: var(--surface); border: 1px solid var(--bord); border-left: 4px solid var(--accent); border-radius: 10px; box-shadow: var(--ombre-2); padding: .7rem .9rem; font-size: .86rem; display: flex; gap: .6rem; align-items: flex-start; animation: surgit .2s both; }
.message svg { width: 16px; height: 16px; flex: none; margin-top: .1rem; }
.message.erreur { border-left-color: var(--critique); } .message.erreur svg { color: var(--critique-encre); }
.message.succes { border-left-color: var(--ok); } .message.succes svg { color: var(--ok-encre); }
.message.avertissement { border-left-color: var(--attention); } .message.avertissement svg { color: var(--attention-encre, var(--attention)); }
.message .texte { flex: 1; }
@media (max-width: 720px) { .messages { left: 1rem; right: 1rem; bottom: 5rem; max-width: none; } }

.palette-voile { position: fixed; inset: 0; z-index: 150; background: rgba(6,26,32,.45); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; backdrop-filter: blur(4px); animation: voile .15s both; }
.palette { width: min(640px, 94vw); background: var(--surface); border-radius: 14px; box-shadow: var(--ombre-3); border: 1px solid var(--bord); overflow: hidden; animation: surgit .18s both; }
.palette-saisie { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--bord); }
.palette-saisie svg { width: 18px; height: 18px; color: var(--encre-3); }
.palette-saisie input { flex: 1; border: 0; background: none; font: inherit; font-size: 1.05rem; color: var(--encre); outline: none; }
.palette-liste { max-height: 56vh; overflow-y: auto; padding: .4rem; }
.palette-groupe { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--encre-3); padding: .55rem .7rem .25rem; font-weight: 700; }
.palette-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 9px; cursor: pointer; }
/* Ce qui ne peut pas être servi aujourd'hui : on le voit avant de cliquer, pas après. Le geste
   reste possible — une dérogation existe — mais il cesse d'être machinal. */
.palette-item.bloque { box-shadow: inset 3px 0 0 var(--critique); background: var(--critique-doux); }
.palette-item.bloque .principal-t { color: var(--critique-encre); }
.palette-item.bloque > svg:first-child { color: var(--critique); }
.palette-item svg { width: 17px; height: 17px; color: var(--encre-3); flex: none; }
.palette-item .texte { flex: 1; min-width: 0; }
.palette-item .principal-t { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-item .second-t { font-size: .76rem; color: var(--encre-3); }
.palette-item[aria-selected="true"] { background: var(--accent-doux); }
.palette-item[aria-selected="true"] svg { color: var(--accent); }
.palette-pied { display: flex; gap: 1rem; padding: .5rem 1rem; border-top: 1px solid var(--bord); font-size: .72rem; color: var(--encre-3); background: var(--surface-2); }

/* ---------------------------------------------------------------- squelettes, états vides */

.squelette { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: miroite 1.3s ease-in-out infinite; border-radius: 8px; }
@keyframes miroite { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.vide-doux { text-align: center; padding: 2.2rem 1rem; color: var(--encre-3); }
.vide-doux svg { width: 38px; height: 38px; opacity: .45; margin-bottom: .5rem; }
.vide-doux .grand { display: block; font-weight: 600; color: var(--encre-2); }

/* ---------------------------------------------------------------- connexion */

.ecran-connexion { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.connexion-marque { background: linear-gradient(150deg, var(--marque-tres-fonce), var(--marque-fonce) 50%, #1E93AA); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.connexion-marque::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -180px; bottom: -220px; background: radial-gradient(circle, rgba(68,191,214,.55), transparent 65%); }
.connexion-marque img { width: 64px; height: 64px; border-radius: 16px; background: #fff; padding: 5px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.connexion-marque h1 { color: #fff; font-size: 2.3rem; letter-spacing: -.03em; max-width: 14ch; line-height: 1.1; margin-top: 1.2rem; }
.connexion-marque p { opacity: .85; max-width: 44ch; font-size: 1rem; margin-top: .8rem; }
.connexion-points { display: grid; gap: .55rem; margin-top: 1.5rem; position: relative; }
.connexion-points div { display: flex; gap: .6rem; align-items: center; font-size: .9rem; opacity: .92; }
.connexion-points svg { width: 17px; height: 17px; color: var(--marque-vive); flex: none; }
.connexion-pied { font-size: .78rem; opacity: .6; position: relative; }
.connexion-forme { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.boite-connexion { width: 100%; max-width: 380px; }
.boite-connexion h2 { font-size: 1.4rem; margin-bottom: .3rem; }
.boite-connexion .sous { color: var(--encre-3); margin-bottom: 1.4rem; }
@media (max-width: 860px) { .ecran-connexion { grid-template-columns: 1fr; } .connexion-marque { padding: 2rem 1.5rem; min-height: 36vh; } .connexion-marque h1 { font-size: 1.7rem; } .connexion-points, .connexion-pied { display: none; } }


/* ---------------------------------------------------------------- voir le comptoir comme quelqu'un d'autre */

.bandeaux { display: flex; flex-direction: column; }
.bandeau-perime {
  display: flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem;
  background: var(--critique-doux); color: var(--critique-encre); font-size: .9rem; line-height: 1.4;
  border-bottom: 1px solid var(--critique-encre);
}
.bandeau-perime svg { flex: none; }
.bandeau-perime .texte b { font-weight: 700; }
/* Les témoins en haut à droite : une pastille par état — orange pour le bac à sable, bleu pour
   la démonstration — et un petit menu sous la pastille. Ils disent où l'on est sans manger
   l'écran. */
.temoins { position: relative; display: flex; gap: .4rem; flex: none; }
.temoin { width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .12s; }
.temoin:hover, .temoin:focus-visible { transform: scale(1.08); }
.temoin svg { width: 16px; height: 16px; }
.temoin-bac { background: #C2410C; }
.temoin-demo { background: #0E7490; }
.temoin-menu { position: absolute; top: 38px; right: 0; z-index: 60; width: 20rem; padding: .8rem .9rem; border-radius: 12px;
  background: var(--surface); color: var(--encre); border: 1px solid var(--bord); box-shadow: var(--ombre-3); display: grid; gap: .55rem; font-size: .88rem; }
.temoin-menu p { margin: 0; color: var(--encre-2); }
.temoin-titre { display: flex; align-items: center; gap: .45rem; }
.temoin-titre svg { width: 16px; height: 16px; }
.temoin-role { display: grid; gap: .3rem; font-size: .82rem; }
.temoin-role select { font: inherit; padding: .3rem .5rem; border-radius: 8px; border: 1px solid var(--bord); background: var(--surface-2); color: var(--encre); }
@media print { .temoins { display: none; } }
/* Les cartes de l'onglet Démonstration */
.demo-etat { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.demo-etat .demo-voyant { width: 12px; height: 12px; border-radius: 50%; background: var(--bord-2); flex: none; }
.demo-etat.actif .demo-voyant { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-doux); }
.demo-saisies { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; margin-top: .6rem; }
.demo-saisie { padding: .5rem .7rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--surface-2); font-size: .88rem; }
.demo-saisie b { font-size: 1.15rem; font-variant-numeric: tabular-nums; margin-right: .35rem; }
.demo-scenario { display: grid; gap: .5rem; }
.demo-scenario li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: baseline; padding: .45rem .6rem; border-radius: 8px; background: var(--surface-2); font-size: .9rem; }
.demo-scenario li .num { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-encre); font-weight: 700; font-size: .78rem; display: inline-flex; align-items: center; justify-content: center; }
.demo-scenario li .meta { display: block; margin-top: .15rem; }

.bandeau-incarne {
  position: sticky; top: 0; z-index: 35;
  display: flex; align-items: center; gap: .7rem; padding: .55rem 1.5rem;
  background: linear-gradient(90deg, #8A5A00, #B87A0A);
  color: #fff; font-size: .88rem; box-shadow: 0 2px 8px rgba(138, 90, 0, .3);
}
.bandeau-incarne > svg { width: 18px; height: 18px; flex: none; }
.bandeau-incarne .texte { flex: 1; min-width: 0; }
.bandeau-incarne .texte b { font-weight: 700; }
.bandeau-incarne .texte span { opacity: .9; }
.bandeau-incarne .bouton.clair { background: #fff; color: #7A5300; border-color: #fff; flex: none; }
.bandeau-incarne .bouton.clair:hover { background: #FFF6DD; filter: none; }
.bandeau-incarne .bouton svg { width: 15px; height: 15px; }
.coquille.incarne .lateral { box-shadow: inset 0 0 0 2px rgba(184, 122, 10, .55); }
@media (max-width: 720px) {
  .bandeau-incarne { padding: .5rem .9rem; }
  .bandeau-incarne .texte span { display: none; }
  .bandeau-incarne { position: static; }
  .bandeau-demo { padding: .5rem .9rem; position: static; }
  .bandeau-demo .texte span { display: none; }
}

/* ---------------------------------------------------------------- jauge, récapitulatif, raccourcis */

.jauge { display: grid; gap: .35rem; }
.jauge-piste { height: 8px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; }
.jauge-piste i { display: block; height: 100%; background: #fff; border-radius: 4px; transition: width .6s cubic-bezier(.2,.7,.3,1); }
.jauge-texte { font-size: .82rem; opacity: .92; }
.carte .jauge-piste { background: var(--marque-pale-2); }
.carte .jauge-piste i { background: var(--serie-1); }
.carte .jauge-texte { color: var(--encre-2); }

.recap { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; padding: .7rem .95rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--bord); font-size: .86rem; margin-top: .2rem; }
.recap b { font-variant-numeric: tabular-nums; }
.modale-pied .recap { flex: 1; margin: 0; padding: .35rem .7rem; background: var(--surface); }
@media (max-width: 720px) { .modale-pied { flex-wrap: wrap; } .modale-pied .recap { flex-basis: 100%; } }
.recap .titre { font-weight: 700; color: var(--encre-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }

.raccourcis { display: grid; gap: .45rem; }
.raccourci-ligne { display: grid; grid-template-columns: 120px 1fr; gap: .8rem; align-items: center; font-size: .9rem; }
.raccourci-ligne .touche { font-size: .8rem; justify-self: start; }

.filtre-liste { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .7rem; }
.filtre-liste input { flex: 1; min-width: 180px; }
.filtre-liste select { width: auto; min-width: 150px; max-width: 220px; flex: none; }
.plus-lignes { display: flex; justify-content: center; padding: .7rem 0 .2rem; }

.coche-anim { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-doux); color: var(--ok-encre); display: flex; align-items: center; justify-content: center; margin: 0 auto .8rem; animation: coche-pop .45s cubic-bezier(.2,.9,.3,1.4) both; }
.coche-anim svg { width: 34px; height: 34px; }
@keyframes coche-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

.note-compose { display: grid; gap: .5rem; padding: .7rem; border: 1px dashed var(--bord-2); border-radius: 10px; margin-bottom: .8rem; background: var(--surface-2); }
.note-compose textarea { min-height: 56px; }
.note-compose .ligne { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.note-compose .ligne select { width: auto; }

/* barre latérale repliée en icônes sur écran moyen */
@media (min-width: 961px) and (max-width: 1260px) {
  .coquille { grid-template-columns: 76px 1fr; }
  .lateral { padding: .9rem .5rem; }
  .lateral-marque { justify-content: center; padding: .2rem 0 .8rem; }
  .lateral-marque > div, .lateral-section, .lateral-lien > span, .lateral-user > div, .lateral-outils button > span { display: none; }
  .lateral-lien { justify-content: center; padding: .6rem; }
  .lateral-lien svg { width: 21px; height: 21px; }
  .lateral-user { justify-content: center; }
  .lateral-outils { flex-direction: column; }
  .contenu { padding: 1.2rem 1.2rem 3rem; }
}

/* ---------------------------------------------------------------- direction */

.saillants { display: grid; gap: .55rem; }
.saillant { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .75rem; border-radius: 9px; background: var(--surface-2); border-left: 3px solid var(--bord-2); }
.saillant svg { width: 17px; height: 17px; flex: none; margin-top: .1rem; color: var(--encre-3); }
.saillant b { font-size: .9rem; font-weight: 650; }
.saillant.bon { background: var(--ok-doux); border-left-color: var(--ok); }
.saillant.bon svg, .saillant.bon b { color: var(--ok-encre); }
.saillant.attention { background: var(--attention-doux); border-left-color: var(--attention); }
.saillant.attention svg, .saillant.attention b { color: var(--attention-encre); }
.saillant.info { background: var(--accent-doux); border-left-color: var(--accent); }
.saillant.info svg, .saillant.info b { color: var(--accent); }
.segments.clair { background: rgba(255,255,255,.16); }
.segments.clair button { color: rgba(255,255,255,.85); }
.segments.clair button:hover:not([aria-pressed="true"]) { color: #fff; }
.segments.clair button[aria-pressed="true"] { background: #fff; color: var(--marque-tres-fonce); }

.champ-entete { display: flex; align-items: center; gap: .3rem; margin-bottom: .3rem; }
.champ-entete label { margin: 0; }
.bulle-declencheur {
  background: none; border: 0; padding: 0; cursor: help; color: var(--encre-3);
  display: inline-flex; align-items: center; border-radius: 50%; line-height: 0;
  transition: color var(--transition);
}
.bulle-declencheur svg { width: 15px; height: 15px; }
.bulle-declencheur:hover, .bulle-declencheur[aria-expanded="true"] { color: var(--accent); }
.bulle-declencheur:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bulle {
  position: fixed; z-index: 400; max-width: 340px; background: var(--surface);
  border: 1px solid var(--bord); border-radius: 10px; box-shadow: var(--ombre-3);
  padding: .7rem .85rem; font-size: .84rem; color: var(--encre-2); line-height: 1.45;
  animation: surgit .14s var(--transition) both;
}
.bulle.large { max-width: 460px; }
.bulle-titre { font-weight: 650; color: var(--encre); margin-bottom: .4rem; font-size: .86rem; }
.roles-aide { display: grid; gap: .45rem; }
.role-ligne { font-size: .82rem; color: var(--encre-3); }
.role-ligne b { color: var(--encre); display: block; }
.role-choisi { display: flex; gap: .45rem; align-items: flex-start; margin-top: -.35rem; padding: .5rem .7rem; background: var(--accent-doux); border-radius: 8px; font-size: .82rem; color: var(--accent); }
.role-choisi svg { width: 15px; height: 15px; flex: none; margin-top: .1rem; }

/* ---------------------------------------------------------------- bénévoles */

.cases-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .4rem; }
.case-carte { display: flex; align-items: flex-start; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--bord-2); border-radius: 8px; cursor: pointer; font-size: .86rem; background: var(--surface); }
.case-carte:hover { border-color: var(--encre-3); }
.case-carte input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; margin-top: .1rem; }
.case-carte .meta { display: block; font-size: .72rem; }
.case-carte.sensible { border-left: 3px solid var(--accent); }
.case-carte:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.bloc-derogation legend { display: inline-flex; align-items: center; gap: .3rem; color: var(--encre-2); }
.bloc-derogation legend svg { width: 15px; height: 15px; }
.bloc-derogation.requise, .bloc-derogation.active { border-color: var(--attention); background: color-mix(in srgb, var(--attention-doux) 35%, transparent); }
.bloc-derogation.requise legend, .bloc-derogation.active legend { color: var(--attention-encre); }

.bloc-antecedents { border-color: var(--attention); background: color-mix(in srgb, var(--attention-doux) 35%, transparent); }
.bloc-antecedents legend { color: var(--attention-encre); display: inline-flex; align-items: center; gap: .3rem; }
.bloc-antecedents legend svg { width: 15px; height: 15px; }

.appel-liste { display: grid; gap: .2rem; }
.appel-groupe { display: flex; align-items: center; gap: .7rem; padding: .8rem 0 .3rem; font-size: .76rem; font-weight: 700; color: var(--encre-2); }
.appel-groupe .trait { flex: 1; height: 1px; background: var(--bord); }
.appel-groupe:first-child { padding-top: .2rem; }
.appel-barre { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .1rem .6rem; }
.appel-barre:empty { display: none; }
.appel-tout { display: flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .92rem; }
.appel-sans-case { width: 1rem; display: inline-block; }
.appel-avis { margin: .5rem 0 .75rem; padding: .55rem .8rem; border-radius: .5rem;
              background: var(--surface-3); color: var(--encre-2); font-size: .92rem; line-height: 1.45; }
.appel-ligne .bouton.fait { opacity: .65; }
.appel-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.appel-ligne { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 9px; }
.appel-ligne:hover { background: var(--surface-2); }
/* Le rang se lit à la couleur avant de se lire au texte. Le liseré porte l'information, le fond
   ne fait que la rendre continue sur toute la ligne — sans écraser le nom, qui reste le sujet. */
.appel-ligne.ton-bon { box-shadow: inset 3px 0 0 var(--ok); background: var(--ok-doux); }
.appel-ligne.ton-attention { box-shadow: inset 3px 0 0 var(--attention); background: var(--attention-doux); }
.appel-ligne.ton-critique { box-shadow: inset 3px 0 0 var(--critique); background: var(--critique-doux); }
.appel-ligne.ton-bon:hover, .appel-ligne.ton-attention:hover, .appel-ligne.ton-critique:hover { filter: brightness(.98); }
.appel-rang { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); color: var(--encre-2); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.appel-ligne:first-of-type .appel-rang, .appel-groupe + .appel-ligne .appel-rang { background: var(--accent); color: var(--accent-encre); }

.presence-ligne { display: flex; align-items: center; gap: .7rem; padding: .45rem .6rem; border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.presence-ligne:hover { background: var(--surface-2); }
.presence-ligne.coche { background: var(--ok-doux); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.presence-ligne.autre { opacity: .8; }
.presence-ligne.autre.coche { opacity: 1; }
.presence-ligne > input[type=checkbox] { width: 18px; height: 18px; flex: none; accent-color: var(--ok); }
.presence-h { display: flex; align-items: center; gap: .3rem; flex: none; }
.presence-heures { width: 68px; text-align: right; }
.presence-heures:disabled { opacity: .4; }

/* ---------------------------------------------------------------- journal */

.journal-jour { display: flex; align-items: center; gap: .75rem; padding: 1rem 0 .45rem; font-size: .78rem; font-weight: 700; color: var(--encre-2); }
.journal-jour > span:first-child::first-letter { text-transform: uppercase; }
.journal-jour .trait { flex: 1; height: 1px; background: var(--bord); }
.journal-jour:first-child { padding-top: .2rem; }
.journal-ligne { display: flex; align-items: flex-start; gap: .7rem; padding: .5rem .6rem; border-radius: 8px; border-left: 3px solid transparent; }
.journal-ligne:hover { background: var(--surface-2); }
.journal-ligne .heure { flex: none; width: 42px; color: var(--encre-3); padding-top: .15rem; }
.journal-ligne .marque { flex: none; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--encre-2); }
.journal-ligne .marque svg { width: 15px; height: 15px; }
.journal-ligne .corps { flex: 1; min-width: 0; }
.journal-ligne .entete { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .88rem; }
.journal-ligne .qui { color: var(--encre-2); }
.journal-ligne .detail { font-size: .82rem; color: var(--encre-3); margin-top: .1rem; overflow-wrap: anywhere; }
.journal-ligne.bon .marque { background: var(--ok-doux); color: var(--ok-encre); }
.journal-ligne.info .marque { background: var(--accent-doux); color: var(--accent); }
.journal-ligne.attention { border-left-color: var(--attention); }
.journal-ligne.attention .marque { background: var(--attention-doux); color: var(--attention-encre); }
.journal-ligne.critique { border-left-color: var(--critique); background: color-mix(in srgb, var(--critique-doux) 45%, transparent); }
.journal-ligne.critique .marque { background: var(--critique-doux); color: var(--critique-encre); }
.journal-ligne.critique .entete b { color: var(--critique-encre); }

/* ---------------------------------------------------------------- divers */

.discret { color: var(--encre-3); font-size: .84rem; }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.tab { font-variant-numeric: tabular-nums; }
.barre-progres { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.barre-progres i { display: block; height: 100%; background: var(--serie-1); border-radius: 3px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.rien { display: none !important; }
.filtres { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.filtres .libelle { font-size: .8rem; color: var(--encre-3); font-weight: 600; }

tr.ligne-eteinte > td { opacity: .55; }

/* L'intertitre d'un groupe dans un tableau : la catégorie, discrète mais franche. */
tr.groupe td { background: var(--surface-2); padding: .45rem .95rem; border-bottom: 1px solid var(--bord); }
tr.groupe span { font-weight: 650; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
                 color: var(--encre-2); }

/* Les trois gestes de la semaine : gros, lisibles, un par ligne sur un téléphone. */
.gestes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .7rem; }
.geste { display: flex; align-items: center; gap: .8rem; text-align: left; width: 100%;
         padding: 1rem 1.1rem; border: 1px solid var(--bord); border-radius: 12px;
         background: var(--surface); color: var(--encre); cursor: pointer; font: inherit;
         transition: border-color .15s, transform .15s, box-shadow .15s; }
.geste:hover { border-color: var(--accent); box-shadow: var(--ombre-1); transform: translateY(-1px); }
.geste > svg:first-child { width: 22px; height: 22px; flex: none; color: var(--accent); }
.geste > svg:last-child { width: 16px; height: 16px; flex: none; color: var(--encre-3); margin-left: auto; }
.geste > div { min-width: 0; }
.geste b { display: block; font-size: 1rem; }

/* Une recommandation se lit, puis se clique : la ligne entière est le bouton. */
.saillant.reco { align-items: flex-start; }
.saillant.reco .meta { white-space: normal; }
.saillant.cliquable { width: 100%; text-align: left; font: inherit; cursor: pointer;
                      border: 1px solid transparent; transition: border-color .15s, background .15s; }
.saillant.cliquable:hover { border-color: var(--accent); }
.saillant.cliquable > svg:last-child { width: 16px; height: 16px; flex: none; color: var(--encre-3); align-self: center; }
.reco-action { display: inline-block; margin-top: .45rem; font-size: .8rem; font-weight: 650;
               color: var(--accent); }
.saillant.bon { box-shadow: inset 3px 0 0 var(--ok); }

/* Le bon de don : lisible à l'écran, propre sur papier. */
.bon-entete { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
              padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 2px solid var(--encre); }
/* Les fiches du jour : plusieurs par page, coupées proprement. Trois par rangée à l'écran,
   deux à l'impression — assez larges pour qu'une restriction tienne sur une ligne ou deux. */
.fiches-jour { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.fiche-jour { border: 1px solid var(--bord); border-radius: 8px; padding: .6rem .7rem; break-inside: avoid; }
.fiche-jour-tete { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.fiche-jour-tete b { font-size: 1.02rem; }
.fiche-jour-nb { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.fiche-jour-alerte { margin-top: .35rem; padding: .25rem .45rem; border-radius: 6px;
                     background: var(--critique-doux); color: var(--critique-encre); font-weight: 650; }
.fiche-jour-note { margin-top: .3rem; padding: .25rem .45rem; border-radius: 6px;
                   background: var(--attention-doux); color: var(--attention-encre); }
/* L'entête des feuilles imprimées : d'où elle vient, ce qu'elle est, de quand elle date. */
.entete-impression { display: flex; align-items: center; gap: .9rem;
                     padding-bottom: .6rem; margin-bottom: .9rem; border-bottom: 2px solid var(--encre); }
.entete-logo { width: 46px; height: 46px; flex: none; border-radius: 10px; object-fit: contain;
               background: #fff; }
.entete-titre { flex: 1; min-width: 0; }
.entete-titre b { font-size: 1.25rem; display: block; line-height: 1.2; }
.entete-organisme { text-align: right; flex: none; font-size: .85rem; }
.entete-organisme b { display: block; }
@media (max-width: 600px) { .entete-organisme { display: none; } }

.groupe-tranche + .groupe-tranche { margin-top: .9rem; }
.tranche-titre { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .4rem;
                 padding-bottom: .2rem; border-bottom: 1px solid var(--bord); }
.tranche-titre b { font-size: 1.05rem; }
.fiche-jour-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
                     padding-bottom: .5rem; margin-bottom: .7rem; border-bottom: 2px solid var(--encre); }

/* La fiche se lit debout, une caisse dans les bras, à un mètre : peu de mots, gros. */
.fiche-panier .alerte { margin: .7rem 0; }
.fiche-panier .alerte-titre { font-size: .95rem; }
.fiche-panier .alerte-texte { font-size: 1.25rem; font-weight: 650; line-height: 1.35; }
.bon-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.4rem; }
.ligne-signature { border-bottom: 1px solid var(--encre-2); height: 2.2rem; margin-bottom: .3rem; }

@media print {
  /* Une modale ouverte est ce qu'on veut imprimer, et rien d'autre : sans cela, l'imprimante
     sort la page qui dort derrière elle. */
  body:has(.impression) .coquille { display: none !important; }
  body:has(.impression) #modales .voile { position: static; background: none; padding: 0; display: block; }
  body:has(.impression) #modales .modale { box-shadow: none; border: 0; max-height: none; max-width: none; width: auto; }
  body:has(.impression) #modales .modale-entete, body:has(.impression) #modales .modale-pied { display: none !important; }
  body:has(.impression) #modales .modale-corps { overflow: visible; padding: 0; }
  /* Deux colonnes sur papier : la moitié des feuilles, et rien de coupé au milieu. */
  .fiches-jour { grid-template-columns: 1fr 1fr; gap: .4rem; }
  .fiche-jour { border-color: #999; }
  /* Une page par tranche seulement si on l'a demandé : sinon c'est du papier pour rien. */
  /* Le logo doit sortir : sans cela, le navigateur économise l'encre et la feuille devient
     anonyme au moment précis où elle quitte l'application. */
  .entete-logo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .entete-impression { border-bottom-color: #000; }
  .par-page .groupe-tranche { break-before: page; }
  .par-page .groupe-tranche:first-child { break-before: auto; }
  .groupe-tranche { break-inside: auto; }
  .tranche-titre { border-bottom-color: #666; }
  .fiche-jour-alerte, .fiche-jour-note { background: none !important; color: #000 !important;
                                         border: 1px solid #666; }

  /* Le papier est blanc quel que soit le thème de l'écran : en sombre, les titres et les noms
     sortaient blanc sur blanc. Toute la palette claire est reprise ici, plus tard dans le
     fichier que les deux blocs sombres, à spécificité égale — elle gagne. */
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    color-scheme: light;
    --marque: #1A7D92;
    --marque-fonce: #0F5C6E;
    --marque-tres-fonce: #0A4553;
    --marque-vive: #44BFD6;
    --marque-pale: #E8F6FA;
    --marque-pale-2: #C9E9F1;
    --page: #F3F7F9;
    --surface: #FFFFFF;
    --surface-2: #F7FAFB;
    --surface-3: #EDF3F6;
    --lateral: #0B3A45;
    --lateral-2: #0E4652;
    --lateral-encre: #D7EDF3;
    --lateral-encre-2: #8FB9C6;
    --encre: #0F1F24;
    --encre-2: #4A5F67;
    --encre-3: #7C8F96;
    --bord: #DCE6EA;
    --bord-2: #C9D7DD;
    --grille: #E6EDF0;
    --axe: #C9D7DD;
    --accent: #1A7D92;
    --accent-encre: #FFFFFF;
    --accent-doux: #E1F2F6;
    --ok: #0ca30c;
    --ok-encre: #0A6B0A;
    --ok-doux: #E6F6E6;
    --attention: #fab219;
    --attention-encre: #7A5300;
    --attention-doux: #FFF6DD;
    --serieux: #ec835a;
    --serieux-encre: #8A3C1A;
    --serieux-doux: #FDEDE5;
    --critique: #d03b3b;
    --critique-encre: #A21F1F;
    --critique-doux: #FBE7E7;
    --serie-1: #0E8FA8;
    --serie-2: #eb6834;
    --serie-3: #4a3aa7;
    --serie-4: #eda100;
    --seq-1: #5cc3d6;
    --seq-2: #2aa9c0;
    --seq-3: #0E8FA8;
    --seq-4: #0F5C6E;
    --serie-gris: #B8C6CC;
    --ombre-1: 0 1px 2px rgba(15, 31, 36, .05), 0 1px 3px rgba(15, 31, 36, .04);
    --ombre-2: 0 2px 6px rgba(15, 31, 36, .06), 0 8px 24px rgba(15, 31, 36, .06);
    --ombre-3: 0 12px 40px rgba(10, 69, 83, .22);
    --rayon: 12px;
    --rayon-s: 8px;
    --transition: 160ms cubic-bezier(.2, .7, .3, 1);
  }
  /* Les fonds qui portent un sens sortent même sans « imprimer les arrière-plans » : le numéro
     d'ordre de l'arrêt (blanc sur accent) disparaissait de la feuille du livreur. */
  .arret-numero, .avatar, .cal-puce, .cle, .ratio { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .arret-numero { border: 1.5px solid #000; }
  .lateral, .barre > :not(.signature), .barre-boutons, .messages, .heros-actions, .viz-tooltip, .filtre-liste, .plus-lignes, .tuile-etincelle, .tuile-fleche, .bandeau-incarne, .bandeau-perime { display: none !important; }
  .barre { position: static; background: none; border: 0; box-shadow: none; padding: 0; height: auto; min-height: 0; }
  .heros { background: none !important; color: #000 !important; box-shadow: none; border: 1px solid #ccc; padding: 1rem 0; }
  .heros::after { display: none; }
  .heros-libelle, .heros-texte { opacity: 1; }
  .saillant { break-inside: avoid; }
  .carte { page-break-inside: avoid; }
  .grille-2 { grid-template-columns: 1fr; }
  .tuiles { grid-template-columns: repeat(3, 1fr); }
  .arret { break-inside: avoid; }
  .carte-svg { max-height: 60vh; }
  .signature { display: flex !important; position: fixed; bottom: .4cm; right: .6cm;
               font-size: 7pt; color: #666; }
  .coquille { display: block; }
  .contenu { padding: 0; max-width: none; }
  .carte { box-shadow: none; break-inside: avoid; border-color: #ccc; }
  body { background: #fff; color: #000; font-size: 12px; }
}

/* ---------------------------------------------------------------- démo : kiosque, direct, relief */

/* Les tuiles de connexion du mode kiosque : changer de rôle devant public, sans mot de passe
   tapé au projecteur. Elles n'existent que si le réglage les allume. */
.kiosque { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--bord); }
.kiosque-titre { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--encre-3); margin-bottom: .5rem; }
.kiosque-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.kiosque-tuile { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; font: inherit;
                 text-align: left; border: 1px solid var(--bord); border-radius: 10px;
                 background: var(--surface); color: var(--encre); cursor: pointer;
                 transition: border-color .15s, transform .12s; }
.kiosque-tuile:hover { border-color: var(--accent); transform: translateY(-1px); }
.kiosque-tuile b { display: block; font-size: .92rem; line-height: 1.15; }
.kiosque-tuile .meta { font-size: .72rem; }

/* La jauge du héros se remplit à l'ouverture : le chiffre monte, la barre pousse — les deux
   racontent la même chose, autant qu'ils arrivent ensemble. */
.heros .jauge-piste i { transform-origin: left; animation: jauge-pousse .9s var(--transition) both; }
@keyframes jauge-pousse { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Le créneau en cours respire, doucement : l'œil le trouve depuis le fond de la salle. */
.creneau.encours { animation: creneau-souffle 2.6s ease-in-out infinite; }
@keyframes creneau-souffle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(12, 163, 12, .0); }
  50% { box-shadow: 0 0 0 4px rgba(12, 163, 12, .18); }
}

/* Un passage qui vient d'arriver se voit arriver : surligné, puis le surlignage s'éteint. */
tr.ligne-fraiche > td { animation: fraiche 3.5s ease-out both; }
@keyframes fraiche { from { background: var(--accent-doux); } to { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .heros .jauge-piste i, .creneau.encours, tr.ligne-fraiche > td { animation: none; }
}

/* ---------------------------------------------------------------- le tableau en direct */

/* Un tableau mural ne suit pas le thème du poste qui le projette : une seule apparence, sombre,
   réglée pour être lue à dix mètres. Tout est en unités d'écran (vmin) : il remplit un téléviseur
   comme un portable. */
.tableau-direct {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  gap: 2.2vmin; padding: 3.2vmin 4vmin;
  background: radial-gradient(120% 140% at 20% 0%, #12242E 0%, #0B1620 55%, #081018 100%);
  color: #EAF2F6; font-variant-numeric: tabular-nums;
}
.td-haut { display: flex; align-items: center; gap: 1.6vmin; }
.td-haut img { width: 6vmin; height: 6vmin; border-radius: 1.2vmin; background: #fff; object-fit: contain; }
.td-haut b { font-size: 2.6vmin; }
.td-sous { font-size: 1.8vmin; color: #8FA6B2; }
.td-horloge { margin-left: auto; font-size: 3.4vmin; font-weight: 700; color: #CFE3EC; }
.td-fermer { border: 0; background: none; color: #56707D; font-size: 2.6vmin; cursor: pointer; padding: .5vmin 1vmin; }
.td-fermer:hover { color: #EAF2F6; }

.td-centre { text-align: center; margin-top: 1vmin; }
.td-grand { display: flex; align-items: baseline; justify-content: center; gap: 2vmin; }
.td-nombre { font-size: 17vmin; font-weight: 800; line-height: 1; letter-spacing: -.02em;
             background: linear-gradient(180deg, #FFFFFF, #9CC8DB); -webkit-background-clip: text;
             background-clip: text; color: transparent; }
.td-sur { font-size: 3vmin; color: #8FA6B2; }
.td-jauge { height: 2.6vmin; border-radius: 999px; background: rgba(255,255,255,.08);
            overflow: hidden; margin: 2vmin auto 0; max-width: 70%; }
.td-jauge i { display: block; height: 100%; border-radius: 999px;
              background: linear-gradient(90deg, #2F8FB4, #4FBFA8); transition: width 1s var(--transition); }
.td-sous-jauge { margin-top: 1.2vmin; font-size: 2.2vmin; color: #8FA6B2; }

.td-tuiles { display: flex; justify-content: center; gap: 2vmin; }
.td-tuile { flex: 0 1 22vmin; text-align: center; padding: 1.6vmin; border-radius: 1.6vmin;
            background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.td-tuile b { display: block; font-size: 4vmin; line-height: 1.1; }
.td-tuile span { font-size: 1.7vmin; color: #8FA6B2; }

.td-tranches { display: flex; gap: 1.2vmin; }
.td-tranche { flex: 1; padding: 1.2vmin 1.4vmin; border-radius: 1.4vmin; position: relative;
              background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.td-tranche.encours { border-color: #4FBFA8; background: rgba(79,191,168,.09); }
.td-tranche-h { display: block; font-size: 1.7vmin; color: #8FA6B2; white-space: nowrap; }
.td-tranche-n { display: block; font-size: 2.8vmin; font-weight: 700; margin: .3vmin 0; }
.td-tranche-jauge { display: block; height: .8vmin; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; }
.td-tranche-jauge i { display: block; height: 100%; background: #4FBFA8; border-radius: 999px; transition: width 1s var(--transition); }
.td-encours { position: absolute; top: -1.1vmin; right: 1vmin; font-size: 1.4vmin; font-weight: 700;
              color: #06231C; background: #4FBFA8; border-radius: 999px; padding: .15vmin 1vmin; }

.td-passages { margin-top: auto; }
.td-passages-titre { font-size: 1.7vmin; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                     color: #56707D; margin-bottom: .8vmin; }
.td-passage { display: flex; gap: 1.6vmin; align-items: baseline; font-size: 2.2vmin;
              padding: .5vmin 0; border-top: 1px solid rgba(255,255,255,.06); }
.td-passage .mono { color: #8FA6B2; font-size: 1.9vmin; }
.td-passage span:last-child { margin-left: auto; color: #8FA6B2; font-size: 1.9vmin; }

/* Le trait de l'horloge sur la jauge du créneau en cours : la barre, ce sont les paniers ; le
   trait, le temps. Barre derrière le trait — on est en retard, et on le voit se rattraper. */
.creneau-jauge { position: relative; overflow: visible; }
.creneau-tic { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px;
               background: var(--encre); opacity: .75; transition: left .5s var(--transition); }
.creneau.encours .creneau-jauge i { transition: width .5s var(--transition); }
.creneau.encours.retard { border-color: var(--attention); }
.creneau.encours.retard .creneau-jauge i { background: var(--attention); }
.creneau.encours.retard .creneau-sous { color: var(--attention-encre); font-weight: 650; }
.creneau.encours.retard { animation-name: creneau-souffle-retard; }
@keyframes creneau-souffle-retard {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 178, 25, 0); }
  50% { box-shadow: 0 0 0 4px rgba(250, 178, 25, .22); }
}

.td-tranche-jauge { position: relative; overflow: visible; }
.td-tic { position: absolute; top: -.5vmin; bottom: -.5vmin; width: .35vmin; border-radius: .2vmin;
          background: #EAF2F6; opacity: .8; }
.td-tranche.retard { border-color: #D8A64A; background: rgba(216, 166, 74, .10); }
.td-tranche.retard .td-tranche-jauge i { background: #D8A64A; }
.td-tranche.retard .td-encours { background: #D8A64A; color: #2A2113; }

/* Le résultat d'un appel : trois petits boutons sous les moyens de joindre. La ligne entière
   change d'habit selon la réponse — vert on a trouvé, éteint on a essuyé un non. */
.appel-actions { display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; }
.appel-joindre { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.appel-notation { display: flex; gap: .25rem; }
.appel-resultat { display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-size: .74rem;
                  font-weight: 650; padding: .22rem .55rem; border-radius: 999px; cursor: pointer;
                  border: 1px solid var(--bord); background: var(--surface); color: var(--encre-2);
                  transition: border-color .15s, background .15s; }
.appel-resultat svg { width: 12px; height: 12px; }
.appel-resultat:hover { border-color: var(--bord-2); }
.appel-resultat.r-vient.actif { background: var(--ok-doux); color: var(--ok-encre); border-color: var(--ok); }
.appel-resultat.r-sans_reponse.actif { background: var(--attention-doux); color: var(--attention-encre); border-color: var(--attention); }
.appel-resultat.r-non.actif { background: var(--surface-3); color: var(--encre); border-color: var(--bord-2); }

.appel-ligne.appel-vient { box-shadow: inset 3px 0 0 var(--ok); background: var(--ok-doux); }
.appel-ligne.appel-non { opacity: .55; }
.appel-ligne.appel-non:hover { opacity: 1; }
.appel-ligne.appel-sans_reponse, .appel-ligne.appel-message { box-shadow: inset 3px 0 0 var(--attention); }

/* ---------------------------------------------------------------- livraisons : ordre, direct, chargement */

/* Le rang se choisit dans un sélecteur à la place du numéro ; la carte se glisse par lui. */
.arret-rang { width: 2.4rem; height: 2.4rem; padding: 0; text-align: center; font-weight: 700;
              border-radius: 50%; border: 1px solid var(--bord-2); background: var(--surface-3);
              color: var(--encre); font: inherit; font-weight: 700; cursor: grab; flex: none;
              -webkit-appearance: none; appearance: none; text-align-last: center; }
.arret[draggable="true"] { cursor: grab; }
.arret.glisse { opacity: .45; }
.arret.cible { box-shadow: inset 0 3px 0 var(--accent); }
.arret.direct-livre { box-shadow: inset 3px 0 0 var(--ok); }
.arret.direct-rate { box-shadow: inset 3px 0 0 var(--attention); }

@media print {
  /* La feuille imprimée ne sert pas à servir : ni bouton, ni sélecteur de rang. */
  .arret .bouton, .arret .arret-rang, .arret select { display: none !important; }
  .arret.glisse { opacity: 1; }
}

/* Le déplacement se voit : une poignée franche, une cible qui s'ouvre, et la carte qui arrive
   à sa nouvelle place en se signalant — puis se calme. */
.arret-poignee { display: flex; flex-direction: column; align-items: center; gap: .25rem; flex: none; }
.poignee { color: var(--encre-3); cursor: grab; display: inline-flex; padding: .1rem; border-radius: 6px; }
.poignee svg { width: 18px; height: 18px; }
.arret.mobile:hover .poignee { color: var(--accent); background: var(--accent-doux); }
.arret.mobile { transition: transform .15s, box-shadow .15s; }
.arret.cible { box-shadow: inset 0 4px 0 var(--accent); transform: translateY(3px); }
.arret.glisse { opacity: .35; transform: scale(.98); }
.arret.deplace { animation: arret-arrive .9s var(--transition) both; }
@keyframes arret-arrive {
  0% { transform: translateX(-14px); background: var(--accent-doux); box-shadow: 0 0 0 3px var(--accent-doux); }
  60% { transform: none; background: var(--accent-doux); box-shadow: 0 0 0 3px var(--accent-doux); }
  100% { transform: none; background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .arret.deplace { animation: none; background: var(--accent-doux); } }
@media print { .poignee { display: none !important; } }

/* ---------------------------------------------------------------- le parc roulant */
.parc { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; }
.vehicule { border: 1px solid var(--bord); border-radius: 12px; padding: .9rem 1rem; background: var(--surface);
            display: flex; flex-direction: column; gap: .4rem; }
.vehicule.retard { box-shadow: inset 4px 0 0 var(--critique); }
.vehicule.bientot { box-shadow: inset 4px 0 0 var(--attention); }
.vehicule.eteint { opacity: .55; }
.vehicule-tete { display: flex; align-items: center; gap: .6rem; }
.vehicule-tete > svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.vehicule-tete b { font-size: 1.05rem; }
.vehicule-compteur { font-variant-numeric: tabular-nums; }
.vehicule-compteur b { font-size: 1.4rem; }
.vehicule-prochain { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .92rem; }
.vehicule.indisponible { border-color: color-mix(in srgb, var(--critique) 45%, var(--bord)); }
.vehicule-echeances { display: flex; gap: .35rem; flex-wrap: wrap; margin: .1rem 0 .4rem; }
.vehicule-signalements { margin: .1rem 0 .4rem; }
.vehicule-signalements svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--attention); }
.vehicule .lien-dossier { font-size: 1rem; }
.ronde-points { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .4rem; }
.onglets-parc { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.segments-camions button { position: relative; }
.segments-camions svg { width: 15px; height: 15px; margin-right: .25rem; vertical-align: -3px; color: var(--encre-3); }
.segments-camions button[aria-pressed="true"] svg { color: var(--accent); }
/* Trois niveaux, trois couleurs : rouge = il ne sort pas, ambre = quelque chose attend,
   bleu = tout est en ordre, il passe au garage bientôt. Un point rouge partout ne dit rien. */
.onglet-point { position: absolute; top: 4px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--critique); }
.onglet-point.critique { background: var(--critique); }
.onglet-point.attention { background: var(--attention); }
.onglet-point.info { background: var(--ok); }
.onglet-point.papier { background: var(--papier); }
.onglet-papier { position: absolute; top: 2px; right: 5px; display: inline-flex; align-items: center; gap: 3px; color: var(--papier); }
.onglet-papier svg { width: 12px; height: 12px; }
.onglet-papier .onglet-point { position: static; width: 7px; height: 7px; }
.etiquette.papier { background: var(--papier-doux); color: var(--papier); }
.prochain-ligne { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.prochain-ligne .barre-boutons { margin-left: auto; }
.segments-camions button.onglet-alerte.critique[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--critique); }
.segments-camions button.onglet-alerte.attention[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--attention); }
.segments-camions button[aria-pressed="true"].onglet-alerte { box-shadow: inset 0 0 0 1px var(--critique); }
/* La grille du planning : la colonne du véhicule reste en place quand on défile vers décembre. */
.plan-grille th:first-child, .plan-grille td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.plan-total td:first-child { background: var(--surface); }
.flotte-grille th:first-child, .flotte-grille td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); }
@media print {
  /* La barre d'onglets n'a rien à faire sur une feuille remise au garage ou au conseil. */
  .onglets-parc, .filtres .segments { display: none !important; }
  /* Le planning tient en paysage — mais pour lui seul : une règle @page ferait basculer toute
     l'application, bon de travail et feuille du livreur compris. */
  .plan-grille { font-size: 8px; }
  .plan-visite { font-size: 1em; padding: .2em .3em; }
  .plan-visite b { font-size: 1em; } .plan-visite small { font-size: .9em; }
  .plan-visite, .flotte-occ { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.onglet-deux { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.onglet-deux small { font-size: .68rem; color: var(--encre-3); font-weight: 400; }
.segments-camions button[aria-pressed="true"] .onglet-deux small { color: var(--encre-2); }
.segments-camions button { padding-top: .25rem; padding-bottom: .25rem; }
.detail-ligne .segments button small { display: block; font-size: .66rem; font-weight: 400; color: var(--encre-3); }
.detail-ligne .segments button[aria-pressed="true"] small { color: var(--encre-2); }
/* La flotte : qui a quel camion, quand */
.dispo-entete { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.dispo-entete input { max-width: 11rem; }
.dispo-listes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; }
.dispo-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; }
.dispo-chip { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .85rem; padding: .3rem .6rem;
  border-radius: 999px; border: 1px solid var(--bord); background: var(--surface-2); color: var(--encre); }
.dispo-chip svg { width: 15px; height: 15px; }
.dispo-chip small { color: var(--encre-3); font-size: .72rem; }
.dispo-chip.libre { border-color: color-mix(in srgb, var(--ok) 45%, var(--bord)); background: var(--ok-doux); cursor: pointer; }
.dispo-chip.libre:hover { border-color: var(--ok); }
.dispo-chip.occupe { opacity: .85; }
.flotte-grille { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.flotte-grille th, .flotte-grille td { padding: 0; border: 0; }
.flotte-nom { width: 11rem; min-width: 11rem; padding: .3rem .5rem !important; text-align: left; vertical-align: middle; }
.flotte-nom .meta { font-size: .7rem; }
.flotte-jour { width: 1.85rem; text-align: center; padding: .2rem 0 !important; color: var(--encre-3); border-bottom: 1px solid var(--bord); }
.flotte-jour small { display: block; font-size: .6rem; text-transform: uppercase; }
.flotte-jour b { font-size: .72rem; font-variant-numeric: tabular-nums; }
.flotte-jour.fds { background: var(--surface-3); }
.flotte-jour.ouvert b { color: var(--accent); }
.flotte-jour.auj { background: var(--accent-doux); border-radius: 6px 6px 0 0; }
.flotte-case { height: 2.1rem; border-bottom: 1px solid var(--bord); border-right: 1px solid var(--surface-3); }
.flotte-case.fds { background: var(--surface-3); }
.flotte-libre { display: block; width: 100%; height: 1.9rem; border: 0; background: none; color: transparent; cursor: pointer; font-size: .9rem; }
.flotte-libre:hover { color: var(--accent); background: var(--accent-doux); border-radius: 5px; }
.flotte-occ { display: flex; align-items: center; width: 100%; height: 1.5rem; border: 0; cursor: pointer; font-size: .62rem; font-weight: 700;
  color: var(--accent-encre); background: var(--accent); letter-spacing: .01em; overflow: hidden; padding: 0 .25rem; }
.flotte-occ span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flotte-occ.debut { border-radius: 5px 0 0 5px; padding-left: .2rem; text-align: left; }
.flotte-occ.fin { border-radius: 0 5px 5px 0; }
.flotte-occ.debut.fin { border-radius: 5px; }
.flotte-occ.tournee { background: var(--serie-2); }
.flotte-occ.garage { background: var(--attention); color: #3a2c00; }
.flotte-occ.panne { background: var(--critique); }
.flotte-legende { display: flex; gap: .7rem; flex-wrap: wrap; font-size: .78rem; color: var(--encre-2); }
.flotte-legende span { display: inline-flex; align-items: center; gap: .3rem; }
.flotte-pastille { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--accent); }
.flotte-pastille.tournee { background: var(--serie-2); } .flotte-pastille.garage { background: var(--attention); } .flotte-pastille.panne { background: var(--critique); }
@media print { .flotte-libre, .dispo-chip.libre small { display: none !important; } .flotte-occ { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.plan-resume { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
/* Le planning : une grille camions × mois */
.plan-grille { table-layout: fixed; min-width: 1100px; }
.plan-grille th { font-size: .68rem; text-align: center; }
.plan-grille th:first-child, .plan-grille td:first-child { width: 9.5rem; text-align: left; }
.plan-case { vertical-align: top; padding: .3rem .25rem; border-left: 1px solid var(--bord); }
.plan-vehicule .meta { font-size: .72rem; }
.plan-visite { display: block; width: 100%; text-align: left; font: inherit; font-size: .7rem; line-height: 1.2; padding: .25rem .35rem; margin-bottom: .25rem;
  border: 1px solid var(--bord-2); border-left-width: 4px; border-radius: 6px; background: var(--surface-2); color: var(--encre); cursor: pointer; }
.plan-visite b { display: block; font-size: .72rem; }
.plan-visite span { display: block; color: var(--encre-2); }
.plan-visite small { display: block; color: var(--encre-3); font-size: .64rem; line-height: 1.15; overflow: hidden; max-height: 2.3em; }
.plan-visite.proposee { border-style: dashed; background: var(--surface); }
.plan-visite.retard { background: var(--critique-doux); color: var(--critique-encre); }
.plan-visite:hover { border-color: var(--accent); }
.plan-total td { border-top: 2px solid var(--bord-2); vertical-align: bottom; text-align: center; }
.plan-mois b { display: block; font-size: .78rem; font-variant-numeric: tabular-nums; }
.plan-mois .meta { font-size: .66rem; }
.plan-mois.depasse b { color: var(--critique-encre); }
.plan-barre { height: 44px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: .2rem; }
.plan-barre i { display: block; width: 60%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .8; }
.plan-mois.depasse .plan-barre i { background: var(--critique); }
@media print {
  .plan-grille { min-width: 0; font-size: 9px; }
  .plan-visite { border-color: #666; break-inside: avoid; }
  .plan-visite.proposee { border-style: dashed; }
  .plan-barre i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.vehicule-plan { margin: .1rem 0 .3rem; } .vehicule-plan svg { width: 14px; height: 14px; vertical-align: -2px; }
tr.eteint td { opacity: .5; }
.cal-puce.lot { box-shadow: inset 3px 0 0 var(--accent); }
.cal-puce.estime { border-style: dashed; border-width: 1px; border-color: var(--bord-2); opacity: .85; }
.bon-travail h3 { font-size: .95rem; margin: .4rem 0 .2rem; }
.bon-consigne { margin-top: .9rem; padding: .6rem .8rem; border: 1px dashed var(--bord-2); border-radius: 8px; font-size: .9rem; }
.bon-signatures { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.4rem; font-size: .9rem; }
@media print { .bon-travail { font-size: 12px; } .bon-consigne { border-color: #666; } }
.ronde-etat { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; }
.fiche-vehicule-tete { display: flex; gap: .8rem; align-items: center; margin-bottom: .9rem; flex-wrap: wrap; }
.fiche-vehicule-tete > svg { width: 30px; height: 30px; color: var(--accent); flex: none; }
.fiche-vehicule-tete h2 { margin: 0; font-size: 1.35rem; }
.fiche-vehicule-tete select { max-width: 11rem; }
@media print { .fiche-vehicule-tete select, .fiche-vehicule .barre-boutons { display: none !important; } }

/* L'équipage d'une tournée : deux sélecteurs, une ligne. */
.equipage { display: grid; gap: .45rem; margin-bottom: .8rem; }
.equipage-bloc { display: grid; gap: .35rem; }
.equipage-bloc + .equipage-bloc { padding-top: .45rem; border-top: 1px solid var(--grille); }
.equipage-titre { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.equipage-titre small { color: var(--encre-3); font-size: .74rem; }
.equipage-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: center; }
.equipage-ligne select { min-width: 0; }
.equipage-choix { display: flex; gap: .3rem; align-items: center; min-width: 0; }
.equipage-choix select { flex: 1; }
.equipage-ronde { min-height: 0; }
.equipage-ronde:empty { display: none; }
/* « Aujourd'hui » : les tranches en simples cases (pas de liste à filtrer), la tranche finie en vert */
div.creneau { cursor: default; }
.creneau.fini .creneau-jauge i { background: var(--ok); }
.creneau.fini .creneau-nb { color: var(--ok-encre); }
/* L'équipage d'une tournée : une puce par personne, un sélecteur en pointillé pour ajouter. */
.equipage-equipiers { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .84rem; }
.equipage-equipiers .libelle { color: var(--encre-3); flex: none; }
.equipage-puces { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.equipier { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .3rem .16rem .6rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--bord); }
.equipier-retirer { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 0; background: transparent; color: var(--encre-3); cursor: pointer; padding: 0; }
.equipier-retirer:hover { background: var(--critique-doux); color: var(--critique-encre); }
.equipier-retirer svg { width: 12px; height: 12px; }
.equipier-ajout { font: inherit; font-size: .82rem; padding: .2rem .4rem; border-radius: 6px; border: 1px dashed var(--bord-2); background: transparent; color: var(--encre-2); max-width: 14rem; }
@media (max-width: 600px) { .equipage-ligne { grid-template-columns: 1fr; } }

/* Le calendrier d'entretien : le mois en grille, une couleur par véhicule, le détail au clic. */
.cal-entete { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 .7rem; flex-wrap: wrap; }
.cal-entete b { font-size: 1.05rem; min-width: 9rem; text-align: center; text-transform: capitalize; }
.cal-legende { display: flex; gap: .7rem; flex-wrap: wrap; font-size: .78rem; color: var(--encre-2); }
.cal-legende span { display: inline-flex; align-items: center; gap: .3rem; }
.cal-legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* minmax(0, 1fr) et non 1fr : sans cela, une case prend la largeur de son texte et les sept
   colonnes cessent d'être égales. */
.cal-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-jour-nom { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                color: var(--encre-3); padding: .2rem .4rem; }
.cal-case { min-width: 0; min-height: 5.2rem; border: 1px solid var(--bord); border-radius: 8px; padding: .3rem .35rem;
            background: var(--surface); display: flex; flex-direction: column; gap: .2rem; }
.cal-case.hors { border-color: transparent; background: transparent; }
.cal-case.cliquable { cursor: pointer; }
.cal-case.cliquable:hover { border-color: var(--accent); }
.cal-case.auj { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-case.auj .cal-num { background: var(--accent); color: var(--accent-encre); }
.cal-num { align-self: flex-end; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
           width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center;
           justify-content: center; color: var(--encre-2); }
.cal-puce { display: block; width: 100%; text-align: left; font: inherit; font-size: .72rem; line-height: 1.15;
            padding: .18rem .35rem; border: 0; border-left: 3px solid var(--bord-2); border-radius: 4px;
            background: var(--surface-3); color: var(--encre); cursor: pointer; }
.cal-puce b { display: block; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-puce span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--encre-2); }
.cal-puce:hover { background: var(--accent-doux); }
.cal-puce.retard { background: var(--critique-doux); color: var(--critique-encre); }
.cal-puce.retard span { color: var(--critique-encre); }
.cal-puce.fait { opacity: .6; text-decoration: line-through; }
.cal-plus { font-size: .7rem; color: var(--encre-3); }
/* Les détails sur la puce : quand, où, combien — et la carte complète au survol ou au focus. */
.cal-puce { position: relative; }
.cal-puce.detaillee { white-space: normal; padding: .25rem .4rem; }
/* Le texte reste DANS sa case : deux lignes au plus, coupées proprement. Sans cela, un long nom
   de garage déborde sur le jour voisin. */
.cal-puce.detaillee > b, .cal-puce.detaillee > span:not(.cal-survol) {
  white-space: normal; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cal-puce-detail { font-size: .66rem; line-height: 1.2; color: var(--encre-3); margin-top: .1rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; }
.cal-puce-detail > span { display: inline; }
.cal-puce-detail > span + span::before { content: ' · '; color: var(--encre-3); }
.cal-puce-detail > span.critique { color: var(--critique-encre); font-weight: 600; }
.cal-puce.retard .cal-puce-detail { color: var(--critique-encre); }
/* Un entretien déjà fait est de l'histoire : sa ligne de détail n'encombre pas le mois. */
.cal-puce.fait .cal-puce-detail { display: none; }
/* Ce dont le garage n'a pas encore entendu parler : un liseré et un combiné. */
.cal-puce.a-appeler { box-shadow: inset 0 0 0 1px var(--attention); }
.cal-puce.a-appeler b::after { content: ' ☎'; color: var(--attention); }
.cal-grille.detaillee .cal-case { min-height: 6.4rem; }
/* La carte au survol. La règle porte `.cal-puce` : sans cela, `.cal-puce span { display: block }`
   la bat en spécificité et toutes les cartes du mois restent ouvertes en même temps. */
.cal-puce .cal-survol { display: none; position: absolute; z-index: 30; left: 0; top: calc(100% + 4px);
  min-width: 15rem; max-width: 21rem; width: max-content;
  background: var(--surface); color: var(--encre); border: 1px solid var(--bord-2); border-radius: 10px; box-shadow: var(--ombre-2);
  padding: .55rem .7rem; font-size: .76rem; line-height: 1.35; white-space: normal; text-align: left;
  text-decoration: none; opacity: 1; }
.cal-puce .cal-survol > b { display: block; margin-bottom: .3rem; font-size: .8rem; white-space: normal; }
.cal-survol-ligne { display: grid; grid-template-columns: 5.2rem 1fr; gap: .4rem; }
.cal-survol-ligne i { font-style: normal; color: var(--encre-3); }
.cal-puce:hover .cal-survol, .cal-puce:focus-visible .cal-survol { display: block; }
/* Les deux dernières colonnes ouvrent leur carte vers la gauche, sinon elle sort de l'écran. */
.cal-case.fin-semaine-droite .cal-survol { left: auto; right: 0; }
.cal-puce.glisse .cal-survol, .cal-puce:active .cal-survol { display: none; }
@media print { .cal-survol { display: none !important; } .cal-puce.detaillee { border: 1px solid #999; } }
.cal-nav { display: inline-flex; align-items: center; gap: .3rem; }
.cal-retards { margin-bottom: 1rem; padding: .6rem .8rem .3rem; border: 1px solid color-mix(in srgb, var(--critique) 40%, var(--bord)); border-radius: 12px; background: color-mix(in srgb, var(--critique-doux) 55%, var(--surface)); }
.cal-retards .tranche-titre { border-bottom: 0; margin-bottom: .3rem; }
.cal-retards .tranche-titre > svg { width: 18px; height: 18px; color: var(--critique-encre); }
.saillant.cliquable { cursor: pointer; }
.saillant.cliquable:hover { background: var(--surface-3); }
.saillant.cliquable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media print { .cal-retards { border-color: #666; background: none; } .cal-retards .bouton { display: none !important; } }
.cal-entete .segments { margin-left: .3rem; }
.cal-entete .cal-legende { margin-left: auto; }
.cal-filtre { display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-size: .78rem; color: var(--encre-2);
  background: none; border: 1px solid transparent; border-radius: 999px; padding: .15rem .5rem; cursor: pointer; }
.cal-filtre:hover { border-color: var(--bord); }
.cal-filtre.actif { background: var(--surface-3); color: var(--encre); border-color: var(--bord); font-weight: 600; }
.cal-filtre.eteint { opacity: .45; }
.cal-filtre-nom { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.cal-filtre-nom small { font-size: .68rem; color: var(--encre-3); }
.cal-bande { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--encre-2); margin: 0 0 .6rem; padding: .45rem .7rem; background: var(--surface-2); border-radius: 9px; }
.cal-bande b { color: var(--encre); font-variant-numeric: tabular-nums; }
.cal-case.cible { border-color: var(--accent); background: var(--accent-doux); box-shadow: inset 0 0 0 2px var(--accent); }
.cal-puce.glisse { opacity: .4; }
.cal-puce[draggable="true"] { cursor: grab; }
.cal-agenda { display: flex; flex-direction: column; gap: .8rem; }
.cal-agenda-jour { border-left: 3px solid var(--bord); padding-left: .8rem; }
.cal-agenda-jour.auj { border-left-color: var(--accent); }
.cal-agenda-date { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; font-size: .88rem; }
.vehicule-budget { margin-top: .5rem; }
.vehicule-budget .jauge-texte { display: none; }
.vehicule-prochain .bouton { margin-left: auto; }
@media print {
  .cal-entete .segments, .cal-bande .bouton, .cal-entete .cal-nav .bouton { display: none !important; }
  .cal-case { min-height: 4rem; break-inside: avoid; }
  .cal-puce { border: 1px solid #999; }
}
@media (max-width: 720px) {
  .cal-case { min-height: 3.6rem; padding: .2rem; }
  .cal-puce b { font-size: .62rem; } .cal-puce span { display: none; }
  .cal-legende { display: none; }
}

/* Les paniers de Noël : le bloc glissé dans « Servir », et l'écran de la campagne. */
.bloc-noel { border: 1px solid var(--bord); border-radius: 10px; padding: .7rem .9rem .9rem; margin: 0; }
.bloc-noel legend { display: flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent); padding: 0 .3rem; }
.bloc-noel legend svg { width: 15px; height: 15px; }
.noel-enfants { display: grid; gap: .4rem; }
.noel-enfant { display: grid; grid-template-columns: 1fr 8.5rem 8rem auto; gap: .5rem; align-items: end; }
.noel-enfant .champ { margin: 0; }
.noel-enfant > button { margin-bottom: .35rem; }
@media (max-width: 700px) { .noel-enfant { grid-template-columns: 1fr 1fr; } }
/* La feuille de magasinage : des cases qui se lisent de loin, à l'écran comme sur papier. */
.noel-grille { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.noel-grille th, .noel-grille td { padding: .5rem .7rem; border-bottom: 1px solid var(--grille); text-align: right; }
.noel-grille th:first-child, .noel-grille td:first-child { text-align: left; font-weight: 650; }
.noel-grille thead th { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); }
.noel-grille tfoot td { font-weight: 700; border-top: 2px solid var(--bord-2); border-bottom: 0; }
.noel-grille td.zero { color: var(--encre-3); }
.noel-remise { display: grid; gap: .35rem; }
.noel-ligne { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center;
  padding: .45rem .6rem; border-radius: 8px; background: var(--surface-2); }
.noel-ligne.remis { background: var(--ok-doux); }
.noel-ligne input[type=checkbox] { width: 20px; height: 20px; }
.noel-jauge { height: 8px; border-radius: 4px; background: var(--bord); overflow: hidden; }
.noel-jauge i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .6s cubic-bezier(.2,.7,.3,1); }
.etiquettes { display: flex; gap: .25rem; flex-wrap: wrap; }
/* La jauge d'une ligne d'inventaire : la barre pour le coup d'œil, le nombre pour la décision. */
/* Ce qu'on met à la place : une ligne par régime, sous le nom de l'article. Assez discret pour
   ne pas alourdir le tableau, assez lisible pour qu'on aille le remplir. */
.remplacements { display: flex; flex-direction: column; gap: .12rem; margin-top: .25rem; }
.remplacement { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--encre-2); }
.remplacement .r-regime { color: var(--encre-3); }
.remplacement .r-manque { color: var(--attention-encre); font-size: .76rem; }
.remplacement.a-nommer .lien-dossier { color: var(--attention-encre); font-style: italic; }

/* La remise : deux coches à gauche (montée, remise), le ménage au milieu, l'heure à droite. */
.noel-ligne { grid-template-columns: auto 1fr auto; }
.noel-coches { display: grid; gap: .25rem; }
.noel-coche { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--encre-3); cursor: pointer; }
.noel-coche.faite { color: var(--ok-encre); }
.noel-coche input { width: 1.15rem; height: 1.15rem; }
.noel-droite { display: grid; gap: .25rem; justify-items: end; }
.noel-rdv { font-size: .82rem; }
.noel-ligne.injoignable { border-left: 3px solid var(--attention); }
.noel-tel { font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.noel-choix-creneau { max-width: 24rem; }

/* Les fiches de panier : une carte par boîte, deux par page sur papier. */
.fiches-noel { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .8rem; }
.fiche-noel { border: 1px solid var(--bord); border-radius: 8px; padding: .55rem .7rem; break-inside: avoid; display: grid; gap: .4rem; }
.fiche-noel-tete { display: flex; align-items: center; gap: .6rem; }
.fiche-noel-tete > div { flex: 1; min-width: 0; }
.fiche-noel-num { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.fiche-noel-rdv { font-size: .8rem; font-weight: 650; text-align: right; }
.fiche-noel-corps { font-size: .88rem; display: grid; gap: .2rem; }
.fiche-noel-regime { font-weight: 700; }
.fiche-noel-rempl { margin: 0; padding-left: 1.1rem; }
.fiche-noel-cases { display: flex; gap: 1.2rem; font-size: .9rem; border-top: 1px dashed var(--bord); padding-top: .35rem; }

/* Les étiquettes des cadeaux : trois par ligne, à découper. */
.etiquettes-cadeaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .8rem; }
.etiquette-cadeau { border: 1px dashed var(--bord); border-radius: 6px; padding: .5rem .6rem; break-inside: avoid; font-size: .9rem; }
.etiquette-cadeau-num { font-size: .78rem; color: var(--encre-3); }
.etiquette-cadeau b { font-size: 1.1rem; }
@media print {
  .fiche-noel, .etiquette-cadeau { border-color: #666; }
  .fiche-noel-regime { border: 1px solid #000; padding: .1rem .3rem; }
}

/* Les événements : trois cartes côte à côte, chacune avec son état et sa porte. */
/* Les présents du jour : des cartes assez grandes pour qu'on reconnaisse un visage de loin,
   debout, à l'entrée — c'est à ça que sert la photo. */
.presents { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: .9rem; margin-bottom: .6rem; }
.present { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.2rem; border: 1px solid var(--bord); border-radius: 16px; background: var(--surface-2); }
.present .avatar { width: 92px; height: 92px; font-size: 1.8rem; }
.present b { font-size: 1.12rem; }
/* La carte est un lien : elle se comporte comme tel sans en avoir l'air. */
a.present { text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
a.present:hover { border-color: var(--accent); transform: translateY(-1px); }

/* Le visage en tête de la fiche du bénévole. */
.fiche-visage { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.1rem; }
.fiche-visage .avatar { width: 128px; height: 128px; font-size: 2.2rem; border-radius: 18px; }
.fiche-visage b { font-size: 1.25rem; }
.present.a-signer { border-color: var(--attention); }
/* Attendus vs présents : l'état se lit au bord de la carte — vert là, rouge manque, pointillé imprévu. */
.suivi-groupe { margin-bottom: .9rem; }
.suivi-groupe h4 { margin: .2rem 0 .5rem; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-3); }
.present.la { border-color: var(--ok); }
.present.manque { border-color: var(--critique); background: var(--critique-doux); }
.present.plus-tard { opacity: .8; }
.present.non-prevu { border-style: dashed; }
.present .appel-numero { margin-top: .3rem; }
.choix-annee { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; }
.choix-annee select { font: inherit; padding: .25rem .5rem; border-radius: 8px; border: 1px solid var(--bord); background: var(--surface-2); color: var(--encre); }
.ev-tete { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.ev-icone { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.ev-icone svg { width: 22px; height: 22px; }
.ev-icones { display: flex; gap: .4rem; flex-wrap: wrap; }
.ev-choix-icone { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--bord); background: var(--surface); color: var(--encre); display: grid; place-items: center; cursor: pointer; }
.ev-choix-icone[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.evenements { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.tuiles-serrees .tuile { padding: .6rem .8rem; }

/* Le billet de rendez-vous : un quart de page, lisible de loin, qu'on tend à la caisse. */
.billets-noel { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.billets-noel.un-seul { grid-template-columns: minmax(0, 24rem); }
.billet-noel { border: 2px dashed var(--bord-2); border-radius: 10px; padding: .8rem .9rem; display: grid; gap: .3rem; break-inside: avoid; }
.billet-tete { display: flex; align-items: center; gap: .5rem; }
.billet-tete img { width: 30px; height: 30px; }
.billet-nom { font-size: 1.2rem; font-weight: 750; margin-top: .2rem; }
.billet-rdv { display: grid; margin: .3rem 0; }
.billet-rdv b { font-size: 1.35rem; }
.billet-pied { font-size: .8rem; color: var(--encre-3); border-top: 1px solid var(--bord); padding-top: .3rem; margin-top: .2rem; }
.remplacement .r-source { font-size: .72rem; color: var(--encre-3); font-style: italic; }
.remplacement .bouton.accepter { padding: .1rem .5rem; font-size: .76rem; }
@media print {
  .billet-noel { border-color: #333; }
  .billets-noel { grid-template-columns: 1fr 1fr; }
}

/* Choisir des régimes : des étiquettes qu'on touche, pas des cases à cocher en colonne. */
.etiquette-choix { border: 1px solid var(--bord); background: var(--surface); color: var(--encre);
  border-radius: 999px; padding: .28rem .7rem; font-size: .86rem; cursor: pointer; }
.etiquette-choix:hover { border-color: var(--accent); }
.etiquette-choix[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pt-logo { cursor: pointer; }
.pt-deja { text-align: center; opacity: .62; font-size: 1.05rem; margin: 1.4rem 0 .4rem; }
.inv-jauge { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
.inv-jauge .noel-jauge { width: 54px; flex: none; }
td.nombre.alerte .inv-jauge span { color: var(--critique-encre); font-weight: 600; }
@media print { .noel-grille th, .noel-grille td { border-bottom-color: #ccc; } }
/* La page de la campagne de Noël */
.noel-tete { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.noel-tete > div:first-child { flex: 1; min-width: 220px; }
.noel-chiffre { font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.noel-chiffre span { font-size: 1.1rem; font-weight: 500; color: var(--encre-3); }
.noel-phase { display: grid; gap: .35rem; max-width: 26rem; }
.noel-apercu { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; margin: .5rem 0 0; }
.noel-resume { display: flex; gap: .4rem; align-items: center; font-size: .88rem; }
.noel-resume svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.noel-resume span span { color: var(--encre-3); }
/* Le sexe en trois boutons : c'est le geste qu'on répète le plus. */
.champ-sexe { margin: 0; }
.segments-sexe button { padding: .34rem .55rem; font-size: .82rem; }
/* Le résumé de l'inscription de Noël : on le relit au ménage, et on clique dessus pour corriger. */
button.noel-resume { display: flex; gap: .5rem; align-items: flex-start; width: 100%; text-align: left;
  font: inherit; font-size: .88rem; cursor: pointer; margin: .5rem 0 0; padding: .5rem .7rem;
  border: 1px dashed var(--bord-2); border-radius: 8px; background: var(--surface-2); color: var(--encre); }
button.noel-resume:hover { border-color: var(--accent); border-style: solid; }
button.noel-resume.ouvert { border-style: solid; border-color: var(--accent); }
button.noel-resume > svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: .1rem; }
.noel-resume-texte { flex: 1; min-width: 0; }
.noel-liste-enfants { color: var(--encre-2); }
.noel-modifier { flex: none; color: var(--accent); font-weight: 650; font-size: .82rem; }
button.noel-resume.ouvert .noel-modifier::after { content: ' ▾'; }
.segments-noel { margin: .2rem 0 .4rem; }
.segments-noel button[data-v="refuse"][aria-pressed="true"] { background: var(--surface-3); color: var(--encre-2); }
/* Le journal : ce que chaque trace a fait, et par où revenir en arrière. */
.journal-pied { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-top: .2rem; font-size: .78rem; }
.journal-pied > span { font-family: ui-monospace, Menlo, monospace; color: var(--encre-3); }
.journal-ligne.genre-suppression { box-shadow: inset 3px 0 0 var(--critique); }
.journal-ligne.genre-lourd { box-shadow: inset 3px 0 0 var(--attention); }
.journal-ligne.genre-creation { box-shadow: inset 3px 0 0 var(--ok); }
.journal-archives { display: grid; gap: .4rem; }
.journal-archive { display: grid; grid-template-columns: 1fr auto auto; gap: .7rem; align-items: center;
  padding: .45rem .6rem; border-radius: 8px; background: var(--surface-2); font-size: .88rem; }

/* ---------------------------------------------------------------- la pointeuse (tablette)
   Un appareil posé sur une table, touché du doigt, debout, en manteau : tout est plus grand
   qu'ailleurs, et rien ne demande de viser. */
.pointeuse { position: fixed; inset: 0; z-index: 200; background: var(--page); color: var(--encre);
  overflow-y: auto; padding: 1.2rem 1.4rem 3rem; display: flex; flex-direction: column; gap: .9rem; }
/* Le cadre d'iPad : la pointeuse à la taille d'une tablette 10", bordure noire, coins ronds,
   posée sur un fond sombre. Le fond est un pseudo-élément fixé à la fenêtre — pas de transform
   sur le cadre, sinon il deviendrait le repère du fond. */
/* Un iPad 11 po, en paysage : écran de 1180 × 820 points, bords fins et égaux, coins d'écran
   arrondis, liseré clair pour que le cadre se détache du fond. */
.pointeuse.ipad { inset: 0; margin: auto; width: 1180px; height: 820px; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px);
  box-sizing: content-box; border: 18px solid #101214; border-radius: 34px;
  box-shadow: 0 0 0 1.5px #5a5f66, 0 0 0 3px #2b2e33, 0 36px 90px rgba(0,0,0,.6);
  padding: 1rem 1.2rem 2.4rem; background: #f3f7f9; color: #14262e; }
.pointeuse.ipad { clip-path: inset(0 round 34px); }
.pt-fond { background: radial-gradient(ellipse at 50% 35%, #565c64 0%, #2c3136 60%, #1b1e22 100%); }
.pt-fond { position: fixed; inset: 0; z-index: 199;
  background: radial-gradient(ellipse at 50% 40%, #3a4148 0%, #1c2025 70%, #121417 100%); }
.pointeuse.ipad .pt-haut h1 { font-size: 1.4rem; }
.pt-haut { display: flex; gap: 1rem; align-items: center; }
.pt-haut img { width: 52px; height: 52px; border-radius: 12px; }
.pt-haut h1 { margin: 0; font-size: 1.6rem; }
.pt-jour { color: var(--encre-3); font-size: 1rem; }
.pt-fermer { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bord);
  background: var(--surface); color: var(--encre-3); cursor: pointer; }
.pt-fermer svg { width: 20px; height: 20px; }
.pt-recherche { width: 100%; font: inherit; font-size: 1.3rem; padding: .8rem 1rem; border-radius: 12px;
  border: 2px solid var(--bord); background: var(--surface); color: var(--encre); }
.pt-recherche:focus { outline: none; border-color: var(--accent); }
.pt-groupe { display: flex; gap: .6rem; align-items: center; color: var(--encre-3); font-size: .9rem;
  text-transform: uppercase; letter-spacing: .06em; margin-top: .4rem; }
.pt-groupe .trait { flex: 1; height: 1px; background: var(--grille); }
.pt-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }
.pt-benevole { display: flex; gap: .7rem; align-items: center; text-align: left; font: inherit;
  padding: .8rem .9rem; border-radius: 14px; border: 1px solid var(--bord); background: var(--surface);
  color: var(--encre); cursor: pointer; min-height: 68px; }
.pt-benevole:hover, .pt-benevole:focus-visible { border-color: var(--accent); outline: none; }
.pt-benevole.inscrit { background: var(--ok-doux); border-color: var(--ok); }
.pt-benevole.inscrit > svg:last-child { width: 22px; height: 22px; color: var(--ok); margin-left: auto; flex: none; }
.pt-nom { min-width: 0; flex: 1; }
.pt-nom b { display: block; font-size: 1.05rem; }
.pt-choix { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center;
  margin: auto; max-width: 640px; padding: 2rem 0; }
.pt-choix h1 { margin: .3rem 0 0; font-size: 2rem; }
.pt-sous { color: var(--encre-2); font-size: 1.1rem; margin: 0 0 .6rem; }
.pt-retour { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; font: inherit;
  background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 1rem; }
.pt-moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; width: 100%; }
.pt-moment { font: inherit; font-size: 1.25rem; font-weight: 650; padding: 1.6rem .8rem; border-radius: 16px;
  border: 2px solid var(--bord); background: var(--surface); color: var(--encre); cursor: pointer; }
.pt-moment:hover { border-color: var(--accent); }
.pt-moment.actif { background: var(--ok-doux); border-color: var(--ok); color: var(--ok-encre); }
.pt-merci { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  text-align: center; margin: auto; }
.pt-merci > svg { width: 90px; height: 90px; color: var(--ok); }
.pt-merci.retire > svg { color: var(--encre-3); }
.pt-merci h1 { margin: 0; font-size: 2.6rem; }
.pt-merci p { font-size: 1.2rem; color: var(--encre-2); margin: 0 0 1rem; }
.pt-vide { margin: auto; color: var(--encre-3); font-size: 1.1rem; }
@media (max-width: 600px) { .pt-moments { grid-template-columns: 1fr; } .pt-haut h1 { font-size: 1.2rem; } }
.pt-panier { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px;
  background: var(--ok-doux); color: var(--ok-encre); font-weight: 650; font-size: 1.05rem; }
.pt-panier svg { width: 20px; height: 20px; }
.pt-pastille-panier { display: inline-flex; color: var(--ok); margin-left: auto; }
.presence-confirm { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; flex-wrap: wrap; }
.presence-confirm .meta { font-weight: 600; color: var(--encre); }
.pastille-panier { display: inline-flex; vertical-align: middle; color: var(--ok); margin-left: .35rem; }
.pastille-panier svg { width: 16px; height: 16px; }
.pt-pastille-panier svg { width: 18px; height: 18px; }
.pt-benevole.inscrit > .pt-pastille-panier + svg { margin-left: .3rem; }
/* La signature du registre — le geste que la CNESST demande de pouvoir montrer. */
.pt-signature h1 { font-size: 1.7rem; }
.pt-toile { width: 100%; max-width: 1100px; height: 380px; border: 2px dashed var(--bord-2);
  border-radius: 16px; background: var(--surface); touch-action: none; cursor: crosshair; }
.pt-signature-boutons { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.pt-pastille-signer { display: inline-flex; color: var(--attention); margin-left: auto; }
.pt-pastille-signer svg { width: 18px; height: 18px; }
.pt-pastille-signer + .pt-pastille-panier { margin-left: .3rem; }
/* Le registre signé, à imprimer pour la CNESST */
.registre-ligne { display: grid; grid-template-columns: 1fr 8rem 6rem 12rem; gap: .8rem; align-items: center;
  padding: .5rem .2rem; border-bottom: 1px solid var(--grille); font-size: .9rem; }
.registre-ligne img { max-height: 46px; max-width: 100%; }
.registre-entete { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); }
@media print { .registre-ligne { break-inside: avoid; } }
.lien-tablette { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; }

/* La photo prise à la tablette : le bouton tombe sous les demi-journées, à portée de pouce. */
.pt-photo { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: 1.2rem; }
.pt-photo .bouton { min-width: 16rem; }
/* La photo est déjà là : les deux liens s'effacent sur une ligne, sans rien réclamer. */
.pt-photo.discret { flex-direction: row; justify-content: center; gap: 1.4rem; margin-top: .9rem; opacity: .75; }
.pt-plus-tard { background: none; border: 0; color: var(--encre-3); font: inherit; font-size: .95rem;
  text-decoration: underline; cursor: pointer; }

/* `.bouton { display: inline-flex }` est plus fort que le `display:none` que le navigateur
   attache à [hidden] : sans cette ligne, cacher un bouton en JS ne le cache pas. */
[hidden] { display: none !important; }

/* ---- le planning des quarts : qui est attendu, et où il manque du monde --------------------
   Trois états, trois couleurs — la même sémantique que partout ailleurs dans l'application :
   vert quand c'est couvert, ambre quand il manque quelqu'un, rouge quand personne n'est venu
   s'inscrire. La couleur porte le bord gauche : lisible d'un coup d'œil, et pas un aplat qui
   noierait le texte. */
.planning-apercu { display: grid; gap: .55rem; }
.planning-jour { display: grid; grid-template-columns: 150px 1fr; gap: .8rem; align-items: start;
  padding: .5rem 0; border-bottom: 1px solid var(--grille); }
.planning-jour:last-child { border-bottom: none; }
.planning-date b { display: block; }
.planning-quart { padding: .35rem 0 .45rem .6rem; border-left: 3px solid var(--ok);
  font-size: .88rem; }
.planning-quart + .planning-quart { margin-top: .35rem; }
.planning-quart.incomplet { border-left-color: var(--attention); }
.planning-quart.vide { border-left-color: var(--critique); }
.pq-tete { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.pq-poste { flex: 1; min-width: 8rem; }
.pq-compte { font-variant-numeric: tabular-nums; color: var(--encre-2); }
/* Les visages de l'aperçu : plus petits que dans le planning en grand, parce qu'ici on
   parcourt quatre jours d'un regard — on reconnaît, on ne détaille pas. */
.pq-monde { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.pq-personne { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem;
  padding: .12rem .45rem .12rem .12rem; border: 1px solid var(--bord); border-radius: 999px;
  color: var(--encre-2); }
.pq-personne .avatar { width: 20px; height: 20px; min-width: 20px; flex: 0 0 20px;
  font-size: .54rem; }
.pq-personne .avatar img { width: 20px; height: 20px; object-fit: cover; }
.pq-personne.vient { border-color: var(--ok); color: var(--ok-encre); }
.pq-personne.decommande { border-color: var(--serieux); background: var(--serieux-doux);
  color: var(--encre-3); }
.pq-personne.decommande span:last-child { text-decoration: line-through; }
.pq-personne.decommande .avatar { filter: grayscale(1); opacity: .6; }
.pq-vide { margin-top: .3rem; font-size: .78rem; color: var(--encre-3); font-style: italic; }

.planning-bloc { margin-bottom: 1.1rem; }
.planning-entete { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  padding-bottom: .4rem; border-bottom: 1px solid var(--bord); margin-bottom: .6rem; }
.planning-quarts { display: grid; gap: .6rem; }
.quart { border: 1px solid var(--bord); border-left: 4px solid var(--ok);
  border-radius: 10px; padding: .7rem .85rem; background: var(--surface-2); }
.quart.incomplet { border-left-color: var(--attention); }
.quart.vide { border-left-color: var(--critique); }
.quart-tete { display: flex; gap: .8rem; align-items: start; justify-content: space-between; }
.quart-monde { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.quart-personne { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .5rem .2rem .2rem;
  border: 1px solid var(--bord); border-radius: 999px; font-size: .85rem; }
/* Prévenu : la pastille se calme. Ce n'est pas une réussite à célébrer, c'est une chose de faite. */
.quart-personne.prevenu { border-color: var(--ok); color: var(--ok-encre); }
.quart-personne .avatar { width: 24px; height: 24px; min-width: 24px; font-size: .62rem;
  flex: 0 0 24px; border-radius: 50%; }
.quart-personne .avatar img { width: 24px; height: 24px; object-fit: cover; }
.quart-retirer { border: none; background: none; cursor: pointer; color: var(--encre-3);
  padding: 0 0 0 .1rem; display: inline-flex; }
.quart-retirer:hover { color: var(--critique); }
.quart-retirer svg { width: 14px; height: 14px; }

.quart-formulaire { display: grid; gap: .8rem; }
.quart-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; }

.affectables { display: grid; gap: .4rem; max-height: 46vh; overflow-y: auto; margin-top: .7rem; }
.affectable { display: flex; gap: .7rem; align-items: center; width: 100%; text-align: left;
  border: 1px solid var(--bord); border-radius: 10px; padding: .5rem .7rem; cursor: pointer;
  background: none; color: inherit; font: inherit; }
.affectable:hover { border-color: var(--accent); background: var(--accent-doux); }
.affectable svg { width: 16px; height: 16px; flex: none; color: var(--accent); }

.rappels { display: grid; gap: .6rem; }
.rappel { border: 1px solid var(--bord); border-radius: 10px; padding: .65rem .85rem; }
.rappel.prevenu { border-color: var(--ok); }
.rappel-tete { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
/* L'aperçu du courriel : une enveloppe blanche posée sur la page, quel que soit le thème.
   Un courriel arrive sur fond blanc — le montrer sur fond sombre donnerait une idée fausse
   des deux boutons, qui sont précisément ce qu'on vient vérifier. */
.apercu-boite { margin: .55rem 0 0; border: 1px solid var(--bord); border-radius: 10px;
  overflow: hidden; background: #ffffff; }
.apercu-sujet { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap;
  padding: .55rem .8rem; border-bottom: 1px solid #e6edf0; background: #f4f7f9; color: #3d4f57; }
.apercu-sujet .meta { color: #6b7f88; text-transform: uppercase; font-size: .72rem;
  letter-spacing: .06em; }
.apercu-sujet b { font-size: .88rem; }
.apercu-courriel { display: block; width: 100%; height: 340px; border: 0; background: #ffffff; }

@media (max-width: 640px) {
  .planning-jour { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---- le choix du jour à prévenir ----------------------------------------------------------
   Un champ de date pour aller n'importe où, et des puces pour les jours qui ont vraiment du
   monde d'inscrit — c'est parmi eux qu'on choisit neuf fois sur dix. Le nombre sur la puce est
   celui des personnes encore à prévenir ; une coche remplace le nombre quand tout est fait. */
.choix-jour { display: grid; gap: .6rem; margin-bottom: .9rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--bord); }
.choix-jour-champ { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.choix-jour-champ label { font-size: .85rem; color: var(--encre-2); }
.choix-jour-champ input { padding: .38rem .55rem; border: 1px solid var(--bord-2); border-radius: 8px;
  background: var(--surface); color: var(--encre); font: inherit; font-size: .9rem; }
.puces-jours { display: flex; gap: .45rem; flex-wrap: wrap; }
.puce-jour { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  border: 1px solid var(--bord); border-radius: 999px; padding: .32rem .7rem .32rem .8rem;
  background: none; color: inherit; font: inherit; font-size: .85rem; }
.puce-jour b { font-weight: 650; }
.puce-jour span { color: var(--encre-3); }
.puce-jour i { font-style: normal; font-weight: 700; font-size: .78rem; line-height: 1;
  padding: .2rem .42rem; border-radius: 999px; background: var(--attention-doux);
  color: var(--attention-encre); font-variant-numeric: tabular-nums; }
.puce-jour svg { width: 14px; height: 14px; color: var(--ok-encre); }
.puce-jour:hover { border-color: var(--accent); }
.puce-jour.choisi { border-color: var(--accent); background: var(--accent-doux); }
/* Un jour dont tout le monde est prévenu : il reste cliquable, il n'appelle simplement plus. */
.puce-jour.fait { color: var(--encre-3); }

/* ---- la page de réponse au rappel ---------------------------------------------------------
   Elle s'ouvre sur un téléphone, dans la rue, par quelqu'un qui vient de lire un courriel.
   Une seule chose à l'écran, en gros, et la réponse déjà enregistrée en arrivant. */
.ecran-reponse { min-height: 100dvh; display: grid; place-items: center; padding: 1.2rem;
  background: var(--page); }
.reponse-boite { width: min(30rem, 100%); background: var(--surface); border: 1px solid var(--bord);
  border-radius: 16px; padding: 1.6rem 1.5rem 1.4rem; box-shadow: 0 10px 40px rgba(15, 31, 36, .06); }
.reponse-marque { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem;
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-3); }
.reponse-marque img { width: 30px; height: 30px; border-radius: 8px; }
.reponse-boite h1 { font-size: 1.4rem; margin: 0 0 .8rem; }
.reponse-quart { margin: 0 0 .9rem; font-size: 1.05rem; }
.reponse-quart span { color: var(--encre-2); }
.reponse-quart div { color: var(--encre-2); font-size: .95rem; margin-top: .15rem; }
.reponse-note { margin: 0 0 .9rem; padding: .6rem .8rem; border-radius: 10px;
  background: var(--accent-doux); font-size: .92rem; }
.reponse-verdict { display: flex; gap: .55rem; align-items: center; padding: .75rem .9rem;
  border-radius: 12px; font-weight: 650; margin-bottom: 1.1rem; }
.reponse-verdict svg { width: 20px; height: 20px; flex: none; }
.reponse-verdict.oui { background: var(--ok-doux); color: var(--ok-encre); }
.reponse-verdict.non { background: var(--serieux-doux); color: var(--serieux-encre); }
.reponse-verdict.vide { background: var(--accent-doux); color: var(--accent); }
.reponse-aide { margin: 0 0 .6rem; color: var(--encre-2); font-size: .92rem; }
.reponse-boutons { display: flex; gap: .7rem; flex-wrap: wrap; }
/* Gros : c'est un pouce, sur un téléphone, dehors. */
.bouton.grand { flex: 1; min-width: 8rem; justify-content: center; padding: .85rem 1.1rem;
  font-size: 1.05rem; border-radius: 12px; }
.bouton.grand.choisi { outline: 3px solid var(--accent); outline-offset: 2px; }
.reponse-pied { margin: 1.2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--bord);
  color: var(--encre-3); font-size: .85rem; }
.reponse-attente { text-align: center; color: var(--encre-3); padding: 1.5rem 0; }

/* Les trois états d'une personne attendue : elle a dit oui, elle s'est décommandée, elle n'a
   rien dit. Le silence garde l'apparence neutre — il appelle un téléphone, pas un remplacement. */
.quart-personne.vient { border-color: var(--ok); color: var(--ok-encre); }
.quart-personne.vient svg { width: 13px; height: 13px; color: var(--ok-encre); }
.quart-personne.decommande { border-color: var(--serieux); color: var(--encre-3);
  background: var(--serieux-doux); }
.quart-personne.decommande span { text-decoration: line-through; }
.quart-personne.decommande svg { width: 13px; height: 13px; color: var(--serieux-encre); }
.quart-personne.decommande .avatar { filter: grayscale(1); opacity: .65; }
.rappel.decommande { border-color: var(--serieux); }
.rappel-noter { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin-top: .4rem; }
.rappel-noter .bouton.petit.choisi { border-color: var(--accent); background: var(--accent-doux);
  color: var(--accent); font-weight: 700; }

/* ---- qui appeler ---------------------------------------------------------------------------
   Une liste qu'on parcourt le téléphone à la main. Le numéro est gros et cliquable : c'est
   l'action, pas une donnée de plus. Le bord dit l'urgence — à faire maintenant, ou à laisser
   mûrir encore quelques heures. */
.appel { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem .95rem;
  border: 1px solid var(--bord); border-left: 4px solid var(--bord-2); border-radius: 12px;
  margin-bottom: .55rem; }
.appel.urgent { border-left-color: var(--attention); }
.appel.patiente { border-left-color: var(--bord-2); opacity: .82; }
.appel.comble { border-left-color: var(--serieux); }
.appel .avatar { width: 42px; height: 42px; min-width: 42px; flex: 0 0 42px; font-size: .9rem; }
.appel .avatar img { width: 42px; height: 42px; object-fit: cover; }
.appel-tete { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.appel-numero { display: inline-flex; align-items: center; gap: .45rem; margin-top: .45rem;
  font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: .02em; color: var(--accent); text-decoration: none; }
.appel-numero:hover { text-decoration: underline; }
.appel-numero svg { width: 17px; height: 17px; }
.appel-reponse { display: grid; gap: .3rem; justify-items: end; flex: none; }
@media (max-width: 620px) {
  .appel { flex-wrap: wrap; }
  .appel-reponse { justify-items: start; width: 100%; }
}
/* Depuis « qui appeler », on écrit aussi : l'aperçu et le bouton d'envoi tiennent sous le
   numéro, discrets — le téléphone reste l'action principale de cet écran. */
.appel-courriel { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .45rem; }
.appel-courriel details { flex: 1; min-width: 12rem; }
.appel-courriel .apercu-boite { margin-top: .5rem; }

/* ---- glisser-déposer du planning -----------------------------------------------------------
   Ce qui se saisit le montre à la prise ; ce qui peut recevoir s'allume au survol — et
   seulement là où le geste a un sens : une personne sur un quart, un quart sur un jour. */
.quart-personne[draggable="true"] { cursor: grab; }
.quart-personne[draggable="true"]:active { cursor: grabbing; }
.quart-tete[draggable="true"] { cursor: grab; }
.quart.depot-possible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent);
  background: var(--accent-doux); }
.planning-bloc.depot-possible .planning-entete { border-bottom-color: var(--accent); }
.planning-bloc.depot-possible { outline: 2px dashed var(--accent); outline-offset: 6px;
  border-radius: 8px; }
/* Le glisser vaut aussi dans l'aperçu : mêmes règles, plus petit. */
.pq-personne[draggable="true"] { cursor: grab; }
.pq-personne[draggable="true"]:active { cursor: grabbing; }
.planning-quart.depot-possible { background: var(--accent-doux); border-left-color: var(--accent);
  border-radius: 0 8px 8px 0; }

/* ---- la fiche en panneau latéral -----------------------------------------------------------
   Une fiche se lit à côté de la liste, pas à sa place : le panneau glisse depuis la droite et la
   page reste visible à gauche — on garde sous les yeux la ligne qu'on vient de cliquer. */
.voile.voile-panneau { justify-content: flex-end; align-items: stretch; padding: 0; }
.modale.panneau { margin: 0; height: 100vh; height: 100dvh; max-height: none; border-radius: 0;
  border-width: 0 0 0 1px; max-width: min(680px, 100%); width: 100%;
  animation: glisse-de-droite .26s var(--transition) both; }
.modale.panneau .modale-entete { border-radius: 0; }
.modale.panneau .modale-pied { border-radius: 0; }
@keyframes glisse-de-droite { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modale.panneau { animation: none; } }

/* ---- le tableau de la semaine ---------------------------------------------------------------
   Les jours en colonnes, les postes en lignes : la semaine telle qu'on la pense. Chaque case est
   un quart, chaque visage une personne, et son anneau dit où elle en est — confirmée, muette,
   décommandée. Une place sans personne est un cercle vide : les trous se voient de loin. */
.sem-barre { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.sem-barre .sem-titre { font-weight: 700; font-size: 1.05rem; min-width: 15rem; }
.sem-barre .barre-boutons { margin-left: auto; }
.sem-cadre { overflow-x: auto; border: 1px solid var(--bord); border-radius: 14px; background: var(--surface); }
.sem-grille { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; table-layout: fixed; }
.sem-grille th, .sem-grille td { border-bottom: 1px solid var(--grille); border-right: 1px solid var(--grille);
  vertical-align: top; padding: 0; }
.sem-grille th:last-child, .sem-grille td:last-child { border-right: 0; }
.sem-grille tr:last-child td { border-bottom: 0; }
.sem-grille thead th { padding: .7rem .8rem; text-align: left; font-size: .8rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--encre-2); background: var(--surface-2); }
.sem-grille thead th.aujourdhui { color: var(--accent); }
.sem-grille thead th.aujourdhui small { display: inline-block; margin-left: .4rem; padding: .05rem .4rem; border-radius: 999px;
  background: var(--accent-doux); font-size: .66rem; letter-spacing: .06em; }
.sem-grille thead th .meta { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; }
/* Le nom du poste n'est pas un titre de colonne : casse normale, et il se replie au lieu de
   déborder sur la case voisine — « Réception de marchandise » ne tient pas sur une ligne. */
.sem-grille th.sem-poste { width: 176px; padding: .8rem; text-align: left; font-weight: 650; font-size: .9rem;
  text-transform: none; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere;
  background: var(--surface-2); vertical-align: top; }
.sem-grille th.sem-poste small { display: block; color: var(--encre-3); font-weight: 500; font-size: .75rem; margin-top: .15rem; }
.sem-case { min-height: 5.2rem; padding: .55rem .6rem; display: grid; gap: .5rem; align-content: start; }
.sem-case.ferme { background: repeating-linear-gradient(135deg, transparent 0 8px, var(--grille) 8px 9px); opacity: .7; }
.sem-quart { border-left: 3px solid var(--ok); padding: .3rem .5rem .4rem; border-radius: 4px 8px 8px 4px;
  background: var(--surface-2); }
.sem-quart.incomplet { border-left-color: var(--attention); }
.sem-quart.vide { border-left-color: var(--critique); }
.sem-quart.depot-possible { outline: 2px dashed var(--accent); outline-offset: 2px; background: var(--accent-doux); }
.sem-quart-tete { display: flex; align-items: baseline; gap: .4rem; font-size: .74rem; color: var(--encre-3);
  text-transform: uppercase; letter-spacing: .05em; }
.sem-quart-tete b { color: var(--encre); font-size: .8rem; letter-spacing: 0; text-transform: none;
  font-variant-numeric: tabular-nums; margin-left: auto; }
.sem-quart-tete .sem-plus { margin-left: .2rem; border: 0; background: none; color: var(--accent); cursor: pointer;
  padding: 0 .2rem; line-height: 1; font-size: 1rem; }
.sem-visages { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.sem-visage { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
  cursor: pointer; background: none; box-shadow: 0 0 0 2px var(--bord-2); }
.sem-visage .avatar { width: 34px; height: 34px; font-size: .72rem; }
.sem-visage .avatar img { width: 34px; height: 34px; object-fit: cover; }
.sem-visage.vient { box-shadow: 0 0 0 2.5px var(--ok); }
.sem-visage.muet { box-shadow: 0 0 0 2.5px var(--attention); }
.sem-visage.decommande { box-shadow: 0 0 0 2.5px var(--serieux); }
.sem-visage.decommande .avatar { filter: grayscale(1); opacity: .55; }
.sem-visage.decommande::after { content: '×'; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--serieux-encre); font-weight: 900; font-size: 1.1rem; }
.sem-visage[draggable=true] { cursor: grab; }
.sem-visage.glisse { opacity: .4; }
.sem-trou { width: 34px; height: 34px; border-radius: 50%; border: 2px dashed var(--bord-2); }
.sem-quart.vide .sem-trou, .sem-quart.incomplet .sem-trou { border-color: var(--attention); }
.sem-quart.vide .sem-trou { border-color: var(--critique); }
.sem-poser { border: 1px dashed var(--bord-2); border-radius: 8px; background: none; color: var(--encre-3);
  font: inherit; font-size: .78rem; padding: .35rem .5rem; cursor: pointer; text-align: left; }
.sem-poser:hover { border-color: var(--accent); color: var(--accent); }
.sem-legende { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--encre-2); margin: .7rem .2rem 0; }
.sem-legende span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  margin-right: .35rem; vertical-align: -2px; box-shadow: 0 0 0 2px var(--bord-2); }
.sem-legende .l-vient::before { box-shadow: 0 0 0 2px var(--ok); }
.sem-legende .l-muet::before { box-shadow: 0 0 0 2px var(--attention); }
.sem-legende .l-decommande::before { box-shadow: 0 0 0 2px var(--serieux); }
.sem-legende .l-trou::before { box-shadow: none; border: 2px dashed var(--bord-2); width: 10px; height: 10px; }

/* le rail « à faire » : la journée de la coordination, sous la grille */
.sem-afaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem; margin-top: 1rem; }
.afaire { display: flex; gap: .7rem; align-items: center; padding: .8rem .95rem; border-radius: 12px;
  border: 1px solid var(--bord); background: var(--surface); }
.afaire.chaud { border-color: var(--attention); }
.afaire.calme { opacity: .8; }
.afaire > svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.afaire.chaud > svg { color: var(--attention-encre); }
.afaire b { display: block; font-size: 1.15rem; line-height: 1.1; }
.afaire .meta { font-size: .82rem; }
.afaire .bouton { margin-left: auto; flex: none; }

/* la fiche express : ce qu'on veut savoir d'un visage en un clic */
.express { display: flex; gap: .9rem; align-items: center; margin-bottom: .8rem; }
.express .avatar { width: 56px; height: 56px; font-size: 1.1rem; }
.express .avatar img { width: 56px; height: 56px; object-fit: cover; }
.express-tel { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.1rem; font-weight: 700;
  color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums; }
.express-tel svg { width: 16px; height: 16px; }

@media print {
  /* La semaine au babillard : la grille, rien d'autre — pas de menu, pas de boutons, pas de rail. */
  body:has(.sem-grille) .lateral, body:has(.sem-grille) .barre, body:has(.sem-grille) .sem-barre .barre-boutons,
  body:has(.sem-grille) .sem-afaire, body:has(.sem-grille) .sem-plus, body:has(.sem-grille) .sem-poser { display: none !important; }
  .sem-cadre { border-color: #999; overflow: visible; }
  .sem-grille { min-width: 0; }
  .sem-grille th, .sem-grille td { border-color: #bbb; }
  .sem-visage, .sem-visage .avatar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sem-quart { break-inside: avoid; }
}