:root{
  --ink:#0a1827;
  --blue:#315cff;
  --blue-2:#7fa9ff;
  --ice:#dcecff;
  --paper:#f8fafb;
  --soft:#eef2f3;
  --line:rgba(10,24,39,.14);
  --mono:"DM Mono",monospace;
  --sans:"Manrope",sans-serif;
  --serif:"Newsreader",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

.topbar{
  position:sticky;
  top:0;
  z-index:40;
  height:82px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 4vw;
  background:rgba(248,250,251,.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  width:max-content;
}
.brand strong{
  font-size:2rem;
  letter-spacing:-.07em;
  font-weight:800;
}
.brand span{
  font:500 .63rem var(--mono);
  letter-spacing:.12em;
}
nav{display:flex;gap:30px}
nav a,.top-phone{
  font:500 .64rem var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.top-phone{
  justify-self:end;
  padding:12px 15px;
  border:1px solid var(--ink);
  transition:.2s;
}
.top-phone:hover{background:var(--ink);color:white}

.hero{
  position:relative;
  min-height:780px;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:86px 86px;
  opacity:.28;
  pointer-events:none;
}
.hero-copy{
  position:relative;
  z-index:2;
  align-self:center;
  padding:100px 4vw 120px 7vw;
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font:500 .62rem var(--mono);
  letter-spacing:.12em;
  color:rgba(10,24,39,.58);
  margin-bottom:24px;
}
.eyebrow span{display:block;width:38px;height:1px;background:currentColor}
.eyebrow.dark{color:rgba(10,24,39,.56)}

.hero h1{
  margin:0;
  font-size:clamp(5rem,8.3vw,9.2rem);
  line-height:.77;
  letter-spacing:-.075em;
  font-weight:760;
  max-width:7.8ch;
}
.hero h1 em{
  font-family:var(--serif);
  font-weight:400;
}
.hero-copy>p{
  max-width:560px;
  margin:40px 0 0;
  font-size:1.16rem;
  line-height:1.65;
  color:rgba(10,24,39,.72);
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{
  display:inline-flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border:1px solid var(--ink);
  font:500 .65rem var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.btn-blue{background:var(--blue);border-color:var(--blue);color:white}
.btn-line:hover{background:var(--ink);color:white}

.hero-panel{
  position:relative;
  background:linear-gradient(145deg,#dcecff 0%,#b9d7ff 48%,#7fa9ff 100%);
  overflow:hidden;
  min-height:780px;
}
.panel-number{
  position:absolute;
  top:8%;
  right:8%;
  font-size:clamp(7rem,13vw,15rem);
  line-height:.8;
  font-weight:800;
  letter-spacing:-.09em;
  color:rgba(49,92,255,.18);
}
.panel-copy{
  position:absolute;
  top:7%;
  left:7%;
  font:500 .62rem/1.5 var(--mono);
  letter-spacing:.12em;
}
.clean-mark{
  position:absolute;
  left:13%;
  right:10%;
  top:31%;
  bottom:16%;
  transform:skewY(-8deg);
}
.clean-mark span{
  position:absolute;
  left:0;
  right:0;
  height:18%;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(5px);
}
.clean-mark span:nth-child(1){top:0}
.clean-mark span:nth-child(2){top:27%;left:10%}
.clean-mark span:nth-child(3){top:54%;right:9%}
.clean-mark span:nth-child(4){top:81%;left:16%}
.orb{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(49,92,255,.3);
}
.orb-a{
  width:330px;height:330px;right:-100px;bottom:-80px;
  box-shadow:0 0 0 44px rgba(49,92,255,.06),0 0 0 92px rgba(49,92,255,.03);
}
.orb-b{
  width:120px;height:120px;left:-30px;top:18%;
  background:rgba(255,255,255,.18);
}

.hero-bottom{
  position:absolute;
  z-index:3;
  left:0;right:0;bottom:0;
  min-height:66px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(248,250,251,.92);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.hero-bottom span{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-right:1px solid var(--line);
  font:500 .58rem var(--mono);
  letter-spacing:.08em;
}

.statement{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:40px;
  padding:100px 6vw;
  border-bottom:1px solid var(--line);
}
.statement-index{
  font:500 .61rem var(--mono);
  letter-spacing:.1em;
  color:rgba(10,24,39,.54);
}
.statement-text p{
  margin:0;
  max-width:980px;
  font-size:clamp(2.8rem,5vw,5.5rem);
  line-height:.98;
  letter-spacing:-.055em;
}
.statement-text strong{
  font-family:var(--serif);
  font-weight:400;
}

.services{
  padding:18px 5vw 120px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
}
.service-card{
  position:relative;
  overflow:hidden;
  min-height:390px;
  padding:26px;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:white;
}
.service-main{
  grid-column:span 8;
  min-height:530px;
  background:#e8f1ff;
}
.service-blue{
  grid-column:span 4;
  background:var(--blue);
  color:white;
}
.service-light{
  grid-column:span 5;
  background:#f3f5f5;
}
.service-dark{
  grid-column:span 7;
  background:var(--ink);
  color:white;
}
.service-index{
  position:absolute;
  top:20px;
  right:22px;
  z-index:3;
  font:500 .6rem var(--mono);
  letter-spacing:.08em;
  opacity:.58;
}
.service-copy{position:relative;z-index:3;max-width:500px}
.service-kicker{
  font:500 .58rem var(--mono);
  letter-spacing:.10em;
  opacity:.62;
}
.service-card h2{
  margin:12px 0 14px;
  font-size:clamp(3rem,5vw,5.3rem);
  line-height:.87;
  letter-spacing:-.065em;
}
.service-card p{
  margin:0;
  max-width:420px;
  font-size:.95rem;
  line-height:1.62;
  opacity:.72;
}
.service-visual{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.visual-clean{
  background:
    linear-gradient(125deg,rgba(255,255,255,.8),rgba(127,169,255,.08)),
    linear-gradient(90deg,rgba(49,92,255,.06) 1px,transparent 1px),
    linear-gradient(rgba(49,92,255,.06) 1px,transparent 1px);
  background-size:auto,58px 58px,58px 58px;
}
.shine{
  position:absolute;
  width:72%;
  height:70px;
  right:-10%;
  background:rgba(255,255,255,.7);
  transform:rotate(-18deg);
  filter:blur(.2px);
}
.shine-a{top:18%}
.shine-b{top:39%;right:4%;width:50%}
.shine-c{top:62%;right:-3%;width:64%}
.blue-lines{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 34px,rgba(255,255,255,.12) 34px 35px);
}
.corner-mark{
  position:absolute;
  width:300px;height:300px;
  border:1px solid rgba(49,92,255,.2);
  border-radius:50%;
  right:-80px;top:-70px;
  box-shadow:0 0 0 40px rgba(49,92,255,.045),0 0 0 85px rgba(49,92,255,.02);
}
.stack{
  position:absolute;
  right:7%;
  top:15%;
  width:36%;
  height:55%;
}
.stack i{
  position:absolute;
  inset:0;
  border:1px solid rgba(127,169,255,.48);
  transform:rotate(8deg);
}
.stack i:nth-child(2){transform:rotate(-2deg) translate(-16px,18px)}
.stack i:nth-child(3){transform:rotate(17deg) translate(18px,-8px)}
.stack i:nth-child(4){transform:rotate(-12deg) translate(-8px,-18px)}

.approach{
  padding:110px 6vw;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:8vw;
  background:#dcecff;
}
.approach-head h2{
  margin:0;
  font-size:clamp(3.8rem,6vw,6.8rem);
  line-height:.86;
  letter-spacing:-.07em;
  max-width:9ch;
}
.approach-head h2 em{font-family:var(--serif);font-weight:400}
.approach-list{border-top:1px solid rgba(10,24,39,.18)}
.approach-row{
  display:grid;
  grid-template-columns:55px 160px 1fr;
  gap:20px;
  padding:32px 0 36px;
  border-bottom:1px solid rgba(10,24,39,.18);
}
.approach-row>span{
  font:500 .61rem var(--mono);
  color:var(--blue);
}
.approach-row h3{
  margin:0;
  font-size:1.5rem;
  letter-spacing:-.035em;
}
.approach-row p{
  margin:0;
  max-width:520px;
  line-height:1.65;
  color:rgba(10,24,39,.66);
}

.location{
  min-height:560px;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  border-bottom:1px solid var(--line);
}
.location-graphic{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#f6f7f6,#e7edf1);
  border-right:1px solid var(--line);
}
.mountain{
  position:absolute;
  left:-5%;right:-5%;
  clip-path:polygon(0 100%,21% 49%,34% 70%,52% 22%,71% 64%,84% 37%,100% 100%);
}
.mountain-a{
  bottom:0;height:66%;
  background:rgba(49,92,255,.10);
}
.mountain-b{
  bottom:-3%;height:47%;
  transform:scaleX(-1);
  background:rgba(10,24,39,.09);
}
.map-dot{
  position:absolute;
  left:51%;top:47%;
  width:17px;height:17px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 9px rgba(49,92,255,.12);
}
.map-label{
  position:absolute;
  left:calc(51% + 28px);
  top:calc(47% - 1px);
  font:500 .68rem var(--mono);
  letter-spacing:.1em;
}
.location-copy{
  padding:80px 5vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.location-copy h2{
  margin:0;
  font-size:clamp(3.5rem,5.4vw,5.8rem);
  line-height:.88;
  letter-spacing:-.065em;
}
.location-copy p{
  margin:30px 0 0;
  font:400 .75rem/1.8 var(--mono);
}

.hours{
  padding:92px 6vw 110px;
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:8vw;
}
.hours-title h2{
  margin:0;
  font-size:clamp(3.2rem,5vw,5.3rem);
  line-height:.9;
  letter-spacing:-.06em;
}
.hours-grid{border-top:1px solid var(--line)}
.hours-grid div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:25px 0;
  border-bottom:1px solid var(--line);
}
.hours-grid span,.hours-grid strong{
  font:500 .67rem var(--mono);
  letter-spacing:.08em;
}
.hours-grid strong{font-size:.8rem}

.contact{
  background:var(--blue);
  color:white;
  padding:62px 5vw 38px;
}
.contact-top{
  display:flex;
  justify-content:space-between;
  font:500 .6rem var(--mono);
  letter-spacing:.1em;
}
.contact>p{
  margin:65px 0 20px;
  font-family:var(--serif);
  font-size:clamp(2.4rem,4vw,4rem);
}
.contact-phone{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.75);
  border-bottom:1px solid rgba(255,255,255,.75);
  padding:25px 0 34px;
}
.contact-phone span{
  font-size:clamp(4rem,10vw,10.7rem);
  line-height:.8;
  letter-spacing:-.075em;
  font-weight:800;
}
.contact-phone b{
  font-size:clamp(3rem,7vw,7rem);
  font-weight:400;
}
.contact-address{
  margin-top:26px;
  font:500 .62rem var(--mono);
  letter-spacing:.08em;
}

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,.67);
  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 120px}
  .hero-panel{min-height:560px}
  .hero-bottom{position:relative;grid-column:1/-1}
  .statement{grid-template-columns:1fr}
  .services{grid-template-columns:1fr 1fr}
  .service-main,.service-blue,.service-light,.service-dark{grid-column:auto}
  .approach{grid-template-columns:1fr}
  .location{grid-template-columns:1fr}
  .location-graphic{min-height:420px;border-right:0;border-bottom:1px solid var(--line)}
  .hours{grid-template-columns:1fr}
}

@media(max-width:640px){
  .topbar{height:74px;padding:0 18px}
  .brand strong{font-size:1.55rem}
  .brand span{font-size:.5rem}
  .top-phone{font-size:.55rem;padding:10px 8px}

  .hero-copy{padding:64px 20px 78px}
  .hero h1{font-size:clamp(4rem,18vw,6rem)}
  .hero-copy>p{font-size:1rem}
  .hero-panel{min-height:450px}
  .panel-number{font-size:8rem}
  .clean-mark{left:8%;right:6%;top:30%;bottom:14%}
  .hero-bottom{grid-template-columns:1fr 1fr}
  .hero-bottom span{min-height:48px;border-bottom:1px solid var(--line)}

  .statement{padding:72px 20px}
  .statement-text p{font-size:clamp(2.6rem,11vw,4rem)}

  .services{padding:18px 18px 82px;grid-template-columns:1fr}
  .service-main,.service-blue,.service-light,.service-dark{grid-column:auto}
  .service-card{min-height:330px}
  .service-main{min-height:420px}
  .service-card h2{font-size:clamp(2.8rem,13vw,4rem)}

  .approach{padding:76px 20px}
  .approach-head h2{font-size:clamp(3.2rem,14vw,4.8rem)}
  .approach-row{grid-template-columns:42px 1fr}
  .approach-row p{grid-column:2}

  .location-graphic{min-height:340px}
  .location-copy{padding:66px 20px}

  .hours{padding:72px 20px}
  .hours-grid div{flex-direction:column;gap:8px}

  .contact{padding:58px 18px 32px}
  .contact-phone span{font-size:clamp(2.8rem,13vw,5rem)}
  .contact-top{gap:20px}

  footer{grid-template-columns:1fr;gap:7px;padding:24px 18px}
}


/* =========================================================
   V2 — intégration des illustrations Banana 2
   ========================================================= */

/* HERO */
.hero-panel-visual{
  background:#dcecff !important;
}
.hero-panel-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}
.hero-panel-visual::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(220,236,255,.02), rgba(49,92,255,.04)),
    linear-gradient(90deg, rgba(248,250,251,.08), transparent 28%);
  pointer-events:none;
}
.hero-panel-visual .panel-number,
.hero-panel-visual .panel-copy,
.hero-panel-visual .clean-mark,
.hero-panel-visual .orb{
  display:none !important;
}

