/* ============================================================
   TEMPLATE CONSTRUCTION — one-pager premium (générique, sans marque)
   Palette : NOIR & BLANC STRICT — aucune couleur d'interface saturée
   Typo    : Anton (display) + Archivo (texte)
   ============================================================ */
:root{
  --terre:#0A0A0A;        /* noir profond — fonds sombres */
  --terre-2:#151515;      /* variante panneau */
  --terre-3:#1E1E1E;      /* panneau survolé / carte sombre */
  --pierre:#F6F5F3;       /* blanc cassé, sections claires */
  --pierre-2:#EBEAE7;     /* variante clair */
  --blanc:#FFFFFF;        /* blanc pur — accents, boutons, ligne de niveau, focus */
  --encre:#111111;        /* texte / accent sur fond clair */
  --brume:#9B9B9B;        /* texte secondaire sur sombre (gris neutre) */
  --gris:#5C5C5C;         /* texte secondaire sur clair (gris neutre) */
  --os:#F3F3F3;           /* texte sur sombre */
  --ligne-s:rgba(255,255,255,.14);
  --ligne-c:rgba(17,17,17,.14);
  --glow:rgba(255,255,255,.20);
  /* accents DORÉS ponctuels — or luxe DÉSATURÉ (jamais jaune criard). Le N&B reste la base. */
  --or:#C6A867;            /* or mat, accent ponctuel */
  --or-clair:#E7D3A1;      /* reflet clair — haut du dégradé */
  --or-fonce:#93743A;      /* or profond — bas du dégradé / sur fond clair */
  --or-grad:linear-gradient(168deg,var(--or-clair) 0%,var(--or) 46%,var(--or-fonce) 100%);
  --or-glow:rgba(198,168,103,.34);
  --ligne-or:rgba(198,168,103,.30);
  --ease:cubic-bezier(.76,0,.24,1);
  /* rayon commun à TOUS les boutons du site (nav, hero, formulaire, plan) — cohérence */
  --r-btn:10px;
  /* profondeur — ombres douces multi-couches (sur clair / sur sombre + hairline inset) */
  --sh-clair-1:0 1px 1px rgba(17,17,17,.04),0 4px 10px -4px rgba(17,17,17,.10),0 14px 34px -14px rgba(17,17,17,.14);
  --sh-clair-2:0 1px 2px rgba(17,17,17,.05),0 8px 18px -8px rgba(17,17,17,.16),0 26px 60px -22px rgba(17,17,17,.22);
  --sh-sombre-1:0 1px 1px rgba(0,0,0,.5),0 10px 26px -12px rgba(0,0,0,.7),0 1px 0 0 var(--ligne-s) inset;
  --sh-sombre-2:0 2px 3px rgba(0,0,0,.55),0 18px 44px -18px rgba(0,0,0,.78),0 1px 0 0 var(--ligne-s) inset;
  --sh-glow:0 0 0 1px var(--glow),0 6px 26px -6px var(--glow);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--brume) var(--terre);scrollbar-width:thin;overflow-x:clip}
/* scrollbar custom, discrète — noir / blanc */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--terre)}
::-webkit-scrollbar-thumb{background:var(--brume);border:3px solid var(--terre)}
::-webkit-scrollbar-thumb:hover{background:var(--blanc)}
body{
  font-family:'Archivo',system-ui,sans-serif;
  background:var(--terre);
  color:var(--os);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
::selection{background:var(--blanc);color:var(--terre)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
/* texte réservé aux lecteurs d'écran (ex. mot « brut » réel, le bloc visuel étant aria-hidden) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:min(1200px,92vw);margin:0 auto}
.display{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
.eyebrow{
  font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;color:var(--os);position:relative;
  display:flex;align-items:center;gap:.75rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--os)}
.clair .eyebrow{color:var(--encre)}
.clair .eyebrow::before{background:var(--encre)}
/* .accent : mot d'accent SOBRE des titres — N&B strict. Blanc sur fond sombre, noir sur clair.
   (Nom neutre : l'interface n'emploie aucune couleur saturée ; cf. .or pour l'accent doré.) */
.accent{color:var(--blanc)}
.clair .accent{color:#000}
/* .or : accent DORÉ ponctuel — dégradé clippé dans le texte. Repli : or plein si pas de background-clip. */
.or{color:var(--or)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .or{background:var(--or-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
/* OR SUR FOND CLAIR (2026-07-26) : l'or luxe (#C6A867) est un mi-ton → contraste trop faible sur un fond
   clair (échoue AA même en gros). Sur une section .clair, on bascule sur un OR PROFOND (antique) qui passe
   AA-large sur le clair tout en restant « or ». (Sur fond sombre, l'or clair d'origine est conservé.) */
/* OR LUMINEUX sur fond clair (2026-07-27) — l'ancien or profond rendait brun-bronze terne. On l'éclaircit
   nettement vers un or LUMINEUX (même vibe que « RÊVE »). Sur clair, le glow doré n'aide pas le contraste :
   la lisibilité vient de la TAILLE + police chunky + une ombre de définition (voir #entreprise .sec-title .or). */
.clair .or{color:#B8892E}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* background-IMAGE (pas le raccourci `background`, qui remettrait background-clip à border-box → rectangle plein) */
  .clair .or{background-image:linear-gradient(168deg,#F4DE8E 0%,#DBAF52 44%,#B2872F 100%)}
}
/* « SOLIDE » (entreprise) = highlight VEDETTE : police chunky (Archivo Black) distincte de l'Anton du titre,
   plus GROS que la ligne, or lumineux + ombre de définition (crispe sur clair) + léger glow doré (vibe RÊVE).
   font-size en em → grossit le mot sans toucher les autres ; interligne/eyebrow revérifiés au rendu. */
#entreprise .sec-title .or{
  font-family:'Archivo Black',Impact,sans-serif;
  font-size:1.16em;letter-spacing:-.008em;
}
/* OMBRE « SOLIDE » — portée par le WRAPPER, PAS le glyphe (fix rendu 2026-07-28).
   Le mot est enveloppé par .w{overflow:hidden} (mécanique de reveal). Une ombre (filter OU text-shadow)
   posée sur le <i> intérieur était ROGNÉE par ce overflow → ombre RECTANGULAIRE à coins visibles.
   Le filtre d'un élément échappe à SON PROPRE overflow → posé sur .w--or (le wrapper, marqué par
   decouperTitre), le drop-shadow épouse EXACTEMENT les lettres, sans coin, sans clipping par le parent.
   ⚠️ NE JAMAIS remettre le filter/text-shadow sur `.or` (le <i>) : il revient rogné. Valeurs inchangées
   (ombre noire de définition + léger glow doré). */
#entreprise .sec-title .w--or{
  filter:drop-shadow(0 1px 1px rgba(10,7,2,.72)) drop-shadow(0 3px 7px rgba(10,7,2,.5)) drop-shadow(0 2px 12px rgba(219,175,82,.38));
}
/* CORRECTIF ACCENTS (vérifié navigateur) — background-clip:text ne peint le dégradé QUE
   dans la boîte de fond de l'élément ; avec la line-height display serrée (.95) cette boîte
   est plus courte que le glyphe → les diacritiques MAJUSCULES (É Ê È À Ô) qui dépassent la
   hauteur de capitale se retrouvent SANS fond → transparents (« RÊVE » perdait son Ê,
   « RÉALISATIONS » son É). On rehausse la boîte de fond via padding-top, sans déplacer le
   texte (margin-top négatif compensatoire). S'applique à tout mot display clippé. */
.reve,.or{padding-top:.2em;margin-top:-.2em}
/* ancres du one-pager : compenser la nav fixe */
#services,#realisations,#entreprise{scroll-margin-top:84px}
/* grain sur fonds sombres — un peu plus présent, toujours sous le seuil « décor » */
.grain{position:relative}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.58;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .065 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* grille « papier de plan » — utilitaire réutilisable (texture de fond, ~1px, quasi invisible) */
.blueprint{position:relative;isolation:isolate}
.blueprint>.wrap{position:relative;z-index:1}
.blueprint::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-position:center;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 42%,#000 46%,transparent 88%);
          mask-image:radial-gradient(120% 120% at 50% 42%,#000 46%,transparent 88%);
}
/* variante claire — lignes noires quasi imperceptibles */
.clair.blueprint::before{
  background-image:
    linear-gradient(rgba(17,17,17,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,17,17,.03) 1px,transparent 1px),
    linear-gradient(rgba(17,17,17,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,17,17,.045) 1px,transparent 1px);
}

/* ============================================================
   INTRO — signature « plan de construction » (joue au chargement)
   Grille blueprint → lettres du logo tracées au trait (stagger)
   → remplissage blanc → ligne de niveau BLANCHE + CONSTRUCTION
   → ÉTINCELLE (glint blanc-doré clippée aux lettres) → FONDU RADIAL de sortie (le fond sombre
   .intro-backdrop se dissout des bords vers le centre via mask radial ; logo + ligne fadent en dernier ;
   le hero apparaît en dessous en continu). NE PAS CASSER : c'est LA signature officielle du site.
   Couches (z-index) : backdrop (0) sous la grille (2) sous le bloc logo (3).
   (Le rideau 3 lames a été remplacé par le fondu radial le 2026-07-26.)
   ============================================================ */
#intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;pointer-events:none;overflow:hidden}
/* fond sombre plein écran (assuré autrefois par les lames) — maskable pour le fondu radial de sortie */
#intro .intro-backdrop{
  position:absolute;inset:0;z-index:0;background:var(--terre);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 38%,transparent 72%);
          mask-image:radial-gradient(circle at 50% 50%,#000 38%,transparent 72%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:320% 320%;mask-size:320% 320%;
  transition:-webkit-mask-size .6s var(--ease),mask-size .6s var(--ease),opacity .28s ease;
}
#intro .intro-backdrop::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");}
/* (a) grille technique de plan — lignes blanches pures (plan strictement N&B) */
#intro .intro-grid{
  position:absolute;inset:-2px;z-index:2;opacity:0;transition:opacity .4s ease;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:26px 26px,26px 26px,130px 130px,130px 130px;
  background-position:center;
  -webkit-mask-image:radial-gradient(125% 125% at 50% 50%,#000 40%,transparent 84%);
          mask-image:radial-gradient(125% 125% at 50% 50%,#000 40%,transparent 84%);
}
#intro.step-grid .intro-grid{opacity:1}
#intro.step-fill .intro-grid{opacity:0;transition:opacity .3s ease}
/* bloc central */
#intro .intro-stage{position:relative;z-index:3;text-align:center;transition:opacity .34s ease}
/* logo + ligne de niveau + CONSTRUCTION fadent EN DERNIER (léger retard sur le fondu des bords) */
#intro.step-exit .intro-stage{opacity:0;transition:opacity .34s ease .18s}
/* (b/c) logo tracé au trait puis rempli */
#intro .intro-logo-wrap{position:relative;width:min(74vw,600px);margin:0 auto}
#intro .intro-logo{display:block;width:100%;height:auto;overflow:visible}
/* ÉCLOSION DE LUMIÈRE — 3 couches DERRIÈRE le wordmark (z-index:-1), centrées sur le logo, allumées à
   .step-glint (sync avec le glint = un seul « power-up »). Jamais plein écran : les dégradés s'éteignent
   bien avant les bords. opacity/transform seulement → 60fps. Fond avec le .intro-stage à la sortie. */
#intro .intro-bloom{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;z-index:-1;pointer-events:none}
#intro .intro-bloom>span{position:absolute;left:50%;top:50%;pointer-events:none;opacity:0;will-change:transform,opacity}
/* (1) BLOOM CORE — lueur blanc-doré qui ÉCLOT : allumage rapide puis expansion + fondu vers l'extérieur */
#intro .bloom-core{
  width:162%;height:270%;
  transform:translate(-50%,-50%) scale(.6);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(255,247,227,.82) 0%,rgba(255,238,201,.40) 27%,rgba(228,208,158,.15) 47%,transparent 68%);
}
#intro.step-glint .bloom-core{animation:bloom-core .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes bloom-core{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  20%{opacity:.9}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.34)}
}
/* (2) HALO résiduel — reste allumé autour des lettres jusqu'à la sortie (le logo « semble allumé ») ;
   fond ensuite avec le .intro-stage (opacity → 0 à .step-exit). */
#intro .bloom-halo{
  width:140%;height:245%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(255,245,219,.48) 0%,rgba(238,218,173,.19) 34%,transparent 66%);
  transition:opacity .5s ease;
}
#intro.step-glint .bloom-halo{opacity:.6;transition:opacity .5s ease .06s}
/* (b/c) WORDMARK PLACEHOLDER « LOGO » — police display CARRÉE (Archivo Black, déjà chargée). Le contour se
   DESSINE au trait (révélé de gauche à droite) puis le mot s'ALLUME en blanc plein. Signature conservée.
   SWAP LOGO : changer le texte des <text class="il-word"> (#intro, index.html) et/ou la police ci-dessous,
   ou passer à des <path> — voir PERSONNALISATION.md § 3c. */
#intro .il-word{
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;
  font-size:150px;letter-spacing:.04em;font-weight:400;
}
#intro .il-stroke{fill:none;stroke:var(--os);stroke-width:1.6;vector-effect:non-scaling-stroke}
#intro .il-fill{fill:var(--os);opacity:0;transition:opacity .34s ease,fill .34s ease}
/* (b) tracé : le contour est révélé de gauche à droite (masque qui s'ouvre) */
#intro .il-wipe-rect{transform:scaleX(0);transform-origin:left center;transform-box:fill-box;transition:transform .9s var(--ease)}
#intro.step-draw .il-wipe-rect{transform:scaleX(1)}
/* (c) « LOCK-IN » : le mot s'allume en blanc plein, le contour s'efface */
#intro.step-fill .il-fill{opacity:1;fill:var(--blanc)}
#intro.step-fill .il-stroke{opacity:0;transition:opacity .3s ease}
/* ÉTINCELLE — bande de lumière blanc-doré CLIPPÉE aux lettres (clipPath il-clip = le mot).
   .step-glint : balaie vers la droite en ~.4s (reflet métal). */
