/* Console du compte OPenIG : l'application de Keycloak (React, PatternFly 5) présentée comme un
   espace personnel, dans l'esprit de celui de la Géoplateforme : en-tête sur toute la largeur (logo,
   nom du service, commandes, personne connectée), menu à gauche avec ses rubriques, contenu en
   cartes sur le fond de la page. Couleurs, champs, boutons et listes sont ceux des pages de
   connexion et des formulaires d'administration ; mode sombre ; hors production, en-tête orange.

   La feuille est chargée après celle de l'application. Les jetons de PatternFly sont redéfinis sur
   :root ; les règles des composants commencent par :root pour passer aussi devant les feuilles que
   l'application charge ensuite, page par page. Le mode sombre suit la classe pf-v5-theme-dark, posée
   par Keycloak puis par js/compte.js, qui pose aussi openig-hors-production hors production et les
   quelques attributs lus ici (initiales, rubrique de la page). Les accroches [data-testid] sont
   celles de l'application (chemins de resources/content.json). */

/* Police : Open Sans, servie par le thème (latin, ponctuation et symboles courants). */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/OpenSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/OpenSans-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/OpenSans-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/OpenSans-Bold.woff2") format("woff2");
}

/* Variables : celles des pages de connexion (login/resources/css/openig-login.css), puis celles de la
   mise en page de la console ; thème clair puis thème sombre. */

:root {
  --openig-teal: #3ea08f;
  --openig-teal-text: #2a7d6f;
  --openig-teal-ink: #0b2f2a;
  --openig-teal-tint: #eef7f4;
  --openig-gold: #f3bc44;
  --openig-gold-ink: #6e4f00;
  --openig-gold-tint: #fdf4de;
  --openig-bg: #f3f5f4;
  --openig-neutral-bg: #eef1f0;
  --openig-ink: #0a0a0a;
  /* Un peu plus foncé que sur les pages de connexion : le texte discret est posé ici sur le fond gris
     de la page autant que sur les cartes blanches (contraste AA sur l'un et l'autre). */
  --openig-muted: #626e69;
  --openig-muted-strong: #5b6762;
  --openig-line: #e2e6e4;
  --openig-line-strong: #cfd6d3;
  --openig-focus-ring: rgba(62, 160, 143, 0.28);
  --openig-error: #c83535;
  --openig-error-ink: #8b1d1d;
  --openig-error-tint: #fdeeee;
  --openig-font: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --openig-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;

  --surface-entete: #fff;
  --surface-menu: #fff;
  --surface-champ: #fff;
  --surface-carte: #fff;
  --surface-douce: #f8faf9;
  --surface-lecture: #f4f6f5;
  --surface-survol: #f2f8f6;
  --texte-indice: #7a8681;
  --texte-secondaire: #3f4a46;
  --texte-rubrique: #236a5e;
  --ligne-survol: #b4bfba;
  --fond-principal: #2a7d6f;
  --fond-principal-survol: #236a5e;
  --fond-danger: #c83535;
  --fond-danger-survol: #a82a2a;
  --ombre-legere: rgba(0, 0, 0, 0.04);
  --ombre: rgba(0, 0, 0, 0.08);
  --ombre-panel: rgba(0, 0, 0, 0.10);
  --ombre-menu: rgba(0, 0, 0, 0.12);
  --erreur-halo: rgba(200, 53, 53, 0.18);
  --erreur-bord-doux: rgba(200, 53, 53, 0.35);
  --succes-bord: rgba(62, 160, 143, 0.45);
  --alerte-bord: rgba(243, 188, 68, 0.6);
  --voile: rgba(11, 47, 42, 0.45);
  --image-fond: url("https://www.openig.org/sites/default/files/2024-05/mesh-header.svg");
  /* Trame de fond atténuée : la page reste calme derrière les cartes. */
  --opacite-trame: 0.45;

  /* Mise en page */
  --hauteur-entete: 4rem;
  --largeur-menu: 17.5rem;
  --largeur-contenu: 64rem;
  --marge-contenu: 2.5rem;
  --rayon-carte: 12px;
  --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.03);
}

