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


/******************************************************************
******************************************************************
NE PAS MODIFIER / CES LIGNES ENLEVENT LES PADDING ET MARGIN AJOUTÉS
AUTOMATIQUEMENT PAR LE FICHIER NORMALIZE.CSS
******************************************************************
******************************************************************/

/*retire les padding et margin */
aside, section, article, footer, header, video, div, p, h1, h2, h3, h4, h5, h6, ol, ul, li, figure { padding:0; margin:0; }

/******************************************************************
******************************************************************
CSS PRÉDÉFINIES / NE PAS MODIFIER
******************************************************************
******************************************************************/

/* les images ne seront jamais plus grandes que le contenant <figure> qui les contient */
img { max-width:100%; height: auto;}

/* polices par défaut */
body { font-family: Helvetica, Arial, sans-serif; }

/* retire le gras par défaut des titres */
h1, h2, h3, h4, h5, h6 { font-weight: 400;}




/************************************************************************************************************************************
************************************************************************************************************************************
LAPTOP LAPTOP LAPTOP LAPTOP LAPTOP
LAPTOP LAPTOP LAPTOP LAPTOP LAPTOP
LAPTOP LAPTOP LAPTOP LAPTOP LAPTOP
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
************************************************************************************************************************************
************************************************************************************************************************************/
/******************************************/
/* Cursor */
/******************************************/

/******************************************/
/* BODY */
/******************************************/

body { 
	background-color: #d84e4e19;
	font-family: 'Libre Franklin', sans-serif;
    font-size: 1vw; 
	font-weight: 300;
	color: #000000;
}  

.logocell{
	display: none;
}
.cellu{display: none;}
/******************************************/
/* élément commun */
/******************************************/


.gau img{width: 50%;}


nav .fa-solid {display: none;}
.logo{
	width: 12vw;
	left: 15vw;
}
nav{position:sticky;
background-color: rgb(0, 0, 0);
z-index: 100; display: flex; justify-content: center; padding: 1vw 2vw 1vw 2vw; }
nav .right{
	top: 1vw;
	position: absolute;
	text-decoration: none;
	right: 4vw;
	text-align: right;
}
nav li{list-style: none;margin: 0.4vw 6vw 0.4vw 6vw;} 
nav a{
	font-size: 1vw;
	text-decoration: none;
	color: rgb(206, 206, 206);
	font-weight: 400;
}
nav ul{	margin: 1vw 0 1vw 0;}
nav i{
	transition: 0.3s ease-in;
}
nav :hover{
	color: #ac6565;
}

nav .left{

	text-decoration: none;
	position: absolute;
top: 1vw;
	left: 4vw;
	text-align: left;}
nav .active a{
	cursor: dot;
	color: rgb(255, 0, 0);
}



/******************************************/
/* animation logo et nav */
/******************************************/
.logo, nav{
	opacity: 0; /*etat initial*/
	top: -1vw; /*etat initial*/
	animation-name: godown;
	animation-delay: 0.3s;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in;
}
@keyframes godown{
	from{opacity: 0; top: 0vw;}
	to{opacity: 1; top: 0vw;}
}

/******************************************/
/* animation portfolio */
/******************************************/
.poster figure:nth-child(2){
	opacity: 0; /*etat initial*/
	animation-name: fadeportfolio;
	animation-delay: 0.3s;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in;
}
@keyframes fadeportfolio{
	from{opacity: 0; }
	to{opacity: 1; }
}


/******************************************/
/* animation p */
/******************************************/
.poster p{
	position: relative;
	right: -4vw;
	opacity: 0;
	animation-name: fadep;
	animation-delay: 0.3s;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in;
}
@keyframes fadep{
	from{opacity: 0; right: -4vw;}
	to{opacity: 1; right: 0;}
}

/******************************************/
/* portfolio */
/******************************************/

.portfolio{
	background-color: #d84e4e19;
}

main{

	margin: 0 10vw 6vh 10vw;

	transition: 0.3s ease-in;
}
.portfolio main section figure img{
	
	grid-column: 1/2;
	width: 20%;}
