/* custom stylesheet for the 'restos' keycloak login theme */

/* Global Form Viewport */

.login-pf body {
  background: var(--keycloak-bg-logo-url) no-repeat center center fixed;
  /*background-color: ;  Background-color Viewport - Default value is empty */
  background-size: cover;
  height: 100%;
}

/* Main Container */
.pf-v5-c-login__container {
  grid-template-columns: 32rem; /* Default size 34rem */
}

.pf-v5-c-login__main {
  border-radius: 12px;
  outline: 10px solid var(--pf-v5-global--palette--black-200);
  box-shadow: none; /* Default value : var(--pf-v5-c-login__main--BoxShadow) */
}

/* Form elements */
input:focus {
  outline: 0;
}



.pf-v5-c-form-control.pf-m-error {
  border: 4px solid rgba(255, 0, 0, 0.33);
  border-radius: 12px;

}

/* ============================================================ */
/* ROOT VARIABLES - ALL GLOBAL DEFINITIONS (MERGED & CORRECTED) */
/* ============================================================ */



/* Classe .kc-logo-text déclaré dans interface Keycloak dans Realm Settings */
div.kc-logo-text {
  background-image: var(--keycloak-logo-url);
  height: var(--keycloak-logo-height);
  width: var(--keycloak-logo-width);
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 auto;
}

:root {
  /* Keycloak Custom Variables */
  /* --keycloak-logo-url: url(../img/keycloak-logo-text.svg); */
  --keycloak-logo-url: url('../assets/logo.svg');
  --keycloak-bg-logo-url: none !important; /* Background image Viewport - Default value : url("../img/keycloak-bg-darken.svg") */
  --keycloak-logo-height: 120px;
  --keycloak-logo-width: 120px;
  --keycloak-card-top-color: var(--pf-v5-global--palette--blue-400);
}

:where(:root) {
  /* Keycloak Custom Variables */
  /* --keycloak-logo-url: url(../img/keycloak-logo-text.svg); */
  --keycloak-logo-url: var(--keycloak-logo-url);
  --keycloak-bg-logo-url: none !important; /* Background image Viewport - Default value : url("../img/keycloak-bg-darken.svg") */
  --keycloak-card-top-color: var(--pf-v5-global--palette--blue-400);

  /* Light Theme Color Palette */
  --pf-v5-global--palette--black-100: #fafafa;
  --pf-v5-global--palette--black-150: #f5f5f5;
  --pf-v5-global--palette--black-200: #f0f0f0;
  --pf-v5-global--palette--black-300: #d2d2d2;
  --pf-v5-global--palette--black-400: #b8bbbe;
  --pf-v5-global--palette--black-500: #8a8d90;
  --pf-v5-global--palette--black-600: #6a6e73;
  --pf-v5-global--palette--black-700: #4f5255;
  --pf-v5-global--palette--black-800: #3c3f42;
  --pf-v5-global--palette--black-850: #212427;
  --pf-v5-global--palette--black-900: #151515;
  --pf-v5-global--palette--black-1000: #030303;

  --pf-v5-global--palette--blue-50: #e7f1fa;
  --pf-v5-global--palette--blue-100: #bee1f4;
  --pf-v5-global--palette--blue-200: #73bcf7;
  --pf-v5-global--palette--blue-300: #2b9af3;
  --pf-v5-global--palette--blue-400: #06c;
  --pf-v5-global--palette--blue-500: #004080;
  --pf-v5-global--palette--blue-600: #002952;
  --pf-v5-global--palette--blue-700: #001223;

  --pf-v5-global--palette--cyan-50: #f2f9f9;
  --pf-v5-global--palette--cyan-100: #a2d9d9;
  --pf-v5-global--palette--cyan-200: #73c5c5;
  --pf-v5-global--palette--cyan-300: #009596;
  --pf-v5-global--palette--cyan-400: #005f60;
  --pf-v5-global--palette--cyan-500: #003737;
  --pf-v5-global--palette--cyan-600: #002323;
  --pf-v5-global--palette--cyan-700: #000f0f;

  --pf-v5-global--palette--gold-50: #fdf7e7;
  --pf-v5-global--palette--gold-100: #f9e0a2;
  --pf-v5-global--palette--gold-200: #f6d173;
  --pf-v5-global--palette--gold-300: #f4c145;
  --pf-v5-global--palette--gold-400: #f0ab00;
  --pf-v5-global--palette--gold-500: #c58c00;
  --pf-v5-global--palette--gold-600: #795600;
  --pf-v5-global--palette--gold-700: #3d2c00;

  --pf-v5-global--palette--green-50: #f3faf2;
  --pf-v5-global--palette--green-100: #bde5b8;
  --pf-v5-global--palette--green-200: #95d58e;
  --pf-v5-global--palette--green-300: #6ec664;
  --pf-v5-global--palette--green-400: #5ba352;
  --pf-v5-global--palette--green-500: #3e8635;
  --pf-v5-global--palette--green-600: #1e4f18;
  --pf-v5-global--palette--green-700: #0f280d;

  --pf-v5-global--palette--light-blue-100: #beedf9;
  --pf-v5-global--palette--light-blue-200: #7cdbf3;
  --pf-v5-global--palette--light-blue-300: #35caed;
  --pf-v5-global--palette--light-blue-400: #00b9e4;
  --pf-v5-global--palette--light-blue-500: #008bad;
  --pf-v5-global--palette--light-blue-600: #005c73;
  --pf-v5-global--palette--light-blue-700: #002d39;

  --pf-v5-global--palette--light-green-100: #e4f5bc;
  --pf-v5-global--palette--light-green-200: #c8eb79;
  --pf-v5-global--palette--light-green-300: #ace12e;
  --pf-v5-global--palette--light-green-400: #92d400;
  --pf-v5-global--palette--light-green-500: #6ca100;
  --pf-v5-global--palette--light-green-600: #486b00;
  --pf-v5-global--palette--light-green-700: #253600;

  --pf-v5-global--palette--orange-50: #fff6ec;
  --pf-v5-global--palette--orange-100: #f4b678;
  --pf-v5-global--palette--orange-200: #ef9234;
  --pf-v5-global--palette--orange-300: #ec7a08;
  --pf-v5-global--palette--orange-400: #c46100;
  --pf-v5-global--palette--orange-500: #8f4700;
  --pf-v5-global--palette--orange-600: #773d00;
  --pf-v5-global--palette--orange-700: #3b1f00;

  --pf-v5-global--palette--purple-50: #f2f0fc;
  --pf-v5-global--palette--purple-100: #cbc1ff;
  --pf-v5-global--palette--purple-200: #b2a3ff;
  --pf-v5-global--palette--purple-300: #a18fff;
  --pf-v5-global--palette--purple-400: #8476d1;
  --pf-v5-global--palette--purple-500: #6753ac;
  --pf-v5-global--palette--purple-600: #40199a;
  --pf-v5-global--palette--purple-700: #1f0066;

  --pf-v5-global--palette--red-50: #faeae8;
  --pf-v5-global--palette--red-100: #c9190b;
  --pf-v5-global--palette--red-200: #a30000;
  --pf-v5-global--palette--red-300: #7d1007;
  --pf-v5-global--palette--red-400: #470000;
  --pf-v5-global--palette--red-500: #2c0000;

  --pf-v5-global--palette--white: #fff;

  /* Background Colors */
  --pf-v5-global--BackgroundColor--100: #fff;
  --pf-v5-global--BackgroundColor--150: #fafafa;
  --pf-v5-global--BackgroundColor--200: #f0f0f0;
  --pf-v5-global--BackgroundColor--light-100: #fff;
  --pf-v5-global--BackgroundColor--light-200: #fafafa;
  --pf-v5-global--BackgroundColor--light-300: #f0f0f0;
  --pf-v5-global--BackgroundColor--dark-100: #151515;
  --pf-v5-global--BackgroundColor--dark-200: #3c3f42;
  --pf-v5-global--BackgroundColor--dark-300: #212427;
  --pf-v5-global--BackgroundColor--dark-400: #4f5255;
  --pf-v5-global--BackgroundColor--dark-transparent-100: rgba(3, 3, 3, 0.62);
  --pf-v5-global--BackgroundColor--dark-transparent-200: rgba(3, 3, 3, 0.32);

  /* Color Variables */
  --pf-v5-global--primary-color--200: #a8015d;
  --pf-v5-global--primary-color--100: #e6007e;
  --pf-v5-global--primary-color--light-100: #73bcf7;
  --pf-v5-global--primary-color--dark-100: #06c;

  --pf-v5-global--Color--200: #6a6e73;
  --pf-v5-global--Color--300: #3c3f42;
  --pf-v5-global--Color--400: #8a8d90;
  --pf-v5-global--Color--100: #151515;
  --pf-v5-global--Color--light-200: #f0f0f0;
  --pf-v5-global--Color--light-300: #d2d2d2;
  --pf-v5-global--Color--light-100: #fff;
  --pf-v5-global--Color--dark-100: #151515;
  --pf-v5-global--Color--dark-200: #6a6e73;

  --pf-v5-global--active-color--100: #06c;
  --pf-v5-global--active-color--200: #bee1f4;
  --pf-v5-global--active-color--300: #2b9af3;
  --pf-v5-global--active-color--400: #73bcf7;

  --pf-v5-global--secondary-color--100: #6a6e73;

  --pf-v5-global--custom-color--100: #73c5c5;
  --pf-v5-global--custom-color--200: #009596;
  --pf-v5-global--custom-color--300: #003737;

  /* Status Colors */
  --pf-v5-global--success-color--100: #3e8635;
  --pf-v5-global--success-color--200: #1e4f18;

  --pf-v5-global--info-color--100: #2b9af3;
  --pf-v5-global--info-color--200: #002952;

  --pf-v5-global--warning-color--100: #f0ab00;
  --pf-v5-global--warning-color--200: #795600;

  --pf-v5-global--danger-color--100: #c9190b;
  --pf-v5-global--danger-color--200: #a30000;
  --pf-v5-global--danger-color--300: #470000;

  --pf-v5-global--disabled-color--100: #6a6e73;
  --pf-v5-global--disabled-color--200: #d2d2d2;
  --pf-v5-global--disabled-color--300: #f0f0f0;

  /* Link Colors */
  --pf-v5-global--link--Color: #e6007e;
  --pf-v5-global--link--Color--hover: #a8015d;
  --pf-v5-global--link--Color--light: #2b9af3;
  --pf-v5-global--link--Color--light--hover: #73bcf7;
  --pf-v5-global--link--Color--dark: #06c;
  --pf-v5-global--link--Color--dark--hover: #004080;
  --pf-v5-global--link--Color--visited: #40199a;
  --pf-v5-global--link--TextDecoration: none;
  --pf-v5-global--link--TextDecoration--hover: underline;

  /* Border Variables */
  --pf-v5-global--BorderWidth--sm: 1px;
  --pf-v5-global--BorderWidth--md: 2px;
  --pf-v5-global--BorderWidth--lg: 3px;
  --pf-v5-global--BorderWidth--xl: 4px;

  --pf-v5-global--BorderColor--100: #d2d2d2;
  --pf-v5-global--BorderColor--200: #8a8d90;
  --pf-v5-global--BorderColor--300: #f0f0f0;
  --pf-v5-global--BorderColor--dark-100: #d2d2d2;
  --pf-v5-global--BorderColor--light-100: #b8bbbe;

  --pf-v5-global--BorderRadius--sm: 6px;
  --pf-v5-global--BorderRadius--lg: 30em;

  /* Icon Colors */
  --pf-v5-global--icon--Color--light: #6a6e73;
  --pf-v5-global--icon--Color--dark: #151515;
  --pf-v5-global--icon--Color--light--light: #f0f0f0;
  --pf-v5-global--icon--Color--dark--light: #fff;
  --pf-v5-global--icon--Color--light--dark: #6a6e73;
  --pf-v5-global--icon--Color--dark--dark: #151515;

  --pf-v5-global--icon--FontSize--sm: 0.75rem;
  --pf-v5-global--icon--FontSize--md: 1rem;
  --pf-v5-global--icon--FontSize--lg: 1.5rem;
  --pf-v5-global--icon--FontSize--xl: 3.375rem;

  /* Font Family - Inter (Modified from default RedHat) */
  --pf-v5-global--FontFamily--text: "Inter", helvetica, arial, sans-serif;
  --pf-v5-global--FontFamily--heading: "Inter", helvetica, arial, sans-serif;
  --pf-v5-global--FontFamily--monospace: "IBM Plex Mono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
  --pf-v5-global--FontFamily--text--vf: "Inter var", "Inter", helvetica, arial, sans-serif;
  --pf-v5-global--FontFamily--heading--vf: "Inter var", "Inter", helvetica, arial, sans-serif;
  --pf-v5-global--FontFamily--monospace--vf: "IBM Plex Mono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;

  /* Font Sizes by Breakpoints */
  --pf-v5-global--FontSize--3xl: 1.75rem; /* ≥ 1200px */
  --pf-v5-global--FontSize--2xl: 1.5rem; /* ≥ 1200px */
  --pf-v5-global--FontSize--xl: 1.25rem; /* 992px–1199px */
  --pf-v5-global--FontSize--lg: 1.125rem; /* 768px–991px */
  --pf-v5-global--FontSize--md: 0.875rem; /* 576px–767px */
  --pf-v5-global--FontSize--sm: 0.875rem; /* < 576px */
  --pf-v5-global--FontSize--xs: 0.75rem; /* < 576px */

  --pf-v5-global--FontWeight--normal: 400;
  --pf-v5-global--FontWeight--bold: 500; /* Form label font weight - Default value: 700 */

  --pf-v5-global--LineHeight--sm: 1.3;
  --pf-v5-global--LineHeight--md: 1.2; /* Line height Form paragraphs - Default value: 1.5 */

  /* Spacing (Spacers) */
  --pf-v5-global--spacer--xs: 0.25rem;
  --pf-v5-global--spacer--sm: 0.5rem;
  --pf-v5-global--spacer--md: 2rem; /* Default value: 1rem */
  --pf-v5-global--spacer--lg: 2.5rem; /* Top/Bottom space for divider - Default: 1.5rem */
  --pf-v5-global--spacer--xl: 3rem; /* Right/Left space between form elements & main container - Default: 2rem */
  --pf-v5-global--spacer--2xl: 3rem;
  --pf-v5-global--spacer--3xl: 4rem;
  --pf-v5-global--spacer--4xl: 5rem;
  --pf-v5-global--spacer--form-element: 0.875rem; /* Space inside form elements (Input) - Default: 0.375rem */
  --pf-v5-global--gutter: 1rem;
  --pf-v5-global--gutter--md: 1.5rem; /* Space between form elements - Default: 1.5rem */

  /* Z-Index */
  --pf-v5-global--ZIndex--xs: 100;
  --pf-v5-global--ZIndex--sm: 200;
  --pf-v5-global--ZIndex--md: 300;
  --pf-v5-global--ZIndex--lg: 400;
  --pf-v5-global--ZIndex--xl: 500;
  --pf-v5-global--ZIndex--2xl: 600;

  /* Breakpoints */
  --pf-v5-global--breakpoint--xs: 0;
  --pf-v5-global--breakpoint--sm: 576px;
  --pf-v5-global--breakpoint--md: 768px;
  --pf-v5-global--breakpoint--lg: 992px;
  --pf-v5-global--breakpoint--xl: 1200px;
  --pf-v5-global--breakpoint--2xl: 1450px;

  --pf-v5-global--height-breakpoint--sm: 0;
  --pf-v5-global--height-breakpoint--md: 40rem;
  --pf-v5-global--height-breakpoint--lg: 48rem;
  --pf-v5-global--height-breakpoint--xl: 60rem;
  --pf-v5-global--height-breakpoint--2xl: 80rem;

  /* Miscellaneous */
  --pf-v5-global--ListStyle: disc outside;
  --pf-v5-global--Transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
  --pf-v5-global--TimingFunction: cubic-bezier(0.645, 0.045, 0.355, 1);
  --pf-v5-global--TransitionDuration: 250ms;
  --pf-v5-global--arrow--width: 0.9375rem;
  --pf-v5-global--arrow--width-lg: 1.5625rem;
  --pf-v5-global--target-size--MinWidth: 44px;
  --pf-v5-global--target-size--MinHeight: 44px;
  --pf-v5-global--inverse--multiplier: 1;

  /* Box Shadows - Light Theme */
  --pf-v5-global--BoxShadow--sm: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06);
  --pf-v5-global--BoxShadow--sm-top: 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
  --pf-v5-global--BoxShadow--sm-right: 0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
  --pf-v5-global--BoxShadow--sm-bottom: 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
  --pf-v5-global--BoxShadow--sm-left: -0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);

  --pf-v5-global--BoxShadow--md: 0 0.25rem 0.5rem 0rem rgba(143, 255, 31, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06);
  --pf-v5-global--BoxShadow--md-top: 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
  --pf-v5-global--BoxShadow--md-right: 0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
  --pf-v5-global--BoxShadow--md-bottom: 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
  --pf-v5-global--BoxShadow--md-left: -0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18);

  --pf-v5-global--BoxShadow--lg: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08);
  --pf-v5-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
  --pf-v5-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
  --pf-v5-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
  --pf-v5-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);

  --pf-v5-global--BoxShadow--xl: 0 1rem 2rem 0 rgba(3, 3, 3, 0.16), 0 0 0.5rem 0 rgba(3, 3, 3, 0.1);
  --pf-v5-global--BoxShadow--xl-top: 0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.2);
  --pf-v5-global--BoxShadow--xl-right: 1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2);
  --pf-v5-global--BoxShadow--xl-bottom: 0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.2);
  --pf-v5-global--BoxShadow--xl-left: -1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2);

  --pf-v5-global--BoxShadow--inset: inset 0 0 0.625rem 0 rgba(3, 3, 3, 0.25);

  --pf-v5-global--font-path: "./assets/fonts";
  --pf-v5-global--fonticon-path: "./assets/pficon";
}

/* ============================================================ */
/* DARK THEME COLORS - Override root variables for dark mode */
/* ============================================================ */

:where(.pf-v5-theme-dark) {
  --pf-v5-global--palette--black-50: #e0e0e0;
  --pf-v5-global--palette--black-100: #c6c7c8;
  --pf-v5-global--palette--black-200: #aaabac;
  --pf-v5-global--palette--black-300: #868789;
  --pf-v5-global--palette--black-400: #57585a;
  --pf-v5-global--palette--black-500: #444548;
  --pf-v5-global--palette--black-600: #36373a;
  --pf-v5-global--palette--black-700: #26292d;
  --pf-v5-global--palette--black-800: #1b1d21;
  --pf-v5-global--palette--black-900: #0f1214;

  --pf-v5-global--palette--red-9999: #fe5142;
  --pf-v5-global--palette--red-8888: #ff7468;
  --pf-v5-global--palette--blue-300: #1fa7f8;

  --pf-v5-global--BackgroundColor--100: #1b1d21;
  --pf-v5-global--BackgroundColor--150: #212427;
  --pf-v5-global--BackgroundColor--200: #0f1214;
  --pf-v5-global--BackgroundColor--300: #26292d;
  --pf-v5-global--BackgroundColor--400: #36373a;

  --pf-v5-global--BackgroundColor--light-100: #1b1d21;
  --pf-v5-global--BackgroundColor--light-200: #0f1214;
  --pf-v5-global--BackgroundColor--light-300: #26292d;

  --pf-v5-global--BackgroundColor--dark-100: #1b1d21;
  --pf-v5-global--BackgroundColor--dark-200: #0f1214;
  --pf-v5-global--BackgroundColor--dark-300: #26292d;
  --pf-v5-global--BackgroundColor--dark-400: #36373a;

  --pf-v5-global--BorderColor--100: #444548;
  --pf-v5-global--BorderColor--200: #444548;
  --pf-v5-global--BorderColor--300: #57585a;
  --pf-v5-global--BorderColor--400: #aaabac;

  --pf-v5-global--BorderColor--dark-100: #444548;
  --pf-v5-global--BorderColor--light-100: #444548;

  --pf-v5-global--Color--100: #e0e0e0;
  --pf-v5-global--Color--200: #aaabac;
  --pf-v5-global--Color--dark-100: #e0e0e0;
  --pf-v5-global--Color--dark-200: #aaabac;
  --pf-v5-global--Color--light-100: #e0e0e0;
  --pf-v5-global--Color--light-200: #aaabac;
  --pf-v5-global--Color--light-300: #3c3f42;

  --pf-v5-global--active-color--100: #1fa7f8;
  --pf-v5-global--primary-color--100: #e6007e; /* Background color - Primary Button */
  --pf-v5-global--primary-color--300: #06c; /* Global Button */
  --pf-v5-global--primary-color--400: #fff;
  --pf-v5-global--primary-color--light-100: #1fa7f8;
  --pf-v5-global--primary-color--dark-100: #1fa7f8;

  --pf-v5-global--custom-color--200: #73c5c5;

  --pf-v5-global--success-color--100: #5ba352;
  --pf-v5-global--warning-color--100: #f0ab00;
  --pf-v5-global--warning-color--200: #f4c145;
  --pf-v5-global--danger-color--100: #fe5142;
  --pf-v5-global--danger-color--200: #ff7468;

  --pf-v5-global--disabled-color--100: #868789;
  --pf-v5-global--disabled-color--200: #444548;
  --pf-v5-global--disabled-color--300: #aaabac;

  --pf-v5-global--icon--Color--light: #aaabac;
  --pf-v5-global--icon--Color--dark: #e0e0e0;
  --pf-v5-global--icon--Color--light--light: #aaabac;
  --pf-v5-global--icon--Color--dark--light: #e0e0e0;
  --pf-v5-global--icon--Color--light--dark: #aaabac;
  --pf-v5-global--icon--Color--dark--dark: #e0e0e0;

  --pf-v5-global--link--Color: #e6007e;
  --pf-v5-global--link--Color--hover: #a8015d;
  --pf-v5-global--link--Color--visited: #a18fff;
  --pf-v5-global--link--Color--light: #1fa7f8;
  --pf-v5-global--link--Color--light--hover: #73bcf7;
  --pf-v5-global--link--Color--dark: #1fa7f8;
  --pf-v5-global--link--Color--dark--hover: #73bcf7;

  /* Dark Theme Box Shadows */
  --pf-v5-global--BoxShadow--sm: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.48), 0 0 0.125rem 0 rgba(3, 3, 3, 0.24);
  --pf-v5-global--BoxShadow--sm-top: 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
  --pf-v5-global--BoxShadow--sm-right: 0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
  --pf-v5-global--BoxShadow--sm-bottom: 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
  --pf-v5-global--BoxShadow--sm-left: -0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);

  --pf-v5-global--BoxShadow--md: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.48), 0 0 0.25rem 0 rgba(3, 3, 3, 0.24);
  --pf-v5-global--BoxShadow--md-top: 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
  --pf-v5-global--BoxShadow--md-right: 0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
  --pf-v5-global--BoxShadow--md-bottom: 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
  --pf-v5-global--BoxShadow--md-left: -0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72);

  --pf-v5-global--BoxShadow--lg: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.64), 0 0 0.375rem 0 rgba(3, 3, 3, 0.32);
  --pf-v5-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
  --pf-v5-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
  --pf-v5-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
  --pf-v5-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);

  --pf-v5-global--BoxShadow--xl: 0 1rem 2rem 0 rgba(3, 3, 3, 0.64), 0 0 0.5rem 0 rgba(3, 3, 3, 0.4);
  --pf-v5-global--BoxShadow--xl-top: 0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.8);
  --pf-v5-global--BoxShadow--xl-right: 1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8);
  --pf-v5-global--BoxShadow--xl-bottom: 0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.8);
  --pf-v5-global--BoxShadow--xl-left: -1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8);

  --pf-v5-global--BoxShadow--inset: inset 0 0 0.625rem 0 #030303;
}

