/* ==========================================
   MeteoLausanne - Statistiques
   Style principal
   ========================================== */

:root {
    --primary: #005b96;
    --primary-light: #eaf4fb;
    --secondary: #3c4858;
    --background: #f5f7fa;
    --card-bg: #ffffff;
    --border: #dce3ea;
    --text: #2d3748;
    --success: #2e7d32;
    --warning: #ef6c00;
    --danger: #c62828;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--background);
    color: var(--text);
    line-height: 1.6;
}

/* ==========================================
   Structure générale
   ========================================== */

.container {
    max-width: 1400px;
    margin: auto;
    padding: 20px;
}

.page-title {
    text-align: center;
    color: var(--primary);
    margin-bottom: 20px;
    font-size: 2rem;
}

.subtitle {
    text-align: center;
    color: var(--secondary);
    margin-bottom: 30px;
}

/* ==========================================
   Menu principal
   ========================================== */

.main-menu {
    background: var(--primary);
    border-radius: 8px;
    margin-bottom: 25px;
}

.main-menu ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.main-menu li {
    margin: 0;
}

.main-menu a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 14px 22px;
    font-weight: 600;
    transition: 0.3s;
}

.main-menu a:hover {
    background: rgba(255,255,255,0.15);
}

/* ==========================================
   Cartes
   ========================================== */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.card {
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.card h2 {
    color: var(--primary);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.card p {
    color: var(--secondary);
}

/* ==========================================
   Tableau
   ========================================== */

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    margin-top: 15px;
}

th {
    background: var(--primary);
    color: white;
    padding: 10px;
}

td {
    padding: 8px;
    border-bottom: 1px solid var(--border);
}

tr:nth-child(even) {
    background: #f9fbfd;
}

tr:hover {
    background: #eef6fc;
}

.text-center {
    text-align: center;
}

/* ==========================================
   Notice des données
   ========================================== */

.data-notice {
    background: var(--primary-light);
    border-left: 5px solid var(--primary);
    padding: 15px;
    margin-top: 30px;
    border-radius: 6px;
}

.data-notice h3 {
    margin-bottom: 10px;
    color: var(--primary);
}

/* ==========================================
   Footer
   ========================================== */

.footer {
    margin-top: 40px;
    padding: 20px;
    text-align: center;
    color: #666;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 768px) {

    .main-menu ul {
        flex-direction: column;
    }

    .main-menu a {
        text-align: center;
    }

    .page-title {
        font-size: 1.6rem;
    }
}

/* ==========================================
   Formulaires
   ========================================== */

.form-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.form-inline label {
    font-weight: 600;
}

.form-inline input[type="number"] {
    width: 90px;
    padding: 8px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    font-size: 14px;
}

.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 9px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-block;
}

.btn-primary:hover {
    opacity: 0.9;
    text-decoration: none !important;
}

/* ==========================================
   Badges d'état
   ========================================== */

.badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.badge-success {
    background: #e6f4ea;
    color: #1b7f3a;
}

.badge-warning {
    background: #fff4e5;
    color: #b26a00;
}

.badge-danger {
    background: #fdecea;
    color: #b3261e;
}

.two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .two-columns {
        grid-template-columns: 1fr;
    }
}

.main-menu a.active {
    background: #2ba3b2;
    border-radius: 6px;
    font-weight: 700;
}

.cards .card {
    display: flex;
    flex-direction: column;
}

.cards .card .btn-primary {
    margin-top: auto;
    align-self: flex-start;
}

/* ==========================================
   Tableaux climatologiques colorés
   ========================================== */

.climate-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.climate-table-wrap table {
    min-width: 1100px;
    border-collapse: collapse;
    margin-bottom: 26px;
}

.climate-table-wrap th {
    background: #00757f;
    color: white;
    border: 1px solid #222;
    padding: 9px;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
}

.climate-table-wrap td {
    border: 1px solid #d0d7de;
    text-align: center;
    padding: 8px;
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}

.climate-table-wrap .title {
    background: #003b5c;
    color: white;
    font-size: 18px;
    text-align: right;
    padding-right: 25px;
}

.climate-table-wrap .label,
.climate-table-wrap .footer-label {
    background: #0097a7;
    color: white;
    width: 55px;
}

.form-inline select {
    min-width: 170px;
    padding: 8px 10px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    font-size: 14px;
}

/* Amélioration lisibilité */

.climate-table-wrap td {
    height: 38px;
    text-align: center !important;
    vertical-align: middle !important;

    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 38px;
}

.climate-table-wrap th {
    text-align: center !important;
    vertical-align: middle !important;

    font-size: 17px !important;
    font-weight: 800 !important;
}

.climate-table-wrap .label,
.climate-table-wrap .footer-label {
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: 800 !important;
}

