/* =========================================================================
   Vap Concept — Système de pages boutiques (SEO local)
   Identité : OR (#B8975E) sur NOIR, fonds crème pour le contenu.
   HTML/CSS/JS pur, aucune dépendance, aucun build.
   ========================================================================= */

/* ---- Jetons de design ---------------------------------------------------- */
:root {
  --noir:      #000000;
  --noir-2:    #0D0D0D;
  --noir-3:    #171614;
  --or:        #B8975E;
  --or-clair:  #D4B87A;
  --or-fonce:  #96784A;
  --creme:     #F5F0E6;
  --creme-2:   #FBF8F2;
  --blanc:     #FFFFFF;
  --encre:     #1A1714;
  --ardoise:   #6B6258;
  --vert:      #3E8E5A;
  --rouge:     #C0503E;
  --ligne:      rgba(26, 23, 20, .12);
  --ligne-or:   rgba(184, 151, 94, .35);
  --ligne-claire: rgba(255, 255, 255, .12);

  --r-s: 8px; --r-m: 14px; --r-l: 22px;
  --ombre: 0 1px 2px rgba(26,23,20,.06), 0 10px 26px rgba(26,23,20,.07);
  --ombre-or: 0 12px 34px rgba(150,120,74,.28);
  --ombre-hero: 0 24px 60px rgba(0,0,0,.45);

  --max: 1120px; --gout: 24px;
  --nav-h: 84px;

  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-corps:   "Inter", system-ui, -apple-system, sans-serif;
  --f-data:    "Space Mono", ui-monospace, monospace;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: .5s;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--f-corps); color: var(--encre);
  background: var(--creme); line-height: 1.6; font-size: 17px;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
img { max-width: 100%; display: block; }
a { color: var(--or-fonce); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gout); }
.eyebrow { font-family: var(--f-data); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--or-clair); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; border-radius: 4px; }

/* ---- Animations d'entrée ------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.bcard.reveal { transform: translateY(16px); }
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: .08s; }
.reveal--delay-2 { transition-delay: .16s; }
.reveal--delay-3 { transition-delay: .24s; }

/* ---- Canvas particules (fond animé global) -------------------------------- */
.particles-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .25;
}

/* ---- Canvas particules hero (par section) --------------------------------- */
.hero-pts {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: .75;
}
.hero-pts--hub { opacity: .9; }
.nav, .hub-hero, .hero, .section, .hub-intro, .hub-seo, .foot, .fil {
  position: relative;
  z-index: 1;
}

/* ---- Logo ---------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo:hover { text-decoration: none; opacity: .92; }
.logo--full img {
  height: 58px;
  width: auto;
  max-width: min(340px, 58vw);
}
.foot .logo--full img { height: 46px; max-width: 280px; }

/* logo-vap-concept-blanc.png est un PNG RGBA transparent (fond alpha=0) */
.hub-hero__logo {
  display: block;
}

/* Ancien format emblème + texte (fallback) */
.logo img { height: 38px; width: auto; }
.logo__wm { display: flex; flex-direction: column; line-height: 1; }
.logo__wm b { font-family: var(--f-display); font-weight: 800; font-size: 1.18rem; letter-spacing: .02em; color: var(--or); }
.logo__wm span { font-family: var(--f-data); font-size: .54rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 3px; }

