/*
Theme Name: Divi Community Child Theme
Description: Theme enfant de Shop around the web
Author: Sandrine Libouban
Author URI: https://www.aroundtheweb.fr
Template: Divi
Version: 1.1
*/

/*
  ____ _____     _____      ____ ___  __  __ __  __ _   _ _   _ ___ _______   __
 |  _ \_ _\ \   / /_ _|    / ___/ _ \|  \/  |  \/  | | | | \ | |_ _|_   _\ \ / /
 | | | | | \ \ / / | |    | |  | | | | |\/| | |\/| | | | |  \| || |  | |  \ V /
 | |_| | |  \ V /  | |    | |__| |_| | |  | | |  | | |_| | |\  || |  | |   | |
 |____/___|  \_/  |___|    \____\___/|_|  |_|_|  |_|\___/|_| \_|___| |_|   |_|

*/

/**************************************************
************système de media queries **************
**desktop** > @media (max-width:1920px) {}
**tablette paysage** >@media (max-width:1024px) {}
**tablette portrait** >@media (max-width:768px) {}
**mobile** >@media (max-width:501px) {}
****************************************************/

/*------------------------------------------------*/
/*--------------------[ MENU ]--------------------*/
/*------------------------------------------------*/

/*icone dans menu*/
.icone_menu{
    padding-left: 10px;
}

/* supprimer la ligne grise sous le menu principal de Divi */
#main-header {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

/* menu primaire au scroll */

@media (max-width:1080px){
.et-fixed-header#main-header {
    background-color: #ffffff;!important;
}
}

/*------------------------------------------------*/
/*------[ icones et menus personnalises ]--------------------*/
/*------------------------------------------------*/

/*MENU PRINCIPAL*/

/*supprimer le soulignement sur le hover*/
#top-menu-nav ul.nav > li > a:before {
				display: none;
				}

/********************************
************[DESKTOP]************
********************************/

/* accueil */
.nav-menu-home > a:before {
    font-family: 'ETMODULES';
    content: '\e074'; /* change icon code here */
    text-align: center;
    margin-right: 10px;
    margin-left: -10px;
    color: #186aa5; /*change icon color here */
    font-size: 1em; /*change icon size here */
    transition: all .3s ease;
}

.nav-menu-search > a:before{
    font-family: 'ETMODULES';
    content: '\55'; /* change icon code here */
    text-align: center;
    margin-right: 5px;
    margin-left: 10px;
    color: #186aa5; /*change icon color here */
    font-size: 1em; /*change icon size here */
    transition: all .3s ease;
}

.nav-menu-fav > a:before {
    font-family: 'ETMODULES';
    content: '\e089'; /* change icon code here */
    text-align: center;
    margin-right: 5px;
    margin-left: 10px;
    color: #186aa5; /*change icon color here */
    font-size: 1em; /*change icon size here */
    transition: all .3s ease;
}
.nav-menu-account > a:before {
    font-family: 'ETMODULES';
    content: '\e08a'; /* change icon code here */
    text-align: center;
    margin-right: 5px;
    margin-left: 10px;
    color: #186aa5; /*change icon color here */
    font-size: 1em; /*change icon size here */
    transition: all .3s ease;
}


@media (min-width:1080px) {
  /* menu panier masqué en version desktop*/
#et-secondary-nav .menu-panier{
    display: none;
  }

  /* blog */
.nav-menu-blog{
font-family: "adobe-handwriting-ernie", sans-serif;
font-size: 2em;
}
/* bouton aide */
.menu_cta {
background-color: #186aa5;
color: #fff;
padding: 0!important;
border-radius: 30px;
border: solid 2px #fff;
transition: 0.3s;
}

.menu_cta a {
color: #fff !important;
padding: 10px 15px 10px 35px !important;
}

.menu_cta a:before {
content: '\e028';
color: #fff;
font-family: 'ETmodules';
font-size: 16px;
line-height: 1;
position: absolute;
left: 12px;
}
}

/*VERSION MOBILE*/