/* ============================================================ */
/* BODY STYLING */
/* ============================================================ */

:where(body) {
  font-family: var(--pf-v5-global--FontFamily--text);
  font-size: var(--pf-v5-global--FontSize--md);
  font-weight: var(--pf-v5-global--FontWeight--normal);
  line-height: var(--pf-v5-global--LineHeight--md);
}

/* ============================================================ */
/* FORM CONTROLS */
/* ============================================================ */


/* Conteneur des boutons - disposition en colonne */
#kc-form-buttons > div {
  display: flex;
  flex-direction: column;
  gap: var(--pf-v5-global--spacer--sm);
}

/* Boutons pleine largeur */
#kc-form-buttons input.pf-v5-c-button {
  width: 100%;
  display: block;
}

input.pf-v5-c-form-control,
select.pf-v5-c-form-control,
textarea.pf-v5-c-form-control {
  background-color: transparent; /* Background color form elements */
  border: 1px solid var(--pf-v5-global--BorderColor--200); /* Default: none */
  color: var(--pf-v5-c-form-control--Color);
  padding-block-end: var(--pf-v5-c-form-control--PaddingBottom);
  padding-block-start: var(--pf-v5-c-form-control--PaddingTop);
  padding-inline-end: var(--pf-v5-c-form-control--PaddingRight);
  padding-inline-start: var(--pf-v5-c-form-control--PaddingLeft);
  border-radius: var(--pf-v5-global--BorderRadius--sm); /* AJOUT */
  width: 100%;
  font-size: var(--pf-v5-c-form-control--FontSize);
  line-height: var(--pf-v5-c-form-control--LineHeight);
}

.pf-v5-c-form-control > :is(input, select, textarea) {
  background-color: transparent; /* Background color form elements */
  border: 1px solid var(--pf-v5-global--BorderColor--200); /* Default: none */
  color: var(--pf-v5-c-form-control--Color);
  grid-column: 1/-1;
  grid-row: 1/2;
  padding-block-end: var(--pf-v5-c-form-control--PaddingBottom);
  padding-block-start: var(--pf-v5-c-form-control--PaddingTop);
  padding-inline-end: var(--pf-v5-c-form-control--PaddingRight);
  padding-inline-start: var(--pf-v5-c-form-control--PaddingLeft);
  border-radius: var(--pf-v5-global--BorderRadius--sm); /* AJOUT */
}

:where(.pf-v5-theme-dark) .pf-v5-c-input-group {
  --pf-v5-c-input-group__item--BorderLeftWidth: 0; /* Default: var(--pf-v5-c-input-group__item--BorderWidth--base) */
}

:where(.pf-v5-theme-dark) .pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: 0; /* Background element behind form elements - Default: var(--pf-v5-global--BackgroundColor--400) */
  color: var(--pf-v5-global--Color--100);
}

.pf-v5-c-form-control {
  --pf-v5-c-form-control--ColumnGap: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-form-control--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-form-control--FontSize: var(--pf-v5-global--FontSize--md);
  --pf-v5-c-form-control--LineHeight: var(--pf-v5-global--LineHeight--md);
  --pf-v5-c-form-control--Resize: none;
  --pf-v5-c-form-control--OutlineOffset: -2px;

  --pf-v5-c-form-control--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-form-control--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-form-control--before--BorderBottomWidth: 0;
  --pf-v5-c-form-control--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);

  --pf-v5-c-form-control--before--BorderTopColor: transparent;
  --pf-v5-c-form-control--before--BorderRightColor: transparent;
  --pf-v5-c-form-control--before--BorderBottomColor: transparent;
  --pf-v5-c-form-control--before--BorderLeftColor: transparent;

  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-form-control--after--BorderBottomColor: 0; /* Default: var(--pf-v5-global--BorderColor--200) */

  --pf-v5-c-form-control--BackgroundColor: 0; /* Default: var(--pf-v5-global--BackgroundColor--100) */
  --pf-v5-c-form-control--Width: 100%;
  --pf-v5-c-form-control--inset--base: var(--pf-v5-global--spacer--sm);

  --pf-v5-c-form-control--PaddingTop: var(--pf-v5-global--spacer--form-element);
  --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-global--spacer--form-element);
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--inset--base);
  --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control--inset--base);

  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);

  --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-form-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);

  --pf-v5-c-form-control--m-placeholder--Color: var(--pf-v5-global--Color--dark-200);
  --pf-v5-c-form-control--m-placeholder--child--Color: var(--pf-v5-global--Color--100);

  --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
  --pf-v5-c-form-control--m-disabled--after--BorderColor: transparent;

  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--300);
  --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
  --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
  --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
  --pf-v5-c-form-control--m-readonly--m-plain--inset--base: 0;
  --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0;

  --pf-v5-c-form-control--m-success--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-form-control--m-success--after--BorderBottomColor: var(--pf-v5-global--success-color--100);
  --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-v5-global--spacer--xl);

  --pf-v5-c-form-control--m-warning--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-form-control--m-warning--after--BorderBottomColor: var(--pf-v5-global--warning-color--100);
  --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-v5-global--spacer--xl);

  --pf-v5-c-form-control--m-error--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-form-control--m-error--after--BorderBottomColor: 0; /* Default: var(--pf-v5-global--danger-color--100) */
  --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-form-control--m-error--icon--width: var(--pf-v5-c-form-control--FontSize);

  --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
  --pf-v5-c-form-control--m-icon--icon--width: var(--pf-v5-c-form-control--FontSize);
  --pf-v5-c-form-control--m-icon--icon--spacer: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-error--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer));

  --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-form-control__select--PaddingLeft: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-form-control__select--m-success--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
  --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
  --pf-v5-c-form-control__select--m-error--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);

  --pf-v5-c-form-control--textarea--Width: var(--pf-v5-c-form-control--Width);
  --pf-v5-c-form-control--textarea--Height: auto;

  --pf-v5-c-form-control__icon--PaddingTop: var(--pf-v5-global--spacer--form-element);
  --pf-v5-c-form-control__icon--Color: var(--pf-v5-global--icon--Color--light);
  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-global--icon--Color--light);

  --pf-v5-c-form-control--m-success__icon--m-status--Color: var(--pf-v5-global--success-color--100);
  --pf-v5-c-form-control--m-warning__icon--m-status--Color: var(--pf-v5-global--warning-color--100);
  --pf-v5-c-form-control--m-error__icon--m-status--Color: var(--pf-v5-global--danger-color--100);

  --pf-v5-c-form-control__utilities--Gap: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-form-control__utilities--PaddingTop: var(--pf-v5-c-form-control--inset--base);
  --pf-v5-c-form-control__utilities--PaddingRight: var(--pf-v5-c-form-control--inset--base);

  --pf-v5-c-form-control__toggle-icon--PaddingTop: var(--pf-v5-global--spacer--form-element);
  --pf-v5-c-form-control__toggle-icon--PaddingRight: var(--pf-v5-c-form-control--inset--base);
  --pf-v5-c-form-control__toggle-icon--PaddingLeft: var(--pf-v5-c-form-control--inset--base);
  --pf-v5-c-form-control__toggle-icon--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);

  align-items: start;
  background-color: var(--pf-v5-c-form-control--BackgroundColor);
  color: var(--pf-v5-c-form-control--Color);
  column-gap: var(--pf-v5-c-form-control--ColumnGap);
  display: grid;
  font-size: var(--pf-v5-c-form-control--FontSize);
  grid-template-columns: 1fr auto;
  line-height: var(--pf-v5-c-form-control--LineHeight);
  position: relative;
  resize: var(--pf-v5-c-form-control--Resize);
  width: var(--pf-v5-c-form-control--Width);
}

