/* ═══════════════════════════════════════════════════════════════════════════
   AWOUI — console de compte (id.awoui.com/realms/awoui/account/)
   Peau posée SUR le thème stock keycloak.v3. Ce n'est pas une page FreeMarker
   mais une application React en PatternFly 5 : on ne cible donc PAS des
   éléments, on REDÉFINIT SES JETONS. C'est le mécanisme prévu par PatternFly,
   et c'est ce qui rend la peau insensible aux montées de version — le jour où
   un composant change de balisage, les jetons s'appliquent encore.

   POURQUOI UNE SIMPLE REDÉFINITION SUFFIT (vérifié sur la feuille servie en
   production, main-BigPikZE.css, 1006 Ko) : PatternFly déclare ses jetons sous
   `:where(:root)` et `:where(.pf-v5-theme-dark)`. `:where()` a une spécificité
   NULLE — un `:root{}` ordinaire la bat, et notre feuille est de toute façon
   injectée APRÈS la feuille de l'application (index.ftl pose `entryStyles`
   puis `properties.styles`).

   MÊME REGISTRE QUE LA PAGE DE CONNEXION : institutionnel. Un fond calme, des
   surfaces nettes, UN accent. Les deux écrans se suivent dans le même parcours
   — l'un reçoit un mot de passe, l'autre montre un compte : ils ne peuvent pas
   avoir deux identités.

   DEUX THÈMES. Le clair est défini sans condition ; le sombre ne REDÉFINIT que
   les jetons, sous la classe `pf-v5-theme-dark` que le template pose selon la
   préférence système. Aucune couleur n'a sa seule définition dans le bloc
   sombre — sinon un navigateur sans préférence rendrait une page à moitié
   peinte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons Awoui — thème CLAIR (définition de référence) ──────────────── */
:root{
  --aw-fond:#F4F6F9;         /* la page */
  --aw-surface:#FFFFFF;      /* cartes, en-tête, panneau latéral */
  --aw-surface-2:#EAEDF3;
  --aw-champ-fond:#FFFFFF;    /* survols, bandes alternées */
  --aw-encre:#0B0F1A;
  --aw-encre-2:#39414F;      /* étiquettes, texte secondaire */
  --aw-trait:#DFE3EA;
  --aw-trait-fort:#C7CDD8;

  --aw-accent:#0E7C9B;       /* cyan Awoui assombri — 4,5:1 sur blanc */
  --aw-accent-fonce:#0A6077; /* survol d'un aplat d'accent */
  --aw-accent-encre:#FFFFFF; /* texte posé SUR l'accent */
  --aw-vert:#178F63;
  --aw-rouge:#B3261E;

  --aw-fb:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  color-scheme:light;
}

/* ── 2. Jetons Awoui — thème SOMBRE (redéfinition seule) ──────────────────── */
.pf-v5-theme-dark{
  --aw-fond:#080B12;
  --aw-surface:#111623;
  --aw-surface-2:#182031;
  --aw-champ-fond:rgba(255,255,255,.04);
  --aw-encre:#EEF1F7;
  --aw-encre-2:#AEB6C6;
  --aw-trait:rgba(255,255,255,.09);
  --aw-trait-fort:rgba(255,255,255,.16);

  --aw-accent:#57C8E6;       /* sur fond sombre, le cyan vif passe le contraste */
  --aw-accent-fonce:#7FD8EF;
  --aw-accent-encre:#06121A;
  --aw-vert:#3FE0A2;
  --aw-rouge:#FF8A8A;
  color-scheme:dark;
}

/* ── 3. Traduction vers les jetons PatternFly ─────────────────────────────────
   Un seul bloc, valable dans les deux thèmes : il ne lit que des jetons Awoui,
   qui ont déjà basculé. C'est la règle qui évite la page à moitié peinte —
   rien ici ne connaît la couleur, tout passe par une variable. */
