/* HM Travaux - custom.css
   AUTHORITATIVE DESIGN CSS extracted verbatim from hero_design.html
   (design <style> block 1 = sections + footer, block 2 = hero + nav + :root).
   @font-face block skipped: fonts loaded via Google Fonts <link> in base.html.
   Project-only additions are clearly marked at the bottom. */

/* ════════════════════════════════════════════════════════════════
   HM TRAVAUX · Sections 2 → 5 + Footer
   Hérite des tokens définis dans Hero.html (:root)
   Aesthetic: aréte vive ≤2px, mono-couleur, lignes & filets.
   ════════════════════════════════════════════════════════════════ */

/* ── Shared section chrome ──────────────────────────────────── */
.container{ max-width:1440px; margin:0 auto; padding:0 64px; }
@media (max-width:900px){ .container{ padding:0 28px; } }

.section{ position:relative; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:48px; flex-wrap:wrap;
  padding:120px 0 48px;
}
.section-head .lead{ max-width:780px; }
.section-tag{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-body); font-weight:500; font-size:12.5px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--accent);
  margin-bottom:18px;
}
.section-tag::before{
  content:""; width:42px; height:1px; background:var(--accent);
}
.section-title{
  font-family:var(--font-display); font-weight:900;
  text-transform:uppercase; line-height:.95; letter-spacing:-.005em;
  font-size:clamp(48px, 5.5vw, 96px);
  color:var(--ink);
}
.section-title em{
  display:block;
  font-family:var(--font-accent); font-style:italic; font-weight:400;
  text-transform:none; color:var(--accent); letter-spacing:-.01em;
  line-height:1.15;
  padding-bottom:.15em;        /* room for descenders */
  margin-top:.05em;
}
.section-desc{
  margin-top:24px; max-width:560px;
  font-family:var(--font-body); font-weight:300; font-size:17px;
  line-height:1.55; color:#5a5a58;
}

/* IO reveal classes — kept as no-op selectors. The browser
   throttles transition/animation timelines in non-foregrounded
   iframes, which stranded elements at opacity:0. Content is
   visible by default; visual interest comes from in-page motion
   (rings, pulse, ticker) instead of entry animations. */
.io-rise{ }
.io-rise.in{ }

/* ════════════════════════════════════════════════════════════════
   SECTION 2 — SERVICES
   ════════════════════════════════════════════════════════════════ */
.services{ background:var(--bg); padding-bottom:120px; }
.services .section-head{ padding-top:140px; }

.services-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:2px; background:#e3e3e1;
  border:1px solid #e3e3e1;
}

.service-card{
  position:relative; background:var(--paper);
  padding:40px 32px 36px;
  display:flex; flex-direction:column; gap:22px;
  min-height:300px;
  transition:transform .5s cubic-bezier(.2,.7,0,1), background .3s ease;
}
.service-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:3px; background:var(--ink);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,0,1);
}
.service-card:hover{ transform:translateY(-4px); }
.service-card:hover::after{ transform:scaleX(1); }

.service-num{
  position:absolute; top:18px; right:22px;
  font-family:var(--font-body); font-weight:500; font-size:11px;
  letter-spacing:.32em; color:#c9c9c7;
}

.service-icon{
  width:48px; height:48px; display:grid; place-items:center;
  color:var(--ink);
}
.service-icon svg{
  width:100%; height:100%; stroke:currentColor; fill:none;
  stroke-width:1.4; stroke-linecap:square; stroke-linejoin:miter;
}

.service-name{
  font-family:var(--font-display); font-weight:800;
  font-size:24px; line-height:1; letter-spacing:.01em;
  text-transform:uppercase; color:var(--ink);
}
.service-desc{
  font-family:var(--font-body); font-weight:300; font-size:14.5px;
  line-height:1.55; color:#7a7a7a;
}

@media (max-width:1100px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .services-grid{ grid-template-columns:1fr; } }


/* ════════════════════════════════════════════════════════════════
   SECTION 3 — RÉALISATIONS
   ════════════════════════════════════════════════════════════════ */