:root.pf-v5-theme-dark {
  color-scheme: dark;
  --openig-teal: #5ba99a;
  --openig-teal-text: #8ecbbe;
  --openig-teal-ink: #d4e6e2;
  --openig-teal-tint: #1b2c2b;
  --openig-gold: #d8b25e;
  --openig-gold-ink: #e8cc8c;
  --openig-gold-tint: #2d281c;
  --openig-bg: #111618;
  --openig-neutral-bg: #242c31;
  --openig-ink: #e1e7ea;
  --openig-muted: #9eaab0;
  --openig-muted-strong: #b9c3c8;
  --openig-line: rgba(255, 255, 255, 0.09);
  --openig-line-strong: rgba(255, 255, 255, 0.16);
  --openig-focus-ring: rgba(142, 203, 190, 0.45);
  --openig-error: #e07b73;
  --openig-error-ink: #f1a9a2;
  --openig-error-tint: #33201f;
  --surface-entete: #192024;
  --surface-menu: #192024;
  --surface-champ: #1d2429;
  --surface-carte: #1b2226;
  --surface-douce: #20282d;
  --surface-lecture: #222a2f;
  --surface-survol: #232c31;
  --texte-indice: #8b979d;
  --texte-secondaire: #c8d1d5;
  --texte-rubrique: #8ecbbe;
  --ligne-survol: rgba(255, 255, 255, 0.26);
  --fond-principal: #2d7568;
  --fond-principal-survol: #327d70;
  --fond-danger: #b8483f;
  --fond-danger-survol: #a53f37;
  --ombre-legere: rgba(0, 0, 0, 0.2);
  --ombre: rgba(0, 0, 0, 0.28);
  --ombre-panel: rgba(0, 0, 0, 0.35);
  --ombre-menu: rgba(0, 0, 0, 0.45);
  --erreur-halo: rgba(224, 123, 115, 0.28);
  --erreur-bord-doux: rgba(224, 123, 115, 0.4);
  --succes-bord: rgba(142, 203, 190, 0.45);
  --alerte-bord: rgba(216, 178, 94, 0.5);
  --voile: rgba(8, 11, 13, 0.7);
  --opacite-trame: 0.3;
  --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Instance hors production : en-tête orange, la couleur du thème de dev d'OPenIG, pour qu'on sache
   toujours sur quelle instance on se trouve (avec l'étiquette « DEV » et le titre de l'onglet).
   Textes discrets et liens de l'en-tête sont assombris pour rester lisibles sur l'orange ; en mode
   sombre, l'en-tête devient ambre foncé. */
:root.openig-hors-production .pf-v5-c-masthead {
  --surface-entete: #f3bc44;
  --openig-muted: #4a4f45;
  --openig-muted-strong: #3f433a;
  --openig-teal-text: #185247;
  --openig-line: rgba(0, 0, 0, 0.16);
  --openig-line-strong: rgba(0, 0, 0, 0.22);
}

:root.openig-hors-production.pf-v5-theme-dark .pf-v5-c-masthead {
  --surface-entete: #553a12;
  --openig-muted: #b7a98c;
  --openig-muted-strong: #cfc3aa;
  --openig-teal-text: #8ecbbe;
  --openig-line: rgba(255, 255, 255, 0.16);
  --openig-line-strong: rgba(255, 255, 255, 0.22);
}

/* PatternFly : jetons globaux alignés sur la charte. Les composants qui redéfinissent localement les
   jetons globaux (tableaux, listes déroulantes, alertes, champs, pastilles) renvoient aux teintes
   « dark » de PatternFly (textes et liens sur fond clair) : elles suivent donc aussi la charte. Les
   teintes « light » (textes sur fond sombre, mais aussi fonds de certains composants) restent
   celles de PatternFly. */
:root,
:root.pf-v5-theme-dark {
  --pf-v5-global--FontFamily--text: var(--openig-font);
  --pf-v5-global--FontFamily--heading: var(--openig-font);
  --pf-v5-global--FontFamily--text--vf: var(--openig-font);
  --pf-v5-global--FontFamily--heading--vf: var(--openig-font);
  --pf-v5-global--FontFamily--redhat-updated--sans-serif: var(--openig-font);
  --pf-v5-global--FontFamily--redhat-updated--heading--sans-serif: var(--openig-font);
  --pf-v5-global--FontFamily--monospace: var(--openig-mono);
  --pf-v5-global--FontWeight--normal: 400;
  --pf-v5-global--FontWeight--bold: 700;
  --pf-v5-global--Color--100: var(--openig-ink);
  --pf-v5-global--Color--200: var(--openig-muted);
  --pf-v5-global--Color--dark-100: var(--openig-ink);
  --pf-v5-global--Color--dark-200: var(--openig-muted);
  --pf-v5-global--BackgroundColor--100: var(--surface-carte);
  --pf-v5-global--BackgroundColor--200: var(--openig-neutral-bg);
  --pf-v5-global--BackgroundColor--light-100: var(--surface-carte);
  --pf-v5-global--BorderColor--100: var(--openig-line-strong);
  --pf-v5-global--BorderColor--200: var(--openig-line-strong);
  --pf-v5-global--BorderColor--300: var(--openig-line);
  --pf-v5-global--BorderColor--dark-100: var(--openig-line-strong);
  --pf-v5-global--primary-color--100: var(--fond-principal);
  --pf-v5-global--primary-color--200: var(--fond-principal-survol);
  --pf-v5-global--primary-color--dark-100: var(--fond-principal);
  --pf-v5-global--link--Color: var(--openig-teal-text);
  --pf-v5-global--link--Color--hover: var(--openig-teal-ink);
  --pf-v5-global--link--Color--visited: var(--openig-teal-text);
  --pf-v5-global--link--Color--dark: var(--openig-teal-text);
  --pf-v5-global--link--Color--dark--hover: var(--openig-teal-ink);
  --pf-v5-global--active-color--100: var(--openig-teal);
  --pf-v5-global--success-color--100: var(--openig-teal);
  --pf-v5-global--success-color--200: var(--openig-teal-text);
  --pf-v5-global--warning-color--100: var(--openig-gold);
  --pf-v5-global--warning-color--200: var(--openig-gold-ink);
  --pf-v5-global--danger-color--100: var(--openig-error);
  --pf-v5-global--danger-color--200: var(--openig-error-ink);
  --pf-v5-global--info-color--100: var(--openig-teal-text);
  --pf-v5-global--info-color--200: var(--openig-teal-ink);
  --pf-v5-global--BorderRadius--sm: 8px;
  --pf-v5-global--BorderRadius--lg: 14px;
}

/* En-tête et menu, sombres chez PatternFly : ils reprennent les jetons de la page. */
:root .pf-v5-c-masthead,
:root .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
:root .pf-v5-c-page__sidebar {
  --pf-v5-global--Color--100: var(--openig-ink);
  --pf-v5-global--Color--200: var(--openig-muted);
  --pf-v5-global--BorderColor--100: var(--openig-line-strong);
  --pf-v5-global--primary-color--100: var(--fond-principal);
  --pf-v5-global--link--Color: var(--openig-teal-text);
  --pf-v5-global--link--Color--hover: var(--openig-teal-ink);
  --pf-v5-global--BackgroundColor--100: var(--surface-carte);
}

/* Page : fond neutre et trame d'OPenIG atténuée, en clair comme en sombre (inversée en douceur, la
   rotation des teintes garde le teal et l'or). */

body {
  background-color: var(--openig-bg);
  font-family: var(--openig-font);
  color: var(--openig-ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--image-fond);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: var(--opacite-trame);
  pointer-events: none;
}

:root.pf-v5-theme-dark body::before { filter: invert(1) hue-rotate(180deg) brightness(1.2); }

/* Écran de chargement de Keycloak, avant l'application. */
.keycloak__loading-container { background: transparent !important; color: var(--openig-ink) !important; }

/* Textes réservés aux lecteurs d'écran (étiquette de l'instance). */
.visuellement-masque {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Mise en page : en-tête sur toute la largeur, menu à gauche sur toute la hauteur, contenu à droite. */
:root .pf-v5-c-page {
  --pf-v5-c-page--BackgroundColor: transparent;
  --pf-v5-c-page__sidebar--Width: var(--largeur-menu);
  --pf-v5-c-page__sidebar--BackgroundColor: var(--surface-menu);
  --pf-v5-c-page__sidebar--BoxShadow: none;
  --pf-v5-c-page__main-section--BackgroundColor: transparent;
  --pf-v5-c-page__main-section--m-light--BackgroundColor: transparent;
  padding: 0;
  gap: 0;
}

/* En-tête : logo et nom du service à gauche ; instance, mode sombre et personne connectée à droite. */
:root .pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--surface-entete);
  --pf-v5-c-masthead--inset: 1.5rem;
  --pf-v5-c-masthead--xl--inset: 1.5rem;
  --pf-v5-c-masthead__main--MinHeight: var(--hauteur-entete);
  --pf-v5-c-masthead__content--MinHeight: var(--hauteur-entete);
  /* Bouton du menu, logo et commandes sur une seule ligne, téléphone compris. */
  --pf-v5-c-masthead--GridTemplateColumns: max-content max-content minmax(0, 1fr);
  --pf-v5-c-masthead__content--GridColumn: 3;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--openig-line);
  box-shadow: 0 1px 3px var(--ombre-legere);
  color: var(--openig-ink);
}

:root .pf-v5-c-masthead__brand { padding: 0.5rem 0; }
:root .pf-v5-c-masthead__brand img { display: block; width: auto; height: 40px; max-height: none; }
:root .pf-v5-c-masthead__brand:focus-visible { outline: 3px solid var(--openig-focus-ring); outline-offset: 2px; border-radius: 6px; }
:root .pf-v5-c-masthead__toggle .pf-v5-c-button { color: var(--openig-teal-text); }
:root .pf-v5-c-masthead .pf-v5-c-toolbar { --pf-v5-c-toolbar--BackgroundColor: transparent; background: transparent; }
:root .pf-v5-c-masthead .pf-v5-c-toolbar__content-section { align-items: center; gap: 0.5rem; }
:root .pf-v5-c-masthead .pf-v5-c-toolbar__item { margin-right: 0; }
:root .pf-v5-c-masthead__content { gap: 1rem; }

/* Nom du service, après le logo, derrière un filet (js/compte.js). */
.openig-service {
  flex: none;
  padding-left: 1rem;
  border-left: 1px solid var(--openig-line-strong);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--openig-teal-ink);
  white-space: nowrap;
}

