/* Tokenhood · landing. Généré par landing/build.mjs, ne pas modifier. */

/* lexend-latin-ext-wght-normal */
@font-face {
  font-family: 'Lexend Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/lexend-latin-ext-wght-normal.b5d815d420.woff2) format('woff2-variations');
  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;
}
/* lexend-latin-wght-normal */
@font-face {
  font-family: 'Lexend Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/lexend-latin-wght-normal.b7e7538f59.woff2) format('woff2-variations');
  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;
}
/* public-sans-latin-ext-wght-normal */
@font-face {
  font-family: 'Public Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/public-sans-latin-ext-wght-normal.3a00a32f02.woff2) format('woff2-variations');
  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;
}
/* public-sans-latin-wght-normal */
@font-face {
  font-family: 'Public Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/public-sans-latin-wght-normal.5ed4d31c98.woff2) format('woff2-variations');
  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;
}
/* jetbrains-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/fonts/jetbrains-mono-latin-ext-wght-normal.79bfdab9ba.woff2) format('woff2-variations');
  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;
}
/* jetbrains-mono-latin-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/fonts/jetbrains-mono-latin-wght-normal.18be452724.woff2) format('woff2-variations');
  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;
}

/* Copie de travail du design system Kosmio v2 « Horizon », versée le 2026-10-17.
   Source : espace Kosmio, 01-Strategie/design-system/kosmio.css (le site kosm.io fait foi pour les valeurs).
   Ne pas modifier ici : mettre à jour depuis la source, puis adapter design/tokenhood.css si besoin. */

/* ============================================================================
   KOSMIO DESIGN SYSTEM · v2 « Horizon »
   ----------------------------------------------------------------------------
   Socle unique de la marque ombrelle Kosmio.
   Source de verite : le site public kosm.io (Astro + Tailwind), fichier
   `tailwind.config.mjs` + `DESIGN.md`, cadre par `Specs/Design-Brief-Site-Kosmio-v1.md`.
   Toute divergence entre ce fichier et le site est un bug : le site fait foi
   pour les valeurs, ce fichier fait foi pour l'architecture des tokens.

   Registre par defaut : CLAIR (papier, editorial, institutionnel).
   Le sombre est un theme derive pour les tableaux de bord internes
   (Kosmio Control, OpsControl), pas un second socle.

   Tous les ratios de contraste annotes sont calcules WCAG 2.1 sur les surfaces
   reelles du systeme (papier #FAFAF7, blanc, craie #F3F1EC).
   ============================================================================ */

/* ============================================================================
   1. PRIMITIVES
   ============================================================================ */

:root {
  /* --- Teal Horizon : couleur de marque -------------------------------- */
  --kos-teal-50:  #e6f1ef;  /* voile de hero, fonds de section tres doux */
  --kos-teal-100: #cfe3df;
  --kos-teal-200: #a8ccc6;
  --kos-teal-300: #7db2aa;
  --kos-teal-400: #4f958c;
  --kos-teal-500: #2a7a71;  /* 4,87:1 sur papier · texte large uniquement */
  --kos-teal-600: #0e5450;  /* PRIMARY (site) · 8,36:1 sur papier */
  --kos-teal-700: #0c4744;
  --kos-teal-800: #0a3b38;  /* SECONDARY (site) · 11,84:1 sur papier */
  --kos-teal-900: #072826;

  /* --- Neutres : de l'encre au papier ---------------------------------- */
  --kos-encre:    #14201e;  /* texte principal · 16,00:1 sur papier */
  --kos-ardoise:  #424c49;  /* = encre 80% sur papier · 8,50:1 */
  --kos-ardoise-2:#4e5654;  /* = encre 75% · 7,22:1 */
  --kos-brume:    #59615f;  /* = encre 70% · 6,09:1 */
  --kos-brume-2:  #646c6a;  /* = encre 65% · 5,16:1 · PLANCHER texte */
  --kos-trait:    #e3e4e1;  /* = encre 10% · bordures, filets */
  --kos-trait-2:  #dee0dd;  /* = encre 12% · bordures marquees */
  --kos-craie:    #f3f1ec;  /* sections alternees */
  --kos-papier:   #fafaf7;  /* fond principal · jamais blanc pur */
  --kos-blanc:    #ffffff;  /* surface des cartes */

  /* Triplet RGB de l'encre, pour les opacites calculees en ligne :
     color: rgb(var(--kos-encre-rgb) / 0.65) */
  --kos-encre-rgb: 20 32 30;
  --kos-blanc-rgb: 255 255 255;

  /* --- Accents (parcimonie : jamais plus de 20% d'un ecran) ------------ */
  --kos-or-300:   #f2c98a;
  --kos-or-500:   #e8a33d;  /* aplat uniquement · 2,06:1, JAMAIS en texte */
  --kos-or-700:   #8a5a12;  /* variante texte · 5,65:1 sur papier */

  --kos-ciel-300: #a9cfe6;
  --kos-ciel-500: #6baed6;  /* aplat uniquement · 2,32:1, JAMAIS en texte */
  --kos-ciel-700: #38718f;  /* variante texte · 5,11:1 sur papier */

  /* --- Semantique metier ------------------------------------------------ */
  --kos-foret-500:      #2e7d5a;  /* aplat succes */
  --kos-foret-700:      #1f6647;  /* texte succes · 6,58:1 sur papier */
  --kos-terracotta-500: #a34a30;  /* erreur · 5,61:1 sur papier */
  --kos-terracotta-700: #8a3d27;

  /* --- Typographie ------------------------------------------------------ */
  --font-display: "Lexend Variable", "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Public Sans Variable", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Echelle fluide : mobile -> desktop, alignee sur `fontSize` du site */
  --text-display: clamp(2.5rem, 6vw, 4.5rem);      /* 40 -> 72 */
  --text-h1:      clamp(2.25rem, 5vw, 3.5rem);     /* 36 -> 56 */
  --text-h2:      clamp(1.625rem, 3.6vw, 2.5rem);  /* 26 -> 40 */
  --text-h3:      clamp(1.375rem, 2.4vw, 1.75rem); /* 22 -> 28 */
  --text-h4:      1.25rem;                          /* 20 */
  --text-h5:      1.0625rem;                        /* 17 */
  --text-h6:      0.9375rem;                        /* 15 */
  --text-lg:      1.125rem;                         /* 18 · chapo */
  --text-base:    1rem;                             /* 16 · corps */
  --text-sm:      0.875rem;                         /* 14 · legendes */
  --text-xs:      0.75rem;                          /* 12 · eyebrow, tags */

  --leading-display: 1.05;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-display: -0.025em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.2em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;  /* poids des titres · jamais 700/900 */
  --weight-semibold: 600;

  --measure: 68ch;   /* longueur de ligne cible du corps de texte */
  --measure-narrow: 46ch;

  /* --- Espacement : base 4px -------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;    --space-40: 10rem;   /* 160px : rythme inter-sections */

  --rythme-section: clamp(4rem, 10vw, 10rem);  /* 64 -> 160 */
  --gouttiere: clamp(1rem, 2vw, 1.5rem);       /* 16 -> 24 */
  --container: 80rem;        /* 1280px · max-w-7xl du site */
  --container-lecture: 45rem; /* 720px · colonne editoriale */

  /* --- Rayons ------------------------------------------------------------ */
  --radius-sm:   0.25rem;  /* 4  · filets, puces */
  --radius-md:   0.5rem;   /* 8  · champs, petites cartes */
  --radius-lg:   0.75rem;  /* 12 */
  --radius-card: 1rem;     /* 16 · carte standard (rounded-2xl du site) */
  --radius-xl:   1.5rem;   /* 24 · grands blocs, bannieres */
  --radius-pill: 9999px;   /* boutons, tags, badges */

  /* --- Ombres : discretes. Le systeme repose sur le filet, pas l'ombre --- */
  --shadow-xs: 0 1px 2px rgb(var(--kos-encre-rgb) / 0.04);
  --shadow-sm: 0 1px 3px rgb(var(--kos-encre-rgb) / 0.06), 0 1px 2px rgb(var(--kos-encre-rgb) / 0.04);
  --shadow-md: 0 8px 20px -8px rgb(var(--kos-encre-rgb) / 0.12);
  --shadow-lg: 0 20px 40px -16px rgb(var(--kos-encre-rgb) / 0.16);

  /* --- Mouvement : sert la comprehension, jamais la decoration ---------- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --duree-micro: 150ms;
  --duree-base:  200ms;
  --duree-lente: 350ms;

  /* --- Profondeur -------------------------------------------------------- */
  --z-base: 0;      --z-dropdown: 100; --z-sticky: 200;  --z-fixed: 300;
  --z-overlay: 400; --z-modal: 500;    --z-popover: 600; --z-tooltip: 700;
}

