@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Fond, du plus profond au plus proche */
  --bg: #0b0c10;
  --bg-soft: #0f1015;
  --card: #15161d;
  --card-hover: #1a1c25;
  --border: #24252f;
  --border-strong: #35374a;

  /* Texte */
  --text: #f3f1ec;
  --text-dim: #cac8d2;
  --muted: #8a889a;

  /* Accent de marque : indigo. Choisi parce qu'il ne rentre en conflit avec
     aucune des couleurs d'état ci-dessous — le vert, l'ambre et le rouge
     restent lisibles comme des indicateurs, pas comme de la décoration. */
  --accent: #6d7ff5;
  --accent-hover: #8b99ff;
  --accent-deep: #4b5bd6; /* fin du dégradé de la pastille de marque */
  --accent-soft: rgba(109, 127, 245, 0.14);
  --accent-border: rgba(109, 127, 245, 0.35);

  /* États sémantiques */
  --ok: #34c795;
  --ok-soft: rgba(52, 199, 149, 0.14);
  --warn: #f2b84b;
  --warn-soft: rgba(242, 184, 75, 0.14);
  --danger: #ef5350;
  --danger-soft: rgba(239, 83, 80, 0.14);

  /* Echelle */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background:
    radial-gradient(1100px 520px at 18% -10%, rgba(109, 127, 245, 0.10), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(52, 199, 149, 0.06), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.55;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

code {
  font-family: var(--font-mono);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.9em;
}

/* --- Liens ---------------------------------------------------------------
   L'accent est réservé aux actions principales : boutons, marque,
   onglet actif, focus. Un lien de texte reste dans la couleur du texte et
   s'annonce par son soulignement, l'accent n'apparaissant qu'au survol.
   Peindre tous les liens en accent le vidait de son sens. */
a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent-border);
}

/* Dans un tableau, un soulignement permanent fait du bruit sur chaque ligne :
   le lien prend la couleur de sa cellule et ne se souligne qu'au survol. */
td a {
  color: inherit;
  text-decoration-color: transparent;
}

td a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent-border);
}

/* Retour vers l'écran parent : discret, c'est une sortie, pas une action. */
.retour {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.retour::before {
  content: "←";
  transition: transform 0.14s ease;
}

.retour:hover {
  color: var(--text);
}

.retour:hover::before {
  transform: translateX(-3px);
}

/* Sous-navigation d'un module (onglets en pastilles), à la place des listes
   de liens séparés par des points médians. */
.sous-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
}

.sous-nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-soft);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.sous-nav a:hover {
  color: var(--text);
  background: var(--card-hover);
  border-color: var(--border-strong);
}

.sous-nav a.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

/* Texte d'explication sous un titre. Utilisé partout, n'était stylé que dans header. */
.sub {
  color: var(--muted);
  font-size: 13.5px;
}

/* Texte saisi dans une zone multi-ligne : sans ça, les retours à la ligne de
   l'auteur sont écrasés par le HTML et tout s'affiche en un seul bloc. */
.texte-multiligne {
  white-space: pre-line;
}

/* Rangée d'actions au bas d'une fiche (modifier / supprimer), séparée du contenu
   par un filet : ce sont des actions sur l'objet, pas la suite de sa lecture. */
