/* ============================================================================
   Pangku — système de design « Papier »
   ----------------------------------------------------------------------------
   Une seule feuille pour toute l'application : vitrine, connexion, espace
   entreprise, poste de pointage, page QR, espace éditeur, pages légales.

   Principes
   - Tous les styles dérivent des tokens de :root. Deux thèmes par les mêmes
     tokens : clair (défaut des écrans de bureau), sombre (préférence système
     ou attribut data-theme="dark"). Le poste et la page QR sont toujours
     sombres : ils se lisent de loin, parfois au soleil.
   - Aucune ressource distante. Les polices vivent dans /fonts : un réseau qui
     filtre les CDN ne doit jamais casser le poste de pointage.
   - Contraste : AA minimum partout, AAA sur le poste. Chaque paire a été
     calculée, pas estimée (docs/design-system.md).
   - Les classes utilisées par le JavaScript sont conservées à l'identique.
   ========================================================================== */

/* ---------------------------------------------------------------- polices */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/geist-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/geist-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/geist-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/geist-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/geist-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/geist-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/geist-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/geist-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/geist-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/geist-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/geist-mono-latin-700-normal.woff2") format("woff2"); }

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  /* fonds, du plus enfoncé au plus proche */
  --bg: #F5F4EF;
  --sunk: #ECEAE3;
  --surface: #FFFFFF;
  --raised: #FAF9F5;

  /* traits */
  --line: #DDDBD2;
  --line-soft: #E8E6DF;

  /* texte */
  --text: #1B1E24;
  --muted: #5C6370;
  --faint: #6B717D;

  /* accent : aplat (boutons) et encre (liens, texte coloré) */
  --accent: #0F766E;
  --accent-deep: #0B5F59;
  --accent-ink: #0F766E;
  --accent-wash: rgba(15, 118, 110, .10);
  --on-accent: #FFFFFF;

  /* couleurs de sens, distinctes de l'accent */
  --ok: #15803D;      --ok-wash: rgba(21, 128, 61, .10);
  --warn: #B45309;    --warn-wash: rgba(180, 83, 9, .11);
  --danger: #B91C1C;  --danger-wash: rgba(185, 28, 28, .09);
  --info: #1D4ED8;    --info-wash: rgba(29, 78, 216, .09);

  /* échelle typographique */
  --police: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --chiffres: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs: 15px; --fs-md: 16px; --fs-lg: 18px;
  --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: clamp(36px, 5vw, 56px);

  /* espacements */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* rayons */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-full: 999px;

  /* ombres */
  --ombre-1: 0 1px 2px rgba(20, 24, 30, .06);
  --ombre-2: 0 1px 2px rgba(20, 24, 30, .06), 0 10px 30px rgba(20, 24, 30, .08);
  --ombre: var(--ombre-2);

  /* hauteurs de contrôle : 44 px = cible tactile */
  --h-ctrl: 44px; --h-ctrl-sm: 36px;

  --transition: .14s ease;
}

/* Thème sombre : préférence système sans choix explicite… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #14161B; --sunk: #0F1115; --surface: #1B1E25; --raised: #22262E;
    --line: #2E333C; --line-soft: #262A32;
    --text: #ECEEF2; --muted: #A7ADB8; --faint: #8A919C;
    --accent: #1FA895; --accent-deep: #178C7C; --accent-ink: #5EEAD4;
    --accent-wash: rgba(45, 212, 191, .12); --on-accent: #06201C;
    --ok: #4ADE80; --ok-wash: rgba(74, 222, 128, .12);
    --warn: #FBBF24; --warn-wash: rgba(251, 191, 36, .12);
    --danger: #F87171; --danger-wash: rgba(248, 113, 113, .12);
    --info: #93C5FD; --info-wash: rgba(147, 197, 253, .12);
    --ombre-1: 0 1px 2px rgba(0, 0, 0, .4);
    --ombre-2: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .38);
  }
}
/* …ou choix explicite, qui l'emporte dans les deux sens. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14161B; --sunk: #0F1115; --surface: #1B1E25; --raised: #22262E;
  --line: #2E333C; --line-soft: #262A32;
  --text: #ECEEF2; --muted: #A7ADB8; --faint: #8A919C;
  --accent: #1FA895; --accent-deep: #178C7C; --accent-ink: #5EEAD4;
  --accent-wash: rgba(45, 212, 191, .12); --on-accent: #06201C;
  --ok: #4ADE80; --ok-wash: rgba(74, 222, 128, .12);
  --warn: #FBBF24; --warn-wash: rgba(251, 191, 36, .12);
  --danger: #F87171; --danger-wash: rgba(248, 113, 113, .12);
  --info: #93C5FD; --info-wash: rgba(147, 197, 253, .12);
  --ombre-1: 0 1px 2px rgba(0, 0, 0, .4);
  --ombre-2: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .38);
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--police);
  font-size: var(--fs);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -.015em; margin: 0; }
p { text-wrap: pretty; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--text); }
a.link { color: var(--accent-ink); }
::selection { background: var(--accent-wash); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- marque */
.marque, .brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 18px; letter-spacing: -.02em;
  color: var(--text); text-decoration: none;
}
.marque svg, .brand svg { width: 28px; height: 28px; flex: 0 0 auto; }
.marque:hover, .brand:hover { color: var(--text); }