/* Commandes ajoutées par js/compte.js : étiquette de l'instance, puis bouton du mode sombre. */
.openig-commandes { display: flex; align-items: center; gap: 0.5rem; }

.etiquette-environnement {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 36px;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: var(--openig-gold-tint);
  color: var(--openig-gold-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.etiquette-environnement::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--openig-gold);
}

/* Sur l'en-tête orange, l'étiquette se détache par un liseré. */
:root.openig-hors-production .pf-v5-c-masthead .etiquette-environnement { box-shadow: inset 0 0 0 1px rgba(110, 79, 0, 0.25); }

.bouton-icone {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--openig-neutral-bg);
  color: var(--openig-teal-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bouton-icone svg { width: 20px; height: 20px; }
.bouton-icone:hover { background: var(--openig-teal-tint); color: var(--openig-teal-ink); }
.bouton-icone:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--openig-focus-ring); }

/* Lune en thème clair (passer en sombre), soleil en thème sombre. */
.bouton-theme .icone-soleil,
:root.pf-v5-theme-dark .bouton-theme .icone-lune { display: none; }
:root.pf-v5-theme-dark .bouton-theme .icone-soleil { display: block; }

/* Personne connectée : ses initiales dans une pastille, son nom, le menu (compte, déconnexion).
   L'avatar générique de PatternFly n'est pas repris. */
:root .pf-v5-c-masthead .pf-v5-c-avatar,
:root .pf-v5-c-masthead .pf-v5-c-toolbar__item.pf-m-overflow-menu:not(:has(> :not(.pf-v5-c-avatar))) { display: none; }

:root .pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary):not(.pf-m-secondary) {
  --pf-v5-c-menu-toggle--BackgroundColor: transparent;
  --pf-v5-c-menu-toggle--Color: var(--openig-teal-ink);
  gap: 0.625rem;
  min-height: 44px;
  padding: 0.25rem 0.625rem 0.25rem 0.3125rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
}

:root .pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain)::after { display: none; }

:root .pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain)::before {
  content: none;
  position: static;
  inset: auto;
  border: 0;
}

/* Texte de remplacement vide (« / "" ») : les initiales ne s'ajoutent pas au nom du bouton lu par les
   lecteurs d'écran. */
:root .pf-v5-c-masthead [data-testid="options-toggle"][data-initiales]::before {
  content: attr(data-initiales);
  content: attr(data-initiales) / "";
  display: grid;
  flex: none;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--fond-principal);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

:root .pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain):hover,
:root .pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain).pf-m-expanded { background: var(--openig-neutral-bg); }
:root .pf-v5-c-masthead .pf-v5-c-menu-toggle:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--openig-focus-ring); }
:root .pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-plain { color: var(--openig-teal-text); }
:root .pf-v5-c-masthead .pf-v5-c-menu-toggle__toggle-icon { color: var(--openig-muted-strong); }

/* Menu de navigation : colonne blanche sous l'en-tête, rubriques avec leur icône, page courante
   marquée en teal. En mode sombre, PatternFly ajoute un filet à droite : il est remplacé par le
   nôtre. */
:root .pf-v5-c-page__sidebar {
  padding: 0;
  border-inline-end: 1px solid var(--openig-line);
  background: var(--surface-menu);
}

:root .pf-v5-c-page__sidebar-body {
  height: 100%;
  padding: 1.5rem 0.875rem;
  overflow-y: auto;
  background: transparent;
}

/* Titre du menu (js/compte.js). */
.openig-titre-menu {
  margin: 0 0 0.75rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--openig-muted);
}

:root .pf-v5-c-nav {
  --pf-v5-c-nav__link--FontSize: 0.9375rem;
  --pf-v5-c-nav__list--PaddingTop: 0;
  --pf-v5-c-nav__list--PaddingBottom: 0;
  font-family: var(--openig-font);
}

:root .pf-v5-c-nav__list { display: grid; gap: 2px; }
:root .pf-v5-c-nav__item { margin: 0; }
:root .pf-v5-c-nav__item::before,
:root .pf-v5-c-nav__item::after { display: none; }

:root .pf-v5-c-nav__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--openig-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

:root .pf-v5-c-nav__link::before,
:root .pf-v5-c-nav__link::after { display: none; }
:root .pf-v5-c-nav__link:hover { background: var(--surface-survol); color: var(--openig-teal-ink); text-decoration: none; }
:root .pf-v5-c-nav__link:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--openig-focus-ring); }
:root .pf-v5-c-nav__toggle { margin-left: auto; color: var(--openig-muted-strong); }

:root .pf-v5-c-nav__link.pf-m-current,
:root .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expandable) > .pf-v5-c-nav__link {
  background: var(--openig-teal-tint);
  color: var(--openig-teal-ink);
  box-shadow: inset 3px 0 0 var(--openig-teal);
}

/* Rubrique qui contient la page courante : son titre en teal. */
:root .pf-v5-c-nav__item.pf-m-expandable.pf-m-current > .pf-v5-c-nav__link { color: var(--openig-teal-text); }

/* Icônes des rubriques (premier niveau du menu), au trait des icônes des formulaires. */
:root .pf-v5-c-nav > .pf-v5-c-nav__list > .pf-v5-c-nav__item > .pf-v5-c-nav__link::before {
  content: "";
  display: block;
  position: static;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  background: currentColor;
  -webkit-mask: var(--icone-rubrique) no-repeat center / contain;
  mask: var(--icone-rubrique) no-repeat center / contain;
}

/* Rubrique sans icône propre : un point. */
:root .pf-v5-c-nav > .pf-v5-c-nav__list > .pf-v5-c-nav__item {
  --icone-rubrique: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Mes informations : la personne. */
:root .pf-v5-c-nav > .pf-v5-c-nav__list > .pf-v5-c-nav__item:not(.pf-m-expandable) {
  --icone-rubrique: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1.2-3.6 4.1-5.5 7.5-5.5s6.3 1.9 7.5 5.5'/%3E%3C/svg%3E");
}

/* Sécurité : le bouclier. */
:root .pf-v5-c-nav > .pf-v5-c-nav__list > .pf-v5-c-nav__item[data-testid="accountSecurity"] {
  --icone-rubrique: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.1 8.4 7.5 9.5 4.4-1.1 7.5-4.9 7.5-9.5V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E");
}

/* Mes accès : la grille des applications. */
:root .pf-v5-c-nav > .pf-v5-c-nav__list > .pf-v5-c-nav__item[data-testid="openigAcces"] {
  --icone-rubrique: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E");
}

/* Pages d'une rubrique : alignées sur le nom de la rubrique, sous un filet. */
:root .pf-v5-c-nav__subnav {
  --pf-v5-c-nav__subnav--PaddingBottom: 0;
  margin: 2px 0 0.375rem 1.375rem;
  padding: 0 0 0 0.875rem;
  border-left: 1px solid var(--openig-line-strong);
}

:root .pf-v5-c-nav__subnav .pf-v5-c-nav__link { min-height: 2.5rem; font-weight: 400; }
:root .pf-v5-c-nav__subnav .pf-v5-c-nav__link.pf-m-current { font-weight: 600; }

/* Contenu : sur le fond de la page, centré, en largeur de lecture ; il défile sous l'en-tête. */
:root .pf-v5-c-page__main {
  background: transparent;
  color: var(--openig-ink);
}

:root .pf-v5-c-page__main > .pf-v5-c-page__main-section {
  --pf-v5-c-page__main-section--PaddingTop: 0;
  --pf-v5-c-page__main-section--PaddingRight: var(--marge-contenu);
  --pf-v5-c-page__main-section--PaddingBottom: 1.5rem;
  --pf-v5-c-page__main-section--PaddingLeft: var(--marge-contenu);
  --pf-v5-c-page__main-section--xl--PaddingTop: 0;
  --pf-v5-c-page__main-section--xl--PaddingRight: var(--marge-contenu);
  --pf-v5-c-page__main-section--xl--PaddingBottom: 1.5rem;
  --pf-v5-c-page__main-section--xl--PaddingLeft: var(--marge-contenu);
  width: 100%;
  max-width: calc(var(--largeur-contenu) + 2 * var(--marge-contenu));
  margin-inline: auto;
  background: transparent;
}

:root .pf-v5-c-page__main > .pf-v5-c-page__main-section:last-child { padding-bottom: 3rem; }

/* Titre de la page, précédé du nom de sa rubrique (js/compte.js), et sa phrase de présentation. */
:root .pf-v5-c-page__main > .pf-v5-c-page__main-section:first-child { padding-top: 2.25rem; padding-bottom: 1.5rem; }

:root .pf-v5-c-page__main [data-testid="page-heading"] {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--openig-teal-ink);
}

