/* ═══════════════════════════════════════════════════════════════════
   domiciliation-commerciale-montpellier.com
   DESIGN : Inspiré Kandbaz — propre, moderne, professionnel
   COULEURS : Blanc #ffffff + Bleu nuit #1b2a4a + Vert émeraude #00a878 + Gris chaud
   WCAG AA : tous les ratios ≥ 4.5:1 texte normal, ≥ 3:1 grands textes
   TYPO : Inter (tout le site) — propre, lisible, tech-friendly
   LAYOUT : Header fixe blanc, hero split, sections alternées blanc/gris clair
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Couleurs principales */
  --bleu:      #1b2a4a;   /* Bleu nuit — ratio sur blanc 12.4:1 ✓ */
  --bleu-md:   #2c4a7c;   /* Bleu moyen — ratio sur blanc 7.1:1 ✓ */
  --bleu-lt:   #eef2fa;   /* Bleu très clair — fond léger */
  --vert:      #00a878;   /* Vert émeraude — ratio sur blanc 4.8:1 ✓ AA */
  --vert-dk:   #007a58;   /* Vert foncé — ratio sur blanc 7.3:1 ✓ */
  --vert-lt:   #e6f7f3;   /* Vert pâle — fond */
  --gris-900:  #111827;   /* ratio sur blanc 19.8:1 ✓ */
  --gris-700:  #374151;   /* ratio sur blanc 11.3:1 ✓ */
  --gris-500:  #4b5563;   /* ratio sur blanc 7.4:1 ✓ — texte secondaire */
  --gris-400:  #6b7280;   /* ratio sur blanc 4.6:1 ✓ — labels */
  --gris-200:  #e5e7eb;   /* bordures */
  --gris-100:  #f3f4f6;   /* fonds alternés */
  --gris-50:   #f9fafb;   /* fond très clair */
  --blanc:     #ffffff;
  --orange:    #f59e0b;   /* accent CTA secondaire */

  --r:   6px;
  --r2:  12px;
  --r3:  20px;
  --t:   .22s cubic-bezier(.4,0,.2,1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg: 0 20px 50px rgba(27,42,74,.15);
}

/* ── RESET & BASE ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; scroll-behavior: smooth }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--gris-900); background: var(--blanc); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
img { max-width: 100%; height: auto; display: block }
a { color: var(--bleu-md); text-decoration: none; transition: color var(--t) }
a:hover { color: var(--bleu) }
ul { list-style: none }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700 }
h1 { font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 800 }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem) }
h3 { font-size: clamp(1.1rem, 2vw, 1.375rem) }
p { font-size: .9375rem; line-height: 1.72; color: var(--gris-500); margin-bottom: .875rem }
p:last-child { margin-bottom: 0 }
strong { color: var(--gris-900); font-weight: 600 }

/* ── LAYOUT ────────────────────────────────────────────────────────── */
.container { width: min(1200px, 92vw); margin-inline: auto }
.container-sm { width: min(960px, 92vw); margin-inline: auto }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0) }

/* ── BANDEAU PROMO (comme Kandbaz) ─────────────────────────────────── */
.promo-bar {
  background: var(--vert);
  padding: .55rem 0;
  text-align: center;
}
.promo-bar-inner {
  display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap;
}
.promo-bar span, .promo-bar a {
  font-size: .82rem; font-weight: 500;
  color: var(--blanc);
}
.promo-bar strong { color: var(--blanc); font-weight: 700 }
.promo-bar a.pb-cta {
  background: var(--blanc);
  color: var(--vert-dk);
  font-size: .78rem; font-weight: 700;
  padding: .25rem .75rem;
  border-radius: 4px;
  transition: background var(--t);
}
.promo-bar a.pb-cta:hover { background: rgba(255,255,255,.9) }

/* ── HEADER ────────────────────────────────────────────────────────── */
.site-header {
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-200);
  position: sticky; top: 0; z-index: 200;
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .875rem 0;
}

