/* akwito — feuille de style unique.
   Principe : le produit, c'est le document. Papier froid, encre bleue, un seul
   rouge (le sceau). Source Serif 4 pour ce qui se lit comme une pièce, Lato
   pour l'interface, monospace pour les numéros et empreintes.
   La CSP est « default-src 'self' » : polices et scripts servis par le binaire. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/static/fonts/sourceserif4-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(/static/fonts/sourceserif4-italic.woff2) format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/lato-italic-400-latinext.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: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/lato-italic-400-latin.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: "Lato";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/lato-italic-700-latinext.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: "Lato";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/lato-italic-700-latin.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: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/lato-normal-400-latinext.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: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/lato-normal-400-latin.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: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/lato-normal-700-latinext.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: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/lato-normal-700-latin.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;
}

/* ------------------------------------------------------------------ *
 * Jetons (docs/ui.md §9)
 * ------------------------------------------------------------------ */
:root {
  --bg: #f4f5f2;
  --surface: #ffffff;
  --surface-alt: #eceee9;
  --border: #d9dcd6;
  --border-strong: #b9bdb6;
  --text: #14161c;
  --muted: #5b616e;
  --accent: #2b3ec4;
  --on-accent: #ffffff;
  --accent-strong: #1f2f9e;
  --accent-soft: #e7eafc;
  --ink: #14161c;          /* surfaces sombres (bloc code, bandeau) */
  --on-ink: #f4f5f2;
  --ink-muted: #a3a8b8;
  --seal: #c8341f;
  --ok: #1c7c4c;
  --ok-soft: #e0f2e7;
  --warn: #9a5b00;
  --warn-soft: #fbefd6;
  --degraded: #b64a13;
  --degraded-soft: #fbe7da;
  --bad: #b8291a;
  --bad-soft: #fbe3df;
  --neutral: #4b5160;
  --neutral-soft: #e6e8e3;
  --sheet: #ffffff;
  --sheet-ink: #14161c;
  --sheet-rule: #d9dcd6;
  --shadow-sheet: 0 0 0 1px rgba(20, 22, 28, 0.05), 0 1px 2px rgba(20, 22, 28, 0.08), 0 32px 56px -24px rgba(20, 22, 28, 0.45);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --maxw: 1160px;
  --font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Essai Lato partout (14/09/2026) : le token serif pointe sur la sans.
     Revenir à "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif
     pour retrouver les titres et la pièce en serif. */
  --serif: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

/* Mode sombre désactivé : la palette est conservée mais gardée derrière
 * l'attribut data-theme="auto" sur <html>, que rien ne pose pour l'instant.
 * Pour le réactiver : <html data-theme="auto"> dans layout.html. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0f1116;
    --surface: #161920;
    --surface-alt: #1d212b;
    --border: #2a2f3b;
    --border-strong: #3a4050;
    --text: #e8e9ee;
    --muted: #9aa1b1;
    --accent: #9aa8ff;
    --on-accent: #0e1330;
    --accent-strong: #b8c2ff;
    --accent-soft: #232a52;
    --ink: #1b1f2a;
    --on-ink: #e8e9ee;
    --ink-muted: #9aa1b1;
    --seal: #e0553f;
    --ok: #5fd39a;
    --ok-soft: #12301f;
    --warn: #f0b64a;
    --warn-soft: #3a2a08;
    --degraded: #f08a58;
    --degraded-soft: #3d1c0d;
    --bad: #f27a6a;
    --bad-soft: #3d1310;
    --neutral: #c3c8d4;
    --neutral-soft: #262b36;
    --sheet: #f7f7f4;
    --sheet-ink: #14161c;
    --sheet-rule: #d9dcd6;
    --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.4), 0 32px 64px -24px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ *
 * Socle
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }
.main { flex: 1 0 auto; padding: var(--sp-6) 0 var(--sp-8); }
body.layout-site .main { padding-top: 0; padding-bottom: var(--sp-8); }
/* Lato est plus large que Source Sans 3 : l'espace connecté redescend à 16px. */
body.layout-app { font-size: 16px; }

h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: 1.15; font-weight: 500; }
h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; font-feature-settings: "kern", "liga"; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.6rem; margin-top: var(--sp-7); }
h3 { font-size: 1.05rem; font-weight: 600; }
h4 { font-size: 0.95rem; font-weight: 600; }
p { margin: 0 0 var(--sp-3); }
.lead { font-size: 1.125rem; color: var(--muted); max-width: 62ch; line-height: 1.5; }
.muted { color: var(--muted); }
small { font-size: 0.875rem; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-strong); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
code, pre, kbd { font-family: var(--mono); font-size: 0.875em; }
code { background: var(--surface-alt); padding: 0.1em 0.35em; border-radius: 4px; }
pre { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius);
      padding: var(--sp-4); overflow-x: auto; line-height: 1.5; }
pre code { background: none; padding: 0; font-size: 0.8125rem; }
sup { line-height: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--accent-soft); }

.mono { font-family: var(--mono); font-size: 0.9em; font-variant-numeric: tabular-nums; }
h1.mono { font-family: var(--mono); font-size: 1.75rem; letter-spacing: 0.02em; font-weight: 500; }
.breakable { word-break: break-all; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: var(--sp-1) 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.offscreen { position: fixed; top: 0; left: -9999px; opacity: 0; }

/* Lien d'évitement : premier élément tabulable de chaque page. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 20;
             background: var(--accent); color: var(--on-accent); font-weight: 600;
             padding: var(--sp-2) var(--sp-4); border-radius: 0 0 var(--radius) 0; }
.skip-link:focus { left: 0; color: var(--on-accent); }
.main:focus { outline: none; }

/* ------------------------------------------------------------------ *
 * En-tête et navigation
 * ------------------------------------------------------------------ */
.topbar { background: var(--bg); border-bottom: 1px solid var(--border); }
/* Vitrine : l'en-tête est posé sur le même papier que le haut de page — les
   halos passent dessous, aucun filet ne le sépare du héro. Il ne se distingue
   qu'en défilant, par le flou de ce qui passe derrière. */
body.layout-site .topbar { position: sticky; top: 0; z-index: 10; border-bottom: 0;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  transition: background-color 160ms ease, box-shadow 160ms ease; }
/* Avec le script, l'en-tête est totalement transparent en haut de page — il
   ne fait qu'un avec le héro et ses halos — et ne se voile qu'en défilant. */
html.js body.layout-site .topbar:not(.is-scrolled) { background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
html.js body.layout-site .topbar.is-scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 70%, transparent); }
.topbar-inner { display: flex; align-items: center; gap: var(--sp-6); min-height: 68px; }
/* Bloc-marque : un nom forgé se lit avec son descripteur. */
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; }
.brand img { width: 28px; height: 28px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; }
.brand-tag { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.01em; margin-top: 3px; white-space: nowrap; }
.brand:hover { color: var(--text); }
.brand:hover .brand-tag { color: var(--text); }
.mainnav { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.mainnav a { text-decoration: none; color: var(--text); padding: 6px 10px; border-radius: var(--radius-sm);
             font-size: 0.95rem; font-weight: 500; position: relative; }
.mainnav a:hover { color: var(--text); background: var(--surface-alt); }
/* Vitrine : la page courante est soulignée d'un trait d'encre, pas d'une pastille grise. */
body.layout-site .mainnav a.active { background: transparent; }
body.layout-site .mainnav a.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 1px;
  height: 2px; background: var(--accent); border-radius: 1px; }
body.layout-site .mainnav a.btn-ghost { margin-left: var(--sp-3); }
body.layout-app .mainnav a.active { color: var(--text); background: var(--surface-alt); }
.nav-sep { display: block; height: 1px; background: var(--border); margin: var(--sp-2) var(--sp-2); }
body.layout-site .nav-sep { display: none; }
/* .mainnav a a la spécificité (0,1,1) : les boutons doivent la dépasser. */
.mainnav a.btn { padding: var(--sp-2) var(--sp-4); margin-left: var(--sp-2); }
.mainnav a.btn:hover { background: var(--surface); }
.mainnav a.btn-primary, .mainnav a.btn-primary:hover { color: var(--on-accent); background: var(--accent); }
.mainnav a.btn-primary:hover { background: var(--accent-strong); }
.topbar-user { display: flex; align-items: center; gap: var(--sp-3); margin: 0; }
.btn.navtoggle { display: none; }
.nav-icon { width: 18px; height: 18px; flex: none; opacity: 0.75; }
.mainnav a.active .nav-icon, .mainnav a:hover .nav-icon { opacity: 1; }

/* ------------------------------------------------------------------ *
 * Boutons
 * ------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
       padding: 8px 14px; font: inherit; font-size: 0.95rem; font-weight: 500; line-height: 1.25;
       text-decoration: none; background: var(--surface); color: var(--text); cursor: pointer;
       white-space: nowrap; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
.btn:hover { border-color: var(--text); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); }
.btn-danger { color: var(--bad); border-color: var(--border-strong); background: transparent; }
.btn-danger:hover { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
/* Révocation dans une ligne de liste : du texte rouge, sans cadre ni fond —
   .btn-ghost pose la transparence, cette classe en teinte le texte en rouge. */
.btn-danger-text { color: var(--bad); }
.btn-danger-text:hover { background: var(--bad-soft); color: var(--bad); }
.btn-lg { padding: 12px 20px; font-size: 1.05rem; border-radius: var(--radius); }
.btn-copy { font-size: 0.75rem; font-family: var(--font); padding: 2px 8px; color: var(--muted);
            vertical-align: 2px; margin-left: 4px; border-color: var(--border); }
.btn-copy:hover { color: var(--text); }
.btn-on-ink { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.btn-on-ink:hover { background: #ffffff; color: var(--ink); border-color: #ffffff; }

/* ------------------------------------------------------------------ *
 * Panneaux, grilles, tuiles
 * ------------------------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
        padding: var(--sp-5); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card h2 { font-family: var(--font); font-size: 0.95rem; font-weight: 600; color: var(--muted); margin: 0 0 var(--sp-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-3 + .grid-3 { margin-top: var(--sp-4); }

.big-number { font-family: var(--serif); font-size: 2.5rem; font-weight: 700; line-height: 1;
              margin: 0 0 var(--sp-3); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.big-number .muted { font-size: 1.1rem; font-family: var(--font); font-weight: 400; }
.meter { height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.meter-fill { height: 100%; width: var(--v, 0%); background: var(--accent); border-radius: 999px;
              transition: width 400ms ease; }
.meter-fill.is-high { background: var(--warn); }
.meter-fill.is-full { background: var(--bad); }

/* En-tête de page : titre à gauche, actions à droite. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4);
             flex-wrap: wrap; margin-bottom: var(--sp-6); padding-bottom: var(--sp-5);
             border-bottom: 1px solid var(--border); }
.page-head h1 { margin-bottom: var(--sp-1); }
.page-head .lead { margin: 0; }
.page-head .actions { margin: 0; }
.actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-4) 0; }
.backlink { font-size: 0.9rem; margin-bottom: var(--sp-3); }
.backlink a { color: var(--muted); text-decoration: none; }
.backlink a:hover { color: var(--text); }

/* Sections du dashboard et des paramètres : filet + espacement régulier. */
.section { padding: var(--sp-6) 0 var(--sp-3); border-top: 1px solid var(--border); margin-top: var(--sp-3); }
/* Collée à l’en-tête de page (qui porte déjà son filet) : ni filet ni marge.
   Précédée d’une grille, d’un bandeau ou d’un formulaire : espacement complet. */
.page-head + .section { border-top: 0; padding-top: 0; margin-top: 0; }
/* Après des cartes (déjà bordées) : espacement sans filet. */
.card + .section, .grid-2 + .section, .grid-3 + .section, .receipt + .section { border-top: 0; }
.card + .table-wrap, .card + .form, .card + .filter { margin-top: var(--sp-5); }
.section > h2 { margin-top: 0; }
.section > h3 { margin-top: var(--sp-5); }
.section > .table-wrap + p, .section > .table-wrap + .pagination { margin-top: var(--sp-3); }
.section-intro { color: var(--muted); max-width: 62ch; }
.section-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--sp-7); }
.section-grid > h2, .section-grid > div > h2:first-child { margin: 0; }

