/* =================================================================
   EspaceVirtuel V2 — les briques d'ecran.
   Cahier des charges version 8, partie 5.
   Une seule feuille de style pour toute l'application.
   Ne jamais ajouter de reglage visuel dans l'application (5.6 point 4).
   ================================================================= */

/* ---------- 0. LA POLICE (23/09/2026) ----------
   Inter, sobre et tres lisible, servie PAR CE SERVEUR (public/polices) :
   aucune dependance exterieure, rien ne part vers Google. Licence OFL,
   jointe au dossier. Seul le jeu latin est charge (le francais, les
   guillemets, l apostrophe typographique) : la darija, elle, reste sur
   une police qui connait l arabe (voir .ev-dj), grace au unicode-range.
   `swap` : le texte s affiche tout de suite dans la police du systeme,
   et bascule quand Inter est arrivee — jamais d ecran blanc. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/polices/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/polices/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/polices/inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url("/polices/inter-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 0 bis. LA POLICE D AFFICHE (26/09/2026) ----------
   Chakra Petch, une police « arcade » aux angles coupes, pour les titres,
   les chiffres et l heure. Servie par CE serveur, licence OFL jointe
   (polices/OFL-chakra-petch.txt), jeu latin seulement. Le corps du texte
   reste en Inter : c est elle qu on lit a un metre. */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/polices/chakra-petch-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url("/polices/chakra-petch-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1. LES COULEURS (5.2) ----------
   ================= UN SEUL THEME : SOMBRE NEON (26/09/2026) =================
   Arbitrage de la Direction du 26/09/2026 : theme SOMBRE NEON « gaming »
   pour les quatre publics (operateur, client, Direction, Manager). Il
   remplace le « clair et tres contraste » du 19/09. Ce qui ne change pas :
   UN SEUL theme, jamais de bascule automatique clair/sombre, et la couleur
   reste une information — un etat se reconnait a un metre sans lire, et
   tout mot tient 4,5 pour 1 sur ce qui est peint dessous.
   Le principe : fond nuit, cartes ardoise, neons en remplissage avec le
   TEXTE SOMBRE dessus (cyan 10,6 ; vert 11,3 ; ambre 10,5 ; rose 5,9 pour 1),
   et les memes neons en texte sur les cartes (tous au-dessus de 5,3).
   ========================================================================= */
:root {
  --police: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  /* L affiche : titres, chiffres, heure. Inter en repli. */
  --police-affiche: "Chakra Petch", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
  /* La darija : une police qui connait l arabe, sur chaque systeme. */
  --police-arabe: "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro",
                  Tahoma, Arial, sans-serif;
  /* La largeur du contenu : bornee et centree sur un grand ecran. */
  --largeur-page: 1200px;
  --marge-page: clamp(14px, 2vw, 32px);

  /* LA NUIT : le fond de tout, et l encre qu on pose sur un neon. */
  --nuit:            #0B0F1A;
  /* LES NEONS : quatre couleurs franches, lisibles en texte sur les cartes
     (au moins 5,3 pour 1) et en fond sous du texte nuit (au moins 5,9). */
  --neon-cyan:       #22D3EE;
  --neon-vert:       #22E38A;
  --neon-ambre:      #FFB020;
  --neon-rose:       #FF4D6D;
  --neon-violet:     #A78BFA;

  /* La couleur de marque : le violet electrique (26/09/2026). En texte sur
     une carte il tient 6,4 pour 1 ; en fond, on ecrit dessus en nuit (7,0). */
  --marque:          var(--neon-violet);
  --marque-sombre:   #6D3BFF;   /* 5,7 pour 1 sous du texte blanc */
  --marque-pale:     #2C2C4C;   /* le violet a 16 % sur la carte */
  /* Le degrade de la maison : cyan vers violet. Filets, barres, monogramme. */
  --degrade-marque:  linear-gradient(90deg, var(--neon-cyan), var(--neon-violet));

  /* Les couleurs d'etat : chacune a TOUJOURS un mot a cote (principe 4).
     Les « -pale » sont la teinte du neon a 10-14 % sur la carte : le neon
     lui-meme s ecrit dessus (vert 7,7 ; rose 5,0 ; ambre 7,2 ; cyan 7,2). */
  --succes:          var(--neon-vert);
  --succes-pale:     #163638;
  --alerte:          var(--neon-rose);
  --alerte-pale:     #2C1E30;
  --attention:       var(--neon-ambre);
  --attention-pale:  #352F29;
  --pause:           #A5B0CC;
  --pause-pale:      #282F42;

  /* LES ETATS D UN POSTE, UNE SEULE FOIS POUR TOUTE L APPLICATION.
     Les couleurs FRANCHES du plan : libre = vert neon, occupe = rose neon,
     pause = ambre, a encaisser = cyan (le seul froid, le seul pointille),
     bloque = rouge profond sous du texte BLANC (6,9), neutre = gris bleute.
     Sur un bandeau neon, le mot s ecrit en nuit (voir --etat-encre). */
  --etat-libre:           var(--neon-vert);
  --etat-libre-pale:      #163638;
  --etat-occupe:          var(--neon-rose);
  --etat-occupe-pale:     #2C1E30;
  --etat-pause:           var(--neon-ambre);
  --etat-pause-pale:      #352F29;
  --etat-encaisser:       var(--neon-cyan);
  --etat-encaisser-pale:  #163446;
  --etat-bloque:          #B3123A;
  --etat-bloque-clair:    #FF6B8A;   /* le bloque en TEXTE ou en contour sur une carte (6,4) */
  --etat-neutre:          #A5B0CC;
  --etat-neutre-pale:     #1B2338;
  /* L encre du mot d etat pose sur un bandeau neon : la nuit. */
  --etat-encre:           var(--nuit);

  /* L encre des dessins du plan (ecrans, manettes, fauteuils) : des traits
     CLAIRS sur la nuit, le reflet de l ecran en neon (currentColor). */
  --dessin-fonce:         #2A3552;   /* le cadre de l ecran */
  --dessin-moyen:         #7E8BAE;   /* les roulettes, le fauteuil */
  --dessin-encre:         #0B0F1A;   /* l ecran eteint, l ombre au sol */
  --dessin-corps:         #9AA5C4;   /* le socle, le dossier du fauteuil */
  --dessin-clair:         #C9D1E8;   /* les pieds du fauteuil */
  --dessin-blanc:         #FFFFFF;   /* les reflets, le filet de ping-pong */
  --dessin-table:         #1E4D5C;   /* la table de ping-pong */
  --dessin-raquette:      #FF4D6D;
  --dessin-manche:        #FFB020;
  --dessin-balle:         #FFFFFF;

  /* Le fond et le texte : la nuit, et un texte presque blanc (15,9). */
  --fond:            #0B0F1A;
  --carte:           #141A2B;
  --surface:         #1B2338;   /* ce qui est releve sur une carte (zebrure, en-tete de tableau) */
  --bord:            #2A3552;
  --bord-fort:       #3C4A6E;
  --texte:           #F2F5FF;
  --texte-doux:      #B4BDD6;   /* 9,2 sur la carte */
  --texte-eteint:    #9AA5C4;   /* 7,1 sur la carte, 6,4 sur la surface */
  --ombre:           0 1px 2px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.35);
  /* DEUX ELEVATIONS, PAS UNE DE PLUS.
     --ombre : ce qui est pose sur la page (cartes, champs de choix).
     --ombre-haute : ce qui flotte au-dessus (fenetres, barre collee en
     bas, case du plan survolee). */
  --ombre-haute:     0 16px 40px -8px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.5);
  /* Les lueurs neon : autour d une case, d un bouton, d une carte. */
  --lueur-cyan:      0 0 18px rgba(34,211,238,.35);
  --lueur-violet:    0 0 18px rgba(167,139,250,.35);
  /* L anneau de focus : net, au cyan de la maison, le meme partout. */
  --anneau:          0 0 0 3px rgba(34,211,238,.40);
  /* Les mouvements : courts, jamais plus de 150 ms. */
  --duree:           .12s;
  /* Le chanfrein : les coins coupes des boutons et des tuiles (arcade). */
  --chanfrein:       10px;
  --forme-chanfrein: polygon(var(--chanfrein) 0, 100% 0, 100% calc(100% - var(--chanfrein)),
                             calc(100% - var(--chanfrein)) 100%, 0 100%, 0 var(--chanfrein));

  /* Les tailles de texte (5.2) — jamais en dessous de 14 px */
  /* L ECHELLE DES TAILLES (23/09/2026) : sept tailles, pas une de plus.
     Il y en avait 26 dans les feuilles. Jamais en dessous de 14 px. */
  --t-montant:  40px;   /* le grand montant */
  --t-chiffre:  32px;   /* le chiffre d une carte de tableau de bord */
  --t-titre:    26px;   /* le titre de l ecran */
  --t-sous-titre: 20px; /* le titre d une section */
  --t-texte:    18px;   /* le texte courant, les boutons */
  --t-petit:    15px;   /* le texte secondaire */
  --t-mini:     14px;   /* les etiquettes, le plancher */
  /* Le montant que le caissier doit demander : un seul, sur un seul ecran. */
  --t-geant:    56px;

  --rayon:      12px;
  --rayon-petit: 8px;
  --rayon-grand: 16px;  /* les fenetres */
  --touche-min: 48px;   /* la taille d'un pouce (principe 2) */
  /* La hauteur d UN champ de saisie, partout, sans exception.
     Avant le 19/09/2026 il y en avait TROIS : 54 px au socle, 48 px
     cote Direction, et 21 px dans l espace client — un champ de
     navigateur jamais habille, sur l ecran que voient 230 clients. */
  --champ-min:  48px;
  /* L epaisseur d un contour : epais, pour qu un etat se distingue sans
     couleur (regle du 19/09 gardee dans le theme sombre du 26/09). */
  --trait:      2px;
  /* La largeur d une colonne qu on lit et qu on remplit : celle du grand
     bouton, et celle de l espace client sur un grand ecran. Un seul
     jeton pour les deux, sinon les deux valeurs finissent par diverger
     et le bouton ne fait plus la largeur de ses champs. */
  --colonne:    520px;
}

