/* FeizClean Services (cru Lustre), nettoyage de canapés, matelas, tapis et vitres à Lyon. Porcelaine, encre, pierre, sauge sombre
   et un filet de laiton. Libre Caslon Display (titres) et Libre Caslon Text italique (accents),
   Albert Sans (texte, étiquettes en capitales espacées). Aucun arrondi, aucune ombre, des filets
   d'un pixel, beaucoup d'air : le vocabulaire des grandes maisons de prêt-à-porter. Chaque section
   a un geste discret (voir site.js). Mobile d'abord, points de rupture 720 / 1000 / 1280. */

@font-face { font-family: "Libre Caslon Display"; src: url("../fonts/caslon-display.5710c311d02b.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("../fonts/caslon-text.001d520e0d8b.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("../fonts/caslon-text-italic.da67fedc7811.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("../fonts/caslon-text-bold.33af9ef1744b.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("../fonts/albert.fe161fcb628d.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("../fonts/albert-italic.27dd4363893d.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
    --cuivre: #4f6357;          /* sauge sombre : accent */
    --cuivre-fonce: #33443a;
    --cuivre-clair: #c9d3cb;    /* céladon */
    --creme: #faf8f4;           /* porcelaine : fond du site */
    --sable: #efebe3;           /* pierre : panneaux */
    --nuit: #141414;            /* encre : sections sombres */
    --encre: #141414;
    --or: #6f5b30;              /* laiton sombre : filets, numéros (lisible sur porcelaine et pierre) */
    --serif: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
    --italique: "Libre Caslon Text", Georgia, serif;
    --sans: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
    --rayon: 0px;

    --blanc: #ffffff;
    --gris: color-mix(in srgb, var(--encre) 78%, var(--creme));   /* 4,5:1 au moins sur la porcelaine, quelle que soit la palette */
    --ligne: color-mix(in srgb, var(--encre) 18%, transparent);
    --ligne-forte: color-mix(in srgb, var(--encre) 45%, transparent);
    --marge: clamp(20px, 5vw, 88px);
    --largeur: 1400px;
    --entete: 84px;
    --sortie: cubic-bezier(0.22, 1, 0.36, 1);
    --lent: 1400ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--encre); background: var(--creme); overflow-x: clip; -webkit-font-smoothing: antialiased; }
body.menu-ouvert { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--encre); color: var(--creme); }
:focus-visible { outline: 1px solid var(--encre); outline-offset: 4px; }
.evitement { position: absolute; left: -9999px; top: 8px; background: var(--encre); color: var(--creme); padding: 8px 14px; z-index: 1000; }
.evitement:focus { left: 8px; }
[hidden] { display: none !important; }

/* ---------- typographie ---------- */
.titre-page, .titre-section, .titre-bloc, .tb-titre { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -0.005em; text-wrap: balance; }
.titre-page { font-size: clamp(40px, 6.4vw, 96px); }
.titre-section { font-size: clamp(30px, 4vw, 58px); }
.titre-bloc { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; }
.titre-page em, .titre-section em, .titre-bloc em { font-family: var(--italique); font-style: italic; font-weight: 400; color: var(--cuivre); }
.fond-nuit .titre-section em, .fond-nuit .titre-page em { color: var(--cuivre-clair); }
.surtitre { font-size: 10px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gris); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 14px; }
.surtitre::before { content: ""; width: 28px; height: 1px; background: var(--or); }
.fond-nuit .surtitre { color: color-mix(in srgb, var(--creme) 60%, transparent); }
.numero { font-family: var(--serif); color: var(--or); font-size: 13px; letter-spacing: 0.1em; }
.texte-grand { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; max-width: 58ch; font-weight: 300; }
.texte-doux { color: var(--gris); }
.fond-nuit .texte-doux { color: color-mix(in srgb, var(--creme) 62%, transparent); }
.petit { font-size: 12px; letter-spacing: 0.02em; }
.italique { font-family: var(--italique); font-style: italic; }
.lien-souligne { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding-bottom: 2px; transition: background-size 600ms var(--sortie); }
.lien-souligne:hover { background-size: 0 1px; }
.sep { display: inline-block; width: 1px; height: 10px; background: currentColor; margin: 0 12px; vertical-align: middle; opacity: 0.4; }
.etiquette { display: inline-flex; align-items: center; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--ligne-forte); color: var(--gris); }
.etiquette-pro { border-color: var(--or); color: var(--or); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }

/* les titres mot à mot : les mots montent doucement */
.mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.08em 0.04em 0.22em; margin: -0.08em -0.04em -0.22em; }
.mot > span { display: inline-block; transform: translateY(60%); opacity: 0; transition: transform 1600ms var(--sortie), opacity 1200ms; transition-delay: calc(var(--m, 0) * 70ms); }
.mots-visibles .mot > span { transform: none; opacity: 1; }

/* apparitions, lentes */
[data-apparition] { opacity: 0; transition: opacity var(--lent) var(--sortie), transform 1800ms var(--sortie), clip-path 1800ms var(--sortie); transition-delay: calc(var(--i, 0) * 120ms); }
[data-apparition="haut"] { transform: translateY(24px); }
[data-apparition="gauche"] { transform: translateX(-24px); }
[data-apparition="droite"] { transform: translateX(24px); }
[data-apparition="echelle"] { transform: scale(0.97); }
/* Le voile rogne l'enfant, jamais l'élément observé : un élément entièrement rogné n'intersecte plus rien pour IntersectionObserver. */
[data-apparition="voile"] { opacity: 1; transform: none; }
[data-apparition="voile"] > * { clip-path: inset(0 0 100% 0); transition: clip-path 1800ms var(--sortie); }
[data-apparition="voile"].visible > * { clip-path: inset(0 0 0 0); }
[data-apparition].visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-apparition] { opacity: 1; transform: none; transition: none; }
    [data-apparition="voile"] > * { clip-path: none; transition: none; }
    .mot > span { transform: none; opacity: 1; transition: none; }
}

/* ---------- boutons : un filet, une capitale espacée ---------- */
.bouton {
    --fond: transparent; --texte: var(--encre); --bord: var(--encre);
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    padding: 16px 30px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); color: var(--texte);
    font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
    position: relative; isolation: isolate; overflow: hidden; transition: color 700ms var(--sortie), border-color 700ms;
}
.bouton::before { content: ""; position: absolute; inset: 0; background: var(--encre); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--sortie); z-index: -1; }
.bouton:hover::before { transform: none; }
.bouton:hover { color: var(--creme); }
.bouton-plein { --fond: var(--encre); --texte: var(--creme); }
.bouton-plein::before { background: var(--cuivre); }
.bouton-clair { --fond: transparent; --texte: var(--creme); --bord: var(--creme); }
.bouton-clair::before { background: var(--creme); }
.bouton-clair:hover { color: var(--encre); }
.bouton-petit { padding: 11px 18px; font-size: 9px; }
.bouton[disabled] { opacity: 0.35; cursor: not-allowed; }
.bouton[disabled]::before { display: none; }
.bouton-lien { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; transition: background-size 600ms var(--sortie); }
.bouton-lien:hover { background-size: 30% 1px; }
.bouton-lien::after { content: "→"; font-family: var(--serif); font-size: 14px; letter-spacing: 0; transition: transform 600ms var(--sortie); }
.bouton-lien:hover::after { transform: translateX(6px); }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: center; }

/* ---------- la page de garde et le curseur ---------- */
.page-garde { position: fixed; inset: 0; z-index: 400; background: var(--creme); display: grid; place-items: center; font-family: var(--serif); font-size: clamp(22px, 3vw, 34px); letter-spacing: 0.4em; text-transform: uppercase; animation: garde-fin 900ms var(--sortie) 3200ms forwards; }
/* seules opacité et transform sont animées : la page de garde glisse hors de l'écran une fois effacée */
@keyframes garde-fin { to { opacity: 0; transform: translateY(-100%); } }
.page-garde span { opacity: 0; transform: translateY(10px) scale(0.97); animation: garde 1400ms var(--sortie) forwards; }
.page-garde.levee { animation-delay: 0s; } /* levée par le script : la même sortie, tout de suite */
@keyframes garde { to { opacity: 1; transform: none; } }
body.mode-edition .page-garde, .page-garde.inutile { display: none; }
.curseur { position: fixed; left: 0; top: 0; z-index: 300; width: 10px; height: 10px; border-radius: 50%; background: var(--encre); pointer-events: none; transform: translate(-50%, -50%); transition: width 500ms var(--sortie), height 500ms var(--sortie), background 500ms, opacity 300ms; opacity: 0; display: grid; place-items: center; overflow: hidden; mix-blend-mode: normal; }
.curseur span { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--creme); opacity: 0; transition: opacity 400ms; white-space: nowrap; }
.curseur.actif { opacity: 1; }
.curseur.grand { width: 92px; height: 92px; background: color-mix(in srgb, var(--encre) 85%, transparent); }
.curseur.grand span { opacity: 1; }
.curseur.cache { opacity: 0; }
@media (hover: none), (prefers-reduced-motion: reduce) { .curseur { display: none; } }