/* Messages flash et erreurs de formulaire */
.flash { display: flex; gap: var(--sp-3); align-items: flex-start; border: 1px solid var(--border);
         border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
         background: var(--surface); }
.flash::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 0.55em;
                 background: var(--muted); }
.flash-ok { background: var(--ok-soft); }
.flash-ok::before { background: var(--ok); }
.flash-error { background: var(--bad-soft); }
.flash-error::before { background: var(--bad); }
.form-error { color: var(--bad); font-weight: 500; margin-bottom: var(--sp-4); }

/* Révélation à usage unique d'une clé ou d'un secret : elle doit sauter aux yeux. */
.reveal { background: var(--surface); border: 1px solid var(--border-strong);
          border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); }
.reveal p:last-child { margin-bottom: 0; }
.reveal-value { font-size: 1rem; background: var(--surface-alt); border: 1px solid var(--border);
                border-radius: var(--radius-sm); padding: var(--sp-3); margin-bottom: var(--sp-3); }

/* Révélation d'une clé API, au-dessus de la liste dans sa carte : une teinte
   d'accent plutôt que le gris de .reveal — la clé vient de naître, elle n'est
   pas qu'une information parmi d'autres. */
.key-reveal { margin: var(--sp-4); padding: var(--sp-4); background: var(--accent-soft);
              border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
              border-radius: var(--radius); }
.key-reveal-lead { font-weight: 600; margin: 0 0 var(--sp-3); }
.key-reveal-value { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
                     background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
                     padding: var(--sp-3); margin: 0 0 var(--sp-3); }
.key-reveal p:last-child { margin: 0; }

/* ------------------------------------------------------------------ *
 * Badges : un point coloré et un libellé, jamais la couleur seule.
 * ------------------------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px 2px 8px;
         font-size: 0.8125rem; font-weight: 500; white-space: nowrap; line-height: 1.5; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-degraded { background: var(--degraded-soft); color: var(--degraded); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-neutral { background: var(--neutral-soft); color: var(--neutral); }
.badge-muted { background: var(--neutral-soft); color: var(--ink-muted); }

/* ------------------------------------------------------------------ *
 * Tableaux
 * ------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface);
              border: 1px solid var(--border); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; background: transparent; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { font-size: 0.8125rem; font-weight: 500; color: var(--muted); background: var(--surface-alt);
           white-space: nowrap; }
tbody th[scope="row"] { font-weight: 500; color: var(--muted); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
tbody tr:hover td, tbody tr:hover th { background: color-mix(in srgb, var(--surface-alt) 55%, transparent); }

/* Frise de disponibilité (page /vies-status) : 288 cases de cinq minutes, une
   grille CSS et rien d'autre — la CSP interdit le style en ligne, et la page
   doit se lire sans script. Aucune gouttière : 288 filets d'un pixel
   mangeraient toute la largeur et la frise ne serait plus qu'une barre grise.
   La frise n'a PAS de largeur minimale à elle : elle en avait une, elle
   débordait alors de sa colonne et .table-wrap la coupait à droite — les
   créneaux les plus récents, ceux qu'on vient lire, passaient hors champ.
   C'est la TABLE qui porte la largeur minimale (et fait défiler .table-wrap
   sur un écran étroit), et la colonne de la frise qui réclame sa part. */
.uptime-strip { display: grid; grid-template-columns: repeat(288, 1fr); gap: 0;
                min-width: 0; width: 100%; height: 14px; align-items: stretch;
                border: 1px solid var(--border); border-radius: 2px; overflow: hidden;
                background: var(--neutral-soft); }
/* 40 % de la table pour 288 cases : environ deux pixels par case sur une
   largeur de bureau. La spécificité passe au-dessus de la largeur minimale
   des tableaux étroits (média 640 px) : une frise de 34 rem serait illisible. */
.table-wrap table.uptime-table { min-width: 52rem; }
.uptime-table th:last-child, .uptime-table td:last-child { width: 40%; }
.uptime-strip .cell { display: block; height: 100%; }
.uptime-strip .cell.up { background: var(--ok); }
.uptime-strip .cell.down { background: var(--bad); }
.uptime-strip .cell.none { background: var(--neutral-soft); }
tbody tr[hidden] { display: none; }

/* Page /vies-status : la carte à gauche, le résumé à droite, le tableau en
   dessous. La carte est un SVG servi tel quel, colorié par classes ; le
   dégradé du disque est dans ses <defs>, seule chose que le CSS ne sait pas
   faire sans attribut de style. */
.status-page .page-head { align-items: flex-end; }
.status-strip { display: flex; gap: var(--sp-6); margin: 0 0 var(--sp-1); }
.status-count p { margin: 0; color: var(--muted); font-size: 0.85rem; }
.status-count p.big-number { font-size: 2.4rem; margin-bottom: 2px; color: var(--text); }
.status-count.is-up .big-number { color: var(--accent); }
.status-count.is-down .big-number { color: var(--seal); }
.status-calls { margin: var(--sp-3) 0 0; font-size: 0.925rem; }
.globe { position: relative; margin: 0; background: var(--ink); color: var(--on-ink); border-radius: var(--radius-lg);
         overflow: hidden; box-shadow: 0 1px 2px rgba(20, 22, 28, 0.08), 0 24px 48px -28px rgba(20, 22, 28, 0.6); }
.globe-svg { display: block; width: 100%; height: auto; }
/* Le disque : une nuit bleue, plus claire vers le nord-ouest. Les arrêts du
   dégradé sont dans les <defs> du SVG, coloriés ici. */
