/* ══ Feuille commune du site français (solvipay.fr) ══
   Chargée par toutes les pages françaises, dans cet ordre :
   /reglages.css (couleurs, tailles, espaces), /fonts/inter.css (polices),
   /site.css (ce fichier), puis le <style> de la page (sa mise en page seulement).
   Ici : base, barre du haut, logo, boutons, point doré, titres, pied de page,
   et les gabarits partagés par plusieurs pages (guides, pages légales).
   Aucune valeur de couleur ou de taille de texte en dur : tout vient de reglages.css.
   Garde-fou : scripts/tests/coherence_site.test.mjs (polices, point doré,
   bouton du haut centré, échelle des tailles, icônes d'onglet). */

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--police);font-size:var(--taille-texte);line-height:1.6;color:var(--texte);background:var(--fond);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Surlignage du texte : bleu des boutons léger, comme l'appli Next.js. Jamais doré (Romain, 04/11 : le doré est un point ou une ligne, jamais un fond). */
::selection{background:color-mix(in srgb,var(--bleu) 22%,transparent);color:inherit}
@media(prefers-color-scheme:dark){::selection{background:color-mix(in srgb,var(--bleu) 45%,transparent)}}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--texte-doux);border-radius:var(--arrondi-pilule);border:3px solid var(--fond)}
:focus-visible{outline:3px solid var(--lien);outline-offset:2px;border-radius:var(--arrondi-petit)}
.skip-link{position:absolute;top:-64px;left:0;z-index:100;padding:10px 18px;background:var(--bleu);color:var(--blanc);font-weight:600;text-decoration:none;border-radius:0 0 var(--arrondi-petit) 0}
.skip-link:focus,.skip-link:hover{top:0;color:var(--blanc)}
img,svg{display:block;max-width:100%}
/* L'attribut hidden l'emporte toujours : une règle display d'une page ne le défait jamais (bug de /v/ du 03/11). */
[hidden]{display:none!important}
a{color:inherit}
button,input,select,textarea{font-family:var(--police);font-size:var(--taille-texte);color:inherit}
small{font-size:var(--taille-petite)}
sup{font-size:.7em;line-height:0}
.wrap{max-width:var(--largeur);margin:0 auto;padding:0 var(--marge)}
/* Colonne de lecture (guides, pages légales, 404, /procedure) : 760 px au plus, sur le même bord
   gauche que le logo et le pied de page (un seul bord gauche sur tout le site, défaut 8 du 04/11). */
:where(.lecture)>*{max-width:var(--largeur-lecture)}

/* ── Haut de page : un seul style sur tout le site, celui des pages légales et de la 404 :
   le fond de la page et un trait dessous, en clair comme en sombre (Romain, 04/11 : « cohérence
   mode sombre, mode clair »). Plus aucun bandeau bleu nuit. ── */
.hero,.guide .header,.legal-hero{border-bottom:1px solid var(--bordure)}

/* ── Titres : Manrope 800 (h1) et 700, tailles de l'échelle ── */
h1,h2,h3{font-family:var(--police-titres);font-weight:700;text-wrap:balance}
h1{font-size:var(--taille-titre);font-weight:800;line-height:1.1;letter-spacing:-.02em}
h2{font-size:var(--taille-section);line-height:1.14;letter-spacing:-.02em}
h3{font-size:var(--taille-intertitre);line-height:1.25;letter-spacing:-.01em}
.lead{font-size:var(--taille-intro);color:var(--texte-doux)}
.montant,.plan-price,[data-montant]{font-family:var(--police-titres);font-weight:800;font-variant-numeric:tabular-nums}

/* ── Le point doré : un disque, jamais le caractère « . »
   <span class="avec-point">dernier mot<span class="point-or" aria-hidden="true"></span></span>
   (.avec-point garde le point sur la ligne du dernier mot). Or foncé sur fond clair,
   or vif en mode sombre (reglages.css : --or-texte). ── */
