:root{--t-sombre-2:rgba(242,237,230,.82);--t-sombre-3:rgba(242,237,230,.68);--t-clair-2:rgba(20,23,28,.78);--t-clair-3:rgba(20,23,28,.66)}
.bien .lieu{font-size:13px}.bien dt{font-size:13.5px}.bien dd small{font-size:12px!important}
.plier{margin-top:18px;text-align:center}.plier .bareme-cadre{text-align:left}
.plier>summary{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;font-size:15px;font-weight:500;cursor:pointer;border:1px solid currentColor;border-radius:2px;list-style:none}
.plier>summary::-webkit-details-marker{display:none}
.plier>summary::after{content:"+";font-size:19px;line-height:1}
.plier[open]>summary{margin-bottom:18px}.plier[open]>summary::after{content:"−"}
.plier>summary:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.interlocuteur{display:flex;align-items:center;gap:18px;margin:0 0 30px}
.interlocuteur img{width:104px;height:104px;border-radius:50%;object-fit:cover;flex:none}
.interlocuteur figcaption{font-size:14.5px;line-height:1.45}
.interlocuteur b{display:block;font-family:Sora,sans-serif;font-weight:500;font-size:19px}
#form [hidden]{display:none!important}
#f-etape{margin:0 0 16px;font-size:13.5px;font-weight:500;color:#7D6318}
#form .retour{align-self:center;padding:6px 10px;font:500 14px var(--texte);color:var(--t-clair-2);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#form .note-form{margin-top:14px;font-size:13.5px;color:var(--t-clair-3)}
#barre-mobile{display:none}
@media(max-width:620px){.saut-large{display:none}}
@media(max-width:900px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  #barre-mobile{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;position:fixed;inset:auto 0 0 0;z-index:50;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:rgba(13,15,18,.96);border-top:1px solid var(--b-sombre);transition:transform .25s var(--e)}
  #barre-mobile.cachee{transform:translateY(110%)}
  #barre-mobile a{display:flex;align-items:center;justify-content:center;min-height:46px;font:500 15px var(--texte);text-decoration:none;border-radius:2px}
  #barre-mobile a:first-child{color:var(--t-sombre);border:1px solid rgba(242,237,230,.35)}
  #barre-mobile a:last-child{color:#15120A;background:var(--or)}
}
@media print{#barre-mobile{display:none}}


/* ==========================================================================
   Invest Avenir Immo — site vitrine one page
   Univers visuel unique et assumé : alternance de sections encre et ivoire,
   or en accent rare. Toutes les couleurs sont peintes explicitement.
   ========================================================================== */
:root{
  --encre:#0D0F12;
  --anthracite:#14171C;
  --ivoire:#F2EDE6;
  --ivoire-2:#E8E1D6;          /* neutre légèrement réchauffé vers l'or */
  --or:#C9A84C;
  --or-clair:#E4C878;
  --or-sourd:rgba(201,168,76,.18);
  --vert:#4A6741;
  --vert-clair:#7A9A6E;

  /* rôles — section sombre */
  --f-sombre:#0D0F12;
  --t-sombre:#F2EDE6;
  --t-sombre-2:rgba(242,237,230,.66);
  --t-sombre-3:rgba(242,237,230,.40);
  --b-sombre:rgba(242,237,230,.12);

  /* rôles — section claire */
  --f-clair:#F2EDE6;
  --t-clair:#14171C;
  --t-clair-2:rgba(20,23,28,.68);
  --t-clair-3:rgba(20,23,28,.45);
  --b-clair:rgba(20,23,28,.13);

  --titre:"Work Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sous:"Sora","Work Sans","Helvetica Neue",Arial,sans-serif;
  --texte:"Work Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

  --e:cubic-bezier(.22,.61,.36,1);
  --marge:clamp(20px,5vw,72px);
  --large:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; background:var(--f-clair); color:var(--t-clair);
  font-family:var(--texte); font-weight:400; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}

/* ---------- Typographie ---------- */
h1,h2{font-family:var(--titre); text-wrap:balance; margin:0}
h3,h4,h5{font-family:var(--sous); text-wrap:balance; margin:0}
h1{font-size:clamp(38px,5.2vw,68px); font-weight:600; letter-spacing:-.02em; line-height:1.04}
h2{font-size:clamp(30px,3.6vw,46px); font-weight:500; letter-spacing:-.015em; line-height:1.12}
h3{font-size:21px; font-weight:600; letter-spacing:-.005em; line-height:1.3}
h4{font-size:17px; font-weight:600}
p{margin:0}
.mesure{max-width:65ch}
.sur-titre{
  font-family:var(--texte); font-size:11px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--or); margin:0 0 18px; display:flex; align-items:center; gap:12px;
}
.sur-titre::before{content:""; width:26px; height:1px; background:var(--or); flex:none}
.chapo{font-size:clamp(18px,1.5vw,20px); line-height:1.55}
.s-sombre .chapo{color:var(--t-sombre-2)}
.s-clair  .chapo{color:var(--t-clair-2)}
.nb{font-variant-numeric:tabular-nums}

/* ---------- Sections ---------- */
section{padding:clamp(64px,9vw,124px) var(--marge)}
.dans{max-width:var(--large); margin:0 auto}
.s-sombre{background:var(--f-sombre); color:var(--t-sombre)}
.s-clair{background:var(--f-clair); color:var(--t-clair)}
.s-sombre p{color:var(--t-sombre-2)}
.s-clair  p{color:var(--t-clair-2)}
.filet{height:1px; border:0; margin:0}
.s-sombre .filet{background:var(--b-sombre)}
.s-clair  .filet{background:var(--b-clair)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--texte); font-size:15px; font-weight:500; letter-spacing:.01em;
  padding:15px 28px; border-radius:2px; cursor:pointer; text-decoration:none; border:1px solid transparent;
  transition:background .3s var(--e), color .3s var(--e), border-color .3s var(--e), transform .3s var(--e);
}
.btn-or{background:var(--or); color:#15120A; border-color:var(--or)}
.btn-or:hover{background:var(--or-clair); border-color:var(--or-clair); transform:translateY(-1px)}
.s-sombre .btn-vide{color:var(--t-sombre); border-color:rgba(242,237,230,.32)}
.s-sombre .btn-vide:hover{border-color:var(--or); color:var(--or-clair)}
.s-clair  .btn-vide{color:var(--t-clair); border-color:rgba(20,23,28,.28)}
.s-clair  .btn-vide:hover{border-color:var(--or); color:#8A7028}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--or); outline-offset:3px;
}

/* ---------- En-tête ---------- */
#tete{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--marge);
  transition:background .4s var(--e), padding .4s var(--e), border-color .4s var(--e), backdrop-filter .4s var(--e);
  border-bottom:1px solid transparent;
}
#tete.dense{
  background:rgba(13,15,18,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--or-sourd); padding-top:10px; padding-bottom:10px;
}
#tete img{height:38px; width:auto; transition:height .4s var(--e)}
#tete.dense img{height:32px}
#menu{display:flex; align-items:center; gap:28px}
#menu a{
  font-size:14px; font-weight:400; color:rgba(242,237,230,.72); text-decoration:none;
  transition:color .25s var(--e); position:relative; padding:4px 0;
}
#menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--or); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--e);
}
#menu a:hover{color:var(--ivoire)}
#menu a:hover::after{transform:scaleX(1)}
#menu .btn{padding:11px 20px; font-size:14px}
#menu .btn::after{display:none}
#burger{display:none; background:none; border:0; cursor:pointer; padding:8px; color:var(--ivoire)}
#burger span{display:block; width:24px; height:1.5px; background:currentColor; margin:5px 0; transition:transform .3s var(--e), opacity .3s var(--e)}
#tete.ouvert #burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#tete.ouvert #burger span:nth-child(2){opacity:0}
#tete.ouvert #burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* jauge de lecture */
#jauge{position:fixed; top:0; left:0; height:2px; width:0; background:var(--or); z-index:61; transition:width .1s linear}


