/* ==========================================================================
   MyPatrimmo - feuille de style principale
   Valeurs reprises des CSS generes par Elementor (post-5, post-7, post-591).
   Polices auto-hebergees, voir fonts.css. Aucune requete externe.
   ========================================================================== */

/* --- 1. Jetons ---------------------------------------------------------- */
:root{
  --petrol:#50646F;
  --petrol-dark:#41535C;
  --salmon:#EBCFC4;
  --sand:#E1D4C8;
  --cream:#EFEAE4;
  --mint:#A5BBB0;
  --mint-dark:#8FA79B;
  --dark:#404A4D;
  --grey:#54595F;
  --off-white:#F9F8F6;
  --footer-text:#D2D3D5;
  --white:#FFFFFF;
  --black:#000000;

  --container:1140px;
  --gutter:20px;

  --font-title:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:"Albert Sans", "Helvetica Neue", Arial, sans-serif;
}

/* --- 2. Bases ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;
  font-weight:400;
  line-height:1.7;
  color:var(--grey);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--petrol)}
a:hover{color:var(--petrol-dark)}
:focus-visible{outline:2px solid var(--petrol); outline-offset:3px}

h1,h2,h3,h4{font-family:var(--font-title); margin:0; color:var(--grey)}

.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter);
}
.txt-center{text-align:center}
.txt-justify{text-align:justify}

/* --- 3. Echelle typographique (valeurs Elementor) ----------------------- */
.t-hero{
  font-size:75px; font-weight:500; line-height:1.1em;
  letter-spacing:-5.76px; color:var(--dark);
}
.t-section{
  font-size:38px; font-weight:500; line-height:1.2em;
  letter-spacing:-2.5px; color:var(--grey);
}
.t-section--light{font-weight:400; letter-spacing:normal}
.t-xl{
  font-size:55px; font-weight:400; line-height:1.2em;
  letter-spacing:-3.5px; color:var(--grey);
}
.t-role{
  font-size:38px; font-weight:500; line-height:1.1em;
  letter-spacing:-3.5px; color:var(--grey);
}
.t-cta{
  font-size:40px; font-weight:400; line-height:1.3em;
  letter-spacing:-2px; color:var(--white);
}
.p-lead{font-size:17px; font-weight:500; color:var(--dark)}
.p-body{font-size:18px; font-weight:400; color:var(--grey)}
.p-body--medium{font-weight:500}
.p-body--light{color:var(--white)}

/* --- 4. Boutons (radius 5px, majuscules, Albert Sans 500) --------------- */
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-size:15px; font-weight:500;
  text-transform:uppercase; letter-spacing:.02em;
  text-decoration:none;
  padding:18px 30px;
  border-radius:5px;
  border:0; cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.btn--petrol{background:var(--petrol); color:var(--white)}
.btn--petrol:hover{background:var(--petrol-dark); color:var(--white)}
.btn--mint{background:var(--mint); color:var(--white); font-weight:700}
.btn--mint:hover{background:var(--mint-dark); color:var(--white)}
.btn--sm{padding:12px 22px; font-size:13px}
.btn-wrap{text-align:center}

/* --- 5. En-tete --------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--white);
  border-bottom:1px solid rgba(84,89,95,.12);
}
.site-header__inner{display:flex; align-items:center; gap:24px; min-height:84px}
.brand{display:flex; align-items:center; flex:none}
.brand img{height:48px; width:auto}
.nav{margin-left:auto}
.nav__list{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.nav__link{
  display:block;
  font-family:var(--font-title);
  font-size:15px; font-weight:500;
  color:var(--grey); text-decoration:none;
  padding:10px 14px;
  transition:color .16s ease;
}
.nav__link:hover, .nav__link[aria-current="page"]{color:var(--petrol)}
.has-sub{position:relative}
.has-sub > .nav__link::after{
  content:""; display:inline-block; margin-left:6px;
  border:4px solid transparent; border-top-color:currentColor; transform:translateY(2px);
}
.sub{
  position:absolute; top:100%; left:0; min-width:250px;
  background:var(--white); border:1px solid rgba(84,89,95,.14); border-radius:5px;
  box-shadow:0 10px 30px -12px rgba(64,74,77,.3);
  padding:6px; list-style:none; margin:0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-sub:hover .sub, .has-sub:focus-within .sub{opacity:1; visibility:visible; transform:translateY(0)}
.sub .nav__link{padding:10px 12px}
.nav-toggle{display:none}

/* --- 6. Sections -------------------------------------------------------- */
.sec{padding-block:70px}
.sec--cream{background:var(--cream)}
.sec--dark{background:var(--dark)}
.sec--h110{min-height:110px; padding-block:40px}
.sec--h350{min-height:350px}
.sec--h400{min-height:400px}
.sec--pad5{padding-block:5%}
.narrow{max-width:960px; margin-inline:auto}

