/* ===================================================================
   AFFICHAGE — échelle verticale et thème sombre
   Constellation Patrimoine
   -------------------------------------------------------------------
   Ce fichier est chargé en dernier, après tous les autres. Il ne
   remplace rien : il corrige deux choses que le reste du site ne
   traitait pas.

   1. L'échelle typographique en affichage vertical (téléphone et
      tablette en portrait). Mesurée sur la page d'accueil à 375 px de
      large, la hiérarchie était inversée : un h4 s'affichait à 32 px
      alors qu'un h2 tombait à 26 px, et certains paragraphes
      descendaient à 10 px, soit en dessous du seuil de lisibilité.
      Les tailles sont désormais fluides et strictement ordonnées.

   2. Le thème sombre. Le site le refusait explicitement, par un
      color-scheme "light only" posé à la fois en CSS et en balise
      meta : sur un téléphone réglé en sombre, la page restait blanche
      et éblouissait. Les couleurs sont maintenant définies en
      variables, redéfinies pour le sombre, avec une attention
      particulière aux logos partenaires, qui sont sur fond blanc et
      disparaîtraient sans une plaque claire derrière eux.
   =================================================================== */


/* ===================================================================
   1. ÉCHELLE TYPOGRAPHIQUE — AFFICHAGE VERTICAL
   -------------------------------------------------------------------
   Une seule taille par niveau, calculée avec clamp() : la valeur
   s'adapte à la largeur de l'écran entre un minimum et un maximum,
   sans palier brutal d'un format de téléphone à l'autre.

   Le rapport entre deux niveaux consécutifs est d'environ 1,2. C'est
   assez pour que la hiérarchie se lise, assez peu pour que l'ensemble
   reste calme.
   =================================================================== */
