/* PROTOTYPE JETABLE — variante C « Cockpit » : chrome sombre et minimal, agenda plein écran. */

.variant-c {
  --c-fond: #1c1e22;
  --c-barre: #15171a;
  --c-surface: #24272c;
  --c-surface-2: #2d3137;
  --c-bord: #33373e;
  --c-texte: #e6e8eb;
  --c-mute: #99a0aa;
  --c-accent: #5b9cff;
  --c-vert: #4ade80;
  --c-ambre: #fbbf24;
  --c-rouge: #f87171;
  --c-sur-pastel: #111827;
  font: 13px/1.35 system-ui, "Segoe UI", Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", sans-serif;
  color: var(--c-texte);
  background: var(--c-fond);
}
.variant-c *, .variant-c *::before, .variant-c *::after { box-sizing: border-box; }
.variant-c button { font: inherit; color: inherit; cursor: pointer; }
.variant-c button:disabled { cursor: not-allowed; }
.variant-c :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.variant-c .c-mute { color: var(--c-mute); }
.variant-c .c-espace { flex: 1; min-width: 8px; }
.variant-c .c-kbd {
  display: inline-block; padding: 1px 5px; border: 1px solid var(--c-bord); border-bottom-width: 2px; border-radius: 4px;
  font-size: 11px; line-height: 14px; color: var(--c-mute); background: var(--c-barre); white-space: nowrap;
}
.variant-c .c-pastille {
  width: 10px; height: 10px; border-radius: 50%; background: var(--c-centre); flex: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
}

