/* Reset Margin et Padding */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* Reset Margin et Padding */
 }
 
/* ---------------------------------------------------- */	

/* --------------- Debut page principale --------------- */

body { 	
	font-family: Arial, Helvetica Neue, Helvetica, sans-serif; /* Choix Fonts */
	background-image: url("frame/Image-Acceuil2.png"); /* image de fond  */
	background-position: 50%;/*  position image */
	background-size: 80%;/* taille image  */
	background-repeat: no-repeat;/* statut image  */
	background-color: black; /*  couleur body */
	background-attachment: fixed;/*  effet sur image */
	display: flex;
	flex-direction: column; /* axe vertical  enfants seront l'un en dessous des autres */
	justify-content: center; /* Centre mon paragraphe3*/
	align-items: center;  /* Centre mon paragraphe3*/
	border: 10px ridge transparent; /* bordure du header */
}

/* -----------------Retour haut de page  --------------- */

/* Shadow Triangle */

.triangle {
	position:fixed;
  display: inline-block;   
  transform: scaleX(2.5);
  color: red; /* couleur origine */
  text-shadow: 
    0 2px 2px black,
    0 10px 4px whitesmoke;
  font-size: 32px;
  top: 85%;
  left: 5%;
  z-index: 10;

}

.retour:hover { background-color: transparent;}

.triangle a { text-decoration: none; color: yellowgreen }

.triangle:hover {
  transition: all 0.2s ease;
  transform: scaleX(2.5) translateY(4px) translatex(-4px);
  text-shadow: 0 1px 1px #4b40fd;
  zoom: 150%;
  top: 80%;
  left: 3.5%;
  z-index: 10;
}

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

/* --------------------- Debut Menu ------------------- */

.nav { 	
	width: 95%; /* Largeur de la section */
	height: 68px; /* Hateur de la Section */
	margin: 0 0 0 0;  /* Marge Exterieur Section */
	padding: 0 0 0 0;  /* Marge Interieur Section */
	box-sizing: border-box; /* Reset Margin et Padding */
	background-color: transparent; /* Couleur Fond Section 1 */
	border: 10px ridge transparent; /* bordure des sections */
}

.menu {  position: fixed; /* Positionne mon menu en grand */
	z-index:10; 
	width: 600px; 
	height:50px; 
	background-color:transparent; 
	/* centrer elements */
	top: 8%; left: 48%; /* à 50%/50% du parent référent */
	transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
}


/* Style titre menu en grand */	
.navigation, .navigation ul { margin: 0; padding: 0; list-style: none; }

/* Style sous menu en grand */
.navigation li { 
	display: inline-block; 
	padding: 10px 10px 10px 10px;
	position: relative; font-size: 15px; 
	border : #9c7c58 ridge 1px; background-color:#CBBCA8;
	box-shadow: black 2px 2px 4px ;  /* ombre texte menu */
		margin-left: auto; /* centrer elements */
	margin-right: auto; /* centrer elements */
		left: 12%; /* à 50%/50% du parent référent */
}

/* Style sous menu en grand */
.navigation a { display: inline-block; vertical-align: top; 
	width: 135px; height: auto; text-align: center; 
	font-size : 2.0em; background: transparent; 
	}

