/* CloudREC — reskin global « nouvelle DA » (chargé en DERNIER).
   Aligne le player, les modales, les toasts et les boutons bootstrap restants
   sur la DA des pages rework (pills blanches, liserés fins, rouge charte,
   ombres douces) SANS toucher au markup ni au JS legacy. */

/* ===========================================================================
   1) PLAYER (footer docké) — pbtn 3D gris → pills plates blanches
   =========================================================================== */
body > footer .pbtn {
  height: 42px;
  padding: 0 16px;
  border-radius: 99px;
  border: 1px solid #dedee3;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 26, 0.05);
  color: #454549;
  transition: background .15s ease, border-color .15s ease, color .15s ease,
    box-shadow .15s ease, transform .1s ease;
}
body > footer .pbtn span { font-weight: 600; font-size: 13px; }
body > footer .pbtn i { font-size: 20px; color: #5f5e64; }
body > footer .pbtn:hover:not(.pbtn-holdState.pbtn-active, .pbtn-disabled) {
  background: #fff2f4;
  border-color: #ff8093;
}
body > footer .pbtn:hover:not(.pbtn-holdState.pbtn-active, .pbtn-disabled) i {
  color: #e0001c;
  text-shadow: none;
}
body > footer .pbtn:active:not(.pbtn-disabled),
body > footer .pbtn.pbtn-active:not(.pbtn-screenText) {
  box-shadow: inset 0 1px 3px rgba(17, 17, 26, 0.12);
  transform: translateY(1px);
}
body > footer .pbtn:active:not(.pbtn-disabled).pbtn-groupRight.pbtn-holdState,
body > footer .pbtn.pbtn-active:not(.pbtn-screenText).pbtn-groupRight.pbtn-holdState {
  box-shadow: inset 0 1px 3px rgba(17, 17, 26, 0.12);
}
/* Groupes accolés : on garde l'accolement mais en arrondi pill. */
body > footer .pbtn-groupLeft { border-radius: 99px 0 0 99px; border-right-width: 0; }
body > footer .pbtn-groupCenter { border-radius: 0; }
body > footer .pbtn-groupRight { border-radius: 0 99px 99px 0; }
/* « Écrans » LCD noirs → champs clairs arrondis. */
body > footer .pbtn-screenText span, body > footer .pbtn-screenText input,
body > footer .pflst-screeText span, body > footer .pflst-screeText input {
  background: #f4f4f6;
  color: #17171a;
  box-shadow: none;
  border: 1px solid #e4e4e9;
  border-radius: 8px;
  font-weight: 600;
}
body > footer .pbtn-screenText.pbtn-active span,
body > footer .pbtn-screenText.pbtn-active input,
body > footer .pflst-screeText.pbtn-active span,
body > footer .pflst-screeText.pbtn-active input {
  background: #ff0020;
  color: #fff;
  border-color: #ff0020;
  box-shadow: 0 2px 8px rgba(255, 0, 32, 0.25);
}
/* État maintenu (bouton Direct actif) : rouge plein, sans clignotement. */
body > footer .pbtn-holdState.pbtn-active {
  background: #ff0020;
  border-color: #ff0020;
  box-shadow: 0 2px 8px rgba(255, 0, 32, 0.25);
}
body > footer .pbtn-holdState.pbtn-active i,
body > footer .pbtn-holdState.pbtn-active span { color: #fff; animation: none; }
body > footer .pbtn-disabled { background: #fafafb; }
/* Panneau du player : ombre plus douce. */
body > footer > div:nth-child(2) {
  box-shadow: 0 -10px 40px rgba(17, 17, 26, 0.16);
  border-top: 1px solid #ebebef;
}
/* Sliders : rails noirs LCD → rails clairs, curseur rouge conservé. */
body > footer input[type=range]::-webkit-slider-runnable-track,
body > footer input[type=range]:focus::-webkit-slider-runnable-track {
  background: #eeeef1;
  box-shadow: inset 0 1px 3px rgba(17, 17, 26, 0.14);
  border-radius: 8px;
}
body > footer input[type=range]::-moz-range-track {
  background: #eeeef1;
  box-shadow: inset 0 1px 3px rgba(17, 17, 26, 0.14);
  border-radius: 8px;
}
body > footer input[type=range]::-webkit-slider-thumb {
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(255, 0, 32, 0.45);
}
body > footer input[type=range]::-moz-range-thumb {
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(255, 0, 32, 0.45);
}
body > footer input[type=range].vertical::-webkit-slider-runnable-track,
body > footer input[type=range].vertical::-moz-range-track {
  box-shadow: inset 0 1px 3px rgba(17, 17, 26, 0.14);
}
/* « Écran » heure de lecture (LCD noir → champ clair, points de charge rouges). */
.playback-time-input {
  background: #f4f4f6;
  color: #17171a;
  border: 1px solid #e4e4e9;
  border-radius: 8px;
  box-shadow: none;
}
body > footer .playback-time-input input {
  background: transparent;
  color: #17171a;
  font-weight: 600;
}
.playback-time-input .lds-ellipsis div { background: #ff0020; }

/* Rail clair : étiquettes d'heures et graduations foncées (étaient blanches
   sur l'ancien rail noir → illisibles). */
body > footer > div:nth-child(2) #panel #panel-slider-content .slider-markers > div i {
  background-color: #b9b9c2;
}
body > footer > div:nth-child(2) #panel #panel-slider-content .slider-markers > div i span {
  color: #6f6f78;
  text-shadow: none;
  font-weight: 600;
}
/* Zone DIRECT : rouge charte opaque (masque les étiquettes dessous). */
body > footer > div:nth-child(2) #panel #panel-slider-content .slider-live {
  background-color: #ff0020;
  text-shadow: none;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  letter-spacing: .4px;
}
/* Zones striées : périodes sans enregistrement (silence de remplacement).
   MÊMES top/height que .slider-live-past (le rail de fond) pour épouser la
   barre pile-poil ; le JS ne pose que left/width. */
body > footer > div:nth-child(2) #panel #panel-slider-content .clrec-gap {
  position: absolute;
  top: 2px;
  height: 48px;
  overflow: hidden;
  border-radius: 6px;
  pointer-events: none;
  background: repeating-linear-gradient(45deg,
    rgba(111, 111, 120, 0.22) 0 7px, rgba(111, 111, 120, 0.05) 7px 14px);
}
/* CAUSE RACINE de l'ancien décalage Firefox : sans hauteur explicite, l'input
   range de Firefox garde la hauteur d'un contrôle de formulaire (~21px) au lieu
   des 50px du track → le rail visible était fin et centré, et toutes les couches
   de 48px (direct rouge, stries, zone de dl…) débordaient. On force la hauteur de
   l'input à 50px (no-op sur Chrome qui y est déjà) : le track remplit la boîte,
   et Firefox s'aligne exactement comme Chrome. Les décalages -13px/8px du player
   legacy deviennent alors faux : on les neutralise ci-dessous. */
