/**
 * BGFI Immobilier — Retours client (révisions ciblées).
 * ---------------------------------------------------------------------------
 * Feuille de SURCHARGE, chargée EN DERNIER (après common, scopes, composants,
 * responsive-fixes, dynamic-additions et style.css). Elle applique les retours
 * client de façon chirurgicale, SANS réécrire les fichiers de scope existants :
 * chaque règle est ciblée par sélecteur précis (page/section) pour éviter toute
 * régression en cascade.
 *
 * Principe : ne toucher qu'aux éléments explicitement listés dans les retours.
 * Aucune règle globale trop large ; tout est scopé (body.is-front /
 * body.bgfi-page-{slug} / sélecteurs de composant .brand, .page-hero…).
 *
 * @package BGFI_Immobilier
 */

/* ===================================================================
   0. MENU PRINCIPAL — logo complètement à gauche (desktop)
   -------------------------------------------------------------------
   Retour : aligner le logo tout à gauche, les éléments restants alignés
   de façon homogène. La grille d'origine (1fr auto 1fr, logo centré) est
   convertie en flex UNIQUEMENT en desktop (>=992px) : logo en premier,
   liens de navigation à la suite avec un espacement homogène (32px), et
   boutons Contact / Formulaire ancrés à droite. La structure DOM et les
   éléments du menu ne sont PAS modifiés (aucun retrait/ajout de lien) ;
   seul l'ordre visuel change. Le mobile (<=991px) reste inchangé.
   =================================================================== */

@media (min-width: 992px) {
  .site-header .header-grid {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 32px;
  }

  /* Logo tout à gauche. */
  .site-header .header-grid > .brand {
    order: 0;
    flex: 0 0 auto;
  }

  /* Liens principaux à la suite du logo, espacement homogène. */
  .site-header .header-grid > .nav-left {
    order: 1;
    justify-content: flex-start !important;
    padding-right: 0 !important;
  }

  /* Groupe de droite : occupe l'espace restant, ses liens suivent
     directement les précédents ; seuls les boutons (.nav-cta) sont
     poussés à l'extrême droite pour un rendu équilibré. */
  .site-header .header-grid > .nav-right {
    order: 2;
    flex: 1 1 auto;
    justify-content: flex-start !important;
    padding-left: 0 !important;
  }

  .site-header .header-grid > .nav-right .nav-cta {
    margin-left: auto;
  }
}

/* Écrans intermédiaires : on resserre l'espacement (cohérent avec le bloc
   992–1200px existant qui réduit déjà les gaps de navigation). */
@media (min-width: 992px) and (max-width: 1200px) {
  .site-header .header-grid {
    gap: 20px;
  }
}

/* ===================================================================
   1. LOGO — fond transparent (en-tête + pied de page)
   -------------------------------------------------------------------
   Retour : « remplacer par une version en fond transparent, supprimer
   tout fond blanc résiduel, sans toucher à la taille ni au position-
   nement ». Le fichier logo (logo_png.png) est DÉJÀ transparent ; le
   fond blanc venait de règles CSS (.brand { background:#fff } et
   .brand img { background:#fff }) dupliquées dans chaque scope. On les
   neutralise ici sans modifier la hauteur (62px/52px) ni la grille.
   =================================================================== */

/* En-tête — sur toutes les pages (accueil + intérieures). */
.site-header .brand {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.site-header .brand img {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Retour client : bannière totalement claire, SANS aucun filtre ni ombre.
   Le logo transparent ne reçoit donc plus d'ombre portée sur l'accueil. */
body.is-front .site-header.transparent .brand img,
body.is-front .site-header.scrolled .brand img {
  filter: none !important;
}

/* Pied de page — logo sans cache ni fond. */
.site-footer .footer-brand {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.site-footer .footer-brand img {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ===================================================================
   1bis. SÉLECTEUR DE LANGUE — déplacé dans le pied de page
   -------------------------------------------------------------------
   Retour : déplacer le sélecteur de langue dans le footer, colonne
   « Nous contacter », juste après l'e-mail, en CONSERVANT exactement le
   même design que dans l'en-tête (couleurs, drapeaux, dropdown,
   transitions). Le style d'origine étant scopé sous .header-top .lang,
   il ne s'applique plus dans le footer : on le reproduit ici à
   l'identique, dé-scopé, ciblé sur .footer-lang. Le dropdown s'ouvre
   vers le HAUT (place disponible en bas de page).
   =================================================================== */

.site-footer .footer-lang {
  position: relative;
  margin-top: 16px;
}

.site-footer .footer-lang .lang {
  position: relative;
}

.site-footer .footer-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-family: var(--body);
  font-weight: 500;
  font-size: .8rem;
  cursor: pointer;
  transition: all var(--t);
}

.site-footer .footer-lang .lang-btn:hover {
  background: rgba(255, 255, 255, .2);
}

.site-footer .footer-lang .lang-btn img {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
}

.site-footer .footer-lang .lang-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: none;
  z-index: 1001;
}

/* Ouverture du menu : translate.js bascule .open sur #langDropdown
   (= .lang-menu). On ouvre donc directement sur .lang-menu.open, sans
   dépendre du script de synchronisation ; on conserve .lang.open .lang-menu
   en secours (état miroir posé par i18n-selector-sync.js). */
.site-footer .footer-lang .lang-menu.open,
.site-footer .footer-lang .lang.open .lang-menu {
  display: block;
}

.site-footer .footer-lang .lang-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--body);
  font-weight: 500;
  color: var(--navy);
  transition: background var(--t);
}

.site-footer .footer-lang .lang-menu button:hover {
  background: var(--cream);
}

.site-footer .footer-lang .lang-menu img {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
}

/* ===================================================================
   2. BANNIÈRE ACCUEIL — vidéo claire + texte lisible (sans filtre)
   -------------------------------------------------------------------
   Retour : la vidéo doit rester claire (pas de filtre uniforme ni de
   fond bleu par-dessus), MAIS le texte doit être bien lisible dès le
   départ. Solution : aucun overlay sur la vidéo ; à la place, une ombre
   portée « halo » appliquée UNIQUEMENT sur les lettres du titre et du
   sous-titre. Elle n'assombrit que les pixels situés juste derrière le
   texte, sans voiler la vidéo — le texte ressort sur fond clair comme
   sur fond sombre.
   =================================================================== */

body.is-front .hero-overlay {
  display: none !important;
  background: none !important;
}

/* Halo sombre multi-couches, calé sur les glyphes : lisibilité maximale
   sans toucher au reste de la vidéo. */
body.is-front .hero-content h1 {
  color: #fff !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .55),
    0 2px 10px rgba(0, 0, 0, .55),
    0 4px 24px rgba(0, 0, 0, .45) !important;
}

body.is-front .hero-content .tagline {
  color: #fff !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .5),
    0 2px 12px rgba(0, 0, 0, .5) !important;
}

/* ===================================================================
   3. TAILLE DU TEXTE DE BANNIÈRE — toutes pages SAUF accueil
   -------------------------------------------------------------------
   Retour : font-size: clamp(1.6rem, 1.4vw, 2.4rem) sur le titre de
   bannière des pages intérieures (.page-hero h1). L'accueil (.hero h1)
   n'est PAS concerné.
   =================================================================== */

body:not(.is-front) .page-hero h1 {
  font-size: clamp(1.6rem, 1.4vw, 2.4rem) !important;
}

/* ===================================================================
   4. TYPOGRAPHIE DES TITRES — graisse 600 -> 500 (titres uniquement)
   -------------------------------------------------------------------
   Retour : alléger la graisse des titres de bannière et des H1/H2 de
   contenu (600 -> 500), légère réduction de taille. NE PAS toucher aux
   menus (exclus : .nav-left, .nav-right, .nav-dropdown, .site-header).
   On cible les titres de CONTENU et de bannière, hors en-tête/footer.
   =================================================================== */

.page-hero h1,
.hero-content h1,
main h1, main h2,
.section h1, .section h2,
section.section h2 {
  font-weight: 500 !important;
}

/* Légère réduction de l'échelle des H2 de contenu, en cohérence avec
   l'allègement de la graisse (ajustement fin, pas de refonte). */
.section h2 {
  letter-spacing: .005em;
}

