/*
____________________________________________________________
margin: Haut Droite Bas Gauche ;  // Marge exterieur
padding: Haut Droite Bas Gauche ; // Marge interieur
border-radius: HautGauche HautDroite BasDroite BasGauche ; => Courbure des angles
border: solid hsla(80, 90%, 40%, 0.5) ; 
____________________________________________________________

"#" 					: pour les id
"." 					: pour les classes
"" 						: pour les balises
* 						: sélecteur universel
A, B 					: s'applique aux balise A et B
A B 					: s'applique à la balise B contenue dans la balise A
A + B 					: s'applique à la balise B qui en suit après une balise A
A[attribut] 			: s'applique à la balise A qui possède un attribut
A[attribut="Valeur"] 	: s'applique à la balise A un attribut et une valeur exacte
A[attribut*="Y"] 		: s'applique à la balise A, un attribut et ça valeur comporte Y

____________________________________________________________
Rouge	: rgba(206, 17, 38, 1)	/ rgba(218, 41, 28, 1)
Vert	: rgba(61, 142, 51, 1)	/ rgba(4, 106, 56, 1)
Jaune	: rgba(252, 216, 86, 1)	/ rgba(255, 233, 0, 1)
Bleu	: rgba(0, 114, 198, 1)	/ rgba(0, 45, 114, 1)
____________________________________________________________

calc(25% - 40px)

*/