/* ---------- en-tête : trois zones, la marque au centre ---------- */
.entete {
    position: sticky; top: 0; z-index: 100; height: var(--entete);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
    padding: 0 var(--marge); background: color-mix(in srgb, var(--creme) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ligne); transition: transform 700ms var(--sortie), border-color 400ms;
}
.entete.cachee { transform: translateY(-100%); }
.marque { display: grid; justify-items: center; gap: 2px; text-decoration: none; text-align: center; }
.marque-logo { display: none; height: 30px; width: auto; } /* sur téléphone la marque reste en lettres ; le vrai logo dès 1000 px */
.marque-nom { font-family: var(--serif); font-size: clamp(16px, 1.6vw, 22px); letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; padding-left: 0.3em; }
.marque-lieu { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gris); padding-left: 0.3em; }
.navigation { display: none; gap: clamp(16px, 1.8vw, 28px); }
.navigation a { text-decoration: none; white-space: nowrap; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size 600ms var(--sortie); }
.navigation a:hover, .navigation a[aria-current="page"] { background-size: 100% 1px; }
.entete-actions { display: flex; align-items: center; gap: 28px; justify-self: end; }
.entete-tel { display: none; text-decoration: none; font-size: 11px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.entete-rdv { display: none; }
.burger { width: 40px; height: 40px; border: 0; background: transparent; display: grid; place-items: center; gap: 6px; cursor: pointer; padding: 0; align-content: center; }
.burger span { width: 24px; height: 1px; background: currentColor; transition: transform 600ms var(--sortie); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.menu-mobile { position: fixed; inset: 0; z-index: 90; background: var(--creme); color: var(--encre); padding: calc(var(--entete) + 24px) var(--marge) 32px; display: grid; grid-template-rows: 1fr auto; overflow: auto; }
.menu-mobile nav { display: grid; gap: 0; align-content: center; }
.menu-mobile nav a { text-decoration: none; font-family: var(--serif); font-size: clamp(30px, 7vw, 64px); line-height: 1.1; display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--ligne); animation: menu-entree 900ms var(--sortie) both; animation-delay: calc(var(--m, 0) * 70ms); }
.menu-mobile nav a small { font-family: var(--serif); font-size: 12px; letter-spacing: 0.2em; color: var(--or); }
.menu-mobile nav a:hover { color: var(--cuivre); }
.menu-mobile-pied { display: flex; flex-wrap: wrap; gap: 16px; font-size: 11px; letter-spacing: 0.1em; color: var(--gris); }
.menu-mobile-pied a { text-decoration: none; color: var(--encre); }
@keyframes menu-entree { from { opacity: 0; transform: translateY(14px); } }

.messages { position: fixed; top: calc(var(--entete) + 12px); left: 50%; transform: translateX(-50%); z-index: 80; display: grid; gap: 6px; width: min(92vw, 560px); }
.message { padding: 14px 20px; background: var(--encre); color: var(--creme); font-size: 13px; letter-spacing: 0.02em; }
.message-error { background: #6b2a1f; }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 10vw, 150px) var(--marge); }
.section-interieur { max-width: var(--largeur); margin: 0 auto; }
.fond-nuit { background: var(--nuit); color: var(--creme); }
.fond-sable { background: var(--sable); }
.entete-section { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 72px); }
.entete-section-ligne { align-items: end; }
.tete-page { padding: clamp(56px, 9vw, 130px) var(--marge) clamp(36px, 5vw, 64px); }
.tete-page-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 28px; align-items: end; }
.filet { height: 1px; background: var(--ligne); }
.image-lente { overflow: hidden; position: relative; }
.image-lente img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 2400ms var(--sortie); }
a:hover .image-lente img, .image-lente:hover img { transform: scale(1); }

/* ---------- accueil : l'ouverture (on regarde à contre-jour) ---------- */
.ouverture { padding: clamp(40px, 6vw, 96px) var(--marge) 0; }
.ouverture-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 40px; }
.ouverture-texte { display: grid; gap: 26px; align-content: end; }
.ouverture-titre { font-size: clamp(44px, 7vw, 112px); max-width: 11ch; }
.ouverture-offre { font-size: clamp(16px, 1.4vw, 19px); font-weight: 300; max-width: 52ch; line-height: 1.6; }
.ouverture-offre strong { font-weight: 500; }
.ouverture-image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sable); }
.ouverture-image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(0.55 + var(--lumiere, 0) * 0.45)) contrast(calc(1.1 - var(--lumiere, 0) * 0.1)); transform: scale(calc(1.08 - var(--lumiere, 0) * 0.08)); transition: filter 200ms linear, transform 200ms linear; }
.ouverture-legende { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; display: flex; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--creme); background: linear-gradient(transparent, rgba(20, 20, 20, 0.5)); }
.ouverture-legende b { font-weight: 500; }
.ouverture-mentions .prochaine strong { text-transform: none; letter-spacing: 0; }
.ouverture-mentions { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); padding: 22px 0; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); max-width: var(--largeur); margin: clamp(32px, 4vw, 56px) auto 0; }
.prochaine { display: grid; gap: 4px; font-size: 12px; letter-spacing: 0.02em; }
.prochaine span { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); }
.prochaine strong { font-family: var(--italique); font-style: italic; font-weight: 400; font-size: 17px; }
.fond-nuit .prochaine span { color: color-mix(in srgb, var(--creme) 60%, transparent); }

/* ---------- les chapitres : chaque famille en une page d'éditorial ---------- */
.chapitres-interieur { max-width: var(--largeur); margin: 0 auto; }
.chapitre { display: grid; gap: 28px; padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--ligne); text-decoration: none; color: inherit; }
.chapitre-texte { display: grid; gap: 16px; align-content: center; }
.chapitre-num { font-family: var(--serif); font-size: 14px; letter-spacing: 0.2em; color: var(--or); }
.chapitre-nom { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 52px); line-height: 1.05; }
.chapitre-desc { font-weight: 300; font-size: 15px; max-width: 46ch; color: var(--gris); }
.chapitre-bas { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); padding-top: 8px; }
.chapitre-bas strong { font-family: var(--serif); font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--encre); font-weight: 400; }
.chapitre-image { aspect-ratio: 4 / 5; }
.chapitre:nth-child(even) .chapitre-image { order: -1; }

/* ---------- l'estimation : une note de la Maison, aux filets ---------- */
.estimation-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 48px; }
.estimation-texte { display: grid; gap: 22px; align-content: start; }
.pourquoi { display: grid; gap: 14px; margin-top: 8px; }
.pas { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--ligne); }
.pas b { font-family: var(--serif); font-weight: 400; color: var(--or); font-size: 15px; letter-spacing: 0.1em; }
.pas div { display: grid; gap: 2px; }
.pas strong { font-weight: 500; font-size: 14px; letter-spacing: 0.02em; }
.pas span { font-size: 13px; color: var(--gris); font-weight: 300; }
.estimation-note { font-size: 12px; color: var(--gris); max-width: 46ch; }
.bon { background: var(--blanc); border: 1px solid var(--ligne); position: relative; }
.bon::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--ligne); pointer-events: none; }
.bon-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 28px 32px 18px; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gris); }
.bon-tete b { font-family: var(--serif); color: var(--encre); font-weight: 400; font-size: 16px; letter-spacing: 0; }
.bon-lignes { display: grid; padding: 0 32px; }
.bon-ligne { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--ligne); transition: background 400ms; }
.bon-ligne.active .bon-nom { color: var(--cuivre-fonce); }
.bon-nom { font-family: var(--serif); font-size: 18px; }
.bon-unite { font-size: 11px; color: var(--gris); display: block; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.bon-montant { font-family: var(--serif); font-size: 18px; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; color: var(--gris); }
.bon-ligne.active .bon-montant { color: var(--encre); }
.stepper { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 2px; width: max-content; }
.stepper button { width: 32px; height: 32px; border: 1px solid var(--ligne-forte); border-radius: 50%; background: transparent; cursor: pointer; font-family: var(--serif); font-size: 18px; line-height: 1; display: grid; place-items: center; transition: background 400ms, color 400ms, border-color 400ms; }
.stepper button:hover { background: var(--encre); color: var(--creme); border-color: var(--encre); }
.stepper button:disabled { opacity: 0.3; cursor: default; background: transparent; color: inherit; border-color: var(--ligne-forte); }
.stepper input { width: 52px; height: 32px; border: 0; border-bottom: 1px solid var(--ligne-forte); text-align: center; font-family: var(--serif); font-size: 17px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; background: transparent; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bon-total { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 32px; margin-top: 4px; border-top: 1px solid var(--encre); }
.bon-total div { display: grid; gap: 6px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); }
.bon-total strong { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; color: var(--encre); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.bon-minimum { grid-column: 1 / -1; font-size: 11px; color: var(--gris); letter-spacing: 0.02em; text-transform: none; }
.bon-minimum[hidden] { display: none; }
.bon-actions { padding: 0 32px 32px; display: grid; gap: 16px; justify-items: start; }

/* ---------- le savoir-faire : une liste dépliée, l'image change ---------- */
.savoir-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 40px; }
.savoir-image { aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--sable); }
.savoir-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1200ms var(--sortie), transform 2400ms var(--sortie); }
.savoir-image img.active { opacity: 1; transform: none; }
.savoir-liste { display: grid; align-content: start; }
.geste { border-top: 1px solid var(--ligne); }
.geste:last-child { border-bottom: 1px solid var(--ligne); }
.geste-tete { width: 100%; display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: baseline; padding: 20px 0; background: transparent; border: 0; text-align: left; cursor: pointer; }
.geste-num { font-family: var(--serif); color: var(--or); font-size: 13px; letter-spacing: 0.15em; }
.geste-titre { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); }
.geste-plus { font-family: var(--serif); font-size: 22px; color: var(--gris); transition: transform 600ms var(--sortie); }
.geste.deplie .geste-plus { transform: rotate(45deg); }
.geste-corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 800ms var(--sortie); }
.geste.deplie .geste-corps { grid-template-rows: 1fr; }
.geste-corps > div { overflow: hidden; }
.geste-corps p { padding: 0 0 22px 60px; font-weight: 300; color: var(--gris); max-width: 52ch; }
.geste-temp { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--or); display: block; margin-bottom: 6px; }

