/* *À jour au 29/09/2026* · Baskan78 · la page (phase 06). Ne lit que tokens.css.
   Sources de mise en page : masconstruction.pro (brief.md, valeurs lues dans style.css / helpers.css),
   constructiondesourdy.com (index.html, RotatingImages.js), kozowood.com (menu, cadre dans le cadre, rond qui s'ouvre). */
@font-face{font-family:"Young Serif";src:url(../fonts/YoungSerif-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/InstrumentSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/InstrumentSans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:400 var(--fs-corps)/1.6 var(--f-texte);color:var(--brun);background:var(--pierre);overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.c{width:var(--w);margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}
section{position:relative}
.xxx{background:var(--lavis);color:var(--rouge);font-weight:700;padding:0 .2em}
.manque{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:var(--pierre-2);border:1px dashed var(--rouge);color:#B0231A;font:700 14px/1.4 var(--f-texte)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;background:var(--rouge);color:#fff;font:700 16px/1 var(--f-texte);text-decoration:none;position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;background:var(--brun);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-maison);z-index:-1}
.btn:hover::after{transform:scaleX(1);transform-origin:left}
.btn .fl{transition:transform .3s var(--ease-maison)} .btn:hover .fl{transform:translateX(4px)}
.tel{font-weight:700;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;white-space:nowrap}
.tel:hover{background-size:0 1px;background-position:100% 100%;transition:background-size .3s var(--ease-maison)}

/* ---------- la barre inexistante (kozowood) ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:30;padding-top:max(16px,calc(11.827px + 1.07vw));color:var(--pierre);transition:color .35s var(--ease-maison),transform .6s var(--ease-maison)}
.bar.sur-clair{color:var(--brun);--logo-r:var(--rouge)}
/* le logo de Serkan (28/09) : deux couleurs, pilotées par le fond survolé */
.ls{fill:currentColor}.lr{fill:var(--logo-r,var(--rouge))}
.bar.sur-clair .marque .wm{color:var(--rouge)}   /* le wordmark de Saadou garde son rouge sur fond clair */
.bar{--logo-r:var(--pierre)}   /* sur photo et sur sombre : le logo en une couleur, lisible */
.panneau{--logo-r:var(--rouge-clair)}
.bar .marque{transition:color .35s var(--ease-maison)}
.bar .c{width:calc(100% - 2 * max(16px,2.6vw));display:flex;align-items:center;justify-content:space-between;gap:19px;min-height:max(53px,calc(46.4px + 1.64vw))}   /* plus large que la colonne (Saadou 28/09) ; tout ×1,2 */
.bar .marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.bar .marque .sy{height:49px;width:auto}
.bar .marque .wm{height:31px;width:auto}
.bar nav{display:flex;align-items:center;gap:26px;font-size:19px}
.bar .menu-btn{display:inline-flex;align-items:center;gap:12px;min-height:53px;padding:0 5px;font-weight:700}
.bar .menu-btn i{display:block;width:22px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.bar .btn{min-height:55px;padding:0 22px;font-size:18px}
/* le panneau plein écran (kozowood [data-component=menu]) */
.panneau{position:fixed;inset:0;z-index:40;background:var(--brun);color:var(--pierre);display:flex;flex-direction:column;justify-content:space-between;padding:max(16px,calc(11.827px + 1.07vw)) 0 40px;transform:translateY(-101%);transition:transform .8s var(--ease-maison);visibility:hidden}
.panneau.ouvert{transform:none;visibility:visible}
.panneau .haut{display:flex;justify-content:space-between;align-items:center;min-height:max(44px,calc(38.657px + 1.37vw))}
.panneau .haut .marque{color:var(--pierre)}
.panneau .haut .marque svg{height:49px;width:auto}
.panneau ol{list-style:none;counter-reset:m}
.panneau li{counter-increment:m;border-bottom:1px solid var(--ligne-inv);overflow:hidden}
.panneau li a{display:flex;align-items:baseline;gap:18px;padding:14px 0;font:400 max(30px,calc(21.654px + 2.14vw))/1.05 var(--f-titre);text-decoration:none;transform:translateY(105%);transition:transform .7s var(--ease-maison)}
.panneau li a::before{content:"0" counter(m);font:700 var(--fs-label)/1 var(--f-texte);letter-spacing:.2em;color:var(--rouge-clair)}
.panneau.ouvert li a{transform:none}
.panneau.ouvert li:nth-child(2) a{transition-delay:.06s}.panneau.ouvert li:nth-child(3) a{transition-delay:.12s}.panneau.ouvert li:nth-child(4) a{transition-delay:.18s}.panneau.ouvert li:nth-child(5) a{transition-delay:.24s}
.panneau .bas{display:flex;gap:24px;align-items:center;flex-wrap:wrap}

/* ---------- ouvertures de section : 4 variantes (audit 2 n°3) ---------- */
.oh{margin-bottom:var(--e-9)}
.oh .n{display:block;font:700 var(--fs-label)/1 var(--f-texte);letter-spacing:.24em;color:var(--rouge);margin-bottom:var(--e-4)}
.oh h2{font:400 var(--fs-h2)/var(--lh-titre) var(--f-titre);letter-spacing:var(--ls-titre);text-transform:lowercase}
.oh .row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.oh h2 .np{text-transform:none}
.nw{white-space:nowrap}
.oh .fil{flex:0 0 20%;height:2px;background:currentColor;margin-bottom:.35em;clip-path:inset(0 100% 0 0)}  /* masconstruction .line4 20 % × 2 px */
.oh.B .row{flex-direction:row-reverse;text-align:right}
.oh.C{max-width:340px}.oh.C .fil{display:block;width:64px;height:2px;margin-top:var(--e-6)}
.oh.D h2{font-size:var(--fs-titre)}
.sombre .oh .n{color:var(--rouge-clair)}
.porte .oh .n,.projet .oh .n{color:var(--pierre)}

/* ---------- HERO : nom pleine largeur · photo du chantier plein cadre · cadre du fini (Désourdy × kozowood × masconstruction) ---------- */
.hero{background:var(--pierre)}
.hero .texte{z-index:3}
.hero .nom{padding:calc(max(44px,calc(38.657px + 1.37vw)) + max(16px,calc(11.827px + 1.07vw)) + 14px) 0 0}
.hero .nom svg{width:100%;height:auto;color:var(--rouge)}
.hero .nom .wm{clip-path:inset(100% 0 0 0)}
.hero .scene{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero .fond{position:absolute;inset:0}
.hero .fond img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.hero .voile{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(29,24,19,.45) 0%,rgba(29,24,19,.1) 22%,rgba(29,24,19,.28) 50%,rgba(29,24,19,.78) 100%)}  /* masconstruction : 15 → 35 → 55 % */
.hero .cadre{position:absolute;right:8%;top:calc(max(44px,calc(38.657px + 1.37vw)) + 64px);width:min(334px,27vw);aspect-ratio:334/436;box-shadow:var(--ombre-1);border:8px solid var(--pierre);will-change:transform}
.hero .cadre img{width:100%;height:100%;object-fit:cover}
.hero .cadre figcaption{position:absolute;left:-8px;right:-8px;top:100%;background:var(--pierre);padding:8px 10px;font:700 var(--fs-label)/1.3 var(--f-texte);letter-spacing:.16em;text-transform:uppercase}
.hero .texte{position:absolute;left:7.5vw;bottom:clamp(28px,5vh,56px);width:min(60%,760px);color:var(--pierre)}
.hero h1{font:400 var(--fs-h1)/1.04 var(--f-titre);letter-spacing:-.015em}
.hero h1 .l{display:block;overflow:hidden}.hero h1 .l>span{display:block;transform:translateY(105%)}
.hero .id{margin-top:var(--e-4);max-width:560px;font-size:18px;opacity:0}
.hero .cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:var(--e-6);opacity:0}
.hero .preuve{font-size:15px;font-weight:700}.hero .preuve .etoiles{color:var(--rouge-clair)}
.hero .defile{position:absolute;right:3%;bottom:5%;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--pierre);font:400 10px/1 var(--f-texte);letter-spacing:3px;text-decoration:none}
.hero .defile b{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:400}
.hero .defile i{position:relative;width:1px;height:60px;background:rgba(239,235,228,.35);overflow:hidden}
.hero .defile i::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--pierre);animation:trait 2s var(--ease-scroll) infinite}
@keyframes trait{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

/* entrée du hero : un seul chargement orchestré */
.js .hero.go .nom .wm{animation:monte 1.1s var(--ease-maison) .1s forwards}
@keyframes monte{to{clip-path:inset(0 0 0 0)}}
.js .hero.go .fond img{animation:recule 2.2s var(--ease-maison) forwards}
@keyframes recule{to{transform:scale(1)}}
.js .hero .cadre{opacity:0}
.js .hero.go .cadre{animation:pose 1.3s var(--ease-maison) .55s forwards}
@keyframes pose{from{opacity:0;transform:translate3d(0,-60px,0) rotate(-6deg)}to{opacity:1;transform:translate3d(0,var(--py,0px),0) rotate(2deg)}}
.js .hero.go h1 .l>span{animation:ligne .9s var(--ease-maison) forwards}
.js .hero.go h1 .l:nth-child(1)>span{animation-delay:.75s}.js .hero.go h1 .l:nth-child(2)>span{animation-delay:.85s}.js .hero.go h1 .l:nth-child(3)>span{animation-delay:.95s}
@keyframes ligne{to{transform:none}}
.js .hero.go .id,.js .hero.go .cta{animation:apparait .8s var(--ease-maison) 1.15s forwards}
@keyframes apparait{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html:not(.js) .hero .nom .wm{clip-path:none} html:not(.js) .hero h1 .l>span{transform:none} html:not(.js) .hero .id,html:not(.js) .hero .cta{opacity:1}

/* ---------- la bande de chiffres (règle 07/09) ---------- */
.chiffres{border-bottom:1px solid var(--ligne)}
.chiffres .c{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1.6fr}
.chiffres .ch{padding:26px 18px 24px;border-left:1px solid var(--ligne)}
.chiffres .ch:first-child{border-left:0;padding-left:0}
.chiffres b{display:block;font:400 clamp(30px,3vw,44px)/1 var(--f-titre)}
.chiffres b .et{color:var(--rouge)}
.chiffres .ch>span{display:block;margin-top:8px;font:700 var(--fs-label)/1.3 var(--f-texte);letter-spacing:.18em;text-transform:uppercase;color:var(--encre-2)}

/* ---------- 01 NOS TRAVAUX : la liste posée sur la photo plein cadre (masconstruction .section-encarts) ---------- */
.travaux{min-height:min(100svh,820px);color:var(--pierre);display:flex;overflow:hidden}
.travaux .ecran{position:absolute;inset:0;opacity:0;transition:opacity var(--d-court) ease-in-out}
.travaux .ecran.on{opacity:1}
.travaux .ecran img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 6s linear}
.travaux .ecran.on img{transform:scale(1)}
.travaux .cache{position:absolute;inset:0;background:linear-gradient(to right,rgba(29,24,19,.05) 20%,rgba(29,24,19,.62) 62%)}  /* .cache--droite */
.travaux .c{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;padding:var(--e-10) 0}
.travaux .oh{align-self:stretch}
.travaux .l{display:block;min-width:50%;padding:18px 0 14px;border-bottom:1px solid rgba(239,235,228,.4);text-align:right;text-decoration:none;font:400 var(--fs-ligne)/1.05 var(--f-titre);text-transform:lowercase;text-shadow:0 1px 18px rgba(29,24,19,.35);position:relative;opacity:.72;transition:opacity var(--d-court),transform .5s var(--ease-maison)}
.travaux .l small{display:block;margin-bottom:6px;font:700 var(--fs-label)/1 var(--f-texte);letter-spacing:.2em;text-transform:uppercase}
.travaux .l::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pierre);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-maison)}
.travaux .l.on{opacity:1;transform:translateX(-10px)}
.travaux .l.on::after{transform:scaleX(1)}
.travaux .l.go{opacity:1;color:var(--pierre);font-family:var(--f-texte);font-weight:700;font-size:clamp(18px,1.6vw,22px);text-transform:none;border-bottom:0;padding-top:26px}
.travaux .l.go span{display:inline-flex;align-items:center;gap:12px;background:var(--rouge);padding:16px 22px}

