/* ─────────────────────────────────────────────────────────────
   PERIFY — site.css, LA feuille commune de perify.app
   Refonte A du 30/10/2026 (direction choisie par Valentin : « clair, au plus près
   de TheGiftsClub », maquette validée sur perify.app/maquette-a).

   Toutes les pages chargent cette feuille, puis la leur s'il y en a une :
     index.html               accueil.css
     comment-ca-marche.html   comment.css
     ce-que-vous-pilotez.html pilotez.css
     essai-gratuit.html       essai.css
     calculateur.html         calculateur.css
     aide.html, mentions-legales.html : rien d'autre (§ 12 ci-dessous)
   Mode d'emploi et HTML prêt à copier : _GABARIT.md.

   Le langage, en une phrase : une seule feuille claire (#F8F9FE), encadrée par la
   nuit (#1B1F3B) en haut (la barre) et en bas (le pied) ; l'orange #FF6B2C ne sert
   qu'au bouton principal, UN par écran, texte nuit (5,7:1). Pas de crème, pas de
   halo, pas de grain, pas de mot surligné, pas d'étiquette en capitales espacées,
   pas de mot qui défile, pas de bordure lumineuse. Titres en Plus Jakarta Sans 800,
   texte en Inter, sans lettres serrées (les mots ne se collent pas).

   Sommaire : 1 polices · 2 jetons · 3 socle · 4 boutons et liens · 5 en-tête et menu ·
   6 sections et chapeau de page · 7 listes, pastilles, légendes · 8 bloc « Essai » et
   « Suite » · 9 questions · 10 champs · 11 pied · 12 pages de texte · 13 tailles d'écran ·
   14 mouvement réduit
   ───────────────────────────────────────────────────────────── */

/* ── 1. polices ────────────────────────────────────────────
   Servies par perify.app (audit légal du 07/10/2026, point 10), jamais par Google : mêmes
   fichiers que Google Fonts (Inter v20, Plus Jakarta Sans v12, polices variables, latin +
   latin-ext), licence SIL OFL dans polices/OFL-*.txt. Le nom de chaque fichier porte sa
   version (cache d'un an « immutable », vercel.json) : une nouvelle version prend un nouveau nom. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(polices/inter-v20-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(polices/inter-v20-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700 800;font-display:swap;src:url(polices/plus-jakarta-sans-v12-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700 800;font-display:swap;src:url(polices/plus-jakarta-sans-v12-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── 2. jetons ─────────────────────────────────────────────
   Ceux de la maquette A, en hexadécimal (la maquette les écrivait en OKLCH : même rendu,
   mais un téléphone ancien qui ne connaît pas OKLCH n'afficherait aucune couleur).
   Contrastes mesurés : texte nuit 2 sur le fond 9,0:1 ; texte gris 5,3:1 (4,97:1 sur la
   bande teintée) ; nuit sur orange 5,7:1 ; orange texte #C2410C 4,9:1 ; sur la nuit,
   texte clair 2 9,2:1 et orange clair 6,9:1. */
