@font-face {
    font-family: 'Amiamie-BlackRound';
    src:url('../font/Amiamie-BlackRound.ttf');
  }

@font-face {
    font-family:'Amiamie-Light';
    src:url('../font/Amiamie-Light.ttf');
  }
  /*----------------*/
@keyframes apparition {
50% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes opacity {
0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}




html{
		scroll-behavior: smooth;
		width: 100vw;
}

body{
	background-color:#F9F0FF;
	cursor: url('../images/cursor-adibou.png'), auto;
	display: flex;         /* 1. Fait de ce conteneur une boîte flexible */
	/*overflow-x: scroll;    /* 2. Permet le défilement vertical */
	/*overflow-y: hidden;    /* 3. Empêche le défilement horizontal */
	white-space: nowrap;   /* 4. Maintient les éléments sur une seule ligne */
	width: 100vw;          /* 5. Prend toute la largeur de l'écran */
	height: 100vh; 

	margin: 0;
	padding: 0;
}

a{
  color: inherit;
  text-decoration: none;
}

/*-----------MENU ACCUEIL-------*/
#kpu{
	border: blue 0px solid;
	width: 100vw;
	/*height: 100%;*/
	align-content: center;
	background-image:url('../images/typo-menu.gif');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;

	/*width: 100vw;*/
    height: 100vh; /* Prend toute la hauteur de l'écran */


/*	display: flex;*/
	/*justify-content: center;
	align-items: center;*/
	/*width: 100%;*/
	/*height: 100%;*/
	/*border: blue 1px solid;
	background-image:url('../images/typo-menu.gif');
	background-size: 97% 100%;
	background-repeat: no-repeat;
	background-position: center;*/
}

#kpuisagraphicdesigner{
	border: 0px orange solid;
	width: 100%;
		animation: apparition 0.8s 0s ease;

	/*text-align: center;
	width: 90%;
  	/*transform: scale(3, 1);*/
  	/*line-height: 160px;
  	transform: scale(0.5, 1.4);
  	letter-spacing: -13px;
  	text-shadow: 5px 3px 10px rgba(94, 67, 47, 0.4);*/
}

#kpuisagraphicdesigner h1{
	border: 0px solid green;
	font-family: Amiamie-BlackRound, sans-serif ;
	font-size: 240px;
	color: white;
	-webkit-text-stroke-width: 4px;
  	-webkit-text-stroke-color: #5E432F;

  	transform: scale(3, 1);
  	line-height: 140px;
  	transform: scale(0.5, 1.4);
  	letter-spacing: -13px;
  	text-shadow: 5px 3px 10px rgba(94, 67, 47, 0.4);
	/*margin-top: -20px;
	margin-left: 60px;*/
		text-align: center;

}

#scroll-droite{
	display: none;
	width: 5%;
	border: solid 1px purple;
	color: #5E432F;
	font-size: 10px;
}

/*----------PROJETS-------------*/

#works{
	padding: 30px auto 30px;
	width: 3000px;
	height: 75%;
	border: px solid purple;
}

#prez-projet{
	display: none;
}

#prez-projet{
	width: 5200px;
	height: 70%;
	border: 0px green solid;
	margin-top: 23px;
}

#prez-projet-INUTILE{
	width: 5200px;
	height: 70%;
	border: 0px orange solid;
	margin-top: 23px;
}

#prez-projet article{
	display: flex;
	width: 100%;
	height: 100%;
	border: 0px yellow solid;
	filter: drop-shadow(2px 3px 2px rgba(94, 67, 47, 0.4));
	animation: opacity 0.5s 0s ease ;
}


#prez-projet aside{
	margin-top: 10px;
	width: 15%;
	border: 0px orange solid;

	position: sticky;
	left: 20px;
	z-index: 100;
	animation: opacity 1s 0s ease;

	/*padding-left: 0;*/
}

#prez-projet aside h1{
	border: 0px blue solid;
	font-family: Amiamie-BlackRound, sans-serif ;
	font-size: 38px;
	color: white;
	-webkit-text-stroke-width: 1.2px;
  	-webkit-text-stroke-color: red;
  	transform: scale(0.8, 1);
  	text-shadow: 2px 1px 3px rgba(94, 67, 47, 0.3);
  	transform-origin: left;
}

