/* Veriko Famille - feuille de style unique (landing, formulaire, confirmation, pages legales, admin). */
:root{
  --bg:#F7F5F0;--ink:#14243A;--ink-2:#3E4C60;--muted:#5B6778;--faint:#8A94A3;
  --line:#E3DFD6;--line-2:#CFCAC0;--white:#FFFFFF;
  --accent:#1F7A6D;--accent-ink:#17635A;--accent-bg:#E3F1EC;--star:#D9962B;--warn:#B4530F;--warn-bg:#FBEFE4;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100dvh;display:flex;flex-direction:column}
a{color:var(--muted)}a:hover{color:var(--ink)}
input::placeholder{color:var(--faint)}
button,input{font:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* En-tete */
.header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:22px 24px 0;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-logo{display:flex;align-items:center;gap:7px}
.brand-logo svg{width:22px;height:22px;color:var(--accent)}
.brand-word{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:-.01em;line-height:1}
.pill{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-bg);padding:5px 9px;border-radius:999px}
.header-note{font-size:12px;font-weight:500;color:var(--muted)}
.back{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.back svg{width:14px;height:14px}
.header-spacer{width:58px}
.brand-center{position:absolute;left:50%;transform:translateX(-50%)}
.header.form-header{position:relative;justify-content:space-between}

/* Corps */
.main{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:24px 24px 16px;width:100%;max-width:520px;margin:0 auto}
.main.top{justify-content:flex-start;padding-top:36px;gap:24px}
h1{margin:0;font-family:var(--serif);font-weight:500;font-size:38px;line-height:1.08;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
h1.form-title{font-size:32px;line-height:1.1}
.lead{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.lead.small{font-size:15px;line-height:1.5}
.stack{display:flex;flex-direction:column;gap:10px}
.form{display:flex;flex-direction:column;gap:10px}
label{font-size:14px;font-weight:600;color:var(--ink)}
.input{height:56px;width:100%;padding:0 16px;font-size:19px;font-family:inherit;border:1.5px solid var(--line-2);border-radius:12px;background:var(--white);color:var(--ink);outline:none}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,122,109,.15)}
.input.error{border-color:var(--warn)}
.btn{display:flex;align-items:center;justify-content:center;height:56px;width:100%;border:0;border-radius:12px;background:var(--accent);color:var(--white);font-size:17px;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent-ink)}
.btn:disabled{opacity:.6;cursor:wait}
.btn-secondary{background:var(--white);color:var(--ink);border:1.5px solid var(--line-2)}
.btn-secondary:hover{background:#FBFAF7}
.field-error{font-size:13px;color:var(--warn);display:none}
.field-error.show{display:block}
.reassure{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.reassure-line{font-size:12.5px;line-height:1.5;color:var(--muted)}
.stars{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.stars-icons{display:flex;gap:2px;color:var(--star)}
.stars-icons svg{width:14px;height:14px}
.stars strong{font-weight:600;color:var(--ink)}
.footer{flex-shrink:0;display:flex;justify-content:center;padding:0 24px 26px;text-align:center}
.footer span{font-size:11.5px;line-height:1.5;color:var(--faint)}
.footer a{color:var(--faint)}

/* Formulaire multi-etapes */
.progress{display:flex;align-items:center;gap:12px}
.progress-bars{display:flex;gap:4px;flex-grow:1}
.progress-bars span{height:4px;flex-grow:1;border-radius:999px;background:#D9D4C9}
.progress-bars span.on{background:var(--accent)}
.progress-label{font-size:12px;font-weight:600;color:var(--muted)}
.card{display:flex;align-items:flex-start;gap:8px;padding:14px 16px;background:var(--white);border:1px solid var(--line);border-radius:12px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.card svg{flex-shrink:0;width:16px;height:16px;color:var(--accent-ink);margin-top:1px}
.card.row{align-items:center;gap:10px}
.card.row .grow{flex-grow:1}
.card.row a{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.note{font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}
.step{display:none;flex-direction:column;gap:24px}
.step.active{display:flex}
#checkout{min-height:420px;border-radius:14px;background:var(--white);border:1px solid var(--line);overflow:hidden}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:32px;color:var(--muted);font-size:14px}
.spinner{width:18px;height:18px;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.alert{display:none;padding:12px 14px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:14px;line-height:1.45}
.alert.show{display:block}
.modtest-badge{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:50;background:var(--warn);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:20px}

/* Confirmation */
.check{width:64px;height:64px;border-radius:999px;background:var(--accent-bg);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin:0 auto}
.check svg{width:32px;height:32px}
.center{text-align:center}
.status-row{display:flex;gap:12px;align-items:center;padding:14px;background:var(--white);border:1px solid var(--line);border-radius:14px}
.status-icon{flex-shrink:0;width:40px;height:40px;border-radius:11px;background:var(--accent-bg);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.status-icon svg{width:20px;height:20px}
.status-row strong{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.status-row .on{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--accent-ink);font-weight:600;margin-top:3px}
.status-row .on::before{content:'';width:8px;height:8px;border-radius:999px;background:var(--accent)}
.dark-card{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--ink);border-radius:14px;color:#E4EAF2;font-size:14px;line-height:1.5}
.dark-card svg{flex-shrink:0;width:18px;height:18px;color:#8FD3C4;margin-top:2px}
.dark-card strong{color:#fff}

/* Pages legales */
.legal{flex-grow:1;width:100%;max-width:680px;margin:0 auto;padding:24px 24px 64px}
.legal h1{font-size:34px;margin-bottom:8px}
.legal .updated{font-size:13px;color:var(--faint);margin:0 0 24px}
.legal h2{font-family:var(--sans);font-size:18px;font-weight:700;margin:32px 0 10px;color:var(--ink)}
.legal p,.legal li{font-size:15px;line-height:1.7;color:var(--ink-2);margin:0 0 10px}
.legal ul{padding-left:20px}
.legal a{color:var(--accent-ink)}

@media (min-width:768px){
  .header{padding:30px 64px 0}
  .main{max-width:640px;gap:28px;text-align:center;align-items:center}
  .main.top{text-align:left;align-items:stretch;max-width:520px}
  h1{font-size:60px;line-height:1.04;letter-spacing:-.02em;max-width:900px;text-wrap:balance}
  h1.form-title{font-size:36px}
  .lead{font-size:19px;max-width:640px}
  .form{width:100%;text-align:left}
  .form-row{display:flex;gap:10px}
  .form-row .input{flex-grow:1;min-width:0;height:58px}
  .form-row .btn{flex-shrink:0;width:auto;padding:0 28px;height:58px}
  .footer{padding:0 64px 28px}
}
@media (max-width:767px){
  .form-row{display:flex;flex-direction:column;gap:10px}
}