/* ==========================================================
   LES CORNEILLAS — prototype A01
   Coordonnées relatives au stage 1672 × 941.
   Aucun fichier contenu dans /anciens/ n'est utilisé.
   ========================================================== */

:root {
  --scene-ratio: 1672 / 941;
  --stage-safe-bottom: 18px;
  --viewport-h: 100vh;
  --fade-duration: 620ms;
  --feedback-duration: 300ms;

  --hover-glow:
    drop-shadow(0 0 1.5px rgba(255, 244, 194, 0.95))
    drop-shadow(0 0 4px rgba(255, 190, 48, 0.95))
    drop-shadow(0 0 8px rgba(239, 145, 0, 0.58));

  --click-glow:
    drop-shadow(0 0 1.5px rgba(230, 255, 231, 1))
    drop-shadow(0 0 4px rgba(85, 255, 116, 0.98))
    drop-shadow(0 0 9px rgba(0, 196, 67, 0.72));
}

@supports (height: 100dvh) {
  :root { --viewport-h: 100dvh; }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #050505;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

button {
  font: inherit;
}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050505;
  isolation: isolate;
}

/* Une seule scène responsive 1672×941.
   Un seul facteur d’échelle uniforme est utilisé : aucune déformation,
   même quand la fenêtre devient très large. */
.scene__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, calc((var(--viewport-h) - var(--stage-safe-bottom)) * 1672 / 941));
  height: min(calc(var(--viewport-h) - var(--stage-safe-bottom)), calc(100vw * 941 / 1672));
  max-width: 100%;
  max-height: calc(var(--viewport-h) - var(--stage-safe-bottom));
  aspect-ratio: 1672 / 941;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.scene__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  transform: none;
  opacity: 0;
  user-select: none;
  pointer-events: none;
  transition: opacity var(--fade-duration) ease-in-out;
}

.scene__background.is-visible {
  opacity: 1;
}

/* Motard : coordonnées relatives au stage, centré et légèrement descendu. */
.scene__biker {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: -8.2%;
  width: 25.2%;
  height: auto;
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  opacity: 1;
  transition: opacity 180ms ease;
}

.scene__biker.is-changing {
  opacity: 0;
}

/* A1 : même échelle visuelle que sur A01. La classe est appliquée pendant
   que le motard est invisible au cours du fondu, afin d'éviter tout saut
   visible de position à l'arrivée de la nouvelle vue. */
.scene__biker.character-a1 {
  left: 35.2%;
  width: 25.2%;
  bottom: -8.2%;
}

/* ----------------------------------------------------------
   Navigation — disposition propre et spécifique à chaque vue.
   Les PNG gardent leur perspective d'origine : aucune rotation CSS.
   ---------------------------------------------------------- */
.a01-nav {
  position: absolute;
  z-index: 20;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.nav-button {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: none;
  transform: translateZ(0);
  transition: filter 210ms ease, transform 180ms ease;
}

/* A01 : croix régulière, compacte et descendue sur les pavés. */
.a01-nav[data-view="A01"] {
  left: 25.5%;
  top: 88.1%;
  width: 13.2%;
  aspect-ratio: 220 / 132;
  transform: translate(-50%, -50%);
}

.a01-nav[data-view="A01"] .nav-button--center {
  left: 50%;
  top: 50%;
  width: 37.7%;
  aspect-ratio: 83 / 46;
  transform: translate(-50%, -50%);
}

.a01-nav[data-view="A01"] .nav-button--up {
  left: 50%;
  top: 16%;
  width: 40.9%;
  aspect-ratio: 90 / 48;
  transform: translate(-50%, -50%);
}

.a01-nav[data-view="A01"] .nav-button--back {
  left: 50%;
  top: 84%;
  width: 44.1%;
  aspect-ratio: 97 / 52;
  transform: translate(-50%, -50%);
}

.a01-nav[data-view="A01"] .nav-button--left {
  left: 17%;
  top: 50%;
  width: 51.4%;
  aspect-ratio: 113 / 52;
  transform: translate(-50%, -50%);
}

.a01-nav[data-view="A01"] .nav-button--right {
  left: 83%;
  top: 50%;
  width: 46.4%;
  aspect-ratio: 102 / 50;
  transform: translate(-50%, -50%);
}

/* A03 : uniquement RETOUR GAUCHE + CENTRE, bas sur le trottoir près de la moto. */
.a01-nav[data-view="A03"] {
  left: 18.2%;
  top: 84.8%;
  width: 12.2%;
  aspect-ratio: 210 / 72;
  transform: translate(-50%, -50%);
}

.a01-nav[data-view="A03"] .nav-button--up,
.a01-nav[data-view="A03"] .nav-button--back,
.a01-nav[data-view="A03"] .nav-button--right {
  display: none;
}

.a01-nav[data-view="A03"] .nav-button--left {
  left: 28%;
  top: 50%;
  width: 54%;
  aspect-ratio: 113 / 52;
  transform: translate(-50%, -50%);
}

.a01-nav[data-view="A03"] .nav-button--center {
  left: 72%;
  top: 50%;
  width: 39.5%;
  aspect-ratio: 83 / 46;
  transform: translate(-50%, -50%);
}

/* A07 : uniquement CENTRE + RETOUR DROITE, bas et à droite du personnage. */
.a01-nav[data-view="A07"] {
  left: 72.7%;
  top: 85.2%;
  width: 11.7%;
  aspect-ratio: 210 / 72;
  transform: translate(-50%, -50%);
}

.a01-nav[data-view="A07"] .nav-button--up,
.a01-nav[data-view="A07"] .nav-button--back,
.a01-nav[data-view="A07"] .nav-button--left {
  display: none;
}

.a01-nav[data-view="A07"] .nav-button--center {
  left: 28%;
  top: 50%;
  width: 39.5%;
  aspect-ratio: 83 / 46;
  transform: translate(-50%, -50%);
}

.a01-nav[data-view="A07"] .nav-button--right {
  left: 72%;
  top: 50%;
  width: 49%;
  aspect-ratio: 102 / 50;
  transform: translate(-50%, -50%);
}

/* A1 : vue rapprochée de la porte, sans rosace directionnelle.
   Le retour se fait uniquement via la grande zone basse du décor. */
.a01-nav[data-view="A1"],
.a01-nav[data-view="A1OPEN"],
.a01-nav[data-view="B01"] {
  display: none;
}

.nav-button:not(.is-clicked):hover img,
.nav-button:not(.is-clicked):focus-visible img {
  filter: var(--hover-glow);
}

.nav-button:focus-visible {
  outline: 1px solid rgba(255, 191, 59, 0.75);
  outline-offset: 4px;
  border-radius: 8px;
}

.nav-button.is-clicked img {
  filter: var(--click-glow);
  transform: translateZ(0) scale(0.97);
}

/* ----------------------------------------------------------
   Infobulle : au-dessus de tous les éléments du stage.
   ---------------------------------------------------------- */
.tooltip {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
  width: max-content;
  max-width: min(240px, calc(100vw - 16px), calc(100% - 16px));
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255, 181, 46, 0.72);
  border-radius: 6px;
  background: rgba(14, 14, 14, 0.86);
  color: #f5f2ea;
  font-size: clamp(11px, 0.88vw, 15px);
  line-height: 1.15;
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: normal;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 9px));
  transition: opacity 150ms ease;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}

.tooltip.is-visible {
  opacity: 1;
}

.tooltip.is-below {
  transform: translate(-50%, 9px);
}

@media (prefers-reduced-motion: reduce) {
  .scene__background,
  .scene__biker,
  .nav-button img,
  .tooltip,
  .a01-nav {
    transition-duration: 1ms !important;
  }
}

/* ----------------------------------------------------------
   Hotspots dans le décor.
   décor (0) < hotspots (5) < motard (10) < navigation (20)
   < infobulles / modales.
   ---------------------------------------------------------- */
.scene-hotspots {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.hotspot-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.scene-hotspot {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* Bords gauche/droit : inchangés, halo intégré au décor et derrière le motard. */
.scene-hotspot--left,
.scene-hotspot--right {
  top: 0;
  width: 5.4%;
  height: 100%;
}

.scene-hotspot--left { left: 0; }
.scene-hotspot--right { right: 0; }

.scene-hotspot--left::after,
.scene-hotspot--right::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 210ms ease, background 210ms ease, box-shadow 210ms ease;
}

.scene-hotspot--left::after {
  background: linear-gradient(
    to right,
    rgba(255, 208, 82, 0.48) 0%,
    rgba(255, 178, 35, 0.27) 28%,
    rgba(255, 166, 18, 0.10) 58%,
    transparent 100%
  );
  box-shadow: inset 16px 0 24px rgba(255, 188, 38, 0.22);
}

.scene-hotspot--right::after {
  background: linear-gradient(
    to left,
    rgba(255, 208, 82, 0.48) 0%,
    rgba(255, 178, 35, 0.27) 28%,
    rgba(255, 166, 18, 0.10) 58%,
    transparent 100%
  );
  box-shadow: inset -16px 0 24px rgba(255, 188, 38, 0.22);
}

.scene-hotspot--left:hover::after,
.scene-hotspot--left:focus-visible::after,
.scene-hotspot--right:hover::after,
.scene-hotspot--right:focus-visible::after,
.scene-hotspot--left.is-clicked::after,
.scene-hotspot--right.is-clicked::after {
  opacity: 1;
}

.scene-hotspot--left.is-clicked::after {
  background: linear-gradient(to right, rgba(92, 255, 122, 0.48), rgba(0, 196, 67, 0.12) 58%, transparent 100%);
}

.scene-hotspot--right.is-clicked::after {
  background: linear-gradient(to left, rgba(92, 255, 122, 0.48), rgba(0, 196, 67, 0.12) 58%, transparent 100%);
}

/* A1 — grande zone de retour en bas du stage, invisible au repos. */
.scene-hotspot--door-back {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 21%;
}

.scene-hotspot--door-back::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(255, 208, 82, 0.48) 0%,
    rgba(255, 178, 35, 0.27) 26%,
    rgba(255, 166, 18, 0.10) 56%,
    transparent 100%
  );
  box-shadow: inset 0 -18px 28px rgba(255, 188, 38, 0.24);
  transition: opacity 210ms ease, background 210ms ease, box-shadow 210ms ease;
}

.scene-hotspot--door-back:hover::after,
.scene-hotspot--door-back:focus-visible::after,
.scene-hotspot--door-back.is-clicked::after {
  opacity: 1;
}

.scene-hotspot--door-back.is-clicked::after {
  background: linear-gradient(
    to top,
    rgba(92, 255, 122, 0.50) 0%,
    rgba(0, 196, 67, 0.16) 56%,
    transparent 100%
  );
  box-shadow: inset 0 -18px 28px rgba(0, 196, 67, 0.22);
}

/*
   Hotspots PNG : le PNG est l'élément interactif exact.
   Au repos il est invisible. Au survol/clic, le filtre SVG ne restitue PAS
   l'image elle-même : uniquement la lueur calculée à partir de son alpha.
   Le drop-shadow CSS renforce la diffusion tout en suivant la silhouette.
*/
.scene-hotspot--png {
  overflow: visible;
}

.scene-hotspot__mask {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: translateZ(0);
  transition: opacity 210ms ease, filter 210ms ease;
}

.scene-hotspot--png:hover .scene-hotspot__mask,
.scene-hotspot--png:focus-visible .scene-hotspot__mask {
  /* Le filtre SVG restitue uniquement le halo EXTERIEUR calculé depuis l'alpha. */
  opacity: 1;
  filter: url(#hotspotGlowAmber);
}

.scene-hotspot--png.is-clicked .scene-hotspot__mask {
  /* Aucun pixel de l'image source n'est rendu : seulement le halo vert externe. */
  opacity: 1;
  filter: url(#hotspotGlowGreen);
}

.scene-hotspot:focus-visible {
  outline: 0;
}

.scene-hotspot:disabled {
  pointer-events: none;
}

/* A01 — porte : coordonnées exactes du PNG extrait du décor 1672x941. */
.scene-hotspot--club {
  left: 44.4976%;
  top: 38.1510%;
  width: 15.6699%;
  height: 37.4070%;
}

/* A1 — deux poignées : PNG détouré fourni, superposé 1:1 sur a1.png
   (repérage source 1672x941 : x=813, y=513, 64x128). */
.scene-hotspot--door-handles {
  left: 48.6244%;
  top: 54.5165%;
  width: 3.8278%;
  height: 13.6026%;
}

/* A1.OPEN — zones de clic recalées directement sur les ferrures visibles.
   On n'affiche plus les PNG de poignées : leur texture résiduelle provoquait
   le bref rectangle visible à l'arrivée sur la vue ouverte. */
.scene-hotspot--door-handle-open-left {
  left: 38.6364%;  /* x = 646 */
  top: 54.5165%;   /* y = 513 */
  width: 0.8971%;  /* 15 px */
  height: 8.5016%; /* 80 px */
}

.scene-hotspot--door-handle-open-right {
  left: 63.5766%;  /* x ≈ 1063 */
  top: 54.4102%;   /* y ≈ 512 */
  width: 1.9139%;  /* 32 px */
  height: 2.5505%; /* 24 px */
}

.scene-hotspot--door-handle-open-left .scene-hotspot__mask,
.scene-hotspot--door-handle-open-right .scene-hotspot__mask {
  display: none;
}

.scene-hotspot--door-handle-open-left::after,
.scene-hotspot--door-handle-open-right::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 5px 2px rgba(255, 190, 48, .95), 0 0 12px 4px rgba(239, 145, 0, .42);
  transition: opacity 160ms ease, box-shadow 160ms ease;
}

.scene-hotspot--door-handle-open-left:hover::after,
.scene-hotspot--door-handle-open-left:focus-visible::after,
.scene-hotspot--door-handle-open-right:hover::after,
.scene-hotspot--door-handle-open-right:focus-visible::after {
  opacity: 1;
}

.scene-hotspot--door-handle-open-left.is-clicked::after,
.scene-hotspot--door-handle-open-right.is-clicked::after {
  opacity: 1;
  box-shadow: 0 0 5px 2px rgba(85, 255, 116, .98), 0 0 12px 4px rgba(0, 196, 67, .52);
}

/* A1OPEN — nouveau entrer_hotspot.png fourni par l’utilisateur.
   Crop exact de a1.open.png 1672×941 : x=612, y=179, 454×676. */
.scene__stage[data-view="A1OPEN"] .scene-hotspot--enter-office-a1open {
  left: 36.602871% !important;   /* 612 / 1672 */
  top: 19.022317% !important;    /* 179 / 941 */
  width: 27.153110% !important;  /* 454 / 1672 */
  height: 71.838470% !important; /* 676 / 941 */
  clip-path: none !important;
  overflow: visible !important;
}

.scene__stage[data-view="A1OPEN"] .scene-hotspot--enter-office-a1open .scene-hotspot__mask {
  display: block !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

.scene__stage[data-view="A1OPEN"] .scene-hotspot--enter-office-a1open.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="A1OPEN"] .scene-hotspot--enter-office-a1open:focus-visible .scene-hotspot__mask {
  opacity: .62 !important;
  filter: url(#hotspotGlowAmber) !important;
}

.scene__stage[data-view="A1OPEN"] .scene-hotspot--enter-office-a1open.is-clicked .scene-hotspot__mask {
  opacity: .72 !important;
  filter: url(#hotspotGlowGreen) !important;
}

/* A01 — quatre motos : superposition 1:1 des PNG extraits sur le décor. */
.scene-hotspot--moto1 {
  left: 72.7273%;
  top: 59.7237%;
  width: 8.3134%;
  height: 21.3603%;
}

.scene-hotspot--moto2 {
  left: 61.3038%;
  top: 59.5112%;
  width: 11.1244%;
  height: 21.2530%;
}

.scene-hotspot--moto3 {
  left: 26.3756%;
  top: 60.8927%;
  width: 13.7560%;
  height: 20.5101%;
}

.scene-hotspot--moto4 {
  left: 17.2249%;
  top: 61.7428%;
  width: 11.0048%;
  height: 19.3411%;
}

/* A03 — quatre logos du panneau Offices de tourisme.
   Chaque masque PNG est superposé à son logo réel ; aucune zone rectangulaire
   indépendante n'est dessinée. Les petits ajustements ci-dessous sont liés au stage 1672×941. */
.scene-hotspot--office-chateau {
  left: 65.08%;
  top: 40.12%;
  width: 9.62%;
  height: 9.72%;
}

.scene-hotspot--office-montargis {
  left: 75.24%;
  top: 40.22%;
  width: 11.70%;
  height: 10.46%;
}

.scene-hotspot--office-nemours {
  left: 65.04%;
  top: 54.18%;
  width: 9.47%;
  height: 10.08%;
}

.scene-hotspot--office-gatinais {
  left: 75.05%;
  top: 54.78%;
  width: 12.34%;
  height: 10.33%;
}

/* Aucun skew/rotation artificiel sur les logos : leur alpha reste la géométrie du halo. */
.scene-hotspot--office {
  transform: none;
}

/* A07 — miniatures vidéo.
   Le panneau présente une très légère perspective : chaque masque est découpé en
   quadrilatère avant le filtre de halo afin que les quatre bords lumineux suivent
   les bords visibles des miniatures, et non un rectangle d'écran. */
.scene-hotspot--video-chateau {
  left: 10.91%;
  top: 59.86%;
  width: 13.86%;
  height: 15.48%;
}

.scene-hotspot--video-vivre {
  left: 25.02%;
  top: 59.90%;
  width: 12.02%;
  height: 15.10%;
}

.scene-hotspot--video-chateau .scene-hotspot__mask {
  clip-path: polygon(0.7% 1.2%, 99.5% 0%, 98.9% 95.8%, 1.0% 100%);
}

.scene-hotspot--video-vivre .scene-hotspot__mask {
  clip-path: polygon(0.5% 0.4%, 99.2% 1.0%, 99.7% 99%, 0.8% 97.7%);
}


/* ----------------------------------------------------------
   Menu horizontal piloté par le bouton central.
   Lié au stage 16:9, fin, translucide et au-dessus du personnage/navigation.
   ---------------------------------------------------------- */
.main-menu {
  position: absolute;
  z-index: 60;
  left: 50%;
  top: 1.4%;
  display: flex;
  align-items: stretch;
  max-width: 96%;
  min-height: clamp(28px, 3.4vw, 42px);
  padding: 2px 5px;
  border: 1px solid rgba(255, 181, 46, 0.62);
  border-radius: 8px;
  background: rgba(13, 14, 15, 0.72);
  box-shadow: 0 4px 18px rgba(0,0,0,.30), 0 0 10px rgba(255, 167, 31, .10);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 190ms ease, transform 190ms ease, visibility 190ms ease;
  white-space: nowrap;
}

.main-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.main-menu__item,
.main-menu__submenu button {
  border: 0;
  background: transparent;
  color: #f4f0e8;
  cursor: pointer;
}

.main-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  box-sizing: border-box;
  min-height: clamp(28px, 3.4vw, 42px);
  margin: 0;
  padding: 5px clamp(8px, .9vw, 15px);
  border-radius: 0;
  font: inherit;
  font-size: clamp(9px, .72vw, 13px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .045em;
  text-decoration: none;
  white-space: nowrap;
}

.main-menu__item + .main-menu__item,
.main-menu__group {
  border-left: 1px solid rgba(255, 194, 73, .20);
}

.main-menu__item:hover,
.main-menu__item:focus-visible,
.main-menu__submenu button:hover,
.main-menu__submenu button:focus-visible {
  color: #ffd77b;
  background: rgba(255, 174, 31, .08);
  outline: 0;
}

.main-menu__group {
  position: relative;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  margin: 0;
  padding: 0;
}

.main-menu__group > .main-menu__item {
  height: 100%;
}

.main-menu__item--submenu::after {
  content: " ▾";
  color: #e9ad3e;
}

.main-menu__submenu {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  z-index: 62;
  min-width: 250px;
  padding: 5px;
  border: 1px solid rgba(255, 181, 46, .55);
  border-radius: 7px;
  background: rgba(12, 13, 14, .94);
  box-shadow: 0 8px 22px rgba(0,0,0,.38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

/* Zone invisible entre la rubrique et sa liste : évite la fermeture
   pendant le déplacement vertical du curseur, sans changer l'apparence. */
.main-menu__submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  height: 7px;
}

.main-menu__group:last-child .main-menu__submenu {
  left: auto;
  right: 0;
}

.main-menu__group:hover .main-menu__submenu,
.main-menu__group:focus-within .main-menu__submenu,
.main-menu__group.is-open .main-menu__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.main-menu__submenu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: 4px;
  text-align: left;
  font-size: clamp(10px, .74vw, 13px);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .main-menu {
    left: 2%;
    right: 2%;
    max-width: none;
    overflow-x: auto;
    overflow-y: visible;
    transform: translateY(-8px);
    scrollbar-width: thin;
  }
  .main-menu.is-open { transform: translateY(0); }
  .main-menu__item { font-size: clamp(8px, 1.6vw, 11px); padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .main-menu, .main-menu__submenu { transition-duration: 1ms !important; }
}

/* ----------------------------------------------------------
   Modale vidéo YouTube — au-dessus de tout le site.
   ---------------------------------------------------------- */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 42px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.video-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(2px);
}

.video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(80vw, calc(72vh * 16 / 9));
  max-width: 1280px;
}

.video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 16px 55px rgba(0, 0, 0, 0.55);
}

.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  z-index: 2;
  right: -14px;
  top: -44px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 193, 58, 0.78);
  border-radius: 50%;
  background: rgba(12, 12, 12, 0.92);
  color: #fff;
  font-size: 29px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
}

.video-modal__close:hover,
.video-modal__close:focus-visible {
  box-shadow: 0 0 10px rgba(255, 184, 36, 0.72);
  outline: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scene-hotspot__mask,
  .scene-hotspot--left::after,
  .scene-hotspot--right::after,
  .scene-hotspot--door-back::after,
  .video-modal {
    transition-duration: 1ms !important;
  }
}


/* ----------------------------------------------------------
   Modale générique pour les offices de tourisme.
   Fenêtre flottante : le site des Corneillas reste visible derrière.
   ---------------------------------------------------------- */
.external-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 40px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.external-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.external-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(2px);
}

