/* ════════════════════════════════════════════════════════════════════════════
   FitnessHub — Design System
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── CUSTOM PROPERTIES ─────────────────────────────────────────────────────── */
:root {
  --clr-bg:           #05151f;
  --clr-surface:      rgba(255,255,255,.045);
  --clr-surface-2:    rgba(255,255,255,.07);
  --clr-border:       rgba(255,255,255,.08);
  --clr-border-2:     rgba(255,255,255,.14);
  --clr-text:         #f0f0f2;
  --clr-muted:        rgba(255,255,255,.4);
  --clr-orange:       #ff8a00;
  --clr-orange-dim:   rgba(255,138,0,.18);
  --clr-orange-glow:  rgba(255,120,0,.28);
  --radius:           .875rem;
  --radius-sm:        .55rem;
  --radius-xs:        .35rem;
}

/* ─── BASE ───────────────────────────────────────────────────────────────────── */
html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--clr-bg);
  color: var(--clr-text);
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6 { font-weight: 700; letter-spacing: -.015em; }
a { color: var(--clr-orange); }
a:hover { color: #ffaa44; }
/* Utilitaire manquant de Bootstrap : permet à un enfant flex de rétrécir sous sa largeur de
   contenu (ex: pour que .text-truncate fonctionne dans un flex-item). Utilisé sur plusieurs pages. */
.min-width-0 { min-width: 0; }
.text-muted { color: var(--clr-muted) !important; }
.text-dark  { color: #f0f0f2 !important; }
.text-primary { color: var(--clr-orange) !important; }
.text-success { color: #ff7a30 !important; }
.text-warning { color: #ffd740 !important; }
.text-info    { color: #4dd0e1 !important; }
.text-danger  { color: #ef5350 !important; }

/* ─── BACKGROUND SYSTEM ─────────────────────────────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at center, rgba(255,140,0,.08), transparent 60%),
    radial-gradient(circle at top center, rgba(255,140,0,.35), transparent 40%),
    linear-gradient(145deg, #05151f 0%, #092433 30%, #0b2645 55%, #06091f 100%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, rgba(16,48,102,.38), rgba(5,5,10,.55));
  z-index: -1;
  pointer-events: none;
}

.apple-bg-blur {
  position: fixed;
  inset: -10vh -10vw; /* repli pour navigateurs sans support de svh */
  /* svh (small viewport height) reste fixe même quand la barre d'adresse mobile se
     rétracte/réapparaît au scroll ; avec vh classique, cette barre change la hauteur du
     viewport en continu, ce qui redimensionne cet élément et fait "sauter" les orbes
     sur les côtés à chaque scroll (bug observé sur mobile). */
  inset: -10svh -10vw;
  z-index: -3;
  overflow: hidden;
  filter: blur(140px) saturate(140%) contrast(1.15);
  pointer-events: none;
  transform: translateZ(0);
}
.orbe { position: absolute; border-radius: 50%; mix-blend-mode: screen; opacity: .75; }
.orbe-1 { top:-15%; left:-10%; width:70vw; height:70vw; background: radial-gradient(circle, rgba(255,145,0,.95) 0%, rgba(255,120,0,.55) 35%, transparent 72%); }
.orbe-2 { bottom:-20%; right:-10%; width:80vw; height:80vw; background: radial-gradient(circle, rgba(0,115,255,.75) 0%, rgba(0,77,170,.45) 40%, transparent 75%); }
.orbe-3 { top:35%; left:35%; width:45vw; height:45vw; background: radial-gradient(circle, rgba(255,170,40,.70) 0%, rgba(255,120,0,.35) 45%, transparent 75%); }
.orbe-4 { top:10%; right:15%; width:30vw; height:30vw; background: radial-gradient(circle, rgba(80,127,255,.52) 0%, transparent 70%); }
.apple-bg-blur::after { content:""; position:absolute; inset:0; opacity:.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }

@media (max-width: 991px) {
  .apple-bg-blur { filter: blur(70px) saturate(140%) contrast(1.1); -webkit-filter: blur(70px) saturate(140%) contrast(1.1); }
}

/* ─── SCROLLBARS ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }

/* ─── BOOTSTRAP COLOR OVERRIDES ──────────────────────────────────────────────── */
.bg-primary   { background: var(--clr-orange-dim) !important; }
.bg-secondary { background: var(--clr-surface) !important; }
.bg-success   { background: rgba(255,94,0,.18) !important; }
.bg-info      { background: rgba(23,162,184,.18) !important; }
.bg-warning   { background: rgba(255,193,7,.18) !important; }
.bg-danger    { background: rgba(220,53,69,.18) !important; }
.bg-dark      { background: rgba(0,0,0,.25) !important; }
.bg-light     { background: rgba(255,255,255,.08) !important; }

.border-primary   { border-color: rgba(255,138,0,.3) !important; }
.border-secondary { border-color: var(--clr-border) !important; }
.border-success   { border-color: rgba(255,94,0,.3) !important; }
.border-info      { border-color: rgba(23,162,184,.3) !important; }
.border-warning   { border-color: rgba(255,193,7,.3) !important; }
.border-danger    { border-color: rgba(220,53,69,.3) !important; }
.border-dark      { border-color: rgba(255,255,255,.1) !important; }
.border-light     { border-color: rgba(255,255,255,.12) !important; }

/* ─── CARDS ──────────────────────────────────────────────────────────────────── */
.card {
  background: var(--clr-surface) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius) !important;
  color: var(--clr-text) !important;
}
.card-header {
  background: rgba(255,255,255,.04) !important;
  border-bottom: 1px solid var(--clr-border) !important;
  padding: .7rem 1rem !important;
  font-weight: 600;
}
.card-header.bg-primary { background: rgba(255,138,0,.13) !important; border-bottom-color: rgba(255,138,0,.22) !important; }
.card-header.bg-success { background: rgba(255,94,0,.13) !important;  border-bottom-color: rgba(255,94,0,.22) !important; }
.card-header.bg-info    { background: rgba(23,162,184,.13) !important; border-bottom-color: rgba(23,162,184,.22) !important; }
.card-header.bg-warning { background: rgba(255,193,7,.13) !important;  border-bottom-color: rgba(255,193,7,.22) !important; }
.card-header.bg-danger  { background: rgba(220,53,69,.13) !important;  border-bottom-color: rgba(220,53,69,.22) !important; }
.card-header.bg-secondary { background: rgba(255,255,255,.04) !important; }
.card-body   { padding: .9rem 1rem !important; }
.card-footer { background: rgba(255,255,255,.03) !important; border-top: 1px solid var(--clr-border) !important; }

/* ─── BUTTONS ────────────────────────────────────────────────────────────────── */
.btn { border-radius: var(--radius-sm) !important; font-weight: 500; transition: all .15s ease; }
.btn-sm  { border-radius: var(--radius-xs) !important; font-size: .8rem !important; }
.btn-lg  { border-radius: .75rem !important; }

.btn-primary {
  background: linear-gradient(135deg, #ff8a00, #ff5e00) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 0 16px var(--clr-orange-glow);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #ff9d2f, #ff6b1a) !important;
  box-shadow: 0 0 22px rgba(255,120,0,.4);
  color: #fff !important;
}

.btn-success {
  background: rgba(255,94,0,.75) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-success:hover { background: rgba(255,94,0,.95) !important; color: #fff !important; }

.btn-info {
  background: rgba(23,162,184,.8) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-info:hover { background: rgba(23,162,184,1) !important; color: #fff !important; }

.btn-warning {
  background: rgba(255,193,7,.85) !important;
  border-color: transparent !important;
  color: #000 !important;
}
.btn-warning:hover { background: rgba(255,193,7,1) !important; }

.btn-danger {
  background: rgba(220,53,69,.85) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-danger:hover { background: rgba(220,53,69,1) !important; color: #fff !important; }

.btn-secondary {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.8) !important;
}
.btn-secondary:hover { background: rgba(255,255,255,.14) !important; color: #fff !important; }

.btn-dark {
  background: rgba(0,0,0,.35) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.85) !important;
}
.btn-dark:hover { background: rgba(0,0,0,.55) !important; color: #fff !important; }

.btn-light {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #fff !important;
}
.btn-light:hover { background: rgba(255,255,255,.18) !important; }

.btn-outline-primary {
  border-color: rgba(255,138,0,.4) !important;
  color: var(--clr-orange) !important;
  background: transparent !important;
}
.btn-outline-primary:hover { background: rgba(255,138,0,.12) !important; border-color: var(--clr-orange) !important; color: #fff !important; }

.btn-outline-success {
  border-color: rgba(255,94,0,.4) !important;
  color: #ff7a30 !important;
  background: transparent !important;
}
.btn-outline-success:hover { background: rgba(255,94,0,.12) !important; color: #ff9050 !important; }

.btn-outline-info {
  border-color: rgba(23,162,184,.4) !important;
  color: #4dd0e1 !important;
  background: transparent !important;
}
.btn-outline-info:hover { background: rgba(23,162,184,.12) !important; color: #80deea !important; }

.btn-outline-warning {
  border-color: rgba(255,193,7,.4) !important;
  color: #ffd740 !important;
  background: transparent !important;
}
.btn-outline-warning:hover { background: rgba(255,193,7,.12) !important; color: #ffe57f !important; }

.btn-outline-danger {
  border-color: rgba(220,53,69,.4) !important;
  color: #ef5350 !important;
  background: transparent !important;
}
.btn-outline-danger:hover { background: rgba(220,53,69,.12) !important; color: #ef9a9a !important; }

.btn-outline-secondary {
  border-color: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.55) !important;
  background: transparent !important;
}
.btn-outline-secondary:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.25) !important; color: #fff !important; }

.btn-outline-light {
  border-color: rgba(255,255,255,.2) !important;
  color: rgba(255,255,255,.75) !important;
  background: transparent !important;
}
.btn-outline-light:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }

.btn-outline-dark {
  border-color: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.7) !important;
  background: transparent !important;
}
.btn-outline-dark:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }

.btn-close { filter: invert(1) opacity(.55) !important; }
.btn-close:hover { opacity: 1 !important; }

/* ─── FORMS ──────────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: var(--radius-sm) !important;
  color: #f0f0f2 !important;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,138,0,.5) !important;
  box-shadow: 0 0 0 3px rgba(255,138,0,.15) !important;
  color: #fff !important;
}
.form-control::placeholder { color: rgba(255,255,255,.28) !important; }
.form-control:disabled, .form-select:disabled {
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.35) !important;
  cursor: not-allowed;
}
.form-label { color: rgba(255,255,255,.6); font-size: .79rem; font-weight: 500; margin-bottom: .3rem; }
.form-text  { color: rgba(255,255,255,.35) !important; font-size: .74rem; }
.form-check-label { color: rgba(255,255,255,.7); font-size: .83rem; }

.input-group-text {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.45) !important;
}
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) { border-right: none !important; }
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) { border-left: none !important; }

.form-check-input {
  background-color: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.2) !important;
}
.form-check-input:checked {
  background-color: var(--clr-orange) !important;
  border-color: var(--clr-orange) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(255,138,0,.2) !important; border-color: rgba(255,138,0,.5) !important; }
.form-switch .form-check-input { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,0.4)'/%3e%3c/svg%3e") !important; }
.form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important; }

/* ─── TABLES ─────────────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.025);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  --bs-table-border-color: rgba(255,255,255,.07);
  --bs-table-color: #f0f0f2;
  color: #f0f0f2 !important;
  border-color: rgba(255,255,255,.07) !important;
  backdrop-filter: none !important;
  background: transparent !important;
}
.table > :not(caption) > * > * {
  background: transparent !important;
  color: #f0f0f2 !important;
  border-color: rgba(255,255,255,.07) !important;
  padding: .55rem .75rem !important;
}
.table thead th {
  font-size: .71rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.38) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  white-space: nowrap;
}
.table-sm > :not(caption) > * > * { padding: .3rem .55rem !important; font-size: .8rem !important; }
.table-dark { --bs-table-bg: rgba(0,0,0,.15) !important; }

/* ─── BADGES ─────────────────────────────────────────────────────────────────── */
.badge {
  border-radius: 2rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  padding: .28em .65em !important;
  font-size: .72rem !important;
}
.badge.bg-primary   { background: rgba(255,138,0,.18) !important;  color: #ffb347 !important; border: 1px solid rgba(255,138,0,.28); }
.badge.bg-success   { background: rgba(255,94,0,.18) !important;   color: #ff9050 !important; border: 1px solid rgba(255,94,0,.28); }
.badge.bg-info      { background: rgba(23,162,184,.18) !important; color: #4dd0e1 !important; border: 1px solid rgba(23,162,184,.28); }
.badge.bg-warning   { background: rgba(255,193,7,.18) !important;  color: #ffd740 !important; border: 1px solid rgba(255,193,7,.28); }
.badge.bg-danger    { background: rgba(220,53,69,.18) !important;  color: #ef5350 !important; border: 1px solid rgba(220,53,69,.28); }
.badge.bg-secondary { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.6) !important; border: 1px solid rgba(255,255,255,.1); }
.badge.bg-dark      { background: rgba(0,0,0,.3) !important; color: rgba(255,255,255,.75) !important; border: 1px solid rgba(255,255,255,.1); }
.badge.bg-light     { background: rgba(255,255,255,.1) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.15); }
.badge.bg-white     { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.badge.text-dark    { color: rgba(0,0,0,.75) !important; }

/* ─── ALERTS ─────────────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius) !important;
  border: 1px solid;
  padding: .7rem 1rem !important;
  font-size: .85rem;
}
.alert-success   { background: rgba(255,94,0,.09) !important;   border-color: rgba(255,94,0,.25) !important;   color: #ff9050 !important; }
.alert-danger    { background: rgba(220,53,69,.09) !important;  border-color: rgba(220,53,69,.3) !important;   color: #ef5350 !important; }
.alert-info      { background: rgba(23,162,184,.09) !important; border-color: rgba(23,162,184,.25) !important; color: #4dd0e1 !important; }
.alert-warning   { background: rgba(255,193,7,.09) !important;  border-color: rgba(255,193,7,.25) !important;  color: #ffd740 !important; }
.alert-primary   { background: rgba(255,138,0,.09) !important;  border-color: rgba(255,138,0,.25) !important;  color: #ffb347 !important; }
.alert-secondary { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.6) !important; }
.alert-dark      { background: rgba(0,0,0,.2) !important; border-color: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.7) !important; }

/* ─── LIST GROUPS ────────────────────────────────────────────────────────────── */
.list-group-item {
  background: transparent !important;
  border-color: rgba(255,255,255,.07) !important;
  color: #f0f0f2 !important;
  transition: background .12s;
}
.list-group-item:hover:not(.active) { background: rgba(255,255,255,.04) !important; }
.list-group-item.active {
  background: rgba(255,138,0,.15) !important;
  border-color: rgba(255,138,0,.28) !important;
  color: #fff !important;
}
.list-group-flush .list-group-item:first-child { border-top: none !important; }
.list-group-flush .list-group-item:last-child  { border-bottom: none !important; }

/* ─── MODALS ─────────────────────────────────────────────────────────────────── */
.modal-content {
  background: rgba(6,16,30,.93) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 1.25rem !important;
  color: #f0f0f2 !important;
}
.modal-header {
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  padding: .9rem 1.25rem !important;
}
.modal-footer {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: .7rem 1.25rem !important;
}
.modal-title { font-weight: 700; font-size: 1rem; }
.modal-backdrop.show { opacity: .6 !important; backdrop-filter: blur(4px); }

/* ─── ACCORDIONS ─────────────────────────────────────────────────────────────── */
.accordion-item {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: .75rem !important;
  margin-bottom: .4rem;
  overflow: hidden;
}
.accordion-button {
  background: rgba(255,255,255,.04) !important;
  color: #f0f0f2 !important;
  font-weight: 600;
  font-size: .88rem;
  border: none !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  background: rgba(255,138,0,.08) !important;
  color: #ffb347 !important;
  box-shadow: none !important;
}
.accordion-button::after        { filter: invert(1) opacity(.45); }
.accordion-button:not(.collapsed)::after { filter: invert(.7) sepia(1) saturate(3) hue-rotate(-30deg); }
.accordion-body {
  background: transparent !important;
  color: rgba(255,255,255,.7) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  font-size: .85rem;
  padding: .85rem 1rem !important;
}

/* ─── NAV TABS & PILLS ───────────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid rgba(255,255,255,.1) !important; gap: .2rem; flex-wrap: nowrap; overflow-x: auto; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link {
  border: none !important;
  border-radius: .5rem .5rem 0 0 !important;
  color: rgba(255,255,255,.5) !important;
  font-size: .8rem;
  font-weight: 500;
  padding: .45rem .85rem !important;
  white-space: nowrap;
  transition: all .15s;
}
.nav-tabs .nav-link:hover { color: rgba(255,255,255,.8) !important; background: rgba(255,255,255,.05) !important; }
.nav-tabs .nav-link.active {
  background: rgba(255,138,0,.1) !important;
  border-bottom: 2px solid var(--clr-orange) !important;
  color: var(--clr-orange) !important;
}
.nav-pills .nav-link { border-radius: 2rem !important; color: rgba(255,255,255,.55) !important; font-size: .8rem; font-weight: 500; padding: .35rem .9rem !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background: linear-gradient(135deg,#ff8a00,#ff5e00) !important;
  color: #fff !important;
}

/* ─── PAGINATION ─────────────────────────────────────────────────────────────── */
.page-link {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.65) !important;
  border-radius: .5rem !important;
  font-size: .82rem;
  transition: all .15s;
}
.page-link:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; border-color: rgba(255,255,255,.2) !important; }
.page-item.active .page-link { background: linear-gradient(135deg,#ff8a00,#ff5e00) !important; border-color: transparent !important; color: #fff !important; }
.page-item.disabled .page-link { opacity: .3 !important; }

/* ─── PROGRESS BARS ──────────────────────────────────────────────────────────── */
.progress { background: rgba(255,255,255,.08) !important; border-radius: 2rem !important; }
.progress-bar { background: linear-gradient(90deg,#ff8a00,#ff5e00) !important; border-radius: 2rem; }
.progress-bar.bg-info    { background: rgba(23,162,184,.8) !important; }
.progress-bar.bg-success { background: rgba(255,94,0,.8) !important; }
.progress-bar.bg-warning { background: rgba(255,193,7,.85) !important; }
.progress-bar.bg-danger  { background: rgba(220,53,69,.85) !important; }

/* ─── DROPDOWNS ──────────────────────────────────────────────────────────────── */
.dropdown-menu {
  background: rgba(8,18,30,.95) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: .875rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
  padding: .35rem !important;
}
.dropdown-item {
  color: rgba(255,255,255,.75) !important;
  border-radius: .5rem !important;
  font-size: .84rem;
  padding: .45rem .75rem !important;
}
.dropdown-item:hover, .dropdown-item:focus { background: rgba(255,255,255,.07) !important; color: #fff !important; }
.dropdown-item.active { background: rgba(255,138,0,.15) !important; color: var(--clr-orange) !important; }
.dropdown-item.text-danger:hover { background: rgba(220,53,69,.12) !important; }
.dropdown-divider { border-color: rgba(255,255,255,.08) !important; margin: .3rem .35rem !important; }

/* ─── TOOLTIPS & POPOVERS ────────────────────────────────────────────────────── */
.tooltip-inner { background: rgba(10,22,38,.95) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: .5rem !important; font-size: .78rem; }

/* ─── CAROUSEL ───────────────────────────────────────────────────────────────── */
.carousel-indicators [data-bs-target] { background: rgba(255,255,255,.35) !important; border-radius: 2px; }
.carousel-indicators .active { background: var(--clr-orange) !important; }

/* ─── PLAN CARDS (existing) ──────────────────────────────────────────────────── */
.plan-card, .food-plan-card { border-radius: var(--radius) !important; transition: transform .2s ease, box-shadow .2s ease; }
.plan-card:hover, .food-plan-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.35) !important; }
.plan-card-actions { min-width: 160px; width: auto; }
@media (max-width: 991.98px) {
  .plan-card, .food-plan-card { padding-left: .85rem !important; padding-right: .85rem !important; }
  .plan-card > .d-flex, .food-plan-card > .d-flex { flex-wrap: wrap; }
  .plan-card-actions, .food-plan-card-actions { width: 100%; }
  .plan-card-actions .btn, .food-plan-card-actions .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COMPONENT LIBRARY — reusable across all pages
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── PAGE WRAPPER ───────────────────────────────────────────────────────────── */
.page-wrap        { max-width: 960px;  margin: 0 auto; padding: .875rem .875rem 2rem; }
.page-wrap-wide   { max-width: 1240px; margin: 0 auto; padding: .875rem .875rem 2rem; }
.page-wrap-narrow { max-width: 640px;  margin: 0 auto; padding: 1.25rem .875rem 2rem; }

/* ─── PAGE HEADER ────────────────────────────────────────────────────────────── */
.page-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.page-hd .page-title { font-size: 1.35rem; font-weight: 800; margin: 0 0 .12rem; letter-spacing: -.025em; }
.page-hd .page-sub   { font-size: .77rem; color: rgba(255,255,255,.38); }
.page-hd .page-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ─── SECTION LABEL ──────────────────────────────────────────────────────────── */
.sec-label {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.3);
  margin-bottom: .55rem;
  display: block;
}

/* ─── STATS ROW / PILL ───────────────────────────────────────────────────────── */
.stats-row { display: flex; gap: .5rem; margin-bottom: .875rem; flex-wrap: wrap; }
.stat-pill {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  padding: .6rem .5rem;
  text-align: center;
}
.stat-pill .val { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.stat-pill .lbl { font-size: .61rem; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .05em; margin-top: .15rem; }
.stat-pill-sm .val { font-size: .95rem; }

/* ─── CHIP SCROLL ────────────────────────────────────────────────────────────── */
.chip-scroll { display:flex; gap:.4rem; overflow-x:auto; padding:.2rem 0 .5rem; scrollbar-width:none; -ms-overflow-style:none; }
.chip-scroll::-webkit-scrollbar { display:none; }

.chip, .exercise-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .72rem;
  border-radius: 2rem;
  font-size: .76rem;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.62);
  transition: all .14s ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}
.chip:hover, .exercise-chip:hover { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.2); text-decoration: none; }
.chip.active, .exercise-chip.active {
  background: linear-gradient(135deg,#ff8a00,#ff5e00);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 14px rgba(255,120,0,.3);
}
.chip-count { background: rgba(0,0,0,.2); border-radius: 999px; padding: .07rem .4rem; font-size: .64rem; font-weight: 600; }

/* ─── ITEM / SESSION CARDS ───────────────────────────────────────────────────── */
.item-card, .session-card {
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  margin-bottom: .55rem;
  transition: border-color .14s;
}
.item-card:hover, .session-card:hover { border-color: rgba(255,138,0,.22); }

.item-card-hd, .s-header {
  padding: .62rem .9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.item-card-hd:hover, .s-header:hover { background: rgba(255,255,255,.025); }

.item-card-body, .s-body { padding: 0 .9rem .65rem; }

.s-date  { font-size: .81rem; font-weight: 600; color: rgba(255,138,0,.9); }
.s-meta  { font-size: .7rem; color: rgba(255,255,255,.35); margin-top: .1rem; }
.s-chevron { font-size: .7rem; color: rgba(255,255,255,.25); transition: transform .2s; flex-shrink: 0; }

/* ─── SET ROWS (logs) ────────────────────────────────────────────────────────── */
.set-row { display: flex; align-items: center; gap: .45rem; padding: .22rem 0; border-top: 1px solid rgba(255,255,255,.05); font-size: .78rem; }
.set-num { width: 1.4rem; color: rgba(255,255,255,.22); font-size: .68rem; flex-shrink: 0; }
.set-kg  { font-weight: 700; color: var(--clr-orange); min-width: 3.8rem; }
.set-reps { color: rgba(255,255,255,.65); }
.set-note { color: rgba(255,255,255,.3); font-size: .7rem; font-style: italic; margin-left: auto; text-align: right; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-vol-val { color: rgba(255,255,255,.22); font-size: .68rem; margin-left: auto; }
.vol-bar { height: 2px; background: linear-gradient(90deg,#ff8a00,#ff5e00); border-radius: 2px; margin: 1px 0 2px 1.85rem; }

/* ─── CHART WRAPPER ──────────────────────────────────────────────────────────── */
.chart-wrap {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 1rem;
  padding: .875rem 1rem .9rem;
  margin-bottom: 1.25rem;
}

/* ─── METRIC TOGGLE BUTTONS ──────────────────────────────────────────────────── */
.metric-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.4);
  border-radius: .4rem;
  padding: .17rem .52rem;
  font-size: .7rem;
  cursor: pointer;
  transition: all .13s;
}
.metric-btn:hover, .metric-btn.active { border-color: var(--clr-orange); color: var(--clr-orange); background: rgba(255,138,0,.1); }

/* ─── GLASS CARD ─────────────────────────────────────────────────────────────── */
.glass-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 1rem;
  padding: 1rem;
}

/* ─── KV ROW (key-value inline) ──────────────────────────────────────────────── */
.kv-row { display:flex; align-items:center; justify-content:space-between; padding:.42rem 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:.83rem; }
.kv-row:last-child { border-bottom: none; }
.kv-key { color: rgba(255,255,255,.38); font-size: .74rem; }
.kv-val { font-weight: 600; }

/* ─── EMPTY STATE ────────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
  color: rgba(255,255,255,.2);
}
.empty-state i { font-size: 2.8rem; display: block; margin-bottom: .7rem; }
.empty-state p { font-size: .88rem; margin: 0; }
.empty-state small { font-size: .75rem; color: rgba(255,255,255,.18); }

/* ─── TIMELINE DOT ───────────────────────────────────────────────────────────── */
.timeline-item { position: relative; padding-left: 1.5rem; margin-bottom: .75rem; }
.timeline-item::before { content:""; position:absolute; left:0; top:.6rem; width:8px; height:8px; border-radius:50%; background:var(--clr-orange); box-shadow:0 0 8px var(--clr-orange-glow); }
.timeline-item::after  { content:""; position:absolute; left:3.5px; top:1.4rem; bottom:-1.2rem; width:1px; background:rgba(255,255,255,.08); }
.timeline-item:last-child::after { display:none; }

/* ─── NOTIFICATION ITEM ──────────────────────────────────────────────────────── */
.notif-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem .9rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: .45rem;
  transition: border-color .14s;
}
.notif-item.unread { background: rgba(255,138,0,.06); border-color: rgba(255,138,0,.18); border-left: 3px solid var(--clr-orange); }
.notif-item:hover { border-color: rgba(255,255,255,.12); }
.notif-icon { flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: .83rem; font-weight: 600; margin-bottom: .15rem; }
.notif-text  { font-size: .77rem; color: rgba(255,255,255,.5); line-height: 1.4; }
.notif-time  { font-size: .68rem; color: rgba(255,255,255,.28); margin-top: .25rem; }

/* ─── AUTH PAGES ─────────────────────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem .875rem;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: rgba(6,16,30,.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.5rem;
  overflow: hidden;
}
.auth-card-header {
  padding: 1.75rem 1.75rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.auth-logo { width: 52px; height: 52px; border-radius: 1rem; background: linear-gradient(135deg,#ff8a00,#ff5e00); display:inline-flex; align-items:center; justify-content:center; margin-bottom: .75rem; box-shadow: 0 0 24px rgba(255,120,0,.35); }
.auth-card-body { padding: 1.5rem 1.75rem; }
.auth-card-footer { padding: 1rem 1.75rem; border-top: 1px solid rgba(255,255,255,.07); text-align: center; background: rgba(255,255,255,.02); }
.auth-divider { position:relative; text-align:center; margin:1.25rem 0; }
.auth-divider::before { content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:rgba(255,255,255,.09); }
.auth-divider span { position:relative; background:rgba(6,16,30,.88); padding:0 .75rem; color:rgba(255,255,255,.3); font-size:.78rem; }

/* ─── CHAT / MESSAGERIE ──────────────────────────────────────────────────────── */
.chat-msg-own   { background: rgba(255,138,0,.15); border: 1px solid rgba(255,138,0,.2); border-radius: 1rem 1rem 0 1rem; padding: .55rem .8rem; max-width: 75%; align-self: flex-end; }
.chat-msg-other { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 1rem 1rem 1rem 0; padding: .55rem .8rem; max-width: 75%; align-self: flex-start; }
.chat-msg-text  { font-size: .84rem; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; }
.chat-msg-time  { font-size: .65rem; color: rgba(255,255,255,.3); margin-top: .2rem; }

/* ─── RESPONSIVE HELPERS ─────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .page-wrap, .page-wrap-wide, .page-wrap-narrow { padding: .75rem .75rem 2rem; }
  .page-hd .page-title { font-size: 1.2rem; }
  .stat-pill .val { font-size: .98rem; }
  .stat-pill .lbl { font-size: .57rem; }
  .card-body { padding: .75rem !important; }
  .hide-xs { display: none !important; }
  .modal-content { border-radius: 1rem !important; }
  .auth-card { border-radius: 1.25rem; }
  .auth-card-header, .auth-card-body, .auth-card-footer { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 768px) {
  .hide-sm { display: none !important; }
  .table-responsive { border-radius: var(--radius); overflow: hidden; }
}

/* ─── DASHBOARD ──────────────────────────────────────────────────────────────── */

/* Sélecteur de jour (home + coach/client) */
.day-btn {
    flex: 0 0 auto;
    min-width: 58px;
    padding: .45rem .35rem;
    border-radius: .75rem;
    border: 1.5px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.65);
    text-decoration: none;
    text-align: center;
    transition: all .15s ease;
    display: block;
}
.day-btn:hover   { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.2); text-decoration: none; }
.day-btn.today   { border-color: rgba(255,193,7,.45); }
.day-btn.active  { background: linear-gradient(135deg,#ff8a00,#ff5e00); border-color: transparent; color: #fff; box-shadow: 0 0 14px rgba(255,120,0,.3); }
.day-btn .day-name  { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.day-btn .day-num   { font-size: 1.15rem; font-weight: 800; line-height: 1.1; margin: .1rem 0; }
.day-btn .day-month { font-size: .6rem; color: rgba(255,255,255,.35); }
.day-btn.active .day-month { color: rgba(255,255,255,.6); }
.day-dots { display: flex; gap: 2px; justify-content: center; margin-top: .3rem; }
.day-dot  { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.15); }
.day-dot.on { background: var(--dot-c, #fff); }

/* Métriques circulaires (home dashboard) */
.metrics-scroll { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: none; }
.metrics-scroll::-webkit-scrollbar { display: none; }
.metric-card {
    flex: 0 0 auto;
    min-width: 100px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 1rem;
    padding: .75rem .5rem .65rem;
    text-align: center;
}
.metric-card canvas { width: 80px !important; height: 80px !important; margin: 0 auto; display: block; }
.metric-label { font-size: .67rem; color: rgba(255,255,255,.4); margin-top: .4rem; }
.metric-val   { font-size: .78rem; font-weight: 700; margin-top: .1rem; }

/* Grille de navigation rapide (home) */
.qnav { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
@media (max-width: 400px) { .qnav { grid-template-columns: repeat(3, 1fr); } }
.qnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .75rem .25rem;
    border-radius: var(--radius);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    text-decoration: none;
    color: rgba(255,255,255,.7);
    font-size: .7rem;
    font-weight: 500;
    text-align: center;
    transition: all .15s;
    line-height: 1.2;
}
.qnav-item i { font-size: 1.25rem; }
.qnav-item:hover { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.18); text-decoration: none; }
.qnav-item.primary { background: rgba(255,138,0,.12); border-color: rgba(255,138,0,.25); color: #ffb347; }
.qnav-item.primary:hover { background: rgba(255,138,0,.2); color: #ffcc77; }
.qnav-item.danger { background: rgba(220,53,69,.1); border-color: rgba(220,53,69,.2); color: #ef5350; }

/* ─── MISC UTILITIES ─────────────────────────────────────────────────────────── */
.rounded-card { border-radius: var(--radius) !important; }
.border-glass  { border: 1px solid rgba(255,255,255,.08) !important; }
.bg-glass      { background: rgba(255,255,255,.04) !important; backdrop-filter: blur(12px); }
.shadow-orange { box-shadow: 0 0 18px var(--clr-orange-glow) !important; }
.cursor-pointer { cursor: pointer; }
.lh-tight { line-height: 1.25 !important; }
.fw-800 { font-weight: 800 !important; }
.fs-xs  { font-size: .72rem !important; }
.fs-sm  { font-size: .82rem !important; }
.fs-md  { font-size: .92rem !important; }
.gap-xs { gap: .25rem !important; }

/* Truncate text */
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Spinner override */
.spinner-border { border-color: rgba(255,255,255,.15) !important; border-top-color: var(--clr-orange) !important; }

/* Image rounded */
.img-avatar { border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.12); }

/* .rounded-circle button override (keep for + buttons) */
button.rounded-circle, a.rounded-circle.btn {
  background: linear-gradient(135deg,#ff8a00,#ff5e00) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 0 18px var(--clr-orange-glow);
}