/*
Theme Name: DDQ - Dédrama Queen
Description: Theme enfant de EnvoThemes
Author: emma.satti
Author URI: https://emmasatti.fr/
Template: envo-online-store
*/


/*-------------------------------------------*/
/* CLASSES
/*-------------------------------------------*/
.blocfix {
	position: relative;
	width:90%;
	max-width:1300px;
	margin:auto;
}
i {
	display:inline-block;
	font-size: 22px !important;
}

@media screen and (min-width: 760px) {
    .container-align {
      display: flex;
      align-items: center;
      gap: 20px;
    }
}
.tailles { width: auto; vertical-align: middle }
.tailles th, .tailles td { height: 33% }
.tailles th { font-size: 12px }
.tailles td {
    width: 45px;
    padding: 5px;
    text-align: center;
    border: 1px solid #bbb;
    font-size: 14px;
}

.emma-non-dispo-badge {
    /*position: absolute;
    top: 8px;
    right: 8px;*/
    padding: 4px 10px;
    background: var(--secondary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    z-index: 10;
}


/*-------------------------------------------*/
/* PRODUITS
/*-------------------------------------------*/
/* 1. Si la couleur Blanc est active (.obblanc.active) -> masquer le Logo Blanc (.logoblanc) */
section.choices:has(#mkl-pc-choice-list-1 .obblanc.active) #mkl-pc-choice-list-2 .logoblanc {
    display: none !important;
}
/* 2. Si la couleur Noir est active (.obnoir.active) -> masquer le Logo Noir (.logonoir) */
section.choices:has(#mkl-pc-choice-list-1 .obnoir.active) #mkl-pc-choice-list-2 .logonoir {
    display: none !important;
}


/*-------------------------------------------*/
/* IDs
/*-------------------------------------------*/
.main-menu {
}
.main-menu .container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1300px;
}
.main-menu .logo {
	position:relative;
    float: left;
	height: 70px;
	margin: 20px 0;
    z-index: 1000;
}
.socialhead {
	position: absolute;
	top: 30px;
	right: 0;
}
.socialhead i {
	line-height: 48px;
	color: var(--menu);
	margin-left: 15px;
}
.socialhead a i:hover {
	color: var(--menu2hover) !important
}
.woo-head-icons {
	position: absolute;
	top: 25px;
	right: 80px;
}