/* ---------- Emplacements visuels de la villa ----------
   L'image se charge si le fichier existe dans /images/ ; sinon un fond
   travaillé prend le relais, pour que la page reste présentable sans photo. */
.visuel{position:relative; margin:0; overflow:hidden; background:var(--anthracite); border-radius:2px}
.visuel img{width:100%; height:100%; object-fit:cover; display:block}
.visuel.sans-image img{display:none}
.visuel.sans-image::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(228,200,120,.34), transparent 58%),
    radial-gradient(90% 70% at 15% 95%, rgba(74,103,65,.30), transparent 60%),
    linear-gradient(148deg, #1B2027 0%, #2E3440 42%, #6E5F3E 100%);
}
.visuel.sans-image::after{
  content:attr(data-attente); position:absolute; left:20px; bottom:18px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,237,230,.62);
  padding:7px 13px; border:1px solid rgba(242,237,230,.20); border-radius:2px;
  background:rgba(13,15,18,.42); backdrop-filter:blur(6px);
}
.visuel figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 24px 20px;
  background:linear-gradient(180deg, rgba(13,15,18,0), rgba(13,15,18,.82));
  font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:rgba(242,237,230,.78);
}

/* ---------- Hero ---------- */
#hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-top:140px; padding-bottom:clamp(40px,6vw,72px); overflow:hidden;
}
#hero .fond{position:absolute; inset:0; z-index:0}
#hero .fond .visuel{position:absolute; inset:0; border-radius:0}
#hero .voile{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(92deg, rgba(13,15,18,.93) 0%, rgba(13,15,18,.74) 44%, rgba(13,15,18,.20) 100%),
             linear-gradient(180deg, rgba(13,15,18,.60) 0%, rgba(13,15,18,0) 30%);
}
/* tant qu'aucune photo n'est fournie, le voile s'allège pour laisser vivre le fond */
#hero.sans-photo .voile{
  background:linear-gradient(92deg, rgba(13,15,18,.92) 0%, rgba(13,15,18,.66) 46%, rgba(13,15,18,.16) 100%),
             linear-gradient(180deg, rgba(13,15,18,.66) 0%, rgba(13,15,18,0) 30%);
}
#hero.sans-photo .visuel.sans-image::before{
  background:
    radial-gradient(105% 85% at 82% 18%, rgba(228,200,120,.52), transparent 62%),
    radial-gradient(80% 70% at 8% 100%, rgba(74,103,65,.34), transparent 64%),
    linear-gradient(150deg, #12161C 0%, #2B3240 46%, #7A6944 100%);
}
#hero .dans{position:relative; z-index:2; width:100%}
#hero h1{max-width:14ch; margin-bottom:26px}
#hero h1 em{font-style:normal; color:var(--or-clair)}
#hero .chapo{max-width:52ch}
#hero .actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}

/* bandeau de preuves */
.preuves{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(46px,6vw,72px); background:var(--b-sombre)}
.preuves > div{background:var(--f-sombre); padding:26px 24px 22px}
.preuves b{
  display:block; font-family:var(--titre); font-size:clamp(30px,3.4vw,42px); font-weight:600;
  letter-spacing:-.02em; color:var(--or-clair); line-height:1; margin-bottom:10px;
}
.preuves span{font-size:12.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--t-sombre-3)}

.bande{padding:0 0 clamp(56px,7vw,96px); background:var(--f-sombre)}
.bande .visuel{aspect-ratio:21/9; border-radius:0}
@media (max-width:760px){ .bande .visuel{aspect-ratio:4/3} }

