/* Le Header se compose en 3 parties distinctes :

	- Le Bandeau supérieur appelé "Header-BandeauSup" représentant 20 % du Header
	- Le Bandeau central appelé "Header-BandeauCentre" représentant 60 % du Header
	- Le Bandeau inférieur appelé "Header-BandeauInf" représentant 20 % du Header

*/

header {
	width:80%;/*largeur du header par rapport à la la page*/
	height: var(--dim8); /* hauteur du header par rapport à la page*/
	margin:0 10% 0 10%;/* marge haute droite basse gauche - Cela permet de centrer le header */
	padding:0;/*padding*/
	

	display: grid; /* Utilisation du module de disposition de grille - Pour le Header */
	grid-template-rows:var(--dim5) 1fr var(--dim5); /* permet de définir 3 lignes avec des hauteurs en fractions */
	grid-template-columns: 1fr ; /* permet de définir les colonnes en pixels et en fractions */
	
	/* on Détermine le nom des zones dans la 'grid area' */
	grid-template-areas: 
	"BandeauSuperieur"
	"BandeauCentral"
	"BandeauInferieur"
	;
}

/*Bandeau supérieur avec un couleur chocolat*/
.Header-BandeauSup {
	grid-area: BandeauSuperieur; /* On détermine le positionnement de la zone dans la 'grid area' */
	background-color: var(--couleurBandeau); /*Couleur du BandeauSup avec utilisation d'une variable*/
	width:100%; /* Largeur */
	height: auto;/* Hauteur */
	
	display: grid; /* Utilisation du module de disposition de grille - Pour le Bandeau Supérieur */
	grid-template-rows:1fr; /* permet de définir les lignes avec des hauteurs en fractions */
	grid-template-columns: var(--dim8) 1fr var(--dim8); /* permet de définir colonnes avec des largeurs en pixels et en fractions */
	
	/* on Détermine le nom des zones dans la 'grid area' */
	grid-template-areas: 
	"Nom . Logo";
}	

/*Traitement du titre "Abner Rudon" dans le bandeau supérieur*/
.Header-BandeauSup h1 {
	grid-area: Nom;
	font-size: var(--taillePolice3);/*hauteur des caractères en fonction de la largeur de l'écran*/
	font-family:var(--police1); /*Nature de la police d'ecriture en utilisant une variable*/
	color: var(--couleurFondArt); /*Couleur du titre du H1*/
	letter-spacing:0.7em;/*ecartement des espaces entre les lettres*/
	margin: auto auto auto 15px; /* Marge Haute Droite Basse Gauche */
}

/*Traitement du logo signature Abner Rudon du bandeau supérieur*/
.Header-BandeauSup img {
	grid-area: Logo;
	max-width: 100%;/* On ne souhaite pas que l'image soit plus grande que ... */
	height: auto; /*On réduit la taille de l'image*/
	margin: auto 15px auto auto; /* Marge Haute Droite Basse Gauche */
	
	justify-self: end; /*On spécifie que nous souhaitons que notre image soit placée en fin de la colonne*/
}

/*Traitement du bandeau central dans le header*/
.Header-BandeauCentre {
	grid-area: BandeauCentral; /* On détermine le positionnement de la zone dans la 'grid area' */
	background-color: var(--couleurFondArt); /*Couleur du BandeauCentre avec utilisation d'une variable*/
	width:100%; /*Largeur */
	height:auto; /* Hauteur */
	
	display: grid; /* Utilisation du module de disposition de grille - Pour le Bandeau Supérieur */
	grid-template-rows:1fr; /* permet de définir 3 lignes avec des hauteurs en fractions */
	grid-template-columns:var(--dim7b)  1fr var(--dim7b); /* permet de définir 6 colonnes avec des largeurs en pixels et en fractions */
	
	/* on Détermine le nom des zones dans la 'grid area' */
	grid-template-areas: 
	"Photo1 Citation Photo2"
}