/* ============================================================================
   2. TOKENS SEMANTIQUES · SOCLE CLAIR (defaut)
   Ne jamais utiliser une primitive directement dans un composant : passer
   toujours par un token semantique, sinon le theme sombre ne suit pas.
   ============================================================================ */

:root,
[data-theme="light"] {
  color-scheme: light;

  --color-primary:        var(--kos-teal-600);
  --color-primary-hover:  var(--kos-teal-700);
  --color-primary-subtle: var(--kos-teal-50);
  --color-primary-border: rgb(14 84 80 / 0.3);
  --color-on-primary:     var(--kos-blanc);

  --color-secondary:       var(--kos-teal-800);
  --color-secondary-hover: var(--kos-teal-900);
  --color-on-secondary:    var(--kos-blanc);

  --color-accent:         var(--kos-or-500);   /* aplat */
  --color-accent-text:    var(--kos-or-700);   /* texte */
  --color-on-accent:      var(--kos-encre);
  --color-info:           var(--kos-ciel-500); /* aplat */
  --color-info-text:      var(--kos-ciel-700); /* texte */
  --color-success:        var(--kos-foret-500);
  --color-success-text:   var(--kos-foret-700);
  --color-warning:        var(--kos-or-500);
  --color-warning-text:   var(--kos-or-700);
  --color-error:          var(--kos-terracotta-500);
  --color-error-text:     var(--kos-terracotta-500);

  --surface:         var(--kos-papier);
  --surface-raised:  var(--kos-blanc);
  --surface-sunken:  var(--kos-craie);
  --surface-inverse: var(--kos-teal-800);

  --text:           var(--kos-encre);
  --text-body:      var(--kos-ardoise);
  --text-secondary: var(--kos-brume);
  --text-muted:     var(--kos-brume-2);   /* plancher AA */
  --text-inverse:   var(--kos-blanc);
  --text-link:      var(--color-primary);

  --border:        var(--kos-trait);
  --border-strong: var(--kos-trait-2);
  --focus-ring:    var(--color-primary);

  --voile-hero: linear-gradient(to bottom, var(--kos-teal-50), transparent);
  --voile-papier: linear-gradient(180deg, #f9f6f4 0%, #f9f6f4 70%, transparent 100%);
}

/* ============================================================================
   3. THEME SOMBRE · derive du teal Horizon, reserve aux interfaces de pilotage
   Ce n'est pas un second socle : memes tokens, memes composants, valeurs
   reassignees. Aucun composant ne doit connaitre le theme actif.
   ============================================================================ */

[data-theme="dark"] {
  color-scheme: dark;

  --color-primary:        #4fa69b;  /* 6,50:1 sur le fond sombre */
  --color-primary-hover:  #5cb5a6;
  --color-primary-subtle: #10312d;
  --color-primary-border: rgb(79 166 155 / 0.35);
  --color-on-primary:     var(--kos-encre);

  --color-secondary:       #2a7a71;
  --color-secondary-hover: #349186;
  --color-on-secondary:    var(--kos-blanc);

  --color-accent:       var(--kos-or-500);
  --color-accent-text:  #edb45f;   /* 8,7:1 sur fond sombre */
  --color-on-accent:    var(--kos-encre);
  --color-info:         var(--kos-ciel-500);
  --color-info-text:    #8cc3e2;
  --color-success:      #3f9c74;
  --color-success-text: #4fb585;
  --color-warning:      var(--kos-or-500);
  --color-warning-text: #edb45f;
  --color-error:        #c25f42;
  --color-error-text:   #e08a6b;

  --surface:         #0b1312;
  --surface-raised:  #111b19;
  --surface-sunken:  #070e0d;
  --surface-inverse: var(--kos-papier);

  --text:           #e9f0ee;   /* 16,27:1 */
  --text-body:      #d3ddda;
  --text-secondary: #b4c2be;   /* 10,21:1 */
  --text-muted:     #8ca09b;   /*  6,82:1 · plancher */
  --text-inverse:   var(--kos-encre);
  --text-link:      var(--color-primary);

  --border:        rgb(233 240 238 / 0.12);
  --border-strong: rgb(233 240 238 / 0.2);
  --focus-ring:    #5cb5a6;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4);
  --shadow-md: 0 8px 20px -8px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 20px 40px -16px rgb(0 0 0 / 0.6);

  --voile-hero: linear-gradient(to bottom, #10312d, transparent);
  --voile-papier: none;
}

/* Suit le reglage systeme quand aucun theme n'est impose */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --color-primary: #4fa69b; --color-primary-hover: #5cb5a6;
    --color-primary-subtle: #10312d; --color-primary-border: rgb(79 166 155 / 0.35);
    --color-on-primary: var(--kos-encre);
    --color-secondary: #2a7a71; --color-secondary-hover: #349186; --color-on-secondary: var(--kos-blanc);
    --color-accent-text: #edb45f; --color-info-text: #8cc3e2;
    --color-success: #3f9c74; --color-success-text: #4fb585;
    --color-warning-text: #edb45f; --color-error: #c25f42; --color-error-text: #e08a6b;
    --surface: #0b1312; --surface-raised: #111b19; --surface-sunken: #070e0d;
    --surface-inverse: var(--kos-papier);
    --text: #e9f0ee; --text-body: #d3ddda; --text-secondary: #b4c2be; --text-muted: #8ca09b;
    --text-inverse: var(--kos-encre);
    --border: rgb(233 240 238 / 0.12); --border-strong: rgb(233 240 238 / 0.2);
    --focus-ring: #5cb5a6;
  }
}