#prez-projet aside h2{
	border: 0px green solid;
	font-family: Amiamie-BlackRound, sans-serif ;
	font-size: 22px;
	color: white;
	-webkit-text-stroke-width: 0.8px;
  	-webkit-text-stroke-color: red;
  	transform: scale(0.8, 1);
  	text-shadow: 2px 1px 3px rgba(94, 67, 47, 0.3);
  	margin-top:3px;
  	transform-origin: left;
}

#prez-projet aside p{
	border: 0px solid blue;
	width: 80%;
	font-family: Amiamie-Light, sans-serif ;
	font-size: 18px;
	color: #5E432F;
	transform: scale(0.8, 1);
	line-height: 120%;
	transform-origin: left;

	overflow-wrap: break-word;
	word-break: break-word; /* Compatibilité ancienne */
  white-space: normal;
}

/*-----------PROJETS PETITE RESO DISPLAY NONE-------*/
#PROJ-POCKET-petitereso{
	display: none;
}

#PROJ-JEANIMAL-petitereso{
	display: none;
}

#PROJ-GIGOLO-petitereso{
	display: none;
}

#PROJ-MOTION-petitereso{
	display: none;
}

#PROJ-CHRONIQUE-petitereso{
	display: none;
}

#PROJ-FABIANA-petitereso{
	display: none;
}

#PROJ-CABOOM-petitereso{
	display: none;
}

#PROJ-SKETCH-petitereso{
	display: none;
}
/*************************************/
#PROJ-POCKET{
	display: block;
}

#PROJ-JEANIMAL{
	display: block;
}

#PROJ-GIGOLO{
	display: block;
}

#PROJ-MOTION{
	display: block;
}

#PROJ-CHRONIQUE{
	display: block;
}

#PROJ-FABIANA{
	display: block;
}

#PROJ-CABOOM{
	display: block;
}

#PROJ-SKETCH{
	display: block;
}


/*-----------PROJETS PREZ INDIVUEL-------*/

.pocket video{
	width: auto;
	height: 430px;
	background-size: cover;
}

.jeanimal img{
	width: auto;
	height: 430px;
	background-size: cover;
}



/*
.video-responsive-gigolo{
	position: relative;
   padding-bottom: 56.25%; /* Rapport 16:9 (9 / 16 = 0.5625)
    height: 0;
    overflow: hidden;
}

.video-responsive-gigolo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} */



/*
#vimeo-gigolo iframe {
	display: inline-block;
    /*position: absolute;*/
    /*top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}*/



.gigolo video{
	width: auto;
	height: 430px;
	background-size: cover;
}


.motion video{
	width: auto;
	height: 430px;
	background-size: cover;
}


.chronique video, img{
	width: auto;
	height: 430px;
	background-size: cover;
}

.fabiana img{
	width: auto;
	height: 430px;
	background-size: cover;
}

.caboom video, img{
	width: auto;
	height: 430px;
	background-size: cover;
}

.sketch img{
	width: auto;
	height: 430px;
	background-size: cover;
}

.boutonSonActif{
	opacity: 50%;
	display: inline-block;
  padding: 0px 0px;
  font-size: 12px;
  cursor: pointer; /* Indique que l'élément est cliquable */
  background-color: rgba(0, 0, 0, 0);
  color: #5E432F;
  border: none;
  border-radius: 24%;
}


/*___________________*/

#picto-menu {
	margin-top: 210px;
	display: flex;
	width: 200%;
	height: 24%;
	border: 0px solid skyblue;
	justify-content: space-between;

}

#picto-menu .sous-div-picto1 img{
	height: 140px;
	background-size: cover;
	border: black solid 0px;
	filter: drop-shadow(2px 3px 2px rgba(94, 67, 47, 0.4));
}


/*
.sous-div-picto2 a{
	display: flex;
}

.sous-div-picto2 img{
	height: 140px;
	border: black solid 1px;
	filter: drop-shadow(2px 3px 2px rgba(94, 67, 47, 0.4));
}
*/

.sous-div-picto2 figcaption{
	height: 140px;
	border: 0px blue solid;
}


.sous-div-picto2 p::after {
  content: '';
  position: absolute;
  left: 50%; /* Positionne le bord gauche à 50% du parent */
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: red;
  transition: width 0.5s ease, transform 0.5s ease; /* Ajoute la transition pour le transform */
  transform: translateX(-50%); /* Décale la ligne de -50% de sa propre largeur */
}

