/* ============================================================
   Villa des Jardins — v2.css
   Accueil V2 : version modernisée (animations séquencées + parallax).
   Se superpose à main.css. Palette identique (or / olive / champagne).
   ============================================================ */

/* ---------- Barre de progression de lecture ---------- */
.v2-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:300; background:transparent; pointer-events:none; }
.v2-progress__bar{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--gold), var(--gold-light)); transition:width .1s linear; }

/* ---------- Primitives d'animation ---------- */
.v2-reveal{ opacity:0; transform:translateY(24px); transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
.v2-reveal.is-in{ opacity:1; transform:none; }

/* Révélation par masque (images).
   IMPORTANT : le clip-path est porté par un ENFANT (.v2-mask), jamais par l'élément
   observé. Un clip-path inset(...100%) sur la cible met son intersectionRatio à 0 :
   l'IntersectionObserver ne se déclenche alors JAMAIS et l'image reste invisible. */
.v2-mask{ clip-path:inset(0 0 100% 0); transition:clip-path .6s cubic-bezier(.16,1,.3,1); }
.is-in .v2-mask{ clip-path:inset(0 0 0 0); }

/* lignes de titre qui montent depuis un masque */
.v2-line{ display:block; overflow:hidden; }
.v2-line > span{ display:block; transform:translateY(110%); transition:transform .8s cubic-bezier(.16,1,.3,1); }
.is-in .v2-line > span{ transform:none; }

/* conteneurs zoom (l'image scale, le cadre reste net) */
.v2-intro__zoom,.v2-mission__zoom,.v2-card__zoom{ position:absolute; inset:-8% 0; }
.v2-intro__zoom img,.v2-mission__zoom img,.v2-card__zoom img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Typo V2 ---------- */
.v2-h2{ font-family:var(--serif); font-weight:400; color:var(--slate); font-size:clamp(30px,3.8vw,48px); line-height:1.1; letter-spacing:-.4px; margin:0 0 24px; }
.v2-h2--light{ color:#fff; }
.v2-lead{ color:var(--body); font-size:16.5px; line-height:1.8; max-width:48ch; }
.v2-lead p{ margin:0 0 1em; }
.v2-lead--light{ color:rgba(255,255,255,.86); }
.v2-kicker{ display:block; font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:2.6px; text-transform:uppercase; color:var(--gold); margin:0 0 16px; }
.v2-kicker--light{ color:var(--gold-light); }

/* lien flèche animé */
.v2-link{ display:inline-flex; align-items:center; gap:12px; margin-top:28px; color:var(--gold); font-size:15px; font-weight:600; letter-spacing:.3px; }
.v2-link i{ transition:transform .35s cubic-bezier(.16,1,.3,1); }
.v2-link span{ position:relative; }
.v2-link span::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.v2-link:hover span::after{ transform:scaleX(1); transform-origin:left; }
.v2-link:hover i{ transform:translateX(6px); }
.v2-link--light{ color:var(--gold-light); }

/* boutons V2 */
.v2-btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.3px; padding:17px 34px; border-radius:40px; border:1px solid transparent; transition:background .3s, color .3s, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.v2-btn--light{ background:#fff; color:var(--olive); }
.v2-btn--light:hover{ background:var(--gold); color:#fff; transform:translateY(-3px); box-shadow:0 14px 30px rgba(193,148,53,.35); }

/* ============================================================
   HERO
   ============================================================ */
.v2-hero{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.v2-hero__media{ position:absolute; inset:0; z-index:0; }
.v2-hero__video,.v2-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.v2-hero__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,38,20,.58), rgba(35,44,24,.42) 45%, rgba(26,33,16,.72)); }
.v2-hero__inner{ position:relative; z-index:2; color:#fff; padding:130px 24px; max-width:1060px; }
.v2-hero__eyebrow{ display:block; font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--gold-light); margin:0 0 22px; opacity:0; transform:translateY(16px); transition:opacity .9s ease .05s, transform .9s cubic-bezier(.16,1,.3,1) .05s; }
.v2-hero__inner.is-in .v2-hero__eyebrow{ opacity:1; transform:none; }
/* Le H1 n'est qu'un conteneur : toute la mise en forme reste portée par
   .v2-hero__eyebrow et .v2-hero__title, le rendu est donc inchangé. */
.v2-hero__heading{ margin:0; padding:0; font-weight:inherit; font-size:inherit; line-height:inherit; }
.v2-hero__title{ display:block; font-family:var(--serif); font-weight:300; font-size:clamp(36px,5.4vw,72px); line-height:1.08; letter-spacing:-.5px; margin:0; color:#fff; }
.v2-hero__sub{ margin:26px auto 0; max-width:56ch; color:rgba(255,255,255,.9); font-size:clamp(16px,1.5vw,19px); line-height:1.75; opacity:0; transform:translateY(18px); transition:opacity 1s ease .5s, transform 1s cubic-bezier(.16,1,.3,1) .5s; }
.v2-hero__inner.is-in .v2-hero__sub{ opacity:1; transform:none; }
.v2-hero__actions{ margin-top:38px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; opacity:0; transform:translateY(18px); transition:opacity 1s ease .65s, transform 1s cubic-bezier(.16,1,.3,1) .65s; }
.v2-hero__inner.is-in .v2-hero__actions{ opacity:1; transform:none; }

/* indicateur de scroll */
.v2-scroll{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3; width:1px; height:64px; display:block; }
.v2-scroll__line{ display:block; width:1px; height:100%; background:rgba(255,255,255,.35); position:relative; overflow:hidden; }
.v2-scroll__line::after{ content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--gold-light); animation:v2-scroll-cue 2.2s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes v2-scroll-cue{ 0%{transform:translateY(0);} 100%{transform:translateY(200%);} }

/* ============================================================
   INTRO
   ============================================================ */
.v2-intro{ background:var(--white); padding:var(--sp-lg) 0; }
.v2-intro__grid{ display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center; }
.v2-intro__media{ position:relative; margin:0; border-radius:20px; overflow:hidden; aspect-ratio:4/3.4; box-shadow:0 34px 70px rgba(52,66,31,.20); }

/* ============================================================
   VALEURS
   ============================================================ */
.v2-values{ background:var(--band); padding:var(--sp-lg) 0; }
.v2-values__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:60px 48px; }
.v2-card{ display:block; }
.v2-card__media{ position:relative; aspect-ratio:16/11; border-radius:18px; overflow:hidden; background:var(--sand); box-shadow:0 20px 44px rgba(52,66,31,.12); }
.v2-card__num{ position:absolute; left:20px; top:16px; z-index:2; font-family:var(--serif); font-size:15px; letter-spacing:1px; color:#fff; background:rgba(52,66,31,.55); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.3); border-radius:30px; padding:5px 12px; }
.v2-card__title{ font-family:var(--serif); font-weight:400; color:var(--ink); font-size:25px; margin:24px 0 10px; transition:color .3s; }
.v2-card__text{ color:var(--muted); font-size:15px; margin:0; max-width:44ch; }
/* Le survol ne doit signaler QUE ce qui est réellement cliquable : une carte
   sans lien qui change de couleur ou se soulève promet un clic qui n'arrive
   jamais. Tout est donc scopé sur .card-clickable (règle agence n° 9). */
a.v2-card.card-clickable{ text-decoration:none; color:inherit; transition:transform .35s cubic-bezier(.16,1,.3,1); }
a.v2-card.card-clickable:hover{ transform:translateY(-5px); }
a.v2-card.card-clickable:hover .v2-card__title{ color:var(--gold); }
a.v2-card.card-clickable:focus-visible{ outline:3px solid var(--gold); outline-offset:6px; border-radius:20px; }
.v2-card__more{
  display:inline-flex; align-items:center; gap:9px; margin-top:14px;
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--slate-2);
  transition:gap .3s ease, color .3s ease;
}
a.v2-card.card-clickable:hover .v2-card__more{ gap:15px; color:var(--gold); }
@media (prefers-reduced-motion:reduce){
  a.v2-card.card-clickable,.v2-card__more{ transition:none; }
  a.v2-card.card-clickable:hover{ transform:none; }
}

/* L'ancienne « bande familles » (fond olive + feuillage, .v2-band) a été retirée
   ici le 2026-09-07 : plus aucun gabarit ne la rendait depuis son remplacement
   par .v2-manifesto, mais ses règles continuaient de s'appliquer et ont repeint
   en olive le nouveau bandeau photo qui porte le même nom (plus bas dans ce
   fichier). Vérifié avant suppression : aucune occurrence dans les gabarits,
   les post_content, les métadonnées ni les options. */

/* ============================================================
   LA MAISON (collage parallax)
   ============================================================ */
.v2-house{ background:var(--white); padding:var(--sp-lg) 0; }
.v2-house__grid{ display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center; }
.v2-house__collage{ position:relative; aspect-ratio:4/4.5; }
.v2-house__photo{ position:absolute; border-radius:18px; overflow:hidden; box-shadow:0 30px 60px rgba(52,66,31,.20); }
.v2-house__inner{ position:absolute; inset:0; }
.v2-house__photo img{ width:100%; height:100%; object-fit:cover; }
.v2-house__photo--a{ left:0; bottom:0; width:74%; aspect-ratio:3/3.5; z-index:1; }
.v2-house__photo--b{ right:0; top:0; width:56%; aspect-ratio:4/3; z-index:2; border:7px solid #fff; }
.v2-amen{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:28px 18px; }
.v2-amen__item{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--muted); }
.v2-amen__item i{ font-size:22px; color:var(--gold); }

/* ============================================================
   MISSION
   ============================================================ */
.v2-mission{ background:var(--band); padding:var(--sp-lg) 0; }
.v2-mission__grid{ display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center; }
.v2-mission__media{ position:relative; margin:0; border-radius:20px; overflow:hidden; aspect-ratio:5/5; box-shadow:0 34px 70px rgba(52,66,31,.20); }

/* ============================================================
   GALERIE
   ============================================================ */
.v2-gallery{ background:var(--white); padding:var(--sp-lg) 0; }
.v2-gallery__title{ text-align:center; margin-bottom:60px; }
/* l'image est plus haute que son cadre : elle peut « parallaxer » sans laisser de vide */

/* ============================================================
   TÉMOIGNAGES (réutilise .villa-testi2 de main.css)
   ============================================================ */
.v2-testi{ background:var(--band); }

/* ============================================================
   FAQ
   ============================================================ */
.v2-faq{ background:var(--white); padding:var(--sp-md) 0 var(--sp-lg); }
.v2-faq__title{ text-align:center; margin-bottom:56px; }
.v2-faq__list{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.v2-faq__item{ background:var(--band); border:1px solid transparent; border-radius:18px; padding:4px 32px; transition:background .35s, border-color .35s, box-shadow .35s, opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.v2-faq__item[open]{ background:#fff; border-color:var(--line); box-shadow:0 18px 40px rgba(52,66,31,.10); }
.v2-faq__q{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0; font-family:var(--serif); font-size:21px; color:var(--ink); }
.v2-faq__q::-webkit-details-marker{ display:none; }
.v2-faq__plus{ position:relative; flex:0 0 20px; width:20px; height:20px; }
.v2-faq__plus::before,.v2-faq__plus::after{ content:""; position:absolute; top:50%; left:0; width:100%; height:1.5px; background:var(--gold); transition:transform .35s cubic-bezier(.16,1,.3,1); }
.v2-faq__plus::after{ transform:rotate(90deg); }
.v2-faq__item[open] .v2-faq__plus::after{ transform:rotate(0); }
.v2-faq__a{ color:var(--body); font-size:15.5px; line-height:1.75; padding:0 0 28px; max-width:64ch; }

/* ============================================================
   APPEL FINAL
   ============================================================ */
.v2-cta{ position:relative; background:var(--olive); padding:var(--sp-lg) 0; text-align:center; overflow:hidden; }
.v2-cta__bg{ position:absolute; inset:-15% 0; background:linear-gradient(rgba(36,46,21,.80), rgba(42,54,24,.86)), url(../img/deco-gold.webp) center/cover; }
.v2-cta__inner{ position:relative; z-index:1; max-width:740px; }
.v2-cta__title{ font-family:var(--serif); font-weight:300; font-size:clamp(32px,4.4vw,54px); line-height:1.12; color:#fff; margin:0 0 20px; letter-spacing:-.4px; }
.v2-cta__text{ color:rgba(255,255,255,.84); font-size:17px; line-height:1.75; margin:0 auto 36px; max-width:48ch; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .v2-intro__grid,.v2-house__grid,.v2-mission__grid{ grid-template-columns:1fr; gap:44px; }
  .v2-mission__copy{ order:2; }
  .v2-amen{ grid-template-columns:repeat(4,1fr); }
    .v2-intro__media,.v2-mission__media{ aspect-ratio:16/10; }
}
@media (max-width:720px){
  .v2-hero__inner{ padding:100px 18px; }
  /* .v2-band n'est plus utilisé par aucun gabarit ; .v2-cta suit désormais
     l'échelle de respiration commune, qui s'adapte déjà sous 900 px. */
  .v2-values__grid{ grid-template-columns:1fr; gap:40px; }
  .v2-amen{ grid-template-columns:repeat(3,1fr); gap:22px 12px; }
    .v2-house__collage{ aspect-ratio:4/4; }
  .v2-faq__item{ padding:2px 22px; }
  .v2-faq__q{ font-size:18px; }
}

/* ============================================================
   PAGES INTÉRIEURES (Vivre à la Villa, À propos)
   ============================================================ */
/* Hero de page (plus court que le plein écran) */
.v2-phero{ position:relative; min-height:66vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.v2-phero--short{ min-height:56vh; }
.v2-phero__media{ position:absolute; inset:0; z-index:0; background-color:var(--olive); background-size:cover; background-position:center center; background-repeat:no-repeat; }
/* fond fixe : l'image reste en place pendant que le contenu défile par-dessus.
   Desktop uniquement (background-attachment:fixed est saccadé / ignoré sur iOS). */
@media (min-width:901px){ .v2-phero__media{ background-attachment:fixed; } }
.v2-phero__img{ width:100%; height:100%; object-fit:cover; }
.v2-phero__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,38,20,.55), rgba(26,33,16,.72)); }
.v2-phero__inner{ position:relative; z-index:2; color:#fff; padding:150px 24px 90px; max-width:960px; }
.v2-phero__eyebrow{ display:block; font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--gold-light); margin:0 0 20px; }
.v2-phero__title{ font-family:var(--serif); font-weight:300; font-size:clamp(32px,4.6vw,60px); line-height:1.1; letter-spacing:-.5px; margin:0; color:#fff; }
.v2-phero__sub{ margin:24px auto 0; max-width:54ch; color:rgba(255,255,255,.9); font-size:clamp(16px,1.5vw,20px); line-height:1.7; }
.v2-phero__actions{ margin-top:34px; }

/* Intro éditoriale centrée */
.v2-vintro{ background:var(--white); padding:var(--sp-md) 0 40px; text-align:center; }
.v2-vintro__text{ max-width:760px; margin:0 auto; font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.4vw,28px); line-height:1.5; color:var(--olive); }
.v2-vintro__text p{ margin:0 0 .5em; }

/* Sections image + texte alternées */
.v2-feature{ background:var(--white); padding:var(--sp-lg) 0; }
.v2-feature--band{ background:var(--band); }
.v2-feature__grid{ display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center; }
.v2-feature--alt .v2-feature__media{ order:2; }
.v2-feature__media{ position:relative; margin:0; border-radius:20px; overflow:hidden; aspect-ratio:4/3.1; box-shadow:0 30px 64px rgba(52,66,31,.18); }
.v2-feature__zoom{ position:absolute; inset:-6% 0; }
.v2-feature__zoom img{ width:100%; height:100%; object-fit:cover; }
.v2-quote{ margin:28px 0 0; padding:4px 0 4px 22px; border-left:3px solid var(--gold); font-family:var(--serif); font-style:italic; font-size:clamp(18px,2vw,22px); line-height:1.4; color:var(--olive); }

/* Blocs liste (À propos) */
.v2-lb{ background:var(--band); padding:120px 0; }
.v2-lb__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.v2-lb__card{ background:#fff; border-radius:20px; padding:42px 42px 38px; box-shadow:0 20px 46px rgba(52,66,31,.10); }
.v2-lb__card h3{ font-family:var(--serif); font-weight:400; font-size:clamp(23px,2.4vw,28px); color:var(--olive); margin:0 0 14px; }
.v2-lb__intro{ color:var(--body); font-size:15.5px; line-height:1.7; margin:0 0 18px; }
.v2-lb__list{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:12px; }
.v2-lb__list li{ display:flex; align-items:flex-start; gap:12px; color:var(--ink); font-size:15.5px; }
.v2-lb__list li i{ color:var(--gold); font-size:13px; margin-top:5px; flex:0 0 auto; }
.v2-lb__outro{ color:var(--muted); font-style:italic; font-size:14.5px; margin:0; }

@media (max-width:900px){
  .v2-feature__grid{ grid-template-columns:1fr; gap:40px; }
  .v2-feature--alt .v2-feature__media{ order:0; }
  .v2-feature__media{ aspect-ratio:16/10; }
  .v2-lb__grid{ grid-template-columns:1fr; gap:22px; }
}
@media (max-width:720px){
  .v2-phero__inner{ padding:130px 18px 70px; }
  .v2-lb{ padding:74px 0; }
  .v2-lb__card{ padding:32px 28px; }
}

/* ============================================================
   CONTACT (style moderne)
   ============================================================ */
.v2-contact{ background:var(--band); padding:var(--sp-lg) 0; }
.v2-contact__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
.v2-contact__intro{ color:var(--body); font-size:16px; line-height:1.7; margin:0 0 26px; max-width:42ch; }
.v2-contact__list{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:16px; }
.v2-contact__list li{ display:flex; align-items:center; gap:14px; color:var(--ink); font-size:15.5px; }
.v2-contact__list a{ color:var(--ink); }
.v2-contact__list a:hover{ color:var(--gold); }
.v2-contact__ic{ flex:0 0 42px; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--olive); color:#fff; font-size:15px; }
.v2-contact__social{ display:flex; gap:12px; margin:0 0 26px; font-size:18px; }
.v2-contact__social a{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line); color:var(--olive); transition:.25s; }
.v2-contact__social a:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.v2-contact__map{ border-radius:18px; overflow:hidden; box-shadow:0 18px 40px rgba(52,66,31,.12); }
.v2-contact__map iframe{ display:block; }
.v2-contact__formwrap{ background:#fff; border-radius:22px; padding:46px 46px 44px; box-shadow:0 26px 60px rgba(52,66,31,.12); }
.v2-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:22px; }
.v2-form__field{ display:flex; flex-direction:column; gap:9px; }
.v2-form__field span{ font-size:14.5px; color:var(--body); }
.v2-form__field--full{ margin-bottom:24px; }
.v2-form input,.v2-form textarea{ font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:14px 16px; transition:border-color .2s, background .2s; }
.v2-form input:focus,.v2-form textarea:focus{ outline:none; border-color:var(--gold); background:#fff; }
.v2-form__submit{ width:100%; cursor:pointer; background:var(--olive); color:#fff; }
.v2-form__submit:hover{ background:var(--gold); color:#fff; transform:translateY(-2px); }
.v2-form__notice{ padding:14px 20px; border-radius:12px; margin:0 0 22px; text-align:center; font-size:15px; }
.v2-form__notice--ok{ background:#E7F1E7; color:#37633c; }
.v2-form__notice--err{ background:#F6E4E2; color:#8a3b34; }

@media (max-width:900px){
  .v2-contact__grid{ grid-template-columns:1fr; gap:36px; }
  .v2-contact__formwrap{ padding:34px 26px; }
}
@media (max-width:720px){
  .v2-form__row{ grid-template-columns:1fr; gap:18px; margin-bottom:18px; }
}

/* ============================================================
   PAGES SEO (piliers / villes) — H2 bulle mot-clé + H3 client
   ============================================================ */
.seo-sec{ background:var(--white); padding:96px 0; }
.seo-sec--band{ background:var(--band); }
.seo-sec__grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.seo-sec__grid--alt .seo-sec__media{ order:2; }
.seo-sec__center{ max-width:780px; margin:0 auto; text-align:center; }
.seo-sec__center .v2-lead{ margin-left:auto; margin-right:auto; }
.seo-sec__center .seo-pill{ margin-left:auto; margin-right:auto; }
.seo-sec__center .v2-link{ justify-content:center; }
.seo-sec__media{ position:relative; margin:0; border-radius:20px; overflow:hidden; aspect-ratio:4/3.1; box-shadow:0 30px 64px rgba(52,66,31,.18); }
.seo-sec__zoom{ position:absolute; inset:-6% 0; }
.seo-sec__zoom img{ width:100%; height:100%; object-fit:cover; }

/* H2 = bulle mot-clé (petite, style Framer) */
.seo-pill{ display:inline-block; font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.6px; color:var(--olive); background:var(--gold-light); border:1px solid rgba(193,148,53,.45); border-radius:40px; padding:7px 16px; margin:0 0 18px; line-height:1.3; }
.seo-sec--band .seo-pill{ background:#fff; }
/* H3 = titre client, plus grand */
.seo-h3{ font-family:var(--serif); font-weight:400; color:var(--olive); font-size:clamp(26px,3.2vw,38px); line-height:1.14; letter-spacing:-.3px; margin:0 0 18px; }

@media (max-width:900px){
  .seo-sec{ padding:68px 0; }
  .seo-sec__grid{ grid-template-columns:1fr; gap:36px; }
  .seo-sec__grid--alt .seo-sec__media{ order:0; }
  .seo-sec__media{ aspect-ratio:16/10; }
}

/* ============================================================
   BLOG / ACTUALITÉS
   ============================================================ */
.v2-blog{ background:var(--white); padding:var(--sp-sm) 0 var(--sp-lg); }
.v2-blog__filters{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:0 0 50px; }
.v2-blog__filters a{ display:inline-flex; align-items:center; padding:10px 22px; border-radius:40px; border:1px solid var(--line); font-size:14px; font-weight:500; color:var(--ink); transition:background .25s, color .25s, border-color .25s; }
.v2-blog__filters a:hover{ border-color:var(--gold); color:var(--gold); }
.v2-blog__filters a.is-active{ background:var(--olive); color:#fff; border-color:var(--olive); }
.v2-blog__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px 30px; }
.v2-bcard{ background:var(--card,#fff); }
.v2-bcard__link{ display:block; color:inherit; }
.v2-bcard__media{ aspect-ratio:16/11; border-radius:18px; overflow:hidden; background:var(--sand); box-shadow:0 18px 40px rgba(52,66,31,.12); margin-bottom:20px; }
.v2-bcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.v2-bcard__link:hover .v2-bcard__media img{ transform:scale(1.06); }
.v2-bcard__cat{ display:inline-block; font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--gold); margin:0 0 8px; }
.v2-bcard__title{ font-family:var(--serif); font-weight:400; color:var(--olive); font-size:22px; line-height:1.24; margin:0 0 10px; transition:color .25s; }
.v2-bcard__link:hover .v2-bcard__title{ color:var(--gold); }
.v2-bcard__excerpt{ color:var(--muted); font-size:14.5px; line-height:1.6; margin:0 0 14px; }
.v2-bcard__more{ display:inline-flex; align-items:center; gap:9px; color:var(--gold); font-size:14px; font-weight:600; }
.v2-bcard__more i{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.v2-bcard__link:hover .v2-bcard__more i{ transform:translateX(5px); }
.v2-blog__nav{ margin-top:56px; }
.v2-blog__nav .nav-links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.v2-blog__nav a,.v2-blog__nav .current{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; border-radius:30px; border:1px solid var(--line); font-size:14px; color:var(--ink); }
.v2-blog__nav .current{ background:var(--olive); color:#fff; border-color:var(--olive); }
.v2-blog__nav a:hover{ background:var(--band); }

/* Article */
.v2-phero__meta{ margin:16px 0 0; color:rgba(255,255,255,.82); font-size:14px; letter-spacing:.4px; }
.v2-phero--article .v2-phero__title{ max-width:20ch; margin-inline:auto; }
.v2-article{ padding:74px 0 20px; }
.v2-article__body{ max-width:740px; margin:0 auto; color:var(--body); font-size:17px; line-height:1.8; }
.v2-article__body h2{ font-family:var(--serif); font-weight:400; color:var(--olive); font-size:clamp(24px,2.8vw,32px); line-height:1.2; margin:42px 0 14px; }
.v2-article__body h3{ font-family:var(--serif); font-weight:400; color:var(--ink); font-size:22px; margin:32px 0 10px; }
.v2-article__body p{ margin:0 0 20px; }
.v2-article__body ul,.v2-article__body ol{ margin:0 0 22px; padding-left:22px; }
.v2-article__body li{ margin:9px 0; }
.v2-article__body a{ color:var(--gold); text-decoration:underline; }
.v2-article__body strong{ color:var(--ink); }
.v2-article__body blockquote{ margin:26px 0; padding:4px 0 4px 22px; border-left:3px solid var(--gold); font-family:var(--serif); font-style:italic; font-size:21px; color:var(--olive); }
.v2-article__body img{ border-radius:16px; margin:12px 0; }
.v2-article__back{ max-width:740px; margin:30px auto 0; }

@media (max-width:900px){
  .v2-blog{ padding:70px 0 80px; }
  .v2-blog__grid{ grid-template-columns:repeat(2,1fr); gap:28px 22px; }
  .v2-article{ padding:56px 0 16px; }
}
@media (max-width:600px){
  .v2-blog__grid{ grid-template-columns:1fr; }
  .v2-article__body{ font-size:16px; }
}

/* ============================================================
   GRILLES DÉCALÉES / MASONRY AÉRÉ (photos en quinconce, plus joli que « tout droit »)
   ============================================================ */
@media (min-width:701px){
  /* Cartes « valeurs » : colonne de droite décalée vers le bas */
  .v2-values__grid{ align-items:start; column-gap:56px; row-gap:34px; }
  .v2-values__grid > .v2-card:nth-child(even){ margin-top:80px; }

  /* Galerie : colonnes décalées en quinconce */
  }
/* Les hauteurs variées de l'ancienne grille galerie ont été reprises par la
   mosaïque (.v2-mosaic, plus bas), qui gère elle-même son rythme. */

/* ============================================================
   À PROPOS — blocs redesignés (photo + cartes numérotées)
   ============================================================ */
.apr-blocks{ background:var(--band); padding:120px 0; }
.apr-blocks__grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:64px; align-items:start; }
.apr-blocks__media{ position:sticky; top:118px; margin:28px 0 0; }
.apr-blocks__frame{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/3.9; box-shadow:0 34px 74px rgba(52,66,31,.22); }
.apr-blocks__frame img{ width:100%; height:100%; object-fit:cover; }
.apr-blocks__badge{ position:absolute; left:18px; bottom:18px; z-index:2; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.94); color:var(--olive); font-size:13px; font-weight:600; letter-spacing:.3px; padding:9px 16px; border-radius:40px; box-shadow:0 10px 24px rgba(0,0,0,.14); backdrop-filter:blur(4px); }
.apr-blocks__badge i{ color:var(--gold); }
.apr-blocks__list{ display:flex; flex-direction:column; gap:20px; }
.apr-card{ position:relative; display:flex; gap:24px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px 34px; box-shadow:0 14px 34px rgba(52,66,31,.07); transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; overflow:hidden; }
.apr-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold); transform:scaleY(0); transform-origin:top; transition:transform .4s cubic-bezier(.16,1,.3,1); }
/* .apr-card n'est pas cliquable : on garde un accent discret au survol mais
   plus de soulèvement, qui faisait croire à un lien. */
.apr-card:hover{ border-color:var(--gold-light); }
.apr-card:hover::before{ transform:scaleY(1); }
a.apr-card:hover{ transform:translateY(-4px); box-shadow:0 28px 56px rgb(var(--olive-rgb) / .15); }
.apr-card__num{ flex:0 0 auto; font-family:var(--serif); font-size:36px; line-height:1; color:var(--gold-light); font-weight:400; }
.apr-card:hover .apr-card__num{ color:var(--gold); }
.apr-card__body{ flex:1; min-width:0; }
.apr-card__title{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.1vw,25px); color:var(--olive); line-height:1.18; margin:2px 0 12px; }
.apr-card__intro{ color:var(--body); font-size:15px; line-height:1.65; margin:0 0 15px; }
.apr-card__list{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px; }
.apr-card__list li{ display:inline-flex; align-items:center; gap:7px; background:var(--band); border:1px solid var(--line); border-radius:30px; padding:6px 14px; font-size:13px; color:var(--ink); }
.apr-card__list li i{ color:var(--gold); font-size:10px; }
.apr-card__outro{ color:var(--muted); font-style:italic; font-size:14px; line-height:1.5; margin:0; }
@media (max-width:900px){
  .apr-blocks{ padding:74px 0; }
  .apr-blocks__grid{ grid-template-columns:1fr; gap:40px; }
  .apr-blocks__media{ position:static; }
  .apr-blocks__frame{ aspect-ratio:16/11; }
}
@media (max-width:560px){
  .apr-card{ flex-direction:column; gap:6px; padding:26px 24px; }
  .apr-card__num{ font-size:30px; }
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .v2-reveal,.v2-mask{ opacity:1!important; transform:none!important; clip-path:none!important; transition:none!important; }
  .v2-line > span{ transform:none!important; }
  .v2-hero__eyebrow,.v2-hero__sub,.v2-hero__actions{ opacity:1!important; transform:none!important; }
  .v2-scroll__line::after{ animation:none; }
  [data-parallax]{ transform:none!important; }
}

/* ============================================================
   GALERIE CLIQUABLE + VISIONNEUSE (lightbox)
   Le bouton d'agrandissement n'apparaît que lorsque le JS a pris
   la main (.is-lb-ready) : sans JS, la galerie reste une simple
   grille d'images, jamais un bouton mort. Il est aussi masqué
   dans l'aperçu de l'éditeur visuel pour ne pas voler le clic.
   ============================================================ */
.v2-gallery__btn{
  display:none;
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; padding:0; margin:0;
  border:0; background:transparent; cursor:zoom-in;
  -webkit-appearance:none; appearance:none;
}
.v2-gallery.is-lb-ready .v2-gallery__btn{ display:block; }
body.villa-yve-preview .v2-gallery__btn{ display:none !important; }

/* voile + pastille loupe, révélés au survol / au focus clavier */
.v2-gallery__btn::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(52,66,31,0) 45%, rgba(52,66,31,.34) 100%);
  opacity:0; transition:opacity .35s ease;
}
.v2-gallery__zoom{
  position:absolute; right:14px; bottom:14px;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.94); color:var(--slate);
  box-shadow:0 6px 18px rgba(52,66,31,.22);
  opacity:0; transform:translateY(8px) scale(.9);
  transition:opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
/* loupe dessinée en CSS : pas de dépendance à une police d'icônes */
.v2-gallery__zoom::before{
  content:''; width:13px; height:13px; border-radius:50%;
  border:2px solid currentColor; margin:-3px 0 0 -3px;
}
.v2-gallery__zoom::after{
  content:''; position:absolute; width:7px; height:2px; border-radius:2px;
  background:currentColor; transform:rotate(45deg); right:12px; bottom:12px;
}
.v2-gallery__btn:hover::before,
.v2-gallery__btn:focus-visible::before{ opacity:1; }
.v2-gallery__btn:hover .v2-gallery__zoom,
.v2-gallery__btn:focus-visible .v2-gallery__zoom{ opacity:1; transform:none; }
.v2-gallery__btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:18px; }
/* Le léger zoom de la photo au survol est porté par .v2-mosaic__item plus bas :
   l'ancien .v2-gallery__item n'existe plus dans le balisage depuis la mosaïque. */

/* ---------- La visionneuse ---------- */
.v2-lightbox{
  position:fixed; inset:0; z-index:100000; /* au-dessus du bandeau cookies (99999) */
  background:rgba(29,37,17,.93);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.v2-lightbox.is-open{ opacity:1; visibility:visible; }
.v2-lightbox__stage{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:70px 96px 46px;
}
.v2-lightbox__figure{
  margin:0; max-width:100%; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.v2-lightbox__img{
  display:block; max-width:100%; max-height:calc(100vh - 250px);
  width:auto; height:auto; object-fit:contain;
  border-radius:8px; background:var(--sand);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  opacity:0; transform:scale(.97);
  transition:opacity .34s ease, transform .34s cubic-bezier(.16,1,.3,1);
}
.v2-lightbox__img.is-shown{ opacity:1; transform:none; }
.v2-lightbox__cap{
  margin-top:18px; text-align:center;
  font-family:var(--sans); font-size:15px; line-height:1.5;
  color:rgba(255,255,255,.92); max-width:62ch;
}
.v2-lightbox__count{
  display:block; margin-top:7px;
  font-size:12.5px; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--gold-light);
}

/* boutons de la visionneuse */
.v2-lightbox__nav,.v2-lightbox__close{
  position:absolute; z-index:2;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.09); color:#fff;
  border-radius:50%; cursor:pointer; padding:0;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
  -webkit-appearance:none; appearance:none;
}
.v2-lightbox__nav:hover,.v2-lightbox__close:hover{ background:var(--gold); border-color:var(--gold); }
.v2-lightbox__nav:focus-visible,.v2-lightbox__close:focus-visible{ outline:3px solid var(--gold-light); outline-offset:3px; }
.v2-lightbox__nav{ top:50%; width:56px; height:56px; margin-top:-28px; }
.v2-lightbox__nav--prev{ left:26px; }
.v2-lightbox__nav--next{ right:26px; }
.v2-lightbox__nav:hover{ transform:scale(1.06); }
.v2-lightbox__nav[disabled]{ opacity:.28; cursor:default; }
.v2-lightbox__nav[disabled]:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.32); transform:none; }
/* chevrons dessinés en CSS */
.v2-lightbox__nav::before{
  content:''; width:13px; height:13px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
}
.v2-lightbox__nav--prev::before{ transform:rotate(-135deg); margin-left:4px; }
.v2-lightbox__nav--next::before{ transform:rotate(45deg); margin-right:4px; }
.v2-lightbox__close{ top:22px; right:26px; width:48px; height:48px; font-size:0; }
.v2-lightbox__close::before,.v2-lightbox__close::after{
  content:''; position:absolute; width:17px; height:2px; border-radius:2px; background:currentColor;
}
.v2-lightbox__close::before{ transform:rotate(45deg); }
.v2-lightbox__close::after{ transform:rotate(-45deg); }

/* pastilles de position (dans le flux, sous la légende : en absolu elles se
   posaient par-dessus le bas de la photo quand celle-ci était haute) */
.v2-lightbox__dots{
  display:flex; gap:9px; z-index:2;
  margin-top:18px; justify-content:center; flex-wrap:wrap;
}
.v2-lightbox__dot{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.5); background:transparent;
  transition:background .25s ease, transform .25s ease;
  -webkit-appearance:none; appearance:none;
}
.v2-lightbox__dot:hover{ background:rgba(255,255,255,.6); }
.v2-lightbox__dot.is-active{ background:var(--gold); border-color:var(--gold); transform:scale(1.25); }
.v2-lightbox__dot:focus-visible{ outline:2px solid var(--gold-light); outline-offset:3px; }

@media(max-width:900px){
  .v2-lightbox__stage{ padding:60px 14px 34px; }
  .v2-lightbox__img{ max-height:calc(100vh - 244px); }
  .v2-lightbox__nav{ width:44px; height:44px; margin-top:-22px; }
  .v2-lightbox__nav--prev{ left:10px; }
  .v2-lightbox__nav--next{ right:10px; }
  .v2-lightbox__close{ top:12px; right:12px; width:42px; height:42px; }
  .v2-lightbox__cap{ font-size:14px; margin-top:14px; }
  /* au doigt, la pastille loupe reste visible : pas de survol sur tactile */
  .v2-gallery__zoom{ opacity:1; transform:none; width:36px; height:36px; right:10px; bottom:10px; }
}

@media(prefers-reduced-motion:reduce){
  .v2-lightbox,.v2-lightbox__img,.v2-gallery__zoom,.v2-gallery__btn::before,  .v2-lightbox__nav,.v2-lightbox__close,.v2-lightbox__dot{ transition:none !important; }
}

/* Verrou de défilement pendant que la visionneuse est ouverte.
   position:fixed + top négatif (posé en JS) : la page ne saute pas au retour. */
body.villa-lb-open{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }

/* Le bouton « rouvrir le bandeau cookies » du plugin est en z-index 99998 et
   passait donc par-dessus la visionneuse : on le masque pendant la lecture. */
body.villa-lb-open .yv-cb-reopen{ display:none !important; }

/* ============================================================
   BLOC SIGNATURE - PILE D'ÉTAPES « PIÈCE PAR PIÈCE »
   Le cadre se fige à l'écran pendant que l'on défile : les photos glissent
   vers le haut et se remplacent, le texte glisse par-dessus avec un léger
   décalage. Une frise numérotée indique où l'on en est.

   Deux mises en page dans ce fichier :
   1. par défaut, une LISTE simple (photo au-dessus du texte). C'est ce que
      voient le mobile, les navigateurs sans JS, les personnes qui ont réduit
      les animations, et l'aperçu de l'éditeur visuel - où tout doit rester
      cliquable pour sélectionner un champ.
   2. sous .is-ready, posée par v2.js quand le contexte s'y prête, la pile
      animée. Rien ne dépend du JS pour être LISIBLE : il ne fait qu'ajouter
      l'effet par-dessus une page déjà complète.

   Ancienne version : chaque photo était en position:sticky dans sa propre
   rangée. La course utile valait l'écart entre la hauteur du texte et celle
   de la photo, soit 96 à 180 px ici : la photo se collait un instant puis se
   décrochait: on lisait un bug, pas une intention.
   ============================================================ */
.v2-steps{ background:var(--white); padding:var(--sp-lg) 0; }
.v2-steps__track{ list-style:none; margin:0; padding:0; }
.v2-steps__plate{ display:none; }

/* --- 1. Repli : liste simple --- */
.v2-steps__item{
  display:grid; grid-template-columns:1.04fr 1fr; gap:72px;
  align-items:center; padding-bottom:var(--sp-md);
}
.v2-steps__item:last-child{ padding-bottom:0; }
.v2-steps__media{ margin:0; }
.v2-steps__frame{
  border-radius:20px; overflow:hidden; aspect-ratio:4/3.1;
  background:var(--sand); box-shadow:var(--shadow-3);
}
.v2-steps__frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.v2-steps__num{
  display:block; font-family:var(--serif); font-weight:400; font-size:42px;
  line-height:1; color:var(--gold-light); margin:0 0 18px;
}
.v2-steps__copy .seo-h3{ margin-bottom:16px; }
.v2-steps__copy .v2-lead{ max-width:46ch; }

/* Rangée sans photo : rien à faire glisser, elle se lit centrée sous la pile. */
.v2-steps__note{ max-width:72ch; margin:var(--sp-md) auto 0; text-align:center; }
.v2-steps__note .v2-lead{ max-width:none; }

/* --- 2. Pile animée --- */
.v2-steps.is-ready{
  /* hauteur de la scène + longueur de défilement accordée à chaque étape */
  --v2-stage-h: min(600px, calc(100vh - 170px));
  --v2-step-len: max(430px, 64vh);
}
.v2-steps.is-ready .v2-steps__scroll{
  position:relative;
  height:calc(var(--v2-steps) * var(--v2-step-len) + var(--v2-stage-h));
}
.v2-steps.is-ready .v2-steps__stage{
  position:sticky;
  /* centrée dans la place libre sous le header fixe (90px) */
  top:calc(90px + (100vh - 90px - var(--v2-stage-h)) / 2);
  height:var(--v2-stage-h);
}
.v2-steps.is-ready .v2-steps__track{ position:absolute; inset:0; }
.v2-steps.is-ready .v2-steps__item{
  position:absolute; inset:0; padding-bottom:0; align-items:center;
  /* visibility : l'étape sortie quitte l'ordre de tabulation et la lecture
     d'écran une fois la transition finie, jamais pendant. */
  visibility:hidden; transition:visibility 0s linear .85s;
}
.v2-steps.is-ready .v2-steps__item.is-active{ visibility:visible; transition-delay:0s; z-index:2; }
.v2-steps.is-ready .v2-steps__media{ height:100%; display:flex; align-items:center; }
.v2-steps.is-ready .v2-steps__frame{
  width:100%; max-height:100%; aspect-ratio:4/3.4;
  box-shadow:none; background:none; /* le fond et l'ombre sont portés par la plaque */
}
.v2-steps.is-ready .v2-steps__plate{
  display:block; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:calc((100% - 72px) * 1.04 / 2.04); aspect-ratio:4/3.4; max-height:100%;
  border-radius:20px; background:var(--sand); box-shadow:var(--shadow-3);
}
/* Les photos glissent DANS le cadre : celui-ci ne bouge jamais. */
.v2-steps.is-ready .v2-steps__frame img{
  transition:transform .85s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}
.v2-steps.is-ready .v2-steps__item.is-next .v2-steps__frame img{ transform:translateY(16%) scale(1.06); opacity:0; }
.v2-steps.is-ready .v2-steps__item.is-prev .v2-steps__frame img{ transform:translateY(-16%) scale(1.06); opacity:0; }
/* Fondu symétrique pour les photos : à durées dissymétriques, la plaque de fond
   apparaîtrait une fraction de seconde entre les deux images. */
.v2-steps.is-ready .v2-steps__item.is-active .v2-steps__frame img{ transform:none; opacity:1; }
/* Le texte glisse par-dessus, un cheveu après la photo.
   Les deux durées d'opacité sont volontairement dissymétriques : le texte
   sortant s'efface vite (.28s), l'entrant arrive un peu après (.16s de retard).
   À durées égales, les deux paragraphes se superposaient en pleine lisibilité
   au milieu de la transition, et l'on croyait à un défaut d'affichage. */
.v2-steps.is-ready .v2-steps__copy{
  transition:transform .8s cubic-bezier(.22,1,.36,1) .09s, opacity .28s ease;
  padding-bottom:58px; /* réserve la place de la frise, ancrée en bas de la scène */
}
.v2-steps.is-ready .v2-steps__item.is-next .v2-steps__copy{ transform:translateY(44px); opacity:0; }
.v2-steps.is-ready .v2-steps__item.is-prev .v2-steps__copy{ transform:translateY(-44px); opacity:0; }
.v2-steps.is-ready .v2-steps__item.is-active .v2-steps__copy{
  transform:none; opacity:1;
  transition:transform .8s cubic-bezier(.22,1,.36,1) .09s, opacity .5s ease .16s;
}

/* Frise numérotée, sous la colonne de texte.
   Le display:flex ci-dessous l'emporte sur le display:none que le navigateur
   attache à [hidden] : sans cette ligne, la frise reste posée hors écran en
   repli mobile et fait déborder la page de 22px. */
.v2-steps__nav[hidden]{ display:none; }
.v2-steps__nav{
  position:absolute; right:0; bottom:0; width:calc((100% - 72px) / 2.04);
  display:flex; flex-direction:column; gap:14px; z-index:3;
}
.v2-steps__rail{ display:block; height:2px; background:var(--sand); border-radius:2px; overflow:hidden; }
.v2-steps__railfill{
  display:block; height:100%; width:0; background:var(--gold);
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.v2-steps__dots{ list-style:none; margin:0; padding:0; display:flex; gap:22px; }
.v2-steps__dot{
  border:0; background:none; padding:2px 0; cursor:pointer;
  font-family:var(--serif); font-size:16px; line-height:1; letter-spacing:.04em;
  color:var(--gold-light); transition:color .3s ease, opacity .3s ease; opacity:.75;
}
.v2-steps__dot:hover{ color:var(--gold); opacity:1; }
.v2-steps__dot.is-active{ color:var(--olive); opacity:1; }
.v2-steps__dot:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; border-radius:6px; }

@media (max-width:1100px){
  .v2-steps.is-ready{ --v2-stage-h: min(600px, calc(100vh - 150px)); }
  .v2-steps__item{ gap:48px; }
  .v2-steps.is-ready .v2-steps__plate{ width:calc((100% - 48px) * 1.04 / 2.04); }
  .v2-steps__nav{ width:calc((100% - 48px) / 2.04); }
}
@media (max-width:900px){
  /* La pile n'est jamais posée sous 901px (v2.js), on ne garde que la liste. */
  .v2-steps{ padding:var(--sp-md) 0; }
  .v2-steps__item{ grid-template-columns:1fr; gap:26px; padding-bottom:var(--sp-md); }
  .v2-steps__frame{ aspect-ratio:16/10; }
  .v2-steps__num{ font-size:32px; margin-bottom:12px; }
  .v2-steps__note{ margin-top:var(--sp-sm); }
}
@media (prefers-reduced-motion:reduce){
  /* Ni collage ni glissement : la liste simple, qui dit exactement la même chose. */
  .v2-steps .v2-mask{ clip-path:none; transition:none; }
}

/* ============================================================
   BANDEAU PHOTO PLEINE LARGEUR
   Une respiration entre les sections et la FAQ. La photo reste immobile
   pendant que la page défile : c'est un simple background-attachment:fixed,
   sans JS ni parallax calculé au scroll.

   Le fond fixe n'est posé que sur pointeur fin : iOS le rend en saccades (il
   redimensionne le fond à chaque frame) et le tactile n'y gagne rien. Ailleurs
   la photo défile normalement, le bandeau reste identique.
   Pas d'aspect-ratio ici : une hauteur en vh suffit, et l'association des deux
   ferait déborder la page en largeur (règle CLAUDE.md n°13).
   Aucun voile, aucun texte par-dessus : la photo se suffit.
   ============================================================ */
.v2-band{ height:60vh; min-height:320px; max-height:760px; overflow:hidden; }
.v2-band__img{
  height:100%; width:100%;
  background-color:var(--sand);
  background-image:var(--band-lg);
  /* 62% et non 50% : avec un fond fixe, l'image est dimensionnée sur le viewport
     et le bandeau n'en montre qu'une tranche. Descendre le cadrage fait entrer
     le sujet dans cette tranche plutôt que les plafonds et le haut des murs. */
  background-position:center 62%;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
}
/* Retour au défilement normal sur tactile : iOS rend le fond fixe en saccades,
   et le tactile n'y gagne rien. Formulé en négatif (on retire l'effet) plutôt
   qu'en positif sur (pointer:fine) : ce dernier exclut aussi les navigateurs qui
   ne déclarent aucun pointeur, dont les rendus automatisés. */
@media (pointer:coarse){
  .v2-band__img{ background-attachment:scroll; }
}
@media (max-width:900px){
  /* Plus court sur mobile : 60vh d'une photo sans texte, sur un écran étroit,
     c'est un écran entier de décor que le visiteur doit franchir au doigt. */
  .v2-band{ height:42vh; min-height:240px; }
  .v2-band__img{ background-attachment:scroll; background-image:var(--band-sm); }
}

/* Lien « toutes les questions » sous la FAQ de l'accueil. */
.v2-faq__more{ margin:34px 0 0; text-align:center; }

/* ============================================================
   BLOC SIGNATURE - MANIFESTE
   Le message aux familles était un second bandeau olive pleine largeur,
   identique à l'appel final : la page paraissait se terminer deux fois.
   Ici, une respiration claire et centrée, sur fond crème. La couleur olive
   redevient exclusive au dernier appel à l'action.
   ============================================================ */
.v2-manifesto{ background:var(--cream); padding:var(--sp-xl) 0; text-align:center; }
.v2-manifesto__inner{ max-width:900px; }
.v2-manifesto__rule{
  display:block; width:0; height:1px; margin:0 auto 40px; background:var(--gold);
  transition:width .9s cubic-bezier(.16,1,.3,1) .1s;
}
.v2-manifesto.is-in .v2-manifesto__rule{ width:72px; }
.v2-manifesto .v2-kicker{ margin-bottom:20px; }
.v2-manifesto__text{
  font-family:var(--serif); font-weight:300; color:var(--olive);
  font-size:clamp(28px,4vw,52px); line-height:1.14; letter-spacing:-.5px; margin:0;
}
.v2-manifesto__sub{
  margin:30px auto 0; max-width:52ch; color:var(--body);
  font-size:17px; line-height:1.8;
  opacity:0; transform:translateY(14px);
  transition:opacity .8s ease .45s, transform .8s cubic-bezier(.16,1,.3,1) .45s;
}
.v2-manifesto__sub p{ margin:0 0 1em; }
.v2-manifesto__sub p:last-child{ margin-bottom:0; }
.v2-manifesto.is-in .v2-manifesto__sub{ opacity:1; transform:none; }
/* Signature manuscrite : rentabilise la police --script, chargée sur chaque
   page et utilisée nulle part ailleurs. */
.v2-manifesto__sign{
  font-family:var(--script); color:var(--slate-2);
  font-size:clamp(16px,1.7vw,20px); line-height:1.6; margin:30px 0 0;
  opacity:0; transition:opacity .9s ease .72s;
}
.v2-manifesto.is-in .v2-manifesto__sign{ opacity:1; }
.v2-manifesto__cta{ margin-top:32px; }

@media (max-width:720px){
  .v2-manifesto{ padding:var(--sp-lg) 0; }
  .v2-manifesto__rule{ margin-bottom:28px; }
  .v2-manifesto__sub{ margin-top:24px; font-size:16px; }
}
@media (prefers-reduced-motion:reduce){
  .v2-manifesto__rule{ width:72px; transition:none; }
  .v2-manifesto__sub,.v2-manifesto__sign{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   BLOC SIGNATURE - MOSAÏQUE ÉDITORIALE
   Grille de 6 colonnes, cycle de 7 photos : 4+2 / 2+2+2 / 2+4. Chaque rangée
   fait exactement 6 colonnes, donc jamais de vignette orpheline. Le cadre
   s'élargit à --wrap-wide : c'est le seul endroit de la page qui dépasse les
   1200 px, ce qui crée la rupture recherchée sans jamais employer 100vw
   (donc sans barre de défilement fantôme).
   ============================================================ */
.v2-mosaic{ background:var(--white); padding:var(--sp-lg) 0; }
.v2-mosaic__title{ text-align:center; margin-bottom:56px; }
.v2-mosaic__wrap{ max-width:var(--wrap-wide); margin:0 auto; padding:0 32px; width:100%; }
.v2-mosaic__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:34px 22px; }
.v2-mosaic__item{ margin:0; grid-column:span 2; }
.v2-mosaic__item:nth-child(7n+1),
.v2-mosaic__item:nth-child(7n+7){ grid-column:span 4; }
/* la dernière photo s'étire jusqu'au bord droit : la rangée finale reste pleine */
.v2-mosaic__item:last-child{ grid-column-end:-1; }

.v2-mosaic__media{
  position:relative; border-radius:18px; overflow:hidden;
  background:var(--sand); box-shadow:var(--shadow-2);
  aspect-ratio:1/1;
}
.v2-mosaic__item:nth-child(7n+1) .v2-mosaic__media,
.v2-mosaic__item:nth-child(7n+7) .v2-mosaic__media{ aspect-ratio:3/2; }
.v2-mosaic__item:nth-child(7n+2) .v2-mosaic__media,
.v2-mosaic__item:nth-child(7n+6) .v2-mosaic__media{ aspect-ratio:4/5; }
.v2-mosaic__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.v2-mosaic__item:has(.v2-gallery__btn:hover) .v2-mosaic__media img{ transform:scale(1.04); }
/* min-height : aligne les légendes d'une colonne à l'autre malgré les
   longueurs de texte différentes. */
.v2-mosaic__cap{ font-size:14px; line-height:1.5; color:var(--muted); margin-top:14px; min-height:2.2em; }

@media (max-width:900px){
  .v2-mosaic{ padding:var(--sp-md) 0; }
  .v2-mosaic__wrap{ padding:0 24px; }
  .v2-mosaic__grid{ grid-template-columns:repeat(2,1fr); gap:24px 16px; }
  .v2-mosaic__item,
  .v2-mosaic__item:nth-child(7n+1),
  .v2-mosaic__item:nth-child(7n+7){ grid-column:span 1; }
  /* une grande en tête de chaque cycle de 5, le reste en carrés */
  .v2-mosaic__item:nth-child(5n+1){ grid-column:span 2; }
  .v2-mosaic__media,
  .v2-mosaic__item:nth-child(7n+2) .v2-mosaic__media,
  .v2-mosaic__item:nth-child(7n+6) .v2-mosaic__media{ aspect-ratio:1/1; }
  .v2-mosaic__item:nth-child(5n+1) .v2-mosaic__media{ aspect-ratio:3/2; }
  .v2-mosaic__cap{ font-size:13px; min-height:0; }
}
@media (prefers-reduced-motion:reduce){
  .v2-mosaic .v2-mask{ clip-path:none; transition:none; }
  .v2-mosaic__media img{ transition:none; }
  .v2-mosaic__item:has(.v2-gallery__btn:hover) .v2-mosaic__media img{ transform:none; }
}

/* ============================================================
   BLOCS AJOUTÉS PAR LA CLIENTE (inc/villa-blocks.php)
   Les 11 types de blocs de l'éditeur visuel, au dessin de la Villa. Tout passe
   par les variables de la charte ; seules les couleurs « Personnalisé »
   choisies dans l'éditeur arrivent en variable locale (--vb-bg, --vb-btn).
   Règles tenues : photos pleine couleur, jamais de texte posé dessus ; survol
   réservé aux cartes réellement cliquables ; dernière rangée des grilles
   centrée, jamais d'orpheline collée à gauche.
   ============================================================ */
/* Chaque bloc porte son propre air, haut et bas. Une règle « pas de marge entre
   deux blocs voisins » a été essayée : elle collait le titre d'un bloc au bord du
   précédent dès que celui-ci avait un fond (photo, couleur personnalisée). */
.vb{ padding:var(--sp-md) 0; }
.vb-bg--white{ background:var(--white); }
.vb-bg--cream{ background:var(--cream); }
.vb-bg--band{ background:var(--band); }
.vb-bg--gold{ background:var(--gold-light); }
.vb-bg--olive{ background:var(--olive); }
.vb-bg--olive_dark{ background:var(--olive-dk); }
.vb-bg--custom{ background:var(--vb-bg); }

.vb-head{ max-width:760px; margin:0 auto 56px; text-align:center; }
.vb-head .v2-h2{ margin-bottom:14px; }
.vb-sub{ color:var(--body); font-size:17px; line-height:1.7; margin:0; }

/* Texte courant saisi dans l'éditeur (éditeur riche) */
.vb-rich{ color:var(--body); font-size:16.5px; line-height:1.8; }
.vb-rich p{ margin:0 0 1em; }
.vb-rich h3{ font-family:var(--serif); font-weight:400; color:var(--slate); font-size:24px; margin:1.4em 0 .5em; }
.vb-rich ul, .vb-rich ol{ margin:0 0 1em; padding-left:1.3em; }
.vb-rich li{ margin:.3em 0; }
.vb-rich a{ color:var(--gold-dk); text-decoration:underline; text-underline-offset:3px; }
.vb-rich > :last-child{ margin-bottom:0; }

/* Fonds sombres : le texte passe en clair */
.vb--dark .v2-h2, .vb--dark .vb-card__title, .vb--dark .vb-cta__title, .vb--dark .vb-num strong{ color:var(--white); }
.vb--dark .vb-sub, .vb--dark .vb-rich, .vb--dark .v2-lead, .vb--dark .vb-card__text, .vb--dark .vb-cta__text, .vb--dark .vb-num span{ color:color-mix(in srgb, var(--white) 86%, transparent); }
.vb--dark .v2-kicker{ color:var(--gold-light); }
.vb--dark .vb-rich a{ color:var(--gold-light); }

/* Boutons */
.vb-btn{ margin-top:30px; --vb-btn:var(--olive); --vb-btn-on:var(--white); background:var(--vb-btn); color:var(--vb-btn-on); border-color:var(--vb-btn); }
.vb-btn--olive{ --vb-btn:var(--olive); --vb-btn-on:var(--white); }
.vb-btn--gold{ --vb-btn:var(--gold); --vb-btn-on:var(--white); }
.vb-btn--white{ --vb-btn:var(--white); --vb-btn-on:var(--olive); }
.vb-btn--outline{ background:transparent; color:var(--vb-btn); }
.vb-btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-1); }
.vb-btn--outline:hover{ background:var(--vb-btn); color:var(--vb-btn-on); }

/* --- Texte + image --- */
.vb-ti{ display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center; }
.vb-ti--noimg{ grid-template-columns:1fr; max-width:760px; }
.vb-ti__media{ position:relative; margin:0; border-radius:20px; overflow:hidden; aspect-ratio:4/3.4; box-shadow:var(--shadow-2); background:var(--sand); }
.vb-ti__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.vb-ti__badge{ position:absolute; left:20px; bottom:20px; display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:16px; background:var(--white); color:var(--ink); box-shadow:var(--shadow-1); font-size:14px; }
.vb-ti__badge strong{ font-family:var(--serif); font-weight:400; font-size:26px; color:var(--slate); line-height:1; }
.vb-ti__badge i{ color:var(--gold); }
.vb-ti__copy .v2-lead{ max-width:52ch; }

/* --- Cartes --- */
.vb-cards{ --vb-cols:3; --vb-gap:40px; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--vb-gap); }
.vb-cols--2{ --vb-cols:2; } .vb-cols--3{ --vb-cols:3; } .vb-cols--4{ --vb-cols:4; --vb-gap:28px; }
.vb-cards > *{ flex:0 1 calc((100% - (var(--vb-cols) - 1) * var(--vb-gap)) / var(--vb-cols)); min-width:0; }
.vb-card{ display:flex; flex-direction:column; background:var(--white); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-1); color:inherit; text-decoration:none; }
.vb-card__media{ aspect-ratio:16/11; background:var(--sand); overflow:hidden; }
.vb-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.vb-card__body{ padding:26px 28px 30px; display:flex; flex-direction:column; flex:1; }
.vb-card__num{ font-family:var(--serif); font-size:34px; line-height:1; color:var(--gold-light); margin-bottom:12px; }
.vb-card__icon{ font-size:24px; color:var(--gold); margin-bottom:14px; }
.vb-card__title{ font-family:var(--serif); font-weight:400; color:var(--ink); font-size:23px; line-height:1.25; margin:0 0 10px; transition:color .3s; }
.vb-card__text{ color:var(--muted); font-size:15px; line-height:1.7; margin:0; }
.vb-card__more{ display:inline-flex; align-items:center; gap:9px; margin-top:auto; padding-top:18px; font-size:14px; font-weight:600; color:var(--slate-2); transition:gap .3s, color .3s; }
a.vb-card.card-clickable{ transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
a.vb-card.card-clickable:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); }
a.vb-card.card-clickable:hover .vb-card__title{ color:var(--gold); }
a.vb-card.card-clickable:hover .vb-card__more{ gap:15px; color:var(--gold); }
a.vb-card.card-clickable:hover .vb-card__media img{ transform:scale(1.04); }
a.vb-card.card-clickable:focus-visible{ outline:3px solid var(--gold); outline-offset:5px; }
/* variantes */
.vb-cards--featured > :first-child{ flex-basis:100%; flex-direction:row; }
.vb-cards--featured > :first-child .vb-card__media{ flex:0 0 55%; aspect-ratio:auto; min-height:320px; }
.vb-cards--featured > :first-child .vb-card__body{ justify-content:center; padding:40px 44px; }
.vb-cards--featured > :first-child .vb-card__title{ font-size:clamp(26px,2.6vw,34px); }
.vb-cards--horizontal > *{ flex-basis:100%; flex-direction:row; }
.vb-cards--horizontal .vb-card__media{ flex:0 0 34%; aspect-ratio:auto; min-height:200px; }
.vb-cards--minimal .vb-card, .vb-cards--steps .vb-card{ box-shadow:none; background:transparent; border-top:1px solid var(--line); border-radius:0; }
.vb-cards--minimal .vb-card__body, .vb-cards--steps .vb-card__body{ padding:26px 0 0; }
.vb--dark .vb-card{ background:color-mix(in srgb, var(--white) 8%, transparent); box-shadow:none; }
.vb--dark .vb-cards--minimal .vb-card, .vb--dark .vb-cards--steps .vb-card{ background:transparent; border-top-color:color-mix(in srgb, var(--white) 25%, transparent); }