/* ---------- les artisans : portraits en noir et blanc, la parole au survol ---------- */
.artisans-interieur { max-width: var(--largeur); margin: 0 auto; }
.portraits { display: grid; gap: 28px 20px; }
.portrait { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.portrait-image { aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--sable); }
.portrait-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transform: scale(1.03); transition: transform 2400ms var(--sortie), filter 1200ms; }
.portrait:hover .portrait-image img { transform: scale(1); }
.portrait-parole { position: absolute; inset: 0; display: grid; align-content: end; padding: 24px; color: var(--creme); font-family: var(--italique); font-style: italic; font-size: 17px; line-height: 1.4; background: linear-gradient(transparent 30%, rgba(20, 20, 20, 0.72)); opacity: 0; transform: translateY(12px); transition: opacity 800ms var(--sortie), transform 1000ms var(--sortie); }
.portrait:hover .portrait-parole, .portrait.touche .portrait-parole { opacity: 1; transform: none; }
.portrait-nom { font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.portrait-titre { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); }
.portrait-bas { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ligne); }
.jours { display: flex; gap: 8px; font-size: 10px; letter-spacing: 0.1em; }
.jours i { font-style: normal; color: var(--ligne-forte); }
.jours i.present { color: var(--encre); }
.jours i.aujourd-hui { text-decoration: underline; text-underline-offset: 3px; }
.prochain { font-size: 11px; color: var(--gris); display: grid; gap: 2px; letter-spacing: 0.02em; }
.prochain strong { font-family: var(--italique); font-style: italic; font-weight: 400; color: var(--encre); font-size: 14px; }

/* ---------- les adresses : où la Maison se déplace ---------- */
.adresses-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 40px; align-items: start; }
.adresses-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
.adresses-liste li { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 24px); padding: 10px 0; border-bottom: 1px solid var(--ligne); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.adresses-liste li small { font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em; color: var(--or); }
.zone-carte { border: 1px solid var(--ligne); padding: clamp(28px, 4vw, 48px); display: grid; gap: 18px; position: relative; background: var(--blanc); }
.zone-carte::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--ligne); pointer-events: none; }
.zone-form { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.zone-form input { width: 100%; padding: 10px 14px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); background: var(--blanc); font-family: var(--serif); font-size: 24px; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.zone-form input:focus { outline: 0; border-color: var(--encre); box-shadow: 0 0 0 3px color-mix(in srgb, var(--encre) 12%, transparent); }
.zone-reponse { min-height: 48px; font-size: 13px; color: var(--gris); display: grid; gap: 4px; }
.zone-reponse strong { font-family: var(--italique); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--encre); }
.zone-reponse.oui strong { color: var(--cuivre); }
.zone-reponse.non strong { color: #8a3b2a; }

/* ---------- les boutiques et les maisons : l'abonnement ---------- */
.maisons-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 48px; }
.maisons-texte { display: grid; gap: 22px; align-content: start; }
.maisons-liste { display: grid; gap: 0; }
.maisons-liste li { padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--creme) 16%, transparent); font-weight: 300; font-size: 15px; display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.maisons-liste li::before { content: "—"; color: var(--or); }
.contrat { border: 1px solid color-mix(in srgb, var(--creme) 25%, transparent); padding: clamp(24px, 3vw, 40px); display: grid; gap: 22px; position: relative; }
.contrat::before { content: ""; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--creme) 12%, transparent); pointer-events: none; }
.contrat-tete { display: grid; gap: 8px; }
.contrat-tete strong { font-family: var(--serif); font-size: 26px; font-weight: 400; }
.contrat-ligne { display: grid; gap: 10px; }
.contrat-ligne label, .contrat-ligne .libelle { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--creme) 60%, transparent); }
.contrat .stepper button { border-color: color-mix(in srgb, var(--creme) 40%, transparent); color: var(--creme); }
.contrat .stepper button:hover { background: var(--creme); color: var(--encre); border-color: var(--creme); }
.contrat .stepper input { border-bottom-color: color-mix(in srgb, var(--creme) 40%, transparent); color: var(--creme); }
.frequences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid color-mix(in srgb, var(--creme) 35%, transparent); }
.frequences button { border: 0; background: transparent; color: var(--creme); padding: 14px 8px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; display: grid; gap: 4px; transition: background 500ms, color 500ms; }
.frequences button small { font-family: var(--italique); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 12px; color: color-mix(in srgb, var(--creme) 60%, transparent); }
.frequences button + button { border-left: 1px solid color-mix(in srgb, var(--creme) 35%, transparent); }
.frequences button[aria-pressed="true"] { background: var(--creme); color: var(--encre); }
.frequences button[aria-pressed="true"] small { color: var(--cuivre); }
.contrat-resultat { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--creme) 35%, transparent); }
.contrat-resultat strong { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; font-variant-numeric: tabular-nums; }
.contrat-resultat span { font-size: 11px; color: color-mix(in srgb, var(--creme) 60%, transparent); }
.contrat-economie { font-family: var(--italique); font-style: italic; font-size: 14px; color: var(--cuivre-clair); }

/* ---------- le livre d'or : une parole à la fois ---------- */
.livre-interieur { max-width: 900px; margin: 0 auto; text-align: center; display: grid; gap: 28px; justify-items: center; }
.livre-scene { position: relative; min-height: 220px; width: 100%; }
.parole { position: absolute; inset: 0; display: grid; gap: 18px; justify-items: center; opacity: 0; transform: translateY(10px); transition: opacity 1200ms var(--sortie), transform 1400ms var(--sortie); pointer-events: none; }
.parole.actif { opacity: 1; transform: none; pointer-events: auto; }
.parole-texte { font-family: var(--italique); font-style: italic; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.35; text-wrap: balance; }
.parole-qui { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gris); }
.parole-qui strong { font-weight: 500; color: var(--encre); }
.livre-nav { display: flex; gap: 22px; }
.livre-nav button { border: 0; background: transparent; cursor: pointer; font-family: var(--serif); font-size: 13px; letter-spacing: 0.2em; color: var(--ligne-forte); padding: 6px 2px; border-bottom: 1px solid transparent; transition: color 500ms, border-color 500ms; }
.livre-nav button[aria-pressed="true"] { color: var(--encre); border-bottom-color: var(--or); }

/* ---------- le rendez-vous : le cadre final ---------- */
.rendezvous { padding: clamp(72px, 10vw, 150px) var(--marge); }
.rendezvous-interieur { max-width: 980px; margin: 0 auto; border: 1px solid var(--encre); padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); text-align: center; display: grid; gap: 26px; justify-items: center; position: relative; }
.rendezvous-interieur::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--ligne); pointer-events: none; }
.rendezvous .prochaine { justify-items: center; text-align: center; }

/* ---------- la carte (prestations) ---------- */
.pourqui { display: flex; flex-wrap: wrap; gap: 0 32px; margin-bottom: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--ligne); }
.pourqui a { text-decoration: none; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 14px 0; border-bottom: 1px solid transparent; margin-bottom: -1px; color: var(--gris); transition: color 400ms, border-color 400ms; }
.pourqui a:hover, .pourqui a.actif { color: var(--encre); border-bottom-color: var(--encre); }
.famille { display: grid; gap: 28px; padding: clamp(36px, 5vw, 64px) 0; scroll-margin-top: calc(var(--entete) + 16px); }
.famille + .famille { border-top: 1px solid var(--ligne); }
.famille-tete { display: grid; gap: 14px; }
.famille-tete .titre-section { font-size: clamp(30px, 3.6vw, 52px); }
.grille-prix { display: grid; }
.ligne-prix { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--ligne); }
.ligne-nom { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.15; }
.ligne-prix .prix { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.15; }
.ligne-prix .prix small { display: block; font-family: var(--sans); font-size: 10px; color: var(--gris); letter-spacing: 0.2em; text-transform: uppercase; margin-top: 6px; }
.ligne-desc { grid-column: 1 / -1; font-size: 14px; font-weight: 300; color: var(--gris); max-width: 66ch; }
.ligne-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris); align-items: center; padding-top: 6px; }
.ligne-meta .bouton-lien { margin-left: auto; color: var(--encre); }
.ligne-options { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.prix-note { display: grid; gap: 10px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--ligne); font-size: 14px; font-weight: 300; max-width: 70ch; margin-top: 24px; }
.prix-note strong { font-weight: 500; }

