/* ════════════════════════════════════════════════════════════
   GWAFLIX · layout.css — nav, hero, sections, rangées, footer
   ════════════════════════════════════════════════════════════ */

/* ─── NAV ─── */
.nav { position:fixed; inset:0 0 auto 0; z-index:100; padding:1.1rem 0; transition:background .3s, border-color .3s, padding .3s; border-bottom:1px solid transparent; }
.nav.scrolled { background:rgba(8,8,10,.82); backdrop-filter:blur(16px) saturate(1.4); border-bottom-color:var(--line); padding:.7rem 0; }
.nav .wrap-wide { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.nav-logo img { height:30px; }
.nav-menu { display:flex; gap:2.2rem; }
.nav-menu a { color:var(--dim); font-size:.9rem; font-weight:500; }
.nav-menu a:hover { color:var(--txt); }
.nav-cta { display:flex; gap:.7rem; align-items:center; }
@media (max-width:820px){ .nav-menu { display:none; } }

/* ─── HERO mur d'affiches ─── */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:7rem 1.5rem 5rem; overflow:hidden; isolation:isolate; }
.hero-wall { position:absolute; top:50%; left:50%; width:130vw; height:160vh; z-index:-3; display:flex; gap:14px; justify-content:center; transform:translate(-50%,-50%) rotate(-8deg) scale(1.1); transform-origin:center; opacity:0; transition:opacity 1.2s ease; pointer-events:none; }
.hero-wall.wall-ready { opacity:.4; }
.wall-col { display:flex; flex-direction:column; gap:14px; flex:0 0 clamp(110px,11vw,170px); animation:wallUp 70s linear infinite; }
.wall-col.reverse { animation:wallDown 70s linear infinite; }
.wall-col img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:10px; }
@keyframes wallUp { from{transform:translateY(0);} to{transform:translateY(-50%);} }
@keyframes wallDown { from{transform:translateY(-50%);} to{transform:translateY(0);} }
.hero-veil { position:absolute; inset:0; z-index:-2; background:radial-gradient(ellipse 70% 60% at 50% 45%, rgba(8,8,10,.5), rgba(8,8,10,.92) 75%), linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.25) 40%, var(--bg) 100%); }
.hero-dust { position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 70% 20%,rgba(255,255,255,.3),transparent),radial-gradient(1px 1px at 40% 60%,rgba(255,255,255,.25),transparent),radial-gradient(1px 1px at 85% 50%,rgba(255,255,255,.3),transparent),radial-gradient(1px 1px at 55% 80%,rgba(255,255,255,.2),transparent); opacity:.4; animation:drift 22s linear infinite; }
@keyframes drift { from{transform:translateY(0);} to{transform:translateY(-40px);} }
.hero-inner { position:relative; z-index:2; max-width:820px; display:flex; flex-direction:column; align-items:center; }
.hero-logo { height:clamp(46px,7vw,68px); margin-bottom:2rem; filter:drop-shadow(0 6px 30px rgba(229,9,20,.5)); animation:rise .8s var(--ease) both; }
.hero h1 { font-size:clamp(3.2rem,10vw,7.5rem); margin-bottom:1.3rem; animation:rise .8s .1s var(--ease) both; }
.hero h1 .em { color:var(--red); }
.hero-tag { font-size:clamp(1.05rem,2.2vw,1.4rem); color:var(--dim); max-width:40ch; margin:0 auto 2.6rem; text-shadow:0 1px 8px rgba(0,0,0,.6); animation:rise .8s .2s var(--ease) both; }
.hero-actions { display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; animation:rise .8s .3s var(--ease) both; }
.hero-fine { margin-top:1.8rem; font-size:.82rem; color:var(--mute); animation:rise .8s .4s var(--ease) both; }
@keyframes rise { from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;} }
.scroll-hint { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); color:var(--mute); font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.4;} 50%{opacity:.9;} }

