:root{
  --noir:#0b0a09;--noir2:#15120f;--creme:#f8f3ea;--or:#b58a50;--or-clair:#d2a86a;--doux:#b9b0a2;
  --titre:"Archivo","Archivo Black",Impact,"Arial Black",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--noir);color:var(--creme);line-height:1.5}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* bandeau */
.bandeau{background:var(--or);color:var(--noir);text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:9px 12px}
.bandeau span{font-weight:900}

/* hero */
.hero{position:relative;overflow:hidden;padding:36px 0 64px;
  background:
    radial-gradient(ellipse 60% 40% at 85% 12%,rgba(210,168,106,.28),transparent 70%),
    radial-gradient(ellipse 50% 50% at 0 100%,rgba(181,138,80,.14),transparent 70%),
    linear-gradient(180deg,#14100c,var(--noir) 85%)}
.grain{position:absolute;inset:0;opacity:.35;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.025) 46px 48px)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}

.marque{font-family:var(--titre);font-weight:700;font-size:2rem;letter-spacing:-.02em;line-height:1}
.marque small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--or-clair);margin-top:4px}

h1{margin:34px 0 0;font-family:var(--titre);font-stretch:125%;font-weight:900;line-height:.82;text-transform:uppercase;letter-spacing:-.04em}
h1 .l1,h1 .l2{display:block;font-size:clamp(3.6rem,11vw,8.2rem)}
h1 .l1{color:var(--creme)}
h1 .l2{color:var(--or)}
.week{display:flex;align-items:center;gap:16px;margin:14px 0 0;font-size:clamp(1.3rem,3vw,2rem);letter-spacing:.14em;text-transform:uppercase;font-weight:300}
.week i{flex:1;height:1px;background:var(--or);max-width:140px}

.dates{display:inline-block;margin:28px 0 0;background:var(--or);color:var(--creme);padding:14px 34px;border-radius:99px;font-weight:800;font-size:clamp(1rem,2.6vw,1.45rem);letter-spacing:.08em;text-transform:uppercase}

.offre{display:flex;align-items:flex-end;gap:18px;margin-top:26px;transform:rotate(-3deg);transform-origin:left bottom}
.offre b{font-family:var(--titre);font-stretch:125%;font-weight:900;font-size:clamp(5rem,15vw,9rem);line-height:.8;letter-spacing:-.06em}
.offre sup{font-size:.45em;vertical-align:top;position:relative;top:.1em;letter-spacing:0}
.offre p{margin:0 0 8px;font-family:var(--titre);font-stretch:125%;font-weight:900;font-size:clamp(1.5rem,4.5vw,2.6rem);line-height:.95;text-transform:uppercase}
.offre p span{display:block;font-size:.55em;color:var(--or-clair);letter-spacing:.1em}

/* compte à rebours */
.compte{margin-top:34px;padding-top:22px;border-top:1px solid rgba(181,138,80,.35)}
.compte p{margin:0 0 10px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--doux)}
.cases{display:flex;gap:10px}
.cases div{min-width:70px;text-align:center;background:rgba(248,243,234,.05);border:1px solid rgba(181,138,80,.35);border-radius:10px;padding:10px 6px}
.cases b{display:block;font-family:var(--titre);font-weight:800;font-size:clamp(1.6rem,4vw,2.3rem);line-height:1;font-variant-numeric:tabular-nums}
.cases span{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--or-clair)}