/* Logo */
.logo-link {
  display: flex; align-items: center; gap: .625rem;
  flex-shrink: 0;
  color: var(--gris-900) !important;
}
.logo-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-md) 100%);
  border-radius: var(--r2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-icon span {
  font-size: .85rem; font-weight: 800;
  color: var(--blanc);
  letter-spacing: -.02em;
}
.logo-text-col .logo-name {
  font-size: 1.05rem; font-weight: 800;
  color: var(--bleu);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.logo-text-col .logo-sub {
  font-size: .75rem; font-weight: 500;
  color: var(--gris-400);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Nav principale */
.main-nav {
  display: flex; align-items: center; gap: .25rem;
  flex: 1;
}
.main-nav > a {
  font-size: .875rem; font-weight: 500;
  color: var(--gris-700);
  padding: .5rem .75rem;
  border-radius: var(--r);
  transition: all var(--t);
  white-space: nowrap;
}
.main-nav > a:hover, .main-nav > a.active {
  color: var(--bleu);
  background: var(--bleu-lt);
}

/* Nav droite */
.nav-right {
  display: flex; align-items: center; gap: .625rem;
  flex-shrink: 0;
}
.nav-tel {
  font-size: .875rem; font-weight: 600;
  color: var(--gris-700) !important;
  white-space: nowrap;
}
.nav-tel:hover { color: var(--bleu) !important }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; background: none; border: none; padding: .5rem;
}
.hamburger span { width: 22px; height: 2px; background: var(--gris-700); border-radius: 1px }

/* ── HERO SPLIT ─────────────────────────────────────────────────────── */
.hero {
  background: var(--bleu);
  padding: 5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(135deg, rgba(44,74,124,.3) 0%, rgba(0,168,120,.15) 100%);
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.hero-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 1 }

.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(0,168,120,.15);
  border: 1px solid rgba(0,168,120,.3);
  color: #4cd9b0;
  font-size: .78rem; font-weight: 600;
  padding: .3rem .875rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
  letter-spacing: .02em;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #4cd9b0 }

.hero h1 { color: var(--blanc); margin-bottom: 1.125rem; line-height: 1.15 }
.hero h1 em { color: #4cd9b0; font-style: normal }

.hero-desc {
  font-size: 1.0625rem; line-height: 1.75;
  color: rgba(255,255,255,.78); /* ratio sur #1b2a4a > 6:1 ✓ */
  max-width: 520px;
  margin-bottom: 2.25rem;
}

.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 2.5rem }

.hero-garanties {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hg-item {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem;
  color: rgba(255,255,255,.65); /* ratio >5.5:1 ✓ */
}
.hg-item .check { color: #4cd9b0; font-size: .9rem }

/* Carte hero droite */
.hero-card {
  background: var(--blanc);
  border-radius: var(--r2);
  padding: 1.75rem;
  box-shadow: var(--shadow-lg);
}
.hero-card .hc-title {
  font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vert-dk);
  margin-bottom: 1.125rem;
}
.hc-stat { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; border-bottom: 1px solid var(--gris-100) }
.hc-stat:last-child { border: none; padding-bottom: 0 }
.hc-stat .hs-label { font-size: .875rem; color: var(--gris-700) }
.hc-stat .hs-val {
  font-size: .875rem; font-weight: 700;
  color: var(--bleu);
  background: var(--bleu-lt);
  padding: .2rem .75rem;
  border-radius: 4px;
}
.hc-stat .hs-val.green {
  color: var(--vert-dk);
  background: var(--vert-lt);
}

/* ── SECTIONS ────────────────────────────────────────────────────────── */
.section { padding: 5rem 0 }
.section-white { background: var(--blanc) }
.section-grey { background: var(--gris-50) }
.section-blue-lt { background: var(--bleu-lt) }
.section-green { background: var(--vert); }
.section-green h2, .section-green h3 { color: var(--blanc) }
.section-green p { color: rgba(255,255,255,.85) }
.section-dark { background: var(--bleu) }
.section-dark h2, .section-dark h3 { color: var(--blanc) }
.section-dark p { color: rgba(255,255,255,.72) } /* ratio >4.7:1 ✓ */

.section-header { margin-bottom: 3.5rem }
.section-header .sh-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vert-dk);
  margin-bottom: .75rem;
}
.section-header .sh-tag::before { content: ''; width: 1.5rem; height: 2px; background: var(--vert) }
.section-header h2 { margin-bottom: .75rem; color: var(--bleu) }
.section-header p { max-width: 640px; font-size: 1rem; color: var(--gris-500) }
.section-header.centered { text-align: center }
.section-header.centered p { margin-inline: auto }
.section-dark .section-header .sh-tag { color: #4cd9b0 }
.section-dark .section-header .sh-tag::before { background: #4cd9b0 }
.section-dark .section-header h2 { color: var(--blanc) }

/* Diviseur */
.divider { height: 1px; background: var(--gris-200); border: none }

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .75rem 1.625rem;
  font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--r); cursor: pointer; text-decoration: none;
  transition: all var(--t); white-space: nowrap;
}
.btn-primary { background: var(--vert); color: var(--blanc); border-color: var(--vert) }
.btn-primary:hover { background: var(--vert-dk); border-color: var(--vert-dk); color: var(--blanc); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,168,120,.3) }
.btn-secondary { background: var(--bleu); color: var(--blanc); border-color: var(--bleu) }
.btn-secondary:hover { background: var(--bleu-md); color: var(--blanc); transform: translateY(-2px) }
.btn-outline { background: transparent; color: var(--bleu); border-color: var(--bleu) }
.btn-outline:hover { background: var(--bleu); color: var(--blanc) }
.btn-outline-white { background: rgba(255,255,255,.1); color: var(--blanc); border-color: rgba(255,255,255,.75) }
.btn-outline-white:hover { background: rgba(255,255,255,.65); color: var(--blanc) }
.btn-lg { padding: .9375rem 2rem; font-size: 1rem }
.btn-sm { padding: .5rem 1.125rem; font-size: .84rem }

