html {
	background-color: var(--gris-du-fond);
	font-family: arial;
	line-height: 1.5;
	min-height: 100vh;
	min-width: 300px;
	overflow-x: hidden;
	}



.div_inline {
	display: inline-block;
	}

.grille {
	display: grid;
	height: 95vh; 
	width: 98vw; 
	grid-template-rows: repeat(10,1fr);
	grid-template-columns: repeat(30,1fr); 
	grid-row-gap: 7px;
	grid-column-gap: 2px;
	}

.zone {
	background-color: var(--gris-du-fond);
	overflow-x: hidden;
	overflow-y: hidden;
	text-align: justify;
	}

.image_logo {
	display: block;
	max-width: 100%;
	max-height: 100%;
	margin-left: auto;
	margin-right: auto;
	}

.image_logo:hover{
	cursor: grab;
	}

.image_courante {
	display: block;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	}

.image_courante_sans_zoom {
	display: block;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	}

.image_courante:hover{
	cursor: grab;
	}

.image_fin_page {
	display: block;
	max-width: 40%;
	margin-left: auto;
	margin-right: auto;
	}
	
.image_fin_page:hover{
	cursor: grab;
	}
	
.image_courante_2 {
	display: inline-block;
	max-width: 45%;
	margin-left: auto;
	margin-right: auto;
	}
	
.image_courante_2:hover{
	cursor: grab;
	}
	
.image_courante_3 {
	display: inline-block;
	height: 250px;
	margin-left: auto;
	margin-right: auto;
	}

.image_courante_3:hover{
	cursor: grab;
	}

.grille_image_courante_3 {
	display: grid;
    /* height: min(250px,15vw); */ 
	width: 100%; 
	grid-template-rows: 1fr;
	grid-template-columns: 15px 874fr 15px 407fr 15px 874fr 15px;
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	}

.image_courante_3_a {
	/* max-height: min(250px,15vw); */
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end: 3;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	}

.image_courante_3_a:hover{
	cursor: grab;
	}
	
.image_courante_3_b {
	/* max-height: min(250px,15vw); */
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 4;
	grid-column-end:5;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	}
	
.image_courante_3_b:hover{
	cursor: grab;
	}
	
.image_courante_3_c {
	/* max-height: min(250px,15vw); */
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 6;
	grid-column-end:7;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	}

.image_courante_3_c:hover{
	cursor: grab;
	}

.grille_image_courante_3_bis {
	display: grid;
    /* height: min(250px,15vw); */
	width: 100%; 
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 3fr 1fr;
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	}

.image_courante_3_d {
	/* max-height: min(250px,15vw); */
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end:3;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	}

.image_courante_3_d:hover{
	cursor: grab;
	}


.grille_contacts {
	display: grid;
    height: auto;
	grid-template-rows: 1fr;
	grid-template-columns: 180px 1px 150px 150px;
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	}

.contact_champ {
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 1;
	grid-column-end:2;
	}
	
.contact_nom {
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 3;
	grid-column-end:4;
	}
	
.contact_numero {
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 4;
	grid-column-end:5;
	}

.grille_une_image {
	display: grid;
	height: auto;
	width: 100%; 
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 2fr 1fr;
	}

.grille_une_image_50_pourcent {
	display: grid;
	height: auto;
	width: 100%; 
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	}
.image_courante_une_image {
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end:3;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom:none;
	}
	
.image_courante_une_image:hover{
	cursor: grab;
	}

.image_courante_une_image_sans_zoom {
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end:3;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom:none;
	}

.grille_deux_images {
	display: grid;
    height: auto;
	width: 100%; 
	grid-template-rows: 1fr;
	grid-template-columns: 15px 1fr 15px 1fr 15px;
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	}

.grille_deux_images_bis {
	display: grid;
    height: auto;
	width: 100%; 
	grid-template-rows: 1fr;
	grid-template-columns: 1fr minmax(50px,1fr) 10% minmax(50px,1fr) 1fr;
	/* grid-template-columns: 1fr minmax(1fr, 200px) 10% minmax(1fr, 200px) 1fr; */
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	}

.image_courante_deux_images_gauche {
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end:3;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom:none;
	}

.image_courante_deux_images_gauche:hover{
	cursor: grab;
	}
	
.image_courante_deux_images_gauche_sans_zoom {
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end:3;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom:none;
	}


.image_courante_deux_images_droite {
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 4;
	grid-column-end:5;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom:none;
	}

.image_courante_deux_images_droite:hover{
	cursor: grab;
	}

.image_courante_deux_images_droite_sans_zoom {
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 4;
	grid-column-end:5;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom:none;
	}

.grille_trois_images {
	display: grid;
    height: auto;
	width: 100%; 
	grid-template-rows: 1fr;
	grid-template-columns: 15px 1fr 15px 1fr 15px 1fr 15px;
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	}

