/*====HEADER====*/
/*====TOP PANEL====*/
/*Dans le bandeau top Haut, masquer les Widgets qui sont dans apparence/personnaliser/Widget/Top header Left et qui affichent les liens vers My account, Whislist & Compare List*/
/*#text-1.widget.widget_text {display:none !important;}
#text-2.widget.widget_text {display:none !important;}
#text-3.widget.widget_text {display:none !important;}*/
/*or (si on a cloné le site et que les "text-1,2,3,..." ne portent pas les mêmes noms, il faut alors adapter le CSS*/
/*#text-4.widget.widget_text {display:none !important;}
#text-5.widget.widget_text {display:none !important;}
#text-6.widget.widget_text {display:none !important;}*/


/*Pour maintenir le bandeau Top Panel (Header-top) des numeros de tel toujours visible et en haut*/
.header-top {
min-height:20px;
padding-top:1px; padding-bottom:8px;
position: fixed; /* Fixe le bandeau en haut */
top: 0; /* Place le bandeau en haut de la page */
left: 0; /* Assure que le bandeau commence à gauche */
right: 0; /* Assure que le bandeau s'étend jusqu'à droite */
width: 100%; 
max-width: 100vw;
padding-left: 0;
padding-right: 0;
display: flex;
/*  justify-content: center;*/
align-items: center;
text-align: center;/*margin-bottom:10px;*/
z-index: 1000;
/*background: linear-gradient(to bottom, #961100, transparent) !important;*/
/*background-image: url(https://mototrust.motopartsplace.com/wp-content/uploads/2024/08/Mototrust.net-Trame-de-Fond.webp);*/
/* background-color: #dd9933;*/
background:   linear-gradient(to bottom, #961100, transparent); /* Dégradé */
/*url(https://mototrust.motopartsplace.com/wp-content/uploads/2024/08/Mototrust.net-Trame-de-Fond.webp); 
background-attachment: scroll;
background-repeat: repeat;
background-position: left top;*/
/*background-size: cover;*/
/*background-position: center;*/
/*border:1px blue solid;*/
}

/* pour centrer les numeros de tel du bandeau au milieu de la page*/
@media screen and (min-width: 768px) {
.header-top .top-widgets-left {
justify-content: center;
}}

/*couleur de "Helpline"*/
.header-top, .tz-login-heading.inline .my-account::after {
color: #ffe472;}

/*block qui contient le bandeau des contacts (helpline) et qui fait partie de #block-24.widget.widget_block ou #block-8.widget.widget_block*/
.bouton_mail {outline: none; border: none; line-height: 2em; padding: 0px 1em; margin: 0px 0px 0px 1em; display: inline-block; border-radius: 0.25em; cursor: pointer; width: auto; height: inherit; font-family: inherit; font-size: 0.875em; text-align: center; text-decoration: none; appearance: none; color: #961100 !important; background-color: rgb(255, 255, 255);}

#mail_button .bouton_mail span {color: #961100 !important; }

/*configuer apparence bandeau du haut sur petits écrans*/
.helpline {display:flex;
justify-content: flex-start;}


@media screen and (max-width: 768px) {
/*block qui contient le bandeau des contacts (helpline) et qui fait partie de #block-24.widget.widget_block ou #block-8.widget.widget_block*/
.block2 { 
width: 100%;
max-width: 100vw;
display: flex ; justify-content:center;	}
		
/*.helpline {display:none;}*/
		
.header-top {
min-height: 55px; /* Ajuste la hauteur automatiquement */
padding-top: 0 !important; /* Retire le padding en bas */
padding-bottom: 0 !important; /* Retire le padding en bas */
display: flex; /* Utilise flex pour gérer l'espace */
/*  flex-direction: column; */
max-width: 100vw; 
width: 100%; }
    
/*Dans le Top Bandeau Haut, code pour cacher le Widget de droite "TZ Login/Register"*/
.top-widgets-right {display: none;}		
		
/* .top-widgets-left > * {
flex: 1 1 100%; 
margin: 5px; 
box-sizing: border-box; 
}*/

.top-widgets-left { /*border:1px white solid;*/
padding: 0 1em;
max-width: 100vw; 
width: 100%;}
		
.top-widgets-left .widget	{margin: 0 0 0em 0;
padding: 0;
display: inline-block;}

/*Dans le bandeau top Haut, c'est le Widget qui a été créé pour recevoir le code du fichier template-parts/Top-panel.php afin de pouvoir afficher le bandeau des contacts*/
/*Ici, le système attribue le nom de "block-24" mais sur un autre clone de site, il s'agit du "block-8"*/
#block-24.widget.widget_block{
width:100%; /* Prend toute la largeur disponible */
max-width: 100vw; /* Limite la largeur à celle de la fenêtre */	
/*	border:1px grey solid;*/}				
/*or*/
/*=========#block-8.widget.widget_block{
width:100%;
max-width: 100vw;
}===================================*/
		

.info-message-icon .widget-heading {}
.info-message-icon .logo-call-me {}
.info-message-icon i.logo-widget {}		
.info-message-icon  {
/*background-color: black;*/
display: inline-flex;		 
}
}

/*couleur lettres telephones francais et espagnol sur bande tout en haut page*/
.info-message-icon .logo-call-me {color: #fff681 ; }
.info-message-icon .widget-heading {color: #ffc72b !important;}


/*===boutons qui servent à fermer et ouvrir le bandeau du haut====*/
.close-button {
font-size: 20px;
cursor: pointer;
color: #ffe272; /* Couleur de la croix */
text-shadow: -1px -1px 0 #000, 1px -1px 0 rgba(150, 17, 0, 0.8), -1px 1px 0 rgba(150, 17, 0, 0.8), 1px 1px 0 rgba(150, 17, 0, 0.8), 1px 1px 5px rgba(150, 17, 0, 1) !important;
position: absolute;
right: 10px;
top: 6px;
}

.open-button {
font-size: 20px;
cursor: pointer;
color: #ffe272;
text-shadow: -1px -1px 0 #000, 1px -1px 0 rgba(150, 17, 0, 0.8), -1px 1px 0 rgba(150, 17, 0, 0.8), 1px 1px 0 rgba(150, 17, 0, 0.8), 1px 1px 5px rgba(150, 17, 0, 1) !important;
position: fixed;
right: 10px;
top: 1px;
display: none; /* Caché par défaut */
}

/*Bandeau en position réduite (non dépliée)*/
.reduced {
height: 4px !important;
background-color:  #961100 !important;
overflow: hidden;
padding:0px;
transition: margin-top 0.5s ease;
}

.reduced .close-button {
display: none; /* Cache la croix de fermeture */
}

.reduced .open-button {
display: block !important; /* Affiche la double flèche pour rouvrir */
z-index:200;
}



/*===boutons qui servent à fermer et ouvrir le bandeau du haut sur les différentes tailles d'écrans====*/

/*@media screen and (min-width: 768px) {
.header-top.reduced .top-widgets-left, .header-top.reduced .top-widgets-right, .header-top.reduced .widget-heading, .header-top.reduced .chromium-icon-telephone-call-receiver.logo-widget, .header-top.reduced .info-message-icon i.logo-widget {
max-height:0em !important;
padding: 0em !important;
margin: 0em !important;
height: 0em !important;
background-color:  #961100 !important;}}*/

@media screen and (min-width: 768px) {
.header-top.reduced{
/*border-top:4px #961100 solid;*/
min-height:0em !important;
max-height:0em !important;
padding: 0em !important;
margin: 0em !important;
height: 0em !important;
background-color:  #961100 !important;
border-bottom:4px #961100 solid;
transition: margin-top 0.5s ease;}
}

@media screen and (min-width: 768px) {
.header-top.reduced * {
min-height:inherit;
max-height:inherit;
padding: inherit;
margin: inherit;
height: inherit;
background-color:  inherit;
transition: margin-top 0.5s ease;}} 

@media screen and (max-width: 768px) {
.header-top.reduced {
/*	border-top:4px #961100 solid;*/
min-height:0em !important;
max-height:0em !important;
padding: 0em !important;
margin: 0em !important;
height: 0em !important;
background-color:  #961100 !important;
border-bottom:4px #961100 solid;
transition: margin-top 0.5s ease;}
}


@media screen and (max-width: 768px) {
.header-top.reduced * {
min-height:inherit;
max-height:inherit;
padding: inherit;
margin: inherit;
height: inherit;
background-color:  inherit;
transition: margin-top 0.5s ease;}} 





/*metre le site en largeur 100%, sans marges latérales*/
.site-content {padding: 0 0em;}




/*====HEADER====*/
/*configuration du mini cart qui a été ajouté grace au widget "mini-cart"*/
span.wc-block-mini-cart__badge {background-color: #fdb819 !important;
color: rgb(207, 46, 46);
border : 3px solid rgb(207, 46, 46);/*rgb(207, 46, 46)*/}

.wc-block-mini-cart__button:hover  {
-webkit-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
background-color: white !important;
color : #961100 !important;
}

button .wc-block-mini-cart__button.wc-block-mini-cart__amount span:hover {
color : #fff !important;}

/*taille de la police du bouton panier*/
span.wc-block-mini-cart__amount {font-size:1rem;}

.wc-block-mini-cart__icon {
height: 1.5em !important;
/* margin: -.25em;*/
width: 1.5em !important;
}

.wc-block-mini-cart__button {
padding: .75em .3em !important;
}

.wc-block-mini-cart__amount {color: rgb(56, 53, 67);}

.wc-block-mini-cart__amount:hover {
-webkit-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
color : #961100 !important;}


















/*bandeau des offres*/
@media (min-width: 768px) {
.elementor-701 .elementor-element.elementor-element-804c0a2 {
background-color: #f8f8f8 !important;
    }
}

@media (max-width: 768px) {
    .elementor-701 .elementor-element.elementor-element-804c0a2 {
    flex-wrap: nowrap !important;
    /*width: auto;*/
display: flex;
/*align-items: stretch;
flex: 0 0 auto;*/
/*max-width: 100%;
				width:100%;
						box-sizing: border-box;*/

background-color: #f8f8f8 !important;
/*padding-left: 0%;
padding-right: 0%;*/
				/*height:100px !important;*/
		
		}
		
.e-con-boxed.e-flex {
    flex-direction: row !important;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: normal;
    align-content: normal;
}

.e-con.e-flex {
    flex-direction: row !important;
    flex-basis: auto;
    flex-grow: 0;
   flex-shrink: 1;
		} 		
		
		
		}







@media only screen and (min-width: 767px) {
.primary-nav, .logo-group-nav {
    border-top:3px white solid;
}}

/*menu mobile - bouton ouverture et fermeture du menu*/
.mega-toggle-block.mega-menu-toggle-block.mega-toggle-block-1 {
		border: 1px white solid;
		border-radius: 6px;
	padding: 0px 2px 0px 4px;
		background-color : rgb(253, 184, 25);
}

@media only screen and (max-width: 768px) {
    #mega-menu-wrap-primary-nav .mega-menu-toggle {
        background-color: transparent !important;			
    }

/* Menu mobile placé en haut de la page */
    .primary-nav {
     /*  border: red 1px solid;*/
        margin-top: 0 !important;
        position: fixed;
        top: 70px; /* Positionne le menu tout en haut de la page */
       /* left: 0;*/ /* Aligne le menu à gauche */
        width: 100%; /* Assure que le menu prenne toute la largeur de la page */
        z-index: 9999; /* Assure que le menu soit au-dessus des autres éléments */
    }
}


/*barre de recherche*/
@media (max-width: 768px) {
		 .wc-block-customer-account__account-icon {
 padding: 0.7em 0.5em 0.5em 0em !important;
		}
.dgwt-wcas-sf-wrapp{
	/*	zoom: 1;*/
 max-width: 100vw;
position: relative; /* position relative */
    width: 90%; /* définit la largeur du conteneur */
    margin: 0 auto; /* centre le conteneur horizontalement */
		}
}


			
		
/* barre de recherche - alignement des différents éléments en version mobile*/
@media (max-width: 768px) {
    .site-branding .hgroup-sidebar {
        display: flex;
        flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
        width: 100%; /* S'assure que le conteneur occupe toute la largeur */
        gap: 0em; /* Espace entre les éléments */
        /*justify-content: center;*/ /* Centre les éléments */
				margin: 0px !important;
				padding-left:0px !important;
				padding-right:0px !important;
    }

    /* Premier enfant occupe 90% de la largeur */
    .site-branding .hgroup-sidebar .widget:nth-child(1) {
        flex: 1 1 100% !important; /* Prend 90% de la largeur */
        box-sizing: border-box;
        padding-bottom: 0.8em; /* Espace entre la première et la deuxième ligne */
        display: flex; 
        justify-content: center; 
        align-items: center; 
        max-width: 100% !important; /* Assurez-vous qu'il ne dépasse pas 90% */
       /* margin: 0 ;*/ /* Centre le premier enfant */
    }

    /* Les trois autres enfants doivent être sur la même ligne */
    .site-branding .hgroup-sidebar .widget:nth-child(n+2) {
       /* flex: 1 1 auto;*/ /* Permet aux enfants d'ajuster leur taille automatiquement */
       /* box-sizing: border-box;*/
				 justify-content: space-between;
				display: flex !important;
				flex-wrap:nowrap !important;
				max-width: 100vw !important;
				width: 100vw !important;
        margin: 0 ! important; /* Assurez-vous qu'il n'y a pas de marges indésirables */
    }

    /* Ajustement des largeurs spécifiques pour les trois derniers éléments */
    .site-branding .hgroup-sidebar .widget:nth-child(2) {
        flex: 0 1 34%; /* Largeur spécifique pour le deuxième élément */
        min-width: 130px; /* Assurez-vous qu'il ne rétrécisse pas trop */
				 transform: scale(0.87);
							 justify-content: flex-start !important;
				display: flex !important;
			/*	flex-wrap:nowrap !important;
				max-width: 100vw !important;
				width: 100vw !important;*/
    }

    .site-branding .hgroup-sidebar .widget:nth-child(3) {
        flex: 0 1 27%; /* Largeur spécifique pour le troisième élément */
        min-width: 94px; /* Assurez-vous qu'il ne rétrécisse pas trop */
											 justify-content: center !important;
				display: flex !important;
    }

    .site-branding .hgroup-sidebar .widget:nth-child(4) {
        flex: 0 1 32%; /* Largeur spécifique pour le quatrième élément */
        min-width: 131px; /* Assurez-vous qu'il ne rétrécisse pas trop */
											 justify-content: flex-end !important;
				display: flex !important;
    }

    /* Pour éviter le débordement du contenu interne, sans scale pour le premier élément */
    .site-branding .hgroup-sidebar .widget > * {
        width: auto; /* Prend toute la largeur disponible dans chaque conteneur */
        box-sizing: border-box; /* Assurez-vous que le padding et la bordure sont inclus dans la largeur */
    }

    /* Appliquer scale(0.8) uniquement aux 3 derniers enfants */
    .site-branding .hgroup-sidebar .widget:nth-child(n+2) > * {
        transform: scale(0.93); /* Réduit légèrement la taille du contenu uniquement pour le 2ème, 3ème et 4ème éléments */
    }
}















@media (min-width: 1200px) {
    .site-boxed:not(.chromium-elementor-header-enabled) .site-branding, .site-boxed .mega-menu-wrap {
      /* margin-top:45px;*/
				transition: margin-top 0.5s ease;
    }
}

@media (max-width: 768px) {
    .site-boxed:not(.chromium-elementor-header-enabled) .site-branding, .site-boxed .mega-menu-wrap {
        margin-top:55px;
				transition: margin-top 0.5s ease;
					
    }
}


@media screen and (min-width: 768px) {
		.logo-pos-left:not(.chromium-elementor-header-enabled) .site-branding .hgroup-sidebar {
        text-align: right;
        order: 4;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;				
				/*border: 1px solid black;*/
    }

		
	.logo-pos-left:not(.chromium-elementor-header-enabled) .site-branding .hgroup-sidebar	> * {
			  margin: 0  0 0 2em !important;
		}
		
	  .logo-pos-left:not(.chromium-elementor-header-enabled) .site-branding .hgroup-sidebar > *:first-child {
        margin-bottom: 1.6em !important;
    }
}








@media screen and (min-width: 768px) {
    .site-branding .hgroup-sidebar {
        padding: 1.143em 0.5em;
    }
}

@media (max-width: 768px) {
		.site-branding .hgroup-sidebar, .primary-nav .nav-sidebar {
    padding: 0 0em;
    /*text-align: center;
    vertical-align: middle;*/
				        display: flex;
        flex-wrap: wrap;
        justify-content: center;
				/*flex-basis:90%;*/
		}}




/**************/













/*@media (max-width: 768px) {
		.site-branding .hgroup-sidebar .widget {
    display: inline-block;
 
    padding: 1em 0.2em;
				margin: 0px;
				border:red 1px solid;
				background-color: transparent;
    vertical-align: top;
/* margin: inherit;*/
		/*}}*/

/* .site-branding .hgroup-sidebar .widget > * {
 transform: scale(0.7);
transform-origin: left; }*/
/*min-width: 99%;*/
/*max-width: 100%;*/
/*	width: 100%;*/		
    

	 



@media screen and (max-width: 768px) {
    .hgroup-sidebar .dgwt-wcas-search-wrapp {
        min-width: 400px; /*border:1px red solid;*/
    }
.site .dgwt-wcas-search-wrapp {				margin-bottom:1.5em;
}}


.site .dgwt-wcas-search-wrapp {
    max-width: 100%;
   /* float: left;border:1px white solid;*/
}
.dgwt-wcas-search-wrapp {
    position: relative;
    line-height: 100%;
    display: block;
    color: #444;
   /* min-width: 230px;*/
    width: 100%;
    text-align: left;
    margin: 0 auto;
   /* -webkit-box-sizing: border-box;*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*************/

/*afficher la barre de recherche en mode 768 max*/
@media screen and (max-width: 768px) {
html:not(.dgwt-wcas-overlay-mobile-on) .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon .dgwt-wcas-search-form {
    opacity: 1;
    display: inline-block;
    /*position: asolute;*/
    left: 50%;
		/*right:50%;*/
    /*top: calc(100% + 8px);*/
		top:0px;
    min-width: 90%;
		min-width: 95%;
		width: 90%;
    z-index: 1000;
		  transform: translateX(-50%);
		}
			.dgwt-wcas-search-icon {display:none;}
		/*.dgwt-wcas-search-icon-arrow {display:block;}*/
}


/*afficher la barre de recherche en mode 768 max*/
@media screen and (max-width: 1200px) {
html:not(.dgwt-wcas-overlay-mobile-on) .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon .dgwt-wcas-search-form {
    opacity: 1;
    display: inline-block;
    /*position: asolute;*/
    left: 50%;
		/*right:50%;*/
    /*top: calc(100% + 8px);*/
		top:0px;
    min-width: 90%;
		min-width: 95%;
		width: 90%;
    z-index: 1000;
		  transform: translateX(-50%);
		}
			.dgwt-wcas-search-icon {display:none;}
		/*.dgwt-wcas-search-icon-arrow {display:block;}*/
html:not(.dgwt-wcas-overlay-mobile-on) .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon {
    max-width: 20px;
		margin-bottom:2em !important;
}
}














/*effet blink sur le bouton de l'email*/
@keyframes blink {
    0%, 100% {
        opacity: 1; /* Complètement visible */
    }
    50% {
        opacity: 0; /* Complètement transparent */
    }
}
/*effet rebond sur le bouton de l'email*/
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* Position originale */
    }
    40% {
        transform: translateY(-10px); /* Monte de 10px */
    }
    60% {
        transform: translateY(-5px); /* Monte de 5px */
    }
}
/*effet rotation*/
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg); /* Tourne complètement */
    }
}
/*effet couleur clignotante*/
@keyframes colorChange {
    0% {
        color: #961100; /* Couleur initiale */
    }
    50% {
        color: #fdb819; /* Nouvelle couleur */
    }
    100% {
        color: #961100; /* Retour à la couleur initiale */
    }
}
/*effet pulsation*/
@keyframes pulse {
    0%, 100% {
        transform: scale(1); /* Taille normale */
    }
    50% {
        transform: scale(1.1); /* Agrandi de 10% */
    }
}





/*bouton de l'email*/
.bouton_mail2 {
    outline: none;
    border: none;
    line-height: 1em; /* Vous pouvez ajuster cela selon vos besoins */
    padding:  0px 0.5em;
    margin: 0px 0px 0px 0.5em;
    display: flex; /* Changez cela de inline-block à inline-flex */
    align-items: center; /* Centre l'icône verticalement */
    border-radius: 0.25em;
    cursor: pointer;
    font-family: inherit;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    appearance: none;
    color: #961100 !important;
    background-color: rgb(255, 255, 255);
		    /* Ajout de l'animation de clignotement */
    /*animation: blink 8s infinite;*/ /* Durée de l'animation */
		 /*animation: bounce 6s infinite;*/ /* Applique l'animation */
		 animation: rotate 12s infinite linear; /* Applique l'animation */
		 /*animation: colorChange 1.5s infinite;*/ /* Applique l'animation */
		  /* animation: pulse 1.5s infinite;*/ /* Applique l'animation */
}

.bouton_mail2:hover { box-shadow: 0 0 20px -1px #f3c402; background: rgba(250, 215, 68, 1) !important;}

.bouton_mail2 img {
    width: 0.5em; /* Set width for the image */
    height: 0.5em; /* Set height for the image */
    /*margin-right: 8px;*/ /* Add space between the icon and text */
   font-size: 2em; /* Ajustez la taille de la police ici */
		 text-align: center;
		color: #fdb819 !important;
    transition: transform 0.2s ease; /* Transition pour un effet fluide */
}

.bouton_mail2:hover img {
    transform: scale(1.5); /* Agrandit l'icône au survol */
}




 .info-message-icon i.logo-widget2 {
    display: flex;
    align-items: center;
		 justify-content:center;
   font-size: 2.6em;

}



@media screen and (max-width: 768px) {
		.spanspan {
				display:flex; 
				align-items:center;
				        /*writing-mode: vertical-rl; *//* Orientation verticale du texte */
       /* text-orientation: upright; *//* Permet de garder chaque lettre droite */	
		padding-left:0.3em}}

@media screen and (min-width: 768px) {
		.spanspan {
				display:none;		}}



@media screen and (max-width: 768px) {
			.spanspan2 {
				   display: none;}}

	@media screen and (min-width: 768px) {
			.spanspan2 {
				   display: flex !important;
    flex-wrap: nowrap !important; flex-direction: row;}}




@media screen and (min-width: 768px) {
 .container_small  {
/*background-color: black;*/
	/*display:inline-block;*/ display: flex;
		 flex-direction:row; justify-content:center;
}	}

@media screen and (max-width: 768px) {
 .container_small  {
/*background-color: black;*//*position:relative;*/
display: flex; flex-wrap: wrap;
		 /*flex-direction:row;*/justify-content:center;
		max-width: 100vw;
		 width: 90%;
		/* margin-left:50%;
		 margin-right:50%;*/
}	}












.header_cover {
display: flex;	
width: 98%;
justify-content: center;
max-width: 100vw;
align-items: center;
/*background-color: red;*/
}


/*pour placer correctement les numeros de tel francais et espagnol selon le type d'affichage*/
.info-message-icon .logo-call-me {  display: flex !important; flex-wrap: nowrap !important;}
.contact-bandeau a {color: #fff681 ; display: flex !important; flex-wrap: nowrap !important; border-bottom:2px #961100 solid; width: 100%; font-size: 1.1em !important; justify-content:center !important; 
		font-family: sriracha !important;  }
.contact-bandeau2 {color: #fff681 !important; display: flex !important; flex-wrap: nowrap !important; border-bottom:2px #961100 solid; width: 100%; padding-left:10px; padding-right:10px; justify-content:center; font-size: 1.1em !important;  }
.logo-call-me a:hover {color: white !important;}

@media screen and (max-width: 768px) {
.info-message-icon .logo-call-me {font-size: 0.9em;  display: flex !important;  flex-wrap: wrap !important;   /*width: fit-content;*/ /*justify-content: center !important;*/ /*margin: 0 auto; 
   align-items: center !important; max-width:100%; position: relative; margin-left:50%; margin-right:50;*/
    /*left: 0;*/ /* Assurez-vous que cela ne cause pas de décalage */}
.info-message-icon .logo-call-me .contact-bandeau a {color: #ffe272 !important;  width: 100%;  border-bottom:2px #961100 solid; font-size: 1.1em !important;  display: flex !important; flex-wrap: wrap !important;}
.info-message-icon .logo-call-me .contact-bandeau2 {display:none !important; font-size: 1.2em !important;
		/*height:5px;
    color: #ffe272 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    border: 1px red solid;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;  position: relative; width:100%; margin-left:50%; margin-right:50%;*/
   /* width: fit-content;*/ /* Ajuste la largeur à son contenu */
    /*margin: 0 auto;*/ /* Centrage horizontal */
}
.info-message-icon .logo-call-me .contact-bandeau a:hover {color: white !important;}
}		

@media screen and (max-width: 768px) {
		.info-message-icon i.logo-widget{font-size: 2em;
		}}

.site-header {margin-top: 0px !important;}

body .site {
		background: 
  /*linear-gradient(to bottom, #961100, transparent),*/ /* Dégradé */
  url(https://mototrust.motopartsplace.com/wp-content/uploads/2024/10/trame10.webp); /* Image de fond */
/*background-size: cover;*/
/*background-position: center;*/
    background-repeat: repeat;
    background-position: left top;
    background-attachment: scroll;
		}
















/*Contour boite de recherche*/
.dgwt-wcas-search-input {
		color : #54595F !important;
  box-shadow: 		    -1px -1px 0 #000,   /* Contour noir en haut à gauche */
    1px -1px 0 rgba(13, 13, 13, 0.8),    /* Contour noir en haut à droite */
    -1px 1px 0 rgba(13, 13, 13, 0.8),    /* Contour noir en bas à gauche */
    1px 1px 0 rgba(13, 13, 13, 0.8),     /* Contour noir en bas à droite */
			
			1px 1px 5px rgba(13, 13, 13, 1) !important; 
    box-shadow: inset 0 0.01em 0.4em rgba(253, 203, 197, 0.2), inset 0 0.04em 0.18em rgba(203, 116, 105, 0.3), inset 0 0.98em 1em rgba(255, 146, 133, 0.3), inset 0 -0.82em 0.68em -0.64em rgba(150, 17, 0, 0.3), inset 0 0.07em 0.11em -0.04em rgba(255, 255, 255, 1), inset 0 0.39em 0.56em -0.36em rgba(255, 255, 255, 0.5), 0px 0px 4px 1px rgba(13, 13, 13, 0.69) !important;
    -webkit-box-shadow: inset 0 0.01em 0.4em rgba(253, 203, 197, 0.2), inset 0 0.04em 0.18em rgba(203, 116, 105, 0.3), inset 0 0.98em 1em rgba(255, 146, 133, 0.3), inset 0 -0.82em 0.68em -0.64em rgba(150, 17, 0, 0.3), inset 0 0.07em 0.11em -0.04em rgba(255, 255, 255, 1), inset 0 0.39em 0.56em -0.36em rgba(255, 255, 255, 0.5), 0px 0px 4px 1px rgba(13, 13, 13, 0.69) !important;
    -moz-box-shadow: inset 0 0.01em 0.4em rgba(253, 203, 197, 0.2), inset 0 0.04em 0.18em rgba(203, 116, 105, 0.3), inset 0 0.98em 1em rgba(255, 146, 133, 0.3), inset 0 -0.82em 0.68em -0.64em rgba(150, 17, 0, 0.3), inset 0 0.07em 0.11em -0.04em rgba(255, 255, 255, 1), inset 0 0.39em 0.56em -0.36em rgba(255, 255, 255, 0.5), 0px 0px 4px 1px rgba(13, 13, 13, 0.69) !important;		
}







/*mise en forme du lien "favoris" dans le header*/
.favoris {
		color : #fdb91a !important;
		font-weight:600;
  text-shadow: 		    -1px -1px 0 #000,   /* Contour noir en haut à gauche */
    1px -1px 0 rgba(13, 13, 13, 0.8),    /* Contour noir en haut à droite */
    -1px 1px 0 rgba(13, 13, 13, 0.8),    /* Contour noir en bas à gauche */
    1px 1px 0 rgba(13, 13, 13, 0.8),     /* Contour noir en bas à droite */
			
			1px 1px 5px rgba(13, 13, 13, 1) !important; 
    text-shadow: inset 0 0.01em 0.4em rgba(253, 203, 197, 0.2), inset 0 0.04em 0.18em rgba(203, 116, 105, 0.3), inset 0 0.98em 1em rgba(255, 146, 133, 0.3), inset 0 -0.82em 0.68em -0.64em rgba(150, 17, 0, 0.3), inset 0 0.07em 0.11em -0.04em rgba(255, 255, 255, 1), inset 0 0.39em 0.56em -0.36em rgba(255, 255, 255, 0.5), 0px 0px 4px 1px rgba(13, 13, 13, 0.69) !important;
    -webkit-text-shadow: inset 0 0.01em 0.4em rgba(253, 203, 197, 0.2), inset 0 0.04em 0.18em rgba(203, 116, 105, 0.3), inset 0 0.98em 1em rgba(255, 146, 133, 0.3), inset 0 -0.82em 0.68em -0.64em rgba(150, 17, 0, 0.3), inset 0 0.07em 0.11em -0.04em rgba(255, 255, 255, 1), inset 0 0.39em 0.56em -0.36em rgba(255, 255, 255, 0.5), 0px 0px 4px 1px rgba(13, 13, 13, 0.69) !important;
    -moz-text-shadow: inset 0 0.01em 0.4em rgba(253, 203, 197, 0.2), inset 0 0.04em 0.18em rgba(203, 116, 105, 0.3), inset 0 0.98em 1em rgba(255, 146, 133, 0.3), inset 0 -0.82em 0.68em -0.64em rgba(150, 17, 0, 0.3), inset 0 0.07em 0.11em -0.04em rgba(255, 255, 255, 1), inset 0 0.39em 0.56em -0.36em rgba(255, 255, 255, 0.5), 0px 0px 4px 1px rgba(13, 13, 13, 0.69) !important;
}
.favoris:hover{
		color : white !important;}

/*mise en forme du lien "Compte" dans le header*/
#block-10 .wp-block-woocommerce-customer-account a, wc-block-customer-account__account-icon svg {
	/*overflow: visible;*/
		color:  #fdb91a !important;
		font-weight:600;
  text-shadow: -1px -1px 0 #000,   /* Contour noir en haut à gauche */
    1px -1px 0 rgba(13, 13, 13, 0.8),    /* Contour noir en haut à droite */
    -1px 1px 0 rgba(13, 13, 13, 0.8),    /* Contour noir en bas à gauche */
    1px 1px 0 rgba(13, 13, 13, 0.8),     /* Contour noir en bas à droite */
			
			1px 1px 5px rgba(13,13,13, 1) !important; 
    text-shadow: inset 0 0.01em 0.4em rgba(253, 203, 197, 1), inset 0 0.04em 0.18em rgba(203, 116, 105, 0.3), inset 0 0.98em 1em rgba(255, 146, 133, 0.3), inset 0 -0.82em 0.68em -0.64em rgba(150, 17, 0, 0.3), inset 0 0.07em 0.11em -0.04em rgba(255, 255, 255, 1), inset 0 0.39em 0.56em -0.36em rgba(255, 255, 255, 0.5), 0px 0px 4px 1px rgba(13, 13, 13, 0.69) !important;
    -webkit-text-shadow: inset 0 0.01em 0.4em rgba(253, 203, 197, 0.2), inset 0 0.04em 0.18em rgba(203, 116, 105, 0.3), inset 0 0.98em 1em rgba(255, 146, 133, 0.3), inset 0 -0.82em 0.68em -0.64em rgba(150, 17, 0, 0.3), inset 0 0.07em 0.11em -0.04em rgba(255, 255, 255, 1), inset 0 0.39em 0.56em -0.36em rgba(255, 255, 255, 0.5), 0px 0px 4px 1px rgba(13, 13, 13, 0.69) !important;
    -moz-text-shadow: inset 0 0.01em 0.4em rgba(253, 203, 197, 0.2), inset 0 0.04em 0.18em rgba(203, 116, 105, 0.3), inset 0 0.98em 1em rgba(255, 146, 133, 0.3), inset 0 -0.82em 0.68em -0.64em rgba(150, 17, 0, 0.3), inset 0 0.07em 0.11em -0.04em rgba(255, 255, 255, 1), inset 0 0.39em 0.56em -0.36em rgba(255, 255, 255, 0.5), 0px 0px 4px 1px rgba(13, 13, 13, 0.69) !important;
}
#block-10 .wp-block-woocommerce-customer-account a:hover {
		color:  white !important;  text-decoration: none !important;}

/*appliquer ombre portée sur SVG du lien compte client du header*/
/*.wp-block-woocommerce-customer-account svg {
    filter: drop-shadow(1px 1px 4px rgba(13,13,13, 0.9));
}*/
.wp-block-woocommerce-customer-account svg {
    filter: 
        drop-shadow(0px -1px 0 #000) /* Contour noir en haut à gauche */
        drop-shadow(1px 0px 0 rgba(13, 13, 13, 0.8)) /* Contour noir en haut à droite */
        drop-shadow(0px 1px 0 rgba(13, 13, 13, 0.8)) /* Contour noir en bas à gauche */
        drop-shadow(1px 1px 0 rgba(13, 13, 13, 0.8)) /* Contour noir en bas à droite */
        drop-shadow(1px 1px 3px rgba(13,13,13, 0.9)); /* Ombre initiale */
		padding-top: 0em !important;
}

/*conteneur qui contient les liens vers les favoris dans le header*/
.wishlist-button, .wp-block-woocommerce-customer-account wp-elements-678378756a94c0d248703e8cfb11888b {
display: flex;
    align-items: center; /* Aligne verticalement */
    justify-content: center; /* Aligne horizontalement si nécessaire */
  /* height: 100%; 
		 max-width: 100%;*/ /* S'assure que le conteneur ne dépasse pas la largeur disponible dans son parent */
		box-sizing: inherit;
    overflow: visible;
      white-space: nowrap; /* Empêche les sauts de ligne pour le contenu */
		
 /*overflow: visible; *//* Le contenu peut dépasser si nécessaire */
   width: fit-content; /* Ajuste la largeur du conteneur pour qu'il s'adapte au contenu */
}

.wp-block-woocommerce-customer-account span.label {/*border:1px red solid;*/
		padding: 0em  0.1em 0em 0em !important;
}


i.fa.fa-heart {
font: normal normal normal 22px / 1 FontAwesome;
 margin-right:2px;
/*box-sizing: content-box !important;*/ 
}


/*#block-10 .label {
padding: 0px 0px 0px 0px;}*/

#block-22, #block-10 { padding-top: 0.5em;}









.site-branding .site-logo, .site-branding .header-group {
    padding: 1.143em 0.5em; /*border: 1px solid blue;*/
}
.site-logo img {/*border: 1px solid red;*/
    max-width: 22em;
}

/*bandeau qui recoit header pour le mettre en 80% au lieu de 1200px*/
@media (min-width: 1200px) {
    .site-boxed:not(.chromium-elementor-header-enabled) .site-branding, .site-boxed .mega-menu-wrap {
        max-width: 80%; /*border: 1px solid white;*/
    }
}





/*couleur bouton validation quand pressé*/
.button:active, .button:focus, .button:hover, .logo-group-nav .current-menu-item a, .logo-group-nav .menu > li > a:active, .logo-group-nav .menu > li > a:focus, .logo-group-nav .menu > li > a:hover, .logo-group-nav .nav-menu > li > a:hover, .primary-nav .current-menu-item a, .primary-nav .menu > li > a:active, .primary-nav .menu > li > a:focus, .primary-nav .menu > li > a:hover, .primary-nav .nav-menu > li > a:active, .primary-nav .nav-menu > li > a:focus, .primary-nav .nav-menu > li > a:hover, button:active, button:focus, button:hover, html input[type="button"]:active, html input[type="button"]:focus, html input[type="button"]:hover, input[type="reset"]:active, input[type="reset"]:focus, input[type="reset"]:hover, input[type="submit"]:active, input[type="submit"]:focus, input[type="submit"]:hover 
 {/*#f07a13*/  background-color:  #961100; }


/*bouton de validation filtre avec effet bombé interieur*/
button {border-radius: 5px;
		 background-color:  #fdb819 !important;
/*box-shadow: 1px 1px 5px 4px rgba(150, 17, 0, 0.5);*/
	box-shadow:
			inset 0 0.01em 0.4em rgba(253, 203, 197, 0.2),
		inset 0 0.04em 0.18em rgba(203, 116, 105, 0.3),
		inset 0 0.98em 1em rgba(255, 146, 133, 0.3),
		inset 0 -0.82em 0.68em -0.64em rgba(150, 17, 0, 0.3),
		inset 0 0.07em 0.11em -0.04em rgba(255, 255, 255, 1),
		inset 0 0.39em 0.56em -0.36em rgba(255, 255, 255, 0.5),
 0px 0px 4px 1px rgba(13,13,13,0.69);
			-webkit-box-shadow:
			inset 0 0.01em 0.4em rgba(253, 203, 197, 0.2),
		inset 0 0.04em 0.18em rgba(203, 116, 105, 0.3),
		inset 0 0.98em 1em rgba(255, 146, 133, 0.3),
		inset 0 -0.82em 0.68em -0.64em rgba(150, 17, 0, 0.3),
		inset 0 0.07em 0.11em -0.04em rgba(255, 255, 255, 1),
		inset 0 0.39em 0.56em -0.36em rgba(255, 255, 255, 0.5),
 0px 0px 4px 1px rgba(13,13,13,0.69);
		-moz-box-shadow:
			inset 0 0.01em 0.4em rgba(253, 203, 197, 0.2),
		inset 0 0.04em 0.18em rgba(203, 116, 105, 0.3),
		inset 0 0.98em 1em rgba(255, 146, 133, 0.3),
		inset 0 -0.82em 0.68em -0.64em rgba(150, 17, 0, 0.3),
		inset 0 0.07em 0.11em -0.04em rgba(255, 255, 255, 1),
		inset 0 0.39em 0.56em -0.36em rgba(255, 255, 255, 0.5),
 0px 0px 4px 1px rgba(13,13,13,0.69);
}













.filtered-products {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.filtered-products li.product {
    width: calc(25% - 30px); /* Ajuste la largeur pour avoir 4 colonnes */
    margin-bottom: 30px;
}

select {
		font-weight:500;}

/*comportement des selects du filtre 1****/

/*button {display: inline-block;    color: #fff;		background-color: #1b575b !important;    border-radius: 3px;    position: relative;    transition: 0.65s;    z-index: 1;    font-weight: 500;    margin-bottom: 5px;   text-decoration: none;}
button:before, button:after{    content: '';    position: absolute;    transition: 0.65s;    border-radius: 3px;    z-index: -1;}
button:before{    top: 0;    left: 0;    bottom: 0;    right: 100%;    background: rgba(255, 103, 82, 0.5);}
button:after{    top: 0;    left: 100%;    bottom: 0;    right: 0;    background: rgba(255, 103, 82, 0.5);}
button:hover, button:focus{color: #fff;text-decoration: none;}
button:hover:before, button:focus:before{right: 0%;box-shadow: 0 0 20px -1px #ff6752;background: rgba(255, 103, 82, 1)}
button:hover:after, button:focus:after{left: 0%;box-shadow: 0 0 20px -1px #ff6752;background: rgba(255, 103, 82, 1)}*/

.custom-select-container {
    position: relative;
    display: inline-block;
}

.custom-select {
    appearance: none;
    padding-right: 2rem; /* Espace pour la flèche */
    position: relative;
}

.custom-select-container::after {
    content: "\25BC"; /* Flèche en forme de chevron */
    position: absolute;
    right: 1rem;
    bottom: 1rem;
   /* transform: translateY(-20%);*/
    transition: color 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    color: #f39c12; /* Couleur initiale de la flèche */
}

.custom-select-container.active::after {
    color: #680d01; /* Nouvelle couleur du chevron quand le select est focalisé */
    animation: bounce 1.4s infinite;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

/*///////////////////////////////////*/



/*selects des filtres*/
@media (max-width: 767px) {
    .custom-select{width:100%; 	}
		
	.custom-select-container {width:100%; }
.custom-select-container::after {
				position: absolute;
		    right: 1rem;
    bottom: 1rem;
  /*  transform: translateY(-10px);*/
		}
		select {width:100%; }
}
				
select {margin: 0px 6px 10px 0px;
border-radius: 5px;
color: /*#f39c12;*/ #961100;
border:1px solid #961100;
padding-left:10px; padding-right:10px;}	

/*.select_position { width: 50%; 
  margin: 0 auto;
		width:100%; 
}*/

/*@media (max-width: 767px) {
.select_position {max-height:100px ;border:1px solid black;}
}*/
















/*///////////////////////////*/

/* effet illuminé sur le hover du select*/
#custom-filter select, #custom-filter2 select {transition: 0.65s;}
#custom-filter select:hover, #custom-filter2 select:hover{color: #680d01; font-weight: 500; right: 0%; box-shadow: 0 0 20px -1px #f3c402; background: rgba(250, 215, 68, 1) !important; }

/*****************************/






   /*////// /*.elementor-widget-container #custom-filter*/

/* Arrow style
  &::after {
    content: "\25BC";
    position: absolute;
    right: 1rem;
    top: 1rem;
    transition: 0.25s all ease;
    pointer-events: none; // IMPORTANT to click on arrow
  }
  // Arrow hover
  &:hover::after {
    color: #f39c12;
    animation: bounce 0.5s infinite;
  }
}
@keyframes bounce {
  25% {
    transform: translatey(5px);
  }
  75% {
    transform: translatey(-5px);
  }
}
*/














/*
#custom-filter select:before,
#custom-filter select:after{
content: '';
position: absolute;
top: 0;
bottom: 0;
transition: 0.65s;
z-index: -1;
}
#custom-filter select:before{
left: 0;
right: 100%;
background: rgba(250, 215, 68, 0.5) !important;	 
}
#custom-filter select:after{
left: 100%;
right: 0;
background: rgba(250, 215, 68, 0.5) !important; 
}

#custom-filter select:hover:before{right: 0%;box-shadow: 0 0 20px -1px #f3c402; background: rgba(243, 196, 2, 1) !important;}
#custom-filter select:hover:after{left: 0%;box-shadow: 0 0 20px -1px #f3c402;background: rgba(243, 196, 2, 1) !important;}*/









.chercher h2 {  	
    text-shadow: 
        1px 1px 1px #404040,   /* Ombre extérieure foncée */
        -0.5px -0.5px 0.5px #ffffff; /* Ombre intérieure claire pour l'effet ciselé */     
}
		
.chercher {		
animation: shopifyshake 6s;
animation-iteration-count: infinite;
display: inline-block;

/*couleur orange*/
/*animation: pulse3 6s infinite 3s cubic-bezier(0.25, 0, 0, 0.8);
box-shadow: 0 0 0 0px rgba(240, 122, 19, 1);
border-radius:0.2rem;
display: inline-block;/*
				
/*couleur rouge*/	
/*animation: pulse3 6s infinite 3s cubic-bezier(0.25, 0, 0, 0.8);
box-shadow: 0 0 0 0px rgba(150, 17, 0, 1);
border-radius:0.2rem;
display: inline-block;*/

}
		
/*@keyframes pulse3 {
  to {
			box-shadow: 0 0 0 60px rgba(240, 122, 19, 0);
	}		
}*/


/*@keyframes pulse3 {
  to {
    box-shadow: 0 0 0 60px rgba(150, 17, 0, 0);
  }
}*/




@keyframes shopifyshake {
0% { transform: translate(1px, 1px) rotate(0deg); }
1% { transform: translate(-1px, -2px) rotate(-1deg); }
2% { transform: translate(-3px, 0px) rotate(1deg); }
3% { transform: translate(3px, 2px) rotate(0deg); }
4% { transform: translate(1px, -1px) rotate(1deg); }
5% { transform: translate(-1px, 2px) rotate(-1deg); }
6% { transform: translate(-3px, 1px) rotate(0deg); }
7% { transform: translate(0px, 0px) rotate(0deg); }
8% { transform: translate(0px, 0px) rotate(0deg); }
80% { transform: translate(0px, 0px) rotate(0deg); }
90% { transform: translate(0px, 0px) rotate(0deg); }
100% { transform: translate(0px, 0px) rotate(0deg); }
}

/*===================*/
 

#vendre a.btn-price.text-btn {
 animation: float 4s 6s linear alternate infinite;
}

@keyframes float {
	50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-18px);
  }
}