/*
 ▄▄▄▄▄▄▄▄▄▄▄  ▄▄        ▄  ▄       ▄         ▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄         ▄  ▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄            ▄▄▄▄▄▄▄▄▄▄▄ 
▐░░░░░░░░░░░▌▐░░▌      ▐░▌▐░▌     ▐░▌       ▐░▌▐░░░░░░░░░░░▌▐░▌       ▐░▌▐░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░▌          ▐░░░░░░░░░░░▌
▐░█▀▀▀▀▀▀▀█░▌▐░▌░▌     ▐░▌▐░▌     ▐░▌       ▐░▌▐░█▀▀▀▀▀▀▀▀▀ ▐░▌       ▐░▌▐░█▀▀▀▀▀▀▀█░▌▀▀▀▀█░█▀▀▀▀ ▐░▌           ▀▀▀▀█░█▀▀▀▀ 
▐░▌       ▐░▌▐░▌▐░▌    ▐░▌▐░▌     ▐░▌       ▐░▌▐░▌          ▐░▌       ▐░▌▐░▌       ▐░▌    ▐░▌     ▐░▌               ▐░▌     
▐░▌       ▐░▌▐░▌ ▐░▌   ▐░▌▐░▌     ▐░█▄▄▄▄▄▄▄█░▌▐░▌ ▄▄▄▄▄▄▄▄ ▐░█▄▄▄▄▄▄▄█░▌▐░█▄▄▄▄▄▄▄█░▌    ▐░▌     ▐░▌               ▐░▌     
▐░▌       ▐░▌▐░▌  ▐░▌  ▐░▌▐░▌     ▐░░░░░░░░░░░▌▐░▌▐░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░▌     ▐░▌     ▐░▌               ▐░▌     
▐░▌       ▐░▌▐░▌   ▐░▌ ▐░▌▐░▌      ▀▀▀▀█░█▀▀▀▀ ▐░▌ ▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀█░▌    ▐░▌     ▐░▌               ▐░▌     
▐░▌       ▐░▌▐░▌    ▐░▌▐░▌▐░▌          ▐░▌     ▐░▌       ▐░▌▐░▌       ▐░▌▐░▌       ▐░▌    ▐░▌     ▐░▌               ▐░▌     
▐░█▄▄▄▄▄▄▄█░▌▐░▌     ▐░▐░▌▐░█▄▄▄▄▄▄▄▄▄ ▐░▌     ▐░█▄▄▄▄▄▄▄█░▌▐░▌       ▐░▌▐░█▄▄▄▄▄▄▄█░▌▄▄▄▄█░█▄▄▄▄ ▐░█▄▄▄▄▄▄▄▄▄  ▄▄▄▄█░█▄▄▄▄ 
▐░░░░░░░░░░░▌▐░▌      ▐░░▌▐░░░░░░░░░░░▌▐░▌     ▐░░░░░░░░░░░▌▐░▌       ▐░▌▐░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌
 ▀▀▀▀▀▀▀▀▀▀▀  ▀        ▀▀  ▀▀▀▀▀▀▀▀▀▀▀  ▀       ▀▀▀▀▀▀▀▀▀▀▀  ▀         ▀  ▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀ 
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

@font-face {
    font-family: customFont;
    src : url('../fonts/autumn-in-november/Autumn\ in\ November.ttf')
}

@font-face {
    font-family: font2;
    src : url('../fonts/bricolage_grotesque/fonts/variable/BricolageGrotesque\[opsz,wdth,wght\].ttf')
}

* {
	font-family: "font2", sans-serif;
	/* box-shadow: 0 0 0 1px red inset; 	 */
}

body {
	margin: 0;
	padding: 0;
}

body::-webkit-scrollbar {
	width: 0.3em;
	background-color: #00b0f0;
}

body::-webkit-scrollbar-thumb {
	background-color: #FFFFFF;
}

html {
	scroll-behavior: smooth;
}

section {
	height: 100vh;
}

/*-----------------Fonctions générales-------------------*/

.hidden {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.visible {
	opacity: 1;
	visibility: visible;
}

.visible-intro {
	opacity: 1 !important;
	transform: translate(0) !important;
}


/*-------------------------------------------------------*/

.top-page {
	background-image: url("../img/backgrounds/back2.jpg");
	background-attachment: fixed;
	background-size: cover;
	height: 100vh;
	position: relative;
}

.top-page::before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3))
}

/*__________________HEADER___________________*/

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 25px;
}

.header img {
	height: 70px;
	padding: 10px;
}

