/* ==========================================================================
   BlokEval - COMPOSANTS DU NOYAU (R2)

   Chargee APRES style.css. La declaration ci-dessous fixe l'ordre des couches : ce qui
   est ecrit ici l'emporte sur la feuille applicative, sans avoir a surenchérir en
   specificite. C'est ce qui evite la spirale des « !important » et le retour des
   conflits corriges en R0.

   Aucune couleur en dur : tout vient de tokens.css. Le theme sombre et les densites
   s'appliquent donc a ces composants sans une ligne supplementaire.
   ========================================================================== */
@layer applicatif, composants;

@layer composants {

/* ==========================================================================
   TOASTS
   Empiles en bas au centre, le plus recent en bas. La zone porte aria-live : le
   lecteur d'ecran annonce le message, ce qui n'etait pas le cas auparavant.
   ========================================================================== */
.toasts{position:fixed;left:50%;bottom:var(--e5);transform:translateX(-50%);
  z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--e2);
  width:min(560px, calc(100vw - 32px));pointer-events:none}

.toast-item{display:flex;align-items:flex-start;gap:var(--e3);
  background:var(--surface);border:1px solid var(--filet);border-left:3px solid var(--texte-3);
  border-radius:var(--r);padding:var(--e3) var(--e4);box-shadow:var(--sh-2);
  font-size:var(--t-13);line-height:1.5;color:var(--texte);pointer-events:auto;
  opacity:0;transform:translateY(10px);transition:opacity .18s ease, transform .18s ease}
.toast-item.entree{opacity:1;transform:none}
.toast-item.sortie{opacity:0;transform:translateY(6px)}

.toast-ico{flex:none;width:19px;height:19px;margin-top:1px}
.toast-ico svg{width:19px;height:19px;display:block}
.toast-txt{flex:1;min-width:0}
.toast-txt b{display:block;margin-bottom:1px;color:var(--texte)}
.toast-act{flex:none;background:none;border:0;padding:2px 6px;border-radius:6px;
  font:inherit;font-weight:600;color:var(--sceau-fonce);cursor:pointer}
.toast-act:hover{background:var(--sceau-voile)}
.toast-x{flex:none;background:none;border:0;padding:0 2px;font-size:17px;line-height:1;
  color:var(--texte-3);cursor:pointer;border-radius:5px}
.toast-x:hover{color:var(--texte)}

.toast-item.t-ok{border-left-color:var(--sceau)}
.toast-item.t-ok .toast-ico{color:var(--sceau)}
.toast-item.t-erreur{border-left-color:var(--cire);background:var(--cire-voile)}
.toast-item.t-erreur .toast-ico{color:var(--cire)}
.toast-item.t-info{border-left-color:var(--registre-clair)}
.toast-item.t-info .toast-ico{color:var(--registre-clair)}

@media (max-width:560px){
  .toasts{left:var(--e3);right:var(--e3);transform:none;width:auto;bottom:70px}
}

/* ==========================================================================
   MODALES
   role="dialog" + aria-modal + piege de focus cote JavaScript. Le CSS ne fait que
   la mise en scene : c'est le module qui garantit l'accessibilite.
   ========================================================================== */
.modale-voile{position:fixed;inset:0;background:rgba(11,21,38,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  z-index:var(--z-modale);display:flex;align-items:flex-start;justify-content:center;
  padding:8vh var(--e4) var(--e4);overflow-y:auto}

.modale-carte{background:var(--surface);border:1px solid var(--filet);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);width:100%;max-width:640px;
  max-height:84vh;display:flex;flex-direction:column;overflow:hidden}

.modale-tete{display:flex;align-items:flex-start;gap:var(--e3);
  padding:var(--e4) var(--e5);border-bottom:1px solid var(--filet);flex:none}
.modale-tete h2{margin:0;padding:0;border:0;flex:1;font-size:var(--t-17);
  font-family:var(--serif);font-weight:600;color:var(--registre);line-height:1.3}
.modale-x{flex:none;background:none;border:0;font-size:20px;line-height:1;
  color:var(--texte-3);cursor:pointer;padding:2px 6px;border-radius:6px}
.modale-x:hover{background:var(--papier);color:var(--texte)}

.modale-corps{padding:var(--e4) var(--e5);overflow-y:auto;flex:1;min-height:0}
.modale-corps > p:first-child{margin-top:0}
.modale-corps > p:last-child{margin-bottom:0}

.modale-pied{display:flex;align-items:center;justify-content:flex-end;gap:var(--e2);
  flex-wrap:wrap;padding:var(--e3) var(--e5);border-top:1px solid var(--filet);
  background:var(--surface-2);flex:none}

/* Le bouton d'action irreversible. Il est en --cire, et --cire n'apparait nulle part
   ailleurs : quand cette couleur se montre, il n'y a pas de retour en arriere. */
.btn-danger{background:var(--cire);border-color:var(--cire);color:var(--sur-cire)}
.btn-danger:hover{filter:brightness(1.08)}
.btn-danger:disabled{opacity:.45;cursor:not-allowed;filter:none}

