/* ═══════════════════════════════════════════════
   CONCRETAIR FORM — style techno & BTP
   Palette : fonds foncés, gris ardoise (logo), orange logo #ED8B33
   ═══════════════════════════════════════════════ */
:root{
  --bg-0:#0f1317;
  --bg-1:#161c22;
  --bg-2:#1f262e;
  --slate:#3d4a56;          /* gris-bleu du logo */
  --slate-l:#55646f;
  --g700:#39424b;
  --g500:#7b868f;
  --g400:#9aa4ad;
  --g300:#c2c9cf;
  --g200:#e2e6e9;
  --g100:#eceef0;
  --blanc:#fafbfc;
  --orange:#ED8B33;         /* orange du logo */
  --orange-l:#F5A55C;
  --orange-glow:rgba(237,139,51,.18);
  --mono:'JetBrains Mono','Cascadia Code',Consolas,monospace;
  --heavy:'Arial Black','Segoe UI Black','Arial',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Arial,sans-serif;background:var(--bg-0);color:var(--g200);line-height:1.6}
::selection{background:var(--orange);color:var(--bg-0)}

/* ── Bande chantier (hachures orange/noir) ── */
.hazard{height:8px;background:repeating-linear-gradient(-45deg,var(--orange) 0 14px,var(--bg-0) 14px 28px)}

/* ── NAV ── */
header{position:sticky;top:0;z-index:60;background:rgba(15,19,23,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--g700)}
.nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 24px}
.logo img{height:52px;display:block}
nav ul{display:flex;gap:2px;list-style:none;align-items:center;flex-wrap:wrap}
nav a{display:block;padding:9px 16px;text-decoration:none;color:var(--g400);font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
nav a:hover{color:var(--blanc)}
nav a.active{color:var(--orange);border-bottom:2px solid var(--orange)}
.nav-cta{margin-left:14px;background:var(--orange);color:var(--bg-0)!important;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);border-bottom:none!important}
.nav-cta:hover{background:var(--orange-l)}

/* ── Structure ── */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
.kicker{font-family:var(--mono);color:var(--orange);font-size:13px;letter-spacing:2px;margin-bottom:14px}
h1{font-family:var(--heavy);font-size:44px;line-height:1.06;font-weight:900;color:var(--blanc);text-transform:uppercase}
h1 .o{color:var(--orange)}
h2{font-family:var(--heavy);font-size:29px;font-weight:900;color:var(--blanc);margin-bottom:10px;text-transform:uppercase}
h3{font-size:17px;font-weight:700;color:var(--blanc)}
.sub{color:var(--g400);font-size:16.5px;max-width:660px;margin-top:16px}
.btn{display:inline-block;padding:14px 30px;font-weight:800;font-size:14px;letter-spacing:.8px;text-transform:uppercase;text-decoration:none;cursor:pointer;border:none;font-family:inherit}
.btn-orange{background:var(--orange);color:var(--bg-0);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.btn-orange:hover{background:var(--orange-l);box-shadow:0 0 24px var(--orange-glow)}
.btn-line{background:transparent;color:var(--g200);border:2px solid var(--g500);margin-left:14px}
.btn-line:hover{border-color:var(--orange);color:var(--orange)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* fonds */
.sec-1{background:var(--bg-1)}
.sec-2{background:var(--bg-2)}
.sec-slate{background:linear-gradient(135deg,var(--slate) 0%,var(--bg-1) 100%)}
/* ── section claire (fond blanc, texture béton banché discrète) ── */
.sec-light{background:
  repeating-linear-gradient(90deg,transparent 0 279px,rgba(61,74,86,.10) 279px 281px),
  #ffffff;
  color:var(--slate)}
.sec-light h1,.sec-light h2,.sec-light h3{color:var(--bg-1)}
.sec-light .sub,.sec-light p{color:var(--slate-l)}
.sec-light .card{background:#fff;border-color:var(--g300)}
.sec-light .card:hover{border-color:var(--orange)}
.sec-light .card p{color:var(--slate-l)}
.sec-light .num-l{color:var(--slate-l)}
.sec-light td{background:#fff;color:var(--slate)}
.sec-light ul.checks li{color:var(--slate)}
.sec-light ul.checks strong{color:var(--bg-1)}
.sec-light .step{background:#fff;border-color:var(--g300);border-top-color:var(--orange)}
.sec-light .step p{color:var(--slate-l)}
.sec-light .btn-line{color:var(--slate);border-color:var(--slate)}
.sec-light input,.sec-light select,.sec-light textarea{background:#fff;border-color:var(--g300);color:var(--slate)}
.sec-light label{color:var(--slate-l)}
.sec-light .ph-cap{color:var(--slate-l)}

/* hero grille techno */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(ellipse 60% 50% at 75% 40%,var(--orange-glow),transparent 65%),
  linear-gradient(var(--g700) 1px,transparent 1px),
  linear-gradient(90deg,var(--g700) 1px,transparent 1px),
  var(--bg-0);
  background-size:auto,48px 48px,48px 48px,auto}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--bg-0));pointer-events:none}
.hero .wrap{position:relative;z-index:2}

/* cartes "plaque acier" avec rivets */
.card{background:var(--bg-2);border:1px solid var(--g700);padding:26px;position:relative}
.card:hover{border-color:var(--orange);box-shadow:0 0 30px var(--orange-glow)}
.card h3{margin-bottom:10px}
.card p{color:var(--g400);font-size:14.5px}
.card .idx{font-family:var(--mono);font-size:12px;color:var(--orange);letter-spacing:1.5px;display:block;margin-bottom:12px}
.rivets::before,.rivets::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--g400),var(--g700));top:10px}
.rivets::before{left:10px}
.rivets::after{right:10px}