/* ---------- Grilles génériques ---------- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,76px); align-items:center}
.duo.serre{align-items:start}
.entete{max-width:60ch; margin-bottom:clamp(38px,4.5vw,62px)}
.entete h2{margin-bottom:18px}
.trio{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(20px,2.6vw,34px)}

/* frictions */
.friction{padding-top:26px; border-top:1px solid var(--b-clair)}
.friction h3{margin-bottom:10px}
.friction .num{
  font-family:var(--sous); font-size:12px; letter-spacing:.14em; color:var(--or);
  display:block; margin-bottom:14px;
}

/* services */
.service{padding:30px 28px; border:1px solid var(--b-sombre); border-radius:2px; background:rgba(242,237,230,.028);
  transition:border-color .4s var(--e), background .4s var(--e), transform .4s var(--e)}
.service:hover{border-color:var(--or-sourd); background:rgba(201,168,76,.05); transform:translateY(-3px)}
.service .ico{width:40px; height:40px; margin-bottom:20px; stroke:var(--or); fill:none; stroke-width:1.15}
.service h3{margin-bottom:12px}
.service ul{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:9px}
.service li{font-size:14.5px; color:var(--t-sombre-2); padding-left:18px; position:relative}
.service li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:1px; background:var(--or)}

/* parcours */
.etapes{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:0}
.etape{padding:30px 26px 28px; border-top:1px solid var(--b-sombre); position:relative}
.etape + .etape{border-left:1px solid var(--b-sombre)}
.etape .num{
  font-family:var(--sous); font-size:12px; font-weight:600; letter-spacing:.12em;
  color:var(--or); display:block; margin-bottom:16px;
}
.etape h3{margin-bottom:10px; font-size:19px}
.etape .delai{
  margin-top:16px; font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:var(--t-sombre-3);
}

/* biens */
.biens{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:clamp(18px,2.2vw,26px)}
.bien{border:1px solid var(--b-sombre); border-radius:2px; overflow:hidden; background:rgba(242,237,230,.028);
  transition:border-color .4s var(--e), transform .4s var(--e)}
.bien:hover{border-color:var(--or-sourd); transform:translateY(-3px)}
.bien .vign{height:150px}
.bien .txt{padding:22px 22px 24px}
.bien h3{font-size:18px; margin-bottom:4px}
.bien .lieu{font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--t-sombre-3)}
.bien dl{margin:18px 0 0; display:grid; grid-template-columns:auto 1fr; gap:10px 12px; align-items:baseline}
.bien dt{font-size:13px; color:var(--t-sombre-3); line-height:1.4}
.bien dd{margin:0; font-size:14.5px; font-weight:500; color:var(--t-sombre); text-align:right; font-variant-numeric:tabular-nums}
.bien dd.or{color:var(--or-clair)}
.etiquette{
  display:inline-block; margin-bottom:12px; padding:4px 10px; border-radius:2px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--or); border:1px solid var(--or-sourd); background:rgba(201,168,76,.08);
}
.avis-demo{
  margin-top:26px; padding:16px 20px; border-left:2px solid var(--or);
  background:rgba(201,168,76,.07); font-size:14px; color:var(--t-sombre-2);
}


