* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Thème. Les valeurs ci-dessous sont celles d'Otaku City ; EventGo Plan les
   remplace salon par salon (réglages « Habillage », posés dans la page). */
:root {
  --oc-navy-dark: #14264d;
  --oc-navy: #1a2e5a;
  --oc-navy-light: #1f3a8a;
  /* Polices pixel art : Press Start 2P (titres/UI) + VT323 (corps de texte) */
  --font-display: 'Press Start 2P', 'Courier New', monospace;
  --font-body: 'VT323', 'Courier New', monospace;
  --plan-fond: var(--oc-navy-dark);        /* derrière la carte */
  --plan-bandeau: #0f0f23;                 /* bandeau du haut (EventGo) */
  --plan-bandeau-texte: #ffffff;
  --plan-motif: none;                      /* motif répété derrière la carte */
  --plan-panneau: #0f0f23;                 /* panneau, info-bulle, bouton retour */
  --plan-voile: rgba(15, 15, 35, 0.85);    /* cartouches semi-transparents */
  --plan-carte: #1a1a36;                   /* blocs du programme, liens */
  --plan-carte-bord: #2a2a4e;
  --plan-bord: #444;
  --plan-titre: #ffffff;
  --plan-texte: #e0e0e0;
  --plan-texte-doux: #b0b0b0;
  --plan-accent: #ffe168;                  /* horaires, jours, badges */
  --plan-accent-doux: #c8a050;
  --plan-intervenants: #9aa6e0;
  --plan-sol: #ffffff;                     /* sol de la salle, sur le plan */
  --plan-encre: #1c2230;                   /* numéros et noms écrits sur le plan */
  --plan-encre-douce: #5a6272;             /* noms en anglais, en italique */
}

body {
  background-color: var(--plan-fond);
  /* Tile pixel art répété (Otaku City : assets/background.png, 32×22 natif).
     Scale ×2 pour rester aérien à l'écran. Scroll constant vers la gauche. */
  background-image: var(--plan-motif);
  background-repeat: repeat;
  background-size: 64px 44px;
  /* Pixel art : nearest-neighbor pour garder le tile net, même en mouvement. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  animation: bg-scroll-left 12s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 18px;
  overflow: hidden;
}

/* Boucle parfaite : on translate d'exactement une largeur de tile (64 px) */
@keyframes bg-scroll-left {
  from { background-position: 0 0; }
  to   { background-position: -64px 0; }
}

/* ── Preloader ── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: var(--plan-fond);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  transition: opacity 0.6s ease;
}

#preloader.done {
  opacity: 0;
  pointer-events: none;
}

.preloader-logo {
  width: 220px;
  max-width: 55vw;
  animation: logoPulse 1.5s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.03); }
}

.preloader-bar-track {
  width: 260px;
  max-width: 60vw;
  height: 12px;
  background: #222;
  border: 2px solid #444;
  image-rendering: pixelated;
}

.preloader-bar-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  transition: width 0.3s steps(10);
}

.preloader-text {
  color: #666;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 2px;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Logos en-tête : 3 logos calés à hauteur uniforme pour rester compacts
   sur mobile. Gauche : Cité des Arts, Centre : Otaku City Part 3, Droite : Otaku Prod */
#cda-logo,
#otakucity-logo,
#otakuprod-logo {
  position: fixed;
  top: 16px;
  height: 72px;
  width: auto;
  z-index: 20;
  opacity: 0.95;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
  transition: opacity 0.2s;
  pointer-events: none;
}

#cda-logo { left: 16px; }
#otakucity-logo { left: 50%; transform: translateX(-50%); }
#otakuprod-logo { right: 16px; }

/* ── Sponsor de salle (Orange pour Village Gaming / JV Lokal) ──
   Placé en bas-gauche, au-dessus du bandeau partenaires, pour ne pas gêner la
   navigation dans le haut de la map. */
#sponsor-badge {
  position: fixed;
  bottom: 124px; /* au-dessus du back-btn (qui est lui-même au-dessus des partenaires) */
  left: 16px;
  z-index: 20;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: var(--plan-voile);
  border: 1px solid var(--plan-bord);
  border-radius: 6px;
  padding: 8px 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
