/* ── LOADER ─────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 1000;
  overflow: hidden;
  background: #0d0805;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
  cursor: default;
}
#loader.ready { cursor: pointer; }

/* Loader — couches visuelles plein écran */
.l-layer { position: absolute; inset: 0; pointer-events: none; }
/* Ajustement composition : -6% + décalage gauche */
#loader .l-layer { transform: scale(0.94) translateX(-15px); transform-origin: center center; }
#loader .l-layer.l-fg { transform: scale(0.94) translateX(-55px); transform-origin: center center; }
/* BG : visible immédiatement — couvre la scène derrière */
.l-layer.l-bg  { opacity: 1; }
/* MID + FG : fondu décalé pour un rendu en profondeur */
.l-layer.l-mid { opacity: 0; animation: l-layer-in 0.8s ease-out 0.1s forwards; }
.l-layer.l-fg  { opacity: 0; animation: l-layer-in 0.8s ease-out 0.2s forwards; }
@keyframes l-layer-in { to { opacity: 1; } }

.l-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* BG + MID : légèrement agrandis pour absorber le déplacement parallaxe sans déborder */
.l-layer.l-bg img,
.l-layer.l-mid img { transform: scale(1.12); }
/* FG : pleine largeur, hauteur naturelle, calé en bas */
.l-layer.l-fg { overflow: hidden; }
.l-layer.l-fg img {
  height: auto; object-fit: initial;
  position: absolute; bottom: 0; left: 0;
  transform: none;
}

/* Loader — UI révèle élément par élément avec stagger */
#loader .ui { opacity: 1; }  /* le bloc ne fade plus — chaque enfant gère sa propre entrée */

#loader .edena-home {
  left: 3px; top: 17px;
  opacity: 0; transform: rotate(180deg) translateY(10px);
  transition: opacity 0.55s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.06s;
  cursor: default;
}
#loader.ready .edena-home { opacity: 1; transform: rotate(180deg); }

/* Tagline dans le loader — animée comme les autres éléments */
#loader .tagline {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.55s ease-out 0.12s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}
#loader.ready .tagline { opacity: 1; transform: translateY(0); }

#loader .manifeste-wrap {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.65s ease-out 0.16s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.16s;
}
#loader.ready .manifeste-wrap { opacity: 1; transform: translateY(0); }

#loader .l-enter {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s ease-out 0.28s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.28s;
}
#loader.ready .l-enter { opacity: 1; transform: translateY(0); }

/* Overrides hérités — ces éléments ne sont pas dans le loader mais laissés en sécurité */
#loader .desc    { opacity: 1; transition: none; }
#loader .quote   { opacity: 1; transition: none; }

/* ── Manifeste défilant — intro loader ─────────────── */
.manifeste-wrap {
  position: absolute;
  bottom: 53px; right: 52px;
  width: clamp(260px, 32vw, 500px);
  height: 58vh;
  overflow: hidden;
  scrollbar-width: none;
  cursor: default;
  pointer-events: auto;
  /* fondu haut + bas */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, black 10%, black 84%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, black 10%, black 84%, transparent 100%);
}
.manifeste-wrap::-webkit-scrollbar { display: none; }
.manifeste-wrap.scrollable { overflow-y: auto; cursor: ns-resize; }
.manifeste-inner {
  animation: manifeste-scroll 160s linear infinite;
}
@keyframes manifeste-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
body.edit-mode .manifeste-inner { animation-play-state: paused; }
.manifeste-inner p {
  font-family: var(--font);
  font-size: clamp(22px, 2.9vw, 46px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: white;
  text-align: left;
  margin: 0 0 0.9em 0;
  font-style: normal;
}
/* Bouton "explorer edena" — grand texte bas gauche */
#loader .l-enter {
  position: absolute;
  letter-spacing: -0.01em;
  user-select: none; white-space: nowrap;
  line-height: 1;
}

/* Panel Q&A — demi droite, même dégradé que les mentions légales */
#loader .loader-panel {
  position: absolute;
  display: flex;
  align-items: center;
  padding: 0 8% 0 10%;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.6s ease-out 0.1s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
#loader.ready .loader-panel { opacity: 1; transform: translateX(0); }

/* Fond dégradé via ::before — identique aux legal-panel */
#loader .loader-panel::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    linear-gradient(135deg, rgba(210,190,235,0.32) 0%, rgba(182,159,214,0.08) 55%, rgba(182,159,214,0) 75%),
    linear-gradient(to bottom,
      rgba(182,159,214,0.28) 0%,
      rgba(182,159,214,0.40) 18%,
      rgba(182,159,214,0.58) 35%,
      rgba(182,159,214,0.74) 52%,
      rgba(182,159,214,0.88) 68%,
      rgba(182,159,214,0.95) 84%,
      rgba(182,159,214,0.97) 100%
    );
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, rgba(0,0,0,0.08) 5%, rgba(0,0,0,0.22) 12%,
    rgba(0,0,0,0.48) 22%, rgba(0,0,0,0.70) 33%,
    rgba(0,0,0,0.88) 46%, rgba(0,0,0,0.97) 58%, black 72%);
  mask-image: linear-gradient(to right,
    transparent 0%, rgba(0,0,0,0.08) 5%, rgba(0,0,0,0.22) 12%,
    rgba(0,0,0,0.48) 22%, rgba(0,0,0,0.70) 33%,
    rgba(0,0,0,0.88) 46%, rgba(0,0,0,0.97) 58%, black 72%);
}

.loader-qa {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: 4vh;
  width: 100%;
}
.loader-qa-item {
  display: flex; flex-direction: column;
  gap: 8px;
}
.loader-qa-label {
  font-family: var(--font);
  font-size: 22px; font-weight: 600;
  color: #fe3600;
  letter-spacing: 0.02em;
  margin: 0;
}
.loader-qa-answer {
  font-family: var(--font);
  font-size: clamp(20px, 2.3vw, 32px);
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  line-height: 1.2; letter-spacing: -0.02em;
  margin: 0;
}
#loader.out { transform: translateY(100%); pointer-events: none; }

/* ── Invite immersive ───────────────────────────── */
.l-hint {
  position: absolute;
  bottom: 53px; left: 52px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.6s ease-out 0.4s;
  pointer-events: none;
}
#loader.ready .l-hint {
  opacity: 0.45;
  pointer-events: auto;
  transition: opacity 0.6s ease-out 0.4s;
}
#loader.ready .l-hint:hover { opacity: 0.85; }
.l-hint-text {
  font-family: var(--font);
  font-size: clamp(10px, 1vw, 13px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: white;
  user-select: none;
}
.l-hint-btns {
  display: flex;
  gap: 8px;
}
.l-hint-btn {
  font-family: var(--font);
  font-size: clamp(9px, 0.9vw, 12px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: white;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, opacity 0.25s;
}
.l-hint-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.8); }
.l-hint-btn.active { background: rgba(255,255,255,0.22); border-color: white; }

/* ── PARALLAX TOGGLE ────────────────────────────── */
/* ── SOUND TOGGLE ───────────────────────────── */
#sound-toggle {
  position: fixed;
  right: 4px; top: 63px;
  z-index: 1001;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  pointer-events: auto;
}
#sound-toggle:hover {
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.35);
}

/* État muet (défaut) : slash visible, ondes cachées */
#sound-toggle .stog-slash  { display: block; }
#sound-toggle .stog-wave   { display: none; }
#sound-toggle.off          { color: rgba(255,255,255,0.22); }

/* État actif : slash caché, ondes visibles et animées */
#sound-toggle.on .stog-slash  { display: none; }
#sound-toggle.on .stog-wave   { display: block; }
#sound-toggle.on              { color: #fe3600; border-color: rgba(254,54,0,0.5); background: rgba(254,54,0,0.08); }

/* Pulsation des ondes quand le son joue */
@keyframes stog-wave-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1;   }
}
#sound-toggle.on .stog-wave-1 {
  animation: stog-wave-pulse 1.6s ease-in-out infinite;
}
#sound-toggle.on .stog-wave-2 {
  animation: stog-wave-pulse 1.6s ease-in-out 0.4s infinite;
}

/* ── XP TOGGLE — mode immersion ─────────────── */
#xp-toggle {
  position: fixed;
  right: 4px; top: 117px;
  z-index: 1001;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  pointer-events: auto;
}
#xp-toggle:hover {
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.35);
}
/* Icône : expand visible, exit caché */
#xp-toggle .xp-exit   { display: none; }
#xp-toggle .xp-expand { display: block; }
/* État actif */
#xp-toggle.on {
  color: #fe3600;
  border-color: rgba(254,54,0,0.5);
  background: rgba(254,54,0,0.08);
}
#xp-toggle.on .xp-exit   { display: block; }
#xp-toggle.on .xp-expand { display: none; }

/* ── MODE IMMERSION — body.xp ────────────────── */
/* Transition sur tous les éléments UI masquables */
.ui,
#scene-nav,
#scene-counter,
.scroll-hint {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
/* Masquage en mode xp */
body.xp .ui,
body.xp #scene-nav,
body.xp #scene-counter,
body.xp .scroll-hint {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}
/* Les 3 boutons restent toujours visibles */
body.xp #parallax-toggle,
body.xp #sound-toggle,
body.xp #xp-toggle { opacity: 1 !important; pointer-events: auto; }

/* ── PARALLAX TOGGLE ────────────────────────── */
/* Cacher son + parallaxe sur l'écran d'intro */
body:not(.ready) #sound-toggle,
body:not(.ready) #parallax-toggle,
body:not(.ready) #xp-toggle {
  opacity: 0;
  pointer-events: none;
}

#parallax-toggle {
  position: fixed;
  top: 9px; right: 4px;
  z-index: 1001;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  pointer-events: auto;
}
#parallax-toggle:hover {
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.35);
}
#parallax-toggle .ptog-slash { display: none; }
#parallax-toggle:not(.off)   { color: #fe3600; border-color: rgba(254,54,0,0.5); background: rgba(254,54,0,0.08); }
#parallax-toggle.off .ptog-slash { display: block; }
#parallax-toggle.off { color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }


/* ── PARALLAX TOOLTIP ───────────────────────────── */
#ptog-tooltip {
  position: fixed;
  top: 58px; right: 10px;
  z-index: 1001;
  background: rgba(14,8,22,0.97);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  padding: 11px 14px 10px;
  display: flex; flex-direction: column; gap: 4px;
  font-family: 'Rethink Sans', sans-serif;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s ease-out, transform 0.28s cubic-bezier(0.34,1.2,0.64,1);
}
#ptog-tooltip.show {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}
/* Flèche pointant vers le bouton */
#ptog-tooltip::before {
  content: '';
  position: absolute;
  top: -5px; right: 14px;
  width: 8px; height: 8px;
  background: rgba(14,8,22,0.97);
  border-top: 1px solid rgba(255,255,255,0.13);
  border-left: 1px solid rgba(255,255,255,0.13);
  transform: rotate(45deg);
}
#ptog-tooltip-title {
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,0.92);
}
#ptog-tooltip-body {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.02em;
}

/* ── VIEWPORT ───────────────────────────────────── */
#vp { position: fixed; inset: 0; }

/* ── SCENE BASE ─────────────────────────────────── */
.scene {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  overflow: hidden;
  contain: layout style paint;      /* G — isole layout/paint de chaque scène */
  content-visibility: hidden;       /* D — navigateur saute le rendu des scènes inactives */
}
.scene.active {
  opacity: 1; pointer-events: auto; z-index: 2; will-change: transform;
  content-visibility: visible;
}
.scene.out {
  opacity: 1; z-index: 1; will-change: transform;
  content-visibility: visible;      /* visible pendant la transition de sortie */
}

/* ── PARALLAX LAYERS ────────────────────────────── */
.layer {
  position: absolute;
  inset: -7%;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.scene.active .layer { opacity: 1; transition: opacity 0.12s ease; }
.scene.out .layer    { opacity: 1; transition: none; }

.layer-bg {
  background-size: cover;
  background-position: center;
}
.layer-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.layer-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
}