/* ---------- fiche artisan ---------- */
.intervenant-tete { display: grid; gap: 32px; align-items: start; }
.intervenant-tete .portrait-image { max-width: 380px; }
.intervenant-infos { display: grid; gap: 22px; }
.planning { display: grid; gap: 8px; }
.planning-jour { display: grid; grid-template-columns: 44px 1fr 96px; gap: 14px; align-items: center; font-size: 12px; }
.planning-jour b { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }
.planning-jour.absent { color: var(--gris); }
.planning-jour.aujourd-hui b { color: var(--cuivre); }
.planning-barre { height: 14px; position: relative; border-bottom: 1px solid var(--ligne); }
.planning-barre i { position: absolute; top: 4px; bottom: 4px; left: var(--de); width: var(--a); background: var(--encre); }
.planning-heures { display: grid; grid-template-columns: 44px 1fr 96px; gap: 14px; font-size: 10px; letter-spacing: 0.1em; color: var(--gris); }
.planning-heures div { position: relative; height: 16px; }
.planning-heures div span { position: absolute; left: var(--x); transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.tarifs-intervenant { display: grid; gap: 40px; }
.tarifs-categorie { display: grid; gap: 4px; align-content: start; }
.tarifs-categorie h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; padding-bottom: 10px; border-bottom: 1px solid var(--encre); margin-bottom: 8px; }
.tarifs-categorie li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 14px; }
.tarifs-categorie li:last-child { border-bottom: 0; }
.tarifs-categorie .prix { font-family: var(--serif); font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- la Maison ---------- */
.chiffres { display: grid; gap: 0; border-top: 1px solid var(--encre); }
.chiffre { padding: 28px 0; border-bottom: 1px solid var(--ligne); display: grid; gap: 8px; }
.chiffre strong { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1; font-variant-numeric: tabular-nums; }
.chiffre span { font-size: 13px; font-weight: 300; color: var(--gris); max-width: 30ch; }
.materiel { display: grid; gap: 32px 20px; }
.outil { display: grid; gap: 14px; }
.outil figure { aspect-ratio: 4 / 5; }
.outil strong { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; }
.outil p { font-size: 14px; font-weight: 300; color: var(--gris); }
.horaires-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ligne); font-size: 14px; }
.horaires-liste li.aujourd-hui { color: var(--cuivre); }
.ouvert { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); }
.temoin { width: 6px; height: 6px; border-radius: 50%; background: var(--cuivre); }
.entreprise-grille { display: grid; gap: 56px; }

/* ---------- formulaires (site et éditeur) ---------- */
.formulaire { display: grid; gap: 22px; }
.champ, .formulaire-champ { display: grid; gap: 8px; }
.champ label, .formulaire-champ > label { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--encre); }
.champ input, .champ select, .champ textarea, .formulaire-champ input:not([type="checkbox"]), .formulaire-champ select, .formulaire-champ textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); background: var(--blanc); color: var(--encre); font-size: 16px; transition: border-color 300ms, box-shadow 300ms; }
.champ input::placeholder, .champ textarea::placeholder, .formulaire-champ input::placeholder, .formulaire-champ textarea::placeholder { color: color-mix(in srgb, var(--encre) 45%, var(--blanc)); }
.champ input:focus, .champ select:focus, .champ textarea:focus, .formulaire-champ input:focus, .formulaire-champ textarea:focus { border-color: var(--encre); box-shadow: 0 0 0 3px color-mix(in srgb, var(--encre) 12%, transparent); outline: 0; }
.champ textarea, .formulaire-champ textarea { min-height: 150px; resize: vertical; }
.champ-case, .formulaire-case { display: flex; gap: 12px; align-items: start; font-size: 12px; letter-spacing: 0.01em; text-transform: none; color: var(--encre); }
.champ-case input, .formulaire-case input { margin-top: 3px; accent-color: var(--encre); }
.ligne-champs { display: grid; gap: 16px; }
.formulaire-bloc { display: grid; gap: 18px; }
.formulaire-titre { font-family: var(--serif); font-weight: 400; font-size: 24px; }
.formulaire-intro { font-size: 15px; font-weight: 400; color: var(--gris); max-width: 56ch; }
.formulaire-aide { font-size: 13px; color: var(--gris); }
.formulaire-erreur { padding: 12px 16px; border: 1px solid #8a3b2a; color: #8a3b2a; font-size: 13px; }
.formulaire-merci { padding: 18px 20px; border: 1px solid var(--encre); font-family: var(--italique); font-style: italic; font-size: 17px; }
.formulaire-piege { position: absolute; left: -9999px; }
.formulaire-champ.en-erreur input, .formulaire-champ.en-erreur textarea { border-color: #8a3b2a; }
.public-choix { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--encre); max-width: 100%; }
.public-choix button { border: 0; background: transparent; padding: 12px 22px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background 500ms, color 500ms; white-space: nowrap; }
.public-choix button + button { border-left: 1px solid var(--encre); }
.public-choix button[aria-pressed="true"] { background: var(--encre); color: var(--creme); }

/* ---------- gestion d'un rendez-vous ---------- */
.billet { max-width: 820px; margin: 0 auto; display: grid; border: 1px solid var(--encre); position: relative; background: var(--blanc); }
.billet::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--ligne); pointer-events: none; }
.billet-partie { padding: clamp(28px, 4vw, 48px); display: grid; gap: 16px; position: relative; }
.billet-partie + .billet-partie { border-top: 1px solid var(--ligne); }
.pastille { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--ligne-forte); }
.pastille-ok { border-color: var(--cuivre); color: var(--cuivre); }
.pastille-attente { border-color: var(--or); color: var(--or); }
.pastille-non { border-color: #8a3b2a; color: #8a3b2a; }
.recap-date { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; }
.recap-date em { font-family: var(--italique); font-style: italic; color: var(--cuivre); }
.recap-lignes li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 14px; }
.recap-lignes .recap-total { font-family: var(--serif); font-size: 18px; border-bottom: 0; }
.recap-lieu { display: grid; gap: 2px; font-size: 14px; padding: 16px 0; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.recap-lieu b { font-family: var(--serif); font-weight: 400; font-size: 18px; }
.grille-creneaux { display: grid; gap: 22px; }
.jour-creneaux { display: grid; gap: 10px; }
.jour-creneaux h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; }
.heures { display: flex; flex-wrap: wrap; gap: 8px; }
.heure { padding: 10px 14px; border: 1px solid var(--ligne-forte); background: transparent; font-size: 12px; letter-spacing: 0.08em; cursor: pointer; font-variant-numeric: tabular-nums; transition: background 400ms, color 400ms, border-color 400ms; }
.heure:hover { border-color: var(--encre); }
.heure.choisie, .heure[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--creme); }

/* ---------- pages légales ---------- */
.legal { max-width: 720px; margin: 0; display: grid; gap: 18px; font-size: 15px; font-weight: 300; line-height: 1.7; }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin-top: 20px; }
.a-completer { border-bottom: 1px solid var(--or); }

/* ---------- pied de page ---------- */
.pied { background: var(--creme); color: var(--encre); padding: clamp(56px, 8vw, 110px) var(--marge) 28px; border-top: 1px solid var(--encre); }
.pied-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 40px; }
.pied-colonne { display: grid; gap: 12px; align-content: start; font-size: 13px; font-weight: 300; line-height: 1.7; }
.pied-colonne a { color: inherit; text-decoration: none; }
.pied-colonne a:hover { color: var(--cuivre); }
.pied-nom { font-family: var(--serif); font-size: 22px; letter-spacing: 0.3em; text-transform: uppercase; }
.pied-baseline { color: var(--gris); max-width: 40ch; }
.pied-identite .bouton-lien { justify-self: start; margin-top: 8px; }
.pied-titre { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gris); }
.pied-zone { max-width: 34ch; }
.pied-horaires li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--ligne); font-variant-numeric: tabular-nums; }
.pied-horaires li.aujourd-hui { color: var(--cuivre); }
.pied-bas { max-width: var(--largeur); margin: 56px auto 0; padding-top: 20px; border-top: 1px solid var(--ligne); display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris); align-items: center; }
.pied-bas nav { display: flex; flex-wrap: wrap; gap: 20px; }
.pied-bas a { color: inherit; text-decoration: none; }
.pied-bas a:hover { color: var(--encre); }
.pied-credit { margin-left: auto; }

/* ---------- mode édition ---------- */
body.mode-edition [data-apparition] { opacity: 1; transform: none; }
body.mode-edition [data-apparition="voile"] > * { clip-path: none; }
body.mode-edition .curseur, body.mode-edition .page-garde { display: none; }
[data-fond-texte="clair"] { color: var(--creme); }
[data-fond-texte="sombre"] { color: var(--encre); }

