/* ═══════════════════════════════════════════════════════════════
   JARVIS — Design Tokens
   Centralise toutes les couleurs, rayons, transitions du site.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Couleurs principales ─────────────────────────────────── */
  --color-bg:           #191919;   /* fond sombre dominant       */
  --color-primary:      #3498db;   /* bleu principal (bordures)  */
  --color-primary-btn:  rgba(21, 96, 189, 1); /* bleu boutons   */
  --color-text:         white;     /* texte par défaut           */

  /* ── Couleurs de statut ───────────────────────────────────── */
  --color-success:      #2ecc71;   /* vert  — OK / validé        */
  --color-success-dark: #27ae60;   /* vert foncé — hover         */
  --color-danger:       #e74c3c;   /* rouge — erreur / suppr.    */
  --color-danger-dark:  #c0392b;   /* rouge foncé — hover        */
  --color-warning:      #f39c12;   /* orange — alerte            */

  /* ── Couleurs utilitaires ─────────────────────────────────── */
  --color-spotify:      #1db954;   /* vert Spotify               */
  --color-border-muted: rgba(255, 255, 255, 0.15); /* séparateur */
  --color-overlay:      rgba(0, 0, 0, 0.6);        /* overlay    */
  --color-overlay-dark: rgba(0, 0, 0, 0.8);        /* overlay    */

  /* ── Échelle de gris ─────────────────────────────────────── */
  --color-text-muted:     #888;    /* texte secondaire gris      */
  --color-text-secondary: #aaa;    /* texte tertiaire clair      */
  --color-surface:        rgba(151, 151, 151); /* placeholder    */
  --color-border-light:   #ddd;    /* bordure claire             */
  --color-border-medium:  #ccc;    /* bordure médiane            */
  --color-light-gray:     #f2f2f2; /* fond tableaux              */
  --color-dark-gray:      #333;    /* en-têtes tableaux          */
  --color-very-dark:      #222;    /* fond très sombre           */
  --color-near-black:     #111;    /* quasi-noir                 */

  /* ── Couleurs spéciales ──────────────────────────────────── */
  --color-teal-dark:    #003b56;            /* bleu-vert foncé   */
  --color-cyan-bright:  rgb(0, 127, 255);   /* bleu brillant     */

  /* ── Border-radius ───────────────────────────────────────── */
  --radius-card:   10px;   /* tuiles du dashboard            */
  --radius-panel:  25px;   /* grands panneaux (paramètres…)  */
  --radius-btn:    24px;   /* boutons et inputs              */
  --radius-md:      8px;   /* composants modernes (NAS…)     */
  --radius-tag:    20px;   /* étiquettes / tags              */
  --radius-sm:      6px;   /* petits éléments                */
  --radius-pill:  999px;   /* pilules (full-round)           */
  --radius-circle:  50%;   /* cercles / avatars              */
  --radius-xs:      3px;   /* très petits coins              */
  --radius-small:   5px;   /* petits éléments légers         */
  --radius-md-lg:  15px;   /* coins moyens-grands            */

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:      0.15s ease;  /* rapide                */
  --transition-base:      0.2s ease;   /* standard              */
  --transition-slow:      0.25s;       /* lent                  */
  --transition-medium:    0.3s ease;   /* moyen                 */
  --transition-very-slow: 0.6s ease;   /* très lent             */
}

/* ═══════════════════════════════════════════════════════════════
   Composants utilitaires réutilisables
   ═══════════════════════════════════════════════════════════════ */

/* Tuiles dashboard (fond sombre + coins) */
.card {
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  padding: 15px;
  color: var(--color-text);
}

/* Input standard du site */
.form-input {
  background-color: var(--color-bg);
  border: 2px solid var(--color-primary);
  color: var(--color-text);
  border-radius: var(--radius-btn);
  padding: 14px 10px;
  outline: none;
}

/* Bouton principal */
.btn-primary {
  background: none;
  border: 2px solid var(--color-primary-btn);
  border-radius: var(--radius-btn);
  color: var(--color-text);
  padding: 14px 40px;
  outline: none;
  cursor: pointer;
  transition: var(--transition-slow);
}
.btn-primary:hover {
  background: var(--color-primary-btn);
}

/* Tronquer texte long */
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tuile standard (padding 20px, centré) */
.card-standard {
  padding: 20px;
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  color: var(--color-text);
  text-align: center;
}

/* Panneau centré largeur 80% */
.panel-centered {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-bg);
  border-radius: var(--radius-panel);
  padding: 10px;
  text-align: center;
}

/* Colonne flex centrée */
.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Flex avec gap 10px */
.flex-gap-10 {
  display: flex;
  gap: 10px;
}

/* Groupe de formulaire */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
}