/*
 ▄▄        ▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄               ▄  ▄▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄ 
▐░░▌      ▐░▌▐░░░░░░░░░░░▌▐░▌             ▐░▌▐░░░░░░░░░░▌ ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌
▐░▌░▌     ▐░▌▐░█▀▀▀▀▀▀▀█░▌ ▐░▌           ▐░▌ ▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀█░▌
▐░▌▐░▌    ▐░▌▐░▌       ▐░▌  ▐░▌         ▐░▌  ▐░▌       ▐░▌▐░▌       ▐░▌▐░▌       ▐░▌
▐░▌ ▐░▌   ▐░▌▐░█▄▄▄▄▄▄▄█░▌   ▐░▌       ▐░▌   ▐░█▄▄▄▄▄▄▄█░▌▐░█▄▄▄▄▄▄▄█░▌▐░█▄▄▄▄▄▄▄█░▌
▐░▌  ▐░▌  ▐░▌▐░░░░░░░░░░░▌    ▐░▌     ▐░▌    ▐░░░░░░░░░░▌ ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌
▐░▌   ▐░▌ ▐░▌▐░█▀▀▀▀▀▀▀█░▌     ▐░▌   ▐░▌     ▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀█░█▀▀ 
▐░▌    ▐░▌▐░▌▐░▌       ▐░▌      ▐░▌ ▐░▌      ▐░▌       ▐░▌▐░▌       ▐░▌▐░▌     ▐░▌  
▐░▌     ▐░▐░▌▐░▌       ▐░▌       ▐░▐░▌       ▐░█▄▄▄▄▄▄▄█░▌▐░▌       ▐░▌▐░▌      ▐░▌ 
▐░▌      ▐░░▌▐░▌       ▐░▌        ▐░▌        ▐░░░░░░░░░░▌ ▐░▌       ▐░▌▐░▌       ▐░▌
 ▀        ▀▀  ▀         ▀          ▀          ▀▀▀▀▀▀▀▀▀▀   ▀         ▀  ▀         ▀ 
*/

.navigation {
	margin-right: 80px;
	width: auto;
	display: flex;
	gap: 60px;
	justify-content: space-between;
	list-style: none;
}

.navigation > a {
	font-size: 20px;
}

.nav-element {
	position: relative;
	color: white;
	text-decoration: none;
	filter: drop-shadow(5px 5px 4px black);
}

.nav-element::before {
	position: absolute;
	content: '';
	width: 0%;
	height: 2px;
	top: 120%;
	left: 0%;
	background-color: white;
	transition: .5s width;
}

.nav-element:hover::before{
	width: 100%;
}

/*
 ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄        ▄  ▄▄▄▄▄▄▄▄▄▄▄       ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄ 
▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░▌      ▐░▌▐░░░░░░░░░░░▌     ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌
▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀█░▌▐░▌░▌     ▐░▌ ▀▀▀▀█░█▀▀▀▀      ▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀▀▀ 
▐░▌          ▐░▌       ▐░▌▐░▌       ▐░▌▐░▌▐░▌    ▐░▌     ▐░▌          ▐░▌       ▐░▌▐░▌       ▐░▌▐░▌          ▐░▌          
▐░█▄▄▄▄▄▄▄▄▄ ▐░█▄▄▄▄▄▄▄█░▌▐░▌       ▐░▌▐░▌ ▐░▌   ▐░▌     ▐░▌          ▐░█▄▄▄▄▄▄▄█░▌▐░█▄▄▄▄▄▄▄█░▌▐░▌ ▄▄▄▄▄▄▄▄ ▐░█▄▄▄▄▄▄▄▄▄ 
▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░▌       ▐░▌▐░▌  ▐░▌  ▐░▌     ▐░▌          ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░▌▐░░░░░░░░▌▐░░░░░░░░░░░▌
▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀█░█▀▀ ▐░▌       ▐░▌▐░▌   ▐░▌ ▐░▌     ▐░▌          ▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌▐░▌ ▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀▀▀ 
▐░▌          ▐░▌     ▐░▌  ▐░▌       ▐░▌▐░▌    ▐░▌▐░▌     ▐░▌          ▐░▌          ▐░▌       ▐░▌▐░▌       ▐░▌▐░▌          
▐░▌          ▐░▌      ▐░▌ ▐░█▄▄▄▄▄▄▄█░▌▐░▌     ▐░▐░▌     ▐░▌          ▐░▌          ▐░▌       ▐░▌▐░█▄▄▄▄▄▄▄█░▌▐░█▄▄▄▄▄▄▄▄▄ 
▐░▌          ▐░▌       ▐░▌▐░░░░░░░░░░░▌▐░▌      ▐░░▌     ▐░▌          ▐░▌          ▐░▌       ▐░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌
 ▀            ▀         ▀  ▀▀▀▀▀▀▀▀▀▀▀  ▀        ▀▀       ▀            ▀            ▀         ▀  ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀ 
*/	