/* ===================================================================
   5. ACCUEIL — section « Pourquoi choisir BGFI Immobilier »
   -------------------------------------------------------------------
   Retour : remplacer les PHOTOS par des pictogrammes (style de la
   section Services), justifier les paragraphes, CONSERVER les encadre-
   ments existants. Le balisage passe de .invest-img (photo) à
   .why-picto (pictogramme cream, comme .svc-icon).
   =================================================================== */

body.is-front .why-card .why-picto {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cream), var(--cream-2));
  border-bottom: 1px solid var(--border);
}

body.is-front .why-card .why-picto i {
  font-size: 3rem;
  color: var(--navy);
  transition: transform var(--t), color var(--t);
}

body.is-front .why-card:hover .why-picto i {
  transform: scale(1.08);
  color: var(--sage);
}

/* Le corps n'a plus besoin du sur-décalage haut (42px) qui compensait le
   badge d'icône chevauchant la photo : on revient à un padding régulier. */
body.is-front .why-card .invest-body {
  padding-top: 28px;
}

/* Paragraphes justifiés (retour explicite). */
body.is-front .why-card .invest-body p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* ===================================================================
   6. PAGE « QUI SOMMES-NOUS ? » — ne pas encadrer les contenus
   -------------------------------------------------------------------
   Retour : reconstruire à partir du texte client (déjà en place), NE PAS
   encadrer les contenus, conserver la structure générale. On retire les
   cadres (.who-card border/ombre/fond) et la boîte de citation, en
   gardant la hiérarchie via l'espacement et un liseré sage discret.
   =================================================================== */

body.bgfi-page-about .bgfi-who .who-card {
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 4px 4px !important;
}

body.bgfi-page-about .bgfi-who .who-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Séparateur léger entre colonnes, à la place des cartes encadrées. */
body.bgfi-page-about .bgfi-who .who-quote {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 32px 8px 0 !important;
}

/* Texte justifié pour un rendu propre sans cadre. */
body.bgfi-page-about .bgfi-who .who-card p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* ===================================================================
   7. PAGE « POURQUOI NOUS CHOISIR » — numéros, sans cadre
   -------------------------------------------------------------------
   Retour : remplacer les pictogrammes par des CHIFFRES, retirer bordures
   et ombres, numéro en haut à gauche aligné verticalement au milieu,
   texte justifié. Le numéro est injecté via le balisage (.why-num) ;
   ici on gère l'absence de cadre + la justification + le style du numéro.
   =================================================================== */

body.bgfi-page-why-choose-us .why-block {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 6px !important;
  align-items: center !important; /* numéro centré verticalement / bloc */
}

body.bgfi-page-why-choose-us .why-block:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Numéro (remplace .why-block-icon) : haut-gauche, aligné au milieu. */
body.bgfi-page-why-choose-us .why-block .why-num {
  flex: none;
  align-self: center;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1;
  color: var(--sage);
  border: 2px solid var(--sage);
  border-radius: 50%;
}

body.bgfi-page-why-choose-us .why-block-body p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* ===================================================================
   8. PAGE « NOS SERVICES » — grille sans carrousel, sans cadre, lien texte
   -------------------------------------------------------------------
   Retour : supprimer le carrousel (tout afficher en grille 2–3/ligne),
   retirer les encadrements des cartes, remplacer le bouton « En savoir
   plus » par un LIEN texte (accent + soulignement au survol + chevron).
   Le balisage inline (display:flex !important) est retiré côté template ;
   ici on met en grille, on masque les flèches et on style le lien.
   Concerne l'archive CPT (body.bgfi-page-services).
   =================================================================== */

/* Retour : la description d'intro « BGFI Immobilier met à la disposition… »
   doit être justifiée / à la même largeur que le bloc des services. On
   retire la contrainte de largeur (880px) pour l'aligner sur la grille et
   on justifie le paragraphe (kicker + titre restent centrés au-dessus). */
body.bgfi-page-services .section .lead {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}

/* Conteneur : neutralise le carrousel, passe en grille responsive. */
body.bgfi-page-services .services-carousel {
  display: block !important;
  padding: 0 !important;
}

body.bgfi-page-services .services-track {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  padding: 8px 0 !important;
}

