:root{
   --bg:#ffffff;
   --fg:#121212;
   --muted:#5f6368;
   --line:#e6e6e6;
   --card:#fafafa;
   --accent:#111111;
   --gris01: #444;
	--navH: 80px;
	--bienetre : #ecb5c8;
	--entretien : #a988b5; 
	--hygiene  :#8ccbee;	

   /* Marque */
	--brand:#EFEEE0;     /* contour actif / accents */
	--brandBg:#EFEEE0; /* fond léger (10% d’opacité) */

	--iconBg:#EFEEE0;    /* fond des iconCard + miniatures */

	--radius:18px;
	--shadow:0 10px 30px rgba(0,0,0,.08);
	--max:1720px;
	--gap:24px;
}

input[type="checkbox"]:checked 
{
    background: #ADACAC;

}
            
h1 {
	margin: 0 0 8px;
	font-size: 28px;
	line-height: 1.15;
}

.disponible, .dordogne 
{
	border: 1px solid var(--line);
	border-radius: 11px;
	padding: 8px 10px;
	background: var(--card);
	font-size: 12px;
	color: var(--muted);
	margin-left:10px;
}

.dordogne
{
	font-weight: 600;
	color:#000000;
}

.dordogne
{
	position:absolute;
	right:5px;
	bottom:0px;
}

.disponible.nondispo
{
	color: #b00020;
	border-color: #b00020;
	background: #fff5f5;
	font-weight: 700;
}

input[type="text"]
{
    height:30px;
    border-radius:10px;
    border:1px solid #888888;
    font-family: inherit;
    font-size: inherit;
}


