/* Page d'accueil et de connexion, partagée par DataCatalog (index.html) et le Portail Métiers
   (portail/index.html) : une seule page de connexion pour les deux applications, qui
   partagent aussi le compte et la session. Sortie de styles.css pour que le portail la
   charge sans le reste de la feuille de DataCatalog. */

/* ---------- Accueil / connexion ----------
   Handoff « Accueil Connexion », haute fidélité : une scène sombre — le globe
   à droite, la phrase et la carte à gauche. Ses valeurs sont celles du design system FDG et non
   celles de l'application ; elles vivent donc dans des jetons propres à la page. La scène est la
   même dans les deux thèmes : c'est une image de marque, pas une surface de travail. */
.auth-hero {
  --auth-accent: #457b9d;
  --auth-accent-hover: #3a6a89;
  --auth-accent-active: #305873;
  --auth-tint: #eef5f8;
  --auth-ring: #d9e9ef;
  --auth-sky: #a8dadc;
  --auth-ink: #1d3557;
  --auth-ink-label: #384b60;
  --auth-ink-2: #506278;
  --auth-placeholder: #96a6b8;
  --auth-hairline: #dde3ea;
  --auth-control: #c1cbd7;
  --auth-danger: #e63946;
  --auth-danger-bg: #fbe4e6;
  --auth-danger-fg: #a1222d;
  --auth-danger-bd: #f3b9bf;
  --auth-night: #0b1626;
  --auth-veil: 8, 18, 34;
  --auth-paper: #ffffff;
  --auth-gutter: clamp(24px, 5vw, 72px);

  position: relative; min-height: 100vh; display: flex; flex-direction: column;
  font-family: Inter, system-ui, sans-serif; color: var(--auth-paper);
  background-color: var(--auth-night);
  background-image: url('../assets/fond-ecran.png');
  background-image: image-set(url('../assets/fond-ecran.webp') type('image/webp'), url('../assets/fond-ecran.png') type('image/png'));
  background-size: cover; background-position: right center;
  overflow: hidden;
}
/* Voile de lisibilité : opaque sous le texte, transparent sur le globe. */
.auth-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(var(--auth-veil), 0.92) 0%, rgba(var(--auth-veil), 0.75) 38%,
    rgba(var(--auth-veil), 0.15) 70%, rgba(var(--auth-veil), 0) 100%);
}
.auth-main { position: relative; flex: 1; display: flex; align-items: center; padding: 24px var(--auth-gutter) 48px; }
.auth-column { display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 520px; }
.auth-intro { display: flex; flex-direction: column; gap: 16px; }
.auth-eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--auth-sky);
}
.auth-title {
  margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; font-weight: 700;
  letter-spacing: -0.02em; text-wrap: pretty; color: var(--auth-paper);
}

.auth-card {
  background: var(--auth-paper); color: var(--auth-ink);
  border: 1px solid var(--auth-hairline); border-radius: 16px; padding: 32px;
  box-shadow: 0 24px 48px rgba(var(--auth-veil), 0.45);
  max-width: 420px; width: 100%;
}
.auth-form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.auth-card-head { display: flex; flex-direction: column; gap: 4px; }
.auth-card-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--auth-ink); }
.auth-card-sub { margin: 0; font-size: 14px; color: var(--auth-ink-2); }

.auth-banner {
  background: var(--auth-danger-bg); color: var(--auth-danger-fg); border: 1px solid var(--auth-danger-bd);
  border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.45;
}
.auth-banner[data-tone="info"] { background: var(--auth-tint); color: var(--auth-accent-active); border-color: var(--auth-ring); }

.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.auth-label { font-size: 13px; font-weight: 500; color: var(--auth-ink-label); }
.auth-link { font-size: 13px; font-weight: 500; color: var(--auth-accent-hover); text-decoration: none; }
.auth-link:hover { color: var(--auth-accent-active); text-decoration: underline; }
.auth-input {
  height: 42px; padding: 0 12px; border-radius: 8px; border: 1.5px solid var(--auth-control);
  font: 400 15px Inter, system-ui, sans-serif; color: var(--auth-ink); background: var(--auth-paper);
  outline: none; width: 100%;
}
.auth-input::placeholder { color: var(--auth-placeholder); }
.auth-input:focus { border-color: var(--auth-accent); box-shadow: 0 0 0 3px var(--auth-ring); }
.auth-input.is-invalid { border-color: var(--auth-danger); }
.auth-password { position: relative; display: flex; }
.auth-password .auth-input { flex: 1; padding-right: 84px; }
.auth-reveal {
  position: absolute; right: 6px; top: 6px; height: 30px; padding: 0 10px;
  border: none; border-radius: 6px; background: var(--auth-tint); color: var(--auth-accent-active);
  font: 500 12px Inter, system-ui, sans-serif; cursor: pointer;
}
.auth-reveal:focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 1px; }

.auth-remember { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--auth-ink-label); cursor: pointer; }
.auth-remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--auth-accent); }

.auth-submit {
  height: 44px; border: none; border-radius: 8px;
  background: var(--auth-accent); color: var(--auth-paper);
  font: 600 15px Inter, system-ui, sans-serif; cursor: pointer;
  transition: background 140ms ease-out, transform 140ms ease-out;
}
.auth-submit:hover { background: var(--auth-accent-hover); }
.auth-submit:active { background: var(--auth-accent-active); transform: scale(0.98); }
.auth-submit:focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 2px; }
.auth-submit:disabled { cursor: progress; background: var(--auth-accent); transform: none; }

/* Version livrée : la barre latérale n'existe pas encore, c'est ici qu'on la lit. Collée au
   bouton et en retrait de teinte, pour qu'on la trouve sans qu'elle se lise avant lui. */
.auth-version {
  margin-top: -8px; text-align: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--auth-placeholder);
}

@media (prefers-reduced-motion: reduce) {
  .auth-submit { transition: none; }
  .auth-submit:active { transform: none; }
}