/* ═══════════════════════════════════════════════════════════════════════════
   RIFT — design system du site public (rift.nfteam.ovh)
   Mono-thème sombre assumé : arène néon, nuit, métal sombre, failles lumineuses.
   Contrat complet : ../DESIGN.md. Préfixe d'état : .is-* ; JS : assets/rift.js.
   Ordre : 1 jetons · 2 base · 3 mise en page · 4 composants · 5 portail/faille
           · 6 révélations · 7 utilitaires · 8 transitions de page · 9 reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1. JETONS ───────────────────────── */
:root{
  color-scheme:dark;
  /* fonds (du plus profond au plus clair) */
  --void:#04050b; --void-2:#070912; --deep:#0a0d16; --metal:#0f1422; --metal-2:#151b2d; --metal-3:#1d2540;
  /* lignes */
  --line:rgba(132,156,220,.16); --line-2:rgba(132,156,220,.28); --line-cyan:rgba(34,211,255,.42); --line-pink:rgba(255,45,111,.45);
  /* texte (AA sur --void ET sur --metal) */
  --text:#e9eef7; --text-2:#aab3cf; --text-3:#8089ab;
  /* néons — cyan = portail d'entrée, magenta/rose = portail de sortie */
  --cyan:#22d3ff; --cyan-2:#3ecbff; --cyan-deep:#0b7fa3;
  --mag:#f13ff0; --pink:#ff2d6f; --pink-deep:#7a0f33;
  --white-hot:#f4fbff;
  /* sémantique */
  --good:#3ee6a0; --warn:#ffb454; --bad:#ff5a7a;
  --team1:#4fa0ff; --team2:#ff8a3c;
  /* dégradés signature */
  --grad-rift:linear-gradient(100deg,var(--cyan) 0%,#8f7bff 48%,var(--mag) 74%,var(--pink) 100%);
  --grad-rift-v:linear-gradient(180deg,#fff 8%,var(--cyan) 52%,var(--mag) 112%);
  --grad-panel:linear-gradient(180deg,rgba(17,23,40,.82),rgba(8,11,21,.86));
  /* ombres néon */
  --glow-cyan:0 0 0 1px rgba(34,211,255,.35),0 0 24px rgba(34,211,255,.28),0 0 64px rgba(34,211,255,.12);
  --glow-pink:0 0 0 1px rgba(255,45,111,.4),0 0 26px rgba(255,45,111,.32),0 0 70px rgba(241,63,240,.16);
  --shadow-1:0 10px 30px rgba(0,0,0,.45);
  --shadow-2:0 30px 80px rgba(0,0,0,.6);
  /* typo */
  --f-disp:'Chakra Petch',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Sora',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-hero:clamp(76px,17vw,232px);
  --fs-1:clamp(40px,6.4vw,84px);
  --fs-2:clamp(31px,4.4vw,56px);
  --fs-3:clamp(21px,2.1vw,28px);
  --fs-4:clamp(17px,1.4vw,19px);
  --fs-lead:clamp(16px,1.5vw,19px);
  --fs-body:16px; --fs-sm:14px; --fs-micro:12px;
  --track-micro:.24em; --track-disp:.04em;
  /* espacements (base 4) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:140px;
  --gutter:16px; --wrap:1200px; --wrap-narrow:760px; --nav-h:64px;
  --section-y:clamp(64px,9vw,128px);
  /* rayons « coupés » façon HUD : coin haut-gauche + bas-droit biseautés */
  --cut:12px; --cut-sm:7px; --cut-lg:22px;
  /* NB : un var() dans un jeton est résolu sur :root → pour un biseau à taille locale, poser --cut sur l'élément et utiliser la classe .bevel */
  --radius:3px;
  /* mouvement */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --ease-snap:cubic-bezier(.3,1.5,.5,1);
  --t-fast:.16s; --t-med:.36s; --t-slow:.8s;
  --z-nav:50; --z-sheet:60; --z-cursor:90; --z-gate:100;
}
@media (min-width:720px){ :root{ --gutter:32px; --nav-h:72px } }

/* ───────────────────────── 2. BASE ───────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--void);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  min-height:100vh;min-height:100dvh;background:var(--void);color:var(--text);
  font-family:var(--f-body);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;
  background-image:
    radial-gradient(900px 520px at 88% -8%,rgba(241,63,240,.10),transparent 62%),
    radial-gradient(1000px 620px at 4% 2%,rgba(34,211,255,.09),transparent 58%);
  background-repeat:no-repeat;
}
/* grain + vignette fixes (décor pur) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-color:rgba(34,211,255,.5);text-underline-offset:3px}
a:hover{text-decoration-color:var(--cyan)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:rgba(255,45,111,.38);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:700;line-height:1.02;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3);line-height:1.15} h4{font-size:var(--fs-4);line-height:1.2}
p{text-wrap:pretty}
strong,b{font-weight:600;color:var(--text)}
code,kbd,samp{font-family:var(--f-mono);font-size:.92em}
hr{border:0;height:1px;background:var(--line)}
main{position:relative;z-index:2;display:block;overflow-x:clip}
[hidden]{display:none!important}

/* ───────────────────────── 3. MISE EN PAGE ───────────────────────── */
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:calc(var(--wrap-narrow) + 2*var(--gutter))}
.wrap--wide{max-width:calc(1440px + 2*var(--gutter))}
.section{position:relative;padding-block:var(--section-y)}
.section--tight{padding-block:calc(var(--section-y)*.55)}
.section--first{padding-top:calc(var(--nav-h) + clamp(40px,7vw,96px))}
.section-head{max-width:720px;margin-bottom:clamp(32px,5vw,56px);display:grid;gap:var(--s-4)}
.section-head--center{margin-inline:auto;text-align:center;justify-items:center}
.section-head h2,.section-head h1{margin-top:2px}
.lead{font-size:var(--fs-lead);color:var(--text-2);max-width:62ch;line-height:1.65}
.grid{display:grid;gap:var(--s-5)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.grid--tiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:var(--s-3)}
.split{display:grid;gap:clamp(28px,5vw,72px);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1.05fr 1fr}
  .split--rev>:first-child{order:2}
  .split--media-wide{grid-template-columns:1.35fr 1fr}
}
.stack{display:grid;gap:var(--s-4)} .stack--lg{gap:var(--s-6)} .stack--sm{gap:var(--s-2)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.cluster--center{justify-content:center}
.spread{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3)}

