/* ==========================================================================
   Jetons du système de design : Cité des Formations et des Apprentissages
   Couleurs relevées sur le logo (voir BRIEF.md). Ne pas en inventer d'autres :
   les teintes dérivées sont des mélanges de ces couleurs (color-mix).
   ========================================================================== */
:root {
  /* Palette du logo */
  --navy: #1C1D3B;
  --sky: #38B3DA;
  --violet: #584797;
  --pink: #E63C64;
  --orange: #EF7741;
  --green: #8CC9A4;
  --yellow: #F7C111;
  --teal: #329B8D;
  --paper: #F7F5F0;
  --ink-2: #4A4C68;

  /* Rôles */
  --bg: var(--paper);
  --bg-raised: #FFFFFF;
  --bg-sunken: color-mix(in oklab, var(--paper) 88%, var(--navy) 12%);
  --ink: var(--navy);
  --ink-soft: color-mix(in oklab, var(--ink-2) 82%, var(--navy));
  --ink-mute: color-mix(in oklab, var(--ink-2) 90%, var(--paper));
  --line: color-mix(in oklab, var(--navy) 14%, transparent);
  --line-strong: color-mix(in oklab, var(--navy) 28%, transparent);
  --accent: var(--sky);
  --accent-ink: #0F6F8F; /* sky assombri pour du texte lisible (AA) sur fond clair */
  --action: var(--yellow);
  --action-ink: var(--navy);
  --focus: var(--sky);

  /* Couleur d'univers courante (surchargée par [data-univers]) */
  --u: var(--sky);
  --u-fond: var(--sky);       /* aplat qui porte du texte (voir les univers plus bas) */
  --u-ink: var(--navy);       /* texte posé SUR la couleur */
  --u-text: var(--accent-ink); /* la couleur utilisée comme texte sur fond clair */
  --u-soft: color-mix(in oklab, var(--u) 16%, var(--paper));

  /* Typographie */
  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Échelle fluide, resserrée le 09/10 pour la lisibilité (repère ecoledesmetiers82.fr) :
     à 1440 px, texte 16,6 px, titre de section 40 px, titre de page 56 px, accroche d'accueil 70 px. */
  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8rem);
  --step--1: clamp(0.86rem, 0.83rem + 0.1vw, 0.92rem);
  --step-0: clamp(1rem, 0.95rem + 0.1vw, 1.0625rem);
  --step-1: clamp(1.1rem, 1.02rem + 0.25vw, 1.25rem);
  --step-2: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
  --step-3: clamp(1.55rem, 1.3rem + 0.8vw, 2.05rem);
  --step-4: clamp(1.9rem, 1.5rem + 1.1vw, 2.6rem);
  --step-5: clamp(2.4rem, 1.7rem + 2vw, 4rem);
  --step-6: clamp(2.8rem, 1.8rem + 2.9vw, 4.5rem);
  --step-7: clamp(3rem, 2rem + 3vw, 5rem);
  /* Rôles de titres (à utiliser plutôt que des tailles en dur) */
  --t-hero: var(--step-6);    /* accroche de l'accueil, 72 px au plus */
  --t-page: var(--step-5);    /* titre de page, 64 px au plus */
  --t-number: var(--step-7);  /* grand chiffre décoratif */
  --t-giant: clamp(3.6rem, 2.4rem + 4vw, 6.5rem); /* chiffre géant (histoire, compteur) */

  --leading-tight: 0.95;
  --leading-snug: 1.12;
  --leading-body: 1.55;
  --tracking-display: -0.01em;
  --tracking-caps: 0.08em;

  /* Espacements (rythme 4 px, fluides pour les sections), resserrés d'environ 40 % */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.25rem;
  --space-l: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  --space-xl: clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
  --space-2xl: clamp(2.75rem, 2rem + 2.6vw, 4.5rem);
  --space-section: clamp(3.25rem, 2.4rem + 3vw, 5.75rem);
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.25rem);
  --container: 1380px;
  --container-narrow: 900px;

  /* Rayons : un seul système, rectangles nets (décision du 09/10). 20 px grandes surfaces,
     12 px cartes, 999 px puces et boutons. Les anciens noms « petal » sont conservés pour
     ne rien casser, mais valent désormais 999 px (pilule). */
  --radius-xs: 6px;
  --radius-s: 10px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-petal: 999px;
  --radius-petal-end: 999px;
  --radius-petal-card: 12px;

  /* Ombres en couches (teintées navy, jamais du noir pur) */
  --shadow-color: 236deg 36% 17%;
  --shadow-1: 0 1px 1px hsl(var(--shadow-color) / 0.06), 0 2px 4px hsl(var(--shadow-color) / 0.06);
  --shadow-2: 0 1px 1px hsl(var(--shadow-color) / 0.05), 0 4px 8px -2px hsl(var(--shadow-color) / 0.08),
    0 12px 24px -8px hsl(var(--shadow-color) / 0.12);
  --shadow-3: 0 2px 2px hsl(var(--shadow-color) / 0.05), 0 8px 16px -4px hsl(var(--shadow-color) / 0.1),
    0 24px 48px -12px hsl(var(--shadow-color) / 0.18), 0 48px 96px -24px hsl(var(--shadow-color) / 0.16);
  --shadow-glow: 0 0 0 6px color-mix(in oklab, var(--u) 28%, transparent), 0 18px 40px -12px color-mix(in oklab, var(--u) 60%, transparent);

  /* Mouvement */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-normal: 280ms;
  --dur-slow: 520ms;
  --dur-page: 420ms; /* rideau de transition, aller-retour inclus ≤ 450 ms */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Hauteur d'en-tête (utilisée pour les ancres et l'épinglage) */
  --header-h: 72px;

  /* Plans */
  --z-header: 50;
  --z-menu: 60;
  --z-curtain: 90;
  --z-highlight: 95;
  --z-toast: 100;

  /* Grain papier statique (bruit SVG en data URI, aucune image à charger). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.11 0 0 0 0 0.23 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
}

/* Couleur par univers : à poser sur n'importe quel élément, ses enfants héritent.
   --u : couleur du pétale (décor) ; --u-fond + --u-ink : aplat qui porte du texte (contraste AA ≥ 4,5:1) ;
   --u-text : texte coloré sur fond clair. */
