:root {
  
  font-size: 87.5%;                     

  --bg:      #000;                      
  --text:    #fff;
  --muted:   rgba(255, 255, 255, .5);   
  --line:    rgba(255, 255, 255, .2);   
  --glass:   rgba(255, 255, 255, .05);  

  
  --g1:   #C4B5FD;
  --deep: #2A2352;

  --pad:  4%;                           
  --hdr:  85px;                         

  
  --voie: 6.25rem;

  
  --z-aura:      -1;
  --z-rail:       0;
  --z-ecrans:     1;
  --z-hud:        2;
  --z-flux:       3;
  --z-commandes:  4;
  --z-header:    10;
  --z-nojs:      11;
  --z-skip:     100;

  --r-xs: .25rem;                       
  --r-s:  .5rem;                        
  --r-m:  1rem;                         
  

  
  --font-display: 'Archivo', Arial, sans-serif;
  --font-body:    'DM Sans', Arial, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;
  --w-display:    600;
  --ls-display:   -.015em;

  
  --t-xs:   .75rem;                     
  --t-s:    .875rem;                    
  --t-m:    1rem;                       
  --t-l:    1.15rem;                    
  --t-menu: 2.057rem;                   

  --t-h1:   clamp(2.4rem,  1.36rem + 4vw,     4.286rem);

  
  --t-h2:   clamp(2.25rem, 1.42rem + 2.16vw,  3rem);
  --t-sum:  clamp(1.15rem,  .956rem + .726vw, 1.5rem);

  
  --e-inout: cubic-bezier(.45, 0, .55, 1);
  --e-out:   cubic-bezier(.16, 1, .3, 1);
  
  --e-power2-inout: cubic-bezier(.645, .045, .355, 1);

  

  
  --e-power2-out: cubic-bezier(.3333, 1, .6667, 1);

  
  
  --ecran-sortie:  .22s;                
  --ecran-entree:  .28s;                

  --fx-dur-masque: .85s;                
  --fx-dur-monte:  .6s;                 
  --fx-stagger:    90ms;                
  

  
  --fx-cache:      110%;                
  --fx-monte:      18px;                

  
  --fx-dur-lettre:     .7s;
  --fx-lettre-stagger: 10ms;
  
  --e-power3-out: cubic-bezier(.165, .84, .44, 1);
}



* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }


html { scroll-padding-top: calc(var(--hdr) + 1.5rem); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;                     
  font-size: var(--t-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--g1);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}


[hidden] { display: none !important; }






.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);                          
  height: var(--hdr);
  padding: 21px var(--pad) 0;           
  background: transparent;              
  display: flex;
  flex-direction: column;
  gap: 11px;
}


.rail        { display: flex; align-items: center; height: 1px; }
.rail__point { flex: none; width: 1px; height: 1px; background: var(--text); }  
.rail__track { flex: 1 1 auto; height: 1px; background: var(--line); }   

.rail__ind {
  position: relative;
  height: 100%;
  background: var(--text);
  width: calc(var(--p, 0) * 100%);      
}