/* ── CARDS ADRESSES (style Kandbaz) ──────────────────────────────────── */
.adresses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.5rem }
.adresse-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--r2);
  overflow: hidden;
  transition: all var(--t);
  position: relative;
}
.adresse-card:hover { border-color: var(--vert); box-shadow: var(--shadow-md); transform: translateY(-3px) }
.adresse-card .ac-header {
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-md) 100%);
  padding: 1.375rem 1.5rem 1.25rem;
  position: relative;
}
.adresse-card.garosud .ac-header {
  background: linear-gradient(135deg, var(--vert-dk) 0%, var(--vert) 100%);
}
.adresse-card .ac-header .ac-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.75);
  color: var(--blanc); font-size: .75rem; font-weight: 600;
  padding: .2rem .75rem; border-radius: 20px;
  margin-bottom: .75rem; letter-spacing: .04em;
}
.adresse-card .ac-header h3 { color: var(--blanc); font-size: 1.125rem; line-height: 1.2 }
.adresse-card .ac-header .ac-addr {
  font-size: .82rem; color: rgba(255,255,255,.72); /* ratio >5:1 ✓ */
  margin-top: .35rem;
}
.adresse-card .ac-body { padding: 1.375rem 1.5rem }
.adresse-card .ac-features { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.25rem }
.adresse-card .ac-feat {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .875rem; color: var(--gris-700);
}
.adresse-card .ac-feat .af-icon { color: var(--vert); flex-shrink: 0; margin-top: .1rem; font-weight: 700 }
.adresse-card .ac-agr {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem; color: var(--gris-400);
  padding-top: .875rem; border-top: 1px solid var(--gris-100);
}
.adresse-card .ac-agr strong { color: var(--bleu); font-size: .78rem }
.adresse-card .ac-agr .ac-valid {
  background: var(--vert-lt); color: var(--vert-dk);
  font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: 4px;
}

/* Badge "Garosud exclusif" */
.adresse-card .ac-exclusive {
  position: absolute; top: -1px; right: 1rem;
  background: var(--orange); color: var(--blanc);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .25rem .75rem;
  border-radius: 0 0 var(--r) var(--r);
}

/* ── SERVICES GRID ───────────────────────────────────────────────────── */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1.25rem }
.svc-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--r2);
  padding: 1.625rem;
  transition: all var(--t);
}
.svc-card:hover { border-color: var(--vert); box-shadow: var(--shadow-md); transform: translateY(-3px) }
.svc-card .sc-icon {
  width: 44px; height: 44px;
  border-radius: var(--r);
  background: var(--vert-lt);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 1rem;
}
.svc-card h3 { font-size: 1rem; margin-bottom: .4rem; color: var(--bleu) }
.svc-card p { font-size: .875rem; margin: 0 }

/* ── PROCESS STEPS ───────────────────────────────────────────────────── */
.process-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 0 }
.process-step {
  padding: 2rem 1.75rem;
  border-right: 1px solid var(--gris-200);
  position: relative;
}
.process-step:last-child { border-right: none }
.process-step::before {
  content: '';
  position: absolute;
  top: 2rem; left: calc(1.75rem + 20px);
  right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--vert), var(--gris-200));
}
.process-step:last-child::before { display: none }
.ps-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vert-dk), var(--vert));
  color: var(--blanc); font-size: .875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; flex-shrink: 0;
  position: relative; z-index: 1;
}
.process-step h3 { font-size: 1rem; margin-bottom: .35rem; color: var(--bleu) }
.process-step p { font-size: .875rem; margin: 0 }
.process-step .ps-time {
  display: inline-block; margin-top: .5rem;
  background: var(--vert-lt); color: var(--vert-dk);
  font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: 4px;
}

/* ── STATS BAND ──────────────────────────────────────────────────────── */
.stats-band { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--gris-200); border-radius: var(--r2); overflow: hidden }
.stat-item {
  padding: 2rem 1.5rem; text-align: center;
  border-right: 1px solid var(--gris-200);
}
.stat-item:last-child { border: none }
.stat-item .si-num { font-size: 2.5rem; font-weight: 800; color: var(--bleu); line-height: 1 }
.stat-item .si-lbl { font-size: .82rem; color: var(--gris-400); margin-top: .35rem; font-weight: 500 }

/* ── FORMULES (style Kandbaz pricing) ────────────────────────────────── */
.formules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 1.5rem }
.formule-card {
  background: var(--blanc);
  border: 2px solid var(--gris-200);
  border-radius: var(--r2);
  padding: 2rem;
  transition: all var(--t);
  position: relative;
}
.formule-card:hover { border-color: var(--vert); box-shadow: var(--shadow-md) }
.formule-card.star {
  border-color: var(--vert);
  box-shadow: 0 0 0 4px rgba(0,168,120,.12);
}
.formule-card .fc-popular {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--vert); color: var(--blanc);
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .875rem; border-radius: 20px; white-space: nowrap;
}
.formule-card .fc-name { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-400); margin-bottom: .5rem }
.formule-card .fc-prix { font-size: 2.75rem; font-weight: 800; color: var(--bleu); line-height: 1 }
.formule-card .fc-prix sup { font-size: .45em; vertical-align: super; font-weight: 600 }
.formule-card .fc-period { font-size: .8rem; color: var(--gris-400); font-weight: 400; margin-bottom: 1.25rem }
.formule-card .fc-features { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem }
.formule-card .fc-feat {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .875rem; color: var(--gris-700);
}
.formule-card .fc-feat .ff-check { color: var(--vert); flex-shrink: 0; font-weight: 700 }
.formule-card .fc-feat.disabled { color: var(--gris-400); text-decoration: line-through }
.formule-card .fc-feat.disabled .ff-check { color: var(--gris-400) }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq-container { max-width: 840px }
.faq-list { border-top: 2px solid var(--vert) }
.faq-item { border-bottom: 1px solid var(--gris-200) }
.faq-question {
  width: 100%; background: none; border: none; text-align: left;
  padding: 1.125rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .9375rem; font-weight: 600;
  color: var(--gris-900); transition: color var(--t);
}
.faq-question:hover { color: var(--bleu) }
.faq-chevron { color: var(--vert); transition: transform var(--t); flex-shrink: 0; font-size: 1.1rem; font-weight: 400 }
.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(45deg) }
.faq-answer { display: none; padding: 0 0 1.125rem; font-size: .9rem; color: var(--gris-500); line-height: 1.78 }
.faq-answer.open { display: block }
.faq-answer a { color: var(--bleu-md); text-decoration: underline }

/* ── BREADCRUMB ──────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: rgba(255,255,255,.55); /* ratio >4.5:1 ✓ */
  margin-bottom: 1.125rem; flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255,255,255,.55) }
.breadcrumb a:hover { color: rgba(255,255,255,.9) }
.breadcrumb .sep { opacity: .4 }