#intro .intro-glint{transform:translateX(-180px) skewX(-14deg)}
#intro.step-glint .intro-glint{
  transform:translateX(760px) skewX(-14deg);
  transition:transform .4s cubic-bezier(.35,0,.22,1);
}
/* (b) marques techniques : croix de repère + cote, discrètes */
#intro .intro-marks{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}
#intro .intro-marks .mk{position:absolute;opacity:0;stroke:rgba(244,244,242,.45);stroke-width:1;fill:none;transition:opacity .35s ease}
#intro.step-draw .intro-marks .mk{opacity:1}
#intro.step-draw .intro-marks .mk.m2{transition-delay:.16s}
#intro.step-draw .intro-marks .mk.m3{transition-delay:.28s}
#intro.step-fill .intro-marks .mk{opacity:0;transition:opacity .3s ease}
#intro .mk-cross{width:22px;height:22px}
#intro .mk-tick{width:70px;height:12px}
#intro .mk.tl{top:-11%;left:-6%}
#intro .mk.tr{top:-6%;right:-7%}
#intro .mk.bl{bottom:22%;left:-9%}
/* (d) ligne de niveau BLANCHE + noeud de cote */
#intro .niveau-wrap{position:relative;display:block;width:min(56vw,420px);margin:1.7rem auto 1.05rem}
#intro .intro-niveau{display:block;height:3px;background:var(--blanc);width:100%;transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease)}
#intro.step-line .intro-niveau{transform:scaleX(1)}
#intro .niveau-wrap .cursor{position:absolute;top:50%;left:0;width:9px;height:9px;border:2px solid var(--blanc);border-radius:50%;background:var(--terre);transform:translate(-50%,-50%) scale(0);transition:transform .3s var(--ease) .26s,left .42s var(--ease)}
#intro.step-line .niveau-wrap .cursor{transform:translate(-50%,-50%) scale(1);left:100%}
/* (d) mot CONSTRUCTION */
#intro .intro-tag{font-size:clamp(.66rem,1.7vw,.82rem);font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:var(--brume);padding-left:.5em;opacity:0;transform:translateY(8px);transition:opacity .32s ease,transform .32s var(--ease)}
#intro.step-tag .intro-tag{opacity:1;transform:translateY(0)}
/* (e) SORTIE — FONDU RADIAL : le fond sombre se dissout des bords vers le centre (mask radial qui se
   referme), révélant le hero en dessous en continu. Le mask-size passe de 320% (plein) à 0 (fermé au
   centre) ; une brève chute d'opacité en fin garantit qu'aucun disque résiduel ne subsiste. */
#intro.step-exit .intro-backdrop{-webkit-mask-size:0% 0%;mask-size:0% 0%;opacity:0;
  transition:-webkit-mask-size .6s var(--ease),mask-size .6s var(--ease),opacity .22s ease .42s}
#intro.done{display:none}
/* ---------- INTRO CONDENSÉE (~1s) — retour du tunnel soumission (?from=funnel) ----------
   SCOPE STRICT : ces règles ne s'appliquent QUE sous #intro.condensed. On GARDE la signature
   (glint + ÉCLOSION DE LUMIÈRE .bloom-* + FONDU RADIAL de sortie) et on SAUTE le tracé lent des lettres :
   elles sont présentées quasi instantanément, remplies, puis la séquence glint/bloom/fondu se joue vite.
   Aucune règle de base n'est modifiée. */
/* wordmark : plus de tracé lent — rempli d'emblée (le lock-in blanc se joue vite ensuite) */
#intro.condensed .il-wipe-rect{transform:scaleX(1);transition:none}
#intro.condensed .il-stroke{opacity:0}
#intro.condensed .il-fill{opacity:1;transition:opacity .18s ease,fill .18s ease}
/* marques techniques : pas de tracé au trait, apparition brève accélérée */
#intro.condensed.step-draw .intro-marks .mk.m2,
#intro.condensed.step-draw .intro-marks .mk.m3{transition-delay:0s}
/* grille : montée/descente resserrée */
#intro.condensed .intro-grid{transition:opacity .18s ease}
#intro.condensed.step-fill .intro-grid{transition:opacity .18s ease}
/* ligne de niveau + curseur : balayage plus rapide */
#intro.condensed .intro-niveau{transition:transform .26s var(--ease)}
#intro.condensed .niveau-wrap .cursor{transition:transform .2s var(--ease) .12s,left .26s var(--ease)}
/* CONSTRUCTION : apparition rapide */
#intro.condensed .intro-tag{transition:opacity .2s ease,transform .2s var(--ease)}
/* SORTIE — fondu radial CONSERVÉ (la signature) mais resserré pour tenir dans ~1s */
#intro.condensed.step-exit .intro-backdrop{
  transition:-webkit-mask-size .38s var(--ease),mask-size .38s var(--ease),opacity .16s ease .26s}
#intro.condensed.step-exit .intro-stage{transition:opacity .26s ease .1s}
/* bloom (.bloom-core/.bloom-halo) et glint : INCHANGÉS — c'est l'ÉCLOSION DE LUMIÈRE signature. */


/* ============================================================
   NAV
   ============================================================ */