/* ── GRADIENT OVERLAYS ──────────────────────────── */
.ov { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; }
.ov-top {
  top: 0; height: 30%;
  background: linear-gradient(to bottom, rgba(42,9,21,.72) 0%, transparent 100%);
}
.ov-bot {
  bottom: 0; height: 42%;
  background: linear-gradient(to top, rgba(42,9,21,.85) 0%, transparent 100%);
}

/* ── SCENE UI LAYER ─────────────────────────────── */
.ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* ════════════════════════════════════════════════
   PAGE 1 — ACCUEIL
════════════════════════════════════════════════ */

/* "edena" — incliné 90° à gauche, centré verticalement */
.edena-home {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;   /* centre le texte sur l'axe vertical (inline-axis en vertical-rl) */
  font-size: 33vh;
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: white;
  user-select: none;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease-out 0.12s, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}
body.ready .edena-home { opacity: 1; transform: translateY(0); }

/* ── Logo "edena" — home & contact : position et rotation identiques ── */
#scene-accueil .edena-home {
  left: 3px;
  top: 17px;
  transform: rotate(180deg);
  transition: opacity 0.7s ease-out 0.12s;
}
#scene-contact .edena-home {
  left: -2px;
  top: 18px;
  transform: rotate(180deg);
  transition: opacity 0.7s ease-out 0.12s;
}
body.ready #scene-accueil .edena-home,
body.ready #scene-contact .edena-home {
  opacity: 1;
  transform: rotate(180deg);
}

/* Top tagline */
.tagline {
  position: absolute;
  top: 30px;
  left: 30vh;
  font-size: 37px;
  font-weight: 500;
  color: rgba(255,255,255,.92);
  letter-spacing: -0.03em;
  line-height: 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.65s ease-out 0.24s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.24s;
}
body.ready .tagline { opacity: 1; transform: translateY(0); }

/* Top-right description */
.desc {
  position: absolute;
  top: 30px; right: 112px;
  text-align: right;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 700;
  line-height: 1.85;
  color: rgba(255,255,255,.9);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease-out 0.36s, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.36s;
}
body.ready .desc { opacity: 1; transform: translateY(0); }

/* Ligne "association" en regular */
.desc-light { font-weight: 400; }

/* Bottom-right quote — texte aligné à gauche */
.quote {
  position: absolute;
  bottom: 53px; right: 52px;
  text-align: left;
  font-size: clamp(22px, 2.9vw, 46px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: white;
  max-width: 50vw;
  font-style: normal;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s ease-out 0.48s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.48s;
}
body.ready .quote { opacity: 1; transform: translateY(0); }

/* Bottom-center scroll hint — cliquable */
.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
  background: none; border: none; padding: 0;
  color: rgba(182, 159, 214, 0.6);
  opacity: 0;
  transition: opacity 0.8s ease, color 0.25s;
  pointer-events: auto;
  cursor: pointer;
  animation: hint-breathe 3s ease-in-out infinite;
}
.scroll-hint.show { opacity: 1; }
.scroll-hint svg { display: block; }
.scroll-hint:hover { color: rgba(182, 159, 214, 1); }

@keyframes hint-breathe {
  0%, 100% { transform: translateX(-50%) translateY(0);   opacity: inherit; }
  55%       { transform: translateX(-50%) translateY(7px); }
}

/* ── NAVIGATION LABELS — wheel ──────────────── */
.scene-nav {
  position: fixed;
  left: 30px;
  bottom: 28px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  transition: opacity 0.5s;
}
.scene-nav.nav-hidden { opacity: 0; pointer-events: none; }

.snav-item {
  display: flex; align-items: center; gap: 12px;
  background: none; border: none;
  cursor: pointer; padding: 5px 0;
  color: rgba(255,255,255,0.45);
  font-family: var(--font);
  font-size: 15px; font-weight: 600;
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  max-height: 48px;
  overflow: hidden;
  transition: color 0.28s, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.28s;
}
/* Hover — tous les items apparaissent */
.scene-nav:hover .snav-item { opacity: 1; pointer-events: auto; }
.snav-item:hover { transform: scale(1.12); color: rgba(255,255,255,0.75); }
.snav-item.active { color: white; }
.snav-item.active:hover { color: white; }

.snav-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.4);
  background: transparent;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
}
.snav-item.active .snav-dot {
  background: var(--orange);
  border-color: var(--orange);
}

.snav-connector {
  width: 1px; height: 18px;
  background: rgba(255,255,255,0.2);
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.28s;
}
.scene-nav:hover .snav-connector { opacity: 1; }

/* ── Indicateur ··· avec pulsation jusqu'au premier survol ── */
@keyframes nav-breathe {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.75; }
}
.scene-nav::after {
  content: '···';
  display: block;
  font-family: var(--font);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--orange);
  padding: 4px 2px;
  opacity: 1;
  transition: opacity 0.15s;
  pointer-events: none;
  writing-mode: vertical-lr;
  animation: nav-breathe 2.8s ease-in-out infinite;
}
.scene-nav:hover::after { opacity: 0; }
.scene-nav.nav-seen::after { animation: none; }

/* ── Touch — nav toujours visible, pas de ··· ── */
@media (hover: none) {
  .scene-nav:not(.nav-hidden) .snav-item { opacity: 1; pointer-events: auto; }
  .scene-nav:not(.nav-hidden) .snav-connector { opacity: 1; }
  .scene-nav::after { display: none; }
}

/* ════════════════════════════════════════════════
   SCENE 3 — CONSTAT
════════════════════════════════════════════════ */

.constat-header {
  position: absolute;
  top: 52px; left: 30px;
  display: flex; align-items: flex-start; gap: 29px;
  pointer-events: none;
}
.edena-mark-v {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 36px; font-weight: 700;
  letter-spacing: 0.08em;
  color: #fe3600;
  margin-top: 20px;
  pointer-events: auto;
  cursor: pointer;
}
.constat-text { position: relative; display: flex; flex-direction: column; gap: 10px; margin-left: -10px; max-width: calc(28vw - 60px); }
.constat-title {
  font-size: clamp(34px, 4.4vw, 66px);
  font-weight: 700;
  letter-spacing: -0.03em; line-height: 0.95;
  color: white; margin: 0;
}
.constat-sub {
  font-size: clamp(23px, 2.6vw, 36px);
  font-weight: 400;
  color: white;
  line-height: 1.08; margin: 0;
  transition: opacity 0.35s;
}
#scene-constat.detail-open .constat-sub  { opacity: 0; }
#scene-constat.detail-open .fond-note-wrap { opacity: 0; pointer-events: none; }

/* Texte gauche — superposé au sous-titre (même niveau vertical) */
.constat-quotes {
  position: absolute;
  top: 146px;
  left: 6px;
  display: flex; flex-direction: column; gap: 18px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease 0.1s;
}
#scene-constat.detail-open .constat-quotes {
  opacity: 1; pointer-events: auto;
}
.constat-quote {
  font-size: clamp(16px, 1.6vw, 26px);
  font-weight: 700;
  line-height: 1.22;
  color: white;
  margin: 0;
}

/* Wrapper dark card pour detail-body (angles sans graphique) */
.detail-body-wrap { }
.detail-body-wrap.adh-card { margin-top: 6px; }

/* Conteneur droit : panneau + pills en colonne (garanti sans chevauchement) */
.constat-right {
  position: absolute;
  left: 30%; right: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column;
  pointer-events: none;
}

/* Pills — ancrées en bas du conteneur */
.angles-wrap {
  flex-shrink: 0;
  margin-top: auto;
  display: flex; flex-direction: row;
  pointer-events: auto;
}

.angle-pill {
  flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: 6px;
  padding: 14px 22px 20px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.12);
  cursor: pointer; text-align: left;
  color: rgba(255,255,255,0.82);
  font-family: var(--font);
  transition: background 0.22s ease-out, color 0.22s ease-out, transform 0.22s ease-out;
}
.angle-pill:first-child { border-left: none; }
.angle-pill:hover,
.angle-pill.active { background: rgba(182, 159, 214, 0.28); color: white; transform: translateY(-1px); }

.pill-num {
  font-size: 16.5px; font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 2px;
  transition: color 0.35s;
}
.angle-pill:hover .pill-num,
.angle-pill.active .pill-num { color: var(--prune); }
.pill-title {
  font-size: clamp(17px, 2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.1;
}
/* ── Pills fondateurs ── */
.fondateurs-wrap {
  position: absolute;
  bottom: 0;
  left: 30%; right: 0;
  display: flex; flex-direction: row;
  pointer-events: auto;
}
.fondateur-pill-wrap {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}
.fondateur-pill-wrap .fond-popup {
  position: absolute;
  bottom: 100%;
  left: 0; right: 0;
  max-width: none;
  border-left: none;
  border-top: 2px solid rgba(224,85,48,0.7);
  border-radius: 0;
  z-index: 2;
}
.fondateur-pill {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: 6px;
  min-height: 18vh;
  padding: 14px 22px 20px;
  width: 100%;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: background 0.22s ease-out, color 0.22s ease-out, transform 0.22s ease-out;
}
.fondateur-pill-wrap:first-child .fondateur-pill { border-left: none; }
.fondateur-pill:hover,
.fondateur-pill-wrap:has(.fond-popup.visible) .fondateur-pill {
  background: rgba(182, 159, 214, 0.28);
  color: white;
  transform: translateY(-1px);
}
.fondateur-pill .pill-arrow {
  font-size: 18px;
  color: transparent;
  transition: color 0.35s;
  margin-top: 4px;
}
.fondateur-pill:hover .pill-arrow,
.fondateur-pill-wrap:has(.fond-popup.visible) .fondateur-pill .pill-arrow {
  color: rgba(255,255,255,0.45);
}

/* Detail panel — outer : visibilité seulement, pas de transform */
.constat-detail {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: calc(54vw + 105px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.42s ease-out;
}
/* ── Règle générique : panel visible sur TOUTES les scènes triptyque ── */
.scene.detail-open .constat-detail {
  opacity: 1;
  pointer-events: auto;
}
.scene.detail-open .constat-detail-content {
  transform: translateX(0);
}
/* Contenu : slide indépendant du backdrop-filter */
.constat-detail-content {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 72px;
  transform: translateX(20px);
  will-change: transform;
  transition: transform 0.42s cubic-bezier(0.76,0,0.24,1);
}
/* Scene-constat : panneau dans le flex (remplace position:absolute) */
#scene-constat .constat-detail {
  position: relative;
  flex: 1;
  min-height: 0;
  right: auto; top: auto; bottom: auto;
  width: 100%;
  overflow: hidden;
}
#scene-constat .constat-detail-content {
  justify-content: flex-end;
  padding-bottom: 26px;
}
/* Harmonisé : panneau diagonal comme edena/robustesse/terrain */
#scene-constat.detail-open .constat-detail {
  opacity: 1; pointer-events: auto;
}
#scene-constat.detail-open .constat-detail-content {
  transform: translateX(0);
}
#constat-detail .detail-num  { color: var(--prune); }
#constat-detail .detail-rule { background: var(--prune); }

/* ── Triptyques génériques : même layout flex que scene-constat ──
   Panneau = élément flex au-dessus des pills (plus de chevauchement). */
#scene-edena .constat-detail,
#scene-robustesse .constat-detail,
#scene-6 .constat-detail {
  position: relative;
  flex: 1;
  min-height: 0;
  right: auto; top: auto; bottom: auto;
  width: 100%;
  overflow: hidden;
}
#scene-edena .constat-detail-content,
#scene-robustesse .constat-detail-content,
#scene-6 .constat-detail-content {
  justify-content: flex-end;
  padding-bottom: 26px;
}

/* Scene-6 « le terrain » : ticker remonté au-dessus des pills */
#scene-6 .manifeste-wrap {
  bottom: 190px;
  height: clamp(200px, 42vh, 420px);
}