.realisations{ background:var(--paper); padding-bottom:140px; }
.realisations .section-head{ align-items:flex-end; }
.realisations .section-head .btn{ margin-bottom:6px; }

.proj-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:32px 28px;
  align-items:start;
}
@media (max-width:768px){ .proj-grid{ grid-template-columns:1fr; } }

.proj{
  display:flex; flex-direction:column;
  background:var(--paper);
  border-radius:2px;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,0,1);
}
.proj-media{
  position:relative; overflow:hidden;
  width:100%; height:380px;
  background:#f0f0ef;
}

.proj-media img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .4s cubic-bezier(.2,.7,0,1);
}
.proj:hover .proj-media img{ transform:scale(1.02); }

.proj-media::after{
  /* dégradé sombre, overlay sur l'image */
  content:""; position:absolute; left:0; right:0; top:0; bottom:0;
  background:linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.75) 100%);
  pointer-events:none;
  z-index:2;
}

/* Placeholder rendered when no image is set */
.proj-media .placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    repeating-linear-gradient(45deg,
      #f0f0ef 0 14px, #e7e7e5 14px 28px);
}
.proj-media.has-img .placeholder{ display:none; }
.proj-media .placeholder .label{
  font-family:'Barlow', monospace; font-weight:500;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:#8a8a88; padding:8px 14px;
  border:1px solid #d8d8d6; background:rgba(255,255,255,.6);
  text-align:center;
}
.proj-media img{ z-index:1; position:relative; }
.proj-media .badge{ z-index:3; }
.proj-media .overlay{ z-index:3; }

.proj-media .badge{
  position:absolute; top:14px; left:14px;
  padding:5px 12px;
  background:#2d2d2d; color:#fff;
  font-family:var(--font-display); font-weight:700;
  font-size:.65rem; letter-spacing:2px; text-transform:uppercase;
  border-radius:2px;
}

.proj-media .overlay{
  position:absolute; left:16px; right:16px; bottom:14px;
  color:#fff;
  display:flex; flex-direction:column; gap:2px;
}
.proj-media .overlay .ptitle{
  font-family:var(--font-display); font-weight:900;
  font-size:1.1rem; line-height:1.1; text-transform:uppercase;
  letter-spacing:.01em; color:#fff;
}
.proj-media .overlay .ploc{
  font-family:var(--font-body); font-weight:300;
  font-size:.75rem; color:rgba(255,255,255,.65);
  letter-spacing:.04em;
}

.proj-tags{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:14px 4px 0;
}
.proj-tag{
  padding:3px 8px;
  background:#f0f0ef; color:#2d2d2d;
  border:none; border-radius:2px;
  font-family:var(--font-display); font-weight:700;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
}

.proj-tag.dummy{ display:none; }


/* ════════════════════════════════════════════════════════════════
   SECTION — ZONE D'INTERVENTION
   ════════════════════════════════════════════════════════════════ */
.zone{ background:var(--bg); padding-bottom:100px; }
.zone .section-head{ padding-top:100px; padding-bottom:32px; }

.zone-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:start;
}
@media (max-width:900px){
  .zone-grid{ grid-template-columns:1fr; gap:32px; }
}

.zone-left{ display:flex; flex-direction:column; gap:24px; }

