/* ==========================================================================
   Jetons du site getfound : SEULE source de valeurs du site (21/10/2026).
   Couleurs, polices, tailles de texte, espacements, rayons, ombres, plans
   (z-index) et durées se déclarent ICI et nulle part ailleurs. Les feuilles
   du site n'écrivent que var(--…). Valeur absente : l'ajouter ici, avec son rôle.

   Pourquoi assets/tokens.css et pas src/styles/tokens.css : le site est un
   export statique sans dossier src/ ; toutes ses feuilles vivent dans assets/.
   Ce fichier remplace les deux palettes :root qui vivaient dans site.css
   (pages historiques) et ads.css (pages refaites depuis le 24/09).
   design-system/systeme.css reste la maquette de référence : il n'est chargé
   par aucune page.

   Chargé en premier sur chaque page par _scripts/poser-menu.py
   (<link rel="stylesheet" href="/assets/tokens.css?v=…">).

   Points de rupture du site (largeur en px) : 560, 720, 1040/1041, 1200, 1320, 1439.
   Héritage des pages historiques, à résorber : 1080/1081 et 1180 (ads.css),
   1460 (site.css). Une feuille n'en ajoute pas d'autre.
   Toutes les feuilles sont contrôlées par Stylelint depuis le 26/10/2026 ;
   les styles en ligne des pages sont devenus assets/utilitaires.css.
   ========================================================================== */