[data-univers='cuisine']    { --u: var(--orange); --u-fond: var(--orange); --u-ink: var(--navy); --u-text: #A0410F; }
[data-univers='service']    { --u: var(--pink);   --u-fond: #C02148; --u-ink: #FFFFFF; --u-text: #C02148; }
[data-univers='hotellerie'] { --u: var(--violet); --u-fond: var(--violet); --u-ink: #FFFFFF; --u-text: var(--violet); }
[data-univers='commerce']   { --u: var(--sky);    --u-fond: var(--sky); --u-ink: var(--navy); --u-text: #0D6582; }
[data-univers='bouche']     { --u: var(--green);  --u-fond: var(--green); --u-ink: var(--navy); --u-text: #296E49; }
[data-univers='gestion']    { --u: var(--teal);   --u-fond: #217368; --u-ink: #FFFFFF; --u-text: #217368; }
[data-univers='numerique']  { --u: var(--yellow); --u-fond: var(--yellow); --u-ink: var(--navy); --u-text: #8A6A00; }
[data-univers='orientation']{ --u: var(--navy);   --u-fond: var(--navy); --u-ink: #FFFFFF; --u-text: var(--navy); }
[data-univers='admission']  { --u: var(--yellow); --u-fond: var(--yellow); --u-ink: var(--navy); --u-text: #8A6A00; }
/* CFA Blagnac Alumni, le réseau des anciens : l'orange de la rosace, réservé au choix « Ancien élève ». */
[data-univers='alumni']     { --u: var(--orange); --u-fond: var(--orange); --u-ink: var(--navy); --u-text: #A0410F; }
/* Couleur d'univers lisible sur fond bleu nuit (contraste AA vérifié par scripts/verif/coupures.mjs). */
[data-univers] { --u-clair: color-mix(in oklab, var(--u) 50%, #fff); }
[data-univers] { --u-soft: color-mix(in oklab, var(--u) 16%, var(--paper)); }