@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  --ink: #111111;
  --paper: #ffffff;
  --paper-dark: #f2f2f2;
  --border: #d0d0d0;
  --muted: #888888;
  --accent: #a96962;
  --accent-2: #2a4d53;
  --accent-3: #5c7a56;
  --text: #444444;
  /* Largeur du panel (et des viewers/popup alignés dessus) : 440px fixe sur desktop,
     25% de l'écran sur iPad (700–1024px) pour éviter qu'il domine trop l'écran,
     largeur minimum lisible en dessous de 700px (téléphone). */
  --panel-width: min(440px, 100vw);
}
/* Liens hypertexte (citations, "en savoir plus"...) : gris au lieu du bleu/violet
   par défaut du navigateur, garde le soulignement pour rester identifiable. */
a { color: var(--muted) !important; }
a:hover { color: var(--ink) !important; }
/* Bandeaux de citation colorés (.panel-quote) : le texte y est blanc (inline
   style="color:#fff"), les liens restent blancs aussi pour rester lisibles sur
   le fond coloré — seul le soulignement les distingue, pas de gris ici. */
.panel-quote a, .panel-quote a:hover { color: #fff !important; }
@media (min-width: 700px) and (max-width: 1024px) {
  :root { --panel-width: 25vw; }
}
@media (max-width: 699px) {
  :root { --panel-width: min(320px, 100vw); }
}
/* iPhone en paysage : la LARGEUR (667–932px) tombe dans les tranches iPad ci-dessus (panel
   trop étroit) — c'est la hauteur ≤500px qui identifie un téléphone en paysage. Panel à 45%
   de l'écran pour rester lisible, la carte se réajuste via shrinkToFitIfNeeded(). Déclaré en
   dernier pour gagner la cascade sur les règles de largeur. */
@media (max-height: 500px) {
  :root { --panel-width: 45vw; }
  /* Label de promenade un peu plus compact pour tenir avec le bouton fermer sur petits écrans */
  #ui-panel-label { font-size: 0.8rem; }
  /* Marges intérieures réduites : à ~380px de panel, 2rem de chaque côté mangeait le texte */
  .story-block { padding: 1.4rem 1.4rem 2rem; }

}
/* (Les règles du menu hamburger iPhone sont EN FIN DE FICHIER : elles doivent venir après
   les règles de base de .ui-routes / #menu-btn pour gagner la cascade CSS.) */

/* Sur iOS/iPadOS, 100vh = hauteur AVEC la barre d'outils Safari déployée : le bas de la page
   peut se retrouver physiquement sous la barre (carte "pas entière" en bas). dvh = hauteur
   dynamique réellement visible. Appliqué partout où la hauteur pleine écran compte. */
@supports (height: 100dvh) {
  body { height: 100dvh; }
  #map-wrap { height: 100dvh; }
  #panel { height: calc(100dvh - 52px); }
  .ui-routes.header-hidden ~ #panel,
  #ui-top.header-hidden ~ #panel { height: 100dvh; }
}

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

/* Supprime le délai/hésitation du tap sur iOS (Safari attend sinon de savoir si le geste
   est un double-tap) sur tout ce qui est cliquable : boutons du header, hotspots, etc. */
button, .route-btn, .info-btn, .hotspot, .panel-close, .zoom-btn, .info-toggle, .img-clickable {
  touch-action: manipulation;
}

/* ── ÉCRAN ROTATION MOBILE ── */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--paper);
  color: var(--ink);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
}
#rotate-overlay svg {
  animation: rotate-hint-spin 1.8s ease-in-out infinite;
}
@keyframes rotate-hint-spin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}
#rotate-overlay p {
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.rotate-overlay-note {
  font-size: 0.7rem !important;
  opacity: 0.6;
  max-width: 260px;
}
@media (orientation: portrait) and (max-width: 900px) {
  #rotate-overlay { display: flex; }
  #intro, #map-wrap, #panel, #ui-panel-label { display: none !important; }
}

/* (Ancienne règle ≤900px qui masquait #ui-panel-label supprimée : elle cachait aussi le
   bouton fermer qui vit dedans, et le chevauchement avec les textes du header est géré
   dynamiquement par updateHeaderOverlap() — iPhone fonctionne donc comme iPad.) */

