/* =============================================================================
   CROSSTENSOR — TOKENS DE PRODUCTION
   Généré à partir de ct-ui/ct-ui.css (design-system/), namespace .ct-ui retiré.
   .ct-ui était un scope de démonstration pour isoler le catalogue ; ces
   tokens sont désormais posés sur `:root` et valent pour tout le site.

   Trois façons d'activer le thème sombre (inchangées) :
     .ct-theme-dark   sur n'importe quel conteneur — section, carte, aside.
     .ct-theme-dark   sur <body> pour la page entière.
     .theme-auto      suit `prefers-color-scheme` du système (remplace
                       l'ancien .ct-ui--auto, qui n'a plus de sens hors namespace).

   Trois thèmes de bloc, posables sur n'importe quel conteneur de section :
     .ct-theme-light  Blanc — fond blanc pur, texte/bordures gris (défaut).
     .ct-theme-grey   Gris — fond très légèrement teinté (#F7F8FA, écart
                      ténu avec le blanc), cartes internes blanches.
     .ct-theme-dark   Dark — fond sombre (voir ci-dessus).
   Une section est toujours claire (White ou Grey) OU sombre, jamais les
   deux — voir §13 de ct-components.css pour la règle complète.
   ========================================================================== */

/* Plus Jakarta Sans auto-hébergée (voir ECARTS.md) : remplace le
   <link> Google Fonts précédent, qui ajoutait une chaîne de requêtes
   bloquante hors du domaine (googleapis.com -> gstatic.com) avant même
   de pouvoir peindre le texte — mesuré par Lighthouse comme le principal
   poste de "render-blocking requests". Un seul fichier par variante
   (latin/latin-ext), chacun couvrant en réalité toutes les graisses de
   400 à 800 (police variable) — 800 utilisée uniquement par
   css/pages/guide.css ; vérifié que Google sert le même fichier unique
   pour 400/500/600/700/800, reproduit ici à l'identique avec la syntaxe
   d'intervalle `font-weight: 400 800`.
   Sous-ensembles cyrillic-ext et vietnamese exclus : site FR/EN
   uniquement, aucun de ces caractères n'apparaît sur le site. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin-ext.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;
}

:root {
  /* ---- Couleurs (spécification projet) ---- */
  --ct-color-primary: #1A1F36;
  --ct-color-secondary: #4A5AFF;
  --ct-color-accent-green: #00C896;
  --ct-color-accent-orange: #FF8A00;
  --ct-color-accent-red: #FF4D4F;

  --ct-color-bg: #FFFFFF;
  --ct-color-bg-alt: #FFFFFF;
  --ct-color-border: #E2E4E8;

  --ct-color-text: #1A1F36;
  --ct-color-text-light: #6B7280;

  /* ---- Couleurs dérivées : conformité AA obligatoire ----
     Les accents ci-dessus sont des couleurs de SURFACE. Utilisés comme
     couleur de TEXTE sur fond clair ils échouent le seuil AA (4.5:1) :
       #00C896 → 2.16:1   #FF8A00 → 2.36:1   #FF4D4F → 3.27:1
     Les variantes `-ink` ci-dessous conservent la teinte et passent AA.
     Règle : `-ink` pour le texte et les icônes, la couleur de base pour
     les aplats, les points de badge, les barres et les traits. */
  --ct-color-accent-green-ink: #008060;   /* 4.93:1 sur blanc · 4.51:1 sur --ct-color-green-soft */
  --ct-color-accent-green-aaa: #00634B;   /* 7.28:1 sur blanc */
  --ct-color-accent-orange-ink: #AB5C00;  /* 4.93:1 sur blanc · 4.53:1 sur --ct-color-orange-soft */
  --ct-color-accent-red-ink: #C7393B;     /* 5.15:1 sur blanc · 4.53:1 sur --ct-color-red-soft */
  --ct-color-secondary-aaa: #3141E0;      /* 7.09:1 sur blanc */
  --ct-color-secondary-hover: #3949E6;
  --ct-color-on-secondary: #FFFFFF;       /* texte sur aplat secondaire — 5.00:1 */

  /* Surface de survol des contrôles à fond neutre (bouton secondaire).
     Assombrissement de la surface, sans changement de teinte : c'est la règle
     de survol de la charte (§010) — opacité ou luminosité, jamais la teinte. */
  --ct-color-surface-hover: #EDF0F5;      /* texte #1A1F36 : 14,22:1 */
  --ct-color-surface-hover-on-dark: rgba(255, 255, 255, 0.10);

  /* Bordure interactive : `--ct-color-border` (1.27:1) est décorative.
     Un contour de champ ou de contrôle doit atteindre 3:1 (WCAG 1.4.11). */
  --ct-color-border-strong: #868D9B;      /* 3.33:1 sur blanc */

  /* Teintes de fond des encarts sémantiques */
  --ct-color-green-soft: #E6F9F3;
  --ct-color-orange-soft: #FFF4E5;
  --ct-color-red-soft: #FFECEC;
  --ct-color-secondary-soft: #EEF0FF;

  /* Surfaces sombres */
  --ct-color-surface-dark: #1A1F36;
  --ct-color-text-on-dark: #FFFFFF;
  --ct-color-text-on-dark-muted: rgba(255, 255, 255, 0.72);
  --ct-color-border-on-dark: rgba(255, 255, 255, 0.16);

  /* ---- Typographie ---- */
  --ct-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ct-font-family-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --ct-font-size-base: 16px;
  --ct-font-size-sm: 14px;
  --ct-font-size-lg: 20px;
  --ct-font-size-xl: 28px;
  --ct-font-size-xxl: 40px;
  --ct-font-size-xs: 12px;
  --ct-font-size-xxs: 11px;            /* légendes compactes sur mobile (bande écosystème), ajouté le 2026-10-20 */

  --ct-font-weight-regular: 400;
  --ct-font-weight-medium: 500;
  --ct-font-weight-bold: 700;

  --ct-line-height-tight: 1.2;
  --ct-line-height-snug: 1.35;
  --ct-line-height-base: 1.5;
  --ct-line-height-relaxed: 1.65;

  --ct-tracking-tight: -0.02em;
  --ct-tracking-caps: 0.08em;

  /* ---- Espacements ---- */
  --ct-space-xs: 4px;
  --ct-space-sm: 8px;
  --ct-space-md: 16px;
  --ct-space-lg: 24px;
  --ct-space-xl: 40px;
  --ct-space-xxl: 64px;

  /* ---- Rayons ---- */
  --ct-radius-sm: 4px;
  --ct-radius-md: 8px;
  --ct-radius-lg: 12px;
  --ct-radius-pill: 9999px;

  /* ---- Breakpoints (documentaires : `@media` n'accepte pas var()) ---- */
  --ct-breakpoint-sm: 640px;
  --ct-breakpoint-md: 768px;
  --ct-breakpoint-lg: 1024px;
  --ct-breakpoint-xl: 1280px;

  /* ---- Ombres (discrètes, jamais d'effet 3D) ---- */
  --ct-shadow-xs: 0 1px 2px rgba(26, 31, 54, 0.05);
  --ct-shadow-sm: 0 1px 3px rgba(26, 31, 54, 0.08);
  --ct-shadow-md: 0 4px 12px rgba(26, 31, 54, 0.08);

  /* ---- Transitions ---- */
  --ct-transition-fast: 120ms ease;
  --ct-transition-base: 200ms ease;

  /* ---- Layout ---- */
  --ct-container-max: 1200px;
  --ct-container-narrow: 760px;
  --ct-container-pad: clamp(16px, 5vw, 40px);
  --ct-focus-width: 3px;
  --ct-focus-offset: 2px;
}