.constat-detail::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      108deg,
      rgba(210, 190, 235, 0.12) 0%,
      rgba(182, 159, 214, 0)    45%
    ),
    linear-gradient(
      to bottom,
      rgba(182, 159, 214, 0)    0%,
      rgba(182, 159, 214, 0.04) 10%,
      rgba(182, 159, 214, 0.16) 22%,
      rgba(182, 159, 214, 0.36) 36%,
      rgba(182, 159, 214, 0.60) 50%,
      rgba(182, 159, 214, 0.80) 63%,
      rgba(182, 159, 214, 0.92) 78%,
      rgba(182, 159, 214, 0.97) 100%
    );
  backdrop-filter: blur(4px);
  /* Masque diagonal 108° : coin supérieur-gauche transparent → extension en diagonale */
  -webkit-mask-image: linear-gradient(
    108deg,
    transparent        0%,
    rgba(0,0,0,0.04)  11%,
    rgba(0,0,0,0.15)  22%,
    rgba(0,0,0,0.34)  34%,
    rgba(0,0,0,0.57)  46%,
    rgba(0,0,0,0.76)  58%,
    rgba(0,0,0,0.91)  70%,
    black             82%
  );
  mask-image: linear-gradient(
    108deg,
    transparent        0%,
    rgba(0,0,0,0.04)  11%,
    rgba(0,0,0,0.15)  22%,
    rgba(0,0,0,0.34)  34%,
    rgba(0,0,0,0.57)  46%,
    rgba(0,0,0,0.76)  58%,
    rgba(0,0,0,0.91)  70%,
    black             82%
  );
}

.detail-back {
  position: absolute;
  z-index: 3;
  top: 171px !important; bottom: auto !important;  /* sous #xp-toggle (117+44+10) */
  right: 4px !important; left: auto !important;    /* aligné avec la colonne parallaxe/son/immersion */
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: white;
  cursor: pointer; padding: 0;
  opacity: 0.45; transition: opacity 0.2s, background 0.2s;
}
.detail-back:hover { opacity: 1; background: rgba(255,255,255,0.16); }

.detail-inner {
  position: relative;
  z-index: 1;
  padding: 0 calc(52px + 6vw) 0 calc(120px + 13.5vw);
}
#constat-detail .detail-inner {
  padding-bottom: 56px;
  padding-left: calc(47px + 9vw);
  padding-right: calc(32px + 6vw);
}
.detail-num {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--prune);
  margin-bottom: 16px;
}
.detail-title {
  font-size: clamp(26px, 3.2vw, 50px);
  font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.05;
  color: white; margin: 0 0 20px 0;
  text-shadow: 0 1px 12px rgba(80, 40, 100, 0.35);
}
.detail-rule {
  width: 32px; height: 2px;
  background: var(--prune);
  margin-bottom: 20px;
}
.detail-body {
  font-size: clamp(13px, 1.4vw, 19px);
  font-weight: 400; line-height: 1.72;
  color: rgba(255, 255, 255, 0.92); margin: 0;
  text-shadow: 0 1px 8px rgba(80, 40, 100, 0.25);
}
.detail-extra {
  margin-top: 22px;
}
.detail-chart {
  border-radius: 6px;
  overflow: hidden;
  background: rgba(10,3,7,0.15);
  border: 1px solid rgba(255,255,255,0.14);
  width: 572px;
  height: 188px;
  flex: none;
}
.detail-chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.detail-nav {
  display: flex; gap: 10px;
  margin-top: 28px;
}
.detail-nav-btn {
  background: none; border: none;
  color: rgba(255,255,255,0.45);
  font-size: 24px; font-weight: 300;
  cursor: pointer; padding: 0 8px 0 0;
  transition: color 0.2s;
}
.detail-nav-btn:hover { color: white; }
.detail-nav-btn:disabled { opacity: 0.18; cursor: default; pointer-events: none; }

/* ════════════════════════════════════════════════
   SCENE 3 — CONSTAT : dezoom layers −15%
════════════════════════════════════════════════ */
#scene-constat .layer     { inset: -18%; }
#scene-constat .layer-img {
  position: absolute;
  width: 85%;
  height: 85%;
  top: 7.5%;
  left: 7.5%;
}
#scene-constat .layer-bg img {
  width: 80%;
  height: 80%;
  object-fit: cover;
  position: absolute;
  top: 10%;
  left: 10%;
}

/* ════════════════════════════════════════════════
   SCENE 10 — PAYSAGE
════════════════════════════════════════════════ */
#scene-10 .layer-img,
#scene-10 .layer-bg img {
  transform: scale(0.9);
}

/* ════════════════════════════════════════════════
   SCENE 4 — FONDATEURS
════════════════════════════════════════════════ */
#scene-fondateurs .layer     { inset: 0; }
#scene-fondateurs .layer-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
/* fg et mid agrandis de 5% (pas le bg) */
#scene-fondateurs .layer:not(.layer-bg) .layer-img {
  transform: scale(1.05);
  transform-origin: center bottom;
}

.fond-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 3;
  overflow: visible;
}

/* ── Hotspots groupes — même style que fond-note-btn, en flux ── */
.fond-group-btn { pointer-events: auto; }

/* Hotspots visibles par défaut quand la scène est active */
#scene-fondateurs.active .fond-hotspot,
#scene-10.active .fond-hotspot {
  opacity: 0.7;
  transform: translate(-50%, -50%) scale(1);
}