.pf-v5-c-form-control:hover {
  --pf-v5-c-form-control--after--BorderBottomColor: 0; /* Default: var(--pf-v5-c-form-control--hover--after--BorderBottomColor) */
}

.pf-v5-c-form-control.pf-m-error {
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-error--PaddingRight);
  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-error--after--BorderBottomColor);
  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-error__icon--m-status--Color);
  --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-error--m-status--PaddingRight);
  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-error--after--BorderBottomWidth);
}

/* ============================================================ */
/* BUTTONS */
/* ============================================================ */

.pf-v5-c-button {
  --pf-v5-c-button--PaddingTop: var(--pf-v5-global--spacer--form-element);
  --pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
  --pf-v5-c-button--PaddingLeft: var(--pf-v5-global--spacer--md);
  --pf-v5-c-button--LineHeight: var(--pf-v5-global--LineHeight--md);
  --pf-v5-c-button--FontWeight: var(--pf-v5-global--FontWeight--normal);
  --pf-v5-c-button--FontSize: var(--pf-v5-global--FontSize--md);
  --pf-v5-c-button--BackgroundColor: transparent;
  --pf-v5-c-button--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
  --pf-v5-c-button--after--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
  --pf-v5-c-button--after--BorderColor: transparent;
  --pf-v5-c-button--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-button--hover--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-button--focus--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-button--active--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-button--disabled--Color: var(--pf-v5-global--disabled-color--100);
  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
  --pf-v5-c-button--disabled--after--BorderColor: transparent;
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-primary--Color: var(--pf-v5-global--Color--light-100);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-v5-global--primary-color--200);
  --pf-v5-c-button--m-primary--hover--Color: var(--pf-v5-global--Color--light-100);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-v5-global--primary-color--200);
  --pf-v5-c-button--m-primary--focus--Color: var(--pf-v5-global--Color--light-100);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-v5-global--primary-color--200);
  --pf-v5-c-button--m-primary--active--Color: var(--pf-v5-global--Color--light-100);
  --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-secondary--Color: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-secondary--hover--Color: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-secondary--focus--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-secondary--focus--Color: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-secondary--active--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-secondary--active--Color: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-global--danger-color--100);
  --pf-v5-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-v5-global--danger-color--100);
  --pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--m-danger--hover--Color: var(--pf-v5-global--danger-color--200);
  --pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-v5-global--danger-color--100);
  --pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--m-danger--focus--Color: var(--pf-v5-global--danger-color--200);
  --pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-v5-global--danger-color--100);
  --pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--m-danger--active--Color: var(--pf-v5-global--danger-color--200);
  --pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-v5-global--danger-color--100);
  --pf-v5-c-button--m-tertiary--BackgroundColor: transparent;
  --pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-tertiary--hover--BackgroundColor: transparent;
  --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-tertiary--focus--BackgroundColor: transparent;
  --pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-tertiary--focus--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-tertiary--active--BackgroundColor: transparent;
  --pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-tertiary--active--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-global--warning-color--100);
  --pf-v5-c-button--m-warning--Color: var(--pf-v5-global--Color--dark-100);
  --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-v5-global--palette--gold-500);
  --pf-v5-c-button--m-warning--hover--Color: var(--pf-v5-global--Color--dark-100);
  --pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-v5-global--palette--gold-500);
  --pf-v5-c-button--m-warning--focus--Color: var(--pf-v5-global--Color--dark-100);
  --pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-v5-global--palette--gold-500);
  --pf-v5-c-button--m-warning--active--Color: var(--pf-v5-global--Color--dark-100);
  --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-global--danger-color--100);
  --pf-v5-c-button--m-danger--Color: var(--pf-v5-global--Color--light-100);
  --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-global--danger-color--200);
  --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-global--Color--light-100);
  --pf-v5-c-button--m-danger--focus--BackgroundColor: var(--pf-v5-global--danger-color--200);
  --pf-v5-c-button--m-danger--focus--Color: var(--pf-v5-global--Color--light-100);
  --pf-v5-c-button--m-danger--active--BackgroundColor: var(--pf-v5-global--danger-color--200);
  --pf-v5-c-button--m-danger--active--Color: var(--pf-v5-global--Color--light-100);
  --pf-v5-c-button--m-link--BackgroundColor: transparent;
  --pf-v5-c-button--m-link--Color: var(--pf-v5-global--link--Color);
  --pf-v5-c-button--m-link--hover--BackgroundColor: transparent;
  --pf-v5-c-button--m-link--hover--Color: var(--pf-v5-global--link--Color--hover);
  --pf-v5-c-button--m-link--focus--BackgroundColor: transparent;
  --pf-v5-c-button--m-link--focus--Color: var(--pf-v5-global--link--Color--hover);
  --pf-v5-c-button--m-link--active--BackgroundColor: transparent;
  --pf-v5-c-button--m-link--active--Color: var(--pf-v5-global--link--Color--hover);
  --pf-v5-c-button--m-link--disabled--BackgroundColor: transparent;
  --pf-v5-c-button--m-link--disabled--Color: var(--pf-v5-global--disabled-color--100);
  --pf-v5-c-button--m-link--m-inline--FontSize: inherit;
  --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
  --pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-v5-global--link--Color--hover);
  --pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
  --pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
  --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
  --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
  --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-v5-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-v5-global--spacer--sm));
  --pf-v5-c-button--m-link--m-danger--BackgroundColor: transparent;
  --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-global--danger-color--100);
  --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
  --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-v5-global--danger-color--200);
  --pf-v5-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
  --pf-v5-c-button--m-link--m-danger--focus--Color: var(--pf-v5-global--danger-color--200);
  --pf-v5-c-button--m-link--m-danger--active--BackgroundColor: transparent;
  --pf-v5-c-button--m-link--m-danger--active--Color: var(--pf-v5-global--danger-color--200);
  --pf-v5-c-button--m-plain--BackgroundColor: transparent;
  --pf-v5-c-button--m-plain--Color: var(--pf-v5-global--Color--200);
  --pf-v5-c-button--m-plain--hover--BackgroundColor: transparent;
  --pf-v5-c-button--m-plain--hover--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-plain--focus--BackgroundColor: transparent;
  --pf-v5-c-button--m-plain--focus--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-plain--active--BackgroundColor: transparent;
  --pf-v5-c-button--m-plain--active--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200);
  --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
  --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
  --pf-v5-c-button--m-control--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-control--BorderRadius: 0;
  --pf-v5-c-button--m-control--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-button--m-control--after--BorderTopColor: var(--pf-v5-global--BorderColor--300);
  --pf-v5-c-button--m-control--after--BorderRightColor: var(--pf-v5-global--BorderColor--300);
  --pf-v5-c-button--m-control--after--BorderBottomColor: transparent; /* Default value - var(--pf-v5-global--BorderColor--200) */
  --pf-v5-c-button--m-control--after--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
  --pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
  --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
  --pf-v5-c-button--m-control--hover--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
  --pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
  --pf-v5-c-button--m-control--active--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-control--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
  --pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
  --pf-v5-c-button--m-control--focus--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
  --pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
  --pf-v5-c-button--m-control--m-expanded--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
  --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
  --pf-v5-c-button--m-small--FontSize: var(--pf-v5-global--FontSize--sm);
  --pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-v5-global--spacer--md);
  --pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-v5-global--spacer--md);
  --pf-v5-c-button--m-display-lg--PaddingLeft: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-button--m-display-lg--FontWeight: var(--pf-v5-global--FontWeight--bold);
  --pf-v5-c-button--m-link--m-display-lg--FontSize: var(--pf-v5-global--FontSize--lg);
  --pf-v5-c-button__icon--m-start--MarginRight: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-button__icon--m-end--MarginLeft: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-button__progress--width: calc(var(--pf-v5-global--icon--FontSize--md) + var(--pf-v5-global--spacer--sm));
  --pf-v5-c-button__progress--Opacity: 0;
  --pf-v5-c-button__progress--TranslateY: -50%;
  --pf-v5-c-button__progress--TranslateX: 0;
  --pf-v5-c-button__progress--Top: 50%;
  --pf-v5-c-button__progress--Left: var(--pf-v5-global--spacer--md);
  --pf-v5-c-button--m-progress--TransitionProperty: padding;
  --pf-v5-c-button--m-progress--TransitionDuration: var(--pf-v5-global--TransitionDuration);
  --pf-v5-c-button--m-progress--PaddingRight: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width)/2);
  --pf-v5-c-button--m-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width)/2);
  --pf-v5-c-button--m-in-progress--PaddingRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-button--m-in-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width));
  --pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-in-progress--m-plain__progress--Left: 50%;
  --pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
  --pf-v5-c-button__count--MarginLeft: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-button--disabled__c-badge--Color: var(--pf-v5-global--Color--dark-100);
  --pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
  --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-v5-global--BorderColor--300);
  --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
  border: 0;
  border-radius: var(--pf-v5-c-button--BorderRadius);
  display: inline-block;
  font-size: var(--pf-v5-c-button--FontSize);
  font-weight: var(--pf-v5-c-button--FontWeight);
  line-height: var(--pf-v5-c-button--LineHeight);
  padding-block-end: var(--pf-v5-c-button--PaddingBottom);
  padding-block-start: var(--pf-v5-c-button--PaddingTop);
  padding-inline-end: var(--pf-v5-c-button--PaddingRight);
  padding-inline-start: var(--pf-v5-c-button--PaddingLeft);
  position: relative;
  text-align: center;
  user-select: none;
  white-space: nowrap;
}
.pf-v5-c-button.pf-m-primary {
  background-color: var(--pf-v5-c-button--m-primary--BackgroundColor);
  color: var(--pf-v5-c-button--m-primary--Color);
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--after--BorderColor: #b5b5b5; /* Default: var(--pf-v5-c-button--m-secondary--after--BorderColor) */
  background-color: var(--pf-v5-c-button--m-secondary--BackgroundColor);
  color: var(--pf-v5-c-button--m-secondary--Color);
}

.pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--BorderRadius: 8px; /* Border radius control icon button (e.g. password eye icon) - Default: var(--pf-v5-c-button--m-control--BorderRadius) */
  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-control--disabled--BackgroundColor);
  --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--m-control--after--BorderWidth); /* Default: var(--pf-v5-c-button--m-control--after--BorderWidth) */
  --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-control--after--BorderTopColor) var(--pf-v5-c-button--m-control--after--BorderRightColor) var(--pf-v5-c-button--m-control--after--BorderBottomColor) var(--pf-v5-c-button--m-control--after--BorderLeftColor);

  background-color: #f0eded; /* Default: var(--pf-v5-c-button--m-control--BackgroundColor) */
  color: var(--pf-v5-c-button--m-control--Color);
  margin-left: 6px; /* Space between input and button */
}

.pf-v5-c-button.pf-m-control:hover,
.pf-v5-c-button.pf-m-control:focus {
  --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--hover--Color);
  --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--hover--BackgroundColor);
  --pf-v5-c-button--m-control--after--BorderBottomColor: transparent; /* Default: var(--pf-v5-c-button--m-control--hover--after--BorderBottomColor) */
}

/* ============================================================ */
/* LOGIN CONTAINER & HEADER */
/* ============================================================ */

.pf-v5-c-login__main-header {
  border-top: 0; /* Decorative line at top of main container - Default: 4px solid var(--keycloak-card-top-color) */
}

/* [RESTO-01129] Fix title card wrapped */
div.pf-v5-c-login__main-header {
  grid-template-columns: 100% 0%;
  text-align: center;
}

#kc-header-wrapper {
  display: block;
  width: 320px;
  height: 120px;
  margin: 0 auto;
  /* Hide text */
  color: transparent !important;
  text-shadow: none !important;
}

#kc-header {
  margin-top: -1rem;
  margin-bottom: 1rem;
}

.pf-v5-c-login {
  --pf-v5-c-login--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-login--PaddingBottom: var(--pf-v5-global--spacer--lg);

  --pf-v5-c-login__container--xl--GridColumnGap: var(--pf-v5-global--spacer--3xl);
  --pf-v5-c-login__container--MaxWidth: 28rem; /* Max width main container allowing mobile optimization - Default value : 31.25rem */
  --pf-v5-c-login__container--xl--MaxWidth: none;
  --pf-v5-c-login__container--PaddingLeft: 6.125rem;
  --pf-v5-c-login__container--PaddingRight: 6.125rem;
  --pf-v5-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);

  --pf-v5-c-login__header--MarginBottom: var(--pf-v5-global--spacer--md);
  --pf-v5-c-login__header--PaddingLeft: var(--pf-v5-global--spacer--md);
  --pf-v5-c-login__header--PaddingRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-login__header--xl--MarginBottom: var(--pf-v5-global--spacer--2xl);
  --pf-v5-c-login__header--xl--MarginTop: var(--pf-v5-global--spacer--3xl);
  --pf-v5-c-login__header--c-brand--MarginBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-login__header--c-brand--xl--MarginBottom: var(--pf-v5-global--spacer--2xl);

  --pf-v5-c-login__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
  --pf-v5-c-login__main--MarginBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-login__main--BoxShadow: var(--pf-v5-global--BoxShadow--xl);

  --pf-v5-c-login__main-header--PaddingTop: var(--pf-v5-global--spacer--2xl);
  --pf-v5-c-login__main-header--PaddingRight: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-login__main-header--PaddingBottom: var(--pf-v5-global--spacer--md);
  --pf-v5-c-login__main-header--PaddingLeft: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-login__main-header--md--PaddingRight: var(--pf-v5-global--spacer--2xl);
  --pf-v5-c-login__main-header--md--PaddingLeft: var(--pf-v5-global--spacer--2xl);
  --pf-v5-c-login__main-header--ColumnGap: var(--pf-v5-global--spacer--md);
  --pf-v5-c-login__main-header--RowGap: var(--pf-v5-global--spacer--md);

  --pf-v5-c-login__main-header-desc--MarginBottom: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-login__main-header-desc--md--MarginBottom: 0;
  --pf-v5-c-login__main-header-desc--FontSize: var(--pf-v5-global--FontSize--sm);

  --pf-v5-c-login__main-body--PaddingRight: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-login__main-body--PaddingBottom: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-login__main-body--PaddingLeft: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-login__main-body--md--PaddingRight: var(--pf-v5-global--spacer--2xl);
  --pf-v5-c-login__main-body--md--PaddingLeft: var(--pf-v5-global--spacer--2xl);

  --pf-v5-c-login__main-footer--PaddingBottom: var(--pf-v5-global--spacer--3xl);
  --pf-v5-c-login__main-footer--c-title--MarginBottom: var(--pf-v5-global--spacer--md);

  --pf-v5-c-login__main-footer-links--PaddingTop: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-login__main-footer-links--PaddingRight: var(--pf-v5-global--spacer--3xl);
  --pf-v5-c-login__main-footer-links--PaddingBottom: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-login__main-footer-links--PaddingLeft: var(--pf-v5-global--spacer--3xl);

  --pf-v5-c-login__main-footer-links-item--PaddingRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-login__main-footer-links-item--PaddingLeft: var(--pf-v5-global--spacer--md);
  --pf-v5-c-login__main-footer-links-item--MarginBottom: var(--pf-v5-global--spacer--sm);

  --pf-v5-c-login__main-footer-links-item-link-svg--Fill: var(--pf-v5-global--icon--Color--light);
  --pf-v5-c-login__main-footer-links-item-link-svg--Width: var(--pf-v5-global--icon--FontSize--lg);
  --pf-v5-c-login__main-footer-links-item-link-svg--Height: var(--pf-v5-global--icon--FontSize--lg);
  --pf-v5-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-v5-global--icon--Color--dark);

  --pf-v5-c-login__main-footer-band--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-login__main-footer-band--PaddingRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-login__main-footer-band--PaddingBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-login__main-footer-band--PaddingLeft: var(--pf-v5-global--spacer--md);
  --pf-v5-c-login__main-footer-band--BorderTopColor: var(--pf-v5-global--BorderColor--100);
  --pf-v5-c-login__main-footer-band--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);

  --pf-v5-c-login__main-footer-band-item--PaddingTop: var(--pf-v5-global--spacer--md);

  --pf-v5-c-login__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
  --pf-v5-c-login__footer--PaddingRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-login__footer--c-list--PaddingTop: var(--pf-v5-global--spacer--md);
  --pf-v5-c-login__footer--c-list--xl--PaddingTop: var(--pf-v5-global--spacer--2xl);
}

.pf-v5-c-login__header .pf-v5-c-brand {
  margin-block-end: var(--pf-v5-c-login__header--c-brand--MarginBottom);
}

.pf-v5-c-login__main-footer-band {
  border-block-start: var(--pf-v5-c-login__main-footer-band--BorderTopWidth) solid var(--pf-v5-c-login__main-footer-band--BorderTopColor);
  padding-block-end: var(--pf-v5-c-login__main-footer-band--PaddingBottom);
  padding-block-start: var(--pf-v5-c-login__main-footer-band--PaddingTop);
  padding-inline-end: var(--pf-v5-c-login__main-footer-band--PaddingRight);
  padding-inline-start: var(--pf-v5-c-login__main-footer-band--PaddingLeft);
  text-align: center;
}

/* ============================================================ */
/* BRAND ELEMENT */
/* ============================================================ */

.pf-v5-c-brand {
  --pf-v5-c-brand--Width: auto;
  --pf-v5-c-brand--Height: auto;
  --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width);
  --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height);

  height: var(--pf-v5-c-brand--Height--base);
  width: var(--pf-v5-c-brand--Width--base);
}

@media (min-width: 576px) {
  .pf-v5-c-brand {
    --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height-on-sm, var(--pf-v5-c-brand--Height));
    --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width-on-sm, var(--pf-v5-c-brand--Width));
  }
}

@media (min-width: 768px) {
  .pf-v5-c-brand {
    --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height-on-md, var(--pf-v5-c-brand--Height-on-sm, var(--pf-v5-c-brand--Height)));
    --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width-on-md, var(--pf-v5-c-brand--Width-on-sm, var(--pf-v5-c-brand--Width)));
  }
}