.globe-shade-in { stop-color: #1c2450; }
.globe-shade-mid { stop-color: #121833; }
.globe-shade-out { stop-color: #090b15; }
.globe-graticule { fill: none; stroke: rgba(154, 168, 255, 0.16); stroke-width: 0.6; }
.globe-land { fill: rgba(255, 255, 255, 0.035); stroke: rgba(232, 233, 238, 0.26); stroke-width: 0.6;
              stroke-linejoin: round; }
/* Trames de points, par état. La base translucide fait lire la forme, les
   points font la matière. */
#globe-dots-up .pat-base { fill: rgba(43, 62, 196, 0.42); }
#globe-dots-up .pat-dot { fill: #8d9dff; }
#globe-dots-down .pat-base { fill: rgba(200, 52, 31, 0.38); }
#globe-dots-down .pat-dot { fill: #ff7a5c; }
#globe-dots-none .pat-base { fill: rgba(255, 255, 255, 0.05); }
#globe-dots-none .pat-dot { fill: rgba(232, 233, 238, 0.42); }
.globe-state { outline: none; }
.globe-state path { stroke-width: 0.8; stroke-linejoin: round; filter: url(#globe-glow);
                    transition: stroke 120ms ease, stroke-width 120ms ease; }
.globe-state.is-up path { fill: url(#globe-dots-up); stroke: #9aa8ff; }
.globe-state.is-down path { fill: url(#globe-dots-down); stroke: #ff8f75; animation: globe-pulse 1.8s ease-in-out infinite; }
.globe-state.is-none path { fill: url(#globe-dots-none); stroke: rgba(232, 233, 238, 0.4); }
.globe-state:hover path, .globe-state.is-hover path, .globe-state:focus-visible path { stroke: #ffffff; stroke-width: 1.6; }
.globe-marker { stroke: #0f1116; stroke-width: 1.2; filter: url(#globe-glow); }
.globe-state.is-up .globe-marker { fill: #9aa8ff; }
.globe-state.is-down .globe-marker { fill: #ff8f75; animation: globe-pulse 1.8s ease-in-out infinite; }
.globe-state.is-none .globe-marker { fill: rgba(232, 233, 238, 0.5); }
.globe-state:hover .globe-marker, .globe-state.is-hover .globe-marker, .globe-state:focus-visible .globe-marker { stroke: #ffffff; }
@keyframes globe-pulse { 50% { opacity: 0.55; } }
.globe-label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; fill: #ffffff;
               text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(9, 11, 21, 0.55); stroke-width: 2px; }
.globe-label.is-aside { text-anchor: start; }
/* Surimpressions : verre sombre posé sur la carte. */
.globe-incidents, .globe-legend { position: absolute; background: rgba(9, 11, 21, 0.68); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 0.875rem; }
.globe-incidents { top: var(--sp-4); right: var(--sp-4); width: 280px; padding: var(--sp-3) var(--sp-4); }
.globe-incidents h2 { font-family: var(--font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
                      text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--sp-2); }
.globe-incidents p { margin: 0; color: var(--ink-muted); }
.globe-incidents .incidents li { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; padding: 3px 0; }
.globe-incidents a { color: #b8c2ff; font-weight: 500; text-decoration: none; }
.globe-incidents a:hover { text-decoration: underline; color: #ffffff; }
.globe-incidents .muted { color: var(--ink-muted); }
.globe-incidents .badge-bad { background: rgba(255, 122, 92, 0.16); color: #ff9b84; }
.globe-incidents .badge-ok { background: rgba(141, 157, 255, 0.16); color: #b8c2ff; }
.globe-incidents .badge-neutral { background: rgba(255, 255, 255, 0.08); color: var(--ink-muted); }
.globe-legend { left: var(--sp-4); bottom: var(--sp-4); display: flex; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap;
                align-items: center; padding: var(--sp-2) var(--sp-4); margin: 0; color: var(--on-ink); }
.globe-legend .muted { color: var(--ink-muted); }
.legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: 0; margin-right: 7px; }
.legend-swatch.is-up { background: #8d9dff; box-shadow: 0 0 8px #8d9dff; }
.legend-swatch.is-down { background: #ff7a5c; box-shadow: 0 0 8px #ff7a5c; }
.legend-swatch.is-none { background: rgba(232, 233, 238, 0.42); }
.incidents a { font-weight: 500; text-decoration: none; }
.uptime-table tr { scroll-margin-top: 88px; }
.uptime-table th[scope="row"] { white-space: nowrap; }
.uptime-table tr.is-hover td, .uptime-table tr.is-hover th,
.uptime-table tr:target td, .uptime-table tr:target th { background: var(--accent-soft); }
td a { text-decoration: none; }
td a:hover { text-decoration: underline; }
td .mono, td.mono { font-size: 0.875rem; }
td code { font-size: 0.8rem; }
.row-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.row-actions form { display: inline; margin: 0; }
.pagination { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ *
 * Formulaires : une seule colonne
 * ------------------------------------------------------------------ */
.form { max-width: 480px; }
.form-wide { max-width: 720px; }
.form.inline { display: inline-block; margin: 0 var(--sp-2) var(--sp-3) 0; max-width: none; }
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 0.95rem; }
.field label .muted { font-weight: 400; }
.field .hint { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 6px; }

/* Choix du type de clé (réelle / test) dans le volet de création : deux
   cartes radio, même logique que .offer (billing.html) mais en pile plutôt
   qu'en grille — le volet est étroit. */
.mode-choice { border: 0; padding: 0; margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-3); }
.mode-choice legend { display: block; font-weight: 500; margin-bottom: 6px; font-size: 0.95rem; padding: 0; }
.mode-option { position: relative; display: flex; gap: var(--sp-3); align-items: flex-start;
               padding: var(--sp-3); background: var(--surface); border: 1px solid var(--border);
               border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; color: var(--muted); }
.mode-option input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.mode-option strong { color: var(--text); font-weight: 600; }
.mode-option:hover { border-color: var(--border-strong); }
.mode-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mode-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"],
input[type="search"], input[type="date"], input[type="file"], select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 9px 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder { color: var(--muted); opacity: 0.7; }
input[type="text"].mono { font-family: var(--mono); }
/* Un champ date garde sa largeur naturelle dans un filtre ; le sélecteur de
   fichier se présente comme un champ, son bouton comme un bouton. */
.filter input[type="date"] { width: auto; min-width: 11rem; }
input[type="file"] { padding: 6px 12px; cursor: pointer; }
input[type="file"]::file-selector-button { font: inherit; font-size: 0.9rem; font-weight: 500; color: var(--text);
  background: var(--surface-alt); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 5px 10px; margin-right: var(--sp-3); cursor: pointer; }
.checkbox { display: flex; align-items: flex-start; gap: var(--sp-2); }
.checkbox input { width: auto; margin-top: 4px; accent-color: var(--accent); }
.checkbox label { margin: 0; font-weight: 400; }
.filter { display: flex; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.filter .field { margin-bottom: 0; min-width: 260px; flex: 1 1 260px; max-width: 420px; }
.filter .btn { height: 40px; }
/* ------------------------------------------------------------------ *
 * Carte de la liste des vérifications : une carte, une tête (recherche,
 * validité, Affiner), un résumé de filtres, des lignes cliquables, un pied
 * de pagination. Partagée par /app/checks et la vue d'ensemble.
 * ------------------------------------------------------------------ */
.check-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
              overflow: hidden; }
.check-card-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
                    padding: var(--sp-2) var(--sp-5); border-bottom: 1px solid var(--border); }
.check-card-head .checks-count { margin-left: auto; }
.checks-search { display: flex; align-items: center; gap: var(--sp-4); flex: 1 1 auto; flex-wrap: wrap;
                  margin: 0; min-width: 0; }
.search { position: relative; display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 280px;
          max-width: 420px; margin: 0; }
.search .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted);
                       pointer-events: none; display: inline-flex; }
/* La recherche est nue : ni contour ni fond, seulement la loupe et le
   texte ; au focus, un trait bleu sous le champ. */
.search input[type="search"] { flex: 1 1 auto; height: 40px; padding-left: 30px; border: none;
                                border-radius: 0; background: transparent; box-shadow: none;
                                -webkit-appearance: none; appearance: none; }
.search input[type="search"]:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--accent); }
.check-card-head .search .search-icon { left: 4px; }
.search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search input.mono { font-family: var(--mono); }
/* Contrôle segmenté d'une périodicité de facturation (<fieldset> de boutons
   radio) : une piste --surface-alt, le segment actif détaché en pastille. */
.segmented { display: inline-flex; margin: 0; padding: 3px; border: 1px solid var(--border);
             border-radius: 999px; background: var(--surface-alt); flex: none; }
/* Onglets de validité de la liste (Toutes / Valides / Invalides) : du texte,
   l'actif souligné d'un trait bleu — aucun cadre. */
.check-card-head .segmented { padding: 0; border: none; border-radius: 0; background: transparent; gap: var(--sp-3); }
.check-card-head .segmented a { display: inline-flex; align-items: center; height: 44px; padding: 0 2px;
               color: var(--muted); text-decoration: none; font-size: 0.92rem; font-weight: 500;
               white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.check-card-head .segmented a:hover { color: var(--text); }
.check-card-head .segmented a.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.popover { position: relative; }
.popover > summary { list-style: none; }
.popover > summary::-webkit-details-marker { display: none; }
.popover > summary .nav-icon { opacity: 1; }
.popover[open] > summary { border-color: var(--text); }
.popover > summary.is-active { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
/* Dossier de contrôle et Créer une clé : des boutons ordinaires dans
   l'en-tête de page (le volet n'y change rien). Affiner : un simple lien avec ses curseurs, sans cadre ni fond ;
   actif, il passe en bleu. */
.check-card-head .popover > summary { height: 44px; padding: 0 2px; border: none; background: transparent;
                                       color: var(--muted); font-weight: 500; font-size: 0.92rem; border-radius: 0; }
.check-card-head .popover > summary:hover { color: var(--text); }
.check-card-head .popover > summary.is-active, .check-card-head .popover[open] > summary { color: var(--accent); background: transparent; }
.popover-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 6; width: min(380px, 92vw);
                 background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
                 box-shadow: 0 1px 2px rgba(20, 22, 28, 0.06), 0 24px 48px -24px rgba(20, 22, 28, 0.45);
                 padding: var(--sp-5); }
.popover-panel h2 { font-family: var(--font); font-size: 0.95rem; font-weight: 600; margin: 0 0 var(--sp-2); }
.popover-panel .grid-2 { gap: var(--sp-3); }
.popover-panel .field { margin-bottom: var(--sp-3); }
.popover-panel .field input[type="date"] { width: 100%; }
/* Résumé des filtres actifs : jetons retirables à gauche, compte à droite. */
.check-card-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
                       flex-wrap: wrap; margin: 0; padding: var(--sp-3) var(--sp-5);
                       background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.chips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--sp-3);
        background: var(--accent-soft); border: none; border-radius: 999px;
        color: var(--accent); text-decoration: none; font-size: 0.85rem; font-weight: 500; }
.chip:hover { color: var(--accent-strong); }
.chip-x { opacity: 0.7; }
.chip-clear { background: transparent; color: var(--accent); padding: 0; height: auto; }
.chip-clear:hover { color: var(--accent-strong); text-decoration: underline; }
.checks-count { margin: 0; color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
/* ------------------------------------------------------------------ *
 * Lignes de liste en grille : partagées par TOUTES les listes du tableau de
 * bord (vérifications, lots, lignes de lot, surveillances, changements,
 * demandes en attente, clés) — un <ul class="row-list">, un <a> ou <div
 * class="row-item"> par ligne, un point de statut en tête, un badge (ou une
 * action) aligné à droite. .check-list / .check-row / .check-dot* /
 * .check-vat / .check-warn / .check-date restent les noms historiques de
 * checks_list.html (testés littéralement) ; ce sont des alias des mêmes
 * règles, pas une deuxième copie. La grille de colonnes est propre à chaque
 * liste : posée par --cols (une variable, pas une classe modificatrice —
 * ça évite une règle par liste pour la seule largeur des colonnes).
 * ------------------------------------------------------------------ */
.check-list, .row-list {
  list-style: none; margin: 0; padding: 0; display: grid;
  --check-edge: calc(var(--sp-5) - var(--sp-4));
  grid-template-columns: var(--cols);
  column-gap: var(--sp-4);
}
.check-list { --cols: var(--check-edge) 10px max-content minmax(0, 1fr) max-content max-content max-content var(--check-edge); }
/* --cols par liste : la CSP interdit le style en ligne (voir
   TestTemplatesHaveNoInlineScriptOrStyle), donc une classe modificatrice par
   liste plutôt qu'un style="--cols: …" posé dans le gabarit. */
.row-list--batches, .row-list--watches, .row-list--requests {
  --cols: var(--check-edge) 10px max-content minmax(0, 1fr) max-content max-content max-content var(--check-edge);
}
.row-list--batch-items, .row-list--watch-events, .row-list--timeline {
  --cols: var(--check-edge) 10px max-content minmax(0, 1fr) max-content var(--check-edge);
}
/* Clés API : point, Nom (flexible), Clé, Créée le, Dernière utilisation,
   État, action — une colonne de plus que les autres listes, voir l'entrée
   nth-child(7) ci-dessous. */
.row-list--keys {
  --cols: var(--check-edge) 10px minmax(0, 1fr) max-content max-content max-content max-content max-content var(--check-edge);
}
.check-list li, .row-list li { display: contents; }
/* Les marges latérales sont deux pistes de la grille (et non un padding de
   la ligne, qu'une sous-grille absorberait dans sa première piste) : le fond
   de survol couvre toute la largeur. Les cellules se placent à partir de la
   colonne 2 par POSITION (nth-child), pas par nombre de colonnes total : la
   même règle vaut donc pour une liste à quatre ou à six colonnes de contenu.
   .row-head (en-tête optionnel de liste) partage la même sous-grille. */
.check-row, .row-item {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
  align-items: center; min-height: 48px; padding: 0; color: inherit; text-decoration: none;
  border-top: 1px solid var(--border);
}
.check-row > :nth-child(1), .row-item > :nth-child(1), .row-head > :nth-child(1) { grid-column: 2; }
.check-row > :nth-child(2), .row-item > :nth-child(2), .row-head > :nth-child(2) { grid-column: 3; }
.check-row > :nth-child(3), .row-item > :nth-child(3), .row-head > :nth-child(3) { grid-column: 4; }
.check-row > :nth-child(4), .row-item > :nth-child(4), .row-head > :nth-child(4) { grid-column: 5; }
.check-row > :nth-child(5), .row-item > :nth-child(5), .row-head > :nth-child(5) { grid-column: 6; }
.check-row > :nth-child(6), .row-item > :nth-child(6), .row-head > :nth-child(6) { grid-column: 7; }
.check-row > :nth-child(7), .row-item > :nth-child(7), .row-head > :nth-child(7) { grid-column: 8; }
/* Dernière cellule (badge ou action) toujours collée au bord droit. */
.check-row .badge, .row-item > :last-child { justify-self: end; }
/* En-tête optionnel d'une liste de lignes : mêmes colonnes qu'une ligne,
   sans point ni fond de survol — des libellés discrets au-dessus des
   valeurs. */
.row-head {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
  align-items: center; min-height: 36px; padding: 0; color: var(--muted);
  font-size: 0.82rem; background: var(--surface-alt); border-bottom: 1px solid var(--border);
}
.row-list--keys .row-main { font-weight: 500; }
.check-list li:first-child .check-row,
.row-list li:first-child .row-item { border-top: none; }
/* Une ligne cliquable (<a>) reçoit la teinte de survol ; une ligne non
   cliquable (<div>, ex. le journal d'une surveillance) n'en reçoit aucune. */
a.check-row:hover, a.row-item:hover { background: var(--surface-alt); }
a.check-row:focus-visible, a.row-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.check-dot, .row-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.check-dot-ok, .row-dot-ok { background: var(--ok); }
.check-dot-probable, .row-dot-probable { background: var(--ok); opacity: 0.6; }
.check-dot-degraded, .row-dot-degraded { background: var(--degraded); }
.check-dot-bad, .row-dot-bad { background: var(--bad); }
.check-dot-neutral, .row-dot-neutral { background: var(--neutral); }
/* Genres de point propres aux autres listes : un lot en cours (bleu), une
   demande ou un changement d'identité en attente (orange) — .check-dot n'en a
   pas besoin, aucune ligne de vérification n'est « en cours » ou « en attente ». */
.row-dot-accent { background: var(--accent); }
.row-dot-warn { background: var(--warn); }
.check-vat, .row-main { font-size: 0.92rem; color: var(--ink); font-weight: 600; white-space: nowrap;
             display: inline-flex; align-items: center; gap: var(--sp-2); }
.check-name { min-width: 0; color: var(--text); font-size: 0.95rem; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
/* La référence métier (facture, client) est une étiquette accrochée au
   numéro : même place sur chaque ligne, absente sans bruit. */
.check-ref { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-sm);
             background: var(--surface-alt); color: var(--text); font-family: var(--font); font-size: 0.8rem;
             font-weight: 500; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-warn, .row-sub { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.check-warn { justify-self: end; }
/* Texte secondaire en échec (motif d'erreur d'une ligne de lot) : même taille
   que .row-sub, en rouge plutôt qu'en gris. */
.row-sub-bad { color: var(--bad); }
.check-date, .row-when { color: var(--muted); font-size: 0.85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.check-card-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
                    padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); }
.check-card-foot > :first-child { justify-self: start; }
.check-card-foot > :last-child { justify-self: end; }
.check-position { color: var(--muted); font-size: 0.9rem; margin: 0; }
/* Liste vide : l'état vide habituel, sans son propre contour en pointillés
   puisqu'il est déjà posé dans la carte. */
.check-card > .empty-state { border: none; border-radius: 0; }
@media (max-width: 860px) {
  .search { flex-basis: 100%; max-width: none; }
}
@media (max-width: 640px) {
  .check-card-head, .check-card-summary { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  /* Étroit : plus de sous-grille, chaque ligne s'empile sur trois rangées. */
  .check-list, .row-list { display: block; }
  .check-list li, .row-list li { display: block; }
  .check-row { grid-template-columns: 8px minmax(0, 1fr) auto; row-gap: 2px;
               grid-template-areas: "dot vat badge" "dot name date" "dot warn warn"; padding: var(--sp-3) var(--sp-4); }
  .check-row > :nth-child(1) { grid-area: dot; }
  .check-row > :nth-child(2) { grid-area: vat; flex-wrap: wrap; }
  .check-row > :nth-child(3) { grid-area: name; }
  .check-row > :nth-child(4) { grid-area: warn; justify-self: start; }
  .check-row > :nth-child(5) { grid-area: date; }
  .check-row > :nth-child(6) { grid-area: badge; }
  .check-name:empty, .check-warn:empty { display: none; }
  .check-row .check-date { justify-self: end; }
  /* Les autres listes n'ont pas toutes les mêmes colonnes ; plutôt qu'une
     zone nommée par liste, un empilement générique à trois rangées : point à
     gauche sur toute la hauteur, ligne 1 = principal + 3e colonne (badge ou
     compteur), ligne 2 = 4e colonne + 5e (souvent date/action), ligne 3 = 6e
     colonne s'il y en a une, sur toute la largeur. */
  .row-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto;
              grid-template-rows: auto auto auto; column-gap: var(--sp-3); row-gap: 2px;
              padding: var(--sp-3) var(--sp-4); }
  .row-item > :nth-child(1) { grid-row: 1 / -1; grid-column: 1; align-self: start; margin-top: 6px; }
  .row-item > :nth-child(2) { grid-row: 1; grid-column: 2; }
  .row-item > :nth-child(3) { grid-row: 1; grid-column: 3; justify-self: end; }
  .row-item > :nth-child(4) { grid-row: 2; grid-column: 2; }
  .row-item > :nth-child(5) { grid-row: 2; grid-column: 3; justify-self: end; }
  .row-item > :nth-child(6) { grid-row: 3; grid-column: 2 / -1; justify-self: start; }
  .row-sub:empty { display: none; }
  /* En-tête de colonnes : sans objet une fois les lignes empilées. */
  .row-head { display: none; }
  /* Clés API : une septième cellule (action). État et action se partagent la
     troisième rangée plutôt que d'en ouvrir une quatrième. */
  .row-list--keys .row-item > :nth-child(6) { grid-column: 2; justify-self: start; }
  .row-list--keys .row-item > :nth-child(7) { grid-row: 3; grid-column: 3; justify-self: end; }
  /* Étroit : la position passe au-dessus des deux liens plutôt que de les
     écarter jusqu'à ne plus tenir sur la largeur. */
  .check-card-foot { grid-template-columns: 1fr 1fr; row-gap: var(--sp-2); }
  .check-position { grid-column: 1 / -1; order: -1; justify-self: center; }
}
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-6); margin: 0; }
.kv dt { font-weight: 500; color: var(--muted); }
.kv dd { margin: 0; }
.form + .kv { margin-top: var(--sp-6); }
.kv + .muted { margin-top: var(--sp-3); }
.raw { margin-top: var(--sp-5); }
.raw summary { cursor: pointer; font-weight: 500; }
.raw pre { overflow-x: auto; margin-top: var(--sp-3); }
.warnings { margin-bottom: var(--sp-5); }
.warnings h2 { color: var(--text); }
.warn-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 0.9rem; line-height: 1.4; }
.warn-list li { padding-left: 14px; position: relative; }
.warn-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px;
                        border-radius: 50%; background: var(--warn); }
td .warn-list { min-width: 22ch; }
.field-list { list-style: none; padding: 0; margin: 4px 0 0; font-size: 0.85rem; color: var(--muted);
              display: flex; gap: 4px 14px; flex-wrap: wrap; }

/* État vide : une invitation à agir, pas une case grise. Le bloc remplace le
   tableau : pictogramme, titre, phrase, et le geste qui remplira la page. */
.empty { text-align: center; padding: var(--sp-7) var(--sp-5); color: var(--muted); }
.empty p { margin-bottom: var(--sp-4); }
td.empty { text-align: left; padding: var(--sp-4) 14px; }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2);
               padding: var(--sp-8) var(--sp-5); background: var(--surface); border: 1px dashed var(--border-strong);
               border-radius: var(--radius-lg); }
.empty-state h3 { font-size: 1.15rem; font-weight: 600; margin: var(--sp-2) 0 0; }
.empty-state p { color: var(--muted); max-width: 46ch; margin: 0 0 var(--sp-3); }
.empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
              border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.empty-icon .nav-icon { width: 26px; height: 26px; opacity: 1; }
/* Fonctionnalité hors offre : une carte d'offre, pas un avertissement. Même
   encre que la colonne mise en avant des tarifs, un halo d'encre bleue dans
   l'angle, un bouton blanc. */
.locked-state { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr);
                gap: var(--sp-5); align-items: start; padding: var(--sp-6) var(--sp-7) var(--sp-6) var(--sp-6);
                background: var(--ink); color: var(--on-ink); border-radius: var(--radius-lg);
                box-shadow: 0 1px 2px rgba(20, 22, 28, 0.08), 0 24px 48px -28px rgba(20, 22, 28, 0.6); }
.locked-state::before { content: ""; position: absolute; right: -8rem; top: -10rem; width: 26rem; height: 26rem;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(154, 168, 255, 0.28), rgba(154, 168, 255, 0.06) 60%, transparent 100%); }
.locked-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
               border-radius: 50%; background: rgba(154, 168, 255, 0.14); color: #b8c2ff; border: 1px solid rgba(154, 168, 255, 0.3); }
.locked-icon .nav-icon { width: 24px; height: 24px; opacity: 1; }
.locked-body { position: relative; }
.locked-tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #b8c2ff;
              margin: 0 0 var(--sp-2); }
.locked-state h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; color: #ffffff; margin: 0 0 var(--sp-2); }
.locked-state p { color: var(--ink-muted); max-width: 60ch; }
.locked-state .actions { margin: var(--sp-4) 0 0; }
.locked-state .btn-primary { background: #ffffff; color: var(--ink); border-color: #ffffff; }
.locked-state .btn-primary:hover { background: #e8e9ee; border-color: #e8e9ee; color: var(--ink); }
.btn-on-ink-ghost { background: transparent; color: var(--on-ink); border-color: rgba(255, 255, 255, 0.28); }
.btn-on-ink-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); color: #ffffff; }

/* Détail d'une vérification : bandeau de résultat */
.verdict { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center;
           background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
           padding: var(--sp-5); margin-bottom: var(--sp-5); }
.verdict-meta { color: var(--muted); font-size: 0.95rem; margin: var(--sp-2) 0 0; }
.verdict .actions { margin: 0; justify-content: flex-end; }

/* ------------------------------------------------------------------ *
 * Vitrine : héro et attestation
 * ------------------------------------------------------------------ */
.hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: var(--sp-8);
        align-items: center; padding: var(--sp-8) 0 var(--sp-7); }
.hero h1 { font-size: clamp(2.5rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em;
           margin-bottom: var(--sp-5); font-weight: 700; text-wrap: balance; }
.hero .lead { font-size: 1.15rem; max-width: 52ch; }
.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-5) 0 var(--sp-3); }
.hero-note { color: var(--muted); font-size: 0.925rem; }

/* Orbes de fond de la vitrine : deux halos radiaux (encre, sceau) derrière le
   haut de page, sans image ni filtre. Ils sont portés par le corps, pas par
   le contenu, pour passer sous l'en-tête : l'en-tête et le héro ne font qu'un.
   overflow-x: clip coupe ce qui déborde à droite sans créer de zone de
   défilement (hidden en ferait une et casserait l'en-tête collant). */
body.layout-site { position: relative; isolation: isolate; overflow-x: clip; }
body.layout-site::before, body.layout-site::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
}
body.layout-site::before {
  width: 56rem; height: 56rem; top: -24rem; left: -14rem;
  background: radial-gradient(closest-side, rgba(43, 62, 196, 0.16), rgba(43, 62, 196, 0.05) 55%, transparent 100%);
}
body.layout-site::after {
  width: 44rem; height: 44rem; top: 2rem; right: -16rem;
  background: radial-gradient(closest-side, rgba(200, 52, 31, 0.12), rgba(200, 52, 31, 0.035) 55%, transparent 100%);
}

.sheet-stage { position: relative; margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.sheet { position: relative; background: var(--sheet); color: var(--sheet-ink); border-radius: 2px;
         box-shadow: var(--shadow-sheet); padding: var(--sp-5) var(--sp-5) var(--sp-4);
         font-family: var(--serif); font-size: 0.9rem; line-height: 1.45; }
.sheet-back { position: absolute; inset: var(--sp-4) var(--sp-4) var(--sp-5); transform: rotate(-2.6deg) translate(-8px, 10px);
              background: var(--sheet); border-radius: 2px; opacity: 0.85; box-shadow: var(--shadow-sheet);
              padding: 0; }
.sheet-head { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: flex-start;
              padding-bottom: var(--sp-3); border-bottom: 1px solid var(--sheet-ink); margin-bottom: var(--sp-4); }
.sheet-brand { font-weight: 600; font-size: 1rem; }
.sheet-kicker { font-style: italic; color: #4b5160; font-size: 0.85rem; }
.sheet-ref { font-family: var(--mono); font-size: 0.72rem; text-align: right; color: #4b5160; line-height: 1.5; }
.sheet-vat { font-family: var(--mono); font-size: 1.75rem; letter-spacing: 0.06em; margin: 0 0 var(--sp-4); font-weight: 500; }
.sheet-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px var(--sp-4); margin: 0 0 var(--sp-4); }
.sheet-grid dt { color: #4b5160; font-style: italic; }
.sheet-grid dd { margin: 0; }
.sheet-grid small { display: block; font-family: var(--font); font-size: 0.72rem; color: #4b5160; font-style: normal; }
.sheet .badge { font-family: var(--font); }
.sheet-foot { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
              border-top: 1px solid var(--sheet-rule); padding-top: var(--sp-3); font-size: 0.75rem; color: #4b5160;
              font-family: var(--font); }
.sheet-hash { font-family: var(--mono); }
.sheet-sign { position: relative; display: flex; align-items: flex-end; min-height: 96px; margin-bottom: var(--sp-3);
              font-size: 0.72rem; color: #4b5160; font-family: var(--font); }
.sheet-sign p { margin: 0; max-width: 60%; line-height: 1.5; }
.sheet-sign .mono { font-size: 0.7rem; }
.seal { position: absolute; right: 8px; bottom: -6px; width: 112px; height: 112px; border-radius: 50%;
        border: 2px solid var(--seal); box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 4px var(--seal);
        color: var(--seal); display: flex; flex-direction: column; align-items: center; justify-content: center;
        text-align: center; transform: rotate(-11deg); font-family: var(--font); text-transform: uppercase;
        letter-spacing: 0.12em; font-weight: 700; font-size: 0.8rem; line-height: 1.3; opacity: 0.9;
        mix-blend-mode: multiply; animation: stamp 520ms cubic-bezier(0.2, 0.9, 0.25, 1.15) 500ms both; }
/* Page publique /v/{hash} : le sceau se pose dans la colonne droite du verdict,
   qui lui sert de conteneur positionné. */
.proof-seal { position: relative; width: 124px; min-height: 124px; }
.proof-seal .seal { right: 6px; bottom: 6px; }
.verify-form .field { min-width: 18rem; flex: 1 1 26rem; max-width: 34rem; }
.seal span + span { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.08em; margin-top: 3px; }
@keyframes stamp {
  from { transform: rotate(-11deg) scale(1.9); opacity: 0; }
  to   { transform: rotate(-11deg) scale(1); opacity: 0.9; }
}

/* Sources : une ligne sobre, ce sont des institutions, pas des logos. */
/* Sources par pays : un tableau court — drapeau, autorité qui valide,
   registre qui nomme. Le drapeau est un emoji : ni image, ni style en ligne. */
.sources { padding: var(--sp-7) 0 0; font-size: 0.85rem; max-width: 52rem; }
.sources-label { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1rem; color: var(--muted); margin: 0; }
.sources-wrap { margin-top: var(--sp-3); background: transparent; border: 0; border-radius: 0; }
.sources-table th, .sources-table td { padding: 6px 10px 6px 0; }
.sources-table thead th { background: transparent; font-size: 0.75rem; }
.sources-table th[scope="row"] { font-weight: 500; white-space: nowrap; color: var(--text); }
.sources-table th[scope="row"] small, .sources-table td small { color: var(--muted); font-weight: 400; }
.sources-table .flag { font-size: 1.05em; margin-right: 0.15em; }
.sources-table tbody tr:hover td, .sources-table tbody tr:hover th { background: transparent; }
.sources-note { color: var(--muted); font-size: 0.85rem; max-width: 62ch; margin: var(--sp-3) 0 0; }

/* Sections de la vitrine */
.site-section { padding: var(--sp-8) 0 0; }
.site-section > h2 { margin-top: 0; font-size: clamp(1.75rem, 3vw, 2.4rem); letter-spacing: -0.015em;
                     max-width: 24ch; text-wrap: balance; }
.site-section > .lead { margin-bottom: var(--sp-6); }

/* Arguments : colonnes éditoriales, chacune avec son spécimen. */
.args-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); margin: var(--sp-6) 0 0;
             padding: 0; list-style: none; }
.args-list li { border-top: 1px solid var(--text); padding-top: var(--sp-4); display: flex; flex-direction: column; }
.args-list h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; line-height: 1.25; margin-bottom: var(--sp-3); }
.args-list p { color: var(--muted); font-size: 0.975rem; flex: 1 0 auto; }
.specimen { background: var(--sheet); color: var(--sheet-ink); border: 1px solid var(--border); border-top: 2px solid var(--ink);
            border-radius: 2px; box-shadow: 0 1px 2px rgba(20, 22, 28, 0.06), 0 12px 24px -16px rgba(20, 22, 28, 0.3);
            padding: var(--sp-3) var(--sp-4); font-size: 0.8125rem; margin-top: var(--sp-4); }
.specimen dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--sp-3); margin: 0; }
.specimen dt { font-family: var(--mono); color: var(--muted); }
.specimen dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.specimen .badge { font-size: 0.75rem; }
.specimen-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 4px 0; }
.specimen-row + .specimen-row { border-top: 1px dashed var(--border); }
.specimen-row .mono { font-size: 0.78rem; }
.specimen-ok { color: var(--ok); font-weight: 500; }
.specimen-more { margin: var(--sp-2) 0 0; padding-top: var(--sp-2); border-top: 1px dashed var(--border); font-size: 0.8rem; }
.specimen-more a { text-decoration: none; }
.specimen-more a:hover { text-decoration: underline; }

/* Étapes : une vraie séquence, donc numérotée et reliée. */
.steps-list { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid;
              grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); counter-reset: step; }
.steps-list li { position: relative; padding-top: var(--sp-5); }
.steps-list li::before { counter-increment: step; content: counter(step); position: absolute; top: -22px; left: 0;
                         font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--accent);
                         font-weight: 700; letter-spacing: -0.02em; background: var(--bg); padding-right: 12px; }
