/* ========================================
   SWIPER CUSTOM CAROUSELS
   ========================================
   Version: 2.0.0
   Auteur: Software République
   Description: Styles personnalisés pour les carrousels Swiper
   Dernière mise à jour: Janvier 2025
   ======================================== */


/* ========================================
   TABLE DES MATIÈRES
   ========================================
   
   1. VARIABLES GLOBALES
      1.1 Carrousel 3D
      1.2 Accordion Slider
      1.3 Timeline Slider
   
   2. BASE & RESET
      2.1 Classes utilitaires
   
   3. CARROUSEL 3D CIRCLE
      3.1 Container & Wrapper
      3.2 Scène 3D
      3.3 Rotator & Animation
      3.4 Items & Images
      3.5 Effets visuels (brightness selon position)
      3.6 Ombres
   
   4. CARROUSEL 3D INTERACTIF
      4.1 Pointer Events
      4.2 États du Wrapper
      4.3 Items Interactifs
      4.4 Tooltip
      4.5 Indicateur d'Interactivité
   
   5. CARROUSEL LARGE
      5.1 Container
      5.2 Navigation années
      5.3 Légende
      5.4 Boutons
   
   6. ACCORDION SLIDER
      6.1 Container
      6.2 Wrapper & Slides
      6.3 Structure Kadence (Row/Columns)
      6.4 Image (colonne 1)
      6.5 Légende (colonne 2)
      6.6 Navigation
      6.7 États hover
   
   7. TIMELINE SLIDER
      7.1 Container & Sticky
      7.2 Swiper dimensions
      7.3 Contenu slides (Kadence)
      7.4 Légende
      7.5 Timeline Navigation verticale
      7.6 Points & Connecteurs
      7.7 Texte (année/mois)
   
   8. CLASSIC SLIDER
      8.1 Container
      8.2 Navigation Arrows
      8.3 Dot Navigation
      8.4 Link with Icon Overlay
   
   9. RESPONSIVE
      9.1 Tablet (max-width: 1024px)
      9.2 Mobile (max-width: 768px)
   
   ======================================== */


/* ========================================
   1. VARIABLES GLOBALES
   ======================================== */

:root {
    
    /* ----------------------------------
       1.1 Carrousel 3D
       ---------------------------------- */
    --carousel3d-radius: 380px;
    --carousel3d-tilt: 15deg;
    --carousel3d-tilt-start: 5deg;
    --carousel3d-tilt-end: -23deg;
    --carousel3d-perspective: 1500px;
    --carousel3d-scale: 1;
    --carousel3d-speed: 40s;
}

/* ----------------------------------
   1.2 Accordion Slider
   Note: Variables définies inline par JS
   - --inactive-width
   - --active-width
   ---------------------------------- */

/* ----------------------------------
   1.3 Timeline Slider
   ---------------------------------- */
.timeline {
    --timeline-width: 200px;
    --legend-slide-distance: 60px;
    --timeline-item-spacing: 80px;
    --timeline-active-position: 40;
}


/* ========================================
   2. BASE & RESET
   ======================================== */

/* ----------------------------------
   2.1 Classes utilitaires
   ---------------------------------- */

/* Cache l'élément original du carrousel 3D */
.carousel3d-original-hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}


/* ========================================
   3. CARROUSEL 3D CIRCLE
   ======================================== */

/* ----------------------------------
   3.1 Container & Wrapper
   ---------------------------------- */
.carousel3d-wrapper {
    position: relative;
    width: 100%;
    max-width: 100vw;
    min-height: 550px;
    margin: 60px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: var(--carousel3d-perspective);
    overflow: hidden;
    overflow-x: clip;
    pointer-events: none;
}

/* ----------------------------------
   3.2 Scène 3D
   ---------------------------------- */
