/* --------------------------------------------- Barre supérieure (classes) v.1 ------------------------------------------------- 

ul#tabnav {
    font: Arial, size=2;
    list-style-type: none;
    padding-bottom: 24px;
    border-bottom: 0px solid #9979DE;
    margin: 0;
    text-align: center;
}

ul#tabnav li {
    height: 21px;
    background-color: #DCDCDC;
    border: 1px solid #CBCBCB;
    display: inline-block;
    margin-top: 5px;
}

ul#tabnav li.active {
    border-bottom: 1px solid #fff;
    background-color: #fff;
}

ul#tabnav li.active a {
    color: #9979DE;
    font-weight: bold;
}

#tabnav a {
    float: left;
    display: block;
    color: #666;
    text-decoration: none;
    padding: 4px;
}

#tabnav a:hover {
    background: #fff;
}

*/




body
{	background-color: var(--couleur_fond_clair);



main
{	width: 880px;
	margin: auto;
	background-color: #FAFAFA;
}


a
{	text-decoration: none;
	color: rgb(0,0,102);
}

a:hover
{	text-decoration: underline;
}

.texte_en_haut
{	vertical-align: top;
}

/* ----------------------- actualités ------------------------------ */



.actu
{	color: #384DBB;
}

ul.actu
{	margin-left: -40px;
	margin-right: 15px;
}
.contenu_actu
{	font-size: 0.9em;
	padding-bottom: 6px;
	text-align: justify;
	font-weight: bold;
	
	list-style-type: none;
}

.contenu_actu a
{	font-weight: normal;
}


.contenu_actu a::after
{	font-family: 'FontAwesome';
	content: "\f0C1";
	text-decoration: none;
	font-size: 0.9em;
}

/* ----------------------------- colonne image sur l’accueil ---------------------- */
.colonne_image
{
	color:#7853CA;
	text-shadow: 0.1em 0.1em 0.2em #decae8;
}


/* ------------------------------ zone « classe » avec image de Louise Michel ------ */

.louisematic_classe
{
	/*width: 200px;
	height: 200px;
	background-color: #EEE;*/
	background-repeat: no-repeat;
	font-family: 'texgyreadventor';
	color: #9979DE;
	text-align: center;
}




/* ------------------------ GRILLES --------------------------- */
.grille-index
{
	display: grid;
	
	grid-template-columns: auto 235px 215px 215px 215px auto;
	grid-template-rows: 250px 70px 440px 440px;
	
	/*	grid-column-gap: 2px;
		grid-row-gap: 2px;	*/
	
	align-items: start;
	
	grid-template-areas:	". a a b c ."
				". e e b c ."
				". e e . d ."
				". e e . d .";
}

.grille-index-I1
{
	grid-area: a;
	margin-left: 5px;
	margin-right: 5px;
	height: 250px;
	overflow: auto;
}
.grille-index-I2
{
	grid-area: b;
	/*background-image:url("https://live.staticflickr.com/1473/24665743910_e31129c1a3_n.jpg");*/
	background-image:url("/ent/images/liane.jpg");
	/*background-image:url("/ent/images/lm.jpg");*/
	/*background-color:#DCDCDC;*/
	background-repeat:no-repeat;
	/*	opacity:0.85;	ajouté pour l’image de liane, mais se transmet aux menu des classes de première…	*/
	height: 1200px;
}
.grille-index-I3
{
	grid-area: c;
}
.grille-index-II2
{
	grid-area: d;
}
.grille-index-II1
{
	grid-area: e;
	margin-left: 5px;
	margin-right: 5px;
	overflow: auto;
	height: 950px;
}

.grille-index-classe
{
	display: grid;
	
	grid-template-columns: auto 235px 215px 215px 215px auto;
	grid-template-rows: 254px auto auto auto;
	
/*	grid-column-gap: 2px;
	grid-row-gap: 2px;	*/
	
	align-items: start;
	
	grid-template-areas:	". a a b c ."
				". d d e e ."
				". f f g g ."
				". f f h h .";
}
.grille-index-classe-I1
{	grid-area: a;
	margin-left: 5px;
	margin-right: 5px;
	height: 254px;
	overflow: auto;
}
.grille-index-classe-I2
{	grid-area: b;
	background-image:url("/ent/images/LouiseMichel215.jpg");
	background-repeat:no-repeat;
	height: 256px;
}
.grille-index-classe-II1
{	grid-area: d;
	background-color: #DCDCDC;
}
.grille-index-classe-II2
{	grid-area: e;
}
.grille-index-classe-III1
{	grid-area: f;
	margin-left: 5px;
	margin-right: 5px;
}
.grille-index-classe-III2
{	grid-area: g;
	background-color: #DCDCDC;
	text-align: center;
}
.grille-index-classe-IV2
{	grid-area: h;
}







.revue_de_presse
{	vertical-align: top;
	color: #605084;
	font-size: 0.9em;
	text-align: justify;
	
	list-style-type: square;
}

.revue_de_presse a
{	vertical-align: top;
	color: #605084;
	font-weight: bold;
}

.revue_de_presse-couleur
{
	color: #605084;
}

.liens_une
{
	list-style-type: square;
	color: #754B84;
}

.liens_une a
{	color: #754B84;
	font-size: 0.9em;
}



.liens_une_permanents
{
	text-align: center;
	font-size: 0.7em;
	color: #754B84;
}

.liens_une_permanents td
{
	width: 25%;
}

.liens_une_permanents img
{
	height: 40px;
}

.liens_une_permanents a
{
	color: #754B84;
}



.anciens
{	/*background-color: #EEE;*/
	background-image:url("/ent/images/1980lm.jpg");
	text-align: center;
	padding: 10%;
	margin-top: 10%;
	height: 50px;
}






.couleur_cahier
{

	color: #cB29eE;
}

/* ------------------------------------------------------------ MENU DÉROULANT ---------------------------------------------------------------------- */

nav
{	font-size: 130%;
	/* pour que le menu soit collé en haut
	position: sticky; */
	top: 0px;
	/* taille du menu */
	width: 880px;
	height: 50px;
	margin: auto;
}

nav ul
{
	list-style-type: none;
	text-align: center;
	/* pour éviter l’espace à gauche dû à ul */
	padding: 0;
	/* pour coller le menu tout en haut */
	margin: 0;
}

nav ul li
{
	float: left;
	width: 215px;
	margin: 0 auto;
	/* pour que les sous-menus fassent la bonne taille et soient sous le niveau */
	position: relative;
	
	background-color: #f6f6ff;
}

nav a
{	display: block;
	text-decoration: none;
	color: navy;
	border-bottom: 2px solid transparent;
	padding: 9 0;
}

nav a:hover
{	background-color: #9979DE;
	color: white;
	/*border-bottom: 2px solid gold;*/
	font-weight: bold;
	text-decoration: none;
}

.menu-classes_element
{	display: none;
	/* pour ajouter une ombre */
	box-shadow: 5px 4px 6px #CCC;
	background-color: white;
	/* pour que le contenu suivant ne soit pas poussé vers le bas */
	position: absolute;
	/* pour les afficher par dessus le reste */
	width: 100%;
	z-index: 1000;
	/* pour supprimer l’espace dû à ul/li */
	padding: 0;
}
nav > ul li:hover .menu-classes_element
{	display: block;
}

.menu-classes_element li	/* pour que les classes s’affichent les unes au dessus des autres, et occupent tout l’espace dispo */
{	float: none;
	width: 100%;
	text-align: center;
	background-color: #f0f0fe;
}

nav li.tampon
{	height: 19px;
	background-color: #f6f6ff;
}

.menu-classes_gauche
{
	width: 234px;
	background-color: #f6f6ff;
	padding: 17 0 19;
	border-right: solid 1px #ccccee;
	/*border-radius: 10px;*/
	color: #3b6ea2;
}


li.menu-classes_gauche li
{
	border-left: solid 4px #3b6ea2;
	background-color: #fafafa;
	margin-left: -4;
}

li.menu-classes_gauche li.tampon
{
	background-color: #f6f6ff;
	border-left: solid 4px #f6f6ff;
}

.menu-classes_niveau
{	padding: 15 0 19;
}

.actif
{	background-color: lavender;
}
div.actif
{	font-weight: bold;
}

.actif li.tampon
{	background-color: lavender;
}

nav .menu-classes_gauche a:hover
{
	background-color: #f6f6ff;
	color: rebeccapurple;
}

.menu-classes_gauche div		/* nécessaire pour aligner le texte du menu de gauche sur les autres menus */
{	display: inline-block;
	vertical-align: middle;
}


/*
.menu-classes
{
position: relative;
display: inline-block;
	text-align: center;
	width: 880px;
	margin: auto;
}

li.menu-classes
{	color: green;
	display: inline-block;
	width: 160px;
	position: relative;
}

ul.menu-classes_element
{ display: none;
 position: absolute;
 	display:none;
 	position: absolute;
	margin: auto;padding: auto;
	text-align:center;

	top: 14px;
	border: outset 2px #cB29eE;
	border-top: none;
	background-color: #EEE;
	width: 160px;
}

.menu-classes:hover.menu-classes_element {display: block;}


li:hover ul.menu-classes_element
{	display:inline-block;
	list-style-type:none;
	text-align:center;
	margin: 0 0;padding: 0 0;
	text-align:center;
}


.menu-classes_element ul
{	position: absolute;
}

*/

/* ------------------------------------------------------------ MENU DÉROULANT ---------------------------------------------------------------------- */

ul.menu_titre
{	list-style-type: none;
	text-align: center;
	margin: auto;padding: 0 0;
	width: 200px;
	height: 40px;
	background-color: #EEE;
	
	font-size: 100%;
	font-family: 'texgyreadventor', sans-serif;
	font-weight: bold;
	color: #cB29eE;
	
	border-style: outset;
	border-color: #CCC;
	border-width: 2px;
	border-radius: 4px;
}

ul.menu_titre:hover
{	border-color: #cB29eE;
}

ul.menu_titre li.tampon
{
	height:2px;
	background-color:#EEE;
}


.titre_avec_fleche
{	display: inline-block;
	vertical-align: middle;
}


.titre_avec_fleche::after
{	font-family: 'FontAwesome';
	content:"\f078";
/*	position:relative;
	top: 19px;
	left: 10px;
	border-top:8px solid;
	border-left:4px solid transparent;
	border-right:4px solid transparent;	*/
}



ul.menu_element li::after
{	content:none;
}

ul.menu_element
{	display:none;
	margin: auto;padding: auto;
	text-align:center;
	position: relative;
	top: 14px;
	border: outset 2px #cB29eE;
	border-top: none;
	background-color: #EEE;
}



li:hover ul.menu_element
{	display:inline-block;
	list-style-type:none;
	text-align:center;
	margin: 0 0;padding: 0 0;
	text-align:center;
}


ul.menu_element form
{	margin: 0 0;
	padding: 0 0;
}

ul.menu_element input
{	border: none;
	width: 180px;
	height: 40px;
	font-size: 105%;
	color: #3f0673;
}

ul.menu_element a                    /* rajouté pour le cas où le menu déroulant se fait avec des liens (get) plutôt que des formulaires  */
{	padding-top: 10;
	padding-bottom: 10;
	border: none;
	width: 180px;
	/*height: 40px;	remplacé par padding-top et -bottom	*/
	font-size: 105%;
	font-family: 'Ubuntu', sans-serif;
	font-weight: normal;
	color: #3f0673;
	display: block;
}



ul.menu_element input:hover
{	background-color: #cB29eE;
	color: white;
	font-weight: bold;
	cursor: pointer;
	font-size: 110%;
}


ul.menu_element a:hover		/* rajouté pour le cas où le menu déroulant se fait avec des liens (get) plutôt que des formulaires  */
{	background-color: #cB29eE;
	color: white;
	font-weight: bold;
	cursor: pointer;
	font-size: 110%;
	text-decoration: none;
}


ul.menu_element input:active
{	color: #cB29eE;
	font-weight: bold;
	background-color: #FBFBFB;
	cursor: pointer;
	font-size: 110%;
}

/* --------------------------------------------------------------------------------------------------------*/


.bouton_cahier
{

	width: 204px;
	height: 40px;
	margin: auto;
}


.bouton_cahier input
{
	border-style: outset;
	border-color: #CCC;
	border-width: 2px;
	border-radius: 10px;
	width: 204px;
	height: 40px;
	font-size: 100%;
	font-family: 'texgyreadventor', sans-serif;
	font-weight: bold;
	color: #cB29eE;
	cursor: pointer;
}

.bouton_cahier input:hover
{	border-width: 3px;
}

.bouton_cahier input:active
{	border-style: inset;
	color: gray;
}

.bouton_cahier_lien input
{	color: rgb(0, 0, 102);
}



/*------------------------------BOUTON CLIQUABLE (implémenté en 2025) ----------------------*/
.bouton-a
{
	text-align: center;
	

}

.bouton-a a
{
	text-align: center;
	
	width: 204px;
	height: 40px;
	margin: auto;
		
	border-style: outset;
	border-color: #CCC;
	border-width: 2px;
	border-radius: 10px;
	
	padding: 10px;
	
	background: #EEE;
	
	font-weight: bold;
	text-decoration: none;
	
	font-size: medium;
	font-family: 'texgyreadventor', sans-serif;
	font-weight: bold;
	color: rgb(0, 0, 102);
	
	white-space : nowrap;
}



.bouton-a a:hover
{
	border-width: 3px;
	/*border-style: inset;*/
	background-color: #CCC;
}





/*---------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 980px)
{	
		
	main
	{	width: 98%;
	}
	
	.grille-index
	{	
	grid-template-columns: auto 28% 24% 24% 24% auto;
	grid-template-rows: 250px 70px 440px 440px;
	}
	
	nav
	{	width: 98%;
		height: 80px;
	}
	.menu-classes_gauche
	{	width: 27.8%;
		padding: 25 0 30;
	}
	.menu-classes_niveau
	{	width: 24%;
		padding: 25 0 30;
	}
	nav a
	{	padding: 40 0;
	}
	ul.menu_titre
	{	width: 400px;
		height: 50px;
		font-size: 1.4em;
	}
	
	ul.menu_titre li.tampon
	{
		height:22px;
	}


	ul.menu_element li
	{	width: 380px;
		height: auto;
		font-size: 1.5em;
	}
	ul.menu_element input
	{	width:380px;
		height: 70px;
	}
	
	ul.menu_element a                    /* rajouté pour le cas où le menu déroulant se fait avec des liens (get) plutôt que des formulaires  */
	{	width:380px;
		height: 70px;
	}	
}