/*
 * Page de connexion STEROS 360 — realm commun à TOUS les produits.
 * V3 (design H 14/08/2026, capture « Connexion Steros 360.dc ») : fond navy
 * gradient + constellations de traçabilité, lockup « Ster‑O(360)‑s » serif
 * (Playfair Display) + tagline « Healthcare Traceability Suite », carte
 * BLANCHE à bandeau 5 couleurs produits, bouton navy plein, signature
 * « Une plateforme · cinq solutions » en pied de carte.
 * Charte (PPT identité visuelle 2025) : navy #094058 + couleurs produits :
 * teal #218E87 (Sterilization) · magenta #E62384 (Fertility) · cyan #3FBEDE
 * (Lab) · violet #8F7FC2 (Inventory) · terracotta #E2725B (Gyneco).
 * Chargée APRÈS css/styles.css du parent keycloak.v2 → les redéfinitions
 * gagnent. Le lockup et la bande produits vivent dans template.ftl.
 */

:root {
  --steros-navy: #094058;
  --steros-navy-deep: #06222f;
  --steros-teal: #218e87;
  --steros-magenta: #e62384;
  --steros-cyan: #3fbede;
  --steros-violet: #8f7fc2;
  --steros-terra: #e2725b;
  --steros-ink: #1e2b3a;
  --steros-muted: #5f6e80;
  --steros-border: #c9d6de;
  --steros-font-serif: 'Playfair Display', Georgia, serif;
  --steros-font-sans: 'Jost', system-ui, 'Segoe UI', sans-serif;

  /* neutralise le logo image du parent : le lockup est en markup */
  --keycloak-logo-url: none;
  --keycloak-bg-logo-url: none;

  /* Gamme PatternFly v5 → identité plateforme */
  --pf-v5-global--primary-color--100: var(--steros-navy);
  --pf-v5-global--primary-color--200: var(--steros-navy-deep);
  --pf-v5-global--primary-color--dark-100: var(--steros-navy-deep);
  --pf-v5-global--active-color--100: var(--steros-cyan);
  --pf-v5-global--link--Color: var(--steros-teal);
  --pf-v5-global--link--Color--hover: var(--steros-navy);
  --pf-v5-global--FontFamily--text: var(--steros-font-sans);
  --pf-v5-global--FontFamily--heading: var(--steros-font-serif);
}

/* ── Fond : gradient navy + constellations (une seule ambiance) ── */
.login-pf body {
  background:
    url('../img/constellations.svg') center / cover no-repeat fixed,
    linear-gradient(155deg, #06222f 0%, #094058 58%, #0b4a63 100%) fixed;
}

.pf-v5-c-login {
  position: relative;
  z-index: 1;
}

/* ── En-tête : lockup « Ster‑O(360)‑s ® » + tagline (markup du template) ── */
#kc-header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 auto 1.6rem;
}

.steros-lockup {
  display: flex;
  align-items: flex-end;
  color: #ffffff;
  text-transform: none; /* le parent met le header en capitales — le lockup est en casse mixte */
  letter-spacing: normal;
  filter: drop-shadow(0 4px 18px rgba(4, 30, 44, 0.55));
}

.steros-lockup__word {
  font: 500 72px/1 var(--steros-font-serif);
  letter-spacing: 0.01em;
}

.steros-lockup__ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  margin: 0 5px 4px;
}

.steros-lockup__ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.steros-lockup__360 {
  font: 600 26px/1 var(--steros-font-sans);
  letter-spacing: 0.02em;
}

.steros-lockup__r {
  width: 16px;
  height: 16px;
  margin-left: 7px;
  transform: translateY(-34px);
}

.steros-lockup__r text {
  font: 600 17px Georgia, serif;
}

.steros-lockup__tagline {
  font: 300 15px/1 var(--steros-font-sans);
  color: #9fcbdd;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* compense le tracking du dernier caractère → centrage optique */
  text-transform: uppercase;
  text-align: center;
}

