/* =========================================================================
   La Colisserie — Design tokens (source : charte graphique v2 + notice dev)
   ========================================================================= */

/* ---------- Polices auto-hébergées ---------- */

/* Corps — Urbane (Device, Rian Hughes). WOFF2 fournis, licence Desktop+Web à confirmer. */
@font-face {
  font-family: "Urbane";
  src: url("../fonts/Urbane-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("../fonts/Urbane-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("../fonts/Urbane-Medium-Italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("../fonts/Urbane-Demi-Bold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("../fonts/Urbane-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Display — Blenny (Dalton Maag, Black).
   ⚠️ LICENCE : le fichier fourni est une version TRIAL (non commerciale, Black seul).
   Avant mise en production : acquérir la licence Desktop + Webfont chez Dalton Maag
   et remplacer ce TTF par le WOFF2 sous licence. Fallback : Georgia, serif. */
@font-face {
  font-family: "Blenny";
  src: url("../fonts/blenny-trial-blk.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Fallbacks métriquement ajustés (performance perçue : CLS ≈ 0) ----------
   size-adjust mesuré dans le navigateur : le fallback occupe EXACTEMENT la largeur de
   la police réelle → aucun reflow quand Urbane/Blenny arrivent en swap. */
@font-face {
  font-family: "Urbane-fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 116%;              /* Urbane ≈ 15,7 % plus large qu'Arial (mesuré) */
  line-gap-override: 0%;
}
@font-face {
  font-family: "Blenny-fallback";
  src: local("Georgia");
  size-adjust: 117%;              /* Blenny ≈ 16,9 % plus large que Georgia (mesuré) */
  font-weight: 900;
  line-gap-override: 0%;
}

/* ---------- Variables de marque ---------- */
:root {
  /* Couleurs (charte §3 — fond blanc arbitré, crème abandonné) */
  --jaune: #FFCD00;          /* signature chaude : aplats, illustrations, logo jaune */
  --perivenche: #1E41F0;     /* texte, logo, icônes fonctionnelles, boutons */
  --blanc: #FFFFFF;          /* fond principal + surfaces */

  --texte: var(--perivenche);
  --texte-sur-perivenche: var(--blanc);
  --fond: #FAFBFF;           /* blanc très légèrement bleuté (fond de page) — surfaces restent blanc pur */

  /* Teintes utilitaires dérivées (ombres/reliefs légers — pas de 2e blanc) */
  --perivenche-08: rgba(30, 65, 240, 0.08);
  --perivenche-16: rgba(30, 65, 240, 0.16);
  /* Ombres en couches → profondeur douce et premium */
  --ombre-carte: 0 1px 2px rgba(30,65,240,.05), 0 6px 16px rgba(30,65,240,.07), 0 16px 40px rgba(30,65,240,.08);
  --ombre-carte-forte: 0 2px 6px rgba(30,65,240,.09), 0 12px 28px rgba(30,65,240,.13), 0 30px 60px rgba(30,65,240,.16);

  /* ---------- Profondeur · couleur · matière ----------
     Nuances de périvenche DÉRIVÉES (pas de nouvelle couleur de marque) : servent
     à donner de l'« encre vivante » aux objets, là où l'aplat plat manquait de relief. */
  --perivenche-clair: #3350F5;   /* périvenche éclairci — haut de dégradé (lumière) */
  --perivenche-fonce: #1734C6;   /* périvenche assombri — bas de dégradé (ombre) */
  /* Dégradé de surface : lumière en haut, ombre en bas → volume subtil sur les objets */
  --grad-perivenche: linear-gradient(160deg, var(--perivenche-clair) 0%, var(--perivenche) 55%, var(--perivenche-fonce) 100%);
  /* Reliefs internes : liseré de lumière en haut + assise sombre en bas (matière encrée) */
  --relief-ink: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1.5px 2px rgba(11,24,90,0.20);
  /* Liseré de définition pour les surfaces claires (papier posé, pas flottant) */
  --bord-clair: 1px solid var(--perivenche-08);

  /* Typographie */
  --font-display: "Blenny", "Blenny-fallback", "Bagel Fat One", Georgia, serif;
  --font-corps: "Urbane", "Urbane-fallback", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Échelle typographique éditoriale — modulaire & fluide (fort contraste titres/corps) */
  --h1:      clamp(2.6rem, 1.9rem + 3.4vw, 4.4rem);      /* display */
  --h2:      clamp(1.9rem, 1.55rem + 1.9vw, 2.8rem);     /* titres de section */
  --h3:      clamp(1.35rem, 1.2rem + 0.65vw, 1.7rem);    /* sous-titres */
  --lead:    clamp(1.18rem, 1.08rem + 0.45vw, 1.4rem);   /* chapôs / intros de section */
  --corps:   clamp(1rem, 0.96rem + 0.2vw, 1.1rem);       /* texte courant */
  --petit:   0.875rem;                                   /* légendes / mentions */
  --eyebrow: 0.8rem;                                     /* étiquettes en capitales */

  /* Hauteurs de ligne par rôle */
  --lh-display: 1.03;
  --lh-heading: 1.1;
  --lh-lead:    1.45;
  --lh-body:    1.55;

  /* Interlettrage par rôle */
  --track-tight: -0.005em;   /* display : resserrement subtil */
  --track-caps:  0.06em;     /* capitales espacées */

  /* =========================================================================
     Espacement — échelle sur base 4px (0.25rem). Marges/paddings/gaps s'y alignent.
     ========================================================================= */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Rythmes sémantiques (dérivés de l'échelle) */
  --pad-section: clamp(4.5rem, 9vw, 8.5rem); /* respiration verticale inter-sections */
  --gutter: clamp(1.25rem, 5vw, 3rem);       /* marge latérale de section */
  --stack-title: clamp(2.25rem, 6vw, 3.5rem);/* espace sous un titre de section (rythme unifié) */
  --gap: clamp(1rem, 3vw, 2rem);             /* gouttière de grille standard */

  --contenu-max: 1200px;
  --mesure: 68ch;                             /* largeur de texte bridée 65-75 car. */

  /* Imagerie — slot d'illustration unifié (identité illustrée, sans photos) */
  --illu-size: min(88%, 440px);   /* échelle optique commune des illustrations de contenu */
  --illu-halo: var(--perivenche-08); /* grounding ambiant, teinte de marque */

  /* Rayons */
  --r-bouton: 4px;
  --r-carte: 20px;

  /* Cible tactile mini a11y */
  --cible: 44px;

  /* =========================================================================
     Motion — vocabulaire partagé (durées + 3 courbes nommées + cadence)
     Principe : 3 intentions, pas 8 courbes. Cohérence avant tout.
     ========================================================================= */
  /* Durées */
  --dur-fast: 0.18s;    /* micro-interactions : survols, focus, icônes */
  --dur-mid: 0.3s;      /* changements d'état : accordéon, cartes, header */
  --reveal-dur: 0.6s;   /* entrées au scroll */

  /* Courbes (une par intention) */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);    /* symétrique — survols, bascules */
  --ease-out:      cubic-bezier(.22, .61, .36, 1); /* décélération — entrées */
  --ease-pop:      cubic-bezier(.34, 1.56, .55, 1); /* rebond doux — pop ludique (marque) */
  --reveal-ease:   var(--ease-out);                /* alias historique */

  /* Cadence de cascade (décalage entre éléments d'un même groupe) */
  --stagger: 0.08s;
}