/* ==========================================================================
   AGENCE IMMOBILIÈRE NAFADJI SARL — Feuille de style
   Votre partenaire de confiance pour tous vos projets immobiliers
   Palette relevée au pixel sur le logo officiel :
     Bleu #07366C · Bleu nuit #001C48 · Or #C5912D · Blanc #FFFFFF · Ivoire #F6F4EF
   ========================================================================== */

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,video,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;outline:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse}

/* ============ TOKENS ============ */
:root{
  --bleu-nuit:#001C48;
  --bleu-nuit-2:#002355;
  --bleu:#07366C;
  --bleu-roi:#0B4C9E;
  --or:#C5912D;
  --or-clair:#E0B458;
  --or-sombre:#96701F;
  /* Or assombri réservé au PETIT TEXTE posé sur blanc ou ivoire.
     L'or officiel #C5912D ne dépasse pas 2,8:1 sur blanc : il reste la couleur
     des aplats, des boutons, des icônes et des filets, mais un texte de 11 px
     écrit avec serait illisible. Cette variante conserve la teinte dorée et
     atteint 5,3:1 sur blanc, 4,8:1 sur ivoire. L'identité n'est pas modifiée. */
  --or-texte:#8A6514;
  --vert-wa:#1FAF54;        /* vert WhatsApp, pour les aplats et icônes */
  --vert-wa-txt:#117A3A;    /* même famille, pour le texte : 5,4:1 sur blanc */
  --blanc:#FFFFFF;
  --ivoire:#F6F4EF;
  --ivoire-2:#FBFAF7;
  --encre:#0E1A2B;
  /* Hiérarchie des gris : remontée d'un cran pour tenir le niveau AA.
     .84 texte courant · .74 secondaire · .66 libellés et mentions. */
  --txt:rgba(14,26,43,.84);
  --txt-faible:rgba(14,26,43,.74);
  --txt-tres-faible:rgba(14,26,43,.66);
  --hairline:rgba(7,54,108,.13);
  --hairline-forte:rgba(7,54,108,.20);
  --hairline-or:rgba(197,145,45,.38);
  /* Textes posés sur les aplats bleu nuit — mêmes contraintes, à l'envers.
     .88 courant · .78 secondaire · .62 mentions discrètes. */
  --sur-fonce:rgba(255,255,255,.88);
  --sur-fonce-faible:rgba(255,255,255,.78);
  --sur-fonce-tres-faible:rgba(255,255,255,.62);
  --hairline-fonce:rgba(255,255,255,.12);
  --ombre-s:0 1px 2px rgba(0,28,72,.06);
  --ombre-m:0 6px 20px rgba(0,28,72,.08);
  --ombre-l:0 22px 54px rgba(0,28,72,.15);
  --ombre-xl:0 30px 70px rgba(0,28,72,.20);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost','Segoe UI',system-ui,-apple-system,sans-serif;
  --max:1280px;
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --hdr-h:88px;
}

/* ============ BASE ============ */
body{
  background:var(--blanc);color:var(--txt);font-family:var(--sans);
  font-weight:300;font-size:16px;line-height:1.7;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--or);color:var(--bleu-nuit)}

/* Navigation au clavier : l'élément atteint par la touche Tab doit se voir.
   :focus-visible ne s'affiche qu'au clavier, jamais au clic à la souris. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--or);outline-offset:3px;border-radius:2px;
}
.topbar a:focus-visible,.ftr a:focus-visible,.hero a:focus-visible,
.pagehead a:focus-visible,.cta a:focus-visible,.rail a:focus-visible,
.lang button:focus-visible{outline-color:var(--or-clair)}

/* Élément désactivé : l'état doit être lisible et non cliquable. */
button:disabled,input:disabled,select:disabled,textarea:disabled{
  opacity:.55;cursor:not-allowed;
}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap--tight{max-width:900px}
section{position:relative}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.12;color:var(--bleu-nuit);letter-spacing:-.005em}
h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4.2vw,3.5rem)}
h3{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.25}
h4{font-size:1.1rem;line-height:1.3}
p{max-width:66ch}

.eyebrow{
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--or-texte);display:flex;align-items:center;gap:14px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--or);opacity:.55;flex:none}
.eyebrow.center{justify-content:center}
.lede{font-size:clamp(1rem,1.3vw,1.1rem);color:var(--txt);font-weight:300}
.sec-head{margin-bottom:clamp(38px,5vw,64px)}
.sec-head.center{text-align:center}
.sec-head.center p{margin-inline:auto}
.sec-head p{margin-top:20px}
.sec{padding-block:clamp(72px,9vw,132px)}
.sec--alt{background:var(--ivoire)}
.sec--tight{padding-block:clamp(52px,6vw,88px)}

/* ============ BOUTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 30px;
  font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  transition:all .45s var(--ease);position:relative;text-align:center;border-radius:2px;
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--or{background:var(--or);color:var(--bleu-nuit);box-shadow:0 4px 14px rgba(197,145,45,.30)}
.btn--or:hover{background:var(--or-clair);box-shadow:0 8px 24px rgba(197,145,45,.38);transform:translateY(-1px)}
.btn--bleu{background:var(--bleu);color:var(--blanc);box-shadow:0 4px 14px rgba(7,54,108,.26)}
.btn--bleu:hover{background:var(--bleu-nuit);box-shadow:0 8px 24px rgba(7,54,108,.34);transform:translateY(-1px)}
.btn--ghost{color:var(--bleu);box-shadow:inset 0 0 0 1px var(--hairline-forte)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--or);color:var(--or-sombre);background:rgba(197,145,45,.05)}
.btn--sm{padding:12px 22px;font-size:.7rem}
.btn--block{width:100%}
/* boutons posés sur une image sombre */
.hero .btn--ghost,.cta .btn--ghost,.pagehead .btn--ghost{color:var(--blanc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.hero .btn--ghost:hover,.cta .btn--ghost:hover,.pagehead .btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--or-clair);color:var(--or-clair);background:rgba(255,255,255,.06)}
.lien{
  display:inline-flex;align-items:center;gap:10px;color:var(--or-texte);font-size:.74rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;padding-bottom:6px;transition:gap .4s var(--ease),color .3s;
}
.lien svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.lien:hover{gap:16px;color:var(--bleu-roi)}

/* ============ BARRE UTILITAIRE ============ */
.topbar{background:var(--bleu-nuit);font-size:.74rem;color:var(--sur-fonce-faible);letter-spacing:.06em;position:relative;z-index:60}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:42px}
.topbar__l,.topbar__r{display:flex;align-items:center;gap:26px}
.topbar a{transition:color .3s}
.topbar a:hover{color:var(--or-clair)}
.topbar__item{display:inline-flex;align-items:center;gap:8px}
.topbar__item svg{width:13px;height:13px;color:var(--or-clair);opacity:.9}
.lang{display:inline-flex;align-items:center;gap:2px}
.lang button{font-size:.72rem;letter-spacing:.1em;padding:3px 7px;color:var(--sur-fonce-tres-faible);transition:color .3s;font-weight:400}
.lang button.on{color:var(--or-clair);font-weight:600}
.lang span{color:rgba(255,255,255,.58)}
.socials{display:flex;gap:16px}
.socials a{opacity:.62;transition:opacity .3s,color .3s}
.socials a:hover{opacity:1;color:var(--or-clair)}
.socials svg{width:15px;height:15px}

