/* ============================================================
   MOA Properties. V2 anti-slop.
   Surcouche par-dessus styles.css (design system MOA forest/cream).
   Objectif : vraie photo dans le hero, suppression du "M" geant et
   des tells de gabarit, grammaire alignee sur la home MOA v2 pour
   que les 3 sites forment une famille. Overrides reversibles.
   ============================================================ */

/* Nav en pill flottante posee sur la photo (comme MOA v2) */
#hd .nav{margin:14px auto 0;width:calc(100% - 40px);background:rgba(8,26,20,.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid rgba(246,241,231,.14);border-radius:100px;
  padding:10px 12px 10px 24px;box-shadow:0 20px 50px -24px rgba(0,0,0,.65);transition:.4s;}
header.scrolled{background:transparent;border-bottom:none;}
header.scrolled .nav{background:rgba(8,26,20,.72);}
#hd .logo img{height:40px;}

/* HERO : image plein cadre au lieu du degrade + suppression du "M" geant */
.hero{min-height:100vh;align-items:flex-end;background:#081a14;}
.hero::before{display:none;}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 52%;}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,17,13,.94),rgba(5,17,13,.66) 40%,rgba(5,17,13,.18) 70%,rgba(5,17,13,.05) 100%),
             linear-gradient(0deg,rgba(5,17,13,.8),rgba(5,17,13,.22) 42%,transparent 62%);}
/* Le texte colle au bord gauche (marge responsive) au lieu d'etre centre dans 1200px */
.hero .wrap.hero-inner{max-width:none;margin:0;width:100%;
  padding-left:clamp(28px,6vw,120px);padding-right:40px;
  position:relative;z-index:3;padding-top:170px;padding-bottom:86px;}
.hero-panel{max-width:640px;}
.hero-panel h1{color:var(--cream);font-size:clamp(2.8rem,7vw,5.4rem);font-weight:500;margin:0 0 22px;max-width:16ch;
  text-shadow:0 2px 30px rgba(4,14,10,.62);}
.hero-panel h1 em{font-style:italic;color:var(--cream);}
.hero-panel .lead{color:rgba(246,241,231,.94);font-size:clamp(1rem,1.4vw,1.2rem);max-width:52ch;font-weight:300;
  text-shadow:0 1px 18px rgba(4,14,10,.6);}
.hero-panel .hero-cta{margin-top:34px;}

/* Carte "propriete geree" flottante en verre, comme la carte-programme de MOA v2 */
.hero-card{position:absolute;top:50%;bottom:auto;transform:translateY(-50%);z-index:4;width:312px;
  right:clamp(28px,4vw,72px);
  background:rgba(246,241,231,.13);-webkit-backdrop-filter:blur(22px) saturate(1.1);
  backdrop-filter:blur(22px) saturate(1.1);border:1px solid rgba(246,241,231,.22);
  border-radius:22px;padding:12px;box-shadow:0 32px 64px -28px rgba(0,0,0,.72);
  transition:.45s cubic-bezier(.2,.8,.2,1);}
.hero-card:hover{transform:translateY(calc(-50% - 5px));border-color:rgba(246,241,231,.42);}
.hc-media{height:150px;border-radius:14px;background-size:cover;background-position:center;}
.hc-body{padding:14px 8px 6px;}
.hc-tag{font-size:.72rem;letter-spacing:.01em;color:rgba(246,241,231,.78);font-weight:600;}
.hc-name{font-family:'Fraunces',serif;font-size:1.55rem;color:var(--cream);margin:5px 0 9px;letter-spacing:-.02em;}
.hc-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.8rem;color:rgba(246,241,231,.8);}
.hc-meta span{position:relative;}
.hc-meta span+span::before{content:"";position:absolute;left:-11px;top:50%;width:3px;height:3px;border-radius:50%;background:rgba(246,241,231,.55);transform:translateY(-50%);}
.hc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid rgba(246,241,231,.16);}
.hc-price{font-family:'Fraunces',serif;font-size:1.1rem;color:var(--cream);}
.hc-go{font-size:.82rem;color:var(--gold-soft);font-weight:600;}

@media(max-width:1100px){
  .hero{flex-direction:column;align-items:stretch;min-height:auto;}
  .hero-inner{padding-top:130px;padding-bottom:30px;}
  .hero-scrim{background:linear-gradient(0deg,rgba(5,17,13,.9),rgba(5,17,13,.4) 55%,rgba(5,17,13,.28));}
  .hero-card{position:relative;top:auto;bottom:auto;right:auto;transform:none;width:auto;max-width:360px;margin:0 20px 44px;}
  .hero-card:hover{transform:translateY(-4px);}
  .hero-panel{max-width:none;}
}
@media(max-width:900px){#hd .nav{padding:10px 12px 10px 18px;}}

/* ============================================================
   Bande photo pleine largeur (la photo porte une conciergerie).
   Inseree entre deux sections de texte.
   ============================================================ */
.photoband{position:relative;min-height:440px;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;overflow:hidden;}
.photoband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(5,17,13,.86),rgba(5,17,13,.2) 60%,rgba(5,17,13,.28));}
.photoband .pb-in{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;width:100%;
  padding:0 28px 54px;}
