/* ═══════════════════════════════════════════
   MODE PSYCHÉ — pilule rouge
   ═══════════════════════════════════════════ */
body.psy {
  --paper: #080b2e;
  --paper-2: #121a5a;
  --ink: #f4f1e8;
  --bic: #ff4fb1;
  --red: #e8ff3a;
  --acid: #e8ff3a;   /* jaune gilet fluo */
  --cyan: #6fd3ff;   /* ciel des dessins */
  --pink: #ff4fb1;   /* doudoune rose */
  --violet: #ff6a13; /* orange chantier */
  --mute: rgba(246,240,255,.62);
  --line: rgba(246,240,255,.22);
  --beat: 0;
  --vel: 0;
  background: #080b2e;
}
body.psy ::selection { background: var(--acid); color: #000; }

/* fond WebGL */
body.psy .psy-bg { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body.psy .psy-bg canvas { width: 100%; height: 100%; display: block; filter: blur(1px); }
body.psy main, body.psy .nav { position: relative; z-index: 2; }
body.psy .nav { position: fixed; z-index: 80; }
body.psy .grain { opacity: .14; z-index: 95; mix-blend-mode: overlay; }
body.psy::after { content: ""; position: fixed; inset: 0; z-index: 94; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }

/* sections transparentes : la foule liquide passe dessous */
body.psy .hero, body.psy .statement, body.psy .index, body.psy .insitu, body.psy .film, body.psy .book,
body.psy .objets, body.psy .texts, body.psy .cv, body.psy .contact, body.psy .big, body.psy .marquee { background: transparent; }
body.psy main > section, body.psy main > footer { position: relative; }
body.psy .insitu, body.psy .film, body.psy .contact { background: rgba(4,6,30,.35); }
body.psy .insitu, body.psy .film, body.psy .contact, body.psy .big, body.psy .book, body.psy .kaleido { color: var(--ink); }
body.psy .contact__mail { color: #fff; } body.psy .contact__grid a { color: #fff; }
body.psy .book { background: linear-gradient(135deg, rgba(107,43,255,.55), rgba(255,43,214,.45)); }
body.psy .big { background: rgba(4,6,30,.5); }

/* ── typo élastique ── */
body.psy .hero__title { font-size: min(24vw, calc((100vh - 260px) / 1.6)); }
body.psy .hero__title .line { overflow: visible; }
body.psy .hero__title .ch {
  display: inline-block;
  animation: stretch 2.6s cubic-bezier(.6,0,.4,1) infinite alternate, hue 6s linear infinite;
  color: var(--acid);
  text-shadow: -.035em 0 var(--pink), .035em 0 var(--cyan), 0 0 .3em rgba(198,255,0,.4);
  transform-origin: 50% 100%;
}
body.psy .hero__title .line:nth-child(2) .ch { color: var(--pink); text-shadow: -.035em 0 var(--cyan), .035em 0 var(--acid), 0 0 .3em rgba(255,43,214,.4); }
@keyframes stretch {
  0%   { font-variation-settings: "wdth" 62, "wght" 900; transform: scaleY(1) skewX(0); }
  50%  { font-variation-settings: "wdth" 125, "wght" 300; transform: scaleY(.82) skewX(-8deg); }
  100% { font-variation-settings: "wdth" 80, "wght" 800; transform: scaleY(1.12) skewX(6deg); }
}
@keyframes hue { to { filter: hue-rotate(360deg); } }
body.psy .hero__scribble path { stroke: var(--acid); stroke-width: 22; filter: drop-shadow(0 0 12px var(--acid)); animation: wobble 1.4s ease-in-out infinite alternate; }
@keyframes wobble { to { transform: translateY(8px) scaleY(1.3); } }
body.psy .hero__meta { border-color: var(--acid); }
body.psy .hero__meta b { color: var(--acid); }

/* titres de section : peinture qui coule */
body.psy main h2.display {
  font-family: "Rubik Wet Paint", "Archivo", sans-serif;
  font-variation-settings: normal; font-weight: 400;
  letter-spacing: -.02em; line-height: .88;
  background: linear-gradient(90deg, var(--acid), var(--cyan), var(--pink), var(--violet), var(--acid));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: grad 7s linear infinite;
  filter: drop-shadow(5px 5px 0 rgba(0,0,0,.6));
  transform: rotate(-2deg);
}
body.psy main h2.display .serif { -webkit-text-fill-color: transparent; font-family: "Rubik Glitch"; text-transform: uppercase; }
@keyframes grad { to { background-position: 300% 0; } }
body.psy main h2.display.glitch { animation: grad 7s linear infinite, glitch .5s steps(2) 1; }
@keyframes glitch { 0% { transform: translate(0) rotate(-2deg); } 20% { transform: translate(-8px, 4px) skewX(20deg); } 40% { transform: translate(6px,-3px) skewX(-15deg); } 60% { transform: translate(-3px,0) scaleY(1.2); } 100% { transform: rotate(-2deg); } }
body.psy .serif { color: var(--acid); }
body.psy .statement__text { color: var(--ink); }
body.psy .statement__text .w { display: inline-block; transition: transform .35s cubic-bezier(.3,2,.5,1), color .2s; }
body.psy .statement__text .w:hover { transform: rotate(-10deg) scale(1.35); color: var(--pink); }
body.psy .statement__text em { color: var(--acid); }
body.psy .mono { color: inherit; }
body.psy .display { transform-origin: 50% 50%; }

/* ── marquee en ruban de chantier croisé ── */
body.psy .marquee { background: var(--acid) !important; color: #0b0112; border: 0; transform: rotate(-4deg) scale(1.08); margin: 6vh 0; box-shadow: 0 0 0 6px #0b0112, 0 0 60px rgba(198,255,0,.5); font-family: "Rubik Glitch"; font-variation-settings: normal; font-weight: 400; }
body.psy .marquee::after { content: ""; }

/* ── crowd ── */
body.psy .crowd__word { font-family: "Rubik Wet Paint"; font-variation-settings: normal; font-weight: 400; color: var(--pink); text-shadow: 8px 8px 0 var(--violet); }
body.psy .crowd__frame img { filter: saturate(1.8) hue-rotate(calc(var(--beat) * 180deg)); }

/* ── kaléidoscope ── */
body.psy .kaleido { display: block; position: relative; height: 100vh; overflow: hidden; }
.kaleido__gl { width: 100%; height: 100%; display: block; }
.kaleido__ui { position: absolute; left: var(--g); bottom: var(--g); pointer-events: none; color: #fff; mix-blend-mode: difference; }
.kaleido__ui h2 { font-size: clamp(70px, 12vw, 200px); margin: 2vh 0; }

/* ── tunnel ── */
body.psy .tunnel { display: block; height: 900vh; position: relative; }
.tunnel__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.tunnel__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tunnel__ui { position: absolute; inset: 0; pointer-events: none; padding: 90px var(--g) var(--g); display: grid; grid-template-rows: auto 1fr auto auto; }
.tunnel__k { color: var(--acid); }
.tunnel__now { align-self: end; display: grid; gap: 8px; max-width: 60vw; }
.tunnel__n { color: var(--pink); }
.tunnel__t { font-family: "Rubik Wet Paint"; font-weight: 400; font-size: clamp(44px, 6.5vw, 110px); line-height: .9; margin: 0; color: #fff; text-shadow: 4px 4px 0 var(--pink), -4px -2px 0 var(--cyan); }
.tunnel__m { opacity: .8; }
.tunnel__hint { justify-self: end; color: var(--acid); margin: 10px 0; }
.tunnel__bar { height: 3px; background: rgba(255,255,255,.15); }
.tunnel__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--acid), var(--pink), var(--cyan)); transform-origin: left; transform: scaleX(0); }

/* ── images : ça fond ── */
body.psy img { filter: saturate(1.45) contrast(1.08); }
body.psy .obj:hover img, body.psy .index__grid figure:hover img, body.psy .show__strip figure:hover img, body.psy .text__scans img:hover, body.psy .cv__portrait:hover img {
  filter: url(#psy-warp) saturate(2.4) hue-rotate(90deg);
}
body.psy .obj__img, body.psy .index__grid img { border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%; transition: border-radius 1.2s cubic-bezier(.3,1.6,.5,1); }
body.psy .obj:hover .obj__img, body.psy .index__grid figure:hover img { border-radius: 8px; }
body.psy .obj:nth-child(odd) { transform: rotate(-3deg); }
body.psy .obj:nth-child(even) { transform: rotate(4deg); }
body.psy .cv__portrait img { filter: saturate(2) hue-rotate(200deg) contrast(1.3); }
body.psy .hero__trail img { box-shadow: 0 0 0 4px var(--acid), 0 0 40px rgba(255,43,214,.6); }

/* index */
body.psy .index__row::before { background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan)); }
body.psy .index__row:not(.index__row--head):hover .t { transform: skewX(-14deg) translateX(20px); color: var(--acid); }
body.psy .index__row .t { transition: transform .5s cubic-bezier(.3,2,.5,1); display: inline-block; }
body.psy .index__bar button { border-color: var(--acid); }
body.psy .index__bar button.is-on, body.psy .index__bar button:hover { background: var(--acid); color: #0b0112; }
body.psy .preview img { filter: url(#psy-warp) saturate(2); box-shadow: 0 0 0 4px var(--pink); }

/* grands formats */
body.psy .big__frame { box-shadow: 0 0 0 3px var(--acid), 0 0 80px rgba(255,43,214,.45); }
body.psy .big__frame img { filter: saturate(1.6) hue-rotate(calc(var(--beat) * 120deg)); }
body.psy .big__human svg { fill: var(--acid); filter: drop-shadow(0 0 10px var(--acid)); }
body.psy .big__zoom { font-size: 22px; color: var(--acid); }

/* in situ, film, 23 */
body.psy .show__i, body.psy .insitu__head h2 .serif { color: var(--acid); }
body.psy .film__player { box-shadow: 0 0 0 4px var(--pink), 12px 12px 0 var(--acid); transform: rotate(-1.5deg); }
body.psy .film__loop { filter: saturate(2) hue-rotate(calc(var(--beat) * 200deg)); }
body.psy .book__num { font-family: "Rubik Glitch"; font-weight: 400; color: var(--acid); transform: scale(calc(1 + var(--beat) * .25)); transition: transform .08s; }
body.psy .book__fig { background: var(--acid); transform: rotate(calc(-3deg + var(--beat) * 12deg)); }
body.psy .track__btn { border-color: var(--acid); }

/* contact */
body.psy .contact__big { line-height: 1.02; margin: 8vh 0 6vh; font-family: "Rubik Wet Paint"; font-variation-settings: normal; font-weight: 400; color: var(--pink); text-shadow: 10px 10px 0 var(--acid), -6px 0 0 var(--cyan); }
body.psy .contact__mail { font-family: "Rubik Glitch"; font-variation-settings: normal; font-weight: 400; }
body.psy .contact__mail:hover { color: var(--acid); }

/* lightbox */
body.psy .lb { background: #0b0112; }
body.psy .lb__img { box-shadow: 0 0 0 3px var(--acid), 0 0 120px rgba(255,43,214,.5); filter: none; }
body.psy .lb__nav { background: var(--acid); color: #000; border: 0; }
body.psy .lb__lens { box-shadow: 0 0 0 3px var(--pink), 0 0 40px var(--pink); }
body.psy .lb__img, body.psy .lb__pan img, body.psy .big__frame img:hover { filter: none; }

/* nav */
body.psy .nav { mix-blend-mode: normal; color: #fff; }
body.psy .nav__logo { font-family: "Rubik Glitch"; font-variation-settings: normal; font-weight: 400; color: var(--acid); }
body.psy .nav__sound b { color: var(--acid); }
body.psy.psy-playing .nav__sound::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 calc(4px + var(--beat) * 30px) var(--acid); transform: scale(calc(1 + var(--beat) * 2)); }

/* ── curseur : un œil ── */
body.psy .cursor { width: 54px; height: 34px; margin: -17px 0 0 -27px; background: none; border-radius: 0; mix-blend-mode: normal; }
body.psy .cursor.is-big { width: 110px; height: 70px; margin: -35px 0 0 -55px; }
body.psy .cursor .eye { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: transform .12s; }
body.psy .cursor.blink .eye { transform: scaleY(.08); }
.eye__w { fill: #fff; stroke: #0b0112; stroke-width: 4; }
.eye__p circle:first-child { fill: var(--pink); }
.eye__pp { fill: #0b0112; }
.eye__hl { fill: #fff; }
body.psy .cursor__label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; background: var(--acid); color: #000; padding: 3px 8px; border-radius: 99px; }
.cursor .eye { display: none; }
body.psy .cursor .eye { display: block; }

/* ── autocollants ── */
.sticker { position: absolute; z-index: 6; pointer-events: none; transform: rotate(var(--r)); font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 13px; text-transform: uppercase; padding: 8px 14px; white-space: nowrap; box-shadow: 4px 4px 0 rgba(0,0,0,.6); }
.sticker--0 { background: var(--acid); color: #0b0112; border-radius: 99px; }
.sticker--1 { background: var(--pink); color: #fff; border-radius: 4px; }
.sticker--2 { background: #fff; color: #0b0112; border: 2px dashed #0b0112; border-radius: 50%; padding: 26px 16px; font-size: 11px; }
.sticker--3 { background: var(--cyan); color: #0b0112; clip-path: polygon(0 10%, 8% 0, 92% 4%, 100% 0, 96% 90%, 100% 100%, 6% 94%, 0 100%); padding: 12px 18px; }

@media (max-width: 700px) {
  body.psy .tunnel { height: 700vh; }
  .tunnel__now { max-width: 90vw; }
  .sticker { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.psy .hero__title .ch, body.psy main h2.display { animation: none; }
}

/* V3 — Streum & manteau en mode psyché */
body.psy .streum { background: transparent; }
body.psy .streum__t { mix-blend-mode: normal; color: #080b2e; -webkit-text-fill-color: #080b2e; background: none; filter: none; }
body.psy .streum__ui { color: #080b2e; }
body.psy .streum__ui .serif { color: #080b2e; }
body.psy .streum__now { border-color: #080b2e; }
body.psy .manteau { background: rgba(4,6,30,.55); }
body.psy .lb { background: #080b2e; }
/* RER carrelé (texture claire) : voile sombre pour garder les textes lisibles */
.tunnel__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(4,6,30,.82) 0%, rgba(4,6,30,.35) 28%, transparent 48%), linear-gradient(to bottom, rgba(4,6,30,.6) 0%, transparent 18%); }
.tunnel__ui { z-index: 2; }

/* RER : bouton bien visible pour ouvrir l’affiche en cours */
.tunnel__go { justify-self: start; margin-top: 10px; padding: 9px 16px; border-radius: 99px; background: var(--acid); color: #080b2e; font-weight: 500; box-shadow: 4px 4px 0 var(--pink); pointer-events: auto; }
.tunnel__now { pointer-events: auto; }
.tunnel__gl { touch-action: pan-y; }
body.psy .tunnel__go { color: #080b2e; }