/* ==========================================================================
   Les Pixels de Janette — proposition « voyage »
   Site immersif à défilement : une scène fixe (ciel + fleur pixel qui pousse)
   derrière un fil de chapitres qui se révèlent au scroll.
   ========================================================================== */

@font-face { font-family: 'Gosha'; src: url('assets/fonts/PPGoshaSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Gosha'; src: url('assets/fonts/PPGoshaSans-Ultrabold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'PixelWide'; src: url('assets/fonts/MultiTypePixel Wide.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PixelWide'; src: url('assets/fonts/MultiTypePixel WideBold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Talisman'; src: url('assets/fonts/PPTalisman-Compact-Extrabold.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --nuit: #0D0724;
  --nuit-2: #160936;
  --panneau: #1B0E42;
  --clair: #F4F1FF;
  --clair-70: rgba(244, 241, 255, .72);
  --clair-45: rgba(244, 241, 255, .46);
  --lavande: #C7C2FF;
  --violet: #522AFF;
  --violet-clair: #9F8FFF;
  --lime: #D4E224;
  --rose: #FF47FF;
  --rose-doux: #E86FE0;

  --f-title: 'Fredoka', 'Gosha', 'Arial Black', sans-serif;
  --f-body: 'Avenir Next', 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-pixel: 'PixelWide', monospace;
  --f-poeme: 'Talisman', Georgia, serif;

  --gutter: clamp(24px, 6vw, 96px);
  --dur: .9s;
  --ease: cubic-bezier(.16,.8,.24,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--nuit);
  color: var(--clair);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--lavande); }
::selection { background: var(--rose); color: var(--nuit); }

h1, h2, h3 { font-family: var(--f-title); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
h2 span, h1 span { color: var(--violet-clair); }
h2 .rose { color: var(--rose); }

.eyebrow {
  font-family: var(--f-pixel);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 18px;
  display: inline-block;
}

.lead { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--clair-70); max-width: 56ch; }

:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--lime); color: var(--nuit); padding: 10px 16px; font-family: var(--f-title); z-index: 500; }
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Scène fixe (ciel + fleur pixel) ---------- */
.scene {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(1200px 700px at 82% -10%, rgba(255,71,255,.10), transparent 60%),
    radial-gradient(1000px 800px at -10% 20%, rgba(82,42,255,.24), transparent 55%),
    linear-gradient(180deg, var(--nuit-2), var(--nuit) 60%);
}
#bgCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(13,7,36,.0) 70%, var(--nuit) 100%);
  pointer-events: none;
}

/* ---------- Rail de progression ---------- */
.rail {
  position: fixed; right: 22px; top: 50%; translate: 0 -50%; z-index: 200;
  height: min(38vh, 320px); width: 3px; border-radius: 3px;
  background: rgba(199,194,255,.16);
}
.rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: linear-gradient(180deg, var(--lime), var(--rose)); border-radius: 3px; transition: height .12s linear; }
.rail-dots { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.rail-dots button {
  position: relative; left: -4.5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--nuit-2); border: 2px solid rgba(199,194,255,.4); cursor: pointer; padding: 0;
}
.rail-dots button.active { border-color: var(--lime); background: var(--lime); }
@media (max-width: 900px) { .rail { display: none; } }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px var(--gutter);
  background: linear-gradient(180deg, rgba(13,7,36,.85), transparent);
  transition: background .3s var(--ease);
}
.site-header.solid { background: rgba(13,7,36,.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(199,194,255,.16); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 66px; width: auto; }
.main-nav { display: flex; gap: clamp(14px, 2vw, 28px); align-items: center; }
.main-nav a {
  font-family: var(--f-pixel); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--clair); text-decoration: none; opacity: .82;
}
.main-nav a:hover, .main-nav a.active { opacity: 1; color: var(--lime); }
.main-nav a.cta { border: 1px solid var(--lime); padding: 8px 14px; border-radius: 999px; }
@media (max-width: 900px) { .main-nav { display: none; } }

/* ---------- Menu du téléphone ---------- */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 1px solid rgba(199,194,255,.35); border-radius: 12px;
  cursor: pointer;
}
.nav-burger span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--clair); transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-burger[aria-expanded="true"] { border-color: var(--lime); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  /* juste sous l'en-tête (150) : le bouton reste ainsi visible et cliquable
     pour refermer, tout en couvrant tout le contenu de la page. */
  position: fixed; inset: 0; z-index: 140;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(10,5,28,.97); backdrop-filter: blur(8px);
}
.nav-mobile[hidden] { display: none; }
.nav-mobile a {
  font-family: var(--f-pixel); font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--clair); text-decoration: none; padding: 16px 28px; border-radius: 12px;
}
.nav-mobile a:last-child { margin-top: 14px; border: 1px solid var(--lime); color: var(--lime); }
.nav-mobile a:active { color: var(--lime); }

@media (max-width: 900px) { .nav-burger { display: flex; } }
@media (min-width: 901px) { .nav-mobile { display: none !important; } }

