/* Habillage commun des pages Keycloak (connexion, Mon compte) sur PatternFly 5 : polices, jetons, champs, boutons.
   Jetons repris de web/src/styles.css : les garder alignés (couleurs, contrastes WCAG 2.2 AA vérifiés là-bas).
   Polices servies par Keycloak lui-même (aucun CDN), sous licence SIL OFL (fonts/LICENSE-*). */

@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #F7F8FA; --surface: #FFFFFF; --text: #111827; --muted: #4B5563;
  --line: #E3E6EB; --line-strong: #D1D5DB;
  --accent: #1F4B99; --accent-hover: #183B7A; --accent-text: #FFFFFF; --accent-soft: #E8EEF9; --link: #1F4B99;
  --danger: #A61B1B;
  --shadow: 0 1px 2px rgb(17 24 39 / .04), 0 4px 16px rgb(17 24 39 / .06);
  --radius-lg: 20px;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Classe posée par Keycloak selon prefers-color-scheme (kcDarkModeClass) */
html.pf-v5-theme-dark {
  --bg: #0B1220; --surface: #111A2E; --text: #E5E7EB; --muted: #A7B0BE;
  --line: #1F2A44; --line-strong: #2C3A5A;
  --accent: #3D6FD6; --accent-hover: #5381E0; --accent-text: #FFFFFF; --accent-soft: #1E3A78; --link: #8FB0F5;
  --danger: #FF9A9A;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 20px rgb(0 0 0 / .35);
}

/* Jetons PatternFly ramenés à ceux de la plateforme (les deux thèmes suivent les variables ci-dessus) */
:root, html.pf-v5-theme-dark {
  --pf-v5-global--FontFamily--text: var(--sans);
  --pf-v5-global--FontFamily--heading: var(--serif);
  --pf-v5-global--primary-color--100: var(--accent);
  --pf-v5-global--primary-color--200: var(--accent-hover);
  --pf-v5-global--link--Color: var(--link);
  --pf-v5-global--link--Color--hover: var(--accent-hover);
  --pf-v5-global--Color--100: var(--text);
  --pf-v5-global--Color--200: var(--muted);
  --pf-v5-global--BackgroundColor--100: var(--surface);
  --pf-v5-global--BorderColor--100: var(--line);
  --pf-v5-global--danger-color--100: var(--danger);
  --pf-v5-global--danger-color--200: var(--danger);
  --pf-v5-global--active-color--100: var(--accent);
}

/* Champs : cadre arrondi complet, anneau de focus de l'interface */
.pf-v5-c-form__label-text { font-weight: 700; color: var(--text); }
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: var(--surface);
  --pf-v5-c-form-control--before--BorderTopColor: var(--line-strong);
  --pf-v5-c-form-control--before--BorderRightColor: var(--line-strong);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--line-strong);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--line-strong);
  --pf-v5-c-form-control--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
  --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;
  --pf-v5-c-form-control--Color: var(--text);
  border-radius: 10px; min-height: 44px;
}
.pf-v5-c-form-control::before, .pf-v5-c-form-control::after { border-radius: inherit; }
.pf-v5-c-form-control > input { min-height: 44px; outline: none; }   /* l'anneau est porté par le cadre */
.pf-v5-c-form-control > input:autofill {   /* champs préremplis par le navigateur : mêmes couleurs, clair ou sombre */
  -webkit-box-shadow: 0 0 0 100px var(--surface) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text);
}
.pf-v5-c-form-control:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.pf-v5-c-form-control:focus-within::before { border-color: var(--accent); border-width: 2px; }
.pf-v5-c-form-control.pf-m-error::before { border-color: var(--danger); }

/* Mot de passe : champ et bouton « afficher » d'un seul tenant */
.pf-v5-c-input-group { border-radius: 10px; }
.pf-v5-c-input-group:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.pf-v5-c-input-group .pf-v5-c-form-control { border-radius: 10px 0 0 10px; }
.pf-v5-c-input-group .pf-v5-c-form-control:focus-within { box-shadow: none; }
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-control--BackgroundColor: var(--surface);
  --pf-v5-c-button--m-control--hover--BackgroundColor: var(--surface);
  --pf-v5-c-button--m-control--focus--BackgroundColor: var(--surface);
  --pf-v5-c-button--m-control--Color: var(--muted);
  --pf-v5-c-button--m-control--hover--Color: var(--text);
  background: var(--surface); color: var(--muted); border-radius: 0 10px 10px 0; min-width: 48px;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after {
  border: 1px solid var(--line-strong); border-left: 0; border-radius: inherit;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover::after { border-color: var(--muted); }

/* Boutons : pilules, comme l'interface */
.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 999px;
  --pf-v5-c-button--after--BorderRadius: 999px;
  --pf-v5-c-button--m-primary--BackgroundColor: var(--accent);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--accent-hover);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--accent-hover);
  --pf-v5-c-button--m-primary--Color: var(--accent-text);
  --pf-v5-c-button--m-primary--hover--Color: var(--accent-text);
  --pf-v5-c-button--m-primary--focus--Color: var(--accent-text);
  --pf-v5-c-button--m-secondary--Color: var(--link);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--line-strong);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--muted);
  --pf-v5-c-button--m-link--Color: var(--link);
  min-height: 44px;
}
.pf-v5-c-button.pf-m-primary { font-weight: 700; }

/* Messages (identifiants refusés, session expirée…) */
.pf-v5-c-alert { border-radius: 12px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }