/* Fixes pour les sliders et graphiques mobiles */

/* Uniformisation de la largeur des graphiques sur mobile */
.slider-card .impact-chart-container {
    width: 280px !important; /* Largeur fixe basée sur les graphiques CPA */
    margin: 0 auto;
    box-sizing: border-box;
    overflow: visible;
    padding: 10px 0 !important;
}

/* Réduction de la taille des typographies */
.slider-card .chart-title {
    font-size: 16px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

.slider-card .legend-item span,
.slider-card .stacked-legend-item span,
.slider-card .area-legend-item span {
    font-size: 11px !important;
    color: #000 !important; /* Assurer que le texte est visible */
}

.slider-card .y-axis span,
.slider-card .y-axis-left span,
.slider-card .y-axis-right span,
.slider-card .y-axis-stacked span,
.slider-card .area-y-axis span,
.slider-card .x-axis span,
.slider-card .area-x-axis span {
    font-size: 10px !important;
    color: #000 !important; /* Assurer que le texte est visible */
}

.slider-card .stacked-bar-label,
.slider-card .x-axis-label {
    font-size: 10px !important;
    margin-top: 4px !important;
}

/* Styles spécifiques pour les graphiques à barres (CPA impact positif/négatif) */
.slider-card .chart-container {
    width: 280px !important;
    margin: 0 auto;
}

.slider-card .bars-container {
    width: calc(280px - 20px) !important; /* Réduction de l'espace pour l'axe Y */
    margin-left: 20px !important;
}

/* Réduire l'espace occupé par l'axe Y pour les graphiques à barres */
.slider-card .y-axis {
    width: 20px !important;
    margin-right: 0 !important;
}

/* Centrage des barres avec espacement égal et décalage */
.slider-card .bars-container {
    width: calc(280px - 20px) !important; /* Réduction de l'espace pour l'axe Y */
    margin-left: 20px !important;
    display: flex;
    justify-content: center !important;
    align-items: flex-end !important;
    transform: translateX(-12px) !important; /* Décalage de 12px vers la gauche */
}

.slider-card .bar-wrapper {
    flex: 0 0 35% !important; /* Largeur fixe pour chaque barre */
    margin: 0 10px !important; /* Espacement égal entre les barres */
}

/* Réduction de la taille de typographie des labels H-48 et H+48 */
.slider-card .bar span {
    font-size: 9px !important;
    font-weight: 500 !important;
}

/* Styles pour l'histogramme empilé */
.slider-card .stacked-chart-area {
    width: 280px !important;
    height: 220px !important;
    overflow: visible;
    box-sizing: border-box;
}

.slider-card .stacked-bars-container {
    width: calc(280px - 20px) !important; /* Réduction de l'espace pour l'axe Y */
}

.slider-card .y-axis-stacked {
    width: 20px !important;
    margin-right: 0 !important;
}

/* Styles pour le graphique en donut */
.slider-card .donut-chart-container {
    width: 280px !important;
    margin: 0 auto;
}

.slider-card .donut-chart {
    width: 130px !important;
    height: 130px !important;
    margin: 0 auto 5px !important;
}

/* Styles pour le graphique en lignes */
.slider-card .line-chart-area {
    width: 280px !important;
    box-sizing: border-box;
    padding-left: 0 !important;
}

.slider-card .line-chart-plot {
    width: calc(280px - 60px) !important; /* Ajustement pour l'axe Y gauche plus large */
    margin-left: 35px !important; /* Aligner avec l'axe Y gauche */
}

.slider-card .y-axis-left {
    width: 35px !important;
    margin: 0 !important;
    padding-left: 10px !important;
    box-sizing: border-box;
}

.slider-card .y-axis-right {
    width: 25px !important;
    margin: 0 !important;
}

/* Ajouter une marge gauche aux légendes de l'axe Y gauche */
.slider-card .y-axis-left span {
    padding-left: 0 !important;
    text-align: left !important;
    position: relative;
    left: 0 !important;
    display: block;
    margin-left: 2px !important;
}

/* Styles pour le graphique en aires */
.slider-card .area-chart-content {
    width: 280px !important;
    box-sizing: border-box;
}

.slider-card .area-chart-plot {
    width: calc(280px - 20px) !important; /* Réduction de l'axe Y */
}

.slider-card .area-y-axis {
    width: 20px !important;
    margin-right: 0 !important;
}

.slider-card .area-chart-svg,
.slider-card .chart-svg {
    width: 100% !important;
    max-width: 100% !important;
}

/* Centrage des graphiques dans les cartes */
.slider-card.impact-photo-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 5px !important;
    box-sizing: border-box;
}

/* Assurer que les titres et légendes restent dans la largeur */
.slider-card .chart-title,
.slider-card .stacked-chart-legend,
.slider-card .line-chart-legend,
.slider-card .donut-legend,
.slider-card .area-chart-legend {
    width: 280px !important;
    max-width: 280px !important;
    box-sizing: border-box;
    margin: 0 auto 6px !important;
}

/* Réduction des marges et espacements */
.slider-card .stacked-chart-legend,
.slider-card .line-chart-legend,
.slider-card .area-chart-legend {
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.slider-card .legend-item,
.slider-card .stacked-legend-item,
.slider-card .area-legend-item {
    margin-right: 6px !important;
    margin-bottom: 4px !important;
}

.slider-card .legend-color,
.slider-card .stacked-legend-color,
.slider-card .area-legend-color {
    width: 8px !important;
    height: 8px !important;
    margin-right: 3px !important;
}

/* Ajustement des marges pour les légendes */
.slider-card .donut-legend {
    margin-top: 8px !important;
}