/* ============================================================================
   4. DECLINAISONS SATELLITES
   La marque ombrelle tient par la typographie, la grille et le papier.
   Un satellite ne redefinit QUE sa couleur de signature. Il n'invente ni
   police, ni rayon, ni rythme : c'est ce qui le fait reconnaitre comme Kosmio.
   ============================================================================ */

.kos-certifiko {
  --color-primary:        #0e5450;
  --color-primary-hover:  #0a3b38;
  --color-primary-subtle: #fdf3e2;
  --color-accent:         var(--kos-or-500);
  --color-accent-text:    var(--kos-or-700);
}

.kos-perfia {
  --color-primary:        #0f6b5c;
  --color-primary-hover:  #0b5347;
  --color-primary-subtle: #e6f2ef;
  --color-accent:         #ba8748;
  --color-accent-text:    #7a5527;
}

.kos-datawood {
  --color-primary:        var(--kos-teal-600);
  --color-primary-hover:  var(--kos-teal-700);
  --color-accent:         var(--kos-ciel-500);
  --color-accent-text:    var(--kos-ciel-700);
}

/* ============================================================================
   5. BASE
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--surface);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--color-primary-subtle); color: var(--text); }

:where(a) { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:where(a):hover { color: var(--color-primary-hover); }

:where(img, svg, video) { max-width: 100%; height: auto; }

:where(hr) { border: 0; border-top: 1px solid var(--border); margin: var(--space-12) 0; }

/* Focus : visible partout, jamais supprime sans remplacement (RGAA 10.7) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================================
   6. TYPOGRAPHIE
   Titres en Lexend, poids 500. Corps en Public Sans. Mono pour les eyebrows,
   les chiffres et les identifiants techniques. Pas de justification.
   ============================================================================ */

:where(h1, h2, h3, h4, h5, h6), .kos-display {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--text);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

.kos-display { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h1 { font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-h2); line-height: var(--leading-tight); }
h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
h4 { font-size: var(--text-h4); line-height: var(--leading-snug); }
h5 { font-size: var(--text-h5); line-height: var(--leading-normal); }
h6 { font-size: var(--text-h6); line-height: var(--leading-normal); }

:where(p, li) { max-width: var(--measure); text-align: left; }
p { margin: 0 0 var(--space-4); }

.kos-chapo {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: var(--measure);
}

.kos-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.kos-legende { font-size: var(--text-sm); color: var(--text-muted); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

/* ============================================================================
   7. MISE EN PAGE
   ============================================================================ */

.kos-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.kos-lecture { max-width: var(--container-lecture); margin-inline: auto; }

/* Rythme vertical du site : 160px entre sections desktop, 64px mobile */
.kos-sections { display: flex; flex-direction: column; gap: var(--rythme-section); }

.kos-section-head { display: flex; flex-direction: column; margin-bottom: var(--space-10); }
.kos-section-head > p { max-width: var(--measure); }

.kos-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.kos-grid-2 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.kos-grid-3 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .kos-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .kos-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.kos-bande { background: var(--surface-sunken); padding-block: var(--rythme-section); }

/* ============================================================================
   8. COMPOSANTS
   ============================================================================ */

/* --- Bouton : pastille pleine ou contour, jamais d'ombre portee ---------- */
.btn, .kos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;                 /* cible tactile RGAA */
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duree-base) var(--ease),
              color var(--duree-base) var(--ease),
              border-color var(--duree-base) var(--ease),
              filter var(--duree-base) var(--ease);
}

.btn-primary  { background: var(--color-primary);   color: var(--color-on-primary); }
.btn-primary:hover  { filter: brightness(0.9); color: var(--color-on-primary); }
.btn-secondary { background: var(--color-secondary); color: var(--color-on-secondary); }
.btn-secondary:hover { filter: brightness(0.9); color: var(--color-on-secondary); }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary-subtle); }

.btn-outline-secondary {
  background: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.btn-outline-secondary:hover { background: var(--color-primary-subtle); }

/* Lien d'action fleche : le decalage du chevron remplace le soulignement */
.kos-lien-action {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-display); font-weight: var(--weight-medium);
  color: var(--color-secondary); text-decoration: none;
  transition: gap var(--duree-micro) var(--ease), color var(--duree-micro) var(--ease);
}
.kos-lien-action:hover { gap: var(--space-2); color: var(--color-primary); }

.btn-sm { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn-lg { min-height: 52px; padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }
.btn:disabled, .kos-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* --- Carte : filet 1px, fond eleve, rayon 16. L'ombre n'arrive qu'au survol */
.card, .kos-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  transition: border-color var(--duree-base) var(--ease), box-shadow var(--duree-base) var(--ease);
}
@media (min-width: 768px) { .card, .kos-card { padding: var(--space-8); } }

.card:hover, .kos-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.kos-card--statique:hover { border-color: var(--border); box-shadow: none; }

/* Carte bordee : filet degrade en diagonale, reprise du BorderedCard du site */
.kos-card-bordee {
  position: relative;
  padding: 4px;
  border-radius: var(--radius-card);
  background:
    radial-gradient(133px 133px at 0% 0%, var(--color-secondary) 0%, transparent 100%),
    radial-gradient(133px 133px at 100% 100%, var(--color-secondary) 0%, transparent 100%),
    var(--border);
}
.kos-card-bordee > * {
  background: var(--surface-raised);
  border-radius: calc(var(--radius-card) - 4px);
  padding: var(--space-6);
  height: 100%;
}

/* --- Tag / pastille ------------------------------------------------------ */
.badge, .kos-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-pill);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}
.badge-primary { background: var(--color-primary-subtle); color: var(--color-primary); border-color: var(--color-primary-border); }
.badge-accent  { background: rgb(232 163 61 / 0.12);  color: var(--color-accent-text);  border-color: rgb(232 163 61 / 0.35); }
.badge-info    { background: rgb(107 174 214 / 0.15); color: var(--color-info-text);    border-color: rgb(107 174 214 / 0.35); }
.badge-success { background: rgb(46 125 90 / 0.12);   color: var(--color-success-text); border-color: rgb(46 125 90 / 0.3); }
.badge-warning { background: rgb(232 163 61 / 0.12);  color: var(--color-warning-text); border-color: rgb(232 163 61 / 0.35); }
.badge-error   { background: rgb(163 74 48 / 0.1);    color: var(--color-error-text);   border-color: rgb(163 74 48 / 0.3); }
.badge-outline { background: transparent; color: var(--text-secondary); border-color: var(--border-strong); }