/* ─── SECTIONS ─── */
.section { padding:6rem 0; position:relative; }
.section-head { max-width:620px; margin:0 0 3.5rem; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2 { font-size:clamp(2.2rem,5vw,3.6rem); margin:.8rem 0 .6rem; }
.section-head p { color:var(--dim); font-size:1.08rem; }
.section-sub { text-align:center; color:var(--dim); font-size:1.05rem; margin:0 auto 3rem; max-width:600px; }
.filmstrip { height:14px; background:repeating-linear-gradient(90deg,var(--bg-2) 0 14px,transparent 14px 28px); border-block:1px solid var(--line); opacity:.6; }

/* ─── RANGÉES catalogue ─── */
.rows-section { padding:4rem 0 5rem; }
.row { margin-bottom:3rem; }
.row-head { padding:0 .2rem; margin-bottom:1rem; }
.row-title { font-size:1.35rem; font-weight:700; letter-spacing:-.01em; color:var(--txt); }
.row-viewport { position:relative; }
.row-track { display:flex; gap:12px; overflow-x:auto; overflow-y:visible; scroll-behavior:smooth; scrollbar-width:none; padding:30px 8px 30px; }
.row-track::-webkit-scrollbar { display:none; }
.row-arrow { position:absolute; top:0; bottom:28px; z-index:6; width:52px; border:none; cursor:pointer; background:linear-gradient(90deg,rgba(8,8,10,.85),transparent); color:#fff; font-size:2rem; opacity:0; transition:opacity .2s; display:grid; place-items:center; }
.row-arrow.prev { left:0; border-radius:10px 0 0 10px; }
.row-arrow.next { right:0; background:linear-gradient(270deg,rgba(8,8,10,.85),transparent); border-radius:0 10px 10px 0; }
.row-viewport:hover .row-arrow { opacity:.9; }
.row-arrow:hover { opacity:1 !important; color:var(--ember); }
@media (hover:none){ .row-arrow { display:none; } }
.row-skeleton { flex:0 0 clamp(130px,13vw,185px); height:clamp(195px,19.5vw,278px); border-radius:10px; background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-3) 50%,var(--bg-2) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer { from{background-position:200% 0;} to{background-position:-200% 0;} }

/* ─── FEATURES / DEVICES / STEPS ─── */
.features { background:var(--bg-1); }
.grid-feat { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.3rem; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2.4rem; }
.step-n { font-family:"Bebas Neue",sans-serif; font-size:3.4rem; color:var(--red-deep); line-height:1; margin-bottom:.6rem; }
.step h3 { font-size:1.25rem; margin-bottom:.5rem; }
.step p { color:var(--dim); }
.step p a { color:var(--ember); }



/* ─── CTA / FOOTER ─── */
.cta { text-align:center; background:linear-gradient(180deg,var(--bg),var(--bg-1)); }
.cta h2 { font-size:clamp(2.4rem,5vw,3.8rem); margin-bottom:.8rem; }
.cta p { color:var(--dim); font-size:1.1rem; margin-bottom:2.2rem; }
.footer { background:#050506; border-top:1px solid var(--line); padding:3.5rem 0 1.6rem; }
.footer-grid { display:grid; grid-template-columns:1.4fr 2.6fr; gap:3rem; margin-bottom:2.6rem; }
.footer-logo { height:34px; margin-bottom:.9rem; }
.footer-brand p { color:var(--mute); font-size:.9rem; max-width:30ch; }
.footer-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1.6rem; }
.footer-cols h4 { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin-bottom:1rem; }
.footer-cols a { display:block; color:var(--dim); font-size:.92rem; padding:.28rem 0; }
.footer-cols a:hover { color:var(--red); }
.footer-bot { border-top:1px solid var(--line); padding-top:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; color:var(--mute); font-size:.82rem; }
@media (max-width:720px){ .footer-grid { grid-template-columns:1fr; gap:2rem; } .footer-bot { justify-content:center; text-align:center; } }

/* Centrage de l'eyebrow dans les sections centrées */
.section-head.center .eyebrow { justify-content:center; }
.section-head.center .eyebrow::before { display:none; }

/* Flèches masquées en bout de course */
.row-arrow.arrow-hidden { opacity:0 !important; pointer-events:none; }