/* ---------- 02 DU CHANTIER AU RÉSULTAT : le rond qui s'ouvre, puis l'aquarelle, puis le fini, au même endroit ---------- */
.porte{height:320vh;background:var(--brun);color:var(--pierre)}
.porte .scene{position:sticky;top:0;height:100svh;overflow:hidden}
.porte .etat{position:absolute;inset:0}
.porte .etat img,.porte .etat .manque{width:100%;height:100%;object-fit:cover}
.porte .e1{clip-path:circle(calc(10% + var(--o,0) * 62%) at 50% 50%)}              /* kozowood : circle(10 %) → plein cadre */
.porte .e2{clip-path:inset(0 calc(100% - var(--a,0) * 100%) 0 0)}                  /* l'aquarelle se peint de gauche à droite */
.porte .e3{clip-path:inset(0 calc(100% - var(--f,0) * 100%) 0 0)}
.porte .voile{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(29,24,19,.72) 0%,rgba(29,24,19,.45) 38%,rgba(29,24,19,0) 55%,rgba(29,24,19,0) 70%,rgba(29,24,19,.7));pointer-events:none}
.porte .titre{position:absolute;left:7.5vw;top:27svh;right:7.5vw;z-index:2}   /* 28/09 : le titre couvre l'œil décoratif au mur (photo 013 et aquarelle) */
.porte .titre h2 .mot{display:inline-block;transform:translateY(calc((1 - var(--o,0)) * 30px));opacity:calc(.2 + var(--o,0))}
.porte .etapes{position:absolute;left:7.5vw;bottom:clamp(28px,6vh,60px);z-index:2;display:flex;gap:8px}
.porte .etapes button{min-height:44px;padding:0 16px;border:1px solid rgba(239,235,228,.45);font:700 14px/1 var(--f-texte);letter-spacing:.06em;background:rgba(29,24,19,.35);transition:background var(--d-court),color var(--d-court)}
.porte .etapes button.on{background:var(--pierre);color:var(--brun);border-color:var(--pierre)}
.porte .fin{position:absolute;right:7.5vw;bottom:clamp(28px,6vh,60px);z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:12px;opacity:var(--c,0);transform:translateY(calc((1 - var(--c,0)) * 20px));pointer-events:none}
.porte.fini .fin{pointer-events:auto}
.porte .fin p{font:700 var(--fs-label)/1.3 var(--f-texte);letter-spacing:.18em;text-transform:uppercase}

/* ---------- 03 CE QUE DISENT SES CLIENTS : au format Google (règle d'or de Saadou, 28/09 : couleurs de Google, logo Google, vrais noms).
   Raison écrite des cartes blanches et des coins arrondis : c'est l'apparence d'un avis Google, que le prospect reconnaît. */