/* ---------- Contenu (au-dessus de la scène) ---------- */
main { position: relative; z-index: 10; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--gutter);
}
.hero .eyebrow { color: var(--lavande); }
.hero h1 { line-height: 0; }
.hero-logo { width: min(640px, 90vw); height: auto; }
.hero .lead { margin: 22px auto 0; text-align: center; }
.scroll-cue {
  margin-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--f-pixel); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--clair-45);
  animation: bob 2.2s ease-in-out infinite;
}
.scroll-cue svg { width: 18px; height: 26px; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ---------- Chapitres génériques ---------- */
.chapitre { position: relative; }
.chapitre-label {
  position: absolute; top: 28px; left: var(--gutter); z-index: 5;
  font-family: var(--f-pixel); font-size: .72rem; letter-spacing: .2em; color: var(--clair-45);
}
/* Variante posée dans le flux, juste au-dessus du texte : reste lisible
   pendant toute la lecture au lieu de se cacher derrière l'en-tête. */
.chapitre-label-inline {
  position: static; display: block; margin-bottom: 14px; text-align: center;
}
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* ---------- Manifeste (lignes qui s'allument au scroll) ---------- */
.manifeste-piste { height: 420vh; position: relative; }
.manifeste-sticky {
  position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: 90px var(--gutter) 0;
}
.manifeste-texte { max-width: 900px; text-align: center; }
.manifeste-texte .eyebrow { color: var(--violet-clair); }
.manifeste-ligne {
  font-family: var(--f-body); font-weight: 400; text-transform: none;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.55;
  opacity: .16; transition: opacity .5s var(--ease), color .5s var(--ease);
  margin-bottom: .6em;
}
.manifeste-ligne.active { opacity: 1; }
.manifeste-ligne strong { color: var(--violet-clair); font-weight: 700; font-style: normal; }
.manifeste-signature {
  font-family: var(--f-poeme); font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--lavande); margin-top: .4em;
}

/* ---------- Projets : on vole vers des cadres suspendus dans l'univers ---------- */
.projet-piste { height: 340vh; position: relative; }
.projet-sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  perspective: 1300px; perspective-origin: 50% 50%;
}
.projet-frame {
  position: absolute; top: 56%; left: 50%; width: min(520px, 66vw);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  transform: translate(-50%, -50%) translateZ(-1200px); opacity: 0;
  will-change: transform, opacity; transition: transform 90ms linear, opacity 90ms linear;
}
.frame-titre {
  font-family: var(--f-title); font-weight: 800; text-transform: uppercase; text-align: center;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.1;
  width: min(760px, 88vw); max-width: none;
}
.frame-titre span { color: var(--violet-clair); }
.frame-window {
  background: var(--panneau); border: 1px solid rgba(199,194,255,.3); border-radius: 16px;
  overflow: hidden; box-shadow: 0 40px 90px rgba(3,0,16,.6);
  cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.frame-window:hover, .frame-window:focus-visible {
  border-color: rgba(199,194,255,.55); box-shadow: 0 40px 90px rgba(3,0,16,.6), 0 0 0 2px rgba(212,226,36,.35);
}
.frame-window header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; background: rgba(199,194,255,.08); border-bottom: 1px solid rgba(199,194,255,.18);
  font-family: var(--f-pixel); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rose);
}
.frame-window .dots { display: flex; gap: 5px; }
.frame-window .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(199,194,255,.32); display: block; }
.frame-visuel { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.frame-visuel > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.frame-visuel-carre { aspect-ratio: 1/1; }
.projet-frame.frame-compact { width: min(380px, 52vw); }
/* Position calculée en JS (alignerTitreAtelier) pour garder exactement le même
   écart titre/panneau que les autres chapitres. Valeur de repli ici.
   display:block indispensable : sans lui, le titre hérite du flex-column de
   .projet-frame et le <span> part à la ligne, séparé par le gap. */
.projet-frame.atelier-titre { display: block; top: 20%; }
.frame-logo {
  position: absolute; bottom: 12px; right: 12px; width: 72px; height: 72px;
  object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.frame-legende { padding: 22px 26px 28px; }
.frame-legende-mince { padding: 20px 26px; text-align: center; }
.frame-legende h2 { font-size: clamp(1.3rem, 2.6vw, 1.85rem); }
.frame-legende p { margin-top: 12px; color: var(--clair-70); font-size: .96rem; }
.frame-legende .mini-link { display: inline-block; margin-top: 16px; font-family: var(--f-pixel); font-size: .8rem; letter-spacing: .06em; color: var(--rose-doux); text-decoration: none; }
@media (max-width: 700px) {
  .projet-frame { width: 84vw; }
  .frame-legende { padding: 16px 18px 20px; }
}

/* ---------- Ateliers ---------- */
.ateliers-section { padding: clamp(80px, 10vw, 140px) var(--gutter); max-width: 1200px; margin: 0 auto; }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 900px) { .grille-4 { grid-template-columns: repeat(2, 1fr); } }
.grille-4 article { border-top: 2px solid rgba(199,194,255,.22); padding-top: 18px; }
.grille-4 .num { font-family: var(--f-pixel); color: var(--violet-clair); font-size: .9rem; }
.grille-4 h3 { margin: 10px 0 8px; }
.grille-4 p { color: var(--clair-70); font-size: .95rem; }

.video-card {
  margin-top: 48px; border: 1px solid rgba(199,194,255,.25); border-radius: 14px; overflow: hidden;
  background: var(--panneau); max-width: 760px;
}
.video-card header { display:flex; align-items:center; justify-content:space-between; padding: 10px 14px; font-family: var(--f-pixel); font-size:.72rem; color: var(--clair-45); }
.video-shell { position: relative; aspect-ratio: 16/9; background:#000; }
.video-shell .poster { width:100%; height:100%; object-fit:cover; opacity:.75; }
.video-shell iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-play {
  position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
  background: rgba(212,226,36,.92); border:0; font-size:1.3rem; cursor:pointer; color:var(--nuit);
}

/* ---------- Équipe (constellation -> grille) ---------- */
.equipe-section { padding: clamp(80px, 10vw, 140px) var(--gutter); max-width: 1200px; margin: 0 auto; }
.equipe-intro { max-width: 62ch; color: var(--clair-70); margin-top: 8px; }
.equipe-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; }
@media (max-width: 900px) { .equipe-grille { grid-template-columns: repeat(2, 1fr); } }
.membre { text-align: center; }
.membre .portrait-wrap {
  aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid rgba(199,194,255,.28);
  margin: 0 auto 14px; max-width: 148px;
}
.membre img { width: 100%; height: 100%; object-fit: cover; }
.membre h3 { font-size: .98rem; text-transform: none; }
.membre .metier { font-family: var(--f-pixel); font-size: .74rem; color: var(--violet-clair); margin-top: 4px; }
.portrait-vide {
  display: flex; align-items: center; justify-content: center;
  background: rgba(199,194,255,.08); border: 2px dashed rgba(199,194,255,.35) !important;
  font-family: var(--f-title); font-size: 2.4rem; color: var(--lavande);
}
.ghost-card .flip-back { background: rgba(212,226,36,.08); border-color: rgba(212,226,36,.35); }
.ghost-card .flip-back a { color: var(--lime); }

/* ---------- Valeurs / citation ---------- */
.citation-section { padding: clamp(90px, 12vw, 160px) var(--gutter); text-align: center; max-width: 900px; margin: 0 auto; }
.citation-section p { font-family: var(--f-poeme); font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.4; color: var(--clair); }
.citation-section span { display:block; margin-top: 18px; font-family: var(--f-pixel); font-size:.8rem; letter-spacing:.1em; color: var(--clair-45); }

/* ---------- Soutenir / footer ---------- */
.soutenir-section { padding: clamp(80px, 10vw, 140px) var(--gutter); max-width: 1200px; margin: 0 auto; text-align:center; }
.soutenir-tete { width: 176px; height: auto; margin: 0 auto 24px; display: block; }
.soutenir-section .lead { margin: 18px auto 0; text-align:center; }
.iban-card {
  margin: 28px auto 0; max-width: 420px; background: var(--panneau);
  border: 1px solid rgba(199,194,255,.28); border-radius: 14px; padding: 22px 28px;
}
.iban-nom { font-family: var(--f-body); font-weight: 600; font-size: .95rem; color: var(--clair); line-height: 1.4; }
.iban-numero { margin-top: 12px; font-family: var(--f-body); font-weight: 600; font-size: 1.15rem; letter-spacing: .03em; color: var(--lime); }
.btn {
  display: inline-flex; align-items:center; gap:8px; margin-top: 28px;
  font-family: var(--f-pixel); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  background: var(--lime); color: var(--nuit); padding: 14px 26px; border-radius: 999px; text-decoration:none;
  border: 0; cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--clair); border: 1px solid rgba(199,194,255,.4); }

