/* =============================================================================
   JRME Data Dashboard — Feuille de styles principale
   =============================================================================
   Fichier : css/styles.css
   Description : Styles globaux du Data Dashboard JRME.
                 Inclut la typographie (Sofia Pro), les variables de la charte
                 graphique, les composants réutilisables (boutons, formulaires),
                 la page Login, la sidebar bento, le système de pages,
                 l'administration des utilisateurs, les modals, les toasts,
                 le tableau CA mensuel, les graphiques et la sidebar de détail.
   Auteur : Équipe JRME
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. TYPOGRAPHIE — Déclarations @font-face (Sofia Pro)
   -------------------------------------------------------------------------- */

/* Police légère (300) — utilisée pour les sous-titres et textes secondaires */
@font-face {
  font-family: 'Sofia Pro';
  src: url('/fonts/SofiaProLight.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap; /* Affiche le texte immédiatement avec une police de secours */
}

/* Police normale (400) — utilisée pour le corps de texte */
@font-face {
  font-family: 'Sofia Pro';
  src: url('/fonts/SofiaProRegular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Police medium (500) — utilisée pour les titres et labels */
@font-face {
  font-family: 'Sofia Pro';
  src: url('/fonts/SofiaProMedium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Police semi-bold (600) — utilisée pour les initiales d'avatar */
@font-face {
  font-family: 'Sofia Pro';
  src: url('/fonts/SofiaProSemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Police grasse (700) — utilisée pour les éléments d'emphase forte */
@font-face {
  font-family: 'Sofia Pro';
  src: url('/fonts/SofiaProBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* -----------------------------------------------------------------------------
   2. VARIABLES CSS — Charte graphique JRME
   -------------------------------------------------------------------------- */

:root {
  /* Palette Orange (couleur principale de la marque JRME) */
  --orange-dark:   #A84F3B;   /* Hover / état actif */
  --orange:        #C16040;   /* Couleur principale */
  --orange-medium: #E5C3B8;   /* Bordures décoratives */
  --orange-light:  #F9EFEC;   /* Fonds légers / badges */

  /* Palette Neutres */
  --black:       #000000;     /* Titres principaux */
  --grey-dark:   #333333;     /* Corps de texte */
  --grey-medium: #F2F2F2;     /* Séparateurs / fonds alternatifs */
  --grey:        #F9F9F9;     /* Fond de page */
  --white:       #FFFFFF;     /* Fond des cartes */

  /* Couleurs fonctionnelles */
  --color-error:   #C62828;   /* Erreurs et actions destructives */
  --color-border:  #e0e0e0;   /* Bordures par défaut des champs */
  --color-muted:   #999999;   /* Texte secondaire / désactivé */

  /* Typographie — police principale avec fallbacks système */
  --font: 'Sofia Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Espacement — échelle cohérente en multiples de 4px */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* Arrondis — du subtil au pilule */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-pill: 100px;

  /* Ombres — effet de profondeur des cartes */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);

  /* Transitions — durée standard pour les animations */
  --transition-fast: 0.2s ease;
}


/* -----------------------------------------------------------------------------
   3. RESET & BASE — Normalisation des styles par défaut du navigateur
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  background: var(--grey);
  color: var(--grey-dark);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;     /* Lissage des polices sur macOS/iOS */
  -moz-osx-font-smoothing: grayscale;
}


/* -----------------------------------------------------------------------------
   4. COMPOSANTS RÉUTILISABLES — Boutons
   --------------------------------------------------------------------------
   Système de boutons modulaire :
   - .btn           : styles de base communs à tous les boutons
   - .btn-primary   : bouton plein orange (action principale)
   - .btn-secondary : bouton contour gris (action secondaire)
   -------------------------------------------------------------------------- */

/* Base commune pour tous les boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 400;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
  text-decoration: none;
  line-height: 1;
  letter-spacing: -0.3px;
}

/* Retour tactile — légère réduction au clic */
.btn:active {
  transform: scale(0.98);
}

/* État désactivé — opacité réduite et curseur interdit */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Bouton principal — fond orange, texte blanc */
.btn-primary {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}

/* Bouton secondaire — fond blanc, contour gris */
.btn-secondary {
  background: var(--white);
  border-color: var(--color-border);
  color: var(--grey-dark);
}

.btn-secondary:hover {
  border-color: var(--orange);
  background: var(--orange-light);
  color: var(--orange);
}


/* -----------------------------------------------------------------------------
   5. COMPOSANTS RÉUTILISABLES — Formulaires
   -------------------------------------------------------------------------- */

/* Groupe de champ (label + input) — espacement vertical entre les champs */
.form-group {
  text-align: left;
  margin-bottom: var(--space-md);
}

/* Libellé de champ — petit texte en gras au-dessus du champ */
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-dark);
  margin-bottom: 6px;
}

/* Champ de saisie texte/email/mot de passe — style pilule arrondie */
.form-input {
  width: 100%;
  padding: 14px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 400;
  font-family: var(--font);
  color: var(--grey-dark);
  background: var(--white);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  outline: none;
}

/* État focus — bordure orange avec halo subtil */
.form-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(193, 96, 64, 0.1);
}

/* Placeholder — texte discret gris clair */
.form-input::placeholder {
  color: #c0c0c0;
  font-weight: 300;
}


/* -----------------------------------------------------------------------------
   6. PAGE LOGIN — Écran de connexion
   -------------------------------------------------------------------------- */

/* Conteneur pleine page centré verticalement et horizontalement */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grey);
  padding: var(--space-md);
}

/* Carte de connexion — fond blanc avec ombre légère */
.login-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-card);
  text-align: center;
}

