.elementor-kit-8{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#2A2A2A;--e-global-color-text:#E6E6E6;--e-global-color-accent:#E74121;--e-global-color-35bd484:#E74121;--e-global-color-00e4c72:#E741218A;--e-global-color-55510eb:#FFFFFF;--e-global-color-801796e:#2A2A2A;--e-global-color-e00a3db:#E6E6E6;--e-global-color-d93400f:#E7412100;--e-global-color-f19c175:#0E0E0E;--e-global-color-aff18a3:#E6E6E682;--e-global-color-66d71b4:#E6E6E682;--e-global-typography-primary-font-family:"Aldrich";--e-global-typography-primary-font-size:3em;--e-global-typography-primary-font-weight:bold;--e-global-typography-secondary-font-family:"Aldrich";--e-global-typography-secondary-font-size:2em;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Rajdhani";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Rajdhani";--e-global-typography-accent-font-size:17px;--e-global-typography-accent-font-weight:700;font-family:"Rajdhani", Sans-serif;font-size:17px;font-weight:400;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{color:var( --e-global-color-35bd484 );}.elementor-kit-8 a:hover{color:var( --e-global-color-accent );}.elementor-kit-8 h1{color:#FFFFFF;font-family:"Aldrich", Sans-serif;font-size:3em;font-weight:700;}.elementor-kit-8 h2{font-family:"Aldrich", Sans-serif;font-size:2em;font-weight:bold;}.elementor-kit-8 h3{font-family:"Aldrich", Sans-serif;font-size:1.5em;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:959px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */p:last-of-type {
    margin-bottom: 0;
}