@media (max-width: 1024px) {
  body.bgfi-page-services .services-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.bgfi-page-services .services-track {
    grid-template-columns: 1fr !important;
  }
}

/* Cartes : plus de cadre (bordure / ombre / fond). */
body.bgfi-page-services .services-track .card {
  flex: none !important;
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 4px 4px !important;
}

body.bgfi-page-services .services-track .card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Masque les flèches du carrousel (inutiles en grille). */
body.bgfi-page-services .services-carousel > .nav-btn {
  display: none !important;
}

/* « En savoir plus » : lien texte cliquable (accent + chevron + souligné). */
body.bgfi-page-services .services-track .card .service-cta {
  margin-top: auto !important;
  align-self: flex-start !important;
  display: inline-flex !important;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--sage) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t), border-color var(--t), gap var(--t);
}

body.bgfi-page-services .services-track .card .service-cta:hover {
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  color: var(--sage-2) !important;
  border-bottom-color: var(--sage-2);
  gap: 12px;
}

/* ===================================================================
   10. ARCHIVE « NOS ENGAGEMENTS » — sans carrousel, comme les services
   -------------------------------------------------------------------
   Retour : supprimer le carrousel/slider, présenter les engagements
   directement, sur le même principe que l'archive des services (grille
   claire, cartes dé-encadrées, lien texte, bonne hiérarchie). La grille
   était déjà en place sous le carrousel ; on neutralise le sur-padding
   et les flèches, on aligne le style sur celui des services.
   =================================================================== */

/* Neutralise le carrousel : plus de padding latéral ni de flèches. */
body.bgfi-page-commitments .engagements-carousel {
  padding: 0 !important;
}

body.bgfi-page-commitments .engagements-carousel .nav-btn {
  display: none !important;
}

/* Intro : description à pleine largeur et justifiée (comme les services). */
body.bgfi-page-commitments .section .lead {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}

/* Cartes dé-encadrées (bordure / ombre / fond), comme les services. */
body.bgfi-page-commitments .engagements-carousel .card-grid .card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 4px 4px !important;
}

body.bgfi-page-commitments .engagements-carousel .card-grid .card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Lien « Lire plus » : accent sage + soulignement au survol (cohérent
   avec « En savoir plus » des services). */
body.bgfi-page-commitments .engagements-carousel .card-grid .card .more {
  color: var(--sage) !important;
  border-bottom: 1px solid transparent;
  transition: color var(--t), border-color var(--t), gap var(--t);
}

body.bgfi-page-commitments .engagements-carousel .card-grid .card:hover .more {
  color: var(--sage-2) !important;
  border-bottom-color: var(--sage-2);
  gap: 12px;
}

/* Texte des cartes justifié. */
body.bgfi-page-commitments .engagements-carousel .card-grid .card p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
   -------------------------------------------------------------------
   Retour (3 pages : invest-individual, invest-business, financing) :
   ajouter une image qui projette, retirer les encadrements des contenus,
   justifier le texte. L'image est ajoutée via le balisage (.bgfi-invest-
   figure) ; ici on gère son rendu + la suppression des cadres + la
   justification.
   =================================================================== */

/* Section d'intro en deux colonnes, calquée sur le modèle « .split » de la
   page « Qui sommes-nous » (référence client) : texte à gauche (kicker +
   titre + paragraphes), image à droite, sur la même ligne. Colonne texte
   un peu plus large que l'image, texte aligné à gauche (naturel, non
   justifié, comme la référence), image en ratio 4/3 avec ombre douce. */
body.bgfi-page-invest-individual .bgfi-invest-hero,
body.bgfi-page-invest-business .bgfi-invest-hero,
body.bgfi-page-financing .bgfi-invest-hero {
  display: grid !important;
  grid-template-columns: 1.1fr .9fr !important;
  gap: 60px !important;
  align-items: center !important;
  max-width: 1180px;
  margin: 0 auto;
}

/* Ordre explicite des colonnes : texte à gauche, image à droite. */
body.bgfi-page-invest-individual .bgfi-invest-hero > .bgfi-invest-text,
body.bgfi-page-invest-business .bgfi-invest-hero > .bgfi-invest-text,
body.bgfi-page-financing .bgfi-invest-hero > .bgfi-invest-text {
  grid-column: 1;
  min-width: 0;
}

