/* =========================================
   Base & Variables
========================================= */
:root{
  --brand: #1f3560;       /* bleu profond */
  --brand-2: #e7a7bf;     /* rose pâle */
  --ink: #122033;         /* texte principal */
  --muted: #5c6a7a;       /* texte secondaire */
  --bg: #ffffff;          /* fond */
  --card: #ffffff;        /* carte */
  --ring: #e4e9f1;        /* bordures */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(31,53,96,.10);
  --space: clamp(14px, 4vw, 28px);
  --sticky-top: 0px;      /* bandeau fixe retiré */
  --header-h: 68px;
  --anchor-offset: calc(var(--sticky-top) + var(--header-h) + 6px);
}

/* Scroll anchors offset sous header sticky */
[id]{ scroll-margin-top: var(--anchor-offset, 90px); }

/* Reset light */
*, *::before, *::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.55;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
::selection{ background: rgba(110,159,232,.3) }

/* Containers & sections */
.container{ width:min(1120px, 100% - 2*var(--space)); margin-inline:auto; }
.container.narrow{ width:min(880px, 100% - 2*var(--space)); }
.section{ padding: clamp(28px, 7vw, 72px) 0; }
.section.alt{ background: linear-gradient(180deg,#fff 0%, #f7f9fc 100%); }

/* Typography helpers */
h1,h2,h3{ line-height:1.2; margin:0 0 .5em }
h1{ font-size: clamp(28px, 5vw, 44px) }
h2{ font-size: clamp(22px, 3.6vw, 30px) }
h3{ font-size: clamp(18px, 2.6vw, 20px) }
.lead{ font-size: clamp(16px, 2.2vw, 18px); color: var(--muted) }
.muted{ color: var(--muted) }
.big{ font-size: 1.08rem }
.accent{ color: var(--brand) }

/* Cards / Chips / Buttons */
.card{
  border:1px solid var(--ring);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: clamp(16px, 2.2vw, 22px);
}
.chip{
  display:inline-flex; align-items:center; gap:8px; line-height:1;
  border:1px solid var(--ring);
  background:#fff; color:var(--ink);
  padding:10px 12px; border-radius:999px; font-weight:700; text-decoration:none; cursor:pointer
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; min-height:44px; line-height:1;
  border-radius:999px; padding:12px 18px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  background: linear-gradient(135deg, #1f3560, #6e9fe8); color:#fff; font-weight:800;
  box-shadow: 0 10px 24px rgba(31,53,96,.22);
}
.btn:hover{ filter: brightness(1.03) }
.btn-outline{
  background:#fff; color: var(--brand); border-color: var(--ring); box-shadow: var(--shadow);
}
.btn-small{ padding:10px 14px; min-height:38px }

/* Links styled as text buttons */
.link{ font-weight:800; text-decoration:none; border-bottom:2px solid transparent; }
.link:hover{ border-color: currentColor }

/* Ripple (effect container) */
.ripple{ position:relative; overflow:hidden; }

/* Lists tidy */
ul{ padding-left: 1.1em }
ul.clean{ list-style:none; padding:0; margin:0 }

/* Images */
.img-frame{ border:1px solid var(--ring); border-radius:16px; overflow:hidden }
.img-wide img{ width:100%; height:auto }

/* Reveal animation */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease }
.reveal.is-revealed{ opacity:1; transform:none }

/* =========================================
   HEADER v3
========================================= */
.site-header.v3{
  position: sticky; top: var(--sticky-top);
  z-index:25; backdrop-filter: blur(10px);
  background: rgba(255,255,255,.86);
  border-bottom:1px solid var(--ring);
  transition: box-shadow .2s ease, background .2s ease;
}
.site-header.v3.scrolled{ box-shadow: 0 6px 20px rgba(0,0,0,.06); background:#fff; }
.site-header.v3 .nav-row{
  display:flex; align-items:center; justify-content:space-between;
  min-height: var(--header-h);
}
.site-header.v3 .brand{ display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit }
.site-header.v3 .logo{ width:36px; height:36px }
.site-header.v3 .brand-text{ font-weight:800 }
.site-header.v3 .brand-sub{ display:none; color:var(--muted); font-weight:600 }
.site-nav.v3{ display:flex; gap:18px; align-items:center }
.site-nav.v3 a{
  color:var(--ink); text-decoration:none; font-weight:700;
  padding:8px 0; border-bottom:2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-nav.v3 a:hover{ color:var(--brand) }
.site-nav.v3 a.active{ color:var(--brand); border-color:var(--brand) }
.nav-actions{ display:flex; gap:10px; align-items:center }
.menu-toggle.v3{ display:none; flex-direction:column; gap:5px; border:none; background:transparent; padding:6px 8px; border-radius:10px }
.menu-toggle.v3 span{ width:22px; height:2px; background:var(--ink); display:block }
/* Drawer mobile */
.nav-drawer[hidden]{ display:none }
.nav-drawer{ position:fixed; inset:0; z-index:40 }
.drawer-backdrop{ position:absolute; inset:0; background:rgba(10,20,30,.42); backdrop-filter: blur(2px); }
.drawer-card{
  position:absolute; inset: calc(var(--sticky-top) + 6px) 10px auto 10px;
  background:#fff; border:1px solid var(--ring); border-radius:16px; box-shadow: var(--shadow);
  max-height: calc(100dvh - var(--sticky-top) - 20px); overflow:auto;
  transform: translateY(-8px); opacity:0; transition: transform .2s ease, opacity .2s ease;
}
.nav-drawer.open .drawer-card{ transform:none; opacity:1 }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--ring) }
.drawer-close{ width:36px;height:36px;border-radius:999px;border:1px solid var(--ring);background:#fff;cursor:pointer }
.drawer-nav{ display:grid; gap:8px; padding:14px }
.drawer-nav a{ display:block; padding:10px 12px; border-radius:10px; text-decoration:none; font-weight:800; color:var(--ink); border:1px solid transparent }
.drawer-nav a:active,.drawer-nav a:hover{ background:#f5f7fb; border-color:var(--ring) }
.drawer-nav a.active{ color:var(--brand); border-color:var(--brand); background:#fff }
.drawer-foot{ display:flex; gap:8px; flex-wrap:wrap; padding: 8px 14px 14px; border-top:1px solid var(--ring) }
/* Responsive header */
@media (max-width:980px){
  .site-nav.v3{ display:none }
  .menu-toggle.v3{ display:flex }
  .site-header.v3 .brand-sub{ display:none }
}
@media (min-width:981px){
  .nav-drawer{ display:none !important }
}

/* =========================================
   HERO
========================================= */
.hero{
  padding: clamp(56px, 8vw, 96px) 0 clamp(28px, 5vw, 40px);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(231,167,191,.15), transparent 60%),
    radial-gradient(900px 500px at 95% 10%, rgba(31,53,96,.08), transparent 60%);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(16px, 3.2vw, 36px);
  align-items:center;
}
.hero-eyebrow{
  margin:0 0 8px;
  font-weight:800; letter-spacing:.2px; color:#3a5278;
  text-transform:uppercase; font-size:.82rem;
}
.hero-text h1{
  font-size: clamp(28px, 4.2vw, 48px);
  line-height:1.12; margin:0 0 12px;
}
.hero .lead{max-width: 60ch}
.hero-cta{display:flex;gap:14px;margin:18px 0 6px;align-items:center;flex-wrap:wrap}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:14px 0 0;list-style:none
}
.hero-badges li{
  background:#fff;border:1px solid var(--ring);padding:8px 12px;border-radius:999px
}
.hero-media{border-radius:22px}
.hero-media img{display:block;width:100%;height:auto;opacity:0;transition:opacity .45s ease}
.hero-media img.is-loaded{opacity:1}
@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr}
  .hero{padding: clamp(44px, 8vw, 64px) 0 clamp(18px, 6vw, 28px)}
  .hero-media{aspect-ratio: 16/11}
}

/* =========================================
   BLOC 2 — Approche
========================================= */
#approche .section-head { margin-bottom: clamp(16px, 3.2vw, 28px); }
#approche .section-banner img{ display:block; width:100%; height:auto; filter: contrast(1.02) saturate(1.02); }
#approche .approach-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(14px, 2.2vw, 22px);
  margin-top: clamp(16px, 3vw, 28px);
}
#approche .step-card{
  position:relative;
  padding: clamp(18px, 2.2vw, 24px);
  border:1px solid var(--ring);
  border-top-color: transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) top / 100% 6px no-repeat,
    var(--card);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
