:root {
    --eac-style-link-color: var(--wp--style--color--link, red);
    --eac-style-layout-content-size:
        var(--wp--preset--layout--content-size,
            var(--wp--preset--layout--contentSize,
                var(--wp--style--global--content-size,
                    var(--theme-content-size, 1140px))));
    /* Espacement prédéfini du thème (s'il existe) */
    --eac-style-spacing: var(--wp--preset--spacing--40, 40px);
    /* Fallback avec marge par défaut */
    --eac-style-margin-inline: var(--wp--preset--spacing--40, 40px);
    /**--eac-max-content: calc(var(--eac-style-layout-content-size) - 2 * var(--eac-style-margin-inline));*/
    --eac-max-content: calc(var(--eac-style-layout-content-size) - 2 * 40px);
    --eac-style-line-height: calc(2px + 2ex + 2px);
}

/** Styles pour le frontend */
div.eac-meteo__block-temp a {
    color: var(--eac-style-link-color);
    text-decoration: none;
}

.eac-meteo__block-temp {
    position: relative;
    display: block;
    inline-size: max-content;
    max-inline-size: var(--eac-max-content);
    margin-inline: auto;
    color: #3A3a3a;
    background-color: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

div.is-layout-flex>div.eac-meteo__block-temp {
    margin-inline: 0 !important;
}

.eac-meteo__temp-badge {
    inline-size: auto;
    min-inline-size: 250px;
    max-inline-size: 300px;
    padding: 10px;
    line-height: var(--eac-style-line-height);
}

.eac-meteo__temp-badge>div {
    text-align: center;
}

/** Badge affichage en ligne */
.eac-meteo__block-temp.badge-inline .eac-meteo__temp-badge {
    display: grid;
}

.eac-meteo__block-temp.badge-inline .eac-meteo__temp-badge>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* Alignements spécifiques */
.eac-meteo__block-temp.badge-inline .eac-meteo__temp-badge .eac-meteo__badge-icon {
    justify-content: center;
}

.eac-meteo__block-temp.badge-inline .eac-meteo__temp-badge .eac-meteo__badge-icon img {
    margin-block-end: 0;
}

.eac-meteo__temp-badge>div,
.eac-meteo__badge-icon img {
    margin-block-end: 10px;
    margin-inline: auto;
}

.eac-meteo__block-temp .eac-icon-svg svg {
    position: relative;
    display: inline-block;
    block-size: 1em;
    inline-size: 1em;
    fill: currentColor;
    stroke: currentColor;
    inset-block-start: .1em;
}

.eac-meteo__temp-badge span {
    position: relative;
    display: inline-block
}

.eac-meteo__date-date {
    white-space: nowrap;
}

.eac-meteo__temp-badge img {
    display: block;
    margin-inline: auto;
}

.eac-meteo__city-city,
.eac-meteo__city-temp {
    font-weight: 600;
    line-height: var(--eac-style-line-height);
}

.eac-meteo__temp-title {
    margin-block-end: 1em;
    font-size: clamp(0.8rem, 0.6909rem + 0.5455vw, 1.1rem);
    font-weight: 600;
    color: #333;
    text-align: center;
}

/** Graphique */
.eac-meteo__block-temp.single,
.eac-meteo__block-temp.multiple {
    inline-size: 100%;
}

.eac-meteo__temp-chart {
    position: relative;
    block-size: fit-content;
    inline-size: auto;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.3s ease;
}

.eac-meteo__temp-chart:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.eac-meteo__temp-chart canvas {
    display: block;
    filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.08));
    transition: filter 0.3s ease;
}

.eac-meteo__temp-chart:hover canvas {
    filter: drop-shadow(4px 4px 12px rgba(75, 192, 192, 0.2));
}

.chartjs-size-monitor {
    inline-size: fit-content;
}

/** Card */
.eac-meteo__block-temp.badge-card .eac-meteo__badge-content {
    position: relative;
    max-inline-size: fit-content;
    text-align: start;
    white-space: nowrap;
}

.eac-meteo__block-temp.badge-card .eac-meteo__badge-content>div {
    margin-block-end: 5px;
}

.eac-meteo__block-temp.badge-card .eac-meteo__badge-content .eac-meteo__uv-index {
    /**color: white;*/
    padding-inline: 5px;
}

/* Empty / error messages */
.eac-meteo-empty {
    margin-block: 20px;
    padding: 12px;
    color: #666;
    background: aliceblue;
    border-radius: 4px;
}