.fond-hotspot {
  position: absolute;
  /* Zone tactile 44×44 — visuel centré à 28×28 */
  width: 44px; height: 44px;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  border-radius: 50%;
  background: none; border: none;
  cursor: pointer; z-index: 6;
  pointer-events: auto;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fond-hotspot.triggered {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.fond-hotspot::before {
  content: '';
  /* Point blanc 14×14 au centre de 44px → inset: 15px */
  position: absolute; inset: 15px;
  border-radius: 50%;
  background: white;
}
.fond-hotspot::after {
  content: '';
  /* Anneau pulsant 28×28 au centre de 44px → inset: 8px */
  position: absolute; inset: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  animation: hotspot-pulse 2.2s ease-in-out infinite;
}
@keyframes hotspot-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%       { transform: scale(1.7); opacity: 0; }
}

.fond-note-wrap {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px; margin-top: 3vh;
  pointer-events: auto;
}
.fond-note-btn {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer;
  padding: 6px 0; /* zone tactile min 44px hauteur */
  color: white;
  font-family: var(--font);
  font-size: clamp(14px, 1.3vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: opacity 0.25s;
}
.fond-note-btn:hover { opacity: 0.75; }
.fond-note-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e05530; flex-shrink: 0;
  position: relative;
}
.fond-note-dot::after {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(224,85,48,0.5);
  animation: hotspot-pulse 2.2s ease-in-out infinite;
}

.fond-popup {
  display: flex; flex-direction: column; gap: 7px;
  max-width: 20vw;
  padding: 10px 14px;           /* padding fixe — pas animé */
  border-left: 2px solid rgba(224,85,48,0.7);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: white;
  font-family: var(--font);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  /* max-height: instant à l'ouverture, retardé de 0.28s à la fermeture (après le fade-out) */
  transition:
    max-height 0s linear 0.28s,
    opacity    0.24s ease-out,
    transform  0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.fond-popup.visible {
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    max-height 0s linear 0s,   /* ouverture instantanée */
    opacity    0.24s ease-out,
    transform  0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.fond-popup-line {
  font-size: clamp(10px, 0.85vw, 13px);
  line-height: 1.55;
  margin: 0;
  color: rgba(255,255,255,0.85);
}
.fond-popup-line:first-child { color: white; font-weight: 500; }

.fond-etiquette {
  position: absolute;
  width: 23vw;
  display: flex; flex-direction: row; align-items: stretch;
  background: linear-gradient(
    to right,
    rgba(182, 159, 214, 0)    0%,
    rgba(182, 159, 214, 0.04) 8%,
    rgba(182, 159, 214, 0.15) 17%,
    rgba(182, 159, 214, 0.34) 28%,
    rgba(182, 159, 214, 0.57) 40%,
    rgba(182, 159, 214, 0.76) 55%,
    rgba(182, 159, 214, 0.92) 70%,
    rgba(182, 159, 214, 0.97) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0;
  overflow: hidden;
  pointer-events: auto;
  z-index: 6;
  opacity: 0;
  transform: translateX(16px);
  box-shadow: 0 12px 40px rgba(42,9,21,0.38), 0 2px 8px rgba(42,9,21,0.15);
  transition: opacity 0.32s ease-out, transform 0.35s cubic-bezier(0.34,1.2,0.64,1);
}
.fond-etiquette.visible {
  opacity: 1; transform: translateX(0);
}

.fond-portrait {
  width: 36%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
  height: auto;
}

.fond-etiquette::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 36%;
  background:
    linear-gradient(to bottom, rgba(42,9,21,0.28) 0%, transparent 35%, transparent 65%, rgba(42,9,21,0.32) 100%),
    linear-gradient(to right,  rgba(42,9,21,0.14) 0%, transparent 45%, rgba(182,159,214,0.92) 100%);
  pointer-events: none;
  z-index: 1;
}

.fond-etiquette-text {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 16px 18px 16px 15px;
  display: flex; flex-direction: column; gap: 0;
}
.fond-etiquette-name {
  font-size: clamp(16px, 1.6vw, 24px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  color: white; margin: 0 0 5px;
  text-shadow: 0 1px 8px rgba(42,9,21,0.3);
}
.fond-etiquette-role {
  font-size: clamp(9px, 0.75vw, 11px);
  font-weight: 700; letter-spacing: 0.03em;
  color: rgba(255,255,255,0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0 0 10px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.fond-role-label { color: #3c0324; font-weight: 800; }
.fond-etiquette-body {
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.62; color: rgba(255,255,255,0.9); margin: 0;
}

/* ── Couvertures de livres (ressources) ─────────── */
.ressource-etiquette { width: 360px; }
.ressource-cover {
  width: 30%;
  object-fit: cover;
  object-position: 50% 50%;
  aspect-ratio: 2/3;
  height: auto;
}
/* Visibilité en edit mode */
body.edit-mode #scene-10 .fond-etiquette,
body.edit-mode #scene-10 .fond-hotspot {
  opacity: 1 !important;
  transform: translate(-50%,-50%) scale(1) !important;
}
body.edit-mode #scene-10 .fond-etiquette { transform: translateX(0) !important; }

/* ════════════════════════════════════════════════
   SCENE 5 — TRAMES
════════════════════════════════════════════════ */
.trame-layers {
  position: absolute; inset: 0; z-index: 7;
  pointer-events: none;
  transform-origin: top right;
  transform: translateY(10px) scale(0.858);
}
.trame-map {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: right top;
  opacity: 0;
  transition: opacity 0.75s ease;
  -webkit-user-drag: none; user-select: none;
}
.trame-map.visible { opacity: 1; }

.trame-meta {
  position: absolute;
  bottom: 22vh; right: 3%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
.trame-nord {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.trame-nord-label {
  font-family: var(--font);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}
.trame-legende {
  font-family: var(--font);
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.trame-arrows {
  position: absolute;
  bottom: 18vh; left: calc(30% + 22px);
  display: flex; gap: 10px;
  pointer-events: auto;
}

.trame-wrap {
  position: absolute;
  bottom: 0; left: 30%; right: 0;
  display: flex; flex-direction: row;
  pointer-events: auto;
}
.trame-pill {
  flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: 8px;
  padding: 14px 22px 20px;
  background: transparent;
  border: none; border-left: 1px solid rgba(255,255,255,0.12);
  cursor: pointer; text-align: left;
  color: rgba(255,255,255,0.4);
  font-family: var(--font);
  transition: background 0.22s ease-out, color 0.22s ease-out, transform 0.22s ease-out;
}
.trame-pill:first-child { border-left: none; }
.trame-pill:hover { background: rgba(182,159,214,0.22); color: rgba(255,255,255,0.85); transform: translateY(-1px); }
.trame-pill.active { color: white; }

.trame-dot {
  width: 9px; height: 9px; border-radius: 50%;
  opacity: 0.4;
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  flex-shrink: 0;
}
.trame-pill.active .trame-dot { opacity: 1; transform: scale(1.35); }

.trame-name {
  font-size: clamp(15px, 1.8vw, 28px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
}

/* ── Stats band — données clés au-dessus des pills trames ── */
.trame-stats {
  position: absolute;
  bottom: 72px; left: 30%; right: 0;
  display: flex; flex-direction: row;
  border-top: 1px solid rgba(255,255,255,0.1);
  pointer-events: none;
  z-index: 7;
}
.trame-stats span {
  flex: 1;
  padding: 7px 22px 9px;
  font-family: var(--font);
  font-size: clamp(9px, 0.8vw, 11.5px);
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.04em;
  line-height: 1.35;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.trame-stats span:first-child { border-left: none; }
.trame-stats strong { color: rgba(255,255,255,0.82); font-weight: 700; }

/* ════════════════════════════════════════════════
   SCENES 6–8 — OVERRIDES
════════════════════════════════════════════════ */
#scene-trames             { clip-path: inset(0 -70% 0 0); }
#scene-trames .ov-bot    { z-index: 6; }
#scene-trames .ui        { z-index: 8; }
#scene-trames .layer-img {
  position: absolute;
  width: 72%;
  height: 72%;
  bottom: 0;
  left: -4%;
}
#scene-7 .layer-bg       { display: flex; align-items: flex-end; justify-content: center; }
#scene-7 .layer-bg img   { width: 88%; height: auto; object-fit: initial; }
#scene-contact { background: var(--bg); }
#scene-edena .layer-img   { width: 108%; height: 108%; object-fit: contain; object-position: bottom center; position: absolute; bottom: 3%; left: -4%; }
#scene-6 .layer-img       { width: 105%; height: 105%; object-fit: contain; object-position: bottom center; position: absolute; bottom: 10px; left: -2.5%; }
#scene-7 .layer-img       { position: absolute; inset: -1%; width: calc(100% + 2%); height: calc(100% + 2%); }
#scene-contact .layer     { inset: -7%; }
#scene-contact .layer-bg  { inset: 0; }
#scene-contact .layer-img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; position: absolute; bottom: 0; left: 0; }
body.legal-open #scene-contact .contact-mail { opacity: 0; pointer-events: none; }
body.legal-open #scene-contact .desc         { opacity: 0; pointer-events: none; }
body.legal-open #scene-contact .back-top     { opacity: 0; pointer-events: none; }

/* ── Mail contact ─────────────────────────────── */
.contact-mail {
  position: absolute;
  bottom: 48px; right: 52px;
  font-family: var(--font);
  font-size: clamp(28px, 4.2vw, 68px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: white;
  text-decoration: none;
  text-align: right;
  pointer-events: auto;
  opacity: 0; transition: opacity 1s ease 0.65s, color 0.25s;
}
body.ready .contact-mail { opacity: 1; }
.contact-mail:hover { color: #fe3600; }

/* ════════════════════════════════════════════════
   SCENE 8 — CONTACT / FOOTER
════════════════════════════════════════════════ */
.footer-link {
  color: white;
  text-decoration: none;
}
.accueil-email {
  display: inline-block;
  margin-top: 8px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.85);
  transition: color 0.2s;
  pointer-events: auto;
  cursor: pointer;
}
.accueil-email:hover { color: #fe3600 !important; }
.footer-copyright {
  position: absolute;
  bottom: 36px; right: 15px;
  font-family: var(--font);
  font-size: 11px;
  line-height: 1;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.06em;
  margin: 0;
  pointer-events: none;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

/* ── LEGAL NAV (plan du site) ───────────────────── */
.legal-nav {
  position: absolute;
  bottom: 36px;
  /* Bord droit aligné avec le bord droit de l'email (left:850+width:637=1487px) */
  right: calc(100% - 1487px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  pointer-events: auto;
}

.legal-nav-sep {
  color: rgba(255,255,255,0.15);
  font-family: var(--font);
  font-size: 11px;
  margin: 0 8px;
  pointer-events: none;
}
.legal-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  padding: 4px 0;
  letter-spacing: 0.04em;
  transition: color 0.2s;
  pointer-events: auto;
}
.legal-nav-btn:hover { color: rgba(255,255,255,0.78); }

/* ── LEGAL PANELS ───────────────────────────────── */
.legal-panel {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: calc(72vw + 105px);
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.42s ease-out, visibility 0s linear 0.42s;
}
/* Contenu : slide indépendant du backdrop-filter */
.legal-panel-content {
  position: absolute; inset: 0; z-index: 1;
  transform: translateX(20px);
  will-change: transform;
  transition: transform 0.42s cubic-bezier(0.76,0,0.24,1);
}
.legal-panel.open {
  opacity: 1;
  visibility: visible;
  z-index: 401;   /* toujours au-dessus des autres panels pendant la transition */
  transition: opacity 0.42s ease-out, visibility 0s linear 0s;
}
.legal-panel.open .legal-panel-content {
  transform: translateX(0);
}
.legal-panel::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    linear-gradient(135deg, rgba(210,190,235,0.32) 0%, rgba(182,159,214,0.08) 55%, rgba(182,159,214,0) 75%),
    linear-gradient(to bottom,
      rgba(182,159,214,0.28) 0%,
      rgba(182,159,214,0.40) 18%,
      rgba(182,159,214,0.58) 35%,
      rgba(182,159,214,0.74) 52%,
      rgba(182,159,214,0.88) 68%,
      rgba(182,159,214,0.95) 84%,
      rgba(182,159,214,0.97) 100%
    );
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, rgba(0,0,0,0.08) 5%, rgba(0,0,0,0.22) 12%,
    rgba(0,0,0,0.48) 22%, rgba(0,0,0,0.70) 33%,
    rgba(0,0,0,0.88) 46%, rgba(0,0,0,0.97) 58%, black 72%);
  mask-image: linear-gradient(to right,
    transparent 0%, rgba(0,0,0,0.08) 5%, rgba(0,0,0,0.22) 12%,
    rgba(0,0,0,0.48) 22%, rgba(0,0,0,0.70) 33%,
    rgba(0,0,0,0.88) 46%, rgba(0,0,0,0.97) 58%, black 72%);
}
.legal-bar { display: none; }

/* ── LEGAL TABS ──────────────────────────────────── */
/* Pas de fond propre : le ::before du panel assure le sombre */
.legal-tabs {
  position: absolute;
  left: calc(18% + 300px); right: 0;
  top: 0; height: 44px;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 0 8px 0 60px;  /* aligné sur padding-left du .legal-content */
  border-bottom: 1px solid rgba(255,255,255,0.05);
  pointer-events: auto;   /* hérite pointer-events:none du panel — doit être explicite */
}

.legal-tab {
  flex: 0 0 auto;
  height: 100%;
  padding: 0 14px;
  display: flex;
  align-items: center;
  font-family: var(--font);
  font-size: 7.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.28);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.legal-tab:hover { color: rgba(255,255,255,0.82); }
.legal-tab.active {
  color: white;
  border-bottom-color: rgba(255,255,255,0.45);
}

/* Croix — bouton fixe sous #xp-toggle (colonne droite, 4e élément) */
.legal-tabs-close {
  display: none;
  position: fixed;
  top: 171px; right: 4px;
  width: 44px; height: 44px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  z-index: 500;
  transition: color 0.2s, background 0.2s;
}
body.legal-open .legal-tabs-close { display: flex; }
.legal-tabs-close:hover {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.14);
}

/* ── BARRE DE PROGRESSION LECTURE ───────────────── */
.legal-progress-bar {
  position: absolute;
  left: calc(18% + 300px); right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255,255,255,0.08);
  z-index: 20;
  pointer-events: none;
}
.legal-progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: rgba(255,255,255,0.4);
  border-radius: 0 2px 2px 0;
  transition: width 0.08s linear;
}

/* ── LEGAL CONTENT ──────────────────────────────── */
.legal-content {
  position: absolute;
  left: calc(18% + 300px); right: 0;
  top: 44px; bottom: 0;     /* laisse la place aux onglets */
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  pointer-events: auto;
  padding: 48px calc(52px + 6vw) 120px 60px;
  font-family: var(--font);
}
.legal-content::-webkit-scrollbar { display: none; }
.legal-h1 {
  font-size: clamp(26px, 3.2vw, 50px);
  font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.05;
  color: white; margin: 0 0 20px;
  text-shadow: 0 1px 12px rgba(80,40,100,0.35);
}
.legal-subtitle {
  font-size: clamp(13px, 1.1vw, 15px);
  font-style: italic;
  color: rgba(255,255,255,0.55);
  margin: 0 0 44px;
  line-height: 1.65;
  text-shadow: 0 1px 8px rgba(80,40,100,0.25);
}
.legal-org {
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  margin: 0 0 40px;
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(80,40,100,0.25);
}
.legal-section {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.legal-section:last-of-type { border-bottom: none; }
.legal-h2 {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--prune);
  margin: 0 0 16px;
}
.legal-h3 {
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  margin: 22px 0 6px;
}
.legal-content p {
  font-size: clamp(13px, 1.3vw, 17px);
  line-height: 1.75;
  margin: 0 0 10px;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 8px rgba(80,40,100,0.2);
}
.legal-meta {
  font-size: 12px !important;
  color: rgba(255,255,255,0.4) !important;
  margin-top: 18px !important;
}

.legal-list {
  list-style: none; padding: 0; margin: 0 0 10px;
}
.legal-list li {
  font-size: clamp(13px, 1.3vw, 17px);
  line-height: 1.75;
  color: rgba(255,255,255,0.88);
  padding-left: 20px;
  position: relative; margin-bottom: 6px;
  text-shadow: 0 1px 8px rgba(80,40,100,0.2);
}
.legal-list li::before {
  content: '—'; position: absolute; left: 0;
  color: rgba(255,255,255,0.3);
}
.legal-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: clamp(12px, 1vw, 14px);
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
}
.legal-table th {
  text-align: left; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding: 8px 16px 8px 0;
}
.legal-table td {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: top; line-height: 1.6;
}
.legal-table tr:last-child td { border-bottom: none; }
.legal-footer {
  margin-top: 52px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.legal-footer p {
  font-size: 11px !important;
  color: rgba(255,255,255,0.25) !important;
  line-height: 1.8 !important; margin: 0 !important;
  text-shadow: none !important;
}

.back-top {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
  background: none; border: none; padding: 0;
  cursor: pointer;
  color: rgba(182, 159, 214, 0.6);
  transition: color 0.25s;
  pointer-events: auto;
  animation: hint-breathe-up 3s ease-in-out infinite;
}
.back-top:hover { color: rgba(182, 159, 214, 1); }


/* ── BACKDROP-FILTER FALLBACKS (Safari < 9, old Firefox) ── */
@supports not (backdrop-filter: blur(1px)) {
  .fond-popup        { background: rgba(18, 6, 26, 0.90); }
  .fond-etiquette    { background: rgba(85, 52, 110, 0.96); }
  .constat-detail::before { background: rgba(78, 48, 108, 0.92); -webkit-mask-image: none; mask-image: none; }
  .legal-panel::before    { background: rgba(78, 48, 108, 0.95); -webkit-mask-image: none; mask-image: none; }
}

/* ── SCROLL-HINT LABEL + BACK-TOP LABEL ── */
.scroll-hint-label,
.back-top-label {
  display: block;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: currentColor;
  margin-top: 10px;
}

@keyframes hint-breathe-up {
  0%, 100% { transform: translateX(-50%) translateY(0);    }
  55%       { transform: translateX(-50%) translateY(-7px); }
}

/* ── SCENE COUNTER ── */
.scene-counter {
  position: fixed;
  bottom: 28px;
  right: 32px;
  z-index: 20;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.38);
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
  user-select: none;
}
.scene-counter.visible { opacity: 1; }

/* ── G — MOBILE: réduction backdrop-filter ── */
@media (max-width: 768px), (max-width: 932px) and (orientation: landscape) {
  .fond-popup                      { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .fond-etiquette                  { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .constat-detail::before          { backdrop-filter: blur(4px); }
  .legal-panel::before             { backdrop-filter: blur(4px); }
}

/* ── I — ANIMATIONS: pause sur scènes inactives ── */
.scene:not(.active) .scroll-hint,
.scene:not(.active) .fond-hotspot::after,
.scene:not(.active) .fond-note-dot::after,
.scene:not(.active) .manifeste-inner {
  animation-play-state: paused;
}

/* ════════════════════════════════════════════════
   SCENE 7 — RÉSEAU EDENA / ADHÉSION
════════════════════════════════════════════════ */
.adh-tagline {
  font-size: clamp(12px, 1.15vw, 16px);
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
  margin: 6px 0 0 0;
  line-height: 1.45;
}

/* ── Conteneur droit + pills réseau edena ── */
.adh-right {
  position: absolute;
  left: 30%; right: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column;
  pointer-events: none;
}
.adh-hotspot-list {
  flex-shrink: 0;
  display: flex; flex-direction: row;
  pointer-events: auto;
}
/* Panneau ouvert : sous-titre et tagline masqués */
#scene-7.detail-open .constat-sub  { opacity: 0; }
#scene-7.detail-open .adh-tagline  { opacity: 0; transition: opacity 0.35s; }

/* Les pills utilisent .angle-pill — style déjà défini globalement */

/* ── Detail panel — scene-7 ─────────────────────── */
#scene-7 .constat-detail {
  position: relative;
  flex: 1;
  min-height: 0;
  right: auto; top: auto; bottom: auto;
  width: 100%;
  overflow: hidden;
}
#scene-7 .constat-detail-content {
  justify-content: flex-start;
  padding-bottom: 0;
}
#scene-7.detail-open .constat-detail {
  opacity: 1; pointer-events: auto;
}
#scene-7.detail-open .constat-detail-content {
  transform: translateX(0);
}
/* ── Scroll panneau ── */
#adh-detail .detail-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: 10vh;
  padding-bottom: 56px;
  padding-left: calc(47px + 9vw);   /* remplace calc(120px + 13.5vw) hérité */
  padding-right: calc(32px + 6vw);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
#adh-detail .detail-inner::-webkit-scrollbar { width: 4px; }
#adh-detail .detail-inner::-webkit-scrollbar-track { background: transparent; }
#adh-detail .detail-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

/* ── Sous-panneaux ── */
.adh-panel[hidden] { display: none !important; }
.adh-panel[data-adh-panel="0"] .detail-body { font-size: clamp(11px, 1.15vw, 16px); }
.adh-body-gap { margin-top: 1em; }

/* ── Rouge → prune dans le panneau ── */
#adh-detail .detail-num  { color: var(--prune); }
#adh-detail .detail-rule { background: var(--prune); }
#scene-7 .adh-tier-cat        { color: var(--prune); }
#scene-7 .adh-tags li::before { color: var(--prune); }
#scene-7 .adh-step-num        { color: var(--prune); }

/* ── Carte foncée générique (adhésion + étapes) ── */
.adh-card {
  padding: 16px 14px 18px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  background: rgba(10,3,7,0.15);
  margin-top: 6px;
}

/* ── Tier cards ── */
.adh-tiers {
  display: flex; gap: 14px;
  margin-top: 6px;
}
.adh-tier {
  flex: 1;
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 14px 18px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  background: rgba(10,3,7,0.15);
}
.adh-tier-cat {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.17em; text-transform: uppercase;
}
.adh-tier-name {
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 700; letter-spacing: -0.02em;
  color: white; margin-top: 2px;
}
.adh-tier-price {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700; color: white;
  margin: 4px 0 10px; line-height: 1;
}
.adh-tier-price sup { font-size: 0.5em; vertical-align: super; }
.adh-tags {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 5px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 10px;
}
.adh-tags li {
  font-size: clamp(10px, 0.9vw, 13px);
  color: rgba(255,255,255,0.68);
  padding-left: 12px; position: relative; line-height: 1.35;
}
.adh-tags li::before {
  content: '—';
  position: absolute; left: 0;
  font-size: 0.8em; line-height: 1.6;
}

/* ── Fiscal argument ── */
.adh-fiscal {
  margin-top: 14px;
  padding: 11px 14px 12px;
  background: rgba(254,54,0,0.07);
  border: 1px solid rgba(254,54,0,0.22);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.adh-fiscal-label {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: rgba(254,54,0,0.85);
}
.adh-fiscal-body {
  font-size: clamp(11px, 0.95vw, 13px);
  color: rgba(255,255,255,0.68);
  line-height: 1.5;
}
.adh-fiscal-body strong { color: white; font-weight: 700; }

/* ── Steps ── */
.adh-steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 26px;
}
.adh-step { display: flex; align-items: flex-start; gap: 20px; }
.adh-step-num {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em;
  flex-shrink: 0; padding-top: 3px; min-width: 22px;
}
.adh-step strong {
  display: block;
  font-size: clamp(14px, 1.35vw, 19px);
  font-weight: 700; letter-spacing: -0.01em;
  color: white; margin-bottom: 5px;
}
.adh-step p {
  font-size: clamp(12px, 1.05vw, 15px);
  color: rgba(255,255,255,0.68);
  line-height: 1.58; margin: 0;
}

/* ── Tagline sous les hotspots ───────────────── */
.adh-sous-titre {
  position: absolute;
  left: 228px;
  bottom: 6vh;   /* ancrée en bas de la scène */
  margin: 0;
  font-size: clamp(34px, 4.4vw, 66px);  /* même taille que .constat-title */
  font-weight: 700;
  font-style: italic;
  color: rgba(255, 255, 255, 0.70);
  line-height: 0.95;
  letter-spacing: -0.03em;
  pointer-events: none;
  transition: opacity 0.4s;
}
#scene-7.detail-open .adh-sous-titre { opacity: 0; }

/* ── CTA — positionnés à droite dans .adh-right ── */
.s7-cta {
  position: absolute;
  right: 4vw;
  top: 18vh;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 10px;
  pointer-events: auto;
  transition: opacity 0.35s;
  width: min(26vw, 320px);
  z-index: 2;
}
/* Masquer quand panneau ouvert (hover ou clic pill) */
#scene-7.detail-open .s7-cta { opacity: 0; pointer-events: none; }

/* ── Overlay plein écran — scene-constat & scene-7 ── */
/* Pas de backdrop-filter : l'overlay est statique mais les layers parallaxe
   bougent en dessous → recalcul blur chaque frame du RAF = très coûteux.
   Le gradient seul (densifié) donne le même rendu visuel. */
#scene-constat::before,
#scene-7::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(
      108deg,
      rgba(210, 190, 235, 0.14) 0%,
      rgba(182, 159, 214, 0)    45%
    ),
    linear-gradient(
      to bottom,
      rgba(182, 159, 214, 0)    0%,
      rgba(182, 159, 214, 0.08) 10%,
      rgba(182, 159, 214, 0.22) 22%,
      rgba(182, 159, 214, 0.44) 36%,
      rgba(182, 159, 214, 0.66) 50%,
      rgba(182, 159, 214, 0.84) 63%,
      rgba(182, 159, 214, 0.94) 78%,
      rgba(182, 159, 214, 0.98) 100%
    );
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.48s ease, visibility 0s linear 0.48s;
}
/* #scene-constat : overlay plein écran retiré (harmonisé) */
/* #scene-7 (réseau) : overlay plein écran retiré (harmonisé en panneau diagonal) */

.s7-cta-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 10px; padding: 24px 28px;
  text-align: right;
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.42s ease, border-color 0.42s ease, backdrop-filter 0.42s ease;
  cursor: pointer;
}

/* Trait coloré bas — balaye de gauche à droite au survol */
.s7-cta-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.s7-cta-don::after  { background: rgba(254, 54, 0, 1); }
.s7-cta-join::after { background: rgba(212, 168, 206, 1); }
.s7-cta-card:hover::after { transform: scaleX(1); }

/* Don — rouge-orange au repos → verre sombre au survol */
.s7-cta-don {
  background: rgba(254, 54, 0, 0.52);
  border: 1px solid rgba(254, 54, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
}
.s7-cta-don:hover {
  background: linear-gradient(155deg, rgba(254,54,0,0.10) 0%, rgba(195,198,208,0.45) 72%);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-color: rgba(254, 54, 0, 0.24);
}
.s7-cta-don:hover .s7-cta-q { color: var(--orange); }

/* Join — rose edena au repos → verre sombre au survol */
.s7-cta-join {
  background: rgba(212, 168, 206, 0.48);
  border: 1px solid rgba(212, 168, 206, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: default;
}
.s7-cta-join:hover {
  background: linear-gradient(155deg, rgba(212,168,206,0.10) 0%, rgba(195,198,208,0.45) 72%);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-color: rgba(212, 168, 206, 0.24);
}
.s7-cta-join:hover .s7-cta-q { color: var(--rose); }

/* Texte principal — monte légèrement au survol */
.s7-cta-q {
  font-size: clamp(17px, 2vw, 26px);
  font-weight: 700;
  color: white;
  line-height: 1.15;
  letter-spacing: -0.02em;
  transition: color 0.38s ease, transform 0.38s ease;
}
.s7-cta-don:hover .s7-cta-q,
.s7-cta-join:hover .s7-cta-q  { transform: translateY(-4px); }

/* Ligne d'action */
.s7-cta-action {
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.01em;
  text-decoration: none;
}
a.s7-cta-action:hover { color: rgba(255,255,255,0.95); }

/* Flèche — glisse vers la droite au survol */
.s7-cta-arrow {
  display: inline-block;
  transition: transform 0.22s ease;
}
.s7-cta-don:hover .s7-cta-arrow,
.s7-cta-join:hover .s7-cta-arrow { transform: translateX(5px); }

.s7-cta-sub {
  font-size: clamp(12px, 1.05vw, 15px);
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
}
.s7-cta-bulletin {
  display: block;
  font-size: clamp(10px, 0.85vw, 12px);
  color: rgba(255,255,255,0.35);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255,255,255,0.18);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.s7-cta-bulletin:hover { color: rgba(255,255,255,0.72); text-decoration-color: rgba(255,255,255,0.45); }

/* Animation d'entrée — slide depuis la droite avec stagger */
@keyframes cta-slide-in {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}
#scene-7.active .s7-cta-don  { animation: cta-slide-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both; }
#scene-7.active .s7-cta-join { animation: cta-slide-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both; }

/* ── SKIP LINK (H) ── */
.skip-link {
  position: fixed;
  top: -100%;
  left: 8px;
  z-index: 99999;
  background: #fe3600;
  color: white;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 4px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }

/* ── FOCUS VISIBLE (I) — overrides boutons circulaires ── */
#sound-toggle:focus-visible,
#parallax-toggle:focus-visible,
.fond-hotspot:focus-visible {
  outline-offset: 5px;
  border-radius: 50%;
}

/* ── REDUCED MOTION ── */
/* ══════════════════════════════════════════════
   ① TOOLTIPS — boutons son + parallaxe
══════════════════════════════════════════════ */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  left: auto;
  transform: translateY(-50%) translateX(6px);
  background: rgba(182, 159, 214, 0.22);
  border: 1px solid rgba(182, 159, 214, 0.45);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transition-delay: 0s;
  z-index: 1002;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0.5s;
}
/* Masquer le tooltip CSS quand le tooltip parallaxe officiel est visible */
body:has(#ptog-tooltip.show) #parallax-toggle::after { opacity: 0 !important; }

/* ══════════════════════════════════════════════
   ③ NAV HINT — première visite
══════════════════════════════════════════════ */
.nav-hint {
  position: fixed;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(14, 8, 22, 0.6);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.5);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.nav-hint.visible { opacity: 1; }
.nav-hint-arrows { font-size: 13px; color: rgba(255,255,255,0.7); }

/* ══════════════════════════════════════════════
   ④ ANIMATION COMPTEUR — flip vertical
══════════════════════════════════════════════ */
.scene-counter { overflow: hidden; }
@keyframes counter-out { to   { transform: translateY(-120%); opacity: 0; } }
@keyframes counter-in  { from { transform: translateY(120%);  opacity: 0; } }
.scene-counter.counting-out { animation: counter-out 90ms ease forwards; }
.scene-counter.counting-in  { animation: counter-in  90ms ease forwards; }

/* ══════════════════════════════════════════════
   ⑤ CASCADE HOTSPOTS — stagger sur l'apparition
══════════════════════════════════════════════ */
.fond-hotspot.triggered {
  transition-delay: calc(var(--hi, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
  /* Transitions de scènes : instantanées */
  .scene { transition: none !important; }

  /* Animations en boucle : stoppées */
  .manifeste-inner,
  .fond-hotspot::after,
  .fond-note-dot::after,
  #scene-accueil .edena-home,
  #scene-contact .edena-home,
  .scroll-hint,
  .back-top {
    animation: none !important;
  }

  /* Transitions d'éléments interactifs : raccourcies (UX conservée) */
  .constat-detail, .constat-detail-content,
  .legal-panel, .legal-panel-content,
  .angle-pill, .trame-pill,
  .fond-etiquette, .fond-popup,
  #ptog-tooltip {
    transition-duration: 0.15s !important;
  }
  /* Nouvelles animations ①③④⑤ + CTA */
  .scene-counter.counting-out,
  .scene-counter.counting-in         { animation: none !important; }
  .fond-hotspot.triggered            { transition-delay: 0ms !important; }
  .nav-hint                          { transition: none !important; }
  [data-tooltip]::after              { transition: none !important; }
  #scene-7.active .s7-cta-don,
  #scene-7.active .s7-cta-join       { animation: none !important; opacity: 1 !important; }
  .s7-cta-card::after                { transition: none !important; }
  .s7-cta-q                          { transition: color 0.15s !important; }
}

/* ════════════════════════════════════════════════
   SCENE INSPIRATIONS — CELLES ET CEUX QUI NOUS INSPIRENT
════════════════════════════════════════════════ */
#scene-inspirations {
  background: linear-gradient(160deg, #08100c 0%, #0e1a12 50%, #060d08 100%);
}
.inspi-grid {
  position: absolute;
  bottom: 10vh; left: 8%; right: 4%;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px;
  pointer-events: none;
}
.inspi-col {
  padding: 20px 22px 22px;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 14px;
}
.inspi-col-label {
  font-family: var(--font);
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #fe3600;
}
.inspi-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.inspi-item {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.inspi-item:last-child { border-bottom: none; padding-bottom: 0; }
.inspi-name {
  font-family: var(--font);
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 600; color: rgba(255,255,255,0.82);
  letter-spacing: -0.01em;
}
.inspi-role {
  font-family: var(--font);
  font-size: clamp(10px, 0.85vw, 12px);
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.03em; line-height: 1.4;
}

/* ════════════════════════════════════════════════
   SCENE ADEME — INSTITUTION EN PÉRIL (archivée)
════════════════════════════════════════════════ */
#scene-ademe {
  background: linear-gradient(160deg, #080116 0%, #10031e 45%, #060110 100%);
}
.ademe-blocks {
  position: absolute;
  bottom: 10vh; left: 5%; right: 5%;
  display: flex; flex-direction: row; gap: 2px;
  pointer-events: auto;
}
.ademe-block {
  flex: 1;
  padding: 26px 26px 30px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  display: flex; flex-direction: column; gap: 14px;
}
.ademe-block--stat {
  flex: 0 0 auto; width: clamp(140px, 16vw, 200px);
  justify-content: center; align-items: flex-start;
  background: rgba(254,54,0,0.07);
  border-color: rgba(254,54,0,0.28);
}
.ademe-stat {
  font-family: var(--font);
  font-size: clamp(52px, 6.5vw, 88px);
  font-weight: 700; letter-spacing: -0.04em;
  color: #fe3600; line-height: 1;
}
.ademe-stat-label {
  font-family: var(--font);
  font-size: clamp(10px, 0.9vw, 13px);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em; line-height: 1.4;
}
.ademe-text {
  font-family: var(--font);
  font-size: clamp(12px, 1.05vw, 15px);
  color: rgba(255,255,255,0.68);
  line-height: 1.6; margin: 0;
}
.ademe-text strong { color: white; font-weight: 700; }
.ademe-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: rgba(254,54,0,0.1);
  border: 1px solid rgba(254,54,0,0.38);
  border-radius: 4px;
  color: #fe3600;
  font-family: var(--font);
  font-size: clamp(10px, 0.9vw, 13px);
  font-weight: 600; letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  align-self: flex-start;
}
.ademe-cta:hover { background: rgba(254,54,0,0.2); border-color: rgba(254,54,0,0.65); }
.ademe-cta-arrow { transition: transform 0.2s; }
.ademe-cta:hover .ademe-cta-arrow { transform: translateX(4px); }
.ademe-signataires {
  font-family: var(--font);
  font-size: clamp(9px, 0.75vw, 11px);
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em; margin: 0;
}

/* ════════════════════════════════════════════════
   SCENE ROBUSTESSE — PARADIGME
════════════════════════════════════════════════ */
#scene-robustesse {
  background: linear-gradient(160deg, #0c0a18 0%, #161220 50%, #080610 100%);
}
.robustesse-split {
  position: absolute;
  bottom: 8vh; left: 5%; right: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2px;
  pointer-events: none;
}
.robustesse-col {
  padding: 24px 28px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.robustesse-col--perf {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  opacity: 0.72;
}
.robustesse-col--rob {
  background: rgba(106,171,110,0.05);
  border: 1px solid rgba(106,171,110,0.22);
}
.robustesse-col-label {
  font-family: var(--font);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.robustesse-col--rob .robustesse-col-label { color: rgba(106,171,110,0.85); }
.robustesse-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.robustesse-list li {
  font-family: var(--font);
  font-size: clamp(12px, 1.1vw, 16px);
  color: rgba(255,255,255,0.55);
  padding-left: 14px; position: relative; line-height: 1.3;
}
.robustesse-list li::before {
  content: '—'; position: absolute; left: 0;
  font-size: 0.8em; color: rgba(255,255,255,0.25);
}
.robustesse-col--rob .robustesse-list li { color: rgba(255,255,255,0.8); }
.robustesse-metaphore {
  font-family: var(--font);
  font-size: clamp(10px, 0.9vw, 13px);
  font-style: italic; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.35); margin-top: 4px;
}
.robustesse-col--rob .robustesse-metaphore { color: rgba(106,171,110,0.7); }
.robustesse-source {
  grid-column: 1 / -1;
  padding: 10px 4px 0;
  font-family: var(--font);
  font-size: clamp(9px, 0.75vw, 11px);
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.05em; margin: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ════════════════════════════════════════════════
   SCENE-10 — STATS CONTEXTUELLES
════════════════════════════════════════════════ */
.scene10-stats {
  position: absolute;
  bottom: 9vh; left: 5%; right: 5%;
  display: flex; flex-direction: row; gap: 2px;
  pointer-events: none;
}
.scene10-stat {
  flex: 1;
  padding: 18px 22px 20px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 5px;
  backdrop-filter: blur(6px);
}
.scene10-stat-val {
  font-family: var(--font);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700; letter-spacing: -0.03em;
  color: #fe3600; line-height: 1;
}
.scene10-stat-label {
  font-family: var(--font);
  font-size: clamp(10px, 0.85vw, 12px);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em; line-height: 1.35;
}

/* ════════════════════════════════════════════════
   ADEME — variantes supplémentaires
════════════════════════════════════════════════ */
.ademe-stat--sm {
  font-size: clamp(28px, 3vw, 42px);
  margin-top: 16px;
}
.ademe-text--quote {
  font-style: italic;
  color: rgba(255,255,255,0.38);
  border-left: 2px solid rgba(254,54,0,0.3);
  padding-left: 12px; margin-top: 4px;
}

/* ════════════════════════════════════════════════
   SCENE-7 — CTA DIRECT ADHÉSION
════════════════════════════════════════════════ */
.adh-cta-direct {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; padding: 11px 18px;
  background: rgba(254,54,0,0.12);
  border: 1px solid rgba(254,54,0,0.45);
  border-radius: 4px;
  color: #fe3600;
  font-family: var(--font);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 700; letter-spacing: 0.06em;
  text-decoration: none; text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s;
  align-self: flex-start;
}
.adh-cta-direct:hover { background: rgba(254,54,0,0.22); border-color: rgba(254,54,0,0.7); }
.adh-cta-arrow { transition: transform 0.2s; }
.adh-cta-direct:hover .adh-cta-arrow { transform: translateX(4px); }

/* ════════════════════════════════════════════════
   SCENE-CONTACT — ACTIONS + ADRESSE
════════════════════════════════════════════════ */
.contact-actions {
  position: absolute;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.contact-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: rgba(254,54,0,0.1);
  border: 1px solid rgba(254,54,0,0.38);
  border-radius: 4px;
  color: #fe3600;
  font-family: var(--font);
  font-size: clamp(10px, 0.9vw, 13px);
  font-weight: 600; letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.2s;
}
.contact-action-btn:hover { background: rgba(254,54,0,0.2); }
.contact-action-sep { color: rgba(255,255,255,0.2); }
.contact-adresse {
  font-family: var(--font);
  font-size: clamp(9px, 0.8vw, 11px);
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
}

/* ════════════════════════════════════════════════
   ACCUEIL — BULLETS v1.5
════════════════════════════════════════════════ */
.accueil-bullets {
  position: absolute;
  bottom: 11vh; left: 8%; right: 4%;
  display: flex; flex-direction: column; gap: 2px;
  pointer-events: none;
}
.accueil-context {
  display: flex; align-items: baseline; gap: 20px;
  padding: 10px 20px 11px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}
.accueil-context-tag {
  font-family: var(--font);
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #fe3600; white-space: nowrap; flex-shrink: 0;
}
.accueil-context-text {
  font-family: var(--font);
  font-size: clamp(10px, 0.9vw, 13px);
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.03em; line-height: 1.4; margin: 0;
}
.accueil-points {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px;
}
.accueil-point {
  padding: 18px 22px 22px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 8px;
}
.accueil-point-num {
  font-family: var(--font);
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(254,54,0,0.7);
}
.accueil-point-q {
  font-family: var(--font);
  font-size: clamp(13px, 1.2vw, 17px);
  font-weight: 600; color: rgba(255,255,255,0.88);
  letter-spacing: -0.01em; line-height: 1.2; margin: 0;
}
.accueil-point-body {
  font-family: var(--font);
  font-size: clamp(11px, 0.95vw, 13px);
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.02em; line-height: 1.55;
  margin: 0; font-style: italic;
}
#scene-accueil .scroll-hint {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  width: auto; height: auto;
}

/* (anciens styles .accueil-bullets loader supprimés — remplacés par .loader-panel) */

/* ════════════════════════════════════════════════
   SCENE 10 — RESSOURCES : OVERLAY + PANELS
════════════════════════════════════════════════ */

/* Overlay violet — même couleur que scene-constat / scene-7 */
#scene-10::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(
      108deg,
      rgba(210, 190, 235, 0.14) 0%,
      rgba(182, 159, 214, 0)    45%
    ),
    linear-gradient(
      to bottom,
      rgba(182, 159, 214, 0)    0%,
      rgba(182, 159, 214, 0.08) 10%,
      rgba(182, 159, 214, 0.22) 22%,
      rgba(182, 159, 214, 0.44) 36%,
      rgba(182, 159, 214, 0.66) 50%,
      rgba(182, 159, 214, 0.84) 63%,
      rgba(182, 159, 214, 0.94) 78%,
      rgba(182, 159, 214, 0.98) 100%
    );
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.48s ease, visibility 0s linear 0.48s;
}
#scene-10.r-open::before {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.48s ease, visibility 0s linear 0s;
}

/* Pills : disparaissent quand le panneau est ouvert */
#scene-10 .r-pills-default {
  transition: opacity 0.25s ease;
}
#scene-10.r-open .r-pills-default {
  opacity: 0;
  pointer-events: none;
}

/* ── En-tête de section (dark card, haut droite) ── */
.r-panel-hdr {
  position: absolute;
  top: 30px;
  left: clamp(420px, 41vw, 660px);
  right: 52px;
  background: rgba(28, 22, 38, 0.78);
  border-radius: 14px;
  padding: 16px 24px 20px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease 0.12s;
}

/* Bouton fermer */
.r-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.6;
  transition: opacity 0.2s, background 0.2s;
  pointer-events: auto;
}
.r-close:hover { opacity: 1; background: rgba(255,255,255,0.18); }
#scene-10.r-open .r-panel-hdr {
  opacity: 1;
  pointer-events: auto;
}
.r-panel-num {
  display: block;
  font-family: var(--font);
  font-size: 13px;
  color: var(--orange);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.r-panel-title {
  font-family: var(--font);
  font-size: clamp(26px, 3.2vw, 52px);
  font-weight: 700;
  color: white;
  margin: 0;
  line-height: 1.1;
}

/* ── Zones de contenu (communes) ── */
.r-content {
  position: absolute;
  top: 200px;
  left: 30px;
  right: 52px;
  bottom: 92px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease 0.12s;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
#scene-10[data-rtab="0"] .r-c0,
#scene-10[data-rtab="1"] .r-c1,
#scene-10[data-rtab="2"] .r-c2 {
  opacity: 1;
  pointer-events: auto;
}

/* ── Tab 01 : corpus fondateur ── */
.r-books {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 8px;
  flex: 0 0 auto;
  width: clamp(280px, 28vw, 440px);
}
.r-books img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  pointer-events: none;
  filter: sepia(0.65) hue-rotate(245deg) saturate(1.6) brightness(0.78);
}
.r-text-card {
  flex: 1;
  min-width: 0;
  background: rgba(28, 22, 38, 0.78);
  border-radius: 14px;
  padding: 18px 22px 20px;
  color: white;
  font-family: var(--font);
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.6;
  overflow-y: auto;
  max-height: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
  pointer-events: auto;
}
.r-text-card p { margin: 0 0 10px; }
.r-text-card p:last-child { margin-bottom: 0; }
.r-text-card strong { font-weight: 600; }

