/* Maison Lustre, entretien des vitres et des étoffes, Paris. 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: #b39b6b;              /* laiton : filets, numéros */
    --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) 55%, var(--creme));
    --ligne: color-mix(in srgb, var(--encre) 14%, transparent);
    --ligne-forte: color-mix(in srgb, var(--encre) 40%, 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); }
[data-apparition="voile"] { clip-path: inset(0 0 100% 0); opacity: 1; }
[data-apparition].visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
    [data-apparition] { opacity: 1; transform: none; 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.32em; text-transform: uppercase; transition: opacity 900ms var(--sortie), visibility 0s 900ms; animation: garde-fin 900ms var(--sortie) 3200ms forwards; }
@keyframes garde-fin { to { opacity: 0; visibility: hidden; } }
.page-garde span { opacity: 0; animation: garde 1400ms var(--sortie) forwards; }
.page-garde.levee { opacity: 0; visibility: hidden; }
@keyframes garde { to { opacity: 1; letter-spacing: 0.4em; } }
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; }
@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 { height: 30px; width: auto; }
.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: 28px; }
.navigation a { text-decoration: none; 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 0; border: 0; border-bottom: 1px solid var(--encre); background: transparent; font-family: var(--serif); font-size: 26px; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.zone-form input:focus { outline: 0; border-bottom-color: var(--cuivre); }
.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: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); }
.champ input, .champ select, .champ textarea, .formulaire-champ input:not([type="checkbox"]), .formulaire-champ select, .formulaire-champ textarea { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--ligne-forte); background: transparent; transition: border-color 400ms; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .formulaire-champ input:focus, .formulaire-champ textarea:focus { border-bottom-color: var(--encre); outline: 0; }
.champ textarea, .formulaire-champ textarea { min-height: 120px; 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: 14px; font-weight: 300; color: var(--gris); max-width: 56ch; }
.formulaire-aide { font-size: 11px; 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-bottom-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; 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; }
    .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; }
}