/* ---- Barre de navigation ------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,.88);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--ligne-or);
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.is-scrolled {
  background: rgba(0,0,0,.96);
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.nav__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: var(--nav-h);
  transition: height .3s ease;
}
.nav.is-scrolled .nav__in { height: 68px; }
.nav.is-scrolled .logo--full img { height: 46px; }
.nav__links { display: flex; align-items: center; gap: 8px; }
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-s);
  cursor: pointer;
  flex-shrink: 0;
}
.nav__toggle span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Boutons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .95rem; font-family: var(--f-corps);
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .15s var(--ease-out), box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--or); color: #1a1714; box-shadow: var(--ombre-or); }
.btn--primary:hover { background: var(--or-clair); color: #1a1714; }
.btn--ghost { background: transparent; color: var(--encre); border-color: var(--ligne); }
.btn--ghost:hover { border-color: var(--or-fonce); color: var(--or-fonce); }
.btn--sm { padding: 8px 14px; font-size: .85rem; }
.nav .btn--ghost { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.22); }
.nav .btn--ghost:hover { color: var(--or); border-color: var(--or); }
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.hero .btn--ghost:hover { border-color: var(--or); color: var(--or-clair); background: rgba(255,255,255,.06); }

/* ---- Badge ouvert / fermé ------------------------------------------------ */
.statut {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-data); font-size: .8rem; font-weight: 700;
  padding: 6px 13px; border-radius: 999px; letter-spacing: .02em;
}
.statut::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.statut--ouvert { color: #7BD89B; background: rgba(62,142,90,.22); }
.statut--ouvert::before { animation: pulse 2.4s ease-out infinite; }
.statut--ferme  { color: #E89A8C; background: rgba(192,80,62,.22); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(123,216,155,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(123,216,155,0); }
  100% { box-shadow: 0 0 0 0 rgba(123,216,155,0); }
}

/* ---- Hero boutique (photo en fond) --------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 72vh, 640px);
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.05);
  transition: transform 8s var(--ease-out);
}
.hero.is-loaded .hero__bg img { transform: scale(1); }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(105deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.35) 100%),
    linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 50%);
}
.hero__overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 85% 15%, rgba(184,151,94,.18), transparent 60%);
  pointer-events: none;
}
.hero__vapor {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none; overflow: hidden;
}
.hero__vapor span {
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  animation: vapor-drift 12s ease-in-out infinite;
}
.hero__vapor span:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.hero__vapor span:nth-child(2) { left: 70%; top: 40%; animation-delay: -4s; width: 80px; height: 80px; }
.hero__vapor span:nth-child(3) { left: 45%; top: 10%; animation-delay: -8s; width: 60px; height: 60px; }
@keyframes vapor-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .4; }
  50%      { transform: translate(20px, -30px) scale(1.2); opacity: .7; }
}
.hero__content {
  position: relative; z-index: 4;
  width: 100%;
  padding-block: 48px 56px;
}
.hero__content .wrap { max-width: 720px; }
.hero h1 { color: #fff; margin: 12px 0 16px; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.hero h1 b { color: var(--or-clair); font-weight: 700; }
.hero__sub { color: rgba(255,255,255,.85); max-width: 52ch; font-size: 1.05rem; line-height: 1.65; }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 26px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.note-google { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; color: rgba(255,255,255,.92); }
.note-google .stars { color: var(--or-clair); letter-spacing: 1px; }

/* ---- Sections ------------------------------------------------------------ */
.section { padding-block: 56px; }
.section--brume { background: var(--creme); }
.section--blanc { background: var(--creme-2); }
.section__head { max-width: 62ch; margin-bottom: 28px; }
.section__head p { color: var(--ardoise); margin-top: 8px; }

/* ---- Infos pratiques ----------------------------------------------------- */
.pratique { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.carte-info {
  background: #fff; border: 1px solid var(--ligne);
  border-radius: var(--r-m); box-shadow: var(--ombre); overflow: hidden;
  transition: box-shadow .25s ease, transform .25s var(--ease-out);
}
.carte-info:hover { box-shadow: var(--ombre-or); }
.carte-info__body { padding: 24px; }
.dl { margin: 0; }
.dl div { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--ligne); }
.dl div:last-child { border-bottom: 0; }
.dl dt { flex: 0 0 116px; color: var(--ardoise); font-size: .9rem; }
.dl dd { margin: 0; font-weight: 600; }
.dl .mono { font-family: var(--f-data); font-size: .92rem; }
.map-frame { border: 0; width: 100%; height: 100%; min-height: 320px; display: block; background: #e7e2d6; }
.carte-info--map { display: flex; }

.horaires { width: 100%; border-collapse: collapse; font-size: .95rem; }
.horaires th, .horaires td { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--ligne); }
.horaires th { color: var(--ardoise); font-weight: 600; width: 42%; }
.horaires td { font-family: var(--f-data); font-size: .88rem; }
.horaires tr[data-today] { background: rgba(184,151,94,.14); }
.horaires tr[data-today] th { color: var(--or-fonce); }
.horaires .ferme { color: var(--rouge); }

/* ---- Rayons -------------------------------------------------------------- */
.rayons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rayon {
  display: block; padding: 22px; border-radius: var(--r-m);
  background: #fff; border: 1px solid var(--ligne); box-shadow: var(--ombre);
  transition: transform .2s var(--ease-out), border-color .2s ease, box-shadow .2s ease;
  color: var(--encre);
}
.rayon:hover { transform: translateY(-4px); border-color: var(--or); text-decoration: none; box-shadow: var(--ombre-or); }
.rayon h3 { margin-bottom: 6px; }
.rayon p { margin: 0; color: var(--ardoise); font-size: .92rem; }
.rayon__go { display: inline-block; margin-top: 12px; font-weight: 700; font-size: .85rem; color: var(--or-fonce); }

/* ---- Galerie ------------------------------------------------------------- */
.galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.galerie figure {
  margin: 0; border-radius: var(--r-m); overflow: hidden;
  border: 1px solid var(--ligne); aspect-ratio: 3/2;
  position: relative;
}
.galerie img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.galerie figure:hover img { transform: scale(1.06); }
.galerie figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.25), transparent 40%);
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.galerie figure:hover::after { opacity: 1; }

