/* public/assets/css/style.css */
:root{
  --bg1:#3c1b50;
  --bg2:#6a1c6b;
  --pink:#ff4fa0;

  /* RGB helpers (pour éviter les rgba() en dur et permettre le thème via variables) */
  --white: #fff;
  --white-rgb: 255,255,255;
  --black: #000;
  --black-rgb: 0,0,0;
  --pink-rgb: 255,79,160; /* correspond à --pink (#ff4fa0) */
  --accent: #2da5ff;
  --accent-rgb: 45,165,255;
  --dark-modal-rgb: 20,20,28;
  --hotpink-rgb: 255,105,180;
  --toast-success-rgb: 20,120,80;
  --toast-error-rgb: 160,40,70;

  --glass: rgba(var(--white-rgb),.10);
  --glass2: rgba(var(--white-rgb),.14);
  --text: rgba(var(--white-rgb),.92);
  --muted: rgba(var(--white-rgb),.72);
  --line: rgba(var(--white-rgb),.14);
  --shadow: 0 10px 30px rgba(var(--black-rgb),.28);
  --radius: 16px;
  --radius2: 18px;
  --safe: env(safe-area-inset-bottom, 0px);
  --safeTop: env(safe-area-inset-top, 0px);

  /* Palette étendue */
  --success: #33d17a;
  --green: #4cd964;
  --danger: #ff3b30;
  --warn: #ffd60a;

  --accent2: #1c74c5;
  --accent-hover: #1a8be0;

  --primary: #6b1b8e;

  --gray-ccc: #ccc;
  --gray-eee: #eee;
  --gray-ddd: #ddd;

  --light-bg: #f9f9f9;
  --light-bg2: #f5f5f5;
  --light-blue: #d9edf7;

  --blue: #1a73e8;

  --pink-hot: #ff2aa0;
  --pink-soft: #ff82c5;
  --pink2: #e91e63;

  --magenta: #ff3d8e;
  --magenta2: #d81b60;
  --pink3: #ff7096;

  --dark-1: #1c1c1c;
  --dark-2: #1e1e1e;
  --dark-3: #2b2b2b;
  --dark-line: #444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);

  /* Fond simplifié et figé */
  background: linear-gradient(75deg, var(--bg1) 0%, var(--bg2) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

.app{min-height:100%;display:flex;flex-direction:column}
.header{
  padding: calc(14px + var(--safeTop)) 16px 12px;
  background: rgba(var(--black-rgb),.18);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.headerRow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.4px}
.brand .logo{
  width:44px;height:22px;border-radius:999px;
  background: linear-gradient(90deg, var(--pink), rgba(var(--white-rgb),.35));
  box-shadow: 0 6px 14px rgba(var(--pink-rgb),.35);
}
.headerTitle{margin-top:10px;font-size:28px;font-weight:900}
.iconBtn{
  width:40px;height:40px;border-radius:12px;
  border:1px solid var(--line);
  background: rgba(var(--white-rgb),.06);
  color:var(--text);
  display:grid;place-items:center;
}
.main{padding:16px 16px calc(92px + var(--safe));flex:1}

.card{
  background: linear-gradient(180deg, rgba(var(--white-rgb),.11), rgba(var(--white-rgb),.06));
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.card + .card{margin-top:14px}
.cardPad{padding:14px}
.cardTitle{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px}
.cardSub{margin-top:4px;color:var(--muted);font-size:13px}
.cardActionRow{margin-top:10px;display:flex;justify-content:flex-end;gap:10px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 14px;border-radius:12px;
  border:1px solid rgba(var(--white-rgb),.18);
  background: linear-gradient(75deg, rgba(var(--pink-rgb),.75), rgba(var(--pink-rgb),.95));
  color:var(--white);
  box-shadow: 0 10px 20px rgba(var(--black-rgb),.22);
}
.btn.secondary{background: rgba(var(--white-rgb),.08)}
.btn.full{width:100%;height:46px;border-radius:14px;font-size:16px;font-weight:900}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  background: rgba(var(--black-rgb),.22);
  border:1px solid var(--line);
  padding:8px 12px;border-radius:999px;
  color: var(--muted);font-size:13px;
}
.pill .dot{width:10px;height:10px;border-radius:99px;background:var(--success)}

.input{
  width:100%;height:44px;padding:0 14px;border-radius: 12px;
  border:1px solid var(--line);background: rgba(var(--white-rgb),.08);
  color: var(--text);outline:none;
}
.field{margin-top:10px}
.label{font-size:13px;color:var(--muted);margin:0 0 6px 2px}
.row{display:flex;gap:10px}
.row > *{flex:1}
.smallLink{color: rgba(var(--white-rgb),.70); font-size:13px; text-align:right; margin-top:8px}

.list{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.item{
  display:flex;gap:10px;align-items:center;
  padding:12px 12px;border-radius: 14px;
  background: rgba(var(--white-rgb),.10);
  border: 1px solid rgba(var(--white-rgb),.14);
}
.avatar{width:40px;height:40px;border-radius:999px;background: rgba(var(--white-rgb),.20);flex:none;display:grid;place-items:center;font-weight:900}
.itemMain{flex:1;min-width:0}
.itemTitle{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itemMeta{margin-top:2px;color:var(--muted);font-size:13px}
.chev{opacity:.7;font-size:20px;flex:none}

.tabs{
  margin-top:14px;display:flex;justify-content:space-between;gap:14px;
  padding:0 4px;border-bottom:1px solid var(--line);
}
.tab{
  padding:10px 2px 12px;color: rgba(var(--white-rgb),.65);
  font-weight:800;position:relative;
}
.tab.active{color: var(--text)}
.tab.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;
  background: linear-gradient(90deg, var(--pink), rgba(var(--white-rgb),.20));
}

.sectionTitleRow{
  margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.sectionTitle{font-weight:900;font-size:18px}

.kpiBox{
  margin-top:12px;border-radius: 14px;overflow:hidden;border:1px solid var(--line);
}
.kpiRow{
  display:flex;align-items:center;gap:10px;padding:12px 12px;background: rgba(var(--white-rgb),.12);
}
.kpiRow + .kpiRow{border-top:1px solid rgba(var(--white-rgb),.12)}
.kpiIcon{width:34px;height:34px;border-radius:10px;background: rgba(var(--black-rgb),.22);border:1px solid rgba(var(--white-rgb),.14);display:grid;place-items:center}
.kpiVal{font-weight:900;font-size:20px}
.kpiSub{color:var(--muted);font-size:12px;margin-top:2px}
.kpiText{display:flex;flex-direction:column;gap:2px}

.bottomNav{
  position:fixed;left:0;right:0;bottom:0;
  padding: 10px 10px calc(10px + var(--safe));
  background: rgba(var(--black-rgb),.25);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display:flex;gap:6px;justify-content:space-between;
}
.navItem{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color: rgba(var(--white-rgb),.70);
  padding:8px 6px;border-radius: 14px;border:1px solid transparent;
  background: transparent;
}
.navItem .ico{font-size:18px}
.navItem span:last-child{font-size:12px;font-weight:800}
.navItem.active{
  color:var(--white);border-color: rgba(var(--white-rgb),.16);
  background: rgba(var(--pink-rgb),.18);
}
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom: calc(92px + var(--safe));
  background: rgba(var(--black-rgb),.62);
  color:var(--white);padding:10px 12px;border-radius: 14px;
  border:1px solid rgba(var(--white-rgb),.14);
  opacity:0;transition:opacity .25s ease;
}
.toast.show{opacity:1}
.toast.success{background: rgba(var(--toast-success-rgb),.70)}
.toast.error{background: rgba(var(--toast-error-rgb),.70)}

/* === Correction : 3 blocs bilan côte à côte, même sur mobile === */
#cardProgress,
#cardPlateau,
#cardRegress {
  display: inline-block !important;
  width: 32%;
  vertical-align: top;
  margin-right: 1%;
}

#cardRegress { margin-right: 0; }

@media (max-width: 600px) {
  #cardProgress,
  #cardPlateau,
  #cardRegress {
    width: 32% !important;
    display: inline-block !important;
  }
}

/* === Uniformiser la hauteur des 3 blocs bilan === */
#cardProgress,
#cardPlateau,
#cardRegress {
  display: inline-block !important;
  width: 32%;
  vertical-align: top;
  margin-right: 1%;
  min-height: 96px; /* même hauteur pour tous */
  box-sizing: border-box;
}