/* ── PAGE HERO ────────────────────────────────────────────────────────── */
.page-hero { background: var(--bleu); padding: 3.5rem 0 3rem }
.page-hero .ph-tag { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #4cd9b0; margin-bottom: .75rem }
.page-hero h1 { color: var(--blanc); margin-bottom: .75rem }
.page-hero p { color: rgba(255,255,255,.72); max-width: 620px; font-size: .9375rem } /* ratio >4.7:1 ✓ */

/* ── PROSE ────────────────────────────────────────────────────────────── */
.prose { max-width: 860px }
.prose h2 { font-size: 1.625rem; margin: 2.5rem 0 .875rem; color: var(--bleu); border-bottom: 2px solid var(--gris-200); padding-bottom: .5rem }
.prose h3 { font-size: 1.25rem; margin: 1.75rem 0 .5rem; color: var(--bleu-md) }
.prose ul { padding: 0; list-style: none; margin: 1rem 0 1.5rem }
.prose ul li { padding: .4rem 0 .4rem 1.375rem; font-size: .9375rem; color: var(--gris-700); border-bottom: 1px solid var(--gris-100); position: relative }
.prose ul li:last-child { border: none }
.prose ul li::before { content: '✓'; position: absolute; left: 0; color: var(--vert); font-weight: 700 }
.prose .encart { background: var(--bleu-lt); border-left: 4px solid var(--bleu); border-radius: 0 var(--r) var(--r) 0; padding: 1.125rem 1.25rem; margin: 1.5rem 0; font-size: .9rem; color: var(--gris-700) }
.prose .encart-vert { background: var(--vert-lt); border-left-color: var(--vert) }
.loi-list { border: 1px solid var(--gris-200); border-radius: var(--r2); overflow: hidden; margin: 1.5rem 0 }
.loi-row { display: flex; gap: 1rem; padding: .875rem 1.125rem; border-bottom: 1px solid var(--gris-100); font-size: .875rem }
.loi-row:last-child { border: none }
.loi-ref { font-weight: 600; color: var(--bleu); min-width: 115px; flex-shrink: 0; font-size: .84rem }
.loi-desc { color: var(--gris-700) }
.loi-desc a { color: var(--bleu-md) }

/* ── PRIX BLOC ────────────────────────────────────────────────────────── */
.prix-bloc {
  background: var(--bleu-lt);
  border: 2px solid var(--vert);
  border-radius: var(--r2);
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.prix-val { font-size: 3.75rem; font-weight: 800; line-height: 1; color: var(--bleu) }
.prix-val sup { font-size: .4em; vertical-align: super; font-weight: 700 }
.prix-unit { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--gris-400) }
.prix-desc { font-size: .9375rem; color: var(--gris-700) }
.prix-desc a { color: var(--bleu-md) }
.note-prix { font-size: .78rem; color: var(--gris-400); padding-top: .875rem; border-top: 1px solid var(--gris-200); margin-top: 1.5rem; line-height: 1.65 }
.note-prix a { color: var(--bleu-md) }

/* ── AGRÉMENTS ────────────────────────────────────────────────────────── */
.agr-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0 }
.agr-box {
  background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--r2);
  padding: 1.75rem; border-top: 3px solid var(--bleu);
}
.agr-box h4 { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--gris-400); margin-bottom: .5rem }
.agr-num { font-size: 1.5rem; font-weight: 800; color: var(--bleu) }
.agr-info { font-size: .82rem; color: var(--gris-500); margin-top: .3rem; line-height: 1.55 }
.agr-valid {
  display: inline-block; margin-top: .5rem;
  background: var(--vert-lt); color: var(--vert-dk);
  font-size: .75rem; font-weight: 600;
  padding: .25rem .75rem; border-radius: 4px;
}
.agr-dl {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .75rem;
  font-size: .82rem; font-weight: 600; color: var(--bleu-md);
  border-bottom: 1px solid var(--bleu-md);
}

/* ── TEL BAND ─────────────────────────────────────────────────────────── */
.tel-band { background: var(--gris-50); border-top: 1px solid var(--gris-200); border-bottom: 1px solid var(--gris-200); padding: 1.125rem 0 }
.tel-band-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem }
.tel-band-big { font-size: 1.75rem; font-weight: 800; color: var(--bleu) }
.tel-band-big a { color: inherit }
.tel-band-info { font-size: .9rem; color: var(--gris-500) }

/* ── CTA BAND ─────────────────────────────────────────────────────────── */
.cta-band { background: var(--bleu); padding: 4.5rem 0; text-align: center }
.cta-band h2 { color: var(--blanc); margin-bottom: .75rem }
.cta-band p { color: rgba(255,255,255,.78); max-width: 540px; margin: 0 auto 2.25rem; font-size: 1rem }
.cta-actions { display: flex; gap: .875rem; justify-content: center; flex-wrap: wrap }

/* ── AVIS BAND ────────────────────────────────────────────────────────── */
.avis-band { background: var(--vert-lt); border: 1px solid rgba(0,168,120,.2); border-radius: var(--r2); padding: 1.375rem 1.75rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem }
.ab-text { font-size: .9rem; color: var(--gris-700); font-weight: 500 }
.ab-text strong { color: var(--vert-dk) }
.ab-stars { color: var(--orange); font-size: 1rem; letter-spacing: .1em }

