/* ==========================================================================
   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; }
/* Les pastilles ne sont pas réparties régulièrement : chacune est posée à la
   position réelle de son chapitre dans la page (calculée par le script). Sinon
   la barre, qui monte proportionnellement au défilement, prenait jusqu'à vingt
   points d'avance sur la pastille correspondante. */
.rail-dots { position: absolute; inset: 0; }
.rail-dots button {
  position: absolute; left: 50%; translate: -50% -50%;
  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-statut {
  display: inline-block; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px;
  font-family: var(--f-pixel); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nuit); background: var(--lime); 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); }
@media (max-width: 480px) {
  .iban-card { padding: 20px 16px; }
  .iban-statut { font-size: clamp(.56rem, 2.9vw, .68rem); letter-spacing: .08em; }
  .iban-numero { font-size: clamp(.8rem, 4.3vw, 1.15rem); letter-spacing: .01em; white-space: nowrap; }
}
.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); }

/* ---------- La traversée : on file droit devant ----------
   Volontairement courte : c'est une respiration entre deux chapitres, pas une
   étape. Le champ d'étoiles frontal est dessiné sur le canvas de fond. */
/* 370vh = 270vh de défilement réel une fois l'écran collant déduit. À 150vh il
   n'en restait que 50 : un seul coup de molette traversait tout. */
.traversee-piste { height: 370vh; position: relative; }
.traversee-sticky {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gutter); pointer-events: none;
}
.traversee-mot {
  font-family: var(--f-pixel); font-size: clamp(.72rem, 1.5vw, .9rem);
  letter-spacing: .22em; text-transform: uppercase; text-align: center;
  color: var(--lavande); opacity: 0;
}

/* 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; text-align: center;
}
.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; }
  .pixel-perdu.found.rale { animation: 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; }
/* Le pixel déjà trouvé se secoue quand on insiste. */
.pixel-perdu.found.rale { animation: pixel-rale .4s ease-in-out; }
@keyframes pixel-rale {
  0%, 100% { transform: translateX(0) scale(1); }
  25% { transform: translateX(-3px) scale(1.25); }
  75% { transform: translateX(3px) scale(1.25); }
}
@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); }
/* La boîte est posée au-dessus des pastilles, et assez grande pour se lire
   d'un coup d'œil : c'est elle qui annonce qu'il y a un jeu. */
.pixel-widget-toggle {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(27,14,66,.92);
  border: 1px solid rgba(199,194,255,.25); border-radius: 18px; padding: 12px 16px 10px;
  color: var(--clair); cursor: pointer; font-size: .72rem; letter-spacing: .06em; font-family: var(--f-pixel);
}
.pixel-widget-toggle .pixel-widget-dots { order: 2; }
.pixel-widget-toggle #pixelCount { order: 3; }
.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: var(--lavande); }
.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; }

/* ---------- La boîte à outils ----------
   Le widget ne montrait que six pastilles : des testeurs n'y voyaient pas un
   jeu. En boîte à outils, il se lit comme un objet qu'on ouvre. Deux outils
   ne servent à rien : c'est justement ce qui donne envie d'essayer. */
/* L'icône de la boîte, sur le bouton fermé : c'est elle qui doit faire
   comprendre qu'il y a quelque chose à ouvrir, sans un mot d'explication. */
.boite-icone { width: 40px; height: 34px; color: var(--lime); }
.pixel-widget-toggle:hover .boite-icone { color: var(--clair); }

.boite-outils { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.outil {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; cursor: pointer;
  background: rgba(199,194,255,.06); border: 1px solid rgba(199,194,255,.22);
  border-radius: 12px; color: var(--lavande);
  font-family: var(--f-pixel); font-size: .6rem; letter-spacing: .04em;
  text-transform: uppercase; transition: border-color .2s, background .2s, color .2s;
}
.outil[hidden] { display: none; }
.outil svg { width: 24px; height: 24px; }
.outil:hover, .outil:focus-visible { border-color: var(--lavande); color: var(--clair); }
.outil.pris {
  border-color: var(--lime); color: var(--nuit); background: var(--lime);
}
.boite-jeu {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed rgba(199,194,255,.2);
}

/* Baguette en main : le curseur devient une étoile, et tout clic sème des paillettes. */
body.baguette-en-main,
body.baguette-en-main a,
body.baguette-en-main button {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'%3E%3Cg%20fill='%23C7C2FF'%3E%3Crect%20x='2'%20y='23'%20width='4'%20height='4'/%3E%3Crect%20x='6'%20y='19'%20width='4'%20height='4'/%3E%3Crect%20x='10'%20y='15'%20width='4'%20height='4'/%3E%3Crect%20x='14'%20y='11'%20width='4'%20height='4'/%3E%3C/g%3E%3Cpolygon%20points='21,1%2023.2,5.8%2028,8%2023.2,10.2%2021,15%2018.8,10.2%2014,8%2018.8,5.8'%20fill='%23FF47FF'/%3E%3C/svg%3E") 21 8, pointer;
}


/* 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) {
  /* On garde la hauteur calculée en JS : une valeur fixe rognait le texte. */
  .membre-inner { min-height: var(--h-carte, 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; }
  /* La traversée demande de l'épinglage : elle n'a pas sa place ici. */
  .traversee-piste { display: none; }
  .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; }
}

