/* ═══════════════════════════════════════════════════════════════
   HERMES — Command Center
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --fond:      #03080f;
  --fond2:     #061320;
  --panneau:   rgba(8, 26, 43, .72);
  --bord:      rgba(56, 189, 248, .22);
  --bord-vif:  rgba(56, 189, 248, .55);
  --cyan:      #38bdf8;
  --cyan-clair:#7dd3fc;
  --cyan-sourd:rgba(56, 189, 248, .5);
  --texte:     #dbeafe;
  --muted:     #5c7893;
  --vert:      #34d399;
  --ambre:     #fbbf24;
  --rouge:     #f87171;
  --violet:    #a78bfa;
  --r:         10px;
}

html, body { height: 100%; overflow-x: clip; }

body {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(56,189,248,.07), transparent 60%),
    var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-size: 14px;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* grille de fond discrète */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(56,189,248,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* ─── Typo utilitaire ──────────────────────────────────────── */
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.etiquette {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ─── Structure ────────────────────────────────────────────── */
#app {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 208px 1fr;
  min-height: 100dvh;
}

/* ─── Barre latérale ───────────────────────────────────────── */
#lateral {
  border-right: 1px solid var(--bord);
  background: linear-gradient(180deg, rgba(6,19,32,.85), rgba(3,8,15,.6));
  display: flex; flex-direction: column;
  padding: 16px 12px;
  gap: 18px;
  position: sticky; top: 0;
  height: 100dvh;
  overflow-y: auto;
}

.marque { display: flex; align-items: center; gap: 10px; padding: 0 4px 14px; border-bottom: 1px solid var(--bord); }
.marque-anneau {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--bord-vif);
  display: grid; place-items: center;
  box-shadow: 0 0 14px rgba(56,189,248,.3), inset 0 0 10px rgba(56,189,248,.14);
  position: relative; flex-shrink: 0;
}
.marque-anneau::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 50%; border: 1px solid var(--cyan);
  border-right-color: transparent; border-bottom-color: transparent;
  animation: tourne 3.4s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
.marque-anneau span { font-size: .78rem; font-weight: 700; color: var(--cyan); }

.marque-nom { font-size: .94rem; font-weight: 700; letter-spacing: .22em; color: var(--texte); line-height: 1.1; }
.marque-sous { font-size: .52rem; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }

nav { display: flex; flex-direction: column; gap: 2px; }

nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--muted); text-decoration: none;
  font-size: .82rem; transition: all .15s;
  border: 1px solid transparent;
}
nav a:hover { color: var(--texte); background: rgba(56,189,248,.06); }
nav a.actif {
  color: var(--cyan-clair);
  background: rgba(56,189,248,.1);
  border-color: var(--bord);
  box-shadow: inset 2px 0 0 var(--cyan);
}
nav a svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
nav .pastille {
  margin-left: auto; font-size: .6rem;
  background: rgba(56,189,248,.16); color: var(--cyan-clair);
  padding: 1px 6px; border-radius: 8px;
  font-family: ui-monospace, monospace;
}

/* Bloc voix dans la latérale */
.bloc-voix {
  margin-top: auto;
  border: 1px solid var(--bord); border-radius: var(--r);
  background: var(--panneau);
  padding: 12px; text-align: center;
}
.onde { display: flex; align-items: center; justify-content: center; gap: 2px; height: 26px; margin-bottom: 8px; }
.onde i {
  width: 2px; background: var(--cyan); border-radius: 2px;
  height: 20%; opacity: .5;
  animation: onde 1.1s ease-in-out infinite;
}
.onde.vive i { opacity: 1; box-shadow: 0 0 5px var(--cyan); }
@keyframes onde { 0%,100% { height: 15%; } 50% { height: 90%; } }

.etat-voix { font-size: .68rem; color: var(--muted); margin-bottom: 10px; }
.etat-voix.ecoute { color: var(--cyan); }