@media (min-width: 992px) {
  .pf-v5-c-brand {
    --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height-on-lg, var(--pf-v5-c-brand--Height-on-md, var(--pf-v5-c-brand--Height-on-sm, var(--pf-v5-c-brand--Height))));
    --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width-on-lg, var(--pf-v5-c-brand--Width-on-md, var(--pf-v5-c-brand--Width-on-sm, var(--pf-v5-c-brand--Width))));
  }
}

@media (min-width: 1200px) {
  .pf-v5-c-brand {
    --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height-on-xl, var(--pf-v5-c-brand--Height-on-lg, var(--pf-v5-c-brand--Height-on-md, var(--pf-v5-c-brand--Height-on-sm, var(--pf-v5-c-brand--Height)))));
    --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width-on-xl, var(--pf-v5-c-brand--Width-on-lg, var(--pf-v5-c-brand--Width-on-md, var(--pf-v5-c-brand--Width-on-sm, var(--pf-v5-c-brand--Width)))));
  }
}

/* ============================================================ */
/* HEADINGS */
/* ============================================================ */


.pf-v5-c-title {
  --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading);
  --pf-v5-c-title--m-4xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
  --pf-v5-c-title--m-4xl--FontSize: var(--pf-v5-global--FontSize--4xl);
  --pf-v5-c-title--m-4xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
  --pf-v5-c-title--m-3xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
  --pf-v5-c-title--m-3xl--FontSize: var(--pf-v5-global--FontSize--3xl);
  --pf-v5-c-title--m-3xl--FontWeight: var(--pf-v5-global--FontWeight--bold);
  --pf-v5-c-title--m-2xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
  --pf-v5-c-title--m-2xl--FontSize: var(--pf-v5-global--FontSize--2xl);
  --pf-v5-c-title--m-2xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
  --pf-v5-c-title--m-xl--LineHeight: var(--pf-v5-global--LineHeight--md);
  --pf-v5-c-title--m-xl--FontSize: var(--pf-v5-global--FontSize--xl);
  --pf-v5-c-title--m-xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
  --pf-v5-c-title--m-lg--LineHeight: var(--pf-v5-global--LineHeight--md);
  --pf-v5-c-title--m-lg--FontSize: var(--pf-v5-global--FontSize--lg);
  --pf-v5-c-title--m-lg--FontWeight: var(--pf-v5-global--FontWeight--normal);
  --pf-v5-c-title--m-md--LineHeight: var(--pf-v5-global--LineHeight--md);
  --pf-v5-c-title--m-md--FontSize: var(--pf-v5-global--FontSize--md);
  --pf-v5-c-title--m-md--FontWeight: var(--pf-v5-global--FontWeight--normal);
  font-family: var(--pf-v5-c-title--FontFamily);
  word-break: break-word;
}






/* ============================================================ */
/* LISTS */
/* ============================================================ */


.pf-v5-c-data-list {
  --pf-v5-c-data-list--FontSize: 1em;
  --pf-v5-c-data-list--LineHeight: var(--pf-v5-global--LineHeight--md);
  --pf-v5-c-data-list--BorderTopColor: var(--pf-v5-global--BorderColor--300);
  --pf-v5-c-data-list--BorderTopWidth: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-data-list--sm--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-data-list--sm--BorderTopColor: var(--pf-v5-global--BorderColor--100);
  --pf-v5-c-data-list--MarginLeft: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__item--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
  --pf-v5-c-data-list__item--m-selected--ZIndex: var(--pf-v5-global--ZIndex--xs);
  --pf-v5-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-v5-global--active-color--100);
  --pf-v5-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-v5-global--active-color--100);
  --pf-v5-c-data-list__item--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top),var(--pf-v5-global--BoxShadow--sm-bottom);
  --pf-v5-c-data-list__item--m-clickable--OutlineOffset: calc(var(--pf-v5-global--spacer--xs)*-1);
  --pf-v5-c-data-list__item--m-clickable--hover--ZIndex: calc(var(--pf-v5-c-data-list__item--m-selected--ZIndex) + 1);
  --pf-v5-c-data-list__item--m-clickable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top),var(--pf-v5-global--BoxShadow--sm-bottom);
  --pf-v5-c-data-list__item--m-clickable--focus--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top),var(--pf-v5-global--BoxShadow--sm-bottom);
  --pf-v5-c-data-list__item--m-clickable--active--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top),var(--pf-v5-global--BoxShadow--sm-bottom);
  --pf-v5-c-data-list__item--BorderBottomColor: var(--pf-v5-global--BorderColor--300);
  --pf-v5-c-data-list__item--BorderBottomWidth: 0.5rem;
  --pf-v5-c-data-list__item--m-clickable--hover--item--BorderTopColor: var(--pf-v5-c-data-list__item--BorderBottomColor);
  --pf-v5-c-data-list__item--m-clickable--hover--item--BorderTopWidth: var(--pf-v5-c-data-list__item--BorderBottomWidth);
  --pf-v5-c-data-list__item--sm--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-data-list__item--sm--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
  --pf-v5-c-data-list__item--before--BackgroundColor: transparent;
  --pf-v5-c-data-list__item--before--Width: calc(var(--pf-v5-global--BorderWidth--lg)*2);
  --pf-v5-c-data-list__item--before--Transition: var(--pf-v5-global--Transition);
  --pf-v5-c-data-list__item--before--Top: 0;
  --pf-v5-c-data-list__item--before--sm--Top: calc(var(--pf-v5-c-data-list__item--BorderBottomWidth)*-1);
  --pf-v5-c-data-list__item-row--PaddingRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__item-row--PaddingLeft: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__item-row--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__item-row--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__item-content--md--PaddingBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__cell--PaddingTop: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-data-list__cell--PaddingBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__cell--MarginRight: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-data-list__cell--md--PaddingBottom: 0;
  --pf-v5-c-data-list__cell--m-icon--MarginRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__cell--cell--PaddingTop: 0;
  --pf-v5-c-data-list__cell--cell--md--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list--cell--MinWidth: initial;
  --pf-v5-c-data-list--cell--Overflow: visible;
  --pf-v5-c-data-list--cell--TextOverflow: clip;
  --pf-v5-c-data-list--cell--WhiteSpace: normal;
  --pf-v5-c-data-list--cell--WordBreak: normal;
  --pf-v5-c-data-list--cell--m-truncate--MinWidth: 5ch;
  --pf-v5-c-data-list__toggle--MarginLeft: calc(var(--pf-v5-global--spacer--sm)*-1);
  --pf-v5-c-data-list__toggle--MarginTop: calc(var(--pf-v5-global--spacer--form-element)*-1);
  --pf-v5-c-data-list__toggle--MarginBottom: calc(var(--pf-v5-global--spacer--form-element)*-1);
  --pf-v5-c-data-list__toggle-icon--Height: calc(var(--pf-v5-c-data-list--FontSize)*var(--pf-v5-c-data-list--LineHeight));
  --pf-v5-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
  --pf-v5-c-data-list__toggle-icon--Rotate: 0;
  --pf-v5-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
  --pf-v5-c-data-list__item-draggable-button--BackgroundColor: transparent;
  --pf-v5-c-data-list__item-draggable-button--PaddingLeft: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__item-draggable-button--PaddingRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-v5-global--spacer--lg)*-1);
  --pf-v5-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-v5-global--spacer--lg)*-1);
  --pf-v5-c-data-list__item-draggable-button--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__item-draggable-button--PaddingBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-v5-global--spacer--md)*-1);
  --pf-v5-c-data-list__item-draggable-button-icon--Color: var(--pf-v5-global--icon--Color--light);
  --pf-v5-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-v5-global--disabled-color--200);
  --pf-v5-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-v5-global--icon--Color--dark);
  --pf-v5-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-v5-global--icon--Color--dark);
  --pf-v5-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
  --pf-v5-c-data-list__item--m-ghost-row--after--Opacity: .6;
  --pf-v5-c-data-list__item-control--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__item-control--PaddingBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__item-control--MarginRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__item-control--md--MarginRight: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-data-list__item-control--not-last-child--MarginRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__check--Height: calc(var(--pf-v5-c-data-list--FontSize)*var(--pf-v5-c-data-list--LineHeight));
  --pf-v5-c-data-list__check--MarginTop: -0.0625rem;
  --pf-v5-c-data-list__item-action--Display: flex;
  --pf-v5-c-data-list__item-action--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__item-action--PaddingBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__item-action--MarginLeft: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__item-action--md--MarginLeft: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-data-list__item-action--not-last-child--MarginRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__item-action__action--MarginTop: calc(var(--pf-v5-global--spacer--form-element)*-1);
  --pf-v5-c-data-list__action--MarginTop: var(--pf-v5-c-data-list__item-action__action--MarginTop);
  --pf-v5-c-data-list__item-action__action--MarginBottom: calc(var(--pf-v5-global--spacer--form-element)*-1);
  --pf-v5-c-data-list__expandable-content--MarginRight: calc(var(--pf-v5-c-data-list__expandable-content-body--PaddingRight)*-1);
  --pf-v5-c-data-list__expandable-content--MarginLeft: calc(var(--pf-v5-c-data-list__expandable-content-body--PaddingLeft)*-1);
  --pf-v5-c-data-list__expandable-content--MaxHeight: 37.5rem;
  --pf-v5-c-data-list__expandable-content--before--Top: calc(var(--pf-v5-c-data-list__item--BorderBottomWidth)*-1);
  --pf-v5-c-data-list__expandable-content-body--PaddingTop: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__expandable-content-body--PaddingRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__expandable-content-body--PaddingBottom: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__expandable-content-body--PaddingLeft: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-data-list--m-compact--FontSize: var(--pf-v5-global--FontSize--sm);
  --pf-v5-c-data-list--m-compact--LineHeight: var(--pf-v5-global--LineHeight--sm);
  --pf-v5-c-data-list--m-compact__check--FontSize: var(--pf-v5-global--FontSize--md);
  --pf-v5-c-data-list--m-compact__cell--PaddingTop: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-data-list--m-compact__cell--PaddingBottom: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-data-list--m-compact__cell--md--PaddingBottom: 0;
  --pf-v5-c-data-list--m-compact__cell-cell--PaddingTop: 0;
  --pf-v5-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list--m-compact__item-control--PaddingTop: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-data-list--m-compact__item-control--MarginRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list--m-compact__item-action--PaddingTop: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-data-list--m-compact__item-action--MarginLeft: var(--pf-v5-global--spacer--md);
  --pf-v5-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-v5-c-data-list--m-compact__item-action--PaddingTop)*-1);
  --pf-v5-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-v5-c-data-list--m-compact__item-action--PaddingBottom)*-1);
  --pf-v5-c-data-list--m-compact__action--MarginTop: var(--pf-v5-c-data-list--m-compact__item-action__action--MarginTop);
  --pf-v5-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-v5-global--spacer--sm)*-1);
  --pf-v5-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-v5-global--spacer--sm)*-1);
  --pf-v5-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-v5-global--spacer--sm);
  color: var(--pf-v5-global--Color--100);
  font-size: var(--pf-v5-c-data-list--FontSize);
  line-height: var(--pf-v5-c-data-list--LineHeight);
  overflow-wrap: break-word;
}
.pf-v5-c-data-list__item-row {
  display: flex;
  flex-wrap: nowrap;
  padding-inline-end: var(--pf-v5-c-data-list__item-row--PaddingRight);
  padding-inline-start: var(--pf-v5-c-data-list__item-row--PaddingLeft);
}
.pf-v5-u-font-family-heading {
  font-size: var(--pf-v5-global--icon--FontSize--md);
  font-weight: var(--pf-v5-global--FontWeight--bold);
}

