/* ============================================================
   ALTAR VISION — style.css
   Thème : monochrome BLANC sur NOIR (aucune couleur).
   Police unique : Mikadan (auto-hébergée).
   ============================================================ */

@font-face{
  font-family:'Mikadan';
  src:url('../assets/fonts/Mikadan_Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --cursor:url('../assets/img/altar-cursor-40.png') 0 0,auto;
  --bg:#000000;
  --bg-2:#0c0c0c;
  --panel:#111111;
  --ink:#ffffff;
  --muted:#a8a8a8;
  --line:rgba(255,255,255,.25);
  --line-soft:rgba(255,255,255,.12);
  --radius:14px;
  --pad:clamp(20px,5vw,72px);
  --display:'Mikadan',Impact,sans-serif;
  --body:'Mikadan',system-ui,sans-serif;
  --glow-w:min(130vw,1950px);
  --glow-h:min(72vw,880px);
  --glow-mask:radial-gradient(ellipse at center, #000 0%, #000 45%, transparent 72%);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  cursor:var(--cursor);
}

/* le curseur personnalisé reste identique sur tous les éléments cliquables/interactifs */
a,button,input,textarea,select,summary,label,
.btn,.carousel-nav,.audio-play,.audio-bar,.faq-q,[role="button"]{
  cursor:var(--cursor);
}

/* forcer le curseur même sur le widget embarqué Klaviyo (waitlist) */
.klaviyo-form-U7bA4R,
.klaviyo-form-U7bA4R *{
  cursor:var(--cursor) !important;
}

/* ---------- EFFET DE FOND (ovale scintillant, lignes de scan confinées à sa forme) ---------- */
body::before{
  content:"";
  position:fixed;
  top:50%;left:50%;
  width:var(--glow-w);
  height:var(--glow-h);
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.2) 0px, rgba(255,255,255,.2) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, rgba(255,255,255,.3) 0%, rgba(255,255,255,.12) 45%, transparent 72%);
  -webkit-mask-image:var(--glow-mask);
          mask-image:var(--glow-mask);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:-1;
  opacity:0;
  animation:
    glow-breathe 4s ease-in-out infinite,
    glow-flicker .3s linear infinite,
    glow-shake .12s linear infinite;
}

/* logo altar_logo au centre de la sphère, recoloré en noir (même couleur que
   le fond) et animé avec les mêmes effets (apparition/disparition, secousse).
   Le scintillement de luminosité n'est pas appliqué : sur un noir pur, une
   variation de brightness() reste invisible (0 × n = 0), donc sans effet. */
body::after{
  content:"";
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%); /* base de secours si l'animation est coupée (reduced-motion) */
  width:min(115vw,1000px);
  height:min(63vw,547px);
  margin:0;
  background-image:url('../assets/img/altar_logo.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  filter:brightness(0);
  pointer-events:none;
  z-index:-1;
  opacity:0;
  animation:
    logo-breathe 4s ease-in-out infinite,
    logo-shake .12s linear infinite;
}
@keyframes logo-breathe{
  0%{opacity:0}
  50%{opacity:.324}
  100%{opacity:0}
}
/* animation dédiée (identique à glow-shake dans l'esprit) pour ne dépendre
   d'aucun autre élément : centrage + secousse + parallaxe, tout-en-un. */
@keyframes logo-shake{
  0%,100%{transform:translate(-50%,-50%) translate(0,0) translate(var(--parallax-x,0px),var(--parallax-y,0px))}
  25%{transform:translate(-50%,-50%) translate(1.5px,-1px) translate(var(--parallax-x,0px),var(--parallax-y,0px))}
  50%{transform:translate(-50%,-50%) translate(-1px,1.5px) translate(var(--parallax-x,0px),var(--parallax-y,0px))}
  75%{transform:translate(-50%,-50%) translate(1px,1px) translate(var(--parallax-x,0px),var(--parallax-y,0px))}
}

/* particules (cubes/hexagones) tombant dans la sphère, injectées par main.js
   et confinées/synchronisées avec elle via le même masque et le même cycle. */
