/* ============================================================
   BAM ÉCHAFAUDAGES — concept « Élévation »
   Palette verrouillée : #E5221F · #111111 · #F9F9F9 · #FFFFFF
   Règle : le rouge est toujours du contreventement, jamais un décor.
   ============================================================ */

:root{
  --rouge:#E5221F;
  --rouge-fonce:#B71A17;
  --noir:#111111;
  --gris:#F9F9F9;
  --blanc:#FFFFFF;

  --texte-2:rgba(17,17,17,.62);
  --texte-3:rgba(17,17,17,.60);
  --trait:rgba(17,17,17,.14);
  --trait-faible:rgba(17,17,17,.07);
  --trait-clair:rgba(255,255,255,.18);

  --shell:1560px;
  --gl:40px;   /* gouttière gauche — s'élargit pour loger la règle */
  --gr:40px;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --corps:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--blanc);
  color:var(--noir);
  font-family:var(--corps);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}

.saut{position:absolute;left:-9999px}
.saut:focus{left:8px;top:8px;z-index:999;background:var(--noir);color:#fff;padding:10px 16px;font-family:var(--mono);font-size:12px}

/* ---------- ossature typographique ---------- */
.mono{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
}
.d1,.d2,.d3{
  font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 800;
  font-weight:800;
  line-height:.92;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0;
}
.d1{font-size:clamp(38px,4.9vw,80px)}
.d2{font-size:clamp(34px,4.6vw,68px)}
.d3{font-size:clamp(22px,2.3vw,32px);line-height:1.02}

.lead{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--texte-2);max-width:46ch}
.txt{color:var(--texte-2);margin:0}

/* ---------- structure de page ---------- */
.shell{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gr) 0 var(--gl);
  position:relative;
  z-index:2;
}