body.bgfi-page-invest-individual .bgfi-invest-hero > .bgfi-invest-figure,
body.bgfi-page-invest-business .bgfi-invest-hero > .bgfi-invest-figure,
body.bgfi-page-financing .bgfi-invest-hero > .bgfi-invest-figure {
  grid-column: 2;
  min-width: 0;
}

/* Colonne texte : tout aligné à gauche (kicker, titre, paragraphes). */
body.bgfi-page-invest-individual .bgfi-invest-text,
body.bgfi-page-invest-business .bgfi-invest-text,
body.bgfi-page-financing .bgfi-invest-text {
  text-align: left;
}

body.bgfi-page-invest-individual .bgfi-invest-text h2,
body.bgfi-page-invest-business .bgfi-invest-text h2,
body.bgfi-page-financing .bgfi-invest-text h2 {
  text-align: left;
  margin-bottom: 18px;
}

/* Paragraphes uniformes et alignés à gauche (le .lead est normalisé pour
   correspondre au rendu de la référence, sans emphase ni centrage). */
body.bgfi-page-invest-individual .bgfi-invest-text .lead,
body.bgfi-page-invest-individual .bgfi-invest-text p,
body.bgfi-page-invest-business .bgfi-invest-text .lead,
body.bgfi-page-invest-business .bgfi-invest-text p,
body.bgfi-page-financing .bgfi-invest-text .lead,
body.bgfi-page-financing .bgfi-invest-text p {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

body.bgfi-page-invest-individual .bgfi-invest-text .lead,
body.bgfi-page-invest-business .bgfi-invest-text .lead,
body.bgfi-page-financing .bgfi-invest-text .lead {
  font-size: 1.02rem;
  color: var(--text-2);
  margin-bottom: 18px;
}

/* Colonne image : coins arrondis, ombre douce, ratio 4/3 (comme la
   référence). */
body.bgfi-page-invest-individual .bgfi-invest-figure,
body.bgfi-page-invest-business .bgfi-invest-figure,
body.bgfi-page-financing .bgfi-invest-figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}

body.bgfi-page-invest-individual .bgfi-invest-figure img,
body.bgfi-page-invest-business .bgfi-invest-figure img,
body.bgfi-page-financing .bgfi-invest-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  body.bgfi-page-invest-individual .bgfi-invest-hero,
  body.bgfi-page-invest-business .bgfi-invest-hero,
  body.bgfi-page-financing .bgfi-invest-hero {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  /* Empilé : texte puis image (ordre naturel). */
  body.bgfi-page-invest-individual .bgfi-invest-hero > .bgfi-invest-text,
  body.bgfi-page-invest-business .bgfi-invest-hero > .bgfi-invest-text,
  body.bgfi-page-financing .bgfi-invest-hero > .bgfi-invest-text,
  body.bgfi-page-invest-individual .bgfi-invest-hero > .bgfi-invest-figure,
  body.bgfi-page-invest-business .bgfi-invest-hero > .bgfi-invest-figure,
  body.bgfi-page-financing .bgfi-invest-hero > .bgfi-invest-figure {
    grid-column: 1 !important;
  }

  /* Image un peu moins haute une fois empilée sous le texte. */
  body.bgfi-page-invest-individual .bgfi-invest-figure,
  body.bgfi-page-invest-business .bgfi-invest-figure,
  body.bgfi-page-financing .bgfi-invest-figure {
    aspect-ratio: 16 / 10;
  }
}

/* --- Composant « Vos avantages » (réutilisable sur les 3 pages) --------
   Retour : présentation plus professionnelle, moderne et élégante —
   meilleure organisation, hiérarchie claire, icônes bien intégrées,
   mise en page équilibrée, espacements cohérents. Sans réencadrer les
   blocs (pas de bordure/ombre sur la carte) : l'élégance vient d'un
   badge d'icône soigné (dégradé marine), d'une typo hiérarchisée et
   d'une grille centrée qui équilibre les lignes incomplètes (5 = 3+2,
   7 = 3+3+1 centrés). NB : le balisage utilise .ico (et non .icon), ce
   qui laissait les icônes sans style — d'où leur intégration ici. */

