* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0b0b0c; color: #e9eaec;
}
/* Hero plein écran (sous le header) contenant la web app. */
#stage {
  position: relative; width: 100%; height: calc(100svh - 55px); overflow: hidden;
  touch-action: pan-x pan-y; /* le slider gère son propre drag */
}

/* --- Logo (mark CSS) + header + footer (partagés avec geo.css) --- */
.brand-mark{width:26px;height:26px;border-radius:50%;flex:0 0 auto;position:relative;display:inline-block;
  background:radial-gradient(120% 120% at 32% 26%, #8fd0ff 0%, #2f7ff0 46%, #ff7a3c 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.10), inset 0 -3px 7px rgba(0,0,0,.30), 0 2px 8px rgba(47,127,240,.35)}
.brand-mark::after{content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.45);transform:rotate(-24deg) scaleY(.42)}
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:11px 18px;background:rgba(11,11,12,.86);backdrop-filter:blur(10px);border-bottom:1px solid #1b1d23}
.site-header .brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand-name{font-size:18px;font-weight:800;letter-spacing:-.4px;color:#fff}
.brand-sky{color:#7cc4ff}
.site-nav{display:flex;align-items:center;gap:16px;font-size:14px}
.site-nav a{color:#cdd1d6;text-decoration:none}
.site-nav a:hover{color:#fff}
.site-nav .nav-cta{background:linear-gradient(135deg,#ff5a3c,#ff2d55);color:#fff;font-weight:700;padding:8px 13px;border-radius:10px}
@media(max-width:520px){.site-nav{gap:13px;font-size:13px}.site-nav .nav-cta{display:none}}
.site-footer{max-width:760px;margin:0 auto;padding:22px 18px calc(28px + env(safe-area-inset-bottom));
  border-top:1px solid #1b1d23;text-align:center;color:#8b9097;font-size:13px}
.site-footer .sf-brand{display:inline-flex;align-items:center;gap:8px;color:#e9eaec;font-weight:700;font-size:15px}
.site-footer .sf-tag{margin:8px auto 12px;max-width:520px}
.site-footer .sf-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.site-footer .sf-links a{color:#aab0b7;text-decoration:none}
.site-footer .sf-links a:hover{color:#fff;text-decoration:underline}
.map { position: absolute; inset: 0; }
/* La carte "après" est clippée à droite du slider (variable --x = position px) */
#map-after { clip-path: inset(0 0 0 var(--x, 50%)); }

/* Slider / poignée */
#slider {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 4px; margin-left: -2px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  z-index: 5; cursor: ew-resize; touch-action: none;
}
#slider-handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  color: #111; font-size: 20px; line-height: 1; user-select: none;
}
#slider-handle .arrow { padding: 0 1px; opacity: .7; }

/* Étiquettes millésimes */
.ml-label {
  position: absolute; bottom: 84px; z-index: 6;
  background: rgba(17,17,18,.72); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: .2px;
  backdrop-filter: blur(6px); pointer-events: none;
}
.ml-label--left { left: 12px; }
.ml-label--right { right: 12px; }

/* Sélecteurs */
#controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.sel-row { display: flex; gap: 10px; }

/* Liens vers les sections éditoriales/SEO */
#explore { text-align: center; font-size: 12px; color: rgba(255,255,255,.8); }
#explore a { color: #fff; text-decoration: none; opacity: .9; }
#explore a:hover { opacity: 1; text-decoration: underline; }
#explore span { opacity: .5; margin: 0 4px; }

/* CTA viral */
#gen-video {
  width: 100%; padding: 15px; border: 0; border-radius: 14px;
  font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #ff5a3c, #ff2d55);
  box-shadow: 0 6px 20px rgba(255,45,85,.45); -webkit-appearance: none;
}
#gen-video:active { transform: translateY(1px); }
#gen-video:disabled { opacity: .6; }

.sel { flex: 1; display: flex; flex-direction: column; gap: 4px; color: #fff; font-size: 12px; }
.sel span { opacity: .85; padding-left: 4px; }
.sel select {
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 11px 12px; border-radius: 12px; border: 0;
  background: rgba(255,255,255,.95); color: #111; font-size: 15px; font-weight: 600;
}
.sel select option:disabled { color: #aaa; }

/* Recherche d'adresse (BAN) */
#search {
  position: absolute; z-index: 8;
  top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px;
}
#search-input {
  width: 100%; padding: 13px 16px; border: 0; border-radius: 14px;
  font-size: 16px; /* >=16px : évite le zoom auto iOS au focus */
  background: rgba(255,255,255,.97); color: #111;
  box-shadow: 0 4px 16px rgba(0,0,0,.28); -webkit-appearance: none;
}
#search-results {
  list-style: none; margin: 6px 0 0; padding: 6px;
  background: rgba(255,255,255,.98); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); max-height: 46vh; overflow-y: auto;
}
#search-results li {
  padding: 11px 12px; border-radius: 9px; cursor: pointer;
  font-size: 14px; color: #111; line-height: 1.3;
}
#search-results li:hover, #search-results li.active { background: #eef1f5; }
#search-results li .ctx { display: block; font-size: 12px; color: #777; }

/* Attribution IGN — repositionnée sous la barre de recherche */
#watermark {
  position: absolute; top: calc(66px + env(safe-area-inset-top)); right: 12px; z-index: 6;
  background: rgba(0,0,0,.5); color: #fff; font-size: 11px;
  padding: 4px 8px; border-radius: 6px; letter-spacing: .2px;
}
/* On masque l'attribution MapLibre par défaut, la nôtre suffit (et reste visible) */
.maplibregl-ctrl-attrib, .maplibregl-ctrl-logo { display: none !important; }

/* Overlay vidéo */
#video-overlay {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0,0,0,.82); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
#video-overlay[hidden] { display: none; }
.vo-card {
  position: relative; width: 100%; max-width: 360px;
  background: #15161a; border-radius: 18px; padding: 18px;
  color: #fff; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
#vo-close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  background: transparent; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
#vo-status { margin: 6px 0 12px; font-size: 15px; font-weight: 600; }
#vo-progress { height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
#vo-bar { height: 100%; width: 0; background: linear-gradient(90deg, #ff5a3c, #ff2d55); transition: width .25s; }
#vo-video { width: 100%; border-radius: 12px; margin-top: 12px; background: #000; aspect-ratio: 9 / 16; }
#vo-actions { display: flex; gap: 10px; margin-top: 14px; }
#vo-actions > * {
  flex: 1; padding: 13px; border-radius: 12px; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 700; text-decoration: none; text-align: center;
}
#vo-share { background: #ff2d55; color: #fff; }
#vo-download { background: #2a2c33; color: #fff; }
#vo-link { display: flex; gap: 8px; margin-top: 12px; }
#vo-url {
  flex: 1; min-width: 0; padding: 12px; border-radius: 12px; border: 0;
  background: #0e0f12; color: #cfd3d8; font-size: 13px;
}
#vo-copy { padding: 12px 14px; border: 0; border-radius: 12px; background: #2a2c33; color: #fff; font-weight: 700; cursor: pointer; }