.external-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(82vw, 1320px);
  height: min(76vh, 820px);
  max-width: 82vw;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 190, 58, 0.46);
  border-radius: 10px;
  background: #111;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.62);
}

.external-modal__bar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px 8px 16px;
  background: rgba(18, 18, 18, 0.98);
  border-bottom: 1px solid rgba(255, 190, 58, 0.28);
}

.external-modal__title {
  min-width: 0;
  color: #f5f2ea;
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-modal__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.external-modal__open {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 190, 58, 0.62);
  border-radius: 6px;
  color: #ffe0a0;
  text-decoration: none;
  font-size: 13px;
  background: rgba(255, 185, 45, 0.06);
}

.external-modal__open:hover,
.external-modal__open:focus-visible {
  background: rgba(255, 185, 45, 0.12);
  box-shadow: 0 0 10px rgba(255, 184, 36, 0.34);
  outline: 0;
}

.external-modal__close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 193, 58, 0.72);
  border-radius: 50%;
  background: rgba(12, 12, 12, 0.94);
  color: #fff;
  font-size: 25px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

.external-modal__close:hover,
.external-modal__close:focus-visible {
  box-shadow: 0 0 10px rgba(255, 184, 36, 0.62);
  outline: 0;
}

.external-modal__frame-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #fff;
}

.external-modal__frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 700px) {
  .external-modal {
    padding: 10px;
  }

  .external-modal__dialog {
    width: 94vw;
    max-width: 94vw;
    height: 84vh;
    max-height: 84vh;
  }

  .external-modal__bar {
    padding-left: 10px;
  }

  .external-modal__open {
    font-size: 12px;
    padding-inline: 8px;
  }
}

/* A07 : le quadrilatère est d'abord formé par le PNG, puis le filtre est
   appliqué au conteneur. Ainsi la lueur peut diffuser à l'extérieur des
   quatre côtés sans être retaillée par le clip-path. */
.scene-hotspot--video {
  opacity: 0;
  transition: opacity 210ms ease, filter 210ms ease;
}

.scene-hotspot--video .scene-hotspot__mask {
  opacity: 1;
  filter: none;
}

.scene-hotspot--video:hover,
.scene-hotspot--video:focus-visible {
  opacity: 1;
  filter: url(#hotspotGlowAmber);
}

.scene-hotspot--video.is-clicked {
  opacity: 1;
  filter: url(#hotspotGlowGreen);
}

.scene-hotspot--video:hover .scene-hotspot__mask,
.scene-hotspot--video:focus-visible .scene-hotspot__mask,
.scene-hotspot--video.is-clicked .scene-hotspot__mask {
  filter: none;
}

/* ==========================================================
   SOURCE6 — AJUSTEMENTS HOTSPOTS DEMANDÉS UNIQUEMENT
   A03/A07 : quadrilatères réellement alignés sur les panneaux.
   A01 : affiches rock détourées.
   ========================================================== */

/* Hotspots A03/A07 : même signature lumineuse que les affiches rock A01.
   On conserve les quadrilatères de perspective déjà validés, mais le halo
   utilise exactement les mêmes chaînes drop-shadow et la même transition
   que le système interactif des affiches. */
.scene-hotspot--perspective {
  overflow: visible;
  background: transparent !important;
  opacity: 1 !important;
  filter: none !important;
}

.scene-hotspot--perspective .scene-hotspot__outline {
  position: absolute;
  inset: -2.5%;
  width: 105%;
  height: 105%;
  overflow: visible;
  pointer-events: none;
}

.scene-hotspot--perspective .scene-hotspot__outline polygon {
  fill: none;
  stroke: transparent;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
  transition: stroke 210ms ease, filter 210ms ease;
}

.scene-hotspot--perspective:hover .scene-hotspot__outline polygon,
.scene-hotspot--perspective:focus-visible .scene-hotspot__outline polygon {
  stroke: rgba(255, 244, 194, 0.96);
  filter: var(--hover-glow);
}

.scene-hotspot--perspective.is-clicked .scene-hotspot__outline polygon {
  stroke: rgba(230, 255, 231, 1);
  filter: var(--click-glow);
}

/* A03 — panneau OFFICES DE TOURISME, quadrillage 2 x 2 calé sur la zone blanche réelle. */
.scene-hotspot--office-chateau {
  left: 64.713%;
  top: 40.170%;
  width: 11.842%;
  height: 13.496%;
  clip-path: polygon(0% 1.6%, 99% 0%, 100% 99%, 0.5% 96.8%);
}

.scene-hotspot--office-montargis {
  left: 76.435%;
  top: 39.957%;
  width: 13.038%;
  height: 14.346%;
  clip-path: polygon(0% 0.8%, 99.2% 0%, 100% 100%, 0% 98%);
}

.scene-hotspot--office-nemours {
  left: 64.773%;
  top: 53.241%;
  width: 11.902%;
  height: 18.491%;
  clip-path: polygon(0.5% 0%, 100% 1.8%, 100% 100%, 0% 96.5%);
}

.scene-hotspot--office-gatinais {
  left: 76.495%;
  top: 53.560%;
  width: 12.978%;
  height: 18.810%;
  clip-path: polygon(0% 1.5%, 100% 0%, 100% 100%, 0% 99%);
}

/* Neutraliser complètement l'ancien rendu image/filtre des offices. */
.scene-hotspot--office .scene-hotspot__mask { display: none !important; }

/* A07 — deux miniatures, quadrilatères calés sur leurs quatre bords visibles. */
.scene-hotspot--video-chateau {
  left: 10.885%;
  top: 59.830%;
  width: 13.995%;
  height: 16.047%;
  clip-path: polygon(1.0% 1.6%, 99.3% 0%, 98.1% 96.0%, 0.8% 100%);
}

.scene-hotspot--video-vivre {
  left: 25.120%;
  top: 59.830%;
  width: 12.081%;
  height: 15.303%;
  clip-path: polygon(0% 1.2%, 99.0% 0%, 100% 98.5%, 0% 100%);
}

/* Neutraliser l'ancien effet rectangulaire appliqué au conteneur vidéo. */
.scene-hotspot--video,
.scene-hotspot--video:hover,
.scene-hotspot--video:focus-visible,
.scene-hotspot--video.is-clicked {
  opacity: 1 !important;
  filter: none !important;
  background: transparent !important;
}
.scene-hotspot--video .scene-hotspot__mask { display: none !important; }

/* A01 — affiches rock : positions 1:1 sur le décor 1672 x 941. */
.scene-hotspot--poster-scorpions {
  left: 28.768%;
  top: 40.170%;
  width: 4.665%;
  height: 11.902%;
}

.scene-hotspot--poster-deep-purple {
  left: 33.254%;
  top: 48.672%;
  width: 4.904%;
  height: 12.434%;
}

.scene-hotspot--poster-iron-maiden {
  left: 70.275%;
  top: 45.484%;
  width: 4.246%;
  height: 11.796%;
}

.scene-hotspot--poster-led-zeppelin {
  left: 64.175%;
  top: 49.416%;
  width: 4.067%;
  height: 11.052%;
}


/* ==========================================================
   SOURCES7(1) — HOTSPOTS PNG FOURNIS PAR L'UTILISATEUR
   A03/A07 : superposition 1:1 sur les pixels du décor 1672×941.
   Les anciennes formes géométriques restent neutralisées par ces règles.
   ========================================================== */

/* Les hotspots A03/A07 utilisent désormais exactement le même rendu alpha/glow
   que les PNG détourés A01 (affiches rock). */
.scene-hotspot--office,
.scene-hotspot--video {
  opacity: 1 !important;
  filter: none !important;
  background: transparent !important;
  clip-path: none !important;
  overflow: visible !important;
}

.scene-hotspot--office .scene-hotspot__mask,
.scene-hotspot--video .scene-hotspot__mask {
  display: block !important;
  opacity: 0 !important;
  filter: none !important;
  clip-path: none !important;
  object-fit: contain;
  transition: opacity 210ms ease, filter 210ms ease;
}

.scene-hotspot--office:hover .scene-hotspot__mask,
.scene-hotspot--office:focus-visible .scene-hotspot__mask,
.scene-hotspot--video:hover .scene-hotspot__mask,
.scene-hotspot--video:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}

.scene-hotspot--office.is-clicked .scene-hotspot__mask,
.scene-hotspot--video.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}

/* A03 — positions exactes déterminées à partir des PNG détourés fournis. */
.scene-hotspot--office-chateau {
  left: 65.430622% !important;
  top: 42.933050% !important;
  width: 10.466507% !important;
  height: 8.820404% !important;
}

.scene-hotspot--office-montargis {
  left: 75.897129% !important;
  top: 40.807651% !important;
  width: 13.576555% !important;
  height: 12.752391% !important;
}

.scene-hotspot--office-nemours {
  left: 65.669856% !important;
  top: 54.729012% !important;
  width: 9.449761% !important;
  height: 14.452710% !important;
}

.scene-hotspot--office-gatinais {
  left: 75.059809% !important;
  top: 55.472901% !important;
  width: 14.354067% !important;
  height: 12.646121% !important;
}

/* A07 — positions exactes déterminées à partir des PNG déjà mis en perspective. */
.scene-hotspot--video-chateau {
  left: 11.004785% !important;
  top: 60.573858% !important;
  width: 14.055024% !important;
  height: 17.003188% !important;
}

.scene-hotspot--video-vivre {
  left: 25.358852% !important;
  top: 60.042508% !important;
  width: 12.200957% !important;
  height: 16.153029% !important;
}

/* Correctif porte fermée : le PNG source contient encore des pixels du bois,
   ce qui pouvait faire apparaître son rectangle au moment où le hotspot devenait actif.
   La zone cliquable reste inchangée, mais le feedback ne dessine que les deux poignées. */
.scene-hotspot--door-handles .scene-hotspot__mask {
  display: none;
}

.scene-hotspot--door-handles::before,
.scene-hotspot--door-handles::after {
  content: "";
  position: absolute;
  top: 4%;
  width: 20%;
  height: 92%;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 5px 2px rgba(255, 190, 48, .95), 0 0 12px 4px rgba(239, 145, 0, .42);
  transition: opacity 160ms ease, box-shadow 160ms ease;
}

.scene-hotspot--door-handles::before { left: 15%; }
.scene-hotspot--door-handles::after  { right: 15%; }

.scene-hotspot--door-handles:hover::before,
.scene-hotspot--door-handles:hover::after,
.scene-hotspot--door-handles:focus-visible::before,
.scene-hotspot--door-handles:focus-visible::after {
  opacity: 1;
}

.scene-hotspot--door-handles.is-clicked::before,
.scene-hotspot--door-handles.is-clicked::after {
  opacity: 1;
  box-shadow: 0 0 5px 2px rgba(85, 255, 116, .98), 0 0 12px 4px rgba(0, 196, 67, .52);
}

/* ==========================================================
   SOURCES13 — recalage A1.OPEN
   Les trois PNG ci-dessous sont désormais des extraits 1:1 de a1.open.png.
   Au survol on réaffiche donc exactement les mêmes pixels, avec seulement
   le halo en plus : aucune image fantôme ni décalage possible.
   ========================================================== */
.scene-hotspot--door-handle-open-left {
  left: 38.636364% !important;   /* 646 / 1672 */
  top: 54.516472% !important;    /* 513 / 941 */
  width: 0.897129% !important;   /* 15 / 1672 */
  height: 8.501594% !important;  /* 80 / 941 */
}

.scene-hotspot--door-handle-open-right {
  left: 61.662679% !important;   /* 1031 / 1672 */
  top: 54.516472% !important;    /* 513 / 941 */
  width: 0.897129% !important;   /* 15 / 1672 */
  height: 8.501594% !important;  /* 80 / 941 */
}

.scene-hotspot--door-handle-open-left .scene-hotspot__mask,
.scene-hotspot--door-handle-open-right .scene-hotspot__mask {
  display: block !important;
  opacity: 0;
  filter: none;
}

.scene-hotspot--door-handle-open-left::after,
.scene-hotspot--door-handle-open-right::after {
  display: none !important;
}

.scene-hotspot--door-handle-open-left:hover .scene-hotspot__mask,
.scene-hotspot--door-handle-open-left:focus-visible .scene-hotspot__mask,
.scene-hotspot--door-handle-open-right:hover .scene-hotspot__mask,
.scene-hotspot--door-handle-open-right:focus-visible .scene-hotspot__mask {
  opacity: 1;
  filter: var(--hover-glow);
}

.scene-hotspot--door-handle-open-left.is-clicked .scene-hotspot__mask,
.scene-hotspot--door-handle-open-right.is-clicked .scene-hotspot__mask {
  opacity: 1;
  filter: var(--click-glow);
}

/* Thierry + bureau : extrait exact de A1.OPEN (x648 y447, 365x225). */
.scene-hotspot--enter-office {
  left: 38.755981% !important;
  top: 47.502657% !important;
  width: 21.830144% !important;
  height: 23.910733% !important;
  clip-path: none !important;
  overflow: visible;
}

.scene-hotspot--enter-office .scene-hotspot__mask {
  display: block !important;
  opacity: 0;
  filter: none;
}

.scene-hotspot--enter-office:hover .scene-hotspot__mask,
.scene-hotspot--enter-office:focus-visible .scene-hotspot__mask {
  opacity: 1;
  filter: var(--hover-glow);
}

.scene-hotspot--enter-office.is-clicked .scene-hotspot__mask {
  opacity: 1;
  filter: var(--click-glow);
}


/* ==========================================================
   SOURCES14 — corrections de validation
   - aucune ancienne zone interactive visible pendant un changement de vue ;
   - restauration des PNG détourés originaux pour A1.OPEN ;
   - Thierry + bureau aligné sur le décor sans réafficher ses pixels : seul
     le halo issu de l'alpha du PNG est rendu, ce qui évite tout "saut" visuel.
   ========================================================== */
.scene__stage.is-transitioning .scene-hotspots {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Poignées ouvertes : PNG détourés originaux, 1:1 sur le décor 1672x941. */
.scene-hotspot--door-handle-open-left {
  left: 38.636364% !important;   /* 646 / 1672 */
  top: 54.516472% !important;    /* 513 / 941 */
  width: 0.897129% !important;   /* 15 / 1672 */
  height: 8.501594% !important;  /* 80 / 941 */
}
.scene-hotspot--door-handle-open-right {
  left: 61.662679% !important;   /* 1031 / 1672 */
  top: 54.516472% !important;    /* 513 / 941 */
  width: 0.897129% !important;   /* 15 / 1672 */
  height: 8.501594% !important;  /* 80 / 941 */
}
.scene-hotspot--door-handle-open-left .scene-hotspot__mask,
.scene-hotspot--door-handle-open-right .scene-hotspot__mask {
  display: block !important;
  opacity: 0 !important;
  filter: none !important;
}
.scene-hotspot--door-handle-open-left:hover .scene-hotspot__mask,
.scene-hotspot--door-handle-open-left:focus-visible .scene-hotspot__mask,
.scene-hotspot--door-handle-open-right:hover .scene-hotspot__mask,
.scene-hotspot--door-handle-open-right:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}
.scene-hotspot--door-handle-open-left.is-clicked .scene-hotspot__mask,
.scene-hotspot--door-handle-open-right.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}

/* Thierry + bureau : PNG détouré original (766x434), remis à l'échelle et
   recalé sur la version intégrée dans a1.open.png. Le filtre SVG n'affiche
   jamais les pixels du PNG, seulement le halo extérieur de sa transparence. */
.scene-hotspot--enter-office {
  left: 39.055024% !important;   /* x = 653 */
  top: 50.371945% !important;    /* y = 474 */
  width: 21.172249% !important;  /* 354 / 1672 */
  height: 21.360255% !important; /* 201 / 941 */
  clip-path: none !important;
  overflow: visible !important;
}
.scene-hotspot--enter-office .scene-hotspot__mask {
  display: block !important;
  opacity: 0 !important;
  filter: none !important;
}
.scene-hotspot--enter-office:hover .scene-hotspot__mask,
.scene-hotspot--enter-office:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}
.scene-hotspot--enter-office.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}

/* ==========================================================
   SOURCE10H22 — navigation intérieure B01 / B07 / B03
   et verrouillage définitif des hotspots pendant les fondus.
   ========================================================== */
.scene-hotspots.is-suppressed,
.scene__stage.is-transitioning .scene-hotspots {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.scene__biker.is-hidden-view {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Les vues intérieures n'utilisent pas la rosace extérieure. */
.a01-nav[data-view="B01BUREAU"],
.a01-nav[data-view="B03"],
.a01-nav[data-view="B05"],
.a01-nav[data-view="B05OPEN"],
.a01-nav[data-view="B07"] {
  display: none !important;
}

/* B01 — Thierry + bureau. entrer_hotspot.png est un extrait EXACT de b01.png :
   source 1672x941, crop x=476 y=405, taille 771x428.
   Superposition 1:1, sans translation ni mise à l'échelle arbitraire. */
.scene__stage[data-view="B01"] .scene-hotspot--enter-office-b01 {
  left: 28.468900% !important;   /* 476 / 1672 */
  top: 43.039320% !important;    /* 405 / 941 */
  width: 46.112440% !important;  /* 771 / 1672 */
  height: 45.483528% !important; /* 428 / 941 */
  clip-path: none !important;
  overflow: visible !important;
}

.scene__stage[data-view="B01"] .scene-hotspot--enter-office-b01 .scene-hotspot__mask {
  display: block !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

/* B01 : halo vert demandé au survol, en gardant uniquement la silhouette alpha. */
.scene__stage[data-view="B01"] .scene-hotspot--enter-office-b01.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B01"] .scene-hotspot--enter-office-b01:focus-visible .scene-hotspot__mask,
.scene__stage[data-view="B01"] .scene-hotspot--enter-office-b01.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}


/* ==========================================================
   SOURCE10H49 — navigation par bords + bouton Menu fixe.
   Les anciennes flèches ont été retirées du HTML.
   ========================================================== */

/* Bouton unique, fixe dans le viewport : il ne dépend pas du stage ni des fondus. */
.menu-toggle {
  position: fixed;
  z-index: 200;
  top: 14px;
  right: 14px;
  min-width: 68px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 200, 83, .68);
  border-radius: 7px;
  background: rgba(12, 13, 14, .78);
  color: #f4f0e8;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .035em;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.menu-toggle:hover,
.menu-toggle:focus-visible,
.menu-toggle[aria-expanded="true"] {
  color: #ffd66f;
  border-color: rgba(255, 207, 92, .95);
  outline: 0;
}

/* Le menu reste sous le bouton fixe et évite de le recouvrir. */
.main-menu { top: 6.2%; }

/* Hotspot inférieur, identique au langage visuel des bords latéraux. */
.scene-hotspot--bottom {
  left: 0;
  bottom: 0.35%;
  width: 100%;
  height: 7.2%;
}
.scene-hotspot--bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(255, 208, 82, .48) 0%,
    rgba(255, 178, 35, .27) 30%,
    rgba(255, 166, 18, .10) 62%,
    transparent 100%
  );
  box-shadow: inset 0 -16px 24px rgba(255, 188, 38, .22);
  transition: opacity 210ms ease, background 210ms ease, box-shadow 210ms ease;
}
.scene-hotspot--bottom:hover::after,
.scene-hotspot--bottom:focus-visible::after,
.scene-hotspot--bottom.is-clicked::after { opacity: 1; }
.scene-hotspot--bottom.is-clicked::after {
  background: linear-gradient(to top, rgba(92,255,122,.50), rgba(0,196,67,.12) 60%, transparent 100%);
  box-shadow: inset 0 -16px 24px rgba(0,196,67,.24);
}

/* B01_TIROIRS — retour immersif par le bord supérieur vers B01BUREAU. */
.scene-hotspot--top {
  left: 0;
  top: 0.35%;
  width: 100%;
  height: 7.2%;
}
.scene-hotspot--top::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 208, 82, .48) 0%,
    rgba(255, 178, 35, .27) 30%,
    rgba(255, 166, 18, .10) 62%,
    transparent 100%
  );
  box-shadow: inset 0 16px 24px rgba(255, 188, 38, .22);
  transition: opacity 210ms ease, background 210ms ease, box-shadow 210ms ease;
}
.scene-hotspot--top:hover::after,
.scene-hotspot--top:focus-visible::after,
.scene-hotspot--top.is-clicked::after { opacity: 1; }
.scene-hotspot--top.is-clicked::after {
  background: linear-gradient(to bottom, rgba(92,255,122,.50), rgba(0,196,67,.12) 60%, transparent 100%);
  box-shadow: inset 0 16px 24px rgba(0,196,67,.24);
}

/* Au clic de navigation, tout disparaît immédiatement sauf le hotspot cliqué,
   gardé 115 ms pour rendre visible le retour vert. Aucun élément ne subsiste
   lorsque le fondu de décor commence. */
.scene-hotspots.is-committing .scene-hotspot:not(.is-clicked) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* B01 principal : intensité standard au survol, vert uniquement au clic. */
.scene__stage[data-view="B01"] .scene-hotspot--enter-office-b01.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B01"] .scene-hotspot--enter-office-b01:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
  transform: none !important;
}
.scene__stage[data-view="B01"] .scene-hotspot--enter-office-b01.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
  transform: none !important;
}

/* B03/B07 : même motard de dos, même échelle que la base.
   B07 est simplement remonté de quelques pixels visuels. */
.scene__biker.character-b03 {
  left: 50%;
  bottom: -8.2%;
  width: 25.2%;
  clip-path: none;
}
.scene__biker.character-b07 {
  left: 50%;
  bottom: -6.5%;
  width: 25.2%;
  clip-path: none;
}

/* B01 Bureau : motard adulte debout juste de l'autre côté du bureau.
   Le PNG reste ENTIER : aucune découpe du personnage. Le premier plan du
   bureau (copie parfaitement superposée du décor) crée l'occlusion réelle. */
.scene__biker.character-b01bureau {
  left: 50.5%;
  bottom: calc(-2.9% - 4px);
  width: 29.5%;
  transform: translateX(-50%);
  clip-path: none;
  filter:
    brightness(0.78)
    contrast(0.91)
    saturate(0.88)
    sepia(0.10)
    drop-shadow(0 10px 12px rgba(0, 0, 0, 0.42));
}

/* Premier plan B01 Bureau : calque visuel opaque destiné uniquement à
   l’occlusion du personnage derrière le bureau.
   bureau_foreground.png est le crop exact x=0, y=705, 1672×236 de b01_bureau.png. */
