/* =========================================================
   MON SERRURIER HONNÊTE — Feuille de style principale
   Charte : Bleu marine #1B2C4F + Or #CFA13B (issus du logo)
   Accent urgence : Rouge #E63946 | Validation : Vert #2E9E5B
   Design : moderne 2026, mobile-first, rapide
   ========================================================= */

/* ---------- Police Inter auto-hébergée (variable 400-900) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Couleurs de marque */
  --navy-900: #142440;
  --navy:     #1B2C4F;
  --navy-700: #243a63;
  --navy-600: #2f487a;
  --gold:     #CFA13B;
  --gold-light: #E3C272;
  --gold-soft: #f6edd6;

  /* Couleurs fonctionnelles */
  --urgent:      #E63946;
  --urgent-dark: #C92A38;
  --green:       #2E9E5B;
  --green-soft:  #e7f6ee;

  /* Neutres */
  --bg:      #F6F8FB;
  --white:   #ffffff;
  --text:    #232a37;
  --muted:   #667085;
  --border:  #e5e8ef;
  --star:    #FBBF24;

  /* Système */
  --radius:    14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(20,36,64,.08);
  --shadow:    0 8px 30px rgba(20,36,64,.10);
  --shadow-lg: 0 18px 50px rgba(20,36,64,.16);
  --container: 1180px;
  --header-h:  118px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }
h1, h2, h3, h4 { line-height: 1.2; color: var(--navy); margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

/* ---------- Utilitaires ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--navy { background: var(--navy); color: #dfe6f2; }
.section--navy h2, .section--navy h3 { color: #fff; }
.text-center { text-align: center; }
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #7A5D18; margin-bottom: 12px;
}
.section-title { font-size: clamp(26px, 4vw, 40px); text-align: center; }
.section-sub { text-align: center; color: var(--muted); max-width: 680px; margin: 0 auto 44px; font-size: 17px; }
.gold { color: var(--gold); }
.nowrap { white-space: nowrap; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 100px; font-weight: 700; font-size: 16px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap; line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn--call { background: var(--urgent-dark); color: #fff; box-shadow: 0 8px 22px rgba(201,42,56,.35); }
.btn--call:hover { background: #A81E2B; }
.btn--gold { background: var(--gold); color: var(--navy-900); box-shadow: 0 8px 22px rgba(207,161,59,.3); }
.btn--gold:hover { background: var(--gold-light); }
.btn--outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); }
.btn--outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-700); }
.btn--block { width: 100%; }
.btn--lg { padding: 18px 34px; font-size: 17px; }
.pulse { animation: pulse 2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 8px 22px rgba(230,57,70,.35), 0 0 0 0 rgba(230,57,70,.5); }
  70%  { box-shadow: 0 8px 22px rgba(230,57,70,.35), 0 0 0 14px rgba(230,57,70,0); }
  100% { box-shadow: 0 8px 22px rgba(230,57,70,.35), 0 0 0 0 rgba(230,57,70,0); }
}

/* =========================================================
   BANDEAU URGENCE (top bar permanent)
   ========================================================= */
.topbar {
  background: var(--urgent-dark); color: #fff; font-size: 14.5px; font-weight: 600;
}
.topbar__inner { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 9px 20px; flex-wrap: wrap; text-align: center; }
.topbar__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #fff; margin-right: 7px; animation: blink 1.4s infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: .25; } }
.topbar a { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   HEADER
   ========================================================= */
.header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 0; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { height: 56px; width: auto; }
.logo__fallback { display: flex; align-items: center; gap: 11px; }
.logo__badge { width: 46px; height: 52px; flex: none; }
.logo__text { line-height: 1.05; }
.logo__text b { display: block; font-size: 18px; font-weight: 900; color: var(--navy); letter-spacing: .01em; }
.logo__text b span { color: var(--gold); }
.logo__text small { font-size: 10px; letter-spacing: .12em; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 18px; }
.nav a { font-weight: 600; font-size: 15px; color: var(--navy); white-space: nowrap; }
.nav a:hover { color: var(--gold); }
.header__cta { display: flex; align-items: center; gap: 14px; }
.header__phone { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.header__phone small { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.header__phone b { font-size: 20px; color: var(--navy); font-weight: 900; }
.nav-toggle { display: none; background: var(--navy); color: #fff; width: 44px; height: 44px; border-radius: 12px; font-size: 22px; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; color: #eaf0fb;
  background:
    linear-gradient(115deg, rgba(20,36,64,.94) 0%, rgba(27,44,79,.86) 55%, rgba(36,58,99,.78) 100%),
    url('../images/hero-serrurier-arras-douai-lens.jpg') center/cover no-repeat, var(--navy);
  overflow: hidden;
}
.hero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(207,161,59,.18), transparent 70%); border-radius: 50%; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding: 64px 0 72px; position: relative; z-index: 1; }
.hero__price { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--navy-900); font-weight: 800; padding: 8px 18px; border-radius: 100px; font-size: 15px; margin-bottom: 22px; }
.hero h1 { color: #fff; font-size: clamp(32px, 5vw, 52px); font-weight: 900; margin-bottom: 18px; }
.hero h1 span { color: var(--gold); }
.hero__lead { font-size: 18px; color: #c7d3e8; max-width: 560px; margin-bottom: 28px; }
.hero__atouts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; margin-bottom: 32px; max-width: 560px; }
.hero__atout { display: flex; align-items: center; gap: 11px; font-weight: 600; color: #eaf0fb; font-size: 15.5px; }
.hero__atout .ic { width: 38px; height: 38px; flex: none; border-radius: 11px; background: rgba(207,161,59,.18); display: grid; place-items: center; color: var(--gold); }
.hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__card { background: #fff; color: var(--text); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-lg); }
.hero__card h2, .hero__card h3 { font-size: 19px; margin-bottom: 4px; }
.hero__card .sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.hero__form .field { margin-bottom: 12px; }
.hero__form label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 5px; }
.hero__form input, .hero__form select, .form textarea, .form input, .form select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 11px; font-size: 15px; font-family: inherit; color: var(--text); background: #fbfcfe;
}
.hero__form input:focus, .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--gold); background: #fff; }
.hero__card .reassure { display: flex; align-items: center; gap: 7px; justify-content: center; margin-top: 12px; font-size: 12.5px; color: var(--muted); }

/* =========================================================
   BARRE CHIFFRES-CLÉS
   ========================================================= */
.stats { background: var(--navy-900); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 26px 0; }
.stat { text-align: center; color: #fff; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: -9px; top: 12px; bottom: 12px; width: 1px; background: rgba(255,255,255,.12); }
.stat b { display: block; font-size: clamp(24px, 3.4vw, 34px); font-weight: 900; color: var(--gold); line-height: 1.1; }
.stat span { font-size: 13.5px; color: #aebbd4; font-weight: 600; }
.stat .stars { color: var(--star); font-size: 15px; letter-spacing: 1px; }

/* =========================================================
   ENCART URGENCE + COMPTE À REBOURS (Jumeaux)
   ========================================================= */
.urgency { background: linear-gradient(135deg, var(--urgent) 0%, var(--urgent-dark) 100%); color: #fff; }
.urgency__grid { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: 34px 0; }
.urgency__left { display: flex; align-items: center; gap: 18px; }
.urgency__pin { width: 58px; height: 58px; flex: none; border-radius: 16px; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 28px; }
.urgency h3 { color: #fff; font-size: 21px; margin-bottom: 3px; }
.urgency p { margin: 0; color: #ffe2e4; font-size: 15px; }
.urgency__promo { display: inline-block; background: var(--gold); color: var(--navy-900); font-weight: 800; padding: 4px 12px; border-radius: 8px; font-size: 13px; margin-top: 8px; }
.dispo { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 14px 18px; }
.dispo__dot { width: 12px; height: 12px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: dispo-pulse 2s infinite; flex-shrink: 0; }
@keyframes dispo-pulse { 70% { box-shadow: 0 0 0 10px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.dispo__txt b { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; }
.dispo__txt span { font-size: 13px; opacity: .85; }
.urgency__cta { text-align: center; }

/* =========================================================
   SERVICES
   ========================================================= */
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.service-card__img { aspect-ratio: 16/10; background: var(--navy-700); position: relative; overflow: hidden; }
.service-card__img img { width: 100%; height: 100%; object-fit: cover; }
.service-card__img .ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.6); font-size: 13px; gap: 8px; text-align: center; padding: 12px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%); }
.service-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.service-card h3 { font-size: 18px; margin-bottom: 8px; }
.service-card h3 a { color: inherit; }
.service-card h3 a:hover { color: var(--gold); }
.service-card__img { display: block; }
.service-card p { color: var(--muted); font-size: 14.5px; flex: 1; }
.service-card__call { color: var(--urgent); font-weight: 700; font-size: 14.5px; margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; }
.service-card__call:hover { color: var(--urgent-dark); }

/* =========================================================
   COMMENT ÇA MARCHE
   ========================================================= */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; }
.step { background: #fff; border-radius: var(--radius-lg); padding: 32px 26px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--border); position: relative; }
.step__num { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; font-size: 24px; font-weight: 900; }
.step h3 { font-size: 18px; }
.step p { color: var(--muted); font-size: 15px; margin: 0; }

/* =========================================================
   POURQUOI NOUS CHOISIR
   ========================================================= */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.feature { background: #fff; border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.feature .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: var(--gold); display: grid; place-items: center; margin-bottom: 14px; }
.feature h3 { font-size: 17px; margin-bottom: 7px; }
.feature p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* =========================================================
   POURQUOI HONNÊTE (différenciant)
   ========================================================= */
.honest { background: linear-gradient(160deg, #fff 0%, var(--gold-soft) 100%); }
.honest__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.honest__col h2 { font-size: clamp(26px, 3.6vw, 36px); margin-bottom: 18px; }
.honest__col h2 span { color: var(--gold); }
.honest__list { display: grid; gap: 16px; margin-top: 22px; }
.honest__item { display: flex; gap: 14px; }
.honest__item .ic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
.honest__item b { color: var(--navy); display: block; margin-bottom: 2px; }
.honest__item p { margin: 0; color: var(--muted); font-size: 14.5px; }
.honest__compare { background: #fff; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compare-col h3, .compare-col h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.compare-col ul { display: grid; gap: 10px; list-style: none; }
.compare-col li { font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
.compare-col--bad h3, .compare-col--bad h4 { color: #B02633; }
.compare-col--bad li::before { content: "✕"; color: var(--urgent); font-weight: 900; }
.compare-col--good { background: var(--green-soft); border-radius: 14px; padding: 16px; margin: -16px; }
.compare-col--good h3, .compare-col--good h4 { color: #1F7A45; }
.compare-col--good li::before { content: "✓"; color: var(--green); font-weight: 900; }

/* =========================================================
   ASSURANCES + SIMULATEUR
   ========================================================= */
.insure__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: stretch; }
.insure__card { background: var(--navy); color: #dbe4f3; border-radius: var(--radius-lg); padding: 34px; }
.insure__card h3 { color: #fff; font-size: 22px; }
.insure__badges { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.insure__badge { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: #fff; }
.insure__list { display: grid; gap: 11px; margin-top: 8px; }
.insure__list li { display: flex; gap: 10px; font-size: 14.5px; }
.insure__list .ic { color: var(--gold); flex: none; }

/* Simulateur */
.simulator { background: #fff; border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.simulator h3 { font-size: 22px; margin-bottom: 4px; }
.simulator .sub { color: var(--muted); margin-bottom: 20px; font-size: 15px; }
.sim-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.sim-opt { border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 14px; font-size: 14.5px; font-weight: 600; color: var(--navy); background: #fbfcfe; text-align: left; transition: all .15s ease; }
.sim-opt:hover { border-color: var(--gold); }
.sim-opt.active { border-color: var(--green); background: var(--green-soft); color: var(--navy); box-shadow: 0 0 0 3px rgba(46,158,91,.12); }
.sim-result { background: var(--green-soft); border: 1.5px solid #bfe5cd; border-radius: 14px; padding: 20px; display: none; }
.sim-result.show { display: block; animation: fadeUp .3s ease; }
.sim-result__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sim-result__head .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; }
.sim-result__head b { font-size: 17px; color: var(--navy); }
.sim-result p { font-size: 14.5px; color: #2c5a3f; margin-bottom: 14px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =========================================================
   B2B PROFESSIONNELS
   ========================================================= */
.b2b { background: var(--navy); }
.b2b .eyebrow { color: var(--gold); }
.b2b .section-title { color: #fff; }
.b2b .section-sub { color: #aebbd4; }
.b2b__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.b2b__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 16px 16px; transition: transform .18s ease, background .18s ease; }
.b2b__card:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); }
.b2b__ic { font-size: 24px; display: block; margin-bottom: 6px; }
.b2b__card h3 { color: #fff; font-size: 15.5px; margin-bottom: 5px; }
.b2b__card p { color: #aebbd4; font-size: 13px; margin: 0; line-height: 1.45; }
@media (max-width: 980px) { .b2b__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .b2b__grid { grid-template-columns: 1fr; } }

/* =========================================================
   NOS PARTENAIRES (assurances)
   ========================================================= */
.partners { background: var(--bg); }
.partners__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--green-soft); color: #1F7A45; font-weight: 700; padding: 8px 18px; border-radius: 100px; font-size: 14px; margin-bottom: 16px; }
.partners__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.partner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; min-height: 104px; background: linear-gradient(180deg, #ffffff, #f6f9fd); border: 1px solid var(--border); border-radius: 16px; padding: 24px 18px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; overflow: hidden; }
.partner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.partner:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--gold); }
.partner:hover::before { transform: scaleX(1); }
.partner__logo { max-width: 140px; max-height: 58px; width: auto; height: auto; object-fit: contain; }
.partner b { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: .02em; }
.partners__more { margin-top: 28px; color: var(--muted); font-style: italic; }

/* =========================================================
   AVIS GOOGLE
   ========================================================= */
.reviews__head { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.reviews__score { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px 22px; box-shadow: var(--shadow-sm); }
.reviews__score .num { font-size: 40px; font-weight: 900; color: var(--navy); line-height: 1; }
.reviews__score .stars { color: var(--star); font-size: 18px; }
.reviews__score small { color: var(--muted); font-size: 13px; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.review__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--gold); display: grid; place-items: center; font-weight: 800; flex: none; }
.review__top b { display: block; color: var(--navy); }
.review__top .stars { color: var(--star); font-size: 14px; }
.review p { font-size: 14.5px; color: #444b59; margin: 0; }
.review__g { margin-top: 14px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* Galerie nos interventions */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.gallery__item { border-radius: var(--radius); overflow: hidden; position: relative; background: var(--navy-700); }
.gallery__item.tall { grid-row: span 2; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: rgba(255,255,255,.7); font-size: 12.5px; padding: 14px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%); }
.gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 14px 12px; background: linear-gradient(transparent, rgba(20,36,64,.85)); color: #fff; font-size: 13px; font-weight: 700; }

/* =========================================================
   ZONES D'INTERVENTION
   ========================================================= */
.zones__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.zones__map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); min-height: 380px; border: 1px solid var(--border); }
.zones__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
#map { z-index: 1; }
.map-pin { background: none !important; border: none !important; }
.sectors { display: grid; gap: 18px; }
.sector { background: #fff; border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.sector h3 { font-size: 17px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sector__time { margin-left: auto; font-size: 12.5px; font-weight: 700; color: #7A5D18; background: var(--gold-soft); padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
a.town { cursor: pointer; }
.sector h3 .ic { color: var(--gold); }
.sector__towns { display: flex; flex-wrap: wrap; gap: 8px; }
.town { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; color: var(--navy); transition: all .15s ease; }
.town:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.town--more { background: var(--gold-soft); border-color: var(--gold); color: #7A5D18; position: relative; cursor: help; }
.town-tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%) translateY(4px); width: max-content; max-width: 300px; background: var(--navy-900); color: #eaf0fb; padding: 13px 16px; border-radius: 12px; font-size: 13px; font-weight: 500; line-height: 1.7; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; z-index: 40; text-align: left; }
.town-tip b { color: var(--gold); display: block; margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.town-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--navy-900); }
.town--more:hover .town-tip, .town--more:focus .town-tip, .town--more:focus-within .town-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* =========================================================
   CAMBRIOLAGE : PROCÉDURE
   ========================================================= */
.burglary { background: linear-gradient(160deg, #ffffff 0%, #fdecee 100%); }
.burglary__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.burglary__step { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; display: flex; flex-direction: column; gap: 11px; box-shadow: var(--shadow-sm); }
.burglary__num { width: 36px; height: 36px; border-radius: 50%; background: var(--urgent); color: #fff; display: grid; place-items: center; font-weight: 900; flex: none; }
.burglary__step b { color: var(--navy); display: block; margin-bottom: 4px; font-size: 14.5px; }
.burglary__step p { color: var(--muted); font-size: 13px; margin: 0; line-height: 1.5; }
.burglary__step--us { background: var(--navy); border-color: var(--navy); }
.burglary__step--us b { color: #fff; }
.burglary__step--us p { color: #c7d3e8; }
.burglary__step--us .burglary__num { background: var(--gold); color: var(--navy-900); }
.burglary__note { max-width: 780px; margin: 28px auto 0; text-align: center; background: var(--green-soft); border: 1px solid #bfe5cd; border-radius: 14px; padding: 16px 22px; font-size: 14.5px; color: #2c5a3f; }
@media (max-width: 980px) { .burglary__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .burglary__grid { grid-template-columns: 1fr; } }

/* =========================================================
   FAQ
   ========================================================= */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: none; padding: 20px 22px; font-size: 16.5px; font-weight: 700; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-q .chev { flex: none; transition: transform .25s ease; color: var(--gold); font-size: 20px; }
.faq-item.open .chev { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item.open .faq-a { max-height: 640px; }
.faq-a__inner { padding: 0 22px 20px; color: var(--muted); font-size: 15px; }

/* =========================================================
   CTA FINALE
   ========================================================= */
.cta-final { background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy) 55%, var(--navy-700) 100%); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta-final::before { content: ""; position: absolute; left: -100px; bottom: -100px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(207,161,59,.16), transparent 70%); }
.cta-final h2 { color: #fff; font-size: clamp(26px, 4vw, 40px); position: relative; }
.cta-final p { color: #c7d3e8; font-size: 18px; max-width: 620px; margin: 0 auto 28px; position: relative; }
.cta-final__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; }
.contact__info { display: grid; gap: 16px; align-content: start; }
.contact__item { display: flex; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.contact__item .ic { width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--navy); color: var(--gold); display: grid; place-items: center; }
.contact__item b { color: var(--navy); display: block; }
.contact__item span, .contact__item a { color: var(--muted); font-size: 14.5px; }
.form { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .field { margin-bottom: 14px; }
.form label { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.form textarea { min-height: 110px; resize: vertical; }
.form__note { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* =========================================================
   TEXTE SEO BAS DE PAGE
   ========================================================= */
.seo-text { background: var(--navy-900); color: #aebbd4; font-size: 14.5px; }
.seo-text h2 { color: #fff; font-size: 22px; }
.seo-text h3 { color: var(--gold); font-size: 17px; margin-top: 24px; }
.seo-text p { color: #aebbd4; }
.seo-text .cols { columns: 2; column-gap: 40px; }
.seo-text a { color: var(--gold-light); text-decoration: underline; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: #0f1c33; color: #8fa0bf; padding: 56px 0 0; font-size: 14.5px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; }
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .05em; }
.footer ul { display: grid; gap: 9px; list-style: none; }
.footer a:hover { color: var(--gold); }
.footer__brand p { margin-top: 14px; max-width: 320px; }
.footer__certs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.footer__cert { background: rgba(255,255,255,.07); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: #cdd8ec; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }

/* =========================================================
   BARRE D'APPEL STICKY MOBILE
   ========================================================= */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: none; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(20,36,64,.12); box-shadow: 0 -4px 20px rgba(20,36,64,.18); }
.callbar a { padding: 15px; text-align: center; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.callbar__call { background: var(--urgent-dark); color: #fff; }
.callbar__quote { background: var(--gold); color: var(--navy-900); }

/* =========================================================
   WIDGET CONTACT FLOTTANT (bas droite)
   ========================================================= */
.fab { position: fixed; right: 22px; bottom: 24px; z-index: 125; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab__btn { width: 60px; height: 60px; border-radius: 50%; border: none; background: var(--green); color: #fff; font-size: 26px; cursor: pointer; box-shadow: 0 10px 28px rgba(46,158,91,.45); display: grid; place-items: center; transition: transform .2s ease, background .2s ease; }
.fab__btn:hover { transform: scale(1.06); }
.fab.open .fab__btn { background: var(--navy); box-shadow: 0 10px 28px rgba(20,36,64,.4); }
.fab__menu { display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.fab.open .fab__menu { opacity: 1; visibility: visible; transform: none; }
.fab__item { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--navy); font-weight: 700; font-size: 14.5px; padding: 11px 17px; border-radius: 100px; box-shadow: var(--shadow); white-space: nowrap; border: 1px solid var(--border); transition: transform .15s ease; }
.fab__item:hover { transform: translateX(-3px); }
.fab__item span { font-size: 17px; }
.fab__item--call:hover { color: var(--urgent); border-color: var(--urgent); }
.fab__item--wa:hover { color: var(--green); border-color: var(--green); }
.fab__item--quote:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 760px) {
  .fab { bottom: 72px; right: 14px; }
  .fab__btn { width: 54px; height: 54px; font-size: 23px; }
}

/* =========================================================
   BANDEAU CERTIFICATIONS & GARANTIES
   ========================================================= */
.trustband { background: var(--navy-900); padding: 26px 0; }
.trustband__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trustband__item { display: flex; align-items: center; gap: 13px; color: #fff; }
.trustband__ic { width: 46px; height: 46px; flex: none; border-radius: 12px; background: rgba(207,161,59,.16); color: var(--gold); display: grid; place-items: center; font-size: 22px; }
.trustband__item b { display: block; font-size: 15px; }
.trustband__item span { font-size: 12.5px; color: #aebbd4; }
@media (max-width: 760px) { .trustband__grid { grid-template-columns: 1fr 1fr; gap: 18px; } }

/* Bandeau cookies : carte discrète en bas à gauche (ne masque plus la barre d'appel ni le widget) */
#cookie-banner { left: 16px !important; right: auto !important; bottom: 16px !important; max-width: 360px; border-radius: 14px; padding: 16px 18px !important; flex-direction: column; align-items: flex-start !important; text-align: left; box-shadow: var(--shadow-lg); }
@media (max-width: 760px) { #cookie-banner { left: 12px !important; right: 12px !important; bottom: 70px !important; max-width: none; } }

/* =========================================================
   PAGES BLOG
   ========================================================= */
.page-hero { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: #fff; padding: 54px 0; }
.page-hero h1 { color: #fff; font-size: clamp(26px, 4vw, 40px); max-width: 820px; }
.page-hero .crumb { font-size: 13.5px; color: #aebbd4; margin-bottom: 14px; }
.page-hero .crumb a:hover { color: var(--gold); }
.page-hero .meta { color: #c7d3e8; font-size: 14px; margin-top: 12px; }
.article { max-width: 800px; margin: 0 auto; padding: 56px 20px; }
.article p, .article li { font-size: 16.5px; color: #333a47; }
.article h2 { font-size: 26px; margin: 36px 0 14px; }
.article h3 { font-size: 20px; margin: 26px 0 10px; }
.article ul, .article ol { padding-left: 22px; margin-bottom: 18px; display: grid; gap: 8px; }
.article .lead { font-size: 19px; color: var(--navy); font-weight: 500; }
.article blockquote { border-left: 4px solid var(--gold); background: var(--gold-soft); padding: 16px 22px; border-radius: 0 12px 12px 0; margin: 24px 0; font-style: italic; color: var(--navy); }
.article .callout { background: var(--navy); color: #eaf0fb; border-radius: var(--radius-lg); padding: 28px; text-align: center; margin: 36px 0; }
.article .callout h3 { color: #fff; }
.article .callout p { color: #c7d3e8; }
.article table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; }
.article th, .article td { border: 1px solid var(--border); padding: 11px 14px; text-align: left; }
.article th { background: var(--navy); color: #fff; }
.article tr:nth-child(even) td { background: #fafbfd; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.blog-card__img { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--navy), var(--navy-700)); display: grid; place-items: center; color: rgba(255,255,255,.6); font-size: 13px; text-align: center; padding: 16px; }
.blog-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.blog-card .tag { font-size: 12px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.blog-card h3 { font-size: 18px; margin-bottom: 8px; }
.blog-card p { color: var(--muted); font-size: 14.5px; flex: 1; }
.blog-card .read { color: var(--urgent); font-weight: 700; font-size: 14px; margin-top: 12px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .honest__grid, .insure__grid, .zones__grid, .contact__grid { grid-template-columns: 1fr; gap: 30px; }
  .services__grid, .reviews__grid, .blog-grid, .partners__grid { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .urgency__grid { grid-template-columns: 1fr; text-align: center; }
  .urgency__left { flex-direction: column; text-align: center; }
  .dispo { justify-content: center; }
}
@media (max-width: 760px) {
  :root { --header-h: 72px; }
  .nav, .header__phone small { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .header.nav-open .nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: #fff; padding: 18px 20px; gap: 16px; box-shadow: var(--shadow); align-items: flex-start; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .steps, .services__grid, .reviews__grid, .blog-grid, .features { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .stat + .stat::before { display: none; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .seo-text .cols { columns: 1; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .footer__brand { grid-column: 1 / -1; }
  .compare-row { grid-template-columns: 1fr; }
  .compare-col--good { margin: 0; }
  .callbar { display: grid; }
  body { padding-bottom: 60px; }
  .section { padding: 52px 0; }
  .form .row { grid-template-columns: 1fr; }
  .header__cta .btn span.txt { display: none; }

  /* Bandeau rouge du haut : discret (numéro seul, barre fine) — MOBILE UNIQUEMENT */
  .topbar { font-size: 13px; }
  .topbar__inner { padding: 7px 14px; gap: 0; }
  .topbar__inner > span { display: none; }
  .topbar a { font-size: 13.5px; }

  /* Hero centré — MOBILE UNIQUEMENT (le web reste aligné à gauche) */
  .hero__content { text-align: center; }
  .hero__atouts { justify-items: center; margin-left: auto; margin-right: auto; }
  .hero__buttons { justify-content: center; }
}

/* ---------- Optimisation petits écrans (téléphones) ---------- */
@media (max-width: 560px) {
  html, body { overflow-x: clip; } /* clip empêche le défilement horizontal SANS casser l'en-tête collant (contrairement à hidden) */
  .container { padding: 0 16px; }
  .section { padding: 40px 0; }
  .section--tight { padding: 30px 0; }
  .section-title { font-size: 23px; }
  .section-sub { font-size: 15px; margin-bottom: 28px; }

  /* Les boutons peuvent passer à la ligne (évite le débordement horizontal) */
  .btn { white-space: normal; text-align: center; padding: 13px 18px; font-size: 15px; }
  .btn--lg { padding: 15px 22px; font-size: 16px; }

  /* Bandeau urgence plus compact */
  .topbar { font-size: 12.5px; }
  .topbar__inner { gap: 5px 12px; padding: 8px 14px; }

  /* Header : logo plus petit */
  .logo img { height: 44px; }
  .logo__badge { width: 38px; height: 44px; }
  .logo__text b { font-size: 15px; }

  /* Hero */
  .hero__grid { padding: 32px 0 40px; gap: 26px; }
  .hero h1 { font-size: 29px; line-height: 1.18; }
  .hero__lead { font-size: 16px; }
  .hero__atouts { grid-template-columns: 1fr; gap: 10px; margin-bottom: 22px; max-width: none; }
  .hero__buttons { flex-direction: column; }
  .hero__buttons .btn { width: 100%; }
  .hero__card { padding: 20px; }

  /* Chiffres-clés : 2 colonnes lisibles */
  .stats__grid { gap: 20px 14px; padding: 22px 0; }
  .stat b { font-size: 25px; }
  .stat span { font-size: 12.5px; }

  /* Encart urgence + compte à rebours */
  .urgency__grid { padding: 24px 0; gap: 16px; }
  .urgency h3 { font-size: 18px; }
  .urgency__cta .btn { width: 100%; }

  /* Services : cartes un peu plus compactes */
  .service-card__img { aspect-ratio: 16/11; }
  .service-card__body { padding: 18px; }
  .service-card h3 { font-size: 17px; }

  /* Étapes / engagements */
  .step { padding: 24px 20px; }
  .feature { padding: 22px 18px; }
  .b2b__card, .burglary__step { text-align: left; }

  /* Pourquoi honnête */
  .honest__compare { padding: 20px; }
  .honest__col h2 { font-size: 25px; }

  /* Simulateur */
  .sim-options { grid-template-columns: 1fr; }
  .simulator { padding: 24px; }

  /* Avis + galerie */
  .reviews__score .num { font-size: 32px; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }

  /* Zones */
  .sector__time { margin-left: 0; }
  .sector h3 { font-size: 16px; }

  /* FAQ */
  .faq-q { font-size: 15.5px; padding: 16px 18px; }

  /* CTA finale en colonne */
  .cta-final__buttons { flex-direction: column; }
  .cta-final__buttons .btn { width: 100%; }

  /* Articles blog / services */
  .article { padding: 34px 16px; }
  .article p, .article li { font-size: 16px; }
  .article h2 { font-size: 22px; }
}

/* ---------- Bannière de consentement cookies (CNIL) ---------- */
#consent-banner {
  position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 130;
  max-width: 480px; margin-inline: auto;
  background: var(--navy-900); color: #dfe6f2;
  padding: 14px 18px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); border: 1px solid rgba(207,161,59,.35);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  font-size: 13px;
}
#consent-banner p { margin: 0; flex: 1 1 320px; line-height: 1.5; }
#consent-banner a { color: var(--gold-light); text-decoration: underline; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-btn {
  padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 14px;
  transition: transform .15s ease, background .15s ease;
}
.consent-btn:hover { transform: translateY(-1px); }
.consent-btn--accept { background: var(--gold); color: var(--navy-900); }
.consent-btn--refuse { background: transparent; color: #dfe6f2; border: 1px solid rgba(223,230,242,.4); }

/* =========================================================
   MODERNISATION 2026
   ========================================================= */

/* ---------- Icônes SVG inline ---------- */
.ico { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.btn .ico, .topbar .ico, .callbar .ico { vertical-align: -3.5px; margin-right: 2px; }
.hero__atout .ic .ico { vertical-align: -4px; }

/* ---------- Widget flottant : bascule chat / croix ---------- */
.fab__btn { display: inline-flex; align-items: center; justify-content: center; }
.fab__ico-close { display: none; font-size: 22px; line-height: 1; }
.fab.open .fab__ico-close { display: block; }
.fab.open .fab__ico-chat { display: none; }
.fab__ico-chat { display: flex; }

/* ---------- Typographie moderne ---------- */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- Accessibilité : focus clavier bien visible ---------- */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible { outline-color: var(--navy); }

/* ---------- Apparition au scroll (native, sans JavaScript) ----------
   Navigateurs récents : scroll-driven animations en CSS pur.
   Anciens : IntersectionObserver pose .in-view (voir main.js). */
.reveal { opacity: 1; }
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-up .7s ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 38%;
  }
}
@supports not (animation-timeline: view()) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in-view { opacity: 1; transform: none; }
}
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Micro-interactions cartes ---------- */
.service-card, .blog-card, .step { transition: transform .25s ease, box-shadow .25s ease; }
.service-card:hover, .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ---------- Respect des préférences de mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Simulateur de prix honnête ---------- */
.prix-opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 26px 0 22px; }
.prix-opt {
  padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 15px;
  background: #fff; color: var(--navy); border: 2px solid var(--border);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.prix-opt:hover { border-color: var(--gold); transform: translateY(-2px); }
.prix-opt.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.prix-result {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 30px clamp(20px, 4vw, 40px); text-align: center;
}
.prix-result__amount {
  font-size: clamp(26px, 5vw, 38px); font-weight: 900; color: var(--navy);
  letter-spacing: -.01em; margin-bottom: 10px;
}
.prix-result.show .prix-result__amount { color: var(--green); }
.prix-result__txt { max-width: 620px; margin: 0 auto 18px; color: var(--muted); }
.prix-result__garanties { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin: 0 0 22px; font-size: 14px; color: var(--text); }
.prix-result__garanties .ico { color: var(--green); }

/* ---------- Frise « quand vous appelez » ---------- */
.steps--timeline { position: relative; counter-reset: none; }
@media (min-width: 900px) {
  .steps--timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .steps--timeline::before {
    content: ""; position: absolute; top: 26px; left: 12%; right: 12%; height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--navy)); border-radius: 2px; opacity: .35;
  }
  .steps--timeline .step { position: relative; }
}
.steps--timeline .step:nth-child(2) { transition-delay: .1s; animation-delay: .05s; }
.steps--timeline .step:nth-child(3) { transition-delay: .2s; animation-delay: .1s; }
.steps--timeline .step:nth-child(4) { transition-delay: .3s; animation-delay: .15s; }

/* ---------- Carrousel d'avis Google (scroll-snap natif) ---------- */
.avis-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 4px 18px; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.avis-card {
  flex: 0 0 min(340px, 85%); scroll-snap-align: start;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 22px;
}
.avis-card .stars { color: var(--star); font-size: 18px; letter-spacing: 2px; }
.avis-card p { font-size: 15px; color: var(--text); margin: 10px 0 14px; }
.avis-card footer { font-size: 13px; color: var(--muted); font-weight: 700; }

/* ---------- Transitions de page fluides (View Transitions, 2026) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .18s ease both; }
  ::view-transition-new(root) { animation: vt-in .22s ease both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }


/* ---------- Sous-menus du header (desktop) ---------- */
.nav__group { position: relative; }
.nav__label {
  font-weight: 600; font-size: 15px; color: var(--navy); background: none;
  display: inline-flex; align-items: center; gap: 5px; padding: 14px 0; white-space: nowrap;
}
.nav__label:hover { color: var(--gold); }
.nav__chev { font-size: 11px; transition: transform .2s ease; }
.nav__group:hover .nav__chev, .nav__group:focus-within .nav__chev { transform: rotate(180deg); }
.nav__drop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 8px; min-width: 235px; z-index: 60;
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity .16s ease, translate .16s ease, visibility .16s;
}
.nav__group:hover .nav__drop, .nav__group:focus-within .nav__drop {
  opacity: 1; visibility: visible; translate: 0 0;
}
.nav__drop a { display: block; padding: 9px 14px; border-radius: 8px; font-size: 14.5px; }
.nav__drop a:hover { background: var(--gold-soft); color: var(--navy); }

/* Mobile : les groupes deviennent des rubriques dépliées dans le panneau */
@media (max-width: 760px) {
  .nav__group { width: 100%; }
  .nav__label { padding: 0 0 6px; color: #8a93a6; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; pointer-events: none; }
  .nav__chev { display: none; }
  .nav__drop {
    position: static; transform: none; translate: 0; opacity: 1; visibility: visible;
    border: 0; box-shadow: none; padding: 0 0 4px 10px; min-width: 0; transition: none;
  }
  .nav__drop a { padding: 7px 0; }
}