/* =====================================================================
   LM2T — Feuille de style unique
   Direction artistique : Apidura adaptée BTP
   Palette désaturée chaleureuse · honeycomb · clip-path diagonaux
   ===================================================================== */

/* ----------------------- VARIABLES (palette) ----------------------- */
:root{
  --color-sand:  #C8B89A;   /* sable */
  --color-earth: #8B6914;   /* terre brûlée */
  --color-dark:  #2A2A27;   /* béton sombre */
  --color-rust:  #C4520A;   /* accent rouille (CTA) */
  --color-cream: #F5F0E8;   /* blanc cassé */
  --color-amber: #F2A81C;   /* jaune BTP (accent de marque, repris du logo) */

  /* dérivés harmoniques */
  --color-dark-2:   #1d1d1b;
  --color-sand-2:   #b29b76;
  --color-stone:    #6f6657;   /* taupe neutre */
  --color-line:     rgba(42,42,39,.14);
  --color-rust-2:   #a8440a;

  --font-head: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Lato', system-ui, sans-serif;

  --maxw: 1240px;
  --pad:  clamp(20px, 5vw, 80px);
  --header-h: 84px;
}

/* ----------------------------- RESET ------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  color:var(--color-dark);
  background:var(--color-cream);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }

/* ------------------------ TYPO UTILITAIRES ------------------------- */
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--color-rust);
}
h1,h2,h3,.h{ font-family:var(--font-head); font-weight:400; line-height:.92; letter-spacing:.01em; }
.section-title{ font-size:clamp(2.4rem,5.5vw,4.4rem); text-transform:uppercase; color:var(--color-dark); }
.lede{ font-size:clamp(1rem,1.4vw,1.15rem); color:var(--color-stone); max-width:46ch; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* --------------------------- BOUTONS ------------------------------- */
/* Ghost button (style Apidura : fin liseré + lettres espacées) */
.btn-ghost{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body); font-weight:700;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.95em 1.8em; border:1.5px solid currentColor;
  background:transparent; color:#fff;
  transition:background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}
.btn-ghost:hover{ background:#fff; color:var(--color-dark); }
.btn-ghost.dark{ color:var(--color-dark); }
.btn-ghost.dark:hover{ background:var(--color-dark); color:#fff; }

/* Solid rust */
.btn-rust{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-body); font-weight:700;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.95em 1.7em; background:var(--color-rust); color:#fff;
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.btn-rust:hover{ background:var(--color-rust-2); transform:translateY(-2px); box-shadow:0 10px 24px rgba(196,82,10,.28); }

/* =====================================================================
   1. HEADER (sticky)
   ===================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .4s ease, box-shadow .4s ease, height .3s ease;
}
.site-header.scrolled{
  background:rgba(29,29,27,.94);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 14px 40px rgba(0,0,0,.28);
}
.header-inner{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* Logo (badge réel sur tuile blanche pour rester lisible sur fond clair ou sombre) */
.logo{ display:flex; align-items:center; }
.logo-tile{
  background:#fff; border-radius:11px; padding:6px; display:flex; flex:none;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:transform .3s ease, box-shadow .3s ease;
}
.logo:hover .logo-tile{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.30); }
.logo-tile img{ height:46px; width:46px; object-fit:contain; display:block; }
.logo .wordmark{ font-family:var(--font-head); font-size:2rem; letter-spacing:.06em; line-height:1; color:#fff; margin-left:13px; }
.logo .wordmark .accent{ color:var(--color-amber); }

/* Nav desktop */
.nav{ display:flex; align-items:center; gap:38px; }
.nav a{
  color:#fff; font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  position:relative; padding:6px 0; opacity:.86; transition:opacity .25s ease;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--color-rust);
  transition:width .3s ease;
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ width:100%; }

/* Burger */
.burger{ display:none; width:42px; height:42px; position:relative; z-index:1100; }
.burger span{
  position:absolute; left:9px; right:9px; height:2px; background:#fff; border-radius:2px;
  transition:transform .35s ease, opacity .25s ease, top .35s ease;
}
.burger span:nth-child(1){ top:14px; }
.burger span:nth-child(2){ top:20px; }
.burger span:nth-child(3){ top:26px; }
body.nav-open .burger span:nth-child(1){ top:20px; transform:rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* =====================================================================
   2. HERO
   ===================================================================== */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#fff; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(245,240,232,.22) 0%, rgba(245,240,232,0) 42%),
    linear-gradient(180deg, #d8c8a8 0%, #c2ac84 26%, #8f7a54 52%, #4f4334 76%, var(--color-dark) 100%);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(42,42,39,.05) 0 1px, transparent 1px 46px),
    radial-gradient(60% 50% at 50% 100%, rgba(42,42,39,.55), transparent 70%);
  mix-blend-mode:multiply; opacity:.7;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(29,29,27,.42) 0%, rgba(29,29,27,.15) 40%, rgba(29,29,27,.6) 100%);
}
.hero-inner{ position:relative; z-index:2; padding:120px var(--pad) 90px; max-width:1000px; }
.hero .eyebrow{ color:var(--color-sand); margin-bottom:1.4rem; }
.hero h1{
  font-size:clamp(2.7rem, 9vw, 6.6rem);
  text-transform:uppercase; color:#fff; line-height:1.02;
  text-shadow:0 4px 40px rgba(0,0,0,.35);
}
.hero h1 .line{ display:block; }
.hero h1 .line .mk{ color:var(--color-amber); font-size:.55em; vertical-align:.18em; margin:0 .12em; }
.hero h1 .thin{ font-weight:400; opacity:.92; }
.hero .subtitle{
  font-size:clamp(1.05rem,2vw,1.5rem); font-weight:300; letter-spacing:.04em;
  margin:1.4rem auto 2.6rem; max-width:30ch; color:rgba(255,255,255,.92);
}
.hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
/* Indicateur de scroll */
.scroll-hint{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:2;
  color:rgba(255,255,255,.7); font-size:1.6rem; animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,10px); } }