.sous-div-picto2 p:hover::after {
  width: 100%; /* Largeur de la ligne au survol */
}

.suitcase-bouton{
	background-image:url('../images/suitcase-picto2.gif');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

/*______________HOVER PICTO ROUGE----------------*/

#picto-menu .sous-div-picto1 img:hover {
 filter: saturate(900%);
 transition: filter 0.5s ease;
}

/*
.sous-div-picto1 figure:hover .visible{

.sous-div-picto1 figure:hover .masque{
  display: block;
}

.visible{
  display: block;
}

.masque{
  display: none;
}*/



/*_______________*/



.sous-div-picto1 {
	border: 0px hotpink solid;
	width: 60%;

	position: sticky;
	left: 20px;
	z-index: 100;
}

.sous-div-picto2 {  
	/*float: right;*/
	border: 0px black solid;
	width: 3%;
	font-family: Amiamie-Light, sans-serif ;
	font-size: 18px;
	color: red;
	transform: scale(0.95, 1);
		display: inline-block;
}


/*
.suitcase-menu img{
	margin-left: 40px;

}*/
/*
.sous-div-picto2 p{
	margin-top: -20px;
	font-family: Amiamie-Light, sans-serif ;
	font-size: 18px;
	color: red;
	transform: scale(0.8, 1);
}*/


/*-------FOOOOTER-------*/

header{
	display: block;
	position: fixed;
	width: 100%;
	border: 0px red solid;

}

 header p {
	text-align: center;
	font-family: Amiamie-Light, sans-serif ;
	font-size: 20px;
	color: red;
	transform: scale(0.8, 1);
}

header p::after {
  content: '';
  position: absolute;
  left: 50%; /* Positionne le bord gauche à 50% du parent */
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: red;
  transition: width 0.5s ease, transform 0.5s ease; /* Ajoute la transition pour le transform */
  transform: translateX(-50%); /* Décale la ligne de -50% de sa propre largeur */
}

header p:hover::after {
  width: 7%; /* Largeur de la ligne au survol */
}



/*              $$\                 $$$$$$\                        
              $$ |                \_$$  _|                       
$$\  $$\  $$\ $$$$$$$\   $$$$$$\    $$ |  $$$$$$\  $$$$$$\$$$$\  
$$ | $$ | $$ |$$  __$$\ $$  __$$\   $$ |  \____$$\ $$  _$$  _$$\ 
$$ | $$ | $$ |$$ |  $$ |$$ /  $$ |  $$ |  $$$$$$$ |$$ / $$ / $$ |
$$ | $$ | $$ |$$ |  $$ |$$ |  $$ |  $$ | $$  __$$ |$$ | $$ | $$ |
\$$$$$\$$$$  |$$ |  $$ |\$$$$$$  |$$$$$$\\$$$$$$$ |$$ | $$ | $$ |
 \_____\____/ \__|  \__| \______/ \______|\_______|\__| \__| \__|*/


 #sortie{
	right: 0;
 	width: 4%;
 	border: 0px red solid;
 }

 #sortie p{
 	 	font-size: 23px;
 	 	transform: scale(1.1);
 	 	filter: drop-shadow(1px 2px 1px rgba(94, 67, 47, 0.3));
 }

/*
 #sortie p:hover{
 	color: #5E432F;
 	text-decoration: underline;
 }*/


 #sortie p::after {
  content: '';
  position: absolute;
  left: 50%; /* Positionne le bord gauche à 50% du parent */
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: red;
  transition: width 0.5s ease, transform 0.5s ease; /* Ajoute la transition pour le transform */
  transform: translateX(-50%); /* Décale la ligne de -50% de sa propre largeur */
}

#sortie p:hover::after {
  width: 100%; /* Largeur de la ligne au survol */
}

#page-entier-about-tel {
	display: none;
}

 #page-entier-about{
 	border: 0px solid blue;
 	width: 100%;
	background-image:url('../images/rayonROUGE-pageABOUT-fille.gif');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
 }

#whoIam{
	border: solid 0px green;
	display: flex;
	padding-left: 30px;
	padding-right: 30px;
	justify-content: space-between;

}


/*
#colonne1{
	background-image:url('../images/fille-about.png');
	background-size: 100%;
	background-repeat: no-repeat;
}*/