@media (max-width:1080px) {
  .nav-menu-home > a:before {
      color: #ffffff; /*change icon color here */
  }
  .nav-menu-aide {
        font-size: 1em;
    }
  .nav-menu-search > a:before {
        font-family: 'ETMODULES';
        content: '\55'; /* change icon code here */
        text-align: center;
        margin-right: 10px;
        margin-left: 0px;
        color: #ffffff; /*change icon color here */
        font-size: 1em; /*change icon size here */
        transition: all .3s ease;
    }
    .nav-menu-fav > a:before {
        font-family: 'ETMODULES';
        content: '\e089'; /* change icon code here */
        text-align: center;
        margin-right: 10px;
        margin-left: -10px;
        color: #ffffff; /*change icon color here */
        font-size: 1em; /*change icon size here */
        transition: all .3s ease;
    }
    .nav-menu-account > a:before{
        font-family: 'ETMODULES';
        content: '\e08a'; /* change icon code here */
        text-align: center;
        margin-right: 10px;
        margin-left: 0px;
        color: #ffffff; /*change icon color here */
        font-size: 1em; /*change icon size here */
        transition: all .3s ease;
    }
    #et-top-navigation .menu-panier {
    float: none;
    margin: 0;
}
.menu-panier > a:before {
      font-family: 'ETMODULES';
      content: "\e07a"; /* change icon code here */
      text-align: center;
      margin-right: 10px;
      margin-left: 0px;
      color: #ffffff; /*change icon color here */
      font-size: 1em; /*change icon size here */
      transition: all .3s ease;
  }
}

/*------------------------------------------------*/
/*----------------[ MENU MOBILE ]-----------------*/
/*------------------------------------------------*/

/***************************************************************************
******[en pleine largeur et le hamburger devient une croix pour fermer]*****
***************************************************************************/

/* .et_mobile_menu {
	margin-left: -30px;
	padding: 5%;
	width: calc( 100% + 60px);
} */

.mobile_nav.opened .mobile_menu_bar:before {
	content: "\4d";
}

/**************************************************
*******[BREAKING  POINT DE MON MENU DESKTOP]******
***********************************************/

@media (max-width: 1080px){
  #top-menu {
    display: none;
}
}

/**************************************************
********[BREAKING POINT DE MON MENU MOBILE]******
***********************************************/

@media (max-width: 1080px) {
#et_mobile_nav_menu {
    display: block;
}
}

/*************************************************
*********[BREAKING POINT DU MENU SECONDAIRE]*******
***********************************************/
@media (max-width: 1080px) {
#et-secondary-menu, #et-secondary-nav {
    display: none !important;
}
.et_secondary_nav_only_menu #top-header {
    display: none;
}
}

/**************************************************
****************[MOBILE MENU FIXE]***************
***********************************************/

@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
    position: fixed;
}
}

@media (max-width: 1080px) {
.et_mobile_menu {
    position: absolute;
    left: 0;
    overflow: scroll !important;
    height: 75vh;
    width: 100vw;
    padding: 5%;
    background: #186aa5;
    visibility: visible;
    opacity: 1;
    display: none;
    z-index: 9999;
    border-color: none !important;
    box-shadow: none;
    margin-left: -77px;
    padding-left: 10%;
}
}

@media (max-width: 501px) {
.et_mobile_menu {
    height: 80vh; /*hauteur du sus menu quand ouvert*/
    width: 100vw;
    margin-left: -35px;
}
}

.et_mobile_menu li a {
line-height: 1.4em;
border-bottom: 1px solid #e8eff7;
font-size: 1.1em;
color: #ffffff!important;
}


/*------------------------------------------------*/
/*---[ LOGO RECAPTCHA EN BAS A DROITE MASQUE]----*/
/*------------------------------------------------*/

.grecaptcha-badge {
    opacity:0;
}

/*------------------------------------------------*/
/*-----------[ CHAT ]------------*/
/*------------------------------------------------*/

@media (max-width: 501px) {
#qlwapp.qlwapp-rounded.qlwapp-button .qlwapp-toggle {
    border-radius: 20px!important;
}
#qlwapp.qlwapp-bottom-right.qlwapp-button .qlwapp-toggle {
    margin-right: 10px!important;
}
#qlwapp.qlwapp-button .qlwapp-toggle {
    padding: 10px 20px!important;
}
#qlwapp .qlwapp-toggle {
    margin-bottom: 10px!important;
}
}
/*------------------------------------------------*/
/*-----------[ FORMULAIRE DE CONTACT ]------------*/
/*------------------------------------------------*/

/***************************************************************************
**couleur du texte du message après envoi du formulaire
***************************************************************************/
.et-pb-contact-message{
    color: #fff;
}

/************************************************************************** **AUGMENTER LA LARGEUR CHAMP RÉSULTAT CAPTCHA
**Parfois, suivant la taille du texte, certains chiffres du résultat sont **masqués
**************************************************************************/

.et_pb_contact_right p input {
	max-width: 50px;
}

/*******************************************************************************************************************************************************
** METTRE EXPOSANTS ET INDICES À LA BONNE TAILLE
** Généralement, ils sont bien trop gros…
***************************************************************************/
sup, sub {
    font-size: 70%;
}

/*------------------------------------------------*/
/*-----[ MISE EN PAGE AVANCEE AVEC GRILLES ]------*/
/*------------------------------------------------*/