#cardRegress { margin-right: 0; }

#cardProgress strong,
#cardPlateau strong,
#cardRegress strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

#cardProgress span,
#cardPlateau span,
#cardRegress span {
  display: block;
  font-size: 0.85rem;
  opacity: 0.9;
  line-height: 1.2;
}

/* Reste côte à côte sur mobile */
@media (max-width: 600px) {
  #cardProgress,
  #cardPlateau,
  #cardRegress {
    width: 32% !important;
    min-height: 120px;
    display: inline-block !important;
  }
}

/* === Correction finale : blocs toujours alignés et même hauteur === */
#bilan-summary {
  display: flex !important;
  justify-content: space-between;
  align-items: stretch; /* 🔹 assure la même hauteur */
  gap: 0.75rem;
  min-height: 92px;
  flex-wrap: nowrap;
}

#bilan-summary > div {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: rgba(var(--white-rgb),.08);
  border-radius: 12px;
  padding: 0.8rem;
  box-sizing: border-box;
  color: var(--white);
  min-height: 90px;
}

#bilan-summary > div strong {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
}

#bilan-summary > div span {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* ✅ reste sur une seule ligne même sur mobile */
@media (max-width: 600px) {
  #bilan-summary {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  #bilan-summary > div {
    flex: 0 0 32%;
    min-width: 180px;
    scroll-snap-align: start;
  }
}