:root,
.pf-v5-theme-dark{
  /* surfaces */
  --pf-v5-global--BackgroundColor--100:var(--aw-surface);
  --pf-v5-global--BackgroundColor--200:var(--aw-fond);
  --pf-v5-global--BackgroundColor--light-100:var(--aw-surface);
  --pf-v5-global--BackgroundColor--light-300:var(--aw-surface-2);

  /* texte */
  --pf-v5-global--Color--100:var(--aw-encre);
  --pf-v5-global--Color--200:var(--aw-encre-2);

  /* filets */
  --pf-v5-global--BorderColor--100:var(--aw-trait);
  --pf-v5-global--BorderColor--200:var(--aw-trait-fort);
  --pf-v5-global--BorderColor--300:var(--aw-trait);

  /* accent : liens, onglet actif, bouton principal, anneau de focus */
  --pf-v5-global--primary-color--100:var(--aw-accent);
  --pf-v5-global--primary-color--200:var(--aw-accent-fonce);
  --pf-v5-global--active-color--100:var(--aw-accent);
  --pf-v5-global--link--Color:var(--aw-accent);
  --pf-v5-global--link--Color--hover:var(--aw-accent-fonce);

  /* états */
  --pf-v5-global--success-color--100:var(--aw-vert);
  --pf-v5-global--danger-color--100:var(--aw-rouge);

  /* typographie : la même famille que l'apex et que la page de connexion */
  --pf-v5-global--FontFamily--text:var(--aw-fb);
  --pf-v5-global--FontFamily--heading:var(--aw-fb);
  --pf-v5-global--FontFamily--redhatVF--text:var(--aw-fb);
  --pf-v5-global--FontFamily--redhatVF--heading:var(--aw-fb);
}

/* ── 4. Jetons de composants ──────────────────────────────────────────────────
   Les jetons globaux ne suffisent pas partout : certains composants portent le
   leur, avec une valeur en dur. Ceux-ci existent bien dans la feuille servie
   (comptés avant d'être écrits ici) — une déclaration qui ne correspond à rien
   est une dette silencieuse, pas une précaution. */
:root,
.pf-v5-theme-dark{
  --pf-v5-c-page--BackgroundColor:var(--aw-fond);
  --pf-v5-c-page__main-section--BackgroundColor:var(--aw-fond);
  --pf-v5-c-page__header--BackgroundColor:var(--aw-surface);
  --pf-v5-c-page__sidebar--BackgroundColor:var(--aw-surface);
  --pf-v5-c-masthead--BackgroundColor:var(--aw-surface);
  --pf-v5-c-card--BackgroundColor:var(--aw-surface);
  --pf-v5-c-form-control--BackgroundColor:var(--aw-surface);
  --pf-v5-c-button--m-primary--BackgroundColor:var(--aw-accent);
  --pf-v5-c-button--m-primary--hover--BackgroundColor:var(--aw-accent-fonce);
  --pf-v5-c-button--m-primary--Color:var(--aw-accent-encre);
}

/* ── 5. Les trois retouches de forme ──────────────────────────────────────────
   Tout le reste est affaire de couleur. Ces trois-là ne le sont pas, et elles
   font la différence entre « PatternFly repeint » et « un écran Awoui ». */

/* a. L'en-tête porte un filet bas, comme la barre du site. Sans lui, la barre
      blanche et la page blanche se confondent en clair. */
.pf-v5-c-masthead{border-bottom:1px solid var(--aw-trait)}

/* b. Les cartes prennent le rayon de la charte et un filet, pas une ombre :
      une ombre portée sur fond sombre n'existe pas, un filet se voit dans les
      deux thèmes. */
.pf-v5-c-card{
  border:1px solid var(--aw-trait);
  border-radius:12px;
  box-shadow:none;
}

/* c. Le bouton principal prend la pilule de la charte. Le reste de ses états
      (survol, focus, désactivé) suit déjà par les jetons ci-dessus. */
.pf-v5-c-button{border-radius:999px}
.pf-v5-c-button.pf-m-link{border-radius:8px}

/* ── 6. Le nom du compte dans l'en-tête ──────────────────────────────────────
   PatternFly l'affiche en gris secondaire ; ici c'est l'information principale
   de la page. */
.pf-v5-c-masthead__content .pf-v5-c-dropdown__toggle,
.pf-v5-c-masthead__content .pf-v5-c-menu-toggle{color:var(--aw-encre)}


/* ---------------------------------------------------------------------------
   RENFORT (17/09/2026) — ce que la capture d'Antoine montrait encore en stock :
   la barre du haut, la colonne de gauche, les champs et le bouton primaire.
   Les jetons de composant l'emportent sur les jetons globaux : on les nomme
   donc explicitement plutôt que d'espérer qu'un jeton global redescende.
   --------------------------------------------------------------------------- */
