/* --- VARIABLES GLOBALES --- */
:root {
    --pixels-par-an: 10px;
    --annee-depart-reference: 1500;
    --annee-de-creation: 2025;
    --annee-fin-reference: 2025;


    /* Réglage de compacité fixé dans le CSS principal */
    --hauteur-ligne: 20px;
    --artist-height: 18px;
    --artist-fontsize: 12px;
}

/* --- STYLES DE BASE --- */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0px;
    background-color: #f4f4f9;
}

.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10005;
    background-color: #f4f4f9;
    padding: 10px 10px 5px 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

h3 {
    margin-bottom: 0px;
    margin-top: 0;
    color: #333;
}


/* --- Styles pour le nouveau sélecteur de rôle --- */

/* Positionnement absolu pour le placer à droite sur la même ligne que le H2 */
.role-selector {
    position: absolute;
    top: 10px;
    /* Aligné verticalement avec le bouton d'aide */
    right: 80px;
    /* Positionné à 70px du bord droit (donne de l'espace avec le bouton ?) */
    z-index: 10000;
    /* Assure qu'il est au-dessus du H2 et en dessous du bouton d'aide */
}

/* Style de la balise SELECT elle-même */
.role-selector select {
    padding: 4px 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* Optionnel, mais recommandé pour une hauteur cohérente */
    height: 30px;
    box-sizing: border-box;
    width: 150px;
    /* Largeur pour contenir le texte "Compositeurs/Interprètes" */
}

/* --- CONTENEURS PRINCIPAUX --- */

/* --- CONTENEURS PRINCIPAUX (CORRIGÉ pour ancrage) --- */
.timeline-container {
    position: absolute;
    /* 1. On le positionne absolument par rapport au body */
    top: 67px;
    /* 2. Il commence 55px sous le bord (laisse la place au header) */
    bottom: 32px;
    /* 3. Il s'arrête 32px au-dessus du bord (laisse la place au talon) */
    left: 0;
    right: 0;
    width: auto;
    overflow-x: auto;
    /* Défilement horizontal conservé */
    overflow-y: scroll;
    /* Défilement vertical conservé */
    border: 1px solid #ccc;
    padding: 0 0 20px 10px;
    /* top: 0, right: 0, bottom: 20px, left: 10px */
    background-color: white;
    cursor: grab;

    /* L'ancienne ligne `height: calc(100vh - 55px - 32px);` n'est plus nécessaire. */
}

/* --- AXE DU TEMPS --- */
.axe-du-temps {
    display: none;
    /* Masquer l'ancien axe dans le conteneur scrollable */
}

/* Style de l'axe du temps fixe dans l'en-tête */
#axe-du-temps-fixe {
    position: relative;
    height: 20px;
    margin-right: 10px;
    border-bottom: 1px solid #333;
    overflow: hidden;
}

/* Positionnement du titre du header pour laisser l'espace au nouvel axe */
.header-fixed h2 {
    margin-bottom: 0px;
}

/* Le texte de l'année */
.annee-text {
    position: absolute;
    top: 3px;
    transform: translateX(20%);
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

/* Le marqueur vertical */
.marqueur {
    position: absolute;
    top: 10px;
    width: 1px;
    height: 15px;
    background-color: #777;
}

/* Marqueurs de siècle */
.marqueur.siecle {
    height: 15px;
    width: 2px;
    background-color: #111;
}

/* Marqueur de fin */
.marqueur.fin {
    height: 15px;
    background-color: red;
    /* En rouge pour la visibilité */
}

/* Conteneur où sont placés les compositeurs */
.artistes-wrap {
    position: relative;
    min-height: 200px;
    /*width: var(--largeur-frise);*/
}

/* --- STYLE DES COMPOSITEURS (BARRES) --- */
.artiste {
    position: absolute;
    /* Format [ Date Nom Date ] */

    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--artist-height);
    line-height: var(--artist-height);
    font-size: var(--artist-fontsize);

    padding: 0px 4px 1px 4px;
    color: white;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    user-select: none;
    -webkit-user-select: none;
    /* Pour les navigateurs basés sur WebKit (Chrome, Safari) */
    -moz-user-select: none;
    /* Pour Firefox */
    -ms-user-select: none;
    /* Pour Internet Explorer/Edge */
}

/* Style spécifique pour les compositeurs vivants */
.artiste.vivant {
    border: 1px dashed white;

    padding: 0px 3px 0px 3px;
    /* Assure que la bordure est à l'intérieur du width */
}

