:root {
    --tdf-yellow: #f7d000;
    --tdf-black: #231f20;
    --tdf-admin-red: #dc3545;
    --tdf-manager-blue: #0056b3;
}

body { background-color: #f8f9fa; font-family: 'Open Sans', sans-serif; }

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.table {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}


#main {
    flex: 1 0 auto; 
}

/* =====================================================================*/
/* =====================================================================*/
/* Home                                                                 */
/* =====================================================================*/
/* =====================================================================*/

.bg-tdf-yellow {
    background-color: var(--tdf-yellow) !important;
    color: var(--tdf-black) !important;
    font-weight: 800;
}

/* Container de la carte pour éviter qu'elle ne pousse le footer */
.map-container-home {
    height: 60vh; /* Hauteur modérée pour laisser de la place au footer */
    display: flex;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.map-container-home img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* Podium ultra-compact */
.podium-mini {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px 5px;
    margin-bottom: 15px;
}

/* Podium équilibré */
.podium-mini .winner-box {
    display: flex;
    flex: 0 0 33.33%; 
    padding: 5px;
    flex-direction: column;   /* Aligne les éléments de haut en bas */
    justify-content: center;  /* Centre verticalement */
    align-items: center;      /* Centre horizontalement */
    height: 100%;             /* Important pour que le centrage ait de l'espace */
    min-height: 150px;        /* Ajuste selon la taille désirée */
}

/* Optionnel : si tu veux que la marche du milieu soit plus haute tout en restant centrée */
.winner-box.bg-light {
    min-height: 200px;
}

/* Style pour le compte à rebours */
.countdown-box {
    background: #212529;
    color: #ffed00;
    border-radius: 12px;
    padding: 20px;
    font-family: 'Montserrat', sans-serif;
    box-shadow: inset 0 0 15px rgba(255, 237, 0, 0.1);
}

.countdown-unit {
    text-align: center;
    padding: 0 10px;
}

.countdown-val {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.countdown-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.7;
}

/* Label de date au-dessus de la carte */
.tour-dates-label {
    background: #ffed00;
    color: #000;
    font-weight: 800;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    display: inline-block;
    margin-bottom: 10px;
}

.podium-mini .winner-box .name {
    font-size: 0.85rem;
    font-weight: 700;
    display: block;
    width: 90%;
    max-width: 180px;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #dee2e6;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-top: 5px;
}

/* Style pour le texte du forum réduit */
.forum-short-text {
    font-size: 0.9em;
    color: #6c757d;
    font-style: italic;
    margin-bottom: 15px;
    display: -webkit-box;
    /* -webkit-line-clamp: 2;  */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.forum-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--tdf-black);
}



/* =====================================================================*/
/* =====================================================================*/
/* Navbar                                                               */
/* =====================================================================*/
/* =====================================================================*/
.navbar-tdf {
    background-color: var(--tdf-yellow) !important;
    border-bottom: 3px solid var(--tdf-black);
}


.navbar-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* On oublie le gras lourd (800) */
    text-transform: uppercase;
    letter-spacing: 2px; /* On écarte les lettres pour la modernité */
    font-size: 1.1rem;
    color: var(--tdf-black) !important;
}

/* On peut mettre une partie du titre en gras léger pour le contraste */
.navbar-brand span {
    font-weight: 700;
}

/* Le logo ne doit pas être écrasé par le texte */
.navbar-brand img {
    height: 38px;
    margin-right: 15px;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.1));
}

/* Liens par défaut */
.nav-link {
    color: var(--tdf-black) !important;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 10px !important;
    transition: all 0.2s;
}

.nav-link:hover {
    background-color: rgba(0,0,0,0.05);
    border-radius: 4px;
    text-decoration: none !important;
}

/* Couleurs spécifiques - Matching avec ton Twig */
.nav-admin-link { 
    color: var(--tdf-admin-red) !important; 
    font-weight: 800; 
    border: 2px solid var(--tdf-admin-red) !important;
    border-radius: 6px;
    margin-right: 5px;
}