/* ================= LE CLAIR EST PARTI, LE SOMBRE EST LE SEUL (26/09/2026) =====
   Le 19/09, la Direction avait ecarte le sombre et retire ses regles ;
   briques.js posait « clair ». Le 26/09, elle a tranche l inverse : le
   theme est SOMBRE NEON, pour tout le monde, et c est le seul. Rien n est
   a tenir en double : le socle ne connait qu un jeu de couleurs, celui
   ci-dessus, et briques.js pose le theme « sombre » une fois pour toutes.
   Aucune regle de bascule selon le systeme, aucun selecteur de theme
   « clair » : les gardes banc-design et banc-lisible-a-un-metre y veillent.
   ========================================================================= */

/* ---------- 2. LA BASE ---------- */
* { box-sizing: border-box; }

/* Un element marque "hidden" est TOUJOURS cache, meme si sa classe
   lui donne un display. Sans cette ligne, un message d'erreur
   s'affiche avant qu'il y ait la moindre erreur. */
[hidden] { display: none !important; }

html { background: var(--fond); }
body {
  margin: 0;
  /* Une seule police : Inter, et celle du systeme en repli (23/09/2026) */
  font-family: var(--police);
  font-size: var(--t-texte);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--texte);
  /* LA SALLE LA NUIT (26/09/2026) : un fond nuit uni (c est lui que les
     gardes mesurent sous le texte), et par-dessus, en CSS seul, deux
     lueurs — violette en haut a gauche, cyan en bas a droite — et une
     grille fine, comme un sol d arcade. Rien n est anime. */
  background-color: var(--fond);
  background-image:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(109,59,255,.22), transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(34,211,238,.14), transparent 70%),
    linear-gradient(rgba(60,74,110,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,74,110,.14) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  background-attachment: fixed, fixed, scroll, scroll;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Les chiffres alignes, pour les montants et les chronos (5.2) */
.ev-chiffres { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Les titres d ecran en police d affiche (arcade), le corps en Inter. */
h1 { font-size: var(--t-titre); margin: 0 0 6px; font-weight: 700; letter-spacing: .01em; line-height: 1.2;
     font-family: var(--police-affiche); }
h2 { font-size: var(--t-texte); margin: 0 0 8px; font-weight: 700; letter-spacing: -.01em; }
p  { margin: 0 0 12px; }
.ev-doux   { color: var(--texte-doux); }
.ev-petit  { font-size: var(--t-petit); }
.ev-mini   { font-size: var(--t-mini); }

/* ---------- 3. LE CADRE D'ECRAN ----------
   Un ecran = une tache (principe 1). Pas de menu.                   */
.ev-ecran {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* PLEINE LARGEUR (decision de Mohammed, 14/09/2026).
     L application prend toute la place disponible : pas de colonne
     centree, pas de vide a droite et a gauche. Le seul retrait est
     une marge de confort, qui grandit avec l ecran sans jamais
     depasser 32 px. */
  /* 23/09/2026 — ET BORNEE. Sur 1 440 px, la pleine largeur mettait
     1 400 px entre un titre et son bouton, et le plan de salle flottait
     au milieu de deux grands vides. Le contenu s arrete a 1 200 px et se
     centre ; sur un PC de caisse ou un telephone, rien ne change. */
  width: 100%;
  max-width: calc(var(--largeur-page) + 2 * var(--marge-page));
  margin-inline: auto;
  padding: 0 var(--marge-page);
}
.ev-entete {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 12px;
  min-height: 60px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--bord);
}
/* Le filet neon sous l en-tete : cyan vers violet, avec sa lueur (26/09/2026). */
.ev-entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--degrade-marque);
  box-shadow: 0 0 10px rgba(34,211,238,.45);
  pointer-events: none;
}
/* Qui est connecte, a droite. Sur un telephone il se TRONQUE proprement
   au lieu de passer sur deux lignes et de pousser le logo. */
