/* ============================================================
   DecoluxGlass 3D
   Palette, typo et grille reprises de DESIGN.md, sans rien inventer.
   La profondeur vient de CSS 3D uniquement. Aucune librairie.
   ============================================================ */
:root{
  --bg:#f2efe9;      --bg-rgb:242,239,233;
  --ink:#14171c;     --ink-rgb:20,23,28;
  --muted:#5d646e;
  --line:rgba(var(--ink-rgb),.16);
  --gold:#8a6f3f;
  --panel:#e7e3da;   --panel2:#e7e3da;   --panel3:#d8d3c8;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --maxw:1440px;
  --pad:80px;
  --gut:24px;
  /* Le libelle d'un bouton est rentre de son propre padding. On tire la
     rangee vers la gauche d'autant, pour que le texte du bouton retombe
     sur la meme colonne que le titre. Sur telephone la marge de page ne
     fait que 24px : rien a tirer, sinon la pastille touche le bord. */
  --cta-pad:32px;
  --cta-pull:-32px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:80px}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* deux halos fixes plus un grain, comme sur le landing */
body:before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% 8%,rgba(160,124,58,.09),transparent 60%),
    radial-gradient(1100px 700px at 88% 82%,rgba(70,82,96,.07),transparent 62%);
}
body:after{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>");
}
main,header,footer{position:relative;z-index:2}

.inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sec{padding:160px 0}
.sec + .sec{padding-top:0}
.grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)}

/* ---------- typo ---------- */
h1{font-family:var(--serif);font-weight:400;font-size:76px;line-height:1.02;letter-spacing:-.015em}
h2{font-family:var(--serif);font-weight:400;font-size:46px;line-height:1.14;letter-spacing:-.01em}
h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.24}
em{font-style:italic;color:var(--gold)}
p{max-width:65ch}
.lead{font-size:19px}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.muted{color:var(--muted)}
a{color:inherit}

/* ---------- topbar ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:40;
  backdrop-filter:blur(6px);background:rgba(var(--bg-rgb),.72);border-bottom:1px solid var(--line);
  transition:transform .38s cubic-bezier(.4,0,.2,1)}
/* La barre s'efface quand on descend et revient quand on remonte. Posee en
   permanence, elle passe sur les cadres cales, ou la photo occupe tout
   l'ecran : on la voit plus que l'ouvrage. Elle reste a portee d'un geste,
   c'est le seul chemin permanent vers les realisations et vers la langue. */
header.hide{transform:translateY(-100%)}
@media (prefers-reduced-motion: reduce){header{transition:none}}
header .inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
/* ---------- La marque ----------
   Le logo officiel Decolux Glass : la maison dans le cercle plus le mot
   trace en courbes. Il est declare une seule fois en <symbol> et repris
   par <use> dans l'en-tete et le pied de page, donc un seul trace pour
   les deux. Le fichier est peint en currentColor, la marque prend donc
   la couleur du texte autour et reste nette a toute taille. La largeur
   est calculee sur le ratio du viewBox, 511/100 = 5.11, sinon Safari
   donne zero a un <svg> sans dimension intrinseque. */
.brand{display:inline-flex;align-items:center;color:var(--ink)}
.brand .logo{display:block;height:34px;width:calc(34px * 5.11);--dg-ring:8}
footer .brand .logo{height:28px;width:calc(28px * 5.11);--dg-ring:10}
nav{display:flex;gap:32px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
nav a{text-decoration:none;color:var(--muted);transition:color .3s}
nav a:hover{color:var(--ink)}
.langs{display:flex;gap:8px;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.langs button{background:none;border:0;color:var(--muted);cursor:pointer;
  font-family:var(--sans);font-size:10px;letter-spacing:.2em;padding:4px 2px;
  transition:color .3s}
.langs button:hover{color:var(--ink)}
/* Un seul bouton a la fois : celui de la langue affichee disparait, il ne
   reste que la langue vers laquelle on peut basculer. Deux drapeaux cote a
   cote demandaient de lire lequel etait actif ; un seul dit ou l'on va. */
.langs button[aria-pressed="true"]{display:none}
.langs button[aria-pressed="false"]{color:var(--ink)}
/* Le drapeau dit la langue plus vite que deux lettres. Il reste minuscule :
   la page n'a qu'un accent, ces deux vignettes sont de la signalisation. */
.langs button{display:inline-flex;align-items:center;gap:7px}
.langs .flag{flex:none;display:block;width:21px;height:14px;
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),.18)}
/* Le bouton mesure 39x22 : lisible, mais trop petit pour un pouce, et sous les
   24x24 que demande le WCAG 2.5.8 pour une commande isolee. On elargit la seule
   zone cliquable avec un pseudo-element de 44x44 centre sur le bouton : le
   dessin ne bouge pas d'un pixel, l'en-tete ne grandit pas. Le debord lateral
   fait 2 a 3 px de chaque cote, largement contenu dans les 12 px qui separent
   le bouton du devis. */
.langs button{position:relative}
.langs button::after{content:'';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:100%;min-width:44px;height:44px}
/* ---------- menu du telephone ----------
   Sous 1100 px la barre de navigation ne tient plus en ligne. Elle etait
   simplement masquee : on ne pouvait alors changer de page que par le pied de
   page, a dix ecrans de la. Elle devient un panneau, ouvert par le bouton.

   Le bouton n'apparait qu'une fois la navigation masquee, donc au meme seuil.

   Mesure a 393 px : l'en-tete offre 378 px, la marque en prend 123, le devis
   137 et les langues 39 ; avec les espaces il reste -1 px pour un bouton de
   44. Le devis quitte donc l'en-tete sous 520 px et rejoint le panneau -- la
   barre de contact en bas le porte de toute facon sur chaque page. */
.burger{display:none;flex:none;width:44px;height:44px;padding:0;
  background:none;border:1px solid transparent;border-radius:50%;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:6px;
  transition:background-color .25s,border-color .25s}
