/* ============================================================
   MyFinAssure × sovria.fr — design noir éditorial authentique
   Fond #0a0a0a · typo Inter + Cormorant Garamond italic
   Accent émeraude discret · numérotation romaine
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-2: #f7f5f0;
  --bg-3: #efece5;
  --border: #d8d4cb;
  --border-soft: #ececec;
  --fg: #0a0a0a;
  --fg-2: #2a2a2a;
  --muted: #6a6a65;
  --muted-2: #9a9a92;
  --accent: #6b9e7e;        /* vert sauge poudré — léger, sobre */
  --accent-dark: #527e63;
  --accent-soft: rgba(107,158,126,.10);
  --warm: #c69b75;          /* orange terracotta poudré — léger, sobre */
  --warm-dark: #a4795a;
  --warm-soft: rgba(198,155,117,.10);
  /* Alias pour compat HTML hérité */
  --green: var(--accent);
  --green-dark: #0d8f6a;
  --green-soft: rgba(16,185,129,.18);
  --orange: var(--warm);
  --orange-dark: #d97225;
  --orange-soft: rgba(245,158,11,.18);
  --blue-soft: rgba(42,122,181,.18);
  --red-soft: rgba(181,54,54,.18);
  --yellow-soft: rgba(181,135,54,.18);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
section { padding: 120px 0; position: relative; border-top: 1px solid var(--border-soft); }
section:first-of-type { border-top: none; }

/* ── Typo ──────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
}
h1 { font-size: clamp(44px, 6.5vw, 80px); }
h2 { font-size: clamp(34px, 4.5vw, 56px); }
h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
h4 { font-size: 14px; font-weight: 500; }

em, .em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
  color: var(--fg);
  background-image: linear-gradient(transparent calc(100% - 2px), var(--accent) calc(100% - 2px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-bottom: 2px;
}
em.warm {
  background-image: linear-gradient(transparent calc(100% - 2px), var(--warm) calc(100% - 2px));
}

p { color: var(--fg-2); font-size: 17px; line-height: 1.65; }
.lede { font-size: 20px; color: var(--fg-2); max-width: 640px; font-weight: 300; }

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 24px;
  display: inline-block;
  font-weight: 500;
}

.section-head { margin-bottom: 80px; max-width: 760px; }
.section-head p { margin-top: 24px; }

/* ── Top bar consolidée (fusion top-bar + banner-strip) ──── */
.top-bar {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--fg-2);
}
.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 32px;
  max-width: var(--maxw);
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 12px;
}
.top-bar .tb-left { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.top-bar .tb-center {
  flex: 1;
  text-align: center;
  color: var(--fg-2);
  font-size: 13px;
}
.top-bar .tb-center strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--fg);
  font-size: 14px;
  margin-right: 4px;
}
.top-bar .tb-right { flex-shrink: 0; }
.top-bar a { color: var(--fg-2); margin-left: 16px; transition: color .15s; font-weight: 500; }
.top-bar .tb-left a { color: var(--muted); }
.top-bar a:first-child { margin-left: 0; }
.top-bar a:hover { color: var(--accent); }
.top-bar strong { color: var(--fg-2); font-weight: 500; }
.top-bar .banner-cta {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  margin-left: 8px;
}
.top-bar .banner-cta:hover { color: var(--fg); }
@media (max-width: 960px) {
  .top-bar .tb-center { display: none; }
}

/* ── Banner saisonnier ancien (masqué, intégré dans top-bar) ── */
.banner-strip { display: none !important; }
.banner-strip-legacy {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--fg-2);
}
.banner-strip .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}
.banner-strip strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--fg);
  font-size: 15px;
}
.banner-strip .banner-cta {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.banner-strip .banner-cta:hover { color: var(--fg); }

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  max-width: var(--maxw);
  margin: 0 auto;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--fg);
  line-height: 1;
}
.brand img {
  height: 44px;
  width: auto;
  display: block;
}
/* Anciens éléments texte cachés au profit du logo image */
.brand-mark, .brand-name { display: none; }
/* Footer : mini-logo carré discret (écusson seul, sans le texte) */
.footer-brand .brand img,
.brand-mini {
  height: 40px !important;
  width: 40px !important;
  opacity: 0.85;
}

.main-nav ul {
  display: flex;
  gap: 32px;
  list-style: none;
  align-items: center;
}
.main-nav a {
  font-size: 14px;
  color: var(--fg-2);
  font-weight: 400;
  transition: color .15s;
  position: relative;
}
.main-nav a:hover, .main-nav a.active { color: var(--accent); }

.header-cta {
  font-size: 14px;
  padding: 10px 22px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 500;
  transition: all .15s;
  white-space: nowrap;
  border-radius: 0;
}
.header-cta:hover { background: var(--accent); color: var(--bg); }

.burger {
  display: none;
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 24px;
}

/* Dropdowns minimalistes */
.main-nav li { position: relative; }
.dropdown {
  position: absolute;
  top: 100%; left: -16px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  padding: 8px 0;
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .2s;
  display: flex;
  flex-direction: column;
  z-index: 99;
}
.main-nav li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown a {
  padding: 10px 18px;
  font-size: 13px;
  color: var(--fg-2);
}
.dropdown a:hover { background: var(--bg-3); color: var(--accent); }

/* ── Hero (asymétrique éditorial) ──────────────────────────── */
.hero {
  padding: 160px 0 120px;
  border-top: none;
}
.hero h1 { max-width: 920px; margin-bottom: 36px; }
.hero .lede { margin-bottom: 48px; max-width: 680px; }
.hero-actions {
  display: flex;
  gap: 20px;
  margin-bottom: 80px;
  flex-wrap: wrap;
}
.hero-reassure {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 16px;
  margin-bottom: 60px;
  font-family: var(--serif);
  font-style: italic;
}
.hero-reassure span::before { content: "· "; color: var(--accent); margin-right: 4px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  max-width: 760px;
  border-top: 1px solid var(--border-soft);
  padding-top: 40px;
}
.hero-stat .num {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 400;
  color: var(--fg);
  display: block;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-stat .num em {
  background: none;
  padding: 0;
  color: var(--accent);
  font-style: italic;
}
.hero-stat .num.warm { color: var(--warm); }
.hero-stat .label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ── Page hero ─────────────────────────────────────────────── */
.page-hero { padding: 180px 0 80px; border-top: none; }
.page-hero .crumbs { font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.page-hero .crumbs a { color: var(--muted); }
.page-hero .crumbs a:hover { color: var(--accent); }
.page-hero h1 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 32px; max-width: 880px; }
.page-hero .lede { max-width: 680px; }

/* ── KPI sobre (sans bloc plein) ───────────────────────────── */
.kpi-block {
  margin: 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 56px 0;
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  text-align: left;
}
.kpi {
  padding: 0 32px;
  border-right: 1px solid var(--border-soft);
}
.kpi:last-child { border-right: none; }
.kpi:first-child { padding-left: 0; }
.kpi .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 400;
  color: var(--fg);
  display: block;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.kpi .num.warm { color: var(--warm); }
.kpi .label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ── Boutons ───────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 16px 28px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--border);
  transition: all .2s;
  cursor: pointer;
  letter-spacing: 0.02em;
  border-radius: 0;
  text-align: center;
}
.btn-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn-secondary, .btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
}
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--fg); }
.btn-orange { background: var(--warm); color: var(--bg); border-color: var(--warm); }
.btn-orange:hover { background: var(--fg); border-color: var(--fg); }
.btn-block { display: block; width: 100%; }
.btn-text {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 16px 4px;
  font-size: 14px;
}
.btn-text:hover { color: var(--accent); }

/* ── Trois engagements ────────────────────────────────────── */
.commitments .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 80px;
  border-top: 1px solid var(--border-soft);
}
.commitment {
  padding: 56px 40px;
  border-right: 1px solid var(--border-soft);
}
.commitment:last-child { border-right: none; }
.commitment .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--accent);
  margin-bottom: 32px;
  display: block;
}
.commitment h3 { margin-bottom: 16px; }
.commitment p { font-size: 16px; color: var(--muted); }

/* ── 5 expertises / cards Sovria avec monogrammes lettres ─── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
}
.product-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.product-card {
  background: var(--bg);
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background .2s;
  border-radius: 0;
}
.product-card:hover { background: var(--bg-2); }

/* Aucune icône — choix éditorial Sovria pur */
.product-icon,
.product-icon svg,
.value-icon svg,
.espace-feature .icon svg { display: none !important; }
.value-icon,
.espace-feature .icon {
  display: none !important;
  margin: 0 !important;
}