#sponsor-badge.visible {
  opacity: 1;
  transform: translateY(0);
}
#sponsor-badge[hidden] { display: none; }

.sponsor-label {
  color: #c0c0c8;
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1px;
}
.sponsor-logo {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* ── Soutien Ville de Saint-Denis (financeur principal, bas-droite) ──
   Réutilisation du badge blanc original, positionné en bas à droite,
   au-dessus du bandeau partenaires. */
#vsd-support {
  position: fixed;
  bottom: 56px; /* au-dessus du #partners-strip */
  right: 16px;
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #ccd;
  border-radius: 8px;
  padding: 6px 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.vsd-label {
  color: #1a1a36;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.vsd-logo {
  display: block;
  height: 44px;
  width: auto;
}

/* ── Bandeau partenaires (autres sponsors) : pleine largeur ── */
#partners-strip {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 20;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--plan-voile);
  border-top: 1px solid var(--plan-bord);
  padding: 6px 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

.partners-label {
  color: #888;
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1px;
  flex: 0 0 auto;
}

.partners-logos {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  justify-content: center;
  min-width: 0;
}

.partners-logos img {
  height: 22px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  flex: 0 1 auto;
  min-width: 0;
  filter: brightness(0.95) saturate(0.9);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 3px;
  padding: 2px 4px;
}

@media (max-width: 600px) {
  #cda-logo,
  #otakucity-logo,
  #otakuprod-logo {
    height: 48px;
    top: 8px;
  }
  #cda-logo { left: 8px; }
  #otakuprod-logo { right: 8px; }

  #vsd-support {
    bottom: 60px;
    right: 8px;
    padding: 5px 10px;
    gap: 8px;
    border-radius: 6px;
  }
  .vsd-label { font-size: 7px; letter-spacing: 0.5px; }
  .vsd-logo { height: 36px; }

  #back-btn {
    bottom: 60px;
    left: 8px;
    padding: 8px 14px;
    font-size: 9px;
  }

  #sponsor-badge {
    bottom: 116px; /* au-dessus du back-btn (mobile) */
    left: 8px;
    padding: 6px 8px;
    flex-direction: row;
    gap: 8px;
  }
  .sponsor-logo { width: 48px; height: 48px; }
  .sponsor-label { font-size: 9px; }

  #partners-strip {
    padding: 6px 10px;
    gap: 10px;
  }
  .partners-logos { gap: 8px; }
  .partners-logos img { height: 30px; max-width: 110px; padding: 2px 4px; }
  .partners-label { font-size: 9px; }
}

@media (max-width: 380px) {
  /* Très petit écran : on cache les labels pour libérer de la place pour les logos */
  .vsd-label { display: none; }
  .partners-label { display: none; }
  #cda-logo,
  #otakucity-logo,
  #otakuprod-logo { height: 36px; }
  .vsd-logo { height: 32px; }
  .partners-logos img { height: 26px; max-width: 80px; }
  .partners-logos { gap: 6px; }
}

/* ── Mode portrait : éviter le chevauchement panneau/footer et la
   superposition des textes sur l'illustration. */
@media (orientation: portrait) and (max-width: 768px) {
  /* Le panneau (bottom-sheet) doit s'arrêter au-dessus du back-btn + vsd-support + partners */
  #info-panel {
    max-height: 55vh;
    padding-bottom: 24px;
    bottom: 110px;
  }
  #info-panel.open { transform: translateY(0); }

  #character-overlay {
    top: 100px; /* sous les logos CDA / Otaku City */
  }
}

/* ── Map container (plein écran) ── */
#map-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: transparent; /* laisse passer le motif navy du body */
  overflow: hidden;
}

/* ── Wrapper : zoomable, image+SVG calés ── */
#map-wrapper {
  position: relative;
  transform-origin: 0 0;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Image de fond du salon/salle : nearest-neighbor pour garder le pixel art net.
   On combine plusieurs valeurs pour la compatibilité navigateur. */
