/* Bascule entre la page principale et la page Dashboard (2026-07-06) --
   voir index.html et dashboard/dashboard.js. Une seule page visible à la
   fois ; le contenu caché (canvas Three.js compris) continue d'exister
   dans le DOM, juste masqué -- pas de recréation ni de perte d'état au
   retour. */
.page {
  display: none;
}

.page--active {
  display: block;
}

#page-dashboard.page--active {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* REFONTE CHAT (2026-07-16, spec Lionel) : plus de fenêtre latérale. Le chat
   devient une BARRE DE SAISIE dockée en bas au centre, ouverte par le symbole
   doré (#chat-toggle, bas-gauche) ou par un clic sur la sphère. Les réponses
   d'Alpha s'affichent en PAROLES LIVE au-dessus (#live-words) et s'effacent
   lentement ; l'historique complet reste en page Agents. Les IDs internes
   (chat-messages, chat-status...) sont CONSERVÉS : le pipeline chat.js est
   inchangé -- seuls l'apparence et l'emplacement changent (header et fil de
   messages masqués). Verre sombre + liseré OR de la marque, sobre et pro. */
.chat-panel {
  position: fixed;
  left: 50%;
  bottom: 16px;
  width: min(560px, 72vw);
  z-index: 3;
  display: flex;
  flex-direction: column;
  background: rgba(12, 16, 32, 0.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(225, 185, 110, 0.32);
  border-radius: 14px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(225, 185, 110, 0.08);
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.chat-panel--open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

/* Header et fil de messages : masqués (l'historique vit en page Agents ; les
   éléments restent dans le DOM pour le pipeline chat.js -- jamais retirés). */
.chat-panel__header {
  display: none;
}

.chat-panel__header button {
  background: none;
  border: none;
  color: #eee;
  cursor: pointer;
  font-size: 16px;
}

.chat-panel__messages {
  display: none;
}

.chat-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  line-height: 1.35;
  font-size: 14px;
  white-space: pre-wrap;
}

.chat-bubble--user {
  align-self: flex-end;
  background: rgba(79, 127, 255, 0.85);
}

.chat-bubble--amber {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.12);
}

/* Statut ("Alpha réfléchit...", modèle) : fine ligne discrète AU-DESSUS du
   champ, centrée -- informative sans encombrer. */
.chat-panel__status {
  order: -1;
  padding: 8px 18px 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: center;
  color: rgba(214, 224, 245, 0.55);
}

.chat-panel__input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  /* La derniere valeur ajoute la barre du bas de l'iPhone quand il y en
     a une -- sinon le bouton Envoyer se retrouve dessous. */
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}

.chat-panel__input-bar input {
  flex: 1;
  border-radius: 999px; /* pilule -- une seule ligne pour taper, épurée */
  border: 1px solid rgba(225, 185, 110, 0.28);
  background: rgba(0, 0, 0, 0.3);
  color: #eef2ff;
  padding: 10px 16px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-panel__input-bar input:focus {
  border-color: rgba(225, 185, 110, 0.6);
  box-shadow: 0 0 10px rgba(225, 185, 110, 0.18);
}

.chat-panel__input-bar button {
  border-radius: 999px;
  border: 1px solid rgba(225, 185, 110, 0.45);
  background: rgba(225, 185, 110, 0.16);
  color: rgba(240, 220, 175, 0.95);
  padding: 9px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.chat-panel__input-bar button:hover {
  background: rgba(225, 185, 110, 0.3);
  box-shadow: 0 0 12px rgba(225, 185, 110, 0.25);
}

#chat-mic {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.45);
  opacity: 0.55;
  cursor: not-allowed;
}

/* Micro ACTIVÉ (web/téléphone, 2026-07-19) : quand chat.js l'autorise (il
   enlève l'attribut disabled), il devient doré et cliquable. */
#chat-mic:not([disabled]) {
  color: rgba(240, 210, 150, 0.9);
  opacity: 1;
  cursor: pointer;
}
/* En écoute : rouge doux + halo, pour bien voir qu'Alpha capte la voix. */
#chat-mic.chat-mic--ecoute {
  color: #ff7a7a !important;
  border-color: rgba(255, 122, 122, 0.6) !important;
  box-shadow: 0 0 12px rgba(255, 122, 122, 0.45);
}
/* MAINS LIBRES actif (2026-07-19) : halo vert permanent -> Alpha est en mode
   conversation continue (distinct du rouge, qui = il capte ta voix à l'instant). */
#chat-mic.chat-mic--mainlibre {
  color: #7effa8 !important;
  border-color: rgba(126, 255, 168, 0.55) !important;
  box-shadow: 0 0 12px rgba(126, 255, 168, 0.4);
}

/* EN VEILLE (14/09) : le micro est ouvert mais n'envoie rien tant que le mot
   de réveil (« Alpha ») n'a pas été dit. Vert éteint, pour le voir d'un coup
   d'oeil : allumé = il t'écoute, éteint = il attend son prénom. */
#chat-mic.chat-mic--mainlibre.chat-mic--veille {
  color: rgba(126, 255, 168, 0.45) !important;
  border-color: rgba(126, 255, 168, 0.25) !important;
  box-shadow: none;
}

/* Symbole DORÉ (bas-gauche, à côté du lecteur de fichiers) : ouvre/ferme la
   barre. Même gabarit que #doc-drop-zone pour un duo cohérent ; or de la
   marque, halo doux au survol, état "actif" quand la barre est ouverte. */