/* Rubrique hors du titre lu par les lecteurs d'écran (texte de remplacement vide) : le menu la donne. */
:root .pf-v5-c-page__main [data-testid="page-heading"][data-rubrique]::before {
  content: attr(data-rubrique);
  content: attr(data-rubrique) / "";
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--texte-rubrique);
}

:root .pf-v5-c-page__main [data-testid="page-heading"] + p { margin-top: 0.5rem; font-size: 1rem; color: var(--openig-muted); }

/* Cartes : chaque bloc du contenu sur fond blanc, à filet fin et coins arrondis.
   - catégories de moyens de connexion : sections imbriquées ;
   - parties du formulaire de « Mes informations » (général, réseaux sociaux…) ;
   - listes des comptes associés ;
   - ailleurs (appareils, applications, structures, groupes, ressources), la section du contenu
     elle-même : celle qui ne contient ni section, ni formulaire, ni pile de listes. */
:root .pf-v5-c-page__main-section > .pf-v5-c-page__main-section,
:root .pf-v5-c-page__main form.pf-v5-c-form > .pf-v5-l-grid > .pf-v5-l-grid__item > section:not(.pf-v5-c-page__main-section),
:root .pf-v5-c-page__main .pf-v5-l-stack__item,
:root .pf-v5-c-page__main > .pf-v5-c-page__main-section:not(:first-child):not(:has(> .pf-v5-c-page__main-section, > form, > .pf-v5-l-stack)) {
  padding: 1.5rem 1.75rem 1.75rem;
  border: 1px solid var(--openig-line);
  border-radius: var(--rayon-carte);
  background: var(--surface-carte);
  box-shadow: var(--ombre-carte);
}

/* Les sections imbriquées portent la classe utilitaire pf-v5-u-px-0 de PatternFly, qui retire leurs
   marges latérales (!important) : la carte remet les siennes. */
:root .pf-v5-c-page__main-section > .pf-v5-c-page__main-section { padding-inline: 1.75rem !important; }

/* Section de contenu qui est elle-même la carte : la largeur de lecture est gardée, les marges
   passent à l'intérieur. */
:root .pf-v5-c-page__main > .pf-v5-c-page__main-section:not(:first-child):not(:has(> .pf-v5-c-page__main-section, > form, > .pf-v5-l-stack)) {
  flex-grow: 0 !important;
  width: calc(100% - 2 * var(--marge-contenu));
  max-width: var(--largeur-contenu);
  margin-bottom: 3rem;
}

/* Barres d'outils (recherche, pagination, actualisation) alignées sur le contenu de la carte. */
:root .pf-v5-c-page__main .pf-v5-c-toolbar {
  --pf-v5-c-toolbar--PaddingTop: 0;
  --pf-v5-c-toolbar--PaddingBottom: 0.875rem;
  --pf-v5-c-toolbar__content--PaddingRight: 0;
  --pf-v5-c-toolbar__content--PaddingLeft: 0;
  --pf-v5-c-toolbar__content--xl--PaddingRight: 0;
  --pf-v5-c-toolbar__content--xl--PaddingLeft: 0;
}

/* Titre d'une carte de la pile (comptes associés) : sans la marge que Keycloak lui ajoute. */
:root .pf-v5-c-page__main .pf-v5-l-stack__item > .pf-v5-c-title:first-child { margin-top: 0 !important; margin-bottom: 1rem; }

:root .pf-v5-c-page__main-section > .pf-v5-c-page__main-section + .pf-v5-c-page__main-section { margin-top: 1.25rem; }
:root .pf-v5-c-page__main .pf-v5-l-stack.pf-m-gutter { gap: 1.25rem; }
:root .pf-v5-c-page__main form.pf-v5-c-form > .pf-v5-l-grid > .pf-v5-l-grid__item:first-child { display: grid; gap: 1.25rem; align-content: start; }

/* Titres des parties d'une page */
:root .pf-v5-c-title { font-family: var(--openig-font); color: var(--openig-teal-ink); }
:root .pf-v5-c-title.pf-m-xl { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
:root .pf-v5-c-title.pf-m-lg,
:root .pf-v5-c-title.pf-m-md { font-size: 1rem; font-weight: 700; }
:root .pf-v5-c-content { --pf-v5-c-content--Color: var(--openig-ink); font-size: 1rem; }

/* Partie du formulaire : son titre, sa description, puis ses champs. */
:root .pf-v5-c-page__main form.pf-v5-c-form > .pf-v5-l-grid > .pf-v5-l-grid__item > section > .pf-v5-c-title { margin: 0 0 1.25rem; }
/* Description d'une partie : sans la marge basse que Keycloak lui donne (classe utilitaire). */
:root .pf-v5-c-page__main form.pf-v5-c-form > .pf-v5-l-grid > .pf-v5-l-grid__item > section > .pf-v5-c-form > p:first-child { margin: -0.75rem 0 0.25rem; padding-bottom: 0 !important; color: var(--openig-muted); }

/* Moyens de connexion : titre de la catégorie, puis, pour chaque moyen, son nom, sa description, sa
   commande et sa liste, séparés par un filet. */
:root .pf-v5-c-page__main-section > .pf-v5-c-page__main-section > .pf-v5-c-title { margin: 0 0 1rem; }
:root .pf-v5-c-page__main-section > .pf-v5-c-page__main-section > .pf-v5-l-split { align-items: flex-start; gap: 0.5rem 1.5rem; }
:root .pf-v5-c-page__main-section > .pf-v5-c-page__main-section > .pf-v5-c-data-list + .pf-v5-l-split {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--openig-line);
}

