@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-Thin.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-ThinItalic.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-ExtraLight.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-ExtraLightItalic.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-Light.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-LightItalic.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-Medium.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-Medium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-MediumItalic.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-MediumItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-Regular.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-Regular.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-RegularItalic.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-RegularItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-SemiBold.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-SemiBoldItalic.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-Bold.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-BoldItalic.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-ExtraBold.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-ExtraBoldItalic.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-ExtraBoldItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-Black.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}
@font-face {
  	font-family: 'Metropolis';
    src: 	url('../fonts/WOFF2/Metropolis-BlackItalic.woff2') format('woff2'),
        	url('../fonts/WOFF/Metropolis-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}

:root {
	--text-color: #242424;
	--main-color: #E4B966;
    --gray: #E6E6E6;
    --text-color-bis:#606060;
    --btn-bg:#A2A2A2;
    --blue-dark:rgb(0, 4, 34);
    --red: #D34242;
    --required: #E91717;
    --green: #88B04B;
    --grey: #f7f7f7;
    --brown : #554526;

/*   Animation poissons */
/*    --coilSize: 11px;*/
    --coilSize: 1.2vh;
    --delayCount: 40ms;
    --scaleMe: 1;
    --scaleFlip: 1;
    --posFlip: 0;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*html, body {touch-action: none;}*/
body{
    background: #F8F8F9;
    position: relative;
    font-family: Metropolis, sans-serif;
    font-size: 11px;
    color: var(--text-color-bis);
    font-weight: 500; 
}
body *{
	font-family: Metropolis, sans-serif;
	box-sizing: border-box; 
}
b, strong{
    font-weight: 600;
}
img{
	max-width: 100%;
}
button{
    cursor: pointer;
}
.website-disconnected{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;
    width: 25px;
    height: 25px;
    fill: #fff;
    border-radius: 100%;
    border: 1px solid #fff;
    padding: 5px;
    line-height: 1;
    pointer-events: none;
}
.table-btn{
    background-color: var(--btn-bg);
    transition: 0.3s;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}
.table-btn:hover{
    background-color: var(--main-color);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input,
textarea{
    color: var(--text-color-bis);
    outline: none;
    background: #fff;
}
input[readonly],
textarea[readonly]{
    pointer-events: none;
}
input[type=number] {
  -moz-appearance: textfield;
}
header,footer{
    position: relative;
    z-index: 1;
}
header{
    background: var(--main-color);
    padding-top: 10px;
    padding-bottom: 25px;
    color: #fff;
    box-shadow: 0 0 20px rgb(0 0 0 / 13%);    
    filter: drop-shadow(0px 0px 20px rgb(0 0 0 / 13%));
}
header .container{
    overflow:visible;
}
.header-logo{
    max-width: 115px;
    height: 42px;
}
body.ficheProduitScan .header-input-group{
    opacity: 0;
    pointer-events: none;
    display: none;
}
body.ficheProduitScan header h1{
    margin-top: 30px;
}
body.ficheProduitScan footer{
    display: none;
}
.header-container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}
.header-container > .container{
    margin: 0;
}
.header-container-video-left:empty, 
.header-container-video-right:empty{
    opacity: 0;
    pointer-events: none;
}
.header-container-video-left, 
.header-container-video-right{
    max-width: 250px;
    flex-grow: 1;
    height: 160px;
    padding-top: 15px;
    position: relative;
    cursor: pointer;
}
.header-container-video-left video, 
.header-container-video-right video,
.header-container-video-left canvas, 
.header-container-video-right canvas{
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 15px;
    height: calc(100% - 15px);
    max-height: 10vw;
    bottom: 0;
    margin: auto;
    background: #000;
}
.header-container-video-left:before, 
.header-container-video-right:before{
    content: "";
    background: url(../img/play-icon.svg);
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    height: calc(100% - 15px);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: clamp(20px, 3vw, 60px);
    z-index: 1;
}
.header-container-video-left:after, 
.header-container-video-right:after{
    content: "";
    position: absolute;
    top: calc(100% + 40px);
    left: 0;
    width: 100%;
    height: 100px;
    background-position: 100% 0px;
    background-repeat: no-repeat;
    background-size: 100%;
    filter: drop-shadow(2px 4px 6px rgb(0 0 0 / 20%));
}
.header-container-video-left:after{
    background-image: url(../img/voir_video_gauche.svg);
}
.header-container-video-right:after{
    background-image: url(../img/voir_video_droite.svg);
}
.header-input-group{
    display: flex;
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 30px;
}
#headerProductList:not(:empty){
    position: absolute;
    top: 100%;
    left: -1px;
    width: calc(100% + 2px);
    overflow: auto;
    max-height: clamp(0px, 300px, 35vh);
    background: #fff;
    color: var(--text-color);
    z-index: 1;
    border: 1px solid var(--main-color);
}
#headerProductList div {
    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: 0.3s;
}
#headerProductList div:hover{
    color: #fff;
    background: var(--main-color);
}
.header-input-group .input-group{
    flex-grow: 1;
    position: relative;
}
.header-input-group .input-group,
.header-input-group button,
.compte-etiquettes .input-group{
    box-shadow: 0 0 20px rgb(0 0 0 / 13%);
}
.header-input-group .input-group input,
.compte-etiquettes .input-group input{
    flex-grow: 1;
    border: 0;
    height: 40px;
    font-size: 1.063em;
    padding: 0 15px;
    border-radius: 0;
}
.header-input-group .input-group input::placeholder,
.compte-etiquettes .input-group input::placeholder{
    color: #A9A9A9;
}
.header-input-group .input-group span,
.compte-etiquettes .input-group span{
    background: #fff;
    height: 40px;
    width: 46px;
    position: relative;
}
.header-input-group .input-group span:before,
.compte-etiquettes .input-group span:before{
    content:"";
    left: 0;
    width: 1px;
    height: calc(100% - 10px);
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
    background: #707070;
}
.header-input-group .input-group span svg,
.compte-etiquettes .input-group span svg{
    width: 16px;
}
.header-input-group button{
    border-radius: 3px;
    border: 0;
    height: 40px;
    width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.inner-page.compte-etiquettes{
    min-height: 440px;
}
.header-input-group button svg{
    width: 24px;
}
header h1{
    text-align: center;
    font-weight: 600;
    color: #fff;
    fill:#fff;
    display: flex;
    align-items: center;
    position: relative;
    gap:10px;
}
h1 .title-arrow{
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    cursor: pointer;
    width: 20px;
    min-width: 20px;
}
h2{
    font-size: 1.875em; 
    font-weight: 700;
    color: var(--text-color);
    text-transform: uppercase;
    line-height: 1.3em;
    margin-bottom: 15px; 
}
body.inner-page-open h1 .title-prev{
    opacity: 1;
    pointer-events: all;
}
.page{
	width: 100%;
	position: relative;
    overflow: auto;
    display: none;
    transition: 0s;
    background: #F8F8F9;
    background-image: url('../img/pwa-bg.jpg');
    background-size: cover;
    background-position: center;
}
.page.actualites{
    background-image: url('../img/actu-bg.jpg');
}
.page.actif{
    transition: 0.3s;
    display: block;
}
.page.panier,
.page.informations,
body.stocklist.inner-page-open .page.actif,
body.compte.inner-page-open .page.actif{
/*    background: #fff;*/
}
body.stocklist.inner-page-open .page.stocklist .container{
    background: #fff;
}
.page.compte{
/*    background: #F8F8F9;*/
}
.container{
    width: 100%;
/*    max-width: 640px;*/
    max-width: 90%;
    margin:0 auto;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    overflow-y: hidden;
    transition: 0.3s;
}
body.login .banner{
    display: none;
}
.banner{
    background: var(--brown);
    color:#fff;
    text-align: center;
    font-size: 1.3em;
    position: relative;
    transition: 0.5s;
}
.banner .close{
    fill: #fff;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    margin: auto;
    bottom: 5px;
}
.banner .close svg{
    fill: #fff;
    display: block;
    width: 100%;
    height: 100%;
}
.banner a{
    color: var(--main-color);
}
.banner .container:empty{
    padding: 0;
}
.banner .container:not(:empty){
    padding: 10px 20px;
    position: initial;
}
.page:not([class*='login']) .container .inner-page.main,
.page:not([class*='login']) .container .inner-page.actif,
header h1 .title{
    animation: container 0.5s ease-in-out;  
}
header h1 .title{
    text-transform: capitalize;
    display: block;
    left: 0;
    right: 0;
    font-size: 2.938em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
header h1 .sub-title{
    font-size: 1.25rem;
    line-height: 1.65rem;
    display: block;
    transition: 0.5s;
    overflow: hidden;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: none;
}
header h1 .sub-title.hide{
    position: absolute;
    opacity: 0;
}
header h1 .sub-title:before{
    content:'/';
    margin: 0 5px;
}
header h1 .title-container{
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 60px);
}
@keyframes container {
    0%{
        transform: translate(-80px, 0px);
        opacity: 0;
    }
    100%{
        transform: translate(0px, 0px);
        opacity: 1;
    }
}
.page .inner{
    position: relative;
}
.inner-page{
    padding: 25px 0;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    z-index: -1;
    transform: translate(-80px,0);
    transition: 0.5s;
    width: 100%;
}
.inner-page.main{
    display: block;
    left: 0;
}
.inner-page.actif{
    display: block;
    position: relative;
    opacity: 1;
    z-index: 0;
    transform: translate(0,0);
}
.inner-page .single-post{
    background: #fff;
}
.inner-page .single-post .single-post-img img{
    display: block;
    margin: auto;
    text-align: center;
    max-height: 200px;
}
.inner-page .single-post .single-post-info{
    padding: 20px 15px;
}
.inner-page .single-post .single-post-info-category{
    font-size: 0.875em;
    margin-bottom: 8px;
}
.inner-page .single-post .single-post-info-title{
    font-size: 2.063em;
    color: var(--main-color);
    font-weight: 700;
    margin-bottom: 15px;
}
.inner-page p{
    margin-bottom: 1em;
}
.alert-message p {
    margin-bottom: 0;
}
.inner-page ul{
    list-style: inside;
    margin-bottom: 1em;
}
.inner-page ul li{
    margin-bottom: 5px;
}
div[data-onglet] .compte-onglets-info-title{
    pointer-events: none;
}
.inner-page .single-post .single-post-info-content,
div[data-dynamic-content]{
    font-size: 1.125em;
}
div[data-dynamic-content]{
    line-height: 1.2em;
}
div[data-dynamic-content] p{
    margin-bottom: 1em;
}
.inner-page .single-post .single-post-info-content .aligncenter{
    text-align: center;
}
.inner-page .single-post .single-post-info-content p,
.inner-page .single-post .single-post-info-content img{
    margin-bottom: 1em;
}
.inner-page .single-post .single-post-info-content img{
    margin-left:auto;
    margin-right:auto;
    display: block; 
}
.inner-page .single-post .single-post-info-content video{
    max-width: 100%;
    margin: auto auto 10px;
    display: block; 
}
body h1 .title.remove {
    position: absolute;
    animation: removeInnerPage 0.5s ease-in-out;
    opacity: 0;
    pointer-events: none;
}
@keyframes removeInnerPage {
    0%{
        transform: translate(0px, 0px);
        opacity: 1;
    }
    100%{
        transform: translate(80px, 0px);
        opacity: 0;
    }
}
.btn{
	border:1px solid var(--main-color);
	border-bottom-color: #C29D57;
	background: var(--main-color);
	color: #fff; 
    text-decoration: none;
}
.btn:hover{
    background: #dab871;
}
.btn-alt{
    border:1px solid var(--gray);
    border-bottom-color: var(--gray);
    background: var(--gray);
    color: var(--text-color-bis);
}
.btn-alt:hover{
    background: var(--main-color);
    border-color: var(--main-color);
    border-bottom-color: #C29D57;
    color: #fff;
}
.btn,
.btn-alt{
    font-size: 0.938em;
    font-weight: 700;
    text-align: center;
    width: 200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px;
    transition: 0.3s;
    text-transform: uppercase;
    display: block;
    cursor: pointer;
}
.btn-delete:hover{
    background: var(--red);
    border-color: var(--red);
}
.btn-demande-avoir{
    margin: 0;
    width: 80px;
}
.table-compte-avoirs-date,
.table-compte-factures-date{
    white-space: nowrap;
}
body.login{
	background-image: url('../img/connexion-bg.jpg');
    background-size: cover;
    background-color: #000d15;
}
body.login:before{
    content: "";
    background: url(../img/connexion-droite.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 100% 66%;
    background-size: clamp(170px, 27vw, 315px) auto;
}
body.login:after{
    content: "";
    background: url(../img/connexion-gauche.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 0 15%;
    z-index: -1;
    background-size: clamp(170px, 27vw, 225px) auto;
}
body.login .close{
    position: fixed;
    right: 27px;
    top: 27px;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    cursor: pointer;
    width: 20px;
    z-index: 99;
}
body.login header,
body.login footer,
body[class=''] header,
body[class=''] footer{
    display: none;
}
.page.login .btn{
	width: 100%;
	border:4px solid #fff;
    border-width: 0.25rem;
	color: #172121;
	font-size: 35px;
    font-size: 2.188em;
	font-weight: 700;
	cursor: pointer;
	background: #fff;
	min-height: 108px;
    min-height: 5.5rem; 
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    text-decoration: none;
}
.page.login .btn-alt{
	font-size: 24px;
    font-size: 1.5em;
	color: #fff;
	background:transparent;
}
body.login .logo,
body.login-actif .logo{
	margin: auto;
	display: block;
    transition: 0.3s;
    animation: logo 1s ease-in-out;  
    width: 350px;
}
@keyframes logo {
    0%{
        transform: translate(0px, -80px);
        opacity: 0;
    }
    40%{
        transform: translate(0px, -80px);
        opacity: 0.1;
    }
    100%{
        transform: translate(0px, 0px);
        opacity: 1;
    }
}
.website-wrapper{
	display: flex;
	flex-direction: column;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
body.login .website-wrapper{
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
}
.pages{
	height: 100%;
    flex-grow: 1;
    display: flex;
    overflow: hidden;
    background-image: url('../img/pwa-bg.jpg');
    background-size: cover;
    background-position: center;
}
body .page.login,
body .page.login-actif{	
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    overflow: hidden;
    background: transparent;
}
body .page.login.actif,
body .page.login-actif.actif{
    display: flex;
}
body.login .page .container,
body.login-actif .page .container{
    padding-left: 30px;
    padding-right: 30px;
}
body.login .background-overlay{
    background: hsl(0deg 0% 0% / 40%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
body.login .background-overlay:before{
    content: "";
    background: url(../img/connexion-bas-gauche.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 0 87%;
    z-index: -1;
    background-size: clamp(80px, 27vw, 159px) auto;
}
body.login .background-overlay:after{
    content: "";
    background: url(../img/connexion-bas-droite.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    z-index: -1;
    background-size: clamp(75px, 27vw, 153px) auto;
}
.login-btn-container{
	display: flex;
	flex-direction: column;
	gap:28px;
    animation: logo-btn 1s ease-in-out;  
    margin-bottom: 0;
    padding-bottom: 40px;
}
.page.login .login-btn-container .btn.login-connexion-guest{
    padding: 0;
    border: 0;
    min-height: 0;
    justify-content: flex-end;
    font-size: 1.2em;
    width: auto;
    margin-right: 0;
}
.page.login-actif .login-btn-container{
    display: none;
}
@keyframes logo-btn {
    0%{
        transform: translate(0px, 80px);
        opacity: 0;
    }
    40%{
        transform: translate(0px, 80px);
        opacity: 0.1;
    }
    100%{
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

/*----- login actif ----------*/

.logo-container{
    transition: 0.5s;
    background: transparent;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.logo-container .container{
    overflow: visible;
}
.page.login-actif .logo-container{
    background: var(--main-color);
    flex-grow: 0;
}
.page.login-actif .logo-container .close{
    opacity: 1;
    pointer-events: all;
}
.page.login-actif .logo{
    width: 250px;
    transition: 1s;
}
.login-connexion{
    padding-top: 40px;
    padding-bottom: 40px;
    flex-grow: 1;
    background: #fff;
    display: none;
}
.page.login-actif .login-connexion{
    display: flex;
}
.login-connexion .container{
    margin: 0 auto;
    display: flex;
    flex-direction: column;    
}
.login-connexion .container.hidden{
    display: none;
}
.login-connexion .container.actif{
    display: flex;
    transition: 0.3s;
    animation: container 0.5s ease-in-out;
}
.login-connexion-input-group,
.login-password-lost-input-group,
.login-password-reset-input-group{
    margin: auto;
    width: 100%;
}
.login-connexion-input,
.login-password-lost-input,
.login-password-reset-input{
    margin-bottom: 26px;
}
.login-connexion-input input,
.login-password-lost-input-group input,
.login-password-reset-input-group input{
    border:2px solid var(--gray);
    width: 100%;
    height: 50px; 
    font-size: 1.5em;
    padding: 0 15px;
    border-radius: 0;
}
.login-connexion-input label span,
.login-password-lost-input-group label span,
.login-password-reset-input-group label span{
    color: var(--required);
}
.login-connexion-input label,
.login-password-lost-input-group label,
.login-password-reset-input-group label{
    color: var(--text-color);
    font-size: 1.25em;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}
.login-connexion-input-group-title,
.login-password-reset-input-group-title,
.login-password-lost-input-group-title{
    color: #172121;
    font-size: 2.188em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 26px;
}
.input-group{
    display: flex;
}
.input-group span{
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--gray);
    color: var(--text-color-bis);
    cursor: pointer;
}
.input-group span svg{
    fill:var(--text-color-bis);
    width: 26px;
}
.page.login-actif .btn{
    font-size: 2.188em;
    min-height: 108px;
    min-height: 5.5rem;
    width: 100%;
    font-weight: 700;
    border-width: 2px;
}
.login-connexion-submit-group,
.login-password-lost-submit-group,
.login-password-reset-submit-group{
    display: flex;
    flex-direction: column;
    gap:26px;
}
.login-connexion-submit-group-bottom,
.login-password-lost-submit-group-bottom,
.login-password-reset-submit-group-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.login-connexion-submit-group-bottom input,
.login-connexion-submit-group-bottom label,
.login-password-lost-submit-group-bottom input,
.login-password-lost-submit-group-bottom label,
.login-password-reset-submit-group-bottom input,
.login-password-reset-submit-group-bottom label{
    cursor: pointer;
}
.password-lost,
.password-lost a{
    color: var(--main-color);
    cursor: pointer;
    text-decoration: none;
}
.togglePassword-no-eye{
    display: none;
}
footer.guest-footer{
    padding: 20px 0;
    background: #fff;
}
footer{
    width: 100%;
/*    box-shadow: 0 0 20px rgb(0 0 0 / 13%);*/
    position: relative;
    filter: drop-shadow(2px 4px 20px rgb(0 0 0 / 13%));
}
footer:before {
    content: "";
    height: 127px;
    width: clamp(100px, 16vw, 300px);
    display: block;
    position: absolute;
    bottom: calc(100% - 1px);
    right: 0;
    background-image: url('../img/menu-right.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
}
footer:after {
    content: "";
    height: 69px;
    width: clamp(100px, 16vw, 300px);
    display: block;
    position: absolute;
    bottom: calc(100% - 1px);
    left: 0;
    background-image: url(https://app.maison-haegel.fr/assets/img/menu-left.svg);
    background-repeat: no-repeat;
    background-position: bottom left;
}
.footer-top{
    padding: 20px 0;
    background: #fff;
}
.footer-top:before{
    z-index: 1;
    content: "";
    pointer-events: none;
    position: absolute;
    left: 50%;
    height: 100%;
    width: 1500px;
    background-image: url(../img/footer-actu-left.png);
    background-repeat: no-repeat;
    top: -40px;
    background-size: auto 100%;
    transform: translate(-50%, 0px);
}
.footer-top:after{
    z-index: 1;
    content: "";
    pointer-events: none;
    position: absolute;
    left: 50%;
    height: 375px;
    width: 1900px;
    background-image: url(../img/footer-actu-right.png);
    background-position: right center;
    background-repeat: no-repeat;
    top: -210px;
    background-size: auto 100%;
    transform: translate(-50%, 0px);
}
.footer-bottom{
    background: var(--main-color);
    color: #fff;
}
.footer-bottom .footer-bottom-container{
    margin: auto;
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 20px;
    line-height: 1.2em;
}
.footer-items{
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-items-icon img{
    display: block;
    max-width: 20px;
}
.footer-items-content.no-wrap{
    white-space: nowrap;
}
footer .menu ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    max-width: 600px;
    margin: auto;
}
footer .menu ul li{
    cursor: pointer;
    position: relative;
}
footer .menu ul li:hover{
    color: var(--main-color);
}
footer .menu:not(.guest-menu) ul li > span:not(:empty){
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 1.10em;
    position: absolute;
    right: 0px;
    line-height: 0;
    left: 0px;
    margin: auto;
    bottom: 3px;
    font-weight: 600;
}
footer .menu ul li:hover svg{
    fill: var(--main-color);
}
footer .menu svg{
	height:35px;
}
footer li.actif svg{
	fill: var(--main-color);
}

#posts-container{
	display: flex;
	gap:20px;
	flex-direction: column;
}
#posts-container .post{
	display: flex;
	background: #fff;
    cursor: pointer;
}
#posts-container .post .post-img{
    width: 150px;
    min-width: 150px;
    min-height: 150px;
}
#posts-container .post .post-img img{
	object-fit: cover;
	object-position: center;
	width:100%;
	height: 100%;
}
#posts-container .post .post-info{
	padding: 15px;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap:10px;
    flex-grow: 1;
}
#posts-container .post-info-category{
	font-size: 0.875em;
	font-style: italic;
	overflow: hidden;
   	display: -webkit-box;
   	-webkit-line-clamp: 1;
    line-clamp: 1; 
   	-webkit-box-orient: vertical;
}
#posts-container .post-info-title{
	/*font-size: 2.063em;*/
	color: var(--main-color);
	font-weight: 700;
	line-height: 1.4em;
	overflow: hidden;
   	display: -webkit-box;
   	-webkit-line-clamp: 2;
    line-clamp: 2; 
   	-webkit-box-orient: vertical;
   	margin-bottom: auto;
    text-transform: none;
}
#posts-container .post-info-excerpt{
	font-size: 1.125em;
	overflow: hidden;
   	display: -webkit-box;
   	-webkit-line-clamp: 2;
    line-clamp: 2; 
   	-webkit-box-orient: vertical;
   	line-height: 1.375em;
   	margin-top: 10px;
}
#posts-container.loading .post-info-category,
#posts-container.loading .post-info-title,
#posts-container.loading .post-info-excerpt,
#posts-container.loading .post .post-img{
	background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
}
#posts-container.loading .post-info-category{
    width: 100%;
    max-width: 100px;
    min-height: 15px;
}
#posts-container.loading .post-info-title{
	flex-grow: 1;
}
#posts-container.loading .post-info-excerpt{
	min-height: 30px;
}
#posts-container.loading .post .post-img{
	opacity: 0.5;
}
#stocklist-container{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
#stocklist-container.columns{
    flex-wrap: nowrap;
}
#stocklist-container.columns .column{
    width: calc(50% - 5px);
}
#stocklist-container:not(.columns) .stocklist{
    width: calc(50% - 5px);
    margin-bottom: 0;
}
#stocklist-container .stocklist{
    width: 100%;
    background: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 3px 0px #00000029;
    pointer-events: none;
    max-height: 120px;
    transition: 0.3s;
    margin-bottom: 10px;
    height: 100%;
}
#stocklist-container #lastChance.stocklist{
    box-shadow: inset 0px 0px 0px 2px var(--red);
    text-transform: uppercase;
    color: var(--red);
}
#stocklist-container .stocklist.actif .stocklist-children-arrow{
    transform: rotate(90deg);
    transform-origin: center center;
}
#stocklist-container #stocklist-glaser.stocklist:after{
    content: "";
    background: url(../img/de.svg);
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
}
/*#stocklist-container .stocklist:before{
    content: "";
    padding-bottom: 100%;
    display: block;
}*/
#stocklist-container .stocklist-inner{
    display: flex;
    text-align: center;
    font-size: 1.25em;
    padding: 20px 10px 20px 40px;
    gap: 25px;
    pointer-events: all;
    align-items: center;
    cursor: pointer;
    min-height: 120px;
}
#stocklist-container .stocklist-childs{
    padding: 20px 40px;