/* ============ HEADER ============ */
.hdr{
  position:sticky;top:0;z-index:50;background:var(--blanc);
  box-shadow:0 1px 0 var(--hairline);
  transition:box-shadow .45s var(--ease);
}
.hdr.stuck,.hdr--solid{box-shadow:0 2px 20px rgba(0,28,72,.10)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand img{width:54px;height:auto}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__sur{font-size:.5rem;letter-spacing:.3em;color:var(--txt-tres-faible);text-transform:uppercase;font-weight:500;margin-bottom:4px}
.brand__name{font-family:var(--sans);font-size:1.34rem;font-weight:600;color:var(--bleu);letter-spacing:.11em}
.brand__name em{font-style:normal;color:var(--or-texte);font-size:.62em;letter-spacing:.14em;margin-left:5px;vertical-align:2px}
.nav{display:flex;align-items:center;gap:clamp(12px,1.5vw,26px);min-width:0}
.nav a,.nav__top{
  font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-faible);
  font-weight:500;padding-block:8px;position:relative;transition:color .35s;white-space:nowrap;
}
/* Page courante et survol doivent se distinguer au premier coup d'œil :
   la page où l'on se trouve porte un trait DORÉ, le survol un trait bleu
   plus discret. Deux entrées ne peuvent jamais sembler sélectionnées
   en même temps. */
.nav a::after,.nav__top::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--hairline-forte);transition:width .45s var(--ease),background .3s}
.nav a:hover,.nav__top:hover{color:var(--bleu)}
.nav a:hover::after,.nav__top:hover::after{width:100%}
.nav a.on,.nav__item.on .nav__top{color:var(--bleu);font-weight:600}
.nav a.on::after,.nav__item.on .nav__top::after{width:100%;background:var(--or)}
.nav a.on:hover::after,.nav__item.on .nav__top:hover::after{background:var(--or)}

/* menu déroulant Services */
.nav__item{position:relative;display:flex;align-items:center}
.nav__top{display:inline-flex;align-items:center;gap:7px;background:none;font-family:inherit}
.nav__top svg{width:9px;height:9px;opacity:.65;transition:transform .4s var(--ease)}
.nav__item:hover .nav__top svg,.nav__item:focus-within .nav__top svg{transform:rotate(180deg)}
.nav__sub{
  position:absolute;top:100%;left:-20px;min-width:264px;padding:10px 0;
  background:var(--blanc);border-radius:3px;
  box-shadow:var(--ombre-l),0 0 0 1px var(--hairline);
  opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub,.nav__item.open .nav__sub{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nav__sub a{
  display:block;padding:11px 24px;font-size:.78rem;letter-spacing:.04em;font-weight:400;
  text-transform:none;color:var(--txt);transition:color .3s,background .3s,padding-left .3s;
}
.nav__sub a::after{display:none}
.nav__sub a:hover,.nav__sub a.on{color:var(--bleu);background:var(--ivoire);padding-left:29px}
.nav__grp{display:block;padding:12px 24px 5px;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--txt-tres-faible);font-weight:600}
.nav__grp+a{padding-top:4px}
.hdr__act{display:flex;align-items:center;gap:14px;flex:none}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;color:var(--txt-faible);transition:color .3s}
.icon-btn:hover{color:var(--or)}
.icon-btn svg{width:17px;height:17px}
.btn-wa{display:inline-flex;align-items:center;gap:9px;background:var(--vert-wa-txt);color:#fff;padding:11px 18px;font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;border-radius:2px;transition:background .35s,transform .35s}
.btn-wa:hover{background:#0D6630;transform:translateY(-1px)}
.btn-wa svg{width:15px;height:15px;fill:currentColor;flex:none}
.burger{display:none;width:40px;height:40px;place-items:center}
.burger span{display:block;width:22px;height:2px;background:var(--bleu);position:relative;transition:.4s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--bleu);transition:.4s}
.burger span::before{top:-7px}
.burger span::after{top:7px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0;transform:rotate(45deg)}
body.menu-open .burger span::after{top:0;transform:rotate(-45deg)}
.mnav{
  position:fixed;inset:0;background:var(--blanc);z-index:45;padding:110px var(--pad) 40px;
  transform:translateY(-100%);transition:transform .6s var(--ease);overflow-y:auto;
}
body.menu-open .mnav{transform:translateY(0)}
.mnav a{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--bleu-nuit);padding:11px 0;box-shadow:0 1px 0 var(--hairline)}
.mnav a:hover{color:var(--or)}
.mnav__cta{margin-top:30px;display:flex;flex-direction:column;gap:12px}

/* ============ HERO ACCUEIL ============ */
.hero{position:relative;min-height:84svh;display:flex;flex-direction:column;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--bleu-nuit)}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover}
/* Voile du hero — dosé, pas opaque.
   Le texte occupe le tiers gauche : le voile y est assez dense pour garantir
   plus de 9:1 en blanc, même si la photographie était entièrement claire.
   Il s'allège ensuite franchement pour que l'image reste visible et vivante. */
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(0,20,52,.92) 0%,rgba(0,22,56,.86) 30%,rgba(0,26,66,.46) 58%,rgba(0,28,72,.30) 78%,rgba(0,28,72,.42) 100%),
    linear-gradient(180deg,rgba(0,20,52,.50) 0%,transparent 24%,transparent 62%,rgba(0,18,46,.74) 100%);
}
.hero__body{flex:1;display:flex;align-items:center;padding-block:clamp(70px,9vw,120px)}
.hero__col{max-width:660px}
/* Lisibilité sur photographie : une ombre portée très douce sécurise le texte
   quelle que soit la zone de l'image qui se trouve derrière, sans qu'il soit
   nécessaire d'assombrir davantage la photographie. */
.hero h1,.hero__lede,.hero .eyebrow,
.pagehead h1,.pagehead p,.pagehead .eyebrow,.bread,
.cta h2,.cta p,.cta .eyebrow{text-shadow:0 1px 10px rgba(0,16,40,.55)}
.hero h1{margin-bottom:26px;color:var(--blanc)}
.hero h1 em{font-style:normal;color:var(--or-clair);display:block}
.hero .eyebrow{color:var(--or-clair)}
.hero .eyebrow::before{background:var(--or-clair)}
.hero__lede{font-size:clamp(1rem,1.35vw,1.16rem);color:rgba(255,255,255,.94);max-width:50ch;margin-bottom:38px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.rail{
  position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;gap:1px;width:264px;background:rgba(255,255,255,.14);
  border-radius:3px;overflow:hidden;box-shadow:var(--ombre-xl);
}
.rail a{display:flex;align-items:center;gap:14px;padding:16px 18px;background:rgba(0,22,56,.78);backdrop-filter:blur(10px);transition:background .4s var(--ease)}
.rail a:hover{background:rgba(7,54,108,.92)}
.rail__ico{width:34px;height:34px;display:grid;place-items:center;color:var(--or-clair);flex:none}
.rail__ico svg{width:19px;height:19px}
.rail__t{font-size:.82rem;color:var(--blanc);font-weight:400;line-height:1.35;display:block}
.rail__s{font-size:.7rem;color:var(--sur-fonce-faible);line-height:1.35;display:block}

/* ============ RECHERCHE ============ */
.search{position:relative;z-index:5;padding-bottom:clamp(30px,4vw,56px);margin-top:-46px}
.search--page{padding-block:0;margin-top:-46px}
.search__box{background:var(--blanc);padding:8px;border-radius:3px;box-shadow:var(--ombre-l),0 0 0 1px var(--hairline)}
.search__grid{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:1px;background:var(--hairline)}
.field{background:var(--blanc);padding:15px 18px;position:relative}
.field label{display:block;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--txt-tres-faible);margin-bottom:7px;font-weight:600}
.field select,.field input{width:100%;font-size:.9rem;color:var(--encre);font-weight:400;cursor:pointer;appearance:none;padding-right:20px}
.field select option{background:var(--blanc);color:var(--encre)}
.field::after{
  content:"";position:absolute;right:18px;bottom:20px;width:7px;height:7px;
  border-right:2px solid var(--or);border-bottom:2px solid var(--or);transform:rotate(45deg);opacity:.85;pointer-events:none;
}
.field--txt::after{display:none}
.search__btn{
  background:var(--or);color:var(--bleu-nuit);padding-inline:34px;display:flex;align-items:center;gap:11px;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:background .4s;
}
.search__btn:hover{background:var(--or-clair)}
.search__btn svg{width:16px;height:16px}
.search__more{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-faible);transition:color .3s;
}
.search__more:hover{color:var(--or-texte)}
.search__more svg{width:13px;height:13px;transition:transform .4s}
.search__more.open svg{transform:rotate(180deg)}
.search__adv{display:none;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);margin-top:1px}
.search__adv.open{display:grid}