/* ---- Neutres froids, halo, fond signature, rythme interne ---- */

:root {
  /* Neutres froids du deck — bordures et fonds de pastille des schémas */
  --ct-color-line-cool: #E3E9F0;
  --ct-color-wash-cool: #EAF0F5;

  /* Halo d'angle des surfaces sombres (coin haut-gauche du deck).
     Repli plat pour les navigateurs sans color-mix(). */
  --ct-glow-tint: rgba(0, 200, 150, 0.28);
  --ct-glow: radial-gradient(120% 90% at 0% 0%,
              var(--ct-glow-tint) 0%,
              rgba(26, 31, 54, 0.35) 38%,
              rgba(26, 31, 54, 0) 70%);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root { --ct-glow-tint: color-mix(in srgb, var(--ct-color-accent-green) 42%, var(--ct-color-primary)); }
}

:root {
  /* Deux variantes du même champ low-poly :
       header-bg.svg     — livré par la charte, base #0D3859 (navy de marque)
       header-bg-ui.svg  — même géométrie, retintée sur --ct-color-primary #1A1F36
     La variante UI est utilisée par défaut pour rester cohérente avec la palette
     du brief. L'override de marque (§0.1) doit repasser sur le fichier d'origine. */
  --ct-surface-signature: url('/images/header-bg-ui.svg');

  /* Voile de lisibilité : opaque côté texte, transparent côté visuel, pour que
     les facettes restent visibles sans jamais dégrader le contraste du texte. */
  --ct-veil: linear-gradient(100deg,
              rgba(26, 31, 54, 0.88) 0%,
              rgba(26, 31, 54, 0.62) 45%,
              rgba(26, 31, 54, 0.10) 100%);
}

