/* ══════════════════════════════════════════════════════════════════════════
   Les surfaces flottantes de l'application — palette de commandes, bandeau de
   confirmation, bandeau de réseau, menu d'un message.

   POURQUOI CETTE FEUILLE EXISTE

   `style.css` habille l'ancienne application. Elle porte des règles sur des
   éléments nus — `body`, `h1`, `input`, `button` — qui débordaient sur la
   maquette : la page la charge donc ÉTEINTE (`media="not all"`), et `app.js`
   ne l'allume qu'en entrant dans l'ancienne vue.

   Sauf que le produit, lui, est devenu le tableau de bord de la maquette.
   Cette vue-là ne s'ouvre plus. Résultat, relevé le 21/08 sur la page en
   ligne : Ctrl + K ouvrait la palette de commandes ENTIÈREMENT NUE — un champ
   de formulaire du navigateur et une liste à puces, en bas de page, par-dessus
   le dessin. Le raccourci est pourtant annoncé dans l'interface.

   Ces surfaces-là ne touchent aucun élément nu : elles peuvent donc rester
   allumées en permanence. Elles sont écrites ici, une fois, sur les valeurs de
   `SPEC-TECHNIQUE.txt` — mêmes couleurs, mêmes rayons, mêmes trois familles
   que la maquette.

   RÈGLES DE LA MAISON, reprises de la spec :
     · un accent coloré = un sens (lime = le produit, rouge = l'erreur) ;
     · les libellés HUD en capitales, en Chivo Mono, interlettrage large ;
     · aucun texte sous 10 px, aucune cible cliquable sous 44 px de haut.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --sf-encre:    #06070b;
  --sf-panneau:  #0d0f13;
  --sf-verre:    rgba(13, 15, 20, .92);
  --sf-lime:     #d8ff3e;
  --sf-rouge:    #ff8b84;
  --sf-vert:     #4ade80;
  --sf-texte:    #f2f4f7;
  --sf-fort:     rgba(242, 244, 247, .92);
  --sf-courant:  rgba(242, 244, 247, .76);
  --sf-discret:  rgba(242, 244, 247, .62);
  --sf-eteint:   rgba(242, 244, 247, .5);
  --sf-arete:    rgba(255, 255, 255, .1);
  --sf-arete-vive: rgba(255, 255, 255, .14);
  --sf-ombre:    0 44px 90px -44px rgba(0, 0, 0, 1);
  --sf-courante: "Instrument Sans", system-ui, sans-serif;
  --sf-hud:      "Chivo Mono", ui-monospace, monospace;
}

/* ─────────────────────────── la palette de commandes (Ctrl + K) ───────── */

.palette { position: fixed; inset: 0; z-index: 120; }
.palette[hidden] { display: none; }

.palette .palette-fond {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .66);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: sf-fondu .18s ease both;
}

/* Elle descend du haut, comme les feuilles de la page d'offre montent du bas. */
.palette .palette-boite {
  position: relative; z-index: 1;
  width: min(560px, calc(100vw - 32px));
  margin: 12vh auto 0;
  display: flex; flex-direction: column;
  max-height: 70vh; overflow: hidden;
  border: 1px solid var(--sf-arete);
  border-radius: 20px;                      /* rayon « panneau » de la spec */
  background: var(--sf-verre);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: var(--sf-ombre);
  animation: sf-descendre .22s cubic-bezier(.2, .7, .3, 1) both;
}

.palette #palette-champ {
  flex: none; height: 56px; padding: 0 20px;
  border: 0; border-bottom: 1px solid var(--sf-arete);
  background: transparent; color: var(--sf-texte);
  font: 400 16px/1 var(--sf-courante); letter-spacing: -.01em;
}
.palette #palette-champ::placeholder { color: var(--sf-eteint); }
.palette #palette-champ:focus { outline: none; border-bottom-color: rgba(216, 255, 62, .55); }

.palette #palette-liste {
  flex: 1 1 auto; overflow-y: auto;
  margin: 0; padding: 8px; list-style: none;
}
.palette #palette-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 44px;                          /* plancher de cible de la spec */
  padding: 10px 14px; border-radius: 12px;
  color: var(--sf-courant); cursor: pointer;
}
.palette #palette-liste li:hover { background: rgba(255, 255, 255, .04); }
.palette #palette-liste li.sur {
  background: rgba(216, 255, 62, .1);
  box-shadow: inset 0 0 0 1px rgba(216, 255, 62, .3);
  color: var(--sf-texte);
}
.palette .cmd-nom { font: 400 15px/1.3 var(--sf-courante); }
.palette #palette-liste li.sur .cmd-nom { font-weight: 600; }
.palette .cmd-ou {
  flex: none; font: 400 10.5px/1 var(--sf-hud);
  letter-spacing: .16em; text-transform: uppercase; color: var(--sf-eteint);
}
.palette .cmd-rien {
  justify-content: center; color: var(--sf-eteint);
  font: 400 14px/1.4 var(--sf-courante); cursor: default;
}
.palette #palette-liste li.cmd-rien:hover { background: none; }