/* ───────────────────────── 4. COMPOSANTS ───────────────────────── */

/* 4.1 Accessibilité de base */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 18px;background:var(--cyan);color:#021018;font-family:var(--f-disp);font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));transition:top var(--t-fast)}
.skip-link:focus{top:12px}

/* 4.2 Kicker / sur-titre (repris du HUD : barre verticale + capitales espacées) */
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-disp);font-weight:600;font-size:var(--fs-micro);letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--cyan)}
.kicker::before{content:"";width:3px;height:13px;background:currentColor;box-shadow:0 0 10px currentColor}
.kicker--pink{color:var(--pink)} .kicker--muted{color:var(--text-3)}
.kicker--line::after{content:"";width:40px;height:1px;background:linear-gradient(90deg,currentColor,transparent)}
.micro{font-family:var(--f-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}

/* 4.3 Titres signature */
.display{font-family:var(--f-disp);font-weight:700;font-size:var(--fs-hero);line-height:.82;letter-spacing:.02em}
.gradient-text{background:var(--grad-rift);-webkit-background-clip:text;background-clip:text;color:transparent}
.gradient-text--v{background:var(--grad-rift-v);-webkit-background-clip:text;background-clip:text;color:transparent}
.glow-text{text-shadow:0 0 18px rgba(34,211,255,.45),0 0 48px rgba(241,63,240,.25)}
/* glitch : <h1 class="glitch" data-text="RIFT">RIFT</h1> — tranches décalées, rares (toutes les ~6 s) */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0;-webkit-background-clip:text;background-clip:text}
.glitch::before{color:var(--cyan);text-shadow:none;-webkit-text-fill-color:var(--cyan);animation:rift-glitch-a 6.5s steps(1) infinite}
.glitch::after{color:var(--pink);-webkit-text-fill-color:var(--pink);animation:rift-glitch-b 6.5s steps(1) infinite}
.glitch:hover::before,.glitch.is-glitching::before{animation-duration:.9s}
.glitch:hover::after,.glitch.is-glitching::after{animation-duration:.9s}
@keyframes rift-glitch-a{0%,91%,100%{opacity:0;transform:none}
  92%{opacity:.85;transform:translate(-4px,1px);clip-path:inset(12% 0 64% 0)}
  94%{opacity:.85;transform:translate(3px,-1px);clip-path:inset(58% 0 18% 0)}
  96%{opacity:.7;transform:translate(-2px,0);clip-path:inset(32% 0 44% 0)}}
@keyframes rift-glitch-b{0%,92%,100%{opacity:0;transform:none}
  93%{opacity:.8;transform:translate(4px,-1px);clip-path:inset(70% 0 6% 0)}
  95%{opacity:.8;transform:translate(-3px,1px);clip-path:inset(22% 0 60% 0)}
  97%{opacity:.6;transform:translate(2px,0);clip-path:inset(46% 0 30% 0)}}
/* texte en cours de décodage (rift.js : data-decode) */
.is-decoding{font-variant-ligatures:none}
.is-decoding .dc{color:var(--cyan);opacity:.75}

/* 4.4 Logomarque : anneau cyan + entaille rose (cf. media/logo.svg) */
.logomark{width:30px;height:auto;flex:none;filter:drop-shadow(0 0 8px rgba(34,211,255,.35))}