.burger:hover,.burger:focus-visible{background:var(--panel);border-color:var(--line)}
.burger span{display:block;width:20px;height:2px;border-radius:1px;background:var(--ink);
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s,background-color .25s}
.burger:hover span,.burger:focus-visible span,.burger[aria-expanded="true"] span{background:var(--gold)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.menu-rule,.menu-plus{display:none}

@media (max-width:1100px){
  .burger{display:flex}
  /* Le panneau se pose sous l'en-tete, qui est deja `position:fixed`.
     `visibility` et non `display` : une transition a besoin d'un etat de
     depart, et un element en display:none n'en a pas. */
  nav{position:absolute;top:100%;left:0;right:0;
    display:flex;flex-direction:column;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:8px var(--pad) 20px;
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .28s ease,transform .28s cubic-bezier(.4,0,.2,1),visibility .28s}
  nav.open{visibility:visible;opacity:1;transform:none}
  /* 48 px de haut : c'est une cible tactile, pas une ligne de texte. */
  nav a{display:flex;align-items:center;min-height:48px;
    font-size:12px;letter-spacing:.18em;color:var(--ink)}
  .menu-rule{display:block;height:1px;background:var(--line);margin:12px 0 4px}
  .menu-plus{display:flex;color:var(--muted)}
  .menu-devis{color:var(--gold);letter-spacing:.2em}
  .menu-devis i{margin-left:8px}

  /* Des que le bouton apparait (tablette comme telephone), il se place a
     gauche de la marque, jamais au milieu de l'en-tete entre elle et le
     devis : `order:-1` l'amene en premier, `.langs` file a droite grace a
     la marge auto -- tout le reste (marque, devis) reste tasse a gauche.
     `margin-left:-12px` : le bouton fait 44 px pour la cible tactile mais
     son icone n'en occupe que 20, soit 12 px de vide a gauche ; on decale
     la boite d'autant pour que les trois traits s'alignent sur la marge de
     contenu au lieu de commencer 12 px plus a droite. */
  .burger{order:-1;margin-left:-12px}
  .langs{margin-left:auto}
}

/* ---------- boutons ---------- */
.cta{display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 var(--cta-pad);
  border:1px solid var(--line);border-radius:999px;text-decoration:none;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  /* Sur un <button>, sans ces trois lignes le navigateur impose son gris et sa
     police : la pastille du formulaire ne ressemblait plus aux autres. */
  background:none;color:var(--ink);font-family:inherit;cursor:pointer;
  transition:background .4s,color .4s,border-color .4s}
.cta:hover{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.cta i{font-style:normal;transition:transform .4s}
.cta:hover i{transform:translateX(5px)}
/* Un seul style de bouton sur le site, donc WhatsApp prend la meme pastille
   et le meme or au survol. Pas de vert de marque : la page n'a qu'un accent.
   Le pictogramme remplace la fleche, il suffit a dire ou mene le lien. */
/* Version courte pour la barre du haut : meme pastille, meme or au survol,
   seulement plus basse, sinon elle occupe la barre entiere. */
.cta-sm{height:38px;padding:0 22px;font-size:10px;letter-spacing:.2em;gap:10px}
.nav-work{flex:none}
@media (max-width:520px){
  header .inner{gap:12px}
  .brand .logo{height:24px;width:calc(24px * 5.11);--dg-ring:12}

  .langs{gap:6px}
  .langs button{gap:5px;padding:4px 0;letter-spacing:.12em}
  .langs .flag{width:18px;height:12px}
}
.cta .wa-i{flex:none;transition:transform .4s}
.cta:hover .wa-i{transform:scale(1.08)}

/* ============================================================
   PROFONDEUR
   .deep pose la perspective, .z fait entrer l'element depuis le
   fond de la scene. C'est du vrai translateZ, pas un translateY
   deguise, donc le mouvement se lit comme de la profondeur.
   ============================================================ */
.deep{perspective:1500px;perspective-origin:50% 45%}
.z{opacity:0;transform:translateZ(-340px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.3,1),transform 1.1s cubic-bezier(.2,.7,.3,1)}
.z.on{opacity:1;transform:none}
.z2{transition-delay:.10s}
.z3{transition-delay:.20s}
.z4{transition-delay:.30s}
.z5{transition-delay:.40s}

/* ---------- hero ---------- */
/* Quatre plans au lieu de cinq depuis le retrait de l'escalier a LED : on
   raccourcit la section dans la meme proportion, sinon chaque plan
   demanderait un quart de defilement en plus pour la meme image. */
.hero{height:420vh;position:relative;z-index:10}
.hero-stick{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;perspective:1200px}
/* Safari iOS remplace l'affiche par la surface de la video des qu'il a lu les
   metadonnees. Tant qu'aucune image n'a ete decodee, cette surface est noire,
   et le hero se retrouve vide sur iPhone. On garde donc l'affiche comme vraie
   image derriere, et la video ne se montre qu'une fois une image peinte : le
   pire cas devient un plan fixe, plus jamais un rectangle noir. */
.hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-stick video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:0;transition:opacity .5s}
.hero-stick video.painted{opacity:1}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,
  rgba(var(--bg-rgb),.78) 0%,rgba(var(--bg-rgb),.42) 38%,rgba(var(--bg-rgb),.60) 74%,rgba(var(--bg-rgb),.94) 100%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  transform-style:preserve-3d}
.hero-in h1{text-shadow:0 2px 60px rgba(0,0,0,.7)}
.hero-note{margin-top:28px;max-width:46ch;color:var(--muted);font-size:15px}
.scrollhint{position:absolute;left:var(--pad);bottom:130px;z-index:2;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:12px}
.scrollhint i{display:block;width:1px;height:38px;background:var(--line);position:relative;overflow:hidden}
.scrollhint i:after{content:'';position:absolute;left:0;top:-38px;width:1px;height:38px;
  background:var(--gold);animation:drop 2.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes drop{0%{top:-38px}60%,100%{top:38px}}

/* ---------- bande de confiance ----------
   Bord a bord, sans .inner : le ruban traverse tout l'ecran, sur desktop
   comme sur mobile. Deux copies identiques du texte defilent, et la
   translation de -50% ramene exactement la seconde sur la premiere, donc
   la boucle ne saute jamais. La duree est calculee en JS a partir de la
   largeur reelle, pour garder la meme vitesse quelle que soit la langue
   ou la taille d'ecran. */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(var(--bg-rgb),.9);position:relative;z-index:11;overflow:hidden}
.marquee{overflow:hidden;padding:22px 0}
.track{display:flex;width:max-content;will-change:transform;
  animation:marq var(--marq,60s) linear infinite}
.trust:hover .track{animation-play-state:paused}
.run{display:inline-block;white-space:nowrap;padding-right:48px;
  font-size:12px;letter-spacing:.22em;color:var(--muted)}
.run b{font-weight:400;color:var(--ink)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:900px){
  .marquee{padding:16px 0}
  .run{font-size:11px;letter-spacing:.18em;padding-right:32px}
}

/* ---------- index des services ----------
   La liste remplace la grille de photos. Survol au pointeur, appui au
   doigt : le meme geste designe le service et appelle son image. Les
   images sont toutes dans le DOM et se croisent en opacite, donc le
   changement est instantane, sans chargement au survol. */
/* La colonne image tient exactement la hauteur du bloc de gauche : elle
   commence a la ligne du sous-titre et s'arrete sur le trait de Pergolas.
   Les rangees sont collees, chaque bloc garde sa propre marge. */
.svc-wrap{margin-top:0;row-gap:0}
.svc .idx{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--gold);
  opacity:0;transition:opacity .35s}
.svc.on{color:var(--ink);padding-left:18px}
.svc.on .idx{opacity:1}

/* 4:3, le format natif de leurs photos. En 4:5 on rognait jusqu'a 43%
   de la largeur, soit 280px de chaque cote : le sujet sortait du cadre. */
