/* =========================================================================
   iClope — piste « Le Barbu » — jetons de conception
   Une seule idée : le Barbu conseille, et ses bulles portent le conseil.
   Toutes les valeurs de couleur ont été mesurées (ratios en commentaire).
   ========================================================================= */

:root {
  /* ---- Couleurs de fond ---- */
  --blanc:          #FFFFFF;
  --brume:          #F2F6F5;  /* sections alternées, fonds calmes */
  --brume-fonce:    #E7EDEB;  /* survol sur brume, séparateurs pleins */

  /* ---- Encre et gris ---- */
  --encre:          #1B2321;  /* texte principal — 16,0:1 sur blanc */
  --gris:           #5F6A68;  /* texte secondaire — 5,6:1 sur blanc, 5,1:1 sur brume */
  --filet:          #D8DEDC;  /* toutes les séparations */
  --filet-fort:     #B9C3C0;  /* contour de champ, contour de choix */

  /* ---- Canard : la couleur de marque ---- */
  --canard:         #2A7F7A;  /* 4,76:1 sur blanc — liens, titres de bloc, aplats */
  --canard-fonce:   #1F6560;  /* 6,8:1 sur blanc, 5,5:1 sur canard clair — texte sur aplat clair, focus */
  --canard-clair:   #D5ECE9;  /* fond des bulles, puces actives, médaillons */
  --canard-brume:   #EAF5F3;  /* aplat très pâle : lignes de tableau, encadrés */

  /* ---- Roux : le personnage ET l'achat ---- */
  --roux:           #D8702F;  /* la barbe. Graphique seulement : 3,3:1 — jamais sous du texte blanc */
  --roux-action:    #B65820;  /* 4,77:1 sous texte blanc — bouton panier, prix d'action */
  --roux-clair:     #FBEBDF;  /* aplat d'alerte douce, surlignage */

  /* ---- Framboise : accent rare ---- */
  --framboise:      #E2506A;  /* étoile pleine, filet d'accent — graphique seulement */
  --framboise-texte:#C13351;  /* 5,4:1 sous texte blanc — badge « nouveau » */
  --framboise-clair:#FBE3E8;  /* surlignage d'un mot dans une bulle */

  /* ---- Typographie ---- */
  --police: "Rubik", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --t-13: 0.8125rem;  /* mentions, marque, méta */
  --t-15: 0.9375rem;  /* texte dense, nom de produit, signature du Barbu */
  --t-17: 1.0625rem;  /* texte courant, bulles */
  --t-20: 1.25rem;    /* sous-titres, prix fort */
  --t-24: 1.5rem;     /* titres de section mobile */
  --t-30: 1.875rem;   /* titres de section desktop, H1 mobile */
  --t-38: 2.375rem;   /* H1 desktop */
  --t-52: 3.25rem;    /* accroche d'accueil desktop, chiffre du 404 */

  --gras: 700;
  --moyen: 500;
  --normal: 400;

  --interligne-titre: 1.15;
  --interligne-texte: 1.6;
  --lecture: 66ch;

  /* ---- Espacements ---- */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;
  --e9: 96px;

  /* ---- Rayons ---- */
  --r-petit: 4px;
  --r: 8px;
  --r-bulle: 16px;
  --r-rond: 999px;

  /* ---- Ombres : deux, et seulement pour ce qui flotte ---- */
  --ombre-flottant: 0 2px 10px rgba(27, 35, 33, 0.10);
  --ombre-surgi:    0 6px 24px rgba(27, 35, 33, 0.16);

  /* ---- Mouvement : deux durées, une courbe ---- */
  --duree-courte: 120ms;
  --duree: 150ms;
  --courbe: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* ---- Gabarit ---- */
  --conteneur: 1200px;
  --marge-mobile: 16px;
  --barre-achat: 68px; /* hauteur de la barre d'achat fixe mobile */
}

@media (prefers-reduced-motion: reduce) {
  :root { --duree-courte: 0ms; --duree: 0ms; }
}