:root {
  --ct-flow-xs: var(--ct-space-xs);
  --ct-flow-sm: var(--ct-space-sm);
  --ct-flow-md: var(--ct-space-md);
  --ct-flow-lg: var(--ct-space-lg);
}


/* =============================================================================
   THÈME SOMBRE — redéfinitions de tokens
   ========================================================================== */

.ct-theme-dark,
.ct-section--dark {
  /* ---- Surfaces ---- */
  --ct-color-bg: #0B0E1B;             /* fond de section */
  --ct-color-bg-alt: #1A1F36;         /* cartes, encarts — 1,18:1 vs bg */
  --ct-color-surface-dark: #05070F;   /* hero, CTA, code : plus profond que la page */

  /* ---- Lignes ---- */
  --ct-color-border: #2B3252;         /* décoratif */
  --ct-color-line-cool: #2B3252;
  --ct-color-wash-cool: #222840;
  --ct-color-border-strong: #6C76A8;  /* contrôles — 3,71:1 sur bg-alt */
  --ct-color-border-on-dark: rgba(255, 255, 255, 0.16);

  /* ---- Texte ---- */
  --ct-color-text: #F2F4F8;           /* 14,75:1 sur bg-alt */
  --ct-color-text-light: #A2ABC0;     /* 7,05:1 sur bg-alt */
  --ct-color-primary: #F2F4F8;        /* l'encre s'inverse */
  --ct-color-text-on-dark: #F2F4F8;
  --ct-color-text-on-dark-muted: #A2ABC0;

  /* ---- Accents ----
     Éclaircis et légèrement désaturés : les valeurs claires ne passent pas
     le contraste sur fond sombre. La teinte est conservée. */
  --ct-color-secondary: #6E7BFF;          /* aplats, boutons — 4,59:1 */
  --ct-color-secondary-hover: #8490FF;
  --ct-color-secondary-aaa: #98A5FF;      /* liens, eyebrow — 7,08:1 */
  --ct-color-on-secondary: #0B0E1B;       /* texte sur bouton plein — 5,44:1 */

  --ct-color-accent-green-ink: #3CF0BC;   /* 11,12:1 */
  --ct-color-accent-green-aaa: #3CF0BC;
  --ct-color-accent-orange-ink: #FFB259;  /* 9,10:1 */
  --ct-color-accent-red-ink: #FF9092;     /* 7,47:1 */

  /* ---- Teintes douces (fonds d'alerte) ---- */
  --ct-color-secondary-soft: #222856;
  --ct-color-green-soft: #163A45;
  --ct-color-orange-soft: #3F302D;
  --ct-color-red-soft: #3F263A;

  /* Survol : la surface s'éclaircit au lieu de s'assombrir. */
  --ct-color-surface-hover: #252B45;                            /* texte : 12,63:1 */
  --ct-color-surface-hover-on-dark: rgba(255, 255, 255, 0.10);

  /* ---- Élévation : sur fond sombre, l'ombre porte moins que la bordure ---- */
  --ct-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --ct-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55);
  --ct-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);

  /* ---- Fond signature ---- */
  --ct-veil: linear-gradient(100deg,
              rgba(5, 7, 15, 0.90) 0%,
              rgba(5, 7, 15, 0.66) 45%,
              rgba(5, 7, 15, 0.18) 100%);

  background-color: var(--ct-color-bg);
  color: var(--ct-color-text);
  color-scheme: dark;
}

/* Rétablit le clair à l'intérieur d'un bloc sombre.
   `.ct-theme-grey` (juste en dessous) partage l'essentiel de ce bloc : même
   palette de texte, d'accents et de boutons — seuls le fond et les tokens
   qui en dépendent directement (bordures, texte secondaire, accents-texte,
   survol) changent d'un thème clair à l'autre. Regroupés ici pour ne pas
   dupliquer les valeurs identiques (cf. docs/03-design-system.md,
   gouvernance des tokens). */
.ct-theme-light,
.ct-theme-grey {
  --ct-color-bg-alt: #FFFFFF;
  --ct-color-surface-dark: #1A1F36;
  --ct-color-border-on-dark: rgba(255, 255, 255, 0.16);
  --ct-color-text: #1A1F36;
  --ct-color-primary: #1A1F36;
  --ct-color-secondary: #4A5AFF;
  --ct-color-secondary-hover: #3949E6;
  --ct-color-secondary-aaa: #3141E0;
  --ct-color-on-secondary: #FFFFFF;
  --ct-color-accent-green-aaa: #00634B;
  --ct-color-secondary-soft: #EEF0FF;
  --ct-color-green-soft: #E6F9F3;
  --ct-color-orange-soft: #FFF4E5;
  --ct-color-red-soft: #FFECEC;
  --ct-color-surface-hover-on-dark: rgba(255, 255, 255, 0.10);
  --ct-shadow-xs: 0 1px 2px rgba(26, 31, 54, 0.05);
  --ct-shadow-sm: 0 1px 3px rgba(26, 31, 54, 0.08);
  --ct-shadow-md: 0 4px 12px rgba(26, 31, 54, 0.08);
  --ct-veil: linear-gradient(100deg,
              rgba(26, 31, 54, 0.88) 0%,
              rgba(26, 31, 54, 0.62) 45%,
              rgba(26, 31, 54, 0.10) 100%);
  color: var(--ct-color-text);
  color-scheme: light;
}

