/* =========================================================
   iClope — piste « Clair »
   tokens.css : les seules valeurs autorisées dans la piste.
   Toute couleur, taille, espacement ou durée écrite ailleurs
   qu'ici est un accident à corriger.
   ========================================================= */

:root {

  /* --- Couleurs : un rôle, une variable ------------------ */
  --blanc:        #FFFFFF;   /* fond de page */
  --perle:        #F1F3F2;   /* surfaces secondaires : listes, champs, en-tête mobile */
  --perle-fonce:  #E4E9E7;   /* survol d'une surface perle, fond d'image produit */
  --ardoise:      #1E2A2A;   /* texte courant, pied de page, cartouche nicotine */
  --ardoise-nuit: #16201F;   /* fond du cartouche nicotine, sous le pied */
  --canard:       #1E8A85;   /* marque et structure : filets, pictos, contours choisis */
  --canard-fonce: #146B67;   /* MÊME couleur, version texte : 6,3:1 sur blanc (AA) */
  --canard-clair: #E9F5F4;   /* fond de survol d'un élément canard */
  --menthe:       #CFEDE9;   /* surface d'accent : pictos, ligne choisie, encadrés */
  --menthe-pale:  #E6F5F3;
  --menthe-photo: #D2EEEA;   /* menthe exacte du fond des photos gen/ : jointure invisible */
  --orange:       #F59E42;   /* action d'achat SEULEMENT, en fond, texte ardoise (6,9:1) */
  --orange-fonce: #E68F2C;   /* état actif du bouton d'achat */
  --framboise:    #E23E5C;   /* fond/filet d'alerte : rupture, DLUO, erreur */
  --framboise-txt:#BF2540;   /* la même en texte : 5,9:1 sur blanc (AA) */

  --texte:        #1E2A2A;
  --texte-2:      #5C6664;   /* secondaire : 5,9:1 sur blanc, 5,3:1 sur perle */
  --filet:        #D5DBD9;
  --filet-fort:   #B9C3C1;

  /* --- Typographie -------------------------------------- */
  --police: "Atkinson Hyperlegible", "Atkinson Hyperlegible Next",
            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

  /* échelle : 14 / 16 / 18 / 22 / 26 / 32 / 40 / 52 — huit crans, pas neuf */
  --t-xs:  14px;   /* mentions, cartouche nicotine, légendes */
  --t-s:   16px;   /* labels, méta produit */
  --t-m:   18px;   /* texte courant mobile */
  --t-l:   22px;   /* titres de bloc, prix courant */
  --t-xl:  26px;   /* titre de section, prix de fiche */
  --t-2xl: 32px;   /* titre de page mobile */
  --t-3xl: 40px;   /* titre de page desktop */
  --t-4xl: 52px;   /* chiffre unique : taux choisi, résultat du calculateur */

  --inter:     1.5;    /* interligne du texte courant */
  --inter-titre: 1.2;

  /* --- Espacements (multiples de 4) --------------------- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  /* --- Rayons ------------------------------------------- */
  --r-s: 8px;      /* champs, badges */
  --r-m: 14px;     /* cartes, boutons */
  --r-l: 20px;     /* encadrés conseil, cartes flottantes */
  --r-rond: 999px; /* pastilles et pictos */

  /* --- Ombres : trois, pas plus, et jamais décoratives --- */
  --ombre-flottant: 0 -6px 20px rgba(30,42,42,.10);   /* barre d'achat, bandeau cookies */
  --ombre-carte:    0 8px 28px rgba(30,42,42,.14);    /* tiroir, age gate */
  --ombre-toast:    0 6px 18px rgba(30,42,42,.28);

  /* --- Mouvement : deux animations sur tout le site ------ */
  --duree:   .16s;
  --duree-l: .24s;
  --courbe:  cubic-bezier(.2,.6,.2,1);

  /* --- Gabarit ------------------------------------------ */
  --largeur: 1120px;   /* largeur maximale de contenu */
  --lecture: 640px;    /* largeur de lecture d'un guide */
  --cible:   56px;     /* hauteur minimale de tout ce qui se touche */
  --cible-s: 44px;     /* plancher absolu, réservé aux icônes d'en-tête */
  --img-liste: 72px;   /* vignette produit en liste mobile */
}

@media (min-width: 900px) {
  :root {
    --t-s: 17px;
    --t-m: 19px;   /* le texte courant respire d'un point sur ordinateur */
  }
}