/* ---- Atouts -------------------------------------------------------------- */
.atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.atout {
  padding: 22px; background: #fff; border: 1px solid var(--ligne);
  border-radius: var(--r-m);
  transition: transform .2s var(--ease-out), border-color .2s ease, box-shadow .2s ease;
}
.atout:hover { transform: translateY(-3px); border-color: var(--ligne-or); box-shadow: var(--ombre); }
.atout h3 { font-size: 1rem; margin-bottom: 6px; }
.atout p { margin: 0; color: var(--ardoise); font-size: .92rem; }
.atout .pic { font-family: var(--f-data); color: var(--or-fonce); font-weight: 700; font-size: .8rem; letter-spacing: .08em; margin-bottom: 8px; }

/* ---- Avis ---------------------------------------------------------------- */
.avis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 28px;
  background: var(--noir-2); color: #fff;
  border-radius: var(--r-l); padding: 32px;
  border: 1px solid var(--ligne-or);
  position: relative; overflow: hidden;
}
.avis::before {
  content: "";
  position: absolute; top: -40%; right: -10%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(184,151,94,.15), transparent 70%);
  pointer-events: none;
}
.avis__note { font-family: var(--f-display); font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--or-clair); }
.avis__stars { color: var(--or-clair); font-size: 1.2rem; letter-spacing: 2px; }
.avis__txt { color: rgba(255,255,255,.82); font-size: .95rem; }
.avis__txt a { color: var(--or-clair); }

/* ---- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: 12px; }
.faq details {
  background: #fff; border: 1px solid var(--ligne);
  border-radius: var(--r-m); padding: 4px 20px; box-shadow: var(--ombre);
  transition: border-color .2s ease;
}
.faq details[open] { border-color: var(--ligne-or); }
.faq summary {
  cursor: pointer; font-family: var(--f-display); font-weight: 700;
  font-size: 1.04rem; padding: 14px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--or-fonce); font-size: 1.4rem; font-family: var(--f-corps); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--ardoise); margin: 0 0 14px; font-size: .96rem; }

/* ---- Boutiques proches --------------------------------------------------- */
.proches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.proche {
  display: block; padding: 18px 20px; background: #fff;
  border: 1px solid var(--ligne); border-radius: var(--r-m);
  color: var(--encre); box-shadow: var(--ombre);
  transition: border-color .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.proche:hover { border-color: var(--or); transform: translateY(-3px); text-decoration: none; box-shadow: var(--ombre-or); }
.proche b { display: block; font-family: var(--f-display); font-size: 1.05rem; }
.proche span { color: var(--ardoise); font-size: .88rem; }
.proche .km { font-family: var(--f-data); font-size: .78rem; color: var(--or-fonce); margin-top: 4px; }

/* ---- Hub ----------------------------------------------------------------- */
.hub-hero {
  background: var(--noir); color: #fff;
  position: relative; overflow: hidden;
  min-height: clamp(480px, 72vh, 680px);
  display: flex; align-items: center;
}
.hub-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 75% 10%, rgba(184,151,94,.22), transparent 55%),
    radial-gradient(ellipse 50% 50% at 15% 90%, rgba(150,120,74,.15), transparent 50%),
    linear-gradient(160deg, #000 0%, #0d0b08 100%);
}
.hub-hero__diamond {
  position: absolute; right: 8%; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: clamp(80px, 12vw, 140px); height: clamp(80px, 12vw, 140px);
  border: 2px solid rgba(184,151,94,.25);
  animation: diamond-pulse 6s ease-in-out infinite;
}
@keyframes diamond-pulse {
  0%, 100% { opacity: .3; transform: translateY(-50%) rotate(45deg) scale(1); }
  50%      { opacity: .6; transform: translateY(-50%) rotate(45deg) scale(1.05); }
}
.hub-hero__layout {
  position: relative;
  z-index: 3;
  padding-block: 48px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}