/* Badge de maturite sectorielle : l'asymetrie bois / logistique est assumee */
.kos-maturite { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; }
.kos-maturite::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Bloc KPI : le chiffre en mono, le libelle en Lexend ----------------- */
.kos-kpi { display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: var(--space-6); }
.kos-kpi__valeur, .stat-value {
  font-family: var(--font-mono); font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: var(--weight-medium); letter-spacing: -0.02em; color: var(--color-primary);
}
.kos-kpi__label { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--text); }
.kos-kpi__contexte, .stat-label { font-size: var(--text-sm); color: var(--text-muted); }

/* --- Banniere manifeste : le seul aplat plein autorise en grand format --- */
.kos-manifeste {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-primary); color: var(--color-on-primary);
}
@media (min-width: 768px) { .kos-manifeste { padding: var(--space-12) var(--space-12); } }
.kos-manifeste--secondaire { background: var(--color-secondary); color: var(--color-on-secondary); }
.kos-manifeste--accent { background: var(--color-accent); color: var(--color-on-accent); }
.kos-manifeste blockquote {
  margin: 0; font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-h3); line-height: var(--leading-snug); max-width: 56rem;
}
.kos-manifeste .kos-eyebrow { color: inherit; opacity: 0.8; margin: 0; }
.kos-manifeste cite { font-style: normal; font-size: var(--text-sm); opacity: 0.9; }

/* --- Citation ------------------------------------------------------------ */
.kos-citation {
  margin: 0; padding-left: var(--space-6);
  border-left: 2px solid var(--color-primary);
  font-size: var(--text-lg); color: var(--text-body);
}
.kos-citation footer { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }

/* --- Liste a coches ------------------------------------------------------ */
.kos-coches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.kos-coches li { position: relative; padding-left: var(--space-8); }
.kos-coches li::before {
  content: ""; position: absolute; left: 0; top: 0.35em;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--color-primary-subtle);
  box-shadow: inset 0 0 0 1px var(--color-primary-border);
}

/* --- Etapes de methode --------------------------------------------------- */
.kos-etapes { counter-reset: etape; display: grid; gap: var(--space-6); }
.kos-etape { counter-increment: etape; position: relative; padding-top: var(--space-8); border-top: 1px solid var(--border); }
.kos-etape::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute; top: var(--space-4); left: 0;
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-primary);
}

/* --- Formulaires ---------------------------------------------------------- */
.kos-champ { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.kos-champ label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.kos-champ input, .kos-champ select, .kos-champ textarea {
  width: 100%; min-height: 44px; padding: var(--space-3) var(--space-4);
  font-family: var(--font-body); font-size: var(--text-base); color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  transition: border-color var(--duree-base) var(--ease);
}
.kos-champ input::placeholder, .kos-champ textarea::placeholder { color: var(--text-muted); }
.kos-champ input:focus, .kos-champ select:focus, .kos-champ textarea:focus { border-color: var(--color-primary); }
.kos-champ__aide { font-size: var(--text-sm); color: var(--text-muted); }
.kos-champ__erreur { font-size: var(--text-sm); color: var(--color-error-text); }
.kos-champ[data-invalide] input, .kos-champ[data-invalide] textarea, .kos-champ[data-invalide] select { border-color: var(--color-error); }

/* --- Tableau -------------------------------------------------------------- */
.kos-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.kos-table th, .kos-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border); }
.kos-table th {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
  border-bottom-color: var(--border-strong);
}
.kos-table tbody tr:hover { background: var(--surface-sunken); }
.kos-table caption { caption-side: top; text-align: left; margin-bottom: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }

/* --- Navigation ----------------------------------------------------------- */
.nav-item, .kos-nav__lien {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-3);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-body); text-decoration: none; border-radius: var(--radius-md);
  transition: color var(--duree-micro) var(--ease), background-color var(--duree-micro) var(--ease);
}
.nav-item:hover, .kos-nav__lien:hover { color: var(--color-primary); background: var(--color-primary-subtle); }
.nav-item.active, .kos-nav__lien[aria-current="page"] { color: var(--color-secondary); background: var(--color-primary-subtle); }

/* --- Accordeon (details/summary, sans JS) -------------------------------- */
.kos-faq { border-top: 1px solid var(--border); }
.kos-faq details { border-bottom: 1px solid var(--border); }
.kos-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--text);
}
.kos-faq summary::-webkit-details-marker { display: none; }
.kos-faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-primary); transition: transform var(--duree-base) var(--ease); }
.kos-faq details[open] summary::after { transform: rotate(45deg); }
.kos-faq details > :not(summary) { padding-bottom: var(--space-5); color: var(--text-body); }

/* --- Barre de progression ------------------------------------------------- */
.progress, .kos-jauge { height: 8px; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.progress-bar, .kos-jauge__valeur { height: 100%; background: var(--color-primary); border-radius: inherit; transition: width var(--duree-lente) var(--ease); }
.progress-bar-accent { background: var(--color-accent); }

/* --- Fiche statistique (heritee des tableaux de bord) --------------------- */
.stat-card {
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
}

/* --- Lien d'evitement ----------------------------------------------------- */
.kos-evitement {
  position: absolute; left: -9999px;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: var(--weight-medium);
}
.kos-evitement:focus { left: var(--space-3); top: var(--space-3); z-index: var(--z-tooltip); }

/* ============================================================================
   9. UTILITAIRES
   Volontairement peu nombreux : ce fichier n'est pas un framework utilitaire.
   Sur les projets Tailwind, utiliser Tailwind ; ces classes servent aux pages
   HTML autonomes (notes, rapports, planches, exports).
   ============================================================================ */

.kos-texte-primaire   { color: var(--color-primary); }
.kos-texte-secondaire { color: var(--text-secondary); }
.kos-texte-attenue    { color: var(--text-muted); }
.kos-texte-inverse    { color: var(--text-inverse); }
.kos-fond-papier  { background: var(--surface); }
.kos-fond-eleve   { background: var(--surface-raised); }
.kos-fond-craie   { background: var(--surface-sunken); }
.kos-fond-inverse { background: var(--surface-inverse); color: var(--text-inverse); }
.kos-fond-voile   { background-image: var(--voile-hero); background-repeat: no-repeat; background-size: 100% 800px; }
.kos-filet { border: 1px solid var(--border); }
.kos-rayon-carte { border-radius: var(--radius-card); }
.kos-rayon-pastille { border-radius: var(--radius-pill); }

.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;
}

/* ============================================================================
   10. MOUVEMENT
   Apparition sobre, une seule fois, jamais de parallaxe ni de scroll-trigger
   permanent. `prefers-reduced-motion` neutralise tout.
   ============================================================================ */

