/* Styles pour la page des parcours, inspiré de characters_page.css */
/* Barre de sélection (Roster) */
#course-roster-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; padding: 20px; background-color: #25282a; border-radius: 12px; margin-bottom: 30px; }
.roster-item { text-align: center; text-decoration: none; color: #a0a0a0; transition: transform 0.2s ease; }
.roster-item:hover, .roster-item.active { transform: scale(1.1); color: #fff; }
.roster-item img { width: 70px; height: 70px; border-radius: 8px; border: 3px solid #444; transition: border-color 0.2s ease; }
.roster-item:hover img, .roster-item.active img { border-color: #2ECC71; }
.roster-item span { display: block; margin-top: 5px; font-size: 0.9rem; }
/* On rend le sélecteur plus spécifique que "main a" */
#course-roster-nav a.roster-item,
#course-roster-nav a.roster-item:link,
#course-roster-nav a.roster-item:visited {
    text-decoration: none;
    color: #a0a0a0; /* Couleur par défaut */
    transition: all 0.2s ease;
}

/* On rend aussi ce sélecteur plus spécifique */
#course-roster-nav a.roster-item:hover,
#course-roster-nav a.roster-item.active {
    transform: scale(1.1);
    color: #2ECC71 !important; /* On ajoute !important par sécurité */
}

/* Fiche Parcours */
.course-sheet { display: none; position: relative; background-color: #2a2a2a; border-radius: 12px; overflow: hidden; border: 1px solid #3a3a3a; }
.course-sheet.active { display: block; } /* Afficher la fiche active */
.sheet-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0.2; }
.sheet-content { position: relative; z-index: 2; padding: 30px; }
.sheet-header {
    display: flex; /* Active Flexbox */
    justify-content: space-between; /* Pousse les enfants aux extrémités */
    align-items: center; /* Centre verticalement */
    border-bottom: 1px solid #3a3a3a;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.header-left {
    display: flex;
    align-items: baseline; /* Aligne le bas du texte et des étoiles */
    gap: 15px;
}

.header-right {
    /* Pas besoin de style spécifique, il sera poussé à droite */
}

.course-name { 
    font-size: 2.5rem; 
    margin: 0; 
    color: #fff; 
    line-height: 1; /* Pour un meilleur contrôle de l'alignement */
}


.info-item.location img { 
    height: 80px; /* Taille augmentée (au lieu de 20px) */
    margin-right: 0; /* Plus besoin de marge si le texte est supprimé */
}

/* === MODIFICATION : Agrandir les étoiles === */
.star-icon { 
    /* height: 24px; Taille augmentée (au lieu de 16px) */
    width: 24px;  /* Taille augmentée */
    margin: 0 1px; /* Petit espace entre les étoiles */
}

.sheet-body p.course-description { line-height: 1.6; color: #ccc; }
.course-specifics { font-size: 0.9rem; color: #f39c12; margin-top: 15px; padding: 10px; background-color: #313131; border-radius: 6px; }

.holes-title { margin: 30px 0 15px 0; color: #2ECC71; }
.holes-table-container { max-height: 400px; overflow-y: auto; }
.holes-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.holes-table th, .holes-table td { padding: 8px; border: 1px solid #3a3a3a; text-align: center; }
.holes-table thead th { background-color: #1f1f1f; color: #ccc; }
.pin-data { font-size: 0.85rem; }
.pin-data span { display: block; }
.pin-data .elevation { color: #a0a0a0; }
.tip-data { text-align: left; font-style: italic; color: #b0b0b0; }
.locked-row { color: #888; font-style: italic; }
.locked-row .material-symbols-outlined { font-size: 1rem; vertical-align: bottom; }

/* On cible les écrans de type tablette et plus petits (ex: en dessous de 800px) */
@media (max-width: 800px) {
    .sheet-header {
        flex-direction: column; /* On passe les éléments en colonne */
        align-items: center;    /* On centre tout */
        gap: 15px;              /* Espace entre les blocs */
    }

    .header-left {
        flex-direction: column; /* Le titre et les étoiles passent en colonne */
        align-items: center;
        gap: 10px;
        order: 2; /* On met le bloc titre/étoiles en deuxième */
    }
    
    .header-right {
        order: 1; /* On met l'icône de localisation en premier, en haut */
    }

    .course-name {
        font-size: 2.2rem; /* On peut ajuster la taille pour les petits écrans */
        text-align: center;
    }

    .info-item.location img {
        height: 40px; /* On peut agrandir un peu l'icône de localisation */
    }
}

/* Pour les écrans mobiles très petits (en dessous de 500px) */
@media (max-width: 500px) {
    .course-name {
        font-size: 1.8rem;
    }
    .info-item.location img {
        height: 32px;
    }
}