[data-elementor-type="wp-page"] {
    ul {
        margin: 1rem 0;
        padding-left: 2rem;
        
        li {
            margin: 1rem 0;
            
            ul li {
                margin: 0.5rem 0;
            }
        }
    }
}
/* Style du bouton "See Projects" */
.btn-see-projects {
  background-color: transparent;
  color: #333;
  border: 2px solid #333;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}

/* Style de l'icône à l'intérieur du bouton */
.btn-see-projects .elementor-button-icon {
  margin-left: 10px;
  transition: transform 0.3s ease;
}

/* Effet au survol du bouton */
.btn-see-projects:hover {
  background-color: #333;
  color: #fff;
}

/* Déplacement de l'icône au survol */
.btn-see-projects:hover .elementor-button-icon {
  transform: translateX(5px);
}
.c-centre {
  position: relative;
  width: 350px; /* Ajuste selon tes besoins */
  height: 350px; /* Ajuste selon tes besoins */
  background-size: cover;
  background-position: center;
  border-radius: 50%; /* Optionnel, si tu veux un effet arrondi */
  transition: transform 0.1s linear;
}

/* Animation fluide pour tous les éléments */
.boite1, .icone1, .titre1, .bouton1 {
    transition: all 0.3s ease-in-out;
}

/* Effets de hover au survol de .service1 */
.service1:hover .boite1 {
    transform: translateY(-25px); /* Décalage vers le haut */

}

.service1:hover .icone1 {
    color: white !important; /* Pour les icônes basées sur du texte */
    fill: white !important;  /* Pour les icônes SVG */
    stroke: white !important; /* Si l'icône utilise stroke */
}

/* Animation fluide pour tous les éléments */
.boite2, .icone2, .titre2, .bouton2 {
    transition: all 0.3s ease-in-out;
}

/* Effets de hover au survol de .service1 */
.service2:hover .boite2 {
    transform: translateY(-25px); /* Décalage vers le haut */

}

.service1:hover .icone2 {
    color: white !important; /* Pour les icônes basées sur du texte */
    fill: white !important;  /* Pour les icônes SVG */
    stroke: white !important; /* Si l'icône utilise stroke */
}
/* Animation fluide pour tous les éléments */
.boite3, .icone3, .titre3, .bouton3 {
    transition: all 0.3s ease-in-out;
}

/* Effets de hover au survol de .service3 */
.service3:hover .boite3 {
    transform: translateY(-25px); /* Décalage vers le haut */

}

.service1:hover .icone1 {
    color: white !important; /* Pour les icônes basées sur du texte */
    fill: white !important;  /* Pour les icônes SVG */
    stroke: white !important; /* Si l'icône utilise stroke */
}

/* Animation fluide pour tous les éléments */
.boite4, .icone4, .titre4, .bouton4 {
    transition: all 0.3s ease-in-out;
}

/* Effets de hover au survol de .service1 */
.service4:hover .boite4 {
    transform: translateY(-25px); /* Décalage vers le haut */

}

.service1:hover .icone1 {
    color: white !important; /* Pour les icônes basées sur du texte */
    fill: white !important;  /* Pour les icônes SVG */
    stroke: white !important; /* Si l'icône utilise stroke */
}
/* Animation fluide pour tous les éléments */
.boite5, .icone5, .titre5, .bouton5 {
    transition: all 0.3s ease-in-out;
}

/* Effets de hover au survol de .service1 */
.service5:hover .boite5 {
    transform: translateY(-25px); /* Décalage vers le haut */

}

.service1:hover .icone1 {
    color: white !important; /* Pour les icônes basées sur du texte */
    fill: white !important;  /* Pour les icônes SVG */
    stroke: white !important; /* Si l'icône utilise stroke */
}

/* Animation fluide pour tous les éléments */
.boite6, .icone6, .titre6, .bouton6 {
    transition: all 0.3s ease-in-out;
}

/* Effets de hover au survol de .service1 */
.service6:hover .boite6 {
    transform: translateY(-25px); /* Décalage vers le haut */

}

.service1:hover .icone1 {
    color: white !important; /* Pour les icônes basées sur du texte */
    fill: white !important;  /* Pour les icônes SVG */
    stroke: white !important; /* Si l'icône utilise stroke */
}

/* Animation fluide pour tous les éléments */
.boite7, .icone7, .titre7, .bouton7 {
    transition: all 0.3s ease-in-out;
}

/* Effets de hover au survol de .service7 */
.service7:hover .boite7 {
    transform: translateY(-25px); /* Décalage vers le haut */

}

.service1:hover .icone1 {
    color: white !important; /* Pour les icônes basées sur du texte */
    fill: white !important;  /* Pour les icônes SVG */
    stroke: white !important; /* Si l'icône utilise stroke */
}

/* Animation fluide pour tous les éléments */
.boite8, .icone8, .titre8, .bouton8 {
    transition: all 0.3s ease-in-out;
}

/* Effets de hover au survol de .service1 */
.service8:hover .boite8 {
    transform: translateY(-25px); /* Décalage vers le haut */

}

.service1:hover .icone1 {
    color: white !important; /* Pour les icônes basées sur du texte */
    fill: white !important;  /* Pour les icônes SVG */
    stroke: white !important; /* Si l'icône utilise stroke */
}

/* Animation fluide pour tous les éléments */
.boite9, .icone9, .titre9, .bouton9 {
    transition: all 0.3s ease-in-out;
}

/* Effets de hover au survol de .service9 */
.service9:hover .boite9 {
    transform: translateX(90px); /* Décalage vers le haut */

}


.service1:hover ~ .containerimage {
    background-image: url('https://www.pftoiture.be/wp-content/uploads/2025/02/charpente-de-toit-en-pente.webp');
}

.service2:hover ~ .containerimage {
    background-image: url('https://www.pftoiture.be/wp-content/uploads/2025/02/ardoises-artificielles-toiture.webp');
}

.service3:hover ~ .containerimage {
    background-image: url('https://www.pftoiture.be/wp-content/uploads/2025/02/etancheite-impeccable-plateforme.webp');
}

.service4:hover ~ .containerimage {
    background-image: url('https://www.pftoiture.be/wp-content/uploads/2025/02/lucarne-de-toit-en-construction.webp');
}

.service5:hover ~ .containerimage {
    background-image: url('https://www.pftoiture.be/wp-content/uploads/2025/04/bardage-et-toiture-en-ardoises-synthetiques.webp');
}

.service6:hover ~ .containerimage {
    background-image: url('https://www.pftoiture.be/wp-content/uploads/2025/04/tuiles-rouges.webp?v=2');
}

.service7:hover ~ .containerimage {
    background-image: url('https://www.pftoiture.be/wp-content/uploads/2025/02/AdobeStock_480720687.webp');
}

.service8:hover ~ .containerimage {
    background-image: url('https://www.pftoiture.be/wp-content/uploads/2025/02/IMG-20241001-WA0019.webp');
}

/* Ajoute le même principe jusqu'à service8 */

.containerimage {
    background-image: url('https://www.pftoiture.be/wp-content/uploads/2025/02/logo_carre-1.webp'); /* Image par défaut */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; /* Empêche la répétition */
    transition: background-image 0.5s ease-in-out;
}
/*Améliorer les animations d'entrée*/
 
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translate3d(0,-30px,0)
    }
 
    to {
        opacity: 1;
        transform: none
    }
}
 
.elementor-element.fadeInDown {
    animation-name: fadeDown
}
 
@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px,0,0)
    }
 
    to {
        opacity: 1;
        transform: none
    }
}
 
.elementor-element.fadeInLeft {
    animation-name: fadeLeft
}
 
@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translate3d(30px,0,0)
    }
 
    to {
        opacity: 1;
        transform: none
    }
}
 
.elementor-element.fadeInRight {
    animation-name: fadeRight
}
 
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0,30px,0)
    }
 
    to {
        opacity: 1;
        transform: none
    }
}
 
.elementor-element.fadeInUp {
    animation-name: fadeUp
}/* End custom CSS */