:root {
  /* ---------- Couleurs : primitives ---------- */
  --encre: #16181a;          /* texte, bouton principal, sections sombres */
  --encre-2: #3d3f40;        /* liens de navigation, texte un ton sous l'encre */
  --fond: #f2f1ed;           /* fond de page */
  --blanc: #fff;
  --papier: #f8f7f4;         /* bandes alternées, encarts clairs */
  --gris: #5e5a53;           /* texte secondaire */
  --filet: #e3e1da;
  --filet-pointille: #c9c6bd; /* bordures en tirets (encarts « à fixer ») */
  --jaune: #ffd84a;          /* accent */
  --jaune-doux: var(--jaune-creme);     /* encarts « à retenir » (pages historiques) */
  --jaune-pale: #fff1b8;     /* lien courant du menu, emplacements à valider */
  --sombre-texte: #f2f1ed;
  --sombre-texte-2: #b5b2aa; /* texte courant sur encre */
  --sombre-filet: #2c2f33;
  --sombre-carte: #1f2226;
  --a-valider-filet: #8a6a00;
  --alerte: #8e2a14;
  --alerte-fond: #fbe7e1;
  --etoile: #7a5a12;         /* note et étoiles des avis */
  --rouge: #b3261e;
  --rouge-fond: #fce8e6;
  --lien-google: #1a0dab;

  /* ---------- Couleurs : rôles (mêmes valeurs, autre nom selon la famille de pages) ---------- */
  --surface: var(--blanc);
  --surface-2: var(--papier);
  --texte-2: var(--gris);
  --sombre: var(--encre);
  --s-texte: var(--sombre-texte);
  --s-texte-2: var(--sombre-texte-2);
  --s-filet: var(--sombre-filet);
  --s-carte: var(--sombre-carte);
  --a-valider-fond: var(--jaune-pale);
  --texte-indicatif: var(--sombre-texte-2); /* texte d'exemple dans les champs */

  /* ---------- Couleurs translucides ---------- */
  --voile-tete: rgb(255 255 255 / 78%);   /* fond de l'en-tête, flou derrière */
  --encre-a05: rgb(22 24 26 / 5%);        /* survol d'un lien du menu */
  --encre-a06: rgb(22 24 26 / 6%);        /* bord de l'en-tête */
  --encre-a08: rgb(22 24 26 / 8%);        /* bord des sous-menus */
  --encre-a72: rgb(22 24 26 / 72%);       /* étiquette posée sur une photo */
  --encre-a88: rgb(22 24 26 / 88%);       /* légende posée sur le portrait */
  --blanc-a70: rgb(255 255 255 / 70%);    /* cadre dessiné sur une photo factice */
  --blanc-a75: rgb(255 255 255 / 75%);

  /* ---------- Couleurs des illustrations (fausses pages Google, faux sites) ---------- */
  --illu-google-barre: #f1f3f4;
  --illu-google-texte: #202124;
  --illu-site-fond: #fafaf8;
  --illu-site-filet: #ecebe6;
  --illu-gris-clair: #e6e4dd;   /* lignes de texte factices, bouton gris */
  --illu-logo: #d8d5cd;
  --illu-burger: var(--gris-taupe);
  --illu-bandeau-1: #dad6cc;
  --illu-bandeau-2: #c9c4b8;
  --illu-etiquette-filet: #dddad2;
  --illu-etiquette-texte: #75716a;
  --illu-texte-pale: #8a867e;
  --illu-photo-bleu-1: #c9d3d8;
  --illu-photo-bleu-2: #8fa3ae;
  --illu-photo-sable-1: #e4d8c3;
  --illu-photo-sable-2: #c2a77f;
  --illu-photo-pierre-1: #d5d0c6;
  --illu-photo-pierre-2: #9c958a;
  --illu-photo-bois-1: #d9cbb2;
  --illu-photo-bois-2: #b59a74;

  /* ---------- Police ---------- */
  --police: "Geist", "Helvetica Neue", "Arial", sans-serif;

  /* ---------- Tailles de texte ---------- */
  --t-h3: clamp(1.25rem, 1.18rem + .3vw, 1.375rem);   /* 20 → 22 px */
  --t-texte: clamp(1rem, .95rem + .25vw, 1.125rem);   /* 16 → 18 px */
  --t-petit: .875rem;                                 /* 14 px */

  /* Échelle fine, en px (le nom donne la taille) */
  --t-10-5: 10.5px;
  --t-11: 11px;
  --t-11-5: 11.5px;
  --t-12: 12px;
  --t-12-5: 12.5px;
  --t-13: 13px;
  --t-13-5: 13.5px;
  --t-14-5: 14.5px;
  --t-15: 15px;
  --t-15-5: 15.5px;
  --t-16: 16px;
  --t-17: 17px;
  --t-19: 19px;
  --t-21: 21px;
  --t-22: 22px;
  --t-23: 23px;
  --t-24: 24px;
  --t-32: 32px;

  /* Tailles fluides propres à un bloc */
  --t-titre-apropos: clamp(38px, 1.5rem + 3.2vw, 62px);  /* titre du haut de page À propos */
  --t-chiffre-apropos: clamp(38px, 1.8rem + 1.8vw, 54px); /* chiffres clés À propos */
  --t-chiffre-releve: clamp(46px, 2.2rem + 2.4vw, 64px);  /* relevé chiffré des pages métiers */
  --t-regle: clamp(24px, 1rem + 1.6vw, 36px);             /* citation de la règle de travail */
  --t-citation: clamp(19px, 1rem + .6vw, 23px);           /* citation client des pages métiers */
  --t-unite-apropos: .42em;   /* unité accolée à un chiffre clé */
  --t-unite-releve: .45em;

  /* ---------- Espacements : échelle (4, 8, 12, 16, 24, 32, 48) ---------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;

  /* Pas intermédiaires : --e-N-F = fraction F du chemin entre e-N et e-(N+1) */
  --e-0-5: 2px;
  --e-0-75: 3px;
  --e-1-25: 5px;
  --e-1-5: 6px;
  --e-1-75: 7px;
  --e-2-5: 10px;
  --e-2-75: 11px;
  --e-3-5: 14px;
  --e-4-25: 18px;
  --e-4-5: 20px;
  --e-4-75: 22px;
  --e-5-25: 26px;
  --e-5-5: 28px;
  --e-5-75: 30px;

  /* Espacements fluides */
  --marge: clamp(20px, 6.8vw, 96px);         /* marge latérale des pages */
  --largeur-page: 1440px;                    /* largeur maxi d'une page, comme l'accueil (.v-desk de site.css) */
  --marge-page: max(var(--marge), calc((100% - var(--largeur-page)) / 2 + var(--marge))); /* marge du contenu : fond pleine largeur, texte aligné sur l'accueil */
  --section-y: clamp(64px, 8vw, 112px);      /* respiration verticale d'une section */
  --e-hero-haut: clamp(40px, 5vw, 72px);     /* haut de page À propos */
  --e-hero-bas: clamp(48px, 5vw, 72px);
  --e-hero-colonnes: clamp(32px, 5vw, 72px);
  --e-encart: clamp(28px, 4vw, 48px);        /* intérieur d'un grand encart */


  /* Cible tactile minimale */
  --cible-tactile: 44px;

  /* ---------- Rayons ---------- */
  --r-champ: 14px;
  --r-carte: 24px;
  --r-bloc: 40px;
  --r-pilule: 999px;

  /* Échelle fine, en px (le nom donne le rayon) */
  --r-3: 3px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-16: 16px;
  --r-18: 18px;
  --r-20: 20px;
  --r-22: 22px;
  --r-26: 26px;
  --r-30: 30px;

  /* ---------- Ombres ---------- */
  --ombre-menu: 0 24px 60px -20px rgb(22 24 26 / 28%);          /* sous-menu ordinateur */
  --ombre-menu-mobile: 0 24px 60px -20px rgb(22 24 26 / 35%);   /* panneau du menu téléphone */
  --ombre-champ-actif: 0 0 0 4px rgb(255 216 74 / 55%);         /* halo jaune d'un champ actif */
  --ombre-demo: 0 30px 70px rgb(22 24 26 / 12%);                /* carte de démonstration du haut de page */

  /* ---------- Plans (z-index) : du plus bas au plus haut ---------- */
  --plan-tete: 40;        /* en-tête commun (menu.css) */

  /* ---------- Durées et courbes ---------- */
  --duree-champ: .15s;     /* couleur et halo d'un champ */
  --duree-panneau: .18s;   /* ouverture d'un sous-menu */
  --duree-bascule: .2s;    /* chevron, pastille du bouton */
  --duree-url: .3s;        /* changement d'adresse dans la démonstration */
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Chorégraphie de la démonstration « création de site » (délais depuis le chargement) */
  --duree-demo-1: .6s;
  --duree-demo-2: 1.1s;
  --duree-demo-3: 1.6s;
  --duree-demo-4: 2.3s;
  --duree-demo-alerte: 2.9s;
  --duree-demo-url-sortie: 4.8s;
  --duree-demo-url-entree: 4.9s;
  --duree-demo-halo: 1.4s;
  --duree-demo-recu: 7.2s;

  /* Démonstration « partenariat » de l'accueil (rythme piloté par assets/partenariat.js) */
  --duree-pt-fondu: .5s;   /* apparition d'une étape */
  --duree-pt-trajet: .9s;  /* point qui descend d'une étape à la suivante */
  --duree-pt-curseur: 1s;  /* clignotement du curseur dans la barre de recherche */

  /* ---------- Couleurs ajoutées le 26/10/2026 (styles des pages de l'export et feuilles historiques) ---------- */
  --noir: #000; /* ombre d'une modale */
  --noir-ombre: #141414; /* base des ombres portées des cartes */
  --encre-profonde: #17191c; /* fond le plus sombre (bandeau de pied) */
  --gris-ardoise: #6b7076; /* texte tertiaire sur fond sombre */
  --sombre-filet-2: #35393e; /* filet d'une carte sur fond sombre */
  --fond-creux: #efeee9; /* fond d'un champ ou d'un bloc en creux */
  --fond-clair: #f4f2ee; /* fond clair intermédiaire */
  --fond-pale: #eeede8; /* fond pâle d'une vignette */
  --filet-fort: #cfcbc1; /* filet appuyé, bord de carte */
  --filet-doux: #eae8e2; /* filet discret entre lignes */
  --filet-pale: #e9e7e0; /* filet pâle */
  --filet-sable: #ddd9d0; /* filet sable */
  --filet-beige: #e0dcd3; /* filet beige */
  --filet-beige-2: #e6e2d9; /* filet beige clair */
  --gris-pale: #9a958b; /* texte d'appoint, légendes */
  --gris-taupe: #a9a59c; /* pictogrammes et traits gris */
  --gris-sable: #bdb9af; /* trait gris sable */
  --jaune-creme: #fff3c4; /* encarts « à retenir » (pages historiques) */
  --jaune-fonce: #f7cc2e; /* survol du bouton jaune */
  --jaune-ombre: #c9a21a; /* ombre du jaune */
  --alerte-vif: #b43b22; /* halo d'alerte animé */
  --google-bleu: #4285f4; /* logo Google (illustration) */
  --google-rouge: #ea4335; /* logo Google (illustration) */
  --google-jaune: #fbbc05; /* logo Google (illustration) */
  --google-vert: #34a853; /* logo Google (illustration) */
  --google-lien: #1a73e8; /* lien bleu des pages Google (illustration) */
  --google-bleu-fond: #e8f0fe; /* fond bleu pâle Google (illustration) */
  --google-texte: #3c4043; /* texte des pages Google (illustration) */
  --google-texte-2: #4d5156; /* texte secondaire Google (illustration) */
  --google-gris: #5f6368; /* pictogrammes Google (illustration) */
  --google-orange: #b06000; /* mention orange Google (illustration) */
  --google-filet: #dfe1e5; /* bord de la barre de recherche (illustration) */
  --google-filet-2: #e8eaed; /* filet Google (illustration) */
  --google-filet-3: #dadce0; /* filet Google (illustration) */

  /* ---------- Tailles de texte ajoutées le 26/10/2026 ---------- */
  --t-10: 10px;
  --t-18: 18px;
  --t-20: 20px;
  --t-26: 26px;
  --t-30: 30px;
  --t-31: 31px;
  --t-39: 39px;
  --t-40: 40px;
  --t-44: 44px;
  --t-46: 46px;
  --t-48: 48px;
  --t-54: 54px;
  --t-56: 56px;
  --t-64: 64px;
  --t-68: 68px;
  --t-72: 72px;
  --t-16-5: 16.5px;
  --t-17-5: 17.5px;
  --t-exposant: .82em; /* texte en exposant */
  --t-h1: clamp(39px, 1.6rem + 3.4vw, 64px); /* titre de haut de page (pages refaites) */
  --t-h2: clamp(31px, 1.4rem + 2.2vw, 48px); /* titre de section (pages refaites) */
  --t-h2-form: clamp(31px, 1.4rem + 2vw, 46px); /* titre du bloc formulaire */
  --t-chapo: clamp(17px, 1rem + .3vw, 19px); /* chapeau sous un titre */
  --t-hero-sous: clamp(18px, 1rem + .5vw, 21px); /* sous-titre du haut de page */
  --t-prix: clamp(54px, 2.6rem + 3vw, 72px); /* prix d'une offre */
  --t-prix-moyen: clamp(34px, 1.8rem + 1.6vw, 46px); /* prix d'une offre, format moyen */
  --t-blog-h1: clamp(38px, 1.6rem + 3.2vw, 64px); /* titre de l'accueil du blog */
  --t-blog-une: clamp(26px, 1.1rem + 1.6vw, 38px); /* titre de l'article à la une */
  --t-blog-titre: clamp(36px, 1.5rem + 2.8vw, 58px); /* titre d'un article */
  --t-blog-chapo: clamp(18px, 1rem + .45vw, 21px); /* chapeau d'un article */
  --t-blog-h2: clamp(27px, 1.1rem + 1.4vw, 36px); /* intertitre d'un article */
  --t-blog-citation: clamp(22px, 1rem + 1vw, 28px); /* citation dans un article */

  /* ---------- Rayons ajoutés le 26/10/2026 ---------- */
  --r-2: 2px;
  --r-7: 7px;
  --r-28: 28px;
  --r-bulle: 50% 50% 50% 4px; /* bulle de pastille (pointe arrondie) */
  --r-bulle-pointe: 50% 50% 50% 0; /* bulle de pastille (pointe vive) */
  --r-onglet: 0 4px 4px 0; /* onglet collé à gauche */
  --r-surligne: .2em; /* surlignage d'un mot */

  /* ---------- Ombres ajoutées le 26/10/2026 ---------- */
  --ombre-souligne: inset 0 -.3em 0 rgb(22 24 26 / 18%); /* soulignement épais d'un lien */
  --ombre-surligne-jaune: inset 0 -.34em 0 #ffd84a; /* surlignage jaune d'un mot */
  --ombre-surligne-jaune-fort: inset 0 -.38em 0 #ffd84a; /* surlignage jaune appuyé */
  --ombre-trait-encre: inset 0 -2px 0 #16181a; /* trait sous un onglet actif */
  --ombre-contour-encre: 0 0 0 1px #16181a; /* contour fin encre */
  --ombre-contour-jaune: 0 0 0 1px #ffd84a; /* contour fin jaune */
  --ombre-carte: 0 30px 60px -30px rgb(20 20 20 / 25%); /* carte d'illustration */
  --ombre-carte-forte: 0 30px 60px -30px rgb(20 20 20 / 30%); /* carte d'illustration, appuyée */
  --ombre-carte-basse: 0 30px 60px -34px rgb(20 20 20 / 28%); /* carte d'illustration, ombre basse */
  --ombre-pastille: 0 8px 18px -6px rgb(20 20 20 / 50%); /* pastille flottante */
  --ombre-pastille-forte: 0 8px 20px -8px rgb(20 20 20 / 60%); /* pastille flottante, appuyée */
  --ombre-pulse-alerte-0: 0 0 0 0 rgb(180 59 34 / 0%); /* halo d'alerte animé, départ */
  --ombre-pulse-alerte: 0 0 0 6px rgb(180 59 34 / 16%); /* halo d'alerte animé */
  --ombre-pulse-rouge-0: 0 0 0 0 rgb(179 38 30 / 0%); /* halo rouge animé, départ */
  --ombre-pulse-rouge: 0 0 0 6px rgb(179 38 30 / 16%); /* halo rouge animé */
  --ombre-pulse-jaune-0: 0 0 0 0 rgb(255 216 74 / 0%); /* halo jaune animé, départ */
  --ombre-pulse-jaune: 0 0 0 8px rgb(255 216 74 / 50%); /* halo jaune animé */
  --ombre-halo-jaune: 0 0 0 8px rgb(255 216 74 / 55%); /* halo jaune large */
  --ombre-douce: 0 16px 40px rgb(22 24 26 / 12%); /* carte posée, ombre douce */
  --ombre-legere: 0 20px 50px rgb(22 24 26 / 8%); /* carte posée, ombre légère */
  --ombre-google: 0 1px 6px rgb(32 33 36 / 16%); /* barre de recherche Google (illustration) */
  --ombre-modale: 0 24px 60px rgb(0 0 0 / 28%); /* fenêtre posée sur la page */
  --ombre-portrait: 0 30px 60px -34px rgb(22 24 26 / 35%); /* portrait */
  --ombre-carte-encre: 0 26px 50px -30px rgb(22 24 26 / 35%); /* carte, ombre encre */
  --ombre-encart: 0 16px 36px -28px rgb(22 24 26 / 40%); /* encart */
  --ombre-bouton: 0 16px 30px -22px rgb(22 24 26 / 50%); /* bouton flottant */
  --ombre-bouton-basse: 0 10px 30px -22px rgb(22 24 26 / 50%); /* bouton flottant, ombre basse */
  --ombre-anneau-encre: inset 0 0 0 5px #16181a; /* anneau encre du favicon factice (page Google Ads) */

  /* ---------- Polices ajoutées le 26/10/2026 ---------- */
  --police-google: "Product Sans", "Google Sans", "Arial", sans-serif; /* logo Google (illustration) */
  --police-arial: "Arial", "Helvetica Neue", sans-serif; /* textes imitant une page Google ou un mail */

  /* ---------- Plans (z-index) ajoutés le 26/10/2026 ---------- */
  --plan-saut: 50; /* lien « aller au contenu » au clavier */
  --plan-menu-mobile: 40; /* panneau du menu téléphone (ads.css) */
  --plan-sommaire: 30; /* sommaire collant d'un article */
}

/* Pages refaites depuis le 24/09 (famille ads.css) : leur jaune doux est un ton
   plus soutenu. Écart conservé pour ne rien changer à l'affichage ; à unifier
   sur une seule teinte quand Aurélien l'aura choisie. */
:root:has(link[href*="assets/ads.css"]) {
  --jaune-doux: #fff1b8;
}