.climate-table td {
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

.climate-table .label,
.climate-table .footer-label {
    color: #ffffff !important;
    text-shadow: none;
}

/* Colonne Année / Jour */

.climate-table td:first-child {
    color: #111827 !important;
    background: #f3f4f6;
    text-shadow: none !important;
    font-weight: 800 !important;
}

.climate-table th {
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.tabs a {
    display: inline-block;
    padding: 9px 16px;
    background: var(--primary);
    color: white;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
}

.tabs a.active {
    background: #2ba3b2;
}

.climate-table .spacer-row td {
    height: 12px !important;
    background: transparent !important;
    border: none !important;
    line-height: 12px !important;
    padding: 0 !important;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.cards .card {
    flex: 1 1 350px;
    display: flex;
    flex-direction: column;
}

.cards .card table {
    height: 100%;
}

/* ==========================================
   Bandeau synthèse rapport annuel
   ========================================== */

.summary-banner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.summary-item {
    background: white;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);

    display: flex;
    align-items: center;
    gap: 12px;
}

.summary-icon {
    font-size: 28px;
}

.summary-item strong {
    font-size: 22px;
    color: #005b96;
}

.summary-item div {
    line-height: 1.3;
}

.report-toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
}

td.anomaly-positive,
.text-center.anomaly-positive {
    color: #c0392b !important;
    font-weight: 700 !important;
}

td.anomaly-negative,
.text-center.anomaly-negative {
    color: #1f5fbf !important;
    font-weight: 700 !important;
}

#loadingOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-box {
    background: white;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    font-size: 18px;
    font-weight: 600;
    color: #005b96;
}

/* ==========================================
   Records - nouvelle page
   À ajouter à la fin de assets/css/style.css
   ========================================== */

.section-title {
    color: var(--primary);
    font-size: 2rem;
    margin: 10px 0 22px;
    text-align: left;
}

.records-section-heading {
    color: var(--primary);
    font-size: 1.35rem;
    margin: 28px 0 14px;
}

.records-grid {
    display: grid;
    gap: 18px;
    margin-bottom: 24px;
}

.records-grid-1 { grid-template-columns: 1fr; }
.records-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.records-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.records-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.records-card {
    margin: 0;
    padding: 18px;
}

.records-card h2 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin-bottom: 12px;
}

.ranking-card table {
    margin-top: 6px;
}

.compact-table th,
.compact-table td {
    padding: 8px 7px;
}

.records-table-wrap {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 1200px) {
    .records-grid-4,
    .records-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .records-grid-4,
    .records-grid-3,
    .records-grid-2 {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 1.6rem;
        text-align: center;
    }
}

.records-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
    gap:20px;
}

.records-grid .card{
    height:auto;
}

.records-intro {
    margin-bottom: 22px;
    color: var(--secondary);
}

.records-runtime {
    margin-top: 22px;
    color: #667085;
    font-size: 0.9rem;
    text-align: right;
}

.records-card-wide {
    grid-column: span 2;
}

@media (max-width: 1200px) {
    .records-card-wide {
        grid-column: span 1;
    }
}

html {
    scroll-behavior: smooth;
}

.records-nav-card {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #eef3f7;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 22px;
}

.records-section-heading {
    scroll-margin-top: 145px;
}


/* ==========================================
   Records - navigation interne sticky
   ========================================== */

html {
    scroll-behavior: smooth;
}

.records-nav-card {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #eef3f7;
    padding: 12px 14px;
    border-radius: 8px;
    margin: 0 0 24px;
}

.records-nav-card h2 {
    margin-bottom: 10px;
}

.section-nav,
.records-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.section-nav a,
.records-section-nav a {
    display: inline-block;
    padding: 7px 12px;
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
}

.section-nav a:hover,
.records-section-nav a:hover {
    background: var(--primary);
    color: #fff;
}

.records-section {
    scroll-margin-top: 130px;
}

.records-section-heading {
    scroll-margin-top: 130px;
}

.records-card-wide {
    grid-column: 1 / -1;
}

@media (max-width: 1200px) {
    .records-card-wide {
        grid-column: span 1;
    }
}

@media (max-width: 800px) {
    .records-nav-card {
        position: static;
    }
}

.site-header {
    text-align: center;
    margin-bottom: 20px;
}

.site-logo {
    max-height: 100px;
    width: auto;
    margin-bottom: 12px;
    transition: transform 0.2s ease;
}

.site-logo:hover {
    transform: scale(1.05);
}

.site-logo-link {
    display: inline-block;
}
/* ==========================================
   Accueil Statistiques - synthèse et état
   ========================================== */

.home-intro {
    text-align: center;
    color: var(--secondary);
    margin: -12px 0 20px;
    font-size: 1.05rem;
}

.home-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 22px;
}

.home-kpi-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.home-kpi-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.home-kpi-card strong {
    display: block;
    color: var(--primary);
    font-size: 1.35rem;
    line-height: 1.2;
}

.home-kpi-card span:last-child {
    display: block;
    color: var(--secondary);
    font-size: 0.92rem;
}