.carousel3d-scene {
    position: relative;
    width: 100%;
    max-width: 90vw;
    height: 400px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transform: rotateX(var(--carousel3d-tilt)) scale(var(--carousel3d-scale));
    transition: transform 0.15s ease-out;
    animation: carousel3d-fade-in 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ----------------------------------
   3.3 Rotator & Animation
   ---------------------------------- */
.carousel3d-rotator {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotateY(0deg);
    transform-style: preserve-3d;
    animation: carousel3d-infinite-spin var(--carousel3d-speed) linear infinite;
}

@keyframes carousel3d-infinite-spin {
    from { 
        transform: translateX(-50%) translateY(-50%) rotateY(0deg); 
    }
    to { 
        transform: translateX(-50%) translateY(-50%) rotateY(-360deg); 
    }
}

@keyframes carousel3d-fade-in {
    from {
        opacity: 0;
        transform: rotateX(calc(var(--carousel3d-tilt) - 20deg)) scale(0.8);
    }
    to {
        opacity: 1;
        transform: rotateX(var(--carousel3d-tilt)) scale(var(--carousel3d-scale));
    }
}

/* ----------------------------------
   3.4 Items & Images
   ---------------------------------- */
.carousel3d-item {
    position: absolute !important;
    width: 320px;
    height: 140px;
    left: 50%;
    top: 50%;
    margin-left: -160px;
    margin-top: -100px;
    transform-style: preserve-3d;
    border: none;
    background: transparent;
}

.carousel3d-item-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.carousel3d-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter 0.5s ease;
	filter:blur(50%)!important;
}

/* ----------------------------------
   3.5 Effets visuels (brightness selon position)
   ---------------------------------- */
.carousel3d-item[data-position="front"] img {
    filter: brightness(1.1) contrast(1.05);
}

.carousel3d-item[data-position="front-side"] img {
    filter: brightness(1) contrast(1);
}

.carousel3d-item[data-position="side"] img {
    filter: brightness(0.8) contrast(0.95);
}

.carousel3d-item[data-position="back-side"] img {
    filter: brightness(0.6) contrast(0.9);
}

.carousel3d-item[data-position="back"] img {
    filter: brightness(0.4) contrast(0.85) blur(0.5px);
}

/* ----------------------------------
   3.6 Ombres
   ---------------------------------- */
.carousel3d-item::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 20%;
    right: 20%;
    height: 20px;
    background: radial-gradient(ellipse at center, 
        rgba(0, 0, 0, 0.2) 0%, 
        transparent 70%);
    filter: blur(15px);
    transform: rotateX(90deg);
    opacity: 0.4;
    pointer-events: none;
}


/* ========================================
   4. CARROUSEL 3D INTERACTIF
   ======================================== */

/* ----------------------------------
   4.1 Pointer Events
   ---------------------------------- */
.carousel3d-wrapper.carousel3d-interactive {
    pointer-events: auto !important;
    cursor: grab;
}

.carousel3d-wrapper.carousel3d-interactive .carousel3d-scene,
.carousel3d-wrapper.carousel3d-interactive .carousel3d-rotator,
.carousel3d-wrapper.carousel3d-interactive .carousel3d-item {
    pointer-events: auto;
}

/* Désactivation de l'animation CSS (géré par JS) */
.carousel3d-wrapper.carousel3d-interactive .carousel3d-rotator {
    animation: none !important;
}

/* ----------------------------------
   4.2 États du Wrapper
   ---------------------------------- */
.carousel3d-wrapper.carousel3d-interactive:focus {
    outline: none;
}

.carousel3d-wrapper.carousel3d-interactive:focus-visible {
    outline: 2px solid var(--col_3, #f5a623);
    outline-offset: 4px;
}

.carousel3d-wrapper.carousel3d-interactive.is-paused {
    cursor: grab;
}

.carousel3d-wrapper.carousel3d-interactive.is-dragging {
    cursor: grabbing !important;
    user-select: none;
}

/* ----------------------------------
   4.3 Items Interactifs
   ---------------------------------- */

/* Lien dans les items */
.carousel3d-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.carousel3d-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Items cliquables (front et front-side) */
.carousel3d-item[data-position="front"],
.carousel3d-item[data-position="front-side"] {
    cursor: pointer;
}

.carousel3d-item[data-position="front"] .carousel3d-link,
.carousel3d-item[data-position="front-side"] .carousel3d-link {
    cursor: pointer;
    pointer-events: auto;
}

/* Effet hover sur items cliquables */
.carousel3d-item[data-position="front"]:hover .carousel3d-link,
.carousel3d-item[data-position="front-side"]:hover .carousel3d-link {
    transform: scale(1.08);
}

.carousel3d-item[data-position="front"]:hover img,
.carousel3d-item[data-position="front-side"]:hover img {
    filter: brightness(1.2) contrast(1.05) !important;
}

/* Items non-cliquables (back, back-side, side) */
.carousel3d-item[data-position="back"],
.carousel3d-item[data-position="back-side"],
.carousel3d-item[data-position="side"] {
    cursor: default;
}

.carousel3d-item[data-position="back"] .carousel3d-link,
.carousel3d-item[data-position="back-side"] .carousel3d-link,
.carousel3d-item[data-position="side"] .carousel3d-link {
    cursor: default;
    pointer-events: none !important;
}

/* ----------------------------------
   4.4 Tooltip
   ---------------------------------- */
.carousel3d-tooltip {
    /* Positionnement */
    position: fixed !important;
    z-index: 2147483647 !important;
    
    /* Style visuel */
    background: #ffffff !important;
    color: #1a1a1e !important;
    
    /* Dimensions */
    padding: 12px 18px !important;
    border-radius: 5px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    max-width: 150px !important;
	transform:translateY(-10px);
    text-align: center !important;
    /*white-space: nowrap !important;*/
    
    /* Bordure et ombre */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.3) !important;
    
    /* État initial (caché) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    
    /* Transition (mouvement géré par JS) */
    transition: 
        opacity 0.25s ease-out,
        visibility 0.25s !important;
}