#chat-toggle {
  position: fixed;
  right: 64px;
  bottom: 18px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(240, 210, 150, 0.8);
  background: rgba(35, 28, 14, 0.4);
  border: 1px solid rgba(225, 185, 110, 0.4);
  cursor: pointer;
  z-index: 4;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#chat-toggle:hover {
  color: rgba(255, 232, 180, 1);
  background: rgba(70, 55, 25, 0.5);
  border-color: rgba(240, 205, 140, 0.75);
  box-shadow: 0 0 14px rgba(225, 185, 110, 0.35);
}

/* PAROLES D'ALPHA EN LIVE (#19) : tout en bas au centre, AU-DESSUS de la barre
   (jamais sous la sphère : ses vibrations couvriraient le texte). Lisibilité
   d'abord : texte clair + ombre portée, pas de fond. Apparition rapide (0.5s),
   effacement LENT (fondu 3.2s après le temps de lecture -- voir chat.js). */
#live-words {
  position: fixed;
  left: 50%;
  bottom: 78px;
  transform: translateX(-50%);
  max-width: min(760px, 78vw);
  text-align: center;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(232, 240, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.6);
  white-space: pre-wrap;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#live-words.live-words--visible {
  opacity: 1;
}

#live-words.live-words--fading {
  opacity: 0;
  transition: opacity 3.2s ease;
}

/* Barre ouverte -> les paroles montent au-dessus d'elle (jamais derrière). */
#live-words {
  transition: opacity 0.5s ease, bottom 0.28s ease;
}
body.chat-open #live-words {
  bottom: 128px;
}

/* LA BARRE DES TÂCHES DE WINDOWS (Lionel, 14/09) : sur le laptop l'appli est
   en plein écran et la barre de Windows cache le dernier centimètre. Sur le
   web (laptop), on remonte donc la barre de chat, le bouton ✎ et les paroles
   de 52px. Le téléphone garde ses propres réglages (media query plus bas). */
@media (min-width: 641px) {
  body.web .chat-panel { bottom: 68px; }
  body.web #chat-toggle { bottom: 70px; }
  body.web #live-words { bottom: 130px; }
  body.web.chat-open #live-words { bottom: 180px; }
  /* Une longue réponse (un mail lu par Émilie) : un encart sombre qui
     défile, aligné à gauche, au lieu d'un mur de texte centré. */
  #live-words.live-words--long {
    text-align: left;
    max-width: min(820px, 80vw);
    max-height: 42vh;
    overflow-y: auto;
    pointer-events: auto;
    background: rgba(4, 6, 16, 0.88);
    border: 1px solid rgba(225, 185, 110, 0.22);
    border-radius: 14px;
    padding: 12px 16px;
    text-shadow: none;
    font-size: 14.5px;
  }
  /* Barre ouverte sur un bureau : les cartes du bas ne passent pas dessous. */
  body.chat-open .bureau__corps { padding-bottom: 100px; }
  body.web.chat-open .bureau__corps { padding-bottom: 150px; }
}

/* Titre "Alpha", haut au centre, petit (2026-07-10 -- demande explicite de
   Lionel : "écrire Alpha en haut au milieu, pas grand, comme dashboard mais
   plus petit"). Même famille de style que le label doré #dashboard-label
   (voir dashboard/dashboard.css) pour rester cohérent avec la marque déjà
   validée, mais plus petit et non cliquable -- ce n'est qu'un repère
   discret, pas un bouton de navigation. */
/* Titre de la page 1 en PLAQUE centrée (2026-07-15, demande de Lionel : "chaque
   page a son titre en plaque au milieu, un peu plus gros" -- Alpha ici, Agents
   et Dashboard via .dashboard-plaque). Même look que les autres plaques pour la
   cohérence. Non cliquable : c'est un repère, pas un bouton (la navigation, ce
   sont les onglets à gauche). */
#alpha-title {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-block;
  padding: 10px 30px;
  background: rgba(10, 10, 14, 0.92);
  border: 1px solid rgba(225, 185, 110, 0.35);
  border-radius: 8px;
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: rgba(225, 185, 110, 0.92);
  text-shadow: 0 0 10px rgba(225, 185, 110, 0.3);
  user-select: none;
  pointer-events: none;
}

/* Navigation globale entre pages -- onglets discrets en haut à gauche
   (2026-07-10, spec interface à 4 pages, voir memory projet
   alpha_interface_4_pages_spec + shared/page-nav.js pour le branchement des
   clics). Toujours visible : ce div est un frère des conteneurs .page, pas
   un enfant, donc jamais masqué par la bascule .page/.page--active. Même
   famille visuelle que #alpha-title/#dashboard-label (Georgia italic, or
   discret) -- sobre par nature, ce n'est qu'un repère de navigation, pas un
   élément de marque. */
/* Fenêtre sans cadre (2026-07-12) : bande de déplacement invisible en haut
   + croix de fermeture MAISON en haut à gauche. La croix passe au rouge au
   survol ; discrète (or de la marque) au repos. */
#app-drag-strip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  -webkit-app-region: drag;
  z-index: 8;
}
#app-close-btn {
  position: fixed;
  top: 7px;
  right: 12px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(225, 185, 110, 0.12);
  color: rgba(225, 185, 110, 0.7);
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  -webkit-app-region: no-drag;
  transition: background 0.2s ease, color 0.2s ease;
}
#app-close-btn:hover {
  background: rgba(220, 70, 70, 0.9);
  color: #fff;
}

