/* ================================================================
   INEUF.COM — DESIGN SYSTEM v2
   Feuille de styles de référence transmise au développeur
   Police : Alexandria — https://fonts.google.com/specimen/Alexandria
   Base de travail : maquette InDesign 1400px + HTML de référence
   ================================================================

   SOMMAIRE
   ────────────────────────────────────────────────────────────────
   01. Import police
   02. Variables (couleurs, typo, espacements, tokens)
   03. Reset & base
   04. Typographie — hiérarchie complète
   05. Layout — conteneur & wrappers
   06. Topbar
   07. Navigation principale
   08. Barre de recherche (bloc hero homepage)
   09. Hero — variante homepage (grand, avec search)
   10. Hero — variante pages internes (banner)
   11. Fil d'Ariane (breadcrumb)
   12. Boutons — toutes variantes
   13. Badges & étiquettes
   14. Section — styles communs
   15. Bloc stats (homepage)
   16. Cartes programmes
   17. Section programmes à la une (fond teal)
   18. Section conseillers (split image / texte)
   19. Section Pourquoi acheter (cartes avantages)
   20. Cartes actualités & section news
   21. Section partenaires / logos
   22. Page listing — grille biens (page 3)
   23. Page listing — vue carte (page 4)
   24. Page programme / lot — layout 2 colonnes (pages 5–6)
   25. Sidebar droite sticky (pages internes)
   26. Tableau des biens (listing VEFA)
   27. Section programmes similaires
   28. Page contact (page 7)
   29. Page article / blog (page 8)
   30. Footer
   31. Flottants UI (scroll-top, chat-bubble, side-icons)
   32. Modales (Mon espace, Recevoir le plan, Chat)
   ────────────────────────────────────────────────────────────────
*/


/* ================================================================
   01. IMPORT POLICE
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap');


/* ================================================================
   02. VARIABLES
   ================================================================ */

:root {

  /* ── Couleurs ─────────────────────────────── */

  /* Couleurs sources extraites du fichier HTML de référence */
  --orange:       #ed6c39;   /* CTA principal, prix, stats, badges */
  --orange-dk:    #d45e2c;   /* Hover orange */
  --orange-light: #fdf0e9;   /* Fond badge / tag orange très clair */
  --orange-text:   #b8480f;   /* Orange texte accessible (WCAG AA) : prix, surtitres, header clair */

  --teal:         #0e8094;   /* Section programmes, nav accent, footer */
  --teal-dk:      #0a6e6e;   /* Hover teal / footer foncé */
  --teal-light:   #e4f3f6;   /* Fond clair teal pour tags, hover */

  --hero-bg:      #2b3742;   /* Zone nav + hero homepage (fond sombre unifié) */

  /* Neutres */
  --white:        #ffffff;
  --light-bg:     #ecf1f4;   /* Fond sections alternées (why, news…) */
  --mid-bg:       #e8ecef;   /* Fond légèrement plus soutenu */
  --border:       #e2e8ec;   /* Bordures cartes, séparateurs */
  --border-mid:   #dde3e7;   /* Séparateur stats, lignes tableau */

  /* Textes */
  --text:         #0b5966;   /* Texte principal (bleu-vert foncé) */
  --text-dark:    #2b3742;   /* Titres forts, identique hero-bg */
  --text-light:   #5b6a72;   /* Texte secondaire, légendes */
  --text-muted:   #788589;   /* Placeholders, mentions discrètes */


  /* ── Typographie ──────────────────────────── */
  --font:         'Alexandria', sans-serif;

  /* Corps de base */
  --text-body:    15px;
  --lh-body:      1.6;

  /* Échelle */
  --fs-10:  10px;
  --fs-11:  11px;
  --fs-12:  12px;
  --fs-13:  13px;
  --fs-14:  14px;
  --fs-16:  16px;
  --fs-18:  18px;
  --fs-22:  22px;
  --fs-24:  24px;
  --fs-28:  28px;
  --fs-32:  32px;
  --fs-36:  36px;
  --fs-50:  50px;

  /* ── Espacements ──────────────────────────── */
  --sp-4:    4px;
  --sp-6:    6px;
  --sp-8:    8px;
  --sp-10:  10px;
  --sp-12:  12px;
  --sp-14:  14px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-28:  28px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-60:  60px;

  /* ── Layout ───────────────────────────────── */
  --inner:         1100px;   /* Largeur max du contenu centré */
  --gutter:          40px;   /* Padding latéral pages */
  --nav-h:           64px;   /* Hauteur navbar */
  --topbar-h:        36px;   /* Hauteur topbar */

  /* ── Formes ───────────────────────────────── */
  --radius:         24px;    /* Rayon de base (boutons, cartes standard) */
  --radius-card:    50px 0 0 0; /* Signature ineuf : grand arrondi coin haut-gauche */
  --radius-sm:       8px;
  --radius-full:  9999px;

  /* ── Ombres ───────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.18);
  --shadow-card: 0 4px 16px rgba(0,0,0,.15);

  /* ── Transitions ──────────────────────────── */
  --t-fast:  .15s ease;
  --t-base:  .2s ease;
  --t-slow:  .35s ease;
}


