/* ─────────────────────────────────────────────────────────────────────────
   CARTE — scroll-zoom map of Île de Ré → Saint-Martin-de-Ré
   Ported from "Section Carte 37 Cours Pasteur" (dc-runtime) to vanilla CSS.
   Everything is scoped under .carte so it never affects the rest of the site.
   ───────────────────────────────────────────────────────────────────────── */
.carte{
  /* watercolour palette, scoped to .carte so it only overrides the site's
     --ink/--paper/--accent INSIDE this section — the SVG inline styles use these names */
  --paper:#FCF9F3; --land:#FFFDF8; --ink:#2A3F42; --ink-soft:#7C9094;
  --ocean:#D7EBE6; --wash1:#EDF6F3; --wash2:#E3F1ED; --waves:#9FCEC6; --accent:#D96E49;
  height:340vh; position:relative;
  background:var(--paper); color:var(--ink);
  font-family:'Instrument Sans',system-ui,sans-serif;
}
.carte-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ocean)}
.carte-map{position:absolute;inset:0;width:100%;height:100%;display:block}

/* left fade so the copy stays legible over the map */
.carte-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--paper) 96%,transparent) 0%,
    color-mix(in srgb,var(--paper) 86%,transparent) 28%,
    color-mix(in srgb,var(--paper) 40%,transparent) 46%,
    transparent 62%)}

.carte-copy{position:absolute;left:clamp(32px,7vw,120px);top:50%;transform:translateY(-50%);
  width:min(420px,78vw);display:flex;flex-direction:column;align-items:flex-start;z-index:2}
.carte-eyebrow{font-size:12.5px;letter-spacing:2.8px;text-transform:uppercase;font-weight:600;color:var(--accent)}
.carte-title{margin:16px 0 0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(34px,4.6vw,58px);line-height:1.08;text-wrap:pretty;color:var(--ink);text-transform:uppercase}
.carte-title .red{color:var(--accent)}
.carte-body{margin:20px 0 0;font-size:16px;line-height:1.75;max-width:360px;text-wrap:pretty;
  color:color-mix(in srgb,var(--ink) 78%,transparent)}
.carte-cta{margin-top:30px;display:inline-flex;align-items:center;gap:10px;padding:13px 27px;
  border:1.5px solid var(--ink);border-radius:999px;font-size:13px;letter-spacing:1.6px;
  text-transform:uppercase;font-weight:600;color:var(--ink);text-decoration:none;
  transition:background .25s,color .25s}
.carte-cta:hover{background:var(--ink);color:var(--paper)}
.carte-addr{margin-top:34px;display:flex;align-items:center;gap:12px;opacity:0}
.carte-addr .bar{width:26px;height:1.5px;background:var(--accent)}
.carte-addr .txt{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:var(--accent)}

.carte-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;opacity:1;pointer-events:none;z-index:2}
.carte-hint .lbl{font-size:10.5px;letter-spacing:3.2px;text-transform:uppercase;font-weight:500;color:var(--ink-soft)}
.carte-hint .line{width:1px;height:26px;background:var(--ink-soft)}

/* animated location marker */
@keyframes cp-halo{0%{transform:scale(1);opacity:.4}70%{transform:scale(3.4);opacity:0}100%{opacity:0}}
@keyframes cp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4px)}}
.carte .cp-halo{transform-box:fill-box;transform-origin:center;animation:cp-halo 2.4s cubic-bezier(.2,.6,.4,1) infinite}
.carte .cp-bob{transform-box:fill-box;transform-origin:center;animation:cp-bob 3s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .carte .cp-halo,.carte .cp-bob{animation:none}
}
@media(max-width:880px){
  /* mobile: no scroll-zoom — the section collapses to a plain static block
     (carte.js also bails out at this breakpoint). Map, veil and scroll hint
     are dropped; the copy sits on the plain paper background. */
  .carte{height:auto}
  .carte-stage{position:relative;height:auto;overflow:visible;background:var(--paper)}
  /* !important — the SVG carries an inline display:block */
  .carte-map,.carte-veil,.carte-hint{display:none!important}
  .carte-copy{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:560px;
    padding:clamp(54px,12vw,80px) 18px}
  .carte-addr{opacity:1}
}