/* les montants : grille de 4 travées, fixe, derrière tout */
.ossature{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.ossature__int{
  max-width:var(--shell);
  height:100%;
  margin:0 auto;
  background-image:repeating-linear-gradient(to right,
    var(--trait-faible) 0 1px, transparent 1px 25%);
  background-position:var(--gl) 0;
  background-size:calc(100% - var(--gl) - var(--gr)) 100%;
  background-repeat:no-repeat;
  transform:scaleY(0);
  transform-origin:top center;
  animation:descendre 1.15s var(--ease) .1s forwards;
}
@keyframes descendre{to{transform:scaleY(1)}}

/* ---------- la règle d'élévation : la signature ---------- */
.regle{
  position:fixed;
  left:0;top:0;bottom:0;
  width:120px;
  z-index:40;
  pointer-events:none;
  opacity:0;
  animation:apparait .8s var(--ease) 1s forwards;
}
/* neutre dérivé du noir : le seul ton qui tienne sur blanc comme sur noir */
.regle__ligne,.regle__grad{--neutre:rgba(138,138,138,.5)}
.regle__val{color:var(--noir);transition:color .3s}
.regle__val.sur-sombre{color:#FFFFFF}
.regle__cote.regle__val{color:rgba(17,17,17,.6)}
.regle__cote.regle__val.sur-sombre{color:rgba(255,255,255,.62)}
@keyframes apparait{to{opacity:1}}
.regle__ligne{
  position:absolute;
  left:40px;top:104px;bottom:40px;
  width:1px;
  background:var(--neutre);
}
.regle__grad{
  position:absolute;
  left:40px;top:104px;bottom:40px;
  width:10px;
  background-image:repeating-linear-gradient(to bottom,
    var(--neutre) 0 1px, transparent 1px 6.25%);
}
.regle__cote{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  position:absolute;
  left:56px;
  transform:translateY(-50%);
  white-space:nowrap;
}
.regle__curseur{
  position:absolute;
  left:29px;
  width:23px;height:2px;
  background:var(--rouge);
  transform:translateY(-1px);
  transition:top .08s linear;
}
.regle__lecture{
  position:absolute;
  left:56px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.04em;
  transform:translateY(-50%);
  transition:top .08s linear,color .3s;
  white-space:nowrap;
}

/* ---------- entête ---------- */
.entete{
  position:sticky;top:0;z-index:50;
  background:var(--noir);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.entete__int{
  display:flex;align-items:center;gap:32px;
  height:76px;
}
.marque{
  display:flex;align-items:center;gap:12px;
  font-family:var(--display);
  font-variation-settings:"wdth" 108,"wght" 800;
  font-size:16px;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
  color:#fff;
}
.marque__logo{width:50px;height:50px;flex:none}
.marque__long{font-variation-settings:"wdth" 92,"wght" 600;opacity:.72;font-size:14px;padding-left:2px}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  padding:6px 0;position:relative;color:rgba(255,255,255,.62);
  transition:color .2s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--rouge);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  padding:16px 26px;
  border:1px solid transparent;
  transition:background-color .22s,color .22s,border-color .22s;
  cursor:pointer;
}
.btn--rouge{background:var(--rouge);color:#fff}
.btn--rouge:hover{background:var(--rouge-fonce)}
.btn--fil{background:transparent;color:var(--noir);border-color:var(--noir)}
.btn--fil:hover{border-color:var(--rouge);color:var(--rouge)}
.btn--fil-clair{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--fil-clair:hover{border-color:#fff}
.btn--compact{padding:12px 18px}

/* ---------- bandes ---------- */
.bande{padding:112px 0;position:relative}
.bande--serree{padding:76px 0}
.bande--gris{background:var(--gris)}
.bande--noir{background:var(--noir);color:#fff}
.bande--noir .txt,.sol .txt{color:rgba(255,255,255,.6)}
.bande--noir .lead,.sol .lead{color:rgba(255,255,255,.66)}

/* la lisse : trait horizontal qui se trace à l'entrée */
.lisse{position:relative}
.lisse::before{
  content:"";position:absolute;left:var(--gl);right:var(--gr);top:0;height:1px;
  background:var(--trait);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease);
}
.lisse.vu::before{transform:scaleX(1)}
.bande--noir.lisse::before{background:var(--trait-clair)}

/* en-tête de section */
.chapeau{
  display:flex;align-items:baseline;gap:20px;
  margin-bottom:52px;
  flex-wrap:wrap;
}
.chapeau .mono{color:var(--texte-3)}
.bande--noir .chapeau .mono,.sol .chapeau .mono{color:rgba(255,255,255,.62)}

/* ---------- révélations ---------- */
.js .rev{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rev.vu{opacity:1;transform:none}
.rev-d1{transition-delay:.08s}
.rev-d2{transition-delay:.16s}
.rev-d3{transition-delay:.24s}

/* ============================================================
   HERO — +42.00, le sommet
   ============================================================ */
.hero{position:relative;padding-top:60px;padding-bottom:0}
.hero__grille{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:0;
  align-items:stretch;
}
.hero__texte{padding:0 48px 80px 0;display:flex;flex-direction:column;justify-content:center}
.hero__cote{
  display:flex;align-items:center;gap:14px;
  color:var(--texte-3);margin-bottom:30px;
}
.hero__cote span{display:block;width:34px;height:1px;background:var(--trait)}
.hero h1{margin-bottom:28px}
.hero__lead{margin-bottom:36px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.hero__visuel{
  position:relative;
  margin:0 calc(var(--gr) * -1) 0 0;
  min-height:min(72vh,720px);
  overflow:hidden;
  background:var(--gris);
}
.hero__visuel img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  transform:scale(1.06);
  transition:transform 1.4s var(--ease);
}
.hero__visuel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(17,17,17,0) 42%,rgba(17,17,17,.72) 100%);
}
.hero__legende{
  position:absolute;left:22px;bottom:20px;z-index:2;
  color:#fff;
}
.hero__legende b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;font-weight:500}
.hero__legende i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-top:5px}

/* la diagonale rouge : le contreventement qui franchit la frontière */
.brace{
  position:absolute;
  left:0;top:0;
  width:100%;height:100%;
  z-index:3;
  pointer-events:none;
}
.brace line{
  stroke:var(--rouge);
  stroke-width:2;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:tracer 1.5s var(--ease) 1.15s forwards;
}
@keyframes tracer{to{stroke-dashoffset:0}}

/* ---------- bandeau défilant ---------- */
.ticker{
  background:var(--noir);color:#fff;
  overflow:hidden;
  padding:15px 0;
  position:relative;z-index:2;
  border-top:1px solid var(--noir);
}
.ticker__piste{
  display:flex;width:max-content;
  animation:glisser 42s linear infinite;
}
.ticker__piste span{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:0 26px;white-space:nowrap;
  display:flex;align-items:center;gap:26px;
}
.ticker__piste span::after{content:"";width:5px;height:5px;background:var(--rouge);flex:none}
@keyframes glisser{to{transform:translateX(-50%)}}

/* ============================================================
   MÉTIERS
   ============================================================ */
.metiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait)}
.metier{background:var(--blanc);padding:0 0 40px}
.metier__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--gris);margin-bottom:30px}
.metier__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform .9s var(--ease),filter .6s}
.metier:hover .metier__img img{transform:scale(1.05);filter:grayscale(0) contrast(1)}
.metier__num{
  position:absolute;left:0;top:0;z-index:2;
  background:var(--noir);color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  padding:8px 13px;
}
.metier__corps{padding:0 30px}
.metier h3{margin:0 0 8px}
.metier__sous{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--rouge);margin:0 0 16px}
.metier ul{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--trait)}
.metier li{
  font-size:14.5px;color:var(--texte-2);
  padding:11px 0 11px 20px;position:relative;
  border-bottom:1px solid var(--trait-faible);
}
.metier li::before{
  content:"";position:absolute;left:0;top:19px;
  width:8px;height:1px;background:var(--rouge);
}

/* ============================================================
   NIVEAUX — le déroulé du chantier
   ============================================================ */
.niveaux{border-top:1px solid var(--trait-clair)}
.niveau{
  display:grid;
  grid-template-columns:132px 1fr 1.15fr;
  gap:30px;
  padding:38px 0;
  border-bottom:1px solid var(--trait-clair);
  align-items:start;
  position:relative;
  transition:background-color .4s;
}
.niveau:hover{background:rgba(255,255,255,.03)}
.niveau__num{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:rgba(255,255,255,.62);
  white-space:nowrap;
  padding-top:7px;
  margin:0;
}
.niveau__num b{
  color:var(--rouge);font-weight:500;
}
.niveau h3{margin:0;font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 700;font-weight:700;font-size:clamp(21px,2vw,29px);line-height:1.05;text-transform:uppercase;letter-spacing:-.01em}
.niveau p{margin:0;color:rgba(255,255,255,.6);font-size:15.5px;max-width:52ch}

/* ============================================================
   CHANTIERS
   ============================================================ */