.grid-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);/*"Repeat" car sont réparties régulièrement. "1fr" veut dire 1 fraction sur 4 colonnes*/
  grid-template-rows: repeat(1, 100px);
}


/*****************************************************************************taille de la visionneuse lorsque l'image s'ouvre en grand
***************************************************************************/
.mfp-img{
    max-height: none!important;
}

/*------------------------------------------------*/
/*------------[ GESTION DES COLONNES ]------------*/
/*------------------------------------------------*/

/***************************************************************************
** INVERSER LE SENS DES COLONNES SUR MOBILE
** Voir tuto : https://www.divi-community.fr/snippets-divi/inverser-ordre-des-colonnes-sur-mobile
***************************************************************************/

@media only screen and (max-width : 980px) {
	.dc-inverser-colonnes--section .dc-inverser-colonnes--ligne {
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-webkit-flex-direction: column-reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}
}

/*****************************************************************************centré verticalement du contenu dans une colonne
***************************************************************************/

.vertical-align {
display: flex;
flex-direction: column;
justify-content: center;
}


/*------------------------------------------------*/
/*--------------------[ LOGO ]--------------------*/
/*------------------------------------------------*/

#logo {
    display: inline-block;
    float: none;
    max-height: 70%;
    margin-bottom: 0;
    vertical-align: middle;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    -webkit-transform: translate3d(0,0,0);
}

/*****************************************************************************logo responsive
***************************************************************************/

@media (max-width: 980px){
/*logo*/
.et_header_style_left #logo, .et_header_style_split #logo {
    max-width: 80%;
}
}

/*--------------------------------------------------------*/
/*-------[ MAINTENIR X IMAGES SUR UNE SEULE LIGNE]--------*/
/*--------------------------------------------------------*/

/*****************************************************************************2 images
***************************************************************************/

@media only screen and (max-width: 980px) {
 .two-columns .et_pb_column {
 width: 50%!important;
}
}
@media only screen and (max-width: 479px) {
 .two-columns .et_pb_column {
 width: 50%!important;
 }
 }

/*****************************************************************************3 images
***************************************************************************/

@media only screen and (max-width: 980px) {
 .three-columns .et_pb_column {
 width: 33%!important;
}
}
@media only screen and (max-width: 479px) {
 .three-columns .et_pb_column {
 width: 33%!important;
 }
 }

/*****************************************************************************4 images
***************************************************************************/

@media only screen and (max-width: 980px) {
 .four-columns .et_pb_column {
 width: 20%!important;
}
}
@media only screen and (max-width: 479px) {
 .four-columns .et_pb_column {
 width: 50%!important;
 }
 }

/*------------------------------------------------*/
/*--[ SEARCH BUTTON with icon .ds-icon-search ]---*/
/*------------------------------------------------*/


/*button background and text colour transparent*/

.ds-icon-search input.et_pb_searchsubmit,
.widget_search input#searchsubmit {
        background: transparent;
        color: transparent;
        border: none;
        width: 55px;
        z-index: 2;
    }

/*padding to be sure the text entered doesn’t run into our new icon*/
.ds-icon-search input.et_pb_s,
.widget_search input#s {
        padding-right: 55px !important;
    }

/*add the icon as a pseudo-element*/
    .ds-icon-search .et_pb_searchform:before,
    .widget_search::before {
        content: '\55';
        position: absolute;
        font-family: 'ETModules';
        z-index: 1;
        right: 0;
        font-size: 20px;
        padding: 8px 20px;
    }

    /**********************************************************************
    ****************************WOOCOMMERCE*************************
    ***********************************************************************/

/*********************************************
*******************FIL D ARIANE******************
**********************************************/

.woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb a{
        margin: 0 0 1em;
        padding: 0;
        font-size: 1em;
        color: #186aa5;
        text-align: center;
}

/***********************************************************
*******************BOUTON PRODUITS FAVORIS******************/
@media only screen and (max-width: 980px) {
.tinv-wishlist .product-action .button {
    width: 50%;
}
}
@media only screen and (max-width: 400px) {
.tinv-wishlist .product-action .button {
    width: 70%;
}
}

/*********************************************
*******************BOUTON FAVORIS******************
**********************************************/

/* .woocommerce div.product form.cart .button {
background-color: #2f3854;
border-radius: 20px;
font-size: 12px;
text-transform: uppercase;
border: none;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
color: white;
} */