/* ---------- Mini-chapitres (podcasts, genius loci) ---------- */
.mini-chapitre { margin-top: 56px; max-width: 640px; }
.eyebrow.petit { margin-bottom: 10px; }
.mini-chapitre h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.mini-chapitre p { margin-top: 12px; color: var(--clair-70); }

/* Le grand titre du chapitre marque sa propre pause, comme les panneaux. */
/* Aucun padding au-dessus d'une piste : sinon l'ancre du menu atterrit trop
   haut et le titre collant démarre décalé vers le bas de l'écran. */
.chapitre > .titre-piste:first-child { margin-top: calc(-1 * clamp(80px, 10vw, 140px)); }
.titre-piste { height: 190vh; position: relative; }
.titre-sticky {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 90px var(--gutter) 0;
}
/* Chapitre qui n'affiche que son titre : la réserve passe en bas, sinon
   l'en-tête et le petit label repoussent le titre dans le bas de l'écran. */
.titre-sticky:not(:has(.projets-cartes)) { padding: 0 var(--gutter) 90px; }
/* Projets en cours : deux panneaux sobres, sans image. */
.projets-cartes { display: flex; gap: 20px; margin-top: 46px; flex-wrap: wrap; justify-content: center; }
.projet-carte {
  display: flex; flex-direction: column; gap: 12px; text-decoration: none;
  background: var(--panneau); border: 1px solid rgba(199,194,255,.3); border-radius: 16px;
  padding: 26px 34px; min-width: 260px; text-align: left;
  transition: border-color .2s, transform .2s, background .2s;
}
.projet-carte:hover, .projet-carte:focus-visible {
  border-color: var(--violet-clair); transform: translateY(-3px); background: rgba(159,143,255,.1);
}
.projet-carte-nom {
  font-family: var(--f-title); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: var(--clair); line-height: 1.1;
}
.projet-carte-lien { font-family: var(--f-pixel); font-size: .78rem; letter-spacing: .06em; color: var(--violet-clair); }

.chapitre-titre-grand {
  font-family: var(--f-title); font-weight: 800; text-transform: uppercase;
  /* Plancher bas : à 3.2rem, « constellation » débordait de l'écran mobile. */
  font-size: clamp(2rem, 9vw, 7rem); line-height: 1; margin: 18px auto 0;
  text-align: center; max-width: 16ch;
}
.souschapitre-titre {
  margin-top: 72px; font-family: var(--f-title); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.08;
}
.podcast-card { margin-top: 32px; max-width: 780px; display: flex; gap: 32px; align-items: center; }
@media (max-width: 640px) { .podcast-card { flex-direction: column; align-items: flex-start; } }
.podcast-visuel {
  flex: 0 0 200px; width: 200px; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(199,194,255,.28); box-shadow: 0 30px 70px rgba(3,0,16,.5);
}
.podcast-visuel img { width: 100%; height: 100%; object-fit: cover; }
.podcast-texte { flex: 1; }

/* ---------- Le fork ateliers vidéo : deux cadres arrivent chacun d'un côté ---------- */
.fork-section { margin-top: 0; }
.fork-piste { height: 360vh; }
.projet-frame.frame-half { width: min(420px, 46vw); }
@media (max-width: 700px) { .projet-frame.frame-half { width: 78vw; } }
/* Cadres du choix : format un peu plus haut, pour les visuels en portrait. */
.frame-half .frame-visuel { aspect-ratio: 4/3; }
.fork-frame[data-path-choice].chosen { border-color: var(--lime); box-shadow: 0 40px 90px rgba(3,0,16,.6), 0 0 0 2px rgba(212,226,36,.4); }
/* Visible par défaut une fois démasqué : l'animation décore l'arrivée,
   elle ne conditionne jamais la visibilité. */
.fork-resultat {
  margin: 0 auto; max-width: 760px; text-align: center;
  /* dégage la barre fixe du haut quand on y arrive par scrollIntoView */
  scroll-margin-top: 110px; padding-top: 24px;
}
.fork-resultat.arrive { animation: arriveePanel .6s var(--ease); }
@keyframes arriveePanel {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.fork-resultat p { color: var(--clair-70); margin: 0 auto; max-width: 58ch; }
/* Spécificité renforcée : sans cela, la règle ci-dessus remet la marge à 0
   et le sous-titre se retrouve collé aux vidéos. */
.fork-resultat .fork-sous-titre { margin: 38px auto 26px; }

/* Navigation du chapitre : une flèche vers le haut pour revenir,
   une vers le bas pour continuer — centrées, respirantes. */
.fork-nav {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 0 auto; background: none; border: 0; cursor: pointer;
  padding: 12px 22px; border-radius: 14px;
  font-family: var(--f-pixel); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--clair-70); transition: color .2s, background .2s;
}
.fork-nav:hover, .fork-nav:focus-visible { color: var(--lime); background: rgba(199,194,255,.06); }
.fork-nav .fleche { font-size: 1.3rem; line-height: 1; }
.fork-retour { margin-bottom: 34px; }
.fork-continuer { margin-top: 44px; color: var(--lavande); }
.fork-resultat .mini-link { display: inline-block; margin: 18px auto 26px; font-family: var(--f-pixel); font-size: .82rem; color: var(--rose-doux); background: none; border: 0; cursor: pointer; padding: 0; }
.fork-resultat .video-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .fork-resultat .video-duo { grid-template-columns: 1fr; } }
.fork-resultat .video-shell { position: relative; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: #000; }
.fork-resultat .video-shell .poster { width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.fork-resultat .video-shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fork-resultat .video-play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(212,226,36,.92); border: 0; font-size: 1.1rem; cursor: pointer; color: var(--nuit);
}

/* ---------- Équipe : sous-chapitres + flip-cards ---------- */
.equipe-souschapitre {
  font-family: var(--f-pixel); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lavande); margin-top: 48px; margin-bottom: 4px;
}
.flip-card { perspective: 1200px; }
.flip-inner {
  position: relative; transform-style: preserve-3d; transition: transform .5s var(--ease); min-height: 220px;
}
.flip-card:hover .flip-inner, .flip-card:focus-visible .flip-inner, .flip-card:focus-within .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
  position: absolute; inset: 0; backface-visibility: hidden; text-align: center;
}
.flip-back {
  transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center;
  background: var(--panneau); border: 1px solid rgba(199,194,255,.25); border-radius: 14px; padding: 16px;
}
.flip-back h3 { font-size: .95rem; text-transform: none; margin-bottom: 8px; }
.flip-back p { font-size: .84rem; color: var(--clair-70); }
.partenaires-band { margin-top: 90px; }
.partenaires-band p { font-family: var(--f-pixel); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--clair-45); margin-bottom: 20px; }
/* Bandeau défilant : les logos glissent en continu, en boucle douce.
   Fond lavande plutôt que blanc pur, moins dur sur le violet nuit. */
.logos-defile {
  position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-track {
  display: flex; gap: 18px; align-items: center; width: max-content;
  animation: defileLogos 110s linear infinite;
}
.logos-defile:hover .logos-track { animation-play-state: paused; }
@keyframes defileLogos {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-chip {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  height: 64px; padding: 10px 22px; border-radius: 12px;
  background: var(--lavande-pale, #E6E3FF); box-shadow: 0 12px 30px rgba(3,0,16,.3);
}
.logos-track img { height: 100%; max-width: 130px; width:auto; object-fit:contain; }
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .logos-defile { -webkit-mask-image: none; mask-image: none; }
}

.site-footer { position: relative; z-index: 10; padding: 40px var(--gutter) 60px; text-align:center; }
.site-footer p { color: var(--clair-45); font-size: .85rem; }
.site-footer a { color: var(--lavande); }

/* ---------- Jeu des pixels perdus ---------- */
.pixel-perdu {
  display: inline-block; width: 9px; height: 9px; margin-left: 7px; vertical-align: middle;
  background: var(--lime); border: 0; padding: 0; border-radius: 1px; cursor: pointer;
  opacity: .55; animation: pixel-pulse 2.6s ease-in-out infinite;
}
.pixel-perdu:hover, .pixel-perdu:focus-visible { opacity: 1; }
.pixel-perdu.found { background: var(--rose); opacity: .85; animation: none; }
@keyframes pixel-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,226,36,.5); }
  50% { box-shadow: 0 0 0 7px rgba(212,226,36,0); }
}

.pixel-widget { position: fixed; left: 18px; bottom: 18px; z-index: 200; font-family: var(--f-pixel); }
.pixel-widget-toggle {
  display: flex; align-items: center; gap: 10px; background: rgba(27,14,66,.92);
  border: 1px solid rgba(199,194,255,.25); border-radius: 999px; padding: 9px 16px 9px 12px;
  color: var(--clair); cursor: pointer; font-size: .72rem; letter-spacing: .06em; font-family: var(--f-pixel);
}
.pixel-widget-dots { display: flex; gap: 4px; }
.pixel-widget-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(199,194,255,.25); transition: background .3s; }
.pixel-widget-dots span.on { background: var(--lime); }
.pixel-widget-panel {
  position: absolute; bottom: calc(100% + 10px); left: 0; width: 250px;
  background: rgba(19,10,48,.97); border: 1px solid rgba(199,194,255,.25); border-radius: 14px; padding: 16px;
  opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.pixel-widget.open .pixel-widget-panel { opacity: 1; pointer-events: auto; transform: none; }
.pixel-widget-panel p { font-size: .74rem; color: var(--clair-70); margin-bottom: 10px; line-height: 1.5; }
.pixel-widget-phrase { font-family: var(--f-title); font-size: .95rem; color: var(--lime); text-transform: none; line-height: 1.35; }

.voyage-toast {
  position: fixed; left: 50%; bottom: 76px; translate: -50% 0; z-index: 210;
  background: rgba(19,10,48,.96); border: 1px solid rgba(212,226,36,.4); color: var(--clair);
  padding: 10px 18px; border-radius: 999px; font-family: var(--f-pixel); font-size: .78rem;
  opacity: 0; transition: opacity .3s var(--ease), translate .3s var(--ease); pointer-events: none; text-align:center;
  max-width: 86vw;
}
.voyage-toast.show { opacity: 1; translate: -50% -6px; }

/* ---------- La traversée : l'écran se couvre pendant qu'on file ailleurs ---------- */
.warp-overlay {
  position: fixed; inset: 0; z-index: 350; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(34,16,82,.55), rgba(9,4,24,.96) 70%);
  opacity: 0; pointer-events: none; transition: opacity .45s var(--ease);
}
.warp-overlay.actif { opacity: 1; pointer-events: auto; }
.warp-label {
  font-family: var(--f-pixel); font-size: clamp(.8rem, 1.6vw, 1rem); letter-spacing: .22em;
  text-transform: uppercase; color: var(--lavande); text-align: center; max-width: 80vw;
  opacity: 0; transform: translateY(12px);
}
.warp-overlay.actif .warp-label { animation: warpLabel 1.1s var(--ease) forwards; }
@keyframes warpLabel {
  0% { opacity: 0; transform: translateY(12px); letter-spacing: .5em; }
  35% { opacity: 1; transform: translateY(0); letter-spacing: .22em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: .22em; }
}

