/* ============================================================================
   vestibule-lk.css — LE VESTIBULE : le hall en profondeur, derrière le seuil.
   À charger APRÈS css/seuil-lk.css.

   CE QUE C'EST. Une fois le rideau ouvert, on tombait directement sur la vidéo
   de la tour. On entre désormais dans un couloir noir où les destinations du
   studio flottent en profondeur, l'une derrière l'autre. Le défilement n'y
   fait pas glisser une page : il AVANCE LA CAMÉRA. Les paliers déjà lus
   passent de part et d'autre du regard et restent derrière nous ; remonter les
   fait revenir.

   POURQUOI PAS DE THREE.JS. Il n'y a ici ni maillage, ni lumière, ni matière :
   une poignée de blocs de texte posés à des profondeurs différentes. La
   perspective CSS (`perspective` sur le conteneur, `translateZ` sur chaque
   bloc) fait exactement ce travail, sur le compositeur, sans charger un moteur
   3D sur la page d'accueil. La galerie et le carnet, eux, ont de vraies
   scènes : ils gardent Three.

   CE QUE LE SCRIPT ÉCRIT. js/vestibule-lk.js pose lui-même `transform`,
   `opacity` et `filter` de chaque palier à chaque image — d'où l'absence de
   transition sur `.vest-station` : la caméra doit être suivie au pixel près.
   Tout le reste (typographie, boutons, repère latéral) est ici.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Tant que le vestibule tient l'écran, les trois plans du parcours restent
   muets — même règle que pour le seuil, et pour la même raison : ils sont en
   position fixe et se peindraient par-dessus.
   --------------------------------------------------------------------------- */