.rail__core,
.rail__mid,
.rail__halo {
  position: absolute;
  inset: 50% 0 auto 0;
  transform: translateY(-50%);
}
.rail__core {
  height: 1px;
  background: linear-gradient(to right,
    rgba(255,255,255,.05) 0%, rgba(255,255,255,.35) 55%, #fff 100%);
}
.rail__mid {
  height: 3px; filter: blur(2px);
  background: linear-gradient(to right,
    transparent 0%, rgba(255,255,255,.25) 60%, rgba(255,255,255,.95) 100%);
}
.rail__halo {
  height: 12px; filter: blur(7px);
  background: linear-gradient(to right,
    transparent 0%, rgba(255,255,255,.1) 65%, rgba(255,255,255,.5) 100%);
}
.rail__hot {
  position: absolute;
  top: 50%; right: 0;
  width: 28px; height: 6px;
  filter: blur(2px);
  transform: translate(40%, -50%);
  background: radial-gradient(#fff 0%, rgba(255,255,255,.5) 35%, transparent 70%);
}


.nav__row {
  display: flex;
  align-items: center;
  min-height: 46px;                     
}

.nav__left,
.nav__right { flex: 1 1 0; display: flex; align-items: center; }
.nav__right { justify-content: flex-end; gap: clamp(1.25rem, 2.8vw, 4rem); }



.counter {
  font-family: var(--font-mono);
  font-size: var(--t-s);                
  letter-spacing: .04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  display: flex; gap: .35em;
}
.counter b { color: var(--text); font-weight: 400; }


.nav__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .6em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-l);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__logo .eye { width: 26px; height: 26px; flex: none; fill: currentColor; color: var(--g1); }


.nav__menu { position: relative; }

.menu__btn {
  display: flex; align-items: center; gap: .75rem;
  padding: 0; border: 0; background: none; color: inherit;
  font-family: var(--font-body);
  
  font-size: var(--t-m);
  font-weight: 300;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.menu__btn[aria-expanded="true"] .menu__dot { background: var(--g1); }

.menu__panel {
  position: absolute;
  top: calc(100% + 21px);
  right: 0;
  width: 255px;                         
  padding: 21px 17.5px;                 
  border: 1px solid var(--line);        
  border-radius: var(--r-m);            
  background: var(--glass);             
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);          
  overflow: hidden;                     
  
  height: 44px;
  opacity: 0;
  visibility: hidden;
  transition: height .55s var(--e-inout),
              opacity .55s var(--e-inout),
              visibility 0s linear .55s;
}

.nav__menu.is-open .menu__panel {
  height: var(--menu-h, 283px);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}


.menu__link {
  display: block;
  font-size: var(--t-menu);             
  font-weight: 400;                     
  line-height: 1.5;                     
  text-transform: uppercase;            
  padding: 5.5px 0;
}

.menu__foot {
  gap: .5rem 1.25rem;
  margin-top: 1.25rem; padding-top: 1.25rem;
}



.btn {
  display: inline-block;
  padding: 12.6px 17.5px;               
  border-radius: var(--r-s);            
  background: var(--text);              
  color: var(--bg);                     
  font-size: var(--t-m);                
  font-weight: 400;                     
  text-transform: uppercase;            
  line-height: 1;
  white-space: nowrap;
  
  transition: background-color .2s var(--e-out), color .2s var(--e-out);
}
.btn:hover { background: var(--g1); }


.hud {
  z-index: var(--z-hud);
  padding: 8rem var(--pad) 2rem;        
  font-family: var(--font-mono);
  font-size: var(--t-xs);               
  color: var(--muted);                  
}


.vignette {
  position: fixed;
  inset: -10% auto auto -10%;
  width: 120%; height: 120%;
  background: linear-gradient(180deg, transparent, transparent 70%, var(--bg) 95%);
  filter: blur(1rem);
  pointer-events: none;
}

.hud__in { display: flex; justify-content: space-between; height: 100%; }

.hud__col { display: flex; flex-direction: column; justify-content: space-between;
            align-items: flex-start; }
.hud__col--r { align-items: flex-end; text-align: right; }

.hud__tick { width: 7px; height: 7px; flex: none; }             
.hud__tick path { fill: none; stroke: currentColor; stroke-width: 1.5; }


.hud__vert {
  writing-mode: vertical-rl;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hud__col--r .hud__vert { transform: rotate(180deg); }

.hud__mid { display: flex; flex-direction: column; gap: .9rem; align-items: inherit; }


.hud__scroll {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  transition: opacity .5s var(--e-inout);
}
body.is-scrolled .hud__scroll { opacity: 0; }
.hud__scroll i {
  width: 1px; height: 34px;
  background: linear-gradient(var(--line), transparent);
  position: relative; overflow: hidden;
}
.hud__scroll i::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 12px;
  background: var(--text);
  animation: hudDrop 2.2s var(--e-inout) infinite;
}
@keyframes hudDrop {
  0%   { transform: translateY(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(340%); opacity: 0; }
}



.hud, .stages, .stage, .aura, .showcase {
  position: fixed;
  inset: 0;
  pointer-events: none;                 
}

.stages {
  z-index: var(--z-ecrans);
  
  --sens: 1;

  
  --attente-ecran: var(--ecran-sortie);
}



.stage {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ecran-sortie) var(--e-power2-inout),
              visibility 0s linear var(--ecran-sortie);
}

.stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--hdr) + clamp(1.5rem, 4vh, 3rem))
           calc(var(--pad) + var(--voie))
           clamp(3.5rem, 8vh, 6rem);
}