/* formulaire */
.carte-form{background:var(--creme);color:var(--noir);border-radius:20px;padding:30px 28px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(181,138,80,.4);position:sticky;top:20px;scroll-margin-top:20px}
.carte-form h2{margin:0;font-family:var(--titre);font-stretch:112%;font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.02em;font-size:1.65rem}
.carte-form h2 em{font-style:normal;color:var(--or)}
.sous{margin:10px 0 18px;color:#6b6358;font-size:.92rem}
form{display:grid;gap:12px}
.ligne{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:grid;gap:5px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b6358}
input[type=text],input[type=tel],input[type=email],input:not([type]){background:#fff;color:var(--noir);border:1.5px solid #d9d0c2;border-radius:10px;padding:13px 12px;font:inherit;font-size:1rem;text-transform:none;letter-spacing:0;font-weight:500}
input:focus{outline:0;border-color:var(--or);box-shadow:0 0 0 3px rgba(181,138,80,.25)}
fieldset{border:0;margin:2px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
legend{padding:0;margin-bottom:6px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b6358}
.puce{display:block;position:relative;text-transform:none;letter-spacing:0}
.puce input{position:absolute;opacity:0;inset:0}
.puce span{display:block;text-align:center;padding:10px 6px;border:1.5px solid #d9d0c2;border-radius:10px;background:#fff;font-size:.85rem;font-weight:600;color:var(--noir);cursor:pointer}
.puce input:checked+span{background:var(--noir);border-color:var(--noir);color:var(--creme)}
.puce input:focus-visible+span{box-shadow:0 0 0 3px rgba(181,138,80,.4)}

.btn{display:block;width:100%;text-align:center;text-decoration:none;background:var(--noir);color:var(--creme);border:0;border-radius:12px;padding:17px 22px;font:inherit;font-weight:800;font-size:1.1rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:transform .15s,background .15s}
.btn span{display:inline-block;transition:transform .15s}
.btn:hover{background:#2a2218;transform:translateY(-1px)}
.btn:hover span{transform:translateX(4px)}
.btn-or{background:var(--or);color:var(--noir);width:auto;display:inline-block;padding:17px 40px}
.btn-or:hover{background:var(--or-clair)}
.check{display:flex;gap:9px;align-items:flex-start;font-size:.74rem;font-weight:400;text-transform:none;letter-spacing:0;color:#6b6358;line-height:1.35}
.check input{margin-top:2px;accent-color:var(--noir)}
.piege{position:absolute;left:-9999px}
.msg{padding:12px;border-radius:10px;margin:0 0 14px;font-size:.9rem}
.msg.ko{background:#fde3df;color:#8a1f13}
.merci{text-align:center;padding:12px 0}
.merci .coche{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--or);color:var(--creme);font-size:2rem;display:grid;place-items:center}
.merci p{color:#4f483f}

/* univers */
.univers{background:var(--or);color:var(--noir)}
.univers .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px;padding-top:20px;padding-bottom:20px}
.univers p{margin:0;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.9rem}
.univers i{width:5px;height:5px;border-radius:50%;background:var(--noir)}

/* étapes */
.etapes{padding-top:72px;padding-bottom:80px;text-align:center}
.etapes h2{font-family:var(--titre);font-stretch:118%;font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,5vw,3rem);letter-spacing:-.03em;margin:0 0 36px}
.etapes ol{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;text-align:left}
.etapes li{background:var(--noir2);border:1px solid rgba(181,138,80,.3);border-radius:16px;padding:26px}
.etapes li b{font-family:var(--titre);font-size:3rem;font-weight:900;color:var(--or);line-height:1}
.etapes h3{margin:8px 0 6px;text-transform:uppercase;letter-spacing:.04em}
.etapes li p{margin:0;color:var(--doux)}

footer{padding:26px 0 90px;text-align:center;color:var(--doux);font-size:.76rem;border-top:1px solid #231f1a}

/* bouton collant mobile */
.collant{display:none}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .carte-form{position:static}
  .collant{display:flex;justify-content:center;gap:8px;position:fixed;left:12px;right:12px;bottom:12px;z-index:20;background:var(--or);color:var(--noir);text-decoration:none;font-weight:700;font-size:.92rem;text-transform:uppercase;letter-spacing:.04em;padding:15px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.6);transition:transform .25s,opacity .25s}
  .collant.cache{transform:translateY(140%);opacity:0;pointer-events:none}
}
@media(max-width:480px){
  .ligne{grid-template-columns:1fr}
  .carte-form{padding:24px 18px}
  .cases{gap:6px}.cases div{min-width:0;flex:1}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.btn span{transition:none}}

/* correctifs mobile */
.hero-texte{min-width:0}
@media(max-width:480px){
  .offre{gap:12px}
  .offre b{font-size:4.6rem}
  .offre p{font-size:1.25rem}
  .dates{padding:12px 22px;font-size:.95rem}
  .collant{white-space:nowrap;font-size:.8rem;padding:14px 10px}
}

/* tailles proportionnelles à la colonne de gauche : plus de débordement sous le formulaire */
.hero-texte{container-type:inline-size}
h1 .l1,h1 .l2{font-size:19cqw}
.offre{gap:3cqw}
.offre b{font-size:17cqw}
.offre p{font-size:7cqw}
.week{font-size:clamp(1.2rem,5cqw,2rem)}

/* « sur le STARTPACK » passe sous le -70 %, comme sur le visuel */
.offre{flex-direction:column;align-items:flex-start;gap:0}
.offre b{font-size:26cqw;line-height:.85}
.offre p{margin:.5cqw 0 0;font-size:12.5cqw;line-height:.9;width:max-content}
.offre p span{text-align:right;font-size:.42em;margin-bottom:.2em}

/* version plus discrète */
.offre b{font-size:15cqw}
.offre p{font-size:7.5cqw}

/* texte droit, sans inclinaison */
.offre{transform:none}

/* messages d'erreur FormIt */
.err{color:#a3281b;font-size:.76rem;font-weight:600;text-transform:none;letter-spacing:0}
.err:empty{display:none}
.note{margin:2px 0 0;font-size:.74rem;color:#6b6358;line-height:1.35}

/* formulaire : compatible avec le markup standard des chunks LD (form-row / form-submit / form-note) */
.carte-form form{display:grid;gap:12px;margin:0}
.carte-form .form-row{display:grid;grid-template-columns:1fr;gap:12px}
.carte-form .form-row.two{grid-template-columns:1fr 1fr}
.carte-form .form-row>div{display:grid;gap:5px;min-width:0}
.carte-form label{display:block;margin:0;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b6358}
.carte-form form label:not(.check){display:block}
.carte-form input[type=text],.carte-form input[type=tel],.carte-form input[type=email]{width:100%;box-sizing:border-box;margin:0;background:#fff;color:var(--noir);border:1.5px solid #d9d0c2;border-radius:10px;padding:13px 12px;font:inherit;font-size:1rem;font-weight:500;text-transform:none;letter-spacing:0;height:auto}
.carte-form input:focus{outline:0;border-color:var(--or);box-shadow:0 0 0 3px rgba(181,138,80,.25)}
.carte-form .form-submit{display:block;width:100%;margin:4px 0 0;background:var(--noir);color:var(--creme);border:0;border-radius:12px;padding:17px 22px;font:inherit;font-weight:800;font-size:1.1rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;text-align:center}
.carte-form .form-submit:hover{background:#2a2218}
.carte-form .form-note{margin:2px 0 0;font-size:.74rem;line-height:1.35;color:#6b6358}
.carte-form .merci h2{margin-bottom:8px}
@media(max-width:480px){.carte-form .form-row.two{grid-template-columns:1fr}}

/* renfort : le CSS du site (form-row, php-email-forms…) ne doit pas reprendre la main */
#inscription form{display:grid !important;gap:12px !important;width:100% !important;margin:0 !important;padding:0 !important}
#inscription .form-row{display:grid !important;grid-template-columns:1fr !important;gap:12px !important;width:100% !important;margin:0 !important}
#inscription .form-row.two{grid-template-columns:1fr 1fr !important}
#inscription .form-row>div{display:grid !important;gap:6px !important;width:auto !important;min-width:0 !important;margin:0 !important;float:none !important}
#inscription label{display:block !important;margin:0 !important;padding:0 !important;line-height:1.2 !important;font-size:.78rem !important;font-weight:700 !important;letter-spacing:.04em !important;text-transform:uppercase !important;color:#6b6358 !important}
#inscription input[type=text],#inscription input[type=tel],#inscription input[type=email]{display:block !important;width:100% !important;max-width:none !important;min-width:0 !important;box-sizing:border-box !important;margin:0 !important;padding:13px 12px !important;height:auto !important}
#inscription .form-submit{width:100% !important;margin:4px 0 0 !important}
#inscription .form-note{margin:2px 0 0 !important;font-size:.74rem !important;line-height:1.35 !important;color:#6b6358 !important;text-align:left !important}
@media(max-width:480px){#inscription .form-row.two{grid-template-columns:1fr !important}}

/* champs techniques : toujours cachés (anti-spam, statut) */
#inscription input[name=nospam],#inscription input[name=STATUT],#inscription input[name=site],#inscription input[type=hidden]{display:none !important}