/* assets/css/galerie.css */

/* Styles pour le Carrousel de Photos */
.photo-carousel {
    /* Le positionnement relatif est géré par Tailwind 'relative' sur le parent */
}

.carousel-track {
    /* La transition et le flex sont gérés par Tailwind sur le parent */
}

.carousel-image {
    /* width: 100%; */ /* Géré par w-full */
    /* height: 100%; */ /* Géré par h-full */
    /* object-fit: cover; */ /* Géré par object-cover */
    /* flex-shrink: 0; */ /* Géré par flex-shrink-0 */
}

.carousel-btn {
    /* Styles de base des boutons de navigation du carrousel */
}

.carousel-btn:hover {
    /* background-color: rgba(0, 0, 0, 0.75); */ /* Géré par hover:bg-opacity-75 */
}

.carousel-btn.prev {
    /* left: 1rem; */ /* Géré par left-4 */
}

.carousel-btn.next {
    /* right: 1rem; */ /* Géré par right-4 */
}

/* Styles pour les points de navigation du carrousel */
.carousel-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.carousel-dot.active {
    background-color: #f97316; /* orange-500 de Tailwind */
    transform: scale(1.2);
}

/* Styles pour l'Accordéon Vidéo */
.accordion-btn .accordion-icon {
    /* transition: transform 0.3s ease; */ /* Géré par transition-transform duration-300 */
}

.accordion-btn.active .accordion-icon {
    transform: rotate(180deg); /* Rotation de la flèche quand l'accordéon est ouvert */
}

.accordion-content {
    /* overflow: hidden; */ /* Géré par overflow-hidden */
    /* transition: max-height 0.5s ease-in-out; */ /* Géré par transition-all duration-500 ease-in-out */
    /* max-height: 0; */ /* État initial fermé, géré par style="max-height: 0;" dans HTML */
}

/* NOUVEAUX STYLES POUR LES BLOCS D'ÉVÉNEMENTS */
.event-block {
    margin-bottom: 5rem; /* Espace entre chaque bloc d'événement */
    padding: 2.5rem; /* Rembourrage intérieur */
    background-color: #ffffff; /* Fond blanc */
    border-radius: 1rem; /* Bords arrondis */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Ombre plus prononcée */
    border: 1px solid #e5e7eb; /* Bordure légère */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transition pour l'effet hover */
}

.event-block:hover {
    transform: translateY(-5px); /* Léger soulèvement au survol */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Ombre plus intense au survol */
}

/* Amélioration de la typographie et de l'espacement */
.event-block h2 {
    font-size: 2.5rem; /* Taille de titre plus grande */
    color: #1a202c; /* Couleur de texte plus foncée */
    margin-bottom: 1.5rem; /* Plus d'espace sous le titre */
}

.event-block h3 {
    font-size: 2rem; /* Taille de sous-titre plus grande */
    color: #2d3748; /* Couleur de texte légèrement plus claire */
    margin-bottom: 1.5rem; /* Plus d'espace sous le sous-titre */
}

.event-block p {
    line-height: 1.75; /* Hauteur de ligne améliorée pour la lisibilité */
    color: #4a5568; /* Couleur de texte plus douce */
}

/* Styles pour les sections de photos et vidéos à l'intérieur des événements */
.event-block section {
    padding: 1.5rem; /* Rembourrage uniforme pour les sections internes */
    background-color: #f9fafb; /* Fond très clair pour les sections internes */
    border-radius: 0.75rem; /* Bords arrondis pour les sections internes */
    border: 1px solid #edf2f7; /* Bordure légère pour les sections internes */
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* Ombre interne subtile */
}

.event-block .video-accordion .p-4.pt-8 {
    padding-top: 2rem; /* Plus d'espace au-dessus des vidéos dans l'accordéon */
}

/* Styles pour les vidéos individuelles dans l'accordéon */
.event-block video {
    border-radius: 0.5rem; /* Bords arrondis pour les vidéos */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Ombre pour les vidéos */
}

/* NOUVEAUX STYLES POUR LES IMAGES DANS LE CONTENU DE L'ÉVÉNEMENT (the_content()) */
/* Ces styles s'appliqueront aux images que vous insérez directement dans l'éditeur de texte de l'événement */
.event-block .entry-content img { /* .entry-content est une classe WordPress courante pour le contenu de l'article */
    max-width: 100%; /* S'assure que l'image ne dépasse pas la largeur du conteneur */
    height: auto; /* Maintient le ratio d'aspect */
    border-radius: 0.75rem; /* Bords arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Légère ombre */
    margin-top: 1.5rem; /* Espace au-dessus de l'image */
    margin-bottom: 1.5rem; /* Espace en dessous de l'image */
    display: block; /* S'assure que margin-left/right: auto fonctionne pour le centrage */
    margin-left: auto;
    margin-right: auto;
}

/* Styles pour les légendes d'images (si elles sont utilisées) */
.event-block .wp-caption {
    max-width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    background-color: #f0f4f8; /* Fond léger pour la légende */
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.event-block .wp-caption-text {
    font-size: 0.9rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

/* Styles pour les images alignées (si vous utilisez alignleft/alignright) */
.event-block img.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.event-block img.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.event-block img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Pour gérer le flottement des images et s'assurer que le texte ne déborde pas */
.event-block .wp-block-image,
.event-block .alignleft,
.event-block .alignright {
    clear: both; /* Pour éviter les problèmes de flottement */
}