.steps-list li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--border-strong); z-index: -1; }
.steps-list h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); }
.steps-list p { color: var(--muted); font-size: 0.975rem; }

/* Bloc développeurs : encre, requête et réponse côte à côte. */
.dev { background: var(--ink); color: var(--on-ink); border-radius: var(--radius-lg); padding: var(--sp-6);
       margin-top: var(--sp-6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--sp-6); }
.dev-text h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: #ffffff; margin-bottom: var(--sp-3); }
.dev-text p { color: var(--ink-muted); }
.dev-facts { list-style: none; padding: 0; margin: var(--sp-4) 0 var(--sp-5); display: grid; gap: var(--sp-3); }
.dev-facts li { padding-left: 18px; position: relative; color: var(--on-ink); font-size: 0.95rem; }
.dev-facts li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 1px; background: var(--accent); }
.dev-code { display: grid; gap: var(--sp-3); min-width: 0; }
.dev-code figure { margin: 0; min-width: 0; }
.dev-code figcaption { font-size: 0.75rem; color: var(--ink-muted); margin-bottom: 6px; font-family: var(--mono); }
.dev-code pre { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: #e8e9ee;
                border-radius: var(--radius); margin: 0; font-size: 0.78rem; line-height: 1.5; }
.dev-code pre code { color: inherit; font-size: inherit; }
.dev-code .k { color: #9aa8ff; }
.dev-code .s { color: #8ed1a8; }
.dev-code .n { color: #f0b64a; }
.dev .btn { align-self: flex-start; }
.dev a:not(.btn) { color: #b8c2ff; }

/* Tarifs : un seul plateau, quatre colonnes qui partagent leurs bords (deux
   colonnes entre 861 et 1100 px, une seule en dessous de 860 px, cf. media
   queries plus bas). */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 0.9fr); margin-top: var(--sp-6);
         border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.plan { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6) var(--sp-5); border-left: 1px solid var(--border); }
.plan:first-child { border-left: 0; }
.plan h2, .plan h3 { font-family: var(--font); font-size: 1rem; font-weight: 600; margin: 0; color: var(--text); }
.plan-price { font-family: var(--serif); margin: var(--sp-2) 0 0; line-height: 1; }
.plan-price strong { font-size: 2.6rem; font-weight: 500; letter-spacing: -0.02em; }
.plan-price .muted { font-family: var(--font); font-size: 0.95rem; }
.plan-quota { color: var(--muted); margin: 0 0 var(--sp-3); }
.plan-features { padding-left: 0; margin: 0 0 var(--sp-5); list-style: none; display: grid; gap: 8px; font-size: 0.95rem; }
.plan-features li { padding-left: 22px; position: relative; }
.plan-features li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 12px; height: 7px;
                            border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; }
.plan-highlight { background: var(--ink); color: var(--on-ink); }
.plan-highlight h2, .plan-highlight h3, .plan-highlight .plan-quota, .plan-highlight .plan-price .muted { color: var(--ink-muted); }
.plan-highlight h2, .plan-highlight h3 { color: #ffffff; }
.plan-highlight .plan-features li::before { border-color: #8ed1a8; }
.plan-highlight .btn-primary { background: #ffffff; color: var(--ink); border-color: #ffffff; }
.plan-highlight .btn-primary:hover { background: #e8e9ee; border-color: #e8e9ee; color: var(--ink); }
.plan-tag { font-size: 0.75rem; color: #b8c2ff; font-weight: 500; margin: 0; }
.plans-note { margin-top: var(--sp-4); color: var(--muted); font-size: 0.925rem; }
/* Entreprise : cinquième colonne du plateau, sur fond papier et sans gros
   prix, pour ne pas peser autant que les quatre offres en libre-service. */
.plan-enterprise { background: var(--surface-alt); }
.plan-enterprise .plan-price strong { font-size: 1.5rem; font-weight: 600; letter-spacing: 0; line-height: 1.75; display: inline-block; }
.plan-enterprise .plan-features li::before { border-color: var(--muted); }

/* Tarifs : un tableau comparatif. Les offres en tête de colonne avec leur prix
   et leur bouton, une ligne par caractéristique, des sections. Starter est la
   colonne mise en avant ; Entreprise, sur papier, ferme le tableau. Sur un
   écran étroit la première colonne reste collée à gauche et le reste défile. */
.pricing-wrap { margin-top: var(--sp-6); }
.table-wrap table.pricing-table { min-width: 64rem; }
.pricing-table th, .pricing-table td { vertical-align: middle; }
.pricing-table thead th, .pricing-table thead td { background: var(--surface); border-bottom: 1px solid var(--border-strong);
  border-top: 3px solid transparent; white-space: normal; color: var(--text); padding: var(--sp-4) 14px; vertical-align: top; }
.pricing-table thead th { width: 16%; }
.pricing-table .pt-corner { width: 20%; }
.pricing-table .pt-name { display: block; font-size: 0.95rem; font-weight: 600; margin-bottom: var(--sp-2); }
.pricing-table .pt-price { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
/* Même hauteur de bloc que les montants (2rem), pour que le bouton tombe sur la même ligne. */
.pricing-table .is-enterprise .pt-price { font-size: 1.25rem; font-weight: 600; line-height: 2rem; letter-spacing: 0; }
/* Le sous-titre réserve trois lignes : celui d'Entreprise en prend trois, les
   boutons de toutes les colonnes restent sur la même ligne. */
.pricing-table .pt-period { display: block; font-size: 0.85rem; color: var(--muted); margin: 6px 0 var(--sp-3); font-weight: 400;
  line-height: 1.35; min-height: 4.05em; }
.pricing-table thead .btn { width: 100%; }
.pricing-table tbody th[scope="row"] { font-weight: 400; color: var(--text); font-size: 0.95rem; }
.pricing-table tbody td { font-size: 0.925rem; }
.pricing-table tr.pt-section th { background: var(--surface-alt); font-family: var(--font); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: var(--sp-2) 14px; position: static; }
.pricing-table tbody th[scope="row"], .pricing-table tbody td { padding: 12px 14px; }
.pricing-table tbody tr:hover td, .pricing-table tbody tr:hover th { background: color-mix(in srgb, var(--surface-alt) 55%, transparent); }
.pricing-table .is-highlight { background: var(--accent-soft); }
.pricing-table tbody tr:hover td.is-highlight { background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface-alt)); }
.pricing-table thead th.is-highlight { border-top: 3px solid var(--accent); }
.pricing-table .is-enterprise { background: var(--surface-alt); }
.pricing-table tbody tr:hover td.is-enterprise { background: color-mix(in srgb, var(--surface-alt) 85%, var(--border)); }
.pt-yes { display: inline-block; width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
          transform: rotate(-45deg); margin: 0 0 3px 2px; }
.pt-no { color: var(--border-strong); }
.pricing-table tbody th[scope="row"], .pricing-table thead .pt-corner { position: sticky; left: 0; z-index: 1; background: var(--surface); }
/* Tarifs, horodatage : deux cartes, l'inclus et l'option, sur la même ligne. */
.stamping .card h2 { margin-bottom: var(--sp-2); }
.stamping .card h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--sp-3); }
.stamping .card p:last-child { margin-bottom: 0; }
.stamping-grid { margin-top: var(--sp-5); }
/* FAQ : question à gauche, réponse à droite. */
.faq dl { margin: var(--sp-6) 0 0; }
.faq-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-4) var(--sp-7);
            padding: var(--sp-5) 0; border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item dt { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; margin: 0; }
.faq-item dd { margin: 0; color: var(--muted); max-width: 60ch; }

/* Bandeau final */
.cta-band { margin: var(--sp-9) 0 0; background: var(--accent); color: var(--on-accent);
            border-radius: var(--radius-lg); padding: var(--sp-8) var(--sp-6); display: grid;
            grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5); align-items: center; }
.cta-band h2 { margin: 0; color: inherit; font-size: clamp(1.6rem, 2.8vw, 2.2rem); max-width: 22ch; text-wrap: balance; }
.cta-band p { margin: 0; }
.cta-band .btn { background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); font-weight: 600; }
.cta-band .btn:hover { background: var(--surface); border-color: var(--surface); color: var(--accent-strong); }