.image_courante_trois_images_gauche {
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end:3;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom:none;
	}

.image_courante_trois_images_gauche:hover{
	cursor: grab;
	}

.image_courante_trois_images_centre {
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 4;
	grid-column-end:5;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom:none;
	}

.image_courante_trois_images_centre:hover{
	cursor: grab;
	}

.image_courante_trois_images_droite {
	max-width: 100%;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 6;
	grid-column-end:7;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom:none;
	}

.image_courante_trois_images_droite:hover{
	cursor: grab;
	}

.zone_bouton {
	position: relative;
	display: inline-block;
	width:95%;
	}

.zone_bouton_contenu {
	display: none;
	position: absolute; /* relative; */ 
	left : 25%;
	width: 75%;
	background-color: var(--vert-du-panneau); /* white; */
	z-index: 2;
	/* border-style: none solid solid solid; */
	}

.zone_bouton:hover .zone_bouton_contenu {
	display: block;
	}
	
.zone_bouton:hover .bouton {
	background-color: rgb(255,224,125); /* var(--vert-du-panneau); white; */
	font-weight: bold; 
	cursor: pointer;
	/* border: solid; */
	}

.bouton {
	background-color: var(--vert-du-panneau); 
	/* border-style: solid; */
	/* font-weight:bold; */
	padding: 2px;
	width: 100%;
	margin-left: 5px;
	margin-right: 0px;
	margin-top: 3px;
	border-radius: 5px;
	}

/* .bouton:hover { */
	/* background-color: red;  */
	/* font-weight: bold;  */
	/* cursor: pointer; */
	/* } */
	
.bouton_si_actif {
	background-color: rgb(255,224,125); 
	padding: 3px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 0px;
	margin-bottom: 3px;
	border-radius: 5px;
	}
	
.bouton_si_actif:hover {
	/* background-color: white; */
	font-weight: bold; 
	cursor: pointer;
	}

.bouton_2 {
	display: inline-block;
	background-color: var(--gris-du-fond);
	/* border-style: solid; */
	font-size: var(--taille-police-tres-tres-petite);
	text-align: center;
	font-style: italic;
	width:110px;
	}
	
.bouton_2:hover{
	background-color: var(--vert-du-panneau);
	cursor: pointer;
	}
	
.bouton_2_gauche {
	display: inline-block;
	background-color: var(--gris-du-fond);
	/* border-style: solid; */
	font-size: var(--taille-police-tres-petite);
	text-align: right;
	font-style: italic;
	font-weight: bold;
	width:80px;
	margin:0px;
	border:0px;
	padding:0px;
	}
	
.bouton_2_gauche:hover{
	background-color: var(--vert-du-panneau);
	cursor: pointer;
	}
	
.bouton_2_droit {
	display: inline-block;
	background-color: var(--gris-du-fond);
	/* border-style: solid; */
	font-size: var(--taille-police-tres-petite);
	text-align: left;
	font-style: italic;
	font-weight: bold;
	width:65px;
	margin:0px;
	border:0px;
	padding:0px;
	}
	
.bouton_2_droit:hover{
	background-color: var(--vert-du-panneau);
	cursor: pointer;
	}

.titre {
	color: var(--vert-du-texte);
	font-size: var(--taille-police-grosse);
	font-weight: bold;
	text-align: center;
	}
	
.sous_titre {
	color: var(--vert-du-texte);
	font-size: var(--taille-police-moyenne);
	font-weight: bold;
	text-align: center;
	}

.sous_titre_2 {
	/* color: var(--vert-du-texte); */
	font-size: var(--taille-police-moyenne-inf);
	font-weight: bold; 
	text-align: center;
	}

.texte_vert {
	color: var(--vert-du-texte);
	/* display: inline-block; */ 
	/* attention pour un texte en ligne utiliser span (élément en ligne) et non div (élément en block) */
	font-weight: bold;
	}

.texte_vert_administrateurs {
	color: var(--vert-du-texte);
	font-size: var(--taille-police-mot-fin);
	/* display: inline-block; */ 
	/* attention pour un texte en ligne utiliser span (élément en ligne) et non div (élément en block) */
	font-weight: bold;
	}

.texte_mot_fin {
	font-size: var(--taille-police-mot-fin);
	}	

/*
.texte_blanc_grand_gras {
	color: white;
    display: inline-block; 
	font-size: var(--taille-police-grosse);
	font-weight: bold;
	}
*/

.grille_deux_colonnes {
	display: grid;
	width: 100%; 
	height: auto;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
	grid-row-gap: 0px;
	grid-column-gap: 30px;
	}

.colonne_gauche {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 1;
	grid-column-end: 2;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom:auto;
	}

.colonne_droite {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end: 3;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	}