/* --- 7. Hero (fond image + voile saumon) -------------------------------- */
.hero{
  position:relative;
  background-image:url("../img/hero-haussmann.webp");
  background-position:top center;
  background-size:cover;
  background-repeat:no-repeat;
  padding:10% 0 30%;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(235,207,196,.75) 68%, var(--salmon) 93%);
}
.hero__inner{position:relative; z-index:1; min-height:400px; display:flex; align-items:center}
.hero__content{width:100%; text-align:center}
.hero .p-lead{margin:28px auto 0; max-width:60ch}
.hero .p-lead + .p-lead{margin-top:12px}
.hero .btn{margin-top:34px}

/* --- 8. Bloc image + texte ---------------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
.split--54 {grid-template-columns:54.215% auto; gap:0}
.split--54 .split__text{padding-right:40px}
.split__media img{margin-inline:auto}
.stack > * + *{margin-top:18px}

/* --- 9. Piliers --------------------------------------------------------- */
.pillars{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  margin-top:48px;
}
.pillar{text-align:center; padding:0 8px}
.pillar__icon{
  width:56px; height:56px; margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center;
}
.pillar__icon img, .pillar__icon svg{width:100%; height:100%; display:block}
.pillar h3{
  font-family:var(--font-title);
  font-size:22px; font-weight:500; line-height:1.3;
  color:var(--black); margin-bottom:12px;
}
.pillar p{font-size:16px; font-weight:400; color:var(--grey); line-height:1.6}

/* --- 10. Voile blanc sur section ---------------------------------------- */
.veil-white{position:relative}
.veil-white::before{content:""; position:absolute; inset:0; background:rgba(255,255,255,.7)}
.veil-white > *{position:relative; z-index:1}

/* --- 11. Pied de page (structure Elementor : 68,1% / 31,7%) ------------- */
.site-footer{background:var(--dark); padding-top:5%}
.site-footer__grid{
  display:grid; grid-template-columns:68.109% 1fr; gap:0;
  padding-bottom:44px; align-items:start;
}
.site-footer__baseline-wrap{padding-right:6%}
.site-footer__baseline{
  font-family:var(--font-title);
  font-size:35px; font-weight:500; line-height:1.2em;
  color:var(--white); text-align:center; margin:0;
}
.site-footer__links h3{
  font-family:var(--font-title);
  font-size:19px; font-weight:500; line-height:1.3em; color:var(--white);
  margin:0 0 16px;
}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.site-footer ul a{
  font-family:var(--font-title); font-size:14px; font-weight:500;
  color:var(--white); text-decoration:none;
}
.site-footer ul a:hover{color:var(--mint)}
.site-footer__rule{height:1px; background:rgba(255,255,255,.14); border:0; margin:0}
.site-footer__copy{
  text-align:center; padding:22px 0;
  font-family:var(--font-body); font-size:15px; line-height:1.5em; color:var(--footer-text);
  margin:0;
}
.site-footer__copy a{color:var(--footer-text)}
.site-footer__copy a:hover{color:var(--mint)}

/* --- 12. Tablette ------------------------------------------------------- */
@media (max-width:1024px){
  :root{--container:1024px}
  .t-hero{font-size:56px; letter-spacing:-3px}
  .t-xl{font-size:42px; letter-spacing:-2px}
  .pillars{grid-template-columns:repeat(2,1fr); gap:36px}
}

