/* ==========================================================================
   iClope — piste « Boussole » · jetons de conception
   Un seul niveau de vérité : tout le reste du CSS lit ces variables.
   ========================================================================== */

:root {

  /* --- Couleurs : rôles, pas noms de teintes --------------------------- */
  --papier:            #FBFAF7;  /* fond de page, blanc légèrement chaud   */
  --papier-creux:      #F3F1EB;  /* fond en retrait (barres, champs)       */
  --blanc:             #FFFFFF;  /* fond des photos produit UNIQUEMENT     */
  --encre:             #17201F;  /* texte, en-tête, pied                   */
  --encre-douce:       #2A3331;  /* survol de l'encre                      */
  --gris:              #6B7270;  /* texte secondaire (4,7:1 sur papier)    */
  --filet:             #DAD9D3;  /* filets de séparation neutres           */
  --filet-fort:        #C3C2BA;  /* bordure de champ, contour actif        */

  --canard:            #2A6F6D;  /* structure : titres, liens, traits      */
  --canard-fonce:      #1F5250;  /* survol, texte sur canard clair         */
  --canard-clair:      #D9ECEA;  /* surfaces : encadrés, puces actives     */
  --canard-voile:      #EDF6F5;  /* surface très légère                    */

  --orange:            #F39A3C;  /* UNE fonction : l'action d'achat        */
  --orange-fonce:      #E4862A;  /* survol du bouton d'achat               */

  --framboise:         #D9405A;  /* traits d'alerte, points, contours      */
  --framboise-texte:   #B32E46;  /* alerte EN TEXTE (5,9:1 sur papier)     */
  --framboise-voile:   #FBE9EC;  /* fond d'alerte                          */

  --focus:             #1F5250;  /* anneau de focus clavier                */

  /* --- Typographie ----------------------------------------------------- */
  --display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  --texte:   "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Échelle 13 / 15 / 17 / 20 / 24 / 30 / 40 / 56 — huit crans, pas un de plus */
  --t-13: 0.8125rem;
  --t-15: 0.9375rem;
  --t-17: 1.0625rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-30: 1.875rem;
  --t-40: 2.5rem;
  --t-56: 3.5rem;

  --lh-serre:  1.15;   /* titres display                                   */
  --lh-normal: 1.45;   /* interface                                        */
  --lh-lecture:1.55;   /* guides, textes longs                             */

  --mesure: 34rem;     /* colonne de lecture ≈ 68 caractères               */

  /* --- Espacements (pas de 4) ------------------------------------------ */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;

  --marge-page: 16px;    /* mobile                                        */
  --conteneur: 1200px;   /* desktop                                       */
  --gouttiere: 24px;

  /* --- Rayons : presque droits, la piste est réglée ---------------------- */
  --r-0: 0;
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-plein: 999px;

  /* --- Élévation : quasi absente, la hiérarchie se fait au filet -------- */
  --ombre-flottante: 0 -1px 0 var(--filet), 0 -8px 24px rgba(23, 32, 31, 0.06);
  --ombre-tiroir:    0 0 0 100vmax rgba(23, 32, 31, 0.45);
  --ombre-curseur:   0 1px 2px rgba(23, 32, 31, 0.25);

  /* --- Mouvement : un seul moment vivant, le curseur de la règle -------- */
  --duree-court: 120ms;
  --duree-moyen: 220ms;
  --courbe: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* --- Cibles tactiles -------------------------------------------------- */
  --cible: 44px;

  /* --- Graduations (le motif signature) --------------------------------- */
  --pas-graduation: 12px;   /* écart entre deux traits de la règle          */
}

@media (min-width: 900px) {
  :root {
    --marge-page: 32px;
    --t-17: 1.125rem;   /* corps 18 px sur ordinateur */
  }
}

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