/* =========================================================
   Personnalisations — Votre Crédit Rapide
   Chargé après style.css
   ========================================================= */

/* ---------- Sélecteur de langue ---------- */
.lang-switcher {
  position: relative;
  margin-right: 12px;
}

/* Par défaut (header opaque, ou navbar collée) : texte sombre sur fond clair */
.lang-switcher__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 999px;
  background: rgba(0, 0, 0, .04);
  backdrop-filter: blur(6px);
  color: var(--color-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.lang-switcher__toggle:hover,
.lang-switcher__toggle[aria-expanded="true"] {
  background: rgba(0, 0, 0, .08);
  border-color: rgba(0, 0, 0, .28);
}

/* Header transparent NON collé : la pastille est posée sur l'image du slider.
   `color: inherit` y donnait du texte sombre sur fond sombre — donc illisible.
   On force le blanc, avec un fond assombri pour tenir sur une image claire. */
.header-transparent .navbar:not(.is-sticky) .lang-switcher__toggle {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(0, 0, 0, .32);
  color: #fff;
}

.header-transparent .navbar:not(.is-sticky) .lang-switcher__toggle:hover,
.header-transparent .navbar:not(.is-sticky) .lang-switcher__toggle[aria-expanded="true"] {
  border-color: #fff;
  background: rgba(0, 0, 0, .48);
}

.header-transparent .navbar:not(.is-sticky) .lang-switcher__caret {
  opacity: 1;
}

.lang-switcher__flag {
  display: block;
  width: 20px;
  height: 14px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  flex-shrink: 0;
}

.lang-switcher__flag svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lang-switcher__caret {
  transition: transform .25s ease;
  opacity: .7;
}

.lang-switcher__toggle[aria-expanded="true"] .lang-switcher__caret {
  transform: rotate(180deg);
}

.lang-switcher__menu.dropdown-menu {
  min-width: 190px;
  padding: 6px;
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .14);
  inset: auto 0 auto auto;
}

.lang-switcher__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  color: #1b1b1b;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.lang-switcher__item:hover {
  background: rgba(0, 0, 0, .05);
  color: #1b1b1b;
}

.lang-switcher__item.is-active {
  background: rgba(0, 0, 0, .06);
  font-weight: 600;
}

.lang-switcher__item .lang-switcher__code {
  font-weight: 600;
  letter-spacing: .04em;
}

.lang-switcher__item .lang-switcher__name {
  margin-left: auto;
  font-size: 12px;
  opacity: .55;
}

@media (max-width: 575px) {
  .lang-switcher__toggle .lang-switcher__code {
    display: none;
  }
}

/* ---------- Couleurs ---------- */

/* Gris de texte par défaut assombri : #9b9b9b -> #323131.
   Ces deux variables sont les seules sources de cette couleur dans le
   template (aucune occurrence en dur), et --desc-color en hérite. */
:root {
  --color-default: #323131;
  --bs-gray: #323131;
}

/* ---------- Typographie globale ---------- */

/* Interlignage resserré (le template applique 1.7 aux paragraphes) */
p {
  line-height: 1.4;
}

/* ---------- Boutons ---------- */

/* Gabarit réduit : le template dimensionne via --btn-height et le padding */
.btn:not(.btn-link) {
  --btn-height: 46px;
  padding-left: 22px;
  padding-right: 22px;
  font-size: 14px;
}

.btn.btn-xl:not(.btn-link) {
  --btn-height: 52px;
}

/* ---------- En-tête ---------- */

/* Le template prévoit 100px au repos et 80px en état collé.
   --navbar-height pilote aussi la hauteur de ligne du logo et des liens :
   la surcharger suffit, tout reste centré verticalement. */
.navbar {
  --navbar-height: 72px;
}

.navbar.is-sticky,
.is-sticky {
  --navbar-height: 58px;
}

.navbar .navbar-brand img {
  max-width: 172px;
  /* Garde-fou : le logo (ratio ~4,3:1) ne doit pas déborder la navbar réduite,
     y compris en état collé (58px). 40px de haut laisse une marge de part
     et d'autre. */
  max-height: 40px;
  width: auto;
  height: auto;
}

@media (max-width: 991px) {
  .navbar .navbar-brand img {
    max-width: 150px;
    max-height: 36px;
  }
}