/* ---------- points de rupture ---------- */
@media (min-width: 720px) {
    .portraits { grid-template-columns: 1fr 1fr; }
    .ligne-champs { grid-template-columns: 1fr 1fr; }
    .chiffres { grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
    .materiel { grid-template-columns: 1fr 1fr; }
    .entete-tel { display: inline; }
    .chapitre { grid-template-columns: 1fr 1fr; gap: 56px; }
    .ouverture-mentions { justify-content: space-between; }
}
@media (min-width: 1000px) {
    .navigation { display: flex; }
    .entete-rdv { display: inline-flex; }
    .marque-logo { display: block; height: 60px; }
    .marque-nom, .marque-lieu { display: none; }
    .burger { display: none; }
    .ouverture-interieur { grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: end; }
    .chapitre { grid-template-columns: 1fr 1fr; gap: 96px; }
    .chapitre-image { max-width: 520px; justify-self: end; }
    .chapitre:nth-child(even) .chapitre-image { justify-self: start; }
    .estimation-interieur { grid-template-columns: 0.9fr 1.1fr; gap: 96px; align-items: start; }
    .bon { position: sticky; top: calc(var(--entete) + 24px); }
    .savoir-interieur { grid-template-columns: 0.9fr 1.1fr; gap: 96px; align-items: start; }
    .savoir-image { position: sticky; top: calc(var(--entete) + 24px); }
    .portraits { grid-template-columns: repeat(4, 1fr); }
    .adresses-interieur { grid-template-columns: 1fr 1fr; gap: 96px; }
    .maisons-interieur { grid-template-columns: 1.1fr 0.9fr; gap: 96px; align-items: center; }
    .entete-section-ligne { grid-template-columns: 1fr 1fr; }
    .tete-page-interieur { grid-template-columns: 1.2fr 1fr; }
    .intervenant-tete { grid-template-columns: 380px 1fr; gap: 72px; }
    .tarifs-intervenant { grid-template-columns: 1fr 1fr; gap: 64px; }
    .entreprise-grille { grid-template-columns: 1fr 1fr; gap: 96px; }
    .bon-ligne { grid-template-columns: 1fr auto auto; }
    .stepper { grid-column: auto; }
    .materiel { grid-template-columns: repeat(4, 1fr); }
    .pied-interieur { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; }
}

/* ---------- FeizClean : images en paysage, deux publics, questions, vitrerie sur devis ---------- */
.ouverture-image-large { aspect-ratio: 21 / 9; }
.ouverture-interieur:has(.ouverture-image-large) { grid-template-columns: 1fr; }
.ouverture-interieur:has(.ouverture-image-large) .ouverture-texte { max-width: 900px; }
.chapitre-image { aspect-ratio: 3 / 2; }
.savoir-image-large { aspect-ratio: 16 / 10; }
.portrait-image-large { aspect-ratio: 3 / 2; max-width: 520px; }
.marque-nom { letter-spacing: 0.22em; }
.pied-logo { width: 200px; height: auto; }
.bon-credit { grid-column: 1 / -1; font-size: 12px; color: var(--gris); letter-spacing: 0.02em; text-transform: none; padding-top: 6px; border-top: 1px solid var(--ligne); }
.bon-credit b { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--cuivre); }
.bon-credit[hidden] { display: none; }
.recap-credit { font-size: 12px; color: var(--gris); }
.recap-credit b { font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--cuivre); }
.publics-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: clamp(48px, 7vw, 110px); }
.public { display: grid; gap: 32px; scroll-margin-top: calc(var(--entete) + 16px); }
.public-image { aspect-ratio: 21 / 9; }
.public-texte { display: grid; gap: 20px; }
.public-arguments { display: grid; gap: 0; }
.public-arguments div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--ligne); }
.public-arguments dt { font-family: var(--serif); font-size: 19px; }
.public-arguments dd { margin: 0; font-size: 14px; font-weight: 300; color: var(--gris); max-width: 60ch; }
.questions-interieur { max-width: 900px; margin: 0 auto; }
.faq { display: grid; }
.question { border-top: 1px solid var(--ligne); }
.question:last-child { border-bottom: 1px solid var(--ligne); }
.question summary { list-style: none; display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: baseline; padding: 20px 0; cursor: pointer; }
.question summary::-webkit-details-marker { display: none; }
.faq .question summary:has(> .geste-titre:first-child) { grid-template-columns: 1fr auto; }
.question[open] .geste-plus { transform: rotate(45deg); }
.question > p { padding: 0 0 22px 60px; font-weight: 300; color: var(--gris); max-width: 60ch; }
.famille-detail .question > p { padding-left: 0; }
.sur-devis { display: grid; gap: 32px; }
.sur-devis-cadre { border: 1px solid var(--ligne); padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; background: var(--blanc); position: relative; align-content: start; }
.sur-devis-cadre::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--ligne); pointer-events: none; }
.sur-devis-cadre .bouton { justify-self: start; }
.famille-detail { display: grid; gap: 32px; padding-top: 12px; }
@media (min-width: 1000px) {
    .public { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
    .public:nth-child(even) .public-image { order: 2; }
    .public-image { aspect-ratio: 4 / 3; }
    .sur-devis { grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; }
    .famille-detail { grid-template-columns: 1fr 1fr; gap: 64px; }
    .savoir-interieur { grid-template-columns: 1fr 1fr; }
}

/* ---------- l'ouverture : la vitre embuée qu'on nettoie à la raclette (repris de Limpide) ---------- */
.vitre { position: relative; min-height: min(calc(100svh - var(--entete)), 960px); display: grid; align-items: end; overflow: hidden; background: var(--nuit); color: var(--creme); cursor: none; touch-action: pan-y; }
.vitre-fond { position: absolute; inset: 0; }
.vitre-fond img { width: 100%; height: 100%; object-fit: cover; }
.vitre-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 20, 0.18), rgba(20, 20, 20, 0.04) 40%, rgba(20, 20, 20, 0.72) 100%); }
.vitre-buee { position: absolute; inset: 0; width: 100%; height: 100%; }
.vitre-texte { position: relative; z-index: 5; /* au-dessus de la raclette (4) : elle passe sous le texte et les boutons */ padding: clamp(80px, 12vw, 160px) var(--marge) clamp(36px, 5vw, 64px); max-width: var(--largeur); margin: 0 auto; width: 100%; display: grid; gap: 22px; pointer-events: none; }
.vitre-texte .bouton, .vitre-texte a { pointer-events: auto; }
.vitre-texte .surtitre { color: color-mix(in srgb, var(--creme) 80%, transparent); }
.vitre-texte .surtitre::before { background: var(--or); }
.vitre-titre { font-size: clamp(42px, 6.6vw, 100px); max-width: 13ch; line-height: 1.02; padding-bottom: 0.1em; text-shadow: 0 2px 40px rgba(20, 20, 20, 0.45); }
.vitre-titre em { color: var(--cuivre-clair); }
.vitre-offre { font-size: clamp(16px, 1.4vw, 19px); font-weight: 300; max-width: 52ch; line-height: 1.6; color: color-mix(in srgb, var(--creme) 88%, transparent); text-shadow: 0 1px 20px rgba(20, 20, 20, 0.5); }
.vitre-offre strong { font-weight: 500; color: var(--creme); }
.vitre-actions .bouton-lien { color: var(--creme); }
.vitre-indice, .vitre-compteur { position: absolute; z-index: 3; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--creme) 35%, transparent); background: rgba(20, 20, 20, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--creme); pointer-events: none; }
.vitre-indice { left: var(--marge); top: 22px; opacity: 0; transition: opacity 600ms; }
.vitre.prete .vitre-indice { opacity: 1; }
.vitre.touchee .vitre-indice { opacity: 0; }
.vitre-compteur { right: var(--marge); top: 22px; font-variant-numeric: tabular-nums; }
.vitre-compteur b { font-family: var(--serif); font-size: 14px; letter-spacing: 0; color: var(--or); }
/* la raclette qui suit le pointeur : barre encre, lame sauge, manche laiton */
.raclette { position: absolute; z-index: 4; width: 150px; height: 90px; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 300ms; transform-origin: 50% 20px; will-change: transform; }
.raclette-barre { position: absolute; left: 0; top: 10px; width: 150px; height: 12px; background: var(--nuit); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.raclette-lame { position: absolute; left: 4px; top: 22px; width: 142px; height: 5px; background: var(--cuivre); }
.raclette-manche { position: absolute; left: 64px; top: 22px; width: 22px; height: 66px; background: var(--or); box-shadow: inset -5px 0 0 rgba(20, 20, 20, 0.2); }
.vitre.pointeur .raclette { opacity: 1; }
.ouverture-mentions-vitre { margin-top: 0; padding-inline: var(--marge); max-width: none; border-top: 0; }
.ouverture-mentions-vitre > * { max-width: var(--largeur); }
@media (hover: none) { .vitre { cursor: auto; } .raclette, .vitre-indice { display: none; } }
@media (prefers-reduced-motion: reduce) { .vitre-buee { display: none; } }
body.mode-edition .vitre { cursor: auto; }
body.mode-edition .vitre-buee, body.mode-edition .raclette { display: none; }

/* ---------- la page des tarifs : une table lisible par famille ---------- */
body.page-tarifs { font-size: 16px; }
.tete-page-droite { display: grid; gap: 22px; align-content: end; }
.page-tarifs .chiffres { margin-bottom: 0; }
.pourqui-collant { position: sticky; top: var(--entete); z-index: 20; background: color-mix(in srgb, var(--creme) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.pourqui-collant::-webkit-scrollbar { display: none; }
.pourqui-collant a { white-space: nowrap; }
.page-tarifs .famille { gap: 36px; scroll-margin-top: calc(var(--entete) + 60px); }
.famille-corps { display: grid; gap: 40px; align-items: start; }
.tarifs { width: 100%; border-collapse: collapse; }
.tarifs thead th { text-align: left; font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--or); padding: 0 0 12px; border-bottom: 1px solid var(--encre); }
.tarifs thead th.duree, .tarifs thead th.prix { text-align: right; }
.tarifs tbody th, .tarifs tbody td { vertical-align: top; padding: 22px 0; border-bottom: 1px solid var(--ligne); text-align: left; font-weight: 400; }
.tarifs tbody th { padding-right: 24px; }
.tarifs tbody td.duree { white-space: nowrap; text-align: right; padding-right: 24px; font-size: 15px; }
.tarifs tbody td.prix { text-align: right; white-space: nowrap; width: 1%; }
.tarifs tbody td.duree > *, .tarifs tbody td.prix > * { display: block; }
.tarifs tbody td .tarif-desc { margin-top: 4px; max-width: none; }
.tarif-nom { display: block; font-family: var(--serif); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.15; }
.tarif-desc { display: block; font-size: 14px; font-weight: 300; color: var(--gris); margin-top: 6px; max-width: 54ch; line-height: 1.5; }
.tarif-options { display: block; font-size: 13px; color: var(--cuivre-fonce); margin-top: 8px; }
.tarif-prix { font-family: var(--serif); font-size: clamp(22px, 2vw, 26px); line-height: 1; font-variant-numeric: tabular-nums; }
.tarif-prix small { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); }
.tarif-devis { font-family: var(--italique); font-style: italic; font-size: 20px; color: var(--cuivre); }
.tarif-unite { font-size: 12px; color: var(--gris); letter-spacing: 0.02em; }
.tarif-reserver { display: inline-block !important; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; margin-top: 8px; padding-bottom: 3px; border-bottom: 1px solid var(--encre); transition: color 300ms, border-color 300ms; }
.tarif-unite { display: block; margin-top: 4px; }
.tarif-reserver:hover { color: var(--cuivre); border-color: var(--cuivre); }
.famille-options { margin-top: 28px; }
.options-liste { display: grid; gap: 0; }
.options-liste div { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 10px 0; border-top: 1px solid var(--ligne); font-size: 15px; }
.options-liste dt { font-weight: 400; }
.options-liste dd { margin: 0; color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.famille-aside { display: grid; gap: 18px; align-content: start; }
.famille-aside .bouton { justify-self: start; }
.famille-image { aspect-ratio: 3 / 2; }
.compris { display: grid; gap: 0; }
.compris li { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--ligne); font-size: 14px; }
.compris strong { font-weight: 500; font-size: 15px; }
.compris span { font-weight: 300; color: var(--gris); }
.famille-questions { display: grid; gap: 10px; }
.questions-liste { display: grid; gap: 0 48px; }
.questions-liste div { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--ligne); }
.questions-liste dt { font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.questions-liste dd { margin: 0; font-size: 15px; font-weight: 300; color: var(--gris); line-height: 1.6; }
.page-tarifs .prix-note { max-width: none; font-size: 15px; }
.page-tarifs .prix-note .actions-ligne { margin-top: 8px; }
@media (max-width: 719px) {
    .tarifs thead { display: none; }
    .tarifs tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 18px 0; border-bottom: 1px solid var(--ligne); }
    .tarifs tbody th, .tarifs tbody td { padding: 0; border: 0; }
    .tarifs tbody th { grid-column: 1 / -1; }
    .tarifs tbody td.duree { text-align: left; padding: 0; white-space: normal; }
    .tarifs tbody td.prix { width: auto; }
}
@media (min-width: 1000px) {
    .famille-corps { grid-template-columns: 1.5fr 0.8fr; gap: 72px; }
    .famille-aside { position: sticky; top: calc(var(--entete) + 80px); }
    .questions-liste { grid-template-columns: 1fr 1fr; }
    .tete-page-droite { padding-bottom: 6px; }
}

