/* 
Page de style pour le premier site en html/css.
NSI Arago
Sur une idée originale de Jean-Manuel Meny et Ludovic Fasquelle

*/

 
html{ 
    font-size: 20px; /* taille de référence des fontes */
}

header{
    height: 200px; /* on impose la hauteur du header pour la photo */
    background-image: url('images/lol.jpg');
    text-align:center;
	
	
	
    color: white;
    font-weight: bold;
	grid-area: header;
	width: 100%;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	background-size: cover;
	line-height: 0px;
	
	
transition: height 0.3s /* une petite animation en lien avec le hover plus bas*/
}

header:hover {
    height: 225px; /* quand la souris passe, le menu a une petite aniamtion de déroulement */
}




body{
	display: grid;
	grid-template-columns: 0.7fr 2fr ;
	grid-template-rows:200px auto auto auto;
	grid-gap:0px;
	
	
	background: rgb(69,69,69);
background: radial-gradient(circle, rgba(69,69,69,1) 0%, rgba(153,153,153,1) 24%, rgba(120,120,120,1) 38%, rgba(112,112,112,1) 55%, rgba(101,101,101,1) 78%, rgba(139,139,139,1) 100%);
	
	
    width: 80%; /* occupe 80% de la page en largeur */
    margin: 0 auto; /* auto permet ici de centrer le body en laissant marge gauche et marge droite identiques */
	grid-template-areas: 
					" header header "
					" a d "
					" b c "
					" foot foot"
					
					
}

/* je chnage le boddy de la page histoire car je ne veux pas la meme grille que celle de la page principale */
body.histoire {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 215px auto auto auto;
    grid-gap: 10px;
	grid-template-areas:
					" header header header "
					" x y z"
					
					" foot foot foot"
}

/* Idem avec la source */
body.sources {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 215px auto auto auto;
    grid-gap: 10px;
	grid-template-areas:
					" header header  "
					" o p"
					
					" foot foot"
}





#a {
grid-area: a;

}
#b {
grid-area: b;
padding:0px
}
#c {
grid-area: c;

background-color: hsl(359 0% 0% / 0.62);

border-top-right-radius:20px ;
border-bottom-right-radius:20px ;
border-bottom-left-radius:20px ;

}





/* La barre de navigation */
nav{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr ;
	grid-template-areas: 
					"Home Histoire Sources Bonus" 
	
}

/* les menus auront cette taille */
nav p {
    line-height: 80px; 

}
/* les liens  */
nav a {
    color: white; /*  le texte est blanc */
    text-decoration: none; /* Supprime les soulignements de lien */
}


/* atribus des menus */
.les-menus{
	font-size:1.7rem;
	Font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	transition: font-size 0.3s, opacity 0.3s; /* transition  pour la taille de police et l'opacité */
	padding:0px;
	
}

/* animation des menus */
.les-menus:hover {
    font-size:4rem;
	opacity: 0.5;
	
}
 
#insta{
	color:white;
}


h1{
    font-size: 2rem; /* 2rem = 2 fois la taille de référence, soit 40px */
    padding-top: 1rem;  
}
h2{
    font-size: 1.5rem;
    border: 5px ridge #aaa;
    text-align:center;
    border-radius: 5px;
	border-top-left-radius:15px; border-top-right-radius:15px;
	padding: 0.2rem;
	color:#E5E5E5;
	
	margin-left: 10px; /* bien alligner l'en tete */
    margin-right: 10px;
}


/* c'est pas uniquement pour le nom de l'élève, mais pour le titre de chaque page  */
#eleve{
    font-size: 60px;
	Font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
}


#image-mayess{
	border-top-left-radius:20px;
	border-bottom-left-radius:20px
}



#Menu-Home{
	grid-area:Home
}

#Menu-Histoire{
	grid-area: Histoire
}

#Menu-Sources{
	grid-area:Sources
}

#Menu-Bonus{
	grid-area:Bonus
}

/* pour donner forme a la "discution" */

.blabla{
	
	margin-left: 20px;
	margin-right: 20px;
	Font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	font-size:0.8rem
	
}


/* pour donner forme a la "discution" du coté des questions */
.blabla-question {
	text-align: justify;
    
	color: white;
    background-color: #121111;
    padding: 5px; 
	padding-left:10px;
	padding-right:12px;
    max-width: 600px; /* Limite à 600px */
	width: fit-content;
	
	border-top-left-radius:20px ;
	border-top-right-radius:20px ;
	border-bottom-right-radius:20px ;
}

/* pour donner forme a la "discution" du coté des reponses */
.blabla-reponse {
    text-align: justify;

    color: black;
    background-color: #EFEFEF;
    margin-left: auto;
    max-width: 600px; /* Ajout de cette propriété */
    width: fit-content;
    padding: 5px;
	padding-right:10px;
	padding-left:12px;
	
	border-top-left-radius:20px ;
	border-top-right-radius:20px ;
	border-bottom-left-radius:20px ;
	
}








/* c'est pour styliser les elements de histoire */

.case-histoire{
	text-align: justify;
	
	Font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	background-color: hsl(359 0% 0% / 0.62);
	border-radius:20px;
	color: white;
	
	padding:20px;
	
}

/* c'est pour assigner a chaque boite une plase dans la grille */
#x {
grid-area: x;

}
#y {
grid-area: y;

}
#z {
grid-area: z;

}



/* c'est pour styliser les elements de source */

.case-sources{
	text-align: justify;
	
	Font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	
	border-radius:20px;
	color: white;
	
padding:20px;
}
	
/* c'est pour assigner a chaque boite une plase dans la grille */
#o {
grid-area: o;

}

#p {
grid-area: p;

}

/* c'est pour donner une certaien couleurs a totu les liens de la page source  */

.Liensource{
	color:white
}


#lisence{
	padding:10px;
	font-size:0.5rem
}



footer{
    text-align:center;
    margin: 2rem;
	grid-area: foot
}
footer a{
    
    text-decoration: none;
    background-color:#5F5F5F;
    color:  #dedede;
    border-radius: 20px;
    padding: 5px;
}