/* ============ PILIERS ============ */
.piliers{background:var(--ivoire);padding-block:34px}
.piliers__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hairline)}
.pilier{background:var(--ivoire);display:flex;align-items:center;gap:14px;padding:18px 20px}
.pilier svg{width:24px;height:24px;color:var(--or-sombre);flex:none;stroke-width:1.2}
.pilier__t{font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;color:var(--bleu);font-weight:600}
.pilier__s{font-size:.75rem;color:var(--txt-faible);margin-top:2px}

/* ============ EN-TÊTE DE PAGE INTERNE ============ */
.pagehead{position:relative;isolation:isolate;overflow:hidden}
.pagehead__bg{position:absolute;inset:0;z-index:-2}
.pagehead__bg img{width:100%;height:100%;object-fit:cover}
.pagehead__veil{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,18,46,.92) 0%,rgba(0,20,52,.86) 34%,rgba(0,26,66,.52) 70%,rgba(0,28,72,.38) 100%),
             linear-gradient(180deg,rgba(0,18,46,.50),transparent 38%,rgba(0,18,46,.72));
}
.pagehead--plain{background:var(--bleu-nuit)}
.pagehead__in{padding-block:clamp(70px,9vw,130px)}
.pagehead h1{font-size:clamp(2.3rem,5vw,4rem);margin-bottom:22px;max-width:18ch;color:var(--blanc)}
.pagehead p{color:rgba(255,255,255,.94);max-width:58ch}
.pagehead .eyebrow{color:var(--or-clair)}
.pagehead .eyebrow::before{background:var(--or-clair)}
.bread{display:flex;align-items:center;gap:10px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sur-fonce-tres-faible);margin-bottom:26px}
.bread a{transition:color .3s}
.bread a:hover{color:var(--or-clair)}
.bread svg{width:11px;height:11px;opacity:.5}

/* ============ BANDEAU DÉMONSTRATION ============ */
.bandeau-demo{
  display:flex;align-items:flex-start;gap:14px;background:rgba(197,145,45,.09);
  border-left:3px solid var(--or);padding:16px 20px;margin-bottom:30px;border-radius:0 3px 3px 0;
}
.bandeau-demo svg{width:19px;height:19px;color:var(--or-texte);flex:none;margin-top:3px;stroke-width:1.6}
.bandeau-demo p{font-size:.85rem;color:var(--txt);max-width:none;margin:0}
.bandeau-demo b{color:var(--bleu-nuit);font-weight:700}

/* ============ ENCADRÉ « À VALIDER PAR LE PROPRIÉTAIRE » ============
   Utilisé là où une information ne peut pas être publiée sans vérification
   (pièces, délais, coûts, administrations). Visible, assumé, jamais comblé
   par une information inventée. */
.avalider{
  background:var(--ivoire);border-radius:3px;padding:clamp(26px,3.4vw,40px);
  box-shadow:0 0 0 1px var(--hairline);position:relative;overflow:hidden;
}
.avalider::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--or)}
.avalider__tag{
  display:inline-block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--or-texte);background:rgba(197,145,45,.14);padding:5px 11px;border-radius:2px;margin-bottom:16px;
}
.avalider h3{font-size:clamp(1.25rem,2vw,1.6rem);margin-bottom:14px}
.avalider p{font-size:.92rem;color:var(--txt);max-width:62ch}
.avalider__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ============ BIENS ============ */
.biens__top{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:34px}
.tabs{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:38px}
.tab{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-faible);padding-bottom:9px;position:relative;transition:color .35s;font-weight:500}
.tab::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--or);transition:width .45s var(--ease)}
.tab.on{color:var(--bleu)}
.tab.on::after{width:100%}
.grid-biens{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.grid-biens--3{grid-template-columns:repeat(3,1fr)}
.bien{
  background:var(--blanc);position:relative;border-radius:3px;overflow:hidden;
  box-shadow:var(--ombre-s),0 0 0 1px var(--hairline);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.bien:hover{transform:translateY(-6px);box-shadow:var(--ombre-l),0 0 0 1px rgba(197,145,45,.30)}
.bien__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ivoire)}
.bien__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.bien:hover .bien__media img{transform:scale(1.07)}
.bien__tag{position:absolute;top:14px;left:14px;background:var(--or);color:var(--bleu-nuit);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;font-weight:600;border-radius:2px}
.bien__tag--louer{background:var(--bleu);color:var(--blanc)}
.bien__demo{
  position:absolute;bottom:14px;left:14px;background:rgba(0,28,72,.82);backdrop-filter:blur(6px);
  color:rgba(255,255,255,.92);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  padding:4px 10px;font-weight:500;border-radius:2px;
}
.bien__fav{position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);color:var(--txt-faible);transition:color .3s,background .3s;border-radius:2px}
.bien__fav:hover{color:var(--or);background:var(--blanc)}
.bien__fav svg{width:15px;height:15px}
.bien__fav.on{color:var(--or)}
.bien__fav.on svg{fill:currentColor}
.bien__body{padding:19px 20px 21px}
.bien__prix{font-family:var(--serif);font-size:1.32rem;color:var(--or-texte);font-weight:600;letter-spacing:.01em}
.bien__prix small{font-size:.7rem;font-family:var(--sans);color:var(--txt-faible);letter-spacing:.05em;font-weight:400}
.bien__prix--demande{font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu)}
.bien h3{font-size:1.02rem;font-family:var(--sans);font-weight:500;color:var(--bleu-nuit);margin-top:9px;line-height:1.45}
.bien__loc{display:flex;align-items:center;gap:7px;font-size:.79rem;color:var(--txt-faible);margin-top:7px}
.bien__loc svg{width:13px;height:13px;color:var(--or-sombre);opacity:.85;flex:none}
.bien__specs{display:flex;gap:18px;margin-top:16px;padding-top:15px;box-shadow:inset 0 1px 0 var(--hairline);font-size:.78rem;color:var(--txt-faible)}
.bien__specs span{display:inline-flex;align-items:center;gap:6px}
.bien__specs svg{width:14px;height:14px;color:var(--or);opacity:.75;flex:none}
.bien__cmp{display:flex;align-items:center;gap:8px;margin-top:15px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-tres-faible);transition:color .3s}
.bien__cmp:hover{color:var(--or)}
.bien__cmp .box{width:13px;height:13px;box-shadow:inset 0 0 0 1px currentColor;display:grid;place-items:center;flex:none}
.bien__cmp.on{color:var(--or)}
.bien__cmp.on .box{background:var(--or);color:var(--bleu-nuit)}
.bien__cmp .box svg{width:9px;height:9px;opacity:0}
.bien__cmp.on .box svg{opacity:1}
.bien__wa{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vert-wa-txt);font-weight:700;transition:gap .35s var(--ease)}
.bien__wa:hover{gap:11px}
.bien__wa svg{width:14px;height:14px;fill:currentColor;flex:none}
.vide{text-align:center;padding:60px 20px;color:var(--txt-faible);grid-column:1/-1}