/* ── Tab 02 : concepts clés ── */
.r-c1 { display: flex; }
.r-concepts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
}
.r-concept-card {
  background: rgba(18, 12, 25, 0.86);
  border-radius: 12px;
  padding: 18px 16px 20px;
  color: white;
  font-family: var(--font);
  pointer-events: auto;
}
.r-concept-card h4 {
  font-size: clamp(14px, 1.45vw, 22px);
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.2;
}
.r-concept-card p {
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.55;
  margin: 0;
  color: rgba(255,255,255,0.78);
}

/* ── Tab 03 : imaginaires ── */
.r-c2 { display: flex; overflow: hidden; }
.r-imaginaires {
  display: flex;
  gap: 14px;
  height: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  align-items: stretch;
}
.r-imaginaires::-webkit-scrollbar { display: none; }

.r-img-item {
  flex: 0 0 auto;
  height: min(100%, 400px);
  aspect-ratio: 2 / 3;
  position: relative;
  cursor: pointer;
  scroll-snap-align: start;
  border-radius: 8px;
  overflow: hidden;
  pointer-events: auto;
}
.r-img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.r-img-item.r-img-open > img { opacity: 0.18; }

.r-img-tooltip {
  position: absolute;
  inset: 0;
  background: rgba(28, 22, 38, 0.92);
  border-radius: 8px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: white;
  font-family: var(--font);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.r-img-item.r-img-open .r-img-tooltip {
  opacity: 1;
  pointer-events: auto;
}
.r-img-tooltip h4 {
  font-size: clamp(13px, 1.3vw, 19px);
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.r-img-author {
  font-size: clamp(11px, 0.95vw, 14px);
  color: var(--orange);
  font-weight: 500;
}
.r-img-tooltip p {
  font-size: clamp(11px, 0.95vw, 14px);
  line-height: 1.55;
  margin: 0;
  color: rgba(255,255,255,0.82);
}

/* ── Navigation onglets bas de page ── */
.r-tabs-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  display: flex;
  z-index: 5;
  border-top: 1px solid rgba(255,255,255,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
#scene-10.r-open .r-tabs-nav {
  opacity: 1;
  pointer-events: auto;
}
.r-tabnav {
  flex: 1;
  background: none;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.82);
  font-family: var(--font);
  font-size: clamp(17px, 2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px 22px 20px;
  transition: background 0.22s ease-out, color 0.22s ease-out, transform 0.22s ease-out;
  pointer-events: auto;
  text-align: left;
}
.r-tabnav:first-child { border-left: none; }
.r-tabnav:hover,
.r-tabnav.r-tabnav-active { background: rgba(182,159,214,0.28); color: white; transform: translateY(-1px); }
.r-tabnav-num {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 2px;
  transition: color 0.35s;
}
.r-tabnav:hover .r-tabnav-num,
.r-tabnav.r-tabnav-active .r-tabnav-num { color: var(--prune); }

/* Onglet actif */
#scene-10[data-rtab="0"] .r-tabnav[data-rtab="0"],
#scene-10[data-rtab="1"] .r-tabnav[data-rtab="1"],
#scene-10[data-rtab="2"] .r-tabnav[data-rtab="2"] {
  background: rgba(182,159,214,0.28);
  color: white;
}
#scene-10[data-rtab="0"] .r-tabnav[data-rtab="0"] .r-tabnav-num,
#scene-10[data-rtab="1"] .r-tabnav[data-rtab="1"] .r-tabnav-num,
#scene-10[data-rtab="2"] .r-tabnav[data-rtab="2"] .r-tabnav-num {
  color: var(--prune);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .r-panel-hdr, .r-content, .r-tabs-nav,
  #scene-10::before {
    transition-duration: 0.1s !important;
  }
}


