/*
    Timeline Éducative - Styles CSS
    
    Auteur: Emile SNYERS
    Date de dernière modification: 2025-06-28
    Langue: Français
    Licence: Tous droits réservés
    Copyright: © Emile SNYERS
    Autorisation: 
        - Utilisation totalement gratuite sous conditions.
    Conditions d'utilisation: 
        - Usage non commercial. 
        - Mentionner l'auteur et la source.
        - Redistribution interdite sans autorisation écrite.
    Date de création: 2025-06-??
    Version: 10.0
    Details de la version: 
        - Renomer les variables CSS pour avoir les memes noms que les autres modules.
    
    Description: Styles pour la timeline interactive avec galerie d'images,
    recherche et filtres. Responsive design adapté à tous les appareils.
    
    Licence: Tous droits réservés
    
    Structure:
    1. Variables CSS personnalisées
    2. Reset et styles de base
    3. Conteneur principal
    4. En-tête et recherche
    5. Timeline et éléments
    6. Galerie d'images
    7. Boutons d'action
    8. Modal lightbox
    9. Responsive design
    10. Animations
*/

/* ====================================================================
   VARIABLES CSS PERSONNALISÉES
   Variables avec préfixe spécifique pour éviter les conflits
   ==================================================================== */
:root {
    /* Couleurs principales du module timeline */
    /* Il y avait ici de nombreuses variables, mais depuis la version V 10,
       elles ont été remplacées par des variables générales utilisées partout */
    --tl-v7-bg-secondary: #f1f5f9; /* Couleur de fond secondaire utilisée pour certains éléments */

    
    /* Dimensions et espacements */
    --tl-v7-radius-small: 6px;  /* Rayon de bordure pour petits éléments (boutons, badges) */
    --tl-v7-radius-medium: 8px; /* Rayon de bordure pour éléments moyens */
    --tl-v7-radius-large: 12px; /* Rayon de bordure pour grands conteneurs */
    --tl-v7-radius-xl: 25px;    /* Rayon de bordure très grand (modals, tooltips) */
    --tl-v7-radius-round: 50px; /* Rayon pour éléments arrondis (boutons d'action) */
    --tl-v7-gap-small: 0.5rem;  /* Petit espacement entre éléments (0.5rem = 8px) */
    --tl-v7-gap-medium: 1rem;   /* Espacement moyen (1rem = 16px) */
    --tl-v7-gap-large: 1.5rem;  /* Grand espacement (1.5rem = 24px) */
    
    /* Effets visuels */
    --tl-v7-shadow-small: 0 2px 10px rgba(0, 0, 0, 0.1);   /* Ombre légère */
    --tl-v7-shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.08); /* Ombre moyenne */
    --tl-v7-shadow-large: 0 8px 30px rgba(0, 0, 0, 0.12);  /* Ombre prononcée */
    --tl-v7-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.5);     /* Ombre très forte pour modals */
    

    --tl-v7-gallery-gap: 1rem;            /* Espacement entre images dans la galerie */
    --tl-v7-image-border-radius: 8px;     /* Arrondi des coins pour les images */

    
    /* Informations de licence */
    --tl-v7-license-bg: rgba(0, 0, 0, 0.8); /* Fond semi-transparent pour les infos de licence */
}

/* ====================================================================
   RESET ET STYLES DE BASE
   Configuration globale pour un rendu cohérent
   ==================================================================== */
* {
    box-sizing: border-box; /* Tous les éléments incluent padding et border dans leur largeur */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; /* Police système pour meilleure performance */
    line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité */
    color: var(--theme-text); /* Couleur de texte définie par le thème global */
    background: var(--theme-background); /* Couleur de fond définie par le thème global */
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les paddings par défaut */
}

/* ====================================================================
   CONTENEUR PRINCIPAL
   Structure de base de la timeline
   ==================================================================== */
.tl-v7-container {
    max-width: 900px; /* Largeur maximale du conteneur */
    margin: 0 auto; /* Centrage horizontal */
    padding: 2rem 1rem; /* Espacement interne (32px haut/bas, 16px gauche/droite) */
}

/* ====================================================================
   EN-TÊTE AVEC RECHERCHE ET FILTRES
   Section supérieure avec titre, recherche et navigation
   ==================================================================== */
.tl-v7-header {
    text-align: center; /* Centre le contenu de l'en-tête */
    margin-bottom: 2rem; /* Espacement sous l'en-tête (32px) */
}

/* Titre principal avec effet gradient */
.tl-v7-header h1 {
    background: var(--theme-primary); /* Utilise la couleur primaire du thème comme fond */
    -webkit-background-clip: text; /* Découpe le texte selon le fond (pour webkit) */
    -webkit-text-fill-color: transparent; /* Rend le texte transparent pour voir le fond (pour webkit) */
    background-clip: text; /* Découpe standard pour les navigateurs modernes */
    font-size: 2.5rem; /* Taille du titre (40px) */
    margin-bottom: 0.5rem; /* Espacement sous le titre (8px) */
    font-weight: 700; /* Graisse de police en gras */
}