/* ---------------------------------------------------------------- boutons */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h-ctrl);
  padding: 0 18px;
  font-family: inherit; font-size: var(--fs); font-weight: 600; line-height: 1.2;
  color: var(--on-accent); background: var(--accent);
  border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
button:hover:not(:disabled), .btn:hover { background: var(--accent-deep); color: var(--on-accent); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; }

button.secondary, .btn.ghost, .btn-ghost {
  background: var(--surface); border-color: var(--line); color: var(--text);
  box-shadow: var(--ombre-1);
}
button.secondary:hover:not(:disabled), .btn.ghost:hover, .btn-ghost:hover { background: var(--raised); border-color: var(--faint); color: var(--text); }

button.danger { background: transparent; border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); box-shadow: none; }
button.danger:hover:not(:disabled) { background: var(--danger-wash); border-color: var(--danger); color: var(--danger); }

/* fantôme : aucune bordure, pour les actions tertiaires */
button.fantome { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
button.fantome:hover:not(:disabled) { background: var(--raised); color: var(--text); }

button.small { min-height: var(--h-ctrl-sm); padding: 0 12px; font-size: var(--fs-sm); font-weight: 500; }
button.large { min-height: 56px; padding: 0 26px; font-size: var(--fs-lg); border-radius: var(--r); }

/* bouton texte, pour les actions discrètes dans un tableau */
button.link-btn {
  min-height: 36px; min-width: 36px; padding: 0 8px;
  background: none; border: none; color: var(--accent-ink); font-size: 16px; box-shadow: none;
}
button.link-btn:hover:not(:disabled) { background: var(--accent-wash); color: var(--accent-ink); }
button svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------------------------------------------------------------- champs */
label {
  display: block;
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted);
  margin-bottom: 6px;
}
input, select, textarea {
  width: 100%;
  min-height: var(--h-ctrl);
  font-family: inherit; font-size: var(--fs-md); color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 14px;
  box-shadow: var(--ombre-1);
  transition: border-color var(--transition), box-shadow var(--transition);
}
textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
select { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B717D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; }
/* La liste déroulante native suit le thème du système, pas celui de la page :
   sans couleurs explicites, un poste sombre peut afficher du blanc sur blanc. */
select option { color: var(--text); background: var(--surface); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; box-shadow: none; accent-color: var(--accent); }
input[type="date"], input[type="time"] { font-family: var(--chiffres); font-size: var(--fs); }
input[inputmode="numeric"] { font-family: var(--chiffres); letter-spacing: .12em; }
.champ + .champ { margin-top: var(--s4); }

.row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1; min-width: 160px; }
.row > button { flex: 0 0 auto; }

.filters { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--s4); }
.filters > div { display: flex; flex-direction: column; }
.filters input, .filters select { width: auto; min-width: 172px; }
.filters button { flex: 0 0 auto; }

.case { display: inline-flex; align-items: center; gap: 10px; min-height: var(--h-ctrl); font-size: 14px; color: var(--muted); cursor: pointer; }
.case input { margin: 0; }