.avec-point{white-space:nowrap}
/* Mot à trait d'union jamais coupé en fin de ligne (« e-mail », « vous-même », « F-2026-118 », « L441-10 »). */
.mot{white-space:nowrap}
.point-or{display:inline-block;width:.13em;height:.13em;margin-left:.07em;margin-bottom:.015em;border-radius:var(--arrondi-pilule);background:var(--or-texte)}
@media(prefers-reduced-motion:no-preference){
  h1 .point-or{animation:pose .5s ease-out .35s both}
  @keyframes pose{from{transform:translateY(-.5em)}to{transform:none}}
}

/* ── Logo « SolviPay. » (identité : ne pas changer) ── */
.wordmark{display:flex;align-items:center;font-family:"SolviPay Wordmark","Inter",sans-serif;font-size:var(--taille-logo);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--texte);text-decoration:none;padding:10px 0;white-space:nowrap}
.wordmark .pay{color:var(--logo-pay)}
.wordmark .ldot{display:inline-block;width:.17em;height:.17em;margin-left:.03em;margin-bottom:.01em;border-radius:var(--arrondi-pilule);background:var(--or)}
/* Chute du point doré au premier affichage de la visite (web/theme.js) : 500 ms, deux diamètres. */
@media(prefers-reduced-motion:no-preference){html[data-point=chute] .barre .wordmark .ldot{animation:point-chute .5s cubic-bezier(0,0,.58,1) both}}
@keyframes point-chute{from{transform:translateY(-.34em)}}
.wordmark-texte{display:inline;padding:0;font-size:inherit;line-height:inherit}

/* ── Boutons : Manrope 700, 48 px, texte centré (inline-flex) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px var(--espace-3);border:0;border-radius:var(--arrondi-petit);font-family:var(--police-titres);font-size:var(--taille-bouton);font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,box-shadow .15s,transform .15s}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.6;cursor:default}
.btn-primary{background:var(--bleu);color:var(--blanc);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--bleu) 45%,transparent)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--bleu-survol);color:var(--blanc)}
/* En mode sombre, pas de halo bleu sous le bouton : une ombre colorée sur fond sombre fait lueur. */
@media(prefers-color-scheme:dark){.btn-primary{box-shadow:none}}
/* Bouton secondaire (contour) : fond de carte, texte encre, contour 1,5 px (DESIGN_SYSTEM.md, boutons v2).
   Hiérarchie du site : un seul bouton plein par zone ; une autre action = contour ; un renvoi = lien. */
.btn-ghost{background:var(--surface);color:var(--texte);border:1.5px solid var(--bordure-forte)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--texte-doux);color:var(--texte);background:var(--fond-alt)}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}
/* « Déjà un compte ? Se connecter » sous un bouton : un lien, cible de 44 px. */
.cta-login{display:flex;align-items:center;width:fit-content;min-height:44px;margin-top:6px;font-size:var(--taille-petite);color:var(--texte-doux);text-decoration:underline;text-underline-offset:3px}
.cta-login:hover{color:var(--texte)}

/* ── Barre du haut : une seule, même HTML sur toutes les pages françaises, la 404 et /procedure,
   et la même en anglais sur /en (PB-3127 ; garde-fou : scripts/tests/coherence_site.test.mjs).
   De droite à gauche : le menu (sous 1100 px), « Ajouter une facture impayée » (le seul bouton
   plein), « Se connecter » (contour, dès 600 px), les liens (dès 1100 px), le logo.
   Sous 600 px, « Se connecter » ouvre le menu, en premier et en contour : à 360 px, un quatrième
   élément dans la barre couperait le libellé du bouton plein. Boutons de la barre : 44 px.
   Fond opaque : dans Safari, le fond translucide laissait voir le texte de la page dessous.
   Le choix du thème est dans le pied de page. Script : web/theme.js. ── */
