/* ============================================================
   BOOSTDRIVING — TOKENS V2
   Socle de MISE EN PAGE issu de la maquette Claude Design,
   coule dans l'identite visuelle BoostDriving.
   Source mise en page : pilotage/mauqette/ui-mockups-pour-formulaire
   Plan                : pilotage/conception/refonte-accueil-formulaire-maquette.md

   Ce que ce fichier reprend a la maquette : l'echelle typographique,
   les rayons, les gouttieres, les cinq animations. RIEN d'autre.
   Les couleurs et les polices viennent du design system BoostDriving
   (assets|style|base.css et le systeme « Editorial Confiance » de
   assets|style|pages|accueil.css). Le bleu marine de la maquette et la
   police Satoshi ont ete abandonnes le 2026-08-21.

   Ce fichier ne declare que des variables et des keyframes : aucune
   regle de mise en page, il n'ecrase donc rien.
   ============================================================ */

:root {

  /* —— COULEURS ————————————————————————————————————————————
     Alias sur les tokens BoostDriving existants. Aucune valeur en dur
     qui ne soit deja au design system : si la marque bouge, on ne
     touche qu'a base.css.
     ———————————————————————————————————————————————————————— */

  /* Accent principal : le cyan du logo */
  --bd2-accent:        var(--color-primary);        /* #0EA5E9 */
  --bd2-accent-hover:  var(--color-primary-hover);  /* #0284C7 */
  --bd2-accent-deep:   var(--color-primary-active); /* #0369A1 */
  --bd2-accent-soft:   var(--color-primary-light);  /* #E0F2FE */
  --bd2-accent-tint:   var(--color-primary-50);     /* #F0F9FF */

  /* Degrade signature du logo, reserve aux appels a l'action et aux
     mots mis en valeur dans les titres. */
  --bd2-grad:      var(--brand-gradient);
  --bd2-grad-deep: var(--brand-gradient-deep);
  --bd2-grad-soft: var(--brand-gradient-soft);

  /* Rose du logo : sur-titres de l'accueil */
  --bd2-pink: #F0739B;

  /* Signal positif */
  --bd2-green:      var(--color-success-dark);   /* #065F46 */
  --bd2-green-soft: var(--color-success-light);  /* #D1FAE5 */

  /* —— TYPOGRAPHIE ————————————————————————————————————————
     Trois familles, exactement celles du systeme « Editorial
     Confiance » de l'accueil.
     ———————————————————————————————————————————————————————— */

  --bd2-font-title: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --bd2-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bd2-font-mono:  'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Echelle relevee dans la maquette. Instrument Serif ayant un oeil
     plus grand que Satoshi, les gros titres sont legerement rentres. */
  --bd2-fs-hero:      56px;  /* H1 accueil */
  --bd2-fs-display:   44px;  /* titre de bande, rappel de fin */
  --bd2-fs-h2:        38px;  /* H2 de section */
  --bd2-fs-h1-form:   36px;  /* H1 de l'ecran intro du formulaire */
  --bd2-fs-question:  32px;  /* H2 d'une question */
  --bd2-fs-h3:        22px;  /* titre de carte */
  --bd2-fs-lead:      19px;  /* chapeau du hero */
  --bd2-fs-lead-sm:   17.5px;/* chapeau de section */
  --bd2-fs-body:      16px;  /* corps */
  --bd2-fs-body-lg:   16.5px;/* corps des cartes d'option */
  --bd2-fs-sm:        14.5px;/* metadonnees */
  --bd2-fs-xs:        12px;  /* sur-titre en mono */
  --bd2-fs-xxs:       11px;  /* sur-titre secondaire */

  /* Chasse. Les titres a empattements ne se resserrent presque pas,
     contrairement aux titres tres gras de la maquette. */
  --bd2-ls-title:  -.01em;
  --bd2-ls-tight:  -.015em;
  --bd2-ls-kicker: .22em;   /* sur-titre principal, en mono */
  --bd2-ls-caps:   .12em;   /* sur-titre secondaire, en mono */

  --bd2-lh-hero:  1.05;
  --bd2-lh-title: 1.1;
  --bd2-lh-body:  1.55;
  --bd2-lh-loose: 1.65;

  /* —— RAYONS ————————————————————————————————————————————
     Echelle de l'accueil : pilules pour les boutons, 14 et 18 px pour
     les cartes, 22 px pour les grandes cartes.
     ———————————————————————————————————————————————————————— */

  --bd2-r-sm:   10px;
  --bd2-r-md:   14px;
  --bd2-r-lg:   18px;
  --bd2-r-xl:   22px;
  --bd2-r-pill: 999px;

  /* —— OMBRES ————————————————————————————————————————————— */

  --bd2-shadow-soft: 0 8px 24px -16px rgba(13, 18, 32, .18);
  --bd2-shadow-card: 0 18px 40px -22px rgba(13, 18, 32, .20);
  --bd2-shadow-deep: 0 18px 44px rgba(13, 18, 32, .08);
  --bd2-shadow-glow: 0 12px 32px -16px rgba(244, 114, 182, .40), 0 6px 18px -10px rgba(14, 165, 233, .30);

  /* —— GABARIT ———————————————————————————————————————————
     Largeurs de l'accueil BoostDriving, pas celles de la maquette.
     ———————————————————————————————————————————————————————— */

  --bd2-wrap:       1280px;  /* sections de l'accueil */
  --bd2-wrap-narrow: 880px;  /* colonnes de lecture */
  --bd2-wrap-form:   720px;  /* questionnaire */
  --bd2-gutter:      32px;
  --bd2-gutter-sm:   20px;

  /* —— TRANSITIONS ——————————————————————————————————————— */

  --bd2-ease:      cubic-bezier(.4, 0, .2, 1);
  --bd2-ease-out:  cubic-bezier(.2, .7, .3, 1);
  --bd2-ease-pop:  cubic-bezier(.2, .8, .3, 1);
}

/* —— ANIMATIONS ————————————————————————————————————————————
   Les cinq keyframes de la maquette, noms conserves a l'identique.
   ———————————————————————————————————————————————————————————— */

@keyframes bdUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bdIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bdScan {
  0%   { opacity: .25; }
  45%  { opacity: 1; }
  100% { opacity: .25; }
}

@keyframes bdBar {
  from { width: 0; }
}

@keyframes bdPop {
  0%   { transform: scale(.9);  opacity: 0; }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1);   opacity: 1; }
}