/* ---  Classe pour masquer les compositeurs --- */
.artiste.hidden-by-filter {
    /* Cache l'élément sans affecter le flux, mais conserve sa position absolue */
    display: none !important;
}

/* Pour griser et désactiver (nouveau comportement optionnel) */
.disabled-by-filter {
    opacity: 0.3;
    pointer-events: none;
    /* Désactive le clic et le survol */
}

.artiste.highlight-search {
    background-color: white;
    color: white;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Classe pour masquer temporairement le compositeur pendant le clignotement */
.flash-invisible {
    opacity: 0;
    /* Rendre invisible mais conserver la position */
}


/* Style des dates (pour la mise en gras) */
.date-span {
    font-weight: bold;
    padding: 0 2px;
}


/* --- NOUVEAU STYLE DU TOOLTIP DYNAMIQUE --- */

.tooltip {
    position: absolute;
    top: 0;
    /* Position temporaire, sera écrasée par le JS */
    left: 0;
    /* Position temporaire, sera écrasée par le JS */

    background: #222;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;

    z-index: 10006;
    pointer-events: none;
    /* TRÈS IMPORTANT: Ignore les clics de souris */

    /* Masqué par défaut */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s;
}

.tooltip.visible {
    opacity: 1;
    visibility: visible;
    /* On peut ajouter un petit effet pour qu'il ne cache pas le curseur */
    transform: translate(-50%);
}


/* --- Style pour le filtre --- */
.filtres-controls {
    margin-bottom: 0;
    padding: 0 10px;
    height: 100%;
    background-color: #333;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* --- Style du Bouton d'Aide (Adapté pour être dans .header-fixed) --- */
#help-button {
    position: absolute;
    top: 10px;
    right: 30px;
    z-index: 10001;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f4a261;
    color: white;
    font-weight: bold;
    font-size: 16px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s, transform 0.1s;
}

#help-button:hover {
    background-color: #e76f51;
    transform: scale(1.05);
}


/* --- NOUVEAU: Style du Panneau d'Aide --- */
.help-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centrage parfait */
    width: 90%;
    max-width: 740px;
    max-height: 90vh;
    /* Limite la hauteur pour les petits écrans */
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    z-index: 10006;
    overflow-y: auto;
    /* Permet le défilement si le contenu est trop long */
}

/* Style pour masquer/afficher (la propriété 'hidden' en HTML suffit) */
.help-panel:not([hidden]) {
    display: block;
}

.help-panel h3 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #f4a261;
    padding-bottom: 10px;
}

.help-panel hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 15px 0;
}

.help-panel ul {
    list-style-type: disc;
    padding-left: 20px;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: darkred;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: white;
    font-weight: bold;
}

.setting-control.horizontal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
}

.input-group {
    display: flex;
    gap: 5px;
    flex-grow: 1;
}

#local-path-input {
    flex-grow: 1;
    padding: 2px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}


/* --- COULEURS DES LIGNES (Étendue pour plus de rubans) --- */

.ligne-1 {
    background-color: #e76f51;
}

.ligne-2 {
    background-color: #2a9d8f;
}

.ligne-3 {
    background-color: #264653;
}

.ligne-4 {
    background-color: #e9c46a;
    color: #333;
}

.ligne-5 {
    background-color: #f4a261;
    color: #333;
}

.ligne-6 {
    background-color: #6d597a;
}

.ligne-7 {
    background-color: #b5838d;
}

.ligne-8 {
    background-color: #ed89b5;
}

.ligne-9 {
    background-color: #83c5be;
    color: #333;
}

.ligne-10 {
    background-color: #00b4d8;
}

/* --- NOUVELLES COULEURS (CLASSES 11 à 16) --- */

.ligne-11 {
    background-color: #d0e247e1;
    color: #333;
}

.ligne-12 {
    background-color: #a2d2ff;
    color: #333;
}

.ligne-13 {
    background-color: #c9ada7;
    /* Rose pâle */
    color: #333;
}

.ligne-14 {
    background-color: #0077b6;
    /* Bleu moyen */
}

.ligne-15 {
    background-color: #90be6d;
    /* Vert olive */
    color: #333;
}

.ligne-16 {
    background-color: #43aa8b;
    /* Vert mer */
}

/* --- NOUVEAU: Zone Talon Fixe en bas de fenêtre --- */
.talon {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32px;
    background-color: #333;
    color: white;
    z-index: 1000;
    /* Assure qu'il est au-dessus de tout autre contenu 
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);*/

}

#search-input {
    padding: 1px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 20px;
    box-sizing: border-box;
    width: 150px;
}

