
:root{
  --ink:#171915;
  --paper:#f4efe4;
  --ivory:#fbf8ef;
  --acid:#dbf542;
  --acid-soft:#e8f99b;
  --olive:#69714b;
  --tan:#d4c5aa;
  --line:rgba(23,25,21,.18);
  --mono:"DM Mono",monospace;
  --sans:"Manrope",sans-serif;
  --serif:"Instrument Serif",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  min-height:88px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 4vw;
  background:rgba(244,239,228,.94);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex;
  align-items:center;
  gap:13px;
  width:max-content;
}
.brand-az{
  font-size:2.4rem;
  font-weight:800;
  letter-spacing:-.09em;
  line-height:.8;
}
.brand-name{
  font:600 .59rem/1.18 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.nav{display:flex;gap:31px}
.nav a,.top-phone{
  font:500 .61rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.top-phone{
  justify-self:end;
  padding:12px 15px;
  border:1px solid var(--ink);
  transition:.2s;
}
.top-phone:hover{background:var(--ink);color:white}
.menu-toggle{display:none;background:none;border:0;padding:10px}
.menu-toggle span{display:block;width:24px;height:1px;background:var(--ink);margin:6px 0}

.hero{
  min-height:800px;
  display:grid;
  grid-template-columns:1.03fr .97fr;
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-copy{
  padding:110px 5vw 115px 7vw;
  align-self:center;
  position:relative;
  z-index:2;
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:25px;
  font:500 .61rem var(--mono);
  letter-spacing:.12em;
  color:rgba(23,25,21,.56);
}
.eyebrow span{width:38px;height:1px;background:currentColor}
.eyebrow.light{color:rgba(255,255,255,.66)}
.hero h1{
  margin:0;
  max-width:8ch;
  font-size:clamp(5.2rem,8vw,9rem);
  line-height:.77;
  letter-spacing:-.078em;
  font-weight:800;
}
.hero h1 em{
  font-family:var(--serif);
  font-weight:400;
}
.hero-intro{
  margin:38px 0 0;
  max-width:620px;
  font-size:1.08rem;
  line-height:1.7;
  color:rgba(23,25,21,.70);
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{
  min-height:52px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ink);
  font:500 .63rem var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.btn-dark{background:var(--ink);color:white}
.btn-line{background:transparent}
.hero-facts{
  margin-top:48px;
  max-width:620px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.hero-facts>div{padding-top:13px;border-top:1px solid var(--line)}
.hero-facts span,.small-label{
  display:block;
  margin-bottom:7px;
  font:500 .52rem var(--mono);
  letter-spacing:.09em;
  color:rgba(23,25,21,.48);
}
.hero-facts strong{font-size:.86rem}

.hero-art{
  position:relative;
  min-height:800px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,255,255,.16),transparent 42%),
    var(--acid);
}
.hero-code{
  position:absolute;
  right:-5%;
  bottom:2%;
  font-size:clamp(15rem,30vw,34rem);
  font-weight:800;
  line-height:.72;
  letter-spacing:-.12em;
  color:rgba(23,25,21,.065);
}
.hex-field{
  position:absolute;
  width:470px;
  height:520px;
  left:9%;
  top:12%;
  display:grid;
  grid-template-columns:repeat(3,120px);
  grid-auto-rows:104px;
  gap:4px 6px;
  transform:rotate(-8deg);
}
.hex-field i{
  width:118px;
  height:104px;
  border:1px solid rgba(23,25,21,.32);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.hex-field i:nth-child(2),
.hex-field i:nth-child(5),
.hex-field i:nth-child(8),
.hex-field i:nth-child(11){
  background:rgba(23,25,21,.08);
}
.target-rings{
  position:absolute;
  width:320px;
  height:320px;
  border:1px solid rgba(23,25,21,.26);
  border-radius:50%;
  right:-80px;
  top:14%;
  box-shadow:
    0 0 0 34px rgba(23,25,21,.055),
    0 0 0 70px rgba(23,25,21,.035);
}
.route-line{
  position:absolute;
  left:14%;
  bottom:17%;
  width:56%;
  height:2px;
  background:var(--ink);
  transform:rotate(-17deg);
}
.route-line::before,.route-line::after{
  content:"";
  position:absolute;
  width:11px;height:11px;border-radius:50%;
  background:var(--ink);
  top:-5px;
}
.route-line::before{left:0}
.route-line::after{right:0}
.art-label{
  position:absolute;
  right:7%;
  bottom:8%;
  font:500 .64rem var(--mono);
  letter-spacing:.12em;
}
.hero-strip{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:5;
  min-height:64px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(244,239,228,.94);
  border-top:1px solid var(--line);
  backdrop-filter:blur(12px);
}
.hero-strip span{
  display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--line);
  font:500 .57rem var(--mono);
  letter-spacing:.09em;
}

.statement{
  padding:105px 6vw;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:52px;
  border-bottom:1px solid var(--line);
}
.section-index{
  font:500 .59rem var(--mono);
  letter-spacing:.11em;
  color:rgba(23,25,21,.46);
}
.statement p{
  margin:0;
  max-width:1130px;
  font-size:clamp(3rem,5.2vw,5.8rem);
  line-height:.97;
  letter-spacing:-.06em;
}
.statement strong{
  font-family:var(--serif);
  font-weight:400;
}

.services{padding:110px 5vw 120px}
.section-head{
  max-width:1380px;
  margin:0 auto 52px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:60px;
  align-items:end;
}
.section-head h2{
  margin:0;
  max-width:11ch;
  font-size:clamp(4rem,6vw,6.7rem);
  line-height:.87;
  letter-spacing:-.073em;
}
.section-head>p{
  margin:0 0 6px;
  max-width:520px;
  font-size:1rem;
  line-height:1.72;
  color:rgba(23,25,21,.66);
}
.services-grid{
  max-width:1380px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
}
.service-card{
  min-height:400px;
  padding:26px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  border:1px solid var(--line);
}
.service-wasp{grid-column:span 7;min-height:540px;background:var(--acid)}
.service-rat{grid-column:span 5;background:var(--ink);color:white}
.service-insects{grid-column:span 5;background:var(--ivory)}
.service-other{grid-column:span 7;background:var(--tan)}
.service-no{
  position:absolute;
  right:21px;top:18px;
  font:500 .57rem var(--mono);
  opacity:.58;
}
.service-copy{position:relative;z-index:3;max-width:590px}
.service-kicker{
  font:500 .56rem var(--mono);
  letter-spacing:.11em;
  opacity:.58;
}
.service-card h3{
  margin:12px 0 14px;
  max-width:11ch;
  font-size:clamp(3.2rem,5vw,5.4rem);
  line-height:.86;
  letter-spacing:-.07em;
}
.service-card p{
  margin:0;
  max-width:480px;
  font-size:.94rem;
  line-height:1.65;
  opacity:.72;
}
.mini-hex{
  position:absolute;
  right:8%;
  top:12%;
  width:210px;height:180px;
  border:1px solid rgba(23,25,21,.28);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  box-shadow:inset 0 0 0 34px rgba(23,25,21,.035);
}
.lines-art{
  position:absolute;
  inset:0 0 auto auto;
  width:75%;height:60%;
  background:repeating-linear-gradient(135deg,transparent 0 15px,rgba(255,255,255,.10) 15px 16px);
  mask-image:linear-gradient(180deg,#000,transparent);
}
.dot-field{
  position:absolute;
  right:0;top:0;
  width:68%;height:60%;
  background:radial-gradient(circle,rgba(23,25,21,.15) 1.6px,transparent 2px);
  background-size:18px 18px;
}
.rings-art{
  position:absolute;
  right:-70px;top:-90px;
  width:360px;height:360px;border-radius:50%;
  border:1px solid rgba(23,25,21,.20);
  box-shadow:
    0 0 0 38px rgba(23,25,21,.055),
    0 0 0 78px rgba(23,25,21,.03);
}

.nuisibles{
  padding:110px 6vw;
  background:var(--ink);
  color:white;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:8vw;
}
.nuisibles-title h2{
  margin:0;
  max-width:9ch;
  font-size:clamp(4.2rem,6.3vw,7rem);
  line-height:.84;
  letter-spacing:-.075em;
}
.nuisibles-title h2 em{font-family:var(--serif);font-weight:400}
.nuisibles-title p{
  max-width:500px;
  margin:32px 0 0;
  color:rgba(255,255,255,.62);
  line-height:1.7;
}
.nuisibles-list{
  border-top:1px solid rgba(255,255,255,.24);
}
.nuisibles-list>div{
  min-height:68px;
  display:grid;
  grid-template-columns:60px 1fr;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.24);
}
.nuisibles-list span{
  font:500 .56rem var(--mono);
  color:var(--acid);
}
.nuisibles-list strong{
  font-size:1.05rem;
  font-weight:500;
}

.sector{
  min-height:610px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  border-bottom:1px solid var(--line);
}
.sector-map{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(rgba(219,245,66,.58),rgba(219,245,66,.58)),
    repeating-linear-gradient(0deg,transparent 0 32px,rgba(23,25,21,.05) 32px 33px);
  border-right:1px solid var(--line);
}
.contours{
  position:absolute;
  border:1px solid rgba(23,25,21,.22);
  border-radius:48% 52% 58% 42% / 46% 36% 64% 54%;
  transform:rotate(17deg);
}
.c1{width:780px;height:500px;left:-210px;top:-170px}
.c2{width:560px;height:390px;left:-70px;top:-60px}
.c3{width:390px;height:270px;left:60px;top:55px}
.sector-dot{
  position:absolute;
  left:58%;top:52%;
  width:17px;height:17px;border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 0 9px rgba(23,25,21,.10);
}
.map-place{
  position:absolute;
  left:calc(58% + 28px);
  top:calc(52% - 2px);
  font:500 .65rem var(--mono);
  letter-spacing:.08em;
}
.map-dept{
  position:absolute;
  left:calc(58% + 28px);
  top:calc(52% + 23px);
  font:500 .55rem var(--mono);
  opacity:.58;
}
.sector-copy{
  padding:90px 5vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sector-copy h2{
  margin:0;
  max-width:9ch;
  font-size:clamp(4rem,5.8vw,6.3rem);
  line-height:.86;
  letter-spacing:-.073em;
}
.sector-copy p{
  max-width:500px;
  margin:28px 0 0;
  color:rgba(23,25,21,.66);
  line-height:1.7;
}
.text-link{
  margin-top:28px;
  width:max-content;
  font:500 .65rem var(--mono);
  letter-spacing:.07em;
  border-bottom:1px solid var(--ink);
  padding-bottom:5px;
}

.contact{
  padding:68px 5vw 40px;
  background:var(--acid);
}
.contact-heading{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font:500 .58rem var(--mono);
  letter-spacing:.10em;
}
.contact h2{
  margin:70px 0 22px;
  font-family:var(--serif);
  font-size:clamp(3rem,4.7vw,4.8rem);
  font-weight:400;
}
.contact-phone{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:26px 0 36px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.contact-phone span{
  font-size:clamp(4.2rem,10vw,10rem);
  line-height:.78;
  letter-spacing:-.085em;
  font-weight:800;
}
.contact-phone b{
  font-size:clamp(3rem,7vw,7rem);
  font-weight:400;
}
.contact-grid{
  margin-top:28px;
  display:grid;
  grid-template-columns:1.25fr 1fr .7fr;
  gap:30px;
}
.contact-grid a,.contact-grid strong{
  font-size:.9rem;
  font-weight:600;
}
.contact .small-label{color:rgba(23,25,21,.56)}

footer{
  min-height:88px;
  padding:0 5vw;
  display:grid;
  grid-template-columns:160px 1fr auto auto;
  align-items:center;
  gap:20px;
  background:var(--ink);
  color:rgba(255,255,255,.68);
  font:400 .57rem var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.footer-brand{
  font-family:var(--sans);
  font-size:2rem;
  font-weight:800;
  letter-spacing:-.08em;
  color:white;
}


.legal-section{padding:110px 5vw 120px;border-top:1px solid var(--line);background:var(--ivory)}
.legal-heading{max-width:1380px;margin:0 auto 46px;display:grid;grid-template-columns:220px 1fr .7fr;gap:42px;align-items:end}
.legal-heading h2{margin:0;font-size:clamp(3.8rem,5.8vw,6.3rem);line-height:.87;letter-spacing:-.07em}
.legal-heading>p{margin:0 0 5px;max-width:420px;color:rgba(23,25,21,.62);line-height:1.7}
.legal-grid{max-width:1380px;margin:auto;display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.legal-card{min-height:300px;position:relative;padding:30px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden}
.legal-card:nth-child(1){background:var(--acid)}
.legal-card:nth-child(2){background:var(--paper)}
.legal-card:nth-child(3){background:var(--tan)}
.legal-card:nth-child(4){background:radial-gradient(circle,rgba(23,25,21,.08) 1.5px,transparent 2px),var(--ivory);background-size:20px 20px}
.legal-index{position:absolute;right:22px;top:20px;font:500 .56rem var(--mono);opacity:.55}
.legal-card h3{margin:58px 0 20px;font-size:clamp(2.4rem,3.3vw,3.8rem);line-height:.9;letter-spacing:-.06em}
.legal-card p{max-width:570px;margin:12px 0 0;line-height:1.7;color:rgba(23,25,21,.70)}
.legal-card a{border-bottom:1px solid currentColor;padding-bottom:2px}
.footer-legal{justify-self:end;color:white;text-decoration:underline;text-underline-offset:4px}

@media(max-width:1000px){
  .legal-heading{grid-template-columns:1fr}
  .legal-grid{grid-template-columns:1fr}
  .footer-legal{justify-self:start}

  .topbar{grid-template-columns:1fr auto}
  .nav{
    position:absolute;
    left:0;right:0;top:88px;
    display:none;
    padding:22px 4vw 28px;
    flex-direction:column;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .nav.open{display:flex}
  .menu-toggle{display:block;justify-self:end}
  .top-phone{display:none}
  .hero{grid-template-columns:1fr}
  .hero-art{min-height:600px}
  .hero-strip{position:relative;grid-column:1/-1}
  .statement{grid-template-columns:1fr}
  .section-head{grid-template-columns:1fr}
  .nuisibles{grid-template-columns:1fr}
  .sector{grid-template-columns:1fr}
  .sector-map{min-height:450px;border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:700px){
  .topbar{min-height:74px;padding:0 18px}
  .brand-az{font-size:1.85rem}
  .brand-name{font-size:.48rem}
  .nav{top:74px}
  .hero{min-height:auto}
  .hero-copy{padding:70px 20px 88px}
  .hero h1{font-size:clamp(4rem,18vw,6rem)}
  .hero-intro{font-size:1rem}
  .hero-facts{grid-template-columns:1fr}
  .hero-art{min-height:480px}
  .hex-field{transform:rotate(-8deg) scale(.75);transform-origin:left top}
  .hero-code{font-size:18rem}
  .hero-strip{grid-template-columns:1fr 1fr}
  .hero-strip span{min-height:48px;border-bottom:1px solid var(--line)}
  .statement{padding:74px 20px;gap:26px}
  .statement p{font-size:clamp(2.7rem,11vw,4rem)}
  .services{padding:78px 18px 86px}
  .section-head h2{font-size:clamp(3.2rem,14vw,4.7rem)}
  .services-grid{grid-template-columns:1fr}
  .service-wasp,.service-rat,.service-insects,.service-other{grid-column:auto;min-height:360px}
  .service-wasp{min-height:420px}
  .service-card h3{font-size:clamp(3rem,13vw,4.5rem)}
  .nuisibles{padding:78px 20px}
  .nuisibles-title h2{font-size:clamp(3.4rem,14vw,5rem)}
  .sector-map{min-height:350px}
  .sector-copy{padding:70px 20px}
  .contact{padding:60px 18px 34px}
  .contact-heading{flex-direction:column;gap:7px}
  .contact h2{margin-top:48px}
  .contact-phone span{font-size:clamp(2.9rem,13vw,5rem)}
  .contact-grid{grid-template-columns:1fr;gap:22px}
  footer{grid-template-columns:1fr;padding:26px 18px;gap:8px}
}

/* =========================================================
   V2 — intégration de la série visuelle AZ Guêpes & Nuisibles 63
   ========================================================= */
.hero-art{
  background:#ded8ca;
  isolation:isolate;
}
.hero-art-image{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:66% center;
  filter:saturate(.93) contrast(1.02);
}
.hero-art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(244,239,228,.16),transparent 30%),
    linear-gradient(180deg,transparent 58%,rgba(23,25,21,.16));
  pointer-events:none;
}
.hero-art .hero-code,
.hero-art .hex-field,
.hero-art .target-rings,
.hero-art .route-line,
.hero-art .art-label{z-index:2}
.hero-art .hero-code{color:rgba(23,25,21,.055)}
.hero-art .hex-field{opacity:.30}
.hero-art .target-rings{opacity:.34}
.hero-art .route-line{opacity:.42}
.hero-art .art-label{
  color:white;
  padding:8px 10px;
  background:rgba(23,25,21,.48);
  backdrop-filter:blur(8px);
}

.service-card{isolation:isolate}
.service-image{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.service-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.service-wasp::after{
  background:linear-gradient(90deg,rgba(219,245,66,.96) 0%,rgba(219,245,66,.90) 42%,rgba(219,245,66,.24) 68%,rgba(219,245,66,.04) 100%);
}
.service-rat::after{
  background:linear-gradient(90deg,rgba(23,25,21,.96) 0%,rgba(23,25,21,.88) 46%,rgba(23,25,21,.30) 74%,rgba(23,25,21,.08) 100%);
}
.service-insects::after{
  background:linear-gradient(90deg,rgba(251,248,239,.96) 0%,rgba(251,248,239,.87) 48%,rgba(251,248,239,.28) 76%,rgba(251,248,239,.04) 100%);
}
.service-other::after{
  background:linear-gradient(90deg,rgba(212,197,170,.96) 0%,rgba(212,197,170,.88) 44%,rgba(212,197,170,.27) 73%,rgba(212,197,170,.04) 100%);
}
.service-wasp .service-image{object-position:67% center}
.service-rat .service-image{object-position:68% center}
.service-insects .service-image{object-position:70% center}
.service-other .service-image{object-position:70% center}
.service-no{z-index:4}
.mini-hex,.lines-art,.dot-field,.rings-art{z-index:2;opacity:.38}

.nuisibles{
  position:relative;
  isolation:isolate;
  background:var(--ink);
}
.nuisibles::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--section-bg);
  background-size:cover;
  background-position:center;
  opacity:.18;
}
.nuisibles::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(23,25,21,.95),rgba(23,25,21,.82));
}

.sector-map{
  isolation:isolate;
  background:#d8d2c5;
}
.sector-image{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.sector-map::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(219,245,66,.08),rgba(23,25,21,.11));
  pointer-events:none;
}
.sector-map .contours,
.sector-map .sector-dot,
.sector-map .map-place,
.sector-map .map-dept{z-index:2}
.sector-map .contours{border-color:rgba(255,255,255,.42)}
.sector-map .sector-dot{background:var(--acid);box-shadow:0 0 0 9px rgba(219,245,66,.20)}
.sector-map .map-place,
.sector-map .map-dept{
  color:white;
  text-shadow:0 1px 12px rgba(23,25,21,.45);
}

.contact{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.contact::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--contact-bg);
  background-size:cover;
  background-position:center right;
  opacity:.45;
}
.contact::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(219,245,66,.96) 0%,rgba(219,245,66,.90) 58%,rgba(219,245,66,.72) 100%);
}

@media(max-width:700px){
  .hero-art-image{object-position:60% center}
  .service-wasp::after,
  .service-rat::after,
  .service-insects::after,
  .service-other::after{
    background:linear-gradient(180deg,rgba(244,239,228,.18) 0%,rgba(244,239,228,.30) 30%,rgba(244,239,228,.96) 78%);
  }
  .service-rat::after{
    background:linear-gradient(180deg,rgba(23,25,21,.15) 0%,rgba(23,25,21,.35) 34%,rgba(23,25,21,.95) 78%);
  }
  .service-wasp::after{background:linear-gradient(180deg,rgba(219,245,66,.12),rgba(219,245,66,.96) 76%)}
  .service-other::after{background:linear-gradient(180deg,rgba(212,197,170,.10),rgba(212,197,170,.96) 76%)}
  .service-image{object-position:center 38%!important}
}
