/* ═══════════════════════════════════════════════════════════════════
   SECTIONS — hero, bandeau, description, chiffres, diffusions, réseaux, contact
   ═══════════════════════════════════════════════════════════════════ */

section { position: relative; }

/* Chaque section porte son thème : le fond papier « déchire » l'encre. */
[data-theme="paper"] {
  background: var(--bg);
  color: var(--fg);
}

/* ══════════════════════════════════ HERO */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding: var(--gutter);
  padding-top: clamp(6rem, 14vh, 9rem);
  /* Le lecteur et la bascule de teinte sont fixes en bas de l'écran : on
     réserve leur hauteur pour que les boutons ne passent jamais dessous. */
  padding-bottom: clamp(6rem, 13vh, 7.5rem);
  overflow: hidden;
}

/* Aura : une lueur d'accent qui respire derrière le portrait, et un fondu vers
   le bas pour que le hero se pose sur la page au lieu d'être découpé. */
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -18%;
  width: min(80vw, 70rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 30%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 10%, transparent) 35%,
    transparent 65%);
  opacity: 0.55;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 28%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.45));
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero > .hero__ideogram { position: absolute; z-index: 0; }
.hero > .portrait { position: absolute; z-index: 2; }
.hero > .hero__cue { position: absolute; }

/* Filigrane 呪術 — contour seul, teinté : présent sans jamais insister.
   Centrage par flex et non par `translateY(-50%)` : la parallaxe JS écrit dans
   `transform`, elle écraserait le centrage. */
.hero__ideogram {
  top: 0;
  bottom: 0;
  right: clamp(-1rem, 2vw, 4rem);
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: clamp(14rem, 36vw, 32rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 38%, transparent);
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* ── Portrait ───────────────────────────────────────────────
   L'avatar est une illustration de 183 px de large : on ne l'étire jamais
   au-delà de ~260 px. Le grain et le voile d'encre absorbent le reste. */

@property --ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.portrait {
  top: clamp(5.5rem, 15vh, 11rem);
  right: var(--gutter);
  display: grid;
  gap: 0.9rem;
  width: clamp(130px, 18vw, 260px);
  will-change: transform;
}

.portrait__frame {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--ink-800);
  box-shadow:
    0 30px 80px -30px color-mix(in srgb, var(--accent) 70%, transparent),
    0 0 0 1px var(--glass-border);
}
/* Anneau de lumière qui tourne autour du cadre. */
.portrait__frame::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--radius-lg) + 4px);
  padding: 2px;
  background: conic-gradient(from var(--ang),
    transparent 0%, var(--accent) 12%, var(--accent-2) 24%, transparent 40%,
    transparent 60%, var(--accent-2) 74%, var(--accent) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin-ang 7s linear infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes spin-ang { to { --ang: 360deg; } }

/* Cadre décalé : une seconde feuille glissée derrière la première. */
.portrait__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  opacity: 0;
  transform: translate3d(8px, 8px, 0);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.portrait:hover .portrait__frame::after {
  opacity: 0.8;
  transform: translate3d(14px, 14px, 0);
}

.portrait__clip {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.portrait__clip::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--ink-1000) 70%, transparent), transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%);
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-out);
}
.portrait:hover .portrait__clip::after { opacity: 0; }

.portrait__img {
  width: 100%;
  height: auto;
  aspect-ratio: 183 / 226;
  object-fit: cover;
  /* Repos : lavis désaturé, à peine teinté. Survol : la couleur revient. */
  filter: grayscale(0.7) contrast(1.15) brightness(0.9) sepia(0.15);
  transform: scale(1.02);
  transition: filter 1s var(--ease-out), transform 1.4s var(--ease-out);
}
.portrait:hover .portrait__img {
  filter: grayscale(0) contrast(1.05) brightness(1);
  transform: scale(1.07);
}

/* Sceau vermillon, posé en coin comme un cachet d'atelier. */
.portrait__seal {
  position: absolute;
  right: -0.6rem;
  bottom: -0.6rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-1000);
  background: var(--grad-accent);
  border-radius: 8px;
  box-shadow: 0 8px 24px -6px var(--glow);
  transform: rotate(-6deg);
  transition: transform 0.7s var(--ease-out);
}
.portrait:hover .portrait__seal { transform: rotate(6deg) scale(1.12); }

.portrait__cap {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--fg-dim);
}
.portrait__cap::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

@media (max-width: 860px) {
  .portrait {
    top: clamp(4.5rem, 11vh, 7rem);
    width: clamp(96px, 30vw, 140px);
  }
  .portrait__cap { display: none; }
}

