/* =========================================================================
   Standard téléphonique — poste opérateur.
   Fond sombre, surfaces en léger relief, un seul accent bleu.
   L'écran de prise de poste garde l'apparence validée ; l'écran opérateur
   est organisé autour du clavier, avec touches rondes et interrupteurs.
   ========================================================================= */

:root {
  --fond:        #0A0B0F;
  --surface:     #14161E;
  --surface-2:   #1B1E28;
  --surface-3:   #232733;
  --bord:        rgba(255, 255, 255, .075);
  --bord-vif:    rgba(255, 255, 255, .14);

  --texte:       #F3F5F9;
  --texte-doux:  #9AA2B4;
  --texte-faible:#646C7E;

  --accent:      #5B8CFF;
  --accent-vif:  #7AA2FF;
  --vert:        #34D399;
  --rouge:       #FF5A65;
  --ambre:       #FBBF24;

  --e1: 0 1px 2px rgba(0,0,0,.28);
  --e2: 0 4px 14px rgba(0,0,0,.32);
  --e3: 0 18px 48px rgba(0,0,0,.5);

  --r-s: 10px;
  --r:   14px;
  --r-l: 20px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0; min-height: 100%;
  background: var(--fond); color: var(--texte);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body { display: flex; flex-direction: column; min-height: 100vh; }

svg { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------ Typographie */

h1 { font-size: clamp(26px, 3.6vw, 34px); font-weight: 700; letter-spacing: -.025em; margin: 0 0 8px; }
h3 { font-size: 20px; font-weight: 650; letter-spacing: -.015em; margin: 0 0 18px; }
h3.sous-titre { font-size: 15px; margin: 28px 0 2px; }

h2, .eyebrow, label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--texte-faible); }
h2 { margin: 0 0 14px; }
.eyebrow { margin: 0 0 8px; }

.note, .aide { color: var(--texte-doux); font-size: 14px; line-height: 1.6; }
.note { margin-top: 26px; }
.alerte { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ambre); }

/* ------------------------------------------------------------- Structure */

.ecran { display: none; flex-direction: column; flex: 1; min-height: 0; }
.ecran.on { display: flex; }

main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 30px) 70px; }

header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px clamp(16px, 4vw, 30px);
  background: rgba(10, 11, 15, .8);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--bord);
}
.plaque { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 180px; }
.plaque b { display: block; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.plaque span { display: block; margin-top: 1px; font-size: 13px; color: var(--texte-faible); }

button.lien {
  background: none; border: none; padding: 8px 10px; min-height: 0;
  font-size: 13.5px; color: var(--texte-doux); font-weight: 550;
}
button.lien:hover { color: var(--texte); background: var(--surface-2); }

/* --------------------------------------------------------------- Voyants */

.lampe, .pastille { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--texte-faible); opacity: .5; }
.lampe.on, .s-libre .pastille { background: var(--vert); opacity: 1; box-shadow: 0 0 0 3px rgba(52,211,153,.16); }
.s-en-appel .pastille, .s-attente .pastille { background: var(--ambre); opacity: 1; box-shadow: 0 0 0 3px rgba(251,191,36,.16); }
.s-ne-pas-deranger .pastille { background: var(--rouge); opacity: 1; box-shadow: 0 0 0 3px rgba(255,90,101,.16); }
.s-sonne .pastille { background: var(--accent); opacity: 1; animation: pulse-point 1.3s ease-out infinite; }
@keyframes pulse-point {
  0%   { box-shadow: 0 0 0 0 rgba(91,140,255,.5); }
  100% { box-shadow: 0 0 0 9px rgba(91,140,255,0); }
}

/* --------------------------------------------------------------- Boutons */

button {
  font: inherit; font-size: 15px; font-weight: 550; cursor: pointer; color: var(--texte);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--r-s);
  padding: 14px 18px; min-height: 52px;
  transition: background .16s, border-color .16s, transform .1s, opacity .16s;
}
button:hover { background: var(--surface-3); border-color: var(--bord-vif); }
button:active { transform: scale(.975); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .32; cursor: not-allowed; }