/* Flèche du tooltip */
.carousel3d-tooltip::after {
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 10px solid transparent !important;
    border-right: 10px solid transparent !important;
    border-top: 10px solid #fff !important;
    border-bottom: none !important;
	
}

/* État visible */
.carousel3d-tooltip.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ----------------------------------
   4.5 Indicateur d'Interactivité
   ---------------------------------- */
.carousel3d-wrapper.carousel3d-interactive::before {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: rgba(255, 255, 255, 0.25);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 10;
	display:block;
	width:60px;
	height:40px;
	background:url(images/rotate.svg) no-repeat center/contain;
}

.carousel3d-wrapper.carousel3d-interactive:hover::before {
    opacity: .7;
}

.carousel3d-wrapper.carousel3d-interactive.is-dragging::before {
    opacity: 0;
}


/* ========================================
   5. CARROUSEL LARGE
   ======================================== */

/* ----------------------------------
   5.1 Container
   ---------------------------------- */
.carrousel-large .swiper {
    margin-bottom: 0 !important;
    cursor: pointer;
}

/* ----------------------------------
   5.2 Navigation années
   ---------------------------------- */
.carrousel-large .swiper-nav-container {
    position: absolute;
    left: 50%;
    bottom: var(--global-kb-spacing-lg, 3rem);
    transform: translateX(-50%);
    display: flex;
    width: 100%;
    max-width: var(--papir-content-width);
    padding-right: var(--global-kb-spacing-lg, 3rem);
    padding-left: var(--global-kb-spacing-lg, 3rem);
    justify-content: flex-start;
    align-items: baseline;
    z-index: 200;
}

.swiper-years {
    display: flex;
    gap: 1em;
    width: 50%;
}

