@import url('navbar.css') ;
@import url('login.css') ;


/* Conteneur du titre principal */
.main-title {
    background-color: #005f73; /* Fond sombre pour contraster avec le texte */
    color: white; /* Couleur du texte */
    text-align: center;
    padding: 1.5em 0; /* Espacement intérieur */
    margin-top: -5px; /* Réduction d'écart entre l'image et le titre */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre légère */
}

.main-title h1 {
    font-size: 2.5em;
    margin: 0;
}

.main-title p {
    font-size: 1.2em;
    margin: 0.5em 0 0;
}

/* Style de base */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    color: #333;
}

header {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    margin-bottom: -4px;
}

.hero-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 500px;
}



/* Footer */
footer {
    text-align: center;
    margin-top: 2em;
    color: #6c757d;
    padding: 10px;
    border-top: 1px solid #cfd8dc;
}


/* Section du message principal */
.main-message {
    display: flex; /* Crée deux colonnes */
    justify-content: space-between;
    align-items: center;
    padding: 2em;
    gap: 2em; /* Espace entre les colonnes */
    background-color: #f9f9f9; /* Couleur de fond douce */
    border-radius: 10px;
    margin: 2em auto;
    max-width: 900px; /* Largeur maximale de la section */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap; /* S'adapte aux petits écrans */
}

/* Colonne texte */
.message-text {
    flex: 1; /* Prend tout l'espace disponible restant */
}

.message-text h2 {
    font-size: 2em;
    color: #333;
    margin-bottom: 0.5em;
}

.message-text p {
    font-size: 1.2em;
    line-height: 1.6;
    color: #555;
}

ul {
    list-style-type: disc; /* Puces classiques */
    padding-left: 1.5em; /* Indentation */
    margin: 1em 0;
    color: #333; /* Couleur du texte */
}

ul li {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 0.5em;
}

a {
    text-decoration: none;
    color: inherit; /* Garde la couleur du texte environnant */
}

/* Liens dans la navigation */
nav ul li a {
    text-decoration: none; /* Assure que les liens de la navbar ne sont pas soulignés */
}

/* Style au survol */
a:hover {
    text-decoration: none; /* Empêche l'affichage du soulignement au survol */
    opacity: 0.8; /* Légère atténuation pour un effet subtil */
}


/* Style des listes à l'intérieur des sections avec fond clair */
.main-message ul {
    list-style-type: square; /* Puces carrées */
    padding-left: 2em;
    color: #005f73; /* Harmonisation avec la charte graphique */
}

/* Style des listes à l'intérieur des messages ou encadrés */
.message-text ul {
    list-style-type: circle;
    padding-left: 1.8em;
    color: #007bff;
}

/* Colonne image */
.message-image {
    flex: 1; /* Prend la moitié de l'espace disponible */
    text-align: center;
}

.message-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Media query pour écrans plus petits */
@media (max-width: 768px) {
    .main-message {
        flex-direction: column; /* Passe l'image en dessous du texte */
    }
}

/* Style du bouton "C'est parti !" */
.cta-button {
    display: inline-block;
    margin-top: 1.5em; /* Espace entre le texte et le bouton */
    padding: 0.8em 1.5em;
    background-color: #005f73; /* Couleur de fond sombre */
    color: #f9f9f9; /* Couleur du texte clair */
    font-size: 1.1em; /* Taille du texte */
    font-weight: normal; /* Poids du texte */
    text-decoration: none; /* Supprime le soulignement */
    border-radius: 5px; /* Bords arrondis */
    border: 1px solid #555; /* Bordure subtile */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Animation au survol */
}

/* Interaction au survol */
.cta-button:hover {
    background-color: #555; /* Couleur légèrement plus claire au survol */
    transform: translateY(-2px); /* Léger déplacement vers le haut */
}