:root{
  --nuit:#26102F;      /* fond sombre principal */
  --prune:#4A1D5C;     /* variante plus claire du fond sombre */
  --rose:#E3507A;      /* couleur d'action */
  --rose-fonce:#C23A63;
  --or:#E8C27A;        /* accent doux */
  --perle:#FFF6F4;     /* fond clair */
  --encre:#2A1A33;     /* texte sur fond clair */
  --gris:#6E5F77;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:1rem;line-height:1.6;color:var(--encre);background:var(--perle)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.5rem;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;transition:background .15s,color .15s}
.btn-primary{background:var(--rose);color:#fff}
.btn-primary:hover{background:var(--rose-fonce)}
.btn-ghost{border-color:rgba(255,246,244,.45);color:var(--perle)}
.btn-ghost:hover{background:rgba(255,246,244,.12)}
.fine{font-size:.85rem;opacity:.8}

/* En-tête */
.top{gap:.75rem;display:flex;align-items:center;justify-content:space-between;padding:calc(.9rem + env(safe-area-inset-top,0px)) 1.25rem .9rem;background:var(--nuit);color:var(--perle)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--serif);font-size:1.5rem;font-weight:600;min-width:0}
.brand-mark{width:44px;height:30px}
.top-link{white-space:nowrap;flex:none;text-decoration:none;font-weight:700;font-size:.9rem;padding:.55rem .9rem;border:1.5px solid rgba(255,246,244,.4);border-radius:999px}

/* Hero */
.hero{background:linear-gradient(180deg,var(--nuit) 0%,var(--prune) 100%);color:var(--perle);padding:2.5rem 1.25rem 3.5rem;display:grid;gap:2rem}
.hero h1{font-size:clamp(2.4rem,9vw,4rem);max-width:15ch}
.lead{font-size:1.1rem;margin-top:1.25rem;max-width:34rem;opacity:.92}
.actions{display:flex;flex-direction:column;gap:.75rem;margin-top:1.75rem}
.hero .fine{margin-top:1.25rem;max-width:30rem}
.rings{width:100%;max-width:340px;height:auto;justify-self:center}
.ring{stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  .ring-a{animation:trace 2.2s ease-out both}
  .ring-b{animation:trace 2.2s ease-out .5s both}
  @keyframes trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
}

/* Sections */
.section{padding:3.25rem 1.25rem}
.section h2{font-size:clamp(1.9rem,6vw,2.6rem);margin-bottom:1.75rem;max-width:20ch}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.steps li{display:grid;grid-template-columns:auto 1fr;column-gap:1rem}
.steps h3{font-size:1.6rem}
.steps p{grid-column:2;color:var(--gris);margin-top:.35rem}
.num{grid-row:1/3;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--nuit);color:var(--or);font-family:var(--serif);font-size:1.4rem;font-weight:600;display:flex;align-items:center;justify-content:center}