.product-card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
}
.product-card .label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--accent);
  flex: 0 0 20px;
}
/* Variantes de couleur — alternance sobre pour différencier les catégories */
.product-card.warm .label,
.product-card:nth-child(3n+2) .label { color: var(--warm); }
.product-card.warm .label::before,
.product-card:nth-child(3n+2) .label::before { background: var(--warm); }
.product-card.fg .label,
.product-card:nth-child(3n+3) .label { color: var(--fg); }
.product-card.fg .label::before,
.product-card:nth-child(3n+3) .label::before { background: var(--fg); }
.product-card h3 { font-size: 20px; margin: 0; line-height: 1.3; }
.product-card p { font-size: 15px; color: var(--muted); flex-grow: 1; }
.product-card .chips {
  font-size: 13px;
  color: var(--muted);
  padding: 16px 0;
  border-top: 1px solid var(--border-soft);
  font-family: var(--serif);
  font-style: italic;
}
.product-card .chips strong {
  color: var(--accent);
  font-weight: 400;
  margin: 0 4px;
  font-family: var(--serif);
  font-style: italic;
}
.product-card .product-cta { margin-top: auto; padding-top: 8px; }

/* ── Values / Pourquoi nous ────────────────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 80px;
  border-top: 1px solid var(--border-soft);
}
.value-card {
  padding: 48px 36px;
  border-right: 1px solid var(--border-soft);
}
.value-card:last-child { border-right: none; }
.value-icon {
  color: var(--accent);
  margin-bottom: 24px;
  display: block;
  width: auto; height: auto;
  background: transparent;
  border-radius: 0;
}
.value-icon svg { display: block; width: 28px; height: 28px; }
.value-card h3 { font-size: 19px; margin-bottom: 16px; }
.value-card p { font-size: 15px; color: var(--muted); }

/* ── Difference comparison ─────────────────────────────────── */
.difference-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 80px;
  border: 1px solid var(--border-soft);
}
.diff-col { padding: 48px 40px; }
.diff-col.left { border-right: 1px solid var(--border-soft); }
.diff-col .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 16px; }
.diff-col h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 32px;
}
.diff-col ul { list-style: none; }
.diff-col ul li {
  padding: 14px 0;
  border-top: 1px solid var(--border-soft);
  font-size: 15px;
  color: var(--fg-2);
  display: flex;
  gap: 12px;
}
.diff-col.left ul li::before { content: "✗"; color: var(--muted-2); }
.diff-col.right ul li::before { content: "✓"; color: var(--accent); }

/* ── Journey / Parcours étapes ─────────────────────────────── */
.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 80px;
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
}
.step {
  padding: 40px 32px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.step .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  display: block;
  margin-bottom: 24px;
}
.step h3 { font-size: 20px; margin-bottom: 12px; }
.step p { font-size: 15px; color: var(--muted); margin-bottom: 24px; }
.step .when {
  font-size: 12px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: var(--serif);
  font-style: italic;
}
.journey-foot {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.journey-foot p { font-size: 16px; color: var(--muted); }
.journey-foot p strong { color: var(--fg); font-weight: 500; }

/* ── Pricing (boutique / packs) ────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 0;
  border: 1px solid var(--border-soft);
}
.plan {
  padding: 48px 36px;
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg);
}
.plan:last-child { border-right: none; }
.plan.featured { background: var(--bg-2); }
.plan.featured::before {
  content: "Le plus choisi";
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--accent);
  color: var(--bg);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 16px;
  font-weight: 600;
  text-align: center;
}
.plan.featured h3 { padding-top: 24px; }
.plan h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 12px;
}
.plan .who { font-size: 14px; color: var(--muted); margin-bottom: 32px; }
.plan .price {
  font-size: 56px;
  font-weight: 300;
  color: var(--fg);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  font-family: var(--serif);
  line-height: 1;
}
.plan .price .currency { font-size: 28px; vertical-align: super; }
.plan .unit { font-size: 13px; color: var(--muted); margin-bottom: 32px; }
.plan ul { list-style: none; margin-bottom: 32px; flex-grow: 1; }
.plan ul li {
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  font-size: 14px;
  color: var(--fg-2);
}
.plan ul li:first-child { border-top: none; }

/* ── Témoignages ───────────────────────────────────────────── */
.quotes-grid, .testimonials .product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 80px;
  border: 1px solid var(--border-soft);
}
.quote {
  padding: 48px 40px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.quote:nth-child(2n) { border-right: none; }
.quote:nth-last-child(-n+2) { border-bottom: none; }
.quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--fg-2);
  margin-bottom: 32px;
  font-weight: 400;
}
.quote cite {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: var(--fg);
  font-weight: 500;
}
.quote cite span {
  color: var(--muted);
  font-weight: 400;
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

/* ── FAQ compressée ────────────────────────────────────────── */
.faq-list { margin-top: 32px; border-top: 1px solid var(--border-soft); max-width: 100%; }
details {
  border-bottom: 1px solid var(--border-soft);
  padding: 16px 0;
  background: transparent;
}
details[open] { border-bottom-color: var(--border); padding-bottom: 20px; }
summary {
  font-size: 16px;
  cursor: pointer;
  color: var(--fg);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  color: var(--muted);
  font-size: 20px;
  font-family: var(--serif);
  margin-left: 20px;
  font-weight: 400;
  flex-shrink: 0;
}
details[open] summary::after { content: "−"; }
details p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  max-width: 780px;
  line-height: 1.6;
}
details a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── Témoignages compact (3 cards mini) ───────────────────── */
.testimonials-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
}
.tm-card {
  padding: 24px 22px;
  background: var(--bg);
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tm-card .tm-stars {
  color: var(--warm);
  font-size: 14px;
  letter-spacing: 3px;
}
.tm-card p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-2);
  margin: 0;
  flex-grow: 1;
}
.tm-card cite {
  font-style: normal;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--fg);
  font-weight: 500;
}
.tm-card cite span {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
  margin-top: 2px;
}
@media (max-width: 960px) {
  .testimonials-mini { grid-template-columns: 1fr; }
  .tm-card { border-right: none; }
}

/* ── SEO local (texte large) ──────────────────────────────── */
.seo-block, .seo-local { background: transparent; padding: 120px 0; }
.seo-block .container, .seo-local .container { max-width: 880px; }
.seo-block h2, .seo-local h2 { font-size: 36px; margin-bottom: 32px; font-weight: 400; }
.seo-block p, .seo-local p { font-size: 17px; color: var(--fg-2); line-height: 1.75; margin-bottom: 24px; }
.seo-block a, .seo-local a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── CTA final ─────────────────────────────────────────────── */
.cta-section {
  text-align: left;
  padding: 120px 0;
  border-top: 1px solid var(--border-soft);
}
.cta-section .container { max-width: 880px; }
.cta-section h2 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 24px; max-width: 720px; }
.cta-section p { font-size: 18px; color: var(--muted); margin-bottom: 40px; max-width: 580px; }
.cta-section .reassure {
  font-size: 13px;
  color: var(--muted-2);
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
}

/* ── Contact ───────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 60px;
  align-items: flex-start;
}
.contact-info h3 { font-family: var(--serif); font-style: italic; font-size: 24px; margin-bottom: 20px; font-weight: 400; }
.contact-info p { font-size: 16px; margin-bottom: 24px; color: var(--muted); max-width: 420px; }
.contact-info .detail {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--fg);
  margin: 32px 0 8px;
  font-weight: 400;
}
.contact-info .detail a:hover { color: var(--accent); }
.contact-info .meta {
  font-size: 12px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.contact-form {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  padding: 40px;
  border-radius: 0;
}
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.contact-form .field { margin-bottom: 16px; }
.contact-form label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 8px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 15px;
  font-family: var(--sans);
  transition: border-color .15s;
  border-radius: 0;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: none; border-color: var(--accent); }
.contact-form textarea { resize: vertical; min-height: 100px; }
.contact-form button {
  width: 100%;
  margin-top: 8px;
  padding: 16px;
  background: var(--fg);
  color: var(--bg);
  border: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
  border-radius: 0;
}
.contact-form button:hover { background: var(--accent); }

/* ── Actualités ───────────────────────────────────────────── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 80px;
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
}
.news-card {
  padding: 36px 32px 32px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background .2s;
  background: var(--bg);
}
.news-card:hover { background: var(--bg-2); }
.news-card .cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 500;
}
.news-card h3 { font-size: 22px; line-height: 1.25; font-weight: 400; letter-spacing: -0.01em; }
.news-card .lede { font-size: 15px; color: var(--muted); margin-bottom: auto; }
.news-card .meta {
  font-size: 12px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--serif);
  font-style: italic;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
.news-filters {
  display: flex;
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.news-filters a {
  padding: 18px 24px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-right: 1px solid var(--border-soft);
  transition: color .15s;
}
.news-filters a:last-child { border-right: none; }
.news-filters a.active, .news-filters a:hover { color: var(--accent); }

/* ── Article ──────────────────────────────────────────────── */
.article-hero { padding: 180px 0 60px; border-top: none; }
.article-hero .crumbs { font-size: 13px; color: var(--muted); margin-bottom: 32px; }
.article-hero .cat {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 24px;
  display: inline-block;
}
.article-hero h1 { font-size: clamp(40px, 5vw, 64px); max-width: 880px; margin-bottom: 32px; }
.article-hero .lede { font-size: 20px; max-width: 720px; font-weight: 300; }
.article-meta {
  display: flex;
  gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  flex-wrap: wrap;
}
.article-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 0;
  border-top: 1px solid var(--border-soft);
  font-size: 18px;
  line-height: 1.7;
  color: var(--fg-2);
}
.article-body h2 { font-size: 32px; margin: 64px 0 24px; font-weight: 400; letter-spacing: -0.02em; }
.article-body h3 { font-size: 22px; margin: 40px 0 16px; font-weight: 500; }
.article-body p { margin-bottom: 24px; font-size: 18px; }
.article-body ul, .article-body ol { margin: 16px 0 32px 20px; }
.article-body ul li, .article-body ol li { padding: 6px 0; color: var(--fg-2); }
.article-body blockquote {
  border-left: 2px solid var(--accent);
  padding: 8px 24px;
  margin: 40px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--fg);
  background: var(--bg-2);
}
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body strong { color: var(--fg); font-weight: 500; }