.ev-entete > .ev-mini, .ev-entete-qui {
  margin-left: auto;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
/* Le logo, en haut a gauche (5.2). Depuis le 26/09/2026 la decoration
   « gaming » est la charte : monogramme neon, nom en police d affiche. */
.ev-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 10px;
  font-size: var(--t-petit);
  font-weight: 700;
  color: var(--texte-doux);
  letter-spacing: .3px;
}
.ev-logo-pastille {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--marque);
  color: var(--nuit);
  font-size: var(--t-mini);
  font-weight: 800;
  letter-spacing: -.5px;
  display: inline-grid;
  place-items: center;
}
/* Le logo depuis le 23/09/2026 : le monogramme (design/marque.svg) et le
   nom ecrit en toutes lettres, « Virtuel » a la couleur de la maison. */
.ev-logo-marque { width: 28px; height: 28px; flex: none; display: block; }
.ev-logo-nom {
  font-size: 16px; font-weight: 700; letter-spacing: .02em;
  font-family: var(--police-affiche); text-transform: uppercase;
  color: var(--texte); white-space: nowrap;
}
.ev-logo-nom b { font-weight: 700; color: var(--neon-cyan); }
.ev-corps  { flex: 1; padding-bottom: 16px; }
/* Un ecran qui ne pose QU'UNE question centre son contenu : pas de grand
   vide entre le titre et le bouton du bas. */
.ev-corps--centre { display: flex; flex-direction: column; justify-content: center; }
/* Le bouton principal est SEUL, en bas, pleine largeur (principe 2) */
.ev-pied {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--fond) 72%, transparent);
  padding: 12px 0 max(16px, env(safe-area-inset-bottom));
}

/* ---------- 4. BRIQUE : LE BOUTON (3 tailles, 4 etats) ---------- */
.ev-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--touche-min);
  padding: 0 20px;
  border: var(--trait) solid transparent;
  border-radius: var(--rayon);
  font-family: inherit;
  font-size: var(--t-texte);
  font-weight: 700;
  /* 26/09/2026 : un bouton est un NEON, cyan, et le mot s ecrit dessus en
     nuit (10,6 pour 1). Les coins sont chanfreines (arcade). */
  color: var(--nuit);
  background: var(--neon-cyan);
  clip-path: var(--forme-chanfrein);
  cursor: pointer;
  user-select: none;
  /* --- 19/09/2026 : UN BOUTON NE SE SOULIGNE PAS ---
     La classe etait propre sur un <button>, mais sur un <a> le navigateur
     gardait son soulignement : « Fin de service », « Retour au tableau »,
     « Ma soiree… » et « Bilan par operateur » sortaient en liens bruts
     soulignes DANS un cadre de bouton — sur cinq ecrans, et pour les
     quatre publics. Une regle, ici, et c est fini partout. */
  text-decoration: none;
  transition: background-color var(--duree), border-color var(--duree), color var(--duree),
              box-shadow var(--duree), transform .06s, opacity var(--duree);
}
/* Les 3 tailles, pas une de plus */
/* --- 19/09/2026 : LE GRAND BOUTON AVAIT UNE LARGEUR LIBRE ---
   Sur 1 440 px il se dessinait sur 1 394 px de large (vu sur 07-journee) :
   une barre d un bout a l autre de la table, ou le doigt ne sait plus ou
   viser. On lui donne la largeur d une main, et on le centre. Le pied
   d ecran, lui, garde son bouton pleine largeur : il a sa propre regle. */
/* 23/09/2026 — UNE SEULE ECHELLE : principal (grand), secondaire (moyen),
   discret (petit). Le grand passe de 64 a 60 px et de 22 a 20 px : il
   reste le plus gros de chaque ecran, sans ecraser le reste. */
.ev-bouton--grand  { min-height: 60px; font-size: var(--t-sous-titre); font-weight: 700;
                     display: flex; max-width: var(--colonne); margin-inline: auto; }
/* SAUF le bouton unique du pied d ecran. C est le modele de
   l application — « un bouton dans le pouce », pointage compris — et il
   prend TOUTE la largeur, comme il l a toujours fait. Le plafond
   ci-dessus ne vise que les grands boutons poses DANS la page, ceux qui
   se dessinaient sur 1 394 px au milieu d un tableau de bord. */
/* 23/09/2026 : sur un telephone il fait toujours toute la largeur (la
   colonne de 520 px est plus large que l ecran) ; sur un PC il ne devient
   plus une barre de 1 400 px, il se centre a la largeur d une main. */
.ev-pied .ev-bouton--grand { max-width: var(--colonne); }
.ev-bouton--moyen  { min-height: var(--touche-min); max-width: var(--colonne); }
/* Un bouton seul au milieu d un ecran se centre. */
.ev-bouton--centre { display: flex; margin-inline: auto; }
.ev-bouton--petit  { min-height: var(--touche-min); width: auto; font-size: var(--t-petit); padding: 0 14px; }

/* Les 4 etats */
.ev-bouton:hover:not(:disabled)  { filter: brightness(1.1); }                 /* 1. survol */
.ev-bouton:active:not(:disabled) { transform: translateY(1px); }               /* 2. pression */
.ev-bouton:disabled,
.ev-bouton[aria-disabled="true"] {                                             /* 3. eteint */
  /* Un fond clair et un bord : le mot reste lisible (4,9 pour 1), et le
     bouton se lit quand meme « eteint » d un coup d oeil. */
  background: var(--fond);
  border-color: var(--bord);
  color: var(--texte-eteint);
  cursor: not-allowed;
}
.ev-bouton[data-encours="oui"] {                                               /* 4. en cours (5.5) */
  background: var(--marque-sombre);
  color: #fff;
  cursor: progress;
  pointer-events: none;
}
.ev-bouton[data-encours="oui"]::before {
  content: "";
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ev-tourne .7s linear infinite;
}
@keyframes ev-tourne { to { transform: rotate(360deg); } }