[data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--duree-lente) var(--ease), transform var(--duree-lente) var(--ease); }
[data-reveal].est-visible { opacity: 1; transform: none; }

@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================================
   11. IMPRESSION
   ============================================================================ */

@media print {
  :root { --surface: #ffffff; --surface-raised: #ffffff; --text: #000000; --text-body: #1a1a1a; }
  .kos-manifeste, .kos-fond-inverse { background: none !important; color: #000 !important; border: 1px solid #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  .kos-evitement, nav { display: none !important; }
}

/* ============================================================================
   12. SCHEMAS ET INFOGRAPHIES
   Palette de series validee (six controles du protocole dataviz : bande de
   clarte, plancher de chroma, separation deutan/protan/tritan, plancher vision
   normale, contraste sur la surface). Ordre FIXE : la serie 1 est toujours le
   teal, quelle que soit la donnee. Ne jamais recycler ni generer une 6e teinte.
   Details et regles d'emploi : `kit-schemas.md`.
   ============================================================================ */

:root {
  /* Series categorielles · fond clair */
  --data-1: #008c7f;  /* teal Horizon, version data */
  --data-2: #e8a33d;  /* or */
  --data-3: #5aa0dc;  /* ciel */
  --data-4: #c4553a;  /* terracotta */
  --data-5: #4e5ba6;  /* indigo */
  --data-autre: #7c8a87;  /* « Autre », toujours en dernier, jamais une serie nommee */

  /* Rampe sequentielle · une seule teinte, clair vers fonce */
  --data-seq-1: #e6f1ef; --data-seq-2: #cfe3df; --data-seq-3: #a8ccc6;
  --data-seq-4: #7db2aa; --data-seq-5: #4f958c; --data-seq-6: #2a7a71;
  --data-seq-7: #0e5450;

  /* Rampe divergente · deux poles, gris neutre au centre */
  --data-div-neg-2: #a34a30; --data-div-neg-1: #d99a7f;
  --data-div-mid:   #e3e4e1;
  --data-div-pos-1: #6fa9a1; --data-div-pos-2: #0e5450;

  /* Etats · reserves, jamais utilises comme serie */
  --data-bon:      #2e7d5a;
  --data-attention:#e8a33d;
  --data-serieux:  #c4553a;
  --data-critique: #8a3d27;

  /* Habillage */
  --data-grille:  var(--border);
  --data-axe:     var(--border-strong);
  --data-texte:   var(--text);
  --data-legende: var(--text-secondary);
  --data-trait:   2px;   /* epaisseur des courbes */
  --data-ecart:   2px;   /* respiration entre deux aplats adjacents */
}

[data-theme="dark"] {
  /* Le sombre plafonne a 4 series : la bande de clarte exploitable y est plus
     etroite. Une 5e categorie se traite en petits multiples, pas en teinte. */
  --data-1: #0f9887;
  --data-2: #be861f;
  --data-3: #5a82d8;
  --data-4: #c24b58;
  --data-5: #7c8a87;
  --data-autre: #6b7875;

  --data-seq-1: #0a2b28; --data-seq-2: #0f423d; --data-seq-3: #165a52;
  --data-seq-4: #1f7268; --data-seq-5: #2f8c80; --data-seq-6: #46a698;
  --data-seq-7: #6cc0b3;

  --data-div-neg-2: #c24b58; --data-div-neg-1: #8a4a45;
  --data-div-mid:   #2a3634;
  --data-div-pos-1: #2f8c80; --data-div-pos-2: #6cc0b3;

  --data-bon: #4fb585; --data-attention: #edb45f;
  --data-serieux: #d97a5e; --data-critique: #c24b58;
}


/* Tokenhood · déclinaison satellite du design system Kosmio v2 « Horizon ».
   Charger kosmio.css avant ce fichier. Ne redéfinit que la couleur de signature. */
.kos-tokenhood {
  --color-primary:        var(--kos-teal-600);
  --color-primary-hover:  var(--kos-teal-700);
  --color-primary-subtle: var(--kos-teal-50);
  --color-accent:         var(--kos-or-500);
  --color-accent-text:    var(--kos-or-700);
}


/* Tokenhood · styles de la landing.
   Repose sur design/kosmio.css (tokens, base, typographie) et design/tokenhood.css
   (couleur de signature). Valeurs reprises de design/maquettes/landing.dc.html. */

.kos-tokenhood {
  --th-marge: clamp(1rem, 4vw, 3rem);         /* 16 -> 48 : marges de la maquette */
  --th-or-50: #fdf3e2;                        /* fond « en revue croisée » (design/tokens.md) */
  --th-champ: #a8aca9;                        /* bordure de champ, 3:1 sur papier */
  --th-filet-sombre: #1f5450;                 /* filet sur fond teal profond */
  color: var(--text);
}

.th-wrap,
.th-header__inner,
.th-hero__inner,
.th-section,
.th-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--th-marge);
}

#contenu:focus { outline: none; }

/* --- Typographie commune ------------------------------------------------- */

.th-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
}
.th-eyebrow--accent { color: var(--color-accent); }

.th-h2 {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.th-ico { stroke: var(--color-primary); flex-shrink: 0; }
.th-ico--or { stroke: var(--color-accent-text); }
.th-mark { stroke: var(--color-accent); flex-shrink: 0; }

/* --- Boutons -------------------------------------------------------------- */

.th-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8125rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree-micro) var(--ease), color var(--duree-micro) var(--ease);
}
.th-btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.th-btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.th-btn--outline { border-color: var(--color-primary); color: var(--color-primary); }
.th-btn--outline:hover { background: var(--color-primary-subtle); color: var(--color-primary-hover); }
.th-btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.th-btn--accent:hover { background: var(--kos-or-300); color: var(--color-on-accent); }
.th-btn--sm { padding: 0.5625rem 1.125rem; font-size: 0.9375rem; white-space: nowrap; }
.th-btn:disabled { opacity: 0.6; cursor: progress; }

/* --- En-tête -------------------------------------------------------------- */

.th-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgb(250 250 247 / 0.94);
  border-bottom: 1px solid var(--border);
}
.th-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 0.875rem;
}
.th-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 1.375rem;
  color: var(--color-secondary);
  text-decoration: none;
}
.th-brand:hover { color: var(--color-secondary); }
.th-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 0.9375rem;
}
.th-nav a { color: var(--text-body); text-decoration: none; }
.th-nav a:hover,
.th-nav a[aria-current="page"] { color: var(--color-primary); }
.th-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.th-lang {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
}
.th-lang a {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-body);
  text-decoration: none;
}
.th-lang a[aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); }

@media (max-width: 60rem) {
  .th-nav { display: none; }
}
@media (max-width: 26rem) {
  .th-header__inner { gap: var(--space-2); }
  .th-brand { font-size: 1.1875rem; gap: var(--space-2); }
  .th-brand .th-mark { width: 22px; height: 22px; }
  .th-header__actions { gap: var(--space-2); }
  .th-lang a { padding-inline: 0.5625rem; }
  .th-btn--sm { padding-inline: 0.875rem; }
}

