:root{--ink:#0d1b16;--forest:#123a2f;--cream:#f2eee1;--paper:#faf7ee;--yellow:#d8f01f;--line:rgba(13,27,22,.15);--mono:"DM Mono",monospace;--display:"Bricolage Grotesque",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--display);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}
.topbar{height:88px;padding:0 4.5vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);background:rgba(242,238,225,.94);backdrop-filter:blur(16px);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:baseline;gap:10px;width:max-content}.brand strong{font-size:2rem;font-weight:800;letter-spacing:-.07em}.brand span{font:500 .68rem var(--mono);letter-spacing:.08em}
nav{display:flex;gap:32px}nav a,.phone-small{font:500 .67rem var(--mono);letter-spacing:.08em;text-transform:uppercase}.phone-small{justify-self:end;border:1px solid var(--ink);padding:12px 16px}.phone-small:hover{background:var(--ink);color:var(--paper)}
.hero{min-height:720px;display:grid;grid-template-columns:1.02fr .98fr;border-bottom:1px solid var(--line)}.hero-copy{padding:96px 3vw 70px 7vw;align-self:center}
.eyebrow{font:500 .64rem var(--mono);letter-spacing:.12em;display:flex;align-items:center;gap:10px;margin-bottom:26px}.eyebrow i{display:block;width:38px;height:1px;background:currentColor}.eyebrow.dark{color:rgba(13,27,22,.62)}.eyebrow.light{color:rgba(255,255,255,.65)}
.hero h1,.section-head h2,.process h2,.loc-copy h2{margin:0;font-size:clamp(4.3rem,7.5vw,8rem);line-height:.83;letter-spacing:-.075em;font-weight:760;max-width:9ch}.hero h1 span,.section-head h2 span,.process h2 span{font-weight:420}
.hero-copy>p{margin:38px 0 0;max-width:590px;font-size:1.24rem;line-height:1.55;color:rgba(13,27,22,.77)}.actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}.btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;font:500 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink)}.primary{background:var(--ink);color:var(--paper)}
.hero-art{background:var(--forest);position:relative;min-height:720px;color:var(--yellow);overflow:hidden}.topo{position:absolute;width:110%;height:110%;left:-5%;top:-5%;fill:none}.topo path{stroke:rgba(216,240,31,.19);stroke-width:1.1}.specimen{position:absolute;width:58%;min-width:350px;aspect-ratio:1.2;left:18%;top:27%;border:1px solid rgba(216,240,31,.36);display:flex;align-items:center;justify-content:center;transform:rotate(-4deg);background:rgba(9,35,28,.3)}.specimen svg{width:78%}.spec-label{position:absolute;top:-1px;left:-1px;background:var(--yellow);color:var(--ink);padding:8px 10px;font:500 .58rem var(--mono);letter-spacing:.08em}.dept{position:absolute;right:6%;bottom:6%;text-align:right}.dept strong{display:block;font-size:5.8rem;font-weight:800;letter-spacing:-.08em;line-height:.85}.dept span{font:500 .6rem var(--mono);letter-spacing:.11em}
.ticker{min-height:56px;display:flex;align-items:center;gap:18px;padding:0 4vw;background:var(--yellow);border-bottom:1px solid var(--ink);font:500 .72rem var(--mono);letter-spacing:.08em;white-space:nowrap;overflow:hidden}
.services{padding:110px 5vw 120px}.section-head{max-width:1320px;margin:0 auto 52px;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:end}.section-head h2{font-size:clamp(3.7rem,6.3vw,6.6rem);max-width:10ch}.section-head>p{margin:0 0 8px;max-width:470px;font-size:1.03rem;line-height:1.68;color:rgba(13,27,22,.66)}
.grid{max-width:1320px;margin:auto;display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.card{position:relative;min-height:330px;border:1px solid var(--line);padding:24px;background:var(--paper);overflow:hidden;grid-column:span 4;display:flex;flex-direction:column;justify-content:space-between}.card-xl{grid-column:span 8;min-height:390px}.olive{background:#dfe5d8}.yellow{background:var(--yellow)}.dark-card{background:var(--ink);color:var(--paper)}.mouse{background:#e6e0d3}.num{position:absolute;right:18px;top:16px;font:500 .62rem var(--mono);opacity:.58}.card-copy{position:relative;z-index:2;margin-top:auto;max-width:470px}.card-copy small{font:500 .58rem var(--mono);letter-spacing:.1em;opacity:.62}.card h3{font-size:clamp(2.35rem,4vw,4.2rem);line-height:.88;letter-spacing:-.06em;margin:12px 0 14px}.card p{margin:0;max-width:390px;font-size:.92rem;line-height:1.55;opacity:.72}.bee{position:absolute;right:5%;top:11%;width:43%;color:var(--forest);opacity:.78}.bee svg{width:100%}.stripes{position:absolute;width:180px;height:180px;right:-34px;top:60px;transform:rotate(35deg);background:repeating-linear-gradient(90deg,var(--ink) 0 18px,transparent 18px 38px)}.rings{position:absolute;width:190px;height:190px;border-radius:50%;border:1px solid rgba(18,58,47,.22);right:-40px;top:-20px;box-shadow:0 0 0 28px rgba(18,58,47,.05),0 0 0 58px rgba(18,58,47,.025)}.ratline{position:absolute;right:0;top:50px;width:52%;fill:none;stroke:var(--yellow);stroke-width:2;opacity:.78}.big-s{position:absolute;right:2%;top:-25%;font-size:24rem;line-height:1;font-weight:800;letter-spacing:-.12em;color:rgba(13,27,22,.05)}
.process{background:var(--forest);color:var(--paper);padding:110px 6vw;display:grid;grid-template-columns:.9fr 1.1fr;gap:7vw}.process-title{align-self:start;position:sticky;top:130px}.process h2{font-size:clamp(3.8rem,6vw,6.6rem);max-width:10ch}.steps{border-top:1px solid rgba(255,255,255,.24)}.step{display:grid;grid-template-columns:70px 1fr;gap:24px;padding:36px 0 42px;border-bottom:1px solid rgba(255,255,255,.2)}.step>b{font:500 .65rem var(--mono);color:var(--yellow)}.step h3{margin:0 0 12px;font-size:2.2rem;letter-spacing:-.045em}.step p{margin:0;max-width:520px;line-height:1.6;color:rgba(255,255,255,.7)}
.location{min-height:560px;display:grid;grid-template-columns:1.4fr .6fr;border-bottom:1px solid var(--line)}.map-art{position:relative;background:#dfe5d8;overflow:hidden;border-right:1px solid var(--line)}.map-art svg{position:absolute;inset:0;width:100%;height:100%;fill:none}.map-art path{stroke:rgba(18,58,47,.25);stroke-width:1.3}.pin{position:absolute;left:53%;top:45%;display:grid;gap:4px}.pin i{width:16px;height:16px;border-radius:50%;background:var(--forest);box-shadow:0 0 0 9px rgba(18,58,47,.1);margin-bottom:8px}.pin strong{font-size:1.2rem;letter-spacing:-.03em}.pin small{font:500 .65rem var(--mono)}.loc-copy{padding:80px 5vw;display:flex;flex-direction:column;justify-content:center}.loc-copy h2{font-size:clamp(3.4rem,5.5vw,5.6rem);max-width:9ch}.loc-copy p{margin:28px 0 0;font:400 .75rem/1.75 var(--mono)}
.contact{background:var(--yellow);padding:80px 5vw 42px}.contact>small{font:500 .65rem var(--mono);letter-spacing:.11em}.contact>a{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:24px 0 34px;margin-top:26px}.contact>a span{font-size:clamp(4rem,10vw,10.5rem);line-height:.82;letter-spacing:-.075em;font-weight:800}.contact>a b{font-size:clamp(3rem,7vw,7rem);font-weight:400}.contact>div{display:flex;justify-content:space-between;margin-top:28px;font:500 .62rem var(--mono);letter-spacing:.07em}
footer{min-height:82px;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:20px;padding:0 5vw;background:var(--ink);color:rgba(255,255,255,.68);font:400 .58rem var(--mono);letter-spacing:.07em}footer a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:980px){.topbar{grid-template-columns:1fr auto}nav{display:none}.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:80px 7vw}.hero-art{min-height:570px}.section-head{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.card,.card-xl{grid-column:auto}.process{grid-template-columns:1fr}.process-title{position:static}.location{grid-template-columns:1fr}.map-art{min-height:420px;border-right:0;border-bottom:1px solid var(--line)}}
@media(max-width:640px){.topbar{height:76px;padding:0 18px}.brand{gap:7px}.brand strong{font-size:1.55rem}.brand span{font-size:.52rem}.phone-small{font-size:.58rem;padding:10px 9px}.hero-copy{padding:64px 20px 56px}.hero h1{font-size:clamp(3.6rem,18vw,5.4rem)}.hero-copy>p{font-size:1.03rem}.hero-art{min-height:470px}.specimen{left:8%;width:84%;min-width:0;top:26%}.dept strong{font-size:4.2rem}.ticker{font-size:.61rem}.services{padding:76px 18px 84px}.section-head{margin-bottom:32px}.section-head h2{font-size:clamp(3.1rem,14vw,4.7rem)}.grid{grid-template-columns:1fr}.card{min-height:290px}.card-xl{min-height:330px}.process{padding:78px 20px}.process h2{font-size:clamp(3.1rem,14vw,4.8rem)}.step{grid-template-columns:45px 1fr}.map-art{min-height:330px}.loc-copy{padding:68px 20px}.contact{padding:64px 18px 34px}.contact>a span{font-size:clamp(2.8rem,13vw,5rem)}.contact>div{flex-direction:column;gap:7px}footer{grid-template-columns:1fr;gap:8px;padding:24px 18px}}


/* ==========================
   V2 — intégration des visuels
   ========================== */

/* HERO : conserve la composition split-screen, remplace seulement le visuel abstrait */
.hero-art{
  background:
    linear-gradient(90deg, rgba(18,58,47,.22), rgba(18,58,47,.06)),
    url("assets/hero.webp") center center / cover no-repeat !important;
  color:var(--yellow);
}
.hero-art::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(8,31,25,.10), rgba(8,31,25,.18)),
    linear-gradient(90deg, rgba(18,58,47,.12), transparent 55%);
  z-index:1;
  pointer-events:none;
}
.hero-art .topo,
.hero-art .specimen{
  display:none !important;
}
.hero-art .dept{
  z-index:2;
  padding:14px 16px;
  background:rgba(8,31,25,.46);
  backdrop-filter:blur(8px);
  border:1px solid rgba(216,240,31,.20);
}