.hub-hero__brand { width: 100%; }
.hub-hero__logo {
  width: min(560px, 92vw);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.4));
  animation: logo-glow 5s ease-in-out infinite;
}
@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 8px 32px rgba(0,0,0,.4)); }
  50%      { filter: drop-shadow(0 8px 40px rgba(184,151,94,.25)); }
}
.hub-hero__txt { max-width: 680px; }
.hub-hero h1 { color: #fff; max-width: none; margin-inline: auto; }
.hub-hero h1 b { color: var(--or-clair); }
.hub-hero p.lead { color: rgba(255,255,255,.82); max-width: 56ch; margin: 14px auto 0; font-size: 1.08rem; }
.hub-stats { display: flex; gap: 20px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }
.hub-stat {
  padding: 16px 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(184,151,94,.2);
  border-radius: var(--r-m);
  min-width: 120px;
  transition: transform .2s var(--ease-out), border-color .2s;
}
.hub-stat:hover { transform: translateY(-2px); border-color: rgba(184,151,94,.45); }
.hub-stat b { font-family: var(--f-display); font-size: 2rem; color: var(--or-clair); display: block; }
.hub-stat span { font-size: .75rem; color: rgba(255,255,255,.6); font-family: var(--f-data); letter-spacing: .1em; }

.hub-intro { background: var(--creme-2); }
.hub-intro .wrap { padding-block: 48px; }
.hub-intro .col2 { columns: 2; column-gap: 40px; max-width: 78ch; color: var(--ardoise); }
.hub-intro h2 { color: var(--encre); margin-bottom: 16px; }

/* ---- Carte interactive hub ----------------------------------------------- */
.hub-map {
  background: linear-gradient(180deg, var(--creme-2) 0%, #fff 100%);
  padding-block: 48px 56px;
  position: relative;
  z-index: 1;
}
.hub-map__head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: 28px; }
.hub-map__head h2 { color: var(--encre); margin: 8px 0 10px; }
.hub-map__lead { color: var(--ardoise); margin: 0; font-size: 1.02rem; line-height: 1.6; }
.hub-map__layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 20px;
  align-items: stretch;
  min-width: 0;
}
.hub-map__side,
.hub-map__canvas { min-width: 0; }
.hub-map__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.hub-map__side-label {
  font-family: var(--f-data);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or-fonce);
  margin: 0;
}
.hub-map__deps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hub-map__dep {
  font-family: var(--f-data);
  font-size: .72rem;
  letter-spacing: .04em;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--ligne);
  background: #fff;
  color: var(--ardoise);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s;
}
.hub-map__dep:hover { border-color: var(--or); color: var(--encre); }
.hub-map__dep.is-active {
  background: var(--noir);
  border-color: var(--or);
  color: var(--or-clair);
  box-shadow: var(--ombre-or);
}
.hub-map__list {
  flex: 1;
  overflow-y: auto;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--or) transparent;
}
.hub-map__item {
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--r-m);
  border: 1px solid var(--ligne);
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.hub-map__item:hover {
  border-color: var(--or);
  transform: translateX(3px);
  box-shadow: var(--ombre);
}
.hub-map__item-ens {
  display: block;
  font-family: var(--f-data);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or-fonce);
}
.hub-map__item b { display: block; font-family: var(--f-display); font-size: .98rem; margin-top: 2px; }
.hub-map__item-adr { font-size: .82rem; color: var(--ardoise); }
.hub-map__canvas {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--ligne-or);
  box-shadow: var(--ombre);
  background: #FBF8F2;
  min-height: 480px;
}
.hub-map__leaflet {
  width: 100%;
  height: 100%;
  min-height: 480px;
  background: #FBF8F2;
}

/* Carte Leaflet — habillage marque */
.hub-map .leaflet-container {
  font-family: var(--f-corps);
  background: #FBF8F2;
}
.hub-map .leaflet-control-attribution {
  background: rgba(251,248,242,.82);
  color: var(--ardoise);
  font-size: 10px;
  backdrop-filter: blur(4px);
}
.hub-map .leaflet-control-attribution a { color: var(--or-fonce); }