/* Bouton « Demander mon crédit » de l'en-tête.
   Le template le cale à 50px de haut et 150px de large minimum ; on le
   resserre pour rester proportionné à la navbar réduite. La règle globale
   .btn:not(.btn-link) est plus spécifique que .action-btn-contact, d'où
   le sélecteur descendant pour reprendre la main. */
.navbar-actions .action-btn-contact {
  --btn-height: 38px;
  --btn-min-width: 0;
  --bs-btn-padding-x: 14px;
  min-width: 0;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13px;
}

/* Espacement entre le sélecteur de langue et le bouton */
.navbar-actions {
  --action-btn-space: 14px;
}

@media (max-width: 991px) {
  .header .navbar,
  .header-transparent .navbar {
    --navbar-height: 62px;
  }
}

/* ---------- Slider d'accueil ---------- */

/* Le template ne dégage le header transparent qu'au-dessus de 992px
   (.header-transparent + .slider .slide-item { padding-top: 100px }).
   En dessous, aucun padding n'est prévu : le header recouvre le haut de la
   slide et le titre passe dessous. On rétablit le dégagement sur mobile,
   calé sur la navbar de 62px + une marge de respiration. */
@media (max-width: 991px) {
  .header-transparent + .slider .slide-item {
    padding-top: 100px;
    padding-bottom: 50px;
    height: auto;
    min-height: 520px;
  }
}

@media (max-width: 575px) {
  .header-transparent + .slider .slide-item {
    padding-top: 90px;
    min-height: 460px;
  }
}

/* ---------- Bannière de page intérieure ---------- */

/* Le template réserve 280px de padding haut pour dégager un header
   transparent, et 130px entre le titre et le fil d'Ariane. Nos pages
   intérieures utilisent le header opaque : cet espace est perdu. */
[class*=page-title] {
  --section-padding: 140px 0 30px;
  --heading-font-size: 42px;
}

.page-title-layout1 {
  --heading-margin: 0 0 14px;
}

/* Le template remonte de -100px ce qui suit un header transparent, valeur
   calée sur l'ancienne navbar de 100px. Elle doit suivre la nouvelle hauteur,
   sinon le haut du slider et des bannières est rogné de 28px. */
@media (min-width: 992px) {
  .header-transparent + [class*=page-title],
  .header-transparent + .slider {
    margin-top: -72px;
  }

  .header-transparent + [class*=page-title] {
    --section-padding: 190px 0 30px;
  }
}

@media (max-width: 991px) {
  [class*=page-title] {
    --section-padding: 110px 0 25px;
    --heading-font-size: 32px;
  }
}

@media (max-width: 575px) {
  [class*=page-title] {
    --heading-font-size: 26px;
  }
}

/* ---------- Bannière « notre métier » (accueil) ---------- */

/* L'image de droite est décalée vers le bas de 300px (200px sous 1200px)
   pour créer le décrochage du template. La colonne de gauche ayant été
   raccourcie (titres réduits), on remonte l'image en conséquence. */
.banner-layout13 {
  --video-margin-top: 140px;
  --video-margin-inline: auto;
}

/* Au-delà de 1500px le template plafonne l'image à 700px ET la décale de
   -100px vers la gauche : elle n'est donc plus centrée dans sa colonne.
   `auto` de chaque côté la recentre. */
@media (min-width: 1500px) {
  .banner-layout13 {
    --video-margin-inline: auto;
  }

  .banner-layout13 .video-banner {
    margin-inline: auto;
  }
}

/* Images de bannière centrées dans leur colonne */
.banner-img {
  margin-inline: auto;
}

.banner-img > img,
.video-banner > img {
  display: block;
  margin-inline: auto;
}

@media (max-width: 1199px) {
  .banner-layout13 {
    --video-margin-top: 90px;
  }
}

@media (max-width: 991px) {
  .banner-layout13 {
    --video-margin-top: 40px;
  }
}


/* Le titre passe en 40px via .heading-layout2 et déborde sur trois lignes
   dans cette colonne (col-xl-7 avec 100px de padding à droite). On le réduit
   uniquement ici, sur desktop, pour le tenir sur deux lignes. */
