.layout-profiling-hiddenside {
    position: relative !important;
    left: 6rem !important;   
    right: 1rem !important;
    width: calc(100vw - 10rem) !important;      /* Fixe la carte à 100px du bord gauche de l'écran */
}

.layout-profiling-openside {
    position: relative !important;
    left: calc(200px + 1rem) !important;   
    right: 1rem !important;
    width: calc(100vw - 200px - 3rem) !important;      /* Fixe la carte à 100px du bord gauche de l'écran */
}

/* Conteneur principal de la carte : disposition en ligne, aligné à gauche */
.card-test-report-profiling {
  display: flex !important;
  flex-direction: row !important;           /* Affichage en ligne : 2 colonnes côte à côte */
  align-items: flex-start;       /* Aligne les items en haut */
  justify-content: flex-start;   /* Aligne les enfants à gauche */
  gap: 20px;
  width: 100%;                   /* Utilise toute la largeur disponible */
  padding: 1rem 0.5rem;
}

/* Section gauche : limitée à 250px maximum et largeur auto */
.athlete-info-section-test-report-profiling {
  flex: 0 0 auto;                /* Ne s'étend pas */
  max-width: 250px;              /* Limite la largeur à 250px */
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Section droite : occupe le reste de l'espace, centré verticalement et aligné à droite */
.test-info-section-test-report-profiling {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* Tout le contenu aligné à droite */
  justify-content: center; /* Centrage vertical */
  width: 100%;
  margin: 1rem 0.5rem 0rem 0rem;
}

/* Première ligne : la date du test, sur toute la largeur pour justifier à droite */
.date-test-report-profiling {
  width: 100%;
  text-align: right;
  font-weight: bold;
  font-size: 18px;
  padding-bottom: 1rem;
  color: var(--ffbad-blue, #101F69);
}

/* Deuxième ligne : données anthro, alignées à droite avec un gap de 10px */
.anthro-test-report-profiling {
  display: flex;
  justify-content: flex-end; /* Aligner les items à droite */
  align-items: center;       /* Centrer verticalement les items */
  gap: 15px;                 /* Espace de 10px entre chaque élément */
  width: 100%;
  font-size: 16px;
  color: var(--ffbad-blue, #101F69);
}

.filter-radio {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.35rem 0.75rem !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: bold !important;
    color: var(--ffbad-blue, #101F69) !important;
    text-align: left !important;
    margin-bottom: 0 !important;
}

/* Important : Dash met display:inline-block en style inline,
   donc il faut forcer avec !important */
.filter-radio label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;

    color: var(--ffbad-blue, #101F69) !important;
    background: transparent !important;
    cursor: pointer !important;
    font-weight: bold !important;
    margin-right: 0 !important;
    line-height: 1 !important;
}

/* Base radio icon styling */
.filter-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;

    border: 1px solid var(--ffbad-red, #D52B1E) !important;
    border-radius: 50% !important;

    background: transparent !important;
    position: relative !important;
    cursor: pointer !important;

    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

/* Inner red dot */
.filter-radio input[type="radio"]::after {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    background-color: transparent;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.filter-radio input[type="radio"]:checked::after {
    background-color: var(--ffbad-red, #D52B1E);
}

.filter-radio input[type="radio"]:hover {
    box-shadow: 0 0 0 3px rgba(213, 43, 30, 0.2);
}

.data-card-profiling {
    width: 150px;
    height: 150px;
    border: 1px solid var(--ffbad-blue, #101F69); /* Exemple de bordure turquoise */
    display: flex;
    flex-direction: column;
}

.header-data-card-profiling {
    background-color: var(--ffbad-blue, #101F69); /* Bleu foncé */
    color: white;
    flex: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
}

.value-data-card-profiling {
    color: var(--ffbad-blue, #101F69);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.custom-tooltip-indicators-profiling {
    max-width:400px !important;
    background-color: var(--ffbad-blue, #101F69) !important; /* Fond */
    color: white !important; /* Couleur du texte */
    border-radius: 8px !important; /* Bord arrondi */
    padding: 4px !important; /* Espacement intérieur */
    font-size: 13px !important; /* Taille du texte */
}

.custom-tooltip-indicators-profiling .tooltip.show {
    opacity : 1 !important;
}

.custom-tooltip-indicators-profiling .tooltip-inner {
    max-width: 300px !important;
}

.custom-tooltip-indicators-profiling .tooltip.tooltip .tooltip-inner {
    color : var(--ffbad-blue, #101F69) !important;
    background-color : #F9F9F9 !important;
    border: none !important;
}

.indicator-item-profiling {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    color: var(--ffbad-blue, #101F69) !important; /* Couleur du séparateur */
    font-size: 14px !important;
    font-weight: bold !important;
}

.indicator-item-profiling:not(:last-child)::after {
    content: " | " !important;
    margin-left: 10px !important;
}