.zone-list{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
@media (max-width:540px){ .zone-list{ grid-template-columns:1fr; } }

.zone-item{
  background:var(--paper);
  border-left:3px solid var(--ink);
  padding:12px 16px;
  font-family:var(--font-display); font-weight:700;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
  cursor:default;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.zone-item:hover{
  background:var(--ink); color:var(--paper);
  border-left-color:var(--silver);
}

.zone-cta{ margin-top:8px; align-self:flex-start; }

/* RIGHT — map */
.zone-map{
  position:relative; overflow:hidden;
  border-radius:2px;
}
.zone-map iframe{
  width:100%; height:460px; display:block; border:0;
  filter:grayscale(100%) contrast(.85);
}
@media (max-width:768px){ .zone-map iframe{ height:280px; } }

.zone-badge{
  position:absolute; top:18px; left:18px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:var(--ink); color:var(--paper);
  font-family:var(--font-display); font-weight:700;
  font-size:.68rem; letter-spacing:2px; text-transform:uppercase;
  border-radius:2px;
}
.zone-badge svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; }


/* ════════════════════════════════════════════════════════════════
   SECTION 4 — ENGAGEMENT (dark)
   ════════════════════════════════════════════════════════════════ */
.engagement{ background:var(--ink); color:var(--paper); padding-bottom:140px; position:relative; overflow:hidden; }
.engagement::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:80px 80px;
  pointer-events:none;
}
.engagement > *{ position:relative; z-index:1; }

.engagement .section-tag{ color:rgba(255,255,255,.4); }
.engagement .section-tag::before{ background:rgba(255,255,255,.4); }
.engagement .section-title{ color:var(--paper); }
.engagement .section-title em{ color:var(--silver); }
.engagement .section-desc{ color:rgba(255,255,255,.55); }

.pillars{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:24px;
}
@media (max-width:900px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pillars{ grid-template-columns:1fr; } }

.pillar{
  position:relative;
  padding:48px 32px 80px;          /* reserve space at the bottom for the giant number */
  border-right:1px solid rgba(255,255,255,.08);
  min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-start;
  overflow:hidden;
}
.pillar:last-child{ border-right:none; }
@media (max-width:900px){
  .pillar:nth-child(2n){ border-right:none; }
  .pillar{ border-bottom:1px solid rgba(255,255,255,.08); }
  .pillar:nth-last-child(-n+2){ border-bottom:none; }
}

.pillar .big{
  position:absolute; right:16px; bottom:8px;
  font-family:var(--font-display); font-weight:900;
  font-size:6rem; line-height:1; letter-spacing:-.02em;
  color:rgba(255,255,255,.06);
  pointer-events:none; user-select:none;
  z-index:0;
}
.pillar > div{ position:relative; z-index:1; }
.pillar .ord{
  font-family:var(--font-display); font-weight:700;
  font-size:13px; letter-spacing:.32em; color:var(--silver);
}
.pillar h3{
  font-family:var(--font-display); font-weight:800;
  font-size:30px; line-height:1.05; letter-spacing:.01em;
  text-transform:uppercase; color:var(--paper);
  margin-top:18px;
}
.pillar p{
  margin-top:14px; max-width:280px;
  font-family:var(--font-body); font-weight:300; font-size:15px;
  line-height:1.55; color:rgba(255,255,255,.45);
}


/* ════════════════════════════════════════════════════════════════
   SECTION 5 — CONTACT
   ════════════════════════════════════════════════════════════════ */
.contact{ background:var(--paper); padding-bottom:140px; }

.contact-grid{
  display:grid; grid-template-columns:5fr 7fr;
  gap:80px; margin-top:24px;
}
@media (max-width:1000px){ .contact-grid{ grid-template-columns:1fr; gap:48px; } }

.info-list{ display:flex; flex-direction:column; gap:2px; background:#e3e3e1; }
.info-row{
  background:var(--paper); padding:24px 26px;
  display:grid; grid-template-columns:42px 1fr; gap:18px; align-items:center;
}
.info-row .ic{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid #e3e3e1; color:var(--ink);
}
.info-row .ic svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; }
.info-row .k{
  font-family:var(--font-body); font-weight:500; font-size:10.5px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--accent);
  display:block; margin-bottom:4px;
}
.info-row .v{
  font-family:var(--font-display); font-weight:700; font-size:18px;
  letter-spacing:.02em; color:var(--ink); text-decoration:none;
  text-transform:none;
}
.info-row .v.serif{
  font-family:var(--font-accent); font-style:italic; font-weight:400;
}

