/* Layout: bande de 7 panneaux rôles + gros titre détouré, puis intro, galerie, étapes/réseaux, FAQ — monochrome chrome comme le logo */
:root{
  --bg:#0c0d10; --panel:#15171b; --panel-2:#1c1f24; --line:rgba(210,215,222,.10); --line-2:rgba(210,215,222,.22);
  --fg:#eceef1; --muted:#8d939c;
  --chrome-hi:#f4f6f8; --chrome-mid:#b9bfc7; --chrome-lo:#5d636b;
  --chrome:linear-gradient(180deg,var(--chrome-hi) 0%,var(--chrome-mid) 48%,#7e848c 52%,#d5d9de 100%);
  --f-display:"Chakra Petch","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.55;margin:0;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}
.u{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.04em}

/* NAV */
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(12,13,16,.85);backdrop-filter:blur(10px)}
nav .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:34px;width:auto}
.badge{display:flex;align-items:center;gap:7px;background:var(--panel-2);border:1px solid var(--line);padding:5px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.badge i{width:7px;height:7px;border-radius:50%;background:#58c47f;box-shadow:0 0 8px #58c47f}
.badge b{color:var(--fg)}
nav ul{display:flex;gap:22px;list-style:none;margin:0 auto;padding:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
nav ul a{text-decoration:none;color:var(--muted)}
nav ul a:hover,nav ul a:focus-visible{color:var(--fg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.1em;padding:11px 20px;background:var(--chrome);color:#111;text-decoration:none;border:0;cursor:pointer;box-shadow:inset 0 1px 0 #fff,0 6px 20px rgba(0,0,0,.4)}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--chrome-hi);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line-2);box-shadow:none}
nav .btn{margin-left:auto}
@media(max-width:820px){nav ul{display:none}nav .btn{margin-left:auto}}
@media(max-width:460px){.badge{display:none}}

/* HERO STRIP */
.strip-wrap{position:relative;padding-block:18px 0}
.strip{position:relative;display:grid;grid-template-columns:repeat(var(--cols,7),1fr);gap:10px;height:clamp(300px,36vw,400px)}
.p{position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--line-2);background:
  radial-gradient(120% 70% at 50% 0%,#3a3e45 0%,transparent 60%),
  linear-gradient(180deg,#24272c,#101114);display:flex;flex-direction:column;justify-content:flex-end;padding:14px;isolation:isolate;transition:transform .35s ease,border-color .35s}
.p:hover{transform:translateY(-6px);border-color:var(--chrome-mid)}
.p::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);z-index:-1}
.p svg{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:58%;max-width:90px;height:auto;stroke:var(--chrome-mid);fill:none;stroke-width:1.4;opacity:.75}
.p .role{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.08em}
.p .sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.p.main{background:var(--chrome);border-color:#fff;align-items:center;justify-content:center;text-align:center;color:#111;text-decoration:none}
.p.main::after{background:radial-gradient(80% 50% at 50% 30%,rgba(255,255,255,.7),transparent 70%)}
.p.main img{width:100%;max-width:150px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));margin-bottom:14px}
.play{width:58px;height:58px;border-radius:50%;background:#111;display:grid;place-items:center;margin-bottom:10px;box-shadow:0 0 0 6px rgba(17,17,17,.15)}
.play::before{content:"";border-left:16px solid var(--chrome-hi);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.p.main .role{font-size:16px;line-height:1.15}
.word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-family:var(--f-display);font-style:italic;font-weight:700;font-size:clamp(70px,14vw,190px);line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px rgba(244,246,248,.55);text-transform:uppercase;white-space:nowrap;overflow:hidden;mix-blend-mode:difference}
@media(max-width:820px){
  .strip{grid-template-columns:repeat(3,1fr);height:340px}
  .p.hide-m{display:none}
}

/* INTRO */
.intro{position:relative;text-align:center;padding-block:90px 70px;overflow:hidden}
.intro::before,.intro::after{content:"";position:absolute;top:10%;width:340px;height:340px;border-radius:50%;filter:blur(10px);opacity:.5}
.intro::before{left:-160px;background:radial-gradient(circle,#2b2f35,transparent 65%)}
.intro::after{right:-160px;background:radial-gradient(circle,#2b2f35,transparent 65%)}
.intro p.lead{position:relative;max-width:58ch;margin:0 auto 26px;font-size:16px;font-weight:600}
.intro p.lead b{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.q{position:relative;display:inline-block;font-weight:700;font-size:15px;margin-bottom:36px;padding-bottom:6px}
.q::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--chrome);transform:skewX(-20deg)}
.paths{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.path{display:flex;align-items:center;gap:14px;padding:12px 18px;border:1px solid var(--line-2);font-size:13px;font-weight:600;text-decoration:none;background:rgba(21,23,27,.6)}
.path:hover{border-color:var(--chrome-mid)}
.path span{color:var(--chrome-mid);font-size:16px}

/* LIVE */
.badge i.off{background:#c45858;box-shadow:0 0 8px #c45858}
.live{padding-block:0 70px}
.live-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:18px}
.live-dot{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:#58c47f;box-shadow:0 0 8px #58c47f}
.live-dot.off::before{background:var(--chrome-lo);box-shadow:none}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--bg);padding:20px 18px;min-width:0}
.tile b{display:block;font-family:var(--f-display);font-size:clamp(26px,3.4vw,36px);line-height:1.05;font-variant-numeric:tabular-nums;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.tile b small{font-size:.5em;-webkit-text-fill-color:var(--muted)}
.tile span{display:block;margin-top:6px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* PATH + GALLERY */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-block:30px 90px;align-items:end}
@media(max-width:860px){.feature{grid-template-columns:1fr}}
.feat-art{position:relative;aspect-ratio:16/11;max-width:100%;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 45%,#3a3e45,transparent 70%)}
.feat-art img{width:78%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.8))}
.feature h2{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:22px;margin:16px 0 6px}
.feature p{margin:0;color:#c5c9cf;font-size:14px;max-width:60ch}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;min-width:0}
.g{aspect-ratio:16/9;border-radius:4px;border:1px solid var(--line);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--fg);text-shadow:0 1px 3px #000}
.g:nth-child(odd){background:linear-gradient(135deg,#2c3036,#14161a)}
.g:nth-child(even){background:linear-gradient(135deg,#1a1d22,#34383f)}
.g.big{grid-column:1/-1;aspect-ratio:auto;height:180px;border-color:var(--line-2);align-items:center;justify-content:flex-start;gap:16px;padding:22px;font-size:14px;background:linear-gradient(110deg,#2a2e34 0%,#121417 60%),#15171b}
.g.big .play{background:var(--chrome);margin:0;flex:none}
.g.big .play::before{border-left-color:#111}
.g.big em{position:absolute;right:-10px;top:-14px;font-family:var(--f-display);font-weight:700;font-style:italic;font-size:110px;color:rgba(255,255,255,.06);line-height:1}
.g.more{background:var(--panel);justify-content:center;align-items:center;color:var(--muted)}

/* START + SOCIAL */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-block:80px;position:relative}
.twocol::before{content:"";position:absolute;left:50%;top:50%;width:520px;height:520px;transform:translate(-50%,-50%);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 38px,rgba(210,215,222,.05) 39px 40px);pointer-events:none;max-width:100%}
@media(max-width:860px){.twocol{grid-template-columns:1fr}}
h3.sec{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:20px;margin:0 0 2px}
.subt{color:#c5c9cf;font-size:13px;margin:0 0 20px}
.step{position:relative;display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--line);background:var(--panel);margin-bottom:10px;min-width:0}
.step .ico{flex:none;width:36px;height:36px;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:20px;background:var(--panel-2);border:1px solid var(--line-2)}
.step div{flex:1;min-width:0}
.step strong{display:block;font-size:14px}
.step small{color:var(--muted);font-size:12px}
.step code{font-family:ui-monospace,monospace;font-size:12px;color:var(--fg);overflow-wrap:anywhere}
.step .btn{flex:none;padding:10px 16px;font-size:12px}
.foot-link{position:relative;margin-top:18px;font-size:12px;color:#c5c9cf}
.foot-link a{font-weight:700;text-decoration:none;border-bottom:1px solid var(--chrome-mid);margin-left:6px}
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.s{height:56px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);background:linear-gradient(135deg,#1c1f24,#121418);text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:.02em}
.s:hover{border-color:var(--chrome-mid)}
.s svg{width:22px;height:22px;fill:currentColor}

/* FAQ */
.faq{padding-block:40px 70px}
.faq h3.sec{margin-bottom:20px}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.f{border:1px solid var(--line-2);border-radius:6px;padding:18px;background:var(--panel)}
.f strong{display:block;font-size:13px;margin-bottom:8px}
.f p{margin:0;color:var(--muted);font-size:12.5px}
.f a{color:var(--fg);font-weight:600}

/* CTA band */
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--line-2);border-radius:6px;padding:24px;background:linear-gradient(110deg,#1c1f24,#121418);margin-bottom:70px}
.band .l{display:flex;align-items:center;gap:16px;min-width:0}
.band .l svg{flex:none;width:34px;height:34px;fill:var(--chrome-mid)}
.band strong{display:block;font-family:var(--f-display);text-transform:uppercase;font-size:17px}
.band span{color:#c5c9cf;font-size:13px}

/* FOOTER */
footer{border-top:1px solid var(--line);padding-block:36px 40px;font-size:12px;color:var(--muted)}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
footer img{height:44px;width:auto;margin-bottom:10px}
footer h4{font-family:var(--f-display);text-transform:uppercase;font-size:12px;letter-spacing:.08em;color:var(--fg);margin:0 0 10px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer ul a{text-decoration:none}
footer ul a:hover{color:var(--fg)}
.disc{margin-top:30px;padding:14px 16px;border:1px solid var(--line);background:var(--panel);font-size:11px}
.disc b{color:var(--fg);text-transform:uppercase;letter-spacing:.08em}

.copy-t{font:inherit;background:none;border:0;color:var(--chrome-hi);cursor:pointer;padding:0;text-decoration:underline;font-size:12px;font-weight:600}
@media(prefers-reduced-motion:reduce){.p{transition:none}html{scroll-behavior:auto}}