/* ---------- les chapitres : rideau, cascade, filet, parallaxe ---------- */
[data-apparition="chapitre"] { opacity: 1; transform: none; }
.chapitre-image { position: relative; overflow: hidden; background: var(--sable); clip-path: inset(100% 0 0 0); transition: clip-path 1500ms var(--sortie); }
.chapitre-image img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--para, 0%)) scale(1.28); transition: transform 2600ms var(--sortie); will-change: transform; }
.chapitre.visible .chapitre-image, .visible > .chapitre-image { clip-path: inset(0 0 0 0); }
.chapitre.visible .chapitre-image img, .visible > .chapitre-image img { transform: translateY(var(--para, 0%)) scale(1.12); transition: transform 2600ms var(--sortie), --para 0s; }
.chapitre:hover .chapitre-image img { transform: translateY(var(--para, 0%)) scale(1.18); transition-duration: 4000ms; }
.chapitre-num, .chapitre-nom, .chapitre-desc, .chapitre-bas { opacity: 0; transform: translateY(22px); transition: opacity 1000ms var(--sortie), transform 1400ms var(--sortie), color 600ms; }
.chapitre-num { transform: translateX(-14px); transition-delay: 150ms; }
.chapitre-nom { transition-delay: 280ms; }
.chapitre-desc { transition-delay: 430ms; }
.chapitre-bas { transition-delay: 580ms; position: relative; padding-top: 16px; }
.chapitre-bas::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--ligne-forte); transform: scaleX(0); transform-origin: left; transition: transform 1400ms var(--sortie) 700ms; }
.chapitre.visible .chapitre-num, .chapitre.visible .chapitre-nom, .chapitre.visible .chapitre-desc, .chapitre.visible .chapitre-bas { opacity: 1; transform: none; }
.chapitre.visible .chapitre-bas::before { transform: scaleX(1); }
.chapitre-nom { display: inline-block; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: opacity 1000ms var(--sortie), transform 1400ms var(--sortie), background-size 900ms var(--sortie); }
.chapitre:hover .chapitre-nom { background-size: 100% 1px; }
.chapitre:hover .chapitre-num { color: var(--cuivre); letter-spacing: 0.32em; }
.chapitre-num { transition: opacity 1000ms var(--sortie), transform 1400ms var(--sortie), color 600ms, letter-spacing 900ms var(--sortie); }
.chapitre:hover .chapitre-bas strong { color: var(--cuivre); }
@media (prefers-reduced-motion: reduce) {
    .chapitre-image { clip-path: none; transition: none; }
    .chapitre-image img, .chapitre.visible .chapitre-image img, .chapitre:hover .chapitre-image img { transform: none; transition: none; }
    .chapitre-num, .chapitre-nom, .chapitre-desc, .chapitre-bas { opacity: 1; transform: none; transition: none; }
    .chapitre-bas::before { transform: none; }
}
body.mode-edition .chapitre-image { clip-path: none; }
body.mode-edition .chapitre-image img { transform: none; }
body.mode-edition .chapitre-num, body.mode-edition .chapitre-nom, body.mode-edition .chapitre-desc, body.mode-edition .chapitre-bas { opacity: 1; transform: none; }
/* le curseur s'élargit avec son texte */
.curseur.grand { width: auto; min-width: 92px; height: 92px; padding: 0 22px; border-radius: 999px; white-space: nowrap; }

/* ---------- les pages Particuliers et Entreprises ---------- */
.public-hero-image { aspect-ratio: 21 / 9; max-width: none !important; justify-self: stretch !important; }
.public-arguments-deux { gap: 0 48px; }
.cartes-prestations { display: grid; gap: 28px 20px; }
.carte-prestation { display: grid; gap: 10px; text-decoration: none; color: inherit; }
.carte-prestation-image { aspect-ratio: 3 / 2; display: block; }
.carte-prestation .chapitre-num { margin-top: 6px; }
.carte-prestation-nom { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.15; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size 900ms var(--sortie); display: inline; }
.carte-prestation:hover .carte-prestation-nom { background-size: 100% 1px; }
.carte-prestation-bas { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); }
@media (min-width: 720px) { .cartes-prestations { grid-template-columns: 1fr 1fr; } .public-arguments-deux { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cartes-prestations { grid-template-columns: repeat(4, 1fr); } }

/* ---------- le formulaire de contact : un cadre blanc, bien visible ---------- */
#contact .formulaire-bloc { background: var(--blanc); border: 1px solid var(--ligne-forte); padding: clamp(24px, 3vw, 40px); position: relative; }
#contact .formulaire-bloc::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--ligne); pointer-events: none; }
#contact .formulaire-bloc .formulaire { gap: 18px; }
#contact .formulaire button[type="submit"] { width: 100%; justify-content: center; padding: 18px 24px; }
.texte-doux { color: var(--gris); }
.texte-grand { font-weight: 400; }

.tarif-credit { display: inline-block; margin-top: 8px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cuivre); border: 1px solid var(--cuivre); padding: 5px 9px; }

/* ---------- la cartouche « 50 % crédit d'impôt immédiat » ---------- */
.cartouche { --taille: 150px; width: var(--taille); display: grid; gap: 6px; justify-items: center; color: var(--encre); pointer-events: none; }
.cartouche svg { width: 100%; height: auto; transform: rotate(-6deg); overflow: visible; }
.cartouche-chiffre { font-family: var(--serif); font-size: 58px; fill: currentColor; letter-spacing: -0.01em; }
.cartouche-pct { font-size: 30px; }
.cartouche-libelle { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; fill: currentColor; }
.cartouche-bande { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; fill: var(--cartouche-bande-texte, var(--creme)); }
.cartouche-etoile { font-size: 11px; letter-spacing: 0; }
.cartouche-note { font-size: 10px; letter-spacing: 0.06em; color: var(--gris); text-align: center; }
.cartouche-hero { position: absolute; z-index: 3; right: var(--marge); bottom: clamp(56px, 9vw, 120px); color: var(--creme); --cartouche-fond: rgba(20, 20, 20, 0.28); --cartouche-bande: var(--creme); --cartouche-bande-texte: var(--encre); --taille: clamp(120px, 13vw, 176px); }
.cartouche-hero .cartouche-note { color: color-mix(in srgb, var(--creme) 70%, transparent); }
.cartouche-tete { margin-top: clamp(20px, 3vw, 36px); }
.cartouche-tete .cartouche { --taille: 132px; --cartouche-fond: var(--blanc); }
@media (max-width: 719px) {
    .cartouche-hero { right: var(--marge); bottom: auto; top: 64px; --taille: 104px; }
    .cartouche-hero .cartouche-note { display: none; }
    .cartouche-tete .cartouche { --taille: 116px; }
}

