/*
 * Styles propres à l'application, en complément de Bootstrap 5.
 *
 * La charte (couleurs et leurs usages) est décrite dans docs/charte-graphique.md.
 * Bootstrap est personnalisé par ses variables CSS, sans Sass : pas de chaîne de
 * build (ADR 0001). Certaines classes de Bootstrap (boutons, champs en focus…)
 * figent leurs couleurs à la compilation ; elles sont redéfinies plus bas, dans la
 * section « Bootstrap ». À revoir à chaque montée de version de Bootstrap.
 */

/* --- Charte ------------------------------------------------------------- */

:root {
    --leda-bleu-fonce: #0d5874;
    --leda-bleu-fonce-rgb: 13, 88, 116;
    --leda-bleu-fonce-survol: #0a4a62;
    --leda-bleu-fonce-actif: #083d51;
    --leda-jaune: #ffed00;
    --leda-creme: #fffde8;
    --leda-bleu-clair: #72acc1;
    --leda-bleu-clair-leger: color-mix(in srgb, var(--leda-bleu-clair) 25%, white);

    --largeur-barre-laterale: 16rem;
}

/* --- Bootstrap ---------------------------------------------------------- */

:root {
    --bs-primary: var(--leda-bleu-fonce);
    --bs-primary-rgb: var(--leda-bleu-fonce-rgb);
    --bs-primary-text-emphasis: var(--leda-bleu-fonce-actif);
    --bs-primary-bg-subtle: var(--leda-bleu-clair-leger);
    --bs-primary-border-subtle: var(--leda-bleu-clair);

    --bs-link-color: var(--leda-bleu-fonce);
    --bs-link-color-rgb: var(--leda-bleu-fonce-rgb);
    --bs-link-hover-color: var(--leda-bleu-fonce-actif);
    --bs-link-hover-color-rgb: 8, 61, 81;

    --bs-heading-color: var(--leda-bleu-fonce);
    --bs-focus-ring-color: rgba(var(--leda-bleu-fonce-rgb), 0.25);
}

.btn-primary {
    --bs-btn-bg: var(--leda-bleu-fonce);
    --bs-btn-border-color: var(--leda-bleu-fonce);
    --bs-btn-hover-bg: var(--leda-bleu-fonce-survol);
    --bs-btn-hover-border-color: var(--leda-bleu-fonce-survol);
    --bs-btn-active-bg: var(--leda-bleu-fonce-actif);
    --bs-btn-active-border-color: var(--leda-bleu-fonce-actif);
    --bs-btn-disabled-bg: var(--leda-bleu-fonce);
    --bs-btn-disabled-border-color: var(--leda-bleu-fonce);
    --bs-btn-focus-shadow-rgb: var(--leda-bleu-fonce-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--leda-bleu-fonce);
    --bs-btn-border-color: var(--leda-bleu-fonce);
    --bs-btn-hover-bg: var(--leda-bleu-fonce);
    --bs-btn-hover-border-color: var(--leda-bleu-fonce);
    --bs-btn-active-bg: var(--leda-bleu-fonce-actif);
    --bs-btn-active-border-color: var(--leda-bleu-fonce-actif);
    --bs-btn-disabled-color: var(--leda-bleu-fonce);
    --bs-btn-disabled-border-color: var(--leda-bleu-fonce);
    --bs-btn-focus-shadow-rgb: var(--leda-bleu-fonce-rgb);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--leda-bleu-clair);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--leda-bleu-fonce);
    border-color: var(--leda-bleu-fonce);
}

/* Onglets « pilules » (onglets des référentiels…). */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--leda-bleu-fonce);
}

/* En-têtes de tableau sur fond bleu clair (toujours avec du texte foncé). */
.table > thead {
    --bs-table-bg: var(--leda-bleu-clair-leger);
}

/* Listes enrichies (Symfony UX Autocomplete, thème Bootstrap 5 de Tom Select) :
   même focus que les champs, étiquettes des choix aux couleurs de la charte. */