button.petit { min-height: 38px; padding: 8px 14px; font-size: 13.5px; border-radius: 9px; }
button.primaire { background: var(--accent); border-color: transparent; color: #08122E; font-weight: 650; }
button.primaire:hover { background: var(--accent-vif); }
button.vert   { background: var(--vert);  border-color: transparent; color: #04251A; font-weight: 650; }
button.rouge  { background: var(--rouge); border-color: transparent; color: #2E0509; font-weight: 650; }
button.orange { background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.4); color: var(--ambre); }
button.bleu   { background: rgba(91,140,255,.13); border-color: rgba(91,140,255,.38); color: var(--accent-vif); }

/* -------------------------------------------- Écran 1 : choix du poste */

.accueil-entete { text-align: center; padding: clamp(38px, 9vh, 78px) 22px 4px; max-width: 1180px; margin: 0 auto; width: 100%; }
.accueil-sous { color: var(--texte-doux); margin: 0; font-size: 16px; }

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }

.poste-carte {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; justify-content: flex-start;
  padding: 20px; min-height: 118px; text-align: left; font-weight: 400; font-size: 15px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r); box-shadow: var(--e1);
}
.poste-carte:hover { background: var(--surface-2); border-color: var(--bord-vif); transform: translateY(-1px); box-shadow: var(--e2); }
.poste-carte b { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.poste-carte .num { font-size: 13px; color: var(--texte-faible); font-variant-numeric: tabular-nums; }
.poste-carte .statut { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texte-doux); margin-top: auto; padding-top: 8px; }
.poste-carte[data-role="standard"] { border-color: rgba(91,140,255,.32); }

#installer {
  margin-top: 26px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
#installer b { font-size: 15px; font-weight: 650; }
#installer span { color: var(--texte-doux); font-size: 14px; line-height: 1.55; flex: 1; min-width: 220px; }

/* --------------------------------------- Écran 2 : disposition du poste */

#ecran-poste main { display: grid; gap: 16px; grid-template-columns: 1fr; align-content: start; }

.bloc {
  padding: 20px; background: var(--surface);
  border: 1px solid var(--bord); border-radius: var(--r); box-shadow: var(--e1);
}

/* ------------------------------------------------------------ Les appels */

.appel {
  position: relative; overflow: hidden; padding: 18px; margin-bottom: 10px;
  background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--r-s);
}
.appel:last-child { margin-bottom: 0; }
.appel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(135deg, rgba(52,211,153,.09), transparent 42%);
}
.appel.en-attente::after   { background: linear-gradient(135deg, rgba(251,191,36,.1), transparent 42%); }
.appel.consultation::after { background: linear-gradient(135deg, rgba(91,140,255,.1), transparent 42%); }

.appel .haut { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; }
.appel .qui { font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.appel .meta { font-size: 13.5px; color: var(--texte-doux); }
.appel .chrono { margin-left: auto; font-family: var(--mono); font-size: 15px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.appel .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; position: relative; }
.appel .actions button { padding: 12px 16px; min-height: 48px; font-size: 14.5px; }

.badge {
  font-size: 13px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--bord); color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}
.badge.violet, .badge.orange {
  font-size: 11.5px; font-weight: 600;
  background: rgba(91,140,255,.12); border-color: transparent; color: var(--accent-vif);
}
.numero-appelant { color: var(--texte); }

.vide { padding: 28px; text-align: center; font-size: 14.5px; color: var(--texte-faible); background: var(--surface-2); border-radius: var(--r-s); }

/* --------------------------------------------- Relevé de ligne + vumètre */

.diag {
  position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 13px;
  background: rgba(0,0,0,.3); border: 1px solid var(--bord); border-radius: var(--r-s);
  font-size: 13px; color: var(--texte-doux);
}
.diag .etat { display: flex; align-items: center; gap: 8px; font-weight: 550; }
.diag .etat i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.diag-ok .etat { color: var(--vert); }
.diag-attente .etat { color: var(--ambre); }
.diag-ko .etat { color: var(--rouge); }

.vumetre { display: flex; align-items: flex-end; gap: 3px; height: 15px; }
.vumetre i { width: 3px; border-radius: 2px; background: var(--bord-vif); transition: background .09s linear; }
.vumetre i:nth-child(1) { height: 5px; }
.vumetre i:nth-child(2) { height: 7px; }
.vumetre i:nth-child(3) { height: 10px; }
.vumetre i:nth-child(4) { height: 13px; }
.vumetre i:nth-child(5) { height: 15px; }
.vumetre i:nth-child(6) { height: 15px; }
.vumetre i.on { background: var(--vert); }
.diag-ko .vumetre i.on { background: var(--rouge); }

.diag .filtre { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--texte-faible); }
.diag .compteurs { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--texte-faible); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- Le clavier */