@media (max-width: 991px) {

  /* Titre principal : un seul par page. */
  h1, .hero-content h1 {
    font-size: clamp(1.75rem, 7.2vw, 2.25rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.015em;
  }

  /* Titres de section. h4 était plus gros que h2 : c'est corrigé,
     les deux niveaux intermédiaires partagent désormais une taille. */
  h2, .section-title h2, .service-desc h2, .service-desc h2.mb-25 {
    font-size: clamp(1.4rem, 5.4vw, 1.65rem) !important;
    line-height: 1.28 !important;
  }
  h3, h4, .service-desc h3, .service-desc h4,
  .service-desc .juridiction h3, .service-desc .destination-tete h3 {
    font-size: clamp(1.18rem, 4.4vw, 1.35rem) !important;
    line-height: 1.32 !important;
  }
  h5, h6, .service-desc h5, .service-desc h6 {
    font-size: clamp(1.05rem, 3.9vw, 1.15rem) !important;
    line-height: 1.38 !important;
  }

  /* Corps de texte. Le plancher à 0.95rem vaut 15,2 px : en dessous,
     la lecture d'un paragraphe sur téléphone devient pénible, et iOS
     zoome de lui-même sur les champs de formulaire. */
  body, p, li, td, th,
  .service-desc p, .service-desc li,
  .faq-wrap .accordion-body p {
    font-size: clamp(0.95rem, 3.9vw, 1rem) !important;
    line-height: 1.68 !important;
  }

  /* Les paragraphes portant une taille en style inline, héritée de
     l'ancienne maquette, sont ramenés dans l'échelle. */
  p[style*="font-size"], span[style*="font-size"] {
    font-size: clamp(0.95rem, 3.9vw, 1rem) !important;
  }

  /* Mentions légales, notes de bas de bloc, sources : un seul cran
     en dessous du corps, jamais deux. */
  small, .jur-note, figcaption, .text-muted {
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
  }

  /* Le texte justifié creuse des rivières blanches sur une colonne
     étroite. En vertical, on aligne à gauche. */
  .service-desc p, .service-desc li,
  article .single-para, .service-desc .single-para,
  .project-desc .single-para, .terms-wrap .single-para,
  .faq-wrap .accordion-body p {
    text-align: left !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }
}


/* ===================================================================
   2. BOUTONS ET APPELS À L'ACTION — AFFICHAGE VERTICAL
   -------------------------------------------------------------------
   Dans le héros, « Prendre rendez-vous » et « Simuler ma réduction
   d'impôts » étaient côte à côte. À 375 px, le second débordait de son
   cadre et se coupait en deux lignes mal alignées. Empilés, chacun
   occupe toute la largeur et reste cliquable d'un pouce.
   =================================================================== */
@media (max-width: 767px) {

  .hero-btn {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .hero-btn .btn,
  .hero-btn .link {
    width: 100%;
    margin: 0 !important;
    justify-content: center;
    text-align: center;
  }
  .hero-btn .link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
  }

  /* Hauteur de frappe confortable : 44 px est le minimum retenu par
     les recommandations d'accessibilité pour une cible tactile. */
  .btn, .link, .hero-social-btn, .social-follow-btn, button.close-btn {
    min-height: 44px;
    font-size: 0.95rem !important;
  }
  .btn, .social-follow-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}


/* ===================================================================
   3. IMAGES ET BLOCS — RYTHME VERTICAL RÉGULIER
   -------------------------------------------------------------------
   Les images arrivaient dans toutes les proportions. On leur impose
   un cadre constant, pour que le défilement ne fasse plus d'à-coups.
   =================================================================== */
@media (max-width: 991px) {

  .single-img img,
  .galerie img,
  .destination-photos img,
  .service-desc .single-img img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px;
  }

  /* Les schémas et captures d'écran ne doivent pas être recadrés :
     on les affiche en entier, sur une plaque claire. */
  .galerie.schemas img {
    object-fit: contain !important;
    background: #fff;
    padding: 8px;
  }

  /* Logos : même hauteur pour tous, quelle que soit la source. */
  .partenaire-logo img,
  .pays-logos img {
    height: 44px !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
  }

  /* Un bloc partenaire passe en pile : logo au-dessus, texte dessous. */
  .partenaire-bloc {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
  .partenaire-logo {
    justify-content: flex-start !important;
  }

  /* Espacement vertical constant entre les blocs de contenu. */
  .single-para, .partenaire-bloc, .juridiction, .destination {
    margin-bottom: 26px !important;
  }

  /* Les tableaux larges défilent dans leur cadre plutôt que de pousser
     la page entière vers la droite. */
  .tableau-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  .tableau-wrap table { min-width: 460px; }

  /* Marge latérale identique partout : 16 px. */
  .container, .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ===================================================================
   4. THÈME SOMBRE
   -------------------------------------------------------------------
   Les couleurs passent par des variables, pour que le clair et le
   sombre partagent exactement la même structure.

   Le fond sombre n'est pas noir mais un bleu très profond, dérivé du
   bleu de marque : sur un écran OLED, le noir pur crée des bords trop
   tranchés, et le bleu conserve l'identité du cabinet.
   =================================================================== */
:root {
  --fondPage: #ffffff;
  --fondSurface: #ffffff;
  --fondDoux: #f5f7fc;
  --texteFort: #132849;
  --texteCourant: #6A788C;
  --accentMarque: #0c0c78;
  --accentVif: #2295FF;
  --bordure: #e3e8f2;
  --plaqueLogo: transparent;
}

/* Le site refusait le thème sombre par un color-scheme "light only",
   posé ici et dans la balise meta de chaque page. Les deux sont
   désormais ouverts aux deux thèmes. */
:root,
html, body {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondPage: #0b0f1e;
    --fondSurface: #141a30;
    --fondDoux: #111831;
    --texteFort: #eef1f8;
    --texteCourant: #a9b4c9;
    /* Le bleu de marque est trop sombre pour du texte sur fond sombre.
       On garde sa teinte en montant fortement la luminosité : le lien
       reste reconnaissable, et le contraste passe les seuils WCAG AA. */
    --accentMarque: #93a8ff;
    --accentVif: #5aacff;
    --bordure: #27304d;
    --plaqueLogo: #ffffff;
  }

  html, body {
    background-color: var(--fondPage) !important;
    color: var(--texteCourant) !important;
  }

  /* --- Surfaces ------------------------------------------------- */
  .bg-white, .bg-optional, .bg-trasnparent,
  section, .card, .card-wrap, .widget-wrap, .faq-wrap,
  .single-feature-box, .feature-box, .feature-item,
  .partenaire-bloc, .juridiction, .destination,
  .counter-wrap, .contact-wrap, .process-wrap, .option-item,
  .accordion-item, .accordion-button, .accordion-body,
  .review-badge, .bloc-zerotax {
    background-color: var(--fondSurface) !important;
    border-color: var(--bordure) !important;
  }
  .bg-optional, .tableau-wrap {
    background-color: var(--fondDoux) !important;
  }

  /* --- Texte ---------------------------------------------------- */
  h1, h2, h3, h4, h5, h6,
  .section-title h2, .service-desc h1, .service-desc h2,
  .service-desc h3, .service-desc h4, .service-desc h5, .service-desc h6,
  .text-title, strong, b, th {
    color: var(--texteFort) !important;
  }
  p, li, td, span, .section-subtitle, .text-muted, small, figcaption {
    color: var(--texteCourant) !important;
  }
  .service-desc strong, .service-desc b {
    color: var(--accentMarque) !important;
  }

  /* 188 éléments du site portent la couleur de marque en style inline.
     Un style inline ne se laisse pas remplacer autrement qu'avec
     !important : on cible donc l'attribut lui-même. Sur fond sombre,
     ce bleu nuit serait illisible. */
  [style*="color:#0c0c78"],
  [style*="color: #0c0c78"],
  [style*="color:#0C0C78"] {
    color: var(--accentMarque) !important;
  }

  /* --- Liens ---------------------------------------------------- */
  a { color: var(--accentMarque); }
  .service-desc p > a:not(.link):not(.btn) {
    color: var(--accentMarque) !important;
    border-bottom-color: var(--accentMarque) !important;
  }

  /* --- Tableaux ------------------------------------------------- */
  .service-desc table.tableau thead th {
    background: #1b2342 !important;
    color: var(--texteFort) !important;
  }
  .service-desc table.tableau td,
  .service-desc table.tableau th {
    border-color: var(--bordure) !important;
    color: var(--texteCourant) !important;
  }
  .service-desc table.tableau tbody tr:nth-child(even) td {
    background: #0f152b !important;
  }

  /* --- Logos partenaires --------------------------------------- */
  /* Ces fichiers sont dessinés pour un fond blanc : un logo en lettres
     noires sur fond transparent devient invisible en thème sombre. On
     glisse une plaque blanche derrière, avec un peu de marge pour que
     le logo ne touche pas le bord. */
  .partenaire-logo,
  .pays-logos img,
  .brand-logo img,
  .brand-slider img,
  .galerie.schemas img,
  .review-badge-logo {
    background: var(--plaqueLogo) !important;
    border-radius: 8px;
    padding: 6px;
    box-sizing: border-box;
  }
  .partenaire-logo { display: inline-flex; }

  /* --- En-tête, menu, pied de page ------------------------------ */
  header, .navbar, .header-wrap, .responsive-navbar,
  .offcanvas, .offcanvas-header, .offcanvas-body,
  .dropdown-menu, footer, .footer-wrap {
    background-color: var(--fondSurface) !important;
    border-color: var(--bordure) !important;
  }
  .nav-item > a, .responsive-menu a, .dropdown-item,
  footer a, footer p, footer li {
    color: var(--texteCourant) !important;
  }
  .nav-item > a:hover, .dropdown-item:hover, footer a:hover {
    color: var(--accentMarque) !important;
  }

  /* --- Bandeau cookies et flotteur WhatsApp -------------------- */
  .cookie-wrap, .cookie-banner, #cookie-banner,
  .whatsapp-float-label {
    background-color: var(--fondSurface) !important;
    color: var(--texteCourant) !important;
    border-color: var(--bordure) !important;
  }

  /* --- Champs de formulaire ------------------------------------ */
  input, textarea, select {
    background-color: var(--fondDoux) !important;
    color: var(--texteFort) !important;
    border-color: var(--bordure) !important;
  }
  input::placeholder, textarea::placeholder {
    color: #7d879c !important;
  }

  /* --- Images de décor ----------------------------------------- */
  /* Les illustrations claires du héros sont un peu agressives sur fond
     sombre. Une très légère atténuation suffit, sans les ternir. */
  .hero-shape-one, .hero-shape-two, .section-shape {
    opacity: 0.85;
  }

  /* Le badge « 0 % de taxe » garde sa lisibilité. */
  .badge-zerotax {
    background: #1b2342 !important;
    color: var(--texteFort) !important;
  }
}


/* ===================================================================
   5. RESPECT DU RÉGLAGE « MOUVEMENT RÉDUIT »
   -------------------------------------------------------------------
   Les animations d'apparition au défilement sont agréables sur un
   grand écran, désagréables pour qui souffre du mal des transports ou
   a simplement demandé moins de mouvement dans ses réglages.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===================================================================
   6. THÈME SOMBRE — LE HÉROS
   -------------------------------------------------------------------
   Le bloc d'accueil ne se traite pas comme les autres. Son fond blanc
   est posé sur un div et non sur une balise section, et une grande
   photo de tissu clair le recouvre en position absolue. Résultat au
   premier essai : le titre passait en clair, la photo restait claire,
   et le texte devenait illisible.

   On assombrit donc le fond, et on atténue la photo au lieu de la
   supprimer : elle garde son rôle de texture, sans éclairer la page.
   =================================================================== */
@media (prefers-color-scheme: dark) {

  .hero-section,
  .hero-section.style-three,
  .breadcrumb-wrap,
  .hero-wrap {
    background-color: var(--fondPage) !important;
  }

  /* La photo de fond du héros : très atténuée et légèrement assombrie,
     pour qu'il reste une texture derrière le titre sans que le blanc
     du tissu ne remonte. */
  .hero-circle-shape {
    opacity: 0.16 !important;
    filter: brightness(0.55) saturate(0.7);
  }

  /* Le bouton de téléphone et les pastilles d'avis étaient des cartes
     blanches : elles deviennent des cartes sombres, avec une bordure
     pour rester détachées du fond. */
  .hero-phone,
  .review-badge,
  .mission-wrap,
  .hero-location {
    background-color: var(--fondSurface) !important;
    border: 1px solid var(--bordure) !important;
  }
  .hero-phone, .hero-phone-number, .hero-phone-icon {
    color: var(--texteFort) !important;
  }
  .review-badge-label, .mission-right p, .hero-location span {
    color: var(--texteCourant) !important;
  }

  /* Le chiffre clé du compteur : il portait la couleur de marque et
     se fondait dans le fond sombre. */
  .mission-wrap h6, .counter-wrap h2, .counter-wrap h3 {
    color: var(--accentMarque) !important;
  }

  /* Les illustrations du héros et les vignettes décoratives gardent
     leurs couleurs mais perdent un peu d'éclat. */
  .hero-img-one, .hero-img-two,
  .hero-img-wrap > img {
    filter: brightness(0.9) contrast(1.02);
  }

  /* L'étiquette « Gestion de patrimoine » au-dessus du titre était un
     cartouche bleu très clair. */
  .hero-content > span.d-inline-block {
    background-color: #1b2342 !important;
    color: var(--texteFort) !important;
  }
}


/* ===================================================================
   7. THÈME SOMBRE — LIENS BOUTONNÉS ET CONTRASTES RESTANTS
   -------------------------------------------------------------------
   La classe .link porte sa propre couleur, plus spécifique qu'une
   règle sur « a » : il faut la viser directement, sinon le bleu nuit
   reste posé sur le fond sombre, soit un contraste de 1,3 pour 1 là
   où la norme WCAG AA demande 4,5.
   =================================================================== */
@media (prefers-color-scheme: dark) {

  .link, .link.style-one, a.link,
  .text-title, a.text-title {
    color: var(--accentMarque) !important;
  }
  .link img, .link svg {
    filter: brightness(2.2) saturate(0.6);
  }

  /* Les boutons pleins gardent leur fond vif et leur texte blanc :
     le contraste y est déjà bon, on n'y touche pas. */
  .btn.style-one, .btn.style-one:hover {
    color: #fff !important;
  }

  /* Bordures et séparateurs : invisibles en sombre s'ils restent
     clairs, criards s'ils restent blancs. */
  hr, .border, .border-top, .border-bottom,
  .accordion-item, .partenaire-bloc, .juridiction, .destination {
    border-color: var(--bordure) !important;
  }

  /* Le fond très clair utilisé comme respiration entre deux sections. */
  .bg-99, .bg-f7, [class*="bg-f"], [style*="background:#f7f9fd"],
  [style*="background: #f7f9fd"], [style*="background:#f5f7fc"] {
    background-color: var(--fondDoux) !important;
  }

  /* Pictogrammes sur plaque claire. */
  .feature-item img, .option-item img, .process-wrap img {
    filter: brightness(1.08);
  }
}


/* ===================================================================
   8. THÈME SOMBRE — CORRECTIONS DE CONTRASTE MESURÉES
   -------------------------------------------------------------------
   Relevé automatique sur la page d'accueil : onze éléments passaient
   sous le seuil WCAG AA de 4,5 pour 1. Trois causes, trois correctifs.
   =================================================================== */
@media (prefers-color-scheme: dark) {

  /* a) Le texte des boutons pleins. La règle générale sur « span »
        l'avait teinté en gris clair, soit 1,5 pour 1 sur le bleu vif.
        Un bouton plein garde toujours son texte blanc. */
  .btn, .btn span, .btn *,
  .social-follow-btn, .social-follow-btn * {
    color: #fff !important;
  }

  /* b) Les surtitres de section. Ce sont des pastilles sur fond cyan
        très clair, que rien n'assombrissait : le texte clair devenait
        illisible, à 1,1 pour 1. La pastille passe en bleu profond. */
  .section-subtitle {
    background-color: #1b2342 !important;
    color: var(--accentMarque) !important;
  }

  /* c) Le bouton flottant WhatsApp garde sa carte blanche, qui fait
        partie de son identité. On y remet donc du texte sombre plutôt
        que d'inverser la carte. */
  .whatsapp-float-link,
  .whatsapp-float-link .whatsapp-float-text,
  .whatsapp-float-text {
    color: #132849 !important;
  }

  /* d) Le bandeau cookies : le texte doit rester lisible sur sa carte,
        quelle que soit la couleur retenue pour cette carte. */
  .cookie-wrap p, #cookie-banner p, .cookie-wrap,
  .cookie-wrap span, #cookie-banner span {
    color: var(--texteFort) !important;
  }
}