/* page catalogue : sidebar filtres */
.cat{display:grid;grid-template-columns:280px 1fr;gap:clamp(26px,3.4vw,48px);align-items:start}
.filtres{background:var(--ivoire);padding:26px;position:sticky;top:110px;border-radius:3px;box-shadow:0 0 0 1px var(--hairline)}
.filtres h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:20px;font-weight:600;color:var(--bleu)}
.filtres__grp{margin-bottom:22px}
.filtres__grp>label:not(.chk){display:block;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-tres-faible);margin-bottom:10px;font-weight:600}
.filtres select,.filtres input[type=text]{width:100%;background:var(--blanc);padding:11px 13px;font-size:.86rem;color:var(--encre);box-shadow:inset 0 0 0 1px var(--hairline);appearance:none;cursor:pointer;border-radius:2px}
.chk{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--txt-faible);padding:5px 0;cursor:pointer;transition:color .3s}
.chk:hover{color:var(--bleu)}
.chk input{appearance:none;width:15px;height:15px;background:var(--blanc);box-shadow:inset 0 0 0 1px var(--hairline-forte);flex:none;transition:.3s;border-radius:2px}
.chk input:checked{background:var(--or);box-shadow:inset 0 0 0 1px var(--or)}
.cat__bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.cat__count{font-size:.8rem;color:var(--txt-faible)}
.cat__count b{color:var(--bleu);font-weight:600}
.tri{display:flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-tres-faible)}
.tri select{color:var(--encre);font-size:.8rem;letter-spacing:0;text-transform:none;cursor:pointer;background:var(--ivoire);padding:8px 12px;border-radius:2px}
.pagin{display:flex;justify-content:center;gap:6px;margin-top:52px}
.pagin button{width:40px;height:40px;display:grid;place-items:center;font-size:.82rem;color:var(--txt-faible);background:var(--ivoire);transition:.35s;border-radius:2px}
.pagin button:hover{color:var(--bleu);background:var(--hairline)}
.pagin button.on{background:var(--or);color:var(--bleu-nuit);font-weight:600}

/* ============ CHIFFRES ============ */
.chiffres{background:var(--bleu-nuit);position:relative;overflow:hidden}
.chiffres__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hairline-fonce);position:relative;z-index:2}
.chiffres__grid--4{grid-template-columns:repeat(4,1fr)}
.chiffre{background:var(--bleu-nuit);padding:clamp(34px,4.4vw,58px) 20px;text-align:center}
.chiffre svg{width:26px;height:26px;color:var(--or-clair);margin:0 auto 16px;stroke-width:1.2;opacity:.95}
.chiffre__n{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.4rem);color:var(--blanc);font-weight:400;line-height:1}
.chiffre__l{font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sur-fonce-faible);margin-top:12px}

/* ============ SERVICES ============ */
.grid-serv{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hairline)}
.grid-serv--3{grid-template-columns:repeat(3,1fr)}
.grid-serv--4{grid-template-columns:repeat(4,1fr)}
.serv{background:var(--blanc);padding:clamp(28px,3vw,40px) clamp(22px,2.4vw,30px);display:flex;flex-direction:column;min-height:330px;transition:background .55s var(--ease),box-shadow .55s var(--ease);position:relative}
.sec--alt .serv{background:var(--ivoire)}
.serv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.serv:hover{background:var(--ivoire-2);box-shadow:var(--ombre-m)}
.sec--alt .serv:hover{background:var(--blanc)}
.serv:hover::after{transform:scaleX(1)}
.serv__n{font-family:var(--serif);font-size:.95rem;color:var(--or-texte);opacity:1;letter-spacing:.1em;font-weight:600}
.serv svg.serv__ico{width:30px;height:30px;color:var(--or-sombre);stroke-width:1.1;margin:20px 0 22px}
.serv h3{font-size:1.22rem;margin-bottom:12px}
.serv p{font-size:.87rem;color:var(--txt-faible);line-height:1.72;flex:1}
.serv .lien{margin-top:20px;font-size:.68rem}

/* ============ ÉTAPES / PROCESSUS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline)}
.step{background:var(--blanc);padding:clamp(26px,3vw,38px) clamp(20px,2.2vw,28px)}
.sec--alt .step{background:var(--ivoire)}
.step__n{font-family:var(--serif);font-size:2.6rem;color:var(--or-sombre);opacity:.9;line-height:1;margin-bottom:18px;font-weight:600}
.step h3{font-size:1.1rem;font-family:var(--sans);font-weight:500;margin-bottom:10px}
.step p{font-size:.85rem;color:var(--txt-faible)}

/* ============ SPLIT ÉDITORIAL ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}
.split--wide{grid-template-columns:1.1fr .9fr}
.split__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ivoire);border-radius:3px;box-shadow:var(--ombre-m)}
.split__img img{width:100%;height:100%;object-fit:cover}
.split__img--tall{aspect-ratio:3/4}
.puces{display:flex;flex-direction:column;gap:16px;margin-top:30px}
.puce{display:flex;gap:15px;align-items:flex-start}
.puce svg{width:19px;height:19px;color:var(--or-sombre);flex:none;margin-top:3px;stroke-width:1.5}
.puce b{display:block;color:var(--bleu-nuit);font-weight:600;font-size:.95rem;margin-bottom:3px}
.puce span{font-size:.85rem;color:var(--txt-faible)}

/* ============ PROSE ÉDITORIALE ============ */
.prose p{margin-bottom:20px;color:var(--txt)}
.prose h3{margin:38px 0 16px}
.prose ul{display:flex;flex-direction:column;gap:11px;margin-bottom:24px}
.prose li{display:flex;gap:12px;font-size:.94rem;color:var(--txt-faible)}
.prose li::before{content:"";width:6px;height:6px;background:var(--or);flex:none;margin-top:10px;border-radius:50%}

/* ============ CARTE MALI ============ */
.carte__wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,74px);align-items:center}
.carte__fig{position:relative}
.carte__img{width:100%;height:auto;filter:brightness(.42) sepia(1) hue-rotate(176deg) saturate(3.4)}
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}
.pin__dot{width:9px;height:9px;border-radius:50%;background:rgba(197,145,45,.65);transition:all .4s var(--ease);position:relative}
.pin__dot::after{content:"";position:absolute;inset:-9px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hairline-or);opacity:0;transition:opacity .4s}
.pin:hover .pin__dot,.pin.on .pin__dot{background:var(--or);transform:scale(1.25)}
.pin:hover .pin__dot::after,.pin.on .pin__dot::after{opacity:1}
.pin__lbl{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%) translateY(4px);background:var(--bleu-nuit);color:var(--blanc);
  font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;white-space:nowrap;opacity:0;pointer-events:none;transition:all .35s var(--ease);border-radius:2px;
}
.pin:hover .pin__lbl,.pin.on .pin__lbl{opacity:1;transform:translateX(-50%) translateY(0)}
.pin.on .pin__lbl{background:var(--or);color:var(--bleu-nuit)}
.pin--bko .pin__dot{width:12px;height:12px;background:var(--or)}
.carte__panel{background:var(--blanc);padding:clamp(28px,3.4vw,44px);border-radius:3px;box-shadow:var(--ombre-m),0 0 0 1px var(--hairline)}
.carte__panel h3{font-size:clamp(1.7rem,2.6vw,2.3rem);margin-bottom:6px}
.kicker{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--or-texte);margin-bottom:14px;font-weight:600}
.carte__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);margin:26px 0}
.carte__stat{background:var(--ivoire);padding:16px 6px;text-align:center}
.carte__stat b{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--bleu);font-weight:600}
.carte__stat span{font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-tres-faible)}
.carte__panel p{font-size:.88rem;color:var(--txt-faible)}
.carte__list{display:flex;flex-wrap:wrap;gap:7px;margin-top:26px}
.carte__list button{font-size:.68rem;letter-spacing:.06em;color:var(--txt-faible);padding:6px 12px;background:var(--ivoire);transition:all .35s;border-radius:2px}
.carte__list button:hover{color:var(--bleu);background:var(--hairline)}
.carte__list button.on{background:var(--or);color:var(--bleu-nuit);font-weight:600}