/* --- Appel à l'action --- */
.vb--cta{ text-align:center; }
.vb-cta__inner{ max-width:760px; }
.vb-cta__title{ font-family:var(--serif); font-weight:300; font-size:clamp(30px,4vw,50px); line-height:1.12; color:var(--slate); margin:0 0 18px; letter-spacing:-.4px; }
.vb-cta__text{ color:var(--body); font-size:17px; line-height:1.75; margin:0 auto; max-width:50ch; }
/* Avec photo : la photo occupe une moitié, pleine couleur, et le texte l'autre
   moitié sur le vert olive. Jamais de texte posé sur la photo. */
.vb.vb-cta--photo{ display:grid; grid-template-columns:1fr 1fr; padding:0; background:var(--olive); text-align:left; }
.vb-cta--photo .vb-cta__photo{ min-height:420px; background-size:cover; background-position:center; }
.vb-cta--photo .vb-cta__inner{ align-self:center; margin:0; padding:var(--sp-md) clamp(24px,6vw,90px); }
.vb-cta--photo .vb-cta__text{ margin:0; }

/* --- Avis --- */
.vb-testis{ display:flex; flex-wrap:wrap; justify-content:center; gap:32px; }
.vb-testi{ flex:0 1 calc((100% - 64px) / 3); min-width:260px; margin:0; background:var(--white); border-radius:18px; padding:32px 30px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:18px; }
.vb-testi blockquote{ margin:0; font-family:var(--serif); font-size:19px; line-height:1.55; color:var(--ink); }
.vb-testi__stars{ color:var(--gold); font-size:14px; letter-spacing:3px; }
.vb-testi figcaption{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.vb-testi__photo{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.vb-testi figcaption strong{ display:block; color:var(--slate); font-weight:600; font-size:15px; }
.vb-testi figcaption em{ display:block; font-style:normal; color:var(--muted); font-size:13.5px; }

/* --- FAQ (reprend .v2-faq__*) --- */
.vb--faq .v2-faq__list{ max-width:900px; }
.vb--faq.vb-bg--band .v2-faq__item:not([open]){ background:var(--white); }

/* --- Galerie --- */
.vb-gal{ display:grid; grid-template-columns:repeat(var(--vb-cols,3), 1fr); gap:20px; }
.vb-gal.vb-cols--2{ --vb-cols:2; } .vb-gal.vb-cols--4{ --vb-cols:4; }
.vb-gal__item{ margin:0; border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:var(--sand); }
.vb-gal__item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* --- Carte, vidéo --- */
.vb-map, .vb-video{ max-width:1000px; margin:0 auto; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-1); background:var(--sand); }
.vb-map iframe{ display:block; width:100%; border:0; }
.vb-video{ aspect-ratio:16/9; }
.vb-video iframe, .vb-video video{ display:block; width:100%; height:100%; border:0; object-fit:cover; }

/* --- Texte --- */
.vb-text--narrow{ max-width:760px; }
.vb-text .v2-h2{ margin-bottom:22px; }

/* --- Équipe --- */
.vb-team{ display:flex; flex-wrap:wrap; justify-content:center; gap:40px; --vb-cols:3; --vb-gap:40px; }
.vb-team.vb-cols--4{ --vb-cols:4; --vb-gap:30px; gap:30px; }
.vb-team > *{ flex:0 1 calc((100% - (var(--vb-cols) - 1) * var(--vb-gap)) / var(--vb-cols)); text-align:center; }
.vb-member__photo{ width:min(220px, 70%); aspect-ratio:1; margin:0 auto 20px; border-radius:50%; overflow:hidden; background:var(--sand); box-shadow:var(--shadow-1); }
.vb-member__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.vb-member__role{ color:var(--gold-dk); font-size:13px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; margin:0 0 12px; }
.vb--dark .vb-member__role{ color:var(--gold-light); }

/* --- Chiffres clés --- */
.vb-nums{ display:flex; flex-wrap:wrap; justify-content:center; gap:40px 64px; }
.vb-num{ text-align:center; min-width:160px; }
.vb-num strong{ display:block; font-family:var(--serif); font-weight:300; font-size:clamp(44px,5vw,64px); line-height:1; color:var(--slate); }
.vb-num span{ display:block; margin-top:10px; color:var(--body); font-size:15px; }

@media (max-width:1000px){
  .vb-cols--4{ --vb-cols:2; }
  .vb-team.vb-cols--4{ --vb-cols:2; }
  .vb-testi{ flex-basis:calc((100% - 32px) / 2); }
}
@media (max-width:900px){
  .vb-ti{ grid-template-columns:1fr; gap:36px; }
  .vb-ti--left .vb-ti__media{ order:0; }
  .vb-cols--3{ --vb-cols:2; }
  .vb-team.vb-cols--3{ --vb-cols:2; }
  .vb-cta--photo{ grid-template-columns:1fr; }
  .vb-cta--photo .vb-cta__photo{ min-height:260px; }
  .vb-cards--featured > :first-child, .vb-cards--horizontal > *{ flex-direction:column; }
  .vb-cards--featured > :first-child .vb-card__media, .vb-cards--horizontal .vb-card__media{ flex-basis:auto; aspect-ratio:16/11; min-height:0; }
  .vb-gal{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .vb-cols--2, .vb-cols--3, .vb-cols--4, .vb-team.vb-cols--3, .vb-team.vb-cols--4{ --vb-cols:1; }
  .vb-testi{ flex-basis:100%; }
  .vb-gal{ grid-template-columns:1fr 1fr; gap:10px; }
  .vb-head{ margin-bottom:36px; }
}
@media (prefers-reduced-motion:reduce){
  a.vb-card.card-clickable, .vb-card__media img, .vb-btn{ transition:none; }
  a.vb-card.card-clickable:hover, .vb-btn:hover{ transform:none; }
  a.vb-card.card-clickable:hover .vb-card__media img{ transform:none; }
}