@charset "utf-8";
/* CSS Document */

:root {
/* Couleurs */
--grisClair: #eee;
--grisMoyen: #ccc;
--grisFonce: #444;

--vert-signature: #89ab33;
--vert-signatureFonce: #5f7723;
--vert-sauge-doux: #A3B18A;

--champagne-doux: #F2E8D5;
--dore-profond: #A67C00;

--noir-bleute: #002d2f;

--complementaire : #d04025;


--bgColorBody	: radial-gradient(circle at center top, #fff 10%, #f6edd9 100%);
--bgdegGal 		: linear-gradient(0deg, #eee8dc 0%, #fffffb 50%, white 80%, #f2ede1 100%);

--bgHeader		:radial-gradient(ellipse at 50% -50%, #9CC42E 10%,#5C7B0F 100%);
--bgDegFooter 	: radial-gradient(circle, #89AB33 10%,#79972E 100%);

--bgFooter		: #21393b;
--titreFooter	: #e0b16b;

--bgColorTableTH	: #3e4c1b;

--bgColorCuvee	:radial-gradient(circle at center top, #fff 10%, #f6edd9 100%);

--bgClair			:#dae0ca;
--textBgClair		:#000b;

--bgFonce			:#7f8c5e;
--textBgFonce		:#fffc;

--bgBouton			: #005256;
--textbgBouton		: #fff;
--bgBoutonHover			: #fff;
--textbgBoutonHover		: #005256;

/* liens index */
--BtnIndexBG			: #000a;
--BtnIndexCOLOR			: #fff;
--BtnIndexBGhover		:radial-gradient(circle, #89AB33 40%,#6F8B29 100%);
--BtnIndexCOLORhover	: #f6edd9;



--textColorGal	: #555;

--colorTitresGal	: #4e621d;
--colorTitresH1		:#4e621d;
--colorTitresAutres	: #88b022;

--colorlien			: #5f7723;
--colorlienHover	: #89ab33;


--colorOR : #ca932a;


/* barnav */
--BgBnav : #5f7723;
--barnavBgColor			: #21393b;
--barnavBgColorLiens	: #002d2f;

--barnavFocusBg		: #0005;
--barnavFocusColor	: #f0dfc5;
--barnavFocusBorder	: #e0b16b;


/* ligne client */
--BgLigneClient : #000;
--ColorLigneClient : #eeeb;
--ColorLigneClientHover : #fff;



/* Espacements et arrondis */
--radius: 6px;
--spacing: 1rem;
--container-width: 1200px;
/* Transitions */
--transition-fast: 0.2s ease-in-out;

  /* Typographie */
--policeTitresGal	: 'DM Serif Text', 'Times New Roman', Times, serif;
--policeTexteGal	: 'DM sans', Arial, Helvetica, sans-serif;
--policeArial		: Arial, Helvetica, sans-serif;

--policeSerif		: 'DM Serif Text', 'Times New Roman', Times, serif;
--policeSans		: 'DM sans', Arial, Helvetica, sans-serif;
--policeTech		: Arial, Helvetica, sans-serif;

}




/* HTML */
body {
	background-color	: var(--bgColorBody);
	background			: var(--bgdegGal);
	color				: var(--textColorGal) !important;
	font-family			: var(--policeTexteGal) !important;
}

/* ---------- RAZ opacity ------- */

#BlocligneClient
, #contenu
, #navig
, #entete 
{ 
	opacity:0;
}

.fondHachuresNoir { 
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ----------- Ligne Client -------------- */

.ligneClient {
	background-color: var(--BgLigneClient); !important;
	color: var(--ColorLigneClient)  !important;
	font-family:var(--policeTech);
}

.ligneClient  a 		{ color:var(--ColorLigneClient)  !important; }
.ligneClient  a:hover 	{  color:var(--ColorLigneClientHover) !important; }


/* ----------------- BARNAV -------------------*/
#navig {
	background-color:var(--barnavBgColor);
	font-family: var(--policeSans) !important;
	letter-spacing: 0.5px !important; 
	font-variant-caps: small-caps;
	border-top: 1px solid #fff7;
	border-bottom: 1px solid #fff7; 
	box-shadow:0px 0px 100px #fff8;
}

#nav.nav li a {
  font-size: 1.5vw;
  padding : 1.5vw 1vw 1.5vw 1vw;
  color: white;
}

.nav > li > a:hover {
	background-color: var(--barnavBgColorLiens);
}


.nav li li a {
  background: var(--barnavBgColorLiens);
  border-top: 1px solid #fff4;
  color: #eee !important;
  line-height: 140%;
}


.barNavFocus {
  background	: var(--barnavFocusBg);
  border-bottom	: 4px solid var(--barnavFocusBorder);
  color			: var(--barnavFocusColor);
}


/* Btn commander */


a.btnAction {
	border: 1px solid #fff5;
	margin: auto;
	text-align: center;

	background-color:var(--barnavBgColorLiens);
	display: inline-block;
	padding: 12px 20px;
	transform: scale(1);
	color: rgba(255,255,255, 0.7);
}

a.btnAction:hover {
	background-color:#c7ac65;
	color:#fff;
	border:1px solid #fff;
	transform:scale(1.025);
	transition:all 0.2s ease 0s;
	}





/* -------- TEMPATE ----------------*/

#header {
	background: var(--bgHeader);
	color: #f9f9f9 !important;
	padding-top: 40px;
	padding-bottom: 15px;
}

div#entete{
	/* background-image: url(/arabesqueHeader.svg), url(/arabesqueHeader.svg); */
	background-position: -45% 66%, 147% 102%;
	background-repeat: no-repeat, no-repeat;
	background-size: 54%;
	padding: 2vh !important;
}

	.lienentete {margin:0px;letter-spacing: 0.5px;}

	.lienentete a {
		border-radius: 6px;
		display: block;
		margin: 8px 0;
		padding: 8px 20px;
	}

	.lienentete a {color:#fff; background-color:#fff3; }
	.lienentete a:hover{ background-color:#0005;color: #fff;}

	.bloc-horaires {	
	  color: #fff;
	  text-align: left;
	}
	
	.bloc-horaires p {	
	  margin: 0;
	}


/* ------ entete ------ */
div#entete{

}



	




#content {
    padding-top: 5vh  !important;
    padding-bottom: 6vh  !important;
/*	background: linear-gradient(0deg, rgb(230, 230, 230) 0%, rgb(255, 255, 251) 50%, rgb(255, 255, 255) 80%, rgb(255, 255, 255) 100%); */
	width: 100%;
	font-size:1em;
	scroll-margin-top: 200px;
}

div#page {
	scroll-margin-top: 200px;
}

div#corp {
    width: 100%;
    margin: 0px;
	scroll-margin-top:200px;
/*    background-image: url(monogramme.png);
    background-position: center;
    background-repeat: no-repeat;
*/
}


/* footer */
div#footerlum{
	background: var(--bgDegFooter);
}

