/* =====================================================================
   EVOXAO — BARRE DE COMMANDE PERSISTANTE (mode réduit) — B2
   Pages : portfolio.html et home.html UNIQUEMENT (enter_evo.html garde
   son terminal complet). PERMANENTE ET DÉPLIÉE : même colonne gauche,
   même typo que le terminal de l'enter. AUCUN rectangle de fond — un
   filet 1px sous la saisie suffit à la faire exister.
   Thème partagé entre pages via sessionStorage -> classe t-* sur <html>.
   ===================================================================== */

@font-face{
  font-family:'ToshibaSat';
  src:url('assets/ACCUEIL/evoxao_website_enter_fonts/Px437_ToshibaSat_8x14.woff2') format('woff2');
  font-display:swap;
}

/* palette par thème — mêmes valeurs que enter_evo.html (A5) */
:root, html.t-light{
  --evt-fg:#ffffff; --evt-bright:#ffffff; --evt-dim:rgba(255,255,255,.55);  /* LOT 1e : dims à .55 (4 thèmes), = --text-dim de l'ENTER */
  --evt-structure:rgba(255,255,255,.65);
  --evt-shadow:0 0 2px #ffffff, 0 0 7px rgba(200,222,255,.95), 0 0 15px rgba(150,190,255,.80);
}
html.t-dark{
  --evt-fg:#22E07E; --evt-bright:#ffffff; --evt-dim:#0E7A42; --evt-structure:#0E7A42;
  --evt-shadow:0 0 10px rgba(255,255,255,.9);
}
html.t-baddie{
  --evt-fg:#FF4FC3; --evt-bright:#ffffff; --evt-dim:rgba(255,79,195,.55); --evt-structure:#B23A8A;
  --evt-shadow:0 0 2px #FF4FC3, 0 0 14px rgba(255,79,195,.55);
}
html.t-galaxy{
  --evt-fg:#C9D4F5; --evt-bright:#ffffff; --evt-dim:rgba(201,212,245,.55); --evt-structure:#2E3559;
  --evt-shadow:0 0 10px rgba(127,178,255,.45);
}
html.t-3am{
  --evt-fg:#8B1A1A; --evt-bright:#ffffff; --evt-dim:rgba(139,26,26,.55); --evt-structure:rgba(139,26,26,.65);
  --evt-shadow:0 0 2px rgba(139,26,26,.85), 0 0 6px rgba(139,26,26,.35);
}

/* FOND DU PANNEAU DE SUGGESTIONS (lot PANNEAU, 19/10/2026, valeur d'evo) — UN seul jeton, pour TOUS les thèmes : les thèmes
   ne changent que la couleur du texte, le menu reste sombre partout. .92 : le blog (rose, chargé) ne transparaît pas ; avec
   le flou (#evt-sugg), on sent la page derrière sans jamais la lire. */
:root{ --evt-panel-bg:rgba(0,0,0,.92); }

/* ---- barre de statut bas-droite : texte seul, jamais de fond ---- */
#evt-bar{
  position:fixed; right:18px; bottom:12px; z-index:2147482001; pointer-events:none;
  font-family:'ToshibaSat',monospace; font-size:16px; letter-spacing:2px; line-height:1.35;
  color:var(--evt-fg); white-space:pre; text-align:right;
  -webkit-font-smoothing:none; font-smooth:never; text-rendering:geometricPrecision;
  text-shadow:var(--evt-shadow);
}
/* PASSE 9 (correctif evo) : la barre de statut est IDENTIQUE à celle de l'enter (statusHTML
   partagé, evoxao_player.js) — mêmes classes sb-*, mêmes valeurs que enter_evo.html. */
#evt-bar .sb-hit{ pointer-events:auto; opacity:.78; }
#evt-bar .sb-hit:hover{ opacity:1; }
#evt-bar .sb-ico{ display:inline-block; width:3ch; text-align:center; }
#evt-bar .sb-svg{ height:.64em; width:auto; fill:currentColor; display:inline-block; vertical-align:baseline; }
#evt-bar .sb-dim{ opacity:.34; }                        /* contrôle INACTIF */
#evt-bar .sb-on{ opacity:1; }                           /* contrôle ACTIF */
#evt-bar .nv{ color:var(--evt-bright); }
/* ── lot BARRE (18/10/2026) — segments posés par paintBar/fitBar (evoxao_terminal_bar.js) ──
   Masquage d'un segment = display:none (il ne prend plus de place, rien n'est coupé). La boîte du titre
   n'est bornée QUE quand le titre ne rentre pas (.sb-clip) : sinon elle est inline, strictement comme avant. */