#colonne1, #colonne2{
	letter-spacing: 4%;
	line-height: 150%;
	margin: 150px auto;
	width: 400px;
	height: 50%;
	border: 0px solid pink;
	animation: apparition 1s 0s ease;
}


#colonne3{
	letter-spacing: 4%;
	line-height: 150%;
	margin: 150px auto;
	width: 300px;
	height: 50%;
	border: 0px solid pink;
	animation: apparition 1s 0s ease;
}

#colonne3 li{
	border: 0px solid orange;
}

.cv{
	float: right;
	width: 91%;
	font-family: Amiamie-Light, sans-serif ;
	font-size: 18px;
	color: red;
	display: flex;
	border: 0px solid blue;
}

.cvfr, .cveng{
		transform: scale(0.8, 1.15);
}

.cvfr:hover, .cveng:hover{
		text-decoration: underline;
}



#whoIam h1, p{
	font-family: Amiamie-Light, sans-serif ;
	font-size: 18px;
	color: red;
	transform: scale(0.8, 1.15);
}

#whoIam h1{
	text-decoration: underline;
}

#terms{
	border: 0px solid black;
}

#terms p{
	text-align: center;
	font-family: Amiamie-Light, sans-serif ;
	font-size: 15px;
	color: #5E432F;
	transform: scale(0.8, 1);
}


/*
                    $$\   $$\                                            
                    \__|  $$ |                                           
 $$$$$$$\ $$\   $$\ $$\ $$$$$$\    $$$$$$$\ $$$$$$\   $$$$$$$\  $$$$$$\  
$$  _____|$$ |  $$ |$$ |\_$$  _|  $$  _____|\____$$\ $$  _____|$$  __$$\ 
\$$$$$$\  $$ |  $$ |$$ |  $$ |    $$ /      $$$$$$$ |\$$$$$$\  $$$$$$$$ |
 \____$$\ $$ |  $$ |$$ |  $$ |$$\ $$ |     $$  __$$ | \____$$\ $$   ____|
$$$$$$$  |\$$$$$$  |$$ |  \$$$$  |\$$$$$$$\\$$$$$$$ |$$$$$$$  |\$$$$$$$\ 
\_______/  \______/ \__|   \____/  \_______|\_______|\_______/  \_______|*/

#page-entiere-suitcase{
	border: 0px purple solid;
	/*background-color: red;*/
	width: 100%;
	height: 640%;
	background: linear-gradient(red, #F9F0FF 12% 90%, red);
}

#page-debut-suitcase article{
	display: flex;
	justify-content: flex-end;
	width: 100%;
	height: 400px;
	border: 0px green solid;
	margin-top: 0px;

	background-image:url('../images/suitcase-header.png');
	background-size: 98% 94%;
	background-repeat: no-repeat;
	background-position: center;

	animation: apparition 1s 0s ease ;
}

#titre-suitcase h1{
	text-align: right;
	width: 800px;
	border: 0px black solid;
	margin-top: 140px;
	margin-right: -50px;

	font-family: Amiamie-BlackRound, sans-serif ;
	font-size: 75px;
	color: white;
	-webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: red;
  transform: scale(0.8, 1.9);
  text-shadow: 2px 1px 3px rgba(94, 67, 47, 0.3);
  line-height: 70%;
}


/*---------CASES------------*/

#cases article{
	border: 0px brown solid;
/*	filter: drop-shadow(3px 4px 3px rgba(94, 67, 47, 0.6));*/
}

.conteneur{
	width: 96%;
	margin: 5px auto;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-template-rows: repeat(60, 70px);
	grid-gap: 8px;
}

article{
	overflow: hidden;
}


.premier:nth-of-type(1){
	grid-row: 7 span;
	background-image: url('../images/back_1-1.png');
	background-size: 100%;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);

	animation: apparition 1s 0.6s ease ;
}

article:nth-of-type(2){
	grid-row: 4 span;
	background-image: url('../images/back_2-1.jpg');
	background-size: 100%;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);

	animation: apparition 1s 0.1s ease ;
}

article:nth-of-type(3){
	grid-row: 5 span;
	background-image: url('../images/back_3-1.jpg');
	background-size: 100%;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);

	animation: apparition 1s 0.5s ease ;
}

article:nth-of-type(4){
	grid-row: 3 span;
	background-image: url('../images/back_4-1.jpg');
	background-size: 100%;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);

	animation: apparition 1s 0.3s ease ;
}