/* ============ FORMULAIRES ============ */
.form-card{background:var(--blanc);padding:clamp(28px,3.4vw,46px);border-radius:3px;box-shadow:var(--ombre-m),0 0 0 1px var(--hairline)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row--3{grid-template-columns:repeat(3,1fr)}
.inp{margin-bottom:14px}
.inp label{display:block;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-tres-faible);margin-bottom:8px;font-weight:600}
.inp input,.inp select,.inp textarea{width:100%;background:var(--ivoire-2);padding:13px 15px;font-size:.9rem;color:var(--encre);font-weight:400;transition:box-shadow .35s,background .35s;box-shadow:inset 0 0 0 1px var(--hairline);border-radius:2px}
.inp input:focus,.inp select:focus,.inp textarea:focus{box-shadow:inset 0 0 0 2px var(--or);background:var(--blanc)}
.inp textarea{resize:vertical;min-height:100px;line-height:1.6}
.inp select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 49%,var(--or) 50%),linear-gradient(-45deg,transparent 49%,var(--or) 50%);background-size:6px 6px;background-position:calc(100% - 20px) 19px,calc(100% - 15px) 19px;background-repeat:no-repeat}
.form-note{font-size:.72rem;color:var(--txt-tres-faible);margin-top:14px;line-height:1.6}
/* champ en erreur après validation */
.inp input.err,.inp select.err,.inp textarea.err{box-shadow:inset 0 0 0 2px #C0392B;background:rgba(192,57,43,.04)}
.chk input.err{box-shadow:inset 0 0 0 2px #C0392B}
/* message d'issue affiché sous le bouton d'envoi */
.form-msg{display:none;margin-top:16px;padding:14px 16px;border-radius:3px;font-size:.84rem;line-height:1.6}
.form-msg.show{display:block}
.form-msg--ok{background:rgba(78,154,62,.10);border-left:3px solid #4E9A3E;color:var(--encre)}
.form-msg--err{background:rgba(192,57,43,.08);border-left:3px solid #C0392B;color:var(--encre)}
.form-msg__alt{display:block;margin-top:9px;font-size:.8rem}
.form-msg__alt a{color:var(--bleu);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.form-msg__alt a:hover{color:var(--or-sombre)}
.estim{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}
.estim__form{background:var(--blanc);padding:clamp(28px,3.4vw,46px);border-radius:3px;box-shadow:var(--ombre-m),0 0 0 1px var(--hairline)}
.estim__pts{margin-top:30px;display:flex;flex-direction:column;gap:16px}
.estim__pt{display:flex;gap:15px;align-items:flex-start}
.estim__pt svg{width:19px;height:19px;color:var(--or-sombre);flex:none;margin-top:3px;stroke-width:1.5}
.estim__pt b{display:block;color:var(--bleu-nuit);font-weight:600;font-size:.95rem;margin-bottom:3px}
.estim__pt span{font-size:.85rem;color:var(--txt-faible)}

/* ============ TÉMOIGNAGES ============ */
.temo__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.temo{background:var(--blanc);padding:clamp(28px,3vw,38px);display:flex;flex-direction:column;border-radius:3px;box-shadow:var(--ombre-s),0 0 0 1px var(--hairline)}
.temo__q{font-family:var(--serif);font-size:2.8rem;color:var(--or);opacity:.45;line-height:.7;margin-bottom:16px}
.temo p{font-family:var(--serif);font-size:1.16rem;line-height:1.62;color:var(--encre);flex:1;font-weight:400}
.temo__stars{display:flex;gap:3px;margin-top:22px}
.temo__stars svg{width:13px;height:13px;color:var(--or);fill:currentColor}
.temo__who{display:flex;align-items:center;gap:13px;margin-top:18px;padding-top:18px;box-shadow:inset 0 1px 0 var(--hairline)}
.temo__ini{width:40px;height:40px;display:grid;place-items:center;background:var(--ivoire);font-family:var(--serif);font-size:1rem;color:var(--or-texte);flex:none;border-radius:50%;font-weight:600}
.temo__who b{display:block;color:var(--bleu-nuit);font-size:.9rem;font-weight:600}
.temo__who span{font-size:.75rem;color:var(--txt-tres-faible)}

/* ============ ÉQUIPE ============ */
.team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.membre{background:var(--blanc);transition:transform .55s var(--ease),box-shadow .55s var(--ease);border-radius:3px;overflow:hidden;box-shadow:var(--ombre-s),0 0 0 1px var(--hairline)}
.membre:hover{transform:translateY(-6px);box-shadow:var(--ombre-l)}
.membre__img{aspect-ratio:3/4;background:var(--ivoire);position:relative;overflow:hidden;display:grid;place-items:center}
.membre__img img{width:100%;height:100%;object-fit:cover}
.membre__ini{font-family:var(--serif);font-size:3.4rem;color:var(--or);opacity:.55}
.membre__body{padding:20px 22px 24px}
.membre h3{font-size:1.05rem;font-family:var(--sans);font-weight:500}
.membre__role{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or-texte);margin-top:6px;font-weight:600}
.membre p{font-size:.83rem;color:var(--txt-faible);margin-top:12px}
.membre__ct{display:flex;gap:14px;margin-top:16px;padding-top:14px;box-shadow:inset 0 1px 0 var(--hairline)}
.membre__ct a{color:var(--txt-tres-faible);transition:color .3s}
.membre__ct a:hover{color:var(--or)}
.membre__ct svg{width:15px;height:15px}

/* ============ BLOG ============ */
.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post{background:var(--blanc);transition:transform .55s var(--ease),box-shadow .55s var(--ease);display:block;border-radius:3px;overflow:hidden;box-shadow:var(--ombre-s),0 0 0 1px var(--hairline)}
.post:hover{transform:translateY(-6px);box-shadow:var(--ombre-l)}
.post__media{aspect-ratio:16/10;overflow:hidden;background:var(--ivoire)}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.post:hover .post__media img{transform:scale(1.06)}
.post__body{padding:22px 24px 26px}
.post__meta{display:flex;gap:14px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or-texte);font-weight:600}
.post h3{font-size:1.14rem;font-family:var(--sans);font-weight:500;margin:13px 0 10px;line-height:1.45}
.post p{font-size:.85rem;color:var(--txt-faible)}

/* ============ FAQ ============ */
.faq{max-width:900px;margin-inline:auto}
.faq__item{background:var(--blanc);margin-bottom:1px;box-shadow:0 0 0 1px var(--hairline);transition:box-shadow .4s}
.faq__item.open{box-shadow:0 0 0 1px rgba(197,145,45,.40);position:relative;z-index:1}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 26px;text-align:left;font-size:1rem;color:var(--bleu-nuit);font-weight:500;transition:color .3s;
}
.faq__q:hover{color:var(--or-sombre)}
.faq__q svg{width:15px;height:15px;color:var(--or-sombre);flex:none;transition:transform .45s var(--ease)}
.faq__item.open .faq__q svg{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.faq__a p{padding:0 26px 24px;font-size:.9rem;color:var(--txt-faible)}
.faq__item.open .faq__a{max-height:420px}

/* ============ CONTACT ============ */
.contact__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4vw,64px);align-items:start}
.contact__cards{display:flex;flex-direction:column;gap:1px;background:var(--hairline);border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px var(--hairline)}
.contact__card{background:var(--blanc);padding:24px 26px;display:flex;gap:16px;align-items:flex-start}
.contact__card svg{width:20px;height:20px;color:var(--or-sombre);flex:none;margin-top:3px;stroke-width:1.5}
.contact__card b{display:block;color:var(--bleu);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:7px}
.contact__card span,.contact__card a{display:block;font-size:.92rem;color:var(--txt-faible);transition:color .3s}
.contact__card a:hover{color:var(--or)}
.mapbox{aspect-ratio:21/9;background:var(--ivoire);position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;padding:30px;border-radius:3px;box-shadow:0 0 0 1px var(--hairline)}
.mapbox iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.02)}
.mapbox__ph svg{width:34px;height:34px;color:var(--or-sombre);margin:0 auto 16px;stroke-width:1.2}
.mapbox__ph p{font-size:.85rem;color:var(--txt-faible);max-width:44ch}