.ecran-num {
  padding: 16px; min-height: 68px; border-radius: var(--r-s);
  background: var(--surface-2); border: 1px solid var(--bord);
  font-size: 28px; font-weight: 500; text-align: center;
  letter-spacing: .07em; font-variant-numeric: tabular-nums; word-break: break-all;
}

.clavier {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin: 16px auto 0; max-width: 330px;
}
.touche {
  aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 50%;
  flex-direction: column; gap: 1px;
  background: var(--surface-2); border: 1px solid var(--bord);
  font-size: 25px; font-weight: 450; font-variant-numeric: tabular-nums;
}
.touche:hover { background: var(--surface-3); }
.touche:active { background: var(--accent); color: #08122E; border-color: transparent; transform: scale(.94); }
.touche small { font-size: 9px; letter-spacing: .14em; color: var(--texte-faible); font-weight: 600; }
.touche:active small { color: rgba(8,18,46,.62); }

.clavier-actions {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin: 16px auto 0; max-width: 330px;
}
.rond {
  aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--bord);
}
.rond svg { width: 24px; height: 24px; }
.rond.appel { background: var(--vert); border-color: transparent; color: #04251A; }
.rond.appel:hover { background: #4BE0A8; }
.rond.message { background: rgba(91,140,255,.14); border-color: rgba(91,140,255,.36); color: var(--accent-vif); }
.rond.efface { color: var(--texte-doux); }

.clavier-legende {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  max-width: 330px; margin: 8px auto 0;
  font-size: 12px; color: var(--texte-faible); text-align: center;
}

/* ------------------------------------------------------------- Annuaire */

.ligne-annuaire {
  width: 100%; justify-content: flex-start; gap: 13px; text-align: left;
  padding: 12px 14px; margin-bottom: 8px; min-height: 64px;
  background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-s); font-weight: 400;
}
.ligne-annuaire:last-of-type { margin-bottom: 0; }
.ligne-annuaire .avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(91,140,255,.3), rgba(139,107,255,.22));
  color: var(--accent-vif); font-size: 14px; font-weight: 650;
}
.ligne-annuaire .texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ligne-annuaire .texte b { font-size: 15px; font-weight: 600; }
.ligne-annuaire .texte small { font-size: 12.5px; color: var(--texte-faible); font-variant-numeric: tabular-nums; }
.ligne-annuaire .etat { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--texte-doux); }
.ligne-annuaire:not(:disabled):hover { background: var(--surface-3); border-color: var(--bord-vif); }

/* --------------------------------------------------------- Interrupteurs */

.interrupteur {
  width: 100%; justify-content: space-between; gap: 16px; text-align: left;
  padding: 14px 16px; margin-bottom: 8px; min-height: 68px;
  background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-s); font-weight: 400;
}
.interrupteur:last-of-type { margin-bottom: 0; }
.i-libelle { display: flex; flex-direction: column; gap: 3px; }
.i-libelle b { font-size: 15px; font-weight: 600; }
.i-libelle small { font-size: 12.5px; color: var(--texte-faible); }

.i-piste {
  position: relative; width: 50px; height: 30px; border-radius: 999px; flex: none;
  background: var(--surface-3); border: 1px solid var(--bord-vif);
  transition: background .2s, border-color .2s;
}
.i-piste i {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--texte-faible); transition: transform .2s cubic-bezier(.3,.8,.4,1), background .2s;
}
.interrupteur.actif .i-piste { background: rgba(52,211,153,.28); border-color: rgba(52,211,153,.55); }
.interrupteur.actif .i-piste i { transform: translateX(20px); background: var(--vert); }
#btn-dnd.actif .i-piste { background: rgba(255,90,101,.26); border-color: rgba(255,90,101,.55); }
#btn-dnd.actif .i-piste i { background: var(--rouge); }

/* ------------------------------------------------------------ Messages */

.badge-nb {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--rouge); color: #2E0509;
  font-size: 12px; font-weight: 700; vertical-align: middle; margin-left: 6px;
}

.message {
  position: relative; padding: 15px 16px; margin-bottom: 9px;
  background: var(--surface-2); border: 1px solid var(--bord);
  border-left: 3px solid var(--accent); border-radius: var(--r-s);
}
.message:last-child { margin-bottom: 0; }
.message.lu { border-left-color: var(--bord-vif); opacity: .72; }
.message.u-rappel  { border-left-color: var(--ambre); }
.message.u-urgente { border-left-color: var(--rouge); }