.piste{
  display:flex;gap:1px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:2px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.piste::-webkit-scrollbar{height:3px}
.piste::-webkit-scrollbar-thumb{background:var(--noir)}
.piste::-webkit-scrollbar-track{background:var(--trait-faible)}
.chantier{
  margin:0;
  flex:0 0 clamp(228px,20vw,304px);
  scroll-snap-align:start;
  position:relative;
  background:var(--gris);
}
.chantier img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:filter .5s;
}
.chantier:hover img{filter:grayscale(0)}
.chantier figcaption{
  position:absolute;left:0;bottom:0;right:0;
  background:linear-gradient(to top,rgba(17,17,17,.86),transparent);
  color:#fff;padding:34px 16px 14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
}

.communes{
  display:flex;flex-wrap:wrap;gap:0;
  margin-top:56px;
  border-top:1px solid var(--trait);
}
.communes li{
  list-style:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:13px 22px 13px 0;
  color:var(--texte-2);
  display:flex;align-items:center;gap:22px;
}
.communes li::after{content:"";width:4px;height:4px;background:var(--trait);flex:none}
.communes li:last-child::after{display:none}

/* ============================================================
   RAISONS
   ============================================================ */
.raisons{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--trait);border:1px solid var(--trait)}
.raison{background:var(--blanc);padding:36px 30px 40px}
.raison img{width:38px;height:38px;object-fit:contain;margin-bottom:24px}
.raison h3{
  margin:0 0 12px;font-size:17px;font-weight:500;
  font-family:var(--corps);letter-spacing:-.005em;
}
.raison p{margin:0;font-size:14.5px;color:var(--texte-2);line-height:1.55}

/* ---------- références ---------- */
.refs{display:flex;flex-wrap:wrap;align-items:center;gap:52px;margin-top:40px}
.refs img{height:46px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.42;transition:opacity .3s,filter .3s}
.refs img:hover{opacity:1;filter:grayscale(0)}

/* ============================================================
   SOL — le CTA final
   ============================================================ */
.sol{background:var(--noir);color:#fff;position:relative;overflow:hidden}
.sol__grille{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:end}
.sol h2{margin:0 0 26px}
.sol__tels{display:flex;flex-direction:column;gap:2px}
.sol__tel{
  display:flex;align-items:baseline;justify-content:space-between;gap:22px;
  padding:19px 0;
  border-bottom:1px solid var(--trait-clair);
  font-family:var(--display);
  font-variation-settings:"wdth" 108,"wght" 700;
  font-weight:700;
  font-size:clamp(22px,2.3vw,31px);
  letter-spacing:-.01em;
  transition:color .25s;
}
.sol__tel:first-child{border-top:1px solid var(--trait-clair)}
.sol__tel span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.62);font-variation-settings:normal;font-weight:400}
.sol__tel:hover{color:var(--rouge)}
.sol__actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
.sol__cote{
  display:flex;align-items:center;gap:14px;
  color:rgba(255,255,255,.62);margin-bottom:30px;
}
.sol__cote span{display:block;width:34px;height:1px;background:var(--rouge)}

/* ---------- pied ---------- */
.pied{background:var(--noir);color:rgba(255,255,255,.58);padding:0 0 46px;font-size:14px}
.pied__grille{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;
  padding-top:56px;border-top:1px solid var(--trait-clair);
}
.pied h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin:0 0 18px;font-weight:500;
}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pied a:hover{color:#fff}
.pied__slogan{
  font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 700;font-weight:700;
  font-size:clamp(19px,1.7vw,24px);line-height:1.1;text-transform:uppercase;
  color:#fff;margin:0 0 16px;max-width:14ch;
}
.pied__bas{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:52px;padding-top:22px;border-top:1px solid var(--trait-clair);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* la règle a besoin de sa propre gouttière : on ne la superpose jamais au texte */
@media (min-width:1181px){
  :root{--gl:132px}
}
@media (max-width:1180px){
  .regle{display:none}
}
@media (max-width:1080px){
  .metiers{grid-template-columns:1fr}
  .raisons{grid-template-columns:1fr 1fr}
  .hero__grille{grid-template-columns:1fr}
  .hero__texte{padding:0 0 60px}
  .hero__visuel{min-height:0;aspect-ratio:16/10}
  .sol__grille{grid-template-columns:1fr;gap:46px}
  .brace{display:none}
}
@media (max-width:480px){
  .marque__long{display:none}
}
@media (max-width:820px){
  :root{--gl:22px;--gr:22px}
  body{font-size:16px}
  .bande{padding:76px 0}
  .bande--serree{padding:56px 0}
  .nav{display:none}
  .entete__int{height:64px;gap:16px}
  .marque{font-size:14px;gap:9px}
  .btn{white-space:nowrap}
  .btn--compact{padding:11px 14px;font-size:10.5px;letter-spacing:.11em}
  .ossature__int{
    background-image:repeating-linear-gradient(to right,
      var(--trait-faible) 0 1px, transparent 1px 50%);
  }
  .niveau{grid-template-columns:1fr;gap:12px;padding:28px 0}
  .niveau__num{padding-top:0}
  .raisons{grid-template-columns:1fr}
  .pied__grille{grid-template-columns:1fr;gap:38px}
  .chapeau{margin-bottom:38px;gap:10px}
  .hero__actions{gap:10px}
  .hero__actions .btn,.sol__actions .btn{flex:1 1 100%;justify-content:center}
  .refs{gap:32px}
  .refs img{height:36px}
}

/* ============================================================
   MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-delay:0ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .ossature__int{transform:none;opacity:1}
  .regle{opacity:1}
  .rev{opacity:1;transform:none}
  .lisse::before{transform:scaleX(1)}
  .brace line{stroke-dashoffset:0}
  .ticker__piste{animation:none}
}

/* ════════════════════════════════════════════════════════════
   AJOUTS MULTIPAGE — header noir, menu mobile, pages internes,
   services, blog, article, formulaire, FAQ, prix
   ════════════════════════════════════════════════════════════ */

html{scroll-behavior:smooth}
:target{scroll-margin-top:96px}

/* ---------- menu mobile (burger + tiroir) ---------- */
.burger{
  display:none;margin-left:auto;
  width:44px;height:44px;border:1px solid rgba(255,255,255,.22);
  background:transparent;cursor:pointer;position:relative;flex:none;
}
.burger span,.burger span::before,.burger span::after{
  content:"";position:absolute;left:11px;width:22px;height:1.5px;background:#fff;
  transition:transform .3s var(--ease),opacity .2s;
}
.burger span{top:50%}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

.tiroir{
  position:fixed;inset:0 0 0 auto;width:min(86vw,360px);z-index:60;
  background:var(--noir);color:#fff;
  transform:translateX(100%);transition:transform .42s var(--ease);
  padding:96px 32px 40px;display:flex;flex-direction:column;gap:4px;
  border-left:1px solid rgba(255,255,255,.12);
}
.tiroir.ouvert{transform:none}
.tiroir a{
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72);padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1);
}
.tiroir a[aria-current="page"]{color:#fff}
.tiroir a[aria-current="page"]::before{content:"— ";color:var(--rouge)}
.tiroir .btn{margin-top:24px;justify-content:center}
.voile{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55;opacity:0;visibility:hidden;transition:opacity .3s}
.voile.ouvert{opacity:1;visibility:visible}
@media (max-width:820px){
  .burger{display:block}
}

/* ---------- en-tête de page interne ---------- */
.tete{
  background:var(--noir);color:#fff;position:relative;
  padding:118px 0 64px;overflow:hidden;
}
.tete--gris{background:var(--gris);color:var(--noir)}
.tete__cote{display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.6);margin-bottom:26px}
.tete--gris .tete__cote{color:var(--texte-3)}
.tete__cote span{display:block;width:34px;height:1px;background:var(--rouge)}
.tete h1{margin:0 0 22px}
.tete .lead{color:rgba(255,255,255,.68);max-width:60ch}
.tete--gris .lead{color:var(--texte-2)}

