/* ==========================================================
   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 — calage vidéo restauré depuis la dernière version validée avant décalage. */
.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 — Boutique merchandising.
   Hotspot recalé plus franchement vers la gauche pour épouser
   la boutique visible sur le site sans toucher aux images.
   L'image du hotspot reste sur le serveur et n'est pas embarquée ici.
   ========================================================== */
.scene__stage[data-view="B01"] .scene-hotspot--boutique {
  left: 1.196172%; /* 20 / 1672 : ancien x=34, encore 14 px à gauche */
  top: 11.689692%;
  width: 27.468582%;
  height: 69.394261%;
  overflow: visible;
}
.scene__stage[data-view="B01"] .scene-hotspot--boutique .scene-hotspot__mask {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 0 !important;
  filter: none !important;
  transform: translate3d(-1px, 0, 0) !important;
  backface-visibility: hidden;
  will-change: opacity, filter;
}
.scene__stage[data-view="B01"] .scene-hotspot--boutique.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B01"] .scene-hotspot--boutique:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
  transform: translate3d(-1px, 0, 0) !important;
}
.scene__stage[data-view="B01"] .scene-hotspot--boutique.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
  transform: translate3d(-1px, 0, 0) !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: pointer;
}

.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.827751%; /* 26-09-2026 : ajustement fin Charte : 4 px à gauche depuis la version +8 px ; position finale x=482 sur B01 1672 px */
  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: translate3d(-1px, 0, 0) !important;
  backface-visibility: hidden;
  will-change: opacity, filter;
}

.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;
  transform: translate3d(-1px, 0, 0) !important;
}

.scene__stage[data-view="B01"] .scene-hotspot--charte.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
  transform: translate3d(-1px, 0, 0) !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; }
}


/* ==========================================================
   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 {
  /* Pièces détachées n'a plus de panneau-image de fond :
     la grille doit donc vivre dans le flux normal au lieu d'être absolument
     positionnée dans un canvas sans hauteur. */
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  align-content: start;
  padding: 8px 0;
}

.b07-panel-overlay[data-panel="liens_utiles"] .b07-panel-overlay__canvas {
  width: min(100%, 1320px);
  min-height: 0;
}

.b07-panel-overlay[data-panel="liens_utiles"] .b07-panel-overlay__image {
  display: none;
}

.b07-panel-overlay[data-panel="liens_utiles"] .b07-panel-overlay__scroll {
  min-height: 180px;
  max-height: calc(94vh - 64px);
  overflow-y: auto;
}

.b07-panel-overlay[data-panel="liens_utiles"] .b07-panel-zoom-item {
  min-height: 118px;
  grid-template-rows: minmax(64px, auto) auto auto;
}

.b07-panel-overlay[data-panel="liens_utiles"] .b07-panel-zoom-item img {
  max-height: 82px;
}

.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 — 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: visible;
  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-color: 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-color: rgba(70, 145, 225, .30);
  border-color: rgba(220, 240, 255, .76);
}