.actions-fiche {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.actions-fiche .inline-form {
  margin: 0;
}

header {
  padding: 32px 24px 20px;
  border-bottom: 1px solid var(--border);
}

header h1 {
  margin: 0 0 4px;
  font-size: 26px;
}

header .sub {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
}

.refresh-form {
  display: flex;
  align-items: center;
  gap: 12px;
}

.refresh-form button,
.refresh-form a.bouton {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, background 0.12s ease;
}

.refresh-form button:hover,
.refresh-form a.bouton:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.refresh-form button.secondary,
.refresh-form a.bouton.secondary {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  box-shadow: none;
}

.refresh-form button.secondary:hover,
.refresh-form a.bouton.secondary:hover {
  background: var(--card-hover);
  border-color: var(--muted);
}

.generated {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

main {
  padding: 28px 24px 60px;
  max-width: 1140px;
  margin: 0 auto;
}

.livraison {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.livraison-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.livraison-head h2 {
  margin: 0;
  font-size: 19px;
}

/* GitHub et Gitea comptés séparément (jamais fusionnés — voir buildLivraisons
   côté serveur) : ce badge évite toute confusion entre deux lignes qui
   peuvent partager le même titre de livraison. */
.source-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
}

.source-badge.source-github {
  color: var(--text-dim);
  background: var(--border);
}

.source-badge.source-gitea {
  color: var(--ok);
  background: var(--ok-soft);
}

/* Équipes (Innovation / Amélioration — voir src/equipes.js) : même pastille
   que source-github/source-gitea, vocabulaire différent. */
.source-badge.source-innovation {
  color: var(--accent);
  background: var(--accent-soft);
}

.source-badge.source-amelioration {
  color: var(--warn);
  background: var(--warn-soft);
}

/* Chiffres d'un business Amélioration (investi / généré / net) — réutilisé
   sur la fiche idée et sur la page Équipes. */
.finances-amelioration {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.stat-mini {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-mini-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.stat-mini-valeur {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stat-mini-valeur.ok { color: var(--ok); }
.stat-mini-valeur.warn { color: var(--danger); }

/* --- Équipes --- */
.equipe-membres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.badge-membre {
  display: inline-block;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
}

.liens-rapides {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* --- Projets (gestion de projet native, façon tableau à groupes) --- */
.pastille-select {
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  padding: 3px 10px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--bg-soft);
  color: var(--text-dim);
  cursor: pointer;
}

.pastille-a_faire, .pastille-basse { background: var(--bg-soft); color: var(--muted); }
.pastille-en_cours, .pastille-elevee { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.pastille-en_attente, .pastille-moyenne { background: var(--warn-soft); color: var(--warn); border-color: rgba(242, 184, 75, 0.4); }
.pastille-bloque, .pastille-urgente { background: var(--danger-soft); color: var(--danger); border-color: rgba(239, 83, 80, 0.4); }
.pastille-termine { background: var(--ok-soft); color: var(--ok); border-color: rgba(52, 199, 149, 0.4); }

.barre-progression-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
}

.barre-progression {
  flex: 1;
  min-width: 50px;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.barre-progression-remplissage {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.barre-progression-valeur {
  width: 46px;
  font-size: 12px;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  border: none;
  background: transparent;
}

.groupe-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.groupe-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.assignes-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.assigne-puce {
  display: inline-block;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11.5px;
  white-space: nowrap;
}

.type-input, .date-input-inline {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  padding: 3px 8px;
  font-size: 12.5px;
  width: 100px;
}

.titre-inline-form {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.titre-inline-form input[type="text"] {
  font-size: 19px;
  font-weight: 700;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.titre-inline-form input[type="text"]:hover,
.titre-inline-form input[type="text"]:focus {
  border-color: var(--border);
  background: var(--bg-soft);
}

.checkbox-membres {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checkbox-membres label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.docs-liste {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.docs-liste li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.livraison h2 {
  font-size: 17px;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.livraison h2::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.meta {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}

.deadline {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.deadline.urgent { color: var(--danger); }
.deadline.overdue { color: var(--danger); }
.deadline.unknown { color: var(--muted); font-weight: 500; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.select-permission {
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 5px 7px;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 600;
}

.select-permission-none {
  color: var(--muted);
}

.select-permission-read {
  color: var(--warn);
  border-color: var(--warn-soft);
}

.select-permission-write {
  color: var(--ok);
  border-color: var(--ok-soft);
}

th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

tbody tr {
  transition: background 0.1s ease;
}

tbody tr:hover {
  background: var(--card-hover);
}

td.login {
  font-weight: 700;
}

td.ok { color: var(--ok); }
td.warn { color: var(--warn); font-weight: 600; }
td.danger { color: var(--danger); font-weight: 600; }

.empty {
  color: var(--muted);
  text-align: center;
  padding: 28px 16px;
  font-size: 13.5px;
}

footer {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
}

/* --- Navigation --- */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(21, 22, 29, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
}

.topnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 800;
  font-size: 14.5px;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(155deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.topnav-links {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.topnav-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  transition: background 0.12s ease, color 0.12s ease;
}

.topnav-links a svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.85;
}

.topnav-links a:hover {
  color: var(--text);
  background: var(--card-hover);
}

.topnav-links a.active {
  color: var(--text);
  background: var(--accent-soft);
}

.topnav-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* Déconnexion : au même niveau visuel que les liens de nav, pas au-dessus. */
.topnav-user .link-btn {
  color: var(--muted);
}

.topnav-user .link-btn:hover {
  color: var(--text);
}

.badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
}

/* --- Auth (login / activation) --- */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow);
}

.auth-card h1 {
  margin: 0 0 4px;
  font-size: 21px;
}

.auth-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(155deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

/* --- Formulaires génériques --- */
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
}

.form-grid.form-inline {
  flex-direction: row;
  align-items: end;
  flex-wrap: wrap;
  max-width: none;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.form-grid.form-inline label {
  min-width: 200px;
}

/* `display: flex` sur les labels écrase le `display: none` que le navigateur
   applique à [hidden] : sans cette règle, masquer un champ en JavaScript
   n'aurait aucun effet. */
.form-grid label[hidden] {
  display: none;
}

/* Dans un formulaire en ligne, un champ qui prend toute la largeur et passe donc
   à sa propre ligne. Pour les zones de texte, qu'on ne peut pas serrer dans une
   colonne de 200px sans les rendre inutilisables. */
.form-grid.form-inline label.champ-large {
  flex-basis: 100%;
  min-width: 100%;
}

.form-grid .checkbox-line {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid input[type="password"],
.form-grid input[type="number"],
.form-grid input[type="date"],
.form-grid input[type="month"],
.form-grid input[type="file"],
.form-grid textarea,
.form-grid select {
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form-grid textarea {
  /* Redimensionnable en hauteur seulement : en largeur, l'utilisateur casserait
     l'alignement de la grille du formulaire. */
  resize: vertical;
  min-height: 92px;
  line-height: 1.5;
}

.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-grid button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, background 0.12s ease;
  align-self: flex-start;
}

.form-grid button:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.inline-form {
  display: inline-block;
  margin: 0 4px 0 0;
}

/* Actions secondaires dans les tableaux. Neutres au repos : une colonne
   entière de rouge ou d'orange attire l'œil sur ce qui est justement le moins
   important de la ligne. La couleur n'arrive qu'au survol, quand elle informe. */
.link-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 0;
  text-decoration: none;
  transition: color 0.12s ease;
}

.link-btn:hover {
  color: var(--accent);
}

.link-btn.danger {
  color: var(--muted);
}

.link-btn.danger:hover {
  color: var(--danger);
}

.link-btn.ok {
  color: var(--muted);
  font-weight: 700;
}

.link-btn.ok:hover {
  color: var(--ok);
}

/* Espacement par marges plutôt que par flex : `display: flex` sur un <td> le
   sort de la mise en page du tableau et décale les colonnes. */
.actions {
  white-space: nowrap;
}

.actions > * {
  margin-right: 14px;
}

.actions > *:last-child {
  margin-right: 0;
}

.muted {
  color: var(--muted);
}

.alerte {
  margin: 0 0 16px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  border-left: 3px solid transparent;
  background: var(--card);
  border: 1px solid var(--border);
  border-left-width: 3px;
}

.alerte.ok {
  border-left-color: var(--ok);
  color: var(--text);
}

.alerte.erreur {
  border-left-color: var(--danger);
  color: var(--text);
}

.lien-invitation code {
  word-break: break-all;
}

/* Secret affiché une seule fois (mot de passe temporaire quand l'email échoue) */
.secret-temporaire code {
  font-size: 18px;
  letter-spacing: 1px;
  word-break: break-all;
  user-select: all;
}

.deconnexion-secondaire {
  margin-top: 18px;
  text-align: center;
}

.qrcode {
  display: block;
  background: white;
  padding: 12px;
  border-radius: var(--radius);
  margin: 12px 0;
}

/* --- Finance --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 15px 17px;
}

.kpi-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.kpi-value {
  font-size: 23px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.kpi-value.ok { color: var(--ok); }
.kpi-value.warn { color: var(--warn); }
.kpi-value.danger { color: var(--danger); }

.kpi-value-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.barre-fond {
  background: var(--border);
  border-radius: 4px;
  height: 7px;
  overflow: hidden;
}

.barre-ca {
  background: var(--ok);
  height: 100%;
  border-radius: 4px;
}

/* --- Pipeline commercial (Kanban) --- */
.kanban {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.kanban-col {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 14px;
  min-width: 220px;
  flex: 1;
}

.kanban-col-gagne { border-top-color: var(--ok); }
.kanban-col-perdu { border-top-color: var(--danger); }
.kanban-col-negociation { border-top-color: var(--warn); }
.kanban-col-devis_envoye,
.kanban-col-contact { border-top-color: var(--accent); }

.kanban-col h3 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: var(--muted);
}

.kanban-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}

.kanban-card select {
  width: 100%;
  margin-top: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 5px 6px;
  font-size: 12px;
  font-family: inherit;
}

#lignes-table {
  margin: 10px 0;
}

#lignes-table input {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  font-family: inherit;
}

/* --- Utilitaire --- */
.cache {
  display: none !important;
}

/* --- Chat (canaux, DM, appels) --- */
.chat-page {
  max-width: 1280px;
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}

.chat-layout {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.chat-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

.chat-sidebar-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.chat-sidebar-titre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}

.chat-sidebar-titre a {
  text-decoration: none;
  font-size: 13px;
}

.chat-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.1s ease;
}

.chat-item:hover {
  background: var(--card-hover);
}

.chat-item.actif {
  background: var(--accent-soft);
  color: var(--text);
}

.badge-non-lu {
  background: var(--accent);
  color: white;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.chat-form-canal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.chat-form-canal input {
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 12.5px;
  font-family: inherit;
}

.chat-form-canal button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px;
  font-weight: 700;
  cursor: pointer;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 0;
  overflow: hidden;
}

.chat-en-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-message {
  max-width: 70%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
}

.chat-message.de-moi {
  align-self: flex-end;
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.chat-message-entete {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 2px;
}

.chat-message-auteur {
  font-size: 12px;
  font-weight: 700;
}

.chat-message-heure {
  font-size: 11px;
  color: var(--muted);
}

.chat-message-texte {
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-form-message {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

.chat-form-message input {
  flex: 1;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
}

.chat-form-message button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-weight: 700;
  cursor: pointer;
}

.chat-resultat {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.chat-resultat:last-child {
  border-bottom: none;
}

.chat-resultat-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.chat-resultat-texte {
  font-size: 14px;
  color: var(--text-dim);
}

/* --- Canaux privés / membres --- */
.chat-check-prive,
.chat-check-video {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
  font-weight: 600;
  cursor: pointer;
}

.modal-appel-carte .chat-check-video {
  margin: 10px 0;
}

.chat-bouton-membres {
  font-size: 12px;
  padding: 0 2px;
  opacity: 0.7;
}

.chat-bouton-membres:hover {
  opacity: 1;
}

.chat-membres-panel {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin: 4px 0 8px;
  font-size: 12.5px;
}

.chat-membres-liste-titre {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.05em;
}

.chat-membres-liste {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-membres-liste li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-badge-createur {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
}

.chat-form-ajout-membre {
  display: flex;
  gap: 6px;
}

.chat-form-ajout-membre select {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 5px 6px;
  font-size: 12px;
  font-family: inherit;
}

.chat-form-ajout-membre button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-weight: 700;
  cursor: pointer;
  font-size: 12px;
}

/* --- Lien d'invitation (rejoindre un canal sans compte) --- */
.chat-lien-titre {
  margin-top: 12px;
}

.chat-lien-actuel {
  display: flex;
  gap: 6px;
}

.chat-lien-champ {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 5px 6px;
  font-size: 11px;
  font-family: var(--font-mono);
}

.chat-lien-copier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 9px;
  cursor: pointer;
}

.chat-lien-note {
  margin: 6px 0;
  color: var(--muted);
  font-size: 11px;
}

.chat-lien-actions {
  margin: 0;
}

.chat-lien-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-weight: 700;
  cursor: pointer;
  font-size: 12px;
}

.chat-lien-actions button.danger {
  background: transparent;
  color: var(--danger);
  padding: 0;
}

/* --- Appels planifiés --- */
.chat-liste-appels {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-liste-appels li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.chat-liste-appels li strong {
  color: var(--text);
  font-size: 13px;
}

.chat-appel-duree {
  color: var(--muted);
}

.chat-vide {
  color: var(--muted);
  font-size: 12.5px;
}

.chat-form-planifier {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-form-planifier input,
.chat-form-planifier select {
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 12.5px;
  font-family: inherit;
}

.chat-form-planifier button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px;
  font-weight: 700;
  cursor: pointer;
}

/* --- Icônes en ligne (remplacent les emoji) --- */
.chat-sidebar-titre .icone-lien {
  display: inline-flex;
  color: var(--muted);
  transition: color 0.12s ease;
}

.chat-sidebar-titre .icone-lien:hover {
  color: var(--accent);
}

.icone-verrou {
  color: var(--muted);
  margin-right: 3px;
  vertical-align: -1px;
}

/* --- En-tête chat (bouton d'appel + choix vidéo) --- */
.chat-en-tete-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-en-tete-actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
}

.chat-en-tete-actions button:disabled {
  background: var(--bg-soft);
  color: var(--muted);
  cursor: not-allowed;
}

/* --- Bannière "un appel a démarré" --- */
.banniere-appel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-border);
  font-size: 13.5px;
  font-weight: 600;
}

.banniere-appel-icone {
  display: inline-flex;
  color: var(--accent);
  flex-shrink: 0;
}

.banniere-appel #banniere-appel-texte {
  flex: 1;
}

.banniere-appel button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-weight: 700;
  cursor: pointer;
  font-size: 12.5px;
}

.banniere-appel button#bouton-ignorer-banniere {
  background: transparent;
  color: var(--text-dim);
}

/* --- Panneau d'appel (non plein écran : le chat reste utilisable pendant l'appel) --- */
.panneau-appel {
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
  background: var(--bg-soft);
}

.panneau-appel-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 13.5px;
}

.panneau-appel-minuteur {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 700;
}

/* Bandeau d'info (appel nombreux : vidéo bridée / caméras coupées). */
.panneau-appel-info {
  flex-basis: 100%;
  margin-top: 6px;
  font-weight: 600;
  font-size: 12px;
  color: var(--accent);
}

.appel-videos-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.appel-video-tuile {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-strong);
}

.appel-video-tuile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.appel-video-tuile.sans-video video {
  display: none;
}

.appel-video-tuile.sans-video::before {
  content: attr(data-initiale);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: auto;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
  font-size: 17px;
}

.appel-video-nom {
  position: absolute;
  bottom: 4px;
  left: 6px;
  font-size: 11px;
  background: rgba(6, 7, 10, 0.65);
  color: white;
  padding: 2px 6px;
  border-radius: 999px;
}

/* Boutons superposés sur chaque tuile : grand plan + plein écran. */
.appel-video-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
}

.appel-video-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(6, 7, 10, 0.65);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.12s ease;
}

