/* Habillage Vigie du portail Authelia (auth.<domaine>) — PLAN.md 19.K.32.
 *
 * POURQUOI CE FICHIER EXISTE. Authelia n'offre que quatre thèmes (light, dark, grey, oled) et un
 * logo PNG (server.asset_path) : aucune feuille de style personnalisée. Caddy la sert lui-même
 * (/vigie-authelia.css) et l'ajoute aux pages HTML d'Authelia par le module replace-response
 * (deploy/Caddyfile.j2), juste avant </head>, donc APRÈS la feuille d'Authelia. La politique CSP
 * d'Authelia (`style-src 'self' 'nonce-…'`) admet une feuille de même origine : aucun en-tête
 * n'est assoupli.
 *
 * CE QU'ELLE FAIT. Uniquement de l'habillage, sur Authelia v4.39.28 (Tailwind 4, jetons à la
 * shadcn) : (1) les jetons de couleur d'Authelia sont redéfinis à partir de ceux de l'interface
 * (vigie/interface/static/app.css, recopiés ci-dessous — tests/test_authelia_deploy.py échoue si
 * une valeur diverge) ; (2) quelques règles ciblées : polices système, panneau bordé sans ombre,
 * contrôles à rayon 2 px, bouton sans capitales, nom « Vigie » à la place de l'avatar générique.
 * Elle ne masque aucun élément fonctionnel : second facteur, messages d'erreur, notifications,
 * choix de méthode, déconnexion restent tels qu'Authelia les rend. Le seul élément caché est
 * l'icône décorative de l'emplacement du logo (`[…] > div:first-child > svg`), remplacée par le nom.
 *
 * THÈME. `theme: auto` (deploy/authelia/configuration.yml.j2) : Authelia pose data-theme="light"
 * ou "dark" sur <html> selon prefers-color-scheme — le même signal que le thème sombre de
 * l'interface (docs/DESIGN.md §3.2). grey et oled, inutilisés, reçoivent le thème sombre.
 *
 * MONTÉE DE VERSION D'AUTHELIA. Les sélecteurs suivent la mise en page de la 4.39.28
 * (layouts.Login / layouts.Minimal) : `.min-h-[90vh] > div > .flex-col`. Après une montée, rejouer
 * l'aperçu aux trois largeurs avant production ; si la structure a changé, seules les règles
 * ciblées tombent, les jetons de couleur continuent de s'appliquer.
 *
 * Règles hors couche (@layer) : elles l'emportent sur les utilitaires d'Authelia, qui sont tous
 * dans `@layer utilities` — d'où des sélecteurs étroits, jamais `button` ou `input` nus.
 */

/* --- Jetons de Vigie (miroir d'app.css, valeurs claires) ------------------------------------ */
:root, [data-theme=light] {
  --vigie-texte: #1a1a1a;
  --vigie-texte-secondaire: #555;
  --vigie-texte-vide: #767676;
  --vigie-fond-page: #ffffff;
  --vigie-fond-encadre: #f6f6f6;
  --vigie-bordure: #ddd;
  --vigie-bordure-forte: #ccc;
  --vigie-accent: #4a7ab5;
  --vigie-erreur: #a30000;
  --vigie-succes-texte: #2f6b3a;
  --vigie-attention-texte: #6b4f00;
  --vigie-fond-controle: #ffffff;
  --vigie-fond-controle-secondaire: #f3f4f6;
  --vigie-texte-sur-accent: #ffffff;
}

/* --- Jetons de Vigie (miroir d'app.css, valeurs sombres) ------------------------------------ */
[data-theme=dark], [data-theme=grey], [data-theme=oled] {
  --vigie-texte: #e4e6e9;
  --vigie-texte-secondaire: #a3a9b2;
  --vigie-texte-vide: #8b919a;
  --vigie-fond-page: #14171a;
  --vigie-fond-encadre: #1e2226;
  --vigie-bordure: #2f353c;
  --vigie-bordure-forte: #454c55;
  --vigie-accent: #85acdf;
  --vigie-erreur: #ff9a90;
  --vigie-succes-texte: #9fd3ac;
  --vigie-attention-texte: #f0d79a;
  --vigie-fond-controle: #1b1f23;
  --vigie-fond-controle-secondaire: #252a30;
  --vigie-texte-sur-accent: #0e1116;
}

