/* ==========================================================================
   TeamClic Assist — Design system
   Source : "Charte graphique Teamclic — Version 2026" (12 pages)
   Toute couleur ou police utilisee dans l'app doit venir d'ici.
   ========================================================================== */

:root {
  /* --- Couleurs primaires (charte 03) --- */
  --tc-noir: #000000;          /* Noir Absolu — textes principaux, fonds, enseigne */
  --tc-vert: #b4c83c;          /* Vert TeamClic — accents, CTA, tags [ ], filets deco */
  --tc-blanc: #ffffff;

  /* --- Secondaires & neutres (charte 03) --- */
  --tc-rouge: #c10000;         /* Rouge Coquelicot — alertes, bandeau GAMING */
  --tc-bleu: #4eafe8;          /* Bleu ciel profond — information */
  --tc-graphite: #1a1a1a;      /* Noir Graphite — surfaces */
  --tc-gris-clair: #f5f5f5;    /* Fonds de sections, encadres clairs */
  --tc-gris-moyen: #e0e0e0;
  --tc-gris-texte: #555555;

  /* --- Derivees (usage interface uniquement, jamais en print) --- */
  --tc-surface: #111111;
  --tc-surface-haute: #1a1a1a;
  --tc-bordure: #2a2a2a;
  --tc-texte-faible: #9a9a9a;
  --tc-vert-sombre: #8fa030;
  --tc-vert-voile: rgba(180, 200, 60, 0.12);
  --tc-rouge-voile: rgba(193, 0, 0, 0.15);

  /* --- Typographie (charte 04) ---
     Poppins bold : titres | Poppins medium : accroches | Helvetica : corps */
  --tc-font-titre: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --tc-font-corps: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* --- Rythme --- */
  --tc-radius: 10px;
  --tc-radius-sm: 6px;
  --tc-filet: 3px;             /* filet vert decoratif */
  --tc-ombre: 0 10px 30px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tc-noir);
  color: var(--tc-blanc);
  font-family: var(--tc-font-corps);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

h1, h2, h3, .tc-titre {
  font-family: var(--tc-font-titre);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

.tc-accroche {
  font-family: var(--tc-font-titre);
  font-weight: 500;
  font-size: 15px;
  color: var(--tc-gris-moyen);
}

.tc-legende {
  font-style: italic;
  font-size: 12px;
  color: var(--tc-texte-faible);
}

/* --- Tag [ ] : signature visuelle TeamClic (charte 03 « tags [ ] ») --- */
.tc-tag {
  font-family: var(--tc-font-titre);
  font-weight: 700;
  color: var(--tc-vert);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.tc-tag::before { content: '['; margin-right: 4px; }
.tc-tag::after  { content: ']'; margin-left: 4px; }

/* --- Filet vert decoratif --- */
.tc-filet {
  height: var(--tc-filet);
  background: var(--tc-vert);
  border: 0;
  margin: 0;
}

/* --- Surfaces --- */
.tc-carte {
  background: var(--tc-surface);
  border: 1px solid var(--tc-bordure);
  border-radius: var(--tc-radius);
  padding: 20px;
}

.tc-carte--accent { border-top: var(--tc-filet) solid var(--tc-vert); }

/* --- Boutons --- */
.tc-btn {
  font-family: var(--tc-font-titre);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: var(--tc-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  background: var(--tc-vert);
  color: var(--tc-noir);
}
.tc-btn:hover:not(:disabled) { background: #c5d84f; }
.tc-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.tc-btn--fantome {
  background: transparent;
  color: var(--tc-blanc);
  border-color: var(--tc-bordure);
}
.tc-btn--fantome:hover:not(:disabled) { border-color: var(--tc-vert); color: var(--tc-vert); background: transparent; }

.tc-btn--danger { background: var(--tc-rouge); color: var(--tc-blanc); }
.tc-btn--danger:hover:not(:disabled) { background: #d81010; }

/* --- Champs --- */
.tc-champ {
  width: 100%;
  padding: 12px 14px;
  background: var(--tc-noir);
  border: 1px solid var(--tc-bordure);
  border-radius: var(--tc-radius-sm);
  color: var(--tc-blanc);
  font-family: var(--tc-font-corps);
  font-size: 14px;
  user-select: text;
}
.tc-champ:focus { outline: none; border-color: var(--tc-vert); }
.tc-champ::placeholder { color: #666; }

.tc-label {
  display: block;
  font-family: var(--tc-font-titre);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tc-texte-faible);
  margin-bottom: 6px;
}

/* --- Code de session : l'element le plus lu de l'app --- */
.tc-code {
  font-family: var(--tc-font-titre);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.06em;
  color: var(--tc-vert);
  user-select: text;
}

/* --- Pastilles d'etat --- */
.tc-etat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--tc-gris-moyen);
}
.tc-etat::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tc-gris-texte);
}
.tc-etat--ok::before { background: var(--tc-vert); box-shadow: 0 0 8px var(--tc-vert); }
.tc-etat--attente::before { background: var(--tc-bleu); animation: tc-pulse 1.2s infinite; }
.tc-etat--erreur::before { background: var(--tc-rouge); }

@keyframes tc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* --- Barre de titre custom (fenetres sans cadre) --- */
.tc-barre-titre {
  height: 38px;
  background: var(--tc-noir);
  border-bottom: 1px solid var(--tc-bordure);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  -webkit-app-region: drag;
}
.tc-barre-titre button, .tc-barre-titre .tc-champ { -webkit-app-region: no-drag; }

/* --- Scrollbars discretes --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tc-noir); }
::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--tc-vert-sombre); }