/* Remise à zéro */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Assurez-vous que et occupent 100% de la hauteur */ html, body { height: 100%; margin: 0; } /* Body en Flex pour forcer le footer en bas */ body { display: flex; flex-direction: column; min-height: 100vh; font-family: Arial, Helvetica, sans-serif; color: #333; position: relative; } /* Pseudo-élément pour le fond en transparence */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url("images/Train.jpg") center center / cover no-repeat; opacity: 0.2; z-index: -1; } /* HEADER */ header { text-align: center; padding: 10px 0; background-color: #000; } /* Bannière */ .header-banner { max-width: 100%; height: auto; display: block; margin: 0 auto; max-height: 150px; /* Réduction de la taille de la bannière */ } /* SECTION PRINCIPALE - on force ici la croissance pour occuper l'espace restant */ main { flex: 1; padding: 20px; max-width: 960px; margin: 0 auto; background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; } /* Titres */ h1, h2 { margin-bottom: 15px; text-align: center; } /* Paragraphes */ p { margin-bottom: 15px; line-height: 1.5; text-align: justify; } /* Conteneur des boutons */ .button-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } /* Boutons */ .btn { display: inline-block; padding: 12px 24px; background-color: #1976D2; color: #fff; text-decoration: none; border-radius: 4px; transition: background-color 0.3s ease; font-weight: bold; text-align: center; } .btn:hover { background-color: #1854a6; } /* FOOTER */ footer { background-color: #000; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; padding: 10px 0; margin-top: 20px; width: 100%; } /* Ciblage des paragraphes du footer pour forcer l'alignement centré */ footer p { width: auto; margin: 0; /* Suppression des marges par défaut */ text-align: center; } /* Responsive */ @media (max-width: 768px) { main { margin: 10px; padding: 10px; } .button-container { flex-direction: column; align-items: center; } }