/* Habillage du portail de connexion - inspection CD93.
 *
 * Le thème « basic » de caddy-security rend une carte blanche générique, en
 * anglais, qui ne ressemble à rien de ce qu'on sert derrière. Cette feuille est
 * injectée par-dessus la sienne : elle reprend les couleurs de l'application
 * d'inspection, dont le thème sombre est celui par défaut.
 *
 * Aucune image n'est ajoutée : le fond est un dégradé, ce qui évite d'ouvrir un
 * fichier de plus en accès public - la liste des ressources servies avant
 * authentification est volontairement close, et elle tient en une ligne.
 */

:root {
  --marque: #2fa5a8;
  --marque-vive: #46c3c6;
  --fond: #0e1114;
  --surface: #191e23;
  --surface-haute: #232a31;
  --bordure: rgba(255, 255, 255, 0.09);
  --texte: #e9edf1;
  --texte-doux: #9aa6b2;
  --texte-faible: #7d8a96;
}

html { background: var(--fond) !important; }

body {
  background: transparent !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  color: var(--texte) !important;
}

/* Deux halos très sourds, l'un turquoise, l'autre vert : la palette de la carte,
   sans rien emprunter à la donnée elle-même. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px 520px at 22% 18%, rgba(47, 165, 168, 0.16), transparent 62%),
    radial-gradient(680px 480px at 82% 84%, rgba(159, 211, 86, 0.10), transparent 60%),
    linear-gradient(160deg, #101418 0%, #0c0f12 100%);
}

.app-page {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

/* La carte centrale est `.app-container`, et non le `.bg-white` du thème, qui
   n'est qu'une enveloppe interne : c'est elle qui portait le blanc visible. */
.app-container {
  background: var(--surface) !important;
  border: 1px solid var(--bordure) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  padding: 30px 28px 26px !important;
  max-width: 400px !important;
}

/* Les enveloppes internes du thème ne peignent plus rien : la carte a déjà son
   fond, et leurs bordures dessinaient des cadres dans le cadre. */
.bg-white,
.bg-white.border,
.app-container > div[class*="bg-["] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  padding: 0 !important;
}

.app-content { text-align: center !important; }

.logo-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  margin-bottom: 4px !important;
}

.logo-img {
  width: 148px !important;
  max-width: 62% !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* Le nom du service est écrit par le script, pas par le thème. */
.logo-txt { display: none !important; }

.portail-titre {
  margin: 14px 0 2px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--texte) !important;
}

.portail-soustitre {
  margin: 0 auto 18px !important;
  max-width: 280px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--texte-doux) !important;
}

.portail-mention {
  margin: 18px auto 0 !important;
  max-width: 300px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--bordure) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: var(--texte-faible) !important;
}

/* Champs de saisie. */
.app-inp-box {
  background: var(--surface-haute) !important;
  border: 1px solid var(--bordure) !important;
  border-radius: 12px !important;
  text-align: left !important;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.app-inp-box:focus-within {
  border-color: var(--marque) !important;
  box-shadow: 0 0 0 3px rgba(47, 165, 168, 0.22) !important;
}

.app-inp-txt {
  background: transparent !important;
  color: var(--texte) !important;
}

.app-inp-txt::placeholder { color: var(--texte-faible) !important; }

.app-inp-prf-img,
.las.la-user,
.las.la-unlock,
.las.la-key { color: var(--marque-vive) !important; }

/* Bouton principal. */
.app-btn-pri {
  background: var(--marque) !important;
  border-color: var(--marque) !important;
  color: #06272a !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: background 160ms ease, transform 160ms ease;
}

/* Le second écran pose deux boutons secondaires à côté du principal, qui passait
   alors sur deux lignes. */
.app-btn-pri { white-space: nowrap !important; padding-left: 18px !important; padding-right: 18px !important; }

.app-btn-pri:hover {
  background: var(--marque-vive) !important;
  transform: translateY(-1px);
}

.app-btn-sec {
  background: var(--surface-haute) !important;
  border-color: var(--bordure) !important;
  color: var(--texte-doux) !important;
  border-radius: 12px !important;
}

/* Les intitulés de champ restent sobres : l'accent turquoise est réservé à
   l'action, sans quoi tout l'écran crie. */
.text-primary-700,
.text-primary-600 { color: var(--texte-doux) !important; font-weight: 500 !important; }

/* `.text-lg` habille l'intitulé du champ : il suit donc le gris des intitulés,
   et non l'accent, que seul le bouton porte. */
.text-lg { color: var(--texte-doux) !important; font-size: 13.5px !important; }

a .text-lg, a:hover .text-lg { color: var(--marque-vive) !important; }

/* Le navigateur pose son propre anneau bleu sur le champ autofocus : il est
   remplacé par celui de la marque, sinon la seule couleur vive de l'écran n'est
   pas la nôtre. */
.app-inp-txt:focus,
.app-inp-box:focus-within .app-inp-txt { outline: none !important; box-shadow: none !important; }

/* Messages d'erreur du portail. */
.app-inp-err,
.text-red-600,
.text-red-500 { color: #e8837c !important; }

/* Badge décoratif du thème, sans usage ici. */
.la-qrcode { display: none !important; }