* { box-sizing: border-box; }
  :root {
    /* ===== THÈME CLAIR (défaut) ===== */
    --ground: #F2F1EE; --surface: #FBFAF8; --surface-2: #E9E7E2;
    --ink: #191B1F; --ink-soft: #4C5158; --ink-faint: #63686E;
    --line: #D8D6D0; --line-strong: #BFBCB4;
    --accent: #E05E12; --accent-strong: #BF4C09; --on-accent: #17120C;
    /* hero */
    --hero-bg1: #ECEAE3; --hero-bg2: #F4F3EF; --hero-ink: #191B1F; --hero-sub: #52575E;
    --hero-grid: rgba(0,0,0,.05); --hero-eyebrow: #BF4C09;
    --photo1: #d9d4cb; --photo2: #bcb5a9; --photo-ink: rgba(25,27,31,.55);
    /* panneaux sombres signature (devis, tiktok, carte-zone, footer) — restent sombres en clair, s'ajustent en sombre */
    --panel-bg: #191B1F; --panel-ink: #F3F1EC; --panel-sub: #B9BCC1; --panel-line: #2C2F34; --panel-field: #16171A; --panel-field-line: #34383E;
    --feat-bg: #191B1F; --feat-ink: #F3F1EC; --feat-sub: #B9BCC1;
    --foot-bg: #0F1012;
    --maxw: 1180px; --pad: clamp(18px, 4vw, 40px);
    --sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --logo: Arial, "Helvetica Neue", sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }
  :root[data-theme="dark"] {
    /* ===== THÈME SOMBRE ===== */
    --ground: #131417; --surface: #1B1D21; --surface-2: #212429;
    --ink: #F0EEE9; --ink-soft: #AEB3B9; --ink-faint: #878C93;
    --line: #292C31; --line-strong: #3A3E44;
    --accent: #F0722A; --accent-strong: #FF8A45; --on-accent: #16120C;
    --hero-bg1: #1B1D22; --hero-bg2: #101114; --hero-ink: #F3F1EC; --hero-sub: #B4B9BF;
    --hero-grid: rgba(255,255,255,.045); --hero-eyebrow: #F0722A;
    --photo1: #34373C; --photo2: #202327; --photo-ink: rgba(243,241,236,.5);
    --panel-bg: #1B1E23; --panel-ink: #F3F1EC; --panel-sub: #AEB3B9; --panel-line: #2E3238; --panel-field: #131417; --panel-field-line: #34383E;
    --feat-bg: #0C0D0F; --feat-ink: #F3F1EC; --feat-sub: #B4B9BF;
    --foot-bg: #0B0C0D;
  }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .25s, color .25s; }
  a { color: inherit; }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
  .mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }

  .demo { background: var(--accent); color: var(--on-accent); text-align: center; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px; font-weight: 700; }

  /* header */
  header.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .nav .row { display: flex; align-items: center; gap: 18px; height: 66px; }
  .brand { display: inline-flex; align-items: baseline; gap: 9px; }
  .logo { font-family: var(--logo); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.04em; color: var(--ink); }
  .logo .d { color: var(--accent); }
  .brand .cst { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.24em; color: var(--ink-faint); text-transform: uppercase; }
  .nav .links { display: flex; gap: 22px; margin-left: auto; }
  .nav .links a { text-decoration: none; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); }
  .nav .links a:hover { color: var(--accent); }
  .nav .tools { display: flex; align-items: center; gap: 10px; }
  .lang { display: flex; border: 1px solid var(--line-strong); border-radius: 100px; overflow: hidden; font-family: var(--mono); font-size: 0.64rem; font-weight: 700; }
  .lang button { border: 0; background: transparent; padding: 6px 10px; cursor: pointer; color: var(--ink-soft); letter-spacing: 0.08em; }
  .lang button.on { background: var(--accent); color: var(--on-accent); }
  .themebtn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; color: var(--ink); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
  .themebtn:hover { border-color: var(--accent); color: var(--accent); }
  .btn { font-weight: 700; border-radius: 4px; padding: 11px 17px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; font-size: 0.9rem; transition: background .18s, transform .1s, box-shadow .18s, border-color .18s; }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--accent); color: var(--on-accent); }
  .btn-primary:hover { background: var(--accent-strong); box-shadow: 0 8px 22px -10px var(--accent); }
  .btn-ghost { color: var(--ink); border-color: var(--line-strong); background: transparent; }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn svg { width: 16px; height: 16px; }

  /* hero */
  .hero { background: linear-gradient(160deg, var(--hero-bg1), var(--hero-bg2)); color: var(--hero-ink); position: relative; overflow: hidden; transition: background .25s; }
  .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px); background-size: 40px 40px; }
  .hero .grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 46px; align-items: center; padding: clamp(46px, 6.5vw, 92px) 0; }
  .hero .eyebrow { color: var(--hero-eyebrow); letter-spacing: 0.2em; }
  .hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; margin: 18px 0 0; text-wrap: balance; color: var(--hero-ink); }
  .hero h1 .u { color: var(--accent); }
  .hero p.sub { margin: 22px 0 0; color: var(--hero-sub); font-size: clamp(1rem, 2vw, 1.18rem); max-width: 46ch; }
  .hero .cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
  .hero .btn-ghost { color: var(--hero-ink); border-color: color-mix(in srgb, var(--hero-ink) 30%, transparent); }
  .hero .btn-ghost:hover { border-color: var(--hero-ink); }

  .photo { border-radius: 10px; aspect-ratio: 4/5; position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--hero-ink) 12%, transparent);
    background: linear-gradient(150deg, var(--photo1), var(--photo2)); display: flex; align-items: flex-end; padding: 18px; }
  .photo .ph { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--photo-ink); position: relative; z-index: 2; }
  .photo .ba { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; z-index: 2; }
  .photo .ba span { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); padding: 4px 8px; border-radius: 3px; font-weight: 700; }
  .photo .ba span.b { background: color-mix(in srgb, var(--hero-ink) 16%, transparent); color: var(--hero-ink); }
  /* logo on hero */
  .brandmark { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 1; }
  .brandmark .tile { width: 92px; height: 92px; border-radius: 20px; background: #191B1F; position: relative; display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); }
  .brandmark .tile span { font-family: var(--logo); font-weight: 700; font-size: 62px; color: #FBFAF8; line-height: 1; }
  .brandmark .tile i { position: absolute; right: 17px; bottom: 20px; width: 12px; height: 12px; border-radius: 3px; background: #E05E12; }
  .brandmark .wm { font-family: var(--logo); font-weight: 700; font-size: 1.7rem; letter-spacing: -0.04em; color: var(--hero-ink); }
  .brandmark .wm .d { color: var(--accent); }
  .brandmark .cst { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--hero-sub); margin-top: -8px; }

  /* trust bar */
  .trust { background: var(--accent); color: var(--on-accent); }
  .trust .row { display: flex; flex-wrap: wrap; gap: 8px 30px; padding: 14px 0; justify-content: space-between; align-items: center; }
  .trust .item { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 0.9rem; }
  .trust .item svg { width: 17px; height: 17px; flex: none; }

  /* sections */
  section.blk { padding: clamp(48px, 7vw, 92px) 0; border-bottom: 1px solid var(--line); }
  .kicker { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
  .h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 0; text-wrap: balance; }
  .lead { color: var(--ink-soft); max-width: 56ch; margin: 14px 0 0; font-size: 1.02rem; }
  .head-c { text-align: center; } .head-c .lead { margin-left: auto; margin-right: auto; }

  .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
  @media (min-width: 760px) { .svc-grid { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 500px) { .svc-grid { grid-template-columns: 1fr; } }
  .svc { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 26px; transition: transform .18s, border-color .18s, box-shadow .18s; }
  .svc:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 16px 34px -22px rgba(0,0,0,.4); }
  .svc.feat { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; background: var(--feat-bg); color: var(--feat-ink); border-color: color-mix(in srgb, var(--accent) 40%, var(--feat-bg)); }
  .svc.feat h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
  .svc.feat .ico { width: 52px; height: 52px; }
  @media (max-width: 500px) { .svc.feat { grid-column: auto; } }
  .svc .ico { width: 44px; height: 44px; color: var(--accent); margin-bottom: 16px; }
  .svc h3 { margin: 0 0 8px; font-size: 1.24rem; font-weight: 800; letter-spacing: -0.01em; }
  .svc p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
  .svc.feat p { color: var(--feat-sub); font-size: 0.98rem; max-width: 54ch; }
  .svc .tag { display: inline-block; margin-bottom: 12px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); padding: 4px 8px; border-radius: 100px; font-weight: 700; }

  .work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
  .proj { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface); }
  .proj .img { aspect-ratio: 4/3; position: relative; display: flex; align-items: flex-end; padding: 12px; background: linear-gradient(150deg, #cfc9bf, #b8b1a5); }
  .proj:nth-child(2) .img { background: linear-gradient(150deg, #a9683b, #7f4e2c); }
  .proj:nth-child(3) .img { background: linear-gradient(150deg, #8b9095, #5f6469); }
  .proj:nth-child(4) .img { background: linear-gradient(150deg, #d7d2c8, #b3aa9c); }
  .proj:nth-child(5) .img { background: linear-gradient(150deg, #c98b52, #8a5a30); }
  .proj:nth-child(6) .img { background: linear-gradient(150deg, #7d8288, #565b61); }
  .proj .img .lab { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(20,20,22,.82); color: #fff; padding: 4px 8px; border-radius: 3px; }
  .proj .cap { padding: 14px 16px 16px; }
  .proj .cap .t { font-weight: 800; letter-spacing: -0.01em; }
  .proj .cap .m { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
  .tt { margin-top: 26px; background: var(--panel-bg); color: var(--panel-ink); border-radius: 8px; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border: 1px solid var(--panel-line); }
  .tt .l { display: flex; align-items: center; gap: 14px; }
  .tt .l svg { width: 34px; height: 34px; color: var(--accent); flex: none; }
  .tt b { font-size: 1.05rem; }
  .tt small { color: var(--panel-sub); display: block; font-size: 0.82rem; }

  .why { background: var(--surface-2); }
  .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 40px; }
  .why-c { background: var(--ground); padding: 26px; }
  .why-c h3 { margin: 0 0 8px; font-size: 1.14rem; font-weight: 800; }
  .why-c h3::before { content: ""; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--accent); margin-bottom: 16px; }
  .why-c p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
  .step { position: relative; padding-top: 20px; }
  .step .num { font-family: var(--mono); font-weight: 700; font-size: 0.8rem; color: var(--on-accent); background: var(--accent); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .step h3 { margin: 16px 0 6px; font-size: 1.08rem; font-weight: 800; }
  .step p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
  .step::before { content: ""; position: absolute; top: 35px; left: 40px; right: -8px; height: 2px; background: var(--line-strong); }
  .step:last-child::before { display: none; }

  .zone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; margin-top: 36px; }
  .zone-map { background: var(--panel-bg); border: 1px solid var(--panel-line); border-radius: 8px; aspect-ratio: 16/10; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .zone-map .dot2 { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
  .zone-map .txt { font-family: var(--mono); color: var(--panel-sub); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .zone-list { columns: 2; gap: 20px; }
  .zone-list span { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-soft); }
  .zone-list span::before { content: "▸ "; color: var(--accent); }

  .devis { background: var(--panel-bg); color: var(--panel-ink); }
  .devis .grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: start; }
  .devis h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 0; }
  .devis .lead { color: var(--panel-sub); }
  .devis .assur { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
  .devis .assur div { display: flex; gap: 10px; align-items: center; font-size: 0.92rem; }
  .devis .assur svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
  .devis .contact-l { margin-top: 26px; font-family: var(--mono); font-size: 0.86rem; color: var(--panel-sub); line-height: 2; }
  form { background: var(--panel-field); border: 1px solid var(--panel-line); border-radius: 8px; padding: 24px; display: grid; gap: 14px; }
  .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--panel-sub); display: block; margin-bottom: 6px; }
  input, select, textarea { width: 100%; background: var(--panel-bg); border: 1px solid var(--panel-field-line); border-radius: 5px; padding: 11px 13px; color: var(--panel-ink); font-family: var(--sans); font-size: 0.94rem; }
  input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
  textarea { resize: vertical; min-height: 84px; }
  .drop { border: 1.5px dashed var(--panel-field-line); border-radius: 6px; padding: 16px; text-align: center; font-size: 0.82rem; color: var(--panel-sub); }
  form .btn-primary { justify-content: center; padding: 14px; font-size: 1rem; }

  footer.ft { background: var(--foot-bg); color: #B9BCC1; padding: 52px 0 26px; }
  .ft-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
  .ft .logo { color: #F3F1EC; font-size: 1.7rem; }
  .ft p.tl { font-size: 0.88rem; margin: 14px 0 0; max-width: 30ch; }
  .ft h4 { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: #767B82; margin: 0 0 14px; }
  .ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
  .ft a { text-decoration: none; font-size: 0.9rem; color: #B9BCC1; }
  .ft a:hover { color: var(--accent); }
  .ft .contact { font-size: 0.9rem; display: grid; gap: 9px; }
  .ft .contact b { color: #F3F1EC; }
  .ft-bot { border-top: 1px solid #212328; margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.76rem; color: #767B82; }

  @media (max-width: 900px) {
    .hero .grid, .devis .grid, .zone-grid { grid-template-columns: 1fr; }
    .work { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: 1fr 1fr; } .step::before { display: none; }
    .ft-grid { grid-template-columns: 1fr 1fr; } .nav .links { display: none; }
    .photo { aspect-ratio: 16/10; }
  }
  @media (max-width: 560px) { .work, .f2, .ft-grid { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ===== vraies photos ===== */
.demo{display:none}
.photo{padding:0}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .ba,.photo .badge-logo,.photo .ph{z-index:2}
.photo .ph{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 16px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:rgba(255,255,255,.9)}
.badge-logo{position:absolute;top:14px;right:14px;z-index:3;width:46px;height:46px;border-radius:12px;background:#191B1F;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.badge-logo span{color:#fff;font:700 30px/1 Arial;position:relative}
.badge-logo i{position:absolute;right:9px;bottom:12px;width:7px;height:7px;border-radius:2px;background:#E05E12}
.proj .img{padding:0}
.proj .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proj .img .lab{position:absolute;left:12px;bottom:12px;z-index:2}

/* fix sélecteur de langue (lien NL) */
.lang a{border:0;background:transparent;padding:6px 10px;cursor:pointer;color:var(--ink-soft);letter-spacing:.08em;text-decoration:none;display:inline-flex;align-items:center;font-family:var(--mono);font-size:.64rem;font-weight:700}
.lang a:hover{color:var(--accent)}


/* ============================================================
   CORRECTIONS (21/07) — menu, langue, bouton devis, contact
   ============================================================ */

/* --- Menu : centré, typo uppercase, espacement régulier --- */
.nav .row { justify-content: space-between; }
.nav .brand { flex: 1 1 0; }
.nav .links { margin: 0; flex: 0 1 auto; justify-content: center; gap: 32px; text-transform: uppercase; letter-spacing: 0.1em; }
.nav .links a { font-size: 0.76rem; font-weight: 700; color: var(--ink); }
.nav .links a:hover { color: var(--accent); }
.nav .tools { flex: 1 1 0; justify-content: flex-end; }

/* --- Sélecteur de langue : FR et NL exactement la même taille --- */
.lang { align-items: stretch; padding: 2px; gap: 2px; }
.lang button, .lang a { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; line-height: 1;
  letter-spacing: 0.08em; padding: 6px 11px; border-radius: 100px; display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none; min-width: 34px; }
.lang button.on, .lang a.on { background: var(--accent); color: var(--on-accent); }

/* --- Bouton « Devis » plus attractif (glow + relief au survol) --- */
.btn-primary { box-shadow: 0 6px 18px -7px var(--accent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px var(--accent); }
.nav .btn-primary { padding: 12px 20px; box-shadow: 0 6px 20px -6px var(--accent); }
/* CTA « Devis » : présence statique affirmée, sans pulsation infinie (lecture plus premium) */
.nav .btn-primary { box-shadow: 0 8px 24px -10px var(--accent); }

/* --- Section contact : claire et lisible (suit le thème) --- */
.devis { background: var(--surface-2); color: var(--ink); }
.devis h2 { color: var(--ink); }
.devis .lead { color: var(--ink-soft); }
.devis .assur div { color: var(--ink); }
.devis .contact-l { color: var(--ink-soft); }
.devis form { background: var(--surface); border-color: var(--line); }
.devis label { color: var(--ink-faint); }
.devis input, .devis select, .devis textarea { background: var(--ground); border-color: var(--line-strong); color: var(--ink); }
.devis input::placeholder, .devis textarea::placeholder { color: var(--ink-faint); }
.devis .drop { border-color: var(--line-strong); color: var(--ink-faint); }


/* --- FIX centrage menu (absolu, sans compresser) + bouton sur 1 ligne --- */
.nav .row { position: relative; justify-content: space-between; }
.nav .brand { flex: 0 0 auto; }
.nav .links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; gap: 30px; }
.nav .tools { flex: 0 0 auto; }
.btn { white-space: nowrap; }
.nav .btn-primary { padding: 11px 18px; }
@media (max-width: 900px){ .nav .links{ position: static; transform: none; } }


/* --- Coordonnées contact avec icônes --- */
.contact-info { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.ci-item { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); width: fit-content; }
.ci-ico { width: 44px; height: 44px; border-radius: 13px; background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; flex: none; transition: transform .18s ease, background .18s ease; }
.ci-ico svg { width: 21px; height: 21px; }
.ci-item:hover .ci-ico { background: var(--accent-strong); transform: translateY(-2px); }
.ci-txt { display: flex; flex-direction: column; line-height: 1.25; }
.ci-txt small { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.ci-txt { font-weight: 700; font-size: 1.02rem; }


/* ==========================================================
   SECTION CONTACT PREMIUM (v2) — orientée conversion
   ========================================================== */
.contact-v2 { background:#17181B; color:#F3F1EC; padding:clamp(56px,8vw,104px) 0; position:relative; overflow:hidden; border-top:1px solid var(--line); }
.contact-v2::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:42px 42px; }
.contact-v2 .wrap { position:relative; }
.cv2-head { text-align:center; max-width:640px; margin:0 auto clamp(36px,5vw,54px); }
.cv2-head .kicker { color:var(--accent); }
.cv2-head h2 { font-size:clamp(2rem,4.6vw,3rem); font-weight:800; letter-spacing:-0.03em; margin:10px 0 0; color:#F3F1EC; text-wrap:balance; }
.cv2-sub { color:#B9BCC1; font-size:1.08rem; margin:16px auto 0; max-width:52ch; }
.cv2-grid { display:grid; grid-template-columns:0.82fr 1.18fr; gap:40px; align-items:stretch; }
.cv2-left { display:flex; flex-direction:column; gap:24px; }
.cv2-guarantees { list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.cv2-guarantees li { display:flex; align-items:center; gap:13px; font-size:1.04rem; font-weight:600; }
.cv2-guarantees .g-ico { width:30px; height:30px; border-radius:9px; background:rgba(240,114,42,.16); color:#F0722A; display:flex; align-items:center; justify-content:center; flex:none; }
.cv2-guarantees .g-ico svg { width:16px; height:16px; }
.cv2-human { display:flex; align-items:center; gap:15px; padding:18px; border:1px solid rgba(255,255,255,.1); border-radius:13px; background:rgba(255,255,255,.03); }
.cv2-human .ch-av { width:50px; height:50px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--sans); flex:none; letter-spacing:-0.02em; font-size:1.05rem; }
.cv2-human b { display:block; font-size:0.98rem; color:#F3F1EC; }
.cv2-human span { color:#9AA0A6; font-size:0.86rem; }
.cv2-coords { display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:2px; }
.cv2-coords .ci-item { color:#F3F1EC; }
.cv2-coords .ci-txt small { color:#767B82; }

.cv2-card { background:#FBFAF8; border-radius:18px; padding:clamp(24px,3vw,34px); box-shadow:0 34px 70px -26px rgba(0,0,0,.6); }
.cv2-card .cc-title { font-weight:800; font-size:1.34rem; letter-spacing:-0.02em; color:#191B1F; margin:0; }
.cv2-card .cc-note { font-family:var(--mono); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:#B0764a; color:#BF4C09; margin:6px 0 20px; }
.cv2-card form { background:transparent; border:0; padding:0; display:grid; gap:14px; }
.cv2-card label { color:#878C93; }
.cv2-card input, .cv2-card select, .cv2-card textarea { background:#F2F1EE; border:1px solid #D8D6D0; color:#191B1F; }
.cv2-card input::placeholder, .cv2-card textarea::placeholder { color:#A7A39B; }
.cv2-card input:focus, .cv2-card select:focus, .cv2-card textarea:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.cv2-card .drop { border:1.5px dashed #C9C6BE; color:#878C93; background:#F2F1EE; border-radius:8px; padding:16px; text-align:center; font-size:0.82rem; }
.cv2-card .btn-primary { justify-content:center; padding:15px; font-size:1.05rem; }

@media (max-width:860px){ .cv2-grid { grid-template-columns:1fr; } }


/* ==========================================================
   HERO — animation d'entrée + grue de chantier + carte
   ========================================================== */
@keyframes heroUp { from { opacity:0; transform:translateY(20px);} to { opacity:1; transform:none;} }
@keyframes heroPhoto { from { opacity:0; transform:scale(1.05);} to { opacity:1; transform:none;} }
@media (prefers-reduced-motion: no-preference){
  .hero .eyebrow,.hero h1,.hero .sub,.hero .cta { opacity:0; animation:heroUp .7s ease forwards; }
  .hero .eyebrow { animation-delay:.10s; }
  .hero h1 { animation-delay:.24s; }
  .hero .sub { animation-delay:.42s; }
  .hero .cta { animation-delay:.58s; }
  .hero .photo { animation:heroPhoto 1s ease .15s both; }
}
/* grue de chantier discrète en fond */
.hero-crane { position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:clamp(150px,22vw,270px);
  color:var(--accent); opacity:.10; pointer-events:none; z-index:0; }
:root[data-theme="dark"] .hero-crane { opacity:.13; }
.hero-crane svg { width:100%; height:auto; display:block; }
@media (prefers-reduced-motion: no-preference){
  .crane-svg { animation:craneSwing 7s ease-in-out infinite; transform-origin:62px 42px; }
  .crane-hook { animation:craneHook 4.5s ease-in-out infinite; }
}
@keyframes craneSwing { 0%,100%{transform:rotate(-.7deg);} 50%{transform:rotate(.7deg);} }
@keyframes craneHook { 0%,100%{transform:translateY(0);} 50%{transform:translateY(34px);} }

/* carte de couverture */
.zone-map { padding:0; }
.belgium-map { width:100%; height:100%; display:block; }
.belgium-map .city circle { fill:#F0722A; }
.belgium-map .city text { fill:rgba(255,255,255,.72); font-family:var(--mono); font-size:12px; text-anchor:middle; letter-spacing:.04em; }
.belgium-map .bxl-label { fill:#F3F1EC; font-family:var(--sans); font-weight:700; font-size:14px; text-anchor:middle; letter-spacing:-.01em; }


/* carte Belgique réelle */
.belgium-map .be-shape { fill:#23262C; stroke:rgba(240,114,42,.5); stroke-width:9; vector-effect:non-scaling-stroke; }
.belgium-map .city text { font-size:26px; }
.belgium-map .bxl-label { font-size:30px; }


/* ==========================================================
   MAQUETTE 3D DU HERO — canvas WebGL par-dessus la photo
   (la photo reste le repli si WebGL/JS indisponible)
   ========================================================== */
.photo .hero-3d { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:2; opacity:0; transition:opacity .8s ease; touch-action:pan-y; cursor:grab; }
.photo .hero-3d:active { cursor:grabbing; }
.photo.has3d .hero-3d { opacity:1; }
.photo.has3d { background:radial-gradient(120% 105% at 62% 22%, #24272c 0%, #17191d 55%, #0e0f12 100%); }
.photo.has3d .photo-fallback { opacity:0; }
.photo .ph { z-index:4; pointer-events:none; }
.photo .badge-logo { pointer-events:none; }
.ph-3d { display:none; }
.photo.has3d .ph-photo { display:none; }
.photo.has3d .ph-3d { display:block; }
@media (prefers-reduced-motion: reduce) { .photo .hero-3d { transition:none; } }


/* ==========================================================
   MOTION « CHANTIER » — les sections se montent au scroll.
   États cachés scopés à .js → aucun flash ; sûrs sans JS.
   ========================================================== */
.js .svc-grid > .svc,
.js .work > .proj,
.js .why-grid > .why-c,
.js .steps > .step,
.js .head-c,
.js #zone .h2,
.js .tt,
.js .cv2-head,
.js .cv2-card {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.js .rv-in { opacity: 1 !important; transform: none !important; }
.js .why-c h3::before { width: 0; transition: width .55s cubic-bezier(.22,1,.36,1) .15s; }
.js .why-c.rv-in h3::before { width: 26px; }
.js .step::before { transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.22,1,.36,1) .12s; }
.js .step.rv-in::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .js .svc-grid > .svc, .js .work > .proj, .js .why-grid > .why-c, .js .steps > .step,
  .js .head-c, .js #zone .h2, .js .tt, .js .cv2-head, .js .cv2-card {
    opacity: 1 !important; transform: none !important;
  }
  .js .why-c h3::before { width: 26px !important; }
  .js .step::before { transform: none !important; }
}


/* ==========================================================
   FIX MOBILE — en-tête compact + anti débordement horizontal
   ========================================================== */
html { overflow-x: clip; }
.photo, .photo img, .photo .hero-3d { max-width: 100%; }
/* le hero garde ses marges latérales en mobile (ne touche pas les bords) */
@media (max-width: 900px) { .hero .grid { padding-left: var(--pad); padding-right: var(--pad); } }
@media (max-width: 600px) {
  .brand .cst { display: none; }              /* « CONSTRUCT » masqué, gain de place */
  .nav .tools { gap: 7px; }
  .nav .btn-primary { padding: 9px 13px; font-size: 0.82rem; }
  .themebtn { width: 32px; height: 32px; }
}
/* bandeau orange de confiance : grille 2×2 CENTRÉE sur téléphone (espace égal G/D) */
@media (max-width: 767px) {
  .trust .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; justify-items: center; }
  .trust .item { font-size: 0.8rem; align-items: flex-start; gap: 7px; }
  .trust .item svg { width: 15px; height: 15px; margin-top: 1px; }
}
@media (max-width: 400px) {
  .nav .btn-primary { padding: 8px 11px; font-size: 0.78rem; }
  .themebtn { display: none; }                /* écrans très étroits : on garde langue + Devis */
}


/* ==========================================================
   RÉSEAUX SOCIAUX — rangée d'icônes dans le pied de page
   ========================================================== */
.ft .socials { display: flex; gap: 10px; margin-top: 20px; }
.ft .socials a { width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; color: #C4C7CC; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.ft .socials a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: translateY(-2px); }
.ft .socials svg { width: 20px; height: 20px; }