/* ════════════════════════════════════════════════
   RESSOURCES — adaptation au panneau diagonal
════════════════════════════════════════════════ */
/* Backdrop : masque diagonal (droite dense) au lieu du plein écran */
#scene-10::before {
  -webkit-mask-image: linear-gradient(108deg, transparent 0%, rgba(0,0,0,0.04) 12%, rgba(0,0,0,0.16) 24%, rgba(0,0,0,0.36) 36%, rgba(0,0,0,0.60) 48%, rgba(0,0,0,0.80) 62%, black 80%);
          mask-image: linear-gradient(108deg, transparent 0%, rgba(0,0,0,0.04) 12%, rgba(0,0,0,0.16) 24%, rgba(0,0,0,0.36) 36%, rgba(0,0,0,0.60) 48%, rgba(0,0,0,0.80) 62%, black 80%);
}
/* Pills toujours visibles : elles font office d'onglets */
#scene-10.r-open .r-pills-default { opacity: 1 !important; pointer-events: auto !important; }
#scene-10 .r-tabs-nav { display: none !important; }
/* En-tête de section : intégré au panneau (sans carte sombre) */
#scene-10 .r-panel-hdr {
  top: clamp(70px, 12vh, 120px);
  left: clamp(430px, 42vw, 680px);
  right: 56px;
  background: none; border-radius: 0; padding: 0;
}
#scene-10 .r-panel-num { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; color: var(--prune); }
#scene-10 .r-panel-title { text-shadow: 0 1px 12px rgba(80,40,100,0.45); }
#scene-10 .r-close { top: 0; right: 0; }
/* Contenu : colonne défilante dans la zone droite */
#scene-10 .r-content {
  top: clamp(190px, 30vh, 290px);
  left: clamp(430px, 42vw, 680px);
  right: 56px;
  bottom: 150px;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