body>nav.barre{position:sticky;top:0;z-index:50;background:var(--fond);border-bottom:1px solid var(--bordure)}
.nav-in{display:flex;align-items:center;gap:var(--espace-1);height:64px}
.nav-in>.wordmark{margin-right:auto}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-lien{padding:13px 8px;font-size:var(--taille-petite);font-weight:600;color:var(--texte-doux);text-decoration:none;white-space:nowrap}
.nav-lien:hover,.nav-lien[aria-current="page"]{color:var(--texte)}
/* Page courante : un trait doré sous le lien (le doré est un point ou une ligne). */
.nav-lien[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--or);text-decoration-thickness:2px;text-underline-offset:8px}
.nav-links a.nav-cta,.nav-links a.nav-login{min-height:44px;padding:10px 18px;font-size:var(--taille-bouton);white-space:nowrap}
.nav-links a.nav-login{padding:10px 16px}
.nav-links a.nav-cta,.nav-links a.nav-cta:hover,.nav-links a.nav-cta:focus-visible{color:var(--blanc)}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--bordure);border-radius:var(--arrondi-petit);background:transparent;color:var(--texte);cursor:pointer;transition:border-color .2s}
.menu-btn:hover{border-color:var(--texte-doux)}
.menu-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.menu-btn{display:none}
.menu-mob{position:absolute;top:64px;left:0;right:0;padding:8px var(--marge) var(--espace-2);background:var(--surface);border-bottom:1px solid var(--bordure);box-shadow:var(--ombre)}
.menu-mob a{display:block;width:100%;padding:13px 8px;border:0;border-radius:var(--arrondi-petit);background:transparent;font-size:var(--taille-texte);font-weight:600;color:var(--texte);text-align:left;text-decoration:none;cursor:pointer}
.menu-mob a:hover{background:color-mix(in srgb,var(--texte) 5%,transparent)}
/* « Se connecter » en tête du menu : le même contour que dans la barre. */
.menu-mob a.menu-login{display:flex;align-items:center;justify-content:center;min-height:48px;margin:4px 0 8px;border:1.5px solid var(--bordure-forte);font-family:var(--police-titres);font-size:var(--taille-bouton);font-weight:700;text-align:center}
/* Sous 1100 px : les liens passent dans le menu ; sous 600 px, « Se connecter » aussi. */
@media(max-width:1099px){.nav-lien{display:none}.menu-btn{display:inline-flex}}
@media(max-width:599px){.nav-links a.nav-login{display:none}}
@media(min-width:600px){.menu-mob a.menu-login{display:none}}
/* Fin de libellé masquable : son texte reste dans la même ligne que le début (une seule boîte dans le bouton). */
.cta-long{display:contents}
/* Téléphone : libellé court, sinon le bouton du haut sort de l'écran (443 px pour 390). */
@media(max-width:520px){.nav-cta .cta-long{display:none}.nav-links a.nav-cta{padding:10px 14px;font-size:var(--taille-petite)}}
@media(max-width:359px){.nav-links{gap:4px}.nav-links a.nav-cta{padding:10px}}

/* ── Questions fréquentes : des lignes, pas des boîtes. Accueil, /en et /tarifs : titre à gauche,
   questions à droite (.faq-in), sur le bord gauche commun. ── */
.faq-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:24px 64px;align-items:start}
.faq-in .tete{margin-bottom:0;position:sticky;top:96px}
@media(max-width:860px){.faq-in{grid-template-columns:minmax(0,1fr)}.faq-in .tete{position:static;margin-bottom:var(--espace-2)}}
.faq details{border-bottom:1px solid var(--bordure)}
.faq details:first-of-type{border-top:1px solid var(--bordure)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--espace-2);min-height:44px;padding:21px 2px;font-size:var(--taille-texte);font-weight:700;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--lien-survol)}
.faq summary::after{content:"+";flex:0 0 auto;font-family:var(--police-titres);font-size:var(--taille-intertitre);font-weight:700;line-height:1;color:var(--texte-doux);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:66ch;padding:0 2px 22px;font-size:var(--taille-texte);color:var(--texte)}
.faq details a{color:var(--lien);padding:5px 0}