/* ============ PAIEMENT ============ */
.pay__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline)}
.pay__m{background:var(--blanc);padding:clamp(24px,3vw,34px);text-align:center;transition:background .45s}
.pay__m:hover{background:var(--ivoire)}
.pay__logo{font-family:var(--serif);font-size:1.5rem;color:var(--or-texte);margin-bottom:10px;font-weight:600}
.pay__m p{font-size:.82rem;color:var(--txt-faible);margin-inline:auto}
.pay__note{display:flex;gap:14px;align-items:flex-start;background:var(--ivoire);padding:22px 26px;margin-top:26px;border-radius:3px}
.pay__note svg{width:20px;height:20px;color:var(--or-sombre);flex:none;margin-top:3px;stroke-width:1.5}
.pay__note p{font-size:.86rem;color:var(--txt-faible)}

/* ============ CTA FINAL ============ */
.cta{position:relative;isolation:isolate;overflow:hidden}
.cta__bg{position:absolute;inset:0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,18,46,.92) 0%,rgba(0,20,52,.86) 36%,rgba(0,26,66,.54) 72%,rgba(0,28,72,.40) 100%)}
.cta__in{padding-block:clamp(80px,10vw,150px);max-width:660px}
.cta h2{margin-bottom:22px;color:var(--blanc)}
.cta p{margin-bottom:36px;color:rgba(255,255,255,.94)}
.cta .eyebrow{color:var(--or-clair)}
.cta .eyebrow::before{background:var(--or-clair)}
.cta__row{display:flex;flex-wrap:wrap;gap:14px}

/* ============ FOOTER ============ */
.ftr{background:var(--bleu-nuit);padding-top:clamp(56px,7vw,88px);color:var(--sur-fonce-faible)}
.ftr__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.35fr;gap:clamp(30px,4vw,56px)}
.ftr__logo{display:inline-block;background:var(--blanc);padding:16px 20px;border-radius:3px;margin-bottom:22px;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.ftr__logo img{width:188px;height:auto}
.ftr__brand p{font-size:.86rem;color:var(--sur-fonce-faible);max-width:38ch}

/* Réseaux sociaux officiels — pastilles discrètes dans la colonne de marque.
   Au repos : filet et pictogramme dans le blanc atténué du pied de page, pour
   ne pas concurrencer le logo ni les liens de navigation. Au survol et au
   focus clavier : l'or de la charte (#C5912D / #E0B458), comme partout
   ailleurs sur le site. Le contour de focus est déjà fourni par la règle
   globale .ftr a:focus-visible. */
.ftr__rs{display:flex;gap:12px;margin-top:22px}
.ftr__rs a{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--sur-fonce-tres-faible);
  box-shadow:inset 0 0 0 1px var(--hairline-fonce);
  transition:color .3s,box-shadow .3s,transform .3s;
}
.ftr__rs a:hover{
  color:var(--or-clair);
  box-shadow:inset 0 0 0 1px var(--or);
  transform:translateY(-2px);
}
.ftr__rs a:focus-visible{color:var(--or-clair);box-shadow:inset 0 0 0 1px var(--or)}
.ftr__rs svg{width:16px;height:16px;display:block}
.ftr h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--blanc);margin-bottom:22px;font-weight:600}
.ftr__links{display:flex;flex-direction:column;gap:11px}
.ftr__links a{font-size:.86rem;color:var(--sur-fonce-faible);transition:color .3s,padding-left .35s}
.ftr__links a:hover{color:var(--or-clair);padding-left:5px}
.ftr__coord{display:flex;flex-direction:column;gap:15px;margin-bottom:26px}
.ftr__coord a,.ftr__coord div{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;color:var(--sur-fonce-faible)}
.ftr__coord svg{width:15px;height:15px;color:var(--or-clair);flex:none;margin-top:4px}
.ftr__coord a:hover{color:var(--blanc)}
/* Les trois numeros sont desormais trois liens tel: distincts, pour que chacun
   compose bien le numero affiche. Ils restent presentes sur une seule ligne
   icone + colonne afin de conserver exactement la mise en forme precedente. */
.ftr__tels__l{display:flex;flex-direction:column;gap:2px}
.ftr__coord .ftr__tels__l a{display:block;gap:0;padding:1px 0;color:inherit}
.ftr__coord .ftr__tels__l a:hover{color:var(--blanc)}
.news{display:flex;background:rgba(255,255,255,.07);margin-top:6px;border-radius:2px;overflow:hidden}
.news input{flex:1;padding:13px 15px;font-size:.85rem;color:var(--blanc)}
.news input::placeholder{color:var(--sur-fonce-tres-faible)}
.news button{background:var(--or);color:var(--bleu-nuit);padding-inline:18px;display:grid;place-items:center;transition:background .35s}
.news button:hover{background:var(--or-clair)}
.news button svg{width:15px;height:15px}
.pay-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pay-tags span{font-size:.63rem;letter-spacing:.1em;color:var(--sur-fonce-tres-faible);background:rgba(255,255,255,.07);padding:6px 11px;border-radius:2px}
.ftr__bot{
  margin-top:clamp(44px,5vw,64px);padding-block:24px;box-shadow:inset 0 1px 0 var(--hairline-fonce);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.75rem;color:var(--sur-fonce-tres-faible);
}
.ftr__bot a:hover{color:var(--or-clair)}
.ftr__legal{display:flex;gap:22px;flex-wrap:wrap}

/* Attribution du concepteur du site — volontairement discrète.
   Même taille que le copyright, placée à l'opposé, sans coordonnées.
   Elle ne doit jamais concurrencer visuellement l'identité NAFADJI. */
