/* mise en forme commune à toutes les pages */ 

body { 	
	font-family: Trebuchet MS, Arial, sans-serif;
	color: rgb(72, 36, 0);
	hyphens: auto; /*ne fonctionne pas avec Chrome, car ce navitateur n'a pas de dictionnaire de césure. Voir https://openweb.eu.org/articles/la-gestion-de-la-cesure-en-css */
	word-wrap: break-word; /*coupure des mots trop longs */
	margin-left: -10px;
	margin-right: -10px;
	background-image: url("../images/fond-partition.jpg");
}

section { 	
	hyphens: auto;
	display: flex;
	max-width: 800px;
	padding: 0px 20px 40px 20px;
	margin: auto;
	background-color: white;
	margin-bottom: 30px;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}

article, aside { /*mise en forme des articles */
	width: 100%;
	text-align: justify;
	hyphens: auto;
	margin-bottom: 0px;
}

h1 {
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	margin-top: 90px;
}
	
h2 {
	font-size: 1.5em;
	font-weight: bold;
}
	
h3 {
	font-size: 1.3em;
	font-weight: bold;
}
	
h4 {
	font-size: 1.2em;
	font-weight: bold;
}

h5 {
	font-size: 1.1em;
	font-weight: bold;
}

ul {
	list-style-type: circle;
}

img {
	width: 100%;
}

strong {
	font-weight: bolder;
	letter-spacing: .15em;
	text-decoration: none;
}

table {
	text-align: center;
	width: 100%;
	min-width: 340px;
	margin: auto;
}

caption {
	font-size: 1.2em;
	font-weight: bold;
	padding-top: 20px;
	padding-bottom: 10px;
}

th {
	background:#70AD47;
	color: white;
}

td {
	background:#E2EFD9;
}

.table-partition {
	width: 90%;
}

.mini {
	font-size: 0.9em;
}

.latalentelle { /*mise en forme spéciale de "La Talentelle" */
	font-family: Georgia, Times New Roman, serif;
	font-size: 1.3em;
	font-style: italic;
}

.imgfloat-right {
    position: float;
	width: 20%;
	min-width: 120px;
	margin-top: 0px;
	margin-left: 3%;
    float: right;	
}	

.imgfloat-left {
    position: float;
	width: 20%;
	min-width: 120px;
	margin-top: 0px;
	margin-right: 3%;
    float: left;	
}

.baniere {
	border: 3px solid green;
	background: yellow;
	opacity: 0.8;
	padding: 10px;
	width: 70%;
	margin: auto;
	position: relative;
	top: -295px;
	transform: rotate(-6deg);
	margin-bottom: -225px;
	font-size: 1.5em;
	color: black;
}	

.position-print {
	height: 40px;
	width: auto;
}	

.special-agenda {
	width: 80%;
	margin-left: 0px;
	border: 1px solid black;
	align-content: bottom;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.special-agenda span {
	border: 1px solid black;
}

.largeur-1-demi {
	max-width: 48%;
	min-width: 330px;
}

.largeur-1-tiers {
	max-width: 30%;
}

.largeur-2-tiers {
	max-width: 66%;
	min-width: 330px;
}

.cadre {
	border: 5px double green;
	padding: 0px 20px 0px 20px;
	margin: 0px 0px 20px 0px;
}

.cadre-simple {
	border: 1px double black;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 10px 0px;
}

#quoideneuf {
	min-width: 20px;
	height: auto;
	margin: -20px -15px 0px -30px;
}

.quoideneuf {
	max-height: 120px;
	overflow: scroll;
	margin: 0px 0px 0px 0px;
}

#blinking {
	animation: blinking-icone infinite 4s linear;
}

@keyframes blinking-icone{
	0% { opacity: 0.1; transform: rotate(0deg);}
	40% { opacity: 1; transform: rotate(0deg);}
	45% { opacity: 1; transform: rotate(5deg);}
	50% { opacity: 1; transform: rotate(-5deg);}
	55% { opacity: 1; transform: rotate(0deg);}
	70% { opacity: 1; transform: rotate(0deg);}
	100% { opacity: 0.1; transform: rotate(0deg);}
}