/* Bouton RECHARGER (2026-07-25) : minuscule et discret, juste à GAUCHE de la
   croix de fermeture, teinte violette de la marque (Ctrl+R ne recharge pas la
   fenêtre sans cadre). no-drag OBLIGATOIRE (sinon la bande de déplacement avale
   le clic, comme pour la croix). */
#app-reload-btn {
  position: fixed;
  top: 7px;
  right: 42px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(225, 185, 110, 0.14);
  color: rgba(240, 205, 130, 0.75);
  font-size: 13px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  -webkit-app-region: no-drag;
  transition: background 0.2s ease, color 0.2s ease, transform 0.4s ease;
}
#app-reload-btn:hover {
  background: rgba(225, 185, 110, 0.34);
  color: #ffe6a8;
  transform: rotate(180deg);
}

/* Barre de navigation -- onglets discrets en haut à GAUCHE (2026-07-15 : Lionel
   les veut à gauche comme à l'origine ; le TITRE de chaque page, lui, est une
   plaque centrée, voir #alpha-title / .page-plaque). Empilés verticalement.
   CORRECTIF CLÉ (bug "impossible de cliquer sur Alpha") : la fenêtre sans cadre
   a une bande de déplacement invisible en haut (#app-drag-strip, -webkit-app-
   region: drag, 30px). Sans le no-drag ci-dessous, Electron traitait les clics
   sur les onglets pris dans cette bande comme un DÉPLACEMENT de fenêtre (Alpha,
   le plus haut, en tête) -> le clic ne "revenait" jamais. no-drag = vrais clics
   (le z-index n'y suffisait pas : app-region drag passe avant). */
#page-nav {
  position: fixed;
  top: 16px;
  left: 18px;
  z-index: 100;
  pointer-events: auto;
  -webkit-app-region: no-drag;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-nav__item {
  background: none;
  border: none;
  margin: 0;
  padding: 2px 4px;
  text-align: left;
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(225, 185, 110, 0.4);
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.page-nav__item:hover {
  color: rgba(225, 185, 110, 0.7);
}

.page-nav__item--active {
  color: rgba(225, 185, 110, 0.9);
  text-shadow: 0 0 6px rgba(225, 185, 110, 0.3);
}

/* Étape 5 : lecteur de documents/photos -- icône discrète en bas à
   gauche, s'allume quand un fichier est glissé sur la fenêtre (voir
   documents/documents.js). Le drop est capté sur toute la fenêtre, pas
   seulement cette icône (demande explicite de Lionel : comportement
   naturel, pas une petite cible à viser) -- pointer-events désactivés ici
   pour ne jamais intercepter le drop elle-même. */
#doc-drop-zone {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  /* En OR, harmonise avec le symbole chat (2026-07-17, demande Lionel). */
  color: rgba(240, 210, 150, 0.8);
  background: rgba(35, 28, 14, 0.4);
  border: 1px solid rgba(225, 185, 110, 0.4);
  z-index: 4;
  pointer-events: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* MONDE (2026-07-17) : globe 3D en bas-gauche de la Page 1. Canvas dédié,
   au-dessus du champ d'étoiles mais sous les contrôles ; ne capte pas les
   clics en T3a (l'ouverture de la liste viendra en T3d). */
#monde-globe {
  position: fixed;
  left: 22px;
  bottom: 22px;
  width: 280px;
  height: 280px;
  z-index: 3;
  pointer-events: auto;   /* T3d : cliquable pour ouvrir la liste d'actus */
  cursor: pointer;
}
@media (max-width: 640px) {
  #monde-globe { left: 12px; bottom: 74px; width: 180px; height: 180px; }
}

/* MONDE (T3d) : panneau liste d'actus, colonne au-dessus du globe (bas-gauche).
   Caché par défaut (fondu + léger glissement), visible avec .open. */
#monde-panel {
  position: fixed;
  left: 22px;
  bottom: 318px;
  width: 340px;
  max-width: 42vw;
  max-height: 56vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(10, 22, 44, 0.92), rgba(8, 16, 33, 0.9));
  border: 1px solid rgba(90, 170, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(30, 110, 210, 0.25);
  z-index: 6;
  opacity: 0;
  transform: translateX(-16px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  overflow: hidden;
}
#monde-panel.open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
#monde-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(90, 170, 255, 0.25);
}
#monde-panel-title {
  color: rgba(190, 225, 255, 0.95);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#monde-panel-close {
  background: transparent;
  border: none;
  color: rgba(160, 200, 255, 0.7);
  cursor: pointer;
  font-size: 15px;
}
#monde-panel-close:hover { color: rgba(220, 240, 255, 1); }
#monde-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(90, 170, 255, 0.18);
}
#monde-filtres-pays {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px 8px;
  border-bottom: 1px solid rgba(90, 170, 255, 0.18);
}
/* Chips pays : même style que les catégories, teinte légèrement dorée pour les
   distinguer (repères géographiques). */
.monde-filtre--pays {
  border-color: rgba(225, 185, 110, 0.4);
  color: rgba(235, 215, 165, 0.9);
}
.monde-filtre--pays.actif {
  background: rgba(200, 155, 70, 0.5);
  color: #fff;
}
/* Étiquette devant chaque rangée de filtres (« Type », « Pays ») pour bien
   montrer que ce sont DEUX filtres indépendants. */