@media (min-width: 1200px) {
  .banner-layout13 .heading-layout2 {
    --heading-title-font-size: 30px;
  }

  .banner-layout13 .heading-title {
    line-height: 1.3;
  }
}

/* ---------- Bannière « Concrétisez votre projet » (accueil) ---------- */

/* La colonne est plafonnée à 500px par .mw-500 : à 40px, le titre déborde
   sur trois lignes. .mw-500 n'existe qu'ici, le ciblage n'affecte donc pas
   les bannières banner-layout1 de /vos-projets et /qui-sommes-nous. */
@media (min-width: 1200px) {
  .banner-layout1 .banner-text.mw-500 .heading-layout2 {
    --heading-title-font-size: 30px;
  }

  .banner-layout1 .banner-text.mw-500 .heading-title {
    line-height: 1.3;
  }
}

/* ---------- Pied de page ---------- */

/* `body` hérite de --bs-gray, assombri en #323131 : sur le fond #161616 du
   footer, les éléments sans couleur propre (footer-widget-desc, paragraphes)
   devenaient illisibles. On rétablit une couleur claire héritable ici ;
   les règles qui fixent déjà une couleur (liens en blanc, copyright en
   gris 300) restent prioritaires et ne bougent pas. */
.footer {
  color: var(--color-gray-300);
}

.footer p,
.footer .footer-widget-desc,
.footer li {
  color: var(--color-gray-300);
}

.footer .footer-widget-nav .footer-nav-list li a,
.footer .contact-list li a {
  color: var(--color-white);
}

/* « Parlons de votre projet » : le template le rend en 90px, trop imposant ici.
   On surcharge la variable plutôt que le font-size, pour que la flèche
   (qui utilise la même variable pour width/height) reste proportionnée. */
.footer .contatct-text {
  --text-font-size: 30px;
}

@media (max-width: 991px) {
  .footer .contatct-text {
    --text-font-size: 22px;
  }
}

/* Titre de colonne rapproché de sa liste */
.footer .footer-widget-title {
  margin-bottom: 12px;
}

/* Liens de menu resserrés. */
.footer .footer-nav-list li {
  margin-bottom: 4px;
  line-height: 1.3;
}

/* Sélecteur complet repris du template : `.footer .footer-nav-list li a`
   (0,2,2) ne pouvait pas battre `.footer .footer-widget-nav .footer-nav-list
   li a` (0,3,2), qui impose margin-bottom: 11px.

   IMPORTANT — multilingue : PAS de `white-space: nowrap`. Les libellés
   traduits (DE « Kredit ohne Einkommensnachweis », EN « Credit without proof
   of income ») sont plus longs que le français et, forcés sur une ligne,
   débordaient sur la colonne voisine. On autorise le retour à la ligne et on
   coupe les mots trop longs plutôt que de laisser fuir le texte. */
.footer .footer-widget-nav .footer-nav-list li a {
  display: inline-block;
  position: relative;
  color: var(--color-white);
  font-size: var(--nav-link-size);
  padding-bottom: 2px;
  margin-bottom: 2px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}

/* Intitulé textuel placé dans un bloc « counter » : le template dimensionne
   .counter-number pour des chiffres, beaucoup trop gros pour une phrase. */
.counter-number--text {
  font-size: 22px;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .counter-number--text {
    font-size: 18px;
  }
}

/* Territoires éligibles en pied de page */
.footer-pays {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 0 0;
  color: var(--color-gray-300);
  font-size: 13px;
  line-height: 1.6;
}

.footer-pays i {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
  font-size: 15px;
}

/* Mention légale crédit en pied de page */
.footer-mention-credit {
  padding: 18px 0 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: .75;
}

/* ---------- Simulateur de crédit ---------- */
.simulateur {
  padding: 34px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
}

.simulateur__champ {
  margin-bottom: 26px;
}

.simulateur__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
}

.simulateur__valeur {
  font-size: 20px;
  font-weight: 700;
}

.simulateur input[type="range"] {
  width: 100%;
  height: 4px;
  appearance: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, .1);
  outline: none;
}

.simulateur input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.simulateur input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.simulateur__resultat {
  margin-top: 30px;
  padding: 26px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .04);
  text-align: center;
}

.simulateur__mensualite {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
}

.simulateur__detail {
  margin-top: 8px;
  font-size: 14px;
  opacity: .65;
}