.svc-view{position:relative;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--line);background:var(--panel)}
.svc-view img.on{opacity:1;transform:none}

/* ---------- alternance des photos ----------
   Deux photos exactement superposees qui se relaient en fondu croise
   toutes les quatre secondes. L'etiquette suit l'image, sinon on ne sait
   plus laquelle on regarde. La minuterie ne tourne que lorsque le bloc est
   a l'ecran et que son service est celui qui est selectionne. */
/* Les blocs caches sont empiles au meme endroit : sans cela le dernier
   recouvre les autres et c'est son bouton qui recoit le clic. */
.ba{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),visibility 0s .55s}
.ba.on{opacity:1;visibility:visible;transition-delay:0s,0s}
.ba-shot.show{opacity:1}
/* Discret mais explicite : il nomme la photo qu'il va afficher, donc on
   sait ou l'on va avant d'appuyer. Cible tactile de 44px garantie par le
   padding, sans grossir le trait. */
.ba-next{position:absolute;right:12px;bottom:8px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;background:rgba(var(--bg-rgb),.62);border:1px solid var(--line);
  border-radius:999px;color:var(--muted);cursor:pointer;
  font-family:var(--sans);font-weight:300;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;transition:color .3s,border-color .3s,background .3s}

@media (max-width:900px){
  /* au doigt, l'image doit etre visible pendant qu'on touche la liste,
     donc elle passe au-dessus et la liste juste en dessous */
  .svc-media{grid-row:auto !important;order:1;margin-top:40px}
  .svc.on{padding-left:10px}
}
.prod{position:relative;text-decoration:none;display:block;align-self:start;
  border:1px solid var(--line);background:var(--panel);overflow:hidden}
.prod .ph{position:relative;overflow:hidden;aspect-ratio:16/9}
.prod.big .ph{aspect-ratio:16/10}
.prod img{width:100%;height:100%;object-fit:cover;opacity:1;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1),opacity .6s}
.prod:hover img{transform:scale(1.045);opacity:1}
/* Le titre et le lien « Decouvrir » partagent une rangee. Le lien ne se coupe
   pas -- 224 px a lui seul -- et comme rien ne l'empechait de garder sa place,
   c'est le bloc de texte qui se faisait ecraser : sur iPhone 15 il tombait a
   64 px, « Garde-corps en verre » sortait a raison d'un mot par ligne.
   Aucun media query ne le rattrapait.
   `flex:1 1 220px` sur le texte dit la largeur en dessous de laquelle on ne
   descend pas ; le `wrap` envoie alors le lien a la ligne suivante. Pas de
   seuil en pixels a maintenir : la rangee se casse quand elle ne tient plus,
   quelle que soit la largeur de la carte. */
.prod .meta{padding:24px;display:flex;align-items:flex-start;
  justify-content:space-between;gap:24px;flex-wrap:wrap}
.prod .meta > :first-child{flex:1 1 220px;min-width:0}
.prod .go{flex:0 0 auto}
.prod .n{font-family:var(--serif);font-size:13px;color:var(--gold);letter-spacing:.1em;line-height:1.6}
.prod h3{margin-top:6px}
.prod .sub{color:var(--muted);font-size:14px;margin-top:8px;max-width:38ch}
.prod .go{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;display:flex;align-items:center;gap:10px;padding-top:6px}
.prod:hover .go{color:var(--gold)}

/* ============================================================
   VUES ECLATEES
   Deux schemas techniques en 3D reelle. L'ecartement des couches
   suit le defilement, donc on voit ce qu'il y a dans le verre au
   lieu de le lire. C'est la seule raison d'etre du 3D ici.
   ============================================================ */
.xp{position:relative;height:420px;display:flex;align-items:center;justify-content:flex-end;
  perspective:1600px;margin-top:8px;padding-right:4%;overflow:hidden}
.pane.film{border-color:rgba(205,187,153,.85);
  background:linear-gradient(135deg,rgba(205,187,153,.30),rgba(205,187,153,.10))}

/* ---------- realisation en evidence ---------- */

/* ---------- trois poses en profondeur ----------
   Meme regle que le hero : la section est haute, un cadre y reste colle,
   et le defilement est la seule commande. Les trois photos avancent vers
   le lecteur l'une apres l'autre, aucune animation ne part toute seule. */
.stack{position:relative;height:320vh}
/* Ni le rail ni le cadre cale n'existent sur grand ecran : tous deux sortent
   de la mise en page, et la grille reste exactement celle d'avant, placement
   des deux colonnes compris. */
.stack-track,.stack-pin{display:contents}
.stack-text .lead{margin-top:24px}

/* Les trois poses sont posees l une sur l autre. Celle du dessus est
   decoupee au bord droit et s ouvre vers la droite au defilement : la
   pose suivante arrive par une coupe nette, jamais par un fondu. */
.card{position:absolute;inset:0;margin:0;overflow:hidden;
  border:1px solid var(--line);background:var(--panel3);will-change:clip-path;
  box-shadow:0 30px 80px rgba(var(--ink-rgb),.18)}
/* un voile en bas, sinon la legende se perd dans un ciel clair */
.card:after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.62))}
/* Quand la coupe tourne, la legende de la carte serait tranchee avec elle :
   elle est reprise au-dessus de la pile, hors decoupe. */