/* Page tarifs et documentation */
.site-page { padding-top: var(--sp-7); }
.site-page > h1 { font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing: -0.02em; }
.billing { margin-top: var(--sp-8); }
.markdown { max-width: 76ch; }
.markdown h2 { font-size: 1.5rem; margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border); scroll-margin-top: 88px; }
.markdown h3 { font-size: 1.1rem; margin-top: var(--sp-6); scroll-margin-top: 88px; }
.markdown h1 { display: none; }
/* La marge va au cadre, pas au tableau : sinon une bande vide sépare le
   bord du cadre de la ligne d'en-tête. */
.markdown .table-wrap { margin: var(--sp-4) 0; }
.markdown table { margin: 0; }
.markdown pre { margin: var(--sp-4) 0; }
.markdown p, .markdown li { max-width: 72ch; }
/* Documentation : barre latérale collante à gauche (chapitres, page courante
   déroulée), une page par section à droite. Les routes portent un badge de
   méthode, les blocs de code une légende avec « Copier », les titres une
   ancre. Sur petit écran la barre se replie derrière un bouton. */
.docs-page { padding-top: var(--sp-6); }
.docs-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.docs-nav { position: sticky; top: 88px; max-height: calc(100vh - 100px); overflow-y: auto; font-size: 0.9rem;
            padding-right: var(--sp-3); scrollbar-width: thin; }
