/* ==========================================================================
   OBM — LRGEB
   Charte graphique : "AG 2025_nouvelle charte graphique LRGEB.pdf"
   (orange #FF5821, noir #161616, beige #E4E2D0). La typographie de la
   charte (Aeonik) est une police commerciale non fournie ici : remplacée
   par Manrope (Google Fonts, géométrique, licence libre), chargée dans
   base.html et allauth/layouts/base.html.
   ========================================================================== */

:root {
    --lrgeb-orange: #FF5821;
    --lrgeb-orange-dark: #E0480F;
    --lrgeb-noir: #161616;
    --lrgeb-beige: #E4E2D0;
    --lrgeb-beige-clair: #F7F6F1;
    --lrgeb-bordure: #E3E0D4;
}

body {
    font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
    background-color: var(--lrgeb-beige-clair);
    color: var(--lrgeb-noir);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

a {
    color: var(--lrgeb-orange-dark);
}
a:hover {
    color: var(--lrgeb-orange);
}

.text-lrgeb-orange {
    color: var(--lrgeb-orange);
}

/* Logo réel (images/LRGEB-arbitres-2.png, extrait de la charte graphique) :
   un seul fichier vertical (pictogramme + texte). Dans la barre de
   navigation, trop petite pour l'afficher en entier, on ne montre que le
   haut (le pictogramme) via un cadre qui rogne le débordement. */
.brand-logo-crop {
    display: block;
    width: 30px;
    height: 30px;
    overflow: hidden;
}
.brand-logo-crop img {
    display: block;
    width: 100%;
    height: auto;
    object-position: top;
}

/* Logo en entier (pictogramme + texte), utilisé en grand sur l'écran de
   connexion où l'image a la place de s'afficher complète. */
.login-logo {
    width: 130px;
    height: auto;
}

/* Barre de navigation ------------------------------------------------ */
.navbar-lrgeb {
    background-color: var(--lrgeb-noir) !important;
}
.navbar-lrgeb .navbar-brand {
    color: #fff;
}
.navbar-lrgeb .navbar-brand .brand-logo-crop img {
    /* Le logo est en encre noire : inversé en blanc pour rester visible
       sur le fond noir de la barre de navigation. */
    filter: invert(1);
}
.navbar-lrgeb .navbar-text {
    color: rgba(255, 255, 255, .85) !important;
}

/* Menu compte au survol du nom d'utilisateur — en CSS pur (:hover), le JS
   de Bootstrap (data-bs-toggle="dropdown") n'étant pas chargé dans ce
   projet. Réutilise uniquement les classes visuelles .dropdown-menu de
   Bootstrap (positionnement, ombre, bordure), pas leur comportement JS. */
.compte-menu {
    position: relative;
}
.compte-menu-declencheur::after {
    content: "\25BE";
    margin-left: .35em;
    opacity: .7;
}
.compte-menu .dropdown-menu {
    display: none;
}
/* :hover pour souris/trackpad ; .show (voir _navbar.html) au clic/tap pour
   que le menu reste utilisable sur écran tactile, où :hover n'existe pas
   vraiment. */
.compte-menu:hover .dropdown-menu,
.compte-menu .dropdown-menu.show {
    display: block;
}

/* Boutons --------------------------------------------------------------
   On réassigne les variables locales Bootstrap (--bs-btn-*) plutôt que
   chaque état (hover/focus/active) séparément : Bootstrap 5.3 les utilise
   déjà en interne pour calculer tous ces états. */
.btn-primary {
    --bs-btn-bg: var(--lrgeb-orange);
    --bs-btn-border-color: var(--lrgeb-orange);
    --bs-btn-hover-bg: var(--lrgeb-orange-dark);
    --bs-btn-hover-border-color: var(--lrgeb-orange-dark);
    --bs-btn-active-bg: var(--lrgeb-orange-dark);
    --bs-btn-active-border-color: var(--lrgeb-orange-dark);
    --bs-btn-disabled-bg: var(--lrgeb-orange);
    --bs-btn-disabled-border-color: var(--lrgeb-orange);
    --bs-btn-focus-shadow-rgb: 255, 88, 33;
}

.btn-outline-primary {
    --bs-btn-color: var(--lrgeb-orange-dark);
    --bs-btn-border-color: var(--lrgeb-orange);
    --bs-btn-hover-bg: var(--lrgeb-orange);
    --bs-btn-hover-border-color: var(--lrgeb-orange);
    --bs-btn-active-bg: var(--lrgeb-orange);
    --bs-btn-active-border-color: var(--lrgeb-orange);
    --bs-btn-focus-shadow-rgb: 255, 88, 33;
}

.btn-dark {
    --bs-btn-bg: var(--lrgeb-noir);
    --bs-btn-border-color: var(--lrgeb-noir);
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
}

/* Formulaires ---------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--lrgeb-orange);
    box-shadow: 0 0 0 .25rem rgba(255, 88, 33, .2);
}
.form-check-input:checked {
    background-color: var(--lrgeb-orange);
    border-color: var(--lrgeb-orange);
}
.form-check-input:focus {
    border-color: var(--lrgeb-orange);
    box-shadow: 0 0 0 .2rem rgba(255, 88, 33, .2);
}

/* Onglets par type d'officiel ------------------------------------------ */
.nav-tabs {
    border-bottom-color: var(--lrgeb-bordure);
}
.nav-tabs .nav-link {
    color: var(--lrgeb-noir);
    border: none;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    padding-bottom: .6rem;
}
.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--lrgeb-orange-dark);
}
.nav-tabs .nav-link.active {
    color: var(--lrgeb-orange-dark);
    background: transparent;
    border-bottom-color: var(--lrgeb-orange);
}