/* Grille centrée : jusqu'à 3 par ligne, lignes incomplètes centrées. */
body.bgfi-page-invest-individual .card-grid,
body.bgfi-page-invest-business .card-grid,
body.bgfi-page-financing .card-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 34px 32px !important;
  grid-template-columns: none !important;
  align-items: stretch;
}

body.bgfi-page-invest-individual .card-grid .card,
body.bgfi-page-invest-business .card-grid .card,
body.bgfi-page-financing .card-grid .card {
  flex: 0 0 calc((100% - 64px) / 3);
  max-width: calc((100% - 64px) / 3);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 4px !important;
}

body.bgfi-page-invest-individual .card-grid .card:hover,
body.bgfi-page-invest-business .card-grid .card:hover,
body.bgfi-page-financing .card-grid .card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Badge d'icône soigné (dégradé marine, coins arrondis, ombre douce). */
body.bgfi-page-invest-individual .card-grid .card .ico,
body.bgfi-page-invest-business .card-grid .card .ico,
body.bgfi-page-financing .card-grid .card .ico {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #fff;
  font-size: 1.35rem;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(8, 56, 104, .16);
  transition: transform var(--t), box-shadow var(--t);
}

body.bgfi-page-invest-individual .card-grid .card:hover .ico,
body.bgfi-page-invest-business .card-grid .card:hover .ico,
body.bgfi-page-financing .card-grid .card:hover .ico {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(8, 56, 104, .22);
}

/* Titre : hiérarchie nette au-dessus du texte. */
body.bgfi-page-invest-individual .card-grid .card h3,
body.bgfi-page-invest-business .card-grid .card h3,
body.bgfi-page-financing .card-grid .card h3 {
  font-size: 1.18rem;
  margin-bottom: 10px;
  color: var(--navy);
}

@media (max-width: 900px) {
  body.bgfi-page-invest-individual .card-grid .card,
  body.bgfi-page-invest-business .card-grid .card,
  body.bgfi-page-financing .card-grid .card {
    flex: 0 0 calc((100% - 32px) / 2);
    max-width: calc((100% - 32px) / 2);
  }
}

@media (max-width: 600px) {
  body.bgfi-page-invest-individual .card-grid .card,
  body.bgfi-page-invest-business .card-grid .card,
  body.bgfi-page-financing .card-grid .card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Texte des cartes d'avantages justifié (l'intro est gérée plus haut via
   .bgfi-invest-text). */
body.bgfi-page-invest-individual .card-grid .card p,
body.bgfi-page-invest-business .card-grid .card p,
body.bgfi-page-financing .card-grid .card p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* ===================================================================
   11. RETOURS CLIENT — en-tête accueil, titre bannière, boutons, H2
   ===================================================================
   Nouvelle série de retours (accueil + global). Tout est appliqué ici,
   en surcharge chargée en dernier, sans toucher aux fichiers de scope.
   =================================================================== */

/* --- 11.1  En-tête de l'accueil À L'ARRIVÉE (état .transparent) --------
   Retour : dès l'arrivée sur le site (sans défilement), l'en-tête doit
   avoir un fond blanc légèrement transparent (#ffffff9c) et un texte en
   bleu, pour que le logo et le menu soient tout de suite lisibles. Au
   défilement (.scrolled), on garde le comportement actuel (fond blanc,
   texte marine). On aligne donc l'état .transparent sur .scrolled, avec
   un fond semi-transparent. */

body.is-front .site-header.transparent {
  background: #ffffff9c !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(8, 56, 104, .06);
}

/* Liens de navigation en bleu marine dès l'arrivée. */
body.is-front .site-header.transparent .nav-left a,
body.is-front .site-header.transparent .nav-right a.nav-link {
  color: var(--navy);
}

body.is-front .site-header.transparent .nav-left a:hover,
body.is-front .site-header.transparent .nav-right a.nav-link:hover {
  color:var(--sage) !important;
}

/* Bouton « Contact » (ghost) : texte + bordure marine dès l'arrivée. */
body.is-front .site-header.transparent .bgfi-cta-btn.bgfi-cta-ghost {
  color: var(--navy) !important;
  border-color: rgba(8, 56, 104, .35) !important;
}

