/* ============================================================
   Cihan Toprakci — pages locales (pages/villes.css, anciennement ville.css)
   Styles v2 des 9 pages villes (2026-09-02), calqués sur la
   page hub /developpeur-web/ : héro deux colonnes avec la
   carte dessinée du bassin (ville active en or), chips de
   quartiers, bande CTA sombre détachée. Chargé après le socle, avant la feuille de la page.
   Également chargé par les 3 pages du blog : /blog/ y prend tout le héros .zi-*,
   et les deux articles la variante sombre de .cta-band et la pastille .zi-pin.
   ============================================================ */

/* ================= HÉRO (texte + carte) ================= */
.zi-hero{border-bottom:0; min-height:min(76vh, 720px); display:flex; align-items:center; padding-bottom:2.4rem;
  background:
    radial-gradient(900px 480px at 86% 18%, rgba(236,184,69,0.11), transparent 60%),
    radial-gradient(520px 320px at 36% -12%, rgba(47,125,246,0.05), transparent 60%),
    #fff;}
/* semis de points or, concentré derrière la carte */
.zi-hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(200,146,42,0.4) 1.2px, transparent 1.3px);
  background-size:23px 23px;
  -webkit-mask-image:radial-gradient(620px 480px at 79% 50%, #000, transparent 68%); mask-image:radial-gradient(620px 480px at 79% 50%, #000, transparent 68%);}
.zi-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr); gap:clamp(2.4rem,4.5vw,4rem); align-items:center; width:100%;}
.zi-copy .eyebrow{margin-bottom:1.2rem;}
.zi-copy h1{font-size:clamp(2.2rem,4vw,3.2rem); max-width:18ch;}
.zi-copy .subhero-lede{font-size:1.12rem; margin-bottom:0; max-width:50ch;}
.zi-copy .subhero-cta{margin-top:2rem;}
.zi-copy .zones{margin-top:1.7rem;}
/* arrivée du texte, en escalier */
.zi-copy > *{animation:zi-rise .8s cubic-bezier(.19,1,.22,1) both;}
.zi-copy > .eyebrow{animation-delay:.05s;}
.zi-copy > h1{animation-delay:.13s;}
.zi-copy > .subhero-lede{animation-delay:.21s;}
.zi-copy > .subhero-cta{animation-delay:.3s;}
.zi-copy > .zones{animation-delay:.38s;}
@keyframes zi-rise{from{opacity:0; transform:translateY(26px);}}

/* eyebrow local avec mini-drapeau */
.local-eyebrow{display:inline-flex; align-items:center; gap:0.6rem;}
.local-eyebrow .flagchip{width:26px; height:18px; border-radius:3px;}
.local-eyebrow .flagchip.ch::before{width:10px; height:3px;} .local-eyebrow .flagchip.ch::after{width:3px; height:10px;}

/* chips de quartiers / communes */
.zones{display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.6rem;}
.zones span{font-size:0.85rem; color:#39435a; background:#fff; border:1px solid var(--line); border-radius:30px; padding:0.45rem 1rem;}

/* liens villes voisines (pastilles) */
.nearby{display:flex; flex-wrap:wrap; gap:0.8rem; justify-content:center; margin-top:0.4rem;}
.nearby a{display:inline-flex; align-items:center; gap:0.5rem; font-family:'Space Grotesk'; font-weight:600; font-size:0.95rem; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:30px; padding:0.6rem 1.2rem; transition:border-color .2s, transform .18s, box-shadow .2s;}
.nearby a:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:0 12px 26px -16px rgba(14,23,38,0.4);}
.nearby a svg{width:15px; height:15px; color:var(--gold);}