/* Boutons de zoom */
.hub-map .leaflet-bar {
  border: none;
  box-shadow: var(--ombre);
  border-radius: var(--r-s);
  overflow: hidden;
}
.hub-map .leaflet-bar a,
.hub-map .leaflet-bar a:hover {
  width: 34px;
  height: 34px;
  line-height: 34px;
  color: var(--or-fonce);
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid var(--ligne-or);
  font-size: 1.2rem;
}
.hub-map .leaflet-bar a:last-child { border-bottom: none; }
.hub-map .leaflet-bar a:hover { background: var(--or); color: #fff; }

/* Marqueur boutique */
.vc-pin { background: none; border: none; }
.vc-pin svg {
  display: block;
  filter: drop-shadow(0 4px 6px rgba(26,23,20,.28));
  transition: transform .15s var(--ease-out);
}
.vc-pin:hover svg { transform: translateY(-2px) scale(1.06); }

/* Cluster */
.vc-cluster {
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vc-cluster span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--or-clair), var(--or) 70%);
  color: #1a1714;
  font-family: var(--f-data);
  font-weight: 700;
  font-size: .82rem;
  border: 2px solid #FBF8F2;
  box-shadow: 0 4px 12px rgba(150,120,74,.4), 0 0 0 6px rgba(184,151,94,.18);
}

/* Popup */
.hub-map .vc-popup .leaflet-popup-content-wrapper {
  background: #fff;
  border: 1px solid var(--ligne-or);
  border-radius: var(--r-m);
  box-shadow: 0 14px 40px rgba(26,23,20,.22);
}
.hub-map .vc-popup .leaflet-popup-content { margin: 14px 16px; line-height: 1.5; }
.hub-map .vc-popup .leaflet-popup-tip { background: #fff; border: 1px solid var(--ligne-or); }
.hub-map .vc-popup a.leaflet-popup-close-button { color: var(--ardoise); padding: 8px 8px 0 0; }
.vc-pop__ens {
  display: block;
  font-family: var(--f-data);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or-fonce);
}
.vc-pop__title { display: block; font-family: var(--f-display); font-size: 1.05rem; margin: 2px 0 4px; color: var(--encre); }
.vc-pop__adr { font-size: .85rem; color: var(--ardoise); margin: 0 0 12px; }
.vc-pop__btn { width: 100%; justify-content: center; }
.hub-map__err { color: var(--ardoise); padding: 24px; text-align: center; }

/* ---- SEO hub (régions & villes) ------------------------------------------ */
.hub-seo { padding-block: 56px; }
.hub-seo__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 36px;
}
.hub-seo__logo {
  width: min(280px, 100%);
  height: auto;
}
.hub-seo__head h2 { margin-bottom: 10px; }
.hub-seo__head p { color: var(--ardoise); margin: 0; }
.seo-regions { display: grid; gap: 28px; margin-bottom: 32px; }
.seo-region h3 {
  font-size: 1.2rem;
  color: var(--or-fonce);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ligne-or);
}
.seo-dep {
  padding: 16px 0;
  border-bottom: 1px dashed var(--ligne);
}
.seo-dep:last-child { border-bottom: 0; }
.seo-dep h3 { font-size: 1.05rem; margin-bottom: 6px; }
.seo-dep h3 a { color: var(--encre); text-decoration: none; }
.seo-dep h3 a:hover { color: var(--or-fonce); text-decoration: underline; }
.seo-dep p { color: var(--ardoise); font-size: .95rem; margin-bottom: 8px; }
.seo-dep__links {
  display: flex; flex-wrap: wrap; gap: 6px 4px;
  font-size: .88rem; line-height: 1.8;
}
.seo-dep__links a {
  color: var(--or-fonce);
  padding: 2px 8px;
  background: rgba(184,151,94,.1);
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.seo-dep__links a:hover { background: var(--or); color: #1a1714; text-decoration: none; }
.seo-villes {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--r-m);
  box-shadow: var(--ombre);
}
.seo-villes h3 { margin-bottom: 10px; font-size: 1.1rem; }
.seo-villes p { color: var(--ardoise); margin: 0; font-size: .95rem; }

.dep-group { margin-bottom: 48px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.dep-group h2 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.dep-group h2::before {
  content: ""; width: 22px; height: 22px; background: var(--or);
  -webkit-mask: center/contain no-repeat;
  border-radius: 3px; transform: rotate(45deg); display: inline-block; flex-shrink: 0;
}
.dep-group h2 small { font-family: var(--f-data); font-size: .8rem; color: var(--ardoise); font-weight: 400; }

.grid-boutiques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--ligne);
  border-radius: var(--r-m); overflow: hidden; box-shadow: var(--ombre);
  transition: transform .2s var(--ease-out), box-shadow .2s ease, border-color .2s;
  color: var(--encre);
}
.bcard:hover { transform: translateY(-5px); box-shadow: var(--ombre-or); border-color: var(--ligne-or); text-decoration: none; }
.bcard__img { aspect-ratio: 16/10; overflow: hidden; background: var(--noir-3); position: relative; }
.bcard__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.bcard:hover .bcard__img img { transform: scale(1.07); }
.bcard__img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent 50%);
  pointer-events: none;
}
.bcard__body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.bcard__ens { font-family: var(--f-data); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or-fonce); }
.bcard h3 { margin: 4px 0 2px; font-size: 1.15rem; }
.bcard__adr { color: var(--ardoise); font-size: .88rem; flex: 1; }
.bcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.bcard__note { font-size: .85rem; color: var(--ardoise); }
.bcard__note .st { color: var(--or); }