/* .button alt, .woocommerce button.button{
  background-color: #fff;
  border-radius: 10px;
  font-size: 16px;
  text-transform: uppercase;
  border: solid 3px #186aa5;
padding: 10px 30px 10px 20px;
  color: #186aa5;
}

.button alt:hover, .woocommerce button.button:hover{
  background-color: #186aa5;
  border-radius: 10px;
  font-size: 16px;
  text-transform: uppercase;
  border: solid 3px #186aa5;
  padding: 10px 30px 10px 20px;
  color: #ffffff;
}

body.woocommerce .woocommerce-tabs {
border: none;
}
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs,
body.woocommerce div.product .woocommerce-tabs ul.tabs {
background: white;
border: none;
}

body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li {
background: white;
border: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
border: none;
}

body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active a,
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: #d18aa8 !important;
}

.woocommerce .quantity input.qty {
background-color: white !important;
color: black !important;
} */


/*********************************************
*******************PAGE SHOP******************
**********************************************/

/*Bouton ajouter au panier*/
.woocommerce a.button{
    font-size: 16px;
}

.woocommerce a.button:hover{
    padding: .3em 2em .3em 1em;
    background-color: #186aa5;
    color: #e8eff7;
}

@media (max-width:501px) {
  .woocommerce a.button{
  padding: 0.6em;
}


/*Badge promotion*/

.woocommerce-page ul.products li.product .onsale,
.woocommerce ul.products li.product .onsale {
    left: 65px!important;
    top: -10px!important;
    margin: 0!important;
    right: 0px!important;
}

.woocommerce-page span.onsale,.woocommerce span.onsale{
  z-index:2;
  background:#ef8f61!important;
  border-radius:3px!important;
  color:#fff;
  font-size:20px;
  font-weight:500!important;
  right: 10px!important;
  line-height:inherit!important;
  margin:0!important;
  min-height:0!important;
  min-width:0!important;
  padding:6px 18px!important;
  position:absolute;
  text-shadow:none!important;
  top:10px!important
}


/*boutons filtres*/

.wpfFilterButton.wpfButton, .wpfClearButton.wpfButton{
    padding: 5px;
    min-height: 40px!important;
    font-size: 16px;
    color: #186aa5;
    min-width: 200px;
    width: 100%!important;
}

.wpfFilterButtons {
    min-width: 300px!important;
}

@media (max-width:501px) {
.wpfFilterButton.wpfButton, .wpfClearButton.wpfButton{
      padding: 5px;
      min-height: 30px;
      font-size: 16px;
      color: #186aa5;
      min-width: 150px!important;
  }
}

/*Lignes prix*/

.ui-slider.ui-widget-content .ui-slider-handle {
    background: #73A1C2!important;
    border: 1px solid #186AA5 !important;
    border-radius: 0!important;
}
.ui-slider.ui-widget-content:not(.iris-slider-offset) {
    background: #E8EFF7!important;
    border-radius: 0!important;
    border: 1px solid #73A1C2!important;
}

/**********************************************************************
****************************[PAGE PANIER]]*************************
***********************************************************************/


/**********************************************************************
****************************[PAGE CHECKOUT]]*************************
***********************************************************************/

/****************************[FORMULAIRES]]*************************/
.woocommerce-checkout #payment{
  background-color: #73a1c2;
  color: #ffffff;
}

/*  bloc votre commande */
.woocommerce table.shop_table th {
    font-weight: 500!important;
    padding: 10px 20px;
    line-height: 1.5em;
}

/*********************[INFORMATIONS COMPLEMENTAIRES]*******************/

/*********************[BLOC RECAP COMMANDE]*******************/

/**********************************************************************
****************************ELEMENTS GRAPHIQUES*************************
***********************************************************************/

/*titre souligne avec effet au survol */

.titre-souligne{
background-image: linear-gradient(0deg, #e8eff7 0, #e8eff7);
background-repeat: no-repeat;
background-size: 10% 20%;
background-position-y: bottom;
}



.titre-souligne:hover{
background-image: linear-gradient(0deg, #e8eff7 0, #e8eff7);
background-repeat: no-repeat;
background-size: 30% 60%;
background-position-y: bottom;
transition: all 0.5s ease;
}

.titre-souligne-bleu{
background-image: linear-gradient(0deg, #73a1c2 0, #73a1c2);
background-repeat: no-repeat;
background-size: 10% 20%;
background-position-y: bottom;
}

.titre-souligne-bleu:hover{
background-image: linear-gradient(0deg, #73a1c2 0, #73a1c2);
background-repeat: no-repeat;
background-size: 30% 60%;
background-position-y: bottom;
transition: all 0.5s ease;
}


/**********************************************************************
********************************* PROMO *******************************
***********************************************************************/

.woocommerce-page span.onsale, .woocommerce span.onsale {
    background: #f7b7c1 !important;
}