.stage.is-on {
  opacity: 1;
  visibility: visible;
  
  transition: opacity var(--ecran-entree) var(--e-power2-inout) var(--ecran-sortie),
              visibility 0s linear 0s;
}

.stage--long        { justify-content: flex-start; overflow-y: auto; }
.stage--long.is-on  { pointer-events: auto; }


.stage.is-on a,
.stage.is-on button,
.stage.is-on .card { pointer-events: auto; }


.aura {
  z-index: var(--z-aura);
  background: radial-gradient(60% 55% at 50% 45%, var(--deep), transparent 72%);
  
  transition: background 1.8s var(--e-inout);
}



.track { position: relative; z-index: var(--z-rail); pointer-events: none; }
.pane  { height: 125vh; }



[data-fx="masque"]        { display: block; overflow: clip; }
[data-fx="masque"] > i    { display: block; font-style: inherit; }
.js [data-fx="masque"] > i { transform: translateY(calc(var(--sens, 1) * var(--fx-cache))); }
.js [data-fx="monte"]      { opacity: 0; transform: translateY(calc(var(--sens, 1) * var(--fx-monte))); }

.fx-on [data-fx="masque"] > i {
  transform: none;
  transition: transform var(--fx-dur-masque) var(--e-out);
  transition-delay: calc(var(--attente-ecran, 0s) + var(--i, 0) * var(--fx-stagger));
}
.fx-on [data-fx="monte"] {
  opacity: 1; transform: none;
  transition: opacity   var(--fx-dur-monte) var(--e-inout),
              transform var(--fx-dur-monte) var(--e-out);
  transition-delay: calc(var(--attente-ecran, 0s) + var(--i, 0) * var(--fx-stagger));
}


[data-fx="lettre"]           { display: inline-block; vertical-align: bottom;
                               overflow-x: visible;   
                               overflow-y: clip; }    
[data-fx="lettre"] > i       { display: inline-block; font-style: inherit; }
.js [data-fx="lettre"] > i   { transform: translateY(calc(var(--sens, 1) * var(--fx-cache))); }

.fx-on [data-fx="lettre"] > i {
  transform: none;
  transition: transform var(--fx-dur-lettre) var(--e-power3-out);
  transition-delay: calc(var(--attente-ecran, 0s) + var(--i, 0) * var(--fx-lettre-stagger));
}


.mot { display: inline-block; white-space: nowrap; }



.fx-sort [data-fx="lettre"] > i,
.fx-sort [data-fx="masque"] > i {
  transform: translateY(calc(var(--sens, 1) * -1 * var(--fx-cache)));
  transition: transform 0s linear var(--ecran-sortie);
}

.fx-sort [data-fx="monte"] {
  opacity: 0; transform: translateY(calc(var(--sens, 1) * -1 * var(--fx-monte)));
  transition: opacity var(--fx-dur-monte) var(--e-inout)
                      calc(var(--i, 0) * var(--fx-stagger)),
              transform 0s linear var(--ecran-sortie);
}