:root{
  /* la barre du haut et la colonne : la même encre que la carte, pas du noir pur */
  --pf-v5-c-masthead--BackgroundColor:var(--aw-surface);
  --pf-v5-c-page__sidebar--BackgroundColor:var(--aw-surface);
  --pf-v5-c-page__sidebar--BorderRightColor:var(--aw-trait);
  --pf-v5-c-nav__link--Color:var(--aw-encre-2);
  --pf-v5-c-nav__link--hover--Color:var(--aw-encre);
  --pf-v5-c-nav__link--m-current--Color:var(--aw-encre);
  --pf-v5-c-nav__link--m-current--BackgroundColor:var(--aw-surface-2);
  --pf-v5-c-nav__link--before--BorderColor:var(--aw-accent);
  /* les champs : bord net, fond sobre, anneau d'accent au focus */
  --pf-v5-c-form-control--BorderBottomColor:var(--aw-trait-fort);
  --pf-v5-c-form-control--focus--BorderBottomColor:var(--aw-accent);
  --pf-v5-c-form-control--BorderRadius:9px;
  /* les liens d'action (« Annuler ») */
  --pf-v5-c-button--m-link--Color:var(--aw-accent);
  --pf-v5-c-button--m-link--hover--Color:var(--aw-accent-fonce);
}

/* La marque : le fichier est servi par le thème, on ne fait ici que lui donner
   une taille tenable. Une image de marque laissée à sa hauteur naturelle
   déforme la barre sur les petits écrans. */
.pf-v5-c-masthead__brand img,.pf-v5-c-brand{max-height:30px;width:auto}
.pf-v5-c-masthead{border-bottom:1px solid var(--aw-trait)}

/* Le titre de page et les intertitres, au registre du reste de la maison. */
.pf-v5-c-title,.pf-v5-c-content h1,.pf-v5-c-content h2{letter-spacing:-.01em}

/* Le bouton principal : plein, sans dégradé, comme sur la page de connexion. */
.pf-v5-c-button.pf-m-primary{border-radius:9px;font-weight:650}
.pf-v5-c-button.pf-m-primary:hover{filter:brightness(1.08)}

/* Les cartes portent le filet, pas l'ombre : une console de compte est un
   formulaire, pas une vitrine. */
.pf-v5-c-card{border:1px solid var(--aw-trait);box-shadow:none}

/* ---------------------------------------------------------------------------
   LES JETONS DE COMPOSANT SE REDÉFINISSENT SUR LE COMPOSANT (17/09/2026)

   C'est LA raison pour laquelle la console restait en stock alors que la page
   de connexion, elle, obéissait. En thème sombre, PatternFly écrit :

       :where(.pf-v5-theme-dark) .pf-v5-c-button{
           --pf-v5-c-button--m-primary--BackgroundColor: … }

   Le jeton est posé SUR le bouton. Or une variable définie sur l'élément
   l'emporte toujours sur la même variable héritée d'un ancêtre — la
   spécificité n'y change rien, ce n'est pas une question de cascade mais de
   portée. Nos redéfinitions sur `:root` étaient donc sans effet dès que le
   thème sombre était actif ; en clair, où PatternFly ne repose pas ses jetons
   sur les composants, elles passaient. D'où un banc qui disait « ça marche »
   et un écran qui disait le contraire.

   On redéfinit donc au même endroit que lui, avec un sélecteur qui le bat
   (`.pf-v5-theme-dark .pf-…` = 0,2,0 contre son `:where()` qui vaut 0).
   --------------------------------------------------------------------------- */