.num{font-family:var(--mono);font-size:34px;font-weight:700;color:var(--orange)}
.num-l{font-size:13px;color:var(--g400);margin-top:4px}
.tag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--orange);border:1px solid var(--orange);padding:5px 14px;margin-bottom:16px}

table{width:100%;border-collapse:collapse;font-size:14px;margin-top:22px;font-family:var(--mono)}
th{background:var(--bg-0);color:var(--orange);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;padding:12px 14px;text-align:left;border:1px solid var(--g700);font-weight:600}
td{border:1px solid var(--g700);padding:12px 14px;color:var(--g300);background:var(--bg-1)}
td strong{color:var(--orange);font-weight:700}

img.ph{width:100%;display:block;object-fit:cover;border:1px solid var(--g700);background:var(--bg-2)}
.ph-frame{position:relative}
.ph-frame::before{content:"";position:absolute;top:-6px;left:-6px;width:34px;height:34px;border-top:3px solid var(--orange);border-left:3px solid var(--orange);z-index:2}
.ph-frame::after{content:"";position:absolute;bottom:-6px;right:-6px;width:34px;height:34px;border-bottom:3px solid var(--orange);border-right:3px solid var(--orange);z-index:2}
.ph-cap{font-family:var(--mono);font-size:11.5px;color:var(--g500);margin-top:10px;letter-spacing:1px}

ul.checks{list-style:none;margin-top:16px}
ul.checks li{padding:8px 0 8px 28px;position:relative;font-size:15px;color:var(--g300)}
ul.checks li::before{content:"▸";position:absolute;left:2px;color:var(--orange);font-weight:700}
ul.checks strong{color:var(--blanc)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.step{background:var(--bg-2);border:1px solid var(--g700);border-top:4px solid var(--orange);padding:24px}
.step .n{font-family:var(--mono);font-size:12px;color:var(--orange);letter-spacing:2px}
.step h3{margin:10px 0 8px}
.step p{color:var(--g400);font-size:14px}

input,select,textarea{width:100%;padding:12px 14px;background:var(--bg-1);border:1px solid var(--g700);color:var(--g200);font-size:14px;font-family:inherit;margin-bottom:14px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange)}
label{font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--g400);display:block;margin-bottom:6px}

