/* Écran d'accueil : cadre vert, étoiles, village, boules, 2 grands boutons, les 3 étapes. Repris de V16. */
/* accueil */
.hero-band{position:relative;overflow:hidden;background:var(--hero);color:var(--on-hero);border-radius:26px;padding:26px 18px 11px;text-align:center}
.hero-band::before{content:"";position:absolute;inset:9px;border:2px solid var(--on-hero);border-radius:18px;opacity:.9;pointer-events:none}
.hero-band h1{position:relative}
.sparks{display:block;width:96px;height:auto;margin:2px auto 6px;fill:var(--gold)}
.village{display:block;position:relative;width:min(560px,100%);height:auto;margin:18px auto 0}
.hero-band h1{text-transform:uppercase;font-size:clamp(2.3rem,10vw,5rem);line-height:1.02}
.baubles{display:block;width:min(420px,88%);margin:-2px auto 0;overflow:visible}
.baubles .b{transform-box:fill-box;transform-origin:50% 0;animation:swing 2.6s ease-out 1 both}
.baubles .b2{animation-delay:.12s}.baubles .b3{animation-delay:.05s}.baubles .b4{animation-delay:.2s}.baubles .b5{animation-delay:.09s}
@keyframes swing{0%{transform:rotate(9deg)}30%{transform:rotate(-6deg)}55%{transform:rotate(3.5deg)}78%{transform:rotate(-1.5deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.baubles .b{animation:none}}
.tagline{font-family:'Lilita One','Arial Rounded MT Bold',sans-serif;color:var(--olive);text-transform:uppercase;
  font-size:clamp(1.45rem,5.6vw,2.4rem);line-height:1.12;text-align:center;transform:rotate(-4deg);margin:14px auto 34px}
.choices{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:680px){.choices{grid-template-columns:1fr 1fr}}
.choice{border:0;border-radius:22px;padding:22px 22px 24px;text-align:left;color:var(--on-band);display:block;width:100%}
.choice .display{font-size:1.7rem;display:block;margin-bottom:6px}
.choice span.sub{font-weight:700;font-size:1rem;opacity:.95}
.choice.green{background:var(--band-green);color:var(--on-green)}.choice.green:hover{background:var(--band-green-deep)}
.choice.red{background:var(--band-red)}.choice.red:hover{background:var(--band-red-deep)}
.tally{text-align:center;font-weight:800;color:var(--ink-soft);margin:18px 0 0}
.how{margin:44px 0 0}
.how h2{color:var(--title);text-transform:uppercase;font-size:1.6rem;margin-bottom:16px}
/* Phrase au-dessus des 3 étapes, tant que les réservations ne sont pas ouvertes (11 octobre). */
.how-intro{margin:-6px 0 16px;font-weight:700}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;position:relative;padding:4px 0 0 62px;min-height:50px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;
  background:var(--band-green);color:var(--on-green);display:grid;place-items:center;
  font-family:'Lilita One',sans-serif;font-size:1.4rem;box-shadow:inset -5px -5px 0 rgba(0,0,0,.14)}
.steps b{display:block}
.steps li:has(> b:only-child){padding-top:12px}
.steps span{display:block}
.event{background:var(--band-green);color:var(--on-green);border-radius:22px;padding:20px;text-align:center;margin:40px 0 0}
.event .display{text-transform:uppercase;font-size:clamp(1.25rem,4.6vw,1.9rem)}
.event p{margin:6px 0 0;font-weight:700}
.steps .guar{font-weight:800;margin-top:4px}

/*
  Dispositions compactes de l'accueil (retour des testeurs du 14 octobre) : les 2 grands boutons
  visibles dès l'arrivée sur téléphone ; sur ordinateur, aussi le début de « Comment ça marche ».
  Couleurs, dessins et textes inchangés. Choix de l'opérateur attendu (écart à V16).
*/
/* Disposition a : même ordre que V16, en plus compact. */
.disposition-a .hero-band{padding:10px 12px 6px;border-radius:20px}
.disposition-a .hero-band::before{inset:6px;border-radius:14px}
.disposition-a .sparks{width:40px;margin:0 auto 2px}
.disposition-a .hero-band h1{font-size:clamp(1.6rem,7.4vw,3.2rem)}
.disposition-a .village{width:min(260px,56%);margin:4px auto 0}
.disposition-a .baubles{width:min(190px,50%);margin:-6px auto -8px}
.disposition-a .tagline{font-size:clamp(1.05rem,4.2vw,1.6rem);margin:6px auto 14px;white-space:nowrap;transform:rotate(-2deg)}
.disposition-a .choices{gap:10px}
.disposition-a .choice{padding:13px 16px 14px;border-radius:18px}
.disposition-a .choice .display{font-size:1.4rem;margin-bottom:2px}
.disposition-a .choice span.sub{font-size:.95rem}
.disposition-a .tally{margin-top:10px}
.disposition-a .how{margin-top:22px}
/* Disposition a sur téléphone : tenir dans 375 x 548 (hauteur visible dans Safari sur iPhone SE),
   sans réduire le village (demande de l'opérateur du 14 octobre). */
@media (max-width:520px){
  .disposition-a .hero-band{padding:7px 10px 4px}
  .disposition-a .sparks{width:28px;margin:0 auto}
  .disposition-a .hero-band h1{font-size:clamp(1.5rem,7.2vw,2rem)}
  .disposition-a .baubles{width:150px;margin:-6px auto -12px}
  .disposition-a .tagline{font-size:.9rem;margin:8px auto 12px}
  .disposition-a .choices{gap:8px}
  .disposition-a .choice{padding:9px 14px 10px;border-radius:16px}
  .disposition-a .choice .display{font-size:1.25rem;margin-bottom:0}
  .disposition-a .choice span.sub{font-size:.88rem}
}

/* Disposition b : bandeau sans village, village en bas de page. */
.disposition-b .hero-band{padding:12px 14px 14px;border-radius:20px}
.disposition-b .hero-band::before{inset:6px;border-radius:14px}
.disposition-b .sparks{width:50px;margin:0 auto 2px}
.disposition-b .hero-band h1{font-size:clamp(1.9rem,8.6vw,3.6rem)}
.disposition-b .baubles{width:min(230px,58%);margin:-6px auto -6px}
.disposition-b .tagline{font-size:clamp(1.1rem,4.4vw,1.8rem);margin:0 auto 12px}
.disposition-b .choices{gap:12px}
.disposition-b .choice{padding:16px 18px 18px}
.disposition-b .choice .display{font-size:1.5rem;margin-bottom:4px}
.disposition-b .tally{margin-top:12px}
.disposition-b .how{margin-top:26px}
.disposition-b .village-bas{margin:30px auto 0;padding:14px;background:var(--hero);border-radius:22px;max-width:620px}
.disposition-b .village-bas .village{width:100%;margin:0}

/* Variante à l'essai : la phrase dans le cadre vert, sous le titre, en doré comme les étoiles (14 octobre). */
.tagline-cadre{position:relative;font-family:'Lilita One','Arial Rounded MT Bold',sans-serif;color:var(--gold);text-transform:uppercase;
  font-size:clamp(.95rem,3.9vw,1.5rem);line-height:1.1;margin:10px 0 0;transform:rotate(-2deg)}
@media (min-width:521px){.tagline-cadre{margin-top:14px}}
.disposition-a .hero-band .tagline-cadre + .village{margin-top:4px}
/* Sans la phrase sous les boules, les boutons remontent un peu. */
.disposition-a .baubles:has(+ .choices){margin-bottom:6px}

/* Les 2 grands boutons ont exactement la même taille (demande de l'opérateur du 14 octobre). */
.disposition-a .choices{grid-auto-rows:1fr}
@media (max-width:520px){.disposition-a .choice span.sub{font-size:.84rem}}
/* Téléphones étroits (360 pixels) : la phrase du bouton rouge reste sur 1 ligne. */
@media (max-width:380px){.disposition-a .choice{padding-left:12px;padding-right:12px}.disposition-a .choice span.sub{font-size:.8rem}}