/* background-position 0% 0% (pas "center") : valeur exacte mesuree sur i02
(getComputedStyle(document.querySelector('app-login-page')).backgroundPosition) - le
cadrage de la photo differe visiblement selon l'ancrage choisi. */
body {
  background-image: url("https://intersport-test.octoplus.frequentiel.net/security/public/theme/login-background") !important;
  background-size: cover !important;
  background-position: 0% 0% !important;
  background-repeat: no-repeat !important;
}

/* flex-direction: column (empile header/logo puis carte) - constate en reel sur i01 :
row (le defaut du theme de base) place header et carte cote a cote, pas l'un au-dessus
de l'autre. Voile sombre (rgba(0,0,0,.4)) sur toute la page, comme .auth-container cote
Angular - repose sur ce meme flex container puisqu'il couvre deja tout le viewport. */
.login-pf-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.4);
}

/* #kc-header et .card-pf sont deux boites SOEURS dans le DOM de base (pas une a
l'interieur de l'autre) - contrairement au rendu cible (i02, un seul panneau blanc
contenant logo + formulaire). Fusion visuelle : meme fond blanc sur les deux, coins
arrondis seulement sur les bords exterieurs (haut pour le header, bas pour la carte),
aucune marge entre les deux. 518px = largeur totale mesuree de .auth-wrapper (i02). */
#kc-header,
#kc-header-wrapper {
  width: 100% !important;
  max-width: 518px !important;
}

/* position/z-index : constate en reel sur i01 - #kc-header a bien un fond blanc opaque,
mais .card-pf (sibling suivant dans le DOM, peint apres donc par-dessus) porte un
box-shadow (0 8px 32px) qui deborde vers le haut et bave visuellement sur le bas du
header, meme si celui-ci est bien blanc en dessous (constate via getComputedStyle,
"gris" = l'ombre du card qui se superpose, pas une couleur de fond incorrecte). Passer
le header dans un contexte d'empilement propre (z-index) le fait peindre par-dessus
cette ombre plutot que en-dessous. */
#kc-header {
  position: relative !important;
  z-index: 1 !important;
  background: #ffffff !important;
  border-radius: 15px 15px 0 0 !important;
  padding: 2rem 1.5rem 0 !important;
  margin-bottom: 0 !important;
}

/* Remplace le nom de realm texte par le vrai logo Octo+. !important + width explicite
constates necessaires en reel sur i01 : #kc-header/#kc-header-wrapper se retrouvent a
largeur 0 une fois le texte masque par text-indent (plus rien pour leur donner une
largeur intrinseque en flex item), ce qui rend le background-image invisible meme
correctement pose - d'ou une largeur forcee. Hauteur 44px = celle mesuree de
o-logo-octoplus (i02) - 60px rendait le logo trop grand. */
#kc-header-wrapper {
  display: block !important;
  height: 44px !important;
  margin: 0 auto !important;
  background-image: url("https://intersport-test.octoplus.frequentiel.net/security/public/theme/login-logo") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

.login-pf-page .card-pf {
  width: 100%;
  max-width: 518px;
  background: #ffffff;
  border: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  padding: 1rem 1.5rem 2rem;
  margin-top: 0;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* Bouton oeil (afficher/masquer le mot de passe) : absent du rendu cible (i02) - le
masquer plutot que de le laisser en style Keycloak par defaut, non homogene avec le
reste. Le champ reprend toute la largeur laissee libre. */
.pf-c-input-group button {
  display: none !important;
}

.pf-c-input-group {
  display: block !important;
}

.pf-c-input-group input {
  width: 100% !important;
}

#kc-page-title {
  display: none;
}

.login-pf-page label,
.login-pf-page .pf-c-form__label-text,
.login-pf-page .control-label {
  color: #333333;
  font-weight: 500;
  font-size: 15.2px;
}

.login-pf-page #username,
.login-pf-page #password,
.login-pf-page .pf-c-form-control {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #cccccc;
  border-radius: 6px;
  font-size: 15.2px;
}

#kc-form-buttons input[type="submit"],
#kc-form-buttons .pf-c-button.pf-m-primary,
#kc-login {
  border-radius: 6px;
  width: 100%;
  height: 46px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  background-color: #ff6980;
  border-color: #ff6980;
  margin: 0 auto;
  display: block;
}

/* ORET-11236 : page de login d'un tenant avec Identity Brokering. Keycloak affiche par defaut le
formulaire ET les boutons des IdP, sans option "boutons seuls" : on s'appuie sur :has() (Chrome
105+, Firefox 121+, Safari 15.4+) et sur deux marqueurs stables du DOM - #kc-social-providers
(present uniquement si un IdP est visible) et le client_id dans l'action du formulaire.
- Page normale avec IdP : formulaire masque, seul le bouton reste (+ texte d'accroche).
- Page des comptes locaux (/support, client octoplus-local-accounts-login) : boutons IdP
  masques, formulaire seul, avec ou sans IdP.
Ergonomie seulement, pas un controle de securite : les utilisateurs du client n'ont pas de mot
de passe local (crees par le First Broker Login). */
/* Avant la decision du script (login-mode.js) : bouton seul si un IdP est present (mise en page la
plus frequente), formulaire seul sur la page des comptes locaux - evite d'afficher les deux. */
body:not(.octo-login-both):has(#kc-social-providers):not(:has(#kc-form-login[action*="client_id=octoplus-local-accounts-login"])) #kc-form-wrapper {
  display: none !important;
}