/*Traitement de l'image de gauche du bandeau central */
.ImgGauche {
	grid-area: Photo1; /* On détermine le positionnement de la zone dans la 'grid area' */
	height: 100px; /* Hauteur de l'image */
	width: 134px; /* Largeur de l'image */
	background-image:url(/photos/Lampe100.jpg); /* On charge la première image de fond */
	justify-self: center; /* On justifie Horizontalement */
	align-self: center; /* On justifie Verticalement */

	/* on crée le jeu d'animation souhaité */
	/*animation-name: Slider_ImgGauche; /*Nom de l'animation */
	/*animation-duration: 100s; /* Durée de l'animation */
	/*animation-iteration-count: infinite; /* Nombre de cycle de l'animation */
		
	
}

/*Traitement de l'image de Droite du bandeau central */
.ImgDroite {
	grid-area: Photo2; /* On détermine le positionnement de la zone dans la 'grid area' */
	height: 100px; /* Hauteur de l'image */
	width: 134px; /* Largeur de l'image */
	background: url(/photos/Bible133x100.jpg); /* On charge la première image de fond */
	justify-self: center; /* On justifie Horizontalement */
	align-self: center; /* On justifie Verticalement */

	/* on crée le jeu d'animation souhaité */
	/*animation-name: Slider_ImgDroite; /*Nom de l'animation */
	/*animation-duration: 100s; /* Durée de l'animation */
	/*animation-timing-function: linear;	
	/*animation-iteration-count: infinite; /* Nombre de cycle de l'animation */
	/*animation-direction: normal; /* Direction de l'animation */
	/*animation-delay: 20s; /* Delai d'animation */

	

}
/*
@keyframes Slider_ImgGauche {
	0% {
		background: url(/photos/LeveSoleil100.jpg);
	}
	50% {
		background: url(/photos/Bible177x100.jpg);
	}
	100% {
		background: url(/photos/phare150x100.jpg);
	}
	
	
}

@keyframes Slider_ImgDroite {
	0% {
		background: url(/photos/Lampe100.jpg);
	}
	50% {
		background: url(/photos/Soleil133x100.jpg);
	}
	100% {
		background: url(/photos/Bible100.jpg);
	}
	
	
}

*/
	





/* Traitement de la citation du bandeau central */
.Header-BandeauCentre .Citation {
	grid-area: Citation; /* On détermine le positionnement de la zone dans la 'grid area' */
	font-family:var(--police2); /*Nature de la police d'ecriture en utilisant une variable*/
	color:var(--couleurParole); /*Couleur du texte*/
	font-size:var(--taillePolice7); /*Taille de la police d'écriture*/
	text-align: center; /*On aligne au centre le texte - Au centre des CSS grid */
	margin: 1vw auto auto auto; /* Marge Haute Droite Basse Gauche */

}

/*Traitement du 'cite" de la citation du bandeau central */
.Header-BandeauCentre .Citation Cite {
	grid-area: Passage; /* On détermine le positionnement de la zone dans la 'grid area' */
	font-family:var(--police2); /*Nature de la police d'ecriture en utilisant une variable*/
	color:var(--couleurPassage); /*Couleur du texte*/
	font-size:var(--taillePolice5); /*Taille de la police d'écriture*/
	text-decoration: underline; /* on souligne le texte*/
	font-weight: bold; /*on met en gras le texte*/
	margin: auto auto auto 25vw; /* Marge Haute Droite Basse Gauche */
}

/*Traitement du Bandeau inférieur du header*/
.Header-BandeauInf {
	grid-area: BandeauInferieur; /* On détermine le positionnement de la zone dans la 'grid area' */
	background-color: var(--couleurBandeau); /*Couleur du BandeauSup avec utilisation d'une variable*/
	width:100%; /*Largeur du bandeau supérieur par rapport au header*/
	
}

