/*
Theme Name: Hello Elementor Enfant
Description: Theme enfant de Hello Elementor.
Author: Pierrick Pralong
Author URI: http://panierdepixels.fr/
Template: hello-elementor
Version: 1.0
*/

/* fixer les images dans les formats*/
@media (min-width: 768px) {
    .bg-fixed-tablet {
        background-attachment: fixed !important;
    }
}

/*-- Animer les bouton effet defilement gauche droite en hover --*/
/* Btn de base*/
.p9-btn-hover-anime a.elementor-button {
 position: relative; overflow: hidden; background: transparent;
  z-index: 1; transition: color 0.3s ease; border: 1px solid var(--e-global-color-text);
}
/* Couche rouge animée */
.p9-btn-hover-anime a.elementor-button::before {
  content: ""; position: absolute; inset: 0; background: var(--e-global-color-text);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;  z-index: 0;
}
/* On remet le texte au-dessus */
.p9-btn-hover-anime .elementor-button .elementor-button-content-wrapper {
  position: relative; z-index: 2;
}
/* Animation au hover */
.p9-btn-hover-anime a.elementor-button:hover::before {
  transform: scaleX(1);
}

/* Texte en blanc au hover */
.p9-btn-hover-anime a.elementor-button:hover {
  color: #fff !important;
}
/*-- Fin Animer les bouton effet defilement gauche droite en hover --*/



/*P9 Mettre les flèches de l'accordéon à droite */
/* Bandeau en flex */
.e-con-inner .elementor-widget-n-accordion 
details.e-n-accordion-item 
summary.e-n-accordion-item-title {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Bloc gauche (DPE) */
.e-n-accordion-item-title-header {
    flex: 1;
}

/* Flèche toujours à droite */
.e-n-accordion-item-title-icon {
    margin-left: auto;
}

/* ---------------------- Page générique bien ancien Ajouter EMPLACEMENT dans l'accordéon -------------------- */
#p9-accordeonEmplacement .e-n-accordion-item-title-header:after {
    content: "Emplacement";
    position: absolute;
    left: calc(40% + 50px);

    /* Style Elementor */
    font-family: var(--e-global-typography-secondary-font-family);
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-secondary-font-weight);
    line-height: var(--e-global-typography-secondary-line-height);

    color: var(--e-global-color-text);
}

/* Important pour le positionnement */
#p9-accordeonEmplacement .e-n-accordion-item-title {
    position: relative;
}
/* ---------------------- Fin -------------------- */


/** CONTACT **/
/*Mettre en forme le form de contact*/
.p9-contact-form .elementor-field-group-p9formmasquer{visibility:hidden;}
.p9-contact-form .elementor-field-group-message {margin-top: -390px;}
.p9-contact-form .elementor-field-group-message textarea#form-field-message { background-color: #ffffff; border-color: var(--e-global-color-accent); border-width: 1px 1px 1px 1px;}
.p9-contact-form .elementor-field-type-submit {margin-top:-50px;}
	
/*---------------Menu responsive-----------------*/

/** HEADER **/
/* Telephone menu mobile pleine hauteur*/
/*nav.elementor-nav-menu--dropdown {height: 2000px; padding-top: 60px; padding-left: 30px;}
/* Conteneur du menu fullscreen */
nav.elementor-nav-menu--dropdown {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #fff;
    padding-top: 30px;
}

/* Liste des liens */
nav.elementor-nav-menu--dropdown ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* IMAGE juste après les liens */
nav.elementor-nav-menu--dropdown::after {
    content: "";
    display: block;

    height: 200px;
    width: 100%;
    margin-top: 20px; /* 👈 espace comme les liens */

    background-image: url("https://inneo-promotion2026.panierdepixels.fr/wp-content/uploads/Sans-titre-2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Supprime le scroll sur le body, custom.js s'occupe d'ajouter la class "menu-open */
body.menu-open {  overflow: hidden !important; touch-action: none;}
/*Je rajoute du blanc pour ne pas voir sur mobile une bande du site en bas une fois la barre de navigation chrome rangé au défilement*/
body.menu-open::before { content: "";  position: fixed;   inset: 0;  background: #ffffff;  z-index: 2;}

/* Fin de Telephone menu mobile pleine hauteur*/

/** NOTRE APPROCHE **/
/* On laisse dépasser le carousel */
.p9-carousel-boucle .swiper {
  overflow: visible !important;
  padding: 50px !important;;
}

/* On masque ce qui dépasse sur le conteneur principal */
.p9-carousel-boucle {
  overflow: hidden;
}

/* On réduit légèrement la largeur pour laisser apparaître le suivant */
.p9-carousel-boucle .swiper-wrapper {
 /* padding-right: 180px; /* ajuste selon effet voulu */
}

.p9-carousel-boucle .swiper-slide {
  transition: opacity 0.4s ease;
}

/** VENDEZ **/
/* On laisse dépasser le carousel */
.p9-carousel-boucle-vendez .swiper {
  overflow: visible !important;
	padding: 0px 0px 20px 0px !important;
    margin: 0px 70px 0px 70px;
}

/* On masque ce qui dépasse sur le conteneur principal */
.p9-carousel-boucle-vendez {overflow: hidden;}

.p9-carousel-boucle-vendez .swiper-slide {
  transition: opacity 0.4s ease;
}


/* Séparateur 2 couleurs personnalisé */
.p9-residence-detail-avancementprojet-mobile .elementor-divider .elementor-divider-separator {
    background: linear-gradient(
        to right,
        var(--e-global-color-accent) 0%,
        var(--e-global-color-accent) 50%,
        var(--e-global-color-primary) 51%,
        var(--e-global-color-primary) 80%,
        var(--e-global-color-accent) 81%,
        var(--e-global-color-accent) 100%
    );
	height:2px;
    border-block-start: 0 !important;
}