/* OK Gaz — feuille de style
   Charte Réparateur Restauration : bleu pétrole + orange.
   Typo : Poppins (titres) + Source Sans 3 (texte). */

:root {
  --ink: #16323A;
  --petrol: #0F4C59;
  --teal: #196B7D;
  --orange: #C4622D;
  --orange-dark: #A8521F;
  --orange-tint: #FBE9DD;
  --orange-bg: #FBF3EC;
  --sky: #B9D2D9;
  --sky-light: #DCE8EC;
  --mist: #EEF3F5;
  --line: #D3E0E5;
  --line-soft: #E6EEF1;
  --body: #46606A;
  --muted: #5A727C;
  --paper: #FBFCFC;
  --white: #FFFFFF;
  --ok: #2E8B6A; --ok-bg: #EAF3F0;
  --warn: #C4622D; --warn-bg: #FBEFE6;
  --danger: #A83A3A; --danger-bg: #F7E9E9;
  --font-head: Poppins, "Segoe UI", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Calibri, Arial, sans-serif;
  --radius: 8px;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--font-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--petrol); text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); margin: 0; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; }
h2 { font-size: clamp(24px, 2.6vw, 32px); }
h3 { font-size: 19px; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; color: var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 100; }
.skip-link:focus { left: 8px; }