/* ---------- Fenêtres de détail (modales dans l'univers) ---------- */
.overlay-modal {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  padding: 4vh 20px; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.overlay-modal.open { opacity: 1; pointer-events: auto; }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(9,4,24,.82); backdrop-filter: blur(6px); }
.overlay-panel {
  position: relative; max-width: 760px; width: 100%; max-height: 90vh; overflow-y: auto;
  background: var(--panneau); border: 1px solid rgba(199,194,255,.28); border-radius: 20px;
  padding: clamp(28px, 5vw, 52px); box-shadow: 0 50px 120px rgba(2,0,14,.6);
  transform: translateY(18px) scale(.98); transition: transform .3s var(--ease);
}
.overlay-modal.open .overlay-panel { transform: translateY(0) scale(1); }
.overlay-panel-wide { max-width: 980px; }
.overlay-close {
  position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(199,194,255,.12); border: 1px solid rgba(199,194,255,.25); color: var(--clair);
  font-size: 1rem; cursor: pointer;
}
.overlay-content .lead { margin-top: 18px; }
.overlay-content .media-credit { margin-top: 16px; font-size: .8rem; color: var(--clair-45); }
.modal-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.modal-grille-3 { grid-template-columns: repeat(3, 1fr); }
.modal-grille article { border-top: 2px solid rgba(199,194,255,.22); padding-top: 14px; }
.modal-grille .num { font-family: var(--f-pixel); color: var(--violet-clair); font-size: .82rem; }
.modal-grille h3 { margin: 8px 0 6px; font-size: 1rem; }
.modal-grille p { color: var(--clair-70); font-size: .92rem; }
@media (max-width: 700px) { .modal-grille, .modal-grille-3 { grid-template-columns: repeat(2, 1fr); } }
.modal-timeline { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.modal-timeline > div { flex: 1 1 140px; border: 1px solid rgba(199,194,255,.22); border-radius: 12px; padding: 14px 16px; }
.modal-timeline span { display: block; font-family: var(--f-pixel); font-size: .72rem; color: var(--lavande); letter-spacing: .06em; text-transform: uppercase; }
.modal-timeline strong { display: block; margin-top: 6px; font-size: .95rem; }
.modal-duo { display: flex; gap: 20px; margin-top: 32px; flex-wrap: wrap; }
.modal-duo figure { flex: 1 1 200px; }
.modal-duo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.modal-duo figcaption { margin-top: 10px; }
.modal-duo figcaption strong { display: block; font-size: .92rem; }
.modal-duo figcaption span { display: block; font-size: .82rem; color: var(--clair-70); }
/* Partenaires d'un projet : les logos gardent le chip clair du bandeau. */
.modal-partenaires { margin-top: 34px; }
.modal-partenaires-titre {
  font-family: var(--f-pixel); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lavande); margin-bottom: 14px;
}
.modal-partenaires-logos { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.modal-partenaires-logos img { max-height: 44px; width: auto; display: block; }

.modal-plateformes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
@media (max-width: 480px) { .modal-plateformes { grid-template-columns: 1fr; } }
.modal-films { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 32px; }
@media (max-width: 640px) { .modal-films { grid-template-columns: 1fr; } }
.modal-films .video-shell { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; }
.modal-films .video-shell .poster { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.modal-films .video-shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal-films .video-play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(212,226,36,.92); border: 0; font-size: 1.1rem; cursor: pointer; color: var(--nuit);
}
.modal-films figcaption { margin-top: 10px; font-size: .86rem; color: var(--clair-70); }
.plateforme-lien {
  display: block; text-align: center; padding: 16px; border-radius: 12px;
  background: rgba(199,194,255,.08); border: 1px solid rgba(199,194,255,.25);
  font-family: var(--f-pixel); font-size: .85rem; letter-spacing: .04em;
  color: var(--clair); text-decoration: none; transition: border-color .2s, background .2s;
}
.plateforme-lien:hover, .plateforme-lien:focus-visible { border-color: var(--lime); background: rgba(212,226,36,.08); color: var(--lime); }

/* ---------- Widget : bouton de récompense ---------- */
/* [hidden] doit garder le dessus sur display:block, sinon le bouton reste visible. */
.pixel-widget-cta[hidden] { display: none; }
.pixel-widget-cta {
  display: block; width: 100%; margin-top: 4px; background: var(--lime); color: var(--nuit);
  border: 0; border-radius: 999px; padding: 10px 14px; font-family: var(--f-pixel); font-size: .76rem;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}

/* ---------- Photomaton ---------- */
.photomaton-grille { display: grid; grid-template-columns: 300px 1fr; gap: 32px; margin-top: 32px; align-items: start; }
@media (max-width: 760px) { .photomaton-grille { grid-template-columns: 1fr; } }
.photomaton-cadre { max-width: 300px; margin: 0 auto; }
.photomaton-cadre canvas { width: 100%; height: auto; display: block; background: #DCCFEE; }
.photomaton-controles { display: flex; flex-direction: column; gap: 14px; }
.photomaton-controles .ctrl { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--clair-70); }
.photomaton-controles .ctrl span { font-family: var(--f-pixel); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--lavande); }
.photomaton-controles .ctrl.case { flex-direction: row; align-items: center; }
.photomaton-controles input[type="text"], .photomaton-controles select, .photomaton-controles input[type="file"] {
  background: rgba(199,194,255,.08); border: 1px solid rgba(199,194,255,.25); border-radius: 8px;
  padding: 8px 10px; color: var(--clair); font-family: var(--f-body); font-size: .9rem;
}
.photomaton-controles input[type="range"] { accent-color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Pages projet : même univers, sans le moteur du voyage.
   Fond statique (pas de canvas) pour rester léger et autonome.
   ========================================================================== */
.page-projet {
  background:
    radial-gradient(1100px 700px at 80% -10%, rgba(159,143,255,.14), transparent 60%),
    radial-gradient(900px 700px at -10% 25%, rgba(82,42,255,.2), transparent 55%),
    var(--nuit);
  background-attachment: fixed;
}
.page-projet .site-header { position: sticky; background: rgba(13,7,36,.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(199,194,255,.16); }
.projet-page-main { position: relative; z-index: 10; max-width: 900px; margin: 0 auto; padding: clamp(90px, 12vw, 150px) var(--gutter) 0; }
.projet-retour {
  display: flex; width: fit-content; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--f-pixel); font-size: .78rem; letter-spacing: .06em; color: var(--clair-45);
  margin-bottom: 30px;
}
.projet-retour:hover, .projet-retour:focus-visible { color: var(--lime); }
.projet-page-titre {
  font-family: var(--f-title); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.3rem, 6.5vw, 4.4rem); line-height: 1.02; margin-top: 12px;
}
.projet-page-titre span { color: var(--violet-clair); }
/* Sur une page projet, le texte occupe toute la colonne : sinon il s'arrête
   bien avant le bord des images et la page paraît mal alignée. */