#map-image {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: -moz-crisp-edges;            /* Firefox */
  image-rendering: -webkit-optimize-contrast;   /* Safari (anciennes versions) */
  image-rendering: crisp-edges;                 /* spec */
  image-rendering: pixelated;                   /* Chrome / Edge / Safari récents */
  -ms-interpolation-mode: nearest-neighbor;     /* IE legacy */
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Le SVG overlay et son contenu (polygones, labels, vertices) ne doivent PAS hériter
   du pixelated du parent : sinon les bitmaps internes (logos partenaires) deviennent
   crénelés au moindre zoom. On force un rendu lisse. */
#map-overlay,
#map-overlay image {
  image-rendering: auto;
}

/* ── Placeholder coloré (salles sans image) ── */
.map-placeholder {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 32px;
}

.placeholder-label {
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 4px;
}

/* ── SVG overlay : calé sur le wrapper ── */
#map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ── Zones cliquables ── */
.zone {
  fill: rgba(255, 255, 255, 0.08);
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 2;
  cursor: crosshair;
  transition: fill 0.2s, stroke 0.2s;
  /* Désactive le rectangle de focus par défaut du navigateur (Chrome/Firefox/Safari)
     qui dessinerait une bbox englobante autour du polygone */
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.zone:hover {
  fill: rgba(255, 255, 100, 0.25);
  stroke: rgba(255, 255, 100, 0.7);
  stroke-width: 2.5;
}

.zone:focus { outline: none; }

/* État actif (zone sélectionnée après clic/tap) */
.zone.zone-active {
  fill: rgba(255, 255, 100, 0.30);
  stroke: rgba(255, 255, 100, 0.85);
  stroke-width: 2.5;
}

/* Mise en valeur "gold" (partenaires Leclerc, McDo) */
.zone.highlight-gold {
  fill: rgba(212, 175, 55, 0.30);
  stroke: rgba(255, 215, 0, 0.95);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
  animation: gold-pulse 2.4s ease-in-out infinite;
}

.zone.highlight-gold:hover,
.zone.highlight-gold.zone-active {
  fill: rgba(255, 215, 0, 0.45);
  stroke: rgba(255, 235, 100, 1);
  stroke-width: 3.5;
}

@keyframes gold-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.45)); }
  50%      { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.85)); }
}

/* Zones cliquables pour navigation (target défini) : pulse doux pour
   matérialiser que le bâtiment ouvre une vue détaillée. Plus subtil que le
   highlight-gold pour ne pas concurrencer les partenaires. */
.zone.zone-navigable {
  animation: navigable-pulse 2.6s ease-in-out infinite;
}

.zone.zone-navigable.highlight-gold {
  /* Si la zone est déjà gold (partenaire navigable), on garde la pulse gold uniquement */
  animation: gold-pulse 2.4s ease-in-out infinite;
}

@keyframes navigable-pulse {
  0%, 100% { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.20); }
  50%      { fill: color-mix(in srgb, var(--plan-accent) 22%, transparent); stroke: color-mix(in srgb, var(--plan-accent) 55%, transparent); }
}

/* Labels permanents posés sur les zones (noms des bâtiments visibles à tout moment).
   Halo blanc via paint-order pour garder la lisibilité sur fond pixel art varié. */
.zone-label-text {
  fill: #1a1a36;
  stroke: #ffffff;
  stroke-width: 3;
  paint-order: stroke fill;
  font-family: var(--font-display), monospace;
  font-weight: normal;
  pointer-events: none;
  user-select: none;
}

/* Badge d'étage (R+1) : chip jaune ancré en haut-droite des zones concernées,
   pour différencier visuellement les zones à l'étage du RDC (implicite). */
.zone-floor-badge { pointer-events: none; }
.zone-floor-badge-bg {
  fill: #ffe168;
  stroke: #14264d;
  stroke-width: 0.6;
}
.zone-floor-badge-text {
  fill: #14264d;
  font-family: var(--font-display), monospace;
  font-weight: normal;
  user-select: none;
}