.landing-page {
	padding-top: 0px;
	padding-left: 110px;
	width: 700px;
	min-height: 400px;
	color: white;
	font-size: 60px;
	position: relative;
}

.scroller {
	position: absolute;
	display: flex;
	gap: 20px;
	color: white;
	font-size: 20px;
	text-decoration: none;
	font-weight: normal;
	bottom: 0;
}

.fa-angle-down {
	position: absolute;
	top: 50%;
	right: -40%;
	transform: translateY(-50%);
}

.landing-page .titre {
	font-family: "font2", sans-serif;
	font-weight: 900;
	filter: drop-shadow(10px 10px 20px black);
	opacity: 0;
	transform: translateY(100%);
	animation: slideUp 1s ease-in-out forwards;
}

.middle-page {
	max-width: 800px;
	min-height: 200px;
}

.OnlyGhibli {
	font-family: "font2", sans-serif;
	font-weight: 900;
	text-decoration: underline;
}

@keyframes slideUp {
	0% {
	opacity: 0;
	transform: translateY(100%);
	}
	100% {
    opacity: 1;
	transform: translateY(0);
	}
}

/*
 ▄▄▄▄▄▄▄▄▄▄▄  ▄▄        ▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄ 
▐░░░░░░░░░░░▌▐░░▌      ▐░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌
 ▀▀▀▀█░█▀▀▀▀ ▐░▌░▌     ▐░▌ ▀▀▀▀█░█▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀█░▌
     ▐░▌     ▐░▌▐░▌    ▐░▌     ▐░▌     ▐░▌       ▐░▌▐░▌       ▐░▌
     ▐░▌     ▐░▌ ▐░▌   ▐░▌     ▐░▌     ▐░█▄▄▄▄▄▄▄█░▌▐░▌       ▐░▌
     ▐░▌     ▐░▌  ▐░▌  ▐░▌     ▐░▌     ▐░░░░░░░░░░░▌▐░▌       ▐░▌
     ▐░▌     ▐░▌   ▐░▌ ▐░▌     ▐░▌     ▐░█▀▀▀▀█░█▀▀ ▐░▌       ▐░▌
     ▐░▌     ▐░▌    ▐░▌▐░▌     ▐░▌     ▐░▌     ▐░▌  ▐░▌       ▐░▌
 ▄▄▄▄█░█▄▄▄▄ ▐░▌     ▐░▐░▌     ▐░▌     ▐░▌      ▐░▌ ▐░█▄▄▄▄▄▄▄█░▌
▐░░░░░░░░░░░▌▐░▌      ▐░░▌     ▐░▌     ▐░▌       ▐░▌▐░░░░░░░░░░░▌
 ▀▀▀▀▀▀▀▀▀▀▀  ▀        ▀▀       ▀       ▀         ▀  ▀▀▀▀▀▀▀▀▀▀▀ 
*/
.ghibli-intro {
	margin: 40px;
}

.intro-container {
	display: flex;
	gap: 5%;
	justify-content: center;
	height: auto;
	/* box-shadow: 0 0 0 1px red inset; */
}

.intro-text {
	flex: 1;
}

.intro-texte {
	position: relative;
	font-family: "font2", sans-serif;
	font-weight: 400;
}

.intro-texte::selection {
	background-color: #00b0f0;
}

.intro-texte-oeuvre {
	text-decoration: underline;
	font-weight: 400;
	color: #00b0f0;
}

.selection::selection {
	background-color: #00b0f0;
	color: white
}

.intro-texte-colored {
	font-weight: 400;
	color: #00b0f0;
}

.hide-texte {
	position :absolute;
	height: 100%;
	width: 100%;
	background: red;
	z-index: 100;
}

.intro-pic {
	flex: 1;
}

.intro-pic img{
	border-radius: 10px;
	width: 100%;
	display: block;
}