.share-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin: 40px auto;
  max-width: 760px;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.share-bar a {
  width: 40px; height: 40px;
  border: 1px solid var(--border-soft);
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all .15s;
}
.share-bar a:hover { border-color: var(--accent); color: var(--accent); }

.article-related { border-top: 1px solid var(--border-soft); padding-top: 80px; padding-bottom: 80px; }
.article-related h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 32px;
}

/* ── Espace client ─────────────────────────────────────────── */
.espace-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 80px;
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
}
.espace-feature {
  padding: 40px 28px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
}
.espace-feature .icon {
  color: var(--accent);
  margin-bottom: 24px;
  display: block;
  width: auto; height: auto;
  background: none;
  border-radius: 0;
}
.espace-feature .icon svg { display: block; width: 22px; height: 22px; }
.espace-feature h3 { font-size: 18px; margin-bottom: 12px; }
.espace-feature p { font-size: 14px; color: var(--muted); }

.espace-cta-box {
  text-align: left;
  padding: 80px 40px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  margin-top: 80px;
}
.espace-cta-box h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 20px;
}
.espace-cta-box p { max-width: 640px; margin-bottom: 32px; color: var(--muted); font-size: 16px; }
.espace-cta-box .badge {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--warm);
  background: var(--warm-soft);
  padding: 6px 14px;
  margin-bottom: 24px;
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border-soft);
  padding: 80px 0 40px;
  background: var(--bg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}
.footer-grid h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 20px;
  font-weight: 500;
}
.footer-grid ul { list-style: none; }
.footer-grid ul li { padding: 6px 0; font-size: 14px; }
.footer-grid ul a { color: var(--fg-2); transition: color .15s; }
.footer-grid ul a:hover { color: var(--accent); }
.footer-brand .brand { font-size: 22px; margin-bottom: 16px; display: inline-flex; }
.footer-brand p { font-size: 14px; max-width: 320px; color: var(--muted); margin-bottom: 18px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-family: var(--serif);
  font-style: italic;
  transition: all .15s;
}
.footer-social a:hover { border-color: var(--accent); color: var(--accent); }
.footer-legal {
  border-top: 1px solid var(--border-soft);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted-2);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-legal a { color: var(--muted); text-decoration: none; margin-left: 14px; }
.footer-legal a:hover { color: var(--accent); }
.footer-seo {
  border-top: 1px solid var(--border-soft);
  padding: 24px 0;
  font-size: 12px;
  color: var(--muted-2);
  font-family: var(--serif);
  font-style: italic;
  text-align: center;
}
.footer-seo a { color: var(--muted); }
.footer-seo a:hover { color: var(--accent); }

/* ── WhatsApp flottant ────────────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99;
  width: 52px; height: 52px;
  background: #25D366;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  transition: transform .15s;
}
.wa-float:hover { transform: scale(1.08); }

/* ── Section fusion "Besoin + Méthode" en 2 colonnes ─────── */
.need-plus-method {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}
.need-plus-method .need-col { padding-right: 16px; }
.need-plus-method .method-col { }
.need-plus-method .subhead {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}
@media (max-width: 960px) {
  .need-plus-method { grid-template-columns: 1fr; gap: 40px; }
  .need-plus-method .need-col { padding-right: 0; }
}

/* ── Section "Ce qui est inclus" — compression 3 lignes horizontales ── */
.included-lines {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 32px;
}
.included-line {
  display: grid;
  grid-template-columns: 100px 1fr;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-soft);
  gap: 32px;
  align-items: start;
}
.included-line:first-child { border-top: 1px solid var(--border-soft); }
.included-line .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  color: var(--accent);
  line-height: 1;
  font-weight: 400;
}
.included-line h3 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.included-line p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 560px) {
  .included-line { grid-template-columns: 60px 1fr; gap: 16px; }
  .included-line .num { font-size: 26px; }
}

/* ── Section "Tarif" Sol3 — menu-list horizontal scrollable ── */
.pricing-menu-wrap {
  margin-top: 40px;
  position: relative;
  padding: 0 40px;
}
.pricing-menu {
  display: grid;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.pricing-menu::-webkit-scrollbar { display: none; }
.pricing-menu.horizontal { display: flex; gap: 0; }
.pricing-menu.horizontal .pricing-row { flex: 0 0 100%; scroll-snap-align: start; }
.pricing-menu.vertical { display: block; }
.pricing-row {
  display: grid;
  grid-template-columns: 1fr 100px 130px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-soft);
  gap: 20px;
  transition: background .2s;
}
.pricing-row:first-child { border-top: 1px solid var(--border-soft); }
.pricing-row:hover { background: var(--bg-2); }
.pricing-row.featured { background: rgba(107,158,126,0.06); }
.pricing-info .p-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 3px;
}
.pricing-info .p-name .p-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-size: 9px;
  padding: 2px 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 500;
}
.pricing-info .p-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.pricing-price {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--warm);
  text-align: right;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pricing-price .cur {
  font-size: 14px;
  vertical-align: super;
  margin-right: 1px;
}
.pricing-btn {
  display: inline-block;
  text-align: center;
  padding: 8px 14px;
  background: transparent;
  color: var(--fg);
  font-size: 12px;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid var(--fg);
  transition: all .15s;
}
.pricing-btn:hover { background: var(--fg); color: var(--bg); }
@media (max-width: 768px) {
  .pricing-row { grid-template-columns: 1fr auto; gap: 12px; padding: 14px 12px; }
  .pricing-price { font-size: 22px; }
  .pricing-btn { grid-column: 1 / -1; text-align: center; padding: 10px; }
  .pricing-menu-wrap { padding: 0; }
}

/* ── Section "Notre méthode" — cards liées par chevrons ──── */
@keyframes methodFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.method-flow {
  display: grid;
  gap: 0;
  margin-top: 60px;
  position: relative;
}
.method-flow.cols-4 { grid-template-columns: repeat(4, 1fr); }
.method-flow.cols-3 { grid-template-columns: repeat(3, 1fr); }
.method-card {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-top: 2px solid var(--accent);
  padding: 32px 28px 28px;
  position: relative;
  animation: methodFadeUp 0.6s ease-out both;
  transition: box-shadow .25s ease, transform .25s ease;
}
.method-card:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}
.method-flow .method-card:nth-child(1) { animation-delay: 0.05s; }
.method-flow .method-card:nth-child(2) { animation-delay: 0.20s; }
.method-flow .method-card:nth-child(3) { animation-delay: 0.35s; }
.method-flow .method-card:nth-child(4) { animation-delay: 0.50s; }

/* Chevrons entre cards (sauf dernier) */
.method-flow .method-card:not(:last-child)::after {
  content: "›";
  position: absolute;
  right: -12px;
  top: 30px;
  width: 24px;
  height: 24px;
  background: var(--bg-2);
  color: var(--accent);
  font-size: 26px;
  line-height: 24px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  z-index: 2;
  border-radius: 50%;
}

.method-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 44px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  font-weight: 400;
  display: block;
}
.method-card h3 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.method-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.method-card .when {
  display: inline-block;
  font-size: 11px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: var(--serif);
  font-style: italic;
}

@media (max-width: 960px) {
  .method-flow.cols-4, .method-flow.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .method-flow .method-card:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
  .method-flow.cols-4, .method-flow.cols-3 { grid-template-columns: 1fr; }
}