div#footer3{
	background: var(--bgFooter);
	color:#fffa;
}

.boxtitre, .box h1 {
	color : var (--titreFooter) !important; 
}



/* liste art lien */
.blocListeArtlien {
	text-align:center;
	padding: 10px 10px; 
	background-color: var(--noir-bleute);
}
a.listeArtlien  {color:#c7ac65; display:inline-block;margin: 2px; padding: 5px 10px; font-size:0.9em;}
a.listeArtlien:hover { color: #fff;background-color: #c7ac65; border-radius:5px;transition:all 0.5s ease 0s;}


/* typo */

h1, h2, h3, h4, h5 { font-family: var(--policeTitresGal);   line-height: 120%;}

/* GAMME CUVEE */
.ZoneInfosCat h2 { 
	font-family: var(--policeSerif); 
	color: var(--colorOR);  
	font-size : 3.5vh !important;
}

.haut h3 {
	font-family: var(--policeTech);
	min-height: 50px;
  margin: 2vh 0;
  font-weight: normal;
 }




h1 {
	color: var(--colorTitresH1);
	margin: 0px 0px 50px 0;
}

h2 {
	color: var(--colorTitresH1);
	font-weight: normal;
	margin: 40px 0px 20px 0px;
}

h2, h3, h4, h5 {
	font-family: var(--policeTexteGal); !important;
	color: var(--colorTitresAutres);
	margin: 30px 0 0 0px;
}

#contenu h1 {
	font-size: 2em;
	font-weight: normal;
	line-height: 120%;
}


#contenu h2 {
	font-size: 1.5em;
	letter-spacing: -0.01em;
	text-align: left;
	scroll-margin-top: 200px;
}
#contenu h3 {
	font-size: 1.2em;
	
}
#contenu h4 {
	font-size: 1.1em;
	padding: 0px;
}