/* fil d'ariane */
.fil{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 30px;display:flex;gap:10px;flex-wrap:wrap}
.tete--gris .fil{color:var(--texte-3)}
.fil a{color:inherit}.fil a:hover{color:var(--rouge)}
.fil span{color:var(--rouge)}

/* ---------- services : rangées alternées ---------- */
.service{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--trait);
}
.service__media{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--gris)}
.service__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform 1s var(--ease),filter .6s}
.service:hover .service__media img{transform:scale(1.04);filter:grayscale(0)}
.service__num{position:absolute;left:0;top:0;background:var(--noir);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.16em;padding:8px 13px}
.service__corps{padding:52px clamp(24px,4vw,64px);display:flex;flex-direction:column;justify-content:center}
.service__corps h2{margin:0 0 6px}
.service__sur{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--rouge);margin:0 0 20px}
.service ul{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--trait)}
.service li{font-size:15px;color:var(--texte-2);padding:12px 0 12px 22px;position:relative;border-bottom:1px solid var(--trait-faible)}
.service li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:1px;background:var(--rouge)}
.service:nth-child(even) .service__media{order:2}
@media (max-width:900px){
  .service{grid-template-columns:1fr}
  .service:nth-child(even) .service__media{order:0}
  .service__media{aspect-ratio:16/10}
  .service__corps{padding:40px 0}
}

/* ---------- prix / transparence ---------- */
.prix{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait);border:1px solid var(--trait)}
.prix__c{background:var(--blanc);padding:36px 30px}
.prix__c b{display:block;font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 800;font-size:clamp(30px,3vw,44px);line-height:1;letter-spacing:-.02em}
.prix__c b i{font-style:normal;font-size:15px;color:var(--texte-3);font-variation-settings:"wdth" 100,"wght" 500;letter-spacing:0}
.prix__c p{margin:12px 0 0;font-size:14.5px;color:var(--texte-2)}
.prix__c .mono{color:var(--rouge);display:block;margin-bottom:16px}
@media (max-width:820px){.prix{grid-template-columns:1fr}}