/* --- Hero ----------------------------------------------------------------- */

.th-hero {
  background-image: var(--voile-hero);
  background-repeat: no-repeat;
  background-size: 100% 720px;
}
.th-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(4rem, 8vw, 7.5rem);
}
.th-hero__text {
  flex: 999 1 35rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.th-hero__title {
  margin: 0;
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.th-lead {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--text-body);
}
.th-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.th-hero__note {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  max-width: 60ch;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.th-hero__note .th-ico { margin-top: 2px; }
.th-hero__art { flex: 1 1 22.5rem; min-width: 0; max-width: 30rem; margin-inline: auto; }
.th-hero__svg { display: block; width: 100%; height: auto; }

/* Compteur public dans l'illustration (unités du viewBox 480 × 480) et légende. */
.th-hero__art { margin-block: 0; }
.th-art-counter__value {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: 76px;
  letter-spacing: -0.03em;
  fill: var(--kos-papier);
}
.th-art-counter__label { font-family: var(--font-body); font-size: 17px; fill: var(--kos-teal-100); }
.th-art-counter__missions { font-family: var(--font-body); font-size: 16px; fill: var(--kos-teal-200); }
.th-art-counter__number { font-family: var(--font-mono); font-weight: var(--weight-medium); fill: var(--color-accent); }
.th-art-caption { margin-top: var(--space-3); font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-secondary); }

/* --- Sections ------------------------------------------------------------- */

.th-section { padding-top: var(--rythme-section); }
.th-section--last { padding-bottom: var(--rythme-section); }
.th-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--container-lecture);
  margin-bottom: var(--space-12);
}

.th-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: none;
  padding: 1.75rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.th-card p { margin: 0; color: var(--text-body); }
.th-card__title { margin: 0; font-size: 1.375rem; line-height: 1.25; }
.th-card__title--sm { font-size: 1.25rem; line-height: var(--leading-snug); }

.th-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.th-step__n { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-primary); }

.th-grid { display: grid; gap: var(--space-6); }
.th-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr)); }
.th-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }

/* --- Une mission, de près ------------------------------------------------- */

.th-split { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
.th-split__text {
  flex: 1 1 25rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.th-split__lead { margin: 0; max-width: 58ch; color: var(--text-body); }
.th-split__aside {
  flex: 1 1 27.5rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.th-mission { gap: 0.875rem; box-shadow: var(--shadow-md); }
.th-mission__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.th-mission__id { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-secondary); }
.th-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 0.8125rem;
}
.th-badge--review { background: var(--th-or-50); color: var(--color-accent-text); }
.th-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.th-track__step { display: flex; flex-direction: column; gap: 0.375rem; max-width: none; }
.th-track__bar { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--border); }
.th-track__step--done .th-track__bar { background: var(--color-primary); }
.th-track__step--now .th-track__bar { background: var(--color-accent); }
.th-track__label { font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-secondary); }
.th-track__step--now .th-track__label { color: var(--text); font-weight: var(--weight-medium); }
.th-mission__foot { font-size: var(--text-sm); }
.th-card .th-mission__foot { color: var(--text-secondary); }
.th-note { margin: 0; font-size: 0.8125rem; color: var(--text-secondary); }

/* --- Pour qui ------------------------------------------------------------- */

.th-who {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: var(--space-8);
  background: var(--surface-sunken);
  border-radius: var(--radius-card);
}
.th-who__title { margin: 0; font-size: 1.5rem; line-height: 1.25; }
.th-who p { margin: 0; color: var(--text-body); }
.th-who__cta {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  text-decoration: none;
}
.th-who__cta::after { content: " →"; content: " →" / ""; }
.th-who__cta:hover { text-decoration: underline; }

/* --- Feuille de route ----------------------------------------------------- */

.th-roadmap-wrap { padding: var(--rythme-section) var(--th-marge) 0; }
.th-roadmap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4.5rem);
  background: var(--color-secondary);
  border-radius: var(--radius-xl);
  color: var(--kos-papier);
}
.th-roadmap__text {
  flex: 1 1 22.5rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.th-roadmap .th-h2 { color: var(--kos-papier); }
.th-roadmap :focus-visible { outline-color: var(--color-accent); }  /* le teal disparaît sur le fond profond */
.th-roadmap__text p:not(.th-eyebrow) { margin: 0; max-width: 52ch; color: var(--kos-teal-100); }
.th-roadmap__text .th-btn { align-self: flex-start; }
.th-lots {
  flex: 1 1 26.25rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.th-lot {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  max-width: none;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--th-filet-sombre);
}
.th-lot__n { min-width: 3rem; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--kos-teal-200); }
.th-lot__name { flex-grow: 1; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 1.125rem; }
.th-pill {
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.th-pill--live { background: var(--color-accent); color: var(--kos-encre); }
.th-pill--next { border-color: var(--kos-teal-400); color: var(--kos-teal-100); }

.th-pill--done { background: var(--kos-teal-100); color: var(--kos-teal-800); }

/* --- Page Feuille de route : en-tête ------------------------------------- */

.th-rm-hero .th-hero__inner { padding-bottom: var(--space-12); }
.th-rm-title { font-size: var(--text-h1); max-width: 15ch; }

.th-rings__track { stroke-width: 1.5; }
.th-rings__track--0 { stroke: var(--kos-ciel-500); opacity: 0.55; }
.th-rings__track--1 { stroke: var(--kos-ciel-500); opacity: 0.4; }
.th-rings__track--2 { stroke: var(--kos-teal-500); }
.th-rings__track--3 { stroke: var(--kos-teal-500); opacity: 0.75; }
.th-rings__track--4 { stroke: var(--kos-teal-500); opacity: 0.5; }
.th-rings__arc { stroke: var(--kos-ciel-500); stroke-width: 7; stroke-linecap: round; }
.th-rings__arrow { fill: none; stroke: var(--color-accent); stroke-width: 4.5; stroke-linecap: round; }
.th-rings__tip { fill: var(--color-accent); }
@media (prefers-reduced-motion: no-preference) {
  .th-rings__arc { animation: th-ring-draw 1.4s var(--ease) both; }
  @keyframes th-ring-draw { from { stroke-dasharray: 0 100; } }
}

.th-rm-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.th-rm-index__lot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: none;
  padding: 1rem 1.125rem 1.125rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.th-rm-index__lot--live { border-color: var(--color-primary-border); box-shadow: var(--shadow-md); }
.th-rm-index__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.th-rm-index__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
.th-rm-index__name { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 1.0625rem; line-height: var(--leading-snug); color: var(--text); }
.th-rm-index .th-pill--next { border-color: var(--border-strong); color: var(--text-secondary); }
.th-rm-bar { display: block; width: 100%; height: 6px; margin-top: auto; }
.th-rm-bar__track { fill: var(--border); }
.th-rm-bar__fill { fill: var(--color-primary); }
.th-rm-index__count { font-size: var(--text-sm); color: var(--text-secondary); }
.th-rm-index__count data { font-family: var(--font-mono); color: var(--text); }

.th-rm-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.th-rm-jump a {
  padding: 0.4375rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 0.875rem;
  color: var(--text-body);
  text-decoration: none;
}
.th-rm-jump a:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* --- Page Feuille de route : timeline -------------------------------------
   Une grille à trois colonnes par ligne : rail (dates, libellés), nœud sur l'axe, contenu.
   L'axe est tracé par chaque section : plein pour le passé, en tirets pour la suite. */

.th-flow {
  --tl-date: 8.5rem;
  --tl-node: 3rem;
  --tl-x: calc(var(--tl-date) + var(--tl-node) / 2);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--th-marge);
}
.th-tl-section { position: relative; padding-top: var(--rythme-section); }
.th-tl-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--tl-x) - 1px);
  border-left: 2px solid var(--kos-teal-200);
}
.th-tl-section--done::before { top: calc(var(--rythme-section) + 0.75rem); }
.th-tl-section--next::before { border-left-style: dashed; }
.th-tl-section--later::before { border-left: 2px dashed var(--border-strong); bottom: 4rem; }