#evt-bar .sb-seg.sb-off{ display:none; }
#evt-bar .sb-seg.sb-lead > .sb-sep{ display:none; }
/* étape 5 : la jauge passe de 10 à 5 segments — restent les niveaux PAIRS (data-lvl 2,4,…,10 : un clic = 20 %, 40 %…) */
#evt-bar .sb-seg.sb-vol5 .sb-hit[data-lvl="1"], #evt-bar .sb-seg.sb-vol5 .sb-hit[data-lvl="3"],
#evt-bar .sb-seg.sb-vol5 .sb-hit[data-lvl="5"], #evt-bar .sb-seg.sb-vol5 .sb-hit[data-lvl="7"],
#evt-bar .sb-seg.sb-vol5 .sb-hit[data-lvl="9"]{ display:none; }
#evt-bar .sb-seg.sb-novolg .sb-hit{ display:none; }      /* étape 6 : les 5 segments restants partent, le mot « vol » reste */
/* étape 6 : le titre se réduit à la note ♪, qui porte le titre complet en title= (survolable) */
#evt-bar .sb-seg.sb-noteonly .sb-tgap, #evt-bar .sb-seg.sb-noteonly .sb-tbox{ display:none; }
#evt-bar .sb-seg.sb-noteonly .sb-note{ pointer-events:auto; }
#evt-bar .sb-ttxt{ display:inline-block; white-space:pre; }
#evt-bar .sb-tbox.sb-clip{ display:inline-block; box-sizing:border-box; overflow:hidden; vertical-align:bottom;
  padding:12px var(--sb-fade,16px); margin:-12px 0;        /* ±12px : le halo (text-shadow) reste DANS la zone masquée */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--sb-fade,16px), #000 calc(100% - var(--sb-fade,16px)), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 var(--sb-fade,16px), #000 calc(100% - var(--sb-fade,16px)), transparent 100%); }
/* défilement : aller-retour lent, transform seul.
   ⚠ COUPLÉ À evoxao_terminal_bar.js : les paliers 12 % et 88 % ci-dessous valent BAR_TITLE_HOLD (0.12) et 1 − BAR_TITLE_HOLD,
   qui sert au calcul de la durée (--sb-dur). Une animation CSS ne lit pas de variable dans ses pourcentages : changer l'un
   oblige à changer l'autre, dans les deux fichiers. */
#evt-bar .sb-tbox.sb-scroll .sb-ttxt{ animation:evtTitleScroll var(--sb-dur,8s) cubic-bezier(.4,0,.2,1) infinite alternate; will-change:transform; }
@keyframes evtTitleScroll{ 0%,12%{ transform:translateX(0); } 88%,100%{ transform:translateX(var(--sb-dx,0px)); } }
/* AUCUN défilement — tronqué, fondu à droite seulement : prefers-reduced-motion, pointer:coarse, et toute page qui fige le
   curseur de la barre (#evt-bar.sb-still, posé par fitBar : project_playerschoice.html, qui refuse les @keyframes) */
#evt-bar.sb-still .sb-tbox.sb-scroll .sb-ttxt{ animation:none; }
#evt-bar.sb-still .sb-tbox.sb-clip{ padding-left:0;
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - var(--sb-fade,16px)), transparent 100%);
          mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - var(--sb-fade,16px)), transparent 100%); }
@media (prefers-reduced-motion:reduce), (pointer:coarse){
  #evt-bar .sb-tbox.sb-scroll .sb-ttxt{ animation:none; }
  #evt-bar .sb-tbox.sb-clip{ padding-left:0;
    -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - var(--sb-fade,16px)), transparent 100%);
            mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - var(--sb-fade,16px)), transparent 100%); } }

