/* ============================================================
   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; }
.v2-hero__title{ 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:130px 0 120px; }
.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:120px 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; }
.v2-card:hover .v2-card__title{ color:var(--gold); }

/* ============================================================
   BANDE FAMILLES (parallax feuillage)
   ============================================================ */
.v2-band{ position:relative; background:var(--olive); padding:140px 0; overflow:hidden; text-align:center; }
.v2-band__bg{ position:absolute; inset:-15% 0; background:url(../img/deco-gold.webp) center/cover; opacity:.18; }
.v2-band__inner{ position:relative; z-index:1; max-width:720px; }
.v2-band .v2-lead{ margin:0 auto; }
.v2-band .v2-link{ justify-content:center; }

/* ============================================================
   LA MAISON (collage parallax)
   ============================================================ */
.v2-house{ background:var(--white); padding:130px 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:130px 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:130px 0; }
.v2-gallery__title{ text-align:center; margin-bottom:60px; }
.v2-gallery__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.v2-gallery__item{ margin:0; }
.v2-gallery__media{ position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden; background:var(--sand); box-shadow:0 22px 46px rgba(52,66,31,.14); }
/* l'image est plus haute que son cadre : elle peut « parallaxer » sans laisser de vide */
.v2-gallery__media img{ position:absolute; top:-9%; left:0; width:100%; height:118%; object-fit:cover; }
.v2-gallery__cap{ font-size:14px; color:var(--body); margin-top:15px; }

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

/* ============================================================
   FAQ
   ============================================================ */
.v2-faq{ background:var(--white); padding:110px 0 130px; }
.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:150px 0 156px; 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-gallery__grid{ grid-template-columns:repeat(2,1fr); }
  .v2-intro__media,.v2-mission__media{ aspect-ratio:16/10; }
}
@media (max-width:720px){
  .v2-hero__inner{ padding:100px 18px; }
  .v2-intro,.v2-values,.v2-house,.v2-mission,.v2-gallery,.v2-faq{ padding:74px 0; }
  .v2-band,.v2-cta{ padding:86px 0; }
  .v2-values__grid{ grid-template-columns:1fr; gap:40px; }
  .v2-amen{ grid-template-columns:repeat(3,1fr); gap:22px 12px; }
  .v2-gallery__grid{ gap:16px; }
  .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:96px 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:110px 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-feature{ padding:70px 0; }
  .v2-vintro{ padding:64px 0 30px; }
  .v2-lb{ padding:74px 0; }
  .v2-lb__card{ padding:32px 28px; }
}

/* ============================================================
   CONTACT (style moderne)
   ============================================================ */
.v2-contact{ background:var(--band); padding:100px 0 120px; }
.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-contact{ padding:70px 0 80px; }
  .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:70px 0 120px; }
.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 */
  .v2-gallery__grid{ align-items:start; column-gap:32px; row-gap:22px; }
  .v2-gallery__grid > .v2-gallery__item:nth-child(3n+2){ margin-top:64px; }
  .v2-gallery__grid > .v2-gallery__item:nth-child(3n+3){ margin-top:30px; }
}
/* hauteurs variées -> effet masonry (l'image est recadrée via object-fit:cover) */
.v2-gallery__item:nth-child(3n+1) .v2-gallery__media{ aspect-ratio:4/5; }
.v2-gallery__item:nth-child(3n+2) .v2-gallery__media{ aspect-ratio:4/3; }
.v2-gallery__item:nth-child(3n+3) .v2-gallery__media{ aspect-ratio:1/1; }

/* ============================================================
   À 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:hover{ transform:translateY(-4px); box-shadow:0 28px 56px rgba(52,66,31,.15); border-color:var(--gold-light); }
.apr-card:hover::before{ transform:scaleY(1); }
.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; }
}
