/* ALS Services, maquette B, page Hauts-de-Seine (v7, 27/10).
   Retour de l'utilisateur sur la v1 : « après le hero on perd la DA, pas assez ludique, dur à lire ».
   Cette feuille prolonge le langage du premier écran sur toute la page : légers dégradés bleus, photos arrondies
   à 22 px avec ombre douce, tuiles d'icônes en dégradé de 56 px, boutons pilules. Méthode : strategy/12-methode-360-design.md */

/* Polices servies en local (licence ITF FFL de Fontshare : auto-hébergement permis, fichiers non modifiés) */
@font-face { font-family: "Satoshi"; src: url("/nettoyage-hauts-de-seine-92/fonts/Satoshi-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Gambetta"; src: url("/nettoyage-hauts-de-seine-92/fonts/Gambetta-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
/* Icônes Phosphor (licence MIT), réduites aux 54 glyphes de cette page : fichiers locaux de quelques Ko */
@font-face { font-family: "Phosphor 92"; src: url("/nettoyage-hauts-de-seine-92/fonts/phosphor-92.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: block; }
@font-face { font-family: "Phosphor 92 Fill"; src: url("/nettoyage-hauts-de-seine-92/fonts/phosphor-92-fill.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: block; }
.ph { font-family: "Phosphor 92" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ph-fill { font-family: "Phosphor 92 Fill" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ph.ph-app-window::before { content: "\e5da"; }
.ph.ph-arrow-left::before { content: "\e058"; }
.ph.ph-arrow-right::before { content: "\e06c"; }
.ph.ph-briefcase::before { content: "\e0ee"; }
.ph.ph-bug::before { content: "\e5f4"; }
.ph.ph-buildings::before { content: "\e102"; }
.ph.ph-calendar-check::before { content: "\e712"; }
.ph.ph-car::before { content: "\e112"; }
.ph.ph-caret-down::before { content: "\e136"; }
.ph.ph-certificate::before { content: "\e766"; }
.ph.ph-check::before { content: "\e182"; }
.ph.ph-check-circle::before { content: "\e184"; }
.ph.ph-clipboard-text::before { content: "\e198"; }
.ph.ph-clock::before { content: "\e19a"; }
.ph.ph-coins::before { content: "\e78e"; }
.ph.ph-desk::before { content: "\ed16"; }
.ph.ph-door-open::before { content: "\e7e6"; }
.ph.ph-drop::before { content: "\e210"; }
.ph.ph-elevator::before { content: "\ecc0"; }
.ph.ph-file-text::before { content: "\e23a"; }
.ph.ph-hammer::before { content: "\e80e"; }
.ph.ph-house-line::before { content: "\e2c4"; }
.ph.ph-identification-card::before { content: "\e2c8"; }
.ph.ph-info::before { content: "\e2ce"; }
.ph.ph-key::before { content: "\e2d6"; }
.ph.ph-lightbulb::before { content: "\e2dc"; }
.ph.ph-list::before { content: "\e2f0"; }
.ph.ph-list-checks::before { content: "\eadc"; }
.ph.ph-magnifying-glass::before { content: "\e30c"; }
.ph.ph-map-pin::before { content: "\e316"; }
.ph.ph-minus::before { content: "\e32a"; }
.ph.ph-moon-stars::before { content: "\e58e"; }
.ph.ph-paint-roller::before { content: "\e6f4"; }
.ph.ph-phone::before { content: "\e3b8"; }
.ph.ph-plus::before { content: "\e3d4"; }
.ph.ph-ruler::before { content: "\e6b8"; }
.ph.ph-seal-check::before { content: "\e606"; }
.ph.ph-shield-check::before { content: "\e40c"; }
.ph.ph-sliders-horizontal::before { content: "\e434"; }
.ph.ph-sparkle::before { content: "\e6a2"; }
.ph.ph-squares-four::before { content: "\e464"; }
.ph.ph-stairs::before { content: "\e8ec"; }
.ph.ph-stethoscope::before { content: "\e7ea"; }
.ph.ph-storefront::before { content: "\e470"; }
.ph.ph-sun::before { content: "\e472"; }
.ph.ph-sun-horizon::before { content: "\e5b6"; }
.ph.ph-toilet::before { content: "\e79a"; }
.ph.ph-trash::before { content: "\e4a6"; }
.ph.ph-user-circle::before { content: "\e4c4"; }
.ph.ph-users-three::before { content: "\e68e"; }
.ph.ph-warning-circle::before { content: "\e4e2"; }
.ph.ph-x::before { content: "\e4f6"; }
.ph-fill.ph-shield-check::before { content: "\e40c"; }
.ph-fill.ph-star::before { content: "\e46a"; }

.p92 {
  --r2: 22px;
  --tile: 56px;
  --soft: linear-gradient(180deg, #E9F1F8 0%, #F3F8FC 55%, #FFFFFF 100%);
  --deep: linear-gradient(135deg, #0A2740 0%, #0E3553 38%, #0B5A8A 78%, #0E84C4 100%);
  --grad-light: linear-gradient(120deg, #FFFFFF 0%, #CFE9F8 100%);
  --sh-card: 0 1px 2px rgba(14, 53, 83, .05), 0 16px 40px -14px rgba(14, 53, 83, .18);
  --sh-hover: 0 2px 4px rgba(14, 53, 83, .06), 0 28px 60px -18px rgba(14, 53, 83, .30);
  --ring: inset 0 0 0 1px rgba(14, 53, 83, .10);
  /* v4 : système resserré. Arrondis : pilule, cercle, 22 px (blocs), 14 px (petits éléments). Ombres : repos, survol,
     fond profond, et une seule lueur pour les éléments en dégradé. Huit tailles de texte. */
  --r-sm: 14px;
  --sh-glow: 0 10px 22px -8px rgba(14, 132, 196, .5);
  --sh-deep: 0 28px 70px -28px rgba(0, 0, 0, .5);
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.1rem + .9vw, 1.875rem);
  --fs-2xl: clamp(1.875rem, 1rem + 1.6vw, 2.5rem);
  --fs-display: clamp(3rem, 1.6rem + 3.4vw, 4.75rem);
  --serif-it: "Gambetta", Georgia, "Times New Roman", serif;
}

/* ---------- Socle ---------- */
.hs-sec { position: relative; padding-block: clamp(64px, 7vw, 108px); overflow: clip; }
.hs-soft { background: var(--soft); }
.hs-sec > .wrap { position: relative; }
.hs-halo { position: absolute; top: -12%; left: -10%; width: min(46vw, 820px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(14, 132, 196, .10), transparent 68%); pointer-events: none; }
.hs-halo-r { left: auto; right: -12%; top: 20%; }
.hs-h2 { margin: 0; max-width: 20ch; font-size: clamp(1.875rem, 1rem + 1.9vw, 2.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -.032em; color: var(--ink); text-wrap: balance; }
.g { background-image: var(--grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hs-h3 { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.hs-head { max-width: 780px; margin-bottom: clamp(36px, 4vw, 56px); }
.hs-head p { margin: 16px 0 0; max-width: 36em; color: var(--ink-2); }
.hs-head p b { color: var(--ink); }
.hs-lead { margin: 20px 0 0; max-width: 28em; font-size: clamp(1.1875rem, 1rem + .5vw, 1.375rem); font-weight: 500; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); }
.hs-p { margin: 14px 0 0; max-width: 36em; color: var(--ink-2); }
.hs-small { margin: 6px 0 0; font-size: .9375rem; color: var(--ink-3); }
.hs-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.hs-assure { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .875rem; color: var(--ink-3); }
.hs-assure .ph { color: var(--accent); font-size: 18px; }
.btn-light { background: #fff; color: var(--accent-ink); box-shadow: var(--sh-deep); }
.btn-light:hover { background: #F2F8FC; }
.p92 main .lnk { white-space: normal; }
.p92 main .lnk .ph { transition: transform .35s var(--ease); }
.p92 main .lnk:hover .ph-arrow-right { transform: translateX(4px); }

/* Tuile d'icône : la signature du premier écran (.hb-ico), en plus grand */
.hs-tile { flex: none; display: grid; place-items: center; width: var(--tile); height: var(--tile); border-radius: var(--r-sm); background: var(--grad); color: #fff; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: var(--sh-glow); }
.hs-tile-sm { --tile: 44px; border-radius: var(--r-sm); font-size: 22px; }

/* Photo : même traitement que la mosaïque du premier écran */
.hs-ph { position: relative; margin: 0; overflow: hidden; border-radius: var(--r2); background: #dde6ee; box-shadow: var(--shadow-lift); }
.hs-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(14, 53, 83, .07); pointer-events: none; }
.hs-ph figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: rgba(14, 53, 83, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: .6875rem; line-height: 1.3; color: #fff; }

/* Pastille de maquette « À confirmer » : discrète, l'infobulle garde le détail */
.tbc { display: inline-block; vertical-align: .12em; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #FFF4E0; box-shadow: inset 0 0 0 1px #EDBF77; color: #7A4A00; font-size: .6875rem; font-style: normal; font-weight: 700; line-height: 1.5; white-space: nowrap; -webkit-text-fill-color: #7A4A00; }

/* ---------- 3. Promesse ---------- */
.hs-prom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.hs-duo { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-rows: 1fr 1fr; gap: clamp(12px, 1.3vw, 20px); height: clamp(380px, 34vw, 660px); }
.hs-duo-a { grid-row: 1 / 3; }
.hs-duo-a img { object-position: 50% 30%; }
.hs-duo-b { grid-row: 2 / 3; grid-column: 2; }
.hs-duo-b img { object-position: 40% 50%; }
.hs-float { position: absolute; top: 9%; right: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); }
.hs-float b { display: block; font-size: .9375rem; line-height: 1.2; }
.hs-float small { display: block; margin-top: 2px; font-size: .8125rem; color: var(--ink-3); }

.hs-atouts { margin-top: clamp(56px, 6vw, 88px); }
.hs-atouts-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; }
.hs-switch { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: var(--sh-card); }
.hs-switch button { height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: .9375rem; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: background-color .3s, color .3s; }
.hs-switch button[aria-pressed="true"] { background: var(--grad); color: #fff; }
.hs-switch button[data-mode-btn="sans"][aria-pressed="true"] { background: #5C6470; }
.hs-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hs-card { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.hs-card:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }
.hs-card h3 { margin: 22px 0 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.02em; }
.hs-swap { display: grid; margin-top: 10px; }
.hs-swap p { grid-area: 1 / 1; margin: 0; color: var(--ink-2); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.hs-swap .hs-sans { opacity: 0; transform: translateY(6px); visibility: hidden; }
[data-mode="sans"] .hs-swap .hs-sans { opacity: 1; transform: none; visibility: visible; }
[data-mode="sans"] .hs-swap .hs-avec { opacity: 0; transform: translateY(6px); visibility: hidden; }
.hs-card .hs-tile { transition: background-color .4s, filter .4s, box-shadow .4s; }
[data-mode="sans"] .hs-card .hs-tile { filter: grayscale(1) brightness(1.1); box-shadow: none; }
[data-mode="sans"] .hs-card h3 { color: var(--ink-3); }

/* ---------- 4. Bande de preuves (fond profond, chiffres en dégradé clair) ---------- */
.hs-band { position: relative; overflow: clip; padding-block: clamp(72px, 8vw, 120px); background: var(--deep); color: #fff; }
.hs-band-glow { position: absolute; right: -10%; top: -40%; width: min(60vw, 1000px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(28, 159, 220, .35), transparent 65%); pointer-events: none; }
.hs-band .wrap { position: relative; }
.hs-band-h { margin: 0; max-width: 24ch; font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.hs-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: clamp(36px, 4vw, 56px) 0 0; }
.hs-nums > div { display: flex; flex-direction: column; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); }
.hs-nums dt { order: 2; margin-top: 12px; font-size: .9375rem; font-weight: 700; }
.hs-nums .n { order: 1; margin: 0; font-size: clamp(3rem, 1.4rem + 3.8vw, 5.25rem); font-weight: 700; line-height: .95; letter-spacing: -.045em; font-variant-numeric: tabular-nums; background-image: var(--grad-light); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hs-nums .n small { font-size: .5em; letter-spacing: -.02em; }
.hs-nums .l { order: 3; margin: 4px 0 0; font-size: .875rem; color: rgba(255, 255, 255, .72); }
.hs-nums .l a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.hs-band-foot { margin: clamp(36px, 4vw, 52px) 0 0; font-size: .8125rem; color: rgba(255, 255, 255, .62); }

/* ---------- 5. Carrousel des prestations : cartes blanches, ombre douce, photo qui respire au survol ---------- */
.hs-svc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(28px, 3vw, 40px); }
.hs-nav { flex: none; display: flex; align-items: center; gap: 10px; }
.hs-count { margin-right: 10px; font-size: .9375rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-count b { color: var(--ink); font-weight: 700; }
.hs-arrow { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--sh-card); color: var(--ink); font-size: 20px; cursor: pointer; transition: background-color .3s, color .3s, opacity .3s, transform .3s var(--ease); }
.hs-arrow:hover:not(:disabled) { background: var(--accent-fill); color: #fff; }
.hs-arrow:active:not(:disabled) { transform: scale(.94); }
.hs-arrow:disabled { opacity: .35; cursor: default; box-shadow: var(--ring); }
.hs-car { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; container-type: inline-size; scroll-padding-inline: calc((100% - min(100% - 2 * var(--gutter), var(--maxw))) / 2); }
.hs-car::-webkit-scrollbar { display: none; }
.hs-car:focus-visible { outline-offset: -2px; }
.hs-track { --cw: min(100cqw - 2 * var(--gutter), var(--maxw)); --cg: 24px; list-style: none; margin: 0; display: flex; gap: var(--cg); width: max-content; padding: 12px calc((100cqw - var(--cw)) / 2) 48px; }
.hs-svc-card { flex: none; display: flex; flex-direction: column; width: calc((var(--cw) - 2 * var(--cg)) / 3); scroll-snap-align: start; overflow: hidden; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.hs-svc-card:hover { transform: translateY(-6px); box-shadow: var(--sh-hover); }
.hs-svc-card figure { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #e3e6ea; }
.hs-svc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hs-svc-card:hover img { transform: scale(1.05); }
.hs-svc-txt { flex: 1; display: flex; flex-direction: column; padding: 22px 26px 26px; }
.svc-n { align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(14, 132, 196, .10); color: var(--accent-ink); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-svc-txt h3 { margin-top: 14px; font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.02em; }
.hs-svc-txt > p { margin: 10px 0 0; font-size: .9375rem; color: var(--ink-2); }
.hs-svc-txt .hs-gain { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink); }
.hs-gain b { margin-right: 4px; color: var(--accent-ink); }
.hs-svc-txt .lnk { margin-top: auto; padding-top: 18px; align-self: flex-start; }
@media (min-width: 768px) { .hs-svc-txt h3 { min-height: 2.4em; } .hs-svc-txt > p:not(.hs-gain) { min-height: 4.65em; } }
.hs-also { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 48px; margin-top: 8px; }
.hs-also-h { margin: 0 0 14px; font-weight: 700; }
.hs-also ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hs-also li > a, .hs-also li > span { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: var(--ring); font-size: .9375rem; color: var(--ink); transition: box-shadow .3s, color .3s; }
.hs-also li > a:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-ink); }
.hs-also li .ph { color: var(--accent); font-size: 18px; }
.hs-also li > span { color: var(--ink-3); }

/* ---------- 6. Composer son besoin ---------- */
.hs-comp { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.hs-comp-steps { display: grid; gap: 28px; }
.hs-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.hs-step legend { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.hs-step-k { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font-size: .875rem; font-variant-numeric: tabular-nums; }
.hs-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hs-pick { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); cursor: pointer; transition: box-shadow .3s, transform .4s var(--ease); }
.hs-pick:hover { transform: translateY(-3px); }
.hs-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hs-pick .hs-tile { background: #E8F0F7; color: var(--accent-ink); box-shadow: none; transition: background-color .3s, color .3s, box-shadow .3s; }
.hs-pick b { font-size: 1rem; }
.hs-pick:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent), var(--sh-card); }
.hs-pick:has(input:checked) .hs-tile { background: var(--grad); color: #fff; box-shadow: var(--sh-glow); }
.hs-pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.hs-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hs-chip { position: relative; display: inline-flex; cursor: pointer; }
.hs-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hs-chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: var(--ring); font-size: .9375rem; font-weight: 500; white-space: nowrap; transition: background-color .3s, color .3s, box-shadow .3s; }
.hs-chip .ph { font-size: 20px; color: var(--accent); transition: color .3s; }
.hs-chip:hover span { box-shadow: inset 0 0 0 1.5px var(--accent); }
.hs-chip input:checked + span { background: var(--grad); color: #fff; box-shadow: var(--sh-glow); }
.hs-chip input:checked + span .ph { color: #fff; }
.hs-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.hs-recap { position: sticky; top: calc(var(--header) + 24px); padding: 28px; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); }
.hs-recap-k { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 700; }
.hs-recap-t { margin: 16px 0 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.hs-recap-list { list-style: none; margin: 14px 0 0; padding: 0; }
.hs-recap-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: .9375rem; animation: hs-in .45s var(--ease); }
.hs-recap-list .ph { margin-top: 2px; color: var(--accent); font-size: 18px; }
.hs-recap-list b { display: block; font-size: .9375rem; }
.hs-recap-list span { color: var(--ink-2); }
.hs-recap-empty, .hs-recap-tip { margin: 14px 0 0; font-size: .875rem; color: var(--ink-3); }
.hs-recap-tip:empty { display: none; }
.hs-recap .btn { width: 100%; margin-top: 20px; }
.hs-recap-note { margin: 10px 0 0; text-align: center; font-size: .8125rem; color: var(--ink-3); }
@keyframes hs-in { from { opacity: 0; transform: translateY(6px); } }
.hs-more { margin-top: clamp(28px, 3vw, 40px); }
.hs-more > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: #fff; box-shadow: var(--ring); font-weight: 700; font-size: .9375rem; list-style: none; cursor: pointer; transition: box-shadow .3s; }
.hs-more > summary::-webkit-details-marker { display: none; }
.hs-more > summary:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.hs-more > summary .ph { color: var(--accent); transition: transform .35s var(--ease); }
.hs-more[open] > summary .ph { transform: rotate(45deg); }
.hs-more-in { margin-top: 24px; }
.hs-more-sm > summary { min-height: 42px; padding: 0 16px; font-size: .875rem; }

/* Détail par espace (onglets de la v1) et tableaux */
.hs-tablist { margin: 0 0 24px; overflow-x: auto; scrollbar-width: none; }
.hs-tablist::-webkit-scrollbar { display: none; }
.hs-panel[hidden] { display: none; }
.hs-table-wrap { overflow: hidden; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); }
.hs-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.hs-table thead th { padding: 14px 22px; border-bottom: 1px solid var(--line-2); text-align: left; font-size: .8125rem; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.hs-table tbody th, .hs-table td { padding: 15px 22px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.hs-table tbody tr:last-child > * { border-bottom: 0; }
.hs-table tbody th { width: 22%; font-weight: 700; }
.hs-table td { color: var(--ink-2); }
.hs-table td:last-child { color: var(--ink); font-weight: 500; }
.hs-note { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; font-size: .875rem; color: var(--ink-3); }
.hs-note .ph { flex: none; margin-top: 2px; color: var(--accent); font-size: 18px; }
.hs-note b { color: var(--ink); }
.hs-zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.hs-zones div { padding: 20px; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); }
.hs-zones dt { font-weight: 700; }
.hs-zones dd { margin: 8px 0 0; font-size: .9375rem; color: var(--ink-2); }

/* ---------- 7. Pour qui : pilules d'onglets, une photo par profil ---------- */
.hs-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.hs-pill { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--ring); font: inherit; font-size: 1rem; font-weight: 700; color: var(--ink); white-space: nowrap; cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; }
.hs-pill .ph { font-size: 20px; color: var(--accent); transition: color .3s; }
.hs-pill:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.hs-pill[aria-selected="true"] { background: var(--grad); color: #fff; box-shadow: var(--sh-glow); }
.hs-pill[aria-selected="true"] .ph { color: #fff; }
.hs-pills-sm .hs-pill { height: 44px; padding: 0 18px; font-size: .9375rem; }
.hs-who-panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 88px); align-items: center; margin-top: clamp(28px, 3vw, 44px); animation: hs-fade .6s var(--ease); }
.hs-who-panel[hidden] { display: none; }
.hs-who-ph { aspect-ratio: 5 / 4; }
.hs-who-txt h3 { font-size: clamp(1.625rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.1; letter-spacing: -.03em; }
.hs-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.hs-checks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.hs-checks .ph { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 15px; }
@keyframes hs-fade { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 8. Tarifs ---------- */
.hs-factors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hs-factors li { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); }
.hs-factors .hs-tile { margin-bottom: 10px; }
.hs-factors b { font-size: 1.0625rem; }
.hs-factors span:not(.hs-tile) { font-size: .9375rem; color: var(--ink-2); }
.hs-price { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; margin-top: 16px; }
.hs-panel-card { padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); }
.hs-rows { list-style: none; margin: 16px 0 0; padding: 0; }
.hs-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(110px, auto); align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.hs-rows .f { color: var(--ink-3); font-size: .875rem; white-space: nowrap; }
.hs-rows b { text-align: right; }
.hs-rows b small { display: block; font-size: .75rem; font-weight: 500; color: var(--ink-3); }
.hs-checklist { list-style: none; margin: 14px 0 0; padding: 0; }
.hs-checklist label { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); cursor: pointer; }
.hs-checklist label > * { min-width: 0; }
.hs-checklist input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hs-box { width: 24px; height: 24px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color .25s, box-shadow .25s; display: grid; place-items: center; }
.hs-box::after { content: ""; width: 10px; height: 6px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); transition: transform .3s var(--ease); }
.hs-checklist input:checked + .hs-box { background: var(--grad); box-shadow: none; }
.hs-checklist input:checked + .hs-box::after { transform: rotate(-45deg) scale(1); }
.hs-checklist input:focus-visible + .hs-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.hs-checklist b { color: var(--ink); font-weight: 700; }
.hs-score { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.hs-score-n { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.hs-score-n b { color: var(--ink); }
.hs-score-bar { position: relative; flex: 1; height: 8px; border-radius: 999px; background: #E8F0F7; overflow: hidden; }
.hs-score-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--grad); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease); }
.hs-score-msg { margin: 10px 0 0; font-size: .9375rem; color: var(--ink-2); }
.hs-docs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hs-docs li { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); font-size: .9375rem; color: var(--ink-2); }
.hs-docs b { display: block; color: var(--ink); }
.hs-cta-deep { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 16px; padding: clamp(28px, 3.4vw, 48px); border-radius: var(--r2); background: var(--deep); color: #fff; }
.hs-cta-deep::before { content: ""; position: absolute; right: -8%; top: -80%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(28, 159, 220, .35), transparent 65%); pointer-events: none; }
.hs-cta-deep p { position: relative; margin: 0; max-width: 32ch; font-size: clamp(1.25rem, 1rem + .6vw, 1.625rem); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.hs-cta-deep .btn { position: relative; }

/* ---------- 9. Méthode ---------- */
.hs-met { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.hs-met-side { grid-column: 1 / 6; position: sticky; top: calc(var(--header) + 32px); padding-right: 24px; }
.hs-met-ph { margin-top: 28px; aspect-ratio: 4 / 4.2; max-height: 460px; }
.hs-met-main { grid-column: 7 / 13; }
.hs-steps { position: relative; list-style: none; margin: 0; padding: 0; }
.hs-steps::before, .hs-steps::after { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px; background: #DCE8F2; }
.hs-steps::after { background: linear-gradient(180deg, #0E84C4, #0B5A8A); transform-origin: top; }
.hs-steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; padding-bottom: 30px; }
.hs-steps li:last-child { padding-bottom: 0; }
.hs-steps .hs-tile { position: relative; z-index: 1; font-size: 1rem; }
.hs-steps h3 { padding-top: 5px; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.02em; }
.hs-steps p { margin: 6px 0 0; max-width: 34em; color: var(--ink-2); }
.hs-week { margin-top: 40px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r2); background: var(--soft); box-shadow: var(--ring); }
.hs-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.hs-days button { height: 48px; border: 0; border-radius: 14px; background: #fff; box-shadow: var(--ring); font: inherit; font-size: .9375rem; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; }
.hs-days button:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.hs-days button[aria-pressed="true"] { background: var(--grad); color: #fff; box-shadow: var(--sh-glow); }
.hs-day-txt { margin: 16px 0 0; min-height: 3.1em; padding: 16px 18px; border-radius: 14px; background: #fff; font-size: .9375rem; color: var(--ink); }

/* ---------- 10. Matériaux ---------- */
.hs-mat { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.hs-mat-ph { aspect-ratio: 4 / 5; max-height: 680px; }
.hs-mat-txt .hs-pills { margin-top: 24px; }
.hs-mat-card { margin-top: 18px; padding: 24px; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); animation: hs-fade .5s var(--ease); }
.hs-mat-card[hidden] { display: none; }
.hs-mat-card p { margin: 0; color: var(--ink); }
.hs-mat-card p + p { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.hs-mat-k { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .8125rem; font-weight: 700; color: var(--accent-ink); }
.hs-mat-k .ph { font-size: 18px; }
.hs-mat-ko { color: #A0511A; }
.hs-config { list-style: none; margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hs-config li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); font-size: .9375rem; color: var(--ink-2); }
.hs-config b { display: block; color: var(--ink); }

/* ---------- 11. Villes ---------- */
.hs-villes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.hs-villes-side { grid-column: 1 / 6; padding-right: 32px; }
.hs-cities { grid-column: 6 / 13; }
.hs-cities .zsearch { margin-top: 0; height: 3.5rem; border-radius: 999px; background: #fff; box-shadow: var(--sh-card); }
.hs-cities .zsearch:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent), var(--sh-card); }
.hs-cities .ztiles { margin-top: 16px; gap: 10px; }
.hs-cities .ztiles a { border-radius: var(--r-sm); background: #fff; box-shadow: var(--sh-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .2s; }
.hs-cities .ztiles a:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); }
.hs-cities .ztiles .hq a { background: var(--grad); color: #fff; }
.hs-cities .ztiles .hq small, .hs-cities .ztiles .hq a:hover b { color: rgba(255, 255, 255, .85); }
.hs-cities .zempty { margin-top: 16px; border-radius: var(--r-sm); background: var(--soft); }

/* ---------- 12. FAQ et mots du métier ---------- */
.hs-faq-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.hs-faq-side { grid-column: 1 / 6; position: sticky; top: calc(var(--header) + 32px); padding-right: 32px; }
.hs-faq-col { grid-column: 6 / 13; }
.hs-faq { padding: 6px 28px; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); }
.hs-faq details + details { border-top: 1px solid var(--line); }
.hs-faq summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 20px 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; list-style: none; cursor: pointer; transition: color .2s; }
.hs-faq summary::-webkit-details-marker { display: none; }
.hs-faq summary:hover { color: var(--accent-ink); }
.hs-faq summary .ph { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -3px; border-radius: 50%; background: #E8F0F7; color: var(--accent-ink); font-size: 16px; transition: transform .4s var(--ease), background-color .3s, color .3s; }
.hs-faq details[open] summary .ph { transform: rotate(45deg); background: var(--grad); color: #fff; }
.hs-faq-a p { margin: -6px 0 22px; max-width: 36em; color: var(--ink-2); }
.hs-faq.is-short details:nth-of-type(n+7) { display: none; }
.hs-more-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 16px; padding: 0 22px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--ring); font: inherit; font-weight: 700; font-size: .9375rem; color: var(--ink); cursor: pointer; transition: box-shadow .3s; }
.hs-more-btn:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.hs-more-btn .ph { color: var(--accent); }
.hs-lex { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.hs-lex-terms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hs-lex-terms button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--ring); font: inherit; font-size: .875rem; font-weight: 500; color: var(--ink); cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; }
.hs-lex-terms button:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.hs-lex-terms button[aria-pressed="true"] { background: var(--grad); color: #fff; box-shadow: none; }
.hs-lex-def { margin: 14px 0 0; padding: 18px 20px; border-radius: var(--r-sm); background: #fff; box-shadow: var(--sh-card); }
.hs-lex-def div[hidden] { display: none; }
.hs-lex-def dt { font-weight: 700; }
.hs-lex-def dd { margin: 6px 0 0; font-size: .9375rem; color: var(--ink-2); }

/* ---------- 13. Devis : fin forte sur fond profond ---------- */
.hs-deep { background: var(--deep); color: #fff; }
.hs-deep::before { content: ""; position: absolute; left: -12%; top: -30%; width: min(60vw, 1000px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(28, 159, 220, .28), transparent 65%); pointer-events: none; }
.hs-deep .hs-h2 { color: #fff; }
.hs-deep .g { background-image: var(--grad-light); }
.hs-deep .hs-lead { color: rgba(255, 255, 255, .86); }
.hs-deep .facts { border-top-color: rgba(255, 255, 255, .22); }
.hs-deep .facts div { border-bottom-color: rgba(255, 255, 255, .22); }
.hs-deep .facts dt { color: rgba(255, 255, 255, .66); }
.hs-deep .facts dd { color: #fff; }
.hs-deep .quote-call { color: rgba(255, 255, 255, .78); }
.hs-deep .quote-call a { color: #fff; border-bottom-color: rgba(255, 255, 255, .4); }
.hs-deep .quote-call a:hover { color: #CFE9F8; }
.hs-mini-proof { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #fff; font-size: .9375rem; }
.hs-mini-proof .stars { color: #FBBC05; font-size: .875rem; }
.hs-mini-proof:hover { background: rgba(255, 255, 255, .16); }
/* La carte du formulaire est blanche : elle ne doit pas hériter du texte blanc du fond profond. */
.hs-deep .qcard { color: var(--ink); border-radius: var(--r2); box-shadow: var(--sh-deep); }
.qmode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 28px; padding: 4px; border-radius: 999px; background: var(--bg); }
.qmode button { height: 2.75rem; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: .9375rem; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: background-color .25s, color .25s; }
.qmode button[aria-selected="true"] { background: var(--surface); color: var(--form-dark); box-shadow: var(--sh-card); }
.qmode button:focus-visible { outline-color: var(--form); }
.qsub { margin: 10px 0 0; color: var(--ink-2); }
.qlab em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.qbtn[disabled] { opacity: .6; cursor: progress; }
.qbtn, .qbtn-ghost { border-radius: 999px; }
.hs-besoin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(14, 118, 33, .06); box-shadow: inset 0 0 0 1px rgba(14, 118, 33, .2); font-size: .875rem; color: var(--ink); }
.hs-besoin .ph { color: var(--form); font-size: 18px; }
.hs-besoin a { color: var(--form-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hs-besoin[hidden] { display: none; }

/* ---------- Contact flottant (ordinateur) ---------- */
/* Deux pastilles rondes au milieu du bord droit, dans la marge : elles ne couvrent plus le contenu.
   Le libellé se déplie au survol ou au clavier. */
.hs-fab { position: fixed; right: 16px; top: 50%; z-index: 65; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; opacity: 0; transform: translate(12px, -50%); pointer-events: none; transition: opacity .4s, transform .5s var(--ease); }
.hs-fab.is-on { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.hs-fab a { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; height: 52px; min-width: 52px; padding: 0 16px; border-radius: 999px; font-size: .9375rem; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-lift); font-variant-numeric: tabular-nums; transition: gap .45s var(--ease), filter .25s, color .25s; }
.hs-fab a span { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .45s var(--ease), opacity .3s; }
.hs-fab a:hover, .hs-fab a:focus-visible { gap: 10px; }
.hs-fab a:hover span, .hs-fab a:focus-visible span { max-width: 220px; opacity: 1; }
.hs-fab .ph { flex: none; font-size: 20px; }
.hs-fab-tel { background: #fff; color: var(--ink); }
.hs-fab-tel .ph { color: var(--accent); }
.hs-fab-tel:hover { color: var(--accent-ink); }
.hs-fab-devis { background: var(--grad); color: #fff; }
.hs-fab-devis:hover { filter: brightness(1.08); }

/* ---------- Mouvement (« seulement si ça fait luxe ») : apparitions lentes, une fois, opacité et transformation ---------- */
html.js .p92 [data-reveal], html.js .p92 [data-reveal-item] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
html.js .p92 .is-in[data-reveal], html.js .p92 .is-in[data-reveal-item] { opacity: 1; transform: none; }
html.js .p92 [data-reveal-photo] { opacity: 0; transition: opacity 1.1s var(--ease); }
html.js .p92 .is-in[data-reveal-photo] { opacity: 1; }
/* La ligne de la méthode se trace avec la lecture (navigateurs compatibles), sinon elle est pleine */
@supports (animation-timeline: view()) {
  html.js .p92 .hs-steps::after { animation: hs-line linear both; animation-timeline: view(); animation-range: entry 40% cover 70%; }
  @keyframes hs-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
@media (prefers-reduced-motion: reduce) {
  html.js .p92 [data-reveal], html.js .p92 [data-reveal-item], html.js .p92 [data-reveal-photo], html.js .p92 [data-reveal-photo] img { opacity: 1; transform: none; clip-path: none; transition: none; }
  .p92 .hs-steps::after { animation: none; }
  .p92 *, .p92 *::before, .p92 *::after { animation-duration: .01ms !important; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1023px) {
  .hs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-svc-card { width: calc((var(--cw) - var(--cg)) / 2); }
  .hs-comp { grid-template-columns: 1fr; }
  .hs-recap { position: static; }
  .hs-factors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hs-price { grid-template-columns: 1fr; }
  .hs-docs { grid-template-columns: 1fr; }
  .hs-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-config { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Jusqu'à 1279 px, la marge droite est trop étroite pour le contact flottant : la barre d'action du bas prend le relais */
@media (max-width: 1279px) {
  .hs-fab { display: none; }
  .p92 .mbar { display: grid; }
  body.p92 { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 899px) {
  .hs-prom { grid-template-columns: 1fr; }
  .hs-duo { height: clamp(300px, 76vw, 520px); }
  .hs-float { top: auto; bottom: -18px; right: 12px; }
  .hs-who-panel { grid-template-columns: 1fr; }
  .hs-who-ph { aspect-ratio: 16 / 10; }
  .hs-mat { grid-template-columns: 1fr; }
  .hs-mat-ph { aspect-ratio: 16 / 10; }
  .hs-met, .hs-villes, .hs-faq-wrap { display: block; }
  .hs-met-side, .hs-faq-side { position: static; padding-right: 0; }
  .hs-met-side { margin-bottom: 36px; }
  .hs-met-ph { aspect-ratio: 16 / 10; max-height: none; }
  .hs-villes-side { padding-right: 0; margin-bottom: 28px; }
  .hs-faq-side { margin-bottom: 28px; }
  .hs-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}

/* ---------- Mobile composé : deux carrousels (atouts, prestations), le reste en grilles serrées ---------- */
@media (max-width: 767px) {
  .hs-cards {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 28px; scroll-padding-inline: var(--gutter);
  }
  .hs-cards::-webkit-scrollbar { display: none; }
  .hs-cards > li { flex: 0 0 80%; scroll-snap-align: start; }
  .hs-atouts-head { flex-direction: column; align-items: flex-start; }
  .hs-switch { width: 100%; grid-auto-columns: 1fr; }
  .hs-svc-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hs-arrow { width: 44px; height: 44px; }
  .hs-track { --cg: 12px; padding-bottom: 32px; }
  .hs-svc-card { width: calc(var(--cw) * .86); }
  .hs-also { grid-template-columns: 1fr; }
  .hs-also .btn { width: 100%; }
  .hs-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-pick { flex-direction: row; align-items: center; gap: 12px; padding: 14px; }
  .hs-pick .hs-tile { --tile: 44px; border-radius: var(--r-sm); font-size: 22px; }
  .hs-chip span { min-height: 44px; padding: 0 14px; }
  .hs-pills:not(.hs-pills-sm) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; }
  .hs-pills::-webkit-scrollbar { display: none; }
  .hs-pill { height: 46px; padding: 0 18px; }
  .hs-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hs-factors li { padding: 16px; }
  .hs-factors li:last-child { grid-column: 1 / -1; }
  .hs-factors .hs-tile { --tile: 44px; border-radius: var(--r-sm); font-size: 22px; margin-bottom: 4px; }
  .hs-rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .hs-rows .f { grid-column: 1; grid-row: 2; margin-top: -10px; }
  .hs-rows b { grid-row: 1 / 3; grid-column: 2; }
  .hs-days { gap: 4px; }
  .hs-days button { height: 44px; font-size: .8125rem; border-radius: var(--r-sm); }
  .hs-config { grid-template-columns: 1fr; gap: 10px; }
  .hs-config li { padding: 14px 16px; }
  .hs-faq { padding: 2px 20px; }
  .hs-faq summary { font-size: 1rem; padding: 18px 0; }
  .hs-cta-deep .btn { width: 100%; }
  .hs-zones { grid-template-columns: 1fr; }
  /* Tableaux dépliés : chaque ligne devient une fiche */
  .hs-table, .hs-table tbody, .hs-table tr, .hs-table th, .hs-table td { display: block; width: auto !important; }
  .hs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hs-table tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .hs-table tbody tr:last-child { border-bottom: 0; }
  .hs-table tbody th { padding: 0 0 6px; border: 0; }
  .hs-table td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 4px 0 0; border: 0; font-size: .9375rem; }
  .hs-table td::before { content: attr(data-l); font-size: .8125rem; color: var(--ink-3); }
}
@media (max-width: 560px) {
  /* Mobile : la méthode se lit sans sa photo, les situations de bâtiment tiennent sur une grille de 2 */
  .hs-met-ph { display: none; }
  .hs-met-side { margin-bottom: 28px; }
  .hs-config { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-config li { flex-direction: column; gap: 10px; padding: 14px; }
  .hs-config li span:not(.hs-tile) { font-size: .8125rem; }
  .hs-act { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .hs-act .btn { width: 100%; }
  .hs-act .tel-link { justify-content: center; }
  .hs-nums .n { font-size: 2.75rem; }
  .hs-float { padding: 10px 14px 10px 10px; }
}

/* ===== v3 (27/10) : brief en 8 points ===== */
/* Mode revue (?revue=1) : ce qu'ALS doit confirmer ou fournir. Hors mode revue, ces contenus n'existent pas pour le visiteur :
   la version normale n'affirme rien qui ne soit vérifié. */
html:not(.revue) .tbc-txt, html:not(.revue) [data-tbc] { display: none !important; }
.hs-revue-bar { padding-block: 10px; background: #FFF4E0; border-bottom: 1px solid #EDBF77; font-size: .875rem; color: #5C3A00; }
.hs-revue-bar a { margin-left: 8px; font-weight: 700; color: #7A4A00; text-decoration: underline; text-underline-offset: 3px; }
.hs-revue-link { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.hs-revue-link:hover { color: var(--ink); }
.hs-todo { margin-top: 28px; padding: 20px 24px; border-radius: var(--r2); border: 1.5px dashed rgba(255, 255, 255, .42); font-size: .9375rem; color: rgba(255, 255, 255, .9); }
.hs-todo p { margin: 0; }
.hs-todo ul { margin: 10px 0 0; padding-left: 1.2em; }
.hs-todo li + li { margin-top: 4px; }

/* Suivi qualité, concrètement */
.hs-qual { margin-top: 40px; }
.hs-qual-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hs-qual-list li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); font-size: .9375rem; color: var(--ink-2); }
.hs-qual-list b { display: block; color: var(--ink); }

/* Composeur : la reprise dans le formulaire est annoncée, en vert comme le formulaire */
.hs-recap-sync { display: none; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .8125rem; color: var(--form-dark); }
.hs-recap-sync.is-on { display: flex; }
.hs-recap-sync .ph { flex: none; color: var(--form); font-size: 16px; }
.qform.has-besoin [data-prest] { display: none; }
.f input::placeholder { color: var(--ink-3); opacity: .75; }

/* Cibles tactiles d'au moins 44 px */
.hs-act .tel-link, .hs-act .lnk { min-height: 44px; }
.hs-also li > a, .hs-also li > span { height: 44px; }
.hs-tablist .tab { min-height: 44px; padding-top: 10px; }
.hs-more-sm > summary { min-height: 44px; }
.hs-lex-terms button { min-height: 44px; }
@media (max-width: 767px) {
  .hs-week { padding: 18px 14px; }
  .hs-days { gap: 3px; }
  .hs-qual-list { grid-template-columns: 1fr; }
}

/* Pied de page et preuve : cibles tactiles plus confortables (au moins 24 px, 44 px pour les liens isolés) */
.p92 .ftr li a { display: inline-block; padding-block: 4px; }
.p92 .ftr-rating, .hs-mini-proof { min-height: 44px; }

/* Très petits écrans (320 px) : le composeur ne doit jamais dépasser ; les étiquettes longues passent à la ligne */
.hs-comp { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); }
@media (max-width: 1023px) { .hs-comp { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .hs-chip span { white-space: normal; padding-block: 8px; line-height: 1.25; } .hs-picks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hs-pick b { font-size: .9375rem; } }

/* Numérotation des prestations par compteur CSS : une carte masquée (mode revue) ne laisse pas de trou dans la suite */
.hs-track { counter-reset: svc; }
.hs-svc-card { counter-increment: svc; }
.hs-svc-card .svc-n::before { content: counter(svc, decimal-leading-zero); }

/* ===================== v4 (27/10) : « tout à 10/10 » ===================== */

/* ---------- Typographie : Satoshi partout, mots-clés des titres en italique Gambetta (choix de l'utilisateur) ---------- */
.p92 .hero-h1 { font-weight: 500; letter-spacing: -.04em; }
.hs-h2 { font-size: var(--fs-2xl); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.p92 .hero-h1 .nw, .hs-h2 .g { font-family: var(--serif-it); font-style: italic; font-weight: 500; letter-spacing: -.01em; padding-right: .06em; }
.hs-band-h { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.03em; }
.hs-who-txt h3, .hs-cta-deep p { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.03em; }
.hs-nums .n { font-weight: 500; letter-spacing: -.05em; font-size: var(--fs-display); }
.hs-lead, .hs-recap-t, .hs-h3, .hs-card h3, .hs-svc-txt h3, .hs-steps h3, .hs-fold-h { font-size: var(--fs-lg); }
.hs-step legend, .hs-pick b, .hs-factors b { font-size: var(--fs-base); }
.hs-pill, .hs-pills-sm .hs-pill { font-size: var(--fs-sm); }
.hs-score-n { font-size: var(--fs-xl); }
.hs-assure, .hs-note, .hs-recap-empty, .hs-recap-tip, .hs-besoin, .hs-step-k, .hs-rows .f, .hs-rows b small, .hs-nums .l,
.hs-lex-terms button, .hs-more-sm > summary, .svc-n, .hs-ph figcaption, .hs-count { font-size: var(--fs-xs); }
/* Éléments partagés avec l'accueil B, alignés sur l'échelle de cette page */
.p92 .hero-sub { font-size: var(--fs-lg); }
.p92 .hb b { font-size: var(--fs-base); }
.p92 .assure, .p92 .proof-label, .p92 .qstate, .p92 .qnote { font-size: var(--fs-xs); }
.p92 .ftr li, .p92 .ftr address, .p92 .f > span, .p92 .qlab, .p92 .facts dt { font-size: var(--fs-sm); }
.p92 .f input, .p92 .f textarea, .p92 .zsearch input, .p92 .quote-call { font-size: var(--fs-base); }
.p92 .qform-title, .p92 .qdone h3 { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.03em; }
.p92 .ztiles-92 b { font-size: var(--fs-sm); }
/* Texte clair sur fond profond : un peu plus d'interligne et d'air (lisibilité) */
.hs-band, .hs-deep .quote-side { line-height: 1.62; letter-spacing: .005em; }

/* ---------- Moins de cartes : un seul panneau pour les facteurs de prix, des listes à filets ailleurs ---------- */
.hs-factors { gap: 0; overflow: hidden; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); }
.hs-factors li { padding: 26px 24px; border-radius: 0; background: none; box-shadow: none; }
.hs-factors li + li { border-left: 1px solid var(--line); }
.hs-docs li, .hs-config li, .hs-qual-list li, .hs-zones div { padding: 18px 0 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--line-2); }
.hs-docs, .hs-config, .hs-qual-list { column-gap: 32px; row-gap: 22px; }
.hs-cities .zempty, .hs-lex-def { border-radius: var(--r2); }

/* ---------- Ouvertures de section variées : les profils s'ouvrent au centre ---------- */
@media (min-width: 768px) {
  .hs-head-c { margin-inline: auto; text-align: center; }
  .hs-head-c .hs-h2 { margin-inline: auto; }
  #pour-qui .hs-pills { justify-content: center; }
}

/* ---------- Matériaux : un moment photo plein cadre, la carte de choix posée dessus ---------- */
.hs-mat { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; min-height: clamp(620px, 48vw, 880px); }
.hs-mat-ph { position: absolute; top: 0; bottom: 0; left: calc((100% - 100vw) / 2); width: calc(56% + (100vw - 100%) / 2); max-height: none; aspect-ratio: auto; border-radius: 0 var(--r2) var(--r2) 0; box-shadow: none; }
.hs-mat-txt { grid-column: 7 / 13; position: relative; z-index: 1; padding: clamp(28px, 3vw, 44px); border-radius: var(--r2); background: #fff; box-shadow: var(--sh-hover); }
.hs-mat-txt .hs-h2 { max-width: 16ch; }
.hs-mat-card { margin-top: 18px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.hs-mat-card p + p { border-top-color: var(--line-2); }
#materiaux .hs-fold { margin-top: clamp(48px, 5vw, 72px); }
#materiaux .hs-config { margin-top: 0; }

/* ---------- Blocs repliables : titres sur ordinateur, accordéons sur mobile ---------- */
.hs-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: default; }
.hs-fold > summary::-webkit-details-marker { display: none; }
.hs-fold > summary .ph { display: none; }
.hs-fold-h { margin: 0 0 18px; font-weight: 700; letter-spacing: -.02em; }
#tarifs .hs-fold { margin-top: clamp(36px, 4vw, 52px); }
.hs-lex.hs-fold > summary { margin-bottom: 14px; }

/* ---------- Composeur : progression visible et étapes cochées ---------- */
.hs-recap-prog { display: block; height: 4px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: #E8F0F7; }
.hs-recap-prog i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease); }
.hs-step-k { position: relative; transition: color .25s; }
.hs-step-k::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 6px; margin: -5px 0 0 -5.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; opacity: 0; transform: rotate(-45deg) scale(.6); transition: opacity .25s, transform .35s var(--ease); }
.hs-step.is-done .hs-step-k { color: transparent; }
.hs-step.is-done .hs-step-k::before { opacity: 1; transform: rotate(-45deg); }

/* ---------- Mouvement : entrée du premier écran, fondus entre états (luxe = lent, doux, une fois) ---------- */
@keyframes hs-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes hs-settle { from { transform: translate3d(0, 18px, 0) scale(.985); } }
@media (prefers-reduced-motion: no-preference) {
  html.js .p92 .hero-txt > * { animation: hs-rise .9s var(--ease) both; }
  html.js .p92 .hero-txt > :nth-child(2) { animation-delay: .08s; }
  html.js .p92 .hero-txt > :nth-child(3) { animation-delay: .16s; }
  html.js .p92 .hero-txt > :nth-child(4) { animation-delay: .22s; }
  html.js .p92 .hero-txt > :nth-child(5) { animation-delay: .28s; }
  /* Photos : mouvement seul, sans opacité, pour ne pas retarder l'affichage de la grande image (LCP) */
  html.js .p92 .hero-mosaic .hm { animation: hs-settle 1.3s var(--ease) both; }
  html.js .p92 .hero-mosaic .hm-a { animation-delay: .1s; }
  html.js .p92 .hero-mosaic .hm-b { animation-delay: .2s; }
  .p92 .qcard .qform:not([hidden]) { animation: hs-fade .5s var(--ease); }
  .p92 .hs-faq details[open] .hs-faq-a, .p92 .hs-panel:not([hidden]), .p92 .hs-lex-def div:not([hidden]) { animation: hs-fade .45s var(--ease); }
}
/* Ligne de la méthode : tracée au défilement là où le navigateur le permet, sinon une fois à l'arrivée */
@supports not (animation-timeline: view()) {
  html.js .p92 .hs-steps::after { transform: scaleY(0); transition: transform 1.8s var(--ease); }
  html.js .p92 .hs-steps.is-drawn::after { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .p92 .hs-steps::after { transition: none; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1023px) {
  .hs-factors li:nth-child(3n + 1) { border-left: 0; }
  .hs-factors li:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .hs-mat-txt { grid-column: 5 / 13; }
}
/* ---------- Mobile ---------- */
@media (max-width: 899px) {
  .hs-mat { display: block; min-height: 0; }
  .hs-mat-ph { position: relative; left: auto; width: auto; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; aspect-ratio: 4 / 3; }
  .hs-mat-txt { margin-top: -64px; }
}
@media (max-width: 767px) {
  .hs-sec, .hs-band { padding-block: 56px; }
  .hs-factors li { border-left: 0 !important; border-top: 1px solid var(--line); }
  .hs-factors li:nth-child(-n + 2) { border-top: 0; }
  .hs-factors li:nth-child(even) { border-left: 1px solid var(--line) !important; }
  .hs-factors li:last-child { border-left: 0 !important; }
  .hs-fold > summary { min-height: 52px; padding: 0 20px; border-radius: 999px; background: #fff; box-shadow: var(--ring); font-size: var(--fs-sm); cursor: pointer; margin-bottom: 0; }
  .hs-fold > summary .ph { display: block; flex: none; color: var(--accent); font-size: 18px; transition: transform .35s var(--ease); }
  .hs-fold[open] > summary { margin-bottom: 16px; }
  .hs-fold[open] > summary .ph { transform: rotate(180deg); }
  .hs-lex { margin-top: 28px; padding-top: 0; border-top: 0; }
  .hs-mat-txt { padding: 22px; }
}

/* ---------- v4.1 : derniers écarts mesurés ---------- */
/* Boutons, barre mobile et numéros d'étape sur le cran de 15 px (ils étaient à 16, hors échelle) */
.p92 .btn, .p92 .mbar a, .hs-steps .hs-tile { font-size: var(--fs-sm); }
/* Légende « Photo d'illustration » du premier écran sur le plus petit cran (10-11 px, illisible) */
.p92 .hm figcaption { font-size: var(--fs-xs); }
/* Unités des grands chiffres (« /5 », « h ») sur un cran de l'échelle */
.hs-nums .n small { font-size: var(--fs-xl); }
/* Exposants (« 1er ») lisibles : la moitié de 13 px tombait à 6,5 px */
.p92 sup { font-size: .75em; line-height: 0; }
/* Lignes de lecture à 66 caractères environ */
.hs-head p, .hs-p, .hs-faq-a p { max-width: 31em; }
.hs-note { max-width: 30rem; }
.p92 .qbtn { font-size: var(--fs-sm); }
.hs-faq summary { font-size: var(--fs-base); }
.hs-panel table { max-width: 56rem; }

/* ===================== v5 (27/10) : retours du relecteur indépendant ===================== */

/* ---------- Contrastes AA mesurés au pixel (relecteur) puis recalculés ----------
   Le texte blanc des boutons passait à 3,9:1 sur la fin claire du dégradé (#1C9FDC) : la fin s'arrête à #0D7BBA (4,6:1),
   le centre, où se pose le texte, reste à #0B6CA2 (5,7:1). Fonds profonds : dégradé arrêté à #0B5A8A, lueur ramenée à 20 %,
   blancs secondaires à 86 % au moins (4,8:1 au pire endroit au lieu de 3,4 à 3,7). */
.p92 {
  --grad: linear-gradient(135deg, #0E3553 0%, #0B6CA2 55%, #0D7BBA 100%);
  --deep: linear-gradient(135deg, #0A2740 0%, #0E3553 40%, #0B5A8A 100%);
  --soft: linear-gradient(180deg, #E9F1F8 0%, #F3F8FC 100%);
  --fs-xs: .875rem;
}
.hs-band-glow { opacity: .57; }
.hs-nums .l, .hs-band-foot, .hs-deep .facts dt { color: rgba(255, 255, 255, .86); }
.hs-deep .quote-call { color: rgba(255, 255, 255, .9); }
.hs-cities .ztiles .hq small, .hs-cities .ztiles .hq a:hover b { color: #fff; }
/* Anneau de focus visible sur les fonds profonds */
.hs-band :focus-visible, .hs-deep .quote-side :focus-visible, .hs-cta-deep :focus-visible { outline-color: #fff; }
/* Champs du formulaire : un bord visible (3,3:1) au lieu d'un fond à peine teinté (1,1:1) */
.p92 .f input, .p92 .f textarea { box-shadow: inset 0 0 0 1px #8A9099; }
.p92 .f input:focus, .p92 .f textarea:focus { box-shadow: inset 0 0 0 1.5px var(--form); }
.p92 .f input.is-bad { box-shadow: inset 0 0 0 1.5px var(--error); }

/* ---------- Formulaire : après l'envoi, plus rien au-dessus du « Merci » ([hidden] écrasé par display:grid/flex) ---------- */
.p92 .qcard [hidden] { display: none !important; }

/* ---------- Typographie ---------- */
.p92 sup { vertical-align: super; }
.p92 b, .p92 strong { font-weight: 700; }
.hs-nums .n { white-space: nowrap; }
@media (max-width: 400px) { .hs-nums .n { font-size: clamp(2.5rem, 12vw, 3rem); } }

/* ---------- Mouvement : plus court, et plus de soulèvement sur ce qui ne se clique pas ---------- */
html.js .p92 [data-reveal], html.js .p92 [data-reveal-item] { transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
html.js .p92 [data-reveal-photo] { transition: opacity .7s var(--ease); }
/* Cartes de prestation : toute la carte mène à la page (elle se soulevait sans être cliquable) */
.hs-svc-card { position: relative; }
.hs-svc-card .lnk::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hs-svc-card .lnk:focus-visible { outline: none; }
.hs-svc-card:has(.lnk:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Atouts : une liste à filets, plus une grille de six cartes identiques ---------- */
.hs-cards { column-gap: clamp(28px, 3vw, 44px); row-gap: clamp(32px, 3.4vw, 44px); }
.hs-card { padding: 26px 0 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--line-2); }
.hs-card:hover { transform: none; box-shadow: none; }
.hs-card h3 { margin-top: 18px; }

/* ---------- Repères : ce qui fait varier le prix, en clair ---------- */
.hs-rows .v { text-align: right; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.35; }
@media (max-width: 767px) { .hs-rows .v { grid-row: 1 / 3; grid-column: 2; max-width: 15ch; } }

/* ---------- Photos : cadrage des nouvelles images ---------- */
.hs-mat-ph img { object-position: 50% 72%; }
.hs-met-ph img { object-position: 50% 62%; }

/* ---------- Puces du composeur : 3 par ligne, plus de puce orpheline ---------- */
.hs-chips-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hs-chips-seg .hs-chip span { width: 100%; justify-content: center; text-align: center; white-space: normal; text-wrap: balance; line-height: 1.25; padding-block: 8px; }

/* ---------- Contact : boutons flottants seulement là où la marge les accueille, barre du bas seulement sans en-tête complet ---------- */
@media (max-width: 1439px) { .hs-fab { display: none; } }
@media (min-width: 960px) {
  .p92 .mbar { display: none; }
  body.p92 { padding-bottom: 0; }
}

/* ---------- Villes : sur mobile, 6 communes puis « Voir les 16 » ---------- */
.hs-cities-all { display: none; }

/* ---------- Composeur sur mobile : la barre qui suit les choix ---------- */
.hs-cbar { display: none; }

@media (max-width: 959px) {
  .hs-cbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 71; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 12px 12px 12px 18px; border-radius: var(--r2); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); box-shadow: var(--sh-hover); transform: translateY(calc(100% + 28px)); transition: transform .5s var(--ease); }
  .hs-cbar.is-on { transform: none; }
  .hs-cbar-t { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; line-height: 1.3; }
  .hs-cbar-t span { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
  .hs-cbar-t b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-sm); }
  .hs-cbar-go { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--grad); color: #fff; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
  .hs-cbar-prog { grid-column: 1 / -1; grid-row: 2; display: block; height: 3px; overflow: hidden; border-radius: 999px; background: #E8F0F7; }
  .hs-cbar-prog i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transform-origin: left; transform: scaleX(.5); transition: transform .6s var(--ease); }
  body.p92.has-cbar .mbar { transform: translateY(110%); }
}
@media (max-width: 899px) {
  /* Questions : sur mobile, le lexique passe après la liste au lieu de s'intercaler entre le titre et les questions */
  .hs-faq-wrap { display: flex; flex-direction: column; }
  .hs-faq-side { display: contents; }
  .hs-faq-col { order: 1; margin-top: 28px; }
  .hs-faq-side .hs-lex { order: 2; margin-top: 28px; }
}
@media (max-width: 767px) {
  .hs-cities:not(.is-all) .ztiles-92 li:nth-child(n + 7) { display: none; }
  .hs-cities:not(.is-all) .hs-cities-all { display: inline-flex; }
}
@media (max-width: 560px) {
  /* Promesse : la carte « Un seul interlocuteur » cachait la mention et un tiers de la petite photo */
  .hs-duo { height: auto; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto; }
  .hs-duo-a { grid-row: 1; grid-column: 1 / 3; aspect-ratio: 4 / 3.3; }
  .hs-duo-b { grid-row: 2; grid-column: 1; aspect-ratio: 1; }
  .hs-float { position: static; grid-row: 2; grid-column: 2; align-self: center; }
  .hs-chips-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 370px) {
  /* Bâtiment : à 320 px, « Copropriété » et « Commerce » débordaient de leur carte */
  .hs-pick { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .hs-pick .hs-tile { --tile: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-cbar, .hs-cbar-prog i { transition: none; }
}

/* ---------- v5.1 : mobile composé (captures pleine section à 390 px) ---------- */
@media (max-width: 767px) {
  /* Atouts en carrousel : la carte blanche signale qu'on peut faire glisser (sans fond, la carte suivante semblait coupée) */
  .hs-card { padding: 22px; border-top: 0; border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); }
  /* Facteurs de prix : une liste à filets (icône, titre, précision) au lieu d'une grille où « Accès » restait seul */
  .hs-factors { grid-template-columns: minmax(0, 1fr); }
  .hs-factors li, .hs-factors li:nth-child(even), .hs-factors li:last-child { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 18px; border-left: 0 !important; border-top: 1px solid var(--line); }
  .hs-factors li:first-child { border-top: 0; }
  .hs-factors li:nth-child(2) { border-top: 1px solid var(--line); }
  .hs-factors .hs-tile { grid-row: 1 / 3; margin: 0; }
  .hs-factors b { align-self: end; }
  .hs-factors span:not(.hs-tile) { align-self: start; }
}
@media (max-width: 560px) {
  /* Devis : la pastille d'avis touchait la carte du formulaire */
  .hs-deep .hs-mini-proof { margin-bottom: 20px; }
}

/* ---------- v5.2 : les derniers textes à 13 px rejoignent le cran de 14 px ; mention légale sur deux lignes au plus ---------- */
.hs-float small, .hs-band-foot, .hs-recap-note, .hs-table thead th, .hs-mat-k, .hs-recap-sync,
.p92 .tab span, .p92 .ztiles small, .p92 .ferr, .p92 .ftr-legal, .p92 .hb small { font-size: var(--fs-xs); }
@media (max-width: 767px) { .hs-days button, .hs-table td::before, .hs-config li span:not(.hs-tile) { font-size: var(--fs-xs); } }
.hs-band-foot { max-width: 44em; }
.hs-head-lnk { margin-top: 14px; }

/* ===================== v6 (27/10) : retours du deuxième relecteur ===================== */

/* ---------- Petits titres en graisse moyenne : 200 éléments en 700 donnaient un rendu « application » ---------- */
.hs-card h3, .hs-svc-txt h3, .hs-steps h3, .hs-h3, .hs-who-txt h3, .hs-faq summary, .hs-fold-h, .hs-recap-t, .hs-also-h, .p92 .mnav nav a { font-weight: 500; }

/* ---------- Atouts : la bascule « Sans ALS / Avec ALS » change aussi le titre ---------- */
.hs-card h3 { display: grid; }
.hs-card h3 > span { grid-area: 1 / 1; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.hs-card h3 .hs-sans { opacity: 0; transform: translateY(6px); visibility: hidden; }
[data-mode="sans"] .hs-card h3 .hs-sans { opacity: 1; transform: none; visibility: visible; }
[data-mode="sans"] .hs-card h3 .hs-avec { opacity: 0; transform: translateY(6px); visibility: hidden; }

/* ---------- Composeur : le titre dans la colonne des étapes, le récapitulatif monte en face ---------- */
.hs-comp-steps > .hs-head { margin-bottom: clamp(28px, 3vw, 40px); }

/* ---------- Tarifs : titre à gauche, les cinq facteurs en liste à droite ---------- */
.hs-tar-top .hs-factors { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
.hs-tar-top .hs-factors li, .hs-tar-top .hs-factors li:nth-child(n) { grid-column: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; padding: 16px 22px; border: 0 !important; border-top: 1px solid var(--line) !important; }
.hs-tar-top .hs-factors li:first-child { border-top: 0 !important; }
.hs-tar-top .hs-factors .hs-tile { grid-row: 1 / 3; margin: 0; }
.hs-tar-top .hs-factors b { align-self: end; }
.hs-tar-top .hs-factors span:not(.hs-tile) { align-self: start; }
@media (min-width: 1024px) {
  .hs-tar-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
  .hs-tar-top .hs-head { margin-bottom: 0; }
  .hs-tar-top .hs-factors { margin-top: 0; }
}

/* ---------- Icônes : la tuile en dégradé réservée aux moments forts ; ailleurs, l'icône seule ---------- */
.hs-factors .hs-tile, .hs-docs .hs-tile, .hs-qual-list .hs-tile, .hs-config .hs-tile { --tile: auto; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: var(--accent-ink); font-size: 28px; }

/* ---------- Repères : des en-têtes de colonnes alignés sur toutes les lignes ---------- */
.hs-rows .hs-rows-h { padding: 0 0 10px; border-top: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.hs-rows .hs-rows-h span:last-child { text-align: right; }
@media (min-width: 768px) {
  .hs-rows { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(150px, auto); column-gap: 16px; }
  .hs-rows li { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
@media (max-width: 767px) { .hs-rows .hs-rows-h { display: none; } }
@media (max-width: 560px) {
  /* Une colonne : le rythme et ce qui fait le prix sous le type de bâtiment (à 320 px, ils se touchaient) */
  .hs-rows li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .hs-rows .f { grid-row: auto; grid-column: 1; margin-top: 0; white-space: normal; }
  .hs-rows .v, .hs-rows b { grid-row: auto; grid-column: 1; text-align: left; max-width: none; }
  .hs-rows b small { display: inline; margin-left: 6px; }
}

/* ---------- Fonds teintés : trois sections, un dégradé qui se fond en bas au lieu d'une arête ---------- */
.p92 { --soft: linear-gradient(180deg, #E9F1F8 0%, #F3F8FC 72%, #FFFFFF 100%); }

/* ---------- Mobile (deuxième relecture) ---------- */
@media (max-width: 899px) {
  /* Questions : en colonne, sans l'écart ni l'alignement de la grille d'ordinateur */
  .hs-faq-wrap { gap: 0; align-items: stretch; }
}
@media (max-width: 767px) {
  /* « Avec le même interlocuteur » et revêtements : un rail horizontal au lieu d'un nuage de pilules irrégulier */
  .hs-also ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter); }
  .hs-mat-txt .hs-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -22px; padding: 4px 22px 12px; scroll-padding-inline: 22px; }
  .hs-also ul::-webkit-scrollbar, .hs-mat-txt .hs-pills::-webkit-scrollbar { display: none; }
  .hs-also li, .hs-mat-txt .hs-pill { flex: none; }
}
@media (max-width: 560px) {
  /* Espaces du composeur : deux colonnes alignées, plus de « Vitres » orpheline */
  .hs-step .hs-chips:not(.hs-chips-seg) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-step .hs-chips:not(.hs-chips-seg) .hs-chip span { width: 100%; white-space: normal; line-height: 1.25; padding-block: 8px; }
}
@media (max-width: 370px) { .hs-float .hs-tile { display: none; } }

/* ---------- Accessibilité (contrastes mesurés au pixel) ---------- */
.hs-ph figcaption, .p92 .hm figcaption { background: rgba(14, 53, 83, .72); }
.hs-assure { color: var(--ink-2); }
.p92 .f input::placeholder, .p92 .f textarea::placeholder { color: var(--ink-3); opacity: 1; }
.p92 .logos img { opacity: .75; }

/* ---------- Premier écran : l'entrée se fait sans opacité (le titre devenait lisible 0,15 à 0,3 s plus tard en 4G lente) ---------- */
@keyframes hs-rise-t { from { transform: translate3d(0, 14px, 0); } }
@media (prefers-reduced-motion: no-preference) {
  html.js .p92 .hero-txt > * { animation-name: hs-rise-t; }
}

/* ---------- v6.1 ---------- */
/* Le détail des prix prend toute la largeur sous les deux cartes : dans la carte, le tableau de 734 px était coupé (colonne « Tarif ALS ») */
.hs-price + .hs-more { margin-top: 16px; }
.hs-more-in .hs-table-wrap { overflow-x: auto; }
/* Rail de pilules sur mobile : la grille ne doit pas s'élargir à la largeur du rail (le bouton sortait de l'écran) */
@media (max-width: 767px) {
  .hs-also { grid-template-columns: minmax(0, 1fr); }
  .hs-also > * { min-width: 0; }
}
@media (max-width: 360px) { .hs-cbar-go { padding: 0 14px; } .hs-cbar-go .ph { display: none; } }
/* Coin cuisine : cadrage sur l'évier et les placards (le panneau de sortie reste hors champ) */
.hs-duo-b img { object-position: 30% 82%; }
.hs-mat-ph img { object-position: 50% 50%; }
/* Exemple de semaine replié derrière un bouton (relecteur : n'aide pas à décider, allonge la page) */
.hs-week-fold { margin-top: 32px; }
.hs-week-fold .hs-week { margin-top: 0; }

/* ===================== v7 (27/10 soir) : un écran, une idée ===================== */
/* Retour de l'utilisateur : « chaque scroll doit avoir son univers… le client ne doit pas être perdu » ; « il manque du dégradé,
   une identité » (capture du site en ligne : vagues bleues derrière un titre centré). Les vagues reprennent le dessin du site
   en ligne, lui-même tiré de la goutte du logo. */
.hs-wave { position: relative; overflow: hidden; background: linear-gradient(180deg, #FFFFFF 0%, #F2F8FC 100%); }
.hs-wave::before { content: ""; position: absolute; left: 50%; top: var(--wave-top, 30%); width: 122%; height: clamp(210px, 27vw, 360px); transform: translateX(-50%); background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 360' preserveAspectRatio='none'%3E%3Cpath d='M-40 200 C320 70 560 300 880 190 C1140 100 1300 210 1500 170' fill='none' stroke='%2315AEEF' stroke-width='30' stroke-linecap='round'/%3E%3Cpath d='M-40 250 C320 130 560 350 880 240 C1140 150 1300 260 1500 220' fill='none' stroke='%230E84C4' stroke-width='24' stroke-linecap='round'/%3E%3C/svg%3E"); opacity: .13; pointer-events: none; z-index: 0; }
.hs-wave > .wrap { position: relative; z-index: 1; }
.hs-wave-top { --wave-top: 2%; }

/* ---------- Promesse : photos en quinconce (grande à gauche, carte en haut à droite, petite photo décalée vers le bas) ---------- */
@media (min-width: 900px) {
  .hs-duo { grid-template-rows: minmax(0, 1fr); height: clamp(440px, 36vw, 600px); }
  .hs-duo-a { grid-row: 1; grid-column: 1; }
  .hs-duo-b { grid-row: 1; grid-column: 2; margin-top: 34%; }
  .hs-float { top: 4%; right: 0; }
}

/* ---------- Ce qui change pour vous : un écran à part, titre centré sur les vagues ---------- */
#atouts .hs-atouts { margin-top: 0; }
#atouts .hs-atouts-head { display: block; max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
#atouts .hs-atouts-head .hs-h2 { margin-inline: auto; }
#atouts .hs-atouts-head p { margin: 14px auto 24px; max-width: 46ch; color: var(--ink-2); }
#atouts .hs-switch { margin-inline: auto; }
/* Cartes comme sur le site en ligne : blanches, filet fin, tuile d'icône claire */
#atouts .hs-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--r2); background: #fff; box-shadow: none; }
#atouts .hs-card .hs-tile { --tile: 52px; background: #E8F2FA; color: var(--accent-ink); box-shadow: none; }
#atouts .hs-card h3 { margin-top: 18px; }
@media (max-width: 767px) { #atouts .hs-card { border: 0; box-shadow: var(--sh-card); } }

/* ---------- Composeur : une question à la fois, en grand ---------- */
.hs-q { padding: clamp(22px, 2.6vw, 36px); border-radius: var(--r2); background: #fff; box-shadow: var(--sh-card); }
.hs-q-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.hs-q-count { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.hs-q-count span { color: var(--ink); font-weight: 700; }
.hs-q-dots { display: flex; gap: 6px; }
.hs-q-dots i { width: 28px; height: 4px; border-radius: 999px; background: #E3ECF4; transition: background-color .3s; }
.hs-q-dots i.on { background: var(--accent); }
.hs-q-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.hs-q-prev { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.hs-q-prev:hover { color: var(--accent-ink); }
.hs-q-prev[hidden] { display: inline-flex; visibility: hidden; }
.hs-q-next { margin-left: auto; }
html:not(.js) .hs-q-top, html:not(.js) .hs-q-nav { display: none; }
html.js .hs-q .hs-step { display: none; margin: 0; }
html.js .hs-q .hs-step.is-cur { display: block; }
html.js .hs-q .hs-step-k { display: none; }
html.js .hs-q .hs-step legend { margin-bottom: 22px; font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
/* Hauteur stable d'une question à l'autre : rien ne saute autour */
html.js .hs-q { display: flex; flex-direction: column; min-height: clamp(400px, 34vw, 470px); }
html.js .hs-q-nav { margin-top: auto; padding-top: 22px; }
@media (prefers-reduced-motion: no-preference) {
  html.js .hs-q .hs-step.is-cur { animation: hs-q-in .45s var(--ease); }
}
@keyframes hs-q-in { from { opacity: 0; transform: translate3d(16px, 0, 0); } }
/* Choix plus grands et alignés : 4 bâtiments en ligne, espaces et rythmes en grille */
.hs-q .hs-chips:not(.hs-chips-seg) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hs-q .hs-chips:not(.hs-chips-seg) .hs-chip span { width: 100%; }
.hs-q .hs-chips-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hs-q .hs-chip span { min-height: 52px; }
@media (max-width: 767px) {
  .hs-q .hs-chips:not(.hs-chips-seg), .hs-q .hs-chips-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.js .hs-q { min-height: 0; }
}
/* L'arrivée sur le formulaire se fait au niveau de la carte (sur mobile, aucun champ n'était visible).
   Pas de scroll-margin ici : html porte déjà scroll-padding-top: 84px (style.css) et les deux s'additionnaient,
   la carte s'arrêtait à 164 px du haut au lieu de 84 (mesuré le 28/10). */
/* ---------- v7.1 ---------- */
/* Ce qui change pour vous : tout l'écran tient à 1440 x 900 (la deuxième rangée de cartes était coupée) */
#atouts { padding-block: clamp(56px, 6vw, 80px); }
#atouts .hs-atouts-head { margin-bottom: clamp(24px, 3vw, 36px); }
#atouts .hs-atouts-head p { margin: 10px auto 18px; }
#atouts .hs-cards { row-gap: 18px; column-gap: 18px; }
#atouts .hs-card { padding: 24px 26px; }
#atouts .hs-card .hs-tile { --tile: 46px; font-size: 24px; }
#atouts .hs-card h3 { margin-top: 14px; }
/* Composeur sur mobile : le libellé passe sous l'icône (« Copropriété » était coupé) */
@media (max-width: 560px) {
  .hs-q .hs-pick { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .hs-q .hs-pick .hs-tile { --tile: 40px; }
}
/* Retour de l'utilisateur : « je ne te demande pas de mettre le dégradé partout » : la vague reste un seul moment, sur « Ce qui change pour vous » */
.hs-recap-list.is-long li > span > span { display: none; }
.hs-recap-list.is-long li { padding-block: 8px; }

/* ===================== v7b : jeu de couleurs, jeu des yeux ===================== */
/* Photos en zigzag sur ordinateur : premier écran à droite, puis gauche, droite, gauche, droite (sur mobile, tout reste empilé) */
@media (min-width: 900px) {
  .hs-prom { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .hs-prom .hs-duo { order: -1; }
  .hs-who-panel { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .hs-who-panel .hs-who-ph { order: 2; }
  /* Matériaux : la grande photo passe à droite, la carte à gauche */
  .hs-mat-ph { left: auto; right: calc((100% - 100vw) / 2); border-radius: var(--r2) 0 0 var(--r2); }
  .hs-mat-txt { grid-column: 1 / 7; }
}
@media (min-width: 900px) and (max-width: 1023px) { .hs-mat-txt { grid-column: 1 / 9; } }

/* Méthode en bleu profond : le deuxième moment fort de la page, entre les preuves et le devis */
.hs-met-deep { position: relative; overflow: hidden; }
.hs-met-deep > .wrap { position: relative; z-index: 1; }
.hs-met-deep .hs-p, .hs-met-deep .hs-steps p { color: rgba(255, 255, 255, .84); }
.hs-met-deep .hs-steps h3, .hs-met-deep .hs-h3, .hs-met-deep .hs-qual-list b { color: #fff; }
.hs-met-deep .hs-steps::before { background: rgba(255, 255, 255, .16); }
.hs-met-deep .hs-steps::after { background: linear-gradient(180deg, #CFE9F8, #15AEEF); }
.hs-met-deep .hs-steps .hs-tile { background: #fff; color: var(--accent-ink); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .55); }
.hs-met-deep .hs-qual-list li { color: rgba(255, 255, 255, .84); border-top-color: rgba(255, 255, 255, .18); }
.hs-met-deep .hs-qual-list .hs-tile { color: #8FD3F5; }
.hs-met-deep .hs-ph { box-shadow: var(--sh-deep); }
.hs-met-deep :focus-visible { outline-color: #fff; }
.hs-met-deep .hs-week-fold > summary { color: var(--ink); }
/* Matériaux : la liste des configurations est repliée partout ; l'écran reste la photo et la carte */
.hs-config-fold { margin-top: clamp(28px, 3vw, 40px); }
.hs-config-fold .hs-config { margin-top: 20px; }
/* Un écran par idée : prestations, profils et méthode tiennent dans un écran de 900 px de haut */
@media (min-width: 1024px) {
  #prestations, #pour-qui, #methode { padding-block: clamp(64px, 5.5vw, 84px); }
  #prestations .hs-svc-card figure { aspect-ratio: 16 / 10; }
  #methode .hs-steps li { padding-bottom: 18px; }
  #methode .hs-met-ph { max-height: 380px; }
  #pour-qui .hs-who-ph { aspect-ratio: 16 / 11; }
}
/* Méthode : le suivi qualité passe sous la photo (colonne de droite trop longue, vide à gauche) */
@media (min-width: 900px) { .hs-met-side { position: static; } .hs-met-side .hs-qual { margin-top: 28px; } .hs-met-side .hs-qual-list { grid-template-columns: 1fr 1fr; } }
/* Méthode : photo de l'heure bleue, cadrée sur la fenêtre allumée */
.hs-met-ph img { object-position: 60% 55%; }

/* ===================== v7c : emprunts aux références primées ===================== */
/* Méthode : deux photos de nuit qui se chevauchent sur le bleu profond (collage à la Velaa) */
.hs-met-duo { position: relative; margin-top: 28px; padding-bottom: 56px; }
.hs-met-duo .hs-met-a { width: 74%; margin-top: 0; }
.hs-met-duo .hs-met-b { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; box-shadow: 0 0 0 6px #0D3352, var(--sh-deep); }
.hs-met-duo .hs-met-b img { object-position: 50% 50%; }
@media (max-width: 560px) { .hs-met-duo { display: none; } }

/* Écran pause : une photo plein cadre et une phrase (Tengile, Loam House) */
.hs-pause { position: relative; display: grid; align-items: end; min-height: clamp(480px, 72vh, 760px); overflow: hidden; color: #fff; }
.hs-pause-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hs-pause::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 39, 64, 0) 30%, rgba(10, 39, 64, .78) 100%); }
.hs-pause-in { position: relative; z-index: 1; padding-block: clamp(40px, 6vw, 88px); }
.hs-pause-t { max-width: 17ch; margin: 0; font-size: clamp(2rem, 1.1rem + 2.6vw, 3.5rem); line-height: 1.08; color: #fff; }
.hs-pause-t .g { background-image: var(--grad-light); }
@media (max-width: 767px) { .hs-pause { min-height: 72vh; } .hs-pause-ph { object-position: 45% 60%; } }
/* Pause : recadrage qui sort du champ le panneau « Cabinet médical » lisible à gauche de la photo */
@media (min-width: 768px) { .hs-pause-ph { left: -16%; right: auto; width: 120%; max-width: none; } }

/* ===================== v8 : preuves vérifiables, chiffres sourcés, parcours de devis (28/10) ===================== */
/* Méthode en quatre temps : sous chaque temps, ce que le client reçoit ou vérifie, détaché par un filet */
.hs-get { display: flex; gap: 10px; align-items: flex-start; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: var(--fs-sm); line-height: 1.5; }
.hs-steps .hs-get { margin-top: 14px; }
.hs-get .ph { flex: none; margin-top: 2px; font-size: 1.125rem; color: var(--accent-ink); }
.hs-get b { font-weight: 500; color: var(--ink); }
.hs-met-deep .hs-steps .hs-get { color: rgba(255, 255, 255, .84); border-top-color: rgba(255, 255, 255, .14); }
.hs-met-deep .hs-get .ph { color: #8FD3F5; }
.hs-met-deep .hs-get b { color: #fff; }

/* Réalisations (mode revue tant qu'ALS n'a rien fourni) : Type de bâtiment > Besoin > Solution > Suivi */
.hs-real { margin-top: 40px; padding: 22px 24px; border-radius: var(--r2); border: 1.5px dashed rgba(255, 255, 255, .42); font-size: var(--fs-sm); color: rgba(255, 255, 255, .88); }
.hs-real p { margin: 8px 0 0; }
.hs-real .hs-real-h { margin: 0; color: #fff; }
.hs-real-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 16px 0 0; }
.hs-real-card + .hs-real-h { margin-top: 22px; }
.hs-real-card div { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .18); }
.hs-real-card dt { font-size: var(--fs-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #8FD3F5; }
.hs-real-card dd { margin: 4px 0 0; color: rgba(255, 255, 255, .6); }
.hs-real ul { margin: 8px 0 0; padding-left: 1.2em; }
.hs-real li + li { margin-top: 4px; }
@media (max-width: 560px) { .hs-real { padding: 18px; } .hs-real-card { grid-template-columns: minmax(0, 1fr); } }

/* Devis : échec d'envoi avec le téléphone en lien, récapitulatif de ce qui est parti */
.qerr a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.qdone-recap { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); }

/* ===================== v9 : lisibilité, moyens, villes, tarifs, devis (28/10) ===================== */
/* Textes secondaires : 15 px au lieu de 14 (légendes, notes, en-têtes de tableaux, pied de page) ; précisions des chiffres
   clés et tableaux de prix à 16 px. Mesuré à 1440 et 390 px : plus aucun texte courant sous 15 px. */
.p92 { --fs-xs: .9375rem; }
.hs-nums .l { font-size: 1rem; }
.hs-table { font-size: 1rem; }
@media (max-width: 767px) { .hs-table td { font-size: 1rem; } }

/* Méthode : les moyens, sur toute la largeur du bloc, sous les quatre temps */
.hs-moyens { grid-column: 1 / -1; margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(32px, 3.4vw, 44px); border-top: 1px solid rgba(255, 255, 255, .14); }
.hs-moyens .hs-h3 { margin: 0; }
.hs-moyens .hs-qual-list { margin-top: 20px; }
@media (min-width: 1024px) { .hs-moyens .hs-qual-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hs-met-deep .hs-moyens a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
.hs-met-deep .hs-moyens a:hover { text-decoration-color: #fff; }

.hs-moyens a[href^="mailto"] { white-space: nowrap; }
/* Mobile composé, pas empilé : les six moyens en rangée qui défile au doigt, comme les atouts (700 px empilés sinon) */
@media (max-width: 767px) {
  .hs-moyens .hs-qual-list {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
  }
  .hs-moyens .hs-qual-list::-webkit-scrollbar { display: none; }
  .hs-met-deep .hs-moyens .hs-qual-list li { flex: 0 0 80%; scroll-snap-align: start; padding: 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r2); background: rgba(255, 255, 255, .05); }
}

/* Villes : la couverture annoncée sous la recherche */
.hs-cities-hint { margin: 10px 0 0; padding-left: 20px; font-size: var(--fs-xs); color: var(--ink-2); }   /* ink-3 sur le bleu clair : 4,3:1, sous le seuil AA */

/* Tarifs : deux familles dans les repères (régulier sous contrat, ponctuel sur devis) */
.hs-rows .hs-rows-g { display: block; padding: 20px 0 6px; border-top: 0; }
.hs-rows .hs-rows-g b { display: block; text-align: left; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.hs-rows .hs-rows-g span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); }
.hs-rows .hs-rows-g + li { border-top-color: var(--line-2); }

/* Devis : champs obligatoires annoncés, délais distingués à l'étape 2 */
.qreq { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.qnote-visite { margin: 20px 0 0; }

/* Rangée d'atouts focalisable sur mobile */
#atouts .hs-cards:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r2); }

/* Emplacement de la future photo (mode revue) */
.hs-pause-tbc { margin: 0 0 16px; }

/* v10 : avis Google dans la bande de preuves (texte fidèle, auteur, date, lien de l’avis) */
.hs-avis { margin-top: clamp(40px, 4.5vw, 64px); }
.hs-avis-h { margin: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .01em; }
.hs-avis-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 16px 0 0; padding: 0; list-style: none; }
.hs-avis-list figure { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; height: 100%; margin: 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); }
.hs-avis-list blockquote { flex: 1; margin: 0; }
.hs-avis-list blockquote p { margin: 0; max-width: 46ch; font-size: var(--fs-lg); line-height: 1.5; letter-spacing: -.01em; }
.hs-avis-list blockquote p::before { content: "«\00a0"; }
.hs-avis-list blockquote p::after { content: "\00a0»"; }
.hs-avis-k { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: var(--fs-xs); font-weight: 700; }
.hs-avis-list figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .86); }
.hs-avis-list figcaption b { color: #fff; font-weight: 700; }
.hs-avis-list .stars { color: #FBBC05; font-size: .875rem; }
.hs-avis-list figcaption a, .hs-avis-note a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.hs-avis-list figcaption a { display: inline-flex; align-items: center; min-height: 44px; }
.hs-avis-note { margin: 18px 0 0; max-width: 62em; font-size: var(--fs-xs); color: rgba(255, 255, 255, .86); }
@media (max-width: 767px) { .hs-avis-list { grid-template-columns: 1fr; gap: 20px; } .hs-avis-list blockquote p { font-size: var(--fs-base); } }

/* v10 : l’appel au devis remplace le prix d’appel, juste après les cinq critères du prix */
.hs-cta-devis { margin-top: 16px; }
.hs-cta-devis .hs-cta-txt { position: relative; flex: 1 1 34ch; max-width: 56ch; }
.hs-cta-devis p.hs-cta-t { max-width: none; font-size: var(--fs-xl); font-weight: 500; line-height: 1.2; letter-spacing: -.03em; }
.hs-cta-devis p.hs-cta-p { max-width: none; margin-top: 10px; font-size: var(--fs-base); font-weight: 400; line-height: 1.6; letter-spacing: 0; color: rgba(255, 255, 255, .9); }
.hs-cta-acts { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.hs-cta-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #fff; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hs-cta-tel .ph { font-size: 18px; }
.hs-cta-tel:hover { color: #CFE9F8; }
@media (max-width: 767px) { .hs-cta-acts { width: 100%; } .hs-cta-acts .btn { width: 100%; } .hs-cta-tel { justify-content: center; width: 100%; border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); } }

/* v11 : ancrage local (siège + carte des 36 communes, données publiques IGN et BAN), sous la recherche de villes */
.hs-siege { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: center; margin-top: clamp(32px, 3.5vw, 48px); padding-top: clamp(32px, 3.5vw, 48px); border-top: 1px solid var(--line); }
.hs-siege .hs-map { grid-column: 1; grid-row: 1; justify-self: center; width: 100%; max-width: 400px; margin: 0; }
.hs-siege .hs-siege-txt { grid-column: 2; grid-row: 1; max-width: 46ch; }
.hs-siege-h { margin: 0 0 12px; }
.hs-siege .lnk-u { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.hs-siege-g { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 44px; margin-top: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: var(--sh-card); color: var(--ink); font-size: var(--fs-sm); }
.hs-siege-g .stars { color: #FBBC05; font-size: .875rem; }
.hs-siege-g-l { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); font-weight: 700; }
.hs-siege-g:hover { box-shadow: var(--sh-hover); }
.hs-map-leg { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--ink-2); }
.hs-map-leg li { display: inline-flex; align-items: center; gap: 8px; }
.hs-map-leg .lg { flex: none; width: 14px; height: 14px; border-radius: 4px; }
.hs-map-leg .lg-hq { border-radius: 50% 50% 50% 0; background: var(--accent-ink); transform: rotate(-45deg); }
.hs-map-leg .lg-92 { background: #fff; box-shadow: inset 0 0 0 1px #B9CEE0; }
.hs-map-leg .lg-paris { background: #D9E3ED; }
.hs-map-src { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--ink-2); }
.hs-map-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.hs-map-svg .m-paris { fill: #D9E3ED; }
.hs-map-svg .m-92 path { fill: #fff; stroke: #C4D6E6; stroke-width: 1; }
.hs-map-svg .m-asn { fill: #DCEFF9; stroke: var(--accent); stroke-width: 1.6; }
.hs-map-svg .m-def { fill: var(--accent-ink); }
.hs-map-svg .m-hq path { fill: var(--accent-ink); }
.hs-map-svg .m-hq circle { fill: #fff; }
.hs-map-svg text { font-family: inherit; font-size: 17px; font-weight: 500; fill: var(--ink-2); paint-order: stroke; stroke: #F1F6FB; stroke-width: 5px; stroke-linejoin: round; }
.hs-map-svg .m-hq-t { font-size: 19px; font-weight: 700; fill: var(--accent-ink); }
.hs-map-svg .m-paris-t { font-size: 21px; fill: var(--ink-2); stroke: #D9E3ED; }
@media (max-width: 1023px) { .hs-siege { grid-template-columns: minmax(0, 1fr); } .hs-siege .hs-map, .hs-siege .hs-siege-txt { grid-column: 1; grid-row: auto; } .hs-siege .hs-map { max-width: 520px; } }
@media (max-width: 767px) { .hs-map-svg .m-t text:not(.m-hq-t):not(.m-paris-t):not(.m-def-t) { display: none; } .hs-map-svg .m-hq-t, .hs-map-svg .m-paris-t, .hs-map-svg .m-def-t { font-size: 27px; } }


/* Conformite du 02/11/2026 : liens legaux du pied de page et mention sous le formulaire. */
.ftr-legal-links { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.ftr-legal-links a, .ftr-ck { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.ftr-ck { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.ftr-legal-links a:hover, .ftr-ck:hover { color: var(--ink); }
.qnote-rgpd { margin: 10px 0 0; }
.qnote-rgpd a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }