/* ============================================================================
   TOKENS — la seule source de verite pour les couleurs, tailles et rythmes.
   Aucune couleur ne doit etre codee en dur ailleurs.
   ========================================================================= */

@layer reset, tokens, base, layout, components, pages, utilities;

@layer tokens {
:root {
  /* Pas de mode sombre : le site est lu en exterieur, ou un fond noir devient
     un miroir. On bloque aussi l'inversion forcee de certains navigateurs. */
  color-scheme: light;

  /* ---- 1. COULEURS DE MARQUE ------------------------------------------
     ATTENTION : les couleurs du logo ne sont PAS des couleurs de texte.
     Ratios mesures sur --c-paper (#FAF7F2) :
       #E8321A -> 4,28:1 sur blanc  = echoue AA en texte courant
       #C2200C -> 5,73:1            = OK, c'est le rouge "encre"
       #F5A800 -> 1,87:1            = decoratif uniquement
       #F5A800 -> 9,7:1 sur #0D0D0D = OK en texte sur fond noir            */
  --c-red-100: #FDE7E2;
  --c-red-300: #F4795F;
  --c-red-500: #E8321A;   /* rouge du logo — surfaces */
  --c-red-600: #C2200C;   /* rouge "encre" — TEXTE */
  --c-red-700: #94170A;
  --c-red-900: #4E0B04;

  --c-gold-100: #FFF1D6;
  --c-gold-300: #FFC94D;
  --c-gold-500: #F5A800;  /* or du logo — decoratif, ou texte sur noir */
  --c-gold-600: #C77F00;  /* or "encre" — TEXTE sur fond clair */
  --c-gold-700: #9A6200;

  --c-ink-900: #0D0D0D;
  --c-ink-800: #1A1A1A;
  --c-ink-700: #2B2B2B;
  --c-ink-500: #5A5A5A;   /* 6,4:1 — le gris le plus clair autorise */
  --c-ink-300: #9B9B9B;
  --c-ink-200: #CFC9BF;
  --c-ink-100: #E4E0D9;

  --c-paper: #FAF7F2;
  --c-paper-alt: #F1ECE3;
  --c-white: #FFFFFF;

  /* ---- 2. COULEURS SEMANTIQUES ----------------------------------------
     Les composants n'utilisent QUE celles-ci. Un contexte sombre se contente
     de les reassigner (voir .site-footer), sans dupliquer un seul style. */
  --c-bg: var(--c-paper);
  --c-bg-alt: var(--c-paper-alt);
  --c-surface: var(--c-white);
  --c-surface-2: var(--c-paper-alt);

  --c-text: var(--c-ink-900);
  --c-text-muted: var(--c-ink-500);
  --c-text-invert: var(--c-paper);
  --c-text-invert-muted: #C9C4BB;

  --c-link: var(--c-red-600);
  --c-link-hover: var(--c-red-700);

  --c-border: var(--c-ink-100);
  --c-border-strong: var(--c-ink-200);

  --c-accent: var(--c-red-500);
  --c-accent-2: var(--c-gold-500);

  --c-success: #1E7A46;  --c-success-bg: #E4F4EA;
  --c-warning: #C77F00;  --c-warning-bg: var(--c-gold-100);
  --c-danger:  #C2200C;  --c-danger-bg:  var(--c-red-100);
  --c-info:    #2C5AA0;  --c-info-bg:    #E5EDF9;

  /* Disciplines : on reste dans la marque, aucune teinte etrangere. */
  --c-swim: var(--c-gold-500);
  --c-bike: var(--c-red-500);
  --c-run:  var(--c-ink-900);

  --g-brand: linear-gradient(100deg, var(--c-red-500) 0%, var(--c-gold-500) 100%);
  --g-ink: linear-gradient(160deg, #0D0D0D 0%, #241008 60%, #3A0F06 100%);

  /* ---- 3. TYPOGRAPHIE -------------------------------------------------- */
  --ff-display: 'Clash Display', 'Archivo', system-ui, sans-serif;
  --ff-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  --fs-2xs: .75rem; --fs-xs: .8125rem; --fs-sm: .875rem; --fs-base: 1rem;
  --fs-md:   clamp(1.0625rem, 1.02rem + .22vw, 1.1875rem);
  --fs-lg:   clamp(1.25rem,   1.16rem + .45vw, 1.5rem);
  --fs-xl:   clamp(1.5rem,    1.32rem + .9vw,  2rem);
  --fs-2xl:  clamp(2rem,      1.65rem + 1.75vw, 3rem);
  --fs-3xl:  clamp(2.5rem,    1.85rem + 3.25vw, 4.5rem);
  --fs-hero: clamp(2.75rem,   1.9rem + 5.5vw,  6.5rem);

  --lh-none: 1; --lh-tight: 1.12; --lh-snug: 1.28; --lh-normal: 1.6; --lh-relaxed: 1.75;
  --ls-tightest: -.03em; --ls-tight: -.015em; --ls-wide: .04em; --ls-widest: .14em;
  --measure: 68ch;

  /* ---- 4. ESPACEMENTS (base 4 px) -------------------------------------- */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;   --sp-5: 1.25rem;
  --sp-6: 1.5rem; --sp-8: 2rem;   --sp-10: 2.5rem; --sp-12: 3rem;  --sp-14: 3.5rem;
  --sp-16: 4rem;  --sp-20: 5rem;  --sp-24: 6rem;

  --sp-section: clamp(3.5rem, 8vw, 7rem);
  --sp-section-sm: clamp(2rem, 5vw, 4rem);
  --sp-gutter: clamp(1rem, 4vw, 2.5rem);
  --sp-gap: clamp(1rem, 2.5vw, 2rem);

  /* ---- 5. GABARIT ------------------------------------------------------ */
  --container-max: 1200px;
  --container-wide: 1440px;
  --container-narrow: 760px;
  --header-h: 64px;
  --header-h-lg: 76px;
  --sidebar-w: 264px;
  --sidebar-w-rail: 76px;
  --topbar-h: 60px;

  /* ---- 6. RAYONS ------------------------------------------------------- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px;
  --r-pill: 999px; --r-circle: 50%;

  /* ---- 7. OMBRES ------------------------------------------------------- */
  --sh-0: none;
  --sh-1: 0 1px 2px rgb(13 13 13 / .06), 0 1px 3px rgb(13 13 13 / .08);
  --sh-2: 0 2px 6px rgb(13 13 13 / .07), 0 6px 14px rgb(13 13 13 / .08);
  --sh-3: 0 6px 16px rgb(13 13 13 / .09), 0 14px 34px rgb(13 13 13 / .10);
  --sh-4: 0 18px 48px rgb(13 13 13 / .18);
  --sh-brand: 0 8px 24px rgb(232 50 26 / .28);
  --sh-gold: 0 8px 24px rgb(245 168 0 / .30);

  /* ---- 8. BORDURES ----------------------------------------------------- */
  --bw-hair: 1px; --bw: 2px; --bw-thick: 4px; --bw-brand: 6px;

  /* ---- 9. MOUVEMENT ---------------------------------------------------- */
  --dur-instant: 80ms; --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; --dur-reveal: 700ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-color: color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
  --t-all: var(--t-color), transform var(--dur) var(--ease-out),
           box-shadow var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);

  /* ---- 10. EMPILEMENT --------------------------------------------------
     Leaflet utilise 400 a 800 EN INTERNE. .map cree son propre contexte
     d'empilement (isolation: isolate), sinon ses popups passeraient
     au-dessus du header. */
  --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200;
  --z-drawer: 300; --z-overlay: 350; --z-modal: 400; --z-toast: 500;

  /* ---- 11. VOILES ------------------------------------------------------
     Valeurs calculees, pas reglees a l'oeil. Sur le pixel le plus clair
     envisageable, texte blanc : .55 -> 7,45:1 (AAA) ; .62 -> 9,15:1 ;
     .78 -> 13,4:1. */
  --scrim-hero-top: .55;
  --scrim-hero-mid: .62;
  --scrim-hero-bottom: .78;
  --scrim-modal: rgb(13 13 13 / .62);
  --op-disabled: .45;

  /* ---- 12. POINTS DE RUPTURE (documentaires) ---------------------------
     Les custom properties NE FONCTIONNENT PAS dans @media. Les valeurs sont
     donc reecrites litteralement dans les media queries, et dupliquees dans
     public/js/config.js. Garder les trois en phase. */
  --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1440px;

  /* ---- 13. DIVERS ------------------------------------------------------ */
  --focus-ring-w: 3px;
  --focus-ring-offset: 2px;
  --hit-target: 44px;        /* WCAG 2.5.8 */
  --chevron-skew: -18deg;    /* l'angle des chevrons du logo */
}

/* Lecture en plein soleil : on epaissit et on assombrit. */
@media (prefers-contrast: more) {
  :root {
    --c-text-muted: var(--c-ink-700);
    --c-border: var(--c-ink-300);
    --c-border-strong: var(--c-ink-700);
    --bw-hair: 2px;
    --scrim-hero-top: .68;
    --scrim-hero-mid: .76;
    --scrim-hero-bottom: .85;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms; --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms;
  }
}
}

