/* --- 1. POLICES & COULEURS (CHARTE GRAPHIQUE SKILLFOR) --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Montserrat:wght@600;800&display=swap');

:root {
    /* Palette CFA : Sérieux mais dynamique */
    --primary-blue: #002B5B;   /* Bleu Marine (Institutionnel) */
    --accent-orange: #FF6B00;  /* Orange (Apprentissage/Energie) */
    --light-bg: #F4F7F6;       /* Gris très clair (Fond propre) */
    --white: #FFFFFF;
    --text-dark: #333333;
    --text-light: #f4f4f4;
}

/* --- 2. RESET GÉNÉRAL --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100vw;
    min-height: 100vh;
    background-color: var(--light-bg);
    font-family: 'Roboto', sans-serif; /* Police très lisible pour le texte */
    color: var(--text-dark);
}

/* --- 3. EN-TÊTE (HEADER) --- */
div#haut {
    width: 90vw;
    height: 15vh;
    background-color: var(--white);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 15% 85%;
    align-items: center;
    border-bottom: 4px solid var(--accent-orange); /* Ligne orange en bas */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

div#logo {
    width: 100%;
    height: 100%;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

/* Si vous n'avez pas d'image, le logo aura un fond blanc propre */
div#logo img {
    max-height: 80%;
    max-width: 90%;
    object-fit: contain; 
}

div#titre {
    width: 100%;
    height: 100%;
    background-color: var(--white);
    color: var(--primary-blue);
    font-family: 'Montserrat', sans-serif; /* Titre fort */
    font-weight: 800;
    font-size: 4vmin; /* Un peu plus petit pour faire pro */
    padding-left: 20px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 4. NAVIGATION (MENU) --- */
nav#menuHaut {
    width: 90vw;
    height: 8vh;
    background-color: var(--primary-blue);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

nav#menuHaut div{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2vmin;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    border-right: 1px solid rgba(255,255,255,0.1);
}

/* Effet survol menu : devient Orange */
nav#menuHaut div:hover {
    background-color: var(--accent-orange);
    color: var(--white);
}

/* --- 5. GRILLE PRINCIPALE (DASHBOARD) --- */
main {
    width: 90vw;
    height: auto;
    min-height: 65vh; /* Agrandir un peu */
    margin: 30px auto;
    
    display: grid;
    /* On garde votre grille 4x3 */
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: repeat(3, 220px); /* Hauteur fixe des cartes */
    gap: 20px; /* Espace propre entre les cartes */
}

/* Style de base des cartes (Sections) */
section {
    background-color: var(--white);
    border-radius: 8px; /* Coins légèrement arrondis */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Ombre douce */
    display: flex;
    flex-direction: column; /* Texte l'un sous l'autre */
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--primary-blue);
    border: 1px solid #eee;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

section:hover {
    transform: translateY(-5px); /* Légère remontée */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-bottom: 5px solid var(--accent-orange); /* Soulignement au survol */
}

/* --- 6. PERSONNALISATION DES SECTIONS (Code couleur logique) --- */

/* Sections importantes (Inscription, Agenda) en Orange ou Bleu Fort */
section#section01, section#section02 {
    background-color: var(--primary-blue);
    color: var(--white);
}

/* Sections informatives (News) en blanc */
section#section03, section#section04, section#section05 {
    background-color: var(--white);
}

/* Une section "Action" (Postuler) */
section#section08 {
    background-color: var(--accent-orange);
    color: var(--white);
}

/* --- 7. PIED DE PAGE (FOOTER) --- */
footer {
    width: 90vw;
    height: 10vh;
    background-color: #222; /* Pied de page sombre classique */
    color: #aaa;
    margin: 0 auto;
    margin-top: 40px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vmin;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* --- STYLE SPÉCIAL POUR LA JPO (SECTION 01) --- */

/* --- STYLE SPÉCIAL POUR LA JPO (LARGEUR TOTALE) --- */

#section01 {
    /* LA CLÉ EST ICI : Prend de la 1ère ligne à la dernière ligne de la grille */
    grid-column: 1 / -1; 

    /* Design */
    background: linear-gradient(90deg, var(--primary-blue) 30%, #004080 100%);
    color: var(--white);
    
    /* Organisation interne horizontale */
    display: flex; 
    flex-direction: row; /* On aligne tout horizontalement */
    justify-content: space-between; /* On espace les éléments au max */
    align-items: center; /* Centrage vertical */
    
    padding: 20px 30px;
    border: none;
    text-align: left;
    position: relative; /* Pour le badge */
}

/* Le badge doit être positionné en absolu maintenant pour ne pas gêner le flex */
#section01 .badge-event {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--accent-orange);
    margin-bottom: 0;
}