/* ── Carte : blanche, bandeau 5 couleurs produits, ombre profonde ──
   `margin auto` : la colonne de grille PatternFly fait 544px — sans lui la
   carte (520px) se cale à GAUCHE de sa colonne → axe décalé de ~12px vs le
   lockup et le copyright (retour H 20/08). */
.pf-v5-c-login__main {
  position: relative;
  width: 520px;
  max-width: calc(100vw - 2rem);
  margin: 0 auto;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.pf-v5-c-login__main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--steros-teal) 0 20%,
    var(--steros-magenta) 20% 40%,
    var(--steros-cyan) 40% 60%,
    var(--steros-violet) 60% 80%,
    var(--steros-terra) 80% 100%
  );
}

.pf-v5-c-login__main-header {
  padding: 38px 46px 0;
  align-items: flex-start;
}

#kc-page-title {
  font: 600 27px/1.25 var(--steros-font-serif);
  color: var(--steros-navy);
  letter-spacing: 0;
}

.pf-v5-c-login__main-body {
  padding: 22px 46px 34px;
}

/* ── Sélecteur de langue : pastille bordée, dans le ton de la carte ── */
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control {
  border: 1px solid #d8e2e8;
  border-radius: 8px;
  background: #ffffff;
}

.pf-v5-c-login__main-header-utilities select {
  font: 500 13px var(--steros-font-sans);
  color: var(--steros-navy);
}

/* ── Champs : bordure douce, coins 9px (exit le soulignement PatternFly) ── */
.pf-v5-c-form-control {
  border: 1.5px solid var(--steros-border);
  border-radius: 9px;
  background: #ffffff;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  content: none;
}

.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select {
  padding: 0.72rem 0.9rem;
  font: 400 15px var(--steros-font-sans);
  color: var(--steros-ink);
  background: transparent;
  border: none;
}

.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > input:focus-visible,
.pf-v5-c-form-control > select:focus,
.pf-v5-c-form-control > select:focus-visible {
  outline: none;
}

.pf-v5-c-form-control:focus-within {
  border-color: var(--steros-cyan);
  box-shadow: 0 0 0 4px rgba(63, 190, 222, 0.22);
}