.avis{padding:var(--e-11) 0;background:var(--pierre-2)}
.g-tete{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:22px 26px;background:#fff;border:1px solid #dadce0;border-radius:8px;margin-bottom:var(--e-7);font-family:Arial,var(--f-texte);color:#202124}
.g-tete>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.g-tete>div>b{font-size:20px;text-transform:uppercase;letter-spacing:.02em}
.g-note{font:700 22px Arial,sans-serif}
.g-tete small{font-size:14px;color:#70757a}
.g-btn{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:#1a73e8;color:#fff;border-radius:4px;font:700 14px Arial,sans-serif;text-decoration:none}
.g-btn:hover{background:#1765cc}
.g-et{display:inline-flex;align-items:center;gap:2px}
.g-et i{display:block;width:17px;height:17px;background:#fbbc04;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transform:scale(0);transition:transform .45s var(--ease-tampon) calc(var(--k) * 90ms + 250ms)}
.g-et img{margin-left:6px}
.g-et-grand i{width:22px;height:22px}
.is-in .g-et i,html:not(.js) .g-et i{transform:none}
/* la rangée infinie : colonnes 2 · 1 · 2 · 1 · 2, dupliquée une fois ; le JS fait boucler la position */
.g-piste{overflow:hidden;cursor:grab;touch-action:pan-y;padding:6px 0 10px;user-select:none;-webkit-user-select:none}
.g-piste.tire{cursor:grabbing}
.g-piste:focus-visible{outline:2px solid var(--rouge);outline-offset:-2px}
.g-rail{display:flex;gap:18px;width:max-content;will-change:transform}
.g-clone{display:flex;gap:18px}
.g-col{flex:0 0 auto;width:340px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.g-col .g-avis{margin:0}
.g-col-1 .g-avis{padding:26px 24px}
.g-col-1 .g-avis p{font-size:16.5px;-webkit-line-clamp:9}
.g-aide{margin-top:var(--e-4);font-size:14px;color:var(--encre-2)}
.g-avis{margin:0;padding:20px 20px 18px;background:#fff;border:1px solid #dadce0;border-radius:8px;font-family:Arial,var(--f-texte);color:#202124}
.g-avis header{display:grid;grid-template-columns:40px 1fr 20px;gap:12px;align-items:center}
.g-av{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:#fff;font:700 18px Arial,sans-serif}
.g-avis header b{display:block;font-size:15px}
.g-avis header small{display:block;font-size:13px;color:#70757a}
.g-avis .g-et{margin:12px 0 8px}
.g-avis p{font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.g-avis.ouvert p{-webkit-line-clamp:unset;display:block}
.g-avis.long{cursor:pointer}.g-avis.long:focus-visible{outline:2px solid #1a73e8;outline-offset:2px}
.g-plus{margin-top:6px;color:#1a73e8;font:700 14px Arial,sans-serif;padding:6px 0}

/* ---------- 04 COMMENT ON TRAVAILLE : accordéon, titre collant en colonne étroite (masconstruction .txt_masque) ---------- */
.methode{padding:var(--e-11) 0}
.methode .g{display:grid;grid-template-columns:4fr 8fr;gap:var(--e-10);align-items:start}
.methode .col{position:sticky;top:48px}
.methode .col a{display:inline-block;margin-top:var(--e-6);font-weight:700}
.methode details{border-top:1px solid var(--ligne)}
.methode details:last-child{border-bottom:1px solid var(--ligne)}
.methode summary{list-style:none;display:grid;grid-template-columns:72px 1fr 28px;align-items:baseline;gap:12px;padding:26px 0;cursor:pointer;font:400 clamp(22px,2.2vw,32px)/1.15 var(--f-titre)}
.methode summary::-webkit-details-marker{display:none}
.methode summary b{font:400 clamp(34px,3.4vw,52px)/1 var(--f-titre);color:transparent;-webkit-text-stroke:1px var(--rouge)}  /* chiffre détouré, masconstruction headline-strate */
.methode summary i{justify-self:end;width:14px;height:14px;position:relative}
.methode summary i::before,.methode summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--brun);transition:transform .35s var(--ease-maison)}
.methode summary i::after{transform:rotate(90deg)}
.methode details[open] summary i::after{transform:rotate(0)}
.methode .vue{margin:0 0 20px 84px;aspect-ratio:16/9;overflow:hidden;clip-path:inset(0 0 100% 0);animation:volet 1.2s var(--ease-maison) .05s forwards}  /* volet qui descend : le cercle reste unique sur le site (porte) */
.methode .vue img{width:100%;height:100%;object-fit:cover}
@keyframes volet{to{clip-path:inset(0 0 0 0)}}
.methode details p{padding:0 40px 28px 84px;color:var(--encre-2);animation:deplie .5s var(--ease-maison)}
@keyframes deplie{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- 05 APRÈS LE CHANTIER : le tampon de la décennale qui s'imprime ---------- */
.apres{padding:var(--e-11) 0;background:var(--brun);color:var(--pierre);overflow:hidden}
.apres .g{display:grid;grid-template-columns:7fr 5fr;gap:var(--e-10);align-items:center}
/* l'attestation décennale en coin bas droit, 1/3 × 1/4 d'écran (Saadou, 28/09) : recadrée sur le logo de l'assureur (object-position à régler sur le vrai document) */
.apres{padding-bottom:calc(25vh + var(--e-10))}
.attest{position:absolute;right:0;bottom:0;width:33.333vw;height:25vh;margin:0;overflow:hidden;background:var(--pierre)}
.attest img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.attest .manque{height:100%;background:var(--brun-2);border-color:var(--rouge-clair);color:#ff8f86;font-size:13px}
.js .apres [data-r].attest{transform:translateX(40px)}
.apres .texte p{max-width:620px;opacity:.8}
.apres .texte ul{list-style:none;margin-top:var(--e-7);border-top:1px solid var(--ligne-inv)}
.apres .texte li{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--ligne-inv);font-size:17px}
.apres .texte li b{font:700 var(--fs-label)/1.6 var(--f-texte);letter-spacing:.16em;text-transform:uppercase;color:var(--rouge-clair)}
.tampon{width:min(340px,80%);margin:0 auto;aspect-ratio:1;color:var(--rouge-clair);transform:rotate(-12deg)}
.js .tampon{opacity:0;transform:scale(1.7) rotate(-4deg)}
.js .tampon.is-in{animation:tampon .55s var(--ease-tampon) forwards}
@keyframes tampon{0%{opacity:0;transform:scale(1.7) rotate(-4deg)}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(-12deg)}}
.tampon-legende{text-align:center;margin-top:var(--e-5);font-size:var(--fs-petit)}

/* ---------- 06 SERKAN ET SON ÉQUIPE : la galerie en collage (masconstruction grid-gallery2) face au texte collant ---------- */
.equipe{padding:var(--e-11) 0}
.equipe .g{display:grid;grid-template-columns:4fr 6fr;gap:var(--e-10);align-items:start}
.equipe .col{position:sticky;top:48px}
.equipe .histoire{margin-top:var(--e-5);color:var(--encre-2);max-width:460px}
.projet-txt{max-width:520px;font-size:19px}
.equipe .grand{font:400 clamp(24px,2.4vw,34px)/1.25 var(--f-titre);margin-top:var(--e-6)}
.collage{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));aspect-ratio:6/7;isolation:isolate}
.collage .deco{position:absolute;left:25%;top:10%;width:50%;height:80%;background:var(--brun);z-index:-1}   /* .deco-carre 50 % × 80 % */
.collage .p{position:relative;overflow:hidden;margin:0}
.collage .p img{width:100%;height:100%;object-fit:cover}
.collage .p1{grid-area:1/1/5/4}.collage .p2{grid-area:3/4/6/7}.collage .p3{grid-area:5/2/8/4}.collage .p4{grid-area:1/4/3/7}   /* grid-area 1/4/5/1 · 3/7/6/4 · 5/4/7/2 · 1/6/3/4 */
.collage .p3 img{object-position:45% 60%}   /* la mini-pelle (Serkan, 30/09) est au centre gauche */
.collage .p2{z-index:2}.collage .p3{z-index:3;border:6px solid var(--pierre)}
.js .equipe .collage [data-r]{transform:translateY(40px)}

/* ---------- 07 VOTRE PROJET : section sur photo en fond fixe (masconstruction .image-fond) ---------- */
.projet{height:88svh;min-height:520px;color:var(--pierre);clip-path:inset(0)}
.projet .fixe{position:fixed;inset:0;z-index:-1}
.projet .fixe img{width:100%;height:100%;object-fit:cover}
.projet .fixe::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,24,19,.72) 5%,rgba(29,24,19,.2) 70%)}
.projet .c{height:100%;display:flex;flex-direction:column;justify-content:center;gap:var(--e-7)}
.projet h2 .mot{display:inline-block;overflow:hidden;vertical-align:bottom}
.projet h2 .mot>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease-maison)}
.projet.is-in h2 .mot>span{transform:none}
html:not(.js) .projet h2 .mot>span{transform:none}
.projet .cta{display:flex;gap:24px;align-items:center;flex-wrap:wrap}

/* ---------- 08 LA ZONE : la vraie carte (OpenStreetMap teintée pierre), le rayon qui se trace, les communes qui s'allument ---------- */
.zone-s{padding:var(--e-11) 0;background:var(--pierre-2);overflow:hidden}
.zg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--e-10);align-items:center;padding-left:max(7.5vw,calc((100vw - 1240px)/2))}
.communes{list-style:none;margin-top:var(--e-6);border-top:1px solid var(--ligne)}
.communes{columns:2;column-gap:28px}.communes li span{float:right;font:400 13px/2 var(--f-texte);color:var(--encre-2)}
.communes li{break-inside:avoid;padding:9px 0;border-bottom:1px solid var(--ligne);font:400 clamp(16px,1.35vw,20px)/1.2 var(--f-titre);white-space:nowrap}
.zone-s .carte{margin:0}
.cadre-carte{position:relative;overflow:hidden}
.cadre-carte .zoom{position:relative}
.cadre-carte img{width:100%;height:auto}
.cadre-carte svg{position:absolute;inset:0;width:100%;height:100%}
.carte .anneau{fill:rgba(142,51,42,.08);opacity:0;transition:opacity 1.2s ease 1.6s}
.carte .rayon{fill:none;stroke:var(--rouge);stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1}
.carte.is-in .anneau{opacity:1}
.carte.is-in .rayon{transition:stroke-dashoffset 2.4s var(--ease-maison) .2s;stroke-dashoffset:0}
.carte .v circle{fill:var(--rouge);stroke:var(--pierre);stroke-width:4}
.carte .v text{font:700 26px var(--f-texte);fill:var(--brun);paint-order:stroke;stroke:var(--pierre);stroke-width:8px;stroke-linejoin:round}
.carte .v{opacity:0;transform:translateY(14px);transform-box:fill-box;transition:opacity .5s,transform .6s var(--ease-tampon);transition-delay:calc(1.2s + var(--k) * 140ms)}
.carte.is-in .v{opacity:1;transform:none}
.carte .siege circle{fill:var(--brun);stroke:var(--pierre);stroke-width:5}
.carte .siege .onde{fill:none;stroke:var(--rouge);stroke-width:4;transform-box:fill-box;transform-origin:center;animation:onde 2.4s ease-out infinite}
@keyframes onde{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}
.carte .siege text{font:400 40px var(--f-titre);fill:var(--brun);paint-order:stroke;stroke:var(--pierre);stroke-width:10px;stroke-linejoin:round}
.carte figcaption{padding:10px 0;font-size:13px;color:var(--encre-2)}
.devis .contact .grand{font:400 clamp(28px,3vw,44px)/1.1 var(--f-titre);margin-bottom:var(--e-7)}
.devis .contact ul{list-style:none;border-top:1px solid var(--ligne)}
.devis .contact li{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--ligne)}
.devis .contact li b{font:700 var(--fs-label)/1.6 var(--f-texte);letter-spacing:.16em;text-transform:uppercase;color:var(--rouge)}