footer{background:var(--bg-0);border-top:1px solid var(--g700);padding:40px 0;font-size:13.5px;color:var(--g500)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
footer img{height:60px}
footer a{color:var(--g300);text-decoration:none}
footer a:hover{color:var(--orange)}

.cta-band{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}

@media(max-width:880px){
  .g2,.g3,.g4,.steps,.two-col{grid-template-columns:1fr}
  h1{font-size:30px}
  h2{font-size:23px}
  nav ul{justify-content:center}
}

/* ── sélecteur de langue ── */
.lang{font-family:var(--mono);font-size:12px;margin-left:10px;color:var(--g700)}
.lang a{display:inline;padding:9px 3px;letter-spacing:0;color:var(--g500)}
.lang a.on{color:var(--orange)}

/* ── FOOTER enrichi ── */
footer{padding:0}
.foot-main{max-width:1200px;margin:0 auto;padding:48px 24px 34px;display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:34px}
.foot-main h4{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--orange);text-transform:uppercase;margin-bottom:14px;font-weight:600}
.foot-main p{color:var(--g500);font-size:13.5px;line-height:1.65}
.foot-main ul{list-style:none}
.foot-main ul li{margin-bottom:8px}
.foot-main ul a{color:var(--g400);text-decoration:none;font-size:13.5px}
.foot-main ul a:hover{color:var(--orange)}
.foot-logo{height:58px;display:block;margin-bottom:14px}
.foot-office{margin-bottom:18px}
.foot-office .flag{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--g300);display:block;margin-bottom:4px}
.foot-office a{color:var(--g300);text-decoration:none}
.foot-office a:hover{color:var(--orange)}
.foot-bar{border-top:1px solid var(--g700);padding:16px 24px;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--g500)}
.foot-bar a{color:var(--g500);text-decoration:none}
.foot-bar a:hover{color:var(--orange)}
.foot-badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--g400);border:1px solid var(--g700);padding:4px 10px;margin:4px 6px 0 0}
@media(max-width:880px){.foot-main{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-main{grid-template-columns:1fr}}

/* ── bande logos clients ── */
.clients{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.client-tile{flex:1 1 150px;border:1px solid var(--g700);background:var(--bg-2);padding:22px 14px;text-align:center;font-family:var(--heavy);font-size:15px;letter-spacing:1px;color:var(--g300);text-transform:uppercase}
.client-tile:hover{border-color:var(--orange);color:var(--blanc)}
.sec-light .client-tile{background:#fff;border-color:var(--g300);color:var(--slate)}

/* ── bloc techno dropstitch ── */
.ds-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.ds-spec div{border:1px solid var(--g700);padding:14px;background:var(--bg-1)}
.ds-spec .k{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--orange)}
.ds-spec .v{font-family:var(--mono);font-size:18px;color:var(--g200);margin-top:4px}
.sec-light .ds-spec div{background:#fff;border-color:var(--g300)}
.sec-light .ds-spec .v{color:var(--bg-1)}
@media(max-width:700px){.ds-spec{grid-template-columns:1fr}}

/* schéma dropstitch en CSS */
.ds-visual{background:var(--bg-0);border:1px solid var(--g700);padding:22px;position:relative;overflow:hidden}
.ds-skin{height:14px;background:repeating-linear-gradient(45deg,var(--slate) 0 6px,var(--slate-l) 6px 12px);border:1px solid var(--g500)}
.ds-core{height:120px;position:relative;background:linear-gradient(var(--bg-2),var(--bg-1));border-left:1px solid var(--g700);border-right:1px solid var(--g700);
  background-image:repeating-linear-gradient(90deg,var(--orange) 0 1px,transparent 1px 9px);background-size:auto}
.ds-lab{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--g500);margin-top:8px;text-align:center}

/* ── timeline ── */
.tl{position:relative;margin-top:30px;padding-left:0}
.tl-row{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--g700)}
.tl-row:last-child{border-bottom:none}
.tl-year{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--orange);letter-spacing:1px}
.tl-row h4{font-size:16px;color:var(--blanc);margin-bottom:6px;font-weight:700}
.tl-row p{color:var(--g400);font-size:14.5px}
.sec-light .tl-row{border-bottom-color:var(--g300)}
.sec-light .tl-row h4{color:var(--bg-1)}
.sec-light .tl-row p{color:var(--slate-l)}
@media(max-width:620px){.tl-row{grid-template-columns:1fr;gap:6px}}

/* ── logos clients (images) ── */
.client-tile img{max-width:100%;max-height:46px;width:auto;height:auto;display:block;margin:0 auto;
  opacity:1;transition:transform .2s}