/* ############################################################################################################# */
/* SnellRoundhandLTW01-Script - Police Logo 
font-family: "SnellRoundhandLTW01-Script", cursive; 
https://www.onlinewebfonts.com/download/1047e3d8132b7b57cbe85218d211fb63 */
@import url(//db.onlinewebfonts.com/c/1047e3d8132b7b57cbe85218d211fb63?family=SnellRoundhandLTW01-Script);

/* font-family: 'Source Serif Pro', serif; 
https://fonts.google.com/specimen/Source+Serif+Pro?query=Source+Serif+Pro */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@200&display=swap');



/* Variables 
Exemple d'utilisation des variables : --navbar-underline-color: var(--color-red); */
:root {
    /*--color-red: #CE1126;
	--color-red: rgba(206, 17, 38, 1);
    --color-red: #DA291C*/
	--color-red: rgba(218, 41, 28, 1);
    /*--color-green: #3D8E33;
    --color-green: rgba(61, 142, 51, 1);
    --color-green: #046A38;*/
    --color-green: rgba(4, 106, 56, 1);
    /*--color-yellow: #FCD856;
    --color-yellow: rgba(252, 216, 86, 1);
    --color-yellow: #FFE900;*/
    --color-yellow: rgba(255, 233, 0, 1);
    /*--color-blue: #0072C6;
    --color-blue: rgba(0, 114, 198, 1);
    --color-blue: #0072C6;*/
    --color-blue: rgba(0, 45, 114, 1);
    

	--color-blue-PeroTeam: rgba(25, 65, 191, 1);
	--color-yellow-PeroTeam: rgba(252, 216, 86, 1);


    --font-size:1em;
    --navbar-text-font-family: "SnellRoundhandLTW01-Script", cursive;
    --navbar-chiffre-font-family: "Source Serif Pro", serif;
    --body-text-font-family: "Source Serif Pro", serif;
}


/* §§§§§§§§§§§§§§§§§§§§§§§§§§§ Structure de la page §§§§§§§§§§§§§§§§§§§§§§§§§§§ */ 
/*
* {
	margin: 0;
	padding: 0;
}*/

/* Reset */
* {
    box-sizing:border-box; 
    outline:none;
    margin:0;
    padding:0;
}

/* Basic style */
body {
	height: 100%;
    margin:0;
    font-size:var(--font-size);
    font-family: var(--body-text-font-family);
	color: var(--boby-color);
	background-color: var(--background-color);
	/*background: linear-gradient(to right, var(--color-green), var(--color-red));*/
	/*overflow: hidden;*/
}


main {
	/*font-family: 'Lato', Helvetica, sans-serif;*/
	
	/*padding: Haut Droite Bas Gauche ;*/

    padding: 1em 1em 1em 3em;
    text-align: justify;
    font-size:var(--font-size);
    font-family: var(--body-text-font-family);

    /*padding: 1em 2em 1em 2em;
	font-size: 16px;*/
}

/*.main-content {
    padding:1rem;
}*/

/* §§§§§§§§§§§§§§§§§§§§§§§§§§§ Balises standard §§§§§§§§§§§§§§§§§§§§§§§§§§§ */ 

/* Sommaire de la Page */
menu {
	margin: 1em 1em 1em 1em;
	text-align: center;
}
menu a {
	color: var(--menu-color);
	padding: 0.1em 0.1em 0.1em 0.1em;
	margin: 3em 1em 1em 1em;
	transition: all .5s ease-in-out;
	text-decoration: underline;
}
menu a:hover {
	color: var(--menu-hover-color);
	transition: all .5s ease-in-out;
}

/* Pied de page */
footer {
	margin: 1em 1em 2em 1em;
	padding: 1em 1em 1em 1em;
	background: linear-gradient(to right, var(--color-green), var(--color-red));
	border-radius: 1.0em 1.0em 3.0em 3.0em;
	box-shadow: 0 0 0 3px var(--color-yellow);

	text-align: center;
	vertical-align: middle;
	color: var(--color-yellow);
	font-size: small;
}

li {
	/*padding: Haut Droite Bas Gauche ;*/
	margin: 0em 0em 0em 2em;
    padding: 0em 0em 0em 0em;
}

/*  */
h1 {
	color: var(--h1-color);
    text-shadow: 0 0 0.1em var(--h1-text-shadow-color), 0 0 0.1em var(--h1-text-shadow-color), 0 0 0.1em var(--h1-text-shadow-color);
	text-align: center;
	font-family: "Lucida Calligraphy", cursive;
	font-size: xx-large;
	
	/*padding: Haut Droite Bas Gauche ;*/
	padding: 0em 0em 0.em -2em;
}

h2 {
	color: var(--h2-color);
    text-shadow: 0 0 0.1em var(--h2-text-shadow-color), 0 0 0.1em var(--h2-text-shadow-color), 0 0 0.1em var(--h2-text-shadow-color);
	/*text-shadow: -1px 0 White, 0 1px White, 1px 0 White, 0 -1px White ;*/
	font-family: Monaco;
	font-size: large;
	margin: 1em 0em 0em -2em ;
}

h2:FIRST-LETTER {
	color: var(--h1-first-letter-color);
    text-shadow: 0 0 0.1em var(--h2-text-shadow-color), 0 0 0.1em var(--h2-text-shadow-color), 0 0 0.1em var(--h2-text-shadow-color);
	/*text-shadow: -2px 0 White, 0 2px White, 2px 0 White, 0 -2px White ;*/
	font-size: 2em;
	font-family: Desdemona, "Snell Roundhand", Harrington, Lucida Calligraphy, cursive;
	text-transform: uppercase;
	margin-right: 0;
	/*float: left;*/
}

h3 {
	color: var(--h3-color);
    text-shadow: 0 0 0.1em var(--h3-text-shadow-color), 0 0 0.1em var(--h3-text-shadow-color), 0 0 0.1em var(--h3-text-shadow-color);
	/*text-shadow: -1px 0 var(--h3-text-shadow-color), 0 1px var(--h3-text-shadow-color), 1px 0 var(--h3-text-shadow-color), 0 -1px var(--h3-text-shadow-color);*/
	font-family: Monaco;
	font-size: large;
	margin: 1em 0em 1em -2em ;
}

p {
    text-indent: -1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

p:FIRST-LETTER {
	color: var(--p-first-letter-color);
    font-size: 1.4em;
	font-weight:bold;
	font-family: "Snell Roundhand", Harrington, Lucida Calligraphy, cursive;
}


a {
	color: var(--a-color);
	text-decoration: none;

	-webkit-transition: 0.15s color ease;
	   -moz-transition: 0.15s color ease;
	    -ms-transition: 0.15s color ease;
	     -o-transition: 0.15s color ease;
	        transition: 0.15s color ease;
}
a:hover {
	color: var(--a-hover-color);
}

figure {
	/*display: inline-block;*/
	margin: 0em 0em 1em 1em;
	/*background: rgba(0, 114, 198, 1);*/
	text-align: center;
	font-size: medium;
	border: solid var(--boite-border);
	padding: 0.5em 0.5em 0.5em 0.5em;
	border-radius: 1em 1em 1em 1em;
	box-shadow: 5px 5px 5px var(--boite-box-shadow);
	/*width: 375px;*/
}

figcaption {
	font-style: italic;
}


/* §§§§§§§§§§§§§§§§§§§§§§§§§§§ Balise de type Div §§§§§§§§§§§§§§§§§§§§§§§§§§§ */ 

.blocContenuCenter {
	text-align: center;
}

.blocCoteAcoteContenuCentrer {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}

.boite {
	display: inline-block;
	margin: 0em 0em 1em 1em;
	/*background: rgba(0, 114, 198, 1);*/
	text-align: center;
	font-size: medium;
	border: solid var(--boite-border);
	padding: 0.5em 0.5em 0.5em 0.5em;
	border-radius: 1em 1em 1em 1em;
	box-shadow: 5px 5px 5px var(--boite-box-shadow);
	/*width: 375px;*/
}

.boiteSansContour {
	display: inline-block;
	margin: 0em 0em 1em 1em;
	text-align: center;
	font-size: medium;
}


#facebook {
	margin: 0em 0em 1em 1em;
	/*z-index: 1;*/
	background: rgba(0, 114, 198, 1);
	font-size: medium;
	border: solid rgba(252, 216, 86, 1);
	padding: 0.5em 0.5em 0.5em 0.5em;
	border-radius: 1em 1em 1em 1em;
	box-shadow: 5px 10px 15px White;
}


.conteneurCenter {
	text-align: center;
}

.blocConteneurCenter {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}

#conteneurGauche {
	text-align: left;
}