.firstheader{
	margin-top:0px !important;
	margin-bottom: 15px;
}

.chapeau {
	color: #37272c !important;
	font-family: var(--policeTitresGal);
	font-size: 1.1em !important;
	line-height: 120% !important;
	margin-bottom: 30px !important;
	font-style: italic;
}

a { text-decoration:none; }

div#contenu p {
	line-height: 140%;
	margin: 8px 0;
}

div#contenu a {
  color: var(--colorlien);
}

div#contenu a:hover {
  color: var(--colorlienHover);
}



div#contenu ul  {
	margin-left: 30px;
	padding: 0px;
	list-style-type: disc;
	list-style-position: outside;
}
div#contenu ol  {
	margin-left: 30px;
	padding: 0px;
}
div#contenu li  {
	margin: 5px 0;
	padding: 0px;
}

/* table */

caption { text-align:left; font-weight:bold;}

div#contenu th {
	margin:0px;
	padding:10px;
	background-color: var(--bgColorTableTH);
	color:#fff;
	border: 1px solid #999999;
}
 
div#contenu th p {
	margin:10px;
	padding:0px;
	font-size: 14px;
	line-height: normal;
	color: #FFFFFF;
	text-align: center;
}
div#contenu td {
	margin:0px;
	padding:10px;
	line-height: normal;
	border: 1px solid #d0d0d0;
}

div#contenu td p {
	margin:5px;
	padding:0px;
	font-size: 1em;
	line-height: normal;
}

div#contenu img {
	border: none;
	vertical-align:middle;
}
div#contenu table img {
	padding: 0px;
	margin: 0px 2px;
}


/* extraits pages*/
.extraits {
	border: 1px solid #ccc;
}

a.extraits {
	background-color:var(--vert-signatureFonce);
}

a.extraits:hover {
	background-color: var(--vert-signature);
	color: #fff !important; 

}

.extraitslien { 
	color: #fff !important; /* titre */

}

.extraitstexte { color: #fffa; font-size: 1em;}



/* boxline actus */
.boxline .date {
	color: #fff;
	background-color:#6a5466;
	border-radius: 7px;
}


/* actus */
.actuDate {
	background-color:var(--bgClair);
	color			:var(--textBgClair);
}
.actuDateJour {
  background-color	: var(--bgFonce);
  color				:var(--textBgFonce);
}
.actuInfosPratique {
  background-color: var(--bgFonce);
  color				:var(--textBgFonce);
}

/* === actus ====*/
.actus {
    background-color: #E7E7E7;
    background-image: url("/images/fond-corp-lueur.png");
    background-position: left top;
    background-repeat: no-repeat;
    border: 2px solid #BA1D6E;
    margin: 10px auto 0;
    padding: 5px;
}
.bactus { padding-top:10px; padding-bottom:10px;}
#bactus a, .bactus a {
    color: #BF4200;
    font-weight: bold;
    line-height: normal;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
.actutexte {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1em;
    line-height: normal;
    margin: 0;
    padding: 0;
}

div#calendrier {
	float: right;
	height: 50px;
	width: 20px;
	color: #999;
	background-image: url(/images/ico-calendrier.png);
	padding-top: 22px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	text-align: left;
	font-weight: bold;
	margin: 0px;
	background-repeat: no-repeat;
	}