.hero__grid { display: grid; gap: var(--sp-lg); }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.7em;
  padding: 0.55rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.hero__eyebrow .jp { color: var(--accent-2); font-size: 0.85rem; text-transform: none; }
.hero__eyebrow .sep { opacity: 0.4; }

.hero__title {
  font-size: var(--t-display);
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: nowrap;
}
/* Sur les très petits écrans, le plancher de `--t-display` (3.6rem) l'emporte
   sur le vw et le titre finirait par déborder. On repasse en pure proportion :
   il ne peut alors plus être plus large que l'écran. */
@media (max-width: 400px) {
  .hero__title { font-size: 15vw; }
}
.hero__title-line { display: block; }

/* Première ligne : chaque lettre porte son propre dégradé vertical, du papier
   clair vers une pointe d'accent. */
.hero__title-line:not(.hero__title-line--alt) .w {
  background: linear-gradient(180deg,
    var(--paper-warm) 25%,
    color-mix(in srgb, var(--paper) 60%, var(--accent)) 135%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Un dégradé `background-clip: text` ne peint que dans la boîte de la lettre,
   et la boîte est plus étroite que le tracé (crénage négatif, italique). On
   agrandit donc la boîte ET son masque d'autant, sans toucher à la mise en page
   (marges négatives équivalentes). */
.hero__title-line:not(.hero__title-line--alt) .m,
.contact__title-em .m,
.description__statement em .m {
  padding-inline: 0.12em;
  margin-inline: -0.12em;
}
.hero__title-line:not(.hero__title-line--alt) .w,
.contact__title-em .w,
.description__statement em .w {
  padding-inline: 0.12em;
  margin-inline: -0.12em;
}

.hero__title-line--alt {
  padding-left: 0.08em;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--paper) 85%, transparent);
  filter: drop-shadow(0 0 30px color-mix(in srgb, var(--accent) 28%, transparent));
  transition: filter 0.9s var(--ease-out);
}
/* Le tracé creux se remplit de lumière au survol du titre. */
.hero__title:hover .hero__title-line--alt {
  -webkit-text-stroke-color: transparent;
  filter: drop-shadow(0 0 46px color-mix(in srgb, var(--accent) 60%, transparent));
}
.js .hero__title .hero__title-line--alt .w {
  transition: transform 1.05s var(--ease-out), color 0.7s var(--ease-out);
}
.hero__title:hover .hero__title-line--alt .w {
  color: var(--accent);
}

.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--rule);
}
.hero__lead { display: grid; gap: var(--sp-md); justify-items: start; }
.hero__blurb {
  max-width: 42ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--fg-mute);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero__ticker { display: flex; gap: var(--col-gap); }
.hero__ticker-item {
  display: grid;
  gap: 0.4rem;
  min-width: 7.5rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: linear-gradient(160deg, var(--glass-hi), var(--glass));
}
.hero__ticker-item dt {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.hero__ticker-item dd {
  font-size: 0.78rem;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.hero__ticker-item dd.is-online::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 0.55em;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 10px #4ADE80;
  vertical-align: 1px;
}

.hero__cue {
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  transform: translateX(-50%);
  color: var(--fg-dim);
  z-index: 2;
}
.hero__cue-line {
  width: 1px;
  height: clamp(2rem, 5vh, 3.5rem);
  background: linear-gradient(to bottom, transparent, var(--accent));
  transform-origin: 50% 0;
  animation: cue 2.6s var(--ease-in-out) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
  50%      { transform: scaleY(1);   opacity: 1; }
}
.hero__cue-text { writing-mode: vertical-rl; }

@media (max-width: 560px) {
  /* Les trois pastilles tiennent sur une ligne : le lecteur fixe en bas ne
     doit pas en cacher une. */
  .hero .hero__ticker { flex-wrap: wrap; gap: 0.5rem; }
  .hero__ticker-item { flex: 1 1 calc(50% - 0.25rem); min-width: 0; padding: 0.7rem 0.8rem; }
  .hero__ticker-item dd { letter-spacing: 0.06em; font-size: 0.7rem; }
}

@media (max-width: 860px) {
  /* Le portrait est posé en haut à droite : le titre descend pour ne pas passer dessous. */
  .hero__title { margin-top: clamp(2.5rem, 7vh, 3.5rem); }
  .hero__foot { grid-template-columns: 1fr; align-items: start; }
  .hero__ticker { flex-wrap: wrap; }
  .hero__cue { display: none; }
}

/* ══════════════════════════════════ BANDEAU */

/* Une bande inclinée, cousue entre le hero et la page. */
.band {
  position: relative;
  z-index: 3;
  margin-block: clamp(-3rem, -4vw, -1.5rem) clamp(-1.5rem, -2vw, -0.75rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  pointer-events: none;
}
.band__rot {
  width: 112%;
  margin-left: -6%;
  transform: rotate(-1.6deg);
  overflow: hidden;
  background: var(--grad-accent);
  box-shadow: 0 20px 60px -20px var(--glow);
}
.band__track {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  width: max-content;
  padding-block: clamp(0.7rem, 1.4vw, 1.1rem);
  animation: band 38s linear infinite;
}
.band__track span {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-1000);
}
.band__track span.alt {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-1000);
}
.band__track i {
  font-style: normal;
  font-size: clamp(0.9rem, 1.5vw, 1.4rem);
  color: var(--ink-1000);
  opacity: 0.7;
}
@keyframes band { to { transform: translate3d(-50%, 0, 0); } }

