@layer components {
	
	.button-group {
		display: flex;
		flex-direction: column;
		gap: 15px;
		align-items: flex-start;
		margin-top: 30px;
	}
  .btn {
		background-color: #3399cc;
		color: white;
		padding: 12px 24px;
		border: none;
		border-radius: 30px;
		font-size: 1em;
		transition: background-color 0.3s ease;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		width: 100%;		/* occupe toute la largeur disponible */
		max-width: 300px;	/* limite la taille si trop large */
		position: relative;
		overflow: hidden;
	}

	.btn:hover {
		background-color: #287aa9;
		transform: translateX(5px);	/* léger déplacement à droite */
	}
	
	.btn i {
		min-width: 20px;
		text-align: center; /*Alignement des icônes*/
	}
	
/* Ajoute une flèche à droite */	
	.btn::after {
		content: "→";
		margin-left: auto;
		transition: transform 0.3s ease;
		font-weight: bold;
		opacity: 0.8;
	}

/* La flèche bouge aussi au survol */
	.btn:hover::after {
		transform: translateX(5px);
	}

	.tooltip {
		position: relative;
		display: inline-block;
	}

	.tooltip .tooltiptext {
		visibility: hidden;
		background-color: rgba(0, 51, 102, 0.75);
		color: #fff;
		padding: 4px 8px;
		border-radius: 6px;
		position: absolute;
		top: 50%;
		right: calc(100% + 8px);
		transform: translateY(-50%);
		opacity: 0;
		transition: opacity 0.3s;
		font-size: 0.8em;
		z-index: 9999;
	}

	.tooltip:hover .tooltiptext {
		visibility: visible;
		opacity: 1;
	}

	.module {
		background-color: rgba(255, 255, 255, 0.7);
		border: 2px solid #a3d5ff;
		border-radius: 16px;
		padding: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		text-align: center;
		transition: transform 0.3s ease;
	}

	.module:hover {
		transform: scale(1.03);
	}

	.form-container {
		background: #fff;
		padding: 2rem;
		border-radius: 12px;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
		max-width: 600px;
		width: 100%;
	}

	.form-container input,
	.form-container textarea,
	.form-container select,
	.form-container button {
		width: 100%;
		box-sizing: border-box;
	}
	
	.logo {
		height: 65px;
		width: auto;
		margin-right: 10px;
	}

	.logoTitre {
		display: block;
		width: 80%;
		max-width: 150px;
		height: auto;
		margin: 0 auto 30px auto;
	}


}