/* ========================
   1) Style global
======================== */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: black;
}

/* ========================
   2) Conteneur principal
======================== */
.section-container {
    max-width: 1300px;
    margin: 20px auto; /* Centre le bloc horizontalement */
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ========================
   3) Titres
======================== */
h1 {
    text-align: left;
    color: #007BFF;
    margin-bottom: 20px;
}

h2 {
    color: #0056b3;
    margin-top: 30px;
}

/* ========================
   4) Paragraphes et listes
======================== */
p {
    margin-bottom: 15px;
}

ul {
    list-style-type: disc;
    margin-left: 20px;
}

li {
    margin-bottom: 10px;
}

/* ========================
   5) RESPONSIVE DESIGN
   (exemple avec breakpoint
   à 768px)
======================== */
@media (max-width: 768px) {
    /* Réduit les marges et les paddings sur petits écrans */
    .section-container {
        margin: 10px;
        padding: 15px;
    }

    /* Centre le titre et ajuste sa taille */
    h1 {
        text-align: center;
        font-size: 1.6em;
    }

    /* Réduit légèrement la marge au-dessus des sous-titres */
    h2 {
        text-align: center;
        margin-top: 20px;
        font-size: 1.3em;
    }

    /* Ajuste la taille des paragraphes si besoin */
    p, li {
        font-size: 0.95em;
    }

    /* Liste non décalée sur mobile, pour gagner de la place */
    ul {
        margin-left: 0;
        padding-left: 1.2rem; /* Petit retrait pour la puce */
    }
}
/* =========================
   Navigation (Header)
========================= */

/* Barre de navigation */
.navbar {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 20px 40px;
    background: linear-gradient(to right, #000000, #f5f5dc 75%); 
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5);
}

/* Logo */
.logo img {
    max-height: 150px; /* Hauteur max sur desktop */
    width: auto;       
    border-radius: 5px;
}

/* Menu (liens) */
.menu {
    display: flex;
    gap: 30px; /* Espacement entre les liens */
}

.menu a {
    text-decoration: none;
    color: #3e3c44;
    font-size: 1.1em;
    font-weight: bold;
    padding: 10px 15px; 
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

.menu a:hover {
    background-color: rgba(26, 21, 21, 1);
    transform: scale(1.4);
    color: white;
}

/* Icône Hamburger (mobile) */
.hamburger {
    display: none; 
    font-size: 3em;
    cursor: pointer;
    color: white;
}

/* =========================
   Responsive Design
========================= */
@media (max-width: 768px) {
    /* Icône hamburger s’affiche sur mobile */
    .hamburger {
        display: block;
        color: black;
    }
    .menu a{
        color: whitesmoke;
    }

    /* Ajuste la taille du logo */
    .logo img {
        max-height: 75px;
        margin-left: -10px; 
    }

    /* Le menu est caché par défaut sur petits écrans */
    .menu {
        display: none;
        flex-direction: column;
        background-color: rgba(26, 21, 21, 0.9);
        position: absolute;
        top: 80px;   
        width: 75%; 
        text-align: right;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
        gap: 20px; 
    }

    /* Quand le menu est « active » (hamburger cliqué) */
    .menu.active {
        display: flex;
    }
}

/* ======================================
   1) Style pour la page des formations
====================================== */

/* Conteneur pour la section formations */
.training-menu {
    max-width: 900px;        /* Largeur max, centrée par margin: auto dans .section-container si vous l'utilisez */
    margin: 20px auto;       /* Centre sur la page, en haut et en bas */
    padding: 20px;         /* Petite marge interne latérale */
}

/* Titre des formations */
.formation-title {
    text-decoration: underline;
    color: #007bff; /* Même couleur que sur vos autres H1/H2 si souhaité */
    margin-bottom: 30px;
    text-align: left; /* ou center, selon votre préférence */
}

/* Tableau des formations */
.formation-table {
    width: 100%;
    border-collapse: collapse; 
    margin: 20px 0;
    background-color: #ffffff; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.formation-table th,
.formation-table td {
    padding: 15px; 
    border-bottom: 1px solid #ddd;
}

/* En-tête du tableau */
.formation-table th {
    background-color: #007bff; 
    color: #fff; 
    text-align: left;
}

/* Dernière colonne alignée à droite (dates) */
.formation-table td:last-child {
    text-align: right;
}

/* Couleur de fond au survol */
.formation-table tr:hover {
    background-color: #f1f1f1;
}
  
/* Liens dans le tableau */
.formation-table a {
    text-decoration: none; 
    color: #007bff;
}

.formation-table a:hover {
    text-decoration: underline;
}

/* ======================================
   2) Responsive
   Ajuster si besoin (max-width: 768px)
====================================== */
@media (max-width: 768px) {
    .training-menu {
        margin: 10px; 
        padding: 0 10px;
    }

    .formation-title {
        text-align: center; 
        font-size: 1.4em;
    }

    .formation-table th,
    .formation-table td {
        padding: 10px;
    }

    .formation-table {
        /* Sur mobile, vous pouvez laisser tel quel ou rendre le tableau scrollable */
        overflow-x: auto;
        display: block; /* Permet éventuellement un défilement horizontal si trop large */
    }
}