/* ============================================================
   JETONS - source unique de verite visuelle du site.

   Copie du bloc :root de la maquette d'accueil v1.1 du 2026-10-02 :
   couleurs, espaces (6 crans a 8 px), rayons, ombres, durees,
   familles. UNE exception : --titre pointe la police de titrage
   deja en place, DM Serif Display, hebergee localement ; la pile
   de la maquette reste derriere elle, en repli.

   Deux regles de contraste mesurees, a ne pas enfreindre :
   - l'or (--accent-or) ne porte jamais de texte sur fond clair ;
     il y est un bouton, un aplat ou un filet ;
   - jamais de blanc sur --orange-respiration : le texte y est sombre.

   Contraste NON textuel (WCAG 1.4.11, 3:1 au moins) - a re-mesurer avant
   d'eclaircir un de ces jetons :
   - --accent-or-appui dessine l'anneau de focus sur les fonds clairs ; il
     tient 3:1 contre --surface-douce, le plus sombre d'entre eux ;
   - --bord-champ est le seul contour d'un champ de saisie, blanc sur blanc.
   ============================================================ */
:root{
  /* --- couleur --- */
  /* Charbon chaud (retour du CEO, 2026-10-04 : l'ancien #0E0D0C etait trop noir).
     Le meme en composantes, pour les fonds translucides et les voiles :
     rgba(var(--fond-sombre-rvb),.9). Les deux lignes se changent ensemble. */
  --fond-sombre:#1E1A17;
  --fond-sombre-rvb:30,26,23;
  /* Opacite du fond de l'en-tete, collant comme flottant. La page transparait
     a travers : plus la valeur est basse, plus une surface blanche qui defile
     dessous eclaircit le fond, et moins les liens blancs du menu contrastent.
     A re-mesurer sur les pixels avant de la baisser (13,5:1 au moins). */
  --opacite-entete:.92;
  /* Voile des premiers ecrans : opacite du fond sombre pose sous le texte, la
     ou il recouvre une photo ou le bord d'une video. A re-mesurer sur les
     pixels avant de la baisser (titre 4,5:1, accroche 12:1, mention 7:1). */
  --voile-premier-ecran:.92;
  /* Hauteur sur laquelle ce voile se fond vers le haut, au-dessus du texte. */
  --fondu-premier-ecran:72px;
  --fond-clair:#FEFEFE;
  --surface:#FFFFFF;
  --surface-douce:#F6F3EE;
  --accent-or:#D4A24C;
  --accent-or-appui:#B1812D;
  --orange-respiration:#F2A413;
  --texte-fort:#14120F;
  --texte-doux:#5A544C;
  --texte-sombre-fort:#FFFFFF;
  --texte-sombre-doux:#C9C2B6;
  --succes:#2E7D52;
  --alerte:#B3261E;
  --filet:#E4DED4;
  --bord-champ:#98876B;
  /* --- espace : echelle unique a 8 px, 6 crans --- */
  --e1:8px; --e2:16px; --e3:24px; --e4:40px; --e5:64px; --e6:96px;
  /* Degagement sous l'element focalise, tant que la barre mobile est fixee en bas
     d'ecran : hauteur mesuree de la barre (82 px, 113 px au texte double) plus
     l'anneau de focus (6 px) et une marge. A re-mesurer si la barre change. */
  --degagement-barre:128px;
  /* Hauteur de l'en-tete : le logo a sa taille d'origine (90 px) et 8 px de part
     et d'autre. */
  --hauteur-entete:106px;
  /* Degagement au-dessus de l'element focalise et des ancres, sous l'en-tete :
     sa hauteur plus l'anneau de focus (6 px) et une marge. Au-dessus de 900 px
     l'en-tete est un bandeau flottant, decale de 16 px du haut de l'ecran : le
     degagement grandit d'autant (voir la regle sous ce bloc). A re-mesurer si
     l'en-tete change. */
  --degagement-entete:122px;
  /* --- rayon --- */
  --rayon-carte:14px; --rayon-bouton:999px; --rayon-champ:10px;
  /* --- ombre : deux valeurs, pas cinq --- */
  --ombre-carte:0 1px 2px rgba(20,18,15,.06), 0 8px 24px rgba(20,18,15,.07);
  --ombre-flottant:0 -2px 16px rgba(20,18,15,.14);
  /* --- mouvement --- */
  --duree-courte:150ms; --duree-moyenne:300ms;
  /* --- typo --- */
  --titre:"DM Serif Display","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --corps:Manrope,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

/* Bandeau flottant, au-dessus de 900 px : 16 px de decalage en plus. */
@media (min-width:901px){
  :root{ --degagement-entete:138px; }
}

/* Mouvement reduit : les deux durees sont neutralisees a la source. */
@media (prefers-reduced-motion:reduce){
  :root{ --duree-courte:0ms; --duree-moyenne:0ms; }
}