/* Couvertures : bandeau horizontal compact */
#scene-10 .r-books {
  display: flex; flex-direction: row; width: 100%; gap: 8px;
  overflow-x: auto; overflow-y: hidden; flex: 0 0 auto; padding-bottom: 6px;
  scrollbar-width: thin;
}
#scene-10 .r-books img { width: clamp(52px, 6.5vw, 78px); height: auto; flex: 0 0 auto; }
/* Texte : sous le bandeau, sans carte sombre */
#scene-10 .r-text-card {
  background: none; border-radius: 0; padding: 0; max-height: none;
  overflow: visible; flex: 0 0 auto;
  font-size: clamp(13px, 1.15vw, 16px); line-height: 1.7;
  text-shadow: 0 1px 8px rgba(80,40,100,0.3);
}
/* Concepts : liste 1 colonne, fond léger */
#scene-10 .r-concepts { grid-template-columns: 1fr; gap: 10px; }
#scene-10 .r-concept-card { background: rgba(18,12,25,0.42); padding: 14px 16px; }
/* Imaginaires : bandeau, hauteur auto dans la colonne */
#scene-10 .r-c2 { overflow: visible; }
#scene-10 .r-imaginaires { height: auto; }

#scene-10 .r-panel-num { text-shadow: 0 1px 8px rgba(20,8,30,0.8); }
#scene-10 .r-img-item { width: clamp(150px, 18vw, 230px); flex: 0 0 auto; }

/* scene-6 « le terrain » : ticker défilant masqué quand un panneau est ouvert */
#scene-6.detail-open .manifeste-wrap { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

/* ── Corrections panneau (lisibilité + défilement) ── */
/* F — constat : plus de texte flottant à gauche quand un panneau est ouvert */
#scene-constat.detail-open .constat-quotes { opacity: 0 !important; pointer-events: none !important; }

/* G — réseau : panneau opaque (contenu long lisible sans overlay plein écran) */
#scene-7 .constat-detail::before {
  -webkit-mask-image: linear-gradient(108deg, transparent 0%, rgba(0,0,0,0.5) 6%, black 14%);
          mask-image: linear-gradient(108deg, transparent 0%, rgba(0,0,0,0.5) 6%, black 14%);
  background: linear-gradient(108deg, rgba(150,125,190,0.06) 0%, rgba(120,96,165,0.58) 18%, rgba(96,72,138,0.85) 52%, rgba(82,60,122,0.94) 100%);
}

/* D — imaginaires : bandeau horizontal défilant dans le panneau */
#scene-10 .r-c2 { display: block; overflow: visible; flex: 0 0 auto; }
#scene-10 .r-imaginaires { height: clamp(210px, 34vh, 320px); width: 100%; overflow-x: auto; overflow-y: hidden; }
#scene-10 .r-img-item { height: 100%; width: auto; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE MOBILE (<= 768px) — expérience immersive conservée
   Phase 1 : fondation + patterns partagés (header / pills / panneau)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px), (max-width: 932px) and (orientation: landscape) {
  /* Boutons fixes : plus petits, resserrés en haut-droite */
  #parallax-toggle, #sound-toggle, #xp-toggle { width: 40px !important; height: 40px !important; right: 8px !important; }
  #parallax-toggle { top: 8px !important; }
  #sound-toggle    { top: 54px !important; }
  #xp-toggle       { top: 100px !important; }
  .detail-back     { top: 146px !important; right: 8px !important; }
  .legal-tabs-close{ top: 146px !important; right: 8px !important; }

  /* Nav dots latérale : masquée (navigation par swipe) */
  .scene-nav { display: none !important; }

  /* edena vertical décoratif : réduit */
  .edena-mark-v { font-size: 11vw !important; }

  /* ── En-tête (titre + sous-titre) : pleine largeur, en haut ── */
  .constat-header { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; padding: 56px 20px 0 64px !important; }
  .constat-text   { position: static !important; width: auto !important; max-width: none !important; height: auto !important; }
  .constat-title  { width: auto !important; height: auto !important; font-size: clamp(30px, 8.6vw, 46px) !important; }
  .constat-sub    { width: auto !important; height: auto !important; font-size: clamp(15px, 4.3vw, 20px) !important; transform: none !important; margin-top: 8px !important; }

  /* ── Pills : pleine largeur en bas ── */
  .constat-right, .adh-right { left: 0 !important; right: 0 !important; }
  .angle-pill   { padding: 12px 10px 16px !important; }
  .pill-title   { font-size: clamp(12px, 3.4vw, 16px) !important; }
  .pill-num     { font-size: 12px !important; margin-bottom: 2px !important; }

  /* ── Panneau de contenu : plein écran au mobile ── */
  .constat-detail { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 6 !important; }
  .constat-detail::before { -webkit-mask-image: none !important; mask-image: none !important;
    background: linear-gradient(160deg, rgba(120,96,165,0.92), rgba(70,50,105,0.96)) !important; }
  .constat-detail-content { padding: 0 !important; justify-content: flex-start !important; }
  .detail-inner { padding: 78px 22px 110px calc(64px) !important; overflow-y: auto !important; max-height: 100vh !important; -webkit-overflow-scrolling: touch; }
  .detail-title { font-size: clamp(26px, 7.5vw, 40px) !important; }
  .detail-body  { font-size: clamp(14px, 4vw, 17px) !important; }
}