/* === Tuile de bilan sélectionnée === */
[data-tile].active {
  border: 2px solid var(--white);
  box-shadow: 0 0 8px rgba(var(--white-rgb),.40);
  transform: scale(1.02);
  transition: all 0.2s ease;
}

.bilanCarousel {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding: 10px 0;
  scroll-snap-type: x mandatory;
}

.bilanCard {
  min-width: 140px;
  flex-shrink: 0;
  background: rgba(var(--white-rgb),.06);
  border-radius: 10px;
  padding: 8px 12px;
  scroll-snap-align: start;
  cursor: pointer;
  transition: all 0.25s;
}

.bilanCard.active {
  background: var(--accent-color, var(--accent));
  color: var(--white);
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.40);
}

.bilanDate {
  font-weight: bold;
  margin-bottom: 4px;
}

.bilanResume {
  font-size: 0.85em;
  opacity: 0.85;
  line-height: 1.2em;
}


.clientItem {
  display: flex;
  align-items: center;
  background: rgba(var(--white-rgb),.05);
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  margin-top: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid transparent;
}

.clientItem:hover {
  background: rgba(var(--white-rgb),.10);
  border-color: rgba(var(--white-rgb),.15);
  transform: translateY(-1px);
}

.clientItem:active {
  transform: scale(0.98);
  background: rgba(var(--accent-rgb),.15);
}

/* Avatar et infos ensemble */
.clientItem .avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-color, var(--accent)), var(--accent2));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1em;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(var(--accent-rgb),.30);
  margin-right: 10px;
}

.clientItem .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  overflow: hidden;
}

.clientItem .info .name {
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clientItem .info .email {
  font-size: 0.8em;
  color: rgba(var(--white-rgb),.70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clientItem .arrow {
  opacity: 0.4;
  transition: 0.2s;
  margin-left: 8px;
}

.clientItem:hover .arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* ——— Champ de recherche client modernisé ——— */
#clientSearch {
  width: 100%;
  padding: 10px 14px;
  padding-left: 38px; /* espace pour l’icône intégrée via pseudo-élément */
  border-radius: 10px;
  border: 1px solid rgba(var(--white-rgb),.10);
  background: rgba(var(--white-rgb),.08);
  color: var(--white);
  font-size: 0.95em;
  transition: all 0.25s ease;
  outline: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' opacity='0.6' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27a6.471 6.471 0 001.48-5.34C15.28 5.59 12.7 3 9.5 3S3.72 5.59 3.72 8.39c0 2.79 2.58 5.39 5.78 5.39 1.61 0 3.09-.59 4.23-1.56l.27.28v.79l4.25 4.25c.41.41 1.07.41 1.48 0a1.04 1.04 0 000-1.48L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px;
}

#clientSearch::placeholder {
  color: rgba(var(--white-rgb),.50);
  font-style: italic;
}

#clientSearch:focus {
  border-color: var(--accent-color, var(--accent));
  background: rgba(var(--white-rgb),.12);
  box-shadow: 0 0 6px rgba(var(--accent-rgb),.40);
}

/* ——— Bloc Nouveau Bilan ——— */

#newBilanBlock {
  margin-top: 20px;
  background: rgba(var(--white-rgb),.05);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 0 10px rgba(var(--black-rgb),.20);
}

#newBilanBlock h3 {
  margin-top: 0;
  font-size: 1.2em;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 6px;
}