body.vestibule-actif main .plan {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.vestibule-actif {
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   LE COULOIR
   ----------------------------------------------------------------------------
   Il est posé SOUS le seuil (z-index 38 contre 40) et n'est jamais masqué
   pendant l'ouverture du rideau : c'est lui qu'on aperçoit par la porte, noir
   et profond, avec les premières écritures encore loin. Le mur noir du seuil
   (l'ombre de 100vmax de son cadre) fait le cache.
   --------------------------------------------------------------------------- */
.plan-vestibule {
  --vest-noir: #04040a;
  --vest-rouge: #6a1826;         /* même rouge éteint que le rideau */

  position: fixed;
  inset: 0;
  z-index: 38;
  overflow: hidden;
  /* Une lueur froide, très faible, au point de fuite : sans elle le fond est
     un noir plat et la profondeur ne se lit plus du tout. */
  background:
    radial-gradient(circle at 50% 46%,
      #0c0c16 0%,
      #06060d 42%,
      #030307 78%,
      #010103 100%);
  opacity: 1;
  pointer-events: none;          /* aperçu : on regarde, on ne touche pas */
  transition: opacity .9s ease;
}

.plan-vestibule[hidden] { display: none; }

/* Le vestibule a la main : les paliers deviennent cliquables. */
.plan-vestibule.vest-actif { pointer-events: auto; }

/* LA PLONGÉE. On appuie sur un bouton d'étage : la caméra traverse le palier
   (le script la pousse au-delà) pendant que le noir se dissout sur la vidéo,
   déjà en place derrière. On entre dans l'étage, on ne coupe pas. */
.plan-vestibule.vest-plongee {
  opacity: 0;
  pointer-events: none;
  transition: opacity .82s ease-in;
}

/* --- L'espace : c'est lui qui porte la perspective ------------------------ */
/* `perspective` ouvre un contexte de rendu 3D : les paliers et les grains de
   poussière, tous enfants directs, sont alors triés par leur profondeur
   réelle. Un palier lointain passe donc bien DERRIÈRE la poussière proche. */
.vest-espace {
  position: absolute;
  inset: 0;
  perspective: 1100px;
  perspective-origin: 50% 46%;
}

/* ---------------------------------------------------------------------------
   UN PALIER
   --------------------------------------------------------------------------- */
.vest-station {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 78vw);
  /* Le script écrit la transformation complète, centrage compris : il n'y a
     donc rien à poser ici, et surtout aucune transition. */
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* Le grand chiffre du palier, au trait, derrière le texte. Il donne l'échelle
   de la profondeur : c'est lui qui grossit le plus vite quand on avance. */
.vest-chiffre {
  position: absolute;
  top: -.42em;
  left: -.16em;
  z-index: -1;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(6rem, 12vw, 10rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .075);
  user-select: none;
  pointer-events: none;
}

.vest-kicker {
  display: block;
  padding-bottom: .5rem;
  margin-bottom: .85rem;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}

.vest-station h2 {
  margin: 0 0 .7rem;
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -.02em;
  line-height: 1.08;
  color: #fff;
}

.vest-station p {
  margin: 0;
  font-family: var(--hero-sans, 'Inter', sans-serif);
  font-size: clamp(.84rem, 1vw, .95rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, .8);
}
.vest-station p strong { color: #fff; font-weight: 600; }

/* Second paragraphe d'un palier : la même voix, un ton plus bas. Aucun palier
   n'en a aujourd'hui — la règle sert au jour où l'un d'eux aura besoin de
   deux temps. */
.vest-station .vest-suite {
  margin-top: .85rem;
  color: rgba(255, 255, 255, .6);
}

/* --- Le bouton : la seule chose qui fasse quitter le vestibule ------------ */
.vest-bouton {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.35rem;
  padding: .6rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  text-decoration: none;
  font-family: var(--hero-sans, 'Inter', sans-serif);
  font-size: clamp(.79rem, .92vw, .89rem);
  font-weight: 500;
  cursor: pointer;
  transition:
    background .35s ease,
    color .35s ease,
    gap .35s ease,
    border-color .35s ease;
}

.vest-bouton:hover,
.vest-bouton:focus-visible {
  background: #fff;
  border-color: #fff;
  color: #0b0b10;
  gap: 1.05rem;
  outline: none;
}

.vest-bouton svg { width: .9rem; height: .9rem; flex: none; }

/* ---------------------------------------------------------------------------
   LA POUSSIÈRE — une trentaine de grains posés eux aussi en profondeur, que le
   script fait défiler en boucle. Sans eux, la caméra a beau avancer, l'œil ne
   voit qu'un texte qui grossit : rien ne dit qu'on se déplace.
   --------------------------------------------------------------------------- */
.vest-grain {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  /* Scintillement : la seule animation qui tourne à l'arrêt. Elle ne touche
     que la luminosité et reste sur le compositeur. */
  animation: vest-scintille 6s ease-in-out infinite alternate;
  animation-delay: calc(var(--r, 0) * -1s);
}

@keyframes vest-scintille {
  from { filter: brightness(.55); }
  to   { filter: brightness(1.25); }
}

/* ---------------------------------------------------------------------------
   LE REPÈRE LATÉRAL — où l'on en est dans le couloir, et le seul raccourci.
   Un palier franchi garde un trait clair : c'est la trace de ce qu'on laisse
   derrière soi.
   --------------------------------------------------------------------------- */
.vest-rail {
  position: absolute;
  top: 50%;
  right: clamp(.9rem, 3vw, 2.8rem);
  transform: translateY(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  opacity: 0;
  transition: opacity .6s ease .2s;
}

.plan-vestibule.vest-actif .vest-rail { opacity: 1; }

.vest-rail-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  padding: .2rem 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .42);
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s ease;
}

.vest-rail-item::after {
  content: "";
  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, .28);
  transition: width .35s cubic-bezier(.16, 1, .3, 1), background .35s ease;
}

.vest-rail-item span {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .3s ease, transform .3s ease;
}

.vest-rail-item:hover,
.vest-rail-item:focus-visible {
  color: rgba(255, 255, 255, .85);
  outline: none;
}
.vest-rail-item:hover span,
.vest-rail-item:focus-visible span,
.vest-rail-item[aria-current="true"] span {
  opacity: 1;
  transform: none;
}

/* Le palier courant : trait long, rouge de service — le seul accent de
   couleur du couloir, et le même rouge éteint que le rideau. */
.vest-rail-item[aria-current="true"] { color: #fff; }
.vest-rail-item[aria-current="true"]::after {
  width: 42px;
  background: var(--vest-rouge);
  box-shadow: 0 0 12px rgba(106, 24, 38, .9);
}
.vest-rail-item.vest-passe::after { background: rgba(255, 255, 255, .5); }

/* ---------------------------------------------------------------------------
   L'INVITE — seulement au premier palier. Après, le geste est compris.
   --------------------------------------------------------------------------- */
.vest-invite {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 4vh, 3rem);
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}

.plan-vestibule.vest-actif.vest-debut .vest-invite { opacity: 1; }

.vest-invite small {
  font-size: .56rem;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .34);
  text-transform: none;
}

.vest-fleche {
  position: relative;
  width: 16px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 10px;
}
.vest-fleche::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .8);
  animation: vest-descend 1.9s ease-in-out infinite;
}