.js [data-fx].fx-rejeu       { transition: none !important; }
.js [data-fx="masque"].fx-rejeu > i { transform: translateY(calc(var(--sens, 1) * var(--fx-cache))); }
.js [data-fx="lettre"].fx-rejeu > i { transform: translateY(calc(var(--sens, 1) * var(--fx-cache))); }
.js [data-fx="monte"].fx-rejeu      { opacity: 0; transform: translateY(calc(var(--sens, 1) * var(--fx-monte))); }



.kicker, .menu__foot, .detail__meta, .foot,
.meth__contre, .infos dt {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--muted);
}


.kicker, .menu__foot, .foot {
  font-size: var(--t-xs);               
}

.hero__foot .kicker { font-size: var(--t-m); }


.menu__foot, .foot {
  display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--line);
}

.kicker {
  letter-spacing: .18em;
  margin: 0 0 1.25rem;
}


.h-xl, .h-l {
  font-family: var(--font-display);
  font-weight: var(--w-display);        
  letter-spacing: var(--ls-display);    
  text-transform: uppercase;            
  margin: 0;
}
.h-xl {
  font-size: var(--t-h1);               
  line-height: 1;                       
  text-wrap: balance;
}




.titre-lu {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.h-l {
  font-size: var(--t-h2);               
  line-height: .84;                     
  font-style: italic;                   
}
.lede {
  max-width: 46ch;
  color: rgba(255, 255, 255, .72);
  margin: 1.5rem 0 0;
  font-size: var(--t-l);
}


.grad { color: var(--g1); }





.showcase {
  z-index: var(--z-rail);
  padding: calc(var(--hdr) + 6.5rem) var(--pad) 8.5rem;
  opacity: var(--deck-op, 1);
}
.showcase > * { pointer-events: auto; }
.showcase[data-off="true"] { visibility: hidden; }

.carousel {
  position: relative;
  width: 100%; height: 100%;
  
  perspective: var(--persp, 2552px);
  perspective-origin: 50% 50%;
  
  transform: translateY(var(--rail-dy, 0px));
  touch-action: pan-y;
  cursor: grab;
}
.carousel.is-dragging { cursor: grabbing; }


@property --disc-a { syntax: '<color>'; inherits: true; initial-value: #8A8A99; }


.disc {
  --disc-d: min(120vw, max(70vw, 450px));

  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: var(--disc-d); aspect-ratio: 1;
  
  border-radius: 50%;
  
  --disc-a: var(--g1);
  background: conic-gradient(
    var(--disc-a),
    color-mix(in srgb, var(--disc-a) 35%, transparent),
    var(--disc-a));
  transform: translate(-50%, -50%) rotate(calc(var(--bg-rot, 0) * 1deg));
  transition:
    transform .8s var(--e-power2-inout),        
    --disc-a .6s ease-in-out;
  
  filter: blur(calc(var(--disc-d) / 16.8));
  opacity: .55;
  pointer-events: none;
}





.deck {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  
  pointer-events: none;
}

.deck .card                           { pointer-events: auto; cursor: default; }
.deck .card.is-active:not(.is-locked) { cursor: pointer; }


body.is-moving .deck .card { will-change: transform, opacity; }



.card {
  
  --card-bg:      #11161F;                
  --card-line:    rgba(255, 255, 255, .14);
  --card-radius:  .73em;
  --card-ico:     7.8em;
  
  --card-bande:   1.15;
  
  --card-pan:     .926;
  --card-degage:  2.7;
  --card-tag:     rgba(255, 255, 255, .67);
  
  --halo:         .78;
  --u:            calc(var(--cw, 232px) / 20);   

  position: absolute;
  left: 50%; top: 50%;
  width: var(--cw, 232px);
  height: var(--ch, 324px);
  font-size: var(--u);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--tx, 0) * 1px), calc(var(--ty, 0) * 1px), calc(var(--tz, 0) * 1px))
    rotateY(calc(var(--ry, 0) * 1deg))
    rotateX(calc(var(--rx, 0) * 1deg))
    rotateZ(calc(var(--rz, 0) * 1deg))
    scale(var(--sc, 1));
  opacity: var(--op, 1);
  
  border-radius: var(--card-radius);
  overflow: hidden;
  
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  display: flex; flex-direction: column;
  cursor: pointer;
  
}
.card.is-far { visibility: hidden; }      