.stack-stage.cut-on .card figcaption{display:none}
.stack-stage.cut-on .stack-cap{display:block;position:absolute;left:18px;bottom:14px;z-index:4;
  pointer-events:none;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:#f6f4f0;text-shadow:0 1px 14px rgba(0,0,0,.9)}
@media (max-width:900px){
  /* le titre passe au-dessus, la photo dessous, et le cadre colle se
     resserre pour ne pas laisser un grand vide autour d'elle */
  /* Coller tout le cadre sortait les photos de l'ecran pendant qu'on lit le
     bloc de preuve : la section defile donc normalement. Seul le cadre photo
     est cale, et sur son propre rail. Il se centre dans l'ecran, y reste le
     temps que les trois poses se decoupent, puis le rail se termine et la
     page repart. Le rail est vide, donc rien ne passe sous le cadre. */
  .stack{height:auto}
  /* Le titre et le chapo montent dans le cadre cale, au-dessus des poses :
     on garde sous les yeux ce qu'on est en train de regarder pendant que les
     trois chantiers defilent, comme la colonne de gauche le fait sur grand
     ecran. Tout est centre en hauteur, donc le bloc respire pareil sur un
     grand telephone et sur un petit. */
  /* La boite epouse son contenu et c'est le decalage colle qui la centre. Lui
     donner 100svh centrait aussi bien, mais laissait ensuite une demi-hauteur
     d'ecran vide entre la derniere pose et la promesse : le rail se terminait
     sous le cadre, pas sous la photo. Le decalage est calcule en JS, la
     hauteur du bloc dependant du titre, donc de la langue. */
  .stack-pin{position:sticky;top:var(--pin-top,0px);display:flex;flex-direction:column;gap:22px}
  /* Le chapo de 19px prenait cinq lignes au-dessus de la vignette et ecrasait
     la photo. Reduit, il tient en quatre et rend sa place a l'image, qui est
     le sujet de la section. */
  .stack-text .lead{font-size:16px;line-height:1.6;margin-top:16px}
  /* Sur un ecran court les trois ne tiennent pas en pleine hauteur : c'est la
     vignette qui cede, elle reste lisible en paysage plutot que de pousser le
     titre hors du cadre. */
  .stack-stage{max-height:44svh}
}
/* Sans mouvement : les trois photos se lisent simplement l'une sous l'autre. */


/* ---------- sortie vers les realisations ----------
   Centree, contrairement au reste de la page : c'est une destination, pas un
   paragraphe. Le halo evite que trois elements seuls sonnent inacheve, le
   filet du bas separe la section du formulaire qui suit. */
.vnc{position:relative;text-align:center;overflow:hidden}
/* Section centree : elle se lit comme une destination, donc son air doit etre
   egal en haut et en bas. Le selecteur double reprend la main sur .sec + .sec. */
.sec.vnc{padding-top:120px;padding-bottom:120px}
.vnc .cta{margin-top:72px}
@media (max-width:900px){
  .vnc .cta{margin-top:48px}
}

/* ---------- le bloc de preuve ----------
   Sur grand ecran il se lit sous le titre, dans la colonne de gauche, pendant
   que les poses defilent a droite. Sous 900px il passe sous les photos : on
   regarde d abord le travail, on lit les garanties ensuite. */
.stack-more{grid-column:1 / -1}
.mt-qi dt .n{font-family:var(--serif);font-size:12px;letter-spacing:.1em;color:var(--gold)}
/* Sur telephone le bloc se lit au centre : il n'y a plus de colonne de photos
   a cote pour justifier l'alignement a gauche, et la promesse porte mieux
   centree. Le paragraphe de contexte au-dessus reste a gauche, c'est du corps
   de texte. Le filet devient symetrique, sinon un trait qui s'efface d'un seul
   cote sous un texte centre se lit comme une erreur. Les numeros passent
   au-dessus de leur question : garder la colonne de 32px casserait le centre. */

@media (min-width:901px){
  /* colonne de gauche, sous le titre ; la photo occupe les deux rangees */
  .stack-text{grid-row:1}
}
/* Sur un ecran bas, la colonne de gauche depasse la hauteur du cadre : le
   coller couperait la signature. On rend alors la section au defilement
   normal, la coupe entre les poses continue de suivre la molette. */


@media (max-width:900px){
  /* empile : on lit le titre, puis la vue eclatee, puis la preuve filmee */
  .sf-media{order:2;margin-top:40px}
}
/* Le clip est filme a la verticale et porte des titres incrustes : on
   garde son cadrage 9/16 entier, jamais recadre. Sa hauteur est calee sur
   la colonne de texte d'en face. */
.sf-media{display:flex;flex-direction:column}
.form{margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:32px var(--gut)}
.field{position:relative;display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
.field label{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.field:focus-within label{color:var(--gold)}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;
  padding:10px 0;outline:none;transition:border-color .3s;border-radius:0}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field select option{background:var(--panel2);color:var(--ink)}
.formrow{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px;margin-top:24px}
.formnote{margin-top:24px;font-size:13px;color:var(--muted);text-align:center;max-width:64ch;margin-left:auto;margin-right:auto}
.hp{position:absolute;left:-9999px;opacity:0}
@media (max-width:900px){.form{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:40px 0 64px;margin-top:80px}
footer .inner{display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;
  font-size:12px;color:var(--muted)}

/* ---------- barre de progression ---------- */
.prog{position:fixed;top:0;left:0;width:2px;height:0;background:var(--gold);z-index:50;opacity:.75}

/* ---------- responsive ---------- */
@media (max-width:900px){
  /* la marge de page tombe a 24px : plus de place pour sortir la pastille
     du cadre, donc on annule le tirage et on garde les bords alignes.
     Libelle long en capitales : interlettrage resserre pour que la pastille
     tienne dans la largeur d'un telephone sans casser sur deux lignes. */
  :root{--pad:24px;--cta-pad:24px;--cta-pull:0px}
  .cta{letter-spacing:.16em}
  h1{font-size:42px}
  h2{font-size:33px}
  .sec{padding:80px 0}
  .hero{height:340vh}
  .grid{grid-template-columns:repeat(6,1fr)}
  /* les spans inline visent une grille de 12 colonnes ; en dessous de 900px
     la grille en compte 6, donc tout passe pleine largeur */
  .grid > *{grid-column:1 / -1 !important}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .z{opacity:1;transform:none;transition:none}
  .scrollhint i:after{animation:none}
  .prod img{transition:none}
  .track{animation:none}
  .marquee{overflow-x:auto}
}

/* ---------- l'exception du hero ----------
   Sur une page claire le clip garde son voile sombre : c'est une image
   plein ecran, elle a besoin d'un fond dense pour que le titre tienne.
   Le hero rouvre donc la palette d'origine pour lui seul. Tout ce qu'il
   contient est deja peint en var(), il suffit de redefinir les jetons. */
.hero{
  --bg:#06070a;   --bg-rgb:6,7,10;
  --ink:#f6f4f0;  --ink-rgb:246,244,240;
  --muted:#dcdfe3;
  --line:rgba(var(--ink-rgb),.24);
  --gold:#e6d6b0;
  color:var(--ink);
}
/* Les plans sont clairs maintenant : le voile d'origine, calcule pour une
   image de nuit, les ecraserait. On garde juste ce qu'il faut sous le titre. */
.hero-veil{background:
  linear-gradient(180deg,
    rgba(var(--bg-rgb),.22) 0%,rgba(var(--bg-rgb),.08) 32%,
    rgba(var(--bg-rgb),.30) 72%,rgba(var(--bg-rgb),.62) 100%),
  linear-gradient(90deg,
    rgba(var(--bg-rgb),.70) 0%,rgba(var(--bg-rgb),.46) 30%,
    rgba(var(--bg-rgb),.14) 54%,rgba(var(--bg-rgb),0) 70%)}
.hero-in h1{text-shadow:0 2px 40px rgba(var(--bg-rgb),.85)}
.hero-note{text-shadow:0 1px 18px rgba(var(--bg-rgb),.9)}

/* ============================================================
   AJOUTS DU CAHIER DES CHARGES DE SEPTEMBRE 2026
   ============================================================ */

/* ---------- barre de contact permanente ----------
   Le client demande que les trois acces restent sous la main sur toutes
   les pages : personne ne doit chercher un numero. DESIGN.md interdisait
   la banniere collante agressive, on garde donc la contrainte utile de
   cette regle : fond papier, un seul filet, pas d'ombre, pas de couleur
   pleine, hauteur minimale. Elle porte, elle ne crie pas. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:rgba(var(--bg-rgb),.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  transform:translateY(0);transition:transform .38s cubic-bezier(.4,0,.2,1)}
.bar.hide{transform:translateY(100%)}
@media (prefers-reduced-motion: reduce){.bar{transition:none}}
.bar-in{max-width:var(--maxw);margin:0 auto;padding:12px var(--pad) 14px;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.bar-row{display:flex;align-items:center;justify-content:center;gap:10px 16px;flex-wrap:wrap}
/* Deux jeux de libelles vivent dans le HTML. Au-dessus de 520 px on lit les
   longs, ceux du cahier des charges ; en dessous les courts, sinon les trois
   boutons ne tiennent pas sur une rangee. Mesure a 390 px : la rangee fait
   343 px, il reste 81 px de texte par bouton, et « Demander un devis
   gratuit » en demande 125. */
.bar-sm{display:none}
/* Le seuil des libelles n'est pas celui du telephone. Mesure : les trois
   libelles longs demandent 256 + 262 + 238 px, plus deux espaces de 16, soit
   788 px de rangee. La rangee vaut la fenetre moins deux marges de 24 px sous
   900 px de large, donc il faut environ 836 px de fenetre pour les tenir sur
   un rang. En dessous, on passe aux courts -- sinon la barre se coupait en
   trois lignes sur toute la plage 521-835 px, tablettes comprises.
   860 px laisse une marge : l'anglais est plus court, c'est le francais qui
   commande. */
@media (max-width:860px){
  .bar-lg{display:none}
  .bar-sm{display:inline}
}
.bar .cta{height:44px;padding:0 22px;font-size:10px;letter-spacing:.2em}
.bar .cta.lead{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.bar .cta.lead:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.bar-note{text-align:center;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);max-width:none}
/* la barre occupe le bas de l'ecran en permanence : on rend au document
   la hauteur qu'elle lui prend, sinon elle mange la derniere ligne. */
body{padding-bottom:118px}

/* ---------- les quatre reperes sous le hero ---------- */
.hero-pts{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px 26px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hero-pts li{list-style:none;display:flex;align-items:center;gap:10px}
.hero-pts li:before{content:'';width:5px;height:5px;flex:none;
  background:var(--gold);transform:rotate(45deg)}

/* ---------- les trois savoir-faire ----------
   Le garde-corps mene la page : il prend toute la largeur et passe en
   premier, les deux autres se partagent la rangee suivante. */
.svc3{display:grid;grid-column:1 / -1;gap:var(--gut);
  grid-template-columns:repeat(2,1fr);margin-top:64px}
.svc3 .prod.big{grid-column:1 / -1}
.prod.big .meta{padding:32px}
.prod.big h3{font-size:32px}
/* Fenetres et pergolas doivent occuper la meme hauteur de carte : la photo
   est deja identique (meme ratio, meme largeur de colonne), mais "Fenêtres"
   a une description sur 3 lignes contre 2 pour "Pergolas", et `align-self:
   start` (ligne ~311) laissait chaque carte se caler sur son propre contenu
   -- la carte au texte plus court paraissait donc plus petite. */
.svc3 .prod:not(.big){align-self:stretch;display:flex;flex-direction:column}
.svc3 .prod:not(.big) .ph{flex:none}
.svc3 .prod:not(.big) .meta{flex:1 1 auto}

/* ---------- pourquoi nous ----------
   Quatre points, pas quatre cartes : un filet, un titre, deux lignes.
   DESIGN.md interdit la grille de cartes identiques a icone. */
.why{grid-column:1 / -1;margin-top:64px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--gut)}
.why-i{padding:32px 0;border-top:1px solid var(--line)}
.why-i h3{font-size:20px;font-family:var(--sans);font-weight:300}
.why-i p{color:var(--muted);font-size:15px;margin-top:10px;max-width:46ch}

/* ---------- les cinq etapes ----------
   Une colonne de titres numerotes, chacun sur son filet. Le numero est
   en chiffres serif dores, comme les reperes du reste de la page. */
.steps{grid-column:1 / -1;margin-top:56px;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:88px 1fr;gap:0 24px;
  padding:30px 0;border-bottom:1px solid var(--line)}
.step .n{font-family:var(--serif);font-size:22px;color:var(--gold);line-height:1.2}
.step h3{font-size:21px;font-family:var(--sans);font-weight:300}
.step p{color:var(--muted);font-size:15px;margin-top:10px;max-width:60ch}
/* Demande explicite du 10 septembre : ce bloc-la est centre.
   DESIGN.md dit « Totul la stanga... Nimic centrat » -- l'ecart est assume et
   ne vaut que pour ce bloc, la fin du parcours. Le reste de la page ne bouge
   pas. `margin-left:var(--cta-pull)` saute : ce decalage sert a aligner le
   bord du texte d'un bouton cale a gauche, il n'a plus de sens une fois
   centre, et il decalait le centre de 32 px. */
.steps-end{grid-column:1 / -1;margin-top:48px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:18px 24px;text-align:center}
.steps-end .note{font-size:13px;color:var(--muted);flex-basis:100%}

/* ---------- bouton sous la troisieme carte : encadre pour l'attention ----------
   Le lien vers le test de resistance passait inapercu : pastille en ligne
   sur un fond de meme couleur, on defilait dessus sans le voir. Il est
   desormais dans un cadre a fond degrade or, bouton plein, et respire par
   une lueur lente (coupee si l'utilisateur refuse les animations). Au survol
   ou au toucher (`:focus-within` couvre le tap), le degrade se renforce, le
   filet passe a l'or et la lueur s'installe. Le degrade est un voile or sur
   `--panel`, le meme procede que le survol des cartes produit -- aucun
   degrade sur du texte, ce que DESIGN.md interdit. */
.svc3-end{grid-column:1 / -1;margin-top:48px;
  max-width:720px;margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:16px 24px;text-align:center;
  padding:40px 28px;border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(205,187,153,.34),rgba(205,187,153,.10)),var(--panel);
  transition:border-color .4s,box-shadow .4s,background .4s;
  animation:svc3-glow 2.8s ease-in-out infinite}
@keyframes svc3-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(138,111,63,0)}
  50%{box-shadow:0 0 0 5px rgba(138,111,63,.10)}}