@media (max-width:560px){
  .modale-voile{padding:0;align-items:flex-end}
  .modale-carte{max-width:none;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .modale-pied{justify-content:stretch}
  .modale-pied .btn{flex:1;justify-content:center}
}

/* ==========================================================================
   TABLEAUX
   En-tetes triables au clavier, ligne cliquable focusable, en-tete collant.
   ========================================================================== */
.th-tri{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;
  font:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;cursor:pointer;border-radius:4px}
.th-tri:hover{color:var(--sceau-fonce)}
.th-fleche{opacity:.4;font-size:11px}
.th-tri:hover .th-fleche{opacity:.9}
th[aria-sort="ascending"] .th-fleche,
th[aria-sort="descending"] .th-fleche{opacity:1;color:var(--sceau)}

.table-wrap thead th{position:sticky;top:0;z-index:2;background:var(--surface-2)}

tbody tr.cliquable{cursor:pointer}
tbody tr.cliquable:focus-visible{outline:2px solid var(--sceau);outline-offset:-2px}
tbody tr.selectionnee td{background:var(--sceau-voile)}

/* ==========================================================================
   ETAT VIDE
   Un ecran vide n'est pas un constat, c'est une invitation. On dit ce qui manque,
   pourquoi, et on propose le geste qui remplit l'ecran.
   ========================================================================== */
.vide{text-align:center;padding:var(--e7) var(--e4);color:var(--texte-2)}
.vide b{display:block;color:var(--registre);font-size:var(--t-15);
  font-family:var(--serif);font-weight:600;margin-bottom:var(--e1)}
.vide p{margin:0 auto var(--e4);max-width:44ch;font-size:var(--t-13);line-height:1.6}
.vide p:empty{display:none;margin-bottom:0}

/* ==========================================================================
   PASTILLE DE CHARGEMENT
   Un ecran qui ne dit rien pendant deux secondes passe pour casse. Une trame de
   remplacement montre la FORME de ce qui arrive, ce qui rend l'attente plus courte
   qu'un tourniquet.
   ========================================================================== */
.trame{background:linear-gradient(90deg,
    var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size:400% 100%;border-radius:var(--r1, 6px);
  animation:trame 1.4s ease-in-out infinite}
@keyframes trame{0%{background-position:100% 0}100%{background-position:0 0}}
.trame-ligne{height:12px;margin:var(--e2) 0}
.trame-ligne.courte{width:45%}
.trame-bloc{height:76px;margin-bottom:var(--e3)}

/* ==========================================================================
   PALETTE DE COMMANDES (R3a)

   Elle se pose haut dans l'ecran, pas au centre : l'oeil part du champ de saisie et
   descend la liste. Une fenetre centree ferait remonter le regard a chaque frappe.
   ========================================================================== */
.pal-voile{position:fixed;inset:0;background:rgba(11,21,38,.52);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  z-index:var(--z-modale);display:flex;align-items:flex-start;justify-content:center;
  padding:11vh var(--e4) var(--e4)}

.pal-carte{width:min(660px,100%);background:var(--surface);border:1px solid var(--filet);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden;
  display:flex;flex-direction:column;max-height:74vh}

.pal-tete{display:flex;align-items:center;gap:var(--e3);padding:var(--e4) var(--e5);
  border-bottom:1px solid var(--filet);flex:none}
.pal-loupe{flex:none;color:var(--texte-3);display:flex}
.pal-loupe svg{width:18px;height:18px}
.pal-champ{flex:1;min-width:0;border:0;background:transparent;padding:0;
  font-size:var(--t-17);color:var(--texte);outline:0}
.pal-champ::placeholder{color:var(--texte-3)}
.pal-champ:focus{outline:0;box-shadow:none;border:0}

.pal-liste{flex:1;min-height:0;overflow-y:auto;padding:var(--e2)}
.pal-groupe{font-size:var(--t-11);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texte-3);padding:var(--e3) var(--e3) var(--e1)}

.pal-item{display:flex;align-items:center;gap:var(--e3);padding:9px var(--e3);
  border-radius:var(--r);cursor:pointer;color:var(--texte);font-size:var(--t-13)}
.pal-item.actif{background:var(--sceau-voile)}
.pal-ico{flex:none;width:19px;height:19px;color:var(--texte-3);display:flex}
.pal-ico svg{width:19px;height:19px}
.pal-item.actif .pal-ico{color:var(--sceau-fonce)}
.pal-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.pal-titre{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-sous{font-size:var(--t-12);color:var(--texte-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-item.actif .pal-titre{color:var(--sceau-fonce);font-weight:600}

.pal-marque{flex:none;font-family:var(--mono);font-size:var(--t-11);color:var(--texte-3);
  background:var(--surface-3);border-radius:5px;padding:2px 7px;letter-spacing:.03em}
.pal-etat{flex:none;font-size:var(--t-11);font-weight:600;border-radius:99px;padding:2px 9px}
.pal-etat.e-live{background:var(--sceau-voile);color:var(--sceau-fonce)}
.pal-etat.e-scheduled{background:var(--or-voile);color:var(--or-texte)}
.pal-etat.e-draft{background:var(--surface-3);color:var(--texte-2)}
.pal-etat.e-closed{background:var(--registre-voile);color:var(--registre)}
.pal-etat.e-archived{background:var(--violet-voile);color:var(--violet-texte)}
.pal-etat.e-inactif,.pal-etat.e-suspendu{background:var(--cire-voile);color:var(--cire-texte)}

.pal-vide{padding:var(--e7) var(--e5);text-align:center;color:var(--texte-2)}
.pal-vide b{display:block;color:var(--registre);font-family:var(--serif);
  font-weight:600;font-size:var(--t-15);margin-bottom:var(--e1)}
.pal-vide p{margin:0 auto;max-width:42ch;font-size:var(--t-13);line-height:1.6}

.pal-pied{display:flex;align-items:center;gap:var(--e5);flex:none;
  padding:8px var(--e5);border-top:1px solid var(--filet);background:var(--surface-2);
  font-size:var(--t-11);color:var(--texte-3)}
.pal-pied-fin{margin-left:auto}

kbd{font-family:var(--mono);font-size:var(--t-11);background:var(--surface-3);
  border:1px solid var(--filet);border-bottom-width:2px;border-radius:5px;
  padding:1px 6px;color:var(--texte-2);white-space:nowrap}

/* Le declencheur dans la barre superieure. Il porte le raccourci : c'est ainsi qu'on
   apprend l'existence du raccourci sans avoir a lire une documentation. */
.pal-btn{display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  border-radius:99px;padding:4px 8px 4px 12px;color:inherit;cursor:pointer;
  font-size:var(--t-12);transition:background .12s ease}
.pal-btn:hover{background:rgba(255,255,255,.16)}
.pal-btn svg{width:15px;height:15px;flex:none;opacity:.85}
.pal-btn kbd{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);
  color:inherit;opacity:.9}

@media (max-width:760px){
  .pal-btn-txt{display:none}
  .pal-btn{padding:5px 8px}
  .pal-voile{padding:0}
  .pal-carte{max-width:none;max-height:100vh;height:100vh;border-radius:0}
  .pal-pied-fin{display:none}
}

/* ==========================================================================
   BARRE LATERALE UNIQUE
   --------------------------------------------------------------------------
   Une seule colonne, toutes les rubriques visibles. Le rail d'icones et son
   panneau contextuel ont ete retires : ils cachaient derriere un clic quatorze
   entrees qui tiennent a l'ecran, et obligeaient a deviner des pictogrammes.

   Ces regles s'appliquent quand #appArea porte la classe .avec-menu, posee par
   nav.js. Retirer le script laisse une page fonctionnelle, seulement moins jolie.
   ========================================================================== */
:root{ --menu:268px; --menu-replie:64px; }

#appArea.avec-menu{grid-template-columns:var(--menu) minmax(0,1fr);gap:0;align-items:stretch}

/* Le contenu ne doit pas toucher la barre : sans cette respiration, le premier mot de
   chaque titre semble colle au menu et la page perd sa colonne de lecture. La marge
   est plus large a gauche qu'a droite, pour eloigner le texte du fond sombre. */
#appArea.avec-menu > .content{padding:var(--e5) var(--e5) var(--e6) var(--e6);min-width:0}
@media (max-width:1000px){
  #appArea.avec-menu > .content{padding:var(--e4) var(--e3) var(--e5)}
}
#appArea.avec-menu.menu-replie{grid-template-columns:var(--menu-replie) minmax(0,1fr)}

.avec-menu .sidenav.menu-lat{
  /* AUCUN ascenseur propre, et c'est deliberé.
     Les tentatives precedentes - `height:100vh` puis `max-height:100vh` - echouaient
     toutes deux pour la meme raison : la barre commence SOUS l'en-tete, donc une
     hauteur exprimee en pourcentage de l'ecran deborde toujours de la hauteur de cet
     en-tete, et l'ascenseur reapparait. Il aurait fallu soustraire une valeur que
     personne ne peut garantir, l'en-tete changeant de hauteur selon la langue.
     La barre prend donc simplement la hauteur de son contenu et defile AVEC la page :
     un seul geste de defilement, jamais deux. La colonne s'etire sur toute la hauteur
     de la page grace a `align-items:stretch` pose sur #appArea. */
  background:var(--marque-fond);border-right:1px solid var(--marque-filet);
  padding:var(--e3) var(--e3) var(--e5);
  display:flex;flex-direction:column;gap:2px;
  transition:width .18s ease}

/* ------------------------------------------------------------- les entrees */
.menu-lat .tab{
  position:relative;display:flex;align-items:center;gap:11px;width:100%;
  padding:8px 12px;border:0;border-radius:9px;background:transparent;
  /* Blanc plein : sur ce fond navy, le gris-bleu d'origine passait sous le seuil de
     confort de lecture. Un menu se lit en diagonale, il ne doit rien couter a l'oeil. */
  color:var(--marque-texte);font-size:14px;line-height:1.25;text-align:left;
  cursor:pointer;text-decoration:none;
  transition:background .14s ease,color .14s ease}
/* `style.css` colore les icones du volet en gris fonce (`--texte-3`), ce qui les rend
   presque invisibles sur le fond navy. On les fait heriter de la couleur du libelle :
   blanches par defaut, elles suivent ensuite l'etat de l'entree. */
.menu-lat .tab .ico,.menu-lat .tab svg{flex:none;width:19px;height:19px;opacity:1;color:inherit}
.menu-lat .tab:hover .ico,
.menu-lat .tab.active .ico{color:inherit}

/* Survol : un voile clair, juste assez pour que l'oeil sache ou il est. */
.menu-lat .tab:hover{background:rgba(255,255,255,.07);color:var(--marque-texte)}

/* Selection : voile teinte + filet vertical. Le filet porte l'information, le
   voile la confirme - l'un sans l'autre serait soit trop discret, soit criard. */
.menu-lat .tab.active{background:rgba(99,219,200,.14);color:var(--marque-texte);font-weight:600}
.menu-lat .tab.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;
  width:3px;border-radius:0 3px 3px 0;background:var(--marque-accent)}
.menu-lat .tab:focus-visible{outline:2px solid var(--marque-accent);outline-offset:-2px}

/* Sous-entrees (Generation, Demandes) : simplement decalees, sans autre ornement. */
.menu-lat .tab.sub{padding-left:42px;font-size:13.5px;color:var(--marque-texte-2)}
.menu-lat .tab.sub:hover,.menu-lat .tab.sub.active{color:var(--marque-texte)}

/* ------------------------------------------------------------- les sections */
.menu-lat .nav-group{display:flex;flex-direction:column;gap:2px}
.menu-lat .nav-group + .nav-group{margin-top:var(--e3);
  padding-top:var(--e2);border-top:1px solid rgba(255,255,255,.07)}
.menu-lat .nav-title{
  padding:2px 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--marque-texte-2);opacity:.9}

/* « Vous » se pose en bas, comme dans tous les produits ou l'on range son compte.
   Les autres pages marquent ce groupe par .nav-bottom ; le tableau de bord le place
   simplement en dernier. On accepte les deux. */
.menu-lat .nav-group.nav-bottom,
.menu-lat .nav-group:last-of-type{margin-top:auto}
/* Les sous-entrees sont enveloppees dans .nav-sub sur les pages autres que le
   tableau de bord : le conteneur ne doit pas casser la colonne. */
.menu-lat .nav-sub{display:flex;flex-direction:column;gap:2px}

/* ------------------------------------------------------------ repli du menu */
.menu-bascule{
  align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin-bottom:var(--e2);flex:none;
  border:1px solid rgba(255,255,255,.16);border-radius:8px;
  background:transparent;color:var(--marque-texte-3);cursor:pointer;
  transition:background .14s ease,color .14s ease}
.menu-bascule:hover{background:rgba(255,255,255,.09);color:var(--marque-texte)}
.menu-replie .menu-bascule{align-self:center;transform:rotate(180deg)}

.menu-replie .menu-lat .tab{justify-content:center;padding:9px 0}
/* Au repli on masque les LIBELLES, jamais les icones : une barre reduite sans
   pictogramme ne guide plus rien, elle ne fait que prendre de la place. Le selecteur
   precedent visait `span` sans distinction, or l'icone est elle-meme dans un
   `span.ico` - elle disparaissait donc avec le texte. */
.menu-replie .menu-lat .tab > span:not(.ico){display:none}
.menu-replie .menu-lat .nav-title,
.menu-replie .menu-lat .chev{display:none}
.menu-replie .menu-lat .tab.sub{display:none}
.menu-replie .menu-lat .tab{gap:0}
.menu-replie .menu-lat .tab .ico,
.menu-replie .menu-lat .tab svg{width:20px;height:20px}
/* Les traits de separation restent : ils rythment la colonne reduite et rappellent
   ou passent les frontieres entre sections. */
.menu-replie .menu-lat .nav-group + .nav-group{margin-top:var(--e2);padding-top:var(--e2)}

/* ------------------------------------------------------------------ mobile */
@media (max-width:1000px){
  #appArea.avec-menu,#appArea.avec-menu.menu-replie{grid-template-columns:minmax(0,1fr)}
  .avec-menu .sidenav.menu-lat{
    position:fixed;top:0;left:0;bottom:0;width:var(--menu);z-index:70;
    transform:translateX(-100%);transition:transform .2s ease}
  .avec-menu.menu-ouvert .sidenav.menu-lat{transform:translateX(0)}
  .menu-bascule{display:none}
  .menu-voile{position:fixed;inset:0;background:rgba(11,21,38,.5);z-index:65}
}
@media (prefers-reduced-motion:reduce){
  .avec-menu .sidenav.menu-lat,.menu-lat .tab,.menu-bascule{transition:none}
}

/* ==========================================================================
   POSTE DE TRAVAIL (R4)

   Un ecran de triage, pas une vitrine. Trois sections dans un ordre qui n'est pas
   negociable : ce qui se passe maintenant, ce qui attend une decision, ce qui arrive.
   Les compteurs finissent en bas, en petit : ils informent, ils n'appellent a rien.
   ========================================================================== */
.pilotage{display:flex;flex-direction:column;gap:var(--e3)}

.pil-tete{margin-bottom:var(--e2)}
.pil-jour{font-family:var(--serif);font-weight:600;font-size:var(--t-25);
  color:var(--registre);line-height:1.15;margin:0;border:0;padding:0}
.pil-resume{margin:var(--e1) 0 0;font-size:var(--t-13)}

.pil-titre{font-size:var(--t-11);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texte-3);display:flex;align-items:center;gap:var(--e3);margin-top:var(--e4)}
.pil-titre::after{content:"";flex:1;height:1px;background:var(--filet)}