.image-reduite {
	width: 100px;
}

.image-150px {
	width: 150px;
}

.texte-centre {
	text-align: center;
	hyphens: none;
}

.texte-gris {
	color: grey;
}

.texte-rouge {
	color: red;
}

.texte-vert {
	color: green;
}

.texte-petit {
	font-size: small;
}

#texte-barre {
	text-decoration:line-through;
}

.retrait-30px {
	text-indent: -1.5em;
	list-style-type: none;
	margin-bottom: 7px;
}

.taille-limite-250px {
	width: 32%;
	min-width: 250px;
	max-height: 290px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin: auto;
}

.taille-limite-400px {
	width: 60%;
	min-width: 300px;
}

.gestion1 {
	width: 480px;
	margin: auto;
}

.gestion1 td {
	padding-left: 10px;
}



/*mises en forme particulière pour l'album-photo*/
.slider-focus{
max-width: 900px;
margin:  auto;
border: 3px solid green;	
border-radius: 20px;
}	
	
.slider-focus ul{	
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: space-around;
list-style-type: none;
padding: 0px 20px 0px 20px;
}

.slider-focus ul li a img{
height: 96px;
width: auto;
border: 2px solid white;
border-radius: 4px;
}

.slider-focus ul li a img:hover {
transform: scale(2);
border: 1px solid green;
border-radius: 4px;
padding: 1px;
background-color: white;
transition-duration: .2s;
transition-timing-function: ease-in;
}

/*
.slider-focus ul li span img {
position: fixed;
top: 15%;
left: -100%;
max-height: 60%;
width: auto;
max-width: 70%;
height: auto;
margin: auto;
background-color: white;
padding: 20px;
border: 3px solid rgb(1 149 50);
border-radius: 20px;
opacity: 0;
transition-property: opacity;
transition-duration: .4s;
transition-delay: .1s;
}

.slider-focus ul li:focus-within span img {	
max-width: 95%;
max-height: 75%;
left: 0px;
right: 0px;
text-align: center;
opacity: 0.6;
}
*/


/*adaptation de la mise en forme pour les petits écrans (smartphones)*/
@media screen and (max-width: 900px) {
/* mise en forme pour l'en-tête */ 

	header {  
		font-family: Trebuchet MS, Arial, sans-serif;
		word-wrap: break-word; /*pour couper les mots trop longs (adresses url par exemple*/
		width: 90%;
		height: 80px;
		background-color: white;
		opacity: 1;
		border-bottom: 1px solid rgb(1 149 50);
		position: fixed; /*l'en-tête et le menu restent toujours présents, même en déroulant les pages */
		top: -11px;  
		left: 0;
		padding-left: 5%;
		padding-right: 5%;
	}

	span.case-logo {
		position: fixed;
		top: 0px;
		left: 20px;
	}

	span.case-menu {
		position: fixed;
		top: 0px;
		right: 30px;
	}

	header img {
		height: 70px;
		width: auto;
	}

	.ecran-petit {
		display: inline;
	}

	.ecran-large {
		display: none;
	}
	
	.bouton-menu {
		display: inline;
		width: 30px;
		height: auto;
		margin-top: 10px;
	}

	.case-menu ul.menu {
		background-color: white;
	/*	background-image: url("/images/fond-entete.png");
		background-repeat: repeat;
	*/	width: 160px;
/*		height: 370px;
*/		padding-bottom: 5px;
		border-radius: 10px;
		overflow: auto;
		position: fixed;
		top: 20px;
		right: -300px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: space-around;
		transition: .4s;
		opacity: 0.1;
	}

	.case-menu:hover ul.menu 
	{
		transform: translate(-290px, 0px);
		opacity: 1;
	}

	.menu  li {
		list-style-type: none; /* supprime le point précédent chaque item de la liste*/
	}

	.menu a {
		text-decoration: none;
		font-weight: normal;
		/*text-transform: uppercase;*/
		font-size: 0.9em;
		color: rgb(1 149 50);
	}

	.menu a:hover {
		color: red;
		border-bottom: 1px solid red;
	}

	.bloc-menu1 {
		margin-top: 0px;
	}	

	.bloc-menu2 {
		margin-top: 0px;
	}	

	.bloc-menu1 a {
		font-size: 0.8em;
		padding-left: 0px;
	}	

	.bloc-menu2 a {
		font-size: 0.8em;
		padding-left: 0px;
	}
	
}	