/* Badge "porte" (↗) : chip ambré au centre des zones de salle qui ont un
   target (mènent à une autre salle ou au salon). Distingue les portes des
   stands / scènes classiques. */
.zone-door-badge { pointer-events: none; }
.zone-door-badge-bg {
  fill: #1a2e5a;
  stroke: #ffe168;
  stroke-width: 0.6;
}
.zone-door-badge-text {
  fill: var(--plan-accent);
  font-family: var(--font-display), monospace;
  font-weight: normal;
  user-select: none;
}

/* Sprites pixel art des personnages, posés sur les scènes : rendus dans un
   <foreignObject> SVG > <div xhtml> > <img> pour que les APNG/GIF animés
   soient lus par le décodeur d'images HTML (les <image> SVG ne les animent
   pas dans la plupart des navigateurs). */
.character-sprite {
  pointer-events: none;
  overflow: visible;
}
.character-sprite-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.character-sprite-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  user-select: none;
  -webkit-user-drag: none;
  /* Pas d'animation CSS : l'APNG joue son propre cycle de frames, le bob
     CSS ferait double-mouvement. */
}

/* Logos à l'intérieur d'une zone (Leclerc, McDo…) : rendu lisse, pas pixelisé */
.zone-logo {
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  image-rendering: auto;
  image-rendering: smooth;
  image-rendering: high-quality;
}

/* ── Contour de sélection : suit le tracé exact du polygone JSON ── */
.selection-layer { pointer-events: none; }

.selection-halo {
  fill: none;
  stroke: #000;
  stroke-opacity: 0.55;
  stroke-width: 5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.selection-outline {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  animation: zone-marching-ants 1s linear infinite;
}

@keyframes zone-marching-ants {
  to { stroke-dashoffset: -10; }
}

/* ── Tooltip ── */
#tooltip {
  position: absolute;
  background: var(--plan-panneau);
  color: var(--plan-texte);
  padding: 6px 12px;
  border: 1px solid var(--plan-bord);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
  text-align: center;
}

#tooltip .tip-cta {
  display: block;
  margin-top: 2px;
  color: var(--plan-accent);
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
}

#tooltip.visible {
  opacity: 1;
}

/* ── Bouton retour (bas, à gauche) ── */
#back-btn {
  position: fixed;
  bottom: 64px; /* au-dessus du partners-strip */
  left: 16px;
  z-index: 30;
  background: var(--plan-panneau);
  color: var(--plan-texte);
  border: 1px solid var(--plan-bord);
  border-radius: 4px;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, background 0.2s;
}

#back-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

#back-btn:hover {
  background: var(--plan-carte-bord);
}

/* ── Transition RPG (overlay navy plein écran) ── */
#transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--plan-fond);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#transition-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Character overlay (à l'opposé du panel info) ── */
#character-overlay {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 0 24px 24px;
  pointer-events: none;
  transform: translateX(-110%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  max-width: calc(100vw - 380px);
}

#character-overlay.visible {
  transform: translateX(0);
}

.character-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  animation: char-float 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.7s);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
  flex: 0 1 auto;
}

.character-img {
  display: block;
  width: auto;
  height: clamp(220px, 48vh, 460px);
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.character-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--plan-voile);
  border: 1px solid var(--plan-bord);
  border-radius: 4px;
  padding: 10px 12px;
  font-family: var(--font-body);
  color: var(--plan-texte);
  max-width: 260px;
  margin-bottom: 18px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.character-tagline {
  color: var(--plan-accent);
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1.5px;
}

.character-name {
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.5px;
  font-weight: normal;
}

.character-role {
  color: var(--plan-texte-doux);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.2;
  font-style: italic;
}

@keyframes char-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Si 2+ personnages, on réduit la hauteur pour qu'ils tiennent côte à côte */
#character-overlay[data-count="2"] .character-img,
#character-overlay[data-count="3"] .character-img {
  height: clamp(180px, 38vh, 360px);
}