/* ---------- ils nous font confiance : le bandeau qui défile ---------- */
.confiance { padding: clamp(28px, 4vw, 52px) 0; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); overflow: hidden; }
.confiance-tete { text-align: center; }
.confiance-tete .surtitre { margin-bottom: 22px; }
.defile { display: flex; width: max-content; animation: defiler 45s linear infinite; }
.defile:hover { animation-play-state: paused; }
.defile-liste { display: flex; align-items: baseline; flex: none; }
.defile-liste li { display: flex; align-items: baseline; gap: 40px; padding: 0 20px; white-space: nowrap; font-family: var(--serif); font-size: clamp(18px, 1.7vw, 24px); color: var(--gris); }
.defile-liste li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--or); align-self: center; }
.defile-liste li.confiance-fort { font-size: clamp(28px, 2.8vw, 40px); color: var(--encre); letter-spacing: 0.04em; }
@keyframes defiler { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .confiance { padding-inline: var(--marge); }
    .defile { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
    .defile-liste { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; row-gap: 12px; }
    .defile-liste li:last-child::after { display: none; }
    .defile-liste[aria-hidden="true"] { display: none; }
}
body.mode-edition .defile { animation: none; width: auto; }
body.mode-edition .defile-liste { flex-wrap: wrap; row-gap: 12px; }

/* ---------- la séquence : l'image épinglée change au fil des étapes ---------- */
.sequence { display: grid; }
.sequence-etape { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--ligne); }
/* l'étape en cours passe à l'encre, les autres restent en gris : lisibles (4,5:1) mais en retrait */
.sequence-titre, .geste-num, .sequence-texte { transition: color 700ms var(--sortie); }
.sequence-etape:not(.actif) .sequence-titre, .sequence-etape:not(.actif) .geste-num { color: var(--gris); }
.sequence-etape.actif .sequence-texte { color: var(--encre); }
.sequence-etape:last-child { border-bottom: 1px solid var(--ligne); }
.sequence-etape .geste-num { padding-top: 6px; }
.sequence-titre { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; margin-bottom: 10px; }
.sequence-texte { font-weight: 300; color: var(--gris); max-width: 52ch; line-height: 1.6; }
.savoir-image img.active { opacity: 1; transform: none; }
@media (max-width: 999px) {
    .savoir-image { position: sticky; top: var(--entete); z-index: 1; }
    .sequence-etape { padding: 24px 0; }
}

/* =====================================================================================
   MOBILE : le site se lit comme une application. Rien ne déborde, tout se touche du pouce,
   aucun texte sous 12 px, un en-tête compact toujours visible et une barre d'action en bas
   (appeler / composer mon devis). Uniquement du CSS : le HTML n'a pas bougé.
   ===================================================================================== */