#newBilanFields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bilanField {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bilanField label {
  font-size: 0.9em;
  opacity: 0.8;
}

.numberInput {
  display: flex;
  align-items: center;
  background: rgba(var(--white-rgb),.08);
  border-radius: 8px;
  overflow: hidden;
}

.numberInput input {
  flex: 1;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 1em;
  padding: 8px;
  outline: none;
}

.numberInput input::-webkit-outer-spin-button,
.numberInput input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.numberInput .btnMinus,
.numberInput .btnPlus {
  width: 42px;
  height: 42px;
  border: none;
  background: rgba(var(--white-rgb),.10);
  color: var(--white);
  font-size: 1.2em;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.numberInput .btnMinus:hover,
.numberInput .btnPlus:hover {
  background: var(--accent-color, var(--accent));
  color: var(--white);
}

.numberInput .btnMinus:active,
.numberInput .btnPlus:active {
  transform: scale(0.95);
}

#btnSaveBilan {
  background: var(--accent-color, var(--accent));
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 1em;
  font-weight: bold;
  color: var(--white);
  cursor: pointer;
  transition: background 0.25s ease;
}

#btnSaveBilan:hover {
  background: var(--accent-hover);
}


/* ——— Toggle Sexe H/F ——— */
.sexeSwitch {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  background: rgba(var(--white-rgb),.08);
  border-radius: 10px;
  padding: 5px;
}

.sexeBtn {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(var(--white-rgb),.70);
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.sexeBtn.active {
  background: var(--accent-color, var(--accent));
  color: var(--white);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.50);
}

.sexeBtn:hover:not(.active) {
  background: rgba(var(--white-rgb),.10);
  color: var(--white);
}

.sexeBtn:active {
  transform: scale(0.97);
}

#btnChangeClient {
  width:100%;
}

.conseilsBloc {
  background: var(--light-bg);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
  font-size: 0.9em;
  color: var(--black);
}
.conseilsBloc h4 {
  margin-top: 0;
}
.conseilsBloc .indic {
  margin-top: 5px;
  padding-left: 5px;
  border-left: 3px solid var(--gray-ccc);
}


.adminStats ul {
  list-style: none;
  padding-left: 0;
}
.adminStats li {
  margin: 4px 0;
}
.adminActions {
  margin-top: 15px;
}
.adminActions .buttons .btnSmall {
  margin: 3px;
}
.resetBox {
  margin-top: 10px;
}
.btnSmall {
  background: var(--primary);
  color: var(--white);
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
.btnSmall:hover {
  opacity: 0.85;
}

.userResults {
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(var(--white-rgb),.10);
}

.userResultCard {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(var(--white-rgb),.15);
  cursor: pointer;
  transition: background 0.2s;
}
.userResultCard:hover {
  background: rgba(var(--white-rgb),.15);
}
.userHeader {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: var(--white);
  font-size: 15px;
}
.userRole {
  opacity: 0.7;
  font-size: 13px;
  text-transform: capitalize;
}
.userEmail {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 3px;
  color: var(--gray-eee);
}


.metricLine {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.3em 0.5em;
  border-bottom: 1px solid rgba(var(--white-rgb),.05);
}

.metricLine .metricLabel {
  flex: 1 1 auto;
  font-weight: 500;
  font-size: 0.95em;
}

.metricLine .metricValue {
  flex-shrink: 0;
  font-weight: 600;
  margin-left: 0.5em;
}

.metricLine .metricVariation {
  flex-shrink: 0;
  margin-left: 0.8em;
  font-size: 0.8em;
  opacity: 0.8;
}

.metricComment {
  font-size: 0.8em;
  color: rgba(var(--white-rgb),.70);
  margin-left: 0.8em;
  margin-bottom: 0.4em;
}

/* -----------------------------------------------------
   SECTIONS — Page stats.html
----------------------------------------------------- */

.sectionCard {
  background: rgba(var(--white-rgb),.06);
  border-radius: 16px;
  padding: 16px;
  margin: 14px 10px;
  box-shadow: 0 2px 8px rgba(var(--black-rgb),.20);
  transition: transform 0.2s ease, background 0.2s ease;
}

.sectionCard:hover {
  background: rgba(var(--white-rgb),.08);
  transform: translateY(-2px);
}

.sectionCard h3 {
  margin-top: 0;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--white);
}

.lightText {
  font-size: 0.9em;
  opacity: 0.85;
  color: var(--gray-ddd);
}