/* Les textes des promenades (et "En savoir +") sont masqués dynamiquement en JS (cf. updateHeaderOverlap)
   dès qu'ils chevaucheraient le nom de la promenade affiché au-dessus du panel — quelle que soit la
   largeur d'écran (ça peut arriver sur desktop avec "Promenade Artistique", pas seulement sur iPad).
   Le logo "LA MEDINA" et le bouton fermer du panel restent toujours visibles.
   visibility (et non display) pour garder une géométrie stable et éviter tout clignotement à la mesure. */
.ui-routes.header-hidden {
  visibility: hidden;
  pointer-events: none;
}

body {
  background: var(--paper);
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  font-weight: 300;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  cursor: default;
  color: var(--ink);
}

/* ── INTRO SCREEN ── */
#intro {
  position: fixed;
  inset: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  z-index: 100;
  padding: 3rem 4rem;
  transition: opacity 0.6s ease, visibility 0.6s;
}
#intro.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-title {
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1rem;
}
.intro-title em {
  font-style: normal;
  color: var(--muted);
}
.intro-subtitle {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.15;
  max-width: 700px;
  margin-bottom: 3rem;
}
.intro-divider {
  width: 40px;
  height: 1px;
  background: var(--ink);
  margin: 1.5rem 0;
  opacity: 0.3;
}
.start-btn {
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.8rem 2rem;
  cursor: pointer;
  transition: all 0.3s;
}
.start-btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.intro-copyright {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── LABEL PROMENADE AU-DESSUS DU PANEL ── */
#ui-panel-label {
  position: absolute;
  right: 0;
  top: 0;
  width: var(--panel-width);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem 0 2rem;
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
  border-left: 1px solid var(--border);
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#ui-panel-label.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── POPUP INTRO CARTE ── */
#map-intro-popup {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(17, 17, 17, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}
#map-intro-popup.show {
  opacity: 1;
  visibility: visible;
}
.map-intro-popup-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 3rem 2.8rem;
  transform: translateY(12px);
  transition: transform 0.4s ease;
}
#map-intro-popup.show .map-intro-popup-card {
  transform: translateY(0);
}
.map-intro-popup-card p {
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 1.4rem;
}
.map-intro-popup-card p:last-child {
  margin-bottom: 0;
}
.map-intro-popup-close {
  position: sticky;
  top: 0.2rem;
  float: right;
  margin: 0 -1.4rem 0 0.6rem;
  background: var(--paper);
  border: none;
  font-size: 1.1rem;
  color: var(--ink);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s;
  z-index: 3;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 50%;
}
.map-intro-popup-close:hover {
  opacity: 1;
}

.map-intro-popup-label {
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
}

.pp-route1 { color: var(--accent); }
.pp-route2 { color: var(--accent-2); }
.pp-route3 { color: var(--accent-3); }

.map-intro-popup-download {
  display: block;
  width: fit-content;
  margin: 2rem auto 0;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--ink);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  color: var(--ink);
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.map-intro-popup-download:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ── MAP CONTAINER ── */
#map-wrap {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: var(--paper);
  /* Empêche le navigateur de gérer lui-même le pan/pinch-zoom natif sur la carte
     (qui zoomerait toute la page) : le JS gère le pan et le pinch-zoom lui-même. */
  touch-action: none;
}

#map-stage {
  position: absolute;
  transform-origin: 0 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: grab;
}
#map-stage:active { cursor: grabbing; }
#map-stage.dragging { transition: none; }
#map-stage.zooming { transition: none; }

/* ── HOTSPOTS ── */
.hotspot {
  position: absolute;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.hotspot-ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.2s;
}
.hotspot:hover .hotspot-ring { transform: scale(1.15); }
.hotspot-ring::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid;
  opacity: 0.7;
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}

@keyframes hotspot-pop {
  0%   { transform: translate(-50%, -50%) scale(1); }
  40%  { transform: translate(-50%, -50%) scale(1.5); }
  70%  { transform: translate(-50%, -50%) scale(0.9); }
  100% { transform: translate(-50%, -50%) scale(1.2); }
}

.hotspot-active {
  animation: hotspot-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  z-index: 10;
}
.hotspot-active .hotspot-ring {
  transform: scale(1.2);
  box-shadow: 0 0 0 4px currentColor;
}

