/* Styles pour le conteneur de l'hero image */
.image-title-container {
    position: relative; /* Élément positionné relativement par rapport à son contenant */
    width: 100%; /* Largeur occupant toute la largeur du contenant */
    height: 50vh; /* Hauteur égale à 50% de la hauteur de la fenêtre du navigateur */
    overflow: hidden; /* Masque tout contenu dépassant du conteneur */
}

/* Styles pour l'hero image */
.hero-image {
    width: 100%; /* Largeur de l'image à 100% du contenant */
    height: 100%; /* Hauteur de l'image à 100% du contenant */
    object-fit: cover; /* Évite la déformation tout en remplissant l'espace du conteneur */
    object-position: 50% 70%; /* Montre la partie inférieure de l'image */
}

/* Styles pour la superposition d'assombrissement */
.hero-image-overlay {
    position: absolute; /* Position absolue par rapport au parent */
    top: 0; /* Position en haut du parent */
    left: 0; /* Position à gauche du parent */
    width: 100%; /* Largeur de l'élément à 100% du parent */
    height: 100%; /* Hauteur de l'élément à 100% du parent */
    background: rgba(0, 0, 0, 0.5); /* Couleur de fond semi-transparente (noir avec une opacité de 0.5) */
    pointer-events: none; /* Ne pas capturer les événements de souris, pour que les éléments en dessous soient interactifs */
}

/* Styles pour le titre principal (h1) */
h1 {
    position: absolute; /* Élément positionné absolument par rapport à son contenant */
    top: 50%; /* Centre l'élément verticalement par rapport à son contenant */
    left: 50%; /* Centre l'élément horizontalement par rapport à son contenant */
    transform: translate(-50%, -50%); /* Centre parfaitement l'élément dans le contenant */
    text-align: center; /* Centre le texte horizontalement */
    margin: 0; /* Supprime la marge par défaut */
    color: white; /* Couleur du texte */
    font-size: 5vh; /* Taille de la police basée sur 5% de la hauteur de la fenêtre */
}

/* Styles pour le conteneur "last-update-container" */
.last-update-container {
    display: flex; /* Affiche les éléments en ligne */
    align-items: center; /* Centre verticalement les éléments enfants */
    justify-content: center; /* Centre horizontalement les éléments enfants */
}

/* Espacement entre les éléments enfants */
.last-update-container > * {
    margin: 10px;
}

/* Ajuster la position verticale du paragraphe (<p>) */
.last-update-container > p {
    margin-bottom: 15px; 
}

/* Styles pour les colonnes de taille moyenne dans une grille (Bootstrap) */
.col-md-4,
.col-md-8 {
    margin-top: 2vh; /* Ajoute une marge en haut de 2% de la hauteur de la vue */
}

/* Styles pour le breadcrumb */
.breadcrumb {
    background-color: transparent;
    margin-bottom: 0px;
    margin-top: 15px;
    display: flex;
    align-items: center;
}

.breadcrumb-container {
    display: flex;
    justify-content: flex-end;
}

/* Styles pour l'auteur */
.author {
    margin: 2vh;
}

/* Styles pour la boîte de contenu */
.content-box {
    padding-top: 15px;
    margin-bottom: 5vh;
}

/* Styles pour le titre décoré */
.decorated-title {
    position: relative;
    text-align: center; /* Pour centrer le texte à l'intérieur du conteneur */
}

/* Styles pour les traits décoratifs avant et après le titre */
.decorated-title::before,
.decorated-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30%; 
    height: 0.2px; /* Épaisseur des traits */
    background-color: #000; /* Couleur des traits */
}

.decorated-title::before {
    left: 0;
    transform: translateY(-50%);
}

.decorated-title::after {
    right: 0;
    transform: translateY(-50%);
}

#article-content img{
    width: 100%;
    height: auto;
    margin: 10px;
}