.svc3-end:hover,.svc3-end:focus-within{
  border-color:var(--gold);
  background:linear-gradient(135deg,rgba(205,187,153,.54),rgba(205,187,153,.18)),var(--panel);
  box-shadow:0 0 0 5px rgba(138,111,63,.16)}
/* Le bouton est le point focal : plein or par defaut ici, contour au survol
   -- l'inverse du reste du site, ou le survol remplit. */
.svc3-end .cta{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.svc3-end:hover .cta,.svc3-end .cta:hover,.svc3-end .cta:focus-visible{
  background:transparent;color:var(--ink);border-color:var(--ink)}
.svc3-end .cta:active{transform:translateY(1px)}
/* `max-width:none` n'est pas decoratif : la regle globale `p{max-width:65ch}`
   plafonne ce paragraphe a environ 490 px, donc sa taille de base n'atteint
   jamais les 100 % demandes et il reste sur la ligne du bouton au lieu de
   passer dessous. La note de `.steps-end` est un <span>, elle echappait a la
   regle -- d'ou la difference de comportement entre les deux blocs. */
.svc3-end .note{font-size:13px;color:var(--muted);flex:0 0 100%;max-width:none}

/* ---------- page du test de resistance ----------
   La colonne s'appelle `.essai` et non `.proof` : `.proof` existe deja depuis
   l'ancienne section du marteau sur l'accueil, avec `overflow:hidden`,
   `aspect-ratio:16/9` et un `.proof video{width:100%;height:100%}`. La colonne
   en heritait : le texte etait coupe a 194 px de haut dans un cadre borde, et
   le film etirait aux dimensions du conteneur. Le nom collait, pas le style.
   Une seule colonne, centree : sur cette page il n'y a qu'une chose a
   regarder, et rien a aligner contre elle. DESIGN.md dit « Totul la stanga...
   Nimic centrat » ; l'ecart est demande, et il s'arrete a cette page et au
   bloc final de l'accueil. Le reste du site ne bouge pas.

   `max-width` sur la colonne et non sur le texte : un paragraphe centre sur
   toute la largeur de la grille serait illisible, l'oeil ne retrouverait pas
   le debut de la ligne suivante. */
.essai{grid-column:1 / -1;max-width:720px;margin:0 auto;text-align:center}
/* Tous les paragraphes, pas seulement le sous-titre : la regle globale
   `p{max-width:65ch}` les plafonne, et sans marges automatiques un bloc plus
   etroit que sa colonne se colle a gauche meme si le texte, lui, est centre.
   La note de bas de page etait decalee de 113 px pour cette raison.
   C'est la troisieme fois que cette regle mord ; voir HANDOFF. */
.essai p{margin-left:auto;margin-right:auto}

/* Le lien de retour est en haut, avant le titre : la page se regarde puis se
   quitte, et l'on ne doit pas avoir a redescendre pour trouver la sortie. */
.back{display:inline-block;margin-bottom:40px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .3s}
.back:hover{color:var(--gold)}

/* Le film est vertical, tourne au telephone. On le borne en hauteur plutot
   qu'en largeur : sur un ecran large, une video 9/16 etalee sur 720 px
   depasserait la fenetre et il faudrait defiler pour voir le choc. */
.essai-film{margin:56px 0 0;display:flex;justify-content:center}
.essai-film video{display:block;max-width:100%;width:auto;
  max-height:min(72vh,760px);aspect-ratio:9/16;
  border:1px solid var(--line);background:var(--panel);
  /* Rien ne doit apparaitre quand on pose le doigt dessus. `controls` est deja
     retire, mais il reste deux portes : l'appui long d'iOS, qui ouvre un menu
     « Enregistrer la video », et la selection. `pointer-events:none` ferme les
     deux d'un coup, et ne coute rien puisque le film tourne en boucle tout
     seul -- il n'y a rien a cliquer. Le defilement de la page passe au travers
     normalement. */
  -webkit-touch-callout:none;user-select:none;-webkit-user-select:none;
  pointer-events:none}
.essai-note{margin-top:32px;color:var(--muted);font-size:13px}

/* ---------- pied de page ---------- */
footer .ft{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px var(--gut)}
footer .ft h4{font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin-bottom:14px}
footer .ft a{color:var(--ink);text-decoration:none;transition:color .3s}
footer .ft a:hover{color:var(--gold)}
footer .ft ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
.social{display:flex;gap:14px;margin-top:16px}
.social a{width:36px;height:36px;border:1px solid var(--line);border-radius:999px;
  display:grid;place-items:center;color:var(--muted);transition:color .3s,border-color .3s}
.social a:hover{color:var(--gold);border-color:var(--gold)}
.social svg{width:16px;height:16px;fill:currentColor;display:block}
.ft-legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 26px;font-size:12px;color:var(--muted)}