.th-tl,
.th-tl-items { margin: 0; padding: 0; list-style: none; }
.th-tl-group { max-width: none; }

.th-tl-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-date) var(--tl-node) minmax(0, 1fr);
  align-items: start;
  max-width: none;
}
.th-tl-row::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  box-sizing: border-box;
}
.th-tl-rail { grid-column: 1; grid-row: 1; margin: 0; padding-top: 0.125rem; text-align: right; }
.th-tl-main { grid-column: 3; grid-row: 1; min-width: 0; }

/* Titres de section sur l'axe */
.th-tl-row--head::before {
  width: 12px;
  height: 12px;
  margin-top: 0.7rem;
  border: 2px solid var(--kos-teal-500);
  border-radius: 50%;
  background: var(--surface);
}
.th-tl-row--head .th-tl-rail { padding-top: 0.6875rem; }
.th-tl-main.th-section-head { margin-bottom: var(--space-4); }
.th-tl-lead { margin: 0; max-width: 60ch; color: var(--text-body); }

/* Lots */
.th-tl-row--lot { padding-block: var(--space-10) var(--space-3); }
.th-tl-row--lot::before {
  width: 22px;
  height: 22px;
  margin-top: 0.125rem;
  border: 2px solid var(--kos-teal-500);
  border-radius: 50%;
  background: var(--surface);
}
.th-tl-row--lot-done::before { background: var(--kos-teal-500); }
.th-tl-row--lot-live::before { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--surface); }
.th-tl-lotn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
  padding-top: 0.375rem;
}
.th-tl-lotname {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 1.5rem;
  line-height: var(--leading-snug);
  color: var(--text);
}
.th-tl-promise { display: block; margin: var(--space-1) 0 0; max-width: 62ch; color: var(--text-body); }

/* Missions */
.th-tl-items .th-tl-row { padding-top: 0.875rem; }
.th-tl-items .th-tl-row::before {
  width: 12px;
  height: 12px;
  margin-top: 0.4375rem;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--surface);
}
.th-tl-items .th-tl-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--border);
}
.th-tl-id { min-width: 4.25rem; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-primary); }
.th-tl-text { flex: 1 1 18rem; margin: 0; max-width: 68ch; color: var(--text); }
.th-tl-tokens { margin-left: auto; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; }
.th-tl-date { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; }
.th-tl-date--same {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.th-tl-row--done::before { background: var(--kos-teal-500); }
.th-tl-row--open::before { border: 2px solid var(--color-primary); background: var(--surface); }
.th-tl-row--waiting::before { border: 2px dashed var(--kos-brume-2); background: var(--surface); }
.th-tl-items .th-tl-row--planned::before { width: 8px; height: 8px; margin-top: 0.5625rem; background: var(--kos-trait-2); box-shadow: 0 0 0 4px var(--surface), inset 0 0 0 1px var(--kos-brume-2); }
.th-tl-row--planned .th-tl-id { color: var(--text-secondary); }
.th-tl-row--planned .th-tl-text { color: var(--text-body); }
.th-tl-items .th-tl-row--gate::before { width: 12px; height: 12px; margin-top: 0.375rem; border: 2px solid var(--text); border-radius: 2px; background: var(--surface); transform: rotate(45deg); }
.th-tl-row--gate .th-tl-main { border-bottom: 0; }
.th-tl-gatelabel { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.th-tl-gate { font-family: var(--font-display); font-weight: var(--weight-medium); }

.th-tl-note { margin: var(--space-6) 0 0 calc(var(--tl-date) + var(--tl-node)); max-width: 68ch; font-size: var(--text-sm); color: var(--text-secondary); }

/* États : forme, couleur et libellé (design/tokens.md) */
.th-state {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 2px 10px 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: nowrap;
}
.th-state__ico { flex-shrink: 0; }
.th-state--open { border-color: var(--color-primary); color: var(--color-primary); }
.th-state--progress { background: var(--color-primary-subtle); color: var(--color-primary); }
.th-state--review { background: var(--th-or-50); color: var(--color-accent-text); }
.th-state--waiting { border-color: var(--border-strong); color: var(--text-secondary); }
.th-state--done { background: var(--color-primary-subtle); color: var(--color-success-text); }

/* Aujourd'hui */
.th-tl-row--now::before { content: none; }
.th-tl-mark { grid-column: 2; grid-row: 1; justify-self: center; margin-top: 2.25rem; padding-block: 0.5rem; background: var(--surface); line-height: 0; }
.th-now {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--color-secondary);
  border-radius: var(--radius-xl);
  color: var(--kos-papier);
}
.th-now :focus-visible { outline-color: var(--color-accent); }
.th-now__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.th-now__asof { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--kos-teal-200); }
.th-now__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.th-now .th-h2 { color: var(--kos-papier); }
.th-now__lot { font-family: var(--font-mono); font-size: 0.55em; letter-spacing: 0.04em; color: var(--kos-teal-200); vertical-align: 0.2em; }
.th-now__promise { margin: 0; max-width: 60ch; color: var(--kos-teal-100); }
.th-now__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  gap: var(--space-4) var(--space-6);
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--th-filet-sombre);
}
.th-now__stats div { display: flex; flex-direction: column-reverse; gap: var(--space-1); }
.th-now__stats dt { font-size: var(--text-sm); color: var(--kos-teal-100); }
.th-now__stats dd { margin: 0; font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; color: var(--kos-papier); }
.th-now__stats div:first-child dd { color: var(--color-accent); }
.th-now__active { padding-top: var(--space-5); border-top: 1px solid var(--th-filet-sombre); }
.th-now__label { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--kos-teal-200); }
.th-now__active ul { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.th-now__active li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); max-width: none; }
.th-now__active .th-tl-id { color: var(--kos-teal-200); }
.th-now__text { flex: 1 1 18rem; color: var(--kos-papier); }