/*    display: flex;
    flex-wrap: wrap;
    gap: 20px;*/
    column-count: 2;
    gap: 20px;
}
#stocklist-container .stocklist-childs .stocklist-childs-container{
/*    width:calc(50% - 10px);*/
    break-inside: avoid;
    flex-grow: 1;
    padding-bottom: 20px;
}
#stocklist-container .stocklist-childs .stocklist-childs-container.stocklist-childs-has-img{
    max-width: 120px;
}
#stocklist-container .stocklist-childs.col-3{
    column-count: 3;
}
#stocklist-container .stocklist-childs .stocklist-childs-title-img{
    position: relative;
    pointer-events: none;
    border: 1px solid var(--main-color);
    margin-bottom: 10px;
    max-width: 120px;
}
#stocklist-container .stocklist-childs .stocklist-childs-title-img:before{
    padding-bottom: 100%;
    content:"";
    width: 100%;
    display: block;
}
#stocklist-container .stocklist-childs .stocklist-childs-title-img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: center;
}
#stocklist-container .stocklist-childs .stocklist-childs-container > .stocklist-childs-title{
    font-weight: 700;
    font-size: 1.3em;
    text-transform: lowercase;
}
#stocklist-container .stocklist-childs .stocklist-childs-container > .stocklist-childs-title::first-letter{
    text-transform: uppercase;
}
#stocklist-container .stocklist-childs .stocklist-childs-title{
    cursor: pointer;
    pointer-events: all;
    transition: 0.3s;
    text-transform: lowercase;
}
#stocklist-container .stocklist-childs .stocklist-childs-title::first-letter{
    text-transform: uppercase;
}

