* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	/* Voir: https://github.com/system-fonts/modern-font-stacks#system-ui */
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 16px;
}

body {
	max-width: 100vw;
	/* overflow-x: hidden; */
	--jaune: hsla(56, 100%, 50%, 0.973);
	--jade: hsl(162, 53%, 77%);
	--brun: hsl(25, 78%, 20%);
	--bleu: blue;
	/* Voir: https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/ */
	/*height: 100dvh;*/ 
}

a {text-decoration: none;}
p, li{font-size: 1rem;}

.bold-text {
	font-weight: bold;
}

.navig {
	background: var(--jade);
	background-image: -webkit-gradient(linear, left top, right top, from(#e4afcb), color-stop(0%, #b8cbb8), color-stop(0%, #b8cbb8), color-stop(30%, #e2c58b), color-stop(64%, #c2ce9c), to(#7edbdc));
	background-image: -o-linear-gradient(left, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
	background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
	/* box-shadow: 5px #222222; */
	z-index: 10;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: sticky;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: distribute;
	justify-content: space-around; /*Pour grands écrans*/
	top: 0;
}

.logo {
	margin-left: 2vw;
	-webkit-transition: opacity 500ms ease-in-out;
	-o-transition: opacity 500ms ease-in-out;
	transition: opacity 500ms ease-in-out;
}

.logo:hover {
	opacity: 0.35;
}

.menu-toggle {
	display: none;
}

.navig h1 {
	color: var(--brun);
	font-size: calc(3vw + 0.1rem); /*clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);*/
	font-weight: 200;
	text-wrap: balance;
	text-align: center;
}

/* Début section pour les tooltips */
/* À switcher avec l'élément popover lorsque ce sera dans les autres browsers */
[data-title]:hover:after {
    opacity: 1;
    -webkit-transition: all 0.1s ease 0.5s;
    -o-transition: all 0.1s ease 0.5s;
	transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: var(--jade);
    color: #111;
    font-size: 1.1rem;
    position: absolute;
	width: 15vw;
    padding: 1rem;
    top: 5rem;
    left: 40%;
	-webkit-box-shadow: 1px 1px 3px #222222;
	box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
	border-radius: 1rem;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
	cursor: pointer;
}
/* Fin section pour les tooltips */

.menu, .gallery-menu {
	list-style-type: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 1rem;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.menu a, .gallery-menu a {
	font-size: 1.3rem;
	text-align: center;
	text-wrap: nowrap;
	padding: 0.5rem;
	color: var(--bleu);
	-webkit-transition: color 500ms ease-in-out, background-color 500ms ease-in-out;	
	-o-transition: color 500ms ease-in-out, background-color 500ms ease-in-out;
	transition: color 500ms ease-in-out, background-color 500ms ease-in-out;
	border-radius: 5px;
}

.menu a:hover, .menu a:focus, 
.gallery-menu a:hover, .gallery-menu a:focus,
.gallery-menu .active a, .gallery-menu .active li,
.menu .active a, .menu .active li {
	color:var(--brun);
	background-color: beige;
}

/*Pour éviter que le titre ne soit trop scrunché contre le logo et les menu items */
@media (max-width: 55rem) {
	.navig h1 {display: none;}
}

/*Pour switcher on-off le bouton hamburger */
@media (max-width:45em) {
	.navig {
		justify-content: space-between;
	}
	.menu {
		position: fixed;
		inset: 0 0 0 30%;
		background-color: var(--jade);
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		    flex-direction: column;
		padding: min(30vh, 10rem) 2rem;
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		    transform: translateX(100%);
		-webkit-transition: -webkit-transform 350ms ease-in-out;
		transition: -webkit-transform 350ms ease-in-out;
		-o-transition: transform 350ms ease-in-out;
		transition: transform 350ms ease-in-out;
		transition: transform 350ms ease-in-out, -webkit-transform 350ms ease-in-out;
	}
	.menu[data-visible="true"] {
		-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
	}

	.menu-toggle {
		display: block;
		background: url("../img/Menu-50.png");
		background-color: transparent;
		background-size: contain;
		border: 0;
		width: 2rem;
		aspect-ratio: 1;
		margin-right: 2rem;
		z-index: 100;
	}
	.menu-toggle[aria-expanded="true"] {
		background: url("../img/Close-50.png");
		background-color: transparent;
		background-size: contain;
	}
	/* 	À mettre dans un media querry pour cellulaire ou tablette
	.main :not:has(> .construction) {
		min-height: 93vh;
		min-height: 93svh; 
	}*/
	.main > .construction {
		max-width: 100%;
		left: 0;
		transform: none;
	}
}

.menu .langue-btn {
	width: 40px;
	height: 40px;
	border: 1px solid var(--bleu);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 1px;
	margin: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 50%;
}

.langue-btn.FR {color: var(--bleu); transition: color 500ms ease-in-out, background-color 500ms ease-in-out;}

.langue-btn.EN {color: rgb(200, 33, 30); transition: color 500ms ease-in-out, background-color 500ms ease-in-out;}

.main {
	background-color: white;
	position: relative;
	z-index: 1;
}

.main > .construction {
	position: relative;
	margin-top: 5vh;
	margin-bottom: 15vh;
	left: 50%;
	transform: translateX(-50%);
}

.hero {
	height: 88vh; 
	height: 88svh; 
	position: relative;
	z-index: 0;
	overflow-x: clip; /*hidden;*/
}

/*  Settings pour le About me  */
.center-article {
	width: 90%;
	padding: 1rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center; 
	justify-content: center;
	margin: 0 auto;
	gap: 40px;
}

.lineseparator {
	height: 1px;
	width: 80%;
	border-bottom: 4px black solid;
	margin-top: 4%;
	margin-bottom: 2%;
}

.center-article article {
	display: -ms-grid;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	gap: 2em;
	padding: 3vw;
	background-color: hsl(0, 15%, 87%);
	align-items: center; 
	justify-content: center;
/* 	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center; 
*/
}

.center-article p {
	font-size: clamp(1rem, 0.8rem + 0.7vw, 1.5rem); /*clamp(1rem, 0.8rem + 1vw, 1.5rem);*/
	width: clamp(35ch, 80%, 90ch);
	line-height: 1.5;
	position: relative;
	/* padding-top: max(2vw, 2vh); */
	/* padding-inline: 1rem; */
	align-self: center;
	justify-self: center;
}

.center-article a {
	color: var(--bleu);
	font-weight: bold;
	text-decoration: underline;
}

.center-article img {
	width: 65%; /*clamp(30ch, 40%, 60ch);*/
	/* height: auto;  */
	justify-self: end;
	margin-right: 2em;
	border-radius: 1.5rem;
}

article p:not(article p:first-of-type) {
	grid-column: span 2;
}

article p:first-of-type {
	justify-self: start;
}

/* .center-article p:first-of-type {
	padding-top: max(4vw, 4vh);
} */

.center-article p:first-of-type::first-line {
	font-variant: small-caps;
	font-weight: bold;
	font-size: 1.25em;
	line-height: 1.25;
}

.center-article p:first-of-type::first-letter {
	/* font-family: Roboto Serif, serif; */
	font-style: italic;
	initial-letter: 2.5 3;
	margin-right: 0.25rem;
	color:var(--brun);
	background-color: var(--jade);
	padding: 0.5rem;
	border-radius: 5px;
	-webkit-box-shadow: -0.5rem 0.5rem 0 beige;
	box-shadow: -0.5rem 0.5rem 0 beige;
}

/* Settings pour les expositions */
.expo {
	min-height: 93vh;
	min-height: 93svh;
	padding-inline: 1rem;
}

.expo, .show-list, .recipe-container, .gallery-wrapper, .prev-shows {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	line-height: 1.8;
}

.main > .lineseparator {
	margin-inline: auto;
}

.show-list {
	margin-bottom: 2rem;
}

.show-list-horizontal {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	justify-content: center; /*space-evenly;*/
	line-height: 1.8;
	gap: 2rem;
	margin-left: 2rem;
	margin-right: 2rem;
	padding-bottom: 2rem;
}

.show-list h2, .recipe-container h2, .gallery-wrapper h2, .show-list-horizontal h2 {
	padding-top: 1rem;
}

.show-list h2, .show-list-horizontal h2 {
	margin-bottom: 1rem;
	text-align: center;
}

.show-header {
	margin-top: 1rem;
	margin-bottom: 1rem;
	margin-left: auto;
	margin-right: auto;
	width: max-content;
}

.expo h3 {
	padding-top: 2rem;
}

.show-list .bold-italic, .show-list-horizontal .bold-italic {
	font-style: italic;
	font-weight: bold;
}

.show-details {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.show-text {
	padding: 1rem;
}

.show-list-horizontal .show-text {
	background-color: var(--jade);
	border-radius: 1rem;
}

.show-text p {
	font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem); /*clamp(1rem, 2.5vw + 0.5rem, 1.3rem);*/
}

.show-details img {
	display: block;
 	width: 50%;
	object-fit: cover;
}

.show-details a {
	text-decoration: underline;
	color: var(--bleu);
	font-size: 1.125rem;
}

.prev-shows {
	width: 100%;
	min-height: 5rem;
	background-color: lightgrey;
	padding-bottom: 2rem;
}

.prev-shows h2 {
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.media-scroller {
	display: -ms-grid;
	display: grid;
	grid-auto-flow: column;
	/*Par défaut j'affiche 3 images et quart pour montrer qu'il en reste d'autres non affichées */
	grid-auto-columns: 30%;  
	gap: 1rem;
	overflow-x: scroll;  /* On scroll sur l'axe horizontal seulement */
	overscroll-behavior-inline: contain;
	padding: 0 1rem 1rem;
	-ms-scroll-snap-type: inline mandatory;
	scroll-snap-type: inline mandatory;  /* L'image de gauche snap sur le coté gauche */
	scroll-padding-inline: 1rem;
	background-color: lightgrey;
}

.media-element {
	display: -ms-grid;
	display: grid;
	align-items: center;
	scroll-snap-align: start;
}

.media-element > img {
	width: 100%;
}

.media-element > img.reduit {
	width: 75%;
	margin-inline: auto;
}

/* Settings pour les recettes */
.recipe-container h3 {
	color: var(--brun);
	text-align: center;
}

.recette {
	display: -ms-grid;
	display: grid;
	width: 90vw;
	grid-template-columns: 1fr;
	gap: 1em;
	padding: 3vw;
	border: 2px solid black;
	border-bottom: 0;
	border-radius: 10px 10px 0px 0px;
	background-color: hsl(0, 15%, 87%);
	align-items: center;
	justify-content: center;
}

.recette > img {
	width: min(600px, 100%);
	object-fit: cover;
	-webkit-box-shadow: 5px 5px 10px hsl(0, 0%, 36%);	
	box-shadow: 5px 5px 10px hsl(0, 0%, 36%);
	margin-left: auto;
	margin-right: auto;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.recette .ingredients, .recette .methode, .recette .notes {
	padding: 2rem;
}

.ingredients {
	border: 1px solid grey;
	border-radius: 10px;
	-webkit-box-shadow: 5px 5px 10px hsl(0, 0%, 36%);	
	box-shadow: 5px 5px 5px hsl(0, 0%, 36%);
 }

.ingredients p, .methode p {
	margin-top: 1rem;
}

.recette .notes {
	padding: 1rem 2rem 2rem 2rem;
} 

.notes .warning {
	text-align: center;
	color: red;
	font-weight: bolder;
}

.notes p:nth-of-type(4) {
	padding-top: 2rem;
}

.methode li {
	margin-left: 1.5rem;
}

/* Settings pour la galerie d'images */
.gallery-wrapper {
	margin-bottom: 1rem;
	padding-bottom: 7rem;
	justify-content:space-evenly;
	align-items: center;
}

.gallery-menu {
	margin-bottom: 1rem;
	margin-top: 1rem;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.gallery-wrapper h3 {
	margin: 1.5rem 10dvw;
	text-align: center;
	max-width: 60dvw;
}

.gallery {
	width: 80%;
	display: -ms-grid;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	/* grid-auto-rows: 250px; */
	grid-gap: 1rem;
}

.gallery-item {
	width: 100%;
	height: 100%;
	aspect-ratio: 1.4;
	overflow: clip; /*hidden;*/
}

.gallery-item img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
  	-webkit-transition: -webkit-transform 0.5s ease-in-out;
  	transition: -webkit-transform 0.5s ease-in-out;
  	-o-transition: transform 0.5s ease-in-out;
  	transition: transform 0.5s ease-in-out;
  	transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}

.gallery-item img:hover, .gallery-item img:focus-visible {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.w-2 {
	-ms-grid-column-span: 2;
	grid-column: span 2;
}

.h-2 {
	-ms-grid-row-span: 2;
	grid-row: span 2;
}

/* Settings pour le footer */
footer {
	width: 100%;
	height: auto;
	max-height: 93vh;
	max-height: 93svh;
	position: sticky;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 0.5rem;
	bottom: 0;
	background: rgb(36, 34, 34);
	color: white;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	      align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	     justify-content: center;
	font-size: 1.2rem;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

.coords {
	text-align: center;
	margin-top: 1rem;
}

.coords a {
	color: white;
}

.coords a:hover {
	color: var(--brun);
}

footer img {
	max-height: 45vh;
	max-height: 45svh;
	aspect-ratio: 1 / 1;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 5px;
}

.social-icon > * {
	margin-left: 1rem;
}

.fa {
	color: var(--jaune);
	font-size: 1.2rem;
	padding: 0 10px;
}

.fa-facebook, .fa-mastodon {
	color: var(--bleu);
	background-color: var(--jade);
	font-size: 2rem;
	padding: 10px 10px 5px 10px;
	border-radius: 5px;
	-webkit-transition: color 500ms ease-in-out, background-color 500ms ease-in-out;
	-o-transition: color 500ms ease-in-out, background-color 500ms ease-in-out;
	transition: color 500ms ease-in-out, background-color 500ms ease-in-out;
} 

.social-icon i:hover {
	color: var(--jaune);
	background-color: var(--brun);
}

footer p {
	margin: 10px;
}

footer > p > a, .social-icon > p > a {
	color: var(--jaune);
}

footer > p > a:hover {
	color: var(--brun);
}

/* Media queries*/

/* Settings pour la galerie et les petits écrans */
@media only screen and (max-width: 45em) {

	.gallery-wrapper {
		padding-bottom: 2rem;
	}
	.gallery {
		grid-template-columns: 1fr;
		width: 80%;
	}
	.gallery img {
		width: 100%;
	}
	.gallery-menu {
		gap: 0.5rem;
		line-height: 1.2;
		width: 80%;
	}
	.w-2 {
		grid-column: span 1;
	}
	.h-2 {
		grid-row: span 1;
	}
	.show-details img {
		display: none;
	}
	.expo h3 {
		padding-top: 0;
	}
	.expo h2 {
		margin-bottom: 0;
	}
	.show-list-horizontal {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;

/* 		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start; */

		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		gap: 0.5rem;
	}
	.show-list-horizontal h2 {
		margin-bottom: 0;
		padding-top: 0;
		margin-left: auto;
		margin-right: auto;
	}
	.show-list-horizontal .show-text {
		padding-top: 0;
	}
	.center-article {
		padding: 0;
		gap: 1rem;
	}
	.center-article article {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 1em;
		padding: 2em;
	}
	.center-article img {
		/* width: clamp(30ch, 40%, 60ch); */
		height: auto; 
 		justify-self: center;
		margin-right: 0;
		border-radius: 1.5rem;
	}
	.center-article article p:first-of-type {
		justify-self: center;
	}
	article p:not(article p:first-of-type) {
		grid-column: span 1;
	}
	.center-article p:first-of-type::first-letter {
		initial-letter: 1.5 2;
	}
	.media-scroller {
		display: -ms-grid;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 70%;
	}
}

/* Settings pour le About moi */
@media only screen and (min-width: 721px) and (max-width: 1023px) {
	.center-article article {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 1em;
		padding: 2em;
	}
	article p:not(article p:first-of-type) {
		grid-column: span 1;
	}
	.center-article img {
		width: 50%;
		height: auto; 
 		justify-self: center;
		margin-right: 0;
		border-radius: 1.5rem;
	}
	.center-article article p:first-of-type {
		justify-self: center;
	}
	.center-article p:first-of-type::first-letter {
		initial-letter: 1.5 2;
	}
}

/* Settings pour la page de recettes */
@media only screen and (min-width: 1024px) {
	.recette {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.recette img {
		grid-column: span 2;
	}
	.recette .notes {
		grid-column: span 2;
	}
	.navig h1 {
		font-size: calc(3vh + 0.5rem);
	}
}

@media only screen and (orientation:landscape) {
	footer {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		gap: 2rem;
	}
}

@media only screen and (orientation:landscape) and (max-height:600px) {
	.show-list-horizontal {
		gap: 0.5rem;
		font-size: 0.8rem;
	}

	.show-details {
		-webkit-box-align: flex-end;
		-ms-flex-align: flex-end;
		align-items: flex-end;
		justify-content: flex-start;		
	}

	.center-article {
		margin-top: 0;
	}

	.center-article p {
		width: 100%;
	}
	.social-icon {
		margin-right: 1rem;
	}
}