/* Logo JRME centré dans la carte */
.login-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-lg);
  border-radius: var(--radius-md);
}

/* Titre « Data Dashboard » */
.login-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--black);
  margin-bottom: var(--space-xs);
  letter-spacing: -0.5px;
}

/* Le mot « Dashboard » est mis en valeur en orange */
.login-title span {
  color: var(--orange);
}

/* Sous-titre descriptif sous le titre */
.login-subtitle {
  font-size: 14px;
  color: var(--color-muted);
  font-weight: 300;
  margin-bottom: 36px;
}

/* Message d'erreur de connexion — hauteur minimale pour éviter le saut de layout */
.login-error {
  color: var(--color-error);
  font-size: 13px;
  margin-bottom: var(--space-md);
  min-height: 20px;
  font-weight: 400;
}

/* Bouton de connexion — pleine largeur, style orange de la marque */
.btn-login {
  width: 100%;
  padding: 16px var(--space-lg) 15px;
  border: 2px solid var(--orange);
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: var(--white);
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast);
  letter-spacing: -0.3px;
}

.btn-login:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}

.btn-login:active {
  transform: scale(0.98);
}

.btn-login:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* -----------------------------------------------------------------------------
   7. PAGE DASHBOARD — Disposition principale (sidebar + contenu)
   -------------------------------------------------------------------------- */

/* Conteneur principal — plein écran sans défilement global */
.dashboard-page {
  height: 100vh;
  background: var(--grey);
  overflow: hidden;
}

/* Layout flex : sidebar à gauche, contenu à droite, gap de 16px */
.dashboard-body {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  height: 100vh;
  overflow: hidden;
}


/* -----------------------------------------------------------------------------
   8. SIDEBAR — Menu de navigation latéral (style bento / carte flottante)
   -------------------------------------------------------------------------- */

/* Carte sidebar flottante avec coins arrondis et ombre */
.sidebar {
  width: 270px;
  min-width: 270px;
  background: var(--white);
  border-radius: 30px;
  box-shadow: var(--shadow-card);
  padding: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--space-md) * 2);
  overflow: hidden;
}

/* --- 8a. Logo dans la sidebar --- */

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 24px 20px;
}