.bg-particles{
  position:fixed;
  top:50%;left:50%;
  width:var(--glow-w);
  height:var(--glow-h);
  transform:translate(-50%,-50%);
  overflow:hidden;
  -webkit-mask-image:var(--glow-mask);
          mask-image:var(--glow-mask);
  pointer-events:none;
  z-index:-1;
  opacity:0;
  animation:
    glow-breathe 4s ease-in-out infinite,
    glow-shake .12s linear infinite;
}
.bg-particle{
  position:absolute;
  top:-24px;left:0;
  background:rgba(0,0,0,.65);
  animation:particle-fall linear infinite;
}
.bg-particle.cube{width:7px;height:7px}
.bg-particle.hex{
  width:10px;height:9px;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}
@keyframes particle-fall{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  10%{opacity:.9}
  85%{opacity:.9}
  100%{transform:translateY(600px) rotate(200deg);opacity:0}
}

/* flash au clic : calque séparé de la sphère (body::before), positionné et
   masqué à l'identique, pour pulser/illuminer sans jamais toucher — donc
   sans jamais redémarrer — l'animation de respiration/scintillement en
   cours de la sphère elle-même. Injecté par main.js, déclenché à chaque clic. */
.bg-pulse{
  position:fixed;
  top:50%;left:50%;
  width:var(--glow-w);
  height:var(--glow-h);
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(255,255,255,.7) 0%, rgba(255,255,255,.3) 45%, transparent 72%);
  mix-blend-mode:screen;
  -webkit-mask-image:var(--glow-mask);
          mask-image:var(--glow-mask);
  pointer-events:none;
  z-index:-1;
  opacity:0;
}
.bg-pulse.active{animation:bg-pulse-flash .6s ease-out 1}
@keyframes bg-pulse-flash{
  0%{opacity:0;filter:brightness(1)}
  16.7%{opacity:.6;filter:brightness(1.3)}
  100%{opacity:0;filter:brightness(1)}
}
@media (prefers-reduced-motion:reduce){
  .bg-pulse{display:none}
}
/* téléphone : la sphère s'étire sur toute la largeur de l'écran, et le logo
   (dimensionné en dur, pas via --glow-w/-h) est réduit en conséquence. */
@media (max-width:600px){
  :root{
    --glow-w:100vw;
    --glow-h:230px;
  }
  body::after{
    width:160px;
    height:87px;
  }
}
/* cycle : 2s pour apparaître, 2s pour disparaître, puis on relance aussitôt (plus de pause) */
@keyframes glow-breathe{
  0%{opacity:0}
  50%{opacity:.9}
  100%{opacity:0}
}
/* scintillement très rapide, variation de luminosité modérée (+30%) */
@keyframes glow-flicker{
  0%{filter:brightness(1)}
  20%{filter:brightness(1.3)}
  40%{filter:brightness(.95)}
  60%{filter:brightness(1.3)}
  80%{filter:brightness(1)}
  100%{filter:brightness(1)}
}
/* tremblement rapide mais très léger : seule la vitesse est marquée, pas l'amplitude.
   translate(--parallax-x/-y) ajoute la parallaxe pilotée par la souris (main.js). */
@keyframes glow-shake{
  0%,100%{transform:translate(-50%,-50%) translate(0,0) translate(var(--parallax-x,0px),var(--parallax-y,0px))}
  25%{transform:translate(-50%,-50%) translate(1.5px,-1px) translate(var(--parallax-x,0px),var(--parallax-y,0px))}
  50%{transform:translate(-50%,-50%) translate(-1px,1.5px) translate(var(--parallax-x,0px),var(--parallax-y,0px))}
  75%{transform:translate(-50%,-50%) translate(1px,1px) translate(var(--parallax-x,0px),var(--parallax-y,0px))}
}

