/* ============================================================
   GMR — PAY CA$H · Aroz Vision · V3
   Moderne, clair, ARRONDI · noir / or / émeraude
   Bricolage Grotesque + Hanken Grotesk
   ============================================================ */
@font-face{font-family:"Syne";src:url("assets/fonts/syne-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Syne";src:url("assets/fonts/syne-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Syne";src:url("assets/fonts/syne-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Hanken";src:url("assets/fonts/hanken-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken";src:url("assets/fonts/hanken-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken";src:url("assets/fonts/hanken-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Hanken";src:url("assets/fonts/hanken-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --noir:#0A0A0A;--noir-900:#060606;--noir-800:#121110;--noir-700:#16130F;
  --ivory:#F2EFE6;--ivory-dim:#CBC6BB;--muted:#8C877B;
  --gold:#C9CED6;--gold-bright:#ECEFF3;--gold-deep:#7E848C;
  --emerald:#0F4A38;--emerald-lamp:#1E7A55;--oxblood:#6E1414;
  --hairline:rgba(201,206,214,.26);--hairline-dim:rgba(242,239,230,.10);--scrim:rgba(6,5,4,.55);
  --radius:16px;--radius-lg:22px;--radius-pill:999px;
  --display:"Syne",system-ui,sans-serif;
  --body:"Hanken","Hanken Grotesk",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.30,1);--spring:cubic-bezier(.34,1.4,.5,1);
  --t-fast:220ms;--t:420ms;--t-slow:720ms;
  --maxw:1280px;--gut:clamp(22px,5vw,72px);--mx:50vw;--my:50vh;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--noir);color:var(--ivory);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold);color:#0A0A0A}
.eyebrow{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.28em;color:var(--gold);font-size:.74rem}
.kicker{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);font-size:.72rem}
.lead{font-family:var(--body);font-weight:400;font-size:1.05rem;color:var(--ivory-dim);text-align:center;max-width:46ch;margin:0 auto clamp(34px,5vh,56px)}

/* GRAIN */
.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.07;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:150px}

/* CURSEUR + SPOTLIGHT */
.cursor,.spotlight{display:none}
@media(hover:hover) and (pointer:fine){
  .spotlight{display:block;position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(380px circle at var(--mx) var(--my),rgba(244,239,230,.05),transparent 66%)}
  .spotlight.is-on{opacity:1}
}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gut);transition:background-color var(--t),backdrop-filter var(--t),padding var(--t)}
.nav--scrolled{background:rgba(10,10,10,.6);-webkit-backdrop-filter:blur(20px) saturate(120%);backdrop-filter:blur(20px) saturate(120%);padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--hairline)}
.nav__brand{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:.04em;color:var(--gold)}
.nav__links{display:flex;gap:clamp(6px,1.4vw,14px)}
.nav__links a{position:relative;font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.04em;color:var(--ivory-dim);padding:8px 16px;border-radius:var(--radius-pill);transition:color var(--t),background-color var(--t),transform var(--t) var(--spring)}
.nav__links a:hover{color:var(--ivory);transform:translateY(-2px)}
.nav__links a.is-active{color:var(--gold-bright);background:rgba(201,206,214,.13)}
.nav__burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px}
.nav__burger span{display:block;width:26px;height:2px;border-radius:2px;background:var(--gold);transition:transform var(--t) var(--ease)}
.menu{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.4rem;background:rgba(6,5,4,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity var(--t),visibility 0s linear var(--t)}
.menu.is-open{opacity:1;visibility:visible;transition:opacity var(--t)}
.menu a{font-family:var(--display);font-weight:700;font-size:2rem;color:var(--ivory)}
.menu a.is-active{color:var(--gold)}
.menu__sig{margin-top:1.2rem;font-family:var(--body);font-weight:600;letter-spacing:.2em;font-size:.72rem;color:var(--muted)}
body.menu-open{overflow:hidden}
body.menu-open .nav__burger span:first-child{transform:translateY(4px) rotate(45deg)}
body.menu-open .nav__burger span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* HERO */
.hero{position:relative;min-height:100svh;min-height:100dvh;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:#000;isolation:isolate}
.hero__loops{position:absolute;inset:0;z-index:-2}
.hero__loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease)}
.hero__loop.is-on{opacity:1}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 35%,rgba(4,6,10,.14),rgba(4,6,10,.42) 70%,rgba(4,4,6,.76)),linear-gradient(180deg,rgba(4,6,10,.38),rgba(4,6,10,.18) 45%,rgba(4,4,6,.7))}
.letterbox::before,.letterbox::after{content:"";position:absolute;left:0;right:0;height:7vh;z-index:0;pointer-events:none}
.letterbox::before{top:0;background:linear-gradient(180deg,rgba(0,0,0,.8),transparent)}
.letterbox::after{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent)}
.hero__content{position:relative;z-index:1;padding:0 24px;max-width:900px}
.hero__brand{font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:.34em;color:var(--gold);margin-bottom:1.3rem;opacity:0;animation:fadeUp .9s var(--ease) .1s forwards}
.hero .eyebrow{display:block;margin-bottom:.7rem;opacity:0;animation:fadeUp .9s var(--ease) .3s forwards}
.hero__title{font-family:var(--display);font-weight:800;color:var(--ivory);font-size:clamp(3rem,11vw,7rem);line-height:.96;letter-spacing:-.01em;text-shadow:0 8px 50px rgba(0,0,0,.55);opacity:0;animation:fadeUp 1s var(--ease) .42s forwards}
.hero__title .dollar{color:var(--gold)}
.hero__sub{font-family:var(--body);font-weight:400;font-size:clamp(1.05rem,2.6vw,1.35rem);letter-spacing:.02em;color:var(--ivory-dim);margin-top:.9rem;opacity:0;animation:fadeUp .9s var(--ease) .6s forwards}
.hero .btn{margin-top:2.1rem;opacity:0;animation:fadeUp .9s var(--ease) .8s forwards}
.scrollcue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:1;width:1px;height:44px;display:block;opacity:0;animation:fadeIn 1s var(--ease) 1.3s forwards}
.scrollcue__line{position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--gold))}
.scrollcue::after{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:translateX(-50%) rotate(45deg)}

