/* =====================================================================
   Jetons de la maison Civik-ia : une seule feuille pour tout le site.
   Posée par la passe P2 (19/10/2026, couche commune des pages anciennes), complétée par la passe P3 (19/10/2026,
   composants de la maison nouvelle) : elle sert désormais aussi l'accueil, Conseil et l'Atelier.
   Source unique : maquettes/commun/pages/jetons.css ; seo/outils/installe-refonte.mjs la recopie, à l'identique, en
   css/jetons.css du site (liste blanche du déploiement). Ne pas la retoucher dans le dépôt : la retouche serait refusée
   par liste-blanche.mjs et perdue à la prochaine installation.
   Source : revue Claude Design du 17/10/2026, partie 3, « le bloc prêt à poser ». La palette est celle
   de l'annexe B, sans ajout. Un seul écart de nom : l'anneau de focus s'appelle --focus-anneau (et non
   --focus), parce que --focus est déjà une couleur dans commun/pages/pages.css et dans /marianne/ ; le
   redéfinir ici en raccourci de bordure casserait leurs contours de focus.
   Points de rupture de la maison : 480, 768, 1024, 1280, 1920 (les bascules propres à un composant passent
   en requêtes de conteneur : la barre de la maison nouvelle prend ses libellés courts sous 820 px de barre).
   Plus bas : la correspondance des couleurs des pages anciennes, posée seulement sur les pages qui
   portent html[data-couche="ancienne"] (outil tools/couche-commune/poser.mjs).
   ===================================================================== */
:root{
  color-scheme:light;
  /* palette (annexe B, inchangée) */
  --bleu:#000091;--bleu-2:#1a1a6e;--trait:#2b6fd6;--ia:#245fc2;
  --teal:#2EC4B6;--teal-txt:#0b6a62;--or:#F4A261;--or-txt:#9A5B1E;
  /* polissage du 20/10/2026 (critère 1.4.3) : --encre-3 passe de #77705f (4,48:1 sur la crème #f7f4ed) à #786f5e, le plus petit
     déplacement qui tient 4,5:1 sur la crème (4,52:1) sans faire tomber sous 3:1 l'écart avec les liens bleus qu'il entoure (fil
     d'Ariane des guides, critère 1.4.1 : 3,01:1 avec #000091 ; un gris plus sombre, #706959, y tombait à 2,74:1) ; écart de teinte
     OKLab 0,003, invisible. Sur le fond plus sombre #efeae1, la légende de la scène de l'Atelier prend sa propre valeur (page.css) */
  --encre:#1E1E1E;--encre-2:#5a5a5a;--encre-3:#786f5e;
  --creme:#f7f4ed;--creme-2:#f5f2eb;--creme-3:#efeae1;--papier:#fffdf8;
  --nuit:#0A0F2C;--nuit-2:#121a47;--nuit-txt:#eef1fb;--nuit-txt2:#b9c1e0;
  --plume:#16205C;--gravure:#60637b;
  --rouge:#c8322b;--vert:#176b43;--vert-fond:#e1f0e7;--vert-nuit:#8fe0b6;
  --filet:rgba(120,100,60,.24);--filet-fort:rgba(120,100,60,.34);
  /* états */
  --etat-erreur:var(--rouge);--etat-erreur-fond:rgba(200,50,43,.06);
  --etat-reussite:var(--vert);--etat-reussite-fond:var(--vert-fond);
  --etat-attention:var(--or-txt);--etat-attention-fond:rgba(244,162,97,.14);
  --etat-info:var(--bleu);--etat-info-fond:rgba(0,0,145,.045);
  --etat-off:var(--encre-3);--etat-off-fond:var(--creme-3);
  --focus-anneau:3px solid var(--bleu);--focus-anneau-nuit:3px solid var(--nuit-txt);--focus-ecart:3px;
  /* espacement, base 4 px */
  --esp-trait:4px;--esp-point:8px;--esp-maille:12px;--esp-ligne:16px;--esp-bloc:24px;
  --esp-carte:32px;--esp-groupe:48px;--esp-palier:64px;--esp-section:clamp(80px,9.5vw,136px);
  --colonne:min(100vw - 32px,1240px);--bord:calc((100vw - var(--colonne)) / 2 + 17px);
  /* rayons */
  --r-papier:6px;--r-champ:12px;--r-carte:18px;--r-scene:24px;--r-pilule:9999px;
  /* ombres, trois et pas plus */
  --o-pose:0 0 0 1px rgba(120,100,60,.20),0 1px 2px rgba(60,40,10,.08);
  --o-leve:0 1px 2px rgba(0,0,80,.10),0 6px 16px -6px rgba(0,0,80,.18);
  --o-flottant:0 2px 4px rgba(0,0,40,.10),0 16px 32px -12px rgba(0,0,40,.28);
  /* passe P3 : le filet des champs à 3:1 sur le papier (#8a8170, 3,8:1, critère 1.4.11, partie 11 de la revue) ;
     l'état désactivé sans opacité ; les hauteurs des composants qu'on touche (44 px au moins) */
  --filet-champ:#8a8170;
  --h-bouton:52px;--h-bouton-petit:44px;--h-champ:50px;--h-pastille:44px;--cible:44px;
  /* le bord des pages : la gouttière au téléphone, puis, dès 768, le bord gauche commun aligné sur le signe de la barre */
  --gouttiere:20px;--bord-page:var(--gouttiere);
  /* typographie : graisse, taille / interligne, famille */
  --f-titre:"Poppins","Poppins Fallback",Arial,sans-serif;
  --f-texte:"Inter","Inter Fallback",Arial,sans-serif;
  --f-plume:"Caveat","Segoe Print","Bradley Hand",cursive;
  --f-fixe:ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-verbe:800 min(6.2vw,10.5vh,92px)/.95 var(--f-titre);--ls-verbe:-.035em;
  --t-page:800 clamp(34px,4.7vw,68px)/1.02 var(--f-titre);--ls-page:-.03em;
  --t-section:700 clamp(30px,3.9vw,52px)/1.08 var(--f-titre);--ls-section:-.025em;
  --t-sous:700 clamp(20px,1.9vw,25px)/1.2 var(--f-titre);--ls-sous:-.015em;
  --t-carte:700 clamp(18px,1.4vw,20px)/1.25 var(--f-titre);--ls-carte:-.01em;
  --t-chapo:500 clamp(17px,1.4vw,19.5px)/1.6 var(--f-texte);
  --t-corps:400 17px/1.6 var(--f-texte);
  --t-petit:500 15px/1.5 var(--f-texte);
  --t-mention:500 13px/1.5 var(--f-texte);
  --t-repere:700 12px/1.3 var(--f-texte);--ls-repere:.08em;
  --t-bouton:600 15.5px/1 var(--f-texte);--t-bouton-petit:600 14.5px/1 var(--f-texte);
  --t-plume:600 clamp(22px,2.4vw,34px)/1.1 var(--f-plume);
  --t-fixe:500 12px/1.4 var(--f-fixe);
  --ligne-chapo:62ch;--ligne-corps:68ch;--ligne-max:72ch;
  /* mouvement */
  --c-doux:cubic-bezier(.2,.8,.2,1);--c-entree:cubic-bezier(.16,1,.3,1);--c-deplacement:cubic-bezier(.65,0,.35,1);
  --d-etat:160ms;--d-ouvre:240ms;--d-lieu:400ms;--d-appui:120ms;
}
@media (min-width:768px){:root{--bord-page:var(--bord)}}

