/* BFM Groep — feuille unique du site (design 1). Valeurs : /tokens.css. */
@import url(/tokens.css);
@font-face{font-family:'Bricolage';src:url(/fonts/BricolageGrotesque-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Bricolage';src:url(/fonts/BricolageGrotesque-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Bricolage';src:url(/fonts/BricolageGrotesque-ExtraBold.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Bricolage Condensed';src:url(/fonts/BricolageGrotesque48ptCondensed-ExtraBold.woff2) format('woff2');font-weight:800;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light}
body{margin:0;font-family:var(--ft);color:var(--noir);background:var(--fond);font-size:var(--t-corps);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
a{color:inherit}
.w{max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)}
.saut{position:absolute;left:var(--gouttiere);top:-3rem;background:var(--noir);color:#fff;padding:var(--esp-1) var(--esp-2);z-index:60}.saut:focus{top:var(--esp-2)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.k{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-k);color:var(--gris)}
@media (prefers-reduced-motion:no-preference){.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}}

/* En-tête flottant */
.hd{position:fixed;inset:0 0 auto;z-index:50;color:#fff;padding-block:18px;transition:background .3s,padding .3s;background:linear-gradient(rgba(15,18,22,.7),rgba(15,18,22,0))}
.hd.mini{background:rgba(15,18,22,.92);backdrop-filter:blur(8px);padding-block:8px}
.hd .w{display:flex;align-items:center;gap:var(--esp-3)}
/* Logo en couleurs (demande Mathieu 11/09) : sur une plaque blanche, lisible sur la photo comme sur le fond sombre. */
.logo{display:inline-flex;background:#fff;border-radius:6px;padding:6px 12px}
.logo img{height:40px;width:auto;transition:height .3s}.hd.mini .logo img{height:30px}
/* Positions FIXES quel que soit la langue (demande Mathieu 11/09) : chaque entrée du menu
   a une largeur constante, le sélecteur de langue et le bouton aussi — rien ne bouge en
   passant de FR à NL ou EN. */
.nav{margin-left:auto;display:flex;gap:var(--esp-1);font-weight:500}
.nav a,.langues a{text-decoration:none;min-height:var(--touch-min);display:inline-flex;align-items:center}
.nav a{min-width:8.6em;justify-content:center;white-space:nowrap}
.nav a:nth-child(2){min-width:7em}.nav a:nth-child(3){min-width:7.4em}.nav a:nth-child(4){min-width:5.4em}
.nav a{opacity:.88}.nav a:hover{opacity:1}
.langues{display:flex;gap:.1rem;font-size:var(--t-petit);text-transform:uppercase}
.langues a{min-width:var(--touch-min);justify-content:center;opacity:.6;border-bottom:2px solid transparent}
.langues a[aria-current]{opacity:1;border-bottom-color:var(--orange)}
.hd .cta{background:var(--orange);color:var(--noir);padding:.6rem 1.1rem;border-radius:var(--r-b);font-weight:800;text-decoration:none;min-height:var(--touch-min);display:inline-flex;align-items:center;justify-content:center;min-width:12.5em;white-space:nowrap}
.burger{display:none;width:var(--touch-min);height:var(--touch-min);border:0;background:none;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:10px;width:24px;height:2px;background:#fff;transition:.2s}
.burger span{top:21px}.burger span::before{top:-7px;left:0}.burger span::after{top:7px;left:0}

/* Hero plein écran */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;color:#fff;isolation:isolate;background:var(--noir)}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,18,22,.35),rgba(15,18,22,.85) 75%);z-index:-1}
.hero .w{padding-block:7rem 4rem;display:grid;grid-template-columns:1.3fr 1fr;gap:var(--esp-4);align-items:end}
.hero h1{font-family:var(--fd);font-size:var(--t-h1);line-height:.95;text-transform:uppercase;font-weight:800}
.hero h1 b{color:var(--orange)}
.hero p{max-width:42ch;font-size:1.1rem;opacity:.9;margin-top:var(--esp-2)}
.btns{display:flex;gap:.8rem;margin-top:var(--esp-3);flex-wrap:wrap}
.b1,.b2{display:inline-flex;align-items:center;min-height:48px;padding:0 1.4rem;border-radius:var(--r-b);font-weight:800;text-decoration:none}
.b1{background:var(--orange);color:var(--noir)}.b2{border:2px solid rgba(255,255,255,.7);color:#fff}
.tags{display:flex;flex-wrap:wrap;gap:var(--esp-1);justify-self:end}
.tags span{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.35rem .8rem;font-size:.85rem}
/* Chiffres */
.stats{background:var(--noir);color:#fff}
.stats .w{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--esp-2);padding-block:var(--esp-3)}
.stats b{display:block;font-family:var(--fd);font-size:2.6rem;line-height:1;color:var(--orange)}.stats span{font-size:.9rem;opacity:.8}
/* Métiers */
.srv,.refs{padding-block:var(--esp-5)}
h2{font-family:var(--fd);font-size:var(--t-h2);line-height:1;text-transform:uppercase;margin-top:var(--esp-1);font-weight:800}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-3);margin-top:var(--esp-4)}
.card{position:relative;border-radius:var(--r);overflow:hidden;min-height:420px;display:grid;align-items:end;color:#fff;isolation:isolate;background:var(--noir)}
.card picture,.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.04)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(15,18,22,.85));z-index:-1}
.card div{padding:var(--esp-3)}
.card h3{font-family:var(--fd);font-size:var(--t-h3);text-transform:uppercase;font-weight:800}
.card p{opacity:.9;max-width:40ch;margin-top:.4rem}
.card a{display:inline-block;margin-top:.9rem;color:#FFB55A;font-weight:800;text-decoration:none}
/* Méthode */
.proc{background:var(--blanc);padding-block:var(--esp-5);border-block:1px solid var(--ligne)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--esp-4);margin-top:var(--esp-4);counter-reset:s}
.steps div{border-top:3px solid var(--noir);padding-top:var(--esp-2)}
.steps div::before{counter-increment:s;content:"0" counter(s);font-family:var(--fd);font-size:2.4rem;color:var(--orange);display:block;line-height:1}
.steps h3{font-weight:800;margin-top:.5rem;font-size:1.05rem}.steps p{color:var(--gris);margin-top:.3rem;font-size:.95rem}
/* Références */
.refs-vide{margin-top:var(--esp-3);color:var(--gris)}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--esp-3);margin-top:var(--esp-4)}
.ref{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;position:relative;display:flex;flex-direction:column}
.rph{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:3/2;background:var(--ligne)}
.rph::-webkit-scrollbar{display:none}
.rph picture{flex:0 0 100%;scroll-snap-align:start}.rph img{width:100%;height:100%;object-fit:cover}
.rnb{position:absolute;top:.7rem;right:.7rem;background:rgba(15,18,22,.75);color:#fff;font-size:.75rem;padding:.25rem .55rem;border-radius:999px}
.rpts{display:flex;gap:.35rem;justify-content:center;padding:.5rem 0 0}
.rpts span{width:7px;height:7px;border-radius:50%;background:var(--ligne)}.rpts span.on{background:var(--orange)}
.rtx{padding:var(--esp-2) var(--esp-3) var(--esp-3)}
.rmeta{font-size:var(--t-petit);color:var(--gris)}.rmeta b{color:var(--marine)}
.rtx h3{font-family:var(--fd);font-size:1.6rem;text-transform:uppercase;font-weight:800;margin-top:.3rem;line-height:1.05}
.rtype{display:inline-block;font-size:.78rem;color:var(--orange);font-weight:800;letter-spacing:.06em;margin-top:.4rem}
.rtx p{color:var(--gris);font-size:.95rem;margin-top:.7rem}
/* Contact */
.ct{background:var(--noir);color:#fff;padding-block:var(--esp-5)}
.ct .w{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-4)}
.ct .k{color:var(--orange)}.ct h2{font-size:clamp(2.4rem,5vw,4rem)}
.ci{margin-top:var(--esp-2);opacity:.85}.cc{margin-top:var(--esp-2);font-size:1.05rem}.cc a{text-decoration:none;color:var(--orange)}.cz{margin-top:var(--esp-2);opacity:.6;font-size:var(--t-petit)}
.ct form{display:grid;gap:.9rem}
.ct input,.ct textarea,.ct select{width:100%;background:#1B2027;border:1px solid #2B323B;color:#fff;border-radius:var(--r-b);padding:.8rem;font:inherit;min-height:46px}
.ct select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8a94a0 50%),linear-gradient(135deg,#8a94a0 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.ct select option{color:#111}
.ct input:focus,.ct textarea:focus,.ct select:focus{outline:none;border-color:var(--orange)}
.ct .row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.ct button{background:var(--orange);color:var(--noir);border:0;border-radius:var(--r-b);min-height:48px;font-weight:800;padding:0 1.4rem;cursor:pointer;justify-self:start}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.etat{padding:var(--esp-2);border-left:3px solid var(--orange);background:#1B2027}.etat.ko{border-left-color:#ff9a8b}
/* Pages intérieures (mentions) */
.page{padding-block:8rem var(--esp-5);background:var(--blanc);min-height:70svh}
.page .hd-fix{color:var(--noir)}
.pt{font-family:var(--fd);font-size:var(--t-h2);text-transform:uppercase;line-height:1;margin-top:var(--esp-1);font-weight:800}
.ml{margin:var(--esp-4) 0 0;display:grid;gap:0;max-width:720px}
.ml div{display:grid;grid-template-columns:200px 1fr;gap:var(--esp-2);padding:.8rem 0;border-top:1px solid var(--ligne)}
.ml dt{color:var(--gris);font-size:var(--t-petit)}.ml dd{margin:0}
.ml-libre{max-width:720px;margin-top:var(--esp-4);color:var(--gris);border-top:1px solid var(--ligne);padding-top:var(--esp-3)}
.lien{display:inline-block;margin-top:var(--esp-4);font-weight:800;text-decoration:none;color:var(--marine)}
/* Pied */
.ft{background:#0A0D10;color:#8a94a0;font-size:.85rem}.ft .w{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-4);padding-block:var(--esp-3);align-items:center}
.ft a{color:#c8ced6;text-decoration:underline;text-underline-offset:3px}.ft .copy{margin-left:auto}
@media(max-width:900px){
  .nav,.hd .cta{display:none}.burger{display:block;margin-left:auto}.langues{margin-left:auto}.burger{margin-left:0}
  .hd.ouvert{background:rgba(15,18,22,.96)}.hd.ouvert .w{flex-wrap:wrap}.hd.ouvert .nav{display:flex;flex-direction:column;width:100%;gap:0;order:5;margin:0;padding-top:.5rem}.hd.ouvert .nav a{padding:.2rem 0}
  .hero .w,.cards,.ct .w{grid-template-columns:1fr}.hero .w{padding-top:6rem}.tags{justify-self:start}.steps{grid-template-columns:1fr 1fr}.rgrid{grid-template-columns:1fr}.ml div{grid-template-columns:1fr}.ft .copy{margin-left:0}.card{min-height:340px}
}
@media(max-width:480px){.steps{grid-template-columns:1fr}.ct .row{grid-template-columns:1fr}}