input[type="radio"]:checked { 	background: #adacac; }


.bienetre { color:var(--bienetre)}
.entretien { color: var(--entretien) }
.hygiene { color:var(--hygiene) }


.teaser p
{
    font-size: 0.9em; 
}
.teaser_vignette
{
    text-align: center;
    /*
    grid-template-columns: 1fr 1fr 1fr 1fr;
    display:grid; 
    gap:10px;*/
}

.teaser_vignette img 
{
	max-height: 110px;
	border-radius: 10px;
	max-width: 100%;
}

.unevignette {
	height: 100%;
	background-color: #efeee0;
	border-radius: 10px;
	/* display: flex; */
	/* justify-content: center; */
	/* align-items: center; */
	/* flex-direction: column; */
	display: inline-block;
	margin: 10px;
	max-width: 22%;
	min-width:150px;
}

.unevignette div:nth-child(2) { font-size: 12px; color: #a988b5; font-weight: 600; padding-bottom:6px}

.unevignette div {
	display: block;
	max-width: 100%;
}

#prixSelectionne
{
    margin-top:10px;
    position:relative; 
}

#prixnet
{
    font-size: 1.5em;
    font-weight:600; 
             
}

.article, .utilisation 
{
	min-height: 42px;
	padding: 5px 14px;
	border-radius: 25px;
	border: 1px solid var(--line);
	background: #fff;
	cursor: pointer;
	font-size: 0.9em;
	text-align: center;
	width: auto;
	display: inline-flex; 
    align-items: center;
    justify-content: center; 
    text-align: center;
    user-select:none;
    position:relative;
    margin:8px 6px;
}


.utilisation
{
	margin:10px;
	background-color: #efeee0;
	color:var(--gris01);
	padding: 5px 20px;
	cursor:pointer;
}


.faqquestion {
	border-radius: 25px;
    border: 1px solid var(--line);
	position: relative;
	margin-top: 10px;	
	background-color: #efeee0;
	color:var(--gris01);
	padding: 12px 18px;
	cursor:pointer;
	font-size: 0.9em;
}

.faqreponse {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 50px;
	overflow: hidden;
	font-style: italic;
	height: 0px;
	font-size: 16px;
}

.faqreponse.ouvert
{
	height:auto;
}

.livraison
{
	font-size: 16px;
	color:var(--gris01);

	strong
	{
		font-weight:600;
	}	
}

.livraison ul li span
{
	font-weight: 600;
}

.livraison div:nth-child(1).bienetre { color: val(--bienetre);font-weight: 600;}
.livraison div:nth-child(1).entretien {color: val(--entretien);font-weight: 600;}
.livraison div:nth-child(1).hygiene { color: val(--hygiene);font-weight: 600;}
	


.article.rupture
{
	background: #CCCCCC  !important;
	color : #FFF !important;
}
.texterupture {
	position: absolute;
	background-color: #FF0000;
	top: 3px;
	right: 0px;
	width: 10px;
	height: 10px;
	border-radius: 7.5px;
}

.article.selected
{
	background: #EFEEE0;
	color: #121212;
	border-color: transparent;
	outline: 2px solid var(--brand);
}

.options
{
    display:grid;
    max-height:0;
    overflow:hidden;
    /*transition: max-height 0.2s ease;*/
    font-family: arial;
  font-size: 16px;
  color: rgb(68, 68, 68);
    border-radius:15px;
    border:none;
    padding: 0px;
} 

.option .titreoption
{
	font-weight: 600;
}

#choixoptions,
#choixoptionpratique,
#choixoptionsCat3
{
	font-family: Arial;
	font-size: 13px;
	color: rgb(68, 68, 68);	
	margin-top:10px;
}

#choixoptions
{
	margin-bottom:6px;
}

#choixoptionsCat3
{
	margin-top:20px;
}

#choixoptionpratique
{
	margin-bottom:10px;
}

.options.selected
{
    max-height:800px;
    border:1px solid #ccc;
    padding: 10px;
	line-height: 1.5;
    
} 


#ttc
{
 	font-size: 12px;
	color: var(--muted);
}

.ventearticle {
	display: inline-block;
	vertical-align: top;
	margin: 1vw;
	border: 1px solid #AAAAAA;
	padding: 5px;
	border-radius: 10px;
}

.conteneurQuantite
{
    display:flex;
    justify-content: center;
}

 .quantite 
 {
    margin-top:25px;
    margin-bottom:10px;
    color:#888888;
    
    #totalArticle, #monTotal
    {
    	display:inline-block;
    	vertical-align: middle;
    }
    
    
    #majquantite 
    {
    	border: 1px solid #AAAAAA;
    	border-radius: 10px;
    	height: 35px;
    	width: 105px;
    	font-size: 0.9em;
    	display:inline-block;
    	vertical-align: middle;
    	margin-left:10px;
    	margin-right:20px;
    	button
        {
            background-color: transparent;
            height:100%;
            width:25%;
            border:none;
           
        }
        
        #nombreretenu
        {
            display: inline-block;
            height:100%;
            width:40%;
            vertical-align: middle;
            text-align: center;  
            padding-top:5px;
            color:#000000;
            font-weight: 600;                      
        }
    }
    
    
 }

.fineprint 
{
	font-size: 12px;
	color: var(--muted);
	line-height: 1.45;
}

.titreArticle
{
    text-align: center;
    margin-top:5px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] 
{
    -moz-appearance:textfield; /* Firefox */
          text-align: center;
          border:none;
      }
                  
   .optionArticle
   {
      margin-right:20px; 
      padding:15px; 
      display:inline-block; 
      color:rgb(68,68,68);
   }
   
   .imagearticle
   {
      display: inline-block; 
      vertical-align:top; 
      max-width:200px; 
      color:#a994c5; 
      font-weight:600;
      }
      
#emplacementTeaserTexte
{
	padding-top: 16px;
	padding-bottom: 16px;
}
      
.grid    		
{
  display:grid;
  grid-template-columns: minmax(400px,1fr) 1fr;
  gap:1.5%;
}

.jauge
{
	width:180px;
	height:10px;
	border:none;
	border-radius:5px;
	background-color : #f3f3f3;
	display:inline-block; 
	vertical-align: middle;
	margin-left:10px;
	overflow:hidden;
}

.jaugefill { height:100%; }

.jaugefill.bienetre { background-color:var(--bienetre); }
.jaugefill.entretien { background-color:var(--entretien); }
.jaugefill.hygiene { background-color:var(--hygiene); }


#gallerie,#description 
{
  background-color: #FFFFFF;
  padding:15px;
  border-radius:10px;
}

.description, .modeemploi
{
  font-size: 0.9em;
}

#gallerie
{
  display:grid;
  grid-template-columns : 100px 1fr;
  grid-template-rows:100%;
  gap:10px;
}

#gallerie #miniatures
      {
          height:100%;
          overflow:auto;
      }
      
      .thumb 
      {
      	appearance: none;
      	-webkit-appearance: none;
      	padding: 0;
      	line-height: 0;
      	border: 1px solid var(--line);
      	border-radius: 14px;
      	overflow: hidden;
      	background: var(--iconBg);
      	cursor: pointer;
      	display: block;
      	width: 72px;
      	height: 72px;
      	margin-bottom:4px;
      }
      
      .thumb img 
      {
      	width: 100%;
      	height: 100%;
      	max-width: none;
      	object-fit: cover;
      	object-position: center;
      	display: block;
      }
      
      #gallerie #image
      {
          height:100%;
          width:100%;
         /* align-content: center;*/
}

#gallerie #image #heroImg
{
    max-width: 100%;
    border-radius:10px;
}

#gallerie #image
{
	position:relative;
}

#gallerie #image #loupe
{
	position:absolute;
	right:5px;
	top:5px;	
	display:flex;
	align-items:center;
	justify-content: center;
	width:40px;
	height:40px;
	background-color: rgba(255,255,255,0.7);
	border-radius:30px;
	cursor:pointer;
}


.teaser
{
    margin-top:10px;
}

.teaser p
{
    margin: 0px;
    color:#000000;

}

.cta 
{
	width: 100%;
	height: 48px;
	border-radius: 25px;
	border: 0;
	color: #fff;
	font-weight: 800;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 0.9em;
    font-weight: normal;
    user-select:none;
}

.cta.bienetre { background-color:var(--bienetre); }
.cta.entretien { background-color : var(--entretien); }
.cta.hygiene { background-color:var(--hygiene); }



.zonecalendrierlocation            
{
	display: inline-block; 
	vertical-align:middle; 
	margin-left:30px; 
	margin-top:10px; 
	margin-bottom:10px;
}            
            
.zonecalendrierlocation button {
	padding: 8px;
	background-color: #a994c5;
	color: #FFFFFF;	
	border: none;
	border-radius:10px;
	box-shadow: 3px 3px 6px #888888;
	transition: 500ms;
}    

#laPeriodeDeLocation
{
	padding-left:30px;	
}

.zonecalendrierlocation button:hover
{
	transform:scale(1.1);
}   




.imageminiature
{
	height:40px;
	margin-right:10px;
}

#alleraupanier
{
	display:flex;
	align-items:center;
	justify-content: center;
	flex-direction:column;
	height:100%;
	
	.bouton {
		background-color: #FFFFFF;
		padding: 8px;
		font-size: 1.1em;
		border: none;
		border-radius: 15px;
		margin:10px;
		font-size: 17px;
		width:190px;
		cursor:pointer;
	}
}           

.content
{
	.tabs {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 25px;
	margin-bottom: 15px;
	}
	
	.tabBtn.selected {
	outline: 2px solid var(--brand);
	border-color: transparent;
	background: var(--card);
	color: var(--fg);
	font-weight: 600;
	}
	
	.tabBtn.selected.bienetre { background-color: var(--bienetre); color:#FFFFFF }
	.tabBtn.selected.entretien { background-color:var(--entretien); color:#FFFFFF }
	.tabBtn.selected.hygiene { background-color:var(--hygiene); color:#FFFFFF }
	
	
	 .tabBtn {
		height: 35px;
		padding: 0 20px;
		border-radius: 14px;
		border: 1px solid var(--line);
		background: #fff;
		cursor: pointer;
		color: var(--muted);
	}
		

}

.page, .produitsannexes {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding:15px;
	display:none;
}

.produitsannexes
{
	display:block;
	margin-top:15px;
	
	.titreadorer
	{
		font-weight:600;
	}
	
	
.titreadorer.bienetre { color:var(--bienetre);}
.titreadorer.entretien { color:var(--entretien);}
.titreadorer.hygiene { color:var(--hygiene);}

	.annexe {
	width: 19vw;
	margin:1vw;
	min-width:250px;
	display: inline-block;
	vertical-align:top;
	padding: 10px;
    border: 1px solid #DDD;
    border-radius: 15px;
    cursor:pointer;
	
		.zoneimage
		{
			width:100%;
			text-align: center;
			
			img
			{
				max-width:100%;
				border-radius:15px;
			}
		} 
		
		.zonetitre
		{
			font-size: 1em;
			font-weight: 600;
			color:var(--gris01);
			padding-top:5px;
		}
		
		.zonetitre.bienetre { color: var(--bienetre);}
		.zonetitre.entretien { color: var(--entretien);}
		.zonetitre.hygiene { color: var(--hygiene);}
	
		
		
		.zonesoustitre
		{
			font-size: 0.8em;			
			color:var(--gris01);
			padding-top:10px;
			text-align: center;
		}
	}
	
	

}


.statAvis
{
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding:15px;		
	margin-bottom:15px;
	padding-top:20px;
	padding-bottom:22px;
}

.avisclient
{
	font-style: italic;
	padding-left: 3vw;
}

.avisclient img
{
	max-width: 100%;
}

.reponseAvis
{
	padding-left:10vw;
}

.reponseAvis div:nth-child(1) img
{
	height:50px;
	margin-right:30px;
}
.statAvis img
{
	border-radius:10px;
}

.avisRecommande
{
	text-align:center; 
	padding-top:8px; 
	padding-bottom:8px; 
	font-size:14px; 	
}

.publiele
{
	font-size: 0.8em;
}
.publiele
{
	font-style:italic;
	display:inline-block;
	vertical-align: middle;
	padding-left:20px;	
}

.avisRecommandeVert.bienetre {color:var(--bienetre);}
.avisRecommandeVert.entretien {color:var(--entretien);}
.avisRecommandeVert.hygiene {color:var(--hygiene);}


.avis
{
	background: none;
	border: none;
	border-radius: 0px;
	box-shadow: none;
	padding:0px;
	
}

.statsAvis
{
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding:15px;
}

.avisnom,
.achatverifie,
.noteUser,
.noteUtilisateur
{
	display:inline-block;
	vertical-align: middle;
}


#btajouteraupanier.indisponible
{
	filter: opacity(0.6);
	cursor: default;
	 
}

.avisnom
{
	padding-left:1vw;
}

.achatverifie
{
	 
	padding-left: 10px;
	font-size: 0.9em;
}

.achatverifie.bienetre { color: var(--bienetre)}
.achatverifie.entretien { color: var(--entretien)}
.achatverifie.bienetre { color: var(--bienetre)}



.noteUser span
{
	font-size: 1.1em;
	padding-left:20px;
}

.noteUtilisateur
{
	padding-left:10px;
}



p,li
{
	font-size: 16px;
	line-height:1.5em;
	color:var(--gris01);
}

.page.selected 
{ 
	display:block;
}

.statsAvis
{
	margin-top:10px;
}
.statsEtoiles,
.statsRepartition,
.statsAjouter
{
	display: inline-block;
	vertical-align: middle;
}

#resultatAvis
{
	color:#666;
	font-size : 1.1em;
}
.statsEtoiles
{
	width:200px;
	text-align: center;		
}

.statsEtoiles span.surAvis
{
	font-weight: normal;
	color:var(--muted);
}

.statsAvis .blocsStatsAvis 
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7vw;
}
    	
.statsRepartition #jauges
{
	display: inline-block;
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
	padding-left:30px;
	padding-right:30px;
}  
.etoiles
{
	color:#666;
	font-size: 1.1em;
}

#reflete
{
	font-size: 0.7em;
	margin-top:17px;
	color: var(--muted);
}

#jauges span.nombre
{
	font-size: 0.7em;
	padding-left:20px;
}  	

#avismoyenne
{
	font-size: 0.8em;
	font-weight: 600;
	padding:10px;
	color:#666;
}

.coche {
	display: inline-block;
	vertical-align: middle;
	color: #FFFFFF;
	width: 22px;
	height: 22px;
	text-align: center;
	border-radius: 50%;
}

.coche.bienetre { 	background-color: var(--bienetre); }
.coche.entretien { 	background-color: var(--entretien); }
.coche.hygiene { 	background-color: var(--hygiene); }

.ecrireavis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	
	color: #fff;
	
	text-decoration: none;
	font-weight: 600;
}

.ecrireavis.bienetre {	background-color: var(--bienetre); border: 1px solid var(--bienetre);}
.ecrireavis.entretien {	background-color: var(--entretien); border: 1px solid var(--entretien);}
.ecrireavis.hygiene {	background-color: var(--hygiene); border: 1px solid var(--hygiene);}


.statEtoilesAnnexe
{
	text-align: center;
	color:var(--gris01);
}

@media (max-width: 1000px)
{

    .grid
    {
        display:block;
    }
    
    #gallerie,#description
    {
        margin-bottom:20px;
    }

}
 
 
@media (max-width: 880px)
{
	#description
	{
		height:auto;
	}
	
	.statsAvis .blocsStatsAvis
	{
		flex-direction: column;
	}
	
	.teaser_vignette {
	display: block;
	text-align: center;
	}
	
	
	.unevignette {
	height: 100%;
	background-color: #efeee0;
	border-radius: 10px;
	display: inline-block;
	margin: 10px;
	text-align: center;
}
	
	.unevignette img
	{
		height:75%
	}
}	

@media (max-width: 600px)
{
	.produitsannexes 
	{
	text-align: center;
	}
}

@media (max-width: 300px)
{
	.teaser_vignette
	{
		grid-template-columns: 1fr;
	}
}