/* ==========================================================================
   Palette Azulejo — ajustements qui ne peuvent pas venir du simple
   remplacement de couleurs (les classes utilitaires du theme partagent
   la meme valeur source, il faut les redifferencier ici).
   Charge APRES style-azulejo.css et responsive-azulejo.css.
   ========================================================================== */

:root{
  --az-cobalt:      #1d4e89;
  --az-cobalt-mid:  #2c62a5;
  --az-cobalt-deep: #12233a;
  --az-cobalt-card: #1b3a5f;
  --az-ocre:        #c0862b;
  --az-ocre-deep:   #9a6a1e;
  --az-chalk:       #eff1ef;
  --az-wash:        #e7eef6;
}

/* --- Pastilles de sur-titre : ocre fonce pour garder le texte blanc lisible
       (l ocre vif ne donne que 3,1:1 sur blanc, insuffisant en petit corps) --- */
.bg-color-9edd05{ background-color: var(--az-ocre-deep) !important; }

/* --- Cartes posees sur les sections foncees : un cobalt plus sourd que les
       boutons, pour que la hierarchie reste lisible --- */
.bg-color-29594b{ background-color: var(--az-cobalt-card) !important; }

/* --- Fonds clairs --- */
.bg-color-fffaeb{ background-color: var(--az-chalk) !important; }
.bg-color-edf1ee{ background-color: var(--az-wash) !important; }

/* --- Sections foncees --- */
.bg-color-0c3a30{ background-color: var(--az-cobalt-deep) !important; }

/* --- Icones des cartes : legerement plus claires que la carte, sinon elles
       disparaissent sur le cobalt sourd --- */
.choose-card i,
.works-card i{ background-color: var(--az-cobalt) !important; }




/* ==========================================================================
   Banniere d accueil — photo de financement en fond, voilee de cobalt.
   Le degrade est plus dense a gauche (la ou se trouve le texte) et s ouvre
   vers la droite pour laisser respirer la photo derriere le simulateur.
   ========================================================================== */