:root .pf-v5-c-page__main .cred-title { color: var(--openig-teal-ink); }
:root .pf-v5-c-page__main [data-testid$="/help-text"] { display: block; margin-top: 0.25rem; color: var(--openig-muted); font-size: 0.9375rem; }
:root .pf-v5-c-page__main-section > .pf-v5-c-page__main-section > .pf-v5-l-split + .pf-v5-c-data-list { margin-top: 0.875rem; }
/* Dernière liste d'une carte : sans la marge basse que Keycloak lui donne (classe utilitaire). */
:root .pf-v5-c-page__main-section > .pf-v5-c-page__main-section > .pf-v5-c-data-list:last-child { margin-bottom: 0 !important; }

/* Liens */
:root .pf-v5-c-page a:not(.pf-v5-c-button):not(.pf-v5-c-nav__link):not(.pf-v5-c-masthead__brand) { color: var(--openig-teal-text); font-weight: 600; text-decoration: none; }
:root .pf-v5-c-page a:not(.pf-v5-c-button):not(.pf-v5-c-nav__link):not(.pf-v5-c-masthead__brand):hover { color: var(--openig-teal-ink); text-decoration: underline; }

/* Champs : ceux des formulaires d'administration (cadre fin, coins arrondis, halo au focus). */
:root .pf-v5-c-form {
  --pf-v5-c-form--GridGap: 1.125rem;
  --pf-v5-c-form__label--FontSize: 0.9375rem;
  --pf-v5-c-form__label--Color: var(--openig-teal-ink);
}

:root .pf-v5-c-form__label-text { font-size: 0.9375rem; font-weight: 600; color: var(--openig-teal-ink); }
:root .pf-v5-c-form__label-required { margin-left: 0.125rem; font-weight: 600; color: var(--openig-teal-text); }

:root .pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: var(--surface-champ);
  --pf-v5-c-form-control--Color: var(--openig-ink);
  --pf-v5-c-form-control--BorderRadius: 8px;
  --pf-v5-c-form-control--FontSize: 1rem;
  min-height: 44px;
  border: 1px solid var(--openig-line-strong);
  border-radius: 8px;
  background: var(--surface-champ);
  box-shadow: 0 1px 2px var(--ombre-legere);
  color: var(--openig-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:root .pf-v5-c-form-control::before,
:root .pf-v5-c-form-control::after { display: none; }
:root .pf-v5-c-form-control:hover { border-color: var(--ligne-survol); }

:root .pf-v5-c-form-control > :is(input, textarea, select) {
  min-height: 42px;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  font-family: var(--openig-font);
  font-size: 1rem;
  color: inherit;
}

:root .pf-v5-c-form-control:focus-within {
  border-color: var(--openig-teal);
  box-shadow: 0 0 0 4px var(--openig-focus-ring);
}

:root .pf-v5-c-form-control.pf-m-error { border-color: var(--openig-error); }
:root .pf-v5-c-form-control.pf-m-error:focus-within { box-shadow: 0 0 0 4px var(--erreur-halo); }

:root .pf-v5-c-form-control:is(.pf-m-disabled, .pf-m-readonly) {
  border-color: var(--openig-line);
  background: var(--surface-lecture);
  box-shadow: none;
  color: var(--texte-secondaire);
}

:root .pf-v5-c-form-control :is(input, textarea)::placeholder { color: var(--texte-indice); opacity: 1; }

:root .pf-v5-c-helper-text__item { font-size: 0.8125rem; color: var(--openig-muted); }
:root .pf-v5-c-helper-text__item.pf-m-error { font-weight: 600; color: var(--openig-error-ink); }

/* Champ de recherche (comptes associés) et son bouton : un seul cadre, comme les champs. */
:root .pf-v5-c-text-input-group {
  --pf-v5-c-text-input-group--BackgroundColor: var(--surface-champ);
  --pf-v5-c-text-input-group__text--before--BorderColor: transparent;
  --pf-v5-c-text-input-group__text--after--BorderBottomColor: transparent;
  --pf-v5-c-text-input-group--hover__text--after--BorderBottomColor: transparent;
  --pf-v5-c-text-input-group__text--focus-within--after--BorderBottomColor: transparent;
  --pf-v5-c-text-input-group__icon--Color: var(--openig-muted);
  --pf-v5-c-text-input-group__text-input--placeholder--Color: var(--texte-indice);
  min-height: 42px;
  border: 1px solid var(--openig-line-strong);
  border-radius: 8px 0 0 8px;
  color: var(--openig-ink);
}

:root .pf-v5-c-text-input-group:focus-within { border-color: var(--openig-teal); box-shadow: 0 0 0 4px var(--openig-focus-ring); }
:root .pf-v5-c-text-input-group__text-input { font-size: 1rem; }

:root .pf-v5-c-input-group__item > .pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-control--BackgroundColor: var(--openig-neutral-bg);
  --pf-v5-c-button--m-control--Color: var(--openig-teal-text);
  --pf-v5-c-button--m-control--hover--BackgroundColor: var(--openig-teal-tint);
  --pf-v5-c-button--m-control--hover--Color: var(--openig-teal-ink);
  --pf-v5-c-button--m-control--focus--BackgroundColor: var(--openig-teal-tint);
  --pf-v5-c-button--m-control--after--BorderTopColor: var(--openig-line-strong);
  --pf-v5-c-button--m-control--after--BorderRightColor: var(--openig-line-strong);
  --pf-v5-c-button--m-control--after--BorderBottomColor: var(--openig-line-strong);
  --pf-v5-c-button--m-control--after--BorderLeftColor: transparent;
  --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--openig-line-strong);
  --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--openig-line-strong);
  --pf-v5-c-button--m-control--BorderRadius: 0 8px 8px 0;
  min-width: 44px;
  min-height: 44px;
  border-radius: 0 8px 8px 0;
}

:root .pf-v5-c-input-group__item > .pf-v5-c-button.pf-m-control::after { border-radius: 0 8px 8px 0; }

/* Courriel, en lecture seule : affiché en entier, le lien pour le changer en dessous. */
:root .pf-v5-c-page__main .pf-v5-c-input-group:has(> #update-email-btn) { flex-wrap: wrap; row-gap: 0.25rem; }
:root .pf-v5-c-page__main .pf-v5-c-input-group:has(> #update-email-btn) > .pf-v5-c-form-control { flex: 1 1 100%; }
:root .pf-v5-c-page__main #update-email-btn { padding-left: 0; }

/* Boutons du formulaire (enregistrer, annuler) : sous les cartes. */
:root .pf-v5-c-page__main form.pf-v5-c-form > .pf-v5-c-form__group.pf-m-action { margin-top: 0.25rem; }

/* Listes déroulantes (langue, pagination) : cadre des champs, chevron teal. */
:root .pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary):not(.pf-m-secondary) {
  --pf-v5-c-menu-toggle--BackgroundColor: var(--surface-champ);
  --pf-v5-c-menu-toggle--Color: var(--openig-ink);
  --pf-v5-c-menu-toggle__toggle-icon--Color: var(--openig-teal-text);
  min-height: 44px;
  border-radius: 8px;
}

:root .pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary):not(.pf-m-secondary) {
  border: 1px solid var(--openig-line-strong);
  box-shadow: 0 1px 2px var(--ombre-legere);
}

