/* Styles communs à toutes les pages du site ERGIA. */
:root {
  --bg: #F6F7FA; --surface: #FFFFFF; --ink: #121833; --ink-soft: #555D78; --line: #DFE3EC;
  --brand: #24316A; --brand-deep: #182252; --brand-soft: #E8EBF5;
  --fresh: #3E8E3F; --fresh-text: #2F7331; --fresh-soft: #E4F2E2; --gold: #C29A4E; --gold-light: #E2C48A;
  --warn: #B4462B; --warn-soft: #F8E3DC;
  --radius: 14px; --shadow: 0 1px 2px rgba(18,24,51,.05), 0 12px 30px -16px rgba(18,24,51,.22);
  --wrap: 1160px; --gutter: clamp(18px, 4vw, 32px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--brand); }
img, svg { max-width: 100%; }
h1, h2 { font-family: 'Marcellus', Georgia, serif; font-weight: 400; letter-spacing: 0; line-height: 1.12; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); max-width: 22ch; }
h3, .h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.h3 { font-family: inherit; max-width: none; letter-spacing: normal; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.stack-lg { display: flex; flex-direction: column; gap: 36px; }
.stack-xl { display: flex; flex-direction: column; gap: 56px; }
.muted { color: var(--ink-soft); }
.small { font-size: .875rem; }
.lead { font-size: clamp(1.02rem, 1.6vw, 1.15rem); line-height: 1.65; color: var(--ink-soft); max-width: 56ch; }
.body-lg { font-size: 1.06rem; line-height: 1.7; color: var(--ink-soft); }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fresh-text); }
.eyebrow.on-dark { color: var(--gold-light); }
.ico { width: 22px; height: 22px; flex-shrink: 0; }
.ico-sm { width: 16px; height: 16px; }
.ico-lg { width: 28px; height: 28px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 10px; font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background .15s, border-color .15s, transform .15s; white-space: nowrap; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); color: #fff; transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--brand-soft); }
.btn-light { background: #fff; color: var(--brand-deep); }
.btn-light:hover { background: #EEF1F8; color: var(--brand-deep); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 40%, transparent); outline-offset: 2px; }
/* Retour visuel à l'appui : le bouton se tasse légèrement (le client sent que son appui est pris en compte) */
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .7; cursor: default; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.demo-banner { display: none; background: var(--warn); color: #fff; font-size: .82rem; text-align: center; padding: 6px 12px; }
.demo-banner.show { display: block; }

/* Barre du haut + en-tête */
.topbar { background: var(--brand-deep); color: #D9DEF0; font-size: .82rem; }
.topbar-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 9px; }
.topbar-links { display: flex; gap: 22px; }
.topbar a { color: #D9DEF0; text-decoration: none; display: inline-flex; gap: 7px; align-items: center; }
.topbar a:hover { color: #fff; }
/* Bandeau d'appel (29.09.2026) : « Une question ? Appelez le … », numéro en doré (comme l'exemple donné par l'utilisateur) */
.topbar { font-size: .98rem; }
.topbar-row { padding-block: 12px; }
.topbar-msg { color: #fff; }
.topbar a.topbar-tel { color: #E2C48A; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding-block: 4px; }
.topbar a.topbar-tel:hover { color: #fff; }
@media (max-width: 760px) { .topbar { font-size: 1.02rem; } .topbar-row { justify-content: center; text-align: center; } .topbar-links { display: none; } }

.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo-mark { width: 62px; height: 30px; }
.wordmark { font-family: 'Marcellus', Georgia, serif; font-size: 1.65rem; letter-spacing: .06em; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav > a { font: inherit; font-size: .95rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; background: none; border: 0; padding: 8px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; border-bottom: 2px solid transparent; }
.main-nav > a:hover { color: var(--ink); }
.main-nav a.active { color: var(--brand); font-weight: 600; border-bottom-color: var(--gold); }
.menu-btn { display: none; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
.mobile-menu { display: none; }
@media (max-width: 980px) {
  .main-nav, .header-cta { display: none; }
  .menu-btn { display: inline-flex; }
}

/* Hero */
.ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; color: var(--ink-soft); }
.ticks li { display: flex; align-items: center; gap: 6px; }
.ticks .ico { color: var(--fresh-text); }
/* Haut de page : bloc sobre aux couleurs du logo (à remplacer par une vraie photo quand il y en aura une) */

/* Sections */
.sec { padding-block: clamp(56px, 8vw, 96px); background: var(--surface); }
.sec.alt { background: var(--bg); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); }
.sec:not(.alt) .card { background: var(--bg); }

/* À propos */
.founder-photo { aspect-ratio: 4 / 5; max-width: 360px; width: 100%; border-radius: 20px; background: linear-gradient(160deg, var(--brand-soft), var(--fresh-soft)); display: flex; align-items: center; justify-content: center; }
.founder-photo span { font-family: 'Marcellus', Georgia, serif; font-size: 6rem; color: var(--brand); }
.founder-photo { overflow: hidden; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.founder-sign { font-family: 'Marcellus', Georgia, serif; font-style: italic; font-size: 1.3rem; line-height: 1.35; color: var(--brand); margin-top: 4px; }

/* Prestations */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1040px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.svc-media { aspect-ratio: 320 / 170; background: var(--brand-soft); overflow: hidden; border-bottom: 1px solid var(--line); }
.svc-media .illus { width: 100%; height: 100%; display: block; transition: transform .5s; }
.svc-card:hover .illus { transform: scale(1.05); }
.svc-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.svc-body strong { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.35rem; color: var(--ink); }
.svc-body span { font-size: .93rem; color: var(--ink-soft); }
.svc-body em { font-style: normal; font-weight: 600; font-size: .93rem; color: var(--brand); margin-top: auto; padding-top: 6px; display: inline-flex; gap: 6px; align-items: center; }
.option-strip { display: flex; gap: 16px; align-items: center; background: var(--fresh-soft); border-radius: 16px; padding: 18px 22px; }
.option-strip .ico { color: var(--fresh-text); }
.option-strip strong { display: block; }
.option-strip span { font-size: .93rem; color: var(--ink-soft); }

/* Formules */

/* Engagements */
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .why-grid { grid-template-columns: 1fr; } }
.why { display: flex; flex-direction: column; gap: 8px; }
.why .ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--fresh-soft); color: var(--fresh-text); }
.why strong { font-size: 1.05rem; }
.why span { font-size: .93rem; color: var(--ink-soft); }
.note-box { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 2px dashed #B9C1DA; border-radius: 16px; padding: 20px 22px; }
.note-box .ico { color: var(--gold); }
.note-box strong { display: block; }
.note-box span { font-size: .93rem; color: var(--ink-soft); }

/* Bandeau titre des pages internes */
.band { background: var(--brand); color: #fff; }
.band .wrap { display: flex; flex-direction: column; gap: 14px; padding-block: clamp(40px, 7vw, 72px); }
.band h1 { color: #fff; max-width: 20ch; }
.band .lead { color: #D9DEF0; }
.crumb { font-size: .85rem; color: #C9D1EA; }
.crumb a { color: #fff; }

/* Page service */
.split { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: start; padding-block: clamp(48px, 7vw, 80px); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.inc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 600px) { .inc-grid { grid-template-columns: 1fr; } }
.inc { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.ico-check { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--fresh-soft); color: var(--fresh-text); }
.inc strong { display: block; }
.inc span { font-size: .9rem; color: var(--ink-soft); }
.steps { display: flex; flex-direction: column; gap: 18px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step-n { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.step strong { display: block; }
.step span { color: var(--ink-soft); font-size: .95rem; }
.step .step-n { color: #fff; font-size: 1rem; }
.side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
@media (max-width: 900px) { .side { position: static; } }
.side-card { display: flex; flex-direction: column; gap: 12px; background: var(--surface) !important; }
.side-card h3 { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.5rem; }
.mini-links { display: flex; flex-direction: column; gap: 4px; }
.mini-link { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.mini-link:hover { background: var(--brand-soft); }
.mini-link .ico { color: var(--brand); }

/* Contact + formulaire */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 4vw, 40px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } .form-card { order: -1; } }
.contact-card { display: flex; flex-direction: column; gap: 18px; }
.who { display: flex; gap: 14px; align-items: center; }
.who-photo { overflow: hidden; width: 64px; height: 64px; border-radius: 50%; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; font-family: 'Marcellus', Georgia, serif; font-size: 1.8rem; color: var(--brand); flex-shrink: 0; }
.who-name { display: block; font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.4rem; }
.who .muted { font-size: .88rem; }
.c-line { display: flex; gap: 12px; align-items: flex-start; }
.c-line .ico { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.c-line span { display: block; font-size: .8rem; color: var(--ink-soft); }
.c-line strong { font-size: .98rem; word-break: break-word; }
.c-line a { color: var(--ink); text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { background: var(--brand-soft); color: var(--brand); font-size: .82rem; font-weight: 600; padding: 7px 12px; border-radius: 99px; }

.form-card { background: var(--surface) !important; box-shadow: var(--shadow); }
.form-title { font-size: clamp(1.5rem, 3vw, 1.9rem); max-width: none; }
.progress { margin-top: 16px; }
.progress-label { display: flex; justify-content: space-between; font-size: .76rem; color: var(--ink-soft); font-weight: 500; }
.progress-bar { height: 6px; background: var(--brand-soft); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 33%; background: linear-gradient(90deg, var(--brand), var(--fresh)); border-radius: 99px; transition: width .3s; }
form { margin-top: 20px; }
fieldset.pane { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.q { font-weight: 600; padding: 0; margin-bottom: 2px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field-label { font-size: .82rem; font-weight: 500; color: var(--ink-soft); }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 460px) { .row-2 { grid-template-columns: 1fr; } }
input, select, textarea { font: inherit; font-size: 16px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); width: 100%; min-height: 48px; }
textarea { min-height: 84px; resize: vertical; }
/* Choix de la localité quand un NPA en a plusieurs (ex. 1227) — remplace le <datalist>, qui ne s'ouvre pas sur iPhone */
.npa-choix { display: flex; flex-direction: column; gap: 6px; }
.npa-choix[hidden] { display: none; }
.npa-choix p { font-size: .82rem; color: var(--ink-soft); }
.npa-choix button { font: inherit; font-size: 16px; text-align: left; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; }
.npa-choix button:hover, .npa-choix button:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; }
input::-webkit-date-and-time-value { text-align: left; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { position: relative; }
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.tile label { display: flex; align-items: center; gap: 10px; height: 100%; min-height: 52px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: .9rem; font-weight: 500; color: var(--ink); cursor: pointer; }
.tile label .ico { color: var(--brand); width: 20px; height: 20px; }
.tile label:hover { border-color: var(--brand); }
.tile input:checked + label { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.tile input:focus-visible + label { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); }
.addon { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--fresh) 45%, var(--line)); border-radius: 10px; background: var(--fresh-soft); cursor: pointer; }
.addon input { width: 20px; height: 20px; min-height: 0; flex-shrink: 0; margin: 1px 0 0; padding: 0; accent-color: var(--fresh); }
.addon strong { display: block; font-size: .92rem; }
.addon small { display: block; font-size: .8rem; color: var(--ink-soft); }
/* Prestations souhaitées (entretien de locaux) : cases à cocher en grille */
fieldset.prest { border: 0; margin: 0; padding: 0; min-width: 0; }
.prest legend { padding: 0; margin-bottom: 6px; }
.prest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 460px) { .prest-grid { grid-template-columns: 1fr; } }
.prest-item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: .92rem; font-weight: 500; color: var(--ink); cursor: pointer; }
.prest-item input { width: 20px; height: 20px; min-height: 0; flex-shrink: 0; margin: 0; padding: 0; accent-color: var(--brand); }
.prest-item:hover { border-color: var(--brand); }
.prest-item:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.nav-btns { display: flex; gap: 10px; margin-top: 4px; }
.nav-btns .btn-primary { flex: 1; }
@media (max-width: 420px) { .nav-btns .btn { padding-inline: 16px; white-space: normal; text-align: center; } }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }
.consent input { width: 20px; height: 20px; min-height: 0; flex-shrink: 0; padding: 0; margin-top: 1px; accent-color: var(--brand); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { display: none; font-size: .86rem; color: var(--warn); background: var(--warn-soft); padding: 10px 12px; border-radius: 10px; }
.form-error.show { display: block; }
.success { display: none; }
.success.show { display: block; }
.success-check { width: 52px; height: 52px; border-radius: 50%; background: var(--fresh); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 16px; box-shadow: 0 0 0 8px var(--fresh-soft); }
.success ol { list-style: decimal; padding-left: 20px; margin-top: 16px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 8px; }

/* Mentions légales */
.prose { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.prose h2 { font-size: 1.6rem; margin-top: 12px; }
.prose p { color: var(--ink-soft); }

/* Bandeau d'appel + pied de page */
.cta-band { background: var(--bg); padding-block: clamp(48px, 7vw, 80px); }
.cta-box { background: var(--brand); border-radius: 20px; padding: clamp(28px, 5vw, 52px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-box h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cta-box p { color: #D9DEF0; }

/* Barre mobile fixe */
.mobile-bar { display: none; }
@media (max-width: 700px) {
  .mobile-bar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); transition: transform .2s; }
  .mobile-bar.hide { transform: translateY(110%); }
  .mobile-bar .btn-primary { flex: 1; }
  .mobile-bar .btn-icon { flex: 0 0 48px; width: 48px; padding: 0; }
}

/* Illustrations */
.i-wall { fill: var(--brand-soft); }
.i-floor { fill: color-mix(in srgb, var(--brand) 16%, var(--surface)); }
.i-shine { fill: var(--surface); opacity: .55; }
.i-base { stroke: var(--brand); stroke-width: 2; opacity: .3; }
.i-glass { fill: var(--surface); stroke: var(--brand); stroke-width: 2.5; }
.i-thin { fill: none; stroke: var(--brand); stroke-width: 2; }
.i-glint { fill: var(--fresh); opacity: .22; }
.i-line { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.i-solid { fill: var(--brand); }
.i-soft { fill: var(--surface); stroke: var(--brand); stroke-width: 2.5; }
.i-fresh { fill: var(--fresh); }
.i-fresh-line { fill: none; stroke: var(--fresh); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.i-warm { fill: #D9A765; }
.i-warm-line { fill: none; stroke: #B07F3C; stroke-width: 2; }
.i-spark { fill: var(--gold); }
/* Écrans tactiles : pas d'effet de survol qui reste « collé » après un toucher */
@media (hover: none) {
  .btn-primary:hover { transform: none; }
  .svc-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .svc-card:hover .illus { transform: none; }
}
/* Contenus provisoires (data-todo) : masqués aux visiteurs tant qu'ils ne sont pas remplis.
   Mode brouillon (CONFIG.modeBrouillon ou ?brouillon=1 dans l'adresse) : visibles, encadrés en pointillés. */
html:not(.brouillon) [data-todo] { display: none !important; }
html.brouillon [data-todo] { outline: 2px dashed var(--gold); outline-offset: 3px; }
@media (max-width: 760px) { html:not(.brouillon) .topbar.no-contact { display: none; } }
.draft-banner { display: none; background: var(--gold); color: var(--brand-deep); font-size: .82rem; font-weight: 600; text-align: center; padding: 6px 12px; }
html.brouillon .draft-banner { display: block; }
/* Accueil : un filet sépare les sections quand deux fonds identiques se suivent (section masquée) */
#accueil .sec { border-top: 1px solid var(--line); }
/* Comment ça se passe (accueil) */
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 800px) { .how-grid { grid-template-columns: 1fr; gap: 18px; } }
/* FAQ */
.faq { max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-weight: 600; font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; font-family: 'Marcellus', Georgia, serif; font-size: 1.6rem; line-height: 1; color: var(--brand); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 10px; color: var(--ink-soft); max-width: 66ch; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
/* Landing Google Ads (/devis/) : haut de page bleu marine avec le formulaire à droite (dessous sur mobile) */
.lp-hero { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; }
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(28px, 5vw, 60px); align-items: start; padding-block: clamp(32px, 6vw, 72px); }
@media (max-width: 900px) { .lp-grid { grid-template-columns: minmax(0, 1fr); } }
.lp-grid .form-card { order: 0; color: var(--ink); }
.lp-copy, .lp-copy-txt { display: flex; flex-direction: column; gap: 18px; }
.lp-copy { padding-top: clamp(0px, 3vw, 28px); }
.lp-copy h1 { color: #fff; max-width: 18ch; }
.lp-copy .lead { color: #D9DEF0; }
.lp-copy .ticks { color: #D9DEF0; }
.lp-copy .ticks .ico { color: var(--gold-light); }
.lp-direct { font-size: .92rem; color: #C9D1EA; }
.lp-direct a { color: #fff; }
.lp-call { min-height: 44px; padding: 10px 18px; }
@media (max-width: 520px) { .lp-call { padding-inline: 14px; font-size: .92rem; } }
/* Slogan validé par Etienne (29.09.2026), sous le logo dans le pied de page */
.foot-slogan { font-family: 'Marcellus', Georgia, serif; font-style: italic; font-size: 1.05rem; color: var(--gold); margin: 2px 0 0; }
.who-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =====================================================================
   Évolutions du 01.10.2026 : transitions du formulaire plus douces, pied de page mobile court,
   FAQ à thèmes, pages par prestation, emplacements de photos, finitions élégantes
   ===================================================================== */

/* --- Formulaire : passage d'une étape à l'autre plus lent et plus doux --- */
fieldset.pane:not([hidden]) { animation: paneIn .6s cubic-bezier(.22,.61,.36,1) both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.progress-bar span { transition: width .8s cubic-bezier(.22,.61,.36,1); }

/* --- Finitions : bandeau des pages intérieures, titres, cartes --- */
.band { background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%); position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; right: clamp(8px, 6vw, 90px); top: 50%; width: clamp(120px, 20vw, 260px); aspect-ratio: 8 / 5; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2064%2040%27%3E%3Cpath%20d=%27M22%203Q22%2012%2031%2012Q22%2012%2022%2021Q22%2012%2013%2012Q22%2012%2022%203Z%27%20fill=%27%23C29A4E%27/%3E%3Cpath%20d=%27M44%2014Q44%2018%2048%2018Q44%2018%2044%2022Q44%2018%2040%2018Q44%2018%2044%2014Z%27%20fill=%27%23C29A4E%27/%3E%3C/svg%3E") no-repeat center / contain; opacity: .2; pointer-events: none; }
.band .wrap { position: relative; z-index: 1; }
.eyebrow::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: 10px; }
.btn-primary { box-shadow: 0 8px 18px -10px rgba(36,49,106,.7); }
.card, .inc, .svc-card { transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease; }
.inc:hover, .card:hover { box-shadow: 0 14px 30px -20px rgba(18,24,51,.35); }
.sec-head h2, .stack h2 { text-wrap: balance; }

/* --- Photos libres de droits d'illustration (affichées seulement quand un fichier existe) --- */
.photo { margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 18px 40px -26px rgba(18,24,51,.45); }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.photo figcaption { padding: 8px 14px; font-size: .78rem; color: var(--ink-soft); background: var(--surface); }

/* --- Cartes de prestations --- */
.presta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .presta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .presta-grid { grid-template-columns: 1fr; } }
.presta-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); text-decoration: none; color: var(--ink); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.presta-card .ico { width: 30px; height: 30px; color: var(--brand); margin-bottom: 4px; }
.presta-card strong { font-size: 1.08rem; }
.presta-card span { font-size: .93rem; color: var(--ink-soft); }
.presta-card em { margin-top: auto; padding-top: 6px; font-style: normal; font-weight: 600; font-size: .9rem; color: var(--brand); }
.presta-card em::after { content: " →"; }
.presta-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: 0 18px 34px -24px rgba(18,24,51,.5); }
.presta-mini .presta-card { padding: 16px 18px; }
@media (hover: none) { .presta-card:hover { transform: none; box-shadow: none; border-color: var(--line); } }

/* --- FAQ : lien vers la page complète, choix par thème --- */
.faq-more { margin-top: 18px; font-weight: 600; }
.faq-filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.faq-filtres[hidden] { display: none; }
.faq-chip { font: inherit; font-size: .95rem; font-weight: 600; min-height: 44px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.faq-chip:hover { border-color: var(--brand); }
.faq-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.faq-page { max-width: 860px; }
.faq-item[hidden] { display: none; }
.faq-contact { max-width: 860px; display: flex; flex-direction: column; gap: 12px; }
.faq details { transition: background .25s ease; }
.faq details[open] summary { color: var(--brand); }

@media (max-width: 600px) { .band::after { width: 84px; right: 10px; top: 22%; opacity: .14; } }

/* =====================================================================
   REFONTE DU 02.10.2026 — objectif conversion (appels, devis, photos)
   Sobre et premium : blanc / gris / noir, une seule couleur d'accent (le bleu marine du logo),
   l'or réservé aux filets et aux détails. Le vert du logo n'est plus utilisé dans l'interface.
   ===================================================================== */
:root { --fresh: var(--brand); --fresh-text: var(--brand); --fresh-soft: var(--brand-soft); --bg: #F5F6F8; }
.eyebrow { color: var(--brand); }
.eyebrow.on-dark { color: var(--gold-light); }
.sec { padding-block: clamp(64px, 9vw, 120px); }

/* --- Boutons --- */
.btn-lg { min-height: 56px; padding: 14px 30px; font-size: 1.05rem; }
.btn-call { background: var(--brand); color: #fff; }
.btn-call:hover { background: var(--brand-deep); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.link-arrow { font-weight: 600; color: var(--brand); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.link-arrow::after { content: "→"; transition: transform .25s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* --- En-tête : navigation à plat + devis + appel (mobile) --- */
.main-nav { gap: clamp(14px, 1.9vw, 26px); }
.main-nav > a { font-size: .93rem; white-space: nowrap; }
.header-row { gap: 16px; }
.header-cta { margin-left: 4px; min-height: 46px; padding: 10px 20px; }
.header-call { display: none; width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--brand); align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 980px) {
  .header-row { justify-content: flex-start; }
  .brand-wrap { margin-right: auto; }
  .header-call { display: inline-flex; }
}

/* --- Hero --- */
.hero2 { background: var(--surface); }
.hero2-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(32px, 6vw, 84px); }
.hero2-copy { display: flex; flex-direction: column; gap: 22px; }
.hero2 h1 { font-size: clamp(2.35rem, 5.4vw, 4rem); line-height: 1.04; letter-spacing: -.012em; max-width: 14ch; text-wrap: balance; }
.hero2 .lead { font-size: clamp(1.05rem, 1.7vw, 1.22rem); max-width: 46ch; color: var(--ink-soft); }
.hero2-actions { gap: 12px; margin-top: 6px; }
.hero2-reassure { font-size: .92rem; font-weight: 500; color: var(--ink-soft); letter-spacing: .01em; }
.hero2-visual { margin: 0; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--brand-deep); }
.hero2-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 880px) {
  .hero2-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hero2-visual { aspect-ratio: 16 / 10; }
  .hero2-actions .btn { flex: 1 1 100%; }
}

/* --- Barre de confiance --- */
.trust { background: var(--brand-deep); color: #fff; }
.trust ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding-block: 18px; }
.trust li { display: flex; align-items: center; gap: 10px; font-size: .94rem; font-weight: 500; }
.trust .ico { width: 18px; height: 18px; color: var(--gold-light); }
@media (max-width: 760px) { .trust ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .trust li { font-size: .88rem; } .trust li:last-child { grid-column: 1 / -1; } }

/* --- Quel nettoyage recherchez-vous ? --- */
.need-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 960px) { .need-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
.need-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: box-shadow .35s ease, border-color .35s ease; }
.need-card:hover { box-shadow: 0 22px 40px -28px rgba(18,24,51,.55); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.need-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--brand-deep); }
.need-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.need-card:hover .need-media img { transform: scale(1.035); }
.need-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 26px; flex: 1; }
.need-body h3 { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.6rem; line-height: 1.15; }
.need-body p { color: var(--ink-soft); font-size: .98rem; }
.need-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: auto; padding-top: 14px; }
@media (hover: none) { .need-card:hover { box-shadow: none; border-color: var(--line); } .need-card:hover .need-media img { transform: none; } }

/* --- Processus --- */
.process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.process li { padding: 22px 22px 0 0; display: flex; flex-direction: column; gap: 8px; }
.process .n { font-family: 'Marcellus', Georgia, serif; font-size: 2.3rem; line-height: 1; color: var(--brand); }
.process strong { font-size: 1.08rem; }
.process span.t { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 900px) {
  .process { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .process li { display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; padding: 20px 0; border-top: 1px solid var(--line); }
  .process .n { grid-row: span 2; font-size: 2rem; }
}

/* --- Pourquoi ERGIA --- */
.why2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 980px) { .why2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .why2 { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.why2 > div { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--ink); }
.why2 strong { font-size: 1.12rem; }
.why2 span { color: var(--ink-soft); font-size: .97rem; }

/* --- Fondateur --- */
.about2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
@media (max-width: 800px) { .about2 { grid-template-columns: minmax(0, 1fr); } }
.about2 .founder-photo { border-radius: 10px; max-width: 420px; }
.about2 h2 { max-width: 16ch; }
.about2 .pull { font-family: 'Marcellus', Georgia, serif; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.35; color: var(--ink); }
.founder-more { margin-top: 2px; }
.founder-more summary { cursor: pointer; font-weight: 600; color: var(--brand); min-height: 44px; display: inline-flex; align-items: center; list-style: none; }
.founder-more summary::-webkit-details-marker { display: none; }
.founder-more summary::after { content: " +"; margin-left: 6px; }
.founder-more[open] summary::after { content: " −"; }
.founder-more .stack { margin-top: 8px; }

/* --- Avis (structure prête ; masquée tant qu'il n'y a pas de vrais avis) --- */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .reviews { grid-template-columns: minmax(0, 1fr); } }
.review { margin: 0; padding: 26px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.review .stars { color: var(--gold); letter-spacing: .12em; font-size: 1.05rem; }
.review blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.review figcaption { font-size: .88rem; color: var(--ink-soft); }

/* --- Bandeau d'appel des pages intérieures : devis + appel --- */
.cta-box .actions { flex: 0 1 auto; }
@media (max-width: 520px) { .cta-box .actions { width: 100%; } .cta-box .actions .btn { flex: 1 1 100%; } }

/* --- Barre mobile : appel + devis toujours accessibles --- */
@media (max-width: 700px) {
  .mobile-bar { gap: 8px; }
  .mobile-bar .btn { min-height: 52px; padding-inline: 14px; }
  .mobile-bar .btn-call { flex: 1.25; }
  .mobile-bar .btn-quote { flex: 1; }
  .mobile-bar .btn-icon { flex: 0 0 52px; width: 52px; }
  body { padding-bottom: 0; }
}

/* =====================================================================
   FORMULAIRE EN ÉTAPES (rendu par ergia.js dans #leadForm)
   ===================================================================== */
.q { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: clamp(1.4rem, 3.4vw, 1.8rem); line-height: 1.22; margin-bottom: 4px; color: var(--ink); }
.q-hint { font-size: .92rem; color: var(--ink-soft); margin-top: -4px; }
.tiles-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 420px) { .tiles-big { grid-template-columns: minmax(0, 1fr); } }
.tiles-big .tile label { min-height: 64px; padding: 14px 16px; font-size: 1rem; font-weight: 600; }
.tiles-big .tile label .ico { width: 24px; height: 24px; }
.chipset { display: flex; flex-wrap: wrap; gap: 10px; }
.chipopt { position: relative; }
.chipopt input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.chipopt label { display: inline-flex; align-items: center; min-height: 54px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-weight: 600; font-size: 1rem; color: var(--ink); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.chipopt label:hover { border-color: var(--brand); }
.chipopt input:checked + label { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.chipopt input:focus-visible + label { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); }
.field-help { font-size: .84rem; color: var(--ink-soft); }
.nav-btns .btn-primary { flex: 1; min-height: 54px; }
.nav-btns .btn-outline { min-height: 54px; }
.form-reassure { text-align: center; font-size: .86rem; color: var(--ink-soft); margin-top: -4px; }
.back-link { align-self: flex-start; font: inherit; font-size: .92rem; font-weight: 600; color: var(--ink-soft); background: none; border: 0; padding: 10px 0; cursor: pointer; min-height: 44px; }
.back-link:hover { color: var(--brand); }

/* Photos du chantier */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 150px; padding: 22px 18px; border: 2px dashed #B9C1DA; border-radius: 14px; background: var(--bg); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.dropzone:hover, .dropzone:focus-within { border-color: var(--brand); background: var(--brand-soft); }
.dropzone input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; pointer-events: none; }
.dropzone strong { font-size: 1.02rem; }
.dropzone span { font-size: .88rem; color: var(--ink-soft); }
.dropzone .ico { width: 30px; height: 30px; color: var(--brand); }
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 420px) { .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--brand-soft); border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb button { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(18,24,51,.82); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.photo-msg { font-size: .86rem; color: var(--ink-soft); }
.photo-msg.err { color: var(--warn); }
.photo-count { font-size: .86rem; color: var(--ink-soft); }

/* Alternative directe */
.call-alt { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.call-alt strong { display: block; font-size: 1rem; }
.call-alt span { font-size: .9rem; color: var(--ink-soft); }
.call-alt .btn { min-height: 48px; }

/* Envoi des photos après la demande */
.send-state { display: none; align-items: center; gap: 10px; font-size: .92rem; color: var(--ink-soft); margin-top: 10px; }
.send-state.show { display: flex; }

@media (max-width: 520px) { .actions .btn-lg { flex: 1 1 100%; } }
.side-card .btn { width: 100%; }
/* Très petits écrans (320–380 px) : la barre fixe reste dans l'écran */
@media (max-width: 380px) {
  .mobile-bar { gap: 6px; padding-inline: 8px; }
  .mobile-bar .btn { padding-inline: 10px; font-size: .95rem; min-width: 0; }
  .mobile-bar .btn-call .ico { display: none; }
  .mobile-bar .btn-icon { flex: 0 0 48px; width: 48px; }
  .mobile-bar .btn-call { flex: 1.3 1 0; }
  .mobile-bar .btn-quote { flex: 1 1 0; }
}

/* =====================================================================
   Bouton WhatsApp flottant (02.10.2026) : discret, en bas à droite, sur toutes les pages
   ===================================================================== */
.wa-float { --wa-bas: 24px; --wa-droite: 24px; position: fixed; z-index: 45; right: calc(var(--wa-droite) + env(safe-area-inset-right, 0px)); bottom: calc(var(--wa-bas) + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none;
  box-shadow: 0 6px 18px -6px rgba(18,24,51,.38), 0 2px 6px rgba(18,24,51,.14); transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, bottom .25s ease, opacity .25s ease; animation: waEntree .7s cubic-bezier(.22,.61,.36,1) 1s backwards; }
.wa-float svg { width: 30px; height: 30px; fill: currentColor; display: block; }
.wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 55%, transparent), 0 6px 18px -6px rgba(18,24,51,.38); }
@keyframes waEntree { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
/* Bulle d'information au survol (ordinateur seulement) */
.wa-tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); background: var(--brand-deep); color: #fff; font-size: .85rem; font-weight: 500; line-height: 1; white-space: nowrap; padding: 10px 14px; border-radius: 8px; box-shadow: 0 8px 20px -10px rgba(18,24,51,.5); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.wa-tip::after { content: ""; position: absolute; left: 100%; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left-color: var(--brand-deep); }
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover { transform: scale(1.07); box-shadow: 0 10px 24px -8px rgba(18,24,51,.42), 0 3px 8px rgba(18,24,51,.16); }
  .wa-float:hover .wa-tip, .wa-float:focus-visible .wa-tip { opacity: 1; transform: translate(0, -50%); }
}
/* Mobile : 18 px du bord, et AU-DESSUS de la barre fixe « Appeler ERGIA / Devis » (qui se replie quand le formulaire est visible) */
@media (max-width: 700px) {
  .wa-float { --wa-droite: 18px; --wa-bas: 91px; }
  .mobile-bar.hide ~ .wa-float { --wa-bas: 18px; }
}
/* Écrans étroits : on s'efface quand le formulaire de devis est visible (ses boutons « Continuer » sont à droite) ou quand le menu est ouvert */
@media (max-width: 1099px) { .wa-float.cache { opacity: 0; pointer-events: none; transform: scale(.9); } }
html.menu-ouvert .wa-float, .wa-float.evite { opacity: 0; pointer-events: none; transform: scale(.9); }
/* Le bas de page ne doit pas passer sous le bouton (ordinateur et tablette) */


/* Photo de l'en-tête de l'accueil : très lent zoom (18 s, aller-retour). Le cadre `.hero2-visual` a overflow: hidden, donc rien ne déborde.
   Désactivé automatiquement avec « réduire les animations » (règle générale plus haut). */
.hero-image { animation: heroZoom 18s ease-in-out infinite alternate; will-change: transform; transform-origin: 50% 50%; }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* =====================================================================
   Pied de page avec panorama du lac et des Alpes (02.10.2026)
   Photo d'ambiance fournie par l'utilisateur (haut de son image, sans texte), fondue vers le bleu marine ; tout le texte reste du vrai HTML.
   ===================================================================== */
.site-footer { --foot-h: max(21vw, 260px); position: relative; isolation: isolate; overflow: hidden; background: var(--brand-deep); color: #C9D1EA; padding-top: calc(var(--foot-h) * .56); }
.foot-photo { position: absolute; left: 0; top: 0; width: 100%; height: var(--foot-h); object-fit: cover; object-position: 55% 30%; z-index: -2; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--foot-h); z-index: -1; background: linear-gradient(to bottom, rgba(24,34,82,0) 0%, rgba(24,34,82,.08) 42%, rgba(24,34,82,.8) 80%, var(--brand-deep) 100%); }
.foot-grid { display: grid; grid-template-columns: 1.15fr .9fr .9fr 1.65fr; gap: 0; align-items: start; }
.foot-grid > * { padding-inline: clamp(16px, 2.2vw, 32px); }
.foot-grid > *:first-child { padding-left: 0; }
.foot-grid > * + * { border-left: 1px solid rgba(255,255,255,.16); }
.brand-light { color: #fff; }
.foot-brand .logo-mark { width: 86px; height: 42px; }
.foot-brand .wordmark { font-size: 2rem; }
.site-footer p { font-size: .95rem; max-width: 330px; color: #E1E6F5; }
.foot-brand { gap: 12px; }
.foot-icons { display: flex; gap: 12px; margin-top: 6px; }
.foot-icons a { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; color: #fff; text-decoration: none; transition: background .25s ease, border-color .25s ease; }
.foot-icons a:hover, .foot-icons a:focus-visible { background: rgba(255,255,255,.14); border-color: #fff; }
.foot-icons .ico { width: 20px; height: 20px; }
.foot-col { display: flex; flex-direction: column; gap: 11px; font-size: .98rem; }
.foot-col strong { color: #fff; font-size: 1.12rem; font-weight: 600; letter-spacing: .01em; padding-bottom: 14px; margin-bottom: 4px; position: relative; }
.foot-col strong::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: #7CC97F; }
.foot-col a, .foot-bottom a { color: #D5DBEE; text-decoration: none; }
.foot-col a:hover, .foot-bottom a:hover { color: #fff; }
.foot-ligne { display: flex; align-items: flex-start; gap: 14px; }
.foot-ligne .ico { width: 26px; height: 26px; color: #7CC97F; margin-top: 2px; }
.foot-ligne span { display: flex; flex-direction: column; line-height: 1.3; }
.foot-ligne b { font-weight: 600; color: #fff; font-size: 1rem; overflow-wrap: anywhere; }
.foot-ligne small { font-size: .88rem; color: #BFC8E2; }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: 44px; padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px)); font-size: .85rem; border-top: 1px solid rgba(255,255,255,.16); color: #C9D1EA; }
.foot-legal { display: flex; align-items: center; }
.foot-legal a { padding-inline: 18px; }
.foot-legal a + a { border-left: 1px solid rgba(255,255,255,.3); }
.foot-ch { display: inline-flex; align-items: center; gap: 8px; }
.foot-ch svg { width: 20px; height: 20px; border-radius: 3px; }
@media (max-width: 960px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .foot-grid > *:nth-child(odd) { padding-left: 0; }
  .foot-grid > *:nth-child(3) { border-left: 0; }
  .foot-grid > *:nth-child(3), .foot-grid > *:nth-child(4) { padding-top: 6px; }
}
/* Mobile : pied de page court et concis */
@media (max-width: 760px) {
  .site-footer { --foot-h: 200px; padding-top: 100px; }
  .foot-grid { grid-template-columns: 1fr; row-gap: 14px; }
  .foot-grid > *, .foot-grid > *:nth-child(odd) { padding-inline: 0; }
  .foot-grid > * + *, .foot-grid > *:nth-child(3) { border-left: 0; }
  .foot-brand p:not(.foot-slogan), .foot-icons { display: none; }
  .foot-links { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; font-size: .92rem; }
  .foot-links strong, .foot-contact strong { display: none; }
  .foot-contact { gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); }
  .foot-contact .foot-ligne small, .foot-contact a[href*="#devis"] { display: none; }
  .foot-ligne { gap: 10px; }
  .foot-ligne .ico { width: 20px; height: 20px; margin-top: 1px; }
  .foot-ligne b { font-size: .95rem; font-weight: 500; }
  .foot-bottom { margin-top: 18px; padding-block: 14px calc(14px + 76px + env(safe-area-inset-bottom, 0px)); font-size: .78rem; flex-direction: column; align-items: flex-start; gap: 8px; }
  .foot-legal a { padding-inline: 0 14px; }
  .foot-legal a + a { border-left: 0; padding-left: 0; }
}
@media (min-width: 701px) { .site-footer { padding-bottom: 72px; } }


/* =====================================================================
   MODIFICATION FINALE (02.10.2026) : en-tête bleu nuit + slogan doré, accueil recentré sur la conversion,
   WhatsApp comme deuxième canal, pied de page en dégradé. Les règles ci-dessous passent après les anciennes.
   ===================================================================== */
:root { --or-slogan: #C9AD59; --nuit: #061D2C; --nuit-2: #102A4A; --wa: #25D366; }

/* --- En-tête : slogan doré sous le logo (le logo et l'en-tête blanc ne changent pas) --- */
.brand-wrap { position: relative; }
.brand-slogan { position: absolute; left: 0; top: calc(100% + 1px); font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: .75rem; line-height: 1; letter-spacing: .05em; white-space: nowrap; color: var(--or-slogan); pointer-events: none; }
.header-wa { color: #0E7A43; }

/* --- Boutons WhatsApp --- */
.ico-wa { width: 20px; height: 20px; flex: 0 0 auto; }
.btn-wa .ico-wa { color: var(--wa); }
.btn-wa-plein { background: #0E7A43; color: #fff; border-color: #0E7A43; }   /* vert WhatsApp foncé : texte blanc lisible (5,4:1 ; le vert clair #25D366 ne donne que 2:1) */
.btn-wa-plein:hover { background: #0B6638; color: #fff; }
.btn-wa-plein .ico-wa { color: #fff; }

/* --- Accueil : hero plus compact, titre plus petit (≈ –30 %) --- */
.hero2-grid { padding-block: clamp(28px, 4.5vw, 64px); align-items: center; }
.hero2 h1 { font-size: clamp(1.85rem, 3.7vw, 2.85rem); line-height: 1.12; max-width: none; letter-spacing: -.005em; }
.hero2-copy { gap: 20px; }
.hero2-visual { aspect-ratio: 1 / 1; }
@media (max-width: 980px) { .hero2-visual { aspect-ratio: 16 / 10; } }

/* --- Accueil : les 4 prestations --- */
#prestations .lead { color: var(--ink-soft); }
.need-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } }
@media (max-width: 600px) { .need-grid { grid-template-columns: minmax(0, 1fr); } }
.need-media { aspect-ratio: 4 / 3; }
.need-body { gap: 8px; padding: 22px 22px 24px; }
.need-n { font-family: 'Marcellus', Georgia, serif; font-size: .95rem; letter-spacing: .08em; color: #8A6D1F; }
.need-body h3 { font-size: 1.45rem; }
.need-body h3 a { color: inherit; text-decoration: none; }
.need-body h3 a:hover { color: var(--brand); }
.need-cta { padding-top: 12px; }
@media (max-width: 600px) { .need-media { aspect-ratio: 16 / 9; } }

/* --- Réassurance compacte --- */
.sec-compact { padding-block: clamp(48px, 6vw, 80px); }

/* --- Méthode : texte court --- */
.process span.t { font-size: .93rem; }

/* --- Barre fixe mobile de l'accueil : WhatsApp + Devis (le bouton flottant ferait doublon) --- */
@media (max-width: 700px) {
  .mobile-bar .btn-wa-plein { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
}

/* --- Formulaire : préférence de contact --- */
.contact-pref .chipopt label { gap: 8px; }

/* --- Pied de page : slogan doré (la règle .site-footer p l'affichait en gris-blanc) --- */
.site-footer .foot-slogan { color: var(--or-slogan); }

/* =====================================================================
   Barre de recherche de l'accueil (02.10.2026) : transition entre l'en-tête de page et les prestations.
   Principe : grande barre arrondie + placeholder + suggestions. Couleurs et typographie ERGIA : bleu marine, bleu du trait (focus), or (détails).
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.finder { --bar-h: 76px; background: var(--surface); padding-bottom: clamp(30px, 4vw, 48px); position: relative; z-index: 6; }
.finder::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--bar-h) / 2); background: var(--brand-deep); }   /* prolonge la barre bleue de confiance derrière la moitié haute de la barre */
.finder .wrap { position: relative; }
.finder-form { position: relative; margin-top: 0; }
.finder-bar { display: flex; align-items: center; gap: 8px; height: var(--bar-h); padding: 0 14px 0 36px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid #D5DBE8; border-radius: 999px;
  box-shadow: 0 22px 44px -28px rgba(18,24,51,.45), 0 2px 8px rgba(18,24,51,.05); transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease, background .35s ease; }
.finder-bar:focus-within { transform: translateY(-2px); background: #fff; border-color: #3F7FC1; box-shadow: 0 0 0 5px rgba(63,127,193,.14), 0 30px 52px -28px rgba(18,24,51,.5); }
.finder-bar input, .finder-bar input:focus { flex: 1; min-width: 0; width: auto; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font: inherit; font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: .005em; color: var(--ink); caret-color: var(--gold); text-overflow: ellipsis; }
.finder-bar input::placeholder { color: #6E7691; opacity: 1; }
.finder-submit { flex: 0 0 52px; width: 52px; height: 52px; border: 0; border-radius: 50%; background: transparent; color: var(--brand); display: grid; place-items: center; cursor: pointer; opacity: .78; transition: background .25s ease, opacity .25s ease; }
.finder-submit svg { width: 24px; height: 24px; }
.finder-submit:hover, .finder-bar:focus-within .finder-submit { background: var(--brand-soft); opacity: 1; }
.finder-help { margin-top: 18px; padding-inline: 4px; font-size: .95rem; color: var(--ink-soft); }
.finder-list { position: absolute; left: 0; right: 0; top: calc(var(--bar-h) + 10px); z-index: 30; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 34px 64px -32px rgba(18,24,51,.55); max-height: min(68vh, 470px); overflow-y: auto; overscroll-behavior: contain; animation: finderOuvre .24s cubic-bezier(.22,.61,.36,1) backwards; }
.finder-list[hidden] { display: none; }
@keyframes finderOuvre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes finderItem { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.finder-head { display: flex; align-items: center; gap: 10px; padding: 8px 18px 6px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.finder-head::before { content: ""; width: 20px; height: 1px; background: var(--gold); }
.finder-opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 11px 16px; border-radius: 18px; color: var(--ink); text-decoration: none; animation: finderItem .32s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 45ms) backwards; transition: background .2s ease; }
.finder-opt:hover, .finder-opt.actif { background: #F2F4FA; }
.finder-opt.actif::before { content: ""; position: absolute; left: 4px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--gold); }
.finder-ico { flex: 0 0 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.finder-ico svg { width: 21px; height: 21px; }
.finder-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.finder-txt strong { font-weight: 600; font-size: 1.02rem; }
.finder-txt small { font-size: .88rem; color: var(--ink-soft); line-height: 1.35; }
.finder-go { margin-left: auto; color: var(--gold); font-size: 1.1rem; transition: transform .2s ease; }
.finder-opt:hover .finder-go, .finder-opt.actif .finder-go { transform: translateX(3px); }
/* La suggestion « Demander un devis » reste la plus marquée : le devis est l'objectif */
.finder-devis { margin-top: 6px; background: var(--brand); color: #fff; }
.finder-devis small { color: #D9DEF0; }
.finder-devis .finder-ico { background: rgba(255,255,255,.14); color: #fff; }
.finder-devis .finder-go { color: var(--gold-light); }
.finder-devis:hover, .finder-devis.actif { background: var(--brand-deep); }
.finder-devis.actif::before { background: var(--gold-light); }
.finder-vide { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 18px 16px; }
.finder-vide strong { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.3rem; }
.finder-vide span { color: var(--ink-soft); font-size: .95rem; max-width: 48ch; }
.finder-vide .btn { margin-top: 6px; }
@media (max-width: 700px) {
  .finder { --bar-h: 64px; }
  .finder-bar { padding: 0 8px 0 22px; }
  .finder-list { border-radius: 22px; padding: 8px; max-height: min(58vh, 420px); }
  .finder-opt { min-height: 60px; padding: 10px 12px; gap: 12px; }
  .finder-ico { flex-basis: 38px; height: 38px; }
  .finder-go { display: none; }
  .finder-help { font-size: .9rem; }
}
/* Pendant que la liste est ouverte, rien d'autre ne flotte par-dessus (barre mobile, bouton WhatsApp) */
html.recherche-ouverte .mobile-bar { transform: translateY(110%); }
html.recherche-ouverte .wa-float { opacity: 0; pointer-events: none; }

/* Ordre de l'accueil (demande du 02.10.2026) : hero → barre de recherche → bandeau bleu de confiance → prestations.
   La barre CHEVAUCHE le haut du bandeau : sa moitié basse est posée sur le bleu, qui commence au milieu de la barre. */
.finder { padding-top: 0; padding-bottom: 0; background: var(--brand-deep); }
.finder::before { display: block; top: 0; bottom: auto; height: calc(var(--bar-h) / 2); background: var(--surface); }   /* moitié haute blanche, le bleu commence au milieu de la barre */
.finder + .trust ul { padding-top: 22px; }
/* Mobile : barre et bandeau plus compacts (texte du champ gardé à 16 px pour éviter le zoom automatique d'iPhone) */
@media (max-width: 700px) {
  .finder { --bar-h: 52px; }
  .finder-bar { padding: 0 4px 0 18px; box-shadow: 0 14px 28px -20px rgba(18,24,51,.45); }
  .finder-bar input, .finder-bar input:focus { font-size: 16px; }
  .finder-submit { flex-basis: 44px; width: 44px; height: 44px; }
  .finder-submit svg { width: 20px; height: 20px; }
  .finder + .trust ul { padding-block: 16px 14px; gap: 8px 14px; }
  /* Mobile : seulement 3 points (Devis gratuit, Sans engagement, Intervention en Suisse romande) */
  .trust li:nth-child(n+4) { display: none; }
  /* … alignés sur une seule rangée : 3 colonnes égales, coche au-dessus du texte, centrés */
  .finder + .trust ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; align-items: start; }
  .trust li, .trust li:last-child { grid-column: auto; flex-direction: column; justify-content: flex-start; text-align: center; gap: 5px; line-height: 1.3; }
  .trust li { font-size: .8rem; gap: 7px; }
  .trust .ico { width: 15px; height: 15px; }
}

/* --- « Pourquoi ERGIA ? » : section sombre, éditoriale (02.10.2026) --- */
.why-dark { background: var(--brand-deep); color: #fff; position: relative; overflow: hidden; }
.why-dark::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(226,196,138,.55), transparent); }
.why-dark-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.why-dark-head h2 { color: #fff; }
.why-dark-head p { color: #C9D1EA; max-width: 30ch; }
.why-dark-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 56px); }
.why-dark-list li { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(226,196,138,.35); }
.wd-n { font-family: 'Marcellus', Georgia, serif; font-size: 1rem; letter-spacing: .12em; color: var(--gold-light); }
.why-dark-list strong { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.2; color: #fff; }
.why-dark-list li > span:last-child { color: #C9D1EA; font-size: .97rem; line-height: 1.6; max-width: 36ch; }
@media (max-width: 900px) { .why-dark-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .why-dark-list { grid-template-columns: minmax(0, 1fr); gap: 26px; } .why-dark-list li { padding-top: 18px; } }
/* … en cases : chaque principe dans un cadre fin doré, fond légèrement éclairci */
.why-dark-list { gap: 18px; }
.why-dark-list li { padding: clamp(22px, 2.6vw, 32px); border: 1px solid rgba(226,196,138,.28); border-radius: 12px; background: linear-gradient(160deg, #232C5E, #1C2556); transition: border-color .35s ease, background .35s ease, transform .35s ease; }
.why-dark-list li .wd-n { display: inline-flex; align-items: center; gap: 10px; }
.why-dark-list li .wd-n::after { content: ""; width: 26px; height: 1px; background: rgba(226,196,138,.6); }
@media (hover: hover) { .why-dark-list li:hover { border-color: rgba(226,196,138,.6); background: linear-gradient(160deg, #283265, #1E2858); transform: translateY(-2px); } }
@media (max-width: 560px) { .why-dark-list { gap: 12px; } .why-dark-list li { padding: 20px; } }
/* … plus compact (demande du 02.10.2026 : « c'est très grand », surtout sur mobile) */
.why-dark { padding-block: clamp(44px, 5.5vw, 76px); }
.why-dark-grid { gap: clamp(24px, 4vw, 56px); }
.why-dark-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.why-dark-head p { font-size: .95rem; }
.why-dark-list { gap: 14px; }
.why-dark-list li { gap: 6px; padding: clamp(16px, 1.8vw, 22px); border-radius: 10px; }
.why-dark-list strong { font-size: clamp(1.08rem, 1.4vw, 1.22rem); }
.why-dark-list li > span:last-child { font-size: .9rem; line-height: 1.5; }
.wd-n { font-size: .85rem; }
@media (max-width: 560px) {
  .why-dark { padding-block: 36px 40px; }
  .why-dark-grid { gap: 18px; }
  .why-dark-head h2 { font-size: 1.45rem; }
  .why-dark-head p { font-size: .88rem; }
  .why-dark-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .why-dark-list li { padding: 14px 13px; gap: 4px; }
  .why-dark-list li .wd-n::after { width: 16px; }
  .why-dark-list strong { font-size: .98rem; }
  .why-dark-list li > span:last-child { font-size: .8rem; line-height: 1.45; }
}
/* … apparition à l'arrivée sur la section (classe posée par ergia.js ; sans JS tout reste visible) :
   le titre glisse, le filet doré du haut se déploie, puis les 4 cases montent l'une après l'autre et leur petit trait doré s'allonge. */
.reveal-pret:not(.revele) .why-dark-head, .reveal-pret:not(.revele) .why-dark-list li { opacity: 0; }
.reveal-pret:not(.revele)::before { transform: scaleX(0); }
.why-dark::before { transition: transform 1.4s cubic-bezier(.22,.61,.36,1); }
.revele .why-dark-head { animation: whyIn .9s cubic-bezier(.22,.61,.36,1) backwards; }
.revele .why-dark-list li { animation: whyIn .9s cubic-bezier(.22,.61,.36,1) backwards; animation-delay: calc(.25s + var(--i, 0) * .14s); }
.revele .why-dark-list li .wd-n::after { animation: whyTrait .8s cubic-bezier(.22,.61,.36,1) backwards; animation-delay: calc(.7s + var(--i, 0) * .14s); transform-origin: left; }
.why-dark-list li:nth-child(2) { --i: 1; } .why-dark-list li:nth-child(3) { --i: 2; } .why-dark-list li:nth-child(4) { --i: 3; }
@keyframes whyIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes whyTrait { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =====================================================================
   « Notre méthode » (accueil) : chronologie compacte (02.10.2026)
   Ordinateur : 5 étapes sur une ligne reliées par un fil ; mobile : fil vertical à gauche.
   Effet (classe « revele » posée par ergia.js) : le fil doré se trace, puis chaque étape apparaît à son tour.
   ===================================================================== */
.methode { padding-block: clamp(48px, 6vw, 84px); }
.methode h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.methode .stack-lg { gap: clamp(26px, 3.5vw, 40px); }
.timeline { --pt: 40px; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 18px; border-top: 0; list-style: none; margin: 0; padding: 0; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: calc(var(--pt) / 2); right: calc((100% - 72px) / 5 - var(--pt) / 2); top: calc(var(--pt) / 2); height: 1px; }
.timeline::before { background: var(--line); }
.timeline::after { height: 2px; margin-top: -.5px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform-origin: left; }
.timeline li { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; }
.timeline .n { display: grid; place-items: center; width: var(--pt); height: var(--pt); margin-bottom: 8px; border-radius: 50%; background: var(--surface); border: 1px solid var(--gold); font-family: 'Marcellus', Georgia, serif; font-size: .95rem; line-height: 1; color: var(--brand); box-shadow: 0 0 0 6px var(--surface); }
.timeline strong { font-size: 1rem; }
.timeline span.t { font-size: .88rem; color: var(--ink-soft); line-height: 1.5; max-width: 22ch; }
@media (max-width: 900px) {
  .timeline { --pt: 34px; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .timeline::before, .timeline::after { left: calc(var(--pt) / 2); right: auto; top: calc(var(--pt) / 2); bottom: calc(var(--pt) / 2); width: 1px; height: auto; }
  .timeline::after { width: 2px; margin: 0 0 0 -.5px; background: linear-gradient(180deg, var(--gold), var(--gold-light)); transform-origin: top; }
  .timeline li { display: grid; grid-template-columns: var(--pt) minmax(0, 1fr); column-gap: 14px; row-gap: 1px; align-items: start; padding: 0; border-top: 0; }
  .timeline .n { grid-row: span 2; margin: 0; font-size: .85rem; box-shadow: 0 0 0 4px var(--surface); }
  .timeline strong { font-size: .97rem; padding-top: 6px; }
  .timeline span.t { font-size: .84rem; max-width: none; }
  .methode .actions { flex-wrap: nowrap; gap: 10px; }
  .methode .actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
}
/* Effet de chronologie */
.reveal-pret:not(.revele) .timeline li { opacity: 0; }
.reveal-pret:not(.revele) .timeline::after { transform: scale(0, 1); }
@media (max-width: 900px) { .reveal-pret:not(.revele) .timeline::after { transform: scale(1, 0); } }
.revele .timeline::after { animation: filTrace 1.6s cubic-bezier(.45,.05,.25,1) .15s backwards; }
@keyframes filTrace { from { transform: scale(0, 1); } to { transform: none; } }
@media (max-width: 900px) { @keyframes filTraceV { from { transform: scale(1, 0); } to { transform: none; } } .revele .timeline::after { animation-name: filTraceV; } }
.revele .timeline li { animation: etapeIn .7s cubic-bezier(.22,.61,.36,1) backwards; animation-delay: calc(.2s + var(--e, 0) * .3s); }
.revele .timeline .n { animation: pointIn .6s cubic-bezier(.34,1.4,.64,1) backwards; animation-delay: calc(.2s + var(--e, 0) * .3s); }
.timeline li:nth-child(2) { --e: 1; } .timeline li:nth-child(3) { --e: 2; } .timeline li:nth-child(4) { --e: 3; } .timeline li:nth-child(5) { --e: 4; }
@keyframes etapeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pointIn { from { transform: scale(.4); background: var(--gold-light); } to { transform: none; } }
@media (max-width: 400px) { .methode .actions { flex-wrap: wrap; } .methode .actions .btn { flex: 1 1 100%; } }
/* « Notre façon de travailler » : une icône dorée par promesse à la place des chiffres (devis = document, interlocuteur = personne,
   travail vérifié = bouclier coché, date = calendrier). Le petit trait doré qui s'allonge à l'apparition est conservé. */
.wd-ico { color: var(--gold-light); }
.wd-ico svg { width: 30px; height: 30px; display: block; }
@media (max-width: 560px) { .wd-ico svg { width: 24px; height: 24px; } }

/* =====================================================================
   ACCUEIL : en-tête réduit et fusionné avec les 4 prestations (02.10.2026)
   Ordinateur : titre à gauche, boutons à droite, puis les 4 cartes. Mobile : titre puis directement les 4 prestations
   (les boutons Devis / WhatsApp restent dans la barre fixe du bas). Effets : apparition au chargement (CSS seul,
   le contenu reste visible sans JavaScript), survol des cartes. Tout est coupé avec « réduire les animations ».
   ===================================================================== */
.hero-fusion { position: relative; overflow: hidden; background: linear-gradient(180deg, #FFFFFF 0%, #F6F7FA 100%); }
.hero-fusion .wrap { padding-block: clamp(30px, 4vw, 56px) clamp(40px, 5vw, 68px); }
.hero-fusion .hero2-copy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "eb eb" "h1 act" "lead re"; column-gap: clamp(28px, 5vw, 72px); row-gap: 10px; align-items: end; }
.hero-fusion .eyebrow { grid-area: eb; }
.hero-fusion h1 { grid-area: h1; font-size: clamp(1.75rem, 3.1vw, 2.5rem); line-height: 1.12; }
.h1-accent { color: #8A6D1F; }
.hero-fusion .lead { grid-area: lead; font-size: 1rem; max-width: 44ch; }
.hero-fusion .hero2-actions { grid-area: act; justify-content: flex-end; margin: 0; }
.hero-fusion .hero2-reassure { grid-area: re; text-align: right; }
.fusion-prest { margin-top: clamp(30px, 3.5vw, 46px); }
.fusion-titre { display: flex; align-items: center; gap: 16px; font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin-bottom: 18px; max-width: none; }
.fusion-titre::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201,173,89,.55), rgba(223,227,236,0)); }
/* Cartes */
.hero-fusion .need-grid { gap: 18px; }
.hero-fusion .need-card { position: relative; border-color: #E4E7EF; box-shadow: 0 1px 2px rgba(18,24,51,.04); transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, border-color .5s ease; }
.hero-fusion .need-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.hero-fusion .need-media { aspect-ratio: 16 / 10; }
.hero-fusion .need-media img { transition: transform 1.4s cubic-bezier(.22,.61,.36,1); }
.hero-fusion .need-body { padding: 16px 18px 18px; gap: 6px; }
.hero-fusion .need-body h3 { font-size: 1.22rem; }
.hero-fusion .need-body p { font-size: .9rem; }
.hero-fusion .need-cta .btn { min-height: 42px; padding: 9px 16px; font-size: .92rem; gap: 8px; }
.fleche { display: inline-block; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) {
  .hero-fusion .need-card:hover { transform: translateY(-4px); border-color: #D8CBA3; box-shadow: 0 26px 44px -30px rgba(18,24,51,.55); }
  .hero-fusion .need-card:hover::after { transform: scaleX(1); }
  .hero-fusion .need-card:hover .need-media img { transform: scale(1.06); }
  .hero-fusion .need-card:hover .fleche { transform: translateX(4px); }
}
/* Apparition au chargement */
@keyframes fusionIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes filetIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-fusion .eyebrow, .hero-fusion h1, .hero-fusion .lead, .hero-fusion .hero2-actions, .hero-fusion .hero2-reassure, .fusion-titre { animation: fusionIn .8s cubic-bezier(.22,.61,.36,1) backwards; }
.hero-fusion h1 { animation-delay: .08s; } .hero-fusion .lead { animation-delay: .16s; } .hero-fusion .hero2-actions { animation-delay: .22s; } .hero-fusion .hero2-reassure { animation-delay: .28s; } .fusion-titre { animation-delay: .3s; }
.fusion-titre::after { transform-origin: left; animation: filetIn 1.2s cubic-bezier(.22,.61,.36,1) .5s backwards; }
.hero-fusion .need-card { animation: fusionIn .8s cubic-bezier(.22,.61,.36,1) backwards; animation-delay: calc(.38s + var(--c, 0) * .1s); }
.hero-fusion .need-card:nth-child(2) { --c: 1; } .hero-fusion .need-card:nth-child(3) { --c: 2; } .hero-fusion .need-card:nth-child(4) { --c: 3; }
@media (max-width: 980px) {
  .hero-fusion .hero2-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eb" "h1" "lead" "act" "re"; align-items: start; }
  .hero-fusion .hero2-actions { justify-content: flex-start; }
  .hero-fusion .hero2-reassure { text-align: left; }
}
/* Mobile : les prestations tout de suite sous le titre, en lignes compactes (toute la ligne est cliquable).
   Les boutons Devis / WhatsApp du haut sont masqués : ils sont déjà dans la barre fixe du bas. */
@media (max-width: 600px) {
  .hero-fusion .wrap { padding-block: 18px 26px; }
  .hero-fusion .hero2-copy { row-gap: 6px; }
  .hero-fusion .eyebrow { font-size: .7rem; letter-spacing: .1em; }
  .hero-fusion h1 { font-size: 1.6rem; }
  .hero-fusion .lead, .hero-fusion .hero2-actions, .hero-fusion .hero2-reassure { display: none; }
  .fusion-prest { margin-top: 18px; }
  .fusion-titre { font-size: 1.02rem; margin-bottom: 10px; }
  .hero-fusion .need-grid { gap: 8px; }
  .hero-fusion .need-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); border-radius: 12px; }
  .hero-fusion .need-media { aspect-ratio: auto; height: 100%; }
  .hero-fusion .need-body { position: static; padding: 11px 36px 11px 13px; gap: 1px; }
  .hero-fusion .need-n { display: none; }
  .hero-fusion .need-body h3 { font-size: 1.04rem; }
  .hero-fusion .need-body p { font-size: .8rem; line-height: 1.4; }
  .hero-fusion .need-cta { padding-top: 4px; }
  .hero-fusion .need-cta .btn { position: static; min-height: 0; padding: 0; background: none; box-shadow: none; color: var(--brand); font-size: .82rem; font-weight: 700; }
  .hero-fusion .need-cta .btn::before { content: ""; position: absolute; inset: 0; z-index: 1; }   /* toute la ligne mène au devis du service */
  .hero-fusion .need-card::before { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-52%); font-size: 1.5rem; line-height: 1; color: var(--gold); }
  .hero-fusion .need-card::after { top: auto; bottom: 0; }
  .hero-fusion .need-card:active { transform: scale(.985); }
}
@media (max-width: 600px) {
  .hero-fusion .wrap { padding-top: 14px; }
  .hero-fusion h1 { font-size: 1.52rem; }
  .fusion-prest { margin-top: 14px; }
  .hero-fusion .need-card { grid-template-columns: 78px minmax(0, 1fr); }
  .hero-fusion .need-body { padding-block: 9px; }
  .hero-fusion .need-cta { padding-top: 2px; }
}
/* Le tassement des boutons à l'appui (.btn:active) ferait du bouton le cadre de la zone cliquable : la ligne entière ne réagirait plus. */
@media (max-width: 600px) { .hero-fusion .need-cta .btn:active { transform: none; } }
/* Mobile, version finale : 4 tuiles en 2 × 2 (petite image, titre, lien) pour que les 4 prestations tiennent dans l'écran
   d'un iPhone avec les barres de Safari (≈ 660 px visibles). La phrase de description est masquée sur mobile seulement. */
@media (max-width: 600px) {
  .hero-fusion .need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hero-fusion .need-card { display: flex; flex-direction: column; }
  .hero-fusion .need-media { aspect-ratio: 16 / 7; height: auto; }
  .hero-fusion .need-body { padding: 9px 11px 11px; gap: 3px; }
  .hero-fusion .need-body p { display: none; }
  .hero-fusion .need-body h3 { font-size: .98rem; line-height: 1.2; }
  .hero-fusion .need-cta { margin-top: auto; padding-top: 4px; }
  .hero-fusion .need-cta .btn { font-size: .78rem; }
  .hero-fusion .need-card::before { content: none; }
}
@media (max-width: 400px) { .hero-fusion .need-cta .fleche { display: none; } }
@media (max-width: 360px) { .hero-fusion .need-cta .btn { font-size: .74rem; } }
@media (max-width: 600px) {
  .hero-fusion .hero2-copy { grid-template-areas: "eb" "h1"; }
  .hero-fusion .eyebrow { font-size: .64rem; letter-spacing: .07em; white-space: nowrap; }
  .hero-fusion .eyebrow::before { width: 16px; margin-right: 8px; }
  .hero-fusion .need-media { aspect-ratio: 16 / 6; }
  .fusion-titre { margin-bottom: 8px; }
}
@media (max-width: 600px) { .hero-fusion .eyebrow { font-size: .69rem; letter-spacing: .04em; white-space: normal; } }

/* =====================================================================
   MENU MOBILE (≤ 980 px, comme avant) — plein écran bleu nuit, accordéons Prestations / À propos (02.10.2026)
   Le bureau n'est pas concerné (.mobile-menu reste « display: none » au-dessus de 980 px).
   ===================================================================== */
@media (max-width: 980px) {
  .mobile-menu.open { --mm-fond: var(--surface); --mm-texte: var(--ink); --mm-doux: var(--ink-soft); --mm-or: #8A6D1F; --mm-ligne: var(--line);
    position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: var(--mm-fond); color: var(--mm-texte);
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 0 var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); animation: mmIn .28s cubic-bezier(.22,.61,.36,1); }
  /* l'en-tête a un flou d'arrière-plan qui piégerait le menu « fixed » : on le retire pendant que le menu est ouvert */
  html.menu-ouvert .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 200; }
  html.menu-ouvert, html.menu-ouvert body { overflow: hidden; }
  html.menu-ouvert .mobile-bar { display: none; }
  .mm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; padding-top: env(safe-area-inset-top, 0px); padding-bottom: 14px; border-bottom: 1px solid var(--mm-ligne); }
  .mm-head .brand { color: var(--mm-texte); }
  .mm-head .wordmark { color: var(--mm-texte); }
  .mm-close { width: 44px; height: 44px; margin-right: -8px; display: grid; place-items: center; background: none; border: 0; color: var(--mm-texte); cursor: pointer; border-radius: 50%; transition: color .2s ease, transform .3s ease; }
  .mm-close svg { width: 24px; height: 24px; }
  .mm-close:hover, .mm-close:focus-visible { color: var(--mm-or); transform: rotate(90deg); }
  .mm-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; }
  .mm-item { border-bottom: 1px solid var(--mm-ligne); }
  .mm-row { display: flex; align-items: center; gap: 14px; min-height: 64px; }
  .mm-n { flex: 0 0 auto; width: 22px; font-family: 'Marcellus', Georgia, serif; font-size: .78rem; letter-spacing: .08em; color: var(--mm-or); }
  .mobile-menu .mm-link { flex: 1; min-width: 0; padding: 14px 0; font-family: 'Marcellus', Georgia, serif; font-size: 1.45rem; font-weight: 400; line-height: 1.2; color: var(--mm-texte); text-decoration: none; border: 0; transition: color .2s ease; }
  .mobile-menu .mm-link:hover, .mobile-menu .mm-link[aria-current="page"] { color: var(--brand); }
  /* « + » discret qui devient « − » */
  .mm-toggle { flex: 0 0 44px; width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--mm-or); }
  .mm-plus { position: relative; width: 14px; height: 14px; }
  .mm-plus::before, .mm-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: currentColor; transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s ease; }
  .mm-plus::after { transform: rotate(90deg); }
  .mm-toggle[aria-expanded="true"] .mm-plus::after { transform: rotate(180deg); opacity: 0; }
  .mm-toggle[aria-expanded="true"] .mm-plus { transform: rotate(180deg); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
  .mm-toggle:focus-visible { outline: 1px solid var(--mm-or); outline-offset: -6px; border-radius: 50%; }
  /* Sous-menus : ouverture fluide (hauteur animée par grid) */
  .mm-sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear .32s; }
  .mm-sub.ouvert { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .32s cubic-bezier(.22,.61,.36,1), visibility 0s; }
  .mm-sub > ul { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 36px; }
  .mm-sub li:first-child { padding-top: 2px; } .mm-sub li:last-child { padding-bottom: 14px; }
  .mobile-menu .mm-sub a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; font-size: 1rem; font-weight: 400; color: var(--mm-doux); text-decoration: none; border: 0; transition: color .2s ease, transform .25s ease; }
  .mobile-menu .mm-sub a::before { content: ""; width: 14px; height: 1px; background: rgba(201,173,89,.55); transition: width .25s ease; }
  .mobile-menu .mm-sub a:hover, .mobile-menu .mm-sub a[aria-current="page"] { color: var(--mm-texte); }
  .mobile-menu .mm-sub a:hover::before { width: 20px; }
  /* Demander un devis : bouton or, sobre */
  .mm-cta-item { border-bottom: 0; }
  .mm-cta-item .mm-row { padding-top: 22px; }
  .mobile-menu .mm-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 26px; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .01em; text-decoration: none; border: 0; transition: background .2s ease, transform .2s ease; }
  .mobile-menu .mm-cta:hover { background: var(--brand-deep); }
  .mobile-menu .mm-cta:active { transform: scale(.98); }
}
@keyframes mmIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 980px) {
  /* Menu mobile aux couleurs de base du site (fond blanc, texte bleu marine, accents or) et sans numéros (demande du 02.10.2026) */
  .mobile-menu .mm-sub a::before { background: var(--gold); }
  .mobile-menu .mm-sub a:hover, .mobile-menu .mm-sub a[aria-current="page"] { color: var(--brand); }
  .mm-toggle { color: var(--gold); }
  .mm-sub > ul { padding-left: 2px; }
  .mobile-menu .mm-link { font-size: 1.4rem; }
}
/* Barre fixe mobile des pages intérieures : un seul bouton « Demander un devis » (le bouton « Appeler ERGIA » a été retiré le 02.10.2026) */
.mobile-bar .btn-quote-seul { flex: 1 1 100%; }

/* =====================================================================
   ACCUEIL — retouches du 02.10.2026 (demande de l'utilisateur)
   ===================================================================== */
/* 4 prestations : une icône par service à la place des numéros (casque, clé, immeuble, fenêtre) */
.need-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(194,154,78,.45); color: #8A6D1F; background: #FBF8F1; }
.need-ico svg { width: 22px; height: 22px; }
.hero-fusion .need-card:hover .need-ico { border-color: var(--gold); }
@media (max-width: 600px) {
  .hero-fusion .need-n.need-ico { display: grid; position: absolute; z-index: 2; left: 8px; top: 8px; width: 30px; height: 30px; background: rgba(255,255,255,.94); border-color: rgba(194,154,78,.6); pointer-events: none; }
  .hero-fusion .need-n.need-ico svg { width: 17px; height: 17px; }
}

/* Page plus compacte */
#accueil > .sec { padding-block: clamp(44px, 6vw, 80px); }
#accueil .stack-lg { gap: clamp(22px, 3vw, 34px); }
#accueil h2:not(.fusion-titre) { font-size: clamp(1.55rem, 2.6vw, 2.1rem); }

/* Mot du fondateur : plus petit, texte dans un encadré */
#apropos .about2 { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(22px, 4vw, 52px); align-items: center; }
#apropos .founder-photo { max-width: 300px; border-radius: 12px; }
#apropos .about2 > .stack { gap: 10px; padding: clamp(22px, 3vw, 34px); background: var(--surface); border: 1px solid rgba(194,154,78,.4); border-radius: 12px; box-shadow: 0 18px 40px -34px rgba(18,24,51,.45); position: relative; }
#apropos .about2 > .stack::before { content: "“"; position: absolute; right: 22px; top: 6px; font-family: 'Marcellus', Georgia, serif; font-size: 4.2rem; line-height: 1; color: rgba(194,154,78,.35); pointer-events: none; }
#apropos .about2 h2 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); }
#apropos .about2 .pull { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.45; }
#apropos .body-lg { font-size: .95rem; line-height: 1.65; }
#apropos .founder-sign { font-size: 1.05rem; }
@media (max-width: 800px) {
  #apropos .about2 { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  #apropos .founder-photo { max-width: 180px; }
}

/* FAQ de l'accueil plus compacte */
#faq .faq { max-width: 780px; }
#faq .faq details { padding: 13px 0; }
#faq .faq summary { font-size: .96rem; gap: 16px; }
#faq .faq summary::after { font-size: 1.35rem; }
#faq .faq details p { font-size: .93rem; margin-top: 8px; }
#faq .faq-more { margin-top: 12px; font-size: .95rem; }

/* Deuxième barre de recherche, juste avant les questions */
.finder.finder-faq { --bar-h: 58px; background: none; padding: 0; max-width: 780px; z-index: 7; }
.finder.finder-faq::before { display: none; }
.finder-faq .finder-bar { padding-left: 24px; box-shadow: 0 10px 24px -20px rgba(18,24,51,.4); }
.finder-faq .finder-bar input, .finder-faq .finder-bar input:focus { font-size: 1rem; }
.finder-faq .finder-submit { flex-basis: 44px; width: 44px; height: 44px; }
@media (max-width: 700px) { .finder.finder-faq { --bar-h: 50px; } .finder-faq .finder-bar { padding-left: 18px; } .finder-faq .finder-bar input, .finder-faq .finder-bar input:focus { font-size: 16px; } }

/* Effets plus lents (≈ 1,5 ×) */
.hero-fusion .eyebrow, .hero-fusion h1, .hero-fusion .lead, .hero-fusion .hero2-actions, .hero-fusion .hero2-reassure, .fusion-titre { animation-duration: 1.2s; }
.hero-fusion h1 { animation-delay: .15s; } .hero-fusion .lead { animation-delay: .3s; } .hero-fusion .hero2-actions { animation-delay: .4s; } .hero-fusion .hero2-reassure { animation-delay: .5s; } .fusion-titre { animation-delay: .55s; }
.fusion-titre::after { animation-duration: 1.8s; animation-delay: .8s; }
.hero-fusion .need-card { animation-duration: 1.2s; animation-delay: calc(.7s + var(--c, 0) * .18s); }
.revele .why-dark-head { animation-duration: 1.3s; }
.revele .why-dark-list li { animation-duration: 1.3s; animation-delay: calc(.35s + var(--i, 0) * .25s); }
.revele .why-dark-list li .wd-n::after { animation-duration: 1.2s; animation-delay: calc(1s + var(--i, 0) * .25s); }
.why-dark::before { transition-duration: 2s; }
.revele .timeline::after { animation-duration: 2.6s; }
.revele .timeline li, .revele .timeline .n { animation-duration: 1.1s; animation-delay: calc(.3s + var(--e, 0) * .5s); }
/* En-tête de l'accueil : boutons à droite du titre retirés (02.10.2026) → une seule colonne */
.hero-fusion .hero2-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eb" "h1" "lead" "zone"; }
/* Pied de page mobile : plus de contraste (02.10.2026) — photo assombrie plus tôt derrière le logo, textes et liens plus clairs */
@media (max-width: 760px) {
  .site-footer::before { background: linear-gradient(to bottom, rgba(16,24,64,.12) 0%, rgba(16,24,64,.45) 38%, rgba(20,29,74,.9) 62%, var(--brand-deep) 82%); }
  .foot-brand .logo-mark { filter: brightness(1.15) contrast(1.1) drop-shadow(0 1px 6px rgba(8,12,36,.55)); }
  .foot-brand .wordmark { color: #fff; text-shadow: 0 2px 12px rgba(8,12,36,.7); }
  .site-footer .foot-slogan { text-shadow: 0 1px 8px rgba(8,12,36,.6); }
  .foot-col a { color: #FFFFFF; font-weight: 500; }
  .foot-ligne b { color: #fff; font-weight: 600; }
  .foot-bottom, .foot-bottom a { color: #E4E8F4; }
  .foot-contact { border-top-color: rgba(255,255,255,.28); }
}

/* =====================================================================
   Retouches du 02.10.2026 (nuit) — demande de l'utilisateur
   ===================================================================== */
/* Haut de l'accueil : photo du lac Léman et des Alpes en fond, fondue vers le blanc à gauche (texte) et vers le bas (cartes) */
.hero-fusion { isolation: isolate; }
.hero-fond { position: absolute; z-index: -2; left: 0; top: 0; width: 100%; height: clamp(300px, 30vw, 430px); object-fit: cover; object-position: 50% 35%; }
.hero-fusion::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: clamp(300px, 30vw, 430px);
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 34%, rgba(255,255,255,.35) 66%, rgba(255,255,255,.05) 100%),
              linear-gradient(180deg, rgba(255,255,255,0) 55%, #F9FAFC 100%); }
.hero-zone { grid-area: zone; display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; font-size: .86rem; font-weight: 600; color: var(--brand); letter-spacing: .01em; }
.hero-zone svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 600px) {
  .hero-fusion .hero2-copy { grid-template-areas: "eb" "h1" "zone"; }
  .hero-fond { height: 230px; object-position: 62% 40%; }
  .hero-fusion::before { height: 230px; background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.72) 45%, rgba(255,255,255,.88) 78%, #F9FAFC 100%); }
  .hero-zone { font-size: .74rem; gap: 7px; margin-top: 2px; }
  .hero-zone svg { width: 15px; height: 15px; }
}

/* Pied de page mobile : uniquement les couleurs de la photo (lac, Alpes, ciel) — la photo couvre tout le pied de page,
   assombrie dans ses propres bleus, plus de grand aplat bleu marine */
@media (max-width: 760px) {
  .site-footer { --foot-h: 100%; background: #1C3350; }
  .foot-photo { height: 100%; object-position: 58% 50%; }
  .site-footer::before { height: 100%; background: linear-gradient(to bottom, rgba(20,40,66,.25) 0%, rgba(20,40,66,.55) 22%, rgba(18,36,60,.78) 42%, rgba(16,32,54,.86) 100%); }
  .foot-contact { border-top-color: rgba(255,255,255,.3); }
  .foot-bottom { border-top-color: rgba(255,255,255,.22); }
}

/* Barre de recherche avant les questions : plus petite */
.finder.finder-faq { --bar-h: 46px; max-width: 520px; }
.finder-faq .finder-bar { padding-left: 18px; padding-right: 4px; box-shadow: 0 6px 16px -14px rgba(18,24,51,.45); }
.finder-faq .finder-bar input, .finder-faq .finder-bar input:focus { font-size: .95rem; }
.finder-faq .finder-submit { flex-basis: 38px; width: 38px; height: 38px; }
.finder-faq .finder-submit svg { width: 18px; height: 18px; }
@media (max-width: 700px) { .finder.finder-faq { --bar-h: 44px; } .finder-faq .finder-bar input, .finder-faq .finder-bar input:focus { font-size: 16px; } }

/* Effets encore ralentis : « Pourquoi ERGIA ? » et chronologie (≈ 2 × plus lents qu'à l'origine x 1,5) */
.revele .why-dark-head { animation-duration: 1.8s; }
.revele .why-dark-list li { animation-duration: 1.8s; animation-delay: calc(.5s + var(--i, 0) * .4s); }
.revele .why-dark-list li .wd-n::after { animation-duration: 1.6s; animation-delay: calc(1.4s + var(--i, 0) * .4s); }
.why-dark::before { transition-duration: 2.8s; }
.revele .timeline::after { animation-duration: 4s; animation-timing-function: cubic-bezier(.4,0,.3,1); }
.revele .timeline li, .revele .timeline .n { animation-duration: 1.5s; animation-delay: calc(.4s + var(--e, 0) * .8s); }
.zone-court { display: none; }
@media (max-width: 600px) { .zone-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .zone-court { display: inline; } }
@media (max-width: 600px) { .hero-zone { font-size: .8rem; } }
@media (max-width: 760px) {
  .site-footer::before { background: linear-gradient(to bottom, rgba(20,40,66,.32) 0%, rgba(18,36,60,.66) 18%, rgba(16,32,56,.82) 34%, rgba(16,32,54,.88) 100%); }
  .site-footer .foot-slogan { color: #E2C48A; }
}

/* =====================================================================
   Retouches du 03.10.2026 — demande de l'utilisateur
   ===================================================================== */
/* --- Prestations sur mobile : une carte « Toutes nos prestations » puis le déroulé de chaque prestation --- */
.prest-m { display: none; }
@media (max-width: 600px) {
  .hero-fusion .need-grid { display: none; }
  .prest-m { display: flex; flex-direction: column; gap: 10px; }
  .prest-formule { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border-radius: 14px; color: #fff;
    background: linear-gradient(150deg, #24316A 0%, #1B2556 100%); box-shadow: 0 18px 36px -26px rgba(18,24,51,.7); overflow: hidden; }
  .prest-formule::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; border: 1px solid rgba(226,196,138,.25); }
  .pf-sur { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #E2C48A; }
  .pf-titre { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.35rem; line-height: 1.2; }
  .prest-formule p { font-size: .86rem; line-height: 1.5; color: #D9DEF0; }
  .pf-icos { display: flex; gap: 8px; margin-top: 2px; }
  .pf-icos span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(226,196,138,.45); color: #E2C48A; }
  .pf-icos svg { width: 18px; height: 18px; }
  .pf-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
  .pf-cta .btn { background: #fff; color: #1B2556; min-height: 44px; padding: 10px 18px; font-size: .92rem; box-shadow: none; }
  .pf-cta .link-arrow { color: #fff; font-size: .88rem; }
  .prest-acc { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
  .pa-item + .pa-item { border-top: 1px solid var(--line); }
  .pa-item summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px; cursor: pointer; }
  .pa-item summary::-webkit-details-marker { display: none; }
  .pa-ico { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(194,154,78,.5); background: #FBF8F1; color: #8A6D1F; }
  .pa-ico svg { width: 19px; height: 19px; }
  .pa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .pa-txt strong { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.05rem; color: var(--ink); }
  .pa-txt small { font-size: .8rem; line-height: 1.4; color: var(--ink-soft); }
  .pa-chev { flex: 0 0 20px; width: 20px; height: 20px; color: var(--gold); transition: transform .35s cubic-bezier(.22,.61,.36,1); }
  .pa-item[open] .pa-chev { transform: rotate(180deg); }
  .pa-item[open] summary { background: #FBFAF6; }
  .pa-body { padding: 4px 16px 16px 62px; animation: paOuvre .45s cubic-bezier(.22,.61,.36,1); }
  .pa-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .pa-body li { position: relative; padding-left: 16px; font-size: .84rem; line-height: 1.45; color: var(--ink-soft); }
  .pa-body li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: var(--gold); }
  .pa-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
  .pa-cta .btn { min-height: 42px; padding: 9px 16px; font-size: .88rem; }
  .pa-cta .link-arrow { font-size: .86rem; }
}
@keyframes paOuvre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- Slogan sous le logo : or plus soutenu, mieux visible sur le blanc (≈ 4,9:1 au lieu de 2,2:1) --- */
.brand-slogan { color: #8A6D1F; }

/* --- Pied de page mobile : plus clair, photo des montagnes plus haute et bien visible --- */
@media (max-width: 760px) {
  .site-footer { background: #3B5E86; padding-top: 230px; }
  .foot-photo { height: 340px; object-position: 55% 45%; }
  .site-footer::before { height: 100%; background: linear-gradient(to bottom, rgba(59,94,134,0) 0px, rgba(59,94,134,.12) 120px, rgba(52,85,124,.72) 250px, #34557C 340px, #2F4E73 100%); }
  .foot-brand .wordmark { text-shadow: 0 2px 14px rgba(20,36,60,.75); }
  .site-footer .foot-slogan { color: #F0D9A6; text-shadow: 0 1px 10px rgba(20,36,60,.8); }
  .foot-col a, .foot-ligne b { color: #fff; }
  .foot-bottom, .foot-bottom a { color: #EEF2FA; }
}
/* --- Effets du haut de l'accueil en attente tant que la page n'est pas affichée (classe posée par ergia.js) --- */
html.anim-attente .hero-fusion *, html.anim-attente .hero-fusion *::after { animation-play-state: paused !important; }
@media (max-width: 600px) {
  .prest-formule { padding: 14px 16px 14px; gap: 4px; }
  .pf-titre { font-size: 1.18rem; }
  .prest-formule p { font-size: .8rem; line-height: 1.45; }
  .pf-icos { gap: 6px; }
  .pf-icos span { width: 28px; height: 28px; }
  .pf-icos svg { width: 15px; height: 15px; }
  .pf-cta { margin-top: 6px; }
  .pf-cta .btn { min-height: 40px; padding: 8px 14px; font-size: .86rem; }
  .pf-cta .link-arrow { white-space: nowrap; font-size: .84rem; }
  .pa-item summary { min-height: 58px; padding: 10px 14px; }
}
/* Apparition de la carte « Toutes nos prestations » et des lignes (mobile), au même rythme que l'en-tête */
@media (max-width: 600px) {
  .prest-formule, .pa-item { animation: fusionIn 1.2s cubic-bezier(.22,.61,.36,1) backwards; }
  .prest-formule { animation-delay: .6s; }
  .pa-item:nth-child(1) { animation-delay: .8s; } .pa-item:nth-child(2) { animation-delay: .95s; } .pa-item:nth-child(3) { animation-delay: 1.1s; } .pa-item:nth-child(4) { animation-delay: 1.25s; }
}
/* --- Mobile épuré (03.10.2026) : seulement le titre, puis « Nos prestations · Suisse romande » et les 4 prestations --- */
@media (max-width: 600px) {
  .hero-fusion .hero-zone, .hero-fusion .fusion-titre { display: none; }
  .fusion-prest { margin-top: 22px; }
  .prest-acc { border: 1px solid rgba(194,154,78,.35); border-radius: 16px; box-shadow: 0 20px 40px -32px rgba(18,24,51,.5); }
  .pa-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 16px 18px 12px; border-bottom: 1px solid rgba(194,154,78,.25); }
  .pa-tete span:first-child { font-family: 'Marcellus', Georgia, serif; font-size: 1.15rem; color: var(--ink); }
  .pa-zone { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A6D1F; }
  .pa-item summary { min-height: 60px; padding: 12px 18px; gap: 14px; }
  .pa-ico { flex: 0 0 24px; height: 24px; border: 0; background: none; border-radius: 0; color: #8A6D1F; }
  .pa-ico svg { width: 22px; height: 22px; }
  .pa-txt strong { font-size: 1.12rem; letter-spacing: .005em; }
  .pa-chev { width: 18px; height: 18px; }
  .pa-item[open] summary { background: none; }
  .pa-body { padding: 0 18px 18px 56px; }
  .pa-item + .pa-item { border-top: 1px solid #EEF0F5; }
}
@media (max-width: 600px) { .eb-zone { display: none; } }

/* =====================================================================
   Mobile — haut de l'accueil sur photo (03.10.2026) : lac de montagne en pleine largeur, assombri, titre en blanc,
   la carte « Nos prestations » vient se poser sur le bas de la photo.
   ===================================================================== */
@media (max-width: 600px) {
  .hero-fond { height: 360px; object-position: 70% 55%; }
  .hero-fusion::before { height: 360px; background: linear-gradient(180deg, rgba(8,16,34,.55) 0%, rgba(8,16,34,.38) 42%, rgba(8,16,34,.5) 70%, rgba(246,247,250,0) 86%, #F6F7FA 100%); }
  .hero-fusion { background: #F6F7FA; }
  .hero-fusion .wrap { padding-top: 34px; }
  .hero-fusion .eyebrow { color: #E9D3A0; }
  .hero-fusion .eyebrow::before { background: #E9D3A0; }
  .hero-fusion h1 { color: #fff; font-size: 1.85rem; line-height: 1.15; text-shadow: 0 2px 18px rgba(4,10,24,.55); }
  .hero-fusion .h1-accent { color: #F0D9A6; }
  .fusion-prest { margin-top: 96px; }
  .prest-acc { border-color: rgba(194,154,78,.4); box-shadow: 0 24px 48px -28px rgba(8,16,34,.55); }
}
@media (max-width: 600px) {
  .hero-fond { height: 320px; }
  .hero-fusion::before { height: 320px; }
  .hero-fusion .wrap { padding-top: 26px; }
  .fusion-prest { margin-top: 58px; }
  .pa-tete { padding: 13px 18px 10px; }
  .pa-item summary { min-height: 54px; padding-block: 10px; }
}
/* Fond de secours bleu nuit sous la photo (si l'image ne charge pas, le titre blanc reste lisible) */
@media (max-width: 600px) { .hero-fusion { background: linear-gradient(180deg, #1A2642 0, #1A2642 230px, #F6F7FA 320px); } }

/* =====================================================================
   Haut de l'accueil sur la photo de montagne — ORDINATEUR et tablette (03.10.2026)
   Photo pleine largeur assombrie à gauche (texte blanc), montagnes et lac bien visibles à droite ; les 4 cartes se posent sur le bas.
   ===================================================================== */
@media (min-width: 601px) {
  .hero-fusion { background: linear-gradient(180deg, #1A2642 0, #1A2642 300px, #F6F7FA 520px); }
  .hero-fond { height: clamp(440px, 40vw, 560px); object-position: 50% 45%; }
  .hero-fusion::before { height: clamp(440px, 40vw, 560px);
    background: linear-gradient(90deg, rgba(8,16,34,.78) 0%, rgba(8,16,34,.5) 38%, rgba(8,16,34,.12) 70%, rgba(8,16,34,0) 100%),
                linear-gradient(180deg, rgba(8,16,34,.15) 0%, rgba(8,16,34,0) 40%, rgba(246,247,250,0) 72%, #F6F7FA 100%); }
  .hero-fusion .wrap { padding-top: clamp(48px, 6vw, 84px); }
  .hero-fusion .eyebrow { color: #E9D3A0; }
  .hero-fusion .eyebrow::before { background: #E9D3A0; }
  .hero-fusion h1 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.8rem); text-shadow: 0 2px 22px rgba(4,10,24,.5); }
  .hero-fusion .h1-accent { color: #F0D9A6; }
  .hero-fusion .lead { color: #E3E8F3; text-shadow: 0 1px 12px rgba(4,10,24,.6); }
  .hero-fusion .hero-zone { color: #fff; }
  .fusion-prest { margin-top: clamp(70px, 9vw, 130px); }
  .fusion-titre { color: #fff; text-shadow: 0 1px 12px rgba(4,10,24,.6); }
  .fusion-titre::after { background: linear-gradient(90deg, rgba(240,217,166,.7), rgba(240,217,166,0)); }
  .hero-fusion .need-card { box-shadow: 0 26px 50px -34px rgba(8,16,34,.6); }
}
/* Mobile : on remonte le cadrage pour mieux voir les montagnes (pentes dorées à gauche, sommet en haut) */
@media (max-width: 600px) {
  .hero-fond { object-position: 34% 30%; }
  .hero-fusion::before { background: linear-gradient(180deg, rgba(8,16,34,.6) 0%, rgba(8,16,34,.3) 40%, rgba(8,16,34,.18) 66%, rgba(246,247,250,0) 86%, #F6F7FA 100%); }
}
@media (min-width: 601px) { .fusion-prest { margin-top: clamp(40px, 5vw, 76px); } }
@media (min-width: 601px) {
  .hero-fusion { --fond-h: clamp(440px, 40vw, 560px); background: linear-gradient(180deg, #1A2642 0, #1A2642 calc(var(--fond-h) * .55), #F6F7FA var(--fond-h)); }
}
@media (min-width: 601px) {
  /* le fondu vers le clair doit être AU-DESSUS du voile sombre (sinon une bordure nette apparaît en bas de la photo) */
  .hero-fusion::before { background:
    linear-gradient(180deg, rgba(246,247,250,0) 62%, rgba(246,247,250,.85) 90%, #F6F7FA 100%),
    linear-gradient(90deg, rgba(8,16,34,.78) 0%, rgba(8,16,34,.5) 38%, rgba(8,16,34,.12) 70%, rgba(8,16,34,0) 100%),
    linear-gradient(180deg, rgba(8,16,34,.15) 0%, rgba(8,16,34,0) 40%); }
}

/* =====================================================================
   ACCUEIL ORDINATEUR / TABLETTE ÉPURÉ (03.10.2026) — comme sur mobile :
   le titre sur la photo, puis une seule carte « Nos prestations · Suisse romande » avec les 4 prestations, visibles tout de suite.
   ===================================================================== */
.prest-d { display: none; }
@media (min-width: 601px) {
  .hero-fusion .lead, .hero-fusion .hero-zone, .hero-fusion .fusion-titre { display: none; }
  .prest-d { display: block; background: var(--surface); border: 1px solid rgba(194,154,78,.4); border-radius: 18px; box-shadow: 0 30px 60px -36px rgba(8,16,34,.6); overflow: hidden; }
  .pd-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; padding: 20px clamp(20px, 3vw, 34px) 16px; border-bottom: 1px solid rgba(194,154,78,.25); }
  .pd-tete span:first-child { font-family: 'Marcellus', Georgia, serif; font-size: 1.3rem; color: var(--ink); }
  .pd-zone { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8A6D1F; }
  .pd-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
  .pd-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.4vw, 30px); border-left: 1px solid var(--line); transition: background .35s ease; }
  .pd-item:first-child { border-left: 0; }
  .pd-ico { color: #8A6D1F; display: block; }
  .pd-ico svg { width: 30px; height: 30px; display: block; }
  .pd-nom { font-family: 'Marcellus', Georgia, serif; font-size: 1.22rem; line-height: 1.2; color: var(--ink); text-decoration: none; }
  .pd-nom::after { content: ""; position: absolute; inset: 0; } /* toute la case mène à la page de la prestation */
  .pd-devis { position: relative; z-index: 1; margin-top: auto; padding-top: 4px; font-size: .9rem; font-weight: 600; color: var(--brand); text-decoration: none; }
  .pd-devis span { display: inline-block; margin-left: .3em; transition: transform .3s ease; }
  .pd-devis:hover { text-decoration: underline; text-underline-offset: 3px; }
  .pd-item:hover .pd-devis span { transform: translateX(4px); }
  .pd-item:focus-within { background: #FBF8F1; }
  .pd-nom:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
}
@media (hover: hover) and (min-width: 601px) { .pd-item:hover { background: #FBF8F1; } }
@media (min-width: 601px) and (max-width: 900px) {
  .pd-liste { grid-template-columns: repeat(2, 1fr); }
  .pd-item:nth-child(3) { border-left: 0; }
  .pd-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (min-width: 601px) { .fusion-prest { margin-top: clamp(56px, 7vw, 110px); } }

/* =====================================================================
   PAGES PRESTATIONS / FIN DE CHANTIER / FIN DE BAIL / BUREAUX — design plus élégant (03.10.2026)
   <main class="svc"> : plus d'air, filets fins, or discret, listes sans « boîtes », étapes en frise.
   ===================================================================== */
.svc h2 { font-size: clamp(1.6rem, 2.5vw, 2.15rem); line-height: 1.2; max-width: 26ch; }
.svc .split { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding-block: clamp(56px, 8vw, 96px); }
@media (max-width: 900px) { .svc .split { grid-template-columns: minmax(0, 1fr); } }
.svc .split > .stack-xl { gap: 0; }
.svc .split > .stack-xl > .stack { padding-block: clamp(36px, 4.5vw, 52px); border-top: 1px solid var(--line); }
.svc .split > .stack-xl > .stack:first-child { padding-top: 0; border-top: 0; }
.svc .split > .stack-xl > .stack:last-child { padding-bottom: 0; }
.svc .stack > .eyebrow + h2 { margin-top: 2px; }
.svc .muted { line-height: 1.7; }

/* « Ce qui est inclus » : liste fine en deux colonnes, coche dorée */
.svc .inc-grid { gap: 0 clamp(20px, 3vw, 40px); margin-top: 8px; }
.svc .inc { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 2px; box-shadow: none !important; gap: 14px; }
.svc .inc .ico-check { flex: 0 0 26px; width: 26px; height: 26px; padding: 5px; border-radius: 50%; border: 1px solid rgba(194,154,78,.55); color: #8A6D1F; background: #FBF8F1; }
.svc .inc strong { font-weight: 600; color: var(--ink); }
.svc .inc span { line-height: 1.55; }

/* Option vitres : encart blanc à filet doré */
.svc .option-strip { background: #FBF8F1; border: 1px solid rgba(194,154,78,.45); border-radius: 12px; padding: 18px 22px; margin-top: 10px; }
.svc .option-strip .ico { color: #8A6D1F; }

/* « Comment ça se passe » : frise horizontale, pastilles cerclées d'or */
.svc .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; margin-top: 10px; counter-reset: none; }
.svc .steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 1px; background: linear-gradient(90deg, rgba(194,154,78,.7), rgba(194,154,78,.2)); }
.svc .step { flex-direction: column; gap: 14px; position: relative; }
.svc .step .step-n { width: 44px; height: 44px; background: var(--surface); border: 1px solid #C29A4E; color: var(--brand); font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.15rem; box-shadow: 0 0 0 6px var(--bg); }
.svc .step strong { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.15rem; margin-bottom: 4px; }
.svc .step span { font-size: .93rem; line-height: 1.55; }
@media (max-width: 760px) {
  .svc .steps { grid-template-columns: 1fr; gap: 22px; }
  .svc .steps::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(194,154,78,.7), rgba(194,154,78,.2)); }
  .svc .step { flex-direction: row; gap: 16px; }
}

/* « Les prestations en détail » (pages de service) : une seule carte, lignes fines */
.svc .presta-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 8px; }
.svc .presta-mini .presta-card { flex-direction: row; align-items: center; gap: 14px; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: 18px 22px; background: none; box-shadow: none; transform: none; }
.svc .presta-mini .presta-card:nth-child(odd) { border-right: 1px solid var(--line); }
.svc .presta-mini .presta-card .ico { color: #8A6D1F; width: 24px; height: 24px; margin: 0; flex: 0 0 24px; }
.svc .presta-mini .presta-card strong { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.08rem; flex: 1; }
.svc .presta-mini .presta-card span { display: none; }
.svc .presta-mini .presta-card em { margin: 0; padding: 0; font-size: 0; }
.svc .presta-mini .presta-card em::after { content: "→"; font-size: 1rem; color: var(--brand); display: inline-block; transition: transform .3s ease; }
.svc .presta-mini .presta-card:hover { background: #FBF8F1; }
.svc .presta-mini .presta-card:hover em::after { transform: translateX(4px); }
@media (max-width: 600px) {
  .svc .presta-mini { grid-template-columns: 1fr; }
  .svc .presta-mini .presta-card:nth-child(odd) { border-right: 0; }
}

/* Page « Toutes les prestations » : cartes plus raffinées */
.svc .sec .presta-grid:not(.presta-mini) { gap: 20px; margin-top: 10px; }
.svc .sec .presta-grid:not(.presta-mini) .presta-card { position: relative; padding: clamp(24px, 2.6vw, 32px); gap: 10px; border-color: var(--line); border-radius: 16px; overflow: hidden; }
.svc .sec .presta-grid:not(.presta-mini) .presta-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #C29A4E, rgba(194,154,78,0)); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
.svc .sec .presta-grid:not(.presta-mini) .presta-card:hover::before { transform: scaleX(1); }
.svc .sec .presta-grid:not(.presta-mini) .presta-card .ico { width: 46px; height: 46px; padding: 11px; border-radius: 50%; border: 1px solid rgba(194,154,78,.55); background: #FBF8F1; color: #8A6D1F; margin-bottom: 8px; }
.svc .sec .presta-grid:not(.presta-mini) .presta-card strong { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.3rem; }
.svc .sec .presta-grid:not(.presta-mini) .presta-card span { line-height: 1.6; }
.svc .sec .wrap.stack-xl { gap: clamp(56px, 7vw, 88px); }

/* Colonne latérale : carte devis à filet doré */
.svc .side-card { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 26px; box-shadow: 0 24px 48px -36px rgba(18,24,51,.45); }
.svc .side-card::before { content: ""; position: absolute; left: 26px; top: 0; width: 44px; height: 2px; background: #C29A4E; }
.svc .side-card + .side-card { box-shadow: none; }
.svc .side-card + .side-card::before { display: none; }
.svc .side-card .mini-link .ico { color: #8A6D1F; }

/* FAQ des pages de service : un peu plus d'air */
.svc .faq summary { padding-block: 18px; }

/* =====================================================================
   PAGES DE SERVICE ET DE PRESTATION : bandeau « Quel type de nettoyage recherchez-vous ? » (03.10.2026)
   Titre, grande photo arrondie, carte bleu nuit centrée avec des choix en pastilles (chacun ouvre le devis déjà orienté :
   contact/?besoin=…#devis-…), puis un paragraphe d'introduction. Inspiré de la mise en page demandée par l'utilisateur.
   ===================================================================== */
.band2 { background: var(--bg); padding-block: clamp(28px, 4vw, 48px) clamp(40px, 5vw, 64px); }
.band2 .wrap { display: flex; flex-direction: column; gap: 18px; }
.band2 .crumb { color: var(--ink-soft); }
.band2 .crumb a { color: var(--brand); }
.band2 h1 { color: var(--brand); font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.12; max-width: 28ch; }
.b2-visuel { position: relative; border-radius: 22px; overflow: hidden; background: #1A2642; min-height: clamp(380px, 36vw, 470px); display: grid; place-items: center; padding: clamp(28px, 5vw, 64px) clamp(18px, 5vw, 72px); margin-top: 6px; }
.b2-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.b2-visuel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,16,34,.12), rgba(8,16,34,.3)); }
.b2-choix { position: relative; z-index: 1; width: 100%; max-width: 980px; background: rgba(20,30,58,.94); border: 1px solid rgba(226,196,138,.45); border-radius: 20px; padding: clamp(26px, 3.6vw, 44px) clamp(20px, 3.6vw, 48px); text-align: center; box-shadow: 0 30px 60px -30px rgba(4,10,24,.7); }
.b2-question { margin: 0 0 clamp(18px, 2.4vw, 28px); font-family: 'Marcellus', Georgia, serif; font-size: clamp(1.45rem, 2.7vw, 2.15rem); line-height: 1.2; color: #fff; }
.b2-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.b2-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 12px 24px 12px 18px; border-radius: 999px; background: #fff; border: 1px solid #fff; color: var(--brand); font-weight: 600; font-size: 1.02rem; text-decoration: none; box-shadow: 0 6px 18px -10px rgba(4,10,24,.6); transition: transform .3s ease, border-color .3s ease, background-color .3s ease; }
.b2-pill .b2-ico { width: 22px; height: 22px; flex: 0 0 22px; color: #8A6D1F; }
.b2-pill:hover { transform: translateY(-2px); border-color: #C29A4E; background: #FBF8F1; }
.b2-pill:active { transform: scale(.97); }
.b2-pill:focus-visible { outline: 3px solid #E2C48A; outline-offset: 3px; }
.b2-intro { margin: clamp(10px, 1.6vw, 18px) 0 0; font-size: clamp(1.02rem, 1.3vw, 1.14rem); line-height: 1.75; color: var(--ink); max-width: 78ch; }
.b2-plus { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; font-size: .9rem; font-weight: 600; color: var(--brand); }
.b2-plus span { display: inline-flex; align-items: center; gap: 8px; }
.b2-plus span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #C29A4E; }
@media (prefers-reduced-motion: reduce) { .b2-pill { transition: none; } .b2-pill:hover { transform: none; } }
@media (max-width: 600px) {
  .band2 { padding-top: 20px; }
  .band2 .wrap { gap: 14px; }
  .band2 h1 { font-size: 1.7rem; }
  .b2-visuel { display: block; min-height: 0; padding: 150px 12px 12px; border-radius: 18px; }
  .b2-fond { height: 190px; bottom: auto; }
  .b2-visuel::before { background: linear-gradient(180deg, rgba(8,16,34,0) 0, rgba(8,16,34,.2) 110px, #1A2642 190px); }
  .b2-choix { padding: 22px 16px 18px; border-radius: 16px; background: #1A2642; box-shadow: none; }
  .b2-question { font-size: 1.3rem; }
  .b2-pills { flex-direction: column; gap: 10px; }
  .b2-pill { justify-content: flex-start; min-height: 52px; font-size: 1rem; }
  .b2-intro { font-size: 1rem; }
}
.b2-nw { white-space: nowrap; }
/* Les 4 choix sur une seule ligne (ordinateur), 2 × 2 sur tablette et téléphone : pastilles plus compactes (03.10.2026) */
.b2-choix { max-width: 1040px; }
.b2-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.b2-pill { justify-content: center; text-align: center; gap: 8px; min-height: 52px; padding: 10px 14px; font-size: .95rem; line-height: 1.25; }
.b2-pill .b2-ico { width: 18px; height: 18px; flex-basis: 18px; }
@media (max-width: 900px) { .b2-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .b2-pills { flex-direction: row; gap: 8px; }
  .b2-pill { justify-content: center; min-height: 48px; padding: 8px 10px; font-size: .88rem; gap: 6px; border-radius: 14px; }
  .b2-pill .b2-ico { width: 16px; height: 16px; flex-basis: 16px; }
}
@media (min-width: 981px) and (max-width: 1100px) { .main-nav { gap: 14px; } .main-nav > a { font-size: .9rem; } .header-cta { padding-inline: 16px; } }
@media (min-width: 901px) {
  .b2-visuel { padding-inline: clamp(24px, 3vw, 44px); }
  .b2-choix { padding-inline: clamp(20px, 2.4vw, 32px); }
  .b2-pill { padding-inline: 12px; }
}
@media (min-width: 1200px) { .b2-pill { white-space: nowrap; } }
@media (max-width: 600px) { .b2-pill .b2-ico { display: none; } .b2-pill { padding-inline: 8px; } }

/* =====================================================================
   SOUS-PAGES — 2e passe (03.10.2026, demande de l'utilisateur) : « Ce qui est inclus » plus lisible, « Comment ça se passe »
   en boucle de travail, villes animées, « Préparer votre demande », 6e case des prestations, devis plus épuré, FAQ, Contact.
   ===================================================================== */
/* Ce qui est inclus : un seul panneau blanc, titres nets, descriptions plus foncées */
.svc .inc-grid:not(.prep-liste) { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 6px clamp(18px, 2.6vw, 30px); gap: 0 clamp(20px, 3vw, 36px); box-shadow: 0 20px 44px -38px rgba(18,24,51,.5); }
.svc .inc-grid:not(.prep-liste) .inc { padding: 18px 0; }
.svc .inc-grid:not(.prep-liste) .inc:nth-last-child(-n+2):nth-child(odd), .svc .inc-grid:not(.prep-liste) .inc:last-child { border-bottom: 0; }
.svc .inc strong { font-size: 1.02rem; letter-spacing: .005em; margin-bottom: 3px; }
.svc .inc span { font-size: .95rem; color: #474E6B; line-height: 1.6; }
.svc .inc .ico-check { width: 28px; height: 28px; flex-basis: 28px; padding: 6px; }
@media (max-width: 600px) { .svc .inc-grid:not(.prep-liste) .inc:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px solid var(--line); } }

/* Comment ça se passe : boucle de travail (cartes autour d'un anneau fléché, logo au centre) */
.boucle { position: relative; margin-top: 12px; }
.boucle-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 128px; }
.boucle-etape { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; position: relative; z-index: 1; transition: border-color .35s ease, transform .35s ease; }
.boucle-etape:hover { border-color: rgba(194,154,78,.7); transform: translateY(-2px); }
.boucle-etape .be-ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(194,154,78,.6); background: #FBF8F1; color: #8A6D1F; margin-bottom: 6px; }
.boucle-etape .be-ico svg { width: 21px; height: 21px; }
.boucle-etape strong { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.18rem; color: var(--ink); }
.boucle-etape span:not(.be-ico) { font-size: .93rem; line-height: 1.55; color: #474E6B; }
.boucle-4 .boucle-etape:nth-child(3) { grid-column: 2; grid-row: 2; }
.boucle-4 .boucle-etape:nth-child(4) { grid-column: 1; grid-row: 2; }
.boucle-3 .boucle-etape:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 64px); }
.boucle-centre { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%, -50%); display: grid; place-items: center; pointer-events: none; }
.boucle-3 .boucle-centre { top: 47%; }
.boucle-anneau { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #C29A4E; stroke-width: 1.6; stroke-linecap: round; animation: anneauTourne 40s linear infinite; }
.boucle-anneau .ba-pointe { fill: #C29A4E; stroke: none; }
.boucle-centre img { width: 70px; height: auto; position: relative; }
.boucle-centre::before { content: ""; position: absolute; width: 92px; height: 92px; border-radius: 50%; background: var(--surface); box-shadow: 0 10px 30px -18px rgba(18,24,51,.5); }
@keyframes anneauTourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boucle-anneau { animation: none; } .boucle-etape:hover { transform: none; } }
@media (max-width: 640px) {
  /* Téléphone : étapes l'une sous l'autre, reliées par un fil doré qui revient à la première (la boucle) */
  .boucle { padding-left: 30px; }
  .boucle-liste { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .boucle-4 .boucle-etape:nth-child(3), .boucle-4 .boucle-etape:nth-child(4) { grid-column: auto; grid-row: auto; }
  .boucle-3 .boucle-etape:nth-child(3) { width: auto; justify-self: stretch; }
  .boucle-centre { display: none; }
  .boucle::before { content: ""; position: absolute; left: 8px; top: 34px; bottom: 34px; width: 16px; border: 1.5px solid #C29A4E; border-right: 0; border-radius: 14px 0 0 14px; }
  .boucle::after { content: ""; position: absolute; left: 20px; top: 29px; border: 5px solid transparent; border-left: 7px solid #C29A4E; }
  .boucle-etape { padding: 16px 18px; }
}

/* Zone d'intervention : villes sur panneau bleu nuit, points dorés qui pulsent, apparition une à une */
.villes { background: linear-gradient(135deg, #1A2642, #24316A); border-radius: 18px; padding: clamp(20px, 2.6vw, 28px); margin-top: 8px; display: flex; flex-direction: column; gap: 16px; }
.villes-base { display: flex; align-items: center; gap: 12px; margin: 0; color: #E3E8F3; font-size: .95rem; }
.villes-base strong { color: #fff; font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.15rem; }
.vb-point, .v-point { position: relative; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #E2C48A; }
.vb-point { width: 12px; height: 12px; }
.vb-point::after, .v-point::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid #E2C48A; opacity: 0; animation: villePing 3.2s ease-out infinite; animation-delay: calc(var(--d, 0) * .27s); }
@keyframes villePing { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.villes-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ville { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 13px; border-radius: 999px; border: 1px solid rgba(226,196,138,.35); background: rgba(255,255,255,.06); color: #fff; font-size: .93rem; font-weight: 500; transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.ville small { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: #E2C48A; }
.ville:hover { background: rgba(255,255,255,.12); border-color: rgba(226,196,138,.8); transform: translateY(-2px); }
.villes-note { margin: 0; font-size: .88rem; color: #C9D0E4; }
.villes.anim .ville, .villes.anim .villes-base, .villes.anim .villes-note { opacity: 0; transform: translateY(10px); }
.villes.anim.vu .villes-base { animation: villeIn .8s ease forwards; }
.villes.anim.vu .ville { animation: villeIn .7s ease forwards; animation-delay: calc(.25s + var(--d) * .09s); }
.villes.anim.vu .villes-note { animation: villeIn .8s ease forwards; animation-delay: 1.5s; }
@keyframes villeIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vb-point::after, .v-point::after { animation: none; } .ville:hover { transform: none; } }

/* Préparer votre demande : liste à cocher sur fond crème + lien vers le devis */
.prep { background: #FBF8F1; border: 1px solid rgba(194,154,78,.4); border-radius: 18px; padding: clamp(16px, 2.4vw, 24px) clamp(18px, 2.6vw, 28px); margin-top: 8px; }
.svc .prep-liste { margin: 0; gap: 0 28px; }
.svc .prep-liste .inc { border-bottom: 1px dashed rgba(194,154,78,.45); padding: 14px 0; }
.svc .prep-liste .inc:nth-last-child(-n+2) { border-bottom: 0; }
.svc .prep-liste .inc .ico-check { border-radius: 7px; background: #fff; }
.svc .prep-liste .inc strong { font-weight: 600; font-size: 1rem; margin: 0; }
.prep-cta { display: inline-flex; margin-top: 14px; font-weight: 700; color: var(--brand); text-decoration: none; border-bottom: 1px solid rgba(36,49,106,.35); padding-bottom: 2px; }
.prep-cta:hover { border-bottom-color: var(--brand); }
@media (max-width: 600px) { .svc .prep-liste .inc:nth-last-child(2) { border-bottom: 1px dashed rgba(194,154,78,.45); } }

/* Prestations en détail : 6e case « Toutes les prestations » (comble la case vide) */
.svc .presta-mini .presta-card.presta-tout { background: #1A2642; color: #fff; }
.svc .presta-mini .presta-card.presta-tout .ico { color: #E2C48A; }
.svc .presta-mini .presta-card.presta-tout strong { color: #fff; }
.svc .presta-mini .presta-card.presta-tout em::after { color: #E2C48A; }
.svc .presta-mini .presta-card.presta-tout:hover { background: #24316A; }

/* Carte devis (colonne) : épurée */
.svc .side-card h3 { font-size: 1.45rem; }
.sc-points { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-points li { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--ink); }
.sc-points li::before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; border: 1px solid #C29A4E; background: #FBF8F1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.5-5' fill='none' stroke='%238A6D1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Bandeau de devis en bas de page : panneau clair et sobre au lieu du bloc bleu */
.cta-box { background: var(--surface); border: 1px solid rgba(194,154,78,.45); position: relative; overflow: hidden; }
.cta-box::before { content: ""; position: absolute; left: clamp(28px, 5vw, 52px); top: 0; width: 56px; height: 2px; background: #C29A4E; }
.cta-box h2 { color: var(--brand); }
.cta-box p { color: #474E6B; }
.cta-box .btn-light { background: var(--brand); color: #fff; border-color: var(--brand); }
.cta-box .btn-light:hover { background: #1A2642; color: #fff; }

/* FAQ : barre de recherche dans le bandeau */
.faq-search { position: relative; width: 100%; max-width: 620px; margin-top: 6px; }
.faq-search[hidden] { display: none; }
.faq-search input { width: 100%; min-height: 58px; padding: 0 64px 0 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: #fff; color: var(--ink); font: inherit; font-size: 1rem; box-shadow: 0 18px 40px -24px rgba(4,10,24,.8); }
.faq-search input::placeholder { color: #6B7190; }
.faq-search input:focus { outline: 3px solid #E2C48A; outline-offset: 2px; }
.faq-search input::-webkit-search-cancel-button { cursor: pointer; }
.faq-search button { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; }
.faq-search button svg { width: 20px; height: 20px; }
.faq-resultat { margin: 0; color: #E3E8F3; font-size: .95rem; }
.faq-resultat a { color: #E2C48A; font-weight: 600; }
@media (max-width: 600px) { .faq-search input { min-height: 52px; font-size: 16px; padding-left: 18px; } .faq-search input::placeholder { font-size: .9rem; } }

/* CONTACT : en-tête clair, formulaire en premier, coordonnées et villes à côté */
.band2-court { padding-bottom: clamp(8px, 2vw, 16px); }
.band2-court .b2-intro { margin-top: 0; }
.contact-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); }
.form-card { border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -44px rgba(18,24,51,.5); position: relative; }
.form-card::before { content: ""; position: absolute; left: clamp(20px, 3vw, 32px); top: 0; width: 56px; height: 2px; background: #C29A4E; }
.contact-side .contact-card { border-radius: 20px; gap: 0; }
.contact-side .who { padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.contact-side .who-photo { width: 84px; height: 84px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(194,154,78,.7); }
.contact-side .who-photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-side .c-line { padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.contact-side .c-line:last-of-type { border-bottom: 0; }
.contact-side .c-line .ico { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: #FBF8F1; border: 1px solid rgba(194,154,78,.55); color: #8A6D1F; }
.contact-side #zone-intervention { border-radius: 20px; border: 0; background: linear-gradient(135deg, #1A2642, #24316A) !important; }
.contact-side #zone-intervention h2 { color: #fff; }
.contact-side .villes { margin-top: 4px; padding: 0; background: none; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.prep-cta span { margin-left: .35em; }
.band2-court + .sec { padding-top: clamp(24px, 3vw, 40px); }
.svc .presta-mini .presta-card.presta-tout em { color: #E2C48A; }
.villes, .contact-side #zone-intervention { background-color: #1A2642; }

/* =====================================================================
   CARTE DE LA SUISSE dans « Zone d'intervention » (03.10.2026) — cantons : Natural Earth (domaine public), simplifiés.
   Cantons romands couverts en or, base de Crissier, 12 villes desservies (exemples). Les noms restent aussi dans une liste
   lisible par les lecteurs d'écran (.villes-liste.sr-only). Petits écrans : la carte est agrandie et recadrée sur la Suisse romande.
   ===================================================================== */
.villes { container-type: inline-size; }
.carte-wrap { overflow: hidden; border-radius: 12px; }
.carte-suisse { display: block; width: 100%; height: auto; }
.cs-autres { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.22); stroke-width: .6; }
.cs-rom { fill: rgba(226,196,138,.26); stroke: rgba(226,196,138,.8); stroke-width: .8; }
.cs-lacs { fill: #2B3E6E; }
.cs-pt, .cs-base-pt { fill: #E2C48A; }
.cs-onde { fill: none; stroke: #E2C48A; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: csOnde 3.2s ease-out infinite; animation-delay: calc(var(--d, 0) * .27s); }
@keyframes csOnde { 0% { transform: scale(.5); opacity: .9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.carte-suisse text { fill: #fff; font-size: 10px; font-weight: 600; font-family: 'DM Sans', system-ui, sans-serif; paint-order: stroke; stroke: rgba(26,38,66,.85); stroke-width: 3px; stroke-linejoin: round; }
.cs-base text { font-size: 12.5px; fill: #F0D9A6; font-family: 'Marcellus', Georgia, serif; font-weight: 400; }
.carte-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .85rem; color: #E3E8F3; }
.carte-legende span { display: inline-flex; align-items: center; gap: 8px; }
.carte-legende span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #E2C48A; }
.carte-legende .cl-base::before { width: 12px; height: 12px; box-shadow: 0 0 0 3px rgba(226,196,138,.35); }
.carte-legende .cl-zone::before { width: 14px; height: 10px; border-radius: 3px; background: rgba(226,196,138,.26); border: 1px solid rgba(226,196,138,.8); }
@container (max-width: 520px) {
  .carte-suisse { width: 178%; max-width: none; }
}
/* apparition : cantons puis villes une à une (même déclencheur que les pastilles) */
.villes.anim .cs-rom, .villes.anim .cs-ville, .villes.anim .cs-base, .villes.anim .carte-legende { opacity: 0; }
.villes.anim.vu .cs-rom { animation: villeIn 1s ease forwards; }
.villes.anim.vu .cs-base { animation: villeIn .8s ease .5s forwards; }
.villes.anim.vu .cs-ville { animation: villeIn .7s ease forwards; animation-delay: calc(.8s + var(--d) * .12s); }
.villes.anim.vu .carte-legende { animation: villeIn .8s ease 2.4s forwards; }
@media (prefers-reduced-motion: reduce) { .cs-onde { animation: none; opacity: 0; } }

/* Base de Crissier en rouge (point plein, onde, légende et ligne « notre base » de la même couleur) — demande de l'utilisateur, 03.10.2026 */
.cs-base-pt { fill: #E0302A; }
.cs-base .cs-onde { stroke: #E0302A; }
.vb-point, .carte-legende .cl-base::before { background: #E0302A; }
.vb-point::after { border-color: #E0302A; }
.carte-legende .cl-base::before { box-shadow: 0 0 0 3px rgba(224,48,42,.35); }
.presta-grid.presta-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .presta-grid.presta-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .presta-grid.presta-4 { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   PAGES DE SERVICE — 3e passe (03.10.2026, demande de l'utilisateur) : bulles explicatives, « Ce qui est inclus » sur le thème
   de la brillance (reflet qui balaie chaque ligne comme une vitre qu'on essuie, éclats dorés), étapes en frise compacte.
   Apparition : classe .revele-auto (ergia.js, même déclencheur que la carte : anim → vu). Sans JS / « réduire les animations » : tout visible.
   ===================================================================== */
/* Bulles « De quoi s'agit-il ? » / « En quoi consiste la prestation ? » */
.bulles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; align-items: start; }
.bulle { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 20px 20px 20px 6px; padding: 20px 22px 22px; box-shadow: 0 18px 40px -34px rgba(18,24,51,.55); }
.bulle::after { content: ""; position: absolute; left: -1px; bottom: -10px; width: 18px; height: 12px; background: var(--surface); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); border-bottom-left-radius: 14px; transform: skewX(-25deg); transform-origin: left; }
.bulle-2 { background: #FBF8F1; border-color: rgba(194,154,78,.45); border-radius: 20px 20px 6px 20px; margin-top: 26px; }
.bulle-2::after { left: auto; right: -1px; background: #FBF8F1; border-left: 0; border-right: 1px solid rgba(194,154,78,.45); border-bottom-color: rgba(194,154,78,.45); border-bottom-left-radius: 0; border-bottom-right-radius: 14px; transform: skewX(25deg); transform-origin: right; }
.bulle-q { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: 'Marcellus', Georgia, serif; font-size: 1.12rem; color: var(--brand); }
.bulle-q svg { width: 22px; height: 22px; flex: 0 0 22px; color: #8A6D1F; }
.bulle p:not(.bulle-q) { margin: 0; font-size: .98rem; line-height: 1.65; color: var(--ink); }
.bulles.anim .bulle { opacity: 0; transform: translateY(14px) scale(.98); }
.bulles.anim.vu .bulle { animation: bulleIn .8s cubic-bezier(.2,.8,.2,1) forwards; }
.bulles.anim.vu .bulle-2 { animation-delay: .35s; }
@keyframes bulleIn { to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .bulles { grid-template-columns: minmax(0, 1fr); } .bulle-2 { margin-top: 6px; margin-left: 18px; } .bulle:not(.bulle-2) { margin-right: 18px; } }

/* Ce qui est inclus : thème « brillance » */
.svc .inc-grid:not(.prep-liste) { background: linear-gradient(160deg, #FFFFFF 0%, #FFFFFF 60%, #FBF8F1 100%); }
.svc .inc-grid:not(.prep-liste) .inc { position: relative; overflow: hidden; }
.svc .inc-grid:not(.prep-liste) .inc::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.95) 44%, rgba(226,196,138,.32) 50%, rgba(255,255,255,.95) 56%, transparent 68%); }
.svc .inc .ico-eclat { flex: 0 0 30px; width: 30px; height: 30px; padding: 6px; border-radius: 50%; border: 1px solid rgba(194,154,78,.55); background: #FBF8F1; color: #8A6D1F; }
.svc .inc-grid.anim .inc { opacity: 0; transform: translateY(8px); }
.svc .inc-grid.anim.vu .inc { animation: villeIn .7s ease forwards; animation-delay: calc(var(--i, 0) * .12s); }
.svc .inc-grid.anim.vu .inc::after { animation: brillance 1.6s ease forwards; animation-delay: calc(.35s + var(--i, 0) * .12s); }
.svc .inc-grid.anim.vu .inc .ico-eclat { animation: eclat 1.2s ease; animation-delay: calc(.5s + var(--i, 0) * .12s); }
.svc .inc-grid .inc:nth-child(2) { --i: 1; } .svc .inc-grid .inc:nth-child(3) { --i: 2; } .svc .inc-grid .inc:nth-child(4) { --i: 3; }
.svc .inc-grid .inc:nth-child(5) { --i: 4; } .svc .inc-grid .inc:nth-child(6) { --i: 5; } .svc .inc-grid .inc:nth-child(7) { --i: 6; }
@media (hover: hover) { .svc .inc-grid:not(.prep-liste) .inc:hover::after { animation: brillance 1s ease; } }
@keyframes brillance { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes eclat { 0%, 100% { transform: scale(1) rotate(0); } 45% { transform: scale(1.18) rotate(18deg); box-shadow: 0 0 0 6px rgba(226,196,138,.18); } }

/* Comment ça se passe : frise compacte */
.etapes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 22px; position: relative; }
.etapes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.etapes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.etapes::before { content: ""; position: absolute; left: 21px; right: 21px; top: 21px; height: 1px; background: linear-gradient(90deg, #C29A4E, rgba(194,154,78,.25)); transform-origin: left; }
.etapes li { position: relative; display: flex; flex-direction: column; gap: 4px; }
.et-ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #C29A4E; background: var(--bg); color: #8A6D1F; margin-bottom: 8px; box-shadow: 0 0 0 6px var(--bg); }
.et-ico svg { width: 20px; height: 20px; }
.etapes strong { font-size: .98rem; font-weight: 600; color: var(--ink); }
.etapes li > span:not(.et-ico) { font-size: .9rem; line-height: 1.55; color: #474E6B; }
.etapes.anim::before { transform: scaleX(0); }
.etapes.anim li { opacity: 0; transform: translateY(8px); }
.etapes.anim.vu::before { animation: filTrace 1.6s ease forwards; }
.etapes.anim.vu li { animation: villeIn .7s ease forwards; }
.etapes.anim.vu li:nth-child(2) { animation-delay: .35s; } .etapes.anim.vu li:nth-child(3) { animation-delay: .7s; } .etapes.anim.vu li:nth-child(4) { animation-delay: 1.05s; }
@keyframes filTrace { to { transform: scaleX(1); } }
@keyframes filTraceV { to { transform: scaleY(1); } }
@media (max-width: 640px) {
  .etapes-4, .etapes-3 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .etapes::before { left: 21px; right: auto; top: 21px; bottom: 21px; width: 1px; height: auto; background: linear-gradient(180deg, #C29A4E, rgba(194,154,78,.25)); transform-origin: top; }
  .etapes.anim::before { transform: scaleY(0); }
  .etapes.anim.vu::before { animation-name: filTraceV; }
  .etapes li { padding-left: 58px; min-height: 42px; }
  .et-ico { position: absolute; left: 0; top: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .svc .inc-grid:not(.prep-liste) .inc:hover::after { animation: none; } }

/* Page Prestations : zone d'intervention (carte) à la place de « Pourquoi choisir ERGIA ? » */
.zone-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .zone-grid { grid-template-columns: minmax(0, 1fr); } }
/* Bulles : coins asymétriques seulement (les petites pointes rendaient mal) */
.bulle::after { display: none; }
/* Encadré « Garantie de remise des clés » (Fin de bail) : même style que l'encart vitres */
.svc .note-box { border: 1px solid rgba(194,154,78,.45); background: #FBF8F1; border-radius: 14px; }
.svc .note-box .ico { color: #8A6D1F; }

/* « Ce qui est inclus » — présentation « carte » (03.10.2026, demande de l'utilisateur : « une autre forme élégante qu'un tableau »)
   Carte crème à double filet doré, prestations centrées (éclat doré, titre Marcellus, description), petit ornement doré entre elles. */
.svc .inc-grid:not(.prep-liste) { position: relative; background: #FFFDF8; border: 1px solid rgba(194,154,78,.6); border-radius: 8px;
  outline: 1px solid rgba(194,154,78,.35); outline-offset: -9px; box-shadow: 0 24px 50px -40px rgba(18,24,51,.5);
  padding: clamp(30px, 4vw, 46px) clamp(22px, 4vw, 48px); gap: clamp(26px, 3vw, 34px) clamp(28px, 4vw, 56px); }
.svc .inc-grid:not(.prep-liste) .inc { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 4px; border: 0 !important; }
.svc .inc-grid:not(.prep-liste) .inc > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.svc .inc-grid:not(.prep-liste) .inc strong { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.22rem; color: var(--brand); margin: 0; }
.svc .inc-grid:not(.prep-liste) .inc strong::after { content: ""; display: block; width: 28px; height: 1px; margin: 9px auto 0; background: #C29A4E; }
.svc .inc-grid:not(.prep-liste) .inc span { font-size: .95rem; line-height: 1.6; color: #474E6B; max-width: 34ch; }
.svc .inc-grid:not(.prep-liste) .inc .ico-eclat { width: 34px; height: 34px; flex-basis: 34px; padding: 6px; border: 0; background: none; }
@media (max-width: 600px) {
  .svc .inc-grid:not(.prep-liste) { grid-template-columns: minmax(0, 1fr); outline-offset: -7px; }
}
@media (max-width: 600px) { .svc .inc-grid:not(.prep-liste) { gap: 22px; padding: 28px 18px; } }

/* =====================================================================
   PAGE « QUI SOMMES-NOUS ? » (/a-propos/, 03.10.2026, test demandé par l'utilisateur)
   ===================================================================== */
.apropos-faits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.apropos-faits li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 16px; background: #FFFDF8; border: 1px solid rgba(194,154,78,.5); border-radius: 14px; }
.af-val { font-family: 'Marcellus', Georgia, serif; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--brand); line-height: 1.15; }
.af-val.af-slogan { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: #8A6D1F; font-style: italic; }
.af-lib { font-size: .9rem; color: #474E6B; }
.apropos-faits.anim li { opacity: 0; transform: translateY(10px); }
.apropos-faits.anim.vu li { animation: villeIn .7s ease forwards; }
.apropos-faits.anim.vu li:nth-child(2) { animation-delay: .15s; } .apropos-faits.anim.vu li:nth-child(3) { animation-delay: .3s; } .apropos-faits.anim.vu li:nth-child(4) { animation-delay: .45s; }
@media (max-width: 900px) { .apropos-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.apropos-fondateur { align-items: start; }
.lien-plus { font-weight: 700; color: var(--brand); text-decoration: none; border-bottom: 1px solid rgba(36,49,106,.35); padding-bottom: 2px; }
.lien-plus:hover { border-bottom-color: var(--brand); }
.lien-plus span { margin-left: .3em; }

/* =====================================================================
   « NOTRE FAÇON DE TRAVAILLER » (accueil, #pourquoi) en version CLAIRE (03.10.2026, demande de l'utilisateur :
   « couleurs plus claires et original »). Fond ivoire en léger dégradé, 4 cartes blanches en quinconce,
   chacune avec un médaillon doré posé sur le bord supérieur (comme un sceau de qualité). Effets d'apparition inchangés.
   ===================================================================== */
.why-dark.why-clair { color: var(--ink);
  background: linear-gradient(170deg, #FDFBF6 0%, #FBF8F1 55%, #F5EEDF 100%); }
.why-clair::before { background: linear-gradient(90deg, transparent, rgba(194,154,78,.6), transparent); }
.why-clair .eyebrow.on-dark { color: #8A6D1F; }
.why-clair .eyebrow.on-dark::before { background: #C29A4E; }
.why-clair .why-dark-head h2 { color: var(--brand); }
.why-clair .why-dark-head p { color: #474E6B; }
.why-clair .why-dark-list { gap: 46px 22px; padding-top: 24px; }
.why-clair .why-dark-list li { position: relative; align-items: center; text-align: center; padding: 42px 22px 24px; border: 1px solid rgba(194,154,78,.4); border-radius: 18px;
  background: #fff; box-shadow: 0 26px 48px -36px rgba(18,24,51,.45); overflow: visible; }
.why-clair .why-dark-list { align-items: start; }
.why-clair .why-dark-list li:nth-child(even) { margin-top: 28px; margin-bottom: -28px; }
.why-clair .why-dark-list li .wd-n { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(145deg, #F6E7C4 0%, #E2C48A 55%, #C9A55E 100%); color: #24316A; box-shadow: 0 0 0 5px #FBF8F1, 0 10px 22px -10px rgba(138,109,31,.7); }
.why-clair .why-dark-list li .wd-n::after { display: none; }
.why-clair .wd-ico svg { width: 26px; height: 26px; }
.why-clair .why-dark-list strong { color: var(--brand); }
.why-clair .why-dark-list li > span:last-child { color: #474E6B; max-width: 30ch; }
.why-clair .why-dark-list li::after { content: ""; position: absolute; left: 50%; bottom: 14px; width: 26px; height: 1px; transform: translateX(-50%); background: #C29A4E; opacity: .7; }
@media (hover: hover) { .why-clair .why-dark-list li:hover { background: #fff; border-color: rgba(194,154,78,.8); transform: translateY(-4px); } }
@media (max-width: 560px) {
  .why-clair .why-dark-list { gap: 34px 10px; padding-top: 18px; }
  .why-clair .why-dark-list li { padding: 32px 12px 20px; border-radius: 14px; }
  .why-clair .why-dark-list li:nth-child(even) { margin-top: 18px; margin-bottom: -18px; }
  .why-clair .why-dark-list li .wd-n { width: 44px; height: 44px; top: -21px; }
  .why-clair .wd-ico svg { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) { .why-clair .why-dark-list li:hover { transform: none; } }

/* =====================================================================
   « NOTRE FAÇON DE TRAVAILLER » EN CERCLE (03.10.2026, demande de l'utilisateur : « les 4 changent de place lentement,
   avec une flèche qui relie chaque bulle »). Grand écran (≥ 1100 px) seulement : les 4 bulles tournent autour du logo
   (un tour en 30 s, sens des aiguilles d'une montre), restent droites, et sont reliées par 4 flèches courbes dorées.
   La rotation S'ARRÊTE au survol ou au clavier (pour lire) et n'existe pas avec « réduire les animations ».
   En dessous de 1100 px : cartes en quinconce (version précédente), sans cercle.
   ===================================================================== */
.orbite-fleches, .orbite-centre { display: none; }
@media (min-width: 1100px) {
  .why-orbite .why-dark-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: center; }
  .why-orbite .orbite { position: relative; width: min(100%, 640px); aspect-ratio: 1; margin-inline: auto; }
  .why-orbite .orbite-fleches { display: block; position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #C29A4E; stroke-width: .45; stroke-linecap: round; }
  .why-orbite .of-cercle { stroke: rgba(194,154,78,.28); stroke-width: .25; stroke-dasharray: 1 1.6; }
  .why-orbite .of-pointe { fill: #C29A4E; stroke: none; }
  .why-orbite .orbite-centre { display: grid; place-items: center; position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; transform: translate(-50%, -50%);
    border-radius: 50%; background: #fff; border: 1px solid rgba(194,154,78,.45); box-shadow: 0 0 0 10px rgba(255,255,255,.55), 0 20px 40px -26px rgba(18,24,51,.45); }
  .why-orbite .orbite-centre img { width: 84px; height: auto; }
  .why-orbite .why-dark-list { position: absolute; inset: 0; display: block; padding: 0; margin: 0; }
  .why-clair.why-orbite .why-dark-list li { position: absolute; width: 214px; margin: 0 !important; padding: 36px 16px 20px; transform: translate(-50%, -50%); }
  .why-orbite .why-dark-list li:nth-child(1) { left: 50%; top: 15%; }
  .why-orbite .why-dark-list li:nth-child(2) { left: 85%; top: 50%; }
  .why-orbite .why-dark-list li:nth-child(3) { left: 50%; top: 85%; }
  .why-orbite .why-dark-list li:nth-child(4) { left: 15%; top: 50%; }
  .why-clair.why-orbite .why-dark-list strong { font-size: 1.08rem; }
  .why-clair.why-orbite .why-dark-list li > span:last-child { font-size: .86rem; line-height: 1.45; }
  .why-clair.why-orbite .why-dark-list li:hover { transform: translate(-50%, -50%); }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .why-orbite .why-dark-list, .why-orbite .orbite-fleches { animation: orbiteTour 30s linear infinite; }
  /* chaque bulle tourne en sens inverse : elle change de place mais reste droite ; apparition en fondu seulement */
  .why-clair.why-orbite .why-dark-list li, .why-clair.why-orbite.revele .why-dark-list li { animation: orbiteContre 30s linear infinite, orbiteFondu 1.4s ease backwards; animation-delay: 0s, calc(.3s + var(--i, 0) * .3s); }
  .why-orbite .orbite:hover .why-dark-list, .why-orbite .orbite:hover .orbite-fleches, .why-orbite .orbite:hover .why-dark-list li,
  .why-orbite .orbite:focus-within .why-dark-list, .why-orbite .orbite:focus-within .orbite-fleches, .why-orbite .orbite:focus-within .why-dark-list li { animation-play-state: paused; }
  .why-orbite.reveal-pret:not(.revele) .why-dark-list li { opacity: 0; }
}
@keyframes orbiteTour { to { transform: rotate(360deg); } }
@keyframes orbiteContre { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes orbiteFondu { from { opacity: 0; } }

/* =====================================================================
   PAGE « NOTRE SAVOIR-FAIRE » : « Nos services » en lignes éditoriales (03.10.2026, demande de l'utilisateur)
   Chaque service = une ligne : médaillon doré, titre Marcellus, description, rond fléché à droite ; reflet crème au survol.
   ===================================================================== */
.svc .sec .presta-grid.presta-4 { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(194,154,78,.45); }
.svc .sec .presta-grid.presta-4 .presta-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.3fr) 52px; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: clamp(22px, 2.6vw, 30px) clamp(8px, 1.6vw, 20px); border: 0; border-bottom: 1px solid rgba(194,154,78,.45); border-radius: 0; background: transparent; box-shadow: none; transform: none; overflow: hidden; }
.svc .sec .presta-grid.presta-4 .presta-card::before { content: ""; position: absolute; inset: 0; top: 0; height: auto; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #FBF8F1, rgba(251,248,241,0)); transition: transform .6s cubic-bezier(.22,.61,.36,1); z-index: 0; }
.svc .sec .presta-grid.presta-4 .presta-card > * { position: relative; z-index: 1; }
.svc .sec .presta-grid.presta-4 .presta-card .ico { width: 56px; height: 56px; padding: 14px; margin: 0; border-radius: 50%; border: 0; color: #24316A;
  background: linear-gradient(145deg, #F6E7C4 0%, #E2C48A 55%, #C9A55E 100%); box-shadow: 0 10px 22px -12px rgba(138,109,31,.7); }
.svc .sec .presta-grid.presta-4 .presta-card strong { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: var(--brand); }
.svc .sec .presta-grid.presta-4 .presta-card span { font-size: .98rem; line-height: 1.6; color: #474E6B; }
.svc .sec .presta-grid.presta-4 .presta-card em { margin: 0; padding: 0; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(36,49,106,.3); display: grid; place-items: center; font-size: 0; justify-self: end; transition: background .35s ease, border-color .35s ease; }
.svc .sec .presta-grid.presta-4 .presta-card em::after { content: "→"; font-size: 1.1rem; color: var(--brand); transition: transform .35s ease, color .35s ease; }
@media (hover: hover) {
  .svc .sec .presta-grid.presta-4 .presta-card:hover::before { transform: scaleX(1); }
  .svc .sec .presta-grid.presta-4 .presta-card:hover em { background: var(--brand); border-color: var(--brand); }
  .svc .sec .presta-grid.presta-4 .presta-card:hover em::after { color: #fff; transform: translateX(2px); }
}
.svc .sec .presta-grid.presta-4 .presta-card:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
@media (max-width: 760px) {
  .svc .sec .presta-grid.presta-4 .presta-card { grid-template-columns: 48px minmax(0, 1fr) 40px; grid-template-areas: "ico titre fl" "ico texte fl"; row-gap: 4px; column-gap: 14px; padding: 18px 4px; }
  .svc .sec .presta-grid.presta-4 .presta-card .ico { grid-area: ico; width: 46px; height: 46px; padding: 12px; align-self: start; }
  .svc .sec .presta-grid.presta-4 .presta-card strong { grid-area: titre; font-size: 1.25rem; }
  .svc .sec .presta-grid.presta-4 .presta-card span { grid-area: texte; font-size: .92rem; }
  .svc .sec .presta-grid.presta-4 .presta-card em { grid-area: fl; width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .svc .sec .presta-grid.presta-4 .presta-card::before { transition: none; } }

/* =====================================================================
   BANDEAU « UN DEVIS CLAIR » (bas de page, toutes les pages) : arrondis harmonisés (03.10.2026, demande de l'utilisateur)
   Même arrondi que les cartes (18 px), trait doré déplacé au-dessus du titre (il butait contre le coin), bouton en pastille
   comme les choix du haut des pages, fond crème léger et double filet comme la carte « Ce qui est inclus ».
   ===================================================================== */
.cta-box { border-radius: 18px; background: linear-gradient(160deg, #FFFFFF 0%, #FFFDF8 60%, #FBF8F1 100%); border: 1px solid rgba(194,154,78,.5);
  outline: 1px solid rgba(194,154,78,.25); outline-offset: -8px; box-shadow: 0 26px 50px -42px rgba(18,24,51,.5); }
.cta-box::before { display: none; }
.cta-box h2::before { content: ""; display: block; width: 44px; height: 2px; margin-bottom: 16px; background: #C29A4E; border-radius: 2px; }
.cta-box .btn, .cta-box .btn-light { border-radius: 999px; padding-inline: 30px; min-height: 52px; }
@media (max-width: 520px) { .cta-box { outline-offset: -6px; } }
.svc .sec .presta-grid.presta-4 .presta-card em::after { line-height: 1; }

/* =====================================================================
   CARTE DEVIS DE LA COLONNE (pages de service) — se distingue du reste de la page (03.10.2026, demande de l'utilisateur)
   Bleu marine profond, double filet doré, petit surtitre « Devis gratuit », coches dorées, bouton or en pastille.
   ===================================================================== */
.svc .side-card:first-child { background: linear-gradient(160deg, #2A3A7A 0%, #24316A 45%, #1A2642 100%) !important; color: #fff;
  border: 1px solid rgba(226,196,138,.5); border-radius: 18px; outline: 1px solid rgba(226,196,138,.22); outline-offset: -8px;
  padding: 30px 28px 26px; box-shadow: 0 30px 60px -34px rgba(18,24,51,.75); overflow: hidden; }
.svc .side-card:first-child::before { display: none; }
.svc .side-card:first-child::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 14 10l7.5 2-7.5 2-2 7.5-2-7.5-7.5-2 7.5-2Z' fill='%23E2C48A'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .12; }
.svc .side-card:first-child h3 { color: #fff; font-size: 1.5rem; line-height: 1.2; }
.svc .side-card:first-child h3::before { content: "Devis gratuit"; display: block; margin-bottom: 8px; font-family: 'DM Sans', system-ui, sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E2C48A; }
.svc .side-card:first-child .sc-points li { color: #E9ECF5; }
.svc .side-card:first-child .sc-points li::before { border-color: #E2C48A; background-color: rgba(226,196,138,.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.5-5' fill='none' stroke='%23E2C48A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.svc .side-card:first-child .sc-points a, .svc .side-card:first-child p.small a { color: #E2C48A; text-decoration: underline; text-underline-offset: 3px; }
.svc .side-card:first-child .btn-primary { border-radius: 999px; min-height: 52px; background: linear-gradient(145deg, #F6E7C4 0%, #E2C48A 55%, #C9A55E 100%); color: #1A2642; border: 0;
  font-weight: 700; box-shadow: 0 14px 26px -16px rgba(226,196,138,.9); position: relative; overflow: hidden; }
.svc .side-card:first-child .btn-primary::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transition: transform .8s ease; }
@media (hover: hover) { .svc .side-card:first-child .btn-primary:hover { background: linear-gradient(145deg, #FAEFD5 0%, #E8CD98 55%, #CFAE6B 100%); color: #1A2642; }
  .svc .side-card:first-child .btn-primary:hover::after { transform: translateX(120%); } }
.svc .side-card:first-child p.small { color: #C9D1EA; }
@media (prefers-reduced-motion: reduce) { .svc .side-card:first-child .btn-primary::after { transition: none; } }
/* Carte de devis en VERT, la couleur de la feuille du logo (03.10.2026, demande de l'utilisateur) — remplace le bleu marine ci-dessus.
   Verts assombris (#2F7A35 → #1C4A25) pour que le texte blanc reste bien lisible ; l'or reste pour les détails. */
.svc .side-card:first-child { background: linear-gradient(160deg, #3A8A3E 0%, #2F7A35 40%, #1C4A25 100%) !important; box-shadow: 0 30px 60px -34px rgba(20,60,28,.7); }
.svc .side-card:first-child .sc-points li { color: #F1F7EF; }
.svc .side-card:first-child p.small { color: #DCEBD9; }
.svc .side-card:first-child .sc-points li::before { background-color: rgba(226,196,138,.2); }
/* Lisibilité (Impeccable) : vert un peu plus soutenu, petits textes presque blancs, or plus clair (≥ 4.5:1) */
.svc .side-card:first-child { background: linear-gradient(160deg, #2C7432 0%, #276B2E 40%, #173F1F 100%) !important; }
.svc .side-card:first-child p.small { color: #F4F8F2; }
.svc .side-card:first-child h3::before, .svc .side-card:first-child .sc-points a, .svc .side-card:first-child p.small a { color: #F0D9A6; }
/* Carte de devis : fond BLANC (thème de base du site, demande de l'utilisateur du 03.10.2026), le vert du logo en accent
   (surtitre, coches, bouton), double filet doré conservé. Remplace les fonds bleu marine puis vert ci-dessus. */
.svc .side-card:first-child { background: #FFFFFF !important; color: var(--ink); border-color: rgba(194,154,78,.5); box-shadow: 0 26px 50px -38px rgba(18,24,51,.45); }
.svc .side-card:first-child::after { opacity: .09; }
.svc .side-card:first-child h3 { color: var(--brand); }
.svc .side-card:first-child h3::before { color: #2C7432; }
.svc .side-card:first-child .sc-points li { color: var(--ink); }
.svc .side-card:first-child .sc-points li::before { border-color: #2C7432; background-color: #EEF6EC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.5-5' fill='none' stroke='%232C7432' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.svc .side-card:first-child .sc-points a, .svc .side-card:first-child p.small a { color: #276B2E; }
.svc .side-card:first-child p.small { color: #474E6B; }
.svc .side-card:first-child .btn-primary { background: linear-gradient(145deg, #3A8A3E 0%, #2C7432 55%, #235E29 100%); color: #fff; box-shadow: 0 14px 26px -16px rgba(44,116,50,.8); }
@media (hover: hover) { .svc .side-card:first-child .btn-primary:hover { background: linear-gradient(145deg, #34803A 0%, #276B2E 55%, #1D5023 100%); color: #fff; } }
.svc .side-card:first-child .btn-primary { background: linear-gradient(145deg, #2F7A35 0%, #276B2E 55%, #1F5725 100%); }
/* Carte de devis : accents VERT ÉMERAUDE (03.10.2026, demande de l'utilisateur) au lieu du vert feuille ; fond blanc conservé. */
.svc .side-card:first-child h3::before { color: #047857; }
.svc .side-card:first-child .sc-points li::before { border-color: #059669; background-color: #E8F6F0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.5-5' fill='none' stroke='%23047857' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.svc .side-card:first-child .sc-points a, .svc .side-card:first-child p.small a { color: #047857; }
.svc .side-card:first-child .btn-primary { background: linear-gradient(145deg, #08805A 0%, #04704F 55%, #035B41 100%); color: #fff; box-shadow: 0 14px 26px -16px rgba(4,112,79,.8); }
@media (hover: hover) { .svc .side-card:first-child .btn-primary:hover { background: linear-gradient(145deg, #077552 0%, #036546 55%, #024E37 100%); color: #fff; } }
.svc .side-card:first-child .btn-primary { background: #04704F; }
@media (hover: hover) { .svc .side-card:first-child .btn-primary:hover { background: #035B41; } }
/* Carte de devis : retour à la CHARTE DE BASE du site (03.10.2026, demande de l'utilisateur) — blanc, bleu marine et or, plus de vert.
   Garde la forme retravaillée (double filet doré, surtitre « DEVIS GRATUIT », bouton en pastille). */
.svc .side-card:first-child h3::before { color: #8A6D1F; }
.svc .side-card:first-child .sc-points li::before { border-color: #C29A4E; background-color: #FBF8F1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.5-5' fill='none' stroke='%238A6D1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.svc .side-card:first-child .sc-points a, .svc .side-card:first-child p.small a { color: var(--brand); }
.svc .side-card:first-child .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 14px 26px -16px rgba(36,49,106,.8); }
@media (hover: hover) { .svc .side-card:first-child .btn-primary:hover { background: #1A2642; color: #fff; } }

/* =========================================================================
   OPTION VITRES — bandeau « fenêtre » (03.10.2026, demande de l'utilisateur : « plus original et classe »)
   Pages Fin de chantier, Fin de bail, Bureaux. Remplace l'encart crème .option-strip sur ces pages.
   Bleu nuit + or, fenêtre dessinée (SVG), reflet qui balaie le bandeau comme une vitre qu'on essuie.
   ========================================================================= */
.opt-vitres { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px;
  margin-top: 22px; padding: 24px 30px; border-radius: 18px; color: #fff;
  background: linear-gradient(115deg, #17234F 0%, #1D2B5E 55%, #14204A 100%);
  box-shadow: 0 22px 40px -28px rgba(20,32,74,.9); }
.opt-vitres::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(226,196,138,.45); border-radius: 13px; pointer-events: none; }
/* reflet qui passe */
.opt-vitres::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 26%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.13) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); }
.ov-fenetre { width: 92px; height: 92px; flex: none; position: relative; z-index: 1; }
.ov-texte { position: relative; z-index: 1; min-width: 0; }
.ov-label { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #14204A;
  background: #E2C48A; border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; }
.ov-titre { display: block; font-family: "Marcellus", serif; font-weight: 400; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem); line-height: 1.25; color: #fff; }
.ov-titre em { font-style: normal; color: #E2C48A; }
.opt-vitres p { margin: 8px 0 0; color: #DCE2F2; font-size: .95rem; line-height: 1.55; max-width: 52ch; }
.ov-lien { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 11px 20px; border-radius: 999px;
  border: 1px solid rgba(226,196,138,.7); color: #F3E3BF; font-weight: 600; text-decoration: none; transition: background .3s ease, color .3s ease; }
.ov-lien:focus-visible { outline: 2px solid #E2C48A; outline-offset: 3px; }
@media (hover: hover) {
  .ov-lien:hover { background: #E2C48A; color: #14204A; }
  .opt-vitres:hover::after { animation: ovReflet 1.4s ease; }
}
@keyframes ovReflet { from { left: -40%; } to { left: 120%; } }
@keyframes ovEclat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }
.ov-eclat { transform-box: fill-box; transform-origin: center; }
/* apparition (classe .revele-auto → anim / vu, ergia.js) */
.opt-vitres.anim { opacity: 0; transform: translateY(12px); }
.opt-vitres.anim.vu { animation: villeIn .8s ease forwards; }
.opt-vitres.anim.vu::after { animation: ovReflet 1.6s ease .5s; }
.opt-vitres.anim.vu .ov-eclat { animation: ovEclat 1.2s ease 1.2s; }
@media (max-width: 760px) {
  .opt-vitres { grid-template-columns: auto 1fr; gap: 16px 18px; padding: 22px 20px; }
  .ov-fenetre { width: 64px; height: 64px; align-self: start; }
  .ov-lien { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .opt-vitres.anim { opacity: 1; transform: none; }
  .opt-vitres::after, .ov-eclat { animation: none !important; }
}

/* =========================================================================
   « NOTRE FAÇON DE TRAVAILLER » PLUS COMPACTE (03.10.2026, demande de l'utilisateur : « elle prend trop de place »)
   Ordinateur : cercle 640 → 520 px, bulles plus petites. Tablette / téléphone : cartes plus serrées, sans quinconce.
   ========================================================================= */
.why-dark.why-clair { padding-block: clamp(32px, 4vw, 52px); }
@media (min-width: 1100px) {
  .why-orbite .orbite { width: min(100%, 520px); }
  .why-orbite .orbite-centre { width: 96px; height: 96px; box-shadow: 0 0 0 7px rgba(255,255,255,.55), 0 16px 30px -22px rgba(18,24,51,.45); }
  .why-orbite .orbite-centre img { width: 60px; }
  .why-clair.why-orbite .why-dark-list li { width: 168px; padding: 28px 12px 14px; border-radius: 14px; }
  .why-clair.why-orbite .why-dark-list li .wd-n { width: 42px; height: 42px; top: -21px; }
  .why-clair.why-orbite .wd-ico svg { width: 20px; height: 20px; }
  .why-clair.why-orbite .why-dark-list strong { font-size: .98rem; }
  .why-clair.why-orbite .why-dark-list li > span:last-child { font-size: .8rem; line-height: 1.4; }
  .why-clair.why-orbite .why-dark-list li::after { display: none; }
  .why-orbite .why-dark-list li:nth-child(1) { top: 15%; }
  .why-orbite .why-dark-list li:nth-child(2) { left: 85%; }
  .why-orbite .why-dark-list li:nth-child(3) { top: 85%; }
  .why-orbite .why-dark-list li:nth-child(4) { left: 15%; }
}
@media (max-width: 1099px) {
  .why-clair .why-dark-list { gap: 30px 14px; padding-top: 16px; }
  .why-clair .why-dark-list li { padding: 28px 14px 14px; border-radius: 14px; }
  .why-clair .why-dark-list li:nth-child(even) { margin-top: 0; margin-bottom: 0; }
  .why-clair .why-dark-list li::after { display: none; }
  .why-clair .why-dark-list li .wd-n { width: 40px; height: 40px; top: -20px; }
  .why-clair .wd-ico svg { width: 19px; height: 19px; }
}
@media (max-width: 600px) {
  .why-clair .why-dark-list { gap: 26px 10px; }
  .why-clair .why-dark-list li { padding: 24px 10px 12px; }
  .why-clair .why-dark-list strong { font-size: .95rem; }
  .why-clair .why-dark-list li > span:last-child { font-size: .8rem; line-height: 1.4; }
}