/* Les variantes de couleur : le mot reste en nuit sur le neon (vert 11,3 ; rose 5,9). */
.ev-bouton--vert   { background: var(--succes); }
.ev-bouton--vert:hover:not(:disabled) { filter: brightness(1.08); }
.ev-bouton--rouge  { background: var(--alerte); }
.ev-bouton--rouge:hover:not(:disabled) { filter: brightness(1.08); }
.ev-bouton--neutre {
  background: var(--carte);
  color: var(--texte);
  border-color: var(--bord-fort);
}
.ev-bouton--neutre:hover:not(:disabled) { background: var(--surface); border-color: var(--neon-cyan); filter: none; }
.ev-bouton--fantome {
  background: transparent;
  color: var(--texte-doux);
  border-color: transparent;
  font-weight: 600;
}
.ev-bouton--fantome:hover:not(:disabled) { background: var(--marque-pale); color: var(--marque); filter: none; }

/* ---------- 5. BRIQUE : LA CARTE DE POSTE (5.2) ---------- */
.ev-postes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}
.ev-poste {
  position: relative;
  text-align: left;
  background: var(--carte);
  border: var(--trait) solid var(--bord);
  border-left: 6px solid var(--bord-fort);
  border-radius: var(--rayon);
  padding: 12px 14px;
  min-height: 116px;
  box-shadow: var(--ombre);
  cursor: pointer;
  font-family: inherit;
  color: var(--texte);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ev-poste-nom     { font-size: var(--t-texte); font-weight: 700; }
.ev-poste-type    { font-size: var(--t-mini); color: var(--texte-doux); }
.ev-poste-bas     { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ev-poste-chrono  { font-size: var(--t-sous-titre); font-weight: 700; }
.ev-poste-montant { font-size: var(--t-sous-titre); font-weight: 700; }

/* Chaque etat a une COULEUR ET UN MOT (principe 4) */
.ev-poste[data-etat="libre"]      { border-left-color: var(--succes); }
.ev-poste[data-etat="occupe"]     { border-left-color: var(--marque); }
.ev-poste[data-etat="pause"]      { border-left-color: var(--attention); }
.ev-poste[data-etat="encaisser"]  { border-left-color: var(--alerte); animation: ev-respire 2.4s ease-in-out infinite; }
.ev-poste[data-etat="horsservice"]{
  border-left-color: var(--bord-fort);
  color: var(--texte-eteint);
  cursor: not-allowed;
  background-image: repeating-linear-gradient(45deg,
    transparent 0 9px, var(--pause-pale) 9px 18px);
}
/* "rouge qui clignote lentement" (5.2) — lent, jamais agressif */
@keyframes ev-respire {
  0%,100% { box-shadow: var(--ombre); }
  50%     { box-shadow: 0 0 0 3px var(--alerte-pale), var(--ombre); }
}
@media (prefers-reduced-motion: reduce) {
  .ev-poste[data-etat="encaisser"] { animation: none; box-shadow: 0 0 0 3px var(--alerte-pale); }
}

/* L'etiquette d'etat : le MOT, toujours present */
.ev-etat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-mini);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  align-self: flex-start;
}
.ev-etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ev-etat--libre      { color: var(--succes);    background: var(--succes-pale); }
.ev-etat--occupe     { color: var(--marque);    background: var(--marque-pale); }
.ev-etat--pause      { color: var(--attention); background: var(--attention-pale); }
.ev-etat--encaisser  { color: var(--alerte);    background: var(--alerte-pale); }
.ev-etat--horsservice{ color: var(--pause);     background: var(--pause-pale); }

/* ---------- 6. BRIQUE : LE GRAND MONTANT (principe 3) ---------- */
.ev-montant {
  font-family: var(--police-affiche);
  font-size: var(--t-montant);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.ev-montant--geant  { font-size: var(--t-geant); }
.ev-montant--vert   { color: var(--succes); }
.ev-montant--rouge  { color: var(--alerte); }
.ev-montant-bloc {
  background: var(--carte);
  border: var(--trait) solid var(--bord);
  border-radius: var(--rayon);
  padding: 16px 18px;
  box-shadow: var(--ombre);
}
.ev-montant-titre { font-size: var(--t-mini); color: var(--texte-doux); font-weight: 700;
                    text-transform: uppercase; letter-spacing: .6px; margin-bottom: 2px; }

/* ---------- 7. BRIQUE : LE CHRONO ---------- */
.ev-chrono {
  font-family: var(--police-affiche);
  font-size: var(--t-chiffre);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}
.ev-chrono--pause { color: var(--attention); }

/* ---------- 8. BRIQUE : LA BARRE D'ETAPES ("Etape 2 sur 5") ---------- */
.ev-etapes { margin: 4px 0 18px; }
.ev-etapes-texte {
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--texte-doux);
  margin-bottom: 6px;
  display: flex; justify-content: space-between; gap: 12px;
}
.ev-etapes-barre { display: flex; gap: 4px; }
.ev-etapes-barre span {
  flex: 1; height: 6px; border-radius: 3px; background: var(--bord);
}
.ev-etapes-barre span[data-faite="oui"] { background: var(--marque); }

/* ---------- 9. BRIQUE : LE CLAVIER DE BILLETS ET PIECES ----------
   Zero texte a lire pour encaisser (principe 5) : on tape sur des images. */
.ev-clavier { display: grid; gap: 10px; }
.ev-clavier-groupe { font-size: var(--t-mini); font-weight: 700; color: var(--texte-doux);
                     text-transform: uppercase; letter-spacing: .6px; margin: 6px 0 -2px; }
.ev-clavier-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }

.ev-coupure {
  position: relative;
  min-height: 72px;
  border: var(--trait) solid var(--bord-fort);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  color: var(--texte);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 6px;
  box-shadow: var(--ombre);
}
.ev-coupure:active { transform: translateY(1px); }
.ev-coupure-valeur { font-size: var(--t-sous-titre); font-weight: 700; font-variant-numeric: tabular-nums;
                     font-family: var(--police-affiche); }