/* ---------- BLOG : journal ---------- */
.journal{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait);border:1px solid var(--trait)}
.post{background:var(--blanc);display:flex;flex-direction:column;padding:0 0 32px;transition:background-color .3s}
.post:hover{background:var(--gris)}
.post__img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--gris);margin-bottom:26px}
.post__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform .9s var(--ease),filter .6s}
.post:hover .post__img img{transform:scale(1.05);filter:grayscale(0)}
.post__cat{position:absolute;left:0;top:0;background:var(--rouge);color:#fff;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;padding:7px 12px}
.post__corps{padding:0 30px;display:flex;flex-direction:column;flex:1}
.post__meta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-3);margin:0 0 12px}
.post h3{font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;font-weight:700;font-size:20px;line-height:1.1;letter-spacing:-.01em;margin:0 0 12px}
.post p{margin:0 0 20px;font-size:14.5px;color:var(--texte-2);line-height:1.55}
.post__lire{margin-top:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--noir);display:inline-flex;align-items:center;gap:9px}
.post__lire::after{content:"";width:16px;height:1px;background:var(--rouge);transition:width .25s}
.post:hover .post__lire::after{width:28px}
@media (max-width:980px){.journal{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.journal{grid-template-columns:1fr}}

/* aperçu journal sur l'accueil : 3 en ligne, style léger */
.apercu{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
@media (max-width:900px){.apercu{grid-template-columns:1fr}}

/* ---------- ARTICLE (prose) ---------- */
.article{max-width:760px;margin:0 auto}
.article__media{aspect-ratio:16/9;overflow:hidden;background:var(--gris);margin-bottom:0}
.article__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.03)}
.prose{font-size:18px;line-height:1.72;color:#26282b}
.prose > *+*{margin-top:1.35em}
.prose h2{font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 700;font-weight:700;font-size:clamp(24px,2.4vw,32px);line-height:1.1;text-transform:none;letter-spacing:-.01em;margin-top:2em}
.prose h3{font-size:20px;font-weight:600;margin-top:1.6em}
.prose a{color:var(--rouge);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.2em;margin-top:1em}
.prose li{margin:.5em 0}
.prose strong{color:var(--noir)}
.prose blockquote{border-left:3px solid var(--rouge);margin:1.6em 0;padding:6px 0 6px 24px;color:var(--texte-2);font-size:19px}
.encadre{background:var(--gris);border:1px solid var(--trait);padding:26px 28px;font-size:15.5px}
.encadre b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge);display:block;margin-bottom:10px}
.reponse{background:var(--noir);color:#fff;padding:30px 32px}
.reponse b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge);display:block;margin-bottom:12px}
.reponse p{margin:0;font-size:19px;line-height:1.55}

/* ---------- FORMULAIRE devis ---------- */
.formulaire{background:var(--blanc);border:1px solid var(--trait);padding:clamp(26px,4vw,48px)}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.champ{display:flex;flex-direction:column;gap:8px}
.champ--plein{grid-column:1/-1}
.champ label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-2)}
.champ label i{color:var(--rouge);font-style:normal}
.champ input,.champ select,.champ textarea{
  font-family:var(--corps);font-size:16px;color:var(--noir);
  padding:14px 15px;border:1px solid var(--trait);background:var(--blanc);
  border-radius:0;transition:border-color .2s,box-shadow .2s;width:100%;
}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(229,34,31,.12)}
.formulaire__pied{margin-top:28px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.consentement{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--texte-2);line-height:1.5;max-width:52ch}
.consentement input{margin-top:3px;accent-color:var(--rouge);width:16px;height:16px;flex:none}
.note-rgpd{font-size:12.5px;color:var(--texte-3);line-height:1.55;margin:22px 0 0}
.note-rgpd a{color:var(--texte-2);text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.champs{grid-template-columns:1fr}.formulaire__pied{flex-direction:column;align-items:stretch}}

/* rangée rassurance sous un titre */
.rassure{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:22px}
.rassure span{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-2)}
.rassure span::before{content:"";width:7px;height:7px;background:var(--rouge);flex:none}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 600;font-weight:600;font-size:clamp(17px,1.7vw,20px);letter-spacing:-.005em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:30px;width:12px;height:12px;background:
  linear-gradient(var(--rouge),var(--rouge)) center/12px 1.5px no-repeat,
  linear-gradient(var(--rouge),var(--rouge)) center/1.5px 12px no-repeat;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(90deg);opacity:.5}
.faq details[open] summary::after{background:linear-gradient(var(--rouge),var(--rouge)) center/12px 1.5px no-repeat}
.faq p{margin:0 0 24px;color:var(--texte-2);max-width:70ch;font-size:15.5px}

/* utilitaires */
.centre{text-align:center}
.mesure{max-width:62ch}
.mt-s{margin-top:22px}.mt-m{margin-top:40px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--trait);border:1px solid var(--trait)}
.duo > *{background:var(--blanc);padding:40px clamp(24px,3vw,44px)}
@media (max-width:820px){.duo{grid-template-columns:1fr}}

@media (max-width:820px){.entete .btn--compact{display:none}}

/* ════════════════════════════════════════════════════════════
   ITÉRATION 2 — niveau à bulle liquide + traits rouges animés
   ════════════════════════════════════════════════════════════ */

/* niveau à bulle (outil), posé sur la règle d'élévation */
.niveau-outil{
  position:fixed;left:15px;bottom:110px;z-index:41;
  pointer-events:none;opacity:0;
  animation:apparait .8s var(--ease) 1.25s forwards;
}
@media (max-width:1180px){.niveau-outil{display:none}}
.niveau-vial{
  position:relative;width:88px;height:24px;
  border:1px solid rgba(138,138,138,.55);
  border-radius:13px;
  background:rgba(138,138,138,.08);
  overflow:hidden;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.niveau-vial::before,.niveau-vial::after{
  content:"";position:absolute;top:5px;bottom:5px;width:1px;background:rgba(138,138,138,.6);
}
.niveau-vial::before{left:calc(50% - 10px)}
.niveau-vial::after{left:calc(50% + 10px)}
.niveau-bulle{
  position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #ff7a70 0%, var(--rouge) 55%, #a8140d 100%);
  box-shadow:0 0 10px rgba(229,34,31,.55), inset 0 1px 2px rgba(255,255,255,.55);
  transform:translate(-50%,-50%);
  will-change:transform;
}

/* traits rouges qui se tracent sur les photos (par endroit) */
.metier__img::after{
  content:"";position:absolute;left:0;bottom:22px;height:2px;width:44%;
  background:var(--rouge);z-index:3;
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) .25s;
}
.metier.vu .metier__img::after{transform:scaleX(1)}