#approche .step-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(31,53,96,.12); }
#approche .step-icon{ font-size: 24px; line-height:1; margin-bottom: 8px; }
#approche .step-card h3{ margin: 6px 0 6px; font-size: 1.05rem; }
#approche .step-card p{ color: var(--muted); margin: 0 0 8px; }
#approche .step-points{ margin:8px 0 0; padding-left:0; list-style:none; display:grid; gap:6px; }
#approche .step-points li{ position:relative; padding-left:22px; }
#approche .step-points li::before{ content:"✓"; position:absolute; left:0; top:0; line-height:1.25; font-weight:800; color: var(--brand); }
#approche .approach-cta{ margin-top: clamp(18px, 3vw, 28px); display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center; }
@media (max-width: 1100px){ #approche .approach-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px){
  #approche .approach-grid{ grid-template-columns: 1fr; }
  #approche .approach-cta{ justify-content: flex-start; }
}

/* =========================================
   BLOC 3 — Services
========================================= */
#services .section-head { margin-bottom: clamp(16px, 3.2vw, 28px); }
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 2.2vw, 22px);
  align-items: stretch;
}
.service-card{
  display:flex; flex-direction:column;
  padding: clamp(18px, 2.2vw, 24px);
  border:1px solid var(--ring);
  border-top-color: transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) top / 100% 6px no-repeat,
    var(--card);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.service-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(31,53,96,.12); }
