/* ===== Gouttières responsives ===== */
:root {
    --page-gutter: clamp(12px, 4vw, 24px);
}

/* ===== Wrapper carte claire ===== */
.p24-table-wrapper {
    width: min(680px, calc(100% - 2 * var(--page-gutter)));
    margin: 0.75rem auto 1rem;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(23, 50, 77, 0.12);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(16, 40, 64, 0.08);
}

/* ===== Table ===== */
.p24-table {
    width: 100%;
    border-collapse: collapse; /* pas d’espaces fantômes */
    table-layout: fixed; /* colonnes stables */
}

/* ===== Entête unique ===== */
.p24-table thead th {
    text-align: center;
    font-weight: 700;
    padding: 0.55rem 0.75rem;
    color: #17324d;
    background: #f1f6fe;
    border-bottom: 1px solid #e1eaf7;
}
.p24-table thead th .unit {
    font-size: 0.78em;
    opacity: 0.65;
    display: block;
    line-height: 1.1;
    text-align: center;
}

/* Alignements par colonne (entête + lignes) */

.p24-table thead th:nth-child(4),
.p24-row td:nth-child(4) {
    padding-left: 0.65rem;
}

/* Centrage de la colonne Pression */
.p24-table thead th:nth-child(4),
.p24-row td:nth-child(4) {
    text-align: center;
}

/* Couleur douce pour la colonne Pression */
.p24-row td:nth-child(4) {
    color: #24425c;
    font-weight: 500;
}

.p24-row td:nth-child(4) {
    color: #1c3550;
    font-weight: 500;
}
.p24-table thead th:nth-child(1),
.p24-row td:nth-child(1) {
    text-align: left;
}

.p24-table thead th:nth-child(2),
.p24-row td:nth-child(2),
.p24-table thead th:nth-child(3),
.p24-row td:nth-child(3) {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ===== Ligne de DATE ===== */
.p24-date-row td {
    padding: 0.55rem 0.75rem;
    font-weight: 700;
    color: #17324d;
    background: #eaf2ff;
    border-top: 1px solid #dbe7fb;
}

/* ===== Lignes de données ===== */
.p24-row td {
    padding: 0.5rem 0.75rem;
    color: #17324d;
    background: #fff;
    border-bottom: 1px solid #e9eef7;
    line-height: 1.35;
    vertical-align: middle;
}
/* Colonne Vent sur 2 lignes, droite et compacte */
td.vent {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

td.vent .vent-l1 {
    display: block;
    line-height: 1.05;
    font-weight: 600; /* met en valeur direction+vitesse */
    white-space: nowrap; /* évite la césure entre SO et 14 */
}

td.vent .vent-l2 {
    display: block;
    line-height: 1.05;
    font-size: 0.92em;
    opacity: 0.75; /* ton atténué */
}

/* Zébrage très léger (lisibilité) */
.p24-row:nth-child(odd) td {
    background: #fbfdff;
}

/* ===== Utilitaires ===== */
.ta-left {
    text-align: left;
}
.ta-right {
    text-align: right;
}

/* Empêche le retour à la ligne pour la colonne Temp. */
.p24-row td:nth-child(2) {
    white-space: nowrap;
}

/* ===== Surlignage Max / Min ===== */

/* Max : rouge chaud très pâle + flèche ▲ noire */
.p24-row td.is-max {
    position: relative;
    background: #ffe5e5;
    outline: 1px solid #ff8a8a;
    outline-offset: -1px;
    color: #111;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.p24-row td.is-max::after {
    content: ' \25B2'; /* ▲ */
    margin-left: 0.35rem;
    font-size: 0.85em;
    color: #000;
}

/* Min : bleu froid très pâle + flèche ↓ noire */
/* Min : bleu très doux + flèche ↓ noire */
.p24-row td.is-min {
    position: relative;
    background: #f5f9ff; /* plus clair que #edf4ff */
    outline: 1px solid #a6c8ff; /* bord plus doux que #7bbaff */
    outline-offset: -1px;
    color: #111;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.p24-row td.is-min::after {
    content: ' \25BC'; /* ↓ */
    font-weight: 800;
    margin-left: 0.35rem;
    font-size: 0.95em;
    color: #000;
    opacity: 0.9;
}

/* Les badges max/min : coins un peu plus doux */
.p24-row td.is-max,
.p24-row td.is-min {
    border-radius: 6px;
}

/* Un peu d’air dans la cellule mise en avant */
.p24-row td.is-max,
.p24-row td.is-min {
    padding: 0.45rem 0.6rem;
}
.source-reference {
    font-size: 0.95em;
    color: #e8f1ff;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    text-align: center;
}

/* Couleurs dédiées aux icônes max/min dans la référence */
.source-reference .sr-line1 .sr-icon-max {
    color: #c84343; /* rouge chaud */
    font-weight: 700;
}

.source-reference .sr-line1 .sr-icon-min {
    color: #3a6ec9; /* bleu froid */
    font-weight: 700;
}

/* ===== Responsive ===== */
@media (max-width: 480px) {
    .p24-table thead th {
        padding: 0.45rem 0.6rem;
        font-size: 0.95rem;
    }
    .p24-date-row td,
    .p24-row td {
        padding: 0.45rem 0.6rem;
        font-size: 0.98rem;
    }
}