/* ---------- formulaire + zone (carte au rayon qui se trace) ---------- */
.devis{padding:var(--e-11) 0}
.devis .g{display:grid;grid-template-columns:5fr 7fr;gap:var(--e-10);align-items:center}
.devis .zone{position:sticky;top:48px}
.devis .zone p{color:var(--encre-2);margin-top:var(--e-4)}
.local{margin-top:var(--e-8)}.local h3{font:400 clamp(22px,2vw,28px)/1.15 var(--f-titre);margin-bottom:var(--e-4)}.local p{color:var(--encre-2);font-size:17px;margin-top:var(--e-3)}.note-copy{display:block;margin-top:var(--e-3);font:700 12px/1.4 var(--f-texte);color:#B0231A}
form.f{background:var(--pierre-2);padding:clamp(20px,3vw,44px)}
.f h3{font:400 clamp(26px,2.4vw,34px)/1.1 var(--f-titre);margin-bottom:var(--e-6)}
.f label{display:block;margin-top:var(--e-5);font:700 13px/1 var(--f-texte);letter-spacing:.04em}
.f input,.f select,.f textarea{display:block;width:100%;margin-top:8px;min-height:54px;padding:0 16px;border:1px solid rgba(29,24,19,.35);background:var(--pierre);font:400 17px var(--f-texte);color:var(--brun);border-radius:0}
.f textarea{min-height:110px;padding:14px 16px}
.f details{margin-top:var(--e-5)} .f details summary{cursor:pointer;font-weight:700;font-size:15px}
.f .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f .btn{width:100%;justify-content:center;margin-top:var(--e-7)}
.f .qui{margin-top:var(--e-5);font-size:var(--fs-petit);line-height:1.5}

/* ---------- pied : le nom BASKAN78 une seconde fois (Désourdy), qui se lève en fin de page ---------- */
footer{background:var(--brun);color:var(--pierre);padding:var(--e-10) 0 0;overflow:hidden;min-height:110svh;display:flex;flex-direction:column;justify-content:space-between}   /* hildenkaira .footer : min-height 110svh, logo aligné en bas */
footer .cols{display:grid;grid-template-columns:5fr 3fr 4fr;gap:var(--e-8);font-size:16px;line-height:1.7}
footer .cols b{display:block;margin-bottom:10px;font:700 var(--fs-label)/1 var(--f-texte);letter-spacing:.2em;text-transform:uppercase;color:var(--rouge-clair)}
footer .cols a{text-decoration:none}
footer .cols a:hover{text-decoration:underline}
footer .nom{margin-top:var(--e-10);color:var(--pierre);padding-bottom:clamp(10px,2vw,28px)}
footer .nom svg{width:100%;height:auto;overflow:visible}
footer .nom .lt{transform-box:fill-box}
.js footer .nom .lt{transform:translateY(30vh)}   /* hildenkaira : chaque lettre y 30vh → 0, pilotée par le défilement (site.js) */
footer .mentions{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:var(--e-6);font-size:13px;opacity:.75}

/* ---------- apparitions (moteur reveal du socle : la classe n'est jamais dans le markup) ---------- */
.js [data-reveal] [data-r]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-maison) var(--d,0ms),transform .8s var(--ease-maison) var(--d,0ms)}
.js [data-reveal] [data-r="droite"]{transform:translateX(40px)}
.js [data-reveal].is-in [data-r]{opacity:1;transform:none}
.js [data-reveal].is-in .fil{animation:fil 1.5s ease .25s forwards}   /* masconstruction clipToRight 1,5 s, délai 0,25 s */
@keyframes fil{to{clip-path:inset(0 0 0 0)}}
.js .oh.B .fil{clip-path:inset(0 0 0 100%)}
html:not(.js) .oh .fil{clip-path:none}


/* =================== PAGES INTÉRIEURES =================== */
/* Extension · 01 avis : trois avis Google décalés (pas la rangée infinie de l'accueil) */
.avis-p{padding:var(--e-11) 0}
.g-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.g-trio .g-avis:nth-child(2){margin-top:56px}.g-trio .g-avis:nth-child(3){margin-top:18px}
.g-trio .g-avis p{-webkit-line-clamp:8}

/* Extension · 02 « du trou au salon » : L'OBJET UNIQUE (motif validé le 09/09) : une carte épinglée qui tombe, lévite et se RETOURNE ;
   la photo change quand la carte est de profil, jamais par un fondu. 4 couches : chute · lévitation · retournement · ombre/reflet */
.sequence{height:520vh;background:var(--pierre)}
.s-scene{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.s-g{display:grid;grid-template-columns:5fr 6fr;gap:var(--e-10);align-items:center}
.s-noms{list-style:none;margin-top:var(--e-6);border-top:1px solid var(--ligne)}
.s-noms li{display:flex;gap:18px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--ligne);font:400 clamp(22px,2.2vw,32px)/1.1 var(--f-titre);opacity:.3;transition:opacity .4s,transform .5s var(--ease-maison)}
.s-noms li b{font:700 var(--fs-label)/1 var(--f-texte);letter-spacing:.2em;color:var(--rouge)}
.s-noms li.on{opacity:1;transform:translateX(12px)}
.s-note{margin-top:var(--e-5);font-size:14px;color:var(--encre-2)}
.s-objet{position:relative;height:min(76svh,680px);display:flex;align-items:center;justify-content:center;perspective:1400px}
.s-chute{position:relative;width:min(100%,460px);aspect-ratio:4/5;will-change:transform}
.s-flotte{position:absolute;inset:0;animation:flotte 5.3s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translate3d(0,0,0) rotate(0)}37%{transform:translate3d(0,-9px,0) rotate(-.6deg)}71%{transform:translate3d(0,5px,0) rotate(.4deg)}}
.s-carte{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;border:10px solid #fff;box-shadow:0 1px 0 rgba(29,24,19,.08)}
.s-carte .face{position:absolute;inset:0;overflow:hidden;visibility:hidden;backface-visibility:hidden}
.s-carte .face.on{visibility:visible}
.s-carte .face img{width:100%;height:112%;object-fit:cover;transform:translateY(var(--par,0))}
.s-reflet{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(var(--ref,-120%));pointer-events:none}
.s-ombre{position:absolute;left:8%;right:8%;bottom:-38px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(29,24,19,.38),transparent);transform:scaleX(var(--om,1)) translateX(var(--omx,0));filter:blur(4px)}

/* Extension · 03 les étapes : liste numérotée, deux étapes seulement ont une vraie photo */
.etapes-ext{padding:var(--e-11) 0;background:var(--pierre-2)}
.e-liste{list-style:none;border-top:1px solid var(--ligne)}
.e{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--e-7);padding:var(--e-8) 0;border-bottom:1px solid var(--ligne);align-items:start}
.e.a-photo{grid-template-columns:120px minmax(0,1fr) minmax(0,.9fr)}
.e-n{font:400 clamp(56px,6vw,92px)/.8 var(--f-titre);color:transparent;-webkit-text-stroke:1px var(--rouge)}
.e-t h3{font:400 clamp(24px,2.4vw,34px)/1.1 var(--f-titre)}
.e-t p{margin-top:var(--e-3);color:var(--encre-2);max-width:560px}
.e-t .e-note{color:var(--rouge);font-size:16px}
.e-ph{margin:0;aspect-ratio:4/3;overflow:hidden;clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease-maison) .2s}
.e-ph img{width:100%;height:100%;object-fit:cover}
.is-in .e-ph,html:not(.js) .e-ph{clip-path:inset(0 0 0 0)}

/* Extension · 04 la véranda : photo pleine, le texte dessus, parallaxe lente */
.veranda{min-height:92svh;color:var(--pierre);display:flex;align-items:flex-end;overflow:hidden}
.v-fond{position:absolute;inset:-10% 0}
.v-fond img{width:100%;height:100%;object-fit:cover;transform:translateY(var(--vp,0))}
.veranda::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(29,24,19,.82) 5%,rgba(29,24,19,.1) 60%)}
.v-txt{position:relative;z-index:2;padding:var(--e-10) 0;max-width:720px;margin-left:max(7.5vw,calc((100vw - 1240px)/2))}
.v-txt p{margin:var(--e-4) 0 var(--e-6)}
.veranda .oh .n{color:var(--pierre)}