/*	
 ▄▄▄▄▄▄▄▄▄▄▄  ▄            ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄ 
▐░░░░░░░░░░░▌▐░▌          ▐░░░░░░░░░░░▌▐░░░░░░░░░░▌ ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌
▐░█▀▀▀▀▀▀▀▀▀ ▐░▌           ▀▀▀▀█░█▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌
▐░▌          ▐░▌               ▐░▌     ▐░▌       ▐░▌▐░▌          ▐░▌       ▐░▌
▐░█▄▄▄▄▄▄▄▄▄ ▐░▌               ▐░▌     ▐░▌       ▐░▌▐░█▄▄▄▄▄▄▄▄▄ ▐░█▄▄▄▄▄▄▄█░▌
▐░░░░░░░░░░░▌▐░▌               ▐░▌     ▐░▌       ▐░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌
 ▀▀▀▀▀▀▀▀▀█░▌▐░▌               ▐░▌     ▐░▌       ▐░▌▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀█░█▀▀ 
          ▐░▌▐░▌               ▐░▌     ▐░▌       ▐░▌▐░▌          ▐░▌     ▐░▌  
 ▄▄▄▄▄▄▄▄▄█░▌▐░█▄▄▄▄▄▄▄▄▄  ▄▄▄▄█░█▄▄▄▄ ▐░█▄▄▄▄▄▄▄█░▌▐░█▄▄▄▄▄▄▄▄▄ ▐░▌      ▐░▌ 
▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░▌ ▐░░░░░░░░░░░▌▐░▌       ▐░▌
 ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀   ▀▀▀▀▀▀▀▀▀▀▀  ▀         ▀ 
*/

.section-title-button {
	position: absolute;
	right: 5%;
	top:-10%;
}

.slider-pause{
	position: relative;
	border: none;
	border-radius: 999px;
	background: linear-gradient(142deg, rgb(0, 37, 138) 0%, rgb(1, 125, 170) 32%, rgb(69, 210, 253) 100%);
	color: white;
	height: 50px;
	width: 50px;
	font-size: 1rem;
}

.slider-pause > div {
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-45%, -45%);
}

.slider-pause > div > svg {
	margin: 0;
	padding: 0;
}

.slider-pause > .icon-hidden {
	display: none;
}


.oeuvres {
	margin: 40px;
}


.slider {
	height: 540px;
	position: relative;
	margin: auto;
	overflow: hidden;
	width: 100%;
}


.slide-track {
	animation: scroll 50s linear infinite;
	display: flex;
	gap: 5px;
	width: 100%;
	position: relative;
}

.slider::before {
	position: absolute;
	background: linear-gradient(to right,  rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
	content: "";
	height: 100%;
	width: 10%;
	top:0;
	left: 0;
	z-index:2;
}

.slider::after {
	position: absolute;
	background: linear-gradient(to left,  rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
	content:"";
	height: 100%;
	width: 10%;
	top:0;
	right:0;
	z-index:2;
}

.slide-element {
	height: 450px;
	position: relative;
	border-radius: 10px;
}

.slide-element-top:hover > a > .slide-element-titre {
	transform: scale(1.2);
}

.slide-element-top:hover > a > .slide-affiche-film {
	transform: scale(1.1) rotate(10deg);
}

.slide-element-titre {
	position: absolute;
	color: white;
	left: 100px;
	top: 100px;
	text-align: center;
	filter: drop-shadow(5px 5px 4px black);
	transition: all .5s;
}

.slide-affiche-film {
	position: absolute;
	right: 75px;
	top: 90px;
	filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.5));
	border-radius: 10px;
	transition: all .5s;
}

@keyframes scroll {
	0% {transform: translateX(0); }
	100% {transform: translateX(calc(-800px * 5 - 40px))}
}





/* ____________________________________________ */


.affiches-container {
	margin: 0 auto;
	position: relative;
	width: 80%;
	height: 80%;
	background-color: red;
}

.affiches-element {
	/* transform: translate(-50%, -50%); */
	position: absolute;
	width: 250px;
}

.affiche-chihiro {
	top: 0;
	left: 0;
}

.affiche-arrietty {
	top: 25%;
	left: 80%;
}

.affiche-gotf {
	top: 10%;
	left: 10%;
}

.affiche-marnie {
	top: 20%;
	left: 30%;
}

.affiche-chihiro {
	top: 0%;
	left: 0%;
}

.affiche-chihiro {
	top: 0;
	left: 0;
}


/* ____________________________________________ */


