@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

html {
	height: 100%;
	scroll-behavior: smooth;
	display: flex;
	flex-direction: column;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Roboto", sans-serif;
}

h5 {
	font-size: 20px;
	color: #494D5F;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 20px 100px;
	background: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 100;
}

footer .logo img,
.logo img {
	height: auto;
	width: 40px;
}

/***************** NAVBAR.PHP *****************/

/* Style général pour la navbar */
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Style des liens dans la navbar */
.navbar a {
	position: relative;
	font-size: 18px;
	color: #494D5F;
	font-weight: 500;
	text-decoration: none;
	margin-left: 40px;
	/* Ajusté pour ne pas créer de trop grands espaces */
	padding: 8px 0;
	/* Ajuster le padding vertical */
}

/* Ligne soulignée sous les liens */
.navbar a::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 0;
	height: 2px;
	background-color: #494D5F;
	transition: 0.3s;
}

.navbar a:hover::before {
	width: 100%;
}

/* Style du sous-menu (Projets) */
.navbar .sousmenu {
	position: relative;
	display: inline-block;
}

/* Contenu du sous-menu */
.navbar .sousmenu-contenu {
	display: none;
	position: absolute;
	background-color: #5E3BEE;
	padding: 0;
	margin: 0;
	width: 200px;
	/* Largeur fixe pour tous les sous-menus */
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
	/* Ombre douce */
	z-index: 1000;
	border-radius: 8px;
	/* Coins arrondis */
	overflow: hidden;
	/* Cache tout débordement */
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	opacity: 0;
	transform: translateY(10px);
	/* Légère animation de glissement vers le haut */
}

/* Quand la classe 'show' est ajoutée, le sous-menu apparaît */
.navbar .sousmenu-contenu.show {
	display: block;
	opacity: 1;
	transform: none;
	/* Pas d'animation nécessaire pour l'instant */
}

/* Afficher le sous-menu au survol */
.navbar .sousmenu:hover .sousmenu-contenu {
	display: block;
	opacity: 1;
	transform: translateY(0);
	/* Réinitialisation de l'animation */
}

/* Style des liens dans le sous-menu */
.navbar .sousmenu-contenu a {
	color: #FFFFFF;
	/* Couleur de texte principale */
	padding: 12px 16px;
	/* Espacement interne confortable */
	text-decoration: none;
	display: block;
	/* Les liens prennent toute la largeur disponible */
	box-sizing: border-box;
	/* Inclut le padding et les bordures dans la largeur totale */
	font-size: 16px;
	transition: background-color 0.3s ease, color 0.3s ease;
	border-bottom: 1px solid #f1f1f1;
	/* Séparation des éléments */
}

.navbar .sousmenu-contenu a:last-child {
	border-bottom: none;
	/* Pas de ligne sur le dernier élément */
}

/* Effet de hover sur les liens du sous-menu */
.navbar .sousmenu-contenu a:hover {
	background-color: #2b1486;
	/* Fond violet au survol */
	color: white;
	/* Couleur de texte blanche au survol */
}

.navbar button#menuButton {
	display: none;
	/* Cacher le bouton sur les grands écrans */
}

/***************** INDEX.PHP *****************/
.main {
	padding: 90px 85px;
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-height: 100vh;
	background: url('../img/bg_site.jpg') no-repeat center center;
	background-size: cover;
}

.main .left {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: start;
}

.main .left h3 {
	margin-top: 10px;
	font-weight: bold;
	font-size: 46px;
}

.main .left h3 span {
	color: #5E3BEE;
}

.skills h3,
.portfolio .lastProject h3 {
	font-size: 40px;
	margin-top: 20px;
}

.main .left p {
	color: #494D5F;
	font-size: 22px;
	margin-top: 20px;
}

.skills {
	padding: 110px 85px 0;
	margin-bottom: 100px;
}

.skills .skills-items {
	display: flex;
	gap: 30px;
	margin-top: 70px;
}

.skills .skills-items .item {
	background-color: #a0d2eb;
	width: 25%;
	border-radius: 10px;
	padding: 32px;
	border-bottom: 4px solid transparent;
	cursor: pointer;
	transition: all 0.3s ease;
}

.skills .skills-items .item:hover {
	border-bottom: 4px solid #5E3BEE;
}

.skills .skills-items .item .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: white;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	margin-bottom: 22px;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

.skills .skills-items .item .icon i {
	font-size: 26px;
	color: #494D5F;
}

.skills .skills-items .item h4 {
	font-size: 18px;
}

.skills .skills-items .item p {
	margin-top: 20px;
	font-size: 14px;
	line-height: 22px;
	color: #494D5F;
}

.portfolio {
	background-color: #a0d2eb;
	padding: 110px 85px;
}

.portfolio .lastProject {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 60px;
}

.portfolio .lastProject button {
	background-color: #5E3BEE;
	padding: 10px 20px;
	color: white;
	display: flex;
	align-items: center;
	cursor: pointer;
	gap: 8px;
	border: none;
	border-radius: 10px;
}

.portfolio .lastProject button i {
	font-size: 26px;
}

.portfolio .portfo-items {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.portfolio .portfo-items .item {
	width: 30%;
	background-color: white;
	border-radius: 10px;
	border-bottom: 4px solid transparent;
	cursor: pointer;
	box-shadow: 0 5px 32px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
}

.portfolio .portfo-items .item:hover {
	border-color: #5E3BEE;
}

.portfolio .portfo-items .item img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	object-position: top;
	border-radius: 10px 10px 20px 20px;
}

.portfolio .portfo-items .item .info {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 32px 42px;
}

