/* Styles généraux pour le HTML et le Body pour que les pourcentages de hauteur fonctionnent */
html, body {
    height: 100%; /* Permet aux enfants de prendre 100% de la hauteur */
    margin: 0;
    padding: 0;
    font-family: sans-serif; /* Juste une suggestion pour la lisibilité */
}

/* Styles généraux du conteneur du diaporama et du tableau */
.slideshow-container {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    /* Ajoutez une hauteur minimale au conteneur global pour qu'il ne se collapse pas */
   //min-height: 450px; /* Un peu plus que la max-height de l'image pour l'esthétique */
}

.slideshow-container table {
    width: 100%;
   // height: 100%; /* Le tableau prendra la hauteur de son parent (.slideshow-container) */
    border-collapse: collapse;
}

.slideshow-container tr {
    //height: 100%; /* La ligne prendra la hauteur de son parent (table) */
}

.slideshow-container td {
    padding: 0;
    vertical-align: top;
    //height: 100%; /* La cellule prendra la hauteur de sa ligne */
}

.slideshow-cell {
    /* Largeurs ajustées pour que le total soit 100% */
    width: 50%; /* Si le commentaire est 35%, le diaporama prend 65% */
    position: relative;
    overflow: hidden;
    /* NOUVELLE RÈGLE CLÉ : Définir une HAUTEUR FIXE pour cette cellule */
    height: 470px; /* Plus grande que max-height de l'image (400px) pour un peu de marge */
    /* min-height n'est plus nécessaire ici si les parents ont une hauteur définie */
}

.comment-cell {
    width: 50%; /* Largeur pour le commentaire */
    padding: 20px;
    background-color:#fffff4;
    //background-color: #f9f9f9;
    border-left: 5px solid #eee;
}

.comment-content h3 {
    margin-top: 10px;
    color: #333;
}

.comment-content p {
    margin-left: 15px;
    margin-right: 15px;
    line-height: 1.6;
    color: #555;
    //background-color:#fffff4;
    text-align : justify;
}

/* Styles du diaporama */
.slideshow {
    position: relative;
    width: 100%;
    height: 100%; /* Prendra la hauteur de slideshow-cell */
    display: flex;
    justify-content: center;
    align-items: center;
}

.slides {
    position: relative;
    width: 100%;
    height: 100%; /* Prendra la hauteur de slideshow */
    margin-left: 15px;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/*
.slides img {
    position: absolute; // Place les images une par une 
    max-width: 100%;
    max-height: 400px; // **Réglez la taille maximum d'affichage des images ici** 
    display: block;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
*/
.slides img.active {
    opacity: 1;
}

/* Styles des flèches de navigation */
.prev-arrow, .next-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 2em;
    text-align: center;
    line-height: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease;
    z-index: 10;
}

.prev-arrow:hover, .next-arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: #36DAFC;
}

.prev-arrow {
    /* Ajustez cette valeur pour la rapprocher de l'image */
    left: 30px; /* Si c'est trop loin, augmentez ce chiffre, par exemple 20px ou 30px */
}

.next-arrow {
    /* Ajustez cette valeur pour la rapprocher de l'image */
    right: 30px; /* Si c'est trop loin, augmentez ce chiffre, par exemple 20px ou 30px */
}

/* Media queries pour la responsivité (optionnel) */
@media (max-width: 768px) {
    .slideshow-container table,
    .slideshow-container tr,
    .slideshow-container td {
        display: block;
        width: 100% !important;
    }
    .comment-cell {
        border-left: none;
        border-top: 1px solid #eee;
    }
}


/* Styles pour la figure et la légende */
.slides figure {
    position: absolute; /* La figure est positionnée absolument à l'intérieur de .slides */
    width: 100%;
    height: 100%;
    display: flex; /* Utilise flexbox pour aligner l'image et la légende */
    flex-direction: column; /* Organise le contenu en colonne (image puis légende) */
    justify-content: center; /* Centre verticalement le contenu (image + légende) */
    align-items: center; /* Centre horizontalement le contenu */
    opacity: 0; /* Cachée par défaut */
    transition: opacity 0.5s ease-in-out;
    margin: 0; /* Enlève la marge par défaut des figures */
    padding: 0;
}

.slides figure.active {
    opacity: 1; /* La figure active est visible */
}

.slides figure img {
    /* TRÈS IMPORTANT : Supprimer ou commenter la ligne 'position: absolute;' si elle était restée ici */
    /* position: absolute;  <-- À ENLEVER OU COMMENTER */
    max-width: 100%;
    max-height: 400px; /* Conservez votre hauteur maximale d'image */
    display: block;
    object-fit: contain;
    /* opacity: 0; et transition sont déplacés vers .slides figure */
}

.slides figcaption {
    margin-top: 10px; /* Espace entre l'image et le titre */
    color: #333; /* Couleur du texte du titre */
    font-size: 1.1em; /* Taille du titre */
    font-weight: bold; /* Gras pour le titre */
    text-align: center;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.8); /* Fond semi-transparent pour le titre */
    border-radius: 5px;
    max-width: 90%; /* Pour éviter que le titre ne dépasse trop */
    box-sizing: border-box; /* Inclure padding et border dans la largeur */
}

/* Garder la hauteur de slideshow-cell pour laisser de la place au titre 
.slideshow-cell {
    width: 65%;
    position: relative;
    overflow: hidden;
    height: 480px; /* Assurez-vous que cette hauteur est suffisante (max-height_image + marge_titre + hauteur_titre) 
} */