/* BOUTONS pilule */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);font-weight:600;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ivory);background:transparent;min-height:56px;padding:0 2.8rem;border:1px solid rgba(201,206,214,.38);border-radius:var(--radius-pill);transition:border-color var(--t),box-shadow var(--t),background-color var(--t),transform var(--t) var(--spring)}
.btn span{position:relative;z-index:3;display:block}
.btn:hover,.btn:focus-visible{background:rgba(201,206,214,.07);border-color:var(--gold-bright);transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,.4)}
.btn:active{transform:translateY(-1px) scale(.98)}

/* HOVER LIQUIDE — highlight translucide qui suit la souris */
.liquid{position:relative}
.liquid::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);background:radial-gradient(150px circle at var(--bx,50%) var(--by,50%),rgba(244,239,230,.18),transparent 60%);mix-blend-mode:screen;z-index:4}
.liquid:hover::after{opacity:1}

/* CHAPITRES */
.chapter{position:relative;max-width:var(--maxw);margin:0 auto;scroll-margin-top:70px;padding:clamp(80px,12vh,150px) var(--gut) clamp(70px,10vh,120px)}
.chapter--label{max-width:none;overflow:hidden;background:radial-gradient(130% 80% at 50% 0%,rgba(201,168,76,.05),transparent 55%),linear-gradient(180deg,var(--noir),var(--noir-700))}
.chapter--label>.rule,.chapter--label>.hud,.chapter--label>.bento,.chapter--label>.baseline{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.rule{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(24px,4vh,44px)}
.rule[data-numeral] span::before{content:attr(data-numeral);display:block;font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.34em;color:var(--gold);margin-bottom:.6rem}
.rule span{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,5vw,3.2rem);letter-spacing:-.01em;line-height:1;color:var(--ivory)}