.bouton-micro {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--bord-vif);
  background: radial-gradient(circle at 50% 35%, rgba(56,189,248,.28), rgba(8,26,43,.9));
  cursor: pointer; display: grid; place-items: center;
  margin: 0 auto 8px;
  box-shadow: 0 0 18px rgba(56,189,248,.28), inset 0 0 12px rgba(56,189,248,.16);
  transition: all .2s;
}
.bouton-micro:hover { box-shadow: 0 0 26px rgba(56,189,248,.45); }
.bouton-micro svg { width: 22px; height: 22px; fill: var(--cyan-clair); }
.bouton-micro.actif {
  border-color: var(--rouge);
  background: radial-gradient(circle at 50% 35%, rgba(248,113,113,.3), rgba(43,8,8,.9));
  animation: pulse-micro 1.3s infinite;
}
.bouton-micro.actif svg { fill: var(--rouge); }
@keyframes pulse-micro {
  0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,.45); }
  50%     { box-shadow: 0 0 0 12px rgba(248,113,113,0); }
}
.legende-micro { font-size: .62rem; color: var(--muted); }

.bascule-reveil {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--bord);
  font-size: .66rem; color: var(--muted);
}
.interrupteur {
  width: 32px; height: 17px; border-radius: 10px;
  background: rgba(92,120,147,.3); border: 1px solid var(--bord);
  position: relative; cursor: pointer; flex-shrink: 0; transition: all .2s;
}
.interrupteur::after {
  content: ""; position: absolute; top: 1px; left: 1px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--muted); transition: all .2s;
}
.interrupteur.on { background: rgba(56,189,248,.28); border-color: var(--bord-vif); }
.interrupteur.on::after { left: 16px; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }

/* ─── Zone principale ──────────────────────────────────────── */
#principal { padding: 14px 18px 120px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Barre du haut */
#entete {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}

.puce-statut {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--bord); border-radius: 20px;
  padding: 6px 14px; background: var(--panneau);
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  font-family: ui-monospace, monospace;
}
.point { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 9px var(--vert); animation: clignote 2.2s infinite; }
.point.ko { background: var(--rouge); box-shadow: 0 0 9px var(--rouge); }
@keyframes clignote { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

#horloge { text-align: center; flex: 1; min-width: 180px; }
#date-jour { font-size: .66rem; color: var(--muted); letter-spacing: .1em; text-transform: capitalize; }
#heure {
  font-size: 1.6rem; font-weight: 300; letter-spacing: .08em;
  font-family: ui-monospace, "SF Mono", monospace;
  color: var(--cyan-clair); text-shadow: 0 0 18px rgba(56,189,248,.45);
}

/* ─── Panneaux ─────────────────────────────────────────────── */
.panneau {
  border: 1px solid var(--bord); border-radius: var(--r);
  background: var(--panneau);
  backdrop-filter: blur(9px);
  position: relative;
  overflow: hidden;
}
.panneau::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-sourd), transparent);
}
.panneau-tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px; border-bottom: 1px solid var(--bord);
}
.panneau-corps { padding: 12px 13px; }

/* Grille principale */
.grille-haut {
  display: grid;
  grid-template-columns: 224px 1fr 268px;
  gap: 14px;
  align-items: start;
}
.grille-bas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

/* ─── Noyau (centre) ───────────────────────────────────────── */
#noyau {
  min-height: 330px;
  display: grid; place-items: center;
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(56,189,248,.11), transparent 64%),
    var(--panneau);
}
/* méridiens type globe */
#noyau::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(56,189,248,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg,  rgba(56,189,248,.05) 0 1px, transparent 1px 34px);
  mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 58%);
  pointer-events: none;
}

.orbe { position: relative; width: 290px; height: 290px; display: grid; place-items: center; }
.orbe .anneau {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(56,189,248,.2);
}
.orbe .anneau:nth-child(1) {
  animation: spin 22s linear infinite;
  border-top-color: var(--cyan); border-right-color: rgba(56,189,248,.45);
  box-shadow: 0 0 22px rgba(56,189,248,.16), inset 0 0 22px rgba(56,189,248,.1);
}
.orbe .anneau:nth-child(2) {
  inset: 30px; animation: spin 16s linear infinite reverse;
  border-left-color: var(--cyan-clair); border-top-color: rgba(125,211,252,.35);
}
.orbe .anneau:nth-child(3) {
  inset: 60px; animation: spin 30s linear infinite;
  border-bottom-color: rgba(167,139,250,.6); border-left-color: rgba(167,139,250,.28);
}
/* deux ellipses inclinées = orbites */
.orbe .anneau:nth-child(4) {
  inset: 14px; border-color: rgba(56,189,248,.16);
  transform: rotateX(74deg); animation: spin 19s linear infinite;
}
.orbe .anneau:nth-child(5) {
  inset: 14px; border-color: rgba(125,211,252,.14);
  transform: rotateY(74deg); animation: spin 25s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

.orbe-coeur { text-align: center; z-index: 2; }
.orbe-nom {
  font-size: 2rem; font-weight: 700; letter-spacing: .34em;
  color: var(--cyan-clair);
  text-shadow: 0 0 30px rgba(56,189,248,.75), 0 0 60px rgba(56,189,248,.35);
  margin-left: .34em;
}
.orbe-sous { font-size: .58rem; letter-spacing: .3em; color: var(--muted); text-transform: uppercase; margin-top: 5px; }
.orbe-ver { font-size: .56rem; color: var(--cyan-sourd); margin-top: 9px; font-family: ui-monospace, monospace; }

/* halo pulsant */
.orbe::after {
  content: ""; position: absolute; width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.22), transparent 70%);
  animation: respire 3.6s ease-in-out infinite;
}
@keyframes respire { 0%,100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.12); opacity: .95; } }

