/* Socle visuel du portail (pages authentifiees : saisie, comptes, connexion).
   Plat et sobre : aucune ombre portee hors panneaux flottants, aucun degrade,
   un seul accent. La couleur ne decore pas, elle informe -- categorie d'un
   camion, etat d'une cellule, succes ou refus d'une action. Tout le reste est
   gris.

   Les controles natifs du navigateur (select, input date/time, cases a cocher)
   ne sont volontairement pas utilises dans la saisie : ils imposent le style et
   les fenetres du systeme au milieu d'une interface qui a le sien. Les
   equivalents sont construits dans saisie.css / saisie.js. */

:root{
  --fond:#f7f8fa;
  --surface:#fff;
  --surface-2:#f2f4f7;
  --surface-3:#eaecf0;
  --bord:#e4e7ec;
  --bord-fort:#d0d5dd;
  --encre:#101828;
  --encre-2:#475467;
  --encre-3:#98a2b3;

  --accent:#1d4ed8;
  --accent-doux:#eff4ff;
  --accent-bord:#b2ccff;

  --ok:#067647;      --ok-doux:#ecfdf3;   --ok-bord:#abefc6;
  --alerte:#b42318;  --alerte-doux:#fef3f2; --alerte-bord:#fecdca;
  --attente:#b54708; --attente-doux:#fffaeb; --attente-bord:#fedf89;

  /* Memes teintes que les cartes du mur (frontend/rendu_ecran.py) : une
     categorie doit se reconnaitre a l'identique dans la saisie et sur l'ecran. */
  --cat-maintenance:#b45309; --cat-maintenance-doux:#fffaf0; --cat-maintenance-bord:#f3d9ad;
  --cat-controle:#1d4ed8;    --cat-controle-doux:#f4f8ff;    --cat-controle-bord:#bed3fb;
  --cat-preparation:#6d28d9; --cat-preparation-doux:#f9f6ff; --cat-preparation-bord:#d3c2fb;
  --cat-disponible:#047857;  --cat-disponible-doux:#f2fbf7;  --cat-disponible-bord:#a9dfc6;

  --sans:Manrope,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:Poppins,var(--sans);
  --r:6px;
  --r-panneau:10px;
  --ombre-flottant:0 1px 2px rgba(16,24,40,.06),0 12px 32px -8px rgba(16,24,40,.18);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--fond);color:var(--encre);
  font-family:var(--sans);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Barres de defilement discretes : la barre systeme, large et grise, casse la
   lecture d'un tableau dense. */
*{scrollbar-width:thin;scrollbar-color:var(--bord-fort) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--bord-fort);border:3px solid var(--fond);
  border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:var(--encre-3)}

/* ---- Coquille ------------------------------------------------------- */
.appli{display:flex;flex-direction:column;height:100%}

.barre{flex:none;display:flex;align-items:center;gap:1.5rem;height:46px;
  padding:0 .9rem;background:var(--surface);border-bottom:1px solid var(--bord)}
.marque{display:flex;align-items:center;gap:.5rem;font-family:var(--display);
  font-size:.86rem;font-weight:600;letter-spacing:-.01em;color:var(--encre)}
.marque:hover{text-decoration:none}
.marque .puce{width:.5rem;height:.5rem;border-radius:2px;background:var(--accent)}
.marque .sous{color:var(--encre-3);font-weight:500}
.barre nav{display:flex;gap:.15rem;margin-right:auto}
.barre nav a{padding:.3rem .55rem;border-radius:var(--r);color:var(--encre-2);
  font-size:.82rem;font-weight:600}
.barre nav a:hover{background:var(--surface-2);color:var(--encre);text-decoration:none}
.barre nav a[aria-current]{background:var(--accent-doux);color:var(--accent)}
.qui{display:flex;align-items:center;gap:.55rem;font-size:.78rem;color:var(--encre-3);
  font-weight:600}