.ftr__credit{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ftr__credit a{
  color:var(--sur-fonce-faible);font-weight:600;letter-spacing:.06em;
  padding:4px 2px;box-shadow:inset 0 -1px 0 rgba(224,180,88,.45);
  transition:color .3s,box-shadow .3s;
}
.ftr__credit a:hover,.ftr__credit a:focus-visible{color:var(--or-clair);box-shadow:inset 0 -1px 0 var(--or-clair)}

/* Le bouton WhatsApp flottant est fixe en bas à droite de la fenetre : lorsque
   la page est deroulee jusqu'en bas, il se superpose a la derniere ligne du
   pied de page et recouvrait la fin du lien d'attribution. On reserve sous
   cette ligne la hauteur du bouton, uniquement aux largeurs ou il existe
   (en dessous de 721px il est masque au profit de la barre d'action mobile). */
@media (min-width:721px){ .ftr__bot{padding-bottom:112px} }

/* ============ PAGE DE CONCEPTION (SONINTECH-AI) ============
   Repère visuel distinct : l'encart d'ouverture est posé sur ivoire avec un
   filet bleu, pour marquer que l'on parle d'une autre entreprise que NAFADJI.
   Aucun effet nouveau, aucune animation : la charte reste celle du site. */
.credits{background:var(--ivoire);border-left:3px solid var(--bleu);padding:clamp(24px,3.2vw,38px);border-radius:0 3px 3px 0}
.credits p{font-size:.95rem;color:var(--txt)}
.credits p+p{margin-top:16px}
.credits__qui{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bleu);font-weight:600;margin-bottom:14px}
.expert{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline)}
.expert__c{background:var(--blanc);padding:clamp(22px,2.6vw,30px)}
/* Sept expertises dans une grille de trois : la dernière occupe la ligne
   entière, pour qu'aucune cellule vide ne reste visible. */
.expert__c:last-child{grid-column:1/-1}
.expert__c h3{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--sans);font-weight:600;color:var(--bleu);margin-bottom:10px}
.expert__c p{font-size:.88rem;color:var(--txt-faible);max-width:none}
.dev-card{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,34px);align-items:center;background:var(--blanc);padding:clamp(24px,3.2vw,38px);border-radius:3px;box-shadow:var(--ombre-m),0 0 0 1px var(--hairline)}
.dev-card__ini{width:72px;height:72px;display:grid;place-items:center;background:var(--bleu);color:var(--blanc);font-family:var(--serif);font-size:1.7rem;font-weight:600;border-radius:50%;letter-spacing:.04em}
.dev-card__nom{font-family:var(--serif);font-size:1.5rem;color:var(--bleu-nuit);line-height:1.2}
.dev-card__role{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or-texte);font-weight:600;margin-top:6px}
.dev-card__liens{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
/* Les boutons du site sont rendus en capitales par .btn (text-transform).
   Une adresse e-mail doit se lire telle qu'elle s'ecrit : on retablit les
   minuscules et on resserre l'interlettrage pour ce seul lien. Le cadre,
   les marges, la taille et les etats de survol du bouton restent ceux de
   .btn--ghost : rien d'autre n'est touche. */
.dev-card__mail{text-transform:lowercase;letter-spacing:.04em;font-size:.74rem}

/* ============ PAGE 404 ============
   Page d'erreur sobre, aux couleurs de la charte : fond bleu nuit, chiffre
   en or tres attenue, logo officiel. Elle n'a ni fil d'Ariane ni bandeau :
   le visiteur s'est trompe d'adresse, on lui donne trois issues et c'est
   tout. */
.err404{
  background:var(--bleu-nuit);color:var(--blanc);
  min-height:68vh;display:flex;align-items:center;
  padding-block:clamp(60px,10vw,110px);
}
.err404__in{text-align:center}
.err404__logo{
  background:var(--blanc);padding:14px 18px;border-radius:3px;
  /* la feuille met les images en bloc : on recentre explicitement */
  display:block;margin:0 auto 30px;
  box-shadow:0 8px 24px rgba(0,0,0,.24);height:auto;
}
.err404__code{
  font-family:var(--serif);font-size:clamp(5rem,16vw,9rem);line-height:1;
  color:var(--or);opacity:.28;letter-spacing:.04em;margin-bottom:6px;
}
.err404 h1{color:var(--blanc);margin-bottom:16px}
.err404 .lede{color:var(--sur-fonce-faible);max-width:46ch;margin:0 auto 34px}
.err404__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* Sur fond sombre, le bouton fantome doit s'eclaircir pour rester lisible. */
.err404__actions .btn--ghost{color:var(--blanc);box-shadow:inset 0 0 0 1px var(--hairline-fonce)}
.err404__actions .btn--ghost:hover{color:var(--or-clair);box-shadow:inset 0 0 0 1px var(--or)}
.err404__aide{
  margin-top:32px;font-size:.86rem;color:var(--sur-fonce-tres-faible);
  max-width:44ch;margin-left:auto;margin-right:auto;
}

/* ============ FLOTTANTS ============ */
/* Le conteneur ne doit intercepter aucun clic : il couvre une zone bien plus
   large que le bouton (l'emplacement de la bulle, invisible au repos) et
   recouvrait les liens du bas de page. Seul le bouton reste cliquable. */
.wa{position:fixed;right:22px;bottom:22px;z-index:40;display:flex;align-items:center;gap:12px;pointer-events:none}
.wa__btn{width:54px;height:54px;border-radius:50%;background:var(--vert-wa);display:grid;place-items:center;color:#fff;box-shadow:0 8px 26px rgba(31,175,84,.42);transition:transform .4s var(--ease);pointer-events:auto}
.wa__btn:hover{transform:scale(1.07)}
.wa__btn svg{width:28px;height:28px;fill:currentColor}
.wa__bulle{background:var(--blanc);padding:12px 16px;max-width:230px;font-size:.8rem;color:var(--txt-faible);opacity:0;transform:translateX(10px);pointer-events:none;transition:all .5s var(--ease);border-radius:3px;box-shadow:var(--ombre-l),0 0 0 1px var(--hairline)}
.wa__bulle b{display:block;color:var(--bleu-nuit);font-weight:600;font-size:.85rem;margin-bottom:2px}
.wa.show .wa__bulle{opacity:1;transform:translateX(0)}
.totop{position:fixed;left:22px;bottom:22px;z-index:40;width:42px;height:42px;display:grid;place-items:center;background:var(--blanc);color:var(--bleu);opacity:0;pointer-events:none;transition:opacity .4s,transform .4s,color .3s;border-radius:3px;box-shadow:var(--ombre-m),0 0 0 1px var(--hairline)}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{transform:translateY(-3px);color:var(--or)}
.totop svg{width:16px;height:16px}
/* Barre d'action fixe du bas, sur mobile.
   padding-bottom intègre la zone de sécurité des téléphones à encoche, afin
   que les libellés ne passent pas sous la barre système. */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--blanc);box-shadow:0 -2px 18px rgba(0,28,72,.12);padding-bottom:env(safe-area-inset-bottom,0px)}
.mbar__in{display:grid;grid-template-columns:repeat(3,1fr)}
.mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 4px 12px;min-height:56px;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-faible)}
.mbar a:active{background:var(--ivoire)}
.mbar a svg{width:18px;height:18px;color:var(--or-sombre)}
.cmpbar{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,26px);z-index:42;background:var(--blanc);
  padding:13px 16px;display:flex;align-items:center;gap:18px;border-radius:3px;
  box-shadow:var(--ombre-xl),0 0 0 1px var(--hairline);max-width:calc(100vw - 32px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .55s var(--ease),opacity .4s var(--ease),visibility .4s;
}
.cmpbar.show{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto}
.cmpbar__n{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-faible)}
.cmpbar__n b{color:var(--or-texte);font-weight:600}

