/*
Theme Name: Divi Child
Template: Divi
Description: Divi Child Theme
Version: 1.0.2
*/

/* ================== REGLAGE MENU DU THEME ================== obsolète
 * n'est plus utilisé depuis passage en module menu specifique dans entete DiviBuilder
 * menu principal : ajout d'un padding pour éviter superposition avec le logo
 *
#et-top-navigation {
	padding-left: 170px !important;
}

/* blocage de l'icone rechercher à droite sur la 1ère ligne du menu principal *
@media only screen and (min-width: 981px) {
	#et_top_search {
		position : absolute !important;
		right : -50px !important;
		margins : 0 !important;
	}
}

/* changer la couleur du menu hamburger
 *
span.mobile_menu_bar:before{
	color: #d32b32 ;
}
*/


/* =========== DESACTIVE MENU HAMBURGER SUR MENU SECONDAIRE ==============
 * ajouter la classe "desactive-menu-hamburger" sur les modules menus secondaires (menus "Ancres")
 */
.desactive-menu-hamburger.et_pb_menu .et_pb_menu__menu,
.desactive-menu-hamburger.et_pb_fullwidth_menu .et_pb_menu__menu {
    display: flex !important;
}
 
.desactive-menu-hamburger .et_mobile_nav_menu {
    display: none !important;
}

/* =========== DESACTIVE MENU HAMBURGER SUR MENU PRINCIPAL ==========
 * ajouter la classe "pa-horizontal-scroll-menu" sur le module menu de l'entete
 * le centrage du menu (scroll) sur le lien actif est réalisé par script JS dans le thème enfant
 */