/* Cas spécial : duo KPOP : l'illustration combinée a une zone droite quasi vide.
   On pose la bulle de texte par-dessus cette zone pour combler le vide. */
.character-card[data-id="kpop-duo"] {
  position: relative;
}
.character-card[data-id="kpop-duo"] .character-label {
  position: absolute;
  left: 80%;
  bottom: 8%;
  /*max-width: 46%;*/
  margin: 0;
}

/* ── Panel d'informations ── */
#info-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 100vw;
  height: 100vh;
  background: var(--plan-panneau);
  border-left: 1px solid var(--plan-bord);
  padding: 24px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

#info-panel.open {
  transform: translateX(0);
}

.panel-close {
  align-self: flex-end;
  background: none;
  border: 1px solid var(--plan-bord);
  border-radius: 4px;
  color: var(--plan-texte);
  font-size: 20px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.panel-close:hover {
  background: var(--plan-carte-bord);
}

.panel-title {
  color: var(--plan-titre);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}

.panel-activity {
  display: inline-block;
  margin: 0;
  align-self: flex-start;
  padding: 4px 8px;
  background: var(--plan-carte);
  border: 1px solid var(--plan-accent);
  border-radius: 3px;
  color: var(--plan-accent);
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
}

.panel-desc {
  color: var(--plan-texte-doux);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
}

/* ── Liens / metadata stand (website, instagram, taille) ── */
.panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.panel-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--plan-carte);
  border: 1px solid var(--plan-bord);
  border-radius: 4px;
  color: var(--plan-accent);
  font-family: var(--font-body);
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.panel-link:hover {
  background: var(--plan-carte-bord);
  border-color: var(--plan-accent);
}

.panel-link::before {
  content: "↗";
  font-size: 10px;
  opacity: 0.7;
}

/* ── Programmation (timeline) ── */
.panel-schedule {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.schedule-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #888;
  border-top: 1px solid var(--plan-carte-bord);
  padding-top: 14px;
}

.schedule-day-label {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--plan-accent);
  letter-spacing: 1.5px;
}

.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-event {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 10px 10px;
  background: var(--plan-carte);
  border: 1px solid var(--plan-carte-bord);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
}

.evt-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--plan-accent);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.5px;
  align-self: start;
  padding-top: 4px;
}

.evt-time-start,
.evt-time-end {
  display: block;
  white-space: nowrap;
}

.evt-time-end {
  color: var(--plan-accent-doux); /* fin légèrement atténué pour distinguer début/fin */
}

.evt-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.evt-title {
  color: var(--plan-titre);
  font-family: var(--font-display);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.3px;
}

.evt-intervenants {
  color: var(--plan-intervenants);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3;
  font-style: italic;
}

.evt-desc {
  color: var(--plan-texte-doux);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  #info-panel {
    width: 100%;
    height: auto;
    max-height: 70vh;
    top: auto;
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: 1px solid var(--plan-bord);
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
  }

  #info-panel.open {
    transform: translateY(0);
  }

  /* Sur mobile, les personnages passent en haut (le panel info occupe le bas) */
  #character-overlay {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    max-width: 100vw;
    padding: 10px;
    transform: translateY(-110%);
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #character-overlay.visible {
    transform: translateY(0);
  }
  .character-card {
    align-items: flex-start; /* label remonte au niveau du buste sur écran étroit */
    gap: 6px;
  }
  .character-img {
    height: clamp(120px, 24vh, 200px) !important;
  }
  .character-label {
    font-size: 10px;
    padding: 5px 8px;
    max-width: 150px;
    margin-bottom: 0;
    margin-top: 14px;
  }
  .character-name { font-size: 11px; }
  .character-role { font-size: 9px; }
  .character-tagline { font-size: 9px; letter-spacing: 1px; }

  .schedule-event {
    grid-template-columns: 56px 1fr;
    gap: 8px;
    font-size: 15px;
  }
  .evt-time { font-size: 8px; }
  .evt-title { font-size: 9px; }

  #back-btn {
    font-size: 0;
    padding: 6px 10px;
    line-height: 1;
  }
  #back-btn::before {
    content: attr(data-court);
    font-size: 8px;
    font-family: var(--font-display);
    letter-spacing: 0.5px;
  }

  #tooltip {
    font-size: 14px;
  }
  #tooltip .tip-cta { font-size: 7px; }

  .placeholder-label {
    font-size: 12px;
  }
}