/* -----------------------------------------------------
   MÉTRIQUES — Alignement fluide et lecture rapide
----------------------------------------------------- */

.metricLine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(var(--white-rgb),.10);
}

.metricLabel {
  flex: 1;
  font-size: 0.95em;
  color: var(--white);
}

.metricValue {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--white);
  text-align: right;
}

.metricVariation {
  margin-left: 6px;
  font-size: 0.85em;
  opacity: 0.8;
}

.metricVariation.up {
  color: var(--green); /* vert positif */
}

.metricVariation.down {
  color: var(--danger); /* rouge négatif */
}

/* -----------------------------------------------------
   COMMENTAIRES & PICTOGRAMMES
----------------------------------------------------- */

.metricComment {
  font-size: 0.8em;
  color: rgba(var(--white-rgb),.70);
  margin: 2px 0 6px 0;
  padding-left: 0.5em;
  border-left: 2px solid rgba(var(--white-rgb),.15);
}

.metricStatus {
  margin-left: 0.8em;
  font-size: 1em;
}

.metricStatus.low {
  color: var(--danger); /* rouge */
}

.metricStatus.normal {
  color: var(--green); /* vert */
}

.metricStatus.high {
  color: var(--warn); /* jaune/orangé */
}

/* -----------------------------------------------------
   CONSEILS — Style motivant
----------------------------------------------------- */

#conseilsContainer .conseilCard {
  background: rgba(var(--white-rgb),.05);
  border-left: 4px solid var(--pink-hot);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 0.9em;
  color: var(--white);
}

#conseilsContainer .conseilCard strong {
  color: var(--pink-soft);
}

/* -----------------------------------------------------
   MOTIVATION — mise en avant finale
----------------------------------------------------- */

#motivationSection {
  text-align: center;
  background: linear-gradient(90deg, var(--pink-hot), var(--pink2));
  color: var(--white);
  font-weight: 600;
  padding: 20px;
  border-radius: 14px;
  margin: 20px 10px;
}

#motivationSection h3 {
  color: var(--white);
}

#motivationText {
  font-size: 1em;
  line-height: 1.4em;
}


.bilanSelector {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 12px;
  padding: 4px 0;
}

.bilanCardSelect {
  background: rgba(var(--white-rgb),.08);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.2s, transform 0.1s;
}

.bilanCardSelect.active {
  background: linear-gradient(90deg, var(--pink-hot), var(--pink2));
  color: var(--white);
  font-weight: 600;
  transform: scale(1.05);
}

/* --- Modale spécifique : changement de mot de passe --- */
.modal-password {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(var(--black-rgb),.60);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-password.hidden {
  display: none;
}
.modal-password-content {
  background: var(--white);
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 6px 20px rgba(var(--black-rgb),.25);
}
.modal-password-content h3 {
  margin-top: 0;
  color: var(--blue);
}
.modal-password-content label {
  display: block;
  margin-top: 12px;
  font-weight: 600;
}
.modal-password-content input {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid var(--gray-ccc);
  border-radius: 4px;
}
.modal-password-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}


/* ✅ Ajustement du bloc de stats admin */
.statGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.statCard {
  background: linear-gradient(75deg, var(--magenta), var(--magenta2));
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  color: var(--white);
  box-shadow: 0 2px 4px rgba(var(--black-rgb),.15);
}

.statValue {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}

.statLabel {
  font-size: 15px;
  opacity: 0.9;
  line-height: 1.3em;
}







/* ✅ Modale d'importation Deciplus */
.modal-deciplus {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(var(--black-rgb),.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-deciplus.hidden {
  display: none;
}

.modal-deciplus-content {
  background: var(--dark-1);
  color: var(--white);
  border: 2px solid var(--magenta);
  border-radius: 12px;
  padding: 28px 24px;
  width: 320px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(var(--black-rgb),.50);
}

.modal-deciplus-content h3 {
  margin-bottom: 10px;
  color: var(--magenta);
}

.modal-deciplus-progress {
  background: rgba(var(--white-rgb),.15);
  border-radius: 6px;
  height: 10px;
  width: 100%;
  margin: 15px 0;
  overflow: hidden;
}

#modalDeciplusBar {
  background: linear-gradient(90deg, var(--magenta), var(--pink3));
  height: 100%;
  width: 0%;
  transition: width 0.4s ease;
}

#modalDeciplusStatus {
  font-size: 15px;
  margin-top: 8px;
}

#modalDeciplusInfo {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 8px;
}