:root{
  --space-3xs:2px;--space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:40px;--space-2xl:64px;--space-3xl:96px;
  --text-sm:.875rem;--text-md:1rem;--text-lg:1.125rem;
  --text-display:clamp(2.25rem,2.6vw + 1rem,3.75rem);   /* le titre de l'accueil */
  --text-page:clamp(2rem,2vw + 1.1rem,3.125rem);       /* le titre des autres pages */
  --text-section:clamp(1.75rem,1.4vw + 1.2rem,2.625rem);
  --text-title:clamp(1.1875rem,.4vw + 1rem,1.375rem);
  --text-lead:clamp(1.0625rem,.35vw + .95rem,1.25rem);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-micro:120ms;--dur-short:220ms;
  --container:1440px;--gutter:64px;--gap-columns:32px;--section-gap-s:96px;--section-gap:128px;
  --z-raised:10;--z-entete:100;

  --color-paper:#F8F9FE;     /* le fond unique des pages */
  --color-paper-2:#F0F2FC;   /* la bande teintée (une par page au plus) et les cadres des visuels */
  --color-paper-3:#FDFDFF;   /* les cartes posées sur le fond (formulaire, résultats, morceaux de carte) */
  --color-ink:#1B1F3B;       /* la nuit : textes, barre du haut, pied */
  --color-ink-2:#3F4460;     /* texte courant secondaire */
  --color-muted:#636780;     /* légendes, notes */
  --color-rule:#DFE1E9;      /* filets */
  --color-rule-2:#CED0DD;    /* filets décoratifs (contacts en pilules, flèche « Suite », pastilles d'indication) */
  --color-champ:#868A9F;     /* contour des champs et des pastilles à choisir : 3,4:1 sur la carte (WCAG 1.4.11 : 3:1) */
  --color-accent:#FF6B2C;    /* réservé au bouton principal */
  --color-accent-hover:#FF8A4C;
  --color-accent-ink:#1B1F3B;/* texte nuit sur orange, 5,7:1 */
  --color-orange-texte:#C2410C; /* erreurs, focus : 4,9:1 sur le fond */
  --color-focus:#C2410C;
  --color-focus-nuit:#FF8A4C;
  --color-anneau:#E6E9F6;    /* liseré lavande des morceaux de carte */
  --color-anneau-2:#FEE8DB;  /* liseré pêche (morceaux, anneau du bouton principal) */
  --color-nuit-2:#282C4B;
  --color-on-nuit:#F3F5FB;
  --color-on-nuit-2:#BFC3D5;
  --color-rule-nuit:#363B55;
  --color-ombre:rgba(27,31,59,.22);
  --color-ombre-2:rgba(27,31,59,.12);

  --font-display:'Plus Jakarta Sans','Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius-control:12px;--radius-card:22px;--radius-media:20px;--radius-pill:999px;
  /* titres : un très léger resserrement, compensé entre les mots (jamais de mots collés) */
  --tracking-display:-.012em;--word-display:.05em;
}

/* ── 3. socle ──────────────────────────────────────────────
   overflow-x:clip (et non hidden) sur html ET body : Safari iPhone ne tient pas compte de
   body seul et rétrécit toute la page s'il y a un débord (JOURNAL-BUGS, 29/10).
   « hidden » est écrit juste avant : un navigateur qui ignore « clip » (Safari avant la
   version 16) garde ce filet ; les autres prennent « clip » (la seconde déclaration). */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--space-lg)}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-md);
  line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none}
::selection{background:var(--color-anneau-2);color:var(--color-ink)}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.16em}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:var(--tracking-display);word-spacing:var(--word-display);
  overflow-wrap:break-word;min-width:0;text-wrap:balance}
