/* ==========================================================================
SBD THEME — Unified Dark / Light Overlay
==========================================================================
Loaded LAST in _head.html.twig (replaces dark-theme.css).
Toggle via: or
Default: dark.
All override selectors reference --sbd-* variables.
Switching theme = swapping variable values. Zero JS DOM manipulation.
========================================================================== */
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 1. DARK THEME TOKENS ║
╚════════════════════════════════════════════════════════════════════════╝ */
:root,
[data-theme="dark"] {
/* Ce que le NAVIGATEUR dessine lui-même. Les pictogrammes des champs
natifs — horloge d'un ``, coche d'une case,
ascenseurs — ne sont pas du CSS : aucune de nos règles ne peut les
atteindre. Sans cette déclaration l'agent utilisateur les peint pour un
fond CLAIR, donc en noir, et ils disparaissent sur nos fonds sombres.
Vécu sur le champ d'heure du calendrier éditorial : l'horloge était
invisible, et rien dans l'inspecteur ne désignait de coupable puisque
aucune règle n'était en cause. */
color-scheme: dark;
/* --- Core palette --- */
--sbd-bg-deep: #08080f;
--sbd-bg-surface: #111118;
--sbd-bg-elevated: #1a1a24;
--sbd-bg-glass: rgba(255, 255, 255, 0.04);
--sbd-border: rgba(255, 255, 255, 0.08);
--sbd-border-hover: rgba(255, 255, 255, 0.15);
/* --- Accent (rose/beige) --- */
--sbd-accent: #E1BDB1;
--sbd-accent-hover: #edd9d1;
--sbd-accent-glow: rgba(225, 189, 177, 0.35);
--sbd-accent-soft: rgba(225, 189, 177, 0.12);
--sbd-accent-softer: rgba(225, 189, 177, 0.06);
/* --- Text --- */
--sbd-text: #ffffff;
--sbd-text-secondary: rgba(255, 255, 255, 0.65);
--sbd-text-muted: rgba(255, 255, 255, 0.45);
--sbd-text-faint: rgba(255, 255, 255, 0.30);
/* --- Inverted (for elements that need opposite) --- */
--sbd-on-accent: #08080f;
/* --- Shadows (teintées accent/beige plutôt que noir plat) --- */
--sbd-shadow-sm: 0 1px 3px rgba(225, 189, 177, 0.12);
--sbd-shadow-md: 0 4px 24px rgba(225, 189, 177, 0.14), 0 1px 3px rgba(0, 0, 0, 0.3);
--sbd-shadow-lg: 0 8px 32px rgba(225, 189, 177, 0.18), 0 2px 6px rgba(0, 0, 0, 0.35);
--sbd-shadow-header: 0 1px 20px rgba(225, 189, 177, 0.14);
/* --- Override sbd/global.css :root vars --- */
--main-font-color: #ffffff;
--mauve-color: #E1BDB1;
--red-color: #E1BDB1;
--color-red: #E1BDB1;
--color-red-05: rgba(225, 189, 177, 0.10);
--color-red-60: rgba(225, 189, 177, 0.40);
--color-pink: #E1BDB1;
--color-pink-60: rgba(255, 255, 255, 0.06);
--color-pink-53: rgba(255, 255, 255, 0.08);
--color-pink-34: rgba(255, 255, 255, 0.05);
--color-pink-16: rgba(255, 255, 255, 0.03);
--color-title: rgba(225, 189, 177, 0.10);
--color-user-logo-hover: rgba(225, 189, 177, 0.14);
--field-border-color: rgba(255, 255, 255, 0.10);
--border-color: rgba(255, 255, 255, 0.08);
--background-hover: rgba(255, 255, 255, 0.06);
/* --- Override color.css :root vars --- */
--primary-200: rgba(225, 189, 177, 0.25);
--primary-300: #E1BDB1;
--primary-400: #E1BDB1;
--bs-primary: #E1BDB1;
--primary-600: #c9a396;
--bs-primary-rgb: 225, 189, 177;
/* --- Override custom-bootstrap.css :root vars --- */
--bs-body-bg: #08080f;
--bs-body-color: rgba(255, 255, 255, 0.65);
--bs-body-bg-rgb: 8, 8, 15;
--bs-body-color-rgb: 255, 255, 255;
--bs-light: #1a1a24;
--bs-light-rgb: 26, 26, 36;
--bs-dark: #ffffff;
--bs-dark-rgb: 255, 255, 255;
/* --- Dark-specific --- */
--sbd-logo-filter: brightness(0) invert(1);
--sbd-close-btn-filter: invert(1) grayscale(100%) brightness(200%);
--sbd-scrollbar-track: #08080f;
--sbd-scrollbar-thumb: rgba(255, 255, 255, 0.10);
--sbd-scrollbar-thumb-hover: rgba(255, 255, 255, 0.20);
/* --- Alerts --- */
--sbd-alert-danger-bg: rgba(214, 41, 62, 0.15);
--sbd-alert-danger-border: rgba(214, 41, 62, 0.25);
--sbd-alert-danger-text: #ff6b81;
--sbd-alert-success-bg: rgba(12, 188, 135, 0.15);
--sbd-alert-success-border:rgba(12, 188, 135, 0.25);
--sbd-alert-success-text: #4ecca3;
--sbd-alert-warning-bg: rgba(247, 195, 46, 0.15);
--sbd-alert-warning-border:rgba(247, 195, 46, 0.25);
--sbd-alert-warning-text: #ffc107;
--sbd-alert-info-bg: rgba(23, 162, 184, 0.15);
--sbd-alert-info-border: rgba(23, 162, 184, 0.25);
--sbd-alert-info-text: #63d0df;
/* --- Chat --- */
--sbd-chat-user-bg: #E1BDB1;
--sbd-chat-user-text: #08080f;
--sbd-chat-user-muted: rgba(8, 8, 15, 0.6);
--sbd-chat-user-shadow: rgba(0, 0, 0, 0.3) 1px 1px 8px;
--sbd-chat-code-color: #E1BDB1;
--sbd-chat-disc-hover-bg: rgba(225, 189, 177, 0.06);
--sbd-chat-disc-hover-border: #E1BDB1;
--sbd-svg-accent: #E1BDB1;
--sbd-svg-accent-light:#C9A093;
--sbd-svg-accent-dark:#8B6B6221;
--sbd-svg-dark:#373739;
--sbd-svg-white: #ffffff;
--sbd-svg-opacity: 0.8;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 2. LIGHT THEME TOKENS ║
╚════════════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] {
/* --- Core palette --- */
--sbd-bg-deep: #FAF7F5;
--sbd-bg-surface: #FFFFFF;
--sbd-bg-elevated: #F3EEEB;
--sbd-bg-glass: rgba(225, 189, 177, 0.07);
--sbd-border: rgba(180, 140, 128, 0.14);
--sbd-border-hover: rgba(180, 140, 128, 0.28);
/* --- Accent (warm rose-brown, cousin direct de #E1BDB1) --- */
--sbd-accent: #926155;
--sbd-accent-hover: #7A5147;
--sbd-accent-glow: rgba(146, 97, 85, 0.18);
--sbd-accent-soft: rgba(146, 97, 85, 0.09);
--sbd-accent-softer: rgba(146, 97, 85, 0.04);
/* --- Text (tons chauds, pas gris froid) --- */
--sbd-text: #2C2024;
--sbd-text-secondary: #6B5558;
--sbd-text-muted: #A39192;
--sbd-text-faint: #CFC3C4;
/* --- Inverted --- */
--sbd-on-accent: #FFFFFF;
/* --- Shadows (teintées rose au lieu de rouge brique) --- */
--sbd-shadow-sm: 0 1px 3px rgba(146, 97, 85, 0.06);
--sbd-shadow-md: 0 4px 16px rgba(146, 97, 85, 0.08);
--sbd-shadow-lg: 0 8px 32px rgba(146, 97, 85, 0.10);
--sbd-shadow-header: 0 1px 12px rgba(146, 97, 85, 0.06);
/* --- Override sbd/global.css :root vars --- */
--main-font-color: #2C2024;
--mauve-color: #D4ADA2;
--red-color: #926155;
--color-red: #926155;
--color-red-05: rgba(146, 97, 85, 0.08);
--color-red-60: rgba(146, 97, 85, 0.25);
--color-pink: #D4ADA2;
--color-pink-60: #F3EEEB;
--color-pink-53: rgba(212, 173, 162, 0.35);
--color-pink-34: #F7F3F1;
--color-pink-16: #FCFAF9;
--color-title: #FFF8F5;
--color-user-logo-hover: rgba(146, 97, 85, 0.10);
--field-border-color: rgba(180, 140, 128, 0.14);
--border-color: rgba(180, 140, 128, 0.12);
--background-hover: #F7F3F1;
/* --- Override color.css :root vars --- */
--primary-200: #EACFC7;
--primary-300: #B8796E;
--primary-400: #926155;
--bs-primary: #926155;
--primary-600: #7A5147;
--bs-primary-rgb: 146, 97, 85;
/* --- Override custom-bootstrap.css :root vars --- */
--bs-body-bg: #FAF7F5;
--bs-body-color: #6B5558;
--bs-body-bg-rgb: 250, 247, 245;
--bs-body-color-rgb: 107, 85, 88;
--bs-light: #F7F3F1;
--bs-light-rgb: 247, 243, 241;
--bs-dark: #2C2024;
--bs-dark-rgb: 44, 32, 36;
/* --- Light-specific --- */
--sbd-logo-filter: none;
--sbd-close-btn-filter: none;
--sbd-scrollbar-track: #FAF7F5;
--sbd-scrollbar-thumb: rgba(146, 97, 85, 0.12);
--sbd-scrollbar-thumb-hover: rgba(146, 97, 85, 0.25);
/* --- Alerts --- */
--sbd-alert-danger-bg: rgba(196, 58, 48, 0.07);
--sbd-alert-danger-border: rgba(196, 58, 48, 0.15);
--sbd-alert-danger-text: #B93A2E;
--sbd-alert-success-bg: rgba(12, 165, 118, 0.07);
--sbd-alert-success-border:rgba(12, 165, 118, 0.15);
--sbd-alert-success-text: #0A7F5C;
--sbd-alert-warning-bg: rgba(200, 155, 30, 0.08);
--sbd-alert-warning-border:rgba(200, 155, 30, 0.20);
--sbd-alert-warning-text: #9A7410;
--sbd-alert-info-bg: rgba(23, 140, 160, 0.07);
--sbd-alert-info-border: rgba(23, 140, 160, 0.15);
--sbd-alert-info-text: #107080;
/* --- Chat --- */
--sbd-chat-user-bg: #926155;
--sbd-chat-user-text: #FFFFFF;
--sbd-chat-user-muted: rgba(255, 255, 255, 0.70);
--sbd-chat-user-shadow: rgba(146, 97, 85, 0.18) 1px 1px 8px;
--sbd-chat-code-color: #926155;
--sbd-chat-disc-hover-bg: rgba(146, 97, 85, 0.06);
--sbd-chat-disc-hover-border: #926155;
--sbd-svg-accent: #926155;
--sbd-svg-accent-light: #C9A093;
--sbd-svg-accent-dark: #92615521;
--sbd-svg-dark: #FFFFFF;
--sbd-svg-white: #2C2024;
--sbd-svg-opacity: 0.8;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 3. BASE / BODY ║
╚════════════════════════════════════════════════════════════════════════╝ */
body {
background-color: var(--sbd-bg-deep) !important;
color: var(--sbd-text-secondary) !important;
}
main {
background-color: var(--sbd-bg-deep) !important;
}
section {
background-color: transparent !important;
}
/* Le fond n'était que la MOITIÉ de la fuite : `custom-bootstrap.css` pose aussi
`section { padding-top: 3.5rem; padding-bottom: 2.8rem }` (4rem / 3rem sous
768px) sur la BALISE NUE. Une page Twig de présentation s'en sert pour aérer
ses grandes bandes ; une modale SPA dont chaque bloc est un
sémantique récolte 6,3rem de vide par bloc, sans qu'aucune règle du composant
ne le dise. Vécu sur le calendrier éditorial : trois sections dans une modale
faisaient 19rem de blanc, et la moitié du geste passait sous le pli.
Neutralisé SOUS LES RACINES SPA seulement, jamais globalement : les pages
Twig non migrées comptent sur ce rembourrage, le retirer partout les
tasserait toutes. Un sélecteur d'identifiant (1,0,1) suffit à battre la
balise nue (0,0,1), donc pas d'`!important` — un composant qui veut du
padding sur son le pose et gagne. */
#student-spa section,
#admin-spa section {
padding-top: 0;
padding-bottom: 0;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 4. TYPOGRAPHY ║
╚════════════════════════════════════════════════════════════════════════╝ */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
color: var(--sbd-text);
}
p {
color: var(--sbd-text-secondary);
}
.lead {
color: var(--sbd-text-secondary);
}
small, .small {
color: var(--sbd-text-muted);
}
a {
color: var(--sbd-accent);
}
a:hover {
color: var(--sbd-accent-hover);
}
.text-dark {
color: var(--sbd-text) !important;
}
.text-secondary {
color: var(--sbd-text-muted) !important;
}
.text-muted {
color: var(--sbd-text-muted) !important;
}
.text-body {
color: var(--sbd-text-secondary) !important;
}
.text-primary,
a.text-primary-hover:hover,
button.text-primary-hover:hover,
.text-primary-hover a:hover {
color: var(--sbd-accent) !important;
}
.color-grey {
color: var(--sbd-text-muted) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 5. HEADER / NAVBAR ║
╚════════════════════════════════════════════════════════════════════════╝ */
/* Bootstrap (custom-bootstrap.css) impose `header { background: #fff }` à TOUTE
balise . Les sémantiques des pages SPA (titres de section,
en-têtes de carte) héritaient donc d'un fond BLANC → bloc blanc illisible en
thème sombre (vécu sur le calendrier éditorial). On neutralise tout
qui N'EST PAS la barre de navigation du site (elle garde son fond via les
règles header.navbar-* ci-dessous, plus spécifiques). Même traitement que
`main` et `section` plus haut : une balise sémantique de contenu n'a pas de
fond propre, elle laisse voir le thème.
La MÊME règle Bootstrap pose aussi `header { position: relative; z-index: 9000 }`
sur cette balise nue. Un de contenu se retrouvait donc DEVANT l'en-tête
collant de l'application (`.student-header`, z-index 1030) : son texte défilait
par-dessus la barre du site (vécu sur le calendrier éditorial, dont chaque carte
ouvre sur un ). On remet donc l'empilement à `auto` — un titre de section
n'a aucune raison d'occuper un plan.
On ne touche PAS à `position` : la laisser en `relative` garde le bloc comme
référent des enfants positionnés en absolu, et `z-index: auto` suffit à ne plus
créer de contexte d'empilement (l'élément repasse alors sous tout z-index positif).
L'en-tête de l'application redéclare le sien dans son CSS scoped
(`.student-header[data-v-*]`, 0,2,0) et l'emporte donc sur ce sélecteur (0,1,1). */
header:not([class*="navbar"]) {
background-color: transparent !important;
z-index: auto;
}
header.navbar-light,
header.navbar-light .navbar,
header.navbar-light nav.navbar {
background-color: var(--sbd-bg-surface) !important;
border-bottom: 1px solid var(--sbd-border) !important;
box-shadow: var(--sbd-shadow-header) !important;
max-height: 64px;
}
header.navbar-sticky-on .navbar-expand-xl div{
background-color: var(--sbd-bg-surface) !important;
}
header.navbar-sticky-on div {
padding:3px;
}
/* Header collant + masquage au défilement.
Le header reste un bloc unique, collant (sticky) sur toutes les tailles
d'écran. On le masque en défilant vers le bas et on le ré-affiche en
défilant vers le haut (classe .header-hidden ajoutée par functions.js).
z-index volontairement bas (1020) afin que le menu burger reste TOUJOURS
au-dessus du header :
- sidenav MDB (desktop) : z-index 1035 / backdrop 1034
- menu mobile plein écran : z-index 9000
On garde la même valeur dans les deux états (haut de page / défilé) pour
éviter l'incohérence d'empilement précédente (static vs fixed). */
header.navbar-sticky {
position: sticky;
top: 0;
z-index: 1020;
transition: transform 0.3s ease;
will-change: transform;
}
header.navbar-sticky.header-hidden {
transform: translateY(-100%);
}
header .navbar-toggler,
#toggler,
#toggler i {
color: var(--sbd-text) !important;
}
#toggler {
padding: 10px;
margin: -10px 0 -10px -20px;
}
@media (max-width: 576px) {
#toggler {
margin-left: -7px;
}
}
.navbar-toggler-animation span,
.navbar-toggler-animation span::before,
.navbar-toggler-animation span::after {
background-color: var(--sbd-text) !important;
}
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .nav .nav-link {
color: var(--sbd-text-secondary) !important;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .nav .nav-link:hover {
color: var(--sbd-accent) !important;
}
.navbar-brand {
max-height: 40px;
max-width: 215px;
}
.navbar-brand-item {
filter: var(--sbd-logo-filter);
}
/* ── Top bar admin sur mobile/tablette (sidebar repliée, < xl) ──────────────
Le desktop (≥ 1200px) garde la sidebar fixe : ces règles ne s'y appliquent
pas (le toggler y est masqué par Bootstrap). */
@media (max-width: 1199.98px) {
/* Bouton menu (hamburger) : icône simple, sans cadre ni fond bleu au focus,
cohérent avec les autres actions de la barre. */
.top-bar .navbar-toggler {
border: 0;
background-color: transparent !important;
color: var(--sbd-text) !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
}
.top-bar .navbar-toggler:hover,
.top-bar .navbar-toggler:focus,
.top-bar .navbar-toggler:active {
background-color: transparent !important;
box-shadow: none !important;
color: var(--sbd-accent) !important;
}
}
/* La bordure qui encadre le dashboard fait doublon avec le bord de l'écran
quand le wrapper passe pleine largeur (< 576px) : on la retire, le fond et
l'ombre suffisent à le délimiter. Desktop et tablette inchangés. */
@media (max-width: 575.98px) {
.page-content .page-content-wrapper {
border: 0 !important;
}
}
/* En-tête du menu mobile (offcanvas) : même surface que le corps de la sidebar
pour une continuité visuelle, avec un séparateur discret sous le logo.
N'apparaît que sur mobile (d-xl-none). */
.sidebar-offcanvas-header {
background-color: var(--sbd-bg-surface);
border-bottom: 1px solid var(--sbd-border);
}
/* Tiroir offcanvas générique (menus mobiles « Mon compte », espace formateur…).
Sans cette règle, .offcanvas conserve le fond blanc de Bootstrap alors que les
items internes (.list-group-item) passent en sombre → un menu incohérent
« cartes sombres sur tiroir blanc ». On aligne donc la surface du tiroir et
son en-tête sur le thème courant. */
.offcanvas {
background-color: var(--sbd-bg-surface) !important;
color: var(--sbd-text-secondary) !important;
}
.offcanvas .offcanvas-title {
color: var(--sbd-text) !important;
}
.offcanvas .offcanvas-header.bg-light {
background-color: var(--sbd-bg-surface) !important;
border-bottom: 1px solid var(--sbd-border) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 6. SEARCH BAR ║
╚════════════════════════════════════════════════════════════════════════╝ */
.sbd-searchbar {
background: var(--sbd-bg-glass) !important;
border-color: var(--sbd-border) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.sbd-searchbar #search-field {
background: transparent !important;
color: var(--sbd-text) !important;
}
.sbd-searchbar #search-field::placeholder {
color: var(--sbd-text-muted) !important;
}
.sbd-searchbar .search-button,
.sbd-searchbar .search-button i,
.sbd-searchbar .button-close-responsive-searchbar {
color: var(--sbd-text-muted) !important;
}
.sbd-searchbar .search-hints {
background: var(--sbd-bg-elevated) !important;
box-shadow: var(--sbd-shadow-lg) !important;
border: 1px solid var(--sbd-border) !important;
}
.sbd-searchbar.open {
background: var(--sbd-bg-surface) !important;
}
.sbd-searchbar.open .search-hints {
background: var(--sbd-bg-deep) !important;
box-shadow: none !important;
}
.sbd-searchbar.open .search-input {
border-bottom-color: var(--sbd-border) !important;
}
.sbd-searchbar .sbd-item {
background: var(--sbd-bg-glass) !important;
}
.sbd-searchbar.open .sbd-item {
background: var(--sbd-bg-elevated) !important;
}
.sbd-searchbar .element-type .title {
color: var(--sbd-text-muted) !important;
}
.sbd-searchbar .sbd-item .sbd-item-details {
color: var(--sbd-text-secondary) !important;
}
.sbd-searchbar-responsive-button {
color: var(--sbd-text) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 7. SIDEBAR — MDB Sidenav ║
╚════════════════════════════════════════════════════════════════════════╝ */
.sidenav,
nav.sidenav {
background: var(--sbd-bg-surface) !important;
border-right: 1px solid var(--sbd-border) !important;
color: var(--sbd-text-secondary) !important;
}
.sidenav-menu .sidenav-link {
color: var(--sbd-text-secondary) !important;
transition: color 0.2s, background 0.2s;
}
.sidenav-menu .sidenav-link:hover {
color: var(--sbd-text) !important;
background: var(--sbd-accent-softer) !important;
}
.sidenav-menu .sidenav-link.active,
.sidenav-menu .sidenav-item.active > .sidenav-link {
color: var(--sbd-accent) !important;
background: var(--sbd-accent-soft) !important;
}
.sidenav-menu .sidenav-link i {
color: var(--sbd-text-muted) !important;
transition: color 0.2s;
}
.sidenav-menu .sidenav-link:hover i {
color: var(--sbd-accent) !important;
}
.sidenav hr {
border-color: var(--sbd-border) !important;
opacity: 1;
}
.sidenav .text-center p {
color: var(--sbd-text-muted) !important;
}
.sidenav #header-content img {
filter: var(--sbd-logo-filter);
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 8. SIDEBAR — #sidebar ║
╚════════════════════════════════════════════════════════════════════════╝ */
#sidebar {
background: var(--sbd-bg-surface) !important;
color: var(--sbd-text-secondary) !important;
border-right: 1px solid var(--sbd-border) !important;
}
#sidebar .section .link {
color: var(--sbd-text-secondary) !important;
}
#sidebar .section .link:hover {
background: var(--sbd-accent-softer) !important;
color: var(--sbd-text) !important;
}
#sidebar .section .link.active {
background: var(--sbd-accent-soft) !important;
color: var(--sbd-accent) !important;
}
#sidebar .section .link i {
color: var(--sbd-text-muted) !important;
}
#sidebar .section .link:hover i,
#sidebar .section .link.active i {
color: var(--sbd-accent) !important;
}
#sidebar .section .link.unavailable {
color: var(--sbd-text-faint) !important;
}
#sidebar .section.user .name:hover {
color: var(--sbd-accent) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 9. USER LOGO ║
╚════════════════════════════════════════════════════════════════════════╝ */
.sbd-user-logo {
background: var(--sbd-bg-glass) !important;
border: 1px solid var(--sbd-border) !important;
}
.sbd-user-logo a {
color: var(--sbd-text) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 10. CONTENT AREA ║
╚════════════════════════════════════════════════════════════════════════╝ */
#content {
background: var(--sbd-bg-deep) !important;
}
#top {
background: var(--sbd-bg-surface) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 11. CARDS ║
╚════════════════════════════════════════════════════════════════════════╝ */
.card {
background-color: var(--sbd-bg-surface) !important;
border: 1px solid var(--sbd-border) !important;
color: var(--sbd-text-secondary) !important;
transition: border-color 0.3s, box-shadow 0.3s;
}
.card:hover {
border-color: var(--sbd-border-hover) !important;
box-shadow: var(--sbd-shadow-md) !important;
}
.card-header {
background-color: var(--sbd-bg-glass) !important;
border-bottom: 1px solid var(--sbd-border) !important;
color: var(--sbd-text) !important;
}
.card-body {
background-color: transparent !important;
color: var(--sbd-text-secondary) !important;
}
.card-footer {
background-color: var(--sbd-bg-glass) !important;
border-top: 1px solid var(--sbd-border) !important;
}
.card-title, .card h5, .card h4, .card h3 {
color: var(--sbd-text) !important;
}
.card p {
color: var(--sbd-text-secondary) !important;
}
.card.card-body.border {
border: 1px solid var(--sbd-border) !important;
}
.card-border-hover:hover {
border-color: var(--sbd-accent) !important;
box-shadow: 0 0 20px var(--sbd-accent-glow) !important;
}
.card-img-overlay {
background: linear-gradient(transparent, var(--sbd-bg-deep)) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 12. BUTTONS ║
╚════════════════════════════════════════════════════════════════════════╝ */
.btn-primary {
background-color: var(--sbd-accent) !important;
border-color: var(--sbd-accent) !important;
color: var(--sbd-on-accent) !important;
font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-check:focus + .btn-primary {
background-color: var(--sbd-accent-hover) !important;
border-color: var(--sbd-accent-hover) !important;
color: var(--sbd-on-accent) !important;
box-shadow: 0 0 16px var(--sbd-accent-glow) !important;
}
.btn-primary:active,
.btn-primary.active,
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.show > .btn-primary.dropdown-toggle {
background-color: var(--sbd-accent) !important;
border-color: var(--sbd-accent) !important;
color: var(--sbd-on-accent) !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
background-color: var(--sbd-accent) !important;
border-color: var(--sbd-accent) !important;
opacity: 0.5;
}
.btn-outline-primary {
color: var(--sbd-accent) !important;
border-color: var(--sbd-accent) !important;
background-color: transparent !important;
}
.btn-outline-primary:hover {
color: var(--sbd-on-accent) !important;
background-color: var(--sbd-accent) !important;
border-color: var(--sbd-accent) !important;
}
/* MDB applique aux boutons outline une bordure de 2px au repos, mais
custom-style la repasse à 1px au survol/focus (shorthand `border: 1px`),
ce qui rétrécit le bouton et décale les éléments voisins. On fige la
largeur de bordure sur tous les états interactifs. */
[class*="btn-outline-"]:hover,
[class*="btn-outline-"]:focus,
[class*="btn-outline-"]:active {
border-width: .125rem !important;
}
.btn-primary-soft {
color: var(--sbd-accent) !important;
background-color: var(--sbd-accent-soft) !important;
}
.btn-primary-soft:hover {
color: var(--sbd-on-accent) !important;
background-color: var(--sbd-accent) !important;
}
.btn-outline-secondary {
color: var(--sbd-text-secondary) !important;
border-color: var(--sbd-border) !important;
background-color: transparent !important;
}
.btn-light,
.btn-outline-light {
color: var(--sbd-text-secondary) !important;
border-color: var(--sbd-border) !important;
background-color: var(--sbd-bg-glass) !important;
}
.btn-light:hover,
.btn-outline-light:hover {
color: var(--sbd-text) !important;
border-color: var(--sbd-border-hover) !important;
background-color: var(--sbd-accent-softer) !important;
}
.btn-link {
color: var(--sbd-accent) !important;
}
.btn-link:hover {
color: var(--sbd-accent-hover) !important;
background-color: transparent !important;
}
.btn:active,
.btn:focus {
border-color: var(--sbd-accent) !important;
}
.btn.w-100 {
min-width: 0 !important;
}
.content-header .btn {
color: var(--sbd-text-muted) !important;
border-color: transparent !important;
}
.content-header .btn:hover {
color: var(--sbd-accent) !important;
}
.content-header .btn a {
color: inherit !important;
}
.bg-google {
background-color: var(--sbd-bg-glass) !important;
border: 1px solid var(--sbd-border) !important;
color: var(--sbd-text) !important;
}
.bg-google:hover {
background-color: var(--sbd-accent-softer) !important;
border-color: var(--sbd-border-hover) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 13. FORM INPUTS ║
╚════════════════════════════════════════════════════════════════════════╝ */
.form-control,
.form-select {
background-color: var(--sbd-bg-glass) !important;
border: 1px solid var(--sbd-border) !important;
color: var(--sbd-text) !important;
}
.form-control:focus,
.form-select:focus {
background-color: var(--sbd-bg-surface) !important;
border-color: var(--sbd-accent) !important;
color: var(--sbd-text) !important;
box-shadow: 0 0 0 0.2rem var(--sbd-accent-soft) !important;
}
.form-control::placeholder {
color: var(--sbd-text-muted) !important;
}
.input-group-text {
background-color: var(--sbd-bg-glass) !important;
border: 1px solid var(--sbd-border) !important;
color: var(--sbd-text-muted) !important;
}
.bg-light,
.form-control.bg-light,
.input-group-text.bg-light {
background-color: var(--sbd-bg-glass) !important;
}
.form-label,
.col-form-label,
label,
legend {
color: var(--sbd-text-secondary) !important;
}
.form-check-input {
background-color: var(--sbd-bg-glass) !important;
border-color: var(--sbd-border) !important;
}
.form-check-input:checked {
background-color: var(--sbd-accent) !important;
border-color: var(--sbd-accent) !important;
}
/* Switch MDB : le pouce (::after) restait au bleu MDB #1266f1 codé en dur —
la seule règle qui « faisait ressurgir le bleu » sur tous les toggles de la
plateforme. On l'aligne sur l'accent de charte (portée globale, tous modes). */
.form-switch .form-check-input:checked:after {
background-color: var(--sbd-accent) !important;
}
.form-check-input:focus {
border-color: var(--sbd-accent) !important;
box-shadow: 0 0 0 0.2rem var(--sbd-accent-soft) !important;
}
.form-check-label {
color: var(--sbd-text-secondary) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 14. FIELD COMPONENTS ║
╚════════════════════════════════════════════════════════════════════════╝ */
.field .input {
background: var(--sbd-bg-glass) !important;
color: var(--sbd-text) !important;
}
.field .input[contenteditable="true"][placeholder]:empty:before {
color: var(--sbd-text-muted) !important;
}
.field.select select {
background: var(--sbd-bg-glass) !important;
color: var(--sbd-text) !important;
}
.field.multiplechoice .input .option {
color: var(--sbd-text-secondary) !important;
border-color: var(--sbd-border) !important;
}
.field.multiplechoice .input .option:hover,
.field.multiplechoice .input .option.selected {
background: var(--sbd-accent-soft) !important;
color: var(--sbd-accent) !important;
border-color: var(--sbd-accent) !important;
}
@media (hover: none) {
.field.multiplechoice .input .option:hover {
background: transparent !important;
}
.field.multiplechoice .input .option.selected {
background: var(--sbd-accent-soft) !important;
}
}
.sbd-form .field label {
background: var(--sbd-bg-deep) !important;
color: var(--sbd-accent) !important;
}
.sbd-form .field input {
color: var(--sbd-text) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 15. TABLES ║
╚════════════════════════════════════════════════════════════════════════╝ */
table {
color: var(--sbd-text-secondary) !important;
}
table th {
color: var(--sbd-text) !important;
background-color: var(--sbd-bg-surface) !important;
}
table td {
border-color: var(--sbd-border) !important;
}
tbody tr:nth-child(odd) {
background-color: var(--sbd-bg-glass) !important;
}
tbody tr:nth-child(even) {
background-color: transparent !important;
}
tbody tr:hover {
background-color: var(--sbd-accent-softer) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 16. CATEGORIES, COURSES, FILTERS ║
╚════════════════════════════════════════════════════════════════════════╝ */
#categories .category .cover,
#courses .course .cover,
.courses-category-list .course .cover,
.courses-category-grid .course .cover {
background-color: var(--sbd-bg-glass) !important;
}
#categories .category .details {
background: var(--sbd-bg-surface) !important;
color: var(--sbd-text) !important;
}
#categories .category .description {
color: var(--sbd-text-muted) !important;
}
#courses .course .title,
.courses-category-list .course .title,
.courses-category-grid .course .title {
background: var(--sbd-bg-surface) !important;
color: var(--sbd-text) !important;
}
#courses .course .title a,
.courses-category-list .course .title a,
.courses-category-grid .course .title a {
color: var(--sbd-text) !important;
}
.courses-category-list .course,
.courses-category-grid .course {
background: var(--sbd-bg-surface) !important;
box-shadow: var(--sbd-shadow-sm) !important;
}
.courses-category-list .course:hover,
.courses-category-grid .course:hover {
box-shadow: var(--sbd-shadow-md) !important;
}
.filters {
background: var(--sbd-bg-surface) !important;
border-color: var(--sbd-border) !important;
}
.filters .option {
color: var(--sbd-text-secondary) !important;
}
.filters .option.selected {
background: var(--sbd-accent-soft) !important;
color: var(--sbd-accent) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 17. RESOURCE ITEMS ║
╚════════════════════════════════════════════════════════════════════════╝ */
.sbd-ressource .infos {
color: var(--sbd-text-secondary) !important;
}
.sbd-ressource .title {
color: var(--sbd-text) !important;
}
.sbd-ressource .description {
color: var(--sbd-text-muted) !important;
}
.layout-ressource .ressource-details {
background: var(--sbd-bg-surface) !important;
border: 1px solid var(--sbd-border) !important;
}
.layout-ressource .ressource-thumb {
background: var(--sbd-bg-glass) !important;
}
.sbd-links-list .link {
color: var(--sbd-text-secondary) !important;
}
.sbd-toc {
border-color: var(--sbd-border) !important;
color: var(--sbd-text-secondary) !important;
}
.sbd-toc li.selected {
color: var(--sbd-accent) !important;
}
.sbd-session .number {
border-right-color: var(--sbd-border) !important;
color: var(--sbd-text-muted) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 18. CHATBOT ║
╚════════════════════════════════════════════════════════════════════════╝ */
.user-message {
background-color: var(--sbd-chat-user-bg) !important;
color: var(--sbd-chat-user-text) !important;
box-shadow: var(--sbd-chat-user-shadow) !important;
}
.user-message small.text-muted {
color: var(--sbd-chat-user-muted) !important;
}
.bot-message {
color: var(--sbd-text-secondary) !important;
}
.bot-message pre {
background: var(--sbd-bg-elevated) !important;
border: 1px solid var(--sbd-border) !important;
color: var(--sbd-text) !important;
}
.bot-message code {
background: var(--sbd-bg-glass) !important;
color: var(--sbd-chat-code-color) !important;
}
.bot-message a {
color: var(--sbd-accent) !important;
}
/* Titres du markdown rendu dans les réponses du bot (pages Agent IA / JAM.IA).
On cible la BALISE et non la classe `chat-heading-*` : le sanitiseur
(html-sanitizer.js) reconstruit chaque élément sans recopier les attributs,
donc la classe ajoutée par le renderer de chat.js est retirée avant insertion
dans le DOM. Sans ce ciblage par balise, les `` reprenaient la taille brute
du thème/Bootstrap (~2rem), bien trop grosse. Échelle alignée sur la bulle. */
.bot-message :is(h1, h2, h3, h4, h5, h6) {
font-weight: 600;
margin-top: 1rem;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.bot-message h1 { font-size: 1.35rem; }
.bot-message h2 { font-size: 1.15rem; }
.bot-message h3 { font-size: 1.05rem; }
.bot-message h4 { font-size: 1rem; }
.bot-message h5 { font-size: 0.95rem; }
.bot-message h6 { font-size: 0.9rem; }
.discussion-item {
color: var(--sbd-text-secondary) !important;
position: relative;
}
.discussion-item:hover,
.discussion-item.active {
background-color: var(--sbd-chat-disc-hover-bg) !important;
border-color: var(--sbd-chat-disc-hover-border) !important;
}
.discussion-item-title {
color: var(--sbd-text) !important;
/* Réserve la place des boutons d'action et tronque proprement, y compris
quand la discussion est active (sinon le titre s'étend sous les boutons).
Renforcé ici car theme.css est chargé après custom-style.css. */
padding-right: 56px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.discussion-item-meta {
color: var(--sbd-text-muted) !important;
}
.discussion-item-actions {
position: absolute;
top: 25%;
right: 8px;
transform: translateY(-50%);
display: flex;
gap: 2px;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
/* Fond identique à l'élément survolé/actif : les boutons recouvrent
proprement la fin du titre au lieu de flotter par-dessus le texte. */
padding-left: 6px;
border-radius: 6px;
background-color: var(--sbd-chat-disc-hover-bg);
}
.discussion-item:hover .discussion-item-actions {
opacity: 1;
pointer-events: auto;
}
/* Pendant le renommage (classe posée par chat.js), les boutons recouvriraient
la fin du champ (position:absolute + fond opaque) : on les masque pour que
l'input plein largeur reste entièrement lisible. Doit rester APRÈS la règle
:hover ci-dessus (même spécificité, l'ordre tranche) ; gagne aussi sur le
forçage mobile en fin de fichier (spécificité supérieure). */
.discussion-item.renaming .discussion-item-actions {
opacity: 0;
pointer-events: none;
}
.discussion-action-btn {
background: none;
border: none;
padding: 4px;
cursor: pointer;
border-radius: 4px;
color: var(--sbd-text-muted);
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s ease, background-color 0.15s ease;
}
.discussion-action-btn:hover {
color: var(--sbd-text);
background-color: var(--sbd-bg-glass);
}
.discussion-action-btn.delete:hover {
color: var(--sbd-alert-danger-text);
background-color: var(--sbd-alert-danger-bg);
}
.discussion-item-title-input {
background: transparent;
border: 1px solid var(--sbd-border);
border-radius: 4px;
color: var(--sbd-text);
font-size: inherit;
font-family: inherit;
width: 100%;
padding: 0 2px;
outline: none;
}
.discussion-item-title-input:focus {
border-color: var(--sbd-accent);
}
@media (max-width: 768px) {
.discussion-item-actions {
opacity: 1;
pointer-events: auto;
}
}
#message-input {
color: var(--sbd-text) !important;
background:none !important;
border:none !important;
}
#chat-history-sidebar {
background: var(--sbd-bg-surface) !important;
border-right: 1px solid var(--sbd-border) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 19. ALERTS ║
╚════════════════════════════════════════════════════════════════════════╝ */
.alert-danger {
background-color: var(--sbd-alert-danger-bg) !important;
border-color: var(--sbd-alert-danger-border) !important;
color: var(--sbd-alert-danger-text) !important;
}
.alert-success {
background-color: var(--sbd-alert-success-bg) !important;
border-color: var(--sbd-alert-success-border) !important;
color: var(--sbd-alert-success-text) !important;
}
.alert-warning {
background-color: var(--sbd-alert-warning-bg) !important;
border-color: var(--sbd-alert-warning-border) !important;
color: var(--sbd-alert-warning-text) !important;
}
.alert-info {
background-color: var(--sbd-alert-info-bg) !important;
border-color: var(--sbd-alert-info-border) !important;
color: var(--sbd-alert-info-text) !important;
}
.alert-primary {
background-color: var(--sbd-accent-soft) !important;
border-color: var(--sbd-accent-glow) !important;
color: var(--sbd-accent) !important;
}
.alert-light {
background-color: var(--sbd-bg-glass) !important;
border-color: var(--sbd-border) !important;
color: var(--sbd-text-secondary) !important;
}
/* Tuiles de statistiques (ex. admin Formations : Total / Actifs / Inactifs).
Le chiffre était colorié dans la même teinte que le fond pâle de la tuile
(vert sur vert, jaune sur jaune) → illisible. On réutilise les couleurs de
texte des alertes, calibrées pour rester contrastées sur un fond teinté en
clair comme en sombre. */
.stat-tile-primary .stat-tile-value {
color: var(--sbd-accent) !important;
}
.stat-tile-success .stat-tile-value {
color: var(--sbd-alert-success-text) !important;
}
.stat-tile-warning .stat-tile-value {
color: var(--sbd-alert-warning-text) !important;
}
.flash-message {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Croix de fermeture lisible sur fond sombre (thème par défaut). */
[data-theme="dark"] .flash-message .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* Message « profil incomplet » au login : suit la charte (beige en clair,
foncé en sombre, bordure chaude) plutôt qu'un style d'alerte standard. */
.alert-profile {
background-color: var(--sbd-bg-elevated) !important;
border: 1px solid var(--sbd-accent-glow) !important;
color: var(--sbd-text) !important;
}
.alert-profile .alert-link,
.alert-profile a {
color: var(--sbd-accent) !important;
text-decoration: underline;
font-weight: 600;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 20. DIVIDERS ║
╚════════════════════════════════════════════════════════════════════════╝ */
hr {
color: var(--sbd-border) !important;
opacity: 1 !important;
background-color: var(--sbd-border) !important;
}
.position-relative hr + .bg-body {
background-color: var(--sbd-bg-deep) !important;
color: var(--sbd-text-muted) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 21. DROPDOWNS ║
╚════════════════════════════════════════════════════════════════════════╝ */
.dropdown-menu {
background-color: var(--sbd-bg-elevated) !important;
border: 1px solid var(--sbd-border) !important;
box-shadow: var(--sbd-shadow-lg) !important;
}
.dropdown-item {
color: var(--sbd-text-secondary) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--sbd-accent-softer) !important;
color: var(--sbd-text) !important;
}
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--sbd-accent-soft) !important;
color: var(--sbd-accent) !important;
}
.dropdown-divider {
border-color: var(--sbd-border) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 22. MODALS ║
╚════════════════════════════════════════════════════════════════════════╝ */
.modal-content {
background-color: var(--sbd-bg-elevated) !important;
border: 1px solid var(--sbd-border) !important;
color: var(--sbd-text-secondary) !important;
}
.modal-header {
border-bottom-color: var(--sbd-border) !important;
}
.modal-footer {
border-top-color: var(--sbd-border) !important;
}
.modal-header .btn-close,
.btn-close {
filter: var(--sbd-close-btn-filter);
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 23. LISTS ║
╚════════════════════════════════════════════════════════════════════════╝ */
.list-group-item {
background-color: var(--sbd-bg-surface) !important;
border-color: var(--sbd-border) !important;
color: var(--sbd-text-secondary) !important;
}
.list-group-item.active {
background-color: var(--sbd-accent) !important;
border-color: var(--sbd-accent) !important;
color: var(--sbd-on-accent) !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
background-color: var(--sbd-accent-softer) !important;
color: var(--sbd-text) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 24. PAGINATION ║
╚════════════════════════════════════════════════════════════════════════╝ */
.page-link {
background-color: var(--sbd-bg-surface) !important;
border-color: var(--sbd-border) !important;
color: var(--sbd-text-secondary) !important;
}
.page-link:hover {
background-color: var(--sbd-accent-soft) !important;
border-color: var(--sbd-accent) !important;
color: var(--sbd-accent) !important;
}
.page-item.active .page-link {
background-color: var(--sbd-accent) !important;
border-color: var(--sbd-accent) !important;
color: var(--sbd-on-accent) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 25. BREADCRUMBS ║
╚════════════════════════════════════════════════════════════════════════╝ */
.breadcrumb {
background-color: transparent !important;
}
.breadcrumb-item a {
color: var(--sbd-text-muted) !important;
}
.breadcrumb-item a:hover {
color: var(--sbd-accent) !important;
}
.breadcrumb-item.active {
color: var(--sbd-text-secondary) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
color: var(--sbd-text-faint) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 26. NAV TABS & PILLS ║
╚════════════════════════════════════════════════════════════════════════╝ */
.nav-tabs {
border-bottom-color: var(--sbd-border) !important;
}
.nav-tabs .nav-link {
color: var(--sbd-text-muted) !important;
}
.nav-tabs .nav-link:hover {
border-color: var(--sbd-border) !important;
color: var(--sbd-text) !important;
}
.nav-tabs .nav-link.active {
background-color: var(--sbd-bg-surface) !important;
border-color: var(--sbd-border) !important;
border-bottom-color: var(--sbd-bg-surface) !important;
color: var(--sbd-accent) !important;
}
.nav-pills .nav-link {
color: var(--sbd-text-secondary) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
background-color: var(--sbd-accent) !important;
color: var(--sbd-on-accent) !important;
}
.nav-pills.nav-pill-soft .nav-link {
color: var(--sbd-accent) !important;
background-color: var(--sbd-accent-soft) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 27. ACCORDION ║
╚════════════════════════════════════════════════════════════════════════╝ */
.accordion-item {
background-color: var(--sbd-bg-surface) !important;
border-color: var(--sbd-border) !important;
}
.accordion-button {
background-color: var(--sbd-bg-surface) !important;
color: var(--sbd-text) !important;
}
.accordion-button:not(.collapsed) {
background-color: var(--sbd-accent-soft) !important;
color: var(--sbd-accent) !important;
}
.accordion-body {
background-color: var(--sbd-bg-surface) !important;
color: var(--sbd-text-secondary) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 28. BADGES ║
╚════════════════════════════════════════════════════════════════════════╝ */
.badge.bg-primary {
background-color: var(--sbd-accent) !important;
color: var(--sbd-on-accent) !important;
}
.badge.bg-light,
.badge.bg-secondary {
background-color: var(--sbd-bg-glass) !important;
border: 1px solid var(--sbd-border);
color: var(--sbd-text-secondary) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 29. SCROLLBAR ║
╚════════════════════════════════════════════════════════════════════════╝ */
::-webkit-scrollbar-track {
background: var(--sbd-scrollbar-track) !important;
}
::-webkit-scrollbar-thumb {
background: var(--sbd-scrollbar-thumb) !important;
border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
background: var(--sbd-scrollbar-thumb-hover) !important;
}
#sidebar::-webkit-scrollbar-thumb {
background: var(--sbd-scrollbar-thumb) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 30. MISC BOOTSTRAP UTILITIES ║
╚════════════════════════════════════════════════════════════════════════╝ */
.bg-light {
background-color: var(--sbd-bg-glass) !important;
}
.bg-body {
background-color: var(--sbd-bg-deep) !important;
}
.bg-white {
background-color: var(--sbd-bg-surface) !important;
}
::selection {
background: color-mix(in srgb, var(--sbd-accent) 65%, var(--sbd-on-accent));
color: var(--sbd-on-accent);
}
:focus-visible {
outline-color: var(--sbd-accent) !important;
}
.tooltip-inner {
background-color: var(--sbd-bg-elevated) !important;
border: 1px solid var(--sbd-border);
color: var(--sbd-text) !important;
}
.back-top {
color: var(--sbd-accent) !important;
background-color: var(--sbd-accent-soft) !important;
}
.back-top:hover {
background: var(--sbd-accent) !important;
color: var(--sbd-on-accent) !important;
}
.spinner-border {
color: var(--sbd-accent) !important;
}
.progress {
background-color: var(--sbd-bg-glass) !important;
}
.fill-primary {
fill: var(--sbd-accent) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 31. MOBILE BOTTOM NAVBAR ║
╚════════════════════════════════════════════════════════════════════════╝ */
#mobile-navbar {
background: var(--sbd-bg-surface) !important;
border-top: 1px solid var(--sbd-border) !important;
/* Au-dessus du sidenav MDB (z-index 1035) et de son backdrop (1034) */
z-index: 10000 !important;
}
#mobile-navbar .mobile-link {
color: var(--sbd-text-muted) !important;
}
#mobile-navbar .mobile-link:hover,
#mobile-navbar .mobile-link.active,
#mobile-navbar .mobile-link.is-open {
color: var(--sbd-accent) !important;
}
#mobile-navbar .mobile-link .icon-play {
color: var(--sbd-text-muted) !important;
}
/* Bouton "Autres" : icône burger ↔ croix */
#mobile-navbar .mobile-link-button {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
line-height: 1;
}
#mobile-navbar .mobile-link-icon-wrap {
display: inline-grid;
grid-template-columns: 1fr;
line-height: 1;
}
#mobile-navbar .mobile-link-icon-wrap > i {
grid-column: 1;
grid-row: 1;
transition: opacity 0.2s ease, transform 0.2s ease;
}
#mobile-navbar .mobile-link-icon-bars {
opacity: 1;
transform: rotate(0deg);
}
#mobile-navbar .mobile-link-icon-close {
opacity: 0;
transform: rotate(-90deg);
}
#mobile-navbar .mobile-link.is-open .mobile-link-icon-bars {
opacity: 0;
transform: rotate(90deg);
}
#mobile-navbar .mobile-link.is-open .mobile-link-icon-close {
opacity: 1;
transform: rotate(0deg);
}
/* Bouton "Autres" : libellé Autres ↔ Fermer */
#mobile-navbar .mobile-link-label-close {
display: none;
}
#mobile-navbar .mobile-link.is-open .mobile-link-label-open {
display: none;
}
#mobile-navbar .mobile-link.is-open .mobile-link-label-close {
display: inline;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 31bis. MOBILE MENU (plein écran, grille d'icônes) ║
╚════════════════════════════════════════════════════════════════════════╝ */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 9000;
background: var(--sbd-bg-surface);
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.25s ease;
visibility: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
}
.mobile-menu.is-open {
transform: translateY(0);
visibility: visible;
}
body.mobile-menu-open {
overflow: hidden;
}
.mobile-menu-header {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--sbd-border);
}
.mobile-menu-user-info a {
color: var(--sbd-text);
}
.mobile-menu-body {
flex: 1 1 auto;
padding: 1rem;
}
.mobile-menu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.mobile-menu-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.5rem;
padding: 1rem 0.5rem;
border-radius: 12px;
background: var(--sbd-bg-glass);
color: var(--sbd-text);
text-decoration: none;
min-height: 92px;
transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.mobile-menu-item:hover,
.mobile-menu-item:focus,
.mobile-menu-item.active {
background: var(--sbd-accent);
color: var(--sbd-on-accent, #fff);
}
.mobile-menu-item:active {
transform: scale(0.97);
}
.mobile-menu-item-icon {
font-size: 1.5rem;
line-height: 1;
}
.mobile-menu-item-label {
font-size: 0.8125rem;
line-height: 1.1;
}
.mobile-menu-item-danger {
color: var(--sbd-danger, #dc3545);
}
.mobile-menu-item-danger:hover,
.mobile-menu-item-danger:focus {
background: var(--sbd-danger, #dc3545);
color: #fff;
}
.mobile-menu-footer {
padding: 1rem 1.25rem;
border-top: 1px solid var(--sbd-border);
}
@media (min-width: 420px) {
.mobile-menu-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Footer du sidenav — padding aligné avec les sidenav-link, mobile uniquement */
@media (max-width: 1199.98px) {
.sidenav .sidenav-footer {
padding: 1rem 1.5rem;
}
}
.sidenav .sidenav-footer .sbd-theme-switch {
margin-bottom: 1rem;
}
.sidenav .sidenav-footer .sidenav-signature svg {
max-width: 100%;
height: auto;
display: block;
}
/* Sidenav : alignement des items à droite quand ouvert depuis la droite (mobile) */
.sidenav.sidenav-right .sidenav-link {
flex-direction: row-reverse;
text-align: right;
justify-content: flex-start;
}
.sidenav.sidenav-right .sidenav-link i {
margin-right: 0 !important;
margin-left: 0.75rem;
}
.sidenav.sidenav-right #header-content,
.sidenav.sidenav-right .sidenav-footer,
.sidenav.sidenav-right .sidenav-signature,
.sidenav.sidenav-right .sbd-theme-switch {
text-align: right;
}
.sidenav.sidenav-right .sbd-theme-switch {
justify-content: flex-end;
}
.sidenav.sidenav-right .sidenav-user-encart {
text-align: right;
}
.sidenav.sidenav-right .sidenav-user-encart .d-flex {
flex-direction: row-reverse;
}
/* Desktop classique : alignement à gauche du footer */
.sidenav:not(.sidenav-right) .sidenav-footer,
.sidenav:not(.sidenav-right) .sidenav-signature,
.sidenav:not(.sidenav-right) .sbd-theme-switch {
text-align: left;
}
.sidenav:not(.sidenav-right) .sbd-theme-switch {
justify-content: flex-start;
}
/* Lien Déconnexion en rouge dans le sidenav */
.sidenav .sidenav-link.sidenav-link-danger {
color: var(--sbd-danger, #dc3545) !important;
}
.sidenav .sidenav-link.sidenav-link-danger i {
color: var(--sbd-danger, #dc3545) !important;
}
.sidenav .sidenav-link.sidenav-link-danger:hover {
background-color: rgba(220, 53, 69, 0.08) !important;
}
/* Encart utilisateur dans le sidenav (mobile) */
.sidenav-user-encart {
padding-top: 0.25rem;
}
.sidenav-user-encart .h6 {
color: var(--sbd-text) !important;
font-weight: 600;
line-height: 1.2;
}
.sidenav-user-encart .small {
color: var(--sbd-text-muted) !important;
}
.sidenav-user-info {
overflow: hidden;
}
.min-w-0 {
min-width: 0;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 32. MISC ║
╚════════════════════════════════════════════════════════════════════════╝ */
.linked_quiz {
border-color: var(--sbd-border) !important;
color: var(--sbd-text-secondary) !important;
}
.invalid-feedback {
color: var(--sbd-alert-danger-text) !important;
}
.choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
background-color: var(--sbd-accent-soft) !important;
color: var(--sbd-accent) !important;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 33. THEME TOGGLE BUTTON ║
╚════════════════════════════════════════════════════════════════════════╝ */
.sbd-theme-toggle {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--sbd-border);
background: var(--sbd-bg-elevated);
color: var(--sbd-text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: all 0.3s;
box-shadow: var(--sbd-shadow-md);
padding: 0;
line-height: 1;
}
.sbd-theme-toggle:hover {
background: var(--sbd-accent);
color: var(--sbd-on-accent);
border-color: var(--sbd-accent);
transform: scale(1.1);
}
.sbd-theme-toggle:hover .svg-accent-light{
fill: var(--sbd-svg-dark);
}
.sbd-theme-toggle:hover .svg-accent{
fill: var(--sbd-svg-dark);
}
.icon-sun, .icon-moon {
width:50%;
height:50%;
}
/* Icon swap: show moon in light, sun in dark */
.sbd-theme-toggle .icon-sun { display: none; }
.sbd-theme-toggle .icon-moon { display: inline; }
[data-theme="light"] .sbd-theme-toggle .icon-sun { display: inline; }
[data-theme="light"] .sbd-theme-toggle .icon-moon { display: none; }
/* Floating theme toggle is replaced by the profile menu entry — hide it everywhere */
.sbd-theme-toggle {
display: none !important;
}
/* Profile menu theme toggle — show the action (target theme), not the current one */
.sbd-theme-menu-item .sbd-theme-icon-moon,
.sbd-theme-menu-item .sbd-theme-label-dark { display: none !important; }
.sbd-theme-menu-item .sbd-theme-icon-sun,
.sbd-theme-menu-item .sbd-theme-label-light { display: inline !important; }
[data-theme="light"] .sbd-theme-menu-item .sbd-theme-icon-moon,
[data-theme="light"] .sbd-theme-menu-item .sbd-theme-label-dark { display: inline !important; }
[data-theme="light"] .sbd-theme-menu-item .sbd-theme-icon-sun,
[data-theme="light"] .sbd-theme-menu-item .sbd-theme-label-light { display: none !important; }
/* Sidenav theme switch — iOS style */
.sbd-theme-switch {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.sbd-theme-switch i {
font-size: 14px;
color: var(--sbd-text-muted);
line-height: 1;
}
.sbd-switch {
position: relative;
display: inline-block;
cursor: pointer;
margin: 0;
line-height: 1;
}
.sbd-switch input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.sbd-switch-track {
display: inline-block;
width: 44px;
height: 24px;
background-color: var(--sbd-text-secondary);
border: 1px solid var(--sbd-border);
border-radius: 999px;
position: relative;
transition: background-color 0.2s ease, border-color 0.2s ease;
vertical-align: middle;
}
.sbd-switch-thumb {
position: absolute;
top: 50%;
left: 2px;
width: 18px;
height: 18px;
background-color: #fff;
border-radius: 50%;
transform: translateY(-50%);
transition: left 0.2s ease, background-color 0.2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.sbd-switch input:checked + .sbd-switch-track {
background-color: var(--sbd-accent);
border-color: var(--sbd-accent);
}
.sbd-switch input:checked + .sbd-switch-track .sbd-switch-thumb {
left: 22px;
}
.sbd-switch input:focus-visible + .sbd-switch-track {
box-shadow: 0 0 0 3px var(--sbd-accent-soft);
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 34bis. MOBILE HEADER SEARCH ║
╚════════════════════════════════════════════════════════════════════════╝ */
/* Clip the logo SVG so it cannot bleed outside its bounding box */
.navbar-brand-clip {
overflow: hidden;
min-width: 0;
flex: 0 1 auto;
}
.navbar-brand-clip svg {
max-width: 100%;
height: auto;
display: block;
}
.mobile-search-toggle {
background: transparent;
border: none;
color: var(--sbd-text);
cursor: pointer;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
transition: background-color 0.2s ease;
flex-shrink: 0;
}
.mobile-search-toggle:hover,
.mobile-search-toggle:focus-visible {
background-color: var(--sbd-accent-soft);
color: var(--sbd-accent);
outline: none;
}
.mobile-search-overlay {
position: fixed;
inset: 0;
background-color: var(--sbd-bg-surface);
display: flex;
flex-direction: column;
z-index: 1060;
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.mobile-search-overlay.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.mobile-search-topbar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--sbd-accent-soft);
flex-shrink: 0;
}
.mobile-search-back {
background: transparent;
border: none;
color: var(--sbd-text);
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background-color 0.2s ease;
}
.mobile-search-back:hover,
.mobile-search-back:focus-visible {
background-color: var(--sbd-accent-soft);
color: var(--sbd-accent);
outline: none;
}
.mobile-search-topbar .input-group {
flex: 1;
width: auto !important;
margin: 0 !important;
}
.mobile-search-topbar form {
width: 100%;
}
.search-suggestions.is-mobile-overlay {
position: static !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
max-height: none !important;
flex: 1;
overflow-y: auto;
}
.search-clear-btn {
background: transparent;
border: none;
color: var(--sbd-text-muted);
cursor: pointer;
padding: 4px 8px;
display: none;
align-items: center;
justify-content: center;
}
.search-clear-btn.is-visible {
display: inline-flex;
}
.search-clear-btn:hover {
color: var(--sbd-text);
}
/* Hide native browser clear button on type="search" inputs (we use our own) */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
display: none;
width: 0;
height: 0;
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 35. ADDITIONAL CLASSES ║
╚════════════════════════════════════════════════════════════════════════╝ */
/* ╔════════════════════════════════════════════════════════════════════════╗
║ 36. FIX : onglets sombres de /admin/setting (.nav-tabs-bg-dark) ║
╚════════════════════════════════════════════════════════════════════════╝
custom-bootstrap.css fige des couleurs (#fff / #24292d) sur ces onglets qui,
combinées aux règles globales du thème, rendaient les libellés + icônes
illisibles en mode sombre (texte clair sur fond clair). On force un contraste
explicite sur CHAQUE pastille (et pas seulement via le fond du conteneur),
avec une spécificité suffisante (préfixe [data-theme]). */
[data-theme="dark"] .nav-tabs-bg-dark {
background-color: var(--sbd-bg-surface) !important;
}
[data-theme="dark"] .nav-tabs-bg-dark .nav-link,
[data-theme="dark"] .nav-tabs-bg-dark .nav-link i {
color: var(--sbd-text) !important;
background-color: var(--sbd-bg-elevated) !important;
}
[data-theme="dark"] .nav-tabs-bg-dark .nav-link.active,
[data-theme="dark"] .nav-tabs-bg-dark .nav-link.active i {
color: var(--sbd-on-accent) !important;
background-color: var(--sbd-accent) !important;
}
.w-fit {
width: fit-content;
}
.min-height-100vh {
min-height: 100vh;
}