/* Sous-titre descriptif */
.tl-v7-subtitle {
    color: var(--theme-text); /* Couleur de texte du thème */
    font-size: 1.1rem; /* Taille du sous-titre (17.6px) */
    margin-bottom: 1.5rem; /* Espacement sous le sous-titre (24px) */
    opacity: 0.8; /* Légère transparence pour hiérarchie visuelle */
}

/* Barre de recherche avec effet glass morphism */
.tl-v7-search-input {
    width: 100%; /* Occupe toute la largeur disponible */
    max-width: 420px; /* Largeur maximale */
    padding: 0.65rem 1.2rem; /* Rembourrage interne (10.4px vertical, 19.2px horizontal) */
    border: 2px solid var(--theme-primary); /* Bordure de la couleur primaire */
    border-radius: var(--tl-v7-radius-round); /* Coins très arrondis */
    font-size: 1rem; /* Taille de police standard (16px) */
    outline: none; /* Supprime le contour par défaut au focus */
    transition: all 0.3s ease; /* Animation douce pour les changements d'état */
    background: rgba(255, 255, 255, 0.9); /* Fond légèrement transparent */
    backdrop-filter: blur(10px); /* Effet de flou pour glass morphism */
}

.tl-v7-search-input:focus {
    background: #f9f4ee; /* Changement de couleur au focus */
    transform: translateY(-2px); /* Léger déplacement vers le haut */
    box-shadow: 0 8px 25px rgba(198, 156, 109, 0.2); /* Ombre portée au focus */
}

.tl-v7-search-input::placeholder {
    color: rgba(51, 65, 85, 0.6); /* Couleur du texte placeholder légèrement transparente */
}

/* Message "aucun résultat" */
.tl-v7-no-results {
    text-align: center; /* Centre le contenu */
    padding: 3rem 2rem; /* Rembourrage généreux (48px vertical, 32px horizontal) */
    color: var(--theme-text); /* Couleur de texte du thème */
    display: none; /* Caché par défaut, affiché via JavaScript quand nécessaire */
    background: var(--theme-tertiary); /* Couleur de fond tertiaire du thème */
    border-radius: var(--tl-v7-radius-large); /* Coins arrondis */
    margin: 2rem 0; /* Espacement vertical (32px) */
    box-shadow: var(--tl-v7-shadow-medium); /* Ombre moyenne */
}

.tl-v7-no-results i {
    font-size: 3rem; /* Grande taille pour l'icône (48px) */
    color: var(--theme-text); /* Couleur de texte du thème */
    margin-bottom: 1rem; /* Espacement sous l'icône (16px) */
    display: block; /* Affichage en bloc pour occuper toute la largeur */
}

.tl-v7-no-results p {
    font-size: 1.2rem; /* Taille de texte plus grande (19.2px) */
    margin-bottom: 0.5rem; /* Petit espacement (8px) */
}

.tl-v7-no-results small {
    opacity: 0.7; /* Légère transparence pour le texte secondaire */
}

/* Filtres prédéfinis */
.tl-v7-preset-filters {
    margin-top: 1.2rem; /* Espacement au-dessus des filtres (19.2px) */
    display: flex; /* Disposition flexible */
    flex-wrap: wrap; /* Permet le retour à la ligne */
    justify-content: center; /* Centre les boutons horizontalement */
    gap: var(--tl-v7-gap-small); /* Petit espacement entre les boutons */
}

.tl-v7-preset-btn {
    border: 2px solid var(--theme-primary); /* Bordure de la couleur primaire */
    border-radius: 10px; /* Coins arrondis */
    padding: 0.5rem 1rem; /* Rembourrage (8px vertical, 16px horizontal) */
    font-size: 0.9rem; /* Taille de police légèrement réduite (14.4px) */
    cursor: pointer; /* Curseur main au survol */
    display: inline-flex; /* Disposition flexible en ligne */
    align-items: center; /* Centre verticalement */
    gap: 0.5rem; /* Espacement entre icône et texte */
    background: var(--theme-button-primary-text); /* Couleur de fond du bouton */
    color: var(--theme-primary); /* Couleur de texte primaire */
    transition: all 0.25s ease; /* Animation douce */
    backdrop-filter: blur(10px); /* Effet de flou pour glass morphism */
    font-weight: 500; /* Police semi-grasse */
}

.tl-v7-preset-btn:hover,
.tl-v7-preset-btn:focus,
.tl-v7-preset-btn.active {
    background: var(--theme-primary); /* Fond devient la couleur primaire */
    color: var(--theme-button-primary-text); /* Texte devient la couleur du bouton */
    transform: translateY(-2px); /* Léger déplacement vers le haut */
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); /* Ombre portée */
}