/* ── Index des guides (accueil, guides, pénalités) ── */
.guide-row{display:grid;grid-template-columns:minmax(200px,.9fr) 1.1fr auto;gap:12px 32px;align-items:baseline;padding:26px 2px;border-top:1px solid var(--bordure);color:inherit;text-decoration:none}
.guide-row:last-child,.guide-row:last-of-type{border-bottom:1px solid var(--bordure)}
.guide-row h3{margin:0;font-size:var(--taille-intro);color:var(--texte);transition:color .15s}
.guide-row p{max-width:60ch;margin:0;font-size:var(--taille-texte);color:var(--texte-doux)}
.guide-row .go{align-self:center;flex:0 0 auto}
.guide-row .go svg{width:20px;height:20px;fill:none;stroke:var(--lien);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.guide-row:hover h3{color:var(--lien-survol)}
.guide-row:hover .go svg{transform:translateX(4px)}
@media(max-width:720px){.guide-row{grid-template-columns:1fr auto}.guide-row p{grid-column:1/-1}.guide-row .go{grid-column:2;grid-row:1}}

/* ── Pied de page : un seul, même HTML sur toutes les pages françaises.
   Marque et phrase, quatre colonnes de liens, puis © et pages légales.
   La ligne d'identité de l'éditeur (<!--identite:pied-->) n'apparaît qu'une fois
   web/identite-fr.json rempli (scripts/remplir_identite_fr.py, au déploiement). ── */
footer.pied-site{background:var(--fond-alt);border-top:1px solid var(--bordure);color:var(--texte-doux);font-size:var(--taille-petite)}
.pied-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:var(--espace-4) var(--espace-5);padding-top:56px;padding-bottom:40px}
.pied-marque .wordmark{width:fit-content}
.pied-marque p{margin-top:var(--espace-1);max-width:34ch}
.pied-ident{color:var(--texte)}
.pied-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--espace-3)}
.pied-cols h2{margin-bottom:6px;font-size:var(--taille-petite);font-weight:700;line-height:1.4;letter-spacing:0;color:var(--texte)}
.pied-cols ul,.pied-legal{list-style:none}
.pied-cols li{padding:12px 0;line-height:1.4}
.pied-cols li:has(a){padding:0}
.pied-cols a,.pied-legal a{display:inline-block;padding:12px 0;color:var(--texte-doux);text-decoration:none;overflow-wrap:anywhere}
.pied-cols a:hover,.pied-legal a:hover{color:var(--texte);text-decoration:underline;text-underline-offset:3px}
.pied-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--espace-3);padding-top:12px;padding-bottom:20px}
.pied-bas::before{content:"";flex:1 0 100%;height:1px;margin-bottom:12px;background:var(--bordure)}
.pied-legal{display:flex;flex-wrap:wrap;gap:0 var(--espace-3)}
/* Thème : Automatique (suit le téléphone ou le navigateur) · Clair · Sombre (web/theme.js).
   Choix en cours : couleur du texte, souligné d'un trait doré, comme la page courante de la barre. */
.theme-choix{display:flex;flex-wrap:wrap;align-items:center}
.theme-choix>span:first-child{margin-right:6px}
.theme-choix button{min-height:44px;padding:0 6px;border:0;background:none;font:inherit;color:var(--texte-doux);cursor:pointer}
.theme-choix button:hover{color:var(--texte)}
.theme-choix button:focus-visible{outline:2px solid currentColor;outline-offset:-4px;border-radius:var(--arrondi-petit)}
.theme-choix button[aria-pressed="true"]{color:var(--texte);text-decoration:underline;text-decoration-color:var(--or);text-decoration-thickness:2px;text-underline-offset:6px}
.theme-choix .sep::before{content:"·";color:var(--texte-doux)}
@media(max-width:860px){.pied-in{grid-template-columns:minmax(0,1fr)}.pied-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--espace-3) var(--espace-2)}}