.client-tile:hover img{transform:scale(1.05)}
.client-tile{display:flex;align-items:center;justify-content:center;min-height:92px;background:#fff;border-color:var(--g300)}
.client-tile:hover{border-color:var(--orange)}
.sec-light .client-tile{background:#fff;border-color:var(--g300)}
.client-tile .fallback{font-family:var(--heavy);font-size:15px;letter-spacing:1px;text-transform:uppercase}

/* ═══════════════════════════════════════════════
   RESPONSIVE MOBILE
   ═══════════════════════════════════════════════ */
html,body{overflow-x:hidden;max-width:100%}
img,video,iframe{max-width:100%}
.burger{display:none}
.navtoggle{display:none}

@media(max-width:900px){
  /* ── menu burger ── */
  .nav{position:relative;padding:8px 16px}
  .logo img{height:42px}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:12px 4px;margin-left:auto}
  .burger span{display:block;width:26px;height:2px;background:var(--g200);transition:transform .22s,opacity .22s}
  .navtoggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle:checked ~ .burger span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg-1);
    border-top:1px solid var(--g700);border-bottom:2px solid var(--orange);padding:6px 0;z-index:80}
  .navtoggle:checked ~ nav{display:block}
  header nav ul{flex-direction:column;align-items:stretch;gap:0}
  header nav ul li{width:100%}
  header nav a{padding:15px 20px;font-size:14px;border-bottom:1px solid var(--g700)}
  header nav a.active{border-bottom:1px solid var(--g700);color:var(--orange)}
  .nav-cta{margin:10px 20px;clip-path:none;text-align:center;border-bottom:none!important}
  .lang{margin:0;padding:14px 20px;text-align:center;font-size:14px}
  .lang a{padding:4px 8px}

  /* ── grilles : neutralise les styles en ligne ── */
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr!important}
  .steps{grid-template-columns:1fr!important}
  .two-col{grid-template-columns:1fr!important;gap:30px!important}
  .ds-spec{grid-template-columns:1fr!important}
  .clients{gap:10px}
  .client-tile{flex:1 1 130px;min-height:76px;padding:14px 10px}
  .client-tile img{max-height:36px}

  /* ── espacements et typo ── */
  section{padding:44px 0!important}
  .wrap{padding:0 18px}
  h1{font-size:29px!important;line-height:1.12}
  h2{font-size:21px!important}
  .sub{font-size:15.5px}
  .num{font-size:26px}
  .kicker{font-size:12px;letter-spacing:1.5px}
  .btn{padding:13px 22px;font-size:13px;display:block;text-align:center;margin:0 0 10px!important}
  .btn-line{margin-left:0!important}
  .cta-band{flex-direction:column;align-items:stretch;text-align:left}

  /* ── médias ── */
  .hero{background-size:auto,32px 32px,32px 32px,auto}
  .ph{height:auto!important;max-height:260px;object-fit:cover}
  video{height:auto!important}
  #map{height:300px!important}
  .ph-frame::before,.ph-frame::after{width:22px;height:22px}

  /* ── tableaux : défilement horizontal ── */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;font-size:12.5px}
  th,td{padding:10px 12px}

  /* ── footer ── */
  .foot-main{padding:34px 18px 24px;gap:26px}
  .foot-bar{flex-direction:column;text-align:center;gap:8px}
}

@media(max-width:520px){
  h1{font-size:25px!important}
  .clients{flex-direction:column}
  .client-tile{flex:1 1 auto}
  .hazard{height:6px}
}

/* ── ajustements mobile complémentaires ── */
@media(max-width:900px){
  .nav{flex-wrap:nowrap}
  /* trio de chiffres du hero */
  .hero .wrap > div > div[style*="display:flex"]{gap:20px!important;margin-top:30px!important}
  /* pavé logo client du cas client */
  .client-tile[style*="min-width"]{min-width:0!important;width:100%;flex:1 1 100%!important}
  /* bandeau titre + logo du cas client */
  div[style*="display:flex"][style*="gap:22px"]{gap:14px!important}
  /* schéma dropstitch */
  img[src$="dropstitch.jpg"]{height:200px!important;padding:10px!important}
  /* logo FlowStop de la page À propos */
  img[src$="logo-flowstop.png"]{height:48px!important}
  /* timeline */
  .tl-year{font-size:19px}
  /* formulaire */
  input,select,textarea{font-size:16px} /* évite le zoom auto iOS */
}

/* ── boutons côte à côte (toutes langues) ── */
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.btn-row .btn{margin:0!important}
.btn-row .btn-line{margin-left:0!important}
@media(max-width:900px){
  .btn-row{flex-direction:column}
  .btn-row .btn{width:100%}
}

/* ── libellés de chiffres : plus lisibles ── */
.num-l{font-size:15px;font-weight:700;color:var(--g300);letter-spacing:.2px;line-height:1.35}
.sec-light .num-l{color:var(--slate)}