.simulateur__mention {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.6;
  opacity: .55;
}

/* ---------- Simulateur : comparateur de durées ---------- */
.simulateur-grid-resultats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.simulateur-resultat-case {
  padding: 18px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .04);
}

.simulateur-resultat-case.is-principal {
  grid-column: 1 / -1;
  text-align: center;
}

.simulateur-resultat-label {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  opacity: .65;
}

.simulateur-resultat-valeur {
  display: block;
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.simulateur-resultat-case.is-principal .simulateur-resultat-valeur {
  font-size: 40px;
}

.simulateur-tableau-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.simulateur-tableau {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 15px;
}

.simulateur-tableau th,
.simulateur-tableau td {
  padding: 14px 16px;
  text-align: right;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  white-space: nowrap;
}

.simulateur-tableau th:first-child,
.simulateur-tableau td:first-child {
  text-align: left;
}

.simulateur-tableau thead th {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .7;
}

.simulateur-tableau tbody tr.is-reference {
  background: rgba(46, 160, 87, .10);
  font-weight: 600;
}

.simulateur-check {
  display: inline-block;
  margin-right: 8px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  background: #2ea057;
}

.simulateur-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  background: rgba(0, 0, 0, .08);
}

.simulateur-badge.is-reference {
  color: #1c6b39;
  background: rgba(46, 160, 87, .20);
}

.simulateur-encadre {
  margin-top: 30px;
  padding: 24px 26px;
  border-radius: 14px;
  border-left: 3px solid currentColor;
  background: rgba(0, 0, 0, .04);
}

.simulateur-encadre p:last-child {
  margin-bottom: 0;
}

.simulateur-exemple-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.simulateur-exemple-liste li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.simulateur-exemple-liste li:last-child {
  border-bottom: 0;
}

.simulateur-exemple-liste li strong {
  font-weight: 700;
}

@media (max-width: 575px) {
  .simulateur-grid-resultats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   Simulateur — refonte premium (ajout, ne modifie rien au-dessus)
   Deux panneaux de hauteur identique, alignés ligne à ligne :
   colonnes étirées (align-items-stretch) + panneau en flex column
   à height:100%, le corps prenant l'espace restant.
   ========================================================= */

.simulateur--parametres,
.simulateur--resultats {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px;
  border-radius: 20px;
  overflow: hidden;
}

/* Titres symétriques des deux colonnes : même hauteur, même filet */
.simulateur__titre {
  flex: 0 0 auto;
  padding-bottom: 20px;
  margin-bottom: 26px;
  font-weight: 700;
  line-height: 1.3;
  border-bottom: 1px solid rgba(0, 0, 0, .10);
}

.simulateur__corps {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* ---------- Panneau gauche : fond blanc, curseurs remplis ---------- */
.simulateur--parametres {
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .08);
}

.simulateur--parametres .simulateur__valeur {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-secondary);
  transition: color .25s ease;
}

.simulateur--parametres .simulateur__label > span:first-child {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bs-gray);
}

/* Piste remplie à gauche du curseur : dégradé piloté par --progress (JS) */
.simulateur--parametres input[type="range"] {
  --progress: 0%;
  width: 100%;
  height: 6px;
  appearance: none;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(
    to right,
    var(--color-primary) 0%,
    var(--color-primary) var(--progress),
    rgba(0, 0, 0, .10) var(--progress),
    rgba(0, 0, 0, .10) 100%
  );
  transition: background .12s linear;
}

.simulateur--parametres input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
  cursor: pointer;
  transition: transform .18s ease;
}

.simulateur--parametres input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
  cursor: pointer;
}

.simulateur--parametres input[type="range"]:hover::-webkit-slider-thumb,
.simulateur--parametres input[type="range"]:focus::-webkit-slider-thumb {
  transform: scale(1.08);
}

/* Bornes min / max, discrètes sous chaque curseur */
.simulateur__bornes {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--bs-gray);
  opacity: .8;
}

