/* Saint-Nicolas des Bourdons — thème jaune/noir du HC Sprimont */
:root{
  --bg:#f6f4ec;
  --surface:#ffffff;
  --ink:#17150e;
  --muted:#6d6758;
  --jaune:#ffc814;
  --jaune-deep:#b98f00;
  --rouge:#d2452f;
  --line:#e5e1d2;
  --hero-bg:#17150e;
  --hero-ink:#f6f4ec;
  --font-display:'Anton','Arial Narrow',Impact,sans-serif;
  --font-body:'Archivo','Helvetica Neue',Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15130d; --surface:#1e1b13; --ink:#f3efe2; --muted:#a69e89;
    --jaune-deep:#ffd75e; --rouge:#e4604a; --line:#2f2b1f; --hero-bg:#100e09;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.55; margin:0;
}
.gutter{padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}
.wrap{max-width:1040px;margin:0 auto}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
button{font-family:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--jaune);outline-offset:2px}
[hidden]{display:none !important}

.stripes{height:14px;background:repeating-linear-gradient(-45deg,#ffc814 0 18px,#17150e 18px 36px)}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--hero-bg);color:var(--hero-ink);overflow:hidden}
.hero .wrap{position:relative;padding-block:56px 64px;display:flex;flex-direction:column;gap:28px;z-index:2}
.club-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.club-badge{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(246,244,236,.28);border-radius:999px;padding:7px 16px 7px 10px;font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.club-badge .dot{width:22px;height:22px;border-radius:50%;background:repeating-linear-gradient(90deg,#ffc814 0 5px,#17150e 5px 10px);border:2px solid #ffc814}
.hero-grid{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap}
.hero-title-block{flex:1 1 440px;min-width:0}
.hero-kicker{color:var(--jaune);font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:.85rem;margin-bottom:10px}
/* line-height ≥ 1 + marge haute : l'accent de « GOÛTER » ne mord plus sur la ligne du dessus */
.hero h1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(3rem,9.5vw,6.8rem);line-height:1.04;letter-spacing:.01em;padding-top:.12em}
.hero h1 .l1{display:block;color:var(--hero-ink)}
.hero h1 .l2{display:block;color:var(--jaune)}
.hero-sub{margin-top:18px;max-width:46ch;color:rgba(246,244,236,.82);font-size:1.05rem}
.hero-sub strong{color:var(--jaune)}
.hero-date{display:inline-flex;align-items:center;gap:10px;margin-top:20px;background:var(--rouge);color:#fff;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;padding:8px 14px;border-radius:6px;transform:rotate(-1.2deg)}
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:28px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;font-weight:800;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;padding:15px 26px;border-radius:8px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.btn-jaune{background:var(--jaune);color:#17150e;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.btn-jaune:hover{transform:translateY(-2px);box-shadow:0 8px 0 rgba(0,0,0,.35)}
.btn-jaune:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.btn-jaune:disabled{opacity:.6;cursor:wait;transform:none}
.btn-ghost{background:transparent;color:var(--hero-ink);border:2px solid rgba(246,244,236,.35)}
.btn-ghost:hover{border-color:var(--jaune);color:var(--jaune)}
.btn-ghost-clair{color:var(--ink);border-color:var(--line)}

/* scène mascotte */
.scene{flex:0 0 340px;position:relative;align-self:center;display:flex;align-items:center;justify-content:center;padding-block:12px}
.mascot-fly{position:relative;width:min(270px,72vw);height:auto;z-index:3;animation:beeFloat 7s ease-in-out infinite;filter:drop-shadow(0 12px 18px rgba(0,0,0,.35))}
.flight{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.flight path{fill:none;stroke:rgba(255,200,20,.45);stroke-width:2.5;stroke-dasharray:3 9;stroke-linecap:round;animation:dashMove 6s linear infinite}
@keyframes beeFloat{0%{transform:translate(0,0) rotate(-3deg)}25%{transform:translate(14px,-16px) rotate(2deg)}50%{transform:translate(-8px,-26px) rotate(-1deg)}75%{transform:translate(-18px,-8px) rotate(3deg)}100%{transform:translate(0,0) rotate(-3deg)}}
@keyframes dashMove{to{stroke-dashoffset:-120}}
@media (max-width:760px){.scene{flex-basis:100%;margin-top:4px}}

/* neige */
.snow{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.flake{position:absolute;top:-10px;border-radius:50%;background:rgba(246,244,236,.8);animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes fall{to{transform:translateY(110vh) translateX(40px)}}

/* compte à rebours */
.countdown-card{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:20px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:-34px;position:relative;z-index:3;box-shadow:0 14px 34px rgba(0,0,0,.14)}
.countdown-label{flex:1 1 220px;min-width:0;font-weight:700}
.countdown-label .small{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.count-units{display:flex;gap:10px}
.count-unit{text-align:center;min-width:62px;background:var(--ink);color:var(--bg);border-radius:10px;padding:8px 6px 10px}
.count-unit b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--jaune)}
.count-unit span{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}

/* ---------- sections ---------- */
section{padding-block:64px}
.eyebrow{color:var(--jaune-deep);font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;margin-bottom:10px}
.section-title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.02}
.section-intro{color:var(--muted);max-width:60ch;margin-top:12px}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:36px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px 22px;position:relative}
.step .num{font-family:var(--font-display);font-size:2.4rem;color:var(--jaune);-webkit-text-stroke:1.5px var(--ink);line-height:1}
.step h3{font-size:1.08rem;font-weight:800;margin:12px 0 8px}
.step p{color:var(--muted);font-size:.95rem}

.gifts-section{background:var(--surface);border-block:1px solid var(--line)}
.gift-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin-top:36px}
.gift-card{background:var(--bg);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.gift-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(23,21,14,.14)}
.gift-visual{background:var(--hero-bg);display:flex;align-items:center;justify-content:center;padding:28px 16px;min-height:190px}
.gift-visual svg{width:min(240px,70%);height:auto}
.gift-body{padding:22px 24px 26px}
.gift-tag{display:inline-block;background:var(--jaune);color:#17150e;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:4px;margin-bottom:12px}
.gift-body h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:1.7rem}
.gift-body p{color:var(--muted);margin-top:8px;font-size:.96rem}
.photo-note{margin-top:26px;font-size:.85rem;color:var(--muted);border-left:3px solid var(--jaune);padding-left:12px}

/* ---------- formulaire ---------- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px clamp(18px,4vw,38px) 36px;margin-top:36px;box-shadow:0 10px 30px rgba(23,21,14,.07)}
fieldset{border:0;margin:0;padding:0;min-width:0}
label{display:block;font-weight:700;font-size:.86rem;letter-spacing:.03em;margin-bottom:6px}
.req{color:var(--rouge)}
input[type=text],input[type=email],input[type=search],input[type=password],input[type=number],select{width:100%;background:var(--bg);color:var(--ink);border:1.5px solid var(--line);border-radius:9px;padding:12px 14px;font-size:1rem;font-family:inherit}
input:focus,select:focus{border-color:var(--jaune-deep);outline:2px solid var(--jaune);outline-offset:0}
.champ-invalide{border-color:var(--rouge) !important}
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.player-card{border:1.5px solid var(--line);border-radius:14px;padding:22px 20px 24px;margin-bottom:18px;background:var(--bg);position:relative;display:flex;flex-direction:column;gap:18px}
.player-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.player-head h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:1.25rem;display:flex;align-items:center;gap:10px}
.player-head h3 img{width:40px;height:auto;flex:0 0 auto}
.remove-player{background:none;border:1.5px solid var(--line);color:var(--muted);border-radius:8px;padding:7px 12px;font-size:.8rem;font-weight:700;cursor:pointer}
.remove-player:hover{border-color:var(--rouge);color:var(--rouge)}

.gift-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.gift-option input{position:absolute;opacity:0;pointer-events:none}
.gift-option .opt{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;background:var(--surface);transition:border-color .15s ease,background .15s ease;font-weight:700}
.gift-option .opt svg{width:40px;height:auto;flex:0 0 auto}
.gift-option input:checked + .opt{border-color:var(--jaune-deep);background:color-mix(in srgb,var(--jaune) 16%,var(--surface))}
.gift-option input:focus-visible + .opt{outline:3px solid var(--jaune);outline-offset:2px}
.size-field{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s ease,opacity .3s ease}
.size-field.open{max-height:130px;opacity:1}

.add-row{display:flex;justify-content:center;margin:6px 0 26px}
.btn-add{background:transparent;border:2px dashed var(--jaune-deep);color:var(--ink);font-weight:800;border-radius:10px;padding:13px 22px;cursor:pointer;font-size:.95rem;letter-spacing:.03em}
.btn-add:hover{background:color-mix(in srgb,var(--jaune) 14%,transparent)}

.family-block{border-top:1.5px solid var(--line);padding-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.apport-block{margin-top:22px;background:color-mix(in srgb,var(--jaune) 10%,var(--surface));border:1.5px solid var(--jaune-deep);border-radius:14px;padding:20px}
.apport-block textarea{width:100%;background:var(--surface);color:var(--ink);border:1.5px solid var(--line);border-radius:9px;padding:12px 14px;font-size:1rem;font-family:inherit;resize:vertical;min-height:84px}
.apport-block textarea:focus{border-color:var(--jaune-deep);outline:2px solid var(--jaune);outline-offset:0}
.apport-block .note{font-size:.82rem;color:var(--muted);margin-top:8px}
.recap-apport{margin-top:18px;background:color-mix(in srgb,var(--jaune) 14%,var(--surface));border:1px solid var(--jaune-deep);border-radius:10px;padding:12px 16px;font-weight:700;display:inline-block}
.form-footer{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.form-footer .note{font-size:.85rem;color:var(--muted);max-width:46ch}
.error-msg{color:var(--rouge);font-weight:700;font-size:.9rem;margin-top:14px;white-space:pre-line}

.confirm-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:42px clamp(18px,4vw,44px);margin-top:36px;text-align:center}
.confirm-card .big-check{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;background:var(--jaune);display:flex;align-items:center;justify-content:center}
.confirm-card .big-check svg{width:42px;height:42px}
.confirm-card h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:2rem}
.confirm-card > p{color:var(--muted);margin-top:10px}
.recap-list{margin:26px auto 0;max-width:520px;text-align:left;display:flex;flex-direction:column;gap:10px}
.recap-item{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px 16px;font-size:.95rem}
.recap-item .gift-pill{background:var(--jaune);color:#17150e;border-radius:6px;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;align-self:center}

/* ---------- espace Bourdons Toqués ---------- */
.toques-section{background:color-mix(in srgb,var(--jaune) 22%,var(--bg));border-top:1px solid var(--line);position:relative}
.toques-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
.toques-intro{position:sticky;top:24px}
.toques-section .eyebrow{color:var(--ink)}
.toque-svg{width:96px;height:auto;margin:22px 0 4px;transform-origin:50% 90%;animation:toqueWobble 4.5s ease-in-out infinite}
@keyframes toqueWobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg) translateY(-3px)}}
.toques-section .section-intro{color:var(--ink);opacity:.82}
.toques-note{margin-top:16px;font-size:.88rem;font-weight:700;border-left:3px solid var(--ink);padding-left:12px}
.toque-card{margin-top:0;border-color:color-mix(in srgb,var(--jaune-deep) 45%,var(--line))}
.toques-section .confirm-card{margin-top:0}
.btn-noir{background:#17150e;color:#ffc814;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.btn-noir:hover{transform:translateY(-2px);box-shadow:0 8px 0 rgba(0,0,0,.25)}
.btn-noir:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn-noir:disabled{opacity:.6;cursor:wait;transform:none}
@media (max-width:860px){.toques-grid{grid-template-columns:1fr;gap:26px}.toques-intro{position:static}}

/* infos pratiques + pied */
.infos{background:var(--hero-bg);color:var(--hero-ink)}
.infos .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin-top:34px}
.info-item h3{color:var(--jaune);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;margin-bottom:8px}
.info-item p{color:rgba(246,244,236,.85);font-size:.96rem}
.infos .eyebrow{color:var(--jaune)}
footer{background:var(--hero-bg);color:rgba(246,244,236,.6);font-size:.84rem;border-top:1px solid rgba(246,244,236,.12)}
.lien-comite{color:rgba(246,244,236,.6);text-decoration:underline;text-underline-offset:3px}
.lien-comite:hover{color:var(--jaune)}
footer .wrap{padding-block:22px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}

@media (prefers-reduced-motion: reduce){
  .mascot-fly,.flight path,.flake,.toque-svg{animation:none !important}
  .snow{display:none}
  .gift-card:hover{transform:none}
  html{scroll-behavior:auto}
}

/* champ piège anti-robots : invisible pour les humains */
.pot-de-miel{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* pages d'erreur */
.erreur-page{min-height:calc(100vh - 14px);display:flex;align-items:center}
.erreur-contenu{position:relative;z-index:2;padding-block:48px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.erreur-mascotte{width:min(220px,55vw);margin-bottom:10px}
.erreur-page h1{font-size:clamp(2.6rem,8vw,5rem)}
.erreur-page .hero-sub{margin-inline:auto}
.erreur-page .hero-cta-row{justify-content:center}