.ts-wrapper.focus .ts-control {
    border-color: var(--leda-bleu-clair);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.ts-wrapper.multi .ts-control > div.item {
    background: var(--leda-bleu-clair-leger);
    color: var(--leda-bleu-fonce-actif);
}

.ts-wrapper.multi .ts-control > div.item.active {
    background: var(--leda-bleu-fonce);
    color: #fff;
}

/* Options écartées par un filtrage à l'écran (élèves d'une autre saison…) : on les
   désactive, Tom Select les afficherait grisées. */
.ts-wrapper.masquer-indisponibles .ts-dropdown .option[aria-disabled="true"] {
    display: none;
}

/* --- Logo --------------------------------------------------------------- */

.logo-leda {
    border-radius: 50%;
    flex-shrink: 0;
}

/* Proposition : un fin cercle clair pour détacher le logo d'un fond foncé. Pour
   revenir au logo seul, retirer la classe dans les gabarits. */
.logo-leda--cercle {
    box-shadow: 0 0 0 2px var(--leda-creme);
}

/* --- Pages publiques ---------------------------------------------------- */

.page-publique {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--leda-creme);
}

.page-publique main {
    flex: 1 0 auto;
}

.bandeau-public {
    background-color: var(--leda-bleu-fonce);
    color: #fff;
}

/* --- Écrans connectés : barre latérale + contenu ------------------------ */

.page-app {
    background-color: var(--leda-creme);
}

.marque {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 600;
    text-decoration: none;
}

.marque:hover {
    color: #fff;
}

/* Barre du haut, petits écrans seulement. */
.barre-mobile {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--leda-bleu-fonce);
    color: #fff;
}

.barre-mobile .marque {
    font-size: 1.15rem;
}

/* Sur petit écran, la barre latérale est un offcanvas : son fond est porté par
   --bs-offcanvas-bg. Sur grand écran, Bootstrap force le fond de .offcanvas-lg à
   transparent : il est donc porté par le conteneur. */
.barre-laterale {
    --bs-offcanvas-bg: var(--leda-bleu-fonce);
    --bs-offcanvas-width: var(--largeur-barre-laterale);
    color: #fff;
}

.barre-laterale .marque {
    padding: 1.25rem 1rem;
}

@media (min-width: 992px) {
    .barre-laterale-conteneur {
        position: sticky;
        top: 0;
        flex-shrink: 0;
        width: var(--largeur-barre-laterale);
        height: 100vh;
        overflow-y: auto;
        background-color: var(--leda-bleu-fonce);
    }

    /* Bootstrap fige la hauteur du corps de .offcanvas-lg : on l'étire pour que le
       bloc utilisateur reste en bas de la barre. */
    .barre-laterale {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .barre-laterale .offcanvas-body {
        flex-grow: 1;
    }
}

.menu .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-left: 4px solid transparent;
    color: rgba(255, 255, 255, 0.85);
}

