@charset "UTF-8";
*{
	box-sizing: border-box; /* */
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6,p{
	padding-bottom: 10px; /* */
}
#hamburger{
		position: fixed;	
		right: 2%;
		}
		
#hamburger2{
		position: fixed;	
		right: 2%;
		}
#pageentiere{
    color: #FFFFCC; /* cara&ctère jaune pâle*/
	background: #05273F; /*couleur bleu océan*/
	font-family: Arial, Helvetica, sans-serif; 
	}
header{
	background:#05273F; /*bleu très foncé*/
	text-align: center;
	padding:8px;
	font-family: Arial, Helvetica, sans-serif; 
	
}
#photo{
   background:#05273F; /*bleu très foncé*/
	text-align: center;
	
	}

 

nav{
	text-align: center;
	padding:5px 0;
	border:1px solid #24460C;/* ???*/
	background: #C1130F; /*pour quand une case prend deux ligne, que la couleur de fond soit ok*/
	display: grid;
	margin:0;
	padding: 0;
	grid-template-columns: repeat(2,1fr);/*???????*/
	grid-template-rows: repeat(4,1fr);/*???????????*/
	list-style-type: none;/*????????*/
	font-size: 130%;
	}	
	}
		nav div {
		padding: 10px;
		max-height: 50px;/*??????????*/
	}
	
	#accueil { 
	background-color: #FD6235;
	}
	
	#livre {
	background-color: #990033;
	}
	
	#suite {
	background-color: #C1130F;
	}

	#verssite {
	background-color: #D94D11;
	}
	
	#quatrieme {
	background-color: #D94D11;
	}
	
	#tabledesmatieres {
	background-color: #C23C1F;
	}
	
	#contact {
	background-color: #990033;
	}
	
	#compresse{
	background-color: #C1130F;
	}
	
	#texte{
	min-height: 100vh;
	background:#00445E;
	padding: 20px;
	text-align: justify;
	font-size: 90%	
}

#titre{
	background:#05273F; /*bleu très foncé*/
	text-align: center;
	padding:8px;
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 300%;
	
}

#sommaire{
	background:#05273F; /*bleu très foncé*/
	padding: 20px;
}
#sommaire li{
	border:1px solid #24460C;
}

@media(min-width:480px){/*480 480 480 480 480 480 480 480 480 480 480 */
	
	nav {
		display: grid;
		margin:0;
		padding: 0;
		grid-template-columns: repeat(4,1fr);/* 4 cases par colonne*/
		grid-template-rows: repeat(2,1fr);/*2 cases par rangée*/
		list-style-type: none; /*???????????*/
		font-size: 130%;
	}
	#tabledesmatieres {
	font-size: 88% /*taille réduite à cause des pages FR "rencontrons-nous" étant trop long*/
	}
	
	#compresse {
	font-size: 80% /*taille réduire à cause des pages ES "para descubrir" étant trop long*/
	}
	
	#verssite {
		font-size: 80% /*taille réduite à cause des page EN "stories & tales" étant trop long*/
	}
		
	
}
@media(min-width:820px){ /*820 820 820 820 820 820 820 820 820 820 820 820 820 820 820 820 820 820 */

	#hamburger {
		display: none;
	}
	#pageentiere{
		width:100%;
		height:100vh;
		margin:0 auto;
		display: grid;
		grid-template-columns: 30% 70%;/*c'est moi qui l'ai mis, mais je pense que ça n'a pas de sens*/
		/*le but était que la page puisse s'allonger à l'infini à la verticale, mais pourr le nombre de colonne*/
		/*je ne pige pas, sauf l'idée que je puisse choisir un jour de mettre plus de colonnes dans la barre de navigation*/
		grid-template-rows: 2fr 2fr 9fr;/*idem je ne pige pas trop, mais ça ne samble pas avoir de conséquences*/
	}
	#photo { /* ???????????????ici ya un truc problématique pour la place de la photo, sa taille, et le fait qu'elle reste entière*/
	    grid-column: 1;
		grid-row:1/4 ;
		}
		
	#profitcover { /* J'ai créé cette div pour permettre d'éloigner la photo du top, car entre 820 et 1000px */
	/*la barre de navigation est trop épaisse et descend sous la photo, et ça fait un énorme décalage et fout en l'air */
	/*l'aspect structuré du site*/
		 padding-top: 15px; 
}

	#texte {
		font-size: 110%;
	}
	
	#sommaire{
		grid-column: 1;
		grid-row: 3/4;
	}
	
	header{
		grid-row:1;
		grid-column: 2;
	}
	
	nav{
		display: grid;
		height: 100%;
		grid-row: 2;
		grid-column:2;
		justify-content: center;
		align-items: center;
	}
	
	#texte{
	    grid-row: 3;
		grid-column: 2;
		overflow: auto; /* pour avoir l'ascenseur à droite*/	
	}
	#sommaire ul{
		/*list-style-type: none; /*????????*/
	}

@media(min-width:1000px) /* 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 */
	

@media(min-width:1300px){

	body { 
		background-color : #05273F;
	}
	
	#pageentiere{
		width:80%; /* ça c'est pour que le site n'occupe que 80% de la largeur de l'écran*/
		/*????????????????? Est-ce que tout ce qui suit ne peut pas être supprimé,*/
		/* attention : je ne peux rien vérifier si je change quoi que ce soit à ce niveau, puisque 1300px > que mon écran*/
		/* la ligne 336 : flex = ???????????????? c'est moi qui l'ai pourtant ajouté, mais j'ignore pourquoi*/
		height:100vh;
		margin:0 auto;
		display: grid;
		grid-template-columns: 10fr 24fr;
		grid-template-rows: 2fr 2fr 9fr;
	}
	#photo {
	    grid-column: 1;
		grid-row:1/4;
		}
	#sommaire{
		grid-column: 1;
		grid-row: 3/4;
		
	}
	header{
		grid-row:1;		
	}
	
	#texte{
	    grid-row: 3;
		grid-column: 2;
		overflow: auto;
	
	}
	#suivre {
		padding-bottom: 10px;
		}
		
	#sommaire ul{
		list-style-type: none;
	}
}

.unnamed1 {/*on sait pas d'ou ça vient , mais tant que ça ne nuit pas, on laisse*/
	background-color: #FD6235;
}