@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;
}


body{
	cursor: url('../images/cursor-adibou.png'), auto;
	background-color:#F9F0FF;
	display: inline-block;

	width: 100vw;          /* 5. Prend toute la largeur de l'écran */
	height: 100vh;         /* 6. Prend toute la hauteur de l'écran (optionnel) */
}

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

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

#kpuisagraphicdesigner {

	text-align: center;
	/*align-items: center;*/
	width: 1000px;
	border: 0px solid red;
	font-family: Amiamie-BlackRound, sans-serif ;
	font-size: 70px;
	color: white;
	-webkit-text-stroke-width: 1.5px;
  	-webkit-text-stroke-color: #5E432F;
  	/*transform: scale(3, 1);*/
  	line-height: 45px;
  	transform: scale(0.5, 1.4);
  	letter-spacing: -4px;
  	text-shadow: 3px 2px 6px rgba(94, 67, 47, 0.4);
}

#kpuisagraphicdesigner h1{
	margin-top: -10px;
	margin-left: -20px;
	animation: apparition 0.6s 0s ease ;
}

#scroll-droite{
	display: none;
}

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

#works{
	width: 100vw;
	height: 100%;
	border: 0px solid purple;
}

#prez-projet{
	display: none;
}

#prez-projet{
	float: right;
	width: 80%;
	height: 100%;
	border: 0px green solid;
	/*margin-top: 23px;*/
	 overflow-x: auto;
	 position: relative;
}

#prez-projet-INUTILE{
	float: right;
	width: 80%;
	height: 100%;
	border: 0px orange solid;
	/*margin-top: 23px;*/
	position: relative;

}

#prez-projet article{
	display: inline-block;
	margin-top: 32%;
	width: 98%;
	height: 80%;
	border: 0px yellow solid;
	filter: drop-shadow(2px 3px 2px rgba(94, 67, 47, 0.4));
	animation: opacity 0.5s 0s ease;
	overflow-x: auto;
	white-space: nowrap;/*

	/* position: fixed;
  	bottom: 0; /* ou top: 0;
}


#prez-projet video{
  /* Affiche les vidéos côte à côte */
  display: inline-block;
}

#prez-projet img{
  /* Affiche les vidéos côte à côte */
  display: inline-block;
}

#prez-projet aside{
	margin-top: 0px;
	width: 95%;
	border: 0px orange solid;
	animation: opacity 1s 0s ease ;
	position: absolute;
	top: 0;
}

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

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

#prez-projet aside p{
	border: 0px blue solid;
	margin-top: -2%;
	text-align: left;
	font-family: Amiamie-Light, sans-serif ;
	font-size: 15px;
	color: #5E432F;
	transform: scale(0.8, 1);
	/*margin-left: -20px;*/
	letter-spacing: 1%;
	line-height: 130%;
}


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

.pocket video{
	float: right;
	width: 90%;
	height: auto;
	background-size: cover;
}

.jeanimal img{
	float: right;
	width: 90%;
	height: auto;
	background-size: cover;
}

.gigolo video{
	float: right;
	width: 90%;
	height: auto;
	background-size: cover;
}


.motion video{
	float: right;
	width: 90%;
	height: auto;
	background-size: cover;
}


.chronique video, .chronique img{
	float: right;
	width: 90%;
	height: auto;
	background-size: cover;
}

.fabiana img{
	float: right;
	width: 90%;
	height: auto;
	background-size: cover;
}

.caboom video, .caboom img{
	float: right;
	width: 90%;
	height: auto;
	background-size: cover;
}

.sketch img{
	float: right;
	width: 90%;
	height: auto;
	background-size: cover;
}

.boutonSonActif{
	float: right;
	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 {
	
	display: block;
	/*margin-top: 210px;*/
	/*display: flex;*/
	margin-top: 23px;
	margin-left: 3px;
	width: 19%;
	height: 140%;
	border: 0px solid skyblue;
	justify-content: space-between;
	
}

.sous-div-picto1{
	position: sticky;
	top: 10px;
}

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

.sous-div-picto1 .gifsketch{
	margin-top: 17%;
	rotate: 90deg;
	width: 100px;
	border: 0px hotpink solid;
}

.sous-div-picto1 .gifgigolo{
	margin-top: -15%;
}


.sous-div-picto2 {
	margin-top: 400%;
	width: 100px;
	height: 90px;
	border: 0px blue solid;
}

.sous-div-picto2 p::after {
  content: '';
  position: absolute;
  left: 72%; /* Positionne le bord gauche à 50% du parent */
  bottom: 0px;
  width: 0;
  height: 1px;
  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: 140%; /* Largeur de la ligne au survol */
}

.suitcase-bouton{
	background-image:url('../images/suitcase-picto2.gif');
	background-size: 100% 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 {
	border: 0px hotpink solid;
	width: 100%;
	/*overflow-x: auto;
	white-space: nowrap;*/
}


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

header{
	display: block;
	position: sticky;
	top: 5px;
	width: 100%;
	border: 0px red solid;

}

 header p {
 	margin-top: -18px;
	text-align: center;
	font-family: Amiamie-Light, sans-serif ;
	font-size: 14px;
	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: 1px;
  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{
	display: none;
}
 #sortie-tel {
 	top: 0px;
 	width: 100%;
 	border: 0px red solid;
 }

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

 #sortie-tel p::after {
  content: '';
  position: absolute;
  left: 50%; /* Positionne le bord gauche à 50% du parent */
  bottom: 0;
  width: 0;
  height: 1px;
  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-tel p:hover::after {
  width: 100%; /* Largeur de la ligne au survol */
}

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

 #page-entier-about-tel{

 	display: block;
 }

 #page-entier-about-tel{
 	top: 0px;
 	width: 100%;
 	height: 100%;
	background-image:url('../images/rayonROUGE-pageABOUT-fille-petitereso.gif');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;

 }

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