.ev-coupure-unite  { font-size: var(--t-mini); font-weight: 700; color: var(--texte-doux); letter-spacing: .5px; }
/* Un billet : un rectangle colore. Une piece : un rond. Reconnaissable sans lire. */
.ev-coupure--billet { border-top: 5px solid var(--ev-teinte, var(--marque)); }
.ev-coupure--piece  { border-radius: 999px; min-height: 80px; border-top: none;
                      box-shadow: inset 0 0 0 3px var(--ev-teinte, var(--bord-fort)), var(--ombre); }
/* Le compteur : combien de fois on a tape dessus */
.ev-coupure-compte {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--marque);
  color: var(--nuit);
  font-size: var(--t-mini);
  font-weight: 800;
  display: none;
  align-items: center; justify-content: center;
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.ev-coupure[data-compte]:not([data-compte="0"]) .ev-coupure-compte { display: flex; }
.ev-coupure[data-compte]:not([data-compte="0"]) { border-color: var(--marque); }

.ev-clavier-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 12px 14px; margin-top: 4px;
  background: var(--carte); border: var(--trait) solid var(--bord); border-radius: var(--rayon);
}

/* ---------- 10. BRIQUE : LA FICHE D'ALERTE ---------- */
.ev-alerte {
  display: flex;
  gap: 12px;
  background: var(--carte);
  border: var(--trait) solid var(--bord);
  border-left: 6px solid var(--alerte);
  border-radius: var(--rayon);
  padding: 14px;
  box-shadow: var(--ombre);
}
.ev-alerte--attention { border-left-color: var(--attention); }
.ev-alerte--info      { border-left-color: var(--marque); }
.ev-alerte--succes    { border-left-color: var(--succes); }
.ev-alerte-icone {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center; font-size: var(--t-texte); font-weight: 800;
  background: var(--alerte-pale); color: var(--alerte);
}
.ev-alerte--attention .ev-alerte-icone { background: var(--attention-pale); color: var(--attention); }
.ev-alerte--info      .ev-alerte-icone { background: var(--marque-pale);    color: var(--marque); }
.ev-alerte--succes    .ev-alerte-icone { background: var(--succes-pale);    color: var(--succes); }
.ev-alerte-titre { font-weight: 700; margin-bottom: 2px; }
.ev-alerte-quoifaire { font-size: var(--t-petit); color: var(--texte-doux); }
.ev-alerte-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- 11. BRIQUE : LA FENETRE DE CONFIRMATION ----------
   Une phrase, deux boutons (5.4 et 5.5).                            */
.ev-voile {
  position: fixed; inset: 0;
  background: rgba(4,6,12,.74);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  z-index: 60;
}
.ev-voile[data-ouvert="oui"] { display: flex; }
@media (min-width: 560px) { .ev-voile { align-items: center; } }
.ev-fenetre {
  background: var(--carte);
  border: 1px solid var(--bord-fort);
  border-radius: var(--rayon-grand);
  padding: 22px 20px 18px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--ombre-haute), var(--lueur-violet);
}
.ev-fenetre-phrase { font-size: var(--t-sous-titre); font-weight: 700; margin-bottom: 18px; line-height: 1.35; }
.ev-fenetre-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- 12. BRIQUE : LE BANDEAU "CONNEXION PERDUE" (5.5) ---------- */
.ev-bandeau {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  background: var(--alerte);
  color: var(--nuit);
  font-size: var(--t-petit);
  font-weight: 700;
  text-align: center;
  padding: 10px 16px;
  display: none;
  box-shadow: var(--ombre-haute);
}
.ev-bandeau[data-visible="oui"] { display: block; }
.ev-bandeau--attention { background: var(--attention); }