.hotspot-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.route-1 { color: var(--accent); }
.route-1 .hotspot-ring { border-color: var(--accent); background: rgba(169, 105, 98, 0.5); }
.route-1 .hotspot-ring::before { border-color: var(--accent); }
.route-1 .hotspot-dot { background: var(--accent); }

.route-2 { color: var(--accent-2); }
.route-2 .hotspot-ring { border-color: var(--accent-2); background: rgba(42, 77, 83, 0.5); }
.route-2 .hotspot-ring::before { border-color: var(--accent-2); }
.route-2 .hotspot-dot { background: var(--accent-2); }

.route-3 { color: var(--accent-3); }
.route-3 .hotspot-ring { border-color: var(--accent-3); background: rgba(92, 122, 86, 0.5); }
.route-3 .hotspot-ring::before { border-color: var(--accent-3); }
.route-3 .hotspot-dot { background: var(--accent-3); }

/* Point de départ de chaque promenade : dilate de 1 à 1.6, opacité inchangée
   (reste à l'opacité de départ des autres hotspots, 0.5) */
@keyframes pulse-start-1 {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.6); }
}
@keyframes pulse-start-2 {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.6); }
}
@keyframes pulse-start-3 {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.6); }
}
.hotspot-start.route-1 .hotspot-ring { animation: pulse-start-1 2.5s ease-in-out infinite; }
.hotspot-start.route-2 .hotspot-ring { animation: pulse-start-2 2.5s ease-in-out infinite; }
.hotspot-start.route-3 .hotspot-ring { animation: pulse-start-3 2.5s ease-in-out infinite; }
/* Une fois cliqué (actif), le point de départ redevient identique aux autres hotspots actifs */
.hotspot-start.hotspot-active .hotspot-ring { animation: none; }

.hotspot-label {
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255,255,255,0.92);
  padding: 3px 7px;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.hotspot:hover .hotspot-label { opacity: 1; pointer-events: auto; font-size: 2.8rem; }
.route-hover .hotspot-label { opacity: 1; pointer-events: auto; font-size: 2.8rem; }
.hotspot-active .hotspot-label {
  opacity: 1;
  pointer-events: auto;
  font-size: 2.8rem;
  font-weight: 700;
  padding: 4px 10px;
  background: rgba(255,255,255,0.97);
  transition: opacity 0.3s, font-size 0.3s, font-weight 0.3s;
}

/* ── STORY PANEL ── */
#panel {
  position: fixed;
  right: 0;
  top: 52px;
  height: calc(100vh - 52px);
  width: var(--panel-width);
  background: var(--paper);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 50;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
#panel.open { transform: translateX(0); }


#panel-scroll {
  flex: 1;
  overflow-y: auto;
}

.story-block {
  padding: 2rem 2rem 2.5rem;
  border-bottom: 1px solid var(--border);
}

.story-block .img-clickable {
  margin-top: 1.5rem;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.panel-close {
  flex: none;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  pointer-events: auto;
}
.panel-close:hover { background: var(--ink); color: white; }



.panel-number {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.8rem;
  font-weight: 400;
}

.panel-title {
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 1.2rem;
}

.panel-divider {
  width: 24px;
  height: 1px;
  margin: 1rem 0;
  background: var(--ink);
  opacity: 0.2;
}

.panel-story-title {
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 1rem;
  font-weight: 400;
}

.panel-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text);
  font-weight: 300;
}

.panel-text p + p { margin-top: 0.9em; }

.panel-quote {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  border-left: 2px solid;
}

.panel-quote p {
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: #fff;
  margin: 0;
  font-weight: 400;
}

.info-toggle {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s;
}
.info-toggle:hover { color: var(--ink); }

.info-toggle-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.info-toggle.open .info-toggle-arrow { transform: rotate(180deg); }

.info-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
.info-content.open { max-height: 3000px; }

.info-content p {
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--muted);
  margin-top: 1.1rem;
}
.info-content p:first-child { margin-top: 1.1rem; }