header{position:fixed;top:0;left:0;right:0;z-index:900;transition:transform .4s var(--ease),background .35s ease,border-color .35s ease,box-shadow .35s ease;border-bottom:1px solid transparent}
header.scrolled{background:rgba(10,10,10,.92);backdrop-filter:blur(10px);border-color:var(--ligne-s);box-shadow:0 1px 0 0 rgba(0,0,0,.35),0 10px 24px -18px rgba(0,0,0,.6)}
/* smart-hide : se cache en défilant vers le bas, revient vers le haut (JS pose/enlève .hidden) ; toujours visible en haut de page */
header.hidden{transform:translateY(-100%)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 0}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-logo{height:30px;width:auto;display:block}
.foot-compact .brand-logo{height:26px}
.nav-links{display:flex;align-items:center;gap:2.7rem;font-size:.95rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nav-links a{position:relative;padding:.3rem 0;color:var(--os)}
/* le CTA « Soumission » respire : un cran de plus que l'espacement des liens texte */
.nav-links .btn-plan{margin-left:.6rem}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--blanc);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a.actif::after{transform:scaleX(1)}
.nav-links a.btn::after{content:none}
/* BUG N&B corrigé : « .nav-links a » (couleur ~blanche) l'emportait sur « .btn » → texte blanc sur bouton blanc.
   On force le texte foncé au repos, blanc au survol (slide sombre), avec une spécificité supérieure. */
/* padding généreux : « .nav-links a » (padding:.3rem 0) l'emportait sur .btn et écrasait le bouton.
   Spécificité 0,2,1 > 0,1,1 → le CTA respire enfin (rectangle ample, coins arrondis hérités de .btn). */
.nav-links a.btn{color:var(--terre);padding:.85rem 1.6rem}
.nav-links a.btn:hover,.nav-links a.btn:focus-visible{color:var(--blanc)}
/* BOUTONS — plein INVERSÉ : fond blanc, texte noir ; hover = remplissage sombre glissé + lueur blanche discrète */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:.6rem;background:var(--blanc);color:var(--terre);font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;padding:1.05rem 2rem;border:none;border-radius:var(--r-btn);cursor:pointer;transition:color .3s ease,box-shadow .35s var(--ease),transform .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--terre-3);transform:translateX(-101%);transition:transform .45s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0)}
.btn:hover,.btn:focus-visible{color:var(--blanc);box-shadow:var(--sh-glow);transform:translateY(-2px)}
.clair .btn:hover,.clair .btn:focus-visible{box-shadow:none}
/* ghost : contour fin, se remplit au hover (blanc sur sombre / encre sur clair) */
.btn.ghost{background:transparent;color:var(--os);outline:1px solid var(--ligne-s)}
.btn.ghost::before{background:var(--blanc)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--terre);outline-color:var(--blanc)}
.clair .btn.ghost{color:var(--encre);outline-color:var(--ligne-c)}
.clair .btn.ghost::before{background:var(--encre)}
.clair .btn.ghost:hover,.clair .btn.ghost:focus-visible{color:var(--blanc);outline-color:var(--encre)}
/* Menu burger + overlay #menu retirés le 2026-07-29 : one-pager → navigation inutile.
   Header mobile = logo seul, centré (voir .nav{justify-content:center} dans le bloc @900). */

/* ============================================================
   HERO — triptyque de COLONNES d'images défilantes en boucle (seamless), dégradé assombri (lisibilité), grain
   ============================================================ */
#hero{min-height:100svh;display:flex;flex-direction:column;padding-top:7.5rem;position:relative;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--terre)}
/* FOND VIDÉO (mobile only) — masqué par défaut, activé < 900px (voir @media). object-fit:cover plein cadre.
   z-index 1 = AU-DESSUS des colonnes (0), SOUS l'overlay dégradé+grain (2/3) → l'overlay assombrit la vidéo.
   fond --terre derrière la vidéo = aucun flash blanc avant le poster/1re frame. */
/* Variables de l'OVERLAY VIDÉO (mobile) — FACILES À AJUSTER : monter la valeur = plus sombre.
   L'overlay du hero (#hero .hero-bg::before) empile, sur la vidéo floue : 1) un VOILE NOIR plat,
   2) un DÉGRADÉ vertical (haut/milieu/bas), 3) un HALO radial sombre derrière le titre.
   Toutes = alpha 0→1 sur du #0A0A0A (--terre). Cible : titre/CTA/badges lisibles sans effort. */
:root{
  --hv-veil:.46;    /* voile noir PLAT sur toute la vidéo */
  --hv-top:.86;     /* dégradé — HAUT (derrière eyebrow + titre) */
  --hv-mid:.58;     /* dégradé — MILIEU (description en gris) — relevé .5→.58 le 2026-07-31 : le flou
                       réduit (sigma16→8) laisse voir plus de texture derrière le texte gris ; +.08 le
                       garde lisible sans effort sans re-cacher l'action ailleurs (haut/bas inchangés). */
  --hv-bottom:.9;   /* dégradé — BAS (badges) */
  --hv-halo:.5;     /* HALO radial sombre, top-gauche (renforce le titre) */
}
.hero-video{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:var(--terre)}
/* Carte placeholder VIDÉO (mobile) — même affichage que .hero-video (desktop:none, mobile:flex via @media). */
.ph.ph-video{display:none;position:absolute;inset:0;z-index:3;--ph-bg:#0D0D0F;--ph-frame:rgba(255,255,255,.15);--ph-mark:rgba(255,255,255,.34);--ph-ink:rgba(255,255,255,.55)}
/* TRIPTYQUE ANIMÉ : 3 panneaux diagonaux (clip-path), chacun une COLONNE d'images qui défile en boucle.
   Chaque colonne = pile de 4 images DUPLIQUÉE (8 au total) animée en translateY 0↔-50% → boucle seamless
   (même principe de piste doublée + translation). Directions alternées (c1 bas, c2 haut, c3 bas), très lent, ambiant.
   De fines lignes blanches (.hero-seam) marquent les coupes ; overlay dégradé + grain restent AU-DESSUS. */
.hero-tri{position:absolute;inset:0;z-index:0}
.hero-panel{position:absolute;inset:0;overflow:hidden}
.hero-panel.p1{clip-path:polygon(0 0, calc(38% - 2px) 0, calc(31% - 2px) 100%, 0 100%)}
.hero-panel.p2{clip-path:polygon(calc(38% + 2px) 0, calc(69% - 2px) 0, calc(62% - 2px) 100%, calc(31% + 2px) 100%)}
.hero-panel.p3{clip-path:polygon(calc(69% + 2px) 0, 100% 0, 100% 100%, calc(62% + 2px) 100%)}
/* colonne : piste absolue de 8 images (4 uniques + 4 dupliquées) empilées.
   Piste = 8 × 46svh = 368svh ; translateY -50% = -184svh = exactement la 1re copie → aucune couture visible.
   width:130% + centrage : l'image déborde la diagonale, jamais de bord nu. Transform composité (GPU). */
.hero-col{position:absolute;top:0;left:50%;width:130%;transform:translate3d(-50%,0,0);display:flex;flex-direction:column;will-change:transform}
/* cartes placeholder empilées — même hauteur que les images d'origine (boucle seamless) */
.hero-col .ph{height:46svh;flex:0 0 auto;--ph-bg:var(--pierre);--ph-ink:#6B6B6B}
/* directions ALTERNÉES + vitesses lentes légèrement différentes (ambiant, pas un carrousel) */
.hero-col.c1{animation:heroDown 52s linear infinite}
.hero-col.c2{animation:heroUp 46s linear infinite}
.hero-col.c3{animation:heroDown 58s linear infinite}
@keyframes heroDown{from{transform:translate3d(-50%,-50%,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes heroUp{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(-50%,-50%,0)}}
/* fines lignes blanches de séparation, pile sur les coupes diagonales (bande ~2px) */
.hero-seam{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(255,255,255,.5)}
.hero-seam.s1{clip-path:polygon(calc(38% - 1px) 0, calc(38% + 1px) 0, calc(31% + 1px) 100%, calc(31% - 1px) 100%)}
.hero-seam.s2{clip-path:polygon(calc(69% - 1px) 0, calc(69% + 1px) 0, calc(62% + 1px) 100%, calc(62% - 1px) 100%)}
/* overlay RENFORCÉ : les cartes placeholder sont claires — on assombrit assez pour garder H1/CTA
   parfaitement lisibles, tout en laissant deviner les panneaux « photos à venir » derrière. */
.hero-bg::before{content:"";position:absolute;inset:0;z-index:2;background:
  radial-gradient(120% 92% at 22% 40%,rgba(10,10,10,.5),transparent 62%),
  linear-gradient(180deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.6) 40%,rgba(10,10,10,.88) 74%,var(--terre) 100%)}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.64;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
#hero .wrap{position:relative;z-index:4;display:flex;flex-direction:column;flex:1}
/* align-items:center — le bloc de droite (mini-desc + 2 boutons) est CENTRÉ verticalement
   par rapport au bloc du titre (auparavant collé en bas via align-items:end). */
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:center;padding:1.5rem 0 2.5rem}
.hero-h1{font-size:clamp(3.4rem,9.5vw,8.2rem);margin:1.4rem 0 0}
.hero-right p{color:var(--brume);font-size:clamp(1.15rem, .92rem + .9vw, 1.3rem);line-height:1.55;max-width:36ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.8rem}
.hero-strip{margin-top:auto;border-top:1px solid transparent;background-image:linear-gradient(90deg,transparent,var(--ligne-s) 6%,var(--ligne-s) 70%,transparent);background-repeat:no-repeat;background-size:100% 1px;background-position:top left;display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;padding:1.2rem 0 1.4rem;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brume)}
.hero-strip b{color:var(--os);font-weight:600}
.rise{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
body.ready .rise{opacity:1;transform:none}
body.ready .d2{transition-delay:.12s}
body.ready .d3{transition-delay:.24s}

/* ============================================================
   SECTIONS communes
   ============================================================ */
section{padding:6.5rem 0}
.clair{background:var(--pierre);color:var(--encre)}
.clair .sec-note,.clair p{color:var(--gris)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3.5rem;position:relative}
.sec-title{font-size:clamp(2.6rem,6vw,4.6rem)}
.sec-note{color:var(--brume);max-width:36ch;font-size:.98rem}
.sec-link{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--encre);white-space:nowrap;border-bottom:2px solid var(--encre);padding-bottom:.2rem;opacity:.85;transition:opacity .3s ease}
.sec-link:hover{opacity:1}
/* ============================================================
   SERVICES — SECTION SOMBRE (2026-07-26). Basculée de .clair à .grain (fond sombre) : contraste maximal,
   cohérent avec les fiches (cartes-images sombres). Titre/eyebrow/marques repassent en clair par défaut
   (plus de règles .clair). On recalibre ici les 3 éléments qui supposaient un fond clair. Voir DECISIONS.md. */
#services{border-top:1px solid var(--ligne-or)}          /* filet doré au raccord réalisations → services */
#services .sec-link{color:var(--os);border-bottom-color:var(--os)}   /* lien lisible sur sombre */
#services .sfiche{outline-color:var(--ligne-s);box-shadow:var(--sh-sombre-1)}  /* arête + ombre pour fond sombre */
#services .sfiche:hover,#services .sfiche.actif{box-shadow:var(--sh-sombre-2)}
.lead{font-size:1.25rem;line-height:1.55;color:var(--encre);max-width:64ch;margin-bottom:2.8rem}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* les titres de section ne translatent pas en bloc : ils fondent, et les MOTS montent par strates */
.sec-head.reveal{transform:none}
/* ⚠️ CAUSE RACINE DÉFINITIVE des titres qui se CHEVAUCHENT (2026-07-26, 3e passe). La mécanique de
   révélation enveloppe chaque MOT dans `<span class="w"><i>` avec `overflow:hidden` + `padding-top`
   (room pour les diacritiques MAJ pendant le clip). PIÈGE : TOUTE tentative de « compenser » ce padding
   par un MARGIN NÉGATIF crée un chevauchement — c'est ce qui a fait revenir le bug 3 fois :
     (1) margin négatif PAR MOT  → collapse l'interligne → lignes qui se superposent ;
     (2) margin négatif sur le BLOC `.sec-title` → tire le titre de ~.22em dans l'EYEBROW au-dessus.
   FIX DÉFINITIF : **AUCUN margin négatif nulle part.** Le `padding-top` des mots vit (room diacritiques),
   l'avance de ligne = hauteur de boîte (0 chevauchement inter-lignes), et l'espace eyebrow→titre est rendu
   **EXPLICITE** (`.sec-head .eyebrow{margin-bottom}`) au lieu d'être déduit de métriques fragiles.
   NE JAMAIS remettre un `margin-top` négatif sur `.sec-title` NI sur `.sec-title .w`. */
.sec-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.2em}
.sec-head .eyebrow{margin-bottom:.4rem}
.sec-title .w>i{display:inline-block;font-style:normal;transform:translateY(112%);transition:transform .7s var(--ease);transition-delay:calc(var(--wi,0)*.05s)}
.sec-head.in .sec-title .w>i{transform:translateY(0)}
/* REVEAL en cascade : les enfants (rangées, tuiles, étapes, valeurs) arrivent en stagger — départ resserré, fin qui respire */
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease),padding .4s var(--ease),border-color .35s ease,outline-color .35s ease,background .35s ease}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.06s}
.stagger.in>*:nth-child(2){transition-delay:.13s}
.stagger.in>*:nth-child(3){transition-delay:.21s}
.stagger.in>*:nth-child(4){transition-delay:.30s}
.stagger.in>*:nth-child(5){transition-delay:.40s}
.stagger.in>*:nth-child(6){transition-delay:.51s}
.stagger.in>*:nth-child(7){transition-delay:.63s}
.stagger.in>*:nth-child(8){transition-delay:.76s}
/* MARQUES TECHNIQUES au reveal des titres — croix de repère (+) + tick de cote + ligne de niveau qui balaie.
   Pseudo-éléments uniquement (zéro HTML, zéro décalage de layout), déclenchés par .sec-head.in. */