.card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  opacity: var(--halo);
  background:
    radial-gradient(ellipse 63.8% 45.6% at 49% 113%,
      var(--g1) 0 36%,
      color-mix(in srgb, var(--g1) 84%, transparent) 40%,
      color-mix(in srgb, var(--g1) 50%, transparent) 55%,
      color-mix(in srgb, var(--g1) 16%, transparent) 70%,
      transparent 88%),
    radial-gradient(ellipse 52.7% 37.6% at 103% -3%,
      var(--g1) 0 27%,
      color-mix(in srgb, var(--g1) 84%, transparent) 33%,
      color-mix(in srgb, var(--g1) 50%, transparent) 45%,
      color-mix(in srgb, var(--g1) 16%, transparent) 63%,
      transparent 82%);
}


.card.is-rare   { --halo: 1; }
.card.is-locked { --halo: .3; }

.card.is-active { box-shadow: 0 30px 80px -22px var(--deep); }


.card__decor {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  color: var(--g1);
  pointer-events: none;
}


.card__ico {
  position: absolute; z-index: 2;
  left: 50%; top: 29.8%;
  transform: translate(-50%, -50%);
  width: var(--card-ico); height: var(--card-ico);
  color: var(--text);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}




.card__rar {
  position: absolute;
  
  z-index: 5;
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex; align-items: center;
  gap: calc(.7 * var(--u));
  font-family: var(--font-display); font-weight: 700;
  font-size: .766em;
  letter-spacing: .035em;
  
  color: var(--text);
}

.card__rar__s {
  flex: none;
  height: calc(.96 * var(--u)); width: auto;
  fill: currentColor;
}
.card__rar--haut { top:    calc(var(--card-bande) * var(--u));
                   left:   calc(var(--card-bande) * var(--u)); }
.card__rar--bas  { bottom: calc(var(--card-bande) * var(--u));
                   right:  calc(var(--card-bande) * var(--u));
                   flex-direction: row-reverse; }


.card__name {
  position: absolute; z-index: 3;
  left: calc(1.2 * var(--u)); right: calc(1.2 * var(--u));
  top: 59%;
  font-family: var(--font-display); font-weight: 700; font-size: 1.47em;
  line-height: 1.02; letter-spacing: .01em; text-transform: uppercase;
  text-align: center; color: var(--text); margin: 0;
}



.card__type { font-family: var(--font-display); font-style: italic;
              font-size: inherit; margin: 0;
              color: var(--text); }


.card__tags { display: block; list-style: none; margin: 0; padding: 0; }

.card__tags li { display: inline; font-family: var(--font-display);
                 font-size: inherit; letter-spacing: .04em;
                 text-transform: uppercase; color: var(--card-tag); }
.card__tags li + li::before { content: ' · '; color: var(--card-line); }



.card__revele {
  position: absolute; z-index: 3;
  left: calc(1.2 * var(--u));
  right: calc(var(--card-degage) * var(--u));
  bottom: calc(.8 * var(--u));
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(.4 * var(--u));
  padding: calc(.5 * var(--u)) calc(.8 * var(--u));
  text-align: left;
  font-size: calc(var(--card-pan) * var(--u));
  
  line-height: 1.25;
  border: 1px solid var(--line);
  
  border-radius: calc(.73 * var(--u));
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(calc(1.08 * var(--u)));
  backdrop-filter: blur(calc(1.08 * var(--u)));
  opacity: 0;
  transition: opacity .3s var(--e-power2-out);
}


.card:not(.is-locked):hover         .card__revele,
.card:not(.is-locked):focus-visible .card__revele { opacity: 1; }
.card:not(.is-locked):hover,
.card:not(.is-locked):focus-visible { --card-line: var(--g1); }


@media (hover: none) {
  .card__revele { opacity: 1; }
}