/* ====================================================================
   TIMELINE - STRUCTURE PRINCIPALE
   Ligne chronologique avec points et contenus
   ==================================================================== */
.tl-v7-timeline {
    position: relative; /* Pour le positionnement des éléments enfants */
    list-style: none; /* Supprime les puces de liste */
    padding-left: 0.1rem; /* Petit padding à gauche */
    border-left: 4px solid var(--theme-primary); /* Ligne verticale de la timeline */
    margin: 0; /* Supprime les marges par défaut */
}

/* Élément de timeline */
.tl-v7-timeline-item {
    position: relative; /* Pour positionner les points et contenus */
    margin-bottom: 3rem; /* Grand espacement entre éléments (48px) */
    display: flex; /* Disposition flexible */
    align-items: flex-start; /* Aligne les éléments en haut */
    color: var(--theme-text); /* Couleur de texte du thème */
    padding-left: 0.5rem; /* Espacement à gauche (8px) */
    transition: opacity 0.3s ease; /* Animation pour les changements de visibilité */
}

.tl-v7-timeline-item.hidden {
    display: none; /* Cache l'élément quand la classe 'hidden' est appliquée */
}

.tl-v7-timeline-item.highlight {
    animation: tl-v7-highlightPulse 1s ease; /* Animation de mise en évidence */
}

@keyframes tl-v7-highlightPulse {
    0%, 100% { opacity: 1; } /* Opacité normale au début et à la fin */
    50% { opacity: 0.7; background: rgba(251, 191, 36, 0.1); } /* Effet de pulsation au milieu */
}

/* Point sur la timeline avec icône */
.tl-v7-timeline-point {
    position: absolute; /* Positionnement absolu par rapport au parent */
    left: -1.15rem; /* Placement à gauche de la ligne (18.4px) */
    top: 0; /* Aligné en haut */
    width: 2rem; /* Largeur du point (32px) */
    height: 2rem; /* Hauteur du point (32px) */
    border-radius: 50%; /* Forme circulaire */
    background: var(--theme-primary); /* Couleur de fond primaire */
    color: var(--theme-button-primary-text); /* Couleur de texte pour contraste */
    display: flex; /* Disposition flexible */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    font-size: 1rem; /* Taille de l'icône (16px) */
    box-shadow: 0 0 0 4px var(--theme-button-primary-text), 0 4px 15px rgba(37, 99, 235, 0.3); /* Double ombre */
    transition: all 0.3s ease; /* Animation douce */
    z-index: 500; /* Superposition au-dessus des autres éléments */
}

.tl-v7-timeline-point:hover {
    transform: scale(1.1); /* Agrandissement au survol */
    box-shadow: 0 0 0 4px var(--theme-button-primary-text), 0 6px 20px rgba(37, 99, 235, 0.4); /* Ombre renforcée */
}

/* Contenu de l'élément timeline */
.tl-v7-timeline-content {
    background: var(--theme-tertiary); /* Couleur de fond tertiaire */
    border: 1px solid var(--theme-quaternary); /* Bordure fine */
    border-radius: var(--tl-v7-radius-large); /* Coins arrondis */
    padding: 1.5rem 1.5rem; /* Rembourrage généreux (24px) */
    flex: 1; /* Occupe l'espace disponible */
    box-shadow: var(--tl-v7-shadow-medium); /* Ombre moyenne */
    backdrop-filter: blur(10px); /* Effet de flou pour glass morphism */
    transition: all 0.3s ease; /* Animation douce */
}

.tl-v7-timeline-content:hover {
    transform: translateY(-2px); /* Léger déplacement vers le haut au survol */
    box-shadow: var(--tl-v7-shadow-large); /* Ombre plus prononcée */
}

/* Titre de l'élément */
.tl-v7-timeline-content h3 {
    margin-top: 0; /* Supprime la marge supérieure */
    margin-bottom: 0.5rem; /* Petit espacement sous le titre (8px) */
    font-size: 1.4rem; /* Taille du titre (22.4px) */
    color: var(--theme-text-titre); /* Couleur spécifique pour les titres */
    font-weight: 600; /* Police semi-grasse */
}

/* Date de l'élément */
.tl-v7-timeline-date {
    font-weight: 600; /* Police semi-grasse */
    margin: 0 0 1rem 0; /* Marge inférieure uniquement (16px) */
    color: var(--theme-button-primary-text); /* Couleur contrastée */
    display: block; /* Affichage en bloc */
    font-size: 0.95rem; /* Taille légèrement réduite (15.2px) */
    background: var(--theme-accent); /* Couleur d'accent pour mise en évidence */
    padding: 0.3rem 0.8rem; /* Rembourrage (4.8px vertical, 12.8px horizontal) */
    border-radius: var(--tl-v7-radius-small); /* Petits coins arrondis */
    display: inline-block; /* Affichage en ligne-bloc pour s'adapter au contenu */
}