/* Extension · 05 vos questions */
.faq-p{padding:var(--e-11) 0}
.f-g{display:grid;grid-template-columns:4fr 8fr;gap:var(--e-10);align-items:start}
.f-aide{margin-top:var(--e-6);font-size:16px}
.f-liste details{border-top:1px solid var(--ligne)}
.f-liste details:last-child{border-bottom:1px solid var(--ligne)}
.f-liste summary{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;font:400 clamp(20px,1.9vw,26px)/1.2 var(--f-titre)}
.f-liste summary::-webkit-details-marker{display:none}
.f-liste summary i{flex:0 0 14px;height:14px;position:relative;margin-top:8px}
.f-liste summary i::before,.f-liste summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--brun);transition:transform .35s var(--ease-maison)}
.f-liste summary i::after{transform:rotate(90deg)}
.f-liste details[open] summary i::after{transform:rotate(0)}
.f-liste details p{padding:0 0 22px;color:var(--encre-2);animation:deplie .5s var(--ease-maison)}


/* Mur porteur · 01 : un seul avis, en grand, face au chiffre */
.avis-un{padding:var(--e-11) 0}
.au-g{display:grid;grid-template-columns:5fr 6fr;gap:var(--e-10);align-items:center}
.au-chiffre{margin-top:var(--e-7);font:400 24px/1 var(--f-titre)}
.au-chiffre b{display:inline-block;font:400 clamp(120px,14vw,220px)/.9 var(--f-titre);color:var(--rouge);margin-right:8px}
.au-chiffre span{display:block;margin-top:var(--e-6);font:400 16px/1.5 var(--f-texte);color:var(--encre-2);max-width:340px}
.avis-un .g-avis p{-webkit-line-clamp:unset;display:block;font-size:17px}

/* Mur porteur · 02 : l'avant / après à poignée, sur fond sombre */
.aa-s{padding:var(--e-11) 0;background:var(--brun);color:var(--pierre)}
.aa-s .oh .n{color:var(--rouge-clair)}
.aa2{position:relative;margin:0;aspect-ratio:4/3;max-height:78svh;width:100%;overflow:hidden;--x:50%;touch-action:pan-y}
.aa2 img{width:100%;height:100%;object-fit:cover}
.aa-apres,.aa-avant{position:absolute;inset:0}
.aa-avant{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.aa-poignee{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--pierre);pointer-events:none}
.aa-poignee i{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--pierre);box-shadow:0 6px 20px rgba(29,24,19,.35)}
.aa-poignee i::before,.aa-poignee i::after{content:"";position:absolute;top:50%;width:0;height:0;border:7px solid transparent;margin-top:-7px}
.aa-poignee i::before{left:10px;border-right-color:var(--brun)}.aa-poignee i::after{right:10px;border-left-color:var(--brun)}
.aa-lbl{position:absolute;top:18px;padding:8px 12px;background:rgba(29,24,19,.72);font:700 12px/1 var(--f-texte);letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
.aa-lbl.g{left:18px}.aa-lbl.d{right:18px}
.aa-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.aa-aide{margin-top:var(--e-4);font-size:14px;opacity:.75}

/* Mur porteur · 03 : les étapes, légères (vignettes), texte collant en face */
.mur-etapes{padding:var(--e-11) 0}
.me-g{display:grid;grid-template-columns:4fr 7fr;gap:var(--e-10);align-items:start}
.me-col{position:sticky;top:110px}
.me-note{margin-top:var(--e-6);font-size:16px;color:var(--rouge)}
.me-liste{list-style:none;border-top:1px solid var(--ligne)}
.m{display:grid;grid-template-columns:160px minmax(0,1fr);gap:var(--e-7);padding:var(--e-6) 0;border-bottom:1px solid var(--ligne);align-items:center}
.m-ph{margin:0;aspect-ratio:1;overflow:hidden}
.m-ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 1.4s var(--ease-maison)}
.is-in .m-ph img{transform:none}
.m-n{font:700 var(--fs-label)/1 var(--f-texte);letter-spacing:.2em;color:var(--rouge)}
.m h3{font:400 clamp(22px,2.2vw,30px)/1.1 var(--f-titre);margin-top:8px}
.m p{margin-top:8px;color:var(--encre-2);font-size:17px}


/* Terrasses · hero coupé : le texte sur la pierre à gauche, la photo sur 62 % à droite (3e composition de hero, jamais celle de l'accueil) */
.hero-split{display:grid;grid-template-columns:38% 62%;min-height:100svh;background:var(--pierre)}
.hs-txt{display:flex;flex-direction:column;justify-content:flex-end;padding:calc(max(53px,calc(46.4px + 1.64vw)) + 80px) 48px 64px max(7.5vw,calc((100vw - 1240px)/2))}
.hs-txt h1{font:400 clamp(34px,3.8vw,60px)/1.02 var(--f-titre);letter-spacing:-.015em}
.hs-txt .id{margin-top:var(--e-5);color:var(--encre-2)}
.hs-txt .cta{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:var(--e-7)}
.hs-txt .preuve{margin-top:var(--e-5);font-size:15px;font-weight:700}.hs-txt .preuve .etoiles{color:var(--rouge)}
.hs-ph{position:relative;overflow:hidden}
.hs-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 0 100%);animation:volet-g 1.4s var(--ease-maison) .2s forwards}
@keyframes volet-g{to{clip-path:inset(0 0 0 0)}}
.hs-ph::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(to bottom,rgba(239,235,228,.88),rgba(239,235,228,0));pointer-events:none}   /* la barre est brune au-dessus d'une page claire : ce voile pierre la garde lisible sur la photo */
html:not(.js) .hs-ph img{clip-path:none;animation:none}

/* Terrasses · 01 : l'avis de J. Roussel face à la note */
.avis-ter{padding:var(--e-11) 0}
.at-g{display:grid;grid-template-columns:6fr 5fr;gap:var(--e-10);align-items:end}
.at-carte .g-avis{transform:rotate(-1.2deg)}
.at-carte .g-avis p{-webkit-line-clamp:unset;display:block;font-size:17px}

/* Terrasses · 02 : la liste verticale qui change la photo (variante de l'accueil : photo à GAUCHE, lignes à droite) */
.exter{padding:var(--e-11) 0;background:var(--pierre-2)}
.ex-g{display:grid;grid-template-columns:6fr 4fr;gap:var(--e-8);align-items:center}
.ex-ph{position:relative;aspect-ratio:4/3;overflow:hidden}
.ex-ecran{position:absolute;inset:0;opacity:0;transition:opacity var(--d-court) ease-in-out}
.ex-ecran.on{opacity:1}
.ex-ecran img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 6s linear}
.ex-ecran.on img{transform:none}
.ex-lignes{list-style:none;border-top:1px solid var(--ligne)}
.ex-lignes li{display:flex;gap:16px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--ligne);font:400 clamp(24px,2.6vw,38px)/1.05 var(--f-titre);cursor:pointer;opacity:.4;transition:opacity var(--d-court),transform .5s var(--ease-maison)}
.ex-lignes li span{font:700 var(--fs-label)/1 var(--f-texte);letter-spacing:.2em;color:var(--rouge)}
.ex-lignes li.on{opacity:1;transform:translateX(10px)}
.ex-note{margin-top:var(--e-5);font-size:14px;color:var(--encre-2)}

/* Terrasses · 04 : la dalle se coule. Épinglée ; chaque état MONTE du bas comme le béton qui remplit le coffrage, un niveau à bulle en suit le front */
.dalle{height:340vh;background:var(--brun);color:var(--pierre)}
.d-scene{position:sticky;top:0;height:100svh;overflow:hidden}
.d-etat{position:absolute;inset:0}
.d-etat img{width:100%;height:100%;object-fit:cover}
.d1{clip-path:inset(calc(100% - var(--c1,0) * 100%) 0 0 0)}
.d2{clip-path:inset(calc(100% - var(--c2,0) * 100%) 0 0 0)}
.d-voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,24,19,.78) 5%,rgba(29,24,19,.15) 55%)}
.d-txt{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.d-txt .oh .n{color:var(--pierre)}
.d-noms{list-style:none;margin-top:var(--e-4)}
.d-noms li{font:400 clamp(22px,2.4vw,34px)/1.4 var(--f-titre);opacity:.35;transition:opacity .4s}
.d-noms li.on{opacity:1}
.d-note{margin-top:var(--e-5);font-size:14px;opacity:.8}
.d-niveau{position:absolute;left:0;right:0;bottom:calc(var(--front,0) * 100%);height:0;pointer-events:none}
.d-niveau i{position:absolute;right:max(7.5vw,calc((100vw - 1240px)/2));width:120px;height:2px;background:var(--pierre);opacity:var(--vis,0)}
.d-niveau i::after{content:"";position:absolute;left:50%;top:-5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--rouge-clair)}


/* Terrasses · 02 avant / après : l'après se révèle en DIAGONALE à l'arrivée (jamais la poignée du mur porteur) ; un toucher montre l'avant */
.aa-diag-s{padding:var(--e-11) 0;background:var(--brun);color:var(--pierre)}
.aa-diag-s .oh .n{color:var(--rouge-clair)}
.aad-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.aad-g .aad:nth-child(2){margin-top:48px}
.aad{position:relative;margin:0;cursor:pointer}
.aad-avant,.aad-apres{aspect-ratio:4/5;overflow:hidden}
.aad-apres{position:absolute;inset:0 0 auto 0;clip-path:polygon(0 0,0 0,0 0,0 0);transition:clip-path 1.3s var(--ease-maison) calc(var(--d,0ms) + 200ms)}
.aad img{width:100%;height:100%;object-fit:cover}
.is-in .aad-apres,html:not(.js) .aad-apres{clip-path:polygon(0 0,200% 0,0 200%,0 0)}
.aad.avant .aad-apres{clip-path:polygon(0 0,0 0,0 0,0 0);transition-delay:0ms}
.aad-lbl{position:absolute;left:12px;top:12px;display:flex;gap:6px;font:700 11px/1 var(--f-texte);letter-spacing:.14em;text-transform:uppercase}
.aad-lbl i,.aad-lbl b{padding:7px 9px;background:rgba(29,24,19,.72);font-style:normal;font-weight:700;opacity:.45;transition:opacity .4s}
.aad-lbl b{opacity:1}.aad.avant .aad-lbl b{opacity:.45}.aad.avant .aad-lbl i{opacity:1}
.aad figcaption{margin-top:12px;font:400 clamp(18px,1.6vw,22px)/1.2 var(--f-titre)}
.aad-aide{margin-top:var(--e-5);font-size:14px;opacity:.75}

/* Rénovation · hero : 4e composition — photo pleine, texte CENTRÉ en bas */
.hero-bas{min-height:100svh;color:var(--pierre);display:flex;align-items:flex-end;overflow:hidden}
.hb-ph{position:absolute;inset:0}
.hb-ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:recule 2.2s var(--ease-maison) forwards}
.hero-bas::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(29,24,19,.5) 0%,rgba(29,24,19,.08) 26%,rgba(29,24,19,.55) 52%,rgba(29,24,19,.88) 100%)}   /* 29/09 : le texte centré restait sur une photo chargée */
.hb-txt{position:relative;z-index:2;text-align:center;padding-bottom:clamp(36px,7vh,72px);display:flex;flex-direction:column;align-items:center}
.hb-txt h1{font:400 clamp(36px,5.4vw,82px)/1 var(--f-titre);letter-spacing:-.02em;max-width:980px}
.hb-txt .id{margin-top:var(--e-5);max-width:640px;font-size:18px}
.hb-txt .cta{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:var(--e-6)}
.hb-txt .preuve{font-size:15px;font-weight:700}.hb-txt .preuve .etoiles{color:var(--rouge-clair)}

/* Rénovation · 01 avis */
.avis-ren{padding:var(--e-11) 0}
.ar-g{display:grid;grid-template-columns:6fr 5fr;gap:var(--e-8);align-items:start}
.ar-g .g-avis p{-webkit-line-clamp:unset;display:block;font-size:16.5px}
.ar-g>div .g-avis{margin-top:18px}

/* Rénovation · 02 « pièce par pièce » : défilement HORIZONTAL épinglé (signature de la page) */
.pieces{height:420vh;background:var(--pierre)}
.p-scene{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:var(--e-6)}
.p-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.p-tete .oh{margin-bottom:0;flex:1}
.p-compte{font:400 20px var(--f-titre);white-space:nowrap}.p-compte b{font-weight:400;color:var(--rouge)}
.p-piste{overflow:visible}
.p-rail{display:flex;gap:3vw;padding-left:max(7.5vw,calc((100vw - 1240px)/2));width:max-content;will-change:transform}
.p-carte{margin:0;width:44vw;flex:0 0 auto}
.p-carte img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover}
.p-carte:nth-child(even){margin-top:6vh}
.p-carte figcaption{display:flex;gap:14px;align-items:baseline;margin-top:14px;font:400 clamp(20px,2vw,28px)/1.1 var(--f-titre)}
.p-carte figcaption span{font:700 var(--fs-label)/1 var(--f-texte);letter-spacing:.2em;color:var(--rouge)}
.p-barre{height:2px;background:var(--ligne)}.p-barre i{display:block;height:100%;background:var(--rouge);transform-origin:left;transform:scaleX(var(--pp,0))}

/* Rénovation · 03 les métiers */
.metiers{padding:var(--e-11) 0;background:var(--pierre-2)}
.mt-g{display:grid;grid-template-columns:4fr 7fr;gap:var(--e-10);align-items:start}
.mt-note{margin-top:var(--e-5);font-size:14px;color:var(--rouge)}
.mt-liste{list-style:none;border-top:1px solid var(--ligne)}
.mt-liste li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--e-5);padding:22px 0;border-bottom:1px solid var(--ligne)}
.mt-n{font:400 clamp(34px,3.4vw,48px)/.9 var(--f-titre);color:transparent;-webkit-text-stroke:1px var(--rouge)}
.mt-liste h3{font:400 clamp(22px,2.2vw,30px)/1.1 var(--f-titre)}
.mt-liste p{margin-top:6px;color:var(--encre-2);font-size:17px}

/* Rénovation · 04 un seul interlocuteur */
.interloc{padding:var(--e-11) 0}
.interloc .oh .n{color:var(--rouge-clair)}
.in-liste{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ligne-inv)}
.in-liste li{padding:24px 24px 0 0;font-size:16px;line-height:1.5}
.in-liste li+li{padding-left:24px;border-left:1px solid var(--ligne-inv)}
.in-liste b{display:block;margin-bottom:8px;font:400 clamp(22px,2vw,28px)/1.1 var(--f-titre);color:var(--pierre)}