.appel-video-tuile:hover .appel-video-actions button,
.appel-video-actions button:focus-visible {
  opacity: 1;
}

/* Pas de survol au doigt : garder les boutons visibles sur écran tactile. */
@media (hover: none) {
  .appel-video-actions button { opacity: 0.9; }
}

/* Tuile qui diffuse un partage d'écran : voir tout l'écran, pas un recadrage
   plein cadre comme pour une webcam. */
.appel-video-tuile.est-partage video {
  object-fit: contain;
  background: #000;
}

/* Grand plan ("spotlight", façon Meet) : la tuile choisie prend la largeur, les
   autres passent en bandeau de vignettes en dessous. */
.appel-videos-grille.a-spotlight {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.appel-videos-grille.a-spotlight .appel-video-tuile {
  flex: 0 0 132px;
  width: 132px;
}

.appel-videos-grille.a-spotlight .appel-video-tuile.est-spotlight {
  flex: 1 1 100%;
  width: 100%;
  order: -1;
  aspect-ratio: auto;
  height: min(70vh, 100%);
  min-height: 240px;
}

.appel-videos-grille.a-spotlight .appel-video-tuile.est-spotlight video {
  object-fit: contain;
}

/* Plein écran natif : la tuile occupe tout l'écran, vidéo entière visible. */
.appel-video-tuile:fullscreen,
.appel-video-tuile:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  border: none;
  border-radius: 0;
}