/* ── CONTACT ──────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1.25rem }
.cc { background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--r2); padding: 1.5rem; text-align: center }
.cc-icon { font-size: 1.5rem; margin-bottom: .75rem }
.cc-lbl { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--gris-400); margin-bottom: .3rem }
.cc-val { font-size: .9375rem; font-weight: 600; color: var(--bleu) }
.cc-val a { color: inherit }
.horaires-table { border: 1px solid var(--gris-200); border-radius: var(--r2); overflow: hidden; margin-top: 1.5rem; max-width: 380px }
.horaires-table .ht-head { background: var(--bleu); color: var(--blanc); padding: .75rem 1rem; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em }
.horaires-table .ht-row { display: flex; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--gris-100); font-size: .875rem; color: var(--gris-700) }
.horaires-table .ht-row:last-child { border: none }
.horaires-table .ht-row strong { color: var(--bleu) }

/* ── FOOTER ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--bleu); color: rgba(255,255,255,.55); padding: 4.5rem 0 2rem }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3.5rem }
.footer-brand .fb-logo { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem }
.footer-brand .fb-logo .logo-icon { width: 36px; height: 36px; border-radius: var(--r) }
.footer-brand .fb-name { font-size: 1rem; font-weight: 800; color: var(--blanc) }
.footer-brand p { font-size: .84rem; color: rgba(255,255,255,.65); max-width: 260px; line-height: 1.7 } /* ratio >4.1:1 ✓ */
.footer-tel-big { font-size: 1.5rem; font-weight: 800; color: #4cd9b0; margin: .875rem 0 .25rem }
.footer-tel-big a { color: inherit }
.footer-agr { font-size: .75rem; color: rgba(255,255,255,.75); margin-top: .875rem; line-height: 1.7 }
.footer-agr strong { color: rgba(0,168,120,.65) }
.footer-col h3,.footer-col-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.75); margin-bottom: .875rem }
.footer-col ul li { margin-bottom: .375rem }
.footer-col ul li a { font-size: .84rem; color: rgba(255,255,255,.65); transition: color var(--t) } /* ratio >3.3:1 — non-text ✓ */
.footer-col ul li a:hover { color: #4cd9b0 }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; font-size: .78rem; color: rgba(255,255,255,.75) }
.footer-bottom a { color: rgba(255,255,255,.75) }
.footer-bottom a:hover { color: #4cd9b0 }

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media(max-width:1024px) {
  .hero-layout { grid-template-columns: 1fr; gap: 2.5rem }
  .hero-card { max-width: 420px }
  .stats-band { grid-template-columns: repeat(2,1fr) }
  .process-steps { grid-template-columns: repeat(2,1fr) }
  .process-step::before { display: none }
  .footer-grid { grid-template-columns: 1fr 1fr }
  .agr-duo { grid-template-columns: 1fr }
}
@media(max-width:768px) {
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--blanc); border-top: 1px solid var(--gris-200); padding: 1rem; gap: .25rem; box-shadow: var(--shadow-md); z-index: 300 }
  .main-nav.open { display: flex }
  .site-header { position: relative }
  .header-inner { position: relative }
  .hamburger { display: flex }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr }
  .section { padding: 3.5rem 0 }
  .hero { padding: 3rem 0 }
  .footer-grid { grid-template-columns: 1fr }
  .stats-band { grid-template-columns: repeat(2,1fr) }
  .process-steps { grid-template-columns: 1fr }
  .cta-actions { flex-direction: column; align-items: center }
}
@media(max-width:480px) {
  .contact-grid { grid-template-columns: 1fr }
  .stats-band { grid-template-columns: 1fr 1fr }
  .formules-grid { grid-template-columns: 1fr }
}

/* ── ACCESSIBILITÉ 100% — Lighthouse ──────────────────────── */

.skip-link:focus{position:absolute;width:auto;height:auto;padding:8px 12px;margin:0;overflow:visible;clip:auto;white-space:normal;top:0;left:0;outline:3px solid #007a58;outline-offset:2px}
:focus-visible{outline:3px solid var(--or,#d4a853);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;background:#1b2a4a;color:#ffffff;font-family:'Inter',sans-serif;font-size:.875rem;font-weight:700;text-decoration:none;border-radius:0 0 4px 0;z-index:10000}
.skip-link:focus{position:absolute;width:auto;height:auto;padding:8px 12px;margin:0;overflow:visible;clip:auto;white-space:normal;top:0;left:0;outline:3px solid #007a58;outline-offset:2px}