/* CARTES */
.service-photo{
  isolation:isolate;
  color:var(--ink);
}
.service-photo .service-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}
.service-photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(248,250,251,.96) 0%,
      rgba(248,250,251,.92) 22%,
      rgba(248,250,251,.72) 42%,
      rgba(248,250,251,.24) 66%,
      rgba(248,250,251,.03) 100%);
}
.service-photo .service-copy,
.service-photo .service-index{
  position:relative;
  z-index:2;
}
.service-photo .service-copy{
  max-width:46%;
}
.service-photo .service-kicker,
.service-photo p{
  color:rgba(10,24,39,.74);
  opacity:1;
}

/* nettoyage */
.service-cleaning .service-bg{
  object-position:68% center;
}
.service-cleaning .service-visual{
  display:none;
}

/* remise en état */
.service-restore .service-bg{
  object-position:64% center;
}
.service-restore .corner-mark{
  display:none;
}

/* débarrassage */
.service-declutter{
  color:var(--ink) !important;
  background:#f7faff !important;
}
.service-declutter .service-bg{
  object-position:center center;
}
.service-declutter::before{
  background:
    linear-gradient(90deg,
      rgba(248,250,251,.98) 0%,
      rgba(248,250,251,.94) 26%,
      rgba(248,250,251,.76) 45%,
      rgba(248,250,251,.30) 66%,
      rgba(248,250,251,.04) 100%);
}
.service-declutter .stack{
  display:none;
}
.service-declutter .service-kicker,
.service-declutter p{
  color:rgba(10,24,39,.72) !important;
}