/* --- Jetons d'Authelia rebranchés sur ceux de Vigie ----------------------------------------- */
/* :root[data-theme] (0,2,0) passe devant [data-theme=dark] (0,1,0) d'Authelia. */
:root, :root[data-theme] {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --default-font-family: var(--font-sans);
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --background: var(--vigie-fond-page);
  --foreground: var(--vigie-texte);
  --card: var(--vigie-fond-page);
  --card-foreground: var(--vigie-texte);
  --popover: var(--vigie-fond-page);
  --popover-foreground: var(--vigie-texte);
  --primary: var(--vigie-accent);
  --primary-foreground: var(--vigie-texte-sur-accent);
  /* Le rose « secondary » d'Authelia (Déconnexion, Méthodes) devient l'accent : un seul accent. */
  --secondary: var(--vigie-accent);
  --secondary-foreground: var(--vigie-texte-sur-accent);
  --muted: var(--vigie-fond-encadre);
  --muted-foreground: var(--vigie-texte-secondaire);
  --accent: var(--vigie-fond-controle-secondaire);
  --accent-foreground: var(--vigie-texte);
  --destructive: var(--vigie-erreur);
  --success: var(--vigie-succes-texte);
  --warning: var(--vigie-attention-texte);
  --info: var(--vigie-accent);
  --border: var(--vigie-bordure);
  --input: var(--vigie-bordure-forte);
  --ring: var(--vigie-accent);
  /* rounded-md d'Authelia = --radius - 2px : 2 px sur les boutons, comme --rayon-controle. */
  --radius: 4px;
  --custom-icon: var(--vigie-texte);
  --custom-loading-bar: var(--vigie-accent);
  --divider: var(--vigie-bordure);
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  background-color: var(--vigie-fond-page);
  color: var(--vigie-texte);
}

/* --- Panneau de connexion -------------------------------------------------------------------- */
/* La colonne d'Authelia (max 444 px) devient un panneau bordé, sans ombre ni arrondi : une
   surface « encadrée » de docs/DESIGN.md §5.3, pas une carte flottante. */
.min-h-\[90vh\] > div > .flex-col {
  border: 1px solid var(--vigie-bordure);
  border-top: 3px solid var(--vigie-accent);
  background: var(--vigie-fond-page);
  padding: 24px 24px 16px;
}

/* Emplacement du logo : le nom « Vigie » à la manière de .brand (app.css) à la place de
   l'avatar générique. Un logo personnalisé (img, asset_path) resterait affiché. */
.min-h-\[90vh\] > div > .flex-col > div:first-child {
  padding: 0 0 4px;
}
.min-h-\[90vh\] > div > .flex-col > div:first-child > svg {
  display: none;
}
.min-h-\[90vh\] > div > .flex-col > div:first-child::before {
  content: "Vigie";
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vigie-texte);
}

/* Titre (« Se connecter », « Bonjour … ») : h2 de l'interface, pas un 24 px maigre. */
.min-h-\[90vh\] h5 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.min-h-\[90vh\] h6 {
  font-size: 14px;
  color: var(--vigie-texte-secondaire);
}

/* Colonne élargie de 32 px : la bordure et le retrait du panneau ne doivent pas faire passer à
   la ligne la sixième case du code à usage unique (mesuré à 800 px avec 444 px). */
.min-h-\[90vh\] > .max-w-\[444px\] {
  max-width: 476px;
}

/* Cadre de la méthode de second facteur : rayon et retrait de Vigie, sans changer son contenu. */
.min-h-\[90vh\] .rounded-\[10px\].border {
  border-radius: 2px;
  padding: 24px 16px;
}

/* --- Champs ---------------------------------------------------------------------------------- */
[data-slot="floating-input"],
#otp-input input {
  border-radius: 2px;
  border-color: var(--vigie-bordure-forte);
  background-color: var(--vigie-fond-controle);
}
[data-slot="floating-input"]:focus,
#otp-input input:focus {
  border-color: var(--vigie-accent);
  outline: 2px solid var(--vigie-accent);
  outline-offset: 0;
}
[data-slot="checkbox"] {
  border-radius: 2px;
  border-color: var(--vigie-bordure-forte);
}

/* --- Boutons --------------------------------------------------------------------------------- */
/* Les boutons d'Authelia sont en capitales : ceux de Vigie ne le sont pas (.btn, .btn-primary). */
button[data-variant] {
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
[data-slot="button"][data-variant="default"]:hover {
  background-color: var(--vigie-accent);
  filter: brightness(0.92);
}

/* --- Liens ----------------------------------------------------------------------------------- */
.min-h-\[90vh\] a {
  color: var(--vigie-accent);
  text-underline-offset: 2px;
}
/* « Powered by Authelia » reste (mention de la licence) mais en note discrète. */
.min-h-\[90vh\] a[href*="authelia.com"] {
  color: var(--vigie-texte-vide);
}

#language-button {
  color: var(--vigie-texte-secondaire);
}

/* --- Téléphone (~400 px) : pas de panneau, toute la largeur pour les champs ------------------ */
@media (max-width: 480px) {
  .min-h-\[90vh\] > div {
    padding-left: 16px;
    padding-right: 16px;
  }
  .min-h-\[90vh\] > div > .flex-col {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 20px 0 12px;
  }
}