.wrap { width: min(var(--wrap), calc(100% - 40px)); margin: 0 auto; }
.over { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); }
.num { font-family: var(--font-head); font-weight: 700; color: var(--petrol); }
.mono { font-family: "SF Mono", Menlo, Consolas, monospace; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.section { padding: 64px 0; }
.section--white { background: var(--white); }
.section--mist { background: var(--mist); }
.section--warm { background: var(--orange-bg); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; margin-bottom: 30px; }
.section-head > div { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.section-head > p { max-width: 380px; font-size: 16px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 6px; font-family: var(--font-head); font-weight: 600; font-size: 16px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--orange); color: var(--white); }
.btn--primary:hover { background: var(--orange-dark); color: var(--white); }
.btn--ghost { border-color: var(--sky); color: var(--petrol); background: var(--white); }
.btn--ghost:hover { border-color: var(--petrol); color: var(--petrol); }
.btn--white { background: var(--white); color: var(--orange); }
.btn--white:hover { background: #FFF6F0; color: var(--orange-dark); }
.btn--sm { height: 46px; padding: 0 22px; font-size: 15px; }
.btn--lg { height: 58px; padding: 0 32px; font-size: 17px; }

/* Bandeau + en-tête */
.topbar { background: var(--ink); color: var(--sky); font-size: 14px; border-top: 4px solid var(--orange); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 16px; }
.topbar strong { color: var(--white); }
.topbar a { color: var(--white); font-weight: 600; }
.header { background: var(--white); border-bottom: 1px solid var(--line); }
.header .wrap { display: flex; justify-content: space-between; align-items: center; height: 84px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand__mark { width: 44px; height: 44px; flex-shrink: 0; }
.brand__name { display: flex; flex-direction: column; line-height: 1.1; }
.brand__word { font-family: var(--font-head); font-weight: 700; font-size: 24px; letter-spacing: 0.02em; color: var(--ink); }
.brand__word span { color: var(--orange); }
.brand__tag { font-size: 13px; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 32px; font-weight: 600; font-size: 16px; }
.nav a { color: var(--ink); }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }

/* Accueil — bandeau */
.hero { background: linear-gradient(90deg, #FFFCFA 0%, var(--orange-bg) 58%, var(--petrol) 58%, var(--petrol) 100%); }
.hero .wrap { display: grid; grid-template-columns: 6fr 5fr; align-items: stretch; }
.hero__text { display: flex; flex-direction: column; gap: 22px; padding: 56px 64px 60px 0; }
.hero__kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill { background: var(--orange); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.hero__lead { font-size: 19px; max-width: 520px; }
.hero__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hero__price .num { font-size: 36px; color: var(--orange); }
.hero__price span:last-child { font-size: 16px; color: var(--muted); }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__facts { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; font-size: 16px; }
.hero__facts li { display: flex; align-items: center; gap: 10px; }
.hero__facts svg { flex-shrink: 0; }
.hero__doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--petrol); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 14px); padding: 48px 0 48px 56px; }
.hero__doc > p { font-size: 14px; color: var(--sky); text-align: center; }

/* Aperçu de l'attestation */
.attest { width: min(440px, 100%); background: var(--white); border: 1px solid var(--line); box-shadow: 0 24px 48px rgba(22,50,58,.14), 0 2px 6px rgba(22,50,58,.08); padding: 30px 34px; display: flex; flex-direction: column; gap: 16px; font-size: 11.5px; line-height: 1.45; color: var(--body); }
.attest__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border-bottom: 2px solid var(--petrol); padding-bottom: 12px; }
.attest__title { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--ink); letter-spacing: .06em; display: block; }
.attest__sub { font-size: 10.5px; color: var(--muted); }
.attest__num { font-size: 10.5px; color: var(--petrol); white-space: nowrap; }
.attest__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.attest__grid div { display: flex; flex-direction: column; gap: 2px; }
.attest__label { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.attest__foot { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 10.5px; }
.attest__foot small { color: #96ABB3; display: block; margin-top: 12px; }
.stamp { width: 74px; height: 74px; border: 2.5px solid var(--orange); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-8deg); color: var(--orange); font-family: var(--font-head); font-weight: 700; line-height: 1; flex-shrink: 0; }
.stamp span:first-child { font-size: 13px; }
.stamp span:last-child { font-size: 8px; letter-spacing: .12em; margin-top: 3px; }

/* Bande de confiance */
.trust { background: var(--white); border-bottom: 1px solid var(--line); }
.trust .wrap { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 40px; padding: 24px 0; }
.trust li { display: flex; flex-direction: column; gap: 4px; }
.trust .num { font-size: 28px; color: var(--orange); }
.trust li span:last-child { font-size: 15px; }

/* Règlement */
.law { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; }
.law__text { display: flex; flex-direction: column; gap: 20px; }
.note { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: 15.5px; }
.quote { display: flex; flex-direction: column; gap: 16px; padding: 30px 34px; background: var(--ink); color: #DCE8EC; border-radius: var(--radius); }
.quote__src { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); font-weight: 600; }
.quote blockquote { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 20px; line-height: 1.5; color: var(--white); }
.quote__ref { font-size: 14px; color: var(--sky); }

/* Huit points */
.points { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.point { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; border-color: #E2EAEE; box-shadow: 0 6px 18px rgba(22,50,58,.05); }
.point__top { display: flex; justify-content: space-between; align-items: center; }
.point__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--orange-tint); display: flex; align-items: center; justify-content: center; }
.point__n { font-size: 13px; color: #96ABB3; font-weight: 600; }
.point h3 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.point p { font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.results { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; padding-top: 20px; }
.result { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: var(--radius); font-size: 15px; }
.result strong { display: flex; align-items: center; gap: 10px; }
.result strong::before { content: ""; width: 12px; height: 12px; border-radius: 50%; }
.result--ok { background: var(--ok-bg); } .result--ok strong::before { background: var(--ok); }
.result--warn { background: var(--warn-bg); } .result--warn strong::before { background: var(--warn); }
.result--danger { background: var(--danger-bg); } .result--danger strong::before { background: var(--danger); }

/* Déroulé */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 32px; }
.step { display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--petrol); padding-top: 18px; }
.step .num { font-size: 14px; letter-spacing: .1em; color: var(--orange); }
.step p { font-size: 15.5px; }

/* Tarifs */
.prices { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.price { position: relative; background: var(--white); border: 1.5px solid #E8D5C6; border-radius: 10px; padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 24px rgba(196,98,45,.06); }
.price--hl { border-color: var(--orange); }
.price__tag { position: absolute; top: -13px; left: 22px; background: var(--orange); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.price h3 { font-size: 18px; font-weight: 600; }
.price__zone { font-size: 14.5px; color: var(--muted); }
.price__amount { display: flex; align-items: baseline; gap: 6px; }
.price__amount .num { font-size: 40px; color: var(--orange); letter-spacing: -.02em; }
.price__amount span:last-child { font-size: 14px; color: var(--muted); }
.price p { font-size: 14.5px; }
.price .btn { margin-top: 4px; height: 44px; font-size: 15px; }
.offers { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-top: 20px; }
.offer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 24px; border-radius: 10px; }
.offer > div { display: flex; flex-direction: column; gap: 4px; }
.offer--renew { background: var(--petrol); color: var(--white); }
.offer--renew strong { color: var(--white); font-size: 18px; }
.offer--renew p { font-size: 15px; color: #DCE8EC; }
.offer__amount { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; flex-shrink: 0; }
.offer__amount .num { font-size: 32px; color: var(--white); white-space: nowrap; }
.offer__amount span:last-child { font-size: 13px; color: var(--sky); white-space: nowrap; }
.offer--quote { background: var(--white); border: 1.5px dashed #D9B8A2; }
.offer--quote strong { font-size: 17px; }
.offer--quote p { font-size: 15px; }
.offer--quote a { font-weight: 600; white-space: nowrap; color: var(--orange); }

/* Technicien */
.tech { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.tech__photo { position: relative; padding: 0 0 22px 22px; }
.tech__photo::before { content: ""; position: absolute; left: 0; bottom: 0; width: 82%; height: 78%; background: var(--orange); border-radius: 10px; opacity: .9; }
.placeholder { position: relative; height: 380px; border-radius: 10px; background: var(--sky-light); border: 1.5px dashed #96ABB3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); text-align: center; box-shadow: 0 20px 40px rgba(22,50,58,.14); padding: 20px; }
.placeholder strong { color: var(--ink); }
.placeholder span { font-size: 14px; max-width: 300px; }
.tech__photo img { position: relative; height: 380px; width: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 20px 40px rgba(22,50,58,.14); }
.badge { position: absolute; right: -18px; top: 28px; background: var(--white); border: 1px solid #E2EAEE; border-radius: 10px; padding: 14px 18px; display: flex; flex-direction: column; line-height: 1.1; box-shadow: 0 10px 24px rgba(22,50,58,.12); }
.badge .num { font-size: 30px; color: var(--orange); }
.badge span:last-child { font-size: 13px; color: var(--muted); margin-top: 4px; }
.tech__text { display: flex; flex-direction: column; gap: 22px; }
.tech__text > p { font-size: 18px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.facts li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: #F5F8F9; border-radius: var(--radius); font-size: 15px; }
.facts li.facts--warm { background: var(--warn-bg); }

/* Questions */
.faq { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
.faq__intro { display: flex; flex-direction: column; gap: 16px; }
.faq__intro p { font-size: 15.5px; }
.faq details { border-bottom: 1px solid #C5D8DF; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 26px; font-weight: 400; color: var(--orange); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 18px; font-size: 16px; }

/* Appel final */
.cta { background: var(--orange); padding: 56px 0; }
.cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 60px; }
.cta div { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.cta h2 { color: var(--white); font-size: 30px; line-height: 1.25; }
.cta p { color: #FBE3D5; font-size: 17px; }

/* Pied de page */
.footer { background: var(--ink); color: #96ABB3; font-size: 14px; padding: 36px 0 30px; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; }
.footer__about { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.footer__about img { width: 210px; }
.footer__cols { display: flex; gap: 64px; }
.footer__cols ul { display: flex; flex-direction: column; gap: 8px; }
.footer__cols li:first-child { color: var(--white); font-weight: 600; }
.footer a { color: var(--sky); }
.footer__bottom { border-top: 1px solid #2A4A53; padding-top: 18px; margin-top: 28px; font-size: 13px; }

/* Page réservation */
.page-title { background: var(--white); padding: 40px 0 36px; border-bottom: 1px solid var(--line); }
.page-title .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.page-title > .wrap > div:first-child { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.stepper { display: flex; gap: 28px; padding-bottom: 6px; }
.stepper li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #96ABB3; }
.stepper li span { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-family: var(--font-head); border: 1.5px solid var(--sky); }
.stepper li.is-active { color: var(--petrol); }
.stepper li.is-active span { background: var(--orange); border-color: var(--orange); color: var(--white); }
.booking { display: grid; grid-template-columns: 7fr 4fr; gap: 40px; padding: 36px 0 64px; align-items: start; background: var(--mist); }
.booking__form { display: flex; flex-direction: column; gap: 24px; }
.panel { padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; }
.panel__head { display: flex; flex-direction: column; gap: 4px; }
.panel__head h2 { font-size: 21px; }
.panel__head p { font-size: 15px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea { height: 48px; border: 1px solid var(--sky); border-radius: 6px; background: var(--white); padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink); width: 100%; }
.field textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--petrol); outline-offset: 1px; border-color: var(--petrol); }
.field .hint { font-size: 13.5px; color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--orange); }
.check--box { padding: 14px 16px; background: var(--mist); border-radius: 6px; }
.weeknav { display: flex; align-items: center; gap: 14px; font-weight: 600; color: var(--ink); font-size: 15px; }
.weeknav button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.weeknav button:disabled { opacity: .4; cursor: default; }
.weeknav span { white-space: nowrap; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.day { display: flex; flex-direction: column; gap: 8px; }
.day__head { display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; border-bottom: 1px solid var(--line-soft); line-height: 1.2; }
.day__head small { font-size: 13px; color: var(--muted); }
.day__head .num { font-size: 18px; }
.slot { height: 44px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); display: flex; align-items: center; justify-content: center; font: inherit; font-size: 15px; font-weight: 600; color: var(--petrol); cursor: pointer; }
.slot:hover { border-color: var(--petrol); }
.slot.is-off { color: #B9C9CF; background: #F3F6F8; border-color: var(--line-soft); text-decoration: line-through; font-weight: 400; cursor: default; }
.slot.is-on { background: var(--petrol); border-color: var(--petrol); color: var(--white); }
.summary { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.summary__card { padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; border-color: var(--petrol); }
.summary__rows { display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; padding: 16px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.summary__rows div { display: flex; justify-content: space-between; gap: 16px; }
.summary__rows dt { color: var(--muted); }
.summary__rows dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
.summary__rows dd small { display: block; font-weight: 400; color: var(--body); }
.totals { display: flex; flex-direction: column; gap: 6px; }
.totals div { display: flex; justify-content: space-between; align-items: baseline; }
.totals .num { font-size: 26px; }
.totals .vat { font-size: 14px; color: var(--muted); }
.totals .ttc { font-size: 15px; font-weight: 600; color: var(--ink); padding-top: 6px; border-top: 1px solid var(--line-soft); }
.summary__note { font-size: 13.5px; color: var(--muted); text-align: center; }
.summary__included { padding: 18px 22px; font-size: 14.5px; display: flex; flex-direction: column; gap: 8px; }
.summary__assurance { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); padding: 0 4px; }
.form-error { display: none; padding: 12px 16px; background: var(--danger-bg); color: var(--danger); border-radius: 6px; font-size: 15px; }
.form-error.is-visible { display: block; }

/* Pages simples (légal, merci) */
.prose { max-width: 760px; padding: 64px 0 96px; display: flex; flex-direction: column; gap: 18px; }
.prose h1 { font-size: 34px; margin-bottom: 8px; }
.prose h2 { font-size: 22px; margin-top: 22px; }
.prose ul { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.prose .todo { background: var(--orange-tint); padding: 0 4px; border-radius: 3px; font-weight: 600; color: var(--orange-dark); }

/* Responsive */
@media (max-width: 1024px) {
  .points, .trust .wrap { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps, .prices, .results { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .law, .tech, .faq, .offers { grid-template-columns: 1fr; gap: 40px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero { background: linear-gradient(180deg, #FFFCFA 0%, var(--orange-bg) 100%); }
  .hero__text { padding: 56px 0 40px; }
  .hero__doc { margin: 0 calc(50% - 50vw); padding: 40px 20px; }
  .booking { grid-template-columns: 1fr; }
  .summary { position: static; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 16px; }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .nav .btn { margin-top: 12px; border: 0; }
  .nav-toggle { display: block; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 48px 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
  .topbar .wrap { font-size: 12.5px; }
  .topbar .topbar__tag { display: none; }
  .header .wrap { height: 64px; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__word { font-size: 20px; }
  .brand__tag { display: none; }
  .nav { top: 64px; }
  .hero__text { padding: 32px 0 32px; gap: 18px; }
  .hero__lead { font-size: 16px; }
  .hero__price .num { font-size: 30px; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .hero__doc { padding: 28px 20px; background: var(--orange-bg); background-image: none; }
  .hero__doc > p { color: var(--muted); }
  .attest { padding: 20px 22px; font-size: 10.5px; box-shadow: 0 14px 30px rgba(196,98,45,.12); }
  .points, .trust .wrap, .steps, .prices, .results, .facts, .fields { grid-template-columns: 1fr; }
  .trust .wrap { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 16px; }
  .trust .num { font-size: 22px; }
  .quote { padding: 22px 20px; } .quote blockquote { font-size: 16.5px; }
  .placeholder, .tech__photo img { height: 240px; }
  .badge { right: -6px; top: 14px; padding: 10px 14px; } .badge .num { font-size: 24px; }
  .offer { flex-direction: column; align-items: flex-start; }
  .offer__amount { align-items: flex-start; }
  .cta .wrap { flex-direction: column; align-items: flex-start; }
  .cta .btn { width: 100%; }
  .footer__top, .footer__cols { flex-direction: column; gap: 24px; }
  .page-title .wrap { flex-direction: column; align-items: flex-start; }
  .stepper { gap: 16px; }
  .panel { padding: 22px 18px; }
  .slots { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .booking { padding: 24px 0 48px; }
  .prose { padding: 40px 0 64px; } .prose h1 { font-size: 28px; }
}

/* Mobile : blocs plus clairs et liste compacte des 8 points */
@media (max-width: 640px) {
  .quote { background: var(--white); color: var(--body); border: 1px solid var(--line); border-left: 4px solid var(--orange); }
  .quote blockquote { color: var(--ink); }
  .quote__src, .quote__ref { color: var(--muted); }
  .points { gap: 0; }
  .point { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 0; align-items: center; padding: 12px 0; box-shadow: none; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
  .point__top { grid-row: 1 / 3; }
  .point__n { display: none; }
  .point__icon { width: 40px; height: 40px; }
  .point h3 { font-size: 15.5px; }
  .point p { font-size: 13.5px; }
  .results { gap: 8px; padding-top: 18px; }
  .result { padding: 12px 14px; font-size: 14px; gap: 4px; }
}

/* Mode de règlement */
.pay { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.pay label { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 15px; background: var(--white); }
.pay label:has(input:checked) { border-color: var(--petrol); background: #F5F9FA; }
.pay input { margin: 3px 0 0; accent-color: var(--petrol); flex-shrink: 0; }
.pay strong { display: block; }
.pay span { color: var(--muted); font-size: 14px; }
@media (max-width: 640px) { .pay { grid-template-columns: 1fr; } }
.field .pay label { font-weight: 400; font-size: 15px; color: var(--body); }
.field .pay input { width: 18px; height: 18px; padding: 0; border: 0; margin: 3px 0 0; }
.field .pay strong { font-size: 15px; }

/* Ancres : laisser la place à l'en-tête fixe quand on clique dans le menu */
[id] { scroll-margin-top: 16px; }

/* Version simplifiée : 8 points en liste compacte */
.points--compact { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 32px; }
.points--compact .point { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; padding: 10px 0; box-shadow: none; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
.points--compact .point__top { grid-row: 1 / 3; }
.points--compact .point__n { display: none; }
.points--compact .point__icon { width: 40px; height: 40px; }
.points--compact .point h3 { font-size: 16px; }
.points--compact .point p { font-size: 14px; }
.results--inline { grid-template-columns: repeat(3, minmax(0,1fr)); }
.results--inline .result { padding: 14px 16px; font-size: 14.5px; gap: 4px; }
.legal-line { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; background: var(--mist); border-left: 4px solid var(--orange); border-radius: 6px; font-size: 15px; margin-top: 24px; }
@media (max-width: 640px) { .points--compact { grid-template-columns: 1fr; gap: 0; } .results--inline { grid-template-columns: 1fr; } }

/* =====================================================================
   OK Gaz — version 2 (24/09/2026)
   Accueil resserré (6 blocs) + mouvement : en-tête collant, barre de
   progression, apparitions au défilement, attestation qui s'incline,
   tampon qui s'imprime, cases qui se cochent, compteurs, FAQ animée,
   bouton de réservation flottant sur mobile.
   Aucune librairie. Tout se désactive si l'appareil demande moins
   d'animations (réglage d'accessibilité).
   ===================================================================== */

:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --header-h: 84px;
}
[id] { scroll-margin-top: 92px; }

/* ---------- Barre de progression de lecture ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), #E08A52); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- En-tête collant qui se resserre ---------- */
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); transition: box-shadow .3s var(--ease-out), border-color .3s; }
.header .wrap { transition: height .35s var(--ease-out); }
.header.is-scrolled { box-shadow: 0 6px 24px rgba(22,50,58,.08); border-bottom-color: transparent; }
.header.is-scrolled .wrap { height: 68px; }
.brand__mark { transition: width .35s var(--ease-out), height .35s var(--ease-out), transform .4s var(--ease-spring); }
.header.is-scrolled .brand__mark { width: 38px; height: 38px; }
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.05); }
.brand__tag { transition: opacity .25s, max-height .35s var(--ease-out); max-height: 20px; overflow: hidden; }
.header.is-scrolled .brand__tag { opacity: 0; max-height: 0; }

/* Coche du logo qui se dessine au chargement */
.motion .brand__check { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .7s .25s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Menu : soulignement qui glisse + lien de la section en cours */
.nav a[data-spy] { position: relative; padding: 6px 0; transition: color .2s; }
.nav a[data-spy]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s var(--ease-out); }
.nav a[data-spy]:hover { text-decoration: none; color: var(--petrol); }
.nav a[data-spy]:hover::after, .nav a[data-spy].is-active::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav a[data-spy].is-active { color: var(--petrol); }

/* Bouton menu mobile : trois traits qui deviennent une croix */
.nav-toggle { width: 44px; height: 44px; position: relative; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2.2px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease-out), opacity .2s; }
.nav-toggle span:nth-child(1) { top: 15px; } .nav-toggle span:nth-child(2) { top: 21px; } .nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Boutons : flèche qui avance, légère pression ---------- */
.btn { transition: background .2s, border-color .2s, color .2s, transform .15s var(--ease-out), box-shadow .25s var(--ease-out); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary { box-shadow: 0 6px 16px rgba(196,98,45,.22); }
.btn--primary:hover { box-shadow: 0 10px 24px rgba(196,98,45,.3); }
.btn__arrow { transition: transform .3s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- Bandeau d'accueil ---------- */
.hero { background: var(--white); }
.hero__band { background: linear-gradient(90deg, #FFFCFA 0%, var(--orange-bg) 58%, var(--petrol) 58%, var(--petrol) 100%); overflow: hidden; }
.hero__band .wrap { display: grid; grid-template-columns: 6fr 5fr; align-items: stretch; }
.hero__text { padding: 60px 64px 56px 0; }
.hero__law { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.hero h1 em { font-style: normal; color: var(--orange); white-space: nowrap; }
.hero__doc { perspective: 1100px; }

/* Entrée en scène au chargement */
/* 29/10/2026 : texte du haut affiché tout de suite (vitesse mobile) */
.motion .hero__text > *:nth-child(1) { animation-delay: .05s; }
.motion .hero__text > *:nth-child(2) { animation-delay: .15s; }
.motion .hero__text > *:nth-child(3) { animation-delay: .28s; }
.motion .hero__text > *:nth-child(4) { animation-delay: .38s; }
.motion .hero__text > *:nth-child(5) { animation-delay: .48s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.motion .hero__doc .attest { opacity: 0; animation: docIn 1s .25s var(--ease-out) forwards; }
@keyframes docIn { from { opacity: 0; transform: translateY(40px) rotate(4deg) scale(.96); } to { opacity: 1; transform: none; } }
.motion .hero__doc > p { opacity: 0; animation: rise .8s .9s var(--ease-out) forwards; }

/* L'attestation qui suit la souris (ordinateur) */
.tilt { transform-style: preserve-3d; will-change: transform; transition: transform .6s var(--ease-out); }
.tilt.is-tracking { transition: transform .12s linear; }
.attest { position: relative; overflow: hidden; border-radius: 4px; transition: box-shadow .4s var(--ease-out); }
.tilt.is-tracking .attest { box-shadow: 0 34px 60px rgba(8,30,36,.28), 0 2px 6px rgba(22,50,58,.1); }
.attest__glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.55), rgba(255,255,255,0) 55%); mix-blend-mode: soft-light; }
.tilt.is-tracking .attest__glare { opacity: 1; }
.attest__ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ok) !important; }

/* Le tampon « OK GAZ VÉRIFIÉ » qui s'imprime */
.stamp { position: relative; }
.motion .stamp { opacity: 0; animation: stamp .55s 1.1s var(--ease-spring) forwards; }
.motion .stamp::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; animation: ink .9s 1.35s var(--ease-out) forwards; }
@keyframes stamp { 0% { opacity: 0; transform: scale(2.4) rotate(-28deg); } 60% { opacity: 1; transform: scale(.9) rotate(-6deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
@keyframes ink { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }

/* Bande de chiffres clés, sous le bandeau */
.hero .proof { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 40px; padding: 26px 0; }
.proof li { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; border-left: 3px solid var(--orange-tint); transition: border-color .3s; }
.proof li:hover { border-left-color: var(--orange); }
.proof .num { font-size: 26px; color: var(--orange); line-height: 1.1; }
.proof li > span:last-child { font-size: 15px; }
.trust { display: none; } /* remplacée par .proof */

/* ---------- Apparitions au défilement ---------- */
.motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion [data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.motion [data-stagger].is-in > * { opacity: 1; transform: none; }

/* ---------- Les 8 points : des cases qui se cochent ---------- */
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; }
.checklist li { display: flex; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line-soft); border-radius: 6px; transition: background .25s, transform .25s var(--ease-out); }
.checklist li:hover { background: #FBF7F4; transform: translateX(4px); }
.checklist h3 { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.checklist p { font-size: 14.5px; color: var(--muted); }
.checklist__box { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; border: 2px solid var(--orange); display: flex; align-items: center; justify-content: center; background: var(--white); transition: background .35s var(--ease-out); }
.checklist__box svg { width: 20px; height: 20px; fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.checklist__box path { stroke-dasharray: 24; stroke-dashoffset: 0; }
.checklist__box { background: var(--orange); }
.motion .checklist__box { background: var(--white); }
.motion .checklist__box path { stroke-dashoffset: 24; }
.motion .checklist.is-in .checklist__box { background: var(--orange); transition-delay: calc(var(--i, 0) * 90ms + 250ms); }
.motion .checklist.is-in .checklist__box path { animation: draw .45s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 380ms); }

/* Les trois résultats possibles */
.verdicts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 28px; }
.verdict { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--radius); font-size: 14.5px; border: 1px solid transparent; transition: transform .3s var(--ease-out), box-shadow .3s; }
.verdict:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(22,50,58,.08); }
.verdict strong { display: flex; align-items: center; gap: 10px; }
.verdict strong::before { content: ""; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.7); }
.verdict--ok { background: var(--ok-bg); border-color: #D3E8DF; } .verdict--ok strong::before { background: var(--ok); }
.verdict--warn { background: var(--warn-bg); border-color: #F2D9C8; } .verdict--warn strong::before { background: var(--warn); }
.verdict--danger { background: var(--danger-bg); border-color: #EDD3D3; } .verdict--danger strong::before { background: var(--danger); }

/* ---------- Déroulé : une ligne qui se remplit ---------- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; margin-bottom: 40px; }
.timeline::before, .timeline::after { content: ""; position: absolute; top: 17px; left: 18px; right: 18px; height: 2px; border-radius: 2px; }
.timeline::before { background: #EAD7C9; }
.timeline::after { background: var(--orange); transform-origin: 0 50%; transform: scaleX(1); }
.motion .timeline::after { transform: scaleX(0); transition: transform 1.4s .2s var(--ease-out); }
.motion .timeline.is-in::after { transform: scaleX(1); }
.timeline li { position: relative; display: flex; flex-direction: column; gap: 8px; }
.timeline__dot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--orange); color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 15px; box-shadow: 0 0 0 6px var(--orange-bg); margin-bottom: 6px; }
.motion .timeline__dot { transform: scale(0); transition: transform .5s var(--ease-spring); }
.motion .timeline.is-in li:nth-child(1) .timeline__dot { transform: scale(1); transition-delay: .2s; }
.motion .timeline.is-in li:nth-child(2) .timeline__dot { transform: scale(1); transition-delay: .55s; }
.motion .timeline.is-in li:nth-child(3) .timeline__dot { transform: scale(1); transition-delay: .9s; }
.motion .timeline.is-in li:nth-child(4) .timeline__dot { transform: scale(1); transition-delay: 1.25s; }
.timeline h3 { font-size: 17px; font-weight: 600; }
.timeline p { font-size: 15px; }

/* ---------- Tarifs : cartes qui se soulèvent ---------- */
.price { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s; }
.price:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(196,98,45,.14); border-color: #E3B89C; }
.price .btn { margin-top: auto; width: 100%; }
.price--hl { border-color: transparent; background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(var(--angle, 120deg), var(--orange), #F0A877, var(--petrol), var(--orange)) border-box; border: 2px solid transparent; box-shadow: 0 16px 34px rgba(196,98,45,.14); }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 120deg; }
.motion .price--hl { animation: spin 7s linear infinite; }
@keyframes spin { to { --angle: 480deg; } }
.offer { transition: transform .3s var(--ease-out), box-shadow .3s; }
.offer:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(22,50,58,.1); }
.offer--quote a span { display: inline-block; transition: transform .3s var(--ease-out); }
.offer--quote a:hover { text-decoration: none; }
.offer--quote a:hover span { transform: translateX(4px); }

/* ---------- Qui intervient ---------- */
.team { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: center; }
.team__big { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 36px 34px; border-radius: 14px; background: var(--orange-bg); overflow: hidden; }
.team__big::before { content: ""; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; border: 22px solid var(--orange-tint); }
.team__big .num { position: relative; font-size: 104px; line-height: .9; color: var(--orange); letter-spacing: -.04em; }
.team__big > span:last-child { position: relative; font-size: 17px; color: var(--ink); font-weight: 600; max-width: 260px; }
.team__text { display: flex; flex-direction: column; gap: 18px; }
.team__text > p { font-size: 17.5px; }
.team__facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.team__facts li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: #F5F8F9; border-radius: var(--radius); font-size: 15px; border-left: 3px solid var(--petrol); transition: transform .3s var(--ease-out); }
.team__facts li:last-child { background: var(--warn-bg); border-left-color: var(--orange); }
.team__facts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.team__facts li:hover { transform: translateY(-3px); }

/* ---------- Questions : ouverture en douceur ---------- */
.faq details { border-bottom: 1px solid #C5D8DF; }
.faq summary { transition: color .2s; }
.faq summary:hover { color: var(--petrol); }
.faq summary::after { content: ""; top: 50%; right: 6px; width: 14px; height: 14px; margin-top: -7px; font-size: 0; background: linear-gradient(var(--orange), var(--orange)) center / 14px 2.4px no-repeat, linear-gradient(var(--orange), var(--orange)) center / 2.4px 14px no-repeat; transition: transform .35s var(--ease-out); }
.faq details[open] summary::after { content: ""; transform: rotate(135deg); }
.faq__body { overflow: hidden; }
.faq__body p { padding: 0 0 18px; font-size: 16px; }

/* ---------- Appel final ---------- */
.cta { position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 70%); }
.cta .wrap { position: relative; }
.btn--white { box-shadow: 0 10px 24px rgba(120,50,15,.2); }

/* ---------- Bouton de réservation flottant (mobile) ---------- */
.mobile-cta { display: none; }
@media (max-width: 1024px) {
  .mobile-cta { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; border-radius: 14px; background: var(--orange); color: var(--white); box-shadow: 0 14px 34px rgba(120,50,15,.32); transform: translateY(140%); transition: transform .45s var(--ease-out); }
  .mobile-cta:hover { color: var(--white); text-decoration: none; }
  .mobile-cta.is-visible { transform: none; }
  .mobile-cta span { display: flex; flex-direction: column; line-height: 1.2; }
  .mobile-cta strong { color: var(--white); font-family: var(--font-head); font-size: 16px; }
  .mobile-cta small { font-size: 13px; color: #FBE3D5; }
  body.has-mobile-cta .footer { padding-bottom: 96px; }
}

/* ---------- Page réservation : un peu de vie ---------- */
.slot { transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease-spring); }
.slot:hover { transform: translateY(-2px); }
.slot.is-on { transform: scale(1.03); box-shadow: 0 8px 18px rgba(15,76,89,.22); }
.stepper li span { transition: background .3s, border-color .3s, color .3s, transform .35s var(--ease-spring); }
.stepper li.is-active span { transform: scale(1.08); }
.panel { transition: box-shadow .3s; }
.panel:focus-within { box-shadow: 0 12px 30px rgba(22,50,58,.08); }
.field input, .field select, .field textarea { transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(15,76,89,.14); }
.totals .num { transition: color .3s; }
.totals .num.is-bump { animation: bump .45s var(--ease-spring); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); color: var(--orange); } 100% { transform: scale(1); } }

/* ---------- Adaptations écran ---------- */
@media (max-width: 1024px) {
  .hero__band { background: linear-gradient(180deg, #FFFCFA 0%, var(--orange-bg) 100%); }
  .hero__band .wrap { grid-template-columns: 1fr; }
  .hero__text { padding: 48px 0 36px; }
  .hero .proof { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 24px; }
  .timeline { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 32px; }
  .timeline::before, .timeline::after { display: none; }
  .team { grid-template-columns: 1fr; gap: 32px; }
  .nav { box-shadow: 0 18px 30px rgba(22,50,58,.1); }
  .nav a[data-spy]::after { display: none; }
  .motion .nav.is-open a { animation: rise .45s var(--ease-out) both; }
  .motion .nav.is-open a:nth-child(2) { animation-delay: .04s; } .motion .nav.is-open a:nth-child(3) { animation-delay: .08s; }
  .motion .nav.is-open a:nth-child(4) { animation-delay: .12s; } .motion .nav.is-open a:nth-child(5) { animation-delay: .16s; }
}
@media (max-width: 640px) {
  .header.is-scrolled .wrap, .header .wrap { height: 64px; }
  .header.is-scrolled .brand__mark { width: 34px; height: 34px; }
  .hero__text { padding: 30px 0 28px; }
  .hero h1 em { white-space: normal; }
  .hero__law { font-size: 12px; }
  .hero .proof { padding: 20px 0; }
  .proof .num { font-size: 21px; }
  .proof li > span:last-child { font-size: 14px; }
  .checklist { grid-template-columns: 1fr; }
  .checklist li { padding: 12px 2px; }
  .verdicts { grid-template-columns: 1fr; gap: 10px; }
  .timeline { grid-template-columns: 1fr; gap: 0; margin-bottom: 28px; }
  .timeline li { display: grid; grid-template-columns: 36px 1fr; column-gap: 16px; padding-bottom: 20px; }
  .timeline li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 42px; bottom: 4px; width: 2px; background: #EAD7C9; }
  .timeline__dot { grid-row: 1 / 3; margin: 0; }
  .price:hover { transform: none; }
  .team__big { padding: 26px 24px; flex-direction: row; align-items: center; gap: 18px; }
  .team__big .num { font-size: 72px; }
  .team__big > span:last-child { font-size: 15.5px; }
  .team__facts { grid-template-columns: 1fr; }
  .hero__doc { perspective: none; }
}

/* ---------- Moins d'animations si l'appareil le demande ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.back-link { font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; transition: color .2s, transform .3s var(--ease-out); }
.back-link:hover { color: var(--orange); text-decoration: none; transform: translateX(-3px); }

/* ---------- Correctifs après essais (24/09) ---------- */
h1, h2 { text-wrap: balance; }
.hero h1 em { display: block; margin-top: 4px; }
.cta .wrap { flex-direction: row; max-width: none; }
.cta .wrap > div { max-width: 640px; }
.timeline { list-style: none; padding: 0; margin: 0 0 36px; }
.timeline::before, .timeline::after { right: calc(25% - 39px); }
.prices__incl { display: flex; align-items: center; gap: 10px; margin: -6px 0 22px; font-size: 15.5px; font-weight: 600; color: var(--petrol); }
.prices__incl svg { color: var(--ok); flex-shrink: 0; }
.price { gap: 10px; }
.price .btn { margin-top: 10px; }
@media (max-width: 640px) {
  .cta .wrap { flex-direction: column; }
  .prices { gap: 14px; }
  .price { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 20px 18px 18px; }
  .price h3 { font-size: 16.5px; }
  .price__zone { grid-column: 1; font-size: 13.5px; }
  .price__amount { grid-column: 2; grid-row: 1 / 3; }
  .price__amount .num { font-size: 32px; }
  .price .btn { grid-column: 1 / -1; margin-top: 12px; }
  .price__tag { left: 18px; }
  .prices__incl { font-size: 14.5px; align-items: flex-start; }
}

/* =====================================================================
   Retours de Mélissa (24/09, 17h40) : titre plus léger, accroche aérée,
   plus d'encadrements, prix revus, ancres ajustées au millimètre.
   ===================================================================== */

/* Ancres : la section se cale juste sous l'en-tête resserré */
[id] { scroll-margin-top: 67px; }
sup { font-size: .62em; line-height: 0; vertical-align: .55em; }

/* Titre : « Attestation sous 48 h » plus petit, souligné */
.hero h1 em { display: inline-block; margin-top: 12px; font-size: .6em; line-height: 1.2; color: var(--ink); white-space: nowrap; padding-bottom: 6px; background: linear-gradient(var(--orange), var(--orange)) 0 100% / 100% 4px no-repeat; }
.motion .hero h1 em { background-size: 0% 4px; animation: underline .9s .9s var(--ease-out) forwards; }
@keyframes underline { to { background-size: 100% 4px; } }
.hero__lead { font-size: 18px; max-width: 540px; }

/* Trois repères encadrés sous l'accroche */
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__chips li { display: flex; align-items: center; gap: 9px; padding: 9px 14px 9px 12px; background: var(--white); border: 1px solid #EAD7C9; border-radius: 10px; font-size: 15px; color: var(--body); box-shadow: 0 4px 12px rgba(196,98,45,.06); transition: transform .3s var(--ease-out), border-color .3s; }
.hero__chips li:hover { transform: translateY(-2px); border-color: var(--orange); }
.hero__chips svg { color: var(--orange); flex-shrink: 0; }
.hero__chips strong { color: var(--ink); }
.motion .hero__text > *:nth-child(6) { animation-delay: .58s; }

/* Chiffres clés : cartes encadrées avec picto */
.hero .proof { gap: 18px; padding: 28px 0 30px; }
.proof li { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 0 6px 18px rgba(22,50,58,.05); transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s; }
.proof li:hover { transform: translateY(-3px); border-color: #E3B89C; box-shadow: 0 12px 26px rgba(22,50,58,.08); }
.proof li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.proof li > div > span:last-child { font-size: 14.5px; line-height: 1.4; }
.proof .num { font-size: 22px; }
.proof__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--orange-tint); color: var(--orange); display: flex; align-items: center; justify-content: center; }

/* Les 8 points dans un cadre */
.checklist { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 10px 28px; box-shadow: 0 8px 24px rgba(22,50,58,.05); }
.checklist li { border-bottom-color: #EEF3F5; }
.checklist li:nth-last-child(-n+2) { border-bottom: 0; }

/* Étapes : chaque étape dans son cadre, sous la ligne qui se remplit */
.timeline li { padding: 0; }
.timeline li > h3, .timeline li > p { position: relative; }
.timeline__card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--white); border: 1px solid #EAD7C9; border-radius: 12px; box-shadow: 0 6px 16px rgba(196,98,45,.06); transition: transform .3s var(--ease-out), border-color .3s; }
.timeline li:hover .timeline__card { transform: translateY(-3px); border-color: var(--orange); }

/* Tarifs : ligne sur devis */
.price__from { font-size: 14px; color: var(--muted); margin-right: 2px; align-self: center; }
.price__note { font-size: 14px; color: var(--muted); }
.price--quote .price__amount .num { font-size: 36px; }

/* Questions dans un cadre */
.faq__list { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 6px 26px; box-shadow: 0 8px 24px rgba(22,50,58,.05); }
.faq__list details:last-child { border-bottom: 0; }
.faq__intro { position: sticky; top: 100px; }

@media (max-width: 1024px) {
  .faq__intro { position: static; }
}
@media (max-width: 640px) {
  .hero h1 em { white-space: normal; }
  .hero__lead { font-size: 16px; }
  .hero__chips { gap: 8px; }
  .hero__chips li { font-size: 14px; padding: 8px 12px 8px 10px; }
  .hero .proof { grid-template-columns: 1fr 1fr; gap: 10px; }
  .proof li { flex-direction: column; gap: 8px; padding: 14px; }
  .proof__icon { width: 34px; height: 34px; }
  .proof .num { font-size: 19px; }
  .proof li > div > span:last-child { font-size: 13.5px; }
  .checklist { padding: 4px 16px; }
  .checklist li:nth-last-child(2) { border-bottom: 1px solid #EEF3F5; }
  .timeline li { grid-template-columns: 36px 1fr; }
  .timeline__card { grid-column: 2; grid-row: 1 / 3; }
  .faq__list { padding: 4px 18px; }
  .price--quote .price__amount { flex-wrap: wrap; }
  .price__note { grid-column: 1 / -1; }
}

/* =====================================================================
   Page réservation — version 2 : plus chaleureuse, mieux organisée
   ===================================================================== */
.page-title { display: none; }

/* Bandeau d'en-tête de la réservation */
.book-hero { position: relative; overflow: hidden; background: linear-gradient(100deg, #FFFCFA 0%, var(--orange-bg) 70%, #F7E4D6 100%); border-bottom: 1px solid #EFE0D4; }
.book-hero::after { content: ""; position: absolute; right: -90px; top: -120px; width: 360px; height: 360px; border-radius: 50%; border: 44px solid rgba(196,98,45,.07); pointer-events: none; }
.book-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; padding: 44px 0 40px; }
.book-hero__text { display: flex; flex-direction: column; gap: 14px; }
.book-hero h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; }
.book-hero h1 span { color: var(--orange); }
.book-hero__text > p:not(.over) { font-size: 17px; max-width: 560px; }
.book-hero__chips { margin-top: 4px; }
.motion .book-hero__text > * { opacity: 0; transform: translateY(16px); animation: rise .7s var(--ease-out) forwards; }
.motion .book-hero__text > *:nth-child(2) { animation-delay: .08s; }
.motion .book-hero__text > *:nth-child(3) { animation-delay: .16s; }
.motion .book-hero__text > *:nth-child(4) { animation-delay: .24s; }

/* Étapes : carte encadrée, ligne qui relie les trois ronds */
.stepper { position: relative; display: flex; flex-direction: column; gap: 0; padding: 18px 22px; background: var(--white); border: 1px solid #EAD7C9; border-radius: 16px; box-shadow: 0 14px 32px rgba(196,98,45,.1); }
.motion .stepper { opacity: 0; animation: docIn .8s .2s var(--ease-out) forwards; }
.stepper li { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 0; color: #96ABB3; font-weight: 400; }
.stepper li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 48px; bottom: -8px; width: 2px; background: var(--line); transition: background .4s; }
.stepper li.is-active:not(:last-child)::after { background: var(--orange); }
.stepper li span { width: 36px; height: 36px; font-size: 15px; background: var(--white); position: relative; z-index: 1; }
.stepper li div { display: flex; flex-direction: column; line-height: 1.25; }
.stepper li strong { font-family: var(--font-head); font-size: 16px; color: #96ABB3; font-weight: 600; transition: color .3s; }
.stepper li small { font-size: 13.5px; }
.stepper li.is-active strong { color: var(--ink); }
.stepper li.is-active small { color: var(--muted); }

/* Zone du formulaire : fond chaud, grille centrée */
.booking { display: block; padding: 0; background: linear-gradient(180deg, #FBF3EC 0%, #FDF8F4 380px, #F6F8F9 100%); }
.booking__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; align-items: start; padding: 36px 0 80px; }

/* Cartes des trois étapes */
.panel { position: relative; padding: 28px 30px; gap: 22px; border: 1px solid #EFE2D8; border-radius: 16px; box-shadow: 0 10px 28px rgba(22,50,58,.05); overflow: hidden; }
.panel::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--orange), #E9A273); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.panel:focus-within::before { transform: scaleX(1); }
.panel:focus-within { box-shadow: 0 16px 38px rgba(196,98,45,.1); border-color: #E7CDBB; }
.panel__head { flex-direction: row; align-items: flex-start; gap: 16px; }
.panel__head > div { display: flex; flex-direction: column; gap: 4px; }
.panel__head h2 { font-size: 21px; }
.panel__head p { font-size: 15px; color: var(--muted); }
.panel__head--split { justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.panel__head--split > .panel__head { flex: 1 1 360px; }
.panel__num { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: var(--orange); color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(196,98,45,.25); }
.panel__note { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.panel__note svg { color: var(--ok); flex-shrink: 0; }
.field input, .field select, .field textarea { border-color: #D9E3E7; background: #FCFDFD; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #B9CCD3; }
.check--box { background: var(--orange-bg); border: 1px solid #F0DFD2; border-radius: 10px; }

/* Créneaux */
.weeknav { padding: 6px; background: var(--mist); border-radius: 12px; }
.weeknav button { border-color: transparent; box-shadow: 0 2px 6px rgba(22,50,58,.08); transition: transform .2s var(--ease-out), background .2s; }
.weeknav button:not(:disabled):hover { transform: translateY(-1px); background: var(--orange-tint); }
.slots { gap: 12px; }
.day { padding: 10px; background: #F7FAFB; border: 1px solid var(--line-soft); border-radius: 12px; }
.day__head { border-bottom: 0; padding: 4px 0 8px; }
.day__head .num { font-size: 22px; }
.slot { height: 46px; border-color: #DCE6EA; }
.slot:hover { border-color: var(--orange); color: var(--orange-dark); }
.slot.is-on { background: var(--petrol); border-color: var(--petrol); color: var(--white); }

/* Mode de règlement */
.pay label { align-items: center; padding: 16px 18px; border-radius: 12px; transition: border-color .2s, background .2s, transform .2s var(--ease-out); }
.pay label:hover { transform: translateY(-2px); border-color: #B9CCD3; }
.pay label:has(input:checked) { border-color: var(--orange); background: #FFF8F3; }
.pay__icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; background: var(--orange-tint); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.field .pay .pay__icon { color: var(--orange); }

/* Récapitulatif : en-tête bleu pétrole, prix mis en valeur */
.summary { top: 88px; gap: 14px; }
.summary__card { padding: 0; gap: 0; overflow: hidden; border: 0; border-radius: 16px; box-shadow: 0 20px 44px rgba(22,50,58,.14); }
.summary__top { position: relative; padding: 22px 26px 20px; background: var(--petrol); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px); }
.summary__top .over { color: #F2B48C; }
.summary__top h3 { color: var(--white); font-size: 19px; margin-top: 6px; }
.summary__body { padding: 20px 26px 22px; display: flex; flex-direction: column; gap: 18px; }
.summary__rows { padding: 0 0 16px; border-top: 0; }
.totals { padding: 14px 16px; background: var(--orange-bg); border: 1px solid #F0DFD2; border-radius: 12px; }
.totals > div:first-child span:first-child { font-size: 14.5px; color: var(--body); }
.totals .num { font-size: 28px; color: var(--orange); }
.summary__submit { width: 100%; }
.summary__reassure { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.summary__reassure li, .summary__included li { display: flex; align-items: center; gap: 8px; }
.summary__reassure svg, .summary__included svg { color: var(--ok); flex-shrink: 0; }
.summary__included { padding: 18px 22px; border-radius: 14px; border-color: #EFE2D8; gap: 10px; }
.summary__included ul { display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; }
.summary__help { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 14px; border-color: #EFE2D8; color: var(--body); font-size: 14px; transition: transform .25s var(--ease-out), border-color .25s; }
.summary__help:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--orange); color: var(--body); }
.summary__help strong { display: block; color: var(--ink); font-size: 15px; }
.summary__help-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--orange); color: var(--white); display: flex; align-items: center; justify-content: center; }

@media (max-width: 1024px) {
  .book-hero__inner { grid-template-columns: 1fr; gap: 26px; padding: 32px 0 28px; }
  .stepper { flex-direction: row; justify-content: space-between; gap: 10px; padding: 14px 16px; }
  .stepper li { flex: 1; flex-direction: column; text-align: center; gap: 6px; padding: 0; }
  .stepper li:not(:last-child)::after { left: calc(50% + 24px); right: calc(-50% + 24px); top: 17px; bottom: auto; width: auto; height: 2px; }
  .stepper li small { display: none; }
  .booking__grid { grid-template-columns: 1fr; padding: 24px 0 56px; }
  .summary { position: static; }
}
@media (max-width: 640px) {
  .book-hero h1 { font-size: 27px; }
  .book-hero__text > p:not(.over) { font-size: 15.5px; }
  .stepper li strong { font-size: 13.5px; }
  .panel { padding: 22px 18px; gap: 18px; }
  .panel__head { gap: 12px; }
  .panel__num { width: 34px; height: 34px; font-size: 15px; border-radius: 10px; }
  .panel__head h2 { font-size: 19px; }
  .weeknav { width: 100%; justify-content: space-between; }
  .day { padding: 8px; }
}

/* ---------- Correctifs (24/09, 18h) ---------- */
/* « Attestation sous 48 h » sur sa propre ligne, plus petite, soulignée */
.hero h1 em { display: block; width: fit-content; }

/* Repères : trois cadres de même largeur */
.hero__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hero__chips li { align-items: flex-start; padding: 12px 12px 12px 12px; line-height: 1.35; }
.hero__chips svg { margin-top: 1px; }

/* Ancres au pixel près : la section commence exactement sous l'en-tête resserré */
[id] { scroll-margin-top: 69px; }

/* Boutons des cartes de prix alignés en bas */
.price .btn { margin-top: auto; }
.price__amount { margin-bottom: 14px; }
.price__note { margin: -6px 0 14px; }

/* Étapes : cascade plus rapide */
.motion .timeline.is-in li:nth-child(1) .timeline__dot { transition-delay: .15s; }
.motion .timeline.is-in li:nth-child(2) .timeline__dot { transition-delay: .35s; }
.motion .timeline.is-in li:nth-child(3) .timeline__dot { transition-delay: .55s; }
.motion .timeline.is-in li:nth-child(4) .timeline__dot { transition-delay: .75s; }
.motion .timeline::after { transition-duration: 1s; }

/* Réservation : en-têtes d'étape et navigation des semaines */
.panel__head > div { display: block; }
.panel__head > div:not(.weeknav):not(.panel__head) { display: flex; flex-direction: column; gap: 4px; }
.panel__head--split > .panel__head { display: flex; flex-direction: row; }
.panel__head > .weeknav { display: flex; flex-direction: row; align-items: center; }

/* Récapitulatif : libellé au-dessus, prix entier sur une ligne */
.totals > div:first-child { flex-direction: column; align-items: flex-start; gap: 2px; }
.totals .num { white-space: nowrap; line-height: 1.1; }

/* Barre de prix fixe sur mobile (réservation) */
.book-bar { display: none; }
@media (max-width: 1024px) {
  .book-bar { display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 55; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--petrol); color: var(--white); box-shadow: 0 14px 34px rgba(8,30,36,.35); transform: translateY(0); transition: transform .4s var(--ease-out); }
  .book-bar.is-hidden { transform: translateY(150%); }
  .book-bar__price { display: flex; flex-direction: column; line-height: 1.15; }
  .book-bar__price small { font-size: 12px; color: var(--sky); }
  .book-bar__price strong { font-family: var(--font-head); font-size: 18px; color: var(--white); white-space: nowrap; }
  .book-bar .btn { height: 46px; padding: 0 18px; font-size: 15px; }
  body.has-book-bar .footer { padding-bottom: 90px !important; }
}
@media (max-width: 640px) {
  [id] { scroll-margin-top: 65px; }
  .hero__chips { grid-template-columns: 1fr; gap: 8px; }
  .hero__chips li { padding: 9px 12px; align-items: center; }
}
.header.no-anim, .header.no-anim * { transition: none !important; }
.panel__head--split > .panel__head { gap: 16px; }
@media (max-width: 640px) { .panel__head--split > .panel__head { gap: 12px; } }

/* =====================================================================
   Version 3 (01/10/2026) : version finale avant mise en ligne
   Mobile resserré, appel en un geste, formulaire guidé, guide et page merci.
   ===================================================================== */
.show-mobile { display: none !important; }

/* Où intervenons-nous */
.zones { margin-top: 20px; padding: 20px 24px; background: var(--white); border: 1px solid #EAD7C9; border-radius: 12px; display: flex; flex-direction: column; gap: 6px; }
.zones h3 { font-size: 17px; }
.zones p { font-size: 15px; line-height: 1.6; }

/* Lien vers le guide (questions) */
.faq__guide { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; color: var(--body); font-size: 14.5px; line-height: 1.35; transition: border-color .25s, transform .25s var(--ease-out); }
.faq__guide:hover { text-decoration: none; border-color: var(--orange); color: var(--body); transform: translateY(-2px); }
.faq__guide strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.faq__guide-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--orange-tint); color: var(--orange); display: flex; align-items: center; justify-content: center; }

/* Appel final : réserver ou appeler */
.cta .cta__actions { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: none; flex-shrink: 0; }
.cta__phone { color: #FBE3D5; font-size: 15px; }
.cta__phone strong { color: var(--white); }
.cta__phone:hover { color: var(--white); }

/* Barre d'action mobile : appeler + réserver */
@media (max-width: 1024px) {
  .mobile-cta { padding: 0; gap: 8px; background: none; box-shadow: none; }
  .mobile-cta__call { width: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--petrol); color: var(--white); box-shadow: 0 14px 34px rgba(8,30,36,.3); }
  .mobile-cta__call:hover { color: var(--white); }
  .mobile-cta__book { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-radius: 14px; background: var(--orange); color: var(--white); box-shadow: 0 14px 34px rgba(120,50,15,.32); }
  .mobile-cta__book:hover { color: var(--white); text-decoration: none; }
}

/* Formulaire : champs facultatifs, erreurs, zone reconnue */
.opt { font-weight: 400; font-size: 12.5px; color: var(--muted); margin-left: 4px; text-transform: none; letter-spacing: 0; }
.check__note { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); background: #FFF9F9; box-shadow: 0 0 0 3px rgba(168,58,58,.12); }
.field.is-invalid label { color: var(--danger); }
.check.is-invalid { color: var(--danger); }
.check.is-invalid input { outline: 2px solid var(--danger); outline-offset: 2px; }
.panel.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(168,58,58,.12); }
.field .hint--ok { color: var(--ok); font-weight: 600; }
.field .hint--warn { color: var(--orange-dark); font-weight: 600; }
.form-error { line-height: 1.45; }
.form-error a { color: var(--danger); font-weight: 600; text-decoration: underline; }
.panel__note { align-items: flex-start; }
.panel__note svg { margin-top: 3px; }
[data-submit]:disabled { opacity: .75; cursor: wait; }

/* Page merci */
.thanks { background: linear-gradient(180deg, #FBF3EC 0%, var(--paper) 420px); padding: 56px 0 88px; }
.thanks__wrap { max-width: 760px; }
.thanks__card { padding: 40px 44px; border-radius: 18px; border-color: #EFE2D8; box-shadow: 0 20px 44px rgba(22,50,58,.08); display: flex; flex-direction: column; gap: 18px; }
.thanks__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(46,139,106,.3); }
.thanks h1 { font-size: clamp(26px, 3vw, 34px); }
.thanks__lead { font-size: 17.5px; }
.thanks__recap { margin: 0; padding: 16px 18px; background: var(--orange-bg); border: 1px solid #F0DFD2; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.thanks__recap div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; }
.thanks__recap dt { color: var(--muted); }
.thanks__recap dd { margin: 0; color: var(--ink); font-weight: 600; }
.thanks__steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.thanks__steps li { display: flex; gap: 14px; align-items: flex-start; font-size: 15.5px; }
.thanks__steps li > span { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--orange); color: var(--white); font-family: var(--font-head); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.thanks__steps strong { display: block; color: var(--ink); }
.thanks__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* Guide */
.guide__wrap { max-width: 800px; }
.guide__head { background: linear-gradient(100deg, #FFFCFA 0%, var(--orange-bg) 70%, #F7E4D6 100%); border-bottom: 1px solid #EFE0D4; padding: 40px 0 36px; }
.guide__head .guide__wrap { display: flex; flex-direction: column; gap: 14px; }
.guide__head h1 { font-size: clamp(28px, 3.4vw, 40px); }
.guide__lead { font-size: 18.5px; color: var(--body); }
.crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.guide__body { padding-top: 36px; }
.guide__body p, .guide__body li { font-size: 17px; }
.guide__summary { padding: 20px 22px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: 12px; box-shadow: 0 8px 22px rgba(22,50,58,.05); display: flex; flex-direction: column; gap: 10px; }
.guide__summary strong { font-family: var(--font-head); font-size: 17px; }
.prose .guide__summary ul { list-style: none; padding: 0; gap: 8px; }
.guide__summary li { font-size: 16px !important; }
.guide__summary li span { display: inline-block; min-width: 82px; margin-right: 6px; font-weight: 600; color: var(--orange); }
.guide__table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.guide__table table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px; }
.guide__table th { text-align: left; background: var(--petrol); color: var(--white); font-family: var(--font-head); font-weight: 600; font-size: 14px; padding: 12px 14px; }
.guide__table td { padding: 12px 14px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.guide__table tr:nth-child(even) td { background: #F8FAFB; }
.prose ol.guide__points { list-style: decimal; padding-left: 24px; display: flex; flex-direction: column; gap: 4px; }
.prose ol.guide__points li::marker { color: var(--orange); font-weight: 700; }
.prose ul.guide__risks { list-style: none; padding: 0; gap: 10px; }
.guide__risks li { padding: 12px 16px; background: #F5F8F9; border-left: 3px solid var(--petrol); border-radius: 8px; }
.guide__cta { margin: 18px 0 6px; padding: 24px 26px; background: var(--petrol); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px); border-radius: 14px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.guide__cta strong { color: var(--white); font-family: var(--font-head); font-size: 20px; display: block; margin-bottom: 4px; }
.guide__cta p { color: var(--sky-light); font-size: 15.5px !important; }
.guide__cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.prose ul.guide__sources { font-size: 15px; }
.guide__sources li { font-size: 15px !important; }
.guide__disclaimer { font-size: 14px !important; color: var(--muted); }

/* ---------- Téléphone ---------- */
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: inline-flex !important; }

  /* Bandeau : prix et bouton remontent, repères en une ligne */
  .hero__text { gap: 16px; padding: 24px 0 26px; }
  .hero__kicker { order: 1; gap: 6px 8px; }
  .hero__text h1 { order: 2; font-size: 29px; }
  .hero__lead { order: 3; font-size: 15.5px; line-height: 1.5; }
  .hero__price { order: 4; gap: 4px 10px; }
  .hero__price .num { font-size: 30px; }
  .hero__price span:last-child { font-size: 14px; line-height: 1.4; }
  .hero__cta { order: 5; display: grid; grid-template-columns: 1.7fr 1fr; gap: 10px; }
  .hero__cta .btn { padding: 0 14px; height: 52px; font-size: 15.5px; }
  .hero__chips { order: 6; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .hero__chips li { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 6px; font-size: 12.5px; line-height: 1.3; }
  .hero__chips svg { margin: 0; }

  /* Attestation : l'essentiel, sans le paragraphe */
  .hero__doc { padding: 28px 16px 30px; gap: 10px; }
  .attest { padding: 20px 20px 18px; gap: 12px; }
  .attest > p { display: none; }
  .attest__head { padding-bottom: 10px; }
  .attest__num { font-size: 9.5px; }
  .stamp { width: 62px; height: 62px; }
  .hero__doc > p { font-size: 13px; }

  /* Huit points sur deux colonnes */
  .checklist { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 12px; padding: 6px 14px; }
  .checklist li { align-items: flex-start; gap: 10px; padding: 12px 0; }
  .checklist li:nth-last-child(2) { border-bottom: 0; }
  .checklist li:hover { transform: none; background: none; }
  .checklist__box { width: 26px; height: 26px; border-radius: 7px; }
  .checklist__box svg { width: 15px; height: 15px; }
  .checklist h3 { font-size: 14.5px; }
  .checklist p { font-size: 12.5px; line-height: 1.35; }
  .verdict { padding: 14px 16px; font-size: 14.5px; }

  /* Carte « jusqu'à 2 h » : prix sous le titre */
  .price--quote { grid-template-columns: 1fr; }
  .price--quote .price__amount { grid-column: 1; grid-row: auto; margin: 6px 0 0; }
  .price--quote .price__note { margin: 0; }
  .offer { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
  .offer__amount { align-items: flex-start; }
  .zones { padding: 16px 18px; }
  .zones p { font-size: 14.5px; }

  /* Appel final */
  .cta .cta__actions { width: 100%; align-items: stretch; }
  .cta .cta__actions .btn { width: 100%; }
  .cta__phone { text-align: center; }

  /* Réservation : on va droit au formulaire */
  .book-hero__inner { gap: 18px; padding: 24px 0 22px; }
  .book-hero__chips { display: none; }
  .book-hero .over, .book-hero__text > p:not(.over) { display: none; }
  .book-hero h1 { font-size: 24px; }
  #etape-1 { scroll-margin-top: 76px; }
  .book-hero__text { gap: 10px; }
  .slots { gap: 8px; }
  .slot { height: 42px; font-size: 15px; }
  .book-bar .btn { padding: 0 14px; font-size: 14.5px; }

  /* Merci */
  .thanks { padding: 28px 0 64px; }
  .thanks__card { padding: 26px 20px; gap: 16px; }
  .thanks__recap div { grid-template-columns: 1fr; gap: 0; }
  .thanks__actions .btn { width: 100%; }

  /* Guide */
  .guide__head { padding: 26px 0 24px; }
  .guide__head h1 { font-size: 27px; }
  .guide__lead { font-size: 16.5px; }
  .guide__body { padding-top: 24px; }
  .guide__body p, .guide__body li { font-size: 16px; }
  .guide__summary li span { display: block; }
  .guide__cta { padding: 20px; }
  .guide__cta-actions, .guide__cta-actions .btn { width: 100%; }
  .header .btn--sm { height: 40px; padding: 0 14px; font-size: 14px; }
  .header .brand__tag { display: none; }
}
@media (max-width: 380px) {
  .hero__text h1 { font-size: 26px; }
  .hero__cta { grid-template-columns: 1fr; }
  .mobile-cta__book small { display: none; }
}

/* v3 — retouches après essais sur téléphone */
.field input::placeholder, .field textarea::placeholder { color: #A3B5BC; opacity: 1; }
@media (max-width: 640px) {
  .hero__text h1 { font-size: 27px; }
  .booking .fields { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 12px; }
  .booking .fields > .field { grid-column: 1 / -1; }
  .booking .fields > .field:has(#cp) { grid-column: 1; }
  .booking .fields > .field:has(#ville) { grid-column: 2; }
  .booking .fields > .field:has(#cp) .hint { white-space: normal; }
  .pay__icon { display: none !important; }
  .pay label { padding: 14px; gap: 12px; }
}
.nav a.btn--primary, .nav a.btn--primary:hover { color: var(--white); }
.guide__summary li { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
.guide__summary li span { min-width: 0; margin: 0; }
@media (max-width: 640px) {
  .guide__summary li { display: block; }
  .guide__table { border: 0; background: none; overflow: visible; }
  .guide__table table { min-width: 0; }
  .guide__table thead { display: none; }
  .guide__table tr { display: block; margin-bottom: 10px; padding: 12px 14px; background: var(--white) !important; border: 1px solid var(--line); border-radius: 12px; }
  .guide__table td { display: block; padding: 3px 0; border: 0; background: none !important; font-size: 15px; }
  .guide__table td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
}
@media (max-width: 640px) {
  .booking .fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .booking .fields > .field:has(#cp) .hint { width: calc(200% + 12px); }
}
@media (max-width: 1024px) { .mobile-cta { align-items: stretch; } }
@media (max-width: 640px) { .checklist h3 { font-size: 14px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } }

/* v3 — vraie photo dans « Qui intervient » (01/10, 11 h) */
.team { align-items: start; }
.team__photo { position: relative; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 44px rgba(22,50,58,.16); background: var(--mist); }
.team__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.team__badge { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: rgba(255,255,255,.95); border-radius: 12px; box-shadow: 0 8px 22px rgba(8,30,36,.18); }
.team__badge .num { font-size: 30px; line-height: 1; color: var(--orange); white-space: nowrap; letter-spacing: -.02em; }
.team__badge > span:last-child { font-size: 14px; line-height: 1.3; color: var(--ink); font-weight: 600; }
.team__fred { flex-direction: row !important; align-items: center; gap: 14px !important; }
.team__fred img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--white); box-shadow: 0 0 0 2px var(--orange); }
.team__fred > div { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 1024px) {
  .team__photo { max-width: 520px; }
}
@media (max-width: 640px) {
  .team__photo img { aspect-ratio: 1 / 1; object-position: 50% 25%; }
  .team__badge { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; gap: 10px; }
  .team__badge .num { font-size: 24px; }
  .team__badge > span:last-child { font-size: 13px; }
}

/* =====================================================================
   v4 — 14/10/2026 : décisions du check-up du 13/10
   Polices hébergées sur le site, boutons plus contrastés, accueil plus
   court sur téléphone, outils du guide, auteur du guide, page 404.
   ===================================================================== */

/* Polices hébergées sur le site (plus de Google Fonts) */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }

/* Contraste : orange un ton plus foncé sous le texte blanc, vert plus lisible */
:root { --orange-btn: #B4541F; --orange-btn-hover: #9A4718; --ok: #237559; }
.btn--primary, .pill { background: var(--orange-btn); }
.btn--primary:hover { background: var(--orange-btn-hover); }
.mobile-cta { background: var(--orange-btn); }

/* Zones d'intervention repliées */
details.zones { display: block; }
details.zones summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
details.zones summary::-webkit-details-marker { display: none; }
details.zones summary h3 { margin: 0; }
details.zones summary span { font-size: 14.5px; color: var(--muted); }
details.zones summary::after { content: "+"; margin-left: auto; color: var(--orange); font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1; }
details.zones[open] summary::after { content: "–"; }
details.zones p { margin-top: 10px; }

/* Raccourcis vers les outils, à côté des questions */
.faq__tools { display: flex; flex-direction: column; gap: 8px; }
.faq__tools a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 11px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; font-size: 14.5px; color: var(--body); line-height: 1.35; transition: border-color .25s, transform .25s var(--ease-out); }
.faq__tools a:hover { text-decoration: none; border-color: var(--petrol); transform: translateY(-2px); }
.faq__tools a strong { color: var(--petrol); }
.faq__tools a span { margin-left: auto; color: var(--orange); font-weight: 700; }

/* Guide : petit menu, auteur, questions */
.mini-nav { display: flex; gap: 22px; margin-left: auto; font-weight: 600; font-size: 15px; }
.mini-nav a { color: var(--ink); }
.mini-nav a:hover { color: var(--petrol); }
.byline { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--white); box-shadow: 0 0 0 2px var(--orange); }
.byline div { display: flex; flex-direction: column; line-height: 1.35; }
.byline strong { font-size: 15px; }
.byline span { font-size: 14px; color: var(--muted); }
.guide__faq { margin: 14px 0 6px; padding: 4px 22px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 22px rgba(22,50,58,.05); }
.guide__faq details { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.guide__faq details:last-child { border-bottom: 0; }
.guide__faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 14px; font-weight: 600; color: var(--ink); font-size: 16.5px; }
.guide__faq summary::-webkit-details-marker { display: none; }
.guide__faq summary::after { content: "+"; color: var(--orange); font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1; }
.guide__faq details[open] summary::after { content: "–"; }
.guide__faq p { margin: 10px 0 0 !important; font-size: 16px !important; }

/* Outils : « Suis-je concerné ? » et calculateur */
.tool { margin: 30px 0; padding: 22px 24px 20px; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--petrol); border-radius: 14px; box-shadow: 0 10px 26px rgba(22,50,58,.06); }
.tool__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.tool__head > div { display: flex; flex-direction: column; gap: 2px; }
.tool__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 11px; background: var(--mist); color: var(--petrol); display: flex; align-items: center; justify-content: center; }
.prose .tool .tool__title, .tool .tool__title { font-size: 22px; margin: 0; }
.tool__head p:not(.over) { margin: 4px 0 0 !important; font-size: 15.5px !important; }
.quiz { display: flex; flex-direction: column; gap: 16px; }
.quiz__q { border: 0; margin: 0; padding: 0; min-width: 0; transition: opacity .3s; }
.quiz__q[disabled] { opacity: .42; }
.quiz__q legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 4px; font-weight: 600; font-size: 16.5px; color: var(--ink); }
.quiz__n { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--petrol); color: var(--white); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.prose .quiz__help, .quiz__help { margin: 0 0 8px 36px !important; font-size: 14px !important; color: var(--muted); }
.quiz__a { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 36px; margin-top: 6px; }
.quiz__a--col { flex-direction: column; align-items: stretch; }
.quiz__a button { font: inherit; font-size: 15px; font-weight: 600; color: var(--petrol); text-align: left; background: var(--white); border: 1.5px solid var(--sky); border-radius: 10px; padding: 9px 15px; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease-out); }
.quiz__a button:hover:not(:disabled) { border-color: var(--petrol); transform: translateY(-1px); }
.quiz__a button[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--white); }
.quiz__a button:disabled { cursor: default; }
.quiz__a button:focus-visible { outline: 3px solid rgba(15,76,89,.3); outline-offset: 2px; }
.tool__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.tool__field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.tool__field--full { grid-column: 1 / -1; }
.tool__field select { font: inherit; font-weight: 400; font-size: 16px; color: var(--ink); padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.tool__field select:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(15,76,89,.14); }
.tool__field select:disabled { opacity: .5; }
.tool__check { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); cursor: pointer; }
.tool__check input { width: 18px; height: 18px; accent-color: var(--petrol); }
.tool__result { margin-top: 16px; padding: 16px 18px; border-radius: 12px; border: 1px solid transparent; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tool__result strong { font-family: var(--font-head); font-size: 17px; line-height: 1.3; }
.prose .tool__result p, .tool__result p { margin: 0 !important; font-size: 15.5px !important; }
.tool__result .tool__actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 4px; }
.tool__result .tool__actions a:not(.btn) { font-weight: 600; font-size: 15px; }
.tool__result--ok { background: var(--ok-bg); border-color: #CFE5DB; } .tool__result--ok strong { color: var(--ok); }
.tool__result--warn { background: var(--warn-bg); border-color: #F2D9C8; } .tool__result--warn strong { color: #A94E1D; }
.tool__result--danger { background: var(--danger-bg); border-color: #EDD3D3; } .tool__result--danger strong { color: var(--danger); }
.tool__result--info { background: var(--mist); border-color: var(--line); } .tool__result--info strong { color: var(--petrol); }
.motion .tool__result.is-new { animation: toolIn .45s var(--ease-out) both; }
@keyframes toolIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.prose .tool__note, .tool__note { margin: 12px 0 0 !important; font-size: 13.5px !important; color: var(--muted); }
.thanks__icon--lost { background: var(--mist) !important; color: var(--petrol) !important; }

/* Accueil plus court sur téléphone (demande de Frédéric) */
@media (max-width: 640px) {
  .attest > p { display: none; }
  .attest__head { margin-bottom: 10px; }
  .hero .proof { gap: 8px; padding: 16px 0 18px; }
  .proof li { padding: 12px; gap: 4px; }
  .proof__icon { display: none; }
  .proof .num { font-size: 18px; }
  .proof li > div > span:last-child { font-size: 13px; line-height: 1.3; }
  .verdicts { gap: 8px; }
  .verdict { padding: 11px 14px; font-size: 13.5px; gap: 3px; }
  .section-head p { font-size: 15px; }
  .timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
  .timeline li { display: block; padding: 0; }
  .timeline li:not(:last-child)::before { display: none; }
  .timeline__dot { display: none; }
  .timeline__card { height: 100%; padding: 12px 13px; gap: 4px; }
  .timeline__card h3 { font-size: 14.5px; }
  .timeline__card p { font-size: 13.5px; line-height: 1.4; }
  .prices { gap: 10px; }
  .price { padding: 16px 16px 14px; }
  .price:not(.price--hl) .btn { display: none; }
  .price--quote .price__note { font-size: 13px; }
  .offers { gap: 10px; margin-top: 12px; }
  .offer { padding: 16px; gap: 8px; }
  .offer--renew strong, .offer--quote strong { font-size: 16px; }
  .offer p { font-size: 14px !important; }
  details.zones { padding: 14px 16px; margin-top: 12px; }
  details.zones summary h3 { font-size: 16px; }
  details.zones summary span { font-size: 13.5px; }
  .team__photo img { aspect-ratio: 16 / 11; object-position: 50% 30%; }
  .team { gap: 22px; }
  .team__text > p:not(.over) { font-size: 15.5px; }
  .team__facts li { padding: 12px 14px; }
  .faq__tools a { font-size: 14px; }
  .footer__cols ul:first-child { display: none; }
  .footer__about img { width: 170px; }
  .footer__about p { font-size: 13px; }
  .footer__top, .footer__cols { gap: 18px; }
  .tool { padding: 18px 16px 16px; margin: 24px 0; }
  .tool__title { font-size: 20px !important; }
  .quiz__a, .prose .quiz__help, .quiz__help { margin-left: 0 !important; }
  .quiz__a button { width: 100%; }
  .quiz__a:not(.quiz__a--col) button { width: auto; flex: 1 1 auto; text-align: center; }
  .mini-nav { gap: 14px; font-size: 14px; }
  .mini-nav a:first-child { display: none; }
}
@media (max-width: 640px) {
  .section { padding: 38px 0; }
  .hero__doc > p { display: none; }
  .attest { padding: 18px 18px 16px; }
  .team__facts li:last-child { display: none; }
  .section-head { margin-bottom: 18px; gap: 10px; }
  .cta { padding: 36px 0 !important; }
}
.guide__summary li > div { min-width: 0; }
.mobile-cta__book, .book-bar .btn--primary { background: var(--orange-btn) !important; }
.mobile-cta small, .mobile-cta__book small { color: #FFF1E8; }
.brand__word { white-space: nowrap; }
@media (max-width: 640px) { .mini-nav { display: none; } }
.guide__summary li strong { font-family: inherit; font-size: inherit; }

/* v4b — 13/10 au soir : texte courant en Inter (plus net en petit), Poppins gardé pour les grands titres et les chiffres */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 94%; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; size-adjust: 94%; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
:root { --font-body: Inter, "Segoe UI", Arial, sans-serif; }
h3, h4, .faq summary, .guide__faq summary, .tool__result strong, .zones h3, .verdict strong, .offer strong, .team__facts strong, .summary__top h3 { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em; }
body { letter-spacing: -0.003em; }
.back-link__short { display: none; }
@media (max-width: 640px) { .back-link__long { display: none; } .back-link__short { display: inline; } }

/* ===== v4c (13/10, 20 h) : prix du haut de page encadré ===== */
.hero__price { display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; width: fit-content; max-width: 100%; padding: 16px 22px 16px 20px; background: var(--white); border: 1.5px solid #EAD3C3; border-left: 5px solid var(--orange-btn); border-radius: 12px; box-shadow: 0 10px 24px rgba(22,50,58,.08); }
.hero__price .hero__price-main { display: flex; flex-direction: column; gap: 4px; }
.hero__price .hero__price-main .hero__price-label { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hero__price .hero__price-main .num { font-size: 38px; line-height: 1; color: var(--orange-btn); }
.hero__price-incl { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 5px; font-size: 15px; color: var(--ink); }
.hero__price-incl li { display: flex; align-items: center; gap: 8px; }
.hero__price-incl li::before { content: ""; width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23237559' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 640px) {
  .hero__price { width: 100%; padding: 14px 16px; gap: 10px; }
  .hero__price .hero__price-main .num { font-size: 32px; }
  .hero__price-incl { width: 100%; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; }
}
@media (min-width: 641px) {
  .hero__price { display: grid; grid-template-columns: auto auto; align-items: center; align-self: flex-start; justify-self: start; }
  .hero__price .hero__price-main .hero__price-label, .hero__price-incl li { white-space: nowrap; }
}

/* ===== Contrôle Gaz (14/10) : mention sous le logo, visible aussi sur téléphone ===== */
.brand__tag { font-weight: 600; color: var(--muted); }
@media (max-width: 1024px) { .header .brand__tag, .brand__tag { display: block; font-size: 11.5px; } }
.stamp span.s-a { font-size: 9.5px; letter-spacing: .06em; margin-top: 0; }
.stamp span.s-b { font-size: 16px; letter-spacing: .04em; margin-top: 1px; }

/* 20/10/2026 — les huit points réagissent au toucher sur téléphone (retour de Mélissa) */
.checklist li { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.checklist li.is-tapped { background: #FBF7F4; }
.checklist li.is-tapped .checklist__box { background: var(--orange); animation: tick-pop .45s var(--ease-out); }
.motion .checklist li.is-tapped .checklist__box path,
.motion .checklist.is-in li.is-tapped .checklist__box path { stroke-dashoffset: 24; animation: draw .45s var(--ease-out) forwards; animation-delay: .05s; }
@keyframes tick-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .checklist li.is-tapped .checklist__box { animation: none; } }

/* 20/10/2026 — grande couronne et au-delà sur devis : le 350 € reste le chiffre qui domine */
.price--quote .price__amount .num.num--quote { font-size: 26px; letter-spacing: 0; }
@media (max-width: 640px) { .price--quote .price__amount .num.num--quote { font-size: 23px; } }

/* 20/10/2026 — sur téléphone (écran tactile), les mêmes effets qu'au survol sur ordinateur : ils s'activent au toucher */
@media (hover: none) {
  .btn--primary.is-pressed { background: var(--orange-dark); color: var(--white); }
  .btn--ghost.is-pressed { border-color: var(--petrol); color: var(--petrol); }
  .btn--white.is-pressed { background: #FFF6F0; color: var(--orange-dark); }
  .slot.is-pressed { border-color: var(--petrol); }
  .brand.is-pressed .brand__mark { transform: rotate(-6deg) scale(1.05); }
  .nav a[data-spy].is-pressed { text-decoration: none; color: var(--petrol); }
  .nav a[data-spy].is-pressed::after { transform: scaleX(1); transform-origin: 0 50%; }
  .btn--primary.is-pressed { box-shadow: 0 10px 24px rgba(196,98,45,.3); }
  .btn.is-pressed .btn__arrow { transform: translateX(4px); }
  .proof li.is-pressed { border-left-color: var(--orange); }
  .checklist li.is-pressed { background: #FBF7F4; transform: translateX(4px); }
  .verdict.is-pressed { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(22,50,58,.08); }
  .price.is-pressed { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(196,98,45,.14); border-color: #E3B89C; }
  .offer.is-pressed { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(22,50,58,.1); }
  .offer--quote a.is-pressed span { transform: translateX(4px); }
  .team__facts li.is-pressed { transform: translateY(-3px); }
  .faq summary.is-pressed { color: var(--petrol); }
  .slot.is-pressed { transform: translateY(-2px); }
  .back-link.is-pressed { color: var(--orange); text-decoration: none; transform: translateX(-3px); }
  .hero__chips li.is-pressed { transform: translateY(-2px); border-color: var(--orange); }
  .proof li.is-pressed { transform: translateY(-3px); border-color: #E3B89C; box-shadow: 0 12px 26px rgba(22,50,58,.08); }
  .timeline li.is-pressed .timeline__card { transform: translateY(-3px); border-color: var(--orange); }
  .weeknav button:not(:disabled).is-pressed { transform: translateY(-1px); background: var(--orange-tint); }
  .slot.is-pressed { border-color: var(--orange); color: var(--orange-dark); }
  .pay label.is-pressed { transform: translateY(-2px); border-color: #B9CCD3; }
  .summary__help.is-pressed { text-decoration: none; transform: translateY(-2px); border-color: var(--orange); color: var(--body); }
  .faq__guide.is-pressed { text-decoration: none; border-color: var(--orange); color: var(--body); transform: translateY(-2px); }
  .nav a.btn--primary.is-pressed { color: var(--white); }
  .btn--primary.is-pressed { background: var(--orange-btn-hover); }
  .faq__tools a.is-pressed { text-decoration: none; border-color: var(--petrol); transform: translateY(-2px); }
  .mini-nav a.is-pressed { color: var(--petrol); }
  .quiz__a button.is-pressed:not(:disabled) { border-color: var(--petrol); transform: translateY(-1px); }
}

/* 20/10/2026 — Contrôle Gaz est une rubrique du site Réparateur Restauration : lien de retour dans la barre du haut, sur chaque page */
.topbar__left { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.topbar a.topbar__parent { display: inline-flex; align-items: center; gap: 6px; color: var(--white); font-weight: 600; text-decoration: none; transition: color .2s, transform .25s var(--ease-out); }
.topbar a.topbar__parent:hover, .topbar a.topbar__parent.is-pressed { color: #F2B48C; text-decoration: none; transform: translateX(-3px); }

/* 20/10/2026 — deux tarifs : Île-de-France (prix fixe) et jusqu'à 2 h de Paris (sur devis) */
.prices.prices--duo { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 640px) { .prices.prices--duo { grid-template-columns: 1fr; } }

/* 20/10/2026 — effets des cartes qui apparaissent en cascade (tarifs, offres, huit points, preuves, verdicts) :
   une fois apparues, elles réagissent au survol (ordinateur) et au toucher (téléphone) */
.motion [data-stagger].is-settled > * { transition: opacity .3s, transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s, background .25s; transition-delay: 0s; }
.motion [data-stagger].is-in > .price:hover, .motion [data-stagger].is-in > .price.is-pressed { transform: translateY(-6px); }
.motion [data-stagger].is-in > .offer:hover, .motion [data-stagger].is-in > .offer.is-pressed { transform: translateY(-3px); }
.motion [data-stagger].is-in > .verdict:hover, .motion [data-stagger].is-in > .verdict.is-pressed { transform: translateY(-3px); }
.motion .proof.is-in > li:hover, .motion .proof.is-in > li.is-pressed { transform: translateY(-3px); }
.motion .checklist.is-in > li:hover, .motion .checklist.is-in > li.is-pressed { transform: translateX(4px); }
@media (max-width: 640px) { .motion [data-stagger].is-in > .price.is-pressed { transform: translateY(-4px); } }

/* 29/10/2026 : en-tête mobile, mention masquée quand le lien Accueil est affiché */
@media (max-width: 520px) { .header:has(.back-link) .brand__tag { display: none; } }