/* ══ Gabarit « guide » : <body class="guide"> (trois guides et calculateur de pénalités) ══ */
body.guide{font-size:var(--taille-lecture)}
.guide .header{padding:64px 0 52px}
.guide .header h1{margin-bottom:12px}
.guide .header .lead{max-width:52ch}
.guide .header .maj{margin-top:14px;font-size:var(--taille-petite);color:var(--texte-doux)}
.guide .content{display:block;padding:var(--espace-5) 0}
.guide .content a{color:var(--lien);text-decoration:underline;text-underline-offset:2px}
.guide .content a:hover{color:var(--lien-survol)}
.guide .content .btn{text-decoration:none}
.guide .content .btn-primary,.guide .content .btn-primary:hover{color:var(--blanc)}
.guide .section{margin-bottom:40px}
.guide .content h2{margin-top:40px;margin-bottom:var(--espace-2)}
.guide .content .section:first-child h2{margin-top:0}
.guide .content h3{margin-top:var(--espace-3);margin-bottom:12px}
.guide .content p{margin-bottom:var(--espace-2);color:var(--texte-doux)}
.guide .content strong{color:var(--texte);font-weight:700}
.guide .content ul,.guide .content ol{margin:var(--espace-2) 0 var(--espace-2) var(--espace-3)}
.guide .content li{margin-bottom:12px;color:var(--texte-doux)}
.guide .solvipay-box{margin:32px 0;padding:22px;background:var(--info-fond);border:1px solid var(--info-bordure);border-radius:var(--arrondi)}
.guide .solvipay-box h3{margin-top:0;color:var(--info-texte)}
.guide .content .solvipay-box p{margin-bottom:12px;color:var(--info-texte)}
.guide .content .solvipay-box p:last-child{margin-bottom:0}
/* Encadré d'action du guide : une carte (fond de carte, ombre en clair, trait en sombre), comme les encarts. */
.guide .cta-box{margin:var(--espace-5) 0;padding:36px var(--espace-3);background:var(--surface);border:1px solid var(--bordure);border-radius:var(--arrondi);text-align:center}
.guide .cta-box .btn{margin-top:4px}
.guide .cta-box .cta-login{margin:6px auto 0}
.guide .cta-box h3{margin-top:0}
.guide .content .cta-box p{max-width:52ch;margin:10px auto 20px}
.guide .guides-sec{padding:56px 0;background:var(--fond-alt);border-top:1px solid var(--bordure);border-bottom:1px solid var(--bordure)}
.guide .guides-sec h2{margin:0 0 28px}
@media(max-width:480px){
  .guide .content h2{margin-top:32px}
  .guide .content ul,.guide .content ol{margin-left:var(--espace-2)}
  .guide .content li{margin-bottom:10px}
  .guide .solvipay-box{padding:18px}
  .guide .cta-box{padding:var(--espace-3) 18px}
}