.scene__office-foreground {
  position: absolute;
  z-index: 11;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  visibility: hidden;
}

.scene__office-foreground.is-visible,
.scene__stage[data-view="B01BUREAU"] .scene__office-foreground {
  opacity: 1;
  visibility: visible;
}

/* Le bouton Menu est permanent pendant les transitions ; les hotspots, eux,
   sont coupés de façon stricte avant chaque fondu. */
.scene__stage.is-transitioning .scene-hotspots,
.scene-hotspots.is-suppressed {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .menu-toggle { top: 8px; right: 8px; min-width: 58px; padding: 6px 9px; font-size: 11px; }
  .main-menu { top: 7.5%; }
}


/* ==========================================================
   B01 BUREAU — ajustement fin du motard + hotspot de sortie.
   Aucun PNG n'est modifié : le même motard_face_entier.png sert
   uniquement de masque alpha au halo interactif.
   ========================================================== */
.scene__stage[data-view="B01BUREAU"] .scene-hotspot--leave-office {
  left: 50.5%;
  bottom: calc(-2.9% - 4px);
  width: 29.5%;
  aspect-ratio: 2 / 3;
  transform: translateX(-50%);
  overflow: visible;
}

.scene__stage[data-view="B01BUREAU"] .scene-hotspot--leave-office .scene-hotspot__mask {
  display: block !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

.scene__stage[data-view="B01BUREAU"] .scene-hotspot--leave-office:hover .scene-hotspot__mask,
.scene__stage[data-view="B01BUREAU"] .scene-hotspot--leave-office:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}

.scene__stage[data-view="B01BUREAU"] .scene-hotspot--leave-office.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}


/* ==========================================================
   B01 BUREAU — hotspot écran fourni par l’utilisateur.
   ecran_hotspot.png correspond exactement au crop x=0, y=290, 567×403
   de b01_bureau.png (1672×941). Positionnement sans décalage de pixel.
   ========================================================== */
.scene__stage[data-view="B01BUREAU"] .scene-hotspot--screen {
  left: 0;
  top: 30.818278%;   /* 290 / 941 */
  width: 33.911483%; /* 567 / 1672 */
  height: 42.826780%; /* 403 / 941 */
  overflow: visible;
}

.scene__stage[data-view="B01BUREAU"] .scene-hotspot--screen .scene-hotspot__mask {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

.scene__stage[data-view="B01BUREAU"] .scene-hotspot--screen.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B01BUREAU"] .scene-hotspot--screen:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}

.scene__stage[data-view="B01BUREAU"] .scene-hotspot--screen.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}


/* B01 BUREAU : l’accès aux tiroirs utilise désormais le hotspot de bord
   inférieur générique (.scene-hotspot--bottom), déjà utilisé ailleurs. */

/* ==========================================================
   B01_TIROIRS — hotspot Membres.
   tiroir_membre_hotspot.png est un crop exact du décor B01_TIROIRS
   1672×941 : x=970, y=355, 473×189.
   Le bouton suit exactement ce rectangle et le JavaScript limite ensuite
   l'interaction aux pixels réellement opaques du PNG.
   ========================================================== */
.scene__stage[data-view="B01_TIROIRS"] .scene-hotspot--members {
  left: 58.014354%;  /* 970 / 1672 */
  top: 37.725824%;   /* 355 / 941 */
  width: 28.289474%; /* 473 / 1672 */
  height: 20.085016%; /* 189 / 941 */
  overflow: visible;
}

.scene__stage[data-view="B01_TIROIRS"] .scene-hotspot--members .scene-hotspot__mask {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

.scene__stage[data-view="B01_TIROIRS"] .scene-hotspot--members.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B01_TIROIRS"] .scene-hotspot--members:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}

.scene__stage[data-view="B01_TIROIRS"] .scene-hotspot--members.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}



/* ==========================================================
   B05 — nouveau hotspot détouré du panneau Fontax 3D.
   L'ancien rectangle approximatif a été supprimé. Le PNG existant
   fontax3d_hotspot.png est calé sur le panneau intégré à b05.png.
   Repère image 1672×941 : x=877, y=450, 127×109.
   ========================================================== */
.scene__stage[data-view="B05"] .scene-hotspot--b05-fontax-panel {
  left: 52.452153%;   /* 877 / 1672 */
  top: 47.821467%;    /* 450 / 941 */
  width: 7.595694%;   /* 127 / 1672 */
  height: 11.583422%; /* 109 / 941 */
  overflow: visible;
}

/* ==========================================================
   B05FONTAX — six hotspots du panneau rapproché.
   Tous les placements sont exprimés dans le repère natif 1672×941,
   donc ils suivent exactement le redimensionnement responsive du décor.
   ========================================================== */
.scene__stage[data-view="B05FONTAX"] .scene-hotspot--fontax-pixel-world {
  left: 32.117225%;  /* 537 / 1672 */
  top: 43.995749%;   /* 414 / 941 */
  width: 9.749043%;  /* 163 / 1672 */
  height: 14.771520%;/* 139 / 941 */
}

.scene__stage[data-view="B05FONTAX"] .scene-hotspot--fontax-facebook {
  left: 45.454545%;  /* 760 / 1672 */
  top: 43.995749%;   /* 414 / 941 */
  width: 9.210526%;  /* 154 / 1672 */
  height: 14.877790%;/* 140 / 941 */
}

/* Le fichier demandé fontax3d_hotspot.png est le crop du panneau central
   complet. Pour le hotspot Atelier, on réutilise ce fichier EXISTANT et on
   n'en affiche que la portion correspondant à la plaque Atelier, sans créer
   de masque approximatif supplémentaire. */
.scene__stage[data-view="B05FONTAX"] .scene-hotspot--fontax-atelier {
  left: 57.595694%;  /* 963 / 1672 */
  top: 41.445271%;   /* 390 / 941 */
  width: 10.944976%; /* 183 / 1672 */
  height: 18.278427%;/* 172 / 941 */
  overflow: hidden;
}
.scene__stage[data-view="B05FONTAX"] .scene-hotspot--fontax-atelier .scene-hotspot__mask {
  inset: auto;
  left: -277.049180%; /* -(963 - 456) / 183 */
  top: -127.325581%;  /* -(390 - 171) / 172 */
  width: 413.661202%; /* 757 / 183 */
  height: 377.325581%;/* 649 / 172 */
  object-fit: fill;
}

.scene__stage[data-view="B05FONTAX"] .scene-hotspot--fontax-cults {
  left: 32.117225%;  /* 537 / 1672 */
  top: 65.568544%;   /* 617 / 941 */
  width: 9.629187%;  /* 161 / 1672 */
  height: 15.621679%;/* 147 / 941 */
}

.scene__stage[data-view="B05FONTAX"] .scene-hotspot--fontax-world-facebook {
  left: 45.334928%;  /* 758 / 1672 */
  top: 65.568544%;   /* 617 / 941 */
  width: 9.449761%;  /* 158 / 1672 */
  height: 15.834219%;/* 149 / 941 */
}

.scene__stage[data-view="B05FONTAX"] .scene-hotspot--fontax-terra-live {
  left: 58.433014%;  /* 977 / 1672 */
  top: 65.568544%;   /* 617 / 941 */
  width: 9.330144%;  /* 156 / 1672 */
  height: 10.414453%;/* 98 / 941 */
}

/* ==========================================================
   B05 — porte intérieure fermée / ouverte.
   Les trois PNG fournis sont des crops exacts des décors 1672×941 :
   leur placement est calculé directement à partir de leurs pixels source.
   ========================================================== */
.scene__biker.character-b05 {
  left: 47%;
  bottom: -8.2%;
  width: 25.2%;
  clip-path: none;
}

.scene__stage[data-view="B05"] .scene-hotspot--b05-door-closed {
  left: 49.222488%;   /* 823 / 1672 */
  top: 49.309245%;    /* 464 / 941 */
  width: 2.571770%;   /* 43 / 1672 */
  height: 9.032944%;   /* 85 / 941 */
  overflow: visible;
}

.scene__stage[data-view="B05OPEN"] .scene-hotspot--b05-door-open-left {
  left: 38.456938%;   /* 643 / 1672 */
  top: 48.884166%;    /* 460 / 941 */
  width: 1.315789%;   /* 22 / 1672 */
  height: 8.820404%;  /* 83 / 941 */
  overflow: visible;
}

.scene__stage[data-view="B05OPEN"] .scene-hotspot--b05-door-open-right {
  left: 61.483254%;   /* 1028 / 1672 */
  top: 48.990436%;    /* 461 / 941 */
  width: 1.315789%;   /* 22 / 1672 */
  height: 8.926674%;  /* 84 / 941 */
  overflow: visible;
}

.scene__stage[data-view="B05"] .scene-hotspot--b05-door-closed .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--b05-door-open-left .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--b05-door-open-right .scene-hotspot__mask {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

.scene__stage[data-view="B05"] .scene-hotspot--b05-door-closed:hover .scene-hotspot__mask,
.scene__stage[data-view="B05"] .scene-hotspot--b05-door-closed:focus-visible .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--b05-door-open-left:hover .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--b05-door-open-left:focus-visible .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--b05-door-open-right:hover .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--b05-door-open-right:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
  transform: none !important;
}

.scene__stage[data-view="B05"] .scene-hotspot--b05-door-closed.is-clicked .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--b05-door-open-left.is-clicked .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--b05-door-open-right.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
  transform: none !important;
}


/* ==========================================================
   B01 — hotspot calendrier / événements.
   Nouveau evenements_hotspot.png : crop exact de b01.png 1672×941,
   x=984 y=183, taille 178×189.
   ========================================================== */

.scene__stage[data-view="B01"] .scene-hotspot--events {
  left: 58.851675% !important;
  top: 19.447396% !important;
  width: 10.645933% !important;
  height: 20.085016% !important;
  clip-path: none !important;
  overflow: visible !important;
}

.scene__stage[data-view="B01"] .scene-hotspot--events .scene-hotspot__mask {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

.scene__stage[data-view="B01"] .scene-hotspot--events.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B01"] .scene-hotspot--events:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
  transform: none !important;
}

.scene__stage[data-view="B01"] .scene-hotspot--events.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
  transform: none !important;
}


/* ==========================================================
   B01 — logo Corneillas / Historique du club.
   Crop exact de b01.png : x=715, y=139, 197×214 sur 1672×941.
   ========================================================== */
.scene__stage[data-view="B01"] .scene-hotspot--history {
  left: 42.763158%;   /* 715 / 1672 */
  top: 14.771520%;    /* 139 / 941 */
  width: 11.782297%;  /* 197 / 1672 */
  height: 22.741764%; /* 214 / 941 */
  overflow: visible;
}
.scene__stage[data-view="B01"] .scene-hotspot--history .scene-hotspot__mask {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}
.scene__stage[data-view="B01"] .scene-hotspot--history.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B01"] .scene-hotspot--history:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}
.scene__stage[data-view="B01"] .scene-hotspot--history.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}

/* ==========================================================
   B03 — écran TV / médiathèque vidéo.
   Crop exact de b03.png : x=449, y=177, 388×215 sur 1672×941.
   ========================================================== */
.scene__stage[data-view="B03"] .scene-hotspot--tv {
  left: 26.854067%;   /* 449 / 1672 */
  top: 18.809777%;    /* 177 / 941 */
  width: 23.205742%;  /* 388 / 1672 */
  height: 22.848034%; /* 215 / 941 */
  overflow: visible;
}
.scene__stage[data-view="B03"] .scene-hotspot--tv .scene-hotspot__mask {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}
.scene__stage[data-view="B03"] .scene-hotspot--tv.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B03"] .scene-hotspot--tv:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}
.scene__stage[data-view="B03"] .scene-hotspot--tv.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}

/* ==========================================================
   B01 — guitare suspendue au mur.
   Crop exact de b01.png : x=1192, y=90, 103×239 sur 1672×941.
   ========================================================== */
.scene__stage[data-view="B01"] .scene-hotspot--guitare {
  left: 71.291866%;   /* 1192 / 1672 */
  top: 9.564293%;     /* 90 / 941 */
  width: 6.160287%;   /* 103 / 1672 */
  height: 25.398512%; /* 239 / 941 */
  overflow: visible;
}
.scene__stage[data-view="B01"] .scene-hotspot--guitare .scene-hotspot__mask {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}
.scene__stage[data-view="B01"] .scene-hotspot--guitare.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B01"] .scene-hotspot--guitare:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}
.scene__stage[data-view="B01"] .scene-hotspot--guitare.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}

/* ==========================================================
   B01 — meuble à livres, masque détouré contournant Éric.
   Crop exact de b01.png : x=1322, y=436, 275×291 sur 1672×941.
   ========================================================== */
.scene__stage[data-view="B01"] .scene-hotspot--meuble-livres {
  left: 79.066986%;   /* 1322 / 1672 */
  top: 46.333688%;    /* 436 / 941 */
  width: 16.447368%;  /* 275 / 1672 */
  height: 30.924548%; /* 291 / 941 */
  overflow: visible;
}
.scene__stage[data-view="B01"] .scene-hotspot--meuble-livres .scene-hotspot__mask {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}
.scene__stage[data-view="B01"] .scene-hotspot--meuble-livres.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B01"] .scene-hotspot--meuble-livres:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}
.scene__stage[data-view="B01"] .scene-hotspot--meuble-livres.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}


/* ==========================================================
   HISTORIQUE DU CLUB — overlay restauré.
   Le JS history.js construit dynamiquement ces éléments et bascule is-open.
   ========================================================== */
body.history-modal-open {
  overflow: hidden;
}

.history-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.5vw, 34px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.history-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.history-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .76);
  backdrop-filter: blur(3px);
}

.history-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(920px, 94vw);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 193, 58, .52);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(29, 28, 25, .985), rgba(13, 13, 13, .99));
  color: #f4f0e8;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .72), 0 0 28px rgba(255, 178, 35, .12);
}

.history-modal__header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 193, 58, .24);
  background: rgba(20, 20, 18, .96);
}

.history-modal__eyebrow {
  margin-bottom: 4px;
  color: #e8b44a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.history-modal__header h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.12;
}

.history-modal__close,
.history-modal__return,
.history-modal__audio button {
  border: 1px solid rgba(255, 193, 58, .55);
  border-radius: 8px;
  background: rgba(18, 18, 18, .94);
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.history-modal__close {
  flex: 0 0 auto;
  padding: 8px 11px;
  font-size: 13px;
}

.history-modal__close:hover,
.history-modal__close:focus-visible,
.history-modal__return:hover,
.history-modal__return:focus-visible,
.history-modal__audio button:hover,
.history-modal__audio button:focus-visible {
  border-color: rgba(255, 205, 92, .95);
  background: rgba(56, 42, 15, .96);
  box-shadow: 0 0 12px rgba(255, 184, 36, .34);
  outline: 0;
}

.history-modal__audio {
  flex: 0 0 auto;
  padding: 12px 20px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .20);
}

.history-modal__listen {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 12px;
}

.history-modal__audio-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-modal__audio-controls button {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 13px;
}

.history-modal__progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.history-modal__progress {
  width: 100%;
  accent-color: #e7ad36;
}

.history-modal__time {
  color: #d8d1c3;
  font-size: 12px;
  white-space: nowrap;
}

.history-modal__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px clamp(18px, 3vw, 34px) 26px;
  scrollbar-width: thin;
  scrollbar-color: #a97620 rgba(255,255,255,.08);
}

.history-modal__content p {
  margin: 0 0 1em;
  color: #e9e4da;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.62;
}

.history-modal__content h2 {
  margin: 1.35em 0 .55em;
  color: #f1bf55;
  font-size: clamp(18px, 2vw, 26px);
}

.history-modal__footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px 15px;
  border-top: 1px solid rgba(255, 193, 58, .20);
  background: rgba(16, 16, 15, .98);
}

.history-modal__return {
  padding: 9px 14px;
  font-weight: 800;
}

/* ==========================================================
   MÉDIATHÈQUE VIDÉO B03 — styles restaurés dans l'écran TV.
   ========================================================== */
.tv-library {
  position: absolute;
  z-index: 35;
  left: 26.854067%;   /* écran TV B03 : 449 / 1672 */
  top: 18.809777%;    /* 177 / 941 */
  width: 23.205742%;  /* 388 / 1672 */
  height: 22.848034%; /* 215 / 941 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(5, 7, 8, .97);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.985);
  transform-origin: center;
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .72);
}

.scene__stage:not([data-view="B03"]) .tv-library {
  display: none;
}

.tv-library.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.tv-library__header {
  flex: 0 0 auto;
  min-height: 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 5px 3px 7px;
  background: rgba(10, 10, 10, .92);
  border-bottom: 1px solid rgba(255, 196, 68, .28);
  font-size: clamp(8px, .72vw, 12px);
}

.tv-library__close {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
}

.tv-library__body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: stretch;
}

.tv-library__viewport {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 5px 2px 3px;
}

.tv-library__track {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--tv-items, 3), minmax(0, 1fr));
  gap: 4px;
}

.tv-video-card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 4px;
  background: #101214;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.tv-video-card:hover,
.tv-video-card:focus-visible {
  border-color: rgba(255, 194, 62, .82);
  box-shadow: 0 0 8px rgba(255, 184, 36, .32);
  outline: 0;
}

.tv-video-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

.tv-video-card__text {
  min-height: 0;
  display: block;
  padding: 3px 4px 4px;
  overflow: hidden;
}

.tv-video-card__text strong,
.tv-video-card__text small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-video-card__text strong {
  font-size: clamp(6px, .55vw, 9px);
  line-height: 1.2;
}

.tv-video-card__text small {
  margin-top: 2px;
  color: #c3c6c9;
  font-size: clamp(5px, .46vw, 8px);
}

.tv-library__arrow {
  width: clamp(15px, 1.45vw, 24px);
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .32);
  color: #f5c45f;
  font-size: clamp(15px, 1.6vw, 28px);
  line-height: 1;
  cursor: pointer;
}

.tv-library__arrow:hover:not(:disabled),
.tv-library__arrow:focus-visible:not(:disabled) {
  background: rgba(90, 59, 8, .45);
  color: #fff0bd;
  outline: 0;
}

.tv-library__arrow:disabled {
  opacity: .22;
  cursor: default;
}

.tv-library__status {
  flex: 0 0 auto;
  min-height: 13px;
  padding: 1px 5px 2px;
  color: #bbb;
  font-size: clamp(5px, .48vw, 8px);
  text-align: center;
}

body.video-player-open {
  overflow: hidden;
}

.video-player-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 42px);
}

.video-player-overlay[hidden] {
  display: none !important;
}

.video-player-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .84);
  backdrop-filter: blur(3px);
}

.video-player-overlay__dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 1180px);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid rgba(255, 193, 58, .48);
  border-radius: 10px;
  background: #0b0c0d;
  box-shadow: 0 22px 78px rgba(0,0,0,.75);
}

.video-player-overlay__topbar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px 8px 14px;
  color: #fff;
  background: #111315;
  border-bottom: 1px solid rgba(255, 193, 58, .22);
}

.video-player-overlay__topbar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-player-overlay__close {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(255, 193, 58, .55);
  border-radius: 7px;
  background: #181818;
  color: #fff;
  cursor: pointer;
}

.video-player-overlay__close:hover,
.video-player-overlay__close:focus-visible {
  box-shadow: 0 0 10px rgba(255, 184, 36, .38);
  outline: 0;
}

.video-player-overlay__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-player-overlay__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 760px) {
  .history-modal {
    padding: 8px;
  }

  .history-modal__dialog {
    width: 96vw;
    max-height: 92vh;
  }

  .history-modal__header {
    gap: 10px;
    padding: 13px 12px 11px;
  }

  .history-modal__close {
    padding: 7px 8px;
    font-size: 11px;
  }

  .history-modal__audio {
    padding: 10px 12px;
  }

  .history-modal__audio-controls {
    gap: 5px;
  }

  .history-modal__audio-controls button {
    flex: 1 1 auto;
    min-height: 34px;
    padding-inline: 7px;
    font-size: 11px;
  }

  .history-modal__progress-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .history-modal__content {
    padding: 15px 14px 20px;
  }

  .history-modal__footer {
    padding: 10px 12px 12px;
  }

  .video-player-overlay {
    padding: 8px;
  }

  .video-player-overlay__dialog {
    width: 96vw;
  }

  .video-player-overlay__topbar {
    min-height: 40px;
    padding: 6px 7px 6px 10px;
    font-size: 12px;
  }

  .video-player-overlay__close {
    padding: 6px 8px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-modal,
  .tv-library {
    transition-duration: 1ms !important;
  }
}


/* ==========================================================
   B05 / B05OPEN — Livre d’or.
   Les deux PNG sont des crops exacts du décor 1672×941 :
   livre : x=1089 y=517, 128×66
   pancarte : x=1116 y=373, 97×57
   Le canal alpha pilote le hit-test dans navigation.js.
   ========================================================== */
.scene__stage[data-view="B05"] .scene-hotspot--guestbook-book,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--guestbook-book {
  left: 65.131579%;
  top: 54.941552%;
  width: 7.655502%;
  height: 7.013815%;
  overflow: visible;
}
.scene__stage[data-view="B05"] .scene-hotspot--guestbook-sign,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--guestbook-sign {
  left: 66.746411%;
  top: 39.638682%;
  width: 5.801435%;
  height: 6.057386%;
  overflow: visible;
}
.scene__stage[data-view="B05"] .scene-hotspot--guestbook-book .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--guestbook-book .scene-hotspot__mask,
.scene__stage[data-view="B05"] .scene-hotspot--guestbook-sign .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--guestbook-sign .scene-hotspot__mask {
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  opacity:0!important;
  filter:none!important;
  transform:none!important;
}
.scene__stage[data-view="B05"] .scene-hotspot--guestbook-book.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--guestbook-book.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B05"] .scene-hotspot--guestbook-book:focus-visible .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--guestbook-book:focus-visible .scene-hotspot__mask,
.scene__stage[data-view="B05"] .scene-hotspot--guestbook-sign.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--guestbook-sign.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B05"] .scene-hotspot--guestbook-sign:focus-visible .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--guestbook-sign:focus-visible .scene-hotspot__mask {
  opacity:1!important;
  filter:url(#hotspotGlowAmber)!important;
}
.scene__stage[data-view="B05"] .scene-hotspot--guestbook-book.is-clicked .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--guestbook-book.is-clicked .scene-hotspot__mask,
.scene__stage[data-view="B05"] .scene-hotspot--guestbook-sign.is-clicked .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--guestbook-sign.is-clicked .scene-hotspot__mask {
  opacity:1!important;
  filter:url(#hotspotGlowGreen)!important;
}

/* ==========================================================
   B01 — Charte du club.
   Nouveau charte_hotspot.png : crop exact de b01.png 1672×941,
   x=478 y=177, taille 161×257.
   ========================================================== */
.scene__stage[data-view="B01"] .scene-hotspot--charte {
  left: 28.588517%;
  top: 18.809777%;
  width: 9.629187%;
  height: 27.311371%;
  overflow: visible;
}

.scene__stage[data-view="B01"] .scene-hotspot--charte .scene-hotspot__mask {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

.scene__stage[data-view="B01"] .scene-hotspot--charte.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B01"] .scene-hotspot--charte:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}

.scene__stage[data-view="B01"] .scene-hotspot--charte.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}

/* La Charte réemploie la modale et les contrôles visuels de l'Historique. */
.charter-modal__dialog {
  width: min(920px, 92vw);
}

.charter-modal__content h2 {
  margin-top: 1.15em;
}

.charter-modal__intro,
.charter-modal__closing {
  font-size: 1.04em;
}

.charter-modal__motto {
  margin: 1.2rem 0 1.35rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid rgba(255, 190, 58, 0.42);
  border-bottom: 1px solid rgba(255, 190, 58, 0.42);
  text-align: center;
}

.charter-modal__motto h2 {
  margin: 0 0 0.45rem;
}

.charter-modal__motto p {
  margin: 0.4rem 0;
}

.charter-modal__motto p:first-of-type,
.charter-modal__closing {
  letter-spacing: 0.045em;
}

@media (max-width: 700px) {
  .charter-modal__motto {
    padding: 0.75rem 0.7rem;
  }

  .charter-modal__motto p:first-of-type,
  .charter-modal__closing {
    letter-spacing: 0.02em;
  }
}


/* ==========================================================
   B05 / B05OPEN — SONO DU CLUB
   Crop exact de b05.png : x=66, y=389, 292×407 sur 1672×941.
   Le PNG détouré utilise la détection alpha du système existant.
   ========================================================== */
.scene__stage[data-view="B05"] .scene-hotspot--sono,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--sono {
  left: 3.947368%;
  top: 41.339001%;
  width: 17.464115%;
  height: 43.251860%;
  overflow: visible;
}

.scene__stage[data-view="B05"] .scene-hotspot--sono .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--sono .scene-hotspot__mask {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

.scene__stage[data-view="B05"] .scene-hotspot--sono.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B05"] .scene-hotspot--sono:focus-visible .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--sono.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--sono:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}

.scene__stage[data-view="B05"] .scene-hotspot--sono.is-clicked .scene-hotspot__mask,
.scene__stage[data-view="B05OPEN"] .scene-hotspot--sono.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}

/* Lecteur intégré — réutilise le lecteur audio partagé de navigation.js. */
.sono-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 34px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.sono-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sono-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(2px);
}

.sono-modal__panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 720px);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #f4f0e5;
  background:
    linear-gradient(180deg, rgba(40,40,38,.98), rgba(14,14,14,.99));
  border: 1px solid rgba(226, 168, 47, .62);
  border-radius: 10px;
  box-shadow: 0 20px 70px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.035);
}