.docs-filter { position: relative; margin-bottom: var(--sp-4); }
.docs-filter .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); display: inline-flex; pointer-events: none; }
.docs-filter .search-icon .nav-icon { width: 16px; height: 16px; }
.docs-filter input[type="search"] { padding: 7px 10px 7px 32px; font-size: 0.9rem; -webkit-appearance: none; appearance: none; }
.docs-group { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
              margin: var(--sp-4) 0 var(--sp-1); padding: 0 10px; }
.docs-nav > ul > li { padding: 0; }
.docs-nav a { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; padding: 6px 10px;
              border-radius: var(--radius-sm); line-height: 1.35; }
.docs-nav a .mono { font-size: 0.78rem; overflow-wrap: anywhere; }
.docs-nav a:hover { background: var(--surface-alt); color: var(--text); }
.docs-nav a.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.docs-subs { margin: 2px 0 var(--sp-2) 12px; border-left: 1px solid var(--border); }
.docs-subs li { padding: 0; }
.docs-subs a { font-size: 0.85rem; color: var(--muted); padding: 4px 10px; border-radius: 0; }
.docs-subs a:hover { color: var(--text); background: transparent; }
.docs-empty { padding: var(--sp-2) 10px; font-size: 0.875rem; }
.btn.docs-toggle { display: none; }
.docs-main { min-width: 0; max-width: 80ch; }
.docs-head { margin-bottom: var(--sp-5); }
.docs-head h1 { font-size: 2rem; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.docs-head h1 .path { font-size: 1.6rem; background: none; padding: 0; letter-spacing: -0.01em; }
.docs-head .lead { max-width: 70ch; }
/* Badges de méthode : couleur de la famille, jamais la couleur seule. */
.method { display: inline-block; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
          padding: 3px 8px; border-radius: 5px; line-height: 1.2; vertical-align: middle; }
.method-mini { display: inline-block; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
               padding: 2px 5px; border-radius: 4px; line-height: 1.2; min-width: 3.4em; text-align: center; flex: none; }
.method-get, .method-mini.method-get { background: var(--ok-soft); color: var(--ok); }
.method-post, .method-mini.method-post { background: var(--accent-soft); color: var(--accent-strong); }
.method-put, .method-patch, .method-mini.method-put, .method-mini.method-patch { background: var(--warn-soft); color: var(--warn); }
.method-delete, .method-mini.method-delete { background: var(--bad-soft); color: var(--bad); }
.markdown h2 .path, .markdown h3 .path { background: none; padding: 0; font-size: 0.95em; }
.markdown h2 .method, .markdown h3 .method { margin-right: 4px; }
/* Ancres : visibles au survol du titre. */
.anchor { color: var(--border-strong); text-decoration: none; font-weight: 400; margin-left: 6px; opacity: 0; transition: opacity 120ms ease; }
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--accent); }
/* Blocs de code : une figure avec sa légende (langage, Copier). */
figure.code { margin: var(--sp-4) 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-alt); }
figure.code figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 4px 8px 4px 12px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 0.72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; }
figure.code figcaption .btn-copy { margin: 0; vertical-align: 0; text-transform: none; letter-spacing: 0; }
figure.code pre { margin: 0; border: 0; border-radius: 0; background: transparent; }
html:not(.js) figure.code .btn-copy { display: none; }
.markdown figure.code + p, .markdown figure.code + ul { margin-top: var(--sp-4); }
.docs-main .markdown h2 { font-size: 1.35rem; margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border); scroll-margin-top: 88px; }
.docs-main .markdown h3 { scroll-margin-top: 88px; }
.docs-main .markdown table th:first-child, .docs-main .markdown table td:first-child { white-space: nowrap; }
.docs-main .markdown td code, .docs-main .markdown th code { white-space: nowrap; }
/* Index et démarrage rapide. */
.quickstart { margin-top: var(--sp-7); }
.quickstart-steps { list-style: none; padding: 0; margin: var(--sp-4) 0 0; counter-reset: qs; display: grid; gap: var(--sp-4); }
.quickstart-steps li { position: relative; padding-left: 44px; }
.quickstart-steps li::before { counter-increment: qs; content: counter(qs); position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.quickstart-steps h3 { margin: 4px 0 var(--sp-2); font-size: 1.05rem; }
.quickstart-steps p { color: var(--muted); }
.quickstart-steps figure.code { margin-top: 0; }
.docs-index { margin-top: var(--sp-7); }
.docs-index-group { padding: var(--sp-4) 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-4); }
.docs-index-group h3 { margin: 0; font-size: 0.95rem; color: var(--muted); font-weight: 600; }
.docs-index-group li { padding: 3px 0; }
.docs-index-group a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.docs-index-group a:hover { text-decoration: underline; }
/* Pages voisines. */
.doc-pager { display: flex; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.doc-pager a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; font-weight: 500; max-width: 48%; }
.doc-pager a .muted { font-size: 0.8rem; font-weight: 400; }
.doc-pager .doc-next { text-align: right; margin-left: auto; }
.doc-pager a:hover { text-decoration: underline; }

/* Guides : index en liste éditoriale, article en colonne de lecture, appel
   à l'action sur encre, maillage vers les autres guides. */
.guides-list { list-style: none; padding: 0; margin: var(--sp-6) 0 0; max-width: 76ch; }
.guides-list li { padding: var(--sp-5) 0; border-top: 1px solid var(--border); }
.guides-list li:last-child { border-bottom: 1px solid var(--border); }
.guides-list a { text-decoration: none; }
.guides-list h2 { margin: 0 0 var(--sp-2); font-size: 1.35rem; }
.guides-list a:hover h2 { color: var(--accent-strong); }
.guides-list p { margin: 0 0 var(--sp-1); color: var(--muted); max-width: 66ch; }
.guide-head { max-width: 76ch; margin-bottom: var(--sp-6); }
.guide-head .lead { margin-bottom: var(--sp-3); }
.guide-meta { font-size: 0.875rem; margin: 0; }
.guide .markdown h2 { margin-top: var(--sp-7); padding-top: 0; border-top: 0; }
.guide-cta { max-width: 76ch; margin: var(--sp-8) 0 0; padding: var(--sp-6); background: var(--ink); color: var(--on-ink);
             border-radius: var(--radius-lg); display: grid; gap: var(--sp-4); }