.monde-filtre-label {
  align-self: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(150, 180, 220, 0.6);
  margin-right: 2px;
}
.monde-filtre {
  background: rgba(30, 60, 110, 0.4);
  border: 1px solid rgba(90, 170, 255, 0.3);
  color: rgba(180, 215, 255, 0.85);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.monde-filtre.actif {
  background: rgba(70, 140, 235, 0.55);
  color: #fff;
}
#monde-liste {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  flex: 1 1 auto;           /* prend la hauteur restante du panneau */
  min-height: 0;            /* indispensable pour que le défilement s'active */
  scrollbar-width: thin;    /* Firefox */
  scrollbar-color: rgba(90, 170, 255, 0.55) rgba(20, 40, 70, 0.25);
}
/* Ascenseur bleu néon, assorti au panneau (Chromium/Electron). */
#monde-liste::-webkit-scrollbar { width: 9px; }
#monde-liste::-webkit-scrollbar-track {
  background: rgba(20, 40, 70, 0.25);
  border-radius: 8px;
}
#monde-liste::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(120, 190, 255, 0.6), rgba(70, 140, 235, 0.6));
  border-radius: 8px;
  border: 1px solid rgba(90, 170, 255, 0.35);
}
#monde-liste::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(150, 210, 255, 0.85), rgba(90, 160, 250, 0.85));
}
.monde-item {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.monde-item__titre {
  color: rgba(225, 238, 255, 0.95);
  font-size: 13px;
  line-height: 1.3;
}
.monde-item__meta {
  margin-top: 3px;
  font-size: 11px;
  color: rgba(150, 180, 220, 0.75);
}
.monde-pastille {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.monde-item.cliquable { cursor: pointer; }
.monde-item.cliquable:hover { background: rgba(120, 170, 240, 0.06); }
.monde-item__detail {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(120, 170, 240, 0.16);
}
.monde-item__desc {
  margin: 0 0 7px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(205, 224, 245, 0.9);
}
.monde-item__lien {
  background: rgba(40, 120, 220, 0.18);
  border: 1px solid rgba(120, 170, 240, 0.4);
  color: rgba(234, 242, 255, 0.95);
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
}
.monde-item__lien:hover { background: rgba(60, 150, 255, 0.3); }
.monde-item__img {
  display: block;
  width: 100%;
  max-height: 130px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid rgba(90, 170, 255, 0.25);
}
@media (max-width: 640px) {
  #monde-panel { left: 12px; bottom: 262px; width: 76vw; max-width: 76vw; }
}

#doc-drop-zone.doc-drop-zone--active {
  color: rgba(230, 205, 255, 0.95);
  background: rgba(110, 65, 195, 0.4);
  border-color: rgba(190, 150, 255, 0.75);
  box-shadow: 0 0 18px rgba(150, 100, 255, 0.5);
}

.chat-bubble--user-file {
  align-self: flex-end;
  background: rgba(79, 127, 255, 0.5);
  border: 1px dashed rgba(200, 220, 255, 0.5);
  font-style: italic;
}

/* LE TABLEAU D'ALPHA, tranche T1 (2026-07-11 nuit -- voir index.html
   #board-panel et board/board.js). Même famille visuelle que le panneau de
   chat (verre sombre flouté, bord discret) mais à GAUCHE et plus large :
   c'est un tableau d'exposition, pas une colonne de conversation. Ne prend
   volontairement PAS toute l'interface (spec de Lionel) -- la boule reste
   visible à droite, décalée pendant que le tableau est ouvert. Caché par
   translation hors écran (comme .chat-panel), transition un peu plus
   lente : l'ouverture du tableau et le déplacement de la boule doivent se
   répondre (~0.6s des deux côtés, voir constellation.js BOARD_SHIFT_*). */
/* LE TABLEAU D'ALPHA -- refonte "fenêtre Système / Solo Leveling" (2026-07-15).
   TL1 : fenêtre CENTRÉE (au lieu du panneau plein-écran qui sortait de la
   gauche). Taille adaptative (TL2), éclosion depuis un point (TL3), style
   Système anguleux bleu/cyan (TL4) et décalage d'Alpha (TL5) suivent, une
   tranche testée à la fois. Ici : recentrage + ouverture/fermeture douce. */
.board-panel {
  position: fixed;
  top: 50%;
  /* Un peu à GAUCHE du centre (2026-07-15) : le CENTRE reste la place d'Alpha ;
     le tableau se pose légèrement à gauche sans donner l'impression de "sortir
     du bord gauche". Le décalage/réduction d'Alpha quand le tableau s'ouvre =
     tranche TL5. */
  left: 40%;
  width: min(46vw, 640px);
  min-width: 320px;
  max-height: 82vh;
  z-index: 3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Style "Système" facon Solo Leveling (2026-07-15, demande de Lionel apres
     recherche de references : fenetre bleu profond translucide, coins NETS,
     fine bordure cyan qui luit SANS trop de lumiere -- lisibilite d'abord).
     Bleu nuit un peu plus dense/bleu qu'avant ; l'accent or de la marque reste
     via l'equerre et le titre, coherent avec le theme constellation. */
  /* Fond bleu nuit en léger dégradé (profondeur "panneau Système"). */
  background: linear-gradient(158deg, rgba(12, 22, 46, 0.80), rgba(6, 12, 28, 0.74));
  backdrop-filter: blur(14px);
  border: 1px solid rgba(96, 176, 255, 0.5);
  border-radius: 2px; /* quasi net -- anguleux facon "Systeme" */
  /* Lueur cyan CONTENUE (alpha bas) + liseré interne discret. Pas éblouissant. */
  box-shadow: 0 0 22px rgba(70, 150, 255, 0.16), inset 0 0 26px rgba(60, 130, 255, 0.05);
  /* Taille ADAPTATIVE (TL2, spec Lionel 2026-07-15 : "évolutif, petit ou grand
     selon le contenu / le format reçu") : la largeur est posée par board.js via
     une classe board--text / board--chart / board--image (voir plus bas) ; la
     hauteur suit déjà le contenu (max-height seulement). Le changement de taille
     s'ANIME (width + transform) -> la fenêtre grandit/rétrécit en douceur. */
  /* Fermé : petit (0.7) -> à l'ouverture il GRANDIT jusqu'à 1 (impression
     "éclot depuis un point", esprit fenêtre Système qui se déploie). */
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease, width 0.32s ease;
}

/* Largeur ADAPTATIVE au type de contenu (classe posée par board/board.js).
   Texte = fenêtre étroite ; graphique/image = plus large. La hauteur suit
   déjà le contenu (max-height seulement). Change en douceur (transition width). */
.board-panel.board--text {
  width: min(32vw, 440px);
}
.board-panel.board--chart {
  width: min(48vw, 680px);
}
.board-panel.board--image {
  width: min(40vw, 560px);
}
.board-panel.board--video {
  width: min(46vw, 620px);
}

/* Largeur ADAPTATIVE a la LONGUEUR du texte (Lionel 2026-07-25) : un brief court
   tient dans une petite fenetre, un texte long s'etale. court / moyen / long --
   pose par board.js selon la taille du contenu. Change en douceur (transition width). */
.board-panel.board--text-sm { width: min(24vw, 320px); }
.board-panel.board--text-md { width: min(34vw, 460px); }
.board-panel.board--text-lg { width: min(44vw, 600px); }

/* --- EMPLACEMENT DU TABLEAU (revu le 2026-07-28, Lionel) ------------------
   B1 (2026-07-20) tuilait jusqu'a 4 fenetres ici. Lionel a tranche : UNE
   fenetre a la fois (« je ne saurais pas quelle fenetre regarder »). Le
   conteneur ne garde donc qu'un seul emplacement, centre dans la moitie
   gauche (Alpha glisse a droite quand le Tableau est ouvert) : pas de
   retour a la ligne, pas de barre de defilement -- la fenetre gere sa
   propre hauteur (max-height sur .board-panel). Le gabarit (#board-panel,
   cache par board.js) et son clone partagent le meme style. */
.board-stack {
  position: fixed;
  top: 50%;
  left: 38%;
  transform: translate(-50%, -50%);
  width: min(74vw, 1200px);
  max-height: 92vh;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  align-items: center;
  justify-content: center;
  overflow: visible;
  /* le conteneur laisse passer les clics dans ses espaces vides ; chaque
     fenetre ouverte reactive pointer-events (via .board-panel--open). */
  pointer-events: none;
}
/* Dans la pile, une fenetre n'est plus centree en position:fixed : elle est
   dans le flux (flex), et ne garde que l'animation d'echelle (eclosion). */
.board-stack .board-panel {
  position: relative;
  left: auto;
  top: auto;
  margin: 0;
  transform: scale(0.7);
}
.board-stack .board-panel.board-panel--open {
  transform: scale(1);
}

/* Média image/vidéo dans le Tableau (EXPO 2026-07-15). Masqué par défaut :
   c'est board.js qui affiche image OU vidéo selon le type. Tient dans la
   largeur, hauteur bornée pour rester lisible. Rien n'est publié -- exposition. */
.board-panel__media {
  display: none;
  margin: 0;
}
.board-panel__image,
.board-panel__video {
  display: none;
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(4, 8, 18, 0.5);
  border: 1px solid rgba(96, 176, 255, 0.2);
}
.board-panel__media-caption {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(160, 200, 240, 0.72);
}

/* EXPO-2 (2026-07-16) : barre d'APPROBATION du Tableau (Oui / Non / Plus
   d'infos). Style "Systeme" assorti : boutons anguleux, cyan discret ; le Oui
   ressort legerement (vert menthe de la gamme), le Non en violet neon doux.
   Masquee par defaut : board.js l'affiche quand un contenu attend une decision. */
.board-approval {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(96, 176, 255, 0.22);
}
.board-approval--visible {
  display: flex;
}
.board-approval__btn {
  appearance: none;
  cursor: pointer;
  /* Facon "Systeme" Solo Leveling, assorti au header du panneau : majuscules
     espacees, coins nets, cyan sobre (lisibilite avant le glow). */
  font: 600 12px/1 "Segoe UI", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 10px 16px;
  border-radius: 2px; /* anguleux, comme le panneau */
  border: 1px solid rgba(130, 205, 255, 0.45);
  background: rgba(40, 90, 160, 0.16);
  color: rgba(200, 228, 255, 0.95);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.board-approval__btn:hover {
  background: rgba(60, 120, 200, 0.28);
  box-shadow: 0 0 10px rgba(96, 176, 255, 0.25);
}
.board-approval__btn:active {
  transform: translateY(1px);
}
.board-approval__btn--yes {
  border-color: rgba(125, 240, 184, 0.55);
  color: rgba(170, 250, 210, 0.95);
}
.board-approval__btn--yes:hover {
  background: rgba(60, 160, 110, 0.22);
  box-shadow: 0 0 10px rgba(125, 240, 184, 0.25);
}
.board-approval__btn--no {
  border-color: rgba(190, 130, 255, 0.5);
  color: rgba(220, 185, 255, 0.92);
}
.board-approval__btn--no:hover {
  background: rgba(130, 70, 200, 0.2);
  box-shadow: 0 0 10px rgba(190, 130, 255, 0.22);
}
.board-approval__status {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(160, 200, 240, 0.75);
}

/* BOUTONS D'APPROBATION -- OR "Systeme" Solo Leveling (2026-07-23, Lionel : de
   VRAIS boutons cliquables, en OR). Ce bloc vient APRES le precedent -> il fait
   foi dans la cascade, et il cible les classes REELLEMENT posees par board.js
   (--yes / --no / --more). pointer-events:auto + z-index garantissent qu'on peut
   CLIQUER meme quand la fenetre est dans la pile #board-stack. */
.board-approval {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(225, 185, 110, 0.28);
  position: relative;
  z-index: 2;
}
.board-approval__btn {
  appearance: none;
  pointer-events: auto;
  cursor: pointer;
  font: 700 12px/1 "Segoe UI", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  padding: 11px 18px;
  border-radius: 2px; /* coins nets facon "Systeme" */
  border: 1px solid rgba(225, 185, 110, 0.75);
  background: linear-gradient(180deg, rgba(70, 55, 22, 0.55), rgba(34, 26, 10, 0.55));
  color: rgba(242, 216, 150, 0.98);
  box-shadow: 0 0 9px rgba(225, 185, 110, 0.18), inset 0 0 10px rgba(225, 185, 110, 0.06);
  text-shadow: 0 0 6px rgba(225, 185, 110, 0.25);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease, border-color 0.15s ease;
}
/* Les TROIS en OR (on force border+couleur pour battre l'ancien vert/violet). */
.board-approval__btn--yes,
.board-approval__btn--no,
.board-approval__btn--more {
  border-color: rgba(225, 185, 110, 0.78);
  color: rgba(242, 216, 150, 0.98);
}
.board-approval__btn:hover {
  background: linear-gradient(180deg, rgba(100, 78, 30, 0.68), rgba(48, 37, 15, 0.68));
  border-color: rgba(240, 205, 130, 0.98);
  box-shadow: 0 0 16px rgba(225, 185, 110, 0.45), inset 0 0 12px rgba(225, 185, 110, 0.12);
}
.board-approval__btn:active { transform: translateY(1px); }
/* Petit repere de couleur au survol seulement (vert=oui, rouge=non), sans casser
   le dore. */
.board-approval__btn--yes:hover {
  box-shadow: 0 0 16px rgba(150, 240, 180, 0.42), inset 0 0 12px rgba(225, 185, 110, 0.12);
}
.board-approval__btn--no:hover {
  box-shadow: 0 0 16px rgba(255, 150, 130, 0.42), inset 0 0 12px rgba(225, 185, 110, 0.12);
}
.board-approval__status {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(225, 200, 150, 0.85);
}

/* Accents en EQUERRE aux coins (haut-gauche + bas-droite) -- signature des
   fenetres "Systeme" de Solo Leveling. Cyan clair, fins, sobres. */
.board-panel::before,
.board-panel::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(130, 205, 255, 0.8);
  pointer-events: none;
}
.board-panel::before {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}
.board-panel::after {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

/* --- Couche VIVANTE du Tableau (2026-07-15, Lionel : "comme si le systeme
   etait vivant" -- energie qui bouge derriere + lumiere qui circule sur le
   contour, facon Solo Leveling). SOBRE : basses opacites, animations lentes,
   le texte reste parfaitement lisible (regle "pas trop lumineux"). */
.board-panel__aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
/* Nappes d'energie cyan/violet qui DERIVENT lentement derriere le contenu. */
.board-panel__aura::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(38% 38% at 30% 28%, rgba(70, 150, 255, 0.16), transparent 70%),
    radial-gradient(34% 34% at 72% 64%, rgba(120, 95, 255, 0.12), transparent 70%);
  filter: blur(8px);
}
/* Lumiere qui CIRCULE sur le contour (fin liseré tournant) -- masque en anneau
   pour ne garder que le bord (astuce "gradient border" Chromium/Electron). */
.board-panel__aura::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 210deg,
    rgba(150, 215, 255, 0.5) 300deg,
    rgba(210, 240, 255, 0.75) 332deg,
    rgba(150, 215, 255, 0.35) 350deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* Animations UNIQUEMENT quand le tableau est ouvert (rien ne tourne pour rien). */
.board-panel--open .board-panel__aura::before {
  animation: board-aura-drift 17s ease-in-out infinite alternate;
}
.board-panel--open .board-panel__aura::after {
  animation: board-aura-spin 7s linear infinite;
}
@keyframes board-aura-drift {
  0%   { transform: translate(-4%, -3%) scale(1); }
  50%  { transform: translate(3%, 2%) scale(1.08); }
  100% { transform: translate(-2%, 4%) scale(1.03); }
}
@keyframes board-aura-spin {
  to { transform: rotate(360deg); }
}
/* Le contenu (header + corps) reste AU-DESSUS de l'aura. */
.board-panel__header,
.board-panel__content {
  position: relative;
  z-index: 1;
}

.board-panel--open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Le corps du tableau défile si le contenu dépasse la hauteur max (le header
   reste fixe en haut). Taille vraiment ADAPTATIVE au texte = TL2. */
.board-panel__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.board-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(96, 176, 255, 0.28);
  /* Barre "Systeme" facon Solo Leveling (2026-07-15) : majuscules espacees,
     cyan clair, léger fond bleu -- toute la fenetre est dans ce style. */
  background: rgba(40, 90, 160, 0.14);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(170, 216, 255, 0.92);
}

.board-panel__header button {
  background: none;
  border: none;
  color: #eee;
  cursor: pointer;
  font-size: 16px;
}

.board-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}

