@charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Light.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}

:root{
    --couleur-base1: #ec1d25;
    --couleur-base2: #009345;
	--couleur-base1f: #b1080e;
	--couleur-base2f: #01632f;
}

body,html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Roboto';
	font-size: 16px;
    line-height: 1.4em;
    color: #000000;
	background-color: #ffffff;
}

/* TYPO --------------------------------------- */

p{ margin: 0; padding: 0; }

h1{
    width:100%;
    text-align: center;
    font-size: 2em;
    color: #000000;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 40px;
}
h1::first-letter{ color : var(--couleur-base1); }
h1::after{
    content:"";
    content:'';
    display: block;
    width:100px;
    height: 1px;
    background-color: #000000;
    margin-top: 15px;
    left: calc(50% - 50px);
    position: absolute;
    float: left;
}

h2{
    width:100%;
    display: inline-block;
    margin: 10px 0;
    padding-bottom:5px; 
    border-bottom: 1px solid #000000;
    font-size: 1em;
    font-style: italic;
    font-weight: normal;
}
h2::first-letter{ color : var(--couleur-base1); }
h2.couleur{
    border-bottom: 1px solid var(--couleur-base1);
}
h3{
	width:100%;
	font-size: 1.2em;
	font-weight: normal;
	position: relative;
	float: left;
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	border-bottom: 1px solid #000000;
}
h3::first-letter{ color:var(--couleur-base1); }

.txtT4{ font-size: 3em; line-height: 1.2em; }
.txtT3{ font-size: 2em; line-height: 1.2em; }
.txtT2{ font-size:1.8em; line-height: 1.2em; }
.txtT1{ font-size:1.4em; line-height: 1.2em; }
.txtT0{ font-size:1.2em; line-height: 1.2em; }
.txtMini{ font-size:0.8em; line-height: 1.2em; }

.txtOldPrix{ font-size: 1em; text-decoration: line-through; }