/* ===================================================================
   9. THÈME SOMBRE — DERNIERS AJUSTEMENTS
   -------------------------------------------------------------------
   Deux cas que les règles précédentes ne couvraient pas.

   Les boutons du menu latéral : ils sont imbriqués dans
   « .responsive-menu », dont la règle de couleur est plus spécifique
   que « .btn ». Avec deux déclarations !important, c'est la
   spécificité qui tranche, et le gris du menu gagnait sur le blanc du
   bouton. On remonte donc la spécificité du bouton.

   Le bandeau cookies : son conteneur est un identifiant,
   « #cookiePopup », et non une classe. Un identifiant l'emporte sur
   toute classe, il faut le nommer tel quel.
   =================================================================== */
@media (prefers-color-scheme: dark) {

  .responsive-menu a.btn,
  .responsive-menu a.btn span,
  .offcanvas a.btn,
  .offcanvas a.btn span,
  header a.btn, header a.btn span,
  .navbar a.btn, .navbar a.btn span {
    color: #fff !important;
  }

  /* Le bleu vif donne un rapport de 3,1 pour 1 avec du texte blanc.
     Assombri de deux crans, il atteint 4,6 et passe le seuil AA sans
     cesser d'être le bleu du cabinet. */
  .btn.style-one, .btn.style-four, .social-follow-btn {
    background-color: #0f6ed0 !important;
  }

  #cookiePopup {
    background-color: var(--fondSurface) !important;
    border: 1px solid var(--bordure) !important;
  }
  #cookiePopup p, #cookiePopup span {
    color: var(--texteFort) !important;
  }
  #cookiePopup a {
    color: var(--accentMarque) !important;
  }
}