/* Description du contenu */
.tl-v7-timeline-content p {
    margin-bottom: 1rem; /* Espacement sous les paragraphes (16px) */
    line-height: 1.7; /* Hauteur de ligne augmentée pour lisibilité */
    color: var(--theme-text); /* Couleur de texte standard */
}

/* ====================================================================
   GALERIE D'IMAGES - STRUCTURE RESPONSIVE
   Grille d'images avec différentes configurations
   ==================================================================== */
.tl-v7-image-gallery {
    margin: 1.5rem 0; /* Espacement vertical (24px) */
    display: grid; /* Disposition en grille */
    gap: var(--tl-v7-gallery-gap); /* Espacement entre les images */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Colonnes adaptatives */
}

/* Variantes de colonnes pour la galerie */
.tl-v7-image-gallery.tl-v7-cols-2 {
    grid-template-columns: repeat(2, 1fr); /* Grille à 2 colonnes égales */
}

.tl-v7-image-gallery.tl-v7-cols-3 {
    grid-template-columns: repeat(3, 1fr); /* Grille à 3 colonnes égales */
}

.tl-v7-image-gallery.tl-v7-cols-4 {
    grid-template-columns: repeat(4, 1fr); /* Grille à 4 colonnes égales */
}

/* Élément individuel de la galerie */
.tl-v7-gallery-item {
    display: flex; /* Disposition flexible */
    flex-direction: column; /* Empile les éléments verticalement */
    gap: var(--tl-v7-gap-small); /* Petit espacement entre image et légende */
}

/* Conteneur d'image avec effets hover */
.tl-v7-gallery-image {
    position: relative; /* Pour positionner les éléments enfants */
    aspect-ratio: 4/3; /* Rapport largeur/hauteur fixe */
    border-radius: var(--tl-v7-image-border-radius); /* Coins arrondis */
    overflow: hidden; /* Cache les débordements */
    cursor: pointer; /* Curseur main au survol */
    transition: all 0.3s ease; /* Animation douce */
    box-shadow: var(--tl-v7-shadow-small); /* Petite ombre */
}

.tl-v7-gallery-image:hover {
    transform: translateY(-4px) scale(1.02); /* Léger déplacement et agrandissement */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée */
}

.tl-v7-gallery-image img {
    width: 100%; /* Occupe toute la largeur */
    height: 100%; /* Occupe toute la hauteur */
    object-fit: cover; /* Couvre tout l'espace sans déformer */
    transition: all 0.3s ease; /* Animation douce */
}

.tl-v7-gallery-image:hover img {
    transform: scale(1.05); /* Léger zoom sur l'image au survol */
}

/* Overlay au survol */
.tl-v7-gallery-overlay {
    position: absolute; /* Positionnement absolu par rapport au parent */
    top: 0; /* Aligné en haut */
    left: 0; /* Aligné à gauche */
    right: 0; /* S'étend jusqu'à droite */
    bottom: 0; /* S'étend jusqu'en bas */
    background: linear-gradient(45deg, rgba(37, 99, 235, 0.8), rgba(198, 156, 109, 0.8)); /* Dégradé coloré */
    opacity: 0; /* Invisible par défaut */
    transition: all 0.3s ease; /* Animation douce */
    display: flex; /* Disposition flexible */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    color: white; /* Texte blanc */
    font-size: 1.5rem; /* Grande taille pour l'icône (24px) */
}

.tl-v7-gallery-image:hover .tl-v7-gallery-overlay {
    opacity: 1; /* Devient visible au survol */
}

/* Tooltip pour les informations de licence */
.tl-v7-image-tooltip {
    position: absolute; /* Positionnement absolu */
    bottom: 100%; /* Positionné au-dessus de l'élément parent */
    left: 50%; /* Centré horizontalement */
    transform: translateX(-50%); /* Ajustement pour centrage parfait */
    background: var(--tl-v7-license-bg); /* Fond semi-transparent */
    color: var(--theme-button-primary-text); /* Texte clair pour contraste */
    padding: 0.5rem 0.8rem; /* Rembourrage (8px vertical, 12.8px horizontal) */
    border-radius: var(--tl-v7-radius-small); /* Petits coins arrondis */
    font-size: 0.75rem; /* Petite taille de texte (12px) */
    white-space: nowrap; /* Empêche le retour à la ligne */
    opacity: 0; /* Invisible par défaut */
    visibility: hidden; /* Caché par défaut */
    transition: all 0.3s ease; /* Animation douce */
    pointer-events: none; /* N'intercepte pas les événements de souris */
    z-index: 1000; /* Superposition élevée */
    margin-bottom: 0.5rem; /* Espacement sous le tooltip (8px) */
}