.simulateur__champ--taux {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

/* ---------- Panneau droit : contrasté, fond sombre ----------
   `body` impose color: var(--bs-gray) (#323131) : illisible ici.
   Chaque élément reçoit donc une couleur claire explicite. */
.simulateur--resultats {
  background: linear-gradient(160deg, #1f1f1f 0%, var(--color-dark) 100%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
  color: rgba(255, 255, 255, .88);
}

.simulateur--resultats .simulateur__titre {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .16);
}

.simulateur--resultats .simulateur__mention {
  margin-top: auto;
  padding-top: 22px;
  color: rgba(255, 255, 255, .62);
  opacity: 1;
}

.simulateur--resultats .simulateur-grid-resultats {
  margin-top: 0;
  gap: 0;
}

/* Grille alignée, séparée par de fins filets plutôt que par des cartes */
.simulateur--resultats .simulateur-resultat-case {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 0;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.simulateur--resultats .simulateur-resultat-case:last-child {
  border-bottom: 0;
}

.simulateur--resultats .simulateur-resultat-label {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, .68);
  opacity: 1;
}

.simulateur--resultats .simulateur-resultat-valeur {
  display: block;
  margin-top: 0;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  transition: color .25s ease, transform .25s ease;
}

/* La mensualité domine la hiérarchie visuelle */
.simulateur--resultats .simulateur-resultat-case.is-principal {
  display: block;
  text-align: center;
  padding: 6px 18px 24px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.simulateur--resultats .simulateur-resultat-case.is-principal .simulateur-resultat-label {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .60);
}

.simulateur--resultats .simulateur-resultat-case.is-principal .simulateur-resultat-valeur {
  margin-top: 10px;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--color-primary);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .simulateur--parametres,
  .simulateur--resultats {
    height: auto;
  }

  .simulateur--resultats .simulateur__mention {
    margin-top: 24px;
  }
}

@media (max-width: 575px) {
  .simulateur--parametres,
  .simulateur--resultats {
    padding: 24px 20px;
  }

  .simulateur--parametres .simulateur__valeur {
    font-size: 21px;
  }

  .simulateur--resultats .simulateur-resultat-case.is-principal .simulateur-resultat-valeur {
    font-size: 38px;
    word-break: break-word;
  }

  .simulateur--resultats .simulateur-resultat-case {
    display: block;
  }

  .simulateur--resultats .simulateur-resultat-valeur {
    margin-top: 4px;
  }
}

/* =========================================================
   Widget WhatsApp flottant (includes/whatsapp.php)
   Classes préfixées .wa- : n'interfère avec aucune règle existante.
   z-index 1030 : au-dessus du contenu et du header collant,
   mais sous les modales et offcanvas Bootstrap (1045+).
   ========================================================= */
.wa-bouton {
  position: fixed;
  bottom: 24px;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

/* Position au choix via WHATSAPP_POSITION */
.wa-bouton--droite {
  right: 24px;
}

.wa-bouton--gauche {
  left: 24px;
}

.wa-bouton:hover,
.wa-bouton:focus-visible {
  background-color: #1ebe5b;
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

.wa-bouton:focus-visible {
  outline: 3px solid rgba(37, 211, 102, .45);
  outline-offset: 3px;
}

.wa-bouton__icone {
  display: block;
  width: 30px;
  height: 30px;
  pointer-events: none;
}

/* Taille réduite sur petits écrans */
@media (max-width: 575px) {
  .wa-bouton {
    width: 48px;
    height: 48px;
    bottom: 16px;
  }

  .wa-bouton--droite {
    right: 16px;
  }

  .wa-bouton--gauche {
    left: 16px;
  }

  .wa-bouton__icone {
    width: 25px;
    height: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-bouton {
    transition: none;
  }

  .wa-bouton:hover,
  .wa-bouton:focus-visible {
    transform: none;
  }
}

/* =========================================================
   Page de confirmation (/confirm)
   Classes préfixées .confirm- — aucune règle existante n'est
   redéfinie ici.
   ========================================================= */

.confirm-panel {
  text-align: center;
  padding: 56px 40px 48px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .06);
}

.confirm-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: rgba(254, 91, 44, .1);
  color: #fe5b2c;
}

.confirm-icone svg {
  display: block;
}

.confirm-titre {
  margin: 0 0 18px;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.01em;
}

.confirm-intro {
  max-width: 620px;
  margin: 0 auto 16px;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
}

.confirm-texte {
  max-width: 640px;
  margin: 0 auto 16px;
  font-size: 16px;
  line-height: 1.7;
}

.confirm-texte-appui {
  margin-top: 26px;
}

/* ---------- Encart « e-mail de confirmation » ---------- */
.confirm-encart {
  max-width: 640px;
  margin: 32px auto 0;
  padding: 26px 28px;
  text-align: left;
  background: #faf9f8;
  border: 1px solid rgba(0, 0, 0, .07);
  border-left: 4px solid #fe5b2c;
  border-radius: 12px;
}

.confirm-encart-titre {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}

.confirm-encart-texte {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
}

.confirm-liste {
  margin: 0;
  padding: 0;
}

.confirm-liste li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.6;
}