/* II · CLIPS */
.clips{display:grid;grid-template-columns:1fr;gap:clamp(16px,1.8vw,24px)}
@media(min-width:760px){.clips{grid-template-columns:1fr 1fr}.clip--featured{grid-column:1/-1;aspect-ratio:21/9}.clip--center{grid-column:1/-1;width:calc(50% - 12px);margin-inline:auto;aspect-ratio:16/9}}
.clip{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:#0d0d0d;border:1px solid var(--hairline);transition:transform var(--t) var(--spring),box-shadow var(--t),border-color var(--t)}
.clip:hover{transform:translateY(-5px);box-shadow:0 18px 50px rgba(0,0,0,.5);border-color:rgba(201,206,214,.35)}
.clip__img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.clip:hover .clip__img{transform:scale(1.05)}
.clip__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.8))}
.clip__num{position:absolute;top:14px;left:16px;font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.16em;color:var(--gold)}
.clip__title{position:absolute;left:18px;bottom:16px;right:62px;font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--ivory);text-shadow:0 2px 14px rgba(0,0,0,.7)}
.clip__play{position:absolute;right:14px;bottom:14px;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-pill);border:1.5px solid rgba(242,240,234,.7);transition:background-color var(--t),border-color var(--t)}
.clip:hover .clip__play{background:var(--gold);border-color:var(--gold)}
.clip__play svg{width:14px;height:14px;fill:var(--ivory)}.clip:hover .clip__play svg{fill:#0A0A0A}
.clip--soon{pointer-events:none}
.clip--soon .clip__body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;background:#0e0e0e}
.clip--soon .clip__body em{font-family:var(--display);font-weight:700;font-style:normal;font-size:1.4rem;color:var(--ivory)}
.clip--soon .clip__body span{font-family:var(--body);font-weight:600;letter-spacing:.16em;font-size:.72rem;color:var(--muted);text-transform:uppercase}

/* III · ÉCOUTER — pochettes cliquables */
.covers{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vw,36px)}
.covers__rest{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);width:100%;max-width:860px}
@media(max-width:600px){.covers__rest{grid-template-columns:repeat(2,1fr)}}
.cover-card{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);border:1px solid var(--hairline);background:#0d0d0d;transition:transform var(--t) var(--spring),box-shadow var(--t)}
.cover-card--feat{width:min(400px,84vw)}
.cover-card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.cover-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.cover-card:hover img{transform:scale(1.06)}
.cover-card__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.72))}
.cover-card__title{position:absolute;left:16px;bottom:14px;font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,2vw,1.45rem);color:var(--ivory);text-shadow:0 2px 10px rgba(0,0,0,.7)}
.cover-card__hint{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-pill);background:rgba(10,10,10,.5);border:1px solid var(--hairline);opacity:0;transform:scale(.8);transition:opacity var(--t),transform var(--t) var(--spring)}
.cover-card:hover .cover-card__hint{opacity:1;transform:none}
.cover-card__hint svg{width:15px;height:15px;fill:var(--gold)}