body.is-front .site-header.transparent .bgfi-cta-btn.bgfi-cta-ghost:hover {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
}

/* Bascule mobile (burger) en marine dès l'arrivée. */
body.is-front .site-header.transparent .mobile-toggle {
  color: var(--navy) !important;
}

/* Logo : plus d'ombre portée (fond clair dès l'arrivée). */
body.is-front .site-header.transparent .brand img {
  filter: none !important;
}

/* --- 11.2  Titre de la bannière d'accueil sur UNE seule ligne ---------
   Retour : le H1 de la bannière doit tenir sur une seule ligne et rester
   pro (taille légèrement réduite). On réduit la taille de base et on
   empêche le retour à la ligne sur desktop ; en dessous de 992px, on
   redonne la possibilité de passer sur deux lignes pour éviter tout
   débordement sur petits écrans. */

/* Conteneur élargi pour laisser le titre tenir sur une ligne. */
body.is-front .hero-content {
  max-width: 1200px;
}

body.is-front .hero h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important;
  white-space: nowrap;
  line-height: 1.12;
}

/* En dessous de 992px, on autorise le retour à la ligne (évite tout
   débordement sur tablette/mobile) : le titre reste lisible sur 2 lignes. */
@media (max-width: 991px) {
  body.is-front .hero h1 {
    white-space: normal;
    font-size: clamp(1.8rem, 6vw, 2.6rem) !important;
  }
}

@media (max-width: 600px) {
  body.is-front .hero h1 {
    font-size: clamp(1.6rem, 7vw, 2.1rem) !important;
  }
}

/* --- 11.3  Boutons plus compacts sur TOUT le site (8px 32px) ----------
   Retour : réduire la hauteur des boutons primaires et secondaires
   partout (padding 8px 32px). Concerne .btn (accueil + pages),
   .bgfi-cta-btn (en-tête) et les liens boutons génériques. On garde la
   largeur horizontale (32px) et on réduit la hauteur (8px). */

.btn,
body.is-front .btn {
  padding: 8px 32px !important;
}

/* Boutons CTA de l'en-tête : hauteur réduite en cohérence. */
.bgfi-cta-btn {
  padding: 8px 22px !important;
}

/* Bouton « lire » des cartes services (accueil). */
body.is-front .svc-cta .btn-read {
  padding: 8px 26px !important;
}

/* Responsive : on conserve des boutons compacts et lisibles. */
@media (max-width: 768px) {
  body.is-front .hero-actions .btn {
    padding: 8px 24px !important;
    font-size: .85rem !important;
  }
}

@media (max-width: 480px) {
  body.is-front .hero-actions .btn {
    padding: 10px 24px !important;
    width: 100%;
    justify-content: center;
  }
}

/* --- 11.4  « Pourquoi choisir BGFI Immobilier ? » sur une ligne -------
   Retour : le point d'interrogation passait à la ligne. On empêche la
   coupure entre « BGFI Immobilier » et « ? » et on élargit légèrement le
   conteneur du titre pour que l'ensemble tienne sur une seule ligne. */

/* Conteneur du bandeau de section élargi (le texte reste centré ; les
   autres titres, plus courts, ne changent pas visuellement). */
body.is-front .section-head {
  max-width: 920px;
}

/* Le titre + son accent restent sur une seule ligne : le « ? » ne repasse
   plus à la ligne. */
body.is-front .section-head h2,
body.is-front .section-head h2 .accent {
  white-space: nowrap;
}

/* Sous 760px, on redonne le retour à la ligne normal pour éviter tout
   débordement horizontal sur mobile. */
@media (max-width: 760px) {
  body.is-front .section-head h2,
  body.is-front .section-head h2 .accent {
    white-space: normal;
  }
}