/* CARTES AVEC BACKGROUND */
.visual-card{
  isolation:isolate;
  color:var(--paper);
  background:var(--forest);
}
.visual-card .card-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}
.visual-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(9,27,22,.88) 0%,
      rgba(9,27,22,.78) 24%,
      rgba(9,27,22,.46) 48%,
      rgba(9,27,22,.10) 76%,
      rgba(9,27,22,.02) 100%);
  pointer-events:none;
}
.visual-card .card-copy,
.visual-card .num{
  z-index:2;
}
.visual-card .card-copy small,
.visual-card .card-copy p{
  color:rgba(255,255,255,.86);
  opacity:1;
}
.visual-card h3{
  color:#fff;
}

/* Frelons — le nid reste visible à droite */
.visual-frelons .card-bg{
  object-position:68% center;
}
.visual-frelons::before{
  background:
    linear-gradient(90deg,
      rgba(9,27,22,.91) 0%,
      rgba(9,27,22,.84) 22%,
      rgba(9,27,22,.54) 46%,
      rgba(9,27,22,.12) 72%,
      rgba(9,27,22,.02) 100%);
}
.visual-frelons .bee{
  display:none;
}

/* Cafards — garde la zone sombre à gauche prévue par l'image */
.visual-cafards .card-bg{
  object-position:center center;
}
.visual-cafards::before{
  background:
    linear-gradient(90deg,
      rgba(9,27,22,.78) 0%,
      rgba(9,27,22,.62) 30%,
      rgba(9,27,22,.22) 58%,
      rgba(9,27,22,.04) 100%);
}
.visual-cafards .rings{
  display:none;
}