h2{font-size:var(--text-section);line-height:1.12}
h3{font-size:var(--text-title);line-height:1.25}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
img,video{max-width:100%;height:auto;display:block}
svg{display:block}
strong{font-weight:700}
.container,.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.insecable{white-space:nowrap}
/* lu par les lecteurs d'écran seulement */
.visually-hidden,.lecteur{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* les nombres de calcul.js (PerifyCompteur) : chiffres de même largeur */
[data-compte],.compte-vu{font-variant-numeric:tabular-nums}
.compte-vu{display:inline-block;white-space:nowrap}

/* ── 4. boutons et liens ───────────────────────────────────
   .btn-plein   le bouton principal, orange, texte nuit : UN SEUL à l'écran
   .btn-contour sur la nuit (barre du haut) : contour orange, texte clair
   .btn-second  sur le fond clair : contour nuit, texte nuit (Retour, calculateur…)
   .lien        un lien souligné dans le texte */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:52px;padding:0 var(--space-lg);margin:0;
  border:2px solid transparent;border-radius:var(--radius-control);background:none;font-family:var(--font-body);font-size:var(--text-lg);
  font-weight:600;line-height:1.1;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn-plein{background:var(--color-accent);color:var(--color-accent-ink);box-shadow:0 0 0 4px var(--color-anneau-2)}
.btn-plein:hover{background:var(--color-accent-hover)}
.btn-contour{min-height:48px;padding:0 var(--space-md);border-color:var(--color-accent);color:var(--color-on-nuit);font-size:var(--text-md)}
.btn-contour:hover{background:var(--color-nuit-2)}
.btn-second{border-color:var(--color-ink);color:var(--color-ink);background:transparent}
.btn-second:hover{background:var(--color-paper-3)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.lien{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;
  transition:text-decoration-color var(--dur-micro) var(--ease-out)}
.lien:hover{text-decoration-color:var(--color-focus)}
.lien:active{color:var(--color-ink-2)}
/* le lien fléché (« Les outils à votre disposition », « Faire ma demande »…) */
.lien-fleche{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:48px;font-weight:600;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color var(--dur-micro) var(--ease-out)}
.lien-fleche:hover{text-decoration-color:var(--color-focus)}
.lien-fleche svg{flex:none}

/* ── 5. en-tête et menu ────────────────────────────────────
   La barre nuit, identique sur toutes les pages (HTML : _GABARIT.md § 2). Ordinateur : les
   trois liens et « Essai gratuit 14 jours » en contour. Sous 60rem : le logo, « Essai gratuit »
   (toujours visible, 27/09) et « Menu », un <details> qui s'ouvre SANS script ; site.js le
   referme avec Échap, un clic dehors ou un lien. */
.entete{position:relative;z-index:var(--z-entete);background:var(--color-ink);color:var(--color-on-nuit)}
.entete :focus-visible,.pied :focus-visible{outline-color:var(--color-focus-nuit)}
.entete-barre{display:flex;align-items:center;gap:var(--space-lg);min-height:72px}
/* le lien du logo (retour à l'accueil) : une cible de 48 px de haut, l'image garde sa taille */
.entete-logo{display:inline-flex;align-items:center;min-height:48px;flex-shrink:0;margin-right:auto;border-radius:var(--space-2xs)}
.entete-logo img{width:auto;height:34px}
.entete-nav{display:flex;align-items:center}
.nav-liens{display:flex;gap:var(--space-lg)}
.nav-liens a{position:relative;display:inline-flex;align-items:center;min-height:48px;color:var(--color-on-nuit-2);font-weight:600;
  text-decoration:none;transition:color var(--dur-micro) var(--ease-out)}
.nav-liens a:hover{color:var(--color-on-nuit)}
.nav-liens a[aria-current="page"]{color:var(--color-on-nuit)}
.nav-liens a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;border-radius:2px;background:var(--color-on-nuit-2)}
.entete-essai{gap:0;margin-left:var(--space-md)}
.entete-essai[aria-current="page"]{background:var(--color-nuit-2)}
.nav-tel{display:none}
.nav-tel summary{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:48px;padding:0 var(--space-md);
  border:1px solid var(--color-rule-nuit);border-radius:var(--radius-control);color:var(--color-on-nuit);font-weight:600;cursor:pointer;
  list-style:none;transition:background-color var(--dur-micro) var(--ease-out)}
.nav-tel summary::-webkit-details-marker{display:none}
.nav-tel summary:hover,.nav-tel[open] summary{background:var(--color-nuit-2)}
.nav-tel summary svg{flex:none}
.nav-tel .trait-croix{display:none}
.nav-tel[open] .trait-menu{display:none}
.nav-tel[open] .trait-croix{display:inline}
.nav-tel:not([open]) .nav-tel-panneau{display:none}
.nav-tel-panneau{position:absolute;inset-inline:0;top:100%;padding:var(--space-xs) var(--gutter) var(--space-lg);background:var(--color-ink);
  border-top:1px solid var(--color-rule-nuit);box-shadow:0 24px 40px -24px rgba(6,8,24,.6)}
.nav-tel-liens{display:grid;gap:var(--space-2xs)}
.nav-tel-liens a:not(.btn){display:flex;align-items:center;min-height:52px;color:var(--color-on-nuit);font-size:var(--text-lg);font-weight:600;
  text-decoration:none;border-bottom:1px solid var(--color-rule-nuit)}
.nav-tel-liens a[aria-current="page"]{text-decoration:underline;text-underline-offset:.3em;text-decoration-color:var(--color-on-nuit-2)}
.nav-tel-liens .btn{margin-top:var(--space-md);width:100%;min-height:52px}

/* ── 6. sections et chapeau de page ────────────────────────
   .section          une bande de page (le fond reste le fond de la page)
   .section.teinte   LA bande teintée de la page (une au plus par page)
   .section.filet    un filet au-dessus, pour séparer deux sections sur le même fond
   .page-tete        le haut des pages intérieures : .page-nom (le nom de la page, en petit,
                     casse normale), h1, .chapo */
.section{padding-block:var(--section-gap)}
.section.teinte{background:var(--color-paper-2)}
.section.filet{border-top:1px solid var(--color-rule)}
.section-tete{max-width:46rem;margin-bottom:var(--space-2xl)}
.section-tete.centre{margin-inline:auto;text-align:center}
.section-tete .chapo{margin-top:var(--space-md)}
.chapo{font-size:var(--text-lead);line-height:1.55;color:var(--color-ink-2)}
.page-tete{padding-block:var(--space-2xl) var(--space-xl)}
.page-nom,.mono{margin:0 0 var(--space-md);font-size:var(--text-md);font-weight:600;line-height:1.3;color:var(--color-muted)}
.page-tete h1{max-width:22ch;font-size:var(--text-page);line-height:1.08}
.page-tete .chapo{margin-top:var(--space-lg);max-width:44rem}
/* le cadre des visuels : une plaque teintée aux coins ronds, le produit posé dessus */
.cadre-visuel{display:grid;place-items:center;min-width:0;padding:var(--space-xl);border-radius:var(--radius-card);background:var(--color-paper-2)}
.cadre-visuel img{filter:drop-shadow(0 24px 30px var(--color-ombre-2))}

/* ── 7. listes, pastilles, légendes ────────────────────────
   .liste       une liste cochée (la coche est dessinée par la feuille, en nuit)
   .pastille    une courte indication en casse normale (« Nouveau », « Sur iPhone »…)
   .legende     « Données de démonstration. » sous une capture chiffrée */
.liste{display:grid;gap:var(--space-sm);margin-top:var(--space-lg)}
.liste li{position:relative;padding-left:32px;color:var(--color-ink-2);line-height:1.5}
.liste li::before{content:"";position:absolute;left:2px;top:.22em;width:20px;height:20px;border-radius:50%;background:var(--color-anneau)}
.liste li::after{content:"";position:absolute;left:9px;top:calc(.22em + 5px);width:5px;height:9px;border:solid var(--color-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pastille{display:inline-flex;align-items:center;min-height:30px;padding:var(--space-2xs) var(--space-sm);border:1px solid var(--color-rule-2);
  border-radius:var(--radius-pill);background:var(--color-paper-3);color:var(--color-ink-2);font-size:var(--text-sm);font-weight:600;line-height:1.2}
.legende{margin-top:var(--space-md);font-size:var(--text-sm);color:var(--color-muted)}

/* ── 8. le bloc « Essai » de fin de page, et « Suite » ─────
   Une plaque teintée au milieu de la page, le seul bouton orange de l'écran.
   « Suite » : la ligne qui mène à la page suivante, au-dessus du pied. */
.essai-final{padding-block:var(--section-gap-s)}
.essai-final-cadre{display:grid;justify-items:center;gap:var(--space-md);padding:var(--space-2xl) var(--space-xl);border-radius:var(--radius-card);
  background:var(--color-paper-2);text-align:center}
.essai-final-cadre h2{max-width:22ch}
.essai-final-cadre p{max-width:40rem;font-size:var(--text-lead);color:var(--color-ink-2)}
.essai-final-cadre .btn{margin-top:var(--space-md)}
.suite{border-top:1px solid var(--color-rule)}
.suite-lien{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);min-height:96px;padding-block:var(--space-lg);
  font-family:var(--font-display);font-size:var(--text-title);font-weight:800;letter-spacing:var(--tracking-display);word-spacing:var(--word-display);
  text-decoration:none}
.suite-mot{color:var(--color-muted);font-family:var(--font-body);font-weight:600;letter-spacing:0;word-spacing:0}
.suite-fleche{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid var(--color-rule-2);border-radius:50%;
  transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.suite-fleche svg{width:20px;height:20px}
.suite-lien:hover .suite-texte{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.suite-lien:hover .suite-fleche{border-color:var(--color-ink);background:var(--color-paper-3)}

/* ── 9. questions (accueil et essai) ───────────────────────
   Des <details> : elles s'ouvrent sans script. Le titre à gauche, la liste à droite. */
.faq-grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gap-columns);align-items:start}
.faq-grille h2{max-width:14ch}
.faq-liste details{border-bottom:1px solid var(--color-rule)}
.faq-liste details:first-child{border-top:1px solid var(--color-rule)}
.faq-liste summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);min-height:64px;padding-block:var(--space-md);
  font-size:var(--text-lg);font-weight:600;cursor:pointer;list-style:none;transition:color var(--dur-micro) var(--ease-out)}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary:hover{color:var(--color-ink-2)}