body:has(#kc-form-login[action*="client_id=octoplus-local-accounts-login"]) #kc-social-providers,
body.octo-login-local #kc-social-providers {
  display: none !important;
}

/* Texte du bouton de l'IdP : masque jusqu'a la decision du script (login-mode.js, octo-login-ready), qui
le remplace eventuellement par le parametre customer-name - evite d'afficher brievement le displayName. */
body:not(.octo-login-ready) #kc-social-providers .kc-social-provider-name {
  visibility: hidden;
}

/* Page avec IdP : la mise en page (bouton seul ou deux onglets) depend de la reponse de sso-infos. Contenu de
la carte masque jusqu'a la decision du script, sinon la mise en page par defaut (bouton seul) s'affiche
brievement avant les onglets. visibility (pas display) : la place est gardee, pas de saut de mise en page.
Filet de securite sans JS : contenu reaffiche au bout de 3 s quoi qu'il arrive (script bloque ou absent). */
body:not(.octo-login-ready):has(#kc-social-providers):not(:has(#kc-form-login[action*="client_id=octoplus-local-accounts-login"])) #kc-content-wrapper {
  visibility: hidden;
  animation: octo-login-reveal 0s linear 3s forwards;
}

@keyframes octo-login-reveal {
  to {
    visibility: visible;
  }
}

/* Confirmation de deconnexion : validee automatiquement par login-mode.js - contenu masque pendant l'envoi ; le
bouton reapparait au bout de 3 s si la deconnexion n'a pas abouti (clic manuel toujours possible). */
#kc-logout-confirm {
  visibility: hidden;
  animation: octo-login-reveal 0s linear 3s forwards;
}

/* Page d'erreur : lien renomme "Back to sign in" par login-mode.js - masque jusque-la (meme filet de 3 s). */
body:not(.octo-login-ready) #kc-error-message #backToApplication {
  visibility: hidden;
  animation: octo-login-reveal 0s linear 3s forwards;
}

/* Mode deux onglets (mire legacy i02) : un seul contenu visible selon l'onglet selectionne. */
body.octo-login-both.octo-tab-internal #kc-social-providers,
body.octo-login-both.octo-tab-sso #kc-form-wrapper {
  display: none !important;
}

body.octo-login-both.octo-tab-internal #kc-form-wrapper {
  display: block !important;
}

/* Onglets : mesures sur le DOM reel de i02 (2026-09-25) - 50/50, hauteur 43px, 15.2px gras en
capitales, #666666 inactif, #424242 + soulignement actif. */
#octo-login-tabs {
  display: flex;
  width: 100%;
  margin: 0 0 1rem;
  border-bottom: 1px solid #e0e0e0;
}

#octo-login-tabs button {
  flex: 1 1 50%;
  height: 43px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #666666;
  font-size: 15.2px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

body.octo-tab-internal #octo-login-tab-internal,
body.octo-tab-sso #octo-login-tab-sso {
  color: #424242;
  border-bottom-color: #424242;
}

/* Separateur "ou" entre formulaire et boutons : sans objet quand le formulaire est masque. */
#kc-social-providers hr {
  display: none !important;
}

#kc-social-providers h2,
#kc-social-providers h4,
#kc-social-providers .kc-social-section-text {
  color: #333333;
  font-size: 15.2px;
  font-weight: 500;
  text-align: center;
  margin: 0.5rem 0 1rem;
}

/* Liste des boutons : pleine largeur de la carte, comme le bouton "Sign in" du formulaire. */
#kc-social-providers ul,
#kc-social-providers li {
  display: block !important;
  width: 100% !important;
  list-style: none;
  padding: 0 !important;
  margin: 0 0 0.75rem !important;
}

/* Bouton de l'IdP client : meme rendu que le bouton de l'onglet "Connexion SSO" de l'ancienne
mire Angular (mesure sur le DOM reel de i02, getComputedStyle, 2026-09-25) : bleu #278cd4
(rgb 39,140,212), texte blanc 16px/600, rayon 6px, hauteur 46px, pleine largeur. */
#kc-social-providers a[id^="social-"] {
  border-radius: 6px;
  width: 100%;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 600;
  background-color: #278cd4 !important;
  border: 1px solid #278cd4 !important;
  text-decoration: none;
}

#kc-content-wrapper #kc-info,
.alert-error,
.pf-c-alert,
.kc-feedback-text {
  color: #b71c1c;
}