.pf-v5-c-button,
.pf-v5-theme-dark .pf-v5-c-button,
.pf-v5-theme-dark .pf-v5-c-button{
  --pf-v5-c-button--m-primary--BackgroundColor:var(--aw-accent);
  --pf-v5-c-button--m-primary--hover--BackgroundColor:var(--aw-accent-fonce);
  --pf-v5-c-button--m-primary--active--BackgroundColor:var(--aw-accent-fonce);
  --pf-v5-c-button--m-primary--focus--BackgroundColor:var(--aw-accent-fonce);
  --pf-v5-c-button--m-primary--Color:var(--aw-accent-encre);
  --pf-v5-c-button--m-primary--hover--Color:var(--aw-accent-encre);
  --pf-v5-c-button--m-link--Color:var(--aw-accent);
  --pf-v5-c-button--m-link--hover--Color:var(--aw-accent-fonce);
  --pf-v5-c-button--BorderRadius:9px;
}
.pf-v5-c-masthead,.pf-v5-theme-dark .pf-v5-c-masthead{
  --pf-v5-c-masthead--BackgroundColor:var(--aw-surface);
  --pf-v5-c-masthead--BorderBottomColor:var(--aw-trait);
}
.pf-v5-c-page__sidebar,.pf-v5-theme-dark .pf-v5-c-page__sidebar{
  --pf-v5-c-page__sidebar--BackgroundColor:var(--aw-surface);
  --pf-v5-c-page__sidebar--BorderRightColor:var(--aw-trait);
}
.pf-v5-c-nav,.pf-v5-theme-dark .pf-v5-c-nav{
  --pf-v5-c-nav__link--Color:var(--aw-encre-2);
  --pf-v5-c-nav__link--hover--Color:var(--aw-encre);
  --pf-v5-c-nav__link--m-current--Color:var(--aw-encre);
  --pf-v5-c-nav__link--m-current--BackgroundColor:var(--aw-surface-2);
  --pf-v5-c-nav__link--before--BorderColor:var(--aw-accent);
  --pf-v5-c-nav__link--after--BorderColor:var(--aw-accent);
}
.pf-v5-c-form-control,.pf-v5-theme-dark .pf-v5-c-form-control{
  --pf-v5-c-form-control--BackgroundColor:var(--aw-surface);
  --pf-v5-c-form-control--BorderColor:var(--aw-trait-fort);
  --pf-v5-c-form-control--BorderBottomColor:var(--aw-trait-fort);
  --pf-v5-c-form-control--focus--BorderBottomColor:var(--aw-accent);
  --pf-v5-c-form-control--hover--BorderBottomColor:var(--aw-accent);
  --pf-v5-c-form-control--BorderRadius:9px;
  --pf-v5-c-form-control--Color:var(--aw-encre);
}
.pf-v5-c-card,.pf-v5-theme-dark .pf-v5-c-card{
  --pf-v5-c-card--BackgroundColor:var(--aw-surface);
  --pf-v5-c-card--BoxShadow:none;
  --pf-v5-c-card--BorderRadius:12px;
}
.pf-v5-c-page,.pf-v5-theme-dark .pf-v5-c-page{
  --pf-v5-c-page--BackgroundColor:var(--aw-fond);
  --pf-v5-c-page__main-section--BackgroundColor:transparent;
}

/* ---------------------------------------------------------------------------
   LA COULEUR DU TEXTE, POSÉE EXPLICITEMENT (17/09/2026)
   Redéfinir `--pf-v5-global--Color--100` ne suffit pas : PatternFly reprend la
   couleur sur ses composants, et une variable posée sur l'élément l'emporte sur
   la même variable héritée. Au banc, titres et étiquettes ressortaient gris
   foncé sur fond sombre — lisibles seulement pour qui savait déjà ce qui était
   écrit. On nomme donc les éléments.
   --------------------------------------------------------------------------- */
.pf-v5-c-page,.pf-v5-c-page__main,.pf-v5-c-page__main-section{color:var(--aw-encre)}
.pf-v5-c-title,.pf-v5-c-content h1,.pf-v5-c-content h2,.pf-v5-c-content h3,
.pf-v5-c-card__title,.pf-v5-c-form__section-title{color:var(--aw-encre)}
.pf-v5-c-form__label-text,.pf-v5-c-form__label{color:var(--aw-encre-2)}
.pf-v5-c-form__helper-text,.pf-v5-c-content p,.pf-v5-u-color-200{color:var(--aw-encre-2)}
.pf-v5-c-form-control input,.pf-v5-c-form-control select,.pf-v5-c-form-control textarea{
  color:var(--aw-encre);background:transparent
}
.pf-v5-c-nav__link{color:var(--aw-encre-2)}
.pf-v5-c-nav__link.pf-m-current,.pf-v5-c-nav__link:hover{color:var(--aw-encre)}
.pf-v5-c-masthead,.pf-v5-c-masthead__content,.pf-v5-c-menu-toggle{color:var(--aw-encre)}