/* ─── Lignes d'état ────────────────────────────────────────── */
.ligne-etat {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 7px;
  border: 1px solid transparent;
  transition: all .15s;
}
.ligne-etat + .ligne-etat { margin-top: 4px; }
.ligne-etat:hover { background: rgba(56,189,248,.05); border-color: var(--bord); }
.ligne-icone {
  width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center; flex-shrink: 0;
  background: rgba(56,189,248,.1); border: 1px solid var(--bord);
}
.ligne-icone svg { width: 13px; height: 13px; fill: var(--cyan); }
.ligne-txt { min-width: 0; flex: 1; }
.ligne-nom { font-size: .76rem; font-weight: 500; }
.ligne-val { font-size: .64rem; color: var(--muted); }
.ligne-val.ok { color: var(--vert); }
.ligne-val.ko { color: var(--rouge); }

/* ─── Flux ─────────────────────────────────────────────────── */
.flux { display: flex; flex-direction: column; gap: 6px; max-height: 292px; overflow-y: auto; }
.flux-item {
  display: flex; gap: 9px; padding: 8px 9px;
  border-radius: 7px; border: 1px solid var(--bord);
  background: rgba(56,189,248,.035);
  font-size: .72rem; line-height: 1.4;
}
.flux-item .bulle-i {
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  display: grid; place-items: center; font-size: .66rem;
}
.i-info  { background: rgba(56,189,248,.14);  color: var(--cyan); }
.i-warn  { background: rgba(251,191,36,.14);  color: var(--ambre); }
.i-ok    { background: rgba(52,211,153,.14);  color: var(--vert); }
.i-act   { background: rgba(248,113,113,.14); color: var(--rouge); }
.flux-txt { min-width: 0; }
.flux-titre { color: var(--texte); }
.flux-meta { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 1px; }
.flux-vide { font-size: .72rem; color: var(--muted); padding: 14px 4px; text-align: center; }

/* ─── Jauges ───────────────────────────────────────────────── */
.jauges { display: flex; justify-content: space-around; gap: 10px; }
.jauge { text-align: center; }
.jauge svg { width: 62px; height: 62px; transform: rotate(-90deg); }
.jauge circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.jauge .fond { stroke: rgba(56,189,248,.12); }
.jauge .arc { stroke: var(--cyan); transition: stroke-dashoffset .8s ease; filter: drop-shadow(0 0 4px var(--cyan)); }
.jauge .arc.chaud { stroke: var(--ambre); filter: drop-shadow(0 0 4px var(--ambre)); }
.jauge .arc.critique { stroke: var(--rouge); filter: drop-shadow(0 0 4px var(--rouge)); }
.jauge-val { font-size: .86rem; font-weight: 600; margin-top: -42px; margin-bottom: 26px; font-family: ui-monospace, monospace; }
.jauge-nom { font-size: .58rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }

/* ─── Stats ────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.stat { text-align: center; padding: 9px 5px; border: 1px solid var(--bord); border-radius: 7px; background: rgba(56,189,248,.035); }
.stat-val { font-size: 1.2rem; font-weight: 600; color: var(--cyan-clair); font-family: ui-monospace, monospace; }
.stat-nom { font-size: .56rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }

/* ─── Quota ────────────────────────────────────────────────── */
.barre-quota {
  height: 9px; border-radius: 5px; overflow: hidden;
  background: rgba(56,189,248,.12); border: 1px solid var(--bord);
  margin: 4px 0 9px;
}
.barre-quota i {
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-clair));
  box-shadow: 0 0 9px var(--cyan);
  transition: width .8s ease;
}
.barre-quota.alerte i  { background: linear-gradient(90deg,#d97706,var(--ambre)); box-shadow: 0 0 9px var(--ambre); }
.barre-quota.critique i{ background: linear-gradient(90deg,#dc2626,var(--rouge)); box-shadow: 0 0 9px var(--rouge); }

.quota-tete { display: flex; align-items: baseline; justify-content: space-between; }
.quota-pct { font-size: 1.3rem; font-weight: 600; font-family: ui-monospace, monospace; color: var(--cyan-clair); }
.quota-pct.alerte  { color: var(--ambre); }
.quota-pct.critique{ color: var(--rouge); }
.quota-sous { font-size: .62rem; color: var(--muted); }

.compte-ligne {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; border-radius: 6px; font-size: .72rem;
  border: 1px solid var(--bord); background: rgba(56,189,248,.035);
  margin-top: 5px; cursor: pointer; transition: all .15s;
}
.compte-ligne:hover { background: rgba(56,189,248,.1); }
.compte-ligne.actif { border-color: var(--bord-vif); background: rgba(56,189,248,.12); }
.compte-ligne .pt { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.compte-ligne .pt.on  { background: var(--vert); box-shadow: 0 0 6px var(--vert); }
.compte-ligne .pt.off { background: var(--muted); }
.compte-ligne .pt.ko  { background: var(--rouge); box-shadow: 0 0 6px var(--rouge); }
.compte-ligne .nm { flex: 1; font-family: ui-monospace, monospace; }
.compte-ligne .cs { color: var(--muted); font-size: .64rem; }

.ajout-compte {
  display: flex; gap: 6px; margin-top: 9px;
  padding-top: 9px; border-top: 1px solid var(--bord);
}
.ajout-compte input {
  flex: 1; background: var(--fond); border: 1px solid var(--bord);
  border-radius: 6px; color: var(--texte); font-size: .72rem;
  padding: 6px 9px; outline: none; min-width: 0;
}
.ajout-compte input:focus { border-color: var(--bord-vif); }
.ajout-compte button {
  padding: 6px 11px; border: 1px solid var(--bord-vif); border-radius: 6px;
  background: rgba(56,189,248,.12); color: var(--cyan-clair);
  font-size: .72rem; cursor: pointer; flex-shrink: 0;
}
.ajout-compte button:hover { background: rgba(56,189,248,.22); }

/* ─── Outils ───────────────────────────────────────────────── */
.outils { display: flex; flex-direction: column; gap: 5px; max-height: 210px; overflow-y: auto; }
.outil {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 7px;
  border: 1px solid var(--bord); background: rgba(56,189,248,.035);
  font-size: .74rem;
}
.badge {
  font-size: .54rem; padding: 2px 6px; border-radius: 4px;
  letter-spacing: .08em; text-transform: uppercase; flex-shrink: 0;
  font-family: ui-monospace, monospace;
}
.badge.lecture { background: rgba(52,211,153,.14); color: var(--vert); }
.badge.action  { background: rgba(251,191,36,.14); color: var(--ambre); }
.outil-nom { font-family: ui-monospace, monospace; color: var(--texte); }

/* ─── Chat ─────────────────────────────────────────────────── */
#zone-chat {
  display: flex; flex-direction: column;
  min-height: 190px; max-height: 52vh;
}
#messages {
  flex: 1; overflow-y: auto; padding: 12px 13px;
  min-height: 140px;
  display: flex; flex-direction: column; gap: 9px;
  overscroll-behavior: contain;
}
.bulle {
  max-width: 82%; padding: 9px 13px; border-radius: 11px;
  line-height: 1.55; white-space: pre-wrap; word-break: break-word;
  font-size: .82rem;
  animation: apparait .25s ease;
}
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } }

.bulle.moi {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(56,189,248,.2), rgba(56,189,248,.1));
  border: 1px solid var(--bord-vif);
  border-bottom-right-radius: 3px;
}
.bulle.hermes {
  align-self: flex-start;
  background: rgba(8,26,43,.86);
  border: 1px solid var(--bord);
  border-bottom-left-radius: 3px;
}
.bulle.systeme {
  align-self: center; font-size: .68rem; color: var(--muted);
  background: none; border: none; padding: 3px 0; max-width: 100%;
  text-align: center;
}
.bulle.typing span {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); margin: 0 2px; animation: blink 1.2s infinite;
}
.bulle.typing span:nth-child(2) { animation-delay: .2s; }
.bulle.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: .2; } 40% { opacity: 1; } }