/* MODAL */
.modal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s linear .4s}
.modal.is-open{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
.modal__backdrop{position:absolute;inset:0;background:rgba(4,4,6,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.modal__card{position:relative;z-index:1;width:min(400px,90vw);background:var(--noir-800);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:clamp(18px,4vw,26px);text-align:center;transform:translateY(28px) scale(.92);opacity:0;transition:transform .55s var(--spring),opacity .45s var(--ease)}
.modal.is-open .modal__card{transform:none;opacity:1}
.modal__close{position:absolute;top:8px;right:12px;width:40px;height:40px;font-size:1.7rem;line-height:1;color:var(--ivory-dim);border-radius:var(--radius-pill);transition:color var(--t),background-color var(--t)}
.modal__close:hover{color:var(--ivory);background:rgba(255,255,255,.06)}
.modal__cover{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);border:1px solid var(--hairline)}
.modal__kicker{margin-top:16px;font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;color:var(--muted)}
.modal__title{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,5vw,2.1rem);color:var(--ivory);margin:.15rem 0 1.1rem}
.modal__dsp{display:flex;flex-direction:column;gap:10px}
.modal-btn{display:flex;align-items:center;gap:.8rem;width:100%;min-height:52px;padding:0 1.2rem;border-radius:var(--radius-pill);border:1px solid var(--hairline);background:rgba(255,255,255,.02);color:var(--ivory);transition:transform var(--t) var(--spring),background-color var(--t),color var(--t),border-color var(--t);opacity:0;transform:translateY(10px)}
.modal.is-open .modal-btn{opacity:1;transform:none}
.modal.is-open .modal-btn:nth-child(1){transition-delay:.12s}
.modal.is-open .modal-btn:nth-child(2){transition-delay:.19s}
.modal.is-open .modal-btn:nth-child(3){transition-delay:.26s}
.modal-btn:hover{background:rgba(201,206,214,.1);color:var(--ivory);border-color:var(--gold-bright);transform:translateY(-2px)}
.modal-btn__icon{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center}
.modal-btn__icon svg{width:24px;height:24px;fill:currentColor}
.modal-btn__name{font-family:var(--body);font-weight:600;font-size:1rem}
.modal-btn__chev{margin-left:auto;opacity:.5}.modal-btn__chev svg{width:15px;height:15px;fill:currentColor}
.modal-btn--primary{justify-content:center;border-color:var(--gold-bright);background:rgba(201,206,214,.07);font-weight:700}
.modal__media{margin-bottom:16px}
.modal__embed{width:100%;height:152px;border:0;border-radius:var(--radius);display:block}
.modal__sub{display:flex;gap:8px;margin-top:18px}
.modal__sub-input{flex:1;min-width:0;min-height:48px;padding:0 1rem;background:rgba(255,255,255,.03);border:1px solid var(--hairline);border-radius:var(--radius-pill);color:var(--ivory);font-family:var(--body);font-size:.92rem;transition:border-color var(--t)}
.modal__sub-input::placeholder{color:var(--muted)}
.modal__sub-input:focus{outline:none;border-color:var(--gold-bright)}
.modal__sub-btn{flex:0 0 auto;width:48px;height:48px;border-radius:var(--radius-pill);border:1px solid var(--gold);background:transparent;color:var(--gold-bright);font-size:1.3rem;line-height:1;transition:background-color var(--t),border-color var(--t),transform var(--t) var(--spring)}
.modal__sub-btn:hover{background:rgba(201,206,214,.1);transform:translateY(-2px)}
.modal__submsg{min-height:1.1em;margin-top:.6rem;font-family:var(--body);font-size:.85rem;color:var(--gold-bright)}

/* IV · STUDIO */
.hud{display:flex;align-items:center;gap:1.2rem;justify-content:center;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.7rem;letter-spacing:.16em;color:var(--muted);margin-bottom:clamp(28px,4vh,48px)}
.hud__rec{color:#b22;display:flex;align-items:center;gap:.4rem}.hud__tc{color:var(--gold)}
.marquee{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;padding:clamp(8px,1.4vh,16px) 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;will-change:transform;padding:0 10px}
.marquee[data-dir=left] .marquee__track{animation:mqL 46s linear infinite}
.marquee[data-dir=right] .marquee__track{animation:mqR 52s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.m-tile{height:clamp(150px,19vw,260px);width:auto;flex:0 0 auto;object-fit:cover;border-radius:var(--radius);border:1px solid var(--hairline);background:#0d0d0d}
.m-tile--v{aspect-ratio:16/9}
.bento{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.6vw,22px);margin:clamp(28px,4vh,56px) auto;padding:0 var(--gut)}
@media(min-width:860px){.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}.bento__feature{grid-column:span 2;grid-row:span 2}.bento__text{grid-column:span 2}.bento__img{grid-column:span 1}}
.bento__feature{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);border:1px solid var(--hairline);background:#0d0d0d}
.bento__vid{width:100%;height:100%;object-fit:cover}
.bento__tag{position:absolute;left:14px;bottom:12px;font-family:ui-monospace,monospace;font-size:.66rem;letter-spacing:.18em;color:var(--gold);background:rgba(6,5,4,.5);padding:4px 10px;border-radius:var(--radius-pill);border:1px solid var(--hairline)}
.bento__text{display:flex;flex-direction:column;justify-content:center;padding:clamp(8px,2vw,24px)}
.bento__img{width:100%;height:100%;min-height:150px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--hairline)}
.manifesto{font-family:var(--body);font-weight:400;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.5;color:var(--ivory);margin-bottom:1.1rem}
.label-split__name{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5vw,3.2rem);line-height:.95;color:var(--gold)}
.label-split__sub{font-family:var(--body);font-weight:500;font-size:1rem;color:var(--ivory-dim);margin-top:.3rem}
.baseline{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.6vw,1.7rem);text-align:center;color:var(--gold-bright);margin-top:clamp(30px,4vh,52px)}

