/* Réinitialisation de marges et padding pour la page */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #121212;
    
}

*{
    font-family: 'IBM Plex Serif', serif;
}


/* Style de l'icône du bouton de la navbar */
.navbar-toggler-icon {
    background-color: rgba(255, 255, 255, 0.356); /* Couleur blanche avec transparence */
    border-radius: 3px; /* Bords arrondis */
}

/* Rendre la vidéo responsive */
video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Couvre tout l'espace sans déformation */
    z-index: -1; /* La vidéo reste derrière le contenu */
}

/* S'assurer que la vidéo fonctionne correctement sur les petits écrans */
@media (max-width: 768px) {
    video {
        object-fit: cover; /* Toujours s'assurer que la vidéo couvre toute la zone */
    }
}

/* Conteneur pour le texte au-dessus de la vidéo */
.overlay-text {
    position: absolute;
    top: 50%; /* Centrer verticalement */
    left: 50%; /* Centrer horizontalement */
    transform: translate(-50%, -50%); /* Centrage parfait */
    color: white; /* Texte blanc */
    text-align: center; /* Centrer le texte */
    z-index: 1; /* Le texte est au-dessus de la vidéo */
    padding: 20px;
    white-space: nowrap; /* Empêcher le texte de se diviser sur plusieurs lignes */
    overflow: hidden; /* Masquer le texte qui déborde */
    text-overflow: ellipsis; /* Ajouter des points de suspension si le texte est trop long */
}

/* Style du titre */
.overlay-text h1 {
    font-size: 3em; /* Taille du titre */
    margin-bottom: 10px;
    white-space: nowrap; /* Empêche la ligne de se diviser */
}

/* Style du paragraphe */
.overlay-text p {
    font-size: 1.5em; /* Taille du texte du paragraphe */
    white-space: nowrap; /* Empêche la ligne de se diviser */
}

/* Animation fade-in pour la vidéo */
.fade-in-video {
    opacity: 0; /* Commence avec une opacité nulle */
    animation: fadeInEffect 3s ease-out forwards; /* Animation fade-in */
}

/* Définir l'animation fade-in */
@keyframes fadeInEffect {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Effet fade-in pour les éléments textuels */
.fade-in {
    opacity: 0;
    transform: translateY(20px); /* Commence un peu plus bas */
    animation: fadeIn 1.5s ease-out forwards; /* Applique l'animation */
}

/* Effet de fade-in différé */
.fade-in-delay {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 1.5s ease-out forwards;
    animation-delay: 0.5s; /* L'animation commence après un délai */
}

/* Animation fade-in avec mouvement du bas vers le haut */
@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0); /* Le texte arrive à sa position initiale */
    }
}

/* Media queries pour ajuster la taille du texte sur mobile */
@media (max-width: 768px) {
    .overlay-text h1 {
        font-size: 2em; /* Réduit la taille du titre sur mobile */
    }

    .overlay-text p {
        font-size: 1.2em; /* Réduit la taille du paragraphe sur mobile */
    }
}

.card-img-top {
    width: 100%; /* Assure que les images prennent toute la largeur de leur conteneur */
    height: 200px; /* Hauteur uniforme pour toutes les images */    
    object-fit: cover; /* Couvre l'image sans déformation */
}

.card{
    width: 100%;
}



/* Ajouter ces règles à ton fichier CSS */
.blog-post {
    background-color: #1e1e1e; /* Fond sombre pour les posts */
    border-radius: 10px;
    padding: 15px;
    word-wrap: break-word; /* Force le retour à la ligne pour les longs mots */
    overflow-wrap: break-word; /* Assure que les mots très longs ne débordent pas */
}


/* Positionner le logo à droite sur tous les écrans */
.navbar-logo {
    display: block;
    margin-left: auto;
}

/* Sur mobile, déplacer le logo en bas du menu déroulant */
@media (max-width: 991px) {
    .navbar-collapse {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .navbar-logo {
        order: 1; /* Déplace le logo en bas */
        margin-top: 15px; /* Ajoute un peu d'espace entre le menu et le logo */
        margin-left: 0; /* Aligne le logo à gauche pour qu'il soit centré sous le menu */
        margin-right: 0; /* Evite tout espace à droite */
    }
}


/* Section en plein écran */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100vh; /* Prend toute la hauteur de l'écran */
    background-color: #121212; /* Couleur de fond */
}

/* Contenu centré */
.hero-content {
    max-width: 1000px;
}

/* Boutons */
.hero-buttons {
    margin-top: 20px;
}

.hero-buttons .btn {
    margin: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 44px;
    }
    
    .hero-content p {
        font-size: 16px;
    }
}