/* ─── Barre de saisie fixe ─────────────────────────────────── */
#barre-parle {
  position: fixed; bottom: 0; left: 208px; right: 0;
  padding: 10px 18px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(3,8,15,.93) 32%);
  backdrop-filter: blur(9px);
  z-index: 40;
}
.parle-cadre {
  display: flex; align-items: flex-end; gap: 9px;
  border: 1px solid var(--bord-vif); border-radius: 26px;
  background: rgba(8,26,43,.92);
  padding: 6px 6px 6px 16px;
  box-shadow: 0 0 26px rgba(56,189,248,.16);
  max-width: 900px; margin: 0 auto;
  transition: box-shadow .25s, border-color .25s;
}
.parle-cadre.ecoute {
  border-color: var(--cyan);
  box-shadow: 0 0 34px rgba(56,189,248,.42);
}
#champ {
  flex: 1; background: none; border: none; outline: none;
  color: var(--texte); font-size: .88rem; font-family: inherit;
  resize: none; max-height: 110px; line-height: 1.45; padding: 8px 0;
}
#champ::placeholder { color: var(--muted); }

.bouton-rond {
  width: 38px; height: 38px; border-radius: 50%;
  border: none; cursor: pointer; flex-shrink: 0;
  display: grid; place-items: center;
  transition: all .18s;
}
.bouton-rond svg { width: 17px; height: 17px; }
#btn-envoyer { background: var(--cyan); box-shadow: 0 0 14px rgba(56,189,248,.45); }
#btn-envoyer svg { fill: #03080f; }
#btn-envoyer:disabled { opacity: .35; box-shadow: none; }
#btn-micro-bas { background: rgba(56,189,248,.12); border: 1px solid var(--bord); }
#btn-micro-bas svg { fill: var(--cyan-clair); }
#btn-micro-bas.actif { background: rgba(248,113,113,.2); border-color: var(--rouge); animation: pulse-micro 1.3s infinite; }
#btn-micro-bas.actif svg { fill: var(--rouge); }

/* ─── Bandeau actions ──────────────────────────────────────── */
#bandeau-actions {
  display: none; cursor: pointer;
  padding: 9px 13px; border-radius: var(--r);
  border: 1px solid rgba(251,191,36,.42);
  background: rgba(251,191,36,.08);
  color: var(--ambre); font-size: .76rem;
  align-items: center; gap: 9px;
}
#bandeau-actions.visible { display: flex; }
#bandeau-actions:hover { background: rgba(251,191,36,.14); }

/* ─── Modal ────────────────────────────────────────────────── */
#modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(3,8,15,.84); backdrop-filter: blur(5px);
  align-items: center; justify-content: center; padding: 16px;
}
#modal-overlay.ouvert { display: flex; }
#modal {
  background: var(--fond2); border: 1px solid var(--bord-vif);
  border-radius: 14px; padding: 18px;
  width: 100%; max-width: 480px; max-height: 76dvh; overflow-y: auto;
  box-shadow: 0 0 44px rgba(56,189,248,.22);
}
#modal h2 { font-size: .82rem; margin-bottom: 14px; }
.carte-action {
  border: 1px solid var(--bord); border-radius: 9px;
  padding: 12px; margin-bottom: 10px; background: rgba(56,189,248,.035);
}
.carte-action .nom { font-weight: 600; color: var(--cyan-clair); margin-bottom: 4px; font-family: ui-monospace, monospace; font-size: .8rem; }
.carte-action .args { font-size: .7rem; color: var(--muted); margin-bottom: 8px; font-family: ui-monospace, monospace; word-break: break-all; }
.btns-action { display: flex; gap: 8px; }
.btn-valider, .btn-refuser {
  flex: 1; padding: 8px; border: 1px solid; border-radius: 7px;
  font-size: .76rem; cursor: pointer; font-weight: 600; background: none;
}
.btn-valider { border-color: rgba(52,211,153,.45); color: var(--vert); background: rgba(52,211,153,.08); }
.btn-refuser { border-color: rgba(248,113,113,.45); color: var(--rouge); background: rgba(248,113,113,.08); }
.btn-valider:hover { background: rgba(52,211,153,.18); }
.btn-refuser:hover { background: rgba(248,113,113,.18); }
#fermer-modal {
  width: 100%; padding: 9px; margin-top: 4px;
  background: rgba(56,189,248,.08); border: 1px solid var(--bord);
  border-radius: 8px; color: var(--texte); font-size: .78rem; cursor: pointer;
}