article:nth-of-type(5){
	grid-row: 2 span;
	background-image: url('../images/back_1-2.jpg');
	background-size: 100%;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);

	animation: apparition 1s 0.2s ease ;
}

article:nth-of-type(6){
	grid-row: 3 span;
	background-image: url('../images/back_2-2.GIF');
	background-size: 90%;
		filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));

		animation: apparition 1s 0.7s ease ;
}

article:nth-of-type(7){
	grid-row: 3 span;
	background-image: url('../images/back_3-2.jpg');
	background-size: 100%;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);

	animation: apparition 1s 0s ease ;
}

article:nth-of-type(8){
	grid-row: 5 span;
	background-image: url('../images/back_4-2.png');
	background-size: 110% 100%;
	background-repeat: no-repeat;
		background-position: center;
			filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));

			animation: apparition 1s 0.5s ease ;
}

article:nth-of-type(9){
	grid-row: 4 span;
	background-image: url('../images/back_1-3.gif');
	background-size: 100% 100%;
	background-position: center;
		filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));

		animation: apparition 1s 0.8s ease ;
}

article:nth-of-type(10){
	grid-row: 3 span;
	background-image: url('../images/back_2-3.png');
	background-size: 84%;
	background-repeat: no-repeat;
	background-position: center;
		filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));

		animation: apparition 1s 0.4s ease ;

}