.tl-v7-image-tooltip::after {
    content: ''; /* Contenu vide pour la flèche */
    position: absolute; /* Positionnement absolu */
    top: 100%; /* En bas du tooltip */
    left: 50%; /* Centré horizontalement */
    transform: translateX(-50%); /* Ajustement pour centrage parfait */
    border-left: 6px solid transparent; /* Côté gauche de la flèche */
    border-right: 6px solid transparent; /* Côté droit de la flèche */
    border-top: 6px solid var(--tl-v7-license-bg); /* Flèche pointant vers le bas */
}

.tl-v7-gallery-image:hover .tl-v7-image-tooltip {
    opacity: 1; /* Devient visible au survol */
    visibility: visible; /* Devient visible au survol */
}

/* Légende sous l'image */
.tl-v7-image-caption {
    background: var(--theme-button-primary-text); /* Fond clair */
    color: var(--theme-quaternary); /* Couleur de texte quaternaire */
    padding: 0.6rem 0.8rem; /* Rembourrage (9.6px vertical, 12.8px horizontal) */
    font-size: 0.8rem; /* Petite taille de texte (12.8px) */
    font-weight: 500; /* Police semi-grasse */
    border-radius: var(--tl-v7-image-border-radius); /* Coins arrondis */
    text-align: center; /* Texte centré */
    line-height: 1.4; /* Hauteur de ligne pour lisibilité */
    border: 1px solid var(--theme-tertiary); /* Bordure fine */
    box-shadow: var(--tl-v7-shadow-small); /* Petite ombre */
    backdrop-filter: blur(10px); /* Effet de flou pour glass morphism */
    min-height: 3rem; /* Hauteur minimale (48px) */
    display: flex; /* Disposition flexible */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
}

/* ====================================================================
   BOUTONS D'ACTION - DISPOSÉS EN 3 COLONNES
   Boutons sous chaque élément de timeline
   ==================================================================== */
.tl-v7-action-buttons {
    margin-top: 1.5rem; /* Espacement au-dessus des boutons (24px) */
    display: grid; /* Disposition en grille */
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    gap: var(--tl-v7-gap-medium); /* Espacement moyen entre boutons */
    width: 100%; /* Occupe toute la largeur */
}

.tl-v7-btn {
    display: flex; /* Disposition flexible */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    gap: 0.5rem; /* Espacement entre icône et texte */
    padding: 0.75rem 1rem; /* Rembourrage (12px vertical, 16px horizontal) */
    border-radius: var(--tl-v7-radius-small); /* Petits coins arrondis */
    font-size: 0.9rem; /* Taille de texte légèrement réduite (14.4px) */
    border: 2px solid var(--theme-tertiary); /* Bordure de couleur tertiaire */
    background: var(--theme-primary); /* Fond de couleur primaire */
    color: var(--theme-button-primary-text); /* Texte contrasté */
    text-decoration: none; /* Supprime le soulignement des liens */
    cursor: pointer; /* Curseur main au survol */
    transition: all 0.25s ease; /* Animation douce */
    width: 100%; /* Occupe toute la largeur disponible */
    text-align: center; /* Texte centré */
    font-weight: 500; /* Police semi-grasse */
}

.tl-v7-btn:hover {
    background: var(--theme-secondary); /* Fond devient couleur secondaire */
    border: 2px solid var(--theme-tertiary); /* Bordure inchangée */
    color: var(--theme-primary); /* Texte devient couleur primaire */
    transform: translateY(-2px); /* Léger déplacement vers le haut */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Ombre portée */
}

.tl-v7-btn i {
    font-size: 0.9rem; /* Taille d'icône légèrement réduite (14.4px) */
}

/* ====================================================================
   MODAL LIGHTBOX - VISUALISATION D'IMAGES EN PLEIN ÉCRAN
   Interface complète pour navigation dans les images
   ==================================================================== */
.tl-v7-lightbox-modal {
    position: fixed; /* Positionnement fixe par rapport à la fenêtre */
    top: 0; /* Aligné en haut */
    left: 0; /* Aligné à gauche */
    width: 100%; /* Occupe toute la largeur */
    height: 100%; /* Occupe toute la hauteur */
    background: var(--theme-background); /* Fond du thème */
    z-index: 10000; /* Superposition très élevée */
    opacity: 0; /* Invisible par défaut */
    visibility: hidden; /* Caché par défaut */
    transition: all 0.4s ease; /* Animation douce */
    backdrop-filter: blur(20px); /* Fort effet de flou pour l'arrière-plan */
}

.tl-v7-lightbox-modal.active {
    opacity: 1; /* Devient visible quand actif */
    visibility: visible; /* Devient visible quand actif */
}