.menu .nav-link:hover,
.menu .nav-link:focus-visible {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

.menu .nav-link.active {
    color: var(--leda-jaune);
    font-weight: 600;
    border-left-color: var(--leda-jaune);
    background-color: rgba(255, 255, 255, 0.1);
}

.icone-menu {
    flex-shrink: 0;
    width: 1.25em;
}

.utilisateur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.barre-laterale .association {
    margin: 0;
    padding: 0 1rem 1rem;
    font-size: 0.8rem;
    opacity: 0.7;
}

.contenu {
    flex-grow: 1;
    min-width: 0;
    padding: 1.5rem 1rem;
}

@media (min-width: 992px) {
    .contenu {
        padding: 2rem 2.5rem;
    }
}

/* --- Référentiels ------------------------------------------------------- */

@media (min-width: 768px) {
    .onglets-referentiels {
        flex-shrink: 0;
        width: 12rem;
    }
}

.onglets-referentiels .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.formulaire-referentiel {
    max-width: 40rem;
}

/* Astérisque des champs obligatoires (templates/form/theme.html.twig). */
.champ-obligatoire {
    margin-left: 0.25em;
    color: var(--bs-danger);
}

/* --- Notifications (templates/_notifications.html.twig) ---------------- */

.notification {
    --bs-toast-max-width: 26rem;
    --bs-toast-bg: var(--bs-body-bg);
    border-left: 4px solid var(--couleur-notification);
    box-shadow: var(--bs-box-shadow);
}

.notification--succes { --couleur-notification: var(--bs-success); }
.notification--avertissement { --couleur-notification: var(--bs-warning); }
.notification--erreur {
    --couleur-notification: var(--bs-danger);
    --bs-toast-bg: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.notification__fermer {
    flex-shrink: 0;
    margin: 0.75rem 0.75rem 0 0;
    font-size: 0.75rem;
}

.notification__icone {
    flex-shrink: 0;
    margin-top: 0.2em;
    color: var(--couleur-notification);
}

/* --- Agenda (templates/agenda/semaine.html.twig) ------------------------ */

/* Grille de la semaine : une colonne d'heures, puis une colonne par jour. Les cours
   et les créneaux sont placés d'après leurs variables (--debut, --duree en minutes ;
   --piste, --pistes pour les cours qui se chevauchent). */
.agenda {
    --hauteur-heure: 3.5rem;
    grid-template-columns: 3.5rem repeat(var(--jours), minmax(0, 1fr));
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.agenda__entete {
    padding: 0.5rem 0.25rem;
    text-align: center;
    font-weight: 600;
    border-left: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.agenda__coin {
    border-bottom: 1px solid var(--bs-border-color);
}

.agenda__entete--aujourdhui {
    color: var(--leda-bleu-fonce);
    background-color: var(--leda-bleu-clair-leger);
}

.agenda__heures,
.agenda__jour {
    position: relative;
    height: calc(var(--heures) * var(--hauteur-heure));
}

.agenda__heures span {
    position: absolute;
    top: calc((var(--heure) - var(--heure-debut)) * var(--hauteur-heure) + 2px);
    right: 0.4rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* Un trait plein par heure, un trait léger par demi-heure. */
.agenda__jour {
    border-left: 1px solid var(--bs-border-color);
    background-image:
        repeating-linear-gradient(to bottom, var(--bs-border-color) 0 1px, transparent 1px var(--hauteur-heure)),
        repeating-linear-gradient(to bottom,
            transparent 0 calc(var(--hauteur-heure) / 2),
            var(--bs-border-color-translucent) calc(var(--hauteur-heure) / 2) calc(var(--hauteur-heure) / 2 + 1px),
            transparent calc(var(--hauteur-heure) / 2 + 1px) var(--hauteur-heure));
}

.agenda__jour--aujourdhui {
    background-color: color-mix(in srgb, var(--leda-jaune) 8%, transparent);
}

.agenda__creneau,
.agenda__cours {
    position: absolute;
    top: calc((var(--debut) - var(--heure-debut) * 60) * var(--hauteur-heure) / 60);
}

/* Quart d'heure libre (administration) : un clic ouvre la saisie d'un cours. */
.agenda__creneau {
    left: 0;
    right: 0;
    z-index: 1;
    height: calc(var(--hauteur-heure) / 4);
    text-decoration: none;
}

.agenda__creneau:hover {
    background-color: var(--leda-bleu-clair-leger);
}

.agenda__creneau:hover::after {
    content: "+ " attr(data-heure);
    padding-left: 0.3rem;
    font-size: 0.7rem;
    line-height: calc(var(--hauteur-heure) / 4);
    color: var(--leda-bleu-fonce);
}

.agenda__cours {
    z-index: 2;
    left: calc(var(--piste) * 100% / var(--pistes) + 2px);
    width: calc(100% / var(--pistes) - 4px);
    height: calc(var(--duree) * var(--hauteur-heure) / 60 - 2px);
    overflow: hidden;
    padding: 0.1rem 0.35rem;
    font-size: 0.8rem;
    line-height: 1.25;
    color: var(--texte);
    background-color: var(--fond);
    border-left: 3px solid var(--bord);
    border-radius: var(--bs-border-radius-sm);
    text-decoration: none;
}

a.agenda__cours:hover {
    color: var(--texte);
    box-shadow: var(--bs-box-shadow-sm);
}

/* Couleurs des statuts (StatutCours::couleur()). */
.agenda__cours--info { --fond: var(--bs-info-bg-subtle); --bord: var(--bs-info); --texte: var(--bs-info-text-emphasis); }
.agenda__cours--warning { --fond: var(--bs-warning-bg-subtle); --bord: var(--bs-warning); --texte: var(--bs-warning-text-emphasis); }
.agenda__cours--success { --fond: var(--bs-success-bg-subtle); --bord: var(--bs-success); --texte: var(--bs-success-text-emphasis); }
.agenda__cours--secondary { --fond: var(--bs-secondary-bg-subtle); --bord: var(--bs-secondary); --texte: var(--bs-secondary-text-emphasis); }

.agenda__cours--annule .agenda__eleves {
    text-decoration: line-through;
}

.agenda__horaire {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
}

.agenda__eleves {
    display: block;
}

/* --- Divers ------------------------------------------------------------- */

.min-w-0 {
    min-width: 0;
}