/* Import de la police */
body {
    font-family: 'Poppins', sans-serif;
}

/* ============================================ */
/* ============== CHARTE GRAPHIQUE ============ */
/* ============================================ */

:root {
    --esm-red: #C00000;
    --esm-black: #1C1C1C;
    --esm-white: #FFFFFF;
    --esm-green: #006400;
    --esm-light-gray: #f8f9fa;
}

/* ============================================ */
/* ============== STYLES GÉNÉRAUX ============== */
/* ============================================ */

/* Personnalisation des couleurs MDB */
.btn-primary {
    background-color: var(--esm-red) !important;
    border-color: var(--esm-red) !important;
}

.text-primary {
    color: var(--esm-red) !important;
}

a.text-primary:hover {
    color: #a00000 !important;
}

.text-success {
    color: var(--esm-green) !important;
}

/* ============================================ */
/* ============== BARRE DE NAVIGATION ========= */
/* ============================================ */

.navbar-nav .nav-link {
    font-weight: 600;
    color: var(--esm-black);
    transition: color 0.3s;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: var(--esm-red);
}

/* ============================================ */
/* ============== SECTION HÉROS =============== */
/* ============================================ */
#hero {
    position: relative;
    height: 100vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Image de fond en attendant la vidéo */
    background-image: url('../images/etudiants.jpg');
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Superposition sombre */
}

#hero .container {
    position: relative;
    z-index: 2;
}

#hero h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#hero-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

/* ============================================ */
/* =========== SECTION FORMATIONS ============= */
/* ============================================ */
.card-formation {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-formation:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.card-formation .card-img-top {
    height: 200px;
    object-fit: cover;
}

/* ============================================ */
/* ============== PIED DE PAGE ================ */
/* ============================================ */

footer {
    background-color: var(--esm-black);
}

/* ============================================ */
/* ======== SECTION ESPACE NUMÉRIQUE ========== */
/* ============================================ */

#espace-numerique {
    background-color: var(--esm-white);
}

/* On alterne la couleur de fond des sections pour un meilleur contraste */
#formations {
    background-color: var(--esm-light-gray);
}

#espace-numerique .list-unstyled h5 {
    color: var(--esm-black);
}

#espace-numerique .list-unstyled p {
    color: #6c757d; /* gris standard pour le texte secondaire */
}