/*

Theme Name: pointfinances

Theme URI: https://preproduction.point-finances.fr/

Description: Thème enfant d'Astra pour pointfinances

Author: Dev Roofline

Author URI: https://preproduction.point-finances.fr/

Template: astra 

Version: 1.0.0

*/

/* Styles personnalisés du thème enfant */

body, html {
  overflow-x: hidden !important;
}

#wpadminbar {
    display: none !important;
}
 
#nav, .arrow a:hover{
    backdrop-filter: blur(10px) !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
}

#logo > a > img {
transition: width 0.5s ease-in-out;
}

.green {
background-color: #9FD44C;
    display: inline-block;
    padding: 0px 4px 2px 4px;
}

 .titre-bleu, .titre-bleu-card {
    color: #4DA1EE;
    letter-spacing: 1.1px;
 }

 .titre-bleu {
    font-size: 50px;
 }
    
 .titre-bleu-card {
        font-size: 36px;
 }


.arrow {
    overflow: hidden;
}
.arrow a span span svg {
    position: relative;      /* indispensable pour que "left" fonctionne */
    left: 0;
    transition: left 0.3s ease;   /* animation fluide */
}

.arrow:hover a span span svg {
    left: 50px;
}

/*==========
Compteur 
 ============*/
.elementor-counter-title {
    text-align: center !important;
}


/*==========
Curseur 
 ============*/

#cursor-logo {
    width: 30px;
}

 #typewriter-container {
        display: flex;
    align-items: center;
 }

 #typewritercover {
padding-left: 20px;
    line-height: 34px;
    font-family: "Gordita", sans-serif;
    font-weight: 600;
    font-size: 18px;
    overflow: hidden;
    border-right: 2px solid white;
    animation: blinkCursor 0.7s steps(1) infinite;
    color: white;
}

@keyframes blinkCursor {
  0%, 100% { border-color: transparent; }
  50% { border-color: white }
}

/*==========
 Soulignement au hover
 ============*/


#menu-1-edb3ea8 >  li > a, .hover-coordonnee {
    position: relative;
    display: inline-block;
}


#menu-1-edb3ea8 > li > a::after, .hover-coordonnee::after {
    content: "";
    position: absolute;
    left: 50%;
    height: 2px;
    background-color: currentColor;
    width: 0; 
    transform: translateX(-50%);
    transition: width 0.3s ease; 
}

.hover-coordonnee::after {
     bottom: -10px;
}

#menu-1-edb3ea8 > li > a::after {
    bottom: -5px;
}


#menu-1-edb3ea8 > li:hover > a::after, .hover-coordonnee:hover::after {
    width: 50px;
}



/*==================
Agrandissement Image au hover 
 ===================*/

 /* ---- CONTENEUR GLOBAL ---- */
.accordion-gallery {
  display: flex;
  width: 100%;
  height: 500px; /* Hauteur de la galerie – modifie selon ton design */
  overflow: hidden;
  gap: 10px;
}

/* ---- CHAQUE PANNEAU ---- */
.accordion-item {
  flex: 1;
  position: relative;
  transition: flex 0.4s ease-in-out;
  overflow: hidden;
  cursor: pointer;
  border-radius: 35px;
}

/* Dégradé noir sur les images */
.accordion-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%; /* zone du dégradé → augmente ou diminue selon ton besoin */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
  pointer-events: none; /* important pour ne pas bloquer le hover */
  z-index: 1;
}

/* Image en fond */

.bg-independant {
    background-image: url('/wp-content/uploads/2025/12/Independant.jpg');
}

.bg-fonctionnaire {
    background-image: url('/wp-content/uploads/2025/12/Fonctionnaire.jpg');
}

.bg-profession-liberale {
   background-image: url('/wp-content/uploads/2025/12/Profession-Liberale.jpg');
}

.bg-locataire {
    background-image: url('/wp-content/uploads/2025/12/9ed01b9a446ed17c9e58caf050609a9094065d71.jpg');
}

.bg-proprietaire {
   background-image: url('/wp-content/uploads/2025/12/Proprietaire-scaled.jpg');
}

.bg-fonctionnaire {
    background-position: -100px 0px;
 /* background-repeat: no-repeat;*/
}


.bg-independant, .bg-profession-liberale, .bg-locataire, .bg-proprietaire {
    background-position: center;
}


.accordion-item .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  transition: transform 0.4s ease-in-out;
    background-repeat: no-repeat;
}

/* Effet zoom léger au hover */
.accordion-item:hover .bg {
  transform: scale(1.05);
}

/* ---- TEXTE ---- */
.accordion-text {
font-family: "Antique Olive", Sans-Serif;
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  color: #fff;
  transition: height 0.4s ease-in-out, padding 0.4s, opacity 0.4s;
  height: 60px;         /* Hauteur quand la colonne est étroite */
  overflow: hidden;
}

/* Quand la colonne est étroite */
.accordion-item:not(.expanded) .accordion-title {
  margin-top: -20px;
}

.accordion-item.expanded .accordion-text {
  height: 150px;        /* Hauteur visible une fois élargie */
  padding: 20px;
}

.accordion-title {
  font-size: 20px;
  font-weight: bold;
    position: relative;
  z-index: 5;
  overflow: visible !important;
  white-space: normal !important;
  width: 200px;
}

.accordion-description {
    font-size: 14px;
    line-height: 18px;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.accordion-item.expanded .accordion-description {
  opacity: 1;
}


/*================
Responsive 
==================*/

@media (max-width:1350px) {
    #menu-1-edb3ea8 > li > a  {
        padding-left: 0px !important;
    }
}


@media (max-width:1225px) {
#masthead > div > div > div { 
    padding: 10px 10px;
    gap : 10px ; 
}
}

@media (max-width:1085px) {
#masthead > div > div > div > div.elementor-element.elementor-element-ea7c3d5.e-con-full.e-flex.e-con.e-child{ 
    width: 30%;
}
}

@media (max-width:1024px) {
    .bg-fonctionnaire {
        background-position: center;
    }


}

@media (max-width:1024px) and (min-width:768px) {

    .bg-proprietaire {
        background-position: 0px -70px;

    }

    .bg-profession-liberale {
        background-position: 0px -45px;

    }

}

@media (max-width:1024px) {
     .titre-bleu {
font-size: 36px;
    letter-spacing: 0px;
 }


/*======
Image home page " a qui s'adresse le rachat de crédit" 
========*/
 .accordion-title {
    font-size: 18px;
 }

  .accordion-gallery {
    flex-wrap: wrap;
    height: auto;
  }

  /* Par défaut → 2 colonnes */
  .accordion-item {
    flex: 0 0 calc(50% - 10px);
    height: 240px;
    transition: none; /* Empêche les sauts */
  }

  /* Le 3e seul au milieu */
  .accordion-item:nth-child(3) {
    flex: 0 0 100%;
  }

  /* Désactiver le zoom */
  .accordion-item:hover .bg {
    transform: none !important;
  }

  /* Désactiver l’accordéon flex sur mobile */
  .accordion-item {
    flex-grow: 0 !important;
  }

  /* Hauteur texte fermé */
  .accordion-item .accordion-text {
    height: 60px !important;
  }

  /* Hauteur texte ouvert */
  .accordion-item.expanded .accordion-text {
    height: 225px !important;
    padding: 10px ;
  }
  
  
   /* Flou + assombrissement sur l'image quand expanded */
  .accordion-item.expanded .bg {
    filter: blur(3px) brightness(0.5);
    transform: none !important;
  }

}