/* ================================================================
   03. RESET & BASE
   ================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--text-body);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size:   var(--text-body);
  line-height: var(--lh-body);
  color:       var(--text-dark);
  background:  var(--white);
  -webkit-font-smoothing: antialiased;
}

a    { text-decoration: none; color: inherit; }
img  { display: block; max-width: 100%; }
ul   { list-style: none; }
button { cursor: pointer; font-family: inherit; }


/* ================================================================
   04. TYPOGRAPHIE — HIÉRARCHIE COMPLÈTE
   ================================================================

   Logique de la maquette INEUF
   ────────────────────────────────────────────────────────────────
   H1          50px / 800 / blanc    Hero homepage uniquement
   H1-int      36px / 800 / blanc    Hero banner pages internes
   H2          36px / 800 / --text   Titre de section homepage
   H2-page     28px / 800 / --text   Titre bloc page interne
   H3          22px / 800 / --text   Titre article, programme detail
   H4          16px / 800 / --text   Titre card programme
   H5          14px / 800 / --text   Titre card news
   H6          12px / 700 / upper    Label colonne footer, titre rubrique

   .section-label  13px / 700 / --orange / uppercase   Surtitre
   .section-title  36px / 800 / --text                 Titre section centré
   .section-sub    14px / 400 / --text-light            Chapeau section

   .program-name     16px / 800 / --text
   .program-location 12px / 400 / --text-light
   .program-price    22px / 900 / --orange
   .stat-number      32px / 700 / --orange
   .stat-desc        12px / 400 / --text-light

   .news-tag         10px / 700 / --teal / uppercase
   .news-content h3  14px / 800 / --text
   .news-link        12px / 700 / --text-light / underline

   .article-body     15px / 400 / --text-light / lh 1.75
   .article-body h2  20px / 700 / --text
   .article-body h3  16px / 700 / --text

   .detail-label     11px / 700 / --text-light / uppercase
   .detail-value     15px / 700 / --text
   .lot-price-big    28px / 900 / --orange
   .lot-price-monthly 14px / 400 / --text-light

   .nav-links a      13px / 700 / --white / uppercase / .5px tracking
   .topbar-links a   12px / 400 / --text-muted
   .footer-col h4    12px / 700 / upper / rgba(255,255,255,.4)
   .footer-col li a  13px / 400 / rgba(255,255,255,.7)
   .footer-bottom    11px / 400 / rgba(255,255,255,.3)
   .breadcrumb       13px / 400 / --text-light
   ────────────────────────────────────────────────────────────────
*/

h1, .h1 {
  font-size:      var(--fs-50);
  font-weight:    800;
  line-height:    1.15;
  letter-spacing: -0.5px;
  color:          var(--white);
}

.h1-page {
  font-size:   var(--fs-36);
  font-weight: 800;
  line-height: 1.2;
  color:       var(--white);
}

h2, .h2 {
  font-size:   var(--fs-36);
  font-weight: 800;
  line-height: 1.2;
  color:       var(--text);
}

.h2-page {
  font-size:   var(--fs-28);
  font-weight: 800;
  line-height: 1.25;
  color:       var(--text);
}

h3, .h3 {
  font-size:   var(--fs-22);
  font-weight: 800;
  line-height: 1.25;
  color:       var(--text);
}

h4, .h4 {
  font-size:   var(--fs-16);
  font-weight: 800;
  line-height: 1.3;
  color:       var(--text);
}

h5, .h5 {
  font-size:   var(--fs-14);
  font-weight: 800;
  line-height: 1.35;
  color:       var(--text);
}

h6, .h6 {
  font-size:      var(--fs-12);
  font-weight:    700;
  line-height:    1.4;
  text-transform: uppercase;
  letter-spacing: .8px;
  color:          var(--text-light);
}

p, .body {
  font-size:   var(--text-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color:       var(--text-light);
}

/* Surtitre orange au-dessus des H2 */
.section-label {
  font-size:      var(--fs-13);
  font-weight:    700;
  color:          var(--orange-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align:     center;
  margin-bottom:  var(--sp-10);
}

/* Titre de section centré */
.section-title {
  font-size:     var(--fs-36);
  font-weight:   800;
  color:         var(--text);
  text-align:    center;
  line-height:   1.2;
  margin-bottom: var(--sp-8);
}
.section-title--white { color: var(--white); }

/* Sous-titre de section */
.section-sub {
  font-size:     var(--fs-14);
  font-weight:   400;
  color:         var(--text-light);
  text-align:    center;
  margin-bottom: 36px;
}
.section-sub--white { color: rgba(255,255,255,.75); }

/* Lien flèche */
.link-arrow {
  font-size:       var(--fs-13);
  font-weight:     700;
  color:           var(--teal);
  text-decoration: underline;
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  transition:      color var(--t-base);
}
.link-arrow:hover { color: var(--teal-dk); }


/* ================================================================
   05. LAYOUT — CONTENEURS & WRAPPERS
   ================================================================ */

.inner {
  max-width:      var(--inner);
  margin-inline:  auto;
  padding-inline: var(--gutter);
}

.section-wrap {
  padding-inline: var(--gutter);
}

/* Layout 2 colonnes : main + sidebar — pages internes */
.page-layout {
  display:               grid;
  grid-template-columns: 1fr 320px;
  gap:                   var(--sp-32);
  max-width:             var(--inner);
  margin-inline:         auto;
  padding-inline:        var(--gutter);
  padding-block:         var(--sp-40);
  align-items:           start;
}

.page-layout__main { min-width: 0; }


/* ================================================================
   06. TOPBAR
   ================================================================ */

.topbar {
  background:      var(--hero-bg);
  color:           var(--text-muted);
  height:          var(--topbar-h);
  padding-inline:  var(--gutter);
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--sp-24);
  font-size:       var(--fs-12);
}

.topbar__links {
  display:     flex;
  gap:         var(--sp-24);
  align-items: center;
}
.topbar__links a {
  font-size:  var(--fs-12);
  color:      var(--text-muted);
  transition: color var(--t-fast);
}
.topbar__links a:hover { color: var(--white); }

.topbar__account {
  display:      flex;
  align-items:  center;
  gap:          var(--sp-6);
  color:        var(--orange);
  font-weight:  600;
  font-size:    var(--fs-12);
  padding-left: 24px;
}


/* ================================================================
   07. NAVIGATION PRINCIPALE
   ================================================================ */

/* Même fond sombre que le topbar et le hero */
.main-nav {
  background:      var(--hero-bg);
  height:          var(--nav-h);
  padding-inline:  var(--gutter);
  display:         flex;
  align-items:     center;
  position:        sticky;
  top:             0;
  z-index:         100;
}

.main-nav__inner {
  max-width:   var(--inner);
  margin:      0 auto;
  width:       100%;
  display:     flex;
  align-items: center;
}

.logo {
  display:      flex;
  align-items:  center;
  margin-right: 48px;
  flex-shrink:  0;
}

.logo-box {
  padding:     6px 10px;
  display:     flex;
  align-items: center;
  line-height: 1;
}
.logo-box svg { width: 100px; height: 100px; }

.nav-links {
  display:         flex;
  justify-content: flex-end;
  gap:             var(--sp-32);
  flex:            1;
}
.nav-links a {
  font-size:       var(--fs-13);
  font-weight:     700;
  color:           var(--white);
  text-transform:  uppercase;
  letter-spacing:  .5px;
  padding:         4px 0;
  border-bottom:   2px solid transparent;
  transition:      color var(--t-base), border-color var(--t-base);
  white-space:     nowrap;
}
.nav-links a:hover,
.nav-links a.active {
  color:               var(--orange);
  border-bottom-color: var(--orange);
}


/* ================================================================
   08. BARRE DE RECHERCHE (homepage uniquement)
   ================================================================ */

.search-box {
  background:    var(--teal);
  padding:       var(--sp-16) var(--sp-20) var(--sp-12);
  max-width:     820px;
  margin-inline: auto;
}

.search-filters {
  display:       flex;
  gap:           var(--sp-10);
  margin-bottom: var(--sp-12);
}
/*
  Champs input/select — gérés par le développeur.
  Référence : flex:1, min-width 140px, padding 14px, font-size 13px,
  background #fff, border 1px solid #d0d8dc, appearance none,
  chevron SVG en background-image right 12px
*/

.search-row2 {
  display:     flex;
  align-items: center;
  gap:         var(--sp-16);
}

.budget-label {
  color:       var(--white);
  font-size:   var(--fs-13);
  font-weight: 600;
  white-space: nowrap;
  display:     flex;
  align-items: center;
  gap:         var(--sp-8);
}

.budget-slider {
  -webkit-appearance: none;
  appearance:         none;
  flex:        1;
  height:      4px;
  background:  linear-gradient(to right, var(--orange) 70%, rgba(255,255,255,.3) 70%);
  border-radius: 2px;
  outline:     none;
}
.budget-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:        18px;
  height:       18px;
  border-radius: 50%;
  background:   var(--orange);
  border:       2px solid var(--white);
  box-shadow:   0 2px 6px rgba(0,0,0,.25);
  cursor:       pointer;
}