/* 4.5 Navigation */
.nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);height:var(--nav-h);transition:background var(--t-med),border-color var(--t-med),transform var(--t-med) var(--ease-out)}
.nav::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,11,.72),rgba(4,5,11,0));pointer-events:none;transition:opacity var(--t-med)}
.nav.is-scrolled{background:rgba(6,8,16,.78);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--line)}
.nav.is-scrolled::before{opacity:0}
.nav.is-hidden{transform:translateY(-100%)}
.nav__inner{position:relative;height:100%;display:flex;align-items:center;gap:var(--s-5)}
.nav__brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;font-family:var(--f-disp);font-weight:700;font-size:21px;letter-spacing:.24em}
.nav__brand:hover .logomark{filter:drop-shadow(0 0 12px rgba(255,45,111,.6))}
.nav__links{display:none;margin-left:auto;gap:4px;list-style:none;padding:0}
.nav__links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-family:var(--f-disp);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);text-decoration:none;transition:color var(--t-fast)}
.nav__links a::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease-out)}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--text)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
.nav__cta{margin-left:auto}
.nav__toggle{margin-left:var(--s-2);display:inline-grid;place-items:center;width:44px;height:44px;background:rgba(15,20,34,.6);border:1px solid var(--line-2);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{display:block;width:18px;height:2px;background:var(--text);transition:transform var(--t-med) var(--ease-out),background var(--t-fast)}
.nav__toggle span{position:relative}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0}
.nav__toggle span::before{top:-6px} .nav__toggle span::after{top:6px}
.nav__toggle[aria-expanded=true] span{background:transparent}
.nav__toggle[aria-expanded=true] span::before{transform:translateY(6px) rotate(45deg);background:var(--cyan)}
.nav__toggle[aria-expanded=true] span::after{transform:translateY(-6px) rotate(-45deg);background:var(--pink)}
.nav__progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad-rift);transform-origin:left;transform:scaleX(var(--progress,0));opacity:.9;pointer-events:none}
@media (min-width:980px){
  .nav__links{display:flex}
  .nav__cta{margin-left:var(--s-3)}
  .nav__toggle{display:none}
}
/* tiroir mobile : s'ouvre comme un portail depuis le bouton */
.nav__sheet{position:fixed;inset:0;z-index:var(--z-sheet);display:grid;grid-template-columns:minmax(0,1fr);align-content:center;overflow-y:auto;gap:var(--s-2);padding:calc(var(--nav-h) + 16px) var(--gutter) 32px;
  background:radial-gradient(120% 80% at 100% 0%,rgba(241,63,240,.16),transparent 60%),radial-gradient(120% 80% at 0% 100%,rgba(34,211,255,.14),transparent 60%),var(--void);
  clip-path:circle(0 at calc(100% - 38px) 36px);visibility:hidden;transition:clip-path .6s var(--ease-io),visibility 0s .6s}
.nav__sheet.is-open{clip-path:circle(150vmax at calc(100% - 38px) 36px);visibility:visible;transition:clip-path .6s var(--ease-io),visibility 0s}
.nav__sheet a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 4px;border-bottom:1px solid var(--line);font-family:var(--f-disp);font-weight:700;font-size:clamp(26px,8vw,40px);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .5s var(--ease-out),color var(--t-fast)}
.nav__sheet a::after{content:"→";font-size:.6em;color:var(--cyan)}
.nav__sheet a:hover,.nav__sheet a[aria-current]{color:var(--cyan)}
.nav__sheet.is-open a{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0)*.05s)}
.nav__sheet .btn{margin-top:var(--s-5);justify-content:center;white-space:nowrap;text-align:center;font-size:17px;letter-spacing:.12em;border-bottom:0}
.nav__sheet .btn::after{display:none}
.nav-open{overflow:hidden}
.nav-open .nav{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav-open .nav{z-index:calc(var(--z-sheet) + 1)}

/* 4.6 Boutons */
.btn{--b-bg:rgba(15,20,34,.7);--b-fg:var(--text);--b-line:var(--line-2);--b-glow:transparent;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;
  font-family:var(--f-disp);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;line-height:1;text-decoration:none;white-space:nowrap;
  color:var(--b-fg);background:var(--b-bg);border:0;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));--cut:11px;
  transition:transform var(--t-fast) var(--ease-out),filter var(--t-med),color var(--t-fast)}
/* liseré biseauté (suit aussi les diagonales) */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--b-line);pointer-events:none;
  clip-path:polygon(evenodd,0 var(--cut),var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut),1px calc(var(--cut) + .4px),1px calc(100% - 1px),calc(100% - var(--cut) - .4px) calc(100% - 1px),calc(100% - 1px) calc(100% - var(--cut) - .4px),calc(100% - 1px) 1px,calc(var(--cut) + .4px) 1px,1px calc(var(--cut) + .4px))}
/* balayage lumineux au survol */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease-out)}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline-offset:4px}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{--b-bg:linear-gradient(100deg,var(--pink),#f0368f 55%,var(--mag));--b-fg:#0a0210;--b-line:rgba(255,255,255,.35);filter:drop-shadow(0 6px 22px rgba(255,45,111,.35))}
.btn--primary:hover{filter:drop-shadow(0 10px 30px rgba(255,45,111,.55)) drop-shadow(0 0 18px rgba(241,63,240,.4))}
.btn--secondary{--b-bg:linear-gradient(180deg,rgba(34,211,255,.10),rgba(34,211,255,.03));--b-line:var(--line-cyan);--b-fg:var(--text)}
.btn--secondary:hover{--b-line:var(--cyan);color:#fff;filter:drop-shadow(0 0 16px rgba(34,211,255,.35))}
.btn--ghost{--b-bg:transparent;--b-line:transparent;padding:0 10px;color:var(--text-2)}
.btn--ghost:hover{color:var(--cyan);transform:none}
.btn--ghost::after{display:none}
.btn--sm{min-height:44px;padding:0 16px;font-size:12.5px;--cut:8px}
.btn--lg{min-height:60px;padding:0 34px;font-size:16px;--cut:14px}
.btn--block{width:100%}
.btn[aria-disabled=true],.btn:disabled{opacity:.45;pointer-events:none}
.arrow-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--f-disp);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--cyan);text-decoration:none}
.arrow-link::after{content:"→";transition:transform var(--t-med) var(--ease-out)}
.arrow-link:hover::after{transform:translateX(5px)}

