.hide {
display: none;
}
body,html{
padding: 0;
margin: 0;
height: 100%;
width : 100%;
}
html{
background-color: white;
}
body
{
/* background-color: #FDFDFD; */
/* background-color: #f3efef; */
background-color: #f9f6f6;
color: black;
font-family: var(--fontshopPrincipal);
font-weight: 400;
font-size: 13px;
height: auto;
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.formulaireRechercheProduit{
display: flex;
}
.formulaireRechercheProduit button{
margin-bottom: .75em;
}
.formulaireRechercheProduit fieldset{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
}
@media screen and (max-width: 600px) {
/*
.entetePage{
display: none;
} */
.formulaireRechercheProduit fieldset{
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
max-width: 100%;
}
}
.pure-g {
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
width:90%;
}
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
/* Set your content font stack here: */
font-family: 'Open Sans', sans-serif;
}
.case{
position: relative;
height:350px;
width:250px;
border-style: solid;
border-color: rgb(200,200,200);
border-width: 1px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;
margin-left: 20px;
padding-top:10px;
font-size: 20px;
text-align:center;
color: #dddddd;
}
.marquesProduit{
font-style: italic;
font-size: 12px;
margin-bottom: 5px;
}
.marquesProduit a{
color: black;
}
.caseProduit{
position: relative;
width:80%;
border-style: solid;
border-color: rgb(200,200,200);
border-width: 1px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;
margin-left: 20px;
padding-top:10px;
font-size: 20px;
text-align:center;
color: #dddddd;
}
.detailProduit{
position: relative;
width:80%;
min-height:300px;
border-style: solid;
border-color: rgb(200,200,200);
border-width: 1px;
margin-top: 20px;
margin-bottom: 20px;
padding-right: 30px;
padding-left: 30px;
padding-top:20px;
padding-bottom:20px;
font-size: 16px;
text-align:left;
}
.printProduit{
position: relative;
width:380px;
min-height:600px;
border-style: solid;
border-color: rgb(200,200,200);
border-width: 1px;
margin-top: 20px;
margin-bottom: 20px;
padding-right: 30px;
padding-left: 30px;
padding-top:20px;
padding-bottom:20px;
font-size: 16px;
text-align:left;
}
.prodLeft{
max-width:400px;
}
.detailPanier{
position: relative;
width:80%;
min-height:300px;
border-style: solid;
border-color: rgb(200,200,200);
border-width: 1px;
margin-top: 20px;
margin-bottom: 20px;
padding-right: 20px;
padding-left: 20px;
padding-top:10px;
font-size: 16px;
text-align:left;
}
.containerNotePaiementSurPlace{
display: flex;
flex-direction: column;
}
.notePaiementSurPlace{
display: block;
font-size: 10px;
font-weight: 700;
}
@media (max-width: 750px) {
.categories{
width: 100%!important;
}
.detailPanier{
width: 100%!important;
padding: 2px!important;
}
}
.panierTitle{
font-size: 1.4em;
font-family: 'Roboto Slab', serif;
color: #555555;
margin-bottom: 20px;
}
.panierItem{
font-size: 1em;
font-family: 'Roboto Slab', serif;
color: #555555;
margin-bottom: 20px;
}
.Commercant
{
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
color: #555555;
margin-bottom: 20px;
}
.nomProduit{
font-size: 1.8em;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
margin-bottom: 20px;
}
.descrProduit{
font-size: 1.6em;
font-family: 'Open Sans', sans-serif;
margin-bottom: 20px;
}
.prixProduit{
font-size: 1.8em;
font-family: 'Roboto Slab', serif;
color: #555555;
margin-bottom: 20px;
font-weight: bold;
}
.logo{
margin-bottom: 10px;
}
.confirmation{
width:80%!important;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px;
padding-top:10px;
background-color:#b8d443;
}
.lienCase{
text-decoration: none;
color: #999999;
}
.lienCase:hover{
text-decoration: underline overline;
color: #222222;
}
.lienIcon{
text-decoration: none;
color: #999999;
}
.lienIcon:hover{
text-decoration: none;
color: #444444;
}
.lienTel{
text-decoration: none;
color: #999999;
}
.lienTel:hover{
text-decoration: none;
font-weight: bold;
color: #555555;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.illustration
{
height: auto;
opacity: 1;
}
@media (max-width: 750px) {
.illustration{
width: 100%;
display: flex;
flex-direction: column;
align-items: center
}
}
.illustration:hover {
opacity: 0.7;
max-width: 100%;
}
.illustration:hover .middle {
opacity: 1;
}
.fullLink{
display:block;
position: absolute; border: 0px solid green; height: 100%; width: 100%
}
.illustrationBG
{
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
margin-bottom: 10px;
background-color: #ffffff;
opacity: 1;
}
.illustrationBG:hover {
opacity: 0.7;
max-width: 100%;
}
.illustrationBG:hover .middle {
opacity: 1;
}
.nomCateg
{
position: absolute;
width:100%;
height:60px;
bottom: 0px;
text-align:center;
font-size: 15px;
color:#000;
background-color: white;
padding-bottom:10px;
padding-top:10px;
}
.prix
{
/* text-align:center; */
/* font-size: 15px; */
/* color:#555555; */
position: absolute;
width: 100%;
top: 0px;
text-align: center;
font-size: 15px;
color: #000;
background-color: white;
padding-bottom: 5px;
padding-top: 5px;
}
.banner{
/* margin-top: 100px; */
margin-bottom: 20px;
font-size: 13px;
line-height: 20px;
color: #9d9d9d;
font-family: 'Lato', sans-serif;
padding: 15px;
}
.bannerTitle{
font-size: 16px;
color: #999999;
font-family: 'Lato', sans-serif;
min-width:300px;
}
.bannerSearch{
margin-top: 20px;
font-size: 13px;
line-height: 20px;
color: #9d9d9d;
font-family: 'Roboto Slab', sans-serif;
}
.footer{
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px;
padding-top:10px;
margin-bottom: 10px;
font-size: 13px;
line-height: 20px;
color: #FFFFFF;
text-align:left;
background-color: #222222;
font-family: 'Lato', sans-serif;
}
.basProduit{
position: absolute;
width:250px;
bottom: 0px;
}
.basLogo
{
position: absolute;
right: 20px;
top: 20px;
}
form
{
margin: 0;
}
h3
{
color: navy;
font-size: 15px;
font-weight: bold;
margin: 1em 0;
padding: 0;
}
img
{
border: none;
}
.pure-table td
{
font-size: 12px;
color: #000000;
font-family: 'Lato', sans-serif;
}
.pure-table th
{
font-size: 13px;
font-weight: bold;
color: #000000;
font-family: 'Lato', sans-serif;
}
table.cadre
{
border: 1px solid rgb(5,5,5);
border-collapse: collapse;
}
table.cadre tr
{
margin: 0;
padding: 0;
}
table.cadre td
{
background-color: rgb(250,250,250);
border: 1px solid rgb(5,5,5);
margin: 0;
padding: 0.5em;
}
table.cadre th
{
background-color: rgb(216,216,216);
background-image: url("img/FondTitre.gif");
background-position: center center;
background-repeat: repeat-x;
border: 1px solid rgb(5,5,5);
font-weight: bold;
margin: 0;
padding: 0.4em;
text-align: center;
}
table.cadre th.sup
{
background-color: rgb(135,135,135);
background-image: none;
color: white;
}
table.cadre tr.totaux td
{
background-color: rgb(25,25,25);
border: none;
color: rgb(245,245,245);
font-size: 12px;
margin: 0;
padding: 0.2em;
}
table.recherche
{
background-image: url("img/rechercher.gif");
background-position: center center;
background-repeat: repeat-y;
border: 1px solid rgb(204,204,204);
font-size: 11px;
}
table.recherche td
{
text-align: left;
}
table.recherche th
{
text-align: center;
}
table.cadre td.PasEnVente, table.cadre td.Efface
{
background-color: rgb(255,204,204);
}
.formvisu
{
font-size: 11px;
color:black;
border: 1px solid black;
}
.formvisuplus
{
font-size: 13px;
color:black;
border: 1px solid black;
}
.formvisugrise
{
background-color: rgb(240,240,240);
font-size: 11px;
color:black;
border: 1px solid black;
}
.NumClient
{
font-size: 10px;
}
table.cadre td.grise
{
background-color : rgb(235,235,235);
}
table.cadre td.finalise
{
background-color : rgb(220,220,220);
}
#NbreLignes
{
font-size: 10px;
font-style: italic;
padding: 0.5em;
}
/* D but du menu */
#navmenu
{
background-color: rgb(0,0,0);
border-bottom: rgb(212,212,212) solid 1px;
color: white;
font-size: 13px;
font-weight: bold;
height: 25px;
margin: 0 auto;
padding: 0;
width: 605px;
}
#navmenu a:link, #navmenu a:visited, #navmenu a:hover
{
border: 0;
color: rgb(255,255,255);
display: inline;
font-size: 12px;
font-weight: bold;
line-height: 25px;
margin: 0;
padding: 7px 4px 6px 4px;
text-decoration: none;
}
#navmenu a:hover
{
color: rgb(152,204,255);
text-decoration: underline;
}
#navmenu li
{
background-image: url("img/FondMenu.gif");
background-repeat: repeat-x;
background-position: center left;
border-right: rgb(127,127,127) solid 1px;
float: left;
height: 20px;
list-style: none;
margin: 0;
padding: 5px 0 0 0;
text-align: center;
width: 150px;
}
#navmenu ul
{
border: rgb(127,127,127) solid 1px;
display: none;
margin: 0 0 0 0;
padding: 0;
position: absolute;
width: 170px;
z-index: 999;
}
#navmenu ul li
{
background: rgb(75,75,75);
background-image: none;
/* border-left: rgb(172,220,247) solid 3px;*/
border-right: none;
float: none;
height: 24px;
padding: 1px 0 0 0;
width: 170px;
z-index: 1000;
}
#navmenu li.separation
{
border-top: rgb(127,127,127) solid 1px;
}
/* Fin du menu */
/* Infobulle */
a.info
{
position:relative; /*this is the key*/
z-index:24;
/*background-color:#ccc;*/
color: black;
text-decoration:none;
}
a.info:hover
{
z-index:25;
background-color:#fafafa;
}
a.info span
{
display: none;
}
a.info:hover span
{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em;
left:1em;
width:15em;
border:1px solid #999999;
background-color:#DDDDDD;
color:#000;
text-align: left;
}
a.infoPA
{
position:relative; /*this is the key*/
z-index:24;
/*background-color:#ccc;*/
color: black;
text-decoration:none;
}
a.infoPA:hover
{
z-index:25;
background-color:#fafafa;
}
a.infoPA span
{
display: none;
}
a.infoPA:hover span
{ /*the span will display just on :hover state*/
display: block;
position: absolute;
top: 2em;
left: 1em;
width: 8em;
border: 1px solid #999999;
background-color: #DDDDDD;
color: #000;
text-align: center;
}
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
/**********************************/
/**Debut page validationPaiement **/
/**********************************/
.mainValidationPaiement{
border: solid black 1px;
background-color: rgb(205, 241, 169);
width:80%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
padding: 2rem;
}
.validationPanierCommande{
border: solid rgb(189, 176, 176) 1px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.mainValidationPaiement .panierTitle{
font-size: 2rem;
text-align: center;
}
.textValidationCommande{
text-align: center;
font-size: large;
}
@media (max-width: 750px) {
.mainValidationPaiement{
width: 95%;
padding: 0;
}
.validationPanierCommande{
width: 100%;
margin: 0;
}
.pure-table{
width: 98%;
}
.chemin{
width: 95%;
}
.pure-g {
width: 95%;
margin-left: auto;
margin-right: auto;
}
}
/**********************************/
/**Fin page validationPaiement **/
/**********************************/
/**********************************/
/***Début de la page coordonées **/
/*********************************/
.containerButtonProfil{
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.buttonOngletProfil{
padding: 1rem;
}
.selectDureeCommande{
display: block;
margin-left: auto;
margin-right: auto;
font-size: 16px;
}
.tableFactureClient td{
margin-top: 15px;
font-size: large;
}
/*********************************/
/**Fin de la page coordonées******/
/********************************/
/********************************/
/** Début de la page commandes**/
/*******************************/
.containerHistoriqueCommandes{
border: solid rgb(200,200,200) 1px;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 3rem;
padding: 1rem;
}
.containerHistoriqueCommandes h2{
font-size: 1.6em;
font-family: 'Open Sans', sans-serif;
color : #555555;
}
.ligneCommande{
border: solid rgb(202, 200, 200) 1px;
font-size: medium;
margin-bottom: 15px;
margin-top: 15px;
padding: 3px;
}
.ligneCommande:hover{
cursor: pointer;
}
/*******************************/
/**Fin de la page commandes****/
/*****************************/
/*******************************/
/**Debut du menu **************/
/*****************************/
.logoMenu{
width:65px;
}
.topnav {
/* overflow: hidden; */
background-color: #f9f9f9;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
max-width: 1280px;
z-index:999;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 15px 15px;
text-decoration: none;
font-size: 15px;
}
.rightMenu{
float:right!important;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 15px;
border: none;
outline: none;
color: black;
padding: 15px 15px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* .active {
background-color: rgb(0, 153, 204)!important;
color : #9d9d9d;
} */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
/* max-height: 650px; */
}
.dropdown-content div{
display: none;
}
.dropdown-content a {
float: none;
color: black;
padding: 8px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* .topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgb(0, 153, 204);
color: white;
} */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.informationMobileMenu{
display: none;
}
@media screen and (max-width: 600px) {
.logoMenu{
width: 25px;
}
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.rightMenu{
float: none!important;
}
/* .topnav.responsive {position: relative;} */
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
.informationMobileMenu{
display: inline-block;
margin-top:0;
margin-bottom: 0;
font-size:12px;
}
.informationMobileMenu a,.informationMobileMenu span{
display: inline-block!important;
}
.containerLogoMenu{
display: flex!important;
gap : 5px;
justify-content: center;
align-items: center;
font-size: 11px;
font-weight: 800;
}
}
/*******************************/
/**Fin du menu **************/
/*****************************/
.textDescr{
font-size: 1.1em;
text-align: center;
}
.nomGroupe{
text-align: center;
}
.categories {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.titreListePage{
text-align: center;
font-size: 24px;
}
.formulaireListe{
display: flex;
flex-direction: column;
width: 300px;
gap: 10px;
margin-left: auto;
margin-right: auto;
}
.formulaireListe label{
font-weight: 600;
font-size: 16px;
}
.formulaireListe button{
border: none;
width: 100px;
padding: 10px;
margin-left: auto;
margin-right: auto;
}
/*******************************/
/**Debut du footer**************/
/*****************************/
.footerPage{
/* position: absolute; */
border-top: solid rgb(121, 117, 117) 1px;
width: 60%;
letter-spacing: normal;
/* left: 0; */
/* right: 0; */
margin-left: auto;
margin-right: auto;
margin-top: 75px;
margin-bottom: 0;
bottom: 0;
font-size: 15px;
color: #999999;
display: flex;
justify-content: space-between;
}
.footerPage ul{
list-style: none;
}
.footerPage ul li{
padding : 5px;
}
.footerPage a{
color: #999999;
}
.socialMediaIconFooter{
color: black!important;
font-size: 20px;
}
@media screen and (max-width: 600px) {
.footerPage{
flex-direction: column;
}
}
/*******************************/
/**Fin du footer **************/
/*****************************/
/*******************************/
/**Debut de la page apropos **************/
/*****************************/
.Apropos{
border:solid black 1px;
padding: 1rem;
width: 80%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-around;
color: #9d9d9d;
}
.Apropos a{
font-size: 20px;
margin-left: 5px;
color: black;
}
.Apropos iframe{
width: 600px;
max-width: 100%;
}
.Apropos ul{
list-style: none;
}
.Apropos li{
padding: 10px;
}
@media screen and (max-width: 600px) {
.Apropos {
flex-direction: column;
}
.Apropos iframe{
margin-top: 20px;
}
}
/*******************************/
/**Fin de la page apropos **************/
/*****************************/
/*******************************/
/**Debut show product **************/
/*****************************/
.sousImage{
display: flex;
}
/*******************************/
/**Fin show product **************/
/*****************************/
/*******************************/
/**Debut lightbox **************/
/*****************************/
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 80%;
max-width: 1200px;
height: 80%;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
height: 100%;
}
.mySlides img{
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
background-color: rgba(0, 0, 0, 0.8);
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Caption text */
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
img.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*******************************/
/**Fin lightbox **************/
/*****************************/
.errorMessage{
color: red;
text-align: center;
font-size: 24px;
}
.messageMail{
text-align: center;
font-size: 24px;
}
.selectMarquesMenu{
text-align: center;
height: auto!important;
width: 180px;
border-radius: 2em!important;
}
.titreResultatRechercheMarque{
text-align: center;
font-size: 1.20rem;
letter-spacing: normal;
margin-left: auto;
margin-right: auto;
}
.buttonRechercheFormulaire{
background-color: transparent;
border: none;
font-size: 18px;
}
.topMargin{
margin-top: 6vh;
}
.prix-original{
text-decoration: line-through;
color: #ff0000;
}
.prixReduit{
font-weight: 900;
font-size: 18px;
text-decoration: none!important;
color: black;
margin-top: 5px;
margin-bottom: 5px;
}
.prix-originalProduit{
text-decoration: line-through;
color: #ff0000;
/* font-size: 1.8em; */
font-size: 0.7em;
}