.service__media::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:2px;
  background:var(--rouge);z-index:3;
  transform:scaleY(0);transform-origin:top;
  transition:transform 1s var(--ease) .2s;
}
.service.vu .service__media::after{transform:scaleY(1)}

.post__img::after{
  content:"";position:absolute;right:0;bottom:0;width:36px;height:2px;
  background:var(--rouge);z-index:3;
  transform:scaleX(0);transform-origin:right;
  transition:transform .7s var(--ease) .2s;
}
.post.vu .post__img::after{transform:scaleX(1)}

/* la grande photo d'article reçoit aussi son trait */
.article__media{position:relative}
.article__media::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
  background:var(--rouge);z-index:3;
  animation:trait-article 1.1s var(--ease) .3s forwards;
}
@keyframes trait-article{to{width:38%}}

@media (prefers-reduced-motion:reduce){
  .metier__img::after,.service__media::after,.post__img::after{transform:none}
  .article__media::after{width:38%;animation:none}
}

/* champs de dimensions générés selon le nombre de façades */
.dims-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dims-wrap:empty{display:none}
@media (max-width:640px){.dims-wrap{grid-template-columns:1fr}}

/* champs conditionnels : upload photo + champs professionnel */
.champ label .opt{font-family:var(--corps);text-transform:none;letter-spacing:0;font-size:12px;color:var(--texte-3)}
.champ-fichier{width:100%;padding:11px 14px;font-family:var(--mono);font-size:12px;color:var(--texte-2);background:var(--gris);border:1px solid var(--trait);cursor:pointer}
.champ-fichier::file-selector-button{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-right:14px;padding:9px 14px;border:1px solid var(--noir);background:#fff;color:var(--noir);cursor:pointer;transition:background-color .2s,color .2s}
.champ-fichier::file-selector-button:hover{background:var(--noir);color:#fff}
.pro-grille{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pro-grille[hidden]{display:none}
@media (max-width:640px){.pro-grille{grid-template-columns:1fr}}

/* ---------- galerie de réalisations (masonry) ---------- */
.galerie{column-count:4;column-gap:2px}
.galerie .gcell{break-inside:avoid;margin:0 0 2px;position:relative;background:var(--gris);overflow:hidden}
.galerie img{width:100%;display:block;filter:grayscale(1) contrast(1.04);transition:filter .5s,transform .9s var(--ease)}
.galerie .gcell:hover img{filter:none;transform:scale(1.03)}
.galerie figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 11px;color:#fff;
  background:linear-gradient(to top,rgba(17,17,17,.84),transparent);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.galerie .gcell:hover figcaption{opacity:1;transform:none}
@media (max-width:1080px){.galerie{column-count:3}}
@media (max-width:720px){.galerie{column-count:2}}

/* ---------- niveau à bulle : rendu "vrai" niveau à fluide vert ---------- */
.niveau-vial{
  width:94px;height:26px;border-radius:13px;overflow:hidden;
  border:1px solid rgba(0,0,0,.38);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.38), rgba(0,0,0,.20)),
    linear-gradient(to right,
      #2f9e4f 0%, #2f9e4f 37%,
      #bfe36a 42%, #eaf59b 50%, #bfe36a 58%,
      #2f9e4f 63%, #2f9e4f 100%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.42), inset 0 -3px 5px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.2);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.niveau-vial::before,.niveau-vial::after{
  content:"";position:absolute;top:3px;bottom:3px;width:1.5px;background:rgba(0,0,0,.6);z-index:2;
}
.niveau-vial::before{left:calc(50% - 11px)}
.niveau-vial::after{left:calc(50% + 11px)}
.niveau-bulle{
  width:22px;height:15px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 32%, rgba(255,255,255,.98), rgba(224,255,232,.5) 62%, rgba(255,255,255,.12) 100%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.9), inset 0 -2px 3px rgba(0,90,40,.22), 0 1px 1px rgba(0,0,0,.12);
}

/* ════════════════════════════════════════════════════════════
   ITÉRATION 3 — fix champ caché, accents rouges, ergonomie form
   ════════════════════════════════════════════════════════════ */

/* fix : un champ conditionnel [hidden] doit rester caché (sinon .champ{display:flex} l'emporte) */
.champ[hidden]{display:none}

/* sous-titres de section dans le formulaire */
.form-sec{grid-column:1/-1;margin:10px 0 -4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge);display:flex;align-items:center;gap:12px}
.form-sec::after{content:"";flex:1;height:1px;background:var(--trait)}
.form-sec:first-child{margin-top:0}

/* accents rouges légers = dynamisme (tick sous les sur-titres + amorce des lisses) */
.chapeau .mono::before{content:"";display:inline-block;width:0;height:2px;background:var(--rouge);vertical-align:middle;transition:width .6s var(--ease) .15s,margin-right .6s var(--ease) .15s}
.chapeau.vu .mono::before{width:16px;margin-right:12px}
.lisse::after{content:"";position:absolute;left:var(--gl);top:0;width:46px;height:2px;background:var(--rouge);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .12s;z-index:1}
.lisse.vu::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.chapeau .mono::before{width:16px;margin-right:12px}.lisse::after{transform:none}}

/* ════════════════════════════════════════════════════════════
   ITÉRATION 4 — taille photo article, logo animé sur le hero
   ════════════════════════════════════════════════════════════ */

/* photo d'article : hauteur raisonnable et largeur contenue (elle était plein cadre) */
.article__media{max-width:960px;margin:0 auto;height:clamp(200px,30vw,360px);aspect-ratio:auto}
.article__media img{height:100%}