.sidebar-logo img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.sidebar-logo-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.3px;
}

/* « Dashboard » en orange dans le titre du logo */
.sidebar-logo-text span {
  color: var(--orange);
}

/* --- 8b. Navigation (groupes et items) --- */

/* Conteneur scrollable de la navigation — occupe l'espace vertical restant */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: var(--space-md);
  overflow-y: auto;
}

/* Groupe de navigation (ex: « Coachs ») — conteneur dépliant */
.nav-group {
  margin-bottom: var(--space-xs);
}

/* Bouton toggle du groupe — en-tête cliquable */
.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 12px 24px;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--grey-dark);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.nav-group-toggle:hover {
  background: var(--grey);
}

/* Icône SVG du groupe — taille fixe et opacité réduite */
.nav-group-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* Chevron (flèche) — rotation 180° quand le groupe est ouvert */
.nav-chevron {
  width: 10px;
  height: 10px;
  margin-left: auto;
  opacity: 0.4;
  transition: transform var(--transition-fast);
}

.nav-group.open > .nav-group-toggle .nav-chevron {
  transform: rotate(180deg);
}

/* Contenu dépliant du groupe — masqué par défaut, visible quand .open */
.nav-group-items {
  display: none;
  flex-direction: column;
}

.nav-group.open > .nav-group-items {
  display: flex;
}

/* Item de navigation simple (ex: « Abonnements ») — indenté à gauche */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 24px 10px 48px;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--grey-dark);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-align: left;
  border-radius: 0;
}

.nav-item:hover {
  background: var(--grey);
}

/* Item actif — fond orange clair, texte orange, police medium */
.nav-item.active {
  background: var(--orange-light);
  color: var(--orange);
  font-weight: 500;
}

/* --- 8c. Sous-groupes dépliables (ex: « Par coach ») --- */

.nav-sub-group {
  margin-bottom: var(--space-xs);
}

/* Bouton toggle du sous-groupe — même indentation que nav-item */
.nav-sub-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 10px 24px 10px 48px;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--grey-dark);
  cursor: pointer;
  transition: background var(--transition-fast);
  text-align: left;
}

.nav-sub-toggle:hover {
  background: var(--grey);
}

/* Chevron du sous-groupe — plus petit que celui du groupe parent */
.nav-sub-chevron {
  width: 8px;
  height: 8px;
  margin-left: auto;
  opacity: 0.4;
  transition: transform var(--transition-fast);
}

.nav-sub-group.open > .nav-sub-toggle .nav-sub-chevron {
  transform: rotate(180deg);
}

/* Items du sous-groupe — masqués par défaut */
.nav-sub-items {
  display: none;
  flex-direction: column;
}

.nav-sub-group.open > .nav-sub-items {
  display: flex;
}

/* Item coach individuel — niveau le plus profond, texte tronqué si trop long */
.nav-sub-item {
  display: block;
  padding: 8px 24px 8px 64px;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-sub-item:hover {
  background: var(--grey);
  color: var(--grey-dark);
}

.nav-sub-item.active {
  background: var(--orange-light);
  color: var(--orange);
  font-weight: 500;
}

/* --- 8d. Profil utilisateur (fixé en bas de la sidebar) --- */

/* Séparateur + zone de profil en bas de la sidebar */
.sidebar-profile {
  border-top: 1px solid var(--grey-medium);
  padding: 12px 16px;
  position: relative;
  flex-shrink: 0;
}

/* Bouton profil — affiche avatar + nom + rôle + chevron */
.sidebar-profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: none;
  background: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
  text-align: left;
  font-family: var(--font);
}

.sidebar-profile-btn:hover {
  background: var(--grey);
}

/* Avatar rond — initiales ou image de profil (object-fit via JS) */
.sidebar-profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--orange-light);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  object-fit: cover;
}

/* Bloc texte du profil — nom et rôle empilés */
.sidebar-profile-info {
  flex: 1;
  min-width: 0;
}