main section figure{

	flex-basis: 32%;
}
.portfolio main section article{
	
	grid-column: 2/3;
	flex-basis: 64%;
}
main section h1{
	font-family: 'Libre Franklin', sans-serif;
	text-align: center;
	font-weight: 600;
	font-size: 240%;
	margin: 0 0 2vw 0;
}
main section article h2{
	font-family: 'Libre Franklin', sans-serif;
	font-weight: 600;
	font-size: 160%;
	margin: 0 0 2vw 0;
}
main section article p{
	line-height: 150%;
	margin: 0 0 2vw 0;
}
.gallery {

	--n: 3; /* nombre de rangés*/
	--m: 4; /* nombre de colonnes */
	--s: 20vw; /* controller la grosseur */
	--g: 1vw;  /* controller le gap */
	--f: 1;   /* controller l'échelle */
	
	display: grid;
	gap: var(--g);
	width:  calc(var(--m)*var(--s)+(var(--m)-1)*var(--g));
	height: calc(var(--n)*var(--s) + (var(--m) - 1)*var(--g));
	grid-template-columns: repeat(var(--m),auto);
  }
  
  .gallery > a img {
	background-color: #ffffff;
	width: 0;
	height: 0;
	min-height: 100%;
	min-width: 100%;
	object-fit: cover;
	cursor: pointer;
	filter: grayscale(80%);
	transition: .35s linear;
  }
  
  .gallery a img:hover{
	filter: grayscale(0);
	width:  calc(var(--s)*var(--f));
	height: calc(var(--s)*var(--f));
  }
  
  
footer{	width: 100vw;
	background-color: #f5d4d4;
	height: 3vw;
	
	bottom: 0;
	text-align: center;
	font-size: 0.5vw;
	opacity: 1vw;}
 footer a{
	color: #603636;
	justify-content: center;
	display: flex;
	margin: 1vw 0 0 0;
	text-align: center;
	font-size: 0.8vw;
	opacity: 0.5;
	font-weight: 400;
}
footer p{
	color: #603636;
	justify-content: center;
	position: relative;
	top: 1vw;
	text-align: center;
	font-size: 0.8vw;
	opacity: 0.5;
	font-weight: 600;
}
.projet footer {
	width: 100vw;
	background-color: #f5d4d4;
	height: 3vw;
	position: fixed;
	bottom: 0;
	text-align: center;
	font-size: 0.5vw;
	opacity: 1vw;
}
footer .cen{justify-content: right; position: relative; display: flex;bottom: 0.1vw;}
footer .cen a{
	
	opacity: 0.5;
	color: #603636;
	font-size: 1.5vw;
	text-decoration: none; margin: 0 2vw 0 0 ;
	justify-content: right;
}
footer .cen a:hover{opacity: 1; transition: 0.5s;}

/******************************************/
/* biographie */
/******************************************/

.biographie .col section{
	display: grid;
	grid-gap: 1vw;
    padding: 10px;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	
}

.laptop .biographie h1{text-align: left;}

.biographie .col section figure {   
	display: inline;
	object-fit: cover;
    box-sizing: border-box;
	grid-column: 2/3;
}
.biographie .col section article  {
	
	grid-column: 3/5;}
.biographie h1{text-align: left;}
/******************************************/
/* Projets*/
/******************************************/

.projet .col section{
	display: grid;
	grid-gap: 3vw;
    padding: 10px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	
}

.projet h1{text-align: left;}
.projetmain p{ 
	font-size: 1vw;
}

.projet .col section figure{   
	
	object-fit: cover;
    box-sizing: border-box;
	grid-column: 2/3;
	
}

.projet .col section .large{   
	
	object-fit: cover;
    box-sizing: border-box;
	grid-column: 1/3;
}
.projet .col section article  {
	
	grid-column: 3/4;}

.info p{
	
	margin: 0.3vw 0 0.5vw 0;
	font-size: 0.8vw;
	line-height: 1.5vw;
	
}
.text .info p{
	
	margin: 0.3vw 0 0.5vw 0;
	font-size: 0.8vw;
	line-height: 1vw;
	
}