/* Tableaux --------------------------------------------------------------- */
.table {
    background-color: #fff;
}
.table thead th {
    border-bottom: 2px solid var(--lrgeb-orange);
    font-weight: 700;
}
.table thead.table-light th {
    background-color: var(--lrgeb-beige-clair);
}

.grille-semaine {
    font-size: 0.8rem;
}

/* Même taille de police que la grille de disponibilité (.grille-semaine),
   pour les tableaux de rencontres — sans les autres règles (centrage,
   nowrap) qui ne conviennent pas à des colonnes de texte variable
   (équipes, compétition). */
.table-rencontres {
    font-size: 0.8rem;
}

.grille-semaine th,
.grille-semaine td {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

/* En-tête de tableau toujours visible en défilant une longue liste.
   Piège Bootstrap : .table-responsive ne déclare que overflow-x: auto,
   mais la spec CSS force alors overflow-y à se calculer aussi en "auto"
   (un axe ne peut pas rester "visible" si l'autre ne l'est pas) — ce
   conteneur devient donc malgré lui LE bloc de référence de
   position: sticky, sans jamais avoir de hauteur bornée pour réellement
   défiler en interne : l'en-tête ne s'accroche donc jamais à rien et
   défile avec la page. On rend ce défilement interne réel avec une
   hauteur maximale (voir .table-scroll, ajoutée à côté de
   .table-responsive dans les templates), pour que position: sticky ait
   enfin un scroll à observer. */
.table-scroll {
    max-height: 75vh;
    overflow: auto;
}

.grille-semaine thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Colonne "Officiel"/"Semaine" figée horizontalement en plus (voir
   officiel_liste.html) — cumulée avec la fixation verticale ci-dessus sur
   la cellule d'angle (d'où le z-index plus élevé, pour passer au-dessus
   des deux autres groupes de cellules figées). */
.col-nom-officiel {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 1;
}
.grille-semaine thead th.col-nom-officiel {
    z-index: 3;
    background-color: var(--lrgeb-beige-clair);
}

.creneau-disponible {
    background-color: #DCEAD9;
    color: #2F5D3A;
}
.creneau-indisponible {
    background-color: #F3DCD6;
    color: #7A2E1D;
    font-weight: 600;
}
.creneau-indisponible.source-temporaire {
    background-color: #F5E8C9;
    color: #6B4E14;
}

.semaine-nav {
    gap: 0.5rem;
}

/* Page de connexion / pages allauth (mot de passe oublié, MFA...) ------- */
.login-card {
    border-radius: 1rem;
    overflow: hidden;
}
.login-card::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(90deg, var(--lrgeb-orange), var(--lrgeb-noir));
}