/* Couche commune chargée après le <style> de chaque page : logo, rythme d'espacement et
   allègement visuel (l'orange est réservé aux actions et aux accents). */
:root{ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; }

/* ===== LOGO ===== */
.logo-mark{display:flex; align-items:center; gap:12px;}
.logo-mark svg{width:38px; height:38px; flex:none;}
/* ACIER au-dessus de LAB, comme dans la trousse de marque */
.logo-word{display:flex; flex-direction:column; font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:23px; letter-spacing:.06em; line-height:.92; color:var(--ink); white-space:nowrap;}
.logo-word b{font-weight:800; font-size:.8em; color:var(--orange);}
.logo-sm{gap:9px;}
.logo-sm svg{width:28px; height:28px;}
.logo-sm .logo-word{font-size:17px; color:var(--steel);}

/* ===== BASE ===== */
:focus-visible{outline:2px solid var(--orange); outline-offset:3px;}
.btn:hover{transform:none;}
.btn-sm{padding:10px 20px; font-size:14px; white-space:nowrap;}
.btn-ghost:hover{border-color:var(--steel); background:rgba(255,255,255,.03);}
.eyebrow{color:var(--steel); font-size:11.5px; letter-spacing:.16em;}
nav{padding:14px 24px;}
header{background:rgba(21,23,26,.92);}

/* Un seul fond : les sections sont séparées par un filet plutôt que par des bandes de couleur */
section{padding:var(--s7) 0;}
section + section{border-top:1px solid var(--line);}
#voir-produits, #materiaux, #contact, #produits{background:var(--dark);}
.section-head{margin-bottom:var(--s5);}
.section-head h2{margin-top:var(--s2);}

/* Étiquettes discrètes */
.teaser-card .t-tag, .mat-tag, .prod-tag{color:var(--muted);}

/* Cartes : fond légèrement relevé, survol sobre sans saut */
.teaser-card, .mat-card, .prod-card{background:var(--panel); border-color:var(--line);}
.teaser-card:hover, .mat-card:hover, .prod-card:hover{border-color:#4B5157; transform:none;}
.teaser-card:hover .t-go, .mat-cta:hover, .prod-link:hover{color:var(--orange);}

/* ===== ACCUEIL ===== */
.hero{min-height:88vh;}
.hero-stats{gap:var(--s4); margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--line);}
.stat-num{color:var(--ink); font-size:26px;}
.teaser-card{padding:var(--s3); gap:var(--s1);}
.teaser-card svg{height:56px; margin-bottom:var(--s1);}
.why-grid{gap:var(--s5) var(--s6);}
.why-num{color:var(--steel);}
.mat-body{gap:10px;}
.mat-more{border:0; border-top:1px solid var(--line); border-radius:0; padding:var(--s3) 0 0; margin-top:var(--s5);}
.mat-more.mat-dxf{border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:var(--s3); margin-top:var(--s3);}
label{font-family:'IBM Plex Sans',sans-serif; font-size:13px; font-weight:500;}
.contact-detail .lbl{width:84px;}

/* Illustration des marches (Stair Tread) */
.tread-art{display:block; width:100%; height:auto; align-self:flex-start;}
.prod-icon .tread-art{width:200px;}

/* Illustration des écrans décoratifs (panneau perforé) */
.screen-art{display:block; width:auto; height:56px; align-self:flex-start;}
.prod-icon .screen-art{height:72px;}
.teaser-card .screen-art{align-self:center;}

footer{padding:var(--s5) 0 var(--s4);}

@media (max-width:860px){
  section{padding:var(--s6) 0;}
  .hero{min-height:0; padding-top:112px;}
}
@media (max-width:640px){
  nav{padding:12px 16px;}
  nav .logo-mark svg{width:32px; height:32px;}
  .logo-word{font-size:20px;}
  .nav-cta{gap:10px;}
  .btn-sm{padding:9px 14px; font-size:13px;}
  .hero-visual{height:200px;}
  .hero-stats{gap:var(--s2) var(--s3);}
  .foot-row{flex-direction:column; align-items:flex-start;}
}