/* ── Section "Le besoin" — chiffres éditoriaux ────────────── */
.need-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin: 40px 0 32px;
}
.need-stat {
  padding: 36px 28px;
  border-right: 1px solid var(--border-soft);
  text-align: left;
}
.need-stat:last-child { border-right: none; }
.need-stat .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(36px, 4vw, 48px);
  color: var(--fg);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  font-weight: 400;
  display: block;
}
.need-stat .num.warm { color: var(--warm); }
.need-stat .num.accent { color: var(--accent); }
.need-stat .label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.5;
}
.need-lead {
  max-width: 780px;
  margin: 0 auto;
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.7;
  text-align: left;
}
.need-lead a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--serif);
  font-style: italic;
}
@media (max-width: 768px) {
  .need-stats { grid-template-columns: 1fr; }
  .need-stat { border-right: none; border-bottom: 1px solid var(--border-soft); text-align: center; }
  .need-stat:last-child { border-bottom: none; }
}

/* ── Services (product-card avec prix) ─────────────────────── */
.product-card .service-price {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  color: var(--warm);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 12px 0 16px;
}
.product-card .service-price .currency {
  font-size: 20px;
  vertical-align: super;
  margin-right: 2px;
}
.product-card .service-price .unit {
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-left: 8px;
  vertical-align: middle;
}
.product-card.featured {
  background: var(--bg-2);
  position: relative;
}
.product-card.featured::before {
  content: "Le plus choisi";
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  font-weight: 600;
  text-align: center;
}
.product-card.featured h3 { padding-top: 20px; }

/* ── Partenaires (liste textuelle italic) ─────────────────── */
.partners-block {
  padding: 40px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.partners-block h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: 20px;
  font-weight: 500;
}
.partners-list {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.8;
  color: var(--fg-2);
  font-weight: 400;
}
.partners-list .partner-name { color: var(--fg); }
.partners-list .partner-sep {
  color: var(--muted-2);
  margin: 0 4px;
  font-style: normal;
}

/* ── Carousel horizontal (Sovria style) ────────────────────── */
.carousel-container {
  position: relative;
  margin-top: 60px;
  padding: 0 24px;
}
.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 0 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  min-height: 340px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background .2s, box-shadow .2s;
}
.carousel-card:hover {
  background: var(--bg-2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.carousel-card.featured {
  background: var(--bg-2);
  border-color: var(--accent);
  position: relative;
}
.carousel-card.featured::before {
  content: "Le plus choisi";
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  font-weight: 600;
  text-align: center;
}
.carousel-card.featured h3 { padding-top: 16px; }
.carousel-card p { flex-grow: 1; font-size: 14px; }
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg);
  border: 1px solid var(--border);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  font-size: 22px;
  color: var(--fg);
  font-family: var(--serif);
  line-height: 1;
  padding: 0;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.carousel-arrow:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.carousel-prev { left: -8px; }
.carousel-next { right: -8px; }
.carousel-arrow[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Responsive ────────────────────────────────────────────── */
/* Tablet paysage (max 960px) — nav mobile, grilles à 2 colonnes */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .burger { display: block; }
  section { padding: 72px 0; }
  .hero { padding: 100px 0 60px; }
  .page-hero { padding: 100px 0 60px; }
  .article-hero { padding: 100px 0 40px; }
  .header-inner { padding: 20px 24px; position: relative; }

  /* Menu mobile déployé via JS .open */
  .main-nav.open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px 28px;
    z-index: 998;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
  }
  .main-nav.open ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
  }
  .main-nav.open ul li {
    border-bottom: 1px solid var(--border-soft);
    padding: 8px 0;
  }
  .main-nav.open ul li:last-child { border-bottom: none; }
  .main-nav.open ul li a {
    display: block;
    padding: 8px 4px;
    font-size: 16px;
    color: var(--fg);
  }
  .main-nav.open .dropdown {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 4px 12px 4px 20px;
    background: transparent;
    border: none;
    margin-top: 4px;
    min-width: 0;
  }
  .main-nav.open .dropdown a {
    font-size: 14px;
    color: var(--muted);
    padding: 6px 4px;
    border-bottom: none;
  }

  /* Grilles 2 colonnes sur tablette */
  .hero-stats, .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .kpi { border-right: none; padding: 20px 0; }
  .kpi:last-child { border-bottom: none; }
  .kpi:first-child { padding-left: 0; }

  .commitments .grid,
  .product-grid,
  .product-grid.cols-2,
  .values-grid,
  .pricing-grid,
  .quotes-grid,
  .news-grid,
  .difference-grid,
  .testimonials .product-grid { grid-template-columns: repeat(2, 1fr); }
  .commitment, .product-card, .value-card, .step, .plan, .quote, .news-card, .diff-col { border-right: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-form .row { grid-template-columns: 1fr; }
  .espace-grid { grid-template-columns: 1fr 1fr; }
  .article-body { padding: 40px 24px; font-size: 17px; }
  .article-body h2 { font-size: 26px; }
}

/* Tablet portrait / petits écrans (max 768px) — 1 colonne */
@media (max-width: 768px) {
  section { padding: 60px 0; }
  .hero { padding: 80px 0 50px; }
  .page-hero { padding: 80px 0 40px; }
  h1 { font-size: 40px; line-height: 1.15; }
  h2 { font-size: 28px; }
  .lede { font-size: 17px; }

  .hero-stats, .kpi-grid { grid-template-columns: 1fr; gap: 20px; }
  .kpi { border-bottom: 1px solid var(--border-soft); }
  .kpi:last-child { border-bottom: none; }

  .commitments .grid,
  .product-grid,
  .product-grid.cols-2,
  .values-grid,
  .pricing-grid,
  .quotes-grid,
  .news-grid,
  .difference-grid,
  .testimonials .product-grid { grid-template-columns: 1fr; gap: 20px; }

  .top-bar-inner { flex-direction: column; gap: 4px; text-align: center; }
  .banner-strip .container { flex-direction: column; gap: 8px; text-align: center; }
  .header-inner { padding: 16px 16px; }
  .header-cta { padding: 8px 14px; font-size: 13px; }
}

/* Mobile (max 560px) — ajustements finaux */
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  .lede { font-size: 16px; }
  section { padding: 48px 0; }
  .espace-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; text-align: left; }
  .brand img { height: 36px; }
  .header-cta { display: none; }
  .btn { padding: 12px 20px; font-size: 14px; }
  .plan .price { font-size: 40px; }
  .article-body { padding: 32px 16px; font-size: 16px; }
  .article-body h2 { font-size: 22px; }
}


/* ── Améliorations responsive fluide (Vague C) ──────────── */
:root {
  --font-fluid-body: clamp(15px, 0.4vw + 14px, 17px);
  --font-fluid-lede: clamp(17px, 0.5vw + 15px, 20px);
  --font-fluid-h3: clamp(19px, 0.5vw + 17px, 24px);
}
@media (max-width: 560px) {
  .brand img { height: 34px !important; }
  .page-hero { padding: 60px 0 32px; }
  .container { padding: 0 18px; }
  .section-head { margin-bottom: 40px; }
  h3, .product-card h3 { font-size: 17px; }
  .btn { padding: 12px 18px; font-size: 13px; }
  details p { font-size: 13px; }
  summary { font-size: 15px; }
}

/* Prévention overflow horizontal */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; overflow-x: auto; display: block; }
pre, code { overflow-x: auto; max-width: 100%; }