@media (max-width: 400px) {
  .panel-title { font-size: 11px; }
  .panel-desc { font-size: 16px; }
}

/* ── EventGo : plan vectoriel ──
   Le fond n'est plus une image pixel art : rendu lisse, et contours des zones
   à épaisseur constante quelle que soit la taille du plan. */
#map-image.fond-vectoriel {
  image-rendering: auto;
  pointer-events: none;
}

/* ── EventGo : épaisseur des traits ──
   Otaku City dessinait le contour des zones et de la sélection en pixels fixes
   (non-scaling-stroke) : le zoom de la carte les multipliait, et sur un téléphone, où
   un stand ne fait que quelques dizaines de pixels, le contour en couvrait la moitié.
   Les traits suivent maintenant la carte (--egp-ref : un pixel d'un écran de 1 400 px),
   sans descendre sous un minimum à l'écran (--egp-px : un pixel au zoom du moment). */
#map-overlay { --egp-ref: 1px; --egp-px: 1px; }
#map-overlay .zone {
  vector-effect: none;
  stroke-width: max(calc(var(--egp-ref) * 2), var(--egp-px));
}
#map-overlay .zone:hover,
#map-overlay .zone.zone-active {
  stroke-width: max(calc(var(--egp-ref) * 2.5), calc(var(--egp-px) * 1.5));
}
#map-overlay .selection-halo {
  vector-effect: none;
  stroke-width: max(calc(var(--egp-ref) * 5), calc(var(--egp-px) * 3));
}
#map-overlay .selection-outline {
  vector-effect: none;
  stroke-width: max(calc(var(--egp-ref) * 2.5), calc(var(--egp-px) * 1.5));
  stroke-dasharray: max(calc(var(--egp-ref) * 6), calc(var(--egp-px) * 4)) max(calc(var(--egp-ref) * 4), calc(var(--egp-px) * 3));
  animation-name: egp-fourmis;
}
@keyframes egp-fourmis {
  to { stroke-dashoffset: min(calc(var(--egp-ref) * -10), calc(var(--egp-px) * -7)); }
}

/* ── EventGo : logo de l'exposant dans le panneau ── */
.panel-logo {
  display: block;
  max-width: 180px;
  max-height: 90px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 8px;
}

/* ── EventGo : lien de retour vers le site (en haut à gauche) ── */
#site-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 21;
  background: var(--plan-panneau);
  color: var(--plan-texte);
  border: 1px solid var(--plan-bord);
  border-radius: 4px;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1px;
  text-decoration: none;
}
#site-link:hover { background: var(--plan-carte-bord); }

/* ── EventGo : titre du chargement quand la carte n'a pas de logo central ── */
.preloader-titre {
  color: var(--plan-titre);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1px;
  text-align: center;
  padding: 0 24px;
  animation: logoPulse 1.5s ease-in-out infinite;
}

/* ── EventGo : typographie standard ──
   Les tailles d'Otaku City sont calées sur deux polices pixel (Press Start 2P,
   très large ; VT323, très petite). Avec une police courante, on les ramène à
   une lecture confortable, y compris sur une borne. */