#stocklist-container .stocklist-childs .stocklist-childs-title:hover{
    color: var(--main-color);
}
#stocklist-container .stocklist-childs .stocklist-childs-ul{
    list-style: disc;
    padding-left: 15px;
    margin-top: 6px;
}
#stocklist-container .stocklist-childs .stocklist-childs-ul li{
    margin-bottom: 8px;
    font-size: 1.1em;
    line-height: 1.2em;
}
#stocklist-container .stocklist-inner .stocklist-info{
    text-align: left;
}
#stocklist-container .stocklist-inner .stocklist-info-description{
    margin-top: 5px;
    font-size: 10px;
}
#stocklist-container .stocklist-inner .stocklist-info-title{
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 1.25em;
    text-align: left;
}
#stocklist-container .stocklist-inner .stocklist-children-arrow{
    display: none;
    transition: 0.3s;
}
#stocklist-container .hasChildren .stocklist-inner .stocklist-children-arrow{
    margin-left: auto;
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
#stocklist-container .hasChildren .stocklist-inner .stocklist-children-arrow img{
    pointer-events: none;
}
#stocklist-container .stocklist-inner .stocklist-img{
    --stocklist-img-size: 70px;
    width: var(--stocklist-img-size);
    height: var(--stocklist-img-size);
    max-width: var(--stocklist-img-size);
    min-width: var(--stocklist-img-size);
    max-height: var(--stocklist-img-size);
    overflow: hidden;
}
#stocklist-container .stocklist-inner .stocklist-img img{
    height: 100%;
    width: 100%;
    object-fit: scale-down;
}