.sec-head::before{
  content:"";position:absolute;top:-14px;left:-4px;z-index:2;width:16px;height:16px;pointer-events:none;opacity:0;transform:scale(.5) rotate(-8deg);
  background:linear-gradient(var(--os),var(--os)) center/100% 1.4px no-repeat,linear-gradient(var(--os),var(--os)) center/1.4px 100% no-repeat;
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.clair .sec-head::before{background:linear-gradient(var(--encre),var(--encre)) center/100% 1.4px no-repeat,linear-gradient(var(--encre),var(--encre)) center/1.4px 100% no-repeat}
.sec-head.in::before{opacity:0;transform:scale(1) rotate(0deg);animation:c3-mark-flash 1.15s var(--ease) .15s both}
.eyebrow::after{content:"";position:absolute;top:50%;right:-18px;z-index:2;width:1.4px;height:14px;pointer-events:none;background:currentColor;color:var(--brume);transform:translateY(-50%) scaleY(0);transform-origin:center;opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.clair .eyebrow::after{color:var(--gris)}
.sec-head.in .eyebrow::after{opacity:1;transform:translateY(-50%) scaleY(1);animation:c3-tick-blink 1.25s var(--ease) .3s both}
.sec-head::after{content:"";position:absolute;left:0;bottom:-1.15rem;z-index:1;width:clamp(120px,22vw,240px);height:2px;pointer-events:none;background:var(--ligne-s);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .12s}
.clair .sec-head::after{background:var(--ligne-c)}
.sec-head.in::after{transform:scaleX(1)}
@keyframes c3-mark-flash{0%{opacity:0;transform:scale(.5) rotate(-8deg)}35%{opacity:1;transform:scale(1) rotate(0deg)}70%{opacity:1}100%{opacity:0}}
@keyframes c3-tick-blink{0%{opacity:0;transform:translateY(-50%) scaleY(0)}30%{opacity:1;transform:translateY(-50%) scaleY(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-50%) scaleY(1)}}

/* SERVICES : les anciennes rangées .slist/.srow ont été remplacées par les fiches 3D
   (voir « CHANTIER 5 — SERVICES FICHES 3D » en fin de fichier). */

/* ============================================================
   CARTES PLACEHOLDER « IMAGE PROJET ICI » — langage commun du site
   Fond blanc cassé, fine bordure « plan technique », croix de repère
   centrées sur les 4 coins, libellé centré Archivo MAJ letterspaced gris.
   En attente des VRAIES PHOTOS CLIENT (voir commentaires SWAP dans l'HTML).
   Réutilisé par : colonnes du hero, tuiles réalisations, avant/après.
   Photos réelles = EN COULEUR ; ces cartes d'interface restent N&B (design system).
   ============================================================ */
.ph{
  --ph-bg:var(--pierre);
  --ph-frame:rgba(17,17,17,.18);
  --ph-mark:rgba(17,17,17,.36);
  --ph-ink:#6E6E6E;
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;width:100%;height:100%;padding:1.4rem;
  background:var(--ph-bg);
  background-image:
    linear-gradient(var(--ph-frame) .6px,transparent .6px),
    linear-gradient(90deg,var(--ph-frame) .6px,transparent .6px);
  background-size:22px 22px,22px 22px;background-position:center;
  color:var(--ph-ink);text-align:center;overflow:hidden;
}
/* cadre technique intérieur (hairline) */
.ph::before{content:"";position:absolute;inset:10px;pointer-events:none;border:1px solid var(--ph-frame)}
/* 4 croix de repère « + » centrées sur les coins du cadre */
.ph::after{
  content:"";position:absolute;inset:10px;pointer-events:none;background:
    linear-gradient(var(--ph-mark),var(--ph-mark)) left -6px top -0.7px/12px 1.4px no-repeat,
    linear-gradient(var(--ph-mark),var(--ph-mark)) left -0.7px top -6px/1.4px 12px no-repeat,
    linear-gradient(var(--ph-mark),var(--ph-mark)) right -6px top -0.7px/12px 1.4px no-repeat,
    linear-gradient(var(--ph-mark),var(--ph-mark)) right -0.7px top -6px/1.4px 12px no-repeat,
    linear-gradient(var(--ph-mark),var(--ph-mark)) left -6px bottom -0.7px/12px 1.4px no-repeat,
    linear-gradient(var(--ph-mark),var(--ph-mark)) left -0.7px bottom -6px/1.4px 12px no-repeat,
    linear-gradient(var(--ph-mark),var(--ph-mark)) right -6px bottom -0.7px/12px 1.4px no-repeat,
    linear-gradient(var(--ph-mark),var(--ph-mark)) right -0.7px bottom -6px/1.4px 12px no-repeat;
}
.ph>*{position:relative;z-index:1}
.ph-kind{font-size:.6rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;opacity:.72}
.ph-label{font-family:'Archivo',system-ui,sans-serif;font-size:clamp(.72rem,1.5vw,.86rem);font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.ph-num{font-size:.58rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.58}

/* ============================================================
   RÉALISATIONS — avant/après + tuiles = cartes placeholder « IMAGE PROJET ICI »
   SWAP PHOTOS : remplacer chaque carte .ph par la vraie photo de l'entreprise (EN COULEUR)
   ============================================================ */
.tuiles{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.6rem}
/* tuile = carte placeholder claire (image) + bandeau légende « champs à remplir ».
   Hover SOBRE : léger lift, la carte reste N&B (aucun retour de couleur — c'est un placeholder). */
.tuile{position:relative;aspect-ratio:4/3;overflow:hidden;display:flex;flex-direction:column;background:var(--pierre);outline:1px solid var(--ligne-s);box-shadow:var(--sh-sombre-1);transition:transform .5s var(--ease),outline-color .4s ease,box-shadow .4s ease}
.tuile:hover{transform:translateY(-6px);outline-color:var(--blanc);box-shadow:var(--sh-sombre-2)}
/* Légende : voir « CHANTIER 5 » plus bas — bandeau glass en tête (.tuile-head) + puce secteur (.tuile-secteur). */
/* avant / après */
.ba{position:relative;aspect-ratio:16/9;overflow:hidden;outline:1px solid var(--ligne-s);background:var(--terre-2);user-select:none;touch-action:none;box-shadow:var(--sh-sombre-2)}
/* deux cartes placeholder empilées : APRÈS (base, plus blanche) + AVANT (dessus, clippée, plus grise/sombre).
   L'écart de ton reste visible quand on glisse le curseur → le slider demeure démonstratif. */
.ba-avant{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.ba-ligne{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;background:var(--blanc);transform:translateX(-50%);pointer-events:none}
.ba-grip{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--blanc);display:grid;place-items:center;color:var(--terre);font-weight:700;font-size:.9rem;pointer-events:none;letter-spacing:.05em;box-shadow:var(--sh-glow);animation:grip-pulse 2.4s var(--ease) infinite}
.ba.touched .ba-grip{animation:none}
@keyframes grip-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 18px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-tag{position:absolute;top:1rem;padding:.35rem .75rem;background:rgba(10,10,10,.85);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--os);pointer-events:none}
.ba-tag.t-avant{left:1rem}
.ba-tag.t-apres{right:1rem}
.ba-note{margin-top:1rem;font-size:.85rem;color:var(--brume)}

/* ============================================================
   TÉMOIGNAGES (prêts à décommenter — SWAP vrais avis Google)
   ============================================================ */
.temoins{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.temoin{background:var(--terre-2);outline:1px solid var(--ligne-s);padding:2rem 1.8rem;display:flex;flex-direction:column;gap:1.2rem}
.temoin .gm{font-family:'Anton',Impact,sans-serif;font-size:2.4rem;line-height:1;color:var(--blanc)}
.temoin p{color:var(--os);font-size:.98rem}
.temoin footer{border:0;padding:0;margin-top:auto}
.temoin b{display:block;font-size:.9rem;letter-spacing:.04em}
.temoin small{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brume)}

/* ============================================================
   ENTREPRISE — valeurs + secteurs (chips) + triangle filigrane
   ============================================================ */
/* ENTREPRISE (2026-07-26) : fond LÉGÈREMENT plus foncé que .clair (moins agressif que Services devenu sombre),
   textes sombres conservés (classe .clair gardée → contraste dark-on-light nickel). TRANSITION Services(sombre)
   → Entreprise(clair) : bande ::before dans le haut de section (au-dessus du contenu) = dégradé DOUX sombre→clair
   + filet doré centré + fine grille de plan, même langage que hero→réalisations (aucun changement de couleur sec). */
#entreprise{position:relative;overflow:hidden;background:#E7E3DC;padding-top:8.5rem}
#entreprise::before{
  content:"";position:absolute;top:0;left:0;right:0;height:120px;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,transparent,var(--ligne-or) 28%,var(--ligne-or) 72%,transparent),   /* filet doré au raccord */
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),                                 /* grille plan V */
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),                            /* grille plan H */
    linear-gradient(180deg,var(--terre) 0%,rgba(10,10,10,.55) 34%,transparent 100%);            /* dégradé doux sombre→clair */
  background-size:min(1200px,92vw) 1.4px, 26px 26px, 26px 26px, 100% 100%;
  background-position:center top, center top, center top, center top;
  background-repeat:no-repeat, repeat, repeat, no-repeat;
}
#entreprise .wrap{position:relative;z-index:1}
/* CHANTIER 6b — le triangle filigrane PERÇAIT le texte de la note (« …on se déplace ») en haut à droite.
   On l'ancre en BAS-DROITE, majoritairement dans la marge → pure texture, ne croise plus aucun texte. */
