:root {
  /* Palette de base Suravenir (issue de la charte) */
  --primary-black: #191919;
  --primary-white: #ffffff;
  --primary-grey: #767676;
  --primary-grey-light: #e0e0e0;
  --primary-bg: #f8f9fa;

  /* Couleurs de marque Suravenir */
  --primary-red: #e81b23;
  /* couleur principale */
  --secondary-blue: #0366ac;

  /* Quelques secondaires dérivées (si besoin pour chips / tags) */
  --secondary-accent-1: #f07300;
  --secondary-accent-2: #90c4ec;

  /* Familles de police (alignées sur le mode sombre : Nunito partout) */
  --ben-sys-font-family: "Nunito", system-ui, sans-serif;
  --ben-sys-font-family-title: "Nunito", system-ui, sans-serif;
  --ben-sys-font-family-action: "Nunito", system-ui, sans-serif;

  --ges-sys-font-family: "Nunito", system-ui, sans-serif;
  --ges-sys-font-family-action: "Nunito", system-ui, sans-serif;
  --ges-sys-font-family-title: "Nunito", system-ui, sans-serif;

  /* Couleurs système bénéficiaire */
  --ben-sys-primary: var(--primary-red);
  --ges-sys-primary: var(--primary-red);
  --ben-sys-on-primary: #ffffff;
  --ben-sys-primary-container: var(--primary-red);
  --ben-sys-on-primary-container: var(--primary-white);
  --ben-sys-on-tertiary: var(--primary-red);

  --ben-sys-title-large-size: 40px;
  --ben-sys-title-large-line-height: 36px;
  --ben-sys-title-large-weight: 500;

  --ben-sys-background: var(--primary-bg);
  --ges-sys-background: var(--procuro-orange-very-light, #fff4f1);

  --ben-sys-surface-container-low: var(--primary-white);
  --ben-sys-secondary-container: var(--primary-grey-light);

  --ben-sys-on-background: #1a1b1f;
  --ben-sys-surface: var(--primary-white);
  --ben-sys-on-surface: #353535;
  --ben-sys-on-surface-variant: var(--primary-grey);
  --ben-info-banner-accent: #83cec5;

  /* Mode sombre bénéficiaire (minimal) */
  --ben-dark-sys-primary: #e81b23;
  --ben-dark-sys-background: #18171d;

  /* Rayons de bordure (mêmes principes que le thème bénéficiaire principal) */
  --ges-sys-corner-full: 9999px;
  --ben-sys-corner-full: 9999px;
  --ben-sys-corner-medium: 12px;
  --ben-paged-document-popup-radius: var(--ben-sys-corner-medium, 12px);

  /* Variables pour les pop-ups spécifiquement */
  --ben-sys-dialog-border-radius: 0px;
  --ges-sys-dialog-border-radius: 0px;
}

/* 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 - 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);
}

/* Style de fond pour les pages de login Suravenir bénéficiaire
   On réutilise la même classe HTML que SwissLife pour que l'écran
   de connexion soit identique, seule l'image de fond change. */
.fullscreen-background {
  position: relative;
}

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

/* ============================================
   MENU DE PROFIL - DROPDOWN PERSONNALISÉ
   Variables CSS pour personnaliser le dropdown pour le skin suravenir/beneficiary
   Utilise les classes du documentElement (html.suravenir.ben) pour être
   accessible depuis le dropdown en position:fixed.
   ============================================ */
html.suravenir.ben {
  /* Personnalisation des couleurs du dropdown pour utiliser les couleurs du skin */
  --profile-dropdown-primary-color: var(--ben-sys-primary);
  --profile-dropdown-on-primary-color: var(--ben-sys-on-primary);
  --profile-dropdown-on-surface-color: var(--ben-sys-on-surface);
  --profile-dropdown-on-background-color: var(--ben-sys-on-background);
  --profile-dropdown-border-top: 2px solid var(--ben-sys-primary);
  --profile-dropdown-divider-color: color-mix(in srgb, var(--ben-sys-primary) 10%, transparent);
  --profile-dropdown-action-hover-bg: color-mix(in srgb, var(--ben-sys-primary) 8%, transparent);
  --profile-button-border: 1px solid var(--ben-sys-primary);
}

html.suravenir.ben body {
  /* Répète les variables sur body pour garantir l'héritage pour les éléments en position:fixed */
  --profile-dropdown-primary-color: var(--ben-sys-primary);
  --profile-dropdown-on-primary-color: var(--ben-sys-on-primary);
  --profile-dropdown-on-surface-color: var(--ben-sys-on-surface);
  --profile-dropdown-on-background-color: var(--ben-sys-on-background);
  --profile-dropdown-border-top: 2px solid var(--ben-sys-primary);
  --profile-dropdown-divider-color: color-mix(in srgb, var(--ben-sys-primary) 10%, transparent);
  --profile-dropdown-action-hover-bg: color-mix(in srgb, var(--ben-sys-primary) 8%, transparent);
  --profile-button-border: 1px solid var(--ben-sys-primary);
}

:root {
  --ben-sys-primary: #e81b23;
  --ben-sys-on-primary: #fff;
  --ben-sys-on-tertiary: #009261;
  --ben-sys-background: #f4f4f4;

  --ben-dark-sys-primary: #e81b22;
  --ben-dark-sys-background: rgb(14, 20, 21);
}

/* Couleurs lignes formulaire contrat — palette Suravenir (bénéficiaire uniquement) */
.ben {
  --ldx-contract-row-exemption-bg: color-mix(in srgb, var(--primary-grey-light) 40%, white);
  --ldx-contract-row-before70-bg: color-mix(in srgb, var(--primary-red) 8%, white);
  --ldx-contract-row-after70-bg: color-mix(in srgb, var(--secondary-blue) 10%, white);
  --ldx-contract-row-valuation-bg: color-mix(in srgb, var(--primary-red) 10%, white);
}