/* --- 13. Mobile (valeurs Elementor) ------------------------------------- */
@media (max-width:767px){
  body{font-size:17px}
  .t-hero{font-size:35px; letter-spacing:-1px}
  .t-section{font-size:26px; letter-spacing:-1px}
  .t-xl{font-size:26px; line-height:1.2em; letter-spacing:-1px}
  .t-role{font-size:30px; letter-spacing:-1px}
  .t-cta{font-size:22px; letter-spacing:-1px}
  .pillar h3{font-size:20px}

  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    margin-left:auto; width:46px; height:46px;
    background:transparent; border:1px solid rgba(84,89,95,.25); border-radius:5px; cursor:pointer;
  }
  .nav-toggle span{position:relative; display:block; width:20px; height:2px; background:var(--grey)}
  .nav-toggle span::before,.nav-toggle span::after{
    content:""; position:absolute; left:0; width:20px; height:2px; background:var(--grey);
  }
  .nav-toggle span::before{top:-6px}
  .nav-toggle span::after{top:6px}

  .nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--white); border-bottom:1px solid rgba(84,89,95,.12);
    padding:10px var(--gutter) 20px; margin-left:0; display:none;
  }
  .nav[data-open="true"]{display:block}
  .nav__list{flex-direction:column; align-items:stretch; gap:0}
  .nav__link{padding:12px 6px}
  .sub{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; padding:0 0 0 16px;
  }
  .has-sub > .nav__link::after{display:none}

  .hero{padding:5% 0}
  .hero__inner{min-height:auto}
  .split, .split--54{grid-template-columns:1fr; gap:32px}
  .split--54 .split__text{padding-right:0}
  .pillars{grid-template-columns:1fr; gap:40px}
  .site-footer__grid{grid-template-columns:1fr; gap:34px; padding-bottom:34px}
  .site-footer__baseline-wrap{padding-right:0}
  .site-footer__baseline{text-align:start; font-size:28px; letter-spacing:-.5px}
  .txt-justify{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ==========================================================================
   Page « Pourquoi MyPatrimmo » (valeurs de post-249.css)
   ========================================================================== */

/* Hero a voile petrol */
.hero--petrol{padding:0}
.hero--petrol::before{background:rgba(79,100,111,.8)}
.hero--petrol .hero__inner{min-height:400px; padding-block:60px}
.t-hero-sm{
  font-size:55px; font-weight:400; line-height:1.2em;
  letter-spacing:-3.5px; color:var(--white);
}
.p-hero-sub{font-size:18px; font-weight:400; color:var(--white); text-align:center}

/* Titres secondaires */
.t-40{font-size:40px; font-weight:400; color:var(--black); line-height:1.25}
.t-40b{font-size:40px; font-weight:400; line-height:1.3em; letter-spacing:-2px; color:var(--black)}
.t-38b{font-size:38px; font-weight:400; line-height:1.3em; letter-spacing:-2px; color:var(--black)}
.t-42{font-size:42px; font-weight:500; line-height:1.2em; color:var(--white)}
.p-16{font-size:16px; font-weight:400; color:var(--grey)}

.sec--offwhite{background:var(--off-white)}
.sec--cream-veil{background:var(--cream); position:relative}

/* Filet de separation */
.rule{width:100%; height:1px; background:rgba(84,89,95,.18); border:0; margin:0 auto}

/* Trois atouts */
.imgboxes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:40px;
}
.imgbox{
  text-align:center;
  padding:10%;
  background:linear-gradient(180deg, rgba(245,245,245,0) 0%, #F5F5F5 100%);
}
.imgbox__icon{width:64px; height:64px; margin:0 auto 20px}
.imgbox__icon img{width:100%; height:100%}
.imgbox h3{
  font-family:"Urbanist", var(--font-title);
  font-size:24px; font-weight:500; letter-spacing:-.48px;
  color:var(--black); margin-bottom:14px;
}
.imgbox p{font-size:16px; font-weight:400; color:var(--grey); line-height:1.6; text-align:justify}

/* Section photo assombrie */
.sec--photo{position:relative; background-size:cover; background-position:center center}
.sec--photo::before{content:""; position:absolute; inset:0; background:rgba(0,0,0,.7)}
.sec--photo > *{position:relative; z-index:1}
.sec--photo-rente{background-image:url("../img/cta-rente.webp")}

@media (max-width:1024px){
  .t-hero-sm{font-size:42px; letter-spacing:-2px}
  .imgboxes{grid-template-columns:1fr; gap:0}
}
@media (max-width:767px){
  .hero--petrol .hero__inner{min-height:200px; padding-block:40px}
  .t-hero-sm{font-size:30px; line-height:1.2em; letter-spacing:-1px}
  .t-40, .t-40b{font-size:26px; letter-spacing:-1px}
  .t-38b{font-size:26px; letter-spacing:-1px}
  .t-42{font-size:25px}
  .imgbox h3{font-size:19px}
  .imgbox p{text-align:left}
}

/* ==========================================================================
   Page « Méthodologie » (valeurs de post-794.css)
   ========================================================================== */
.hero--petrol85::before{background:rgba(80,100,111,.85)}
.t-42b{font-size:42px; font-weight:400; line-height:1.3em; letter-spacing:-2px; color:var(--petrol)}
.t-47{font-size:47px; font-weight:300; line-height:1.2em; color:var(--white)}
.p-17{font-size:17px; font-weight:400; color:var(--white)}
.p-petrol{color:#4F646F}
.sec--photo-patrimoine{background-image:url("../img/cta-patrimoine.webp")}

/* Chronologie des 9 etapes */
.timeline{list-style:none; margin:44px 0 0; padding:0; display:grid; gap:0}
.timeline__item{display:grid; grid-template-columns:64px 1fr; gap:22px}
.timeline__rail{position:relative; display:flex; flex-direction:column; align-items:center}
.timeline__marker{
  width:52px; height:52px; flex:none;
  background:var(--petrol);
  transform:rotate(45deg);
  display:flex; align-items:center; justify-content:center;
  border-radius:6px;
}
.timeline__marker svg{width:20px; height:20px; fill:var(--white); transform:rotate(-45deg)}
.timeline__line{flex:1; width:2px; background:rgba(204,204,204,.32); margin:8px 0}
.timeline__item:last-child .timeline__line{display:none}
.timeline__card{
  background:rgba(122,122,122,.48);
  padding:22px;
  text-align:left;
  margin-bottom:26px;
  border-radius:4px;
}
.timeline__card h3{
  font-family:var(--font-title);
  font-size:25px; font-weight:500; line-height:1.25;
  color:var(--white); margin-bottom:8px;
}
.timeline__card p{
  font-family:var(--font-body); font-weight:400;
  color:var(--white); font-size:17px; line-height:1.55; margin:0;
}

@media (max-width:767px){
  .t-42b{font-size:26px; letter-spacing:-1px}
  .t-47{font-size:25px}
  .timeline__item{grid-template-columns:46px 1fr; gap:14px}
  .timeline__marker{width:38px; height:38px}
  .timeline__marker svg{width:15px; height:15px}
  .timeline__card{padding:16px}
  .timeline__card h3{font-size:17px}
  .timeline__card p{font-size:14px}
}

/* ==========================================================================
   Pages simulateurs : le bloc embarque est isole dans .sim
   ========================================================================== */
.sim{
  display:block;
  font-family:var(--font-body);
  color:var(--grey);
  background:transparent;
  max-width:100%;
}
.sim *{box-sizing:border-box}
.sim img{max-width:100%; height:auto}
.sec--sim{background:var(--cream); padding-block:56px}

/* ==========================================================================
   Pages Réalisations, Contact et Politique de cookies
   ========================================================================== */
.hero--petrol90::before{background:rgba(79,100,111,.9)}
.hero--contact{background-image:url("../img/hero-contact.jpg")}
.hero--h300 .hero__inner{min-height:300px}

.sec--sand{background:var(--sand)}
.sec--mint{background:var(--mint)}

/* Formulaire de contact */
.form-card{
  background:rgba(239,234,228,.64);
  padding:8%;
  border-radius:6px;
  max-width:820px; margin:40px auto 0;
}
.form-grid{display:grid; gap:20px}
.field label{
  display:block; margin-bottom:7px;
  font-family:var(--font-title); font-weight:400; font-size:15px; color:var(--black);
}
.field input, .field textarea{
  width:100%;
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--dark); background:var(--white);
  border:1px solid rgba(84,89,95,.2); border-radius:4px;
  padding:13px 15px;
}
.field input:focus, .field textarea:focus{outline:2px solid var(--petrol); outline-offset:1px; border-color:var(--petrol)}
.field textarea{min-height:150px; resize:vertical}
.field--hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-submit{
  background:var(--dark); color:var(--white);
  font-family:var(--font-title); font-weight:500; font-size:15px;
  border:0; border-radius:4px; padding:15px 40px; cursor:pointer;
  transition:background-color .18s ease;
}
.form-submit:hover{background:#333B3E}
.form-submit[disabled]{opacity:.55; cursor:not-allowed}
.form-alt{margin-top:18px; font-size:15px; color:var(--grey)}
.form-msg{margin-top:18px; padding:14px 16px; border-radius:4px; font-size:15px; display:none}
.form-msg[data-state="ok"]{display:block; background:rgba(165,187,176,.35); color:var(--dark)}
.form-msg[data-state="err"]{display:block; background:rgba(168,80,63,.14); color:#8C4234}

/* Module Réalisations */
.sec--realisations{background:var(--cream); padding-block:0 56px}

/* Page de texte simple */
.doc{max-width:78ch; margin-inline:auto}
.doc h2{font-family:var(--font-title); font-size:26px; font-weight:500; color:var(--dark); margin:36px 0 12px}
.doc h2:first-child{margin-top:0}
.doc p{margin:0 0 14px; font-size:17px}
.doc ul{margin:0 0 16px; padding-left:22px}
.doc li{margin-bottom:8px}

@media (max-width:767px){
  .form-card{padding:26px 20px}
}

/* Message de secours du module Réalisations */
.realisations-fallback{
  max-width:60ch; margin:0 auto; padding:70px 20px; text-align:center;
}
.realisations-fallback h2{
  font-family:var(--font-title); font-size:30px; font-weight:400;
  letter-spacing:-1px; color:var(--grey); margin-bottom:18px;
}
.realisations-fallback p{margin:0 0 12px; color:var(--grey)}
.realisations-fallback .btn{margin-top:22px}