.budget-value {
  color:       var(--white);
  font-size:   var(--fs-13);
  font-weight: 700;
  white-space: nowrap;
}


/* ================================================================
   09. HERO — HOMEPAGE
   ================================================================ */

/* Topbar + nav + hero partagent tous --hero-bg : un seul bloc sombre */
.hero-full { background: var(--hero-bg); }

.hero {
  background:    var(--hero-bg);
  padding:       56px var(--gutter) var(--sp-48);
  text-align:    center;
  position:      relative;
  /* En prod : background-image photo + overlay gradient */
}

.hero h1 {
  font-size:      var(--fs-50);
  font-weight:    800;
  color:          var(--white);
  line-height:    1.15;
  margin-bottom:  var(--sp-32);
  max-width:      720px;
  margin-inline:  auto;
}


/* ================================================================
   10. HERO — PAGES INTERNES (banner réduit)
   ================================================================ */

.hero-banner {
  background:      var(--hero-bg);
  padding:         var(--sp-40) var(--gutter);
  min-height:      160px;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  /* En prod : background-image + overlay */
}

.hero-banner__title {
  font-size:      var(--fs-36);
  font-weight:    800;
  color:          var(--white);
  line-height:    1.2;
  max-width:      var(--inner);
  margin-inline:  auto;
  width:          100%;
}


/* ================================================================
   11. FIL D'ARIANE (breadcrumb)
   ================================================================ */

.breadcrumb {
  font-size:   var(--fs-13);
  color:       var(--text-light);
  display:     flex;
  align-items: center;
  gap:         var(--sp-6);
  padding:     var(--sp-12) 0 var(--sp-20);
}
.breadcrumb a { color: var(--teal); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep     { color: var(--text-muted); font-size: var(--fs-12); }
.breadcrumb__current { color: var(--text-light); }


/* ================================================================
   12. BOUTONS — TOUTES VARIANTES
   ================================================================ */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-6);
  font-family:     var(--font);
  font-size:       var(--fs-13);
  font-weight:     700;
  letter-spacing:  .3px;
  line-height:     1;
  border-radius:   var(--radius);
  padding:         10px 24px;
  border:          2px solid transparent;
  white-space:     nowrap;
  cursor:          pointer;
  transition:      background var(--t-base), color var(--t-base),
                   border-color var(--t-base), box-shadow var(--t-base);
}

/* — Orange : CTA principal — */
.btn-primary {
  background:   var(--orange);
  color:        var(--white);
  border-color: var(--orange);
}
.btn-primary:hover {
  background:   var(--orange-dk);
  border-color: var(--orange-dk);
}

/* — Blanc / outline discret : action secondaire — */
.btn-secondary {
  background:   var(--white);
  color:        var(--text);
  border-color: #d0d8dc;
}
.btn-secondary:hover {
  border-color: var(--teal);
  color:        var(--teal);
}

/* — Outline blanc : sur fond teal ou sombre — */
.btn-outline-white {
  background:   transparent;
  color:        var(--white);
  border-color: var(--white);
}
.btn-outline-white:hover {
  background: var(--white);
  color:      var(--teal);
}

/* — Outline teal : sur fond clair — */
.btn-outline-teal {
  background:   transparent;
  color:        var(--teal);
  border-color: var(--teal);
}
.btn-outline-teal:hover {
  background: var(--teal);
  color:      var(--white);
}

/* — Search : taille large pour la barre hero — */
.btn-search {
  background:    var(--orange);
  color:         var(--white);
  border:        none;
  border-radius: var(--radius);
  padding:       14px 28px;
  font-size:     var(--fs-14);
  font-weight:   700;
  letter-spacing: .3px;
  transition:    background var(--t-base);
}
.btn-search:hover { background: var(--orange-dk); }

/* — Action : petits boutons pages détail — */
.btn-action {
  background:    var(--orange);
  color:         var(--white);
  border:        none;
  border-radius: var(--radius-sm);
  padding:       8px 16px;
  font-size:     var(--fs-12);
  font-weight:   700;
  transition:    background var(--t-base);
}
.btn-action:hover { background: var(--orange-dk); }


/* ================================================================
   13. BADGES & ÉTIQUETTES
   ================================================================ */

/* Badge sur photo de carte */
.badge {
  display:       inline-block;
  font-size:     var(--fs-11);
  font-weight:   700;
  padding:       3px 10px;
  border-radius: var(--sp-10);
  line-height:   1;
  white-space:   nowrap;
}
.badge--orange { background: var(--orange); color: var(--white); }
.badge--teal   { background: var(--teal);   color: var(--white); }

