body {
	background: linear-gradient(to right, #fbd13e, white, #627ddc);
	font-family: Nunito, sans-serif;
}


/*--------------- HEADER ---------------*/

header {
	width: 100vw;
	height: 70px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
}



#reseaux {
	display: flex;
	font-size: 1.6vw;
	align-items: center;
	gap: 20px;
	height: 70px;
	margin-left: 20px;
	width: 25vw;
}

#reseaux li a img {
	width: 40px;
}


#logo{
	width: 21vw;
	height: 70px;
	display:flex;
	width: 30vw;
}
#logo a img{
	width: 60px;
}




#logo a{
	justify-content: space-around;	
	align-items: center;
	font-family: Nunito;
	font-size: 32px;
	display:flex;
	gap: 20px;
	text-decoration: none;
	color: black;
}


nav ul {
	width: 25vw;
	background-color: #ffffff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 70px;
	gap: 20px;
}



#aboutprojfren li a{
	font-family: Nunito;
	font-size: 0.9em;
	text-decoration: none;
	color: black;
	text-transform: uppercase;
}



#duck{
	font-size: 2vw;
	margin: auto;
}

/*--------------- FOOTER ---------------*/

footer{
	width: 100vw;
	height: 40px;
	display:flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;	
}


footer p{
	margin: 20px;
	font-size: 3vh; /* Le header est à 2vw fontsize just in case yk*/
	font-family: Nunito;
}




/*--------------------- INDEX -------------------*/

h1{
	font-size: 2vw;
}


h2{
	font-family: Nunito;
	font-size: 2em;
	text-align: center;
	margin: auto;
	margin-top: 50px;
	text-align: center;
	max-width: 1010px;
	line-height: 1.2em;
}


section{
	height: calc(100vh - 120px);
	/*--------------- LE FOND ICI (Tester en diago) ---------------*/	width: 100vw;
}

aside{
	margin:10vh auto 0px;
	display: flex;
	border-radius: 15px;
	max-width: 100%;
}


aside figure{
	border-radius: 20px;
	margin: auto;
	overflow: hidden;
	width: 250px;
	height: 250px;
}



/*--------------------- ABOUT -------------------*/



#aboutcontent{
	border: 1px solid black;
	display: flex;
	align-items: center;
	justify-content: space-around;

	}

#abouttext {
    font-size: 1.2em;
    margin-top: 35px;
    background-color: #ffffff;
    width: 40vw; /* Largeur adaptative à la fenêtre */
    height: 70vh; /* Laisse la hauteur s'adapter au contenu */
    overflow: scroll;
    padding: 20px; /* Pour éviter que le texte touche les bords */
    box-sizing: border-box; /* Pour inclure le padding dans la largeur */
    border-radius: 10px; 
    border: 1px solid black;
}


#imagesabout{
    border: 1px solid black;
}


#aboutimage{
	background-color: #ffffff;
    width: 120px; /* taille de l’image */
    border-radius: 10px;
}




#postit1{
	width: 90px;
}

#postit2{
	width: 90px;
	transform: rotate(90deg); /*fonctionne paaaaaaas*/
}

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

/*---------- TEXTE ----------*/

#accroche{
	font-size: 3.8vh;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 40px;
	text-align: center;
	max-width: 810px;
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 4vh;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	z-index: 100vh;
}

footer p a{
	text-decoration: none;
	color: black;
}

/*---------- IMAGES ----------*/

.container {
	display: grid;
	grid-template-columns: repeat(3, minmax(220px, 1fr));
	gap: 100px;
	justify-content: center;
	padding: 100px;
}

.container img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 15px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s ease;
	display: block;
}



.container div {
	background-color: white;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	text-align: center;
	transition: transform 0.4s ease;
	margin-bottom: 60px;
}

.container div:hover {
	transform: scale(1.03);
}



/*--------------------- ERREUR -------------------*/


#erreur{
	background-color: #ffffff;
	font-size: 2vw;
	text-align: center;
	margin-top: 17vw;
	padding: 20px;
}