.price{background:#fff;display:grid;gap:1.75rem;border-top:1px solid #F0DEDA;border-bottom:1px solid #F0DEDA}
.price-box{background:var(--nuit);color:var(--perle);border-radius:20px;padding:1.75rem;text-align:center}
.price-amount{font-family:var(--serif);font-size:4.5rem;line-height:1;color:var(--or);font-weight:600}
.price-label{margin-top:.4rem;opacity:.85}
.price-text p{color:var(--gris);max-width:36rem}

.trust{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.trust li{padding-left:1rem;border-left:3px solid var(--rose)}
.trust h3{font-size:1.5rem}
.trust p{color:var(--gris);margin-top:.3rem}

.final{background:var(--nuit);color:var(--perle);text-align:center;padding:3.5rem 1.25rem;display:grid;gap:1.5rem;justify-items:center}
.final h2{font-size:clamp(1.9rem,6vw,2.8rem);max-width:18ch}

/* Pied de page */
.foot{background:#1B0A23;color:var(--perle);padding:2rem 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));display:grid;gap:1rem}
.foot-brand{font-family:var(--serif);font-size:1.6rem}
.foot nav{display:flex;flex-direction:column;gap:.5rem}
.foot nav a{padding:.35rem 0}

/* Page provisoire */
.plain{background:var(--nuit);color:var(--perle);min-height:100vh;display:grid;place-items:center;padding:1.25rem}
.plain-box{max-width:30rem;display:grid;gap:1.25rem;justify-items:start}
.plain-box h1{font-size:2.3rem}

/* Tablettes et ordinateurs */
@media (min-width:760px){
  .top{padding-left:3rem;padding-right:3rem}
  .hero{grid-template-columns:1.2fr 1fr;align-items:center;padding:4.5rem 3rem 5rem}
  .actions{flex-direction:row}
  .section{padding:4.5rem 3rem}
  .steps,.trust{grid-template-columns:repeat(3,1fr);gap:2rem}
  .trust{grid-template-columns:repeat(2,1fr)}
  .price{grid-template-columns:260px 1fr;align-items:center;gap:3rem}
  .foot{padding-left:3rem;padding-right:3rem}
  .foot nav{flex-direction:row;gap:1.5rem}
}

/* Formulaires (inscription, connexion) */
.formpage{background:var(--perle)}
.card{max-width:30rem;margin:0 auto;padding:2rem 1.25rem 3rem}
.card h1{font-size:2.3rem;margin-bottom:.75rem}
.intro{color:var(--gris);margin-bottom:1.5rem}
.card form{display:grid;gap:.4rem}
.card label{font-weight:700;font-size:.95rem;margin-top:.75rem}
.card input[type=text],.card input[type=email],.card input[type=password],.card input[type=date]{width:100%;min-height:52px;padding:0 1rem;font:inherit;color:var(--encre);background:#fff;border:1.5px solid #D9C6CC;border-radius:12px}
.card input:focus-visible{border-color:var(--rose)}
.card .check{display:flex;gap:.75rem;align-items:flex-start;font-weight:400;margin-top:.9rem}
.card .check input{width:24px;height:24px;flex:none;margin-top:.1rem;accent-color:var(--rose)}
.card .btn{margin-top:1.25rem;width:100%}
.btn-light{background:#fff;color:var(--encre);border-color:#D9C6CC}
.msg{margin-top:1rem;padding:.8rem 1rem;border-radius:12px;font-size:.95rem;background:#fff;border:1.5px solid #D9C6CC}
.msg.err{border-color:var(--rose-fonce);background:#FDECEF;color:#7A1731}
.msg.ok{border-color:#3E8E5A;background:#E8F5EC;color:#1D4D2E}
.msg[hidden]{display:none}
.alt{margin-top:1.5rem;text-align:center;color:var(--gris)}
.alt a{color:var(--rose-fonce);font-weight:700}
.oubli{margin-top:1.5rem}
.oubli summary{cursor:pointer;font-weight:700;padding:.5rem 0}

/* Espace membre */
.card select,.card textarea{width:100%;font:inherit;color:var(--encre);background:#fff;border:1.5px solid #D9C6CC;border-radius:12px;padding:0 1rem}
.card select{min-height:52px}
.card textarea{padding:.8rem 1rem;resize:vertical;min-height:120px}
.card select:focus-visible,.card textarea:focus-visible{border-color:var(--rose)}
.sous-titre{font-size:1.7rem;margin:1.5rem 0 .5rem}
.statut{padding:.9rem 1rem;border-radius:12px;background:#fff;border:1.5px solid #E8C27A;margin:.5rem 0}
.statut.ok{border-color:#3E8E5A;background:#E8F5EC;color:#1D4D2E}
.statut.err{border-color:var(--rose-fonce);background:#FDECEF;color:#7A1731}
.statut[hidden]{display:none}
button.top-link{background:transparent;color:inherit;font-family:inherit;cursor:pointer}
.prochain{margin-top:2rem}

/* Paiement */
.statut .btn{margin-top:1rem;width:100%}
.card #retour,.card #reverifier{margin-top:1rem;width:100%}
.card [hidden]{display:none}