.guide-cta h2 { margin: 0 0 var(--sp-2); font-size: 1.4rem; color: #ffffff; }
.guide-cta p { margin: 0; color: var(--ink-muted); }
.guide-cta .actions { margin: 0; }
.guide-cta .btn-primary { background: #ffffff; color: var(--ink); border-color: #ffffff; }
.guide-cta .btn-primary:hover { background: #e8e9ee; border-color: #e8e9ee; color: var(--ink); }
.guide-cta .btn:not(.btn-primary) { background: transparent; color: var(--on-ink); border-color: rgba(255, 255, 255, 0.28); }
.guide-cta .btn:not(.btn-primary):hover { border-color: rgba(255, 255, 255, 0.5); color: #ffffff; }
.guide-others { max-width: 76ch; margin-top: var(--sp-7); }
.guide-others h2 { font-size: 1.1rem; margin: 0 0 var(--sp-3); }
.guide-others li { padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
/* Abonnement. L'offre en cours est un reçu : en-tête, ligne de perforation
   (l'écho du pictogramme de la marque), puis les faits du mois. Le choix
   d'une offre tient sur une rangée de cartes radio ; la périodicité est un
   sélecteur à deux segments et le prix affiché suit, en CSS seul (:has). */
.receipt { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
           box-shadow: 0 1px 2px rgba(20, 22, 28, 0.04), 0 12px 32px -20px rgba(20, 22, 28, 0.25); }
.receipt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5);
                padding: var(--sp-5) var(--sp-6) var(--sp-5); }
.receipt-head h2 { font-family: var(--font); font-size: 0.95rem; font-weight: 600; color: var(--muted); margin: 0 0 var(--sp-2); }
.receipt-plan { font-family: var(--serif); font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; margin: 0 0 var(--sp-2); }
.receipt-status { margin: 0; color: var(--muted); }
.receipt-head form { margin: 0; }
.receipt-head .btn { white-space: nowrap; margin-top: var(--sp-1); }
/* La perforation : un pointillé, et deux encoches aux bords. Chaque encoche
   est un cercle entier à la couleur du fond, centré sur le bord ; la carte
   (overflow hidden) en rogne la moitié extérieure, il ne reste que l'arc
   intérieur et sa bordure, comme une découpe. */
.receipt-facts { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6);
                 margin: 0; padding: var(--sp-5) var(--sp-6) var(--sp-5); border-top: 1px dashed var(--border-strong); }
.receipt-facts::before, .receipt-facts::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%;
                 background: var(--bg); border: 1px solid var(--border); box-sizing: border-box; }
.receipt-facts::before { left: -9px; }
.receipt-facts::after { right: -9px; }
.receipt-facts dt { font-size: 0.85rem; color: var(--muted); margin: 0 0 var(--sp-1); }
.receipt-facts dd { margin: 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 700; line-height: 1.2;
                    font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.receipt-facts dd .muted { font-family: var(--font); font-size: 0.95rem; font-weight: 400; }
.receipt-facts .meter { margin-top: var(--sp-2); max-width: 180px; }
.receipt-foot { margin: 0; padding: 0 var(--sp-6) var(--sp-5); font-size: 0.925rem; }

.billing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.billing-head h2 { margin-bottom: var(--sp-1); }
.billing-head .section-intro { margin: 0; }
/* Le conteneur .segmented (piste, padding, radius) est défini une seule
   fois, avec la liste des vérifications : ces règles n'habillent que les
   boutons radio d'une périodicité de facturation. */
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmented span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; border-radius: 999px; font-weight: 500; color: var(--muted); }
.segmented small { font-size: 0.8rem; font-weight: 600; color: var(--ok); }
.segmented label:has(input:checked) span { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(20, 22, 28, 0.12); }
.segmented label:has(input:focus-visible) span { outline: 2px solid var(--accent); outline-offset: 1px; }

.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.offer { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5) var(--sp-5) var(--sp-5) 52px;
         background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; }
.offer input { position: absolute; left: var(--sp-5); top: 28px; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.offer:hover { border-color: var(--border-strong); }
.offer:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.offer:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.offer-name { font-weight: 600; font-size: 1.05rem; line-height: 18px; }
.offer-price { display: block; margin-top: var(--sp-3); line-height: 1; }
.offer-price strong { font-family: var(--serif); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.offer-price .muted { font-size: 0.9rem; }
.offer-price-year, .billing-form:has(input[name="interval"][value="year"]:checked) .offer-price-month { display: none; }
.billing-form:has(input[name="interval"][value="year"]:checked) .offer-price-year { display: block; }
.offer-quota { margin-top: var(--sp-3); font-weight: 500; }
.offer-features { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: grid; gap: 4px; color: var(--muted); font-size: 0.95rem; }
.offer-features li { padding-left: 18px; position: relative; }
.offer-features li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 10px; height: 6px;
                             border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.billing-submit { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.billing-submit p { margin: 0; font-size: 0.925rem; max-width: 52ch; }

/* Vérificateur public. Le formulaire vit dans le héro et sur /verify ; la
   page de résultat rejoue la feuille d'attestation de l'accueil, avec ce que
   l'aperçu n'a pas (référence, consultation, empreinte, horodatage) hachuré
   en gris à sa place : le visiteur voit exactement ce qui manque. */
.vat-form { display: flex; gap: var(--sp-3); align-items: stretch; max-width: 560px; margin: var(--sp-5) 0 var(--sp-3); }
.vat-form input[type="text"] { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.04em;
                               padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.vat-form input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.vat-form .btn { flex: 0 0 auto; }
.vat-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hero-actions-secondary { margin-top: var(--sp-4); }
.hero-actions-secondary .btn { font-size: 0.95rem; }
.verify-page .vat-form { margin-bottom: var(--sp-6); }
.verify-page .sheet-stage { max-width: 600px; margin: var(--sp-4) 0 0; }
.verify-page .sheet-stage .sheet-back { inset: var(--sp-4) var(--sp-4) var(--sp-5); }
.sheet-ghost { color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(20, 22, 28, 0.045) 4px 6px); border-radius: 2px; }
small.sheet-ghost { display: block; padding: 1px 4px; margin-left: -4px; }
.sheet-ref .sheet-ghost { padding: 0 4px; }
.sheet-sign p.sheet-ghost { padding: 2px 6px; margin-left: -6px; }
.sheet-no { color: var(--seal); font-weight: 600; }
.sheet-invalid .sheet-vat { color: var(--seal); }
.verify-cta { margin: var(--sp-6) 0 var(--sp-2); }
.verify-note { margin: 0; max-width: 52ch; }
.verify-unavailable { max-width: 600px; padding: var(--sp-5) var(--sp-6); margin: 0 0 var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.verify-unavailable h2 { font-size: 1.15rem; margin: 0 0 var(--sp-2); }
.verify-unavailable p { margin: 0 0 var(--sp-2); }

/* Mentions légales : une colonne de lecture. */
.legal { max-width: 68ch; }

/* Page d'erreur */
.error-page { text-align: center; padding: var(--sp-9) 0; }
.error-code { font-family: var(--serif); font-size: 6rem; font-weight: 400; color: var(--border-strong); line-height: 1; margin: 0 0 var(--sp-3); }
.error-page .lead { margin: 0 auto var(--sp-5); }

/* Pied de page */
/* Pied de page de la vitrine : la marque à gauche, trois colonnes de liens
   groupés par intention (vérifier, comprendre, akwito). Le tableau de bord
   n'a pas de pied de page : la barre latérale porte déjà tout. */
.footer { border-top: 1px solid var(--border); padding: var(--sp-7) 0 var(--sp-6); font-size: 0.925rem; color: var(--muted); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-7); align-items: start; }
.footer-inner p { margin: 0; }
.footer-brand strong { color: var(--text); font-size: 1.05rem; }
.footer-brand p + p { margin-top: var(--sp-1); max-width: 30ch; }
.footer-version { margin-top: var(--sp-4) !important; font-size: 0.8rem; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h2 { font-family: var(--font); font-size: 0.85rem; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* Pages d’authentification */
.auth { max-width: 440px; margin: var(--sp-7) auto var(--sp-8); }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-6); }
.auth h1 { font-size: 1.9rem; margin-bottom: var(--sp-2); }
.auth .lead { font-size: 1rem; margin-bottom: var(--sp-5); }
.auth .form, .auth .form-wide { max-width: none; }
.auth .btn-primary { width: 100%; padding: 11px; font-size: 1rem; margin-top: var(--sp-2); }
.auth-foot { text-align: center; font-size: 0.925rem; color: var(--muted); margin-top: var(--sp-5); }

/* ------------------------------------------------------------------ *
 * Administration
 * ------------------------------------------------------------------ */
.subnav { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-6); border-bottom: 1px solid var(--border); }
.subnav a { text-decoration: none; color: var(--muted); padding: 8px 12px; margin-bottom: -1px;
            border-bottom: 2px solid transparent; font-weight: 500; font-size: 0.95rem; }
.subnav a:hover { color: var(--text); }
.subnav a.active { color: var(--text); border-bottom-color: var(--accent); }
/* Histogramme en CSS pur : la hauteur arrive en pourcentage calculé côté Go. */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 180px; padding: var(--sp-4);
        background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; }
.bar { flex: 1 0 12px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: var(--sp-1); }
.bar-count { font-size: 0.65rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar-fill { width: 100%; height: var(--v, 0%); min-height: 2px; background: var(--accent); border-radius: 3px 3px 0 0; }

/* ------------------------------------------------------------------ *
 * Échelle de proportion 0–100 % (la CSP interdit l'attribut style).
 * --v alimente .meter-fill (largeur) et .bar-fill (hauteur).
 * ------------------------------------------------------------------ */
.p0 { --v: 0%; }
.p1 { --v: 1%; }
.p2 { --v: 2%; }
.p3 { --v: 3%; }
.p4 { --v: 4%; }
.p5 { --v: 5%; }
.p6 { --v: 6%; }
.p7 { --v: 7%; }
.p8 { --v: 8%; }
.p9 { --v: 9%; }
.p10 { --v: 10%; }
.p11 { --v: 11%; }
.p12 { --v: 12%; }
.p13 { --v: 13%; }
.p14 { --v: 14%; }
.p15 { --v: 15%; }
.p16 { --v: 16%; }
.p17 { --v: 17%; }
.p18 { --v: 18%; }
.p19 { --v: 19%; }
.p20 { --v: 20%; }
.p21 { --v: 21%; }
.p22 { --v: 22%; }
.p23 { --v: 23%; }
.p24 { --v: 24%; }
.p25 { --v: 25%; }
.p26 { --v: 26%; }
.p27 { --v: 27%; }
.p28 { --v: 28%; }
.p29 { --v: 29%; }
.p30 { --v: 30%; }
.p31 { --v: 31%; }
.p32 { --v: 32%; }
.p33 { --v: 33%; }
.p34 { --v: 34%; }
.p35 { --v: 35%; }
.p36 { --v: 36%; }
.p37 { --v: 37%; }
.p38 { --v: 38%; }
.p39 { --v: 39%; }
.p40 { --v: 40%; }
.p41 { --v: 41%; }
.p42 { --v: 42%; }
.p43 { --v: 43%; }
.p44 { --v: 44%; }
.p45 { --v: 45%; }
.p46 { --v: 46%; }
.p47 { --v: 47%; }
.p48 { --v: 48%; }
.p49 { --v: 49%; }
.p50 { --v: 50%; }
.p51 { --v: 51%; }
.p52 { --v: 52%; }
.p53 { --v: 53%; }
.p54 { --v: 54%; }
.p55 { --v: 55%; }
.p56 { --v: 56%; }
.p57 { --v: 57%; }
.p58 { --v: 58%; }
.p59 { --v: 59%; }
.p60 { --v: 60%; }
.p61 { --v: 61%; }
.p62 { --v: 62%; }
.p63 { --v: 63%; }
.p64 { --v: 64%; }
.p65 { --v: 65%; }
.p66 { --v: 66%; }
.p67 { --v: 67%; }
.p68 { --v: 68%; }
.p69 { --v: 69%; }
.p70 { --v: 70%; }
.p71 { --v: 71%; }
.p72 { --v: 72%; }
.p73 { --v: 73%; }
.p74 { --v: 74%; }
.p75 { --v: 75%; }
.p76 { --v: 76%; }
.p77 { --v: 77%; }
.p78 { --v: 78%; }
.p79 { --v: 79%; }
.p80 { --v: 80%; }
.p81 { --v: 81%; }
.p82 { --v: 82%; }
.p83 { --v: 83%; }
.p84 { --v: 84%; }
.p85 { --v: 85%; }
.p86 { --v: 86%; }
.p87 { --v: 87%; }
.p88 { --v: 88%; }
.p89 { --v: 89%; }
.p90 { --v: 90%; }
.p91 { --v: 91%; }
.p92 { --v: 92%; }
.p93 { --v: 93%; }
.p94 { --v: 94%; }
.p95 { --v: 95%; }
.p96 { --v: 96%; }
.p97 { --v: 97%; }
.p98 { --v: 98%; }
.p99 { --v: 99%; }
.p100 { --v: 100%; }

/* ------------------------------------------------------------------ *
 * Tableau de bord : barre latérale sur grand écran, barre supérieure en
 * dessous. Le balisage est identique ; seule la feuille de style change.
 * ------------------------------------------------------------------ */
@media (min-width: 900px) {
  body.layout-app {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: "nav main";
    min-height: 100vh;
  }
  body.layout-app .topbar {
    grid-area: nav; position: sticky; top: 0; align-self: start; height: 100vh;
    border-bottom: none; border-right: 1px solid var(--border); background: var(--surface);
  }
  body.layout-app .topbar-inner {
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    height: 100%; max-width: none; margin: 0; padding: var(--sp-5) var(--sp-4); gap: var(--sp-6);
  }
  body.layout-app .mainnav { flex-direction: column; align-items: stretch; margin-left: 0; gap: 2px; }
  body.layout-app .mainnav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); }
  body.layout-app .mainnav a.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
  body.layout-app .mainnav a.active::before { content: ""; position: absolute; left: -16px; top: 6px; bottom: 6px;
    width: 3px; border-radius: 0 2px 2px 0; background: var(--accent); }
  body.layout-app .brand { padding: 0 var(--sp-2); }
  body.layout-app .mainnav a.active .nav-icon { opacity: 1; }
  body.layout-app .topbar-user {
    margin-top: auto; flex-direction: column; align-items: stretch; gap: var(--sp-2); font-size: 0.875rem;
    padding-top: var(--sp-4); border-top: 1px solid var(--border);
  }
  body.layout-app .topbar-user .muted { word-break: break-all; font-size: 0.8rem; padding: 0 var(--sp-2); }
  body.layout-app .topbar-user .btn { justify-content: flex-start; }
  body.layout-app .main { grid-area: main; padding: var(--sp-7) 0 var(--sp-8); }
  body.layout-app .main .container { margin: 0; padding: 0 var(--sp-7); max-width: 1240px; }
}