#stocklist-container.loading .stocklist-info-title,
#stocklist-container.loading .stocklist-img{
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
}
#stocklist-container.loading .stocklist-info{
    width: 100%;
}
#stocklist-container.loading .stocklist-info h2{
    margin-bottom: 0;
}
#stocklist-container.loading .stocklist-info-title{
    min-height: 30px;
}
#stocklist-container.loading .stocklist-img{
    opacity: 0.5;
}
body.actualites.inner-page-open .stocklist{
    background: #fff;
}
.label-select{
    position: relative;
    display: inline-block;
}
.stocklist-details-filter .stocklist-details-filter-button{
    font-size: 1.875em;
    font-weight: 700;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--text-color-bis);
    display: inline-block;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 20px;
}
.stocklist-details-filter-block:first-of-type{
    margin-top: 25px;
}
.stocklist-details-filter-block{
    margin-bottom: 20px;
}
.stocklist-details-filter-block-title{
    font-size: 1.25em;
    margin-bottom: 5px;
}
.stocklist-details-filter-block select{
    font-size: 1.313em;
}
.stocklist-details-filter-block-content{
    display: flex;
    gap:10px;
}
.stocklist-details-filter-block-content .btn-alt{
    font-size: 1.188em;
    margin-left: 10px;
    font-weight: 400;
}
.groupPrix{
    display: flex;
    flex-grow: 1;
}
.groupPrix-space{
    display: flex;
    align-items: center;
}
.stocklist-details-filter-wrapper{
    position: absolute;
    bottom: 100%;
    pointer-events: none;
    overflow: hidden;
    transition: 0.5s;
}
.stocklist-details-filter-button.actif + .stocklist-details-filter-wrapper{
    position: relative;
    pointer-events: all;
    height: 0;
}
.stocklist-details-filter-block .stocklist-details-filter-block-content select,
.stocklist-details-filter-block .stocklist-details-filter-block-content input{
    margin: 0;
}
.groupPrix span{
    background: var(--gray);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 5px;
    font-weight: 600;
}
.stocklist-details-filter .stocklist-details-filter-button svg{
    width: 22px;
    transition: 0.5s;
    pointer-events: none;
}
.stocklist-details-filter .stocklist-details-filter-button.actif svg{
    transform: rotate(-90deg);
}
.stocklist-details-filter .stocklist-details-filter-button:focus svg{
    transform: rotate(-180deg);
}
.inner-page.stocklist-details .stocklist-details-filter{
    border-bottom: 1px solid var(--text-color);
    padding-bottom: 20px;
    margin-bottom: 10px;
    overflow: hidden; 
    position: relative;
}
.inner-page.stocklist-details.loading .stocklist-details-filter{
    display: none !important;
}
table{
    width: 100%;
}
table thead{
    font-size: 1em;
    text-align: left;
    color: var(--text-color-bis);
    font-weight: 600;
    text-transform: uppercase;
}
table tr{
    border-bottom: 1px solid var(--gray);
}
table tr.disabled{ 
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    background: repeating-linear-gradient(127deg, #f5f5f5, #f5f5f5 10px, #ffffff 10px, #ffffff 20px);
    background-size: 200%;
    background-position: center;
}
table tr.disabled input{
    border-color: #e3e3e3; 
    background: #f4f4f4; 
}
table tr.disabled .table-btn{
    background: #e3e3e3;
}
table tr.addable .stocklist-add-cart.table-btn{
    transition: 0.5s;
    background: var(--main-color);
}   
@keyframes rotating {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
table tr.added:not(.loading) .stocklist-add-cart.table-btn:after{
    transform: scale(0);
    opacity: 0;
}
table tr.added:not(.loading) .stocklist-add-cart.table-btn:before{
    background: url(../img/panier-added.svg);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center center;
    transform: scale(0);
    transition: 0.3s;
}
table tr.added .stocklist-add-cart.table-btn{
    background-color: var(--main-color);
}
table tr.loading{
    pointer-events: none;
}
table tr.loading .table-btn:after{
    opacity: 1;
    transform: scale(1);
}
.stocklist-details .table-btn:before,
table tr.added .table-btn:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center center;
    transition: 0.3s;
    animation: none;
}
.stocklist-details .stocklist-add-cart.table-btn:before,
table tr.added .stocklist-add-cart.table-btn:after{
    background-image: url(../img/panier-add.svg);
}
.stocklist-details .stocklist-view-product.table-btn.loading{
    background:var(--main-color);
}
.stocklist-details .stocklist-view-product.table-btn:not(.loading):before{
    background-image: url(../img/eye.svg?v=1);
}
table tr.added .table-btn:hover:after{
    opacity: 1;
    transform: scale(1);
}
.stocklist-details table tr.loading .stocklist-add-cart.table-btn:before{
    opacity: 0;
    transform: scale(0);
}
.stocklist-details .stocklist.added:not(.loading) .table-btn:before{
    opacity: 1 !important;
    transform: scale(1) !important;
}
table tr.loading .stocklist-add-cart.table-btn:after{
    content:"";
    background-image: url(../img/loading-white.svg);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    margin: auto;
    animation: rotate 1s linear infinite;
    height: 40%;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 1;
    transform: scale(1);
    transition: 0.3s;
}
table tr.added .table-btn:hover:before{
    opacity: 0 !important;
    transform: scale(0) !important;
}
/*table tr th span{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
           line-clamp: 1; 
    -webkit-box-orient: vertical;
}*/
table tr th,
table tr td{
    padding: 10px 5px;
    vertical-align: middle;
}
table tr th{
    vertical-align: middle;
}
table tr td.table-stocklist-nom,
table tr td.table-stocklist-prix,
table tr td.table-stocklist-code{
    padding-top: 15px;
}
table tr th:first-of-type,
table tr td:first-of-type{
    padding-left: 0;
}
table tr th:last-of-type,
table tr td:last-of-type{
    padding-right: 0;
}
table tbody{
    font-size: 0.938em;
    line-height: 1.4em;
}
table input[type='number']{
    border: 1px solid var(--main-color);
    border-radius: 0;
    width: 100%;
    text-transform: uppercase;
    outline: none;
    font-size: 1.25em;
    padding: 10px 5px;
}
/*table input[type='number'][max='0']{
    cursor: no-drop;
}*/
tbody .table-stocklist-qte,
tbody .table-stocklist-panier{
    vertical-align: middle;
}
.table-stocklist-panier,
.table-stocklist-view{
    width: 50px;
}
.table-stocklist-view{
    text-align: center;
}
.table-stocklist-qte,
.table-panier-qte {
    width: 50px;
}
.table-stocklist-prix,
.table-panier-prix {
    width: 75px;
}
.table-panier-sous-total {
    width: 100px;
}
.table-stocklist-code{
    width: 60px;
    max-width: 60px;
    word-break: break-word;
}
.table-stocklist-nom{
    word-break: break-word;
}
div.loading table tbody td span,
div.loading table tbody td input,
div.loading table tbody td .stocklist-add-cart,
div.loading table tbody td .stocklist-view-product{
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
} 
div.loading table tbody td span {
    min-height: 20px;
    display: block;
    min-width: 20px;
}
div.loading table tbody td.table-stocklist-nom span {
    min-height: 40px;
}
div.loading table tbody td input[type='number']{
    border-color: transparent;
}
table tr.stocklist-cat-title{
    border-bottom: 0;
}
table tr.stocklist-cat-title:not([niveau='0']) td .stocklist-cat-title-el{
    margin-top: 5px;
    padding: 5px;
    background: #c4b18c;
}
table tr.stocklist-cat-title[niveau='1'] td .stocklist-cat-title-el{
    background: #c4b18c;
}
table tr.stocklist-cat-title[niveau='2'] td .stocklist-cat-title-el{
    background:#ac9d82;
}
table tr.stocklist-cat-title[niveau='3'] td .stocklist-cat-title-el{
    background:#918674;
}
table tr.stocklist-cat-title[niveau='4'] td .stocklist-cat-title-el{
    background:#726b60;
}
table tr.stocklist-cat-title[niveau='5'] td .stocklist-cat-title-el{
    background:#57534c;
}
table tr.stocklist-cat-title[niveau='6'] td .stocklist-cat-title-el{
    background:#3e3c37;
}
table tr.stocklist-cat-title td{
    padding: 0;
    border-bottom: 0;
}
table tr.stocklist-cat-title .stocklist-cat-title-el{
    background: var(--main-color);
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    border-bottom: 0;
    margin-top: 20px;
    padding: 14px;
    line-height: 1em;
    border-radius: 5px;
}
.popup{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 0%);
    z-index: -999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: 0.3s;
    color: var(--text-color);
    padding: 20px;
    transition-delay: 0.3s;
}
.popup.actif{
    pointer-events: all;
    background: rgb(0 0 0 / 50%);
    z-index: 9999;
    transition-delay: 0s;
}
.inner-page .popup{
    position: relative;
    background: transparent;
    padding: 0;
}
.inner-page .popup .popup-inner{
    max-width: 100%;
}
.popup.error .popup-inner-title{
    background: var(--red);
}
.popup.valid .popup-inner-title{
    background: var(--green);
}
.popup .popup-inner{
    border-radius: 7px;
    max-width: 450px;
    opacity: 0;
    transition: 0.5s;
    transition-delay: 0s;
    transform: translate(0,-100px);
    overflow: hidden;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.popup.actif .popup-inner{
    transition: 0.5s;
    transition-delay: 0.3s;
    opacity: 1;
    transform: translate(0,0);
}
.popup .popup-inner-title{
    color: #fff;
    font-size: 1.3em;
    padding: 15px 50px;
    background: var(--main-color);
    text-align: center;
    position: relative;
    text-transform: uppercase;
    font-weight: 600;
}
.popup .popup-inner-title:empty{
    display: none;
}
.popup .popup-inner-content{
    font-size: 1.125em;
    padding: 30px 30px 20px;
    overflow: auto;
    line-height: 1.5;
    background:#fff;
    position: relative;
}
.popup .popup-inner-content p:last-of-type{
    margin-bottom: 15px;
}
.popup.popup-product-details .popup-inner{
    max-width: 800px;
}
.popup.popup-product-details .popup-inner-content-blocs{
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.popup.popup-product-details .popup-inner-content-blocs > div:empty{
    display: none;
}
.popup.popup-product-details .popup-inner-content-blocs > div:not(:empty){
    width: 100%;
    flex-grow: 1;
}
.popup.popup-product-details .popup-inner-content-blocs-col p{
    margin-bottom: 5px;
}
.popup.popup-product-details .popup-inner-content-blocs-col p strong{
    text-transform: uppercase;
}
.popup.popup-product-details .popup-inner-content-blocs .popup-inner-content-blocs-img img{
    display: block;
}
.popup.popup-product-details .popup-inner-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.popup.popup-video .popup-inner-content{
    padding: 0;
}
.popup.popup-video #QRCode_reader_sources{
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 99;
}
.popup.popup-video .QRCode_reader_sources-icon{
    width: 35px;
    height: 35px;
    fill: #fff;
    border: 1px solid #fff;
    border-radius: 100%;
    overflow: hidden;
    padding: 4px;
    cursor: pointer;
    background-image: url(../img/camera.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 25px;
}
.popup.popup-video #QRCode_reader_count{
    width: 60px;
    height: 60px;
    fill: #fff;
    border: 1px solid #fff;
    border-radius: 100%;
    padding: 4px;
    background-image: url(../img/qrcode.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 30px;
    position: absolute;
    bottom: 30px;
    top: auto;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99;
    opacity: 0;
    transition: 0.3s;
}
.popup.popup-video #QRCode_reader_count .QRCode_reader_count_item{
    background: #fff;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    font-family: arial;
    font-size: 11px;
    position: absolute;
    top: -10px;
    right: -5px;
    transition-delay: 0.5s;
    transition-duration: 0.3s;
    transform: scale(0);
}
.popup.popup-video #QRCode_reader_count.actif{
    opacity: 1;
    bottom: 10px;
}
.popup.popup-video #QRCode_reader_count.actif .QRCode_reader_count_item{
    transform: scale(1);
}
.popup.popup-video #QRCode_reader_video{
    max-width: 100%;
    width: 100%;
    display: block;
    background:#000;
    width: 100%;
    position: relative;
    z-index: 0;
}
.popup .popup-inner-title .close-popup{
    width: 25px;
    height: 25px;
    background: url(../img/close.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50%;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    border-radius: 100%;
    border: 1px solid;
    cursor: pointer;
    transition: 0.3s;
}
.popup .popup-inner-title .close-popup:hover{
    filter: invert(1);
    background-color: #000;
    border-color: #000;
}
.popup.popup-video .popup-inner{
   width: 100%; 
}
#actualisation_produits img{
    padding: 10px;
}
.page.reload.stocklist #actualisation_produits,
#stocklist-container #actualisation_produits.stocklist:hover{
    transition: 0.3s;
    background:var(--main-color);
    color: #fff !important;
}
.page.reload.stocklist #actualisation_produits img{
    filter: invert(1);
    animation: rotating 1s linear infinite;
}
#stocklist-container #actualisation_produits.stocklist:hover img{
    filter: invert(1);
}