/* ══════════════════════════════════ DESCRIPTION */

.description {
  padding: var(--sp-sect) var(--gutter);
  /* Bords supérieur et inférieur irréguliers : la feuille est déchirée, pas coupée. */
  clip-path: polygon(
    0 0.6%, 8% 0.1%, 19% 0.9%, 31% 0.2%, 44% 1.1%, 57% 0.3%,
    69% 1%, 81% 0.2%, 92% 0.8%, 100% 0.2%,
    100% 99.5%, 90% 99.9%, 78% 99.2%, 64% 99.8%, 50% 99.1%,
    37% 99.8%, 24% 99.3%, 11% 99.9%, 0 99.4%
  );
  background:
    radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink-900) 11%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--bg);
  overflow: hidden;
}
/* Ghost : un grand kanji en filigrane, à demi sorti de la page. */
.description::after {
  content: "静";
  position: absolute;
  right: -2%;
  bottom: -14%;
  font-family: var(--font-display);
  font-size: clamp(16rem, 38vw, 38rem);
  line-height: 1;
  color: var(--ink-900);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
}
.description__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) minmax(0, 4fr);
  gap: var(--sp-lg);
  max-width: 92rem;
  margin-inline: auto;
}
.description__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-lg);
}
.description__vertical {
  writing-mode: vertical-rl;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  color: var(--accent);
  opacity: 0.85;
}

.description__statement {
  position: relative;
  font-size: clamp(2rem, 4.4vw, 4.75rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 20ch;
  text-wrap: pretty;
}
.description__statement::before {
  content: "“";
  position: absolute;
  left: -0.12em;
  top: -0.55em;
  font-size: 2.6em;
  line-height: 1;
  color: var(--accent);
  opacity: 0.22;
  pointer-events: none;
}
.description__statement em {
  font-style: italic;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.description__statement em .w {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* L'aparté entre parenthèses : il chuchote, il ne s'aligne pas avec le reste. */
.description__aside-note {
  display: inline-block;
  font-style: italic;
  font-size: 0.92em;
  color: var(--accent);
  opacity: 0.9;
}

.description__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--sp-md) var(--sp-lg);
  max-width: 58rem;
  margin-top: var(--sp-lg);
  color: var(--fg-mute);
  font-size: clamp(1.02rem, 1.2vw, 1.25rem);
}
.description__cols > p {
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--rule);
}

.description__sign {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: var(--sp-lg);
}
.description__sign-seal {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--paper-warm);
  background: var(--shu);
  border-radius: 8px;
  transform: rotate(-4deg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--shu) 40%, transparent),
              0 12px 30px -10px var(--glow);
}
.description__sign-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

@media (max-width: 860px) {
  .description__grid { grid-template-columns: 1fr; }
  .description__aside { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1.5rem; }
  .description__vertical { writing-mode: horizontal-tb; }
}

/* ══════════════════════════════════ CHIFFRES */

.stats { padding: var(--sp-sect) var(--gutter); }
.stats__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--col-gap);
  max-width: 92rem;
  margin-inline: auto;
}
.stats__item {
  display: grid;
  gap: var(--sp-md);
  padding: clamp(1.25rem, 2vw, 1.9rem);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--glass-hi), var(--glass));
  transition: border-color 0.6s var(--ease-out);
}
.stats__item:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
/* Filet de lumière qui se trace en haut de la carte au survol. */
.stats__item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease-out);
}
.stats__item:hover::before { transform: scaleX(1); }