body > footer > div:nth-child(2) #panel #panel-slider-content #js-slider {
  height: 50px;
  box-sizing: border-box;
}
@-moz-document url-prefix() {
  /* Reset des rustines Firefox du player legacy → mêmes top que Chrome. */
  body > footer > div:nth-child(2) #panel #panel-slider-content .slider-markers > div {
    top: 23px;
  }
  body > footer > div:nth-child(2) #panel #panel-slider-content .clrec-gap,
  body > footer > div:nth-child(2) #panel #panel-slider-content .slider-live-past,
  body > footer > div:nth-child(2) #panel #panel-slider-content .slider-live,
  body > footer > div:nth-child(2) #panel #panel-slider-content .slider-dlzone,
  body > footer > div:nth-child(2) #panel #panel-slider-content .slider-dlstartpoint,
  body > footer > div:nth-child(2) #panel #panel-slider-content .slider-dlendpoint {
    top: 2px;
  }
}

/* Info-bulle non bloquante du player (heure sans archive, radio non capturée). */
#clrec-player-toast {
  position: absolute;
  left: 50%;
  top: -64px;
  transform: translate(-50%, 16px);
  z-index: 2100;
  max-width: min(560px, 90vw);
  background: #17171a;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.45;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
#clrec-player-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Texte forcé blanc : le player legacy colore les <span> du footer en gris,
   ce qui rendait le message illisible sur le fond sombre du toast. */
