/* Thème de connexion MUCODEC (20/10/2026). Palette KB-DIDSI (docs/charte/PALETTE.md) : marine #0F2464, rouge #E30A2A ;
   zone sombre en bleu de nuit dérivé de la marine (même teinte, plus sombre) : plus aucun noir sur la page.
   Contrastes (WCAG 2.1, mesurés par scripts/contrastes-connexion.py) : voir docs/connexion-theme.md.
   Le rouge n'est jamais seul porteur de l'erreur (fond rosé, icône et message). */
:root {
  --mucodec-marine: #0F2464;
  --mucodec-nuit: #0B1A40;
  --mucodec-nuit-fonce: #081333;
  --mucodec-rouge: #E30A2A;
  --mucodec-rouge-fonce: #B8081F;
  --mucodec-marine-clair: #C7D2EC;
  --mucodec-texte: #1B2430;
  --mucodec-erreur-fond: #FDEDEF;
  --pf-v5-global--primary-color--100: var(--mucodec-marine);
  --pf-v5-global--primary-color--200: var(--mucodec-nuit);
  --pf-v5-global--link--Color: var(--mucodec-marine);
  --pf-v5-global--link--Color--hover: var(--mucodec-nuit);
  --pf-v5-global--Color--100: var(--mucodec-texte);
}

/* Zone sombre : bleu de nuit (remplace le fond noir et son motif de polygones) */
html, body#keycloak-bg, .pf-v5-c-login {
  background-color: var(--mucodec-nuit);
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(199, 210, 236, .10), transparent 60%),
    linear-gradient(165deg, var(--mucodec-marine) 0%, var(--mucodec-nuit) 55%, var(--mucodec-nuit-fonce) 100%);
  background-attachment: fixed;
}
.pf-v5-c-login { min-height: 100vh; padding: 48px 16px; }
/* Une seule colonne de 28rem au plus (le thème parent impose 34rem, plus large que l'écran d'un téléphone) */
.pf-v5-c-login__container { grid-template-columns: minmax(0, 28rem); justify-content: center; max-width: none; width: 100%; }
:root { --keycloak-card-top-color: transparent; }

/* En-tête dans la zone sombre : logo sur pastille blanche (le logo marine et rouge disparaîtrait sur fond sombre) */
#kc-header.pf-v5-c-login__header { display: flex; justify-content: center; margin: 0 0 28px; padding: 0; }
.mucodec-marque { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mucodec-pastille {
  display: inline-block; background: #fff; border-radius: 16px; padding: 12px 18px;
  box-shadow: 0 10px 30px rgba(3, 9, 30, .45), 0 0 0 1px rgba(255, 255, 255, .08);
}
.mucodec-pastille img { display: block; width: 132px; height: auto; }
.mucodec-titre {
  color: #fff; font-size: 1.0625rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-align: center;
}
.mucodec-titre::after {
  content: ""; display: block; width: 40px; height: 3px; margin: 10px auto 0; border-radius: 2px; background: var(--mucodec-rouge);
}

/* Carte du formulaire */
.pf-v5-c-login__main {
  background: #fff; border-radius: 14px; border-top: 0; overflow: hidden;
  box-shadow: 0 18px 48px rgba(3, 9, 30, .40), 0 2px 6px rgba(3, 9, 30, .20);
}
.pf-v5-c-login__main-header, div.pf-v5-c-login__main-header { padding: 32px 36px 4px; border-top: 0; grid-template-columns: 1fr auto; }
.pf-v5-c-login__main-body { padding: 16px 36px 32px; }
.pf-v5-c-login__main-footer { padding: 0 36px; }
#kc-page-title.pf-v5-c-title { font-size: 1.5rem; line-height: 1.25; font-weight: 600; color: var(--mucodec-marine); }
.pf-v5-c-form__label-text { font-weight: 600; font-size: .875rem; color: var(--mucodec-texte); }
.pf-v5-c-form { gap: 16px; }

/* Champs : bordure rouge MUCODEC 1,5 px ; focus visible = bordure 2 px + anneau marine 3 px séparé par un liseré blanc */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--before--BorderColor: transparent;
  --pf-v5-c-form-control--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--hover--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--focus--after--BorderBottomColor: transparent;
  border: 1.5px solid var(--mucodec-rouge); border-radius: 8px; background: #fff;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.pf-v5-c-form-control::before, .pf-v5-c-form-control::after { border: 0 !important; }
.pf-v5-c-form-control > input { min-height: 42px; padding-left: 12px; font-size: 1rem; color: var(--mucodec-texte); }
.pf-v5-c-form-control:hover { border-color: var(--mucodec-rouge-fonce); }
.pf-v5-c-form-control:focus-within {
  border: 2px solid var(--mucodec-rouge);
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--mucodec-marine);
}
.pf-v5-c-form-control > input:focus, .pf-v5-c-form-control > input:focus-visible { outline: none; }
.pf-v5-c-form-control.pf-m-readonly { border-style: dashed; background: #F4F6F9; }

/* Mot de passe : le champ et le bouton « afficher » forment un seul bloc à bordure rouge */
.pf-v5-c-input-group > .pf-v5-c-input-group__item:first-child > .pf-v5-c-form-control { border-radius: 8px 0 0 8px; }
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  border: 1.5px solid var(--mucodec-rouge); border-left: 0; border-radius: 0 8px 8px 0;
  color: var(--mucodec-marine); background: #fff; min-width: 46px;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after { border: 0; }
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:focus-visible { outline: 3px solid var(--mucodec-marine); outline-offset: 2px; }

/* Erreur : bordure 2 px, fond rosé, icône et message (le rouge seul ne porte pas l'information) */
.pf-v5-c-form-control.pf-m-error { border-width: 2px; background: var(--mucodec-erreur-fond); }
.pf-v5-c-helper-text__item-text.pf-m-error, .kc-feedback-text { font-weight: 600; }
.pf-v5-c-alert { border-radius: 8px; }

/* Bouton principal : marine, ombre légère, focus visible (anneau rouge décalé) */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--mucodec-marine);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--mucodec-nuit);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--mucodec-nuit);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--mucodec-nuit-fonce);
  background-color: var(--mucodec-marine);
  min-height: 46px; margin-top: 10px; border-radius: 8px; font-weight: 600; font-size: 1rem;
  box-shadow: 0 4px 12px rgba(15, 36, 100, .28);
}
.pf-v5-c-button.pf-m-primary:hover { background-color: var(--mucodec-nuit); }
.pf-v5-c-button.pf-m-primary:focus-visible { outline: 3px solid var(--mucodec-rouge); outline-offset: 3px; }
a { color: var(--mucodec-marine); }
a:focus-visible { outline: 3px solid var(--mucodec-marine); outline-offset: 2px; border-radius: 2px; }

@media (max-width: 480px) {
  .pf-v5-c-login { padding: 28px 16px; }
  .pf-v5-c-login__main-header, div.pf-v5-c-login__main-header { padding: 24px 20px 4px; }
  .pf-v5-c-login__main-body { padding: 12px 20px 24px; }
  .mucodec-pastille img { width: 112px; }
}