/* ─── Scrollbars ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(56,189,248,.24); border-radius: 3px; }

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grille-haut { grid-template-columns: 1fr; }
  #noyau { min-height: 210px; order: -1; }
}

@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; }
  #lateral {
    position: fixed; left: 0; top: 0; bottom: 0; width: 208px;
    z-index: 80; transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 34px rgba(0,0,0,.6);
  }
  #lateral.ouvert { transform: translateX(0); }
  #barre-parle { left: 0; }
  #principal { padding: 12px 13px 118px; }
  #burger { display: grid !important; }
  #voile-lateral.visible { display: block; }
}

#burger {
  display: none; place-items: center;
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--bord); background: var(--panneau);
  cursor: pointer; flex-shrink: 0;
}
#burger svg { width: 17px; height: 17px; fill: var(--cyan); }

#voile-lateral {
  display: none; position: fixed; inset: 0; z-index: 70;
  background: rgba(3,8,15,.7); backdrop-filter: blur(3px);
}

@media (max-width: 520px) {
  #heure { font-size: 1.3rem; }
  .jauge svg { width: 54px; height: 54px; }
  .jauge-val { margin-top: -37px; margin-bottom: 22px; }
}


/* ── Commandes rapides ─────────────────────────────────────── */
#commandes-rapides {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 8px 0 4px;
  scrollbar-width: none;
}
#commandes-rapides::-webkit-scrollbar { display: none; }
.cmd-btn {
  padding: 5px 12px; border-radius: 20px; font-size: .73rem;
  border: 1px solid var(--bord); background: var(--panneau);
  color: var(--cyan-clair); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.cmd-btn:hover { background: rgba(56,189,248,.12); border-color: var(--bord-vif); }

/* ── Bloc conversations ────────────────────────────────────── */
.bloc-convs { padding: 10px 0 0; margin-top: auto; border-top: 1px solid var(--bord); }
.bloc-convs-tete {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
  padding: 0 4px 6px;
}
.bloc-convs-tete button {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--bord); background: transparent;
  color: var(--cyan); font-size: .9rem; cursor: pointer;
  display: grid; place-items: center; line-height: 1;
}
.conv-item {
  padding: 5px 8px; border-radius: 6px; font-size: .75rem;
  color: var(--muted); cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; transition: background .15s;
}
.conv-item:hover { background: var(--panneau); color: var(--cyan-clair); }
.conv-item.active {
  background: rgba(56,189,248,.1); color: var(--cyan);
  border-left: 2px solid var(--cyan);
}

/* ── Vue historique ────────────────────────────────────────── */
#hist-barre { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
#hist-q { flex: 1 1 100%; min-width: 0; }
#hist-date { flex: 1 1 auto; min-width: 0; }
#hist-btn { flex: 0 0 auto; }