#image-popup {
  position: fixed;
  top: 0; left: 0; right: var(--panel-width); bottom: 0;
  z-index: 1500;
  background: var(--paper);
  display: none;
  align-items: center;
  justify-content: center;
}
#image-popup.open { display: flex; }
#image-popup img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  cursor: zoom-in;
  transform-origin: center center;
  transform: translate(0px, 0px) scale(1);
  transition: transform 0.25s ease;
  touch-action: none; /* le JS gère lui-même pan/pinch, comme sur la carte principale */
}
#image-popup img.zoomed { cursor: grab; }
#image-popup img.zoomed:active { cursor: grabbing; }
#image-popup img.dragging,
#image-popup img.zooming { transition: none; }
.image-popup-close {
  position: fixed;
  top: 1rem;
  right: calc(var(--panel-width) + 1.5rem);
  z-index: 1600;
  cursor: pointer;
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 1;
  background: none;
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 0.5rem 1rem;
  transition: opacity 0.2s;
}
.image-popup-close:hover { opacity: 1; }
/* iPhone paysage (hauteur ≤500px) : la zone à côté du panel est trop étroite,
   la popup passe en plein écran (recouvre le panel) pour montrer l'image entière. */
@media (max-height: 500px) {
  #image-popup { right: 0; }
  .image-popup-close { right: 1.5rem; }
}

#video-popup {
  position: fixed;
  top: 0; left: 0; right: var(--panel-width); bottom: 0;
  z-index: 1500;
  background: var(--paper);
  display: none;
  align-items: center;
  justify-content: center;
}
#video-popup.open { display: flex; }
#video-popup video {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}
.video-popup-mute {
  position: fixed;
  top: 1rem;
  left: 1.5rem;
  z-index: 1600;
  cursor: pointer;
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 1;
  background: none;
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 0.5rem 1rem;
  transition: opacity 0.2s;
}
.video-popup-mute:hover { opacity: 1; }
@media (max-height: 500px) {
  #video-popup { right: 0; }
}


/* ── TOP UI ── */
#ui-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  padding: 0 2rem;
  z-index: 20;
  pointer-events: none;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
}
/* Le blur du header est recalculé au-dessus de la carte en mouvement à chaque frame de
   pan/zoom — très coûteux sur iOS/iPadOS. On le coupe sur iPad/mobile : le fond blanc à
   90% suffit visuellement, et le GPU respire. */
@media (max-width: 1024px) {
  #ui-top { backdrop-filter: none; background: rgba(255,255,255,0.96); }
}

.ui-logo {
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: auto;
  cursor: pointer;
}

.ui-routes {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  pointer-events: all;
  white-space: nowrap;
  flex: 1;
}

.route-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 12px;
  cursor: pointer;
  transition: color 0.2s;
  font-weight: 500;
  /* Réserve la largeur dès le départ — évite le layout shift au hover et à la fermeture du panel */
}
.route-btn:not(.active):not(:hover) { opacity: 0.45; font-weight: 500; }
.route-btn:hover { color: var(--ink); opacity: 1; }
.route-btn.r1:hover, .route-btn.r1.active, .route-btn.r1.hover { color: var(--accent);   border-color: transparent; opacity: 1; }
.route-btn.r2:hover, .route-btn.r2.active, .route-btn.r2.hover { color: var(--accent-2); border-color: transparent; opacity: 1; }
.route-btn.r3:hover, .route-btn.r3.active, .route-btn.r3.hover { color: var(--accent-3); border-color: transparent; opacity: 1; }

.info-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 4px 12px;
  margin-left: auto;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.info-btn:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Quand le panel est ouvert, tous les boutons passent en gris, et "En savoir +" disparaît */
.ui-routes.panel-open .route-btn {
  color: var(--muted) !important;
  font-weight: 500 !important;
}
.ui-routes.panel-open .info-btn {
  display: none;
}

/* ── ZOOM CONTROLS ── */
#zoom-ctrl {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 20;
}
.zoom-btn {
  width: 34px;
  height: 34px;
  background: white;
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.zoom-btn:hover { background: var(--paper-dark); }

/* ── IMAGE HOVER ── */
.img-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s ease;
}
.img-clickable:hover .img-hover-overlay {
  background: rgba(0,0,0,0);
}
.img-hover-overlay span {
  color: white;
  opacity: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  background: rgba(0,0,0,0.75);
  padding: 0.5rem 1.2rem;
  transition: opacity 0.3s ease;
}
.img-clickable:hover .img-hover-overlay span {
  opacity: 1;
}
.img-clickable:hover img {
  transform: scale(1.03);
}
/* Sur tactile il n'y a pas de survol : le label est toujours visible,
   cadre noir + texte noir sur fond transparent, et reste identique après clic. */
