/* ============================================================ */
/*    DESIGN TOKENS — variables globales                         */
/*    À importer en premier dans toutes les pages                */
/* ============================================================ */
:root{
  /* === Palette v4 — orange ISO&FACE primaire + neutres ======= */
  --paper:        #FFFFFF;        /* fond principal — blanc */
  --paper-2:      #F4F3EF;        /* off-white doux (cartes, blocs) */
  --paper-3:      #FAF9F6;        /* off-white très léger */
  --paper-white:  #FFFFFF;

  /* Marque primaire = orange */
  --brand:        #fd5f00;        /* ORANGE ISO&FACE — couleur primaire */
  --brand-2:      rgb(0,120,53);        /* VERT ISO&FACE — contraste secondaire */
  --brand-soft:   #FFE3D1;        /* orange très pâle pour fonds */
  --brand-pale:   #FFD0AE;        /* orange pâle pour bordures soft */

  /* Accents */
  --accent:       #fd5f00;        /* alias = brand (orange) — pour les CTA */
  --accent-2:     #cc4b00;        /* orange foncé — hover sur boutons orange */
  --accent-soft:  #FFE3D1;
  --accent-warm:  #efc64c;        /* jaune soleil en accent secondaire */

  /* Vert (réservé : avis, succès, secondaire) */
  --green:        rgb(1, 131, 50);
  --green-soft:   #E0F4E7;
  --green-dark:   rgb(0,120,53);

  /* Encres */
  --ink:          #17252F;
  --ink-2:        #2D3E4D;
  --ink-3:        #677685;
  --ink-4:        #94A0AC;

  /* Lignes / placeholders */
  --line:         #E9DFC6;
  --line-2:       #D6C9A6;
  --wf:           #EBE2C8;
  --wf-line:      #C9B988;

  /* === Border radius — système unifié ======================== */
  /* Usage standard : --radius (18px) sur tous les blocs.        */
  /* --radius-sm pour petits éléments (badges, chips).           */
  /* --radius-lg pour gros blocs (hero, panels).                 */
  /* --radius-full pour pills et ronds.                          */
  --radius-sm:    12px;           /* badges, tags, chips, inputs petits */
  --radius:       18px;           /* DÉFAUT — cards, blocs, sections */
  --radius-lg:    24px;           /* hero panels, gros blocs, accordéons */
  --radius-full:  999px;          /* pills, ronds, boutons CTA */
  /* Anciens alias conservés pour compat */
  --radius-xl:    24px;           /* alias = --radius-lg */

  /* === Ombres ================================================ */
  --shadow-xs:    0 1px 2px rgba(23, 37, 47, .04);
  --shadow-sm:    0 2px 8px rgba(23, 37, 47, .05);
  --shadow-md:    0 12px 40px rgba(23, 37, 47, .08);
  --shadow-lg:    0 30px 80px -20px rgba(23, 37, 47, .18);

  /* === Header (sticky pill) ================================== */
  --header-h:       78px;         /* hauteur du header en mode normal */
  --header-h-pill:  62px;         /* hauteur du header en mode scrolled (pill) */
}
@media (max-width: 768px){
  :root{
    --header-h:       64px;
    --header-h-pill:  56px;
  }
}