#colonne1-tel {
	padding-top: 25%;
	padding-left: 6%;
	padding-bottom: 32%;
	letter-spacing: 4%;
	line-height: 100%;
	width: 300px;
	height: 70%;
	border: 0px solid blue;
	animation: apparition 1s 0s ease;
}


#colonne3-tel ul{
	width: 100%;
	display: flex;
	justify-content: space-between;
}

#colonne3-tel{

	letter-spacing: 4%;
	line-height: 100%;
	margin: 10% auto;
	width: 80%;
	height: 30%;
	border: 0px solid blue;
	animation: apparition 1s 0s ease;
}


#colonne3-tel li{
	border: 0px solid pink;
}

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

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

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



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

#whoIam-tel h1{
	text-decoration: underline;
}

#terms-tel {
	width: 100%;
	border: 0px solid black;
}

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



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

#page-entiere-suitcase{
	width: 100%;
	height: 505%;
	background: linear-gradient(red, #F9F0FF 12% 90%, red);
}

#page-debut-suitcase article{
/*	display: flex;
	justify-content: flex-end;*/
	width: 100%;
	height: 230px;
	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: 100%;
	border: 0px black solid;
	margin-top: 75px;
	margin-right: -40px;

	font-family: Amiamie-BlackRound, sans-serif ;
	font-size: 45px;
	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(3,1fr);
	grid-template-rows: repeat(41, 85px);
	grid-gap: 8px;
}

article{
	overflow: hidden;
}


.premier:nth-of-type(1){
	grid-row: 3 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: 2 span;
	background-image: url('../images/back_2-1.jpg');
	background-size: 100%;
	background-position: center;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);

	animation: apparition 1s 0.1s ease ;
}

article:nth-of-type(3){
	grid-row: 2 span;
	background-image: url('../images/back_3-1.jpg');
	background-size: 100% 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: 1 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: 1 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: 2 span;
	background-image: url('../images/back_2-2.GIF');
	background-size: 120%;
	background-position: center;
	background-repeat: no-repeat;
		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: 2 span;
	background-image: url('../images/back_3-2.jpg');
	background-size: 100% 100%;
	box-shadow: 3px 3px 3px rgba(94, 67, 47, 0.5);

	animation: apparition 1s 0s ease ;
}

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

	animation: apparition 1s 0.3s ease ;
}

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

		animation: apparition 1s 0.5s ease ;
}

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

article:nth-of-type(14){
		grid-row: 2 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);
		animation: apparition 1s 0.4s ease ;
}

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

}

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

}

article:nth-of-type(17){
		grid-row: 1 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: 3 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: 1 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: 1 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: 2 span;
	background-image: url('../images/back_1-6.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(22){
		grid-row: 2 span;
	background-image: url('../images/back_2-6.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(3){
		grid-row: 1 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: 1 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: 7 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: 1 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: 2 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: 1 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: 2 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: 1 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:  2 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:  3 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: 1 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: 2 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: 2 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: 3 span;
	background-image: url('../images/back_4-9.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(37){
		grid-row: 1 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: 1 span;
	background-image: url('../images/back_2-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(39){
		grid-row: 1 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: 2 span;
	background-image: url('../images/back_4-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(41){
		grid-row: 2 span;
	background-image: url('../images/back_1-11.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(42){
		grid-row: 1 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: 3 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: 3 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: 1 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: 1 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: 2 span;
	background-image: url('../images/back_3-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(48){
		grid-row: 2 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: 1 span;
	background-image: url('../images/back_4-12.gif');
	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(50){
		grid-row: 2 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: 4 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: 2 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: 2 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: 4 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: 1 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: 3 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 {
    position: relative; /* Point de référence pour le positionnement */
    width: 70px;
    height: 70px;
}

#duck img {
    position: absolute;
    bottom: 10%;
    left: 100%;
    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: 150%;
   animation: opacity 0.5s 0s ease ;
}