/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Tags: translation-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.2.9.1727943121
Updated: 2024-10-03 08:12:01

*/

.sub-menu {text-align:center; width:100%;
}

.sub-menu a { margin:auto ;}

#masthead {
    position: relative; /* Assurez-vous que l'en-tête est positionné */
    z-index: 1; /* Doit être inférieur à celui du préloader */
}





/* Styles pour la première image */
#first-image {
    position: absolute; /* Positionner l'image par rapport au préloader */
    top: 0; /* Alignement en haut */
    left: 0; /* Alignement à gauche */
    width: 100%; /* Prend toute la largeur */
    height: 100%; /* Prend toute la hauteur */
    overflow: hidden; /* Cache tout débordement */
    animation: fadeInFirst 4s forwards; /* Animation pour la première image */
}

/* Styles pour la deuxième image */
#second-image {
    position: absolute; /* Positionner l'image par rapport au préloader */
    top: 0; /* Alignement en haut */
    left: 0; /* Alignement à gauche */
    width: 100%; /* Prend toute la largeur */
    height: 100%; /* Prend toute la hauteur */
    overflow: hidden; /* Cache tout débordement */
    animation: fadeInSecond 4s forwards; /* Animation pour la deuxième image */
    opacity: 0; /* Départ invisible */
}

/* Rendre les images responsives */
#first-image img, #second-image img {
    width: 100%; /* Prend toute la largeur */
    height: 100%; /* Prend toute la hauteur */
    object-fit: cover; /* Récupère l'image en gardant son aspect ratio */
}

/* Animation pour la première image */
@keyframes fadeInFirst {
    0% {
        opacity: 1; /* Pleine opacité au début */
    }
    50% { /* Reste visible pendant 2 secondes (50% de 4s) */
        opacity: 1; 
    }
    100% {
        opacity: 0; /* Disparaît complètement à la fin de l'animation */
    }
}

/* Animation pour la deuxième image */
@keyframes fadeInSecond {
    0% {
        opacity: 0; /* Départ invisible */
    }
    50% { /* 2 secondes sur 4 = 50% */
        opacity: 0; /* Reste invisible */
    }
    75% { /* 3 secondes sur 4 = 75% */
        opacity: 1; /* Devient visible pendant 2 secondes */
    }
    100% {
        opacity: 0; /* Disparaît complètement à la fin de l'animation */
    }
}

/* Cacher le préloader après l'animation */
#preloader {
    animation: hidePreloader 4s forwards; /* Animation pour cacher le préloader */
    animation-delay: 4s; /* Commencer à cacher après 4 secondes */
}

/* Keyframes pour cacher le préloader */
@keyframes hidePreloader {
    0% {
        opacity: 1; /* Visible au début */
    }
    100% {
        opacity: 0; /* Invisible à la fin */
        display: none; /* Cache complètement après l'animation */
    }
}

/* Style pour le contenu de la page */
body {
    position: relative; /* Nécessaire pour que les éléments enfants soient positionnés par rapport à ce conteneur */
    z-index: 1; /* Assurer que le contenu de la page est au-dessus du préloader */
}

/* Styles pour le footer */
footer {
    position: relative; /* Assure que le footer est toujours en bas */
    z-index: 1; /* Assure que le footer est au-dessus de l'arrière-plan */
}





/* Responsive pour mobile - max-width 825px */
@media (max-width: 825px) {
    #preloader {
        width: 100vw; /* Assure que le préloader prend toute la largeur */
        height: 100vh; /* Assure que le préloader prend toute la hauteur */
    }

    #first-image, #second-image {
        width: 100%; /* Prend toute la largeur */
        height: 100%; /* Prend toute la hauteur */
    }

    #first-image img, #second-image img {
        object-fit: cover; /* Assure que l'image couvre tout l'espace */
        height: 100%; /* Assure que l'image prend toute la hauteur */
    }
}




@media (max-width:768px){
  #photo { display: none};
}