.alignG {
	text-align: left;
}

.alignD {
	text-align: right;
}

.alignC {
    text-align: center;
}

.aDroite {
	float: right;
	padding: 0.5em 0.5em 0.5em 0.5em;
}

.aGauche {
	float: left;
	padding: 0.5em 0.5em 0.5em 0.5em;
}


.bordEcran {
	/* Centrer par rapport au bord de l'ecrant 
		sans tenir compte de la marge du 
		Body : padding: 1em 1em 1em 3em; */
	margin: 0em 0em 0em -3em;
}







.contents {
	background: var(--color-blue) ;
	/*padding: 20px 40px;*/
	padding: 0px 0px 0px 40px ;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	
	color: var(--color-yellow) ;
	
	-webkit-overflow-scrolling: touch;
	-webkit-transform-style: preserve-3d;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.contents>article {
	max-width: 90%;
}
.contents p {
	margin: 10px 0 10px 0;
	font-size: 16px;
	line-height: 1.32;
}



#mentionLegales {
	text-align: center;
	vertical-align: middle;
	color: var(--color-yellow) ;
	font-size: small;
}
	


/* §§§§§§§§§§§§§§§§§§§§§§§§§§§ https://boxicons.com §§§§§§§§§§§§§§§§§§§§§§§§§§§ */ 
.color-bx-check {
	color: var(--boxiconChek-color) ;
}
.color-bx-x {
	color: var(--boxiconX-color) ;
}



/* §§§§§§§§§§§§§§§§§§§§§§§§§§§ Gestion de l'affichage des images au premier plan §§§§§§§§§§§§§§§§§§§§§§§§§§§ */ 

/* Style the Image Used to Trigger the Modal
#myImg {
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
*/

/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: var(--modal-background-color-opacity);
}
  
/* Modal Content (Image) */
.modal-content {
	margin: auto;
	display: block;
}
  
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#modal-caption {
	margin: auto;
	display: block;
	max-width: 700px;
	text-align: center;
	padding: 1em 0;
	height: 3em;
	color: var(--modal-caption-color);
	background-color: var(--modal-caption-background-color);
}

/* Add Animation - Zoom in the Modal */
.modal-content/*, #caption */
{
	animation-name: zoom;
	animation-duration: 0.6s;
}
  
@keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
}
  
/* The Close Button */
.modal-close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.5s;
}
.modal-close:hover,
.modal-close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}
  
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
	.modal-content {
	width: 100%;
	}
}
/* §§§§§§§§§§§§§§§§§§§§§§§§§§§ - §§§§§§§§§§§§§§§§§§§§§§§§§§§ */ 




/* §§§§§§§§§§§§§§§§§§§§§§§§§§§ ?????????????? §§§§§§§§§§§§§§§§§§§§§§§§§§§ */ 


bodyText {
	color: black;
	font-family: "DejaVu Serif", Geneva, serif, Geneva, serif;
	text-align: justify;
	padding: 0.5em 1em 3em 16em;
}

bodyTextCentrer {
	color: black;
	font-family: "DejaVu Serif", Geneva, serif, Geneva, serif;
	text-align: center;
	padding: 0.5em 2em 3em 16em;
}

bodyText a {
	color: inherit;
}



/* §§§§§§§§§§§§§§§§§§§§§§§§§§§ ?????????????? §§§§§§§§§§§§§§§§§§§§§§§§§§§ */ 

#scroll_to_top a{
	position: fixed;
	width: 49px;
	height: 49px;
	bottom: 100px;
	left: 0px;
	font-size:3em;
	color: var(--color-yellow);
	text-decoration:none;
}
#scroll_to_top a:hover {
	color: var(--color-red);
	text-decoration:none;
}





/* §§§§§§§§§§§§§§§§§§§§§§§§§§§ PAS UTILISE §§§§§§§§§§§§§§§§§§§§§§§§§§§ */
#header {
	margin: 1em 1em 0 0;
	padding: 0.5em 0.5em 0.5em 0.5em;
	/*padding: 1em 1em 1em 1em;*/
	
	background: linear-gradient(to right, var(--color-green), var(--color-red));
	border-radius: 3.0em 3.0em 1.0em 1.0em;
	box-shadow: 0 0 0 3px var(--color-yellow) ;
	
	font-size: x-large;
	text-align: center;
	vertical-align: middle;
}