article:nth-of-type(11){
		grid-row: 4 span;
	background-image: url('../images/back_3-3.jpg');
	background-size: 100%;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(12){
		grid-row: 3 span;
	background-image: url('../images/back_4-3.png');
	background-size: 100%;
		box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(13){
		grid-row: 3 span;
	background-image: url('../images/back_1-4.jpg');
	background-size: 100%;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(14){
		grid-row: 4 span;
	background-image: url('../images/back_2-4.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
		box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(15){
		grid-row: 6 span;
	background-image: url('../images/back_3-4.png');
	background-size: 100%;
		box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(16){
		grid-row: 9 span;
	background-image: url('../images/back_4-4.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
		filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));

}

article:nth-of-type(17){
		grid-row: 2 span;
	background-image: url('../images/back_1-5.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(18){
	grid-row: 6 span;
	background-image: url('../images/back_2-5.png');
	background-size: 90% 104%;
	background-repeat: no-repeat;
	background-position: center;
	filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));

}

article:nth-of-type(19){
		grid-row: 3 span;
	background-image: url('../images/back_3-5.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
		box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(20){
		grid-row: 3 span;
	background-image: url('../images/back_4-5.png');
	background-size: 110%;
	background-repeat: no-repeat;
	background-position: center;
		box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(21){
		grid-row: 3 span;
	background-image: url('../images/back_1-6.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}


article:nth-of-type(22){
		grid-row: 4 span;
	background-image: url('../images/back_2-6.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(3){
		grid-row: 2 span;
	background-image: url('../images/back_3-6.gif');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));
}

article:nth-of-type(24){
		grid-row: 2 span;
	background-image: url('../images/back_4-6.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(25){
		grid-row: 14 span;
	background-image: url('../images/back_1-7.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(26){
		grid-row: 2 span;
	background-image: url('../images/back_2-7.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);

}

article:nth-of-type(27){
		grid-row: 4 span;
	background-image: url('../images/back_3-7.gif');
	background-size: 110% 120%;
	background-repeat: no-repeat;
	background-position: center;
	filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));
}

article:nth-of-type(28){
		grid-row: 2 span;
	background-image: url('../images/back_4-7.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
		filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));

}

article:nth-of-type(29){
		grid-row: 4 span;
	background-image: url('../images/back_1-8.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(30){
	grid-row: 2 span;
	background-image: url('../images/back_2-8.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
		box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(31){
		grid-row:  6 span;
	background-image: url('../images/back_3-8.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(32){
		grid-row:  5 span;
	background-image: url('../images/back_4-8.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(33){
		grid-row: 2 span;
	background-image: url('../images/back_1-9.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(34){
		grid-row: 4 span;
	background-image: url('../images/back_2-9.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(35){
		grid-row: 5 span;
	background-image: url('../images/back_3-9.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
		box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(36){
		grid-row: 4 span;
	background-image: url('../images/back_4-9.gif');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
		filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));

}


article:nth-of-type(37){
		grid-row: 2 span;
	background-image: url('../images/back_4-11.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
		filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));
}


article:nth-of-type(38){
		grid-row: 3 span;
	background-image: url('../images/back_2-10.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}


article:nth-of-type(39){
		grid-row: 2 span;
	background-image: url('../images/back_3-10.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}


article:nth-of-type(40){
		grid-row: 3 span;
	background-image: url('../images/back_4-10.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(41){
		grid-row: 4 span;
	background-image: url('../images/back_1-11.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(42){
		grid-row: 3 span;
	background-image: url('../images/back_2-11.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
		box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(43){
	grid-row: 6 span;
	background-image: url('../images/back_3-11.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
		box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(44){
		grid-row: 5 span;
	background-image: url('../images/back_4-11.gif');
	background-size: 130% 160%;
	background-repeat: no-repeat;
	background-position: center;
		filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));
}

article:nth-of-type(45){
		grid-row: 3 span;
	background-image: url('../images/back_1-12.JPG');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(46){
		grid-row: 3 span;
	background-image: url('../images/back_2-12.png');
	background-size: 110% 120%;
	background-repeat: no-repeat;
	background-position: center;
		filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));

}

article:nth-of-type(47){
		grid-row: 3 span;
	background-image: url('../images/back_3-12.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(48){
		grid-row: 4 span;
	background-image: url('../images/back_4-12.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
		box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(49){
		grid-row: 2 span;
	background-image: url('../images/back_4-12.gif');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
		filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));

}

article:nth-of-type(50){
		grid-row: 5 span;
	background-image: url('../images/back_2-13.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(51){
		grid-row: 6 span;
	background-image: url('../images/back_3-13.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}


article:nth-of-type(52){
		grid-row: 4 span;
	background-image: url('../images/back_4-13.jpg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(53){
		grid-row: 4 span;
	background-image: url('../images/back_2-14.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(54){
		grid-row: 9 span;
	background-image: url('../images/back_3-14.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
		filter: drop-shadow(3px 3px 3px rgba(94, 67, 47, 0.5));
}

article:nth-of-type(55){
	grid-row: 2 span;
	background-image: url('../images/back_4-14.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}

article:nth-of-type(56){
		grid-row: 6 span;
	background-image: url('../images/back_4-15.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
		box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);
}



/*
      $$\                     $$\       
      $$ |                    $$ |      
 $$$$$$$ |$$\   $$\  $$$$$$$\ $$ |  $$\ 
$$  __$$ |$$ |  $$ |$$  _____|$$ | $$  |
$$ /  $$ |$$ |  $$ |$$ /      $$$$$$  / 
$$ |  $$ |$$ |  $$ |$$ |      $$  _$$<  
\$$$$$$$ |\$$$$$$  |\$$$$$$$\ $$ | \$$\ 
 \_______| \______/  \_______|\__|  \__|
 */

/*
#duck{
	width: 100%;
	border: 1 blue solid;
	margin-bottom: -30px;
}

#duck img{
	width: 70px;
	height: 70px;
	border: 0px yellow solid;
	filter: drop-shadow(2px 2px 1px rgba(94, 67, 47, 0.4));
	margin-left: 70%;
}

#duck img:hover{
		transform: rotate(15deg);
		transition: ease 0.5s all;
		background-image: url('../images/duck-2-COIN.gif');
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
}
*/

#duck {
    position: relative; /* Point de référence pour le positionnement */
    width: 70px;
    height: 70px;
}

#duck img {
    position: absolute;
    bottom: 100%;
    left: 1500%;
    width: 100%;
    height: 100%;
    filter: drop-shadow(2px 2px 1px rgba(94, 67, 47, 0.4));
    transition: all 0.5s ease; /* Pour des transitions fluides */
}

.duck-hover {
    opacity: 0; /* Cache l'image du survol par défaut */
}

#duck:hover .duck-hover {
    opacity: 1; /* Affiche le GIF au survol */
    transform: rotate(15deg);
}

#duck:hover .duck-normal {
    opacity: 0; /* Cache l'image normale au survol */
}

#duck p{
	display: none;
	font-family: Amiamie-Light, sans-serif ;
	font-size: 15px;
	color: #F9F0FF;
	transform: scale(0.7, 1);
	position: absolute;
    bottom: 60%;
    left: 1500%;
   animation: opacity 0.5s 0s ease ;
}