/* Feuille commune aux pages sans scène 3D : inscription, merci, mentions
   légales. Les variables reprennent exactement celles d'index.html. */
:root{
  --ink:#16181C;
  --ink-dim:#6B7280;
  --accent:#3D7BFF;
  --signal:#17B583;
  --corail:#FF6B4A;
  --bg:#F8F6F1;
  --edge:rgba(22,24,28,.14);
  --alerte:#E5533D;
  --font:'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;min-height:100vh}

.top{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(18px,4vw,54px)}
.wordmark{font-size:13px;font-weight:500;letter-spacing:.38em;text-transform:uppercase;color:inherit;text-decoration:none}
.wordmark span{color:var(--accent)}
.top nav{display:flex;gap:clamp(14px,2.4vw,30px);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase}
.top nav a{color:inherit;text-decoration:none;opacity:.65;transition:opacity .25s}
.top nav a:hover{opacity:1}

.page{max-width:760px;margin:0 auto;padding:clamp(40px,8vh,80px) clamp(18px,5vw,40px) 80px}
.page h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:300;letter-spacing:-.03em;line-height:1.05;margin-bottom:16px}
.page h1 em{font-style:normal;color:var(--accent)}
.page h2{font-size:1.5rem;font-weight:400;letter-spacing:-.01em;margin:36px 0 12px}
.page p{line-height:1.6;font-size:1.08rem}
.page p.lead{color:var(--ink-dim);font-size:1.18rem;max-width:56ch}
.page ul{padding-left:20px;line-height:1.7;font-size:1.08rem}
.page mark{background:rgba(229,83,61,.18);color:var(--ink);padding:0 6px;border-radius:4px}

.eyebrow{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.eyebrow::before{content:'';width:44px;height:1px;background:currentColor;opacity:.6}

.carte{border:1px solid var(--edge);border-radius:14px;padding:28px;background:#FFFFFF;margin-top:24px}
.carte.signal{border-color:rgba(229,83,61,.5)}
.carte h3{font-weight:400;font-size:1.18rem;margin-bottom:10px}
.carte p{color:var(--ink-dim);font-size:1.05rem}

.champ{display:block;margin-top:22px}
.champ>span{display:block;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}
.champ small{display:block;color:var(--ink-dim);font-size:.95rem;margin-top:6px;line-height:1.4}
.champ input,.champ select,.champ textarea{
  width:100%;background:#FFFFFF;border:1px solid var(--edge);border-radius:10px;
  color:var(--ink);font:inherit;font-size:1.08rem;padding:15px 16px;outline:none;transition:border-color .2s;
  appearance:none;-webkit-appearance:none;box-shadow:none;
}
.champ ::placeholder{color:#B4B9C2;opacity:1}
.champ input[type=number]::-webkit-inner-spin-button,.champ input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.champ input[type=number]{-moz-appearance:textfield}
.champ select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.champ select option{background:#FFFFFF;color:#16181C}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--accent)}
.champ.invalide input,.champ.invalide select,.champ.invalide textarea,.champ.invalide .cases label{border-color:var(--alerte)}
.champ textarea{min-height:96px;resize:vertical}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.trois{display:grid;grid-template-columns:2fr 1fr;gap:12px}
@media(max-width:560px){.deux{grid-template-columns:1fr}.trois{grid-template-columns:1fr 96px;gap:8px}}

.cases{display:flex;flex-wrap:wrap;gap:10px}
.cases label{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--edge);border-radius:999px;cursor:pointer;font-size:1.02rem;transition:border-color .2s,background .2s,color .2s;background:#FFFFFF;user-select:none}
.cases input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.cases label::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--edge);transition:background .2s;flex:0 0 auto}
.cases label.coche,.cases label:has(input:checked){border-color:var(--accent);background:rgba(61,123,255,.08);color:var(--ink)}
.cases label.coche::before,.cases label:has(input:checked)::before{background:var(--accent)}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:26px;font-size:1.02rem;line-height:1.5;cursor:pointer}
.consent input{margin-top:4px;accent-color:var(--accent);flex:0 0 auto}
.consent a{color:inherit}
.champ.invalide .consent{color:var(--alerte)}

.erreur{color:var(--alerte);font-size:1rem;margin-top:14px;min-height:1.2em}

.progression{display:flex;gap:6px;margin:28px 0 6px}
.progression i{flex:1;height:2px;background:var(--edge);transition:background .3s}
.progression i.fait{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.etape-nom{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px}
.etape{display:none}
.etape.active{display:block}
.etape h2{margin-top:10px}

.cta{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--bg);border:0;border-radius:999px;
  padding:16px 28px;font:inherit;font-size:15.5px;letter-spacing:.06em;font-weight:500;
  cursor:pointer;text-decoration:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(61,123,255,.32)}
.cta:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.cta .arrow{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cta:hover .arrow{transform:translateX(5px)}
.cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--edge)}
.cta.ghost:hover{border-color:var(--ink)}
.actions{display:flex;justify-content:space-between;gap:12px;margin-top:32px;flex-wrap:wrap}

.pied{max-width:760px;margin:0 auto;padding:30px clamp(18px,5vw,40px) 50px;color:var(--ink-dim);font-size:.95rem;display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid var(--edge)}
.pied a{color:inherit}

.piege{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}