/* =====================================================================
   FINANCE-IMMO.COM — Feuille de style commune
   Palette : bleu (convention du secteur) · or en accent · vert réassurance
   Typo : Source Serif 4 (titres) + Figtree (texte)
   ===================================================================== */
:root{
  --navy:#12356B;
  --navy-dp:#0D2650;
  --navy-lt:#EAF0F8;
  --gold:#C8922E;
  --gold-lt:#FBF3E3;
  --green:#2E7D5B;
  --green-lt:#E8F3EE;
  --paper:#F1ECE2;
  --white:#FFFFFF;
  --ink:#1A2230;
  --muted:#5A6472;
  --line:#E4E1DA;

  --maxw:1200px;
  --display:"Source Serif 4",Georgia,serif;
  --sans:"Figtree",system-ui,sans-serif;
  --r:12px;
  --shadow:0 2px 4px rgba(18,53,107,.04),0 12px 32px -12px rgba(18,53,107,.14);
  --shadow-lg:0 4px 8px rgba(18,53,107,.05),0 24px 60px -20px rgba(18,53,107,.22);
}

/* ============================ BASE ============================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-weight:400;font-size:1.06rem;
  background:var(--paper);color:var(--ink);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--navy);color:#fff}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.16;letter-spacing:-.02em;color:var(--navy-dp)}

/* ---- Microtypographie ----------------------------------------------
   balance : répartit les titres en lignes de longueur équivalente
   pretty  : évite qu'un mot seul se retrouve sur la dernière ligne
   manual  : interdit toute césure automatique en milieu de mot
   -------------------------------------------------------------------- */
h1,h2,h3,h4,.intent,legend,.st-n+h3{text-wrap:balance}
p,li,.lead,dd,blockquote,figcaption{text-wrap:pretty}
h1,h2,h3,h4,p,li,a,.lead,.intent{hyphens:manual;-webkit-hyphens:manual}
.nowrap{white-space:nowrap}
.display{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.1}
.h2{font-size:clamp(1.8rem,3.3vw,2.6rem)}
em{font-style:italic;color:var(--navy)}
.section{padding:clamp(64px,7.5vw,104px) 0;position:relative}
.lead{color:var(--muted);font-size:1.16rem;max-width:56ch;line-height:1.7}
.tnum{font-variant-numeric:tabular-nums}

.eyebrow{font-size:.88rem;font-weight:600;color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--gold)}
.eyebrow.center{justify-content:center}

/* ============================ BOUTONS ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--r);
  font-family:var(--sans);font-size:1rem;font-weight:600;padding:16px 24px;border:2px solid transparent;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s}
.btn{white-space:nowrap}
.btn .arw{transition:transform .3s}
.btn:hover .arw{transform:translateX(4px)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 8px 20px -10px rgba(18,53,107,.7)}
.btn-primary:hover{background:var(--navy-dp);transform:translateY(-2px)}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#b07f22;transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{transform:translateY(-2px)}

.note{display:flex;align-items:center;gap:9px;font-size:.96rem;color:var(--muted);margin-top:16px}
.ck{width:22px;height:22px;border-radius:50%;background:var(--green-lt);color:var(--green);
  display:grid;place-items:center;font-size:.78rem;font-weight:700;flex:0 0 auto}

/* ============================ EN-TÊTE ============================ */
/* Bandeau bleu. L'opacite .97 n'est pas de la coquetterie : elle laisse
   deviner le contenu qui passe dessous au defilement, ce que le flou accentue.
   A .97, le fond reel reste #193A6F dans le pire des cas, et tous les
   contrastes calcules plus bas tiennent. */