/* Conteneur principal de la lightbox */
.tl-v7-lightbox-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    max-width: 90vw;
    max-height: 90vh;
    transition: all 0.4s ease;
}

.tl-v7-lightbox-modal.active .tl-v7-lightbox-container {
    transform: translate(-50%, -50%) scale(1); /* Centrage parfait avec taille normale quand actif */
}

/* Image dans la lightbox */
.tl-v7-lightbox-image {
    max-width: 100%; /* Largeur maximale adaptée au conteneur */
    max-height: 75vh; /* Hauteur maximale (75% de la hauteur de la fenêtre) */
    object-fit: contain; /* Conserve les proportions sans couper l'image */
    border-radius: var(--tl-v7-radius-large); /* Coins arrondis */
    box-shadow: var(--tl-v7-shadow-xl); /* Ombre très prononcée */
    transition: all 0.3s ease; /* Animation douce */
    transform-origin: center; /* Point d'origine pour les transformations */
    cursor: grab; /* Curseur de type "saisie" pour indiquer qu'on peut déplacer */
    user-select: none; /* Empêche la sélection de texte */
}

.tl-v7-lightbox-image.dragging {
    cursor: grabbing; /* Curseur de type "saisie active" pendant le déplacement */
}

/* Compteur d'images */
.tl-v7-lightbox-counter {
    position: absolute; /* Positionnement absolu */
    top: 20px; /* Distance depuis le haut */
    left: 50%; /* Centré horizontalement */
    transform: translateX(-50%); /* Ajustement pour centrage parfait */
    background: var(--theme-background); /* Fond du thème */
    border: 1px solid var(--theme-primary); /* Bordure fine de couleur primaire */
    backdrop-filter: blur(15px); /* Effet de flou pour glass morphism */
    color: var(--theme-text); /* Couleur de texte du thème */
    padding: 12px 20px; /* Rembourrage généreux */
    border-radius: var(--tl-v7-radius-xl); /* Coins très arrondis */
    font-weight: 600; /* Police semi-grasse */
    font-size: 0.9rem; /* Taille légèrement réduite (14.4px) */
    z-index: 10001; /* Superposition très élevée */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Ombre portée */
}

/* Contrôles de la lightbox */
.tl-v7-lightbox-controls {
    position: absolute; /* Positionnement absolu */
    top: 20px; /* Distance depuis le haut */
    right: 20px; /* Distance depuis la droite */
    display: flex; /* Disposition flexible */
    gap: 10px; /* Espacement entre les boutons */
    z-index: 10001; /* Superposition très élevée */
}

.tl-v7-control-btn {
    width: 50px; /* Largeur fixe */
    height: 50px; /* Hauteur fixe (forme carrée) */
    border-radius: 50%; /* Forme circulaire */
    background: var(--theme-background); /* Fond du thème */
    border: 2px solid var(--theme-primary); /* Bordure de couleur primaire */
    color: var(--theme-text); /* Couleur de texte du thème */
    cursor: pointer; /* Curseur main au survol */
    display: flex; /* Disposition flexible */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    font-size: 1.2rem; /* Taille d'icône (19.2px) */
    font-weight: bold; /* Police grasse */
    transition: all 0.3s ease; /* Animation douce */
    backdrop-filter: blur(15px); /* Effet de flou pour glass morphism */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Ombre portée */
}

.tl-v7-control-btn:hover {
    background: var(--theme-primary); /* Fond devient couleur primaire au survol */
    color: white; /* Texte devient blanc pour contraste */
    transform: scale(1.1); /* Léger agrandissement */
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4); /* Ombre renforcée */
}

/* Boutons de navigation */
.tl-v7-nav-btn {
    position: absolute; /* Positionnement absolu */
    top: 50%; /* Centré verticalement */
    transform: translateY(-50%); /* Ajustement pour centrage parfait */
    width: 60px; /* Largeur fixe */
    height: 60px; /* Hauteur fixe (forme carrée) */
    border-radius: 50%; /* Forme circulaire */
    background: var(--theme-background); /* Fond du thème */
    border: 2px solid var(--theme-primary); /* Bordure de couleur primaire */
    color: var(--theme-text); /* Couleur de texte du thème */
    cursor: pointer; /* Curseur main au survol */
    display: flex; /* Disposition flexible */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    font-size: 1.8rem; /* Grande taille d'icône (28.8px) */
    font-weight: bold; /* Police grasse */
    transition: all 0.3s ease; /* Animation douce */
    backdrop-filter: blur(15px); /* Effet de flou pour glass morphism */
    z-index: 10001; /* Superposition très élevée */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Ombre portée */
}

.tl-v7-nav-btn:hover {
    background: var(--theme-primary); /* Fond devient couleur primaire au survol */
    color: white; /* Texte devient blanc pour contraste */
    transform: translateY(-50%) scale(1.1); /* Maintient le centrage vertical avec agrandissement */
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4); /* Ombre renforcée */
}

.tl-v7-nav-btn.prev {
    left: 20px; /* Bouton précédent à gauche */
}

.tl-v7-nav-btn.next {
    right: 20px; /* Bouton suivant à droite */
}

/* Informations sur l'image avec licence */
.tl-v7-lightbox-info {
    position: absolute; /* Positionnement absolu */
    bottom: 20px; /* Distance depuis le bas */
    left: 50%; /* Centré horizontalement */
    transform: translateX(-50%); /* Ajustement pour centrage parfait */
    background: var(--theme-background); /* Fond du thème */
    border: 1px solid var(--theme-primary); /* Bordure fine de couleur primaire */
    backdrop-filter: blur(15px); /* Effet de flou pour glass morphism */
    color: var(--theme-text); /* Couleur de texte du thème */
    padding: 15px 25px; /* Rembourrage généreux */
    border-radius: var(--tl-v7-radius-xl); /* Coins très arrondis */
    text-align: center; /* Texte centré */
    max-width: 80%; /* Largeur maximale */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Ombre portée */
}

.tl-v7-lightbox-info .tl-v7-image-title {
    font-weight: 600; /* Police semi-grasse */
    margin-bottom: 0.5rem; /* Petit espacement (8px) */
    font-size: 1rem; /* Taille standard (16px) */
}

.tl-v7-lightbox-info .tl-v7-image-credits {
    font-size: 0.85rem; /* Taille réduite (13.6px) */
    color: var(--theme-primary); /* Couleur primaire pour mise en évidence */
    margin-top: 0.3rem; /* Petit espacement (4.8px) */
}

.tl-v7-lightbox-info .tl-v7-image-license {
    font-size: 0.8rem; /* Petite taille (12.8px) */
    opacity: 0.8; /* Légère transparence */
    margin-top: 0.2rem; /* Très petit espacement (3.2px) */
}

/* Contrôles de zoom */
.tl-v7-zoom-controls {
    position: absolute; /* Positionnement absolu */
    bottom: 20px; /* Distance depuis le bas */
    right: 20px; /* Distance depuis la droite */
    display: flex; /* Disposition flexible */
    flex-direction: column; /* Empile les boutons verticalement */
    gap: 10px; /* Espacement entre les boutons */
    z-index: 10001; /* Superposition très élevée */
}

/* ====================================================================
   RESPONSIVE DESIGN - ADAPTATION AUX DIFFÉRENTES TAILLES D'ÉCRAN
   Optimisation pour desktop, tablette et mobile
   ==================================================================== */

/* Tablettes (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .tl-v7-container {
        max-width: 95%; /* Largeur presque totale sur tablette */
        padding: 1.5rem; /* Rembourrage réduit (24px) */
    }
    
    .tl-v7-timeline-content {
        padding: 1.2rem; /* Rembourrage légèrement réduit (19.2px) */
    }
    
    .tl-v7-image-gallery.tl-v7-cols-4 {
        grid-template-columns: repeat(3, 1fr); /* Réduit à 3 colonnes au lieu de 4 */
    }
    
    .tl-v7-action-buttons {
        gap: 0.8rem; /* Espacement réduit entre boutons (12.8px) */
    }
    
    .tl-v7-btn {
        padding: 0.7rem 0.8rem; /* Rembourrage réduit (11.2px vertical, 12.8px horizontal) */
        font-size: 0.85rem; /* Taille de texte légèrement réduite (13.6px) */
    }
}

/* Mobiles (max 768px) */
@media (max-width: 768px) {
    .tl-v7-header h1 {
        font-size: 2rem; /* Titre plus petit sur mobile (32px) */
    }
    
    .tl-v7-image-gallery.tl-v7-cols-4,
    .tl-v7-image-gallery.tl-v7-cols-3 {
        grid-template-columns: repeat(2, 1fr); /* Réduit à 2 colonnes pour les galeries */
    }
    
    .tl-v7-action-buttons {
        grid-template-columns: 1fr; /* Boutons empilés verticalement */
        gap: 0.6rem; /* Espacement réduit (9.6px) */
    }
    
    .tl-v7-btn {
        padding: 0.8rem 1rem; /* Rembourrage légèrement ajusté (12.8px vertical, 16px horizontal) */
    }
    
    .tl-v7-lightbox-controls {
        top: 10px; /* Position ajustée */
        right: 10px; /* Position ajustée */
    }
    
    .tl-v7-control-btn {
        width: 45px; /* Taille réduite */
        height: 45px; /* Taille réduite */
        font-size: 1rem; /* Icône plus petite (16px) */
    }
    
    .tl-v7-nav-btn {
        width: 50px; /* Taille réduite */
        height: 50px; /* Taille réduite */
        font-size: 1.4rem; /* Icône plus petite (22.4px) */
    }
    
    .tl-v7-lightbox-counter {
        top: 10px; /* Position ajustée */
        padding: 10px 16px; /* Rembourrage réduit */
        font-size: 0.8rem; /* Texte plus petit (12.8px) */
    }
    
    .tl-v7-lightbox-info {
        font-size: 0.9rem; /* Texte légèrement réduit (14.4px) */
        padding: 12px 20px; /* Rembourrage ajusté */
    }
}