.windows-desktop-shortcut.is-selected {
  background-color: 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--youtube {
  left: 53.169856%;
  top: 18.278427%;
  width: 12.978469%;
  height: 27.842720%;
}
/* Efface réellement l’ancienne icône Photos gravée dans plein_ecran_on.png.
   Le fond ci-dessous est le même morceau du bureau Windows, repris depuis
   l’image de fond propre old_plein_ecran_on.png. Le logo YouTube transparent
   reste ensuite affiché au-dessus. */
.windows-desktop-shortcut--youtube {
  background-image: url("../assets/images/navigation/youtube_clean_background.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.windows-desktop-shortcut--youtube img,
.windows-desktop-shortcut--youtube .windows-youtube-fallback {
  z-index: 1;
}
.windows-youtube-fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 72%;
  aspect-ratio: 1.45 / 1;
  border-radius: 20%;
  background: #c00;
  color: #fff;
  font-size: clamp(18px, 2.4vw, 38px);
  line-height: 1;
  pointer-events: none;
}

/* Infobulles des raccourcis du faux bureau Windows. */
.windows-desktop-shortcut[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(3px);
  z-index: 8;
  max-width: 180px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 5px;
  background: rgba(18, 24, 34, .94);
  box-shadow: 0 5px 14px rgba(0,0,0,.35);
  color: #fff;
  font: 600 12px/1.2 "Segoe UI", Arial, sans-serif;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}
.windows-desktop-shortcut[data-tooltip]:hover::before,
.windows-desktop-shortcut[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.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 {
  /* Pièces détachées n'a plus de panneau-image de fond :
     la grille doit donc vivre dans le flux normal au lieu d'être absolument
     positionnée dans un canvas sans hauteur. */
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  align-content: start;
  padding: 8px 0;
}

.b07-panel-overlay[data-panel="liens_utiles"] .b07-panel-overlay__canvas {
  width: min(100%, 1320px);
  min-height: 0;
}

.b07-panel-overlay[data-panel="liens_utiles"] .b07-panel-overlay__image {
  display: none;
}

.b07-panel-overlay[data-panel="liens_utiles"] .b07-panel-overlay__scroll {
  min-height: 180px;
  max-height: calc(94vh - 64px);
  overflow-y: auto;
}

.b07-panel-overlay[data-panel="liens_utiles"] .b07-panel-zoom-item {
  min-height: 118px;
  grid-template-rows: minmax(64px, auto) auto auto;
}

.b07-panel-overlay[data-panel="liens_utiles"] .b07-panel-zoom-item img {
  max-height: 82px;
}

.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 auto minmax(0, 1fr);
  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: start; }
.scene-topbar > .scene-topbar__right { justify-self: end; margin-left: 0; }

/* 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);
}
.scene-topbar > .online-presence .online-presence__dropdown {
  left: 0;
  right: auto;
}

@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 auto minmax(0, 1fr);
  }
  .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-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%; }
.person-hotspot--b07-marie-joe  {
  /* Ajustement ultra-fin 16/09/2026 :
     remontée d'environ 5 px uniquement. */
  left: 80.65%;
  top: 32.47%;
  width: 25.27%;
}

/* 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);
}

/* Marie-Joe / Ninja a été déplacée du bureau B01 vers l'atelier B07.
   Son PNG de silhouette devient aussi son calque de premier plan afin qu'elle
   reste visuellement DEVANT le panneau Constructeurs et ses couches dynamiques. */
.scene__stage[data-view="B07"] .person-hotspot--b07-marie-joe.is-person-visible {
  opacity: 1;
  filter: none;
  z-index: 12;
}

.scene__stage[data-view="B07"] .person-hotspot--b07-marie-joe.is-person-visible.is-person-hover {
  opacity: 1;
  filter:
    drop-shadow(0 0 2px rgba(255, 59, 48, 0.98))
    drop-shadow(0 0 5px rgba(255, 59, 48, 0.78))
    drop-shadow(0 0 10px rgba(217, 31, 24, 0.52));
}

/* 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;
}


/* ============================================================
   TÉLÉPHONE PAYSAGE — TV B03 / VIDÉOS
   L'introduction éditoriale est utile sur les pages, mais dans l'écran TV
   miniature elle prend toute la hauteur et masque les vignettes.
============================================================ */
body.is-phone-landscape .tv-library__header .module-editorial-intro {
  display: none !important;
}

body.is-phone-landscape .tv-library__header {
  min-height: 18px !important;
  padding: 2px 4px 2px 5px !important;
  font-size: clamp(6px, .66vw, 9px) !important;
  line-height: 1 !important;
}

body.is-phone-landscape .tv-library__close {
  width: 16px !important;
  height: 16px !important;
  font-size: 13px !important;
  line-height: 14px !important;
}

body.is-phone-landscape .tv-library__body {
  min-height: 0 !important;
}

body.is-phone-landscape .tv-library__viewport {
  min-height: 0 !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

body.is-phone-landscape .tv-library__status {
  min-height: 8px !important;
  padding: 0 3px 1px !important;
  font-size: 5px !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;
}

/* Pendant la lecture en portrait, la liste des vidéos disparaît réellement
   de l'écran. Elle revient à la fermeture du lecteur. */
body.is-phone-portrait .scene__stage .tv-library.is-open.is-player-active {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !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: 9995 !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; }
}

/* ============================================================
   CHAT LES CORNEILLAS — intégré près du compteur de présence
============================================================ */
.scene-topbar__right > .online-presence{order:20}
.scene-topbar__right > .corneillas-chat{order:21}
.corneillas-chat{position:relative;flex:0 0 auto;z-index:9700}
.corneillas-chat__toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:7px 13px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(10,12,14,.78);color:#fff;font:inherit;font-size:12px;font-weight:800;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 5px 18px rgba(0,0,0,.28)}
.corneillas-chat__toggle:hover,.corneillas-chat__toggle:focus-visible,.corneillas-chat__toggle[aria-expanded="true"]{border-color:rgba(226,166,44,.72);background:rgba(24,21,14,.92);outline:none}
.corneillas-chat__panel{position:absolute;right:0;top:auto;bottom:calc(100% + 10px);width:min(430px,calc(100vw - 24px));height:min(570px,calc(100dvh - 88px));display:grid;grid-template-rows:auto auto 1fr auto auto;border:1px solid rgba(230,185,77,.52);border-radius:17px;overflow:hidden;background:rgba(13,15,17,.94);color:#f6f3ea;box-shadow:0 18px 48px rgba(0,0,0,.55);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}
.corneillas-chat__panel[hidden]{display:none!important}
.corneillas-chat__header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(164,112,20,.24),rgba(20,20,18,.15))}
.corneillas-chat__header strong{display:block;font-size:14px}.corneillas-chat__header small{display:block;margin-top:2px;color:#c8c3b6;font-size:10px;font-weight:500}
.corneillas-chat__close{width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:23px;line-height:1;cursor:pointer}.corneillas-chat__close:hover{background:rgba(255,255,255,.16)}
.corneillas-chat__channels{display:flex;gap:7px;overflow-x:auto;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.09);scrollbar-width:thin}
.corneillas-chat__channels button{flex:0 0 auto;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 11px;background:rgba(255,255,255,.06);color:#e8e4da;font-size:11px;font-weight:750;cursor:pointer}
.corneillas-chat__channels button.is-active{background:linear-gradient(145deg,#d89b27,#8a5909);color:#111;border-color:#e9ba55}
.corneillas-chat__messages{min-height:0;overflow-y:auto;padding:10px 10px 14px;overscroll-behavior:contain}
.corneillas-chat__message{margin:0 0 9px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.08)}
.corneillas-chat__message.is-member{border-left:3px solid #dca331}.corneillas-chat__message.is-visitor{border-left:3px solid #6e9ec7}
.corneillas-chat__message-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}.corneillas-chat__message-head strong{font-size:11px;color:#f3cb70}.corneillas-chat__message-head time{margin-left:auto;font-size:9px;color:#979c9f}.corneillas-chat__message-body{font-size:12px;line-height:1.42;overflow-wrap:anywhere}
.corneillas-chat__delete{border:0;background:transparent;color:#bbb;cursor:pointer;padding:2px 3px;font-size:11px}.corneillas-chat__delete:hover{color:#ff8585}
.corneillas-chat__status{min-height:17px;padding:0 11px 4px;color:#b8bdc1;font-size:10px}.corneillas-chat__status.is-error{color:#ffaaa3}.corneillas-chat__empty{color:#a7abad;font-size:11px;padding:8px}
.corneillas-chat__emoji{display:flex;flex-wrap:wrap;gap:4px;padding:7px 10px;border-top:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.22)}.corneillas-chat__emoji[hidden]{display:none!important}.corneillas-chat__emoji button{width:30px;height:30px;border:0;border-radius:7px;background:rgba(255,255,255,.07);font-size:17px;cursor:pointer}.corneillas-chat__emoji button:hover{background:rgba(255,255,255,.16)}
.corneillas-chat__composer{display:grid;grid-template-columns:34px 34px 1fr auto;gap:6px;align-items:end;padding:9px 10px calc(9px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.24)}
.corneillas-chat__composer textarea{min-width:0;max-height:96px;resize:none;border:1px solid rgba(255,255,255,.19);border-radius:10px;padding:8px 9px;background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:12px;line-height:1.35;outline:none}.corneillas-chat__composer textarea:focus{border-color:rgba(226,166,44,.72)}
.corneillas-chat__tool{width:34px;height:34px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:rgba(255,255,255,.07);color:#fff;cursor:pointer}.corneillas-chat__tool.is-listening{background:rgba(165,31,31,.7)}
.corneillas-chat__send{min-height:34px;border:0;border-radius:9px;padding:0 11px;background:linear-gradient(145deg,#e1a733,#96620d);color:#111;font-size:11px;font-weight:900;cursor:pointer}

@media (max-width:900px){
  .scene-topbar__right{gap:6px}.corneillas-chat__toggle{padding-inline:10px}.corneillas-chat__panel{position:fixed;left:10px;right:10px;top:auto;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;height:min(64dvh,560px);max-height:calc(100dvh - 24px)}
}
body.is-phone-portrait .corneillas-chat{z-index:9850}
body.is-phone-portrait .corneillas-chat__panel{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));height:min(62dvh,520px);max-height:calc(100dvh - 16px)}
body.is-phone-portrait.corneillas-chat-open .main-menu{pointer-events:none;opacity:.34}
body.is-phone-portrait.corneillas-chat-open .corneillas-chat__panel{pointer-events:auto}
@media (max-width:430px){.corneillas-chat__composer{grid-template-columns:32px 32px 1fr}.corneillas-chat__send{grid-column:3;justify-self:end;margin-top:1px}.corneillas-chat__panel{height:min(68dvh,560px)}}

/* Sécurité de placement : le panneau s’ouvre vers le haut depuis la barre inférieure. */


/* ============================================================
   04-09-2026 — CHAT + MENU SIMULTANÉS
   Le chat et le menu restent utilisables en même temps sans chevauchement.
============================================================ */
@media (min-width: 901px) {
  body.corneillas-chat-open .main-menu.is-open {
    left: 12px !important;
    right: auto !important;
    width: min(1180px, calc(100% - 470px)) !important;
    max-width: calc(100% - 470px) !important;
    transform: translate(0, 0) !important;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: visible;
  }
}

@media (min-width: 621px) and (max-width: 900px) {
  body.corneillas-chat-open .corneillas-chat__panel {
    left: 52% !important;
    right: 8px !important;
    width: auto !important;
    height: min(68dvh, 560px) !important;
  }
  body.corneillas-chat-open .main-menu.is-open {
    left: 8px !important;
    right: auto !important;
    width: calc(52% - 20px) !important;
    max-width: calc(52% - 20px) !important;
    transform: translate(0, 0) !important;
    max-height: min(68dvh, 560px) !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 620px) {
  body.corneillas-chat-open .main-menu.is-open {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(50dvh + 18px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: 39dvh !important;
    transform: translate(0, 0) !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  body.corneillas-chat-open .corneillas-chat__panel {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: 47dvh !important;
    max-height: 47dvh !important;
  }
}

body.is-phone-portrait.corneillas-chat-open .main-menu {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* ============================================================
   04-09-2026 — MENU TÉLÉPHONE PORTRAIT + CHAT MOBILE
   Strictement limité à body.is-phone-portrait : PC/tablette/paysage inchangés.
============================================================ */
.mobile-menu__account,
.mobile-menu__presence,
.mobile-menu__chat,
.mobile-menu__join-phone { display: none; }

.corneillas-chat__badge,
.mobile-menu__chat-badge,
.corneillas-chat__channel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b92424;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 1px 6px rgba(0,0,0,.36);
}
.corneillas-chat__badge[hidden],
.mobile-menu__chat-badge[hidden] { display: none !important; }
.corneillas-chat__channel-badge { min-width: 17px; height: 17px; padding-inline: 4px; margin-left: 3px; }

body.is-phone-portrait .mobile-menu__account {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255,190,65,.22);
  border-radius: 12px;
  background: rgba(0,0,0,.22);
}
body.is-phone-portrait .mobile-menu__account-status {
  grid-column: 1 / -1;
  padding: 2px 5px 4px;
  color: #f4d58a;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}
body.is-phone-portrait .mobile-menu__account .main-menu__item { min-height: 44px; }
body.is-phone-portrait .mobile-menu__visitor-exit[hidden] { display: none !important; }

body.is-phone-portrait .mobile-menu__presence {
  display: block;
  grid-column: 1 / -1;
  min-width: 0;
}
body.is-phone-portrait .mobile-menu__presence-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.is-phone-portrait .mobile-menu__presence-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,190,65,.17);
  color: #ffd77e;
  font-size: 11px;
}
body.is-phone-portrait .mobile-menu__presence-list {
  margin: 7px 0 0;
  padding: 7px;
  max-height: 128px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(0,0,0,.28);
  overscroll-behavior: contain;
}
body.is-phone-portrait .mobile-menu__presence-list[hidden] { display: none !important; }
body.is-phone-portrait .mobile-menu__presence-list li {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #fff8e7;
  font-size: 12px;
  line-height: 1.2;
}
body.is-phone-portrait .mobile-menu__presence-list li:last-child { border-bottom: 0; }
body.is-phone-portrait .mobile-menu__presence-list .is-empty { opacity: .7; }

body.is-phone-portrait .mobile-menu__chat {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.is-phone-portrait .mobile-menu__join-phone { display: inline; }
body.is-phone-portrait .mobile-menu__join-desktop { display: none; }

/* Le chat est la même instance que sur PC, simplement déplacée sous <body>
   en portrait car la topbar immersive est volontairement masquée. */
body.is-phone-portrait > .corneillas-chat {
  position: fixed;
  inset: 0;
  z-index: 9950;
  pointer-events: none;
}
body.is-phone-portrait > .corneillas-chat .corneillas-chat__toggle { display: none !important; }
body.is-phone-portrait > .corneillas-chat .corneillas-chat__panel {
  pointer-events: auto;
  position: fixed;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  top: auto !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  width: auto !important;
  height: min(70dvh, calc(var(--chat-vvh, 100dvh) - 16px));
  max-height: calc(var(--chat-vvh, 100dvh) - 16px) !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
body.is-phone-portrait .corneillas-chat__messages {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.is-phone-portrait .corneillas-chat__composer {
  position: relative;
  z-index: 2;
  padding-bottom: max(9px, env(safe-area-inset-bottom));
}
body.is-phone-portrait .corneillas-chat__composer textarea {
  font-size: 16px; /* évite le zoom iOS et garde le clavier stable */
  max-height: 88px;
}

/* Quand le chat est ouvert, menu et chat partagent la hauteur utile. */
@media (max-width: 620px) and (orientation: portrait) {
  body.is-phone-portrait.corneillas-chat-open .main-menu.is-open {
    top: max(8px, env(safe-area-inset-top)) !important;
    bottom: auto !important;
    transform: translate(-50%, 0) !important;
    max-height: 37dvh !important;
  }
  body.is-phone-portrait.corneillas-chat-open > .corneillas-chat .corneillas-chat__panel {
    height: min(49dvh, calc(var(--chat-vvh, 100dvh) * .49)) !important;
    max-height: min(49dvh, calc(var(--chat-vvh, 100dvh) * .49)) !important;
  }
}

@media (max-width: 380px) and (orientation: portrait) {
  body.is-phone-portrait .mobile-menu__account { grid-template-columns: 1fr; }
  body.is-phone-portrait .mobile-menu__account-status { grid-column: 1; }
  body.is-phone-portrait .corneillas-chat__composer {
    grid-template-columns: 34px 34px minmax(0,1fr);
  }
  body.is-phone-portrait .corneillas-chat__send {
    grid-column: 3;
    min-height: 38px;
  }
}


/* ============================================================
   04-09-2026 — correctif ciblé : clavier virtuel + hotspot adhésion B07
   Aucun impact sur PC/tablette/paysage hors règles B07 explicites.
============================================================ */

/* Quand le clavier virtuel est ouvert, on s'aligne sur le visualViewport réel.
   Le panneau ne dépend plus d'un bottom/100vh qui varie selon le navigateur. */
body.is-phone-portrait.corneillas-chat-keyboard-open > .corneillas-chat .corneillas-chat__panel {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: calc(var(--chat-vv-top, 0px) + 6px) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(calc(var(--chat-vvw, 100vw) - 16px), 520px) !important;
  max-width: calc(var(--chat-vvw, 100vw) - 16px) !important;
  height: calc(var(--chat-vvh, 100dvh) - 12px) !important;
  max-height: calc(var(--chat-vvh, 100dvh) - 12px) !important;
  margin: 0 !important;
  overflow: hidden !important;
}
body.is-phone-portrait.corneillas-chat-keyboard-open .corneillas-chat__messages {
  min-height: 0 !important;
  overflow-y: auto !important;
}
body.is-phone-portrait.corneillas-chat-keyboard-open .corneillas-chat__composer {
  flex: 0 0 auto;
  padding-bottom: 8px !important;
}

/* B07 : grande bannière centrale au-dessus du mur d'outils.
   Coordonnées calées sur le décor 1672×941 sans toucher à l'image. */
.scene__stage[data-view="B07"] .scene-hotspot--join-club-banner {
  display: block;
  left: 33.55%;
  top: 11.35%;
  width: 30.90%;
  height: 19.70%;
  border: 0;
  border-radius: 2px;
  background: transparent;
  overflow: visible;
}
.scene__stage[data-view="B07"] .scene-hotspot--join-club-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px rgba(255, 218, 72, 0), 0 0 0 rgba(255, 211, 57, 0);
  background: rgba(255, 211, 57, 0);
  transition: box-shadow .14s ease, background .14s ease;
  pointer-events: none;
}
.scene__stage[data-view="B07"] .scene-hotspot--join-club-banner:hover::before,
.scene__stage[data-view="B07"] .scene-hotspot--join-club-banner:focus-visible::before {
  background: rgba(255, 220, 72, .055);
  box-shadow: inset 0 0 0 2px rgba(255, 224, 88, .84), 0 0 18px rgba(255, 205, 42, .70);
}
.scene__stage[data-view="B07"] .scene-hotspot--join-club-banner.is-clicked::before {
  background: rgba(68, 220, 92, .075);
  box-shadow: inset 0 0 0 2px rgba(80, 235, 105, .92), 0 0 18px rgba(66, 225, 93, .72);
}

/* ============================================================
   SALON VIDÉO V1 — intégré au chat existant
============================================================ */
.corneillas-chat__header-actions{display:flex;align-items:center;gap:6px}
.corneillas-chat__video-toggle,.corneillas-video__back{border:1px solid rgba(255,255,255,.16);border-radius:9px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font:inherit}
.corneillas-chat__video-toggle{width:34px;height:34px;padding:0;font-size:17px}
.corneillas-chat__video-toggle:hover,.corneillas-chat__video-toggle:focus-visible,.corneillas-video__back:hover,.corneillas-video__back:focus-visible{border-color:rgba(226,166,44,.72);background:rgba(226,166,44,.14);outline:none}
.corneillas-video{position:absolute;inset:0;z-index:12;display:grid;grid-template-rows:auto 1fr;background:rgba(10,12,14,.985);color:#f6f3ea}
.corneillas-video[hidden]{display:none!important}
.corneillas-video__header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(164,112,20,.24),rgba(20,20,18,.15))}
.corneillas-video__back{padding:7px 10px;font-size:11px;font-weight:800}
.corneillas-video__body{min-height:0;overflow-y:auto;padding:12px;overscroll-behavior:contain}
.corneillas-video__status{min-height:18px;margin-bottom:6px;color:#b8bdc1;font-size:11px}.corneillas-video__status.is-error{color:#ffaaa3}
.corneillas-video__create{display:grid;grid-template-columns:1fr;gap:7px;margin-bottom:12px}
.corneillas-video__create input,.corneillas-video__create select{min-width:0;border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:9px 10px;background:#1a1d20;color:#fff;font:inherit;font-size:12px}
.corneillas-video__create button,.corneillas-video__room-card button,.corneillas-video__prejoin-actions button,.corneillas-video__controls button,.corneillas-video__login{border:1px solid rgba(226,166,44,.55);border-radius:9px;background:linear-gradient(145deg,#d89b27,#8a5909);color:#111;font-weight:900;cursor:pointer;text-decoration:none}
.corneillas-video__create button,.corneillas-video__room-card button{padding:8px 10px;font-size:11px}
.corneillas-video__room-card button:disabled{cursor:not-allowed;opacity:.48;filter:grayscale(.5)}
.corneillas-video__rooms{display:grid;gap:8px}.corneillas-video__room-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid rgba(255,255,255,.11);border-radius:11px;background:rgba(255,255,255,.045)}
.corneillas-video__room-card strong{display:block;font-size:12px}.corneillas-video__room-card small{display:block;margin-top:3px;color:#aeb3b6;font-size:10px}
.corneillas-video__empty{margin:8px 0;color:#aeb3b6;font-size:12px;line-height:1.45}.corneillas-video__login{display:inline-flex;margin-top:8px;padding:9px 12px;font-size:11px}
.corneillas-video__prejoin{padding:12px;border:1px solid rgba(226,166,44,.28);border-radius:12px;background:rgba(255,255,255,.045)}
.corneillas-video__prejoin[hidden],.corneillas-video__room[hidden],.corneillas-video__lobby[hidden]{display:none!important}
.corneillas-video__prejoin h3{margin:0 0 7px;font-size:16px}.corneillas-video__prejoin p{margin:0 0 12px;color:#bbc0c3;font-size:11px;line-height:1.45}
.corneillas-video__prejoin label{display:block;margin:9px 0;font-size:12px}.corneillas-video__prejoin input{margin-right:7px}
.corneillas-video__prejoin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.corneillas-video__prejoin-actions button{padding:9px 11px;font-size:11px}
.corneillas-video__room{display:grid;grid-template-rows:1fr auto;min-height:calc(100% - 26px)}
.corneillas-video__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.corneillas-video__tile{position:relative;min-height:125px;aspect-ratio:16/10;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:11px;background:radial-gradient(circle at 50% 40%,#30363a,#121517)}
.corneillas-video__tile video{width:100%;height:100%;display:block;object-fit:cover;background:#090a0b}.corneillas-video__tile.is-local{border-color:rgba(226,166,44,.56)}
.corneillas-video__tile-name{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);padding:3px 6px;border-radius:6px;background:rgba(0,0,0,.65);font-size:9px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.corneillas-video__controls{position:sticky;bottom:-12px;display:flex;gap:6px;flex-wrap:wrap;margin:10px -12px -12px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.1);background:rgba(8,10,11,.96)}
.corneillas-video__controls button{flex:1 1 auto;min-height:36px;padding:7px 9px;font-size:10px}
#corneillasVideoLeave{background:#4e2525;color:#fff;border-color:#8f4848}#corneillasVideoCloseRoom{background:#5f1f1f;color:#fff;border-color:#a34a4a}
@media(max-width:700px){.corneillas-video__body{padding:9px}.corneillas-video__grid{gap:6px}.corneillas-video__tile{min-height:105px}.corneillas-video__create{grid-template-columns:1fr}.corneillas-video__controls{margin:8px -9px -9px;bottom:-9px;padding:8px 9px calc(8px + env(safe-area-inset-bottom))}}
@media(max-width:430px){.corneillas-video__grid{grid-template-columns:1fr 1fr}.corneillas-video__tile{min-height:92px}.corneillas-video__controls button{flex:1 1 46%;font-size:9px}}

/* ============================================================
   CHAT — améliorations 05/09/2026 : images, liens, lectures,
   invitations vidéo et redimensionnement mémorisé.
============================================================ */
.corneillas-chat__panel{grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto}
.corneillas-chat__resize-handle{position:absolute;z-index:30;left:0;top:0;width:24px;height:24px;border:0;background:transparent;cursor:nwse-resize}
.corneillas-chat__resize-handle::before{content:"";position:absolute;left:5px;top:5px;width:10px;height:10px;border-left:2px solid rgba(243,203,112,.9);border-top:2px solid rgba(243,203,112,.9);border-radius:2px}
.corneillas-chat__invites{display:grid;gap:6px;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(190,131,24,.12)}
.corneillas-chat__invites[hidden]{display:none!important}
.corneillas-chat__invite{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;line-height:1.35}
.corneillas-chat__invite>div:last-child{display:flex;gap:5px;flex:0 0 auto}
.corneillas-chat__invite button{border:1px solid rgba(226,166,44,.55);border-radius:7px;padding:5px 7px;background:rgba(226,166,44,.15);color:#f7e3b1;font:inherit;font-weight:800;cursor:pointer}
.corneillas-chat__invite button:disabled{opacity:.45;cursor:not-allowed}
.corneillas-chat__invite em{color:#ffb0a8;font-style:normal}
.corneillas-chat__link{color:#86c8ff;text-decoration:underline;text-underline-offset:2px}
.corneillas-chat__image-link{display:block;margin-top:7px;border-radius:10px;overflow:hidden;max-width:290px;background:#090a0b}
.corneillas-chat__image-link img{display:block;width:100%;max-height:240px;object-fit:contain;background:#090a0b}
.corneillas-chat__preview{display:grid;grid-template-columns:74px minmax(0,1fr);gap:8px;margin-top:7px;padding:7px;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:rgba(255,255,255,.04);color:inherit;text-decoration:none;overflow:hidden}
.corneillas-chat__preview>img{width:74px;height:62px;object-fit:cover;border-radius:7px;background:#111}
.corneillas-chat__preview>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.corneillas-chat__preview small{color:#9fa8ad;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.corneillas-chat__preview strong{font-size:10px;color:#f3cb70;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.corneillas-chat__preview span{font-size:9px;line-height:1.3;color:#c3c8ca;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.corneillas-chat__message-foot{display:flex;justify-content:flex-end;min-height:13px;margin-top:4px}
.corneillas-chat__read{border:0;background:transparent;color:#8f999e;padding:0;font:inherit;font-size:8px;cursor:pointer}
.corneillas-chat__read:hover{color:#f3cb70}
.corneillas-chat__composer{grid-template-columns:34px 34px 34px minmax(0,1fr) auto}
.corneillas-chat__panel.is-file-drag::after{content:"Déposez l’image ici";position:absolute;z-index:40;inset:8px;display:grid;place-items:center;border:2px dashed rgba(243,203,112,.9);border-radius:13px;background:rgba(8,10,12,.88);color:#f3cb70;font-weight:900;font-size:15px;pointer-events:none}
.corneillas-video__room-card{flex-wrap:wrap}
.corneillas-video__room-card>div:first-child{min-width:0;flex:1 1 140px}
.corneillas-video__room-actions{display:flex;gap:5px;align-items:center}
.corneillas-video__room-actions .is-danger{background:rgba(145,31,31,.55);border-color:rgba(255,120,120,.45);color:#fff;min-width:34px}
.corneillas-video__invite-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;flex:1 0 100%;margin-top:3px}
.corneillas-video__invite-form select{min-width:0;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:7px;background:#1a1d20;color:#fff;font:inherit;font-size:10px}
.corneillas-video__invite-form button{border:1px solid rgba(226,166,44,.55);border-radius:8px;background:rgba(226,166,44,.13);color:#f3cb70;font:inherit;font-size:10px;font-weight:800;padding:6px 8px;cursor:pointer}
@media(max-width:900px){.corneillas-chat__resize-handle{display:none}.corneillas-chat__composer{grid-template-columns:32px 32px 32px minmax(0,1fr) auto}}
@media(max-width:430px){.corneillas-chat__composer{grid-template-columns:32px 32px 32px minmax(0,1fr)}.corneillas-chat__send{grid-column:4}.corneillas-chat__invite{align-items:flex-start;flex-direction:column}.corneillas-chat__preview{grid-template-columns:58px minmax(0,1fr)}.corneillas-chat__preview>img{width:58px;height:52px}}
.corneillas-chat-image-viewer{position:fixed;z-index:12000;inset:0;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.88);backdrop-filter:blur(6px)}
.corneillas-chat-image-viewer[hidden]{display:none!important}
.corneillas-chat-image-viewer img{display:block;max-width:min(94vw,1400px);max-height:90vh;object-fit:contain;border-radius:10px;box-shadow:0 20px 70px rgba(0,0,0,.7)}
.corneillas-chat-image-viewer button{position:fixed;right:18px;top:14px;width:42px;height:42px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(15,15,15,.75);color:#fff;font-size:28px;cursor:pointer}
.corneillas-video-invite-toast{position:fixed;z-index:11000;right:16px;bottom:16px;max-width:min(360px,calc(100vw - 32px));border:1px solid rgba(243,203,112,.75);border-radius:12px;padding:10px 12px;background:rgba(19,21,22,.96);color:#f7e3b1;box-shadow:0 12px 36px rgba(0,0,0,.48);font:inherit;font-size:11px;font-weight:800;cursor:pointer;text-align:left}
.corneillas-video-invite-toast[hidden]{display:none!important}

/* Passe 05-09-2026 — déplacement du chat + invitations depuis présence */
.corneillas-chat__drag-handle{cursor:move;touch-action:none;user-select:none}
.corneillas-chat__drag-handle button,.corneillas-chat__drag-handle input,.corneillas-chat__drag-handle a{cursor:pointer}
.online-presence__list li{display:flex;align-items:center;justify-content:space-between;gap:8px}
.online-presence__actions{display:inline-flex;gap:4px;flex:0 0 auto}
.online-presence__actions button{border:1px solid rgba(226,166,44,.45);border-radius:7px;padding:3px 5px;background:rgba(226,166,44,.10);color:#f3cb70;font:inherit;font-size:9px;font-weight:800;cursor:pointer}
.online-presence__actions button:hover{background:rgba(226,166,44,.22)}
.corneillas-invite-toast{position:fixed;z-index:12500;right:16px;bottom:16px;display:grid;gap:9px;width:min(390px,calc(100vw - 24px));pointer-events:auto}
.corneillas-invite-toast[hidden]{display:none!important}
.corneillas-invite-card{display:grid;gap:6px;border:2px solid rgba(243,203,112,.9);border-radius:14px;padding:12px 13px;background:rgba(15,18,20,.98);color:#f5f0e5;box-shadow:0 18px 50px rgba(0,0,0,.62);font-size:12px;line-height:1.35}
.corneillas-invite-card>strong{font-size:13px;color:#f3cb70;letter-spacing:.03em}.corneillas-invite-card>b{font-size:14px;color:#fff}.corneillas-invite-card>div{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.corneillas-invite-card button{border:1px solid rgba(243,203,112,.55);border-radius:9px;padding:8px 10px;background:rgba(226,166,44,.15);color:#f7e3b1;font:inherit;font-size:10px;font-weight:900;cursor:pointer}.corneillas-invite-card button:first-child{background:linear-gradient(145deg,#dca331,#8b5909);color:#111}.corneillas-invite-card button:disabled{opacity:.45;cursor:not-allowed}.corneillas-invite-card em{color:#ffb0a8;font-size:10px}
@media(max-width:700px){.corneillas-chat__drag-handle{cursor:default;touch-action:auto}.corneillas-invite-toast{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto}.online-presence__actions button{font-size:8px;padding:3px 4px}}


/* ============================================================
   05-09-2026 — UI globale : chat fixé au viewport + drag vidéo
   Le panneau est porté directement sous <body> par presence.js afin de ne
   plus dépendre du transform de .scene__stage.
============================================================ */
body > .corneillas-chat__panel.corneillas-chat__viewport-panel {
  position: fixed;
  z-index: 9800;
  left: auto;
  right: 18px;
  top: auto;
  bottom: 58px;
}

/* En portrait mobile, le panneau est lui aussi directement sous body. On
   conserve exactement le comportement mobile validé, sans drag manuel. */
body.is-phone-portrait > .corneillas-chat__panel.corneillas-chat__viewport-panel {
  pointer-events: auto;
  position: fixed;
  z-index: 9950;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  top: auto !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  width: auto !important;
  height: min(70dvh, calc(var(--chat-vvh, 100dvh) - 16px));
  max-height: calc(var(--chat-vvh, 100dvh) - 16px) !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
@media (max-width: 620px) and (orientation: portrait) {
  body.is-phone-portrait.corneillas-chat-open > .corneillas-chat__panel.corneillas-chat__viewport-panel {
    height: min(49dvh, calc(var(--chat-vvh, 100dvh) * .49)) !important;
    max-height: min(49dvh, calc(var(--chat-vvh, 100dvh) * .49)) !important;
  }
}
body.is-phone-portrait.corneillas-chat-keyboard-open > .corneillas-chat__panel.corneillas-chat__viewport-panel {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: calc(var(--chat-vv-top, 0px) + 6px) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(calc(var(--chat-vvw, 100vw) - 16px), 520px) !important;
  max-width: calc(var(--chat-vvw, 100vw) - 16px) !important;
  height: calc(var(--chat-vvh, 100dvh) - 12px) !important;
  max-height: calc(var(--chat-vvh, 100dvh) - 12px) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* La même barre supérieure de la vidéo sert de poignée dans les trois états :
   lobby, pré-entrée et salon actif. Les contrôles gardent leurs curseurs. */
.corneillas-video__header.corneillas-chat__drag-handle { cursor: move; }
@media(max-width:700px){
  .corneillas-video__header.corneillas-chat__drag-handle { cursor: default; touch-action:auto; }
}

/* ============================================================
   Chat — ergonomie 05/09/2026 : édition + présence explicite
============================================================ */
.corneillas-chat__edit,
.corneillas-chat__edit-actions button {
  border: 1px solid rgba(226,166,44,.42);
  border-radius: 7px;
  background: rgba(226,166,44,.10);
  color: #f1c96d;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.corneillas-chat__edit { padding: 2px 6px; margin-left: auto; }
.corneillas-chat__delete { margin-left: 0 !important; }
.corneillas-chat__edit:hover,
.corneillas-chat__edit-actions button:hover { background: rgba(226,166,44,.22); }
.corneillas-chat__edited { color: rgba(255,255,255,.55); font-size: 9px; font-style: italic; }
.corneillas-chat__edit-box { display: grid; gap: 7px; }
.corneillas-chat__edit-box textarea {
  width: 100%; min-height: 72px; resize: vertical; box-sizing: border-box;
  border: 1px solid rgba(226,166,44,.5); border-radius: 8px;
  padding: 8px 9px; background: rgba(8,10,12,.94); color: #fff; font: inherit;
}
.corneillas-chat__edit-box textarea:focus { outline: 2px solid rgba(226,166,44,.25); outline-offset: 1px; }
.corneillas-chat__edit-actions { display: flex; gap: 7px; justify-content: flex-end; }
.corneillas-chat__edit-actions button { padding: 5px 9px; }
.online-presence__toggle { cursor: pointer; }
.online-presence__arrow { min-width: 1em; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .online-presence--topbar:hover .online-presence__toggle { border-color: rgba(255,196,70,.62); }
}
@media (max-width:700px) {
  .corneillas-chat__edit { font-size: 9px; padding: 2px 5px; }
  .corneillas-chat__edit-box textarea { min-height: 64px; }
}

/* 05/09/2026 — nommage / renommage ciblé des salons vidéo */
.corneillas-video__create-label{display:block;font-size:10px;font-weight:800;color:#e9c774;margin:0 0 4px}
.corneillas-video__rename-form{display:flex;gap:6px;align-items:center;margin-top:6px}
.corneillas-video__rename-form[hidden]{display:none!important}
.corneillas-video__rename-form input{min-width:0;flex:1}.corneillas-video__rename-form select{min-width:145px;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:7px;background:#1a1d20;color:#fff;font:inherit;font-size:10px}

/* ==========================================================
   B03 — carte touristique « Les bons plans ».
   Source exacte : assets/images/navigation/carte_tourisme.png.
   Recalage automatique sur b03.png 1672×941 :
   canevas hotspot x=430.78..637.29, y=592.68..694.73.
   La zone alpha utile de la carte tombe vers x=447..621, y=619..674.
   ========================================================== */
.scene__stage[data-view="B03"] .scene-hotspot--bons-plans {
  left: 25.764389%;
  top: 62.983799%;
  width: 12.351173%;
  height: 10.844696%;
  overflow: visible;
}
.scene__stage[data-view="B03"] .scene-hotspot--bons-plans .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--bons-plans.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B03"] .scene-hotspot--bons-plans:focus-visible .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowAmber) !important;
}
.scene__stage[data-view="B03"] .scene-hotspot--bons-plans.is-clicked .scene-hotspot__mask {
  opacity: 1 !important;
  filter: url(#hotspotGlowGreen) !important;
}

/* ============================================================
   05-09-2026 — FINITION CIBLÉE : menu inférieur rétractable
   Le menu est reparenté sous <body> par navigation.js : il n'est plus soumis
   au transform du décor. L'ouverture réserve une bande UI générale en bas,
   sans déplacer les hotspots scène par scène.
============================================================ */
:root {
  --corneillas-menu-reserve: 52px;
}

body > #menuToggle.menu-toggle {
  position: fixed !important;
  z-index: 10040 !important;
  top: auto !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  bottom: max(6px, env(safe-area-inset-bottom)) !important;
  left: auto !important;
  min-width: 76px;
  min-height: 38px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(10,12,14,.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 5px 18px rgba(0,0,0,.36);
}
body > #menuToggle .menu-toggle__arrow {
  display: inline-block;
  margin-left: 3px;
  color: #ffd66f;
  font-size: 13px;
  line-height: 1;
}

body > #mainMenu.main-menu {
  position: fixed !important;
  z-index: 9700 !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: calc(max(8px, env(safe-area-inset-right)) + 84px) !important;
  top: auto !important;
  bottom: max(6px, env(safe-area-inset-bottom)) !important;
  width: auto !important;
  max-width: none !important;
  min-height: 38px;
  max-height: 42px;
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-content: stretch !important;
  gap: 0;
  padding: 2px 5px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) !important;
  transition: opacity 260ms ease, transform 260ms ease, visibility 260ms ease !important;
}
body > #mainMenu.main-menu.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
body > #mainMenu.main-menu .main-menu__item,
body > #mainMenu.main-menu .main-menu__group {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content;
  min-height: 34px;
}
body > #mainMenu.main-menu .main-menu__item {
  padding: 5px 10px !important;
  font-size: 10px;
  white-space: nowrap !important;
}

/* Sous-menu : toujours au-dessus de la barre, jamais sous le bord écran. */
body > #mainMenu.main-menu .main-menu__submenu {
  position: fixed;
  top: auto !important;
  bottom: calc(max(6px, env(safe-area-inset-bottom)) + 46px) !important;
  max-height: min(48vh, 360px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Pendant l'ouverture, on réserve globalement la bande du menu à l'interface.
   Le stage conserve son ratio ; aucun hotspot/personnage n'est recalé à la main. */
body.main-menu-open:not(.is-phone-portrait) .scene__stage {
  top: calc(50% - (var(--corneillas-menu-reserve) / 2));
  width: min(100vw, calc((var(--viewport-h) - var(--corneillas-menu-reserve)) * 1672 / 941));
  height: min(calc(var(--viewport-h) - var(--corneillas-menu-reserve)), calc(100vw * 941 / 1672));
  max-height: calc(var(--viewport-h) - var(--corneillas-menu-reserve));
}

/* Le chat/notifications sont au-dessus de la bande et restent utilisables. */
body.main-menu-open > .corneillas-chat__panel.corneillas-chat__viewport-panel {
  z-index: 9800 !important;
  bottom: calc(var(--corneillas-menu-reserve) + max(8px, env(safe-area-inset-bottom)));
}

/* Téléphone paysage : l'ancien verrou masquait totalement le menu. Cette
   passe le réactive sous forme d'une seule rangée très basse. */
body.is-phone-landscape > #mainMenu.main-menu {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: max(6px, env(safe-area-inset-left)) !important;
  right: calc(max(6px, env(safe-area-inset-right)) + 74px) !important;
  bottom: max(4px, env(safe-area-inset-bottom)) !important;
  min-height: 32px !important;
  max-height: 34px !important;
  padding-block: 1px !important;
}
body.is-phone-landscape > #mainMenu.main-menu.is-open {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.is-phone-landscape > #menuToggle.menu-toggle {
  display: block !important;
  right: max(6px, env(safe-area-inset-right)) !important;
  bottom: max(4px, env(safe-area-inset-bottom)) !important;
  min-width: 68px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 10px;
}
body.is-phone-landscape > #mainMenu.main-menu .main-menu__item {
  min-height: 30px !important;
  padding: 4px 8px !important;
  font-size: 9px !important;
}
body.is-phone-landscape {
  --corneillas-menu-reserve: 42px;
}
body.is-phone-landscape.main-menu-open .landscape-fullscreen-button:not([hidden]) {
  bottom: calc(var(--corneillas-menu-reserve) + max(6px, env(safe-area-inset-bottom)));
}

/* ============================================================
   05-09-2026 — correctif très ciblé chat / clavier téléphone paysage
============================================================ */
body.is-phone-landscape.corneillas-chat-keyboard-open > .corneillas-chat__panel.corneillas-chat__viewport-panel {
  position: fixed !important;
  z-index: 11000 !important;
  left: max(5px, env(safe-area-inset-left)) !important;
  right: max(5px, env(safe-area-inset-right)) !important;
  top: calc(var(--chat-vv-top, 0px) + 4px) !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  height: calc(var(--chat-vvh, 100dvh) - 8px) !important;
  max-height: calc(var(--chat-vvh, 100dvh) - 8px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  grid-template-rows: auto auto auto minmax(0,1fr) auto auto auto !important;
}
body.is-phone-landscape.corneillas-chat-keyboard-open .corneillas-chat__header {
  padding: 5px 9px !important;
}
body.is-phone-landscape.corneillas-chat-keyboard-open .corneillas-chat__channels {
  padding: 4px 6px !important;
}
body.is-phone-landscape.corneillas-chat-keyboard-open .corneillas-chat__messages {
  min-height: 0 !important;
  padding: 5px 7px 7px !important;
  overflow-y: auto !important;
}
body.is-phone-landscape.corneillas-chat-keyboard-open .corneillas-chat__composer {
  grid-template-columns: 30px 30px 30px minmax(0,1fr) auto !important;
  gap: 4px !important;
  padding: 5px 6px max(5px, env(safe-area-inset-bottom)) !important;
}
body.is-phone-landscape.corneillas-chat-keyboard-open .corneillas-chat__tool {
  width: 30px !important;
  height: 30px !important;
}
body.is-phone-landscape.corneillas-chat-keyboard-open .corneillas-chat__composer textarea {
  min-height: 30px !important;
  max-height: 54px !important;
  padding: 5px 7px !important;
  font-size: 16px !important;
}
body.is-phone-landscape.corneillas-chat-keyboard-open .corneillas-chat__send {
  min-height: 30px !important;
  padding-inline: 8px !important;
}

/* ============================================================
   06-09-2026 — sélecteur visuel JOUR / NUIT
   Intégré au menu existant, sans modifier sa logique ni les hotspots.
============================================================ */
.display-mode-toggle {
  flex: 0 0 auto;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  align-items: stretch;
  gap: 2px;
  min-height: 34px;
  padding: 2px;
  border: 1px solid rgba(255, 190, 65, .34);
  border-radius: 10px;
  background: rgba(8, 9, 10, .58);
}
.display-mode-toggle__button {
  min-width: 50px;
  min-height: 30px;
  padding: 4px 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 248, 231, .78);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.display-mode-toggle__button:hover,
.display-mode-toggle__button:focus-visible {
  background: rgba(255, 190, 65, .12);
  color: #fff8e7;
  outline: none;
}
.display-mode-toggle__button.is-active,
.display-mode-toggle__button[aria-pressed="true"] {
  background: rgba(187, 124, 21, .72);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 211, 124, .44);
}

/* L'ancien menu téléphone portrait conserve sa grille validée : le sélecteur
   occupe simplement une rangée compacte à l'intérieur de cette grille. */
body.is-phone-portrait .display-mode-toggle {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 48px;
  gap: 8px;
  padding: 4px;
  border-radius: 11px;
  background: rgba(24, 26, 27, .66);
}
body.is-phone-portrait .display-mode-toggle__button {
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 12px;
}

body.is-phone-landscape > #mainMenu.main-menu .display-mode-toggle {
  min-height: 30px;
  padding: 1px;
}
body.is-phone-landscape > #mainMenu.main-menu .display-mode-toggle__button {
  min-width: 42px;
  min-height: 28px;
  padding: 3px 5px;
  font-size: 9px;
}

@media (prefers-reduced-motion: reduce) {
  body > #mainMenu.main-menu { transition-duration: 1ms !important; }
}

/* 08-09-2026 — MENU PRINCIPAL EN HAUT / BARRE DE PRÉSENCE CONSERVÉE EN BAS */
/*
   Le compteur, l'identité, les personnes en ligne et le chat restent dans
   la barre inférieure. Seuls le bouton MENU et la rangée du menu principal
   passent en haut afin de ne plus être masqués par la barre des tâches Windows.
*/

body:not(.is-phone-portrait) > #menuToggle.menu-toggle {
  top: max(6px, env(safe-area-inset-top)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  bottom: auto !important;
  left: auto !important;
}

body:not(.is-phone-portrait) > #mainMenu.main-menu {
  top: max(6px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: calc(max(8px, env(safe-area-inset-right)) + 84px) !important;
  transform: translateY(-8px) !important;
}
body:not(.is-phone-portrait) > #mainMenu.main-menu.is-open {
  transform: translateY(0) !important;
}

/* Les sous-menus se déploient maintenant sous la rangée du menu. */
body:not(.is-phone-portrait) > #mainMenu.main-menu .main-menu__submenu {
  top: calc(max(6px, env(safe-area-inset-top)) + 46px) !important;
  bottom: auto !important;
}

/* Le menu supérieur est une surcouche : aucun déplacement du décor/hotspot. */
body.main-menu-open:not(.is-phone-portrait) .scene__stage {
  top: 50% !important;
  width: min(100vw, calc(var(--viewport-h) * 1672 / 941)) !important;
  height: min(var(--viewport-h), calc(100vw * 941 / 1672)) !important;
  max-height: var(--viewport-h) !important;
}

/* Le chat reste ancré à la barre du bas, exactement comme avant. */
body.main-menu-open > .corneillas-chat__panel.corneillas-chat__viewport-panel {
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
}

/* Téléphone en paysage : même principe, menu en haut. */
body.is-phone-landscape > #mainMenu.main-menu {
  top: max(4px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
}
body.is-phone-landscape > #menuToggle.menu-toggle {
  top: max(4px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
}
body.is-phone-landscape.main-menu-open .landscape-fullscreen-button:not([hidden]) {
  bottom: max(6px, env(safe-area-inset-bottom)) !important;
}

/* ==========================================================
   TABLEAUX D'INFORMATIONS 1 + 2 — contenu mixte texte/image/vidéo.
   Le tableau 2 est le nouveau panneau à droite de la guitare en B01.
   ========================================================== */
.info-board-public,
.b01-info-board-2 {
  display: none;
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  overflow: hidden;
  container-type: inline-size;
}

.scene__stage[data-view="B01"] .b01-info-board-2 {
  display: block;
  z-index: 2;
  /* Tableau 2 : zone utile strictement à l'intérieur du PNG hotspot 171x245.
     Le hotspot est calé sur le cadre réel ; cette zone reprend son intérieur noir
     avec une marge de sécurité pour qu'aucun contenu ne passe sur le bois. */
  left: 80.36%;
  top: calc(21.08% - 3px);
  width: 9.30%;
  height: 24.72%;
  overflow: hidden;
}

.info-board-public__item {
  position: absolute;
  transform: rotate(var(--item-rotation, 0deg));
  transform-origin: center;
  max-width: 96%;
  max-height: 96%;
}
.info-board-public__item--text {
  color: #e7e2d2;
  white-space: normal;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: calc(var(--chalk-size, 8) * 1cqw);
  line-height: 1.08;
  font-weight: 400;
  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);
}
.info-board-public__item--text p,
.info-board-public__item--text div,
.info-board-public__item--text ul,
.info-board-public__item--text ol { margin:.15em 0; }
.info-board-public__item--text ul,
.info-board-public__item--text ol { padding-left:1.35em; }
.info-board-public__item--text a { color:inherit; text-decoration:underline; pointer-events:auto; }
.info-board-public--zoom { pointer-events:auto; }
.info-board-public__item--image,
.info-board-public__item--video {
  display:block;
  object-fit:contain;
  box-sizing:border-box;
}

.scene__stage[data-view="B01"] .scene-hotspot--tableau-informations-2 {
  /* Recalage 11/09/2026 : même bas et même bord gauche,
     cadre resserré sur le tableau réellement visible. */
  left: 80.08%;
  top: 19.70%;
  width: 10.15%;
  height: 25.94%;
  overflow: visible;
}
.scene__stage[data-view="B01"] .scene-hotspot--tableau-informations-2 .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--tableau-informations-2.is-alpha-hover .scene-hotspot__mask,
.scene__stage[data-view="B01"] .scene-hotspot--tableau-informations-2:focus-visible .scene-hotspot__mask {
  opacity:1 !important;
  filter:url(#hotspotGlowAmber) !important;
}
.scene__stage[data-view="B01"] .scene-hotspot--tableau-informations-2.is-clicked .scene-hotspot__mask {
  opacity:1 !important;
  filter:url(#hotspotGlowGreen) !important;
}

.info-board-modal-open { overflow:hidden; }
.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;
}
.info-board-overlay.is-open { display:flex; }
.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;
}
.info-board-zoom { width:min(94vw,900px); height:min(82vh,900px); display:flex; align-items:center; justify-content:center; }
.info-board-public--zoom { display:block; position:relative; overflow:hidden; container-type:inline-size; box-shadow:0 16px 55px #000b; flex:0 0 auto; }
/* Le zoom conserve exactement le ratio du tableau au lieu de remplir la fenêtre :
   aucun recadrage, aucune coupe, et la plus grande taille possible dans le viewport. */
#b03InfoBoardZoomContent { width:min(88vw,calc(78vh * 0.748),620px); aspect-ratio:181/242; }
#b01InfoBoard2ZoomContent { width:min(88vw,calc(78vh * 0.677),620px); aspect-ratio:0.677; }
@media (max-width: 700px) {
  .info-board-overlay { padding:58px 8px 8px; }
  .info-board-zoom { width:96vw; height:84vh; }
  #b03InfoBoardZoomContent { width:min(92vw,calc(80vh * 0.748)); }
  #b01InfoBoard2ZoomContent { width:min(92vw,calc(80vh * 0.677)); }
}


/* ==========================================================
   MENU TÉLÉPHONE — AÉRATION + RUBRIQUES ATELIER — 15/09/2026
   ========================================================== */
body.is-phone-portrait .main-menu {
  padding: 15px !important;
  gap: 12px !important;
  max-height: min(78dvh, calc(var(--viewport-h) - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)))) !important;
}
body.is-phone-portrait .main-menu__item,
body.is-phone-portrait .main-menu__group > .main-menu__item {
  min-height: 52px !important;
  padding: 12px 10px !important;
  border-color: rgba(255,190,65,.18) !important;
  border-radius: 14px !important;
  background: rgba(24,26,27,.46) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  line-height: 1.25 !important;
}
body.is-phone-portrait .main-menu__item:active {
  background: rgba(165,105,14,.62) !important;
}
body.is-phone-portrait .mobile-menu__display-mode {
  display: none !important;
}

/* ==========================================================
   SMARTPHONE PORTRAIT — VUES DÉDIÉES ATELIER
   Constructeurs / Publicités-Liens utiles
   2026-09-15
   ========================================================== */
.mobile-atelier-view[hidden] { display: none !important; }
.mobile-atelier-view {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  background: rgba(5,7,8,.96);
  opacity: 0;
  transition: opacity .18s ease;
}
.mobile-atelier-view.is-open { opacity: 1; }
body.is-phone-portrait .mobile-atelier-view { display: flex; }
body.mobile-atelier-open { overflow: hidden !important; }
.mobile-atelier-view__dialog {
  width: min(100%, 560px);
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  background: linear-gradient(180deg,#181b1f 0%,#0d1012 100%);
  border: 1px solid rgba(236,181,75,.44);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.mobile-atelier-view__header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 8px;
  align-items: center;
  min-height: 62px;
  padding: 8px 10px;
  background: rgba(0,0,0,.42);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-atelier-view__header>div { min-width: 0; text-align: center; }
.mobile-atelier-view__header strong {
  display: block;
  color: #fff6e3;
  font-size: clamp(17px,4.8vw,22px);
  line-height: 1.08;
}
.mobile-atelier-view__header span {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.67);
  font-size: 11px;
  line-height: 1.25;
}
.mobile-atelier-view__back,
.mobile-atelier-view__close {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(240,184,75,.38);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: #fff4df;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.mobile-atelier-view__content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}
.mobile-atelier-view__panel-preview {
  margin: 0 0 12px;
  padding: 7px;
  border-radius: 14px;
  background: #0a0c0d;
  border: 1px solid rgba(255,255,255,.08);
}
.mobile-atelier-view__panel-preview img {
  display: block;
  width: 100%;
  max-height: 25dvh;
  object-fit: contain;
  border-radius: 10px;
}
.mobile-atelier-view__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.mobile-atelier-card {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(92px,auto) auto;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.mobile-atelier-card.is-linked:active { transform: scale(.985); }
.mobile-atelier-card__visual {
  min-height: 105px;
  padding: 10px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 35%,rgba(255,255,255,.11),rgba(255,255,255,.025) 72%);
}
.mobile-atelier-card__visual img {
  display: block;
  max-width: 100%;
  max-height: 94px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.mobile-atelier-card__visual--fallback {
  color: #f0bd5b;
  font-weight: 800;
  text-align: center;
}
.mobile-atelier-card__text {
  display: flex;
  min-height: 78px;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 8px 11px;
  text-align: center;
}
.mobile-atelier-card__text strong { font-size: 13px; line-height: 1.18; color: #fff7e6; }
.mobile-atelier-card__category { font-size: 10px; color: #efbd62; }
.mobile-atelier-card__description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.25;
  color: rgba(255,255,255,.64);
}
.mobile-atelier-card__action {
  margin-top: auto;
  padding-top: 5px;
  color: #f0bd5b;
  font-size: 10px;
  font-weight: 800;
}
.mobile-atelier-card.is-disabled { opacity: .72; }
.mobile-atelier-view__status {
  padding: 14px 2px 4px;
  color: rgba(255,255,255,.57);
  font-size: 11px;
  text-align: center;
}
@media (max-width: 360px) and (orientation: portrait) {
  .mobile-atelier-view__grid { gap: 7px; }
  .mobile-atelier-card__visual { min-height: 86px; padding: 7px; }
  .mobile-atelier-card__visual img { max-height: 78px; }
  .mobile-atelier-card__text { min-height: 68px; padding: 7px 6px 9px; }
  .mobile-atelier-view__panel-preview img { max-height: 20dvh; }
}
body:not(.is-phone-portrait) .mobile-atelier-view { display: none !important; }


/* 15/09/2026 — vues ressources portrait (tourisme / vidéos / pièces détachées) */
body.is-phone-portrait .mobile-atelier-view__panel-preview[hidden] {
  display: none !important;
}
body.is-phone-portrait .mobile-atelier-view__grid {
  align-content: start;
}
body.is-phone-portrait .mobile-atelier-card__visual img {
  object-fit: contain;
}


/* ==========================================================
   22/09/2026 — BIENVENUE TÉLÉPHONE HORIZONTAL — FIX FINAL
   Toute la fenêtre doit être visible dans le viewport.
   ========================================================== */
body.is-phone-landscape .welcome-help {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  transform: none !important;
}

body.is-phone-landscape .welcome-help__card {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(820px, calc(100vw - 8px)) !important;
  height: calc(100dvh - 8px) !important;
  max-height: calc(100dvh - 8px) !important;
  margin: 0 !important;
  padding: 8px 12px 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 8px !important;
}

body.is-phone-landscape .welcome-help__close {
  position: absolute !important;
  top: 4px !important;
  right: 6px !important;
  z-index: 5 !important;
  width: 26px !important;
  height: 26px !important;
  font-size: 20px !important;
}

body.is-phone-landscape .welcome-help h2 {
  margin: 0 32px 5px 0 !important;
  font-size: 16px !important;
  line-height: 1.05 !important;
}

body.is-phone-landscape .welcome-help__content {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  margin: 0 !important;
}

body.is-phone-landscape .welcome-help__content p {
  margin: 0 0 3px !important;
  font-size: 9.5px !important;
  line-height: 1.16 !important;
}

body.is-phone-landscape .welcome-help__audio {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
}

body.is-phone-landscape .welcome-help__audio button {
  min-height: 24px !important;
  padding: 2px 7px !important;
  font-size: 9px !important;
}

body.is-phone-landscape .welcome-help__audio .narration-volume {
  min-width: 130px !important;
  font-size: 9px !important;
}

body.is-phone-landscape #welcomeAudioStatus {
  font-size: 8.5px !important;
}

body.is-phone-landscape .welcome-help__remember {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 4px 0 0 !important;
  padding: 2px 0 !important;
  font-size: 9.5px !important;
  line-height: 1.1 !important;
}

body.is-phone-landscape .welcome-help__remember input {
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
}

/* La case "Ne plus afficher" doit toujours rester dans la zone visible. */
body.is-phone-landscape .welcome-help__remember:last-of-type {
  position: static !important;
  margin: 4px 0 0 !important;
  padding: 3px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
}


/* ==========================================================
   22/09/2026 — CROIX BIENVENUE TÉLÉPHONE HORIZONTAL
   La croix doit rester visible et cliquable quoi qu'il arrive.
   ========================================================== */
body.is-phone-landscape .welcome-help__close {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  top: 8px !important;
  right: 10px !important;
  z-index: 10050 !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(12,14,16,.96) !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  color: #fff !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.45) !important;
}


/* ============================================================
   23/09/2026 — B03 : bannière LED Compétition
   ============================================================ */
.competition-led-banner{
    display:none;
    position:absolute;
    left:26.854067%;
    top:8.55%;
    width:23.205742%;
    height:7.05%;
    z-index:4;
    grid-template-columns:13% 1fr 13%;
    align-items:stretch;
    text-decoration:none;
    color:var(--competition-led-text,#ff3b30);
    background:linear-gradient(180deg,#6b6e73 0%,#292c30 22%,#111317 50%,#34383a 78%,#7c8085 100%);
    border:1px solid #aeb2b8;
    border-radius:.45vw;
    box-shadow:
        0 .22vw .65vw #000b,
        inset 0 0 0 .16vw #1a1c20,
        inset 0 0 0 .25vw #8a8d92;
    overflow:visible;
    container-type:inline-size;
    cursor:pointer;
    transform:translateZ(0);
}
#sceneStage[data-view="B03"] .competition-led-banner{display:grid}
.competition-led-banner::before{
    content:"";
    position:absolute;
    inset:-.45vw;
    border-radius:.75vw;
    opacity:0;
    pointer-events:none;
    border:.16vw solid #ffd947;
    box-shadow:0 0 .65vw #ffd947,0 0 1.25vw #ffae00;
    transition:opacity .18s ease;
}
.competition-led-banner:hover::before,
.competition-led-banner:focus-visible::before{opacity:1}
.competition-led-banner__screen{
    position:relative;
    margin:.48vw .08vw;
    overflow:hidden;
    background:
      radial-gradient(circle at 1px 1px,#ffffff18 .04vw,transparent .05vw) 0 0/.22vw .22vw,
      var(--competition-led-bg,#050505);
    border:.12vw solid #111;
    box-shadow:inset 0 0 .55vw #000,inset 0 0 .24vw #ffffff12;
}
.competition-led-banner__track{
    position:absolute;
    inset:0 auto 0 0;
    display:flex;
    align-items:center;
    width:max-content;
    white-space:nowrap;
    will-change:transform;
    animation-duration:var(--competition-led-speed,12s);
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}
.competition-led-banner__track.is-rtl{animation-name:competitionLedRtl}
.competition-led-banner__track.is-ltr{animation-name:competitionLedLtr}
.competition-led-banner__track span{
    display:inline-block;
    padding:0 4cqw;
    font-family:"Arial Black",Impact,sans-serif;
    font-weight:900;
    font-size:var(--competition-led-size,2.2cqw);
    letter-spacing:.13em;
    color:var(--competition-led-text,#ff3b30);
    text-shadow:
      0 0 .16em var(--competition-led-glow,#ff2d20),
      0 0 .35em var(--competition-led-glow,#ff2d20),
      0 0 .72em var(--competition-led-glow,#ff2d20);
}
@keyframes competitionLedRtl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes competitionLedLtr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.competition-led-banner__side{
    display:grid;
    place-items:center;
    overflow:hidden;
    background:linear-gradient(135deg,#14161a,#2e3136 48%,#111317);
}
.competition-led-banner__side img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 0 .25vw #fff5)}
.competition-led-banner__badge{
    display:grid;place-items:center;width:72%;aspect-ratio:1;border-radius:50%;
    background:#d91f16;color:#fff;border:.14vw solid #fff;
    font:900 2.5cqw/1 "Arial Black",sans-serif;
    box-shadow:0 0 .35vw #ff453a;
}
.competition-led-banner__chevrons{
    font:900 3.4cqw/1 Impact,sans-serif;color:#ff453a;
    text-shadow:0 0 .35vw #ff453a;
    transform:skewX(-12deg);
}
.competition-led-banner__tooltip{
    position:absolute;
    left:50%;
    bottom:-2.15vw;
    transform:translateX(-50%) translateY(-.2vw);
    opacity:0;
    pointer-events:none;
    white-space:nowrap;
    padding:.38vw .62vw;
    border-radius:.38vw;
    background:#0c0e11ee;
    color:#fff;
    border:1px solid #ffd947;
    font:700 .82vw/1.15 Arial,sans-serif;
    box-shadow:0 .2vw .7vw #000b;
    transition:opacity .15s ease,transform .15s ease;
}
.competition-led-banner:hover .competition-led-banner__tooltip,
.competition-led-banner:focus-visible .competition-led-banner__tooltip{
    opacity:1;transform:translateX(-50%) translateY(0);
}
body.is-phone-portrait .competition-led-banner{display:none!important}
@media (prefers-reduced-motion:reduce){
    .competition-led-banner__track{animation-play-state:paused}
}


/* 23/09/2026 — sécurité d'empilement B03 :
   la bannière reste sous la couche des hotspots et la TV reste toujours cliquable. */
.scene__stage[data-view="B03"] .competition-led-banner{
    z-index:4 !important;
}
.scene__stage[data-view="B03"] .scene-hotspot--tv{
    pointer-events:auto !important;
}
.scene__stage[data-view="B03"] .tv-media-menu,
.scene__stage[data-view="B03"] .tv-library{
    z-index:36 !important;
}


/* 23/09/2026 — verrou strict des hotspots par vue.
   Empêche tout masque/halo d'une ancienne vue de rester visible ou cliquable. */
.scene-hotspot[hidden],
.scene-hotspot.is-inactive-view,
.scene-hotspot[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* 23/09/2026 — verrou visuel absolu par décor.
   Même si un script tiers garde accidentellement un ancien état, les éléments
   propres à A01/A1 ne peuvent jamais apparaître au-dessus de B03. */
.scene__stage[data-view="B03"] .scene-hotspot--poster-scorpions,
.scene__stage[data-view="B03"] .scene-hotspot--poster-deep-purple,
.scene__stage[data-view="B03"] .scene-hotspot--poster-iron-maiden,
.scene__stage[data-view="B03"] .scene-hotspot--poster-led-zeppelin,
.scene__stage[data-view="B03"] .scene-hotspot--moto1,
.scene__stage[data-view="B03"] .scene-hotspot--moto2,
.scene__stage[data-view="B03"] .scene-hotspot--moto3,
.scene__stage[data-view="B03"] .scene-hotspot--moto4,
.scene__stage[data-view="B03"] .scene-hotspot--corneille-gauche,
.scene__stage[data-view="B03"] .scene-hotspot--corneille-droite,
.scene__stage[data-view="B03"] .scene-hotspot--forward,
.scene__stage[data-view="B03"] .scene-hotspot--door-back,
.scene__stage[data-view="B03"] .scene-hotspot--door-handles,
.scene__stage[data-view="B03"] .scene-hotspot--enter-office {
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* Et inversement, les hotspots propres à B03 ne sont rendus que dans B03. */
.scene__stage:not([data-view="B03"]) .scene-hotspot--tv,
.scene__stage:not([data-view="B03"]) .scene-hotspot--tv-power,
.scene__stage:not([data-view="B03"]) .scene-hotspot--porte-magazines,
.scene__stage:not([data-view="B03"]) .scene-hotspot--bons-plans,
.scene__stage:not([data-view="B03"]) .scene-hotspot--tableau-informations {
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* La Boutique n'existe que dans la vue B01. */
.scene__stage:not([data-view="B01"]) .scene-hotspot--boutique {
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
}