header{position:sticky;top:0;z-index:100;background:rgba(18,53,107,.97);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .4s,box-shadow .4s}
header.stuck{border-bottom-color:rgba(255,255,255,.16);box-shadow:0 4px 20px -12px rgba(13,38,80,.55)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.logo{font-family:var(--display);font-size:1.46rem;font-weight:700;letter-spacing:-.025em;color:var(--navy-dp);line-height:1}
.logo .dot{color:var(--gold)}
.logo small{display:block;font-family:var(--sans);font-size:.72rem;font-weight:500;color:var(--muted);margin-top:4px;letter-spacing:0}
/* Le logotype du bandeau est une image ; le pied de page, lui, garde le nom
   compose en Source Serif. width et height reprennent les dimensions du
   fichier : le navigateur en deduit le rapport et reserve la place avant
   meme de l'avoir charge, ce qui evite au bandeau de sursauter. */
/* max-width:none contre la regle img{max-width:100%} de la remise a zero :
   celle-ci ecrasait la largeur du logotype pendant que la hauteur fixe
   l'empechait de suivre, et le mot sortait comprime de 36 %.
   flex:0 0 auto sur le lien pour la meme raison : sans lui, l'algorithme
   flex reduit le logotype des que la barre est juste, et le deforme.
   18 px et non 22 : l'image est rognee au ras des lettres, sans jambages ni
   marge, donc 18 px de haut y pesent autant que les 23 px du texte qu'elle
   remplace — et cette hauteur laisse la barre tenir sur une seule ligne. */
.topbar .logo{flex:0 0 auto}
.topbar .logo img{display:block;height:18px;width:auto;max-width:none}
/* #B9C5D8 et non le #8C9BB4 du pied de page : sur ce bleu, ce dernier tombe
   a 3,98:1, sous le seuil de 4,5:1 exige pour un texte de cette taille.
   Celui-ci donne 6,42:1. */
.topbar .logo small{color:#B9C5D8}
.nav{display:flex;gap:20px}
.nav a{position:relative;font-size:.94rem;font-weight:500;color:#fff;white-space:nowrap;transition:color .25s}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;border-radius:2px;background:var(--gold);transition:width .3s}
/* Le survol ne peut plus se marquer par la couleur : le bleu de reserve est
   devenu celui du fond. C'est le soulignement qui porte l'etat, et l'opacite
   qui signale le survol. */
.nav a{opacity:.88}
.nav a:hover,.nav a[aria-current=page]{color:#fff;opacity:1}
.nav a[aria-current=page]::after,.nav a:hover::after{width:100%}
.header-cta{display:flex;align-items:center;gap:16px}
.phone{text-align:right;line-height:1.3}
.phone b{font-size:1.1rem;font-weight:700;color:#fff;white-space:nowrap}
.phone small{display:block;font-size:.78rem;color:#B9C5D8}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger i{width:25px;height:2px;background:#fff;border-radius:2px;display:block;transition:.3s}
.burger.on i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Le bouton principal est bleu sur fond blanc partout ailleurs ; dans un
   bandeau bleu il disparaitrait. On l'inverse : blanc sur bleu, ce qui en
   fait au passage l'element le plus contraste de la barre — ce qu'un appel
   a l'action doit etre. */
.topbar .btn-primary{background:#fff;color:var(--navy-dp);box-shadow:0 8px 20px -10px rgba(0,0,0,.45)}
.topbar .btn-primary:hover{background:#EAF0F8;color:var(--navy-dp)}

/* Le menu deroulant reprend le bleu du bandeau : sur le fond clair d'origine,
   les liens passes en blanc auraient ete illisibles. */
.nav.open{display:flex;position:fixed;inset:84px 0 auto 0;flex-direction:column;gap:0;
  background:var(--navy-dp);padding:14px 28px 26px;border-bottom:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow)}
.nav.open a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14)}

/* ============================ FIL D'ARIANE ============================ */
.crumb{font-size:.9rem;color:var(--muted);padding:24px 0 0}
.crumb a:hover{color:var(--navy)}
.crumb span{margin:0 8px;opacity:.5}

/* ============================ HERO DE PAGE ============================ */
.page-hero{padding:48px 0 56px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;top:-200px;right:-160px;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,53,107,.07),transparent 68%);pointer-events:none}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{margin-bottom:20px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}

/* ============================ CARTES ============================ */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:32px 24px;
  transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d5d0c6}
.card .ico{width:50px;height:50px;border-radius:13px;background:var(--navy-lt);color:var(--navy);
  display:grid;place-items:center;font-size:1.35rem;margin-bottom:18px}
.card h3{font-size:1.26rem;margin-bottom:9px}
.card p{color:var(--muted);font-size:.99rem;line-height:1.62}

/* ============================ CONTENU RÉDACTIONNEL ============================ */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:44px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.25rem;margin:30px 0 10px;color:var(--navy)}
.prose p{margin-bottom:16px;color:#33404F}
.prose ul{margin:0 0 18px}
.prose li{position:relative;padding-left:26px;margin-bottom:11px;color:#33404F}
.prose li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.prose strong{color:var(--navy-dp);font-weight:600}
.prose a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.callout{background:var(--navy-lt);border-left:4px solid var(--navy);border-radius:0 var(--r) var(--r) 0;
  padding:22px 26px;margin:26px 0}
.callout p:last-child{margin-bottom:0}
.callout.gold{background:var(--gold-lt);border-left-color:var(--gold)}
.callout.green{background:var(--green-lt);border-left-color:var(--green)}

/* avertissement légal crédit conso */
.legal-warning{background:var(--white);border:2px solid var(--navy);border-radius:var(--r);
  padding:20px 24px;margin:28px 0;font-weight:600;color:var(--navy-dp);text-align:center;font-size:1.02rem}

/* ============================ ÉTAPES ============================ */
.steps-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{position:relative;padding-top:8px}
.step .st-n{width:54px;height:54px;border-radius:50%;background:var(--navy);color:#fff;
  font-family:var(--display);font-size:1.5rem;font-weight:700;display:grid;place-items:center;margin-bottom:20px;
  box-shadow:0 0 0 8px var(--navy-lt)}
.step h3{font-size:1.22rem;margin-bottom:10px}
.step p{color:var(--muted);font-size:.98rem;line-height:1.62}

/* ============================ FAQ ============================ */
.faq{max-width:880px;margin:0 auto}
.fitem{background:var(--white);border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;overflow:hidden;
  transition:border-color .3s,box-shadow .3s}
.fitem.open{border-color:var(--navy);box-shadow:var(--shadow)}
.fq{width:100%;background:none;border:0;cursor:pointer;text-align:left;color:var(--navy-dp);
  padding:22px 24px;display:flex;align-items:center;gap:18px;
  font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.22rem);font-weight:600}
.fq .q{flex:1}
.fq .pm{position:relative;width:18px;height:18px;flex:0 0 auto}
.fq .pm::before,.fq .pm::after{content:"";position:absolute;background:var(--gold);border-radius:2px;transition:transform .35s}
.fq .pm::before{left:0;top:8px;width:18px;height:2px}
.fq .pm::after{left:8px;top:0;width:2px;height:18px}
.fitem.open .fq .pm::after{transform:rotate(90deg) scaleX(0)}
.fa{max-height:0;overflow:hidden;transition:max-height .45s ease}
.fa p{color:var(--muted);font-size:1rem;padding:0 24px 22px;max-width:72ch}

/* ============================ BANDEAU CTA ============================ */
.band{border-radius:20px;padding:clamp(48px,6vw,72px) 40px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-dp) 100%)}
.band::before{content:"";position:absolute;top:-45%;right:-10%;width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,146,46,.22),transparent 65%);pointer-events:none}
.band>*{position:relative;z-index:2}
.band h2{color:#fff}
.band em{color:#F2C86B}
.band p{color:#C3D0E4;margin:16px auto 28px;max-width:52ch;font-size:1.06rem}
.band .note{justify-content:center;color:#C3D0E4}
.band .ck{background:rgba(255,255,255,.16);color:#8FE0BB}

/* ============================ MAILLAGE INTERNE ============================ */
.links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.link-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:600;color:var(--navy-dp);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.link-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--navy)}
.link-card .arw{color:var(--gold)}

/* ============================ PIED DE PAGE ============================ */
footer{background:var(--navy-dp);color:#B9C5D8;padding:72px 0 30px}
.fgrid{display:grid;grid-template-columns:1.1fr .9fr .9fr 1.3fr;gap:48px;margin-bottom:48px}

/* ---- Bande haute : marque a gauche, reseaux a droite ---- */
.ftop{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:32px;margin-bottom:40px;border-bottom:1px solid rgba(255,255,255,.13)}
.fsocial{display:flex;align-items:center;gap:12px;font-size:.92rem;color:#9DAABF}
.soc{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;color:#fff;flex:0 0 auto;
  transition:background .25s,border-color .25s,color .25s,transform .25s}
.soc:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-dp);transform:translateY(-2px)}
.soc svg{width:18px;height:18px;fill:currentColor;display:block}

/* ---- Lignes de contact avec pictogramme ---- */
.fline{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:.98rem;line-height:1.6}
.fline:last-child{margin-bottom:0}
.fline svg{width:16px;height:16px;flex:0 0 auto;margin-top:4px;fill:var(--gold);display:block}
.fline a{line-height:1.6}

/* ---- Encart mis en avant ---- */
.fcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);padding:24px}
.fcard-ic{width:48px;height:48px;border-radius:14px;background:var(--gold);color:var(--navy-dp);
  display:grid;place-items:center;margin-bottom:16px}
.fcard-ic svg{width:22px;height:22px;fill:currentColor;display:block}
.fcard a{display:block;line-height:1.7;margin-bottom:8px}
.fcard a:last-child{margin-bottom:0}
footer .logo{color:#fff}
footer .logo small{color:#8C9BB4}
footer h3{font-family:var(--sans);font-size:.94rem;font-weight:700;color:#fff;margin-bottom:16px}
footer a{color:#B9C5D8;font-size:.98rem;line-height:2.1;transition:color .25s}
footer a:hover{color:#F2C86B}
footer .addr{font-size:.98rem;line-height:2.1}
.orias-bar{border-top:1px solid rgba(255,255,255,.13);padding-top:26px;margin-bottom:24px;
  display:grid;grid-template-columns:1fr 1fr;gap:22px;font-size:.88rem;color:#9DAABF;line-height:1.6}
.orias-bar b{display:block;color:#F2C86B;font-weight:600;font-size:.84rem;margin-bottom:3px}
.orias-bar .orias-note{grid-column:1/-1;font-size:.84rem;color:#9DAABF}
.orias-bar a{color:#9DAABF;text-decoration:underline}
.fbottom{border-top:1px solid rgba(255,255,255,.13);padding-top:24px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;
  flex-wrap:wrap;gap:12px;font-size:.9rem;color:#8C9BB4}

/* ============================ APPARITION AU DÉFILEMENT ============================ */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

/* ============================ RESPONSIVE ============================ */
/* Le menu horizontal ne tient sur une ligne qu’au-dessus de 1195 px : en dessous, hamburger. */
@media(max-width:1200px){
  .nav{display:none}
  .burger{display:flex}
}
@media(max-width:1080px){
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .phone{display:none}
  .steps-grid{grid-template-columns:1fr;gap:28px}
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:620px){
  .ftop{flex-direction:column;align-items:flex-start;gap:20px}
  .fcard{padding:20px}
  .grid-4,.fgrid,.orias-bar,.links-grid{grid-template-columns:1fr}
  .container{padding:0 16px}
  .card{padding:24px}
  /* En-tête compact : le bouton ne doit ni passer à la ligne ni chevaucher le logo */
  .topbar{gap:12px;height:72px}
  .logo{font-size:1.18rem}
  .logo small{font-size:.64rem;margin-top:2px}
  /* Le logotype est large (rapport 11:1) : sur petit ecran il doit maigrir
     davantage que le texte qu'il remplace, sinon il chasse le bouton. */
  .topbar .logo img{height:15px}
  .header-cta{gap:8px}
  .header-cta .btn{padding:10px 14px;font-size:.86rem}
  .nav.open{inset:72px 0 auto 0}
  .band{padding:38px 22px}
  .legal-warning{padding:16px 18px;font-size:.96rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}