.confirm-liste li:last-child {
  margin-bottom: 0;
}

.confirm-liste li::before {
  content: "";
  position: absolute;
  top: .6em;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fe5b2c;
}

/* ---------- Boutons d'action ---------- */
.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

/* ---------- Mentions de bas d'encadré ---------- */
.confirm-mention {
  max-width: 640px;
  margin: 26px auto 0;
  font-size: 14px;
  line-height: 1.65;
  opacity: .85;
}

.confirm-mention-legale {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-size: 13px;
  font-weight: 600;
  opacity: .7;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .confirm-panel {
    padding: 40px 22px 36px;
  }

  .confirm-titre {
    font-size: 30px;
  }

  .confirm-intro {
    font-size: 17px;
  }

  .confirm-encart {
    padding: 22px 20px;
  }

  .confirm-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   Assistant de demande en deux étapes (/demander-mon-credit)
   Classes préfixées .wizard- — plus .confirm-reference pour
   la référence de dossier sur /confirm. Aucune règle
   existante n'est redéfinie ici : ces sélecteurs n'existent
   nulle part ailleurs dans style.css ni plus haut dans ce
   fichier (vérifié).
   ========================================================= */

.wizard-etape {
  padding: 22px 30px 24px;
  margin-bottom: 26px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
}

/* Sans JavaScript, cette classe n'est jamais posée : les deux étapes
   restent visibles et la validation serveur fait foi. */
.wizard-etape.is-verrouille {
  display: none;
}

.wizard-entete {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.wizard-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fe5b2c;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Taux fixe affiché ---------- */
.wizard-taux {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  margin-top: 4px;
  background: #faf9f8;
  border-left: 3px solid #fe5b2c;
  border-radius: 8px;
}

.wizard-taux-label {
  font-size: 15px;
  font-weight: 600;
}

.wizard-taux-valeur {
  font-size: 20px;
  font-weight: 700;
  color: #fe5b2c;
}

/* ---------- Cadre de résultat, sobre et minimal ---------- */
.wizard-resultat {
  margin-top: 22px;
  padding: 22px 24px 18px;
  background: #161616;
  border-radius: 12px;
  color: #f2f2f2;
}

.wizard-resultat-titre {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.wizard-resultat-liste {
  margin: 0;
  padding: 0;
}

.wizard-resultat-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  /* Interlignage resserré : le tableau tient sur moins de hauteur sans
     rien perdre en lisibilité (contraste et corps de texte inchangés). */
  padding: 6px 0;
  line-height: 1.35;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.wizard-resultat-ligne:last-child {
  border-bottom: 0;
}

.wizard-resultat-ligne dt {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, .72);
}

.wizard-resultat-ligne dd {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-align: right;
}

.wizard-resultat-ligne.is-principal dd {
  font-size: 22px;
  color: #fe5b2c;
}

.wizard-resultat-note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .6);
}

/* ---------- Mention « facultatif » ---------- */
.wizard-facultatif {
  font-size: 12px;
  font-weight: 400;
  opacity: .7;
}

/* ---------- Responsive ---------- */
@media (max-width: 575px) {
  .wizard-etape {
    padding: 22px 18px 18px;
  }

  .wizard-resultat {
    padding: 18px 18px 14px;
  }

  .wizard-resultat-ligne.is-principal dd {
    font-size: 19px;
  }
}

/* ---------- Référence de dossier sur /confirm ---------- */
.confirm-reference {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 4px auto 18px;
  padding: 12px 26px;
  background: #faf9f8;
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 10px;
}

.confirm-reference-label {
  font-size: 13px;
  opacity: .75;
}