.card.is-locked {
  cursor: default;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 6px, transparent 6px 14px),
    #0E1219;
}

.card.is-locked .card__ico  { color: var(--muted); }

.card.is-locked .card__name { color: var(--muted); }

.card.is-locked .card__revele { opacity: 1; }
.card.is-locked .card__type   { color: var(--card-tag); }




.card__dos {
  position: absolute; inset: 0; z-index: 6;
  border-radius: inherit;
  transform: scaleX(-1);
  opacity: var(--dos, 0);
  pointer-events: none;
  background:
    radial-gradient(ellipse 63.8% 45.6% at 3% 106%,
      color-mix(in srgb, var(--g1) 78%, transparent) 0 36%,
      color-mix(in srgb, var(--g1) 66%, transparent) 40%,
      color-mix(in srgb, var(--g1) 39%, transparent) 55%,
      color-mix(in srgb, var(--g1) 12%, transparent) 70%,
      transparent 88%),
    radial-gradient(ellipse 52.7% 37.6% at 103% -3%,
      color-mix(in srgb, var(--g1) 78%, transparent) 0 27%,
      color-mix(in srgb, var(--g1) 66%, transparent) 33%,
      color-mix(in srgb, var(--g1) 39%, transparent) 45%,
      color-mix(in srgb, var(--g1) 12%, transparent) 63%,
      transparent 82%),
    var(--card-bg);
}


.card.is-locked .card__dos { background: var(--card-bg); }
.card.is-locked .card__decor { color: var(--muted); }


.card__gloss {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
  mix-blend-mode: overlay;
  transform: translateX(calc(var(--gloss, 0) * 1%));
}


.deck__nav {
  position: absolute; top: 50%; z-index: 6;
  width: 44px; height: 44px; padding: 6px;      
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none;                  
  color: var(--text);
  cursor: pointer;
  pointer-events: auto;
  opacity: 1; visibility: visible;
  transition: opacity .25s var(--e-inout), visibility 0s linear 0s;
}

.deck__nav svg { width: 24px; height: 24px; fill: none;
                 stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.deck__nav__piste {
  stroke: var(--muted);
  transition: stroke .25s var(--e-power2-out);
}
.deck__nav:not([disabled]):hover         .deck__nav__piste,
.deck__nav:not([disabled]):focus-visible .deck__nav__piste { stroke: var(--text); }

body.is-scrolled .deck__nav {
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--e-inout), visibility 0s linear .25s;
}

.deck__nav--prev { left:  calc(50% - var(--cw, 260px) * .63 - 4rem); }
.deck__nav--next { right: calc(50% - var(--cw, 260px) * .63 - 4rem); }


.showcase:not([data-mesure]) .deck__nav { opacity: 0; }




.deck__nav[disabled] { opacity: .22; cursor: default; }









.stage--hero { justify-content: space-between; }


.hero__foot {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  text-align: center;
  opacity: calc(1 - var(--flat, 0));      
}

.hero__name { min-height: 1.2em; line-height: 1.15; }

.stage__in { width: 100%; max-width: 1100px; margin: 0 auto; }
.stage--center { text-align: center; }
.stage--center .stage__in { display: flex; flex-direction: column; align-items: center; }
.stage--center .lede { text-align: center; }


.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: clamp(2rem, 5vw, 4rem); align-items: center; }

.detail__cale { aspect-ratio: 4 / 3; }

.detail__meta { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.75rem;
                font-size: var(--t-m); letter-spacing: .08em; }


.link-arrow { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.75rem;
              font-family: var(--font-mono); font-size: var(--t-m); text-transform: uppercase;
              letter-spacing: .06em; border-bottom: 1px solid var(--muted); padding-bottom: .3rem; }
.link-arrow:hover { border-color: var(--g1); color: var(--g1); }