/* Tag catégorie article */
.tag {
  font-size:      var(--fs-10);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color:          var(--teal);
  display:        inline-block;
  margin-bottom:  var(--sp-6);
}

/* Picto partage */
.share-btn {
  position:        absolute;
  top:             12px;
  right:           12px;
  width:           28px;
  height:          28px;
  background:      rgba(255,255,255,.9);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  border:          none;
}
.share-btn svg { width: 14px; height: 14px; fill: var(--text-light); }


/* ================================================================
   14. SECTION — STYLES COMMUNS
   ================================================================ */

section { padding: var(--sp-60) var(--gutter); }

.section-inner {
  max-width:     var(--inner);
  margin-inline: auto;
}

.section-header {
  text-align:    center;
  margin-bottom: 36px;
}


/* ================================================================
   15. BLOC STATS (homepage)
   ================================================================ */

.stats-section {
  background:    var(--white);
  padding:       var(--sp-48) var(--gutter);
  border-bottom: 1px solid var(--border);
}

.stats-section .section-title {
  font-size:     var(--fs-28);
  margin-bottom: 0;
}

.stats-grid {
  display:         flex;
  justify-content: center;
  max-width:       900px;
  margin:          var(--sp-32) auto 0;
}

.stat-item {
  flex:      1;
  text-align: center;
  padding:   0 var(--sp-24);
  position:  relative;
}

/* Séparateur vertical */
.stat-item + .stat-item::before {
  content:    '';
  position:   absolute;
  left:       0; top: 10%; height: 80%;
  width:      1px;
  background: var(--border-mid);
}

.stat-icon {
  width:           52px;
  height:          52px;
  border:          2px solid var(--orange);
  border-radius:   50%;
  margin:          0 auto var(--sp-12);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.stat-icon svg { width: 24px; height: 24px; fill: var(--orange); }

.stat-number {
  font-size:     var(--fs-32);
  font-weight:   700;
  color:         var(--orange);
  line-height:   1;
  margin-bottom: var(--sp-6);
}

.stat-desc {
  font-size:   var(--fs-12);
  color:       var(--text-light);
  line-height: 1.4;
}


/* ================================================================
   16. CARTES PROGRAMMES
   ================================================================ */

.program-card {
  background:    var(--white);
  border-radius: var(--radius-card);   /* 50px 0 0 0 — signature ineuf */
  overflow:      hidden;
  box-shadow:    var(--shadow-card);
  transition:    transform var(--t-slow), box-shadow var(--t-slow);
}
.program-card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.program-img {
  height:   180px;
  position: relative;
  overflow: hidden;
}
.program-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.program-card:hover .program-img img { transform: scale(1.04); }

.program-info { padding: var(--sp-16); }

.program-name {
  font-size:     var(--fs-16);
  font-weight:   800;
  color:         var(--text);
  margin-bottom: 2px;
}

.program-location {
  font-size:     var(--fs-12);
  color:         var(--text-light);
  margin-bottom: var(--sp-10);
}

.program-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.program-price-label {
  font-size:      var(--fs-10);
  color:          var(--orange-text);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.program-price {
  font-size:   var(--fs-22);
  font-weight: 900;
  color:       var(--orange-text);
  line-height: 1;
}

.program-icons { display: flex; gap: var(--sp-6); }
.prog-icon {
  width:           28px;
  height:          28px;
  background:      var(--light-bg);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.prog-icon svg { width: 14px; height: 14px; fill: var(--teal); }


/* ================================================================
   17. SECTION PROGRAMMES À LA UNE (fond teal)
   ================================================================ */

.programs-section {
  background: var(--teal);
  padding:    var(--sp-60) var(--gutter);
}

.programs-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--sp-20);
  max-width:             var(--inner);
  margin:                0 auto var(--sp-32);
}

.carousel-dots {
  display:         flex;
  justify-content: center;
  gap:             var(--sp-6);
  margin-bottom:   var(--sp-24);
}
.dot {
  width:         8px; height: 8px;
  border-radius: 50%;
  background:    rgba(255,255,255,.4);
}
.dot.active { background: var(--white); }


/* ================================================================
   18. SECTION CONSEILLERS (split image / texte)
   ================================================================ */

.advisors-section { background: var(--white); }

.advisors-inner {
  max-width:  var(--inner);
  margin:     0 auto;
  display:    grid;
  grid-template-columns: 1fr 1fr;
  min-height: 320px;
}

.advisors-img {
  height:        100%;
  min-height:    280px;
  border-radius: var(--radius-card);   /* 50px 0 0 0 */
  overflow:      hidden;
}
.advisors-img img { width: 100%; height: 100%; object-fit: cover; }

.advisors-content {
  padding:        var(--sp-48) var(--sp-48) var(--sp-48) 52px;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            var(--sp-16);
}

.advisors-content h2 {
  font-size:   var(--fs-36);
  font-weight: 800;
  color:       var(--text);
  line-height: 1.2;
}

.advisors-content p {
  font-size:   var(--fs-13);
  color:       var(--text-light);
  line-height: 1.7;
}

.advisors-availability {
  font-size:  var(--fs-12);
  color:      var(--text-light);
  font-style: italic;
}

.advisors-btns { display: flex; gap: var(--sp-12); flex-wrap: wrap; margin-top: var(--sp-4); }


/* ================================================================
   19. SECTION POURQUOI ACHETER (cartes avantages)
   ================================================================ */

.why-section { background: var(--light-bg); }

.why-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--sp-24);
  max-width:             var(--inner);
  margin:                0 auto;
}

.why-card {
  background:    var(--white);
  border-radius: var(--radius);
  padding:       var(--sp-28) var(--sp-24);
  border:        1px solid var(--border);
  transition:    box-shadow var(--t-base), border-color var(--t-base);
}
.why-card:hover { box-shadow: var(--shadow-md); border-color: var(--orange); }

.why-icon {
  width:           52px;
  height:          52px;
  border:          2px solid var(--orange);
  border-radius:   50%;
  margin-bottom:   var(--sp-16);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.why-icon svg { width: 24px; height: 24px; fill: var(--orange); }

.why-card h3 {
  font-size:      var(--fs-13);
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color:          var(--orange-text);
  margin-bottom:  var(--sp-10);
}

.why-card p { font-size: var(--fs-13); color: var(--text-light); line-height: 1.65; }


/* ================================================================
   20. CARTES ACTUALITÉS & SECTION NEWS
   ================================================================ */

.news-section { background: var(--light-bg); }

.news-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--sp-20);
  max-width:             var(--inner);
  margin:                0 auto var(--sp-28);
}