.swiper-years span {
    display: flex;
    align-items: center;
    gap: 1em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.swiper-years span::before {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background: white;
    transition: all 0.6s;
}

.swiper-years span.active {
    color: rgba(255, 255, 255, 1);
}

.swiper-years span.active::before {
    width: 6em;
    transition: all 0.6s;
}

/* ----------------------------------
   5.3 Légende
   ---------------------------------- */
.carrousel-large-legend {
    max-width: 440px;
	width:100%;
}

.carrousel-large-legend p {
    font-weight: 400;
}

.swiper-legend {
    transform: translateX(-50%);
    font-size: var(--global-kb-font-size-lg);
    font-weight: 600;
}

/* ----------------------------------
   5.4 Boutons
   ---------------------------------- */
.carrousel-large .wp-block-kadence-advancedbtn .kb-svg-icon-wrap {
    color: var(--col_3);
    background-color: var(--col_2);
}

.carrousel-large .wp-block-kadence-advancedbtn .wp-block-button__link .kt-btn-inner-text::after {
    background: var(--col_2);
}


/* ========================================
   6. ACCORDION SLIDER
   ======================================== */

/* ----------------------------------
   6.1 Container
   ---------------------------------- */
.cb-carousel-block.accordion-slider {
    display: flex;
    gap: 20px;
    align-items: flex-end;
}

.accordion-slider.swiper {
    overflow: visible !important;
    position: relative;
    margin-right: 100px;
}

.cb-carousel-block.accordion-slider > .swiper {
    flex-grow: 2;
}

/* ----------------------------------
   6.2 Wrapper & Slides
   ---------------------------------- */
.accordion-slider .swiper-wrapper {
    display: flex !important;
    transform: none !important;
    height: auto !important;
}

.accordion-slider .swiper-slide {
    flex: 0 0 var(--inactive-width, 10%) !important;
    min-width: 0 !important;
    width: var(--inactive-width, 10%) !important;
    height: 100% !important;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border-radius: 8px;
    transition: flex 0.7s cubic-bezier(0.25, 0.8, 0.25, 1),
                width 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.accordion-slider .swiper-slide.is-active {
    flex: 0 0 var(--active-width, 80%) !important;
    width: var(--active-width, 80%) !important;
    cursor: default;
}

/* ----------------------------------
   6.3 Structure Kadence (Row/Columns)
   ---------------------------------- */
.accordion-slider .swiper-slide .kb-row-layout-wrap {
    height: 100% !important;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.accordion-slider .swiper-slide .kt-row-column-wrap {
    display: block !important;
    height: 100% !important;
    position: relative;
}

/* ----------------------------------
   6.4 Image (colonne 1)
   ---------------------------------- */
.accordion-slider .swiper-slide .kt-row-column-wrap > .wp-block-kadence-column:first-child {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
}

.accordion-slider .swiper-slide .kt-row-column-wrap > .wp-block-kadence-column:first-child .kt-inside-inner-col {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.accordion-slider .swiper-slide .wp-block-kadence-image,
.accordion-slider .swiper-slide figure.wp-block-kadence-image {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.accordion-slider .swiper-slide .kb-is-ratio-image {
    height: 100% !important;
    padding-bottom: 0 !important;
    position: relative;
}

.accordion-slider .swiper-slide .kb-is-ratio-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    max-width: none !important;
}

/* Icône dans le slide */
.accordion-slider .swiper-slide .wp-block-kadence-icon {
    position: absolute;
    right: -5rem;
    top: 1rem;
    z-index: 3;
    transition: all 0.5s;
}

.accordion-slider .swiper-slide.is-active .wp-block-kadence-icon {
    right: 1rem;
    transition: all 0.5s;
}

/* ----------------------------------
   6.5 Légende (colonne 2) - Animation slide up/down
   ---------------------------------- */
.accordion-slider .swiper-slide .kt-row-column-wrap > .wp-block-kadence-column:last-child {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    z-index: 2;
    margin: 0 !important;
    box-sizing: border-box;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.6, 1),
                opacity 0.12s ease; /* disparaît quasi-instantanément */
}

.accordion-slider .swiper-slide.is-active .kt-row-column-wrap > .wp-block-kadence-column:last-child {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0.5s,
                opacity 0.3s ease 0.5s; /* apparaît après le délai existant */
}



/* ----------------------------------
   6.6 Navigation
   ---------------------------------- */
.accordion-slider .cb-button-prev,
.accordion-slider .cb-button-next {
    position: static !important;
    width: 39px !important;
    height: 39px !important;
    background: var(--col_3) !important;
    border: none !important;
    border-radius: 5px !important;
    margin: 0 !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    z-index: 20;
    color: var(--col_2);
    cursor: pointer;
}

.accordion-slider .cb-button-prev::after,
.accordion-slider .cb-button-next::after {
    font-size: 10px !important;
}

/* ----------------------------------
   6.7 États hover
   ---------------------------------- */
.accordion-slider .swiper-slide:not(.is-active):hover {
    filter: brightness(1.05);
}


/* ========================================
   7. TIMELINE SLIDER
   ======================================== */

/* ----------------------------------
   7.1 Container & Sticky
   ---------------------------------- */
.timeline-section {
    position: relative;
}

.timeline-section .timeline {
    position: sticky !important;
    top: 0 !important;
    width: 100%;
    height: 100vh !important;
    overflow: hidden !important;
}

/* ----------------------------------
   7.2 Swiper dimensions
   ---------------------------------- */
.timeline .swiper {
    width: 100% !important;
    height: 100% !important;
}

.timeline .swiper-slide {
    width: 100% !important;
    height: 100% !important;
}

/* ----------------------------------
   7.3 Contenu slides (Kadence)
   ---------------------------------- */
.timeline .swiper-slide .kb-row-layout-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.timeline .swiper-slide .kt-row-column-wrap {
    width: 100%;
    padding-left: calc(var(--timeline-width) / 2); /* Changé de padding-right à padding-left */
    padding-right: 0 /* Espace pour la navigation événements à droite */
}

/* ----------------------------------
   7.4 Légende - Animation slide right (inversé)
   ---------------------------------- */
.timeline .timeline-legende {
    opacity: 0;
    transform: translateX(var(--legend-slide-distance)); /* Inversé : vient de la droite */
    transition: opacity 0.5s ease, 
                transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-delay: 0s;
    max-width: 680px;
}

.timeline .swiper-slide-active .timeline-legende {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}

/* ----------------------------------
   7.5 Timeline Navigation verticale - GAUCHE
   ---------------------------------- */
.timeline-nav {
    position: absolute;
    top: 0;
    left: 0; /* Changé de right: 0 à left: 0 */
    right: auto;
    width: var(--timeline-width);
    height: 100%;
    z-index: 100;
    pointer-events: none;
    overflow: hidden;
}

/* Ligne verticale fixe - à droite de la nav maintenant */
.timeline-nav::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0; /* Changé de left: 0 à right: 0 */
    left: auto;
    width: 2px;
    background: rgba(255, 255, 255, 1);
}

/* Container des items (défilant) */
.timeline-nav-inner {
    position: absolute;
    left: 0;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ----------------------------------
   7.6 Points & Connecteurs
   ---------------------------------- */
.timeline-nav-item {
    position: relative;
    height: var(--timeline-item-spacing);
    min-height: 25vh;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Changé de flex-start à flex-end */
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.4s ease;
    opacity: 0.3;
}

.timeline-nav-item:hover {
    opacity: 0.6;
}

.timeline-nav-item.is-active {
    opacity: 1;
}

/* Ligne connecteur horizontal - inversé */
.timeline-nav-item::after {
    content: "";
    position: absolute;
    right: 0; /* Changé de left: 0 à right: 0 */
    left: auto;
    top: 50%;
    width: 15px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%);
}

.timeline-nav-item.is-active::after {
    background: rgba(255, 255, 255, 1);
    width: 35px;
}

/* ----------------------------------
   7.7 Texte (année/mois) - aligné à droite
   ---------------------------------- */
.timeline-nav-text {
    text-align: right; /* Changé de left à right */
    padding-right: 25px; /* Changé de padding-left à padding-right */
    padding-left: 0;
}

.timeline-nav-item.is-active .timeline-nav-text {
    padding-right: 45px; /* Changé de padding-left à padding-right */
    padding-left: 0;
}

.timeline-nav-year {
    font-size: 1.8rem;
    font-weight: 400;
    color: white;
    line-height: 1.1;
    display: block;
    transition: font-size 0.4s ease;
}

.timeline-nav-item.is-active .timeline-nav-year {
    font-size: 2.2rem;
}

.timeline-nav-month {
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    text-transform: capitalize;
    display: block;
}

/* ----------------------------------
   7.8 Navigation Événements (NOUVEAU)
   ---------------------------------- */

/* Masquer les contrôles natifs du plugin */
.events-slider .cb-pagination,
.events-slider .swiper-pagination,
.events-slider .cb-button-prev,
.events-slider .swiper-button-prev {
    display: none !important;
}

/* Container navigation événements */
.events-nav {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    z-index: 100;
	
	background:rgba(0, 0, 0, .4);
	border-radius:50px;
	padding-left:20px;
	
}
.events-slider .cb-button-next{display:none;}
/* Indicateur de pagination (1/3) */
.events-nav-counter {
    font-size: 1rem;
    font-weight: 500;
    color: white;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.events-nav-counter .current {
    color: white;
    font-weight: 600;
}

/* Flèche unique (next) */
.events-nav-arrow {
    width: 50px;
    height: 50px;
    background: var(--col_3, #F5A623);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--col_2, #1a1a1a);
}

.events-nav-arrow:hover {
    background: black;
    transform: scale(1);
}

.events-nav-arrow:active {
    transform: scale(0.95);
}

/* Icône flèche */
.events-nav-arrow::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    margin-left: -3px;
}

/* État désactivé (optionnel si pas de loop) */
.events-nav-arrow.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}
/* ----------------------------------
   7.9 Animation contenu événements
   ---------------------------------- */

/* État initial : caché en bas avec opacité 0 */
.events-slider .swiper-slide .kt-row-column-wrap {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, 
                transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* État visible : animé vers le haut avec fade in */
.events-slider .swiper-slide-active .kt-row-column-wrap,
.events-slider .swiper-slide .kt-row-column-wrap.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Délai pour effet cascade si plusieurs blocs */
.events-slider .swiper-slide-active .kt-row-column-wrap:nth-child(1) { transition-delay: 0.1s; }
.events-slider .swiper-slide-active .kt-row-column-wrap:nth-child(2) { transition-delay: 0.2s; }
.events-slider .swiper-slide-active .kt-row-column-wrap:nth-child(3) { transition-delay: 0.3s; }


/* ========================================
   TIMELINE - MOBILE OVERRIDE
   max-width: 768px
   ======================================== */

@media (max-width: 768px) {

.events-slider {
    position: relative;
  }

  .swipe-hint-arrow {
    position: absolute;
    right: 15px;
    top: 30px;
    
    width: 60px;
    height: 40px;
    background: url(images/rotate.svg) no-repeat center/contain;
    opacity: 0.8;
    pointer-events: none;
    z-index: 10;
    animation: swipe-pulse 1.5s ease-in-out infinite;
    transition: opacity 0.4s ease;
  }

  .swipe-hint-arrow.is-hidden {
    opacity: 0;
  }

  @keyframes swipe-pulse {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(6px); }
  }

    .timeline-section {
        height: auto !important;
    }

    .timeline-section .timeline {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    .timeline .swiper {
        height: auto !important;
    }

    /* Neutraliser le layout Swiper parent */
    .wp-block-cb-carousel-v2.timeline > .swiper > .swiper-wrapper {
    display: block !important;
    transform: none !important;
}
	.wp-block-cb-carousel-v2.timeline .year-slide:not(.mobile-hidden) {
    display: block !important;
    transform: none !important;
    left: auto !important;
    margin-left: 0 !important;
}

    /* Cacher tous les year-slides par défaut */
    .wp-block-cb-carousel-v2.timeline .year-slide {
        display: none !important;
        width: 100% !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    /* Afficher uniquement le slide actif */
    .wp-block-cb-carousel-v2.timeline .year-slide:not(.mobile-hidden) {
        display: block !important;
    }

    /* Masque éléments desktop */
    .timeline-nav {
        display: none !important;
    }

    .events-nav {
        display: none !important;
    }

    /* Pills années */
    .timeline-years-pills {
        position: sticky;
        top: 80px;
        z-index: 200;
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        overflow-x: auto;
        scrollbar-width: none;
        background: var(--col_1);
        -webkit-overflow-scrolling: touch;
		border-top:dotted 1px var(--wp--preset--color--kb-palette-8);
    }

    .timeline-years-pills::-webkit-scrollbar {
        display: none;
    }

    .timeline-year-pill {
        flex: 0 0 auto;
        padding: 6px 18px;
        border-radius: 5px;
        border: 1px solid rgba(255,255,255,0.3);
        background: transparent;
        color: rgba(255,255,255,0.5);
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    .timeline-year-pill.is-active {
        background: var(--col_3);
        border-color: var(--col_3);
        color: var(--col_2, #1a1a1e);
        font-weight: 600;
    }

    /* Contenu slides */
    .timeline .swiper-slide .kb-row-layout-wrap {
        min-height: 60vh;
    }

    .timeline .swiper-slide .kt-row-column-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 24px !important;
        padding-bottom: 80px !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Légende toujours visible */
    .timeline .timeline-legende {
        opacity: 1 !important;
        transform: translateX(0) !important;
        transition: none !important;
    }

    /* Pagination events slider */
    .timeline .events-slider .cb-pagination {
        display: flex !important;
    	justify-content: center;
    	padding: 16px 16px 0;
    	position: absolute;
    	top: 10px;
    	left: 10px;
    	gap: 7px;
		display:none!important;
    }
	.timeline .wp-block-cb-carousel-v2[data-cb-pagination="true"] .swiper-horizontal{
		margin-bottom:0!important;
	}
    .timeline .events-slider .cb-pagination .swiper-pagination-bullet {
        background: rgba(255,255,255,0.4) !important;
        opacity: 1 !important;
        width: 8px !important;
        height: 8px !important;
    }

    .timeline .events-slider .cb-pagination .swiper-pagination-bullet-active {
        background: var(--col_3) !important;
        width: 2rem !important;
        border-radius: 1em !important;
    }

    /* Indicateur swipe */
    .swipe-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 10px 0 0;
        opacity: 1;
        transition: opacity 0.5s ease;
        pointer-events: none;
    }

    .swipe-hint.is-hidden {
        opacity: 0;
    }

    .swipe-hint-chevron {
        display: block;
        width: 10px;
        height: 10px;
        border-right: 2px solid rgba(255,255,255,0.6);
        border-bottom: 2px solid rgba(255,255,255,0.6);
        transform: rotate(-45deg);
        animation: swipe-hint-anim 1.2s ease-in-out infinite;
    }

    .swipe-hint-chevron:nth-child(2) {
        animation-delay: 0.15s;
        opacity: 0.6;
    }

    .swipe-hint-chevron:nth-child(3) {
        animation-delay: 0.3s;
        opacity: 0.3;
    }

    @keyframes swipe-hint-anim {
        0%   { transform: rotate(-45deg) translateX(0);    opacity: 1; }
        50%  { transform: rotate(-45deg) translateX(-4px); opacity: 0.4; }
        100% { transform: rotate(-45deg) translateX(0);    opacity: 1; }
    }
}



/* ========================================
   8. CLASSIC SLIDER
   ======================================== */

/* ----------------------------------
   8.1 Container
   ---------------------------------- */
.cursor-next-button-classic {
    cursor: pointer;
}

/* ----------------------------------
   8.2 Navigation Arrows
   ---------------------------------- */
.classic-slider .swiper-button-prev,
.classic-slider .swiper-button-next {
    color: var(--col_2);
    background: var(--col_3);
    border-radius: 5px;
    height: 39px;
    width: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.classic-slider .swiper-button-prev:after,
.classic-slider .swiper-button-next:after {
    font-size: 10px;
}

.classic-slider .swiper-button-prev {
    transform: translateX(-100%);
}

.classic-slider .swiper-button-next {
    transform: translateX(100%);
}



.classic-slider .swiper-wrapper{
	align-items:stretch;
}
.classic-slider .swiper-wrapper > div{
	height:auto!important;
}
.classic-slider .swiper-wrapper > div > div{
	height:100%!important;
}
/* ----------------------------------
   8.3 Dot Navigation
   ---------------------------------- */
.classic-slider .cb-pagination.swiper-pagination-horizontal {
    justify-content: center;
    padding-top: 1rem;
	bottom:-40px;
	
}

.classic-slider .cb-pagination.swiper-pagination-horizontal > span {
    transition: all 0.4s;
    background: var(--col_6);
    opacity: 1;
}

.classic-slider .cb-pagination.swiper-pagination-horizontal > span{
	width:12px;
	height:12px
}
.classic-slider .cb-pagination.swiper-pagination-horizontal > span:not(.swiper-pagination-bullet-active):hover{
	background:#ccc!important;
	opacity:1!important;
}
.classic-slider .cb-pagination.swiper-pagination-horizontal > span.swiper-pagination-bullet-active {
    width: 4rem;
    border-radius: 1em;
    transition: all 0.4s;
    background: var(--col_3);
}

/* ----------------------------------
   8.4 Link with Icon Overlay
   ---------------------------------- */
.classic-slider .wp-block-kadence-icon {
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 2;
}


/* ========================================
   9. RESPONSIVE
   ======================================== */

/* ----------------------------------
   9.1 Tablet (max-width: 1024px)
   ---------------------------------- */
@media (max-width: 1024px) {
    
    /* Timeline */
    .timeline {
        --timeline-width: 140px;
        --legend-slide-distance: 40px;
        --timeline-item-spacing: 70px;
    }
    
    .timeline-nav-year {
        font-size: 1.4rem;
    }
    
    .timeline-nav-item.is-active .timeline-nav-year {
        font-size: 1.7rem;
    }
    
    .timeline-nav-month {
        font-size: 0.8rem;
    }
    
    /* Accordion */
    .accordion-slider .swiper-slide {
        flex: 0 0 100px !important;
        min-width: 100px !important;
    }
    
    .accordion-slider .swiper-slide.is-active {
        min-width: 300px !important;
    }
}

/* ----------------------------------
   9.2 Mobile (max-width: 768px)
   ---------------------------------- */
@media (max-width: 768px) {
    
    /* === Carrousel 3D === */
    :root {
        --carousel3d-radius: 250px;
        --carousel3d-scale: 0.85;
        --carousel3d-speed: 35s;
    }
    
    .carousel3d-wrapper {
        max-width: 95vw;
        min-height: 400px;
        margin: 40px auto;
    }
    
    .carousel3d-item {
        width: 240px;
        height: 150px;
        margin-left: -120px;
        margin-top: -75px;
    }
    
    /* Tooltip */
    .carousel3d-tooltip {
        font-size: 13px !important;
        padding: 10px 14px !important;
        max-width: 220px !important;
    }
    
    /* Indicateur d'interactivité */
    .carousel3d-wrapper.carousel3d-interactive::before {
        display: none;
    }
    
    /* Feedback tactile */
    .carousel3d-item[data-position="front"]:active .carousel3d-link,
    .carousel3d-item[data-position="front-side"]:active .carousel3d-link {
        transform: scale(0.95);
    }
    
    /* === Timeline === */
    .timeline {
        --timeline-width: 100px;
        --timeline-item-spacing: 60px;
    }
    
    .timeline-nav-year {
        font-size: 1.1rem;
    }
    
    .timeline-nav-item.is-active .timeline-nav-year {
        font-size: 1.3rem;
    }
    
    .timeline-nav-month {
        font-size: 0.7rem;
    }
    
    .timeline-nav-item::before {
        width: 8px;
        height: 8px;
        margin-left: -25px;
    }
    
    .timeline-nav-item.is-active::before {
        width: 10px;
        height: 10px;
    }
    
    .timeline-nav-item::after {
        width: 15px;
        margin-left: -12px;
    }
    
    /* === Accordion === */
    .accordion-slider.swiper {
        margin-right: 0;
    }
    
    .accordion-slider .swiper-wrapper {
        flex-direction: column;
        aspect-ratio: unset !important;
        height: auto !important;
    }
    
    .accordion-slider .swiper-slide {
        flex: 0 0 80px !important;
        width: 100% !important;
        min-width: 100% !important;
        height: 80px !important;
    }
    
    .accordion-slider .swiper-slide.is-active {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 250px;
        aspect-ratio: 2 / 1;
    }
    
    .accordion-slider .cb-button-prev,
    .accordion-slider .cb-button-next {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        display: inline-flex !important;
    }
    
    .accordion-slider .cb-button-prev {
        border-bottom: 1px solid currentColor !important;
    }


	/*-- FULL SIZE CARROUSEL --*/
	.carrousel-large-legend {
    	max-width: 100%;
	}
	
	.carrousel-large .swiper-nav-container{
		bottom: auto;
    	top: 0;
    	flex-direction: column;
    	align-items: flex-start;
    	padding-right: var(--global-kb-spacing-md, 2rem);
    	padding-left: var(--global-kb-spacing-md, 2rem);
		gap:1rem;
	}
	.swiper-legend{
		transform:translate(0);
	}
	
	.swiper-years span{
		border:solid 1px;
		padding:.1em 1em;
		border-radius:2em;
	}
	.swiper-years span.active:before, .swiper-years span:before{
		display:none;
	}
	.swiper-years span.active{
		color:var(--col_3);
	}
}

/* ----------------------------------
   9.3 Devices sans hover (tactiles)
   ---------------------------------- */
@media (hover: none) {
    
    .carousel3d-wrapper.carousel3d-interactive,
    .carousel3d-wrapper.carousel3d-interactive:not(.is-dragging) {
        cursor: default;
    }
    
    .carousel3d-item[data-position="front"]:hover .carousel3d-link,
    .carousel3d-item[data-position="front-side"]:hover .carousel3d-link {
        transform: none;
    }
}

/* ========================================
   9. RESPONSIVE - Section Timeline
   ======================================== */

@media (max-width: 1024px) {
    
    .timeline {
        --timeline-width: 140px;
        --legend-slide-distance: 40px;
        --timeline-item-spacing: 70px;
    }
    
    .timeline .swiper-slide .kt-row-column-wrap {
        padding-right: 100px;
    }
    
    .timeline-nav-year {
        font-size: 1.4rem;
    }
    
    .timeline-nav-item.is-active .timeline-nav-year {
        font-size: 1.7rem;
    }
    
    .timeline-nav-month {
        font-size: 0.8rem;
    }
    
    .events-nav {
        right: 25px;
    }
    
    .events-nav-arrow {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 768px) {
    
    .timeline {
        --timeline-width: 100px;
        --timeline-item-spacing: 60px;
    }
    
    .timeline .swiper-slide .kt-row-column-wrap {
        padding-right: 80px;
    }
    
    .timeline-nav-year {
        font-size: 1.1rem;
    }
    
    .timeline-nav-item.is-active .timeline-nav-year {
        font-size: 1.3rem;
    }
    
    .timeline-nav-month {
        font-size: 0.7rem;
    }
    
    .timeline-nav-item::after {
        width: 15px;
    }
    
    .events-nav {
        right: 15px;
        gap: 15px;
    }
    
    .events-nav-arrow {
        width: 40px;
        height: 40px;
    }
    
    .events-nav-counter {
        font-size: 0.85rem;
    }
}
/* ========================================
   FIN DU FICHIER
   ======================================== */