.grille_legende_une_image {
	display: grid;
	width: 100%; 
	height: auto;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 9fr 1fr;
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	}
	
.legende_une_image {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	/* grid-column-end: 2; */
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}

.grille_legende_deux_images {
	display: grid;
    height: auto;
	width: 100%; 
	grid-template-rows: 1fr;
	grid-template-columns: 15px 1fr 15px 1fr 15px;
	grid-row-gap: 0px;
	grid-column-gap: 0px;
	/*min-width: 0px;  important pour éviter l'ajustement automatique de la largeur à la longueur du mot le plus long */
	}

.legende_deux_images_gauche {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end: 3;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	word-break: break-all; /* pour permettre la césure et éviter l'élargissement automatique des cellules */
	}

.legende_deux_images_droite {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 4;
	grid-column-end: 5;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	word-break: break-all;
	}
	
.legende_deux_images_gauche_pt_italique {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end: 3;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: var(--taille-police-tres-petite);
	font-style: italic;
	}

.legende_deux_images_droite_pt_italique {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 4;
	grid-column-end: 5;
	overflow-y: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: var(--taille-police-tres-petite);
	font-style: italic;
	}

#div_logo {
	background-color: var(--gris-du-fond);
	grid-row-start: 1;
	grid-row-end: 10;
	grid-column-start: 1;
	grid-column-end:5;
	overflow-y: none;
	display : flex; 
	align-items: start;
	}
	
	
#div_corps {
	background-color: var(--gris-du-fond); 
	font-size: var(--taille-police-petite);
	grid-row-start: 1;
	grid-row-end: 11;
	grid-column-start: var(--colonne-debut-corps-principal); /* old : 2 */
	grid-column-end: var(--colonne-fin-corps-principal); /* old : 23 */
	overflow-y: scroll;
	/* opacity : 0.5; */
	padding: 10px;
	color: white; /* color est la couleur du texte */
	}
	
/* #div_corps::-webkit-scrollbar { display: none; } */

#div_corps::-webkit-scrollbar {
	width:8px;
	} 

#div_corps::-webkit-scrollbar-track {
	background:var(--gris-du-fond); 
	} 
#div_corps::-webkit-scrollbar-track:hover {
	background:magenta;
	} 
	
#div_corps::-webkit-scrollbar-thumb {
	background:var(--gris-du-fond);
	border-radius:10px;
	height:10px;
	} 

#div_corps::-webkit-scrollbar-thumb:hover{
	background:yellow;
	} 

#div_panneau {
	background-color: var(--vert-du-panneau);
	font-size: var(--taille-police-tres-petite);
	grid-row-start: 1;
	grid-row-end: 11;
	grid-column-start: 24;
	grid-column-end:31;
	overflow-y: scroll;
	}

#div_panneau::-webkit-scrollbar { display: none; }

#grille_bienvenue {
	display: grid;
	height: auto; 
	width: 100%; 
	grid-template-rows: repeat(10,1fr);
	grid-template-columns: repeat(10,1fr); 
	grid-row-gap: 7px;
	grid-column-gap: 10px;
	}

#grille_bienvenue_2 {
	display: grid;
	height: auto; 
	width: 100%; 
	grid-template-rows: 1fr;
	grid-template-columns: repeat(10,1fr); 
	grid-row-gap: 7px;
	grid-column-gap: 10px;
	}
	
#bandeau_gauche_bienvenue {
	background-color: var(--gris-du-fond);  
	grid-row-start: 2;
	grid-row-end: 6;
	grid-column-start: 2;
	grid-column-end:3;
	overflow-y: none;
	padding: 0px;
	color: white; /* color est la couleur du texte */
	}

#texte_droit_bienvenue {
	background-color: var(--gris-du-fond);  
	grid-row-start: 1;
	grid-row-end: 11;
	grid-column-start: 3;
	grid-column-end: 11;
	overflow-y: none;
	padding: 10px;
	color: white; /* color est la couleur du texte */
	}

#signature_bienvenue {
	background-color: var(--gris-du-fond);  
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 6;
	font-style: italic;
	grid-column-end: 11;
	overflow-y: none;
	padding: 10px;
	color: white; /* color est la couleur du texte */
	text-align: left;
	}

#calque_superieur {
	position: fixed;
	display: none;
	width: 75%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	z-index: 2;
	flex-direction: column;
	align-items : center;
	align-content: center;
	justify-content: center; 
	/* margin-left: auto; */
	/* margin-right: auto; */
	color: var(--vert-du-texte);
	font-weight: bold;
	}

.image_calque_superieur {
	/* display: block; */
	max-width: 80%;
	max-height: 80%;
	margin-left: auto;
	margin-right: auto;
	}
	
.trait {
	border : 3px solid #99ff00;
	border-radius : 3px;
	}