:root .pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary):not(.pf-m-secondary)::before,
:root .pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary):not(.pf-m-secondary)::after { display: none; }
:root .pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain):hover { border-color: var(--ligne-survol); }
:root .pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain).pf-m-expanded,
:root .pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain):focus-visible {
  outline: none;
  border-color: var(--openig-teal);
  box-shadow: 0 0 0 4px var(--openig-focus-ring);
}

/* Menus ouverts (langue, menu de la personne, actions) */
:root .pf-v5-c-menu {
  --pf-v5-c-menu--BackgroundColor: var(--surface-champ);
  --pf-v5-c-menu--BoxShadow: 0 12px 28px var(--ombre-menu);
  --pf-v5-c-menu__item--Color: var(--openig-ink);
  --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--openig-teal-tint);
  --pf-v5-c-menu__item--m-selected__select-icon--Color: var(--openig-teal-text);
  overflow: hidden;
  border: 1px solid var(--openig-line-strong);
  border-radius: 10px;
}

:root .pf-v5-c-menu__content { padding: 4px; }
:root .pf-v5-c-menu__list-item { border-radius: 6px; }
:root .pf-v5-c-menu__item { font-size: 0.9375rem; }

/* Boutons des formulaires d'administration */
:root .pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 8px;
  --pf-v5-c-button--FontWeight: 600;
  --pf-v5-c-button--FontSize: 1rem;
  --pf-v5-c-button--LineHeight: 1.2;
  --pf-v5-c-button--PaddingTop: 0.625rem;
  --pf-v5-c-button--PaddingBottom: 0.625rem;
  --pf-v5-c-button--PaddingRight: 1.25rem;
  --pf-v5-c-button--PaddingLeft: 1.25rem;
  font-family: var(--openig-font);
}

:root .pf-v5-c-button:is(.pf-m-primary, .pf-m-secondary, .pf-m-danger, .pf-m-tertiary) { min-height: 44px; }
:root .pf-v5-c-button::after { border-radius: 8px; }
:root .pf-v5-c-button:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--openig-focus-ring); }

/* Teal foncé : le teal de la charte n'offre pas le contraste AA sous un texte blanc. */
:root .pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--fond-principal);
  --pf-v5-c-button--m-primary--Color: #fff;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--fond-principal-survol);
  --pf-v5-c-button--m-primary--hover--Color: #fff;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--fond-principal-survol);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--fond-principal-survol);
}

:root .pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--BackgroundColor: var(--surface-carte);
  --pf-v5-c-button--m-secondary--Color: var(--openig-teal-text);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--openig-teal-tint);
  --pf-v5-c-button--m-secondary--hover--Color: var(--openig-teal-ink);
  --pf-v5-c-button--m-secondary--focus--BackgroundColor: var(--openig-teal-tint);
  --pf-v5-c-button--m-secondary--focus--Color: var(--openig-teal-ink);
  --pf-v5-c-button--m-secondary--active--Color: var(--openig-teal-ink);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--openig-teal);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--openig-teal);
  --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--openig-teal);
  --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--openig-teal);
  --pf-v5-c-button--after--BorderWidth: 2px;
  --pf-v5-c-button--hover--after--BorderWidth: 2px;
}

:root .pf-v5-c-button.pf-m-danger {
  --pf-v5-c-button--m-danger--BackgroundColor: var(--fond-danger);
  --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--fond-danger-survol);
  --pf-v5-c-button--m-danger--focus--BackgroundColor: var(--fond-danger-survol);
  --pf-v5-c-button--m-danger--Color: #fff;
}

:root .pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--openig-teal-text);
  --pf-v5-c-button--m-link--hover--Color: var(--openig-teal-ink);
  --pf-v5-c-button--m-link--focus--Color: var(--openig-teal-ink);
  --pf-v5-c-button--m-link--active--Color: var(--openig-teal-ink);
  --pf-v5-c-button--m-link--m-danger--Color: var(--openig-error-ink);
  --pf-v5-c-button--m-link--m-danger--hover--Color: var(--openig-error-ink);
  font-size: 0.9375rem;
}

:root .pf-v5-c-button.pf-m-link.pf-m-inline { font-size: inherit; }

/* Commande d'un moyen de connexion (« Configurer ») : bouton secondaire compact, plus visible
   qu'un lien au bout de la ligne. */
:root .pf-v5-c-page__main-section > .pf-v5-c-page__main-section > .pf-v5-l-split .pf-v5-c-button.pf-m-link[data-testid$="/create"] {
  min-height: 38px;
  padding: 0.4375rem 0.875rem;
  border: 1.5px solid var(--openig-teal);
  border-radius: 8px;
  background: var(--surface-carte);
  white-space: nowrap;
}

:root .pf-v5-c-page__main-section > .pf-v5-c-page__main-section > .pf-v5-l-split .pf-v5-c-button.pf-m-link[data-testid$="/create"]:hover { background: var(--openig-teal-tint); text-decoration: none; }

:root .pf-v5-c-button.pf-m-plain {
  --pf-v5-c-button--m-plain--Color: var(--openig-muted-strong);
  --pf-v5-c-button--m-plain--hover--Color: var(--openig-teal-ink);
  --pf-v5-c-button--m-plain--focus--Color: var(--openig-teal-ink);
  border-radius: 8px;
}

/* Listes de données (moyens de connexion, appareils, applications) : rangées sur un fond doux,
   à filets fins, dans leur carte. */
:root .pf-v5-c-data-list {
  --pf-v5-c-data-list--BackgroundColor: transparent;
  --pf-v5-c-data-list--BorderTopColor: transparent;
  --pf-v5-c-data-list--BorderTopWidth: 0;
  --pf-v5-c-data-list__item--BackgroundColor: var(--surface-douce);
  --pf-v5-c-data-list__item--BorderBottomColor: var(--openig-line);
  --pf-v5-c-data-list__item--BorderBottomWidth: 1px;
  --pf-v5-c-data-list__item--sm--BorderBottomWidth: 1px;
  --pf-v5-c-data-list__item--m-expanded--before--BackgroundColor: var(--openig-teal);
  --pf-v5-c-data-list__item--m-selectable--hover--BackgroundColor: var(--surface-survol);
  overflow: hidden;
  border: 1px solid var(--openig-line);
  border-radius: 10px;
}

:root .pf-v5-c-data-list__item:last-child { border-bottom: 0; }

/* « Pas encore configuré » : une ligne discrète, au cadre pointillé. */
:root .pf-v5-c-data-list:has([data-testid$="/not-set-up"]) {
  --pf-v5-c-data-list__item--BackgroundColor: transparent;
  border-style: dashed;
}

:root .pf-v5-c-page__main [data-testid$="/not-set-up"] { color: var(--openig-muted); font-size: 0.9375rem; }

/* Applications : colonnes alignées sur leurs intitulés, noms longs sur plusieurs lignes. */
:root #applications-list .pf-v5-c-data-list__cell { min-width: 0; }
:root #applications-list .pf-v5-c-data-list__cell .pf-v5-c-button.pf-m-link { display: inline; padding: 0; white-space: normal; text-align: left; }
:root #applications-list .pf-v5-c-data-list__cell .pf-v5-c-button.pf-m-link .pf-v5-c-button__icon { display: inline-block; margin-left: 0.375rem; vertical-align: -0.125em; }