.board-panel__title {
  /* Label facon "Systeme" (Solo Leveling) : majuscules espacees, cyan clair,
     petite barre d'accent a gauche. Lisible, pas trop lumineux. */
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(155, 212, 255, 0.95);
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 2px solid rgba(120, 200, 255, 0.7);
}

/* T1 : texte simple -- pre-wrap pour respecter les retours à la ligne
   qu'Alpha structure elle-même (listes, paragraphes courts). */
.board-panel__text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(225, 232, 250, 0.88);
  white-space: pre-wrap;
}

/* T2 : graphique avec supports/résistances (canvas maison, voir
   board/board.js renderChart). La hauteur réelle du bitmap est calculée
   en JS (largeur du panneau × ratio + devicePixelRatio pour la netteté) ;
   ici uniquement l'encombrement CSS. Masqué par défaut : c'est board.js
   qui bascule texte <-> graphique selon le type du contenu publié. */
.board-panel__chart {
  display: none;
  width: 100%;
  border-radius: 8px;
  background: rgba(5, 9, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.board-panel__chart-meta {
  display: none;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(200, 212, 235, 0.75);
}

/* T2.5 "mix" : commentaire écrit affiché SOUS le graphique (plan de
   trade, points clés -- voir board.js). Filet discret pour séparer la
   courbe de l'explication ; classe posée par board.js UNIQUEMENT en mode
   mixte, jamais en mode texte seul (T1 inchangé à l'écran). */
.board-panel__text--under-chart {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Barre de défilement du Tableau (2026-07-15, retour de Lionel : la grise par
   défaut "fait tache", pas assortie -- il aime la barre fine du dashboard/mur
   de conversation, mais PAS en gris). Même style fin et discret (transparent +
   arrondi), teinte bleu/cyan du Tableau. Electron = Chromium -> ::-webkit-
   scrollbar disponible. Scopé au contenu du Tableau, ne touche pas le reste. */
.board-panel__content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.board-panel__content::-webkit-scrollbar-track {
  /* Rail cyan très discret -> on distingue que c'est une barre, mais assorti. */
  background: rgba(96, 176, 255, 0.08);
}
.board-panel__content::-webkit-scrollbar-thumb {
  background: rgba(130, 200, 255, 0.38);
  border-radius: 999px;
}
.board-panel__content::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 215, 255, 0.65);
}

/* Barre de defilement SOMBRE globale (2026-07-27) -- supprime toute barre
   blanche/grise par defaut (page, pile du Tableau...). Les barres teintees
   specifiques (contenu du Tableau, liste du globe) restent prioritaires. */
* { scrollbar-width: thin; scrollbar-color: rgba(120,130,200,0.45) rgba(12,14,26,0.55); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: rgba(12,14,26,0.55); }
*::-webkit-scrollbar-thumb { background: rgba(120,130,200,0.42); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(150,160,230,0.62); }

/* En-tete du Tableau : le CHEF qui presente (avatar soldat de l'ombre). */
.board-presenter { display: inline-flex; align-items: center; gap: 7px; }
.board-presenter__ava { width: 26px; height: 26px; display: inline-flex;
  filter: drop-shadow(0 0 5px rgba(150,140,230,0.5)); }
.board-presenter__svg { width: 26px; height: 26px; }
.board-presenter__txt { font-size: 12px; letter-spacing: .3px; opacity: .92; }
.board-presenter__txt b { color: var(--c, #cbb8ff); font-weight: 600; }

/* Décalage de la ZONE CLIQUABLE de la boule (#amber-sphere, div invisible
   qui ouvre/ferme le chat -- voir constellation.css) quand le tableau est
   ouvert : elle doit suivre la boule 3D, qui glisse vers x = 75% de la
   largeur (voir constellation.js, BOARD_SHIFT_NDC 0.5 -> milieu de la
   moitié droite). Classe posée sur <body> par board/board.js ; durée
   assortie au lissage 3D (~0.6s). */
body.board-open #amber-sphere {
  left: 78%;
  top: 64%;
}

/* ===================================================================
   MOBILE / TÉLÉPHONE (2026-07-19, demande Lionel : app sur téléphone).
   S'applique UNIQUEMENT sur petit écran (<= 640px) -> le rendu PC ne
   bouge pas d'un pixel. On agrandit les cibles tactiles : menu, symbole
   doré du chat, lecteur de fichiers, champ de saisie et bouton Envoyer,
   paroles live. Le champ passe à 16px pour éviter le zoom auto d'iOS.
   =================================================================== */
@media (max-width: 640px) {
  /* ============================================================
     LE MENU DES PAGES SUR TELEPHONE (Lionel, 2026-08-05 au soir).

     Son probleme, mot pour mot : « tous les noms qui sont de haut en bas
     sur la gauche [...] quand j'ouvre une page, ils sont au-dessus des
     fenetres. Donc j'ai du mal a voir quoi que ce soit. »

     Ce qu'il veut : « j'appuie dessus et tous les noms apparaissent [...]
     une fois que j'ai appuye sur la page, les onglets se referment ».

     DONC : un seul nom a l'ecran -- celui de la page ou il est. Un appui
     ouvre la liste des huit. Un deuxieme appui choisit, et la liste se
     referme. Tant qu'il n'a pas appuye, il n'y a QU'UN MOT sur son ecran.

     Tout ca vit dans @media (max-width: 640px) : sur l'ordinateur, les
     huit onglets restent affiches en colonne, exactement comme avant.
     ============================================================ */
  #page-nav {
    top: 10px;
    left: 10px;
    gap: 0;
    /* le fond n'apparait QUE quand la liste est ouverte : ferme, on ne
       veut qu'un mot pose sur la page, sans cadre ni pastille */
    border-radius: 10px;
  }

  /* FERME : seul l'onglet de la page en cours est affiche. */
  .page-nav__item {
    display: none;
    font-size: 14px;
    padding: 7px 10px;
  }
  .page-nav__item--active {
    display: block;
  }
  /* la petite fleche dit que ca s'ouvre -- sinon rien n'indique qu'on
     peut appuyer, et un bouton qu'on ne devine pas n'existe pas */
  #page-nav:not(.page-nav--ouvert) .page-nav__item--active::after {
    content: " \25BE";
    opacity: 0.55;
  }

  /* OUVERT : les huit noms, sur un fond lisible (ils passent par-dessus
     la page, donc il faut qu'on les distingue du contenu). */
  #page-nav.page-nav--ouvert {
    gap: 2px;
    padding: 6px 4px;
    background: rgba(10, 6, 22, 0.92);
    border: 1px solid rgba(225, 185, 110, 0.25);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
  }
  #page-nav.page-nav--ouvert .page-nav__item {
    display: block;
    min-width: 128px;
  }

  /* Symbole doré du chat + lecteur de fichiers : un peu plus grands pour le
     doigt (cible tactile confortable ~46px), sans excès. Repositionnés pour ne
     pas se chevaucher une fois agrandis. */
  #doc-drop-zone {
    right: 14px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
  #chat-toggle {
    right: 72px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  /* Barre de saisie : occupe bien la largeur. 16px = pas de zoom auto iOS. */
  .chat-panel {
    width: min(94vw, 560px);
  }
  .chat-panel__input-bar input {
    font-size: 16px;
    padding: 12px 16px;
  }
  .chat-panel__input-bar button {
    font-size: 16px;
    padding: 11px 18px;
  }
  .chat-panel__status {
    font-size: 12px;
  }

  /* PAROLES D'ALPHA sur TÉLÉPHONE (2026-07-19, retour Lionel : illisible car
     blanc éparpillé sur la sphère/les couleurs). -> ENCART SOMBRE net, en bas,
     pleine largeur : blanc sur fond foncé lisible PARTOUT, jamais sur la boule.
     Hauteur bornée + défilement si le message est long (ne couvre plus tout). */
  #live-words {
    left: 10px;
    right: 10px;
    max-width: none;
    transform: none;
    bottom: 90px;
    max-height: 30vh;
    overflow-y: auto;
    text-align: left;
    font-size: 16.5px;
    line-height: 1.5;
    color: #eef3ff;
    background: rgba(4, 6, 16, 0.85);
    border: 1px solid rgba(120, 160, 255, 0.20);
    border-radius: 14px;
    padding: 12px 14px;
    text-shadow: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  /* Valeur de SECOURS seulement : la vraie hauteur est mesuree a
     l'instant meme par _placerParoles() dans chat.js, parce qu'un
     chiffre ecrit a la main se trompe des que la barre grandit. */
  body.chat-open #live-words {
    bottom: 124px;
  }

  /* (La réduction de la sphère sur téléphone se fait en 3D dans
     constellation.js -- voir MOBILE_SPHERE_SCALE -- et NON en mettant à
     l'échelle le canvas, ce qui créait des bandes noires sur les côtés.) */

  /* Sur le DASHBOARD, la mini-sphère d'Alpha se retrouve DERRIÈRE les cartes
     d'info sur petit écran (pas la place). -> masquée sur téléphone UNIQUEMENT.
     Sur PC elle reste partout (demande Lionel : "lui parler depuis toutes les
     pages"). La page Agents la garde aussi (elle passe bien là-bas). */
  #mini-alpha-dashboard {
    display: none !important;
  }
}