#search-container {
    display: flex;
    align-items: center;
    /* Pour aligner la label et l'input verticalement */
    gap: 10px;
    /* Espace entre le label et l'input */


    /* Style de base pour le bouton de filtre de sexe */
    #sexe-filter-button {
        /* Style pour ressembler à un bouton ou un champ de filtre */
        height: 20px;
        padding: 0px;
        border: 1px solid #ccc;
        background-color: #f8f8f8;
        color: #333;
        font-size: 1.2em;
        /* Pour que les symboles soient visibles */
        cursor: pointer;
        /*line-height: 1.5;*/
        /* Aligner les symboles */
        border-radius: 4px;
        margin-left: 10px;
        transition: background-color 0.2s;
    }

    #sexe-filter-button:hover {
        background-color: #eee;
    }
}

.artiste.highlight-animated {
    animation: clignotement-rapide 2s 1 ease-in-out;
    animation-fill-mode: forwards;
    transition: none;
}

@keyframes clignotement-rapide {

    0%,
    20%,
    40%,
    60%,
    80% {
        opacity: 0;
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* Conteneur principal du popup */
#error-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Classe pour cacher le popup par défaut */
#error-popup.hidden {
    display: none;
}

/* Contenu du popup (la boîte) */
.popup-content {
    background-color: #fce4e4;
    /* Couleur d'alerte rouge pâle */
    border: 2px solid #e57373;
    /* Bordure rouge */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    max-width: 400px;
    width: 90%;
    text-align: center;
}

/* Titre du popup */
#popup-title {
    color: #c62828;
    /* Rouge foncé */
    margin-top: 0;
    font-size: 1.4em;
}

/* Bouton de fermeture */
#popup-close-button {
    margin-top: 15px;
    padding: 8px 15px;
    background-color: #e57373;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#popup-close-button:hover {
    background-color: #c62828;
}

/*  Affichage de l'année sous le curseur (positionné dans .timeline-container) --- */
#cursor-year-display {
    position: absolute;
    left: 10px;
    background-color: 0;
    /* Fond noir semi-transparent (comme demandé) */
    color: black;
    text-shadow:
        -1px -1px 0 #FFF,
        /* Coin supérieur gauche */
        1px -1px 0 #FFF,
        /* Coin supérieur droit */
        -1px 1px 0 #FFF,
        /* Coin inférieur gauche */
        1px 1px 0 #FFF;
    /* Coin inférieur droit */

    padding: 2px, 0px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
    white-space: nowrap;
    z-index: 10;

    /* Masqué par défaut et quand le curseur ne bouge pas */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
}

#cursor-year-display.visible {
    opacity: 1;
}

/* --- NOUVEAU: Style pour les pop-ups modaux (e.g., Introduction) --- */

/* Applique la superposition modale (fullscreen, centré) */
.modal-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* Fond semi-transparent */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Z-index très haut pour être au-dessus de tout (y compris help-panel et header) */
    z-index: 10007;
}

/* Gère la visibilité (utilisé par la fonction JS) */
.modal-popup.hidden {
    display: none;
}

/* Style spécifique pour le contenu de l'introduction (surcharge les styles d'erreur) */
#intro-popup .popup-content {
    background-color: #fff;
    /* Fond blanc */
    border: 1px solid #ccc;
    /* Bordure neutre */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    /* Ombre */
    max-width: 600px;
    /* Plus large pour le texte */
    width: 90%;
    /* Utilise 90% de la largeur disponible */
    text-align: left;
    /* Texte aligné à gauche */
    /* Empêche le contenu de déborder sur les petits écrans */
    max-height: 90vh;
    overflow-y: auto;
}

/* Style pour le titre de l'introduction */
#intro-popup #intro-title {
    color: #333;
    /* Couleur de titre neutre */
    border-bottom: 2px solid #f4a261;
    /* Séparateur comme le panneau d'aide */
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.4em;
    text-align: center;
    /* Centrer le titre */
}

/* Style du bouton de fermeture */
#intro-popup #intro-close-button {
    display: block;
    /* S'assurer qu'il prend toute la largeur */
    width: 100%;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #2a9d8f;
    /* Couleur d'action (ligne-2) */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

#intro-popup #intro-close-button:hover {
    background-color: #264653;
    /* Ligne-3 */
}


/* --- 1. Conteneur principal de la zone de filtrage --- */
.js-filter-container {
    /* INDISPENSABLE : Le bouton d'info sera positionné ABSOLUMENT par rapport à ce RELATIF */
    position: relative;

    /* Styles pour la zone de filtrage (à adapter à votre design) */
    background-color: #f7f7f7;
    padding: 20px;
    border-top: 2px solid #ddd;
    margin-top: 15px;
}