/* ---------- 13. BRIQUE : L'ENREGISTREUR AUDIO (2.15) ---------- */
.ev-audio {
  background: var(--carte);
  border: var(--trait) solid var(--bord);
  border-radius: var(--rayon);
  padding: 14px;
  box-shadow: var(--ombre);
}
.ev-audio-ligne { display: flex; align-items: center; gap: 12px; }
.ev-audio-micro {
  flex: 0 0 auto;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: none;
  background: var(--alerte);
  color: var(--nuit);
  font-size: var(--t-sous-titre);
  cursor: pointer;
  display: grid; place-items: center;
}
.ev-audio-micro[data-enregistre="oui"] { animation: ev-pulse 1.4s ease-in-out infinite; }
@keyframes ev-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,77,109,.5); }
  50%     { box-shadow: 0 0 0 12px rgba(255,77,109,0); }
}
.ev-audio-duree { font-size: var(--t-sous-titre); font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-audio-onde { flex: 1; display: flex; align-items: center; gap: 3px; height: 30px; }
.ev-audio-onde i {
  flex: 1; background: var(--bord-fort); border-radius: 2px; height: 20%;
  transition: height .12s;
}

/* ---------- 14. PETITS ASSEMBLAGES REUTILISES ---------- */
.ev-carte {
  background: var(--carte);
  border: var(--trait) solid var(--bord);
  border-radius: var(--rayon);
  padding: 16px;
  box-shadow: var(--ombre);
}
/* Les fenetres, les fiches et les cartes de chiffres portent leur titre en affiche. */
.ev-fenetre h2, .ev-fenetre-phrase { font-family: var(--police-affiche); letter-spacing: .01em; }
/* ---------- LES CHAMPS DE SAISIE ----------
   19/09/2026 — LE SOCLE N HABILLAIT QUE LES CHAMPS RANGES DANS UN
   `.ev-champ`. Un champ pose tout seul restait un champ de navigateur nu :
   dans l espace client, les trois champs faisaient 177 x 21 px, sous un
   bouton « Entrer » de 362 x 64 — la seule violation de la regle des
   48 px de toute l application, et elle tombait sur l ecran que voient
   230 clients.

   On habille donc l ELEMENT, pas seulement son emballage. La regle
   ci-dessous ne porte que sur des noms de balises : la moindre classe
   deja posee ailleurs (la barre de la Direction, l encaissement, la
   justification) reste plus forte et garde la main. Rien ne bouge la ou
   quelque chose etait deja decide ; tout est repare la ou rien ne
   l etait — y compris sur les ecrans qui n existent pas encore. */
input, select, textarea {
  font-family: inherit;
  font-size: var(--t-texte);
  color: var(--texte);
  color-scheme: dark;
  background: var(--fond);
  border: var(--trait) solid var(--bord-fort);
  border-radius: var(--rayon-petit);
  min-height: var(--champ-min);
  padding: 10px 14px;
  max-width: 100%;
}
input[type="checkbox"], input[type="radio"], input[type="range"] {
  min-height: 0; padding: 0; border: 0; background: none;
}
/* 23/09/2026 (lot 5) : le champ actif a un anneau NET, a la couleur de la
   maison. L ancien contour bleu pale (#E8EEFE) ne se voyait pas sur le
   blanc. Le contour transparent garde un repere en mode contraste eleve. */
input:focus, select:focus, textarea:focus {
  outline: 2px solid transparent;
  border-color: var(--neon-cyan);
  box-shadow: var(--anneau);
}
input, select, textarea { transition: border-color var(--duree), box-shadow var(--duree); }

.ev-champ-nom { display: block; font-size: var(--t-petit); font-weight: 700;
                color: var(--texte-doux); margin-bottom: 6px; }

/* `.ev-champ` sert des DEUX facons : autour du champ, ou sur le champ
   lui-meme (c est ce que fait l espace client). Les deux marchent. */
.ev-champ { display: block; margin-bottom: 14px; }
.ev-champ input, .ev-champ textarea, .ev-champ select,
input.ev-champ, textarea.ev-champ, select.ev-champ {
  width: 100%;
  min-height: var(--champ-min);
  padding: 10px 14px;
  font-family: inherit;
  font-size: var(--t-texte);
  color: var(--texte);
  background: var(--fond);
  border: var(--trait) solid var(--bord-fort);
  border-radius: var(--rayon-petit);
}
/* L invite d un champ vide : lisible (7,8 pour 1 sur la nuit), jamais le gris du navigateur. */
input::placeholder, textarea::placeholder { color: var(--texte-eteint); opacity: 1; }
.ev-champ input:focus, .ev-champ textarea:focus,
input.ev-champ:focus, textarea.ev-champ:focus, select.ev-champ:focus {
  outline: 2px solid transparent;
  border-color: var(--neon-cyan);
  box-shadow: var(--anneau);
}
/* 23/09/2026 : une carte de choix ne s etire plus sur 1 400 px. */
.ev-choix {
  max-width: 760px;
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  min-height: 84px; padding: 14px 16px;
  background: var(--carte);
  border: var(--trait) solid var(--bord-fort);
  border-radius: var(--rayon);
  font-family: inherit; font-size: var(--t-texte); color: var(--texte);
  cursor: pointer; box-shadow: var(--ombre); margin-bottom: 12px;
  transition: border-color var(--duree), background-color var(--duree), transform .06s;
}
.ev-choix:hover  { border-color: var(--marque); background: var(--marque-pale); }
.ev-choix:active:not(:disabled) { transform: translateY(1px); }
.ev-choix:disabled { opacity: .55; cursor: not-allowed; background: var(--fond); }
.ev-choix-icone {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; font-size: var(--t-sous-titre); font-weight: 800;
  background: var(--marque-pale); color: var(--marque);
}
.ev-choix-icone svg { width: 26px; height: 26px; stroke: currentColor;
  stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ev-choix-titre { font-weight: 700; }
.ev-choix-sous  { font-size: var(--t-petit); color: var(--texte-doux); }
.ev-choix-fleche { margin-left: auto; color: var(--texte-eteint); font-size: var(--t-sous-titre); }

.ev-lignes { display: grid; gap: 1px; background: var(--bord); border: var(--trait) solid var(--bord);
             border-radius: var(--rayon); overflow: hidden; }
.ev-ligne  { display: flex; justify-content: space-between; align-items: center;
             gap: 12px; padding: 13px 15px; background: var(--carte); }
.ev-ligne strong { font-variant-numeric: tabular-nums; }

/* --- LA JUSTIFICATION : une phrase, ou un message vocal (§ 2.15) --- */
.ev-justif { margin-top: 14px; }
.ev-justif textarea {
  width: 100%; min-height: 76px; font-family: inherit; font-size: var(--t-texte);
  padding: 10px 12px; border-radius: var(--rayon); border: var(--trait) solid var(--bord);
  background: var(--fond); color: var(--texte); resize: vertical;
}
.ev-justif-ou { text-align: center; color: var(--texte-doux); font-size: var(--t-mini);
                margin: 10px 0 8px; }

.ev-pile  { display: grid; gap: 12px; }
.ev-pile--serree { gap: 8px; }
.ev-rangee { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- 15. TELEPHONE : tout doit tenir en largeur ---------- */
@media (max-width: 420px) {
  :root { --t-montant: 36px; --t-titre: 24px; --t-chiffre: 28px; --t-geant: 46px; }
  .ev-montant--geant { font-size: var(--t-geant); }
  .ev-clavier-grille { grid-template-columns: repeat(3, 1fr); }
  .ev-postes { grid-template-columns: repeat(2, 1fr); }
}

/* =================================================================
   14. LE GRAND ECRAN — COMPOSER, PAS ETIRER
   Decision de Mohammed du 14/09/2026 : l application prend toute la
   largeur disponible, pas de colonne centree.

   Mais « prendre la place » n est pas « etirer ». Sur 1 920 px :
     - un champ « Ton nom » de 1 850 px ne sert personne ;
     - la barre « Total tape » mettait 1 800 px entre l etiquette et le
       chiffre : l oeil devait traverser la table pour les relier ;
     - les coupures restaient serrees dans un coin, parce que auto-fill
       fabrique des colonnes vides au lieu de laisser grandir les
       boutons.
   Sur un grand ecran, on COMPOSE en deux colonnes. Le contenu remplit
   l ecran, et l oeil ne voyage plus.
   ================================================================= */
@media (min-width: 1100px) {

  /* --- LE CLAVIER DE COUPURES : les billets a gauche, le total a droite,
         a hauteur des yeux, et qui ne bouge pas quand on fait defiler. --- */
  /* La carte du total est SORTIE DU FLUX.
     Placee dans une deuxieme colonne de grille, elle s etendait sur toutes
     les lignes — et sa hauteur deteignait sur la ligne du titre
     « BILLETS », qui se creusait d une centaine de pixels. On lui reserve
     donc sa place par un retrait a droite, et on l y pose. */
  .ev-clavier {
    position: relative;
    padding-right: calc(clamp(260px, 20vw, 360px) + 28px);
  }

  /* auto-fit, et non auto-fill : les colonnes vides disparaissent, et les
     coupures grandissent — jusqu a 148 px, la taille d un pouce, pas plus. */
  .ev-clavier-grille {
    grid-template-columns: repeat(auto-fit, minmax(104px, 148px));
    justify-content: start;
  }

  .ev-clavier-total {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(260px, 20vw, 360px);
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 22px 24px;
    margin-top: 0;
  }
  .ev-clavier-total .ev-montant { font-size: 54px; line-height: 1.05; }

  /* --- UN ECRAN QUI NE POSE QU UNE QUESTION.
         La marque ou l horloge tient la gauche, la carte tient la droite,
         a une largeur ou l on peut vraiment ecrire. --- */
  /* Un ecran qui ne pose qu une question.
     Premiere version : la marque tenait toute la moitie gauche et la carte
     etait collee au bord droit — deux blocs qui se tournaient le dos, avec
     un vide au milieu. Mohammed l a fait remarquer deux fois le jour de la
     mise en service.
     Maintenant les deux se tiennent : un bloc unique, centre dans l ecran,
     la marque a gauche de la carte et non a l autre bout de la table. */
  .ev-corps--centre {
    display: grid;
    grid-template-columns: auto minmax(360px, 520px);
    align-content: center;
    justify-content: center;
    align-items: center;
    column-gap: clamp(32px, 4vw, 72px);
  }
  .ev-corps--centre > * { grid-column: 2; }
  .ev-corps--centre > .cx-marque,
  .ev-corps--centre > .pt-heure {
    grid-column: 1;
    grid-row: 1 / -1;
    justify-self: end;
    text-align: right;
  }
  /* Le pied se range sous la carte, a la meme largeur qu elle. */
  .ev-corps--centre ~ .ev-pied {
    display: grid;
    grid-template-columns: auto minmax(360px, 520px);
    justify-content: center;
    column-gap: clamp(32px, 4vw, 72px);
  }
  .ev-corps--centre ~ .ev-pied > * { grid-column: 2; }
  .ev-corps--centre ~ .ev-pied .ev-bouton { max-width: none; }


  /* --- LES DEUX CLAVIERS DE L ENCAISSEMENT.
         Chacun a deja sa colonne : on leur redonne un total lisible,
         juste sous leurs coupures, sans colonne de droite. --- */
  .ev-deux-claviers .ev-clavier { padding-right: 0; }
  .ev-deux-claviers .ev-clavier-total {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    min-height: 0;
    padding: 14px 18px;
    margin-top: 4px;
  }
  .ev-deux-claviers .ev-clavier-total .ev-montant { font-size: var(--t-montant); }
  .ev-deux-claviers .ev-clavier-grille {
    grid-template-columns: repeat(auto-fit, minmax(96px, 132px));
  }
}

/* ---------- L ETAT VIDE (23/09/2026) ----------
   Quand il n y a rien a montrer — un dossier introuvable, une page qui
   n existe pas — on le DIT, au centre, avec une icone et la sortie.
   Jamais des cartes vides remplies de « — ». */
.ev-vide {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; max-width: 520px; margin: 32px auto; padding: 32px 24px;
  background: var(--carte); border: var(--trait) solid var(--bord);
  border-radius: var(--rayon);
}
.ev-vide h1, .ev-vide h2 { margin: 4px 0 0; font-size: var(--t-titre); }
.ev-vide p { margin: 0; max-width: 42ch; }
.ev-vide .ev-bouton { margin-top: 12px; }
.ev-vide-icone {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--marque-pale); color: var(--marque);
}
.ev-vide-icone svg { width: 28px; height: 28px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ev-vide-code {
  font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--marque);
}
.ev-vide-page { display: flex; flex-direction: column; justify-content: center; }

/* ---------- LA PORTE DU CLIENT, sur l ecran du personnel ----------
   Discrete : ce n est pas la porte principale de cet ecran-la. Mais
   presente, parce qu un client qui arrive sur vrespace.com n a aucune
   autre facon de trouver sa page. */
.cx-client {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 16px; padding: 14px 16px;
  min-height: var(--touche-min);
  justify-content: center;
  border: 1px dashed var(--bord-fort); border-radius: var(--rayon);
  color: var(--texte); text-decoration: none;
}
.cx-client:hover { border-color: var(--marque); border-style: solid; }
.cx-client-fort { font-weight: 700; font-size: var(--t-petit); }
.cx-client-doux { color: var(--texte-doux); font-size: var(--t-mini); }

/* =====================================================================
   LA DARIJA — remise le 19/09/2026.

   Regle de la Direction du 12/09/2026 : « quand un bouton s eteint, une
   phrase dit le geste suivant, en francais ET en darija ». La V1 en
   portait 124 passages ; la V2 n en avait plus un seul caractere. Un
   operateur non francophone n avait plus une phrase lisible.

   Le vocabulaire vient de la V1 (interface/js/app.js) : on ne le
   reinvente pas. الكاس = la caisse, البوانتاج = le pointage,
   تسالا الشيفت = la fin de service, خلّص = paie/encaisse, عيّط = appelle.

   Comment ca se pose : la phrase arabe est ECRITE dans l ecran, a cote
   de la francaise. Pas de table de traduction, pas de fichier de
   langue, rien qui puisse se desynchroniser — si la phrase francaise
   change, sa jumelle est juste en dessous, sous les yeux.

   Taille : 15 px minimum. Le garde du design refuse tout texte sous
   14 px, et une phrase qu on ne lit pas ne sert a rien.
   ===================================================================== */
.ev-dj {
  display: block;
  direction: rtl;
  font-size: var(--t-petit);
  font-family: var(--police-arabe);
  line-height: 1.5;
  font-weight: 600;
  opacity: 0.92;
  margin-top: 4px;
}
/* Dans un bouton : la jumelle vit SOUS le mot francais, dans la meme
   zone tapable. Le bouton grandit, il ne se coupe pas en deux. */
.ev-bouton .ev-dj { margin-top: 2px; font-weight: 600; }
.ev-bouton:has(.ev-dj) { flex-direction: column; gap: 2px; padding-block: 8px; }

/* =================================================================
   LA MISE EN PAGE COMMUNE (23/09/2026)
   ================================================================= */
/* Un ecran qui se lit comme une liste d etapes (fin de service, passation,
   choix du poste) : une colonne de lecture, pas toute la table. */
.ev-corps--etroit { width: 100%; max-width: 760px; margin-inline: auto; }
/* Un titre de section, et l espace qui le separe de la precedente. */
.ev-section { margin-top: 28px !important; }
.ev-section-titre { font-size: var(--t-sous-titre); font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; }
/* Les petites marges qui s ecrivaient a la main dans les ecrans. */
.ev-mt-4  { margin-top: 4px !important; }
.ev-mt-8  { margin-top: 8px !important; }
.ev-mt-12 { margin-top: 12px !important; }
.ev-mt-16 { margin-top: 16px !important; }
.ev-mb-12 { margin-bottom: 12px !important; }
.ev-mb-16 { margin-bottom: 16px !important; }
/* Le bouton discret s aligne sur le texte, pas sur son propre cadre. */
.ev-rangee > .ev-bouton--fantome:first-child { margin-left: -14px; }

/* =================================================================
   LA FINITION (23/09/2026, lot 5)
   ================================================================= */

/* ---------- LE FOCUS AU CLAVIER ----------
   Tout ce qui se tape au clavier montre ou il en est : un anneau net, a
   la couleur de la maison, decolle de 2 px pour se voir aussi sur un
   bouton bleu. Seulement au clavier (:focus-visible) : un doigt ou une
   souris ne laissent pas d anneau derriere eux. */
:where(button, a, summary, [tabindex], .ev-bouton, .ev-choix, .ev-coupure,
       .ev-cb-client, .ev-cible, .ev-poste):focus-visible {
  outline: 3px solid var(--marque);
  outline-offset: 2px;
}
:where(button, a, [tabindex]):focus:not(:focus-visible) { outline: none; }
/* Le chanfrein (clip-path) couperait un anneau exterieur : sur un bouton,
   le focus clavier est un double anneau INTERIEUR, nuit puis violet. */
.ev-bouton:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--nuit), inset 0 0 0 6px var(--marque);
}