/* ✅ Modale d’ajout utilisateur (coach / admin) */
#modalAddUser.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(var(--black-rgb),.80);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#modalAddUser.hidden {
  display: none;
}

#modalAddUser .modal-content {
  background: var(--dark-2);
  border: 2px solid var(--magenta);
  border-radius: 12px;
  width: 340px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(var(--black-rgb),.50);
  color: var(--white);
}

#modalAddUser h3 {
  margin-bottom: 10px;
  color: var(--magenta);
}

#modalAddUser label {
  display: block;
  text-align: left;
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.9;
}

#modalAddUser input,
#modalAddUser select {
  width: 100%;
  margin-top: 5px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--dark-line);
  background: var(--dark-3);
  color: var(--white);
  font-size: 14px;
}

#modalAddUser .btn {
  margin-top: 10px;
}

#btnConfirmPass {
  background: var(--accent-color, var(--accent));
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 1em;
  font-weight: bold;
  color: var(--white);
  cursor: pointer;
  transition: background 0.25s ease;
}

#btnCancelPass {

  background: var(--accent-color, var(--accent));
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 1em;
  font-weight: bold;
  color: var(--white);
  cursor: pointer;
  transition: background 0.25s ease;
}

/* Harmonisation coach ↔ client */
.bilanHistoryList {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin-top: 0.5em;
}

.bilanItem {
  background: var(--light-bg2);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.2s;
}

.bilanItem.active {
  background: var(--light-blue);
  font-weight: 600;
}

.bilanDetails {
  margin-top: 1em;
}


/* === Admin Gamification polish (safe, sans changer le layout) === */

/* Tabs : un peu plus lisibles */
.tabs{
  gap: 10px;
}
.tabs .tab{
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
  letter-spacing: .2px;
  background-color: var(--bg1);
margin-bottom: 10px;
}
.tabs .tab.active{
  box-shadow: 0 10px 24px rgba(var(--black-rgb),.18);
  background-color: var(--pink);
}

/* Bloc actions */
.gmAdminActions{
  gap: 8px;
  align-items: center;
}
.gmAdminActions .btn{
  height: 38px;
  padding: 0 12px;
  border-radius: 14px;
}

/* Liste : plus “carte”, plus lisible */
.gmAdminList{
  margin-top: 14px;
}
.gmAdminRow{
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(var(--white-rgb),.07);
  border: 1px solid rgba(var(--white-rgb),.16);
  box-shadow: 0 10px 24px rgba(var(--black-rgb),.12);
}
.gmAdminRowTitle{
  font-size: 15px;
  line-height: 1.15;
}
.gmAdminRowMeta{
  font-size: 12px;
  line-height: 1.25;
  margin-top: 4px;
  opacity: .85;
}

/* Boutons de ligne : compacts et alignés */
.gmAdminRowBtns{
  gap: 8px;
}
.gmAdminRowBtns .btn.secondary{
  background: rgba(var(--black-rgb),.18);
  border: 1px solid rgba(var(--white-rgb),.14);
}
.gmAdminRowBtns .btn.secondary:hover{
  background: rgba(var(--black-rgb),.28);
}

/* Modal : meilleure lisibilité + champs plus “app” */
.gmModal{
  backdrop-filter: blur(4px);
}
.gmModalCard{
  border-radius: 18px;
  border: 1px solid rgba(var(--white-rgb),.16);
  background: rgba(var(--dark-modal-rgb),.92);
  box-shadow: 0 18px 60px rgba(var(--black-rgb),.45);
}
.gmFormRow{
  margin-top: 12px;
}
.gmFormRow .label{
  font-size: 12px;
  opacity: .85;
}
.gmFormRow .input{
  height: 42px;
  border-radius: 14px;
  padding: 0 12px;
  background: rgba(var(--white-rgb),.08);
  border: 1px solid rgba(var(--white-rgb),.14);
}
.gmFormRow .input:focus{
  outline: none;
  border-color: rgba(var(--white-rgb),.32);
  box-shadow: 0 0 0 3px rgba(var(--hotpink-rgb),.12);
}

/* Modale : zone boutons */
.cardActionRow{
  gap: 10px;
}
.cardActionRow .btn{
  height: 42px;
  border-radius: 14px;
}

/* Mobile : un peu plus de respiration */
@media (max-width: 420px){
  .gmAdminRow{
    padding: 12px;
  }
  .gmAdminRowBtns .btn{
    height: 36px;
    padding: 0 10px;
  }
}