.service-card h3{ margin: 8px 0 6px; font-size: 1.08rem; }
.service-card .svc-lead{ margin:0 0 10px; color: var(--muted); }
.svc-icon{
  width:56px; height:56px; border-radius:14px;
  background: linear-gradient(135deg, rgba(31,53,96,.12), rgba(231,167,191,.18));
  display:grid; place-items:center; border:1px solid var(--ring);
}
.svc-icon .ico{ width:28px; height:28px; fill:none; stroke: var(--brand); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.svc-list{ list-style:none; padding:0; margin: 8px 0 0; display:grid; gap:8px; }
.svc-list li{ position:relative; padding-left:22px; }
.svc-list li::before{ content:"✓"; position:absolute; left:0; top:0; line-height:1.25; font-weight:800; color: var(--brand); }
.svc-actions{ margin-top:auto; padding-top:12px; display:flex; gap:10px; flex-wrap:wrap }
@media (max-width: 1024px){ .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px){ .services-grid{ grid-template-columns: 1fr; } }

/* =========================================
   BLOC 4 — Tarifs
========================================= */
#tarifs .section-head { margin-bottom: clamp(16px,3.2vw,28px); }
#tarifs .pricing-wrap{ display:grid; grid-template-columns: 1.3fr .7fr; gap: clamp(16px,2.2vw,22px); }
@media (max-width: 920px){ #tarifs .pricing-wrap{ grid-template-columns: 1fr; } }
#tarifs .pricing-card{
  position:relative;
  padding: clamp(18px,2.2vw,24px);
  border:1px solid var(--ring);
  border-top-color: transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) top / 100% 6px no-repeat,
    var(--card);
  box-shadow: var(--shadow);
  overflow:hidden;
}
#tarifs .pricing-badge{
  display:inline-block; font-weight:800; letter-spacing:.2px; text-transform:uppercase;
  font-size:.78rem; padding:6px 10px; border-radius:999px;
  border:1px solid var(--ring); background:#fff; color:#3a5278;
}
#tarifs .price-figure{ display:flex; align-items:baseline; gap:10px; margin:10px 0 6px; }
#tarifs .price-amount{ font-size: clamp(38px, 6vw, 56px); font-weight: 900; line-height:1; color: var(--brand); }
#tarifs .price-unit{ font-weight:800; color: var(--ink); }
#tarifs .intro{ margin:0 0 10px; }
#tarifs .feature-list{ list-style:none; padding:0; margin: 8px 0 0; display:grid; gap:10px; }
#tarifs .feature-list li{ position:relative; padding-left:24px; }
#tarifs .feature-list li::before{ content:"✓"; position:absolute; left:0; top:0; line-height:1.25; font-weight:800; color: var(--brand); }
#tarifs .feature-list .note{ color: var(--muted); }
#tarifs .kpi-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
#tarifs .kpi{ border:1px solid var(--ring); background:#fff; padding:8px 12px; border-radius:999px; font-weight:700; }
#tarifs .pricing-ctas{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
#tarifs .footnotes{ margin-top:10px; }
#tarifs .footnotes p{ margin:6px 0 0; }
#tarifs .pricing-side{
  border:1px solid var(--ring);
  border-top-color: transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(31,53,96,.12) 0%, rgba(231,167,191,.22) 100%) top / 100% 6px no-repeat,
    var(--card);
  box-shadow: var(--shadow);
  padding: clamp(16px,2vw,22px);
}
#tarifs .pricing-side h3{ margin:6px 0 10px; }
#tarifs .pricing-side .mini-list{ list-style:none; padding:0; margin: 8px 0 10px; display:grid; gap:8px; }
#tarifs .pricing-side .mini-list li{ position:relative; padding-left:22px; }
#tarifs .pricing-side .mini-list li::before{ content:"•"; position:absolute; left:6px; top:-1px; font-weight:900; color: var(--brand); }
#tarifs .tarifs-banner img{ display:block; width:100%; height:auto; filter: contrast(1.02) saturate(1.02); }

