.ec-chart-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.ec-chart-canvas-holder {
    position: relative;
    width: 100%;
    height: 350px; /* valeur de secours ; écrasée par le réglage "Hauteur" du widget */
}

.ec-chart-wrapper canvas.ec-chart-canvas {
    max-width: 100%;
}

.ec-chart-annotation {
    position: absolute;
    z-index: 2;
    max-width: 260px;
    padding: 12px 16px;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    line-height: 1.4;
    pointer-events: none;
    box-sizing: border-box;
}

.ec-chart-annotation__title {
    font-weight: 700;
    margin-bottom: 6px;
}

.ec-chart-annotation__list {
    margin: 0;
    padding-left: 18px;
}

.ec-chart-annotation__list li {
    margin-bottom: 2px;
}

.ec-chart-annotation--top-left {
    top: 16px;
    left: 16px;
}

.ec-chart-annotation--top-right {
    top: 16px;
    right: 16px;
}

.ec-chart-annotation--bottom-left {
    bottom: 16px;
    left: 16px;
}

.ec-chart-annotation--bottom-right {
    bottom: 16px;
    right: 16px;
}

/*
 * Sur petit écran, le canvas se rétrécit : le titre passe souvent sur plusieurs
 * lignes et la légende prend plus de hauteur relative. Un encadré en position
 * absolue dimensionné pour le desktop finit alors par recouvrir le titre et la
 * légende (texte de Chart.js dessiné DANS le canvas). On désempile donc l'encadré
 * du graphique pour l'afficher en dessous, dans le flux normal, sans chevauchement
 * possible, quelle que soit la hauteur réellement prise par le titre/la légende.
 * Le point de rupture (767px) correspond au breakpoint "Mobile" par défaut
 * d'Elementor ; à ajuster ici si ce breakpoint a été personnalisé dans le thème.
 */
@media (max-width: 767px) {
    .ec-chart-annotation.ec-chart-annotation--stack-mobile {
        position: static;
        display: block;
        width: 100%;
        max-width: none;
        margin-top: 12px;
        pointer-events: auto;
    }
}