.palette .palette-boite footer {
  flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, .08);
  font: 400 10.5px/1.6 var(--sf-hud); letter-spacing: .16em;
  text-transform: uppercase; color: var(--sf-eteint);
}
.palette .palette-boite kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border: 1px solid var(--sf-arete-vive); border-radius: 8px;
  background: rgba(255, 255, 255, .06); color: var(--sf-discret);
  font: 400 10.5px/1 var(--sf-hud); letter-spacing: .08em;
}

/* ─────────────────────────── le bandeau de confirmation ───────────────── */

#toast {
  /* Au-dessus de la barre du bas du tableau de bord, pas dessus : posé à 26 px, il
     recouvrait « SON » et « STATS ». La barre fait 80 px de haut dans la maquette. */
  position: fixed; left: 50%; bottom: 108px; z-index: 130;
  transform: translate(-50%, 14px);
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 18px;
  border: 1px solid var(--sf-arete); border-radius: 999px;
  background: var(--sf-verre);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: var(--sf-ombre);
  font: 500 14px/1.4 var(--sf-courante); color: var(--sf-fort);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, .7, .3, 1);
}
#toast:empty { display: none; }
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast a { color: var(--sf-lime); text-underline-offset: 3px; }

/* ─────────────────────────── le bandeau de réseau ─────────────────────── */

#reseau-etat {
  position: fixed; top: 0; left: 0; right: 0; z-index: 140;
  padding: 9px 16px; text-align: center;
  font: 500 11px/1.4 var(--sf-hud); letter-spacing: .16em; text-transform: uppercase;
  background: var(--sf-panneau); color: var(--sf-texte);
  border-bottom: 1px solid var(--sf-arete);
  animation: sf-descendre .22s cubic-bezier(.2, .7, .3, 1) both;
}
#reseau-etat[hidden] { display: none; }
/* Un accent = un sens : le rouge dit la coupure, le vert dit le retour. */
#reseau-etat[data-ton="coupe"] {
  background: rgba(255, 139, 132, .12); color: var(--sf-rouge);
  border-bottom-color: rgba(255, 139, 132, .4);
}
#reseau-etat[data-ton="revenu"] {
  background: rgba(74, 222, 128, .12); color: var(--sf-vert);
  border-bottom-color: rgba(74, 222, 128, .4);
}

/* ─────────────────────────── le menu d'un message ─────────────────────── */

.menu-message {
  position: fixed; z-index: 125; min-width: 190px;
  padding: 6px; display: flex; flex-direction: column;
  border: 1px solid var(--sf-arete); border-radius: 14px;
  background: var(--sf-verre);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: var(--sf-ombre);
  animation: sf-descendre .16s cubic-bezier(.2, .7, .3, 1) both;
}
.menu-message button {
  min-height: 44px; padding: 10px 14px; text-align: left;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--sf-courant); cursor: pointer;
  font: 400 14px/1.3 var(--sf-courante);
}
.menu-message button:hover,
.menu-message button:focus-visible {
  background: rgba(216, 255, 62, .12); color: var(--sf-texte); outline: none;
}

/* ─────────────────────────── la marque de plateforme ──────────────────── */

/* Une lettre dans une pastille de la couleur de la plateforme, comme la maquette — et
   surtout PAS le logo officiel : ce sont des marques deposees, et ce rendu-ci s'affiche
   sur le direct d'un client. La couleur du fond est posee en ligne par `render.js`. */
.plat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex: none; border-radius: 4px;
  color: #06070b; font: 700 10px/1 var(--sf-courante); text-align: center;
  vertical-align: -2px;
}

/* ─────────────────────────── l'anneau de focus ────────────────────────── */

/* Aucun champ du produit n'avait d'anneau de focus : au clavier, on ne savait jamais ou
   l'on etait. La regle ne s'applique qu'au focus VISIBLE — celui qui apparait quand on
   navigue au clavier, jamais sur un clic a la souris — et elle ajoute un contour sans
   toucher a la mise en page. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sf-lime);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─────────────────────────── les deux animations ──────────────────────── */

@keyframes sf-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-descendre {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
/* Le bandeau de confirmation est centré par une translation : son entrée est déjà
   décrite par sa transition, une animation la ferait sauter de côté. */
@media (prefers-reduced-motion: reduce) {
  .palette .palette-fond, .palette .palette-boite,
  #reseau-etat, .menu-message { animation: none; }
  #toast { transition: opacity .2s ease; }
}