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

* {box-sizing: border-box;}

html {margin: 0; height:100%; font-family: sans-serif; font-size: 1em;}

/**********/
/* GRILLE */
/**********/

	body {
		margin:0;
		padding:0;
		width: 100%;
		min-height: 100vh;
  		display: flex;
  		flex-direction: column;
  	}

		h1 {font-size: 2.3em; padding: 0; margin: 0;}
		h2 {font-size: 1.5em; color: #f2b727; text-align: right; padding-top: 10px; margin: 0; font-style: italic;}
		h3 {text-align: center; background-color: #f2b727; color: #ffffff;  font-weight: normal;}
		h4 {font-weight: normal; color: #626262; border-bottom: solid 1px #e7e7e7;}

/**********/
/* IMAGES */
/**********/

img {
	max-width: 100%;
	height: auto;
}

.deco {
	border: solid 1px #e7e7e7;
	display: block;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 5px 5px 2px #626262;
}

/*********/
/* LIENS */
/*********/
a {color: #102866; text-decoration: underline; opacity: 1;}

a:hover {color: #f2b727; text-decoration: none; transition: color 0.5s;}

footer a:hover {color: #ffffff; transition: color 0.5s;}

/***********/
/* ACCUEIL */
/***********/

header {
	margin: 0 auto;
	padding-top: 10px;
}

#presentation {
	width:700px;
	margin: 0 auto;
	text-align: justify;
	font-size: 0.9em;
	font-style: italic;
}

div#carres {
	margin: 0 auto;
	flex-grow: 1;
	width:700px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto auto;
	padding-bottom: 20px;
}

.h3Carre {background-color: #102866;color: #ffffff; margin:0; padding: 0;}
.carre {border: solid 1px #e7e7e7; box-shadow: 5px 5px 2px #626262; max-width:300px; margin: 0 auto;}
#dernier {grid-column: 1 / 3; margin-top: 20px;}
.carre img {	display: block;
	margin-left: auto;
	margin-right: auto;}

a > .carre:hover {box-shadow: none; transition: box-shadow 0.5s;}
a > .carre:hover > h3 {background-color: #ffffff; color: #102866; transition: background-color 0.5s;}
a > .carre:hover > img {opacity: 0.2; transition: opacity 0.5s;}

/* titre */
a > header  {text-align: left;}
@media only screen and (min-width: 830px) {a > header {text-align: center;}}

header > a:hover {opacity: 0.2; transition: opacity 0.5s;}

header > img {border: none; max-height:100px;}


/**************/
/* NOUVEAUTES */
/**************/
	div#nouveautes {
		width:700px;
		margin: 0 auto;

		margin-top: 10px;
		text-align: left;
	}

	/**************/
	/* ACTUALITES */
	/**************/

		div#actualites {
			margin-bottom: 1em;
			padding-bottom: 0.5em;
			border: solid 1px #960001;
			}
	
		div#actualites p {font-size: 0.9em; text-align: center;padding-right: 1em; padding-left: 1em;}
		div#actualites a:hover, #lienAV a:hover {background-color: #960001; color: #ffffff;}	
	
		h3#h3actualites {
			background-color: #960001;
			color: #ffffff;
			font-weight: bold;
			font-size: 1.2em;
			padding: 0;
			margin:0;
			text-align: center;
			border-radius: 1em 1em 0 0;
			}
			
	/***************/
	/* RENDEZ-VOUS */
	/***************/

		div#rendezVous{background-color: #102866; border-radius: 1em 1em 0 0; padding-bottom:0.5em;}

		h3#h3rendezvous {
			background-color: #102866;
			color: #ffffff;
			font-size: 1.2em;
			font-weight: bold;
			padding: 0;
			margin:0;
			text-align: center;
			border-radius: 1em 1em 0 0;
			border-bottom: solid 1px #ffffff;
		}

	h4.h4rendezvous {
		font-weight: bold;
		text-align: left;
		font-size: 1em;
		color: #ffffff;
		font-style: italic;
		border-bottom: solid 1px #e7e7e7;
		background-color: #102866;
	}
	
	div.texteActu {
		background-color: #ffffff;
		margin: 0.5em;
		padding:1em;
		border-radius: 0.5em;
		font-size: 0.9em;
		text-align: justify;
	}

	div#actualites p.enValeur {
		text-align: center;
		font-style: italic;
		font-weight: bold;	
	}

	div.image {text-align: center;}

	div.imgFlottante {float:left; margin: 0.5em;}

/************/
/*** MENU ***/
/************/

/*** écran ***/
nav {font-size: 1em; font-weight: bold; background-color: #102866; width: 100%; margin: 0 auto;}
nav > ol {display: none; text-align: center; padding:0; margin: 0;}
nav li {padding: 15px; height: 100%;  border-bottom: solid 1px #979797;}
nav li:last-of-type {border: none;}
nav li:first-of-type {border: none;}
nav li a {width: 100%; height: 100%; color: #ffffff;}

.menuVisible ol {display: block;}
#menuButton {position: absolute; top: 0; right: 0; font-size: 2em; text-decoration: none;}

/*** écran à partir de 830px ***/
@media only screen and (min-width: 830px) {
	nav {text-align: center; font-size: 0.8em;}
	nav a {display: block; text-decoration: none;}
	nav > ol {display: block;}
	nav > ol > li {display: inline-block; position: relative; padding: 0; border: none;}
	nav > ol > li { padding: 0 10px 0 10px; }
	#menuButton {display: none;}
}

/*** écran à partir de 1200px ***/
@media only screen and (min-width: 1200px) {nav > ol {text-align: center; border: none;} nav > ol > li {text-align: center;}}

nav li:hover {background-color: #ffffff; transition: background-color 0.5s; }
nav li:hover a {color: #102866; transition: color 0.5s;}

.pageCourante {background-color: #ffffff; color: #102866; padding: 0 10px 0 10px;}
/****************/
/*** DIVERS ***/
/****************/

span.petit {font-size: 0.8em;}

q {	quotes:'\00AB' '\00BB';	}

.titre {font-size: 1.5em; margin: 2px; text-align: left; font-family: serif;}

.contenu {width: 100%; padding: 10px; flex-grow: 1; text-align: justify;}

@media only screen and (min-width: 830px) {
.contenu {width: 700px; padding: 0; margin: 0 auto; }
}

.txtCentre {text-align: center;}

.publi {color: #1F1F1F; font-style: italic; font-weight: bold;}

.points {font-weight: bold; color: #f2b727;}

ol, ul {list-style: none;}

.large {display: none;}
@media only screen and (min-width: 700px) {.large {display: block;}}

.barre {text-decoration: line-through;}

/********/
/* PIED */
/********/
footer {width: 100%; font-size: 0.9em;  background-color: #f2b727; text-align: center;margin: 0; padding:0;}
#pied {display: grid; grid-template-columns: 33.33% 33.33% 33.33%; width: 700px; height: 100%; margin: 0 auto; color: #ffffff; text-align: left; padding: 5px;}
#pied img {display: block; margin-left: auto; margin-right: auto;}
#piedGauche {text-align:right; font-family: sans-serif; font-size: 1.2em;"><span style="font-weight: bold;}
#piedDroit {text-align: left;}
#mentions {grid-column: 1 / 4; text-align: center;}

/**************/
/* ALTERVINEA */
/**************/
div#alterVinea {margin-bottom: 1em; padding-bottom: 0.5em; border: solid 1px #d4c37c;}

	h3.h3alterVinea {
		background-color: #d4c37c;
		color: #ffffff;
		font-weight: bold;
		font-size: 1.2em;
		padding: 0;
		margin:0;
		text-align: center;
		border-radius: 1em 1em 0 0;
		}

	h4.h4altervinea {
		color: #d4c37c;
		font-weight: bold;
	}

	div#alterVinea p {font-size: 0.9em; text-align: center;padding-right: 1em; padding-left: 1em;}
	div#alterVinea a:hover, #lienAV a:hover {background-color: #d4c37c; color: #ffffff;}
	
	div#alterVinea a#lienAlterVinea {background-color: #d4c37c; color: #ffffff; text-decoration: none; font-size: 1.3em; font-weight: bold; padding: 0.2em; border-radius: 0.1em; transition: background-color 0.5s; }
	div#alterVinea a#lienAlterVinea:hover {color: #ffffff; background-color: #6b2257; transition: background-color 0.5s; box-shadow: 5px 5px 2px #626262;}
	div#alterVinea a#lienAlterVinea:active {box-shadow: none;}

	span.alter { color: #d4c37c; font-weight: bold; font-size: 1.3em; font-style: italic;}
	span.small{font-size: 0.8em;}
	span.cepages {font-size: 0.9em; font-style: italic; font-weight: bold; color: #d4c37c;}