/* Ajustement du conteneur date/texte pour la largeur */
#section01 .content-wrapper {
    display: flex;
    align-items: center;
    gap: 25px;
    /* On décale un peu pour laisser la place au badge "Évènement" */
    margin-left: 80px; 
    width: auto; /* Ne prend plus 100% */
}

/* Le bloc date ne change presque pas */
.date-block {
    background-color: var(--white);
    color: var(--primary-blue);
    padding: 15px 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.date-block .day { font-size: 2em; font-weight: 800; line-height: 1; }
.date-block .month { font-size: 1em; font-weight: 700; text-transform: uppercase; }
.date-block .year { font-size: 0.8em; }

/* Textes plus gros car plus de place */
.text-block h2 {
    font-size: 1.8em;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

.text-block .subtitle {
    color: var(--accent-orange);
    font-weight: 800;
    font-size: 1.2em;
    margin: 5px 0;
    text-transform: uppercase;
}
/* =========================================
   STYLE SPÉCIFIQUE : PAGE FORMATION
   (À ajouter à la fin de votre CSS)
   ========================================= */

/* On change la structure du MAIN pour cette page uniquement */
main#main-formation {
    display: block; /* On annule la grille 4x3 de l'accueil */
    height: auto;
    padding: 40px;
    background-color: transparent;
    max-width: 1200px; /* Limite la largeur pour que ce soit joli sur grand écran */
}

/* Titre de la page formation */
.page-title {
    text-align: center;
    color: var(--primary-blue);
    margin-bottom: 50px;
    font-size: 2.5em;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 15px;
}

/* Petite ligne orange sous le titre */
.page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background-color: var(--accent-orange);
}

/* La grille des formations (Responsive) */
.formations-grid {
    display: grid;
    /* Magie : Crée autant de colonnes que possible (min 300px large) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* La Carte de formation individuelle */
.formation-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.formation-card:hover {
    transform: translateY(-10px); /* Monte au survol */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    border-color: var(--accent-orange);
}

/* En-tête de la carte (Niveau d'étude) */
.card-header {
    background-color: var(--primary-blue);
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: 800;
    font-size: 1.2em;
    font-family: 'Montserrat', sans-serif;
}

/* Couleur différente pour les Bachelors */
.type-bachelor {
    background-color: #34495e; 
}

/* Corps de la carte */
.card-body {
    padding: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Remplit l'espace */
}

.card-body h3 {
    color: var(--accent-orange);
    margin-bottom: 10px;
    font-size: 1.4em;
    font-family: 'Montserrat', sans-serif;
}

.card-body p {
    color: #666;
    margin-bottom: 20px;
    font-size: 0.95em;
    line-height: 1.4;
    flex-grow: 1; /* Pousse les détails vers le bas */
}

/* Liste des détails (Alternance, Durée) */
.details-list {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.details-list li {
    background: #f4f4f4;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    color: var(--primary-blue);
    border: 1px solid #ddd;
}

/* Bouton "Voir le programme" */
.btn-detail {
    background-color: var(--primary-blue);
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 0.9em;
    transition: 0.3s;
    align-self: center;
}

.btn-detail:hover {
    background-color: var(--accent-orange);
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.3);
}
/* Le Bouton à droite */
.btn-register {
    background-color: var(--accent-orange);
    color: var(--white);
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1em;
    /* On enlève l'align-self précédent */
    transition: 0.3s;
    box-shadow: 0 4px 0 #cc5500;
    text-transform: uppercase;
    white-space: nowrap; /* Empêche le texte du bouton de passer à la ligne */
}

.btn-register:hover {
    background-color: #ff8533;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #cc5500;
}

a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color: var(--primary-blue);
}

/* selected link */
a:active {
  color: white;
}

/* --- RESPONSIVE (BONUS IMPORTANT) --- */
/* Sur mobile, la barre horizontale va casser. 
   On la remet en colonne si l'écran est petit */
@media (max-width: 768px) {
    #section01 {
        flex-direction: column;
        align-items: flex-start;
        padding: 60px 20px 20px 20px; /* Place pour le badge en haut */
    }
    #section01 .content-wrapper {
        margin-left: 0;
        margin-bottom: 20px;
        width: 100%;
    }
    .btn-register {
        width: 100%; /* Bouton pleine largeur sur mobile */
        text-align: center;
    }
}