.confirm-reference-valeur {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fe5b2c;
}

/* =========================================================
   Demande de crédit — ajouts (taux informatif, contrôle en
   direct, affichage conditionnel du tableau, mentions).
   Tous les sélecteurs sont NOUVEAUX : aucune règle définie
   plus haut dans ce fichier n'est redéfinie ici.
   ========================================================= */

/* ---------- Champ « taux appliqué » : informatif, non modifiable ---------- */
.wizard-taux-champ[readonly],
.wizard-taux-champ[disabled] {
  background: #faf9f8;
  border-left: 3px solid #fe5b2c;
  color: #fe5b2c;
  font-weight: 700;
  cursor: default;
  opacity: 1;
}

/* ---------- Message d'erreur sous le champ ---------- */
.wizard-erreur {
  display: block;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: #c0261a;
}

.wizard-erreur[hidden] {
  display: none;
}

/* Champ en erreur : bordure rouge, retirée dès que la saisie redevient valide. */
.form-control.wizard-invalide,
select.wizard-invalide,
input.wizard-invalide,
textarea.wizard-invalide {
  border-color: #c0261a;
  box-shadow: 0 0 0 1px rgba(192, 38, 26, .18);
}

/* ---------- Affichage conditionnel du cadre de résultats ---------- */
/* Le cadre n'existe à l'écran que si type + montant + durée sont valides. */
.wizard-resultat:not(.is-visible) {
  display: none;
}

.wizard-resultat.is-visible {
  animation: wizard-apparition .28s ease-out both;
}

@keyframes wizard-apparition {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-resultat.is-visible {
    animation: none;
  }
}

/* Invitation affichée à la place du tableau tant qu'il manque une donnée. */
.wizard-resultat-attente {
  margin: 22px 0 0;
  padding: 14px 18px;
  background: #faf9f8;
  border: 1px dashed rgba(0, 0, 0, .16);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #3a3a3a;
}

.wizard-resultat-attente[hidden] {
  display: none;
}

/* Défilement horizontal conservé sur mobile plutôt qu'un texte tronqué. */
.wizard-resultat-liste.wizard-resultat-liste {
  overflow-x: auto;
}

/* ---------- Champ « pays » saisi librement ---------- */
#pays-autre-bloc[hidden] {
  display: none;
}

/* ---------- Mention de prévention (« Un crédit vous engage… ») ---------- */
.wizard-mention {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  padding: 12px 18px;
  background: #fff6f2;
  border: 1px solid rgba(254, 91, 44, .35);
  border-left: 4px solid #fe5b2c;
  border-radius: 12px;
}

.wizard-mention-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fe5b2c;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.wizard-mention-texte {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: #161616;
}

/* ---------- Zone géographique (bloc d'information latéral) ---------- */
.wizard-zone {
  margin-bottom: 30px;
  padding: 18px 20px;
  background: #faf9f8;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
}

.wizard-zone-titre {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #000;
}

.wizard-zone-texte {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: #000;
}

/* ---------- Responsive des ajouts ---------- */
@media (max-width: 575px) {
  .wizard-mention {
    padding: 14px 16px;
  }

  .wizard-mention-texte {
    font-size: 14px;
  }
}

/* =========================================================
   Demande de crédit — ajouts complémentaires. Tous les
   sélecteurs sont NOUVEAUX : aucune règle définie plus haut
   n'est redéfinie ici.
   ========================================================= */

/* ---------- Champ « taux appliqué » : valeur centrée, bloc compact ---------- */
.wizard-taux-champ {
  text-align: center;
}

/* ---------- Bloc d'information : titre / accordéon ----------
   Par défaut (desktop et tablette, >= 768px, comme sans JS) : le
   bouton se comporte comme un simple titre, sans habillage de bouton,
   et le panneau reste toujours ouvert. */
.wizard-info-bouton {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}

.wizard-info-libelle {
  display: inline;
}

/* Le +/− n'existe qu'en mode accordéon (mobile). */
.wizard-info-icone {
  display: none;
}