body > footer #clrec-player-toast,
body > footer #clrec-player-toast span {
  color: #fff !important;
  font-weight: 500;
  text-shadow: none;
}
#clrec-player-toast .mdi { color: #ff8093 !important; font-size: 17px; flex: none; }
/* Marqueurs IN/OUT : barres et flèches foncées (étaient blanches). */
body > footer > div:nth-child(2) #panel #panel-slider-content .slider-dlstartpoint,
body > footer > div:nth-child(2) #panel #panel-slider-content .slider-dlendpoint {
  background-color: #17171a;
}
body > footer > div:nth-child(2) #panel #panel-slider-content .slider-dlstartpoint i,
body > footer > div:nth-child(2) #panel #panel-slider-content .slider-dlendpoint i {
  color: #17171a;
}
/* --- Sélection de zone de téléchargement (clrec-dlzone.js) ----------------
   Zone remplie en transparence + poignées d'entrée/sortie saisissables.
   Même rail vertical que .slider-live-past (top:2px / height:48px).

   IMPORTANT stacking : la zone n'a PAS de z-index et est insérée en DOM juste
   après le slider mais avant les graduations / le direct rouge / les stries,
   de sorte que ceux-ci restent visibles PAR-DESSUS la zone (l'ordre du DOM
   suffit, tous en z-index auto). Ne surtout PAS donner de z-index au slider
   #js-slider : cela le ferait peindre par-dessus graduations/direct/stries. */
body > footer > div:nth-child(2) #panel #panel-slider-content .slider-dlzone {
  position: absolute;
  top: 2px;
  height: 48px;
  left: 0;
  width: 0;
  background-color: rgba(255, 128, 147, 0.28);   /* rose CloudREC, translucide */
  border-left: 1px solid rgba(255, 128, 147, 0.9);
  border-right: 1px solid rgba(255, 128, 147, 0.9);
  pointer-events: none;                            /* clic traverse vers le slider */
}
/* Poignées : seules à porter un z-index positif (barres fines), saisissables,
   avec une zone d'accroche élargie (±9px) malgré leur finesse. */
body > footer > div:nth-child(2) #panel #panel-slider-content .slider-dlstartpoint,
body > footer > div:nth-child(2) #panel #panel-slider-content .slider-dlendpoint {
  pointer-events: auto;
  cursor: ew-resize;
  z-index: 5;
}
body > footer > div:nth-child(2) #panel #panel-slider-content .slider-dlstartpoint::before,
body > footer > div:nth-child(2) #panel #panel-slider-content .slider-dlendpoint::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -9px;
  right: -9px;                                     /* bande d'accroche invisible */
}
/* Pendant un glissé, pas de transition qui traîne. */
#panel-slider-content.dlzone-dragging .slider-dlzone,
#panel-slider-content.dlzone-dragging .slider-dlstartpoint,
#panel-slider-content.dlzone-dragging .slider-dlendpoint { transition: none !important; }
/* Boutons « Point d'entrée / sortie » : hauteur auto (le texte sur 2 lignes
   débordait du bouton bridé à 23px), coins pill conservés. */