.sidebar-profile-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-role {
  font-size: 11px;
  color: var(--color-muted);
  font-weight: 400;
}

/* Chevron du profil — indique que le menu déroulant est disponible */
.sidebar-profile-chevron {
  width: 10px;
  height: 10px;
  opacity: 0.4;
  flex-shrink: 0;
}

/* Menu déroulant du profil — apparaît au-dessus du bouton profil */
.sidebar-profile-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 16px;
  right: 16px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 100;
}

.sidebar-profile-menu.open {
  display: block;
}

/* Boutons dans le menu déroulant (ex: déconnexion) */
.sidebar-profile-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--grey-dark);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sidebar-profile-menu button:hover {
  background: var(--grey);
}

.sidebar-profile-menu button svg {
  width: 16px;
  height: 16px;
  opacity: 0.5;
}

/* Texte rouge pour le bouton déconnexion — signale l'action destructive */
.sidebar-profile-menu .menu-logout {
  color: var(--color-error);
}


/* -----------------------------------------------------------------------------
   9. CONTENU PRINCIPAL — Zone à droite de la sidebar
   -------------------------------------------------------------------------- */

/* Carte contenu — même style bento que la sidebar (coins arrondis, ombre) */
.dashboard-content {
  flex: 1;
  min-width: 0;
  background: var(--white);
  border-radius: 30px;
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  overflow-y: auto;
  height: calc(100vh - var(--space-md) * 2);
}


/* -----------------------------------------------------------------------------
   10. PAGES — Système de navigation entre les vues
   --------------------------------------------------------------------------
   Chaque <div class="page"> représente une vue du dashboard.
   Une seule page est visible à la fois grâce à la classe .visible.
   Le basculement est géré en JavaScript (showPage / setActive).
   -------------------------------------------------------------------------- */

/* Par défaut, toutes les pages sont masquées */
.page {
  display: none;
}

/* La page active est affichée */
.page.visible {
  display: block;
}

/* En-tête de page (titre + sous-titre) */
.page-header {
  margin-bottom: var(--space-xl);
}

.page-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--black);
  letter-spacing: -0.5px;
}

/* Mot mis en valeur dans le titre (optionnel) */
.page-title span {
  color: var(--orange);
}

/* Sous-titre de page — description courte sous le titre */
.page-subtitle {
  font-size: 13px;
  color: var(--color-muted);
  font-weight: 300;
  margin-top: 4px;
}


/* -----------------------------------------------------------------------------
   11. ÉTAT VIDE — Placeholder « à venir » (pages sans données)
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   12. UTILITAIRES — Classes d'aide réutilisables
   -------------------------------------------------------------------------- */

/* Texte centré horizontalement */
.text-center { text-align: center; }

/* Texte discret (gris clair) — utilisé pour les indications optionnelles */
.text-muted { color: var(--color-muted); }

/* Largeur pleine — force un élément à occuper 100% de son parent */
.w-full { width: 100%; }

/* Masquer visuellement (accessibilité — visible uniquement par les lecteurs d'écran) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* -----------------------------------------------------------------------------
   13. RESPONSIVE — Adaptations pour petits écrans
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  /* Réduction du padding de la carte de connexion sur mobile */
  .login-card {
    padding: 36px var(--space-lg);
  }
}


/* -----------------------------------------------------------------------------
   14. ADMINISTRATION — Gestion des utilisateurs (page admin)
   -------------------------------------------------------------------------- */

/* En-tête de la page admin : titre à gauche, bouton « + Nouvel utilisateur » à droite */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

/* Bouton Administration dans la sidebar — masqué par défaut, visible pour les admins */
.sidebar-admin {
  padding: 0 16px;
  margin-bottom: var(--space-sm);
  display: none;
}

/* Classe ajoutée en JS quand l'utilisateur connecté est admin */
.sidebar-admin.visible {
  display: block;
}