/* logo officiel BAM animé sur la photo d'accueil (montage niveau par niveau + trait rouge) */
.hero__logo{position:absolute;right:24px;bottom:22px;z-index:4;width:clamp(84px,7vw,120px)}
.hero__logo img{width:100%;height:auto;display:block;filter:drop-shadow(0 3px 16px rgba(0,0,0,.55));clip-path:inset(100% 0 0 0);animation:logo-montage 1.15s var(--ease) 1.4s forwards}
.hero__logo span{display:block;height:2px;width:0;background:var(--rouge);margin-top:9px;animation:logo-trait .5s var(--ease) 2.45s forwards}
@keyframes logo-montage{to{clip-path:inset(0 0 0 0)}}
@keyframes logo-trait{to{width:100%}}
@media (max-width:1080px){.hero__logo{right:16px;bottom:16px;width:84px}}
@media (prefers-reduced-motion:reduce){.hero__logo img{clip-path:none;animation:none}.hero__logo span{width:100%;animation:none}}

/* photos d'articles encore plus compactes */
.article__media{max-width:820px;height:clamp(160px,19vw,270px)}

/* logo hero beaucoup plus grand */
.hero__logo{width:clamp(150px,17vw,260px);right:30px;bottom:28px}
.hero__logo span{margin-top:12px}
@media (max-width:1080px){.hero__logo{width:132px;right:18px;bottom:16px}}

/* ════════════════════════════════════════════════════════════
   ITÉRATION 5 — dessins techniques SVG (couvertures + détail)
   ════════════════════════════════════════════════════════════ */
.schema{background:var(--gris);display:block;overflow:hidden}
.schema svg{display:block;width:100%;height:100%}
.article__media.schema{height:clamp(240px,28vw,340px);border:1px solid var(--trait)}
.post__img.schema{background:var(--gris)}
.schema--inline{max-width:560px;margin:2.6em auto 1em;border:1px solid var(--trait);padding:20px 10px 8px;position:relative}
.schema--inline svg{height:300px}
.schema__cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-3);position:absolute;top:13px;left:16px}
/* animation très légère : fondu + tracé du contreventement */
.schema svg{opacity:0;animation:schema-in .7s var(--ease) .15s forwards}
@keyframes schema-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.schema .brace-red{stroke-dasharray:520;stroke-dashoffset:520;animation:brace-draw 1.15s var(--ease) .45s forwards}
@keyframes brace-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.schema svg{opacity:1;animation:none}.schema .brace-red{stroke-dashoffset:0;animation:none}}

/* ════════════════════════════════════════════════════════════
   ITÉRATION 6 — logos plus grands, + de rouge au scroll, schémas duo
   ════════════════════════════════════════════════════════════ */

/* header : logo agrandi */
.entete__int{height:88px}
.marque__logo{width:66px;height:66px}

/* logo hero : encore plus grand */
.hero__logo{width:clamp(200px,24vw,360px);right:34px;bottom:30px}

/* + d'accents rouges au scroll */
.chapeau .d2{position:relative}
.chapeau .d2::after{content:"";position:absolute;left:0;bottom:-16px;height:3px;width:0;background:var(--rouge);transition:width .8s var(--ease) .3s}
.chapeau.vu .d2::after{width:66px}
.tete h1{position:relative}
.tete h1::after{content:"";position:absolute;left:0;bottom:-18px;height:3px;width:0;background:var(--rouge);animation:tete-line .85s var(--ease) .55s forwards}
@keyframes tete-line{to{width:74px}}
.niveau{position:relative}
.niveau::before{content:"";position:absolute;left:0;top:0;width:0;height:2px;background:var(--rouge);transition:width .7s var(--ease) .2s}
.niveau.rev.vu::before,.niveaux .niveau:hover::before{width:40px}
.duo > *{position:relative}
.duo.rev.vu > *::before{content:"";position:absolute;left:0;top:0;width:34px;height:2px;background:var(--rouge)}

/* schémas illustrant vision / mission */
.schema--duo{margin-top:24px;border:1px solid var(--trait);background:var(--gris)}
.schema--duo svg{height:210px}

@media (prefers-reduced-motion:reduce){
  .chapeau .d2::after,.tete h1::after,.niveau::before{width:auto;transition:none;animation:none}
}

/* ============================================================
   Calque d'intégration WordPress (ajouté à bam.css d'origine)
   ============================================================ */
/* les titres reprennent l'encre de leur bande : le thème force sinon une couleur sombre */
.wp-site-blocks h1,.wp-site-blocks h2,.wp-site-blocks h3,.wp-site-blocks h4,.wp-site-blocks h5,.wp-site-blocks h6{color:inherit}
/* la V2 fournit son propre en-tête et son propre pied */
/* masquer l'en-tête et le pied DU THÈME, pas ceux de la V2 :
   depuis que la V2 les fournit via le gabarit, ils sont eux aussi
   enfants directs de .wp-site-blocks. */
.wp-site-blocks>header:not(.entete),.wp-site-blocks>footer:not(.pied),.wp-block-template-part,.site-header,.site-footer{display:none!important}
/* s'affranchir de la largeur contrainte du gabarit */
.wp-block-post-content,.entry-content,.is-layout-constrained,.is-layout-flow{margin:0!important;max-width:none!important;padding:0!important}

/* les schémas techniques sont servis en fichiers .svg : neutraliser le filtre des photos */
.schema img{width:100%;height:100%;object-fit:contain;filter:none!important;display:block}
.post__img.schema img{object-fit:contain;filter:none!important;transform:none!important}
.schema--duo img{height:210px;width:100%;object-fit:contain}