/* Corps de texte de la même taille que les sections : un chapeau plus gros
   passait à la ligne plus tôt et semblait s'arrêter avant le reste. */
.projet-page-main .lead { margin-top: 24px; font-size: clamp(1rem, 1.4vw, 1.08rem); max-width: none; }
.projet-page-main .lead + .lead { margin-top: 16px; }
.projet-visuel { margin-top: 44px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(199,194,255,.25); }
.projet-visuel img { width: 100%; height: auto; display: block; }
.projet-bloc { margin-top: 52px; }
.projet-bloc h2 {
  font-family: var(--f-title); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.8vw, 2rem); margin-bottom: 18px;
}
.projet-bloc p { color: var(--clair-70); }
.projet-bloc p + p { margin-top: 14px; }
.projet-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
@media (max-width: 700px) { .projet-liste { grid-template-columns: 1fr; } }
.projet-liste article { border-top: 2px solid rgba(199,194,255,.22); padding-top: 14px; }
.projet-liste h3 { font-size: 1rem; margin-bottom: 8px; }
.projet-liste p { font-size: .92rem; }
.projet-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
@media (max-width: 700px) { .projet-videos { grid-template-columns: 1fr; } }
.projet-videos iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; display: block; }
.projet-videos figcaption { margin-top: 10px; font-size: .88rem; color: var(--clair-70); }
.projet-page-main .btn { margin-bottom: 10px; }
.projet-note { margin-top: 44px; padding: 20px 24px; border-radius: 14px; background: rgba(199,194,255,.07); border: 1px solid rgba(199,194,255,.22); }
.projet-note p { color: var(--clair-70); font-size: .95rem; }
.page-projet .site-footer { margin-top: 90px; }
.fork-sous-titre {
  margin-top: 32px; margin-bottom: 28px;
  font-family: var(--f-pixel); font-size: .8rem; letter-spacing: .06em;
  color: var(--lavande); text-transform: none;
}
/* Affiche de film : format portrait, contenue et centrée. */
.projet-affiche {
  margin: 44px auto 0; max-width: 420px;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(199,194,255,.25);
  box-shadow: 0 40px 90px rgba(3,0,16,.55);
}
.projet-affiche img { width: 100%; height: auto; display: block; }

/* Lien secondaire : présent mais pas mis en avant comme un bouton d'action. */
.lien-discret {
  display: inline-block; margin-top: 12px;
  font-family: var(--f-body); font-size: .95rem;
  color: var(--lavande); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(199,194,255,.4);
}
.lien-discret:hover, .lien-discret:focus-visible {
  color: var(--clair); text-decoration-color: rgba(244,241,255,.7);
}

/* ==========================================================================
   La constellation de Janette : chaque personne est une étoile.
   Deux amas (comité / équipe) reliés par de fines lignes ; au clic,
   l'étoile s'avance en pleine lumière avec sa fiche.
   ========================================================================== */
.constellation-aide {
  margin-top: 10px; max-width: 60ch; color: var(--clair-70); font-size: .95rem;
}
.constellation {
  position: relative; margin-top: 46px;
  aspect-ratio: 16 / 9; width: 100%;
}
.constellation-lignes {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
.constellation-lignes line {
  stroke: rgba(199,194,255,.28); stroke-width: 1;
  transition: stroke .3s var(--ease);
}
.constellation-lignes line.pont { stroke-dasharray: 4 6; stroke: rgba(199,194,255,.2); }
.constellation-lignes line.active { stroke: rgba(212,226,36,.6); }

.constellation-nom {
  position: absolute; left: var(--x); top: var(--y); translate: -50% 0;
  font-family: var(--f-pixel); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--clair-45); white-space: nowrap;
}