/* Style du bouton Administration — similaire aux nav-items */
.sidebar-admin-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-admin-btn:hover {
  background: var(--grey);
  color: var(--grey-dark);
}

/* État actif du bouton admin — fond orange clair comme les autres items actifs */
.sidebar-admin-btn.active {
  background: var(--orange-light);
  color: var(--orange);
  font-weight: 500;
}

.sidebar-admin-btn svg {
  width: 16px;
  height: 16px;
  opacity: 0.5;
}

.sidebar-admin-btn.active svg {
  opacity: 1;
}

/* Tableau des utilisateurs — bordures fines, lignes survolables */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* En-tête du tableau — petites majuscules, texte discret */
.admin-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 12px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--grey-medium);
  white-space: nowrap;
}

/* Largeurs des colonnes du tableau */
.admin-table th:first-child { width: 50%; }
.admin-table th:last-child { width: 80px; }

/* Cellules du tableau */
.admin-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--grey-medium);
  vertical-align: middle;
}

/* Survol d'une ligne — fond gris subtil */
.admin-table tr:hover td {
  background: var(--grey);
}

/* Dernière ligne — pas de bordure en bas */
.admin-table tr:last-child td {
  border-bottom: none;
}

/* Avatar utilisateur dans le tableau — rond, ajusté au conteneur */
.admin-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

/* Placeholder avatar — initiales sur fond orange clair */
.admin-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--orange-light);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Info utilisateur dans le tableau — avatar + nom/email côte à côte */
.admin-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-user-name {
  font-weight: 500;
  color: var(--grey-dark);
}

.admin-user-email {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 2px;
}

/* Badge rôle — pilule colorée (admin = orange, membre = gris) */
.admin-badge {
  display: inline-block;
  padding: 3px 10px;
  vertical-align: middle;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Badge admin — fond orange clair, texte orange */
.admin-badge-admin {
  background: var(--orange-light);
  color: var(--orange);
}

/* Badge membre — fond gris, texte discret */
.admin-badge-membre {
  background: var(--grey-medium);
  color: var(--color-muted);
}

/* Boutons d'action dans le tableau (modifier / supprimer) */
.admin-actions {
  display: flex;
  gap: 8px;
}

.admin-action-btn {
  padding: 6px;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.admin-action-btn:hover {
  background: var(--grey-medium);
  color: var(--grey-dark);
}

/* Bouton supprimer — fond rouge clair au survol */
.admin-action-btn.delete:hover {
  background: #fce4ec;
  color: var(--color-error);
}

.admin-action-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}


/* -----------------------------------------------------------------------------
   15. MODAL — Popup de création / modification d'utilisateur
   -------------------------------------------------------------------------- */

/* Overlay sombre derrière la modal — couvre tout l'écran */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 900;
  align-items: center;
  justify-content: center;
}

/* Overlay visible — activé par la classe .open ajoutée en JS */
.modal-overlay.open {
  display: flex;
}

/* Carte modale — fond blanc, coins arrondis, ombre prononcée */
.modal {
  background: var(--white);
  border-radius: 24px;
  width: 100%;
  max-width: 850px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

/* En-tête de la modal — titre + bouton fermer */
.modal-header {
  padding: 24px 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--black);
}

/* Bouton fermer (x) — discret, passe en foncé au survol */
.modal-close {
  border: none;
  background: none;
  font-size: 24px;
  color: var(--color-muted);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.modal-close:hover {
  color: var(--grey-dark);
}

/* Corps de la modal — contient le formulaire */
.modal-body {
  padding: 24px 28px;
}

/* Pied de la modal — boutons Annuler / Enregistrer alignés à droite */
.modal-footer {
  padding: 0 28px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Zone d'upload d'avatar dans la modal — centrée verticalement */
.modal-avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-lg);
}

/* Aperçu de l'avatar dans la modal — rond avec bordure orange */
.modal-avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--orange-medium);
  margin-bottom: var(--space-sm);
}