.sono-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid rgba(226, 168, 47, .25);
  background: rgba(0,0,0,.28);
}

.sono-modal__title {
  margin: 0;
  font-size: clamp(17px, 2.4vw, 24px);
  letter-spacing: .14em;
  color: #e5b24c;
}

.sono-modal__close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(226,168,47,.6);
  border-radius: 50%;
  background: #171717;
  color: #fff;
  font-size: 25px;
  line-height: 34px;
  cursor: pointer;
}

.sono-modal__now {
  min-height: 44px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #d9d1bf;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.sono-modal__now strong { color: #fff1c8; }

.sono-modal__tracks {
  margin: 0;
  padding: 8px 10px;
  list-style: none;
  overflow-y: auto;
  min-height: 0;
}

.sono-track {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.sono-track.is-current {
  background: rgba(226,168,47,.11);
  box-shadow: inset 3px 0 0 rgba(226,168,47,.85);
}

.sono-track__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sono-track__play,
.sono-modal__control {
  border: 1px solid rgba(226,168,47,.45);
  border-radius: 6px;
  background: rgba(16,16,16,.9);
  color: #f7f2e8;
  cursor: pointer;
  font: inherit;
}

.sono-track__play {
  padding: 7px 11px;
}

.sono-track__play:hover,
.sono-track__play:focus-visible,
.sono-modal__control:hover,
.sono-modal__control:focus-visible,
.sono-modal__close:hover,
.sono-modal__close:focus-visible {
  outline: none;
  border-color: rgba(244,191,80,.9);
  box-shadow: 0 0 10px rgba(226,168,47,.28);
}

.sono-modal__controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(226,168,47,.2);
  background: rgba(0,0,0,.24);
}

.sono-modal__control {
  min-height: 42px;
  padding: 8px 10px;
}

@media (max-width: 560px) {
  .sono-modal { padding: 8px; }
  .sono-modal__panel { width: 96vw; max-height: 90vh; }
  .sono-modal__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sono-track { gap: 7px; padding-inline: 6px; }
  .sono-track__play { padding-inline: 8px; }
}

/* ==========================================================
   SONO — volume + programmation locale de la playlist
   ========================================================== */
.sono-modal__volume {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) 58px;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #e5ddca;
}
.sono-modal__volume input[type="range"] { width: 100%; accent-color: #e0aa3e; cursor: pointer; }
.sono-modal__volume output { text-align: right; color: #fff1c8; font-variant-numeric: tabular-nums; }
.sono-modal__program-help { padding: 8px 18px; color: #bfb6a4; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sono-track { grid-template-columns: 28px minmax(0,1fr) auto auto; }
.sono-track__select { display:grid; place-items:center; }
.sono-track__select input { width:18px; height:18px; accent-color:#e0aa3e; cursor:pointer; }
.sono-track__order { display:flex; gap:4px; }
.sono-track__order button { width:30px; height:30px; padding:0; border:1px solid rgba(226,168,47,.35); border-radius:5px; background:#151515; color:#f7f2e8; cursor:pointer; }
.sono-track__order button:hover,.sono-track__order button:focus-visible { outline:0; border-color:rgba(244,191,80,.9); box-shadow:0 0 8px rgba(226,168,47,.22); }
@media (max-width:560px) {
  .sono-modal__volume { grid-template-columns:auto 1fr 50px; padding-inline:12px; }
  .sono-modal__program-help { padding-inline:12px; }
  .sono-track { grid-template-columns:24px minmax(0,1fr) auto; }
  .sono-track__order { grid-column:2; }
  .sono-track__play { grid-column:3; grid-row:1 / span 2; }
}


/* A01 — corneilles de l’enseigne : crops exacts sur 1672×941. */
.scene-hotspot--corneille-gauche {
  left: 37.260766%;
  top: 28.799150%;
  width: 7.595694%;
  height: 7.013815%;
}

.scene-hotspot--corneille-droite {
  left: 60.586124%;
  top: 28.799150%;
  width: 7.117225%;
  height: 7.120085%;
}

/* B05OPEN — sortie du club vers A01 : crop exact x=693 y=249, 308×446. */
.scene-hotspot--sortie {
  left: 41.447368%;
  top: 26.461211%;
  width: 18.421053%;
  height: 47.396387%;
}


/* B01SCREEN — bouton Marche/Arrêt intégré au faux bureau Windows. */
.screen-exit-button { position:absolute; z-index:60; right:7.4%; bottom:8.2%; top:auto; left:auto; width:clamp(38px,3.3vw,52px); height:clamp(38px,3.3vw,52px); padding:0; border:1px solid rgba(255,255,255,.34); border-radius:50%; background:rgba(18,25,34,.72); color:rgba(255,255,255,.96); display:grid; place-items:center; font:400 clamp(23px,2.1vw,31px)/1 "Segoe UI Symbol","Segoe UI",sans-serif; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.05); transition:background 140ms ease,border-color 140ms ease,box-shadow 140ms ease,transform 140ms ease; pointer-events:auto; }
.screen-exit-button[hidden]{display:none!important;}
.screen-exit-button:hover,.screen-exit-button:focus-visible{outline:0;background:rgba(31,48,68,.90);border-color:rgba(206,231,255,.78);box-shadow:0 0 0 1px rgba(121,183,238,.30),0 0 16px rgba(104,176,238,.38),0 3px 12px rgba(0,0,0,.38);transform:translateY(-1px);}
.screen-exit-button:active{transform:translateY(0) scale(.96);background:rgba(52,68,86,.94);}
@media(max-width:640px){.screen-exit-button{right:7.2%;bottom:8%;width:38px;height:38px;font-size:23px;}}


/* ==========================================================
   B03 — menu multimédia intermédiaire TV : VIDÉOS / PHOTOS.
   Réutilise exactement l'emprise de l'écran TV existant.
   ========================================================== */
.tv-media-menu {
  position: absolute;
  z-index: 36;
  left: 26.854067%;
  top: 18.809777%;
  width: 23.205742%;
  height: 22.848034%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 2px;
  background: radial-gradient(circle at 50% 45%, rgba(52, 42, 20, .96), rgba(5, 7, 8, .985) 68%);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.985);
  transform-origin: center;
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  box-shadow: inset 0 0 20px rgba(0,0,0,.8);
}

.scene__stage:not([data-view="B03"]) .tv-media-menu {
  display: none;
}

.tv-media-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.tv-media-menu__header {
  flex: 0 0 auto;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 5px 3px 7px;
  border-bottom: 1px solid rgba(255,196,68,.34);
  background: rgba(10,10,10,.94);
  color: #f5d28b;
  font-size: clamp(7px,.68vw,11px);
  letter-spacing: .04em;
}

.tv-media-menu__close {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
}

.tv-media-menu__choices {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px,.65vw,11px);
  align-items: center;
  padding: clamp(8px,.9vw,15px);
}

.tv-media-menu__choice {
  min-width: 0;
  min-height: 58%;
  padding: 8px 4px;
  border: 1px solid rgba(255,193,58,.62);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(44,45,45,.96), rgba(15,16,17,.98));
  color: #f7d786;
  font-weight: 900;
  font-size: clamp(8px,.85vw,14px);
  letter-spacing: .055em;
  cursor: pointer;
  box-shadow: inset 0 0 12px rgba(255,181,38,.05);
}

.tv-media-menu__choice:hover,
.tv-media-menu__choice:focus-visible {
  color: #fff3c9;
  border-color: rgba(255,199,76,.95);
  box-shadow: 0 0 12px rgba(255,184,36,.42), inset 0 0 14px rgba(255,184,36,.08);
  outline: 0;
}

body.tv-photos-open { overflow: hidden; }

.tv-photos-overlay {
  position: fixed;
  inset: 0;
  z-index: 5900;
  display: grid;
  place-items: center;
  padding: clamp(8px,2vw,24px);
}

.tv-photos-overlay[hidden] { display: none !important; }

.tv-photos-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(3px);
}

.tv-photos-overlay__dialog {
  position: relative;
  z-index: 1;
  width: min(96vw, 1480px);
  height: min(94vh, 980px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,193,58,.48);
  border-radius: 10px;
  background: #0b0c0d;
  box-shadow: 0 22px 78px rgba(0,0,0,.75);
}

.tv-photos-overlay__topbar {
  flex: 0 0 auto;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px 8px 14px;
  color: #fff;
  background: #111315;
  border-bottom: 1px solid rgba(255,193,58,.22);
}

.tv-photos-overlay__back {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid rgba(255,193,58,.55);
  border-radius: 7px;
  background: #181818;
  color: #fff;
  cursor: pointer;
}

.tv-photos-overlay__back:hover,
.tv-photos-overlay__back:focus-visible {
  box-shadow: 0 0 10px rgba(255,184,36,.38);
  outline: 0;
}

.tv-photos-overlay__frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #0e1011;
}

.tv-photos-overlay__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0e1011;
}

@media (max-width: 760px) {
  .tv-media-menu__choices {
    gap: 4px;
    padding: 5px;
  }
  .tv-media-menu__choice {
    min-height: 52%;
    padding: 4px 2px;
    border-radius: 4px;
    font-size: clamp(6px,1.45vw,9px);
  }
  .tv-photos-overlay {
    padding: 4px;
  }
  .tv-photos-overlay__dialog {
    width: 98vw;
    height: 96vh;
  }
  .tv-photos-overlay__topbar {
    min-height: 40px;
    padding: 6px 7px 6px 10px;
    font-size: 12px;
  }
  .tv-photos-overlay__back {
    padding: 6px 8px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tv-media-menu { transition-duration: 1ms !important; }
}

/* ==========================================================
   ACCUEIL / AIDE À LA NAVIGATION
   Petite fenêtre non bloquante, réouvrable depuis le menu.
   ========================================================== */
.welcome-help {
  position: absolute;
  z-index: 9800;
  left: 50%;
  top: clamp(62px, 9%, 92px);
  width: min(520px, calc(100% - 28px));
  max-height: calc(100% - 90px);
  transform: translate(-50%, -8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.welcome-help.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.welcome-help__card {
  position: relative;
  max-height: inherit;
  overflow-y: auto;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(255, 190, 65, .72);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(28, 30, 32, .97), rgba(9, 11, 13, .97));
  box-shadow: 0 18px 55px rgba(0, 0, 0, .56), 0 0 24px rgba(230, 158, 33, .12);
  color: #f5f1e8;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  scrollbar-width: thin;
  scrollbar-color: rgba(221, 158, 43, .72) rgba(255,255,255,.06);
}

.welcome-help__close {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 193, 73, .58);
  border-radius: 50%;
  background: rgba(10, 11, 12, .86);
  color: #f6e6bd;
  font-size: 24px;
  line-height: 30px;
  cursor: pointer;
}

.welcome-help__close:hover,
.welcome-help__close:focus-visible {
  color: #ffd574;
  border-color: rgba(255, 205, 90, .95);
  box-shadow: 0 0 10px rgba(255, 180, 40, .34);
  outline: 0;
}

.welcome-help h2 {
  margin: 0 40px 15px 0;
  color: #f0b342;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.15;
}

.welcome-help__content p {
  margin: 0 0 11px;
  color: #e4e0d8;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.55;
}

.welcome-help__content p:last-child { margin-bottom: 0; }
.welcome-help__content strong { color: #fff1ca; }

.welcome-help__audio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 190, 65, .18);
}

.welcome-help__audio button {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 190, 65, .48);
  border-radius: 7px;
  background: rgba(255, 176, 39, .09);
  color: #f8e8c0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.welcome-help__audio button:hover,
.welcome-help__audio button:focus-visible {
  background: rgba(255, 176, 39, .17);
  border-color: rgba(255, 204, 102, .86);
  outline: 0;
}

#welcomeAudioStatus {
  margin-left: auto;
  color: #aaa69e;
  font-size: 11px;
}

.welcome-help__remember {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 15px;
  color: #c8c3b9;
  font-size: 12px;
  line-height: 1.35;
  cursor: pointer;
}

.welcome-help__remember input {
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: #d69a29;
}

.main-menu__item--welcome {
  color: #f4d48f;
}

@media (max-width: 700px) {
  .welcome-help {
    top: 52px;
    width: calc(100% - 16px);
    max-height: calc(100% - 62px);
  }

  .welcome-help__card {
    padding: 17px 15px;
    border-radius: 12px;
  }

  .welcome-help h2 { margin-right: 34px; }
  #welcomeAudioStatus { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-help { transition-duration: 1ms !important; }
}


/* === Faux bureau Windows — raccourcis images + Clubs Moto === */
.windows-desktop-ui {
  position: absolute;
  inset: 0;
  z-index: 43;
  pointer-events: none;
  font-family: "Segoe UI", Arial, sans-serif;
}
.windows-desktop-ui[hidden] { display: none !important; }

.windows-desktop-shortcut {
  position: absolute;
  pointer-events: auto;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  overflow: hidden;
  cursor: default;
  appearance: none;
}
.windows-desktop-shortcut img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: 1;
  pointer-events: none;
  transition: filter 120ms ease;
}
.windows-desktop-shortcut:hover,
.windows-desktop-shortcut:focus-visible {
  background: rgba(85, 158, 235, .20);
  border-color: rgba(210, 235, 255, .62);
  box-shadow: 0 0 0 1px rgba(75, 145, 220, .20), inset 0 0 14px rgba(185, 220, 255, .12);
  outline: none;
}
.windows-desktop-shortcut:hover img,
.windows-desktop-shortcut:focus-visible img {
  filter: brightness(1.08) saturate(1.04);
}
.windows-desktop-shortcut:active {
  background: rgba(70, 145, 225, .30);
  border-color: rgba(220, 240, 255, .76);
}

.windows-desktop-shortcut.is-selected {
  background: rgba(85, 158, 235, .22);
  border-color: rgba(210, 235, 255, .70);
  box-shadow: 0 0 0 1px rgba(75, 145, 220, .22), inset 0 0 14px rgba(185, 220, 255, .14);
}
.windows-desktop-shortcut.is-selected img {
  filter: brightness(1.06) saturate(1.03);
}

.windows-desktop-shortcut--clubs {
  left: 15.251196%;
  top: 16.896918%;
  width: 15.789474%;
  height: 29.649309%;
}
.windows-desktop-shortcut--facebook {
  left: 33.911483%;
  top: 17.003188%;
  width: 14.952153%;
  height: 30.180659%;
}
.windows-desktop-shortcut--photos {
  left: 53.169856%;
  top: 18.278427%;
  width: 12.978469%;
  height: 27.842720%;
}
.windows-desktop-shortcut--videos {
  left: 71.291866%;
  top: 19.234856%;
  width: 13.337321%;
  height: 29.436769%;
}
.windows-desktop-shortcut--events {
  left: 14.892344%;
  top: 49.946865%;
  width: 14.533493%;
  height: 27.842720%;
}
.windows-desktop-shortcut--weather {
  left: 34.868421%;
  top: 49.946865%;
  width: 13.157895%;
  height: 27.842720%;
}
.windows-desktop-shortcut--maps {
  left: 52.212919%;
  top: 49.840595%;
  width: 10.885167%;
  height: 27.949000%;
}
.windows-desktop-shortcut--transparent {
  overflow: visible;
}
.windows-desktop-shortcut--transparent::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.windows-clubs-window,
.windows-app-window {
  pointer-events: auto;
  position: absolute;
  left: 11%;
  top: 8%;
  width: 78%;
  height: 80%;
  min-height: 300px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 9px;
  background: rgba(245,248,252,.98);
  box-shadow: 0 20px 55px rgba(0,0,0,.48);
  overflow: hidden;
  color: #20242a;
}
.windows-clubs-window[hidden],
.windows-app-window[hidden] { display: none !important; }

.windows-clubs-window__bar,
.windows-app-window__bar {
  height: 44px;
  display: grid;
  grid-template-columns: 1fr 46px;
  align-items: center;
  background: rgba(250,251,253,.99);
  border-bottom: 1px solid #cfd5dd;
}
.windows-app-window__bar { grid-template-columns: 1fr 46px; }
.windows-clubs-window__bar strong,
.windows-app-window__bar strong {
  padding-left: 10px;
  font-size: 15px;
  font-weight: 600;
}
.windows-clubs-window__close,
.windows-app-window__close {
  height: 100%;
  border: 0;
  background: transparent;
  color: #20242a;
  font-size: 22px;
  cursor: pointer;
}
.windows-clubs-window__close:hover,
.windows-app-window__close:hover {
  background: #d93a32;
  color: #fff;
}
.windows-clubs-window__body {
  height: calc(100% - 44px);
  overflow: auto;
  padding: 18px;
}
.windows-clubs-help {
  margin: 0 0 14px;
  padding: 9px 11px;
  border: 1px solid #d7dde5;
  border-radius: 6px;
  background: #f7f9fc;
  color: #4b5664;
  font: 13px/1.4 "Segoe UI", Arial, sans-serif;
}
.windows-clubs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 20px;
}
.windows-club-icon {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 7px;
  padding: 10px 6px;
  color: #20242a;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  text-decoration: none;
  font: 500 13px/1.25 "Segoe UI",Arial,sans-serif;
}
.windows-club-icon:disabled {
  cursor: default;
  opacity: .58;
}
.windows-club-icon:disabled:hover {
  background: transparent;
  border-color: transparent;
}
.windows-club-icon:hover,
.windows-club-icon:focus-visible {
  background: #dcecff;
  border-color: #8bbcff;
  outline: 0;
}
.windows-club-icon img,
.windows-club-icon__fallback {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: grid;
  place-items: center;
  font-size: 45px;
}
.windows-clubs-status {
  text-align: center;
  color: #59616d;
  padding: 16px;
}
.windows-clubs-status:empty { display: none; }

.windows-app-window iframe {
  width: 100%;
  height: calc(100% - 44px);
  display: block;
  border: 0;
  background: #fff;
}
.windows-app-window > [hidden] { display: none !important; }