.faq-liste summary svg{flex-shrink:0;color:var(--color-ink-2);transition:transform var(--dur-short) var(--ease-in-out)}
.faq-liste details[open] summary svg{transform:rotate(180deg)}
.faq-liste details p{padding-bottom:var(--space-lg);max-width:65ch;color:var(--color-ink-2)}

/* ── 10. champs (essai, calculateur) ──────────────────────── */
.champ{display:grid;gap:var(--space-xs);min-width:0;margin:0;padding:0;border:0}
.champ > label,.champ > legend{display:block;padding:0;font-weight:600;font-size:var(--text-md);line-height:1.35;color:var(--color-ink)}
.champ > legend{margin-bottom:var(--space-sm)}
.champ input:not([type="radio"]):not([type="checkbox"]),.champ textarea{width:100%;min-height:52px;margin:0;padding:12px 14px;
  border:1.5px solid var(--color-champ);border-radius:var(--radius-control);background:var(--color-paper-3);color:var(--color-ink);
  font:inherit;font-size:var(--text-md);line-height:1.4;transition:border-color var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)}
.champ textarea{min-height:120px;resize:vertical}
.champ ::placeholder{color:var(--color-muted);opacity:1}
.champ input:hover,.champ textarea:hover{border-color:var(--color-ink-2)}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--color-ink);box-shadow:0 0 0 3px var(--color-anneau)}
.champ input:focus-visible,.champ textarea:focus-visible{outline:none}
.champ [aria-invalid="true"]{border-color:var(--color-orange-texte) !important;background:#FFF6F1 !important}
.champ-aide{margin:0;font-size:var(--text-sm);line-height:1.45;color:var(--color-muted)}
.champ-erreur{margin:0;font-size:var(--text-sm);line-height:1.45;font-weight:600;color:var(--color-orange-texte)}
.champ-erreur[hidden]{display:none}
/* pastilles radio (métier, créneau) : cibles de 48 px, l'état coché en nuit */
.pastilles{display:flex;flex-wrap:wrap;gap:10px}
.pastilles label{position:relative;display:inline-flex}
.pastilles input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pastilles span{display:inline-flex;align-items:center;min-height:48px;padding:10px 18px;border:1.5px solid var(--color-champ);border-radius:var(--radius-pill);
  background:var(--color-paper-3);color:var(--color-ink);font-size:var(--text-md);font-weight:600;line-height:1.2;cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out)}
