/* Pages publiques et de connexion : accueil, abonnement, légal, connexion, erreurs.
   Chargé après kiosk.css ; ne redéfinit aucun jeton de couleur. */

/* Échelle d’espacement unique (4 · 8 · 12 · 16 · 24 · 32 · 48 · 72 · 96) et largeur de lecture. */
:root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:72px;--sp-9:96px;--measure:65ch}

/* ===== En-tête commun (abonnement, merci) ===== */
.public-topbar .wrap{height:64px;gap:var(--sp-3)}
.public-topbar .logo{font-size:18px;margin-right:0}
.public-topbar .logo i{width:28px;height:28px}
.public-topbar .logo span{display:inline}
.topbar-link{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-4);border-radius:999px;font-weight:600;color:var(--muted);transition:color .15s,background .15s}
.topbar-link:hover{color:var(--text);background:var(--surface-2)}
main.public-main{padding-top:var(--sp-7);padding-bottom:var(--sp-8)}
.public-main .narrow{max-width:760px}
.public-main .page-head{display:block;margin-bottom:var(--sp-6)}
.public-main .page-head h1{font-size:clamp(28px,4.5vw,38px);line-height:1.15;text-wrap:balance}
.public-main .page-head p{margin-top:var(--sp-3);max-width:var(--measure);font-size:15.5px;line-height:1.7}
.public-main .card+.card{margin-top:var(--sp-5)}
.public-main .card h2{font-size:20px;margin-bottom:var(--sp-4)}
.public-main .card p+p{margin-top:var(--sp-3)}
.public-main .card .actions{margin-top:var(--sp-5)}
.public-main .link,.public-main .form-card p a:not(.btn){text-decoration:underline;text-underline-offset:3px}
.form-submit{width:100%}
@media (min-width:641px){.form-submit{width:auto;min-width:320px}}
.recap-list{list-style:none;margin:0 0 var(--sp-4);padding:0;display:grid;gap:0;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.recap-list li{padding:var(--sp-3) var(--sp-4);line-height:1.55}
.recap-list li+li{border-top:1px solid var(--border)}
.public-main .flash{margin-bottom:var(--sp-5)}

/* ===== Connexion et écrans invités ===== */
body.guest,body.legal-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body.guest>.login,body.legal-page>.legal-main{flex:1 0 auto}
.login{width:100%;max-width:440px;margin:0 auto;padding:clamp(var(--sp-6),9vh,var(--sp-8)) var(--sp-4) var(--sp-7)}
.login .head{margin-bottom:var(--sp-6)}
.login .head .logo{margin:0 0 var(--sp-5);font-size:20px;gap:10px}
.login .head .logo i{width:34px;height:34px}
.login .head h1{font-size:clamp(28px,6vw,34px);line-height:1.15;text-wrap:balance}
.login .head .lead{margin:var(--sp-3) auto 0;max-width:34ch;color:var(--muted);font-size:15px;line-height:1.6;text-wrap:balance}
.login .card{padding:var(--sp-6);border-radius:24px}
.login .card.pad>.field{margin-bottom:var(--sp-5)}
.login .field label{font-size:13.5px;font-weight:600}
.login .field{gap:var(--sp-2)}
.login .input{height:46px;font-size:15px}
.login .btn.lg{height:auto;min-height:48px}
.login .row-between{margin:calc(var(--sp-2) * -1 + 0px) 0 var(--sp-5);flex-wrap:wrap;gap:var(--sp-3) var(--sp-4)}
.login .row-between .check{font-size:13.5px;font-weight:500;color:var(--muted)}
.login .link{display:inline-flex;align-items:center;min-height:24px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.form-aside{margin-top:var(--sp-5);text-align:center;font-size:13.5px;line-height:1.5}
.login .flash{margin-bottom:var(--sp-5);padding:var(--sp-3) var(--sp-4);border-radius:16px;font-size:14px;line-height:1.5}
.login .flash ul{margin:0;padding-left:var(--sp-5)}
.login .flash.warn{margin-bottom:var(--sp-4)}
.login .error-page>p{line-height:1.6;color:var(--muted)}
.login .error-page .actions{margin-top:var(--sp-5)}
.login .error-page .btn.block{width:100%}
.legal-accept>p{max-width:var(--measure)}
.login .legal-accept{padding:var(--sp-6)}
.login .legal-accept-links{font-size:13.5px}
.login .legal-accept form .field{margin:var(--sp-5) 0}
.login .legal-check{font-weight:500;font-size:14px}
.legal-logout{margin-top:var(--sp-3)}
@media (max-width:480px){
  .login{padding-top:var(--sp-6)}
  .login .card,.login .legal-accept{padding:var(--sp-5)}
}

/* ===== Pied de page légal (commun à guest et legal) ===== */
.legal-footer{margin-top:0;padding:var(--sp-5) var(--sp-4) var(--sp-6)}
.legal-footer nav{gap:var(--sp-1) var(--sp-4);margin-bottom:var(--sp-1)}
.legal-footer a{padding:var(--sp-2) var(--sp-1);font-size:13.5px}

/* ===== Documents juridiques ===== */
.legal-header,.legal-main{width:min(100%,calc(var(--measure) + 64px));padding-inline:var(--sp-5)}
.legal-header{padding-block:var(--sp-5) var(--sp-2);display:flex;align-items:center}
.legal-header .logo{margin:0;font-size:18px}
.legal-header .logo i{width:28px;height:28px}
.legal-main{padding-block:var(--sp-6) var(--sp-8)}
.legal-heading{margin-bottom:var(--sp-6);padding-bottom:var(--sp-5);border-bottom:1px solid var(--border-strong)}
.legal-heading h1{font-size:clamp(28px,5vw,40px);line-height:1.15;text-wrap:balance}
.legal-meta{margin-top:var(--sp-3);font-size:13.5px}
.legal-toc{border-radius:18px;padding:var(--sp-1) var(--sp-5);margin-bottom:var(--sp-6)}
.legal-toc summary{font-size:14px}
.legal-toc ol{margin:var(--sp-1) 0 var(--sp-3);padding-left:var(--sp-5);display:grid;gap:2px;font-size:14.5px}
.legal-toc li{padding-left:var(--sp-1)}
.legal-toc li::marker{color:var(--muted);font-variant-numeric:tabular-nums}
.legal-toc a{padding-block:5px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.legal-toc a:hover{text-decoration-color:currentColor}
.legal-prose{font-size:16px;line-height:1.75;max-width:none;color:color-mix(in srgb,var(--text) 92%,var(--bg))}
.legal-prose>:first-child{margin-top:0}
.legal-prose h2{font-size:clamp(20px,3vw,24px);line-height:1.3;margin:var(--sp-7) 0 var(--sp-4);padding-top:var(--sp-6);border-top:1px solid var(--border);text-wrap:balance;scroll-margin-top:var(--sp-5)}
.legal-prose h3,.legal-prose h4{font-size:17px;margin:var(--sp-5) 0 var(--sp-3)}
.legal-prose p,.legal-prose ul,.legal-prose ol,.legal-prose blockquote,.legal-prose pre{margin:0 0 var(--sp-4)}
.legal-prose ul,.legal-prose ol{padding-left:var(--sp-5)}
.legal-prose li+li{margin-top:var(--sp-2)}
.legal-prose li::marker{color:var(--muted)}
.legal-prose strong{font-weight:700;color:var(--text)}
.legal-prose blockquote{padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5);border:1px solid var(--border-strong);border-left:4px solid var(--accent-text);border-radius:16px;background:var(--surface);color:var(--text)}
.legal-prose blockquote>:last-child{margin-bottom:0}
.legal-prose blockquote ul{padding-left:var(--sp-5)}
.legal-prose blockquote li+li{margin-top:var(--sp-2)}
.legal-prose hr{margin:var(--sp-6) 0}
.legal-table{border-radius:16px;margin-bottom:var(--sp-5)}
.legal-table th,.legal-table td{padding:var(--sp-3) var(--sp-4)}
/* Balises « À COMPLÉTER » : visibles, mais sans casser la lecture. */
.legal-prose mark.todo{background:var(--warn-soft);color:var(--warn-text);border:1px dashed var(--warn-text);border-radius:6px;padding:1px 7px;font-size:.88em;font-weight:700;letter-spacing:.02em;line-height:1.9}
@media (max-width:640px){
  .legal-header,.legal-main{padding-inline:var(--sp-4)}
  .legal-main{padding-block:var(--sp-5) var(--sp-7)}
  .legal-toc{padding-inline:var(--sp-4)}
  .legal-prose{font-size:15.5px}
  .legal-prose h2{margin-top:var(--sp-6);padding-top:var(--sp-5)}
  .legal-prose blockquote{padding:var(--sp-4)}
}