/* WAUden — habillage de la page de connexion Keycloak (thème parent : keycloak.v2, PatternFly 5.4).
 *
 * Source de vérité des couleurs : branding/wauden-tokens.css ; usages et contrastes : branding/BRAND.md.
 * Fichiers copiés depuis branding/ (à resynchroniser si la charte évolue) :
 *   img/wauden-logo-dark.svg, img/favicon.ico, fonts/Sora-Regular.ttf, fonts/Sora-Bold.ttf, fonts/OFL.txt.
 * Aucune ressource externe : polices et images sont servies par le thème (aucun CDN, aucun appel tiers).
 *
 * Mode sombre : le parent ajoute la classe .pf-v5-theme-dark sur <html> selon prefers-color-scheme.
 * PatternFly déclare ses variables avec :where() (spécificité nulle) ; les surcharges posées sur :root
 * s'appliquent donc aussi en mode sombre. Chaque variable redéfinie ici l'est aussi pour :root.pf-v5-theme-dark.
 */

@font-face {
    font-family: "Sora";
    src: url("../fonts/Sora-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sora";
    src: url("../fonts/Sora-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Jetons de marque utilisés par ce thème (sous-ensemble de wauden-tokens.css) */
    --wd-sapin-800: #08261D;
    --wd-sapin-700: #0B3D2E;
    --wd-sapin-600: #0E4A37;
    --wd-sapin-500: #145C45;
    --wd-menthe-700: #11805A;
    --wd-menthe-400: #3DDC97;
    --wd-menthe-300: #5FE3A6;
    --wd-menthe-200: #A6F4C5;
    --wd-blanc: #FFFFFF;
    --wd-font-brand: "Sora", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --wd-font-ui: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;

    /* Anneau de focus : menthe-700 sur fond clair (4,9:1 sur blanc) */
    --wd-focus: var(--wd-menthe-700);

    /* Thème parent keycloak.v2 : liseré en haut de la carte (élément graphique, pas du texte) */
    --keycloak-card-top-color: var(--wd-menthe-400);

    /* PatternFly — couleur principale : sapin (bouton secondaire, soulignement des champs actifs) */
    --pf-v5-global--primary-color--100: var(--wd-sapin-700);
    --pf-v5-global--primary-color--200: var(--wd-sapin-600);
    --pf-v5-global--primary-color--dark-100: var(--wd-sapin-700);
    --pf-v5-global--primary-color--light-100: var(--wd-menthe-300);
    --pf-v5-global--active-color--100: var(--wd-menthe-700);

    /* PatternFly — liens : menthe-700, seule menthe autorisée en texte sur fond clair (4,9:1 sur blanc) */
    --pf-v5-global--link--Color: var(--wd-menthe-700);
    --pf-v5-global--link--Color--hover: var(--wd-sapin-700);
    --pf-v5-global--link--Color--dark: var(--wd-menthe-700);
    --pf-v5-global--link--Color--dark--hover: var(--wd-sapin-700);
    --pf-v5-global--link--Color--light: var(--wd-menthe-300);
    --pf-v5-global--link--Color--light--hover: var(--wd-menthe-200);
    --pf-v5-global--link--Color--visited: var(--wd-menthe-700);

    /* Typographie : Sora pour les titres, police système Windows pour le texte (charte) */
    --pf-v5-global--FontFamily--heading: var(--wd-font-brand);
    --pf-v5-global--FontFamily--text: var(--wd-font-ui);
}

:root.pf-v5-theme-dark {
    /* Anneau de focus : menthe-300 sur la carte sombre #1b1d21 (10,5:1) */
    --wd-focus: var(--wd-menthe-300);

    --keycloak-card-top-color: var(--wd-menthe-400);

    /* Couleur principale : menthe-400 sur la carte sombre #1b1d21 (9,6:1) */
    --pf-v5-global--primary-color--100: var(--wd-menthe-400);
    --pf-v5-global--primary-color--200: var(--wd-menthe-300);
    --pf-v5-global--primary-color--dark-100: var(--wd-menthe-400);
    --pf-v5-global--primary-color--light-100: var(--wd-menthe-400);
    --pf-v5-global--active-color--100: var(--wd-menthe-400);

    /* Liens : menthe-300 sur la carte sombre #1b1d21 (10,5:1) */
    --pf-v5-global--link--Color: var(--wd-menthe-300);
    --pf-v5-global--link--Color--hover: var(--wd-menthe-200);
    --pf-v5-global--link--Color--dark: var(--wd-menthe-300);
    --pf-v5-global--link--Color--dark--hover: var(--wd-menthe-200);
    --pf-v5-global--link--Color--light: var(--wd-menthe-300);
    --pf-v5-global--link--Color--light--hover: var(--wd-menthe-200);
    --pf-v5-global--link--Color--visited: var(--wd-menthe-300);
}

/* Bouton principal : texte blanc sur sapin-700 (12,2:1), survol sapin-600 (10,2:1) */
.pf-v5-c-button {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--wd-sapin-700);
    --pf-v5-c-button--m-primary--Color: var(--wd-blanc);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--wd-sapin-600);
    --pf-v5-c-button--m-primary--hover--Color: var(--wd-blanc);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--wd-sapin-600);
    --pf-v5-c-button--m-primary--focus--Color: var(--wd-blanc);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--wd-sapin-600);
    --pf-v5-c-button--m-primary--active--Color: var(--wd-blanc);
}

/* Mode sombre : texte sapin-800 sur menthe-400 (9,1:1), survol menthe-300 (10,0:1).
   Un bouton sapin se confondrait avec la carte sombre. */
:root.pf-v5-theme-dark .pf-v5-c-button {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--wd-menthe-400);
    --pf-v5-c-button--m-primary--Color: var(--wd-sapin-800);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--wd-menthe-300);
    --pf-v5-c-button--m-primary--hover--Color: var(--wd-sapin-800);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--wd-menthe-300);
    --pf-v5-c-button--m-primary--focus--Color: var(--wd-sapin-800);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--wd-menthe-300);
    --pf-v5-c-button--m-primary--active--Color: var(--wd-sapin-800);
}

/* Focus clavier toujours visible (WCAG 2.4.7) */
.pf-v5-c-login a:focus-visible,
.pf-v5-c-login .pf-v5-c-button:focus-visible,
.pf-v5-c-login select:focus-visible,
.pf-v5-c-login input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--wd-focus);
    outline-offset: 2px;
}

/* Fond de marque (sapin), identique en clair et en sombre : remplace l'image de fond de Keycloak */
.login-pf body {
    background: var(--wd-sapin-800) linear-gradient(160deg, var(--wd-sapin-500) 0%, var(--wd-sapin-800) 65%) no-repeat fixed;
    background-size: cover;
}

/* En-tête : logo WAUden (version pour fond sombre) à la place du nom du royaume.
   Le nom (displayName « WAUden ») reste dans le DOM pour les lecteurs d'écran ; il est seulement masqué
   visuellement (remplacement d'image par décalage du texte), sans transformation en majuscules. */
#kc-header {
    padding-block: 2.25rem; /* zone de protection : au moins la moitié de la hauteur du symbole */
}

#kc-header-wrapper {
    background: url("../img/wauden-logo-dark.svg") no-repeat center / contain;
    width: 17.5rem;   /* 280 px : ratio du logo 466,5 × 120 */
    max-width: 100%;
    height: 4.5rem;   /* 72 px */
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    text-transform: none;
    letter-spacing: normal;
    color: transparent !important;
}