/* ==========================================================================
   iClope — piste « La maison qui répond »
   tokens.css : la matière première. Aucune règle de composant ici.
   ========================================================================== */

:root {
  /* --- Couleurs, par rôle (jamais par nom dans les composants) ------------ */
  --blanc:          #FFFFFF;   /* fond général */
  --lin:            #F4F3EF;   /* sections alternées, fond des cartes de voix */
  --lin-fonce:      #EAE8E1;   /* survol sur lin, fond des champs */
  --encre:          #1E2422;   /* texte courant, titres */
  --gris:           #626B69;   /* texte secondaire (AA sur blanc : 5,55) */
  --filet:          #DCDFDC;   /* filets, contours de cartes */

  --canard:         #2B7A76;   /* marque : titres de rang, liens, médaillons */
  --canard-fonce:   #1F5B58;   /* survol, anneau de focus */
  --canard-clair:   #E7F0EE;   /* aplats très légers (puces actives) */
  --sauge:          #DCE9E4;   /* fond des bulles clients et des encadrés */
  --sauge-filet:    #BFD6CE;   /* contour à l'intérieur d'un aplat sauge */

  --corail:         #E8694F;   /* accent d'action — décor, pastille « en direct » */
  --corail-action:  #C94B30;   /* le MÊME rôle dès qu'il porte du texte blanc
                                  (blanc sur #E8694F = 3,20 : sous AA.
                                   blanc sur #C94B30 = 4,67 : AA tenu) */
  --corail-fonce:   #A93B24;   /* survol du bouton d'achat */
  --corail-voile:   #FBEDE9;   /* aplat très léger (toast, encadré d'achat) */

  --prune:          #5B3A5E;   /* accent éditorial rare : guillemets, signature,
                                  étoile pleine. Jamais un paragraphe. */

  --rouge:          #A3332B;   /* rupture, erreur de formulaire */
  --ambre:          #7A5A17;   /* DLUO, avertissement (texte sur ambre-voile) */
  --ambre-voile:    #FBF3E0;

  /* --- Rôles applicatifs -------------------------------------------------- */
  --fond:           var(--blanc);
  --fond-alt:       var(--lin);
  --texte:          var(--encre);
  --texte-doux:     var(--gris);
  --lien:           var(--canard);
  --bordure:        var(--filet);

  /* --- Typographie -------------------------------------------------------- */
  --titre: "Familjen Grotesk", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --texte-police: "Instrument Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle : 13 / 15 / 17 / 20 / 24 / 30 / 38 / 52 — huit crans, pas neuf. */
  --t13: 0.8125rem;
  --t15: 0.9375rem;
  --t17: 1.0625rem;
  --t20: 1.25rem;
  --t24: 1.5rem;
  --t30: 1.875rem;
  --t38: 2.375rem;
  --t52: 3.25rem;

  --interligne:      1.55;
  --interligne-titre: 1.14;

  /* --- Espacements -------------------------------------------------------- */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 20px;
  --e6: 24px;
  --e7: 32px;
  --e8: 40px;
  --e9: 56px;
  --e10: 72px;

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

  /* --- Rayons ------------------------------------------------------------- */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-rond: 999px;

  /* --- Élévation ---------------------------------------------------------- */
  /* Les cartes ne portent PAS d'ombre dans cette piste (elles portent un filet).
     L'ombre est réservée à ce qui flotte réellement au-dessus de la page. */
  --ombre-flottant: 0 -1px 0 var(--filet), 0 -12px 28px rgba(30, 36, 34, 0.10);
  --ombre-tiroir:   0 0 0 100vmax rgba(30, 36, 34, 0.45);
  --ombre-suggest:  0 10px 26px rgba(30, 36, 34, 0.14);

  /* --- Mouvement ---------------------------------------------------------- */
  --duree: 150ms;
  --courbe: cubic-bezier(0.2, 0.6, 0.2, 1);

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

@media (min-width: 900px) {
  :root {
    --marge-page: 32px;
    --t52: 3.5rem;
  }
}

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