/* ===================================================================
   10. FLÈCHES DESSINÉES EN PSEUDO-ÉLÉMENTS
   -------------------------------------------------------------------
   Quatre règles du site affichaient une flèche en écrivant le point de
   code d'un glyphe de Remix Icon, par exemple content: "\ea4d" avec
   font-family: remixicon. La police complète n'étant plus téléchargée,
   le navigateur n'avait plus ce glyphe et dessinait le rectangle vide
   réservé aux caractères manquants : c'est le petit carré qui
   apparaissait à côté de « Particulier » et « Entreprise ».

   Les quatre flèches sont redessinées en CSS pur : une boîte carrée
   dont on ne garde que deux bordures, pivotée de 45°. Net à toute
   taille, suit la couleur du texte, rien à télécharger.

   Détail qui a coûté une recherche : le chevron du menu principal est
   un :before, pas un :after. Les deux existent sur le même élément.
   =================================================================== */

/* Chevron vers le bas — entrées du menu principal */
.navbar-area .navbar .navbar-nav > .nav-item > .nav-link.dropdown-toggle:before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border: 0 solid currentColor !important;
  border-right-width: 2px !important;
  border-bottom-width: 2px !important;
  background: none !important;
  transform: rotate(45deg);
  bottom: 40px !important;
  right: 1px !important;
}

