/* ==========================================================
   ACCUEIL — styles propres à la page d'accueil
   Bandes alternées ivoire / sable / noir, carré corail du hero coupé par le bord.
   ========================================================== */

/* HERO */
.hero{padding:0; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; min-height:min(820px,calc(100svh - var(--header-h)));}
.hero-txt{
  padding:clamp(40px,6vw,88px) var(--gutter) clamp(48px,6vw,88px);
  display:flex; flex-direction:column; justify-content:center; gap:22px;
  max-width:720px; margin-left:auto; width:100%; position:relative; z-index:2;
}
.hero h1{font-size:clamp(38px,5vw,72px); line-height:1.08;}
.hero h1 .gap{display:block; height:.35em;}
.hero .lead{margin:0;}
.hl{background:var(--accent); padding:0 .12em; white-space:nowrap; line-height:1.2; display:inline-block; margin-top:.08em; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.city{display:inline-flex; border:2px solid var(--encre); width:max-content;}
.city button{font-size:14px; font-weight:600; padding:8px 14px;}
.city button[aria-pressed="true"]{background:var(--encre); color:var(--ivoire);}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}
.hero-photo{position:relative; min-height:420px;}
.hero-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%;}
.hero-square{
  position:absolute; z-index:1; aspect-ratio:1; background:var(--accent);
  width:clamp(180px,24vw,320px);
  left:calc(52.5% - clamp(90px,12vw,160px));
  bottom:calc(-1 * clamp(110px,15vw,220px));
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-photo{order:-1; min-height:62vw;}
  .hero-txt{margin:0; max-width:none;}
  .hero-square{left:auto; right:-40px; bottom:auto; top:calc(62vw - 70px); width:140px;}
}

/* CHIFFRES CLÉS */
.kpis{background:var(--encre); color:var(--ivoire); padding-block:28px;}
.kpis ul{list-style:none; display:flex; flex-wrap:wrap; gap:16px 56px; justify-content:space-between;}
.kpis li{display:flex; align-items:baseline; gap:12px;}
.kpis b{font-size:clamp(28px,3vw,40px); font-weight:900; color:var(--accent);}
.kpis span{font-size:15px; color:#CFC7BD;}

/* CONSTAT */
.pains{list-style:none; margin-top:48px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));}
.pains li{border-top:2px solid var(--encre); padding:22px 24px 0 0;}
.pains .n{font-weight:600; color:var(--accent-texte); font-variant-numeric:tabular-nums;}
.pains b{display:block; font-size:22px; line-height:1.2; margin:8px 0 6px;}
.pains p{color:var(--encre-douce);}
.state{margin-top:56px; background:var(--noir); color:var(--ivoire); padding:clamp(28px,4vw,48px); position:relative; overflow:hidden;}
.state p{font-size:clamp(24px,3vw,38px); font-weight:800; line-height:1.15; max-width:22ch; position:relative;}
.state p span{color:var(--moutarde);}
.state:after{content:""; position:absolute; right:-50px; top:-50px; width:180px; height:180px; background:var(--accent);}

/* CE QUI EST INCLUS */
.offre{background:var(--sable);}
.incl{list-style:none; margin-top:48px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:28px 36px;}
.incl li{display:grid; grid-template-columns:18px 1fr; gap:16px;}
.incl .sq{width:16px; height:16px; background:var(--accent); margin-top:6px;}
.incl b{font-size:19px;}
.incl p{margin-top:4px; color:var(--encre-douce); font-size:15.5px;}

/* MÉTHODE */
.steps{list-style:none; margin-top:48px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:28px;}
.steps .n{width:52px; height:52px; display:grid; place-items:center; background:var(--encre); color:var(--ivoire); font-weight:800; font-size:22px;}
.steps li:last-child .n{background:var(--accent); color:var(--encre);}
.steps b{display:block; font-size:22px; margin:16px 0 6px;}
.steps p{color:var(--encre-douce);}
.band{margin-top:56px;}
.band img{width:100%; aspect-ratio:7/3; object-fit:cover;}