/* ---------- Tarifs ---------- */
.tarifs{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(18px,2.2vw,26px); align-items:stretch}
.tarifs.solo{grid-template-columns:1fr; max-width:680px; margin:0 auto}
.tarifs.solo .lignes{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,34px)}
@media(max-width:620px){.tarifs.solo .lignes{grid-template-columns:1fr; gap:22px}}
.tarif{
  position:relative; padding:34px 28px 30px; border:1px solid var(--b-clair); border-radius:2px;
  background:#FFFFFF; display:flex; flex-direction:column; gap:22px;
  transition:border-color .4s var(--e), transform .4s var(--e), box-shadow .4s var(--e);
}
.tarif:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(20,23,28,.10)}
.tarif.phare{border-color:var(--or); box-shadow:0 18px 44px rgba(201,168,76,.16)}
.tarif .badge{
  position:absolute; top:-11px; left:28px; padding:5px 13px; background:var(--or); color:#15120A;
  font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; border-radius:2px;
}
.tarif h3{font-size:22px}
.tarif .ligne{border-top:1px solid var(--b-clair); padding-top:18px}
.tarif .lbl{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--t-clair-3); margin-bottom:8px}
.tarif .val{font-family:var(--titre); font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums}
.tarif.phare .val{color:#8A7028}
.tarif .val small{display:block; margin-top:7px; font-family:var(--texte); font-size:13px; font-weight:400; color:var(--t-clair-2); letter-spacing:0}
.tarif .aucun{font-family:var(--titre); font-size:18px; font-weight:500; color:var(--t-clair-3)}

.rassure{
  display:flex; align-items:center; gap:14px; margin-top:26px; padding:18px 22px;
  border:1px solid rgba(122,154,110,.34); background:rgba(74,103,65,.09); border-radius:2px;
}
.rassure svg{width:20px; height:20px; flex:none; stroke:var(--vert); fill:none; stroke-width:1.5}
.rassure p{color:var(--t-clair); font-size:15px}
.rassure b{font-weight:600}

/* ---------- Barème des honoraires ---------- */
#bareme{margin-top:clamp(40px,5vw,64px)}
#bareme .bareme-tete{text-align:center; max-width:640px; margin:0 auto 26px}
#bareme .bareme-tete .sur-titre{display:inline-flex}
#bareme .bareme-tete h3{margin-bottom:10px}
#bareme .bareme-tete p:last-child{color:var(--t-clair-2); font-size:15px}
.bareme-cadre{border:1px solid var(--or); border-radius:2px; background:#FFFFFF; overflow:hidden; box-shadow:0 18px 44px rgba(201,168,76,.10)}
.bareme-table{width:100%; border-collapse:collapse; color:var(--t-clair)}
.bareme-table thead th{
  background:var(--encre); color:var(--or); font-family:var(--sous); font-weight:500;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-align:center; padding:16px 22px; vertical-align:middle;
}
.bareme-table thead th:first-child{text-align:left; width:50%}
.bareme-table thead th small{display:block; margin-top:4px; font-family:var(--texte); font-size:11px; letter-spacing:.04em; text-transform:none; color:rgba(242,237,230,.55); font-weight:400}
.bareme-table tbody tr{border-top:1px solid var(--b-clair); transition:background .3s var(--e)}
.bareme-table tbody tr:first-child{border-top:0}
.bareme-table tbody tr:not(.b-note):hover{background:rgba(201,168,76,.05)}
.bareme-table tbody th, .bareme-table td{padding:18px 22px; vertical-align:middle; text-align:left; font-weight:400}
.bareme-table tbody th{display:flex; align-items:center; gap:16px}
.b-ico{flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--or); display:grid; place-items:center}
.b-ico svg{width:22px; height:22px; fill:none; stroke:var(--or); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.b-nom{font-family:var(--sous); font-weight:500; font-size:15px; line-height:1.35}
.b-nom small{display:block; font-family:var(--titre); font-weight:400; font-size:13.5px; color:var(--t-clair-2); margin-top:3px; max-width:46ch}
.b-prix{text-align:center !important; font-family:var(--titre); font-weight:500; font-size:clamp(18px,1.9vw,21px); white-space:nowrap; font-variant-numeric:tabular-nums}
.b-prix small{display:block; font-size:12.5px; font-weight:400; color:var(--t-clair-2); white-space:normal}
.b-prix.loc{background:rgba(74,103,65,.045)}
.b-prix.vide{color:var(--t-clair-3); font-weight:400}
.b-formule{display:inline-block; text-align:left; font-family:var(--texte); font-size:13px; line-height:1.6; font-weight:400; color:var(--t-clair-2); white-space:normal}
.b-formule b{display:block; font-family:var(--titre); font-size:15.5px; font-weight:500; color:var(--t-clair)}
.bareme-table tbody tr.b-note{border-top:0}
.b-note td{padding:0 22px 22px !important}
.b-note-box{display:flex; gap:14px; align-items:center; max-width:640px; margin:0 auto; padding:14px 18px; border:1px dashed rgba(201,168,76,.6); background:rgba(201,168,76,.06); border-radius:2px; font-size:14px; line-height:1.55; color:var(--t-clair-2)}
.b-note-box svg{flex:none; width:26px; height:26px; fill:none; stroke:var(--or); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.b-note-box b{color:var(--t-clair); font-weight:600}
@media(max-width:680px){
  .bareme-table thead{display:none}
  .bareme-table tbody tr{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; padding:18px; align-items:start}
  .bareme-table tbody th{grid-column:1 / -1; padding:0}
  .bareme-table td{padding:0}
  .b-prix{text-align:left !important; font-size:18px; background:none !important; white-space:normal}
  .b-prix::before{content:attr(data-qui); display:block; margin-bottom:5px; font-family:var(--texte); font-size:10.5px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--t-clair-3)}
  .b-prix.loc::before{color:var(--vert)}
  .b-prix.vide{display:none}
  .b-prix.large{grid-column:1 / -1}
  .bareme-table tbody tr.b-note{display:block; padding:0 18px 18px}
  .b-note td{display:block; padding:0 !important}
  .b-ico{width:38px; height:38px}
}

/* ---------- Simulateur ---------- */
#simu{
  margin-top:clamp(40px,5vw,64px); border:1px solid var(--b-clair); border-radius:2px;
  background:var(--anthracite); color:var(--t-sombre); overflow:hidden;
}
#simu .haut{padding:32px clamp(24px,3vw,38px) 0}
#simu h3{color:var(--ivoire); margin-bottom:10px}
#simu .haut p{color:var(--t-sombre-2); font-size:15px; max-width:58ch}
#simu .corps{display:grid; grid-template-columns:minmax(260px,.85fr) 1.15fr; gap:clamp(24px,3vw,44px); padding:28px clamp(24px,3vw,38px) 34px}
.champ{display:flex; flex-direction:column; gap:9px; margin-bottom:22px}
.champ label{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--t-sombre-3)}
.rappel-taux{border:1px solid var(--b-sombre); border-radius:2px; padding:16px 18px; background:rgba(201,168,76,.06)}
.rappel-taux .lbl-taux{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--or); margin-bottom:8px}
.rappel-taux p{font-size:14px; line-height:1.55; margin:0; color:var(--t-sombre-2)}
.strat{display:flex; flex-direction:column; gap:8px}
.strat button{
  font-family:var(--texte); font-size:14.5px; text-align:left; cursor:pointer;
  padding:13px 16px; border-radius:2px; color:var(--t-sombre-2);
  background:rgba(242,237,230,.04); border:1px solid rgba(242,237,230,.14);
  transition:all .3s var(--e); display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.strat button:hover{border-color:rgba(242,237,230,.34); color:var(--t-sombre)}
.strat button[aria-pressed="true"]{background:rgba(201,168,76,.14); border-color:var(--or); color:var(--ivoire)}
.strat button .tx{font-size:13px; color:var(--or-clair); font-variant-numeric:tabular-nums}
.saisie{position:relative}
.saisie input{
  width:100%; font-family:var(--titre); font-size:26px; font-weight:600; letter-spacing:-.01em;
  color:var(--ivoire); background:rgba(242,237,230,.05); border:1px solid rgba(242,237,230,.16);
  border-radius:2px; padding:14px 46px 14px 16px; font-variant-numeric:tabular-nums;
}
.saisie input:focus{border-color:var(--or); background:rgba(201,168,76,.07); outline:none}
.saisie .eur{position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:20px; color:var(--t-sombre-3)}
.resultat{display:flex; flex-direction:column; justify-content:center; gap:0}
.res-ligne{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:15px 0; border-bottom:1px solid rgba(242,237,230,.11)}
.res-ligne:first-child{padding-top:0}
.res-ligne dt{font-size:14.5px; color:var(--t-sombre-2)}
.res-ligne dd{margin:0; font-family:var(--titre); font-size:20px; font-weight:500; color:var(--ivoire); font-variant-numeric:tabular-nums; white-space:nowrap}
.res-ligne.fort{border-bottom:0; padding-top:22px}
.res-ligne.fort dt{color:var(--ivoire); font-weight:500}
.res-ligne.fort dd{font-size:30px; font-weight:600; color:var(--or-clair); letter-spacing:-.02em}
#simu .res-note{margin-top:16px; font-size:12.5px; line-height:1.55; color:var(--t-sombre-3)}

/* ---------- Compteurs ---------- */
.compteurs{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--b-sombre); margin-top:clamp(40px,5vw,60px)}
.compteurs > div{background:var(--f-sombre); padding:28px 22px 24px; text-align:left}
.compteurs b{display:block; font-family:var(--titre); font-size:clamp(30px,3.2vw,40px); font-weight:600; letter-spacing:-.02em; color:var(--or-clair); line-height:1; font-variant-numeric:tabular-nums}
.compteurs span{display:block; margin-top:10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--t-sombre-3)}

