/**
 * Météo Centre - Frontend Responsive CSS
 * @version 4.0.0 - Refactor avec unités fluides et cards unifiées
 *
 * Contenu : Media queries uniquement
 * Chargé : TOUJOURS (requis par tous les blocks)
 *
 * CHANGEMENTS v4.0:
 * ✅ Simplification drastique des breakpoints
 * ✅ Cards fluides sans override de taille
 * ✅ Ajustement proportionnel avec em/%
 */

/* ========================================================================
 * TABLETTE (max-width: 1024px)
 * ======================================================================== */

@media (max-width: 1024px) {
    /* Réduire légèrement la base de taille */
    .mcpg-ville-wrapper,
    .mcpg-carte-wrapper,
    .mcpg-modal {
        font-size: 15px; /* 16px → 15px = réduction proportionnelle */
    }
}

/* ========================================================================
 * MOBILE (max-width: 768px)
 * ======================================================================== */

@media (max-width: 768px) {
    /* === BASE === */
    .mcpg-ville-wrapper,
    .mcpg-carte-wrapper,
    .mcpg-modal {
        font-size: 14px; /* Réduction à 14px de base */
    }

    /* === CARTE === */
    .mcpg-floating-controls {
        display: none;
        bottom: 70px !important;
        left: 10px !important;
        right: 10px !important;
        max-width: none;
    }

    .mcpg-floating-controls.is-visible {
        display: block;
    }

    .mcpg-controls-toggle {
        display: flex;
        bottom: 10px !important;
        left: 10px !important;
    }

    .mcpg-map-container {
        padding-bottom: 0;
    }

    /* === HEADER VILLE === */
    .mcpg-ville-header,
    .mcpg-header {
        padding: 1.25em 1em; /* 1.875em 1.25em → 1.25em 1em */
    }

    .mcpg-header-top {
        flex-direction: column;
        gap: 1em; /* 1.25em → 1em */
        margin-bottom: 1em; /* Réduire marge bottom */
    }

    /* ✅ CRITIQUE: Layout 100% en mobile */
    .mcpg-ville-info {
        text-align: center;
        width: 100%;
        max-width: none !important;
    }

    .mcpg-ville-info h1 {
        font-size: clamp(1.75em, 8vw, 2.25em);
    }

    /* ✅ CRITIQUE: Météo actuelle 100% en mobile */
    .mcpg-current-weather-main {
        width: 100%;
        max-width: none !important;
        padding: 0.75em 1em; /* 0.9375em 1.25em → 0.75em 1em */
        flex-direction: row;
        gap: 1em; /* 1.25em → 1em */
        justify-content: center;
    }

    .mcpg-weather-picto-group {
        flex-shrink: 0;
    }

    /* Picto météo : 4.5em = 63px à 14px de base */
    .mcpg-weather-main-picto {
        width: 4.5em;
        height: 4.5em;
    }

    .mcpg-weather-desc-main {
        font-size: 1em;
    }

    .mcpg-temp-group {
        flex-shrink: 0;
    }

    /* Badge température : 4.5em = 63px */
    .mcpg-temp-main-badge svg {
        width: 4.5em !important;
        max-width: 4.5em !important;
        height: auto !important;
    }

    .mcpg-temp-feels-text {
        font-size: 0.9286em; /* ~13px */
    }

    /* === TABS === */
    .mcpg-forecast-tabs {
        overflow-x: auto;
        gap: 0.625em;
    }

    .mcpg-tab-btn {
        padding: 0.625em 1em;
        flex-shrink: 0;
        font-size: 0.9286em;
    }

    /* === CARDS === */
    /* Cards plus petites en mobile */
    .mcpg-hour-card {
        min-width: 11em; /* 154px à 14px */
        padding: 0.75em 0.5em; /* 0.875em 0.625em → 0.75em 0.5em */
    }

    /* Weather cards header : plus compactes */
    .mcpg-weather-card {
        padding: 0.75em; /* 1em → 0.75em */
        min-height: 6em; /* 7em → 6em */
    }

    .mcpg-current-weather-cards {
        gap: 0.75em; /* 1em → 0.75em */
    }

    .mcpg-feels-like-card {
        padding: 0.75em; /* 1em → 0.75em */
        min-height: 7em; /* 8em → 7em */
    }

    /* Détails : 1 colonne en mobile */
    .mcpg-hour-details {
        grid-template-columns: 1fr;
    }

    /* Le bloc ressenti reste full-width */
    .mcpg-detail-feels-block {
        grid-column: 1;
    }

    .mcpg-detail-item {
        font-size: 0.7857em; /* ~11px */
        padding: 0.3125em 0.375em;
    }

    /* === GRAPHIQUE === */
    .mcpg-chart-container {
        height: 18.75em; /* 300px relatif */
    }

    .mcpg-chart-metrics {
        gap: 0.5em;
    }

    .mcpg-metric-checkbox {
        padding: 0.375em 0.625em;
        font-size: 0.8571em;
    }

    /* === TABLEAU === */
    .mcpg-forecast-table {
        font-size: 0.8571em; /* 12px */
    }

    .mcpg-forecast-table thead th,
    .mcpg-forecast-table tbody td {
        padding: 0.5em 0.25em;
    }

    /* === MODALE === */
    .mcpg-modal {
        max-height: 90vh;
        max-width: 95%;
    }

    .mcpg-modal-header {
        padding: 0.9375em 1.25em;
    }

    .mcpg-modal-header h2 {
        font-size: 1.2857em; /* 18px */
    }

    .mcpg-modal-body {
        padding: 1.25em 0.9375em;
    }

    /* === LÉGENDE === */
    .mcpg-legend-credits {
        flex-direction: column;
        gap: 0.25em;
        font-size: 0.9286em;
    }

    .mcpg-legend-separator {
        display: none;
    }
}

/* ========================================================================
 * PETIT MOBILE (max-width: 480px)
 * ======================================================================== */

@media (max-width: 480px) {
    /* Réduction supplémentaire de la base */
    .mcpg-ville-wrapper,
    .mcpg-carte-wrapper,
    .mcpg-modal {
        font-size: 13px;
    }

    /* Météo actuelle : encore plus compact */
    .mcpg-current-weather-main {
        padding: 0.625em 0.75em; /* 0.75em 0.9375em → 0.625em 0.75em */
        gap: 0.75em; /* 0.9375em → 0.75em */
    }

    .mcpg-weather-card {
        padding: 0.625em; /* Encore plus compact */
        min-height: 5.5em;
    }

    .mcpg-feels-like-card {
        padding: 0.625em;
        min-height: 6.5em;
    }

    .mcpg-ville-header,
    .mcpg-header {
        padding: 1em 0.75em; /* Réduire padding */
    }

    /* Pictos : 4em = 52px à 13px de base */
    .mcpg-weather-main-picto {
        width: 4em;
        height: 4em;
    }

    .mcpg-temp-main-badge svg {
        width: 4em !important;
        max-width: 4em !important;
    }

    .mcpg-weather-desc-main,
    .mcpg-temp-feels-text {
        font-size: 0.9231em; /* ~12px */
    }

    /* Cards encore plus petites */
    .mcpg-hour-card {
        min-width: 10em; /* 130px à 13px */
    }

    /* Détails : taille réduite */
    .mcpg-detail-item {
        font-size: 0.7692em; /* ~10px */
        padding: 0.25em;
    }

    /* Ressenti : garder lisible */
    .mcpg-detail-feels-value {
        font-size: 0.9231em; /* 12px */
    }
}