.pastilles span:hover{border-color:var(--color-ink)}
.pastilles input:checked + span{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-on-nuit)}
.pastilles input:focus-visible + span{outline:3px solid var(--color-focus);outline-offset:3px}
/* contacts directs (téléphone, e-mail, aide) */
.direct{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xl)}
.direct a{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:10px 18px;border:1.5px solid var(--color-rule-2);border-radius:var(--radius-pill);
  background:var(--color-paper-3);color:var(--color-ink);font-weight:600;text-decoration:none;
  transition:border-color var(--dur-micro) var(--ease-out)}
.direct a:hover{border-color:var(--color-ink)}
.direct svg{flex:none}

/* ── 11. pied ──────────────────────────────────────────────
   La nuit qui ferme la page. « Gérer les cookies » est ajouté par consentement.js au bout
   de la liste .pied-liens (un <li> de plus). */
.pied{padding-block:var(--space-3xl) var(--space-xl);background:var(--color-ink);color:var(--color-on-nuit)}
.pied-grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--gap-columns)}
.pied-marque img{width:auto;height:36px}
.pied-marque p{margin-top:var(--space-md);max-width:30ch;color:var(--color-on-nuit-2)}
.pied-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-columns)}
.pied-nav a{display:inline-flex;align-items:center;min-height:48px;min-width:48px;color:var(--color-on-nuit);text-decoration:none;transition:color var(--dur-micro) var(--ease-out)}
.pied-nav a:hover{color:var(--color-on-nuit-2);text-decoration:underline}
/* la page courante, quand elle n'est que dans le pied (calculateur, aide, mentions légales) */
.pied-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--color-on-nuit-2);text-underline-offset:.3em}
.pied-legal{margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:1px solid var(--color-rule-nuit);font-size:var(--text-sm);color:var(--color-on-nuit-2)}