.wm-tri{position:absolute;z-index:0;right:-16%;bottom:-14%;width:min(46vw,540px);height:auto;pointer-events:none}
.wm-tri path{fill:none;stroke:var(--encre);stroke-width:.7;opacity:.10}
/* CHANTIER 6a — intro entreprise : texte + carte PHOTO ÉQUIPE côte à côte (langage .ph du hero) */
.ent-intro{display:grid;grid-template-columns:1.12fr .88fr;gap:2.6rem;align-items:center;margin-bottom:2.8rem}
.ent-intro .lead{margin-bottom:0}
.ph-equipe{aspect-ratio:4/3;min-height:210px;--ph-bg:var(--pierre-2);outline:1px solid var(--ligne-c);box-shadow:var(--sh-clair-1)}
.valeurs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-bottom:2.6rem}
.valeur{border:1px solid var(--ligne-c);padding:2rem 1.8rem;background:rgba(255,255,255,.6);transition:border-color .35s ease,background .35s ease,box-shadow .35s ease;box-shadow:var(--sh-clair-1)}
.valeur:hover{border-color:var(--encre);background:var(--blanc);box-shadow:var(--sh-clair-2)}
.valeur h3{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:1.4rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:.7rem}
.valeur p{font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{border:1px solid var(--ligne-c);padding:.5rem .95rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--encre);transition:border-color .3s ease,color .3s ease}
.chip:hover{border-color:var(--encre);color:var(--encre)}

/* ============================================================
   CONTRÔLES DE FORMULAIRE (génériques — réutilisés par soumission.html)
   ============================================================ */
form{display:grid;gap:1.1rem}
label{display:grid;gap:.45rem;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brume)}
input,select,textarea{background:var(--terre-3);border:1px solid var(--ligne-s);color:var(--os);font-family:inherit;font-size:1rem;padding:.95rem 1rem;width:100%;transition:border-color .25s ease;border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blanc)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F3F3F3' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
textarea{resize:vertical;min-height:130px}

/* ============================================================
   FOOTER compact + wordmark géant en outline (nom d'entreprise)
   ============================================================ */
footer{border-top:1px solid var(--ligne-s);padding:2.8rem 0 0;overflow:hidden}
.foot-compact{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.4rem}
.foot-compact .brand{margin-right:auto}
.foot-nav{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brume)}
.foot-nav a,.foot-meta a{transition:color .25s ease}
.foot-nav a:hover{color:var(--blanc)}
.foot-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;font-size:.9rem;color:var(--brume)}
.foot-meta a:hover{color:var(--blanc)}
.foot-legal{width:100%;border-top:1px solid transparent;background-image:linear-gradient(90deg,transparent,var(--ligne-s) 4%,var(--ligne-s) 96%,transparent);background-repeat:no-repeat;background-size:100% 1px;background-position:top left;margin-top:.6rem;padding-top:1.4rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.4rem;font-size:.78rem;color:var(--brume)}
.foot-legal .rbq{letter-spacing:.12em;text-transform:uppercase}
/* crédit GNJ Média — mention discrète (toutes tailles), style des liens du footer */
.foot-credit{color:var(--brume);text-decoration:none;transition:color .25s ease}
.foot-credit:hover,.foot-credit:focus-visible{color:var(--blanc)}
.foot-word{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;text-align:center;line-height:.8;color:transparent;-webkit-text-stroke:1px var(--ligne-s);font-size:min(30vw,360px);letter-spacing:.03em;margin:2.4rem 0 -.14em;user-select:none;pointer-events:none}

/* ============================================================
   BARRE MOBILE COLLANTE
   ============================================================ */
.sticky-cta{display:none}

/* focus visible global : blanc sur sombre, encre sur clair */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blanc);outline-offset:3px}
.clair a:focus-visible,.clair button:focus-visible,.clair summary:focus-visible,.clair input:focus-visible,.clair select:focus-visible,.clair textarea:focus-visible{outline-color:var(--encre)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav-links{display:none}
  .nav{justify-content:center}   /* header mobile = logo seul, centré (burger retiré) */
  #hero{padding-top:6rem}
  /* MOBILE : la VIDÉO de fond remplace le triptyque → colonnes + coupes masquées (perf). */
  .hero-video{display:block}
  .ph.ph-video{display:flex}
  #hero .hero-tri,#hero .hero-seam{display:none}
  /* overlay RENFORCÉ sur la vidéo (plus lumineuse/contrastée que les cartes placeholder) →
     titre H1 + CTA + badges parfaitement lisibles, y compris sur les frames claires (ciel/maison). */
  #hero .hero-bg::before{background:
    radial-gradient(135% 62% at 28% 24%,rgba(10,10,10,var(--hv-halo)),transparent 60%),
    linear-gradient(180deg,rgba(10,10,10,var(--hv-top)) 0%,rgba(10,10,10,var(--hv-mid)) 46%,rgba(10,10,10,var(--hv-bottom)) 100%),
    linear-gradient(rgba(10,10,10,var(--hv-veil)),rgba(10,10,10,var(--hv-veil)))}
  /* REPLI vidéo en échec (site.js ajoute .hero-video-off) → on ré-affiche le fond actuel (colonnes). */
  #hero.hero-video-off .hero-video{display:none}
  #hero.hero-video-off .hero-tri,#hero.hero-video-off .hero-seam{display:block}
  /* colonnes = fond de repli (masquées quand la vidéo joue) ; cartes un peu plus courtes */
  .hero-col .ph{height:38svh}
  .hero-col.c1{animation-duration:44s}
  .hero-col.c2{animation-duration:40s}
  .hero-col.c3{animation-duration:48s}
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .tuiles{grid-template-columns:1fr}
  .temoins{grid-template-columns:1fr}
  .valeurs{display:none}   /* mobile : on masque les 3 blocs de valeurs (visibles au desktop ≥900px) */
  .ent-intro{grid-template-columns:1fr;gap:1.8rem;margin-bottom:2.4rem}
  .ph-equipe{min-height:200px}
  /* mobile : triangle en bas, contenu, hors du texte */
  .wm-tri{width:74vw;right:-22%;bottom:-8%}
  section{padding:4.5rem 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:1rem;margin-bottom:2.4rem}
  .sticky-cta{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:930;transition:transform .4s var(--ease)}
  .sticky-cta.hidden{transform:translateY(100%)}   /* smart-hide bas synchronisé avec le header (JS setBarsHidden) */
  .sticky-cta a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center;font-weight:700;text-transform:uppercase;font-size:.82rem;letter-spacing:.05em}
  .sticky-cta a svg{width:1.05em;height:1.05em;flex:none}   /* icône plan au trait, currentColor → couleur du libellé, alignée au texte */
  .sticky-cta .s-tel{background:var(--terre-2);color:var(--os);border-top:1px solid var(--ligne-s)}
  .sticky-cta .s-soum{background:var(--blanc);color:var(--terre)}
  main{padding-bottom:52px}
}
@media (max-width:560px){
  .hero-strip{gap:.4rem 1.4rem}
  .hero-col .ph{height:34svh}
}

