/* Définition de votre palette de couleurs */
:root {
    --primary: #024ab6;
    --secondary: #91b9eb;
    --action1: #75a9bd;
    --action2: #f758a8;
    --text-light: #ffffff;
    --text-dark: #333333;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-dark);
    line-height: 1.7;
}

/*
 * =========================================
 * STYLES DU MENU
 * =========================================
*/
.site-nav.ms-menu {
    background-color: var(--secondary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Style du logo */
.site-nav .ms-menu-logo a {
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--primary) !important;
}
.site-nav .ms-menu-link ul {
    background-color: var(--secondary);
}
.site-nav .ms-menu-link a {
    color: var(--primary) !important;
    font-weight: 500;
    transition: color 0.3s ease;
}
/* Couleur au survol */
.site-nav .ms-menu-link a:hover {
    color: var(--primary) !important;
}
.site-nav .ms-menu-icon i {
    color: var(--primary);
    font-size: 1.5rem;
}

/* En-tête (Hero section) */
.hero-header {
    background-color: var(--primary);
    color: var(--text-light);
    padding: 3rem 1rem;
    text-align: center;
}
.hero-header h1 {
    font-family: 'Arvo', serif;
    font-size: 3.2rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    text-shadow: 0.05em 0.075em 0 rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 13px;
    overflow-wrap: break-word; /* Permet au texte de revenir à la ligne pour éviter le dépassement */
}
.hero-header h2 {font-size: 1.3rem; font-weight: 300; color: var(--text-light); }


/* Contenu principal */
.content-section { padding: 4rem 1rem; }
.content-section h2 { font-family: 'Kalam'; font-weight: 700; color: var(--primary); text-align: center; margin-bottom: 2rem; }
.content-section h3 { font-family: 'Kalam'; font-weight: 300; color: var(--primary); opacity: 0.9; text-align: center; margin-top: 2rem; }
.logo-image {
    display: block; max-width: 400px;
    margin: 0 auto 1rem auto;
    /* border-radius: 50%; border: 5px solid var(--secondary); */
}

/* Nouvelle classe pour l'image d'illustration */
.illustration-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 2.5rem auto; /* Centre l'image et ajoute de l'espace en dessous */
    border-radius: 8px; /* Bords arrondis */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Ombre douce */
}

/* Style pour la carte de contenu spécifique */
.content-section .ms-card.ms-fill {
    /* background-color: var(--secondary); */
}

/* Pied de page */
.site-footer {
    background-color: var(--text-dark); color: var(--text-light);
    padding: 2.5rem 1rem; text-align: center;
}
.site-footer ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: 1.5rem;
}
.site-footer a {
    color: var(--text-light); text-decoration: none;
    transition: color 0.3s ease;
}
.site-footer a:hover { color: var(--action2); }
.site-footer .fa-solid { color: var(--action2); margin-right: 0.5rem; }