/* Style général du corps */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Assure que le corps couvre toute la hauteur de la fenêtre */
    margin: 0;
    overflow: auto; /* Ensure scrolling is enabled on the body */

}

/* Conteneur de la liseuse */
.liseuse-container {
    position: relative;
    text-align: center;
    margin-left: 2%;
}

/* Style pour les images */
.imgJournal {
    max-width: 100%;
    max-height: 60vh; /* Limiter la hauteur maximale */
    border: 1px solid black; /* Bordure noire de 1px */
    display: block;
    margin: 0 auto;
}

/* Style pour les contrôles de navigation */
.control {
    position: absolute;
    top: 50%;
    color: black;
    background-color: rgba(255, 255, 255, 1); 
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 1.5rem;
    z-index: 1001;
    transition: background-color 0.3s ease;
}

.control:hover {    
    background-color: #f0f0f0;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Boutons de zoom */
.zoom-in, .zoom-out {
    position: absolute;
    background-color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 18px;
    z-index: 1001;
    transition: background-color 0.3s ease;
}

.zoom-in {
    left: 15px;
    top: 90%;
}

.zoom-out {
    left: 15px;
    top: 95%;
}

.zoom-in:hover, .zoom-out:hover {
    background-color: #f0f0f0;
}

/* Style pour le bouton de réinitialisation */
.reset, .reset-zoom {
    border: none;
    cursor: pointer;
    padding: 10px 20px;
    font-size: 1rem;
    z-index: 1001;
    transition: background-color 0.3s ease;
    bottom: -15vh;

}

.reset {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0056b3;
    color: white;
}

.reset:hover {
    background-color: #004494;
}

.reset-zoom {
    bottom: -15vh;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border: 2px solid #000;
    font-size: 16px;
    position: absolute;
}

.reset-zoom:hover {
    background-color: #f0f0f0;
}

/* Style pour le modal */
.modal {
    display: none; /* Masqué par défaut */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
}

/* Image à l'intérieur du modal, activée pour le déplacement */
.draggable {
    position: relative;
    cursor: grab;
    max-width: 100%;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
}

/* Bouton pour fermer le modal */
.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2000;
    transition: color 0.3s ease;
}

.close:hover,
.close:focus {
    color: #bbb;
}

/* Style des légendes */
.legende {
    padding-top: 3vh;
}

/*-------------------------------------Nous Lire Index -----------------------------------------*/
.contenuLire {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-left: 2%;
    align-items: center;
    justify-items: center;
    gap: 3vw;
}

/* Styles spécifiques pour les images */
.ancNum img, .article img, .soluMC img {
    transition: transform 0.3s ease, filter 0.3s ease; /* Transition pour grisé et rétrécissement */
}

.img-container {
    position: relative;
    display: inline-block;
}

.caption {
    position: absolute;
    right: 18%;
    color: black;
    bottom: 0.55vw;
    font-weight: 500;
    font-family: 'Times New Roman', Times, serif;
    font-size: 2.8vw;    
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ancNum:hover img, .article:hover img, .soluMC:hover img {
    filter: grayscale(50%); /* Grisé léger */
    transform: scale(0.9); /* Rétrécissement léger */
}

.ancNum:hover .caption, .article:hover .caption, .soluMC:hover .caption {
    opacity: 1; /* Affiche la légende */
}

/* Styles pour les différentes sections d'images */
.ancNum img {
    width: auto;
    height: 27vw;
    border: solid black 0.25pt;
}

.nUn {
    transform: rotate(5deg);
    position: absolute;
}

.nDeux {
    transform: rotate(-10deg);
}

.article {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2vw;
}

.article img {
    width: 7vw;
}

.soluMC img {
    width: 25vw;
}

/* Liste des articles */
.articles-liste {
    list-style-type: none; /* Supprime les puces par défaut */
    padding: 0;
    margin: 0;
    line-height: 4vh;
    width: 80%;
}

/* Style for the article list items */
.articles-liste li {
    display: flex; /* Enable Flexbox for alignment */
    align-items: center; /* Vertically center items */
    justify-content: space-between; /* Push content to the edges */
    font-size: 1.2rem;
    padding: 10px;
    color: black;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
}

.articles-liste li:hover {
    cursor: pointer;
    color: white;
    background-color: #000;
}
/* Assure que la couleur de fond et le curseur changent au survol */
.articles-liste li:hover {
    cursor: pointer;
    color: white;
    background-color: #000;
}

/* Appliquer le filtre d'inversion uniquement lorsque .articles-liste li est survolé */
.articles-liste li:hover .download {
    filter: invert(100%); /* Inverse la couleur (noir devient blanc) */
    transition: filter 0.3s ease; /* Transition fluide */
}

/* Style du bouton de téléchargement */
.download {
    width: 24px; /* Ajuster la taille selon les besoins */
    height: auto; /* Maintenir le ratio d'aspect */
    margin-left: auto; /* Pousser le bouton vers la droite */
    cursor: pointer; /* Indiquer que c'est cliquable */
}


/* Style pour le premier élément de la liste */
.articles-liste li:first-child {
    border-top: 1px solid #ddd;
}


.articles {
    display: grid;
    top: 10%;
    position: fixed;
    overflow: visible;
    width: 90%;
    left: 12%;
}


.header, .menu, .articles {
    position: relative; /* Keep elements in normal flow */
}

h4{
    font-size: 2.5vw;
    font-weight: 600;
}
/* Style du bouton de téléchargement */
.grosdownload {
    width: 30px; /* Ajuster la taille selon les besoins */
    height: auto; /* Maintenir le ratio d'aspect */
    margin-left: auto; /* Pousser le bouton vers la droite */
    cursor: pointer; /* Indiquer que c'est cliquable */
}