@font-face {
            font-display: swap;
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 400;
            src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2');
        }
        body {
            font-family: 'Roboto', sans-serif;
            font-size: 1.6rem;
            background-color: #131316;
            color: #fff;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow-x: hidden;
        }

        @media (max-width: 1000px) {
            body {
                font-size: 1.2rem;
            }
        }

        @media (max-width: 480px) {
            body {
                font-size: 1rem;
            }
        }

        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: fadeIn 2s ease-in-out;
        }

        form {
            max-width: 90%;
            width: 90%;
            padding: 30px;
            background-color: #111;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            animation: fadeIn 2s ease-in-out;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #fff;
            font-size: 1.2rem;
        }

        input, textarea {
            width: 100%;
            padding: 15px;
            margin-bottom: 20px;
            box-sizing: border-box;
            border: 1px solid #555;
            border-radius: 4px;
            background-color: #333;
            color: #fff;
            font-size: 1.2rem;
        }

        textarea {
            height: 200px; /* Agrandissement de la zone de texte */
            resize: vertical; /* Permettre à l'utilisateur de redimensionner verticalement */
        }

        input[type="submit"] {
            background-color: #555;
            color: #fff;
            cursor: pointer;
            border: none;
            padding: 15px 30px;
            border-radius: 4px;
            transition: background-color 0.3s ease;
            font-size: 1.4rem;
            width: 100%;
        }

        input[type="submit"]:hover {
            background-color: #777;
        }

footer {
  text-align: center;
  padding: 20px 0;
  background-color: #111;
  animation: fadeIn 0.5s ease-in-out;
}


.footer-icon {
  width: 40px;
  height: auto;
  vertical-align: middle;
  margin-right: 8px;
}

.footer-icon--email {
  margin-left: 30px; /* seul l’email a un margin-left supplémentaire */
}
.footer-link {
  color: #007bff;                      /* même couleur que votre inline */
  display: inline-block;               /* pour que margin-bottom fonctionne */ 
  margin-bottom: 20px;                 /* distance sous le lien */ 
  text-decoration: none;          /* si vous vouliez le souligner */ 
}


        .btn-accueil {
            position: fixed;
            top: 2vh; /* Déplace le bouton vers le bas */
            left: 2vw; /* Déplace le bouton vers la droite */
            z-index: 1000;
        }

        .btn-accueil img {
            display: block;
            width: 30px;
            height: auto;
	    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 1));
        }

        .btn-accueil:hover img {
            opacity: .8;
        }

        /* Animation */
        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }