/* ══ 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}
::selection{background:var(--or);color:var(--nuit)}
::-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)}
.ink :focus-visible{outline-color:var(--or)}
.skip-link{position:absolute;top:-48px;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%}
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)}
.lecture{max-width:var(--largeur-lecture)}
.ink{background-color:var(--nuit-clair);background-image:linear-gradient(168deg,var(--nuit-clair) 0%,var(--nuit) 70%);color:var(--blanc)}

/* ── 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}
.ink h1,.ink h2,.ink h3{color:var(--blanc)}
.lead{font-size:var(--taille-intro);color:var(--texte-doux)}
.ink .lead{color:var(--texte-nuit)}
.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 sur la nuit et en mode sombre (reglages.css : --or-texte). ── */
.avec-point{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)}
.ink .point-or{background:var(--or)}
@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)}
.wordmark-texte{display:inline;padding:0;font-size:inherit;line-height:inherit}
.ink .wordmark{color:var(--blanc)}
.ink .wordmark .pay{color:var(--bleu-nuit)}

/* ── 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)}
/* Sur la nuit et en mode sombre, pas de halo bleu sous le bouton : une ombre colorée sur fond sombre fait lueur. */
.ink .btn-primary{box-shadow:none}
@media(prefers-color-scheme:dark){.btn-primary{box-shadow:none}}
.btn-ghost{background:var(--surface);color:var(--lien);border:1.5px solid var(--bordure)}
.btn-ghost:hover{border-color:var(--bleu);color:var(--lien)}
.btn-ghost-ink{background:transparent;color:var(--blanc);border:1.5px solid color-mix(in srgb,var(--blanc) 55%,transparent)}
.btn-ghost-ink:hover{border-color:var(--blanc);background:color-mix(in srgb,var(--blanc) 6%,transparent)}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}
.cta-login{display:block;width:fit-content;margin-top:14px;padding:6px 0;font-size:var(--taille-petite);color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ── Barre du haut : logo, liens, bascule clair/sombre (theme.js), bouton d'action.
   Bouton d'action et boutons icônes : même hauteur, 44 px. ── */
body>nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--fond) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--bordure)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--espace-1);height:64px}
.nav-links{display:flex;align-items:center;gap:10px}
.nav-links a{padding:13px 8px;font-size:var(--taille-petite);font-weight:600;color:var(--texte-doux);text-decoration:none;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--texte)}
.nav-links a.nav-cta{min-height:44px;padding:10px 18px;font-size:var(--taille-bouton);font-weight:700;color:var(--blanc)}
.nav-links a.nav-cta:hover,.nav-links a.nav-cta:focus-visible{color:var(--blanc)}
.lang{font-size:var(--taille-petite);font-weight:600;color:var(--texte-doux);white-space:nowrap}
.lang [aria-current]{color:var(--texte);font-weight:700}
.nav-links .lang a{display:inline-block;padding:13px 4px}
.theme-btn,.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}
.theme-btn:hover,.menu-btn:hover{border-color:var(--texte-doux)}
.theme-btn:focus-visible,.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(--espace-2) var(--espace-2);background:var(--surface);border-bottom:1px solid var(--bordure);box-shadow:var(--ombre)}
.menu-mob[hidden]{display:none}
.menu-mob a,.theme-ligne{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,.theme-ligne:hover{background:color-mix(in srgb,var(--texte) 5%,transparent)}
.theme-ligne{display:none}
@media(max-width:960px){.nav-links a:not(.nav-cta),.nav-links .lang{display:none}.menu-btn{display:inline-flex}.nav-links{gap:8px}}
/* 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}
/* 28/10 : libellé court sur téléphone, 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)}}
/* Très petit écran (320 px) : bouton d'action resserré ; sans menu, la bascule clair/sombre laisse la place (le thème suit le téléphone). */
@media(max-width:359px){.nav-links{gap:4px}.nav-links a.nav-cta{padding:10px}.nav-links:not(:has(.menu-btn)) .theme-btn{display:none}}
/* 28/10 : sous 400 px, sur une page qui a un menu, la bascule clair/sombre passe dans le menu. */
@media(max-width:400px){.nav-links:has(.menu-btn) .theme-btn{display:none}.theme-ligne{display:block}}

/* ── Questions fréquentes : des lignes, pas des boîtes ── */
.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 bleu nuit (version simple ; l'accueil a sa version en colonnes) ── */
footer.ink{border-top:1px solid var(--bordure-nuit);color:var(--texte-nuit-doux)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--espace-1) var(--espace-3);padding-top:30px;padding-bottom:30px;font-size:var(--taille-petite)}
.foot-in a{display:inline-block;padding:10px 0;color:var(--texte-nuit-doux);text-decoration:none}
.foot-in a.wordmark{padding:10px 0;color:var(--blanc)}
.foot-in a:hover{color:var(--blanc)}
.foot-legal{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.foot-note{flex:1 0 100%;max-width:72ch;font-size:var(--taille-mini);line-height:1.5}

/* ══ 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;text-align:center}
.guide .header h1{margin-bottom:12px}
.guide .header .lead{max-width:52ch;margin:0 auto}
.guide .header .maj{margin-top:14px;font-size:var(--taille-petite);color:var(--texte-nuit-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}
.guide .cta-box{margin:var(--espace-5) 0;padding:36px var(--espace-3);border:1px solid var(--bordure-nuit);border-radius:var(--arrondi);text-align:center}
.guide .cta-box h3{margin-top:0;color:var(--blanc)}
.guide .content .cta-box p{max-width:52ch;margin:10px auto 20px;color:var(--texte-nuit)}
@media(prefers-color-scheme:dark){.guide .cta-box{border-color:var(--bordure-nuit-forte)}}
.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{border-bottom:1px solid var(--bordure)}
.legal-hero .wrap{max-width:var(--largeur-lecture);padding-top:56px;padding-bottom:40px}
.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{max-width:var(--largeur-lecture)}
.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 : arrondi et ombre douce ; en clair, l'ombre remplace le contour ── */
.plan,.cta-card,.cta-box{border-radius:var(--arrondi);box-shadow:var(--ombre-douce)}
@media(prefers-color-scheme:light){.plan:not(.plan-ink),.cta-card:not(.ink){border:0}}

/* ── Champs de formulaire : même hauteur que les boutons (48 px). :where() : une page garde la main. ── */
: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,select,textarea):focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 4px color-mix(in srgb,var(--bleu) 15%,transparent)}