/*
 ▄               ▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄        ▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄ 
▐░▌             ▐░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░▌      ▐░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌
 ▐░▌           ▐░▌  ▀▀▀▀█░█▀▀▀▀ ▐░█▀▀▀▀▀▀▀▀▀ ▐░▌░▌     ▐░▌▐░█▀▀▀▀▀▀▀▀▀  ▀▀▀▀█░█▀▀▀▀  ▀▀▀▀█░█▀▀▀▀ ▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀▀▀ 
  ▐░▌         ▐░▌       ▐░▌     ▐░▌          ▐░▌▐░▌    ▐░▌▐░▌               ▐░▌          ▐░▌     ▐░▌          ▐░▌          
   ▐░▌       ▐░▌        ▐░▌     ▐░▌ ▄▄▄▄▄▄▄▄ ▐░▌ ▐░▌   ▐░▌▐░█▄▄▄▄▄▄▄▄▄      ▐░▌          ▐░▌     ▐░█▄▄▄▄▄▄▄▄▄ ▐░█▄▄▄▄▄▄▄▄▄ 
    ▐░▌     ▐░▌         ▐░▌     ▐░▌▐░░░░░░░░▌▐░▌  ▐░▌  ▐░▌▐░░░░░░░░░░░▌     ▐░▌          ▐░▌     ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌
     ▐░▌   ▐░▌          ▐░▌     ▐░▌ ▀▀▀▀▀▀█░▌▐░▌   ▐░▌ ▐░▌▐░█▀▀▀▀▀▀▀▀▀      ▐░▌          ▐░▌     ▐░█▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀█░▌
      ▐░▌ ▐░▌           ▐░▌     ▐░▌       ▐░▌▐░▌    ▐░▌▐░▌▐░▌               ▐░▌          ▐░▌     ▐░▌                    ▐░▌
       ▐░▐░▌        ▄▄▄▄█░█▄▄▄▄ ▐░█▄▄▄▄▄▄▄█░▌▐░▌     ▐░▐░▌▐░█▄▄▄▄▄▄▄▄▄      ▐░▌          ▐░▌     ▐░█▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄█░▌
        ▐░▌        ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░▌      ▐░░▌▐░░░░░░░░░░░▌     ▐░▌          ▐░▌     ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌
         ▀          ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀  ▀        ▀▀  ▀▀▀▀▀▀▀▀▀▀▀       ▀            ▀       ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀                                                                                                                         
*/

.best-items {
	margin: 40px;
}

.section-title {
	font-size: 50px;
	font-family: "customFont", cursive;
	font-weight: 100;
	position: relative;
}

.section-title::before {
	content: "";
	position: absolute;
	background-color: #00AFF0;
	width: 90px;
	height: 4px;
	top: 110%;
}

.best-ghibli {
	min-height: 500px;
	margin: 0 auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	justify-content: space-between;
	align-items: center;
}

.ghibli-box {
	height: 400px;
	min-width: 300px;
	position: relative;
	background-size: cover;
	background-position: center;
	flex: 0.8;
	transition: all .5s;
}

.ghibli-box:hover {
	transform: scale(1);
	flex: 1;
	z-index: 2;
}

.ghibli-box > .ghibli-details {
	background-color: #FFFFFFAF;
	width: 100%;
	color: #000000;
	position: absolute;
	bottom: 0;
	border-bottom: #00AFF0 solid 4px;
	text-align: center;
	font-size: 1.5rem;
	transition: all .5s;
}

.ghibli-box:hover > .ghibli-details {
	color: #00AFF0;
	letter-spacing: 5px;
}

.ghibli1 {
	background-image: url("../img/wallpapers/setsuko.jpg");
}

.ghibli2 {
	background-image: url("../img/wallpapers/marnieWoodCrop.jpg");
}

.ghibli3 {
	background-image: url("../img/wallpapers/Chihiro_Among_Flowers.jpg");
}

.ghibli4 {
	background-image: url("../img/wallpapers/Howl.jpg");
}


.ghibli-name {
	margin: .5rem;
}

.ghibli-movie-name {
	font-size: 0.8rem;
	letter-spacing: 2px;
}

