/* ══ Carte interactive du Var — comportement dans /assets/js/carte-var.js ══ */
.cv{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:0; max-width:1100px; margin:0 auto;
  border-radius:20px; overflow:hidden; background:#0C1B2E; box-shadow:0 24px 60px rgba(12,27,46,.22); }

/* Carte */
.cv-map{ position:relative; min-width:0; padding:1.4rem 1.2rem 1rem;
  background:radial-gradient(120% 90% at 40% 85%, #12324a 0%, #0C1B2E 60%, #081320 100%); }
.cv-stage{ aspect-ratio:1020/917; display:grid; place-items:center; }
.cv-stage .cv-load{ color:rgba(237,234,224,.55); font-size:.85rem; }
.cv-svg{ width:100%; height:100%; display:block; overflow:hidden; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.cv.is-zoomed .cv-svg{ touch-action:none; cursor:grab; }
.cv.is-zoomed .cv-svg:active{ cursor:grabbing; }
.cv-c{ stroke:rgba(237,234,224,.22); stroke-width:.8; cursor:pointer; transition:fill .2s, stroke .2s; vector-effect:non-scaling-stroke; }
.cv-c.z1{ fill:#3f9a8a; }  .cv-c.z2{ fill:#2c7a6f; }  .cv-c.z3{ fill:#215f58; }  .cv-c.z4{ fill:#194a46; }
.cv-c:hover{ fill:#5bb5a3; stroke:#EDEAE0; stroke-width:1.2; }
.cv-c.is-sel{ fill:#C9A84C; stroke:#fff; stroke-width:2; }
.cv-contour{ fill:none; stroke:#EDEAE0; stroke-width:2.2; stroke-linejoin:round; pointer-events:none; vector-effect:non-scaling-stroke; }
.cv-rings circle{ fill:none; stroke:rgba(201,168,76,.45); stroke-width:1.2; stroke-dasharray:5 6; vector-effect:non-scaling-stroke; }
.cv-rings text{ fill:rgba(201,168,76,.85); font-family:var(--font-body, Inter, sans-serif); font-weight:700; font-size:calc(11px * var(--u, 1.6)); letter-spacing:.04em; }
.cv-labels, .cv-rings{ pointer-events:none; }
.cv-labels text{ fill:#EDEAE0; font-family:var(--font-body, Inter, sans-serif); font-weight:600; font-size:calc(12.5px * var(--u, 1.6)); paint-order:stroke; stroke:rgba(8,19,32,.75); stroke-width:calc(3.5px * var(--u, 1.6)); }
.cv-labels .cv-zoomonly{ display:none; }
.cv.is-deep .cv-labels .cv-zoomonly{ display:inline; }
.cv-dot{ fill:#EDEAE0; }
.cv-labels .cv-sel-lab{ fill:#C9A84C; font-family:var(--font-head, Manrope, sans-serif); font-weight:800; font-size:calc(15px * var(--u, 1.6)); text-anchor:middle; paint-order:stroke; stroke:rgba(8,19,32,.85); stroke-width:calc(4px * var(--u, 1.6)); }
.cv-pin{ cursor:pointer; }
.cv-pin-bg{ fill:#C9A84C; stroke:#0C1B2E; stroke-width:2.5; }
.cv-pin-ok{ fill:none; stroke:#0C1B2E; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.cv-pin:hover .cv-pin-bg, .cv-pin:focus .cv-pin-bg{ fill:#fff; }
.cv-pin:focus, .cv-base:focus{ outline:none; }
.cv-pin:focus-visible .cv-pin-bg, .cv-base:focus-visible .cv-base-dot{ stroke:#fff; stroke-width:4; }
.cv-base{ cursor:pointer; }
.cv-base-halo{ fill:rgba(201,168,76,.45); }
.cv-base-pulse{ fill:none; stroke:#C9A84C; stroke-width:2.5; transform-origin:0 0; animation:cvPulse 2.4s ease-out infinite; }
.cv-base-dot{ fill:#C9A84C; stroke:#0C1B2E; stroke-width:3; }
.cv-base-t{ fill:#C9A84C; font:800 18px/1 var(--font-head, Manrope, sans-serif); text-anchor:middle; paint-order:stroke; stroke:rgba(8,19,32,.85); stroke-width:5px; }
@keyframes cvPulse{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(2.6); opacity:0; } }

.cv-tip{ position:absolute; z-index:3; transform:translate(-50%, calc(-100% - 12px)); pointer-events:none; white-space:nowrap;
  background:#EDEAE0; color:#0C1B2E; font-size:.8rem; font-weight:700; padding:.35rem .65rem; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.3); }

.cv-legend{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:.6rem 0 0; padding:0; list-style:none; }
.cv-legend li{ display:flex; align-items:center; gap:.4rem; font-size:.74rem; color:rgba(237,234,224,.7); }
.cv-sw{ display:inline-block; width:14px; height:14px; border-radius:4px; flex:none; }
.cv-sw.z1{ background:#3f9a8a; } .cv-sw.z2{ background:#2c7a6f; } .cv-sw.z3{ background:#215f58; } .cv-sw.z4{ background:#194a46; }
.cv-sw.pin{ background:#C9A84C; border-radius:50%; }

/* Contrôles de zoom */
.cv-ctrl{ position:absolute; top:.9rem; right:.9rem; z-index:3; display:flex; gap:.35rem; flex-wrap:wrap; justify-content:flex-end; }
.cv-ctrl button{ font:inherit; font-size:.76rem; font-weight:700; min-width:36px; height:36px; padding:0 .7rem; border-radius:10px; cursor:pointer;
  color:#EDEAE0; background:rgba(12,27,46,.7); border:1px solid rgba(237,234,224,.22); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.cv-ctrl button:hover{ border-color:#C9A84C; color:#fff; }
.cv-ctrl button:focus-visible{ outline:2px solid #C9A84C; outline-offset:2px; }
.cv-ctrl .cv-z-pm{ font-size:1.1rem; padding:0; }
.cv-hint{ position:absolute; right:.9rem; top:3.5rem; z-index:3; pointer-events:none; white-space:nowrap;
  font-size:.72rem; color:rgba(237,234,224,.75); background:rgba(12,27,46,.6); padding:.3rem .65rem; border-radius:999px; opacity:0; transition:opacity .3s; }
.cv.is-zoomed .cv-hint{ opacity:1; }

/* Panneau */
.cv-side{ min-width:0; padding:1.8rem 1.6rem; background:#0F2238; border-left:1px solid rgba(237,234,224,.08); display:flex; flex-direction:column; gap:1.1rem; }
.cv-search label{ display:block; color:#EDEAE0; font-weight:700; font-size:.95rem; margin-bottom:.5rem; }
.cv-search .cv-row{ display:flex; gap:.5rem; }
.cv-search input{ flex:1; min-width:0; font:inherit; font-size:1rem; padding:.75rem .9rem; border-radius:12px;
  border:1.5px solid rgba(237,234,224,.18); background:rgba(255,255,255,.06); color:#EDEAE0; }
.cv-search input::placeholder{ color:rgba(237,234,224,.45); }
.cv-search input:focus{ outline:none; border-color:#C9A84C; background:rgba(255,255,255,.1); }
.cv-search button{ flex:none; border:0; border-radius:12px; padding:0 1rem; font:inherit; font-weight:700; cursor:pointer; background:#C9A84C; color:#0C1B2E; }
.cv-search button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.cv .cv-msg{ min-height:1em; margin:.45rem 0 0; font-size:.8rem !important; color:#f0c674; }

.cv-card{ border-radius:16px; padding:1.2rem 1.2rem 1.25rem; background:rgba(255,255,255,.05); border:1px solid rgba(237,234,224,.1); color:#EDEAE0; }
.cv-card.is-on{ animation:cvIn .35s ease; }
@keyframes cvIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.cv .cv-k{ margin:0 0 .2rem; font-size:.7rem !important; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#C9A84C; }
.cv-n{ margin:0 0 .5rem; font-family:var(--font-head); font-size:1.45rem; line-height:1.15; color:#fff; }
.cv-n span{ font-size:.85rem; font-weight:600; color:rgba(237,234,224,.55); }
.cv .cv-d{ margin:0 0 .7rem; font-size:.9rem !important; line-height:1.55; color:rgba(237,234,224,.82); }
.cv-d strong{ color:#fff; }
.cv .cv-z{ display:flex; align-items:center; gap:.45rem; margin:0; font-size:.8rem !important; color:rgba(237,234,224,.7); }
.cv-ch{ margin-top:1rem; display:grid; gap:.5rem; }
.cv .cv-ch-t{ margin:0; font-size:.72rem !important; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(237,234,224,.6); }
.cv-ch-a{ display:flex; align-items:center; gap:.7rem; padding:.45rem; border-radius:12px; text-decoration:none; background:rgba(255,255,255,.04); transition:background .2s; }
.cv-ch-a:hover{ background:rgba(201,168,76,.15); }
.cv-ch-a img{ width:52px; height:52px; border-radius:9px; object-fit:cover; flex:none; }
.cv-ch-a strong{ display:block; font-size:.84rem; color:#fff; line-height:1.3; }
.cv-ch-a small{ font-size:.74rem; color:rgba(237,234,224,.6); }
.cv-cta{ margin-top:1.1rem; display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; }
.cv-cta .btn{ white-space:normal; text-align:left; }
.cv-tel{ font-size:.84rem; color:rgba(237,234,224,.75); text-underline-offset:3px; }
.cv-card--intro .cv-d{ margin-bottom:0; }
.cv-steps{ list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.45rem; }
.cv-steps li{ font-size:.85rem; color:rgba(237,234,224,.78); display:flex; gap:.5rem; }
.cv-steps b{ color:#C9A84C; }

.cv.is-error .cv-stage{ display:none; }

@media (max-width:860px){
  .cv{ grid-template-columns:1fr; border-radius:16px; }
  .cv-side{ border-left:0; border-top:1px solid rgba(237,234,224,.08); padding:1.3rem 1.1rem 1.4rem; }
  .cv-map{ padding:0 0 .8rem; }
  .cv-stage{ aspect-ratio:7/8; }
  .cv-legend{ padding:0 .9rem; }
  .cv-labels .cv-minor{ display:none; }
  .cv.is-zoomed .cv-labels .cv-minor{ display:inline; }
  .cv-ctrl{ top:.6rem; right:.6rem; }
  /* UX mobile 08/10 : moins de boutons, moins de texte */
  .cv-ctrl [data-z="littoral"], .cv-ctrl [data-z="all"]{ display:none; }
  .cv-ctrl{ flex-direction:column; }
  .cv-ctrl .cv-z-pm{ width:40px; height:40px; border-radius:12px; }
  .cv-hint{ top:auto; bottom:4.2rem; right:auto; left:.9rem; }
  .cv-legend{ gap:.3rem .75rem; }
  .cv-legend li{ font-size:.7rem; }
  .cv-card--intro .cv-d, .cv-card--intro .cv-steps{ display:none; }
  .cv-card--intro{ padding:.9rem 1rem; }
  .cv-card--intro .cv-n{ font-size:1.15rem; margin:0; }
  .cv-side{ gap:.8rem; }
}
@media (prefers-reduced-motion: reduce){
  .cv-base-pulse{ animation:none; opacity:.6; }
  .cv-c, .cv-card.is-on{ transition:none; animation:none; }
}