@keyframes vest-descend {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(11px); opacity: 0; }
}

/* ---------------------------------------------------------------------------
   PALIER À DEUX COLONNES — le texte, et l'objet de l'étage en 3D.

   Le palier s'élargit pour loger l'aperçu : sans ça, la colonne de texte
   tombait à quarante caractères et le paragraphe devenait un escalier.
   --------------------------------------------------------------------------- */
.vest-station--3d {
  width: min(800px, 88vw);
  display: grid;
  grid-template-columns: 1fr 258px;
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
  align-items: center;
}

.vest-corps { min-width: 0; }

.vest-apercu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

.vest-apercu apercu-3d {
  display: block;
  width: 100%;
  height: 230px;
  cursor: default;
  /* Un halo très faible derrière l'objet : sur un fond noir absolu, un modèle
     sombre n'a aucun bord et paraît flotter dans du vide. */
  background: radial-gradient(ellipse at 50% 58%,
    rgba(120, 130, 160, .1) 0%,
    rgba(80, 90, 120, .04) 45%,
    transparent 72%);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

/* Rien ne bouge au survol, pas même d'un pixel : la salle est une maquette
   posée, pas un bouton. */
.vest-apercu apercu-3d[failed] { display: none; }

.vest-apercu-legende {
  font-family: 'DM Mono', monospace;
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  text-align: center;
  transition: color .3s ease;
}
.vest-apercu:hover .vest-apercu-legende { color: rgba(255, 255, 255, .75); }

/* ---------------------------------------------------------------------------
   LE RETOUR AU COULOIR — posé dans les salles, pas dans le vestibule.

   Une salle est une impasse : le défilement y change d'étage, et rien n'en
   ramenait au couloir sinon un geste vers le haut depuis le plan large, que
   personne ne devine. Ce bouton ramène droit au palier qui EST la porte de la
   salle où l'on se trouve ; js/vestibule-lk.js écrit son second libellé.

   Il vit ici et non dans css/tour-lk.css parce que c'est une commande du
   vestibule : c'est lui qui sait à quel palier chaque salle correspond.
   --------------------------------------------------------------------------- */
/* À DROITE, et pas à gauche : le cartouche de la salle FL occupe le coin haut
   gauche, et le bouton se posait par-dessus son titre. */
.retour-couloir {
  position: fixed;
  top: clamp(1rem, 3vh, 2.2rem);
  right: clamp(1rem, 3vw, 2.4rem);
  z-index: 45;                   /* au-dessus des plans (2), sous le panneau (60) */
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 1.1rem .55rem .95rem;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(6, 6, 12, .52);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  color: #fff;
  cursor: pointer;
  text-align: left;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    opacity .5s ease,
    transform .5s cubic-bezier(.16, 1, .3, 1),
    background .3s ease,
    border-color .3s ease;
}

.retour-couloir[hidden] { display: none; }

/* Posée par le script quand une salle est établie ET que le couloir est rangé.
   Pas pendant le mouvement de caméra : un bouton qui flotte au milieu d'une
   traversée donne l'impression que la page a sauté. */
.retour-couloir.retour-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.retour-couloir:hover,
.retour-couloir:focus-visible {
  background: rgba(255, 255, 255, .96);
  border-color: #fff;
  color: #0b0b10;
  outline: none;
}

.retour-couloir svg { width: .95rem; height: .95rem; flex: none; }

.retour-couloir-textes {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.retour-couloir-titre {
  font-family: var(--hero-sans, 'Inter', sans-serif);
  font-size: clamp(.76rem, .9vw, .86rem);
  font-weight: 500;
}

/* Le nom du palier : c'est lui qui dit par quelle porte on est entré. */
.retour-couloir-palier {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .68;
}

@media (max-width: 700px) {
  .retour-couloir { padding: .5rem .9rem; }
  .retour-couloir-palier { display: none; }
}

/* ---------------------------------------------------------------------------
   LA LETTRE DU STUDIO — en bas à gauche du couloir.

   Port vanilla de components/ui/newsletter-signup.tsx. La carte porte SES DEUX
   ÉTATS dans le HTML (formulaire et remerciement) : c'est une classe qui
   décide lequel se voit. Rien n'est reconstruit à l'envoi, donc rien ne peut
   se perdre en route.
   --------------------------------------------------------------------------- */
.lettre {
  position: absolute;
  left: clamp(.9rem, 3vw, 2.6rem);
  bottom: clamp(1rem, 4vh, 2.6rem);
  z-index: 12;
  width: min(330px, 84vw);
  padding: clamp(.9rem, 2vw, 1.15rem) clamp(1rem, 2.2vw, 1.3rem) clamp(.85rem, 1.8vw, 1.05rem);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
  background: rgba(8, 8, 14, .62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;                 /* les confettis restent dans la carte */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity .7s ease .25s,
    transform .7s cubic-bezier(.16, 1, .3, 1) .25s,
    border-color .35s ease;
}

/* Comme le repère : elle n'apparaît qu'une fois le couloir en main. */
.plan-vestibule.vest-actif .lettre {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.lettre:hover,
.lettre:focus-within { border-color: rgba(255, 255, 255, .3); }

.lettre-kicker {
  display: block;
  margin-bottom: .5rem;
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.lettre-intro {
  margin: 0 0 .8rem;
  font-family: var(--hero-sans, 'Inter', sans-serif);
  font-size: .76rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .68);
}

/* Le libellé du champ existe pour les lecteurs d'écran et pour qui remplit au
   clavier ; à l'œil, l'invite du champ suffit. On ne le cache donc pas, on le
   réduit. */
.lettre-label {
  display: block;
  margin-bottom: .35rem;
  font-family: 'DM Mono', monospace;
  font-size: .54rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}

.lettre-ligne {
  display: flex;
  gap: .45rem;
}

.lettre-email {
  flex: 1 1 auto;
  min-width: 0;
  padding: .5rem .65rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 3px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-family: var(--hero-sans, 'Inter', sans-serif);
  font-size: .8rem;
  transition: border-color .3s ease, background .3s ease;
}
.lettre-email::placeholder { color: rgba(255, 255, 255, .3); }
.lettre-email:focus {
  outline: none;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(0, 0, 0, .6);
}

.lettre-envoyer {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .8rem;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font-family: var(--hero-sans, 'Inter', sans-serif);
  font-size: .76rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
}
.lettre-envoyer:hover,
.lettre-envoyer:focus-visible {
  background: #fff;
  border-color: #fff;
  color: #0b0b10;
  outline: none;
}
.lettre-envoyer svg { width: .82rem; height: .82rem; flex: none; }
.lettre-envoyer:disabled { opacity: .55; cursor: progress; }

/* Envoi en cours : le libellé change sans que la carte ne saute de taille. */
.lettre.lettre-en-cours .lettre-envoyer-texte { visibility: hidden; }
.lettre.lettre-en-cours .lettre-envoyer { position: relative; }
.lettre.lettre-en-cours .lettre-envoyer::after {
  content: "Envoi…";
  position: absolute;
  left: 0; right: 0;
  text-align: center;
}

.lettre-erreur {
  margin: .55rem 0 0;
  font-family: var(--hero-sans, 'Inter', sans-serif);
  font-size: .72rem;
  line-height: 1.5;
  color: #f3a9a9;
}
.lettre-erreur[hidden] { display: none; }

.lettre-mention {
  margin: .7rem 0 0;
  font-family: 'DM Mono', monospace;
  font-size: .52rem;
  letter-spacing: .1em;
  line-height: 1.7;
  color: rgba(255, 255, 255, .34);
}

.lettre-lien {
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.lettre-lien:hover { color: rgba(255, 255, 255, .8); }

/* --- Les deux états ------------------------------------------------------- */
.lettre-merci { display: none; }
.lettre.lettre-inscrit .lettre-form { display: none; }
.lettre.lettre-inscrit .lettre-merci { display: block; }

.lettre-confettis {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   LES MENTIONS LÉGALES — bouton discret en bas à droite, et sa fenêtre.
   --------------------------------------------------------------------------- */
.vest-legal {
  position: absolute;
  right: clamp(.9rem, 3vw, 2.8rem);
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: 12;
  padding: .3rem .1rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  background: none;
  color: rgba(255, 255, 255, .38);
  font-family: 'DM Mono', monospace;
  font-size: .54rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease .3s, color .3s ease, border-color .3s ease;
}

.plan-vestibule.vest-actif .vest-legal { opacity: 1; pointer-events: auto; }

.vest-legal:hover,
.vest-legal:focus-visible {
  color: #fff;
  border-bottom-color: #fff;
  outline: none;
}

/* La fenêtre elle-même. Elle vit ici parce que c'est du mobilier du couloir —
   mais elle s'ouvre aussi depuis le panneau de contact, d'où le z-index
   au-dessus de tout le reste. */
.mentions {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vh, 3rem) 1rem;
  opacity: 0;
  transition: opacity .35s ease;
}
.mentions[hidden] { display: none; }
.mentions.mentions-ouvertes { opacity: 1; }

.mentions-fond {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 6, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.mentions-corps {
  position: relative;
  width: min(680px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 5px;
  background: #07070d;
  transform: translateY(14px);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.mentions.mentions-ouvertes .mentions-corps { transform: none; }

.mentions-fermer {
  position: absolute;
  top: .7rem;
  right: .9rem;
  padding: .2rem .5rem;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .5);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color .3s ease;
}
.mentions-fermer:hover { color: #fff; }

.mentions-sur-titre {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.mentions-titre {
  margin: .5rem 0 clamp(1.2rem, 3vw, 1.8rem);
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.02em;
  color: #fff;
}

.mentions-texte {
  font-family: var(--hero-sans, 'Inter', sans-serif);
  font-size: .84rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .74);
}
/* Sélecteur doublé à dessein : l'accueil impose un serif à tous ses h1/h2/h3
   depuis une feuille déclarée après celle-ci. À spécificité égale, c'est elle
   qui l'emportait et les intertitres sortaient en Didone. */
.mentions .mentions-texte h3 {
  margin: clamp(1.1rem, 2.4vw, 1.6rem) 0 .4rem;
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .95);
}
.mentions .mentions-texte h3:first-child { margin-top: 0; }
.mentions-texte p { margin: 0; }
.mentions-texte strong { color: #fff; font-weight: 600; }
.mentions-texte a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.mentions-texte ul {
  margin: .5rem 0 0;
  padding-left: 1.1rem;
}
.mentions-texte li { margin-bottom: .3rem; }

/* Ce qui manque encore et qui n'a pas été inventé : ça doit se voir. */
.mentions-a-faire {
  color: #d9a05b;
  font-style: italic;
}

.mentions-date {
  margin-top: clamp(1.4rem, 3vw, 2rem) !important;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-family: 'DM Mono', monospace;
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}

/* ---------------------------------------------------------------------------
   Écrans étroits — le couloir se resserre : plus de décalage latéral (le
   script le sait aussi), texte plus compact, repère réduit aux traits.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* 79vw et pas davantage : au-delà, la dernière lettre de chaque ligne vient
     buter contre les traits du repère latéral. */
  .vest-station { width: 79vw; }

  /* L'objet 3D passe SOUS le texte : côte à côte sur un téléphone, il ne
     resterait ni colonne lisible ni objet visible. */
  .vest-station--3d {
    width: 79vw;
    grid-template-columns: 1fr;
    gap: .9rem;
  }
  .vest-apercu apercu-3d { height: 138px; }

  /* La lettre prend toute la largeur en bas, et l'invite remonte au-dessus
     d'elle : au palier 0, les deux se superposaient. */
  .lettre {
    left: 50%;
    right: auto;
    bottom: .8rem;
    width: min(340px, 90vw);
    transform: translateX(-50%) translateY(10px);
  }
  .plan-vestibule.vest-actif .lettre { transform: translateX(-50%); }
  .plan-vestibule .vest-invite { bottom: 13.5rem; }

  /* Les mentions passent en haut à gauche : en bas à droite, elles tombaient
     sur le repère latéral. */
  .vest-legal {
    top: .9rem;
    bottom: auto;
    left: .9rem;
    right: auto;
  }
  .vest-station h2 { font-size: clamp(1.35rem, 6vw, 1.75rem); }
  .vest-station p { font-size: .85rem; }
  .vest-chiffre { font-size: clamp(4.5rem, 22vw, 7rem); }
  .vest-rail { right: .7rem; gap: .45rem; }
  .vest-rail-item span { display: none; }
  .vest-rail-item::after { width: 14px; }
  .vest-rail-item[aria-current="true"]::after { width: 26px; }
}

/* ---------------------------------------------------------------------------
   Mouvement réduit — la caméra ne vole plus (le script pose les paliers d'un
   coup), et rien ne clignote.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vest-grain { display: none; }
  .vest-fleche::after { animation: none; opacity: .8; }
  .plan-vestibule { transition-duration: .2s; }
}

/* ---------------------------------------------------------------------------
   LE LANCEUR D'ADMINISTRATION — un point discret en haut à droite du couloir.

   Pendant technique de la carte d'annonces (haut gauche) et de la lettre (bas
   gauche), mais reservé à l'équipe : il ne mène qu'à des pages protégées
   (tableau de bord, back-office, éditeur d'annonces). En production, chacune
   est derrière l'authentification du proxy ; un visiteur qui trouverait le
   bouton tombe sur une demande de mot de passe, pas sur la page.

   POURQUOI DISCRET, ET NON CACHÉ. Un lien vraiment cache (deviné par l'URL)
   n'ajoute aucune securité — c'est la protection de la page qui compte, pas
   l'ignorance du chemin. On le rend donc simplement sobre : presque invisible
   au repos, lisible au survol. L'équipe sait qu'il est là.

   CONSTRUIT EN <details> : il s'ouvre et se referme sans une ligne de script,
   au clavier comme à la souris. Rien à charger, rien qui puisse casser.
   --------------------------------------------------------------------------- */
.vest-admin {
  position: absolute;
  top: clamp(1rem, 4vh, 2.6rem);
  right: clamp(.9rem, 3vw, 2.6rem);
  z-index: 13;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition:
    opacity .7s ease .25s,
    transform .7s cubic-bezier(.16, 1, .3, 1) .25s;
}

.plan-vestibule.vest-actif .vest-admin {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Le déclencheur : un rouage sobre. On retire la flèche native de <summary>. */
.vest-admin-declencheur {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(8, 8, 14, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  list-style: none;
  opacity: .3;
  transition: opacity .3s ease, border-color .3s ease, color .3s ease;
}

.vest-admin-declencheur::-webkit-details-marker { display: none; }
.vest-admin-declencheur:hover,
.vest-admin[open] .vest-admin-declencheur {
  opacity: .85;
  color: #fff;
  border-color: rgba(255, 255, 255, .32);
}

.vest-admin-declencheur svg { width: 17px; height: 17px; }

/* Le petit menu, sous le rouage. Même carte de verre que la lettre. */
.vest-admin-menu {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  width: max-content;
  min-width: 190px;
  padding: .4rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
  background: rgba(10, 10, 18, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}

.vest-admin-titre {
  display: block;
  padding: .35rem .6rem .5rem;
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.vest-admin-menu a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .6rem;
  border-radius: 3px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: .82rem;
  transition: background .2s ease, color .2s ease;
}

.vest-admin-menu a:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.vest-admin-menu svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .vest-admin { transition: none; }
}

/* Le panneau de code du rouage : meme carte de verre que le menu, un champ et
   un bouton. Il precede le menu ; c'est le script qui bascule de l'un a
   l'autre une fois la session ouverte (voir admin-lk.js). */
.vest-admin-panneau {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  width: max-content;
  min-width: 230px;
  padding: .55rem .65rem .65rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
  background: rgba(10, 10, 18, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}

.vest-admin-panneau[hidden],
.vest-admin-menu[hidden] { display: none; }

.vest-admin-label {
  display: block;
  margin: .1rem .1rem .35rem;
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.vest-admin-ligne { display: flex; gap: .4rem; }

.vest-admin-code {
  flex: 1;
  min-width: 0;
  padding: .5rem .6rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 3px;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: .78rem;
  letter-spacing: .04em;
}

.vest-admin-code:focus { outline: none; border-color: rgba(255, 255, 255, .4); }

.vest-admin-entrer {
  flex-shrink: 0;
  padding: .5rem .8rem;
  border: 1px solid #6a1826;
  border-radius: 3px;
  background: #6a1826;
  color: #fff;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  transition: background .2s ease;
}

.vest-admin-entrer:hover { background: #7d1c2d; }
.vest-admin-entrer:disabled { opacity: .5; cursor: default; }

.vest-admin-erreur {
  margin: .5rem .1rem 0;
  font-size: .72rem;
  line-height: 1.4;
  color: #fca5a5;
}