/* Print CSS minimal */
@media print {
  .top-bar, .site-header, .site-footer, .cta-section, .wa-float { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}
/* ═══════════════════════════════════════════════════════════
   VAGUE E — Responsive audit approfondi
   À AJOUTER À LA FIN de css/sovria.css
   Breakpoints ajoutés : 320 (mini smartphones) · 480 · 1200 · 1440
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Container fluide sécurisé pour tous les viewports ──── */
:root {
  --container-max: min(1200px, calc(100vw - 32px));
}

/* Empêche horizontal-scroll parasite sur mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

img, video, iframe, table, pre, code {
  max-width: 100%;
  height: auto;
}

/* Rendez toutes les tables scrollables horizontalement en mobile */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
@media (min-width: 768px) {
  table {
    display: table;
    white-space: normal;
    overflow-x: visible;
  }
}

/* ── 2. Breakpoint 320px — mini-smartphones (iPhone SE 1re gen) ── */
@media (max-width: 380px) {
  :root {
    --font-h1: clamp(1.75rem, 8vw, 2.25rem);
    --font-h2: clamp(1.5rem, 6.5vw, 1.875rem);
    --font-h3: 1.25rem;
    --gap-section: 40px;
    --gap-card: 12px;
  }
  .container { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: var(--font-h1); line-height: 1.15; letter-spacing: -0.01em; }
  h2 { font-size: var(--font-h2); line-height: 1.2; }
  .hero h1, .hero-title { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .btn, .cta-btn, button, .btn-primary, .btn-secondary {
    padding: 14px 20px;
    font-size: 14px;
    min-height: 44px; /* Apple/WCAG target size */
  }
  .card, .service-card, .pack-card, .kpi-card {
    padding: 16px;
    border-radius: 8px;
  }
  /* KPI section — 1 col si écran vraiment étroit */
  .kpi-grid { grid-template-columns: 1fr !important; gap: 12px; }
  /* Menu burger + top bar compact */
  .top-bar, .site-header { padding: 8px 12px; }
  .logo, .brand-logo { max-height: 32px; }
}

/* ── 3. Breakpoint 480px — smartphones portrait ────────────── */
@media (max-width: 480px) {
  .container, main .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* Sections avec padding vertical réduit */
  section, .section-wrap { padding-top: 40px; padding-bottom: 40px; }
  /* Grilles génériques → 1 col systématique */
  .grid, .service-grid, .card-grid, .partner-grid, .hub-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  /* Carrousels horizontaux — snap souple */
  .h-carousel, .services-carousel {
    scroll-snap-type: x mandatory;
    padding: 0 4px 12px;
  }
  .h-carousel > *, .services-carousel > * {
    scroll-snap-align: start;
    flex: 0 0 88%;
  }
  /* FAQ items — full width + labels multiligne */
  .faq-item summary { padding: 14px 16px; font-size: 15px; }
  /* Forms — labels au dessus + champs full-width */
  form label { display: block; margin-bottom: 6px; font-size: 14px; }
  form input, form select, form textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* évite le zoom iOS */
    padding: 12px 14px;
  }
  /* Footer 4 colonnes → 1 col */
  .site-footer .footer-cols,
  .site-footer nav ul {
    grid-template-columns: 1fr !important;
    flex-direction: column;
  }
}

/* ── 4. Breakpoint 1200px — desktops moyens ────────────────── */
@media (min-width: 1200px) {
  .container, main .wrap { max-width: 1160px; }
  section, .section-wrap { padding-top: 96px; padding-bottom: 96px; }
  /* Grilles services → 3 ou 4 colonnes selon densité */
  .service-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .hub-grid { grid-template-columns: repeat(4, 1fr); }
  .kpi-grid { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  /* Typo légèrement plus grande sur wide */
  h1, .hero h1 { font-size: clamp(2.5rem, 3.5vw, 3.5rem); line-height: 1.1; }
}

/* ── 5. Breakpoint 1440px — desktops larges/4K compact ─────── */
@media (min-width: 1440px) {
  .container, main .wrap { max-width: 1280px; }
  .hero, .hero-full {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  /* Carrousels : plus de cards visibles */
  .h-carousel > *, .services-carousel > * {
    flex-basis: calc(33.333% - 24px);
  }
}

/* ── 6. Accessibilité — reduced motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 7. Dark mode preference (soft) ─────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* On garde le design Sovria-blanc mais on améliore le focus visible */
  :focus-visible {
    outline: 2px solid var(--accent, #b89d5e);
    outline-offset: 2px;
  }
}

/* ── 8. Touch targets — respect WCAG 2.5.5 (44×44 minimum) ── */
@media (pointer: coarse) {
  a, button, [role="button"], input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }
  a.inline-link, p a { min-height: auto; min-width: auto; } /* liens texte in-line */
}

/* ── 9. Print styles minimaux (préparation PDF) ─────────────── */
@media print {
  .site-header, .site-footer, .top-bar, .banner-saisonnier, nav, .cta-btn {
    display: none !important;
  }
  main { padding: 0; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #666; }
  h1, h2, h3 { page-break-after: avoid; }
  section { page-break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════
   FIN VAGUE E — Responsive
   ═══════════════════════════════════════════════════════════ */


/* ============================================================
   Correctifs responsive & mobile — MyFinAssure (audit 18/07/2026)
   Ajoutes en fin de fichier pour surcharger les regles existantes.
   ============================================================ */

/* 1. Grille "A propos" : empilement sur mobile (corrige ~+416px de debordement) */
@media (max-width: 640px) {
  .product-grid { grid-template-columns: 1fr !important; }
  .product-card { border-right: none !important; }
}

/* 2. Bloc KPI de l'accueil : 2 colonnes sous 560px, sans padding/bordure laterale */
@media (max-width: 560px) {
  .kpi-grid, .hero-stats { grid-template-columns: 1fr 1fr !important; gap: 28px 16px !important; }
  .kpi { padding: 0 !important; border-right: none !important; }
}

/* 3. Cesure des mots longs dans les titres (H1 simulateur rogne sur mobile) */
h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 560px) {
  .page-hero h1 { font-size: clamp(26px, 8vw, 34px); }
}

/* 4. Champs de formulaire a 16px : evite le zoom automatique de Safari iOS */
.contact-form input,
.contact-form select,
.contact-form textarea { font-size: 16px !important; }

/* 5. Cibles tactiles plus confortables sur mobile (liens de pied de page) */
@media (max-width: 640px) {
  footer a { padding-top: 4px; padding-bottom: 4px; display: inline-block; }
}

/* Variante grille de cartes sans chevron (contenu non séquentiel) — audit */
.method-flow.no-chevron .method-card::after { display: none !important; }

/* Coche a la place du numero sur cartes non sequentielles — audit */
.method-num.check { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-style: normal; font-size: 32px; font-weight: 600; line-height: 1; }

/* Titres de cartes non sequentielles : alternance orange / vert — audit */
.method-flow.no-chevron .method-card:nth-child(odd) h3 { color: #fd6a02; }
.method-flow.no-chevron .method-card:nth-child(even) h3 { color: #28864a; }

/* Bulle CTA moderne et epuree — audit */
.cta-bubble { max-width: 720px; margin: 0 auto; background: #28864a; color: #fff; border-radius: 28px; padding: 52px 48px 44px; text-align: center; box-shadow: 0 20px 50px rgba(40,134,74,0.22); }
.cta-bubble h2 { color: #fff !important; margin: 0 0 14px !important; font-size: clamp(26px, 3.4vw, 38px) !important; line-height: 1.2; max-width: none !important; }
.cta-bubble p { color: rgba(255,255,255,0.88) !important; font-size: 17px; margin: 0 auto 30px !important; max-width: 520px; }
.cta-bubble .btn-primary { background: #fff !important; color: #28864a !important; border-color: #fff !important; }
.cta-bubble .btn-primary:hover { background: #f2f2f2 !important; transform: translateY(-1px); }

/* ============================================================
   Partenaires / assureurs : pastilles compactes et lisibles
   (correctif 20/07/2026 — trop d'espace, marques peu lisibles)
   ============================================================ */
.partners-block { padding: 24px 0 !important; }
.partners-block h4 { margin-bottom: 16px !important; }
.partners-list {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-style: normal !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--fg) !important;
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
}
.partners-list .partner-name {
  display: inline-block;
  font-style: normal;
  font-weight: 600;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  white-space: nowrap;
}
.partners-list .partner-sep { display: none !important; }

/* Mini-logo footer = bouclier MyFinAssure (brand-mini remplacement 20/07/2026) */
.brand-mini { content: url("../img/logo-footer.png") !important; width: 40px !important; height: 40px !important; object-fit: contain; }

/* Partenaires — tuiles logotype premium (20/07/2026) — mur de logos, prêt pour images */
.partners-block{padding:26px 0 !important;}
.partners-block h4{margin-bottom:18px !important;}
.partners-list{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px !important;align-items:stretch;}
.partners-list .partner-name{display:flex;align-items:center;justify-content:center;text-align:center;min-height:58px;padding:12px 16px;background:#ffffff;border:1px solid var(--border);border-radius:12px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-style:normal;font-weight:600;font-size:14px;letter-spacing:.2px;line-height:1.2;color:#6b6b64;transition:color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.partners-list .partner-name:hover{color:var(--fg);border-color:#28864a;box-shadow:0 6px 18px rgba(40,134,74,.10);transform:translateY(-2px);}
.partners-list .partner-name img{max-height:34px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .18s ease,opacity .18s ease;}
.partners-list .partner-name:hover img{filter:grayscale(0);opacity:1;}
.partners-list .partner-sep{display:none !important;}
@media (max-width:520px){.partners-list{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px !important;}.partners-list .partner-name{min-height:50px;font-size:13px;}}

/* ===== Formulaire de devis MyFinAssure (20/07/2026) ===== */
.devis-form{max-width:760px}
.devis-form .form-field{margin-bottom:18px}
.devis-form label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;color:var(--fg)}
.devis-form input,.devis-form select,.devis-form textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#fff;font-size:16px;font-family:inherit;color:var(--fg);box-sizing:border-box}
.devis-form input:focus,.devis-form select:focus,.devis-form textarea:focus{outline:none;border-color:#28864a;box-shadow:0 0 0 3px rgba(40,134,74,.12)}
.devis-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
@media(max-width:560px){.devis-form .form-grid{grid-template-columns:1fr}}
.devis-form fieldset.cond{border:1px solid var(--border);border-radius:12px;padding:18px 18px 6px;margin:0 0 18px;background:var(--bg-2)}
.devis-form fieldset.cond legend{font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;padding:0 8px;color:#28864a}
.devis-form .file input[type=file]{padding:10px;font-size:14px;background:#fff}
.devis-form .hint{font-size:12.5px;color:var(--muted);font-weight:400;margin-top:6px}
.devis-form .opt{font-size:12.5px;color:var(--muted);font-weight:400}
.devis-form .consent label{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;line-height:1.5}
.devis-form .consent input{width:auto;margin-top:3px;flex:0 0 auto}
.devis-form button.btn-primary{margin-top:8px}
.devis-form .fineprint{margin-top:14px;font-size:12.5px;color:var(--muted)}
.devis-note{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;font-size:13.5px;color:var(--muted);margin-bottom:22px}

/* Resserrement hero accueil (audit 20/07/2026) */
.hero{padding-top:96px !important;padding-bottom:64px !important}
@media(max-width:640px){.hero{padding-top:60px !important;padding-bottom:40px !important}}

/* Hero 2 colonnes + grille assurances (20/07/2026) */
@media(min-width:861px){.hero .container{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.82fr);column-gap:50px;align-items:start}.hero .container>*{grid-column:1}.hero .container>.hero-aside{grid-column:2;grid-row:1 / span 30;align-self:center;margin:0}}
.hero-aside{background:var(--bg-2);border:1px solid var(--border);border-radius:16px;padding:26px}
.hero-aside-badge{display:block;margin-bottom:12px}
.hero-aside-title{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.35;margin:0 0 14px;color:var(--fg)}
.hero-aside-list{list-style:none;padding:0;margin:0 0 18px}
.hero-aside-list li{font-size:13.5px;color:var(--muted);padding:8px 0;border-top:1px solid var(--border)}
.hero-aside-list li:first-child{border-top:none}
.hero-aside .btn-primary{width:100%;text-align:center}
.assur-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.assur-card{display:block;border:1px solid var(--border);border-radius:12px;padding:20px 22px;background:#fff;color:var(--fg);text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s;position:relative}
.assur-card:hover{border-color:#28864a;box-shadow:0 8px 22px rgba(40,134,74,.10);transform:translateY(-2px)}
.assur-card h3{margin:0 0 6px;font-size:17px}
.assur-card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.assur-card .assur-arrow{position:absolute;top:18px;right:20px;color:#fd6a02;font-weight:700}
.seo-block{padding-top:84px !important;padding-bottom:84px !important}

/* Logos partenaires en couleur (20/07/2026) */
.partners-list .partner-name img{max-height:30px !important;max-width:118px;width:auto;height:auto;object-fit:contain;display:block;margin:0 auto;filter:none !important;opacity:1 !important}
.partners-list .partner-name:hover img{filter:none !important;opacity:1 !important}

/* Resserrement mobile v2 (20/07/2026) */
@media(max-width:640px){
  main > section{padding-top:46px !important;padding-bottom:46px !important}
  .values-grid{grid-template-columns:1fr !important;gap:0 !important;grid-auto-rows:auto !important}
  .value-card{padding:24px 20px !important;min-height:0 !important}
  .method-flow{gap:14px !important}
  .method-card{min-height:0 !important}
  .included-line{margin-bottom:0 !important}
}

/* Timeline étapes interactive (20/07/2026) */
.stepper{max-width:600px;margin:44px auto 0;text-align:left}
.step-item{position:relative;padding-left:58px}
.step-item:not(:last-child)::before{content:'';position:absolute;left:19px;top:44px;bottom:0;width:2px;background:var(--border)}
.step-num{position:absolute;left:0;top:9px;width:40px;height:40px;border-radius:50%;background:#28864a;color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s;z-index:1}
.step-item.is-open .step-num{background:#fd6a02;transform:scale(1.06)}
.step-head{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:16px 0;margin:0;cursor:pointer;text-align:left;font-family:inherit}
.step-title{flex:1;font-size:17px;font-weight:600;color:var(--fg)}
.step-chevron{font-size:24px;color:var(--muted);transition:transform .25s,color .25s;line-height:1}
.step-item.is-open .step-chevron{transform:rotate(90deg);color:#fd6a02}
.step-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .32s ease,opacity .25s ease}
.step-item.is-open .step-body{max-height:260px;opacity:1;padding-bottom:14px}
.step-body p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
@media(max-width:640px){.step-title{font-size:16px}.step-num{width:36px;height:36px;font-size:15px}.step-item{padding-left:52px}.step-item:not(:last-child)::before{left:17px}}

/* Affordance clic etapes (20/07/2026) */
.stepper-hint{max-width:600px;margin:26px auto 0;text-align:center;font-size:13px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px}
.stepper-hint::before{content:'';width:16px;height:16px;border:1.5px solid #fd6a02;border-radius:50%;display:inline-block;background:radial-gradient(circle,#fd6a02 0 1.5px,transparent 2px),linear-gradient(#fd6a02,#fd6a02) center/7px 1.5px no-repeat,linear-gradient(#fd6a02,#fd6a02) center/1.5px 7px no-repeat}
.stepper{margin-top:18px !important}
.step-head{padding:14px 12px !important;border-radius:12px;transition:background .2s}
.step-head:hover{background:var(--bg-2)}
.step-item.is-open>.step-head{background:var(--bg-2)}
.step-chevron{font-size:0 !important;width:30px;height:30px;border:1.5px solid var(--border);border-radius:50%;display:flex !important;align-items:center;justify-content:center;flex:0 0 auto;transition:transform .28s ease,border-color .25s,background .25s}
.step-chevron::before{content:'+';font-size:22px;line-height:1;color:var(--muted);font-weight:400}
.step-head:hover .step-chevron{border-color:#fd6a02}
.step-item.is-open .step-chevron{transform:rotate(45deg) !important;border-color:#fd6a02;background:#fff;color:#fd6a02}
.step-item.is-open .step-chevron::before{color:#fd6a02}

/* Masquer eyebrow hero mobile (20/07/2026) */
@media(max-width:640px){.hero .eyebrow{display:none !important}}

/* Ordre hero mobile : titre d'abord, carte ensuite (20/07/2026) */
@media(max-width:860px){.hero .container{display:flex;flex-direction:column}.hero .container>.hero-aside{order:2;margin-top:26px}}

/* Carte hero logo+titre cote a cote + anim chiffres (20/07/2026) */
.hero-aside-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.hero-aside-badge{margin:0 !important;flex:0 0 auto;width:50px;height:50px}
.hero-aside-title{margin:0 !important;font-size:18px;line-height:1.3}
.num{font-variant-numeric:tabular-nums}

/* Bouton audit masque mobile - evite doublon devis (20/07/2026) */
@media(max-width:640px){.hero .hero-actions .btn-primary{display:none !important}.hero .hero-actions{gap:0}.hero .hero-actions .btn-ghost{width:100%;text-align:center}}

/* Hero mobile v3 + accent + sticky fix (20/07/2026) */
html,body{overflow-x:clip !important;overflow-y:visible !important}
.site-header{position:sticky !important;top:0 !important;z-index:1000 !important;background:#fff}
.hl-accent{font-family:var(--serif);font-style:italic;color:#fd6a02;font-weight:400}
@media(max-width:640px){
 .hero{padding-top:22px !important;padding-bottom:30px !important}
 .hero .hero-actions{margin-top:22px !important;margin-bottom:0 !important}
 .hero .hero-actions .btn-primary{display:inline-flex !important}
 .hero .hero-actions .btn-secondary{display:none !important}
 .hero .hero-actions .btn{width:100%;text-align:center;justify-content:center}
 .hero .hero-reassure{margin-top:20px !important;padding-top:16px;border-top:1px solid var(--border);font-style:normal !important}
 .hero .hero-reassure span{font-size:13.5px;color:var(--fg)}
}

/* ==== FOOTER-BRAND-COMPACT v20260736 ==== */
.footer-brand{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:16px;
  row-gap:8px;
  align-items:start;
}
.footer-brand .brand{ grid-column:1; grid-row:1; margin-bottom:0 !important; align-self:start; }
.footer-brand p{ grid-column:2; grid-row:1; margin:0 !important; max-width:none; }
.footer-brand .footer-social{ grid-column:2; grid-row:2; margin-top:2px; }
.footer-social a{ font-family:"Inter",system-ui,-apple-system,sans-serif !important; font-style:normal !important; font-weight:700; }
@media(max-width:860px){ .footer-brand{ column-gap:12px; } }
/* ==== /FOOTER-BRAND-COMPACT ==== */

/* ==== PAGE-HERO-HARMONISE v20260737 ==== */
.page-hero{ padding:112px 0 60px; }
.page-hero h1 em, .page-hero h1 .em{
  font-family:var(--serif);
  font-style:italic; font-weight:400;
  color:#fd6a02;
  background-image:none !important;
  padding-bottom:0;
}
@media(max-width:860px){
  .page-hero{ padding:96px 0 44px; }
}
@media(max-width:640px){
  .page-hero{ padding:88px 0 34px; }
  .page-hero .crumbs{ margin-bottom:14px; }
  .page-hero h1{ font-size:clamp(30px,8vw,40px); margin-bottom:18px; }
  .page-hero .lede{ font-size:15.5px; }
  .page-hero .eyebrow{ margin-bottom:16px; }
}
/* ==== /PAGE-HERO-HARMONISE ==== */

/* ==== PAGE-HERO-ASIDE v20260738 ==== */
@media(min-width:861px){
  .page-hero.has-aside .container{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.82fr);
    column-gap:48px;
    align-items:start;
  }
  .page-hero.has-aside .container > :not(.hero-aside){ grid-column:1; }
  .page-hero.has-aside .container > .hero-aside{ grid-column:2; grid-row:1 / span 30; align-self:start; margin-top:34px; }
}
.page-hero .hero-actions{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
@media(max-width:860px){
  .page-hero.has-aside .hero-aside{ margin-top:30px; }
}
@media(max-width:640px){
  .page-hero .hero-actions{ margin-top:20px; gap:10px; }
  .page-hero .hero-actions .btn{ width:100%; text-align:center; }
  .page-hero .hero-actions .btn-secondary{ display:none; }
}
/* ==== /PAGE-HERO-ASIDE ==== */

/* ==== BESOIN-REDESIGN v20260739 ==== */
@media(min-width:861px){
  section:has(> .container > .need-stats) > .container{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:52px;
    align-items:start;
  }
  section:has(.need-stats) .section-head{ grid-column:1 / -1; margin-bottom:34px; }
  section:has(.need-stats) .need-lead{ grid-column:1; grid-row:2; max-width:none; margin:0; align-self:start; }
  section:has(.need-stats) .need-stats{
    grid-column:2; grid-row:2; margin:0;
    grid-template-columns:1fr;
    border:1px solid var(--border-soft);
    border-radius:16px; overflow:hidden;
  }
  section:has(.need-stats) .need-stat{ border-right:none; border-bottom:1px solid var(--border-soft); padding:24px 26px; }
  section:has(.need-stats) .need-stat:last-child{ border-bottom:none; }
}
.need-lead a{ color:#fd6a02; font-weight:600; text-decoration:none; }
.need-lead a:hover{ text-decoration:underline; }
@media(max-width:860px){
  .need-stats{ margin:28px 0 24px; }
}
/* ==== /BESOIN-REDESIGN ==== */

/* ==== METHOD-POLISH v20260739 ==== */
.method-card{ transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease; }
.method-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(20,20,20,.35); z-index:2; }
.method-card:hover .method-num{ color:#fd6a02; }
section:has(.method-flow) .section-head{ margin-bottom:46px; }
@media(max-width:860px){ .method-flow.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .method-flow.cols-4{ grid-template-columns:1fr; } }
/* ==== /METHOD-POLISH ==== */

/* ==== STEPPER-PREMIUM v20260740 ==== */
@media(min-width:861px){
  section:has(.stepper) > .container{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    column-gap:64px;
    align-items:start;
  }
  section:has(.stepper) .section-head{ grid-column:1; margin-bottom:0; }
  section:has(.stepper) .stepper{ grid-column:2; }
}
.stepper{ max-width:none !important; margin:0 !important; display:flex; flex-direction:column; gap:14px; }
.stepper .step-item{
  display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:18px;
  padding:20px 24px; padding-left:24px !important;
  background:#fff; border:1px solid var(--border-soft); border-radius:16px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.stepper .step-item::before{ display:none !important; }
.stepper .step-item.is-open{ border-color:#fd6a02; box-shadow:0 20px 46px -30px rgba(0,0,0,.38); }
.stepper .step-num{
  position:static !important; grid-column:1; grid-row:1;
  width:46px; height:46px; margin:0 !important;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic; font-weight:400; font-size:21px; line-height:1;
  background:var(--bg-2); color:var(--fg); border:1px solid var(--border-soft);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.stepper .step-item.is-open .step-num{ background:#fd6a02 !important; color:#fff; border-color:#fd6a02; transform:none !important; }
.stepper .step-head{
  grid-column:2; grid-row:1; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0; background:none; border:none; cursor:pointer; text-align:left;
}
.stepper .step-title{ font-size:17px; font-weight:500; letter-spacing:-0.01em; color:var(--fg); }
.stepper .step-chevron{ font-size:23px; color:var(--muted); line-height:1; transition:transform .25s ease, color .25s ease; }
.stepper .step-item.is-open .step-chevron{ transform:rotate(90deg); color:#fd6a02; }
.stepper .step-body{
  grid-column:1 / -1; grid-row:2;
  max-height:0; overflow:hidden; opacity:0;
  padding-left:64px; padding-right:6px;
  transition:max-height .38s ease, opacity .28s ease, padding-top .28s ease;
}
.stepper .step-item.is-open .step-body{ max-height:220px; opacity:1; padding-top:14px; }
.stepper .step-body p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.62; }
@media(max-width:860px){
  .stepper .step-body{ padding-left:0; }
  section:has(.stepper) .section-head{ margin-bottom:30px; }
}
/* ==== /STEPPER-PREMIUM ==== */

/* ==== STEPPER-PREMIUM-FIX v20260741 ==== */
.stepper .step-head, .stepper .step-item.is-open .step-head, .stepper .step-title{ background:none !important; box-shadow:none !important; }
.stepper .step-head{ padding:0 !important; }
/* ==== /STEPPER-PREMIUM-FIX ==== */

/* ==== STEP-WHEN v20260742 ==== */
.stepper .step-when{ display:inline-block; margin-top:10px; font-family:var(--serif); font-style:italic; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.stepper .step-item:not(.is-open) .step-when{ display:none; }

/* ==== FOOTER-MOBILE-COMPACT v20260743 ==== */
@media(max-width:640px){
  footer .footer-grid{ grid-template-columns:1fr 1fr !important; gap:22px 18px !important; margin-bottom:32px !important; }
  footer .footer-grid .footer-brand{ grid-column:1 / -1; margin-bottom:2px; }
  footer .footer-grid h4{ margin-bottom:10px !important; }
  footer .footer-grid ul li{ padding:3px 0 !important; }
}
/* ==== /FOOTER-MOBILE-COMPACT ==== */

/* ==== TESTIMONIALS-CAROUSEL v20260744 ==== */
section:has(.testimonials-mini){ background:var(--bg-2); padding-top:42px !important; padding-bottom:42px !important; }
section:has(.testimonials-mini) .section-head{ margin-bottom:22px !important; max-width:none; text-align:center; }
section:has(.testimonials-mini) .section-head h2{ font-size:clamp(20px,2.4vw,26px); margin-bottom:0; }
.testimonials-mini{ display:flex !important; grid-template-columns:none !important; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:2px; padding:2px 2px 12px; scrollbar-width:none; }
.testimonials-mini::-webkit-scrollbar{ display:none; }
.testimonials-mini .tm-card{ flex:0 0 auto; width:min(360px,82vw); scroll-snap-align:center; margin:0 !important; }
@media(max-width:640px){ section:has(.testimonials-mini){ padding-top:30px !important; padding-bottom:30px !important; } section:has(.testimonials-mini) .section-head{ margin-bottom:16px !important; } .testimonials-mini .tm-card{ width:85vw; } }
/* ==== /TESTIMONIALS-CAROUSEL ==== */

/* ==== TESTIMONIALS-BAND-TWEAK v20260745 ==== */
section:has(.testimonials-mini){ padding-top:26px !important; padding-bottom:26px !important; }
section:has(.testimonials-mini) .section-head{ margin-bottom:14px !important; }
section:has(.testimonials-mini) .section-head h2{ display:none !important; }
section:has(.testimonials-mini) .section-head .eyebrow{ color:#fd6a02 !important; font-size:12.5px; margin-bottom:0 !important; }
section:has(.testimonials-mini) .tm-card{ padding:18px 20px !important; }
@media(max-width:640px){ section:has(.testimonials-mini){ padding-top:20px !important; padding-bottom:20px !important; } }
/* ==== /TESTIMONIALS-BAND-TWEAK ==== */

/* ==== SECTION-HEAD-SIMPLIFY v20260746 ==== */
/* Retirer le petit intitulé quand un vrai titre existe */
.section-head:has(h2) .eyebrow{ display:none !important; }
/* Accent orange italique sur le mot-clé du titre (comme les héros) */
.section-head h2 em, .section-head h2 .em{ color:#fd6a02 !important; background-image:none !important; padding-bottom:0 !important; }
/* Bandeau témoignages : on garde le titre (h2) compact, l'intitulé est retiré par la règle ci-dessus */
section:has(.testimonials-mini) .section-head h2{ display:block !important; font-size:clamp(18px,2.1vw,23px) !important; margin:0 !important; }
/* ==== /SECTION-HEAD-SIMPLIFY ==== */

/* ==== TESTIM-EYEBROW-BACK v20260747 ==== */
/* Bandeau témoignages : on garde l'intitulé « Ils nous font confiance » (orange) et on masque le titre */
section:has(.testimonials-mini) .section-head .eyebrow{ display:inline-block !important; color:#fd6a02 !important; font-size:12.5px; margin-bottom:0 !important; }
section:has(.testimonials-mini) .section-head h2{ display:none !important; }
/* ==== /TESTIM-EYEBROW-BACK ==== */

/* ==== DEVIS-FORM-REFINE v20260748 ==== */
.devis-form label, .devis-form legend, .devis-form .opt{ text-transform:none !important; letter-spacing:normal !important; }
.devis-form legend{ font-weight:600; }
.devis-form input[type="file"]{ width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; font-size:13.5px; color:var(--fg); }
.devis-form input[type="file"]::file-selector-button{ margin-right:12px; padding:7px 15px; border:1px solid var(--border); border-radius:6px; background:var(--bg-2); color:var(--fg); font-weight:600; font-size:13px; cursor:pointer; transition:background .15s ease; }
.devis-form input[type="file"]::file-selector-button:hover{ background:#ece8e0; }
.devis-form fieldset{ padding:14px 16px !important; margin-bottom:16px !important; }
.devis-form legend{ margin-bottom:10px !important; }
.devis-form .form-field{ margin-bottom:13px !important; }
.devis-form .form-field.file{ margin-bottom:0 !important; }
.devis-form .hint{ margin-top:4px !important; font-size:12px !important; line-height:1.4; }
.devis-form .form-field.consent label{ display:block !important; position:relative; padding-left:28px; font-weight:400 !important; font-size:13px !important; line-height:1.55; text-transform:none !important; letter-spacing:normal !important; }
.devis-form .form-field.consent input[type="checkbox"]{ position:absolute; left:0; top:3px; width:16px; height:16px; }
@media(max-width:600px){ .devis-form .form-grid{ grid-template-columns:1fr !important; } }
/* ==== /DEVIS-FORM-REFINE ==== */

/* ==== NAVGRID-PREMIUM v20260752 ==== */
/* Grilles de cartes-liens (Approfondir votre situation, Villes & cantons, Nos prestations) : rendu premium et coherent */
.method-flow.no-chevron{ margin-top:56px; border-top:1px solid var(--border-soft); border-left:1px solid var(--border-soft); }
.method-flow.no-chevron .method-card{
  background:var(--bg);
  border:none !important;
  border-right:1px solid var(--border-soft) !important;
  border-bottom:1px solid var(--border-soft) !important;
  padding:28px 52px 26px 30px;
  animation:none;
  transition:background .22s ease;
}
.method-flow.no-chevron .method-card:hover{ background:var(--bg-2); transform:none; box-shadow:none; }
/* Titre : encre sobre, plus d'alternance orange/vert */
.method-flow.no-chevron .method-card:nth-child(odd) h3,
.method-flow.no-chevron .method-card:nth-child(even) h3{ color:var(--fg); }
.method-flow.no-chevron .method-card h3{
  font-size:16.5px; font-weight:600; letter-spacing:-0.01em;
  margin-bottom:7px; transition:color .2s ease; display:flex; align-items:baseline; gap:8px;
}
.method-flow.no-chevron .method-card h3::after{
  content:"\2192"; margin-left:auto; color:var(--border);
  font-size:15px; transition:color .2s ease, transform .2s ease;
}
.method-flow.no-chevron .method-card:hover h3{ color:#fd6a02; }
.method-flow.no-chevron .method-card:hover h3::after{ color:#fd6a02; transform:translateX(4px); }
.method-flow.no-chevron .method-card p{ font-size:13.5px; color:var(--muted); line-height:1.6; margin-bottom:0; }
/* ==== END NAVGRID-PREMIUM ==== */

/* ==== KPI-ROW v20260753 ==== */
/* Desktop : tous les indicateurs sur une seule ligne, quel que soit leur nombre */
.kpi-grid, .hero-stats{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:1fr !important;
  grid-template-columns:none !important;
  gap:0 !important;
}
.kpi-grid .kpi:last-child, .hero-stats .kpi:last-child{ border-right:none; }
/* Responsive : 2 indicateurs par ligne (nombre pair) */
@media (max-width:720px){
  .kpi-grid, .hero-stats{
    grid-auto-flow:row !important;
    grid-auto-columns:auto !important;
    grid-template-columns:1fr 1fr !important;
    gap:24px 16px !important;
  }
}

/* KPI denses (5 indicateurs) : ajuster pour tenir sur une seule ligne sans casser les nombres */
.kpi-grid:has(.kpi:nth-child(5)) .kpi{ padding:0 16px; }
.kpi-grid:has(.kpi:nth-child(5)) .kpi .num{ font-size:clamp(30px,3vw,40px); white-space:nowrap; }
@media (max-width:720px){
  .kpi-grid:has(.kpi:nth-child(5)) .kpi{ padding:20px 0; }
  .kpi-grid:has(.kpi:nth-child(5)) .kpi .num{ white-space:normal; font-size:clamp(34px,7vw,44px); }
}
/* ==== END KPI-ROW ==== */

/* ==== BESOIN-BALANCE v20260755 ==== */
/* Titre dans la colonne gauche + carte stats alignee en haut avec le titre : evite le grand vide sous le texte court */
.need-section .container{ align-items:start; }
.need-section .section-head{ grid-column:1 !important; grid-row:1 !important; }
.need-section .need-lead{ grid-column:1 !important; grid-row:2 !important; align-self:start !important; }
.need-section .need-stats{ grid-column:2 !important; grid-row:1 / span 30 !important; align-self:start !important; }
/* ==== END BESOIN-BALANCE ==== */

/* ==== CROSS-CTA v20260756 ==== */
/* Bandeau cross-sell : texte a gauche, bouton a droite, aligne verticalement */
.cross-cta .container{ display:flex; align-items:center; justify-content:space-between; gap:48px; flex-wrap:wrap; }
.cross-cta .section-head{ margin-bottom:0 !important; max-width:640px; }
.cross-cta .section-head p{ margin-bottom:0 !important; }
.cross-cta > .container > div:last-child{ flex:0 0 auto; text-align:left; }
@media (max-width:720px){ .cross-cta .container{ flex-direction:column; align-items:flex-start; gap:22px; } }
/* ==== END CROSS-CTA ==== */

/* ==== KPI-LIGHT v20260757 ==== */
/* Allege le bandeau de chiffres : suppression des liseres haut/bas */
.kpi-block{ border-top:none !important; border-bottom:none !important; padding-top:40px !important; padding-bottom:40px !important; }
section:has(> .container > .kpi-block), section:has(> .container .kpi-block){ border-top:none !important; }
/* ==== END KPI-LIGHT ==== */

/* ==== FISCAL-CARDS v20260759 ==== */
.fiscal-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:0}
.fiscal-cards .fc-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 20px 20px;display:flex;flex-direction:column;text-decoration:none;color:var(--fg);transition:transform .2s,box-shadow .2s,border-color .2s;position:relative}
.fiscal-cards .fc-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.06);border-color:#d8d3c8}
.fiscal-cards .fc-card.f{border-color:#28864a}
.fiscal-cards .fc-badge{position:absolute;top:-9px;left:20px;background:#28864a;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.fiscal-cards .fc-tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9a9a90;font-weight:600;margin-bottom:10px}
.fiscal-cards .fc-name{font-size:16px;font-weight:600;line-height:1.3;margin-bottom:14px;min-height:42px;color:var(--fg)}
.fiscal-cards .fc-name em{font-family:var(--serif);font-style:italic;color:#fd6a02;font-weight:600;font-size:1.14em}
.fiscal-cards .fc-price{font-family:var(--serif);color:#28864a;font-weight:600;font-size:42px;line-height:1}
.fiscal-cards .fc-cur{font-size:.5em;vertical-align:.12em;margin-left:1px}
.fiscal-cards .fc-unit{font-size:11px;color:#9a9a90;letter-spacing:.05em;margin:6px 0 12px}
.fiscal-cards .fc-desc{font-size:12.5px;color:var(--muted);line-height:1.45;margin:0 0 18px;padding-top:12px;border-top:1px solid #f0ede6;min-height:54px}
.fiscal-cards .fc-btn{margin-top:auto;text-align:center;font-size:13px;font-weight:600;background:var(--fg);color:#fff;border-radius:9px;padding:11px;transition:background .2s}
.fiscal-cards .fc-card:hover .fc-btn{background:#000}
.fiscal-cards .fc-card.f .fc-btn{background:#28864a}
@media(max-width:980px){.fiscal-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.fiscal-cards{grid-template-columns:repeat(2,1fr)}.fiscal-cards .fc-name,.fiscal-cards .fc-desc{min-height:0}}
/* ==== END FISCAL-CARDS ==== */

/* ==== NEED-STAT-CENTER v20260760 ==== */
.need-stats .need-stat{ text-align:center !important; }
/* ==== END NEED-STAT-CENTER ==== */