.news-card {
  overflow:   hidden;
  border:     1px solid var(--border);
  background: var(--white);
  transition: box-shadow var(--t-base), transform var(--t-slow);
}
.news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.news-img { height: 160px; position: relative; overflow: hidden; }
.news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.news-card:hover .news-img img { transform: scale(1.05); }

.news-content { padding: var(--sp-16); background: var(--white); }

.news-tag {
  font-size:      var(--fs-10);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color:          var(--teal);
  margin-bottom:  var(--sp-6);
}

.news-content h3 {
  font-size:     var(--fs-14);
  font-weight:   800;
  color:         var(--text);
  line-height:   1.35;
  margin-bottom: var(--sp-8);
}

.news-link {
  font-size:       var(--fs-12);
  font-weight:     700;
  color:           var(--text-light);
  text-decoration: underline;
  transition:      color var(--t-fast);
}
.news-link:hover { color: var(--teal); }

.news-all-btn { text-align: center; }


/* ================================================================
   21. SECTION PARTENAIRES / LOGOS
   ================================================================ */

.partners-section { background: var(--white); padding: var(--sp-40) var(--gutter); }
.partners-section .section-title { font-size: var(--fs-24); margin-bottom: var(--sp-28); }

.partners-logos {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             16px;
  flex-wrap:       wrap;
  max-width:       1120px;
  margin-inline:   auto;
}

.partner-logo {
  width:         120px;
  height:        52px;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  display:       flex;
  align-items:   center;
  justify-content: center;
  overflow:      hidden;
}
.partner-logo img {
  max-width:  100%;
  max-height: 36px;
  object-fit: contain;
  filter:     grayscale(1) opacity(.6);
  transition: filter var(--t-base);
}
.partner-logo:hover img { filter: grayscale(0) opacity(1); }


/* ================================================================
   22. PAGE LISTING — GRILLE BIENS (page 3)
   ================================================================ */

.listing-filters {
  background:    var(--white);
  border-bottom: 1px solid var(--border);
  padding:       var(--sp-12) var(--gutter);
}
.listing-filters-inner {
  max-width:   var(--inner);
  margin:      0 auto;
  display:     flex;
  gap:         var(--sp-10);
  align-items: center;
}

.listing-toolbar {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  max-width:       var(--inner);
  margin:          0 auto var(--sp-20);
  padding-inline:  var(--gutter);
}

.listing-toolbar__count {
  font-size: var(--fs-13);
  color:     var(--text-light);
}

.listing-toolbar__views { display: flex; gap: var(--sp-8); }

.view-btn {
  width:           32px;
  height:          32px;
  border:          1px solid var(--border);
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--white);
  cursor:          pointer;
  transition:      border-color var(--t-fast), background var(--t-fast);
}
.view-btn.active,
.view-btn:hover { border-color: var(--teal); background: var(--teal-light); }
.view-btn svg { width: 16px; height: 16px; fill: var(--teal); }

.listing-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--sp-20);
  max-width:             var(--inner);
  margin-inline:         auto;
  padding-inline:        var(--gutter);
  padding-bottom:        var(--sp-40);
}

.pagination {
  display:         flex;
  justify-content: center;
  gap:             var(--sp-8);
  padding:         var(--sp-32) 0;
}

.pagination__btn {
  width:           36px;
  height:          36px;
  border:          1px solid var(--border);
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--fs-13);
  font-weight:     700;
  color:           var(--text-light);
  background:      var(--white);
  cursor:          pointer;
  transition:      all var(--t-fast);
}
.pagination__btn.active,
.pagination__btn:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }


/* ================================================================
   23. PAGE LISTING — VUE CARTE (page 4)
   ================================================================ */

.listing-map-layout {
  display:               grid;
  grid-template-columns: 1fr 420px;
  height:                calc(100vh - var(--nav-h) - var(--topbar-h));
  overflow:              hidden;
}

.listing-map__panel { position: relative; overflow: hidden; }

.listing-map__list {
  overflow-y:     auto;
  padding:        var(--sp-16);
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-12);
  border-left:    1px solid var(--border);
}


/* ================================================================
   24. PAGE PROGRAMME / LOT — LAYOUT 2 COL (pages 5–6)
   ================================================================ */

/* Utilise .page-layout (section 05) */

.detail-header {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--sp-12);
  margin-bottom: var(--sp-20);
}

.detail-header__title {
  font-size:   var(--fs-28);
  font-weight: 800;
  color:       var(--text);
  flex:        1;
}

/* Rangée métriques clés */
.detail-metrics {
  display:       flex;
  gap:           var(--sp-20);
  padding:       var(--sp-16) 0;
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-24);
  flex-wrap:     wrap;
}

.detail-metric { display: flex; flex-direction: column; gap: var(--sp-4); }

.detail-metric__label {
  font-size:      var(--fs-11);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color:          var(--text-light);
}

.detail-metric__value { font-size: 15px; font-weight: 700; color: var(--text); }

/* Comparaison prix au m² */
.price-compare {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--sp-12);
  background:            var(--light-bg);
  border-radius:         var(--radius-sm);
  padding:               var(--sp-16);
  margin-bottom:         var(--sp-24);
}

.price-compare__item { text-align: center; }

.price-compare__label { font-size: var(--fs-11); color: var(--text-light); margin-bottom: var(--sp-4); }

.price-compare__value { font-size: var(--fs-16); font-weight: 800; color: var(--text); }
.price-compare__value--highlight { color: var(--orange-text); }

/* Proximités */
.proximity-bar {
  display:    flex;
  gap:        var(--sp-16);
  padding:    var(--sp-16) 0;
  border-top: 1px solid var(--border);
}

.proximity-item {
  display:     flex;
  align-items: center;
  gap:         var(--sp-8);
  font-size:   var(--fs-12);
  color:       var(--text-light);
  font-weight: 600;
}

/* Bloc prix LOT (page 6) */
.lot-price-block {
  background:    var(--light-bg);
  border-radius: var(--radius-sm);
  padding:       var(--sp-16) var(--sp-20);
  margin-bottom: var(--sp-24);
}