/* FOOTER */
.foot{border-top:1px solid var(--hairline);padding:38px var(--gut);text-align:center;display:flex;flex-direction:column;gap:.6rem;align-items:center}
.foot__sig{font-family:var(--body);font-weight:600;letter-spacing:.2em;font-size:.74rem;color:var(--muted)}
.foot__mail{font-family:var(--body);font-size:.85rem;color:var(--ivory-dim);transition:color var(--t)}
.foot__mail:hover{color:var(--gold-bright)}

/* IV · #VGB — abonnement + réseaux */
.chapter--vgb{text-align:center;background:radial-gradient(120% 80% at 50% 0%,rgba(201,206,214,.07),transparent 55%)}
.vgb__title{font-family:var(--display);font-weight:800;font-size:clamp(2.8rem,9vw,5.5rem);line-height:.95;letter-spacing:-.01em;color:var(--ivory)}
.vgb__sub{font-family:var(--body);font-size:1.05rem;color:var(--ivory-dim);max-width:44ch;margin:.7rem auto 2rem}
.sub{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:520px;margin:0 auto}
.sub__input{flex:1 1 240px;min-height:56px;padding:0 1.5rem;background:rgba(255,255,255,.03);border:1px solid var(--hairline);border-radius:var(--radius-pill);color:var(--ivory);font-family:var(--body);font-size:1rem;transition:border-color var(--t),background-color var(--t)}
.sub__input::placeholder{color:var(--muted)}
.sub__input:focus{outline:none;border-color:var(--gold-bright);background:rgba(255,255,255,.05)}
.sub .btn{flex:0 0 auto}
.sub__msg{min-height:1.3em;margin-top:1rem;font-family:var(--body);font-size:.95rem;color:var(--gold-bright)}
.social{display:flex;gap:14px;justify-content:center;margin-top:2.4rem}
.social__link{width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--hairline);border-radius:var(--radius-pill);color:var(--ivory-dim);transition:color var(--t),border-color var(--t),transform var(--t) var(--spring)}
.social__link:hover{color:var(--gold-bright);border-color:var(--gold-bright);transform:translateY(-3px)}
.social__link svg{width:22px;height:22px;fill:currentColor}

/* REVEAL + KEYFRAMES */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes mqL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

@media(max-width:680px){.nav__links{display:none}.nav__burger{display:flex}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}.hero__brand,.hero .eyebrow,.hero__title,.hero__sub,.hero .btn,.scrollcue{opacity:1;animation:none}
  .marquee__track{animation:none}
}