@media (prefers-reduced-motion:reduce){
  body::before,body::after,.bg-particles{animation:none;opacity:0}
  .waitlist::before,.ticker::before,.crosslink::before{animation:none}
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{opacity:.6}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--pad);
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-links{display:flex;gap:clamp(16px,3vw,34px)}
.nav-links a{
  font-family:var(--display);
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);transition:color .2s;opacity:1;
}
.nav-links a:hover{color:var(--ink);opacity:1}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--ink)}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:20px;width:auto;display:block}
/* téléphone : le logo laisse toute la place aux 4 catégories, qui passent
   sur 2 lignes proprement (plutôt que de se compresser et faire retourner
   "ALTAR CORP" à la ligne au milieu du mot) et restent bien centrées. */
@media (max-width:600px){
  .nav-logo{display:none}
  .nav{justify-content:center}
  .nav-links{flex-wrap:wrap;justify-content:center;row-gap:8px}
}
/* ordinateur : léger espace au-dessus des catégories pour un centrage plus
   équilibré dans le header. */
@media (min-width:601px){
  .nav-links{padding-top:3px}
}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(64px,11vw,150px) 0}
.sep{
  display:flex;align-items:center;gap:14px;color:var(--ink);
  margin:clamp(8px,2vw,28px) auto;max-width:1160px;padding:0 var(--pad);
}
.sep img{height:22px;width:auto;flex:0 0 auto}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
/* sep imbriqué dans un .wrap (ex: entre waitlist et "CONNECT WITH ALTAR") :
   pas de double padding horizontal, doit occuper toute la largeur du .wrap. */
.wrap > .sep{padding:0;max-width:none}

/* ---------- TITRES ---------- */
.h-display{
  font-family:var(--display);font-weight:400;
  text-transform:uppercase;line-height:.95;letter-spacing:.02em;
  margin:0 0 .5em;color:var(--ink);
}
.h-xl{font-size:clamp(44px,9vw,120px)}
.h-lg{font-size:clamp(34px,6vw,72px)}
.h-md{font-size:clamp(24px,4vw,44px)}
.h-sm{font-size:clamp(18px,2.6vw,26px)}
.eyebrow{
  font-family:var(--body);font-weight:500;color:var(--ink);
  letter-spacing:.3em;text-transform:uppercase;font-size:12px;margin:0 0 14px;
}

/* ---------- HERO (home) ---------- */
.hero{
  min-height:calc(60svh - 60px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:26px;padding-top:8px;padding-bottom:clamp(8px,2vw,24px);
}
/* altar corp : le titre n'a plus de gros logo au-dessus, donc même distance
   au header que les titres media/lore (voir .media-intro / .lore-intro). */
.corp-centered .hero{padding-top:clamp(70px,12vw,160px)}
.hero .brand{color:var(--ink);margin-bottom:0}
.hero-logo{width:min(240px,45vw);margin:0 auto}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* ---------- BOUTONS (coins façon HUD) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  padding:17px 38px;border-radius:0;border:none;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:
    13px 2px,2px 13px,
    13px 2px,2px 13px,
    13px 2px,2px 13px,
    13px 2px,2px 13px;
  background-position:
    top left,top left,
    top right,top right,
    bottom left,bottom left,
    bottom right,bottom right;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,background-color .2s,color .2s;
  cursor:var(--cursor);
}
.btn:hover{
  opacity:1;
  transform:scale(.96);
  filter:brightness(1.4);
  box-shadow:0 0 22px rgba(255,255,255,.3);
}
.btn-solid{background-color:var(--ink);color:var(--bg)}
.btn-ghost{background-color:transparent;color:var(--ink)}
.btn-dl{
  padding:13px 24px;font-size:13px;
  background-color:transparent;color:var(--ink);
  background-size:
    10px 2px,2px 10px,
    10px 2px,2px 10px,
    10px 2px,2px 10px,
    10px 2px,2px 10px;
}

/* ---------- CARROUSEL ---------- */
/* Hauteur commune = celle du plus grand visuel ; chaque image garde ses
   propres proportions (largeur automatique, jamais recadrée). */