/* Petits mobiles (max 600px) */
@media (max-width: 600px) {
    .tl-v7-container {
        padding: 1rem 0.5rem; /* Rembourrage très réduit (16px vertical, 8px horizontal) */
    }
    
    .tl-v7-header h1 {
        font-size: 1.8rem; /* Titre encore plus petit (28.8px) */
    }
    
    .tl-v7-timeline {
        padding-left: 1.4rem; /* Ajustement du padding pour la timeline */
    }
    
    .tl-v7-timeline-point {
        width: 1.5rem; /* Point plus petit (24px) */
        height: 1.5rem; /* Point plus petit (24px) */
        left: -0.85rem; /* Position ajustée */
        font-size: 0.8rem; /* Icône plus petite (12.8px) */
    }
    
    .tl-v7-timeline-content {
        padding: 1rem; /* Rembourrage réduit (16px) */
    }
    
    .tl-v7-image-gallery {
        grid-template-columns: 1fr; /* Une seule colonne pour les très petits écrans */
    }
    
    .tl-v7-nav-btn.prev {
        left: 10px; /* Position ajustée */
    }
    
    .tl-v7-nav-btn.next {
        right: 10px; /* Position ajustée */
    }
    
    .tl-v7-preset-filters {
        flex-wrap: wrap; /* Permet aux filtres de s'enrouler sur plusieurs lignes */
    }
    
    .tl-v7-preset-btn {
        font-size: 0.8rem; /* Texte plus petit (12.8px) */
        padding: 0.4rem 0.8rem; /* Rembourrage réduit (6.4px vertical, 12.8px horizontal) */
    }
}

/* ====================================================================
   ANIMATIONS PERSONNALISÉES
   Effets visuels pour améliorer l'expérience utilisateur
   ==================================================================== */
@keyframes tl-v7-slideInUp {
    from {
        opacity: 0; /* Invisible au départ */
        transform: translateY(30px); /* Décalage vers le bas au départ */
    }
    to {
        opacity: 1; /* Complètement visible à la fin */
        transform: translateY(0); /* Position finale normale */
    }
}

.tl-v7-timeline-item {
    animation: tl-v7-slideInUp 0.6s ease forwards; /* Animation d'entrée avec effet de glissement */
}

.tl-v7-timeline-item:nth-child(even) {
    animation-delay: 0.1s; /* Délai pour les éléments pairs */
}

.tl-v7-timeline-item:nth-child(odd) {
    animation-delay: 0.2s; /* Délai pour les éléments impairs */
}

/* Animation pour le focus accessibility */
.tl-v7-preset-btn:focus,
.tl-v7-btn:focus,
.tl-v7-control-btn:focus,
.tl-v7-search-input:focus {
    outline: 2px solid var(--theme-primary); /* Contour visible pour accessibilité */
    outline-offset: 2px; /* Espace entre l'élément et son contour */
}

/* Animation de chargement pour les images */
.tl-v7-gallery-image img {
    opacity: 0; /* Images invisibles au chargement */
    animation: tl-v7-fadeIn 0.5s ease forwards; /* Animation d'apparition progressive */
}

@keyframes tl-v7-fadeIn {
    to {
        opacity: 1; /* Complètement visible à la fin */
    }
}

/* ====================================================================
   ACCESSIBILITY - AMÉLIORATIONS POUR L'ACCESSIBILITÉ
   Styles pour une meilleure accessibilité
   ==================================================================== */

/* Mode sombre - préférence système */
@media (prefers-color-scheme: dark) {
    :root {
        --theme-button-primary-text: #1e293b; /* Couleur de texte pour boutons en mode sombre */
        --tl-v7-bg-secondary: #334155; /* Couleur de fond secondaire en mode sombre */
        --theme-tertiary: #475569; /* Couleur tertiaire ajustée pour le mode sombre */
        --theme-text: #e2e8f0; /* Couleur de texte plus claire pour le mode sombre */
        --theme-text-titre: #f1f5f9; /* Couleur de titre plus claire pour le mode sombre */
    }
    
    body {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); /* Fond dégradé pour le mode sombre */
    }
}

/* Réduction des animations pour les utilisateurs qui les préfèrent */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important; /* Durée d'animation quasi nulle */
        animation-iteration-count: 1 !important; /* Une seule itération */
        transition-duration: 0.01ms !important; /* Durée de transition quasi nulle */
    }
}