body > footer > div:nth-child(2) #panel #panel-snip-export div button {
  height: auto;
  min-height: 34px;
  width: 150px;
  padding: 4px 12px;
}
body > footer > div:nth-child(2) #panel #panel-snip-export div button span {
  line-height: 1.15;
}
/* Barre réduite : le déclencheur devient une vraie pill charte. */
body > footer #trigger_openplayer {
  background: #ff0020;
  border-color: #ff0020;
  color: #fff;
  height: 46px;
  padding: 0 22px;
  box-shadow: 0 4px 16px rgba(255, 0, 32, 0.35);
}
body > footer #trigger_openplayer i,
body > footer #trigger_openplayer span {
  color: #fff;
  font-weight: 600;
}
body > footer #trigger_openplayer:hover:not(.pbtn-disabled) {
  background: #e0001c;
  border-color: #e0001c;
}
body > footer #trigger_openplayer:hover:not(.pbtn-disabled) i {
  color: #fff;
  text-shadow: none;
}

/* Mobile (≤999px) : le design d'origine écrasait les boutons de bord (20px,
   sans bordure) et décalait les rangées — on repasse en icônes nues pour les
   ±10s et on recadre les rangées dans l'écran. */
@media (max-width: 991.98px) {
  body > footer > div:nth-child(2) #panel #panel-slider #slider-leftpbtn,
  body > footer > div:nth-child(2) #panel #panel-slider #slider-rightpbtn {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 2px;
  }
  body > footer > div:nth-child(2) #panel #panel-playback-controls,
  body > footer > div:nth-child(2) #panel #panel-time-streaming,
  body > footer > div:nth-child(2) #panel #panel-snip-export {
    margin-right: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  body > footer > div:nth-child(2) #panel #panel-playback-controls button {
    flex: none;
    padding: 0 14px;
  }
  body > footer > div:nth-child(2) #panel #panel-playback-controls button:nth-of-type(2) {
    flex: 1;
    max-width: 200px;
  }
  body > footer > div:nth-child(2) #panel #panel-snip-export div button {
    width: 132px;
  }
}

/* Bande intermédiaire (992-1799px) : le panneau legacy était figé à 884px —
   avec les pills plus larges, la rangée date/DIRECT sautait à la ligne et
   tout semblait décalé. Panneau fluide + pills resserrées : une seule
   rangée de commandes à toutes les largeurs. */
@media (min-width: 992px) and (max-width: 1799.98px) {
  body > footer > div:nth-child(2) #panel {
    width: clamp(884px, 100vw - 170px, 1500px);
  }
  body > footer .pbtn { padding: 0 13px; }
  body > footer > div:nth-child(2) #panel #panel-playback-controls {
    margin-right: 14px;
  }
}

/* Desktop : le sélecteur de vitesse rejoint l'horloge sur la même ligne
   (il restait orphelin en dessous, avec un trou dans la rangée). */
@media (min-width: 992px) {
  body > footer > div:nth-child(2) #panel #panel-playback-time {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    text-align: left;
  }
  body > footer > div:nth-child(2) #panel #panel-playback-time .playback-speed button {
    margin-top: 0;
  }
}