.lot-price-big {
  font-size:     var(--fs-28);
  font-weight:   900;
  color:         var(--orange-text);
  line-height:   1;
  margin-bottom: var(--sp-6);
}

.lot-price-monthly { font-size: var(--fs-14); color: var(--text-light); margin-bottom: var(--sp-14); }

.lot-cta-row { display: flex; gap: var(--sp-8); flex-wrap: wrap; }


/* ================================================================
   25. SIDEBAR DROITE STICKY (pages internes)
   ================================================================ */

.sidebar {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-16);
  position:       sticky;
  top:            calc(var(--nav-h) + var(--sp-20));
}

/* Boîte search / widget fond teal */
.sidebar-box {
  background:    var(--teal);
  border-radius: var(--radius-sm);
  padding:       var(--sp-16);
  color:         var(--white);
}

.sidebar-box__title {
  font-size:     var(--fs-18);
  font-weight:   800;
  color:         var(--white);
  margin-bottom: var(--sp-16);
  text-align:    center;
  line-height:   1.25;
}
/*
  Champs dans la sidebar gérés par le dev.
  Référence : bg blanc, border #d0d8dc, padding 10px 12px,
  font-size 13px, border-radius 4px, margin-bottom 8px
*/

/* Chat conseiller fond orange */
.sidebar-chat {
  background:    var(--orange);
  border-radius: var(--radius-sm);
  padding:       var(--sp-16);
  color:         var(--white);
}

.sidebar-chat__title {
  font-size:     var(--fs-16);
  font-weight:   800;
  color:         var(--white);
  margin-bottom: var(--sp-12);
  text-align:    center;
}

/* Mini cartes programmes en sidebar */
.sidebar-programs { margin-top: var(--sp-8); }

.sidebar-program-card {
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow:      hidden;
  margin-bottom: var(--sp-10);
  background:    var(--white);
}
.sidebar-program-card img { width: 100%; height: 100px; object-fit: cover; }

.sidebar-program-info { padding: var(--sp-8) var(--sp-12); }
.sidebar-program-name { font-size: var(--fs-13); font-weight: 800; color: var(--text); margin-bottom: 2px; }
.sidebar-program-loc  { font-size: var(--fs-11); color: var(--text-light); margin-bottom: var(--sp-6); }
.sidebar-program-price { font-size: var(--fs-16); font-weight: 900; color: var(--orange-text); }


/* ================================================================
   26. TABLEAU DES BIENS — VEFA (page programme)
   ================================================================ */

.lots-table-wrap {
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x:    auto;            /* mobile: scroll horizontal au lieu de couper (fix QA 0630) */
  overflow-y:    hidden;
  margin-bottom: var(--sp-16);
}

/* En-tête accordéon typologies */
.lots-type-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--sp-12) var(--sp-16);
  background:      var(--light-bg);
  cursor:          pointer;
  font-size:       var(--fs-13);
  font-weight:     700;
  color:           var(--text);
  border-bottom:   1px solid var(--border);
}

.lots-type-count { font-size: var(--fs-12); color: var(--teal-dk); font-weight: 700; }

.lots-table { width: 100%; min-width: 650px; border-collapse: collapse; font-size: var(--fs-13); }

.lots-table thead tr {
  background:    var(--mid-bg);
  border-bottom: 1px solid var(--border);
}

.lots-table th {
  text-align:     left;
  padding:        var(--sp-10) var(--sp-14);
  font-size:      var(--fs-11);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color:          var(--text-light);
}

.lots-table td {
  padding:       var(--sp-10) var(--sp-14);
  border-bottom: 1px solid var(--border);
  color:         var(--text);
  font-size:     var(--fs-13);
}

.lots-table tr:last-child td { border-bottom: none; }
.lots-table tr:hover td       { background: var(--light-bg); }

.lots-table .td-price { font-weight: 700; color: var(--orange-text); }
.lots-table .td-action { text-align: right; }

.btn-option {
  width:           24px;
  height:          24px;
  border-radius:   50%;
  background:      var(--orange);
  color:           var(--white);
  border:          none;
  font-size:       16px;
  font-weight:     700;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      background var(--t-fast);
}
.btn-option:hover { background: var(--orange-dk); }


/* ================================================================
   27. SECTION PROGRAMMES SIMILAIRES
   ================================================================ */

.similar-section {
  background: var(--light-bg);
  padding:    var(--sp-48) var(--gutter);
  margin-top: var(--sp-40);
}

.similar-section .section-title { font-size: var(--fs-24); }
.similar-section .section-sub   { margin-bottom: var(--sp-24); }


/* ================================================================
   28. PAGE CONTACT (page 7)
   ================================================================ */

/* Utilise .page-layout — formulaire géré par le dev */

.contact-intro {
  font-size:     var(--fs-22);
  font-weight:   800;
  color:         var(--text);
  margin-bottom: var(--sp-8);
}

.contact-sub {
  font-size:     var(--fs-14);
  color:         var(--text-light);
  margin-bottom: var(--sp-28);
  max-width:     560px;
}

.contact-selects { display: flex; gap: var(--sp-12); margin-bottom: var(--sp-16); flex-wrap: wrap; }


/* ================================================================
   29. PAGE ARTICLE / BLOG (page 8)
   ================================================================ */

/* Utilise .page-layout */

.article-read-time {
  font-size:     var(--fs-12);
  color:         var(--text-muted);
  font-weight:   600;
  display:       flex;
  align-items:   center;
  gap:           var(--sp-4);
  margin-bottom: var(--sp-20);
}

.article-body {
  font-size:   15px;
  color:       var(--text-light);
  line-height: 1.75;
}

.article-body h2 {
  font-size:     20px;
  font-weight:   700;
  color:         var(--text);
  margin:        var(--sp-28) 0 var(--sp-12);
  padding-top:   var(--sp-12);
  border-top:    1px solid var(--border);
}

.article-body h3 {
  font-size:     var(--fs-16);
  font-weight:   700;
  color:         var(--text);
  margin:        var(--sp-20) 0 var(--sp-8);
}

.article-body p { font-size: var(--fs-14); color: var(--text-light); line-height: 1.75; margin-bottom: var(--sp-16); }

.article-body ul {
  list-style:    disc;
  padding-left:  var(--sp-20);
  margin-bottom: var(--sp-16);
}
.article-body ul li { font-size: var(--fs-14); color: var(--text-light); line-height: 1.65; margin-bottom: var(--sp-6); }

