/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* SCROLLBAR */
/* Style pour les navigateurs modernes */
html,
body{
  overflow-x:hidden !important;
}
::-webkit-scrollbar {
    width: 12px; /* Largeur de la scrollbar */
    height: 12px; /* Hauteur de la scrollbar (pour défilement horizontal) */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Couleur de fond de la piste */
    border-radius: 10px; /* Bords arrondis pour la piste */
}

::-webkit-scrollbar-thumb {
    background: #DDBE85; /* Couleur de la barre de défilement (bleu clair) */
    border-radius: 10px; /* Bords arrondis pour la barre */
}

::-webkit-scrollbar-thumb:hover {
    background: #C49729 !important; /* Couleur de la barre au survol */
}

/* Pour Firefox */
scrollbar-color: #DDBE85 #f1f1f1; /* Couleur de la barre et de la piste */
scrollbar-width: thin; /* Épaisseur de la scrollbar */

/* add cart modification variation marche pas */

/*.visibilitytitre {
    opacity: 1; 
    position: absolute;
    transition: opacity 0.5s ease-out;
}
.hoverbloc .hovertexte {
    opacity: 0 !important;
    transition: opacity 0.5s ease;
}
.hoverbloc:hover .hovertexte {
    opacity: 1 !important;
	
    transition: opacity 0.5s ease;
}
.hoverbloc:hover .visibilitytitre  {
    opacity: 0!important; 
}
.hoverbloc .hovertexte {
    opacity: 0 !important;
	 
    transition: opacity 0.5s ease;
}*/

/* Titre visible par défaut */
/* Conteneur du bloc */
.hoverbloc {
    position: relative;
    overflow: hidden;
}

/* Titre visible par défaut */
/* Conteneur du bloc */
.hoverbloc {
    position: relative;
    overflow: hidden;
    text-align: center; /* Centrage du texte */
}

/* Titre centré */
.visibilitytitre {
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -25%);
    transition: transform 0.5s ease-out, opacity 0.3s ease-out;
}

/* Texte caché par défaut */
.hoverbloc .hovertexte {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    position: absolute;
    justify-content:center
    transform: translate(-50%, -50%); 
}

/* Effet au survol : affichage du texte et montée fluide du titre */
.hoverbloc:hover .hovertexte {
    opacity: 1;
}

.hoverbloc:hover .visibilitytitre {
    transform: translate(-50%, -100px); /* Monte de 100px au-dessus */
}

.hoverbloc .visibilitybutton {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.hoverbloc:hover .visibilitybutton {
    opacity: 1;
   
}

/*background titre*/




#background-title {
	height: 300px !important;
    width: 300px !important; 
    overflow: hidden !important; 
    position: relative !important;
}
#background-title img {
   height: 300px !important;
    width: 300px !important; 
	object-fit: cover !important;
	transition: transform 0.3s ease;
}
#background-title:hover img {
   transform: scale(1.2);
}


@media (max-width: 1024px) {
	#background-title {
	height: 250px !important;
    width: 250px !important; 
    overflow: hidden !important; 
    position: relative !important;
}
    #background-title img {
      
    max-width: 100% !important; 
		object-fit: cover !important;
    }
}


@media (max-width: 768px) {
	#background-title {
	height: 300px !important;
    width: 300px !important; 
    overflow: hidden !important; 
    position: relative !important;
}
    #background-title img {
      height: 300px !important;
    width: 300px !important; 
		object-fit: cover !important; 
    }
}