.home-status-panel {
    background: linear-gradient(135deg, #eaf4fb 0%, #ffffff 100%);
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 24px;
}

.home-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.home-status-header h2 {
    color: var(--primary);
    font-size: 1.15rem;
    margin: 0;
}

.home-status-header a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.home-status-header a:hover {
    text-decoration: underline;
}

.home-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.home-status-item {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(220,227,234,0.9);
    border-radius: 9px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.home-status-item strong {
    display: block;
    color: var(--primary);
    line-height: 1.25;
}

.home-status-item span:last-child {
    color: var(--secondary);
    font-size: 0.92rem;
}

.status-dot {
    width: 12px;
    height: 12px;
    margin-top: 5px;
    border-radius: 999px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.04);
}

.status-success { background: var(--success); }
.status-warning { background: var(--warning); }
.status-danger  { background: var(--danger); }

.home-cards .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.home-cards .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border-color: rgba(0,91,150,0.28);
}

.home-card-featured {
    border-top: 4px solid var(--primary);
}

@media (max-width: 950px) {
    .home-kpi-grid,
    .home-status-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .home-intro {
        margin-top: 0;
        font-size: 0.98rem;
    }

    .home-status-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Lisibilité de la dernière mesure météo sur l'accueil */
.home-kpi-last-measure .home-kpi-time {
    font-size: 1.55rem;
    line-height: 1.05;
}

.home-kpi-last-measure .home-kpi-date {
    display: block;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.98rem;
    margin: 2px 0 4px;
}

/* ==========================================
   Etat des données - qualité, volumétrie et disponibilité
   ========================================== */

.data-health-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 12px 0 18px;
}

.data-health-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.data-health-card strong {
    display: block;
    color: var(--primary);
    font-size: 1.55rem;
    line-height: 1.2;
    margin: 3px 0;
}

.data-health-label {
    display: block;
    color: var(--secondary);
    font-weight: 700;
    font-size: 0.92rem;
}

.data-health-card small {
    display: block;
    color: #667085;
    line-height: 1.35;
}

.data-health-success { border-left-color: var(--success); }
.data-health-warning { border-left-color: var(--warning); }
.data-health-danger  { border-left-color: var(--danger); }

.availability-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--primary-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 4px 0 14px;
}

.availability-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--secondary);
    font-size: 0.9rem;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.legend-success { background: var(--success); }
.legend-warning { background: var(--warning); }
.legend-danger  { background: var(--danger); }

.availability-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    min-height: 110px;
    padding: 10px 8px 6px;
    margin: 0 0 16px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}