@media (max-width: 768px), (max-width: 932px) and (orientation: landscape) {
  /* « edena » vertical : bande fine à gauche */
  .edena-home { font-size: 13vw !important; left: -4px !important; }

  /* ── LOADER ── */
  #loader .loader-panel { left: 0 !important; top: auto !important; bottom: 150px !important; width: 100% !important; height: auto !important; padding: 0 20px 0 60px !important; align-items: flex-start !important; }
  #loader .loader-panel::before { display: none !important; }
  .loader-qa { gap: 16px !important; }
  .loader-qa-label { font-size: 16px !important; }
  .loader-qa-answer { font-size: clamp(15px, 4.6vw, 20px) !important; }
  #loader .l-enter { left: 60px !important; bottom: 92px !important; font-size: 26px !important; }
  #loader .l-hint { left: 60px !important; right: 20px !important; bottom: 26px !important; width: auto !important; }

  /* ── ACCUEIL ── */
  .tagline { left: 60px !important; right: 18px !important; top: 54px !important; width: auto !important; font-size: clamp(20px, 6vw, 30px) !important; line-height: 1.1 !important; }
  .desc { left: 60px !important; right: 18px !important; top: auto !important; bottom: 150px !important; text-align: left !important; width: auto !important; height: auto !important; font-size: 13px !important; }
  .quote { left: 60px !important; right: 18px !important; bottom: 92px !important; width: auto !important; height: auto !important; font-size: clamp(18px, 5.2vw, 26px) !important; }
  .scroll-hint { left: 50% !important; bottom: 20px !important; top: auto !important; width: auto !important; }

  /* ── CONTACT ── */
  .contact-mail { left: 60px !important; right: 18px !important; bottom: auto !important; top: 42% !important; width: auto !important; height: auto !important; font-size: clamp(22px, 7vw, 38px) !important; }
  .footer-copyright { left: 60px !important; right: 18px !important; }
  .legal-nav { left: 60px !important; right: 18px !important; flex-wrap: wrap !important; row-gap: 4px !important; }
}

@media (max-width: 768px), (max-width: 932px) and (orientation: landscape) {
  #loader .l-enter { bottom: 128px !important; }
  #loader .l-hint { bottom: 30px !important; gap: 8px !important; }
  #loader .l-hint-text { transform: none !important; width: auto !important; }
  #loader .l-hint-btn { transform: none !important; }
}

@media (max-width: 768px), (max-width: 932px) and (orientation: landscape) {
  /* Panneau plein écran : on masque l'en-tête de scène derrière */
  .scene.detail-open .constat-header { opacity: 0 !important; pointer-events: none !important; }
  /* Largeur sûre (évite débordement scrollbar) */
  .constat-detail { width: 100% !important; }
}

@media (max-width: 768px), (max-width: 932px) and (orientation: landscape) {
  /* Calques : remplir le portrait */
  .scene .layer-img, .scene .layer-bg img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; }
  .scene .layer, .scene .layer-bg { inset: 0 !important; }
  /* Titre dégagé de la colonne de boutons */
  .constat-header { padding-right: 56px !important; }
}

@media (max-width: 768px), (max-width: 932px) and (orientation: landscape) {
  /* ── RESSOURCES : contenu plein écran ── */
  #scene-10 .r-panel-hdr { top: 54px !important; left: 60px !important; right: 20px !important; }
  #scene-10 .r-content { top: 132px !important; left: 0 !important; right: 0 !important; bottom: 150px !important; padding: 0 20px 0 60px !important; }
  #scene-10::before { -webkit-mask-image: none !important; mask-image: none !important; background: linear-gradient(160deg, rgba(120,96,165,0.93), rgba(70,50,105,0.97)) !important; }
  #scene-10 .r-img-item { height: clamp(170px, 24vh, 230px) !important; }
  #scene-10 .r-concepts { grid-template-columns: 1fr !important; }

  /* ── RÉSEAU : tiers empilés, CTA pleine largeur ── */
  .adh-tiers { flex-direction: column !important; }
  .s7-cta { left: 60px !important; right: 20px !important; top: auto !important; bottom: 150px !important; width: auto !important; }
  .adh-sous-titre { left: 60px !important; right: 20px !important; bottom: 150px !important; font-size: clamp(26px, 8.5vw, 42px) !important; }

  /* ── TRAMES : stats + pills adaptés ── */
  .trame-stats { left: 60px !important; right: 16px !important; flex-wrap: wrap !important; gap: 4px 14px !important; font-size: 11.5px !important; }
  .trame-wrap { width: 100% !important; flex-wrap: wrap !important; }
}

@media (max-width: 768px), (max-width: 932px) and (orientation: landscape) {
  #scene-10.r-open .constat-header { opacity: 0 !important; pointer-events: none !important; }
  #scene-10 .r-panel-hdr .r-panel-title { font-size: clamp(24px, 7vw, 38px) !important; }
}

@media (max-width: 768px), (max-width: 932px) and (orientation: landscape) {
  /* ── FONDATEURS : pile de cartes ── */
  #scene-fondateurs .fond-lines,
  #scene-fondateurs .fond-hotspot,
  #scene-fondateurs .fondateurs-wrap { display: none !important; }
  #scene-fondateurs .ui {
    display: flex !important; flex-direction: column !important; gap: 9px !important;
    padding: 92px 14px 16px 56px !important; justify-content: flex-start !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  }
  #scene-fondateurs .constat-header { position: static !important; padding: 0 0 2px 0 !important; flex: 0 0 auto !important; }
  #scene-fondateurs .constat-title { font-size: clamp(28px, 8vw, 40px) !important; }
  #scene-fondateurs .constat-sub { font-size: 14px !important; }
  .fond-etiquette {
    position: static !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important;
    opacity: 1 !important; transform: none !important; pointer-events: auto !important;
    display: flex !important; flex-direction: row !important; gap: 11px !important;
    align-items: flex-start !important; flex: 0 0 auto !important; padding: 11px !important;
  }
  .fond-portrait { width: 58px !important; height: 58px !important; flex: 0 0 auto !important; object-fit: cover !important; }
  .fond-etiquette-name { font-size: 16px !important; }
  .fond-etiquette-role { font-size: 11px !important; }
  .fond-etiquette-body { font-size: 11.5px !important; line-height: 1.38 !important; }
  #etiquette-anthony  { order: 1 !important; }
  #etiquette-theo     { order: 2 !important; }
  #etiquette-neron    { order: 3 !important; }
  #etiquette-vaisseau { order: 4 !important; }
}

@media (max-width: 768px), (max-width: 932px) and (orientation: landscape) {
  /* Trames : déclutter le bas (boussole/légende/stats masqués), pills en grille */
  #scene-trames .trame-meta  { display: none !important; }
  #scene-trames .trame-stats { display: none !important; }
  #scene-trames .trame-wrap  { width: 100% !important; flex-wrap: wrap !important; }
  #scene-trames .trame-pill  { flex: 1 0 30% !important; justify-content: center !important; }
}

@media (max-width: 768px), (max-width: 932px) and (orientation: landscape) {
  /* iOS Safari : hauteur dynamique (barre d'adresse) */
  .constat-detail { height: 100dvh !important; }
  .detail-inner   { max-height: 100dvh !important; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — v2 : flux + correctifs (appareils réels)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px), (max-width: 932px) and (orientation: landscape) {
  /* Cross-cutting */
  #scene-counter { display: none !important; }
  #vp, body { overflow-x: hidden !important; }
  #scene-trames .trame-layers { display: none !important; }   /* carte Oise déborde */
  #scene-6 .manifeste-wrap { display: none !important; }       /* ticker recouvre tout */

  /* LOADER — flux vertical */
  #loader .ui {
    display: flex !important; flex-direction: column !important; justify-content: center !important;
    gap: 24px !important; padding: 86px 20px 30px 56px !important;
    height: 100dvh !important; box-sizing: border-box !important; overflow-y: auto !important;
  }
  #loader .loader-panel, #loader .l-enter, #loader .l-hint {
    position: static !important; left: auto !important; top: auto !important; right: auto !important;
    bottom: auto !important; width: auto !important; height: auto !important; transform: none !important; padding: 0 !important;
  }

  /* ACCUEIL — flux vertical */
  #scene-accueil .ui {
    display: flex !important; flex-direction: column !important; justify-content: center !important;
    gap: 18px !important; padding: 80px 20px 64px 56px !important;
    height: 100dvh !important; box-sizing: border-box !important; overflow-y: auto !important;
  }
  #scene-accueil .tagline, #scene-accueil .desc, #scene-accueil .quote {
    position: static !important; left: auto !important; right: auto !important; top: auto !important;
    bottom: auto !important; width: auto !important; height: auto !important; transform: none !important; max-width: none !important;
  }
  #scene-accueil .scroll-hint { position: absolute !important; left: 50% !important; bottom: 14px !important; top: auto !important; }

  /* CONTACT — flux vertical */
  #scene-contact .ui {
    display: flex !important; flex-direction: column !important; justify-content: center !important;
    gap: 14px !important; padding: 80px 20px 36px 56px !important;
    height: 100dvh !important; box-sizing: border-box !important; overflow-y: auto !important;
  }
  #scene-contact .tagline, #scene-contact .desc, #scene-contact .contact-mail,
  #scene-contact .footer-copyright, #scene-contact .legal-nav {
    position: static !important; left: auto !important; right: auto !important; top: auto !important;
    bottom: auto !important; width: auto !important; height: auto !important; transform: none !important; writing-mode: horizontal-tb !important;
  }
  #scene-contact .contact-mail { font-size: clamp(22px, 6.5vw, 34px) !important; }
  #scene-contact .back-top { display: none !important; }
  #scene-contact .legal-nav { flex-wrap: wrap !important; row-gap: 4px !important; }

  /* FONDATEURS — cartes qui wrappent, pas de débordement horizontal */
  #scene-fondateurs .fond-etiquette { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }
  #scene-fondateurs .fond-etiquette-text { min-width: 0 !important; flex: 1 1 auto !important; }
  #scene-fondateurs .fond-etiquette-name, #scene-fondateurs .fond-etiquette-role,
  #scene-fondateurs .fond-etiquette-body { white-space: normal !important; width: auto !important; max-width: 100% !important; word-break: break-word !important; }

  /* RÉSEAU (fermé) — CTA dimensionnés, sous-titre géant masqué */
  #scene-7 .adh-sous-titre { display: none !important; }
  #scene-7 .s7-cta { left: 56px !important; right: 16px !important; top: auto !important; bottom: 156px !important; width: auto !important; gap: 10px !important; }
  #scene-7 .s7-cta-card { padding: 13px 16px !important; }
  #scene-7 .s7-cta-q { font-size: 18px !important; }
  #scene-7 .s7-cta-sub, #scene-7 .s7-cta-action, #scene-7 .s7-cta-bulletin { font-size: 13.5px !important; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — v3 : correctifs ciblés
   - TRAMES : pills clippées (left:30% hérité) + popup écrasée (max-width:20vw)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px), (max-width: 932px) and (orientation: landscape) {
  /* Popups d'info : lisibles, jamais réduites à une colonne de 20vw */
  .fond-popup { max-width: none !important; }

  /* ── TRAMES — pills : barre pleine largeur en bas, les 6 visibles ── */
  #scene-trames .trame-wrap {
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    top: auto !important; bottom: 0 !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px)) 14px !important;
    background: linear-gradient(to top, rgba(12,4,8,0.66), rgba(12,4,8,0.18) 62%, transparent) !important;
  }
  #scene-trames .trame-pill {
    flex: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding: 9px 6px !important;
    min-height: 48px !important;
    opacity: 1 !important;
  }
  #scene-trames .trame-dot  { width: 11px !important; height: 11px !important; }
  #scene-trames .trame-name { font-size: 12.5px !important; text-align: center !important; }

  /* Popup « lire les trames » : panneau lisible ancré en bas */
  #scene-trames .fond-note-wrap { position: static !important; }
  #scene-trames #popup-trames {
    position: fixed !important;
    left: 16px !important; right: 16px !important;
    top: auto !important; bottom: 150px !important;
    width: auto !important; max-width: none !important;
    overflow-y: auto !important;
    z-index: 7 !important;
  }
  #scene-trames #popup-trames.visible { max-height: 48vh !important; }
  #scene-trames .fond-popup-line { font-size: 13px !important; line-height: 1.5 !important; }
}