/* Appareils connectés : une rangée par session, séparées par un filet. */
:root .pf-v5-c-data-list__item-row + .pf-v5-c-data-list__item-row { border-top: 1px solid var(--openig-line); }
:root .pf-v5-c-data-list__cell { color: var(--openig-ink); }
:root .pf-v5-c-page__main .session-title { font-weight: 700; color: var(--openig-teal-ink); }

/* Tableaux (structures, groupes) */
:root .pf-v5-c-table {
  --pf-v5-c-table--BackgroundColor: var(--surface-carte);
  --pf-v5-c-table--BorderColor: var(--openig-line);
  --pf-v5-c-table--cell--Color: var(--openig-ink);
  --pf-v5-c-table__thead--cell--FontWeight: 700;
  --pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft: 1rem;
  --pf-v5-c-table--m-compact--cell--first-last-child--PaddingRight: 1rem;
  /* Téléphone : rangées en fiches séparées par un filet, sans la bande grise de PatternFly. */
  --pf-v5-c-table--responsive--BorderColor: var(--openig-line);
  --pf-v5-c-table__tbody--responsive--border-width--base: 1px;
  --pf-v5-c-table__tr--responsive--border-width--base: 1px;
  overflow: hidden;
  border: 1px solid var(--openig-line);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
}

:root .pf-v5-c-table__thead { background: var(--surface-douce); }
:root .pf-v5-c-table__th { font-size: 0.875rem; color: var(--openig-teal-ink); }
:root .pf-v5-c-table__tbody > .pf-v5-c-table__tr:last-child > * { border-bottom: 0; }
:root .pf-v5-c-page__main .pf-v5-c-divider { --pf-v5-c-divider--BackgroundColor: var(--openig-line); }
:root .pf-v5-c-page__main .pf-v5-c-toolbar { --pf-v5-c-toolbar--BackgroundColor: transparent; background: transparent; }
/* Filets que Keycloak place en tête de la barre d'outils, sans rien à séparer à leur gauche, et
   entre la barre et le tableau, qui a déjà son cadre. */
:root .pf-v5-c-page__main .pf-v5-c-toolbar__content-section > .pf-v5-c-divider.pf-m-vertical:first-child,
:root .pf-v5-c-page__main .pf-v5-c-toolbar + .pf-v5-c-divider { display: none; }
:root .pf-v5-c-pagination { --pf-v5-c-pagination--m-bottom--BackgroundColor: transparent; --pf-v5-c-pagination--m-bottom--BoxShadow: none; }

/* Noms longs (structures) : sur plusieurs lignes plutôt que coupés. */
:root .pf-v5-c-table .pf-m-truncate,
:root .pf-v5-c-table .pf-m-truncate > * { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }

/* Comptes associés : l'étiquette de Keycloak (« Connexion par réseau social », « Défini par le
   système ») décrit mal ProConnect et les fournisseurs d'OPenIG ; le nom et la commande suffisent. */