/* Positionnement menu et sous menu en grand */
.navigation ul { display: none; position: absolute; 
	background: #cab9a5; z-index : 33; }


/*  */
.navigation li:hover > ul { display: block; left: 0px; }

/*  */
.navigation li li:hover > ul { left: 150px; top: 0; }

/* Taille texte sous menu */
.navigation li li { font-size : 0.7em; background-color: #E1DFCE; }

/* Surligne les liens */
.navigation a:hover { color: #bd0303; background: #fcda0f; }

/* ------------------------- Fin Menu ------------------------- */



/* --------------- Debut Mise en page principale --------------- */

a {
	text-decoration: none; /* Suprime le soulignement genere par Menu */
	color: black; /* Couleur des Liens */
	/* font-weight: bold; /* Liens en Gras */
 }

 a:hover {
	background-color: black;
	margin: 0 0 0 0;  /* Marge Exterieur header */
	padding: 10px 10px 10px 10px;  /* Marge Interieur header */
 }

 .priorite {
	text-decoration: none; /* Suprime le soulignement genere par Menu */
	background-color: blue;
	color: yellow; /* Couleur des Liens */
	/* font-weight: bold; /* Liens en Gras */
 }
 

.titreh1 {
	width: 90%; /* Largeur de la section */
	height: auto; /* Hateur de la Section */
	margin: 10px 10px 10px 10px;  /* Marge Exterieur Section */
	padding: 0.5em 0 0.5em 0;  /* Marge Interieur Section */
	background-color: transparent; /* Couleur Fond Section 1 */
	border: 10px ridge transparent; /* bordure des sections */
	color: wheat;
	text-shadow: goldenrod 0.4em 0.4em 1.0em; /* ajoute des ombres au texte */
	/* définissent la distance de l'ombre par rapport au texte. 
	<decalage-x> définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. 
	<decalage-y> définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. 
	Si les deux valeurs sont à 0, l'ombre sera placée exactement derrière le texte, 
	bien qu'elle puisse être partiellement visible du fait de l'effet du <rayon-de-flou>). */
	
	/* centrer elements */
	margin: auto;
	overflow: hidden;
	text-align: center;
	font-size: 1.5rem; /* Taille ecriture text */
 }

 .titreh2 {
	width: 90%; /* Largeur de la section */
	height: auto; /* Hateur de la Section */
	margin: 10px 10px 10px 10px;  /* Marge Exterieur Section */
	padding: 0.5em 0 0.5em 0;  /* Marge Interieur Section */
	background-color: transparent; /* Couleur Fond Section 1 */
	color: wheat;
	text-shadow: goldenrod 0.4em 0.4em 1.0em; /* ajoute des ombres au texte */
	margin: auto;
	text-align: center;
	border: 10px ridge transparent; /* bordure des sections */
	backdrop-filter : blur(8px);
	margin: auto ; 
	overflow: hidden;
 }

 .paragraphe_0 {
	width: 90%; /* Largeur de la section */
	height: auto; /* Hateur de la Section */
	padding: 0 0 0 0;  /* Marge Interieur Section */
	background-color: transparent; /* Couleur Fond Section 1 */
	border: 10px ridge transparent; /* bordure des sections */
	backdrop-filter : blur(8px);
	margin: auto ; 
	overflow: hidden;
	font-size: 22px; /* Taille ecriture text */
 }

 .paragraphe {
	width: 90%; /* Largeur de la section */
	height: auto; /* Hateur de la Section */
	padding: 0 0 0 0;  /* Marge Interieur Section */
	background-color: grey; /* Couleur Fond Section 1 */
	border: 10px ridge #404040; /* bordure des sections */
	backdrop-filter : blur(8px);
	margin: auto ; 
	overflow: hidden;
	font-size: 22px; /* Taille ecriture text */
 }

 .flotte { /* Permet de faire flotter le texte */
	width: 50%; /* Largeur de la section */
	height: 100%;
	float: left;
} 

.opak
{
   opacity: 0.6; /* opacite du texte */
}

 p { padding: 20px 20px 20px 20px;} /* Crée les marges interieure */

 hr { height: 1px; 
	margin: 1em 4em 1em 4em; /* marge exterieur */ 
	padding: 0 0 0 0; /* marge interieur */
	color: #cab9a5; 
	background-color: #9c7c58; 
	box-shadow: 2px 2px 3px #cab9a5;
}

.hr-courte { height: 2px; 
	margin: 2em 10em 2em 10em; /* marge exterieur */ 
	padding: 0 0 0 0; /* marge interieur */
	color: #cab9a5; 
	background-color: #9c7c58; 
	box-shadow: 2px 2px 3px #cab9a5;
}

.White { background-color: white;
    color: black; opacity: 0.6; }

 .espacetop { margin-top: 5px; } /* Crée les marges interieure */
 .espacebottom { margin-bottom: 5px;  } /* Crée les marges interieure */
 
/* 
    un id # s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page
    une classe . peut caractériser plusieurs objets (identiques ou non)
 */

 /* --------------- Fin Mise en page principale --------------- */

section {
	width: 95%; /* Largeur de la section */
	height: auto; /* Hateur de la Section */
	margin: 0 0 0 0;  /* Marge Exterieur Section */
	padding: 0 0 0 0;  /* Marge Interieur Section */
	box-sizing: border-box; /* Reset Margin et Padding */
	background-color: transparent; /* Couleur Fond Section 1 */
	border: 10px ridge transparent; /* bordure des sections */
 }
 
 .section2 {
	width: 90%; /* Largeur de la section */
	height: auto; /* Hateur de la Section */
	margin: 0 0 0 0; /* Marge Exterieur Section */
	padding: 0 0 0 0; /* Marge Interieur Section */
	background-color: grey; /* Couleur Fond Section 1 */
	border: 10px ridge #404040; /* bordure des sections */
	backdrop-filter : blur(8px);
	margin: auto ;
	font-size: 22px; /* Taille ecriture text */
 }

 /*.feuille {
	background-image : url("frame/FeuillePC.png");
	background-position: center;
	background-size: cover;
	padding-top: 3px;
 } */

 .section3 {
	width: 90%; /* Largeur de la section */
	height: auto; /* Hateur de la Section */
	margin: 10px 10px 10px 10px;  /* Marge Exterieur Section */
	padding: 0 0 0 0;  /* Marge Interieur Section */
	background-color: grey; /* Couleur Fond Section 1 */
	border: 10px ridge #404040; /* bordure des sections */
	backdrop-filter : blur(8px);
	margin: auto ;
	font-size: 22px; /* Taille ecriture text */
 }

 .section4 {
	width: 90%; /* Largeur de la section */
	height: auto; /* Hateur de la Section */
	margin: 10px 10px 10px 10px;  /* Marge Exterieur Section */
	padding: 0 0 0 0;  /* Marge Interieur Section */
	background-color: grey; /* Couleur Fond Section 1 */
	border: 10px ridge #404040; /* bordure des sections */
	backdrop-filter : blur(8px);
	margin: auto ;
	font-size: 22px; /* Taille ecriture text */
 }

 /* --------------- Fin en page principale --------------- */


/* Debut diaporama à défilement en boucle */

.slider1 {
   background-color: green;
/* A MODIFIER */   /*width: 36.5%; /* taille Slider Vertical */ 
/* A MODIFIER */   width: 49%; /* taille Slider Horizontal */
   height: 50%; /* */
   margin: 0 30px 0 20px;  /* Marge Exterieur Section */
   overflow: hidden;
   border: 10px solid white;
   box-shadow: black 4px 4px 12px;  /* ombre boite */ 
/* A MODIFIER */      margin: 1em 1em 1em 0; /* Crée les marges ecterieur */
}

.slider1 .slider
{
   display: flex;
/* A MODIFIER */
   animation: slider1 16s infinite ease-in-out;
}

.slider1 img
{
background-color: yellow;
flex-shrink: 0;
padding: 0px 0;
width: 100%;

/* taille Slider Vertical */ 
height: 100%; /* taille Slider Vertical */ 

/* taille Slider Horizontal */
/*height: 15.9em; /* Permet d'adapter toutes les images en ajustant cette valeur */
/*object-fit: scale-down; /* fill - L'image doit respecter les dimensions données, et tant pis si elle est déformée ;
    contain - L'image doit être contenue dans les dimensions données, mais respecter son ratio d'origine ;
    cover - L'image doit être contenue dans les dimensions données et s'adapter afin de ne laisser aucun espace blanc ;
    none - L'image doit respecter les dimensions, mais elle n'est pas redimensionnée : on garde la taille d'origine et on coupe juste l'image lorsqu'elle dépasse de la largeur et la hauteur précisées ;
    scale-down - C'est à peu près pareil que pour contain et none, à la différence que cette valeur choisira la taille au rendu final la plus petite (ce qui veut dire que si contain permet d'avoir une image plus petite que none, scale-down choisira d'afficher l'image comme si l'on précisait contain).*/

}

/*
Pour un diaporama de 8 images.
Calcule a effectuer:

2sec par image soit 2x8=16
donc remplacer par votre valer =>
   => animation: slider1 16s infinite ease-in-out;

   ------------------------------------------------

5% par transition
soit 5x8=40%  de transition

reste divise par 
100-40=60%

60%/nbr photo soit 8 = 7.5%

Avec ces deux valeur on adapte l'echelle du temps 
et le nombre de photos

*/

@keyframes slider1 {
	0%,
	10%{ /* duree visionnage photo */
		transform: translateX(0);
	}
	15%, /*  plus transion */
	25%{ /* duree visionnage photo */
		transform: translateX(-100%);
	}
	30%, /* plus transion */
	40%{ /* duree visionnage photo */
		transform: translateX(-200%);
	}
	45%, /* plus transion */
	55%{ /* duree visionnage photo */
		transform: translateX(-300%);
	}
	60%, /* plus transion */
	70%{ /* duree visionnage photo */
		transform: translateX(-400%);
	}
	75%, /* plus transion */
	85%{ /* duree visionnage photo */
		transform: translateX(-500%);
	}
	90%, /* plus transion */
	100%{ /* duree visionnage photo */
		transform: translateX(-600%);
	}
	}
  /* Fin diaporama à défilement en boucle */
/* ---------------------------------------------------- */	

/* ----- Mise en Forme de mon Menu sur grand ecran ---- */	

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



/* -----------------Retour haut de page----------------------------------- */	

/* Shadow Triangle */

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









  


























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

/* --------------- Menu sur petit ecran --------------- */	

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


/* Menu sur petit ecran */

/* Format de ma page en petit */
@media  only screen and (max-width: 5in) {
	
body{ width: 99%; }

/* Debut Hamburger */
.hamburger { width: 35px; height: 5px; position: fixed; 
	background-color: #9c7c58; margin-left: 1em; margin-top: -1em; }
/* Fin Hamburger */
		
/* Positionne mon menu en petit */

.menu {display: none; 
	position: fixed; 
	width: 200px; height: 210px; 
	top: 10em;
	left:7em;
	background-color:transparent; 
	text-align: center; flex-basis: 100%; }

/* Position sous menu en petit */	
.navigation li:hover ul li { padding: 0 10px 0 10px; left:100px; }

/* Style menu en petit */
.navigation li { 
	padding: 0 6px 0 6px; display: inline-block; 
	 font-size: 15px; 
	border : #9c7c58 ridge 1px; background-color: #CBBCA8;
	margin: 1px 1px ;
 }

/* Style sous menu en petit */
.navigation a { display: inline-block;
	width: 135px; height: auto;
	font-size : 2.0em; background: transparent;
	}
	
/* Positionnement menu et sous menu en petit */
.navigation ul { background: transparent; top:0; z-index:30; }

.titre { width: 150px; height:30px; }
#LeLabel,
.LaCheckBox { display: block; }
.LaCheckBox:checked ~ .menu { display: block; display: flex; flex-wrap: wrap; flex-direction:column; }
.LaCheckBox { opacity: 0; position: absolute; top: 0px; }


h1 { text-align : left; margin-left: 25%; text-shadow : 5px 5px 5px #6f6f6f; color : black; }

p{ padding: 0 20px 0 50px;}

}

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

/* -----------------Retour haut de page----------------------------------- */	
/* Shadow Triangle */

.triangle {
	position:fixed;
  display: inline-block;   
  transform: scaleX(2.5);
  color: #BADA55; /* couleur origine */
  text-shadow: 
    0 2px 2px rgba(255,255,255,0.7), 
    0 10px 4px rgba(0,0,0,0.5);
  font-size: 32px;
  top:85%;  padding: 20px;
}

.triangle a { text-decoration: none; color: #cbbca8 }

.triangle:hover {
  transition: all 0.2s ease;
  transform: scaleX(2.5) translateY(4px);
  text-shadow: 0 1px 1px black;
}
/* ---------------------------------------------------- */
 
 /* -------------------------------------- */

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