:root {
  /* Variables de couleur Lidix */
  --lidix-1: rgb(109, 38, 70);
  --lidix-2: rgb(33, 90, 93);
  --lidix-3: rgb(190, 225, 224);
  --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: var(--primary-white, white);
  --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-sys-corner-full: 9999px;
  --ben-sys-corner-medium: 12px;

  /* ============================================ */
  /* 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: #f2f4f7;
  --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 */
  --mdc-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) */
  --mdc-filled-button-container-shape: var(--ben-sys-corner-full, 9999px);
  --mdc-outlined-button-container-shape: var(--ben-sys-corner-full, 9999px);
  --mdc-text-button-container-shape: var(--ben-sys-corner-full, 9999px);
  --mdc-protected-button-container-shape: var(--ben-sys-corner-full, 9999px);
  /* Cards - bordures arrondies */
  --mdc-elevated-card-container-shape: var(--ben-sys-corner-medium, 12px);
  --mdc-filled-card-container-shape: var(--ben-sys-corner-medium, 12px);
  --mdc-outlined-card-container-shape: var(--ben-sys-corner-medium, 12px);
  /* Chips */
  --mdc-chip-container-shape: var(--ben-sys-corner-full, 9999px);
  /* Text fields */
  --mdc-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);
  --mdc-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(--mdc-elevated-card-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(--mdc-elevated-card-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(--mdc-elevated-card-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(--mdc-elevated-card-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(--mdc-elevated-card-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;
}