.meth-liste {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.meth {
  display: grid; grid-template-rows: subgrid; grid-row: span 4;
  row-gap: .75rem;                      
  border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 1.75rem 1.5rem;
  transition: border-color .3s var(--e-power2-out);
}
.meth:hover { border-color: var(--g1); }

.meth__ico {
  width: 28px; height: 28px;
  fill: none; stroke: var(--g1); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.meth__contre {
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--t-m);                
  letter-spacing: .08em; text-decoration: line-through;
  text-decoration-color: var(--g1); text-decoration-thickness: 1px;
  margin: 0;
}

.meth__contre::before { content: '×'; text-decoration: none; font-size: 1.3em; color: var(--g1); }

.meth__pour {
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.1;
  letter-spacing: var(--ls-display);
  margin: 0;
}
.meth__texte { font-size: var(--t-m); line-height: 1.55; color: var(--muted); margin: 0; }
.meth__texte strong { font-weight: 500; color: var(--text); }


.chapitre .lede { max-width: 62ch; }
.chapitre__corps { margin-top: clamp(1.75rem, 4vh, 2.75rem); }

.chapitre__corps > .apport,
.chapitre__corps > .bandeau { margin-top: 0; }


.vitrine {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.vitrine__cadre {
  margin: 0;
  border: 1px solid var(--line); border-radius: var(--r-m);
  overflow: hidden;
  background: var(--glass);
}

.vitrine__cadre img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover;
}

.vitrine__cadre figcaption {
  font-family: var(--font-mono); font-size: var(--t-m);
  letter-spacing: .04em; color: var(--muted);
  padding: .9rem 1rem; border-top: 1px solid var(--line);
}



.vitrine__cadre--maq .maq {
  aspect-ratio: 16 / 10;
  display: flex; align-items: flex-start; justify-content: center;
  gap: 1rem;
  background: var(--bg);
}

.maq__page {
  flex: none; height: 100%; overflow: hidden;
  width: calc(100% * .625 * var(--maq-r, .3));
  outline: 1px solid var(--line); outline-offset: -1px;
  border-radius: var(--r-s);
}
.maq__page img {
  display: block; width: 100%; height: auto;
  aspect-ratio: auto; object-fit: fill;
}




.jalons {
  position: fixed;
  right: calc(var(--pad) + var(--voie) - 51px - 11px); top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-commandes);
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--e-power2-inout), visibility 0s linear .5s;
}
.jalons.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.jalons:empty { display: none; }
.jalon {
  width: 51px; height: 51px; padding: 0;   
  display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 50%;
  color: var(--muted); cursor: pointer;
  transition: color .3s var(--e-power2-out), border-color .3s var(--e-power2-out);
}
.jalon svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
             stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.jalon:hover { color: var(--text); }
.jalon[aria-current="true"] { color: var(--text); border-color: var(--line); }

.jalons__fil { width: 1px; height: 36px; background: var(--line); flex: none; }

@media (max-width: 1023px) { .jalons { display: none; } }


.apport {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none; margin: 2.5rem 0 0; padding: 0;
}

@media (min-width: 641px) and (max-width: 900px) {
  .apport { grid-template-columns: repeat(2, 1fr); }
}
.apport__case {
  display: flex; flex-direction: column; gap: .6rem;
  padding: 1.5rem;
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--glass);
}
.apport__case:hover { border-color: var(--g1); }
.apport__titre {
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: var(--t-l); line-height: 1.2;
  letter-spacing: var(--ls-display);
  margin: 0;
}
.apport__texte { font-size: var(--t-m); line-height: 1.55; color: var(--muted); margin: 0; }



