/* Maquette Mesnil Car Wash — direction artistique.
   Parti pris : le vert de ses flyers devient la couleur du site (aplats francs, pas de noir d'ambiance).
   Son citron vif, jugé trop agressif par le designer, est adouci en vert pistache : il sert de surface
   (le tableau des formules) et de bouton, jamais de lueur. Sur fond clair, les titres passent au vert forêt.
   Un seul angle, celui de son logotype en italique (12°), règle tout ce qui penche : les titres, les boutons
   et la coupe de la photo du hero. Mouvement : le « coup de raclette » une fois, sur le hero ; ailleurs, un fondu.
   Titres : Anybody, large et italique comme « MESNIL ». Étiquettes : Anybody très large en capitales, comme « CAR WASH ».
   Texte : Instrument Sans. Angles droits partout. */
:root {
  --bouteille: #0b4a20;
  --pistache: #b2db80;
  --craie: #f4f7f1;
  --studio: #0b0f0c;
  --foret: #1f7a3a;
  --titre: "Anybody", "Arial Black", sans-serif;
  --texte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --angle: 12deg;
  --btn: var(--pistache);
  --btn-encre: var(--studio);
}

/* Les cinq fonds. Chaque section pose ses encres ; les composants ne lisent que ces variables. */
.fond-blanc { --fond: #fff; --encre: #0b0f0c; --doux: #4d5a50; --accent: #1f7a3a; --trait: #dbe3d6; }
.fond-craie { --fond: #f4f7f1; --encre: #0b0f0c; --doux: #4d5a50; --accent: #1f7a3a; --trait: #d5dfcf; }
.fond-vert { --fond: #0b4a20; --encre: #fff; --doux: rgba(233, 245, 228, 0.82); --accent: #b2db80; --trait: rgba(255, 255, 255, 0.2); }
.fond-studio { --fond: #0b0f0c; --encre: #fff; --doux: rgba(255, 255, 255, 0.72); --accent: #b2db80; --trait: rgba(255, 255, 255, 0.18); }
.fond-pistache { --fond: #b2db80; --encre: #0b0f0c; --doux: rgba(11, 15, 12, 0.8); --accent: #0b4a20; --trait: rgba(11, 15, 12, 0.22); --btn: #0b0f0c; --btn-encre: #fff; }
.fond-blanc, .fond-craie, .fond-vert, .fond-studio, .fond-pistache { background: var(--fond); color: var(--encre); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: #fff; color: var(--studio); font: 400 1.0625rem/1.6 var(--texte); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent, #1f7a3a); outline-offset: 4px; }

h1, h2, h3 { font-family: var(--titre); font-style: italic; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 3.6vw, 3.35rem); font-stretch: 135%; line-height: 1; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.7rem, 2.9vw, 2.6rem); font-stretch: 125%; line-height: 1.04; letter-spacing: -0.012em; }
h3 { font-size: 1.2rem; font-stretch: 118%; font-weight: 700; line-height: 1.14; }
h1 em, h2 em { font-style: inherit; color: var(--accent); }
p { text-wrap: pretty; }
.label { font: 700 0.7rem/1.3 var(--titre); font-stretch: 150%; letter-spacing: 0.09em; text-transform: uppercase; }
.a-completer { background: #ffe45c; color: #2b2500; box-shadow: 0 0 0 2px #ffe45c; text-decoration: underline dotted 1px; text-underline-offset: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.conteneur { width: min(1240px, 100% - 48px); margin-inline: auto; }
.section { padding-block: clamp(72px, 9vw, 128px); }
.tete { max-width: 800px; margin-bottom: clamp(36px, 5vw, 60px); }
.tete p { margin-top: 18px; max-width: 600px; color: var(--doux); font-size: 1.125rem; }
.tete--centre { margin-inline: auto; text-align: center; }
.tete--centre p { margin-inline: auto; }

/* Bouton : un parallélogramme à l'angle du logotype. Au survol, un reflet le traverse. */
.btn { position: relative; display: inline-block; overflow: hidden; transform: skewX(calc(var(--angle) * -1)); background: var(--btn); color: var(--btn-encre); font: 700 0.9rem/1 var(--titre); font-stretch: 125%; font-style: italic; text-decoration: none; }
.btn > span { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 30px; transform: skewX(var(--angle)); white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn::after { content: ""; position: absolute; inset: 0 auto 0 -50%; width: 34%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); transition: left 0.55s cubic-bezier(0.3, 0, 0.2, 1); }
.btn:hover::after { left: 120%; }
.btn--sombre { --btn: #0b0f0c; --btn-encre: #fff; }
.boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.lien { display: inline-flex; align-items: center; gap: 9px; font: 600 1rem/1.2 var(--texte); color: var(--encre); text-decoration: underline 2px var(--accent); text-underline-offset: 6px; }
.lien svg { width: 17px; height: 17px; color: var(--accent); transition: translate 0.2s; }
.lien:hover svg { translate: 4px 0; }
.etoiles { display: inline-flex; gap: 3px; color: var(--accent); }
.etoiles svg { width: 18px; height: 18px; fill: currentColor; }

/* Photos. Elles arrivent en fondu, en se posant lentement (.revele).
   .lave : le coup de raclette, un voile de mousse balayé en biais, réservé à la photo du hero. */
.photo { position: relative; display: block; overflow: hidden; background: #16201a; }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mention { position: absolute; z-index: 3; right: 0; bottom: 0; padding: 6px 10px; background: rgba(11, 15, 12, 0.78); color: #e6efe0; font: 500 0.7rem/1 var(--texte); }
.js .revele { opacity: 0; translate: 0 16px; transition: opacity 0.8s ease, translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .revele.vu { opacity: 1; translate: 0 0; }
.js .revele.vu img { animation: pose 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
@keyframes pose { from { scale: 1.07; } }
.js .lave::before { content: ""; position: absolute; z-index: 2; inset: 0; -webkit-backdrop-filter: blur(16px) saturate(0.55) brightness(1.2); backdrop-filter: blur(16px) saturate(0.55) brightness(1.2); background: rgba(240, 248, 236, 0.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.075' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2.2 -1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23m)' opacity='.42'/%3E%3C/svg%3E"); clip-path: polygon(0 0, 125% 0, 125% 100%, -25% 100%); transition: clip-path 1.05s cubic-bezier(0.62, 0.02, 0.2, 1); pointer-events: none; }
.js .lave::after { content: ""; position: absolute; z-index: 2; top: -10%; bottom: -10%; left: -12%; width: 5px; background: #fff; box-shadow: 0 0 22px 6px rgba(255, 255, 255, 0.55); transform: skewX(calc(var(--angle) * -1)); opacity: 0; transition: left 1.05s cubic-bezier(0.62, 0.02, 0.2, 1), opacity 0.2s; pointer-events: none; }
.js .lave.vu::before { clip-path: polygon(125% 0, 125% 0, 125% 100%, 100% 100%); }
.js .lave.vu::after { left: 112%; }
.js .lave.passe::after { opacity: 1; }

/* ── entete.flottante — Navbar 13 : barre flottante compacte ───────────────── */
.entete { --accent: #1f7a3a; position: fixed; z-index: 50; top: 12px; left: 50%; translate: -50% 0; width: min(1240px, 100% - 24px); display: flex; align-items: center; gap: 26px; min-height: 68px; padding: 8px 18px 8px 22px; background: #fff; color: var(--studio); box-shadow: 0 12px 34px rgba(4, 22, 10, 0.22); }
.logo { flex: none; }
.logo img { height: 40px; width: auto; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { padding: 10px 13px; font: 500 0.97rem/1 var(--texte); text-decoration: none; }
.nav a:hover, .nav a[aria-current] { text-decoration: underline 2px var(--foret); text-underline-offset: 7px; }
.entete-actions { display: flex; align-items: center; gap: 14px; }
.entete .tel { display: inline-flex; align-items: center; gap: 8px; padding: 10px 6px; font: 600 0.97rem/1 var(--texte); text-decoration: none; white-space: nowrap; }
.entete .tel svg { width: 17px; height: 17px; color: var(--foret); }
.entete .btn > span { min-height: 46px; padding: 0 24px; }
.burger { display: none; width: 46px; height: 46px; background: var(--studio); color: var(--pistache); place-items: center; transform: skewX(calc(var(--angle) * -1)); }
.burger svg { width: 22px; height: 22px; transform: skewX(var(--angle)); }

/* ── hero.scinde — Header 36 : texte à gauche, photo bord à bord à droite ────
   La photo est coupée en biais, à l'angle du logotype ; un filet pistache longe la coupe. */
.hero { --h: min(100svh, 900px); --biais: calc(var(--h) * 0.2126); display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); min-height: var(--h); overflow: hidden; }
.hero-texte { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: 150px 0 64px max(24px, calc((100vw - 1240px) / 2)); }
.hero h1 { width: max-content; max-width: 46rem; margin-top: 22px; }
.hero h1 em { display: block; white-space: nowrap; }
.hero .accroche { max-width: 510px; margin-top: 26px; font-size: 1.17rem; color: var(--doux); }
.hero .boutons { margin-top: 34px; padding-left: 6px; }
.statut { display: inline-flex; align-items: center; gap: 11px; color: var(--doux); }
.statut::before { content: ""; width: 9px; height: 9px; background: currentColor; transform: skewX(calc(var(--angle) * -1)); }
.statut[data-ouvert="oui"] { color: var(--pistache); }
.hero-note { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-top: 30px; color: var(--doux); text-decoration: none; }
.hero-note b { color: var(--encre); font-weight: 600; }
.hero-note:hover b { text-decoration: underline; text-underline-offset: 4px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px 0; max-width: 520px; margin-top: 44px; color: var(--encre); font-stretch: 130%; }
.hero-points li + li::before { content: "/"; margin: 0 11px; color: var(--pistache); }
.hero-coupe { position: relative; margin-left: calc(var(--biais) * -0.55); }
.hero-coupe::before { content: ""; position: absolute; z-index: 1; inset: 0; background: var(--pistache); clip-path: polygon(var(--biais) 0, calc(var(--biais) + 9px) 0, 9px 100%, 0 100%); }
.hero-photo { position: absolute; inset: 0; clip-path: polygon(calc(var(--biais) + 22px) 0, 100% 0, 100% 100%, 22px 100%); }
.hero-photo img { object-position: 62% 30%; }

/* ── colonnes.centre-4-photo — Layout 301 : titre centré, quatre colonnes à photo ── */
.col4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.presta { display: flex; flex-direction: column; text-decoration: none; }
.presta .photo { aspect-ratio: 4 / 5; }
.presta:hover .photo img { scale: 1.05; }
.depuis { position: absolute; z-index: 3; left: 0; top: 0; padding: 9px 13px 8px; background: var(--pistache); color: var(--studio); font: italic 800 0.92rem/1 var(--titre); font-stretch: 120%; }
.presta h3 { margin-top: 20px; }
.presta p { margin-top: 10px; color: var(--doux); font-size: 1rem; }
.presta .lien { margin-top: auto; padding-top: 18px; align-self: flex-start; }

/* ── atouts.photo-gauche-grille-atouts — Layout 220 : photo à gauche, quatre atouts en grille ── */
.atouts { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.atouts > .photo { aspect-ratio: 4 / 5; }
.atouts .intro { margin-top: 18px; max-width: 560px; color: var(--doux); font-size: 1.125rem; }
.grille-atouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; margin-top: 42px; }
.grille-atouts > div { padding: 26px 0 28px; border-top: 2px solid var(--encre); }
.grille-atouts svg { width: 28px; height: 28px; color: var(--accent); }
.grille-atouts h3 { margin-top: 14px; font-size: 1.1rem; }
.grille-atouts p { margin-top: 8px; color: var(--doux); font-size: 1rem; }

/* ── tarifs.prix-droite-2 — Pricing 36 : cartes sur deux colonnes, le prix à droite.
   Le tableau des formules : fond pistache, cartes noires. ── */
.tarifs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tarif { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 132px; padding: 26px 30px; background: #0b0f0c; color: #fff; text-decoration: none; transition: translate 0.2s; }
.tarif:hover { translate: 0 -4px; }
.tarif h3 { font-size: 1.32rem; }
.tarif p { margin-top: 8px; color: rgba(255, 255, 255, 0.7); font-size: 0.98rem; }
.tarif > div:first-child { min-width: 0; }
.prix { flex: none; max-width: 54%; text-align: right; }
.prix .label { display: block; margin-bottom: 10px; color: rgba(255, 255, 255, 0.7); }
.prix b { font: italic 800 2.3rem/1 var(--titre); font-stretch: 125%; color: var(--pistache); white-space: nowrap; }
.prix b.devis { font-size: 1.35rem; }
.prix .a-completer { box-shadow: 0 0 0 4px #ffe45c; }
.tarifs-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 30px; margin-top: 34px; }
.tarifs-pied p { max-width: 640px; color: var(--doux); }

/* ── galerie.grande-deux — Gallery 7 : une grande photo, deux à côté ───────── */
.galerie { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; height: clamp(440px, 52vw, 680px); }
.galerie .photo { width: 100%; height: 100%; cursor: zoom-in; }
.galerie .photo:first-child { grid-row: span 2; }
.galerie .photo:hover img { scale: 1.04; }

/* ── avis.une-carrousel — Testimonial 10 : un avis à la fois, étoiles ──────── */
.avis { max-width: 980px; margin-inline: auto; text-align: center; }
.avis-piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.avis-piste::-webkit-scrollbar { display: none; }
.avis-fiche { flex: 0 0 100%; scroll-snap-align: center; padding: 4px clamp(0px, 3vw, 40px); }
.avis .etoiles svg { width: 26px; height: 26px; }
.avis blockquote { margin-top: 28px; font: italic 700 clamp(1.5rem, 2.9vw, 2.45rem)/1.16 var(--titre); font-stretch: 118%; letter-spacing: -0.01em; text-wrap: balance; }
.avis figcaption { margin-top: 28px; color: var(--doux); }
.avis figcaption b { color: var(--encre); font-weight: 600; }
.avis-cmd { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 36px; }
.avis-btn { display: grid; place-items: center; width: 46px; height: 46px; background: var(--pistache); color: var(--studio); transform: skewX(calc(var(--angle) * -1)); transition: background 0.2s, color 0.2s; }
.avis-btn:hover { background: var(--studio); color: var(--pistache); }
.avis-btn svg { width: 20px; height: 20px; transform: skewX(var(--angle)); }
.avis-btn--pause { margin-left: 10px; background: none; box-shadow: inset 0 0 0 2px var(--encre); }
.avis-btn--pause .i-lecture, .avis-btn--pause[aria-pressed="true"] .i-pause { display: none; }
.avis-btn--pause[aria-pressed="true"] .i-lecture { display: block; }
.avis-compte { min-width: 64px; color: var(--doux); }
.avis-compte b { color: var(--encre); }
.avis-pied { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 12px 28px; margin-top: 40px; padding-top: 30px; border-top: 2px solid var(--encre); }
.avis-pied b { font: italic 800 1.7rem/1 var(--titre); font-stretch: 125%; }
.avis-pied span { color: var(--doux); }

/* ── faq.deux-colonnes — FAQ 10 : questions sur deux colonnes ──────────────── */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 60px; }
.questions details { border-top: 2px solid var(--encre); }
.questions summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 5px 22px 0; font: 600 1.1rem/1.3 var(--texte); cursor: pointer; list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: ""; flex: none; width: 30px; height: 30px; transform: skewX(calc(var(--angle) * -1)); background: var(--pistache) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0f0c' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 15px no-repeat; }
.questions details[open] summary::after { background-color: var(--studio); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2db80' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.questions details p { padding: 0 52px 26px 0; color: var(--doux); }
.questions > details:last-child, .questions--centre details:last-child { border-bottom: 2px solid var(--encre); }
.faq > div details:last-child { border-bottom: 2px solid var(--encre); }
.questions--centre { max-width: 820px; margin-inline: auto; }

/* ── contact.coordonnees-plan-dessous — Contact 16 : coordonnées, plan dessous ── */
.coord { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 30px; }
.coord > div { padding-top: 24px; border-top: 2px solid var(--encre); }
.coord svg.picto { width: 28px; height: 28px; color: var(--accent); }
.coord h3 { margin-top: 14px; font-size: 1.1rem; }
.coord p { margin-top: 8px; color: var(--doux); }
.coord .lien { margin-top: 14px; }
.plan { margin-top: 56px; background: var(--bouteille); }
.plan iframe { display: block; width: 100%; height: clamp(360px, 36vw, 480px); border: 0; }
.plan-cmd { --encre: #fff; --accent: var(--pistache); display: flex; justify-content: flex-end; padding: 14px 22px; }

/* ── appel.deux-appels — CTA 35 : deux appels côte à côte ──────────────────── */
.deux-appels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.appel { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 4vw, 54px); }
.appel h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
.appel p { margin: 16px 0 34px; max-width: 440px; color: var(--doux); }
.appel .boutons { margin-top: auto; padding-left: 6px; }

/* ── entete-page — Header 44 (gauche), 47 (colonnes), 50 (photo-gauche), 56 (photo-colonnes) ── */
.page-tete { position: relative; overflow: hidden; padding: 168px 0 clamp(56px, 7vw, 96px); }
.page-tete .conteneur { position: relative; z-index: 2; }
.fil { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 26px; color: var(--doux); }
.fil a { text-decoration: none; }
.fil a:hover { color: var(--encre); }
.fil span[aria-hidden] { color: var(--accent); }
.page-tete h1 { max-width: 16em; }
.page-tete .chapo { max-width: 560px; margin-top: 24px; font-size: 1.17rem; color: var(--doux); }
.page-tete .boutons { margin-top: 32px; padding-left: 6px; }
.pt-colonnes { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 76px); align-items: end; }
.pt-colonnes .chapo { margin-top: 0; }
.pt-colonnes--haut { align-items: start; }
.pt-colonnes .intro { color: var(--doux); font-size: 1.125rem; }
.pt-colonnes .intro + .intro { margin-top: 16px; }
.pt-colonnes--haut .boutons { margin-top: 30px; padding-left: 6px; }
.pt-fond { position: absolute; inset: 0; }
.pt-fond img { width: 100%; height: 100%; object-fit: cover; }
.pt-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 74, 32, 0.97) 0, rgba(11, 74, 32, 0.88) 46%, rgba(11, 74, 32, 0.42) 100%); }
.page-tete--photo-colonnes .pt-fond::after { background: rgba(11, 74, 32, 0.86); }
.page-tete--photo-gauche .chapo, .page-tete--gauche .chapo { max-width: 600px; }

/* ── colonnes.seules-2-photo-centre — Layout 178 : deux colonnes à photo, texte centré ── */
.col2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 24px; }
.col2 .presta { align-items: center; text-align: center; }
.col2 .presta .photo { width: 100%; aspect-ratio: 16 / 10; }
.col2 .presta h3 { margin-top: 24px; font-size: 1.5rem; }
.col2 .presta p { max-width: 460px; }
.col2 .presta .lien { align-self: center; }

/* ── tarifs.tableau — Pricing 21 : le tableau des prix par catégorie (fond pistache, tableau noir) ── */
.tableau { padding: clamp(20px, 3vw, 40px); background: #0b0f0c; color: #fff; }
.tab-groupe + .tab-groupe { margin-top: 36px; }
.tab-groupe > .label { color: var(--pistache); }
.tab-groupe ul { margin-top: 12px; }
.tab-groupe li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 24px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.tab-groupe p { margin-top: 5px; color: rgba(255, 255, 255, 0.7); font-size: 0.98rem; }
.tab-groupe .dep { color: rgba(255, 255, 255, 0.7); }
.tab-prix { min-width: 5.4em; font: italic 800 1.7rem/1 var(--titre); font-stretch: 125%; color: var(--pistache); text-align: right; white-space: nowrap; }
.tab-prix .a-completer, .tarif3 .a-completer { box-shadow: 0 0 0 4px #ffe45c; }

/* ── appel.photo-cote — CTA 1 : texte à gauche, photo à droite ─────────────── */
.appel-cote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 88px); align-items: center; }
.appel-cote .photo { aspect-ratio: 4 / 3; }
.appel-cote p { margin: 18px 0 32px; max-width: 480px; color: var(--doux); font-size: 1.125rem; }
.appel-cote .boutons { padding-left: 6px; }

/* ── appel.centre-carte-photo — CTA 53 : carte centrée sur photo ───────────── */
.appel-photo { position: relative; overflow: hidden; }
.appel-photo .conteneur { position: relative; z-index: 2; }
.ap-fond { position: absolute; inset: 0; }
.ap-fond img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) saturate(0.85); scale: 1.03; }
.ap-fond::after { content: ""; position: absolute; inset: 0; background: rgba(7, 44, 20, 0.62); }
.ap-carte { max-width: 780px; margin-inline: auto; padding: clamp(32px, 5vw, 68px); text-align: center; }
.ap-carte p { margin: 16px auto 32px; max-width: 480px; color: var(--doux); }
.ap-carte .boutons { justify-content: center; }

/* ── appel.ligne-carte-photo — CTA 47 : carte sur photo, titre à gauche, boutons à droite ── */
.al-carte { --encre: #fff; --doux: rgba(255, 255, 255, 0.84); --accent: var(--pistache); position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px 44px; padding: clamp(32px, 5vw, 68px); color: #fff; }
.al-carte > :not(.ap-fond) { position: relative; z-index: 2; }
.al-carte .ap-fond::after { background: linear-gradient(90deg, rgba(11, 74, 32, 0.96), rgba(11, 74, 32, 0.62)); }
.al-carte p { margin-top: 12px; max-width: 520px; color: var(--doux); }

/* ── atouts.photo-droite-liste-icones — Layout 16 : liste à icônes, photo à droite ── */
.atouts--inverse { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.liste-icones { margin-top: 34px; }
.liste-icones li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 18px; padding: 20px 0; border-top: 2px solid var(--encre); }
.liste-icones svg { grid-row: span 2; width: 26px; height: 26px; color: var(--accent); }
.liste-icones h3 { font-size: 1.1rem; }
.liste-icones p { color: var(--doux); font-size: 1rem; }

/* Titre sur le côté : etapes.laterale-cartes, faq.scinde, galerie.laterale-2 */
.scinde { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.scinde > div:first-child p { margin-top: 18px; max-width: 420px; color: var(--doux); font-size: 1.125rem; }
.scinde > div:first-child .lien { margin-top: 26px; }

/* ── etapes.laterale-cartes — Timeline 2 : frise de cartes à côté du titre ─── */
.etapes-cartes { display: grid; gap: 14px; counter-reset: etape; }
.etapes-cartes li { counter-increment: etape; padding: 26px 30px 28px; background: #fff; }
.etapes-cartes li::before { content: "Étape " counter(etape); display: block; margin-bottom: 12px; font: 700 0.7rem/1.3 var(--titre); font-stretch: 150%; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.etapes-cartes p { margin-top: 8px; color: var(--doux); }

/* ── etapes.alternee — Timeline 9 : frise centrale, étapes de part et d'autre ── */
.frise { position: relative; max-width: 980px; margin-inline: auto; counter-reset: etape; }
.frise::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 50%; width: 2px; margin-left: -1px; background: var(--encre); }
.frise li { position: relative; width: 50%; padding: 0 52px 46px 0; counter-increment: etape; text-align: right; }
.frise li:nth-child(even) { margin-left: 50%; padding: 0 0 46px 52px; text-align: left; }
.frise li:last-child { padding-bottom: 0; }
.frise li::before { content: counter(etape); position: absolute; top: -4px; right: -18px; display: grid; place-items: center; width: 36px; height: 36px; background: var(--pistache); color: var(--studio); font: italic 800 0.98rem/1 var(--titre); transform: skewX(calc(var(--angle) * -1)); }
.frise li:nth-child(even)::before { right: auto; left: -18px; }
.frise p { margin-top: 8px; color: var(--doux); }

/* ── tarifs.centre-3 — Pricing 18 : trois cartes centrées ──────────────────── */
.tarifs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tarif3 { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 38px 24px 40px; background: #0b0f0c; color: #fff; text-align: center; }
.tarif3 h3 { font-size: 1.25rem; }
.tarif3 .label { color: rgba(255, 255, 255, 0.7); }
.tarif3 b { font: italic 800 2.5rem/1 var(--titre); font-stretch: 125%; color: var(--pistache); }
.tarif3 b.devis { font-size: 1.45rem; }

/* ── galerie.laterale-2 — Gallery 26 : titre sur le côté, deux photos ──────── */
.galerie2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.galerie2 .photo { width: 100%; aspect-ratio: 4 / 5; cursor: zoom-in; }
.galerie2 .photo:hover img { scale: 1.04; }

/* ── contact.scinde-detaille — Contact 6 : coordonnées et formulaire détaillé ── */
.contact-grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 76px); align-items: start; }
.contact-liste { margin-top: 34px; }
.contact-liste li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 18px; padding: 20px 0; border-top: 2px solid var(--encre); }
.contact-liste svg { grid-row: span 2; width: 26px; height: 26px; color: var(--accent); }
.contact-liste h3 { font-size: 1.05rem; }
.contact-liste p, .contact-liste a { color: var(--doux); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: clamp(24px, 4vw, 46px); background: #fff; }
.form .plein { grid-column: 1 / -1; }
.form label { display: grid; gap: 8px; font: 600 0.93rem/1.3 var(--texte); }
.form input, .form select, .form textarea { width: 100%; min-height: 52px; padding: 13px 14px; border: 2px solid var(--trait); border-radius: 0; background: #fff; color: var(--studio); font: 400 1rem/1.4 var(--texte); }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--foret); outline-offset: 0; border-color: var(--studio); }
.form-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; padding-left: 6px; }
.form .note { flex: 1 1 240px; color: var(--doux); font-size: 0.88rem; }
.form-ok { display: none; grid-column: 1 / -1; padding: 16px 18px; background: var(--pistache); font-weight: 600; }
.form.envoye .form-ok { display: block; }

/* ── contact.adresse-plan — Contact 25 : le lieu et son plan, centrés ──────── */
.adresse { max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.adresse p { margin-top: 16px; color: var(--doux); font-size: 1.125rem; }
.adresse .boutons { justify-content: center; margin-top: 28px; }
.adresse + .plan { margin-top: 0; }

/* ── pied.carte-coordonnees — Footer 11 : carte avec coordonnées ───────────── */
.pied { padding: clamp(24px, 3vw, 40px) 0; }
main:has(> .fond-vert:last-child) + .pied { padding-top: 0; }
.pied-carte { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; gap: 40px; padding: clamp(28px, 4vw, 54px); }
.pied-carte > div:first-child img { width: 232px; }
.pied-carte > div:first-child p { margin-top: 18px; max-width: 340px; color: var(--doux); }
.pied .label { margin-bottom: 16px; color: var(--accent); }
.pied li { margin-top: 9px; color: var(--doux); }
.pied li a { text-decoration: none; }
.pied li a:hover { color: var(--encre); text-decoration: underline 2px var(--accent); text-underline-offset: 5px; }
.pied-bas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding-top: 24px; border-top: 2px solid var(--encre); color: var(--doux); font-size: 0.88rem; }

/* ── barre-appel.appel-et-devis : barre d'appel sur téléphone ──────────────── */
.barre-appel { display: none; }

/* Visionneuse */
dialog.visionneuse { max-width: min(94vw, 1100px); padding: 0; border: 0; background: var(--studio); overflow: hidden; }
dialog.visionneuse::backdrop { background: rgba(5, 12, 8, 0.88); }
dialog.visionneuse img { max-height: 88vh; width: auto; margin: auto; }
dialog.visionneuse button { position: absolute; top: 0; right: 0; width: 48px; height: 48px; background: var(--pistache); color: var(--studio); display: grid; place-items: center; }
dialog.visionneuse button svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .lave::before, .js .lave::after { display: none; }
  .js .revele { opacity: 1; translate: 0 0; transition: none; }
  .js .revele.vu img { animation: none; }
  .avis-piste { scroll-behavior: auto; }
  .photo img, .btn::after, .tarif, .lien svg { transition: none; }
}

/* ── Écrans moyens ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav, .entete .tel span { display: none; }
  .entete { gap: 12px; }
  .entete-actions { margin-left: auto; }
  .burger { display: grid; }
  .entete.ouvert { flex-wrap: wrap; }
  .entete.ouvert .nav { display: flex; flex-direction: column; order: 5; width: 100%; margin: 6px 0 8px; padding-top: 8px; border-top: 2px solid var(--studio); }
  .entete.ouvert .nav a { padding: 15px 4px; font-size: 1.08rem; }
  .col4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .coord { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 30px; }
  .pied-carte { grid-template-columns: 1fr 1fr; }
  .pied-carte > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero { --biais: 0px; grid-template-columns: 1fr; min-height: 0; }
  .hero-texte { padding: 128px 24px 44px; }
  .hero h1 { width: auto; font-size: min(8.4vw, 2.5rem); font-stretch: 108%; }
  .hero-coupe { margin-left: 0; aspect-ratio: 4 / 3.7; }
  .hero-coupe::before { clip-path: none; inset: 0 0 auto 0; height: 8px; }
  .hero-photo { clip-path: none; top: 8px; }
  .hero-photo img { object-position: 50% 30%; }
  .atouts { grid-template-columns: 1fr; }
  .atouts > .photo { aspect-ratio: 4 / 3.4; }
  .tarifs, .deux-appels, .faq { grid-template-columns: 1fr; }
  .faq > div:first-child details:last-child { border-bottom: 0; }
  .galerie { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; }
  .galerie .photo { aspect-ratio: 1; }
  .galerie .photo:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  body { padding-bottom: 78px; }
  h2 { font-stretch: 112%; }
  .entete .btn { display: none; }
  .btn > span { white-space: normal; padding-block: 10px; text-align: center; }
  .barre-appel { position: fixed; z-index: 40; inset: auto 0 0 0; display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; gap: 14px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: var(--studio); color: #fff; }
  .barre-appel .appeler { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; font: 600 1.02rem/1 var(--texte); text-decoration: none; }
  .barre-appel .appeler svg { width: 19px; height: 19px; color: var(--pistache); }
  .barre-appel .btn { display: block; }
  .hero .boutons, .appel .boutons, .tarifs-pied { align-items: stretch; flex-direction: column; }
  .hero .boutons .btn, .appel .btn, .tarifs-pied .btn { display: block; margin-inline: 6px; }
  .hero-points { flex-direction: column; }
  .hero-points li + li::before { content: none; }
  .tarif { padding: 22px; min-height: 0; }
  .prix b { font-size: 1.8rem; }
  .plan-cmd { justify-content: center; }
  .pied-carte { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .conteneur { width: min(1240px, 100% - 36px); }
  .col4, .grille-atouts, .coord { grid-template-columns: 1fr; }
  .presta .photo { aspect-ratio: 4 / 3.4; }
  .questions details p { padding-right: 0; }
}

/* Pages intérieures : écrans moyens et téléphones */
@media (max-width: 900px) {
  .page-tete { padding-top: 132px; }
  .pt-colonnes, .appel-cote, .scinde, .contact-grille, .atouts--inverse, .col2, .tarifs3 { grid-template-columns: 1fr; }
  .appel-cote .photo { order: -1; }
  .frise::before { left: 17px; }
  .frise li, .frise li:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 36px 62px; text-align: left; }
  .frise li::before, .frise li:nth-child(even)::before { right: auto; left: 0; }
  .pt-fond::after { background: rgba(11, 74, 32, 0.88); }
}
@media (max-width: 720px) {
  .boutons { flex-direction: column; align-items: stretch; }
  .boutons .btn { display: block; margin-inline: 6px; }
  .boutons .lien { align-self: center; }
  .page-tete .boutons, .appel-cote .boutons, .pt-colonnes--haut .boutons { padding-left: 0; }
  .form { grid-template-columns: 1fr; }
  .form-pied { flex-direction: column; align-items: stretch; padding-left: 0; }
  .form-pied .btn { margin-inline: 6px; }
  .tab-groupe li { grid-template-columns: minmax(0, 1fr) auto; }
  .tab-groupe .dep { display: none; }
  .tab-prix { min-width: 0; font-size: 1.4rem; }
  .galerie2 { grid-template-columns: 1fr 1fr; }
}