/* =========================================================================
   RoulezJeunesse Backoffice — Refresh visuel
   Aligné sur l'identité du site public (front/src/styles/theme.jsx + constants.jsx).
   Chargé EN DERNIER dans index.html : surcharge Bootstrap 3 / style.css / sb-admin.css
   sans éditer le vendor. AUCUN changement de markup — habillage uniquement.
   ========================================================================= */

/* ---------- Fonts de marque (LTSaeada, titres) ---------- */
@font-face {
  font-family: 'LTSaeada';
  src: url('/fonts/LTSaeada/LTSaeada-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LTSaeada';
  src: url('/fonts/LTSaeada/LTSaeada-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LTSaeada';
  src: url('/fonts/LTSaeada/LTSaeada-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LTSaeada';
  src: url('/fonts/LTSaeada/LTSaeada-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Couleurs de marque */
  --rj-lime: #d5ff4f;          /* signature / primaire */
  --rj-lime-dark: #c2ec38;     /* hover pilule lime */
  --rj-ink: #1D2029;           /* noir texte / surfaces foncées */
  --rj-slate: #31353F;         /* ardoise secondaire */
  --rj-title: #2e414b;         /* couleur de titre */

  --rj-blue: #5a81ff;          /* secondaire : liens, focus, sélection */
  --rj-blue-dark: #164FE1;
  --rj-blue-pale: #EBF1FF;
  --rj-purple: #5b5ff5;
  --rj-purple-light: #9682eb;

  /* Échelle de gris */
  --rj-gray-1: #31353F;
  --rj-gray-2: #5B5E66;
  --rj-gray-3: #83868C;
  --rj-gray-4: #ADAEB2;
  --rj-gray-5: #D2D5D9;
  --rj-gray-6: #F0F3F7;
  --rj-bg: #f6f8fa;            /* fond clair page */

  /* Sémantique */
  --rj-success: #10DA92;
  --rj-warning: #FFD666;
  --rj-danger: #FF3D6B;
  --rj-info: #6666FF;

  /* Rayons */
  --rj-radius-xs: 8px;
  --rj-radius-sm: 12px;
  --rj-radius-md: 16px;
  --rj-radius-pill: 50px;

  /* Ombres douces teintées bleu */
  --rj-shadow-xs: 0px 4px 8px rgba(13, 32, 83, 0.05);
  --rj-shadow-sm: 0px 4px 15px rgba(13, 32, 83, 0.10);
  --rj-shadow-md: 0px 8px 40px rgba(13, 32, 83, 0.07);
  --rj-shadow-lg: 0px 8px 40px rgba(13, 32, 83, 0.10);

  /* Police body moderne */
  --rj-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --rj-font-title: 'LTSaeada', var(--rj-font-body);
}

/* =========================================================================
   1. Base : typographie + fond
   ========================================================================= */
html, body {
  font-family: var(--rj-font-body);
  font-size: 13px;
  background-color: var(--rj-bg);
  color: var(--rj-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5,
.page-header,
.navbar-brand,
.collapse-title {
  font-family: var(--rj-font-title);
  color: var(--rj-title);
  font-weight: 600;
  letter-spacing: -0.2px;
}

.page-header {
  border-bottom: 1px solid var(--rj-gray-6);
  padding-bottom: 12px;
}

a {
  color: var(--rj-blue);
}
a:hover,
a:focus {
  color: var(--rj-blue-dark);
}

/* =========================================================================
   2. Layout : wrapper + zone de contenu
   ========================================================================= */
#page-wrapper {
  background-color: var(--rj-bg);
}

#page-wrapper > .container-fluid {
  background-color: #ffffff;
  border: none;
  border-radius: var(--rj-radius-md);
  box-shadow: var(--rj-shadow-md);
}

/* =========================================================================
   3. Header / topbar (barre fixe haute, ardoise — cohérente avec la sidebar)
   ========================================================================= */
.navbar-inverse.navbar-fixed-top {
  background-color: var(--rj-ink);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--rj-shadow-xs);
}

/* logo de marque (version blanche) dans la barre */
.navbar-brand .navbar-logo {
  height: 22px;
  width: auto;
  vertical-align: middle;
  margin-right: 10px;
}

.navbar-inverse .navbar-brand {
  color: #ffffff;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #ffffff;
}
/* nom de l'admin : discret */
.navbar-inverse .navbar-brand small {
  color: var(--rj-gray-4);
  font-weight: 500;
}
/* badge environnement : discret, sans criard */
.navbar-inverse .navbar-brand big {
  font-size: 11px;
  font-weight: 600;
  color: var(--rj-blue-dark);
  background: var(--rj-blue-pale);
  padding: 2px 9px;
  border-radius: 20px;
  vertical-align: middle;
  margin: 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* hamburger mobile lisible sur fond ardoise */
.navbar-inverse .navbar-toggle {
  border-color: rgba(255, 255, 255, 0.18);
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: rgba(255, 255, 255, 0.06);
}
.navbar-inverse .navbar-toggle .icon-bar {
  background-color: var(--rj-gray-4);
}

/* =========================================================================
   4. Sidebar (ardoise foncée, item actif lime)
   ========================================================================= */
@media (min-width: 768px) {
  .side-nav {
    background-color: var(--rj-ink);
    padding-top: 8px;
  }
}

/* conteneur collapse (mobile) sur fond ardoise, plus de lime */
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  background-color: var(--rj-ink);
  border-color: rgba(255, 255, 255, 0.06);
}

/* items de menu */
.side-nav > li > a,
.navbar-inverse .navbar-nav > li > a {
  color: var(--rj-gray-4);
  font-weight: 500;
  border-radius: var(--rj-radius-sm);
  margin: 2px 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.side-nav > li > a {
  width: auto !important;
}

/* hover doux */
.side-nav li a:hover,
.side-nav li a:focus,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff;
}

/* item actif : pilule lime, texte foncé */
.nav > li.active {
  border-left: none;
  background: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover,
.nav > li.active > a {
  color: var(--rj-ink) !important;
  background-color: var(--rj-lime) !important;
  font-weight: 600;
}
.nav > li.active > a .fa {
  color: var(--rj-ink);
}

/* sous-menus (activeonly) sur fond ardoise */
.side-nav > li > ul > li > a {
  color: var(--rj-gray-4);
  padding-left: 46px;
  border-radius: var(--rj-radius-xs);
  margin: 1px 10px;
}
.side-nav > li > ul > li > a:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
}

/* =========================================================================
   5. Boutons : pilules
   ========================================================================= */
.btn {
  border-radius: var(--rj-radius-pill);
  font-weight: 600;
  padding: 10px 22px;
  border-width: 1px;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-lg {
  padding: 16px 30px;
}
.btn-sm {
  padding: 7px 16px;
}
.btn-xs {
  padding: 4px 12px;
}

/* primaire = lime + texte foncé */
.btn-primary,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary[disabled]:hover {
  background-color: var(--rj-lime);
  border-color: var(--rj-lime);
  color: var(--rj-ink);
}
.btn-primary:hover {
  background-color: var(--rj-lime-dark);
  border-color: var(--rj-lime-dark);
  color: var(--rj-ink);
}

/* secondaire neutre */
.btn-default {
  background-color: #ffffff;
  border-color: var(--rj-gray-5);
  color: var(--rj-gray-2);
}
.btn-default:hover,
.btn-default:focus {
  background-color: var(--rj-gray-6);
  border-color: var(--rj-gray-4);
  color: var(--rj-ink);
}

/* info / lien bleu */
.btn-info {
  background-color: var(--rj-blue);
  border-color: var(--rj-blue);
  color: #fff;
}
.btn-info:hover,
.btn-info:focus {
  background-color: var(--rj-blue-dark);
  border-color: var(--rj-blue-dark);
  color: #fff;
}

/* succès */
.btn-success {
  background-color: var(--rj-success);
  border-color: var(--rj-success);
  color: #053d2b;
}
.btn-success:hover,
.btn-success:focus {
  background-color: #0db97c;
  border-color: #0db97c;
  color: #053d2b;
}

/* danger */
.btn-danger {
  background-color: var(--rj-danger);
  border-color: var(--rj-danger);
  color: #fff;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: #e92e5b;
  border-color: #e92e5b;
  color: #fff;
}

/* warning */
.btn-warning {
  background-color: var(--rj-warning);
  border-color: var(--rj-warning);
  color: #6b5500;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: #f5c93f;
  border-color: #f5c93f;
  color: #6b5500;
}

.btn-link {
  color: var(--rj-blue);
  border-radius: var(--rj-radius-pill);
}
.btn-link:hover {
  color: var(--rj-blue-dark);
}

/* =========================================================================
   6. Formulaires : inputs / selects uniformes, focus bleu
   ========================================================================= */
.form-control {
  border-radius: var(--rj-radius-sm);
  border-color: var(--rj-gray-5);
  height: 40px;
  box-shadow: none;
  color: var(--rj-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea.form-control {
  height: auto;
}
.form-control:focus {
  border-color: var(--rj-blue);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(90, 129, 255, 0.18);
}
.input-group-addon {
  border-radius: var(--rj-radius-sm);
  border-color: var(--rj-gray-5);
  background-color: var(--rj-gray-6);
  color: var(--rj-gray-2);
}

/* =========================================================================
   7. Cards / panels
   ========================================================================= */
.card,
.bcard,
.PBCard,
.DayCard {
  border: none;
  border-radius: var(--rj-radius-md);
  box-shadow: var(--rj-shadow-md);
  background-color: #ffffff;
}
.bcard {
  padding: 28px;
}

.panel {
  border: none;
  border-radius: var(--rj-radius-md);
  box-shadow: var(--rj-shadow-md);
  overflow: hidden;
}
.panel-default > .panel-heading {
  background-color: #ffffff;
  border-bottom: 0.5px solid var(--rj-gray-6);
  color: var(--rj-title);
  font-weight: 600;
}

/* chiffre "huge" du dashboard : hiérarchisé */
.huge {
  font-weight: 600;
  color: var(--rj-ink);
  font-family: var(--rj-font-title);
}

.collapse-title {
  background-color: var(--rj-gray-6);
  border: none;
  border-radius: var(--rj-radius-sm);
  color: var(--rj-title);
}

/* =========================================================================
   8. Tableaux : aérés, header léger, hover de ligne
   ========================================================================= */
.table > thead > tr > th {
  background-color: var(--rj-gray-6);
  color: var(--rj-gray-3);
  font-weight: 600;
  font-size: 0.92em;
  border-bottom: none;
  text-transform: none;
  padding: 10px 12px;
}
.table > tbody > tr > td {
  padding: 11px 12px;
  border-top: 0.5px solid var(--rj-gray-6);
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #fafbfc;
}
.table-hover > tbody > tr:hover {
  background-color: var(--rj-blue-pale);
}
.table a {
  color: var(--rj-blue);
  font-weight: 500;
}

/* =========================================================================
   9. Badges / labels : pilules sémantiques
   ========================================================================= */
.label {
  font-size: 85%;
  font-weight: 600;
  padding: 0.3em 0.7em;
  border-radius: 20px;
}

/* "jaune" : on retire le fluo -> warning lisible */
.label-jaune {
  background-color: #FFF7DE;
  color: #8a6d00;
}
.label-vert {
  background-color: #D7FCE5;
  color: #0b7a52;
}
.label-orange {
  background-color: #FFE9DF;
  color: #b85c12;
}
.label-bleu {
  background-color: var(--rj-blue-pale);
  color: var(--rj-blue-dark);
}

/* badges Bootstrap standards alignés */
.label-default { background-color: var(--rj-gray-5); color: var(--rj-gray-1); }
.label-primary { background-color: var(--rj-lime); color: var(--rj-ink); }
.label-success { background-color: #D7FCE5; color: #0b7a52; }
.label-info    { background-color: var(--rj-blue-pale); color: var(--rj-blue-dark); }
.label-warning { background-color: #FFF7DE; color: #8a6d00; }
.label-danger  { background-color: #FFE9EF; color: #c41746; }

.badge {
  background-color: var(--rj-gray-2);
  border-radius: 20px;
  font-weight: 600;
}

/* badges menu (compteurs courses) lisibles sur ardoise */
.side-nav .label-jaune {
  background-color: var(--rj-warning);
  color: #6b5500;
}
.side-nav .label-vert {
  background-color: var(--rj-success);
  color: #053d2b;
}

/* =========================================================================
   10. Alertes
   ========================================================================= */
.alert {
  border: none;
  border-radius: var(--rj-radius-sm);
}
.alert-success { background-color: #D7FCE5; color: #0b7a52; }
.alert-info    { background-color: var(--rj-blue-pale); color: var(--rj-blue-dark); }
.alert-warning { background-color: #FFF7DE; color: #8a6d00; }
.alert-danger  { background-color: #FFE9EF; color: #c41746; }

/* =========================================================================
   11. Helpers de couleur (cohérence avec la nouvelle palette)
   ========================================================================= */
.text-danger { color: var(--rj-danger) !important; }
.text-primary { color: var(--rj-blue) !important; }
.verttext { color: var(--rj-success); }
.btn-primary .fa,
.label .fa { color: inherit; }

/* DayCard : accent bas en lime au lieu du teal */
.DayCard {
  border-bottom: 3px solid var(--rj-lime) !important;
}

/* PBCard : barre latérale -> palette sémantique */
.PBCard::before { background-color: var(--rj-warning); }
.PBCard.done::before { background-color: var(--rj-success); }
.PBCard.cancelled::before { background-color: var(--rj-danger); }

/* =========================================================================
   12. Modales
   ========================================================================= */
.modal-content {
  border: none;
  border-radius: var(--rj-radius-md);
  box-shadow: var(--rj-shadow-lg);
}
.modal-header {
  border-bottom: 0.5px solid var(--rj-gray-6);
}
.modal-header .modal-title {
  font-family: var(--rj-font-title);
  color: var(--rj-title);
  font-weight: 600;
}
.modal-footer {
  border-top: 0.5px solid var(--rj-gray-6);
}

/* =========================================================================
   13. Calendrier (react-big-calendar) : touches de marque légères
   ========================================================================= */
.rbc-today {
  background-color: rgba(213, 255, 79, 0.14);
}
.rbc-toolbar button.rbc-active,
.rbc-toolbar button.rbc-active:hover,
.rbc-toolbar button.rbc-active:focus {
  background-color: var(--rj-lime);
  border-color: var(--rj-lime);
  color: var(--rj-ink);
}
.rbc-toolbar button {
  border-radius: var(--rj-radius-pill);
}

/* =========================================================================
   15. Page Course (fiche détail) — redesign "sections en cartes" (variant A)
   La colonne gauche (long formulaire à plat) est groupée en cartes titrées ;
   le bouton Enregistrer devient une barre collante. Habillage uniquement :
   wrappers <div> ajoutés autour du markup existant, aucune logique touchée.
   ========================================================================= */
.course-card {
  background: #ffffff;
  border-radius: var(--rj-radius-md);
  box-shadow: var(--rj-shadow-md);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.course-card-title {
  font-family: var(--rj-font-title);
  font-size: 14px;
  font-weight: 600;
  color: var(--rj-title);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--rj-gray-6);
}
/* les libellés de champs dans une carte : discrets et homogènes */
.course-card label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: var(--rj-gray-3);
  margin-bottom: 4px;
}

/* Barre Enregistrer collante en bas de la colonne */
.course-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: #ffffff;
  border-radius: var(--rj-radius-md);
  box-shadow: 0px -6px 20px rgba(13, 32, 83, 0.06);
  border: 0.5px solid var(--rj-gray-6);
  padding: 12px 16px;
  margin-bottom: 16px;
  text-align: right;
}
.course-save-bar .save-btn { min-width: 160px; }

/* Densité : compacter les cartes pour réduire la hauteur (Course) */
.course-card {
  padding: 14px 16px;
  margin-bottom: 12px;
}
.course-card-title {
  margin-bottom: 10px;
  padding-bottom: 6px;
}
.course-card .form-group {
  margin-bottom: 10px;
}
.course-card label {
  margin-bottom: 2px;
  line-height: 1.2;
}
/* champs plus courts — inputs/selects uniquement, jamais les textarea */
.course-card input.form-control,
.course-card select.form-control {
  height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
}
/* le toggle CTags / badges en tête de carte : moins d'air autour */
.course-card .form-group:first-of-type {
  margin-bottom: 8px;
}

/* =========================================================================
   14. Page Courses — redesign "KPI tiles + calm" (variant A)
   Habillage de la page liste : barre du jour, tuiles KPI, détail repliable,
   toolbar de filtres. Aucune logique touchée.
   ========================================================================= */
.courses-stats { margin-bottom: 16px; }

/* Bandeau du jour condensé : calendrier déplié à gauche, en-tête + tuiles KPI
   recasés à droite pour combler l'espace mort et réduire la hauteur. */
.courses-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}
.courses-head-cal { flex-shrink: 0; }
.courses-head-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  align-self: stretch;
}
/* Ligne d'en-tête : titre à gauche, total CA + scope poussés à droite */
.courses-dayhead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
/* Les tuiles remplissent la hauteur du calendrier (3 colonnes × 2 lignes) */
.courses-head-main .kpi-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  flex: 1;
  margin-bottom: 0;
}
.courses-head-main .kpi-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Sous ~960px : on repasse en pile (calendrier au-dessus) */
@media (max-width: 960px) {
  .courses-head { grid-template-columns: 1fr; }
  .courses-head-main .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.courses-daybar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.courses-datechip {
  background: #fff;
  border: 1px solid var(--rj-gray-5);
  border-radius: var(--rj-radius-pill);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rj-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}
.courses-datechip .fa { color: var(--rj-blue); }

/* Navigation jour : flèches ‹ › encadrant le chip de date, calendrier déplié dessous */
.courses-datenav {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.courses-datenav-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.courses-datenav-arrow {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--rj-gray-5);
  border-radius: 50%;
  color: var(--rj-gray-2);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.courses-datenav-arrow:hover {
  border-color: var(--rj-blue);
  color: var(--rj-blue);
}
.courses-datenav-arrow:focus {
  outline: 0;
  border-color: var(--rj-blue);
  box-shadow: 0 0 0 3px rgba(90, 129, 255, 0.18);
}

/* Calendrier déplié : centré sous la ligne flèches + date, à sa taille
   naturelle pour remplir la largeur de la colonne. */
.courses-datecal { align-self: center; }
.courses-datecal .react-datepicker__header { padding-top: 8px; }

.courses-daybar-title {
  font-family: var(--rj-font-title);
  font-size: 16px;
  font-weight: 600;
  color: var(--rj-title);
}
.courses-daybar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.courses-total { text-align: right; }
.courses-total-val {
  display: block;
  font-family: var(--rj-font-title);
  font-size: 22px;
  font-weight: 600;
  color: var(--rj-ink);
  line-height: 1.1;
}
.courses-total-lbl {
  font-size: 11px;
  color: var(--rj-gray-3);
}
.courses-scope {
  font-size: 11px;
  color: var(--rj-gray-3);
  padding: 4px 10px;
  border: 1px solid var(--rj-gray-6);
  border-radius: var(--rj-radius-pill);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 1200px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-tile {
  background: #fff;
  border-radius: var(--rj-radius-md);
  padding: 14px 16px;
  box-shadow: var(--rj-shadow-md);
}
.kpi-tile.accent { border-left: 3px solid var(--rj-blue); }
.kpi-label {
  font-size: 10px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--rj-gray-3);
  margin-bottom: 6px;
}
.kpi-value {
  font-family: var(--rj-font-title);
  font-size: 26px;
  font-weight: 600;
  color: var(--rj-ink);
  line-height: 1;
}
.kpi-value .unit { font-size: 15px; font-weight: 600; }
.kpi-message {
  background: #fff;
  border-radius: var(--rj-radius-md);
  box-shadow: var(--rj-shadow-md);
  padding: 18px 20px;
  font-size: 13px;
  color: var(--rj-gray-2);
}

.day-details-bar { margin-bottom: 12px; }
.day-details-toggle {
  cursor: pointer;
  color: var(--rj-blue);
  font-weight: 500;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.day-details-toggle:hover { color: var(--rj-blue-dark); }
.day-details {
  background: #fff;
  border-radius: var(--rj-radius-md);
  box-shadow: var(--rj-shadow-md);
  padding: 16px 18px;
  margin-bottom: 4px;
}
.day-details-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.day-details-col { flex: 1; min-width: 180px; }
.day-details-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--rj-gray-3);
  margin-bottom: 8px;
}
.day-details-row { display: flex; gap: 12px; margin-bottom: 6px; }
.day-details-metric { flex: 1; }
.day-details-metric .v { font-size: 16px; font-weight: 600; color: var(--rj-ink); }
.day-details-metric .l { font-size: 11px; color: var(--rj-gray-2); }

/* Toolbar de filtres */
.courses-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.courses-toolbar .form-control,
.courses-toolbar select.form-control {
  width: auto;
  display: inline-block;
}
.courses-toolbar .form-group { margin-bottom: 0; margin-left: 0; }
.courses-toolbar-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--rj-gray-5);
  border-radius: var(--rj-radius-sm);
  padding: 0 12px;
  height: 40px;
}
.courses-toolbar-check input { margin: 0; }
.courses-toolbar-check label { margin: 0; font-weight: 500; color: var(--rj-gray-2); }

/* ==========================================================================
   react-datepicker — restylage global sur la marque RJ
   Sélecteurs descendants de .react-datepicker pour gagner par spécificité
   (0,2,0) sur les défauts de la lib (0,1,0), indépendamment de l'ordre de
   chargement du CSS. Purement cosmétique : couleurs, rayons, ombre.
   ========================================================================== */
.react-datepicker {
  font-family: var(--rj-font-body);
  border: 1px solid var(--rj-gray-5);
  border-radius: var(--rj-radius-md);
  box-shadow: var(--rj-shadow-md);
  color: var(--rj-ink);
}
.react-datepicker .react-datepicker__header {
  background: #fff;
  border-bottom: 1px solid var(--rj-gray-6);
  border-top-left-radius: var(--rj-radius-md);
  border-top-right-radius: var(--rj-radius-md);
  padding-top: 12px;
}
.react-datepicker .react-datepicker__current-month,
.react-datepicker .react-datepicker-time__header {
  color: var(--rj-title);
  font-weight: 600;
}
.react-datepicker .react-datepicker__day-name {
  color: var(--rj-gray-3);
  font-weight: 500;
}
.react-datepicker .react-datepicker__day {
  color: var(--rj-ink);
  border-radius: var(--rj-radius-xs);
  transition: background-color 0.12s ease, color 0.12s ease;
}
.react-datepicker .react-datepicker__day:hover {
  background: var(--rj-blue-pale);
  color: var(--rj-blue-dark);
}
.react-datepicker .react-datepicker__day--keyboard-selected {
  background: var(--rj-blue-pale);
  color: var(--rj-blue-dark);
}
.react-datepicker .react-datepicker__day--selected,
.react-datepicker .react-datepicker__day--selected:hover {
  background: var(--rj-blue);
  color: #fff;
}
.react-datepicker .react-datepicker__day--today {
  font-weight: 600;
}
.react-datepicker .react-datepicker__day--disabled {
  color: var(--rj-gray-5);
}
/* Flèches de navigation mois (react-datepicker v2 : triangles en bordure CSS) */
.react-datepicker .react-datepicker__navigation--previous {
  border-right-color: var(--rj-gray-3);
}
.react-datepicker .react-datepicker__navigation--previous:hover {
  border-right-color: var(--rj-blue);
}
.react-datepicker .react-datepicker__navigation--next {
  border-left-color: var(--rj-gray-3);
}
.react-datepicker .react-datepicker__navigation--next:hover {
  border-left-color: var(--rj-blue);
}