/* ===================================================================
   12. DÉTAIL RÉALISATION / PROJET — image seule en pleine largeur
   -------------------------------------------------------------------
   Retour : sur les pages de détail (réalisations & projets, scope
   « achievement-detail » utilisé par single-project.php et
   page-achievement-detail.php), quand il n'y a qu'UNE image (pas de
   galerie), elle doit occuper toute la largeur. Le gabarit .real-layout
   est une grille 1.4fr .9fr : sans galerie, le bloc .thumbs est absent
   et .main-img reste seul → on le fait alors s'étendre sur toute la
   largeur (grid-column 1 / -1) avec une hauteur un peu plus généreuse.
   Dès qu'une galerie est présente, .main-img n'est plus enfant unique :
   la présentation à deux colonnes (image + vignettes) reste inchangée.
   =================================================================== */

body.bgfi-page-achievement-detail .real-layout .main-img:only-child {
  grid-column: 1 / -1;
  width: 100%;
  height: clamp(360px, 52vw, 640px);
}

/* ===================================================================
   13. NEWSLETTER — titre légèrement réduit
   -------------------------------------------------------------------
   Retour : la description est masquée côté template (encadrée par les
   commentaires $NeverGiveUp, donc conservée). Ici on réduit légèrement
   la taille du titre pour un rendu plus équilibré une fois la
   description retirée.
   =================================================================== */

body.is-front .newsletter h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
}


/* ===================================================================
   14. BOUTON SECONDAIRE REUTILISABLE (.btn-secondary)
   -------------------------------------------------------------------
   Retour : disposer d'un 3e style de bouton, calque sur .btn-primary
   (memes dimensions, typo, transitions), ne differant QUE par les
   couleurs :
     - fond bleu (navy, couleur existante) + texte blanc ;
     - au survol, fond sage (couleur existante) + texte blanc.
   Utilisation : ajouter la classe -> class="btn btn-secondary".
   Fonctionne aussi en autonome -> class="btn-secondary".
   =================================================================== */

/* Definition complete (permet l'usage autonome sans .btn). */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 32px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1.5px solid var(--navy);
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--body);
  text-decoration: none;
  background: var(--navy);
  color: #fff;
}

/* Couleurs a l'etat normal — specificite suffisante pour battre la base
   scopee .btn (bordure transparente) de l'accueil et des pages. */
.btn.btn-secondary,
body.is-front .btn.btn-secondary,
body[class*="bgfi-page-"] .btn.btn-secondary,
body.is-front .btn-secondary,
body[class*="bgfi-page-"] .btn-secondary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Survol / focus : fond sage, texte blanc (comme demande). */
.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible,
body.is-front .btn.btn-secondary:hover,
body.is-front .btn.btn-secondary:focus-visible,
body[class*="bgfi-page-"] .btn.btn-secondary:hover,
body[class*="bgfi-page-"] .btn.btn-secondary:focus-visible,
body.is-front .btn-secondary:hover,
body[class*="bgfi-page-"] .btn-secondary:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ===================================================================
   15. BOUTONS DE LA BANNIERE — CORRECTIF RESPONSIVE
   -------------------------------------------------------------------
   Retour : sur telephone, les deux boutons de la banniere se
   chevauchaient. Cause : ils sont places dans un conteneur .hero-scroll
   (indicateur de defilement detourne) — positionne en absolu et anime
   (rebond), sans mise en page flex ; les regles responsives de
   .hero-actions ne les atteignaient donc jamais.
   On cible le conteneur porteur de la classe .hero-cta (ajoutee au
   gabarit front-page.php) : on neutralise l'animation de rebond, on pose
   une vraie disposition flex et on empile proprement les boutons en
   pleine largeur sur mobile. Le positionnement desktop (bottom herite)
   n'est pas modifie. */

body.is-front .hero-scroll.hero-cta {
  animation: none;              /* plus de rebond sur des boutons */
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: max-content;
  max-width: min(720px, calc(100% - 40px));
}

@media (max-width: 768px) {
  body.is-front .hero-scroll.hero-cta {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    width: calc(100% - 40px);
    max-width: 380px;
    gap: 12px;
    bottom: 32px;
  }
  body.is-front .hero-scroll.hero-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 22px !important;
    font-size: .9rem;
  }
}

@media (max-width: 480px) {
  body.is-front .hero-scroll.hero-cta {
    width: calc(100% - 32px);
    bottom: 26px;
  }
  body.is-front .hero-scroll.hero-cta .btn {
    padding: 13px 20px !important;
  }
}