.qui b{color:var(--encre-2);font-weight:700}
.role{padding:.1rem .35rem;border:1px solid var(--bord);border-radius:4px;
  font-size:.66rem;letter-spacing:.04em;text-transform:uppercase}

/* ---- Boutons -------------------------------------------------------- */
.bouton{display:inline-flex;align-items:center;gap:.4rem;height:30px;padding:0 .7rem;
  border:1px solid var(--bord-fort);border-radius:var(--r);background:var(--surface);
  color:var(--encre-2);font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s}
.bouton:hover{background:var(--surface-2);color:var(--encre)}
.bouton:active{background:var(--surface-3)}
.bouton:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bouton[disabled]{opacity:.45;cursor:not-allowed}
.bouton-primaire{background:var(--accent);border-color:var(--accent);color:#fff}
.bouton-primaire:hover{background:#1a43b8;border-color:#1a43b8;color:#fff}
.bouton-danger{color:var(--alerte);border-color:var(--alerte-bord)}
.bouton-danger:hover{background:var(--alerte-doux);color:var(--alerte)}
.bouton-discret{border-color:transparent;background:transparent}
.bouton-discret:hover{background:var(--surface-2)}
.bouton-icone{width:30px;padding:0;justify-content:center}

/* ---- Champs --------------------------------------------------------- */
.champ{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.85rem}
.champ > label{font-size:.74rem;font-weight:700;color:var(--encre-2);
  letter-spacing:.02em}
.saisie{height:32px;padding:0 .6rem;border:1px solid var(--bord-fort);
  border-radius:var(--r);background:var(--surface);width:100%}
.saisie:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-doux)}
textarea.saisie{height:auto;padding:.45rem .6rem;resize:vertical;line-height:1.45}
.indice{font-size:.72rem;color:var(--encre-3)}

/* ---- Messages ------------------------------------------------------- */
.flashs{position:fixed;top:56px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:.4rem;width:min(30rem,calc(100vw - 2rem))}
.flash{padding:.5rem .75rem;border-radius:var(--r);font-size:.82rem;font-weight:600;
  border:1px solid;box-shadow:var(--ombre-flottant);background:var(--surface)}
.flash-ok{background:var(--ok-doux);border-color:var(--ok-bord);color:var(--ok)}
.flash-erreur{background:var(--alerte-doux);border-color:var(--alerte-bord);color:var(--alerte)}

/* ---- Pages document (connexion, comptes) ---------------------------- */
.page{flex:1;overflow:auto}
.page-corps{max-width:56rem;margin:0 auto;padding:1.75rem 1.25rem 3rem}
.page-corps h1{font-family:var(--display);font-size:1.25rem;font-weight:600;
  letter-spacing:-.02em;margin-bottom:.2rem}
.page-corps h2{font-family:var(--display);font-size:.98rem;font-weight:600;
  margin:1.8rem 0 .6rem}
.page-corps .lead{color:var(--encre-2);font-size:.85rem;margin-bottom:1.4rem}

.centre{display:flex;align-items:center;justify-content:center;min-height:100%;
  padding:2rem 1.25rem}
.carte{width:min(23rem,100%);background:var(--surface);border:1px solid var(--bord);
  border-radius:var(--r-panneau);padding:1.5rem}

.liste{width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--bord);border-radius:var(--r-panneau);overflow:hidden}
.liste th,.liste td{text-align:left;padding:.5rem .7rem;font-size:.82rem;
  border-bottom:1px solid var(--bord)}
.liste th{background:var(--surface-2);font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--encre-2)}
.liste tr:last-child td{border-bottom:none}
.liste td form{display:inline-flex;gap:.35rem;align-items:center}

.etiquette{display:inline-flex;align-items:center;padding:.08rem .4rem;border-radius:4px;
  font-size:.7rem;font-weight:700;border:1px solid}
.etiquette-ok{background:var(--ok-doux);border-color:var(--ok-bord);color:var(--ok)}
.etiquette-off{background:var(--surface-2);border-color:var(--bord);color:var(--encre-3)}