.lienSimple{ text-decoration: none; color: #000000; }
.lienBlanc{ text-decoration: none; color: #ffffff; }
.lienMini{ text-decoration: none; font-size: 0.8em; }

.coul1{ color:var(--couleur-base1); }
.coul2{ color:var(--couleur-base2); }
.gris{ color:#999999; }

/* -------------------------------------------- */


#Haut{
    width:100%;
    position: relative;
    float: left;
    z-index: 1;
}
#Haut.pageAccueil{
    height: 650px;
    background-image:url("photo/bg/back-acc.jpg");
    background-size: cover;
    background-position: center center;
}
#NavP{
    width:100%;
    height: 120px;
    border-bottom: 1px solid #cccccc;
    background-color: rgba(255,255,255,0.95);
    position: relative;
    float: left;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    z-index: 2;
}
.menuP{
    width:490px;
    position: absolute;
    float: left;
    left: 0;
    display: flex;
    justify-content: space-around;
}
    .boutonP a{
        color:#000000;
        text-decoration: none;
        transition-property: all;
        transition-duration: 0.4s;
        transition-timing-function: ease-in-out;
    }
    .boutonP:hover a{ color:#999999; }
.logoP{
    height: 110px;
    margin: 0 5px;
    position: absolute;
    float: left;
    left: 50%;
    transform: translateX(-50%);
}
    .logoP img{ max-height:100%; }
.boutiqueP{
    width: 220px;
    position: absolute;
    float: left;
    left: 100%;
    transform: translateX(-100%);
}
    .boutonCo{
        height: 35px;
        line-height: 35px;
        vertical-align: middle;
        position: relative;
        float: left;
        margin-right: 40px;
    }
    .boutonCo a{
        color: #000000;
        text-decoration: none;
        transition-property: all;
        transition-duration: 0.4s;
        transition-timing-function: ease-in-out;
    }
    .boutonCo:Hover a{
        color: #999999;
    }
    .boutonCo img{ max-height:100%; vertical-align:middle; }
    .boutonPan{
        width:35px;
        height:40px;
        background-image: url("img/ico-Panier.png");
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        position: relative;
        float: left;
    }
    .boutonPan p{
        width: 100%;
        text-align: center;
        color: #ffffff;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }


#Bas{
    width:100%;
    position: relative;
    float: left;
    margin-top: 60px;
}
.finPage{
    width:100%;
    color: #ffffff;
    background-color: #000000;
    position: relative;
    float: left;
    padding: 5px 0;
}
.menuF{
    width:100%;
    position: relative;
    float: left;
    display: flex;
    justify-content: center;
    column-gap: 40px;
}
    .boutonF a{
        color:#ffffff;
        text-decoration: none;
        transition-property: all;
        transition-duration: 0.4s;
        transition-timing-function: ease-in-out;
    }
    .boutonF:hover a{ color:#999999; }
.coordF{
    text-align: center;
    position: relative;
    float: left;
    left: 50%;
    transform: translateX(-50%);
    margin: 10px 0;
    clear: both;
}
.reseauFin{
    width: 100%;
    display: flex;
    justify-content: center;
    column-gap: 10px;
    position: relative;
    float: left;
    margin: 5px 0;
}

/* BOUTON --------------------------- */
.boutonCadre{
    min-width: 120px;
    font-size: 1.1em;
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--couleur-base1);
    color:var(--couleur-base1);
    text-decoration: none;
    text-shadow: none;
    position: relative;
    transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}
.boutonCadre .fd{
    width:100%;
    height: 0;
    background-color: var(--couleur-base1);
    position: absolute;
    float: left;
    left: 0;
    bottom: 0;
    z-index: -1;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}
.boutonCadre:Hover{
    color: #ffffff;
}
.boutonCadre:Hover .fd{
    height: 100%;
}
.boutonCadre.blanc{
    border: 1px solid #ffffff;
    color: #ffffff;
}
.boutonCadre.noir{
    border: 1px solid #000000;
    color: #000000;
}
    .boutonCadre.noir .fd{ background-color: #000000; }
    .boutonCadre.noir:Hover{
        color: #ffffff;
    }

.boutonCadre.trame{
    background-color: rgba(255,255,255,0.3);
}


.pageSTD{
    width:100%;
    position: relative;
    float: left;
    margin: 40px 0;
    clear: both;
}

/* PARAGRAPHE ---------------------- */
.txtCentre{ text-align: center; }
.col100{
    width:96%;
    margin: 0 2%;
    position: relative;
    float: left;
}
.col100.ssmarge{
    width:100%;
    margin: 0;
}
.col50{
    width:46%;
    margin: 0 2%;
    position: relative;
    float: left;
}

.flexLibre{
	width:100%;
	position: relative;
    float: left;
    display: flex;
    justify-content:space-between;
}
.flexFull{
    width: 100%;
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
}
.flex1300{
    width:100%;
    max-width: 1300px;
    display: flex;
    position: relative;
    float: left;
    left: 50%;
    transform: translateX(-50%);
    clear: both;
    margin: 40px 0;
}
.wrapOK{ flex-wrap: wrap; }
.contenucentrer{
    align-items: center;
    justify-content: center;
}


.trame100{
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.8);
    position: fixed;
    float: left;
    z-index: 15;
}
.message{
max-height: 90%;
border:1px solid #000000;
background-color:#FFFFFF;
box-shadow: 0 0 5px #333333;
padding: 35px 20px 20px 20px;
position:fixed;
float:left;
left:50%;
top:50%;
transform:translate(-50%, -50%);
z-index:20;
overflow: auto;
}
.closeF{
	width:80px;
	height:25px;
	background-color:#333333;
	border-radius:0 0 0 8px;
	color:#FFFFFF;
	font-size:0.8em;
	text-align:center;
	line-height:25px;
	vertical-align:middle;
	position:absolute;
	float:right;
	top:0;
	right:0px;
	}
	.closeF a{
	color:#FFFFFF;
	text-decoration:none;
	}

.alerte.interne{
    width: 100%;
    background-color:#fdf3bd;
    color: var(--couleur-base1);
    text-align: center;
    position: relative;
    float: left;
    margin-bottom: 20px;
    padding: 10px 0;
}

.messageBord{
    min-width:200px;
    max-width: 600px;
    min-height: 50px;
    background-color: #ffffff;
    border: 1px solid #999999;
    box-shadow: 0 2px 4px #333333;
    display: flex;
    align-items: stretch;
    position: fixed;
    top: 50px;
    right: -1px;
    z-index: 20;
    transform: translateX(150%);
    visibility: hidden;
}
.messageBord.visible{
    visibility: visible;
    animation-name: popVue;
    animation-duration: 0.5s;
	animation-timing-function: linear;
    animation-delay: 0s;
	animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.caseClose{
    width:40px;
    background-color: #cccccc;
    color: #666666;
    font-size: 2em;
    font-weight: 100;
    text-align: center;
    position: relative;
    float:left;
}
.caseClose p{
    width:100%;
    text-align: center;
    position: absolute;
    float: left;
    top: 50%;
    transform: translateY(-50%);
}
.caseClose p a{ color: #666666; text-decoration: none; }
.infoMessage{
    position: relative;
    float: left;
    margin: 0 10px;
    padding: 10px 0;
}

.caseClose.NW{ width:100%; text-align: center; padding: 5px 0; font-size: 1.6em; }
.popNW{
	width:900px;
	max-width:calc(90% - 20px);
	max-height: calc(90% - 20px);
	background-color: #ffffff;
	border: 1px solid #000000;
	box-shadow: 0 0 5px #666666;
	padding: 10px;
	position: fixed;
	float: relative;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: auto;
	z-index: 100;
}
.txtNW{
	width:auto;
	max-width:100%;
	margin: 10px 0;
	position: relative;
	float:left;
}
.photoNW{
	width:auto;
	max-width:100%;
	margin: 10px 0;
	position: relative;
	float:left;
}
.photoNW img{ max-width: 100%; }

/* ACCUEIL -------------------------- */

.sloganP{
    width:100%;
    text-align: center;
    position: relative;
    float: left;
    color: #ffffff;
    text-shadow: 0 2px 4px #000000;
    margin-top: calc((650px - 120px)/2);
    transform: translateY(-50%);
}

.caseProduit{
    width:300px;
    /*height: 380px;*/
    position: relative;
    float: left;
    margin: 20px;
    cursor: pointer;
}
.caseCadrePhoto {
	width: calc(100% - 2px);
	height: 318px;
	border: 1px solid #000000;
	overflow: hidden;
	position: relative;
	float: left;
}

.caseCadreFleche {
	border: none;
}

.caseCadrePhoto .casePhoto {
	width: 100%;
	height: 100%;
	position: relative;
	float: left;
	z-index: 1;
}

.caseCadrePhoto .casePhoto img {
	object-fit: cover;
	object-position: center center;
	height: 100%;
	width: 100%;
}

.caseCadrePhoto .bandeSurvol {
	width: 100%;
	height: 40px;
	line-height: 40px;
	background-color: rgba(0, 0, 0, 0.7);
	color: #ffffff;
	text-align: center;
	position: absolute;
	bottom: -40px;
	z-index: 2;
	transition-property: all;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

.caseCadrePhoto .mea {
	width: auto;
	text-decoration: none;
	font-style: italic;
	box-shadow: 2px 2px 4px #000000;
	padding: 2px 20px;
	position: absolute;
	float: left;
	top: 5px;
	left: 0;
	z-index: 2;
}
.caseCadrePhoto .mea.promo{
    background-color: var(--couleur-base1);
    color: #ffffff;
}
.caseCadrePhoto .mea.new{
    background-color: var(--couleur-base2);
    color: #ffffff;
}
.caseCadrePhoto .mea.coeur{
    background-color: #ffffff;
    color: #000000;
}
.caseNomProduit{
    width:100%;
    text-align: center;
    color: #000000;
    text-decoration: none;
    position: relative;
    float: left;
    margin: 5px 0;
}
.casePrixProduit{
    width:100%;
    text-align: center;
    position: relative;
    float: left;
	padding-bottom: 5px;
    border-bottom:1px solid #dddddd;
}
.caseProduit:Hover .caseCadrePhoto .bandeSurvol{
    bottom:0;
}


.caseRayon{
    height: 323px;
    border: 1px solid #000000;
    position: relative;
    float: left;
    margin: 0 20px 20px 20px;
    cursor: pointer;
    overflow: hidden;
}
.caseRayon.T50{ width:calc(50% - 50px); }
.caseRayon.T30{ width:calc(33% - 50px); }
.caseRayon.T25{ width:calc(25% - 50px); }
    .caseRayon .casePhoto{
        width:100%;
        height: 100%;
        position: relative;
        float: left;
        z-index: 1;
    }
    .caseRayon .casePhoto img{
        object-fit: cover;
        object-position: center center;
        height: 100%;
        width: 100%;
    }
    .caseRayon .nomRayon{
        width:100%;
        height: 50px;
        background-color: rgba(0,0,0,0.7);
        color: #ffffff;
        text-align: center;
        position: absolute;
        bottom: -25px;
        padding: 5px 0;
        z-index: 2;
        transition-property: all;
        transition-duration: 0.4s;
        transition-timing-function: ease-in-out;
    }
.caseRayon:Hover .nomRayon{
    bottom:0;
}


/* LISTING ---------------------------- */
.bandeauMenuCategorie{
	width:240px;
	background-color: #000000;
	color: #ffffff;
	text-align: center;
	font-size: 1.2em;
	padding: 5px 0;
	border-radius: 0 0 8px 8px;
	transform: rotateZ(-90deg);
	display: none;
	left: -105px;
	top: 150px;
	z-index: 1;
}
.supCategorie{
	width:100%;
	height: 300px;
	background-color: #000000;
	position: relative;
	float: left;
	margin-bottom: 40px;
	overflow: hidden;
}
.photoSup{
	width:1200px;
	max-width: calc(100% - 300px);
	height: 100%;
	position: relative;
	float: left;
}
.photoSup img{
	object-fit: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.zoneTitreRayon{
	width:calc(100% - 1240px);
	height: calc(100% - 40px);
	background-color: #ffffff;
	position: relative;
	float: left;
	margin: 20px 20px;
}
.zoneTitreRayon h1{ position: absolute; top: 50%; transform: translateY(-50%); margin: 0; }

.enteteCategorie{ display: none;}
.menuCategorie{
    width:220px;
	background-color: #ffffff;
    margin: 0 20px;
    position:relative;
    float: left;
    z-index: 2;
	transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}
.menuCategorie a{
    color: #000000;
    text-decoration: none;
}

.titreMenuCategotire{
    font-size: 1.2em;
    padding: 5px 0;
    border-bottom: 1px solid var(--couleur-base1);
    display: block;
    margin-bottom:5px;
}
.menuCategorie ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.N1{
    vertical-align: middle;
    font-size:1.2em;
    font-weight: bold;
    padding: 5px 0;
    border-bottom: 1px solid #333333;
    padding-left: 5px;
    margin-bottom: 5px;
    cursor: pointer;
}
.N1 ~ ul{
    padding: 5px 0;
	margin-left: 8px;
}
.N2{
    border-bottom: 1px dashed #999999;
    cursor: pointer;
}
.N2 ~ ul{
    padding: 5px 0;
    background-color: #eeeeee;
}
.suiteR>div::after{
    content:"-";
    font-weight: normal;
    font-size: 0.9em;
    position: relative;
    float: right;
    right: 5px;
}
.suiteR.plier>div::after{ content:"+"; }

.N3{
    vertical-align: middle;
    font-size:1em;
    font-weight: normal;
    padding: 0;
    padding-left: 15px;
    margin-bottom: 5px;
    border: 0;
}

#VueChargement{
	width:calc(100% - 302px);
	text-align: center;
	position: relative;
	float: left;
	margin-left: 30px;
}
#ZoneListing{
	width:calc(100% - 302px);
	position: relative;
	float: left;
	margin-left: 30px;
	/*border: 1px dashed red;*/
}
.pageListing{
	width:100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	position: relative;
	float: left;
}
.caseListing{
    width:280px;
    position: relative;
    float: left;
    margin: 0 15px 30px 15px;
    cursor: pointer;
}
.caseCadrePhoto.listing {
	height: 298px;
}

.caseListing:Hover .caseCadrePhoto .bandeSurvol {
	bottom: 0;
}

.cadreFleche {
	position: absolute;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 180px;
	height: 180px;
	border: 2px solid var(--couleur-base1);
	background-color: #ffffff;
}

.caseListingSuite img,
.caseListingPrecedent img {
	max-width: 100%;
	position: absolute;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.naviagtionListing{
	width:100%;
	border-top: 1px solid #000000;
	display: flex;
	justify-content: space-between;
	position: relative;
	float: left;
	margin-top: 30px;
	z-index: 1;
}
.navPageGauche{
	position: relative;
	float: left;
	margin: 5px 0 0 5px;
}
.navPageDroit{
	position: relative;
	float: left;
	margin:5px 5px 0 0;
}
.casePage{
	width:20px;
	height: 24px;
	border: 1px solid #000000;
	position: relative;
	float: left;
	margin: 0 5px;
}
.casePage p{
	width: 100%;
	color: #000000;
	text-align: center;
	position: absolute;
	float: left;
	top: 50%;
	transform: translateY(-50%);
}
.casePage.actif{ background-color: #000000; }
.casePage.actif p{ color:#ffffff; }


/* PRODUIT ------------------------- */

.pageProd{
    width:90%;
	max-width: 1100px;
    position: relative;
    float: left;
	margin: 40px 0;
	left: 50%;
	transform: translateX(-50%);
    clear: both;
}
.ligneNav{
	width: 100%;
	display: flex;
	justify-content: space-between;
	position: relative;
	float: left;
	margin-bottom: 20px;
}
#Ariane{
text-decoration:none;
position:relative;
float:left;
}
#Ariane li {
   list-style-type: none;
   margin-left: 0;
   display: inline;
}
	#Ariane a{
	text-decoration:none;
	color:#000000;
	}
	#Ariane a.videL{
	text-decoration:none;
	color:#aaaaaa;
	}
.boutBack{
	background-color: var(--couleur-base2);
	color: #ffffff;
	vertical-align: middle;
	position: relative;
	float: left; 
	margin: 1em;
	padding: 0 0 0 10px;
	border-radius: 30px;
}
.boutBack a{ 
	color: #ffffff;
	text-decoration: none;
}
.boutBack img{ vertical-align: middle;}
.boutBack span{
	/*border-bottom:1px solid var(--couleur-base2);*/
	padding: 4px 0;
}

.paraFirstProd{
	width:100%;
	display: flex;
	position: relative;
	float: left;
}
.colPhoto{
	width:calc(50% - 20px);
	position: relative;
	float: left;
	margin: 0 10px;
}
.photoPrim{
	width:460px;
	height: 400px;
	border: 1px solid #666666;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	clear: both;
}
.photoPrim img{
	object-fit: contain;
	object-position: center center;
	width: 100%;
	height: 100%;
}
.flexMiniPhoto{
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	float: left;
}
.miniPhoto{
	width:70px;
	height: 70px;
	border: 1px solid #666666;
	margin: 10px;
}
.miniPhoto img{
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100%;
}
.colPresentProd{
	width:calc(50% - 20px);
	position: relative;
	float: left;
	margin: 0 10px;
}
.nomProd{
	width:100%;
	position: relative;
	float: left;
	font-size: 1.5em;
	color: #000000;
	margin-bottom: 5px;
}
.refProd{
	width:100%;
	position: relative;
	float: left;
	font-size: 1.1em;
	color: #666666;
	margin-bottom: 5px;
}
.marqueLogo{
	width:100%;
	height: 50px;
	position: relative;
	float: left;
	margin-bottom: 10px;
}
.marqueLogo img{
	max-height: 100%;
}
.colPrix{
	width:100%;
	min-height: 80px;
	position: relative;
	float: left;
	margin: 20px 0;
}
.flexPrix{
	width:100%;
	display: flex;
	align-items: center;
	position: relative;
	float: left;
	clear: both;
}
.prixFiche{
	font-size: 1.8em;
	color: #000000;
}
.oldPrixFiche{
	font-size: 1.2em;
	color:var(--couleur-base1);
	text-decoration: line-through;
}
.prixmea{
	font-size: 0.9em;
	font-style: italic;
	padding: 5px 20px;
	position: relative;
	float: left;
	color: #ffffff;
	margin-left: 20px;
} 
.prixmea.promo{ background-color:var(--couleur-base1); }
.prixmea.new{ background-color:var(--couleur-base2); }
.prixmea.coeur{ background-color:#000000; }

.flexTaille{
	width:100%;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	float: left;
}
input[type="radio"].caseTailleFiche{ display: none; }
input[type="radio"].caseTailleFiche + label{
    width:80px;
	padding: 5px;
	margin: 2px;
	text-align: center;
	border: 1px solid #000000;
	display: block;
	cursor: pointer;
}
input[type="radio"].caseTailleFiche:checked + label{
    background-color: #dddddd;
}
input[type="radio"].caseTailleFiche:disabled + label{
    opacity:0.3;
}
.nomTaille{
	font-size: 1em;
	color: #000000;
	border-bottom: 1px dashed #999999;
}
.prixTaille{
	font-size: 0.9em;
}
.oldPrixTaille{
	font-size: 0.75em;
	color:var(--couleur-base1);
	text-decoration: line-through;
}

.accrocheProd{
	width: calc(100% - 20px);
	border-top:1px solid #000000;
	border-bottom: 1px solid #000000;
	padding: 20px 10px;
	position: relative;
	float: left;
	margin-bottom: 20px;
}
.quantiteProd{
	width: 100%;
	display: flex;
	align-items: center;
	position: relative;
	float: left;
	padding-bottom: 20px;
	border-bottom: 1px solid #000000;
	margin-bottom: 10px;
}
.labelQuantite{
	font-size: 1.2em;
	position: relative;
	float: left;
	margin-right: 20px;
}
.labelQuantite::first-letter{ color:var(--couleur-base1); }
.quantiteNum{
	width:200px;
	font-size: 1.3em;
	display: inline-flex;
	position: relative;
	float: left;
}
.quantiteBouton{
	width: 40px;
	background-color: #ffffff;
	position: relative;
	float: left;
	margin: 0 5px;
	transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}
.quantiteBouton p{
	width:100%;
	color: #000000;
	text-decoration: none;
	text-align: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.quantiteBouton.nonactif p{
	color:#ffffff;
}
.quantiteBouton:hover{
	background-color: #eeeeee;
}
.quantiteBouton.nonactif:hover{
	background-color: #ffffff;
}

input[type="text"].caseQuantite{
    width:80px;
	height: 30px;
	line-height: 30px;
	font-size:1em;
	vertical-align: middle;
	text-align: center;
	border: 1px solid #000000;
	display: block;
	margin: 0;
	padding: 0;
}

.subProd{
    width:100%;
	border-radius: 4px;
    border: 1px solid var(--couleur-base1);
    background-color: var(--couleur-base1);
    color: #ffffff;
	text-align: center;
	text-decoration: none;
	font-family: 'Roboto';
	font-size: 1.2em; 
	display: inline-block;
	margin: 5px 0;
    padding: 10px 0;
    cursor: pointer;
	position: relative;
	float: left;
    left: 50%;
    transform: translateX(-50%);
    clear: both;
	transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}
.subProd:hover{ background-color: var(--couleur-base1f); }

.paraSuiteProd{
	width:100%;
	position: relative;
	float: left;
	margin-top: 60px;
}


#VoletPanier{
	width:350px;
	height: 100%;
	background-color: #ffffff;
	box-shadow: 0 -5px 10px #000000;
	position: fixed;
	float: right;
	right: 0;
	z-index: 8;
	transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}
#VoletPanier.close{
	margin-right: -400px;
}
.enteteVoletPanier{
	width:100%;
	height: 50px;
	background-color: var(--couleur-base2);
	font-size: 1.8em;
	color: #ffffff;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
}
.boutRetourPanier{
	width: 50px;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
}
.finalVoletPanier{
	width:calc(100% - 20px);
	height: 120px;
	position: absolute;
	float: left;
	bottom:10px;
	left: 10px;
}
.totalVoletPanier{
	width:100%;
	height: 70px;
	text-align: center;
	position: relative;
	float: left;
	border-top: 1px solid #000000;
}
.totalVoletPanier p{
	width:100%;
	position: absolute;
	float: left;
	top: 50%;
	transform: translateY(-50%);
}
.validVoletPanier{
	width:100%;
	height: 50px;
	background-color: var(--couleur-base2);
	color: #ffffff;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;
	position: relative;
	float: left;
	transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}
.validVoletPanier:hover{
	background-color: var(--couleur-base2f);
}
.listeVoletPanier{
	width:calc(100% - 20px);
	height: calc(100% - 202px);
	/*border: 1px solid red;*/
	margin: 10px;
	position: absolute;
	float: left;
	top: 50px;
	overflow: auto;
}

.blocProdVolet{
	width:100%;
	min-height: 90px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #dddddd;
	position: relative;
	float: left;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
.photoVolet{
	width:88px;
	height: 88px;
	border: 1px solid #000000;
	position: relative;
	float: left;
}
.photoVolet img{
	object-fit: cover;
	object-position: center center;
	width:100%;
	height: 100%;
}
.detailProdVolet{
	width: calc(100% - 100px);
	position: relative;
	float: left;
	margin-left: 10px;
}
.prixVolet{
	color: var(--couleur-base2);
	font-size: 1em;
}
.oldPrixVolet{
	color: var(--couleur-base1);
	font-size: 0.8em;
	text-decoration: line-through;
}
.qteVolet{
	width:100%;
	font-size: 0.9em;
	background-color: #eeeeee;
}

#ZoneMessVolet{
	width:calc(100% - 10px);
	background-color: rgba(0,0,0,0.9);
	color: #ffffff;
	text-align: center;
	position: absolute;
	float: left;
	padding: 5px;
	bottom: 140px;
	z-index: 2;
}


/* PANIER --------------------------- */
.listePanier{
	width:calc(100% - 320px);
	position: relative;
	float: left;
}
.recapPanier{
	/*width:calc(100% - 840px);*/
	width:280px;
	position: relative;
	float: left;
	margin-left: 40px;
}
.blocPanier{
	width:100%;
	height: 90px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #dddddd;
	position: relative;
	float: left;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
.photoPanier{
	width:88px;
	height: 88px;
	border: 1px solid #000000;
	position: relative;
	float: left;
}
.photoPanier img{
	object-fit: cover;
	object-position: center center;
	width:100%;
	height: 100%;
}
.detailPanier{
	width: 400px;
	height: 100%;
	line-height: 1em;
	position: relative;
	float: left;
	margin-left: 10px;
}
.prixPanier{
	position: absolute;
	float: left;
	bottom: 0;
}
.prixVolet{
	color: var(--couleur-base2);
	font-size: 1em;
}
.oldPrixVolet{
	color: var(--couleur-base1);
	font-size: 0.8em;
	text-decoration: line-through;
}

input[type="text"].caseQuantite.panier{
    width:60px;
	height: 20px;
	line-height: 20px;
	font-size:0.9em;
}
.ssTotalPanier{
	width:80px;
}
.bSupprPanier{
	width:30px;
	height: 100%;
	border-left: 1px dashed #999999;;
	text-align: center;
	position: relative;
	float: left;
	cursor: pointer;
	transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}
.bSupprPanier a{ color:#999999; text-decoration: none; }
.bSupprPanier p{
	width:100%;
	text-align: center;
	position: absolute;
	float: left;
	top: 50%;
	transform: translateY(-50%);
}
.bSupprPanier:hover{
	background-color: #dddddd;
}
.bSupprPanier:hover a{
	color: #ffffff;
}

.ligneComPanier{
	width:100%;
	height: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	float: left;
	border-bottom: 1px dashed #999999;
}
.ligneComPanier.port{ display: block; height: auto; margin-top: 5px; }
.motCommande:first-letter{ color: var(--couleur-base1); }

.PromoForm{
	width:100%;
	position: relative;
	float: left;
}
.bSupprPromo{
	width:30px;
	text-align: center;
	display: inline-block;
	position: relative;
	cursor: pointer;
	transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}
.bSupprPromo a{ color:#999999; text-decoration: none; }
.bSupprPromo:hover{
	background-color: #dddddd;
}
.bSupprPromo:hover a{
	color: #ffffff;
}

input[type="radio"].casePort{ display: none; }
input[type="radio"].casePort + label{
    width:70px;
	padding: 0px;
	margin: 2px;
	text-align: center;
	border: 1px solid #000000;
	display: block;
	cursor: pointer;
}
input[type="radio"].casePort:checked + label{
    background-color: #dddddd;
}
.nomPort{
	font-size: 0.9em;
	color: #000000;
	border-bottom: 1px dashed #999999;
}
.prixPort{
	font-size: 0.8em;
	color: var(--couleur-base1);
}

.totalPanier{
	width:100%;
	display: flex;
	justify-content: space-between;
	position: relative;
	float: left;
	border-top: 1px solid #000000;
	padding-top: 15px;
	margin: 20px 0;
}

.bValid{
	width: 30px;
	height: 30px;
	background-color: #cccccc;
	color: #000000;
	text-align: center;
	position: relative;
	float: left;
	margin: 5px;
	border-radius:4px;
}
.bValid a{
	line-height: 30px;
	vertical-align: middle;
	font-size: 1.2em;
	font-weight: bold;
	color:#000000;
	text-decoration: none;
}

#TrameAjax{
	width:100%;
	height: 100%;
	background-color: rgba(255,255,255,0.8);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.imgCharge{
	position: absolute;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


/* COMMANDE ------------------------- */

.quantiteCom{
	width:30px;
	position: relative;
	float: left;
	font-size:1em;
}
.detailCom{
	width: calc(100% - 140px);
	height: 100%;
	line-height: 1em;
	position: relative;
	float: left;
	margin: 0 10px;
	border-right: 1px dashed #999999;
}
.ssTotalCom{
	width:80px;
	text-align: right;
}
.ligneCommande{
	width:100%;
	height: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	float: left;
	border-bottom: 1px solid #aaaaaa;
}
.ligneCommande.port{ display: block; height: auto; margin-top: 5px; }
.prixLigne{
	width:80px;
	text-align: right;
	position: relative;
	float: left;
}

.comAdresse{
    width:calc(50% - 20px);
    align-items: stretch;
    border: 1px solid #cccccc;
    position: relative;
    float: left;
    margin: 5px 0;
    padding: 0 0 8px 0;
}
.titreComAdresse{
    width:100%;
	height: 24px;
	line-height: 24px;
    background-color: #dddddd;
	color: var(--couleur-base1);
    text-align: center;
	vertical-align: middle;
    position: relative;
    float:left;
}
.infoComAdr{
    width:100%;
    position: relative;
    float: left;
	padding-bottom: 30px;
}
.changeAdresse{
	color: #000000;
	text-decoration: none;
	position: absolute;
	float: left;
	bottom: 0;
	right: 5px;
}

.finalCommande{
	width: calc(100% - 10px);
	border: 1px solid var(--couleur-base1);
	position: relative;
	float: left;
	margin-top: 20px;
	padding: 5px;
}
.boutFinal{
	width:100%;
	border: 0;
	background-color: var(--couleur-base1);
	font-size: 1.4em;
	color: #ffffff;
	font-family: 'Roboto';
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	padding: 5px;
	cursor: pointer;
}

#BlocP{
	width:100%;
	text-align: center;
	background-color:#dddddd;
	height:50px;
	position:relative;
	float:left;
	bottom:10px;
	left:0;
	z-index:100;
}
#BlocP img{
	max-height: 100%;
}

/* COMPTE --------------------------- */
.caseCompte{
    width:200px;
    height: 200px;
    background-color: #ffffff;
    border:1px solid #000000;
    position: relative;
    float: left;
    margin: 0 10px;
    cursor: pointer;
}
.caseCompte .infoCase{
    width: 100%;
    color: #000000;
    text-align: center;
    position: absolute;
    float: left;
    bottom: 40px;
}
.caseCompte .barre{
    width: 100%;
    height: 0;
    background-color: #dddddd;
    position: absolute;
    float: left;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}
.caseCompte .barre.haut{ top:0; }
.caseCompte .barre.bas{ bottom:0; }
.caseCompte:hover .barre{ height: 30px; }

.caseAdresse{
    width:100%;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #cccccc;
    position: relative;
    float: left;
    margin: 5px 0;
    padding: 8px 0;
}
.choixAdresse{
    width:30px;
    background-color: var(--couleur-base2);
    text-align: center;
    position: relative;
    float:left;
}
.choixAdresse.hs{ background-color: #dddddd; }
.choixAdresse p{
    width:100%;
    text-align: center;
    position: absolute;
    float: left;
    top: 50%;
    transform: translateY(-50%);
}
.infoAdr{
    width:calc(100% - 80px);
    position: relative;
    float: left;
    margin: 0 10px;
}
.favAdr{
    width:30px;
    position: relative;
    float: left;
    right: 0;
}
.favAdr img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.compteLigneCommande{
	width:100%;
	min-height: 30px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 80px 1fr 80px;
	text-align: center;
	column-gap: 5px;
	position: relative;
	float: left;
	border-bottom: 1px solid #dddddd;
	margin-bottom: 5px;
	clear: both;
}
.compteLigneCommande > div{ align-self: center; }
.compteLigneCommande.entete{
	border: 0;
}
.compteLigneCommande.entete > div{
	background-color: #dddddd;
}

.caseCom{
    width:120px;
    position: relative;
    float: left;
    margin: 0 10px;
}
.cercleCom{
    width: 50px;
    height: 50px;
    border:1px solid #778389;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    float: left;
    left: 50%;
    transform: translateX(-50%);
}
.cercleCom img{
    width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 50%;
}
.infoCercleCom{
    width:100%;
    position: relative;
    float: left;
    text-align: center;
    clear: both;
    font-weight: bold;
}
.infoCercleCom.attente{
    font-weight: normal;
    color:#778389;
}


/* CONTACT --------------------------- */
.blocCoord{
    width:21%;
    max-width: 250px;
    margin: 0 1%;
    padding: 1%;
    border: 1px solid #6a6a6a;
    text-align: center;
    position: relative;
    float: left;
}


/* PRESENTATION ---------------------- */
.photoIllus{
	width:400px;
	height: 260px;
	overflow: hidden;
	position: relative;
	float: left;
	margin: 5px;
}
.photoIllus img{
	object-fit: cover;
	object-position: center center;
	width:100%;
	height: 100%;
}

/* FORMULAIRE ------------------------ */
.sepF{
    width:100%;
    height: 20px;
    position: relative;
    float: left;
    clear: both;
}
.infoF{
    width:calc(100% - 10px);
    position: relative;
    float: left;
    margin: 0 5px;
    clear: both;
}
.caseF{
    width:calc(100% - 14px);
    border: 2px dashed var(--couleur-base1);
    padding: 5px;
    position: relative;
    float: left;
    clear: both;
}
.caseF.erreur{
    text-align: center;
    width: inherit;
    margin: 10px 0;
    color: var(--couleur-base1);
    font-size: 0.9em;
}
.baseFormu{
    width:100%;
    max-width: 400px;
    position: relative;
    float: left;
}
.chpF{
	padding: 0 15px;
	height: 30px;
	border-radius: 4px;
	display: inline-block;
	border: 1px solid #666666;
	margin: 5px;
	color: #000000;
	font-family: 'Roboto';
	font-size: 1em; 
	position: relative;
	float: left;
}
.chpF::placeholder{ color:#999999; }
.chpF.t100{ width:calc(100% - 50px); }
.chpF.nom{ width:calc(100% - 140px); }
.chpF.reponse{ width:100px; }
.selF{
	padding: 0 15px;
	height: 30px;
	border-radius: 4px;
	display: inline-block;
	border: 1px solid #666666;
	margin: 5px;
	color: #000000;
	font-family: 'Roboto';
	font-size: 1em; 
	position: relative;
	float: left;
}
.selF.mini{ width:80px; }
.areaF{
    width:calc(100% - 50px);
    height: 90px;
    padding: 0 15px;
	border-radius: 4px;
	display: inline-block;
	border: 1px solid #666666;
	margin: 5px;
	color: #000000;
	font-family: 'Roboto';
	font-size: 1em; 
	position: relative;
	float: left;
}
.areaF::placeholder{ color:#999999; }
.subF{
    width:calc(100% - 40px);
    max-width: 300px;
	height: 30px;
	border-radius: 4px;
    border: 1px solid var(--couleur-base1);
    background-color: var(--couleur-base1);
    color: #ffffff;
	font-family: 'Roboto';
	font-size: 1em; 
	display: inline-block;
	margin: 5px;
    padding: 0 15px;
    cursor: pointer;
	position: relative;
	float: left;
    left: 50%;
    transform: translateX(-50%);
    clear: both;
}

/* ANIMATION ---------------------- */
/* ACCUEIL ----------------------- */
@keyframes popVue{
    from{
		transform:translateX(200%);
	}
	90%{
		transform:translateX(50px);
	}
    100%{
        transform:translateX(0);
    }
}