/* 4.7 Panneau « verre fumé » biseauté */
.panel{--cut:16px;position:relative;isolation:isolate;padding:clamp(18px,2.4vw,28px);background:var(--grad-panel);clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(135deg,rgba(34,211,255,.55),rgba(132,156,220,.16) 28%,rgba(132,156,220,.12) 70%,rgba(255,45,111,.5));
  clip-path:polygon(evenodd,0 var(--cut),var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut),1px calc(var(--cut) + .4px),1px calc(100% - 1px),calc(100% - var(--cut) - .4px) calc(100% - 1px),calc(100% - 1px) calc(100% - var(--cut) - .4px),calc(100% - 1px) 1px,calc(var(--cut) + .4px) 1px,1px calc(var(--cut) + .4px))}
/* projecteur qui suit le pointeur (rift.js pose --mx/--my sur [data-spot]) */
.panel::after,.card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity var(--t-med);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(34,211,255,.10),transparent 60%)}
[data-spot]:hover::after{opacity:1}
.panel--solid{background:linear-gradient(180deg,var(--metal),var(--deep));-webkit-backdrop-filter:none;backdrop-filter:none}
.panel--pink::before{background:linear-gradient(135deg,rgba(255,45,111,.75),rgba(132,156,220,.14) 35%,rgba(241,63,240,.5))}
.panel--flat::before{background:var(--line)}
.panel--sm{--cut:10px;padding:16px}
.panel--hud{background-image:
  linear-gradient(var(--cyan),var(--cyan)),linear-gradient(var(--cyan),var(--cyan)),
  linear-gradient(var(--pink),var(--pink)),linear-gradient(var(--pink),var(--pink)),var(--grad-panel);
  background-size:14px 2px,2px 14px,14px 2px,2px 14px,auto;
  background-position:calc(100% - 8px) 8px,calc(100% - 8px) 8px,8px calc(100% - 8px),8px calc(100% - 22px),0 0;
  background-repeat:no-repeat}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4);flex-wrap:wrap}
.panel__title{font-family:var(--f-disp);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;color:var(--text)}
.panel__title::before{content:"";width:3px;height:13px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.panel--pink .panel__title::before{background:var(--pink);box-shadow:0 0 10px var(--pink)}

/* 4.8 Tags, puces d'état */
.tag{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;white-space:nowrap;
  color:var(--text-2);background:rgba(132,156,220,.08);border:1px solid var(--line-2);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.tag--cyan{color:var(--cyan);background:rgba(34,211,255,.08);border-color:rgba(34,211,255,.35)}
.tag--pink{color:#ff7aa3;background:rgba(255,45,111,.09);border-color:rgba(255,45,111,.4)}
.tag--good{color:var(--good);background:rgba(62,230,160,.08);border-color:rgba(62,230,160,.35)}
.tag--warn{color:var(--warn);background:rgba(255,180,84,.08);border-color:rgba(255,180,84,.35)}
.tag--solid{color:#03131a;background:var(--cyan);border-color:var(--cyan)}
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--text-2)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-3);flex:none}
.status--live::before{background:var(--good);box-shadow:0 0 0 0 rgba(62,230,160,.6);animation:rift-ping 1.8s var(--ease-out) infinite}
.status--idle::before{background:var(--warn)}
.status--off::before{background:var(--text-3)}
@keyframes rift-ping{0%{box-shadow:0 0 0 0 rgba(62,230,160,.55)}80%,100%{box-shadow:0 0 0 9px rgba(62,230,160,0)}}

/* 4.9 Tuiles de stat */
.stat{--cut:10px;position:relative;isolation:isolate;display:grid;gap:6px;align-content:start;padding:16px 16px 14px;background:linear-gradient(180deg,rgba(21,27,45,.85),rgba(10,13,22,.85));clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.stat::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--line);
  clip-path:polygon(evenodd,0 var(--cut),var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut),1px calc(var(--cut) + .4px),1px calc(100% - 1px),calc(100% - var(--cut) - .4px) calc(100% - 1px),calc(100% - 1px) calc(100% - var(--cut) - .4px),calc(100% - 1px) 1px,calc(var(--cut) + .4px) 1px,1px calc(var(--cut) + .4px))}