/* ==========================================================================
   SOURIS À MOLETTE : les sections épinglées raccourcissent.

   Un cran de molette avance de 100 px ; un geste de trackpad, avec son inertie,
   en couvre plus de mille. À longueur égale, la molette demandait 276 crans
   pour traverser le site contre 23 gestes au trackpad — douze fois plus.

   Les animations sont pilotées par la progression dans la section (0 à 1) et
   non par une distance absolue : les raccourcir ne coupe donc rien, cela
   resserre simplement le geste. Le trackpad, lui, garde le rythme ample.
   La classe est posée par le script au premier tour de molette reconnu.
   ========================================================================== */
html.molette .manifeste-piste { height: 230vh; }
html.molette .traversee-piste { height: 200vh; }
html.molette .projet-piste    { height: 185vh; }
html.molette .fork-piste      { height: 195vh; }
html.molette .titre-piste     { height: 120vh; }
html.molette .citation-piste  { height: 130vh; }

/* ==========================================================================
   Avis « 100% authentiques » — parodie des témoignages clients.
   Cartes légèrement de travers, comme des petits mots punaisés : on prend
   le contre-pied du bloc de témoignages lisse et corporate.
   ========================================================================== */
.avis-section {
  padding: clamp(70px, 9vw, 120px) var(--gutter);
  max-width: 1240px; margin: 0 auto; text-align: center;
}

/* Le bandeau de note : volontairement crédible, c'est le « (ou presque) »
   du titre qui vend la mèche. Il lui faut de l'air, le titre est massif. */
.avis-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(22px, 2.6vw, 34px);
  padding: 9px 18px; border-radius: 999px;
  background: rgba(212, 226, 36, .08); border: 1px solid rgba(212, 226, 36, .32);
  font-family: var(--f-pixel); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--clair-70);
}
.avis-badge-note { color: var(--lime); font-size: 1rem; line-height: 1; }
.avis-badge strong { color: var(--lime); font-weight: 400; }

.avis-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 22px; margin-top: 44px; text-align: left;
}
.avis-carte {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--panneau); border: 1px solid rgba(199, 194, 255, .28);
  border-radius: 16px; padding: 26px 26px 24px;
  transition: transform .28s var(--ease), border-color .28s, background .28s;
}
/* Chaque carte penche un peu différemment, et se redresse quand on la survole. */
.avis-carte:nth-child(1) { rotate: -1.4deg; }
.avis-carte:nth-child(2) { rotate: 1.1deg; }
.avis-carte:nth-child(3) { rotate: -0.7deg; }
.avis-carte:nth-child(4) { rotate: 1.6deg; }
.avis-carte:hover {
  rotate: 0deg; transform: translateY(-4px);
  border-color: var(--violet-clair); background: rgba(159, 143, 255, .09);
}

.avis-etoiles { font-size: 1.02rem; letter-spacing: .14em; line-height: 1; color: var(--lime); }
.avis-etoiles .etoile-vide { color: rgba(244, 241, 255, .2); }
/* La sixième étoile, celle qui ne devrait pas exister. */
.avis-etoiles .etoile-bonus { color: var(--rose); display: inline-block; animation: etoileBonus 2.6s var(--ease) infinite; }
@keyframes etoileBonus {
  0%, 82%, 100% { transform: scale(1) rotate(0deg); }
  88% { transform: scale(1.28) rotate(-12deg); }
  94% { transform: scale(1.1) rotate(8deg); }
}

.avis-carte blockquote { font-size: .95rem; line-height: 1.62; color: var(--clair-70); }
.avis-carte figcaption {
  margin-top: auto; padding-top: 4px;
  font-family: var(--f-poeme); font-weight: 800; font-size: 1.18rem;
  color: var(--lavande); line-height: 1.2;
}