@keyframes rotating {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}
#panier-container table{
    background-color: #fff;
}
.page.panier .container{
    background-color: #fff;
}
.panier-update{
    margin-top: 25px;
    margin-bottom: 25px;
}
.panier-total{
    border:2px solid var(--gray);
    padding: 25px;
    transition: 0.3s;
    background-color: #fff;
}
.panier-total .panier-total-title{
    color: var(--text-color);
    text-transform: uppercase;
    font-size: 1.375em;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--gray);
    padding-bottom: 15px;
    font-weight: 700;
}
.panier-total-count{
    color: var(--text-color);
    font-size: 1.125em;
    margin-bottom: 15px;
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
}
.panier-total-count .panier-total-count-price{
    color: var(--main-color);
    font-size: 1.438em;
    font-weight: 600;
}
.page.panier table tr td{
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}
.panier .table-panier-sous-total{
    text-align: right;
}
.panier .table-panier-delete-row{
    width: 20px;
}
.panier .table-panier-designation{ 
    padding-left: 0px;
    transition: 0.3s;
}
.panier.error .table-panier-designation{ 
    padding-left: 20px;
    animation: warning_show_tr 0.3s ease-in-out;  
}
.panier.error .table-panier-designation:before{
    content: '';
    width: 15px;
    height: 16px;
    background-image: url(../img/warning-triangle.svg);
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-repeat: no-repeat;
    animation: warning 2s infinite, warning_show 0.3s ease-in-out;
    transform: translate(0px,0);
    opacity: 1;
    transition: 0.3s;
    background-size: 100%;
} 
#panier-container.loading .panier.error .table-panier-designation:before{
    transform: translate(-20px,0px);
    animation: none;
}
#panier-container.loading .panier.error .table-panier-designation{ 
    padding-left: 0px;
}
#panier-container.loading #panier-details-container{
    filter: blur(3px);
}
#panier-container.loading .panier-update,
#panier-container.loading .panier-total .panier-total-count-price,
#panier-container.loading .panier-total .panier-total-validation,
.loading.btn,
.loading.btn-alt,
.table-btn.loading{
    color: transparent;
    position: relative;
}
#panier-container .panier-total .panier-total-validation.btn-alt,
.loading.btn,
.loading.btn-alt,
.table-btn.loading{
    pointer-events: none;
}
.page table tr td.loading > div:before,
#panier-container.loading .panier-update:before,
#panier-container.loading .panier-total .panier-total-count-price:before,
#panier-container.loading .panier-total .panier-total-validation:before,
.loading.btn:before,
.loading.btn-alt:before,
.table-btn.loading:after{
    content: "";
    background-image: url(../img/loading-gray.svg);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    margin: auto;
    animation: rotate 1s linear infinite;
/*    height: 40%;
    width: auto;*/
    background-repeat: no-repeat;
    background-position: center;
}

#panier-container.loading .panier-total .btn:before,
.loading.btn:before,
.table-btn.loading:after{
    background-image: url(../img/loading-white.svg);
}
#panier-container.loading .panier-total .panier-total-count-price:before,
.page table tr td.loading > div:before{
    background-image: url(../img/loading-color.svg);
}
#panier-container.loading .panier-total .panier-total-count-price:before{
    left: auto;
}