.stat::after{content:"";position:absolute;left:0;top:var(--cut);bottom:var(--cut);width:2px;background:var(--cyan);box-shadow:0 0 12px var(--cyan);opacity:.8}
.stat--pink::after{background:var(--pink);box-shadow:0 0 12px var(--pink)}
.stat__value{font-family:var(--f-disp);font-weight:700;font-size:clamp(28px,3.4vw,40px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.stat__label{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.stat__note{font-size:12.5px;color:var(--text-2)}
.stat--hero .stat__value{font-size:clamp(40px,5.6vw,68px)}

/* 4.10 Barre de progression (XP, remplissage serveur) */
.meter{position:relative;height:6px;background:rgba(132,156,220,.12);overflow:hidden;clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%)}
.meter__fill{position:absolute;inset:0;background:var(--grad-rift);transform-origin:left;transform:scaleX(var(--v,0));transition:transform 1.1s var(--ease-out);box-shadow:0 0 12px rgba(34,211,255,.4)}
.meter--lg{height:10px}

/* 4.11 Tableaux */
.table-wrap{--cut:14px;position:relative;isolation:isolate;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--grad-panel);clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));scrollbar-width:thin;scrollbar-color:var(--metal-3) transparent}
.table-wrap::before{content:"";position:sticky;left:0;display:block;height:2px;background:var(--grad-rift);opacity:.7}
.table{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums}
.table caption{text-align:left;padding:14px 16px 0;color:var(--text-3);font-family:var(--f-mono);font-size:12px}
.table th{position:sticky;top:0;padding:12px 16px;text-align:left;font-family:var(--f-disp);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);background:rgba(10,13,22,.96);border-bottom:1px solid var(--line-2);white-space:nowrap}
.table td{padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.table tbody tr{transition:background var(--t-fast)}
.table tbody tr:hover{background:rgba(34,211,255,.05)}
.table tbody tr:last-child td{border-bottom:0}
.table .num{text-align:right;font-family:var(--f-mono)}
.table th.num{text-align:right}
.table .rank{font-family:var(--f-mono);color:var(--text-3);width:1%}
.table .strong{font-family:var(--f-disp);font-weight:700;letter-spacing:.03em;font-size:15.5px}
.table .accent{color:var(--cyan);font-weight:700}
.table a{text-decoration:none}
.table a:hover{color:var(--cyan)}
/* ligne entièrement cliquable : <tr data-href="/partie.html?id=…"> (rift.js gère clic + Entrée) */
.table tr[data-href]{cursor:pointer}
.table tr[data-href]:hover td:first-child{box-shadow:inset 3px 0 0 var(--cyan)}
.table tr[data-href]:hover td.strong,.table tr[data-href]:hover td.strong a{color:var(--cyan)}
.table tr[data-href]:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.table tr.is-hit{background:rgba(255,45,111,.09)}
.table tr.is-hit td:first-child{box-shadow:inset 3px 0 0 var(--pink)}
.res-win{color:var(--good);font-family:var(--f-disp);font-weight:700;letter-spacing:.1em}
.res-loss{color:var(--text-3);font-family:var(--f-disp);font-weight:700;letter-spacing:.1em}
.team1{color:var(--team1)} .team2{color:var(--team2)}

/* 4.12 Cartes (média + texte) */
.card{--cut:16px;position:relative;isolation:isolate;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--metal),var(--deep));clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));text-decoration:none;color:inherit;transition:transform var(--t-med) var(--ease-out)}
.card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(160deg,rgba(34,211,255,.5),var(--line) 30%,var(--line) 70%,rgba(255,45,111,.45));
  clip-path:polygon(evenodd,0 var(--cut),var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut),1px calc(var(--cut) + .4px),1px calc(100% - 1px),calc(100% - var(--cut) - .4px) calc(100% - 1px),calc(100% - 1px) calc(100% - var(--cut) - .4px),calc(100% - 1px) 1px,calc(var(--cut) + .4px) 1px,1px calc(var(--cut) + .4px))}
.card__media{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--void-2)}
.card__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--ease-out),filter var(--t-med);filter:saturate(1.05)}
.card__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgba(7,9,18,.85)),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
a.card:hover .card__media img,.card:hover .card__media img{transform:scale(1.08)}
a.card:hover{transform:translateY(-4px)}
.card__body{position:relative;display:grid;gap:var(--s-2);padding:18px 20px 22px}
.card__title{font-family:var(--f-disp);font-weight:700;font-size:var(--fs-3);line-height:1.1}
.card__meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.card__text{color:var(--text-2);font-size:15px}
.card__badge{position:absolute;top:14px;right:14px;z-index:3}
.card--feature .card__body{padding:24px}
/* inclinaison 3D au pointeur : data-tilt (rift.js) */
[data-tilt]{transform-style:preserve-3d;will-change:transform}

/* 4.13 Cadre média (capture du jeu) */
.shot{--cut:20px;position:relative;isolation:isolate;overflow:hidden;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));background:var(--void-2);box-shadow:var(--shadow-2)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,5,11,0) 60%,rgba(4,5,11,.6)),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
  box-shadow:inset 0 0 0 1px rgba(132,156,220,.18)}
.shot__cap{position:absolute;left:16px;bottom:14px;z-index:2;display:flex;gap:10px;align-items:center}
.shot--glow{filter:drop-shadow(0 0 30px rgba(34,211,255,.18)) drop-shadow(0 0 60px rgba(241,63,240,.12))}

