/*
 * Portail d'administration GITSS (auth.adm / auth.gitss.mr, Authelia 4.39.28).
 * Habillage calque sur la page de connexion DocApp (docapp.gitss.mr/login, theme sombre),
 * valeurs relevees le 07/10/2026 sur les styles calcules de la reference.
 * Feuille statique, servie par la meme origine, verifiee par empreinte SRI (cadrage v4, option D2).
 * Elle ne fait QUE de l'apparence : aucune regle ne masque un message de securite ni un champ.
 * Si une mise a jour d'Authelia change sa structure, la page reste fonctionnelle (retour a l'aspect Authelia).
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-variable.woff2') format('woff2');
}

:root {
  --gs-fond: #0e151b;
  --gs-carte: #162434;
  --gs-bord: #27353f;
  --gs-texte: #dbe6ee;
  --gs-titre: #f1f3f5;
  --gs-attenue: #a3b1be;
  --gs-discret: #6c8399;
  --gs-accent: #2b97a4;
  --gs-accent-fonce: #20778a;
  --gs-halo: rgba(43, 151, 164, 0.35);
  --gs-erreur-fond: rgba(220, 53, 69, 0.12);
  --gs-erreur: #f1a7af;
  --gs-police: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- Fond et typographie -------------------------------------------------------------- */
html, body, #root {
  background: var(--gs-fond) !important;
  color: var(--gs-texte) !important;
  font-family: var(--gs-police) !important;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#root *:not(svg):not(path) { font-family: var(--gs-police) !important; }

/* ---- Bouton de langue (discret, comme le bouton de theme de DocApp) ------------------- */
#language-button {
  background: transparent !important;
  color: var(--gs-attenue) !important;
  border: 1px solid var(--gs-bord) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
}
#language-button:hover { color: var(--gs-titre) !important; border-color: var(--gs-accent) !important; }

/* ---- Colonne centrale : 380 px comme la boite de DocApp -------------------------------- */
[id$="-stage"] > div { max-width: 436px !important; padding-left: 28px !important; padding-right: 28px !important; }

/* ---- Marque : logo + nom + slogan, au-dessus de la carte ------------------------------ */
[id$="-stage"] img[alt="Logo"] {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto !important;
}
[id$="-stage"] div:has(> img[alt="Logo"]) {
  padding: 0 0 22px 0 !important;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* Nom et slogan en deux pseudo-elements (::first-line ne s'applique pas a un element de flex). */
[id$="-stage"] div:has(> img[alt="Logo"])::before {
  content: "GITSS Administration";
  order: 2;
  color: var(--gs-titre);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.4px;
}
[id$="-stage"] div:has(> img[alt="Logo"])::after {
  content: "Global Information Technologies Solutions & Services";
  order: 3;
  margin-top: -10px;
  text-align: center;
  color: var(--gs-attenue);
  font-size: 12px;
  line-height: 18px;
}
[id$="-stage"] img[alt="Logo"] { order: 1; }

/* ---- Carte : titre + formulaire, fond #162434, bord #27353f, rayon 12 px --------------- */
[id$="-stage"] div:has(> h5) {
  background: var(--gs-carte);
  border: 1px solid var(--gs-bord);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  padding: 28px 28px 0 28px;
  text-align: left;
}
[id$="-stage"] h5 {
  color: var(--gs-titre) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  letter-spacing: -0.2px;
  margin: 0 !important;
}
#first-factor-stage div:has(> h5)::after {
  content: "Accédez à l'administration de GITSS.";
  display: block;
  color: var(--gs-attenue);
  font-size: 12px;
  line-height: 18px;
  margin-top: 4px;
}
[id$="-stage"] div:has(> h5) + div {
  background: var(--gs-carte);
  border: 1px solid var(--gs-bord);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  padding: 14px 28px 28px 28px !important;
  margin-top: 0 !important;
  box-shadow: 0 4px 6px -1px rgba(22, 34, 46, 0.08), 0 2px 4px -2px rgba(22, 34, 46, 0.04);
  text-align: left;
}

/* ---- Champs : etiquette au-dessus, 44 px, fond #0e151b, bord #27353f ------------------- */
#form-login .grid { gap: 14px !important; }
#form-login div.relative.w-full:has(> input) { display: flex; flex-direction: column-reverse; gap: 6px; }
#form-login div.relative.w-full:has(> input) > label {
  position: static !important;
  transform: none !important;
  translate: none !important; /* Tailwind 4 decale avec translate, pas transform */
  scale: none !important;
  color: var(--gs-texte) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  background: transparent !important;
  padding: 0 !important;
  left: auto !important;
  top: auto !important;
}
#root input[type="text"], #root input[type="password"], #root input[type="email"], #root input:not([type]) {
  height: 44px !important;
  background: var(--gs-fond) !important;
  color: var(--gs-texte) !important;
  border: 1px solid var(--gs-bord) !important;
  border-radius: 5px !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
#form-login input::placeholder { color: transparent !important; }
#root input:not(#username-textfield):not(#password-textfield)::placeholder { color: var(--gs-discret) !important; opacity: 1; }
#root input:focus, #root input:focus-visible {
  border-color: var(--gs-accent) !important;
  box-shadow: 0 0 0 3px var(--gs-halo) !important;
  outline: none !important;
}
/* Bouton d'affichage du mot de passe : reste dans le champ, sous l'etiquette */
#form-login div.relative.w-full:has(> div > #password-textfield) > button {
  top: auto !important; bottom: 0 !important; height: 44px; transform: none !important; translate: none !important;
  display: flex; align-items: center; color: var(--gs-discret) !important;
}

/* ---- Bouton principal : bleu canard, 44 px, rayon 5 px -------------------------------- */
#sign-in-button, [id$="-stage"] button[type="submit"], [id$="-stage"] .MuiButton-containedPrimary {
  width: 100%;
  height: 44px !important;
  background: var(--gs-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}
#sign-in-button:hover, [id$="-stage"] button[type="submit"]:hover { background: var(--gs-accent-fonce) !important; }
#sign-in-button:focus-visible, [id$="-stage"] button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px var(--gs-halo) !important; }

/* ---- Liens et boutons secondaires des autres etapes (second facteur, enrolement) -------- */
#root a { color: var(--gs-accent); }
[id$="-stage"] button:not([type="submit"]):not(#language-button):not([aria-label]) {
  color: var(--gs-texte) !important;
  border-color: var(--gs-bord) !important;
  border-radius: 5px !important;
}

/* ---- Pied : « Acces securise » (DocApp), puis la mention Authelia, conservee ------------ */
[id$="-stage"] div:has(> a[href*="authelia.com"]) {
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 20px;
}
[id$="-stage"] div:has(> a[href*="authelia.com"])::before {
  content: "Accès sécurisé · session protégée";
  padding-left: 18px;
  background: url('cadenas.svg') no-repeat left center / 12px 12px;
  color: var(--gs-discret);
  font-size: 11px;
  line-height: 17.6px;
}
#root a[href*="authelia.com"] { color: var(--gs-discret) !important; font-size: 10px !important; }

/* ---- Messages : lisibles sur fond sombre, jamais masques ------------------------------- */
#root [role="alert"] { border-radius: 5px !important; }

/* ---- Telephone (390 px) : marges reduites ---------------------------------------------- */
@media (max-width: 480px) {
  [id$="-stage"] > div { padding-left: 16px !important; padding-right: 16px !important; }
  [id$="-stage"] div:has(> h5) { padding: 22px 20px 0 20px; }
  [id$="-stage"] div:has(> h5) + div { padding: 14px 20px 22px 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #root * { transition: none !important; animation: none !important; }
}