/* ============================================================
   REDUCED MOTION — on saute l'intro et les effets
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  #intro{display:none}
  .rise,.reveal,.stagger>*{opacity:1 !important;transform:none !important;transition:none !important}
  .sec-title .w>i{transform:none !important}
  /* marques techniques + ligne de niveau : rien ne flashe, rien ne balaie */
  .sec-head::before,.sec-head::after,.eyebrow::after{animation:none !important;transition:none !important}
  .sec-head::before{opacity:0 !important;transform:none !important}
  .eyebrow::after{opacity:0 !important;transform:translateY(-50%) !important}
  .sec-head::after{transform:none !important}
  /* hovers enrichis : aucun déplacement résiduel */
  .tuile{transform:none !important;transition:none !important;animation:none !important}
  .hero-col{animation:none !important;transform:translate3d(-50%,0,0) !important}
  .ba-grip{animation:none !important}
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ============================================================
   CHANTIER 1 — BOUTON SOUMISSION : LE PLAN SE DESSINE AU HOVER
   .btn-plan = bouton nav « Soumission gratuite » (→ soumission.html) uniquement. Au survol : (1) le fond
   s'INVERSE (blanc→sombre via .btn::before, texte→blanc) ; (2) les lignes
   VERTICALES du quadrillage se TRACENT de haut en bas (scaleY 0→1) ; (3) les
   HORIZONTALES se tracent de gauche à droite (scaleX 0→1, juste après) ; (4) 4
   croix de repère dorées apparaissent aux coins (pop décalé). 100% composité
   GPU (transform + opacity) → 60fps. Calques : .bp-v (verticales), .bp-h
   (horizontales), .bp::after (croix). Le texte (.bp-txt) reste au-dessus.
   ============================================================ */
.btn-plan .bp-txt{position:relative;z-index:1}
/* .bp = calque du plan (au-dessus du fond sombre qui glisse, sous le texte) */
.btn-plan .bp{position:absolute;inset:3px;z-index:0;pointer-events:none;overflow:hidden;border-radius:calc(var(--r-btn) - 3px)}
.btn-plan .bp-v,.btn-plan .bp-h{position:absolute;inset:0;will-change:transform;backface-visibility:hidden}
/* (2) LIGNES VERTICALES — se tracent de HAUT en BAS (scaleY 0→1) */
.btn-plan .bp-v{
  background-image:repeating-linear-gradient(90deg,rgba(198,168,103,.62) 0 1px,transparent 1px 10px);
  transform:scaleY(0);transform-origin:top center;
  transition:transform .58s var(--ease) .06s;
}
/* (3) LIGNES HORIZONTALES — se tracent de GAUCHE à DROITE (scaleX 0→1), juste après */
.btn-plan .bp-h{
  background-image:repeating-linear-gradient(0deg,rgba(198,168,103,.62) 0 1px,transparent 1px 10px);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .62s var(--ease) .26s;
}
/* (4) 4 CROIX DE REPÈRE dorées aux coins — apparaissent après le tracé (pop décalé) */
.btn-plan .bp::after{
  content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--or-clair) 0 0),linear-gradient(var(--or-clair) 0 0),
    linear-gradient(var(--or-clair) 0 0),linear-gradient(var(--or-clair) 0 0),
    linear-gradient(var(--or-clair) 0 0),linear-gradient(var(--or-clair) 0 0),
    linear-gradient(var(--or-clair) 0 0),linear-gradient(var(--or-clair) 0 0);
  background-size:9px 1.4px,1.4px 9px, 9px 1.4px,1.4px 9px, 9px 1.4px,1.4px 9px, 9px 1.4px,1.4px 9px;
  background-position:
    7px 7px,7px 7px,
    calc(100% - 7px) 7px,calc(100% - 7px) 7px,
    7px calc(100% - 7px),7px calc(100% - 7px),
    calc(100% - 7px) calc(100% - 7px),calc(100% - 7px) calc(100% - 7px);
  opacity:0;transform:scale(.5);transform-origin:center;
  transition:opacity .32s ease .64s,transform .42s var(--ease) .64s;
}
/* survol / focus clavier : le plan se dessine */
.nav-links a.btn-plan:hover .bp-v,
.nav-links a.btn-plan:focus-visible .bp-v{transform:scaleY(1)}
.nav-links a.btn-plan:hover .bp-h,
.nav-links a.btn-plan:focus-visible .bp-h{transform:scaleX(1)}
.nav-links a.btn-plan:hover .bp::after,
.nav-links a.btn-plan:focus-visible .bp::after{opacity:1;transform:scale(1)}
/* liseré or signature au survol, en plus du glow hérité */
.nav-links a.btn-plan{transition:color .3s ease,box-shadow .4s var(--ease),transform .35s var(--ease)}
.nav-links a.btn-plan:hover,
.nav-links a.btn-plan:focus-visible{box-shadow:inset 0 0 0 1px var(--ligne-or),var(--sh-glow)}
/* reduced-motion : le plan apparaît/disparaît INSTANTANÉMENT au survol (aucun tracé animé) */
@media (prefers-reduced-motion:reduce){
  .btn-plan .bp-v,.btn-plan .bp-h,.btn-plan .bp::after{transition:none !important}
  .nav-links a.btn-plan{transition:color .3s ease !important}
}

/* ============================================================
   CHANTIER 2 — HERO TYPO + BADGES
   a) espacement des 3 lignes du H1 (interligne élargi, aucun chevauchement)
   b) « BRUT » : Archivo Black + texture pierre clippée (SVG data-URI, N&B désaturé)
   b2) « B CASSÉ » : le B (.brut-b) est fendu en deux morceaux décalés + fissure zigzag (clip-path)
   c) « RÊVE » : lettrage or (--or-grad clippé) + glow doré doux (drop-shadow)
   d) 4 badges : icônes SVG « plan technique » (stroke fin) + micro-interaction
   Zéro image externe. Le N&B reste la base ; l'or est un accent ponctuel.
   NOTE : « TERRAIN » n'a PLUS de texture gazon — c'est du blanc Anton comme le reste du titre.
   ============================================================ */
/* (a) — les 3 lignes du H1 deviennent des blocs, espacés et responsive.
   Interligne ÉLARGI : « BRUT » (Archivo Black, glyphes hauts) et « RÊVE » (glow doré + boîte
   d'accent rehaussée) débordent la ligne serrée .95 ; sans marge suffisante, « de rêve. » remontait
   dans « au terrain ». On donne assez d'air pour que les 3 lignes ne se chevauchent jamais. */
.hero-h1{display:flex;flex-direction:column}
.hero-h1 .h1-l{display:block}
.hero-h1 .h1-l + .h1-l{margin-top:clamp(.28em,1.6vw,.52em)}
/* (b) « BRUT » — pierre/pavé clippé dans les lettres. Fallback --os si pas de clip.
   Le B est porté par .brut-b (frère de .brut) pour pouvoir être FENDU (voir b2). La texture stone
   est mutualisée dans --brut-stone pour servir au mot ET aux deux morceaux du B sans la redéclarer. */