.banner-area{
  background-color: var(--az-cobalt-deep) !important;
  background-image:
    linear-gradient(100deg,
      rgba(18, 35, 58, .95)  0%,
      rgba(18, 35, 58, .89) 38%,
      rgba(23, 55, 95, .76) 68%,
      rgba(29, 78, 137, .62) 100%),
    url("../images/hero/hero-financing.jpg");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

/* --- Texte de la banniere en blanc sur le voile --- */
.banner-area .banner-content h1,
.banner-area .banner-content .h1,
.banner-area .banner-content p{ color: #ffffff !important; }

/* --- La pastille de marque reste un jeton blanc : le contraste est maximal
       et elle detache bien le nom sur la photo --- */
.banner-area .banner-content .sub-t{
  color: var(--az-cobalt-deep) !important;
  background-color: #ffffff !important;
  border-color: rgba(255, 255, 255, .55) !important;
}

/* --- Bouton principal en ocre : le cobalt se serait fondu dans le voile --- */
.banner-area .banner-btn .default-btn.two{
  background-color: var(--az-ocre-deep) !important;
  color: #ffffff !important;
}
.banner-area .banner-btn .default-btn.two:hover{
  background-color: var(--az-ocre) !important;
  color: var(--az-cobalt-deep) !important;
}

/* --- La carte du simulateur se detache de la photo --- */
.banner-area .login-form{
  box-shadow: 0 18px 48px -18px rgba(8, 18, 32, .55);
}

/* --- Sur mobile les colonnes s empilent : le voile devient vertical --- */
@media (max-width: 991px){
  .banner-area{
    background-image:
      linear-gradient(180deg,
        rgba(18, 35, 58, .94)  0%,
        rgba(18, 35, 58, .90) 55%,
        rgba(29, 78, 137, .80) 100%),
      url("../images/hero/hero-financing.jpg");
    background-position: center;
  }
}


/* ==========================================================================
   Section "O que fazemos" — les trois cartes sous la banniere.
   ========================================================================== */

/* --- Respiration apres la banniere. Cible uniquement la section qui suit
       directement le hero : la seconde occurrence garde son rythme. --- */
.banner-area + .choose-card-area{ padding-top: 110px; }

/* --- En-tete de section sur fond fonce --- */
.choose-card-area .section-title{ margin-bottom: 55px; }
.choose-card-area .section-title h2{ color: #ffffff; }

/* --- Les cartes : bordure fine pour qu elles se lisent comme des objets
       poses sur le cobalt, et hauteur egale quel que soit le texte --- */
.choose-card{
  padding: 38px 34px !important;
  height: 100%;
  border: 1px solid rgba(126, 168, 212, .22);
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}

/* --- Icone : l ocre tranche sur le cobalt, la ou le fond fonce d origine
       se confondait avec la carte --- */
.choose-card i{
  width: 62px !important;
  height: 62px !important;
  line-height: 62px !important;
  font-size: 30px !important;
  border-radius: 16px !important;
  margin-bottom: 26px !important;
  background-color: rgba(192, 134, 43, .18) !important;
  color: var(--az-ocre) !important;
}

/* --- Hierarchie : titre blanc, texte legerement adouci --- */
.choose-card h3,
.choose-card .h3{
  font-size: 22px !important;
  line-height: 1.28 !important;
  margin-bottom: 14px !important;
}
.choose-card p{
  color: #bfd0e2 !important;
  line-height: 1.66;
  margin-bottom: 0;
}

/* --- Survol : la carte se souleve, la bordure et l icone passent a l ocre --- */
.choose-card:hover{
  transform: translateY(-6px);
  border-color: rgba(192, 134, 43, .55);
  background-color: #1f4470 !important;
}
.choose-card:hover i{
  background-color: var(--az-ocre) !important;
  color: var(--az-cobalt-deep) !important;
}

@media (max-width: 991px){
  .banner-area + .choose-card-area{ padding-top: 70px; }
  .choose-card-area .section-title{ margin-bottom: 38px; }
}


/* ==========================================================================
   Survols de liens — ocre. Les boutons sont exclus : ils ont deja leurs
   propres etats et l ocre y ecraserait le libelle.
   ========================================================================== */
a{ transition: color .18s ease; }

a:not([class*="btn"]):not(.navbar-brand):not(.footer-logo):not(.logo):hover{
  color: var(--az-ocre-deep);
}

/* Sur fond fonce, c est l ocre vif qui ressort */
.bg-color-0c3a30 a:not([class*="btn"]):hover,
.footer-area a:not([class*="btn"]):hover,
.copyright-area a:not([class*="btn"]):hover,
.testimonial-said a:not([class*="btn"]):hover,
.service-area .faq-content a:not([class*="btn"]):hover{
  color: var(--az-ocre) !important;
}

.navbar .navbar-nav .nav-item .nav-link:hover,
.navbar .navbar-nav .nav-item .nav-link.active,
.mobile-menu-list a:hover{ color: var(--az-ocre-deep) !important; }

.read-more:hover{ color: var(--az-ocre-deep) !important; }


/* ==========================================================================
   Suppression du rouge herite du theme.
   .faq-content .accordion-item arrivait avec un fond #800605 : il touchait
   a la fois l accordeon des services et la FAQ.
   ========================================================================== */

/* --- FAQ : cartes claires posees sur la section blanche --- */
.faq-area .faq-content .accordion-item{
  background-color: var(--az-chalk) !important;
  border: 1px solid rgba(18, 35, 58, .10) !important;
  border-left: 3px solid transparent !important;
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq-area .faq-content .accordion-item:has(.accordion-button:not(.collapsed)){
  border-left-color: var(--az-ocre) !important;
}
.faq-area .faq-content .accordion-body p{ color: #4a5666; line-height: 1.68; }

/* --- Accordeon des services : les trois volets etaient de trois couleurs
       differentes (rouge, cobalt, creme). On unifie. --- */
.service-area .faq-content .accordion-item,
.service-area .faq-content .accordion-item.two,
.service-area .faq-content .accordion-item.three{
  background-color: var(--az-cobalt-deep) !important;
}

/* L indicateur +/- passe a l ocre */
.faq-content .accordion-button::before{ color: var(--az-ocre) !important; }


/* ==========================================================================
   Accordeon des services — corrections de lisibilite
   ========================================================================== */

/* L icone du volet se confondait avec le fond de l accordeon */
.service-area .faq-content .accordion-button i{
  background-color: rgba(192, 134, 43, .18) !important;
  color: var(--az-ocre) !important;
}

/* Les puces de la liste etaient de la meme couleur que le fond : invisibles */
.service-area .faq-content .accordion-item .accordion-body .info ul li i{
  background-color: var(--az-ocre) !important;
  color: var(--az-cobalt-deep) !important;
}

/* Le lien "Submeter pedido" heritait d un bleu tres sombre sur fond sombre */
.service-area .faq-content .read-more{ color: #ffffff !important; }
.service-area .faq-content .read-more:hover{ color: var(--az-ocre) !important; }


/* ==========================================================================
   Section "Quem somos" — la liste ressemblait a trois gros boutons pleins
   ========================================================================== */
.about-us-content .check li{
  background-color: rgba(126, 168, 212, .10) !important;
  border: 1px solid rgba(126, 168, 212, .22);
  font-size: 16.5px !important;
  line-height: 1.5;
  padding: 15px 22px 15px 54px !important;
}
.about-us-content .check li i{
  background-color: var(--az-ocre) !important;
  color: var(--az-cobalt-deep) !important;
}


/* ==========================================================================
   Section "Como funciona"
   ========================================================================== */
.works-card{
  padding: 36px 28px !important;
  height: 100%;
  border: 1px solid rgba(126, 168, 212, .22);
  transition: transform .22s ease, border-color .22s ease;
}
.works-card:hover{
  transform: translateY(-6px);
  border-color: rgba(192, 134, 43, .55);
}
.works-card i{
  width: 64px !important;
  height: 64px !important;
  line-height: 64px !important;
  font-size: 30px !important;
  margin-bottom: 24px !important;
  background-color: rgba(192, 134, 43, .18) !important;
  color: var(--az-ocre) !important;
}
.works-card h3,
.works-card .h3{ font-size: 20px !important; line-height: 1.3 !important; margin-bottom: 12px !important; }
.works-card p{ color: #bfd0e2 !important; line-height: 1.6; margin-bottom: 0; }

/* Les jalons 1-2-3-4 : le survol ne donnait aucun retour visuel */
.step-card h3,
.step-card .h3{
  background-color: rgba(126, 168, 212, .14) !important;
  border-color: rgba(126, 168, 212, .38) !important;
}
.step-card h3:hover,
.step-card .h3:hover{
  background-color: var(--az-ocre) !important;
  color: var(--az-cobalt-deep) !important;
  border-color: var(--az-ocre) !important;
}


/* ==========================================================================
   Temoignages — les etoiles etaient bleues, l ocre est plus juste
   ========================================================================== */
.testimonials-card{ border: 1px solid rgba(18, 35, 58, .08); }
.testimonials-card ul li i{ color: var(--az-ocre) !important; }
.testimonials-card h3,
.testimonials-card .h3{ color: var(--az-cobalt) !important; font-size: 17px !important; }
.testimonials-card p{ line-height: 1.66; }


/* ==========================================================================
   Bloc "Juros baixos" du carrousel — le jeton s aligne sur les pastilles
   ========================================================================== */
.innovation span{
  background-color: var(--az-ocre-deep) !important;
  color: #ffffff !important;
}


/* ==========================================================================
   Bandeau legal — il est posé en absolu par-dessus la banniere, donc sur
   fond sombre : le texte passe en blanc.
   ========================================================================== */
.top-header-info > div > p{
  color: #ffffff !important;
  margin-bottom: 0;
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(8, 18, 32, .45);
}


/* ==========================================================================
   Bannieres des pages internes.
   Le theme y posait une illustration de cartes bancaires marquee "Finto Bank"
   etiree en plein cadre. Remplacee par le meme traitement que l accueil.
   ========================================================================== */
.page-banner-area{
  padding-top: 230px !important;
  padding-bottom: 110px !important;
  background-color: var(--az-cobalt-deep) !important;
  background-image:
    linear-gradient(100deg,
      rgba(18, 35, 58, .95)  0%,
      rgba(18, 35, 58, .88) 45%,
      rgba(29, 78, 137, .70) 100%),
    url("../images/hero/hero-financing.jpg") !important;
  background-size: cover !important;
  background-position: center 45% !important;
  background-repeat: no-repeat !important;
}

.page-banner-content h1,
.page-banner-content .h1{
  color: #ffffff !important;
  font-size: clamp(30px, 4.6vw, 44px) !important;
  line-height: 1.12 !important;
  margin-bottom: 14px !important;
}

/* Fil d Ariane : separateur ocre, etat courant en retrait */
.page-banner-content ul li{
  display: inline-block;
  color: #bfd0e2;
  font-size: 14.5px;
}
.page-banner-content ul li a{ color: #ffffff; text-decoration: none; }
.page-banner-content ul li a:hover{ color: var(--az-ocre) !important; }
.page-banner-content ul li + li::before{
  content: "/";
  margin: 0 10px;
  color: var(--az-ocre);
  font-weight: 600;
}

@media (max-width: 991px){
  .page-banner-area{
    padding-top: 190px !important;
    padding-bottom: 80px !important;
    background-image:
      linear-gradient(180deg,
        rgba(18, 35, 58, .94)  0%,
        rgba(18, 35, 58, .90) 60%,
        rgba(29, 78, 137, .80) 100%),
      url("../images/hero/hero-financing.jpg") !important;
    background-position: center !important;
  }
}


/* ==========================================================================
   Page "Os nossos créditos" — meme langage que les cartes de l accueil
   ========================================================================== */
.single-services-card{
  padding: 34px 30px !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(18, 35, 58, .10);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.single-services-card:hover{
  transform: translateY(-6px);
  border-color: rgba(192, 134, 43, .55);
  box-shadow: 0 14px 34px -18px rgba(18, 35, 58, .38);
}
.single-services-card h3,
.single-services-card .h3{
  font-size: 21px !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
}
.single-services-card h3 a{ color: var(--az-cobalt-deep); text-decoration: none; }
.single-services-card:hover h3 a{ color: var(--az-cobalt); }
.single-services-card p{
  margin-bottom: 24px !important;
  color: #5c6779;
  line-height: 1.62;
  flex: 1;
}
.single-services-card i.mission{ color: var(--az-ocre) !important; }
.single-services-card .arrow-btn{
  color: var(--az-cobalt);
  transition: color .18s ease, transform .18s ease;
}
.single-services-card:hover .arrow-btn{
  color: var(--az-ocre-deep);
  transform: translate(3px, -3px);
}


/* ==========================================================================
   Formulaires — contact et demande de credit
   ========================================================================== */
.contact-form,
.my-account-page .login-form{
  padding: 38px 40px !important;
  border: 1px solid rgba(18, 35, 58, .08);
}

.contact-form label,
.my-account-page .login-form label{
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .015em;
  color: var(--az-cobalt-deep);
  margin-bottom: 7px;
}

.contact-form .form-control,
.my-account-page .login-form .form-control{
  margin-bottom: 4px !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.contact-form .form-control:focus,
.my-account-page .login-form .form-control:focus{
  border-color: var(--az-cobalt) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 137, .14) !important;
}
.contact-form .form-control::placeholder,
.my-account-page .login-form .form-control::placeholder{ color: #8b94a3 !important; }

.contact-form textarea.form-control{
  height: auto !important;
  min-height: 150px;
  padding-top: 14px;
}

/* Les champs de fichier ont besoin de place pour le bouton natif */
.my-account-page .login-form input[type="file"].form-control{
  height: auto !important;
  padding: 12px 14px;
  background-color: #ffffff;
}

/* Espacement entre les champs, quel que soit le gabarit Bootstrap utilise */
.contact-form .form-group,
.my-account-page .login-form .form-group > div{ margin-bottom: 18px; }

.contact-form .form-error-message,
.my-account-page .login-form .form-error-message{
  display: block;
  margin-top: 4px;
  font-size: 13px;
}




/* ==========================================================================
   Demande de credit — formulaire sur une seule page, en deux groupes
   ========================================================================== */
.apply-intro{ margin-bottom: 26px; }
.apply-intro h3{
  font-size: 25px;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--az-cobalt-deep);
}
.apply-intro p{
  margin: 0;
  color: #5c6779;
  font-size: 15px;
}

.apply-group{
  border: 0;
  padding: 0;
  margin: 0 0 26px;
}
.apply-group legend{
  float: none;
  width: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--az-ocre-deep);
  padding: 0 0 9px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(18, 35, 58, .12);
}

.my-account-page .login-form button[type="submit"]{ margin-top: 6px; }