.photoband .pb-in .k{font-family:'Fraunces',serif;color:var(--cream);font-size:clamp(1.6rem,3.4vw,2.6rem);
  max-width:20ch;line-height:1.1;}
.photoband .pb-in p{color:rgba(246,241,231,.82);max-width:52ch;margin-top:12px;font-weight:300;}

/* ============================================================
   Offre : la checklist de 12 services, regroupee par moment
   (avant / pendant / apres) au lieu d'un mur de coches.
   ============================================================ */
.offer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.offer-col{background:rgba(246,241,231,.04);border:1px solid rgba(143,191,171,.22);border-radius:var(--radius);padding:30px 28px;}
.offer-col h3{font-family:'Fraunces',serif;color:var(--cream);font-size:1.25rem;margin-bottom:6px;font-weight:500;}
.offer-col .cap{color:var(--gold-soft);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:18px;}
.offer-col ul{list-style:none;margin:0;padding:0;}
.offer-col li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid rgba(246,241,231,.1);color:rgba(246,241,231,.9);font-size:.96rem;}
.offer-col li:last-child{border-bottom:0;}
.offer-col li .ck{color:var(--gold-soft);flex:0 0 auto;font-weight:700;}
@media(max-width:900px){.offer-cols{grid-template-columns:1fr;}}

/* "Pourquoi MOA" : garder le contenu, retirer la numerotation 01-04 de gabarit.
   On remplace le gros numero par un filet + un titre serif. */
.why .n{display:none;}
.why{padding:32px 30px;}
.why h3{font-size:1.2rem;margin:0 0 10px;padding-top:18px;border-top:2px solid var(--gold-soft);display:inline-block;}

/* Etapes "como funciona" : la pastille numerotee reste (utile et lisible),
   mais on adoucit le tell en la rendant pleine plutot que contour. */
.step .num{background:var(--forest);color:var(--gold-soft);border-color:transparent;}

/* ============================================================
   PAGE-HERO (pages internes v2 : catalogo, afiliados).
   Vraie photo + scrim, meme grammaire que le hero home v2 mais
   plus court. Pas de "M" geant, pas d'eyebrow. Le texte colle
   au bord gauche comme sur la home.
   ============================================================ */
.page-hero{position:relative;min-height:clamp(360px,54vh,520px);display:flex;align-items:flex-end;
  background:#081a14;overflow:hidden;}
.page-hero .ph-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.page-hero .ph-media img{width:100%;height:100%;object-fit:cover;object-position:center 50%;}
.page-hero .ph-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,17,13,.94),rgba(5,17,13,.66) 42%,rgba(5,17,13,.22) 74%,rgba(5,17,13,.06) 100%),
             linear-gradient(0deg,rgba(5,17,13,.82),rgba(5,17,13,.24) 46%,transparent 66%);}
.page-hero .ph-inner{position:relative;z-index:3;width:100%;max-width:none;margin:0;
  padding-left:clamp(28px,6vw,120px);padding-right:40px;
  padding-top:150px;padding-bottom:56px;}
.page-hero .ph-panel{max-width:660px;}
.page-hero .ph-tag{color:var(--gold-soft);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;display:block;margin-bottom:14px;}
.page-hero h1{color:var(--cream);font-size:clamp(2.2rem,5.2vw,3.9rem);font-weight:500;margin:0 0 16px;
  max-width:20ch;text-shadow:0 2px 30px rgba(4,14,10,.6);}
.page-hero h1 em{font-style:italic;color:var(--cream);}
.page-hero .ph-lead{color:rgba(246,241,231,.94);font-size:clamp(1rem,1.35vw,1.16rem);max-width:56ch;
  font-weight:300;text-shadow:0 1px 18px rgba(4,14,10,.55);}
.page-hero .hero-cta{margin-top:28px;}
@media(max-width:900px){
  .page-hero{min-height:auto;}
  .page-hero .ph-inner{padding-top:120px;padding-bottom:40px;}
  .page-hero .ph-scrim{background:linear-gradient(0deg,rgba(5,17,13,.92),rgba(5,17,13,.4) 58%,rgba(5,17,13,.3));}
}

/* Le catalogo remplace l'ancien bloc .cat-top degrade par un page-hero photo.
   La searchbar est posee sous la photo, comme une carte flottante. */
.cat-searchband{background:var(--cream-2,#f3ede1);border-bottom:1px solid var(--line-soft);padding:0 0 6px;}
.cat-searchband .cat-wrap{padding-top:0;}
.cat-searchband .searchband-lead{color:var(--muted);font-size:.95rem;max-width:70ch;margin:22px 0 0;}