@keyframes rotate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.loading .btn-alt{
    pointer-events: none;
}
@keyframes warning {
    0%{
        opacity: 1;
    }
    75%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes warning_show {
    0%{
        transform: translate(-20px,0);
    }
    100%{
        transform: translate(0px,0);
    }
}
@keyframes warning_show_tr {
    0%{
        padding-left: 0px;
    }
    100%{
        padding-left: 20px;
    }
}
.alert-message:empty{
    height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}
.alert-message{
    background: var(--main-color);
    color: #fff;
    font-size: 0.875em;
    padding: 18px 45px;
    position: relative;
    margin-bottom: 20px;
    transition: 0.3s;
}
.alert-message:before{
    content: "";
    position: absolute;
    left: 15px;
    top: 0;
    background: url(../img/warning-circle.svg);
    width: 20px;
    height: 20px;
    background-size: 100%;
    bottom: 0;
    margin: auto;
}
.alert-message p:not(:last-of-type){
    margin-bottom: 5px;
}
#panier-container-empty,
#posts-container-empty{
    display: none;
    border: 2px solid var(--gray);
    padding: 25px;
    text-align: center;
    font-size: 1.4em;
    font-weight: 500;
    text-transform: uppercase;
}
#posts-container-empty{
    display: block;
}
#panier-container-empty .btn{
    margin-top: 20px;
}
.none{
    display: none !important;
}
.block{
    display: block !important;
}
form label{
    width: 100%;
    font-size: 0.938em;
    line-height: 1.4em;
    margin-top: 10px;
    display: block;
}
form input:not([type='checkbox']),
form textarea,
form select{
    width: 100%;
    border: 1px solid var(--gray);
    margin: 0;
    min-height: 40px;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 0;
    font-weight: 500;
    -moz-appearance: none; 
    -webkit-appearance: none; 
    appearance: none;
    color: var(--text-color-bis);
    background-color: #fff;
}
textarea{
    resize: vertical;
}
form > div:not(:first-of-type) h2{
    margin-top: 20px;
}
.form-group{
    flex-direction: column;
    display: flex;
}
.form-group:not(.form-group-checkbox) label{
    order:-1;
}
.form-group-checkbox{
    flex-direction: row;
    flex-wrap: nowrap;
    gap:5px;
}
.form-group-checkbox input{
    margin: 0;
}
.form-group-checkbox label{
    margin: 0;
}
.form-group input[required] ~ label:after{
    content:"*";
    color: var(--required);
    margin-left: 2px;
}
form .button-expedition{
    margin-top: 40px;
    margin-bottom: 20px;
}
.panier-details-form-expedition{
    display: none;
    padding-bottom: 30px;
}
.panier-details-form-date.error{
    border: 1px solid;
    border-color: var(--red) !important;
}
.panier-details-recap h2{
    text-align: center;
}
.panier-details-recap .btn{
    width: 100%;
}
.panier-details-recap-inner{
    background: #F8F8F9;
    padding: 20px;
    position: relative;
}
.panier-details-recap-inner:before,
.panier-details-recap-inner:after{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: transparent;
    background-image: radial-gradient(farthest-side, rgba(0,0,0,0) 6px, #f8f8f8 0);
    background-size: 15px 15px;
}
.panier-details-recap-inner:before{
    top: -10px;
    background-position: -3px -5px, 0 0;
}
.panier-details-recap-inner:after{
    bottom: -10px;
    background-position: -3px 2px, 0 0;
}
.panier-details-recap table{
    background: #fff;
    border: 5px solid #fff;
    box-shadow: 2px 2px 2px hsl(0deg 0% 0% / 10%);
    color: var(--text-color);
}
.panier-details-recap table thead{
    color: var(--text-color);
}
.panier-details-recap table th:last-of-type,
.panier-details-recap table td:last-of-type{
    text-align: right;
}
.panier-details-recap-bottom{
    border-top: 1px solid var(--gray);
    margin-top: 15px;
    padding-top: 20px;
    line-height: 1.5em;
}
.panier-details-recap-bottom a{
    text-decoration: none;
    color: var(--text-color-bis);
}
.panier-details-recap-bottom .panier-send{
    margin-top: 25px;
}
.panier-details-recap table tr[data-product-id]{
    color: var(--text-color-bis);
}
.panier-details-recap table tr td.panier-details-recap-sous-total,
.panier-details-recap table tr td.panier-details-recap-port,
.panier-details-recap table tr td.panier-details-recap-total{
    color: var(--main-color);
    font-weight: 600;
}
.panier-details-recap table tbody > tr:last-of-type{
    font-weight: 600;
    font-size: 1.8em;
    line-height: 1em;
}
.panier-details-recap table tr th:first-of-type, 
.panier-details-recap table tr td:first-of-type{
    padding-left: 5px;
}
.panier-details-recap table tr th:last-of-type, 
.panier-details-recap table tr td:last-of-type{
    padding-right: 5px;
}
body.compte.inner-page-open .page.compte.actif .container{
    background: #fff;
}
body.compte .page.compte.actif .container{
    transition: 0.3s;
}
.page.compte #compte-onglets-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.page.compte #compte-onglets-container .compte-onglets{
/*    width: calc(50% - 5px);*/
    width: calc(33.33% - 6.66px);
    background: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.page.compte #compte-onglets-container .compte-onglets:before {
    content: "";
    padding-bottom: 100%;
    display: block;
}
.page.compte #compte-onglets-container .compte-onglets-img {
    width: 70%;
    margin: auto;
    max-width: 110px;
    max-height: 90px;
    overflow: hidden; 
}
.page.compte #compte-onglets-container .compte-onglets-img img {
    height: 100%;
    width: 100%;
    object-fit: scale-down;
}
.page.compte #compte-onglets-container .compte-onglets-inner {
    display: flex;
    flex-direction: column;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 1.25em;
    justify-content: flex-end;
    padding: 20px;
    gap: 20px;
    pointer-events: none;
}
.page.compte .compte-contact form button{
    margin-top: 30px;
}
.page.compte .compte-contact-avis{
    margin-top: 50px;
}
.page.compte .compte-contact-avis{
    margin-top: 50px;
}
.page.compte .form-group-radio label{
    cursor: pointer;
    padding: 0 10px;
}
.page.compte input[name="form-compte-avis-note"]{
    display: none;
}
.page.compte .form-group-radio svg{
    transition: 0.3s;
    width: 100%;
}
.page.compte .form-group-radio label:hover svg,
.page.compte .form-group-radio label:hover ~ label svg,
.page.compte input[name="form-compte-avis-note"]:checked ~ label svg{
    fill: var(--main-color);
}
.page .table-highlight{
    font-weight: 600;
    color: var(--main-color);
}
.page.compte .table-compte-commandes-commentaire{
    max-width: 140px;
}
.compte-commandes-inner-details-customer-details{
    margin-top: 50px;
}
.compte-commandes-inner-details-customer-details-addresses{
    display: flex;
    gap: 30px;
}
.compte-commandes-inner-details table th,
.compte-commandes-inner-details table td{
    white-space: nowrap;
}
.compte-commandes-inner-details table .table-compte-commandes-inner-product{
    width: 100%;
    white-space: normal;
}
table .table-compte-commandes-client{
    max-width: 100px;
    width: 100px;
}
.page.compte table tbody:not(#compte-commandes-details-container) tr td{
    vertical-align: middle;
}
.page.compte table tr td.link-icon{
    position: relative;
    width: 35px;
} 
.page.compte table tr td.link-icon img{
    cursor: pointer;
    width: 25px;
    height: 25px;
    object-fit: scale-down;
    object-position: center;
    display: block;
}
body[offline] .page table tr td.link-icon:not(.offlineAccess){
    filter: grayscale(1);
    pointer-events: none;
}
.page table tr td.loading img{
    opacity: 0;
}
.form-group-radio{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    margin: 20px auto 40px;
    max-width: 80%;
}
.form-group-radio label{
    width:auto;
}
.datepicker-picker,
.datepicker-picker .datepicker-view .days,
.datepicker-picker .datepicker-grid{
    width: 100%;
}
body.search .stocklist-details-filter{
    display: none;
} 
.checkbox-pill{
    display: none;
}
.checkbox-pill + label{
    position: relative;
    padding-left: 50px;
    min-height: 21px;
    cursor: pointer; 
    display: flex;
    align-items: center;
}
.checkbox-pill + label:before{
    content: '';
    background: var(--btn-bg);
    width: 40px;
    height: 21px;
    border-radius: 20px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}
.checkbox-pill + label:after{
    content: '';
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 100%;
    display: block;
    position: absolute;
    left: 3px;
    top: 3px;
    transition:0.3s;
}
.checkbox-pill:checked + label:after{
    left: 22px;
}
.checkbox-pill:checked + label:before{
    background:var(--main-color);
}
.compte-details-info{
    font-size: 1.25em;
}
.compte-details-info .compte-details-info-title{
    color: var(--btn-bg);
    padding-bottom: 15px;
}
.compte-details-info .compte-details-info-content{
    color: var(--text-color);
    border-bottom:1px solid var(--btn-bg);
    display: block;
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 35px;
}
#compte-avoirs-container h2{
    margin-top: 40px;
}
.error input,
input.error ,
textarea.error {
    border-color: var(--red) !important;
}
.compte-details-info-logout{
    color: var(--red);
    font-size: 1.25em;
    cursor: pointer;
}
/*-- animation poissons --*/
.fish-container{
    width: 100%;
    position: relative;
    margin: auto;
    height: 260px;
    max-height: 30vh;
    max-width: 30vh;
}
.fish {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(calc(var(--coilSize)* 4) calc(var(--coilSize) / 3) 5px rgba(0, 0, 0, 0.3));
}
.fish .koiCoil {
    position: absolute;
    width: var(--coilSize);
    height: var(--coilSize);
    background-color: #e4b863;
    border-radius: 50%;
    top: 0;
    left: 0;
    transform: scale(var(--scaleMe), var(--scaleMe));
    /* offset-path: path("M 14 168 C 1 153 -26 151 -60 115 C -77 101 -103 54 -63 36 C -36 27 24 44 55 73 C 175 146 27.7073 131.211 33.0199 183.157 C 38.3326 235.102 90.3211 195.669 129 202 C 142 199 159 219 133 235 C 119 244 113 241 107 262 C 99 316 186 275 184 210 C 181 191 191 188 192 180 C 195 122 175.78 30.8091 25.8099 59.9288 C -55 80 0 130 25.8099 141.07 C 55 149 171.529 204.769 91 225 C 77 228 63 231 64 257 C 76 285 54 296 34 292 C 1 285 -24 281 -16 257 C -5 236 9 262 31 226 C 33 206 35 192 28 182 Z"); */
    offset-path: circle(28% at 32% 50%);
    animation: fishAnim 5000ms linear infinite;
    box-shadow: calc(var(--coilSize) / -2) calc(var(--coilSize) / -10) 0 white inset;
}

