/* Layout idea: a night stadium. Pitch lines structure the page; the yellow dashed offside line is the recurring divider; the flag rises once, in the hero. */
:root{
  --night:#060918; --navy:#0D1438; --navy2:#141D4F; --line:#26306B;
  --red:#E4002B; --yellow:#FFD60A; --blue:#2F5BFF;
  --chalk:#F4F1E8; --grey:#A3ACD1; --mute:#6E78A8;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--night)}
body{background:var(--night);color:var(--chalk);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,.disp{font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:.2px;text-wrap:balance}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.kicker{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:4px;text-transform:uppercase;color:var(--yellow);display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:30px;height:4px;background:var(--red);transform:skewX(-20deg)}
.offside{height:0;border-top:3px dashed var(--yellow);opacity:.75}
section{padding:96px 0;position:relative}
h2{font-size:clamp(44px,7vw,84px)}
h2 em{color:var(--red);font-style:italic}
.lead{font-size:clamp(18px,2vw,21px);color:#D7DCF2;max-width:62ch;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:10px;font-family:var(--display);font-weight:800;font-style:italic;font-size:21px;letter-spacing:.5px;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-y{background:var(--yellow);color:var(--navy)}
.btn-r{background:var(--red);color:#fff}
.btn-o{border-color:#3A4380;color:var(--chalk);background:transparent}
.btn-o:hover{border-color:var(--yellow)}

/* NAV */
nav{position:sticky;top:0;z-index:20;background:rgba(6,9,24,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav:not(.hx-nav) .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo svg{height:30px;width:auto}
.navlinks{display:flex;gap:26px;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:2px;text-transform:uppercase}
.navlinks a{text-decoration:none;color:var(--grey)}
.navlinks a:hover{color:var(--chalk)}
nav:not(.hx-nav) .btn{min-height:40px;font-size:17px;padding:0 16px}

/* HERO */
.hero{position:relative;padding:56px 0 0;overflow:hidden;background:radial-gradient(900px 600px at 78% 20%,#1A2566 0%,rgba(26,37,102,0) 65%),linear-gradient(170deg,#0B1132 0%,var(--night) 75%)}
.pitch{position:absolute;inset:0;opacity:.06;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:end;position:relative}
.hero h1{font-size:clamp(54px,14vw,150px);display:flex;align-items:flex-end;gap:.06em;margin-top:22px}
.hero h1 .j{color:var(--red)}
.flag{width:.62em;height:.86em;flex:none;transform-origin:12% 100%}
.tagline{font-family:var(--display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(28px,3.6vw,44px);line-height:1;margin-top:18px}
.tagline span{color:var(--yellow)}
.hero-meta{display:flex;flex-wrap:wrap;gap:28px;margin-top:30px;align-items:center}
.meta-lbl{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--grey)}
.meta-val{font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(22px,3vw,30px);text-transform:uppercase;line-height:1.1}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;padding-bottom:56px}
.portrait{position:relative;align-self:stretch;min-height:520px}
.portrait .ph{position:absolute;right:0;bottom:0;width:min(420px,100%);aspect-ratio:2/3;border-radius:18px 18px 0 0;overflow:hidden;border:4px solid var(--yellow);border-bottom:0}
.mystery{position:absolute;inset:0;background:radial-gradient(420px 360px at 50% 30%,#22307A 0%,#0D1438 70%)}
.mystery svg{position:absolute;left:50%;bottom:0;width:92%;transform:translateX(-50%);opacity:.95}
.mystery::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(6,9,24,0),rgba(6,9,24,.92) 55%)}
.qmark{position:absolute;left:0;right:0;top:6%;text-align:center;font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(150px,18vw,230px);line-height:1;color:var(--yellow);text-shadow:0 10px 40px rgba(255,214,10,.35)}
@media (prefers-reduced-motion:no-preference){.qmark{animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}}
.clue-hint{margin-top:10px;display:inline-block;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--navy);background:var(--yellow);padding:5px 10px;border-radius:6px}
.portrait .name{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(28px,7vw,40px);line-height:.85;text-transform:uppercase;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.portrait .role{display:block;font-size:17px;color:var(--yellow);letter-spacing:1px;margin-top:8px}
.stripes{position:absolute;right:-120px;top:-40px;bottom:-40px;width:380px;pointer-events:none}
.stripes i{position:absolute;top:-200px;height:1400px;transform:rotate(22deg)}
.hero .offside{position:absolute;left:0;right:0;bottom:0}

/* FLAG RISE (one orchestrated moment) */
@media (prefers-reduced-motion:no-preference){
  .flag{animation:raise .9s cubic-bezier(.2,.9,.25,1.2) .25s both}
  @keyframes raise{from{transform:rotate(-82deg)}to{transform:rotate(0)}}
}

/* CONCEPT */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.stat{background:var(--navy);border:1px solid var(--line);border-radius:16px;padding:26px}
.stat b{display:block;font-family:var(--display);font-style:italic;font-weight:900;font-size:76px;line-height:.9;color:var(--yellow)}
.stat span{font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:1px}
.stat p{color:var(--grey);font-size:15px;margin-top:6px}

/* EPREUVES */
.events{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;counter-reset:ev}
.ev{background:linear-gradient(180deg,rgba(32,44,110,.55),rgba(16,22,64,.55));border:1px solid var(--line);border-radius:16px;padding:24px 24px 22px;position:relative}
.ev h3{font-size:36px}
.ev .no{position:absolute;right:20px;top:20px;font-family:var(--display);font-style:italic;font-weight:900;font-size:26px;color:var(--red)}
.ev p{color:#D7DCF2;font-size:16px;margin-top:10px}
.ev .tag{display:inline-block;margin-top:14px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--yellow);background:rgba(255,214,10,.1);padding:5px 10px;border-radius:6px}
.ev.sig{border-color:var(--yellow)}
.ev.sig h3{color:var(--yellow)}

/* QUIZ */
#quiz{background:linear-gradient(180deg,var(--night),#0A1030 40%,var(--night))}
.quiz-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.qcard{background:#fff;color:var(--navy);border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.55);overflow:hidden;min-height:440px;display:flex;flex-direction:column}
.qhead{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;background:var(--yellow)}
.qhead.qsj{background:var(--red);color:#fff}
.qhead .disp{font-size:28px}
.qhead .pill{font-family:var(--display);font-weight:800;font-size:15px;background:var(--navy);color:var(--yellow);padding:4px 10px;border-radius:6px;font-style:italic}
.qbody{padding:26px 26px 22px;flex:1;display:flex;flex-direction:column}
.qprompt{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mute)}
.qtext{font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(30px,3.4vw,40px);line-height:1;text-transform:uppercase;margin-top:10px}
.clues{display:grid;gap:8px;margin-top:12px}
.clue{display:flex;gap:10px;background:#F1F3FA;border-radius:10px;padding:9px 12px;font-size:15px}
.clue b{font-family:var(--display);font-style:italic;font-weight:900;color:var(--red);font-size:22px;line-height:1}
.qchoices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:20px}
.qchoices.three{grid-template-columns:1fr 1fr 1fr}
.qbtn{min-height:56px;border-radius:12px;border:2px solid var(--navy);background:#fff;color:var(--navy);font-family:var(--display);font-weight:800;font-style:italic;font-size:22px;text-transform:uppercase;cursor:pointer;transition:background .12s,color .12s}
.qbtn:hover:not(:disabled){background:var(--navy);color:var(--yellow)}
.qbtn.flagbtn{border-color:var(--red);color:var(--red)}
.qbtn.flagbtn:hover:not(:disabled){background:var(--red);color:#fff}
.qbtn.ok{background:#1E8E3E;border-color:#1E8E3E;color:#fff}
.qbtn.ko{background:#ECEFF7;border-color:#ECEFF7;color:#8C95C2;text-decoration:line-through}
.qfeedback{margin-top:14px;border-top:2px dashed #C9CFEA;padding-top:12px;font-size:15px;color:#2A3366;min-height:48px}
.qfeedback strong{font-family:var(--display);font-style:italic;font-weight:900;font-size:22px;text-transform:uppercase;margin-right:6px}
.qfoot{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;border-top:1px solid #E6E9F4;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mute)}
.qnext{background:var(--navy);color:var(--yellow);border:0;border-radius:8px;padding:8px 14px;font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.qnext[hidden]{display:none}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:#D7DCEB}
.dots i.on{background:var(--navy)}
.dots i.win{background:#1E8E3E}
.dots i.lose{background:var(--red)}
.result{text-align:left}
.result .big{font-family:var(--display);font-style:italic;font-weight:900;font-size:110px;line-height:.85;color:var(--navy)}
.result .rank{font-family:var(--display);font-style:italic;font-weight:900;font-size:36px;text-transform:uppercase;color:var(--red);margin-top:6px}

/* CASTING + WAITLIST */
.form-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.perks{display:grid;gap:12px;margin-top:28px}
.perk{display:flex;gap:16px;align-items:flex-start;background:var(--navy);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.perk b{font-family:var(--display);font-style:italic;font-weight:900;font-size:30px;color:var(--yellow);line-height:1;min-width:112px;white-space:nowrap}
.perk span{color:#D7DCF2;font-size:16px}
form{background:var(--navy);border:1px solid var(--line);border-radius:18px;padding:28px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
label{font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey)}
input,select,textarea{font:inherit;font-size:16px;color:var(--chalk);background:#0A1030;border:1.5px solid #2C3778;border-radius:10px;padding:12px 14px;min-height:48px;width:100%}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--yellow);outline:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#D7DCF2;margin-bottom:10px;text-transform:none;letter-spacing:0;font-weight:400}
.check input{width:20px;height:20px;min-height:0;margin-top:2px;accent-color:var(--yellow);flex:none}
.err{color:#FF8A9A;font-size:14px;min-height:20px;margin:4px 0 10px}
.fineprint{font-size:13px;color:var(--mute);margin-top:12px}
.done{display:none;background:#0A1030;border:2px solid var(--yellow);border-radius:14px;padding:20px;margin-top:4px}
.done.show{display:block}
.done h3{font-size:30px;color:var(--yellow)}
.done p{color:#D7DCF2;font-size:15px;margin-top:8px}
.done pre{white-space:pre-wrap;font-family:var(--body);font-size:14px;background:#060918;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:12px;color:var(--chalk);max-height:220px;overflow:auto}
.done .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center}
.done .btn{min-height:44px;font-size:17px;padding:0 16px}
.copied{font-size:14px;color:var(--yellow)}
.ferr{color:#FF8A9A;font-size:13px;min-height:0}
.field.bad input,.field.bad textarea{border-color:#FF8A9A}
.check.bad{color:#FF8A9A}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px;counter-reset:st}
.steps li{list-style:none;background:#0A1030;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;color:#D7DCF2;counter-increment:st}
.steps li::before{content:counter(st,decimal-leading-zero);display:block;font-family:var(--display);font-style:italic;font-weight:900;font-size:24px;color:var(--red);line-height:1;margin-bottom:6px}
.steps b{display:block;color:var(--chalk);font-weight:700}
.qscore{display:flex;align-items:center;gap:12px;background:#0A1030;border:1px dashed var(--yellow);border-radius:12px;padding:10px 14px;margin-bottom:16px;font-size:15px;color:#D7DCF2}
.qscore b{font-family:var(--display);font-style:italic;font-weight:900;font-size:26px;color:var(--yellow);line-height:1}
.form-note{font-size:13px;color:var(--mute);margin-top:10px}
.qscore[hidden]{display:none}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* CALENDAR */
.seasons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.season{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--navy)}
.season .top{padding:20px 22px}
.season .top small{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:3px;text-transform:uppercase}
.season .top h3{font-size:40px;margin-top:4px}
.season .bot{padding:18px 22px 22px}
.season .when{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--yellow)}
.season .bot p{color:#D7DCF2;font-size:16px;margin-top:8px}

/* CARD VISUAL */
.cards-visual{margin-top:40px}
.cards-visual img{width:100%;height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
.cards-visual figcaption{margin-top:14px;font-size:14px;color:var(--grey)}
/* ECOSYSTEM */
.eco{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.eco div{border-radius:16px;padding:24px;border:1px solid var(--line);background:var(--navy)}
.eco h3{font-size:34px}
.eco p{color:#D7DCF2;margin-top:8px;font-size:16px}

/* PARTNERS */
#partenaires{background:linear-gradient(160deg,#101A50,var(--night) 70%)}
.partner-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.figs div{border-left:4px solid var(--red);padding:4px 0 4px 14px}
.figs b{display:block;font-family:var(--display);font-style:italic;font-weight:900;font-size:44px;line-height:1}
.figs span{font-size:14px;color:var(--grey)}
.packs{background:var(--navy);border:1px solid var(--line);border-radius:18px;padding:26px}
.packs li{list-style:none;display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed #2C3778;font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.5px}
.packs li:last-of-type{border-bottom:0}
.packs li span{color:var(--grey);font-family:var(--body);font-weight:500;font-size:14px;text-transform:none;letter-spacing:0;text-align:right}
.mail{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.mail code{font-family:var(--body);font-weight:600;font-size:17px;background:#0A1030;border:1px solid #2C3778;border-radius:8px;padding:10px 12px}

footer{padding:48px 0 60px;border-top:1px solid var(--line);color:var(--grey);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
footer b{color:var(--chalk)}
footer a{color:var(--chalk)}
footer .legal{display:block;margin-top:18px}
footer details summary{cursor:pointer;color:var(--grey);font-size:13px;letter-spacing:1px;text-transform:uppercase}
footer details p{margin-top:10px;font-size:13px;line-height:1.6;max-width:90ch}

@media (max-width:900px){
  .navlinks{display:none}
  .hero-grid,.quiz-grid,.form-grid,.partner-grid{grid-template-columns:minmax(0,1fr)}
  .portrait{min-height:460px}
  .portrait .ph{left:0;right:auto;margin-inline:auto;position:relative;width:min(360px,100%)}
  .stats,.events,.seasons,.eco{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  section{padding:72px 0}
  .stats,.events,.seasons,.eco,.figs,.row{grid-template-columns:1fr}
  .qchoices.three{grid-template-columns:1fr}
  .stripes{display:none}
  nav:not(.hx-nav) .btn{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover{transform:none}}

/* ===== Header façon soirée de gala : barre centrée + hero plein cadre, présentateur en contre-jour ===== */
.hx-nav{position:sticky;top:0;z-index:30;background:rgba(6,9,24,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hx-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:72px}
.hx-burger{justify-self:start;display:flex;align-items:center;gap:12px;background:none;border:0;color:var(--chalk);cursor:pointer;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:3px;text-transform:uppercase;padding:8px 0;min-height:44px}
.hx-burger i{display:grid;gap:6px;width:28px}
.hx-burger i::before,.hx-burger i::after,.hx-burger i b{content:"";display:block;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.hx-burger[aria-expanded="true"] i::before{transform:translateY(8px) rotate(45deg)}
.hx-burger[aria-expanded="true"] i b{opacity:0}
.hx-burger[aria-expanded="true"] i::after{transform:translateY(-8px) rotate(-45deg)}
.hx-logo{justify-self:center;display:block;text-decoration:none}
.hx-logo svg{height:34px;width:auto;display:block}
.hx-right{justify-self:end;display:flex;align-items:center;gap:22px}
.hx-right a.txt{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:3px;text-transform:uppercase;text-decoration:none;color:var(--grey)}
.hx-right a.txt:hover{color:var(--chalk)}
.hx-right .btn{min-height:40px;font-size:16px;padding:0 16px}
.hx-menu{border-top:1px solid var(--line);background:var(--night)}
.hx-menu ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 24px;padding:22px 0 28px}
.hx-menu a{display:block;padding:10px 0;font-family:var(--display);font-style:italic;font-weight:900;font-size:26px;text-transform:uppercase;text-decoration:none;color:var(--chalk);border-bottom:1px solid var(--line)}
.hx-menu a:hover{color:var(--yellow)}

.hx{position:relative;overflow:hidden;background:
  radial-gradient(620px 520px at 74% 34%,rgba(255,236,170,.30) 0%,rgba(255,214,10,.10) 34%,rgba(6,9,24,0) 70%),
  radial-gradient(900px 640px at 80% 0%,#1C2A78 0%,rgba(28,42,120,0) 62%),
  linear-gradient(180deg,#070B22 0%,var(--night) 100%)}
.hx-beams{position:absolute;inset:0;pointer-events:none}
.hx-beams i{position:absolute;top:-30%;width:220px;height:150%;background:linear-gradient(180deg,rgba(255,250,225,.20),rgba(255,250,225,0) 72%);filter:blur(14px);transform-origin:50% 0}
.hx-beams i:nth-child(1){left:52%;transform:rotate(24deg)}
.hx-beams i:nth-child(2){left:70%;transform:rotate(8deg);width:160px}
.hx-beams i:nth-child(3){left:88%;transform:rotate(-12deg)}
.hx-lamps{position:absolute;top:22px;right:4%;display:grid;grid-template-columns:repeat(4,10px);gap:7px;opacity:.85;pointer-events:none}
.hx-lamps b{width:10px;height:10px;border-radius:50%;background:#FFF6D0;box-shadow:0 0 14px 4px rgba(255,240,180,.55)}
.hx .pitch{position:absolute;left:0;right:0;bottom:0;height:46%;width:100%;opacity:.07;pointer-events:none}
.hx-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:24px;min-height:620px}
.hx-lock{align-self:center;text-align:center;padding:64px 0 72px;display:flex;flex-direction:column;align-items:center}
.hx-host{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:6px;font-size:15px;color:var(--grey);line-height:1.5}
.hx-host b{display:block;color:var(--chalk);font-size:22px;letter-spacing:9px}
.hx-season{margin-top:22px;font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;font-size:24px;letter-spacing:3px;color:var(--yellow)}
.hx-lock h1{font-size:clamp(60px,9vw,136px);display:flex;align-items:flex-end;justify-content:center;gap:.06em;margin-top:8px;text-shadow:0 6px 40px rgba(255,214,10,.18)}
.hx-lock h1 .j{color:var(--red)}
.hx-word{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.55em;margin-right:-.55em;font-size:clamp(18px,2.2vw,26px);color:var(--chalk);margin-top:6px}
.hx-format{margin-top:14px;font-size:15px;color:var(--grey);letter-spacing:1px}
.hx-date{display:flex;align-items:center;gap:14px;margin-top:26px;font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;font-size:22px;letter-spacing:1px}
.hx-date i{width:2px;height:28px;background:var(--yellow)}
.hx-date span{color:var(--yellow)}
.hx-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;align-items:center;margin-top:30px}
.hx-out{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;border:2px solid var(--yellow);border-radius:4px;color:var(--yellow);text-decoration:none;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:3px;text-transform:uppercase;transition:background .15s ease,color .15s ease}
.hx-out:hover{background:var(--yellow);color:var(--night)}
.hx-link{color:var(--chalk);font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:2px;text-transform:uppercase;text-underline-offset:6px}

.hx-guest{position:relative;align-self:stretch;display:flex;justify-content:center;align-items:flex-end;min-height:560px}
.hx-guest .bust{position:relative;width:min(500px,100%);height:auto;display:block;margin-bottom:-2px}
.hx-label{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);z-index:2;width:max-content;max-width:min(280px,80%);text-align:center}
.hx-label small{display:block;font-family:var(--display);font-weight:700;letter-spacing:4px;text-transform:uppercase;font-size:13px;color:var(--grey)}
.hx-label strong{display:block;font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;font-size:30px;line-height:.95;margin-top:4px}
.hx-clue{display:inline-block;margin-top:10px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--night);background:var(--yellow);padding:5px 10px;border-radius:4px}
.hx .offside{position:absolute;left:0;right:0;bottom:0}

@media (prefers-reduced-motion:no-preference){
  .hx-beams i{animation:sweep 9s ease-in-out infinite alternate}
  .hx-beams i:nth-child(2){animation-duration:11s}
  .hx-beams i:nth-child(3){animation-duration:13s}
  @keyframes sweep{from{margin-left:-30px}to{margin-left:30px}}
  .hx-rim{animation:rim 4s ease-in-out infinite}
  @keyframes rim{0%,100%{opacity:.85}50%{opacity:1}}
}
@media (max-width:900px){
  .hx-right a.txt{display:none}
  .hx-menu ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-grid{grid-template-columns:minmax(0,1fr);min-height:0;gap:0}
  .hx-lock{padding:44px 0 8px}
  .hx-guest{min-height:0}
  .hx-guest .bust{width:min(380px,92%)}
  .hx-label{bottom:24px}
  .hx-lamps{display:none}
}
@media (max-width:560px){
  .hx-bar{height:62px}
  .hx-burger span{display:none}
  .hx-logo svg{height:28px}
  .hx-right .btn{display:none}
  .hx-menu ul{grid-template-columns:minmax(0,1fr)}
  .hx-host{letter-spacing:4px}
  .hx-host b{letter-spacing:6px}
  .hx-word{letter-spacing:.35em;margin-right:-.35em}
  .hx-label strong{font-size:22px}
  .hx-season{font-size:18px;letter-spacing:2px}
  .hx-date{font-size:18px;white-space:nowrap;gap:10px}
  .hx-lock h1{font-size:clamp(52px,16vw,72px)}
}

/* ===== Motion : entrée du plateau, bandeau défilant, apparitions au scroll, chiffres, confettis ===== */
.ticker{position:relative;overflow:hidden;background:var(--yellow);color:var(--night);border-block:3px solid var(--night)}
.ticker-track{display:flex;width:max-content}
.ticker-track span{display:flex;align-items:center;gap:22px;padding:10px 11px;font-family:var(--display);font-style:italic;font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.ticker-track span::after{content:"";width:12px;height:16px;background:linear-gradient(135deg,var(--red) 0 50%,var(--night) 50% 100%);clip-path:polygon(0 0,100% 0,0 100%)}
.ev{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.ev:hover{transform:translateY(-6px);border-color:var(--yellow);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.ev .no{transition:transform .3s ease}
.ev:hover .no{transform:scale(1.25) rotate(-8deg)}
.season{transition:transform .25s ease}
.season:hover{transform:translateY(-6px)}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

@media (prefers-reduced-motion:no-preference){
  /* Entrée du plateau : les projecteurs s'allument, le titre arrive, le présentateur s'éclaire */
  .hx-lamps b{animation:lampOn .5s steps(2,end) both}
  .hx-lamps b:nth-child(2){animation-delay:.12s}.hx-lamps b:nth-child(3){animation-delay:.24s}.hx-lamps b:nth-child(4){animation-delay:.36s}
  .hx-lamps b:nth-child(5){animation-delay:.18s}.hx-lamps b:nth-child(6){animation-delay:.3s}.hx-lamps b:nth-child(7){animation-delay:.42s}.hx-lamps b:nth-child(8){animation-delay:.54s}
  @keyframes lampOn{0%{opacity:.15;box-shadow:none}60%{opacity:1}80%{opacity:.4}100%{opacity:1}}
  .hx-beams{animation:beamsIn 1.4s ease-out both .3s}
  @keyframes beamsIn{from{opacity:.25}to{opacity:1}}
  .hx-lock > *{animation:riseIn .7s cubic-bezier(.2,.8,.2,1) both}
  .hx-lock > :nth-child(1){animation-delay:.15s}.hx-lock > :nth-child(2){animation-delay:.3s}
  .hx-lock > :nth-child(3){animation:slamIn .75s cubic-bezier(.2,1.3,.3,1) both .45s}
  .hx-lock > :nth-child(4){animation:trackIn 1s cubic-bezier(.2,.8,.2,1) both .7s}
  .hx-lock > :nth-child(5){animation-delay:.85s}.hx-lock > :nth-child(6){animation-delay:.95s}.hx-lock > :nth-child(7){animation-delay:1.05s}
  @keyframes riseIn{from{opacity:.25;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes slamIn{from{opacity:.25;transform:scale(1.35) skewX(-8deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
  @keyframes trackIn{from{opacity:.25;letter-spacing:1.4em}to{opacity:1}}
  .hx-guest .bust{animation:guestIn 1.1s ease-out both .5s}
  @keyframes guestIn{from{opacity:.3;transform:translateY(30px);filter:brightness(.2)}to{opacity:1;transform:none;filter:none}}
  .hx-clue{animation:cluePulse 2.8s ease-in-out infinite 2s}
  @keyframes cluePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,214,10,.0)}50%{box-shadow:0 0 0 8px rgba(255,214,10,.18)}}
  /* Bandeau défilant */
  .ticker-track{animation:tick 38s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}
  @keyframes tick{to{transform:translateX(-50%)}}
  /* Apparitions au scroll (navigateurs compatibles uniquement ; sinon tout reste visible) */
  @supports (animation-timeline: view()){
    main section .wrap > *{animation:viewIn linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    .events .ev,.stats .stat,.seasons .season{animation:viewIn linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes viewIn{from{opacity:.15;transform:translateY(40px)}to{opacity:1;transform:none}}
    main .offside{transform-origin:0 50%;animation:drawLine linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    @keyframes drawLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}
@media (max-width:560px){.ticker-track span{font-size:18px;padding:8px 9px}}

/* Bande-annonce */
#bande-annonce{padding:64px 0 40px;text-align:center}
#bande-annonce .kicker{justify-content:center}
#bande-annonce h2{font-size:clamp(34px,4.6vw,60px)}
#bande-annonce .ba-frame,#bande-annonce .ba-meta{width:min(100%,960px,calc((100svh - 230px) * 16 / 9));min-width:min(100%,520px);margin-inline:auto}
#bande-annonce .ba-meta{justify-content:center}
.ba-frame{position:relative;margin-top:26px;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(228,0,43,.45),0 0 0 6px rgba(255,214,10,.06)}
.ba-frame::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:linear-gradient(var(--red),var(--yellow),var(--blue));z-index:2;pointer-events:none}
.ba-frame iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;background:#000}
.ba-play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;padding:0 0 9% 9%;border:0;background:linear-gradient(0deg,rgba(6,9,24,.6),rgba(6,9,24,0) 45%);cursor:pointer;z-index:1}
.ba-play span{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:999px;background:var(--yellow);color:var(--night);font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:1px;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ba-play span::before{content:"";border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--night)}
.ba-play:hover span,.ba-play:focus-visible span{background:#fff}
.ba-play:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.ba-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px;color:var(--grey);font-size:15px}
.ba-meta a{color:var(--yellow);text-decoration:none;font-weight:600}
.ba-meta a:hover{text-decoration:underline}
.hx-ba{display:inline-flex;align-items:center;gap:10px;margin-top:14px;color:var(--chalk);text-decoration:none;font-weight:600;font-size:15px}
.hx-ba i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red)}
.hx-ba i::before{content:"";border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;margin-left:2px}
.hx-ba:hover{color:var(--yellow)}
.ba-sound{position:absolute;right:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:0;border-radius:999px;background:rgba(6,9,24,.78);color:#fff;font:600 14px/1 inherit;font-family:inherit;cursor:pointer;backdrop-filter:blur(6px)}
.ba-sound svg{width:18px;height:18px}
.ba-play[hidden],.ba-sound[hidden]{display:none}
#univers .cards-visual{width:min(100%,1000px,calc((100svh - 150px) * 1.500));margin-inline:auto}
#univers .cards-visual figcaption{text-align:center}
#univers .app-visual{width:min(100%,1000px,calc((100svh - 150px) * 1.778))}
.ba-sound:hover,.ba-sound:focus-visible{background:var(--yellow);color:var(--night)}
.ba-sound:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:640px){#bande-annonce{padding:56px 0 24px}.ba-sound{right:8px;bottom:8px;padding:6px 10px;font-size:12px}.ba-sound svg{width:15px;height:15px}.ba-play{padding:0 0 6% 6%}.ba-play span{font-size:14px;padding:9px 16px;gap:8px}.ba-play span::before{border-width:6px 0 6px 10px}}

[hidden]{display:none!important}
section,header{scroll-margin-top:88px}
.skip-link{position:fixed;top:-100px;left:16px;background:var(--yellow);color:var(--night);padding:10px 16px;z-index:100}
.skip-link:focus{top:12px}
.hx-guest .bust{width:min(500px,100%);aspect-ratio:4/5;object-fit:cover;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 82%,transparent 100%);mask-composite:intersect}
.hx-label{bottom:24px;text-shadow:0 2px 18px #000}
.hx-label strong,.hx-label small{background:#060918c9;padding:3px 10px}
.hx-guest::after{content:"Visuel d’intention";position:absolute;right:14px;bottom:8px;font-size:10px;color:var(--grey);letter-spacing:1px;text-transform:uppercase}
.universe-visuals{display:block}
.universe-visuals img{height:auto;aspect-ratio:auto;object-fit:contain;border:1px solid var(--line)}
.ba-poster{display:block;position:relative;color:var(--chalk);text-decoration:none;aspect-ratio:16/9;overflow:hidden}
.ba-poster img{width:100%;height:100%;object-fit:cover;object-position:center 33%;opacity:.65}
.ba-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#060918e8,transparent 90%)}
.ba-poster-copy{position:absolute;z-index:1;left:7%;bottom:13%;text-align:left}
.ba-poster-copy strong{display:block;font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(34px,6vw,64px);text-transform:uppercase;line-height:1}
.ba-poster-copy span{display:inline-flex;gap:12px;align-items:center;background:var(--yellow);color:var(--night);padding:10px 18px;margin-top:18px;border-radius:6px;font-weight:700;font-size:14px}
.ba-poster:hover .ba-poster-copy span{background:var(--chalk)}
.err,.fineprint,.form-note{color:var(--grey)}
input,textarea,select{max-width:100%}
.ev h3{padding-right:22px}
@media(max-width:700px){.universe-visuals{grid-template-columns:1fr}.hx-cta{flex-direction:column}.hx-out{font-size:15px;letter-spacing:2px;max-width:100%;padding:0 16px}.perk b{min-width:96px}.perk{gap:10px}.qfoot{letter-spacing:.8px;gap:8px;padding:12px 16px}.qnext{padding:8px 10px}.hx-bar{grid-template-columns:1fr auto 1fr}.hx-logo svg{max-width:120px}.hx-lock{padding-top:34px}.ba-meta{gap:8px}.ba-poster-copy strong{font-size:clamp(28px,7vw,46px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.hx-menu{max-height:calc(100svh - 72px);overflow:auto}.hx-menu ul{height:auto}