/* ------------------------------------------------------ epreuve en cours */
.pil-direct{display:flex;align-items:center;gap:var(--e5);flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--sceau);border-left:4px solid var(--sceau);
  border-radius:var(--r-lg);padding:var(--e4) var(--e5);box-shadow:var(--sh)}
.pil-direct.urgent{border-color:var(--or);border-left-color:var(--or)}

.pil-chrono-boite{flex:none;text-align:center;min-width:92px}
.pil-chrono{font-family:var(--mono);font-size:var(--t-25);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--texte);line-height:1.1}
.pil-chrono.bas{color:var(--or-texte)}
.pil-chrono.fini{color:var(--cire)}
.pil-chrono-l{font-size:var(--t-12);color:var(--texte-3)}

.pil-direct-corps{flex:1;min-width:220px}
.pil-direct-titre{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  font-weight:600;font-size:var(--t-15);color:var(--texte)}
.pil-direct-meta{font-size:var(--t-13);color:var(--texte-2);margin-top:2px}
.pil-direct-meta code{background:var(--surface-3);border:0;color:var(--registre);
  border-radius:5px;padding:1px 6px;font-size:var(--t-12)}

.pil-barre{height:5px;background:var(--surface-3);border-radius:99px;overflow:hidden;margin-top:var(--e2)}
.pil-barre i{display:block;height:100%;background:var(--sceau);border-radius:99px;transition:width .6s ease}
.pil-direct.urgent .pil-barre i{background:var(--or)}