@layer tokens {
/* ============================================================================
   REFONTE — tokens complementaires et THEME SOMBRE.
   Le theme ne redefinit QUE les tokens semantiques : tous les composants
   existants suivent sans etre dupliques. On l'active en posant
   class="theme-dark" sur <body>, page par page.
   ========================================================================= */
:root {
  --r-2xl: 2.25rem;
  --dur-swap: 620ms;
  --ease-swap: cubic-bezier(.19, 1, .22, 1);
  --marquee-dur: 34s;

  /* Le balayage du bouton a sa propre duree ET sa propre courbe. --ease-out
     (cubic-bezier(.22,1,.36,1)) couvre 90 % du chemin dans le premier quart du
     temps : sur un disque qui grandit, cela se lit comme un claquement. Le
     `ease-out` simple du CSS monte beaucoup plus progressivement. */
  --dur-sweep: 800ms;
  --ease-sweep: cubic-bezier(.6, .04, .35, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-sweep: 1ms; --dur-swap: 1ms; }
}

/* Le fond du document lui-meme, sinon la zone d'elasticite reste blanche.
   Les hauteurs de header sont posees ICI et non sur .theme-dark : reset.css
   lit --header-h sur <html> pour son scroll-padding, et un token declare sur
   <body> ne remonterait pas jusqu'a lui. */
html:has(body.theme-dark) {
  background: #0B0B0E;
  color-scheme: dark;
  --header-h: 80px;
  --header-h-lg: 100px;
}

.theme-dark {
  color-scheme: dark;

  /* Fonds : quatre niveaux d'elevation, du plus profond au plus clair. */
  --c-bg: #0B0B0E;
  --c-bg-alt: #121216;
  --c-surface: #17171C;
  --c-surface-2: #202027;

  --c-text: #F7F4EF;
  --c-text-muted: #A7A29A;
  --c-text-invert: var(--c-ink-900);
  --c-text-invert-muted: var(--c-ink-700);

  /* L'or est la couleur d'accent : 9,7:1 sur le noir, le rouge n'y passe pas. */
  --c-accent: var(--c-gold-500);
  --c-accent-2: var(--c-red-500);
  --c-link: var(--c-gold-500);
  --c-link-hover: var(--c-gold-300);

  --c-border: rgb(255 255 255 / .09);
  --c-border-strong: rgb(255 255 255 / .20);

  /* Etats : fonds translucides, teintes eclaircies pour rester lisibles. */
  --c-success: #63D494;  --c-success-bg: rgb(30 122 70 / .20);
  --c-warning: #FFC94D;  --c-warning-bg: rgb(199 127 0 / .20);
  --c-danger:  #FF8069;  --c-danger-bg:  rgb(194 32 12 / .22);
  --c-info:    #9BBCF2;  --c-info-bg:    rgb(44 90 160 / .22);

  /* Sur fond noir, une ombre grise ne se voit pas : on assombrit et on ajoute
     le halo colore, signature du design de reference. */
  --sh-1: 0 1px 2px rgb(0 0 0 / .40);
  --sh-2: 0 2px 8px rgb(0 0 0 / .45), 0 8px 20px rgb(0 0 0 / .35);
  --sh-3: 0 8px 20px rgb(0 0 0 / .50), 0 20px 48px rgb(0 0 0 / .40);
  --sh-4: 0 24px 70px rgb(0 0 0 / .65);
  --sh-brand: 0 10px 34px rgb(232 50 26 / .35);
  --sh-gold: 0 10px 34px rgb(245 168 0 / .30);
  --sh-glow: 0 0 0 1px rgb(245 168 0 / .28), 0 18px 60px rgb(245 168 0 / .16);

  background: var(--c-bg);
  color: var(--c-text);
}
}