/* 4.14 Formulaires */
.field{display:grid;gap:6px}
.label{font-family:var(--f-disp);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}
.input,.select{width:100%;min-height:48px;padding:0 16px;background:rgba(7,9,18,.8);border:1px solid var(--line-2);color:var(--text);font-family:var(--f-mono);font-size:15px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:border-color var(--t-fast),background var(--t-fast)}
.input::placeholder{color:var(--text-3)}
.input:hover,.select:hover{border-color:rgba(34,211,255,.4)}
.input:focus,.select:focus{outline:none;border-color:var(--cyan);background:rgba(34,211,255,.05)}
.input:focus-visible,.select:focus-visible{box-shadow:inset 0 0 0 1px var(--cyan)}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.search{position:relative;display:flex;align-items:stretch;gap:8px}
.search .input{padding-left:44px}
.search__icon{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--cyan);pointer-events:none}
.search .btn{flex:none}
.hint{font-size:12.5px;color:var(--text-3)}
/* segment (onglets à aria-pressed : cartes de chaleur, filtres) */
.seg{display:inline-flex;flex-wrap:wrap;gap:6px}
.seg button{min-height:44px;padding:0 16px;background:rgba(15,20,34,.6);border:1px solid var(--line-2);color:var(--text-2);font-family:var(--f-disp);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.seg button:hover{color:var(--text);border-color:rgba(34,211,255,.45)}
.seg button[aria-pressed=true]{color:#03131a;background:var(--cyan);border-color:var(--cyan)}

/* 4.15 Squelettes, vides, erreurs */
.skel{position:relative;overflow:hidden;background:rgba(132,156,220,.08);min-height:14px;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(34,211,255,.12),rgba(241,63,240,.08),transparent);animation:rift-shimmer 1.5s var(--ease-io) infinite}
.skel--line{height:14px;width:var(--w,100%)}
.skel--title{height:34px;width:var(--w,60%)}
.skel--block{height:var(--h,120px)}
.skel--circle{width:var(--s,40px);height:var(--s,40px);border-radius:50%;clip-path:none}
.skel-row td{padding:16px}
@keyframes rift-shimmer{to{transform:translateX(100%)}}
.state{--cut:12px;display:grid;justify-items:center;gap:var(--s-3);padding:clamp(28px,5vw,48px) 20px;text-align:center;color:var(--text-2);border:1px dashed var(--line-2);font-size:15px}
.state__icon{width:44px;height:44px;color:var(--cyan);opacity:.9}
.state__title{font-family:var(--f-disp);font-weight:700;font-size:18px;letter-spacing:.06em;color:var(--text);text-transform:uppercase}
.state--error{border-color:rgba(255,180,84,.35)}
.state--error .state__icon,.state--error .state__title{color:var(--warn)}
td .state{border:0;padding:28px 8px}

/* 4.16 Ticker défilant (bandeau) */
.ticker{position:relative;overflow:hidden;padding-block:18px;border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(34,211,255,.05),rgba(241,63,240,.05));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:flex;width:max-content;gap:48px;animation:rift-ticker var(--dur,38s) linear infinite}
.ticker__track>*{display:inline-flex;align-items:center;gap:48px;font-family:var(--f-disp);font-weight:700;font-size:clamp(18px,2.4vw,28px);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--text-2)}
.ticker__track>*::after{content:"";width:12px;height:12px;background:var(--pink);transform:rotate(45deg);box-shadow:0 0 12px var(--pink)}
.ticker__track>:nth-child(2n)::after{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
@keyframes rift-ticker{to{transform:translateX(-50%)}}

/* 4.17 Pied de page */
.footer{position:relative;z-index:2;margin-top:var(--s-8);padding:56px 0 calc(32px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(7,9,18,.4),var(--void))}
.footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--grad-rift);opacity:.5}
.footer__grid{display:grid;gap:32px}
@media (min-width:780px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer__brand{display:grid;gap:12px;max-width:340px}
.footer__brand p{color:var(--text-2);font-size:14px}
.footer h2{font-family:var(--f-disp);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.footer ul{list-style:none;padding:0;display:grid}
.footer ul a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-2);text-decoration:none;font-size:14.5px}
.footer ul a:hover{color:var(--cyan)}
.footer__base{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-family:var(--f-mono);font-size:12px;color:var(--text-3)}
.footer__base a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-2)}
.footer__base{align-items:center}