/* APPROCHE */
.approach-visual{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#dcecff;
}
.approach-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  opacity:.45;
}
.approach-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(220,236,255,.97) 0%,
      rgba(220,236,255,.93) 35%,
      rgba(220,236,255,.76) 58%,
      rgba(220,236,255,.60) 100%);
  pointer-events:none;
}
.approach-visual .approach-head,
.approach-visual .approach-list{
  position:relative;
  z-index:2;
}

/* LOCALISATION */
.location-photo{
  background:#edf5fb !important;
}
.location-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.location-photo .mountain,
.location-photo .map-dot,
.location-photo .map-label{
  display:none !important;
}
.location-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(248,250,251,.02), rgba(49,92,255,.04));
  pointer-events:none;
}

/* meilleur contraste sur desktop */
@media (min-width: 981px){
  .service-cleaning .service-copy{max-width:42%}
  .service-restore .service-copy{max-width:48%}
  .service-declutter .service-copy{max-width:44%}
}

/* mobile */
@media(max-width:640px){
  .hero-panel-bg{
    object-position:66% center;
  }

  .service-photo .service-copy{
    max-width:100%;
  }

  .service-photo::before,
  .service-declutter::before{
    background:
      linear-gradient(180deg,
        rgba(248,250,251,.95) 0%,
        rgba(248,250,251,.86) 34%,
        rgba(248,250,251,.48) 65%,
        rgba(248,250,251,.08) 100%);
  }

  .service-cleaning .service-bg{object-position:70% center}
  .service-restore .service-bg{object-position:70% center}
  .service-declutter .service-bg{object-position:40% center}

  .approach-bg{
    opacity:.30;
  }

  .approach-visual::before{
    background:
      linear-gradient(180deg,
        rgba(220,236,255,.97) 0%,
        rgba(220,236,255,.91) 45%,
        rgba(220,236,255,.74) 100%);
  }

  .location-photo img{
    object-position:center;
  }
}