.brut,.brut-b{
  --brut-font:'Archivo Black',Impact,sans-serif; /* ← swap police BRUT ici */
  --brut-stone:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.55'/%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(150deg,#EDEDEC 0%,#C7C7C4 34%,#A6A6A2 60%,#D2D2CF 100%);
  font-family:var(--brut-font);
  font-weight:400;
  letter-spacing:-.005em;
  color:var(--os);
  position:relative;
  display:inline-block;
  line-height:.95;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
/* « BRUT » = un seul bloc insécable : le B (.brut-b) et « rut » (.brut) ne doivent JAMAIS se séparer
   sur deux lignes (sinon « DU SOL B » / « RUT »). Le mot casse d'un bloc → « DU SOL » / « BRUT ». */
.brut-wrap{display:inline-block;white-space:nowrap}
/* MOBILE < 900px — « BRUT » sur SA propre ligne (fix 2026-07-29). Au desktop, la police (≈131px)
   est trop large → « Du sol brut » casse tout seul et « BRUT » passe sur sa ligne, aligné à gauche
   (rendu voulu). En mobile la police clampe à 54px → « Du sol brut » TENAIT sur une seule ligne :
   « BRUT » (Archivo Black) se retrouvait collé à « Du sol » (Anton) et paraissait décalé
   verticalement (métriques de police différentes sur la même ligne). On force donc le même
   comportement qu'au desktop : `display:block` → BRUT seul sur sa ligne, aligné à gauche avec
   DU SOL / AU TERRAIN / DE RÊVE (box-left identique = 16px, mesuré). Fissure du B intacte
   (les pseudo-éléments sont positionnés sur `.brut-b`, inchangés). Desktop > 900px NON touché. */
@media (max-width:900px){ .hero-h1 .brut-wrap{display:block} }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brut{
    background-image:var(--brut-stone);
    background-size:120px 120px,100% 100%;
    background-position:center,center;
    background-blend-mode:overlay,normal;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 1px 0 rgba(0,0,0,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.28));
  }
  /* (b2) « B CASSÉ » — pierre fendue. Le vrai « b » (.brut-b) devient TRANSPARENT et ne sert plus qu'à
     réserver la chasse ; deux pseudo-éléments redessinent le B avec la MÊME texture, découpés le long
     d'un même trait de fêlure en zigzag (clip-path) : le morceau HAUT part vers le haut-gauche, le
     morceau BAS vers le bas-droite (décalage ~1 px) → l'écart laisse voir le fond sombre = la fissure.
     Une ombre portée sous le morceau haut creuse le trait. 100% SVG/CSS, aucun glyphe supplémentaire lu
     (le bloc est aria-hidden ; « brut » est restitué en .sr-only). */
  .brut-b{
    -webkit-text-fill-color:transparent;color:transparent;text-shadow:none;
    filter:drop-shadow(0 1px 0 rgba(0,0,0,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.28));
  }
  .brut-b::before,.brut-b::after{
    content:"B";position:absolute;left:0;top:0;
    background-image:var(--brut-stone);
    background-size:120px 120px,100% 100%;
    background-position:center,center;
    background-blend-mode:overlay,normal;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  /* morceau HAUT du B — décalé haut-gauche + ombre = profondeur de la fêlure.
     Le trait de fracture passe à la TAILLE du B (jonction des deux ventres) et reste irrégulier
     sur toute la largeur → lecture « pierre fendue » claire à toutes les tailles. */
  .brut-b::before{
    clip-path:polygon(0 0,100% 0,100% 58%,82% 53%,68% 62%,55% 48%,42% 60%,28% 52%,15% 64%,0 54%);
    transform:translate(-.6px,-1px);
    filter:drop-shadow(0 1.6px .4px rgba(0,0,0,.6));
  }
  /* morceau BAS du B — décalé bas-droite */
  .brut-b::after{
    clip-path:polygon(0 54%,15% 64%,28% 52%,42% 60%,55% 48%,68% 62%,82% 53%,100% 58%,100% 100%,0 100%);
    transform:translate(.6px,1px);
  }
}
/* reduced-motion / repli sans clip : le B reste lisible (le vrai « b » plein, morceaux masqués) */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .brut-b::before,.brut-b::after{content:none}
}
/* (c) « RÊVE » — lettrage OR + glow doré doux. Fallback --or si pas de clip. */
.reve{
  color:var(--or);
  display:inline-block;
  position:relative;
  letter-spacing:.005em;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .reve{
    background:var(--or-grad);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    filter:
      drop-shadow(0 0 1px var(--or-glow))
      drop-shadow(0 3px 14px rgba(198,168,103,.30))
      drop-shadow(0 0 26px rgba(198,168,103,.16));
  }
}
@media (prefers-reduced-motion:no-preference){
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .reve{animation:reve-glow 6.5s var(--ease) infinite}
  }
}
@keyframes reve-glow{
  0%,100%{filter:drop-shadow(0 0 1px var(--or-glow)) drop-shadow(0 3px 14px rgba(198,168,103,.28)) drop-shadow(0 0 24px rgba(198,168,103,.14))}
  50%    {filter:drop-shadow(0 0 1px var(--or-glow)) drop-shadow(0 3px 16px rgba(198,168,103,.38)) drop-shadow(0 0 34px rgba(198,168,103,.22))}
}
/* (d) BADGES — icône SVG « plan technique » + micro-interaction (60fps) */
.hero-strip .hero-badge{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.3rem .1rem;
  transition:transform .35s var(--ease),color .3s ease;
  will-change:transform;
}
.hero-strip .hero-badge b{color:var(--os);font-weight:600}
.hero-strip .hb-ico{
  width:1.35em;height:1.35em;flex:none;overflow:visible;
  stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  color:var(--brume);
  transition:color .3s ease,transform .45s var(--ease),filter .3s ease;
}
.hb-ico .hb-check{stroke-dasharray:12;stroke-dashoffset:12;transition:stroke-dashoffset .45s var(--ease)}
.hb-ico .hb-hand{transform-box:fill-box;transform-origin:bottom center;transition:transform .5s var(--ease)}
.hb-ico .hb-seal,.hb-ico .hb-seal-tail{transition:opacity .35s ease,transform .4s var(--ease)}
.hb-ico .hb-seal-tail{opacity:.45}
.hb-ico .hb-shield{transition:transform .4s var(--ease)}
.hb-ico .hb-house,.hb-ico .hb-bldg{transition:transform .45s var(--ease)}
.hero-strip .hero-badge:hover,
.hero-strip .hero-badge:focus-within{transform:translateY(-3px);color:var(--os)}
.hero-strip .hero-badge:hover .hb-ico,
.hero-strip .hero-badge:focus-within .hb-ico{color:var(--blanc);filter:drop-shadow(0 2px 6px rgba(255,255,255,.18))}
.hero-strip .hero-badge:hover .hb-seal,
.hero-strip .hero-badge:focus-within .hb-seal{transform:scale(1.06);transform-box:fill-box;transform-origin:16.5px 16.5px}
.hero-strip .hero-badge:hover .hb-seal-tail,
.hero-strip .hero-badge:focus-within .hb-seal-tail{opacity:1}
.hero-strip .hero-badge:hover .hb-check,
.hero-strip .hero-badge:focus-within .hb-check{stroke-dashoffset:0}
.hero-strip .hero-badge:hover .hb-shield,
.hero-strip .hero-badge:focus-within .hb-shield{transform:translateY(-1px)}
.hero-strip .hero-badge:hover .hb-hand,
.hero-strip .hero-badge:focus-within .hb-hand{transform:rotate(115deg)}
.hero-strip .hero-badge:hover .hb-house,
.hero-strip .hero-badge:focus-within .hb-house{transform:translateY(-1.5px)}
.hero-strip .hero-badge:hover .hb-bldg,
.hero-strip .hero-badge:focus-within .hb-bldg{transform:translateY(-2.5px)}
@media (prefers-reduced-motion:reduce){
  .reve{animation:none!important}
  .hero-strip .hero-badge,
  .hero-strip .hero-badge:hover,
  .hero-strip .hero-badge:focus-within,
  .hb-ico,.hb-ico *{transition:none!important;animation:none!important;transform:none!important}
  .hero-strip .hero-badge:hover .hb-ico,
  .hero-strip .hero-badge:focus-within .hb-ico{color:var(--blanc)}
  .hb-ico .hb-check{stroke-dashoffset:0!important}
  .hb-ico .hb-seal-tail{opacity:.6!important}
}

/* ============================================================
   CHANTIER 5 — SERVICES FICHES 3D
   5 fiches en ligne (accordéon flex) : la fiche survolée/active s'agrandit
   (flex-grow + image qui grossit) pendant que les autres rétrécissent.
   Profondeur 3D (perspective + rotateY léger + ombres). Section CLAIRE ;
   accent DORÉ ponctuel. Desktop : hover. Mobile ≤900px : scroll + tap actif.
   ============================================================ */
.sfiches{
  --f-gap:1rem;
  --f-rayon:2px;
  display:flex;gap:var(--f-gap);
  perspective:1600px;
  perspective-origin:50% 40%;
}
.sfiche{
  position:relative;overflow:hidden;
  flex:1 1 0;min-width:0;
  height:clamp(360px,46vh,520px);
  border-radius:var(--f-rayon);
  background:var(--terre-2);
  outline:1px solid var(--ligne-c);
  box-shadow:var(--sh-clair-1);
  transform-style:preserve-3d;
  transform:rotateY(0deg) translateZ(0);
  transition:
    flex-grow .55s var(--ease),
    box-shadow .55s var(--ease),
    outline-color .45s ease,
    transform .55s var(--ease);
  will-change:flex-grow,transform;
}
.sfiche-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transform-origin:50% 45%;
  transition:transform .7s var(--ease),filter .55s ease;
  filter:saturate(.94) contrast(1.02);
}
.sfiche::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(10,10,10,.92) 0%,rgba(10,10,10,.7) 26%,rgba(10,10,10,.15) 58%,rgba(10,10,10,0) 82%);
  transition:opacity .5s ease;
}
.sfiche-num{
  position:absolute;top:1rem;left:1.1rem;z-index:2;
  font-family:'Anton',Impact,sans-serif;font-size:1rem;letter-spacing:.12em;
  color:var(--or-clair);opacity:.9;
  padding-bottom:.2rem;border-bottom:2px solid var(--ligne-or);
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.sfiche-corps{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.35rem 1.3rem 1.4rem;
  display:flex;flex-direction:column;gap:.55rem;
}
.sfiche-titre{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(1.15rem,1.7vw,1.55rem);line-height:1.02;
  text-transform:uppercase;letter-spacing:.02em;color:var(--blanc);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.sfiche-desc,.sfiche-lien{
  color:var(--os);
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease) .06s,transform .45s var(--ease) .06s;
}
.sfiche-desc{font-size:.92rem;line-height:1.45;max-width:42ch}
.sfiche-lien{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.15rem;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or-clair);
}
.sfiche-lien i{transition:transform .35s var(--ease)}
/* état étendu : hover / focus clavier / .actif (tap mobile) */
.sfiches:hover .sfiche{flex-grow:.5}
.sfiche:hover,
.sfiche:focus-visible,
.sfiche.actif{flex-grow:3.4}
.sfiche:hover,.sfiche.actif{
  box-shadow:var(--sh-clair-2);outline-color:var(--ligne-or);
  transform:rotateY(0deg) translateZ(40px);
}
.sfiche:focus-visible{
  outline:2px solid var(--encre);outline-offset:3px;
}
.sfiche:hover .sfiche-img,
.sfiche:focus-visible .sfiche-img,
.sfiche.actif .sfiche-img{transform:scale(1.14)}
.sfiche:hover .sfiche-desc,.sfiche:hover .sfiche-lien,
.sfiche:focus-visible .sfiche-desc,.sfiche:focus-visible .sfiche-lien,
.sfiche.actif .sfiche-desc,.sfiche.actif .sfiche-lien{opacity:1;transform:none}
.sfiche:hover .sfiche-lien i,
.sfiche:focus-visible .sfiche-lien i,
.sfiche.actif .sfiche-lien i{transform:translateX(5px)}
/* inclinaison 3D « construction » : voisines penchent vers la fiche étendue (souris seulement) */
@media (hover:hover) and (pointer:fine){
  .sfiche:hover + .sfiche{transform:rotateY(-5deg) translateZ(0)}
  .sfiche:has(+ .sfiche:hover){transform:rotateY(5deg) translateZ(0)}
}
/* mobile/tablette ≤900px : scroll horizontal + tap actif */
@media (max-width:900px){
  .sfiches{
    perspective:none;
    gap:.9rem;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:.6rem;
    scrollbar-width:thin;
  }
  .sfiche{
    flex:0 0 76%;
    height:clamp(320px,60vh,440px);
    scroll-snap-align:center;
    transform:none;
    transition:flex-basis .5s var(--ease),box-shadow .45s var(--ease),outline-color .4s ease;
  }
  .sfiches:hover .sfiche{flex-grow:0}
  .sfiche:hover,.sfiche.actif{flex-grow:0;transform:none}
  .sfiche.actif{flex-basis:88%;box-shadow:var(--sh-clair-2);outline-color:var(--ligne-or)}
  .sfiche.actif .sfiche-img{transform:scale(1.1)}
  .sfiche.actif .sfiche-desc,.sfiche.actif .sfiche-lien{opacity:1;transform:none}
  .sfiche:hover + .sfiche,.sfiche:has(+ .sfiche:hover){transform:none}
  /* MOBILE (2026-07-31) : le NUMÉRO doré devient un vrai élément visuel + la DESCRIPTION se lit
     confortablement au pouce. On relève aussi le NOM pour qu'il reste clairement dominant (hiérarchie
     num visuel > nom > desc). Num en top-gauche, corps en bas → aucun chevauchement ; hauteur de carte
     et scroll horizontal inchangés. Desktop (> 900px) NON touché (règles hors de ce media query). */
  .sfiche-num{font-size:2.6rem;letter-spacing:.05em;opacity:.96;padding-bottom:.05rem;border-bottom-width:3px}
  .sfiche-titre{font-size:1.5rem;line-height:1.06}
  .sfiche-desc{font-size:1.05rem;line-height:1.5}
}
@media (max-width:560px){
  .sfiche{flex-basis:82%}
  .sfiche.actif{flex-basis:92%}
  .sfiche-desc{font-size:1rem}   /* était .88rem — relevé pour la lecture au pouce (cf. bloc ≤900) */
}
/* reduced-motion : fiches statiques, égales, texte toujours lisible */
@media (prefers-reduced-motion:reduce){
  .sfiches{perspective:none}
  .sfiche,
  .sfiche:hover,.sfiche:focus-visible,.sfiche.actif,
  .sfiches:hover .sfiche{
    flex:1 1 0 !important;flex-grow:1 !important;
    transform:none !important;transition:none !important;
  }
  .sfiche-img,
  .sfiche:hover .sfiche-img,.sfiche.actif .sfiche-img{
    transform:scale(1.04) !important;transition:none !important;
  }
  .sfiche-desc,.sfiche-lien{opacity:1 !important;transform:none !important;transition:none !important}
  .sfiche:hover + .sfiche,.sfiche:has(+ .sfiche:hover){transform:none !important}
}