/* ============================================
   CORRECTIF - Réduction espacement titre / texte
   Le problème vient du padding-block-start hérité
   de .pf-v5-c-data-list__cell
   ============================================ */

/* Cellule titre h2 - on retire le padding bas */
.select-auth-box-headline {
    margin-bottom: 0.25rem; /* réduit l'espace sous le h2 */
}

/* Cellule description - on réduit le padding haut */
.select-auth-box-desc.pf-v5-c-data-list__cell {
    padding-block-start: 0 !important;
    padding-top: 0 !important;
}

.pf-v5-c-data-list__cell {
    margin-bottom: 1em !important; /* STYLE INITIALEMENT INEXISTANT - AJOUT TEST SURVEILLER COMPORTEMENT */
}
/* Alternative si la cellule titre a trop de padding bas */
.pf-v5-c-data-list__cell.pf-m-no-fill.pf-v5-u-pt-md.pf-v5-u-pb-md {
    padding-bottom: 0.25rem !important;
}

/*
RESTO-01125 - Fix UI MFA
=============================================================================
MFA — Tuiles de sélection / enrôlement / authentification

Trois templates distincts partagent les mêmes classes utilitaires du thème
(.select-auth-container, .select-auth-box-parent, .pf-m-icon,
.select-auth-box-headline, .select-auth-box-desc).
Tout le style commun vit dans « MFA — Commons » ; chaque template a ensuite
sa propre section pour ses spécificités. Permet de voir d'un coup d'œil
ce qui relève d'une surcharge Keycloak natif vs d'un SPI custom.

┌─────┬──────────────────────────────────┬──────────────────────────────────────┐
│ DOM │ Template / id du form            │ Contexte d'affichage                 │
├─────┼──────────────────────────────────┼──────────────────────────────────────┤
│  A  │ SPI custom enforce-mfa           │ Enrôlement forcé quand l'utilisateur │
│     │ #kc-select-mfa-form              │ n'a aucune MFA configurée            │
│     │                                  │                                      │
│  B  │ Keycloak upstream                │ Picker natif à la connexion quand    │
│     │ select-authenticator.ftl         │ l'utilisateur a plusieurs MFA        │
│     │                                  │ configurées                          │
│     │                                  │                                      │
│  C  │ SPI custom webauthn              │ Authentification par passkey /       │
│     │ #kc-form-webauthn                │ clé FIDO2 (template upstream         │
│     │                                  │ webauthn-authenticate.ftl réutilisé) │
└─────┴──────────────────────────────────┴──────────────────────────────────────┘

Pattern d'icône (unifié DOM A/B/C) :
- On masque systématiquement le contenu natif de .pf-m-icon (.pf-m-icon > *) :
    DOM A → <i class="fa fa-list …">
    DOM B → <i class="kcAuthenticatorXxxClass …"> (voir note ci-dessous)
    DOM C → <div class="pf-v5-c-icon pf-m-lg"><svg>…</svg></div>
- On injecte Font Awesome en ::before sur .pf-m-icon, avec le glyphe piloté
  par la custom-property --orbeet-mfa-icon. Chaque section affecte cette
  variable selon son contexte (id #mfa-*, :has(> i.kcAuthenticator…Class),
  #kc-form-webauthn). Fallback fa-lock via var(… , "\f023").

Note DOM B : on a retiré les entrées kcAuthenticator*Class de theme.properties.
Le fallback du template upstream (`!authenticationSelection.iconCssClass`) fait
alors émettre à Keycloak la clé brute comme nom de classe (ex. <i class=
"kcAuthenticatorOTPClass …">), qu'on exploite via :has() pour choisir le glyphe.
Plus de double source de vérité .properties/.css — tout vit ici.
=============================================================================
*/


/* ===========================================================================
   MFA — Commons (partagé DOM A / DOM B / DOM C)
   =========================================================================== */