/* ---------------------------------------------------------------- messages */
.msg { display: none; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; margin-top: var(--s3); border: 1px solid transparent; line-height: 1.45; }
.msg.show { display: block; }
.msg.err  { background: var(--danger-wash); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.msg.ok   { background: var(--ok-wash); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.msg.info { background: var(--info-wash); color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
#licenceMsg { margin: 0 0 var(--s5); }

.hint { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--s3); line-height: 1.5; }
.sous { color: var(--faint); font-size: var(--fs-xs); margin-top: 3px; }

/* toast : une notification brève, en bas à droite */
.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  padding: 12px 16px; border-radius: var(--r); font-size: 14px;
  background: var(--text); color: var(--bg); box-shadow: var(--ombre-2);
}

/* ---------------------------------------------------------------- coquille de l'app */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side {
  display: flex; flex-direction: column; gap: var(--s5);
  padding: var(--s5) var(--s4);
  background: var(--surface); border-right: 1px solid var(--line-soft);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side .marque { padding: 0 8px; }

.org { padding: 11px 12px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r); }
.org-nom { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; }
.org-role { display: block; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; margin-top: 3px; }

.side nav { display: flex; flex-direction: column; gap: 2px; }
.nav-groupe { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 14px 12px 6px; }
.nav-groupe:first-child { padding-top: 0; }
.nav-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  width: 100%; min-height: 40px; text-align: left;
  background: none; border: none; box-shadow: none; color: var(--muted);
  font-size: 14px; font-weight: 500;
  padding: 0 12px; border-radius: var(--r-sm);
}
.nav-item:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.nav-item.active { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.nav-item .ic { display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto; }
.nav-item .ic svg { width: 20px; height: 20px; }

.side-bas { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.side-bas .qui { font-size: 12.5px; color: var(--faint); padding: 0 12px; overflow: hidden; text-overflow: ellipsis; }

.main { padding: var(--s6) clamp(18px, 3vw, 44px) 72px; min-width: 0; }

/* Sur téléphone : barre horizontale, icône au-dessus du libellé, défilement avec
   fondu en bord d'écran pour signaler qu'il y a une suite. */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  /* Deux rangées : la marque, l'entreprise et les actions en haut ; la
     navigation seule sur toute la largeur en dessous, pour qu'elle respire. */
  .side {
    position: sticky; top: 0; height: auto; z-index: 20;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 8px 12px 0; border-right: none; border-bottom: 1px solid var(--line-soft);
  }
  .side .marque span, .org-role, .side-bas .qui, .nav-groupe { display: none; }
  .org { padding: 7px 10px; flex: 1 1 auto; min-width: 0; }
  .org-nom { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side nav {
    order: 2; flex: 1 0 100%; flex-direction: row; gap: 2px; min-width: 0;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    padding-bottom: 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .side nav::-webkit-scrollbar { display: none; }
  .nav-item { flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; width: auto; padding: 6px 10px; font-size: 11px; white-space: nowrap; scroll-snap-align: start; }
  .side-bas { margin: 0; flex: 0 0 auto; }
  .side-bas button { min-height: var(--h-ctrl-sm); padding: 0 10px; font-size: var(--fs-sm); }
  .main { padding: 18px 14px 56px; }
}

/* ---------------------------------------------------------------- tête d'une vue */
.vue-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.vue-tete h1 { font-size: var(--fs-2xl); font-weight: 700; }
.vue-sous { color: var(--muted); font-size: 14px; margin: 5px 0 0; max-width: 64ch; }
.vue-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- blocs */
.card, .panneau {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--ombre-1);
}
.panneau + .panneau, .card + .card { margin-top: var(--s4); }
.panneau > h2, .card > h2 { font-size: var(--fs-md); font-weight: 600; margin: 0 0 4px; }
.panneau > .vue-sous { margin-bottom: var(--s4); }
.panneau.alerte { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 5%, var(--surface)); }

/* aide contextuelle courte, en tête de panneau */
.aide { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg); color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; margin-bottom: var(--s4); }
.aide svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--accent-ink); }
details.aide-plus { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--muted); }
details.aide-plus summary { cursor: pointer; color: var(--accent-ink); font-weight: 500; list-style: none; }
details.aide-plus summary::-webkit-details-marker { display: none; }
details.aide-plus[open] summary { margin-bottom: 6px; }

/* ---------------------------------------------------------------- tuiles de statistiques */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.stat {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--ombre-1);
}
.stat b { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.stat.alerte { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.stat.alerte b { color: var(--danger); }
.stat.principale b { font-size: 40px; }

/* ---------------------------------------------------------------- tableaux */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line-soft); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg); color: var(--faint);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  text-align: left; padding: 10px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
thead th[aria-sort] { cursor: pointer; }
thead th[aria-sort]::after { content: " ↕"; color: var(--line); }
thead th[aria-sort="ascending"]::after { content: " ↑"; color: var(--accent-ink); }
thead th[aria-sort="descending"]::after { content: " ↓"; color: var(--accent-ink); }
tbody td { padding: 12px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg) 55%, transparent); }
tbody tr:hover td { background: var(--accent-wash); }
tfoot td { padding: 12px; border-top: 2px solid var(--line); font-weight: 700; background: var(--bg); }
th, td { text-align: left; }
/* la première colonne reste visible quand le tableau défile sur téléphone */
@media (max-width: 860px) {
  tbody td:first-child, thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--line-soft); }
  thead th:first-child { background: var(--bg); z-index: 3; }
}
.time { font-variant-numeric: tabular-nums; font-family: var(--chiffres); font-size: 13px; white-space: nowrap; }
.hours { font-weight: 700; font-family: var(--chiffres); font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.muted-cell { color: var(--faint); }
.cle { font-family: var(--chiffres); font-size: 13px; letter-spacing: .04em; }
.actions, .cell-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* état vide : une phrase utile plutôt qu'un tableau nu */
.vide { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.vide b { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px; }

/* état de chargement */
.chargement { color: var(--faint); font-size: 14px; padding: 20px; text-align: center; }
.squelette { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--sunk), var(--raised), var(--sunk)); background-size: 200% 100%; animation: brille 1.2s linear infinite; }
@keyframes brille { to { background-position: -200% 0; } }

/* pagination */
.pagination { display: flex; align-items: center; gap: 6px; justify-content: flex-end; padding: 10px 0; font-size: var(--fs-sm); color: var(--muted); }
.pagination button { min-height: var(--h-ctrl-sm); min-width: 36px; padding: 0 10px; }
.pagination .courante { background: var(--accent-wash); color: var(--accent-ink); border-color: transparent; }

/* ---------------------------------------------------------------- pastilles */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; line-height: 1.5;
  border: 1px solid transparent;
}
.badge.in, .badge.actif, .badge.complet, .badge.ok { background: var(--ok-wash); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.badge.out, .badge.suspendu, .badge.bientot, .badge.nodevice, .badge.anomalie { background: var(--warn-wash); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.badge.absent, .badge.expire, .badge.resilie { background: var(--danger-wash); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, transparent); }
.badge.encours, .badge.essai, .badge.device { background: var(--info-wash); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
/* Une absence déclarée n'est pas une anomalie : ton neutre, pas d'alerte. */
.badge.absence { background: var(--sunk); color: var(--muted); border-color: var(--line); }
.badge.device { font-family: var(--chiffres); }
tr.pale td { opacity: .7; }
.pill { font-size: 11px; padding: 3px 9px; border-radius: var(--r-full); background: var(--warn-wash); color: var(--warn); font-weight: 700; letter-spacing: .04em; }

/* ---------------------------------------------------------------- onglets */
.tabs, .onglets { display: flex; gap: 4px; margin-bottom: var(--s5); flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); }
.tabs button, .onglets button {
  min-height: 42px; padding: 0 14px; background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--muted); font-weight: 500; box-shadow: none; margin-bottom: -1px;
}
.tabs button:hover:not(:disabled), .onglets button:hover:not(:disabled) { color: var(--text); background: transparent; }
.tabs button.active, .onglets button.active { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 600; }
#logoutBtn { margin-left: auto; }

/* ---------------------------------------------------------------- 2FA */
.qr-wrap { display: inline-block; padding: 14px; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r); margin: var(--s3) 0; }
.qr-wrap img, .qr-wrap canvas { display: block; margin: 0 auto; }
code { font-family: var(--chiffres); background: var(--bg); border: 1px solid var(--line-soft); padding: 2px 7px; border-radius: 5px; font-size: 13px; }

