:root {
  /* Variables de couleur Lidix */
  /* Ancien --lidix-1 (violet foncé): rgb(109, 38, 70) */
  /* Nouveau --lidix-1: bleu principal pour le skin life (exactement #158bda) */
  --lidix-1: #158bda;
  --lidix-2: rgb(33, 90, 93);
  /* Ancien --lidix-3 (bleu clair): rgb(190, 225, 224) */
  /* Nouveau --lidix-3: vert pomme très pâle utilisé notamment par leadix-card */
  --lidix-3: rgb(250, 255, 245);
  --lidix-4: rgb(254, 208, 96);
  --lidix-5: rgb(239, 123, 117);
  --lidix-6: rgb(248, 188, 164);
  --lidix-text: rgb(82, 82, 82);

  /* ============================================ */
  /* LIGHT MODE - Variables système bénéficiaire */
  /* ============================================ */
  --ben-sys-font-family: "Nunito";
  --ben-sys-font-family-title: "Nunito";
  --ben-sys-font-family-action: "Nunito";
  --ben-sys-primary: var(--lidix-1);
  --ben-sys-on-primary: #fff;
  --ben-sys-primary-container: var(--lidix-1);
  --ben-sys-on-primary-container: #fff;
  --ben-sys-on-tertiary: var(--lidix-2);
  --ben-sys-title-large-size: 40px;
  --ben-sys-title-large-line-height: 36px;
  --ben-sys-title-large-weight: 500;
  --ben-sys-background: #fafafa;
  --ben-sys-surface-container-low: #fff;
  --ben-sys-secondary-container: var(--lidix-3);
  --ben-sys-on-background: #1a1b1f;
  --ben-sys-surface: rgb(255, 255, 255);
  --ben-sys-on-surface: #353535;
  --ben-sys-on-surface-variant: var(--primary-grey);
  --ben-info-banner-accent: #83cec5;
  --ben-sys-corner-full: 9999px;
  --ben-sys-corner-medium: 12px;
  --ben-paged-document-popup-radius: var(--ben-sys-corner-medium, 12px);

  /* Couleurs spécifiques du stepper pour le skin life bénéficiaire */
  /* Étapes "enabled" en orange pour bien signaler qu'elles sont cliquables */
  --color-stepper-enabled: #fb8c00;

  /* ============================================ */
  /* DARK MODE - Variables système bénéficiaire */
  /* ============================================ */
  --ben-dark-sys-primary: #e81b22;
  --ben-dark-sys-background: rgb(14, 20, 21);
  --ben-dark-sys-surface: rgb(22, 29, 29);
  --ben-dark-sys-surface-container-low: #28272d;
  --ben-sys-on-surface-dark: rgb(221, 228, 227);

  /* ============================================ */
  /* Variables pour l'interface gestionnaire */
  /* ============================================ */
  --ges-sys-font-family: "Nunito";
  --ges-sys-font-family-action: "Nunito";
  --ges-sys-font-family-title: "Nunito";
  --ges-sys-primary: var(--lidix-1);
  --ges-sys-background: var(--procuro-orange-very-light, #fff4f1);
  --ges-sys-corner-full: 9999px;
}

/* ============================================ */
/* Variables Material UI pour bordures arrondies */
/* S'appliquent UNIQUEMENT à l'interface bénéficiaire */
/* Scopées dans le contexte bénéficiaire pour ne pas affecter l'interface gestionnaire */
/* ============================================ */
.ben {
  /* Corner system variables - utilise corner-medium pour les cards et containers */
  --mat-sys-corner-extra-large: var(--ben-sys-corner-medium, 12px);
  /* Dialogs */
  --mat-dialog-container-shape: var(--ben-sys-corner-medium, 12px);
  --mat-dialog-container-shape: var(--ben-sys-corner-medium, 12px);
  /* Buttons - garde les bordures arrondies (corner-full) */
  --mat-button-filled-container-shape: var(--ben-sys-corner-full, 9999px);
  --mat-button-outlined-container-shape: var(--ben-sys-corner-full, 9999px);
  --mat-button-text-container-shape: var(--ben-sys-corner-full, 9999px);
  --mat-button-protected-container-shape: var(--ben-sys-corner-full, 9999px);
  /* Cards - bordures arrondies */
  --mat-card-elevated-container-shape: var(--ben-sys-corner-medium, 12px);
  --mat-filled-card-container-shape: var(--ben-sys-corner-medium, 12px);
  --mat-card-outlined-container-shape: var(--ben-sys-corner-medium, 12px);
  /* Chips */
  --mat-chip-container-shape: var(--ben-sys-corner-full, 9999px);
  /* Text fields */
  --mat-text-field-container-shape: var(--ben-sys-corner-medium, 12px);
  /* Menus */
  --mat-menu-container-shape: var(--ben-sys-corner-medium, 12px);
  /* Snackbars */
  --mat-snack-bar-container-shape: var(--ben-sys-corner-medium, 12px);
  /* Tooltips */
  --mat-tooltip-container-shape: var(--ben-sys-corner-medium, 12px);
}

/* ============================================ */
/* Variables redéfinies sur les overlays CDK */
/* Les overlays CDK sont créés dans le body, donc on redéfinit les variables critiques */
/* UNIQUEMENT pour l'interface bénéficiaire (.ben) */
/* ============================================ */
::ng-deep .cdk-overlay-pane.ben {
  --mat-sys-corner-extra-large: var(--ben-sys-corner-medium, 12px);
  --mat-dialog-container-shape: var(--ben-sys-corner-medium, 12px);
  --mat-dialog-container-shape: var(--ben-sys-corner-medium, 12px);
  --ben-sys-dialog-border-radius: var(--ben-sys-corner-medium, 12px);
}

/* ============================================ */
/* Styles spécifiques pour les card headers */
/* Bordures arrondies en haut (supérieur droit et gauche) */
/* UNIQUEMENT pour l'interface bénéficiaire (.ben) */
/* Utilise ::ng-deep avec spécificité élevée pour surcharger les styles des composants */
/* ============================================ */
::ng-deep .ben .mat-mdc-card-header,
::ng-deep .ben mat-card-header {
  --header-border-radius: var(--mat-card-elevated-container-shape, var(--ben-sys-corner-medium, 12px));

  border-radius: 0;
  border-top-left-radius: var(--header-border-radius);
  border-top-right-radius: var(--header-border-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 12px 16px 0 16px;
  margin: 0 0 4px 0;
  overflow: hidden;
}

/* Spécifique pour les flow-ben-card - style identique au style global */
::ng-deep .ben .flow-ben-card .mat-mdc-card-header,
::ng-deep .ben .flow-ben-card mat-card-header {
  --header-border-radius: var(--mat-card-elevated-container-shape, var(--ben-sys-corner-medium, 12px));

  border-radius: 0;
  border-top-left-radius: var(--header-border-radius);
  border-top-right-radius: var(--header-border-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 12px 16px 0 16px;
  margin: 0 0 4px 0;
  overflow: hidden;
}

/* Spécifique pour contract-card avec sélecteur plus spécifique */
::ng-deep .ben mat-card .mat-mdc-card-header,
::ng-deep .ben .mat-mdc-card mat-card-header {
  --header-border-radius: var(--mat-card-elevated-container-shape, var(--ben-sys-corner-medium, 12px));

  border-radius: 0;
  border-top-left-radius: var(--header-border-radius);
  border-top-right-radius: var(--header-border-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
}

/* Spécifique pour la carte contract-card-header - s'assurer que la carte n'a pas de bordures arrondies en bas */
::ng-deep .ben .contract-card-header.mat-mdc-card {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Spécifique pour contract-card-tax-990i et autres variantes de cartes */
::ng-deep .ben .contract-card .mat-mdc-card-header,
::ng-deep .ben .contract-card mat-card-header,
::ng-deep .ben .contract-card-tax-990i .mat-mdc-card-header,
::ng-deep .ben .contract-card-tax-990i mat-card-header {
  --header-border-radius: var(--mat-card-elevated-container-shape, var(--ben-sys-corner-medium, 12px));

  border-radius: 0;
  border-top-left-radius: var(--header-border-radius);
  border-top-right-radius: var(--header-border-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
}

/* Spécifique pour contract-card-header - bordures arrondies en haut uniquement */
::ng-deep .ben .contract-card-header .mat-mdc-card-header,
::ng-deep .ben .contract-card-header mat-card-header {
  --header-border-radius: var(--mat-card-elevated-container-shape, var(--ben-sys-corner-medium, 12px));

  border-radius: 0;
  border-top-left-radius: var(--header-border-radius);
  border-top-right-radius: var(--header-border-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
}

/* ============================================ */
/* Styles pour les paragraphes et spans */
/* Agrandissement léger des <p> et réduction des <span> */
/* pour créer une hiérarchie visuelle */
/* ============================================ */
::ng-deep .ben p {
  font-size: 1.05em;
  line-height: 1.5;
}

::ng-deep .ben p span {
  font-size: 0.92em;
}

/* ============================================ */
/* Titres de sections dans les cards Leadix    */
/* Obligatoirement bien visibles pour l'UX     */
/* ============================================ */
::ng-deep .ben .leadix-card h4 {
  font-weight: 700;
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

::ng-deep .ben .leadix-card p + h4 {
  margin-top: 1rem;
}

::ng-deep .ben .leadix-card ul {
  margin-top: 0.25rem;
}

/* ============================================
   BACKGROUND PLEIN ÉCRAN POUR L'ÉCRAN DE HOME
   Style pour afficher une image en plein écran comme swisslife
   ============================================ */
.fullscreen-background {
  position: relative;
  z-index: 1;
}

/* Overlay noir semi-transparent pour faire ressortir le texte et le container */
.fullscreen-background::before {
  --overlay-opacity: 0.2;
  background: rgba(0, 0, 0, var(--overlay-opacity));
  content: " ";
  height: 100vh;
  min-height: 100%;
  max-height: none;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -0.5;
}

.fullscreen-background::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%),
    url(/assets/skins/life/beneficiary/bg_image.jpg) no-repeat center center / cover;
  content: " ";
  height: 100vh;
  min-height: 100%;
  max-height: none;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

/* ============================================
   TITRE "MON ESPACE BÉNÉFICIAIRE" - AMÉLIORATION DE LA VISIBILITÉ
   Style pour améliorer la visibilité du titre dans la home bénéficiaire life
   ============================================ */
.fullscreen-background .officer-auth-right-swisslife {
  position: relative;
  z-index: 1;
}

.fullscreen-background .officer-auth-right-swisslife .ldx-title-ges {
  --title-text-color: #ffffff;
  --title-font-size: 2.5rem;
  --title-font-weight: 300;
  --title-letter-spacing: 0.02em;

  position: relative;
  z-index: 2;
  color: var(--title-text-color);
  font-size: var(--title-font-size);
  font-weight: var(--title-font-weight);
  letter-spacing: var(--title-letter-spacing);
}

/* Responsive : ajustement pour mobile */
@media (max-width: 768px) {
  .fullscreen-background .officer-auth-right-swisslife .ldx-title-ges {
    --title-font-size: 2rem;
  }
}

/* ============================================
   STEPper bénéficiaire - états cliquables
   Objectif UX : pour une étape suivante activable (enabled/valid),
   l'utilisateur doit voir visuellement qu'il peut cliquer :
   - curseur en pointer
   - léger effet de hover
   - couleur de texte non grisée
   ============================================ */

/* Étapes verticales et horizontales bénéficiaire : base cliquable
   On se base sur l'état métier (icônes enabled/valid/doing),
   pas sur aria-disabled qui reste à true dans certains cas
   même si la navigation est autorisée par la logique métier. */
:root .ben .vertical-step-card .mat-vertical-stepper-header:has(.mat-step-icon-state-enabled),
:root .ben .vertical-step-card .mat-vertical-stepper-header:has(.mat-step-icon-state-valid),
:root .ben .vertical-step-card .mat-vertical-stepper-header:has(.mat-step-icon-state-doing),
:root .ben .horizontal-step-card .mat-horizontal-stepper-header:has(.mat-step-icon-state-enabled),
:root .ben .horizontal-step-card .mat-horizontal-stepper-header:has(.mat-step-icon-state-valid),
:root .ben .horizontal-step-card .mat-horizontal-stepper-header:has(.mat-step-icon-state-doing) {
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

/* Renforcer la lisibilité du libellé pour les étapes activables (enabled/valid) */
:root
  .ben
  .vertical-step-card
  .mat-vertical-stepper-header:has(.mat-step-icon-state-enabled, .mat-step-icon-state-valid, .mat-step-icon-state-doing)
  .mat-step-label,
:root
  .ben
  .horizontal-step-card
  .mat-horizontal-stepper-header:has(
    .mat-step-icon-state-enabled,
    .mat-step-icon-state-valid,
    .mat-step-icon-state-doing
  )
  .mat-step-label {
  color: var(--ben-sys-on-surface, #353535);
}