/* ============ MODALES ============ */
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal__veil{position:absolute;inset:0;background:rgba(0,18,46,.62);backdrop-filter:blur(6px)}
.modal__box{position:relative;background:var(--blanc);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;padding:clamp(26px,3.4vw,44px);animation:pop .5s var(--ease);border-radius:4px;box-shadow:var(--ombre-xl)}
.modal__box--lg{max-width:960px}
@keyframes pop{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.modal__x{position:absolute;top:16px;right:16px;width:34px;height:34px;display:grid;place-items:center;color:var(--txt-faible);transition:color .3s}
.modal__x:hover{color:var(--or)}
.modal__x svg{width:16px;height:16px}
.modal h3{margin-bottom:8px}
.modal>.modal__box>p{font-size:.87rem;color:var(--txt-faible);margin-bottom:26px}

/* calculateur */
.calc__out{background:var(--ivoire);padding:22px;margin:22px 0;text-align:center;border-radius:3px}
.calc__out b{display:block;font-family:var(--serif);font-size:2.4rem;color:var(--bleu);font-weight:600;line-height:1.1}
.calc__out span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-tres-faible)}
.calc__det{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hairline);margin-top:18px}
.calc__det div{background:var(--ivoire);padding:13px;text-align:center}
.calc__det b{font-family:var(--sans);font-size:1rem;color:var(--encre);font-weight:600}
.calc__det span{font-size:.62rem;letter-spacing:.12em}
.rng{width:100%;height:3px;background:var(--hairline-forte);appearance:none;margin-top:12px;cursor:pointer;border-radius:2px}
.rng::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:var(--or);cursor:pointer;border-radius:50%;box-shadow:0 2px 6px rgba(197,145,45,.5)}
.rng::-moz-range-thumb{width:16px;height:16px;background:var(--or);border:0;border-radius:50%;cursor:pointer}
.rng-val{display:flex;justify-content:space-between;font-size:.78rem;color:var(--txt-faible);margin-top:9px}
.rng-val b{color:var(--or-texte);font-weight:600}

/* comparateur */
.cmp-tbl{width:100%;font-size:.85rem}
.cmp-tbl th,.cmp-tbl td{padding:13px 14px;text-align:left;box-shadow:inset 0 -1px 0 var(--hairline)}
.cmp-tbl th{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-tres-faible);font-weight:600}
.cmp-tbl td{color:var(--txt)}
.cmp-tbl td:first-child{color:var(--txt-tres-faible);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.cmp-tbl img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.cmp-scroll{overflow-x:auto}

/* toast */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,24px);z-index:80;
  background:var(--bleu);color:var(--blanc);padding:14px 26px;font-size:.8rem;
  max-width:calc(100vw - 40px);text-align:center;border-radius:3px;box-shadow:var(--ombre-xl);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .5s var(--ease),opacity .4s var(--ease),visibility .4s;
}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:grid}
  .rail{display:none}
  .grid-biens{grid-template-columns:repeat(2,1fr)}
  .grid-serv,.grid-serv--4{grid-template-columns:repeat(3,1fr)}
  .piliers__grid{grid-template-columns:repeat(3,1fr)}
  .chiffres__grid{grid-template-columns:repeat(3,1fr)}
  .chiffres__grid--4{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .hdr__act .btn{display:none}
  .team__grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .cat{grid-template-columns:1fr}
  .filtres{position:static}
}
@media (max-width:980px){
  .search__grid{grid-template-columns:repeat(2,1fr)}
  .search__btn{grid-column:1/-1;padding:16px}
  .search__adv{grid-template-columns:repeat(2,1fr)}
  .carte__wrap{grid-template-columns:1fr}
  .estim,.split,.split--wide,.contact__grid{grid-template-columns:1fr}
  .temo__grid,.blog__grid,.grid-biens--3{grid-template-columns:1fr}
  .pay__grid{grid-template-columns:1fr}
  .btn-wa span{display:none}
  .btn-wa{padding:11px 13px}
}
@media (max-width:720px){
  :root{--hdr-h:72px}
  /* La réserve du bas tient compte de la barre d'action ET de la zone de
     sécurité : aucun contenu ne peut finir caché dessous. */
  body{font-size:15px;padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .topbar__l .topbar__item:nth-child(2){display:none}
  .topbar__r .socials{display:none}

  /* HERO MOBILE — titre, chapô et boutons tiennent dans l'écran, et la
     section suivante se devine. Les tailles de texte ne sont pas réduites :
     c'est la hauteur perdue en marges qui est récupérée. */
  .hero{min-height:auto}
  .hero__body{padding-block:30px 26px}
  /* Le titre reste grand, mais cesse de courir sur six lignes : à 360 px, une
     taille de 41 px le faisait déborder sous la ligne de flottaison avant même
     le chapô. 32 à 36 px le ramène à trois ou quatre lignes, sans le rapetisser. */
  .hero h1{font-size:clamp(2rem,8.6vw,2.6rem);margin-bottom:16px}
  .hero__lede{font-size:.98rem;margin-bottom:22px;max-width:36ch}
  .hero .eyebrow{margin-bottom:12px;font-size:.64rem;letter-spacing:.24em}
  .hero__cta{gap:10px}
  .hero__cta .btn{flex:1 1 100%}
  .search{margin-top:-30px}
  .pagehead h1{font-size:clamp(1.9rem,8vw,2.4rem)}
  .pagehead__in{padding-block:clamp(44px,9vw,70px)}
  .grid-biens{grid-template-columns:1fr}
  .grid-serv,.grid-serv--3,.grid-serv--4{grid-template-columns:1fr}
  .piliers__grid{grid-template-columns:1fr}
  .chiffres__grid,.chiffres__grid--4{grid-template-columns:1fr 1fr}
  .ftr__grid{grid-template-columns:1fr}
  .form-row,.form-row--3{grid-template-columns:1fr}
  .team__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .mbar{display:block}
  /* Le bouton WhatsApp flottant est desormais visible aussi sur telephone.
     L'action WhatsApp a ete retiree de la barre du bas pour eviter le
     doublon. Le bouton se cale au-dessus de cette barre, dans la zone sure
     de l'appareil, cote droit — « Haut de page » occupe le cote gauche. */
  .wa{right:16px;bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  /* La bulle de conseil est trop large pour un telephone : seul le bouton
     reste, et il ne doit jamais capter un clic destine a autre chose. */
  .wa__bulle{display:none}
  /* Quand le comparateur apparait, il occupe le meme coin : le bouton monte
     au-dessus de lui. Le bloc .wa est place apres .cmpbar dans le document
     pour rendre ce voisinage exploitable. */
  .cmpbar.show ~ .wa{bottom:calc(228px + env(safe-area-inset-bottom,0px))}
  .totop{bottom:calc(74px + env(safe-area-inset-bottom,0px));left:16px}
  .cmpbar{bottom:calc(74px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:12px;align-items:stretch;text-align:center}
  .carte__stats{grid-template-columns:1fr}
  .serv{min-height:auto}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .btn-wa{display:none}
}
@media (max-width:400px){
  .brand__name{font-size:1.1rem}
  .brand img{width:44px}
  .brand__sur{font-size:.44rem}
}

/* Pages de crédits : grille d'expertises en colonne sur écrans étroits. */
@media (max-width:980px){
  .expert{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .expert{grid-template-columns:1fr}
  .dev-card{grid-template-columns:1fr;text-align:center;justify-items:center}
  .dev-card__liens{justify-content:center}
  /* Le pied de page passe en colonne : l'attribution se place sous le copyright. */
  .ftr__bot{flex-direction:column;align-items:flex-start;gap:10px}
  .ftr__credit{white-space:normal}
}