.msg-haut { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.msg-haut b { font-size: 15px; font-weight: 650; }
.msg-date { margin-left: auto; font-size: 12.5px; color: var(--texte-faible); font-variant-numeric: tabular-nums; }
.badge.urgence { font-size: 11px; font-weight: 650; background: rgba(251,191,36,.16); color: var(--ambre); border-color: transparent; }
.u-urgente .badge.urgence { background: rgba(255,90,101,.16); color: var(--rouge); }

.msg-tel { margin-top: 3px; font-size: 13px; color: var(--accent-vif); font-variant-numeric: tabular-nums; }
.msg-objet { margin: 9px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--texte); white-space: pre-wrap; }
.msg-bas {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; font-size: 12.5px; color: var(--texte-faible);
}
.msg-bas button { margin-left: auto; }
.msg-lu { color: var(--vert); }

/* --------------------------------------------------------- Traçabilité */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
td { padding: 10px 0; border-bottom: 1px solid var(--bord); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.h { width: 88px; font-family: var(--mono); font-size: 12.5px; color: var(--texte-faible); white-space: nowrap; }

#brief {
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(91,140,255,.1), var(--surface) 46%);
  border: 1px solid rgba(91,140,255,.26); border-radius: var(--r);
}
#brief b { display: block; margin-bottom: 5px; font-weight: 650; }
#brief span { color: var(--texte-doux); font-size: 14px; line-height: 1.6; }

/* ----------------------------------------------------------- Appel entrant */

#entrant {
  position: fixed; inset: 0; z-index: 50;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px; text-align: center;
  background-color: var(--fond);
  background-image: radial-gradient(120% 80% at 50% 12%, #1B2340 0%, transparent 62%);
}
#entrant.on { display: flex; animation: apparait .28s ease-out; }
@keyframes apparait { from { opacity: 0; transform: scale(.985); } }

.halo {
  position: relative; display: grid; place-items: center;
  width: 116px; height: 116px; margin-bottom: 30px; border-radius: 50%;
  background: linear-gradient(150deg, var(--accent), #8B6BFF);
  font-size: 40px; font-weight: 600; color: #08122E; letter-spacing: -.02em;
  box-shadow: 0 16px 50px rgba(91,140,255,.42);
}
.halo::before, .halo::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(122,162,255,.5);
  animation: onde 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}
.halo::after { animation-delay: 1.2s; }
@keyframes onde { from { transform: scale(1); opacity: .75; } to { transform: scale(2.05); opacity: 0; } }

#entrant .eyebrow { color: var(--texte-faible); }
#entrant h3 { font-size: clamp(25px, 4.4vw, 34px); font-weight: 650; margin: 0 0 8px; letter-spacing: -.025em; }
#entrant p:not(.eyebrow) { font-size: 17px; color: var(--texte-doux); margin: 0 0 40px; font-variant-numeric: tabular-nums; }
#entrant .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
#entrant .actions button { min-width: 176px; min-height: 62px; font-size: 16px; border-radius: var(--r); }

/* --------------------------------------------------------------- Modales */

.modale {
  position: fixed; inset: 0; z-index: 60; padding: 22px;
  display: none; align-items: center; justify-content: center;
  background: rgba(5,6,9,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modale.on { display: flex; animation: apparait .2s ease-out; }
.modale .boite {
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto; padding: 26px;
  background: var(--surface); border: 1px solid var(--bord-vif); border-radius: var(--r-l); box-shadow: var(--e3);
}
.modale h2, .modale h3 { text-align: left; }

label { display: block; margin: 18px 0 7px; }
input, select, textarea {
  width: 100%; padding: 14px; font: inherit; font-size: 15px; color: var(--texte);
  background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--r-s);
  transition: border-color .16s, box-shadow .16s;
}
input::placeholder, textarea::placeholder { color: var(--texte-faible); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,140,255,.18); }
textarea { min-height: 94px; resize: vertical; }

.modale .actions { display: flex; gap: 10px; margin-top: 24px; }
.modale .actions.colonne { flex-direction: column; }
.modale .actions button { flex: 1; }

.identite-carte {
  width: 100%; margin-bottom: 9px; padding: 16px; text-align: left; font-weight: 400;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: var(--surface-2); border-radius: var(--r-s);
}
.identite-carte b { font-size: 15px; font-weight: 650; }
.identite-carte .num { font-size: 13px; color: var(--accent-vif); font-variant-numeric: tabular-nums; }
.identite-carte .ctx { color: var(--texte-doux); font-size: 13.5px; white-space: normal; line-height: 1.55; }