/* carte Leaflet */
.leaflet-container{font-family:'Inter',sans-serif; background:#eef1f6;}

/* ---------- la carte dessinée ---------- */
.zi-side{position:relative; display:flex; justify-content:center;}
.zi-map{position:relative; width:min(430px, 100%);
  background:
    linear-gradient(rgba(14,23,38,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,23,38,0.028) 1px, transparent 1px),
    linear-gradient(180deg,#fffdf8,#fff 55%);
  background-size:28px 28px, 28px 28px, 100% 100%;
  border:1px solid var(--line); border-radius:20px; padding:1rem 1rem 0.7rem;
  box-shadow:0 40px 80px -34px rgba(14,23,38,0.45);
  animation:zi-rise .8s cubic-bezier(.19,1,.22,1) .35s both, zi-float 7s ease-in-out 1.2s infinite;}
@keyframes zi-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.zi-map-badge{position:absolute; z-index:6; top:-0.85rem; left:1.1rem; display:inline-flex; align-items:center; gap:0.5rem;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.78rem; color:var(--ink);
  background:#fff; border:1px solid var(--goldb); border-radius:30px; padding:0.42rem 0.9rem;
  box-shadow:0 12px 26px -12px rgba(14,23,38,0.4); white-space:nowrap;}
.zi-map-badge svg{width:14px; height:14px; color:var(--gold); flex:0 0 auto;}
.zi-scene{position:relative;}
.zi-scene svg.zi-fond{display:block; width:100%; height:auto;}

/* fond : lac, frontière, anneaux, reliefs, routes */
.zi-lake{fill:url(#lacg); stroke:#b9d4ec; stroke-width:1;}
.zi-lakelab{font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:11.5px; fill:#5d7ba1; opacity:0.75; letter-spacing:0.06em;}
.zi-border{fill:none; stroke:#a94a42; stroke-width:1.4; stroke-dasharray:5 5; opacity:0.5;}
.zi-ring{fill:none; stroke:var(--ink); opacity:0.06;}
.zi-ring.gold{stroke:var(--gold); opacity:0.22; stroke-dasharray:3 7; stroke-linecap:round;}
.zi-mont{fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:0.16;}
.zi-pays{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:11px; fill:var(--ink2); opacity:0.65; letter-spacing:0.04em;}
.zi-route{fill:none; stroke:var(--gold); stroke-width:1.3; opacity:0.22; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:zi-draw 1s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes zi-draw{to{stroke-dashoffset:0;}}
.zi-route:nth-child(1){animation-delay:1.0s;} .zi-route:nth-child(2){animation-delay:1.1s;}
.zi-route:nth-child(3){animation-delay:1.2s;} .zi-route:nth-child(4){animation-delay:1.3s;}
.zi-route:nth-child(5){animation-delay:1.4s;} .zi-route:nth-child(6){animation-delay:1.5s;}
.zi-route:nth-child(7){animation-delay:1.6s;} .zi-route:nth-child(8){animation-delay:1.7s;}
/* la route vers la ville de la page */
.zi-route.on{opacity:0.75; stroke-width:2.1;}

/* villes : dots + étiquettes cliquables par-dessus le SVG */
.zi-spot{position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); z-index:3;
  display:block; width:14px; height:14px;
  animation:zi-pop .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay:var(--d, 1.6s);}
@keyframes zi-pop{from{opacity:0; transform:translate(-50%,-50%) scale(0.3);}}
.zi-dot{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%;
  background:var(--goldb); border:2px solid #fff; box-shadow:0 0 0 3px rgba(236,184,69,0.28), 0 2px 6px rgba(14,23,38,0.35);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.zi-spot:hover .zi-dot{transform:translate(-50%,-50%) scale(1.3);}
.zi-pill{position:absolute; left:calc(100% + 5px); top:50%; transform:translateY(-50%); white-space:nowrap;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.63rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:0.16rem 0.5rem;
  box-shadow:0 4px 12px -4px rgba(14,23,38,0.25);
  transition:border-color .25s, color .25s, transform .25s;}
.zi-spot:hover .zi-pill{border-color:var(--goldb); color:var(--gold); transform:translateY(calc(-50% - 2px));}
.zi-spot.p-l .zi-pill{left:auto; right:calc(100% + 5px);}
.zi-spot.p-b .zi-pill{left:50%; top:calc(100% + 4px); transform:translate(-50%,0);}
.zi-spot.p-b:hover .zi-pill{transform:translate(-50%,-2px);}
/* la ville de la page, en évidence */
.zi-spot.on{z-index:5;}
.zi-spot.on .zi-dot{width:15px; height:15px; background:var(--gold);
  box-shadow:0 0 0 4px rgba(236,184,69,0.35), 0 3px 8px rgba(14,23,38,0.4);}
.zi-spot.on .zi-dot::after{content:""; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid rgba(236,184,69,0.55); animation:zi-pulse 2.4s ease-out infinite;}
.zi-spot.on .zi-pill{background:var(--goldb); border-color:var(--goldb); color:var(--navy); font-weight:700; font-size:0.68rem;}
.zi-spot.on:hover .zi-pill{color:var(--navy);}
/* Annemasse : la base */
.zi-spot.home{z-index:4;}
.zi-spot.home .zi-dot{width:14px; height:14px; background:var(--navy); border-color:var(--goldb);}
.zi-spot.home .zi-dot::after{content:""; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid rgba(236,184,69,0.55); animation:zi-pulse 2.4s ease-out infinite;}
@keyframes zi-pulse{0%{transform:scale(0.7); opacity:1;} 70%,100%{transform:scale(1.9); opacity:0;}}
.zi-spot.home .zi-pill{border-color:var(--goldb); display:inline-flex; align-items:center; gap:0.3rem;}
.zi-spot.home .zi-pill svg{width:10px; height:10px; color:var(--gold); flex:0 0 auto;}

/* légende sous la carte */
.zi-leg{display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem 1.1rem; padding:0.7rem 0.3rem 0.3rem;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.7rem; color:var(--ink2);}
.zi-leg span{display:inline-flex; align-items:center; gap:0.45rem;}
.zi-leg i{width:9px; height:9px; border-radius:50%; background:var(--goldb); box-shadow:0 0 0 2.5px rgba(236,184,69,0.25); flex:0 0 auto;}
.zi-leg i.base{background:var(--navy); box-shadow:0 0 0 2px var(--goldb);}
.zi-leg svg{width:13px; height:13px; color:var(--gold); flex:0 0 auto;}

/* ================= BANDE CTA — carte sombre détachée ================= */
.cta-band{background:#fff; overflow:visible; padding:0.4rem 1.5rem 4.6rem;}
.cta-band::after{display:none;}
.cta-band .wrap{max-width:980px; margin:0 auto; padding:3.4rem 2rem; border-radius:26px; overflow:hidden;
  background:linear-gradient(152deg,#14223a 0%,#0b1320 64%); box-shadow:0 42px 84px -38px rgba(14,23,38,0.65);}
.cta-band .wrap::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(620px 360px at 100% -10%, rgba(236,184,69,0.20), transparent 60%), radial-gradient(520px 420px at -6% 120%, rgba(47,125,246,0.14), transparent 60%);}
.cta-band .wrap > *{position:relative; z-index:1;}
.zi-pin{display:inline-flex; align-items:center; gap:0.55rem;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.85rem; color:#cdd5e1;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:30px; padding:0.5rem 1rem;}
.zi-pin svg{width:15px; height:15px; color:var(--goldb); flex:0 0 auto;}

/* ================= Mouvement réduit ================= */
@media (prefers-reduced-motion: reduce){
  .zi-copy > *,.zi-map,.zi-spot{animation:none !important;}
  .zi-route{animation:none !important; stroke-dashoffset:0;}
  .zi-spot.home .zi-dot::after,.zi-spot.on .zi-dot::after{animation:none !important; opacity:0;}
  .zi-dot,.zi-pill{transition:none;}
}

/* ================= Responsive ================= */
@media (max-width:900px){
  .zi-hero{min-height:0;}
  .zi-grid{grid-template-columns:minmax(0,1fr); gap:2.8rem; text-align:center;}
  .zi-copy h1,.zi-copy .subhero-lede{margin-left:auto; margin-right:auto;}
  .zi-copy .subhero-cta,.zi-copy .zones{justify-content:center;}
  .zi-side{max-width:400px; margin:0 auto; width:100%;}
  .zi-hero::before{-webkit-mask-image:radial-gradient(76% 40% at 50% 80%, #000, transparent 70%); mask-image:radial-gradient(76% 40% at 50% 80%, #000, transparent 70%);}
}
@media (max-width:560px){
  .zi-pill{font-size:0.58rem; padding:0.13rem 0.42rem;}
  .zi-spot.on .zi-pill{font-size:0.62rem;}
  .zi-leg{gap:0.35rem 0.8rem; font-size:0.65rem;}
  .zi-map{padding:0.75rem 0.75rem 0.5rem;}
}