/*
|==========================================|
|       STYLES CSS UNIFIÉS ET CORRIGÉS      |
|==========================================|
*/

/* --- 1. RESET & BASE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Essentiel pour le layout moderne */
}

body {
    /* Police élégante pour un site historique, couleurs neutres */
    font-family: 'Georgia', serif; 
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4; 
    margin: 0;
    padding: 0;
}

/* Titres H1 par défaut */
h1 {
    font-size: 2.5em;
    color: whitesmoke; /* Bleu marine, couleur institutionnelle */
    margin: 0; /* Supprime le margin H1 redondant */
}

/* --- 2. LAYOUT PRINCIPAL & STRUCTURE --- */
.container {
    max-width: 1000px; 
    /* Ajout de marges plus généreuses pour un look propre */
    margin: 40px auto; 
    padding: 20px 40px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    border-radius: 8px;
    /* Correction: La règle 'width: 90%' du premier bloc est incluse par max-width */
}

/* Header & Footer: Utilise le style le plus récent et le plus professionnel */
.header,
.footer {
    background-color: #003366; /* Bleu foncé */
    color: #fff;
    text-align: center;
    padding: 20px 10px;
}

.footer {
    margin-top: 40px; /* Augmente l'espacement avec le contenu */
}

/* Navbar: Utilise une couleur légèrement différente pour la distinction */
.navbar {
    background: #006699; /* Bleu moyen */
    padding: 10px 0; /* Padding vertical, pas de padding horizontal pour les liens */
    text-align: center;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    margin: 0 18px; /* Espacement ajusté */
    font-weight: bold;
    padding: 5px 0; /* Ajout d'un padding pour la zone cliquable */
    display: inline-block;
}

/* --- 3. CONTENU SPÉCIFIQUE (Home Page) --- */

/* Titre de Section (H2) */
.title-container {
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.title-container h2 {
    font-size: 1.8em; /* Légèrement réduit par rapport à 2em */
    text-align: center;
    padding-bottom: 10px;
}


/* Image du Drapeau et images simples */
.flag-image,
img.responsive {
    display: block;
    margin: 20px auto;
    max-width: 300px;
    height: auto;
    border: 1px solid #ccc; 
    border-radius: 4px; /* Ajout d'un léger arrondi */
}

/* Images dans la timeline ou les listes */
.timeline li img {
    /* Maintient la réactivité, mais limite la hauteur dans une liste */
    max-width: 150px; 
    height: auto;
    float: left; /* Permet au texte d'entourer l'image */
    margin-right: 15px;
    border: none;
}
/* Pour nettoyer le float après l'image dans la liste */
.timeline li:after {
    content: "";
    display: table;
    clear: both;
}

/* Listes */
.resources-list,
.timeline ul {
    list-style: none;
    padding: 10px 0;
}

.resources-list li,
.timeline li {
    margin: 15px 0;
    padding: 15px;
    border: 1px solid #e0e0e0; /* Bordure plus visible */
    border-radius: 5px;
    background-color: #fafafa;
}

.timeline li a,
.resources-list li a {
    color: #dc3545; /* Couleur d'action: Rouge (Patriote) */
    text-decoration: none;
    font-weight: bold;
}


/* --- 4. SECTION MULTIMÉDIA ET FORMULAIRE --- */

/* Disposition des Éléments Multimédia et du Bouton (Flexbox pour la ligne) */
.media-action-section {
    display: flex;
    flex-wrap: wrap; 
    align-items: center; 
    justify-content: space-between; 
    gap: 30px; /* Espacement accru */
    padding-top: 25px;
    margin-top: 25px;
    border-top: 2px solid #ccc; /* Séparateur plus marqué */
}

/* Style de la vidéo (iframe YouTube) */
.media-action-section iframe {
    max-width: 100%; /* S'assure que la vidéo est responsive */
    width: 300px; /* Taille de base */
    height: 169px; /* Aspect 16:9 */
    flex-grow: 1; 
}
/* Correction: suppression de la classe .video-section redondante */

/* Style du bouton (CTA - Call to Action) */
.main-cta-button { 
    flex-shrink: 0; 
    padding: 12px 25px;
    background-color: #dc3545; 
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s;
}

.main-cta-button:hover {
    background-color: #a02033;
}


/* Formulaires */
form {
    margin: 30px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fffcfc;
}

form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #003366;
}

form input,
form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 18px;
    border: 1px solid #aaa;
    border-radius: 4px;
}

form input[type="submit"] {
    background: #006699;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 15px;
    font-size: 1.1em;
    transition: background 0.3s;
}

form input[type="submit"]:hover {
    background: #004466;
}


/* --- 5. MEDIA QUERIES (Responsivité) --- */
@media (max-width: 600px) {
    .container {
        margin: 20px auto;
        padding: 15px;
    }
    
    .media-action-section {
        flex-direction: column; /* Empile les éléments en colonne */
        align-items: stretch;
        gap: 25px;
    }
    
    .media-action-section iframe {
        width: 100%;
        height: auto; /* La hauteur peut nécessiter une valeur fixe si le rapport 16:9 n'est pas utilisé */
        max-width: 100%;
    }

    .media-action-section audio {
        max-width: 100%; 
    }
    
    .navbar a {
        display: block;
        margin: 8px 0;
    }
}

/* Header & Footer */
.header,
.footer {
    background-color: #003366;
    color: #fff;
    text-align: center;
    padding: 20px 10px;
}

.footer {
    margin-top: 20px;
}

.header h1 {
    text-align: center;
}