@media (max-width:900px){
  .svc3{grid-template-columns:1fr;margin-top:48px}
  .why{grid-template-columns:1fr;margin-top:48px}
  .why-i{padding:26px 0}
  .step{grid-template-columns:56px 1fr;gap:0 16px;padding:24px 0}
  footer .ft{grid-template-columns:1fr;gap:32px}
  .prod.big h3{font-size:26px}
  .prod.big .meta{padding:24px}
}
@media (max-width:520px){
  .bar-in{padding:10px 16px;gap:8px}
  /* nowrap + `flex:1 1 0` : trois parts egales sur une seule rangee. Avec
     `flex:1 1 auto` et le retour a la ligne, chaque bouton prenait la largeur
     entiere et on obtenait trois barres empilees. `min-width:0` est
     indispensable, sans lui un enfant flex refuse de passer sous la largeur
     de son contenu et le nowrap deborde. */
  .bar-row{gap:8px;width:100%;flex-wrap:nowrap}
  .bar .cta{height:40px;padding:0 10px;font-size:9px;letter-spacing:.12em;
    flex:1 1 0;min-width:0;gap:6px}
  .bar .cta i{display:none}
  .bar-note{display:none}
  body{padding-bottom:72px}
  .scrollhint{bottom:96px}
  .hero-pts{gap:8px 18px;font-size:10px;letter-spacing:.12em}
}

/* ============================================================
   PAGES INTERIEURES
   Meme grille, meme echelle, meme filet que l'accueil. Ce qui
   change : pas de clip en tete, et le texte est long, donc il lui
   faut des reperes de lecture, pas des cadres.
   ============================================================ */

/* ---------- tete de page ----------
   Une photo, un titre, une phrase. Elle ne prend pas tout l'ecran :
   la page est faite pour etre lue, le lecteur doit voir qu'il y a du
   texte dessous sans avoir a defiler pour s'en douter. */
.phero{position:relative;min-height:56vh;display:flex;align-items:flex-end;
  padding:140px 0 64px;overflow:hidden}
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.phero-bg:after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,7,10,.72) 0%,rgba(6,7,10,.44) 40%,rgba(6,7,10,.10) 78%),
             linear-gradient(180deg,rgba(6,7,10,.30),rgba(6,7,10,.55))}
.phero .inner{position:relative;z-index:1;width:100%}
.phero h1{color:#f6f4f0;text-shadow:0 2px 40px rgba(6,7,10,.8);max-width:18ch}
.phero .lead{color:#dcdfe3;margin-top:24px;max-width:52ch;
  text-shadow:0 1px 18px rgba(6,7,10,.9)}
.phero .eyebrow{color:#e6d6b0}

/* ---------- chapitre ----------
   La lettre est un repere de navigation dans un texte long, pas une
   decoration : elle reste discrete, a cote du titre, jamais dessus. */
.chap{padding:96px 0 0}
.chap:first-of-type{padding-top:120px}
.chap-h{display:flex;align-items:baseline;gap:18px}
.chap-h .l{font-family:var(--serif);font-size:15px;color:var(--gold);
  letter-spacing:.1em;flex:none;padding-top:6px}
.chap h2{max-width:22ch}
.chap .lead{margin-top:24px}
.prose{margin-top:24px;display:flex;flex-direction:column;gap:18px;color:var(--muted)}
.prose b,.prose strong{color:var(--ink);font-weight:400}

/* trois colonnes quand les entrees sont courtes, deux quand elles portent
   un paragraphe : au-dela, la ligne devient trop etroite pour se lire. */
.why.c3{grid-template-columns:repeat(3,1fr)}

/* ---------- encadre d'appui ----------
   Un seul par page, pour la phrase qui porte l'argument. Pas d'ombre,
   pas de fond colore : un filet a gauche et de l'air. */
.claim{margin-top:56px;padding:32px 0 32px 32px;border-left:2px solid var(--gold)}
.claim h3{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.2}
.claim p{color:var(--muted);margin-top:14px;max-width:60ch}

/* ---------- galerie horizontale (pages produit) ----------
   17 sept 2026 : on est revenus sur l'auto-defilement (piste doublee pour
   boucler, duree recalculee sur scrollWidth, ResizeObserver...). Il
   generait trop de bugs sur mobile reel -- rangee invisible, piste trop
   large pour le compositeur de certains iPhone -- pour ce qu'il apportait.
   Ici, plus rien a mesurer : le navigateur gere lui-meme le defilement
   tactile et son inertie sur un simple conteneur qui deborde. Chaque photo
   source n'existe qu'une fois dans le DOM (pas de clone). */
.gal{grid-column:1 / -1;margin-top:48px;display:flex;gap:var(--gut);
  overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  padding-bottom:14px;scrollbar-width:thin}
.gal + .gal{margin-top:32px}
.gal figure{flex:0 0 clamp(260px,38vw,440px);scroll-snap-align:start;margin:0;
  border:1px solid var(--line);background:var(--panel);overflow:hidden;
  cursor:zoom-in}
/* `contain`, pas `cover` : les chantiers reels incluent des prises
   verticales (escalier, balcon) qu'un cadrage 4/3 en `cover` rognerait en
   simple bande. Le fond (`background` sur `.gal figure` ci-dessus, deja
   tres proche de `--bg`) comble les bandes vides sans attirer l'oeil. */
.gal img{width:100%;height:100%;aspect-ratio:4/3;object-fit:contain;display:block}
.gal figcaption{padding:14px 18px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
@media (max-width:768px){
  .gal figure{flex-basis:clamp(260px,80vw,380px);border-width:2px}
}

/* ---------- loupe (clic sur une vignette du carrousel) ----------
   Un seul calque par page, reutilise pour chaque clic. Fond dense pour que
   la photo porte, pas de flou ni de degrade decoratif dessus. */
.lightbox{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;padding:56px;background:var(--ink);opacity:0;
  pointer-events:none;transition:opacity .25s}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border:1px solid rgba(242,239,233,.16)}
.lightbox figcaption{position:absolute;left:0;right:0;bottom:28px;
  text-align:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(242,239,233,.7)}
.lb-close{position:absolute;top:24px;right:24px;width:44px;height:44px;padding:0;
  background:none;border:1px solid rgba(242,239,233,.28);border-radius:50%;
  cursor:pointer;transition:border-color .25s}
.lb-close span{position:absolute;top:50%;left:50%;width:18px;height:2px;
  border-radius:1px;background:rgba(242,239,233,.85);transition:background-color .25s}
.lb-close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.lb-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
.lb-close:hover{border-color:var(--gold)}
.lb-close:hover span{background:var(--gold)}

/* Suivant / precedent : meme cercle que la croix, un chevron trace par deux
   cotes d'un carre pivote plutot qu'une icone -- coherent avec le trait fin
   des lignes du burger et de la croix. */
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  padding:0;background:none;border:1px solid rgba(242,239,233,.28);border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .25s}
.lb-nav:hover{border-color:var(--gold)}
.lb-prev{left:24px}
.lb-next{right:24px}
.lb-nav .chev{width:10px;height:10px;border-top:2px solid rgba(242,239,233,.85);
  border-right:2px solid rgba(242,239,233,.85);transition:border-color .25s}
.lb-prev .chev{transform:rotate(-135deg);margin-left:4px}
.lb-next .chev{transform:rotate(45deg);margin-right:4px}
.lb-nav:hover .chev{border-color:var(--gold)}
@media (max-width:620px){
  .lightbox{padding:24px}
  .lightbox figcaption{bottom:16px}
  .lb-nav{width:40px;height:40px}
  .lb-prev{left:8px}
  .lb-next{right:8px}
}

/* ---------- bas de page produit ---------- */
.pend{grid-column:1 / -1;margin-top:96px;padding-top:56px;border-top:1px solid var(--line)}
.pend h2{max-width:20ch}
.pend p{color:var(--muted);margin-top:20px;max-width:58ch}
.pend .row{margin-top:36px;margin-left:var(--cta-pull);
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px}
.pend .price{font-family:var(--serif);font-size:22px;color:var(--gold)}

@media (max-width:900px){
  .phero{min-height:44vh;padding:112px 0 48px}
  .phero h1{max-width:none}
  .chap{padding-top:72px}
  .chap:first-of-type{padding-top:88px}
  .why.c3{grid-template-columns:1fr}
  .claim{margin-top:40px;padding:24px 0 24px 20px}
  .claim h3{font-size:24px}
  .pend{margin-top:72px;padding-top:40px}
}

/* ---------- coordonnees, en regard du formulaire ---------- */
.coord h3{font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);font-weight:400}
.coord dl{margin-top:22px}
.coord dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin-top:22px}
.coord dt:first-child{margin-top:0}
.coord dd{margin-top:6px;font-size:15px;line-height:1.6}
.coord a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  transition:border-color .3s,color .3s}
.coord a:hover{color:var(--gold);border-color:var(--gold)}
.field .hint{font-size:12px;color:var(--muted);margin-top:8px;max-width:none}
.field input[type=file]{font-family:var(--sans);font-size:14px;color:var(--muted);
  padding:12px 0;border:0;border-bottom:1px solid var(--line);width:100%}
.field input[type=file]::file-selector-button{font-family:var(--sans);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;margin-right:16px;
  cursor:pointer;transition:border-color .3s,color .3s}
.field input[type=file]::file-selector-button:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- texte legal ----------
   Une seule colonne etroite : ce sont des articles a lire, pas une page
   a parcourir. Les titres restent en sans, le serif est reserve aux
   accroches commerciales. */