.windows-map-app,
.windows-weather-app {
  height: calc(100% - 44px);
  background: #f4f7fb;
}
.windows-map-app {
  display: flex;
  flex-direction: column;
}
.windows-map-app__toolbar {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  padding: 10px;
  background: #eef2f7;
  border-bottom: 1px solid #cfd5dd;
}
.windows-map-app__search,
.windows-map-app__route,
.windows-weather-app__search {
  display: flex;
  gap: 7px;
  align-items: center;
}
.windows-map-app input,
.windows-weather-app input {
  min-width: 0;
  flex: 1 1 auto;
  height: 34px;
  padding: 6px 9px;
  border: 1px solid #aeb8c4;
  border-radius: 5px;
  background: #fff;
  color: #18202a;
  font: 14px "Segoe UI", Arial, sans-serif;
}
.windows-map-app button,
.windows-weather-app button {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #8ca2ba;
  border-radius: 5px;
  background: #fff;
  color: #172231;
  cursor: pointer;
}
.windows-map-app button:hover,
.windows-weather-app button:hover { background: #dfeaf7; }
.windows-map-app #windowsMapFrame {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  border: 0;
}
.windows-weather-app {
  overflow: auto;
  padding: 12px;
  color: #18202a;
}
.windows-weather-app__search {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 10px;
  background: #f4f7fb;
}
.windows-weather-app__status {
  min-height: 24px;
  padding: 4px 2px 9px;
  color: #5c6773;
  font-size: 13px;
}
.windows-weather-current {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #d5dce5;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(20,35,50,.08);
}
.windows-weather-current__icon {
  font-size: clamp(48px, 7vw, 78px);
  line-height: 1;
}
.windows-weather-current h2 {
  margin: 0 0 5px;
  font-size: clamp(20px, 2.2vw, 30px);
}
.windows-weather-current__temp {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 600;
}
.windows-weather-current__meta {
  margin-top: 7px;
  color: #506071;
  line-height: 1.5;
}
.windows-weather-forecast {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 9px;
  margin-top: 12px;
}
.windows-weather-day {
  padding: 10px 8px;
  border: 1px solid #d5dce5;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}
.windows-weather-day__icon { font-size: 28px; margin: 5px 0; }
.windows-weather-day__temps { font-weight: 600; }
.windows-weather-day__rain { color: #536679; font-size: 12px; margin-top: 3px; }

/* La médiathèque vidéo existante est réutilisée aussi dans le faux ordinateur. */
.scene__stage[data-view="B01SCREEN"] .tv-library {
  display: flex;
  left: 11%;
  top: 8%;
  width: 78%;
  height: 80%;
  border-radius: 8px;
  z-index: 45;
}
.scene__stage:not([data-view="B03"]):not([data-view="B01SCREEN"]) .tv-library {
  display: none;
}

@media (max-width: 700px) {
  .windows-clubs-window,
  .windows-app-window {
    left: 3%;
    top: 7%;
    width: 94%;
    height: 82%;
    min-height: 0;
  }
  .windows-clubs-window__body { padding: 12px; }
  .windows-clubs-grid {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 12px;
  }
  .windows-club-icon img,
  .windows-club-icon__fallback {
    width: 58px;
    height: 58px;
  }
  .scene__stage[data-view="B01SCREEN"] .tv-library {
    left: 3%;
    top: 7%;
    width: 94%;
    height: 82%;
  }
  .windows-map-app__search,
  .windows-map-app__route,
  .windows-weather-app__search {
    flex-wrap: wrap;
  }
  .windows-map-app__route input,
  .windows-weather-app__search input {
    flex: 1 1 42%;
  }
  .windows-weather-forecast {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }
}

/* Aperçu agrandi des vidéos dans l'écran TV — accessibilité/lisibilité. */
.tv-video-preview {
  position: absolute;
  z-index: 80;
  top: 27px;
  max-width: calc(100% - 48px);
  overflow: hidden;
  border: 1px solid rgba(255, 198, 72, .92);
  border-radius: 6px;
  background: rgba(7, 9, 11, .98);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .78), 0 0 14px rgba(255, 184, 42, .30);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.94) translateY(3px);
  transform-origin: center;
  transition: opacity 120ms ease, transform 140ms ease, visibility 120ms ease;
}

.tv-video-preview.is-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

.tv-video-preview__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

.tv-video-preview__info {
  padding: 6px 8px 7px;
  background: linear-gradient(180deg, rgba(21, 23, 26, .98), rgba(8, 9, 11, .99));
}

.tv-video-preview__title {
  display: block;
  color: #fff;
  font-size: clamp(11px, .88vw, 15px);
  line-height: 1.25;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-video-preview__category {
  display: block;
  margin-top: 3px;
  color: #f4c65f;
  font-size: clamp(9px, .68vw, 12px);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: none), (pointer: coarse) {
  .tv-video-card {
    min-height: 44px;
  }

  .tv-video-preview {
    top: 26px;
  }
}

/* ==========================================================
   B07 — panneaux dynamiques Constructeurs / Liens utiles
   Les coordonnées sont relatives au stage 1672 × 941.
   Le décor reste intact : seuls les contenus dynamiques sont superposés.
   ========================================================== */
.b07-panels-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  pointer-events: none;
}

.scene__stage[data-view="B07"] .b07-panels-layer {
  display: block;
}

.b07-dynamic-panel {
  position: absolute;
  pointer-events: none;
}

/* Panneau Publicités rectangulaire — cadrage recalé sur le cadre bois visible B07.
   Crop décor 1672×941 : x=73, y=139, w=457, h=241. */
.b07-dynamic-panel--pubs {
  left: 4.3660%;
  top: 14.7715%;
  width: 27.3325%;
  height: 25.6111%;
}

/* Panneau Constructeurs sur le mur droit — placement de la vue B07 validée. */
.b07-dynamic-panel--constructeurs {
  left: 66.15%;
  top: 13.75%;
  width: 27.10%;
  height: 27.25%;
}

.b07-panel-zoom-trigger {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  pointer-events: auto;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}

.b07-dynamic-panel--pubs .b07-panel-zoom-trigger {
  border-radius: 8px;
}

/* Halo plus franc autour des deux panneaux, sans remplir leur surface. */
.b07-panel-zoom-trigger:hover,
.b07-panel-zoom-trigger:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 2px rgba(255, 220, 105, .92),
    0 0 10px 3px rgba(255, 189, 47, .72),
    0 0 26px 8px rgba(255, 151, 24, .46),
    inset 0 0 18px rgba(255, 200, 72, .13);
}

/* Infobulle commune aux deux panneaux. */
.b07-panel-zoom-trigger::after {
  content: "Agrandir le panneau";
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, 4px);
  z-index: 5;
  padding: 7px 11px;
  border: 1px solid rgba(255, 210, 88, .78);
  border-radius: 6px;
  background: rgba(16, 16, 14, .94);
  color: #fff1bf;
  font-size: clamp(11px, .82vw, 14px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  transition: opacity 120ms ease, transform 120ms ease;
}

.b07-panel-zoom-trigger:hover::after,
.b07-panel-zoom-trigger:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.b07-panel-grid {
  --panel-cols: 4;
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--panel-cols), minmax(0, 1fr));
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  gap: 5.5%;
  pointer-events: none;
}

/* La zone utile du panneau métallique commence sous son titre imprimé. */
.b07-dynamic-panel--constructeurs .b07-panel-grid {
  left: 5.5%;
  right: 5.5%;
  top: 24%;
  bottom: 7%;
}

/* Grande surface utile du nouveau panneau Publicités rectangulaire. */
.b07-dynamic-panel--pubs .b07-panel-grid {
  left: 5.5%;
  right: 5.5%;
  top: 8%;
  bottom: 8%;
}

.b07-panel-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-decoration: none;
  pointer-events: auto;
  cursor: default;
  transition: transform 130ms ease, filter 130ms ease, background 130ms ease;
  -webkit-tap-highlight-color: transparent;
}

.b07-panel-logo.is-linked {
  cursor: pointer;
}

.b07-panel-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.28));
}

.b07-panel-logo:hover,
.b07-panel-logo:focus-visible {
  outline: 0;
  transform: scale(1.08);
  background: rgba(255, 208, 92, .12);
  filter: drop-shadow(0 0 5px rgba(255, 190, 58, .75));
}

.b07-panel-logo__fallback {
  color: #1b1b1b;
  font-size: clamp(6px, .72vw, 12px);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
}

/* Overlay agrandi commun aux deux panneaux. */
.b07-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2vw, 28px);
  background: rgba(2, 3, 4, .78);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.b07-panel-overlay[hidden] { display: none !important; }
.b07-panel-overlay.is-open { opacity: 1; }

.b07-panel-overlay__dialog {
  width: min(96vw, 1460px);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(226, 177, 70, .65);
  border-radius: 14px;
  background: #101112;
  box-shadow: 0 24px 80px rgba(0,0,0,.62), 0 0 22px rgba(210,145,35,.14);
  transform: scale(.975);
  transition: transform 180ms ease;
}

.b07-panel-overlay.is-open .b07-panel-overlay__dialog { transform: scale(1); }

.b07-panel-overlay__bar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px 8px 16px;
  color: #f5e4ba;
  background: linear-gradient(#292725, #171717);
  border-bottom: 1px solid rgba(226,177,70,.35);
}

.b07-panel-overlay__bar strong {
  font-size: clamp(16px, 1.5vw, 23px);
  letter-spacing: .04em;
}

.b07-panel-overlay__close {
  width: 40px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: #2a2a2a;
  color: #fff;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.b07-panel-overlay__close:hover,
.b07-panel-overlay__close:focus-visible { background: #8f2020; outline: none; }

.b07-panel-overlay__scroll {
  min-height: 0;
  overflow: auto;
  padding: clamp(10px, 2vw, 20px);
}

.b07-panel-overlay__canvas {
  position: relative;
  margin: 0 auto;
  width: min(100%, 1320px);
}

.b07-panel-overlay__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.b07-panel-overlay__grid {
  --panel-cols: 4;
  position: absolute;
  display: grid;
  grid-template-columns: repeat(var(--panel-cols), minmax(0, 1fr));
  align-content: center;
  gap: clamp(7px, 1.1vw, 16px);
}

.b07-panel-overlay[data-panel="constructeurs"] .b07-panel-overlay__grid {
  left: 5.5%; right: 5.5%; top: 24%; bottom: 7%;
}

.b07-panel-overlay[data-panel="liens_utiles"] .b07-panel-overlay__grid {
  left: 10%; right: 10%; top: 14%; bottom: 14%;
}

.b07-panel-zoom-item {
  min-width: 0;
  min-height: 74px;
  display: grid;
  grid-template-rows: minmax(38px, 1fr) auto auto;
  align-items: center;
  justify-items: center;
  gap: 3px;
  padding: 7px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 9px;
  color: #1b1b1b;
  background: rgba(255,255,255,.24);
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  transition: transform 130ms ease, background 130ms ease, box-shadow 130ms ease;
}

.b07-panel-zoom-item.is-linked { cursor: pointer; }
.b07-panel-zoom-item:hover,
.b07-panel-zoom-item:focus-visible {
  outline: 0;
  transform: translateY(-2px) scale(1.025);
  background: rgba(255,255,255,.48);
  box-shadow: 0 5px 14px rgba(0,0,0,.18), 0 0 0 2px rgba(220,158,35,.42);
}

.b07-panel-zoom-item img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.b07-panel-zoom-item strong {
  max-width: 100%;
  font-size: clamp(10px, 1vw, 16px);
  line-height: 1.05;
}

.b07-panel-zoom-item__category {
  max-width: 100%;
  font-size: clamp(8px, .82vw, 13px);
  line-height: 1.05;
  opacity: .76;
}

.b07-panel-zoom-item__description {
  display: none;
}

.b07-panel-overlay__status {
  padding: 10px;
  color: #ddd;
  text-align: center;
  font-size: 14px;
}

@media (max-width: 760px) {
  .b07-panel-overlay { align-items: stretch; padding: 7px; }
  .b07-panel-overlay__dialog { width: 100%; max-height: 100%; border-radius: 10px; }
  .b07-panel-overlay__scroll { padding: 8px; }
  .b07-panel-overlay__canvas { min-width: 680px; }
  .b07-panel-overlay__scroll { overflow: auto; }
  .b07-panel-zoom-item { min-height: 66px; padding: 5px; }
  .b07-panel-zoom-item img { max-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .b07-panel-overlay,
  .b07-panel-overlay__dialog,
  .b07-panel-logo,
  .b07-panel-zoom-item { transition-duration: 1ms !important; }
}

/* ============================================================
   PRESENCE EN LIGNE — compacte dans la barre haute
============================================================ */
.online-presence--topbar {
  position: relative;
  z-index: 9510;
  flex: 0 0 auto;
  pointer-events: auto;
}
.online-presence--topbar[hidden] { display: none !important; }
.online-presence__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(10,12,14,.76);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 5px 18px rgba(0,0,0,.28);
  color: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.online-presence__toggle:hover,
.online-presence__toggle:focus-visible,
.online-presence__toggle[aria-expanded="true"] {
  border-color: rgba(255,196,70,.65);
  box-shadow: 0 0 0 1px rgba(255,196,70,.18), 0 5px 18px rgba(0,0,0,.28);
}
.online-presence__toggle:focus-visible { outline: 2px solid rgba(255,196,70,.78); outline-offset: 2px; }
.online-presence__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52d67c;
  box-shadow: 0 0 8px rgba(82,214,124,.72);
  flex: 0 0 auto;
}
.online-presence__count { color: #fff; }
.online-presence__label { color: rgba(255,255,255,.88); }
.online-presence__arrow {
  color: #e6b94d;
  font-size: .67rem;
  transition: transform 140ms ease;
}
.online-presence__toggle[aria-expanded="true"] .online-presence__arrow { transform: rotate(180deg); }
.online-presence__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(240px, calc(100vw - 20px));
  padding: 8px;
  border: 1px solid rgba(255,196,70,.34);
  border-radius: 11px;
  background: rgba(10,12,14,.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(0,0,0,.42);
  color: #fff;
}
.online-presence__dropdown[hidden] { display: none !important; }
.online-presence__dropdown-title {
  padding: 3px 6px 7px;
  color: #d8b45c;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.online-presence__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 230px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.online-presence__list li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 6px 8px;
  border-top: 1px solid rgba(255,255,255,.075);
  color: rgba(255,255,255,.9);
  font-size: .78rem;
}
.online-presence__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #52d67c;
}
.online-presence__list li.is-empty { color: rgba(255,255,255,.62); }
.online-presence__list li.is-empty::before { background: #727980; }

@media (max-width: 700px) {
  .scene-topbar { flex-wrap: wrap; }
  .online-presence__toggle {
    min-height: 32px;
    padding: 5px 8px;
    gap: 5px;
    font-size: .69rem;
  }
  .online-presence__label { font-size: 0; }
  .online-presence__label::after { content: "en ligne"; font-size: .69rem; }
  .online-presence__dropdown {
    right: auto;
    left: 0;
    width: min(220px, calc(100vw - 16px));
  }
  .online-presence__list { max-height: 190px; }
}



/* ============================================================
   B07 — TABLETTE TUTORIELS MÉCANIQUE
   ============================================================ */

/* Tablette visible dans b07.png (1672×941).
   Nouveau hotspot RGBA corrigé : crop exact x=1292, y=429, 139×344.
   Le JavaScript limite l'interaction aux pixels réellement opaques du PNG :
   le fond transparent autour de la tablette et du trépied n'est pas cliquable. */
.scene__stage[data-view="B07"] .scene-hotspot--tablette {
  left: 77.272727%;   /* 1292 / 1672 */
  top: 45.589798%;    /* 429 / 941 */
  width: 8.313397%;   /* 139 / 1672 */
  height: 36.556854%; /* 344 / 941 */
  overflow: visible;
  border-radius: 0;
}

.scene__stage[data-view="B07"] .scene-hotspot--tablette .scene-hotspot__mask {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

/* Le simple survol du rectangle englobant ne doit rien afficher :
   le halo apparaît uniquement quand le pointeur touche un pixel opaque. */
.scene__stage[data-view="B07"] .scene-hotspot--tablette:hover .scene-hotspot__mask {
  opacity: 0 !important;
  filter: none !important;
}

.scene__stage[data-view="B07"] .scene-hotspot--tablette.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B07"] .scene-hotspot--tablette:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}

.scene__stage[data-view="B07"] .scene-hotspot--tablette.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}

/* Zone du texte imprimé dans ecran_tablette.png. */
.scene-hotspot--tablet-tutorials {
  left: 24.85%;
  top: 44.10%;
  width: 51.60%;
  height: 12.90%;
  border-radius: 14px;
}
.scene-hotspot--tablet-tutorials::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  background: rgba(255,255,255,0);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease, transform 150ms ease;
  pointer-events: none;
}
.scene-hotspot--tablet-tutorials:hover::after,
.scene-hotspot--tablet-tutorials:focus-visible::after {
  border-color: rgba(255, 197, 70, .76);
  background: rgba(255, 191, 59, .055);
  box-shadow: 0 0 15px rgba(255, 176, 28, .38);
  transform: scale(1.01);
}
.scene-hotspot--tablet-tutorials.is-clicked::after {
  border-color: rgba(111, 255, 139, .92);
  box-shadow: 0 0 16px rgba(0, 207, 77, .48);
}

.tablet-back-button {
  position: absolute;
  z-index: 80;
  top: auto;
  bottom: 14.8%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 193, 58, .58);
  border-radius: 8px;
  background: rgba(12, 15, 18, .82);
  color: #fff;
  font: 600 clamp(13px, 1vw, 16px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 5px 18px rgba(0,0,0,.36);
}
.scene__stage[data-view="B07TABLETTE"] .tablet-back-button {
  display: block;
}
.scene__stage[data-view="B05FONTAX"] .tablet-back-button {
  display: block;
}
.tablet-back-button:hover,
.tablet-back-button:focus-visible {
  outline: none;
  border-color: rgba(255, 205, 85, .96);
  box-shadow: 0 0 14px rgba(255, 181, 42, .38), 0 5px 18px rgba(0,0,0,.42);
}

/* Médiathèque Tutoriels : overlay distinct pour les cartes, mais le lecteur
   YouTube reste le lecteur partagé .video-player-overlay existant. */
.tutorial-library-overlay {
  position: fixed;
  inset: 0;
  z-index: 5800;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.4vw, 34px);
}
.tutorial-library-overlay[hidden] {
  display: none !important;
}
.tutorial-library-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(3px);
}
.tutorial-library-overlay__dialog {
  position: relative;
  z-index: 1;
  width: min(94vw, 1180px);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 193, 58, .5);
  border-radius: 12px;
  background: #0d1013;
  box-shadow: 0 24px 80px rgba(0,0,0,.72);
}
.tutorial-library-overlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,193,58,.22);
  background: linear-gradient(180deg,#171a1d,#101214);
  color: #fff;
}
.tutorial-library-overlay__bar > div {
  min-width: 0;
}
.tutorial-library-overlay__bar strong {
  display: block;
  font-size: clamp(18px, 2vw, 26px);
  color: #f5c45d;
}
.tutorial-library-overlay__bar small {
  display: block;
  margin-top: 2px;
  color: #b9bdc2;
  font-size: 13px;
}
.tutorial-library-overlay__back {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(255,193,58,.52);
  border-radius: 7px;
  background: #191b1e;
  color: #fff;
  cursor: pointer;
}
.tutorial-library-overlay__back:hover,
.tutorial-library-overlay__back:focus-visible {
  outline: none;
  border-color: #f3bd4c;
  box-shadow: 0 0 12px rgba(255,184,36,.34);
}
.tutorial-library-overlay__body {
  min-height: 0;
  overflow: auto;
  padding: clamp(12px, 2vw, 22px);
}
.tutorial-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 16px;
}
.tutorial-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  overflow: hidden;
  background: #15181b;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.tutorial-card:hover,
.tutorial-card:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: rgba(255,193,58,.72);
  box-shadow: 0 0 18px rgba(255,176,28,.18);
}
.tutorial-card__thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: #050607;
}
.tutorial-card__body {
  display: grid;
  gap: 5px;
  padding: 11px 12px 13px;
}
.tutorial-card__title {
  font-size: 16px;
  line-height: 1.25;
}
.tutorial-card__category {
  color: #e0af4d;
  font-size: 13px;
}
.tutorial-card__description {
  color: #c0c3c7;
  font-size: 13px;
  line-height: 1.35;
}
.tutorial-library-status {
  padding: 18px 4px 4px;
  text-align: center;
  color: #b9bdc2;
}
body.tutorial-library-open {
  overflow: hidden;
}

@media (max-width: 620px) {
  .tablet-back-button {
    top: auto;
    bottom: 15.5%;
    left: 50%;
    transform: translateX(-50%);
    min-height: 40px;
    padding: 8px 12px;
  }
  .tutorial-library-overlay {
    padding: 6px;
  }
  .tutorial-library-overlay__dialog {
    width: 100%;
    max-height: 96vh;
  }
  .tutorial-library-overlay__bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .tutorial-library-overlay__back {
    width: 100%;
  }
  .tutorial-library-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-hotspot--tablette::after,
  .scene-hotspot--tablet-tutorials::after,
  .tutorial-card {
    transition-duration: 1ms !important;
  }
}

/* === Faux bureau Windows — Courrier === */
.windows-desktop-shortcut--mail {
  left: 67.703349%;
  top: 47.821467%;
  width: 17.942584%;
  height: 31.880978%;
  z-index: 2;
}