/* Rats — texte à gauche, animal visible à droite */
.visual-rats .card-bg{
  object-position:64% center;
}
.visual-rats::before{
  background:
    linear-gradient(90deg,
      rgba(6,18,14,.92) 0%,
      rgba(6,18,14,.82) 30%,
      rgba(6,18,14,.48) 55%,
      rgba(6,18,14,.12) 78%,
      rgba(6,18,14,.03) 100%);
}
.visual-rats .ratline{
  display:none;
}

/* Lisibilité du texte */
.visual-card .card-copy{
  max-width:48%;
}
.visual-frelons .card-copy{
  max-width:44%;
}

/* Sur mobile, le fond reste plein écran mais le dégradé descend verticalement */
@media(max-width:640px){
  .hero-art{
    min-height:500px;
    background-position:66% center !important;
  }

  .visual-card .card-copy,
  .visual-frelons .card-copy{
    max-width:100%;
  }

  .visual-card::before,
  .visual-frelons::before,
  .visual-cafards::before,
  .visual-rats::before{
    background:
      linear-gradient(180deg,
        rgba(9,27,22,.82) 0%,
        rgba(9,27,22,.64) 34%,
        rgba(9,27,22,.25) 64%,
        rgba(9,27,22,.05) 100%);
  }

  .visual-frelons .card-bg{object-position:66% center}
  .visual-cafards .card-bg{object-position:67% center}
  .visual-rats .card-bg{object-position:67% center}
}