/* Utility générique : certains SPI / templates posent cette classe pour
   masquer un élément (ex. <form id="webauth" hidden class="sf-hidden">). */
   .sf-hidden {
    display: none !important;
  }
  
  /* Liste / conteneur — reset mise en page (DOM A : <div>, DOM B/C : <ul>) */
  .pf-v5-c-login .select-auth-container {
    display: flex;
    flex-direction: column;
    gap: var(--pf-v5-global--spacer--md);
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  
  .pf-v5-c-login .select-auth-container > li {
    margin: 0;
    padding: 0;
  }
  
  /* Reset des custom-props PF data-list (le container porte aussi .pf-v5-c-data-list sur les 3 DOMs) */
  .pf-v5-c-login .select-auth-container.pf-v5-c-data-list {
    --pf-v5-c-data-list--BorderTopWidth: 0;
    --pf-v5-c-data-list--BorderTopColor: transparent;
    --pf-v5-c-data-list__item--BorderBottomWidth: 0;
    --pf-v5-c-data-list__item--BorderBottomColor: transparent;
    --pf-v5-c-data-list__item--sm--BorderBottomWidth: 0;
    --pf-v5-c-data-list__item--m-clickable--hover--item--BorderTopWidth: 0;
  }
  
  /* Reset du <li>.pf-v5-c-data-list__item (DOM B/C uniquement — pas de <li> en DOM A) */
  .pf-v5-c-login .select-auth-container .pf-v5-c-data-list__item {
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  
  /* Sans show-username, la liste est le premier bloc → margin-top pour le rythme */
  .pf-v5-c-login__main-body > .select-auth-container:first-child {
    margin-top: var(--pf-v5-global--spacer--md);
  }
  
  /* Carte commune — --orbeet-icon-color hérité par <i> (DOM B) et ::before (DOM A/C) */
  .pf-v5-c-login .select-auth-box-parent {
    --orbeet-icon-color: var(--pf-v5-global--Color--200);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--pf-v5-global--spacer--sm);
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--pf-v5-global--BorderColor--200);
    border-radius: 8px;
    background-color: var(--pf-v5-global--BackgroundColor--100);
    padding-block: 20px;
    padding-inline: 10px;
  }
  
  /* Survol : bordure + icône uniquement (pas de fond ni halo sur la carte) */
  .pf-v5-c-login .select-auth-box-parent:hover {
    --orbeet-icon-color: var(--pf-v5-global--primary-color--200);
    border-color: var(--pf-v5-global--primary-color--200);
    background-color: var(--pf-v5-global--BackgroundColor--100);
    box-shadow: none;
  }
  
  /* Cellule icône — taille fixe ; léger inset depuis le bord gauche de la carte */
  .pf-v5-c-login .select-auth-box-parent .pf-m-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-width: 2.75rem;
    margin-inline-start: var(--pf-v5-global--spacer--xs);
  }
  
  /* Masquage du contenu natif de .pf-m-icon (unifié DOM A/B/C) :
     <i class="fa fa-list"> (A), <i class="kcAuthenticator…Class"> (B) ou <div> + <svg> (C). */
  .pf-v5-c-login .select-auth-box-parent .pf-m-icon > * {
    display: none;
  }
  
  /* Injection FA via ::before — glyphe piloté par --orbeet-mfa-icon, fallback fa-lock.
     Chaque section ci-dessous se contente d'affecter la variable selon son contexte. */
  .pf-v5-c-login .select-auth-box-parent .pf-m-icon::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1;
    width: 1em;
    text-align: center;
    color: var(--orbeet-icon-color);
    transition: color 0.15s ease;
    content: var(--orbeet-mfa-icon, "\f023"); /* fallback fa-lock */
  }
  
  /* Flèche de droite masquée (kcSelectAuthListItemArrowIconClass non défini dans theme.properties) */
  .pf-v5-c-login .select-auth-container .pf-v5-c-data-list__item-action:empty,
  .pf-v5-c-login .select-auth-container .pf-v5-c-data-list__item-action:has(> i:empty) {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
  }
  
  /* Texte — titre / description */
  .pf-v5-c-login .select-auth-box-headline,
  .pf-v5-c-login .select-auth-box-desc {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin: 0;
  }
  
  .pf-v5-c-login .select-auth-box-headline {
    line-height: 2;
    font-size: var(--pf-v5-global--FontSize--lg);
  }
  
  .pf-v5-c-login .select-auth-box-desc {
    display: block;
    width: 100%;
    line-height: 1.4;
  }
  
  /* Layout « flat » : cellules en enfant direct de .select-auth-box-parent.
     Ne cible que DOM A et DOM C — en DOM B les cellules sont imbriquées dans
     .pf-v5-c-data-list__item-content et donc non matchées par le combinateur `>`. */
  .pf-v5-c-login .select-auth-box-parent > .pf-v5-c-data-list__cell.pf-m-no-fill {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: var(--pf-v5-global--spacer--xs) !important;
  }
  
  .pf-v5-c-login .select-auth-box-parent > .pf-m-icon {
    align-self: center;
  }
  
  
  /* ===========================================================================
     MFA — Keycloak upstream : select-authenticator.ftl
     ---------------------------------------------------------------------------
     DOM B
     Template : select-authenticator.ftl (thème parent keycloak.v2)
     Contexte : picker natif affiché par Keycloak quand l'utilisateur dispose
                de plusieurs credentials MFA éligibles (TOTP + passkey + email…).
     Structure DOM :
       <ul class="pf-v5-c-data-list select-auth-container">
         <li class="pf-v5-c-data-list__item pf-m-clickable">
           <div class="… select-auth-box-parent">
             <div class="pf-v5-c-data-list__item-content">     ← wrapper spécifique DOM B
               <div class="pf-m-icon"><i class="kcAuthenticatorXxxClass …"></i></div>
               <div class="… select-auth-box-headline"><h2>…</h2></div>
               <div class="… select-auth-box-desc">…</div>
             </div>
             <div class="pf-v5-c-data-list__item-action">…</div>
           </div>
         </li>
       </ul>
     Spécificités CSS :
     1. Le wrapper .pf-v5-c-data-list__item-content impose une grille 2 colonnes.
     2. Icônes : les clés kcAuthenticator*Class ayant été retirées de
        theme.properties, le <i> émis par le template porte la clé brute comme
        classe (ex. "kcAuthenticatorOTPClass") → on hooke dessus via :has()
        pour affecter --orbeet-mfa-icon.
     =========================================================================== */
  
  /* PF ajoute padding asymétrique sur __item-content → désaxe le bloc dans la carte */
  .pf-v5-c-login .select-auth-box-parent > .pf-v5-c-data-list__item-content {
    --pf-v5-c-data-list__item-content--PaddingTop: 0;
    --pf-v5-c-data-list__item-content--PaddingRight: 0;
    --pf-v5-c-data-list__item-content--PaddingBottom: 0;
    --pf-v5-c-data-list__item-content--PaddingLeft: 0;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    /* Ligne 2 absorbe le surplus : scroll sur la description (longues phrases d’enrôlement) */
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--pf-v5-global--spacer--sm);
    /* Écart titre/description (pas de padding vertical : doublon avec le padding carte) */
    row-gap: 0.25rem;
    align-items: stretch;
  }
  
  /* Annule pt-md / pb-md PF sur les cellules */
  .pf-v5-c-login .select-auth-box-parent > .pf-v5-c-data-list__item-content > .pf-v5-c-data-list__cell {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Icône sur toute la hauteur de la grille (centrage vertical réel) */
  .pf-v5-c-login .select-auth-box-parent > .pf-v5-c-data-list__item-content > .pf-m-icon {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    min-height: 0;
  }
  
  /* Titre / description positionnés dans la grille */
  .pf-v5-c-login .select-auth-box-parent > .pf-v5-c-data-list__item-content > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  
  .pf-v5-c-login .select-auth-box-parent > .pf-v5-c-data-list__item-content > :nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  
  /* Mapping icône par type d'authenticator Keycloak (via la classe brute portée par le <i>) */
  .pf-v5-c-login .select-auth-box-parent .pf-m-icon:has(> i.kcAuthenticatorOTPClass) {
    --orbeet-mfa-icon: "\f3cd"; /* fa-mobile-alt */
  }
  
  .pf-v5-c-login .select-auth-box-parent .pf-m-icon:has(> i.kcAuthenticatorEmailClass) {
    --orbeet-mfa-icon: "\f0e0"; /* fa-envelope */
  }
  
  .pf-v5-c-login .select-auth-box-parent .pf-m-icon:has(> i.kcAuthenticatorWebAuthnClass) {
    --orbeet-mfa-icon: "\f084"; /* fa-key */
  }
  
  .pf-v5-c-login .select-auth-box-parent .pf-m-icon:has(> i.kcAuthenticatorPasswordClass) {
    --orbeet-mfa-icon: "\f09c"; /* fa-unlock */
  }

  .pf-v5-c-login .select-auth-box-parent > .pf-v5-c-data-list__item-content > .pf-m-icon:has(> i.kcAuthenticatorDefaultClass) {
    --orbeet-mfa-icon: "\f075"; /* fa-comment */
  }
  
  
  /* ===========================================================================
     MFA — SPI custom enforce-mfa : #kc-select-mfa-form
     ---------------------------------------------------------------------------
     DOM A
     SPI : enforce-mfa (provider custom côté Orus / keycloak-extensions).
     Contexte : flow déclenché quand l'utilisateur entre sur un parcours
                exigeant une MFA mais n'en a encore aucune configurée
                → page d'enrôlement avec les méthodes disponibles.
     Structure DOM :
       <form id="kc-select-mfa-form">
         <div class="pf-v5-c-data-list select-auth-container">
           <div id="mfa-CONFIGURE_TOTP" class="… select-auth-box-parent">
             <div class="pf-m-icon"><i class="fa fa-list sf-hidden"></i></div>  ← icône générique à remplacer
             <div class="… pf-m-no-fill">                                       ← body cell (enfant direct)
               <div class="… select-auth-box-headline">…</div>
               <div class="… select-auth-box-desc">…</div>                      ← desc imbriquée (≠ DOM B)
             </div>
           </div>
           <div id="mfa-email-authenticator-setup" …></div>
           <div id="mfa-mobile_number_config" …></div>   ← providerId netzbegruenung SMS
           <div id="mfa-webauthn-register" …></div>
         </div>
       </form>
     Spécificité CSS : le SPI pose une icône générique `fa fa-list` sur toutes
     les tuiles (masquée par le commons `.pf-m-icon > *`). On affecte ensuite
     --orbeet-mfa-icon selon l'id `#mfa-${providerId}` de chaque carte pour choisir le glyphe.
     =========================================================================== */
  
  .pf-v5-c-login #kc-select-mfa-form {
    width: 100%;
  }
  
  /* DOM A : utilitaires PF pt-md/pb-md sur la body cell — compacter le contenu vs bordure */
  .pf-v5-c-login #kc-select-mfa-form .select-auth-box-parent > .pf-v5-c-data-list__cell.pf-m-no-fill {
    padding-block: var(--pf-v5-global--spacer--xs) !important;
    padding-inline: 0 !important;
  }
  
  /* La desc est imbriquée dans la body cell et porte aussi .pf-v5-c-data-list__cell
     → reset padding/margin PF pour aligner le rythme titre/desc avec DOM B/C */
  .pf-v5-c-login .select-auth-box-desc.pf-v5-c-data-list__cell {
    margin: 0;
    padding: 0;
  }
  
  /* Mapping icône par méthode d'enrôlement (id #mfa-* posé par le SPI) */
  #mfa-CONFIGURE_TOTP.select-auth-box-parent {
    --orbeet-mfa-icon: "\f3cd"; /* fa-mobile-alt */
  }
  
  #mfa-email-authenticator-setup.select-auth-box-parent {
    --orbeet-mfa-icon: "\f0e0"; /* fa-envelope */
  }
  
  /* requiredAction.providerId = mobile_number_config */
  #mfa-mobile_number_config.select-auth-box-parent {
    --orbeet-mfa-icon: "\f075"; /* fa-comment */
  }
  
  #mfa-webauthn-register.select-auth-box-parent,
  #mfa-webauthn-authenticate.select-auth-box-parent {
    --orbeet-mfa-icon: "\f084"; /* fa-key */
  }
  
  
  /* ===========================================================================
     MFA — SPI custom webauthn : #kc-form-webauthn
     ---------------------------------------------------------------------------
     DOM C
     SPI : webauthn custom (exploite le template upstream webauthn-authenticate.ftl).
     Contexte : authentification par passkey / clé FIDO2 — affiche la liste
                des authenticators WebAuthn enregistrés sur le compte.
     Structure DOM :
       <div id="kc-form-webauthn">
         <ul class="pf-v5-c-data-list select-auth-container">
           <li class="pf-v5-c-data-list__item pf-m-clickable">
             <div id="kc-webauthn-authenticator-item-0" class="… select-auth-box-parent">
               <div class="pf-m-icon">
                 <div class="pf-v5-c-icon pf-m-lg">                ← wrapper SVG à remplacer
                   <svg …>…</svg>                                     (empreinte / BLE / NFC / USB selon le transport)
                 </div>
               </div>
               <div class="… pf-m-no-fill">                         ← body cell (enfant direct)
                 <div class="… select-auth-box-headline">label</div>
                 <div id="kc-webauthn-authenticator-transport-0">…</div>
                 <span id="kc-webauthn-authenticator-createdlabel-0">…</span>
                 <span id="kc-webauthn-authenticator-created-0">…</span>
               </div>
               <div class="pf-v5-c-data-list__item-action"></div>
             </div>
           </li>
         </ul>
         <button id="authenticateWebAuthnButton">…</button>
       </div>
     Spécificité CSS : le wrapper SVG natif est masqué par le commons
     `.pf-m-icon > *`. Une seule méthode d'auth possible ici → on fixe
     directement --orbeet-mfa-icon à fa-key sur tout le form.
     =========================================================================== */
  
  .pf-v5-c-login #kc-form-webauthn {
    width: 100%;
  }
  
  /* Toutes les tuiles webauthn utilisent la même icône (clé FIDO2) */
  #kc-form-webauthn .select-auth-box-parent {
    --orbeet-mfa-icon: "\f084"; /* fa-key */
  }