*, *:before, *:after { box-sizing: border-box; }
body { background: #0b0e14; color: #eee; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin:0; -webkit-font-smoothing: antialiased; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 15px; padding-bottom: 40px; }
.header-container { display: flex; align-items: center; margin-bottom: 25px; border-bottom: 2px solid #333; padding-bottom: 15px; }
.App-logo { width: 50px; height: 50px; margin-right: 15px; border-radius: 12px; }
.page-title { color: #1AEBFF; font-size: 22px; text-transform: uppercase; letter-spacing: 1px; margin: 0; }
.section-title { color: #fff; margin-top: 40px; margin-bottom: 15px; font-size: 19px; border-left: 5px solid #1AEBFF; padding-left: 12px; text-transform: uppercase; font-weight: bold; }

.table-wrapper { width: 100%; overflow-x: auto; margin-bottom: 30px; background: #151c27; border-radius: 8px; border: 1px solid #333; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
table { width: 100%; border-collapse: collapse; }
th { background: #1f293a; color: #8899a6; padding: 15px; text-align: left; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; border-bottom: 1px solid #333; }
td { padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); color: #eee; vertical-align: middle; font-size: 15px; }
tr:last-child td { border-bottom: none; }
tr:hover { background: rgba(255,255,255,0.02); }

.station-nom, .station-nom a { font-weight: bold; color: #1AEBFF !important; text-decoration: none !important; display: block; font-size: 1.05em; }

/* Nouvelle classe pour les apports (Paris etc.) */
.paris-apport { display: block; font-size: 15px; color: #ff9800; font-weight: normal; margin-top: 2px; }

.station-date { font-size: 11px; color: #777; display: block; margin-top: 4px; }
tr.cible td { background: rgba(26, 235, 255, 0.05); }
tr.cible .station-nom { color: #1AEBFF; }

.val-h { font-family: sans-serif; font-size: 1.4em; font-weight: bold; color: #ddd; }
.val-q { font-family: sans-serif; font-size: 1.4em; font-weight: bold; color: #fff; letter-spacing: 0.5px; }
.badge { display: inline-block; padding: 5px 12px; border-radius: 4px; font-size: 11px; font-weight: bold; text-align: center; min-width: 90px; }
.vert { background: rgba(46, 125, 50, 0.2); color: #81c784; border: 1px solid #2e7d32; }
.jaune { background: rgba(249, 168, 37, 0.2); color: #fbc02d; border: 1px solid #f9a825; }
.orange { background: rgba(239, 108, 0, 0.2); color: #ff9800; border: 1px solid #e65100; }
.rouge { background: rgba(198, 40, 40, 0.2); color: #ff5252; border: 1px solid #c62828; animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { opacity: 0.6; } }

.meteo-cell { font-family: sans-serif; color: #1AEBFF; font-size: 1.2em; font-weight: bold; }
.meteo-temp { display: block; }
.meteo-pres { display: inline-block; color: #8899a6; font-size: 0.8em; margin-top: 2px; font-weight: normal; }
.meteo-icon { font-size: 1.4em; margin-bottom: 2px; display:block; }
.meteo-pluie { display: inline-block; color: #ff9800; font-size: 0.8em; margin-top: 2px; margin-right: 10px; }

.bar-bg { width: 100%; height: 8px; background: #333; border-radius: 4px; overflow: hidden; margin-top: 5px; }
.bar-fill { height: 100%; background: #1AEBFF; transition: width 0.5s ease; }
.percent-text { font-family: monospace; color: #1AEBFF; font-weight: bold; font-size: 13px; }

.jdm-container { margin-top: 40px; background: #151c27; border-radius: 8px; border: 1px solid #333; padding: 5px; }
.jdm-summary { padding: 15px; font-weight: bold; color: #8899a6; cursor: pointer; outline: none; }
.jdm-content { padding: 0 15px 15px 15px; border-top: 1px solid #333; }
.jdm-entry { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.jdm-entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.jdm-date { color: #1AEBFF; font-size: 0.9em; }
.jdm-titre { font-weight: bold; color: #fff; margin-left: 10px; }
.jdm-text { color: #ccc; font-size: 0.95em; margin-top: 5px; line-height: 1.4; }
.footer-info { text-align: center; font-size: 11px; color: #555; margin-top: 30px; }

/* =========================================
   CLASSES POUR MONTARGIS ET MÉTÉO
   ========================================= */
.debit-global { font-size: 18px; line-height: 1.3; font-weight: bold; }

.debit-fourchette {
    font-size: 20px;
    display: block;
    margin: 3px 0;
    color: #8A2BE2;
    font-weight: bold; 
}

.meteo-icon-large { font-size: 1.2em; }
.meteo-temp-bold { font-weight: bold; }
.meteo-bloc-pluie { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 6px 0 8px 0; flex-wrap: nowrap; }
.badge-pluie { font-size: 18px; color: #3498db; font-weight: 800; background: rgba(52, 152, 219, 0.1); padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.texte-pression { font-size: 18px; color: #fff; margin: 0; white-space: nowrap; }

.ephemeride-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; font-size: 15px; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 8px; margin-top: 8px; }
.ephemeride-grille, .ephemeride-grille *, .ephemeride-grille a { text-decoration: none !important; border-bottom: none !important; }
.eph-gris { color: #8899a6 !important; }
.eph-blanc { color: #fff !important; }

/* =========================================
   NOUVELLES CLASSES (RÉSUMÉS BASSINS & LACS)
   ========================================= */
.resume-bassin { background: #1a2332; padding: 10px 15px; border-radius: 8px; margin-bottom: 15px; }
.resume-flex { display: flex; justify-content: space-between; align-items: center; text-align: center; }
.resume-item { flex: 1; }
.resume-titre { color: #aaa; font-size: 0.8em; display: block; margin-bottom: 3px;}
.resume-valeur { font-weight: bold; font-size: 1.2em; }

.border-aube { border-left: 4px solid #00bcd4; }
.border-seine { border-left: 4px solid #2196f3; }
.border-yonne { border-left: 4px solid #4caf50; }
.border-marne { border-left: 4px solid #e91e63; }
.border-lacs { border-left: 5px solid #ff9800; border-right: 1px solid #333; box-shadow: 0 4px 6px rgba(0,0,0,0.3); padding: 15px; }

.text-white { color: #fff; }
.text-cyan { color: #1AEBFF; }
.text-orange { color: #ff9800; }

.lacs-titre { margin-top: 0; color: #8899a6; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.lacs-ligne { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2a3545; padding: 12px 0; }
.lacs-nom { width: 30%; color: #fff; font-size: 15px; font-weight: bold; }
.lacs-nom-sub { font-size: 12px; color: #aaa; font-weight: normal; }
.lacs-col { width: 20%; text-align: center; }
.lacs-col-right { width: 30%; text-align: right; }
.lacs-col-titre { color: #8899a6; font-size: 11px; text-transform: uppercase; display: block; margin-bottom: 3px;}
.lacs-total-box { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; margin-top: 5px; background: #2a0800; border-radius: 4px; padding: 12px; }
.lacs-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(150,150,150,0.5); }
.val-q-large { font-size: 1.3em; }

/* =========================================
   STYLES EXTRAITS DE LACS.PHP (TABLEAU LACS)
   ========================================= */
.lacs-total-texte { font-size: 15px; font-weight: bold; }

.th-lac { width: 25%; }
.th-riviere { width: 20%; }
.th-cap { width: 15%; text-align: center; }
.th-vol { width: 15%; text-align: center; }
.th-remplissage { width: 25%; }

.td-lac-nom { font-weight: bold; color: #fff; }
.td-riviere { color: #8899a6; font-style: italic; }
.td-cap { text-align: center; color: #aaa; }
.td-vol { text-align: center; color: #1AEBFF; font-weight: bold; }

.progress-wrapper { display: flex; align-items: center; gap: 10px; }
.progress-bar-container { flex-grow: 1; }
.remplissage-vide { font-size: 11px; color: #555; font-style: italic; }

.loingh24 {
    font-size: 16px;
    color: #8A2BE2;
    font-weight: bold;
    display: block;
    margin-top: 5px;
    margin-bottom: 2px;
}

/* Classes générales (remontées avant le media query mobile) */
.min-temp { color: #b3f7ff; font-weight: bold; font-size: 15px; }
.max-temp { color: #ff5252; font-weight: bold; font-size: 15px; }
.txt-prev-bleu { color: #3498db !important; font-weight: bold; font-size: 13px; }
.txt-dem-violet { color: #9b59b6 !important; font-weight: bold; font-size: 13px; }
.nappe-text { font-size: 15px; color: #FFD700; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }

/* 1. État par défaut (Ordinateur) pour l'icône de l'accordéon */
.toggle-icon { display: none !important; }

/* ====================================================== 
   UNIQUE BLOC MOBILE (TOUT EST FUSIONNÉ ICI)
   ====================================================== */
@media screen and (max-width: 768px) {
    /* --- Styles structurels --- */
    .container { padding: 10px; }
    .header-container { flex-direction: column; align-items: flex-start; }
    .App-logo { margin-bottom: 10px; width: 40px; height: 40px; }
    thead { display: none; }
    table, tbody, tr, td { display: block; width: 100%; }
    .table-wrapper { background: transparent; border: none; box-shadow: none; }
    tr { background: #151c27; margin-bottom: 15px; border-radius: 12px; border: 1px solid #333; padding: 15px; position: relative; }
    td { padding: 8px 0; border: none; text-align: left; }
    
    /* --- Styles des tableaux --- */
    .vigi td:nth-child(1) { border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 10px; }
    .vigi td:nth-child(2)::before { content: "Hauteur : "; color: #888; font-size: 0.9em; }
    .vigi td:nth-child(3)::before { content: "Débit : "; color: #888; font-size: 0.9em; }
    .vigi td:nth-child(5) { position: absolute; top: 15px; right: 15px; padding: 0; border: none; }
    .vigi td:nth-child(4) { border-top: 1px solid #333; margin-top: 5px; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
    .vigi td:nth-child(4)::before { content: "Météo locale : "; color: #888; font-size: 0.9em; width: 100%; margin-bottom: 5px; }
    
    .lacs td:nth-child(1) { font-size: 16px; color: #1AEBFF; font-weight: bold; border-bottom: 1px solid #333; }

    /* --- Styles météo sur mobile --- */
    .meteo-cell { text-align: right; width: 100%; }
    .meteo-temp, .meteo-pres { display: inline-block; margin-left: 10px; }
    .meteo-bloc-pluie { justify-content: flex-end; }

    /* --- Système d'accordéon mobile --- */
    .accordion-content { display: none !important; }
    .accordion-content.open { display: block !important; }
    .boussole-grid.accordion-content.open { display: grid !important; }

    .accordion-toggle {
        cursor: pointer !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .toggle-icon {
        display: block !important;
        color: #ff9800 !important;
        font-size: 40px !important;
        font-weight: 900 !important;
        line-height: 0.8 !important;
        margin-right: 10px !important;
        transition: transform 0.2s ease-in-out;
    }
}