.legal{grid-column:1 / span 8}
.legal h2{font-family:var(--sans);font-weight:300;font-size:22px;margin-top:56px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--muted);font-size:15px;margin-top:14px;max-width:70ch}
.legal ul{margin-top:14px;padding-left:20px}
.legal li{margin-top:8px}
.legal a{color:var(--ink)}
.legal .maj{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

@media (max-width:900px){
  .coord{margin-top:56px}
  .legal{grid-column:1 / -1}
}

/* ---------- carte des zones ----------
   Sur telephone la carte passe au-dessus du texte, comme demande : c'est
   l'element qui repond a la question, le texte ne fait que la detailler. */
.zones{align-items:start}
.mapwrap{grid-column:1 / span 5;position:sticky;top:110px;
  --map-far:#ddd8cd; --map-mid:#cbb894; --map-near:#8a6f3f; --map-line:#14171c}
.zonetext{grid-column:7 / span 6}
.fr-map{width:100%;height:auto;display:block;overflow:visible}
.fr-lab{font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;fill:#f6f4f0;paint-order:stroke;
  stroke:rgba(20,23,28,.55);stroke-width:3px;stroke-linejoin:round}
.fr-lab-lux,.fr-lab-city{fill:var(--ink);stroke:rgba(242,239,233,.9)}
.maplegend{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:12px;
  font-size:13px;color:var(--muted)}
.maplegend li{display:flex;align-items:center;gap:12px}
.maplegend i{width:16px;height:16px;flex:none;border:1px solid var(--line)}
.maplegend .k1{background:var(--map-near)}
.maplegend .k2{background:var(--map-mid)}
.maplegend .k3{background:var(--map-far)}

@media (max-width:900px){
  .mapwrap{grid-column:1 / -1;position:static;order:-1}
  .zonetext{grid-column:1 / -1;margin-top:48px}
  /* les noms et la legende doivent rester lisibles a la main */
  .fr-lab{font-size:16px}
  .maplegend{font-size:14px;gap:14px}
}

/* ---------- grille des realisations ----------
   Toutes les vignettes au meme format 4:3 et au meme traitement, comme
   l'exige DESIGN.md : c'est la seule facon de faire lire une serie de
   photos de chantier prises dans des conditions differentes. */
.works{grid-column:1 / -1;display:grid;gap:var(--gut);
  grid-template-columns:repeat(3,1fr)}
.work{margin:0;border:1px solid var(--line);background:var(--panel);overflow:hidden}
.work img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.work:hover img{transform:scale(1.04)}
.work figcaption{padding:14px 18px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.works{grid-template-columns:repeat(2,1fr)}}
/* Le devis quitte l'en-tete quand la ligne ne tient plus. Le seuil n'est pas
   520 px mais 620 : mesure de l'en-tete avec le devis, marque + bouton + devis
   + langues, en marge restante --
     521 px : -23    530 : -13    545 : +1    560 : +16    620 : +76
   A 520 la regle etait bien ecrite mais commencait trop bas : entre 521 et
   545 la ligne passait en negatif et le navigateur rattrapait en rognant les
   espaces. Rien ne se voyait, mais il n'y avait plus de marge du tout.
   Le devis descend donc dans le panneau sous 620 px ; la barre de contact en
   bas le porte de toute facon sur chaque page.

   A ecrire APRES `.cta{display:inline-flex}` : meme specificite, c'est la
   derniere regle du fichier qui gagne. Placee plus haut, elle ne faisait rien. */
@media (max-width:620px){.nav-work{display:none}}
@media (max-width:520px){.works{grid-template-columns:1fr}}
/* Sous 340 px, « WhatsApp » et son icone ne tiennent plus ensemble dans le
   tiers de rangee : le mot est plus clair que le pictogramme, on garde le mot. */
@media (max-width:340px){.bar .cta svg{display:none}.bar .cta{padding:0 6px}}

/* ============================================================
   BLOG « Conseils & guides » (/blog/, publie par n8n)
   Une colonne de lecture d'environ 68 caracteres, les titres en serif du
   site, les liens soulignes d'or. Pas de cartes a ombre : un filet et de
   l'air, comme la grille des realisations.
   ============================================================ */
.bhead{padding:168px 0 0}
.bh{grid-column:1 / span 9}
.bh h1{font-size:62px;line-height:1.06;max-width:20ch}
.bh .lead{margin-top:24px;max-width:58ch}
.bback{display:inline-flex;gap:10px;align-items:center;margin-bottom:28px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--muted);
  transition:color .3s}
.bback:hover{color:var(--gold)}
.bback i{font-style:normal}

.bfig{max-width:var(--maxw);margin:64px auto 0;padding:0 var(--pad)}
.bfig img{width:100%;height:auto;aspect-ratio:16/9;max-height:78vh;object-fit:cover;display:block;background:var(--panel)}
.bfig figcaption{margin-top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bfig figcaption a{text-decoration:none;border-bottom:1px solid var(--line)}

.post{grid-column:3 / span 8;padding-top:72px;color:var(--muted);font-size:18px;line-height:1.78}
.post > * + *{margin-top:20px}
.post p{max-width:68ch}
.post h2{color:var(--ink);font-size:40px;margin-top:72px;max-width:24ch}
.post h3{color:var(--ink);margin-top:40px}
.post h2 + *, .post h3 + *{margin-top:16px}
.post strong{color:var(--ink);font-weight:400}
.post a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);transition:color .3s}
.post a:hover{color:var(--gold)}
.post ul,.post ol{padding-left:1.3em;max-width:66ch;display:flex;flex-direction:column;gap:10px}
.post li::marker{color:var(--gold)}
.post > :first-child{margin-top:0}

.blist{padding:96px 0 0}
.bcards{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:64px var(--gut)}
.bcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.bcard-img{display:block;overflow:hidden;background:var(--panel);margin-bottom:22px}
.bcard-img img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.bcard:hover .bcard-img img{transform:scale(1.04)}
.bcard .eyebrow{margin-bottom:12px}
.bcard h2{font-size:28px;line-height:1.18}
.bcard p{color:var(--muted);font-size:15px;margin-top:12px}
.bmore{margin-top:18px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.bmore i{font-style:normal;display:inline-block;transition:transform .4s}
.bcard:hover .bmore i{transform:translateX(5px)}
.bvide{grid-column:1 / -1}
.bcta .pend{margin-top:120px}

@media (max-width:1100px){.bcards{grid-template-columns:repeat(2,1fr)}.post{grid-column:2 / span 10}}
@media (max-width:900px){
  .bhead{padding-top:120px}
  .bh h1{font-size:38px}
  .bfig{margin-top:40px}
  .post{padding-top:48px;font-size:17px}
  .post h2{font-size:30px;margin-top:56px}
  .post h3{font-size:22px}
  .blist{padding-top:64px}
  .bcards{gap:48px var(--gut)}
  .bcta .pend{margin-top:80px}
}
@media (max-width:600px){.bcards{grid-template-columns:1fr}.bfig{padding:0}.bfig figcaption{padding:0 var(--pad)}}