@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400..800&family=Darker+Grotesque:wght@400;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{--titre:'Darker Grotesque',sans-serif;--texte:'Albert Sans',sans-serif;--donnees:'IBM Plex Mono',monospace;--accent:#5EF28B;--accent-fonce:#126638;--accent-pale:#DDF9E6;--papier:#F0EEE8;--papier-clair:#FAF9F5;--encre:#171C19;--encre-doux:#313934;--filet:#A9AEA9;--filet-sombre:#626963;--blanc:#FFFFFF;--transparent:transparent;--ombre:color-mix(in srgb,var(--encre) 25%,var(--transparent));--voile:color-mix(in srgb,var(--encre) 84%,var(--transparent));}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;font-family:var(--texte);font-size:1rem;line-height:1.65;background:var(--papier);color:var(--encre)}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit}h1,h2,h3,p{margin-top:0}h1,h2,h3,.logo strong{font-family:var(--titre)}h1{font-size:clamp(3.5rem,8vw,9rem);line-height:.87;letter-spacing:-.045em}h2{font-size:clamp(2.7rem,6vw,6.6rem);line-height:.9;letter-spacing:-.04em}h3{font-size:clamp(1.6rem,3vw,2.6rem);line-height:1}.sur{text-transform:uppercase;letter-spacing:.18em;font-weight:800;font-size:.75rem}.hd{position:relative;z-index:50}.info{min-height:34px;padding:5px 2vw;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--donnees);font-size:.73rem;background:var(--encre);color:var(--papier)}.info a{font-weight:700}.barre{min-height:82px;padding:12px 2vw;display:flex;align-items:center;gap:2vw;background:var(--papier);border-bottom:1px solid var(--filet)}.logo{display:inline-flex;flex-direction:column;flex:0 0 auto;line-height:.8}.logo strong{font-size:1.55rem;letter-spacing:-.04em}.logo small{font-family:var(--donnees);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;margin-top:8px}.nav-principale{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,30px);margin-left:auto}.nav-principale a{font-size:.85rem;font-weight:700;transition:color .25s ease,transform .25s ease}.nav-principale a:hover{color:var(--accent-fonce);transform:translateY(-2px)}.action-hd,.btn{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:12px 18px;background:var(--accent);color:var(--encre);font-weight:800;text-transform:uppercase;letter-spacing:.07em;transition:background .25s ease,color .25s ease,transform .25s ease}.action-hd:hover,.btn:hover{background:var(--accent-fonce);color:var(--papier);transform:translateY(-3px)}.btn.sombre{background:var(--encre);color:var(--papier)}.btn.sombre:hover{background:var(--accent);color:var(--encre);transform:translateY(-3px)}.lien{font-weight:800;border-bottom:2px solid var(--accent);padding-bottom:4px;transition:color .25s ease,border-color .25s ease}.lien:hover{color:var(--accent-fonce);border-color:var(--encre)}.menu-bouton{display:none;background:var(--transparent);border:1px solid var(--encre);min-height:44px}.essentiel-haut{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--filet);background:var(--papier)}.essentiel-haut>div{padding:22px 2vw;border-right:1px solid var(--filet);display:flex;flex-direction:column}.essentiel-haut span{font-family:var(--donnees);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}.essentiel-haut strong,.essentiel-haut a{font-size:1.05rem;line-height:1.25;margin-top:5px}.essentiel-haut a{font-family:var(--titre);font-size:1.5rem}.essentiel-haut small{font-size:.72rem;margin-top:4px}.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.rv.visible{opacity:1;transform:translateY(0)}.numero{font-family:var(--donnees);font-size:.75rem;letter-spacing:.18em}.actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.appel-mobile{display:none}.pied{padding:72px 5vw 30px;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;background:var(--encre);color:var(--papier)}.pied>div{display:flex;flex-direction:column;gap:8px}.pied .logo{margin-bottom:18px}.pied p{max-width:44ch}.credit{grid-column:1/-1;border-top:1px solid var(--filet-sombre);padding-top:22px;font-size:.75rem}.nav-total{padding:45px 5vw;background:var(--accent);color:var(--encre);display:grid;grid-template-columns:220px 1fr;gap:20px}.nav-total>strong{font-family:var(--titre);font-size:2rem}.nav-total>div{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 20px}.nav-total a{border-bottom:1px solid var(--encre);padding:7px 0;transition:padding .25s ease,background .25s ease}.nav-total a:hover{padding-left:8px;background:var(--accent-pale)}.hero-page{min-height:72vh;display:grid;grid-template-columns:46% 54%;background:var(--encre);color:var(--papier)}.hero-page>div{padding:11vw 5vw 7vw}.hero-page h1{font-size:clamp(3.5rem,7vw,7.4rem)}.hero-page p:not(.sur){max-width:55ch}.hero-page figure{margin:0;min-height:620px;overflow:hidden}.hero-page figure img{transition:transform 1s ease,filter .6s ease}.hero-page:hover figure img{transform:scale(1.025);filter:saturate(.9)}.contenu-page{padding:100px 6vw;display:grid;grid-template-columns:1fr .85fr;gap:8vw}.contenu-page>div:first-child{max-width:700px}.liste-check{display:flex;flex-direction:column;border-top:1px solid var(--filet)}.liste-check span{padding:20px 0;border-bottom:1px solid var(--filet);font-family:var(--donnees);font-size:.82rem;transition:padding .25s ease,color .25s ease}.liste-check span:hover{padding-left:15px;color:var(--accent-fonce)}.diptyque-page{display:grid;grid-template-columns:58% 42%;background:var(--accent-pale)}.diptyque-page>img{min-height:600px}.diptyque-page>div{padding:9vw 5vw}.cta-final{padding:100px 6vw;background:var(--accent);color:var(--encre)}.cta-final h2{max-width:1050px}.cta-final p{max-width:780px}.devis-hero{min-height:65vh}.tunnel{max-width:1000px;margin:80px auto;padding:0 5vw}.progression{height:48px;border-bottom:1px solid var(--filet);position:relative;display:flex;align-items:center;justify-content:flex-end;font-family:var(--donnees)}.progression i{position:absolute;left:0;bottom:-2px;width:25%;height:4px;background:var(--accent);transition:width .4s ease}.etape{display:none;padding:55px 0}.etape.actif{display:grid;gap:16px;animation:entree .45s ease}.etape label{display:flex;justify-content:space-between;gap:20px;padding:18px;border:1px solid var(--filet);transition:border-color .25s ease,background .25s ease}.etape label:hover{border-color:var(--accent-fonce);background:var(--accent-pale)}.etape input[type=text],.etape input[type=tel]{min-height:44px;border:1px solid var(--filet);padding:8px}.depot{min-height:150px;align-items:center;justify-content:center!important;background:var(--accent-pale)}.confirmation{padding:20px;background:var(--accent);font-weight:800}
@keyframes entree{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes flottement{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ligne{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes defilement{from{transform:translateX(0)}to{transform:translateX(-30px)}}
@media(max-width:980px){.nav-principale{display:none}.menu-bouton{display:inline-flex;align-items:center;padding:8px 12px}.action-hd{margin-left:auto}.essentiel-haut{grid-template-columns:repeat(2,1fr)}.hero-page{grid-template-columns:1fr}.hero-page figure{min-height:50vh}.contenu-page,.diptyque-page{grid-template-columns:1fr}.nav-total{grid-template-columns:1fr}.nav-total>div{grid-template-columns:repeat(2,1fr)}.pied{grid-template-columns:1fr 1fr}}
@media(max-width:640px){h1{font-size:clamp(3.5rem,16vw,5.2rem)}h2{font-size:clamp(2.7rem,13vw,4.4rem)}.info{font-size:.58rem}.info span{max-width:58%}.barre{min-height:72px}.logo strong{font-size:1.25rem}.action-hd{display:none}.essentiel-haut{grid-template-columns:1fr}.essentiel-haut>div{border-right:0}.nav-total>div,.pied{grid-template-columns:1fr}.appel-mobile{position:fixed;z-index:80;display:flex;align-items:center;justify-content:center;left:12px;right:12px;bottom:10px;min-height:52px;background:var(--accent);color:var(--encre);font-weight:900}.pied{padding-bottom:90px}.hero-page>div{padding:120px 6vw 60px}.hero-page figure{min-height:48vh}.contenu-page,.tunnel{padding-left:6vw;padding-right:6vw}.diptyque-page>img{min-height:50vh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}}

.signature{padding-left:74px}.signature .hd{position:absolute;left:0;top:0;width:100%;padding-left:74px}.signature .info{display:none}.signature .barre{background:var(--transparent);border-color:var(--filet-sombre);color:var(--papier)}.signature .action-hd{color:var(--encre)}.signature .hd.defile .barre{position:fixed;left:74px;right:0;top:0;background:var(--voile);backdrop-filter:blur(16px);transition:background .35s ease,backdrop-filter .35s ease}.signature::before{content:'NIVEAU NEUF · SHOWROOM · CHANTIER';position:fixed;z-index:60;left:0;top:0;bottom:0;width:74px;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--encre);font-family:var(--donnees);font-size:.65rem;letter-spacing:.15em}.hero-s{height:100vh;height:100svh;min-height:680px;position:relative;overflow:hidden;background:var(--encre);color:var(--papier)}.hero-s picture,.hero-fond{position:absolute;inset:0}.hero-fond{animation:kenburns 22s ease-in-out infinite alternate}.bloc-hero{position:absolute;left:0;bottom:0;width:min(54%,780px);padding:5vw 5vw 4vw;background:var(--encre);animation:bloc-entree .9s ease both}.bloc-hero h1{font-size:clamp(4rem,7.4vw,8.5rem)}.bloc-hero>p:not(.sur){max-width:49ch}.defile{position:absolute;right:24px;bottom:24px;font-family:var(--donnees);font-size:.68rem;animation:pulse 2s ease infinite}.rayons{background:var(--papier)}.bande-titre{padding:100px 5vw 60px;display:grid;grid-template-columns:10% 22% 1fr;align-items:start}.bande-titre>span{font-family:var(--donnees)}.bande-titre h2{margin:0}.rayon{display:grid;grid-template-columns:45% 55%;padding:18px 5vw;border-top:1px solid var(--filet);align-items:center;transition:background .28s ease,color .28s ease,padding .28s ease}.rayon:last-of-type{border-bottom:1px solid var(--filet)}.rayon:hover{background:var(--accent);padding-left:7vw}.rayon b{font-family:var(--titre);font-size:clamp(3rem,7vw,7rem);line-height:.8}.rayon span{font-family:var(--donnees);font-size:.8rem}.note-rayons{max-width:780px;margin:50px 5vw 90px auto}.configurateur{background:var(--encre);color:var(--papier);display:grid;grid-template-columns:38% 62%;min-height:900px}.config-intro{padding:110px 5vw}.config-intro{background:var(--encre-doux)}.config-outil{padding:110px 6vw}.config-outil fieldset{border:0;border-top:1px solid var(--filet-sombre);margin:0;padding:24px 0}.config-outil legend{font-family:var(--donnees);font-size:.72rem;letter-spacing:.13em}.choix{display:flex;gap:8px;flex-wrap:wrap}.choix button{border:1px solid var(--filet-sombre);background:var(--transparent);color:var(--papier);min-height:48px;padding:10px 15px;cursor:pointer;transition:background .25s ease,color .25s ease,transform .25s ease}.choix button:hover{background:var(--encre-doux);transform:translateY(-2px)}.choix button.actif{background:var(--accent);color:var(--encre);border-color:var(--accent)}.config-outil label{display:grid;grid-template-columns:1fr 100px;align-items:center;gap:15px}.config-outil input[type=range]{accent-color:var(--accent)}.config-outil output{font-family:var(--titre);font-size:2rem}.resultat{margin-top:25px;padding:34px;background:var(--accent);color:var(--encre)}.resultat>span,.resultat>small{display:block;font-family:var(--donnees);font-size:.72rem}.resultat>strong{font-family:var(--titre);font-size:clamp(3rem,6vw,6rem);line-height:1;display:block}.resultat ol{display:grid;grid-template-columns:repeat(5,1fr);padding:0;list-style-position:inside;border-top:1px solid var(--encre)}.resultat li{padding:12px;border-right:1px solid var(--encre);font-size:.75rem}.resultat .btn{background:var(--encre);color:var(--papier)}.portfolio{padding:110px 5vw;display:grid;grid-template-columns:1fr 1fr;gap:24px}.portfolio-titre{grid-column:1/-1;display:grid;grid-template-columns:8% 20% 1fr}.portfolio-titre h2{max-width:850px}.portfolio figure{margin:0;height:520px;overflow:hidden;position:relative}.portfolio figure.grand{grid-column:1/-1;height:72vh}.portfolio figcaption{position:absolute;left:0;bottom:0;padding:10px 14px;background:var(--accent);font-family:var(--donnees);font-size:.68rem}.portfolio img{filter:saturate(.7);transition:filter .5s ease,transform .8s ease}.portfolio figure:hover img{filter:saturate(1);transform:scale(1.025)}.portfolio>.btn{justify-self:start}.matieres{display:grid;grid-template-columns:55% 45%;background:var(--accent-pale)}.image-bande{margin:0;height:760px;overflow:hidden}.matieres>div:nth-child(2){padding:100px 5vw}.liste-matieres{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(6,1fr);padding:0!important;background:var(--accent)}.liste-matieres span{padding:22px;text-align:center;border-right:1px solid var(--encre);font-family:var(--donnees);font-size:.7rem;transition:background .25s ease,color .25s ease}.liste-matieres span:hover{background:var(--encre);color:var(--papier)}.methode{padding:110px 5vw;background:var(--papier)}.methode>div{display:grid;grid-template-columns:25% 1fr}.methode ol{list-style:none;padding:0;margin:60px 0 0;border-top:1px solid var(--filet)}.methode li{display:grid;grid-template-columns:20% 40% 40%;padding:22px 0;border-bottom:1px solid var(--filet);align-items:start;transition:background .25s ease,padding .25s ease}.methode li:hover{background:var(--accent-pale);padding-left:20px}.methode li b{font-family:var(--donnees);font-size:.7rem}.methode li strong{font-family:var(--titre);font-size:2rem;line-height:1}.rupture{min-height:90vh;padding:100px 5vw;display:grid;grid-template-columns:1fr 340px;align-items:center;background:var(--accent);color:var(--encre)}.rupture blockquote{font-family:var(--titre);font-size:clamp(4rem,9vw,10rem);line-height:.78;letter-spacing:-.05em;margin:0}.rupture em{font-style:normal;color:var(--accent-fonce)}.rupture>div{border-left:1px solid var(--encre);padding-left:30px}.suivi{padding:110px 5vw;background:var(--encre);color:var(--papier);display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:6vw}.tableau{margin-top:50px;display:grid}.tableau span{padding:16px;border-top:1px solid var(--filet-sombre);font-family:var(--donnees);font-size:.75rem}.tableau span::before{content:'○';margin-right:12px}.tableau .fait::before{content:'●';color:var(--accent)}.tableau .actuel{background:var(--accent);color:var(--encre)}.tableau .actuel::before{content:'→'}.territoire{display:grid;grid-template-columns:50% 50%;min-height:700px}.carte{position:relative;background:var(--papier-clair);overflow:hidden}.carte span{position:absolute;font-family:var(--titre);font-size:clamp(2rem,5vw,5rem);z-index:2}.carte span:nth-child(1){left:12%;top:15%}.carte span:nth-child(2){right:12%;top:55%}.carte span:nth-child(3){left:22%;bottom:11%}.carte i{position:absolute;left:5%;right:5%;top:48%;height:3px;background:var(--accent);transform:rotate(-18deg);animation:ligne 1.4s ease both}.territoire>div:last-child{padding:100px 6vw}.liens-locaux{display:flex;flex-direction:column;margin-top:30px}.liens-locaux a{padding:16px 0;border-top:1px solid var(--filet);font-family:var(--titre);font-size:2rem;transition:padding .25s ease,color .25s ease}.liens-locaux a:hover{padding-left:18px;color:var(--accent-fonce)}
.hero-s,.bloc-hero,.defile,.rayons,.bande-titre,.rayon,.configurateur,.config-intro,.config-outil,.resultat,.portfolio,.portfolio-titre,.matieres,.image-bande,.methode,.rupture,.suivi,.territoire,.carte,.cta-final{transition:background-color .35s ease,color .35s ease,transform .35s ease}.config-outil fieldset,.resultat strong,.resultat ol,.portfolio figure,.matieres img,.methode ol,.rupture blockquote,.tableau,.carte span{transition:transform .35s ease,opacity .35s ease}.resultat:hover{transform:translateY(-4px)}.matieres img{transition:transform .8s ease,filter .5s ease}.matieres:hover img{transform:scale(1.02);filter:contrast(1.04)}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes bloc-entree{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes glissement{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
@keyframes apparition{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(max-width:1100px){.signature{padding-left:0}.signature::before{display:none}.signature .hd{padding-left:0}.signature .hd.defile .barre{left:0}.bloc-hero{width:68%}.configurateur{grid-template-columns:1fr}.config-intro,.config-outil{padding:80px 6vw}.matieres,.suivi,.territoire{grid-template-columns:1fr}.portfolio-titre{grid-template-columns:1fr}.liste-matieres{grid-template-columns:repeat(3,1fr)}.rupture{grid-template-columns:1fr;gap:60px}.rupture>div{max-width:620px}.methode>div{grid-template-columns:1fr}}
@media(max-width:640px){.hero-s{min-height:88svh;height:88svh}.bloc-hero{width:100%;padding:35px 6vw}.bloc-hero h1{font-size:clamp(3.8rem,16vw,5.6rem)}.bande-titre{grid-template-columns:1fr;padding:75px 6vw 40px}.rayon{grid-template-columns:1fr;padding:20px 6vw}.rayon b{font-size:3.2rem}.note-rayons{margin:40px 6vw 70px}.config-intro,.config-outil,.portfolio,.methode,.rupture,.suivi,.territoire>div:last-child,.cta-final{padding:75px 6vw}.choix{display:grid}.choix button{width:100%}.resultat{padding:24px}.resultat ol{grid-template-columns:1fr}.portfolio{grid-template-columns:1fr}.portfolio figure.grand{height:58vh}.portfolio figure{height:430px}.matieres{grid-template-columns:1fr}.image-bande{height:58vh}.liste-matieres{grid-template-columns:1fr 1fr}.methode li{grid-template-columns:1fr;gap:12px}.rupture{min-height:auto}.rupture blockquote{font-size:clamp(4rem,18vw,6rem)}.suivi{grid-template-columns:1fr}.territoire{grid-template-columns:1fr}.carte{min-height:520px}}
/* Mini design system NIVEAU NEUF — Le système Signalétique est appliqué sans rayons ni ombres décoratives. Les bandes horizontales jouent le rôle des rayons du showroom ; la verticale fixe joue le rôle du marquage de chantier. Le vert de trait laser relie mesure, alignement et validation des choix. Les titres Darker Grotesque ont trois graisses réellement chargées ; Albert Sans conserve une lecture calme ; IBM Plex Mono porte budgets, lots et étapes. La Signature renverse le premier écran en sombre, emploie un hero photographique couvrant et un bloc opaque O6. Les photos alternent plans de pièces, gestes, matières et lieu. Toute marque est éditable dans le texte du logo et toute couleur se règle depuis la racine. Les pages locales gardent une matière propre et ne sont pas des substitutions de ville. Le configurateur prépare la discussion sans se faire passer pour un devis. Les textes réglementaires distinguent clairement devis, engagement contractuel et attestation d’assurance. Les actions principales restent rectangulaires, larges et visibles. */

/* Composants des pages de contenu */
.galerie-page{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;padding:100px 5vw;background:var(--papier-clair)}
.galerie-page figure{margin:0;grid-column:span 4;min-height:420px;position:relative;overflow:hidden;border-top:3px solid var(--accent);transition:transform .35s ease,background .35s ease}
.galerie-page figure:nth-child(1),.galerie-page figure:nth-child(5){grid-column:span 8}
.galerie-page figure:hover{transform:translateY(-8px);background:var(--accent-pale)}
.galerie-page img{transition:transform .8s ease,filter .45s ease;filter:saturate(.74)}
.galerie-page figure:hover img{transform:scale(1.035);filter:saturate(1)}
.galerie-page figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 15px;background:var(--encre);color:var(--papier);font-family:var(--donnees);font-size:.68rem}
.hero-page .btn{margin-top:18px}
.hero-page .sur{color:var(--accent)}
.contenu-page h2{max-width:880px}
.contenu-page p{max-width:66ch}
.contenu-page strong{font-weight:800}
.diptyque-page .sur{color:var(--accent-fonce)}
.diptyque-page figure{margin:0}
.pied a{transition:color .25s ease,transform .25s ease}
.pied a:hover{color:var(--accent);transform:translateX(4px)}
.pied span{font-size:.86rem}
.pied strong{font-family:var(--titre);font-size:1.25rem}
.cta-final .actions>a:not(.btn){min-height:48px;display:inline-flex;align-items:center;font-weight:800;border-bottom:2px solid var(--encre);transition:color .25s ease,border-color .25s ease,transform .25s ease}
.cta-final .actions>a:not(.btn):hover{color:var(--accent-fonce);border-color:var(--accent-fonce);transform:translateY(-3px)}

/* Formulaires : une grande cible et une lecture linéaire */
.tunnel h2{max-width:760px}
.tunnel label{min-height:56px}
.tunnel input,.tunnel textarea,.tunnel select{background:var(--papier-clair);color:var(--encre);border-radius:0}
.tunnel input:focus,.tunnel textarea:focus,.tunnel select:focus{outline:3px solid var(--accent);outline-offset:3px}
.tunnel input[type=radio],.tunnel input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}
.tunnel .btn{justify-self:start;min-width:210px}
.depot input{max-width:320px}
.confirmation{border-left:8px solid var(--accent-fonce)}

/* États clavier et repères d’accessibilité */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.nav-principale a:focus-visible{background:var(--accent);color:var(--encre);padding:8px}
.rayon:focus-visible{background:var(--accent);color:var(--encre)}
.choix button:focus-visible{background:var(--accent);color:var(--encre)}
.liens-locaux a:focus-visible{padding-left:18px;background:var(--accent-pale)}
.appel-mobile:focus-visible{outline-color:var(--encre)}

/* Détails signalétiques : les changements d’aplat remplacent les ombres */
.hero-page::after{content:'';position:absolute;pointer-events:none;left:0;right:0;bottom:0;height:4px;background:var(--accent);transform-origin:left;animation:ligne 1.1s ease both}
.hero-page{position:relative}
.hero-page figure::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;background:var(--accent);opacity:.55;transform:translateX(-100%);animation:scan 5s ease-in-out infinite}
.hero-page figure{position:relative}
.liste-check span::before{content:'→';display:inline-block;color:var(--accent-fonce);margin-right:12px;transition:transform .25s ease,color .25s ease}
.liste-check span:hover::before{transform:translateX(5px);color:var(--encre)}
.essentiel-haut>div:last-child{background:var(--accent)}
.essentiel-haut>div:last-child a{transition:transform .25s ease,color .25s ease;transform-origin:left}
.essentiel-haut>div:last-child a:hover{transform:scale(1.04);color:var(--accent-fonce)}
.nav-total strong::after{content:'↓';display:block;color:var(--accent-fonce);animation:flottement 2.6s ease-in-out infinite}

/* Adaptation des pages locales et juridiques */
body:has(.hero-page) .hd .barre{transition:background .35s ease,color .35s ease,border-color .35s ease}
body:has(.hero-page) .hd.defile .barre{background:var(--voile);color:var(--papier);border-color:var(--filet-sombre)}
body:has(.hero-page) .contenu-page{border-bottom:1px solid var(--filet)}
body:has(.hero-page) .cta-final{border-top:1px solid var(--encre)}
.hero-page+ .essentiel-haut{position:relative;z-index:2}
.contenu-page+.diptyque-page{border-top:1px solid var(--filet)}
.diptyque-page+.galerie-page{border-top:1px solid var(--filet)}
.galerie-page+.cta-final{border-top:1px solid var(--encre)}

/* Réglages précis des grandes et petites largeurs */
@media(min-width:1500px){.bloc-hero{padding-left:6vw}.rayon{padding-left:6vw;padding-right:6vw}.config-outil{padding-right:8vw}.portfolio,.methode{padding-left:6vw;padding-right:6vw}.contenu-page{padding-left:8vw;padding-right:8vw}}
@media(max-width:1100px){.galerie-page figure,.galerie-page figure:nth-child(1),.galerie-page figure:nth-child(5){grid-column:span 6}.signature .menu-bouton{color:var(--papier);border-color:var(--papier)}.hero-page{padding-top:70px}}
@media(max-width:760px){.galerie-page{padding:75px 6vw}.galerie-page figure,.galerie-page figure:nth-child(1),.galerie-page figure:nth-child(5){grid-column:1/-1;min-height:390px}.hero-page figure::after{display:none}.tunnel label{align-items:flex-start;flex-direction:column}.nav-total{padding-bottom:70px}}
@media(max-width:420px){.logo strong{font-size:1.08rem}.logo small{letter-spacing:.08em}.info{padding-left:4vw;padding-right:4vw}.resultat>strong{font-size:2.8rem}.galerie-page figure{min-height:340px}.liste-matieres span{padding:18px 8px}.pied{gap:28px}}

/*
GUIDE DE COMPOSITION — SIGNATURE

1. LA ZONE HAUTE
Le premier écran est volontairement sombre et photographique. Le bloc opaque O6 n’occupe qu’une partie
de l’image : il protège le contraste du titre sans éteindre le showroom. Le rail vert reste visible à
gauche sur grand écran et disparaît lorsque la largeur ne permet plus d’en faire un repère utile. Le hero
emploie une image verticale dédiée sur téléphone ; ce n’est pas un simple recadrage du paysage. Le titre
reste ancré en bas à gauche, tandis que l’appel principal conduit vers l’outil plutôt que vers un formulaire.

2. LES BANDES DE RAYONS
Appartement, cuisine, salle de bains, sols et murs forment des rayons horizontaux. Leur taille varie peu,
car la signalétique doit d’abord faciliter le balayage. La réaction au survol combine un changement d’aplat
et un déplacement latéral ; au clavier, le même état actif reste lisible. Cette liste n’est jamais remplacée
par une grille de cartes. Sur mobile, chaque rayon devient une petite affiche verticale avec son descriptif.

3. L’OUTIL POSTE PAR POSTE
Le configurateur part toujours d’un exemple plausible : appartement de soixante mètres carrés, priorité
équilibre. Les boutons actifs sont pleins, pas seulement colorés au survol. Le résultat reste une enveloppe
d’orientation et le texte le rappelle dans le composant. Les cinq lots ne prétendent pas décrire tous les
cas ; ils révèlent leur dépendance et préparent les questions de la visite. L’action finale ouvre la page de
projet, où les photos deviennent le premier matériau réellement utile au conducteur.

4. LA PREUVE VISUELLE
Les réalisations ne sont pas des vignettes interchangeables. Une grande pièce terminée ouvre la séquence,
deux images plus petites montrent une salle d’eau et une étape technique. La page dédiée ajoute six vues
et conserve pour chacune une légende métier. La saturation remonte légèrement au survol ; la géométrie,
elle, reste rectangulaire et sans rayon. Aucune ombre douce ne transforme ces images en objets décoratifs.

5. LE MUR DES MATIÈRES
L’échantillonnage est traité comme un rayon de commerce : image couvrante, explication à côté, familles en
bandeau. Le vert laser est un repère d’alignement, pas une couleur décorative posée au hasard. Les matières
sont nommées par familles et jamais par marques fictives. Cette neutralité rend la démo facile à adapter à
un vrai stock de showroom, sans devoir refaire la composition.

6. LE SUIVI ET LA CONFIANCE
L’espace chantier emploie une liste de statuts plutôt qu’un faux logiciel complexe. Le statut actuel est
visible sans interaction. Les garanties sont formulées avec prudence : l’attestation décennale concerne les
travaux entrant dans son champ et doit être remise avant l’ouverture. Le devis est présenté comme une offre
contractuelle lorsqu’il est accepté, avec ses lignes et sa durée de validité, conformément aux informations
officielles consultées. Aucun badge non vérifiable n’est inventé.

7. LA PERSONNALISATION
Le nom NIVEAU NEUF est un texte HTML en un seul fragment principal, suivi d’un descripteur stable. Il accepte
un remplacement par une marque plus courte ou de trois syllabes. Les couleurs de marque n’apparaissent que
dans la racine : accent, accent sombre, accent pâle, papier, encres et filets. Les titres de chaque page
associent une formulation métier à la marque. Le menu de l’accueil expose les quatorze pages intérieures avec
des libellés humains, ce qui permet à l’éditeur de toutes les retrouver.

8. LE RYTHME
Le site alterne plusieurs familles : plein écran, bande d’informations, rayons, outil, galerie asymétrique,
diptyque matière, liste de méthode, citation monumentale, suivi sombre, territoire et appel final. Deux
sections consécutives ne reprennent pas le même schéma. La rupture très grande intervient aux deux tiers,
avant le suivi. Les filets et changements d’aplat font les séparations ; aucun arrondi ni dégradé décoratif
ne vient brouiller le système Signalétique.
*/