/* ---- habillage V2 du formulaire Jetpack (bloc natif conservé) ---- */
.v2-devis{background:var(--gris);padding:200px var(--gr) 200px var(--gl);position:relative;z-index:2;border-top:1px solid var(--trait)}
.v2-devis .wp-block-jetpack-contact-form{max-width:900px;margin:0 auto;background:var(--blanc);border:1px solid var(--trait);border-top:3px solid var(--rouge);padding:clamp(26px,4vw,52px)}
.v2-devis form{margin:0}

/* indicateur d'étapes */
.v2-devis .wp-block-jetpack-form-progress-indicator{margin:0 0 34px}
.v2-devis .jetpack-form-progress-indicator-steps{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge);margin-bottom:10px}
.v2-devis .jetpack-form-progress-indicator-progress{height:2px;background:var(--trait);border-radius:0}
.v2-devis .jetpack-form-progress-indicator-progress::-webkit-progress-bar{background:var(--trait)}
.v2-devis .jetpack-form-progress-indicator-progress::-webkit-progress-value{background:var(--rouge)}
.v2-devis .jetpack-form-progress-indicator-progress::-moz-progress-bar{background:var(--rouge)}

/* libellés */
.v2-devis .grunion-field-label,.v2-devis .wp-block-jetpack-label label,.v2-devis legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-2);font-weight:500;margin-bottom:8px;display:block}
.v2-devis .grunion-label-required{color:var(--rouge)}

/* champs */
.v2-devis input[type=text],.v2-devis input[type=email],.v2-devis input[type=tel],.v2-devis input[type=url],.v2-devis input[type=number],.v2-devis input[type=date],.v2-devis select,.v2-devis textarea{font-family:var(--corps);font-size:16px;color:var(--noir);padding:14px 15px;border:1px solid var(--trait);background:var(--blanc);border-radius:0;width:100%;box-shadow:none;transition:border-color .2s,box-shadow .2s}
.v2-devis textarea{min-height:130px;resize:vertical;line-height:1.55}
.v2-devis input:focus,.v2-devis select:focus,.v2-devis textarea:focus{outline:none;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(229,34,31,.12)}
.v2-devis .contact-form__select-wrapper{position:relative}

/* cases et boutons radio */
.v2-devis input[type=checkbox],.v2-devis input[type=radio]{accent-color:var(--rouge);width:16px;height:16px;margin-right:10px}
.v2-devis .grunion-checkbox-multiple-options label,.v2-devis .grunion-radio-options label{font-family:var(--corps);font-size:15px;text-transform:none;letter-spacing:0;color:var(--noir);display:flex;align-items:flex-start;gap:4px;padding:9px 0}

/* espacement des étapes */
.v2-devis .wp-block-jetpack-form-step{display:flex;flex-direction:column;gap:22px}
.v2-devis .grunion-field-wrap{margin:0}

/* zone de dépôt de fichiers */
.v2-devis .jetpack-form-file-field__dropzone{border:1px dashed var(--trait);background:var(--gris);border-radius:0;transition:border-color .2s}
.v2-devis .jetpack-form-file-field__dropzone:hover{border-color:var(--rouge)}

/* boutons de navigation */
.v2-devis .wp-block-button__link,.v2-devis button[type=submit]{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;padding:16px 26px;border-radius:0;border:1px solid var(--rouge);background:var(--rouge);color:#fff;cursor:pointer;transition:background-color .22s,border-color .22s,color .22s}
.v2-devis .wp-block-button__link:hover,.v2-devis button[type=submit]:hover{background:var(--rouge-fonce);border-color:var(--rouge-fonce)}
.v2-devis .wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--noir);border-color:var(--noir)}
.v2-devis .wp-block-button.is-style-outline .wp-block-button__link:hover{color:var(--rouge);border-color:var(--rouge);background:transparent}
.v2-devis .wp-block-jetpack-form-step-navigation{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;padding-top:28px;border-top:1px solid var(--trait)}

/* messages d'erreur */
.v2-devis .contact-form__input-error,.v2-devis .contact-form__error{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--rouge)}

/* titres injectés par le bloc */
.v2-devis h2,.v2-devis h3{font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 700;font-weight:700;letter-spacing:-.01em}

@media (max-width:820px){.v2-devis{padding:116px var(--gr) 124px var(--gl)}}

/* ============================================================
   Correctifs du 27/08 (retours Rémy)
   ============================================================ */
/* 2 - liens du pied en blanc (les styles globaux du thème les passaient en rouge) */
.pied a{color:#fff}
.pied a:hover{color:var(--rouge)}
/* 4 - règle d'élévation et niveau à bulle réservés à la page d'accueil */
body:not(.home) .regle,body:not(.home) .niveau-outil{display:none!important}
/* 5 - badges de réassurance lisibles sur les bandes noires */
.tete .rassure span{color:rgba(255,255,255,.72)}
/* 3 - cotes techniques conservées pour le JS de la règle, jamais affichées
   (l'attribut hidden ne suffit pas : .hero__cote span et consorts posent un display) */
.cote-tech{display:none!important}
/* 7 - mobile : tous les champs du formulaire en pleine largeur (les width 50 % de
   Jetpack rendaient la saisie inconfortable sous 820 px) */
@media (max-width:820px){
  .v2-devis .grunion-field-width-50-wrap,
  .v2-devis .grunion-field-width-25-wrap{width:100%!important;max-width:100%!important;flex-basis:100%!important;float:none!important}
}