@media (max-width: 719px) {
    :root { --entete: 64px; --marge: 20px; --gris: color-mix(in srgb, var(--encre) 82%, var(--creme)); --ligne: color-mix(in srgb, var(--encre) 22%, transparent); }
    html { scroll-padding-top: calc(var(--entete) + 12px); }
    body { font-size: 16px; line-height: 1.6; }

    /* --- lisibilité : les capitales espacées passent à 12 px, l'interlettrage se resserre --- */
    .surtitre, .pied-titre, .bon-tete, .bon-total div, .prochaine span, .ouverture-mentions, .chapitre-bas, .ligne-meta, .parole-qui, .portrait-titre, .carte-prestation-bas, .ouvert, .contrat-ligne label, .contrat-ligne .libelle, .planning-jour b, .recap-etape-nom, .tarifs thead th, .tarif-prix small, .ligne-prix .prix small, .choix-intervenant-titre, .geste-temp, .adresses-liste li small, .vitre-indice, .vitre-compteur, .ouverture-legende, .pastille, .menu-mobile-pied { font-size: 12px; letter-spacing: 0.16em; }
    .etiquette, .tarif-credit, .public-choix button { font-size: 12px; letter-spacing: 0.12em; padding: 8px 12px; }
    .marque-lieu { font-size: 10px; letter-spacing: 0.24em; }
    .petit, .champ label, .formulaire-champ > label { font-size: 12px; }
    .champ label, .formulaire-champ > label { letter-spacing: 0.14em; }
    .bon-unite, .tarif-unite, .prochain, .bon-minimum, .bon-credit, .recap-credit, .estimation-note, .formulaire-aide, .zone-reponse, .chiffre span, .pas span, .tarif-options, .champ-case, .formulaire-case, .recap-note, .pied-colonne { font-size: 14px; }
    .texte-grand { font-size: 17px; }
    .titre-page { font-size: clamp(34px, 9.4vw, 44px); }
    .titre-section { font-size: clamp(30px, 8.2vw, 38px); }
    .titre-bloc { font-size: 22px; }
    .jours { font-size: 12px; gap: 10px; }

    /* --- cibles tactiles : boutons hauts et pleins, liens avec une marge de pouce --- */
    .bouton { font-size: 12px; letter-spacing: 0.18em; padding: 17px 24px; min-height: 52px; }
    .bouton-petit { font-size: 12px; padding: 12px 16px; min-height: 44px; }
    .bouton-lien { font-size: 12px; letter-spacing: 0.18em; padding: 12px 0 10px; min-height: 44px; }
    .bouton-lien::after { font-size: 16px; }
    .lien-souligne { padding-block: 6px; margin-block: -6px; }
    .vitre-actions, .actions-ligne, .bon-actions, .rendezvous-interieur .actions-ligne, .famille-aside, .sur-devis-cadre, .public-texte .actions-ligne, .tete-page-droite .actions-ligne { display: grid; grid-template-columns: 1fr; gap: 12px; justify-items: stretch; }
    .vitre-actions .bouton, .actions-ligne .bouton, .bon-actions .bouton, .rendezvous-interieur .bouton, .famille-aside .bouton, .sur-devis-cadre .bouton, .prix-note .bouton, .contrat .bouton, .public-choix button { width: 100%; justify-self: stretch; }
    .vitre-actions .bouton-lien, .actions-ligne .bouton-lien, .bon-actions .bouton-lien, .rendezvous-interieur .bouton-lien { justify-content: center; width: 100%; }
    .stepper { gap: 6px; }
    .stepper button { width: 44px; height: 44px; font-size: 22px; }
    .stepper input { width: 60px; height: 44px; font-size: 20px; }
    .frequences button { padding: 14px 6px; font-size: 11px; }
    .livre-nav button { padding: 12px 8px; font-size: 14px; }

    /* --- en-tête compact, toujours visible ; la marque à gauche, le menu à droite --- */
    .entete { grid-template-columns: 1fr auto; gap: 12px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--creme); transform: none !important; }
    .entete .navigation { display: none; }
    .marque { justify-items: start; text-align: left; gap: 0; }
    .marque-logo { height: 26px; }
    .marque-nom { font-size: 15px; padding-left: 0; }
    .marque-lieu { padding-left: 0; }
    .entete-actions { gap: 0; }
    .burger { width: 48px; height: 48px; margin-right: -8px; }
    .burger span { width: 26px; }
    .menu-mobile { padding: calc(var(--entete) + 12px) var(--marge) calc(84px + env(safe-area-inset-bottom, 0px)); }
    .menu-mobile nav a { font-size: clamp(26px, 7vw, 32px); padding: 16px 0; gap: 14px; }
    .menu-mobile nav a small { font-size: 12px; width: 22px; }
    .menu-mobile-reserver { color: var(--cuivre); }
    .menu-mobile-pied { gap: 8px 20px; font-size: 13px; }
    .menu-mobile-pied a { padding: 10px 0; display: inline-block; }

    /* --- la barre d'action en bas : appeler à gauche, composer son devis à droite --- */
    .entete-tel, .entete-rdv { position: fixed; bottom: 0; z-index: 95; height: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 0 12px env(safe-area-inset-bottom, 0px); display: inline-flex !important; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; background: var(--creme); min-height: 0; border-top: 1px solid var(--encre); }
    .entete-tel { left: 0; width: 42%; color: var(--encre); font-variant-numeric: tabular-nums; letter-spacing: 0.1em; font-size: 15px; font-family: var(--serif); border-right: 1px solid var(--encre); }
    .entete-rdv { right: 0; width: 58%; background: var(--encre); color: var(--creme); gap: 10px; }
    .entete-rdv::after { transform: none; }
    body:has(.entete-rdv) .pied { padding-bottom: calc(28px + 64px + env(safe-area-inset-bottom, 0px)); }
    body.page-reserver .entete-tel, body.page-reserver .entete-rdv, body.mode-edition .entete-tel, body.mode-edition .entete-rdv { display: none !important; }
    body.page-reserver .pied { padding-bottom: 28px; }
    .messages { width: calc(100vw - 2 * var(--marge)); }

    /* --- sections plus serrées, en-têtes de section plus courts --- */
    .section { padding: 56px var(--marge); }
    .entete-section { gap: 12px; margin-bottom: 28px; }
    .surtitre { margin-bottom: 8px; }
    .tete-page { padding: 36px var(--marge) 28px; }
    .tete-page-interieur { gap: 22px; }
    .rendezvous { padding: 56px var(--marge); }
    .rendezvous-interieur { padding: 36px 20px; gap: 20px; }
    .pied { padding-top: 48px; }
    .pied-interieur { gap: 32px; }
    .pied-logo { width: 150px; }
    .pied-bas { margin-top: 36px; font-size: 12px; letter-spacing: 0.14em; gap: 8px 20px; }
    .pied-bas nav { gap: 4px 20px; }
    .pied-bas a { padding: 8px 0; display: inline-block; }
    .pied-credit { margin-left: 0; width: 100%; }
    .pied-horaires li { padding: 8px 0; }
    .pied-colonne p a { display: inline-block; padding: 5px 0; }
    .pied-colonne p { line-height: 1.5; }

    /* --- l'ouverture : titre plus court, mentions en deux colonnes --- */
    .vitre { min-height: calc(100svh - var(--entete)); }
    .vitre-texte { padding: 120px var(--marge) 28px; gap: 16px; }
    .vitre-titre { font-size: clamp(38px, 10.5vw, 48px); }
    .vitre-offre { font-size: 15px; }
    .vitre-indice { top: 14px; }
    .vitre-compteur { top: 14px; padding: 8px 12px; }
    .ouverture-mentions-vitre { display: grid; grid-template-columns: 1fr; gap: 0; padding: 4px var(--marge) 8px; }
    .ouverture-mentions-vitre .prochaine { gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
    .ouverture-mentions-vitre .prochaine:last-child { border-bottom: 0; }
    .prochaine { font-size: 14px; }
    .prochaine span { font-size: 11px; letter-spacing: 0.12em; }
    .prochaine strong { font-size: 17px; }
    .confiance { padding: 24px 0; }
    .defile-liste li { font-size: 17px; gap: 28px; padding: 0 14px; }
    .defile-liste li.confiance-fort { font-size: 26px; }

    /* --- les chapitres : image en paysage, texte serré, la ligne de prix bien détachée --- */
    .chapitre { gap: 16px; padding: 28px 0; }
    .chapitre-image { aspect-ratio: 16 / 10; }
    .chapitre-texte { gap: 10px; }
    .chapitre-nom { font-size: 28px; }
    .chapitre-desc { font-size: 15px; }
    .chapitre-bas { padding-top: 12px; justify-content: space-between; }
    .chapitre-bas strong { font-size: 19px; }
    .chapitre:nth-child(even) .chapitre-image { order: 0; } /* même ordre partout : texte puis image */
    .ed-pastille { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; } /* le bouton « Modifier le site » au-dessus de la barre d'action */

    /* --- le bordereau : une carte pleine largeur, des lignes qui respirent --- */
    .estimation-interieur { gap: 32px; }
    .pourquoi { gap: 10px; }
    .pas { grid-template-columns: 28px 1fr; gap: 10px; }
    .bon { margin: 0 calc(-1 * var(--marge) + 8px); }
    .bon-tete { padding: 22px 20px 12px; }
    .bon-lignes { padding: 0 20px; }
    .bon-ligne { padding: 14px 0; gap: 4px 12px; }
    .bon-nom { font-size: 17px; }
    .bon-montant { font-size: 17px; }
    .bon-ligne .stepper { margin-top: 4px; }
    .bon-total { padding: 18px 20px; gap: 12px; }
    .bon-total strong { font-size: 24px; }
    .bon-actions { padding: 0 20px 20px; }

    /* --- la séquence : l'image épinglée sous l'en-tête, les étapes lisibles --- */
    .savoir-interieur { gap: 20px; }
    .savoir-image-large { aspect-ratio: 16 / 9; box-shadow: 0 1px 0 var(--ligne), 0 12px 24px -16px rgba(20, 20, 20, 0.4); }
    .sequence-etape { grid-template-columns: 48px 1fr; gap: 12px; padding: 20px 0; }
    .sequence-etape .geste-num { font-size: 12px; padding-top: 5px; }
    .sequence-titre { font-size: 22px; margin-bottom: 6px; }
    .sequence-texte { font-size: 15px; }

    /* --- les deux publics et les questions --- */
    .public { gap: 20px; }
    .public-image { aspect-ratio: 16 / 10; }
    .public-texte { gap: 14px; }
    .public-arguments div { padding: 12px 0; }
    .public-arguments dt { font-size: 18px; }
    .public-arguments dd { font-size: 15px; }
    .questions-interieur .faq { margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge); }
    .question summary { grid-template-columns: 28px 1fr 20px; gap: 12px; padding: 18px 0; }
    .faq .question summary:has(> .geste-titre:first-child) { grid-template-columns: 1fr 20px; }
    .question summary .geste-titre { font-size: 18px; line-height: 1.25; }
    .question summary .geste-num { font-size: 12px; }
    .question > p { padding: 0 0 18px 0; font-size: 15px; }
    .adresses-interieur { gap: 28px; }
    .adresses-liste { gap: 0 16px; }
    .adresses-liste li { font-size: 15px; padding: 9px 0; }
    .zone-carte { padding: 20px; }
    .zone-form { grid-template-columns: 1fr auto; gap: 10px; }
    .zone-form input { font-size: 20px; padding: 10px 12px; }

    /* --- la carte des prestations en grille de deux, comme des vignettes --- */
    .cartes-prestations { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
    .carte-prestation { gap: 6px; }
    .carte-prestation-nom { font-size: 17px; }
    .carte-prestation .chapitre-num { display: none; }
    .chiffres { gap: 0; }
    .chiffre { grid-template-columns: auto 1fr; align-items: baseline; gap: 14px; padding: 14px 0; }
    .chiffre strong { font-size: 30px; min-width: 3.2ch; }
    .chiffre span { max-width: none; }

    /* --- la page des tarifs : sommaire qui glisse, lignes claires, bouton « Réserver » visible --- */
    .pourqui { margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge); gap: 0 22px; }
    .pourqui a { font-size: 12px; letter-spacing: 0.12em; padding: 14px 0; }
    .pourqui-collant { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
    .pourqui-collant a:last-child { padding-right: 40px; }
    .page-tarifs .famille { gap: 24px; padding: 28px 0; }
    .famille-corps { gap: 28px; }
    .tarifs tbody tr { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
    .tarifs tbody td.duree { font-size: 14px; color: var(--gris); display: flex; flex-wrap: wrap; gap: 2px 10px; }
    .tarifs tbody td.duree > * { display: inline; }
    .tarifs tbody td.prix { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; padding-top: 4px; }
    .tarifs tbody td.prix .tarif-prix { grid-column: 1; grid-row: 1; font-size: 24px; }
    .tarifs tbody td.prix .tarif-unite { grid-column: 1; grid-row: 2; margin-top: 2px; }
    .tarifs tbody td.prix .tarif-devis { grid-column: 1 / -1; }
    .tarifs tbody td.prix .tarif-reserver { grid-column: 2; grid-row: 1 / 3; margin: 0; padding: 13px 18px; border: 1px solid var(--encre); font-size: 12px; letter-spacing: 0.14em; }
    .tarif-nom { font-size: 20px; }
    .tarif-desc { font-size: 15px; }
    .tarif-options { font-size: 14px; }
    .options-liste div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
    .options-liste dd { white-space: normal; }
    .famille-aside { gap: 14px; }
    .compris li { padding: 12px 0; }
    .questions-liste div { padding: 14px 0; }
    .questions-liste dt { font-size: 18px; }
    .prix-note { padding: 20px; font-size: 15px; }

    /* --- la Maison : le formulaire de contact prend toute la largeur --- */
    #contact .formulaire-bloc { padding: 20px; margin: 0 calc(-1 * var(--marge) + 8px); }
    .entreprise-grille { gap: 40px; }
    .horaires-liste li { padding: 10px 0; }
    .intervenant-tete .portrait-image { max-width: none; }

    /* --- l'équipe, la gestion --- */
    .portraits { gap: 24px; }
    .portrait-nom { font-size: 22px; }
    .billet-partie { padding: 20px; }
    .heure { padding: 13px 16px; font-size: 14px; min-width: 76px; text-align: center; }
    .heures { gap: 8px; }
    .legal { font-size: 16px; }
    .legal h2 { font-size: 24px; }

    /* les gestes de survol n'existent pas au doigt : les images restent nettes, sans zoom lent */
    .image-lente img, .portrait-image img { transform: none; }
    .curseur { display: none; }
}
@media (max-width: 719px) and (max-width: 360px) {
    .entete-tel { width: 40%; font-size: 14px; }
    .cartes-prestations { grid-template-columns: 1fr; }
}

/* ---------- la demande vitrerie : photos et adresse ---------- */
.formulaire-photos input[type="file"] { width: 100%; padding: 18px 16px; border: 1px dashed var(--ligne-forte); background: var(--sable); font-size: 14px; color: var(--gris); cursor: pointer; }
.formulaire-photos input[type="file"]::file-selector-button { font: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 14px; margin-right: 14px; border: 1px solid var(--encre); background: var(--blanc); color: var(--encre); cursor: pointer; }
.formulaire-photos input[type="file"]:focus { outline: 0; border-color: var(--encre); box-shadow: 0 0 0 3px color-mix(in srgb, var(--encre) 12%, transparent); }