.carousel{position:relative}
.carousel-track{
  display:flex;gap:18px;overflow-x:auto;
  align-items:center;touch-action:pan-x pan-y;
  padding:6px 2px 18px;scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-item{
  flex:0 0 auto;
  background:var(--bg-2);border-radius:var(--radius);overflow:hidden;
  height:clamp(240px,42vw,420px);
}
.carousel-item img{height:100%;width:auto;max-width:min(80vw,520px);object-fit:contain;border:none}
.carousel-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:0;border:none;
  background-color:transparent;color:var(--ink);
  background-repeat:no-repeat;
  background-image:
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:
    11px 2px,2px 11px,
    11px 2px,2px 11px,
    11px 2px,2px 11px,
    11px 2px,2px 11px;
  background-position:
    top left,top left,
    top right,top right,
    bottom left,bottom left,
    bottom right,bottom right;
  font-size:18px;cursor:var(--cursor);display:grid;place-items:center;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;z-index:2;
}
.carousel-nav:hover{
  transform:translateY(-50%) scale(.92);
  filter:brightness(1.4);
  box-shadow:0 0 18px rgba(255,255,255,.3);
}
.carousel-nav.prev{left:-8px}
.carousel-nav.next{right:-8px}

/* home (desktop uniquement) : les boutons du carousel sont écartés pour ne
   plus chevaucher les visuels, désormais de largeur variable selon l'image. */
@media (min-width:761px){
  #zenyth-aim .carousel-nav.prev{left:-64px}
  #zenyth-aim .carousel-nav.next{right:-64px}
}
/* téléphone : pas de flèches, navigation uniquement au doigt (swipe) */
@media (max-width:600px){
  .carousel-nav{display:none}
}

/* ---------- WAITLIST ---------- */
.waitlist{
  margin-top:64px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(16px,2.4vw,28px) clamp(26px,4vw,48px);text-align:center;
  position:relative;overflow:hidden;
}
.waitlist h3{margin-top:14px}
/* même effet de lignes de scan que la sphère de fond, appliqué aux cases
   pleines (waitlist, bannières défilantes, bloc juste avant le footer) */
.waitlist::before,.ticker::before,.crosslink::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.1) 0px,
    rgba(255,255,255,.1) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:screen;
  animation:scanlines-move .8s linear infinite;
}
@keyframes scanlines-move{
  from{background-position-y:0}
  to{background-position-y:3px}
}
.waitlist-form{
  display:flex;gap:12px;max-width:520px;margin:22px auto 0;flex-wrap:wrap;justify-content:center;
}
.waitlist-form input{
  flex:1;min-width:220px;
  background:var(--bg);border:1px solid var(--line);border-radius:999px;
  color:var(--ink);padding:14px 22px;font-family:var(--body);font-size:15px;
}
.waitlist-form input::placeholder{color:var(--muted)}
.waitlist-form input:focus{outline:none;border-color:var(--ink)}
.form-note{color:var(--muted);font-size:13px;margin-top:16px}

/* ---------- BANNIÈRES BAS DE HOME ---------- */
.banner{
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:var(--bg-2);display:grid;place-items:center;
  min-height:clamp(220px,38vw,460px);margin-top:44px;overflow:hidden;
}
.banner img{width:min(340px,50%)}

/* ---------- STATS (media) ---------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;margin-top:34px;
}
.stat{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:34px 26px;text-align:center;
}
.stat b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(40px,6vw,64px);color:var(--ink);line-height:1;
}
.stat span{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:13px}

/* ---------- ABOUT ---------- */
.about p{
  font-size:clamp(15px,1.6vw,18px);line-height:1.6;font-weight:500;
  max-width:70ch;
  margin:0 0 1.6em;color:var(--ink);
}
.about strong{font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* ---------- BLOCS TÉLÉCHARGEMENT ---------- */
.dl-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.media-block{margin-top:88px}
.media-block:first-of-type{margin-top:32px}
.media-block h3{margin-bottom:22px}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}
.duo .frame{aspect-ratio:1/1}
.frame{
  background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--radius);
  display:grid;place-items:center;padding:24px;overflow:hidden;
}
.frame img{width:70%;object-fit:contain}
.frame.wide{aspect-ratio:16/9}
.frame.wide img{width:45%}