/* 4.18 Réticule (curseur custom, pointeur fin seulement — rift.js : data-reticle sur <body>) */
.reticle{position:fixed;left:0;top:0;z-index:var(--z-cursor);pointer-events:none;width:34px;height:34px;margin:-17px 0 0 -17px;opacity:0;transition:opacity .25s,width .3s var(--ease-out),height .3s var(--ease-out),margin .3s var(--ease-out)}
.reticle::before{content:"";position:absolute;inset:0;border:1px solid rgba(34,211,255,.75);border-radius:50%;
  -webkit-mask:conic-gradient(#000 0 20deg,transparent 0 70deg,#000 0 110deg,transparent 0 160deg,#000 0 200deg,transparent 0 250deg,#000 0 290deg,transparent 0 340deg,#000 0);
  mask:conic-gradient(#000 0 20deg,transparent 0 70deg,#000 0 110deg,transparent 0 160deg,#000 0 200deg,transparent 0 250deg,#000 0 290deg,transparent 0 340deg,#000 0);transition:transform .5s var(--ease-out),border-color .2s}
.reticle__dot{position:fixed;left:0;top:0;z-index:var(--z-cursor);pointer-events:none;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink);opacity:0;transition:opacity .25s}
.has-reticle .reticle,.has-reticle .reticle__dot{opacity:1}
.reticle.is-hover{width:54px;height:54px;margin:-27px 0 0 -27px}
.reticle.is-hover::before{transform:rotate(45deg);border-color:var(--pink)}
.reticle.is-down::before{transform:scale(.7) rotate(90deg)}
.has-reticle,.has-reticle a,.has-reticle button,.has-reticle [data-href],.has-reticle label,.has-reticle select{cursor:none}
.has-reticle input,.has-reticle textarea{cursor:text}

/* ───────────────────────── 5. PORTAIL & FAILLE ───────────────────────── */
/* Scène de portail : <div class="portal-stage"><canvas class="portal-canvas" data-portal …></canvas></div>
   Le fond CSS sert de repli (sans JS / sans canvas) et d'image posée avant la 1re frame. */
.portal-stage{position:relative;overflow:hidden;isolation:isolate;background:
  radial-gradient(closest-side,rgba(4,5,11,0) 56%,rgba(34,211,255,.38) 60%,rgba(255,255,255,.7) 61%,rgba(241,63,240,.4) 62.5%,rgba(4,5,11,0) 70%) 50% 50%/min(70vmin,560px) min(86vmin,690px) no-repeat,
  radial-gradient(closest-side,rgba(120,80,255,.20),rgba(4,5,11,0)) 50% 50%/min(60vmin,480px) min(74vmin,590px) no-repeat,var(--void)}
.portal-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.2s var(--ease-out)}
.portal-canvas.is-live{opacity:1}
.portal-stage>:not(canvas):not(.portal-track__flash){position:relative;z-index:1}
/* piste de traversée : la section est haute, la scène reste collée ; rift.js pose --p (0→1) */
.portal-track{position:relative;height:var(--track-h,220vh)}
.portal-track__sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.portal-track__fade{opacity:calc(1 - var(--p,0)*2.4);transform:translate3d(0,calc(var(--p,0)*-60px),0) scale(calc(1 + var(--p,0)*.35));will-change:transform,opacity}
.scrim{position:relative;isolation:isolate}
.scrim::before{content:"";position:absolute;inset:-12% -8%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(4,5,11,.72),rgba(4,5,11,.4) 60%,transparent)}
.portal-track__flash{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(34,211,255,.5) 40%,rgba(241,63,240,0) 75%);opacity:calc((var(--p,0) - .72)*3.2)}
/* séparateur « faille » : <div class="tear" aria-hidden="true"></div> */
.tear{position:relative;height:56px;margin-block:-28px;z-index:3;pointer-events:none;filter:drop-shadow(0 0 6px rgba(34,211,255,.85)) drop-shadow(0 0 22px rgba(241,63,240,.55))}
.tear::before{content:"";position:absolute;left:0;right:0;top:50%;height:22px;transform:translateY(-50%) scaleX(var(--tear,1));transform-origin:50% 50%;transition:transform 1.3s var(--ease-io);
  background:linear-gradient(90deg,transparent 0%,var(--cyan) 18%,#fff 46%,#fff 54%,var(--mag) 76%,var(--pink) 86%,transparent 100%);
  clip-path:polygon(0 50%,7% 46%,11% 58%,16% 40%,22% 55%,27% 44%,31% 62%,36% 30%,41% 66%,45% 20%,48% 74%,50% 8%,52% 88%,55% 26%,59% 70%,63% 36%,67% 60%,72% 42%,76% 57%,81% 45%,86% 54%,91% 47%,95% 52%,100% 50%,95% 53%,91% 49%,86% 57%,81% 48%,76% 60%,72% 46%,67% 64%,63% 41%,59% 75%,55% 32%,52% 94%,50% 16%,48% 80%,45% 28%,41% 70%,36% 37%,31% 66%,27% 49%,22% 59%,16% 45%,11% 61%,7% 49%)}
.tear::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);opacity:.55;background:linear-gradient(90deg,transparent,rgba(34,211,255,.5) 30%,rgba(241,63,240,.5) 70%,transparent)}
.tear--flip::before{transform:translateY(-50%) scale(var(--tear,1),-1)}
.tear--pending::before{--tear:0}
.tear.is-in::before{--tear:1}
.tear__spark{position:absolute;top:50%;left:var(--x,50%);width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff,0 0 12px var(--cyan);opacity:0;animation:rift-spark 2.4s var(--ease-out) infinite;animation-delay:var(--d,0s)}
@keyframes rift-spark{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}100%{opacity:0;transform:translate(var(--dx,20px),var(--dy,-26px))}}
/* anneau décoratif CSS (petits portails : puces, avatars, icônes) */
.ring{--size:72px;position:relative;width:var(--size);height:calc(var(--size)*1.18);border-radius:50%;flex:none;
  background:radial-gradient(closest-side,rgba(4,5,11,1) 64%,rgba(34,211,255,.9) 70%,#fff 74%,rgba(241,63,240,.9) 79%,rgba(4,5,11,0) 86%);
  filter:drop-shadow(0 0 10px rgba(34,211,255,.5)) drop-shadow(0 0 22px rgba(241,63,240,.3));animation:rift-breathe 4s ease-in-out infinite}
@keyframes rift-breathe{50%{transform:scale(1.04)}}

/* ───────────────────────── 6. RÉVÉLATIONS AU SCROLL ───────────────────────── */
/* data-reveal="up|fade|left|right|scale|portal|tear" ; parent data-stagger → --i auto.
   Masqué seulement si JS actif (html.js), révélé par rift.js via .is-in. */
.js [data-reveal]{opacity:0;transition:opacity .9s var(--ease-out),transform 1s var(--ease-out),clip-path 1.1s var(--ease-io),filter .9s var(--ease-out);transition-delay:calc(var(--i,0)*70ms + var(--delay,0ms))}
.js [data-reveal=""],.js [data-reveal=up]{transform:translateY(34px)}
.js [data-reveal=left]{transform:translateX(-44px)}
.js [data-reveal=right]{transform:translateX(44px)}
.js [data-reveal=scale]{transform:scale(.92)}
.js [data-reveal=blur]{filter:blur(12px);transform:scale(1.04)}
.js [data-reveal=portal]{clip-path:circle(6% at 50% 50%)}
.js [data-reveal].is-in{opacity:1;transform:none;filter:none}
.js [data-reveal=portal].is-in{clip-path:circle(75% at 50% 50%)}

/* ───────────────────────── 7. UTILITAIRES ───────────────────────── */
.mono{font-family:var(--f-mono)} .disp{font-family:var(--f-disp)}
.muted{color:var(--text-2)} .dim{color:var(--text-3)}
.c-cyan{color:var(--cyan)} .c-pink{color:var(--pink)} .c-good{color:var(--good)} .c-warn{color:var(--warn)}
.center{text-align:center} .upper{text-transform:uppercase;letter-spacing:.12em}
.nums{font-variant-numeric:tabular-nums}
.mt-1{margin-top:var(--s-2)} .mt-2{margin-top:var(--s-4)} .mt-3{margin-top:var(--s-6)} .mt-4{margin-top:var(--s-8)}
.full-bleed{width:100vw;margin-left:calc(50% - 50vw)}
.no-js-only{display:none}
.bevel{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);border:0}
.scanlines{position:relative}
.scanlines::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.is-paused,.is-paused *,.is-paused::before,.is-paused::after{animation-play-state:paused!important}
.anchor{scroll-margin-top:calc(var(--nav-h) + 12px)}