/* ---------- Mobile (< 768px) : formulaire d'abord, info en accordéon ---------- */
@media (max-width: 767.98px) {
  /* La colonne du formulaire remonte avant le bloc d'information. */
  .wizard-demande-row {
    flex-direction: column;
  }

  .wizard-col-form {
    order: -1;
  }

  .wizard-col-info {
    order: 1;
  }

  /* Le titre devient un en-tête d'accordéon cliquable. */
  .wizard-info-bouton {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
  }

  .wizard-info-libelle {
    display: inline-block;
  }

  /* Bouton +/− à GAUCHE du titre. */
  .wizard-info-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fe5b2c;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }

  /* « + » fermé, « − » ouvert. Piloté par aria-expanded : sans JS, le
     panneau reste ouvert et l'icône affiche « − », donc cohérent. */
  .wizard-info-bouton[aria-expanded="false"] .wizard-info-icone::before {
    content: "+";
  }

  .wizard-info-bouton[aria-expanded="true"] .wizard-info-icone::before {
    content: "\2212";
  }

  /* Panneau replié : masqué uniquement quand le JS pose l'attribut hidden. */
  .wizard-info-panneau[hidden] {
    display: none;
  }
}

/* ---------- Titres h3 uniformisés à 20px ---------- */
/* Demande explicite : tous les <h3> à 20px, quelle que soit leur classe.
   Le !important est nécessaire pour battre les classes du template
   (.heading-title, .fz-24, .cta-title…) plus spécifiques qu'un `h3` nu. */
h3 {
  font-size: 20px !important;
}

/* ---------- Taille des titres de section (--heading-title-font-size) ---------- */
/* Demande explicite : 25px. La variable est définie par le template sur
   .heading-layout1 (37px) et .heading-layout2 (40px), avec des paliers
   responsive — on les ramène toutes à 25px, sur tous les écrans. */
.heading-layout1,
.heading-layout2 {
  --heading-title-font-size: 25px;
  --heading-desc-font-size: 15px;
}

/* ---------- Slider : tailles de titre ---------- */
/* Demande explicite. Le template les définit sur .slider (55px / 17px)
   avec paliers responsive ; on aligne desktop sur 40px / 16px. */
.slider {
  --hero-title-font-size: 40px;
  --hero-subtitle-font-size: 16px;
}

/* ---------- Footer multilingue : espacement et grille ---------- */
/* Les libellés traduits (DE/EN) plus longs que le FR chevauchaient la colonne
   voisine. Correctif : retour à la ligne autorisé sur les liens (plus haut),
   gouttière élargie, et colonnes de menu qui ne descendent jamais sous une
   largeur exploitable. Répartition lg : about 3 | menus 2+2+2 | contact 3. */
.footer .footer-grid {
  --bs-gutter-x: 40px;
  row-gap: 30px;
}

@media (min-width: 1200px) {
  .footer .footer-grid {
    --bs-gutter-x: 56px;
  }
}

/* Empêche une colonne de menu de se retrouver trop étroite pour ses libellés
   traduits, quelle que soit la langue. */
.footer .footer-col-menu {
  min-width: 190px;
}

/* Palier intermédiaire : entre 768 et 992px, 3 blocs par ligne suffisent
   (le template met col-md-4). On garantit juste l'espacement vertical. */
@media (max-width: 991px) {
  .footer .footer-col-menu,
  .footer .footer-col-contact {
    margin-bottom: 24px;
  }
}

/* ============================================================
   Mention légale de crédit + logos ORIAS / RGPD
   Ajout — composant mention_credit_html() (config.php).
   Classes préfixées .mention-credit- ; n'écrase aucune règle
   existante. Les deux logos ne sont PAS traités pareil :
   - ORIAS : petite pastille blanche (fond + léger padding + coins
     arrondis + très légère ombre portée) pour le détacher du footer
     sombre (#161616) tout en restant discret sur fond clair ;
     - RGPD : affichée telle quelle (PNG opaque), sans fond ni ombre.
     ============================================================ */
.mention-credit {
  display: inline;
}

.mention-credit-texte {
  display: inline;
}

.mention-credit-logos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
  margin-left: 10px;
  white-space: nowrap;
}

.mention-credit-logo {
  display: block;
  height: 24px;
  width: auto;
}

/* ORIAS uniquement : pastille blanche discrète + ombre très légère. */
.mention-credit-logo--orias {
  background-color: #ffffff;
  border-radius: 4px;
  padding: 2px 4px;
  box-sizing: content-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}