.availability-day {
    min-width: 30px;
    height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.availability-day span {
    display: block;
    width: 100%;
    border-radius: 5px 5px 2px 2px;
    min-height: 8px;
}

.availability-day small {
    font-size: 0.72rem;
    color: #667085;
    white-space: nowrap;
}

.availability-success span { background: var(--success); }
.availability-warning span { background: var(--warning); }
.availability-danger span  { background: var(--danger); }

@media (max-width: 950px) {
    .data-health-grid {
        grid-template-columns: 1fr;
    }

    .availability-summary {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================
   Records - raffinements finaux podium / synthèse
   ========================================== */

.records-takeaway-featured {
    border: 1px solid rgba(0, 91, 150, 0.22);
    border-left: 6px solid var(--primary);
    background: linear-gradient(135deg, #eaf4fb 0%, #ffffff 52%, #f8fbfd 100%);
    margin-bottom: 18px;
    padding: 18px 20px;
}

.records-takeaway-featured h2 {
    font-size: 1.35rem;
    margin-bottom: 4px;
}

.records-takeaway-lead {
    color: var(--secondary);
    margin: 0 0 14px;
    font-size: 0.95rem;
}

.records-takeaway-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.records-takeaway-grid > div {
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(220,227,234,0.95);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.records-takeaway-grid span {
    display: block;
    color: var(--secondary);
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 3px;
}

.records-takeaway-grid strong {
    display: block;
    color: var(--primary);
    font-size: 1.08rem;
    line-height: 1.25;
}

.records-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

.records-kpi-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.045);
}

.records-kpi-card > span {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.records-kpi-card strong {
    display: block;
    color: var(--primary);
    font-size: 1.18rem;
    line-height: 1.15;
}

.records-kpi-card small {
    display: block;
    color: var(--secondary);
    font-size: 0.86rem;
    line-height: 1.25;
}

.records-podium-card h2 {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.records-card-icon {
    flex: 0 0 auto;
}

.records-ranking-table .records-rank-col {
    width: 68px;
}

.records-rank-cell {
    width: 68px;
}

.records-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    font-weight: 800;
    color: var(--primary);
    background: #f1f7fc;
}

.records-medal-1,
.records-medal-2,
.records-medal-3 {
    font-size: 1.18rem;
    box-shadow: 0 2px 7px rgba(0,0,0,0.08);
}

.records-medal-1 { background: #fff3bf; }
.records-medal-2 { background: #eef2f7; }
.records-medal-3 { background: #ffe2c2; }
.records-medal-other { font-size: 0.92rem; }

.records-main-value {
    font-weight: 800 !important;
    border-radius: 6px;
}

/* Coloration volontairement limitée au podium: le reste du tableau reste neutre. */
.records-ranking-table tr.records-rank-other .records-main-value {
    background: transparent !important;
    color: var(--primary) !important;
}

.records-ranking-table tr.records-rank-1 .records-main-value { box-shadow: inset 4px 0 0 rgba(0,0,0,0.08); }
.records-ranking-table tr.records-rank-2 .records-main-value { box-shadow: inset 3px 0 0 rgba(0,0,0,0.06); }
.records-ranking-table tr.records-rank-3 .records-main-value { box-shadow: inset 2px 0 0 rgba(0,0,0,0.045); }

.records-rank-1 .records-value-hot { background: #ffe1de; color: #9d1c13 !important; }
.records-rank-2 .records-value-hot { background: #fff0ee; color: #b23428 !important; }
.records-rank-3 .records-value-hot { background: #fff7f6; color: #c14a3e !important; }

.records-rank-1 .records-value-cold { background: #dcecff; color: #064b9b !important; }
.records-rank-2 .records-value-cold { background: #eaf4ff; color: #1760b0 !important; }
.records-rank-3 .records-value-cold { background: #f4f9ff; color: #2a73bd !important; }

.records-rank-1 .records-value-rain { background: #dff2ff; color: #005b96 !important; }
.records-rank-2 .records-value-rain { background: #edf8ff; color: #126da7 !important; }
.records-rank-3 .records-value-rain { background: #f6fbff; color: #257bae !important; }

.records-rank-1 .records-value-dry { background: #fff0cf; color: #935f00 !important; }
.records-rank-2 .records-value-dry { background: #fff6df; color: #a56f08 !important; }
.records-rank-3 .records-value-dry { background: #fffbef; color: #b47e18 !important; }

.records-rank-1 .records-value-wind { background: #ffe5d1; color: #a64200 !important; }
.records-rank-2 .records-value-wind { background: #fff0e6; color: #ba5a13 !important; }
.records-rank-3 .records-value-wind { background: #fff8f2; color: #c66a25 !important; }

.records-rank-1 .records-value-air { background: #efe1ff; color: #6e25a8 !important; }
.records-rank-2 .records-value-air { background: #f6edff; color: #7f38b6 !important; }
.records-rank-3 .records-value-air { background: #fbf6ff; color: #8d4ac0 !important; }

.records-rank-1 .records-value-solar { background: #fff2b8; color: #8a6400 !important; }
.records-rank-2 .records-value-solar { background: #fff8d8; color: #9a7300 !important; }
.records-rank-3 .records-value-solar { background: #fffce9; color: #aa8208 !important; }

.records-rank-1 .records-value-pressure { background: #e6f4ea; color: #1d6f35 !important; }
.records-rank-2 .records-value-pressure { background: #f0faf3; color: #2b7d42 !important; }
.records-rank-3 .records-value-pressure { background: #f8fcf9; color: #3a8b50 !important; }

.records-rank-1 .records-value-et { background: #dff5df; color: #1f7a30 !important; }
.records-rank-2 .records-value-et { background: #eef9ee; color: #2f8a3f !important; }
.records-rank-3 .records-value-et { background: #f7fcf7; color: #3f9a4f !important; }

.records-rank-1 .records-value-default { background: #eaf4fb; color: var(--primary) !important; }
.records-rank-2 .records-value-default { background: #f3f8fc; color: var(--primary) !important; }
.records-rank-3 .records-value-default { background: #fafcff; color: var(--primary) !important; }

@media (max-width: 950px) {
    .records-takeaway-grid,
    .records-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .records-takeaway-grid,
    .records-kpi-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================
   Records - correctif final v4
   Bandeau À retenir + podium uniquement coloré
   ========================================== */

.records-takeaway-band {
    margin: 0 0 20px !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(0, 91, 150, 0.22) !important;
    border-left: 6px solid var(--primary) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #eaf4fb 0%, #ffffff 58%, #f8fbfd 100%) !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06) !important;
}

.records-takeaway-header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
}

.records-takeaway-header h2 {
    color: var(--primary) !important;
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.records-takeaway-header p {
    color: var(--secondary) !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    text-align: right !important;
}

.records-takeaway-band .records-takeaway-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.records-takeaway-band .records-takeaway-grid > div {
    min-height: 86px !important;
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(220,227,234,0.95) !important;
    border-radius: 10px !important;
    padding: 11px 12px !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.045) !important;
}

.records-takeaway-band .records-takeaway-grid span {
    display: block !important;
    color: var(--secondary) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
}

.records-takeaway-band .records-takeaway-grid strong {
    display: block !important;
    color: var(--primary) !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

/* Neutralisation complète des anciennes colorations de toutes les lignes. */
.records-ranking-table tr.records-rank-other td.records-main-value,
.records-ranking-table tr.records-rank-other td.records-value-hot,
.records-ranking-table tr.records-rank-other td.records-value-cold,
.records-ranking-table tr.records-rank-other td.records-value-rain,
.records-ranking-table tr.records-rank-other td.records-value-dry,
.records-ranking-table tr.records-rank-other td.records-value-wind,
.records-ranking-table tr.records-rank-other td.records-value-air,
.records-ranking-table tr.records-rank-other td.records-value-solar,
.records-ranking-table tr.records-rank-other td.records-value-pressure,
.records-ranking-table tr.records-rank-other td.records-value-et,
.records-ranking-table tr.records-rank-other td.records-value-default {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--primary) !important;
}

.records-ranking-table tr.records-rank-1 td.records-main-value,
.records-ranking-table tr.records-rank-2 td.records-main-value,
.records-ranking-table tr.records-rank-3 td.records-main-value {
    font-weight: 900 !important;
    border-radius: 7px !important;
}

.records-ranking-table tr.records-rank-1 td.records-main-value { box-shadow: inset 5px 0 0 rgba(0,0,0,0.08) !important; }
.records-ranking-table tr.records-rank-2 td.records-main-value { box-shadow: inset 4px 0 0 rgba(0,0,0,0.055) !important; }
.records-ranking-table tr.records-rank-3 td.records-main-value { box-shadow: inset 3px 0 0 rgba(0,0,0,0.04) !important; }

.records-ranking-table tr.records-rank-1 td.records-value-hot { background: #ffe7e4 !important; color: #9d1c13 !important; }
.records-ranking-table tr.records-rank-2 td.records-value-hot { background: #fff2f0 !important; color: #b23428 !important; }
.records-ranking-table tr.records-rank-3 td.records-value-hot { background: #fff9f8 !important; color: #c14a3e !important; }

.records-ranking-table tr.records-rank-1 td.records-value-cold { background: #e2f0ff !important; color: #064b9b !important; }
.records-ranking-table tr.records-rank-2 td.records-value-cold { background: #eef7ff !important; color: #1760b0 !important; }
.records-ranking-table tr.records-rank-3 td.records-value-cold { background: #f8fbff !important; color: #2a73bd !important; }

.records-ranking-table tr.records-rank-1 td.records-value-rain { background: #e5f5ff !important; color: #005b96 !important; }
.records-ranking-table tr.records-rank-2 td.records-value-rain { background: #f0f9ff !important; color: #126da7 !important; }
.records-ranking-table tr.records-rank-3 td.records-value-rain { background: #f8fcff !important; color: #257bae !important; }

.records-ranking-table tr.records-rank-1 td.records-value-dry { background: #fff4d8 !important; color: #935f00 !important; }
.records-ranking-table tr.records-rank-2 td.records-value-dry { background: #fff8e8 !important; color: #a56f08 !important; }
.records-ranking-table tr.records-rank-3 td.records-value-dry { background: #fffdf5 !important; color: #b47e18 !important; }

.records-ranking-table tr.records-rank-1 td.records-value-wind { background: #ffeadb !important; color: #a64200 !important; }
.records-ranking-table tr.records-rank-2 td.records-value-wind { background: #fff3ec !important; color: #ba5a13 !important; }
.records-ranking-table tr.records-rank-3 td.records-value-wind { background: #fffbf8 !important; color: #c66a25 !important; }

.records-ranking-table tr.records-rank-1 td.records-value-air { background: #f2e8ff !important; color: #6e25a8 !important; }
.records-ranking-table tr.records-rank-2 td.records-value-air { background: #f8f1ff !important; color: #7f38b6 !important; }
.records-ranking-table tr.records-rank-3 td.records-value-air { background: #fcf9ff !important; color: #8d4ac0 !important; }

.records-ranking-table tr.records-rank-1 td.records-value-solar { background: #fff5c9 !important; color: #8a6400 !important; }
.records-ranking-table tr.records-rank-2 td.records-value-solar { background: #fff9df !important; color: #9a7300 !important; }
.records-ranking-table tr.records-rank-3 td.records-value-solar { background: #fffdf1 !important; color: #aa8208 !important; }

.records-ranking-table tr.records-rank-1 td.records-value-pressure { background: #e9f7ed !important; color: #1d6f35 !important; }
.records-ranking-table tr.records-rank-2 td.records-value-pressure { background: #f3fbf5 !important; color: #2b7d42 !important; }
.records-ranking-table tr.records-rank-3 td.records-value-pressure { background: #fafdfb !important; color: #3a8b50 !important; }

.records-ranking-table tr.records-rank-1 td.records-value-et { background: #e4f8e4 !important; color: #1f7a30 !important; }
.records-ranking-table tr.records-rank-2 td.records-value-et { background: #f0faf0 !important; color: #2f8a3f !important; }
.records-ranking-table tr.records-rank-3 td.records-value-et { background: #f9fdf9 !important; color: #3f9a4f !important; }

.records-ranking-table tr.records-rank-1 td.records-value-default { background: #eaf4fb !important; color: var(--primary) !important; }
.records-ranking-table tr.records-rank-2 td.records-value-default { background: #f3f8fc !important; color: var(--primary) !important; }
.records-ranking-table tr.records-rank-3 td.records-value-default { background: #fafcff !important; color: var(--primary) !important; }

.records-medal-1,
.records-medal-2,
.records-medal-3 {
    min-width: 38px !important;
    height: 38px !important;
    font-size: 1.28rem !important;
}

@media (max-width: 1200px) {
    .records-takeaway-band .records-takeaway-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .records-takeaway-header {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
    .records-takeaway-header p {
        text-align: left !important;
    }
    .records-takeaway-band .records-takeaway-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================
   Climatologie - statistiques rapides et carte mise en avant
   ========================================== */

.climate-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 22px;
}

.climate-kpi-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.climate-kpi-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.climate-kpi-card strong {
    display: block;
    color: var(--primary);
    font-size: 1.35rem;
    line-height: 1.2;
}

.climate-kpi-card span:last-child {
    display: block;
    color: var(--secondary);
    font-size: 0.92rem;
}

.climate-card-featured {
    border-top: 4px solid #2ba3b2;
    box-shadow: 0 4px 14px rgba(0,91,150,0.10);
}

.climate-card-featured h2 {
    color: #00757f;
}

@media (max-width: 950px) {
    .climate-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   Climatologie synthèse - résumé et onglets dynamiques
   ========================================== */

.climate-tabs {
    gap: 10px;
    margin-bottom: 16px;
}

.climate-tabs a {
    opacity: 0.82;
    border: 2px solid transparent;
    box-shadow: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, border-color 0.18s ease;
}

.climate-tabs a:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.climate-tabs a.active {
    opacity: 1;
    border-color: rgba(255,255,255,0.95);
    box-shadow: 0 5px 12px rgba(0,0,0,0.22);
    transform: translateY(-3px);
    position: relative;
}

.climate-tabs a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid currentColor;
    opacity: 0.95;
}

.climate-tabs a.active-avg {
    background: #2ba3b2 !important;
    color: #ffffff !important;
}

.climate-tabs a.active-min {
    background: #1565c0 !important;
    color: #ffffff !important;
}

.climate-tabs a.active-max {
    background: #ef6c00 !important;
    color: #ffffff !important;
}

.climate-summary-card {
    margin: 0 0 22px;
    padding: 15px 18px;
    border: 1px solid rgba(0,91,150,0.18);
    border-left: 5px solid var(--primary);
    border-radius: 10px;
    background: linear-gradient(135deg, #eaf4fb 0%, #ffffff 72%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.045);
}

.climate-summary-card strong {
    display: block;
    color: var(--primary);
    font-size: 1.05rem;
    margin-bottom: 5px;
}

.climate-summary-card p {
    margin: 0;
    color: var(--secondary);
    line-height: 1.45;
}

.climate-summary-avg { border-left-color: #2ba3b2; }
.climate-summary-min { border-left-color: #1565c0; }
.climate-summary-max { border-left-color: #ef6c00; }

.climate-table .footer-label {
    min-width: 145px;
    padding-left: 8px !important;
    padding-right: 8px !important;
    line-height: 1.15 !important;
    white-space: normal;
}

.climate-table tr:last-child td {
    border-top: 3px solid #ffffff !important;
}


.climate-unavailable-card {
    margin: 0 0 24px;
    padding: 18px 20px;
    border: 1px solid #ffd6d6;
    border-left: 5px solid #ff6b6b;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff3f3 0%, #ffffff 72%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.045);
}

.climate-unavailable-card strong {
    display: block;
    color: #c62828;
    font-size: 1.08rem;
    margin-bottom: 6px;
}

.climate-unavailable-card p {
    margin: 0;
    color: var(--secondary);
    line-height: 1.5;
}


/* ==========================================
   Analyse climatologique - conteneur rapports
   Rapport annuel / mensuel / comparaison
   ========================================== */

.climatologie-view-card,
.climate-analysis-card {
    margin-bottom: 22px;
}

.climate-analysis-card h2 {
    margin-bottom: 8px;
    color: var(--primary);
}

.climate-analysis-card .muted-note {
    color: var(--secondary);
    margin-bottom: 14px;
}

.climatologie-view-tabs,
.climate-analysis-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin: 16px 0 18px;
}

.climatologie-view-tabs a,
.climate-analysis-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 22px;
    border: 0;
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.climatologie-view-tabs a:hover,
.climate-analysis-tabs a:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.16);
}

.climatologie-view-tabs a.active,
.climate-analysis-tabs a.active {
    background: #2ba3b2;
    color: #fff;
}

.climatologie-view-tabs a.active::after,
.climate-analysis-tabs a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 9px solid #ffffff;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.08));
}

.climatologie-view-current,
.climate-analysis-current {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: baseline;
    padding: 13px 16px;
    border-radius: 8px;
    background: #f4f9fd;
    border: 1px solid var(--border);
    border-left: 5px solid #2ba3b2;
}

.climatologie-view-current strong,
.climate-analysis-current strong {
    color: var(--primary);
    font-size: 1.02rem;
}

.climatologie-view-current span,
.climate-analysis-current span {
    color: var(--secondary);
}

@media (max-width: 700px) {
    .climatologie-view-tabs,
    .climate-analysis-tabs {
        gap: 10px;
    }

    .climatologie-view-tabs a,
    .climate-analysis-tabs a {
        flex: 1 1 100%;
    }
}
/* ==========================================
   Analyse climatologique - page conteneur
   À ajouter à la FIN du style.css existant
   Ne remplace pas le fichier style.css complet.
   ========================================== */

.climatologie-view-card,
.climate-analysis-card {
    margin-bottom: 22px;
}

.climate-analysis-card h2 {
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 1.45rem;
}

.climate-analysis-card .muted-note {
    color: var(--secondary);
    margin-bottom: 16px;
    line-height: 1.45;
}

/* Onglets identiques dans l'esprit à climatologie-synthese.php */
.climate-analysis-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 18px;
}

.climate-analysis-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 24px;
    border-radius: 6px;
    background: var(--primary);
    color: #ffffff !important;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.14);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.climate-analysis-tabs a:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.16);
}

.climate-analysis-tabs a.active,
.climate-analysis-tabs a.active-avg {
    background: #2ba3b2 !important;
    color: #ffffff !important;
}

.climate-analysis-tabs a.active::after,
.climate-analysis-tabs a.active-avg::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #ffffff;
}

.climate-analysis-current {
    margin-bottom: 0;
    padding: 15px 18px;
    border: 1px solid rgba(0, 91, 150, 0.18);
    border-left: 5px solid #2ba3b2;
    border-radius: 10px;
    background: linear-gradient(135deg, #eaf4fb 0%, #ffffff 72%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.045);
}

.climate-analysis-current strong {
    display: block;
    color: var(--primary);
    font-size: 1.08rem;
    margin-bottom: 5px;
}

.climate-analysis-current p {
    margin: 0;
    color: var(--secondary);
    font-size: 0.98rem;
    line-height: 1.45;
}

@media (max-width: 700px) {
    .climate-analysis-tabs a {
        flex: 1 1 100%;
    }
}

/* ==========================================
   Etat des données - chaîne technique et architecture
   ========================================== */

.data-health-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.data-architecture-card p {
    color: var(--secondary);
    margin-bottom: 14px;
}

.data-architecture-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.data-architecture-flow {
    background: linear-gradient(135deg, #eaf4fb 0%, #ffffff 72%);
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}

.data-architecture-flow strong {
    display: block;
    color: var(--primary);
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.data-architecture-flow span {
    display: inline-block;
    min-width: 150px;
    padding: 8px 12px;
    margin: 4px 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--primary);
    font-weight: 800;
}

.data-architecture-flow em {
    display: block;
    color: var(--primary);
    font-style: normal;
    font-weight: 900;
    line-height: 1.15;
}

.data-architecture-flow small {
    display: block;
    margin-top: 9px;
    color: var(--secondary);
    line-height: 1.35;
}

.card td small {
    display: block;
    color: #667085;
    line-height: 1.25;
    margin-top: 2px;
}

@media (max-width: 1100px) {
    .data-health-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 950px) {
    .data-architecture-grid,
    .data-health-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   Responsive mobile global - MeteoLausanne Statistiques
   Ajout final non destructif
   ========================================== */

@media (max-width: 900px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding: 12px;
    }

    .site-header {
        margin-bottom: 14px;
    }

    .site-logo {
    display: block;
    margin: 0 auto 12px;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 60px;
	}

    .page-title,
    .section-title {
        font-size: 1.45rem;
        text-align: center;
        margin-bottom: 14px;
    }

    .subtitle,
    .home-intro,
    .records-intro {
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .card {
        padding: 14px;
        border-radius: 9px;
    }

    .card h2,
    .records-section-heading {
        font-size: 1.12rem;
        line-height: 1.3;
    }

    .main-menu {
        border-radius: 8px;
        overflow: hidden;
    }

    .main-menu ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .main-menu a {
        padding: 11px 8px;
        text-align: center;
        font-size: 0.9rem;
        line-height: 1.2;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main-menu a.active {
        border-radius: 0;
    }

    .cards,
    .home-cards,
    .records-grid,
    .records-grid-global,
    .records-grid-wind,
    .records-grid-progression {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .cards .card,
    .home-cards .card {
        flex: none;
        width: 100%;
    }

    .home-kpi-grid,
    .home-status-grid,
    .climate-kpi-grid,
    .data-health-grid,
    .data-health-grid-4,
    .records-kpi-grid,
    .records-takeaway-grid,
    .records-takeaway-band .records-takeaway-grid,
    .summary-banner,
    .data-architecture-grid {
        grid-template-columns: 1fr !important;
    }

    .home-status-header,
    .records-takeaway-header,
    .availability-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .records-takeaway-header p {
        text-align: left !important;
    }

    .form-inline,
    .daily-cycle-form,
    .graph-controls,
    .question-form,
    .assistant-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .form-inline label {
        margin-bottom: -4px;
    }

    .form-inline input,
    .form-inline select,
    .form-inline button,
    .form-inline .btn-primary,
    .btn-primary,
    input[type="text"],
    input[type="date"],
    input[type="time"],
    input[type="number"],
    select,
    button {
        max-width: 100%;
    }

    .form-inline input[type="number"],
    .form-inline select,
    .form-inline input[type="date"],
    .form-inline input[type="time"] {
        width: 100%;
    }

    .btn-primary {
        text-align: center;
        justify-content: center;
    }

    table {
        font-size: 0.9rem;
    }

    th,
    td {
        padding: 8px 6px;
    }

    .records-table-wrap,
    .climate-table-wrap,
    .table-wrap,
    .data-table-wrap {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Les tableaux simples placés directement dans les cartes
       doivent rester fluides sur mobile. */
    .card > table {
        width: 100%;
        min-width: 0 !important;
        table-layout: auto;
    }

    .card > table th,
    .card > table td {
        white-space: normal;
        word-break: normal;
    }

    .records-ranking-table,
    .compact-table {
        min-width: 520px;
    }

    .climate-table-wrap table {
        min-width: 980px;
    }

    .records-nav-card {
        position: static !important;
        padding: 10px;
    }

    .section-nav,
    .records-section-nav,
    .tabs,
    .climate-tabs,
    .climate-analysis-tabs,
    .climatologie-view-tabs {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .section-nav a,
    .records-section-nav a,
    .tabs a,
    .climate-tabs a,
    .climate-analysis-tabs a,
    .climatologie-view-tabs a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .daily-cycle-card canvas,
    .chart-card canvas,
    canvas {
        max-width: 100% !important;
    }

    .footer {
        margin-top: 24px;
        padding: 14px 8px;
        font-size: 0.82rem;
    }
}

@media (max-width: 520px) {
    body {
        font-size: 15px;
    }

    .container {
        padding: 8px;
    }

    .site-logo {
        max-height: 62px;
    }

    .main-menu ul {
        grid-template-columns: 1fr;
    }

    .main-menu a {
        min-height: 40px;
        padding: 10px 8px;
        font-size: 0.88rem;
    }

    .card {
        padding: 12px;
    }

    .home-kpi-card,
    .records-kpi-card,
    .climate-kpi-card,
    .home-status-item {
        padding: 12px;
        gap: 10px;
    }

    .home-kpi-icon,
    .records-kpi-card > span,
    .climate-kpi-icon {
        width: 34px;
        height: 34px;
        font-size: 1.1rem;
    }

    .home-kpi-card strong,
    .climate-kpi-card strong,
    .data-health-card strong {
        font-size: 1.18rem;
    }

    .records-takeaway-band {
        padding: 14px !important;
    }

    .records-medal {
        min-width: 30px !important;
        height: 30px !important;
    }

    th,
    td {
        font-size: 0.86rem;
        padding: 7px 5px;
    }

    .availability-chart {
        gap: 4px;
        padding: 8px 6px 5px;
    }

    .availability-day {
        min-width: 24px;
    }
}

/* ==========================================
   Mobile - compactage des tableaux
   ========================================== */

@media (max-width: 768px) {

    table th,
    table td {
        padding: 5px 6px;
        font-size: 12px;
    }

    table th {
        line-height: 1.2;
    }

    table td {
        line-height: 1.25;
    }

    table td small,
    .card td small {
        font-size: 11px;
        line-height: 1.2;
    }

}

/* ==========================================
   Correctif mobile - tableaux simples dans les cartes
   ========================================== */

@media (max-width: 768px) {
    .card > table {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: visible !important;
    }

    .card > table th,
    .card > table td {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere;
        padding: 5px 5px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }
}

/* ==========================================
   Records - correctif cadres mobile réel
   ========================================== */

@media (max-width: 768px) {

    .records-grid,
    .records-grid-global,
    .records-grid-wind,
    .records-grid-progression {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .records-grid > *,
    .records-card,
    .records-grid .card,
    .records-podium-card,
    .ranking-card {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .records-card h2,
    .records-grid .card h2 {
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .records-ranking-table,
    .records-card table,
    .records-grid .card table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto;
    }

    .records-ranking-table th,
    .records-ranking-table td,
    .records-card th,
    .records-card td {
        white-space: normal !important;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .records-rank-col,
    .records-rank-cell {
        width: 42px !important;
        min-width: 42px !important;
    }
}

@media (max-width: 768px) {
    .records-nav-card,
    .report-toolbar,
    .climate-mini-nav,
    .environment-mini-nav,
    .sticky-nav,
    .sticky-tabs {
        position: static !important;
        top: auto !important;
    }
}