.bandeau {
  display: grid; gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 2rem 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.bandeau > div { display: flex; flex-direction: column-reverse; gap: .25rem; }
.bandeau dt { font-size: var(--t-m); color: var(--muted); max-width: 20ch; }
.bandeau dd {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: var(--t-h2); line-height: 1;
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
}


.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.grid .card {
  position: relative; left: auto; top: auto;
  width: auto; height: auto; aspect-ratio: 1 / 1.4;
  transform: none; opacity: 1; visibility: visible;
  --cw: 260px;    
}






.flow { position: relative; z-index: var(--z-flux); background: var(--bg); padding: clamp(4rem, 10vh, 8rem) var(--pad); }
.flow__in { max-width: 1100px; margin: 0 auto; }


.flow--pied { padding-top: 0; }
.flow--pied .foot { margin-top: 0; }

.faq { border-top: 1px solid var(--line); margin-top: 2.5rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.5rem 3rem 1.5rem 0; position: relative;
  font-family: var(--font-display); font-weight: 500; font-size: var(--t-sum);
  text-transform: uppercase;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: .5rem; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  background:
    linear-gradient(currentColor, currentColor) center/12px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 12px no-repeat;
  transition: transform .3s var(--e-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 1.75rem; max-width: 68ch; color: rgba(255,255,255,.72); }

.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }


.infos {
  display: grid; gap: 1.75rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 2rem; border-top: 1px solid var(--line);
}

.infos dt {
  font-size: var(--t-m);
  letter-spacing: .08em;
}
.infos dd { margin: .5rem 0 0; font-size: var(--t-l); max-width: 32ch; }

.foot {
  justify-content: space-between; gap: 1rem;
  margin-top: clamp(3rem, 8vh, 6rem); padding-top: 1.5rem;
  letter-spacing: .06em;
}

.menu__foot a, .foot a {
  font-size: var(--t-m);
  text-decoration: underline; text-underline-offset: .25em;
  text-decoration-color: var(--line);
  color: var(--text);
}
.menu__foot a:hover, .foot a:hover { text-decoration-color: var(--g1); color: var(--g1); }




.skip-link {
  position: fixed;
  top: -100px; left: 1rem;
  z-index: var(--z-skip);
  padding: .75rem 1.25rem;
  background: var(--g1);
  color: #000;
  font-family: var(--font-body);
  font-size: var(--t-m);
  font-weight: 500;
  border-radius: 4px;
  
  transition: top .12s var(--e-out);
}
.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--text);
  outline-offset: 2px;
}


.nojs {
  position: relative;
  z-index: var(--z-nojs);
  max-width: 40rem;
  margin: 0 auto;
  padding: calc(var(--hdr) + clamp(2rem, 8vh, 5rem)) var(--pad) clamp(2rem, 6vh, 4rem);
  font-family: var(--font-body);
  font-size: var(--t-m);
  line-height: 1.6;
}
.nojs__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1.1;
  margin: 0 0 1rem;
}
.nojs__l { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.nojs__l li { margin-top: .6rem; }
.nojs__l a {
  color: var(--g1);
  text-decoration: underline; text-underline-offset: .25em;
}



@media (max-width: 1023px) {
  
  :root { --hdr: 80px; --pad: 15px; --voie: 0px; }
  .btn--nav        { display: none; }   
  .counter         { font-size: var(--t-xs); }
  .nav__logo       { font-size: var(--t-m); }
  .nav__logo .eye  { width: 22px; height: 22px; }
  .menu__panel     { width: min(255px, calc(100vw - 30px)); }
  .detail          { grid-template-columns: 1fr; }
  .hud             { padding-top: 6rem; }
  .hud__vert       { display: none; }
  
}


@media (max-width: 640px) {
  .pane { height: 110vh; }              

}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  
  [data-fx], [data-fx] > i { opacity: 1 !important; transform: none !important; }

  
  .carousel { perspective: none; overflow-x: auto; scroll-snap-type: x mandatory;
              display: flex; align-items: center; padding: 1rem 0; }
  .deck     { position: relative; inset: auto; display: flex; gap: 1rem;
              transform: none !important; padding: 0 1rem; }
  .card     { position: relative; left: auto; top: auto;
              transform: none !important; opacity: 1 !important;
              visibility: visible !important;
              flex: 0 0 var(--cw, 232px); scroll-snap-align: center; }
  .card__gloss { display: none; }
  
  .hud__scroll i::after { display: none; }
}