/* --- 2. Le bouton d'information (icône 'i' dans un cercle) --- */
#js-info-button {
    /* Positionnement de l'icône d'info */
    position: absolute;
    right: 10px;
    top: 50%;
    /* Centre verticalement */
    transform: translateY(-50%);
    /* Ajustement précis pour le centrage */

    /* Style du bouton */
    z-index: 10001;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* Cercle parfait */
    background-color: #333;
    ;
    /* Couleur d'information (bleu) */
    color: white;
    font-weight: bold;
    font-size: 18px;
    /* Taille du caractère 'ⓘ' */
    border: none;
    cursor: pointer;

    /* Centrage du caractère 'ⓘ' à l'intérieur du bouton */
    display: flex;
    justify-content: center;
    align-items: center;
}

#js-info-button:hover {
    background-color: #0056b3;
    /* Bleu plus foncé au survol */
    transform: translateY(-50%) scale(1.05);
}

/* --- 3. Le Popup d'information --- */
.js-info-popup-hidden {
    display: none;
    /* Masqué par défaut */
    visibility: hidden;
    /* Bonne pratique pour l'accessibilité */
}

#js-info-popup {
    /* Positionnement du popup par rapport au conteneur RELATIF */
    position: absolute;

    /* Positionné juste au-dessus du conteneur, décalé à droite */
    bottom: calc(100% + 5px);
    right: 10px;

    /* Style du popup */
    background-color: #333;
    color: white;
    padding: 10px;
    border-radius: 8px;
    width: 300px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

/* Classe à ajouter/retirer via JavaScript pour afficher/masquer le popup */
.js-info-popup-visible {
    display: block;
    visibility: visible;
}

#js-info-popup p {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

#style-label,
#nationality-label,
#search-container label {
    cursor: pointer;
}



/* ---  ADAPTATION AU MODE SOMBRE DU SYSTÈME --- */

@media (prefers-color-scheme: dark) {

    /* 1. COULEURS DE FOND GÉNÉRALES ET TEXTE */
    body {
        background-color: #121212;
        /* Fond très sombre */
        color: #e0e0e0;
        /* Texte clair par défaut */
    }

    /* 2. EN-TÊTE FIXE */
    .header-fixed {
        background-color: #1e1e1e;
        /* Une nuance de gris plus foncée */
        box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
        /* Ombre plus subtile */
    }

    /* 3. CONTENEUR PRINCIPAL DE LA FRISE */
    .timeline-container {
        background-color: #1e1e1e;
        border-color: #444;
    }

    /* 4. LE TALON (pied de page) */
    .talon {
        background-color: #1e1e1e;
        box-shadow: 0 -2px 5px rgba(255, 255, 255, 0.1);
    }

    /* Cible les SELECT (Style et Nationalité) */
    .talon select {
        background-color: #333;
        /* Fond sombre pour le SELECT */
        color: #e0e0e0;
        /* Texte clair pour le SELECT */
        border: 1px solid #555;
        /* Sur certains navigateurs (notamment Chrome/Safari), 
           cette règle est essentielle pour forcer les couleurs des options */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    /* Cible les OPTIONS à l'intérieur des listes (pour le menu déroulant qui s'ouvre) */
    .talon select option {
        /* On force un fond très sombre pour l'ouverture du menu */
        background-color: #333;
        color: #e0e0e0;
    }


    /* 5. TITRES */
    h3,
    .panel-title {
        color: #f0f0f0 !important;
    }

    /* 6. POP-UPS (Aide, Paramètres, Introduction) */
    .help-panel,
    #intro-popup .popup-content {
        background-color: #2b2b2b;
        border-color: #555;
    }

    /* 7. CHAMPS DE CONTRÔLE (Select, Input, Boutons Filtre) */
    .role-selector select,
    #search-input,
    #sexe-filter-button {
        background-color: #333;
        color: #f0f0f0;
        border-color: #555;
    }

    #error-popup {
        color: rgb(251, 123, 38);
    }

    #error-popup .popup-content {
        background-color: #333;
    }


    /* Couleur des liens non visités (en général, ils sont clairs) */
    a:link {
        color: #64b5f6;
        /* Bleu clair */
    }

    /* Couleur des liens visités (doit être visible sur fond sombre) */
    a:visited {
        /* Un violet clair (typique des liens visités) qui contraste bien avec le fond sombre */
        color: #bb86fc;
    }
}