/*Traitement du menu navigation premier niveau*/
.Menu_topbar {
	width: 90%; /* Largeur du menu topBar en fonction du contenaire parent */
	margin: auto auto auto auto; /* Marge Haute Droite Basse Gauche */
	display: grid; /* Utilisation du module de disposition de grille - Pour le Bandeau Supérieur */
	grid-template-rows:1fr; /* permet de définir les lignes avec des hauteurs en fractions */
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; /* permet de définir des colonnes avec des largeurs en pixels et en fractions */
	/* on Détermine le nom des zones dans la 'grid area' */
	grid-template-areas: 
	"Menu1 Menu2 Menu3 Menu4 Menu6 Menu7"

	;
	
		
}


.Menu1 {
	grid-area: Menu1; /* on positionne cet élément dans la grille selon le 'grid-template-area */
	z-index: 1000; /* Permet de positionner le menu déroulant au dessus de la partie du dessous */
}


.Menu2 {
	grid-area: Menu2; /* on positionne cet élément dans la grille selon le 'grid-template-area */
	z-index: 1000; /* Permet de positionner le menu déroulant au dessus de la partie du dessous */
}


.Menu3 {
	grid-area: Menu3; /* on positionne cet élément dans la grille selon le 'grid-template-area */
	z-index: 1000; /* Permet de positionner le menu déroulant au dessus de la partie du dessous */
}


.Menu4 {
	grid-area: Menu4; /* on positionne cet élément dans la grille selon le 'grid-template-area */
	z-index: 1000; /* Permet de positionner le menu déroulant au dessus de la partie du dessous */
}

/*.Menu5 {
	grid-area: Menu5; /* on positionne cet élément dans la grille selon le 'grid-template-area */
/*	z-index: 1000; /* Permet de positionner le menu déroulant au dessus de la partie du dessous */
/*}*/

.Menu6 {
	grid-area: Menu6; /* on positionne cet élément dans la grille selon le 'grid-template-area */
	z-index: 1000; /* Permet de positionner le menu déroulant au dessus de la partie du dessous */
}

.Menu7 {
	grid-area: Menu7; /* on positionne cet élément dans la grille selon le 'grid-template-area */
	z-index: 1000; /* Permet de positionner le menu déroulant au dessus de la partie du dessous */
}

.Menu_topbar dl {
	height: 40px; /* hauteur */
	width: 150px; /* Largeur */
	display: block; /* rend cet élément 'inline' en élément 'block' */
		
}


.Menu_topbar dt {
	height: 40px; /* hauteur */
	width: 200px; /* Largeur */
	display: block; /* rend cet élément 'inline' en élément 'block' */
	font-family:var(--police2); /*Nature de la police d'écriture en utilisant une variable*/
	color:var(--couleurPassage); /*Couleur du texte*/
	font-size:var(--taillePolice5b); /*Taille de la police d'écriture*/
	text-align: center; /*On aligne au centre le texte - Au centre des CSS grid */
	cursor: pointer; /* afin que la souris devienne une main et non un pointeur */
		
}
	
.Active  {
	text-decoration: underline; /* Souslignement du texte */

}



.Menu_topbar dd {
	height: auto; /* hauteur */
	width: 300px; /* Largeur */
	display: none; /* On rend cet élément invisible */
	font-family:var(--police2); /*Nature de la police d'ecriture en utilisant une variable*/
	color:var(--couleurPassage); /*Couleur du texte*/
	font-size:var(--taillePolice5b); /*Taille de la police d'écriture*/
	text-align: center; /*On aligne au centre le texte - Au centre des CSS grid */
	cursor: pointer; /* afin que la souris devienne une main et non un pointeur */
		
}


.Menu_topbar ul li {
	background-color:var(--couleurBandeau) ; /* Couleur de fond */
	line-height: 60px; /* Hauteur du saut de ligne */
	border-bottom: 0.5px dotted var(--couleurPassage); /* Bordure haute */
}