.stats__num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--paper-warm) 30%, var(--accent-2) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats__label {
  display: grid;
  gap: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.stats__label .jp {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: none;
  color: var(--accent-2);
  opacity: 0.8;
  font-style: normal;
}

/* ══════════════════════════════════ LIVE */

.live { padding: var(--sp-sect) var(--gutter); }

.live__stage {
  position: relative;
  isolation: isolate;
  max-width: 92rem;
  margin-inline: auto;
}
/* Aurore : la lueur du lecteur déborde bien au-delà du cadre. */
.live__stage::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  background:
    radial-gradient(50% 60% at 25% 55%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
    radial-gradient(45% 55% at 78% 40%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 70%);
  filter: blur(50px);
  opacity: 0.8;
  pointer-events: none;
}

/* Barre de fenêtre : le lecteur est présenté comme un écran, pas un embed. */
.live__chrome {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--glass-border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(180deg, var(--glass-hi), var(--glass));
}
.live__dots { display: flex; gap: 6px; }
.live__dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink-400);
}
.live__dots i:first-child { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.live__chan { color: var(--fg-mute); }
.live__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.8em;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 100px;
  color: var(--accent);
}
.live__badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

.live__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-1000);
  border: 1px solid var(--glass-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
    0 50px 120px -50px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: box-shadow 0.9s var(--ease-out), border-color 0.9s var(--ease-out);
}
.live__frame:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    0 60px 150px -45px color-mix(in srgb, var(--accent) 90%, transparent);
}

.live__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Repli : ni iframe possible (file://), ni Twitch joignable. */
.live__fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-content: center;
  justify-items: center;
  gap: var(--sp-sm);
  padding: var(--gutter);
  text-align: center;
  color: var(--fg-mute);
  background:
    radial-gradient(60% 70% at 50% 40%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
.live__frame.is-unavailable .live__fallback { display: grid; }
.live__fallback-kanji {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1;
  color: var(--accent);
  opacity: 0.6;
}
.live__fallback-link {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--accent);
  color: var(--fg);
}

.live__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-top: var(--sp-md);
}
.live__hint { color: var(--fg-dim); }

@media (max-width: 560px) {
  .live__bar { flex-direction: column; align-items: flex-start; gap: var(--sp-sm); }
  .live__badge { display: none; }
}

.live__head,
.net__head {
  display: grid;
  gap: var(--sp-md);
  max-width: 92rem;
  margin: 0 auto var(--sp-lg);
}
.live__title,
.net__title {
  font-size: var(--t-h2);
  letter-spacing: -0.045em;
}
.live__note,
.net__note {
  max-width: 38ch;
  color: var(--fg-mute);
  justify-self: end;
  text-align: right;
}

@media (max-width: 900px) {
  .live__note, .net__note { justify-self: start; text-align: left; }
}

/* ══════════════════════════════════ RÉSEAUX */

.net {
  position: relative;
  padding: var(--sp-sect) var(--gutter);
  overflow: hidden;
}
/* 縁 (en) — le lien qui relie les gens. */
.net__ideogram {
  position: absolute;
  left: clamp(-2rem, -2vw, 0rem);
  bottom: -4%;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: clamp(10rem, 26vw, 24rem);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 35%, transparent);
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* Bento : le Twitch domine, SoundCloud s'étire, les autres se rangent autour. */
.net__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--col-gap);
  max-width: 92rem;
  margin-inline: auto;
}

/* Le cube. Le conteneur porte la perspective ; c'est la face qui pivote —
   sinon chaque tuile aurait son propre point de fuite et l'inclinaison
   paraîtrait plate. */