.nav-manager-link { 
    color: var(--tdf-manager-blue) !important; 
    border: 2px solid var(--tdf-manager-blue) !important;
    border-radius: 6px;
    margin-right: 5px;
}

.nav-item:has(.fa-calculator) .nav-link {
    background-color: var(--tdf-black) !important;
    color: var(--tdf-yellow) !important;
    border-radius: 6px;
}

.nav-logout-zone { 
    border-left: 1px solid rgba(0,0,0,0.1); 
    margin-left: 10px; 
    padding-left: 10px; 
}
.user-name-bold { font-weight: 800; text-decoration: underline; }

.navbar-toggler {
    border: 1px solid var(--tdf-black) !important;
    color: var(--tdf-black) !important;
    padding: 5px 10px;
}

/* =====================================================================*/
/* =====================================================================*/
/* Classement                                                           */
/* =====================================================================*/
/* =====================================================================*/
.ranking-container {
    background: white;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden !important;    
    margin-top: 20px;
    border-collapse: separate !important;
}

.table-tdf {
    background-color: transparent !important;
    border-collapse: separate;
    border-spacing: 0;
}

.table-tdf tbody tr:nth-of-type(even) td {
    background-color: #ffffff !important;
}

.table-tdf tbody tr:nth-of-type(odd) td {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-tdf thead {
    background-color: var(--tdf-black);
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.table-tdf th { 
    border: none; 
    padding: 15px !important; 
    background-color: var(--tdf-black);
    color: rgb(255, 255, 255);
}


/* Style des cellules */
.table-tdf td {
    padding: 12px 15px !important;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    border-top: none !important;
}

/* Badge de position */
.rank-badge {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    border-radius: 50%;
    background: #f0f0f0;
}

.rank-yellow {
    background: var(--tdf-yellow);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Progression */
.prog-up { color: #28a745; font-weight: bold; font-size: 0.8rem; }
.prog-down { color: #dc3545; font-weight: bold; font-size: 0.8rem; }
.prog-equal { color: #6c757d; }

/* Ligne de l'utilisateur connecté */
.table-tdf tbody tr.row-connected-user td:first-child{    
    border-left: 5px solid var(--tdf-yellow);
} 

.table-tdf tbody tr.row-connected-user td {
    background-color: rgba(247, 208, 0, 0.15) !important;
}


.table-tdf tbody tr.row-connected-user:hover {
    background-color: rgba(247, 208, 0, 0.20) !important; 
}

/* =====================================================================*/
/* =====================================================================*/
/* Classement détail                                                    */
/* =====================================================================*/
/* =====================================================================*/
/* Container pour le scroll */
.table-responsive-tdf {
    border-radius: 8px;
    border: 1px solid #303030;
    margin-top: 1rem;
    background-color: white;
    overflow: hidden !important;    
    border-collapse: separate !important;
}

.table-detail {
    font-size: 0.82rem;
    table-layout: fixed;
    width: 100%;
    min-width: 1100px;    
    border-collapse: collapse !important; 
}

/* Bordures de colonnes bien visibles */
.table-detail tbody tr:nth-of-type(odd) td {
    background-color: #f8f9fa !important;
}


/* Largeurs des colonnes */
.col-name { width: 180px; text-align: left !important; }
.col-stage { width: 35px; border-left: 1px solid #a0a0a021; } 
.col-utility { width: 60px; border-left: 1px solid #a0a0a021;}

/* En-tête */
.table-detail thead th {
    background-color: var(--tdf-black) !important;
    color: white !important;
    font-weight: 600;
    padding: 8px 4px !important;
    border: 1px solid #444 !important;
}

.table-detail tbody tr td.col-bonus-bg {
    background-color: #f1f8e9 !important; /* Vert pâle */
}

.table-detail tbody tr td.col-total-bg {
    background-color: #fffde7 !important; /* Jaune pâle */
}

/* La ligne TOTAL */
.table-detail tbody tr.row-total-final td {
    background-color: #fff9c4 !important; 
    font-weight: 700;
    border-top: 2px solid var(--tdf-black) !important;
}

/* État des coureurs */
.cyclist-out {
    color: #a0a0a0 !important;
    text-decoration: line-through;
}

/* Colonne active (Sélectionnée) */
.table-detail tbody tr td.col-active-stage {
    background-color: rgba(0, 123, 255, 0.05) !important;
}

/* Titre de la page (Plus léger et élégant) */
.title-detail {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tdf-black);
    margin-bottom: 1.5rem;
}

/* =====================================================================*/
/* =====================================================================*/
/* Calendrier                                                           */
/* =====================================================================*/
/* =====================================================================*/

.stage-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;           /* Carré parfait */
    height: 34px;
    border-radius: 8px;    /* Coins arrondis modernes */
    color: white;
    font-size: 1.1rem;     /* Taille de l'icône */
    margin-right: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Légère ombre pour le relief */
    transition: transform 0.2s;
}

.stage-badge:hover {
    transform: scale(1.1); /* Petit effet zoom au survol */
}

/* Couleurs spécifiques */
.badge-plat { 
    background-color: #28a745; /* Vert Maillot Vert */
}

.badge-accidentee { 
    background-color: #ffc107; /* Jaune ocre */
    color: #212529; /* Texte noir pour le contraste sur le jaune */
}

.badge-montagne { 
    background-color: #dc3545; /* Rouge (ou tu peux mettre un pattern à pois si tu es motivé !) */
}

.badge-clm { 
    background-color: #0d6efd; /* Bleu Chrono */
}

.badge-default {
    background-color: #6c757d; /* Gris par défaut */
}

.badge-clm-team {
    background-color: #004085; 
}


/* Style du Calendrier */
.table-calendar {
    font-size: 0.9rem;
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

/* On réutilise notre zèbre propre */
.table-calendar tbody tr:nth-of-type(odd) td {
    background-color: #f8f9fa !important;
}

/* Style pour l'icône de type d'étape */
.stage-icon {
    height: 40px;
    width: auto;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

/* Badge pour la distance */
.distance-badge {
    font-weight: 700;
    color: var(--tdf-black);
    background: #eee;
    padding: 4px 8px;
    border-radius: 20px;
    white-space: nowrap;
}


/* Groupe de boutons sur une seule ligne */
.action-group {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap; /* Force la ligne unique */
    justify-content: flex-end;
}

/* On réduit la taille du texte des boutons pour qu'ils tiennent tous */
.action-group .btn {
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 5px 8px;
}

.col-actions {
    width: 1%; 
    white-space: nowrap;
    text-align: right;
}

.col-description {
    width: auto !important; 
    max-width: none !important;
}

/* Couleurs subtiles pour les colonnes de maillots */
.col-vert { background-color: rgba(40, 167, 69, 0.05) !important; color: #1e7e34; font-weight: 600; }
.col-pois { background-color: rgba(220, 53, 69, 0.05) !important; color: #bd2130; font-weight: 600; }
.col-jaune { background-color: rgba(255, 193, 7, 0.05) !important; color: #856404; font-weight: 600; }

/* La colonne Total sur cette page */
.col-score-total {
    background-color: #f8f9fa;
    font-weight: 800;
    color: var(--tdf-black);
}

/* On réutilise le conteneur arrondi du calendrier */
.results-container {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #dee2e6;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.header-icon {
    font-size: 1.1rem;
    display: block;
    margin-bottom: 2px;
}

.col-important {
    width: 60px !important;
    font-weight: bold !important;
}

.table-tdf td .badge {
    min-width: 45px;    
}



/* =====================================================================*/
/* =====================================================================*/
/* Règlement                                                            */
/* =====================================================================*/
/* =====================================================================*/
.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.rule-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: none;
    border-left: 5px solid var(--tdf-yellow); /* Rappel TDF */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.rule-card:hover {
    transform: translateY(-5px);
}

.rule-card h5 {
    color: var(--tdf-black);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rule-card h5 i {
    color: var(--tdf-yellow);
    background: var(--tdf-black);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.9rem;
}

.rule-card p, .rule-card li {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}

.rule-highlight {
    background: rgba(247, 208, 0, 0.1);
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    color: var(--tdf-black);
    margin-top: 10px;
}
/* =====================================================================*/
/* =====================================================================*/
/* Création d'équipe                                                    */
/* =====================================================================*/
/* =====================================================================*/
/* Badge Budget */
.budget-badge {
    background-color: var(--tdf-black);
    color: var(--tdf-yellow);
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
}

/* Alerte équipe incomplète */
.team-invalid {
    color: var(--tdf-admin-red);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}

/* Container de création d'équipe */
.new-team-box {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px dashed #ccc;
    margin-top: 30px;
}


.selection-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    height: 100%;
}

.budget-sticky {
    position: sticky;
    top: 20px;
}

.status-indicator {
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.export-links .btn {
    font-size: 0.8rem;
    margin-bottom: 5px;
}

/* Style pour les coureurs indisponibles dans la liste */
.row-disabled {
    opacity: 0.6;
    background-color: #f8f9fa !important;
}

/* Style des en-têtes de tri */
.table-tdf th a {
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.table-tdf th a:hover {
    color: var(--tdf-yellow);
}

/* Badge budget stylisé */
.budget-val {
    font-family: 'Montserrat', sans-serif;
    background: #f8f9fa;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    font-weight: 700;
    color: var(--tdf-black);
}

/* Optimisation mode consultation */
.consultation-mode {
    max-width: 900px;
    margin: 0 auto;
}



.table-tdf thead th a {
    color: #fff !important;
    text-decoration: none;
    display: block;
    width: 100%;
}
.table-tdf thead th a:hover {
    color: var(--tdf-yellow) !important;
}

/* Force l'alignement à gauche pour les liens de tri dans les en-têtes */
.table-tdf thead th.text-start a {
    justify-content: flex-start;
    text-align: left;
}

/* Optionnel : ajoute une petite marge à l'icône de tri pour qu'elle ne colle pas au texte */
.table-tdf thead th a i, 
.table-tdf thead th a::after {
    margin-left: 8px;
}

/* =====================================================================*/
/* =====================================================================*/
/* Footer                                                               */
/* =====================================================================*/
/* =====================================================================*/
#footer {
    flex-shrink: 0; /* Empêche le footer de s'écraser */
    background-color: var(--tdf-black);
    color: #ffffff;
    padding: 20px 0;
    text-align: center;
    border-top: 4px solid var(--tdf-yellow);
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* =====================================================================*/
/* PAGE ACCOUNT / AVATAR                                                */
/* =====================================================================*/

/* La grille des options */
.avatar-option {
    position: relative;
    margin: 5px;
}

/* Le label qui contient l'image */
.avatar-label {
    display: block;
    cursor: pointer;
    border: 3px solid transparent; /* Bordure invisible par défaut */
    border-radius: 50%;
    padding: 3px;
    transition: all 0.2s ease-in-out;
    position: relative;
    opacity: 0.7; /* Légèrement transparent si pas sélectionné */
}

.avatar-label img {
    border-radius: 50%;
    display: block;
}

/* L'état survolé */
.avatar-label:hover {
    transform: scale(1.1);
    opacity: 1;
}

/* L'état SÉLECTIONNÉ (C'est là que la magie opère via le frère adjacent +) */
/* Quand l'input caché est checked, on style le label qui suit */
input[type="radio"]:checked + .avatar-label {
    border-color: var(--tdf-yellow);
    box-shadow: 0 0 10px rgba(247, 208, 0, 0.4);
    opacity: 1;
    transform: scale(1.15);
    background-color: white;
}

/* Petite icône de check qui apparait quand c'est sélectionné */
.check-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--tdf-yellow);
    color: var(--tdf-black);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

input[type="radio"]:checked + .avatar-label .check-icon {
    opacity: 1;
}

/* =====================================================================*/
/* =====================================================================*/
/* AFFICHAGE RESPONSIVE                                                 */
/* =====================================================================*/
/* =====================================================================*/
@media (max-width: 1400px) {
    .nav-link { font-size: 0.8rem; padding: 8px 5px !important; }
}

/* MODE BURGER */
@media (max-width: 1200px) {

    .navbar-collapse.show {
        display: block;
        width: 100%;
        background-color: var(--tdf-yellow);
        border-top: 1px solid rgba(0,0,0,0.1);
        margin-top: 10px;
        padding-bottom: 15px;
    }

    .navbar-nav {
        align-items: flex-start !important; /* Aligner à gauche en mobile pour plus de clarté */
    }

    .nav-item {
        width: 100%;
        margin: 5px 0;
    }

    .nav-logout-zone {
        border-left: none;
        border-top: 1px solid rgba(0,0,0,0.1);
        padding-top: 10px;
        width: 100%;
    }

    .navbar-collapse {
        background-color: var(--tdf-yellow);
        padding: 1rem;
        border-top: 1px solid rgba(0,0,0,0.1);
    }
    .nav-logout-zone { border-left: none; margin-left: 0; padding-left: 0; border-top: 1px solid rgba(0,0,0,0.1); }



    /* On annule le min-width pour que le tableau s'adapte à l'écran */
    .table-detail {
        min-width: 100% !important;
        table-layout: auto !important; /* On laisse le navigateur ajuster les largeurs */
    }

    /* On cache toutes les colonnes d'étapes */
    .col-stage-hide {
        display: none !important;
    }

    /* On redonne de la place au nom du coureur */
    .col-name {
        width: auto !important;
        font-size: 0.9rem;
    }

    /* On s'assure que Bonus et Total restent visibles et propres */
    .col-utility {
        width: 60px !important;
        font-weight: bold;
    }
}


@media (max-width: 992px) {
    .hide-calendar-mobile { display: none !important; }

    .action-group {
        gap: 2px !important;
    }
    .action-group .btn {
        padding: 4px 6px !important; /* Boutons plus compacts */
    }
    .table-calendar td, .table-calendar th {
        padding: 8px 4px !important; /* Réduction des marges internes de la cellule */
    }   
    
    .border-end-lg {
        border-right: 1px solid #dee2e6;
    }

}

@media (max-width: 768px) {
    .hide-mobile { display: none; }
    .table-tdf td { padding: 8px !important; font-size: 0.85rem; }
    .btn-detail { padding: 4px 8px; font-size: 0.75rem; }
    h3 {font-size: 1.2rem;}   
    
    .table-tdf {
        font-size: 0.75rem; /* On réduit légèrement la police sur mobile */
    }

    .hide-text-mobile {
        display: none !important;
    }
    
    .header-icon-mobile {
        display: block !important;
        font-size: 1.1rem;
        margin-bottom: 2px;
    }

    /* On réduit les paddings au minimum */
    .table-tdf td, .table-tdf th {
        padding: 8px 2px !important;
    }

    /* On s'assure que la colonne Général n'est pas tronquée */
    .col-jaune, .col-score-total {
        min-width: 45px !important;
    }
}

@media (max-width: 576px) {
    .btn-detail span {
        display: none; /* Cache le texte "Détail" */
    }
    .btn-detail i {
        margin-right: 0 !important;
        font-size: 1.1rem;
    }
    .btn-detail {
        padding: 6px 10px !important;
        border-radius: 50%; /* Transforme en bouton rond sur mobile */
    }
}