:root :is(#linked-idps, #unlinked-idps) .pf-v5-c-data-list__cell:has([id$="-idp-label"]),
:root :is(#linked-idps, #unlinked-idps) .pf-v5-c-data-list__cell:has([id$="-idp-username"]:empty) { display: none; }
:root :is(#linked-idps, #unlinked-idps) .pf-v5-c-data-list__cell:first-child { flex: 3 1 0; }
:root :is(#linked-idps, #unlinked-idps) [id$="-idp-name"] { font-weight: 700; color: var(--openig-teal-ink); }

/* Listes de descriptions (détails d'une session, d'une application) */
:root .pf-v5-c-description-list__term { font-size: 0.875rem; color: var(--openig-muted-strong); }
:root .pf-v5-c-description-list__term .pf-v5-c-description-list__text { font-weight: 600; }
:root .pf-v5-c-description-list__description { color: var(--openig-ink); }

/* Pastilles (domaines d'une structure) et étiquettes (session actuelle) */
:root .pf-v5-c-chip {
  --pf-v5-c-chip--BackgroundColor: var(--openig-neutral-bg);
  --pf-v5-c-chip--BorderRadius: 999px;
  --pf-v5-c-chip--before--BorderColor: transparent;
  --pf-v5-c-chip__text--Color: var(--openig-muted-strong);
  --pf-v5-c-chip__text--FontSize: 0.8125rem;
}

:root .pf-v5-c-chip__text { font-weight: 600; }

:root .pf-v5-c-label {
  --pf-v5-c-label--BorderRadius: 999px;
  --pf-v5-c-label--FontSize: 0.8125rem;
  --pf-v5-c-label--BackgroundColor: var(--openig-neutral-bg);
  --pf-v5-c-label__content--Color: var(--openig-muted-strong);
  --pf-v5-c-label__content--before--BorderColor: transparent;
  font-weight: 600;
}

:root .pf-v5-c-label.pf-m-green {
  --pf-v5-c-label--BackgroundColor: var(--openig-teal-tint);
  --pf-v5-c-label__content--Color: var(--openig-teal-ink);
  --pf-v5-c-label__icon--Color: var(--openig-teal-text);
}

/* Messages : bandeaux des formulaires (confirmation d'enregistrement, erreurs), sous l'en-tête. */
:root .pf-v5-c-alert-group.pf-m-toast { top: calc(var(--hauteur-entete) + 1rem); right: 1.5rem; }

:root .pf-v5-c-alert {
  --pf-v5-c-alert--BackgroundColor: var(--surface-douce);
  --pf-v5-c-alert--BoxShadow: 0 12px 28px var(--ombre-menu);
  --pf-v5-c-alert--BorderTopWidth: 0;
  --pf-v5-c-alert__title--Color: var(--openig-ink);
  overflow: hidden;
  border: 1px solid var(--openig-line-strong);
  border-radius: 10px;
}

:root .pf-v5-c-alert.pf-m-inline { box-shadow: none; }

:root .pf-v5-c-alert.pf-m-success {
  --pf-v5-c-alert--BackgroundColor: var(--openig-teal-tint);
  --pf-v5-c-alert__icon--Color: var(--openig-teal-text);
  --pf-v5-c-alert__title--Color: var(--openig-teal-ink);
  border-color: var(--succes-bord);
}

:root .pf-v5-c-alert.pf-m-danger {
  --pf-v5-c-alert--BackgroundColor: var(--openig-error-tint);
  --pf-v5-c-alert__icon--Color: var(--openig-error);
  --pf-v5-c-alert__title--Color: var(--openig-error-ink);
  border-color: var(--erreur-bord-doux);
}

:root .pf-v5-c-alert.pf-m-warning {
  --pf-v5-c-alert--BackgroundColor: var(--openig-gold-tint);
  --pf-v5-c-alert__icon--Color: var(--openig-gold-ink);
  --pf-v5-c-alert__title--Color: var(--openig-gold-ink);
  border-color: var(--alerte-bord);
}

:root .pf-v5-c-alert.pf-m-info {
  --pf-v5-c-alert__icon--Color: var(--openig-teal-text);
  --pf-v5-c-alert__title--Color: var(--openig-teal-ink);
}

:root .pf-v5-c-alert::before { display: none; }
:root .pf-v5-c-alert__title { font-weight: 600; }
:root .pf-v5-c-alert__description { color: inherit; }

/* Suppression du compte : zone repliable en bas de « Mes informations », dans une carte au filet
   rouge une fois ouverte. */
:root .pf-v5-c-expandable-section {
  --pf-v5-c-expandable-section__toggle--Color: var(--openig-teal-text);
  --pf-v5-c-expandable-section__toggle--hover--Color: var(--openig-teal-ink);
  --pf-v5-c-expandable-section__toggle--active--Color: var(--openig-teal-ink);
  --pf-v5-c-expandable-section__toggle--focus--Color: var(--openig-teal-ink);
  --pf-v5-c-expandable-section--m-expanded__toggle--Color: var(--openig-teal-ink);
}

:root .pf-v5-c-expandable-section__toggle { font-weight: 600; }

:root .pf-v5-c-page__main [data-testid="delete-account"] {
  margin-top: 1.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--openig-line);
  border-radius: var(--rayon-carte);
  background: var(--surface-carte);
  box-shadow: var(--ombre-carte);
}

@media (min-width: 768px) {
  :root .pf-v5-c-page__main form.pf-v5-c-form + [data-testid="delete-account"],
  :root .pf-v5-c-page__main [data-testid="delete-account"] { width: calc(66.667% - 0.333rem); }
}

:root .pf-v5-c-page__main [data-testid="delete-account"].pf-m-expanded { padding-bottom: 1.25rem; border-color: var(--erreur-bord-doux); }

/* Dialogues de confirmation (suppression, déconnexion) */
:root .pf-v5-c-backdrop { --pf-v5-c-backdrop--BackgroundColor: var(--voile); }

:root .pf-v5-c-modal-box {
  --pf-v5-c-modal-box--BackgroundColor: var(--surface-carte);
  --pf-v5-c-modal-box--BoxShadow: 0 20px 50px var(--ombre-panel);
  border-radius: 16px;
  color: var(--openig-ink);
}

:root .pf-v5-c-modal-box__title { font-family: var(--openig-font); font-size: 1.25rem; font-weight: 700; color: var(--openig-teal-ink); }
/* Titre entier, sur plusieurs lignes au besoin, plutôt que coupé. */
:root .pf-v5-c-modal-box__title-text { overflow: visible; white-space: normal; text-overflow: clip; }

/* Liens d'ancrage de « Mes informations » : sommaire discret à droite des cartes. */
:root .pf-v5-c-jump-links {
  --pf-v5-c-jump-links__link--before--BorderLeftColor: var(--openig-line-strong);
  --pf-v5-c-jump-links__item--m-current__link--before--BorderColor: var(--openig-teal);
  --pf-v5-c-jump-links__link-text--Color: var(--openig-muted-strong);
  --pf-v5-c-jump-links__item--m-current__link-text--Color: var(--openig-teal-ink);
  --pf-v5-c-jump-links__link--hover__link-text--Color: var(--openig-teal-ink);
  --pf-v5-c-jump-links__label--Color: var(--openig-muted);
}

:root .pf-v5-c-jump-links__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
:root .pf-v5-c-page__main form.pf-v5-c-form > .pf-v5-l-grid > .pf-v5-l-grid__item > .pf-v5-c-page__main-section { padding: 0 0 0 0.5rem; background: transparent; }

/* Infobulles et popovers */
:root .pf-v5-c-tooltip { --pf-v5-c-tooltip__content--BackgroundColor: var(--openig-teal-ink); --pf-v5-c-tooltip__content--Color: var(--surface-carte); }
:root .pf-v5-c-popover { --pf-v5-c-popover__content--BackgroundColor: var(--surface-carte); }

/* États vides (aucun appareil, aucune structure) */
:root .pf-v5-c-empty-state__title-text,
:root .pf-v5-c-empty-state__title { color: var(--openig-teal-ink); }
:root .pf-v5-c-empty-state__icon { color: var(--openig-muted); }

/* Écran étroit : le menu passe en volet sous l'en-tête, au-dessus du contenu (comportement de
   PatternFly), avec une ombre pour s'en détacher. */
@media (max-width: 1199.98px) {
  :root .pf-v5-c-page__sidebar.pf-m-expanded { box-shadow: 8px 0 24px var(--ombre-panel); }
}

/* Téléphone et tablette en portrait : titres et boutons d'une page l'un sous l'autre, en-tête des
   applications (colonnes empilées) et liens d'ancrage masqués, bouton de déconnexion d'une session
   sous son nom. */
@media (max-width: 767.98px) {
  :root .pf-v5-c-page__main .pf-v5-l-split { flex-wrap: wrap; }
  :root #applications-list-header,
  :root .pf-v5-l-grid__item:has(> .pf-v5-c-page__main-section > .pf-v5-c-jump-links) { display: none; }
  :root .signed-in-device-list .pf-v5-l-grid__item.pf-v5-u-text-align-right { grid-column: 2 / -1; text-align: left; }
  /* Pagination du bas : PatternFly place le nombre par-dessus les flèches, en comptant sur une barre
     pleine largeur ; Keycloak la pose dans un bloc étroit et le nombre chevauchait la flèche de
     gauche. Les trois éléments sont ici simplement alignés : flèche, nombre, flèche. */
  :root .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle { position: static; order: 1; }
  :root .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav { display: contents; }
  :root .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control:last-child { order: 2; }
}

@media (max-width: 640px) {
  :root {
    --hauteur-entete: 3.5rem;
    --marge-contenu: 0.875rem;
  }

  :root .pf-v5-c-masthead { --pf-v5-c-masthead--inset: 0.75rem; }
  :root .pf-v5-c-masthead__brand img { height: 34px; }
  :root .pf-v5-c-masthead__content { gap: 0.5rem; }
  .openig-service { display: none; }
  /* Personne connectée : ses initiales seulement ; son nom est dans le menu qu'elles ouvrent. */
  :root .pf-v5-c-masthead [data-testid="options-toggle"][data-initiales] { gap: 0; padding: 0.25rem; }
  :root .pf-v5-c-masthead [data-testid="options-toggle"][data-initiales] > * { display: none; }
  :root .pf-v5-c-page__main > .pf-v5-c-page__main-section:first-child { padding-top: 1.5rem; padding-bottom: 1.125rem; }
  :root .pf-v5-c-page__main [data-testid="page-heading"] { font-size: 1.4375rem; }
  :root .pf-v5-c-page__main-section > .pf-v5-c-page__main-section,
  :root .pf-v5-c-page__main form.pf-v5-c-form > .pf-v5-l-grid > .pf-v5-l-grid__item > section:not(.pf-v5-c-page__main-section),
  :root .pf-v5-c-page__main .pf-v5-l-stack__item,
  :root .pf-v5-c-page__main > .pf-v5-c-page__main-section:not(:first-child):not(:has(> .pf-v5-c-page__main-section, > form, > .pf-v5-l-stack)) { padding: 1.125rem 1rem 1.25rem; }
  :root .pf-v5-c-page__main-section > .pf-v5-c-page__main-section { padding-inline: 1rem !important; }
}

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

@media print {
  body::before { display: none; }
  :root .pf-v5-c-masthead,
  :root .pf-v5-c-page__sidebar { display: none; }
  :root .pf-v5-c-page__main-section > .pf-v5-c-page__main-section,
  :root .pf-v5-c-page__main .pf-v5-l-stack__item { box-shadow: none; }
}