/* ---------- LES FENETRES (fiche d un poste, encaissement, cashback) ----------
   Ces regles vivaient dans salle.css, que l ecran d encaissement ne charge
   pas : ses cinq fenetres (« C est qui ? », remise, cashback, arret a
   0 DH, « Appelle Khalid ») s ouvraient sans titre a la bonne taille,
   sans marge et avec des boutons colles. Elles sont ici, pour tous. */
.ev-fenetre.ev-fiche { text-align: left; }
.ev-fenetre h2 { margin: 0 0 4px; font-size: var(--t-titre); line-height: 1.2; }
/* Pas de gris ici : c est souvent la seule phrase qui dit ce qui va se passer. */
.ev-fiche-sous { color: var(--texte); font-size: var(--t-petit); margin-bottom: 16px; }
/* La phrase a lire absolument : pas de gris, taille du texte courant. */
.ev-fiche-sous--fort { color: var(--texte); font-size: var(--t-texte); }
.ev-fiche-mot { font-size: var(--t-sous-titre); font-weight: 600; line-height: 1.4; margin: 12px 0 8px; }
.ev-fiche-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; }
.ev-fiche-actions .ev-bouton { width: 100%; max-width: none; }
/* Une fenetre plus haute que l ecran du telephone defile DANS le voile. */
.ev-voile { overflow-y: auto; }
.ev-fenetre { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* ---------- CE QUI SE CHARGE ----------
   Plus de « Un instant… » nu : un indicateur sobre, qui tourne, et la
   meme phrase a cote. En version « bloc » il tient la place de la liste
   qui arrive, pour que la page ne saute pas quand elle arrive. */
.ev-charge {
  display: flex; align-items: center; gap: 10px;
  color: var(--texte-doux); font-size: var(--t-petit);
}
.ev-charge::before {
  content: ""; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--bord); border-top-color: var(--marque);
  animation: ev-tourne .8s linear infinite;
}
.ev-charge--bloc {
  min-height: 64px; padding: 16px;
  background: var(--carte); border: var(--trait) dashed var(--bord);
  border-radius: var(--rayon);
}
td > .ev-charge, td > .ev-rien { justify-content: center; }

/* ---------- RIEN A MONTRER ----------
   Une liste vide le DIT, avec une icone et une phrase — jamais une
   ligne grise orpheline qu on prend pour une erreur. */
.ev-rien {
  display: flex; align-items: center; gap: 10px;
  color: var(--texte-doux); font-size: var(--t-petit);
}
.ev-rien::before {
  content: ""; flex: none; width: 22px; height: 22px;
  background: var(--texte-eteint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 3h5L16 13h5'/%3E%3Cpath d='M5.5 5h13L21 13v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 3h5L16 13h5'/%3E%3Cpath d='M5.5 5h13L21 13v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ev-rien--bloc {
  min-height: 64px; padding: 16px;
  background: var(--carte); border: var(--trait) dashed var(--bord);
  border-radius: var(--rayon);
}

/* ---------- LES PETITS REGLAGES QUI S ECRIVAIENT A LA MAIN ----------
   Ils vivaient en attribut style= dans les ecrans (33 au 23/09). Une
   classe, une seule valeur, sur la grille de 4 px de la maison. */
.ev-centre      { text-align: center; }
.ev-m-0         { margin: 0 !important; }
.ev-mb-0        { margin-bottom: 0 !important; }
.ev-mb-8        { margin-bottom: 8px !important; }
.ev-mt-24       { margin-top: 24px !important; }
.ev-mb-24       { margin-bottom: 24px !important; }
.ev-ml-auto     { margin-left: auto !important; }
.ev-ml-8        { margin-left: 8px !important; }
.ev-mr-8        { margin-right: 8px !important; }
.ev-sous-titre  { margin: -2px 0 16px; }
.ev-sous-titre:empty { display: none; }
.ev-flex-1      { flex: 1 1 auto; min-width: 0; }
.ev-pleine-largeur { width: 100%; }
.ev-rangee--ecartee { justify-content: space-between; }
.ev-rangee--centre  { justify-content: center; }
.ev-texte-succes { color: var(--succes); }
.ev-taille-texte { font-size: var(--t-texte); }
/* Les degrades partages par les dessins du plan : declares une fois dans
   la page, jamais dessines. */
.ev-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Un choix retenu dans une liste (le collegue a qui on passe la main). */
.ev-choisi { outline: 3px solid var(--marque) !important; outline-offset: 2px; }

/* ---------- LE MOUVEMENT, POUR CEUX QUI N EN VEULENT PAS ----------
   Le systeme de la personne demande moins de mouvement : plus de
   transitions, plus de battement du micro, un indicateur de chargement
   qui ralentit au lieu de tourner vite. Les etats du plan ont deja leur
   propre regle (salle.css) : ils restent lisibles, immobiles. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; scroll-behavior: auto !important; }
  .ev-audio-micro[data-enregistre="oui"] { animation: none; box-shadow: 0 0 0 4px var(--alerte-pale); }
  .ev-charge::before, .ev-bouton[data-encours="oui"]::before { animation-duration: 2.4s; }
  .ev-bouton:active:not(:disabled), .ev-choix:active:not(:disabled), .ev-coupure:active { transform: none; }
}
/* Dans une fenetre, un bouton suit la largeur de ses champs : la borne de
   520 px le laissait plus court que le champ juste au-dessus (vu sur la
   fenetre « Client et cashback » du PC de caisse). */
.ev-fenetre .ev-bouton:not(.ev-bouton--petit) { max-width: none; }