/* =========================================
   BLOC 5 — Zones (Leaflet)
========================================= */
#zones .section-head { margin-bottom: clamp(16px,3.2vw,28px); }
#zones .zones-grid{
  display:grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(16px,2.2vw,22px); align-items: stretch;
}
@media (max-width: 980px){ #zones .zones-grid{ grid-template-columns: 1fr; } }
#zones .card{
  border:1px solid var(--ring); border-top-color: transparent; border-radius: var(--radius);
  background:
    linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) top / 100% 6px no-repeat,
    var(--card);
  box-shadow: var(--shadow);
  padding: clamp(16px,2vw,22px);
  overflow:hidden;
}
#zones .map-card{ padding:0; display:flex; flex-direction:column; overflow:hidden }
#realMap{ width:100%; height:360px; }
#zones .map-title{ padding: 14px 18px 4px; font-weight:800; color:#3a5278; }
#zones .map-legend{ display:flex; gap:12px; align-items:center; padding:8px 14px; color:var(--muted); }
#zones .map-attrib{ padding:0 14px 12px; font-size:.88rem; color:var(--muted); }
.leaflet-container{ border-radius: 0 0 var(--radius) var(--radius); }
#zones .dot{display:inline-block;width:10px;height:10px;border-radius:999px;border:1px solid var(--ring);margin-right:6px}
#zones .dot-incl{background:#cde2ff}
#zones .dot-prox{background:#f6d7e3}
#zones .zones-card h3{ margin: 0 0 8px; }
#zones .zones-card .mt{ margin-top: 14px; }
#zones .zones-tags{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:8px 0 12px; padding:0;
}
#zones .zones-tags .chip{ font-weight:700; border-color: var(--ring); }
#zones .zones-checker{ margin-top: 8px; }
#zones .zones-checker label{ font-weight:800; display:block; margin-bottom:6px; }
#zones .checker-row{ display:grid; grid-template-columns: 1fr auto; gap:10px; }
#zones .zones-checker input{
  padding:12px 14px; border:1px solid var(--ring); border-radius:12px; outline:none; width:100%; background:#fff;
}
#zones .zones-checker input:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(147,197,253,.35); }
#zones #zoneResult.zone-ok{ color:#1b7c3a; font-weight:800; }
#zones #zoneResult.zone-maybe{ color:#8a6a00; font-weight:800; }
#zones #zoneResult.zone-no{ color:#9b1c1c; font-weight:800; }
#zones .zone-suggest{ margin-top:10px; }
#zones .zone-suggest-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
@media (max-width:720px){ #zones .checker-row{ grid-template-columns: 1fr; } }

/* =========================================
   BLOC 6 — Témoignages
========================================= */
#temoignages .t-slider{ position:relative; padding: 6px 0 26px; }
#temoignages .t-track{
  display:grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: clamp(14px, 2.2vw, 22px); overflow-x:auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 2px;
}
@media (min-width:720px){ #temoignages .t-track{ grid-auto-columns: 50%; } }
@media (min-width:1024px){ #temoignages .t-track{ grid-auto-columns: 33.3333%; } }
#temoignages .t-card{
  scroll-snap-align: start;
  background:
    linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) top / 100% 6px no-repeat,
    var(--card);
  border:1px solid var(--ring); border-top-color: transparent; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(16px,2.2vw,22px); min-height: 160px; position:relative;
}
#temoignages .t-quote{ position:absolute; top:10px; right:14px; font-size:46px; line-height:1; color: rgba(31,53,96,.12); font-weight:900; user-select:none; pointer-events:none; }
#temoignages blockquote{ margin: 4px 0 8px; font-size:1.05rem; }
#temoignages footer{ color: var(--muted); font-weight:700 }
#temoignages .t-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px;height:40px;border-radius:999px; border:1px solid var(--ring);
  background:#fff; box-shadow: var(--shadow); cursor:pointer;
  display:grid; place-items:center; font-weight:900; color:var(--ink); z-index:2;
}
#temoignages .t-prev{ left:-6px } .t-next{ right:-6px }
@media (max-width:720px){ #temoignages .t-prev{ left:4px } #temoignages .t-next{ right:4px } }
#temoignages .t-dots{ display:flex; gap:8px; justify-content:center; margin-top: 14px; }
#temoignages .t-dot{ width:10px;height:10px;border-radius:999px;border:1px solid var(--ring); background:#fff; cursor:pointer; }
#temoignages .t-dot.is-active{ background: var(--brand); border-color: var(--brand); }
@media (prefers-reduced-motion:reduce){ #temoignages .t-track{ scroll-behavior:auto } }

/* =========================================
   BLOC 7 — FAQ
========================================= */
#faq .section-head{ margin-bottom: clamp(14px,3vw,24px); }
#faq .faq-tools{ display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; margin-bottom: 12px; }
#faq .faq-search{ position:relative; }
#faq .faq-search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#6b7a8a }
#faq .faq-search input{ width:100%; padding:12px 14px 12px 38px; border-radius:12px; border:1px solid var(--ring); outline:none; background:#fff; }
#faq .faq-search input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(147,197,253,.35) }
#faq .faq-chips{ display:flex; flex-wrap:wrap; gap:8px; }
#faq .faq-chips .chip{ font-weight:700; border-color:var(--ring) }
#faq .faq-chips .chip.is-active{ border-color:var(--brand); color:var(--brand) }
#faq .faq-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(12px,2vw,18px); }
#faq .faq-card{
  border:1px solid var(--ring); border-top-color: transparent; border-radius:16px;
  background:
    linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) top / 100% 6px no-repeat,
    var(--card);
  box-shadow: var(--shadow); overflow:hidden;
}
#faq .faq-card summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:16px 18px; font-weight:800;
}
#faq .faq-card summary::-webkit-details-marker{ display:none }
#faq .faq-card .q-icon{ font-size:1.2rem }
#faq .faq-card .chev{ margin-left:auto; display:inline-block; transform:rotate(90deg); transition:transform .25s ease; font-weight:900; color:var(--muted); }
#faq .faq-card[open] .chev{ transform:rotate(-90deg); color:var(--brand); }
#faq .faq-card .faq-body{ padding:0 18px 16px 52px; color:var(--muted); max-height:0; overflow:hidden; will-change:max-height; }
#faq .no-results{ margin-top:8px }
#faq .faq-cta{ margin-top: clamp(16px,3vw,24px); display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:center; }
#faq .faq-cta a{ display:inline-flex; align-items:center; line-height:1; border-radius:999px; text-decoration:none; }
#faq .faq-cta .link{ min-height:44px; padding:12px 14px; font-weight:700; border:1px solid var(--ring); background:#fff; color:var(--brand); }
#faq .faq-cta .link:hover{ background:#f5f7fb }
@media (max-width: 820px){ #faq .faq-tools{ grid-template-columns: 1fr } #faq .faq-grid{ grid-template-columns: 1fr } }

/* =========================================
   BLOC 8 — Contact v2
========================================= */
#contact.v2 .contact-wrap{
  display:grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(16px,2.4vw,28px); align-items:start;
}
@media (max-width: 980px){ #contact.v2 .contact-wrap{ grid-template-columns: 1fr } }
#contact.v2 .card{ border:1px solid var(--ring); border-radius: 18px; background:#fff; box-shadow: 0 10px 30px rgba(31,53,96,.10); padding: clamp(18px,2.4vw,26px); }
#contact.v2 .form2{ position:relative; }
#contact.v2 .form2 .hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }
#contact.v2 .form-head h2{ margin:0 0 6px; font-size: clamp(22px,3vw,28px); }
#contact.v2 .prog{ margin:10px 0 6px; }
#contact.v2 .prog .track{ height:6px; background:#eef2f7; border-radius:999px; overflow:hidden; }
#contact.v2 .prog .fill{ width:50%; height:100%; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%); transition: width .25s ease; }
#contact.v2 .prog .labels{ display:flex; justify-content:space-between; margin-top:6px; color:var(--muted); font-weight:700; font-size:.92rem; }
#contact.v2 .prog .labels .active{ color: var(--brand); }
#contact.v2 .step-pane{ display:none; opacity:0; transform: translateY(6px); transition:opacity .22s ease, transform .22s ease; }
#contact.v2 .step-pane.active{ display:block; opacity:1; transform:none; }
#contact.v2 .form2 label{ display:grid; gap:6px; font-weight:700; }
#contact.v2 .form2 input,#contact.v2 .form2 textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--ring);
  outline:none; background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
#contact.v2 .form2 input:focus,#contact.v2 .form2 textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(147,197,253,.30) }
#contact.v2 .form2 .row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-top:10px }
#contact.v2 .form2 .check{ display:flex; gap:10px; align-items:center; font-weight:600 }
#contact.v2 .form2 .form-note{ color:var(--muted); font-size:.92rem; margin:8px 0 0 }
#contact.v2 .form2 .form-success{ margin-top:10px; color:#1b7c3a; font-weight:800 }
#contact.v2 .form2 .form-error{ margin-top:10px; color:#9b1c1c; font-weight:800 }
#contact.v2 .form2 .err{ min-height:16px; color:#9b1c1c; font-weight:600 }
#contact.v2 .form2 .field-error{ border-color:#d22; box-shadow:0 0 0 2px rgba(210,34,34,.12) }
#contact.v2 .form2 .btn,#contact.v2 .form2 .chip{ min-height:44px; align-items:center; line-height:1; border-radius:999px }
@media (max-width:720px){ #contact.v2 .prog .labels{ font-size:.86rem } }
#contact.v2 .info2 .img-frame.soft{ border:1px solid var(--ring); border-radius:16px; overflow:hidden; margin-bottom:12px }
#contact.v2 .info2 .contact-list{ list-style:none; padding:0; margin: 0 0 8px; display:grid; gap:6px }
#contact.v2 .info2 .contact-list a{ text-decoration:none; color: var(--ink) }
#contact.v2 .info2 .trust{ list-style:none; padding:0; margin: 8px 0 0; display:flex; flex-wrap:wrap; gap:8px }
#contact.v2 .info2 .trust li{ border:1px solid var(--ring); background:#fff; border-radius:999px; padding:8px 12px; font-weight:700 }

/* =========================================
   FOOTER v2
========================================= */
.site-footer.v2{
  background:#14243f; color:#eaf2ff; border-top:1px solid rgba(255,255,255,.12);
  --fmuted:#c9d6ea;
  background:
    linear-gradient(90deg, rgba(31,53,96,.25) 0%, rgba(110,159,232,.20) 100%) 0 0 / 100% 4px no-repeat,
    #14243f;
}
.site-footer.v2 .container{ padding-inline: var(--space); }
.site-footer.v2 .foot-grid{
  display:grid; grid-template-columns: 1.3fr .8fr .9fr;
  gap: clamp(16px,2.4vw,28px); padding: clamp(22px,3.2vw,32px) 0; align-items:start;
}
@media (max-width: 980px){ .site-footer.v2 .foot-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px){ .site-footer.v2 .foot-grid{ grid-template-columns: 1fr; } }
.site-footer.v2 .brand-footer{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#eaf2ff }
.site-footer.v2 .logo{ width:32px; height:32px }
.site-footer.v2 .brand-text{ font-weight:800 }
.site-footer.v2 .muted{ color: var(--fmuted) }
.site-footer.v2 .foot-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 6px }
.site-footer.v2 .btn{ box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.site-footer.v2 .btn-outline{ background:#fff; color: var(--brand); border-color:#fff }
.site-footer.v2 .social{ display:flex; gap:10px; margin-top:8px }
.site-footer.v2 .social a{
  width:36px;height:36px;display:grid;place-items:center;border-radius:999px;
  border:1px solid rgba(255,255,255,.18); color:#eaf2ff; text-decoration:none;
}
.site-footer.v2 .social a:hover{ background:rgba(255,255,255,.08) }
.site-footer.v2 .foot-nav h3, .site-footer.v2 .foot-contact h3{ margin:0 0 8px; font-size:1.02rem }
.site-footer.v2 .foot-nav ul, .site-footer.v2 .foot-contact ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.site-footer.v2 .foot-nav a{ color:#eaf2ff; text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; font-weight:700 }
.site-footer.v2 .foot-nav a:hover{ border-color:#eaf2ff }
.site-footer.v2 .foot-contact a{ color:#eaf2ff; text-decoration:none; }
.site-footer.v2 .foot-contact a:hover{ text-decoration:underline }
.site-footer.v2 .foot-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top: 8px; background: rgba(10,18,30,.35); }
.site-footer.v2 .foot-bottom-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 12px 0; }
.site-footer.v2 .foot-bottom-row p{ margin:0; color: var(--fmuted) }
.site-footer.v2 .back-top{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(255,255,255,.18); color:#eaf2ff; background:transparent;
  transition: transform .15s ease, background .15s ease, opacity .2s ease; opacity:.85;
}
.site-footer.v2 .back-top:hover{ transform: translateY(-2px); background: rgba(255,255,255,.10); }

/* =========================================
   Misc small helpers
========================================= */
.elevate{ box-shadow: var(--shadow) }
.small{ font-size:.96rem } .tiny-note{ font-size:.9rem; color: var(--muted) }
mark{ background: #fff3cd; padding:0 2px; border-radius:3px }
html{ scroll-behavior:smooth }
/* CONTACT v2 — Patch proportions & image */
#contact.v2 .contact-wrap{
  grid-template-columns: 1.25fr .75fr;      /* + de place au formulaire */
}

/* Cadre visuel : ratio fixe + hauteur max raisonnable */
#contact.v2 .info2 .img-frame.soft{
  aspect-ratio: 16 / 11;
  max-height: clamp(220px, 32vw, 360px);
  width: 100%;
  overflow: hidden;
}

/* L’image remplit le cadre (même si attributs width/height sont 840) */
#contact.v2 .info2 .img-frame.soft img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Si on passe en mobile, on réduit encore un peu la hauteur */
@media (max-width: 720px){
  #contact.v2 .info2 .img-frame.soft{
    aspect-ratio: 16 / 10;
    max-height: 240px;
  }
}

/* Évite qu’un trop grand visuel étire le reste */
#contact.v2 .info2{ align-self: start; }
#contact.v2 .form2{ align-self: start; }

/* Placeholder élégant si l'image est supprimée en JS (voir patch JS) */
#contact.v2 .info2 .img-frame.soft.placeholder{
  background:
    radial-gradient(80% 70% at 20% 15%, rgba(231,167,191,.25), transparent 60%),
    radial-gradient(60% 60% at 85% 10%, rgba(31,53,96,.18), transparent 60%),
    #fff;
}