@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

/* Couleur utilisée
#825308 : marron
#014f42 : vert
 */

@media screen and (min-width: 800px) {
	body{
		background-color : white;
		font-family:'Arial';
	}

	/* MENU */
	.ui-menu{
		background-color : #014f42;
		background-size: 100% 100%;
	}

	.ui-menu li a span{
		color : white;
	}

	.submenu li a span{
		color : black;
	}

	.nav-sections, .navigation{
			background : none;
	}
	.navigation{
			background-color : transparent;
	}

	.sections.nav-sections{
		margin:auto;
	}

	.navigation .level0.active > .level-top, .navigation .level0.has-active > .level-top {
		border-color:#fff;
	}

	.navigation .level0 .submenu a:hover, .navigation .level0 .submenu a.ui-state-focus{
		background-color : #014f42;
	}

	.submenu li a span:hover,.navigation .level0 .submenu a:hover span{
		color : #fff;
	}

	.submenu ,.navigation .level0 .submenu{
		min-width: 250px;
	}
	.submenu li ,.navigation .level0 .submenu li{
	  background: url(../images/feuille.png) no-repeat left top; /* <-- change `left` & `top` too for extra control */
	  padding: 3px 0px 3px 10px;
	  /* reset styles (optional): */
	  list-style: none;
	  margin: 0;
	  margin-left:5px;
	}
	.submenu li a,.navigation .level0 .submenu li a{
		padding-left: 0px;
		margin-left: 15px;
	}

	/* PAGE */
	/* LE CONTENU */

	#maincontent{
		margin:auto;
		width:auto;
		margin-top: 20px;
	}

	.page-title-wrapper{
		text-align: center;
	}

	.navigation{
			max-width:100%;
	}

	.ui-menu{
		margin-left: auto;
		margin-right: auto;	
	}

	/* HEADER : lien du compte, panier */

	.custom-header-row {
	  margin-top:2%;
	}

	/* Clear floats after the columns */
	.custom-header-row:after {
	  content: "";
	  display: table;
	  clear: both;
	}

	.custom-header-column {
	  float: left;
	  font-family:'Arial';
	}

	/* Définition des tailles des blocs logos et du milieu */
	.custom-header-left, .custom-header-right {
	  width: 15%;
	}

	.custom-header-middle {
	  width: 30%;
	}

	.custom-header-right{
		float:right;
	}

	/* Positionnement des éléments du panier et de la barre de recherche */
	.minicart-wrapper, .block-search{
		float:left;
	}

	/* Ne pas afficher certaines parties /!\ a pu être désactivé via le XML de positionnement des layouts */
	.header.panel > .header.links > li.welcome{
		display:none;
	}

	/* Suppression des balises de la liste + positionnement des liens "mon compte" */
	.custom-header-row > li, .custom-header-row > div > li{
		list-style-type: none;  
		float:left;
	}

	/* Définition de l'affichage du Mon compte */
	.account-link {
		display: inline-block;
		font-family: "Font Awesome 5 Free";
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
	}
	.account-link:before {
		padding-right: 5px;
	}

	/* Définition de l'affichage de la liste des envies */
	.wish-list-link {
		display: inline-block;
		font-family: "Font Awesome 5 Free";
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
	}
	.wish-list-link:before {
		content: "\f004";
		padding-right: 5px;
	}

	/* Définition de l'affichage du panier */
	.minicart-wrapper .action.showcart:before{
		display: inline-block;
		font-family: "Font Awesome 5 Free";
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		content: "\f290";
		/* Ces 3 caractéristiques doivent être obligatoirement présentes ici sinon l'icône ne s'affiche pas correctement*/
		font-weight:900;
		font-size: 22px;
		color: #825308;
	}

	/* Définition pour les éléments de la liste "mon compte" pour espacer les éléments et définir leur taille d'affichage */
	.custom-header-row > div > li {
		margin-left: 10px;
		margin-right:10px;
		font-weight:900;
		font-size: 22px;
	}

	/* Définition pour les éléments de la liste "mon compte" de la couleur du texte */
	.custom-header-row > div > li > a, .custom-header-row > div > li {
		color: #825308;
	}

	.custom-header-row > div > li > a:hover{
		color: #825308;
		text-decoration:none;
	}

	/* Arrangement de l'affichage pour la barre de recherche */
	.block-search input{
		border-radius:30px;
		border-color: #825308;
		border-width:2px;
	}

	.block-search input:not([disabled]):focus{
		box-shadow: 0 0 3px 1px #825308;
	}

	/* Texte d'accroche */


	@font-face {
		font-family: 'Exmouth';
		src: url('../fonts/exmouth.woff');
		font-weight: 300;
		font-style: normal;
	}

	.custom-header-middle > div{
		width:200%;
		margin-top:20px;
		font-family:'Arial';
		font-size: 1.5em;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		color : #014f42;
		font-weight:600;
	}

	.custom-header-middle > div .font-ee{
		font-family:'Exmouth';
		font-size: 2em;
		color : #825308;
		font-weight:900;
		
	}
}

