/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

.cc-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cc-gallery-item {
    flex: 1 1 100%;
    margin-bottom: 20px;
}

.cc-gallery img {
    width: 100%;
    height: auto;
}

.cc-gallery-pagination {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px; /* Ajout de l'espace en dessous de la pagination */
}

.cc-gallery-pagination .cc-page-numbers {
    margin-bottom: 10px;
}

.cc-gallery-pagination a {
    margin: 0 5px;
    text-decoration: none;
    padding: 10px 15px; /* Padding augmenté */
    border: 1px solid #4c049b;
    color: #fff; /* Numéros blancs */
    background-color: #4c049b; /* Fond mauve */
    font-size: 18px; /* Taille de police agrandie */
    display: inline-block;
    border-radius: 5px; /* Bordure arrondie */
}

.cc-gallery-pagination a.cc-pagination-current {
    background-color: #32036b; /* Fond différent pour la page actuelle */
    color: #fff; /* Numéros blancs pour la page actuelle */
    border-color: #32036b;
}

.cc-gallery-pagination a:hover {
    background-color: #2a024b; /* Légère variation de mauve pour le hover */
    border-color: #2a024b;
}

.cc-gallery-pagination .cc-prev,
.cc-gallery-pagination .cc-next {
    font-size: 18px;
    padding: 10px 15px; /* Padding augmenté */
    background-color: #4c049b; /* Fond mauve */
    color: #fff; /* Couleur blanche */
    border: 1px solid #4c049b;
    border-radius: 5px; /* Bordure arrondie */
    margin: 0 10px;
}

.cc-gallery-pagination .cc-prev:hover,
.cc-gallery-pagination .cc-next:hover {
    background-color: #2a024b; /* Légère variation de mauve pour le hover */
    border-color: #2a024b;
}


/* Carrousel */
.thumbnail-carousel {
    margin: 20px auto;
    max-width: 1200px;
    height: 300px; /* Hauteur fixe pour le carrousel */
}

.swiper-slide {
    height: 100%; /* Hauteur uniforme */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    opacity: 0.6; /* Miniatures semi-transparentes par défaut */
}

.swiper-slide.active-slide {
    opacity: 1; /* Mise en valeur de l'image active */
    border: 2px solid #0073aa;
}

/* Carrousel pleine hauteur */
.thumbnail-carousel {
    margin: 20px auto;
    height: 80vh; /* 80% de la hauteur de l'écran */
    max-width: 1200px;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Remplit toute la hauteur */
    opacity: 0.6;
    transition: opacity 0.3s;
}

.swiper-slide.active-slide {
    opacity: 1;
    border: 2px solid #0073aa;
}

/* Carrousel pleine hauteur */
.thumbnail-carousel {
    margin: 20px auto;
    height: 90vh; /* Carrousel occupe 90% de la hauteur de l'écran */
    max-width: 100%;
}

.swiper-slide {
    display: flex;
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
    height: 100%; /* Remplit toute la hauteur */
    opacity: 0.6;
    transition: opacity 0.3s;
}

.swiper-slide.active-slide {
    opacity: 1;
    border: 2px solid #0073aa;
}

/* Conteneur du carrousel */
.thumbnail-carousel {
    margin: 0 auto; /* Centrage horizontal */
    height: 100vh; /* Hauteur maximale de l'écran */
    max-width: 100%; /* Largeur maximale */
    display: flex;
    align-items: center; /* Centrage vertical */
    justify-content: center;
}

/* Swiper slide : chaque diapositive */
.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Hauteur totale du carrousel */
    opacity: 0.6; /* Opacité réduite pour les slides inactives */
    transition: opacity 0.3s;
}

.swiper-slide.active-slide {
    opacity: 1; /* Slide active en pleine opacité */
    border: 2px solid #0073aa; /* Bordure autour de l'image active */
}

/* Image dans le carrousel */
.carousel-thumbnail {
    max-height: 90vh; /* Ne dépasse pas la hauteur de l'écran */
    width: auto; /* Ajuste la largeur proportionnellement */
    object-fit: contain; /* Conserve les proportions sans rognage */
    cursor: pointer;
}

/* Flèches de navigation */
.swiper-button-next,
.swiper-button-prev {
    color: #0073aa;
    width: 40px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
}

/* Image principale */
.single-image-display {
    margin: 0 auto;
    text-align: center;
    height: 90vh; /* Hauteur maximale de l'écran */
    display: flex;
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
}

.main-image {
    max-height: 90vh; /* Ne dépasse pas l'écran */
    width: auto; /* Ajuste automatiquement la largeur */
    object-fit: contain; /* Garde les proportions sans rognage */
    border: 2px solid #ddd;
    border-radius: 5px;
    padding: 10px;
}