/* ───────────────────────── 8. TRANSITIONS DE PAGE : LE PORTAIL ───────────────────────── */
/* (a) navigateurs à View Transitions inter-documents (Chrome 126+, Safari 18.2+) */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.8s}
html.gate-vt::view-transition-old(root){animation:rift-gate-old .8s var(--ease-io) both}
html.gate-vt::view-transition-new(root){animation:rift-gate-clip .8s var(--ease-io) both;mix-blend-mode:normal}
@keyframes rift-gate-old{to{transform:scale(.9);opacity:.25;filter:blur(6px) saturate(1.6)}}
@keyframes rift-gate-clip{from{clip-path:circle(0 at var(--gx,50%) var(--gy,50%))}to{clip-path:circle(150vmax at var(--gx,50%) var(--gy,50%))}}
/* (b) repli : voile de vide FIXE percé d'un cercle qui s'agrandit depuis le point de clic.
   Coordonnées écran : marche aussi quand la page arrive défilée sur une ancre (/#classement). */
@property --gr{syntax:'<length>';inherits:false;initial-value:0px}
html.gate-body::before{content:"";position:fixed;inset:0;z-index:var(--z-gate);pointer-events:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),transparent var(--gr),var(--void) calc(var(--gr) + 1px));animation:rift-gate-open .8s var(--ease-io) both}
@keyframes rift-gate-open{from{--gr:0px}to{--gr:150vmax}}
/* anneau qui borde l'ouverture (dans les deux cas) : même courbe, même durée → collé au bord */
html.gate-in::after{content:"";position:fixed;z-index:var(--z-gate);pointer-events:none;left:var(--gx,50%);top:var(--gy,50%);width:20vmax;height:20vmax;margin:-10vmax 0 0 -10vmax;border-radius:50%;
  background:radial-gradient(closest-side,transparent 84%,rgba(34,211,255,.55) 89%,#fff 93%,rgba(241,63,240,.85) 96%,transparent 100%);
  animation:rift-gate-ring .8s var(--ease-io) both}
@keyframes rift-gate-ring{0%{transform:scale(0);opacity:1}80%{opacity:1}100%{transform:scale(15);opacity:0}}
/* sortie (repli) : portail ouvert par rift.js au clic, avant navigation */
.gate{position:fixed;inset:0;z-index:var(--z-gate);pointer-events:none;background:radial-gradient(circle at var(--gx) var(--gy),#2a0f3d 0%,#0a0620 22%,var(--void) 55%);clip-path:circle(0 at var(--gx) var(--gy));animation:rift-gate-close .46s var(--ease-io) forwards}
.gate::after{content:"";position:absolute;left:var(--gx);top:var(--gy);width:20vmax;height:20vmax;margin:-10vmax 0 0 -10vmax;border-radius:50%;
  background:radial-gradient(closest-side,transparent 84%,rgba(34,211,255,.55) 89%,#fff 93%,rgba(241,63,240,.85) 96%,transparent 100%);animation:rift-gate-ring-out .46s var(--ease-io) forwards}
@keyframes rift-gate-close{to{clip-path:circle(150vmax at var(--gx) var(--gy))}}
@keyframes rift-gate-ring-out{from{transform:scale(0)}to{transform:scale(15)}}

/* ───────────────────────── 9. MOUVEMENT RÉDUIT ───────────────────────── */
/* Contenu identique, mouvement coupé : plus d'animations ni de transitions, tout est visible. */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .ticker__track{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center;row-gap:12px}
  .ticker__track>[aria-hidden=true]{display:none}
  .glitch::before,.glitch::after,html.gate-in::after,.gate,.tear__spark{display:none}
  html.gate-body::before{display:none}
  .tear::before{--tear:1}
  .reticle,.reticle__dot{display:none}
  .portal-track{height:auto}
  .portal-track__sticky{position:relative}
  .portal-track__fade{opacity:1;transform:none}
  .portal-track__flash{display:none}
}
@media (hover:none),(pointer:coarse){.reticle,.reticle__dot{display:none}}