.portfolio .portfo-items .item .info p {
	font-size: 13px;
}

.portfolio .portfo-items .item .info a {
	text-decoration: underline;
	text-underline-offset: 10px;
	text-decoration-color: #5E3BEE;
}

.portfolio .portfo-items .item .info a i {
	margin-left: 2px;
	font-size: 16px;
}

/*********************** FOOTER.PHP **********************/
footer .logo {
	display: flex;
	align-items: center;
}

footer .logo a {
	margin-left: 8px;
	font-weight: bold;
	font-size: 20px;
}

footer .top ul {
	display: flex;
	gap: 40px;
}

footer {
	background-color: white;
	padding: 50px;
	text-align: center;
	width: 100%;
	margin-top: auto;
}

/***************** RESPONSIVITE 1200PX *****************/
@media screen and (max-width:1200px) {

	.navbar button {
		display: none;
	}

	.main .left h5 {
		font-size: 18px;
	}

	.main .left h3 {
		font-size: 36px;
	}

	.main .left p {
		font-size: 18px;
	}

	.main .right img {
		width: 380px;
	}

	.skills .skills-items {
		gap: 10px;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.skills .skills-items .item {
		width: 49%;
	}

	.skills h3,
	.portfolio .lastProject h3 {
		font-size: 32px;
	}

	footer .top ul {
		gap: 20px;
	}
}

/***************** RESPONSIVITE 992px *****************/
@media screen and (max-width: 992px) {
	.navbar button {
		display: none;
	}

	.main {
		flex-direction: column;
	}

	.portfolio .portfo-items {
		gap: 22px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.portfolio .portfo-items .item {
		width: 48%;
	}
}

/***************** RESPONSIVITE 782px *****************/
@media screen and (max-width: 782px) {

	/* Cacher le logo quand le menu est ouvert */
	header.open .logo {
		display: none;
	}

	/* Afficher les liens lorsque le menu est ouvert */
	header.open a {
		display: flex;
		padding: 10px 20px;
		align-items: center;
		justify-content: center;
		width: 100%;
		border-bottom: 1px solid #ccc;
	}

	/* Afficher le bouton du menu burger */
	.navbar button#menuButton {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		padding: 7px;
		background-color: transparent;
		border: none;
		cursor: pointer;
	}

	/* Ajuster la navbar pour mobile */
	.navbar {
		justify-content: space-between;
		padding: 0 20px;
		flex-direction: column;
		align-items: flex-start;
	}

	/* Cacher les liens principaux par défaut */
	.navbar a {
		display: none;
	}

	/* Réafficher les liens lorsque le menu est ouvert */
	header.open .navbar a {
		display: block;
		margin-left: 0;
		padding: 12px 20px;
		font-size: 18px;
		text-align: center;
		border-bottom: 1px solid #ddd;
	}

	/* Style spécifique pour le sous-menu sur mobile */
	.navbar .sousmenu-contenu {
		position: relative;
		width: 100%;
		box-shadow: none;
		border-radius: 0;
	}

	/* Réglage de l'espacement dans le corps de la page */
	.main {
		padding: 42px;
	}

	.skills {
		padding: 60px 20px 0;
	}

	.skills .skills-items {
		gap: 12px;
	}

	.portfolio {
		padding: 40px 20px;
	}

	.portfolio .portfo-items {
		gap: 12px;
	}

	footer {
		padding: 40px 20px;
	}
}

/***************** RESPONSIVITE 576px *****************/
@media screen and (max-width: 576px) {

	/* Style du bouton de vote ajusté pour les petits écrans */
	#voteButton {
		width: 80%;
		bottom: 10px;
		right: 10px;
		left: 50%;
		transform: translateX(-50%);
		display: block;
	}

	/* Réduction des marges pour les images */
	.content input[type="image"] {
		margin: 5px;
	}

	/* Ajustements pour une meilleure lisibilité sur petits écrans */
	.tabOrange tr,
	.selected-poster,
	#voteButton {
		font-size: 14px;
	}

	/* Taille des liens ajustée sur les petits écrans */
	.navbar a {
		font-size: 14px;
	}

	.navbar .logo a {
		font-size: 13px;
	}

	.main .left h3 {
		font-size: 28px;
	}

	.main .left p {
		font-size: 16px;
	}

	.skills .skills-items .item {
		width: 100%;
	}

	.portfolio .portfo-items .item {
		width: 100%;
	}

	.portfolio .lastProject button {
		font-size: 12px;
		padding: 8px 14px;
	}

	/* Style spécifique pour le sous-menu sur petits écrans */
	.navbar .sousmenu-contenu a {
		padding: 15px 10px;
		text-align: center;
	}
}

/***************** DÉSACTIVATION DU HOVER POUR LES ÉCRANS TACTILES *****************/

@media (hover: none) {

	/* Désactiver les transitions de hover pour les liens */
	.navbar a:hover::before {
		width: 0;
	}

	/* Désactiver les transitions de hover pour les sous-menus */
	.navbar .sousmenu-contenu a:hover {
		background-color: transparent;
		color: #494D5F;
	}

	/* Désactiver les effets de hover sur tout le site */
	* {
		transition: none !important;
	}

	/* Désactiver les animations dans les sous-menus */
	.navbar .sousmenu-contenu {
		transform: none !important;
		opacity: 1 !important;
	}

	/* Désactiver le hover sur les boutons */
	.navbar button:hover {
		background-color: transparent;
		border-color: #494D5F;
	}

	/* Désactiver les transformations de hover sur le bouton de vote */
	#voteButton:hover {
		background-image: linear-gradient(to right, #007BFF, #00DBDE);
		transform: none;
	}
}