#zone-historique input, #zone-historique button {
  background: var(--panneau); border: 1px solid var(--bord);
  color: var(--texte); border-radius: 6px; padding: 5px 10px; font-size: .8rem;
}
#zone-historique button { cursor: pointer; color: var(--cyan); }
#zone-historique button:hover { border-color: var(--bord-vif); }
.hist-msg {
  padding: 6px 8px; border-radius: 6px; margin: 4px 0;
  background: rgba(56,189,248,.04); border: 1px solid var(--bord);
}
.hist-msg .hist-meta { font-size: .65rem; color: var(--muted); margin-bottom: 3px; }
.hist-msg .hist-txt { font-size: .78rem; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE — sur un téléphone on vient parler à Hermes.
   La conversation passe donc devant le tableau de bord, qui
   descend en dessous. Mesuré : sans ça le chat tombait à 190px
   sur un écran de 667px, coincé sous quatre panneaux.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* Ordre : commandes → chat → orbe → flux → noyau → système */
  #principal { gap: 11px; }
  #commandes-rapides { order: 1; }
  #zone-chat        { order: 2; }
  .grille-haut      { order: 3; }
  #zone-historique  { order: 2; }
  .grille-bas       { order: 4; }

  /* Le chat prend la place utile, sans écraser la saisie */
  #zone-chat {
    max-height: none;
    min-height: min(52vh, 420px);
  }
  #messages { min-height: min(46vh, 380px); }
  .bulle { max-width: 88%; font-size: .86rem; }

  /* Commandes rapides : une seule rangée qui défile,
     au lieu de deux lignes qui mangent 71px de hauteur */
  #commandes-rapides {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }
  .cmd-btn { flex: 0 0 auto; scroll-snap-align: start; padding: 9px 14px; font-size: .78rem; }

  /* En-tête compact : la date longue et l'uptime passent à la trappe,
     l'heure et l'état suffisent sur un téléphone */
  /* nowrap garde l'en-tête sur une ligne, mais il FAUT que la puce d'état
     puisse rétrécir : sinon elle garde sa largeur de contenu et pousse
     l'horloge hors de l'écran (mesuré : 437px de droite pour 375 dispo). */
  #entete { gap: 10px; flex-wrap: nowrap; }
  .puce-statut { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  #horloge { margin-left: auto; text-align: right; flex: 0 0 auto; }
  #date-jour { font-size: .75rem; }
  #heure { font-size: 1.05rem; }
  #puce-uptime { display: none; }
  #txt-statut { font-size: .75rem; }
  .puce-statut { padding: 6px 11px; }

  /* L'orbe est décoratif : il rétrécit pour ne pas repousser les panneaux
     utiles (290px fixes, c'est un tiers d'écran de téléphone) */
  #noyau { min-height: 0; padding: 4px 0; }
  .orbe { width: 190px; height: 190px; }
  .orbe-nom { font-size: 1.15rem; }

  /* La puce d'état passait sur deux lignes et déformait l'en-tête */
  .puce-statut { white-space: nowrap; }
  #txt-statut { overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }

  /* Cibles tactiles — Apple demande 44×44 pt */
  #lateral nav a { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .conv-item { min-height: 40px; display: flex; align-items: center; }
  .bloc-convs-tete button { width: 36px; height: 36px; font-size: 1.15rem; }
  .cmd-btn { min-height: 44px; }
  /* La rangée entière bascule l'interrupteur (le curseur seul fait 32×17,
     intouchable au pouce). Le gestionnaire JS est posé sur la rangée. */
  .bascule-reveil { min-height: 44px; cursor: pointer; }
  #zone-historique input, #zone-historique button { padding: 11px 13px; min-height: 44px; }

  /* Lisibilité : plancher à 12px (.75rem) sur un écran tenu à bout de bras.
     Les sélecteurs sont alignés sur ceux qui gagnent en spécificité
     (nav .pastille, .bulle.systeme…), sinon la règle ne passe pas. */
  .marque-sous          { font-size: .75rem; letter-spacing: .12em; }
  nav .pastille         { font-size: .75rem; padding: 1px 7px; }
  .etat-voix            { font-size: .78rem; }
  .legende-micro        { font-size: .75rem; }
  .etiquette            { font-size: .75rem; letter-spacing: .1em; }
  .puce-statut          { font-size: .75rem; }
  .bascule-reveil       { font-size: .75rem; }
  .bloc-convs-tete      { font-size: .75rem; }
  .orbe-sous            { font-size: .75rem; }
  .orbe-ver             { font-size: .75rem; }
  .conv-item            { font-size: .8rem; }
  /* contenu de conversation, pas de la décoration : il doit rester lisible */
  .bulle.systeme        { font-size: .8rem; }

  /* iOS zoome le champ si la police est < 16px au focus */
  #champ, #zone-historique input { font-size: 16px; }
}

/* Encoche et barre d'accueil iOS (viewport-fit=cover) */
@supports (padding: max(0px)) {
  #principal { padding-top: max(14px, env(safe-area-inset-top)); }
  #lateral   { padding-top: max(16px, env(safe-area-inset-top)); }
  #barre-parle {
    padding-left:  max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
}

/* Écrans courts (iPhone SE, paysage) : on rend la main au contenu */
@media (max-width: 860px) and (max-height: 700px) {
  #noyau { min-height: 140px; }
  #zone-chat { min-height: min(44vh, 300px); }
  #messages { min-height: min(38vh, 260px); }
}

/* Appareil tactile : pas d'effets de survol qui restent collés */
@media (hover: none) {
  .cmd-btn:hover, .conv-item:hover { background: var(--panneau); }
  .cmd-btn:active { background: rgba(56,189,248,.2); }
  .conv-item:active { background: rgba(56,189,248,.14); }
}