/* Placeholder avatar dans la modal — initiales avec bordure */
.modal-avatar-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--orange-light);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  border: 3px solid var(--orange-medium);
  margin-bottom: var(--space-sm);
}

/* Bouton « Changer la photo » — lien orange sous l'avatar */
.modal-avatar-btn {
  font-size: 12px;
  color: var(--orange);
  cursor: pointer;
  font-weight: 500;
  font-family: var(--font);
}

.modal-avatar-btn:hover {
  text-decoration: underline;
}

/* Select (dropdown) dans les formulaires — style pilule comme les inputs */
.form-select {
  width: 100%;
  padding: 14px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 400;
  font-family: var(--font);
  color: var(--grey-dark);
  background: var(--white);
  outline: none;
  appearance: none;
  /* Chevron SVG personnalisé à droite du select */
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.form-select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(193, 96, 64, 0.1);
}


/* -----------------------------------------------------------------------------
   16. TOAST — Notification temporaire en bas à droite
   -------------------------------------------------------------------------- */

/* Toast par défaut — masqué sous l'écran avec opacité 0 */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--white);
  background: var(--grey-dark);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
  z-index: 1000;
}

/* Toast visible — glisse vers le haut avec fondu */
.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Toast d'erreur — fond rouge */
.toast.error {
  background: var(--color-error);
}


/* -----------------------------------------------------------------------------
   17. BLOC SCOPE — Bandeau d'information sur le périmètre des données
   -------------------------------------------------------------------------- */

.scope-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  margin: 0 0 32px 0;
  background: var(--orange-light);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey-dark);
}

.scope-info-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--orange);
  opacity: 0.7;
}

.scope-info strong {
  font-weight: 500;
  color: var(--black);
}


/* -----------------------------------------------------------------------------
   18. KPI CARDS — Cartes de métriques clés
   -------------------------------------------------------------------------- */

/* Grille de KPI cards — 3 colonnes, responsive */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

/* Carte KPI individuelle — fond gris clair, coins très arrondis */
.kpi-card {
  flex: 1;
  background: var(--grey);
  border: none;
  border-radius: 30px;
  padding: 28px 32px;
  min-width: 0;
}

/* Label en haut — petit texte gris en majuscules */
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}

/* Valeur principale — gros chiffre en gras */
.kpi-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.1;
  margin-bottom: 6px;
}

/* Détail sous la valeur — contexte (ex: « 245 souscriptions, 107 renouvellements ») */
.kpi-detail {
  font-size: 13px;
  color: var(--color-muted);
  font-weight: 400;
}


/* -----------------------------------------------------------------------------
   19. TABLEAU CA — Chiffre d'affaires mensuel
   -------------------------------------------------------------------------- */

/* Conteneur du tableau — carte arrondie avec fond gris clair */
.ca-table-container {
  background: var(--grey);
  border-radius: 30px;
  padding: 28px 32px;
  overflow-x: auto;
}

.ca-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* En-tête du tableau CA — majuscules, texte discret */
.ca-table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: left;
  padding: 0 16px 16px 0;
  border-bottom: 1px solid var(--grey-medium);
}

/* Colonnes numériques alignées à droite (CA, clients, transactions) */
.ca-table thead th:nth-child(n+2),
.ca-table tbody td:nth-child(n+2),
.ca-table tfoot td:nth-child(n+2) {
  text-align: right;
}

/* Cellules du corps du tableau */
.ca-table tbody td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid #f0f0f0;
  color: var(--grey-dark);
}

/* Dernière ligne du corps — bordure plus marquée avant le total */
.ca-table tbody tr:last-child td {
  border-bottom: 1px solid var(--grey-medium);
}

/* Ligne de total (tfoot) */
.ca-table tfoot td {
  padding: 16px 16px 0 0;
  font-weight: 600;
  color: var(--black);
}

/* Nom du mois — police medium, couleur noire */
.ca-table .ca-month {
  font-weight: 500;
  color: var(--black);
}