/* ---------- GALERIE MADE BY YOU ---------- */
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;margin-top:32px;
}
.gallery .frame{aspect-ratio:3/4;padding:18px}
.gallery .frame img{width:75%}

/* ---------- CONNECT CARDS (ticker défilant) ---------- */
.connect-grid{display:grid;gap:22px;margin:32px auto 56px;max-width:700px}
.connect-card{
  display:block;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:border-color .2s,transform .15s;
}
.connect-card:hover{border-color:var(--ink);transform:translateY(-3px);opacity:1}
.ticker{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft);
  background:var(--panel);padding:14px 0;white-space:nowrap;
}
.ticker-inner{
  display:inline-block;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(22px,3.4vw,34px);color:var(--ink);letter-spacing:.06em;
  animation:ticker 14s linear infinite;
}
.ticker-inner span{margin-right:.8em;display:inline-flex;align-items:center;gap:.35em}
.ticker-inner span::after{
  content:"";display:inline-block;width:.7em;height:.7em;
  margin-left:.8em;vertical-align:middle;
  background-repeat:no-repeat;background-size:contain;background-position:center;
}
.connect-card.spotify .ticker-inner span::after{background-image:url('../assets/img/spotify logo.png')}
.connect-card.discord .ticker-inner span::after{background-image:url('../assets/img/discord logo.png')}
.connect-card.patreon .ticker-inner span::after{background-image:url('../assets/img/patreon logo.png')}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.connect-body{padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:18px}
.connect-body p{margin:0;color:var(--muted);max-width:60ch}
.connect-body .go{font-family:var(--display);color:var(--ink);letter-spacing:.1em;white-space:nowrap}

/* ---------- LORE ---------- */
.lore-intro{text-align:center;padding-top:clamp(70px,12vw,160px);padding-bottom:clamp(24px,4vw,56px)}
.media-intro{padding-top:clamp(70px,12vw,160px)}
.media-outro{padding-bottom:clamp(90px,14vw,190px)}
.audio-player{
  max-width:640px;margin:52px auto 0;background:var(--panel);
  border:1px solid var(--line);border-radius:0;
  display:flex;align-items:center;gap:16px;padding:12px 22px;
}
.audio-play{
  width:44px;height:44px;border-radius:0;flex:0 0 44px;
  background-color:transparent;color:var(--ink);border:none;cursor:var(--cursor);
  background-repeat:no-repeat;
  background-image:
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:
    11px 2px,2px 11px,
    11px 2px,2px 11px,
    11px 2px,2px 11px,
    11px 2px,2px 11px;
  background-position:
    top left,top left,
    top right,top right,
    bottom left,bottom left,
    bottom right,bottom right;
  font-size:16px;display:grid;place-items:center;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.audio-play:hover{
  transform:scale(.92);
  filter:brightness(1.4);
  box-shadow:0 0 18px rgba(255,255,255,.3);
}
.audio-bar{flex:1;height:6px;background:rgba(255,255,255,.15);border-radius:99px;position:relative;cursor:var(--cursor)}
.audio-bar-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink);border-radius:99px}
.audio-time{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

.lore-text{max-width:860px;margin:0 auto;padding-top:clamp(24px,4vw,56px)}
.corp-story{padding-top:clamp(32px,6vw,72px)}
.lore-text p{
  font-size:clamp(19px,2.4vw,25px);line-height:1.6;font-weight:500;
  margin:0 0 1.35em;
}
.lore-text p.beat{
  font-family:var(--display);color:var(--ink);text-transform:uppercase;
  font-size:clamp(22px,3vw,32px);text-align:center;margin:1.6em 0;
}

/* ---------- CHARACTERS ---------- */
.char{
  display:grid;grid-template-columns:minmax(240px,380px) 1fr;
  gap:clamp(22px,4vw,54px);align-items:center;margin-top:76px;
}
.char.flip{grid-template-columns:1fr minmax(240px,380px)}
.char.flip .char-img{order:2}
.char-img{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  aspect-ratio:9/14;display:grid;place-items:center;padding:26px;
}
.char-img img{width:72%;object-fit:contain}
.char-name{
  font-family:var(--display);font-size:clamp(28px,4vw,46px);
  color:var(--ink);text-transform:uppercase;margin:0 0 14px;letter-spacing:.04em;
}
.char-desc{color:var(--ink);font-size:17px;white-space:pre-line}
.credit{
  text-align:center;color:var(--muted);margin-top:90px;font-size:14px;
  letter-spacing:.04em;
}

/* ---------- FOOTER ---------- */
.footer{
  border-top:1px solid var(--line-soft);padding:34px var(--pad);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  color:var(--muted);font-size:13px;
}
.footer .mark{font-family:var(--display);color:var(--ink);letter-spacing:.08em}

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .duo{grid-template-columns:1fr}
  .char,.char.flip{grid-template-columns:1fr}
  /* ordre demandé sur téléphone : nom, image, description. Le <div> qui
     enveloppe habituellement le nom + la description doit "disparaître"
     (display:contents) pour que ces deux éléments deviennent des items de
     grille indépendants de .char, chacun avec son propre "order". */
  .char > div:not(.char-img){display:contents}
  .char-name{order:1}
  .char-img{order:2;max-width:320px;margin:0 auto}
  .char-desc{order:3}
  .connect-body{flex-direction:column;align-items:flex-start}
  .carousel-nav.prev{left:4px}
  .carousel-nav.next{right:4px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-inner{animation:none}
  .btn:hover,.connect-card:hover{transform:none}
}

/* ============================================================
   ALTAR CORP (page jeu) — ajouts
   ============================================================ */

/* ---------- HERO JEU (sous-titre + CTA Steam/Discord) ---------- */
.corp-tagline{
  color:var(--muted);font-size:clamp(16px,2.2vw,21px);
  max-width:52ch;margin:0 auto;font-weight:500;
}
.steam-capsule{
  width:min(90%,460px);border-radius:var(--radius);
  border:1px solid var(--line-soft);
}

/* ---------- TRAILER ---------- */
.trailer{
  margin-top:8px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--bg-2);aspect-ratio:16/9;
}
.trailer video,.trailer iframe{width:100%;height:100%;object-fit:cover;display:block;border:none}

