/* ==========================================================================
   East Sport Training — Design system "Liquid Glass"
   Palette inchangée : vert #7DC242 (accent) + anthracite #2D2D2D (primary)
   Langage visuel : verre liquide (iOS 26), fond vivant animé, sidebar
   flottante en verre, cartes translucides, reflets spéculaires
   ========================================================================== */

/* Police Inter auto-hébergée (variable, 100–900) — aucune dépendance CDN */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-ext-wght.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Couleurs du thème (inchangées) */
  --primary: #2D2D2D;
  --primary-dark: #1a1a1a;
  --accent: #7DC242;
  --accent-dark: #5fa32e;
  --bg: #eef1ea;
  --card: #ffffff;
  --text: #2D2D2D;
  --muted: #6e7468;
  --border: #dde3d6;
  --success: #27ae60;
  --warning: #f39c12;
  --danger: #c0392b;

  /* Surfaces & teintes dérivées (issues de la palette) */
  --accent-soft: rgba(125, 194, 66, .14);
  --accent-tint: rgba(125, 194, 66, .10);
  --surface-2: rgba(255, 255, 255, .45);
  --heading: var(--primary);

  /* [UI Enhanced] Verre liquide — recette lumière */
  --glass-card: rgba(255, 255, 255, .55);
  --glass-card-strong: rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .65);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .85);
  --glass-sidebar: rgba(30, 30, 30, .68);
  --field: rgba(255, 255, 255, .6);
  --hairline: rgba(45, 45, 45, .10);

  /* Ombres diffuses */
  --shadow-xs: 0 1px 2px rgba(45, 45, 45, .05);
  --shadow-sm: 0 4px 16px rgba(45, 45, 45, .07);
  --shadow-md: 0 12px 36px rgba(45, 45, 45, .11);
  --shadow-lg: 0 32px 90px rgba(45, 45, 45, .22), 0 10px 28px rgba(45, 45, 45, .10);
  --glow-accent: 0 10px 30px rgba(125, 194, 66, .45);
  --ring: 0 0 0 4px rgba(125, 194, 66, .22);

  /* Rayons — courbes généreuses */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 980px;

  /* Espacement (échelle 4px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Courbes d'animation Apple */
  --transition: .22s cubic-bezier(.25, .1, .25, 1);
  --spring: .4s cubic-bezier(.32, .72, 0, 1);
}

/* ===== Mode sombre — mêmes accents (vert), verre assombri ===== */
:root[data-theme="dark"] {
  --bg: #101316;
  --card: #21262c;
  --text: #e6e8ea;
  --muted: #9aa1a9;
  --border: #333a42;
  --accent-tint: rgba(125, 194, 66, .12);
  --surface-2: rgba(255, 255, 255, .04);
  --heading: #f1f3f5;
  --glass-card: rgba(30, 35, 41, .55);
  --glass-card-strong: rgba(30, 35, 41, .75);
  --glass-border: rgba(255, 255, 255, .10);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .08);
  --glass-sidebar: rgba(16, 18, 21, .62);
  --field: rgba(13, 15, 18, .45);
  --hairline: rgba(255, 255, 255, .10);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, .45);
  --shadow-lg: 0 32px 90px rgba(0, 0, 0, .6), 0 10px 28px rgba(0, 0, 0, .4);
  --success: #5fd391;
  --danger: #e57368;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip; /* la page ne défile jamais horizontalement (clip préserve les éléments collants) */
  max-width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Jamais de césure ni de coupure des mots en milieu de mot, quelle que soit la
     taille de l'écran : un mot reste toujours entier et passe à la ligne en entier. */
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* On force la même règle partout pour neutraliser les coupures héritées d'autres
   composants (tableaux, cartes, badges, etc.). */
*,
*::before,
*::after {
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}

/* [UI Enhanced] Fond vivant : halos de couleur qui dérivent lentement
   (le verre liquide a besoin d'un arrière-plan riche pour exister) */