/*-------------------------------------------*/
/* menu
/*-------------------------------------------*/
.menu-menutop-container {
	position: relative;
    display: flex;
    height: 40px;
	margin: auto auto auto 0;
	padding: 0;
	z-index: 1000;
	-webkit-transition: all 1s;
	transition: all 1s;
}
.menu-menutop-container .menu {
    position: relative;
    display: flex;
	max-width: 700px;
	height: 40px;
    margin: auto auto auto 30px;
    padding: 0;
}
/*-------------------------------------------*/
@media screen and (min-width: 960px) {
    .mobi { display: none }
    .menu-up { background: black }
    .menu-up:hover { background: var(--secondary) }
    .menu-up a { font-weight: 600 !important; padding-right: 30px !important; color: #fff !important }
}
@media screen and (max-width: 960px) {
    .mobi { display: block }
    .mobi:before {
        display: block;
        position: relative;
        margin: auto auto 20px 14px;
        content: url("img/DDQ-logo-blanc.svg");
        width: 56px;
        height: 70px;
    }
}

/*-------------------------------------------*/
/* MENU
/*-------------------------------------------*/
.menu-menutop-container .menu ul {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.menu-menutop-container .menu li {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-menutop-container * {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.menu-menutop-container .menu li a {
    position: relative;
    line-height: 40px;
    margin: 0 15px;
    padding: 0;
    color: var(--menu);
    font-size: 17px;
    font-weight: 400;
    text-decoration: none;
}
.menu-menutop-container .menu > li:hover {
    background: black;
}
.menu-menutop-container .menu li:hover > a {
    color: white;
}
.menu-menutop-container .menu > li.menu-item-has-children > a:after {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    content: "\f107";
    margin-left: 6px;
    font-size: 12px;
    font-weight: 900;
    transition: transform 0.3s ease;
}
.menu-menutop-container .menu > li.menu-item-has-children:hover > a:after {
    transform: rotate(180deg);
}
/*-------------------------------------------*/
/* SOUS-MENUS (commun)
/*-------------------------------------------*/
.menu-menutop-container .menu li > ul {
    position: absolute;
    top: 40px;
    background: white;
    padding: 0;
    display: block;
    opacity: 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 50;
    pointer-events: none;
}
.menu-menutop-container .menu li:hover > ul {
    opacity: 1;
    pointer-events: auto;
}
.menu-menutop-container .menu li li {
    position: relative;
    min-width: 180px;
    z-index: 100;
}
.menu-menutop-container .menu li li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    width: 100%;
    line-height: 40px;
    margin: 0;
    padding: 0 15px 0 15px;
    font-weight: 400;
    font-size: 16px;
    color: var(--menu);
    text-transform: none;
    z-index: 10;
    border-bottom: 1px solid #ddd;
}
.menu-menutop-container .menu li li a:hover,
.menu-menutop-container .menu li li.current-menu-item a {
    color: var(--menuh);
}
/*-------------------------------------------*/
/* SOUS-SOUS-MENU (surcharge)
/*-------------------------------------------*/
.menu-menutop-container .menu li li > ul {
    top: 5px;
    left: 100%;
    margin-left: -5px;
    z-index: 100;
}
.menu-menutop-container .menu li li:hover > ul {
    opacity: 1;
}

/*-------------------------------------------*/
ul li ul li.menu-item-has-children>a:before { content: "" }
@media screen and (min-width: 760px) {
.menu-menutop-container .menu li li.menu-item-has-children > a:after {
    display: block;
    font-family: "Font Awesome 6 Free";
    content: "\f105";
    margin-left: 12px;
    font-size: 12px;
    font-weight: 900;
}
}

/*-------------------------------------------*/
.show-menu, .close-menu {
	position: fixed;
	top: 38px;
	right: 30px;
    font-size: 30px;
	color: var(--menu);
    display: none;
}
/*Hide checkbox*/
.main-menu input[type=checkbox]{ display: none }
/*Show menu when invisible checkbox is checked*/
#show-menu:checked ~ .menu-menutop-container { left: 0px }
#show-menu:checked ~ .close-menu { display: block }
#show-menu:checked ~ .show-menu { display: none }

/*-------------------------------------------*/
.foot {
	position:relative;
	width:90%;
	max-width: 1300px;
	margin: auto;
    padding: 10px 0;
	line-height: normal;
	font-size: 16px;
	font-weight: 300;
	color: var(--foottxt);
}
.foot ul, .foot li, .foot div {
	margin: 0;
	padding: 0;
	position: relative;
	display: inline-block;
}
.foot a { color: var(--footlink) }
.foot a:hover { color: var(--footlinkhover) }
.menu-menufoot {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
	background: grey;
}
.menu-menufoot-container a {
	padding-right: 15px;
	text-decoration: none;
	font-size: 16px;
	font-weight: 300
}
.menu-menufoot-container a :hover { color: var(--footlinkhover) }

.socialfoot { float: right }
.socialfoot i {
	color: var(--footlink);
	margin-left: 15px;
}
.socialfoot i:hover { color: var(--footlinkhover) }

.foot ul {
	padding-left: 0 ;
	margin-left: 0px ;
	margin-top: 0px ;
}
.foot .footlegal {
    display: block;
	position: relative;
	margin: 20px 0;
	padding: 0;
}
.footlegal, .footlegal a {
	font-size: 13px;
	font-weight: 300;
}

rl { display: inline-block }
rl:before { content: " | " }

/*-------------------------------------------*/
/* RESPONSIVE
/*-------------------------------------------*/
@media screen and (max-width: 960px) {
.socialhead { right: 40px }
.show-menu { display:block }
.menu-menutop-container { position: fixed; top: 0; left: -360px; right: auto; width: 350px; height: 100vh; margin: 0 auto; padding: 20px 0 40px 0; background: var(--principal); box-shadow: 0 0 8px rgba(0,0,0,0.5); overflow: auto }
/*-------------------------*/
.menu-menutop-container .menu {
    flex-direction: column;
    overflow: auto;
    height: 100vh;
    margin: auto auto auto 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0);
    -webkit-transition: all 1s;
    transition: all 1s;
    z-index: 500;
}
.menu-menutop-container .menu * {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.menu-menutop-container .menu > li {
    border-bottom: 1px dotted #eee;
}
.menu-menutop-container .menu li a {
    color: white !important;
    line-height: 46px;
}
.menu-menutop-container .menu > li.menu-item-has-children > a:after {
    content: "";
    margin-left: 0;
}
/*-------------------------*/
.menu-menutop-container .menu li .sub-menu {
    position: relative;
    display: block;
    top: 0;
    opacity: 1;
    box-shadow: none;
    background: none;
}
.menu-menutop-container .menu li.open, .menu-menutop-container .menu li.open > .sub-menu {
    overflow: visible;
}
.menu-menutop-container .menu li li {
    position: relative;
}
.menu-menutop-container .menu li li a {
    display: block;
    padding: 0 20px;
    font-size: 16px;
    color: white;
    border-bottom: 1px solid var(--gris);
}
.menu-menutop-container .menu a:hover { color: var(--menu2h) !important }

.menu-menutop-container .menu li li a:before {
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    content: "\f105";
    margin-right: 6px;
    font-size: 12px;
    font-weight: 900;
    transition: transform 0.3s ease;
}
.menu-menutop-container .menu li li > .sub-menu {
    left: 0;
}
.menu-menutop-container .menu li li li a {
    padding: 0 40px;
}
.woo-head-icons { right: 100px }
}

@media screen and (max-width: 760px) {
.menu-menutop-container { left: -330px; width: 320px }

.foot { padding-top: 20px; text-align: center; border-top: 1px solid var(--foottxt) }
.foot ul, .foot li, .foot div { float: none; display: block; margin: auto }
.menu-menufoot-container li { display: block; padding: 0 }
.menu-menufoot-container a { padding: 0 }
.foot li, .footlegal a { line-height: 26px }
div.socialfoot { margin-top: 20px }
.socialfoot i { margin: 0 15px }
rl { display: block }
rl:before { content: "" }

}