/* Ensuite */
.th-tl-row--cards::before { content: none; }
.th-next-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.th-next { gap: var(--space-4); box-shadow: var(--shadow-md); }
.th-next__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.th-next__lot { margin-right: auto; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-secondary); }
.th-next__title { margin: 0; font-size: 1.25rem; line-height: var(--leading-snug); }
.th-card .th-next__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.th-next__meta span + span::before { content: "·"; content: "·" / ""; margin-right: var(--space-2); }
.th-next__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: auto; padding-top: var(--space-2); }
.th-next__contract { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--color-primary); text-decoration: none; }
.th-next__contract::after { content: " →"; content: " →" / ""; }
.th-next__contract:hover { text-decoration: underline; }

/* Programme */
.th-later summary { cursor: pointer; list-style: none; }
.th-later summary::-webkit-details-marker { display: none; }
.th-later summary .th-tl-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); }
.th-later summary .th-tl-main::after {
  content: "+"; content: "+" / "";
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--color-primary);
}
.th-later[open] summary .th-tl-main::after { content: "−"; content: "−" / ""; }
.th-later summary .th-tl-lotname { grid-column: 1; grid-row: 1; }
.th-later__count { grid-column: 1; grid-row: 2; margin-top: var(--space-1); }
.th-later summary .th-tl-promise { grid-column: 1 / -1; grid-row: 3; }
.th-later summary:hover .th-tl-lotname { color: var(--color-primary); }
.th-later__count { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-secondary); }
.th-later summary:focus-visible { outline-offset: 4px; }

@media (max-width: 48rem) {
  .th-flow { --tl-date: 0px; --tl-node: 2rem; }
  .th-tl-row { grid-template-columns: var(--tl-node) minmax(0, 1fr); }
  .th-tl-row::before,
  .th-tl-mark { grid-column: 1; grid-row: 1 / span 2; }
  .th-tl-rail { grid-column: 2; grid-row: 1; padding-top: 0; text-align: left; }
  .th-tl-rail:empty { display: none; }
  .th-tl-main { grid-column: 2; grid-row: 2; }
  .th-tl-row--head .th-tl-rail { padding-top: 0.5rem; padding-bottom: var(--space-3); }
  .th-tl-row--head::before { margin-top: 0.5rem; }
  .th-tl-row--lot .th-tl-rail { padding-top: 0.25rem; padding-bottom: var(--space-1); }
  .th-tl-items .th-tl-row--done .th-tl-rail { padding-bottom: var(--space-1); }
  .th-tl-items .th-tl-row::before { margin-top: 0.3125rem; }
  .th-tl-mark { margin-top: 1.5rem; }
  .th-tl-note { margin-left: var(--tl-node); }
  .th-tl-tokens { margin-left: 0; }
}

/* --- Questions ------------------------------------------------------------ */

.th-faq {
  max-width: var(--container-lecture);
  margin-inline: auto;
  padding: var(--rythme-section) var(--th-marge) 0;
  box-sizing: content-box;
}
.th-faq .th-h2 { margin: var(--space-4) 0 var(--space-8); }
.th-faq details { border-bottom: 1px solid var(--border); padding-block: var(--space-5); }
.th-faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 1.125rem;
  color: var(--text);
}
.th-faq summary::-webkit-details-marker { display: none; }
.th-faq summary::after {
  content: "+"; content: "+" / "";
  font-family: var(--font-mono);
  color: var(--color-primary);
}
.th-faq details[open] summary::after { content: "−"; content: "−" / ""; }
.th-faq details p { margin: var(--space-3) 0 0; color: var(--text-body); }

/* --- Rejoindre ------------------------------------------------------------ */

.th-join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.th-join__text {
  flex: 1 1 26.25rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.th-join__text p { margin: 0; max-width: 56ch; color: var(--text-body); }
.th-form {
  flex: 1 1 23.75rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.th-form--soon { align-items: flex-start; gap: var(--space-5); }
.th-form--soon p { margin: 0; color: var(--text-body); }
.th-label { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--text); }
.th-form__row { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.th-input {
  flex: 1 1 13.75rem;
  min-width: 0;
  padding: var(--space-3) 0.875rem;
  background: var(--surface);
  border: 1px solid var(--th-champ);
  border-radius: var(--radius-md);
  font: var(--text-base) var(--font-body);
  color: var(--text);
}
.th-input::placeholder { color: var(--text-muted); }
.th-roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.9375rem;
  color: var(--text-body);
}
.th-roles legend { margin-bottom: 0.375rem; padding: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.th-check { display: inline-flex; align-items: center; gap: var(--space-2); }
.th-check input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--color-primary); }
.th-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.th-status { margin: 0; font-size: 0.9375rem; }
.th-status:empty { display: none; }
.th-status[data-kind="ok"] { color: var(--color-success-text); }
.th-status[data-kind="error"] { color: var(--color-error-text); }
.th-privacy { margin: 0; font-size: 0.8125rem; color: var(--text-secondary); }

/* --- Pied de page --------------------------------------------------------- */

.th-footer { background: var(--surface-sunken); border-top: 1px solid var(--border); }
.th-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-10);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.th-footer__brand { display: flex; flex-direction: column; gap: var(--space-2); }
.th-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 1.125rem;
  color: var(--color-secondary);
}
.th-footer__sign { display: inline-flex; align-items: center; gap: var(--space-2); }
.th-footer__kosmio { display: block; width: auto; height: 1.75rem; }
.th-footer__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }

/* --- Pages de texte ------------------------------------------------------- */

.th-prose {
  max-width: var(--container-lecture);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) var(--th-marge) var(--rythme-section);
  box-sizing: content-box;
}
.th-prose__title { margin: var(--space-3) 0 var(--space-6); font-size: var(--text-h1); }
.th-prose__intro { font-size: var(--text-lg); color: var(--text-body); }
.th-prose h2 { margin: var(--space-10) 0 var(--space-4); font-size: 1.5rem; line-height: var(--leading-snug); }
.th-prose p { color: var(--text-body); }
.th-rows { display: grid; gap: var(--space-3); margin: 0; }
.th-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.th-rows dt { color: var(--text-secondary); }
.th-rows dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.th-prose__updated { margin-top: var(--space-10); font-size: var(--text-sm); color: var(--text-secondary); }
.th-notfound section + section { margin-top: var(--space-16); padding-top: var(--space-10); border-top: 1px solid var(--border); }

@media (max-width: 40rem) {
  .th-rows > div { grid-template-columns: 1fr; gap: var(--space-1); }
}