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

/*occuper tout l’espace de la fenêtre*/
*{
margin: 0;
padding: 0; /*margin + padding = pour supprimer la bordure par défaut de la fenêtre*/
box-sizing: border-box; /*pour contenir les éléments dans la fenêtre*/
}

/*animer du texte header*/
.titre{
	position: relative;
	width: 95vw;/*vw = unité basée sur la largeur de la fenêtre d’affichage*/
	margin: auto;
  	font-family: "Doto", sans-serif; 	
	font-weight: 800;
	font-size: 1.9rem; /*rem = définit une valeur constante, égale à la taille de la police qui s’affiche à l’écran*/
	font-stretch: 50% 200%;
	text-transform: uppercase;
	color: #B22222;
}

.variable{
	display: flex;
	font-variation-settings: "wght"275, "wdth"50; /*wght = weight / wdth = width*/
	text-align: center;
	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*/
}

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

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

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

.static{
	font-size: 1.2rem;
	font-weight: 100;
	font-style: italic;
}

/*positionner le bloc contenant toutes les images*/
section{
	position: relative;
	height: 100vh;
	display: flex;
	background:#CD5C5C; /*change la couleur du fond pendant le survole*/
}

/*positon de l’image avec un effet de hover*/
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;
}

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


/*intégration des images en background*/
section .screen:nth-child(1){ /* pour l'image 1*/
	background: url("images/honorable_loncar.png") center;
	background-size: cover; /*(l’image remplit l’intégralité de son conteneur tout en conservant sa taille)*/
}

section .screen:nth-child(2){ /* pour l'image 2*/
	background: url("images/sculptural_loncar.png") center;
	background-size: cover;
}

section .screen:nth-child(3){ /* pour l'image 3*/
	background: url("images/ironique_loncar.png") center;
	background-size: cover;
}

section .screen:nth-child(4){ /* pour l'image 4*/
	background: url("images/subversif_loncar.png") center;
	background-size: cover;
}


/*afficher les blocs de texte avec un effet de transition en hover*/
section .screen .content {
	position: absolute;
	width: 50ch; /*(ch = valeur recommandée pour s’appliquer à des textes car basée sur la chasse du caractère)*/
	height:auto;
	background: rgba(255, 255, 255, 0.35);
	padding: 25px;/* marge intérieur */
	margin-bottom: 5ch;
	transform: translateX(100%); /*transforme x à 100% pour la position est déplacer de la meme taille que la section vers la droite*/
	backdrop-filter: blur(12.5px);
	-webkit-backdrop-filter: blur(12.5px); /*(pour être compris par les navigateurs dans le cas où le css n’est à jour dans leur version, pour que ca soit lisible dans chorme)*/
	transition: 750ms;
}

section .screen:hover .content {
	transform: translateX(0); /*(se déplace selon l’axe x, donc horizontal)*/
	transition-delay: 500ms; /*(délai d’affichage de l’objet à faire apparaître)*/
}


/*régler l’affichage des polices*/
section .screen .content h1{
  	font-family: "Doto", sans-serif;
  	font-optical-sizing: auto;
	font-weight:bolder;
	text-transform: uppercase;
	font-size: 1.2rem;
	color: #B22222;
	margin-bottom: 12.5px;/* pour avoir un espace entre le titre et le texte*/
	line-height: 1; /*c'est interlignage entre les textes*/
}


section .screen .content p {
	font-family: "Josefin Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-style: normal;
	line-height: 1.2; /*(interlignage)*/
}

/*pour créer l’effet d’accordéon entre les images*/
section .screen:hover {
	flex-grow: 3;
	opacity: 1;
	filter: saturate(100%);
}