/*
 ▄▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄▄▄  ▄         ▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄        ▄ 
▐░░░░░░░░░░▌ ▐░░░░░░░░░░░▌▐░▌       ▐░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░▌      ▐░▌
▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀█░▌▐░▌       ▐░▌ ▀▀▀▀█░█▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌▐░▌░▌     ▐░▌
▐░▌       ▐░▌▐░▌       ▐░▌▐░▌       ▐░▌     ▐░▌     ▐░▌       ▐░▌▐░▌▐░▌    ▐░▌
▐░█▄▄▄▄▄▄▄█░▌▐░▌       ▐░▌▐░▌       ▐░▌     ▐░▌     ▐░▌       ▐░▌▐░▌ ▐░▌   ▐░▌
▐░░░░░░░░░░▌ ▐░▌       ▐░▌▐░▌       ▐░▌     ▐░▌     ▐░▌       ▐░▌▐░▌  ▐░▌  ▐░▌
▐░█▀▀▀▀▀▀▀█░▌▐░▌       ▐░▌▐░▌       ▐░▌     ▐░▌     ▐░▌       ▐░▌▐░▌   ▐░▌ ▐░▌
▐░▌       ▐░▌▐░▌       ▐░▌▐░▌       ▐░▌     ▐░▌     ▐░▌       ▐░▌▐░▌    ▐░▌▐░▌
▐░█▄▄▄▄▄▄▄█░▌▐░█▄▄▄▄▄▄▄█░▌▐░█▄▄▄▄▄▄▄█░▌     ▐░▌     ▐░█▄▄▄▄▄▄▄█░▌▐░▌     ▐░▐░▌
▐░░░░░░░░░░▌ ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌     ▐░▌     ▐░░░░░░░░░░░▌▐░▌      ▐░░▌
 ▀▀▀▀▀▀▀▀▀▀   ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀       ▀       ▀▀▀▀▀▀▀▀▀▀▀  ▀        ▀▀ 
*/

.bouton-home{
	position:fixed;
	bottom: 50px;
	right: 50px;
	height: 50px;
	width: 50px;
	border-radius: 100px;
	border: none;
	background: linear-gradient(142deg, rgb(0, 37, 138) 0%, rgb(1, 125, 170) 32%, rgb(69, 210, 253) 100%);
	z-index: 5;
	transition: all .5s;
}

.bouton-home > a {
	height: 100;
	width: 100%;
	font-size: 30px;
	color: rgb(186, 186, 186);
	text-decoration: none;
	transition: all .2s;
}

.bouton-home:hover {
	background: linear-gradient(142deg, rgba(39,98,255,1) 0%, rgba(0,175,240,1) 32%, rgba(172,235,255,1) 100%);
}

.bouton-home:hover > a {
	color: white;
	font-size: 35px;
}


/*
 ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄ 
▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌
▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀█░▌ ▀▀▀▀█░█▀▀▀▀ ▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌
▐░▌          ▐░▌       ▐░▌▐░▌       ▐░▌     ▐░▌     ▐░▌          ▐░▌       ▐░▌
▐░█▄▄▄▄▄▄▄▄▄ ▐░▌       ▐░▌▐░▌       ▐░▌     ▐░▌     ▐░█▄▄▄▄▄▄▄▄▄ ▐░█▄▄▄▄▄▄▄█░▌
▐░░░░░░░░░░░▌▐░▌       ▐░▌▐░▌       ▐░▌     ▐░▌     ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌
▐░█▀▀▀▀▀▀▀▀▀ ▐░▌       ▐░▌▐░▌       ▐░▌     ▐░▌     ▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀█░█▀▀ 
▐░▌          ▐░▌       ▐░▌▐░▌       ▐░▌     ▐░▌     ▐░▌          ▐░▌     ▐░▌  
▐░▌          ▐░█▄▄▄▄▄▄▄█░▌▐░█▄▄▄▄▄▄▄█░▌     ▐░▌     ▐░█▄▄▄▄▄▄▄▄▄ ▐░▌      ▐░▌ 
▐░▌          ▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌     ▐░▌     ▐░░░░░░░░░░░▌▐░▌       ▐░▌
 ▀            ▀▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀▀       ▀       ▀▀▀▀▀▀▀▀▀▀▀  ▀         ▀ 
*/

footer {
	height: 10vh;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 100px;
	font-weight: 600;
	background: black;
}

.icons-container {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 50%;
}

.icon-container { /* a */
	position: relative;
	margin: 0;
	vertical-align: top;
}

.icon-container p { /* p */
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.5s;
	color: white;
}

.icon-container-icon { /* icon */
	color: white;
	transition: box-shadow .5s;
	box-shadow: 0 0 0 2px transparent inset;
	padding: 10px;
	border-radius: 100px;
}

.icon-container:hover > .icon-container-icon {
	border-radius: 100px;
	box-shadow: 0 0 0 2px white inset;
}

.icon-container:hover > p {
	opacity: 1;
}

footer a.cgv {
	text-decoration: none;
	color: white;
}

/*Pour les textes : https://patorjk.com/software/taag/#p=display&f=Electronic */