/* === Boutons === */
.variant-c .c-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--c-bord);
  background: var(--c-surface-2); font-weight: 600;
}
.variant-c .c-bouton:hover:not(:disabled) { background: #383c43; }
.variant-c .c-bouton.c-petit { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.variant-c .c-primaire { background: var(--c-accent); border-color: var(--c-accent); color: #0b1220; }
.variant-c .c-primaire:hover:not(:disabled) { background: #7ab0ff; }
.variant-c .c-primaire:disabled { background: #2a3444; border-color: #2a3444; color: #6b7686; }
.variant-c .c-discret { background: transparent; }
.variant-c .c-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.variant-c .c-danger:hover { background: #ef4444; }

/* === Statut serveur (login et barre d'état) === */
.variant-c .c-serveur { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.variant-c .c-serveur-connecte { color: var(--c-mute); }
.variant-c .c-serveur-connecte svg { color: var(--c-vert); }
.variant-c .c-serveur-connexion { color: #93c5fd; }
.variant-c .c-serveur-reconnexion { color: var(--c-ambre); }
.variant-c .c-serveur-connexion svg, .variant-c .c-serveur-reconnexion svg { animation: c-tourne 1.2s linear infinite; }
.variant-c .c-serveur-desactive { color: var(--c-rouge); }
@keyframes c-tourne { to { transform: rotate(360deg); } }

/* === Login === */
.variant-c .c-login {
  height: 100%; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, #2a2f38 0%, var(--c-fond) 60%);
}
.variant-c .c-login.c-attenue .c-login-carte { filter: blur(1px); opacity: .45; }
.variant-c .c-login-carte {
  width: 560px; max-width: 100%; background: var(--c-surface); border: 1px solid var(--c-bord);
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); overflow: hidden;
}
.variant-c .c-login-etape-2 { width: 640px; }
.variant-c .c-login-tete { display: flex; align-items: center; gap: 12px; padding: 22px 28px 0; }
.variant-c .c-login-tete b { display: block; font-size: 17px; }
.variant-c .c-login-tete small { color: var(--c-mute); font-size: 12px; }
.variant-c .c-logo {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, #5b9cff, #4ecdc4); color: #0b1220;
}
.variant-c .c-etapes { list-style: none; margin: 22px 28px 0; padding: 0; display: flex; align-items: center; gap: 10px; color: var(--c-mute); font-weight: 600; font-size: 12px; }
.variant-c .c-etapes li { display: flex; align-items: center; gap: 8px; }
.variant-c .c-etapes li[role="button"] { cursor: pointer; }
.variant-c .c-etapes li[role="button"]:hover { color: var(--c-texte); }
.variant-c .c-etape-num {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--c-bord); font-size: 11px;
}
.variant-c .c-etapes .actif { color: var(--c-texte); }
.variant-c .c-etapes .actif .c-etape-num { background: var(--c-accent); border-color: var(--c-accent); color: #0b1220; }
.variant-c .c-etapes .fait .c-etape-num { background: rgba(74, 222, 128, .15); border-color: var(--c-vert); color: var(--c-vert); }
.variant-c .c-etape-trait { flex: 1; height: 1px; background: var(--c-bord); }
.variant-c .c-login-corps { padding: 20px 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.variant-c .c-login-erreur {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px;
  background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .45); color: #fecaca;
}
.variant-c .c-login-erreur svg { color: var(--c-rouge); flex: none; }
.variant-c .c-champ { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--c-mute); font-weight: 600; }
.variant-c .c-champ-saisie {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 8px;
  background: var(--c-barre); border: 1px solid var(--c-bord); color: var(--c-mute);
}
.variant-c .c-champ-saisie:focus-within { border-color: var(--c-accent); }
.variant-c .c-champ-saisie input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--c-texte); font: inherit; font-size: 14px; font-weight: 400; }
.variant-c .c-login-suite { margin-top: 4px; }
.variant-c .c-login-blocage { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--c-mute); font-size: 12px; }
.variant-c .c-login-question { margin: 0; font-size: 15px; font-weight: 600; }
.variant-c .c-exts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.variant-c .c-ext {
  height: 78px; border-radius: 10px; border: 1px solid var(--c-bord); background: var(--c-barre);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.variant-c .c-ext:hover { border-color: #4b5563; background: var(--c-surface-2); }
.variant-c .c-ext-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.variant-c .c-ext-lib { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--c-mute); }
.variant-c .c-ext.choisie { border: 2px solid var(--c-accent); background: rgba(91, 156, 255, .12); }
.variant-c .c-ext.choisie .c-ext-lib { color: var(--c-accent); }
.variant-c .c-login-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.variant-c .c-login-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 28px; border-top: 1px solid var(--c-bord); background: var(--c-barre); font-size: 12px;
}

/* === Écran principal : barre haute / agenda + notes / barre d'état === */
.variant-c .c-app {
  height: 100%; display: grid;
  grid-template-rows: 40px minmax(0, 1fr) 30px;
  grid-template-columns: minmax(0, 1fr) 0;
  grid-template-areas: "haut haut" "agenda notes" "etat etat";
}
.variant-c .c-app.c-notes-on { grid-template-columns: minmax(0, 1fr) 300px; }

.variant-c .c-haut {
  grid-area: haut; display: flex; align-items: center; gap: 8px; padding: 0 8px;
  background: var(--c-barre); border-bottom: 1px solid #0c0d0f; min-width: 0;
}
.variant-c .c-selecteur {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 10px; min-width: 0; flex: 0 1 auto;
  border-radius: 7px; border: 1px solid var(--c-bord); background: var(--c-surface);
}
.variant-c .c-selecteur:hover { background: var(--c-surface-2); }
.variant-c .c-sel-nom { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.variant-c .c-sel-code { color: var(--c-mute); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.variant-c .c-sel-chevron { display: flex; color: var(--c-mute); transform: rotate(90deg); }
.variant-c .c-selecteur.c-en-appel {
  background: var(--c-centre); border-color: var(--c-centre); color: var(--c-sur-pastel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-centre) 30%, transparent);
}
.variant-c .c-selecteur.c-en-appel .c-sel-code,
.variant-c .c-selecteur.c-en-appel .c-sel-chevron { color: rgba(17, 24, 39, .7); }
.variant-c .c-selecteur.c-en-appel .c-kbd { background: rgba(255, 255, 255, .35); border-color: rgba(17, 24, 39, .2); color: rgba(17, 24, 39, .75); }
.variant-c .c-sel-appel { display: flex; }
.variant-c .c-sel-duree { font-weight: 700; font-variant-numeric: tabular-nums; }

.variant-c .c-retour {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; min-width: 0; flex: 0 1 auto;
  border-radius: 7px; border: 1px dashed var(--c-centre); background: color-mix(in srgb, var(--c-centre) 14%, transparent);
  white-space: nowrap; animation: c-pulse-bord 2s ease-in-out infinite;
}
.variant-c .c-retour:hover { background: color-mix(in srgb, var(--c-centre) 26%, transparent); }
.variant-c .c-retour svg { color: var(--c-centre); flex: none; }
.variant-c .c-retour b { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.variant-c .c-retour-duree { font-variant-numeric: tabular-nums; color: var(--c-mute); }
@keyframes c-pulse-bord { 50% { border-style: solid; } }

.variant-c .c-haut-info { color: var(--c-mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.variant-c .c-outil {
  display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; flex: none;
  border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--c-mute);
}
.variant-c .c-outil:hover { background: var(--c-surface); color: var(--c-texte); }
.variant-c .c-outil.on { background: var(--c-surface); border-color: var(--c-bord); color: var(--c-texte); }

/* Agenda : reste blanc, cadre 4 px à la couleur du centre en appel. */
.variant-c .c-agenda { grid-area: agenda; position: relative; min-height: 0; min-width: 0; background: #fff; }
.variant-c .c-agenda.c-cadre::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  border: 4px solid var(--c-centre);
}
.variant-c .c-agenda.c-cadre-anime::after { animation: c-cadre-entree 200ms var(--cadre-delai, 0ms) both; }
@keyframes c-cadre-entree { from { opacity: 0; } to { opacity: 1; } }

/* Voile d'appel décroché : plein écran, puis rétraction vers le cadre de l'agenda. */
.variant-c .c-voile {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  display: grid; place-items: center;
  border: 0 solid var(--c-centre); background-color: var(--c-centre);
  animation: c-voile 2000ms cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes c-voile {
  0% { opacity: 0; inset: 0; border-width: 0; background-color: var(--c-centre); }
  5% { opacity: 1; }
  75% { opacity: 1; inset: 0; border-width: 0; background-color: var(--c-centre); }
  95% { opacity: 1; inset: 40px var(--v-droite) 30px 0; border-width: 4px; background-color: transparent; }
  100% { opacity: 0; inset: 40px var(--v-droite) 30px 0; border-width: 4px; background-color: transparent; }
}
.variant-c .c-voile-texte {
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 5vw; text-align: center;
  color: var(--c-sur-pastel); animation: c-voile-texte 2000ms ease both;
}
@keyframes c-voile-texte {
  0% { opacity: 0; transform: scale(.94); }
  8%, 62% { opacity: 1; transform: none; }
  78%, 100% { opacity: 0; transform: scale(.9); }
}
.variant-c .c-voile-appel {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px; border-radius: 999px;
  background: rgba(17, 24, 39, .88); color: #fff; font-size: 22px; font-weight: 700; letter-spacing: .02em;
}
.variant-c .c-voile-nom { font-size: clamp(44px, 6vw, 104px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.variant-c .c-voile-detail { font-size: clamp(16px, 1.5vw, 24px); font-weight: 600; opacity: .75; }

/* Notes : colonne étroite sombre. */
.variant-c .c-notes {
  grid-area: notes; display: flex; flex-direction: column; gap: 8px; padding: 8px; min-height: 0; overflow: hidden;
  background: var(--c-fond); border-left: 1px solid #0c0d0f; font-size: 12px;
}
.variant-c .c-notes-tete { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.variant-c .c-notes-titre { display: flex; align-items: center; gap: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.variant-c .c-notes-sauvee { flex: 1; color: var(--c-mute); font-size: 11px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.variant-c .c-icone-btn { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 5px; background: transparent; color: var(--c-mute); flex: none; }
.variant-c .c-icone-btn:hover { background: var(--c-surface); color: var(--c-texte); }
.variant-c .c-notes-entete {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 9px; text-align: left;
  border: 1px dashed var(--c-bord); border-radius: 7px; background: transparent; color: var(--c-texte);
}
.variant-c .c-notes-entete:hover { border-color: var(--c-accent); background: rgba(91, 156, 255, .08); }
.variant-c .c-notes-entete svg { color: var(--c-accent); margin-top: 2px; flex: none; }
.variant-c .c-notes-entete span { display: flex; flex-direction: column; min-width: 0; font-weight: 600; }
.variant-c .c-notes-entete small { color: var(--c-mute); font-weight: 400; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.variant-c .c-notes textarea {
  flex: 1; min-height: 0; resize: none; padding: 10px; border-radius: 7px; border: 1px solid var(--c-bord);
  background: var(--c-barre); color: var(--c-texte); font: 12px/1.55 system-ui, "Segoe UI", Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", sans-serif;
  outline: none;
}
.variant-c .c-notes textarea:focus { border-color: var(--c-accent); }
.variant-c .c-notes-pied { display: flex; justify-content: flex-end; gap: 6px; }

/* Barre d'état façon éditeur de code. */
.variant-c .c-etat {
  grid-area: etat; display: flex; align-items: stretch; min-width: 0; overflow: hidden;
  background: var(--c-barre); border-top: 1px solid #0c0d0f; font-size: 12px; color: #c9ced6;
}
.variant-c .c-seg {
  display: flex; align-items: center; gap: 6px; padding: 0 10px; white-space: nowrap; flex: none;
  border: 0; border-right: 1px solid #23262b; background: transparent;
}
.variant-c .c-seg svg { flex: none; }
.variant-c .c-seg-btn:hover { background: var(--c-surface); color: var(--c-texte); }
.variant-c .c-seg-btn { border-right: 0; border-left: 1px solid #23262b; }
.variant-c .c-seg-appel { background: var(--c-centre); color: var(--c-sur-pastel); font-weight: 700; border-right-color: transparent; }
.variant-c .c-seg-appel span { font-variant-numeric: tabular-nums; }
.variant-c .c-seg-serveur .c-serveur-connecte { color: #c9ced6; }
.variant-c .c-point { width: 8px; height: 8px; border-radius: 50%; }
.variant-c .c-point-vert { background: var(--c-vert); box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }
.variant-c .c-point-gris { background: #6b7280; }
.variant-c .c-toast {
  display: flex; align-items: center; gap: 6px; padding: 0 10px; margin: 4px 8px 4px 0; border-radius: 5px;
  max-width: 380px; min-width: 0; white-space: nowrap; font-weight: 600;
  animation: c-toast-entree 180ms ease-out both;
}
.variant-c .c-toast span { overflow: hidden; text-overflow: ellipsis; }
.variant-c .c-toast em { font-style: normal; opacity: .7; }
.variant-c .c-toast svg { flex: none; }
.variant-c .c-toast-info { background: rgba(91, 156, 255, .18); color: #bfd7ff; }
.variant-c .c-toast-success { background: rgba(74, 222, 128, .16); color: #b7f5cc; }
.variant-c .c-toast-error { background: rgba(248, 113, 113, .18); color: #fecaca; }
@keyframes c-toast-entree { from { opacity: 0; transform: translateY(6px); } }

/* === Palette de recherche des centres === */
.variant-c .c-palette-fond {
  position: fixed; inset: 0; z-index: 60; background: rgba(8, 9, 11, .55);
  display: flex; justify-content: center; align-items: flex-start; padding-top: 56px;
}
.variant-c .c-palette {
  width: 640px; max-width: calc(100vw - 32px); max-height: calc(100vh - 150px); display: flex; flex-direction: column;
  background: var(--c-surface); border: 1px solid var(--c-bord); border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6); overflow: hidden;
}
.variant-c .c-palette-champ { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 50px; border-bottom: 1px solid var(--c-bord); color: var(--c-mute); flex: none; }
.variant-c .c-palette-champ input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--c-texte); font: inherit; font-size: 15px; }
.variant-c .c-palette-liste { list-style: none; margin: 0; padding: 6px; overflow-y: auto; min-height: 0; }
.variant-c .c-pi {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  border-left: 3px solid transparent;
}
.variant-c .c-pi:hover { background: var(--c-surface-2); }
.variant-c .c-pi.sel { background: #343944; }
.variant-c .c-pi.appel { border-left-color: var(--c-centre); background: color-mix(in srgb, var(--c-centre) 12%, transparent); }
.variant-c .c-pi.appel.sel { background: color-mix(in srgb, var(--c-centre) 22%, #343944); }
.variant-c .c-pi-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.variant-c .c-pi-texte b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.variant-c .c-pi-texte small { color: var(--c-mute); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.variant-c .c-pi-appel {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; flex: none;
  background: var(--c-centre); color: var(--c-sur-pastel); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.variant-c .c-pi-affiche { flex: none; font-size: 11px; color: var(--c-accent); border: 1px solid rgba(91, 156, 255, .5); border-radius: 999px; padding: 1px 7px; }
.variant-c .c-pi-code, .variant-c .c-pi-file { flex: none; color: var(--c-mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.variant-c .c-pi-code { width: 52px; }
.variant-c .c-pi-file { width: 60px; }
.variant-c .c-pi-raccourci { flex: none; width: 40px; text-align: right; font-size: 11px; color: #6b7280; }
.variant-c .c-pi-vide { padding: 18px; text-align: center; color: var(--c-mute); }
.variant-c .c-palette-pied { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--c-bord); color: var(--c-mute); font-size: 11px; flex: none; }
.variant-c .c-palette-pied > span { display: inline-flex; align-items: center; gap: 4px; }

/* === Modales === */
.variant-c .c-modale-fond { position: fixed; inset: 0; z-index: 70; background: rgba(8, 9, 11, .62); display: grid; place-items: center; padding: 24px; }
.variant-c .c-modale {
  width: 420px; max-width: 100%; padding: 26px 26px 22px; border-radius: 14px; text-align: center;
  background: var(--c-surface); border: 1px solid var(--c-bord); box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.variant-c .c-modale h2 { margin: 10px 0 6px; font-size: 18px; }
.variant-c .c-modale p { margin: 0 0 12px; color: #c9ced6; line-height: 1.5; }
.variant-c .c-modale-icone { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(248, 113, 113, .14); color: var(--c-rouge); }
.variant-c .c-modale-alerte {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--c-centre); color: var(--c-sur-pastel) !important; font-weight: 600;
}
.variant-c .c-modale-actions { display: flex; gap: 10px; margin-top: 18px; }
.variant-c .c-modale-actions .c-bouton { flex: 1; }
.variant-c .c-spinner { width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; border: 3px solid var(--c-bord); border-top-color: var(--c-accent); animation: c-tourne .9s linear infinite; }
.variant-c .c-progression { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.variant-c .c-progression li {
  display: flex; align-items: center; gap: 10px; color: var(--c-mute);
  animation: c-prog-etape 1ms calc(var(--i) * 350ms + 150ms) both;
}
.variant-c .c-prog-icone { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--c-bord); color: transparent; flex: none; }
@keyframes c-prog-etape { to { color: var(--c-texte); } }
.variant-c .c-progression li .c-prog-icone { animation: c-prog-icone 1ms calc(var(--i) * 350ms + 150ms) both; }
@keyframes c-prog-icone { to { color: var(--c-vert); border-color: var(--c-vert); background: rgba(74, 222, 128, .14); } }
.variant-c .c-barre-prog { height: 4px; border-radius: 2px; background: var(--c-bord); overflow: hidden; }
.variant-c .c-barre-prog span { display: block; height: 100%; background: var(--c-accent); animation: c-prog 1.6s ease-out both; }
@keyframes c-prog { from { width: 4%; } to { width: 100%; } }