.theme-standard { font-size: 16px; }
.theme-standard .preloader-text { font-size: 12px; }
.theme-standard .sponsor-label,
.theme-standard .partners-label { font-size: 11px; }
.theme-standard .vsd-label { font-size: 12px; }
.theme-standard #tooltip { font-size: 15px; }
.theme-standard #tooltip .tip-cta { font-size: 11px; }
.theme-standard #back-btn,
.theme-standard #site-link { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.theme-standard .panel-title { font-size: 20px; font-weight: 700; line-height: 1.3; }
.theme-standard .panel-activity { font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.theme-standard .panel-desc { font-size: 15px; line-height: 1.5; }
.theme-standard .panel-link { font-size: 14px; }
.theme-standard .schedule-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.theme-standard .schedule-day-label { font-size: 15px; font-weight: 700; }
.theme-standard .schedule-event { font-size: 14px; grid-template-columns: 58px 1fr; }
.theme-standard .evt-time { font-size: 13px; font-weight: 700; }
.theme-standard .evt-title { font-size: 15px; font-weight: 700; }
.theme-standard .evt-intervenants,
.theme-standard .evt-desc { font-size: 14px; }
.theme-standard .character-tagline { font-size: 11px; }
.theme-standard .character-name { font-size: 16px; font-weight: 700; }
.theme-standard .character-role { font-size: 14px; }
@media (max-width: 600px) {
  .theme-standard #back-btn::before { font-size: 13px; font-family: var(--font-display); }
  .theme-standard .evt-title { font-size: 14px; }
}

/* ── EventGo : le dessin du plan suit le thème de la carte ── */
.egplan-svg .egplan-txt { fill: var(--plan-encre); }
.egplan-svg .egplan-txt-doux { fill: var(--plan-encre-douce); }
.egplan-svg .egplan-sol-fond { fill: var(--plan-sol); }
/* Autour de la salle (relief, isométrie) : rien, le fond de la page se voit au travers.
   Un seul fond derrière la carte, celui de --plan-fond (et son motif). */
.egplan-svg .egplan-arriere { fill: transparent; }
/* Zone choisie : la couleur d'accent du thème (le jaune d'Otaku City par défaut). */
.zone.zone-active {
  fill: color-mix(in srgb, var(--plan-accent) 30%, transparent);
  stroke: color-mix(in srgb, var(--plan-accent) 85%, transparent);
}

/* ── EventGo : plan en image (PNG, JPG), lissé ; « pixelArt » sur une vue garde le rendu d'Otaku City ── */
#map-image.image-lisse { image-rendering: auto; }

/* ── EventGo : recherche en haut de la carte ──
   Un champ et un bouton « Liste » ; dessous, la liste des exposants et des espaces,
   filtrée à la frappe. Lignes de 52 px au moins : on les touche du doigt sur une borne. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
#recherche {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  z-index: 110;
  font-family: var(--font-body);
}
#recherche[hidden], #recherche .r-panneau[hidden] { display: none; }
.avec-logo-centre #recherche { top: 100px; }
@media (min-width: 769px) {
  /* Le panneau d'information occupe la droite : la recherche se centre sur ce qui reste. */
  .panneau-ouvert #recherche { left: calc((100vw - 360px) / 2); width: min(520px, calc(100vw - 392px)); }
}
@media (max-width: 900px) {
  #recherche { top: 60px; left: 16px; right: 16px; width: auto; transform: none; }
  .panneau-ouvert #recherche { left: 16px; width: auto; }
  .avec-logo-centre #recherche { top: 100px; }
}
@media (max-width: 600px) {
  #recherche, .avec-logo-centre #recherche { top: 64px; left: 8px; right: 8px; }
}
.r-barre { display: flex; gap: 8px; }
.r-champ,
.r-tout {
  height: 48px;
  background: var(--plan-panneau);
  border: 1px solid var(--plan-bord);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.r-champ {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 16px;
  color: var(--plan-texte-doux);
  cursor: text;
}
.r-champ:focus-within {
  border-color: var(--plan-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--plan-accent) 35%, transparent), 0 4px 16px rgba(0, 0, 0, 0.35);
}
.r-loupe { width: 20px; height: 20px; flex: none; }
#recherche-champ {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--plan-titre);
  font: inherit;
  font-size: 16px;
  outline: none;
}
#recherche-champ::placeholder { color: var(--plan-texte-doux); opacity: 1; }
#recherche-champ::-webkit-search-cancel-button { display: none; }
.r-effacer {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--plan-texte-doux);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.r-effacer:hover { background: var(--plan-carte); color: var(--plan-texte); }
.r-tout {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  color: var(--plan-texte);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.r-tout svg { width: 20px; height: 20px; }
.r-tout:hover { background: var(--plan-carte); }
#recherche.ouvert .r-tout { border-color: var(--plan-accent); color: var(--plan-accent); }
.r-panneau {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  max-height: min(62vh, 560px);
  background: var(--plan-panneau);
  border: 1px solid var(--plan-bord);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.r-compte {
  margin: 0;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--plan-texte-doux);
  border-bottom: 1px solid var(--plan-carte-bord);
}
#recherche-liste {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.r-repere {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--plan-accent);
  background: var(--plan-panneau);
}
.r-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 16px;
  color: var(--plan-texte);
  cursor: pointer;
}
.r-option:hover,
.r-option.r-actif { background: var(--plan-carte); }
.r-pastille {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--plan-carte-bord);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.r-espace .r-pastille { border-radius: 50%; background: var(--plan-accent); }
.r-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.r-nom,
.r-sous { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-nom { font-size: 16px; font-weight: 700; color: var(--plan-titre); }
.r-nom mark {
  background: color-mix(in srgb, var(--plan-accent) 35%, transparent);
  color: inherit;
  border-radius: 3px;
}
.r-sous { font-size: 13px; color: var(--plan-texte-doux); }
.r-stand {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--plan-accent);
  border-radius: 6px;
  color: var(--plan-accent);
  font-size: 14px;
  font-weight: 700;
}