.Menu_topbar ul li a {
	
	font-family:var(--police2); /*Nature de la police d'ecriture en utilisant une variable*/
	color:var(--couleurPassage); /*Couleur du texte*/
	font-size:var(--taillePolice5b); /*Taille de la police d'écriture*/
	text-align: center; /*On aligne au centre le texte - Au centre des CSS grid */
	text-decoration: none;/* On enleve le soulignement des liens */
}


/* Effet sur le survol des menus pour faire apparaitre les menus déroulants */
.Menu_topbar dl:hover dd {
	display:block; /* rend cet élément 'inline' en élément 'block' */
	
}


.Menu_topbar dl:hover dt {
	color:var(--couleurBandeau); /*Couleur du texte*/
	background-color:var(--couleurPassage) ; /* Couleur de fond */
	border-bottom: 0.5px dotted var(--couleurPassage); /* Bordure haute */
		
}


/* Menu Navigation de second niveau */

.Niveau_2 ul{
	display: none; /* On rend cet élément invisible */
	
}

.Niveau_2 ul li {
	line-height: 35px;
}

.Niveau_2 li:hover ul {
	display: block; /* rend cet élément 'inline' en élément 'block' */
	width:200px; /* Largeur */
	margin-left: 300px; /* Marge Gauche afin de décaler vers la droite */
}

.NotVisible {
    display: none;   

}



/* --- Variables Spécifiques aux Média Query */
/* --- Pour Ecran --- */
@media screen and (max-width: 1700px) {

	body {
		line-height: 235%;/*hauteur de ligne*/
	}

	.Header-BandeauCentre {
		grid-template-columns:var(--dim8)  1fr 6fr 1fr var(--dim8); /* permet de définir 6 colonnes avec des largeurs en pixels et en fractions */
		/* on Détermine le nom des zones dans la 'grid area' */
		grid-template-areas: 
		"Photo1 . Citation . Photo2"
	}
	
	.Header-BandeauCentre .Citation {
		font-size:var(--taillePolice6b); /*Taille de la police d'écriture*/
		margin: 5px auto 0px auto; /* Marge Haute Droite Basse Gauche */
	
	}

}

/* --- Pour Ecran --- */
@media screen and (max-width: 1450px) {

	.Header-BandeauCentre {
		grid-template-columns:var(--dim8)  1fr 16fr 1fr var(--dim8); /* permet de définir 6 colonnes avec des largeurs en pixels et en fractions */
		/* on Détermine le nom des zones dans la 'grid area' */
		grid-template-areas: 
		"Photo1 . Citation . Photo2"
	}

	.Header-BandeauCentre .Citation {
		font-size:var(--taillePolice6); /*Taille de la police d'écriture*/
		margin: 5px auto 0px auto; /* Marge Haute Droite Basse Gauche */
	
	}

	.Header-BandeauCentre .Citation Cite {
		font-size:var(--taillePolice5); /*Taille de la police d'écriture*/
		margin: auto auto auto 15vw; /* Marge Haute Droite Basse Gauche */
	}

	

}




/* --- Pour Ecran --- */
@media screen and (max-width: 1150px) {

	.Header-BandeauCentre {
		grid-template-columns:var(--dim8)  1fr 50fr 1fr var(--dim8); /* permet de définir 6 colonnes avec des largeurs en pixels et en fractions */
		/* on Détermine le nom des zones dans la 'grid area' */
		grid-template-areas: 
		"Photo1 . Citation . Photo2"
	}
	

	.Header-BandeauSup img {
		height: 70%;
	}

	.Header-BandeauCentre .ImgGauche {
		max-width: 75% ;/* On ne souhaite pas que l'image soit plus grande que ... */
		margin: auto auto auto 5px; /* Marge Haute Droite Basse Gauche */
	}

	.Header-BandeauCentre .ImgDroite {
		max-width: 75% ;/* On ne souhaite pas que l'image soit plus grande que ... */
		margin: auto 5px auto auto; /* Marge Haute Droite Basse Gauche */
	}

	.Header-BandeauCentre .Citation Cite {
		font-size:var(--taillePolice4); /*Taille de la police d'écriture*/
		margin: auto auto auto 15vw; /* Marge Haute Droite Basse Gauche */
	}
	

}