/* ============================================================
   PREMIUM PASS — redesign-existing-projects + high-end-visual-design + gpt-taste
   Surcouche : pousse le rendu d'un cran, ne casse pas le funnel.
   ============================================================ */
:root{ --ease-luxe:cubic-bezier(.32,.72,0,1); --shadow-cool:0 26px 64px rgba(120,134,156,.17),0 8px 20px rgba(120,134,156,.10); }

/* Rythme : les sections respirent comme des chapitres */
.chapter{padding-top:clamp(96px,15vh,200px);padding-bottom:clamp(84px,12vh,150px)}

/* Eyebrow → micro-badge "label-backed" */
.eyebrow{display:inline-block;padding:7px 16px;border:1px solid var(--hairline);border-radius:var(--radius-pill);background:rgba(201,206,214,.04);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:.7rem;letter-spacing:.34em}

/* Cartes = hardware machiné : highlight interne + ombre teintée froide + press physique */
.cover-card,.clip{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cover-card:hover,.clip:hover{box-shadow:var(--shadow-cool),inset 0 1px 0 rgba(255,255,255,.08)}
.cover-card:active,.clip:active{transform:translateY(-2px) scale(.985)}
.modal__card{box-shadow:var(--shadow-cool),inset 0 1px 0 rgba(255,255,255,.07)}

/* Easing cinématique sur les transitions clés */
.btn,.cover-card,.clip,.modal__card,.modal-btn,.social__link,.nav__links a,.tile{transition-timing-function:var(--ease-luxe)}

/* Reveal premium : fade-up + blur plus marqué */
.reveal{transform:translateY(34px);filter:blur(8px)}
.reveal.is-in{filter:blur(0)}

/* CTA héro : icône nichée (button-in-button) */
.btn__icon{position:relative;z-index:3;display:grid;place-items:center;width:34px;height:34px;margin-left:.9rem;margin-right:-1.2rem;border-radius:var(--radius-pill);background:rgba(201,206,214,.1);border:1px solid var(--hairline);transition:transform var(--t) var(--ease-luxe),background-color var(--t)}
.btn__icon svg{width:12px;height:12px;fill:var(--gold-bright)}
.btn:hover .btn__icon{transform:translateX(3px) scale(1.06);background:rgba(201,206,214,.18)}

/* Stagger cinématique des grilles (cascade sur le reveal existant — zéro risque funnel) */
.clips .clip:nth-child(2){transition-delay:.08s}
.clips .clip:nth-child(3){transition-delay:.16s}
.clips .clip:nth-child(4){transition-delay:.16s}
.covers__rest .cover-card:nth-child(2){transition-delay:.07s}
.covers__rest .cover-card:nth-child(3){transition-delay:.14s}
.covers__rest .cover-card:nth-child(4){transition-delay:.07s}
.covers__rest .cover-card:nth-child(5){transition-delay:.14s}
.covers__rest .cover-card:nth-child(6){transition-delay:.21s}

/* ============================================================
   ITERATION — titre 3D réactif · asymétrie · profondeur · i18n · consentement · fini
   ============================================================ */
.hero{background:var(--noir-900)}                 /* off-black, plus de #000 pur */
.hero__title,.rule span,.vgb__title,.modal__title{text-wrap:balance}  /* anti-orphelins */

/* Skip-link a11y */
.skip-link{position:absolute;left:-9999px;top:0;z-index:500;background:var(--gold);color:#0A0A0A;padding:10px 18px;border-bottom-right-radius:14px;font-family:var(--body);font-weight:700}
.skip-link:focus{left:0}

/* TITRE HÉRO — chrome réactif au curseur + 3D négatif (tilt sur le wrap, gradient sur le titre) */
.hero__content{perspective:1000px}
.hero__title-wrap{display:inline-block;transform-style:preserve-3d;transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .3s var(--ease-luxe)}
.hero__title{color:transparent;-webkit-background-clip:text;background-clip:text;text-shadow:none;
  background-image:radial-gradient(58% 130% at var(--tx,50%) var(--ty,38%), #ffffff 0%, #ECEFF3 16%, #C9CED6 38%, #717986 70%, #23272e 100%)}
@media(prefers-reduced-motion:reduce){.hero__title-wrap{transform:none!important;transition:none}}

/* Profondeur ambiante sur sections internes */
#clips,#ecouter{position:relative}
#clips::before,#ecouter::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(72% 46% at 50% 0%,rgba(201,206,214,.05),transparent 62%)}

/* ÉCOUTER — split éditorial asymétrique */
.ecouter-split{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,72px)}
@media(min-width:900px){.ecouter-split{grid-template-columns:minmax(320px,420px) 1fr;align-items:start}}
.rule--left{align-items:flex-start;text-align:left}
.lead--left{text-align:left;margin:0 0 1.4rem}
.ecouter-side .cover-card--feat{width:100%;margin-top:22px}
.ecouter-catalog{padding-top:6px}

/* Skeletons (loading) */
.skeleton{position:relative;overflow:hidden;background:#141414}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transform:translateX(-100%);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.modal__skel{width:100%;height:152px;border-radius:var(--radius)}

/* Toggle langue */
.nav__lang{margin-left:8px;font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.08em;color:var(--ivory-dim);padding:8px 12px;border:1px solid var(--hairline);border-radius:var(--radius-pill);transition:color var(--t),border-color var(--t),transform var(--t) var(--spring)}
.nav__lang:hover{color:var(--gold-bright);border-color:var(--gold-bright);transform:translateY(-2px)}

/* Bannière consentement RGPD */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:300;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;padding:14px clamp(16px,4vw,40px);background:rgba(8,8,9,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--hairline);transform:translateY(120%);transition:transform .5s var(--ease-luxe)}
.consent.is-on{transform:none}
.consent__txt{font-family:var(--body);font-size:.84rem;color:var(--ivory-dim);max-width:64ch;line-height:1.5}
.consent__txt a{color:var(--gold-bright);text-decoration:underline}
.consent__btns{display:flex;gap:8px;flex-shrink:0}
.consent button{padding:9px 18px;border-radius:var(--radius-pill);font-family:var(--body);font-weight:600;font-size:.84rem;transition:transform var(--t) var(--spring),background-color var(--t)}
.consent button:active{transform:scale(.97)}
.consent__accept{background:var(--gold);color:#0A0A0A}
.consent__refuse{background:transparent;border:1px solid var(--hairline);color:var(--ivory-dim)}

/* Footer legal */
.foot__legal{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.foot__legal a{font-family:var(--body);font-size:.78rem;color:var(--muted);transition:color var(--t)}
.foot__legal a:hover{color:var(--gold-bright)}

/* ============================================================
   CHROME GLOBAL — titres/textes/boutons façon "PAY CASH"
   (héro = réactif curseur ; le reste = métallique statique, perf-safe ;
    les boutons gardent leur halo liquide au survol)
   ============================================================ */
/* Grands titres : ramp complète (avec arêtes sombres = 3D négatif) */
.rule span,.vgb__title,.hero__brand,.modal__title,.label-split__name{
  color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:radial-gradient(140% 210% at 50% 36%, #ffffff 0%, #ECEFF3 14%, #C9CED6 38%, #717986 70%, #2a2e35 100%)}
/* Textes/labels/boutons : ramp claire lisible (argent brossé) */
.btn span,.nav__brand,.nav__links a,.nav__lang,.menu a,.menu__sig,.eyebrow,.kicker,
.lead,.hero__sub,.vgb__sub,.cover-card__title,.clip__title,.tile__title,.modal-btn__name,
.foot__sig,.foot__mail,.foot__legal a,.baseline,.scrollcue + *,.modal__kicker{
  color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:radial-gradient(180% 280% at 50% 34%, #ffffff 0%, #E6E9EE 32%, #C2C7CF 62%, #9aa0a8 100%)}
/* États : l'actif nav reste lisible (pastille), pas via la couleur du texte */
.nav__links a.is-active{background:rgba(201,206,214,.16)}

/* ============================================================
   BANNIÈRE CONSENTEMENT — finition pro
   ============================================================ */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:300;display:flex;align-items:center;gap:24px;
  padding:16px clamp(18px,4vw,44px);background:rgba(9,9,10,.94);
  -webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);
  border-top:1px solid var(--hairline);box-shadow:0 -20px 50px rgba(0,0,0,.4);
  transform:translateY(120%);transition:transform .55s var(--ease-luxe)}
.consent.is-on{transform:none}
.consent__txt{flex:1;min-width:0;font-family:var(--body);font-size:.85rem;line-height:1.55;color:var(--ivory-dim);max-width:74ch;
  -webkit-text-fill-color:initial;background:none}
.consent__txt a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:2px}
.consent__btns{flex-shrink:0;display:flex;gap:10px}
.consent button{padding:11px 22px;border-radius:var(--radius-pill);font-family:var(--body);font-weight:600;font-size:.85rem;
  transition:transform var(--t) var(--spring),background-color var(--t),border-color var(--t)}
.consent button:active{transform:scale(.97)}
.consent__accept{background:var(--gold);color:#0A0A0A}
.consent__accept:hover{background:var(--gold-bright)}
.consent__refuse{background:transparent;border:1px solid var(--hairline);color:var(--ivory-dim)}
.consent__refuse:hover{border-color:var(--gold-bright);color:var(--ivory)}
@media(max-width:680px){.consent{flex-direction:column;align-items:stretch;gap:14px}.consent__btns{justify-content:flex-end}}

/* ============================================================
   FIX nav actif (pastille ::before pour ne pas écraser le chrome) + ROUE catalogue
   ============================================================ */
.nav__links a.is-active{background-color:transparent;background-image:radial-gradient(180% 280% at 50% 34%,#ffffff,#E6E9EE 32%,#C2C7CF 62%,#9aa0a8 100%)}
.nav__links a.is-active::before{content:"";position:absolute;inset:0;border-radius:var(--radius-pill);background:rgba(201,206,214,.14);z-index:-1}

/* ÉCOUTER — roue qui fait tourner les sons */
.wheel{position:relative;width:min(460px,86vw);aspect-ratio:1;margin:6px auto 0}
.wheel__spin{position:absolute;inset:0;animation:wheelSpin 42s linear infinite}
.wheel:hover .wheel__spin,.wheel:hover .wheel__item .cover-card{animation-play-state:paused}
.wheel__item{position:absolute;transform:translate(-50%,-50%);width:clamp(94px,22%,132px)}
.wheel__item .cover-card{width:100%;animation:wheelSpin 42s linear infinite reverse}
.wheel__item .cover-card__title{left:9px;bottom:7px;font-size:.78rem}
.wheel__item .cover-card__hint{width:28px;height:28px;top:8px;right:8px}
.wheel__center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:1px solid var(--hairline);background:radial-gradient(circle,rgba(201,206,214,.06),transparent 70%);pointer-events:none}
.wheel__center span{font-family:var(--display);font-weight:800;letter-spacing:.12em;font-size:clamp(.9rem,2.4vw,1.3rem);
  color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-image:radial-gradient(140% 210% at 50% 36%,#fff,#C9CED6 40%,#2a2e35 100%)}
@keyframes wheelSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.wheel__spin,.wheel__item .cover-card{animation:none}}
@media(min-width:900px){.ecouter-split{grid-template-columns:minmax(300px,400px) 1fr}.ecouter-catalog{display:flex;align-items:center;min-height:100%}}