:root {
	/** référence à la balise racine du site **/

	/** définition des variables: */
	--couleur-h: 180deg; /** hue: teinte principale du site */
	--couleur-s: 85%; /** saturation: vibrance de la couleur */

	/** la palette du site: */
	--couleur-niveau1: hsl(var(--couleur-h) var(--couleur-s) 94%);
	--couleur-niveau2: hsl(var(--couleur-h) var(--couleur-s) 84%);
	--couleur-niveau3: hsl(var(--couleur-h) var(--couleur-s) 74%);
	--couleur-niveau4: hsl(var(--couleur-h) var(--couleur-s) 44%);
	--couleur-niveau5: hsl(var(--couleur-h) var(--couleur-s) 24%);
	--couleur-niveau6: hsl(var(--couleur-h) var(--couleur-s) 14%);
	--couleur-niveau7: hsl(var(--couleur-h) var(--couleur-s) 5%);

	/** on désire un défilement fluide */
	scroll-behavior: smooth;
}

body {
	/** arrière-plan avec des pattes de chat */
	background: linear-gradient(to bottom, hsl(var(--couleur-h) var(--couleur-s) 94% / .7) 0%, hsl(var(--couleur-h) var(--couleur-s) 94% / 1) 100%)
		, url(../images/mosaique.png), var(--couleur-niveau1);
	background-blend-mode: normal, luminosity, normal;
}

div.wrapper {
	/** classe utilisée pour créer une marge */
	width: 80%;
	max-width: 900px;
	margin: 0 auto;
}



/******************************* en-tête ********************************/

body > header {
	/** l'en-tête principale du site */
	background: var(--couleur-niveau5);
	color: var(--couleur-niveau2);
	--taille-logo: 96px; /** cette variable contrôle la largeur du logo */
}

body > header > div.wrapper > div {
	/** la grille qui contient l'en-tête */
	display: grid;
	align-items: center;
	width: 100%;
	grid-template-areas: "logo titre"
	                     "nav  nav";
	grid-template-columns: calc(var(--taille-logo) + 30px) 1fr;
}

body > header > div.wrapper > div > picture {
	/** le logo de l'en-tête principale du site */
	grid-area: logo;
}

body > header > div.wrapper > div picture > img {
	width: var(--taille-logo);
	height: var(--taille-logo);
}

body > header > div.wrapper > div h1 {
	/** le titre de l'en-tête principale du site */
	grid-area: titre;
	font-size: 3em;
	font-family: "Raleway", sans-serif;
	font-weight: 900;
	cursor: default;
}

body > header > div.wrapper > div nav {
	/** le menu de navigation */
	grid-area: nav;
	margin-bottom: 1em;
}

body > header > div.wrapper > div nav > menu {
	/**
	 * la balise <menu> est interprétée comme un <ul> par le navigateur mais
	 * ajoute du contexte pour les lecteurs d'écrans (a11y)
	 */
	--marge-liens: 1.4em; /** cette variable contrôle l'espacement du menu */
}

body > header > div.wrapper > div nav > menu > li {
	/** un élément du menu de navigation */
	display: inline-block;
}

body > header > div.wrapper > div nav > menu > li:not(:first-of-type)::before {
	/** un séparateur du menu de navigation */
	content: "| ";
}

body > header > div.wrapper > div nav > menu > li :any-link {
	/** les liens de éléments du menu */
	display: inline-block;
	color: var(--couleur-niveau3);
	padding: .4em var(--marge-liens) .4em var(--marge-liens);
	text-decoration: none; /** on ne souhaite pas avoir de soulignement */
}

body > header > div.wrapper > div nav > menu > li :any-link:hover {
	background-color: var(--couleur-niveau6);
	color: var(--couleur-niveau1);
}



/******************************* corps de la page ********************************/

body > main {
	margin: 1em 0 1em 0;
	--largeur-photos: 180px; /** la largeur des vignettes */
	--largeur-bordures: 6px; /** la largeur des bordures des vignettes */
}

body > main > section {
	padding: 1em 0 1em 0;
	contain: paint; /** on force les images en float à rester dans leur conteneur */
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 1.2em;
}

body > main > section:not(:first-of-type) {
	margin-top: 1em; /** on souhaite avoir une marge entre les sections */
}

body > main > section > div h2 {
	/** le titre des sections */
	font-family: "Raleway", sans-serif;
	font-weight: 600;
	margin-bottom: .3em;
}

body > main > section > div p {
	/** les paragraphes de texte de nos sections */
	text-align: justify;
}

body > main > section > div p:not(:first-of-type) {
	margin-top: 1em; /** on garde un espace entre les paragraphes */
}

body > main > section > div :any-link {
	/** les liens dans les sections */
	color: var(--couleur-niveau4);
	text-decoration: none;
}

body > main > section > div :any-link:hover {
	text-decoration: underline;
}

body > main > section > div img {
	/* la taille des images est fixe afin d'éviter un mouvement de la page après chargement */
	/* -> on calcule la taille désirée des vignettes en y soustrayant la taille des bordures */
	width: calc(var(--largeur-photos) - (var(--largeur-bordures) * 2));
	height: calc(((var(--largeur-photos) * 3) / 4) - (var(--largeur-bordures) * 2)); /** les photos sont en ratio 4:3 */
	margin: 0;
	padding: 0;
}

body > main > section > div a.gauche, body > main > section > div a.droite {
	text-decoration: none;
	line-height: 0;
	box-shadow: rgb(149 157 165 / .2) 0 8px 24px; /** ombrage doux pour créer un effet vignette */
	margin: 1em 0 .4em 0;
	padding: 0;
	border: double var(--largeur-bordures) var(--couleur-niveau2);
	cursor: zoom-in;
}

body > main > section > div a.gauche {
	/** cette classe fait flotter l'image à gauche */
	float: left;
	margin-right: 1em;
	transform: rotate(-5deg);
}

body > main > section > div a.droite {
	/** cette classe fait flotter l'image à droite */
	float: right;
	margin-left: 1em;
	transform: rotate(+5deg);
}

body > main > section > div a.gauche:hover, body > main > section > div a.droite:hover {
	/** on fait pivoter les vignettes en réaction à la souris */
	transition-property: transform, border-color;
	transition-duration: .2s;
	transform: none;
	border-color: var(--couleur-niveau4);
}

body > main > section:nth-of-type(3) {
	/** la troisième section a un arrière-plan différent */
	background: var(--couleur-niveau2);
}

body > main > section:nth-of-type(3) :any-link:not(.droite) {
	/** on doit ajuster le contraste des liens pour la troisième section (a11y) */
	color: var(--couleur-niveau5);
	text-shadow: 1px 1px 2px var(--couleur-niveau1), -1px -1px 2px var(--couleur-niveau1);
}

body > main > section:nth-of-type(3) a.droite:not(:hover) {
	/** on doit ajuster le contraste de la bordure pour la troisième section (a11y) */
	border-color: var(--couleur-niveau1);
}



/******************************* pied de page ********************************/

body > footer {
	/** le pied de page du site */
	background: var(--couleur-niveau5);
	padding: 1em 0 1em 0;
	min-height: 5em;
	color: var(--couleur-niveau3);
}

body > footer address {
	display: inline-block;
}

body > footer address :any-link {
	/** l'adresse courriel */
	color: var(--couleur-niveau1);
	text-decoration: none;
}