/* Montant CA — police semi-bold, couleur noire */
.ca-table .ca-amount {
  font-weight: 600;
  color: var(--black);
}

/* Liens cliquables dans le tableau CA (nombre de clients / transactions) */
.ca-clickable {
  cursor: pointer;
  color: var(--orange);
  font-weight: 500;
  transition: opacity var(--transition-fast);
}

.ca-clickable:hover {
  opacity: 0.7;
  text-decoration: underline;
}


/* -----------------------------------------------------------------------------
   20. LAYOUT CA — Grille tableau + graphiques (disposition 2 colonnes)
   -------------------------------------------------------------------------- */

/* Layout 2 colonnes : tableau 50%, graphiques 50% */
.ca-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* Colonne graphiques : 2 cartes empilées verticalement */
.ca-charts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Carte graphique individuelle — fond gris clair arrondi */
.ca-chart-card {
  background: var(--grey);
  border-radius: 30px;
  padding: 24px 28px;
}

/* Espacement du label dans la carte graphique */
.ca-chart-card .kpi-label {
  margin-bottom: 16px;
}


/* -----------------------------------------------------------------------------
   21. SIDEBAR DÉTAIL — Panneau latéral droit (listes clients / transactions)
   --------------------------------------------------------------------------
   Panneau glissant depuis la droite de l'écran, affiché au clic sur un
   nombre cliquable dans le tableau CA. Contient un en-tête triable et
   la liste des items (clients ou transactions) avec tri par colonne.
   -------------------------------------------------------------------------- */

/* Overlay sombre derrière la sidebar détail */
.detail-sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.detail-sidebar-overlay.open {
  display: block;
}

/* Panneau latéral — positionné hors-écran par défaut, glisse à droite 0 */
.detail-sidebar {
  position: fixed;
  top: 0;
  right: -850px;
  width: 850px;
  height: 100%;
  background: var(--white);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
}

.detail-sidebar.open {
  right: 0;
}

/* En-tête du panneau — titre + bouton fermer */
.detail-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-sidebar-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--black);
}

/* Bouton fermer (x) du panneau */
.detail-sidebar-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-muted);
  padding: 0;
  line-height: 1;
}

.detail-sidebar-close:hover {
  color: var(--black);
}

/* Corps du panneau — zone scrollable */
.detail-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
}

/* Compteur d'éléments (ex: « 12 nouveaux clients ») */
.detail-sidebar-count {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 16px;
}

/* --- 21a. En-tête triable (colonnes cliquables) --- */

/* Barre d'en-tête avec colonnes triables */
.detail-header-row {
  display: grid;
  gap: 12px;
  padding: 0 0 12px 0;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 4px;
  align-items: center;
}

/* Colonne de l'en-tête — label en majuscules */
.detail-header-col {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Première colonne (email) — occupe l'espace restant */


/* Colonne triable — curseur pointer + changement de couleur au survol */
.detail-header-sortable {
  cursor: pointer;
  transition: color var(--transition-fast);
}

.detail-header-sortable:hover {
  color: var(--orange);
}

/* Icône de tri (double chevron haut/bas) */
.sort-icon {
  width: 10px;
  height: 14px;
  flex-shrink: 0;
}

/* --- 21b. Items de la liste (lignes de données) --- */

/* Ligne d'un item (client ou transaction) */
.detail-item {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 13px;
}

/* Première colonne (email) — tronquée si trop longue */
.detail-item-col:first-child {
  color: var(--grey-dark);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Montant dans la liste — police semi-bold, couleur noire */
.detail-item-amount {
  font-weight: 600;
  color: var(--black);
  margin-left: 12px;
}

/* --- 21c. Badges comptabilisation (Oui / Non) --- */

/* Badge générique */
.detail-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

/* Badge « Oui » — vert */
.detail-badge-oui {
  background: #e8f5e9;
  color: #388e3c;
}

/* Badge « Non » — rouge */
.detail-badge-non {
  background: #fce4ec;
  color: #c62828;
}

/* Badge lettrage cliquable */
.detail-badge-lettrage {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e3f2fd;
  color: #1565c0;
  cursor: pointer;
  transition: opacity 0.2s;
}

.detail-badge-lettrage:hover {
  opacity: 0.7;
}

/* Popup lettrage */
.lettrage-popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 1100;
  align-items: center;
  justify-content: center;
}

.lettrage-popup-overlay.open {
  display: flex;
}

.lettrage-popup {
  background: #fff;
  border-radius: 20px;
  padding: 28px 32px;
  max-width: 850px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.lettrage-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.lettrage-popup-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
}

.lettrage-popup-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #999;
  line-height: 1;
}