/* Chevron vers la droite — sous-entrées du menu déroulant */
.navbar-area .navbar .navbar-nav .nav-item .dropdown-menu .nav-item .nav-link.dropdown-toggle:before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border: 0 solid currentColor !important;
  border-top-width: 2px !important;
  border-right-width: 2px !important;
  background: none !important;
  transform: rotate(45deg);
  top: 20px !important;
  bottom: auto !important;
}

/* Chevron vers le bas — menu de la version mobile */
.responsive-navbar .offcanvas-body ul.responsive-menu .responsive-menu-list > a:after {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border: 0 solid currentColor !important;
  border-right-width: 2px !important;
  border-bottom-width: 2px !important;
  background: none !important;
  transform: translateY(-50%) rotate(45deg) !important;
}

/* Flèche vers le haut — bouton de retour en haut de page */
.progress-wrap::after {
  content: "" !important;
  font-family: inherit !important;
  width: 9px !important;
  height: 9px !important;
  border: 0 solid currentColor !important;
  border-top-width: 2px !important;
  border-left-width: 2px !important;
  background: none !important;
  transform: translate(-50%, -30%) rotate(45deg) !important;
  left: 50% !important;
  top: 50% !important;
  line-height: 1 !important;
}


/* ===================================================================
   11. THÈME SOMBRE — ÉTOILES D'AVIS ET FLÈCHE DU LIEN
   -------------------------------------------------------------------
   Relevé sur le site en ligne. La règle générale qui éclaircit le texte
   des « span » attrapait aussi le conteneur des étoiles : les cinq
   étoiles dorées de l'avis Google devenaient grises. Elles reprennent
   leurs couleurs d'origine, l'or de Google et le vert de Trustpilot.

   La flèche qui suit « Simuler ma réduction d'impôts » est une image
   bleu nuit : sur fond sombre, elle disparaissait presque. On la passe
   dans la teinte claire des liens.
   =================================================================== */