@media screen and (max-width: 800px) {
	.custom-container {
		display:none;
	}
	.custom-header-left img {
		width : 25%;
	}
	.custom-header-right img {
		width : 90px;
	}
	
	.custom-header-right {
		position:absolute;
		top:0;
		right:0;
	}
}

/* Pour des écrans non HD, réduction de la police du menu */
@media screen and (max-width: 1300px) {
  .custom-header-middle > div {
    font-size: 18px;
  }
  .custom-header-middle > div .font-ee {
    font-size: 40px;
  }
  .ui-menu{
		font-size: 14px;
  }
  .navigation .level0 {
		margin-right:6px;
  }
  .navigation .level0 a {
		padding-left:8px;
		padding-right:8px;
  }
} 

 /* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
} 

/* LOGO */

.logo{
	max-width:100%;
	float:none;
}

.logo img{
	margin:auto;
}

/* FONT */


/* LES TITRES */

#page-title-heading, .page-title{
	font-family: "Arial";
	font-size: 2.5em;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

/* LA BOUTIQUE */

.action.tocart.primary{
	background-color: #014f42;
	background-size: 100% 100%;
	border : none;
	color: #ffffff;
}

.action.tocart.primary:hover{
	background: #ffffff;
	background-size: 100% 100%;
	border : 1px solid #014f42;
	color: #014f42;
}

/* Les numéros de pages en bas */
.pages a.page, .pages a.page:hover{
	color: #014f42;
}

/* PRODUITS */

/*.fotorama-item.fotorama{
	margin: auto;
	width: 20%;
}*/

/* Le fond des explications */
.product.data.items > .item.content{
	background-color: #fff;
	background-size: 100% 100%;
	border: 1px solid #014f42;
}

/* Le fond des tab non actifs du tableau des explications */
.product.data.items > .item.title > .switch, .product.data.items > .item.title.active > .switch, .product.data.items > .item.title.active > .switch:focus{
	background-color: #fff;
	background-size: 100% 100%;
	border: 1px solid #014f42;
	border-bottom:none;
	color : #014f42;
}

/* Le fond des tab actifs du tableau des explications */
.product.data.items > .item.title:not(.disabled) > .switch:active, .product.data.items > .item.title.active > .switch, .product.data.items > .item.title.active > .switch:focus, .product.data.items > .item.title:not(.disabled) > .switch:focus{
	color: #fff;
	background-color: #014f42;
	background-size: 100% 100%;
	border: 1px solid #014f42;
	border-bottom:none;
}

/* Le fond des tab en hover du tableau des explications */
.product.data.items > .item.title.active > .switch:hover, .product.data.items > .item.title.active > .switch:hover, .product.data.items > .item.title:not(.disabled) > .switch:hover{
	color: #fff;
	background-color: #014f42;
	background-size: 100% 100%;
	border: 1px solid #014f42;
	border-bottom:none;
}

.product-image-container{
	border: 2px solid #014f42;
	padding: 3px;
}

/* Bordure des images en dessous de l'image produit affiché */
.fotorama__thumb-border{
	border-color:#014f42;
}

/* Bouton inscription en bas du pied de page */
.action.primary{
	background-color: #014f42;
	border-color: #014f42;
}
.action.primary:hover{
	color: #014f42;
	background-color: #fff;
	border-color: #014f42;
}

/******************************/
/******* MOBILE ***************/
/******************************/


@media screen and (max-width:767px){
	.nav-sections-item-title.active {
		background-color : white;
	}
	.nav-sections, .navigation {
		background-color : white;
	}
	.minicart-wrapper{
		z-index:1000;
	}
}