/* ── 12. pages de texte (aide, mentions légales) ───────────
   <body class="page-texte"> : une colonne de lecture, le contenu inchangé (classes
   d'origine : .mono, .chapeau, .bloc, .actions). */
.page-texte main{max-width:calc(46rem + 2 * var(--gutter));padding-block:var(--space-2xl) var(--section-gap-s)}
.page-texte main h1{font-size:var(--text-page);line-height:1.08}
.page-texte main h2{margin:var(--space-2xl) 0 var(--space-md);padding-top:var(--space-xl);border-top:1px solid var(--color-rule);font-size:clamp(1.5rem,1vw + 1.1rem,1.875rem);line-height:1.2}
.page-texte main h3{margin:var(--space-xl) 0 var(--space-xs);font-size:var(--text-title)}
.page-texte main p,.page-texte main li,.page-texte main dd{color:var(--color-ink-2)}
.page-texte main p{margin:0 0 var(--space-md)}
.page-texte main strong{color:var(--color-ink)}
.page-texte main a:not(.btn){font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.page-texte main a:not(.btn):hover{text-decoration-color:var(--color-focus)}
.page-texte main ul{display:grid;gap:var(--space-xs);margin:0 0 var(--space-md);padding-left:1.25em;list-style:disc}
.page-texte main li::marker{color:var(--color-muted)}
.page-texte code{padding:1px 6px;border-radius:6px;background:var(--color-paper-2);font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.92em;color:var(--color-ink)}
.page-texte main .mono{color:var(--color-muted)}
.page-texte main .chapeau{margin:var(--space-lg) 0 var(--space-xl);font-size:var(--text-lead);line-height:1.55}
.page-texte .bloc{margin:var(--space-lg) 0;padding:var(--space-lg) var(--space-lg) var(--space-md);border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-3)}
.page-texte .bloc h2{padding-top:0;border-top:0}
.page-texte dl{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:var(--space-sm) var(--space-lg);margin:0 0 var(--space-xs)}
.page-texte dt{font-weight:600;color:var(--color-ink)}
.page-texte dd{margin:0;overflow-wrap:anywhere}
.page-texte .actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--color-rule)}
.page-texte .actions a{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:10px 18px;border:1.5px solid var(--color-rule-2);
  border-radius:var(--radius-pill);background:var(--color-paper-3);color:var(--color-ink);font-weight:600;text-decoration:none}
.page-texte .actions a:hover{border-color:var(--color-ink)}
.page-texte .actions svg{flex:none}

/* ── 13. tailles d'écran ─────────────────────────────────── */
@media (max-width:60rem){
  :root{--gutter:24px;--section-gap-s:80px;--section-gap:96px}
  .entete-nav{display:none}
  .nav-tel{display:block}
  .entete-barre{gap:var(--space-sm)}
  .faq-grille{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
  .faq-grille h2{max-width:none}
  .pied-grille{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
}
/* téléphone et tablette : 16 px au minimum partout (y compris les codes des pages de texte) */
@media (max-width:48rem){
  :root{--text-sm:1rem}
  .page-texte code{font-size:1em}
}
@media (max-width:40rem){
  :root{--gutter:16px;--section-gap-s:64px;--section-gap:72px;--gap-columns:16px}
  .entete-barre{min-height:64px}
  .entete-logo img{height:30px}
  /* « Essai gratuit » seul dans la barre : « 14 jours » reste lu par les lecteurs d'écran */
  .entete-essai-plus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .entete-essai{margin-left:0}
  .page-tete{padding-block:var(--space-xl) var(--space-lg)}
  .essai-final-cadre{padding:var(--space-xl) var(--space-lg)}
  .essai-final-cadre .btn{width:100%;white-space:normal}
  .cadre-visuel{padding:var(--space-lg)}
  .pied-nav{display:flex;flex-wrap:wrap;gap:0 var(--space-lg)}
  .pied-nav ul{display:contents}
  .pied-nav a{white-space:nowrap}
  .page-texte dl{grid-template-columns:minmax(0,1fr);gap:0}
  .page-texte dd{margin-bottom:var(--space-sm)}
  .page-texte .actions a{flex:1 1 auto;justify-content:center}
}
/* très petit téléphone (320 px) : la barre garde le logo et « Menu » ; « Essai gratuit » est dans le menu */
@media (max-width:22.4rem){
  .entete-essai{display:none}
}

/* ── 14. mouvement réduit : aucune animation, état final ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}