.hp-wrap{margin-top:-30px}
.hp-hl{color:#F5A623}

/* HÉRO */
.hp-hero{position:relative;height:92vh;min-height:560px;display:flex;align-items:center;overflow:hidden;background:#00122D}
.hp-hero__side{position:absolute;top:0;bottom:0;width:50%}
.hp-hero__side--av{left:0}
.hp-hero__side--ap{right:0}
.hp-hero__side img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.hp-hero__side--av::after{content:"AVANT";position:absolute;top:18px;left:18px;background:rgba(0,18,45,.82);color:#fff;font-size:.65rem;font-weight:700;padding:4px 12px;border-radius:3px;text-transform:uppercase;letter-spacing:1px;z-index:2}
.hp-hero__side--ap::after{content:"APRÈS";position:absolute;top:18px;right:18px;background:#F5A623;color:#fff;font-size:.65rem;font-weight:700;padding:4px 12px;border-radius:3px;text-transform:uppercase;letter-spacing:1px;z-index:2}
.hp-hero__ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,13,32,.78) 0%,rgba(0,13,32,.5) 40%,rgba(0,13,32,.72) 100%);z-index:1}
.hp-hero__cnt{position:relative;z-index:2;width:100%;padding:0 5%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.hp-hero__badge{background:#F5A623;color:#fff;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;padding:5px 16px;border-radius:20px}
.hp-hero__h1{font-family:"Gelasio",serif;font-size:calc(2rem + 0.8vw);color:#fff;font-weight:400;line-height:1.25;max-width:780px}
.hp-hero__sub{font-size:calc(.9rem + .1vw);color:rgba(255,255,255,.8);max-width:520px;line-height:1.6}
.hp-hero__btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hp-btn-outline{background:transparent!important;color:#fff!important;border:2px solid rgba(255,255,255,.5)!important}
.hp-btn-outline:hover{background:rgba(255,255,255,.1)!important}

/* STATS */
.hp-stats{background:#103D82}
.hp-stats__in{display:flex;max-width:1100px;margin:auto}
.hp-stat{flex:1;padding:22px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.12)}
.hp-stat:last-child{border-right:none}
.hp-stat__v{font-family:"Gelasio",serif;font-size:calc(1.5rem + .2vw);color:#F5A623;display:block;line-height:1}
.hp-stat__l{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:1px;margin-top:5px;display:block}

/* INTRO */
.hp-intro{background:#F4F6F9;padding:6vh 5%}
.hp-intro__in{display:grid;grid-template-columns:420px 1fr;gap:60px;max-width:1100px;margin:auto;align-items:center}
.hp-intro__img{border-radius:6px;overflow:hidden;flex-shrink:0}
.hp-intro__img img{width:100%!important;height:420px!important;object-fit:cover!important;display:block!important}
.hp-intro__body{display:flex;flex-direction:column;justify-content:center}
.hp-intro__q{font-family:"Gelasio",serif;font-size:calc(1.2rem + .15vw);color:#103D82;line-height:1.55;margin-bottom:12px}
.hp-intro__a{font-size:.78rem;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:1.2px}
.hp-intro__tr{width:40px;height:3px;background:#F5A623;display:block;margin:20px 0}
.hp-intro__d{font-size:calc(.875rem + .1vw);color:#666;line-height:1.75}
.hp-intro__cta{margin-top:26px}

/* COMMUN */
.hp-lbl{font-size:.72rem;font-weight:700;color:#F5A623;text-transform:uppercase;letter-spacing:2px;display:block;margin-bottom:8px}
.hp-ttl{font-family:"Gelasio",serif;font-size:calc(1.45rem + .15vw);color:#103D82;margin-bottom:8px}
.hp-tr{width:44px;height:4px;background:#F5A623;display:block;margin-bottom:28px}

/* SERVICES */
.hp-svc{background:#fff;padding:8vh 5%}
.hp-svc__in{max-width:1100px;margin:auto}
.hp-svc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hp-svc-card{background:#F4F6F9;border-radius:6px;border-top:4px solid #F5A623;padding:24px 20px;transition:box-shadow .2s}
.hp-svc-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.08);background:#fff}
.hp-svc-card__ico{width:46px;height:46px;background:#fff4e0;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.hp-svc-card__ico svg{width:20px;height:20px;fill:none;stroke:#F5A623;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hp-svc-card h3{font-family:"Gelasio",serif;font-size:calc(.95rem + .1vw);font-weight:400;color:#103D82;margin-bottom:8px}
.hp-svc-card p{font-size:calc(.82rem + .1vw);color:#777;line-height:1.6}
.hp-svc__cta{margin-top:32px;text-align:left}

/* AVANT/APRÈS */
.hp-aa{background:#F4F6F9;padding:8vh 5%}
.hp-aa__in{max-width:1100px;margin:auto}
.hp-aa__hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:16px}
.hp-aa__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hp-aa__pair{display:grid;grid-template-columns:1fr 1fr;gap:5px;border-radius:6px;overflow:hidden}
.hp-aa__item{position:relative}
.hp-aa__item img{width:100%!important;height:250px!important;object-fit:cover!important;display:block!important}
.hp-aa__b{position:absolute;bottom:7px;left:7px;font-size:.65rem;font-weight:700;padding:3px 9px;border-radius:3px;text-transform:uppercase;letter-spacing:.8px}
.hp-aa__b--av{background:rgba(0,18,45,.82);color:#fff}
.hp-aa__b--ap{background:#F5A623;color:#fff}

/* POURQUOI */
.hp-pq{background:#00122D;padding:8vh 5%}
.hp-pq__in{max-width:1100px;margin:auto}
.hp-pq .hp-lbl{color:#F5A623}
.hp-pq .hp-ttl{color:#fff}
.hp-pq__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.hp-pq-card{border-left:3px solid #F5A623;padding:20px 24px}
.hp-pq-card__n{font-family:"Gelasio",serif;font-size:2.5rem;color:rgba(245,166,35,.2);line-height:1;margin-bottom:10px}
.hp-pq-card h3{font-family:"Gelasio",serif;font-size:calc(1rem + .1vw);font-weight:400;color:#fff;margin-bottom:8px}
.hp-pq-card p{font-size:calc(.82rem + .1vw);color:rgba(255,255,255,.6);line-height:1.65}

/* TÉMOIGNAGES */
.hp-temo{background:#fff;padding:8vh 5%}
.hp-temo__in{max-width:1100px;margin:auto}
.hp-temo__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.hp-temo-card{background:#F4F6F9;border-radius:6px;padding:24px}
.hp-temo-card__stars{color:#F5A623;font-size:1rem;margin-bottom:12px;letter-spacing:2px}
.hp-temo-card__txt{font-size:calc(.875rem + .1vw);color:#444;line-height:1.65;font-style:italic;margin-bottom:16px}
.hp-temo-card__auth{display:flex;align-items:center;gap:12px}
.hp-temo-card__av{width:38px;height:38px;border-radius:50%;background:#103D82;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0}
.hp-temo-card__nom{font-size:.85rem;font-weight:700;color:#222}
.hp-temo-card__vil{font-size:.75rem;color:#999}

/* ZONE */
.hp-zone{background:#103D82;padding:6vh 5%;text-align:center}
.hp-zone__in{max-width:860px;margin:auto}
.hp-zone .hp-lbl{color:#F5A623}
.hp-zone__t{font-family:"Gelasio",serif;font-size:calc(1.4rem + .1vw);color:#fff;font-weight:400;margin-bottom:14px}
.hp-zone__t span{color:#F5A623}
.hp-zone__d{color:rgba(255,255,255,.75);font-size:calc(.875rem + .1vw);margin-bottom:22px;max-width:560px;margin-left:auto;margin-right:auto}
.hp-zone__pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hp-pill{background:rgba(255,255,255,.15);color:#fff;font-size:.8rem;font-weight:600;padding:6px 16px;border-radius:20px}
.hp-pill--alt{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:rgba(255,255,255,.8)}

/* RESPONSIVE */
@media(max-width:960px){
  .hp-svc__grid,.hp-pq__grid,.hp-temo__grid,.hp-aa__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:790px){
  .hp-hero{height:auto;min-height:100vh}
  .hp-hero__h1{font-size:calc(1.4rem + .5vw)}
  .hp-stats__in{flex-wrap:wrap}
  .hp-stat{flex:1 1 50%;border-right:none;border-bottom:1px solid rgba(255,255,255,.12)}
  .hp-intro__in{grid-template-columns:1fr;gap:30px}
  .hp-intro__img img{height:260px!important}
  .hp-intro__body{padding:0}
  .hp-svc__grid,.hp-pq__grid,.hp-temo__grid,.hp-aa__grid{grid-template-columns:1fr}
  .hp-aa__hdr{flex-direction:column;align-items:flex-start}
}

.hp-intro__in p {
    line-height: 1.8;
}

.btn-dark {
    background-color: #103d82;
    font-family: "Open Sans", sans-serif;
    margin-top: 0;
    position: relative;
    text-align: center;
    color: white;
    padding: 14px 30px;
    width: auto;
    display: inline-block;
}

.btn-dark:hover {
    background-color: #00122D; 
    color: #ffffff;
}

@media (max-width: 576px) {
    .btn-dark {
        width: 100%;
        display: block;
    }
}