/* ══ Gabarit « document » : <header class="legal-hero"> et <main class="legal-main"> (CGU, confidentialité, mentions légales) ══ */
.legal-hero .wrap{padding-top:56px;padding-bottom:40px}
:where(.legal-hero .wrap,.legal-main .doc)>*{max-width:var(--largeur-lecture)}
.legal-hero h1{margin:0 0 14px}
.legal-hero p{max-width:62ch;font-size:var(--taille-texte);color:var(--texte-doux)}
.legal-hero .maj{margin-top:var(--espace-2);font-size:var(--taille-petite);font-weight:500;color:var(--texte-doux)}
.legal-main{padding:var(--espace-5) 0 88px}
@media(max-width:720px){.legal-main{padding:36px 0 64px}}
.legal-main .doc section{margin-top:44px;scroll-margin-top:84px}
.legal-main .doc section:first-of-type{margin-top:0}
.legal-main .doc h2{margin-bottom:14px;font-size:var(--taille-intertitre);line-height:1.25;letter-spacing:-.01em}
.legal-main .doc h2 .num{margin-right:10px;color:var(--texte-doux);font-variant-numeric:tabular-nums}
.legal-main .doc h3{margin:22px 0 6px;font-size:var(--taille-texte)}
.legal-main .doc p,.legal-main .doc li{font-size:var(--taille-texte);color:var(--texte-doux)}
.legal-main .doc p{margin-bottom:12px}
.legal-main .doc p strong,.legal-main .doc li strong{color:var(--texte)}
.legal-main .doc p:last-child{margin-bottom:0}
.legal-main .doc ul,.legal-main .doc ol{display:grid;gap:var(--espace-1);margin:0 0 12px;padding-left:20px}
.legal-main .doc a{padding:5px 0;color:var(--lien);text-decoration:underline;text-underline-offset:2px}
.legal-main .doc a:hover{color:var(--lien-survol)}
.legal-main .doc small{display:block;margin-top:var(--espace-1);font-size:var(--taille-petite);color:var(--texte-doux)}
.legal-main .toc{margin-bottom:44px;padding:22px 26px;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--arrondi)}
.legal-main .toc p{margin-bottom:12px;font-family:var(--police-titres);font-size:var(--taille-texte);font-weight:700;color:var(--texte)}
.legal-main .toc ol{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:toc}
.legal-main .toc li{display:flex;align-items:baseline;gap:var(--espace-1);font-size:var(--taille-petite);counter-increment:toc}
.legal-main .toc li::before{content:counter(toc) ".";font-weight:700;font-variant-numeric:tabular-nums;color:var(--texte-doux)}
.legal-main .toc a{display:inline-block;padding:6px 0;color:var(--texte);text-decoration:none}
.legal-main .toc a:hover{color:var(--lien);text-decoration:underline}
.legal-main .note{margin:var(--espace-2) 0;padding:var(--espace-2) 20px;background:var(--fond-alt);border:1px solid var(--bordure);border-radius:var(--arrondi-petit)}
.legal-main .note p{font-size:var(--taille-petite)}
.legal-main .note p:last-child{margin-bottom:0}
.legal-main .ident{display:grid;gap:10px;padding:22px 26px;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--arrondi)}
.legal-main .ident+.ident{margin-top:12px}
.legal-main .ident div{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--taille-texte)}
.legal-main .ident dt,.legal-main .ident .k{flex:0 0 220px;padding-top:2px;font-size:var(--taille-petite);font-weight:700;color:var(--texte-doux)}
@media(max-width:640px){.ident dt,.ident .k{flex:1 0 100%}}
.legal-main .tbl{width:100%;border-collapse:collapse;overflow:hidden;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--arrondi);font-size:var(--taille-petite)}
.legal-main .tbl th,.legal-main .tbl td{padding:12px var(--espace-2);text-align:left;vertical-align:top;border-bottom:1px solid var(--bordure)}
.legal-main .tbl th{font-size:var(--taille-petite);color:var(--texte-doux);background:var(--fond-alt)}
.legal-main .tbl tr:last-child td{border-bottom:0}
.legal-main .tbl-scroll{overflow-x:auto;margin-bottom:12px}
@media(max-width:640px){
  .legal-main .tbl,.legal-main .tbl tbody,.legal-main .tbl tr,.legal-main .tbl td{display:block;width:100%}
  .legal-main .tbl thead{display:none}
  .legal-main .tbl tr{padding:var(--espace-1) 0;border-bottom:1px solid var(--bordure)}
  .legal-main .tbl tr:last-child{border-bottom:0}
  .legal-main .tbl td{padding:3px var(--espace-2);border:0;color:var(--texte-doux)}
  .legal-main .tbl td:first-child{padding-top:10px;font-weight:700;color:var(--texte)}
  .legal-main .tbl td:last-child{padding-bottom:10px}
}

/* ── Cartes (cartes, encarts, encadré d'action des guides) : fond de carte et arrondi.
   En clair, une ombre douce remplace le trait ; en sombre, le trait (1,6:1) et la teinte plus
   claire (1,24:1) les détachent du fond, sans ombre (invisible sur fond sombre). ── */
.carte-site,.encart,.guide .cta-box{border-radius:var(--arrondi)}
@media(prefers-color-scheme:light){.carte-site,.encart,.guide .cta-box{border-color:transparent;box-shadow:var(--ombre-douce)}}

/* ── Champs de formulaire : même hauteur que les boutons (48 px). :where() : une page garde la main.
   Safari dessine ses propres contrôles (menu de 24 px, case de 14 px, date du jour en grisé dans
   une date vide) : menus, cases et dates sont redessinés ici, pareils dans tous les navigateurs. ── */