div#titreactu {
	margin-bottom:5px;
	border: 1px solid #ccc;
	}
	
.date {
	font-size: 0.9em;
	padding-left: 5px;
	color: #444;
	margin: 0px;
}
/* c_actus detail */
.prn{
	color:#900;
	font-size:14px;
}
.detaildate {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #666666;
	padding-left: 10px;
	font-weight: bold;
	}
/* liste des actus */
.ligneactu {
	background-color: #FFF;
	margin-bottom: 21px;
	padding:5px;
	}
.actuslistedate {
background-color: #87cbe1;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #000000b3;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
text-align: center;
margin-bottom: 5px;
display: block;
	}
.actuslistephoto {

	}
	
.actuslistelien {

    padding-bottom: 5px;
    padding-top: 5px;
	}
.dateactus {
    color: #666666;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 0.8em;
    letter-spacing: 0.2em;
    margin: 0;
}
.mois {
    background-color: #CC6600;
    color: #FFFFFF;
    font-size: 10px;
    text-align: center;
}
.CatNews {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #666766;
	text-align: left;
	margin: 0px;
	font-weight: bold;
	padding-top: 7px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
}
/* calendrier */
.calendrier{margin-left:auto; margin-right:auto;}
.cal_entete {
	background-color: #bfb470;
	padding: 5px;
	font-size: 1.3em;
	font-weight: bold;
	margin-top: 10px;
	color:#fff;
}
.cal_corp{
	border:1px dotted #666;
	}
.cal_dategauche{
	float:left;
	width:75px;
	margin:7px;
	padding:5px;
	border:1px dotted #333;
	background-color:#EBEBD6;
	text-align:center;
	color:#666;
	font-size:0.8em;
	}
.cal_dategauchejour{
	float:left;
	width:75px;
	margin:7px;
	padding:5px;
	border:1px dotted #333;
	background-color:#E87400;
	text-align:center;
	color:#FFF;
	font-size:0.8em;
	}
.cal_nojour {
	font-size: 1.4em;
	font-weight: bold;	
	}
.cal_textedroite{
	float:left;
	margin:7px;
	padding:5px;
	color:#666;
	width:75%;
	}


/* actu detail */
.blocActuDetail {
	scroll-margin-top: 200px; 
	background-color: rgba(255, 255, 255, 0.45);
	margin: 20px auto 0;
	padding: 30px;
}

#titreactu {font-size:90%;}

div#photoactu {

}


a.liensActus { display: block;
	padding: 5px;
	margin: 5px;
	border-radius: 5px;
	color: #c49153 !important;
}

a.liensActus:hover { 
	background-color: #222 !important;
	text-decoration: none !important;
	transition:all 0.4s;
	color:#fff;
}

.actuInfosPratique {
font-size: 0.9em;
  text-align: center;
  padding: 20px;
  margin-top:20px;
}

.actuInfosPratique p { }






/* blog */
.blogDateListe {
  background-color	: var(--bgFonce);
  color				:var(--textBgFonce);
}

/* Gamme */

.nbDistinctions {
  background-color	: var(--bgFonce);
  color				:var(--textBgFonce);
}


/* RECETTES */
a.blockrecette:hover { 
	color: var(--textBgClair) !important;
	background-color:var(--bgClair) !important;
	transition: all cubic-bezier(.17,.84,.44,1) 0.5s;
}

.LienCuvees:hover {
	background-color:var(--bgFonce) !important;
	color: var(--textBgFonce) !important;
	transition: all cubic-bezier(.17,.84,.44,1) 0.25s;
}

/* MEDAILLES */

    .buttons button {
      background-color:var(--bgBouton); 
	  color:var(--textbgBouton);
    }
    .buttons button:hover {
      background-color:var(--bgBoutonHover) !important;
	  color:var(--textbgBoutonHover) !important;
    }

    .group-title {
		background-color	: var(--bgFonce);
		font-family			:  var(--policeSerif);
		color 				: var(--textBgFonce);
    }

    .subgroup-title {
		font-family	: var(--policeSerif);
		color		: var(--colorTitresGal);
    }
	