.windows-mail-app {
  height: calc(100% - 44px);
  padding: 18px 22px 22px;
  overflow: auto;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
}
.windows-mail-app[hidden] { display: none !important; }
.windows-mail-form {
  width: min(760px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  color: #20242a;
}
.windows-mail-form label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.windows-mail-form__wide,
.windows-mail-form__actions {
  grid-column: 1 / -1;
}

.windows-mail-form__notice {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  padding: 10px 12px;
  border: 1px solid #b8c5d3;
  border-radius: 6px;
  background: #eef5fc;
  color: #273544;
  font-size: 14px;
  line-height: 1.4;
}
.windows-mail-form__help {
  color: #5e6874;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}
.windows-mail-form input,
.windows-mail-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #aeb8c5;
  border-radius: 6px;
  background: #fff;
  color: #1d232b;
  font: inherit;
  font-weight: 400;
  padding: 10px 11px;
  outline: none;
}
.windows-mail-form input:focus,
.windows-mail-form textarea:focus {
  border-color: #2474c6;
  box-shadow: 0 0 0 2px rgba(36,116,198,.18);
}
.windows-mail-form textarea {
  min-height: 140px;
  resize: vertical;
}
.windows-mail-attachment small {
  color: #5e6874;
  font-size: 12px;
  font-weight: 400;
}
.windows-mail-form input[type="file"] {
  padding: 7px 9px;
  background: #fff;
}
.windows-mail-form input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 1px solid #8c99a7;
  border-radius: 5px;
  background: #edf2f8;
  color: #25313d;
  padding: 7px 10px;
  cursor: pointer;
}
.windows-mail-form__actions {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
}
.windows-mail-form__actions button {
  min-width: 120px;
  min-height: 40px;
  border: 1px solid #1762a8;
  border-radius: 6px;
  background: #2176c9;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 9px 18px;
}
.windows-mail-form__actions button:hover { background: #1768b7; }
.windows-mail-form__actions button:disabled { opacity: .55; cursor: wait; }
.windows-mail-status { font-size: 13px; color: #46515e; }
.windows-mail-status.is-success { color: #1c7139; font-weight: 700; }
.windows-mail-status.is-error { color: #a92323; font-weight: 700; }
.windows-mail-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 720px) {
  .windows-mail-app { padding: 12px; }
  .windows-mail-form { grid-template-columns: 1fr; gap: 11px; }
  .windows-mail-form label,
  .windows-mail-form__wide,
  .windows-mail-form__actions { grid-column: 1; }
  .windows-mail-form input,
  .windows-mail-form textarea { font-size: 16px; }
}

/* === Faux bureau Windows : verrouillage global des raccourcis pendant une fenêtre === */
.windows-desktop-ui.has-open-window .windows-desktop-shortcut {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.windows-desktop-ui.has-open-window .windows-clubs-window,
.windows-desktop-ui.has-open-window .windows-app-window {
  z-index: 10;
}

/* ============================================================
   B07 — PETITES ANNONCES (MOTEUR + ROUE)
   ============================================================ */
.scene__stage[data-view="B07"] .scene-hotspot--annonce-moteur {
  left: 50.119617%;
  top: 41.020191%;
  width: 9.449761%;
  height: 16.578108%;
  overflow: visible;
  border-radius: 0;
}
.classifieds-overlay {
  position: fixed; inset: 0; z-index: 1750;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8px, 2vw, 24px);
  opacity: 0; transition: opacity 180ms ease;
}
.classifieds-overlay[hidden], .classifieds-lightbox[hidden] { display: none !important; }
.classifieds-overlay.is-open { opacity: 1; }
.classifieds-overlay__backdrop { position: absolute; inset: 0; background: rgba(2,3,4,.82); backdrop-filter: blur(3px); }
.classifieds-overlay__dialog {
  position: relative; z-index: 1; width: min(96vw, 1320px); max-height: 94vh;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(226,177,70,.58); border-radius: 14px;
  background: #111315; color: #eee;
  box-shadow: 0 24px 80px rgba(0,0,0,.68), 0 0 24px rgba(211,151,34,.12);
  transform: scale(.98); transition: transform 180ms ease;
}
.classifieds-overlay.is-open .classifieds-overlay__dialog { transform: scale(1); }
.classifieds-overlay__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 12px 10px 17px; border-bottom: 1px solid rgba(226,177,70,.28);
  background: linear-gradient(#2a2825,#171819); color: #f5e4ba;
}
.classifieds-overlay__bar > div { min-width: 0; display: grid; gap: 2px; }
.classifieds-overlay__bar strong { font-size: clamp(17px,1.6vw,24px); }
.classifieds-overlay__bar small { color: #c9c0ae; font-size: 12px; }
.classifieds-overlay__close {
  flex: 0 0 auto; width: 42px; height: 36px; border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; background: #292a2b; color: white; font-size: 26px; cursor: pointer;
}
.classifieds-overlay__close:hover, .classifieds-overlay__close:focus-visible { background: #8e2020; outline: none; }
.classifieds-overlay__content { min-height: 0; overflow: auto; padding: clamp(10px,1.8vw,22px); }
.classifieds-toolbar { display: grid; grid-template-columns: repeat(3,minmax(150px,1fr)) minmax(190px,1.4fr); gap: 9px; margin-bottom: 10px; }
.classifieds-toolbar select, .classifieds-toolbar input {
  width: 100%; min-height: 42px; border: 1px solid #4f4b43; border-radius: 8px;
  background: #1d1f21; color: #f3f3f3; padding: 8px 10px; font: inherit;
}
.classifieds-toolbar select:focus, .classifieds-toolbar input:focus { outline: 2px solid rgba(227,171,52,.65); outline-offset: 1px; }
.classifieds-status { min-height: 24px; margin: 4px 0 10px; color: #c8c3b9; font-size: 13px; }
.classifieds-public-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; padding:10px 12px; border:1px solid rgba(226,177,70,.25); border-radius:10px; background:#17191b; color:#c9c0ae; font-size:12px; }
.classifieds-propose-button { min-height:40px; padding:8px 14px; border:1px solid rgba(232,181,67,.7); border-radius:8px; background:#8a5d17; color:#fff4d3; font:inherit; font-weight:800; cursor:pointer; }
.classifieds-propose-button:hover,.classifieds-propose-button:focus-visible { outline:none; background:#a86d15; border-color:#f0bf5a; }
.classifieds-propose-button:disabled { opacity:.55; cursor:wait; }
.classifieds-proposal { max-width:980px; margin:0 auto; }
.classifieds-proposal__intro { margin-bottom:14px; }
.classifieds-proposal__intro h2 { margin:0 0 6px; color:#fff; }
.classifieds-proposal__intro p { margin:0; color:#c8c3b9; line-height:1.5; }
.classifieds-proposal__form { position:relative; padding:16px; border:1px solid rgba(226,177,70,.28); border-radius:12px; background:#151719; }
.classifieds-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.classifieds-form-grid label { display:flex; flex-direction:column; gap:6px; color:#e9dfca; font-size:13px; font-weight:700; }
.classifieds-form-grid label span,.classifieds-form-grid small { color:#9f9f9f; font-size:11px; font-weight:400; }
.classifieds-form-grid .is-wide { grid-column:1/-1; }
.classifieds-form-grid input,.classifieds-form-grid select,.classifieds-form-grid textarea { width:100%; min-height:42px; border:1px solid #4f4b43; border-radius:8px; background:#1d1f21; color:#f3f3f3; padding:8px 10px; font:inherit; }
.classifieds-form-grid textarea { min-height:130px; resize:vertical; }
.classifieds-form-grid input:focus,.classifieds-form-grid select:focus,.classifieds-form-grid textarea:focus { outline:2px solid rgba(227,171,52,.65); outline-offset:1px; }
.classifieds-proposal__status { min-height:22px; margin-top:12px; color:#ffd38a; font-size:13px; }
.classifieds-proposal__actions { display:flex; justify-content:flex-end; margin-top:8px; }
.classifieds-proposal__success { margin-top:18px; padding:18px; border:1px solid rgba(93,178,104,.5); border-radius:10px; background:#17271a; color:#dff3e1; font-size:16px; line-height:1.55; }
.classifieds-honeypot { position:absolute!important; left:-10000px!important; top:auto!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.classifieds-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 14px; }
.classified-card {
  min-width: 0; display: grid; grid-template-rows: 180px 1fr; overflow: hidden;
  border: 1px solid rgba(229,181,80,.25); border-radius: 12px;
  background: #181a1c; cursor: pointer; transition: transform 130ms ease,border-color 130ms ease,box-shadow 130ms ease;
}
.classified-card:hover, .classified-card:focus-visible { outline: none; transform: translateY(-2px); border-color: rgba(232,181,67,.75); box-shadow: 0 10px 26px rgba(0,0,0,.35),0 0 0 2px rgba(232,181,67,.15); }
.classified-card__photo { display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0d0f10; color: #777; }
.classified-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.classified-card__body { min-width: 0; padding: 12px; display: flex; flex-direction: column; }
.classified-card__topline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.classified-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; background: #31343a; color: #eee; }
.classified-badge.is-sale { background: #7e5517; color: #fff1c8; }
.classified-badge.is-search { background: #1b5b76; color: #dff6ff; }
.classified-badge.is-status { background: #26382a; color: #d8efdc; }
.classified-card h3 { margin: 9px 0 4px; font-size: 18px; color: #fff; }
.classified-card__meta { margin: 0; color: #c9b889; font-size: 12px; }
.classified-card__excerpt { margin: 8px 0 12px; color: #d4d4d4; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.classified-card__footer { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; align-items: end; color: #c1c1c1; font-size: 12px; }
.classified-card__footer strong { color: #f0c66c; font-size: 18px; }
.classified-detail__back { margin-bottom: 12px; min-height: 40px; padding: 7px 12px; border: 1px solid rgba(225,174,58,.42); border-radius: 8px; background: #202225; color: #f2dfb2; cursor: pointer; }
.classified-detail__back:hover, .classified-detail__back:focus-visible { outline: none; background: #2b2d30; border-color: #dfaa3d; }
#classifiedsDetailContent { display: grid; grid-template-columns: minmax(300px,.9fr) minmax(320px,1.1fr); gap: clamp(16px,2.5vw,34px); }
.classified-detail__gallery { min-width: 0; }
.classified-detail__main-photo { width: 100%; aspect-ratio: 4/3; padding: 0; border: 1px solid #4a4540; border-radius: 12px; overflow: hidden; background: #08090a; color: #777; cursor: zoom-in; }
.classified-detail__main-photo img { width: 100%; height: 100%; object-fit: contain; }
.classified-detail__thumbs { display: grid; grid-template-columns: repeat(auto-fill,minmax(72px,1fr)); gap: 7px; margin-top: 8px; }
.classified-detail__thumbs button { aspect-ratio: 1; padding: 2px; border: 1px solid #4d4942; border-radius: 7px; overflow: hidden; background: #111; cursor: pointer; }
.classified-detail__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.classified-detail__info h2 { margin: 10px 0 12px; color: #fff; font-size: clamp(22px,2.4vw,34px); }
.classified-detail__facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0 0 16px; }
.classified-detail__facts div { padding: 8px 10px; border: 1px solid #343638; border-radius: 8px; background: #17191b; }
.classified-detail__facts dt { color: #9f9f9f; font-size: 11px; text-transform: uppercase; }
.classified-detail__facts dd { margin: 3px 0 0; color: #f0d28d; font-size: 14px; }
.classified-detail__description { padding: 14px; border-left: 3px solid #c89536; background: #17191b; line-height: 1.55; color: #e2e2e2; }
.classified-detail__contact { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(219,172,71,.28); border-radius: 10px; background: #151719; line-height: 1.65; }
.classified-detail__contact h3 { margin: 0 0 5px; color: #f1cf85; }
.classified-detail__contact a { color: #ffd784; }
.classifieds-lightbox { position: fixed; inset: 0; z-index: 1900; display: flex; align-items: center; justify-content: center; padding: 30px; background: rgba(0,0,0,.9); opacity: 0; transition: opacity 140ms ease; }
.classifieds-lightbox.is-open { opacity: 1; }
.classifieds-lightbox img { max-width: 96vw; max-height: 92vh; object-fit: contain; box-shadow: 0 12px 60px rgba(0,0,0,.7); }
.classifieds-lightbox__close { position: fixed; top: 14px; right: 18px; width: 46px; height: 42px; border-radius: 9px; border: 1px solid rgba(255,255,255,.25); background: #242424; color: #fff; font-size: 28px; cursor: pointer; }
body.classifieds-open { overflow: hidden; }

@media(max-width:620px){
  .classifieds-form-grid { grid-template-columns:1fr; }
  .classifieds-form-grid .is-wide { grid-column:auto; }
  .classifieds-public-actions { align-items:stretch; }
  .classifieds-propose-button { width:100%; }
}
@media(max-width:800px){
  .classifieds-overlay { padding: 5px; align-items: stretch; }
  .classifieds-overlay__dialog { width: 100%; max-height: 100%; border-radius: 9px; }
  .classifieds-toolbar { grid-template-columns: 1fr 1fr; }
  #classifiedsDetailContent { grid-template-columns: 1fr; }
  .classifieds-detail__facts { grid-template-columns: 1fr 1fr; }
}
@media(max-width:520px){
  .classifieds-toolbar { grid-template-columns: 1fr; }
  .classifieds-cards { grid-template-columns: 1fr; }
  .classified-card { grid-template-columns: 118px 1fr; grid-template-rows: auto; min-height: 150px; }
  .classified-card__photo { min-height: 150px; }
  .classified-detail__facts { grid-template-columns: 1fr; }
  .classifieds-overlay__bar small { display: none; }
}


/* ==========================================================
   A1 / A1OPEN — AFFICHES MUSICALES (greffe ciblée 30/08/2026)
   Les règles A01 historiques restent inchangées au-dessus.
   Ces coordonnées utilisent uniquement les nouveaux PNG "1" recalés.
   ========================================================== */
#sceneStage[data-view="A1"] .scene-hotspot--poster-scorpions,
#sceneStage[data-view="A1OPEN"] .scene-hotspot--poster-scorpions {
  left: 2.452153%;
  top: 20.510096%;
  width: 9.449761%;
  height: 23.485654%;
}

#sceneStage[data-view="A1"] .scene-hotspot--poster-deep-purple,
#sceneStage[data-view="A1OPEN"] .scene-hotspot--poster-deep-purple {
  left: 12.739234%;
  top: 39.638682%;
  width: 9.629187%;
  height: 23.910733%;
}

#sceneStage[data-view="A1"] .scene-hotspot--poster-iron-maiden,
#sceneStage[data-view="A1OPEN"] .scene-hotspot--poster-iron-maiden {
  left: 86.124402%;
  top: 31.668438%;
  width: 8.253589%;
  height: 23.698193%;
}

#sceneStage[data-view="A1"] .scene-hotspot--poster-led-zeppelin,
#sceneStage[data-view="A1OPEN"] .scene-hotspot--poster-led-zeppelin {
  left: 74.043062%;
  top: 39.638682%;
  width: 7.775120%;
  height: 21.679064%;
}


/* ==========================================================
   B03 — porte-magazines sur la palette.
   Position exacte retrouvée depuis b03.png + porte_magasines_hotspot.png :
   x=338, y=559, 115×95 sur 1672×941.
   ========================================================== */
.scene__stage[data-view="B03"] .scene-hotspot--porte-magazines {
  left: 20.215311%;
  top: 59.404888%;
  width: 6.877990%;
  height: 10.095643%;
  overflow: visible;
}
.scene__stage[data-view="B03"] .scene-hotspot--porte-magazines .scene-hotspot__mask {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}
.scene__stage[data-view="B03"] .scene-hotspot--porte-magazines.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B03"] .scene-hotspot--porte-magazines:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}
.scene__stage[data-view="B03"] .scene-hotspot--porte-magazines.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}

/* ============================================================
   31-08-2026 — BARRE GÉNÉRALE EN BAS + MENU RESPONSIVE
   Réutilise les composants existants, sans toucher aux hotspots.
============================================================ */

/* La barre d'état reste dans le stage, désormais en bas. */
.scene-topbar {
  left: 14px !important;
  right: 96px !important;
  top: auto !important;
  bottom: 8px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  max-width: none !important;
  min-width: 0;
}
.scene-topbar > .visit-counter { justify-self: start; }
.scene-topbar > .identity-status { justify-self: center; min-width: 0; }
.scene-topbar > .online-presence { justify-self: end; }

/* Le bouton Menu fait visuellement partie de la barre inférieure. */
.menu-toggle,
#sceneStage > .menu-toggle {
  top: auto !important;
  right: 14px !important;
  bottom: 8px !important;
  left: auto !important;
  min-height: 38px;
}

/* Menu existant : ouverture au-dessus de la barre et repli propre si étroit. */
.main-menu {
  left: 50%;
  right: auto;
  top: auto !important;
  bottom: 56px;
  width: min(1180px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  max-height: min(62vh, 460px);
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  overflow: visible;
  white-space: normal;
  transform: translate(-50%, 8px);
}
.main-menu.is-open { transform: translate(-50%, 0); }
.main-menu__item { flex: 0 0 auto; }

/* Les sous-menus s'ouvrent vers le haut puisque le menu est maintenant en bas. */
.main-menu__submenu {
  top: auto;
  bottom: calc(100% + 5px);
  transform: translateY(4px);
}
.main-menu__group.is-open .main-menu__submenu { transform: translateY(0); }
.main-menu__submenu::before {
  top: auto;
  bottom: -7px;
}
.main-menu__submenu-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  color: #f4f0e8;
  background: transparent;
  font: inherit;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.main-menu__submenu-link:hover,
.main-menu__submenu-link:focus-visible {
  color: #ffd77b;
  background: rgba(255, 174, 31, .08);
  outline: 0;
}

/* La liste des visiteurs remonte au-dessus de la barre. */
.online-presence__dropdown {
  top: auto !important;
  bottom: calc(100% + 6px);
}

@media (max-width: 900px) {
  .scene-topbar {
    left: 8px !important;
    right: 78px !important;
    bottom: 6px !important;
    gap: 5px;
  }
  .visit-counter,
  .identity-status,
  .online-presence__toggle {
    min-height: 32px;
    padding: 5px 8px;
  }
  .identity-status { max-width: 210px; }
  .identity-status__change { display: none; }
  .menu-toggle,
  #sceneStage > .menu-toggle {
    right: 8px !important;
    bottom: 6px !important;
    min-width: 62px;
    min-height: 32px;
    padding: 5px 8px;
    font-size: 11px;
  }
  .main-menu {
    bottom: 46px;
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    max-height: min(72vh, 520px);
    padding: 5px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-menu__item {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 10px;
  }
}

@media (max-width: 620px) {
  .scene-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .visit-counter__today { display: none; }
  .visit-counter__icon { display: none; }
  .identity-status__icon { display: none; }
  .identity-status__person {
    max-width: 25vw;
    font-size: 10px;
  }
  .online-presence__label { display: none; }
  .online-presence__toggle { gap: 4px; }
  .main-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .main-menu__item,
  .main-menu__group {
    width: 100%;
    min-width: 0;
    border-left: 0;
  }
  .main-menu__group > .main-menu__item { width: 100%; }
  .main-menu__item {
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }
  .main-menu__submenu {
    position: fixed;
    left: 8px !important;
    right: 8px !important;
    bottom: 52px;
    width: auto;
    min-width: 0;
    max-height: 45vh;
    overflow-y: auto;
  }
  .online-presence__dropdown {
    left: auto;
    right: 0;
  }
}

@media (max-width: 390px) {
  .identity-status__person { max-width: 18vw; }
  .main-menu { grid-template-columns: 1fr; }
}

/* ==========================================================
   B03 — tableau d’informations dynamique.
   Coordonnées exactes sur le décor 1672×941 :
   surface verte x=235..415, y=211..452 ; masque bras x=226, y=300.
   Ordre : fond (0) < contenu (2) < bras (3) < hotspots (5).
   ========================================================== */
.b03-info-board,
.b03-info-board-arm {
  display: none;
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.scene__stage[data-view="B03"] .b03-info-board {
  display: block;
  z-index: 2;
  left: 14.055024%;  /* 235 / 1672 */
  top: 22.4230%;     /* 211 / 941 */
  width: 10.825359%; /* 181 / 1672 */
  height: 25.717322%;/* 242 / 941 */
  overflow: hidden;
  container-type: inline-size;
}

.scene__stage[data-view="B03"] .b03-info-board-arm {
  display: block;
  z-index: 3;
  left: 13.516746%;  /* 226 / 1672 */
  top: 31.880978%;   /* 300 / 941 */
  width: 6.040670%;  /* 101 / 1672 */
  height: 6.269926%; /* 59 / 941 */
  object-fit: contain;
}

.b03-info-board__item {
  position: absolute;
  transform: rotate(var(--item-rotation, 0deg));
  transform-origin: center;
  max-width: 96%;
  max-height: 96%;
}

.b03-info-board__item--text {
  color: #e6e0cf;
  white-space: pre-wrap;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: calc(var(--chalk-size, 8) * 1cqw);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: .01em;
  text-shadow:
    0 0 .07em rgba(255,255,245,.72),
    .035em .02em .018em rgba(255,255,245,.28),
    -.025em .015em .02em rgba(255,255,245,.20);
  filter: contrast(.94);
}

.b03-info-board__item--image {
  display: block;
  object-fit: contain;
}

.scene__stage[data-view="B03"] .scene-hotspot--tableau-informations {
  left: 13.516746%;  /* 226 / 1672 : inclut le bras qui dépasse à gauche */
  top: 22.4230%;     /* 211 / 941 */
  width: 11.303828%; /* 189 / 1672 : tableau + débord du bras */
  height: 25.717322%;/* 242 / 941 */
  overflow: visible;
}
.scene__stage[data-view="B03"] .scene-hotspot--tableau-informations .scene-hotspot__mask {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}
.scene__stage[data-view="B03"] .scene-hotspot--tableau-informations.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B03"] .scene-hotspot--tableau-informations:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}
.scene__stage[data-view="B03"] .scene-hotspot--tableau-informations.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}

/* ==========================================================
   B03 — zoom plein écran du tableau d'informations.
   En vue B03 normale, le bras reste au-dessus du contenu et du halo. Le zoom affiche le tableau sans le bras.
   ========================================================== */
.scene__stage[data-view="B03"] .b03-info-board-arm {
  z-index: 7;
}

.b03-info-board__item--text {
  color: var(--chalk-color, #e7e2d2);
}

.b03-info-board-modal-open {
  overflow: hidden;
}

.b03-info-board-overlay {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 64px 14px 14px;
  background: rgba(0, 0, 0, .94);
  overscroll-behavior: contain;
}

.b03-info-board-overlay.is-open {
  display: flex;
}

.b03-info-board-overlay__back {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 30003;
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid rgba(239, 190, 72, .8);
  border-radius: 9px;
  background: rgba(12, 12, 10, .94);
  color: #f4e9c8;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
}

.b03-info-board-overlay__back:hover,
.b03-info-board-overlay__back:focus-visible {
  border-color: #ffd66f;
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 202, 76, .22), 0 6px 22px rgba(0,0,0,.5);
}

.b03-info-board-zoom {
  position: relative;
  height: calc(100vh - 82px);
  max-height: calc(100vh - 82px);
  aspect-ratio: 181 / 242;
  max-width: calc(100vw - 28px);
  overflow: hidden;
  container-type: inline-size;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.7));
  border: clamp(10px, 2.2cqw, 22px) solid #6a3d1f;
  border-radius: 3px;
  background: #07170d;
  box-shadow:
    inset 0 0 0 3px rgba(30,15,6,.95),
    inset 0 0 0 6px rgba(160,98,42,.35),
    inset 0 0 34px rgba(0,0,0,.48);
}

.b03-info-board-zoom__base {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 42% 28%, rgba(255,255,220,.018), transparent 34%),
    linear-gradient(96deg, rgba(255,255,255,.012), transparent 18% 82%, rgba(0,0,0,.10)),
    #07170d;
}

.b03-info-board--zoom {
  display: block;
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  container-type: inline-size;
}

@media (max-width: 640px) {
  .b03-info-board-overlay {
    padding: 60px 8px 8px;
  }
  .b03-info-board-zoom {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 72px);
    height: min(calc(100vh - 72px), 820px);
  }
  .b03-info-board-overlay__back {
    min-height: 40px;
    padding: 8px 14px;
  }
}

/* ==========================================================
   B07 — panneau Liens utiles : respecter la silhouette de Nico
   Le panneau reste rectangulaire visuellement dans le décor, mais sa couche
   interactive/dynamique est découpée autour de la tête de Nico afin qu'aucun
   halo, lien ou infobulle ne passe devant lui.
   Découpe recalée à partir de assets/images/navigation/nico_hotspot.png.
   ========================================================== */
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs {
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    75.3% 100%,
    75.5% 98%,
    75.7% 96%,
    75.0% 92%,
    75.0% 89.5%,
    74.7% 87.6%,
    74.2% 85.5%,
    73.2% 83.4%,
    71.4% 81.3%,
    65.4% 81.3%,
    63.9% 83.4%,
    63.0% 85.5%,
    62.4% 87.6%,
    62.0% 89.6%,
    61.9% 91.7%,
    62.0% 93.8%,
    62.2% 95.9%,
    61.9% 98%,
    62.2% 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    75.3% 100%,
    75.5% 98%,
    75.7% 96%,
    75.0% 92%,
    75.0% 89.5%,
    74.7% 87.6%,
    74.2% 85.5%,
    73.2% 83.4%,
    71.4% 81.3%,
    65.4% 81.3%,
    63.9% 83.4%,
    63.0% 85.5%,
    62.4% 87.6%,
    62.0% 89.6%,
    61.9% 91.7%,
    62.0% 93.8%,
    62.2% 95.9%,
    61.9% 98%,
    62.2% 100%,
    0 100%
  );
}

/* L'infobulle du panneau gauche reste dans la partie haute libre et ne vient
   plus se poser sur le visage de Nico. */
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-zoom-trigger::after {
  top: 10px;
  bottom: auto;
  transform: translate(-50%, -4px);
}

.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-zoom-trigger:hover::after,
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-zoom-trigger:focus-visible::after {
  transform: translate(-50%, 0);
}

/* ==========================================================
   PERSONNAGES — hotspots passifs de silhouette
   Finition :
   - PNG exclusivement depuis assets/images/navigation/personnages ;
   - ratio natif garanti : largeur seule + height:auto ;
   - aucune transformation / translation / mise à l’échelle au hover ;
   - le hover ne change QUE l’opacité du halo rouge de silhouette.
   ========================================================== */
.person-hotspots {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.person-hotspot {
  position: absolute;
  display: none;
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: none !important;
  transform-origin: 50% 50%;
  margin: 0;
  padding: 0;
  border: 0;
  filter: url(#personGlowRed);
  transition: none !important;
  will-change: opacity;
  backface-visibility: hidden;
}


.person-hotspot.is-person-visible {
  display: block;
}

.person-hotspot.is-person-hover {
  opacity: 1;
}

/* B01 — positions validées sur la base 1672×941. */
.person-hotspot--b01-marie-joe  { left:3.6579%; top:29.2242%; width:25.2722%; }
.person-hotspot--b01-thierry    { left:44.0789%; top:42.4017%; width:13.3373%; }
.person-hotspot--b01-eric       { left:70.6340%; top:37.9384%; width:15.6699%; }

/* B03 */
.person-hotspot--b03-christine  { left:-3.3391%; top:26.7800%; width:21.3127%; }
.person-hotspot--b03-valerie    {
  left:25.7660%;
  top:41.4329%;
  width:18.4918%;
  transform-origin:0 0;
  transform:rotate(5.0612deg) !important;
  --person-hit-rotation:5.0612;
}
.person-hotspot--b03-james      { left:45.1149%; top:28.2678%; width:23.6842%; }
.person-hotspot--b03-ancien     { left:67.7689%; top:25.8236%; width:12.6081%; }
.person-hotspot--b03-jessika    {
  left:80.2933%;
  top:29.3934%;
  width:21.0324%;
  --person-hit-rotation:0;
}

/* B05 / B05OPEN */
.person-hotspot--b05-nat        { left:17.6385%; top:31.0308%; width:25.3227%; }
.person-hotspot--b05-doudou     { left:72.9067%; top:43.4644%; width:17.5239%; }

/* Nat est déjà intégrée au décor b05_open.png. Elle avait disparu uniquement
   du décor B05 porte fermée : on réutilise donc son PNG existant comme calque
   normal sur B05, exactement aux coordonnées de son hotspot. */
.scene__stage[data-view="B05"] .person-hotspot--b05-nat {
  left: 17.224880%;  /* 288 / 1672 — position relevée sur b05_open.png */
  top: 30.711052%;   /* 289 / 941 */
  width: 25.657895%; /* 429 / 1672 */
}
.scene__stage[data-view="B05"] .person-hotspot--b05-nat.is-person-visible {
  opacity: 1;
  filter: none;
}
.scene__stage[data-view="B05"] .person-hotspot--b05-nat.is-person-visible.is-person-hover {
  opacity: 1;
  /* En B05 porte fermée, le PNG de Nat est aussi son calque visible.
     Le filtre SVG global des personnages ne contient volontairement pas
     SourceGraphic ; ici on garde donc Nat affichée et on ajoute seulement
     le halo autour d'elle. B05OPEN reste inchangé. */
  filter:
    drop-shadow(0 0 2px rgba(255, 59, 48, 0.95))
    drop-shadow(0 0 5px rgba(255, 59, 48, 0.72))
    drop-shadow(0 0 9px rgba(217, 31, 24, 0.45));
}

/* B07 */
.person-hotspot--b07-nico       { left:11.8421%; top:35.2816%; width:16.9856%; }

/* A1OPEN — Thierry visible au fond du bureau. */
.person-hotspot--a1open-thierry { left:46.9993%; top:49.0967%; width:6.7790%; }

@media (prefers-reduced-motion: reduce) {
  .person-hotspot { transition: none !important; }
}

/* ==========================================================
   FINITION NAVIGATION — zones de bord plus confortables + B07
   - extension de la zone cliquable d'au moins 20 px ;
   - aucun changement de destination ni de système de hotspot ;
   - les effets existants restent inchangés, seule la surface de capture grandit.
   ========================================================== */
.scene-hotspot--left,
.scene-hotspot--right {
  width: calc(5.4% + 20px);
}

.scene-hotspot--bottom,
.scene-hotspot--top {
  height: calc(7.2% + 20px);
}

/* A1 : la grande zone de retour existante reste le même hotspot, simplement
   un peu plus tolérant afin de ne pas devoir viser précisément le bord bas. */
.scene-hotspot--door-back {
  height: calc(21% + 20px);
  max-height: 46%;
}

/* B07 — équilibrage visuel du panneau Pub avec le panneau Constructeurs.
   Le panneau gauche est découpé autour de Nico ; un léger drop-shadow sur la
   forme découpée compense la perte visuelle sans modifier sa zone interactive. */
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs:has(.b07-panel-zoom-trigger:hover),
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs:has(.b07-panel-zoom-trigger:focus-visible) {
  filter:
    drop-shadow(0 0 4px rgba(255, 220, 105, .60))
    drop-shadow(0 0 10px rgba(255, 174, 38, .38));
}

/* Petit libellé demandé sur le panneau publicitaire. */
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs::before {
  content: "Pub";
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 7px;
  border: 1px solid rgba(238, 194, 91, .48);
  border-radius: 5px;
  background: rgba(25, 21, 15, .78);
  color: #f4d893;
  font-size: clamp(10px, .72vw, 13px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  box-shadow: 0 2px 7px rgba(0,0,0,.34);
  pointer-events: none;
}

@media (max-width: 700px) {
  .scene-hotspot--left,
  .scene-hotspot--right {
    width: calc(5.4% + 24px);
  }

  .scene-hotspot--bottom,
  .scene-hotspot--top {
    height: calc(7.2% + 24px);
  }

  .scene__stage[data-view="B07"] .b07-dynamic-panel--pubs::before {
    left: 5px;
    bottom: 5px;
    padding: 2px 5px;
  }
}


/* ==========================================================
   CORRECTION FINALE NAVIGATION DE BORD — PASSE +30 px
   Le précédent agrandissement (+20/+24 px) est conservé dans l'historique
   CSS mais remplacé ici par une surface totale d'environ +50 px (desktop)
   et +54 px (petits écrans), sans changer les destinations ni le visuel au repos.
   ========================================================== */
.scene-hotspot--left,
.scene-hotspot--right {
  width: calc(5.4% + 50px);
}

.scene-hotspot--bottom,
.scene-hotspot--top {
  height: calc(7.2% + 50px);
}

.scene-hotspot--door-back {
  height: calc(21% + 50px);
  max-height: 52%;
}

/* Les libellés de navigation utilisent des retours de ligne explicites.
   La bulle commune sait déjà les afficher (white-space: pre-line) et son
   positionnement JS la maintient dans le viewport. */
.tooltip {
  max-width: min(210px, calc(100vw - 20px), calc(100% - 20px));
  height: auto;
  padding: 7px 10px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* ==========================================================
   B07 — panneau Pub : correction de la cause du halo affaibli
   L'ancien clip-path était appliqué au CONTENEUR entier : il coupait donc
   aussi les ombres externes du halo. Le conteneur n'est plus clippé.
   La découpe autour de Nico est déplacée sur les deux seules couches qui
   doivent réellement être limitées : zone interactive + grille de liens.
   Le halo utilise un drop-shadow de la forme découpée et n'est plus tronqué.
   ========================================================== */
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs {
  -webkit-clip-path: none;
  clip-path: none;
  overflow: visible;
  filter: none;
}

.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-zoom-trigger,
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-grid {
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    75.3% 100%,
    75.5% 98%,
    75.7% 96%,
    75.0% 92%,
    75.0% 89.5%,
    74.7% 87.6%,
    74.2% 85.5%,
    73.2% 83.4%,
    71.4% 81.3%,
    65.4% 81.3%,
    63.9% 83.4%,
    63.0% 85.5%,
    62.4% 87.6%,
    62.0% 89.6%,
    61.9% 91.7%,
    62.0% 93.8%,
    62.2% 95.9%,
    61.9% 98%,
    62.2% 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    75.3% 100%,
    75.5% 98%,
    75.7% 96%,
    75.0% 92%,
    75.0% 89.5%,
    74.7% 87.6%,
    74.2% 85.5%,
    73.2% 83.4%,
    71.4% 81.3%,
    65.4% 81.3%,
    63.9% 83.4%,
    63.0% 85.5%,
    62.4% 87.6%,
    62.0% 89.6%,
    61.9% 91.7%,
    62.0% 93.8%,
    62.2% 95.9%,
    61.9% 98%,
    62.2% 100%,
    0 100%
  );
}

/* Neutralise l'ancien renfort porté par le parent (qui deviendrait rectangulaire
   maintenant que le parent n'est plus clippé). */
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs:has(.b07-panel-zoom-trigger:hover),
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs:has(.b07-panel-zoom-trigger:focus-visible) {
  filter: none;
}

.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-zoom-trigger:hover,
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-zoom-trigger:focus-visible {
  box-shadow: inset 0 0 18px rgba(255, 200, 72, .13);
  filter:
    drop-shadow(0 0 2px rgba(255, 220, 105, .92))
    drop-shadow(0 0 7px rgba(255, 189, 47, .72))
    drop-shadow(0 0 15px rgba(255, 151, 24, .46));
}

@media (max-width: 700px) {
  .scene-hotspot--left,
  .scene-hotspot--right {
    width: calc(5.4% + 54px);
  }

  .scene-hotspot--bottom,
  .scene-hotspot--top {
    height: calc(7.2% + 54px);
  }

  .scene-hotspot--door-back {
    height: calc(21% + 54px);
  }

  .tooltip {
    max-width: min(190px, calc(100vw - 16px), calc(100% - 16px));
  }
}

/* Ajustement géométrique de la découpe sur la grille interne du panneau Pub.
   La grille n'occupe que x=5.5..94.5% et y=8..92% du panneau : ses coordonnées
   de clip sont donc remappées pour que l'échancrure tombe exactement au même
   endroit que sur la silhouette de Nico. */
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-grid {
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    78.09% 100%,
    77.75% 94.76%,
    77.19% 92.26%,
    76.07% 89.76%,
    74.04% 87.26%,
    67.30% 87.26%,
    65.62% 89.76%,
    64.61% 92.26%,
    63.93% 94.76%,
    63.48% 97.14%,
    63.37% 99.64%,
    63.48% 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    78.09% 100%,
    77.75% 94.76%,
    77.19% 92.26%,
    76.07% 89.76%,
    74.04% 87.26%,
    67.30% 87.26%,
    65.62% 89.76%,
    64.61% 92.26%,
    63.93% 94.76%,
    63.48% 97.14%,
    63.37% 99.64%,
    63.48% 100%,
    0 100%
  );
}


/* ==========================================================
   NARRATIONS — volume, mute et préférence d'autoplay partagés
   ========================================================== */
.narration-options { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:10px; }
.narration-volume { display:inline-flex; align-items:center; gap:8px; min-width:min(250px,100%); color:#d8d1c3; font-size:12px; }
.narration-volume input[type="range"] { flex:1 1 120px; min-width:90px; max-width:180px; accent-color:#e7ad36; }
.narration-autoplay { display:inline-flex; align-items:flex-start; gap:7px; max-width:300px; color:#c8c3b9; font-size:12px; line-height:1.3; cursor:pointer; }
.narration-autoplay input { flex:0 0 auto; margin-top:1px; accent-color:#d69a29; }
#welcomeAudioStatus { flex:1 1 100%; margin-left:0; }
.welcome-help__audio .narration-volume { min-width:min(220px,100%); color:#c8c3b9; }
@media (max-width:620px) {
  .narration-options, .welcome-help__audio { align-items:stretch; }
  .narration-volume { width:100%; }
  .narration-volume input[type="range"] { max-width:none; }
  .narration-autoplay { width:100%; max-width:none; }
}


/* ==========================================================
   B07 — finition panneau Pub / Nico
   Le halo reste celui du panneau, mais Nico est redessiné au-dessus avec
   son PNG déjà présent et déjà calé sur sa silhouette dans le décor.
   ========================================================== */
.scene__stage[data-view="B07"] .person-hotspots {
  z-index: 9;
}

.scene__stage[data-view="B07"] .person-hotspot--b07-nico.is-person-visible {
  opacity: 1;
  filter: none;
}

.scene__stage[data-view="B07"] .person-hotspot--b07-nico.is-person-visible.is-person-hover {
  opacity: 1;
  filter: url(#personGlowRed);
}

/* Le panneau gauche n'a plus besoin d'être découpé visuellement autour de
   Nico : Nico est désormais réellement au-dessus de la couche du panneau. */
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-zoom-trigger {
  -webkit-clip-path: none;
  clip-path: none;
}

/* Même halo que le panneau droit, sans couche supplémentaire devant Nico. */
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs::after {
  display: none !important;
}
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-zoom-trigger:hover,
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-zoom-trigger:focus-visible {
  filter: none;
  box-shadow:
    0 0 0 2px rgba(255, 220, 105, .92),
    0 0 10px 3px rgba(255, 189, 47, .72),
    0 0 26px 8px rgba(255, 151, 24, .46),
    inset 0 0 18px rgba(255, 200, 72, .13);
}

/* Infobulle demandée : bas à droite, entièrement à l'intérieur du panneau Pub. */
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-zoom-trigger::after {
  left: auto;
  right: 10px;
  top: auto;
  bottom: 10px;
  transform: translate(0, 4px);
}
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-zoom-trigger:hover::after,
.scene__stage[data-view="B07"] .b07-dynamic-panel--pubs .b07-panel-zoom-trigger:focus-visible::after {
  transform: translate(0, 0);
}

/* ==========================================================
   B01 BUREAU — HALO BAS LARGE, rendu direct sur le hotspot.
   Le rendu est appliqué au bouton lui-même afin qu'aucun pseudo-élément,
   calque du bureau ou stacking context ne puisse masquer le halo.
   ========================================================== */
.scene__stage[data-view="B01BUREAU"] .scene-hotspots {
  z-index: 30;
}
.scene__stage[data-view="B01BUREAU"] .scene-hotspot--bottom {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 18% !important;
  z-index: 30 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 180ms ease, box-shadow 180ms ease !important;
}
.scene__stage[data-view="B01BUREAU"] .scene-hotspot--bottom:hover,
.scene__stage[data-view="B01BUREAU"] .scene-hotspot--bottom:focus-visible {
  background: linear-gradient(
    to top,
    rgba(255, 214, 74, .78) 0%,
    rgba(255, 183, 32, .52) 28%,
    rgba(255, 158, 16, .25) 58%,
    rgba(255, 158, 16, .07) 82%,
    transparent 100%
  ) !important;
  box-shadow:
    inset 0 -34px 50px rgba(255, 198, 40, .50),
    0 -16px 38px rgba(255, 179, 24, .25) !important;
}
.scene__stage[data-view="B01BUREAU"] .scene-hotspot--bottom.is-clicked {
  background: linear-gradient(
    to top,
    rgba(76, 255, 112, .76) 0%,
    rgba(0, 205, 70, .42) 40%,
    rgba(0, 205, 70, .12) 76%,
    transparent 100%
  ) !important;
  box-shadow:
    inset 0 -34px 50px rgba(0, 205, 70, .44),
    0 -16px 38px rgba(0, 205, 70, .20) !important;
}
/* Neutralise le pseudo-élément générique dans cette vue : un seul halo, rendu directement. */
.scene__stage[data-view="B01BUREAU"] .scene-hotspot--bottom::after {
  display: none !important;
}
@media (max-width: 900px) {
  .scene__stage[data-view="B01BUREAU"] .scene-hotspot--bottom {
    height: 22% !important;
  }
}

/* ==========================================================
   B01 BUREAU — masque de survol « Se lever du bureau ».
   Le PNG du hotspot est le personnage entier, mais sa partie basse ne doit
   jamais repasser devant le plateau/clavier. On conserve le même alignement
   et le même halo, en limitant uniquement l'affichage du masque au-dessus
   du bureau. Le personnage réel reste inchangé derrière le premier plan.
   ========================================================== */
.scene__stage[data-view="B01BUREAU"] .scene-hotspot--leave-office .scene-hotspot__mask {
  clip-path: inset(0 0 42% 0) !important;
  -webkit-clip-path: inset(0 0 42% 0) !important;
}

/* ==========================================================
   B01 BUREAU — raccord exact du masque de survol au plateau.
   Le plateau du bureau commence à y=705 sur une scène 1672×941.
   Avec la géométrie actuelle du hotspot (29.5%, aspect 2/3, bottom -2.9%),
   un inset bas de 35.6% place la coupe au niveau du plateau, au lieu de 42%
   qui laissait un jour visible d'environ 47 px.
   ========================================================== */
.scene__stage[data-view="B01BUREAU"] .scene-hotspot--leave-office .scene-hotspot__mask {
  clip-path: inset(0 0 35.6% 0) !important;
  -webkit-clip-path: inset(0 0 35.6% 0) !important;
}


/* ==========================================================
   SMARTPHONE PORTRAIT — accueil tactile dédié
   Cette section ne s'active qu'avec la classe JS is-phone-portrait.
   Les tablettes et le téléphone paysage conservent donc strictement
   la scène immersive 16:9 existante.
   ========================================================== */
.mobile-portrait-background,
.mobile-menu__title,
.mobile-menu__enter,
.mobile-menu__extra { display: none; }

body.is-phone-portrait,
html.is-phone-portrait {
  width: 100%;
  height: var(--viewport-h);
  min-height: var(--viewport-h);
  overflow: hidden;
  background: #050505;
}

body.is-phone-portrait .scene__stage {
  left: 0;
  top: 0;
  width: 100vw;
  height: var(--viewport-h);
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  transform: none;
  overflow: hidden;
  background: #050505;
}

body.is-phone-portrait .mobile-portrait-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  user-select: none;
}

/* Tout le moteur immersif reste vivant mais invisible en portrait. */
body.is-phone-portrait .scene__background,
body.is-phone-portrait #biker,
body.is-phone-portrait #officeForeground,
body.is-phone-portrait #personHotspots,
body.is-phone-portrait #sceneHotspots,
body.is-phone-portrait #a01Nav,
body.is-phone-portrait #hotspotTooltip,
body.is-phone-portrait #tooltip,
body.is-phone-portrait .scene-topbar,
body.is-phone-portrait #sceneStage > .menu-toggle {
  display: none !important;
}

body.is-phone-portrait .main-menu {
  z-index: 9700;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  width: min(92vw, 520px) !important;
  max-width: 92vw !important;
  max-height: 53vh;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 185, 53, .72);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(17,18,19,.86), rgba(5,6,7,.76));
  box-shadow: 0 18px 50px rgba(0,0,0,.54), 0 0 24px rgba(224,151,27,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: normal;
  transform: translate(-50%, 0) !important;
  scrollbar-width: thin;
}

body.is-phone-portrait.mobile-welcome-open .main-menu,
body.is-phone-portrait .identity-overlay.is-visible ~ .main-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-phone-portrait .main-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.is-phone-portrait .mobile-menu__title {
  display: block;
  grid-column: 1 / -1;
  padding: 2px 4px 6px;
  color: #f4bd55;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 2px 7px rgba(0,0,0,.7);
}

body.is-phone-portrait .mobile-menu__enter,
body.is-phone-portrait .mobile-menu__extra { display: flex; }
body.is-phone-portrait .desktop-menu__entry { display: none; }

body.is-phone-portrait .main-menu__item,
body.is-phone-portrait .main-menu__group > .main-menu__item {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 190, 65, .24);
  border-radius: 11px;
  background: rgba(33,35,36,.76);
  color: #fff8e7;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .025em;
  text-align: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body.is-phone-portrait .main-menu__group {
  width: 100%;
  min-width: 0;
  border-left: 0;
}
body.is-phone-portrait .main-menu__item:active {
  transform: scale(.985);
  background: rgba(165,105,14,.78);
}

body.is-phone-portrait .main-menu__submenu {
  position: fixed;
  z-index: 9900;
  left: 5vw !important;
  right: 5vw !important;
  top: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  width: auto;
  min-width: 0;
  max-height: 62vh;
  padding: 9px;
  overflow-y: auto;
  transform: translateY(8px);
  border-radius: 14px;
}
body.is-phone-portrait .main-menu__group.is-open .main-menu__submenu { transform: translateY(0); }
body.is-phone-portrait .main-menu__submenu button,
body.is-phone-portrait .main-menu__submenu-link {
  min-height: 46px;
  display: flex;
  align-items: center;
  white-space: normal;
  font-size: 13px;
}

/* Connexion / choix visiteur : tout reste dans la hauteur utile. */
body.is-phone-portrait .identity-overlay {
  z-index: 99999;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  overflow: hidden;
}
body.is-phone-portrait .identity-card {
  width: min(94vw, 480px);
  max-height: 90vh;
  max-height: 90dvh;
  padding: 20px 16px;
  overflow-y: auto;
  border-radius: 16px;
  overscroll-behavior: contain;
}
body.is-phone-portrait .identity-card h1 { font-size: 23px; }
body.is-phone-portrait .identity-card p { margin-bottom: 14px; }
body.is-phone-portrait .identity-buttons { grid-template-columns: 1fr; gap: 10px; }
body.is-phone-portrait .identity-button,
body.is-phone-portrait .identity-member-select,
body.is-phone-portrait .identity-member-confirm {
  min-height: 48px;
  font-size: 16px;
}

/* Bienvenue : fenêtre entièrement contenue dans l'écran, contenu seul scrollable. */
body.is-phone-portrait .welcome-help {
  position: absolute;
  z-index: 9950;
  left: 50%;
  top: 50%;
  width: min(94vw, 520px);
  max-height: 90vh;
  max-height: 90dvh;
  transform: translate(-50%, -50%) !important;
}
body.is-phone-portrait .welcome-help__card {
  width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
  padding: 18px 16px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.is-phone-portrait .welcome-help__close {
  position: sticky;
  z-index: 4;
  top: 0;
  float: right;
  margin: -4px -2px 4px 10px;
  width: 40px;
  height: 40px;
  line-height: 36px;
}
body.is-phone-portrait .welcome-help h2 {
  margin: 2px 0 12px;
  font-size: 21px;
}
body.is-phone-portrait .welcome-help__content p {
  margin-bottom: 9px;
  font-size: 13px;
  line-height: 1.42;
}
body.is-phone-portrait .welcome-help__audio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body.is-phone-portrait .welcome-help__audio button {
  min-height: 44px;
  padding: 8px 6px;
}
body.is-phone-portrait .welcome-help__audio .narration-volume,
body.is-phone-portrait #welcomeAudioStatus {
  grid-column: 1 / -1;
  width: 100%;
}
body.is-phone-portrait #welcomeAudioVolume { width: 100%; }
body.is-phone-portrait .welcome-help__remember {
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.3;
}
body.is-phone-portrait .welcome-help__remember input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

@media (max-width: 380px) and (orientation: portrait) {
  body.is-phone-portrait .main-menu { grid-template-columns: 1fr; max-height: 56vh; }
  body.is-phone-portrait .welcome-help__audio { grid-template-columns: 1fr 1fr; }
  body.is-phone-portrait .welcome-help__audio button:last-of-type { grid-column: 1 / -1; }
}

/* Bienvenue/identité ont priorité absolue sur le menu portrait. */
body.is-phone-portrait.mobile-welcome-open .main-menu.is-open,
body.is-phone-portrait:has(.identity-overlay.is-visible) .main-menu.is-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Les fenêtres déjà existantes du faux Windows restent utilisables depuis le
   menu portrait ; on masque seulement le bureau et ses raccourcis de fond. */
body.is-phone-portrait .windows-desktop-ui:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 9920;
}
body.is-phone-portrait .windows-desktop-ui:not([hidden]) .windows-desktop-shortcuts {
  display: none !important;
}
body.is-phone-portrait .windows-clubs-window,
body.is-phone-portrait .windows-app-window {
  max-width: 94vw;
  max-height: 88dvh;
}

/* ==========================================================
   SMARTPHONE — ajustements ergonomiques portrait/paysage
   2026-09-03 : ne s'applique ni au PC ni aux tablettes.
   ========================================================== */

/* Portrait : menu plus léger visuellement et réellement centré. */
body.is-phone-portrait .main-menu {
  top: 50% !important;
  bottom: auto !important;
  max-height: min(72dvh, calc(var(--viewport-h) - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))));
  background: linear-gradient(145deg, rgba(17,18,19,.62), rgba(5,6,7,.52));
  border-color: rgba(255, 185, 53, .62);
  box-shadow: 0 16px 42px rgba(0,0,0,.42), 0 0 22px rgba(224,151,27,.08);
  backdrop-filter: blur(7px) saturate(1.05);
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
  transform: translate(-50%, -50%) !important;
}

body.is-phone-portrait .main-menu__item,
body.is-phone-portrait .main-menu__group > .main-menu__item {
  background: rgba(24,26,27,.66);
  border-color: rgba(255,190,65,.30);
  text-shadow: 0 1px 4px rgba(0,0,0,.88);
}

/* Mode « Afficher l'image » : le décor 9:16 reste seul à l'écran. */
body.is-phone-portrait.mobile-image-only .main-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-phone-portrait.mobile-image-only #sceneStage > .menu-toggle {
  display: block !important;
  z-index: 9800;
  top: max(12px, env(safe-area-inset-top)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: auto !important;
  left: auto !important;
  min-width: 0;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(255,190,65,.58);
  border-radius: 999px;
  background: rgba(8,9,10,.56);
  color: #fff7e4;
  box-shadow: 0 5px 18px rgba(0,0,0,.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

/* Le bouton de plein écran est réservé aux vrais téléphones en paysage.
   Il n'est affiché par le JS que si la Fullscreen API est disponible. */
.landscape-fullscreen-button {
  display: none;
}

body.is-phone-landscape {
  --stage-safe-bottom: 0px;
  width: 100%;
  height: var(--viewport-h);
  min-height: var(--viewport-h);
  overflow: hidden;
  overscroll-behavior: none;
}

html.is-phone-landscape {
  height: var(--viewport-h);
  min-height: var(--viewport-h);
  overflow: hidden;
}

body.is-phone-landscape .scene,
body.is-phone-landscape .scene__stage {
  max-height: var(--viewport-h);
}

body.is-phone-landscape .landscape-fullscreen-button:not([hidden]) {
  position: fixed;
  z-index: 10020;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: block;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(255,190,65,.46);
  border-radius: 999px;
  background: rgba(8,9,10,.58);
  color: #fff7e4;
  box-shadow: 0 5px 16px rgba(0,0,0,.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 380px) and (orientation: portrait) {
  body.is-phone-portrait .main-menu {
    max-height: min(78dvh, calc(var(--viewport-h) - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))));
  }
}

/* ==========================================================
   SMARTPHONE — séparation stricte PORTRAIT / PAYSAGE
   2026-09-03 : correctif d'état, sans effet PC/tablette.
   ========================================================== */

/* Message d’aide au sommet du menu portrait. */
body.is-phone-portrait .mobile-menu__brand {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 0 5px 4px;
  text-align: center;
}


body.is-phone-portrait .mobile-menu__help {
  margin: 0;
  max-width: 410px;
  color: rgba(255,248,231,.91);
  font-size: clamp(10px, 2.7vw, 12px);
  line-height: 1.3;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
}

/* En dehors du portrait, les éléments propres au menu mobile n'occupent rien. */
body:not(.is-phone-portrait) .mobile-menu__brand {
  display: none !important;
}

/* PORTRAIT = les hotspots immersifs restent inertes. Les modules ouverts
   volontairement depuis le menu (Météo, Maps, etc.) restent utilisables. */
body.is-phone-portrait #sceneHotspots,
body.is-phone-portrait #personHotspots,
body.is-phone-portrait #a01Nav,
body.is-phone-portrait #hotspotTooltip,
body.is-phone-portrait #tooltip {
  pointer-events: none !important;
}

/* Les raccourcis du faux bureau ne sont jamais visibles en portrait.
   Les fenêtres applicatives, elles, peuvent s'afficher quand le menu les ouvre. */
body.is-phone-portrait .windows-desktop-shortcuts,
body.is-phone-portrait .windows-desktop-shortcut {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* PAYSAGE téléphone = le menu portrait ne peut jamais rester superposé. */
body.is-phone-landscape .main-menu,
body.is-phone-landscape .mobile-portrait-background,
body.is-phone-landscape .mobile-menu__brand {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 380px) and (orientation: portrait) {
  body.is-phone-portrait .mobile-menu__help {
    font-size: 10px;
    line-height: 1.24;
  }
  body.is-phone-portrait .mobile-menu__title {
    padding-top: 0;
  }
}


/* ==========================================================
   SMARTPHONE — verrouillage retour PAYSAGE -> PORTRAIT
   2026-09-03 : empêche toute fuite des couches immersives.
   Ne concerne ni PC ni tablette.
   ========================================================== */

/* Aucun logo additionnel : l’identité du club est déjà intégrée au fond portrait. */

/* Ces couches appartiennent exclusivement à la visite immersive. Elles n'ont
   aucune fonction dans l'interface portrait et ne doivent jamais passer au-
   dessus du fond 9:16, même si data-view reste momentanément sur B07/B03. */
body.is-phone-portrait #b07PanelsLayer,
body.is-phone-portrait #b07PanelOverlay,
body.is-phone-portrait #tabletBackButton,
body.is-phone-portrait #screenExitButton,
body.is-phone-portrait #b03InfoBoardContent,
body.is-phone-portrait .b07-panels-layer,
body.is-phone-portrait .b07-panel-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Pendant les quelques millisecondes du nettoyage, rien du paysage n'est
   autorisé à repasser devant l'accueil portrait. */
body.is-phone-portrait.mobile-returning-to-portrait #windowsDesktopUi,
body.is-phone-portrait.mobile-returning-to-portrait .tv-library,
body.is-phone-portrait.mobile-returning-to-portrait .tv-media-menu,
body.is-phone-portrait.mobile-returning-to-portrait .video-player-overlay,
body.is-phone-portrait.mobile-returning-to-portrait .tutorial-library-overlay,
body.is-phone-portrait.mobile-returning-to-portrait .classifieds-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 380px) and (orientation: portrait) {
}

/* ==========================================================
   SMARTPHONE PORTRAIT — MODULES COMPACTS
   2026-09-03 : uniquement téléphone vertical.
   Ne modifie ni PC, ni tablette, ni visite immersive paysage.
   ========================================================== */
body.is-phone-portrait .windows-desktop-ui:not([hidden]) {
  position: absolute !important;
  inset: 0 !important;
  z-index: 9930 !important;
  pointer-events: none;
}
body.is-phone-portrait .windows-clubs-window,
body.is-phone-portrait .windows-app-window {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(94vw, 540px) !important;
  height: min(90dvh, calc(var(--viewport-h) - 28px)) !important;
  max-width: 94vw !important;
  max-height: min(90dvh, calc(var(--viewport-h) - 28px)) !important;
  min-height: 0 !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}
body.is-phone-portrait .windows-clubs-window__bar,
body.is-phone-portrait .windows-app-window__bar {
  height: 44px !important;
  min-height: 44px !important;
  position: relative;
  z-index: 3;
}
body.is-phone-portrait .windows-clubs-window__bar strong,
body.is-phone-portrait .windows-app-window__bar strong {
  font-size: 14px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-phone-portrait .windows-clubs-window__close,
body.is-phone-portrait .windows-app-window__close {
  width: 46px;
  min-width: 46px;
  font-size: 23px;
}
body.is-phone-portrait .windows-clubs-window__body {
  height: calc(100% - 44px) !important;
  padding: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.is-phone-portrait .windows-clubs-help {
  margin-bottom: 8px;
  padding: 7px 9px;
  font-size: 11px;
}
body.is-phone-portrait .windows-clubs-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
body.is-phone-portrait .windows-club-icon {
  min-height: 92px;
  padding: 7px 5px;
  gap: 5px;
  font-size: 11px;
}
body.is-phone-portrait .windows-club-icon img,
body.is-phone-portrait .windows-club-icon__fallback {
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
}
body.is-phone-portrait .windows-app-window iframe {
  display: block;
  width: 100% !important;
  height: calc(100% - 44px) !important;
  min-height: 0 !important;
  border: 0;
}
body.is-phone-portrait .windows-weather-app,
body.is-phone-portrait .windows-map-app,
body.is-phone-portrait .windows-mail-app {
  height: calc(100% - 44px) !important;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.is-phone-portrait .windows-weather-app__search,
body.is-phone-portrait .windows-map-app__toolbar,
body.is-phone-portrait .windows-mail-form {
  padding: 10px !important;
}
body.is-phone-portrait .windows-weather-app__search {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 7px !important;
}
body.is-phone-portrait .windows-weather-app__search #windowsWeatherLocate {
  grid-column: 1 / -1;
  width: max-content;
}
body.is-phone-portrait .windows-weather-current {
  padding: 12px !important;
  gap: 10px !important;
}
body.is-phone-portrait .windows-weather-current__icon {
  font-size: 46px !important;
}
body.is-phone-portrait .windows-weather-current h2 {
  font-size: 18px !important;
}
body.is-phone-portrait .windows-weather-forecast {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 7px !important;
  padding: 0 10px 12px !important;
}

/* Vidéothèque : en portrait elle devient une vraie fenêtre mobile indépendante
   de la position de l'écran TV B03. Cela corrige le display:none hérité des vues. */
body.is-phone-portrait .scene__stage .tv-library,
body.is-phone-portrait .scene__stage:not([data-view="B03"]):not([data-view="B01SCREEN"]) .tv-library {
  display: flex !important;
  position: absolute !important;
  z-index: 9940 !important;
  left: 50% !important;
  top: 50% !important;
  width: min(94vw, 540px) !important;
  height: min(82dvh, 650px) !important;
  max-height: calc(var(--viewport-h) - 34px) !important;
  border-radius: 12px !important;
  transform: translate(-50%, -50%) scale(.985) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.72), 0 0 0 1px rgba(255,190,65,.24) !important;
}
body.is-phone-portrait .scene__stage .tv-library:not(.is-open) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.is-phone-portrait .scene__stage .tv-library.is-open {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(1) !important;
}
body.is-phone-portrait .tv-library__header {
  min-height: 44px !important;
  padding: 7px 8px 7px 12px !important;
  font-size: 15px !important;
}
body.is-phone-portrait .tv-library__close {
  width: 38px !important;
  height: 38px !important;
  font-size: 22px !important;
}
body.is-phone-portrait .tv-library__body {
  min-height: 0;
  grid-template-columns: 34px minmax(0,1fr) 34px !important;
}
body.is-phone-portrait .tv-library__viewport {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 4px !important;
  overscroll-behavior: contain;
}
body.is-phone-portrait .tv-library__track {
  height: auto !important;
  min-height: 100%;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  grid-auto-rows: minmax(0, auto);
  align-content: start;
  gap: 8px !important;
}
body.is-phone-portrait .tv-video-card {
  height: auto !important;
  min-height: 0;
  border-radius: 8px;
}
body.is-phone-portrait .tv-video-card__text {
  padding: 6px 7px 8px !important;
}
body.is-phone-portrait .tv-video-card__text strong {
  font-size: 12px !important;
  white-space: normal !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body.is-phone-portrait .tv-video-card__text small {
  font-size: 10px !important;
}
body.is-phone-portrait .tv-library__arrow {
  width: 34px !important;
  font-size: 26px !important;
}
body.is-phone-portrait .tv-library__status {
  min-height: 24px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
}
body.is-phone-portrait .tv-video-preview { display: none !important; }

body.is-phone-portrait .video-player-overlay {
  z-index: 10040 !important;
  padding: 10px !important;
}
body.is-phone-portrait .video-player-overlay__dialog {
  width: min(96vw, 560px) !important;
  max-height: 90dvh !important;
  border-radius: 10px !important;
}
body.is-phone-portrait .video-player-overlay__topbar {
  min-height: 44px !important;
  padding: 7px 8px 7px 11px !important;
  gap: 7px !important;
}
body.is-phone-portrait .video-player-overlay__topbar strong {
  font-size: 13px;
}
body.is-phone-portrait .video-player-overlay__close {
  min-height: 38px;
  padding: 6px 9px !important;
}
body.is-phone-portrait .video-player-overlay__frame {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
}

/* Tutoriels */
body.is-phone-portrait .tutorial-library-overlay {
  z-index: 9940 !important;
  padding: 10px !important;
  align-items: center !important;
}
body.is-phone-portrait .tutorial-library-overlay__dialog {
  width: min(94vw, 540px) !important;
  height: auto !important;
  max-height: 90dvh !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
body.is-phone-portrait .tutorial-library-overlay__bar {
  min-height: 50px !important;
  padding: 7px 8px 7px 11px !important;
  gap: 8px !important;
}
body.is-phone-portrait .tutorial-library-overlay__bar strong { font-size: 14px !important; }
body.is-phone-portrait .tutorial-library-overlay__bar small { display: none !important; }
body.is-phone-portrait .tutorial-library-overlay__back {
  min-height: 38px !important;
  padding: 6px 9px !important;
  font-size: 11px !important;
}
body.is-phone-portrait .tutorial-library-overlay__body {
  max-height: calc(90dvh - 50px) !important;
  padding: 9px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}
body.is-phone-portrait .tutorial-library-grid {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 8px !important;
}
body.is-phone-portrait .tutorial-card {
  min-width: 0;
}
body.is-phone-portrait .tutorial-card__body {
  padding: 7px !important;
}
body.is-phone-portrait .tutorial-card__body strong { font-size: 12px !important; }
body.is-phone-portrait .tutorial-card__body small { font-size: 10px !important; }

/* Petites annonces */
body.is-phone-portrait .classifieds-overlay {
  z-index: 9940 !important;
  padding: 10px !important;
  align-items: center !important;
}
body.is-phone-portrait .classifieds-overlay__dialog {
  width: min(94vw, 560px) !important;
  height: auto !important;
  max-height: 90dvh !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
body.is-phone-portrait .classifieds-overlay__bar {
  min-height: 48px !important;
  padding: 6px 7px 6px 10px !important;
}
body.is-phone-portrait .classifieds-overlay__bar strong { font-size: 14px !important; }
body.is-phone-portrait .classifieds-overlay__bar small { display: none !important; }
body.is-phone-portrait .classifieds-overlay__close {
  width: 40px !important;
  height: 40px !important;
  font-size: 23px !important;
}
body.is-phone-portrait .classifieds-overlay__content {
  max-height: calc(90dvh - 48px) !important;
  padding: 9px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.is-phone-portrait .classifieds-public-actions {
  margin-bottom: 8px !important;
  padding: 8px !important;
  gap: 7px !important;
  font-size: 10px !important;
}
body.is-phone-portrait .classifieds-propose-button {
  min-height: 40px !important;
  width: auto !important;
  padding: 7px 10px !important;
}
body.is-phone-portrait .classifieds-toolbar {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}
body.is-phone-portrait .classifieds-toolbar select,
body.is-phone-portrait .classifieds-toolbar input {
  min-height: 40px !important;
  padding: 6px 7px !important;
  font-size: 12px !important;
}
body.is-phone-portrait .classifieds-status {
  min-height: 18px !important;
  margin: 2px 0 6px !important;
  font-size: 11px !important;
}
body.is-phone-portrait .classifieds-cards {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
body.is-phone-portrait .classified-card {
  grid-template-columns: 96px minmax(0,1fr) !important;
  grid-template-rows: auto !important;
  min-height: 126px !important;
  border-radius: 9px !important;
}
body.is-phone-portrait .classified-card__photo { min-height: 126px !important; }
body.is-phone-portrait .classified-card__body { padding: 8px !important; }
body.is-phone-portrait .classified-card h3 { margin: 6px 0 3px !important; font-size: 14px !important; }
body.is-phone-portrait .classified-card__meta { font-size: 10px !important; }
body.is-phone-portrait .classified-card__excerpt {
  margin: 5px 0 7px !important;
  font-size: 11px !important;
  -webkit-line-clamp: 2 !important;
}
body.is-phone-portrait .classified-card__footer { font-size: 10px !important; }
body.is-phone-portrait .classified-card__footer strong { font-size: 15px !important; }
body.is-phone-portrait #classifiedsDetailContent {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
body.is-phone-portrait .classified-detail__main-photo {
  max-height: 32dvh;
  aspect-ratio: 4 / 3;
}
body.is-phone-portrait .classified-detail__facts {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 6px !important;
}
body.is-phone-portrait .classified-detail__info h2 { font-size: 20px !important; }
body.is-phone-portrait .classified-detail__description,
body.is-phone-portrait .classified-detail__contact { padding: 10px !important; font-size: 12px !important; }
body.is-phone-portrait .classifieds-proposal__form { padding: 10px !important; }
body.is-phone-portrait .classifieds-form-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
body.is-phone-portrait .classifieds-form-grid .is-wide { grid-column: auto !important; }
body.is-phone-portrait .classifieds-form-grid input,
body.is-phone-portrait .classifieds-form-grid select,
body.is-phone-portrait .classifieds-form-grid textarea { min-width: 0 !important; max-width: 100% !important; }
body.is-phone-portrait .classifieds-form-grid textarea { min-height: 100px !important; }
body.is-phone-portrait .classifieds-lightbox { padding: 10px !important; }
body.is-phone-portrait .classifieds-lightbox img { max-width: 94vw !important; max-height: 86dvh !important; }

@media (max-width: 380px) and (orientation: portrait) {
  body.is-phone-portrait .windows-clubs-grid,
  body.is-phone-portrait .tutorial-library-grid {
    grid-template-columns: 1fr !important;
  }
  body.is-phone-portrait .classifieds-toolbar,
  body.is-phone-portrait .classified-detail__facts {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   SEO éditorial — introductions courtes dans les modules existants
   N'altère pas la navigation ni le comportement des overlays.
============================================================ */
.module-editorial-intro {
  display: block;
  margin-top: 2px;
  color: inherit;
  opacity: .78;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
}
.tv-library__header > div,
.tv-photos-overlay__topbar > div { min-width: 0; }
@media (max-width: 700px) and (orientation: portrait) {
  .module-editorial-intro { font-size: 10px; line-height: 1.2; }
}