.gifhaut{
	opacity: 0; /*etat initial*/
	top: -1vw; /*etat initial*/
	animation-name: goif;
	animation-delay: 0.3s;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in;
}
@keyframes goif{
	from{opacity: 0; top: 5vw;}
	to{opacity: 1; top: 5vw;}
}
.gifhaut{width: 20vw; position: fixed; display: flex; top:5vw; right: 5vw;}
.gif{

  bottom: -2vw; 
  left: 0; 
  width: 10vw; 
  position: fixed;
  display: flex;
  animation-name: tortue;
  animation-duration:20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes tortue {
	0%   {left:0px;transform: scaleX(1);}
	49.99%  {left:200px;transform: scaleX(1);}
	50%  {left:200px;transform: scaleX(-1);}
	99.99%  {left:0px; transform: scaleX(-1);}
	100% { left:0px; transform: scaleX(1);}
  }
/******************************************/
/*test*/
/******************************************/
.dflip{
grid-column: 2/4;
}

.flipbook {
	cursor: pointer;
    width: 40vw;
    height: 28vw;
grid-column: 2/4;

}

.flipbook .hard {
    background: #ffffff !important;
    color: #fff;
    font-weight: bold;
    border: none; 
}

.flipbook .hard small{
	font-style: italic;
	font-weight: lighter;
	opacity: 0.7;
	font-size: 14px;
}

.flipbook .page {
    background: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    gap: 0.1vw;
    border: 1px solid rgba(0, 0, 0, 0.11);
}

.page img{
	width: 100%;
	object-fit: cover;
	margin: auto;
}

.flipbook .page small{
	font-size: 14px;
    margin-bottom: 10px;
}

/******************************************/
/* Motion*/
/******************************************/
.motion main section article .grille{
	display: grid;
	grid-gap: 3vw;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr ;
}

.motion h5{
	text-align: center;
	margin: 5vw;
}
iframe{
	width:22.4vw;
	height: 12.60vw;
}
.vid1{
	grid-row: 1/2; align-self: center;
}
.vid2{
	align-self: center;
	grid-row: 2/3; 
	grid-column: 4/5;
}
.infogas{font-weight: 400; margin: 0 0 0.5vw 0 ;}
.vid3{
	align-self: center;
	grid-row: 3/4;
}
.gau{ text-align: right; grid-column: 2/4; top: 50%;align-self: center; margin: 0 0 0.5vw 0;}
.doi{
	text-align: left; grid-column: 2/4; justify-content: center; align-self: center;
}
.gau .info{ margin: 0.3vw 0 0 0 ;}
/******************************************/
/* contact */
/******************************************/

.bout{
	font-size: 1vw;
	font-weight: 400;
	border-radius: 1vw;
border: solid 0.2vw#ff0000;
color: rgb(0, 0, 0); 
padding: 1vw 2vw; 
text-align: center; 
text-decoration: none; 
display: inline-block; 

margin: 2vw 1vw; 
cursor: pointer; 
background: linear-gradient( to left, rgb(255, 255, 255) 50%, rgb(255, 0, 0) 50%) right;
background-size: 200%;
transition:0.3s;
	}
.bout:hover{
	background-position: left;
	background-color: #ca0505; 
	border-radius: 1vw;
	color: white; 
	text-align: center; 
	text-decoration: none; 
	display: inline-block; 
	cursor: pointer; 
		}
		






.contact main{ 
	margin: 0 10vw 5vw 10vw;
}
.contact main p{ margin: 0;}
.contact h2{
	font-family: 'Libre Franklin', sans-serif;
	color: rgb(83, 83, 83);
	margin: 4vw 0 3vw 0;
	font-size: 135%;
	text-align: left;
}
.contact h1{font-family: 'Abril Fatface', cursive;}
form label  {
display: block; /* seul sur sa ligne */
/* définir apparence ci-dessous */
	text-align: left;
	font-weight: 300;
	margin-bottom: 0.5vw;
}
.contact {text-align: center;}

form input  {
display: block; /* seul sur sa ligne */
/* définir apparence ci-dessous */

border: 0.10vw solid rgb(103, 43, 43);
	margin-bottom: 5vw;
	
	padding: 1.5vw;
	width: 93%;
}

form textarea  {
display: block; /* seul sur sa ligne */
/* définir apparence ci-dessous */
	border: solid 0.10vw rgb(103, 43, 43);
	margin-bottom: 5vw;
	padding: 1.5vw;
	width: 93%;
	line-height: 2vw;
	height: 20vh;
}

form button  {
color: rgb(83, 83, 83);
display: block; /* seul sur sa ligne */
/* définir apparence ci-dessous */
	cursor: pointer;
	font-size: 100%;
	border: 0.10vw solid rgb(103, 43, 43);
	border-radius: 1vw;
	padding: 1.5vw 5vw 1.5vw 5vw;
	margin: auto auto;
}
form button :hover{
	background-color: #000000;
}

/******************************************/
/* portfolio */
/******************************************/
/*.col{
	display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 60px;
    padding: 10px;
    overflow: hidden;
}
.col  img {grid-column: 1/2;}
.col .text{grid-column: 5/12;}*/

/******************************************/
/* animation main */
/******************************************/
main{
	position: relative;
	opacity: 0;
	animation-name: fademain;
	animation-delay: 0.6s;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in;
}
@keyframes fademain{
	from{opacity: 0; padding: 10vh 0 0 0;}
	to{opacity: 1; padding: 5vh 0 0 0;}
}

/* FIN DE CSS LAPTOP */
/* FIN DE CSS LAPTOP */
/* FIN DE CSS LAPTOP */
/************************************************************************************************************************************/




/************************************************************************************************************************************
************************************************************************************************************************************
TABLETTES TABLETTES TABLETTES 
TABLETTES TABLETTES TABLETTES
TABLETTES TABLETTES TABLETTES
PLACEZ LES DEFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
************************************************************************************************************************************
************************************************************************************************************************************/

@media screen and (max-width:1024px) {

/******************************************/
/* Projets*/
/******************************************/
.gifhaut{width: 20vw; position: fixed; display: flex; top:5vw; right: 2vw;}

.projet .col section{
	display: grid;
	grid-gap: 3vw;
    padding: 10px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 70vh;
	
	
}

.projet h1{text-align: left;}
.projetmain p{ 
	font-size: 1vw;
}

.projet .col section figure{   
	width: 100%;
	object-fit:cover;
    box-sizing: content-box;
	grid-column: 1/3;

	
}

.projet .col section .large{   
	
	object-fit: cover;
    box-sizing: border-box;
	grid-column: 1/3;
}
.projet .col section article  {
	font-size: 200%;
	grid-column: 3/5;}

.text .info p{
	
	margin: 0.3vw 0 0.5vw 0;
	font-size: 75%;
	line-height: 125%;
	
}
.flipbook {
    width: 40vw;
    height: 28vw;
grid-column: 2/4;
grid-row: 4/5;

}

     /*******************************/ 
} /* <------ ne pas retirer ce } */


/* FIN DE CSS TABLETTES */
/* FIN DE CSS TABLETTES */
/* FIN DE CSS TABLETTES */




/************************************************************************************************************************************
************************************************************************************************************************************
CELLULAIRES CELLULAIRES CELLULAIRES
CELLULAIRES CELLULAIRES CELLULAIRES
CELLULAIRES CELLULAIRES CELLULAIRES
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
************************************************************************************************************************************
************************************************************************************************************************************/

@media screen and (max-width:680px) {
    .gifhaut{width: 30%; position: fixed; display: flex; top:9.5vh; right: 0;}
	@keyframes goif{
		from{opacity: 0; top: 9.5vh;}
		to{opacity: 1; top: 9.5vh;}
	}
	main section{
	/*display: block;*/
}
	main section article .grille{
	grid-template-columns: auto auto;
}
    body { 
        font-size:18px; 
    }  
	.logocell{
		width: 13vw;
		position: absolute;
		top:2vh;
		left: 42.5%;
		display: block;
	}
	.laptop{
		display: none;
	}
	.logolaptop{
		display: none;
	}
	nav{
		padding: 2vw;
	height: 8vh;
	
z-index: 100;}
    nav a{
		font-size: 3vw;
		line-height: 4vw;
	}
	nav .fa-solid {display: block;}

	nav li{list-style: none;margin: 0 6vw 0.2vw 6vw;} 
	nav .right{
	top: 2vh;
	position: absolute;
	text-decoration: none;
	right: 4vw;
	text-align: right;
}
nav .left{

	text-decoration: none;
	position: absolute;
	top: 2vh;
	left: 4vw;
	text-align: left;}
	
	
	.gallery {
	
	--n: 6; /* nombre de rangés*/
	--m: 2; /* nombre de colonnes */
	--s: 40vw; /* controller la grosseur */
	--g: 1vw;  /* controller le gap */
	--f: 1;   /* controller l'échelle */
	
	display: grid;
	gap: var(--g);
	width:  calc(var(--m)*var(--s)+(var(--m)-1)*var(--g));
	height: calc(var(--n)*var(--s) + (var(--m) - 1)*var(--g));
	grid-template-columns: repeat(var(--m),auto);
  }
  
  .gallery > a img {
	width: 0;
	height: 0;
	min-height: 100%;
	min-width: 100%;
	object-fit: cover;
	cursor: pointer;
	filter: none;
	transition: none;
  }
  
  .gallery a img:hover{
	filter: grayscale(0);
	width:  0;
	height: 0;
  }
  main  p{

	font-size: 4vw;

}
main section h1{

	text-align: center;

	font-size: 240%;
	margin: 0 0 4vw 0;
}

  .biographie img{
	display: none;
  }
  .biographie .logo img{
	display: block;
  }
  .biographie .col section{
	display: block;
	text-align: center;
  }
  .biographie h1{ text-align: center;}

  footer .cen a{
	margin: 1vw 1vw 1vw 1vw; 
	color: #aeaeae;
	font-size: 3vh;
	text-decoration: none;
}

footer{	width: 100vw;
	background-color: #f5d4d4;
	height: 5vh;
	bottom: 0;
	text-align: center;
	opacity: 1vw;}
 footer a{
	color: #603636;
	justify-content: center;
	display: flex;
	margin: 1vw 0 0 0;
	text-align: center;
	font-size: 1.5vh;
	opacity: 0.5;
	font-weight: 400;
}
footer p{
	color: #603636;
	justify-content: center;
	position: relative;
	top: 2vh;
	text-align: left;
	font-size: 1.5vh;
	opacity: 0.5;
	font-weight: 600;
	margin-left: 3vw;
}
.projet footer {
	width: 100vw;
	position: fixed;
	bottom: 0;
	height: 5vh;

	text-align: center;
	opacity: 1vw;
}
footer .cen{justify-content: right; position: relative; display: flex;bottom: 0.5vh;}
footer .cen a{
	
	opacity: 0.5;
	color: #603636;
	font-size: 3vh;
	text-decoration: none; margin: 0 3vw 0 0 ;
	justify-content: right;
}
footer .cen a:hover{opacity: 1; transition: 0.5s;}



  /******************************************/
/* Projets*/
/******************************************/
main .col{padding: 0 0;}
.projet .col section{
	display: block;
	
}
.cellu{display: block;}
.laptop{display: none;}
.projet .cellu h1{text-align: center; }
.projet main p{ 
	text-align: center;
	margin: 3vw 0 2vw 0;
	font-size: 3.5vw;
}



.text .info p{
	
	margin: 0.3vw 0 1vw 0;
	font-size: 3vw;
	line-height: 4.4vw;
	
}

.gif{

	bottom: 0vh; 
	left: 0; 
	width: 10vh; 
	position: fixed;
	display: flex;
	animation-name: tortue;
	animation-duration:20s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
  }


/******************************************/
/* Motion*/
/******************************************/
.motion main section article .grille{
	display: block;
	
}

.motion h5{
	text-align: center;
	margin: 5vw;
}
iframe{
	display: block;
	margin: 6vw auto 2vw auto;
	align-items: center;
	width:44.8vw;
	height: 25.20vw;
}

.infogas{font-weight: 400; margin: 0 0 0.5vw 0 ;}
.vid3{
	align-self: center;
	grid-row: 3/4;
}
.gau{
	text-align: center;
}
.doi{
	text-align: center;
}
.gau .info{ margin: 0.3vw 0 0 0 ;}


/******************************************/
/*Contact*/
/******************************************/
.contact main{ 
	margin: 0 10vw 30vw 10vw;
}
.contact main p{ margin: 0 0 5vw 0;}
.bout{
	font-size: 3vw;
	font-weight: 400;
	border-radius: 1vw;
border: solid 0.5vw#ff0000;
color: rgb(0, 0, 0); 
padding: 2vw 4vw; 
text-align: center; 
text-decoration: none; 
display: inline-block; 
margin: 4vw 2vw; 
cursor: pointer; 
background: linear-gradient( to left, rgb(255, 255, 255) 50%, rgb(255, 0, 0) 50%) right;
background-size: 200%;
transition:0.3s;
	}
.bout:hover{
	background-position: left;
	background-color: #ca0505; 
	color: white; 
	text-align: center; 
	text-decoration: none; 
	display: inline-block; 
	cursor: pointer; 
		}
    /*******************************/ 
} /* <------ ne pas retirer ce } */


/* FIN DE CSS CELLULAIRES */
/* FIN DE CSS CELLULAIRES */
/* FIN DE CSS CELLULAIRES */