/* ---------- BON DE COMMANDE ----------------- */

.zoneCde { padding: 0 20px; background-color: #eee9; margin-top:10px;}

.artcat {
	color: #fff;;
	background-color: var(--colorTitresH1);
	font-family: var(--policeSans);
	font-size: 1.7em;
	font-variant: small-caps;
}


.ficheArt {
  border: 1px solid #e3dfd7;
/*  background: radial-gradient(circle farthest-side at top center, #fff 0%, #fff8f5 100%);*/
	padding:0px !important; /* annule le padding de ligne*/
}
.ficheArt:nth-of-type(even) { background-color: #eee3; }
.ficheArt:nth-of-type(odd) { background-color: #eee8; }




.titreCuvee {
  font-size: 1.4rem;
  padding: 20px;
}

.titreCuvee:hover { background-color:#efe8d1 !important; cursor: pointer; }


	.titreProduit {
	  color:var(--barnavBgColorLiens);
	  font-family: var(--policeSans);
	}
	
	.sousTitreProduit {
	  font-size: 0.7em;
	  color: #777;
	  line-height: 140% !important;
	  margin: 10px 0;
	  font-style: italic;
	  display: inline-block;
	}


/* medaille BCDE */
.conteneurMedaille {
	position: relative;
	display: inline-block;
}
.zoneMedailles {
  max-height: 0;           /* invisible par défaut */
  opacity: 0;              /* transparent */
  overflow: hidden;        /* cache le contenu */
  transition: all 0.4s ease;  /* animation fluide */
  padding: 5px;
  background: #f2f2f2;
  border: 1px solid #fff;
  position: absolute;
  font-size: 0.6em;
  z-index: 1;
  box-shadow: 0 0 30px #0003;
  width:max-content;
  }

.afficheMedailles { 
color: #c8a848;
  background-color: #fff;
  display: inline-block;
  padding: 2px 5px;
  border-radius: 16px;
  border: 2px solid #c8a848;
  font-size:0.8em;

}
/* Quand on survole le bloc "afficheMedailles", 
   on affiche le bloc juste après */
.afficheMedailles:hover + .zoneMedailles {
  max-height: 200px;  /* ajuste selon la hauteur attendue */
  opacity: 1;
  padding: 10px;      /* le padding vertical revient */
}

.imgMedaille {margin:3px; display:inline-block; width: 50px; cursor:help;}




.tarifReduit { 
	color:var(--colorlien); 
	background-color:#fff; 
	padding:5px; 
	display: block;
	font-weight: bold; 
	font-size:1.2em;
}

.tarifBase {
	font-size: 1.2em;
	font-weight: bold;
	padding: 5px;
	display: inline-block;
	margin-top: 10px;
}

.TarifMtReduct { 
	font-size: 0.6em; 
	padding: 5px 0;
}


SUP { 
	vertical-align: middle;
	font-size:0.5em;
	font-family: var(--policeTech);
	letter-spacing: 1px;
	color: #555;
} 

/* MON COMPTE ------------ */

form#coor label {
  min-width: 80px;
  font-size: 0.7em;
  color: #999;
}

.btnMaj {
  color: var(--textbgBouton) !important;
  background-color: var(--bgBouton) !important;
}

.btnMaj:hover {
  color: var(--textbgBoutonHover) !important;
  background-color: var(--bgBoutonHover) !important;
}

.btnMajLien { color: #00BCD4 !important;
    font-family: arial;
    font-size: 0.8em;
    padding: 5px 10px;
    border: 1px solid #00BCD4;
	box-shadow: 0px 1px 3px rgba(208, 208, 208, 0.7);
	border-radius:3px; }

.btnMajLien:hover {
background-color:#00BCD4 !important;; 
color:#fff !important;
box-shadow: none;
text-decoration: none !important;
 }

div#blocanoter h2 {
	background-color: var(--barnavBgColor);
}