.ct-theme-light {
  --ct-color-bg: #FFFFFF;
  --ct-color-border: #E2E4E8;
  --ct-color-line-cool: #E3E9F0;
  --ct-color-wash-cool: #EAF0F5;
  --ct-color-border-strong: #868D9B;      /* 3.33:1 sur blanc */
  --ct-color-text-light: #6B7280;         /* 4.83:1 sur blanc */
  --ct-color-accent-green-ink: #008060;   /* 4.93:1 sur blanc */
  --ct-color-accent-orange-ink: #AB5C00;  /* 4.93:1 sur blanc */
  --ct-color-accent-red-ink: #C7393B;     /* 5.15:1 sur blanc */
  --ct-color-surface-hover: #EDF0F5;
  background-color: var(--ct-color-bg);
}

/* Thème gris : troisième déclinaison de bloc, entre White et Dark. Fond
   `#F7F8FA` posé sur demande explicite (2026-09-08) — c'est l'ancienne
   valeur par défaut de White avant que celui-ci ne passe à un blanc pur
   ci-dessus. Écart avec le blanc désormais ténu (contraste ≈ 1,03:1, non
   perceptible en usage réel) : à signaler si l'objectif reste un fond
   « nettement » différent du thème White, sinon la distinction entre les
   deux thèmes repose surtout sur les bordures/texte secondaire un peu plus
   soutenus ci-dessous, hérités du calibrage fait pour l'ancien fond plus
   marqué (`#E3E5EC`) et laissés tels quels. Bordures, texte secondaire et
   accents-texte restent AA (WCAG 2.1) sur ce fond : chaque valeur
   ci-dessous a été revérifiée à la fois sur le fond gris et sur blanc
   (cartes), le pire des deux cas l'emporte. */
.ct-theme-grey {
  --ct-color-bg: #F7F8FA;
  --ct-color-border: #CDD1DB;
  --ct-color-line-cool: #CDD3DE;
  --ct-color-wash-cool: #D7DEE8;
  --ct-color-border-strong: #717783;      /* 4.23:1 sur ce fond · 4.50:1 sur blanc */
  --ct-color-text-light: #606673;         /* 5.42:1 sur ce fond · 5.76:1 sur blanc */
  --ct-color-accent-green-ink: #006C51;   /* 6.05:1 sur ce fond · 6.43:1 sur blanc */
  --ct-color-accent-orange-ink: #914E00;  /* 6.00:1 sur ce fond · 6.38:1 sur blanc */
  --ct-color-accent-red-ink: #B33335;     /* 5.74:1 sur ce fond · 6.10:1 sur blanc */
  --ct-color-surface-hover: #D3D7E1;
  background-color: var(--ct-color-bg);
}

/* Suivi de la préférence système, en option. */
@media (prefers-color-scheme: dark) {
  .theme-auto,
  .theme-auto .ct-section {
    --ct-color-bg: #0B0E1B;
    --ct-color-bg-alt: #1A1F36;
    --ct-color-surface-dark: #05070F;
    --ct-color-border: #2B3252;
    --ct-color-line-cool: #2B3252;
    --ct-color-wash-cool: #222840;
    --ct-color-border-strong: #6C76A8;
    --ct-color-text: #F2F4F8;
    --ct-color-text-light: #A2ABC0;
    --ct-color-primary: #F2F4F8;
    --ct-color-secondary: #6E7BFF;
    --ct-color-secondary-hover: #8490FF;
    --ct-color-secondary-aaa: #98A5FF;
    --ct-color-on-secondary: #0B0E1B;
    --ct-color-accent-green-ink: #3CF0BC;
    --ct-color-accent-green-aaa: #3CF0BC;
    --ct-color-accent-orange-ink: #FFB259;
    --ct-color-accent-red-ink: #FF9092;
    --ct-color-secondary-soft: #222856;
    --ct-color-green-soft: #163A45;
    --ct-color-orange-soft: #3F302D;
    --ct-color-red-soft: #3F263A;
    --ct-color-surface-hover: #252B45;
    color-scheme: dark;
  }
  .theme-auto { background-color: var(--ct-color-bg); color: var(--ct-color-text); }
}