@media (hover: none) and (pointer: coarse) {
  .img-hover-overlay {
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0.6rem;
  }
  .img-hover-overlay span {
    opacity: 1;
    color: #000;
    background: rgba(255,255,255,0.3);
    border: 1px solid #000;
  }
  .img-clickable:hover img { transform: none; }
}


/* ── ILLUSTRATED SVG MAP ── */
#illustrated-map {
  width: 100%;
  height: 100%;
}

/* ── LIGNES DE PROMENADE ── */
.route-line {
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-width: 11;
  opacity: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-line 0.8s ease forwards;
}
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

/* ── INDICE D'USAGE (molette) ── */
.usage-hint {
  position: fixed;
  left: 0; right: var(--panel-width); bottom: 32px;
  display: flex; justify-content: flex-start; align-items: center;
  padding-left: 2rem;
  pointer-events: none;
  z-index: 50;
}
.usage-hint .hint-pill {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 10px 0;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.usage-hint.show .hint-pill {
  opacity: 1;
  transform: translateY(0);
}
.hint-lead {
  font-weight: 500;
  margin-bottom: 2px;
}
.hint-row {
  display: flex; align-items: center; gap: 10px;
}
.hint-wheel {
  animation: hint-scroll 1.4s ease-in-out infinite;
}
@keyframes hint-scroll {
  0%, 100% { transform: translateY(-3px); opacity: 1; }
  50% { transform: translateY(3px); opacity: 0.3; }
}
.hint-hand {
  animation: hint-drag 1.4s ease-in-out infinite;
}
@keyframes hint-drag {
  0%, 100% { transform: translateX(-3px); opacity: 1; }
  50% { transform: translateX(3px); opacity: 0.6; }
}

/* ── Bascule desktop / tactile de l'indice d'usage ──
   Par défaut on montre la version souris+main. Sur appareil tactile
   (pas de survol, pointeur grossier) on montre pincer+doigt. */
.hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hint-desktop { display: none; }
  .hint-touch { display: flex; }
  /* Le texte "Choisissez une promenade…" passe SOUS les pictos (flex order) */
  .hint-lead { order: 1; margin-bottom: 0; margin-top: 2px; }
}
.hint-finger {
  animation: hint-drag 1.4s ease-in-out infinite;
}
.hint-pinch-g {
  transform-origin: 12px 12px;
  animation: hint-pinch 1.4s ease-in-out infinite;
}
@keyframes hint-pinch {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.6); opacity: 0.6; }
}

/* ── MENU HAMBURGER (iPhone paysage) ──
   Placé en FIN de fichier exprès : ces règles doivent venir après les règles de base
   de .ui-routes et .route-btn pour gagner la cascade CSS (même spécificité). */
#menu-btn {
  display: none;
  margin-left: auto; /* justifié à droite du header */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  flex-shrink: 0;
}
#menu-btn .menu-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
}

@media (max-height: 500px) {
  /* Header iPhone : seul "LA MEDINA" reste sur la ligne, hamburger justifié à droite,
     les promenades + "En savoir +" passent dans un menu déroulant sous le header. */
  #menu-btn { display: flex; }
  .ui-routes {
    display: none;
    position: fixed;
    top: 52px;
    right: 0;
    left: auto;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1rem 1.4rem 1.2rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-top: none;
    white-space: nowrap;
  }
  #ui-top.menu-open .ui-routes { display: flex; }
  .ui-routes .info-btn { margin-left: 0; }
  /* Dans le menu vertical, les boutons sont toujours entièrement visibles et lisibles */
  .ui-routes .route-btn { opacity: 1 !important; padding: 4px 0; }

  /* Panel ouvert : le label de promenade occupe les 45vw à droite du header et se dessinait
     par-dessus le hamburger — on décale le hamburger (et son menu) juste à gauche de cette zone. */
  #ui-top.panel-open #menu-btn { margin-right: calc(var(--panel-width) - 0.8rem); }
  #ui-top.panel-open .ui-routes { right: var(--panel-width); }
}