/* Habillage aux couleurs du club Le Logis Auderghem, par-dessus Tabler */
:root {
--club-rouge: #E50202;
--club-bleu: #0D062E;
--club-vert: #42A735;
--tblr-primary: var(--club-rouge);
--tblr-primary-rgb: 229, 2, 2;
--tblr-link-color: var(--club-rouge);
--tblr-link-color-rgb: 229, 2, 2;
}
/* Tabler pose margin-left: calc(100vw - 100%) sur :root des 992px (compensation de scrollbar
verticale), ce qui laisse un vide visible a gauche des que la page defile verticalement.
On annule : charge apres tabler.min.css donc gagne a specificite egale. */
@media (min-width: 992px) {
:root {
margin-left: 0;
}
}
.navbar-brand-image {
height: 2.2rem;
}
/* Tabler pose img { max-width: 100%; height: auto; } sur toutes les images (reset "responsive
image" par defaut), ce qui ecrase l'attribut HTML height d'un nu - il faut une regle CSS
(specificite de classe) plutot que l'attribut pour reduire la taille du logo de connexion. */
.login-logo {
height: 100px;
width: auto;
}
/* Barres de navigation (admin + publique) : fond blanc en theme clair, surface Tabler par
defaut en theme sombre - meme habillage des deux cotes. */
:root:not([data-bs-theme="dark"]) .admin-navbar,
:root:not([data-bs-theme="dark"]) .public-navbar {
background-color: #fff;
}
/* Barres de navigation fixees en haut sur grand ecran (desktop) : les pages admin (tableaux,
poules...) peuvent etre longues, et remonter tout en haut a chaque fois pour changer de menu
ou rafraichir est penible. Limite a partir de 992px (lg) : sur mobile/tablette, le menu est un
simple deroulant compact deja gere separement ci-dessus, la fixer en plus ajouterait de la
complexite pour peu de benefice sur un petit ecran ou l'on scrolle differemment. */
@media (min-width: 992px) {
.admin-navbar,
.public-navbar {
position: sticky;
top: 0;
z-index: 1030;
}
}
/* Bouton flottant "retour en haut" : masque par defaut, revele en JS (voir app.js) une fois
qu'on a suffisamment scrolle - inutile en haut de page ou la barre de nav est deja a portee. */
.btn-back-to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 1030;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background-color: var(--club-rouge);
color: #fff;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.btn-back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.btn-back-to-top:hover {
background-color: #c00202;
color: #fff;
}
/* Menu mobile de la barre publique : un simple menu deroulant (survole le contenu) plutot
qu'un bloc qui repousse toute la page - plus compact et plus proche du menu "burger"
habituel sur smartphone. */
@media (max-width: 767.98px) {
.public-navbar {
position: relative; /* ancre le menu deroulant juste sous la barre, pas sous un ancetre plus haut */
}
.public-navbar .navbar-collapse {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--tblr-bg-surface, #fff);
border-bottom: 1px solid var(--tblr-border-color, rgba(0, 0, 0, .08));
box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
padding: .5rem 1rem 1rem;
z-index: 1030;
}
.public-navbar .navbar-nav {
width: 100%;
}
}
/* Habillage de Selectize (recherche/autocompletion dans un