/*adaptation de la mise en forme pour les grand écrans (ordinateurs)*/
@media screen and (min-width: 900px) {
	header {  
		font-family: Trebuchet MS, Arial, sans-serif;
		word-wrap: break-word; /*pour couper les mots trop longs (adresses url par exemple*/
		width: 100%;
		height: 70px;
		background-color: white;
		opacity: 1;
		border-bottom: 1px solid rgb(1 149 50);
		position: fixed; /*l'en-tête et le menu restent toujours présents, même en déroulant les pages */
		top: 0;  
		left: 0;
	}

	.en-tete {		
		max-width: 1100px;
		margin: auto;
		height: 70px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	span.case-logo {
		width: 180px;
		height: 80px;
		padding-left: 10px;
	}

	span.case-menu {
		width: 90%;
		height: 80px;
		padding-right: 0px;
	}

	header img {
		height: 70px;
		width: auto;
	}

	.ecran-petit {
		display: none;
	}

	.ecran-large {
		display: inline;
	}
	
	.bouton-menu {
		display: none;
		width: 35px;
		height: auto;
	}

	span.case-menu ul.menu {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		transition: .4s;
	}
	
	.menu  li {
		list-style-type: none; /* supprime le point précédent chaque item de la liste*/
		margin-top: 20px;
	}

	.menu a {
		text-decoration: none;
		font-weight: normal;
		/*text-transform: uppercase;
		font-size: 1.1em;*/
		color: rgb(1 149 50);
		padding-bottom: 13px;
		margin-bottom: 2px;
		transition: .1s;
	}

	.menu a:hover {
		color: red;
		border-bottom: 2px solid red;	}

	.bloc-menu1 {
		background-color: white; 
		margin-top: -211px;
		margin-left: -21px;
/*		height: 150px;
*/		width: 100px;
		padding-left: 20px;
		padding-top: 5px;
		padding-bottom: 8px;
		transition: 0s; /*pas de retard pour que le déplacement ne soit pas visible */
		opacity: 1;	
	}
	
	.bloc-menu1  li {
		height: 20px;
		margin-top: 4px;
		padding-bottom: 1px;
	}

	.bloc-menu1 a {
		font-size: 1em;
	}

	.bloc-menu1 a:hover {
		color: red;
		text-decoration: underline;
		border-bottom: none;
	}

	li.sous-menu1:hover .bloc-menu1 {
		background-color: white;
		transform: translate(0px, 225px); /*déplacement nécessaire pour que :hover ne réagisse pas en passant sur la case du sous-menu encore invisble */
		opacity: 1;
	}

	.bloc-menu2 {
		background-color: white; 
		margin-top: -231px;
		margin-left: -28px;
/*		height: 170px;
*/		width: 110px;
		padding-left: 20px;
		padding-top: 5px;
		padding-bottom: 8px;
		transition: 0s; /*pas de retard pour que le déplacement ne soit pas visible */
		opacity: 1;	
	}
	
	.bloc-menu2  li {
		height: 20px;
		margin-top: 4px;
		padding-bottom: 1px;
	}

	.bloc-menu2 a {
		font-size: 1em;
	}

	.bloc-menu2 a:hover {
		color: red;
		text-decoration: underline;
		border-bottom: none;
	}

	li.sous-menu2:hover .bloc-menu2 {
		background-color: white;
		transform: translate(0px, 245px); /*déplacement nécessaire pour que :hover ne réagisse pas en passant sur la case du sous-menu encore invisble */
		opacity: 1;
	}

}