/* Menu vitesse (dropdown du player) + menus déroulants globaux. */
.dropdown-menu {
  border: 1px solid #ebebef;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(17, 17, 26, 0.12);
  padding: 6px;
}
.dropdown-menu .dropdown-item {
  border-radius: 8px;
  font-size: 13px;
  padding: 7px 12px;
  cursor: pointer;
}
.dropdown-menu .dropdown-item:hover { background: #fff2f4; color: #c50019; }
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active { background: #ff0020; color: #fff; }
.dropdown-menu .dropdown-divider { border-color: #f0f0f2; margin: 4px 0; }

/* ===========================================================================
   2) MODALES BOOTSTRAP (alert/déconnexion, options player, sélecteurs…)
   =========================================================================== */
.modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
.modal-header { border-bottom: 1px solid #f0f0f2; }
.modal-footer { border-top: 1px solid #f0f0f2; }
.modal-header .modal-title { font-weight: 600; color: #17171a; }
.modal-header .modal-title .mdi { color: #ff0020; }
.modal-header .close { color: #9a9aa0; opacity: 1; transition: color .12s ease; }
.modal-header .close:hover { color: #e0001c; }

/* ===========================================================================
   3) BOUTONS & BADGES BOOTSTRAP RESTANTS (pages dev, modales, formulaires)
   =========================================================================== */
.btn {
  border-radius: 99px;
  font-weight: 600;
  font-size: 13px;
  transition: background .15s ease, border-color .15s ease, color .15s ease,
    box-shadow .15s ease, transform .1s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary, .btn-primary:focus {
  background: #ff0020;
  border-color: #ff0020;
  box-shadow: 0 2px 8px rgba(255, 0, 32, 0.25);
}
.btn-primary:hover, .btn-primary:not(:disabled):active {
  background: #e0001c;
  border-color: #e0001c;
}
.btn-secondary, .btn-secondary:focus {
  background: #fff;
  border-color: #dedee3;
  color: #5f5e64;
}
.btn-secondary:hover, .btn-secondary:not(:disabled):active {
  background: #f6f6f8;
  border-color: #cfcfd6;
  color: #3a3a40;
}
.btn-outline-primary { border-color: #ffb3be; color: #e0001c; }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):active {
  background: #fff2f4; border-color: #ff0020; color: #c50019;
}
.btn-outline-secondary { border-color: #dedee3; color: #5f5e64; }
.btn-outline-secondary:hover, .btn-outline-secondary:not(:disabled):active {
  background: #f6f6f8; border-color: #cfcfd6; color: #3a3a40;
}
.btn-outline-danger { border-color: #f2b8b8; color: #d02b2b; }
.btn-outline-danger:hover, .btn-outline-danger:not(:disabled):active {
  background: #fde8eb; border-color: #d02b2b; color: #b21f1f;
}
.btn-outline-info { border-color: #dedee3; color: #5f5e64; }
.btn-outline-info:hover { background: #f6f6f8; color: #3a3a40; border-color: #cfcfd6; }
.btn-light { background: #f4f4f6; border-color: #f4f4f6; color: #5f5e64; }
.btn-light:hover { background: #ebebef; color: #3a3a40; }
/* Toggle « suivre la lecture » (options player) : état actif rouge charte. */
.btn-group-toggle .btn-secondary.active {
  background: #ff0020; border-color: #ff0020; color: #fff;
}
.badge { border-radius: 99px; font-weight: 600; }
.badge-secondary { background: #f4f4f6; color: #5f5e64; }
.badge-light { background: #fde8eb; color: #c00020; }
.badge-primary { background: #ff0020; }
a.badge-secondary:hover, a.badge-secondary:focus { background: #ebebef; color: #3a3a40; }

/* ===========================================================================
   4) TOASTS (téléchargements flottant, avertissement de session)
   =========================================================================== */
.toast {
  border: 1px solid #ebebef;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(17, 17, 26, 0.14);
  overflow: hidden;
}
.toast-header {
  background: #fff;
  border-bottom: 1px solid #f0f0f2;
  color: #17171a;
  font-weight: 600;
}
.toast-header .mdi { color: #ff0020; }
.toast-header.bg-warning {
  background: #fff3cd !important;
  border-bottom-color: #f4e3a1;
}
.toast-body { background: #fff; }
/* Lignes d'export dans le toast téléchargements */
#toast-audio-export .export-line { font-size: 12.5px; }
#toast-audio-export .toggle-toast-body {
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}

/* ===========================================================================
   5) FLATPICKR (calendriers) — accent charte au lieu du bleu
   =========================================================================== */
.flatpickr-calendar { border-radius: 14px; box-shadow: 0 10px 30px rgba(17,17,26,.16); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
  background: #ff0020; border-color: #ff0020;
}
.flatpickr-day.inRange {
  background: #fde8eb; border-color: #fde8eb; box-shadow: -5px 0 0 #fde8eb, 5px 0 0 #fde8eb;
}
.flatpickr-day.today { border-color: #ff8093; }
.flatpickr-day:hover { background: #f4f4f6; }

/* ===========================================================================
   6) DIVERS (liens, focus, listes des modales)
   =========================================================================== */
.list-group-item-dark {
  background: #fafafb; color: #17171a; font-weight: 600;
  border-color: #ececef;
}
.page-item.active .page-link { background: #ff0020; border-color: #ff0020; }
a { color: #e0001c; }
a:hover { color: #c50019; }

/* ------------------------------------------------------------------ *
 * Loaders « CHARGEMENT » : masque OPAQUE couvrant toute la zone (on ne
 * doit plus voir le contenu/player derrière), pleine largeur du panneau.
 * ------------------------------------------------------------------ */
#content-loader {
  background: rgba(247, 247, 249, 0.97);
  backdrop-filter: blur(2px);
}
/* Player : voile BLANC pur et opaque (le gris clair tranchait avec le fond
   blanc du player). */
#panel-loader {
  background: #ffffff;
  backdrop-filter: none;
}
/* Le loader du player couvre TOUT le panneau (l'ancienne largeur
   calc(100% - 250px) laissait apparaître les commandes à droite). */
body > footer > div:nth-child(2) #panel #panel-loader {
  width: 100%;
  left: 0;
  /* Doit couvrir TOUT le player, y compris les poignées de dl (z-index:5) et la
     zone de téléchargement, sinon elles transpercent le voile de chargement. */
  z-index: 30;
}

/* ------------------------------------------------------------------ *
 * Carte « Droits & accès » (company_form / users_form) : chaque droit
 * + son périmètre (pays / radios) sous forme de chips cochables.
 * ------------------------------------------------------------------ */
.rk-perm { padding: 12px 0; border-top: 1px solid #f0f0f2; }
.rk-perm:first-of-type { border-top: none; padding-top: 2px; }
.rk-perm .rk-switch-label small {
  display: block; color: #8a8a93; font-weight: 400; font-size: 11.5px;
  margin-top: 2px; line-height: 1.4;
}
.rk-scope { margin: 8px 0 2px; padding-left: 4px; }
.rk-scope .rk-sub { margin-bottom: 6px; }
.rk-scope-list {
  max-height: 240px; overflow: auto; border: 1px solid #ececef;
  border-radius: 10px; padding: 8px 10px; background: #fafafb;
}
.rk-scope-group {
  font-weight: 600; font-size: 12px; color: #6f6f78; margin: 8px 0 3px;
}
.rk-scope-group:first-child { margin-top: 0; }
/* Chips cochables (pays / radios) : la case pilote l'aspect coché. */
.rk-chips label.rk-chip { cursor: pointer; user-select: none; }
.rk-chips label.rk-chip input { margin-right: 5px; vertical-align: -1px; }
.rk-chips label.rk-chip:has(input:checked) {
  background: #ffedf0; border-color: #ff8093; color: #c00020;
}

/* ------------------------------------------------------------------ *
 * En-tête Admin unifié (_admin_tabs.html) : badge « Admin » + onglets
 * segmentés à positions FIXES + action toujours à droite (ne décale
 * jamais les onglets, qu'elle existe ou non).
 * ------------------------------------------------------------------ */
.rk-adminhead { margin-bottom: 18px; }
.rk-adminbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rk-adminbadge {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-weight: 700; font-size: 13px; color: #c00020;
  background: #ffedf0; border: 1px solid #ffd0d8;
  padding: 7px 14px; border-radius: 99px;
}
.rk-tabs {
  display: inline-flex; gap: 3px; flex: none;
  background: #f1f1f4; border: 1px solid #e7e7ea; border-radius: 99px; padding: 3px;
}
.rk-tab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 16px; border-radius: 99px; font-size: 13px; font-weight: 600;
  color: #5f5e64; transition: background .15s ease, color .15s ease;
}
.rk-tab:hover { color: #c00020; text-decoration: none; }
.rk-tab.is-active {
  background: #fff; color: #17171a; box-shadow: 0 1px 3px rgba(17, 17, 26, .12);
}
.rk-tab.is-active:hover { color: #17171a; }
.rk-adminaction {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 99px; font-size: 13px; font-weight: 600;
  background: #ff0020; color: #fff; box-shadow: 0 2px 8px rgba(255, 0, 32, .25);
}
.rk-adminaction:hover { background: #e0001c; color: #fff; text-decoration: none; }
/* Groupe d'actions (une ou plusieurs) toujours calé à droite, sans décaler
   les onglets — utilisé par « Mon équipe » (bouton API + créer un user). */
.rk-adminactions { margin-left: auto; display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.rk-adminactions .rk-pill { flex: none; }
.rk-adminsub { color: #8a8a93; font-size: 12.5px; margin-top: 9px; padding-left: 2px; }
/* Sous ~640px : la barre passe en colonne, l'action revient sous les onglets. */
@media (max-width: 640px) {
  .rk-adminaction { margin-left: 0; }
  .rk-tabs { width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------------ *
 * Panneau « Analyse IA » du player (modalPlayerOptions) : rework fin.
 * L'item actif n'est plus un bloc rouge plein (list-group.active
 * Bootstrap) mais une carte discrète à liseré ; badges temps sobres ;
 * timeline affinée ; toggle « suivi de lecture » intégré au header.
 * ------------------------------------------------------------------ */
#modalPlayerOptions .modal-content { border: 0; border-radius: 16px; overflow: hidden; }
#modalPlayerOptions .modal-header {
  align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid #f0f0f2; background: #fafafb;
}
#modalPlayerOptions .mpo-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
#modalPlayerOptions .mpo-badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: #ffe9ec; color: #d0021b; font-weight: 700; font-size: 12px;
  padding: 4px 10px; border-radius: 999px;
}
#modalPlayerOptions #mPO-Title {
  font-weight: 600; color: #17171a; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Toggle suivi : petite pilule segmentée dans le header (plus de bloc
   flottant en bas du panneau). */
#modalPlayerOptions .stt-followplayer {
  position: static; margin-left: auto; display: flex; align-items: center;
  gap: 8px; padding: 0; background: none; box-shadow: none; z-index: 1;
}
#modalPlayerOptions .stt-followplayer > span { font-size: 12px; color: #8a8a93; white-space: nowrap; }
#modalPlayerOptions .stt-followplayer .btn {
  padding: 3px 10px; font-size: 13px; line-height: 1.4; border: 1px solid #e3e3e8;
  background: #fff; color: #8a8a93; box-shadow: none;
}
#modalPlayerOptions .stt-followplayer .btn.active {
  background: #17171a; border-color: #17171a; color: #fff;
}
#modalPlayerOptions .stt-followplayer .btn:first-of-type { border-radius: 999px 0 0 999px; }
#modalPlayerOptions .stt-followplayer .btn:last-of-type { border-radius: 0 999px 999px 0; }
#modalPlayerOptions .modal-body { padding: 14px 18px 18px; background: #fff; }
#modalPlayerOptions .modal-body::-webkit-scrollbar { width: 8px; }
#modalPlayerOptions .modal-body::-webkit-scrollbar-thumb { background: #e3e3e8; border-radius: 8px; }

/* Timeline fine. */
#modalPlayerOptions .stt-live { margin-left: 6px; }
#modalPlayerOptions .stt-live li {
  padding: 10px 12px 10px 34px; margin: 0 0 6px 0; min-height: 0;
  background: transparent; border-radius: 10px; overflow: visible;
}
#modalPlayerOptions .stt-live li::before {
  left: 6px; width: 10px; height: 10px; background: #fff;
  border: 2px solid #d9d9de;
}
#modalPlayerOptions .stt-live li:not(:last-child)::after {
  left: 10.5px; width: 1px; height: calc(100% + 6px); background: #ececef;
}
/* Item ACTIF : liseré + fond léger, pas de bloc plein. */
#modalPlayerOptions .stt-live li.active,
#modalPlayerOptions .stt-live li.list-group-item.active {
  background: #fff5f6; color: inherit; border: 0;
  box-shadow: inset 3px 0 0 #ff0020;
}
#modalPlayerOptions .stt-live li.active::before { background: #ff0020; border-color: #ff0020; }
#modalPlayerOptions .stt-live li.active:not(:last-child)::after { background: #ececef; }
#modalPlayerOptions .stt-live li.active .stt-live-time { background: #ff0020; color: #fff; }

/* Icône de type (voix / musique) discrète. */
#modalPlayerOptions .stt-live-item-left { margin-right: 12px; }
#modalPlayerOptions .stt-live-item-left i { font-size: 18px; color: #b9b9c2; }
#modalPlayerOptions .stt-live li.active .stt-live-item-left i { color: #ff0020; }
#modalPlayerOptions .stt-live-item-right { flex: 1 1 0; min-width: 0; font-size: 13.5px; line-height: 1.55; color: #34343a; }

/* Horodatage : petit, mono, gris (plus de badge bleu/rouge criard). */
#modalPlayerOptions .stt-live-time {
  display: inline-block; margin-bottom: 4px; padding: 1px 7px;
  background: #f0f0f3; color: #6f6f78; font-weight: 600; font-size: 11px;
  font-variant-numeric: tabular-nums; border-radius: 6px;
}

/* Carte musique : pochette compacte, artiste/titre alignés. */
#modalPlayerOptions .stt-live-musicinfo { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
#modalPlayerOptions .stt-live-item-right .stt-live-musicinfo-cover {
  width: 52px; height: 52px; float: none; margin: 0; flex: none;
  border-radius: 8px; box-shadow: 0 2px 8px rgba(17,17,26,.12);
}
#modalPlayerOptions .stt-live-item-right .stt-live-musicinfo-at { padding: 0; min-width: 0; }
#modalPlayerOptions .stt-live-item-right .stt-live-musicinfo-at span { padding: 0; margin: 0; }
#modalPlayerOptions .stt-live-item-right .stt-live-musicinfo-artist { font-weight: 700; color: #17171a; }
#modalPlayerOptions .stt-live-item-right .stt-live-musicinfo-title { color: #6f6f78; }

/* Bouton IA du player : pilule compacte qui ne pousse pas la ligne.
   NOTE : le display reste géré par le JS legacy (.show()/.hide() selon la
   présence de données IA) — on ne style QUE l'apparence et l'encombrement. */
body > footer > div:nth-child(2) #panel .panel-options { flex: none; }
body > footer > div:nth-child(2) #panel section.panel-options {
  border-left: 0; padding-left: 0; margin-left: auto; align-self: center;
}
body > footer > div:nth-child(2) #panel .panel-options button.js-btn-options {
  white-space: nowrap; height: 32px; line-height: 32px; padding: 0 14px;
  border-radius: 999px; background: #17171a; color: #fff; border: 0;
  box-shadow: 0 2px 8px rgba(17, 17, 26, .18); vertical-align: middle;
}
body > footer > div:nth-child(2) #panel .panel-options button.js-btn-options:hover {
  background: #ff0020; border-color: #ff0020;
}
body > footer > div:nth-child(2) #panel .panel-options button.js-btn-options i {
  font-size: 15px; color: #fff; vertical-align: middle;
}
body > footer > div:nth-child(2) #panel .panel-options button.js-btn-options span {
  font-size: 12.5px; margin-left: 6px; vertical-align: middle; font-weight: 600; color: #fff;
}