/* ---- B2a : le prompt PERMANENT, déplié, bas-gauche. AUCUN fond. ---- */
#evt-prompt, #evt-sugg{
  /* LARGEUR DE RÉFÉRENCE DE LA BANDE — déclarée UNE SEULE FOIS, ici, et héritée par tous les
     enfants du prompt : le trait (#evt-rule), le filet du placeholder (#evt-hint) — et par le
     panneau de suggestions (#evt-sugg), qui n'est plus DANS le prompt (lot PANNEAU, 19/10/2026 :
     enfant de <body>) et reçoit donc la variable et la typo par ce même bloc. Changer ce chiffre
     les déplace tous ensemble : aucune valeur n'est recopiée en dur ailleurs. */
  --evt-rule-w:calc(70ch + 2px);   /* LOT 1 : 56ch -> 70ch, contient « have some time to waste? type /bbevo desktop » (440px) */
  font-family:'ToshibaSat',monospace; font-size:16px; letter-spacing:2px; line-height:1.35;
  color:var(--evt-fg); white-space:pre;
  -webkit-font-smoothing:none; font-smooth:never; text-rendering:geometricPrecision;
  pointer-events:auto;
}
#evt-prompt{ position:fixed; left:18px; bottom:12px; z-index:2147482001; }
#evt-label{ color:var(--evt-bright); font-weight:700; text-shadow:var(--evt-shadow); }
/* le vrai <input>, transparent, sans chrome — c'est LUI qui a le focus */
#evt-input{
  font:inherit; letter-spacing:inherit; color:var(--evt-fg); background:transparent;
  border:none; outline:none; padding:0; margin:0; width:40ch; caret-color:transparent;
  text-transform:uppercase;
}
/* PASSE 9 LOT A — départ de la saisie : 'COMMAND> ' = 9 car. × (1ch + letter-spacing 2px)
   => largeur réelle du label = 9ch + 18px. L'ancien calc(9ch + 2px) posait le hint 16px
   trop à gauche, SOUS la fin du label (chevauchement illisible). Comme sur l'ENTER, le hint
   vient APRÈS le curseur bloc (.6ch + 2px), il n'est jamais recouvert. */
/* FILET DE SÉCURITÉ DE LARGEUR — vaut pour TOUTES les pages et TOUS les futurs messages, ce
   n'est pas le calage d'un message précis. #evt-hint est position:absolute, donc hors flux et
   sans largeur imposée : sans ce max-width il s'étale à sa largeur naturelle et dépasse le trait
   (#evt-rule) posé sous la ligne de saisie. Les deux sont enfants de #evt-prompt et la borne est
   écrite dans les MÊMES unités que le trait, donc solidaire de lui pour toujours :
     trait   = 56ch + 2px        départ du hint = 9.6ch + 20px
     dispo   = (56ch + 2px) - (9.6ch + 20px) = 46.4ch - 18px = 353px
   Une seule ligne (nowrap), position gauche inchangée, coupe propre en fin de ligne si un
   message dépasse. AUCUNE animation, aucun changement d'affichage : purement géométrique. */
#evt-hint{ color:var(--evt-dim); position:absolute; left:calc(9.6ch + 20px); bottom:0; pointer-events:none;
  max-width:calc(var(--evt-rule-w) - (9.6ch + 20px)); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#evt-cur{ display:inline-block; width:.6ch; height:1em; background:var(--evt-bright);
  vertical-align:-.14em; box-shadow:0 0 10px currentColor;
  animation:evtBlink .9s steps(1,end) infinite; position:absolute; bottom:.15em; }
@keyframes evtBlink{ 50%{ opacity:0; } }
/* Le filet 1px qui fait exister la bande, en structure à 40%. Il part du bord gauche du prompt et
   sa LONGUEUR est la seule chose qui ait bougé : 49ch -> 56ch, pour contenir le placeholder le plus
   long du site (« time to waste? type /BBEVODESKTOP », mesuré 330px) qui démarre à 9.6ch + 20px.
     fin du texte = 9.6ch + 20px + 330px = 426.8px      trait = 56ch + 2px = 450px
     => 23px de marge de confort à droite du texte.
   Toujours exprimé en ch : le trait reste solidaire de la typo. Épaisseur, couleur, opacité et
   point de départ inchangés. NB il couvre désormais aussi le champ de saisie (#evt-input, 40ch
   posé après le label de 9ch, soit une fin à ~428px), que l'ancienne valeur laissait dépasser. */
#evt-rule{ position:absolute; left:0; right:auto; bottom:-6px; width:var(--evt-rule-w); height:1px;
  background:var(--evt-structure); opacity:.4; }
#evt-resp{ color:var(--evt-fg); }
/* lot BARRE : réponse coupée par fitResp (evoxao_terminal_bar.js) seulement si, tout sacrifié, elle irait à moins de
   BAR_GAP_PX du bloc de droite — même fondu à droite que le titre tronqué */
#evt-resp.sb-rclip{ display:inline-block; overflow:hidden; vertical-align:bottom; padding:12px 0; margin:-12px 0;
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 16px), transparent 100%);
          mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 16px), transparent 100%); }