.tile {
  --brand: var(--accent);
  display: grid;
  perspective: 900px;
  aspect-ratio: 1 / 1;
}
.tile--hero { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.tile--wide { grid-column: span 2; aspect-ratio: auto; }

.tile[data-brand="twitch"]     { --brand: #9146FF; }
.tile[data-brand="discord"]    { --brand: #5865F2; }
.tile[data-brand="tiktok"]     { --brand: #25F4EE; }
.tile[data-brand="instagram"]  { --brand: #E1306C; }
.tile[data-brand="spotify"]    { --brand: #1ED760; }
.tile[data-brand="soundcloud"] { --brand: #FF5500; }

.tile__face {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: var(--sp-md);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    linear-gradient(160deg, var(--glass-hi), var(--glass));
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: border-color 0.6s var(--ease-out), background 0.6s var(--ease-out), box-shadow 0.7s var(--ease-out);
  will-change: transform;
}
.tile__face:hover {
  border-color: color-mix(in srgb, var(--brand) 70%, transparent);
  box-shadow:
    0 30px 70px -30px color-mix(in srgb, var(--brand) 80%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent);
}

/* Lueur de marque : elle monte depuis le bas de la tuile au survol. */
.tile__face::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 90% at 50% 120%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%),
    linear-gradient(to top, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%);
  opacity: 0;
  transform: translate3d(0, 18%, 0);
  transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out);
  z-index: 0;
}
.tile__face:hover::before { opacity: 1; transform: none; }

/* Reflet piloté par le curseur (--mx / --my viennent de scripts/reveal.js).
   Il donne au cube une surface : sans lui, l'inclinaison ne se lit pas. */
.tile__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.16), transparent 55%);
  opacity: var(--on, 0);
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 2;
}

.tile__face > * { position: relative; z-index: 1; }

.tile__idx {
  grid-column: 1;
  color: var(--fg-dim);
  transition: color 0.5s var(--ease-out);
}
.tile__go {
  grid-column: 2;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  font-size: 0.85rem;
  color: var(--fg-mute);
  transition: transform 0.6s var(--ease-out), color 0.5s var(--ease-out),
              background 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.tile__face:hover .tile__go {
  transform: translate(3px, -3px) rotate(0deg);
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.tile__icon {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: start;
  width: clamp(2.25rem, 4vw, 3.25rem);
  height: clamp(2.25rem, 4vw, 3.25rem);
  fill: currentColor;
  color: var(--fg-mute);
  /* Le logo se soulève de la face : c'est ce décalage en Z qui fait le cube. */
  transform: translateZ(28px);
  transition: color 0.5s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
.tile--hero .tile__icon {
  width: clamp(4rem, 9vw, 8rem);
  height: clamp(4rem, 9vw, 8rem);
}
.tile__face:hover .tile__icon {
  color: #fff;
  transform: translateZ(46px) scale(1.08);
  filter: drop-shadow(0 0 22px var(--brand));
}

.tile__body {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.25rem;
  transform: translateZ(14px);
}
.tile__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  line-height: 1.15;
  transition: color 0.5s var(--ease-out);
}
.tile--hero .tile__name { font-size: clamp(2rem, 4.2vw, 4rem); letter-spacing: -0.03em; }
.tile__handle { color: var(--fg-dim); transition: color 0.5s var(--ease-out); }

.tile__face:hover .tile__idx,
.tile__face:hover .tile__handle { color: color-mix(in srgb, #fff 85%, transparent); }

.tile__badge {
  padding: 0.2em 0.55em;
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  color: var(--fg-dim);
  white-space: nowrap;
  transition: border-color 0.5s, color 0.5s;
}
.tile__face:hover .tile__badge {
  color: #fff;
  border-color: color-mix(in srgb, #fff 45%, transparent);
}

/* Comptes secondaires : présents, mais au second plan tant qu'on ne les vise pas. */
.tile--alt .tile__face { opacity: 0.6; }
.tile--alt .tile__face:hover { opacity: 1; }

@media (max-width: 860px) {
  .net__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--hero { aspect-ratio: 2 / 1; grid-row: auto; }
  .tile--wide { aspect-ratio: 2 / 1; }
}
@media (max-width: 560px) {
  .tile__face { padding: var(--sp-sm); }
  .tile--hero .tile__icon { width: 3.25rem; height: 3.25rem; }
  .tile--hero .tile__name { font-size: clamp(1.6rem, 8vw, 2.4rem); }
}

/* ══════════════════════════════════ PARTENAIRES */

.marquee-wrap { padding-block: var(--sp-lg); }

/* ══════════════════════════════════ CONTACT */

.contact {
  position: relative;
  display: grid;
  gap: var(--sp-md);
  padding: var(--sp-sect) var(--gutter) clamp(4rem, 8vw, 8rem);
  max-width: 92rem;
  margin-inline: auto;
}
.contact::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(90vw, 64rem);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--accent) 24%, transparent), transparent);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}
.contact__title {
  font-size: clamp(3.2rem, 11vw, 12rem);
  letter-spacing: -0.05em;
  line-height: 0.82;
}
.contact__title-em {
  font-style: italic;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.contact__title-em .w {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact__mail {
  position: relative;
  display: inline-block;
  justify-self: start;
  margin-top: var(--sp-md);
  will-change: transform;
}
.contact__mail-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.2vw, 2.75rem);
  letter-spacing: -0.02em;
}
.contact__mail-rule {
  display: block;
  height: 2px;
  margin-top: 0.5rem;
  background: var(--grad-accent);
  transform: scaleX(1);
  transform-origin: 100% 50%;
  transition: transform 0.7s var(--ease-out);
}
.contact__mail:hover .contact__mail-rule {
  transform: scaleX(0);
  transform-origin: 0 50%;
}