.fish:nth-of-type(2) {
    transform-origin: center;
    transform: rotate(180deg);
    filter: drop-shadow(
        calc(var(--coilSize) * -4) calc(var(--coilSize) / 3) 5px rgba(0, 0, 0, 0.3)
    );
}
.fish:nth-of-type(2) .koiCoil {
  background-color: white;
  box-shadow: calc(var(--coilSize) / -2) calc(var(--coilSize) / -10) 0 #e4b863
    inset;
}
.fish .koiCoil:nth-of-type(15),
.fish .koiCoil:nth-of-type(14) {
  background-color: #e4b863;
}
.fish:nth-of-type(2) .koiCoil:nth-of-type(15),
.fish:nth-of-type(2) .koiCoil:nth-of-type(14) {
  background-color: white;
}
.fish .koiCoil:nth-of-type(15)::after {
  content: ":";
  position: absolute;
  color: black;
  font-weight: 800;
  text-align: center;
  line-height: 60%;
  font-size: calc(var(--coilSize) * 1.2);
}
.fish .koiCoil:nth-of-type(1)::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  top: 25%;
  left: -100%;
  border-radius: var(--coilSize);
  background-color: white;
  /*box-shadow: calc(var(--coilSize) / -10) calc(var(--coilSize) / -4) calc(var(--coilSize) / 3) rgba(0,0,0,.3) inset;*/
  transform-origin: center right;
  animation: backFlip 200ms ease-in-out alternate infinite;
}
.fish .koiCoil:nth-of-type(14) {
  --scaleMe: 1.2;
  animation-delay: calc(var(--delayCount) * 1);
}
.fish .koiCoil:nth-of-type(13) {
  --scaleMe: 1.35;
  animation-delay: calc(var(--delayCount) * 2);
}
.fish .koiCoil:nth-of-type(12) {
  --scaleMe: 1.55;
  animation-delay: calc(var(--delayCount) * 3);
}
.fish .koiCoil:nth-of-type(11) {
  --scaleMe: 1.75;
  animation-delay: calc(var(--delayCount) * 4);
}
.fish .koiCoil:nth-of-type(10) {
  --scaleMe: 1.9;
  animation-delay: calc(var(--delayCount) * 5);
}
.fish .koiCoil:nth-of-type(9) {
  --scaleMe: 2;
  animation-delay: calc(var(--delayCount) * 6);
}
.fish .koiCoil:nth-of-type(8) {
  --scaleMe: 2;
  animation-delay: calc(var(--delayCount) * 7);
}
.fish .koiCoil:nth-of-type(7) {
  --scaleMe: 2;
  animation-delay: calc(var(--delayCount) * 8);
}
.fish .koiCoil:nth-of-type(6) {
  --scaleMe: 1.9;
  animation-delay: calc(var(--delayCount) * 9);
}
.fish .koiCoil:nth-of-type(5) {
  --scaleMe: 1.75;
  animation-delay: calc(var(--delayCount) * 10);
}
.fish .koiCoil:nth-of-type(4) {
  --scaleMe: 1.55;
  animation-delay: calc(var(--delayCount) * 11);
}
.fish .koiCoil:nth-of-type(3) {
  --scaleMe: 1.35;
  animation-delay: calc(var(--delayCount) * 12);
}
.fish .koiCoil:nth-of-type(2) {
  --scaleMe: 1.2;
  animation-delay: calc(var(--delayCount) * 13);
}
.fish .koiCoil:nth-of-type(1) {
  animation-delay: calc(var(--delayCount) * 14);
}
.fish .koiCoil:nth-of-type(12)::before,
.fish .koiCoil:nth-of-type(12)::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20%;
  top: -10%;
  left: -100%;
  border-radius: var(--coilSize);
  background-color: white;
  transform-origin: center right;
  animation: sideFlip 500ms ease-in-out alternate infinite;
}
.fish .koiCoil:nth-of-type(12)::after {
  --scaleFlip: -1;
  --posFlip: calc(var(--coilSize) * -1);
}
.seaLevel {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.4;
}
@keyframes fishAnim {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
@keyframes backFlip {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}
@keyframes sideFlip {
  0% {
    transform: scale(1, var(--scaleFlip)) translateY(var(--posFlip))rotate(80deg);
  }
  100% {
    transform: scale(1, var(--scaleFlip)) translateY(var(--posFlip))rotate(20deg);
  }
}
.popup.popup-panier .popup-inner{
    width: 100%;
}
.popup.popup-panier .popup-inner-content{
    padding: 0;
}
/*.popup.popup-panier .popup-inner-content .fish-container:after{
    content:"";
    position: absolute;
    top:0;
    left: 0;
    padding: 0;
    background-image: url(../img/loading-color.svg);
    animation: rotate 1s linear infinite;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center; 
}*/
.popup.popup-panier .popup-inner-content .fish-text{
    text-align: center;
    background-color: var(--main-color);
    color: #fff;
    padding: 20px;
}
.popup.popup-panier .popup-inner-content .fish-text .popup-panier-articles{
    margin-top: 15px;
    font-size: 1.2em;
    font-weight: 600;
}

.slider-container {
  position: relative;
  max-width: 600px;
  margin: auto;
}

.slider-container .slides {
  display: flex;
  position: relative;
  overflow: hidden;
}

.slider-container .slide {
    position: absolute;
    opacity: 0;
    left: -40px;
    transition: 0.5s;
}
.slider-container .slide.actif {
    position: relative;
    opacity: 1;
    left: 0px;
}

.slider-container button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); 
    border: none;
    cursor: pointer;
    font-size: 22px;
    z-index: 1;
    padding: 0;
    background: #000;
    color: #fff;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    transition: 0.3s;
}
.slider-container button:hover{
    background-color: var(--main-color);
}

.slider-container button svg{
    width: 100%;
    height: 100%;
    padding: 5px;
    fill: #fff;
}

.slider-container .prev {
  left: 0;
}

.slider-container .next {
  right: 0;
}

.popup.popup-avoir{
    color: var(--btn-bg);
}
.popup.popup-avoir p{
    font-size: 1.125em;
}
.popup-avoir-title{
    text-transform: uppercase;
    color: var(--text-color);
    font-size: 1.375em;
    font-weight: 600;
    margin-top: 20px;
}
.popup-avoir .popup-avoir-products-commentaire{
    padding-top: 30px;
}
.popup-avoir .popup-avoir-products-commentaire label{
    color: var(--text-color-bis);
    font-size: 1.25em;
    font-weight: 600;
    text-transform: uppercase;
}
.popup-avoir .popup-avoir-products .btn{
    margin-top: 10px;
    margin-bottom: 5px;
}
form .input-max-number{
    display: flex;
    align-items: center;
    border: 1px solid var(--main-color);
    min-height: 40px;
    padding: 7px;
    line-height: 1.7em;
    margin-bottom: 3px;
    cursor: pointer;
    font-weight: 600;
}
form .input-max-number input{
    width: 50%;
    min-height: auto;
    padding: 0;
    border: 0;
    text-align: right;
    margin: 0;
    font-size: 1.25em;
    font-weight: 600;
}
form #popup-avoir-products .input-max-number span{
    font-size: 1.25em;
    color: var(--main-color);
}
form #popup-avoir-products td{
    vertical-align: bottom;
}
form #popup-avoir-products td span{
    color: var(--text-color-bis);
}
form #popup-avoir-products select{
    margin-bottom: 3px;
}
.table-btn.disabled{
    pointer-events: none;
}
form #popup-avoir-products .table-btn:after{
    background: url(../img/plus.svg);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center center;
    transition: 0.3s;
}

#popup-avoir-products tr.added:not(.loading) .table-btn:before {
    opacity: 1;
    transform: scale(1);
}
.button-link{
    display: block;
    background: var(--grey);
    padding: 20px;
    margin-bottom: 15px;
    font-size: 1.25em;
    cursor:pointer;
    transition: 0.3s;
}
.button-link:hover{
    color: #fff;
    background: var(--main-color);
}

/*etiquettes*/
.compte-etiquettes-filtre{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.compte-etiquettes-search{
    position: relative;
    margin:30px 0;
}
.compte-etiquettes-search .btn{
    width: auto;
}
.compte-etiquettes-filtre span{

}
.compte-etiquettes-filtre #compte-etiquettes-filtre-input {
    display: none;
}
.compte-etiquettes-filtre #compte-etiquettes-filtre-input + label[for="compte-etiquettes-filtre-input"] {
    width: 45px;
    height: 20px;
    border-radius: 10px;
    background: var(--green);
    display: inline-block;
    position: relative;
    cursor: pointer;
}
.compte-etiquettes-filtre #compte-etiquettes-filtre-input + label[for="compte-etiquettes-filtre-input"]:before {
    position: absolute;
    top: 0;
    left: 3px;
    bottom: 0;
    transition: 0.3s;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    display: block;
    background: #fff;
    content: "";
    margin: auto;
}
.compte-etiquettes-filtre #compte-etiquettes-filtre-input:checked + label[for="compte-etiquettes-filtre-input"]:before {
    left: calc(100% - 17px);
}
#search-products-etiquettes-list:not(:empty) {
    position: absolute;
    top: 100%;
    left: -1px;
    width: calc(100% + 2px);
    overflow: auto;
    max-height: clamp(0px, 300px, 35vh);
    background: #fff;
    color: var(--text-color);
    z-index: 1;
    border: 1px solid var(--main-color);
}
#search-products-etiquettes-list div {
    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: 0.3s;
}
#etiquettes-container{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#etiquettes-container .etiquettes-product{
    box-shadow: 0 0 20px rgb(0 0 0 / 13%);
    background: #ffffff;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    position: relative;
}
#etiquettes-container .etiquettes-product > div{
    flex-grow: 1;
    width: calc(33.33% - 10px);
}
#etiquettes-container .etiquettes-product > div.etiquettes-product-image{
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px;
    background: #f2f2f2;
}
#etiquettes-container .etiquettes-product > div.etiquettes-product-infos{
    width: calc(100% - 160px);
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
}
#etiquettes-container .etiquettes-product > div.etiquettes-product-infos > div:not(.etiquettes-product-name){
    width: calc(33.33% - 8px);
    flex-grow: 1;
}
#etiquettes-container .etiquettes-product div.etiquettes-product-name{
    width: 100%;
}
#etiquettes-container .etiquettes-product > div.etiquettes-product-close{
    width: 15px;
    height: 15px;
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}
#etiquettes-container .etiquettes-product > div.etiquettes-product-close svg{
    fill: var(--text-color);
    transition: 0.3s;
    width: 15px;
}
#etiquettes-container .etiquettes-product > div.etiquettes-product-close:hover svg{
    fill: var(--red);
}
.etiquettes-product-logo-group{
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
}
.etiquettes-product-logo-group label{
    height: 40px;
    border: 1px solid var(--gray);
    padding: 0 15px;
    max-width: 100%;
    width: 100%;
    flex-grow: 1;
    background-color: transparent;
    box-shadow: none;
    vertical-align: middle;
    font-size: 14px;
    transition: border-color .5s ease;
    display: inline-block;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    position: relative;
    padding-right: 50px;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    line-height: 40px;
    text-overflow: ellipsis;
}
.etiquettes-product-logo-group label:before{
    content: "";
    width: 38px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../img/image.svg), var(--main-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: -10px 0px 0px #fff;
    background-position: center center;
    background-size: 60%;
    background-repeat: no-repeat;
}
.etiquettes-product-logo-group input {
    display: none;
}
.popup-inner-content-tabs .popup-inner-content-tabs-title{
    margin-bottom: 20px;
}
.popup-inner-content-tabs .popup-inner-content-tabs-title{
    position: relative;
}
.popup-inner-content-tabs .popup-inner-content-tabs-title-selected{
    position: absolute;
    top: -1px;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--main-color);
    border-radius: 5px;
    transition: 0.5s;
}
.popup-inner-content-tabs .popup-inner-content-tabs-title ul{
    display: flex;
    gap:20px;
    border-top: 1px solid #f1f1f1;
    padding-top: 10px;
}
.popup-inner-content-tabs .popup-inner-content-tabs-title ul li{
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}
.popup-inner-content-tabs .popup-inner-content-tabs-title ul li:hover{
    color: var(--main-color);
}
.popup-inner-content-tabs .popup-inner-content-tabs-title ul li.actif{
    color: var(--main-color);
}
.popup-inner-content-tabs-content{
    position: relative;
    overflow: hidden;
}
.popup-inner-content-tabs-content .popup-inner-content-tabs-content-bloc{
    position: absolute;
    top: 0;
    left: -100px;
    column-count: 2;
    column-gap: 20px;
    opacity: 0;
    pointer-events: none;
    transition: 0.5s;
}
.popup-inner-content-tabs-content .popup-inner-content-tabs-content-bloc p{
    margin-bottom: 5px;
}
.popup-inner-content-tabs-content .popup-inner-content-tabs-content-bloc.video{
    column-count: inherit;
    column-gap: 0px;
}
.popup-inner-content-tabs-content .popup-inner-content-tabs-content-bloc.video iframe{
    max-width: 100%;
}
.popup-inner-content-tabs-content .popup-inner-content-tabs-content-bloc.actif{
    position: relative;
    left: 0px;
    opacity: 1;
    pointer-events: all;
}
.header-logo-container{
    display: flex;
    align-items: center;
    gap:20px;
}
#loader-container {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    margin-left:auto;
    display: none;
}
#loader-container.actif{
    display: flex;
}
#loader-container:before{
    content: "";
    width: 2px;
    height: calc(100% - 2px);
    border-top: 2px solid #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    transform: rotate(0deg);
    animation: 1.5s rotate linear infinite;
}
@keyframes rotate {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
#progress-circle {
}
.progress-ring__background {
    stroke: rgb(255 255 255 / 23%);
    stroke-width: 5px;
    fill: transparent;
}
.progress-ring__foreground {
    stroke: #fff;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.35s;
    stroke-width: 5px;
    fill: transparent;
    stroke-dashoffset: 0;
    transform: rotate(-90deg); /* Start the stroke from top */
    transform-origin: center;
}
.progress-ring__animation{
    stroke: lightgrey;
    stroke-width: 2px;
    fill: transparent;
}
#progress-text {
    font-size: 6px;
    fill: #fff;
}