/* =====================================================================
   3. NOS MÉTIERS (honeycomb hexagones)
   ===================================================================== */
.metiers{ padding:clamp(80px,11vw,150px) 0 clamp(90px,12vw,160px); background:var(--color-cream); }
.section-head{ max-width:640px; margin-bottom:clamp(48px,6vw,80px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .eyebrow{ display:block; margin-bottom:1rem; }
.section-head p{ margin-top:1.1rem; }

/* --- Honeycomb : grille d'hexagones centrée (mobile-first) --- */
.honeycomb{
  --hex-w:min(86vw, 340px);
  --hex-h:calc(var(--hex-w) * 0.92);
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.hc-row{ display:flex; flex-direction:column; gap:16px; justify-content:center; }

.hex{
  position:relative; width:var(--hex-w); height:var(--hex-h);
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  overflow:hidden; color:#fff; cursor:pointer;
  display:block; isolation:isolate;
}
.hex .bg{ position:absolute; inset:0; z-index:-2; transition:transform .6s ease; transform:scale(1.02); }
.hex:hover .bg{ transform:scale(1.1); }
.hex-terrassement .bg{ background:linear-gradient(150deg,#9c8559,#5b4a32 70%,#352c1f); }
.hex-demolition   .bg{ background:linear-gradient(150deg,#8a6a55,#54382c 70%,#2c1f19); }
.hex-transport    .bg{ background:linear-gradient(150deg,#7d7a6e,#46443b 70%,#26251f); }
.hex-location     .bg{ background:linear-gradient(150deg,#a98a3f,#6b531d 70%,#34280f); }
.hex .overlay{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(29,29,27,.25), rgba(29,29,27,.72));
  transition:background .4s ease;
}
.hex:hover .overlay{ background:linear-gradient(180deg, rgba(196,82,10,.32), rgba(29,29,27,.85)); }
.hex-content{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 13%;
}
.hex-content .num{ font-family:var(--font-body); font-weight:700; font-size:.7rem; letter-spacing:.3em; color:var(--color-amber); margin-bottom:.5rem; }
.hex-content h3{ font-size:clamp(1.35rem,3.2vw,1.7rem); line-height:1.04; text-transform:uppercase; letter-spacing:.03em; }
.hex-content .desc{
  font-size:.82rem; line-height:1.45; color:rgba(255,255,255,.9); font-weight:300; margin-top:.7rem;
}
.hex-content .more{
  font-family:var(--font-body); font-weight:700; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  border:1.5px solid #fff; padding:.55em 1.1em; margin-top:1.1rem;
  transition:background .3s ease, color .3s ease;
}
.hex .more:hover{ background:#fff; color:var(--color-dark); }

@media (hover:hover) and (min-width:1024px){
  .hex-content .desc, .hex-content .more{
    max-height:0; opacity:0; overflow:hidden; margin-top:0;
    transition:max-height .45s ease, opacity .35s ease, margin-top .45s ease, background .3s ease, color .3s ease;
  }
  .hex:hover .hex-content .desc{ max-height:140px; opacity:1; margin-top:.7rem; }
  .hex:hover .hex-content .more{ max-height:60px; opacity:1; margin-top:1.1rem; }
}

/* =====================================================================
   4. DERNIER CHANTIER (clip-path diagonal, fond sombre)
   ===================================================================== */
.realisation{
  position:relative; background:var(--color-dark); color:var(--color-cream);
  padding:clamp(90px,11vw,150px) 0;
  clip-path:polygon(0 0, 100% 3.5vw, 100% 100%, 0 calc(100% - 3.5vw));
  margin-top:-1px;
}
.realisation .grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,70px); align-items:center; }
.chantier-visual{
  position:relative; aspect-ratio:4/3; border-radius:2px; overflow:hidden;
  background:linear-gradient(135deg,#b6a079 0%,#7a6442 45%,#3a3025 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.chantier-visual::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,.08) 0 2px, transparent 2px 22px),
    radial-gradient(70% 60% at 30% 20%, rgba(245,240,232,.18), transparent 60%);
}
.chantier-visual .badge{
  position:absolute; top:18px; left:18px; z-index:2;
  background:var(--color-rust); color:#fff; font-weight:700; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; padding:.55em 1em;
}
.chantier-text .eyebrow{ display:block; margin-bottom:1rem; }
.chantier-text h2{ font-size:clamp(2rem,4vw,3.4rem); text-transform:uppercase; margin-bottom:1.1rem; }
.chantier-text p{ color:rgba(245,240,232,.78); font-weight:300; max-width:46ch; margin-bottom:1.8rem; }
.link-arrow{ display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-sand); transition:gap .3s ease, color .3s ease; }
.link-arrow:hover{ gap:1em; color:var(--color-rust); }

/* =====================================================================
   5. NOS CLIENTS (bande béton sombre)
   ===================================================================== */
.clients{ background:var(--color-dark-2); color:var(--color-cream); padding:clamp(70px,9vw,120px) 0; }
.clients .section-head{ text-align:center; margin-inline:auto; }
.clients .section-head .section-title{ color:var(--color-cream); }
.clients-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin-top:clamp(34px,5vw,60px);
}
.client{
  display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
  padding:26px 12px; border:1px solid rgba(245,240,232,.1); transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
.client:hover{ border-color:rgba(196,82,10,.6); transform:translateY(-4px); background:rgba(245,240,232,.03); }
.client svg{ width:46px; height:46px; stroke:var(--color-sand); fill:none; stroke-width:1.5; }
.client span{ font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,240,232,.9); }

/* =====================================================================
   6. BANDEAU CTA (rouille)
   ===================================================================== */
.cta-band{
  background:var(--color-rust);
  background-image:linear-gradient(120deg, var(--color-rust) 0%, #b1480a 100%);
  color:#fff; text-align:center; padding:clamp(70px,9vw,110px) 0;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0; opacity:.12;
  background:repeating-linear-gradient(135deg, #000 0 14px, transparent 14px 40px);
}
.cta-band .inner{ position:relative; z-index:2; }
.cta-band h2{ font-size:clamp(2rem,4.6vw,3.6rem); text-transform:uppercase; margin-bottom:.6rem; }
.cta-band p{ font-weight:300; font-size:clamp(1rem,1.6vw,1.25rem); margin-bottom:2rem; opacity:.95; }

/* =====================================================================
   7. À PROPOS
   ===================================================================== */
.apropos{ padding:clamp(90px,11vw,150px) 0; background:var(--color-cream); }
.apropos .grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.apropos-visual{
  aspect-ratio:3/4; border-radius:2px; position:relative; overflow:hidden;
  background:linear-gradient(160deg,#cdbd9c 0%,#8d7a55 50%,#3d3326 100%);
  box-shadow:0 30px 60px rgba(42,42,39,.22);
}
.apropos-visual::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(100deg, rgba(0,0,0,.06) 0 2px, transparent 2px 24px);
}
.apropos-text .section-title{ margin-bottom:1.3rem; }
.apropos-text p{ color:var(--color-stone); margin-bottom:1.2rem; max-width:52ch; }
.apropos-text strong{ color:var(--color-dark); font-weight:700; }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:2.4rem; }
.stat{ border-top:3px solid var(--color-rust); padding-top:14px; }
.stat .big{ font-family:var(--font-head); font-size:clamp(2rem,3.4vw,2.8rem); color:var(--color-dark); line-height:1; }
.stat .label{ font-size:.78rem; color:var(--color-stone); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:6px; }

/* =====================================================================
   8. CONTACT (fond béton sombre, clip diagonal)
   ===================================================================== */
.contact{
  position:relative; background:var(--color-dark); color:var(--color-cream);
  padding:clamp(90px,11vw,150px) 0 clamp(80px,10vw,130px);
  clip-path:polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%);
  margin-top:-1px;
}
.contact .grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:start; }
.contact .section-title{ color:var(--color-cream); }
.contact-aside .eyebrow{ display:block; margin-bottom:1rem; }
.contact-aside p{ color:rgba(245,240,232,.78); font-weight:300; margin:1.2rem 0 2rem; max-width:42ch; }
.info-block{ margin-top:2rem; }
.info-block .line{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid rgba(245,240,232,.12); }
.info-block .line svg{ width:22px; height:22px; stroke:var(--color-rust); fill:none; stroke-width:1.6; flex:none; margin-top:3px; }
.info-block .line b{ display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-sand); font-weight:700; margin-bottom:2px; }
.info-block .line span{ color:rgba(245,240,232,.9); font-weight:300; }

/* Formulaire */
.form{ background:rgba(245,240,232,.04); border:1px solid rgba(245,240,232,.1); padding:clamp(26px,3vw,40px); }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; display:flex; flex-direction:column; }
.field label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--color-sand); margin-bottom:7px; }
.field label .req{ color:var(--color-rust); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:.95rem; color:var(--color-cream);
  background:rgba(0,0,0,.22); border:1px solid rgba(245,240,232,.16); border-radius:2px;
  padding:13px 14px; transition:border-color .25s ease, background .25s ease;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(245,240,232,.4); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--color-rust); background:rgba(0,0,0,.35); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8B89A' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.field select option{ background:var(--color-dark); }
.form button[type=submit]{ width:100%; justify-content:center; margin-top:6px; font-size:.85rem; padding:1.1em; }
.form-success{ display:none; align-items:center; gap:12px; padding:16px 18px; background:rgba(196,82,10,.16); border:1px solid var(--color-rust); color:var(--color-cream); font-size:.92rem; margin-bottom:18px; }
.form-success.show{ display:flex; }
.form-success svg{ width:22px; height:22px; flex:none; stroke:var(--color-rust); fill:none; stroke-width:2; }

/* =====================================================================
   9. FOOTER
   ===================================================================== */
.site-footer{ background:var(--color-dark-2); color:rgba(245,240,232,.7); position:relative; overflow:hidden; }
.footer-silhouette{ position:absolute; left:0; right:0; bottom:0; height:120px; opacity:.5; }
.footer-silhouette svg{ width:100%; height:100%; display:block; }
.footer-main{ position:relative; z-index:2; padding:clamp(60px,8vw,96px) 0 40px; }
.footer-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; }
.footer-brand .logo{ margin-bottom:18px; }
.footer-brand p{ font-weight:300; font-size:.92rem; max-width:34ch; }
.footer-col h4{ font-family:var(--font-body); font-weight:900; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--color-sand); margin-bottom:18px; }
.footer-col a, .footer-col li{ display:block; font-size:.92rem; font-weight:300; padding:6px 0; color:rgba(245,240,232,.72); transition:color .25s ease; }
.footer-col a:hover{ color:var(--color-rust); }
.footer-col .contact-line{ display:flex; gap:9px; align-items:flex-start; }
.footer-bottom{ position:relative; z-index:2; border-top:1px solid rgba(245,240,232,.1); padding:22px 0; }
.footer-bottom .inner{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; font-size:.8rem; font-weight:300; }
.footer-bottom a{ color:rgba(245,240,232,.72); }
.footer-bottom a:hover{ color:var(--color-rust); }
.footer-bottom .legal-links{ display:flex; gap:18px; flex-wrap:wrap; }

/* =====================================================================
   ANIMATIONS AU SCROLL (Intersection Observer)
   ===================================================================== */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-hint{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* =====================================================================
   RESPONSIVE  (mobile-first overrides : tablette 768 / desktop 1024)
   ===================================================================== */

/* ---------- < 1024px : tablette & mobile ---------- */
@media (max-width:1023px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:30px;
    background:rgba(29,29,27,.98); backdrop-filter:blur(6px);
    transform:translateX(100%); transition:transform .45s cubic-bezier(.7,0,.2,1);
    z-index:1050;
  }
  body.nav-open .nav{ transform:none; }
  .nav a{ font-size:1.4rem; opacity:1; }
  .nav .btn-rust{ font-size:.9rem; }

  .realisation .grid,
  .apropos .grid,
  .contact .grid{ grid-template-columns:1fr; }
  .apropos-visual{ aspect-ratio:16/10; max-height:420px; }
  .footer-cols{ grid-template-columns:1fr 1fr; gap:34px; }
}

/* ---------- < 768px : mobile ---------- */
@media (max-width:767px){
  :root{ --header-h:72px; }
  .honeycomb{ --hex-w:min(86vw,340px); }
  .clients-row{ grid-template-columns:repeat(2,1fr); }
  .form .row{ grid-template-columns:1fr; gap:0; }
  .footer-cols{ grid-template-columns:1fr; gap:30px; }
  .footer-bottom .inner{ flex-direction:column; align-items:flex-start; }
  .logo .tag{ display:none; }
}

/* tablette & desktop : hexagones par rangée de 2 */
@media (min-width:768px){
  .hc-row{ flex-direction:row; gap:18px; }
  .honeycomb{ --hex-w:min(42vw,300px); gap:18px; }
}
@media (min-width:768px) and (max-width:1023px){
  .clients-row{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px){
  .honeycomb{ --hex-w:320px; gap:22px; }
  .hc-row{ gap:22px; }
}

/* ===== RÉALISATIONS ===== */
.section-realisations { padding: clamp(60px,8vw,120px) var(--pad); background: var(--color-cream); }
.section-sub { color: var(--color-stone); margin-bottom: 3rem; font-size: 1.1rem; }
.realisations-grid { display: flex; flex-direction: column; gap: 3rem; margin-bottom: 4rem; }
.chantier-card { background: #fff; border-radius: 8px; padding: 2rem; box-shadow: 0 2px 16px rgba(0,0,0,.07); }
.chantier-titre { font-family: var(--font-head); font-size: 1.6rem; color: var(--color-dark); margin-bottom: 1.2rem; letter-spacing: .04em; }
.avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.avant-apres figure { margin: 0; position: relative; }
.avant-apres img { width: 100%; height: 280px; object-fit: cover; border-radius: 6px; display: block; }
.avant-apres figcaption { position: absolute; top: .6rem; left: .6rem; background: var(--color-rust); color: #fff; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .2rem .6rem; border-radius: 4px; }
.avant-apres figure:last-child figcaption { background: var(--color-earth); }
.galerie-titre { font-family: var(--font-head); font-size: 2rem; color: var(--color-dark); margin-bottom: 1.5rem; letter-spacing: .04em; }
.galerie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.galerie-grid figure { margin: 0; overflow: hidden; border-radius: 6px; }
.galerie-grid img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform .3s; }
.galerie-grid figure:hover img { transform: scale(1.04); }
@media(max-width:600px){ .avant-apres { grid-template-columns: 1fr; } }

/* ===== WHATSAPP FLOTTANT ===== */
.whatsapp-float { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.3); transition: transform .2s, box-shadow .2s; }
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.whatsapp-float svg { width: 30px; height: 30px; fill: #fff; }

/* ===== FOOTER NOWBAUDY ===== */
.footer-credit { text-align: center; padding: 1rem; background: var(--color-dark-2); border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; gap: .6rem; }
.footer-credit a { color: var(--color-sand); text-decoration: none; display: flex; align-items: center; gap: .5rem; font-size: .82rem; opacity: .75; transition: opacity .2s; }
.footer-credit a:hover { opacity: 1; }
.footer-credit img { height: 28px; width: 28px; object-fit: cover; border-radius: 50%; }