#evt-ghost{ color:var(--evt-dim); }

/* (PASSE 9 correctif evo : le bloc NOW PLAYING #np-block des pages barre est SUPPRIMÉ —
   le lecteur visible de home/portfolio est la barre de statut ci-dessus, identique à l'enter) */

/* ====== PANNEAU DE SUGGESTIONS (#evt-sugg) — lot PANNEAU (19/10/2026) : DÉMÉNAGÉ de home.html, toutes les pages ======
   TEXTE repris d'enter_evo.html (#sug / .sg / .sg.sel) : --text-dim -> --evt-dim, --text-bright -> --evt-bright,
   --glow-bright -> --evt-shadow. AUCUNE BOÎTE (ni cadre, ni fond, ni ombre, ni animation : display seul) ; le vide est
   occupé par des POINTS DE CONDUITE (.dots) calculés ligne par ligne (evoxao_terminal_bar.js, suggStart).
   POSITION : enfant direct de <body>, fixed. left et bottom posés par le JS à chaque dessin, sur la boîte de #evt-prompt
   (même bord gauche, bas du panneau = haut de la bande). LARGEUR = --evt-rule-w (bloc #evt-prompt, #evt-sugg ci-dessus) :
   mêmes bords que le trait. padding horizontal NUL : les points atteignent le bord droit du trait.
   Z : 2147483000 = au-dessus des fenêtres de projet du portfolio (2147482060 et +, ++zTop) et de tout le reste de la barre,
   SOUS le faux curseur (2147483001 ; 2147483647 sur le portfolio). Hors flux : ne pousse ni ne décale rien.
   SUGG_AIR (CSS) : air entre la dernière ligne et COMMAND> = une demi-ligne de la barre (--evt-sugg-air, plancher 6px).
   FOND (retour d'evo, 19/10) : le panneau est un MENU posé devant la page — fond --evt-panel-bg (:root), flou d'arrière-plan
   6px, hairline = --evt-structure à 40 % (l'intensité du trait #evt-rule, opacity .4), air intérieur --evt-sugg-pad.
   OPTION (ii) : le TEXTE reste dans la colonne de COMMAND> (même bord gauche, largeur du trait : cells() inchangé) ; c'est la
   BOÎTE qui déborde de l'air + la hairline de chaque côté (margin-left négatif, width élargie d'autant). Aucune ombre. */
#evt-sugg{ --evt-sugg-air:0.5lh; --evt-sugg-pad-x:12px; --evt-sugg-pad-y:8px;
  display:none; position:fixed; left:18px; bottom:34px; z-index:2147483000;
  margin-bottom:max(6px, var(--evt-sugg-air)); margin-left:calc(-1 * (var(--evt-sugg-pad-x) + 1px));
  width:calc(var(--evt-rule-w) + 2 * (var(--evt-sugg-pad-x) + 1px)); box-sizing:border-box;
  padding:var(--evt-sugg-pad-y) var(--evt-sugg-pad-x);
  border:1px solid color-mix(in srgb, var(--evt-structure) 40%, transparent);
  background:var(--evt-panel-bg);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
#evt-sugg .sg{ pointer-events:auto; display:block; color:var(--evt-dim); }
/* SÉLECTION ÉVIDENTE : « > » dans la marge (sans décaler le texte), ligne en clair avec la lueur de la barre, points et
   abréviation éclairés avec elle ; le survol donne le même état que les flèches. Jamais de clignotement, lueur fixe. */
#evt-sugg .sg{ position:relative; }
#evt-sugg .sg.sel::before, #evt-sugg .sg:hover::before{ content:'>'; position:absolute; top:0; left:calc(-1ch - 2px); color:var(--evt-bright); text-shadow:var(--evt-shadow); }
#evt-sugg .sg.sel, #evt-sugg .sg:hover{ color:var(--evt-bright); text-shadow:var(--evt-shadow); }
#evt-sugg .sg.sel .dots, #evt-sugg .sg:hover .dots, #evt-sugg .sg.sel .abbr, #evt-sugg .sg:hover .abbr{ opacity:.8; text-shadow:var(--evt-shadow); }
#evt-sugg .sg.star{ pointer-events:none; }       /* lignes en étoiles : ni cliquables ni survolables */
/* POINTS DE CONDUITE — une TRAME : couleur de la ligne, en fraction, jamais au niveau du nom */
#evt-sugg .sg .dots{ opacity:.45; }
#evt-sugg .sg .abbr{ opacity:.6; }              /* [/PL] à la place du libellé */