@media (max-width: 760px) {
  .avis-grille { gap: 16px; margin-top: 34px; }
  .avis-carte { padding: 22px 22px 20px; }
  .avis-carte:nth-child(n) { rotate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .avis-carte { rotate: none !important; }
  .avis-etoiles .etoile-bonus { animation: none; }
}

/* L'aveu, glissé en tout petit dans le titre : il suffit, on n'explique rien de plus. */
.avis-presque {
  display: inline-block; margin-left: .35em;
  font-family: var(--f-body); font-style: italic; font-weight: 400;
  font-size: clamp(.9rem, 1.5vw, 1.15rem); text-transform: none;
  letter-spacing: 0; color: var(--clair-45); vertical-align: baseline;
}


/* Un avis en deux temps : la chute a besoin de sa propre respiration. */
.avis-carte blockquote p + p { margin-top: 12px; }


/* ==========================================================================
   Présentation du comité.
   Quatre registres au lieu d'un bloc de gris : l'accroche, l'aparté,
   les trois portraits en colonnes, puis le récit et sa chute.
   ========================================================================== */
.comite-intro { margin-top: 16px; text-align: center; }

/* L'accroche sort du gris : c'est elle qui porte la voix. */
.comite-accroche {
  max-width: 30ch; margin-inline: auto;
  font-size: clamp(1.18rem, 2.1vw, 1.65rem); line-height: 1.3;
  font-weight: 600; color: var(--clair);
}
.comite-chute {
  margin-top: 12px; max-width: 46ch; margin-inline: auto;
  font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.6; color: var(--lavande);
}

/* Même grille que les portraits juste en dessous : chaque phrase tombe
   au-dessus de la personne qu'elle décrit. */
.comite-trois {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 40px;
}
.comite-trois li {
  padding-top: 16px; border-top: 1px solid rgba(199, 194, 255, .22);
  font-size: 1rem; line-height: 1.6; color: var(--clair-70);
}
.comite-puce { display: block; width: 10px; height: 10px; margin: 0 auto 14px; }
.comite-trois li:nth-child(1) .comite-puce { background: var(--lavande); }
.comite-trois li:nth-child(2) .comite-puce { background: var(--lime); }
.comite-trois li:nth-child(3) .comite-puce { background: var(--rose); }

.comite-constat, .comite-suite {
  max-width: 58ch; margin-inline: auto; font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.7; color: var(--clair-70);
}
.comite-constat { margin-top: 40px; }
.comite-constat strong { color: var(--clair); font-weight: 600; }
.comite-suite { margin-top: 14px; }

/* La chute atterrit sur le nom de l'association. */
.comite-final {
  margin-top: 18px; max-width: 62ch; margin-inline: auto;
  font-size: clamp(1.05rem, 1.75vw, 1.32rem); line-height: 1.45;
  /* si l'écran est trop étroit pour une seule ligne, on coupe à l'équilibre */
  text-wrap: balance;
  font-weight: 600; color: var(--clair);
}

.comite-intro + .equipe-fenetres { margin-top: 46px; }

/* On suit exactement les ruptures de la grille des portraits. */
@media (max-width: 980px) { .comite-trois { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .comite-trois { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; } }

/* ==========================================================================
   Pluie d'étoiles — célébration au clic sur « Une future Janette ? ».
   Couche fixe au-dessus du contenu, jamais cliquable.
   ========================================================================== */
.pluie-etoiles {
  position: fixed; inset: 0; z-index: 330;
  pointer-events: none; overflow: hidden;
}
.pluie-etoiles span {
  position: absolute; top: -6vh;
  line-height: 1; opacity: 0;
  will-change: transform, opacity;
  animation-name: tomberEtoile; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes tomberEtoile {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translate3d(var(--derive, 0), 112vh, 0) rotate(var(--tour, 0deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pluie-etoiles { display: none; } }

/* ==========================================================================
   Dos de carte illustré (Marine) : la photo occupe le haut, le texte suit.
   Les cartes s'égalisent toutes seules sur la plus haute, en JS.
   ========================================================================== */
.membre-verso-photo { justify-content: flex-start; }
.membre-verso-photo .frame-visuel { flex: 0 0 auto; }
.membre-verso-photo .frame-legende { padding: 15px 18px 17px; }
.membre-verso-photo h3 { margin-bottom: 7px; }
.membre-verso-photo p { font-size: .84rem; line-height: 1.5; }

/* L'anecdote, détachée du métier par un filet. */
.membre-verso-photo .fun-fact {
  margin-top: 11px; padding-top: 11px;
  border-top: 1px solid rgba(199, 194, 255, .2);
  font-size: .79rem; line-height: 1.5;
}
.membre-verso-photo .fun-fact b {
  display: block; margin-bottom: 3px;
  font-family: var(--f-pixel); font-weight: 400;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lime);
}

/* Résumé posé sur le recto (Marine) : le dos est alors réservé à l'anecdote. */
.membre-resume {
  margin-top: 8px;
  font-size: .8rem; line-height: 1.45; color: var(--clair-70);
}

/* Fiche qui dit tout au recto : pas de retournement, donc pas de main au survol. */
.membre-carte[data-sans-verso] { cursor: default; }