.appel-video-tuile:fullscreen video,
.appel-video-tuile:-webkit-full-screen video {
  object-fit: contain;
}

/* --- Fenêtre d'appel séparée (appel-fenetre.ejs) : une page à elle seule, pas
   de nav, le panneau d'appel occupe tout l'espace disponible. --- */
.appel-fenetre-body {
  margin: 0;
  height: 100vh;
  display: flex;
  background: var(--bg);
}

.panneau-appel-seul {
  border-bottom: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.panneau-appel-seul .appel-videos-grille {
  flex: 1;
}

.panneau-appel-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.panneau-appel-controles button,
.panneau-appel-controles select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
}

.panneau-appel-minuteur {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.panneau-appel-controles button#bouton-raccrocher {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
  margin-left: auto;
}

.modal-appel {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 10, 0.75);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-appel-carte {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  text-align: center;
  box-shadow: var(--shadow);
}

.modal-appel-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

.modal-appel-actions button {
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  border: none;
}

.modal-appel-actions button#bouton-accepter {
  background: var(--ok);
  color: white;
}

/* --- Page invité (rejoint via un lien, pas de compte, pas de nav complète) --- */
.invite-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(21, 22, 29, 0.82);
}

.invite-entete-canal {
  font-weight: 800;
  flex: 1;
}