/* ---------------------------------------------------------------- visionneuse photo */
.photo-overlay { position: fixed; inset: 0; z-index: 50; padding: 20px; background: rgba(10, 12, 16, .8); display: flex; align-items: center; justify-content: center; }
.photo-overlay img { max-width: min(560px, 92vw); max-height: 82vh; border-radius: var(--r); }
.photo-overlay figure { margin: 0; }
.photo-overlay .cap { color: #E8EAF0; font-size: 14px; text-align: center; margin-top: 10px; }

/* ---------------------------------------------------------------- fenêtres modales */
dialog {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: var(--r-lg); padding: var(--s6); width: min(460px, 92vw); box-shadow: var(--ombre-2);
  max-height: 92vh; overflow: auto;
}
dialog::backdrop { background: rgba(10, 12, 16, .55); }
dialog h3 { margin: 0 0 6px; font-size: var(--fs-lg); font-weight: 700; }
dialog .row { margin-top: var(--s5); }
dialog .actions-modale { display: flex; gap: 10px; justify-content: flex-end; margin-top: var(--s5); position: sticky; bottom: 0; background: var(--surface); padding-top: 10px; }

/* ---------------------------------------------------------------- en-tête simple (poste, éditeur) */
header.barre {
  display: flex; align-items: center; gap: var(--s3);
  padding: 12px clamp(14px, 2vw, 24px);
  background: var(--surface); border-bottom: 1px solid var(--line-soft);
}
header.barre .titre { font-weight: 600; }
header.barre .droite { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ============================================================================
   Vitrine
   ========================================================================== */
.wrap { width: min(1120px, 92vw); margin: 0 auto; }
.vitrine .entete { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); }
.vitrine .nav { display: flex; align-items: center; gap: 24px; padding: 14px 0; }
.vitrine .nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.vitrine .nav-links a { color: var(--muted); text-decoration: none; }
.vitrine .nav-links a:hover { color: var(--text); }
.vitrine .nav .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
@media (max-width: 820px) { .vitrine .nav-links, .vitrine .nav .btn-ghost { display: none; } }

.hero { padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.tagline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-full); padding: 6px 14px; margin-bottom: 22px; }
.tagline .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.hero h1 { font-size: var(--fs-4xl); line-height: 1.05; margin: 0 0 20px; letter-spacing: -.03em; font-weight: 700; }
.lead { font-size: 19px; color: var(--muted); margin: 0 0 30px; max-width: 52ch; line-height: 1.5; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.under-cta { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* le téléphone de la démonstration */
.phone { width: 250px; margin: 0 auto; background: #0F1115; border: 8px solid #262A32; border-radius: 36px; padding: 28px 18px 24px; text-align: center; box-shadow: var(--ombre-2); color: #ECEEF2; }
.phone .sub { font-size: 12px; color: #A7ADB8; margin-bottom: 14px; }
.phone .code { background: #fff; border-radius: 12px; padding: 14px; display: block; }
.phone .code svg { display: block; width: 100%; height: auto; }
.phone .cd { font-size: 12px; color: #A7ADB8; margin-top: 12px; font-family: var(--chiffres); }

.vitrine section { padding: clamp(56px, 7vw, 84px) 0; border-top: 1px solid var(--line-soft); }
.vitrine section.hero { border-top: none; }
.eyebrow { color: var(--accent-ink); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }
.vitrine h2 { font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 14px; letter-spacing: -.025em; font-weight: 700; }
.section-lead { color: var(--muted); max-width: 62ch; margin: 0 0 40px; font-size: 17px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; }
.cards .card h3 { margin: 14px 0 8px; font-size: 17px; font-weight: 600; }
.cards .card p { margin: 0; color: var(--muted); font-size: 15px; }
.ico { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-wash); color: var(--accent-ink); display: grid; place-items: center; }
.ico svg { width: 22px; height: 22px; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; counter-reset: s; }
.step { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 26px; position: relative; counter-increment: s; box-shadow: var(--ombre-1); }
.step::before { content: counter(s); position: absolute; top: -16px; left: 24px; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; font-size: 15px; border: 4px solid var(--bg); }
.step h3 { margin: 12px 0 8px; font-size: 17px; font-weight: 600; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

.preuves { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.preuve { padding: 20px 22px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); box-shadow: var(--ombre-1); }
.preuve b { display: block; font-size: 15px; margin-bottom: 4px; }
.preuve p { margin: 0; color: var(--muted); font-size: 14px; }

.vitrine details { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 16px 20px; margin-bottom: 10px; box-shadow: var(--ombre-1); }
.vitrine summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.vitrine summary::-webkit-details-marker { display: none; }
.vitrine summary::after { content: "+"; color: var(--accent-ink); font-weight: 700; font-size: 20px; line-height: 1; }
.vitrine details[open] summary::after { content: "–"; }
.vitrine details p { color: var(--muted); margin: 12px 0 0; font-size: 15px; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; gap: 32px; } }
.contact form { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--ombre-1); }
.form-msg { display: none; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; border: 1px solid transparent; }
.form-msg.show { display: block; }
.form-msg.ok { background: var(--ok-wash); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.form-msg.err { background: var(--danger-wash); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.legal { font-size: 13px; color: var(--muted); }

.vitrine footer { border-top: 1px solid var(--line-soft); padding: 36px 0; color: var(--muted); font-size: 14px; }
.foot { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.foot a { text-decoration: none; color: var(--muted); }
.foot a:hover { color: var(--text); }
.foot .sep { margin-left: auto; }

/* ============================================================================
   Connexion
   ========================================================================== */
.connexion { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
@media (max-width: 900px) { .connexion { grid-template-columns: 1fr; } .connexion .aside { display: none; } }
.connexion .main { display: flex; flex-direction: column; padding: 30px clamp(20px, 6vw, 72px); }
.connexion .box { margin: auto 0; max-width: 420px; width: 100%; padding: 40px 0; }
.connexion h1 { font-size: var(--fs-2xl); margin: 0 0 8px; }
.connexion .sub { color: var(--muted); margin: 0 0 28px; font-size: 15px; }
.connexion .field { margin-bottom: 16px; }
.connexion form button { width: 100%; min-height: 48px; font-size: var(--fs-md); }
.connexion .msg { margin: 0 0 18px; }
.code-hint { font-size: 13px; color: var(--muted); margin: 7px 0 0; }
.connexion .foot { margin-top: 26px; font-size: 14px; color: var(--muted); display: block; }
.connexion .bottom { color: var(--faint); font-size: 13px; }
.connexion .aside { background: var(--surface); border-left: 1px solid var(--line-soft); padding: 56px clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.connexion .aside-in { max-width: 420px; }
.connexion .aside h2 { font-size: 26px; line-height: 1.25; margin: 0 0 28px; }
.pt { display: flex; gap: 14px; margin-bottom: 20px; }
.pt .ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; background: var(--accent-wash); color: var(--accent-ink); display: grid; place-items: center; }
.pt .ic svg { width: 20px; height: 20px; }
.pt b { display: block; font-size: 15px; margin-bottom: 2px; }
.pt p { margin: 0; color: var(--muted); font-size: 14px; }

/* ============================================================================
   Poste de pointage — toujours sombre, AAA, lisible à deux mètres
   ========================================================================== */
body.poste {
  color-scheme: dark;
  --bg: #07090E; --sunk: #0D1220; --surface: #10151F; --raised: #161C29;
  --line: #262D3B; --line-soft: #1C2230;
  --text: #F4F6FA; --muted: #B8C0CF; --faint: #9AA3B4;
  --accent: #2DD4BF; --accent-deep: #14B8A6; --accent-ink: #5EEAD4; --accent-wash: rgba(45, 212, 191, .14); --on-accent: #06201C;
  --ok: #4ADE80; --warn: #FBBF24; --danger: #F87171; --info: #93C5FD;
  --ombre-1: none; --ombre-2: 0 20px 60px rgba(0, 0, 0, .5);
  min-height: 100vh; display: flex; flex-direction: column;
}
.poste header.barre { background: var(--surface); }
.poste .horloge { font-family: var(--chiffres); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.poste-grille { flex: 1; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 1.25fr); gap: clamp(16px, 2vw, 28px); padding: clamp(16px, 2vw, 28px); align-items: stretch; }
@media (max-width: 900px) { .poste-grille { grid-template-columns: 1fr; } }
.poste-camera { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.poste-camera .etat { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.poste-camera .etat .point { width: 12px; height: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(74, 222, 128, .18); }
#reader { width: 100%; border-radius: var(--r); overflow: hidden; background: var(--sunk); border: 1px solid var(--line); min-height: 240px; }
#reader video { display: block; width: 100% !important; }
.poste-camera .consigne { font-size: 18px; color: var(--muted); line-height: 1.4; }
.poste-camera .consigne b { color: var(--text); }
.poste-reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.poste-reglages label { font-size: var(--fs-xs); }
.poste-reglages select { min-height: 40px; font-size: 14px; }

.poste-resultat { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
/* Scopé au panneau de résultat : le point d'état de la caméra porte aussi la
   classe « attente » et ne doit pas hériter de ce cadre. */
.poste-resultat .attente {
  flex: 1; border: 2px dashed var(--line); border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 28px; color: var(--muted);
}
.poste-resultat .attente .grand { font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.poste-resultat .attente .petit { font-size: 18px; }

/* le bandeau de résultat : texte foncé sur bande claire, AAA, lisible de loin */
.result-big { flex: 1; border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; text-align: left; gap: 8px; }
.result-big.in   { background: #4ADE80; color: #052E16; }
.result-big.out  { background: #FBBF24; color: #1F1300; }
.result-big.deny { background: #991B1B; color: #FFFFFF; }
.result-big .name { font-size: clamp(40px, 5vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.025em; }
.result-big .act { font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; margin-top: 4px; font-family: var(--chiffres); }
.result-big .note { font-size: 18px; margin-top: 12px; opacity: .92; line-height: 1.4; max-width: 60ch; }
.result-big #rPhoto { width: 132px; height: auto; border-radius: var(--r); border: 3px solid rgba(255, 255, 255, .7); margin-bottom: 8px; }
.poste .msg.err { font-size: 18px; padding: 16px 18px; margin: 0; }
.poste .msg.err.show { display: flex; gap: 10px; align-items: flex-start; }
#captureBtn { min-height: 48px; }
.poste .pied { padding: 12px clamp(16px, 2vw, 28px) 20px; color: var(--faint); font-size: 14px; display: flex; gap: 18px; flex-wrap: wrap; }
.poste .pied .hint { margin: 0; }

/* ============================================================================
   Page QR du salarié — mobile d'abord, sombre, sans distraction
   ========================================================================== */
body.qr-page {
  color-scheme: dark;
  --bg: #0F1115; --sunk: #0A0C10; --surface: #171A21; --raised: #1F232C;
  --line: #2E333C; --line-soft: #262A32;
  --text: #ECEEF2; --muted: #B4BAC6; --faint: #8F97A3;
  --accent: #1FA895; --accent-deep: #178C7C; --accent-ink: #5EEAD4; --accent-wash: rgba(45, 212, 191, .12); --on-accent: #06201C;
  --ok: #4ADE80; --warn: #FBBF24; --danger: #F87171; --info: #93C5FD;
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 16px 28px; text-align: center; gap: 0;
}
.qr-page h1 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.qr-page .sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
/* Le QR reste en grille 21x21 (token de 17 octets) : la moins dense, la plus
   lisible par une webcam à mise au point fixe. Fond blanc pur, marge large. */
#qr { background: #fff; padding: 8px; border-radius: 20px; display: inline-block; line-height: 0; box-shadow: 0 16px 48px rgba(0, 0, 0, .45); }
/* L'image contient sa marge blanche (4 modules) : elle reste lisible même si
   un navigateur en mode sombre forcé assombrit le cadre autour. */
#qr img, #qr canvas, #qr svg { width: min(90vw, 400px); height: min(90vw, 400px); display: block; border-radius: 14px; background: #fff; }
#qr .err { line-height: 1.45; }
.qr-page .count { color: var(--text); font-family: var(--chiffres); font-size: 20px; font-weight: 500; margin-top: 18px; font-variant-numeric: tabular-nums; }
/* identifiant d'appareil : utile au dépannage, pas au salarié — discret */
.qr-page .dev { color: var(--faint); font-size: 12px; margin-top: 6px; font-family: var(--chiffres); opacity: .7; }
.err { color: #FECACA; background: #3B0D0D; padding: 14px 18px; border-radius: 12px; max-width: 340px; line-height: 1.45; font-size: 15px; }

#mission { display: none; width: min(360px, 92vw); margin-top: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; text-align: left; }
#mission.on { display: block; }
#mission h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 10px; font-weight: 700; }
#mission .client { font-size: 19px; font-weight: 700; }
#mission .lieu { color: var(--muted); font-size: 14px; margin-top: 3px; }
#mission select { margin-top: 12px; }
#btnPointer { width: 100%; margin-top: 14px; min-height: 64px; font-size: 20px; font-weight: 700; border-radius: var(--r); background: #4ADE80; color: #052E16; }
#btnPointer:hover:not(:disabled) { background: #22C55E; color: #052E16; }
#btnPointer.fin { background: #FBBF24; color: #1F1300; }
#btnPointer.fin:hover:not(:disabled) { background: #F59E0B; color: #1F1300; }
#btnPointer:disabled { opacity: .55; }
#missionMsg { margin-top: 12px; font-size: 15px; border-radius: 10px; padding: 12px 14px; display: none; }
#missionMsg.on { display: block; }
#missionMsg.ok { background: rgba(74, 222, 128, .16); color: #BBF7D0; }
#missionMsg.ko { background: rgba(248, 113, 113, .16); color: #FECACA; }
#missionNote { color: var(--faint); font-size: 12px; margin-top: 10px; line-height: 1.45; }

/* ============================================================================
   Pages légales
   ========================================================================== */
.legale .wrap { width: min(760px, 92vw); padding: 34px 0 72px; }
.legale .marque { margin-bottom: 36px; }
.legale h1 { font-size: 32px; margin: 0 0 10px; }
.legale h2 { font-size: 19px; margin: 36px 0 10px; }
.legale p, .legale li { color: var(--muted); line-height: 1.7; }
.legale .maj { font-size: 14px; color: var(--faint); margin: 0 0 8px; }
.legale .todo { background: var(--warn-wash); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); border-radius: var(--r); padding: 14px 18px; font-size: 14px; margin: 20px 0; }
.legale table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.legale td { padding: 10px 12px; border-top: 1px solid var(--line-soft); color: var(--muted); vertical-align: top; }
.legale tr:first-child td { border-top: none; }
.legale td:first-child { color: var(--text); font-weight: 600; width: 38%; }
.legale footer { border-top: 1px solid var(--line-soft); padding: 26px 0; font-size: 14px; color: var(--muted); }

/* ---------------------------------------------------------------- bascule de thème */
.theme-btn { min-height: 36px; min-width: 36px; padding: 0 10px; }
.theme-btn .soleil, .theme-btn .lune { width: 18px; height: 18px; }
:root:not([data-theme="dark"]) .theme-btn .soleil { display: none; }
:root[data-theme="dark"] .theme-btn .lune { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .lune { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-btn .soleil { display: inline; }
}

/* ---------------------------------------------------------------- compléments */
/* La page QR affiche ses erreurs DANS le cadre blanc, en texte foncé (qr.js) :
   le fond doit rester clair pour que ce texte se lise. */
#qr .err { background: #FEE2E2; color: #7F1D1D; box-shadow: none; }

/* L'espace éditeur garde le sélecteur .tabs de son script, mais vit dans la
   colonne latérale : on lui donne l'apparence des entrées de navigation. */
.side .tabs { display: flex; flex-direction: column; gap: 2px; margin: 0; border: none; flex: 1; }
.side .tabs .side-bas { margin-top: auto; }
.side .tabs .side-bas button {
  min-height: var(--h-ctrl); padding: 0 16px; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text);
  box-shadow: var(--ombre-1);
}
.side .tabs .side-bas button:hover:not(:disabled) { background: var(--raised); border-color: var(--faint); }
.side .tabs button.nav-item { min-height: 40px; padding: 0 12px; border: none; border-radius: var(--r-sm); margin: 0; justify-content: flex-start; }
.side .tabs button.nav-item.active { background: var(--accent-wash); color: var(--accent-ink); }
.side .tabs #logoutBtn { margin: 0; }
@media (max-width: 860px) {
  .side .tabs { flex-direction: row; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .side .tabs button.nav-item { flex-direction: column; gap: 3px; min-height: 52px; min-width: 64px; font-size: 11px; }
}

/* ---------------------------------------------------------------- lot 1 */
/* bandeau d'alerte en tête de vue */
.bandeau { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); margin-bottom: var(--s4);
  background: var(--warn-wash); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); font-weight: 500; }
.bandeau svg { width: 20px; height: 20px; flex: 0 0 auto; }
.bandeau span { flex: 1; color: var(--text); }
/* raccourcis de période */
.periodes { flex-basis: 100%; display: flex; gap: 4px; flex-wrap: wrap; }
.periodes button.active { background: var(--accent-wash); color: var(--accent-ink); }
/* liste de démarrage */
.etapes { margin: 12px 0 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.etapes li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.etapes li span { flex: 1; min-width: 200px; }
.etapes li.fait { color: var(--muted); }
.etapes li.fait span { text-decoration: line-through; }
.etapes li.fait::marker { color: var(--ok); }
/* état de la caméra du poste */
.poste-camera .etat .point.attente { background: var(--warn); box-shadow: 0 0 0 4px rgba(251, 191, 36, .18); }
.poste-camera .etat .point.danger { background: var(--danger); box-shadow: 0 0 0 4px rgba(248, 113, 113, .18); }
/* page QR : coupure réseau */
#reseau { display: none; margin-top: 14px; padding: 10px 14px; border-radius: 10px; font-size: 14px;
  background: rgba(251, 191, 36, .16); color: #FDE68A; max-width: 340px; line-height: 1.4; }
#reseau.on { display: block; }

/* ---------------------------------------------------------------- lot 2 : page QR */
#etat { display: none; width: min(360px, 92vw); margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  font-size: 17px; font-weight: 600; line-height: 1.35; text-align: center; }
#etat.on { display: block; }
#etat.in { background: rgba(74, 222, 128, .16); color: #BBF7D0; }
#etat.out { background: rgba(251, 191, 36, .16); color: #FDE68A; }
#etat.vide { background: var(--surface); color: var(--muted); font-weight: 500; font-size: 14px; }
/* un pointage qui vient d'arriver : on le fait sauter aux yeux quelques secondes */
#etat.neuf { animation: pulse-etat 1.2s ease-in-out 3; }
@keyframes pulse-etat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
#etat.in.neuf { background: #4ADE80; color: #052E16; }
#etat.out.neuf { background: #FBBF24; color: #1F1300; }

#heures { width: min(360px, 92vw); margin-top: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 18px; text-align: left; }
#heures h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 10px; font-weight: 700; }
#heures .grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#heures .grille > div { display: flex; flex-direction: column; }
#heures .val { font-family: var(--chiffres); font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
#heures .lib { color: var(--muted); font-size: 13px; margin-top: 3px; }
#heures .detail { color: var(--muted); font-size: 13px; margin-top: 10px; line-height: 1.4; }

/* ---------------------------------------------------------------- diagnostic d'affichage */
.diag { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.diag figure { margin: 0; }
.diag .cadre { width: 120px; height: 120px; margin: 0 auto; line-height: 0; }
.diag .cadre > * { display: block; width: 120px; height: 120px; }
.diag .blanc { background: #fff; padding: 30px; box-sizing: border-box; }
.diag .noir { background: #000; width: 60px; height: 60px; }
.diag .fond-css { background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'><rect width='4' height='4' fill='%23fff'/><rect x='1' y='1' width='2' height='2' fill='%23000'/></svg>") center / 120px 120px no-repeat; }
.diag figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
.diag-info { margin-top: 22px; font-family: var(--chiffres); font-size: 11px; color: var(--faint); text-align: left; white-space: pre-wrap; word-break: break-all; max-width: 92vw; }
.diag.grand { grid-template-columns: 1fr; }
.diag.grand .cadre, .diag.grand .cadre > * { width: 300px; height: 300px; }