:where(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea){min-height:48px;padding:0 14px;border:1.5px solid var(--texte-doux);border-radius:var(--arrondi-petit);background:var(--surface);color:var(--texte);font-size:var(--taille-texte)}
:where(textarea){padding:12px 14px}
:where(input:not([type=checkbox],[type=radio]),select,textarea):focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 4px color-mix(in srgb,var(--bleu) 15%,transparent)}
/* Menu déroulant : 48 px partout, chevron dessiné aux couleurs du thème. */
:where(select){-webkit-appearance:none;appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,var(--texte-doux) 50%),linear-gradient(135deg,var(--texte-doux) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;cursor:pointer}
/* Case à cocher : 22 px dessinés, 44 px de cible (marges négatives : la mise en page ne voit que 22 px). */
:where(input[type=checkbox]){-webkit-appearance:none;appearance:none;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;margin:-11px;padding:0;border:0;background:none;cursor:pointer}
input[type=checkbox]::before,input[type=checkbox]::after{content:"";grid-area:1/1}
input[type=checkbox]::before{width:22px;height:22px;border:1.5px solid var(--texte-doux);border-radius:6px;background:var(--surface);transition:background-color .15s,border-color .15s}
input[type=checkbox]::after{width:14px;height:14px;opacity:0;background:var(--blanc);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
input[type=checkbox]:checked::before{background:var(--bleu);border-color:var(--bleu)}
input[type=checkbox]:checked::after{opacity:1}
input[type=checkbox]:hover::before{border-color:var(--texte)}
input[type=checkbox]:checked:hover::before{border-color:var(--bleu)}
input[type=checkbox]:focus-visible{outline:none}
input[type=checkbox]:focus-visible::before{outline:3px solid var(--lien);outline-offset:2px}
@media(prefers-reduced-motion:reduce){input[type=checkbox]::before{transition:none}}
/* Date (Safari seulement) : texte aligné à gauche, et rien d'écrit tant que la date est vide
   (Safari y montrait la date du jour en grisé, prise pour une valeur). */
@supports (font:-apple-system-body){
  :where(input[type=date]){-webkit-appearance:none;appearance:none;display:flex;align-items:center}
  input[type=date]::-webkit-date-and-time-value{margin:0;text-align:left}
  input[type=date]:required:invalid:not(:focus)::-webkit-datetime-edit{opacity:0}
}

/* ══ Pages de présentation (accueil, méthode, tarifs, en) ══
   Une seule largeur de contenu (.wrap, 1120 px) et un seul bord gauche pour toutes
   les sections ; elles se séparent par un filet, jamais par un fond qui alterne
   (en sombre, trois bleus voisins faisaient des bandes). ══ */
.bande{padding:var(--espace-section) 0}
.bande+.bande{border-top:1px solid var(--bordure)}
.tete{max-width:46rem;margin-bottom:var(--espace-5)}
.tete .lead{margin-top:var(--espace-2)}
@media(max-width:720px){.tete{margin-bottom:var(--espace-4)}}

/* Cartes côte à côte : même hauteur, contenu en colonne, lien poussé en bas. */
.grille-3,.grille-2{display:grid;gap:var(--espace-3);align-items:stretch}
.grille-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grille-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:860px){.grille-3,.grille-2{grid-template-columns:minmax(0,1fr)}}
.carte-site{display:flex;flex-direction:column;min-width:0;padding:var(--espace-4);background:var(--surface);border:1px solid var(--bordure)}
@media(max-width:480px){.carte-site{padding:var(--espace-3)}}
.carte-site h3{font-size:var(--taille-intertitre)}
.carte-site>p{margin-top:var(--espace-1);color:var(--texte-doux)}
.carte-site>p.prix-titre{margin-top:var(--espace-1);color:var(--texte)}
.carte-site .bas{margin-top:auto;padding-top:var(--espace-2)}

/* Liste à coches : coche bleue (le doré reste un point ou une ligne, Romain 04/11) */
.coches{list-style:none;display:grid;gap:10px}
.coches li{display:flex;gap:12px;align-items:flex-start}
.coches li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;background:var(--lien);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* Lien d'action dans un texte */
.lien-fleche{display:inline-block;padding:10px 0;font-weight:600;color:var(--lien);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.lien-fleche:hover{color:var(--lien-survol)}

/* Encart d'action : une carte entièrement centrée (texte, bouton, lien) */
.encart{max-width:46rem;margin:0 auto;padding:var(--espace-5) var(--espace-4);background:var(--surface);border:1px solid var(--bordure);text-align:center}
.encart .lead{max-width:44ch;margin:var(--espace-2) auto var(--espace-4)}
.encart .cta-login{margin:14px auto 0}
@media(max-width:480px){.encart{padding:var(--espace-4) var(--espace-3)}}

/* Capture (écran de l'appli ou d'une page) : cadre clair et fin, sans panneau foncé autour en sombre */
.capture{margin:0}
.capture img{display:block;width:100%;height:auto;border:1px solid var(--bordure);border-radius:var(--arrondi);background:var(--blanc);box-shadow:var(--ombre-douce)}
@media(prefers-color-scheme:dark){.capture img{border-color:var(--bordure-nuit-forte);box-shadow:none}}
.capture figcaption{margin-top:10px;font-size:var(--taille-petite);color:var(--texte-doux)}

/* Décompte chiffré : le calcul montré, formule comprise */
.decompte{padding:var(--espace-3);background:var(--surface);border:1px solid var(--bordure);border-radius:var(--arrondi)}
.decompte h3{font-size:var(--taille-texte);margin-bottom:12px}
.decompte dl div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--espace-2);padding:8px 0;border-bottom:1px solid var(--bordure)}
.decompte dt small{display:block;color:var(--texte-doux);font-variant-numeric:tabular-nums}
.decompte dd{font-variant-numeric:tabular-nums;white-space:nowrap}
.decompte .total{font-weight:700;border-bottom:0}
.decompte>p{margin-top:12px;font-size:var(--taille-petite);color:var(--texte-doux)}