/* PREUVE */
.proof{background:var(--noir); color:var(--ivoire);}
.proof .eyebrow{color:var(--moutarde);}
.proof .eyebrow i{background:var(--moutarde);}
.case{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,64px); align-items:center; margin-top:44px;}
.case img{aspect-ratio:1; object-fit:cover; width:100%; filter:grayscale(1) contrast(1.05);}
.case p{font-size:clamp(20px,2vw,26px); line-height:1.35; margin:14px 0 28px; max-width:30ch;}
.case .k{display:flex; gap:48px; flex-wrap:wrap;}
.case .k b{display:block; font-size:44px; font-weight:900; color:var(--moutarde); line-height:1;}
.case .k span{color:#CFC7BD; font-size:15px;}
@media (max-width:820px){ .case{grid-template-columns:1fr;} }

/* FORMULES */
.tars{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:20px; margin-top:48px; align-items:stretch;}
.tar{background:var(--blanc); border:1px solid var(--ligne); padding:32px 28px; display:flex; flex-direction:column; gap:16px; position:relative;}
.tar.hot{border:2px solid var(--encre); box-shadow:10px 10px 0 var(--accent);}
.badge{position:absolute; top:-14px; left:28px; background:var(--accent); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px;}
.tar h3{font-size:26px;}
.price b{display:block; font-size:clamp(24px,2.4vw,30px); font-weight:800; line-height:1.15; color:var(--accent-texte);}
.price span{color:var(--encre-douce); font-size:14px;}
.tar ul{list-style:none; display:grid; gap:10px; flex:1;}
.tar li{display:grid; grid-template-columns:14px 1fr; gap:12px; font-size:15.5px;}
.tar li:before{content:""; width:10px; height:10px; background:var(--accent); margin-top:8px;}
.cond{margin-top:24px; color:var(--encre-douce); font-size:14px;}

/* FAQ */
.faq{background:var(--sable);}
.faq-cols{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,4vw,64px);}
@media (max-width:820px){ .faq-cols{grid-template-columns:1fr;} }
.faq details{border-top:1px solid var(--ligne);}
.faq details:last-child{border-bottom:1px solid var(--ligne);}
.faq summary{list-style:none; display:flex; justify-content:space-between; gap:16px; padding:20px 0; font-weight:600; font-size:19px; cursor:pointer;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary span{font-size:26px; font-weight:400; transition:transform .2s;}
.faq details[open] summary span{transform:rotate(45deg); color:var(--accent-texte);}
.faq details p{margin-bottom:22px; color:var(--encre-douce); max-width:60ch;}
.side{width:100%; margin-top:32px; aspect-ratio:9/7; object-fit:cover;}

/* CONTACT */
.cta{background:var(--accent); position:relative; overflow:hidden;}
.cta:after{content:""; position:absolute; left:-80px; bottom:-80px; width:260px; height:260px; background:var(--encre); opacity:.08;}
.cta-cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); position:relative; z-index:1;}
@media (max-width:900px){ .cta-cols{grid-template-columns:1fr;} }
.cta h2{font-size:clamp(38px,5.6vw,76px);}
.cta .eyebrow i{background:var(--encre);}
.cta .lead{color:var(--encre);}
.cta .side{aspect-ratio:25/16;}
.phone{font-size:clamp(24px,2.6vw,32px); font-weight:800; margin-top:28px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.phone button{font-size:12px; font-weight:600; letter-spacing:.12em; border:2px solid var(--encre); padding:6px 10px;}

.vitrine-form{background:var(--ivoire); padding:clamp(22px,3vw,36px); display:grid; gap:16px; align-content:start;}
.vitrine-form [hidden]{display:none;}
.vitrine-form .f2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){ .vitrine-form .f2{grid-template-columns:1fr;} }
.vitrine-form label{display:grid; gap:6px; font-size:14px; font-weight:500;}
.vitrine-form input,
.vitrine-form select{font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--ligne); border-radius:2px; background:var(--blanc); color:var(--encre); width:100%;}
.vitrine-form input:focus,
.vitrine-form select:focus{outline:3px solid var(--accent-texte); outline-offset:0; border-color:transparent;}
.vitrine-form .err{color:var(--accent-texte); font-size:14px;}
.vitrine-form .ok{background:var(--encre); color:var(--ivoire); padding:16px; display:grid; gap:12px;}
.vitrine-form .ok .btn{border-color:var(--ivoire); background:transparent; color:var(--ivoire);}
.vitrine-form .ok .btn:hover{background:var(--ivoire); color:var(--encre);}