@keyframes drift-a {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(8vw, 6vh) scale(1.18); }
  100% { transform: translate(-4vw, -3vh) scale(1); }
}
@keyframes drift-b {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-7vw, -5vh) scale(1.22); }
  100% { transform: translate(5vw, 4vh) scale(1); }
}
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
body::before {
  width: 60vw; height: 60vw;
  top: -18vw; right: -14vw;
  background: radial-gradient(circle at center, rgba(125, 194, 66, .30), rgba(125, 194, 66, .10) 45%, transparent 70%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
body::after {
  width: 55vw; height: 55vw;
  bottom: -20vw; left: -12vw;
  background: radial-gradient(circle at center, rgba(45, 45, 45, .16), rgba(125, 194, 66, .10) 50%, transparent 72%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
:root[data-theme="dark"] body::before {
  background: radial-gradient(circle at center, rgba(125, 194, 66, .16), rgba(125, 194, 66, .05) 45%, transparent 70%);
}
:root[data-theme="dark"] body::after {
  background: radial-gradient(circle at center, rgba(95, 163, 46, .12), rgba(255, 255, 255, .03) 50%, transparent 72%);
}

a { color: var(--accent-dark); text-decoration: none; transition: color var(--transition), opacity var(--transition); }
a:hover { color: var(--accent); }
:root[data-theme="dark"] a { color: var(--accent); }

::selection { background: rgba(125, 194, 66, .3); color: var(--primary); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Scrollbar discrète (webkit) */
* { scrollbar-width: thin; scrollbar-color: rgba(122, 122, 122, .35) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(122, 122, 122, .35); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(122, 122, 122, .55); background-clip: content-box; }

/* Animation d'apparition douce */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   Navbar — base mobile/tablette : barre du haut en verre dépoli sombre.
   Sur desktop (≥ 1100px) elle devient une SIDEBAR flottante en verre.
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--glass-sidebar);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--sp-4);
  height: 58px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 1px 16px rgba(0, 0, 0, .16);
}
.navbar .brand {
  display: flex;
  align-items: center;
  margin-right: 16px;
  flex-shrink: 0;
  transition: opacity var(--transition);
  text-decoration: none;
}
.brand-logo { height: 38px; width: auto; display: block; }
.brand-name {
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: -.1px;
  margin-left: 10px;
  white-space: nowrap;
}
.navbar .brand:hover { opacity: .75; text-decoration: none; }

.navbar a.nav-link {
  position: relative;
  color: rgba(255, 255, 255, .72);
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1px;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.navbar a.nav-link:hover { background: rgba(255, 255, 255, .10); color: #fff; text-decoration: none; }
.navbar a.nav-link.active {
  color: #fff;
  background: rgba(125, 194, 66, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}
.navbar .spacer { flex: 1; }
.navbar .user { color: rgba(255, 255, 255, .6); font-size: .8rem; margin-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

/* Groupes dépliables de la navigation (Réseau, Suivi, Finances, Contenu) */
.navbar .nav-group { min-width: 0; }
.navbar .nav-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding: 11px 14px;
  border-radius: 13px;
  color: rgba(255, 255, 255, .9);
  font-size: .85rem;
  font-weight: 600;
  transition: background var(--transition), color var(--transition);
}
.navbar .nav-group-summary:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.nav-group-summary::-webkit-details-marker { display: none; }
.nav-group-summary::after {
  content: "▾";
  font-size: .7rem;
  opacity: .7;
  transition: transform var(--transition);
}
.nav-group[open] > .nav-group-summary::after { transform: rotate(180deg); }
.navbar .nav-group-items { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.navbar .nav-group-items a.nav-link { padding-left: 30px; font-size: .82rem; }

/* Avatar circulaire dans la navbar */
.nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 8px;
  flex-shrink: 0;
  border: 2px solid rgba(125, 194, 66, .5);
  transition: border-color var(--transition), transform var(--spring);
  text-decoration: none;
}
.nav-avatar:hover { border-color: var(--accent); transform: scale(1.08); text-decoration: none; }
.nav-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-avatar .avatar-initiales {
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .5px;
}

/* Avatar grande taille (page profil) */
.avatar-xl {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 6px rgba(125, 194, 66, .15);
}
.avatar-xl-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-xl-initiales {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Bouton croix de fermeture du drawer (mobile) — caché sur desktop */
.nav-close { display: none; }

.badge-count {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  font-size: .7rem;
  font-weight: 700;
  margin-left: 5px;
  box-shadow: 0 0 12px rgba(125, 194, 66, .55);
}

/* Bouton bascule clair / sombre */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .8);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
  transition: background var(--transition), transform var(--spring);
}
.theme-toggle:hover { background: rgba(255, 255, 255, .12); transform: scale(1.06); }
.theme-toggle::before { content: "🌙"; }
:root[data-theme="dark"] .theme-toggle::before { content: "☀️"; }

/* ==========================================================================
   Layout & typographie
   ========================================================================== */
.container { max-width: 1180px; margin: var(--sp-6) auto; padding: 0 var(--sp-5); }

h1 {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 0 0 var(--sp-1);
  color: var(--heading);
  line-height: 1.12;
}
h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--heading);
  letter-spacing: -.016em;
}
.subtitle { color: var(--muted); margin: 0 0 var(--sp-5); font-size: .96rem; letter-spacing: -.005em; }

/* [UI Enhanced] Carte en verre liquide : translucide, floutée, liseré
   spéculaire en haut (reflet de lumière) */
.card {
  background: var(--glass-card);
  -webkit-backdrop-filter: saturate(160%) blur(28px);
  backdrop-filter: saturate(160%) blur(28px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm), var(--glass-edge);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  animation: rise .55s cubic-bezier(.25, .1, .25, 1) both;
  transition: box-shadow var(--transition), transform var(--spring), background var(--transition);
}
.card:hover { box-shadow: var(--shadow-md), var(--glass-edge); }

/* Conteneur de tableau : le tableau large défile horizontalement DANS la carte,
   sans jamais élargir la page (qui reste cadrée). */
.table-card { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   Grille KPI — tuiles de verre qui flottent au survol
   ========================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.stat {
  position: relative;
  background: var(--glass-card);
  -webkit-backdrop-filter: saturate(160%) blur(28px);
  backdrop-filter: saturate(160%) blur(28px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  box-shadow: var(--shadow-sm), var(--glass-edge);
  overflow: hidden;
  animation: rise .55s cubic-bezier(.25, .1, .25, 1) both;
  transition: box-shadow var(--transition), transform var(--spring);
}
.stat:nth-child(2) { animation-delay: .06s; }
.stat:nth-child(3) { animation-delay: .12s; }
.stat:nth-child(4) { animation-delay: .18s; }
.stat:nth-child(5) { animation-delay: .24s; }
.stat:nth-child(6) { animation-delay: .30s; }
.stat:hover {
  box-shadow: var(--shadow-md), var(--glass-edge), 0 0 24px rgba(125, 194, 66, .18);
  transform: translateY(-4px) scale(1.015);
}
.stat .value {
  /* Taille adaptative : se réduit pour les grands montants, sans déborder ni se couper */
  font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.1rem);
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow-wrap: normal;
}
.stat .label {
  color: var(--muted);
  font-size: .73rem;
  font-weight: 500;
  letter-spacing: .35px;
  text-transform: uppercase;
  margin-top: 7px;
}

/* Bandeau d'impersonation : un admin consulte l'espace d'un coach */
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 9px 18px;
  background: linear-gradient(180deg, rgba(125, 194, 66, .96), rgba(95, 163, 46, .96));
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
}
.impersonation-banner .impersonation-retour {
  background: #fff;
  color: var(--accent-dark);
  font-weight: 800;
}
.impersonation-banner .impersonation-retour:hover { filter: brightness(.96); }

/* Bandeau d'alerte rendement horaire sur le tableau de bord coach */
.alerte-rendement {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-left: 4px solid var(--danger);
  background: rgba(192, 57, 43, .08);
}
.alerte-rendement-icone { font-size: 1.5rem; line-height: 1.2; }
.alerte-rendement strong { color: var(--danger); }
:root[data-theme="dark"] .alerte-rendement { background: rgba(229, 115, 104, .12); }
:root[data-theme="dark"] .alerte-rendement strong { color: #e57368; }

/* [UI Enhanced] Bloc « Mes finances » du tableau de bord : section mise en
   avant (l'info prioritaire de l'admin), avec la rentabilité en hero. */
.finance-section { margin-bottom: var(--sp-5); }
.stat-primary {
  border-color: rgba(125, 194, 66, .5);
  box-shadow: var(--shadow-md), var(--glass-edge), 0 0 30px rgba(125, 194, 66, .18);
}
.stat-primary .value { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); }
/* Le bloc finances : cases un peu plus larges car les montants y sont les plus longs */
.finance-section { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Section reléguée au second plan (activité des coachs) : titres + sous-titre
   suffisent à la hiérarchie ; on garde la lisibilité, juste un léger retrait. */
.section-secondaire { margin-top: var(--sp-6); }

/* ==========================================================================
   Podium top 3 (dashboard admin) — or au centre, argent et bronze sur
   les côtés, cartes de verre qui apparaissent en cascade
   ========================================================================== */
.podium {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-4);
  margin: var(--sp-5) 0 var(--sp-2);
}
.podium-card {
  position: relative;
  flex: 1;
  text-align: center;
  background: var(--glass-card);
  -webkit-backdrop-filter: saturate(160%) blur(28px);
  backdrop-filter: saturate(160%) blur(28px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 20px 16px 16px;
  box-shadow: var(--shadow-sm), var(--glass-edge);
  animation: rise .6s cubic-bezier(.25, .1, .25, 1) both;
  transition: transform var(--spring), box-shadow var(--transition);
}
.podium-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), var(--glass-edge); }
/* 1er au centre, surélevé et lumineux ; il apparaît en dernier */
.podium-1 {
  order: 2;
  padding: 28px 16px 22px;
  border-color: rgba(125, 194, 66, .45);
  box-shadow: var(--shadow-md), var(--glass-edge), 0 0 34px rgba(125, 194, 66, .22);
  animation-delay: .28s;
}
.podium-1:hover { box-shadow: var(--shadow-md), var(--glass-edge), 0 0 44px rgba(125, 194, 66, .32); }
.podium-2 { order: 1; animation-delay: .08s; }
.podium-3 { order: 3; animation-delay: .16s; }
.podium-rank {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  opacity: .5;
}
.podium-medal { font-size: 1.5rem; line-height: 1; margin-bottom: 8px; }
@keyframes medal-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.podium-1 .podium-medal { font-size: 2rem; display: inline-block; animation: medal-float 2.6s ease-in-out infinite; }
.podium-initiales {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .5px;
  margin: 0 auto 10px;
  box-shadow: 0 4px 14px rgba(125, 194, 66, .35);
}
.podium-1 .podium-initiales { width: 64px; height: 64px; font-size: 1.15rem; }
.podium-name a { color: var(--heading); font-weight: 600; }
.podium-club { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.podium-value {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: 8px;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}
.podium-1 .podium-value { font-size: 1.6rem; }

/* ==========================================================================
   Alertes intelligentes (dashboard admin)
   ========================================================================== */
.alertes-card { border-left: 4px solid var(--danger); }
.alertes-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.alertes-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: rgba(192, 57, 43, .15);
  color: var(--danger);
  font-weight: 700;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .alertes-count { color: #e57368; }
.alertes-liste { list-style: none; margin: 0; padding: 0; }
.alertes-liste li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: .9rem;
}
.alertes-liste li:last-child { border-bottom: none; padding-bottom: 0; }
.alertes-liste .pill { flex-shrink: 0; }
.alertes-liste a { color: var(--text); }
.alertes-liste a:hover { color: var(--accent-dark); }

/* Annonces réseau (dashboard coach) */
.annonces-card { border-left: 4px solid var(--accent); }
.annonce { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.annonce:last-child { border-bottom: none; padding-bottom: 0; }
.annonce-entete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.annonce-date { margin-left: auto; font-size: .78rem; }
.annonce-message { margin: 4px 0 0; font-size: .92rem; white-space: pre-line; }

/* Valeur KPI colorée (rentabilité positive / négative) */
.stat .value.value-positive { color: var(--success); }
.stat .value.value-negative { color: var(--danger); }
:root[data-theme="dark"] .stat .value.value-positive { color: #5fd391; }
:root[data-theme="dark"] .stat .value.value-negative { color: #e57368; }

/* ==========================================================================
   Échéancier de conformité (dashboard admin) — 3 zones : expirés / 30 j / 90 j
   ========================================================================== */
.echeancier {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.echeancier .card { margin-bottom: 0; }
.echeance-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.echeance-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.col-danger .echeance-count { background: rgba(192, 57, 43, .15); color: var(--danger); }
.col-warning .echeance-count { background: rgba(243, 156, 18, .16); color: #b9770b; }
.col-ok .echeance-count { background: var(--accent-soft); color: var(--accent-dark); }
:root[data-theme="dark"] .col-danger .echeance-count { color: #e57368; }
:root[data-theme="dark"] .col-warning .echeance-count { color: #f0b35c; }
:root[data-theme="dark"] .col-ok .echeance-count { color: var(--accent); }
.echeance-liste { list-style: none; margin: 0; padding: 0; }
.echeance-liste li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: .88rem;
}
.echeance-liste li:last-child { border-bottom: none; padding-bottom: 0; }
.echeance-liste .muted { font-size: .78rem; }
.echeance-vide { margin: 0; font-size: .88rem; }
@media (max-width: 767px) {
  .echeancier { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Tableaux — transparents dans le verre, séparateurs hairline
   ========================================================================== */
table { width: 100%; border-collapse: collapse; min-width: 0; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hairline); font-size: .88rem; line-height: 1.45; word-break: normal; overflow-wrap: normal; hyphens: none; }
th {
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  white-space: nowrap;
}
tbody tr { transition: background var(--transition); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--accent-tint); }

/* ==========================================================================
   Formulaires — champs translucides, focus ring accent
   ========================================================================== */
label { display: block; font-size: .84rem; font-weight: 600; margin: var(--sp-3) 0 var(--sp-1); color: var(--text); letter-spacing: -.005em; }
input, select, textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-family: inherit;
  background: var(--field);
  color: var(--text);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
input:hover, select:hover, textarea:hover { border-color: rgba(125, 194, 66, .45); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
select option { background: var(--card); color: var(--text); }
textarea { min-height: 84px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* Mini-formulaire de progression (objectifs) */
.form-progression { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.input-progression { width: 80px; text-align: center; }

/* ==========================================================================
   Boutons — pilules de verre, reflet spéculaire, pression élastique
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(125, 194, 66, .98), rgba(95, 163, 46, .98));
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  /* [UI Enhanced] Reflet en haut du bouton = effet verre bombé */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 14px rgba(125, 194, 66, .30);
  transition: box-shadow var(--transition), transform var(--spring), filter var(--transition);
}
.btn + .btn { margin-left: var(--sp-2); }
.btn:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), var(--glow-accent);
  transform: translateY(-1px);
}
.btn:active { transform: scale(.95); }
.btn:focus-visible { outline: none; box-shadow: var(--ring), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-accent { background: linear-gradient(180deg, rgba(125, 194, 66, .98), rgba(95, 163, 46, .98)); }
.btn-danger {
  background: linear-gradient(180deg, rgba(192, 57, 43, .98), rgba(142, 42, 29, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 14px rgba(192, 57, 43, .3);
}
.btn-danger:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px rgba(192, 57, 43, .45); }
/* Bouton secondaire : verre neutre translucide */
.btn-light {
  background: rgba(255, 255, 255, .5);
  color: var(--text);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--shadow-xs);
}
.btn-light:hover {
  background: rgba(255, 255, 255, .75);
  color: var(--text);
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--shadow-sm);
}
:root[data-theme="dark"] .btn-light {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--shadow-xs);
}
:root[data-theme="dark"] .btn-light:hover { background: rgba(255, 255, 255, .18); color: #fff; }
/* En mode sombre, le vert des boutons est foncé pour que le texte blanc reste lisible
   (on exclut les boutons clairs et rouges qui ont leur propre style) */
:root[data-theme="dark"] .btn:not(.btn-light):not(.btn-danger) {
  background: linear-gradient(180deg, rgba(108, 173, 56, .98), rgba(72, 128, 32, .98));
  color: #fff;
  text-shadow: none;
}
/* Dans la navbar sombre, le bouton secondaire reste lisible quel que soit le thème */
.navbar .btn-light { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.navbar .btn-light:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.btn-sm { padding: 7px 15px; font-size: .76rem; }

/* ==========================================================================
   Pastilles / statuts — capsules translucides
   ========================================================================== */
.pill { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: var(--radius-pill); font-size: .74rem; font-weight: 600; letter-spacing: .1px; line-height: 1.5; }
.pill-success { background: rgba(39, 174, 96, .16); color: var(--success); }
.pill-warning { background: rgba(243, 156, 18, .16); color: #b9770b; }
.pill-danger { background: rgba(192, 57, 43, .14); color: var(--danger); }
.pill-muted { background: rgba(122, 122, 122, .14); color: var(--muted); }
.pill-info { background: var(--accent-soft); color: var(--accent-dark); }
.pill-prio { background: var(--danger); color: #fff; }
:root[data-theme="dark"] .pill-warning { color: #f0b35c; }
:root[data-theme="dark"] .pill-danger { color: #e57368; }
:root[data-theme="dark"] .pill-success { color: #5fd391; }
:root[data-theme="dark"] .pill-info { color: var(--accent); }

/* ==========================================================================
   Messages flash — bannières de verre teinté
   ========================================================================== */
.flash {
  padding: 13px 18px;
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
  border: 1px solid transparent;
  font-size: .92rem;
  font-weight: 500;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: rise .45s cubic-bezier(.25, .1, .25, 1) both;
}
.flash-succes { background: rgba(39, 174, 96, .14); border-color: rgba(39, 174, 96, .3); color: #1e8449; }
.flash-erreur { background: rgba(192, 57, 43, .12); border-color: rgba(192, 57, 43, .3); color: var(--danger); }
.flash-avertissement { background: rgba(243, 156, 18, .14); border-color: rgba(243, 156, 18, .3); color: #b9770b; }
:root[data-theme="dark"] .flash-succes { color: #5fd391; }
:root[data-theme="dark"] .flash-erreur { color: #e57368; }
:root[data-theme="dark"] .flash-avertissement { color: #f0b35c; }

/* ==========================================================================
   Toasts (voir js/toast.js) — les .flash deviennent des notifications
   flottantes en verre qui glissent depuis la droite et s'effacent seules
   ========================================================================== */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  position: relative;
  margin: 0;
  padding-right: 42px;
  overflow: hidden;
  pointer-events: auto;
  background: var(--glass-card-strong);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md), var(--glass-edge);
  animation: toast-in .45s cubic-bezier(.32, .72, 0, 1) both;
  transition: opacity .4s ease, transform .4s cubic-bezier(.32, .72, 0, 1);
}
/* Liseré coloré à gauche selon le type (le fond verre reste neutre et lisible) */
.toast.flash-succes { background: var(--glass-card-strong); border-left: 4px solid var(--success); }
.toast.flash-erreur { background: var(--glass-card-strong); border-left: 4px solid var(--danger); }
.toast.flash-avertissement { background: var(--glass-card-strong); border-left: 4px solid var(--warning); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(70px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast-out { opacity: 0; transform: translateX(120%); }
.toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  opacity: .55;
  transition: opacity var(--transition), background var(--transition);
}
.toast-close:hover { opacity: 1; background: rgba(122, 122, 122, .15); }
.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: currentColor;
  opacity: .35;
  transform-origin: left;
  animation: toast-bar linear both;
}
@keyframes toast-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@media (max-width: 767px) {
  .toast-container { top: 12px; left: 12px; right: 12px; width: auto; }
  .toast { animation-name: toast-in-haut; }
}
@keyframes toast-in-haut {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* État vide illustré (fragment etatVide de fragments.html) */
.empty-state { text-align: center; padding: 30px 20px 26px; }
.empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.empty-title { font-weight: 600; font-size: 1.05rem; color: var(--heading); margin: 0 0 4px; letter-spacing: -.01em; }
.empty-text { color: var(--muted); font-size: .9rem; margin: 0 auto 14px; max-width: 420px; }

/* Recherche instantanée (injectée par js/search.js sur table[data-search]) */
.search-toolbar { margin-bottom: var(--sp-3); }
.search-input { flex: 1; min-width: 180px; max-width: 340px; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
tr[data-search-hide] { display: none; }

.muted { color: var(--muted); }
.right { text-align: right; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.toolbar .spacer { flex: 1; min-width: 8px; }
.inline-form { display: inline-flex; align-items: center; }

/* ==========================================================================
   Connexion — carte de verre flottante sur fond vivant
   ========================================================================== */
@keyframes login-glow {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(4vw, -4vh) scale(1.25); }
}
.login-wrap {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(125, 194, 66, .30), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(125, 194, 66, .20), transparent 48%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  padding: 20px;
}
/* Halo animé derrière la carte */
.login-wrap::before {
  content: "";
  position: absolute;
  width: 70vmin; height: 70vmin;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(125, 194, 66, .35), transparent 65%);
  animation: login-glow 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.login-card {
  position: relative;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(36px);
  backdrop-filter: saturate(180%) blur(36px);
  padding: 44px 42px;
  border-radius: 30px;
  width: 410px;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .9);
  animation: rise .6s cubic-bezier(.25, .1, .25, 1) both;
}
.login-card h1 {
  color: var(--primary);
  text-align: center;
  font-weight: 700;
  letter-spacing: -.025em;
}
.login-card .subtitle { text-align: center; color: #5a5f56; }
/* La carte de connexion reste claire quel que soit le thème : texte saisi en noir pour rester lisible */
.login-card input { background: rgba(255, 255, 255, .85); color: #1a1a1a; }
.login-card input::placeholder { color: #8a8f86; }
.login-card label { color: var(--primary); }
.error-box { background: rgba(192, 57, 43, .12); color: var(--danger); padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: .88rem; border: 1px solid rgba(192, 57, 43, .3); }

/* ==========================================================================
   Boîte de dialogue (élément <dialog> natif, voir confirm.js) — verre épais
   ========================================================================== */
.dialog {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--glass-card-strong);
  -webkit-backdrop-filter: saturate(180%) blur(32px);
  backdrop-filter: saturate(180%) blur(32px);
  color: var(--text);
  box-shadow: var(--shadow-lg), var(--glass-edge);
  max-width: 360px;
  width: 90%;
}
.dialog::backdrop { background: rgba(16, 18, 21, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dialog-body { padding: var(--sp-5); }
.dialog-message { margin: 0 0 20px; color: var(--text); font-size: .96rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.dialog-lg { max-width: 480px; }

/* Aide contextuelle sous les champs */
.hint { font-size: .75rem; color: var(--muted); display: block; margin-top: 3px; }

/* Bilan mensuel partagé (page « Mon suivi » du coach) */
.bilan-box {
  background: var(--accent-tint);
  border: 1px solid rgba(125, 194, 66, .35);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 0 0 12px;
}
.bilan-titre {
  font-weight: 600;
  font-size: .82rem;
  color: var(--accent-dark);
  margin-bottom: 4px;
  letter-spacing: -.005em;
}
:root[data-theme="dark"] .bilan-titre { color: var(--accent); }
.bilan-box p { margin: 0; font-size: .92rem; white-space: pre-line; }

/* ==========================================================================
   Barre de progression — fine, fluide, lueur verte
   ========================================================================== */
.progress-wrap { background: var(--hairline); border-radius: var(--radius-pill); height: 8px; overflow: hidden; flex: 1; min-width: 80px; }
.progress-fill { height: 100%; border-radius: var(--radius-pill); transition: width .7s cubic-bezier(.32, .72, 0, 1); background: var(--danger); }
.progress-fill.mid  { background: var(--warning); }
.progress-fill.high { background: linear-gradient(90deg, var(--accent), var(--accent-dark)); box-shadow: 0 0 10px rgba(125, 194, 66, .5); }
.progress-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.progress-pct { font-size: .82rem; font-weight: 600; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-4);
  justify-content: center;
}
.pagination .muted { font-size: .85rem; }

/* ==========================================================================
   DISPOSITION DESKTOP (≥ 1100px) — sidebar flottante en verre liquide
   ========================================================================== */
.nav-toggle { display: none; }

/* Écrans moyens (laptops 13"-15") : tableaux plus compacts et en-têtes pouvant
   passer sur deux lignes, afin que les tableaux larges tiennent sans défilement. */
@media (max-width: 1366px) {
  th, td { padding: 9px 10px; font-size: .84rem; }
  th { white-space: normal; }
}

@media (min-width: 1100px) {
  /* [UI Enhanced] La navbar devient un panneau vertical flottant */
  .navbar {
    position: fixed;
    top: 16px;
    left: 16px;
    bottom: 16px;
    width: 240px;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 12px 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 28px;
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .12);
  }
  .navbar .brand { margin: 2px 8px 20px; }
  .brand-logo { height: 42px; }
  .brand-name { white-space: normal; line-height: 1.25; }

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    gap: 3px;
    overflow-y: auto;
  }
  .navbar a.nav-link {
    padding: 11px 14px;
    border-radius: 13px;
    font-size: .86rem;
    white-space: normal;
    display: flex;
  }
  .navbar a.nav-link.active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 18px rgba(125, 194, 66, .2); }
  .navbar .spacer { flex: 1; }
  .navbar .user { max-width: none; margin: 0; padding: 8px 14px 2px; }

  /* Bascule de thème en ligne de menu */
  .theme-toggle {
    width: 100%;
    height: auto;
    border-radius: 13px;
    justify-content: flex-start;
    gap: 10px;
    padding: 11px 14px;
    font-size: 1rem;
  }
  .theme-toggle:hover { transform: none; background: rgba(255, 255, 255, .08); }
  .theme-toggle::after { content: "Thème clair / sombre"; font-size: .85rem; font-weight: 500; }

  .nav-avatar { margin: 8px 14px; width: 38px; height: 38px; }

  .navbar .inline-form { display: block; padding: 10px 4px 2px; }
  .navbar .inline-form .btn { width: 100%; text-align: center; justify-content: center; }

  /* Le contenu se décale à droite de la sidebar */
  .navbar ~ .container {
    margin: 40px 40px 48px 296px;
    max-width: 1200px;
    padding: 0;
  }
}

/* Burger & drawer (mobile/tablette) */
.nav-burger {
  display: none;
  color: #fff;
  cursor: pointer;
  padding: 0 16px;
  height: 58px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  user-select: none;
  font-size: 0;
  transition: background var(--transition);
  flex-shrink: 0;
}
.nav-burger::before { content: '☰'; font-size: 1.4rem; line-height: 1; }
.nav-burger:hover { background: rgba(255, 255, 255, .12); }
.nav-toggle:checked + .nav-burger::before { content: '✕'; font-size: 1.25rem; }

/* Overlay flouté derrière le drawer */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 999;
  cursor: pointer;
}
.nav-toggle:checked ~ .nav-overlay { display: block; }

/* Nav links — horizontal sur la barre du haut (tablette paysage) */
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }

/* ---- Tablette + Mobile (< 1100px) : drawer en verre depuis la droite ---- */
@media (max-width: 1099px) {
  .nav-burger { display: flex; }
  .navbar { position: sticky; z-index: 1001; }
  .navbar .brand { margin-right: 0; }
  .navbar .spacer { display: none; }

  .nav-links {
    position: fixed;
    top: 0; right: 0;
    width: 292px;
    height: 100vh;
    background: rgba(20, 22, 25, .82);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    backdrop-filter: saturate(180%) blur(28px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    z-index: 1002;
    padding: 66px 12px 16px;
    transform: translateX(100%);
    transition: transform .34s cubic-bezier(.32, .72, 0, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, .4);
    border-left: 1px solid rgba(255, 255, 255, .1);
  }
  .nav-toggle:checked ~ .nav-links { transform: translateX(0); }

  .navbar a.nav-link {
    height: auto;
    padding: 13px 16px;
    margin: 2px 0;
    border-radius: 13px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    white-space: normal;
  }
  .navbar a.nav-link:hover { background: rgba(255, 255, 255, .08); }
  .navbar a.nav-link.active { background: rgba(125, 194, 66, .24); }
  .navbar .user { padding: 13px 16px 4px; font-size: .82rem; max-width: none; }
  .navbar .inline-form { display: block; padding: 10px 8px 14px; }
  .navbar .inline-form .btn { width: 100%; text-align: center; }

  /* Croix fermeture drawer */
  .nav-close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    height: 58px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    transition: background var(--transition);
  }
  .nav-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }

  /* Avatar dans le drawer */
  .nav-avatar {
    margin: 10px 16px;
    width: 40px;
    height: 40px;
    border: 2px solid var(--accent);
  }

  /* Bascule de thème en ligne de menu pleine largeur */
  .theme-toggle {
    width: 100%;
    height: auto;
    border-radius: 13px;
    justify-content: flex-start;
    gap: 10px;
    padding: 13px 16px;
    font-size: 1rem;
  }
  .theme-toggle:hover { transform: none; background: rgba(255, 255, 255, .08); }
  .theme-toggle::after { content: "Thème clair / sombre"; font-size: .9rem; font-weight: 500; }
}

/* ---- Tablette (768–1099px) ---- */
@media (min-width: 768px) and (max-width: 1099px) {
  .container { max-width: 100%; padding: 0 20px; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .login-card { width: 440px; }
}

/* ---- Mobile (< 768px) ---- */
@media (max-width: 767px) {
  .container { padding: 0 var(--sp-3); margin: var(--sp-3) auto; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.05rem; margin-top: var(--sp-5); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .stat { padding: 15px 15px 13px; }
  .stat .value { font-size: 1.55rem; }

  /* Podium empilé : l'or en premier */
  .podium { flex-direction: column; align-items: stretch; }
  .podium-1 { order: 1; padding: 22px 16px 18px; }
  .podium-2 { order: 2; }
  .podium-3 { order: 3; }

  /* Tables : scroll horizontal (défaut) */
  .card { padding: var(--sp-4) var(--sp-3); border-radius: var(--radius); }
  table { min-width: 480px; }
  th { white-space: nowrap; }
  th, td { padding: 9px 11px; font-size: .82rem; }

  /* Tables → mode carte sur mobile (.table-card sur le .card parent) */
  .table-card { overflow-x: visible; background: transparent; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
  .table-card table { min-width: 0; display: block; }
  .table-card thead { display: none; }
  .table-card tbody { display: block; }
  .table-card tbody tr {
    display: block;
    background: var(--glass-card);
    -webkit-backdrop-filter: saturate(160%) blur(24px);
    backdrop-filter: saturate(160%) blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    margin-bottom: var(--sp-3);
    overflow: hidden;
    box-shadow: var(--shadow-sm), var(--glass-edge);
  }
  .table-card tbody tr:nth-child(even) td { background: transparent; }
  .table-card tbody tr:last-child { margin-bottom: 0; }
  .table-card tbody tr:hover td { background: transparent; }
  .table-card td {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline);
    font-size: .84rem;
    white-space: normal;
    background: transparent;
  }
  .table-card td:last-child { border-bottom: none; }
  .table-card td::before {
    content: attr(data-label);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .35px;
    color: var(--muted);
    min-width: 80px;
    flex-shrink: 0;
    padding-top: 2px;
    line-height: 1.8;
  }
  /* Colonne actions : alignée à droite, sans label */
  .table-card td[data-label=""] { justify-content: flex-end; }
  .table-card td[data-label=""]::before { display: none; }
  /* Formulaires intégrés : s'adaptent à la largeur de la carte */
  .table-card td .toolbar { flex-wrap: wrap; margin: 0; gap: 6px; }
  .table-card td select { width: 100%; }
  .table-card td input[type="text"],
  .table-card td input:not([type]) { width: 100%; }

  /* Formulaires : 1 colonne */
  .form-row { grid-template-columns: 1fr; }

  /* Boutons empilés plus accessibles au doigt */
  .btn + .btn { margin-left: 0; }

  /* Login */
  .login-card { width: 94%; max-width: 400px; padding: 30px 22px; }

  /* [UI Enhanced] Formulaires d'action intégrés à une toolbar (ex. génération
     de factures) : la barre passe pleine largeur et les champs s'étirent pour
     rester confortables au doigt plutôt que de déborder. */
  .toolbar form { width: 100%; margin: var(--sp-1) 0 0; gap: var(--sp-2); }
  .toolbar form select { flex: 1 1 130px; width: auto; min-width: 0; }
  .toolbar form input[type="number"],
  .toolbar form input[type="text"],
  .toolbar form input[type="search"] { flex: 1 1 110px; width: auto; min-width: 0; }
  .toolbar form .btn { flex: 1 1 100%; }

  /* [UI Enhanced] Facture : en-tête et total empilés et alignés à gauche,
     pour ne plus écraser le bloc « FACTURE / numéro / dates » sur mobile. */
  .facture-card { padding: var(--sp-5) var(--sp-4); }
  .facture-entete { flex-direction: column; gap: 14px; }
  .facture-meta { text-align: left; }
  .facture-titre { font-size: 1.25rem; }
  .facture-total { font-size: .98rem; }
  .facture-total strong { font-size: 1.3rem; }
  .facture-detail { font-size: .88rem; line-height: 1.7; }
}

/* ---- Petits téléphones (< 480px) ---- */
@media (max-width: 479px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .login-card { width: 98%; padding: 26px 18px; }
  h1 { font-size: 1.25rem; }
  .brand-logo { height: 32px; }
  table { min-width: 360px; }
  th, td { padding: 7px 9px; font-size: .78rem; }
}

/* Repli si le navigateur ne gère pas backdrop-filter : surfaces opaques */
@supports not (backdrop-filter: blur(1px)) {
  .card, .stat, .dialog, .table-card tbody tr { background: var(--card); }
  .login-card { background: #fff; }
  input, select, textarea { background: var(--card); }
}

/* [UI Enhanced] Cibles tactiles : sur écran tactile, on garantit une hauteur
   minimale confortable au doigt (≥ ~44px recommandé) pour les boutons et les
   liens de navigation, sans alourdir le rendu souris. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .navbar a.nav-link { min-height: 40px; }
  .toast-close, .theme-toggle { min-width: 40px; min-height: 40px; }
}

/* [UI Enhanced] Très grands écrans : on centre la zone de contenu dans l'espace
   restant à droite de la sidebar, au lieu de la coller à gauche avec un grand
   vide. La largeur de lecture confortable (~1200px) est préservée. */
@media (min-width: 1500px) {
  .navbar ~ .container { margin-right: auto; margin-left: auto; padding-left: 256px; max-width: 1456px; }
}

/* ==========================================================================
   [UI Enhanced] Menus déroulants — chevron personnalisé, plus lisibles
   ========================================================================== */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236e7468'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px;
  cursor: pointer;
}
:root[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239aa1a9'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E");
}
select::-ms-expand { display: none; }

/* ==========================================================================
   [UI Enhanced] Menu déroulant personnalisé (js/select.js) — panneau de verre
   qui s'ouvre avec une animation type Apple (échelle + fondu, ressort doux)
   ========================================================================== */
.select-wrap { position: relative; display: block; width: 100%; }
.select-wrap-inline { display: inline-block; width: auto; vertical-align: middle; }
/* Le select natif est rendu transparent et superposé au bouton (et non en
   display:none) afin de préserver la validation HTML5 des champs « required »
   et la soumission de formulaire. Les clics passent au bouton (pointer-events). */
select.select-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--field);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-family: inherit;
  font-size: .92rem;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.select-btn:hover { border-color: rgba(125, 194, 66, .45); }
.select-wrap.open .select-btn,
.select-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.select-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-caret {
  flex-shrink: 0;
  width: 14px; height: 14px;
  background: center / 14px no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236e7468'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E");
  transition: transform var(--spring);
}
:root[data-theme="dark"] .select-caret {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239aa1a9'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E");
}
.select-wrap.open .select-caret { transform: rotate(180deg); }

.select-panel {
  position: fixed;
  top: 0;
  left: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: var(--glass-card-strong);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), var(--glass-edge);
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.96);
  transform-origin: top center;
  transition: opacity .2s ease, transform .34s cubic-bezier(.32, .72, 0, 1), visibility .34s;
}
/* Selects à l'intérieur d'une <dialog> : panneau positionné dans la modale */
.select-panel.select-panel-abs {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
}
/* Ouverture vers le haut : l'animation part du bas */
.select-panel.up {
  transform-origin: bottom center;
  transform: translateY(8px) scale(.96);
}
.select-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: .9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.select-option.active { background: var(--accent-soft); color: var(--accent-dark); }
:root[data-theme="dark"] .select-option.active { color: var(--accent); }
.select-option.selected { font-weight: 600; }
.select-option.selected::after {
  content: "✓";
  margin-left: auto;
  color: var(--accent-dark);
  font-weight: 700;
}
:root[data-theme="dark"] .select-option.selected::after { color: var(--accent); }
.select-option.disabled { opacity: .4; cursor: not-allowed; }

/* Entrée en cascade des options (effet « menu Apple ») */
.select-panel.open .select-option { animation: select-opt-in .26s cubic-bezier(.32, .72, 0, 1) both; }
.select-panel.open .select-option:nth-child(1) { animation-delay: .01s; }
.select-panel.open .select-option:nth-child(2) { animation-delay: .03s; }
.select-panel.open .select-option:nth-child(3) { animation-delay: .05s; }
.select-panel.open .select-option:nth-child(4) { animation-delay: .07s; }
.select-panel.open .select-option:nth-child(5) { animation-delay: .09s; }
.select-panel.open .select-option:nth-child(6) { animation-delay: .11s; }
.select-panel.open .select-option:nth-child(7) { animation-delay: .13s; }
.select-panel.open .select-option:nth-child(8) { animation-delay: .15s; }
@keyframes select-opt-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   [UI Enhanced] Graphique à barres (évolution par club)
   ========================================================================== */
.chart-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 20px;
  font-size: .8rem;
  color: var(--muted);
}
.chart-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }
.chart-dot.pos { background: var(--accent); }
.chart-dot.neg { background: var(--danger); }
.chart-dot.ligne { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--muted); }
.chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 260px;
}
.chart-loyer-line {
  position: absolute;
  left: 0; right: 0;
  border-top: 2px dashed var(--muted);
  opacity: .65;
  pointer-events: none;
}
.chart-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.chart-bar {
  width: 70%;
  max-width: 56px;
  min-height: 4px;
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: height .7s cubic-bezier(.32, .72, 0, 1);
}
.chart-bar.pos { background: linear-gradient(180deg, var(--accent), var(--accent-dark)); }
.chart-bar.neg { background: linear-gradient(180deg, #e0604f, var(--danger)); }
.chart-bar-val { font-size: .7rem; font-weight: 600; color: var(--heading); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-label { font-size: .7rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 600px) {
  .chart { gap: 5px; height: 220px; }
  .chart-bar-val, .chart-label { font-size: .58rem; }
}

/* ==========================================================================
   Facture (vue imprimable)
   ========================================================================== */
.facture-card { max-width: 800px; padding: clamp(20px, 4vw, 48px); }

/* En-tête : émetteur à gauche, titre + métadonnées à droite */
.facture-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
}
.facture-logo { height: 52px; width: auto; display: block; margin-bottom: 12px; }
.facture-emetteur { font-size: .86rem; color: var(--muted); line-height: 1.6; }
.facture-emetteur strong { color: var(--heading); font-size: .94rem; }
.facture-meta { text-align: right; font-size: .86rem; color: var(--muted); }
.facture-meta-ligne { margin-top: 3px; }
.facture-meta-ligne strong { color: var(--heading); font-variant-numeric: tabular-nums; }
.facture-titre {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--accent-dark);
  margin-bottom: 10px;
}
:root[data-theme="dark"] .facture-titre { color: var(--accent); }

.facture-bloc { margin-bottom: 24px; font-size: .92rem; }
.facture-bloc-titre {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  margin-bottom: 5px;
}

/* Tableau des prestations */
.facture-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 18px; }
.facture-table { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
.facture-table thead th {
  background: var(--surface-2);
  color: var(--heading);
  font-size: .74rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.facture-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
}
.facture-table .num { text-align: right; white-space: nowrap; }
.facture-table tbody tr:hover td { background: transparent; }

/* Bloc des totaux, aligné à droite */
.facture-totaux {
  margin-left: auto;
  width: min(320px, 100%);
  margin-bottom: 28px;
}
.facture-totaux-ligne {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 2px;
  font-size: .9rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.facture-totaux-ligne span:last-child { color: var(--text); font-weight: 600; }
.facture-totaux-total {
  border-top: 2px solid var(--heading);
  margin-top: 6px;
  padding-top: 12px;
  font-size: 1.08rem;
  color: var(--heading);
}
.facture-totaux-total span { font-weight: 800 !important; color: var(--heading) !important; }
.facture-totaux-total span:last-child { font-size: 1.25rem; letter-spacing: -.02em; }

/* Paiement */
.facture-paiement { display: grid; gap: 14px; margin-bottom: 22px; }
.facture-paiement-ligne { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }

.facture-statut { text-align: right; margin-bottom: 28px; }

/* Pied de page légal */
.facture-pied {
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
  text-align: center;
  color: var(--muted);
}
.facture-pied-retard { font-style: italic; font-size: .82rem; margin: 0 0 12px; }
.facture-pied-legal { font-size: .8rem; line-height: 1.6; margin: 0; }
.facture-pied-legal strong { color: var(--heading); }

/* Mobile : en-tête et totaux empilés, tableau scrollable */
@media (max-width: 600px) {
  .facture-meta { text-align: left; }
  .facture-totaux { width: 100%; }
}

/* Impression : page blanche, contenu seul */
@media print {
  body { background: #fff !important; }
  body::before, body::after { display: none !important; }
  .navbar, .no-print, .toast-container { display: none !important; }
  .navbar ~ .container, .container { margin: 0 !important; max-width: none !important; padding: 0 !important; }
  .card, .facture-card {
    box-shadow: none !important;
    border: none !important;
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    max-width: none;
  }
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}