#amber-sphere {
  transition: left 0.6s ease, top 0.6s ease;
}


/* ===== CARTE GPS SATELLITE (Lionel 2026-07-25, phase 1) =====================
   Ouverte par Alpha (outil localiser_adresse) ou window.ouvrirGPS. Grand panneau
   centre facon "Systeme" (coherent avec le Tableau) ; la carte Leaflet remplit
   l'espace. Cachee tant que non .open. Alpha se decale (Alpha Smart la mesure). */
#gps-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(62vw, 860px);
  height: 70vh;
  z-index: 5;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(96, 176, 255, 0.55);
  border-radius: 3px;
  box-shadow: 0 0 34px rgba(70, 150, 255, 0.24), inset 0 0 26px rgba(60, 130, 255, 0.05);
  background: rgba(6, 12, 28, 0.92);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#gps-overlay.open {
  display: flex;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* Agrandie a la voix (piloter_carte 'plein_ecran') ; 'reduire' retire la classe. */
#gps-overlay.plein { width: 96vw; height: 92vh; }
#gps-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: linear-gradient(158deg, rgba(12, 22, 46, 0.92), rgba(6, 12, 28, 0.86));
  border-bottom: 1px solid rgba(96, 176, 255, 0.3);
  color: #cfe0ff;
  font-size: 13px;
}
#gps-titre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gps-close {
  flex: none;
  background: transparent;
  border: none;
  color: #cfe0ff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 2px;
}
#gps-close:hover { background: rgba(96, 176, 255, 0.18); }
#gps-map {
  flex: 1;
  width: 100%;
  min-height: 0;
  background: #0a1020;
}
/* Leaflet pose des z-index eleves en interne ; on borne dans notre overlay. */
#gps-map .leaflet-pane,
#gps-map .leaflet-control { z-index: auto; }