.page.parametres .container,
.page.parametres .container .inner,
.page.parametres .container .inner-page,
.page.parametres .container .inner-page,
.page.parametres .inner-page-container{
    min-height: 100%;
    display: flex;
    width: 100%;
}
.page.parametres {
/*    background: #fff;*/
}
.page.parametres .inner-page-container{
    padding: 10px;
    flex-direction: column;
}
.page.parametres h2,
.page.parametres h3{
    text-align: center;
}
.page.parametres h3{
    font-size: 1.275em;
    font-weight: 700;
    color: var(--text-color);
    text-transform: uppercase;
    line-height: 1.3em;
    margin-bottom: 15px;
}
.page.parametres .input-group{
    box-shadow: 0 0 20px rgb(0 0 0 / 13%);
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
.page.parametres .parametres-select-client{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.page.parametres select{
    flex-grow: 1;
    border: 0;
    height: 40px;
    font-size: 1.063em;
    padding: 0 15px;
    border-radius: 0;
    color: var(--text-color-bis);
    outline: none;
    background: #fff;
    width: 100%;
    text-align: center;
    cursor: pointer;
    text-align-last: center;
}
.parametres-liste-commandes{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.parametres-liste-commandes .commande{
    box-shadow: 0 0 20px rgb(0 0 0 / 13%);
    background: #ffffff;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    position: relative;
    align-items: center;
    justify-content: space-between;
}
.parametres-liste-commandes .commande > div{
    display: flex;
    align-items: center;
    gap: 20px;
}
.page.parametres .parametres-blocs{
    margin-bottom: 20px;
    border: 2px solid var(--gray);
    padding: 20px 10px;
    background-color: #fff;
}
.page.parametres #select-parametres-categories-list{
    text-align: left;
}
.page.parametres .category-container.input-group{
    flex-direction: column;
    margin-top: 10px;
    padding: 10px;
}
.page.parametres .category-container.input-group textarea{
    border: 1px solid var(--gray);
    margin: 0 0 10px;
}
#parametres-category-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}
#parametres-category-list li{
    box-shadow: 0 0 20px rgb(0 0 0 / 13%);
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    position: relative;
    min-height: 32px;
    padding-right: 50px;
    padding: 9px 50px 9px 10px;
    line-height: 1.2;
}
#parametres-category-list li .delete-btn{
    margin-right: 0;
    background-color: var(--red);
    border-color: var(--red);
    background-image: url(../img/close.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 32px;
    background-size: 14px;
    position: absolute;
    top: 0;
    right: 0;
    height: 32px;
    padding: 0;
}

.stocklist-details-description:not(:empty){
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid var(--grey);
    padding: 10px;
    background: var(--grey);
}
.parametres-category-list-container{
    margin-top: 20px;
}
.category-container.hidden{
    display: none;
}
.innerPageLink{
    cursor: pointer;
}
.btn-delete-panier-row{
    cursor: pointer;
}
.btn-delete-panier-row:hover img{
    filter: brightness(0);
}
.btn-delete-panier-row img{
    display: block;
    transition: 0.3s;
    filter: brightness(0.4);
    width: 12px;
}
.maintenance-message{
    color: #fff;
    line-height: 1.4em;
    font-size: 16px;
}

.prix-promotionnel{
    font-style: italic;
    color: var(--red);
    margin-bottom: 0;
}
.panier-warning-message{
    display: none;
    transition: 0.3s;
}
.panier-warning-message.actif{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}
.panier-action-button{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
}
.panier-action-button .btn-alt,
.panier-action-button .btn{
    margin-left:0;
    margin-right:0;
}
/*Plus grand*/
@media screen and (min-width: 1025px) {
    .container{
        max-width: 900px;
    }
}

/*Plus petit*/
@media screen and (max-width: 1100px) {
    .header-container-video-left:after, .header-container-video-right:after{
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .parametres-liste-commandes .commande{
        flex-direction: column;
    }
    .parametres-liste-commandes .commande > div {
        flex-direction: column;
    }
    footer:after ,
    footer:before {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    footer .menu ul {
	    padding: 0;
	}
    header h1 .title{
        font-size: 2em;
    }
    header h1 .sub-title{
        font-size: 1rem;
        line-height: 1.15rem;
    }
    .page.compte .form-group-radio label{
        padding: 0 5px;
    } 
    #stocklist-container.columns{
        flex-wrap: wrap;
        gap: 0;
    }
    #stocklist-container.columns .column{
        width: 100%;
    }
    #stocklist-container .stocklist{
        width: 100%;
        max-height: 100px;
    }
    #stocklist-container .stocklist-inner{
        padding: 10px 10px 10px 20px;
        min-height: 100px;
    }
    #stocklist-container .stocklist-inner .stocklist-img{
        --stocklist-img-size: 50px;
    }
    table tr th {
        font-size: 0.7em;
    }
    .compte-commandes-inner-details-customer-details-addresses{
        flex-direction: column;
    }
    table .table-compte-commandes-commentaire,
    table .table-compte-commandes-date-livraison{
        display: none;
    }
    .page.compte table tr td.link-icon img{
        width: 20px;
        height: 20px;
    }
    .container{
        max-width: 100%;
        padding-right: 10px;
        padding-left: 10px;
    }
    .popup.popup-product-details .popup-inner-content-blocs{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .popup.popup-product-details .popup-inner-content-blocs > div:not(:empty){
        text-align: left;
    }
    .popup.popup-product-details .popup-inner-content-blocs .popup-inner-content-blocs-img img{
        margin:auto;
    }
    .popup-inner-content-tabs .popup-inner-content-tabs-title ul{
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }
    .popup-inner-content-tabs-content .popup-inner-content-tabs-content-bloc{
        column-count: 1;
    }
    .popup-inner-content-tabs-content .popup-inner-content-tabs-content-bloc.video iframe{
        height: 250px;
    }
    #etiquettes-container .etiquettes-product{
        flex-direction: column;
    }
    #etiquettes-container .etiquettes-product > div.etiquettes-product-image{
        width: 100%;
        padding: 10px;
    }
    #etiquettes-container .etiquettes-product > div.etiquettes-product-image img{
        max-height: 150px;
    }
    #etiquettes-container .etiquettes-product > div.etiquettes-product-infos{
        width: 100%;
    }
    #etiquettes-container .etiquettes-product > div.etiquettes-product-infos > div:not(.etiquettes-product-name) {
        width: calc(50% - 8px);
    }
    .footer-bottom{
        display: none;
    }
    .header-container{
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 20px 0;
        padding: 0;
    }
    .header-container > .container{
        order: -1;
    }
    .header-container-video-left, .header-container-video-right {
        width: calc(50% - 20px);
        padding: 0;
        max-height: 20vw;
        margin: 0 10px;
    }
    .header-container-video-left video, .header-container-video-right video, .header-container-video-left canvas, .header-container-video-right canvas {
        max-height: 100%; 
        height: 100%;
        top: 0;
    }
    .header-container-video-left:before, .header-container-video-right:before{
        top: 0;
        height: 100%;
    }
    .header-container-video-left:after, .header-container-video-right:after{
        display: block;
        top: 0;
        background-size: 70%;
        height: 100%;
    }
    .header-container-video-left:after{
        background-position: 90% 90%;
    }
    .header-container-video-right:after{
        background-position: 10% 90%;
    }
    .header-container-video-left:empty, .header-container-video-right:empty{
        display: none;
    }
    .panier-warning-message.actif{
        flex-direction: column;
    }
    .panier-warning-message.actif p{
        margin: 0;
    }
    .panier-action-button{
        flex-wrap: nowrap;
        overflow: hidden;
        width: 100%;
    }
} 

@media screen and (max-width: 500px) {
    .login-connexion-submit-group-bottom{
        flex-direction: column;
    }
}