@media (prefers-color-scheme: dark) {

  .review-badge-stars,
  .hero-section.style-three .hero-content .review-badge-stars {
    color: #ffb400 !important;
  }
  .review-badge-stars--tp,
  .hero-section.style-three .hero-content .review-badge-stars--tp {
    color: #00b67a !important;
  }

  .link img, .link.style-one img {
    filter: brightness(0) invert(1) sepia(1) hue-rotate(190deg) saturate(2.5) brightness(0.95) !important;
  }
}


/* ===================================================================
   12. TITRE PRINCIPAL DE LA PAGE D'ACCUEIL
   -------------------------------------------------------------------
   Le H1 est l'un des signaux les plus lus par Google pour comprendre le
   sujet d'une page. Celui de l'accueil disait « Investissez dans votre
   avenir », sans aucun des mots qu'un internaute tape réellement.

   L'étiquette « Gestion de patrimoine » qui le surmontait était un
   span séparé : elle est passée À L'INTÉRIEUR du H1, complétée par
   « à Paris ». Google lit désormais « Gestion de patrimoine à Paris
   Investissez dans votre avenir ». Les règles ci-dessous redonnent à
   l'étiquette exactement son ancien aspect, pour que le changement
   soit invisible à l'écran : seul « à Paris » s'ajoute.
   =================================================================== */
