@charset "UTF-8";
/* CSS Document */
 

.space-grotesk- {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.lexend-<uniquifier> {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.onest-<uniquifier> {
  font-family: "Onest", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.museomoderno-<uniquifier> {
  font-family: "MuseoModerno", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

*{
	margin : 0;
	padding: 0; /*pour supprimer le blanc de la fenêtre*/
	box-sizing: border-box; /*pour contenir les éléments dans la boîte*/
}

.titre{
	position: relative; /*se positionne par rapport au parent*/
	width: 95vw; /*vw = unité basée sur la largeur de la fenêtre d’affichage*/
	margin: auto; /*boite se place au centre*/
	font-family: "MuseoModerno", sans-serif;
	font-weight: 100, 900;
	font-size: 2rem; /*rem = définit une valeur constante, égale à la taille de la police qui s’affiche à l’écran*/
	font-stretch: 50% 200%; /*étirement de la typo, à mettre en place pour l'animation*/
	text-transform: uppercase; /*capital*/
	color: rgb(6, 121, 243);
}

.variable{
	display: flex;
	font-variation-settings: « wght »275, « wdth »50; /*wght = weight / wdth = widt, réduction du texte*/
	text-align: center; /* aligner dans la boîte verticalement*/
	animation: swapthings 3s infinite both cubic-bezier(0.17, 0.04, 0.04, 0.99); /*on donne un nom à l’animation que l’on décrit plus bas dans une règle @keyframes css, l'animation dur 3 seconde, infinite, àa tourne tout le temps, */
}

.anim-text {animation: swapthings2 3s infinite both cubic-bezier(0.17, 0.04, 0.04, 0.99);}

@keyframes swapthings { /*propriété pour faire une animation*/
	0% {font-variation-settings: "wght" 275, "wdth" 50;}
	50% {font-variation-settings: "wght" 900, "wdth" 100;}
	100% {font-variation-settings: "wght" 275, "wdth" 50;}
}

@keyframes swapthings2 {
	0% {font-variation-settings: "wght" 900, "wdth" 100;}
	50% {font-variation-settings: "wght" 275, "wdth" 50;}
	100% {font-variation-settings: "wght" 700, "wdth" 300;}
}

.static{
	font-style: italic;
}

section{
	position: relative;
	height: 100vh;
	display: flex;
	background: rgb(254, 248, 243)
}

section .screen {
	position: relative;
	display: flex;
	align-items: flex-end;
	flex-grow: 1; /*cette propriété précise la quantité de l’espace restant dans le conteneur flexible, à 1 les espaces sont répartis uniformément*/
	overflow: hidden; /*la propriété overflow contrôle l’affichage des éléments dans le conteneur, avec la valeur hidden les objets ne peuvent pas déborder de leur conteneur*/
	transition: 750ms; /*temps pour faire la transition*/
}
	
section .screen:nth-child(1){
	background: url("images/SCULPTURAL_Jung.png") center;
	background-size: cover; /*l’image remplit l’intégralité de son conteneur tout en conservant sa taille*/
}

section .screen:nth-child(2){
	background: url("images/IRONIQUE_Jung.png") center;
	background-size: cover;
}

section .screen:nth-child(3){
	background: url("images/HONORABLE_Jung.png")center;
	background-size: cover;
}

section .screen:nth-child(4){
	background: url("images/SUBVERSIF_Jung.png") center;
	background-size: cover;
}

section:hover .screen {
	opacity: 0.25;
	filter: saturate(50%);
}

section .screen .content {
	position: absolute;
	width: 60ch;
	height: auto;
	background: rgba(254, 248, 243, 0.75);
	padding : 25px;
	margin-bottom: 5ch;
	transform: translateX(100%);
	backdrop: blur(12.5px);
	-webkit-backdrop-filter: blur(12.5px);
	transition: 750ms;
}

section .screen:hover .content{
	transform: translateX(0);
	transition-delay: 250ms;
}

section .screen:hover {
	flex-grow: 3;
	opacity: 1;
	filter: saturate(100%);
}

/*régler l’affichage des polices*/
section .screen .content h1 {
	font-family: "MuseoModerno", sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1.2rem;
	color: rgb(6, 121, 243);
	margin-bottom: 12.5px;
	line-height: 1;
}

section .screen .content p {
	font-family: "Onest" , sans-serif;
	font-weight: 300;
	line-height: 1.2; /*interlignage*/
}