.whatsapp-btn{
  margin-top:24px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; padding:20px;
  background:#25D366; color:#0a3a17;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; border-radius:2px;
  transition:background .25s ease, transform .25s ease;
}
.whatsapp-btn:hover{ background:#1eb858; transform:translateY(-2px); }
.whatsapp-btn svg{ width:22px; height:22px; fill:#0a3a17; }

/* Form */
.contact-form{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.contact-form .field{ display:flex; flex-direction:column; gap:8px; }
.contact-form .field.full{ grid-column:1 / -1; }
.contact-form label{
  font-family:var(--font-body); font-weight:500; font-size:11px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
}
.contact-form .req{ color:var(--ink); }
.contact-form input,
.contact-form select,
.contact-form textarea{
  font-family:var(--font-body); font-weight:400; font-size:15px;
  color:var(--ink); background:var(--paper);
  border:1px solid #e0e0e0; border-radius:2px;
  padding:14px 16px; outline:none; width:100%;
  transition:border-color .2s ease;
}
.contact-form textarea{ min-height:120px; resize:vertical; font-family:var(--font-body); }
.contact-form select{ appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2d2d' stroke-width='1.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
  padding-right:42px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{ border-color:var(--ink); }
.contact-form .submit{
  grid-column:1 / -1; justify-self:flex-start;
  margin-top:6px;
}


/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */
.footer{
  background:var(--ink); color:var(--paper);
  padding:80px 0 0;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:64px;
  padding-bottom:64px;
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr; gap:40px; } }

.footer .col-title{
  font-family:var(--font-display); font-weight:800; font-size:14px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--silver);
  margin-bottom:22px;
  padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.08);
}
.footer .brand-big{
  font-family:var(--font-display); font-weight:900;
  font-size:56px; line-height:.9; text-transform:uppercase;
  letter-spacing:-.005em; color:var(--paper);
}
.footer .brand-big em{
  font-family:var(--font-accent); font-style:italic; font-weight:400;
  color:var(--silver); text-transform:none;
}
.footer .brand-tag{
  margin-top:14px;
  font-family:var(--font-body); font-weight:500; font-size:11px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--accent);
}
.footer .brand-desc{
  margin-top:24px; max-width:380px;
  font-family:var(--font-body); font-weight:300; font-size:14.5px;
  line-height:1.6; color:rgba(255,255,255,.55);
}

.footer ul{ list-style:none; padding:0; margin:0; }
.footer li + li{ margin-top:12px; }
.footer ul a, .footer ul span{
  font-family:var(--font-body); font-weight:400; font-size:14.5px;
  color:rgba(255,255,255,.65); text-decoration:none;
  transition:color .2s ease;
  display:inline-flex; align-items:center; gap:10px;
}
.footer ul a:hover{ color:var(--paper); }
.footer ul a::before{
  content:""; width:14px; height:1px; background:rgba(255,255,255,.3);
  transition:width .2s ease, background .2s ease;
}
.footer ul a:hover::before{ width:24px; background:var(--paper); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:24px 0;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  font-family:var(--font-body); font-weight:500; font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
}


/* ════════════════════════════════════════════════════════════════
   WhatsApp Floating Action Button
   ════════════════════════════════════════════════════════════════ */