.hero-section.style-three .hero-content h1 .hero-surtitre {
  display: table;
  margin: 0 0 14px;
  border-radius: 50px;
  padding: 7px 30px 4px;
  background: #d2f9ff;
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
  color: #0c0c78;
  font-family: var(--primaryFont) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  letter-spacing: normal !important;
}
@media (prefers-color-scheme: dark) {
  .hero-section.style-three .hero-content h1 .hero-surtitre {
    background-color: #1b2342 !important;
    color: var(--texteFort) !important;
  }
}


/* ===================================================================
   13. VISUELS DE LOGOS : JAMAIS RECADRÉS
   -------------------------------------------------------------------
   Les photos des pages de contenu sont toutes ramenées au format 16:9
   (section 3 et style.css), pour un défilement régulier. Ce recadrage
   convient à une photo, pas à un assemblage de logos : il coupait le
   haut et le bas des visuels « PER, Girardin, FIP-FCPI » et « LMNP,
   Malraux, Monuments historiques ». Ces visuels gardent leurs
   proportions et s'affichent en entier.
   =================================================================== */
.service-desc .single-img img.visuel-logos {
  aspect-ratio: auto !important;
  object-fit: contain !important;
  height: auto !important;
  background: #fff;
}


/* ===================================================================
   14. GRILLE DES PROMOTEURS PARTENAIRES (page Immobilier)
   -------------------------------------------------------------------
   Trois logos par ligne, chacun dans une carte blanche de même taille.
   Les fichiers sont tous au gabarit 420 x 150 des logos partenaires du
   site : la grille reste alignée quelle que soit la forme du logo.
   =================================================================== */
.logos-promoteurs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 6px 0 28px;
}
.logos-promoteurs img {
  width: 100%;
  height: auto;
  aspect-ratio: 420 / 150;
  object-fit: contain;
  background: #fff;
  border: 1px solid #e3e8f2;
  border-radius: 10px;
  box-sizing: border-box;
}
@media (max-width: 575px) {
  .logos-promoteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (prefers-color-scheme: dark) {
  .logos-promoteurs img { border-color: var(--bordure); }
}


/* ===================================================================
   15. BANDEAU DE LA PAGE IMMOBILIER
   -------------------------------------------------------------------
   La photo du bandeau (.br-bg-1) est partagée avec la page
   Particuliers : on ne la remplace donc que sur la page Immobilier,
   par une classe dédiée. La photo est cadrée sur son centre pour que
   l'immeuble reste entier dans la forme arrondie du bandeau.
   =================================================================== */
.breadcrumb-wrap .br-bg.br-bg-immobilier {
  background-image: url(../img/breadcrumb/br-immobilier.webp);
  background-size: cover;
  background-position: center;
}


/* ===================================================================
   16. LOGOS DES PARTENAIRES PER (page Réduction d'impôts)
   -------------------------------------------------------------------
   Quatre logos en ligne sous la description du PER, plus petits que
   ceux de la grille des promoteurs : ils illustrent un bloc, ils ne
   forment pas une section à eux seuls.
   =================================================================== */
.logos-per {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
  margin-top: .4rem;
}
.logos-per img {
  width: 100%;
  height: auto;
  aspect-ratio: 420 / 150;
  object-fit: contain;
  background: #fff;
  border: 1px solid #e3e8f2;
  border-radius: 8px;
  box-sizing: border-box;
}
@media (max-width: 575px) {
  .logos-per { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Ligne des partenaires PER : cinq logos depuis l'ajout d'Eres. */
.logos-per { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 680px; }
@media (max-width: 575px) { .logos-per { grid-template-columns: repeat(3, minmax(0, 1fr)); } }