/* mot de passe : le CADRE est porté par l'input-group (l'œil vit DEDANS) */
.pf-v5-c-input-group {
  border: 1.5px solid var(--steros-border);
  border-radius: 9px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pf-v5-c-input-group:focus-within {
  border-color: var(--steros-cyan);
  box-shadow: 0 0 0 4px rgba(63, 190, 222, 0.22);
}

.pf-v5-c-input-group .pf-v5-c-form-control,
.pf-v5-c-input-group .pf-v5-c-form-control:focus-within {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  border: none;
  background: transparent;
  color: var(--steros-muted);
  box-shadow: none;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after {
  content: none;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover {
  color: var(--steros-navy);
}

/* ── Libellés : Jost, navy, légèrement espacés ── */
.pf-v5-c-form__label {
  margin-bottom: 0.4rem;
  padding-bottom: 0;
}

.pf-v5-c-form__label-text {
  font: 500 13px var(--steros-font-sans);
  color: var(--steros-navy);
  letter-spacing: 0.04em;
}

.pf-v5-c-form {
  --pf-v5-c-form--m-horizontal__group--Gap: 1.35rem;
  gap: 1.35rem;
}

/* « Mot de passe oublié ? » : teal, aligné à droite sous le champ */
.pf-v5-c-form .pf-v5-c-helper-text {
  justify-content: flex-end;
}

.pf-v5-c-form .pf-v5-c-helper-text a {
  font: 500 13px var(--steros-font-sans);
  color: var(--steros-teal);
  text-decoration: none;
}

.pf-v5-c-form .pf-v5-c-helper-text a:hover {
  color: var(--steros-navy);
}

input[type='checkbox'] {
  accent-color: var(--steros-teal);
}

/* ── Bouton primaire : navy plein, capitales espacées ── */
.pf-v5-c-button.pf-m-primary {
  height: 50px;
  border: none;
  border-radius: 9px;
  background: var(--steros-navy);
  color: #ffffff;
  font: 600 15px var(--steros-font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(9, 64, 88, 0.35);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.pf-v5-c-button.pf-m-primary:hover {
  background: #0b4a63;
  box-shadow: 0 10px 26px rgba(9, 64, 88, 0.45);
  transform: translateY(-1px);
}

.pf-v5-c-button.pf-m-primary:active,
.pf-v5-c-button.pf-m-primary:focus {
  background: var(--steros-navy-deep);
  transform: translateY(0);
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--steros-navy);
  --pf-v5-c-button--m-secondary--BorderColor: rgba(9, 64, 88, 0.45);
  --pf-v5-c-button--m-secondary--hover--Color: var(--steros-navy);
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--steros-navy);
  border-radius: 9px;
}

/* ── Signature produits : bande grise en pied de carte (markup template) ── */
.steros-products {
  /* PatternFly (`.pf-v5-c-login__main > :last-child`) impose son padding bas
     via cette variable — on la redéfinit plutôt que de surenchérir en spécificité */
  --pf-v5-c-login__main-footer--PaddingBottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #eaf0f3;
  background: #f9fbfc;
  padding: 16px 46px 18px;
}

.steros-products__label {
  font: 500 10.5px var(--steros-font-sans);
  color: #8ca0ac;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.steros-products__list {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.steros-products__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 12.5px var(--steros-font-sans);
  color: var(--steros-navy);
  white-space: nowrap;
}

.steros-products__item::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot, var(--steros-navy));
}

.steros-products__item--sterilization { --dot: var(--steros-teal); }
.steros-products__item--fertility     { --dot: var(--steros-magenta); }
.steros-products__item--lab           { --dot: var(--steros-cyan); }
.steros-products__item--inventory     { --dot: var(--steros-violet); }
.steros-products__item--gyneco        { --dot: var(--steros-terra); }

/* le pied PF (social providers, vide chez nous) ne doit pas créer d'espace
   (:empty ne matche pas un nœud blanc → on annule son padding) */
.pf-v5-c-login__main-footer {
  padding: 0;
}

/* ── Copyright sous la carte (footer.ftl) ──
   DANS LE FLUX du conteneur (pas fixed : un fixed se centre sur le VIEWPORT
   alors que la carte se centre sur la grille PatternFly → axes décalés de
   ~12 px, retour H 20/08 ; et il chevauchait la carte sur petits écrans). */
.steros-copyright {
  margin: 26px auto 18px;
  text-align: center;
  font: 400 13px var(--steros-font-sans);
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

/* ── Petits écrans : carte CENTRÉE + lockup/typo recalibrés ──
   PatternFly fige la grille du conteneur à 544px ; sous cette largeur le
   conteneur repasse en bloc pleine largeur SANS centrer la carte (collée à
   gauche sur téléphone). Le desktop (design V3 validé H 14/08) ne bouge pas. */
@media (max-width: 640px) {
  .pf-v5-c-login__container {
    width: 100%;
    padding: 0 16px;
  }

  .pf-v5-c-login__main {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
  }

  #kc-header-wrapper { gap: 10px; margin-bottom: 1.2rem; }
  .steros-lockup__word { font-size: 44px; }
  .steros-lockup__ring { width: 51px; height: 51px; margin: 0 4px 3px; }
  .steros-lockup__360 { font-size: 16px; }
  .steros-lockup__r { width: 12px; height: 12px; margin-left: 5px; transform: translateY(-21px); }
  .steros-lockup__r text { font-size: 13px; }
  .steros-lockup__tagline { font-size: 11px; letter-spacing: 0.3em; text-indent: 0.3em; }

  #kc-page-title { font-size: 21px; }
  .pf-v5-c-login__main-header { padding: 26px 24px 0; }
  .pf-v5-c-login__main-body { padding: 18px 24px 26px; }
  .steros-products { padding: 14px 24px 16px; }
  .steros-copyright { margin: 18px auto 12px; font-size: 11.5px; }
}