/* ---- Pied de page -------------------------------------------------------- */
.foot { background: var(--noir); color: rgba(255,255,255,.7); padding-block: 48px; font-size: .9rem; }
.foot a { color: var(--or-clair); }
.foot__top { margin-bottom: 28px; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; margin-bottom: 26px; }
.foot h4 { font-family: var(--f-display); color: #fff; font-size: 1rem; margin: 0 0 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 6px; }
.foot__legal { border-top: 1px solid var(--ligne-claire); padding-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .82rem; }
.foot__warn { font-family: var(--f-data); font-size: .72rem; color: rgba(255,255,255,.42); margin-top: 14px; }

.fil { font-size: .82rem; color: var(--ardoise); padding-block: 14px; background: var(--creme-2); border-bottom: 1px solid var(--ligne); }
.fil a { color: var(--ardoise); }
.fil span { color: var(--encre); font-weight: 600; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .hub-map__layout { grid-template-columns: 1fr; }
  .hub-map__side { order: 2; }
  .hub-map__canvas { order: 1; min-height: min(55vh, 420px); }
  .hub-map__leaflet { min-height: min(55vh, 420px); }
  .hub-map__list { max-height: 280px; }
  .hub-map__deps { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .hub-map__dep { flex-shrink: 0; }
}
@media (max-width: 900px) {
  .hero { min-height: clamp(380px, 65vh, 520px); align-items: flex-end; }
  .hero__content .wrap { max-width: 100%; }
  .pratique { grid-template-columns: 1fr; }
  .rayons, .atouts, .proches, .grid-boutiques { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .map-frame { min-height: 260px; }
  .hub-intro .col2 { columns: 1; }
  .hub-hero__diamond { display: none; }
  .hub-seo__head { grid-template-columns: 1fr; text-align: center; }
  .hub-seo__logo { margin-inline: auto; }
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px var(--gout) 20px;
    background: rgba(0,0,0,.97);
    border-bottom: 1px solid var(--ligne-or);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform .3s var(--ease-out), opacity .3s, visibility .3s;
  }
  .nav.is-open .nav__links {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav__links .btn { justify-content: center; min-height: 48px; }
}
@media (max-width: 560px) {
  :root { --gout: 16px; --nav-h: 72px; }
  body { font-size: 16px; }
  .logo--full img { height: 48px; max-width: 62vw; }
  .nav.is-scrolled .logo--full img { height: 42px; }
  .rayons, .atouts, .proches, .grid-boutiques, .galerie { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .hub-stats { gap: 10px; width: 100%; }
  .hub-stat { min-width: 0; flex: 1; padding: 12px 10px; }
  .hub-stat b { font-size: 1.6rem; }
  .hub-hero { min-height: auto; padding-bottom: 8px; }
  .hub-hero__layout { padding-block: 32px 40px; gap: 20px; }
  .hub-hero__logo { width: min(100%, 340px); }
  .hub-hero h1 { font-size: clamp(1.65rem, 7vw, 2.2rem); }
  .hub-map { padding-block: 36px 44px; }
  .hub-map__head { margin-bottom: 20px; }
  .hub-map__canvas { min-height: 52vh; border-radius: var(--r-m); }
  .hub-map__leaflet { min-height: 52vh; }
  .hero__cta .btn { width: 100%; justify-content: center; min-height: 48px; }
  .btn { min-height: 44px; }
  .bcard__body { padding: 14px 16px 16px; }
  .seo-dep__links a { font-size: .82rem; }
  .particles-canvas { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__bg img { transform: none; }
  .particles-canvas, .hero-pts { display: none; }
}