.etoile {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: 0; padding: 10px; cursor: pointer;
  color: var(--clair-70); transition: color .25s var(--ease);
}
.etoile-point {
  display: block; width: var(--taille, 12px); height: var(--taille, 12px);
  border-radius: 50%; background: var(--lavande);
  box-shadow: 0 0 12px rgba(199,194,255,.7);
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.etoile-halo {
  position: absolute; top: 10px; left: 50%; translate: -50% 0;
  width: calc(var(--taille, 12px) * 3); height: calc(var(--taille, 12px) * 3);
  border-radius: 50%; background: radial-gradient(circle, rgba(199,194,255,.28), transparent 70%);
  opacity: 0; transition: opacity .3s var(--ease); pointer-events: none;
}
.etoile-etiquette {
  font-family: var(--f-pixel); font-size: .7rem; letter-spacing: .06em;
  white-space: nowrap; opacity: .55; transition: opacity .25s var(--ease);
}
/* profondeur : les étoiles proches sont plus grosses et plus franches */
.etoile[data-profondeur="1"] { --taille: 9px; opacity: .72; }
.etoile[data-profondeur="2"] { --taille: 13px; opacity: .88; }
.etoile[data-profondeur="3"] { --taille: 17px; opacity: 1; }

.etoile:hover, .etoile:focus-visible { color: var(--clair); opacity: 1; }
.etoile:hover .etoile-point, .etoile:focus-visible .etoile-point {
  transform: scale(1.35); background: var(--lime); box-shadow: 0 0 22px rgba(212,226,36,.75);
}
.etoile:hover .etoile-halo, .etoile:focus-visible .etoile-halo { opacity: 1; }
.etoile:hover .etoile-etiquette, .etoile:focus-visible .etoile-etiquette { opacity: 1; }

.etoile.choisie { opacity: 1; color: var(--clair); }
.etoile.choisie .etoile-point {
  transform: scale(1.5); background: var(--lime); box-shadow: 0 0 26px rgba(212,226,36,.85);
}
.etoile.choisie .etoile-halo { opacity: 1; }
.etoile.choisie .etoile-etiquette { opacity: 1; }

.etoile-libre .etoile-point {
  background: none; border: 2px dashed rgba(199,194,255,.6); box-shadow: none;
}

/* La fiche : la personne vient en pleine lumière */
.etoile-fiche {
  display: flex; gap: 26px; align-items: flex-start;
  margin: 40px auto 0; max-width: 640px; position: relative;
  background: var(--panneau); border: 1px solid rgba(199,194,255,.28);
  border-radius: 18px; padding: 26px 30px;
  animation: ficheArrive .45s var(--ease);
}
@keyframes ficheArrive {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.etoile-fiche-portrait {
  flex: 0 0 110px; width: 110px; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; border: 2px solid rgba(199,194,255,.35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-title); font-size: 2rem; color: var(--lavande);
  background: rgba(199,194,255,.08);
}
.etoile-fiche-portrait img { width: 100%; height: 100%; object-fit: cover; }
.etoile-fiche-texte h3 { font-size: 1.15rem; text-transform: none; }
.etoile-fiche-texte .metier {
  font-family: var(--f-pixel); font-size: .74rem; color: var(--violet-clair); margin: 6px 0 12px;
}
.etoile-fiche-texte p { color: var(--clair-70); font-size: .95rem; }
.etoile-fermer {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(199,194,255,.12); border: 1px solid rgba(199,194,255,.25);
  color: var(--clair); cursor: pointer; font-size: .85rem;
}

/* Sur petit écran la constellation devient illisible : on repasse en liste. */
@media (max-width: 760px) {
  .constellation { aspect-ratio: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 30px; }
  .constellation-lignes, .constellation-nom { display: none; }
  .etoile {
    position: static; translate: none; flex-direction: row; gap: 14px;
    width: 100%; padding: 13px 4px; opacity: 1;
    border-bottom: 1px solid rgba(199,194,255,.14);
  }
  .etoile-halo { display: none; }
  .etoile-etiquette { opacity: 1; font-size: .82rem; }
  .etoile-fiche { flex-direction: column; align-items: center; text-align: center; }
}

/* ==========================================================================
   Équipe en fenêtres rétro : même langage visuel que les projets.
   ========================================================================== */
.equipe-aide { margin-top: 10px; max-width: 60ch; color: var(--clair-70); font-size: .95rem; }
.equipe-fenetres {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 26px;
}
@media (max-width: 980px) { .equipe-fenetres { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .equipe-fenetres { grid-template-columns: 1fr; } }

/* Ces fenêtres ne sont pas cliquables : on neutralise l'état « bouton ». */
.membre-fenetre .frame-window { cursor: default; }
.membre-fenetre .frame-window:hover { border-color: rgba(199,194,255,.3); box-shadow: 0 40px 90px rgba(3,0,16,.6); }
.membre-fenetre .frame-visuel { aspect-ratio: 4 / 3; }
.membre-fenetre .frame-legende { padding: 18px 20px 22px; }
.membre-fenetre .frame-legende h3 { font-size: 1rem; text-transform: none; }
.membre-fenetre .frame-legende .metier {
  font-family: var(--f-pixel); font-size: .72rem; color: var(--violet-clair); margin: 6px 0 10px;
}
.membre-fenetre .frame-legende p { font-size: .92rem; color: var(--clair-70); margin-top: 0; }

.frame-visuel-vide {
  display: flex; align-items: center; justify-content: center;
  background: rgba(199,194,255,.06);
  border-bottom: 1px dashed rgba(199,194,255,.3);
  font-family: var(--f-title); font-size: 3rem; color: var(--lavande);
}
.membre-libre .frame-window { border-style: dashed; border-color: rgba(212,226,36,.4); }
.membre-libre .frame-legende a { color: var(--rose-doux); }

/* ==========================================================================
   La lampe secrète : n'éclaire que le pixel caché dans le trou noir, sans
   toucher à la luminosité générale du site.
   ========================================================================== */

/* L'encre invisible : le trou reste noir tant que le faisceau ne le balaie pas. */
.encre {
  margin-top: 26px; color: transparent; user-select: none;
  font-family: var(--f-pixel); font-size: .82rem; letter-spacing: .04em;
  line-height: 1.6; transition: color .3s var(--ease);
}
.encre .pixel-perdu { opacity: 0; pointer-events: none; animation: none; }
body.lampe-allumee.pixel-proche .encre { color: rgba(212,226,36,.92); }
body.lampe-allumee.pixel-proche .encre .pixel-perdu {
  opacity: 1; pointer-events: auto; animation: pixel-pulse 2.6s ease-in-out infinite;
}

/* Le faisceau : un petit halo qui suit le curseur, sans jamais assombrir le site. */
.lampe-torche {
  position: fixed; top: 0; left: 0; z-index: 320; pointer-events: none;
  width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,226,36,.32), rgba(212,226,36,.08) 55%, rgba(212,226,36,0) 75%);
  opacity: 0; transition: opacity .25s var(--ease);
}
body.lampe-allumee .lampe-torche { opacity: 1; }

.pixel-widget-lampe[hidden] { display: none; }
.pixel-widget-lampe {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 10px auto 0; padding: 0;
  background: none; border: 1px solid rgba(199,194,255,.35); border-radius: 50%;
  color: var(--lavande); cursor: pointer;
}
.pixel-widget-lampe svg { width: 22px; height: 22px; }
.pixel-widget-lampe:hover, .pixel-widget-lampe:focus-visible { border-color: var(--lime); color: var(--lime); }
.pixel-widget-lampe.allumee { border-color: var(--lime); color: var(--nuit); background: var(--lime); }

/* L'énigme finale : posée en pleine fenêtre, bien lisible. */
.pixel-enigme { margin-top: 28px; }
.pixel-enigme-question { font-size: 1.05rem; color: var(--clair); margin-bottom: 16px; }
.pixel-enigme-champ { display: flex; gap: 10px; max-width: 420px; }
.pixel-enigme-champ input {
  flex: 1; min-width: 0; background: rgba(199,194,255,.1);
  border: 1px solid rgba(199,194,255,.3); border-radius: 8px;
  padding: 12px 14px; color: var(--clair); font-family: var(--f-body); font-size: 1rem;
}
.pixel-enigme-champ button {
  background: var(--lavande); color: var(--nuit); border: 0; border-radius: 8px;
  padding: 12px 20px; cursor: pointer; font-family: var(--f-pixel); font-size: .8rem;
}
.pixel-enigme.faux .pixel-enigme-champ input { border-color: var(--rose); animation: secousse .4s; }
@keyframes secousse {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-enigme.faux .pixel-enigme-champ input { animation: none; }
}

/* ==========================================================================
   Cartes équipe : on clique pour retourner. Toutes de la même hauteur.
   ========================================================================== */
.equipe-fenetres { align-items: stretch; }
.membre-fenetre { height: 100%; }
.membre-carte {
  display: block; width: 100%; height: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  perspective: 1200px; text-align: left; color: inherit; font: inherit;
}
.membre-inner {
  position: relative; width: 100%; height: 100%; min-height: var(--h-carte, 420px);
  transform-style: preserve-3d; transition: transform .55s var(--ease);
}
.membre-carte.retournee .membre-inner { transform: rotateY(180deg); }
.membre-recto, .membre-verso {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; overflow: hidden;
}
.membre-verso {
  transform: rotateY(180deg);
  justify-content: center; background: var(--panneau);
}
.membre-verso .frame-legende { padding: 24px 22px; }
.membre-verso h3 { font-size: 1rem; text-transform: none; margin-bottom: 10px; }
.membre-verso p { font-size: .92rem; color: var(--clair-70); }
.membre-recto .frame-visuel { flex: 0 0 auto; }
.membre-recto .frame-legende { flex: 1; display: flex; flex-direction: column; }
.membre-indice {
  margin-top: auto; padding-top: 10px;
  font-family: var(--f-pixel); font-size: .68rem; letter-spacing: .06em; color: var(--rose-doux);
}
.membre-carte:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }

/* ==========================================================================
   La citation de Janette : une vraie pause, mise en avant comme le manifeste.
   ========================================================================== */
.citation-piste { height: 200vh; position: relative; }
.citation-sticky {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 90px var(--gutter) 0; text-align: center;
}
.citation-texte { max-width: 900px; }
.citation-phrase {
  font-family: var(--f-body); font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 2.1rem); line-height: 1.45; color: var(--clair);
}
.citation-phrase strong { color: var(--violet-clair); font-weight: 700; }
.citation-signature {
  margin-top: 22px; font-family: var(--f-poeme);
  font-size: clamp(1rem, 1.8vw, 1.3rem); color: var(--lavande);
}
/* L'indice reste lisible en permanence : c'est lui qui suggère la lampe. */
.citation-indice {
  margin-top: 90px; max-width: 480px;
  font-family: var(--f-pixel); font-size: .78rem; font-style: italic;
  letter-spacing: .02em; line-height: 1.6; color: var(--clair-70);
}
/* le pixel caché vit loin du texte : il faut promener le faisceau */
.encre-lointaine { margin-top: 22vh; }

@media (max-width: 760px) {
  .membre-inner { min-height: 380px; }
}

/* ==========================================================================
   MOBILE : le voyage cinématique laisse place à une lecture simple.
   Les sections épinglées duraient jusqu'à 4 écrans de défilement, ce qui
   donnait l'impression que la page bloquait ; et les deux cartes du choix,
   posées à gauche et à droite du centre, sortaient de l'écran.
   Ici tout revient dans le flux normal, de haut en bas.
   ========================================================================== */
@media (max-width: 760px) {
  .manifeste-piste, .titre-piste, .projet-piste, .fork-piste, .citation-piste { height: auto; }
  .manifeste-sticky, .titre-sticky, .projet-sticky, .citation-sticky {
    position: static; height: auto; overflow: visible;
    perspective: none; padding: 56px var(--gutter);
  }
  .projet-frame {
    position: static; width: 100%; max-width: 420px; margin: 0 auto 48px;
    transform: none; opacity: 1;
  }
  .projet-frame.frame-half, .projet-frame.frame-compact { width: 100%; }
  .projet-frame.atelier-titre { top: auto; margin-bottom: 22px; }
  .frame-titre { width: 100%; }
  /* plus de progression au scroll : les lignes du manifeste sont lisibles d'emblée */
  .manifeste-ligne { opacity: 1; }

  /* La chasse aux pixels demande un curseur : la lampe suit le pointeur et
     les cibles sont minuscules. Injouable au doigt, donc réservée aux
     écrans plus larges. */
  .pixel-widget, .pixel-perdu, .lampe-torche, .citation-indice, .encre { display: none !important; }
}