/* Portail Proxmox — 22/09/2026.
   L'apparence « Logiciel » du Cloud / de PxPlan, réduite à ce dont une page
   de connexion a besoin. Recopiée ici exprès (règle 07 : chaque site est
   autonome) : corriger PxPlan ne doit pas changer cet écran, et l'inverse. */

/* ------------------------------------------------------------ les couleurs */
:root {
  color-scheme: light dark;
  --fond:    light-dark(#ffffff, #202020);
  --doux:    light-dark(#f0f1f3, #2d2d2d);
  --encre:   light-dark(#22252a, #f0f0f0);   /* le texte */
  --gris:    light-dark(#656b74, #b8bcc4);   /* le texte secondaire */
  --trait:   light-dark(#d2d6dc, #454545);   /* les bordures */
  --accent:  light-dark(#176ac1, #a1ceff);   /* le bleu */
  --danger:  light-dark(#c4314b, #ff99a4);
  --bon:     light-dark(#217346, #8fd0a8);
}

/* ------------------------------------------------------------ la base */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--fond); color: var(--encre); font: 12px/1.35 "Segoe UI", system-ui, sans-serif; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.marque { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.marque .ic { width: 19px; height: 19px; color: var(--accent); }

.bouton-principal { padding: 6px 14px; border: 0; border-radius: 4px; background: var(--accent); color: var(--fond); white-space: nowrap; }

/* ------------------------------------------------------ la page de connexion */
.page-connexion { min-height: 100dvh; display: grid; place-items: center; padding: 16px; background: var(--doux); }
.carte-connexion { width: min(360px, 100%); padding: 22px; background: var(--fond); border: 1px solid var(--trait); border-radius: 8px; box-shadow: 0 10px 30px #0000001a; }
.carte-connexion .marque { margin-bottom: 18px; }
.carte-connexion h1 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.carte-connexion form { display: grid; gap: 11px; }
.carte-connexion label { display: grid; gap: 4px; color: var(--gris); font-size: 11px; }
.carte-connexion input:not([type="checkbox"]) { padding: 7px 9px; border: 1px solid var(--trait); border-radius: 4px; background: var(--fond); color: var(--encre); font-size: 13px; }
.carte-connexion .case { display: flex; align-items: center; gap: 7px; color: var(--encre); font-size: 12px; }
.carte-connexion .petit { margin: -5px 0 0; color: var(--gris); font-size: 11px; }
.carte-connexion .bouton-principal { padding: 9px; font-size: 13px; }
.carte-connexion .bouton-principal:disabled { opacity: .6; }
.carte-connexion .erreur { margin: 12px 0 0; color: var(--danger); font-size: 12px; }
.carte-connexion .erreur:empty { display: none; }
.carte-connexion .erreur.bon { color: var(--bon); }

/* sur téléphone, un champ sous 16px fait zoomer Safari tout seul */
@media (max-width: 700px) {
  input { font-size: 16px !important; }
}