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

*{
	margin:0;
	padding:0; /*pour supprimer le blanc tournant de la fenêtre*/
	box-sizing: border-box; 
	background-color: #FAECE7; 
}

.titre{
	    position :relative;
		width: 95vw;
		margin: auto; 
		font-family: "Josefin Sans", sans-serif;
	    color: #DB4107;
		text-transform: uppercase;
		background: white ;
		font-size: 2.5rem;
		font-weight: 200 900; 	
		font-stretch: 50% 200%;
	    margin-top: 8px; 
	    
}       

		
.variable{
	display: flex;
	height: 40px; 
	font-variation-settings: "wght"275,"wdth"50;
	text-align: center; 
	animation: swapthings 3s infinite both cubic-bezier(0.17,0.04,0.04,0.99);/*le nom qu'on va donner à la règle, infinite c'est pour ce ça tourne tout le temps*/
}


@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-style: italic; 
	
}
		

section {
	position: relative;
	height: 100vh; 
	display: flex;
	background : #DB4107; 
	
}

section .screen{
	position: relative;
	display: flex; 
	align-items: flex-end; 
	flex-grow: 1; 
	overflow: hidden;
	transition: 750ms;
	
}

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

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


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


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

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


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

section .screen .content {
	position: absolute; 
	width: 58ch;
	height: auto;
	background: rgba(250, 236, 231, 0.65);
	padding: 25px;
	margin-bottom: 5ch;
	transform: translateX(100%);
	backdrop-filter: blur(12.5px);
	-webkit-backdrop-filter: blur(12.5px);
	transition: 750ms;
} /* <- Cette accolade doit être normale */
	
section .screen:hover .content {
	transform: translateX(0);
	transition-delay: 500ms;
}
	
section .screen .content h1 {
font-family:"Josefin Sans", sans-serif;
font-weight: 900;
text-transform: uppercase;
font-size: 1.2rem;
color: #DB4107;
margin-bottom: 12.5px;
line-height: 1;
background: none;
	
}

section .screen .content p {
font-family: "Helvetica", sans-serif;
font-weight: 300;
line-height: 1.2;
background: none;
color:#DB4107;
}

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