/* atouts */
.atout{padding-top:24px; border-top:1px solid var(--b-sombre)}
.atout h3{font-size:18px; margin-bottom:9px}

/* ---------- Témoignages ---------- */
.avis{padding:30px 28px; border:1px solid var(--b-clair); background:#FFFFFF; border-radius:2px; display:flex; flex-direction:column; gap:20px}
.avis blockquote{margin:0; font-family:var(--titre); font-size:17px; font-weight:400; line-height:1.55; color:var(--t-clair)}
.avis .qui{display:flex; flex-direction:column; gap:3px; margin-top:auto}
.avis .qui b{font-family:var(--sous); font-size:14.5px; font-weight:600; color:var(--t-clair)}
.avis .qui span{font-size:13px; color:var(--t-clair-3)}
.avis .guill{font-family:var(--titre); font-size:40px; line-height:.6; color:var(--or); height:22px}

/* ---------- FAQ ---------- */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--b-sombre)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--sous); font-size:17px; font-weight:500; color:var(--t-sombre);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px; margin-top:-8px;
  border-right:1.5px solid var(--or); border-bottom:1.5px solid var(--or);
  transform:rotate(45deg); transition:transform .3s var(--e);
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq .rep{padding:0 40px 24px 0}

/* ---------- Contact ---------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form .plein{grid-column:1/-1}
.form label{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--t-clair-3); display:block; margin-bottom:8px}
.form input,.form select,.form textarea{
  width:100%; font-family:var(--texte); font-size:16px; color:var(--t-clair);
  background:#FFFFFF; border:1px solid var(--b-clair); border-radius:2px; padding:14px 16px;
  transition:border-color .3s var(--e);
}
.form textarea{resize:vertical; min-height:110px}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--or); outline:none}
.form .note{font-size:13.5px; color:var(--t-clair-3)}
#envoye{display:none; padding:20px 22px; border:1px solid rgba(122,154,110,.4); background:rgba(74,103,65,.10); border-radius:2px}
#envoye.on{display:block}
.coord{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px}
.coord li{display:flex; gap:16px; align-items:flex-start}
.coord svg{width:19px; height:19px; flex:none; margin-top:3px; stroke:var(--or); fill:none; stroke-width:1.4}
.coord .lbl{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--t-clair-3); margin-bottom:4px}
.coord a{color:var(--t-clair); text-decoration:none; border-bottom:1px solid var(--or-sourd); transition:border-color .3s var(--e)}
.coord a:hover{border-bottom-color:var(--or)}

/* ---------- Pied de page ---------- */
footer{background:var(--anthracite); color:var(--t-sombre); padding:clamp(56px,7vw,88px) var(--marge) 32px}
footer img{height:52px; width:auto; margin-bottom:22px}
.pied{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,4vw,60px)}
footer h4{font-family:var(--sous); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--or); margin-bottom:18px}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
footer a{color:var(--t-sombre-2); text-decoration:none; font-size:14.5px; transition:color .25s var(--e)}
footer a:hover{color:var(--or-clair)}
footer p{font-size:14.5px}
.bas{margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid var(--b-sombre);
  display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; font-size:12.5px; color:var(--t-sombre-3)}