.fab{
  position:fixed; right:24px; bottom:24px; z-index:80;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 12px 28px rgba(37,211,102,.35), 0 4px 10px rgba(0,0,0,.15);
  transition:transform .25s cubic-bezier(.2,.7,0,1), box-shadow .25s ease;
}
.fab:hover{ transform:translateY(-3px) scale(1.05); }
.fab svg{ width:30px; height:30px; fill:#fff; }
.fab::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(37,211,102,.45);
  animation:fab-pulse 2.2s ease-out infinite;
}
@keyframes fab-pulse{
  0%  { transform:scale(.9); opacity:.8; }
  100%{ transform:scale(1.45); opacity:0; }
}

  /* ────────────────────────────────────────────────────────────────
     HM TRAVAUX · Hero v1
     Direction: premium industriel BTP, sobre, monochrome.
     Palette stricte: #2d2d2d / #4a4a4a / #888 / #c0c0c0 / #f0f0ef / #fff.
     Type: Barlow Condensed 900 UPPERCASE (titres), DM Serif Display italic
     (mots accent), Barlow 300–500 (corps).
     Géométrie: angles vifs (≤2px), pas d'ombre colorée, lignes & filets
     comme principale ornementation.
     ──────────────────────────────────────────────────────────────── */

  :root{
    --ink:        #2d2d2d;
    --ink-2:      #4a4a4a;
    --ink-deep:   #111111;
    --accent:     #888888;
    --silver:     #c0c0c0;
    --bg:         #f0f0ef;
    --paper:      #ffffff;

    --font-display: "Barlow Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body:    "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-accent:  "DM Serif Display", Georgia, serif;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); font-weight:400; -webkit-font-smoothing:antialiased; }
  ::selection{ background:var(--ink); color:var(--paper); }

  /* ── NAV ────────────────────────────────────────────────────── */
  .nav{
    position:fixed; inset:0 0 auto 0; z-index:50;
    height:72px;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(140%) blur(8px);
    -webkit-backdrop-filter:saturate(140%) blur(8px);
    border-bottom:1px solid #e3e3e1;
  }
  .nav-inner{
    max-width:1440px; margin:0 auto; height:100%;
    padding:0 40px;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  }
  .brand{
    display:flex; align-items:center; gap:14px;
    text-decoration:none; color:var(--ink);
  }
  .nav-logo{
    height:40px; width:auto; display:block;
    background:transparent;
  }
  .nav-brand-text{
    display:flex; flex-direction:column; gap:3px; line-height:1;
  }
  .nav-name{
    font-family:var(--font-display); font-weight:900;
    font-size:1.1rem; color:#2d2d2d;
    letter-spacing:2px; text-transform:uppercase;
  }
  .nav-tagline{
    font-family:var(--font-body); font-weight:300;
    font-size:.6rem; color:#888888;
    letter-spacing:1.5px; text-transform:uppercase;
  }

  .nav-links{
    display:flex; gap:36px; justify-self:center;
    font-family:var(--font-display); font-weight:700; text-transform:uppercase;
    letter-spacing:.14em; font-size:13px;
  }
  .nav-links a{
    color:var(--ink); text-decoration:none; position:relative; padding:6px 0;
    transition:color .2s ease;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:var(--ink); transform:scaleX(0); transform-origin:left;
    transition:transform .35s cubic-bezier(.2,.7,0,1);
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a:hover::after{ transform:scaleX(1); }

  .nav-cta{ justify-self:end; display:flex; align-items:center; gap:18px; }
  .nav-phone{
    font-family:var(--font-body); font-weight:500; font-size:13px;
    color:var(--ink-2); letter-spacing:.02em;
    display:flex; align-items:center; gap:8px;
    white-space:nowrap;
  }
  .nav-phone svg{ width:14px; height:14px; stroke:var(--ink-2); }

  .btn{
    --bg: var(--ink); --fg: var(--paper); --bd: var(--ink);
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 22px; border-radius:2px;
    background:var(--bg); color:var(--fg); border:1px solid var(--bd);
    font-family:var(--font-display); font-weight:900; text-transform:uppercase;
    letter-spacing:.14em; font-size:12.5px; line-height:1;
    text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
    transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  }
  .btn .arrow{ display:inline-block; transition:transform .3s cubic-bezier(.2,.7,0,1); }
  .btn:hover .arrow{ transform:translateX(4px); }
  .btn.ghost{ --bg:transparent; --fg:var(--paper); --bd:rgba(255,255,255,.45); }
  .btn.ghost:hover{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
  .btn.dark:hover{ --bg:#000; --bd:#000; }
  .btn.solid-light{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
  .btn.solid-light:hover{ --bg:var(--silver); --bd:var(--silver); }

  /* ── HERO ───────────────────────────────────────────────────── */
  main{ padding-top:72px; }

  .hero{
    display:grid; grid-template-columns:55fr 45fr;
    min-height:calc(100vh - 72px);
    background:var(--ink);
  }

  /* LEFT — content panel */
  .hero-left{
    position:relative; background:var(--ink); color:var(--paper);
    padding:64px 72px 56px;
    display:flex; flex-direction:column; justify-content:space-between;
    overflow:hidden;
  }
  /* faint grid texture */
  .hero-left::before{
    content:""; position:absolute; inset:0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:64px 64px;
    pointer-events:none;
  }
  .hero-left > *{ position:relative; z-index:1; }

  .tag{
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 14px; border:1px solid rgba(255,255,255,.18);
    border-radius:2px; background:rgba(255,255,255,.03);
    font-family:var(--font-body); font-weight:500; font-size:12px;
    letter-spacing:.18em; text-transform:uppercase; color:var(--silver);
    width:max-content;
  }
  .tag .dot{
    width:7px; height:7px; background:var(--paper); border-radius:50%;
    box-shadow:0 0 0 4px rgba(255,255,255,.08);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{ box-shadow:0 0 0 4px rgba(255,255,255,.08); }
    50%   { box-shadow:0 0 0 8px rgba(255,255,255,.02); }
  }

  .eyebrow{
    margin-top:38px;
    display:flex; align-items:center; gap:14px;
    font-family:var(--font-body); font-weight:500; font-size:12.5px;
    letter-spacing:.32em; text-transform:uppercase; color:var(--silver);
  }
  .eyebrow .line{ width:48px; height:1px; background:var(--silver); opacity:.5; }

  .title{
    margin-top:18px;
    font-family:var(--font-display); font-weight:900;
    text-transform:uppercase; line-height:.86;
    letter-spacing:-.005em;
    font-size:clamp(64px, 7.6vw, 132px);
    color:var(--paper);
  }
  .title .row{ display:block; }
  .title .row.indent{ padding-left:.6em; }
  .title .accent{
    font-family:var(--font-accent); font-weight:400; font-style:italic;
    text-transform:none; letter-spacing:-.01em;
    color:var(--silver);
  }
  .title .stroke{
    -webkit-text-stroke:1.5px var(--silver); color:transparent;
  }

  .lede{
    margin-top:32px; max-width:560px;
    font-family:var(--font-body); font-weight:300; font-size:17px;
    line-height:1.55; color:#cfcfcd;
  }
  .lede b{ color:var(--paper); font-weight:500; }

  .cta-row{
    margin-top:36px; display:flex; gap:14px; flex-wrap:wrap;
  }

  /* Stats strip */
  .stats{
    margin-top:64px;
    display:grid; grid-template-columns:repeat(3, 1fr);
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:28px;
  }
  .stat{ padding-right:24px; border-right:1px solid rgba(255,255,255,.08); }
  .stat:last-child{ border-right:none; padding-right:0; padding-left:24px; }
  .stat:nth-child(2){ padding-left:24px; }
  .stat .num{
    font-family:var(--font-display); font-weight:900; font-size:56px;
    line-height:1; letter-spacing:-.01em; color:var(--paper);
    display:flex; align-items:baseline; gap:2px;
  }
  .stat .num .suffix{ font-size:32px; color:var(--silver); }
  .stat .lbl{
    margin-top:10px;
    font-family:var(--font-body); font-weight:500; font-size:11.5px;
    letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  }

  /* RIGHT — brand panel */
  .hero-right{
    position:relative; background:var(--ink-deep);
    overflow:hidden; isolation:isolate;
    display:flex; flex-direction:column;
  }
  .hero-right::before{
    /* subtle diagonal hatch */
    content:""; position:absolute; inset:0;
    background-image: repeating-linear-gradient(135deg,
      rgba(255,255,255,.025) 0 1px, transparent 1px 14px);
    pointer-events:none;
  }

  .stage{
    position:relative; flex:1;
    display:grid; place-items:center;
  }

  .ring{
    position:absolute; left:50%; top:50%;
    border:1px solid rgba(192,192,192,.18);
    border-radius:50%;
    transform:translate(-50%,-50%);
  }
  .ring.r1{ width:280px; height:280px; animation:spin 40s linear infinite; }
  .ring.r2{ width:440px; height:440px; border-color:rgba(192,192,192,.12); animation:spin 70s linear reverse infinite; }
  .ring.r3{ width:620px; height:620px; border-color:rgba(192,192,192,.07); animation:spin 110s linear infinite; }
  .ring.r4{ width:820px; height:820px; border-color:rgba(192,192,192,.045); }
  /* tick marks on r2 */
  .ring.r2::before, .ring.r2::after{
    content:""; position:absolute; left:50%; width:1px; height:14px;
    background:var(--silver);
  }
  .ring.r2::before{ top:-7px; transform:translateX(-50%); }
  .ring.r2::after { bottom:-7px; transform:translateX(-50%); }
  /* orbiting dot on r3 */
  .orbit{
    position:absolute; left:50%; top:50%;
    width:620px; height:620px;
    transform:translate(-50%,-50%);
    animation:spin 18s linear infinite;
    pointer-events:none;
  }
  .orbit .pin{
    position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
    width:10px; height:10px; background:var(--paper);
    box-shadow:0 0 0 6px rgba(255,255,255,.06);
  }
  @keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
  .orbit{ animation-name:spin-orbit; }
  @keyframes spin-orbit{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

  /* Real HM Travaux logo — assumes a TRANSPARENT PNG (Step 5).
     No filter / no mix-blend-mode: the transparent PNG renders clean
     on the stage. Swap data/images.py "logo" to the transparent PNG URL. */
  .logo-img{
    position:relative; z-index:2;
    width:100%; height:100%;
    padding:48px;
    display:block;
    object-fit:contain;
    filter: brightness(0) invert(1);   /* recolor dark PNG -> white on dark stage */
  }

  /* corner coords / metadata */
  .meta-tl, .meta-tr, .meta-bl{
    position:absolute; z-index:3;
    font-family:var(--font-body); font-weight:500; font-size:10.5px;
    letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
  }
  .meta-tl{ top:24px; left:28px; }
  .meta-tr{ top:24px; right:28px; text-align:right; }
  .meta-bl{ bottom:96px; left:28px; }
  .meta-tl b, .meta-tr b, .meta-bl b{ color:var(--silver); font-weight:600; }

  /* info bar */
  .info-bar{
    position:relative; z-index:3;
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.35);
    display:grid; grid-template-columns:1fr 1fr 1fr;
  }
  .info-bar .cell{
    padding:18px 22px;
    border-right:1px solid rgba(255,255,255,.06);
    display:flex; flex-direction:column; gap:4px;
  }
  .info-bar .cell:last-child{ border-right:none; }
  .info-bar .k{
    font-family:var(--font-body); font-weight:500; font-size:10px;
    letter-spacing:.3em; text-transform:uppercase; color:var(--accent);
  }
  .info-bar .v{
    font-family:var(--font-display); font-weight:700; font-size:15px;
    letter-spacing:.04em; color:var(--paper); text-transform:uppercase;
  }
  .info-bar .v.serif{
    font-family:var(--font-accent); font-style:italic; font-weight:400;
    text-transform:none; color:var(--silver); letter-spacing:.01em;
  }

  /* ── TICKER (bonus, sits under hero) ────────────────────────── */
  .ticker{
    background:#1a1a1a; color:var(--paper);
    border-top:1px solid #2a2a2a; border-bottom:1px solid #2a2a2a;
    overflow:hidden; white-space:nowrap;
    padding:22px 0;
  }
  .ticker-track{
    display:inline-flex; gap:56px; padding-left:56px;
    animation:slide 38s linear infinite;
  }
  .ticker-item{
    display:inline-flex; align-items:center; gap:18px;
    font-family:var(--font-display); font-weight:900; font-size:26px;
    letter-spacing:.08em; text-transform:uppercase;
  }
  .ticker-item .sep{ color:var(--accent); font-size:14px; }
  .ticker-item:nth-child(odd) .lbl{ color:var(--silver); }
  @keyframes slide{ to{ transform:translateX(-50%); } }

  /* Entry animations removed: preview iframes throttle animation
     timelines, leaving content stuck at the 0% keyframe. The
     orbiting rings + pulsing tag dot provide enough motion. */
  .reveal{ /* no-op — class kept for future opt-in */ }

  /* ── responsive ─────────────────────────────────────────────── */
  @media (max-width: 1100px){
    .nav-links{ display:none; }
    .hero{ grid-template-columns:1fr; }
    .hero-left{ padding:48px 32px; }
    .hero-right{ min-height:560px; }
    .meta-bl{ display:none; }
    .stat .num{ font-size:42px; }
  }
  @media (max-width: 640px){
    .hero-left{ padding:36px 22px; }
    .title{ font-size:64px; }
    .stats{ grid-template-columns:1fr; }
    .stat{ border-right:none; border-bottom:1px solid rgba(255,255,255,.08); padding:14px 0 !important; }
  }


/* ============================================================
   PROJECT ADDITIONS  (not present in the authoritative design)
   These are appended below the verbatim design CSS.
   ============================================================ */

/* Fixed nav offset (the design nav is position:fixed) */
main { padding-top: 72px; }

/* ===== MOBILE NAV (project addition) ===== */
.hamburger-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}
.hamburger-line {
  width: 26px;
  height: 2px;
  background: var(--ink);
  transition: all .3s ease;
}
.nav.scrolled, .nav-scrolled {
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 78%;
  max-width: 320px;
  height: 100vh;
  background: var(--bg);
  box-shadow: -12px 0 40px rgba(0,0,0,.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 90px 28px 28px;
  transition: right .35s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open {
  right: 0;
}
.mobile-menu a {
  padding: 14px 0;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a.m-cta {
  margin-top: 12px;
  background: var(--ink);
  color: var(--bg);
  text-align: center;
  border-radius: 999px;
  border: none;
  padding: 14px;
}
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
  z-index: 999;
}
.mobile-menu-overlay.show {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 1100px) {
  .hamburger-btn { display: flex; }
  .nav-links { display: none; }
  .hamburger-line.active:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger-line.active:nth-child(2) { opacity: 0; }
  .hamburger-line.active:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ===== WHATSAPP FLOATING BUTTON (project addition) ===== */
.fab, .wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  z-index: 1200;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fab:hover, .wa-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,.24);
}
.fab svg, .wa-float svg { width: 30px; height: 30px; fill: #fff; }


/* ============================================================
   COMPAT TOKENS  (legacy aliases referenced by tests / base.html)
   ============================================================ */
:root{
  --dark:  #2d2d2d;   /* legacy alias of --ink  */
  --gray:  #7a7a7a;   /* legacy neutral         */
  --line:  #e3e3e1;   /* hairline border colour */
}
/* .btn-primary = design's primary (dark) button, kept as an alias */
.btn-primary{ background:var(--ink); color:var(--paper); }
html, body{ overflow-x:hidden; }


/* ============================================================
   PROJECT ADDITION — full-screen lightbox for réalisations
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  display:none; align-items:center; justify-content:center;
  background:rgba(17,17,17,.94);
  padding:32px;
  backdrop-filter:blur(4px);
}
.lightbox.open{ display:flex; }
.lightbox-fig{
  margin:0; max-width:92vw; max-height:90vh;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.lightbox-fig img{
  max-width:100%; max-height:82vh;
  object-fit:contain; border-radius:2px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox-fig figcaption{
  font-family:var(--font-display); font-weight:700;
  font-size:1rem; letter-spacing:.16em; text-transform:uppercase;
  color:#fff;
}
.lightbox-close{
  position:absolute; top:24px; right:32px;
  width:48px; height:48px;
  background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.25); border-radius:2px;
  font-size:2rem; line-height:1; cursor:pointer;
  transition:background .2s ease;
}
.lightbox-close:hover{ background:rgba(255,255,255,.2); }
body.lightbox-locked{ overflow:hidden; }