/* Barre supérieure (mobile et tablette) : la navigation défile
   horizontalement plutôt que de casser la mise en page. */
@media (max-width: 899px) {
  .brand-tag { display: none; }
  .brand-name { font-size: 1.2rem; }
  .nav-sep { display: none; }
  body.layout-app .topbar-inner { flex-wrap: wrap; padding-top: var(--sp-3); padding-bottom: var(--sp-3); gap: var(--sp-3); }
  body.layout-app .mainnav { order: 3; width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto;
                             gap: var(--sp-1); padding-bottom: 2px; scrollbar-width: none; }
  body.layout-app .mainnav::-webkit-scrollbar { display: none; }
  body.layout-app .mainnav a { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
  body.layout-app .topbar-user { margin-left: auto; }
  body.layout-app .topbar-user .muted { display: none; }
  .section-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* Tarifs : quatre colonnes trop étroites entre 861 et 1100 px, deux rangées
   de deux plutôt qu'une carte isolée à un quart de largeur. */
@media (min-width: 861px) and (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan { border-top: 1px solid var(--border); }
  .plan:nth-child(-n+2) { border-top: 0; }
  .plan:nth-child(odd) { border-left: 0; }
  /* La cinquième colonne s'étale en bande sous les quatre autres. */
  .plan-enterprise { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-6); align-items: start; }
  .plan-enterprise .plan-features { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  .plan-enterprise .btn { justify-self: start; }
}

/* Vitrine : menu replié derrière un bouton quand le script est chargé. */
@media (max-width: 860px) {
  /* La recherche prend toute la largeur sur sa propre ligne, le contrôle
     segmenté et « Affiner » se replient sur la suivante. */
  .checks-search { flex-wrap: wrap; }
  .checks-search .search { flex-basis: 100%; max-width: none; }
  .grid-3, .grid-2, .hero, .dev, .docs-layout { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
  .footer-brand { grid-column: 1 / -1; }
  .offers { grid-template-columns: 1fr; }
  .receipt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receipt-head { flex-direction: column; }
  .receipt-head, .receipt-facts { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .receipt-foot { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .args-list, .steps-list, .plans { grid-template-columns: 1fr; }
  .plan { border-left: 0; border-top: 1px solid var(--border); }
  .plan:first-child { border-top: 0; }
  .faq-item, .cta-band { grid-template-columns: 1fr; }
  .hero { padding-top: var(--sp-6); gap: var(--sp-6); }
  .hero h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); }
  .site-section { padding-top: var(--sp-8); }
  .steps-list { gap: var(--sp-7); }
  h1 { font-size: 1.8rem; }
  .docs-nav { position: static; max-height: none; padding-right: 0; }
  html.js .btn.docs-toggle { display: inline-flex; margin-bottom: var(--sp-4); }
  html.js .docs-nav { display: none; }
  html.js .docs-nav.is-open { display: block; margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
  .docs-head h1 { font-size: 1.6rem; }
  .docs-head h1 .path { font-size: 1.2rem; }
  .docs-index-group { grid-template-columns: 1fr; gap: var(--sp-2); }
  .topbar-inner { flex-wrap: wrap; gap: var(--sp-3); }
  body.layout-site .mainnav { width: 100%; margin-left: 0; flex-wrap: wrap; gap: var(--sp-1); padding-bottom: var(--sp-2); }
  body.layout-site .mainnav a.btn { margin-left: auto; }
  html.js body.layout-site .btn.navtoggle { display: inline-flex; margin-left: auto; padding: 6px 10px; }
  html.js body.layout-site .mainnav { display: none; }
  html.js body.layout-site .mainnav.is-open { display: flex; flex-direction: column; align-items: stretch; }
  html.js body.layout-site .mainnav.is-open a { padding: 10px 12px; }
  html.js body.layout-site .mainnav.is-open a.btn { margin: var(--sp-2) 0 0; }
  .verdict { grid-template-columns: 1fr; }
  .verdict .actions { justify-content: flex-start; }
  /* Sur un écran étroit, la carte garde une hauteur lisible : la viewBox est
     recadrée sur son centre (preserveAspectRatio slice), où est l'Europe. */
  .globe-svg { height: 380px; }
  .globe-incidents, .globe-legend { position: static; width: auto; border-radius: 0; border-left: 0; border-right: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; }
  .globe-incidents { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .globe-legend { border-bottom: 0; padding-bottom: var(--sp-4); }
  .status-page .page-head { align-items: flex-start; }
  .status-strip { gap: var(--sp-5); }
  .status-count p.big-number { font-size: 1.8rem; }
  .toolbar > .popover { margin-left: 0; width: 100%; }
  .popover-panel { position: static; width: auto; margin-top: var(--sp-3); }
  .locked-state { grid-template-columns: 1fr; padding: var(--sp-5); }
  .sheet-stage { padding: var(--sp-3); }
  .sheet { padding: var(--sp-4); }
  .seal { width: 96px; height: 96px; font-size: 0.7rem; right: 0; bottom: -4px; }
  .sheet-sign p { max-width: 55%; }
}

/* Tableaux : lisibles au doigt, jamais responsables d'un débordement de page. */
@media (max-width: 640px) {
  /* Les jetons de filtre se replient, le compte passe en dessous plutôt que
     de se retrouver écrasé contre eux. */
  .filters-summary { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  th, td { padding: 8px 10px; font-size: 0.9rem; }
  .table-wrap table { min-width: 34rem; }
  .kv { grid-template-columns: 1fr; gap: var(--sp-1); }
  .kv dd { margin-bottom: var(--sp-3); }
  .btn { padding: 8px 12px; }
  .container { padding: 0 var(--sp-4); }
  .cta-band { padding: var(--sp-6) var(--sp-5); }
  .dev { padding: var(--sp-5); }
  .sheet-grid { grid-template-columns: 1fr; gap: 2px; }
  .sheet-grid dt { margin-top: 6px; }
  .vat-form { flex-direction: column; }
  .vat-form .btn { width: 100%; }
}

/* Respect de la préférence système « moins d'animations ». */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .seal { animation: none; }
}

/* Impression : une preuve doit sortir proprement du navigateur. */
@media print {
  body.layout-site::before, body.layout-site::after { display: none; }
  .topbar, .footer, .skip-link, .actions, .filter, .pagination, .subnav,
  .row-actions, .btn, .reveal, .backlink, .navtoggle { display: none !important; }
  body { background: #ffffff; color: #000000; display: block; }
  .main { padding: 0; }
  .container { max-width: none; padding: 0; }
  .card, table, .table-wrap, pre, th, td, .verdict { border-color: #999999 !important; background: #ffffff !important; box-shadow: none; }
  .badge { border: 1px solid #999999; color: #000000; background: #ffffff; }
  a { color: #000000; text-decoration: underline; }
  h2 { margin-top: var(--sp-5); }
  .table-wrap { overflow: visible; }
  /* Le JSON brut fait partie de la preuve : il doit s'imprimer même replié. */
  .raw > summary { display: none; }
  .raw > *:not(summary) { display: block; }
  pre { white-space: pre-wrap; word-break: break-all; }
}

/* Sélecteur de langue : deux codes, la langue courante en encre, l'autre en lien. */
.lang-switch { display: inline-flex; gap: .15rem; align-items: center; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; }
.lang-switch > * { padding: .2rem .35rem; border-radius: 4px; }
.lang-switch .lang-current { color: var(--text); font-weight: 700; }
.lang-switch a { color: var(--muted); text-decoration: none; }
.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--text); text-decoration: underline; }