/* ------------------------------------------------- Page d'accueil (choix) */

.page-accueil {
  display: grid; place-items: center; min-height: 100vh; padding: 24px;
  background:
    radial-gradient(70% 55% at 50% -8%, rgba(91, 140, 255, .16) 0%, transparent 70%),
    var(--fond);
}

.choix { width: 100%; max-width: 880px; }

.choix-entete { text-align: center; margin-bottom: 34px; }
.marque {
  display: inline-block; margin-bottom: 16px; padding: 5px 13px;
  border: 1px solid var(--bord-vif); border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--texte-doux); letter-spacing: .05em;
}
.choix-entete h1 { font-size: clamp(30px, 5.5vw, 46px); margin: 0 0 10px; letter-spacing: -.03em; }
.choix-entete p { margin: 0; font-size: 16px; color: var(--texte-doux); }

.choix-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.choix-carte {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px; text-decoration: none; color: var(--texte);
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l);
  box-shadow: var(--e1);
  transition: transform .18s cubic-bezier(.3,.8,.4,1), border-color .18s, box-shadow .18s;
}
.choix-carte::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(140deg, rgba(91,140,255,.1), transparent 46%);
  opacity: 0; transition: opacity .18s;
}
.choix-carte:hover {
  transform: translateY(-3px);
  border-color: rgba(91, 140, 255, .45);
  box-shadow: var(--e3);
}
.choix-carte:hover::after { opacity: 1; }
.choix-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.choix-icone {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px;
  background: linear-gradient(150deg, rgba(91,140,255,.26), rgba(139,107,255,.16));
  color: var(--accent-vif); position: relative;
}
.choix-icone svg { width: 26px; height: 26px; }

.choix-texte { display: flex; flex-direction: column; gap: 5px; position: relative; }
.choix-texte b  { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.choix-texte em { font-style: normal; font-size: 14.5px; color: var(--accent-vif); }
.choix-texte small { font-size: 14px; line-height: 1.55; color: var(--texte-doux); }

.choix-marque {
  position: relative; margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--bord);
  font-size: 12.5px; color: var(--texte-faible);
}

.choix-pied {
  margin: 30px auto 0; max-width: 620px; text-align: center;
  font-size: 13.5px; line-height: 1.65; color: var(--texte-faible);
}

a.choix-carte.inaccessible {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
a.choix-carte.inaccessible .choix-marque { color: var(--ambre); }

/* -------------------------------------------------------- Supervision */

.modale .boite.large { width: min(760px, 100%); }

.sup-onglets { display: flex; gap: 8px; margin: 4px 0 18px; flex-wrap: wrap; }
.sup-onglets button.actif { background: rgba(91,140,255,.14); border-color: rgba(91,140,255,.4); color: var(--accent-vif); }

.sup-vue { max-height: 46vh; overflow-y: auto; }
.sup-vue table td:first-child { padding-right: 14px; }

/* L'accueil des univers : cartes cliquables */
.grille.univers { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
a.poste-carte { text-decoration: none; color: var(--texte); min-height: 150px; }
a.poste-carte .statut { display: block; margin-top: 6px; line-height: 1.55; }

/* ---------------------------------------------------------------- Divers */

#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px); z-index: 80;
  padding: 14px 20px; max-width: 90vw; text-align: center; font-size: 14.5px;
  background: var(--surface-3); border: 1px solid var(--bord-vif); border-radius: var(--r-s); box-shadow: var(--e3);
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

#debloquer-son {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 90;
  max-width: 92vw; background: var(--rouge); border-color: transparent; color: #2E0509;
  font-weight: 650; box-shadow: var(--e3);
}

#audios { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------- Grand écran : 2 colonnes */

@media (min-width: 940px) {
  #ecran-poste main {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
    grid-template-areas:
      'brief   brief'
      'lignes  messages'
      'clavier annuaire'
      'clavier reglages'
      'journal journal';
    align-items: start;
  }
  #brief         { grid-area: brief; }
  #zone-lignes   { grid-area: lignes; }
  #zone-clavier  { grid-area: clavier; }
  #zone-messages { grid-area: messages; }
  #zone-annuaire { grid-area: annuaire; }
  #zone-reglages { grid-area: reglages; }
  #zone-journal  { grid-area: journal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}