.pil-signaux{display:flex;gap:var(--e2);flex-wrap:wrap;margin-top:var(--e2)}
.pil-signal{font-size:var(--t-12);font-weight:600;border-radius:99px;padding:2px 10px;
  background:var(--surface-3);color:var(--texte-2)}
.pil-signal.appel{background:var(--or-voile);color:var(--or-texte)}

/* ------------------------------------------------------------- une ligne */
.pil-ligne{display:flex;align-items:center;gap:var(--e4);padding:var(--e3) var(--e5);
  border-bottom:1px solid var(--filet)}
.pil-ligne:last-child{border-bottom:0}
.pil-ligne:hover{background:var(--surface-2)}

/* La jauge de gauche. Trois etats seulement : ce qui presse, ce qui attend, ce qui est
   calme. Au-dela de trois niveaux, plus personne ne les distingue. */
.pil-jauge{flex:none;width:3px;align-self:stretch;border-radius:3px;margin:2px 0}
.pil-jauge.u-haute{background:var(--cire)}
.pil-jauge.u-moyenne{background:var(--or)}
.pil-jauge.u-basse{background:var(--filet-fort)}

.pil-ico{flex:none;width:19px;height:19px;color:var(--texte-3);display:flex}
.pil-ico svg{width:19px;height:19px}
.pil-corps{flex:1;min-width:0}
.pil-l-titre{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  font-weight:600;font-size:var(--t-15)}
.pil-l-detail{font-size:var(--t-13);color:var(--texte-2);margin-top:1px}
.pil-manque{color:var(--cire);font-weight:600}
.pil-pret{color:var(--sceau-fonce);font-weight:600}
.pil-actions{flex:none;display:flex;gap:var(--e2);flex-wrap:wrap}