@media all and (max-width:980px){
	/* display horizontal menu */
	.pa-horizontal-scroll-menu .et_pb_menu__menu {
		display: block !important
	}

	/*hide the mobile menu*/
	.pa-horizontal-scroll-menu .et_mobile_nav_menu {
		display: none !important;
	}

	/*force the menu to fullwidth to allow for the menu to scroll within it*/
	.pa-horizontal-scroll-menu .et_pb_menu__menu {
		width: 100%;
	}

	/*set the menu to automatically overflow */
	.pa-horizontal-scroll-menu .et_pb_menu__wrap {
		overflow: auto;
		align-items: center;
	}

	/*keep the menu items horizontal and avoid stacking*/
	.pa-horizontal-scroll-menu .et_pb_menu__menu ul.et-menu {
		white-space: nowrap !important;
		flex-wrap: nowrap !important;
		margin: 10px auto;
	}

	/*hide scrollbar on IE, Edge, and Firefox*/
	.pa-horizontal-scroll-menu .et_pb_menu__wrap {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	/*hide scrollbar on Chrome, Safari, and Opera*/
	.pa-horizontal-scroll-menu .et_pb_menu__wrap::-webkit-scrollbar {
		display: none;
	}
}

@media all and (max-width:850px){
	/* ajoute une flèche au centre sous le menu pour inciter au scroll */
	.pa-horizontal-scroll-menu .et_pb_menu__menu ul.et-menu:before {
		content: '\24';
		left: 49.8%;
		position: absolute;
		font-family: 'ETMODULES';
		top: 30px;
	}
	.pa-horizontal-scroll-menu .et_pb_menu__menu ul.et-menu:after {
		content: '\23';
		right: 49.8%;
		position: absolute;
		font-family: 'ETMODULES';
		top: 33px;
	}
}


/* ================== LIGNE AVEC LARGEUR DE COLONNE SPECIFIQUE - VHH ==================
 * utilisé sur page réparation
 * ajouter la classe largeur-colonne-specifique-vhh sur la ligne concernée
 * 
 * sur mobile et tablette, chaque colonne utilise 100% de l'écran (affichage les unes sous les autres) par défaut
 * sur PC : 1 ligne affiche 3 images de hauteur identique, et de largeurs spécifiques pour une répartition d'image
 * 		vhh ( Verticale Horizontale Horizontale) 
 * les photos ont un ratio 3:4, si la hauteur vaut 3, les largeurs respectives sont 
 * col1 V : 3/4*3 = 9/4 = 2,25
 * col2 H : 4
 * col3 H : 4
 * si la somme des 3 largeurs fait 100%, 100% = 2,25 + 4 + 4 = 10,25, on obtient donc les % de largeurs des 3 colonnes
 */
@media all and (min-width:981px) {
	.largeur-colonne-specifique-vhh .et_pb_column:nth-child(1) {
		width: calc( 100%/10.25*2.25 ) !important; 
	}
	.largeur-colonne-specifique-vhh .et_pb_column:nth-child(2) {
		width: calc( 100%/10.25*4 ) !important; 
	}
	.largeur-colonne-specifique-vhh .et_pb_column:nth-child(3) {
		width: calc( 100%/10.25*4 ) !important; 
	}
}

/* ================== LIGNE AVEC LARGEUR DE COLONNE SPECIFIQUE - 20 80 ==================
 * utilisé pour les photos bullet box des pages méca et carosserie
 * ajouter la classe largeur-colonne-20-80 sur la ligne concernée
 */
@media all and (min-width:981px) {
	.largeur-colonne-20-80 .et_pb_column:nth-child(1) {
		width: 20%!important;
	}
	.largeur-colonne-20-80 .et_pb_column:nth-child(2) {
		width: 80%!important;
	}
}


/* ============= LIGNE POUR GALERIE A 5 COLONNES - 54321 =============
 * utilisé dans les pages Réparation, Restauration, pour les galeries à vignettes verticales 
 * assigner la classe "galerie-54321" à la ligne contenant le module galerie
 */

.galerie-54321 {
	width: calc( 80% + 20px + 1vw ) !important; /* 80% + padding 1er et derniere vignette */
	max-width: calc( 1080px + 20px + 1vw ) !important;
}

.galerie-54321 .et_pb_gallery_item {
	margin: 0 !important;
	padding: calc( 0.5vw + 10px) !important;
	clear: none !important;
}

@media (min-width: 1020px){	.galerie-54321 .et_pb_gallery_item { width: 20% !important;	}}
@media (max-width: 1019px){	.galerie-54321 .et_pb_gallery_item { width: 25% !important;	}}
@media (max-width: 980px){	.galerie-54321 .et_pb_gallery_item { width: 33.33% !important; }}
@media (max-width: 767px){ .galerie-54321 .et_pb_gallery_item { width: 50% !important; }}
@media (max-width: 479px){ .galerie-54321 .et_pb_gallery_item {	width: 100% !important; }}


/* ================== MODULE GALERIE - LIGHTBOX ==================
 * ajout d'un liseré blanc et d'une ombre noire autour de la photo en vue lightbox
 */

/* ajout de la bordure blanche + ombre dans la vue lightbox */
.mfp-img {
	border: 1px solid white;
	box-shadow: 0px 2px 35px 40px black; /* offset-x | offset-y | blur-radius | spread-radius | color */
	padding: 0px !important;  /* supprime le padding initial (40px 0px) de la photo */
	max-height: calc( 100vh - 80px ) !important; /* redimensionne la photo pour récupérer la hauteur de padding */
}

/* repositionnement padding pour le container de lightbox */
.mfp-container {
	padding: 40px 0 ;
}

/* repositionnement padding pour le nom et le compteur sous la photo */
.mfp-bottom-bar , 
.mfp-counter {
	padding-top: 40px ;
}

/* repositionnement padding pour le bouton fermer au dessus de la photo */
.mfp-close {
	margin-top: -40px;
}

/* ================== MODULE TEXTE DIVI ==================
 * garder apparents les réglages du module texte pendant le scroll
 */
.mce-panel .mce-stack-layout-item.mce-first {
	position: sticky !important;
	top: -60px;
}

/* ================== CENTRER VERTICALEMENT dans un bloc ==================
 * associer cette classe au conteneur englobant les contenus à centrer verticalement
 */
.centrer-verticalement {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.repartir-verticalement {
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-evenly !important;
}