/* Tableau comparatif in-article */
.article-table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-24); font-size: var(--fs-13); }
.article-table th,
.article-table td { padding: var(--sp-10) var(--sp-14); border: 1px solid var(--border); text-align: left; line-height: 1.4; }
.article-table th {
  background:     var(--light-bg);
  font-weight:    700;
  color:          var(--text);
  font-size:      var(--fs-12);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.article-table td { color: var(--text-light); }

.article-cta-bar {
  display:     flex;
  gap:         var(--sp-12);
  margin-top:  var(--sp-32);
  padding-top: var(--sp-24);
  border-top:  1px solid var(--border);
  flex-wrap:   wrap;
}

/* Mini actualités en sidebar */
.sidebar-news-item {
  display:       flex;
  gap:           var(--sp-10);
  padding:       var(--sp-10) 0;
  border-bottom: 1px solid var(--border);
}
.sidebar-news-item:last-child { border-bottom: none; }

.sidebar-news-thumb {
  width:         70px;
  height:        50px;
  border-radius: var(--radius-sm);
  overflow:      hidden;
  flex-shrink:   0;
}
.sidebar-news-thumb img { width: 100%; height: 100%; object-fit: cover; }

.sidebar-news-tag   { font-size: var(--fs-10); color: var(--teal); font-weight: 700; text-transform: uppercase; margin-bottom: 3px; }
.sidebar-news-title { font-size: var(--fs-12); font-weight: 700; color: var(--text); line-height: 1.3; }


/* ================================================================
   30. FOOTER
   ================================================================ */

.footer {
  background: var(--teal);
  color:      var(--white);
  padding:    var(--sp-48) var(--gutter) var(--sp-24);
}

.footer-inner {
  max-width:             var(--inner);
  margin-inline:         auto;
  display:               grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap:                   var(--sp-40);
  padding-bottom:        var(--sp-32);
  border-bottom:         1px solid rgba(255,255,255,.1);
}

.footer-brand p { font-size: var(--fs-13); color: rgba(255,255,255,.55); line-height: 1.65; margin-bottom: var(--sp-16); }

.footer-socials { display: flex; gap: var(--sp-10); margin-bottom: var(--sp-16); }

.social-icon {
  width:           30px; height: 30px;
  border-radius:   50%;
  border:          1px solid rgba(255,255,255,.2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           rgba(255,255,255,.6);
  font-size:       var(--fs-12);
  font-weight:     700;
  transition:      border-color var(--t-fast), color var(--t-fast);
}
.social-icon:hover { border-color: var(--white); color: var(--white); }

.footer-col h4 {
  font-size:      var(--fs-12);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color:          rgba(255,255,255,.4);
  margin-bottom:  var(--sp-14);
}

.footer-col ul     { display: flex; flex-direction: column; gap: var(--sp-8); }
.footer-col li a   { font-size: var(--fs-13); color: rgba(255,255,255,.7); transition: color var(--t-fast); }
.footer-col li a:hover { color: var(--white); }

.footer-contact    { display: flex; flex-direction: column; gap: var(--sp-6); }
.footer-contact span { font-size: var(--fs-13); color: rgba(255,255,255,.7); }
.footer-contact strong { color: var(--white); }

.footer-bottom {
  max-width:     var(--inner);
  margin-inline: auto;
  padding-top:   var(--sp-20);
  text-align:    center;
  font-size:     var(--fs-11);
  color:         rgba(255,255,255,.72);
}
.footer-bottom a { color: #fff; text-decoration: underline; }


/* ================================================================
   31. FLOTTANTS UI
   ================================================================ */

/* Icônes flottantes droite (Mon espace, Plan, Rappel, Chat) */
.side-icons {
  position:       fixed;
  right:          0;
  top:            50%;
  transform:      translateY(-50%);
  display:        flex;
  flex-direction: column;
  z-index:        90;
}

.side-icon {
  background:   var(--white);
  border:       1px solid var(--border-mid);
  border-right: none;
  width:        48px; height: 48px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  cursor:       pointer;
  transition:   background var(--t-base);
}
.side-icon:first-child { border-radius: var(--radius-sm) 0 0 0; }
.side-icon:last-child  { border-radius: 0 0 0 var(--radius-sm); }
.side-icon:hover       { background: var(--light-bg); }
.side-icon svg         { width: 22px; height: 22px; fill: var(--teal); }

/* Scroll to top */
.scroll-top {
  position:      fixed;
  bottom:        28px; right: 60px;
  width:         40px; height: 40px;
  background:    var(--orange);
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  box-shadow:    0 4px 12px rgba(237,108,57,.4);
  transition:    background var(--t-base), transform var(--t-base);
  z-index:       80;
}
.scroll-top:hover { background: var(--orange-dk); transform: translateY(-2px); }
.scroll-top svg   { width: 18px; height: 18px; fill: var(--white); }

/* Chat bubble */
.chat-bubble {
  position:      fixed;
  bottom:        28px; right: 10px;
  width:         48px; height: 48px;
  background:    var(--orange);
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  box-shadow:    0 4px 12px rgba(237,108,57,.4);
  z-index:       80;
}
.chat-bubble svg { width: 22px; height: 22px; fill: var(--white); }


/* ================================================================
   32. MODALES (Mon espace, Recevoir le plan, Chat conseiller)
   ================================================================ */

.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.55);
  z-index:         200;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--sp-20);
}

.modal {
  background:    var(--white);
  border-radius: var(--radius-sm);
  padding:       var(--sp-24);
  width:         300px;
  box-shadow:    var(--shadow-lg);
  position:      relative;
}

.modal__close {
  position:    absolute;
  top:         var(--sp-12); right: var(--sp-12);
  width:       24px; height: 24px;
  background:  transparent;
  border:      none;
  cursor:      pointer;
  font-size:   var(--fs-18);
  color:       var(--text-light);
  line-height: 1;
}
.modal__close:hover { color: var(--text); }

.modal__title {
  font-size:     var(--fs-16);
  font-weight:   800;
  color:         var(--text);
  margin-bottom: var(--sp-16);
  text-align:    center;
}

/* Mon espace */
.modal--account .modal__title { color: var(--teal); }

/* Recevoir le Plan — fond teal */
.modal--plan { background: var(--teal); color: var(--white); }
.modal--plan .modal__title { color: var(--white); }