/* ---------------------------------------------------- les quatre verrous
   Quatre traits : sujet, etudiants, bareme, acces. On lit l'etat de preparation
   d'une epreuve sans lire une phrase. */
.pil-verrous{flex:none;display:flex;gap:3px}
.pil-verrou{width:22px;height:5px;border-radius:99px;background:var(--filet-fort)}
.pil-verrou.ok{background:var(--sceau)}
.pil-verrou.ko{background:var(--cire)}
.pil-ligne.alerte{background:var(--cire-voile)}
.pil-ligne.alerte:hover{background:var(--cire-voile)}

/* ------------------------------------------------------------ rien a faire
   Une reassurance, pas un vide. « Rien ne requiert votre attention » doit se lire
   comme un resultat, pas comme un ecran qui n'a pas charge. */
.pil-calme{display:flex;align-items:center;gap:var(--e3);padding:var(--e4) var(--e5)}
.pil-calme-ico{flex:none;width:24px;height:24px;color:var(--sceau);display:flex}
.pil-calme-ico svg{width:24px;height:24px}
.pil-calme b{display:block;color:var(--texte);font-size:var(--t-15)}
.pil-calme span{font-size:var(--t-13);color:var(--texte-2)}

/* ------------------------------------------------------------- chiffres */
.pil-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:var(--e3)}
.pil-chiffre{background:var(--surface);border:1px solid var(--filet);border-radius:var(--r);
  padding:var(--e3) var(--e4)}
.pil-chiffre b{display:block;font-family:var(--mono);font-size:var(--t-20);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--texte);line-height:1.2}
.pil-chiffre span{font-size:var(--t-12);color:var(--texte-2)}

/* --------------------------------------------------------- pastilles d'etat */
.etat{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:99px;
  font-size:var(--t-12);font-weight:600;white-space:nowrap}
.etat::before{content:"";width:6px;height:6px;border-radius:50%}
.etat--cours{background:var(--sceau-voile);color:var(--sceau-fonce)}
.etat--cours::before{background:var(--sceau);animation:pouls 2.4s infinite}
.etat--prog{background:var(--or-voile);color:var(--or-texte)}
.etat--prog::before{background:var(--or)}
.etat--brouillon{background:var(--surface-3);color:var(--texte-2)}
.etat--brouillon::before{background:var(--texte-3)}
@keyframes pouls{0%,100%{opacity:1}50%{opacity:.3}}

@media (max-width:760px){
  .pil-ligne{flex-wrap:wrap;gap:var(--e2) var(--e3)}
  .pil-corps{flex:1 1 100%;order:2}
  .pil-actions{flex:1 1 100%;order:4}
  .pil-actions .btn{flex:1;justify-content:center}
  .pil-verrous{order:3}
  .pil-direct{gap:var(--e3)}
  .pil-actions a{white-space:nowrap}
}
}


/* ------------------------------------------------------------------ camera
   Bandeau de surveillance. Il est VOLONTAIREMENT visible et fixe : l'etudiant doit
   savoir en permanence qu'il est filme, et voir ce qui part. La vignette est sa propre
   image, en miroir, comme un miroir justement - c'est ce a quoi on s'attend de soi. */