.invite-entete .badge {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
}

.chat-page-invite {
  max-width: 900px;
  height: calc(100vh - 57px);
}

.chat-page-invite .chat-layout {
  gap: 0;
}

/* ==========================================================================
   Petits écrans — ticket #29

   La feuille ne contenait aucune media query : tout était dimensionné pour un
   écran large. Principe retenu : un contenu trop large défile DANS son propre
   conteneur, jamais en faisant défiler la page entière — sinon la barre de
   navigation et le texte partent hors de l'écran avec lui.
   ========================================================================== */

/* --- Tableaux ------------------------------------------------------------
   Le suivi des livraisons a 8 colonnes, le catalogue et la finance 7 : environ
   720 px incompressibles sur un écran de 360 px. Chaque tableau est enveloppé
   dans .table-scroll côté vues. */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.table-scroll > table {
  width: 100%;
}

/* Barre de défilement rendue visible : sans indice, rien ne laisse deviner
   qu'il reste des colonnes à droite. */
.table-scroll::-webkit-scrollbar {
  height: 8px;
}

.table-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

.table-scroll::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 900px) {
  /* Le tableau prend la largeur dont il a besoin plutôt que d'être comprimé :
     à 360 px, 8 colonnes écrasées donneraient des cellules sur quatre lignes. */
  .table-scroll > table {
    width: auto;
    min-width: 100%;
  }

  /* --- Navigation ---
     Sept entrées + la marque + l'utilisateur empilaient une barre haute de trois
     rangs. Les entrées passent sur leur propre ligne et défilent latéralement. */
  .topnav {
    padding: 10px 14px;
    gap: 10px;
  }

  .topnav-brand {
    flex: 1;
    min-width: 0;
  }

  .topnav-brand > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topnav-links {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topnav-links::-webkit-scrollbar {
    display: none;
  }

  .topnav-links a {
    flex-shrink: 0;
  }

  /* --- Chat ---
     La barre latérale était figée à 240 px et non rétractable : sur un écran de
     360 px il restait 56 px pour lire la conversation. Elle passe au-dessus,
     hauteur bornée, et la conversation occupe le reste.
     La hauteur du bloc était aussi calculée sur 100vh moins une barre de nav
     supposée d'une seule ligne — faux dès qu'elle en fait deux. */
  .chat-page {
    height: auto;
  }

  .chat-layout {
    flex-direction: column;
  }

  .chat-sidebar {
    width: 100%;
    flex-shrink: 1;
    max-height: 38vh;
  }

  .chat-main {
    min-height: 65vh;
  }
}

@media (max-width: 620px) {
  main {
    padding: 20px 14px 48px;
  }

  header {
    padding: 22px 14px 16px;
  }

  header h1 {
    font-size: 21px;
  }

  /* 24 px de marge extérieure + 24 px de carte, c'était 96 px de décor
     horizontal sur les 360 px disponibles. */
  .livraison {
    padding: 16px 14px;
    border-radius: var(--radius);
  }

  .livraison-head {
    flex-direction: column;
    align-items: flex-start;
  }

  th,
  td {
    padding: 9px 10px;
  }

  /* Un champ par ligne : deux colonnes de 200 px ne tiennent pas côte à côte. */
  .form-grid,
  .form-grid.form-inline label {
    max-width: none;
  }

  .form-grid.form-inline label {
    min-width: 100%;
  }

  .refresh-form {
    flex-wrap: wrap;
  }

  .refresh-form button {
    flex: 1 1 auto;
  }

  .generated {
    width: 100%;
  }

  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
  }

  .kpi-value {
    font-size: 20px;
  }

  /* Les cartes de connexion touchaient les bords de l'écran. */
  .auth-body {
    padding: 16px;
  }

  .auth-card {
    padding: 26px 20px;
  }

  .chat-message {
    max-width: 88%;
  }

  /* La vignette de sa propre caméra occupait 44 % de la largeur pendant un appel. */
  .appel-videos video#video-locale {
    width: 96px;
    bottom: 10px;
    right: 10px;
  }

  .modal-appel-carte {
    margin: 16px;
    padding: 24px 20px;
  }

  .actions > * {
    margin-right: 10px;
  }
}

/* --- Tickets (vue plate, tous projets confondus, façon liste GitHub) --- */
.filtres-tickets {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.liste-tickets {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ticket-ligne {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}

.ticket-ligne:last-child {
  border-bottom: none;
}

.ticket-etat {
  flex-shrink: 0;
  margin-top: 2px;
}

.ticket-etat-open { color: var(--ok); }
.ticket-etat-closed { color: var(--accent); }

.ticket-corps {
  flex: 1;
  min-width: 0;
}

.ticket-titre {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.ticket-titre:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.etiquette-github {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid;
  margin-left: 8px;
  vertical-align: middle;
}

.ticket-meta {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
}

.ticket-commentaires {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}


/* Groupe de navigation avec sous-menu (Ventes & Finance). Ouvert au survol et
   au focus clavier : sans le :focus-within, l'entree serait inaccessible en
   navigation au clavier. */
.topnav-groupe { position: relative; }
.topnav-sous-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  display: none;
  z-index: 40;
}
.topnav-groupe:hover .topnav-sous-menu,
.topnav-groupe:focus-within .topnav-sous-menu { display: grid; }
.topnav-sous-menu a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.topnav-sous-menu a:hover { background: var(--card-hover); color: var(--text); }