/* Chat conseiller — fond orange */
.modal--chat { background: var(--orange); color: var(--white); }
.modal--chat .modal__title { color: var(--white); }
.modal--chat .modal__close { color: rgba(255,255,255,.7); }

/* Boutons login social */
.social-login { display: flex; gap: var(--sp-8); margin-top: var(--sp-12); }
.btn-social {
  flex:          1;
  padding:       8px;
  border-radius: var(--radius-sm);
  font-size:     var(--fs-12);
  font-weight:   700;
  border:        none;
  cursor:        pointer;
  text-align:    center;
}
.btn-social--fb { background: #1877f2; color: var(--white); }
.btn-social--gg { background: #ea4335; color: var(--white); }


/* ================================================================
   FIN DU FICHIER — INEUF.COM DESIGN SYSTEM v2
   ================================================================ */

.detail-similar { background: var(--white); padding: var(--sp-40) var(--gutter) var(--sp-20); }
.detail-similar .section-title { margin-bottom: var(--sp-28); }

/* ── Boutons DS v2 (definitions manquantes) ── */
.btn-orange{display:inline-block;background:var(--orange);color:var(--white);border:none;border-radius:var(--radius);padding:13px 26px;font-size:var(--fs-14);font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background var(--t-base)}
.btn-orange:hover{background:var(--orange-dk);color:var(--white)}
.btn-light{display:inline-block;background:var(--white);color:var(--orange-text);border:1px solid var(--orange);border-radius:var(--radius);padding:13px 26px;font-size:var(--fs-14);font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background var(--t-base),color var(--t-base)}
.btn-light:hover{background:var(--orange);color:var(--white)}
/* ── Animation pop (wishlist + comparateur identiques) ── */
@keyframes ineufPop{0%{transform:scale(1)}40%{transform:scale(1.28)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.program-mini-ico.pop,.side-icon.pop{animation:ineufPop .35s ease}

/* ── Fiches programme/lot : annule le padding section global (60px) + charte ── */
.detail-section{padding:0;margin-bottom:var(--sp-28)}
.detail-section__title{font-size:var(--fs-24);font-weight:800;color:var(--text);margin-bottom:var(--sp-16)}
.detail-subtitle{font-size:var(--fs-13);font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--orange-text);margin:6px 0 var(--sp-20)}
.detail-gallery{margin-bottom:var(--sp-24)}
.detail-gallery img{width:100%;border-radius:var(--radius-card);display:block}
.detail-description{color:var(--text-light);line-height:1.7}
.detail-description p{margin:0 0 var(--sp-12)}
.detail-description p:last-child{margin-bottom:0}
.detail-map iframe{width:100%;height:460px;border:0;border-radius:var(--radius-card);display:block}
.detail-map__caption{font-size:var(--fs-13);color:var(--text-light);margin-top:var(--sp-12)}

/* ── Footer : maillage SEO villes (4 col x 8 lignes) ── */
.footer-seo{max-width:var(--inner);margin:var(--sp-20) auto 0;padding-top:var(--sp-20);border-top:1px solid rgba(255,255,255,.12)}
.footer-seo__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(8,auto);grid-auto-flow:column;gap:7px 28px}
.footer-seo__grid a{color:rgba(255,255,255,.62);font-size:var(--fs-12);text-decoration:none;line-height:1.4}
.footer-seo__grid a:hover{color:#fff;text-decoration:underline}
@media (max-width:860px){.footer-seo__grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(16,auto)}}
@media (max-width:520px){.footer-seo__grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}}

/* ── Prix moyen au m² (fiche programme, = decoupage) ── */
.price-compare{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-12);background:var(--light-bg);border-radius:var(--radius-sm);padding:var(--sp-16);margin-bottom:var(--sp-24)}
.price-compare__item{text-align:center}
.price-compare__label{font-size:var(--fs-11);color:var(--text-light);margin-bottom:var(--sp-4)}
.price-compare__value{font-size:var(--fs-16);font-weight:800;color:var(--text)}
.price-compare__value--highlight{color:var(--orange-text)}
@media(max-width:640px){.price-compare{grid-template-columns:repeat(2,1fr)}}

/* ── Encart Chattez : lead lisible sur fond orange ── */
.sidebar-chat__lead{color:rgba(255,255,255,.95);font-size:var(--fs-13);line-height:1.5;margin-bottom:var(--sp-12)}
.sidebar-chat__title{color:#fff}
/* ── Icones d'action sur vignette programme (comparateur + wishlist) ── */
.program-actions{display:flex;flex-direction:column;gap:8px;align-items:center}
.program-mini-ico{width:44px;height:44px;border-radius:50%;background:var(--light-bg);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .15s ease,background .15s ease}
.program-mini-ico img{width:22px;height:22px}
.program-mini-ico:hover{background:#dfe7ec}
.program-mini-ico.is-fav{background:#fde3d6}

/* ── Pages CMS statiques (notre-societe, mentions, etc.) : typographie ── */
.cms-content{font-size:var(--fs-15);color:var(--text-light);line-height:1.75}
.cms-content h1{font-size:30px;font-weight:800;color:var(--text);line-height:1.2;margin:0 0 var(--sp-16)}
.cms-content h2{font-size:22px;font-weight:800;color:var(--text);margin:var(--sp-32) 0 var(--sp-12)}
.cms-content h3{font-size:17px;font-weight:700;color:var(--text);margin:var(--sp-20) 0 var(--sp-8)}
.cms-content h4{font-size:15px;font-weight:700;color:var(--text);margin:var(--sp-16) 0 var(--sp-6)}
.cms-content p{margin:0 0 var(--sp-16);line-height:1.75}
.cms-content ul,.cms-content ol{margin:0 0 var(--sp-16) var(--sp-20)}
.cms-content ul{list-style:disc}.cms-content ol{list-style:decimal}
.cms-content li{margin-bottom:var(--sp-6);line-height:1.6}
.cms-content a{color:var(--teal);text-decoration:underline}
.cms-content img{max-width:100%;height:auto;border-radius:var(--radius-sm);margin:var(--sp-12) 0}
.cms-content table{width:100%;border-collapse:collapse;margin:var(--sp-16) 0}
.cms-content td,.cms-content th{border:1px solid var(--border);padding:8px 10px}