@charset "UTF-8";
*{
	box-sizing: border-box; /* */
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6,p{
	padding-bottom: 10px; /* */
}

h4 {padding-left: 1cm;
}

#hamburger{
		position: fixed;	
		right: 5%;
		}
		
#hamburger2{
		position: fixed;	
		right: 5%;
		}
#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; 
}

#annonceprofit{
	background:#00445E;
}

#cadreimageprofit{
	background:#00445E;
}

img{
max-width: 100%;
	height: auto;
	 display: block;
	 margin: auto;
}

#imageprofit{
max-width: 50%;
	height: auto;
	 display: block;
	 margin: auto;
}
  
#photo{
    background:#00445E;
	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;
	}
	
	#articles {
	background-color: #990033;
	}
	
	#nouveautes {
	background-color: #C1130F;
	}

	#rencontre {
	background-color: #D94D11;
	}
	
	#présentation {
	background-color: #D94D11;
	}
	
	#contes {
	background-color: #C23C1F;
	}
	
	#adecouvrir {
	background-color: #990033;
	}
	
	#contact{
	background-color: #C1130F;
	}
	
	#texte{
	min-height: 100vh;
	background:#00445E;
	padding: 20px;
	text-align: justify;
	font-size: 90%	
}
/*les 5 blocs qui suivent concernent uniquement les pages d'accoueil FR EN ES*/
#Gandhi {
		width:340px; 
		height:70px; 
		position: relative;
		top: 15px;
		border-radius: 20px / 20px ; /*coins arrondis*/
		padding-left: 15px; 
		padding-right: 15; 
		padding-top: 15; 
		padding-bottom: 15; 
		font-size: 15px; 
		background-color: #990000; 
		border: 1px none #000000; /*????????*/
	}
	
#suivre {
		width:270px; 
		/*les 5 attributs suivants permettent à la citation d'empiéter légèrement sur la précédente et d'être suffisamment à droit*/
		position: relative;
		height: auto;
		padding-bottom: 10px;
		margin-top: 30px;
		right : 15%;
		border-radius: 20px / 20px ; /*coins arrondis*/
		padding-left: 15; 
		padding-right: 15; 
		padding-top: 15; 
		padding-bottom: 15; 
		font-color: #33FFCC; 
		font-size: 14px; 
		background-color: #FFCF6A; 
		border: 1px none #000000; 
	}

	#Einstein {
		width:380px; 
		height:75px; 
		/*les 2 attributs suivants permettent à la citation d'empiéter légèrement sur la précédente et d'être suffisamment à droit*/
		position: relative;
		top: 55px;
		border-radius: 20px / 20px ; /*coins arrondis*/
		padding-left: 15px; 
		padding-top: 15; 
		padding-bottom: 15; 
		padding-right: 15;
		background-color: #F39C18; 
		border: 1px none #000000;
		font-size: 15px; 	
	}
	
	#Hodgson{
		position: relative;
		border-radius: 20px / 20px ; /*coins arrondis*/
		margin-top : 45px;
		padding-left: 15px; 
		padding-right: 15; 
		padding-top: 25; 
		padding-bottom: 15; 
		font-color: #33FFCC; 
		font-size: 15px; 
		background-color: #FF6600; 
		border: 1px none #000000;
	}
	
	#intro {
		posiiton: relative;
		border-radius: 20px / 20px ; 
		padding-left: 15px;  
		padding-bottom: 30; 
		padding-right: 15; 
		background-color: #6C0000; 
		border: 1px none #000000;
		}
		
		/*cette div concerne la fin de la partie texte sur les droits d'auteur ou sur la traduction*/
	#droits {
		position: relative;
		margin-bottom: 25px;
		margin-left: 40px;
		margin-right: 40px;
		font-size: 12px; 
		font-family: Arial, Helvetica, sans-serif;
		padding : 15px;
		border: double;
		border-color: #FFFFCC;
		}

#sommaire{
	background:#00445E;
	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%;
	}
	
	#rencontre {
	font-size: 88% /*taille réduite à cause des pages FR "rencontrons-nous" étant trop long*/
	}
	
	#adecouvrir {
	font-size: 80% /*taille réduire à cause des pages ES "para descubrir" étant trop long*/
	}
	
	#contes {
		font-size: 80% /*taille réduite à cause des page EN "stories & tales" étant trop long*/
	}
	
	#suivre { /*ne concerne que les pages d'accueil*/
		grid-row:3; /*les 3 div : suivre, Gandhi et Einstein, st placée ds le même grid pr rendre la superposition possible*/
	}
	
	#Gandhi {
		grid-row:3;
	}
	
	#Einstein {
		grid-row:3;
		top: 40px;
	}
	
	#Hodgson{
		grid-row:4;
		top: 10px;
	}
	
	#intro {
		grid-row:5;
		}
	#explic {
		grid-row:6;
		position: relative;
		}
}
@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: 10fr 24fr;/*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*/
	}
	
	#titres{
	display: grid;
	grid-template-columns: repeat(6,1fr);/*???????*/
	grid-template-rows: repeat(1,1fr);/*???????????*/
}

#titresite{
	grid-column:1/ span 4;
}

#annonceprofit{
	background:#00445E;
	grid-column:5;
	height: auto;
	}

#cadreimageprofit{
	background:#00445E;
	grid-column:6;
	display: flex;
	align-items: center;
}

#imageprofit{

max-width: 100%;
	height: auto;
	
	 
 
	 margin: auto;
	 }

	#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 ;
		}
		
	#colibri { /* 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: 140%;
	}
	
	#sommaire{
		grid-column: 1;
		grid-row: 3/4;
		overflow: auto; /*pour avoir l'ascenseur*/
	}
	
	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; /*????????*/
	}
	/*les 6 div qui suivent, ne concernent que les pages d'accueil (suivre, Gandhi, Einstein, HOdgson, Intro, Explic)*/
	/* les définitions des margins, padding etc. je les ai introduites par essais et erreurs, j'en ignore totalement la logique*/
	/* ou presque*/
	#Gandhi { 
		grid-column: 2;
		grid-row:3;
		top: 6%;
		margin-left: 15%;	
	}
	
	#suivre {
		grid-column: 2;
		grid-row:3;
		height: auto;
		margin-top: 50px;
		margin-left: 50%;
		padding-bottom: 20px;	
	}
	
	#Einstein {
		grid-column: 2;
		grid-row:3;
		margin-top: 50px;
	}
	
	#Hodgson{
		grid-column: 2;
		grid-row:4;
		margin-top: 20px;
	}
		
	#intro{
		grid-column: 2;
		grid-row:5;
	}
	#explic {
		grid-column: 2;
		grid-row:6;
	}
}
@media(min-width:1000px) /* 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 */
	/* idem  pr les 3 div : les définitions des margins et padding etc, j'en ignore une partie de la logique, ms ça fonctionne +/- */
	#Gandhi{
		margin-right: -55%;
	}
	
	#suivre{
		margin-left: 50%;
		margin-top: 10px;
	}
	
	#Einstein{
		margin-top: -27px;
		margin-left: 0%;
	}

@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;
		overflow: auto;
	}
	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;
}