/* ---------------------------------------------------------------------------
   FINITION (17/09/2026) — LÀ OÙ LE JETON NE SUFFIT PAS, ON PEINT.

   Trois éléments résistaient encore parce que PatternFly y écrit des PROPRIÉTÉS,
   pas seulement des jetons :
     · la barre du haut reçoit `palette--black-1000`, du noir pur, et tranchait
       avec le bloc du logo qui, lui, prenait la couleur de la colonne ;
     · le champ de formulaire en sombre n'est qu'un SOULIGNEMENT — pas de fond,
       pas de cadre : sur un formulaire de compte, on ne voit plus où l'on écrit ;
     · la carte perdait son fond, et la section flottait sur la page.
   On nomme donc les éléments et on pose la propriété. Pas de `!important` :
   un sélecteur de deux classes suffit à passer devant leur `:where()`.
   --------------------------------------------------------------------------- */

/* La barre : une seule teinte d'un bord à l'autre, le filet fait la séparation. */
.pf-v5-c-page .pf-v5-c-masthead,
.pf-v5-theme-dark .pf-v5-c-masthead{
  background-color:var(--aw-surface);
  border-bottom:1px solid var(--aw-trait);
}
/* Le bloc du logo ne doit pas se distinguer de la barre qui le porte. */
.pf-v5-c-masthead__main,.pf-v5-c-masthead__brand,
.pf-v5-theme-dark .pf-v5-c-masthead__main{background-color:transparent}

/* La colonne : même surface que la barre, séparée par le même filet. */
.pf-v5-c-page .pf-v5-c-page__sidebar,
.pf-v5-theme-dark .pf-v5-c-page__sidebar{
  background-color:var(--aw-surface);
  border-right:1px solid var(--aw-trait);
}
/* L'entrée courante : un aplat discret et un filet d'accent, pas un bloc gris. */
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-theme-dark .pf-v5-c-nav__link.pf-m-current{
  background-color:var(--aw-surface-2);
  box-shadow:inset 3px 0 0 var(--aw-accent);
}

/* LE CHAMP : un cadre entier, un fond, un rayon — comme sur la page de
   connexion. Un champ qui n'est qu'un trait se confond avec une ligne de texte. */
.pf-v5-c-form-control,
.pf-v5-theme-dark .pf-v5-c-form-control{
  background-color:var(--aw-champ-fond);
  border:1px solid var(--aw-trait-fort);
  border-radius:9px;
  padding:2px 4px;
}
.pf-v5-c-form-control::after,
.pf-v5-theme-dark .pf-v5-c-form-control::after{border:0;box-shadow:none}
.pf-v5-c-form-control:focus-within,
.pf-v5-theme-dark .pf-v5-c-form-control:focus-within{
  border-color:var(--aw-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--aw-accent) 18%,transparent);
}
.pf-v5-c-form-control input,.pf-v5-c-form-control select,.pf-v5-c-form-control textarea{
  background:transparent;border:0;outline:none;color:var(--aw-encre);padding:9px 10px
}
/* Un champ non modifiable se dit par sa teinte, pas seulement par le curseur. */
.pf-v5-c-form-control.pf-m-disabled,.pf-v5-c-form-control:has(input[disabled]),
.pf-v5-c-form-control:has(input[readonly]){
  background-color:var(--aw-surface-2);color:var(--aw-encre-2)
}

/* LA CARTE : fond et filet, jamais d'ombre portée — une console de compte est
   un formulaire, pas une vitrine. */
.pf-v5-c-page .pf-v5-c-card,
.pf-v5-theme-dark .pf-v5-c-card{
  background-color:var(--aw-surface);
  border:1px solid var(--aw-trait);
  border-radius:12px;
  box-shadow:none;
}

/* Le menu utilisateur, à droite de la barre. */
.pf-v5-c-menu-toggle,.pf-v5-theme-dark .pf-v5-c-menu-toggle{
  background-color:transparent;border:1px solid var(--aw-trait);
  border-radius:9px;color:var(--aw-encre)
}
.pf-v5-c-menu-toggle:hover{border-color:var(--aw-trait-fort)}