.cam-bar {
  position: fixed; left: 12px; bottom: 12px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d8dee9);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
  font-size: 13px; max-width: min(92vw, 420px);
}
.cam-bar .cam-txt { color: var(--texte-doux, #4a5568); line-height: 1.35; }
.cam-pastille {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--vert, #2e7d5b);
}
.cam-bar[data-etat="actif"] .cam-pastille { animation: cam-battement 2.4s ease-in-out infinite; }
.cam-bar[data-etat="refus"] .cam-pastille { background: var(--rouge, #b3261e); animation: none; }
/* Avant l'activation : on informe, sans alarmer. Pastille sobre, pas de battement. */
.cam-bar[data-etat="annonce"] .cam-pastille { background: var(--ambre, #b7791f); animation: none; }
.cam-bar[data-etat="annonce"] .cam-vue { display: none; }
.cam-bar[data-etat="refus"] .cam-vue { display: none; }
.cam-vue {
  width: 84px; height: 63px; flex: 0 0 auto;
  border-radius: 8px; background: #0b1220; object-fit: cover;
  transform: scaleX(-1);   /* effet miroir : on se reconnait mieux */
}
@keyframes cam-battement { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (max-width: 560px) {
  .cam-bar { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  .cam-vue { width: 64px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .cam-bar[data-etat="actif"] .cam-pastille { animation: none; }
}


/* --------------------------------------------------------------- mosaique
   Grille de surveillance. La taille des vignettes est un compromis assume : assez
   grandes pour distinguer une silhouette et un geste, assez petites pour qu'une
   promotion entiere tienne sans defilement sur un ecran d'enseignant. */
.cam-grille {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.cam-case {
  margin: 0; border: 2px solid var(--border, #d8dee9); border-radius: 12px;
  overflow: hidden; background: #0b1220; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.cam-case:hover { transform: translateY(-2px); }
.cam-case img, .cam-vide {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transform: scaleX(-1);   /* meme miroir que la vignette de l'etudiant : les gestes concordent */
}
.cam-vide {
  display: flex; align-items: center; justify-content: center;
  color: #7c8aa5; font-size: 12px; text-align: center; padding: 8px; transform: none;
}
.cam-case figcaption {
  padding: 7px 9px; background: var(--surface, #fff);
  font-size: 12.5px; line-height: 1.3;
  display: flex; flex-direction: column; gap: 2px;
}
.cam-case figcaption b { font-weight: 600; }
.cam-raisons { color: var(--rouge, #b3261e); font-size: 11.5px; }

/* Bordure rouge : un incident a ete detecte AILLEURS (sortie de page, collage, second
   ecran). La camera illustre, elle n'accuse pas - d'ou le libelle explicite en dessous. */
.cam-case.cam-alerte { border-color: var(--rouge, #b3261e); }

/* Image trop ancienne : le flux est probablement interrompu. On l'attenue plutot que de
   la masquer, car une vignette qui disparait inquiete plus qu'elle n'informe. */
.cam-case[data-etat="figee"] img { opacity: .45; filter: grayscale(.6); }

@media (max-width: 560px) {
  .cam-grille { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cam-case { transition: none; }
  .cam-case:hover { transform: none; }
}


/* ------------------------------------------------------- actions rapides
   Cartes de raccourcis de l'accueil. Le nom de classe evite `.pil-actions`, deja
   pris par les boutons d'une ligne d'attente : deux regles homonymes dans le meme
   fichier, c'est un bug qui attend son heure.

   Le voile de survol est volontairement leger. Une carte qui change franchement de
   couleur attire l'oeil mais fatigue quand il y en a dix ; un voile discret plus un
   filet colore suffisent a dire « c'est ici », sans transformer la page en sapin. */
.pil-raccourcis{
  display:grid;gap:var(--e3);margin:var(--e2) 0 var(--e6);
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}

.pil-rac{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:var(--e3);
  padding:13px 15px;border-radius:12px;
  border:1px solid var(--filet);background:var(--surface);
  color:var(--texte);text-decoration:none;font-size:var(--t-14);line-height:1.25;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}

/* Le voile est un pseudo-element : il se teinte sans toucher au fond de la carte,
   donc sans risque de rendre le texte illisible. */
.pil-rac::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--sceau);opacity:0;transition:opacity .15s ease}
.pil-rac:hover{border-color:var(--sceau);transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(16,24,40,.09)}
.pil-rac:hover::after{opacity:.05}
.pil-rac:active{transform:translateY(0)}
.pil-rac:focus-visible{outline:2px solid var(--sceau);outline-offset:2px}

.pil-rac-ic{
  display:inline-flex;flex:none;width:36px;height:36px;border-radius:10px;
  align-items:center;justify-content:center;
  background:var(--sceau-voile);color:var(--sceau-fonce);
  transition:background .15s ease,color .15s ease}
.pil-rac:hover .pil-rac-ic{background:var(--sceau);color:var(--sur-sceau)}

/* Les actions dictees par l'etat - une epreuve en cours, des copies qui attendent -
   passent devant et le disent. Une seule difference visuelle, elle suffit. */
.pil-rac--urgent{border-color:var(--filet-or)}
.pil-rac--urgent::after{background:var(--or)}
.pil-rac--urgent:hover{border-color:var(--or)}
.pil-rac--urgent .pil-rac-ic{background:var(--or-voile);color:var(--or-texte)}
.pil-rac--urgent:hover .pil-rac-ic{background:var(--or);color:#fff}

/* --------------------------------------------------------- chiffres cliquables
   Un nombre affiche dans un tableau de bord est une promesse de navigation :
   on la tient, et le survol le montre. */
.pil-chiffre--lien{text-decoration:none;color:inherit;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .15s ease}
.pil-chiffre--lien:hover{border-color:var(--sceau);background:var(--sceau-voile);
  transform:translateY(-2px)}
.pil-chiffre--lien:focus-visible{outline:2px solid var(--sceau);outline-offset:2px}

@media (max-width:560px){
  .pil-raccourcis{grid-template-columns:1fr 1fr;gap:var(--e2)}
  .pil-rac{padding:11px;font-size:var(--t-13);flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .pil-rac,.pil-rac::after,.pil-rac-ic,.pil-chiffre--lien{transition:none}
  .pil-rac:hover,.pil-chiffre--lien:hover{transform:none}
}


/* ============================================================================
   BARRE DU HAUT : STABLE D'UNE LANGUE A L'AUTRE
   ----------------------------------------------------------------------------
   Le francais est en moyenne 20 % plus long que l'anglais : « Se deconnecter »
   contre « Sign out », « Enseignant » contre « Teacher ». La barre passait donc a
   la ligne en francais et tenait sur une seule en anglais, si bien que toute la
   page se decalait au changement de langue.

   On ne corrige pas cela en raccourcissant les mots - une traduction ne doit pas
   etre contrainte par la mise en page - mais en rendant la barre capable
   d'absorber la difference : elle ne s'empile plus, elle tronque.
   ============================================================================ */
.topbar-in{flex-wrap:nowrap}

/* Sans min-width:0, un enfant en flex refuse de passer sous sa largeur de contenu
   et force le retour a la ligne. C'est la cause exacte du decalage observe. */
.topbar .brand{min-width:0;flex:0 1 auto;overflow:hidden}
.topbar .brand > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .who{flex:1 1 auto;justify-content:flex-end;min-width:0;flex-wrap:nowrap}

/* Le nom complet est l'element le plus variable : c'est lui qui cede en premier,
   par troncature plutot qu'en poussant ses voisins hors de la barre. */
.topbar #tbUser{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:28ch;min-width:0}

/* Le declencheur de recherche garde son icone et son raccourci ; c'est son libelle
   qui s'efface quand la place manque, car l'icone suffit a le reconnaitre. */
.pal-btn{flex:0 1 auto;min-width:0}
.pal-btn .pal-btn-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:1320px){
  .pal-btn .pal-btn-txt{display:none}
  .pal-btn{padding:4px 8px}
}
@media (max-width:1100px){
  .topbar #tbUser{max-width:16ch}
  .pal-btn kbd{display:none}
}
@media (max-width:860px){
  /* Sous cette largeur la barre a le droit de passer a la ligne : mieux vaut deux
     lignes lisibles qu'une seule illisible. */
  .topbar-in{flex-wrap:wrap}
  .topbar .who{flex-wrap:wrap}
  .topbar #tbUser{max-width:14ch}
}


/* ------------------------------------------------------------ ecrans de choix
   Surveillance et Correction ne prennent sens que rapportees a une epreuve. Ces
   cartes servent a la designer : une ligne par epreuve, l'essentiel a gauche,
   l'action a droite. Le voile de survol reprend celui des raccourcis de l'accueil,
   pour que l'oeil reconnaisse le meme geste. */
.choix{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:var(--e4);
  padding:13px 15px;margin-top:var(--e2);border-radius:12px;
  border:1px solid var(--filet);background:var(--surface);
  color:var(--texte);text-decoration:none;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.choix::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--sceau);opacity:0;transition:opacity .15s ease}
.choix:hover{border-color:var(--sceau);transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(16,24,40,.09)}
.choix:hover::after{opacity:.05}
.choix:focus-visible{outline:2px solid var(--sceau);outline-offset:2px}
.choix-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.choix-corps b{font-weight:600}
.choix .btn{flex:none;position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .choix,.choix::after{transition:none}
  .choix:hover{transform:none}
}


/* Sections des ecrans de choix : un titre discret separe « ce qui presse » de « ce qui
   peut attendre ». Sans cette coupure, une liste de quinze epreuves se lit mal. */
.choix-sec + .choix-sec{margin-top:var(--e6)}
.choix--accent{border-color:var(--filet-or)}
.choix--accent::after{background:var(--or)}
.choix--accent:hover{border-color:var(--or)}


/* ==========================================================================
   UX-1 : registre en BE.dom — REGISTRE DES ÉTUDIANTS, présentation compacte (UX-1)
   ========================================================================== */
#regTable .who { display: flex; align-items: center; gap: 10px; }
#regTable .avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--lightb); color: var(--navy);
}
#regTable .who .nom { font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
#regTable .who .mat { font-family: var(--mono, monospace); font-size: 12px; color: var(--faint); margin-top: 1px; }
#regTable .col-sec, #regTable .col-mail, #regTable .sexe { color: var(--muted); font-size: 13px; }
#regTable .col-sec { white-space: nowrap; }
#regTable .pill {
  display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px;
  background: var(--lightb); color: var(--navy); font-weight: 500;
}
/* actions sur une ligne : colonne assez large, pas de retour a la ligne */
#regTable th:last-child, #regTable td:last-child { width: 116px; white-space: nowrap; }
#regTable .actions { display: flex; flex-direction: row; align-items: center; gap: 4px; flex-wrap: nowrap; justify-content: flex-end; }
/* icones : padding herite annule (une regle globale de bouton posait padding:1px 4px,
   qui elargissait chaque icone a 36px et repoussait la corbeille a la ligne). */
#regTable .iconbtn { padding: 0 !important; box-sizing: border-box; min-width: 28px; }
#regTable .iconbtn {
  width: 28px; height: 28px; flex: none; border: 0; background: transparent; border-radius: 7px;
  cursor: pointer; display: grid; place-items: center; color: var(--faint);
  transition: background .12s, color .12s, opacity .12s; opacity: 0;
}
#regTable .iconbtn svg { width: 17px; height: 17px; }
#regTable .iconbtn:hover { background: var(--lightb); color: var(--blue); }
#regTable .iconbtn.danger:hover { background: var(--lred); color: var(--red); }
#regTable .iconbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; opacity: 1; }
#regTable tbody tr:hover .iconbtn,
#regTable tbody tr:focus-within .iconbtn { opacity: 1; }
#regTable tbody tr:hover { background: var(--lightb); }

/* registre : reglage survol + compacite : lignes plus compactes */
#regTable td { padding-top: 6px; padding-bottom: 6px; }
#regTable .avatar { width: 26px; height: 26px; font-size: 11px; }
#regTable .who { gap: 9px; }
/* icones toujours visibles : lisibles en permanence, mises en avant au survol.
   Une action ne doit pas dependre du survol : sur ecran tactile il n'existe pas, et
   l'utilisateur n'a aucun moyen de deviner qu'un bouton est cache la. */
#regTable .iconbtn { opacity: 1; color: var(--muted); }
#regTable tbody tr:hover .iconbtn { color: var(--navy); }
#regTable .iconbtn:hover { background: var(--lightb); color: var(--blue); }
#regTable .iconbtn.danger:hover { background: var(--lred); color: var(--red); }
/* largeur de colonne confortable : les trois icones tiennent toujours sur une ligne */
#regTable th:last-child, #regTable td:last-child { width: 124px; white-space: nowrap; }


/* ==========================================================================
   reinitialisation forte de la colonne Actions
   Neutralise tout ce qu'une regle globale de bouton pourrait imposer aux trois
   icones du registre : marge, flottement, position, alignement. Place en fin de
   feuille pour l'emporter dans la cascade. Portee limitee a #regTable.
   ========================================================================== */
#regTable td:last-child { text-align: right; vertical-align: middle; }

#regTable .actions {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  line-height: 1 !important;
  float: none !important;
}

#regTable .actions > .iconbtn {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: static !important;
  top: auto !important;
  vertical-align: middle !important;
  align-self: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  line-height: 1 !important;
  transform: none !important;
}

#regTable .actions > .iconbtn > svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  vertical-align: middle !important;
}


/* ==========================================================================
   UX-2 : navigation coherente : logo cliquable + un seul style de retour
   ========================================================================== */
.topbar .brand .tb-home {
  display: inline-flex; align-items: center; border-radius: 8px;
  transition: opacity .12s;
}
.topbar .brand .tb-home:hover { opacity: .82; }
.topbar .brand .tb-home:focus-visible { outline: 2px solid var(--marque-accent); outline-offset: 2px; }

.back.retour {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, .10);
  font-weight: 600; font-size: 13.5px; text-decoration: none;
  transition: background .12s;
}
.back.retour:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }
.back.retour:focus-visible { outline: 2px solid var(--marque-accent); outline-offset: 2px; }
.back.retour svg { width: 15px; height: 15px; display: block; flex: none; }


/* ==========================================================================
   UX-3 : tableau des comptes en BE.dom : meme presentation que le registre
   ========================================================================== */
#usersTable .who { display: flex; align-items: center; gap: 9px; }
#usersTable .avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
  background: var(--lightb); color: var(--navy);
}
#usersTable .who .nom { font-weight: 600; color: var(--ink); }
#usersTable .who .mat { font-size: 12px; color: var(--faint); margin-top: 1px; }
#usersTable .col-sec, #usersTable .col-mail { color: var(--muted); font-size: 13px; }
#usersTable .col-sec { white-space: nowrap; }
#usersTable td { padding-top: 6px; padding-bottom: 6px; }
#usersTable .etats { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

#usersTable th:last-child, #usersTable td:last-child { width: 152px; white-space: nowrap; text-align: right; }
#usersTable .actions {
  display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center !important; justify-content: flex-end !important; gap: 4px !important;
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
}
#usersTable .actions > .iconbtn {
  width: 28px !important; height: 28px !important; min-width: 28px !important; max-width: 28px !important;
  flex: 0 0 28px !important; margin: 0 !important; padding: 0 !important;
  float: none !important; position: static !important; align-self: center !important;
  border: 0; background: transparent; border-radius: 7px; cursor: pointer;
  display: grid; place-items: center; color: var(--muted);
  transition: background .12s, color .12s;
}
#usersTable .actions > .iconbtn > svg { display: block !important; width: 17px !important; height: 17px !important; }
#usersTable .iconbtn:hover { background: var(--lightb); color: var(--blue); }
#usersTable .iconbtn.danger:hover { background: var(--lred); color: var(--red); }
#usersTable .iconbtn.ok:hover { background: var(--lgreen); color: var(--green); }
#usersTable .iconbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
#usersTable tbody tr:hover { background: var(--lightb); }


/* ==========================================================================
   UX-4 : journal d'audit en BE.dom : journal plus lisible et plus compact
   ========================================================================== */
#auditTable td { padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
#auditTable .col-sec { color: var(--muted); white-space: nowrap; }
#auditTable .aud-qui { font-weight: 500; color: var(--ink); }
#auditTable .aud-action {
  font-family: var(--mono, monospace); font-size: 12px;
  background: var(--lightb); color: var(--navy);
  padding: 2px 7px; border-radius: 6px; white-space: nowrap;
}
#auditTable .aud-detail { color: var(--faint); font-size: 12.5px; }
#auditTable tbody tr:hover { background: var(--lightb); }


/* ==========================================================================
   confirmation d'adresse (ecran etudiant)
   ========================================================================== */
#profVerif { margin-top: 12px; }
.verif-boite {
  border: 1px solid var(--border); border-left: 3px solid var(--teal);
  border-radius: 10px; padding: 14px 16px; background: var(--card);
}
.verif-boite.verif-attente { border-left-color: var(--gold); }
.verif-titre { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.verif-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
#pvCode {
  width: 140px; font-family: var(--mono, monospace); font-size: 20px;
  letter-spacing: 6px; text-align: center; padding: 8px 10px;
  border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--card); color: var(--ink);
}
#pvCode:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.verif-ok { color: var(--green); font-weight: 500; }


/* ==========================================================================
   R10 : pagination du registre
   ========================================================================== */
#regPagination.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 10px;
}
#regPagination:empty { display: none; }
#regPagination .pagination-etat { font-size: 13px; color: var(--muted); }
#regPagination .pagination-cmd { display: flex; gap: 6px; }
#regPagination button[disabled] { opacity: .45; cursor: default; }


/* ==========================================================================
   PAG : pagination du journal d'audit - barre generique, partagee par toutes les listes
   (la regle #regPagination du chantier R10 reste valable et inchangee)
   ========================================================================== */
.be-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 10px;
}
.be-pagination:empty { display: none; }
.be-pagination .be-pagination-etat { font-size: 13px; color: var(--muted); }
.be-pagination .be-pagination-cmd { display: flex; gap: 6px; }
.be-pagination button[disabled] { opacity: .45; cursor: default; }