/* ---------- règles communes, légères ---------- */
::selection{background:rgba(0,0,145,.14);color:inherit}
.cc-pied ::selection,.nuit ::selection{background:rgba(244,162,97,.32)}
.chiffres,.prix,html[data-couche="ancienne"] table{font-variant-numeric:tabular-nums}
/* /marianne/ garde ses propres règles de focus et de mouvement (D72) : la couche ne les pose que sur les pages anciennes */
html[data-couche="ancienne"] :focus-visible,html[data-couche="legale"] :focus-visible{outline:var(--focus-anneau);outline-offset:var(--focus-ecart)}
@media (prefers-reduced-motion:reduce){
  html[data-couche="ancienne"] *,html[data-couche="ancienne"] *::before,html[data-couche="ancienne"] *::after,
  html[data-couche="legale"] *,html[data-couche="legale"] *::before,html[data-couche="legale"] *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:120ms !important}
}
/* inversion intelligente d'iOS : les images et les vidéos gardent leur rendu (partie 4) */
@media (inverted-colors:inverted){img,video,canvas{filter:invert(1) hue-rotate(180deg)}}
/* captures de contrôle : la classe posée sur <html> par l'outil de capture arrête toute entrée animée */
.sans-animation *,.sans-animation *::before,.sans-animation *::after{animation-duration:0s !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition:none !important}
.sans-animation .fade-in,.sans-animation .reveal,.sans-animation .msg,.sans-animation [data-entree]{opacity:1 !important;transform:none !important}

/* ---------- correspondance des couleurs des pages anciennes ----------
   Les anciennes variables des guides, de la page prix, de l'aide, de la démo, des pages des canaux et de
   22h47 renvoient aux jetons de la maison (relevé du 19/10/2026, page par page). Les noms qui portent deux
   valeurs selon la page (--bg-section, --line, --p-light) ne sont pas repris : leurs valeurs sont déjà dans
   la palette ou en sont voisines. Le bleu #007bff, absent de la maison, devient le bleu trait du logo ;
   le vert #10b981 devient le vert de la maison ; les gris froids deviennent les encres ; le verre et les
   ombres larges deviennent le papier et l'ombre posée. */
html[data-couche="ancienne"]{
  --primary-gov:var(--bleu);--primary-light:var(--bleu-2);--secondary-innov:var(--trait);--pl:var(--trait);
  --accent-teal:var(--teal);--accent-gold:var(--or);--gold:var(--or);--amber:var(--or);
  --p:var(--bleu);--p-dark:var(--bleu-2);--text-heading:var(--bleu);
  --text-main:var(--encre);--text-light:var(--encre-2);
  --tx:var(--encre);--tx-soft:var(--encre-2);--tx-light:var(--encre-3);
  --ink:var(--encre);--ink-soft:var(--encre-2);--ink-light:var(--encre-2);
  --navy-text:var(--encre);--gris:var(--encre-2);--noir:var(--nuit);
  --green:var(--vert);--red:var(--rouge);
  --cream:var(--creme);--bg-cream:var(--creme);--bg:var(--creme);--card:var(--papier);
  --grad-invert:var(--bleu);
  --glass-bg:var(--papier);--glass-bg-hover:var(--papier);
  --glass-border:1px solid var(--filet);--glass-border-color:var(--filet);
  --glass-shadow:var(--o-pose);--glass-shadow-hover:var(--o-leve);
  --shadow:var(--o-pose);--shadow-sm:var(--o-pose);--shadow-md:var(--o-pose);--shadow-card:var(--o-pose);--shadow-lift:var(--o-leve);
}