/* ==========================================================================
   Jetons de design — The 6 Musts to Move the Room
   Toutes les valeurs ajustables de la page sont ici. Ne rien coder en dur
   ailleurs : si une couleur, un corps ou un espacement doit bouger, il bouge
   depuis ce fichier.

   Couleurs relevées au rendu du PDF Keyleur V1.6, pas estimées à l'œil.
   ========================================================================== */

:root {

  /* --- Couleurs de marque ------------------------------------------------ */
  --orange:        #FE4828;   /* orange signature, mesuré sur le deck */
  --orange-fonce:  #D93516;   /* survols et états actifs */
  --navy:          #001E31;   /* bleu-noir du logo */
  --gris:          #EDEDED;   /* fond de page du keynote */
  --gris-ligne:    #D6D6D4;   /* filets et séparateurs */
  --gris-texte:    #5A5A5A;   /* textes secondaires */
  --noir:          #000000;
  --blanc:         #FFFFFF;

  /* Fond sombre, utilisé sur la séquence Bullitt du manifeste */
  --sombre:        #0B0B0C;

  /* --- Typographie -------------------------------------------------------
     Helvetica Neue en premier : présente sur macOS et iOS, c'est la police
     d'origine du deck. Inter Tight, servie avec la page, prend le relais sur
     Windows et Android où Helvetica Neue n'existe pas.                      */
  --f-titre:    "Helvetica Neue", "Inter Tight", Inter, Helvetica, Arial, sans-serif;
  --f-corps:    "Helvetica Neue", "Inter Tight", Inter, Helvetica, Arial, sans-serif;
  --f-citation: "Times New Roman", Times, Georgia, serif;  /* citations en italique, comme le deck */

  /* Échelle de corps. Les titres respirent avec la fenêtre via clamp() :
     jamais plus petits que la borne basse, jamais plus gros que la haute. */
  --t-hero:      clamp(2.75rem, 7.4vw, 8.5rem);
  /* Plafond relevé de 6.75rem à 10rem : à 6.75rem le titre cessait de suivre
     la fenêtre dès 1742px de large et se tassait sur les grands écrans. Chrome
     en 1512 est à 6.2vw, sous l'ancien plafond, son rendu ne bouge donc pas ;
     c'est Safari, ouvert plus large, qui replace le titre à la même proportion. */
  --t-geant:     clamp(2.5rem,  6.2vw, 10rem);     /* manifeste, formulaire */
  --t-chiffre:   clamp(9rem,   26vw,  26rem);      /* les chiffres 1 à 6 */
  --t-section:   clamp(2rem,   4.2vw, 4rem);
  --t-principe:  clamp(1.9rem, 3.4vw, 3.25rem);
  --t-sous:      clamp(1rem,   1.35vw, 1.4rem);
  --t-corps:     clamp(1rem,   1.15vw, 1.2rem);
  --t-petit:     clamp(.8rem,  .92vw,  .95rem);
  --t-menu:      clamp(.72rem, .8vw,  .85rem);

  --lh-serre:   0.86;   /* interlignage des très gros titres, comme le deck */
  --lh-titre:   1.02;
  --lh-corps:   1.55;

  --ls-titre:  -0.025em;   /* les grotesques bold se resserrent */
  --ls-menu:    0.14em;

  /* --- Rythme vertical et gouttières ------------------------------------- */
  --marge-page:  clamp(1.25rem, 4vw, 5rem);
  --max-largeur: 1560px;
  --gap:         clamp(1rem, 2.2vw, 2.5rem);
  --section-y:   clamp(4.5rem, 11vh, 9rem);

  /* --- Animation ---------------------------------------------------------
     Une seule courbe pour toute la page. Les décalages d'apparition sont
     appliqués par pas de --pas sur les enfants successifs.                  */
  --courbe:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --duree:   680ms;
  --pas:     100ms;   /* décalage entre chiffre, titre, citation, paragraphe */

  /* Amplitude du parallaxe des chiffres, en pixels de décalage maximum */
  --parallaxe: 90px;

  /* --- Divers ------------------------------------------------------------ */
  --header-h:   clamp(3.5rem, 5.5vw, 4.75rem);
  --filet:      1px;
  --z-header:   50;
  --z-overlay:  40;
}

/* Sur mobile on coupe le parallaxe et on réduit l'amplitude des apparitions :
   les effets de profondeur se lisent mal sur un écran étroit et coûtent cher. */
@media (max-width: 860px) {
  :root {
    --parallaxe: 0px;
    --pas: 70ms;
  }
}

/* Respect strict de la préférence système. Aucune animation, aucun décalage,
   la page reste entièrement lisible et tout est visible immédiatement. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duree: 1ms;
    --pas: 0ms;
    --parallaxe: 0px;
  }
}