/* Pour Mobile et Tablette */
@media screen and (max-width: 1050px) {
		.Header-BandeauSup img {
		height: 75%;
	}

	.Header-BandeauCentre {
		display: grid; /* Utilisation du module de disposition de grille - Pour le Bandeau Supérieur */
		grid-template-rows:1fr; /* permet de définir 3 lignes avec des hauteurs en fractions */
		grid-template-columns:var(--dim8)  1fr; /* permet de définir 6 colonnes avec des largeurs en pixels et en fractions */
		/* on Détermine le nom des zones dans la 'grid area' */
		grid-template-areas: 
		"Photo1 Citation"
	}

	.Header-BandeauCentre .Citation {
		margin-right: 20px; /* Marge de droite */
	
		}
	

	.Header-BandeauCentre .ImgDroite {
		display:none;
	}

	.Menu_topbar {
		width: 100%; /* Largeur du menu topBar en fonction du contenaire parent */
	}

	.Menu_topbar dl {
		width: 120px; /* Largeur */		
		
	}
	
	.Menu_topbar dt {
		width: 120px; /* Largeur */
		font-size:var(--taillePolice5); /*Taille de la police d'écriture*/
			
	}
		
	.Menu_topbar dd {
		width: 120px; /* Largeur */
					
	}
		
	
	.Menu_topbar ul li a {
		font-size:var(--taillePolice5); /*Taille de la police d'écriture*/
		
	}
	
		
}


/* Pour Mobile et Tablette */
@media screen and (max-width: 752px) {
	
	header {
	width:90%;/*largeur du header par rapport à la la page*/
	margin: auto auto;

	}
	
	
	.Header-BandeauCentre {
	display: grid; /* Utilisation du module de disposition de grille - Pour le Bandeau Supérieur */
	grid-template-rows:1fr; /* permet de définir 3 lignes avec des hauteurs en fractions */
	grid-template-columns:var(--dim7b)  1fr; /* permet de définir 6 colonnes avec des largeurs en pixels et en fractions */
	
	/* on Détermine le nom des zones dans la 'grid area' */
	grid-template-areas: 
	"Photo1 Citation"
	}
	
	.Header-BandeauCentre .Citation {
	font-size:var(--taillePolice5b); /*Taille de la police d'écriture*/
	margin: 10px 20px 0px auto; /* Marge Haute Droite Basse Gauche */

	}

	.Header-BandeauCentre .Citation Cite {
		font-size:var(--taillePolice4); /*Taille de la police d'écriture*/
		margin: auto auto auto 5vw; /* Marge Haute Droite Basse Gauche */
	}
	
}

@media screen and (max-width: 650px) {

	.Header-BandeauCentre .Citation {
		font-size:var(--taillePolice5); /*Taille de la police d'écriture*/
		margin: 10px 20px 0px auto; /* Marge Haute Droite Basse Gauche */
	
		}
	
		.Header-BandeauCentre .Citation Cite {
			font-size:var(--taillePolice4); /*Taille de la police d'écriture*/
			margin: auto auto auto 5vw; /* Marge Haute Droite Basse Gauche */
		}

	.Menu_topbar {
		width: 100%; /* Largeur du menu topBar en fonction du contenaire parent */
		
		
	}
	.Menu_topbar dl {
		width: 80px; /* Largeur */		
		
	}
	
	.Menu_topbar dt {
		width: 100px; /* Largeur */
		font-size:var(--taillePolice5); /*Taille de la police d'écriture*/
			
	}
		
	.Menu_topbar dd {
		width: 100px; /* Largeur */
					
	}
		
	
	.Menu_topbar ul li a {
		font-size:var(--taillePolice5); /*Taille de la police d'écriture*/
		
	}

	
	
}








/* -------- Fin de la partie média query  --------------*/