/* Galerie avant la FAQ (Saadou, 28/09) : vignettes, clic = plein écran */
.galerie{padding:var(--e-11) 0;background:var(--pierre-2)}
.gal-g{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gal-g li:nth-child(5n+1){grid-column:span 2;grid-row:span 2}
.gal-it{display:block;width:100%;height:100%;padding:0;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3}
.gal-g li:nth-child(5n+1) .gal-it{aspect-ratio:auto}
.gal-it img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-maison)}
.gal-it:hover img,.gal-it:focus-visible img{transform:scale(1.05)}
.gal-aide{margin-top:var(--e-4);font-size:14px;color:var(--encre-2)}
.lb{position:fixed;inset:0;z-index:60;background:rgba(29,24,19,.94);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.lb.ouvert{opacity:1}
.lb[hidden]{display:none}
.lb-f{margin:0;max-width:min(92vw,1400px);max-height:86svh;display:flex;flex-direction:column;align-items:center}
.lb-f img{max-width:100%;max-height:80svh;width:auto;height:auto;object-fit:contain;transform:scale(.96);transition:transform .4s var(--ease-maison)}
.lb.ouvert .lb-f img{transform:none}
.lb-f figcaption{margin-top:12px;color:var(--pierre);font-size:15px;text-align:center}
.lb-x,.lb-p,.lb-n{position:absolute;color:var(--pierre);font:300 44px/1 var(--f-texte);width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.lb-x{top:14px;right:14px;font-size:40px}.lb-p{left:10px;top:50%;transform:translateY(-50%)}.lb-n{right:10px;top:50%;transform:translateY(-50%)}
.lb-c{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:var(--pierre);font-size:13px;letter-spacing:.14em;opacity:.7}


/* Pages de texte : mentions, confidentialité, CGU, cookies, merci, 404 */
.texte-legal{padding:calc(max(53px,calc(46.4px + 1.64vw)) + 90px) 0 var(--e-11);background:var(--pierre)}
.tl{max-width:780px}
.tl h1{font:400 clamp(36px,4.6vw,64px)/1.02 var(--f-titre);letter-spacing:-.015em;margin-bottom:var(--e-7)}
.tl h2{font:400 clamp(22px,2vw,28px)/1.15 var(--f-titre);margin:var(--e-9) 0 var(--e-4)}
.tl p,.tl li{font-size:17px;line-height:1.65;color:var(--encre-2)}.tl p+p{margin-top:var(--e-4)}
.tl a{color:var(--rouge)}.tl .btn{color:#fff}
.tl table{width:100%;border-collapse:collapse;margin:var(--e-5) 0;font-size:15px}.tl th,.tl td{text-align:left;vertical-align:top;padding:12px 10px;border-bottom:1px solid var(--ligne)}
.tl .n-leg{font:700 var(--fs-label)/1 var(--f-texte);letter-spacing:.24em;text-transform:uppercase;color:var(--rouge);margin-bottom:var(--e-4)}
.tl .lead{font-size:20px;margin-bottom:var(--e-7)}
.liens-404{list-style:none;border-top:1px solid var(--ligne);margin-bottom:var(--e-8)}.liens-404 li{border-bottom:1px solid var(--ligne)}.liens-404 a{display:block;padding:16px 0;font:400 22px var(--f-titre);color:var(--brun);text-decoration:none}
.row404{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
@media (max-width:760px){.tl table,.tl tbody,.tl tr,.tl td{display:block}.tl thead{display:none}.tl td{border:0;padding:4px 0}.tl tr{border-bottom:1px solid var(--ligne);padding:10px 0}}


/* 29/09 : la carte sans légende, crédit OpenStreetMap en coin ; le menu avec le nom et une croix */
.carte .osm{position:absolute;right:5px;bottom:3px;font-size:8px;line-height:1;color:rgba(29,24,19,.38);pointer-events:none}   /* crédit exigé par la licence OSM : présent, discret */
.carte{position:relative}
.panneau .p-nom{font:700 26px/1 var(--f-texte);letter-spacing:.04em;color:var(--pierre);margin-left:10px}
.panneau .haut .marque{display:flex;align-items:center}
.menu-btn.fermer{width:48px;height:48px;padding:0;border:0;position:relative}
.menu-btn.fermer i,.menu-btn.fermer i::after{position:absolute;left:12px;top:23px;width:24px;height:2px;background:currentColor;border:0;transform:rotate(45deg)}
.menu-btn.fermer i::after{content:"";left:0;top:0;transform:rotate(-90deg)}

/* ===================== TÉLÉPHONE (en dernier) ===================== */
@media (max-width:760px){
  :root{--fs-corps:18px}
  .c{width:calc(100vw - 30px)}
  .bar .btn{display:none}
  .bar .c{width:calc(100vw - 30px);min-height:52px}
  .bar .marque{gap:9px}.bar .marque .sy{height:41px}.bar .marque .wm{height:24px}
  .bar .menu-btn .mm{display:none}
  .bar .menu-btn{min-height:48px;min-width:44px;justify-content:center;padding:0}
  .bar .menu-btn i{width:24px}
  .bar nav{gap:14px}
  .bar .tel{font-size:15px}
  .bar nav{gap:12px}
  .bar .menu-btn{padding:0 12px}
  .hero .texte{left:15px;right:15px;bottom:20px;width:auto;color:var(--pierre)}
  .hero h1{font-size:31px}
  .hero .id{font-size:16px}
  .hero .cta{gap:18px}
  .hero .cta .btn{flex:1 1 auto;justify-content:center}
  .hero .scene{height:100svh;min-height:600px}
  .hero .defile{display:none}
  .hero .cadre{width:36vw;right:15px;top:92px;bottom:auto;border-width:6px}
  .hero .cadre figcaption{display:none}
  .hero .preuve{flex-basis:100%}
  .chiffres .c{grid-template-columns:1fr 1fr}
  .chiffres .ch{padding:18px 12px;border-top:1px solid var(--ligne)}
  .chiffres .ch:nth-child(odd){border-left:0;padding-left:0}
  .chiffres .ch:nth-child(5){grid-column:1/-1;border-left:0;padding-left:0}
  .chiffres .ch:nth-child(-n+2){border-top:0}
  .travaux{min-height:0}
  .travaux .c{padding:var(--e-9) 0 var(--e-7);min-height:640px}
  .travaux .cache{background:linear-gradient(to bottom,rgba(29,24,19,.15) 10%,rgba(29,24,19,.72) 60%)}
  .travaux .l{min-width:100%;font-size:27px}
  .porte{height:230vh}
  .porte .titre{top:33svh;left:15px;right:15px}
  .porte .etapes{left:15px;right:15px;bottom:92px}
  .porte .etapes button{flex:1;padding:0 8px;font-size:13px}
  .porte .fin{left:15px;right:15px;bottom:24px;align-items:stretch}
  .porte .fin .btn{justify-content:center}
  .porte .fin p{display:none}
  .avis,.methode,.apres,.equipe,.devis{padding:var(--e-10) 0}
  .avis .g,.methode .g,.apres .g,.equipe .g,.devis .g{grid-template-columns:1fr;gap:var(--e-8)}
  .avis .autres>div:nth-child(even){margin-left:0}
  .avis .note{margin-top:var(--e-8)}
  .methode .col,.devis .zone{position:static}
  .methode summary{grid-template-columns:52px 1fr 20px}
  .methode details p{padding:0 0 22px 64px}
  .apres .texte li{grid-template-columns:1fr;gap:4px}
  .apres{padding-bottom:calc(25vh + 40px)}
  .attest .manque{font-size:10.5px;padding:10px}
  .tampon{width:62vw}
  .equipe .col{position:static}
  .methode .vue{margin-left:0}
  .projet{height:auto;min-height:0;padding:120px 0}
  .devis .g form{order:-1}   /* formulaire d'abord au téléphone (audit 1 n°5) */
  footer .cols{grid-template-columns:1fr}
  .avis-p,.etapes-ext,.faq-p{padding:var(--e-10) 0}
  .g-trio{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -15px;padding:0 15px 8px;scrollbar-width:none}
  .g-trio::-webkit-scrollbar{display:none}
  .g-trio .g-avis{flex:0 0 84%;scroll-snap-align:center;margin:0!important}
  .sequence{height:420vh}
  .s-g{grid-template-columns:1fr;gap:var(--e-4)}
  .s-noms{display:flex;flex-wrap:wrap;gap:6px 14px;border:0;margin-top:var(--e-3)}
  .s-noms li{border:0;padding:0;font-size:16px}.s-noms li.on{transform:none}
  .s-note{display:none}
  .s-scene .oh{margin-bottom:var(--e-3)}.s-scene .oh.C .fil{display:none}
  .s-objet{height:56svh}.s-chute{width:min(72vw,300px)}
  .e,.e.a-photo{grid-template-columns:56px minmax(0,1fr);gap:var(--e-4)}
  .e .e-ph{grid-column:1/-1}
  .f-g{grid-template-columns:1fr;gap:var(--e-6)}
  .veranda{min-height:80svh}
  .avis-un,.aa-s,.mur-etapes{padding:var(--e-10) 0}
  .au-g,.me-g{grid-template-columns:1fr;gap:var(--e-7)}
  .me-col{position:static}
  .aa2{aspect-ratio:4/5}
  .aa-lbl{font-size:10px;top:10px;padding:6px 8px}.aa-lbl.g{left:10px}.aa-lbl.d{right:10px}
  .m{grid-template-columns:96px minmax(0,1fr);gap:var(--e-4)}
  .galerie{padding:var(--e-10) 0}
  .gal-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gal-g li:nth-child(5n+1){grid-column:span 2;grid-row:auto}
  .gal-g li:nth-child(5n+1) .gal-it{aspect-ratio:16/10}
  .lb-p,.lb-n{top:auto;bottom:6px;transform:none}
  .hero-split{grid-template-columns:1fr;min-height:0}
  .hs-txt{padding:calc(52px + 44px) 15px 24px}
  .hs-txt h1{font-size:31px}
  .hs-txt .cta .btn{flex:1 1 auto;justify-content:center}
  .hs-ph{aspect-ratio:4/5}
  .avis-ter,.exter{padding:var(--e-10) 0}
  .at-g,.ex-g{grid-template-columns:1fr;gap:var(--e-6)}
  .at-carte .g-avis{transform:none}
  .ex-lignes li{font-size:24px;padding:16px 0}
  .dalle{height:260vh}
  .d-txt{top:auto;bottom:40px;transform:none}
  .aa-diag-s,.avis-ren,.metiers,.interloc{padding:var(--e-10) 0}
  .aad-g{grid-template-columns:1fr;gap:26px}.aad-g .aad:nth-child(2){margin-top:0}
  .aad-avant,.aad-apres{aspect-ratio:4/3}
  .hb-txt{text-align:left;align-items:flex-start;padding:0 0 28px}
  .hb-txt h1{font-size:36px;line-height:1.02}.hb-txt .id{font-size:16px}
  .hb-txt .cta{justify-content:flex-start}.hb-txt .cta .btn{flex:1 1 100%;justify-content:center}
  .ar-g,.mt-g{grid-template-columns:1fr;gap:var(--e-6)}
  .pieces{height:360vh}
  .p-carte{width:78vw}.p-carte:nth-child(even){margin-top:3vh}
  .p-rail{padding-left:15px;gap:14px}
  .p-tete{flex-direction:column;align-items:flex-start;gap:8px}
  .in-liste{grid-template-columns:1fr}.in-liste li,.in-liste li+li{padding:18px 0;border-left:0;border-bottom:1px solid var(--ligne-inv)}
  .g-col{width:78vw}
  .g-tete{padding:16px}.g-btn{margin-left:0;width:100%;justify-content:center}
  .zone-s{padding:var(--e-10) 0}
  .zg{grid-template-columns:minmax(0,1fr);padding:0 15px;gap:var(--e-7)}
  .communes li{white-space:normal;font-size:16px}
  .devis .contact li{grid-template-columns:1fr;gap:4px}
  .cadre-carte{aspect-ratio:auto}
  .cadre-carte .zoom{position:relative;width:100%;transform:none}   /* 29/09 : la carte entière, rien de coupé */
  .carte .v.sec text{display:none}
  .carte .v text{font-size:52px}.carte .v circle{r:14px}.carte .siege text{font-size:66px}
  .panneau li a{font-size:26px;padding:12px 0}
  .panneau .p-nom{font-size:22px}
}
/* ===== 29/09 · passe des 5 audits finaux (tableau dans etat.md) ===== */
/* A5-1 : « un seul devis » était sans fond (titres et barre invisibles) */
.interloc{background:var(--brun);color:var(--pierre)}
.interloc .oh h2{color:var(--pierre)}
/* A1-11 : zone de toucher de 44 px sur chaque numéro, sans changer la mise en page */
.tel{position:relative}
.tel::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
/* A2-7, A2-10, A1-12 : le formulaire lisible ; A5-4 : la carte du formulaire se redresse à l'arrivée */
.f label{font-size:16px;letter-spacing:0}
.f label small{font-weight:400;font-size:15px;color:var(--encre-2)}
.f .qui{font-size:15px;color:var(--encre-2)}
.f .qui a{color:inherit}
.js .f[data-reveal]{opacity:0;transform:perspective(1400px) rotateX(10deg) translateY(48px);transform-origin:50% 100%;transition:opacity .9s var(--ease-maison),transform 1.1s var(--ease-maison)}
.js .f[data-reveal].is-in{opacity:1;transform:none}
/* A2-6 : les boutons des avis */
.g-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:var(--e-4)}
.g-nav .g-aide{margin:0}
.g-nav span{display:flex;gap:8px}
.g-nav button{width:48px;height:48px;border:1px solid var(--ligne);font:400 26px/1 var(--f-texte);color:var(--brun);background:transparent;cursor:pointer;transition:background var(--d-court),color var(--d-court)}
.g-nav button:hover,.g-nav button:focus-visible{background:var(--brun);color:var(--pierre)}
/* A2-3 : l'avant / après du mur porteur, deux boutons au lieu d'un geste à deviner */
.aa-lbl{font-size:14px;letter-spacing:.1em}
.aa-choix{display:flex;gap:8px;margin-top:var(--e-5)}
.aa-choix button{min-height:48px;padding:0 20px;border:1px solid rgba(239,235,228,.45);font:700 15px/1 var(--f-texte);color:inherit;background:transparent;cursor:pointer}
.aa-choix button:hover,.aa-choix button:focus-visible{background:var(--pierre);color:var(--brun)}
/* A1-3 : l'attestation s'ouvre en grand */
.attest a{display:block;height:100%}
.attest figcaption{position:absolute;left:0;bottom:0;padding:6px 10px;background:var(--brun);color:var(--pierre);font-size:13px}
/* A1-5 : la phrase « plusieurs chantiers » visible sous le titre */
.s-note{margin:0 0 var(--e-5)}
/* A5-11 : la photo collante face aux métiers (plus deux sections de texte d'affilée) */
.mt-col{position:sticky;top:100px}
.mt-ph{margin:var(--e-7) 0 0;aspect-ratio:4/5;overflow:hidden}
.mt-ph img{width:100%;height:100%;object-fit:cover}
.me-lien{margin-top:var(--e-4);font-size:16px}
/* A5-10 : les chiffres détourés restent à l'accueil et au mur porteur ; ici, des petits numéros */
.mt-n{font:700 var(--fs-label)/1.9 var(--f-texte);letter-spacing:.2em;color:var(--rouge);-webkit-text-stroke:0}
.mt-liste li{grid-template-columns:40px minmax(0,1fr)}
/* A5-2 : chaque page finit autrement. Bandes (extension, rénovation) : une large, deux côte à côte */
.gal-bandes .gal-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gal-bandes .gal-g li,.gal-collage .gal-g li{grid-column:auto;grid-row:auto}
.gal-bandes .gal-it,.gal-bandes .gal-g li:nth-child(5n+1) .gal-it{aspect-ratio:4/3}
.gal-bandes .gal-g li:nth-child(3n+1){grid-column:1/-1}
.gal-bandes .gal-g li:nth-child(3n+1) .gal-it{aspect-ratio:21/9}
/* collage (mur porteur) : une grande à gauche, deux à droite, trois décalées dessous */
.gal-collage .gal-g{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:start}
.gal-collage .gal-g li:nth-child(1){grid-column:1/5;grid-row:1/3}
.gal-collage .gal-g li:nth-child(1) .gal-it{aspect-ratio:auto;height:100%}
.gal-collage .gal-g li:nth-child(2),.gal-collage .gal-g li:nth-child(3){grid-column:5/7}
.gal-collage .gal-g li:nth-child(4){grid-column:1/3}
.gal-collage .gal-g li:nth-child(5){grid-column:3/5;margin-top:56px}
.gal-collage .gal-g li:nth-child(6){grid-column:5/7}
.gal-collage .gal-it{aspect-ratio:4/3}
@media (max-width:760px){
  /* A5-12 : le carré décoratif ressemblait à une image cassée */
  .collage .deco{display:none}
  /* A2-4 : sur-titres des prestations lisibles */
  .travaux .l small{font-size:14px}
  /* A1-5 */
  .s-note{display:block}
  /* A2-5 : la porte, trois images empilées et légendées, sans épinglage */
  .porte{height:auto;padding:96px 0 48px}
  .porte .scene{position:relative;height:auto;overflow:visible;display:flex;flex-direction:column;gap:14px}
  .porte .titre{position:static;order:-2;padding:0 15px}
  .porte .etat{position:relative;inset:auto;clip-path:none!important;aspect-ratio:4/3;margin:0 15px}
  .porte .etat::after{content:attr(data-leg);position:absolute;left:0;bottom:0;padding:8px 12px;background:var(--brun);color:var(--pierre);font:700 14px/1.3 var(--f-texte)}
  .porte .voile,.porte .etapes{display:none}
  .porte .fin{position:static;opacity:1;transform:none;pointer-events:auto;padding:10px 15px 0}
  .porte .fin p{display:none}
  .porte .titre h2 .mot{transform:none;opacity:1}
  /* A5-5 : pièce par pièce, des cartes hautes qui remplissent l'écran */
  .p-carte img{aspect-ratio:4/5}
  .p-carte{width:80vw}.p-carte:nth-child(even){margin-top:0}
  .p-tete{padding-left:15px}
  /* A5-6 : la dalle, le sol visible et le texte en haut */
  .d-etat img{object-position:50% 90%}
  .d-txt{top:96px;bottom:auto}
  .d-voile{background:linear-gradient(to bottom,rgba(29,24,19,.8) 0%,rgba(29,24,19,.15) 50%)}
  /* A5-7 : vos extérieurs, la photo reste à l'écran pendant qu'on lit la liste */
  .ex-ph{position:sticky;top:64px;z-index:1}
  /* A5-8 : le premier écran des terrasses donne la place à la photo */
  .hs-ph{order:-1;aspect-ratio:auto;height:58svh}
  .hs-txt{padding:24px 15px 32px}
  /* A2-3 */
  .aa-lbl{font-size:14px}
  .aa-choix button{flex:1}
  /* A5-11 */
  .mt-col{position:static}.mt-ph{aspect-ratio:4/3}
  /* A5-2 au téléphone */
  .gal-bandes .gal-g,.gal-collage .gal-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gal-bandes .gal-g li:nth-child(3n+1) .gal-it{aspect-ratio:16/10}
  .gal-collage .gal-g li:nth-child(n){grid-column:auto;grid-row:auto;margin-top:0}
  .gal-collage .gal-g li:nth-child(1),.gal-collage .gal-g li:nth-child(4){grid-column:1/-1}
  .gal-collage .gal-g li:nth-child(1) .gal-it{aspect-ratio:16/10;height:auto}
  .g-nav{align-items:flex-start}
}
/* 29/09 · règle D3 : un seul libellé en majuscules par page. On garde « EXCELLENT » (le format Google) ; les autres passent en minuscules */
.hero .cadre figcaption,.chiffres .ch>span,.travaux .l small,.porte .fin p,.apres .texte li b,.devis .contact li b,footer .cols b,.aa-lbl,.aad-lbl,.tl .n-leg,.defile b{text-transform:none;letter-spacing:.04em}
/* 30/09 : la photo de Serkan (reçue le 30/09) en grand dans l'histoire ; son visage reste dans le cadre */
.collage .p1 img{object-position:50% 30%}
/* 01/10 : la clôture (Serkan) montre deux photos côte à côte dans le même écran */
.ex-duo{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ex-duo img{width:100%;height:100%;object-fit:cover}
/* 01/10 : deux avant / après sur la page Extension (Serkan) */
.aad-g.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.aad-g.deux{grid-template-columns:1fr}}
.aad-g.seul{grid-template-columns:minmax(0,760px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}