/* Prix des actes : libellé à gauche, prix sur la même ligne, aligné à droite (même au téléphone :
   le libellé se replie, le prix ne passe jamais dessous) ; détail éventuel sur une ligne à part. */
.prix-actes{list-style:none;border-top:1px solid var(--bordure)}
.prix-actes li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px var(--espace-2);padding:12px 0;border-bottom:1px solid var(--bordure)}
.prix-actes li>span:first-child{flex:1 1 0;min-width:0}
.prix-actes .px{flex:none;font-family:var(--police-titres);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.prix-actes .detail{flex:1 0 100%;font-size:var(--taille-petite);color:var(--texte-doux)}
/* « Ouverture prochaine » : les actes payants ne sont pas encore en vente (paiement en ligne et
   FF_MES_ACTES éteints). Bloc <!--actes:bientot--> retiré au déploiement le jour de l'ouverture
   (scripts/ouverture_actes.py, FF_MES_ACTES=true) ; registre : marketing/promesses-fr.yaml. */
.bientot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:var(--espace-1);font-size:var(--taille-petite);color:var(--texte-doux)}
.pastille{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border:1px solid var(--bordure-forte);border-radius:var(--arrondi-pilule);font-size:var(--taille-mini);font-weight:700;color:var(--texte);white-space:nowrap}

/* ══ Guides : les étapes en tête, le sommaire, l'encart d'action en haut ══ */
.guide .resume{margin:0 0 var(--espace-5);padding:var(--espace-4);background:var(--surface);border:1px solid var(--bordure);border-radius:var(--arrondi)}
@media(max-width:480px){.guide .resume{padding:var(--espace-3)}}
.guide .content .resume h2{margin:0 0 var(--espace-2);font-size:var(--taille-intertitre)}
.guide .content ol.etapes-guide{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:etape}
.guide .content .etapes-guide li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;margin:0;color:var(--texte);counter-increment:etape}
.guide .content .etapes-guide li::before{content:counter(etape);display:grid;place-items:center;width:32px;height:32px;border-radius:var(--arrondi-pilule);background:var(--nuit-clair);color:var(--blanc);font:700 var(--taille-petite)/1 var(--police-titres)}
@media(prefers-color-scheme:dark){.guide .content .etapes-guide li::before{background:var(--bleu-nuit);color:var(--nuit)}}
.guide .content .resume .mots{margin:var(--espace-2) 0 0;font-size:var(--taille-petite);color:var(--texte-doux)}
.guide .action-haut{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--espace-2);margin-top:var(--espace-3);padding-top:var(--espace-3);border-top:1px solid var(--bordure)}
.guide .content .action-haut p{flex:1 1 22rem;margin:0;color:var(--texte)}
.guide .sommaire{margin:0 0 var(--espace-5)}
.guide .content .sommaire h2{margin:0 0 var(--espace-1);font-size:var(--taille-texte)}
.guide .content .sommaire ol{display:grid;gap:0;margin:0;padding:0;list-style:none}
.guide .content .sommaire li{margin:0}
.guide .content .sommaire a{display:inline-block;padding:6px 0;font-size:var(--taille-texte);text-decoration:none}
.guide .content .sommaire a:hover{text-decoration:underline}
.guide .content [id]{scroll-margin-top:84px}