/* ── EventGo : bandeau du haut, aux couleurs du salon ──
   Le logo du salon à gauche, « Retour au site » à droite ; sur un grand écran, la
   recherche se pose au milieu du bandeau, sur un petit, juste dessous. Le panneau des
   fiches s'ouvre sous le bandeau. */
:root { --bandeau-h: 72px; }
#bandeau {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bandeau-h);
  z-index: 105;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  background: var(--plan-bandeau);
  color: var(--plan-bandeau-texte);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.bandeau-logo { display: block; height: 44px; width: auto; max-width: 30vw; object-fit: contain; }
.bandeau-titre { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.bandeau-droite { display: flex; align-items: center; gap: 16px; }
.bandeau-logo-droite { display: block; height: 40px; width: auto; }
#bandeau #site-link {
  position: static;
  background: transparent;
  color: var(--plan-bandeau-texte);
  border: 1px solid color-mix(in srgb, var(--plan-bandeau-texte) 45%, transparent);
  border-radius: 999px;
  padding: 10px 18px;
  white-space: nowrap;
}
#bandeau #site-link:hover { background: color-mix(in srgb, var(--plan-bandeau-texte) 14%, transparent); }
.avec-bandeau #recherche { top: calc((var(--bandeau-h) - 48px) / 2); width: min(520px, calc(100vw - 600px)); }
@media (min-width: 769px) {
  .avec-bandeau #info-panel { top: var(--bandeau-h); height: calc(100vh - var(--bandeau-h)); }
  .avec-bandeau.panneau-ouvert #recherche { left: 50%; width: min(520px, calc(100vw - 600px)); }
}
@media (max-width: 1100px) {
  /* Plus la place au milieu du bandeau : la recherche passe dessous. */
  .avec-bandeau #recherche,
  .avec-bandeau.panneau-ouvert #recherche { top: calc(var(--bandeau-h) + 10px); left: 16px; right: 16px; width: auto; transform: none; }
  .avec-bandeau.panneau-ouvert #recherche { right: 376px; }
}
@media (max-width: 768px) {
  .avec-bandeau.panneau-ouvert #recherche { right: 16px; }
}
@media (max-width: 600px) {
  :root { --bandeau-h: 56px; }
  #bandeau { padding: 0 12px; }
  .bandeau-logo { height: 32px; max-width: 46vw; }
  #bandeau #site-link { padding: 8px 12px; font-size: 13px; }
  .avec-bandeau #recherche,
  .avec-bandeau.panneau-ouvert #recherche { top: calc(var(--bandeau-h) + 8px); left: 8px; right: 8px; }
}