/* ───────────────────────── DÉRIVE · état psyché ─────────────────────────
   La DA de Dérive (axonométrie, encre, papier, un rouge) poussée jusqu'à l'hallucination :
   négatif / positif, hachures qui dérivent, op-art de « Sexual Dérive » (HIATUS), échos rouges. */

body.psyche {
  --bg: #000; --fg: #fff; --line: rgba(255, 255, 255, .22); --mute: rgba(255, 255, 255, .6);
  --accent: var(--red);
  --hatch: repeating-linear-gradient(-45deg, #fff 0 2px, transparent 2px 7px);
  background: #000; color: #fff; color-scheme: dark;
}
body.psyche .grain { opacity: .04; animation: none; }

@keyframes hatch { to { background-position: 28px 0; } }
@keyframes glitch {
  0%, 100% { text-shadow: .025em 0 var(--red), -.025em 0 var(--blue); }
  12% { text-shadow: -.06em .01em var(--red), .04em -.01em var(--blue); }
  14% { text-shadow: .025em 0 var(--red), -.025em 0 var(--blue); }
  51% { text-shadow: .08em 0 var(--red), -.01em 0 var(--blue); }
  53% { text-shadow: .025em 0 var(--red), -.025em 0 var(--blue); }
  88% { text-shadow: -.02em -.03em var(--red), .03em .02em var(--blue); }
}
@keyframes wave { 50% { translate: 0 -.1em; rotate: -2deg; } }
@keyframes breathe { 50% { scale: 1.04; } }
@keyframes spin3d { 0% { transform: perspective(900px) rotateY(-28deg) rotateX(8deg); } 50% { transform: perspective(900px) rotateY(28deg) rotateX(-6deg); } 100% { transform: perspective(900px) rotateY(-28deg) rotateX(8deg); } }
@keyframes march { to { stroke-dashoffset: -76; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
@keyframes scan { from { background-position: 0 0; } to { background-position: 0 100px; } }

/* curseur : la croix d'architecte, plein écran */
body.psyche .c-h, body.psyche .c-v { display: block; opacity: .8; }
body.psyche .cursor { mix-blend-mode: normal; }
body.psyche .c-dot { background: var(--red); }
body.psyche .c-ring { border-color: var(--red); border-radius: 0; rotate: 45deg; }
body.psyche .cursor.label .c-ring { background: var(--red); rotate: 0deg; }
body.psyche .c-label { color: #000; }

/* tout le texte posé sur le WebGL se fond en négatif */
body.psyche :is(.hero-title, .hero-meta, .hero-scroll, .idx-views, .idx-head, .idx-list, .mani, .amis, .col-t, .col-lines, .col-people, .col-contact,
  .brut-head, .carte-t, .carte-help, .p-hero-info, .g-fig figcaption, .foot-cols, .foot-big, .nf) { mix-blend-mode: difference; color: #fff; }

/* ── titres : une lettre pleine qui glitche, une lettre hachurée en contour ── */
body.psyche .mega .ch { animation: glitch 2.6s steps(1) infinite, wave 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s), calc(var(--i) * -.2s); }
body.psyche .mega .ch:nth-child(even) {
  -webkit-text-fill-color: transparent; -webkit-text-stroke: .025em #fff; text-shadow: none;
  animation: wave 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.2s);
}
body.psyche .page-enter .mega .ch { animation-name: chInP, glitch, wave; animation-duration: 1s, 2.6s, 2.8s; animation-timing-function: var(--ease-out), steps(1), ease-in-out; animation-iteration-count: 1, infinite, infinite; animation-fill-mode: both, none, none; animation-delay: calc(var(--i) * 45ms), calc(var(--i) * -.37s), calc(var(--i) * -.2s); }
body.psyche .page-enter .mega .ch:nth-child(even) { animation-name: chInP, wave; animation-duration: 1s, 2.8s; animation-timing-function: var(--ease-out), ease-in-out; animation-iteration-count: 1, infinite; animation-delay: calc(var(--i) * 45ms), calc(var(--i) * -.2s); }
@keyframes chInP { 0% { scale: 1 0; opacity: 0; } 60% { scale: 1 1.25; opacity: 1; } 100% { scale: 1 1; opacity: 1; } }
body.psyche .hero-title, body.psyche .p-title, body.psyche .col-t, body.psyche .amis-head .mega, body.psyche .brut-head .mega { filter: url(#melt); }

/* HUD */
body.psyche .hud-logo { animation: glitch 3s steps(1) infinite; }
body.psyche .hud-mode, body.psyche .hud-sound { background: #000; }
body.psyche .hud-sound[aria-pressed="true"] { background: var(--red); color: #000; border-color: var(--red); animation: breathe .75s ease-in-out infinite; mix-blend-mode: normal; }
body.psyche .wipe { background: repeating-linear-gradient(-45deg, #000 0 18px, #fff 18px 22px, #000 22px 40px, var(--red) 40px 44px); animation: scan .4s linear infinite; }

/* ACCUEIL : la ville */
body.psyche .hero { height: 420vh; }
body.psyche .hero-gl { display: none; }
body.psyche .hero-meta { border-color: #fff; }
body.psyche .hero-hover .hh-k::before { content: 'vise une affiche · '; }
body.psyche .hero-hover .hh-t { color: #fff; }
body.psyche .hero-scroll .hs-n { display: none; }
body.psyche .hero-scroll .hs-p { display: inline; }
body.psyche .hero-scroll span:first-child { animation: blink .8s infinite; }
body.psyche .hero-title { font-size: clamp(100px, 27vw, 540px); }

/* MARQUEE : ruban de chantier */
body.psyche .marquee { background: var(--red); color: #000; transform: rotate(-2deg) scale(1.04); margin: 6vh 0; box-shadow: 0 0 0 10px #000, 0 0 0 12px var(--red); }
body.psyche .mq { animation-duration: 18s; }
body.psyche .mq span:nth-child(2) { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px #000; }

/* INDEX */
body.psyche .idx-head { background: transparent; border-color: #fff; }
body.psyche .idx-views button { border-color: #fff; background: transparent; }
body.psyche .idx-views button.on { background: #fff; color: #000; }
body.psyche .row { border-color: rgba(255, 255, 255, .25); }
body.psyche .r-tt:not(.r-ghost) { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px #fff; }
body.psyche .r-ghost { -webkit-text-stroke: 0; -webkit-text-fill-color: transparent; background: var(--hatch); background-size: 28px 28px; -webkit-background-clip: text; background-clip: text; animation: hatch 1s linear infinite; }
body.psyche .row a:hover .r-n, body.psyche .row a:hover .r-y { color: var(--red); }
body.psyche .r-cov { mix-blend-mode: normal; filter: invert(1); }
body.psyche .row a:hover .r-cov { animation: spin3d 2.4s ease-in-out infinite; }
body.psyche .tile > img:first-child { filter: grayscale(1) contrast(1.35); }
body.psyche .tile:hover > img:first-child { filter: none; }
body.psyche .tile-cov { background: #000; filter: invert(1); }

/* EN GRAND */
body.psyche .big { background: #000; }
body.psyche .bg-item img { filter: grayscale(1) contrast(1.25); transition: filter .8s; }
body.psyche .bg-item:hover img { filter: none; }
body.psyche .bg-item::after { content: ''; position: absolute; inset: -8px; border: 1px solid var(--red); pointer-events: none; }

/* MANIFESTE */
body.psyche .mani-l:nth-child(3) { color: var(--red); mix-blend-mode: normal; filter: url(#wobble); }
body.psyche .mani-l:nth-child(even) > span { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px #fff; }

/* FOOTER */
body.psyche .foot { border-color: #fff; background: transparent; }
body.psyche .foot-big { -webkit-text-stroke: 0; -webkit-text-fill-color: transparent; background: var(--hatch); background-size: 28px 28px; -webkit-background-clip: text; background-clip: text; animation: hatch 2s linear infinite; filter: url(#melt); }

/* ACTION */
body.psyche .p-hero-img img { filter: grayscale(1) contrast(1.45); animation: heroInP 1.6s var(--ease-out) both; transition: filter 1s; }
body.psyche .p-hero-img:hover img { filter: none; }
@keyframes heroInP { from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
body.psyche .p-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 5px); }
body.psyche .p-text { background: #000; padding: 4vh 3vw; border: 1px solid #fff; box-shadow: 10px 10px 0 var(--red); }
body.psyche .p-text hr { background: repeating-linear-gradient(90deg, #fff 0 10px, transparent 10px 16px); height: 2px; }
body.psyche .p-text blockquote { color: #fff; border-left: 4px solid var(--red); padding-left: .5em; text-indent: 0; }
body.psyche .p-plan img { mix-blend-mode: normal; filter: invert(1); animation: spin3d 9s ease-in-out infinite; transform-origin: 50% 60%; }
body.psyche .p-plan span { color: var(--red); }
body.psyche .p-all { border-color: #fff; background: #000; }
body.psyche .p-all:hover { background: var(--red); border-color: var(--red); color: #000; }
body.psyche .g-img img { filter: grayscale(1) contrast(1.35); transition: filter .8s; }
body.psyche .g-fig:hover .g-img img { filter: none; }
body.psyche .g-img { outline: 1px solid rgba(255, 255, 255, .35); outline-offset: 6px; transition: outline-color .4s; }
body.psyche .g-fig:hover .g-img { outline-color: var(--red); }
body.psyche .vid { outline: 1px solid var(--red); outline-offset: 6px; }
body.psyche .p-nav, body.psyche .p-prev { border-color: #fff; }
body.psyche .p-nav { background: #000; }
body.psyche .p-next img { filter: grayscale(1); }

/* CARTE */
body.psyche .carte { background: transparent; }
body.psyche .arrows > path { stroke-dasharray: 48 28; stroke-dashoffset: 0; animation: march 2.4s linear infinite; transition: none; }
body.psyche .frag { filter: grayscale(1) contrast(1.5); }
body.psyche .isl:hover .frag { filter: none; }
body.psyche .isl-plan { background: #fff; mix-blend-mode: normal; box-shadow: none; filter: invert(1) drop-shadow(8px 8px 0 var(--red)); }
body.psyche .isl:hover .isl-plan { animation: spin3d 2.4s ease-in-out infinite; }
body.psyche .isl-lab { background: #fff; color: #000; }
body.psyche .isl-lab b { color: var(--red); }
body.psyche .carte-t span { color: #fff; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px #fff; }
body.psyche .carte-s { background: #000; border: 1px solid #fff; }
body.psyche .carte-zoom button { background: #000; border-color: #fff; color: #fff; }

/* COLLECTIF */
body.psyche .col-gif img { filter: grayscale(1) contrast(1.3); animation: spin3d 12s ease-in-out infinite; }
body.psyche .col-l .w { color: rgba(255, 255, 255, .14); }
body.psyche .col-l .w.lit { color: #fff; }
body.psyche .col-big:nth-child(3) .w.lit { color: #fff; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px #fff; }
body.psyche .col-people, body.psyche .cp { border-color: #fff; }
body.psyche .cp:hover b { color: #fff; animation: glitch .6s steps(1) infinite; }
body.psyche .col-this img { filter: grayscale(1) invert(1) contrast(1.4); animation: breathe 4s ease-in-out infinite; }

/* AMIS */
body.psyche .ami { color: #fff; animation: wave 3s ease-in-out infinite; }
body.psyche .ami:nth-child(3n) { animation-delay: -1s; } body.psyche .ami:nth-child(3n+1) { animation-delay: -2s; }
body.psyche .ami:nth-child(4n) { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.2px #fff; }
body.psyche .ag-l i { color: rgba(255, 255, 255, .3); }
body.psyche .ag-h span { color: #fff; }
body.psyche .amis-head { border-color: #fff; }

/* BRUT */
body.psyche .pc { background: #000; border: 1px solid #fff; box-shadow: 8px 8px 0 var(--red); }
body.psyche .pc img { background: #111; filter: grayscale(1) contrast(1.3); }
body.psyche .pc:hover img { filter: none; }
body.psyche .pc:nth-child(5n) { animation: breathe 5s ease-in-out infinite; }
body.psyche .brut-shuffle { border-color: #fff; background: #000; }

/* visionneuse : les photos restent vraies, le cadre clignote rouge */
body.psyche #lb { background: #000; }
body.psyche #lb::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--red); pointer-events: none; animation: blink 1.2s steps(1) infinite; }

@media (prefers-reduced-motion: reduce) {
  body.psyche * { animation: none !important; }
  body.psyche :is(.hero-title, .p-title, .foot-big, .col-t) { filter: none; }
}

/* ── maquettes / vidéos / table en psyché ── */
body.psyche .r-cov { display: none; }
body.psyche .r-mq { display: block; position: absolute; right: 60px; top: 50%; height: 170%; width: auto; translate: 0 -50%; opacity: 0; transform: scale(.6) rotate(-8deg); transition: opacity .3s, transform .6s var(--ease-out); pointer-events: none; outline: 1px solid var(--red); outline-offset: 4px; }
body.psyche .row a:hover .r-mq { opacity: 1; transform: none; }
body.psyche :is(.mq3-head, .mq3-cap) { mix-blend-mode: difference; color: #fff; }
body.psyche .mq3-n { color: #fff; }
body.psyche .mq3-t { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px #fff; animation: glitch 2.6s steps(1) infinite; }
body.psyche .mq3-c { filter: grayscale(1) contrast(1.15) brightness(.85); }
body.psyche .mq3-c.on { filter: none; }
body.psyche .mq3-stage { perspective: 1100px; }
body.psyche .motion { mix-blend-mode: normal; }
body.psyche :is(.mo-head) { mix-blend-mode: difference; color: #fff; border-color: #fff; }
body.psyche .mo { outline: 1px solid rgba(255,255,255,.4); outline-offset: 6px; background: #000; }
body.psyche .mo video { filter: invert(1) contrast(1.2); transition: filter .6s, transform 1.2s var(--ease-out); }
body.psyche .mo:hover video { filter: none; }
body.psyche .mo-t { color: #fff; mix-blend-mode: difference; }
body.psyche .table-key img { filter: invert(1) contrast(1.1); }
body.psyche .table-key:hover img { filter: none; }
body.psyche .table-key figcaption { color: #fff; mix-blend-mode: difference; }
/* en psyché, la maquette est montrée d'emblée, le plan au survol */
body.psyche .p-plan img.pp-d { mix-blend-mode: normal; filter: invert(1); animation: none; }
body.psyche .pp-m { opacity: 1; background: #000; animation: breathe 6s ease-in-out infinite; }
body.psyche .p-plan:hover .pp-m { opacity: 0; }
body.psyche .pp-ld { display: none; } body.psyche .pp-lm { display: inline; color: #fff; }
body.psyche .p-plan:hover .pp-ld { display: inline; } body.psyche .p-plan:hover .pp-lm { display: none; }
body.psyche .p-plan img.pp-m { filter: none; animation: breathe 6s ease-in-out infinite; transform: none; }