.lettrage-popup-close:hover {
  color: var(--black);
}

.lettrage-row:last-child {
  border-bottom: none;
}

.lettrage-row-amount.positive {
  color: var(--black);
}

.lettrage-row-amount.negative {
  color: #c62828;
}


/* Badges type de paiement — couleurs pastel */
.badge-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.badge-type-souscription-auto { background: #e8f5e9; color: #2e7d32; }
.badge-type-renouvellement-auto { background: #e3f2fd; color: #1565c0; }
.badge-type-souscription-manuelle { background: #fff3e0; color: #e65100; }
.badge-type-renouvellement-manuel { background: #f3e5f5; color: #7b1fa2; }
.badge-type-paiement-ponctuel { background: #f5f5f5; color: #616161; }
.badge-type-rembourse { background: #fce4ec; color: #c62828; }
.badge-type-upgrade { background: #e0f7fa; color: #00838f; }
.badge-type-default { background: #f5f5f5; color: #999; }

/* Colonnes sidebar détail — largeurs adaptées */
.detail-header-col:first-child,
.detail-item-col:first-child {
  flex: 1;
  min-width: 0;
}

.detail-header-col:not(:first-child),
.detail-item-col:not(:first-child) {
  min-width: 100px;
}


/* Grille 2 colonnes pour les nouveaux clients */
.detail-header-row.detail-grid-clients,
.detail-item/* Items du menu profil dropdown */
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 13px;
  color: var(--grey-dark);
  cursor: pointer;
  transition: background 0.2s;
  text-align: left;
}

.profile-menu-item:hover {
  background: var(--grey);
}

.profile-menu-item svg {
  flex-shrink: 0;
  color: #999;
}

/* ==========================================================================
   22. DOCUMENTATION — Encarts explicatifs
   ========================================================================== */

.doc-card {
  background: #F9F9F9;
  border-radius: 30px;
  padding: 32px 36px;
  margin-bottom: 24px;
}

.doc-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--black);
  margin: 0 0 8px 0;
}

.doc-card-intro {
  font-size: 14px;
  color: #666;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

/* FAQ dépliante */
.doc-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc-faq-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.doc-faq-item summary {
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-faq-item summary::-webkit-details-marker {
  display: none;
}

.doc-faq-item summary::before {
  content: "+";
  font-size: 16px;
  font-weight: 600;
  color: #999;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.doc-faq-item[open] summary::before {
  content: "−";
  color: var(--orange);
}

.doc-faq-item p {
  font-size: 13px;
  color: #555;
  line-height: 1.7;
  margin: 0;
  padding: 0 16px 14px 44px;
}

.doc-type-item code {
  background: #f0f0f0;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #333;
}

.doc-type-item em {
  color: #888;
}

/* Doc card demi-largeur */
.doc-card-half {
  width: 50%;
}

/* Conteneur du graphique Données */
.donnees-chart-container {
  background: #F9F9F9;
  border-radius: 30px;
  padding: 28px 32px;
}

/* Colonne mois — largeur minimum pour éviter le retour à la ligne */
.ca-table .ca-month {
  white-space: nowrap;
  min-width: 120px;
}