/* ============================================================
   CHANTIER 4 — RÉALISATIONS : images stock (exemples) + en-tête or + badges + décor de fond
   Interface N&B + or ; les PHOTOS restent EN COULEUR (SWAP client).
   ============================================================ */
/* a) en-tête simple et grand ; « réalisations » doré via .or (préservé par le JS decouperTitre).
   TITRE CENTRÉ (2026-07-26) : desktop + mobile. On recentre aussi le liseré (::after) et la croix (::before). */
#realisations .rea-titre{font-size:clamp(3rem,7vw,5.4rem);text-align:center}
#realisations .sec-head{justify-content:center;align-items:center;text-align:center}
#realisations .sec-head::before{left:calc(50% - 8px)}
#realisations .sec-head::after{left:50%;transform-origin:center;transform:translateX(-50%) scaleX(0)}
#realisations .sec-head.in::after{transform:translateX(-50%) scaleX(1)}
/* b) avant/après : vraies images — mécanique #ba1 (input / --x / .ba-avant clip) inchangée */
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
/* c) TUILES — bandeau LIQUID-GLASS en tête (CHANTIER 5) : nom du projet + badge service coloré.
   L'image passe en fond (position:absolute) ; en-tête verre dépoli pleine largeur en haut, puce
   secteur en bas. Lisibilité garantie (teinte sombre + blur + text-shadow) ; repli net si
   backdrop-filter non supporté. Le badge redevient un enfant inline du bandeau (plus d'absolu). */
.tuile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tuile-head{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.6rem .8rem;
  background:rgba(12,12,12,.34);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 14px -8px rgba(0,0,0,.55);
}
.tuile-nom{
  min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'Archivo',system-ui,sans-serif;font-weight:600;font-size:.92rem;line-height:1.15;
  letter-spacing:.01em;color:var(--os);text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.tuile-badge{
  flex:0 0 auto;background:var(--acc,#333);color:var(--acc-ink,#fff);
  font-family:'Archivo',system-ui,sans-serif;font-size:.64rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;padding:.42rem .72rem;border-radius:2px;white-space:nowrap;
}
.tuile-secteur{
  position:absolute;left:.8rem;bottom:.8rem;z-index:2;
  background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.10);border-radius:2px;padding:.3rem .55rem;color:var(--os);
}
.tuile-secteur small{font-family:'Archivo',system-ui,sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:inherit}
.tuile:hover .tuile-head{background:rgba(12,12,12,.42);border-bottom-color:rgba(255,255,255,.30)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tuile-head{background:rgba(10,10,10,.72)}
  .tuile-secteur{background:rgba(10,10,10,.78)}
}
@media (prefers-reduced-motion:reduce){
  .tuile-head,.tuile:hover .tuile-head{transition:none}
}
/* d) décor de fond = DEUX RAILS DE PLAN dans les marges (voir bloc « RAILS DE PLAN » plus bas) :
   quadrillage 2 échelles + ligne de cote graduée + croix + annotations + machinerie redistribuée. Vignette
   de profondeur conservée. Le centre (.wrap : tuiles + avant/après) reste totalement dégagé. */
/* La marquee retirée (CHANTIER 4) laissait le hero sombre collé à cette section sombre.
   Transition rétablie « façon plan » : fin filet doré centré qui s'estompe aux bords + un
   cran d'air supplémentaire en tête de section. Sobre, cohérent avec les liserés or du site. */
#realisations{isolation:isolate;padding-top:7.5rem}
#realisations::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;
  width:min(1200px,92vw);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ligne-or) 26%,var(--ligne-or) 74%,transparent);
}
#realisations>.wrap{position:relative;z-index:1}
.rea-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(130% 100% at 50% 20%,transparent 40%,rgba(0,0,0,.55) 100%)}

/* ============================================================
   RAILS DE PLAN — marges gauche/droite de #realisations
   Largeur = la GOUTTIÈRE réelle (marge entre le bord de section et la colonne .wrap) moins un petit jeu :
   le rail remplit la marge, son arête intérieure longe les photos sans jamais les toucher. Le centre reste
   dégagé. SVG inline + CSS génératif, zéro image. Sous 900px la marge disparaît → rails masqués.
   ============================================================ */
.rea-bg{--gutter:calc((100% - min(1200px,92vw)) / 2)}
/* FENÊTRE du rail : masque le débordement + fondu doux haut/bas (le contenu défile dessous) */
.rea-rail{
  position:absolute;top:0;bottom:0;width:calc(var(--gutter) - 6px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 92%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 92%,transparent 100%);
}
.rea-rail-l{left:0}
.rea-rail-r{right:0}
/* DÉFILEMENT CONTINU (2026-07-26) — remplace la parallaxe. Piste = 2 tuiles IDENTIQUES empilées ;
   translateY 0→-50% = exactement 1 tuile → boucle SEAMLESS sans saut. Rail droit MONTE, rail gauche DESCEND
   (reverse). Lent, ambiant, transform-only → 60fps. (Choix vertical plutôt qu'horizontal : voir DECISIONS.md.) */
.rail-track{position:absolute;top:0;left:0;right:0;will-change:transform}
.rea-rail-r .rail-track{animation:rail-roll 62s linear infinite}
.rea-rail-l .rail-track{animation:rail-roll 68s linear infinite reverse}
@keyframes rail-roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
/* TUILE : hauteur MULTIPLE DE 40px → grille (40/8px) + graduations continues au raccord (aucun saut).
   Quadrillage blueprint 2 échelles porté par la tuile pour défiler avec le reste. */
.rail-tile{
  position:relative;height:2200px;
  background-image:
    linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px;
  background-position:center top;
}
/* LIGNE DE COTE graduée à l'arête INTÉRIEURE (côté photos), portée par la tuile (défile) ; miroir à gauche. */
.rail-tile::before{
  content:"";position:absolute;top:0;bottom:0;width:15px;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.30) 0 1.4px,transparent 1.4px) left top/1.4px 100% no-repeat,
    repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0 1.4px,transparent 1.4px 40px) left top/13px 100%,
    repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 8px) left top/7px 100%;
}
.rea-rail-r .rail-tile::before{left:0}
.rea-rail-l .rail-tile::before{right:0;transform:scaleX(-1)}
/* MACHINERIE redistribuée le long des rails — opacité RELEVÉE (visible sans concurrencer les photos) */
.rail-mac{
  position:absolute;left:50%;transform:translateX(-50%);width:78%;height:auto;
  fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.17;
}
.rm-word{stroke:var(--or);opacity:.22;width:82%}
/* croix de repère « + » */
.rail-x{
  --c:rgba(255,255,255,.34);
  position:absolute;left:50%;width:12px;height:12px;margin-left:-6px;
  background:
    linear-gradient(var(--c),var(--c)) center/100% 1.2px no-repeat,
    linear-gradient(var(--c),var(--c)) center/1.2px 100% no-repeat;
}
/* annotations techniques discrètes + petites valeurs de cote */
.rail-note{
  position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:'Archivo',system-ui,sans-serif;font-size:.52rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.30);
}
.rail-val{color:rgba(231,211,161,.36)}      /* valeurs de cote : fin ton doré */
.rail-vert{writing-mode:vertical-rl;letter-spacing:.34em;transform:translateX(-50%) rotate(180deg);color:rgba(255,255,255,.24)}
/* MOBILE ≤900px : la gouttière disparaît (~16-40px) → rails masqués (voir DECISIONS.md). */
@media (max-width:900px){
  .rea-rail{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rail-track{animation:none !important}
}