/* ---------- FAQ (accordéon) ---------- */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-item:first-child{border-top:1px solid var(--line-soft)}
.faq-q{
  width:100%;background:none;border:none;cursor:var(--cursor);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 4px;text-align:left;color:var(--ink);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(17px,2.4vw,23px);transition:opacity .2s;
}
.faq-q:hover{opacity:.65}
.faq-icon{flex:0 0 auto;font-size:26px;line-height:1;transition:transform .25s}
.faq-item[open] .faq-icon{transform:rotate(45deg)}
/* display:grid + 0fr→1fr : s'anime jusqu'à la hauteur réelle du contenu,
   quelle que soit sa longueur (contrairement à un max-height fixe, dont
   l'animation semble instantanée pour un texte court). */
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .2s ease;
}
.faq-item[open] .faq-a{grid-template-rows:1fr}
.faq-a > *{overflow:hidden;min-height:0}
.faq-a p{
  margin:0;padding:0 4px 26px;color:var(--muted);
  font-size:clamp(15px,2vw,17px);line-height:1.6;max-width:70ch;
}

/* ---------- CROSS-LIEN VERS LA MARQUE ---------- */
.crosslink{
  position:relative;overflow:hidden;
  margin-top:44px;margin-bottom:56px;background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:clamp(24px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.crosslink p{margin:0;color:var(--muted);max-width:52ch}
.crosslink .h-sm{margin:0 0 6px;color:var(--ink);font-family:var(--display);text-transform:uppercase}

@media (max-width:600px){
  .crosslink{flex-direction:column;align-items:flex-start;text-align:left}
}

/* ============================================================
   MODIFS — titres centrés (home + altar corp)
   ============================================================ */
.home-centered .h-display,
.corp-centered .h-display{text-align:center}

/* le carrousel infini : masque la barre de défilement, garde le snap */
.carousel-track{scroll-behavior:smooth}