#legal{margin-top:30px}
#legal summary{cursor:pointer; font-size:13px; color:var(--t-sombre-3); list-style:none}
#legal summary::-webkit-details-marker{display:none}
#legal summary:hover{color:var(--or-clair)}
#legal .bloc{margin-top:20px; padding:24px 26px; border:1px solid var(--b-sombre); border-radius:2px; font-size:13.5px; line-height:1.7; color:var(--t-sombre-2)}
#legal .bloc h5{font-family:var(--sous); font-size:13px; color:var(--ivoire); margin:22px 0 8px}
#legal .bloc h5:first-child{margin-top:0}
.acompleter{color:var(--or-clair); background:rgba(201,168,76,.13); padding:1px 7px; border-radius:2px; font-size:12.5px}

/* ---------- Animations d'apparition ---------- */
.rev{opacity:0; transform:translateY(22px); transition:opacity .8s var(--e), transform .8s var(--e)}
.rev.vu{opacity:1; transform:none}

/* ---------- Adaptations ---------- */
@media (max-width:900px){
  #menu{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(13,15,18,.97); backdrop-filter:blur(14px); padding:8px var(--marge) 26px;
    border-bottom:1px solid var(--or-sourd);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .3s var(--e);
  }
  #tete.ouvert #menu{transform:none; opacity:1; pointer-events:auto}
  #menu a{padding:15px 0; border-bottom:1px solid rgba(242,237,230,.08); font-size:16px}
  #menu a::after{display:none}
  #menu .btn{margin-top:18px; padding:15px 20px; font-size:15px}
  #burger{display:block}
  #tete{background:rgba(13,15,18,.86); backdrop-filter:blur(14px)}
  .duo{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  #simu .corps{grid-template-columns:1fr}
  .pied{grid-template-columns:1fr}
  .preuves{grid-template-columns:1fr}
  .etape + .etape{border-left:0}
}
@media (max-width:520px){
  body{font-size:16px}
  .preuves > div{padding:20px 18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .rev{opacity:1; transform:none}
}
@media print{ #tete,#jauge{display:none} }

.fiche{padding:clamp(120px,14vw,170px) clamp(20px,5vw,72px) clamp(50px,7vw,90px);background:var(--f-sombre);color:var(--t-sombre)}
.fiche .dans{max-width:860px}
.fiche h1{font-family:Sora,sans-serif;font-weight:500;font-size:clamp(32px,5vw,50px);line-height:1.1;margin:10px 0 18px}
.fiche h2{font-family:Sora,sans-serif;font-weight:500;font-size:22px;margin:38px 0 12px}
.fiche p,.fiche li{color:var(--t-sombre-2);line-height:1.65;font-size:16px}
.fiche ul{padding-left:20px}
.fiche .carte-bien{border:1px solid var(--b-sombre);padding:18px 20px;margin:12px 0}
.fiche .carte-bien b{color:var(--t-sombre);display:block;margin-bottom:4px}
.fiche .or{color:var(--or-clair)}
.fiche .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.fiche .villes{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px}
.fiche .villes a{color:var(--or-clair)}
.fiche .precision{font-size:12.5px;color:var(--t-sombre-3);margin-top:26px}