/* =========================================================
   Stations climatologiques des Landes — feuille de styles
   Structure suivie : header.topbar > main.app-layout
   (aside.sidebar | section.content | aside.right-panel)
   ========================================================= */

/* ---------- Variables ---------- */
:root{
    --blue:#2563eb;
    --blue-dark:#1d4ed8;
    --blue-soft:rgba(37,99,235,.12);
    --open:#22c55e;
    --closed:#3b82f6;
    --bg:#f1f5f9;
    --card:#ffffff;
    --soft:#f8fafc;
    --border:#e2e8f0;
    --text:#0f172a;
    --muted:#64748b;
    --radius:10px;
    --gap:16px;
  }
  
  *{box-sizing:border-box}
  
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  
  /* =========================
     HEADER (.topbar)
  ========================= */
  .topbar{
    top:0;z-index:1000;
    display:flex;align-items:center;
    height:52px;padding:0 var(--gap);
    background:var(--blue);color:#fff;
    box-shadow:0 1px 4px rgba(15,23,42,.15);
  }
  /* =========================
     LAYOUT (main.app-layout)
  ========================= */
  /*
   * Grand écran :  filtres | carte  | fiche station
   *                filtres | graphiques (2 colonnes)
   */
  .app-layout{
    display:grid;gap:var(--gap);padding:var(--gap);
    grid-template-columns:280px minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "side map    info"
      "side charts charts";
    align-items:start;
  }
  .sidebar{grid-area:side}
  /* La carte s'étire à la hauteur de la fiche station (pas de vide dessous) */
  .content{grid-area:map;align-self:stretch}
  .content .map-card{flex:1 1 auto;display:flex;flex-direction:column}
  .content #map{flex:1 1 auto;min-height:420px}
  .right-panel{grid-area:info}
  .charts-section{grid-area:charts}

  @media (max-width:1280px){
    .app-layout{
      grid-template-columns:260px minmax(0,1fr);
      grid-template-areas:
        "side map"
        "side info"
        "side charts";
    }
  }

  /* minmax(0,1fr) : la colonne ne s'élargit pas au-delà de l'écran
     pour contenir un tableau large (débordement sur mobile) */
  @media (max-width:900px){
    .app-layout{
      grid-template-columns:minmax(0,1fr);
      grid-template-areas:"side" "map" "info" "charts";
    }
  }

  /* Graphiques : 2 colonnes, cartes d'une même rangée à la même hauteur */
  .charts-section{
    display:grid;gap:var(--gap);min-width:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
  }
  @media (max-width:1100px){.charts-section{grid-template-columns:minmax(0,1fr)}}

  .charts-section .chart-card{display:flex;flex-direction:column}
  .charts-section .chart-card[hidden],
  .charts-empty[hidden]{display:none}
  .charts-empty{grid-column:1 / -1;text-align:center;color:var(--app-text-muted)}
  .charts-empty p{margin:0;padding:24px 0}
  /* Graphique calé en bas de la carte : les zones de tracé
     d'une même rangée restent alignées même si un titre passe à la ligne */
  .charts-section .chart-wrap,
  .charts-section .stripes{margin-top:auto;padding-top:8px}
  
  .sidebar,.content,.right-panel{
    display:flex;flex-direction:column;gap:var(--gap);min-width:0;
  }
  
  .card,.panel{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px;
  }
  
  h2{font-size:14px;margin:0;font-weight:600}
  .station-title h2{font-size:19px}
  
  /* =========================
     COLONNE GAUCHE — filtres
  ========================= */
  .panel-title{
    display:flex;align-items:center;gap:8px;
    font-size:14px;font-weight:600;margin-bottom:10px;
  }
  .panel-title i{color:var(--blue)}
  
  label{display:block;font-size:11px;color:var(--muted);margin:10px 0 4px}
  
  select,input{
    width:100%;height:34px;padding:0 8px;
    border:1px solid var(--border);border-radius:6px;
    background:#fff;font:inherit;color:inherit;
  }
  select:focus,input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
  
  button{
    font:inherit;cursor:pointer;
    border:1px solid var(--border);border-radius:6px;
    background:#fff;padding:6px 12px;color:inherit;
  }
  .btn-primary{
    width:100%;height:36px;margin-top:14px;
    background:var(--blue);border-color:var(--blue);color:#fff;font-weight:500;
  }
  .btn-primary:hover{background:var(--blue-dark)}
  .btn-link{width:100%;margin-top:8px;border:0;background:none;color:var(--blue)}
  
  /* ---------- Liste des stations ---------- */
  ul.stations{list-style:none;margin:12px 0 0;padding:0;max-height:340px;overflow:auto}
  ul.stations li+li{border-top:1px solid var(--border)}
  ul.stations button{
    display:flex;align-items:center;gap:10px;
    width:100%;text-align:left;border:0;background:none;padding:8px;border-radius:6px;
  }
  ul.stations button:hover{background:var(--bg)}
  ul.stations button.active{background:var(--blue);color:#fff}
  .nm{display:block;font-size:13px;font-weight:500}
  .st{font-size:11px;color:var(--muted)}
  .active .st{color:#dbeafe}
  
  .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block}
  .dot.open{background:var(--open)}
  .dot.closed{background:var(--closed)}
  
  /* =========================
     COLONNE CENTRALE — carte
  ========================= */
  #map{
    height:420px;margin-top:10px;
    border:1px solid var(--border);border-radius:8px;
    overflow:hidden;position:relative;background:#dfe8ef;
  }
  .leaflet-container{font:inherit}

  /* Noms des stations masqués sous le zoom 11 (voir updateStationLabels) */
  #map.labels-hidden .station-label{display:none}
  
  .legend{
    position:absolute;right:12px;bottom:24px;z-index:400;
    background:rgba(255,255,255,.95);
    border:1px solid var(--border);border-radius:6px;
    padding:8px 10px;font-size:11px;line-height:1.7;
  }
  .legend b{display:block;margin-bottom:2px}
  /* Téléphone : légende de la carte climato plus discrète */
  @media (max-width:560px){
    .legend{padding:5px 8px;line-height:1.4}
    .legend h4{font-size:13px;margin:0 0 4px}
    .legend img{width:14px}
  }
  .legend span{display:flex;align-items:center;gap:6px}
  
  /* ---------- Graphiques ---------- */
  .chart-card h2 i{color:var(--blue)}
  .chart-wrap{height:260px;margin-top:8px;position:relative}
  .chart-subtitle{margin:2px 0 0;font-size:11px;color:var(--app-text-muted)}

  /* ---------- Bandes de réchauffement ---------- */
  .stripes{margin-top:10px;position:relative}
  .stripes-band{display:flex;height:180px;border-radius:6px;overflow:hidden;touch-action:pan-y}
  .stripe{flex:1 1 0;min-width:0}
  .stripe.hover{outline:2px solid var(--app-text);outline-offset:-2px}

  /* Infobulle des bandes */
  .stripes-tip{
    position:absolute;top:8px;transform:translateX(-50%);z-index:5;
    display:flex;flex-direction:column;gap:2px;
    padding:6px 10px;border-radius:6px;pointer-events:none;white-space:nowrap;
    background:var(--app-card);color:var(--app-text);
    border:1px solid var(--app-border);
    box-shadow:0 4px 14px rgba(0,0,0,.18);font-size:12px;
  }
  .stripes-tip[hidden]{display:none}

  /* En-tête de carte avec sélecteur */
  .chart-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
  .segmented{display:inline-flex;border:1px solid var(--app-border);border-radius:7px;padding:2px;gap:2px}
  .segmented-btn{border:0;background:transparent;color:var(--app-text-muted);padding:3px 10px;border-radius:5px;font-size:12px;line-height:1.4}
  .segmented-btn:hover{color:var(--app-text);background:var(--app-hover)}
  .segmented-btn.active{background:var(--blue);color:#fff}
  .stripe.missing{background:var(--app-border)}
  /* Année sélectionnée : repère sous la bande */
  .stripe.current{box-shadow:inset 0 -6px 0 var(--app-text)}
  .stripes-axis{position:relative;height:18px;margin-top:4px;font-size:10px;color:var(--app-text-muted);font-variant-numeric:tabular-nums}
  .stripes-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
  .stripes-axis span:first-child{transform:none}
  .stripes-axis span:last-child{transform:translateX(-100%)}
  .stripes-legend{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:10px;color:var(--app-text-muted)}
  .stripes-scale{flex:0 1 160px;height:8px;border-radius:4px}
  .stripes-summary{margin-top:6px;font-size:12px;color:var(--app-text)}
  
  /* =========================
     COLONNE DROITE — fiche station
  ========================= */
  .station-header{display:flex;align-items:center;gap:12px}
  .station-icon{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:9px;
    background:var(--blue-soft);color:var(--blue);font-size:17px;flex:0 0 auto;
  }
  #station-status{
    font-size:11px;font-weight:500;
    border-radius:4px;padding:2px 8px;
    display:inline-block;margin-top:4px;
    background:var(--bg);color:var(--muted);
  }
  #station-status.open{background:rgba(34,197,94,.14);color:#15803d}
  #station-status.closed{background:var(--blue-soft);color:var(--blue-dark)}
  
  .station-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
    border-top:1px solid var(--border);margin-top:14px;padding-top:14px;
  }
  @media (max-width:640px){.station-grid{grid-template-columns:repeat(2,1fr)}}
  .card-item{display:flex;flex-direction:column;gap:2px;font-size:13px}
  .card-label{font-size:11px;color:var(--muted)}
  
  /* ---------- Onglets ---------- */
  .tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-top:16px;flex-wrap:wrap}
  .tab-btn{border:0;border-bottom:2px solid transparent;background:none;padding:8px 14px;color:var(--muted)}
  .tab-btn:hover{color:var(--text)}
  .tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:500}
  .tab-content{padding-top:14px;font-size:13px}
  .tab-content[hidden]{display:none}
  .tab-content p{margin:0;color:var(--muted)}
  
  /* ---------- Tableau (DataTables) ---------- */
  .scroll{max-height:560px;overflow:auto;border:1px solid var(--app-border);border-radius:8px}

  .table-caption{font-size:14px;font-weight:600;color:var(--app-text)}
  .table-caption-detail{margin-left:8px;font-size:12px;font-weight:400;color:var(--app-text-muted)}

  table.dataTable{font-size:13px;margin:0!important;border-collapse:separate;border-spacing:0}
  table.dataTable th,
  table.dataTable td{padding:7px 10px!important;white-space:nowrap}

  /* Chiffres alignés (même largeur pour chaque chiffre) */
  table.dataTable .col-num,
  table.dataTable .col-day{text-align:right;font-variant-numeric:tabular-nums}
  table.dataTable .col-month,
  table.dataTable thead th.col-month{text-align:left!important;font-weight:500}

  /* En-tête : titre + unité, reste visible au défilement */
  table.dataTable thead th{
    position:sticky;top:0;z-index:2;
    background:var(--app-card)!important;
    font-size:12px;font-weight:600;line-height:1.2;vertical-align:bottom;
    border-bottom:2px solid var(--app-border)!important;
  }
  table.dataTable thead th.col-num,
  table.dataTable thead th.col-day{text-align:right}
  .col-unit{display:block;font-size:10px;font-weight:400;color:var(--app-text-muted)}
  th.has-tip{cursor:help}

  table.dataTable tbody td{border-top:1px solid var(--app-border)!important}
  table.dataTable tbody tr:hover td{background:var(--app-hover)!important}

  /* Ligne de bilan annuel */
  table.dataTable tfoot th{
    background:var(--app-hover)!important;
    border-top:2px solid var(--app-border)!important;
    font-weight:600;
  }

  /* Mobile : colonne "Mois" fixe au défilement horizontal */
  table.dataTable .col-month{position:sticky;left:0;z-index:1;background:var(--app-card)}
  table.dataTable thead th.col-month{z-index:3}
  table.dataTable tfoot th.col-month{background:var(--app-card)!important;box-shadow:inset 0 0 0 999px var(--app-hover)}

  /* Couleurs des valeurs (même taille et graisse partout) */
  .val-cold{color:#2563eb}
  .val-cool{color:#0891b2}
  .val-mild{color:#16a34a}
  .val-warm{color:#d97706}
  .val-hot{color:#dc2626}
  .val-rain{color:#0284c7}
  .val-rain-strong{color:#1d4ed8;font-weight:600}

  html[data-bs-theme="dark"] .val-cold{color:#60a5fa}
  html[data-bs-theme="dark"] .val-cool{color:#22d3ee}
  html[data-bs-theme="dark"] .val-mild{color:#4ade80}
  html[data-bs-theme="dark"] .val-warm{color:#fbbf24}
  html[data-bs-theme="dark"] .val-hot{color:#f87171}
  html[data-bs-theme="dark"] .val-rain{color:#38bdf8}
  html[data-bs-theme="dark"] .val-rain-strong{color:#93c5fd}
  /* ---------- Utilitaires ---------- */
  .muted{color:var(--muted)}
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px}
  ::-webkit-scrollbar-thumb:hover{background:#94a3b8}
  
 .station-search-wrapper {
    position: relative;
}

.station-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;

    max-height: 250px;
    overflow-y: auto;

    background: white;
    border: 1px solid #ced4da;
    border-radius: 0 0 6px 6px;

    box-shadow: 0 4px 10px rgba(0,0,0,.10);
}

.station-result {
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Indicateur de chargement */
.app-loader {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 70px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px 16px;
    border-radius: 999px;

    background: #1e40af;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.app-loader[hidden] {
    display: none;
}

.station-result-status {
    flex: 0 0 auto;
    font-size: 12px;
    white-space: nowrap;
}

.station-result-status.open {
    color: #16a34a;
}

.station-result-status.closed {
    color: #2563eb;
}

.station-result:hover {
    background: #f1f5f9;
}

.station-results-empty {
    padding: 10px 12px;
    color: #777;
}

.chart-no-data {
    height: 100%;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 14px;
    font-style: italic;
}

 /* ============================================================
    THEME : CLAIR / NUIT / AUTOMATIQUE
    ============================================================ */

:root {
    --app-bg: #f1f5f9;
    --app-card: #ffffff;
    --app-text: #1e293b;
    --app-text-muted: #64748b;
    --app-border: #e2e8f0;

    --app-header: #ffffff;

    --app-input: #ffffff;
    --app-input-text: #1e293b;
    --app-input-border: #ced4da;

    --app-hover: rgba(100, 116, 139, 0.10);
}


/* ============================================================
   MODE SOMBRE
   ============================================================ */

html[data-theme="dark"],
html[data-bs-theme="dark"] {
    --app-bg: #0f172a;
    --app-card: #1e293b;
    --app-text: #e2e8f0;
    --app-text-muted: #94a3b8;
    --app-border: #334155;

    --app-header: #1e293b;

    --app-input: #0f172a;
    --app-input-text: #e2e8f0;
    --app-input-border: #475569;

    --app-hover: rgba(148, 163, 184, 0.12);
}


/* ============================================================
   MODE AUTOMATIQUE
   ============================================================ */

@media (prefers-color-scheme: dark) {

    html[data-theme="auto"] {
        --app-bg: #0f172a;
        --app-card: #1e293b;
        --app-text: #e2e8f0;
        --app-text-muted: #94a3b8;
        --app-border: #334155;

        --app-header: #1e293b;

        --app-input: #0f172a;
        --app-input-text: #e2e8f0;
        --app-input-border: #475569;

        --app-hover: rgba(148, 163, 184, 0.12);
    }

}


/* ============================================================
   PAGE
   ============================================================ */

body {
    background-color: var(--app-bg);
    color: var(--app-text);

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}


/* ============================================================
   CARTES / PANELS
   ============================================================ */

.card,
.panel {
    background: var(--app-card) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


.card-body {
    background: var(--app-card) !important;
    color: var(--app-text) !important;
}


.card-header {
    background: var(--app-header) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}


/* ============================================================
   LABELS
   ============================================================ */

.form-label {
    color: var(--app-text) !important;
}


/* ============================================================
   INPUTS + SELECTS
   ============================================================ */

.form-control,
.form-select,
select {
    background-color: var(--app-input) !important;
    color: var(--app-input-text) !important;
    border-color: var(--app-input-border) !important;
}


/*
 * IMPORTANT :
 * certains de tes selects ont une règle :
 *
 * background: #ffffff;
 *
 * on l'écrase explicitement ici.
 */

select,
input {
    background: var(--app-input) !important;
    color: var(--app-input-text) !important;
    border-color: var(--app-input-border) !important;
}

select:focus,
input:focus {
    background: var(--app-input) !important;
    color: var(--app-input-text) !important;
    border-color: #3b82f6 !important;
}
select option {
    background: var(--app-input) !important;
    color: var(--app-input-text) !important;
}

/* Focus */
.legend,
.leaflet-popup-content-wrapper,
.station-results,
.station-result:hover,
.form-control:focus,
.form-select:focus,
select:focus {
    background-color: var(--app-input) !important;
    color: var(--app-input-text) !important;
    border-color: #3b82f6 !important;

    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15) !important;
}


/* Placeholder */

.form-control::placeholder {
    color: var(--app-text-muted) !important;
}


/* Options des select */

select option,
.form-select option {
    background-color: var(--app-input) !important;
    color: var(--app-input-text) !important;
}


/* ============================================================
   DATATABLES
   ============================================================ */

html[data-bs-theme="dark"] .dt-container {
    color: var(--app-text) !important;
}


html[data-bs-theme="dark"] table.dataTable {
    background: var(--app-card) !important;
    color: var(--app-text) !important;
}


html[data-bs-theme="dark"] table.dataTable thead th,
html[data-bs-theme="dark"] table.dataTable thead td {
    background: var(--app-card) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}


html[data-bs-theme="dark"] table.dataTable tbody td {
    background: var(--app-card) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}


html[data-bs-theme="dark"]
table.dataTable tbody tr:nth-child(even) td {
    background: #172235 !important;
}


html[data-bs-theme="dark"]
table.dataTable tbody tr:hover td {
    background: #273449 !important;
    color: #ffffff !important;
}


/* Recherche DataTables */

html[data-bs-theme="dark"] .dt-search input,
html[data-bs-theme="dark"] .dt-length select {
    background: var(--app-input) !important;
    color: var(--app-input-text) !important;
    border-color: var(--app-input-border) !important;
}


html[data-bs-theme="dark"] .dt-info {
    color: var(--app-text-muted) !important;
}


/* Pagination */

html[data-bs-theme="dark"] .dt-paging button {
    background: var(--app-card) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}


html[data-bs-theme="dark"] .dt-paging button.current {
    background: #2563eb !important;
    color: #ffffff !important;
}


/* ============================================================
   NAVIGATION ENTRE PAGES
   ============================================================ */

.app-nav {
    display: flex;
    gap: 4px;
    margin-left: auto;
    margin-right: 12px;
}

.app-nav-link {
    padding: 6px 12px;
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
}

.app-nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.app-nav-link.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.20);
    font-weight: 600;
}

@media (max-width: 520px) {
    .app-navbar .navbar-brand { font-size: 16px; }
    .app-nav-link { padding: 6px 8px; font-size: 13px; }
}

/*
 * Téléphone et petite tablette : nom du site + bouton du thème sur
 * la première ligne, liens des pages sur une deuxième ligne
 * (la barre à hauteur fixe coupait le nom et faisait déborder le bouton).
 * Dix liens + badge vigilance : plus de place sur une ligne sous 1400 px.
 */
@media (max-width: 1400px) {

    .topbar { height: auto; padding-top: 6px; padding-bottom: 6px; }

    .app-navbar { width: 100%; padding: 0; }

    .app-navbar .container-fluid { flex-wrap: wrap; row-gap: 6px; padding: 0; }

    .app-navbar .navbar-brand { order: 0; flex: 1 1 auto; margin-right: 0; padding: 0; }

    .theme-switcher { order: 1; }

    .theme-button { width: 40px; height: 40px; }

    .app-nav {
        order: 2;
        width: 100%;
        margin: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .app-nav::-webkit-scrollbar { display: none; }

    /* Liens répartis sur toute la largeur, assez hauts pour le doigt */
    .app-nav-link {
        flex: 1 0 auto;
        text-align: center;
        white-space: nowrap;
        padding: 8px 10px;
    }

}

/* Téléphones : les 10 liens du menu sur deux lignes (5 + 5) */
@media (max-width: 560px) {

    .app-nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        overflow: visible;
    }

    .app-nav-link { padding: 7px 1px; font-size: 11px; letter-spacing: -0.2px; }

}

@media (max-width: 380px) {

    .app-nav-link { font-size: 10px; }

}


/* ============================================================
   RECORDS : TUILES (page Records + carte de la page climato)
   ============================================================ */

.record-tiles {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.record-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--radius);
    background: var(--app-card);
    min-width: 0;
}

.record-title {
    font-size: 12px;
    color: var(--app-text-muted);
}

/* Infobulle "ⓘ" des records annuels : visible au survol, au clavier et au toucher */
/* L'infobulle se place par rapport à la tuile (jamais hors écran) */
.record-tile { position: relative; }

.record-info-wrap {
    display: inline-block;
    margin-left: 4px;
}

.record-info {
    border: 0;
    padding: 0 2px;
    background: none;
    color: var(--blue);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

html[data-bs-theme="dark"] .record-info { color: #60a5fa; }

.record-tip {
    position: absolute;
    top: 34px;
    left: 8px;
    right: 8px;
    z-index: 20;
    padding: 8px 10px;
    border: 1px solid var(--app-border);
    border-radius: 7px;
    background: var(--app-card);
    color: var(--app-text);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}

.record-info-wrap:hover .record-tip,
.record-info:focus + .record-tip {
    visibility: visible;
    opacity: 1;
}

/* Tuile survolée au premier plan (l'infobulle passe au-dessus des voisines) */
.record-tile:hover,
.record-tile:focus-within {
    z-index: 5;
}

/* Grand chiffre : chiffres proportionnels (pas tabular-nums) */
.record-value {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--app-text);
}

.record-unit {
    font-size: 14px;
    font-weight: 400;
    color: var(--app-text-muted);
}

.record-meta {
    font-size: 12px;
    color: var(--app-text-muted);
}

.record-station {
    border: 0;
    padding: 0;
    background: none;
    color: var(--blue);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

span.record-station { cursor: default; color: var(--app-text); }

/* Liens plus clairs en thème nuit (contraste) */
html[data-bs-theme="dark"] button.record-station,
html[data-bs-theme="dark"] .records-link,
html[data-bs-theme="dark"] .records-more { color: #60a5fa; }

button.record-station:hover { text-decoration: underline; }

/* Classement dépliable des stations */
.record-ranking {
    margin-top: 6px;
    font-size: 12px;
}

.record-ranking summary {
    cursor: pointer;
    color: var(--app-text-muted);
}

.record-ranking ol {
    margin: 6px 0 0;
    padding-left: 20px;
}

.record-ranking li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    padding: 2px 0;
}

.record-ranking .record-station {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-ranking .record-rank-date {
    grid-column: 1 / -1;
    color: var(--app-text-muted);
    font-size: 11px;
}

.record-rank-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Carte "Records de la station" (page climato) */
.records-teaser {
    grid-column: 1 / -1;
}

.records-teaser[hidden] { display: none; }

.record-tiles-compact {
    margin-top: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.record-tiles-compact .record-tile { padding: 10px 12px; }

.record-tiles-compact .record-value { font-size: 20px; }

/*
 * Téléphone : tuiles de records sur deux colonnes, plus compactes
 * (une par ligne rendait la page Records très longue).
 * Classement ouvert : la tuile reprend toute la largeur.
 */
@media (max-width: 560px) {

    .record-tiles.record-group,
    .record-tiles.record-tiles-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .record-tile { padding: 10px 11px; gap: 2px; }

    .record-title { font-size: 11.5px; line-height: 1.3; }

    .record-value { font-size: 21px; }

    .record-unit { font-size: 12px; }

    .record-meta { font-size: 11px; line-height: 1.35; }

    .record-tile:has(.record-ranking[open]) { grid-column: 1 / -1; }

}

.records-teaser-period {
    font-weight: 400;
    font-size: 12px;
    color: var(--app-text-muted);
}

.records-link {
    font-size: 13px;
    color: var(--blue);
    text-decoration: none;
    white-space: nowrap;
}

.records-link:hover { text-decoration: underline; }


/* ============================================================
   PAGE RECORDS
   ============================================================ */

.records-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.records-section {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    scroll-margin-top: 16px;
}

.records-section-header h1 { font-size: 22px; font-weight: 700; margin: 0; }

.records-section-header h2 { font-size: 18px; font-weight: 700; margin: 0; }

.records-intro {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--app-text-muted);
}

.records-station-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.records-station-select {
    margin: 0;
    min-width: 260px;
    max-width: 100%;
}

.records-station-select span {
    display: block;
    font-size: 11px;
    color: var(--app-text-muted);
    margin-bottom: 4px;
}

/* Groupes de tuiles : chaque groupe sur une rangée (5 ou 6 tuiles) */
.record-group {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.records-group-title {
    margin: 4px 0 -6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.records-more {
    display: block;
    margin: 10px auto 0;
    padding: 6px 14px;
    border: 1px solid var(--app-border);
    border-radius: 7px;
    background: transparent;
    color: var(--blue);
    font-size: 13px;
}

.records-more:hover { background: var(--app-hover); }

.records-more[hidden] { display: none; }

.records-card-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
}

.records-scroll { max-height: none; border: 0; }

/* Groupes de tuiles créés par records.js : espacement de la section */
.records-groups { display: contents; }

.records-monthly-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.records-monthly-header .records-card-title { margin: 0; }

.records-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.records-table th,
.records-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--app-border);
    white-space: nowrap;
    text-align: left;
    vertical-align: top;
}

.records-table thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--app-text-muted);
    border-bottom-width: 2px;
}

.records-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.records-table .strong { font-weight: 600; }

.records-table .muted { color: var(--app-text-muted); }

.records-table .records-month {
    font-weight: 500;
    position: sticky;
    left: 0;
    background: var(--app-card);
}

.records-table tbody tr:hover td,
.records-table tbody tr:hover th { background: var(--app-hover); }

.record-cell-date {
    display: block;
    font-size: 11px;
    color: var(--app-text-muted);
    /* Périodes de cumul ("2 octobre 22 h → 3 octobre 2020, 10 h") sur deux lignes */
    white-space: normal;
    min-width: 110px;
}

.records-empty { color: var(--app-text-muted); font-style: italic; }

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

.records-rank-list {
    margin: 8px 0 0;
    padding-left: 22px;
    font-size: 13px;
}

/* Année | valeur | écart à la normale, en colonnes alignées */
.records-rank-list li {
    display: grid;
    grid-template-columns: 1fr auto 4.5em;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid var(--app-border);
}

.records-rank-list .record-rank-value { text-align: right; }

.record-rank-gap {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--app-text-muted);
    white-space: nowrap;
}

.records-rank-list li:last-child { border-bottom: 0; }

.record-rank-year { font-weight: 500; }

.records-source {
    margin: 0;
    font-size: 12px;
    color: var(--app-text-muted);
}


/* ============================================================
   ACCUEIL : CARTE TEMPS RÉEL
   ============================================================ */

/*
 * Accueil : carte puis prévisions Facebook à gauche,
 * "En ce moment" et liste des stations à droite
 */
/*
 * Grand écran : 3 colonnes calées à la même hauteur
 *   carte | prévisions Facebook | en ce moment + stations
 * (la hauteur commune est celle de la colonne des stations)
 */
.home-layout {
    display: grid;
    gap: var(--gap);
    padding: var(--gap);
    grid-template-columns: minmax(0, 1fr) 380px 340px;
    grid-template-areas: "map fb side";
    align-items: stretch;
}

.home-map-card { grid-area: map; }
.fb-card { grid-area: fb; }
.home-side { grid-area: side; }

/*
 * Grand écran assez haut : l'accueil tient dans la fenêtre, sans défilement.
 * Hauteur = fenêtre - en-tête (52 px) - ligne des sources (40 px) ;
 * la liste des stations défile dans sa carte si elle ne tient pas.
 */
@media (min-width: 1401px) and (min-height: 700px) {

    .home-layout {
        height: calc(100vh - 52px - 40px);
    }

    .home-layout > * { min-height: 0; }

    .home-map-card,
    .fb-card,
    .home-side { height: 100%; }

    #home-map { min-height: 0; }

    /* Carte "Stations" : prend le reste de la colonne, liste défilante */
    .home-side > .card:last-child {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .home-side .home-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    .home-source {
        margin: 0;
        padding-top: 0;
        padding-bottom: 12px;
        height: 40px;
        overflow: hidden;
    }

}

/* Écran moyen : Facebook sous la carte */
@media (max-width: 1400px) {
    .home-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "map  side"
            "fb   side";
        align-items: start;
    }
}

/* Mobile : tout empilé */
@media (max-width: 1000px) {
    .home-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas: "map" "side" "fb";
    }
}

.home-map-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Titre au-dessus, commandes sur toute la largeur en dessous : la barre
   garde la même place quel que soit le paramètre choisi */
.home-map-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-title { font-size: 20px; font-weight: 700; margin: 0; }

.home-update { margin: 2px 0 0; font-size: 12px; color: var(--app-text-muted); }

.home-params { flex-wrap: wrap; }

/* Records du jour (accueil) */
.home-records {
    margin: 4px 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #f2c94c;
    background: rgba(255, 214, 102, 0.15);
    font-size: 13px;
}

.home-records-hot {
    border-color: #e03131;
    background: rgba(224, 49, 49, 0.12);
}

.home-records-title { font-weight: 700; margin-bottom: 4px; }

.home-records-list { margin: 0; padding-left: 18px; }

.home-records-list li { margin: 2px 0; cursor: help; }

.home-records-station { font-weight: 600; }

/* Variantes du paramètre choisi (actuelle, max du jour, cumuls de pluie) */
.home-subparams {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
    /* Place gardée même sans variante (humidité, pression) */
    min-height: 28px;
    align-items: center;
}

.home-subparam {
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: transparent;
    color: var(--app-text-muted);
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.home-subparam:hover { background: var(--app-hover); color: var(--app-text); }

.home-subparam.active {
    background: var(--blue, #2563eb);
    border-color: var(--blue, #2563eb);
    color: #fff;
}

@media (max-width: 720px) {
    .home-subparams { justify-content: flex-start; margin-left: 0; width: 100%; }
}

.home-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Interrupteur "Carte colorée" (les règles générales des input sont neutralisées) */
.home-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--app-text);
    cursor: pointer;
    white-space: nowrap;
}

.home-toggle input {
    width: 16px !important;
    height: 16px !important;
    padding: 0;
    margin: 0;
    accent-color: var(--blue);
    cursor: pointer;
}

/* Carte colorée : pixels lissés entre les points de calcul */
.rt-field { image-rendering: auto; }

/*
 * Zoom non entier (demi-niveaux, surtout sur téléphone) : les tuiles
 * réduites tombent sur des fractions de pixel et laissaient des traits
 * blancs entre elles, en travers de la carte et de la carte colorée.
 * Un contour transparent fait lisser les bords des tuiles par le
 * navigateur : plus de trait (toutes les cartes du site).
 */
.leaflet-container img.leaflet-tile { outline: 1px solid transparent; }

/* Grand écran : la carte remplit la hauteur commune des 3 colonnes */
#home-map {
    flex: 1 1 auto;
    min-height: 460px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: #dfe8ef;
}

@media (max-width: 1400px) {
    #home-map { flex: none; height: 62vh; min-height: 420px; }
}

@media (max-width: 1000px) {
    #home-map { height: 70vh; min-height: 380px; }
}

.home-side {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-width: 0;
}

.home-now {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.home-now-tile { padding: 10px 12px; }

.home-now-tile .record-value { font-size: 22px; }

/* Bouée au large : tuile sur toute la largeur, lien vers Observations */
.home-now-sea {
    grid-column: 1 / -1;
    color: inherit;
    text-decoration: none;
    border-color: rgba(14, 165, 233, 0.45);
}

.home-now-sea:hover { background: var(--app-hover); }

/* Repère de la bouée au bord ouest de la carte (hors du cadre) */
.home-offshore {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px !important;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    font-size: 12px;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    border: 2px solid #0ea5e9;
}

.home-offshore:hover { background: #ffffff; color: #0369a1; }

/* Popup d'une station ouvert : repère de la bouée masqué (voir home.js) */
.home-popup-open .home-offshore { visibility: hidden; }

.home-offshore-arrow { font-weight: 700; color: #0369a1; }

.home-list {
    margin: 8px 0 0;
    padding-left: 22px;
    font-size: 13px;
    max-height: 420px;
    overflow: auto;
}

.home-list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--app-border);
}

.home-list li:last-child { border-bottom: 0; }

/* Station dont la dernière mesure date de plus d'une heure */
.home-list li.home-list-old .record-rank-value { color: var(--app-text-muted); font-style: italic; }

.home-list .record-station { text-align: left; }

.home-all { display: inline-block; margin-top: 10px; }

.home-source { padding: 0 var(--gap) var(--gap); }

/* Nos prévisions : colonne Facebook, le fil prend toute la hauteur disponible */
.fb-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fb-feed {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 260px;
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed var(--app-border);
    border-radius: 8px;
}

/* Une fois le fil chargé : plus de cadre pointillé ; le fil est posé
   par-dessus son cadre et n'agrandit jamais la rangée */
.fb-feed:has(.fb-frame) {
    position: relative;
    border: 0;
    padding: 0;
    min-height: 400px;
}

.fb-feed .fb-frame {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Écran moyen / mobile : la colonne n'impose pas de hauteur */
@media (max-width: 1400px) {
    .fb-feed:has(.fb-frame) { min-height: 600px; }
}

.fb-follow {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 16px;
    border-radius: 8px;
    background: #1877f2;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.fb-follow:hover,
.fb-follow:focus-visible { background: #166fe5; color: #ffffff; }

.fb-load {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: #1877f2;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.fb-load:hover,
.fb-load:focus-visible { background: #166fe5; }

.fb-note {
    margin: 0;
    font-size: 11px;
    color: var(--app-text-muted);
    text-align: center;
}

.fb-frame {
    display: block;
    max-width: 100%;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}


/* Étiquettes de valeur sur la carte, centrées sur la station */
.rt-marker {
    width: 0 !important;
    height: 0 !important;
    background: none;
    border: 0;
}

.rt-label,
.rt-dot {
    position: absolute;
    transform: translate(-50%, -50%);
}

.rt-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.rt-neutral {
    background: #ffffff;
    color: #0f172a;
}

/* Réseau Infoclimat (StatIC) : contour violet */
.rt-label.rt-ic { border-color: #7c3aed; }

.rt-dot.rt-ic { box-shadow: 0 0 0 2px #7c3aed; }

.rt-popup-ic { color: #7c3aed; }

html[data-bs-theme="dark"] .rt-popup-ic { color: #a78bfa; }

.home-ic-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: #7c3aed;
    vertical-align: 1px;
}

.rt-old {
    background: #cbd5e1 !important;
    color: #475569 !important;
}

.rt-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #94a3b8;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.rt-arrow {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
}

/* Légende de l'échelle */
.rt-legend {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--app-card);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 11px;
    min-width: 150px;
}

.rt-legend-title { font-weight: 600; margin-bottom: 4px; }

.rt-legend-bar { height: 8px; border-radius: 4px; }

.rt-legend-labels {
    display: flex;
    justify-content: space-between;
    color: var(--app-text-muted);
    margin-top: 2px;
}

/* Palette par classes : barre plus large, repères sous les seuils */
.rt-legend-steps,
.rt-legend-ticks { width: 240px; }

.rt-legend-steps {
    height: 10px;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.rt-legend-ticks {
    position: relative;
    height: 14px;
    margin-top: 2px;
    color: var(--app-text-muted);
}

.rt-legend-ticks span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .rt-legend-steps,
    .rt-legend-ticks { width: 180px; }
}

.rt-legend-note { color: var(--app-text-muted); margin-top: 4px; }

.rt-legend-strong { color: var(--app-text); font-weight: 600; }

/* Popup d'une station */
.rt-popup-title { font-size: 15px; font-weight: 700; margin: 0 0 2px; }

.rt-popup-meta { margin: 0 0 8px !important; font-size: 11px; color: var(--app-text-muted); }

.rt-popup-table { width: 100%; font-size: 12px; border-collapse: collapse; }

.rt-popup-table th,
.rt-popup-table td {
    padding: 3px 0;
    border-bottom: 1px solid var(--app-border);
}

.rt-popup-table th { font-weight: 400; color: var(--app-text-muted); padding-right: 12px; }

.rt-popup-table td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.rt-popup-links { display: flex; gap: 12px; margin-top: 8px; font-size: 12px; }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip { background: var(--app-card); color: var(--app-text); }


/* ============================================================
   PAGE STATION
   ============================================================ */

.station-page { gap: var(--gap); }

.station-top {
    display: grid;
    gap: var(--gap);
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: stretch;
}

@media (max-width: 900px) {
    .station-top { grid-template-columns: minmax(0, 1fr); }
}

.station-info-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.station-kicker { font-size: 11px; color: var(--app-text-muted); }

.station-name { font-size: 26px; font-weight: 700; margin: 0; }

.station-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 18px;
    margin: 14px 0 0;
    font-size: 13px;
}

.station-facts dt { font-weight: 600; }

.station-facts dd { margin: 0; color: var(--app-text); }

.station-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }

.share-button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* Résumé du jour : écart à la normale et records */
.record-normal {
    margin-top: 4px;
    font-size: 12px;
    color: var(--app-text-muted);
    cursor: help;
}

.normal-diff { font-weight: 700; }

.normal-warm { color: #d9480f; }

.normal-cold { color: #1c7ed6; }

:root[data-theme="dark"] .normal-warm { color: #ff8a50; }

:root[data-theme="dark"] .normal-cold { color: #6cb4ff; }

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .normal-warm { color: #ff8a50; }
    :root[data-theme="auto"] .normal-cold { color: #6cb4ff; }
}

.record-chip {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    cursor: help;
}

.record-chip-battu,
.record-chip-egale { background: #c92a2a; color: #fff; }

.record-chip-proche { background: #ffe8a3; color: #6b4e00; }

/* Fiche + photos du site côte à côte */
.station-info-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.station-photo { width: 240px; margin: 14px 0 0; }

.station-photo[hidden] { display: none; }

.station-photo-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--app-border);
}

.station-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.station-photo-nav,
.photo-viewer-nav,
.photo-viewer-close {
    position: absolute;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    line-height: 1;
    cursor: pointer;
}

.station-photo-nav {
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    font-size: 20px;
}

.station-photo-nav.prev,
.photo-viewer-nav.prev { left: 6px; }

.station-photo-nav.next,
.photo-viewer-nav.next { right: 6px; }

.station-photo-count,
.photo-viewer-count {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 11px;
}

.station-photo figcaption {
    margin-top: 4px;
    font-size: 11px;
    color: var(--app-text-muted);
}

@media (max-width: 560px) {
    .station-info-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .station-photo { width: 100%; max-width: 360px; }
}

/* Photo agrandie */
.photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .85);
    cursor: zoom-out;
}

.photo-viewer img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    cursor: default;
}

.photo-viewer-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 26px;
}

.photo-viewer-nav {
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    font-size: 30px;
}

.photo-viewer-nav.prev { left: 12px; }

.photo-viewer-nav.next { right: 12px; }

.photo-viewer-count { right: 50%; transform: translateX(50%); bottom: 14px; font-size: 13px; }

.station-map-card { display: flex; flex-direction: column; gap: 6px; }

#st-map {
    flex: 1 1 auto;
    min-height: 240px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: #dfe8ef;
}

/* Station affichée : contour marqué sur la carte */
.rt-label.rt-current,
.rt-dot.rt-current {
    outline: 3px solid var(--app-text);
    outline-offset: 1px;
}

.station-daybar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
}

.station-tabs .segmented-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

/* Très petits téléphones (320 px) : onglets sur toute la largeur, resserrés */
@media (max-width: 380px) {

    .station-tabs { display: flex; width: 100%; }

    .station-tabs .segmented-btn { flex: 1 1 auto; justify-content: center; gap: 4px; padding: 5px 6px; }

    .station-daynav select { font-size: 13px; padding-left: 8px; }

}

.station-daynav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.station-daynav select {
    width: auto;
    min-width: 240px;
    font-weight: 600;
}

/* Téléphone : liste des jours sur toute la largeur, jour précédent /
   suivant en dessous, de part et d'autre */
@media (max-width: 560px) {

    .station-daynav { display: grid; grid-template-columns: 1fr 1fr; }

    .station-daynav select { grid-column: 1 / -1; order: -1; width: 100%; min-width: 0; }

    .station-daynav .daynav-btn { padding: 8px 10px; }

    #st-prev { justify-self: start; }

    #st-next { justify-self: end; }

}

.daynav-btn {
    border: 1px solid var(--app-border);
    border-radius: 7px;
    background: var(--app-card);
    color: var(--blue);
    padding: 5px 10px;
    font-size: 13px;
    white-space: nowrap;
}

html[data-bs-theme="dark"] .daynav-btn { color: #60a5fa; }

.daynav-btn:disabled { color: var(--app-text-muted); opacity: .5; cursor: default; }

.daynav-btn:not(:disabled):hover { background: var(--app-hover); }

/* Icône des cumuls de pluie (sous la pluie de l'heure) */
.cumul-btn {
    border: 0;
    padding: 0 2px;
    background: none;
    color: #0284c7;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

html[data-bs-theme="dark"] .cumul-btn { color: #38bdf8; }

.cumul-btn:hover,
.cumul-btn:focus-visible { transform: scale(1.2); }

/* Dans le bloc "En direct" : icône plus grande */
.now-value .cumul-btn { font-size: 16px; }

/* Infobulle sombre des cumuls */
.cumul-tip {
    position: absolute;
    z-index: 3000;
    padding: 8px 12px;
    border-radius: 6px;
    background: #0b0f19;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    font-size: 12px;
    pointer-events: none;
}

.cumul-tip[hidden] { display: none; }

/* Petite pointe vers l'icône */
.cumul-tip::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #0b0f19;
}

.cumul-tip table { border-collapse: collapse; }

.cumul-tip th {
    font-weight: 700;
    text-align: right;
    padding: 1px 8px 1px 0;
}

.cumul-tip td {
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding: 1px 0;
}

/* Bloc "En direct" : dernière mesure */
.station-now[hidden] { display: none; }

.station-now-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.station-now-head .records-card-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Pastille "En direct" : verte (mesure récente) / rouge (plus d'1 h) */
.live-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #0ca30c;
    box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.5);
    animation: live-pulse 2s ease-out infinite;
    flex: 0 0 auto;
}

.live-dot.live-dot-old {
    background: #d03b3b;
    animation: none;
}

/* Station en différé : pastille orange fixe */
.live-dot.live-dot-delayed {
    background: #f59f00;
    animation: none;
}

/* Repère "différé" après le nom (liste des stations de l'accueil) */
.home-delayed {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(245, 159, 0, 0.18);
    color: #b76e00;
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
}

:root[data-theme="dark"] .home-delayed { color: #ffc34d; }

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .home-delayed { color: #ffc34d; }
}

@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(12, 163, 12, 0); }
    100% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0); }
}

/* Pas d'animation pour qui l'a désactivée dans son système */
@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
}

.station-now-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px 20px;
    margin-top: 12px;
    align-items: end;
}

.now-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.now-label { font-size: 12px; color: var(--app-text-muted); }

/* Grands chiffres : chiffres proportionnels */
.now-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 24px;
    font-weight: 700;
    color: var(--app-text);
    line-height: 1.15;
}

.now-value .rt-arrow { width: 16px; height: 16px; }

.now-item-big .now-value { font-size: 44px; }

.now-detail { font-size: 12px; color: var(--app-text-muted); }

/* Station qui ne transmet plus : valeurs grisées */
.station-now-old .now-value { color: var(--app-text-muted); }

.station-summary {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.station-scroll { max-height: 70vh; }

.station-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--app-card);
}

.station-table .st-time {
    position: sticky;
    left: 0;
    background: var(--app-card);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.st-main { display: block; font-weight: 600; }

.st-sub {
    display: block;
    font-size: 11px;
    color: var(--app-text-muted);
    white-space: nowrap;
}

.st-rain { color: #0284c7; }

/* Flèche de tendance de la pression (variation sur 3 h) */
.trend-btn {
    border: 0;
    padding: 0 4px;
    background: none;
    color: var(--app-text-muted);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
}

.trend-btn:hover,
.trend-btn:focus-visible { color: var(--app-text); }

/* Variation rapide (2 hPa ou plus en 3 h) : plus visible */
.trend-up-fast,
.trend-down-fast {
    font-size: 17px;
    color: var(--app-text);
}

/* Pastille soleil (rayonnement de l'heure) sous la température */
.sun-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    padding: 1px 7px 1px 3px;
    border: 1px solid #e5d3a1;
    border-radius: 999px;
    background: linear-gradient(#fffdf5, #f7eed4);
    color: #1e293b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.sun-pill:hover,
.sun-pill:focus-visible {
    border-color: #d97706;
}

html[data-bs-theme="dark"] .sun-pill {
    border-color: #6b5a2a;
    background: #2a2618;
    color: #fde68a;
}

/* Pas de soleil sur la mesure : pastille grise (rayonnement diffus, nuages) */
.sun-pill.sun-pill-cloudy {
    border-color: var(--app-border);
    background: transparent;
    color: var(--app-text);
}

.sun-pill-cloudy .sun-dot { background: #94a3b8; box-shadow: none; }

/* Petit soleil orange */
.sun-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fde047, #f59e0b 60%, #d97706);
    box-shadow: 0 0 3px rgba(245, 158, 11, 0.7);
    flex: 0 0 auto;
}

html[data-bs-theme="dark"] .st-rain { color: #38bdf8; }

.st-wind .st-main {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    width: 100%;
}

/* Heures pleines mises en avant */
.station-table tr.st-hour td,
.station-table tr.st-hour th {
    background: var(--app-hover);
}

.station-table tr.st-hour .st-time { font-weight: 700; }

#panel-graphiques[hidden],
#panel-tableau[hidden] { display: none; }


/* ============================================================
   PAGE OBSERVATIONS
   ============================================================ */

.obs-note { margin-top: 10px; }


/* ============================================================
   MENU DU THEME
   ============================================================ */

.theme-switcher {
    position: relative;
}


.theme-button {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.theme-button:hover {
    background: rgba(255, 255, 255, 0.20);
    transform: translateY(-1px);
}


.theme-menu {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    width: 180px;
    padding: 6px;

    background: var(--app-card);
    color: var(--app-text);

    border: 1px solid var(--app-border);
    border-radius: 10px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

    z-index: 5000;
}


.theme-menu[hidden] {
    display: none;
}


.theme-option {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;
    padding: 9px 10px;

    border: none;
    border-radius: 7px;

    background: transparent;
    color: var(--app-text);

    text-align: left;
    cursor: pointer;
}


.theme-option:hover {
    background: var(--app-hover);
}


.theme-option.active {
    background: rgba(59, 130, 246, 0.15);
    font-weight: 600;
}


/* ============================================================
   HR
   ============================================================ */

hr {
    border-color: var(--app-border) !important;
}

/* ============================================================
   PAGE CRUES (crues.html)
   ============================================================ */

.crues-page {
    max-width: 1500px;
    margin: 0 auto;
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* Bandeau de vigilance : couleur du niveau le plus élevé des Landes */
.crues-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--app-border);
    border-left: 8px solid #94a3b8;
    background: var(--app-card);
}

.crues-banner[data-niveau="1"] { border-left-color: #22c55e; }
.crues-banner[data-niveau="2"] { border-left-color: #facc15; background: rgba(250, 204, 21, 0.12); }
.crues-banner[data-niveau="3"] { border-left-color: #f97316; background: rgba(249, 115, 22, 0.14); }
.crues-banner[data-niveau="4"] { border-left-color: #dc2626; background: rgba(220, 38, 38, 0.16); }

.crues-banner-level { font-size: 18px; font-weight: 700; }

.crues-banner-text { flex: 1 1 320px; font-size: 14px; color: var(--app-text-muted); }

.crues-banner-link { font-size: 13px; white-space: nowrap; }

.crues-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: var(--gap);
    align-items: start;
}

.crues-map-card { display: flex; flex-direction: column; }

#crues-map {
    height: 640px;
    margin-top: 8px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
}

.crues-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--app-text-muted);
}

.crues-swatch {
    display: inline-block;
    width: 22px;
    height: 5px;
    margin-right: 4px;
    border-radius: 3px;
    vertical-align: middle;
    background: #94a3b8;
}

.crues-swatch[data-niveau="1"] { background: #22c55e; }
.crues-swatch[data-niveau="2"] { background: #facc15; }
.crues-swatch[data-niveau="3"] { background: #f97316; }
.crues-swatch[data-niveau="4"] { background: #dc2626; }

.crues-side { display: flex; flex-direction: column; gap: var(--gap); }

/* Colonnes de la grille : jamais plus larges que l'écran (tableau sur téléphone) */
.crues-layout > * { min-width: 0; }

/* Point d'une station (carte dézoomée) : couleur de la tendance */
.crues-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #64748b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.crues-dot.crues-up { background: #ef4444; }

.crues-dot.crues-down { background: #0ea5e9; }

.crues-dot.crues-hidden,
.crues-compact .crues-label:not(.crues-always) { display: none; }

#crues-map:not(.crues-compact) .crues-dot { display: none; }

.crues-chart-wrap { position: relative; height: 340px; margin-top: 10px; }

.crues-detail-links { margin: 8px 0 0; }

/* Liste des stations : toute la hauteur de la carte */
.crues-scroll { max-height: 640px !important; }

/* Station choisie (pleine largeur sous la carte) */
.crues-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.crues-detail-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.crues-detail-controls .home-toggle[hidden] { display: none; }

.crues-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 18px;
    margin-top: 14px;
}

@media (max-width: 800px) {
    .crues-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .crues-chart-wrap { height: 280px; }
}

.crues-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    align-content: start;
}

.crues-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
}

.crues-fact-label { font-size: 12px; color: var(--app-text-muted); }

.crues-fact strong { font-size: 20px; }

.crues-fact-meta { font-size: 11px; color: var(--app-text-muted); }

.crues-subtitle { font-size: 14px; font-weight: 700; margin: 0 0 6px; }

.crues-history-table td:first-child { white-space: normal; }

.crues-histo-hint { margin: -2px 0 6px; }

/* Case à cocher de chaque crue historique (règles générales des input neutralisées) */
.crues-histo-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--app-text);
    cursor: pointer;
}

.crues-histo-check input {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px;
    padding: 0;
    margin: 0;
    accent-color: #dc2626;
    cursor: pointer;
}

/* Étiquettes des stations : fond neutre, bordure selon la tendance */
.crues-label { background: #ffffff; color: #0f172a; }

.crues-label.crues-up { border-color: #ef4444; }

.crues-label.crues-down { border-color: #0ea5e9; }

.crues-up { color: #dc2626; }

.crues-down { color: #0284c7; }

html[data-bs-theme="dark"] .crues-up { color: #f87171; }

html[data-bs-theme="dark"] .crues-down { color: #38bdf8; }

.crues-label.crues-up,
.crues-label.crues-down { color: #0f172a; }

.crues-scroll { max-height: 440px; border: 0; }

.crues-table tbody tr { cursor: pointer; }

.crues-table .crues-row-current td { background: var(--app-hover); }

.crues-place { display: block; font-weight: 600; white-space: normal; }

.crues-river { display: block; font-size: 11px; color: var(--app-text-muted); white-space: normal; }

/* Tablette et téléphone : carte puis panneau en dessous */
@media (max-width: 1100px) {

    .crues-layout { grid-template-columns: 1fr; }

    #crues-map { height: 60vh; min-height: 360px; }

}

/* Accueil : pastille de vigilance crues (visible surtout en jaune ou plus) */
.home-crues {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    text-decoration: none;
    color: var(--app-text-muted);
    border: 1px solid var(--app-border);
}

.home-crues::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
}

.home-crues[data-niveau="2"] { color: #854d0e; background: #fef9c3; border-color: #facc15; font-weight: 600; }
.home-crues[data-niveau="2"]::before { background: #eab308; }
.home-crues[data-niveau="3"] { color: #7c2d12; background: #ffedd5; border-color: #f97316; font-weight: 600; }
.home-crues[data-niveau="3"]::before { background: #f97316; }
.home-crues[data-niveau="4"] { color: #ffffff; background: #dc2626; border-color: #dc2626; font-weight: 700; }
.home-crues[data-niveau="4"]::before { background: #ffffff; }

/* ============================================================
   VIGILANCE MÉTÉO : mini-carte de la barre du haut (vigilance-badge.js)
   ============================================================ */

.vig-mini {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 10px;
    padding: 3px 9px 3px 3px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    line-height: 1.15;
    background: rgba(255, 255, 255, 0.10);
}

.vig-mini:hover,
.vig-mini.active { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

.vig-mini img { display: block; width: 34px; height: 34px; }

.vig-mini strong { font-size: 12px; }

/* Couleur du niveau des Landes (bordure) */
.vig-mini[data-couleur="1"] { border-color: #31aa35; }
.vig-mini[data-couleur="2"] { border-color: #fff600; }
.vig-mini[data-couleur="3"] { border-color: #ffb82b; }
.vig-mini[data-couleur="4"] { border-color: #ff3b3b; box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.45); }

/* Téléphone : la carte seule, à côté du bouton du thème */
@media (max-width: 720px) {

    .vig-mini { order: 1; margin-right: 8px; padding: 2px; }

    .vig-mini-text { display: none; }

}

/* ============================================================
   PAGE VIGILANCE (vigilance.html)
   ============================================================ */

.vig-page {
    max-width: 1500px;
    margin: 0 auto;
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.vig-landes-header h1 { font-size: 22px; font-weight: 700; margin: 0; }

.vig-days {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap);
    margin-top: 10px;
}

/* Tuile d'un jour : bande de la couleur du niveau des Landes */
.vig-day {
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--app-border);
    border-left: 10px solid #31aa35;
    background: var(--app-card);
}

.vig-day[data-couleur="2"] { border-left-color: #fff600; }
.vig-day[data-couleur="3"] { border-left-color: #ffb82b; background: rgba(255, 184, 43, 0.12); }
.vig-day[data-couleur="4"] { border-left-color: #cc0000; background: rgba(204, 0, 0, 0.14); }

.vig-day-title { font-size: 13px; color: var(--app-text-muted); text-transform: capitalize; }

.vig-day-level { font-size: 22px; font-weight: 700; margin: 2px 0 8px; }

.vig-day-empty { margin: 0; color: var(--app-text-muted); }

.vig-phen-name { font-weight: 600; }

/* Pastille de couleur (horaires, bulletins) */
.vig-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    background: #31aa35;
    white-space: nowrap;
}

.vig-chip[data-couleur="1"] { background: #31aa35; color: #ffffff; }
.vig-chip[data-couleur="2"] { background: #fff600; }
.vig-chip[data-couleur="3"] { background: #ffb82b; }
.vig-chip[data-couleur="4"] { background: #cc0000; color: #ffffff; }

.vig-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
}

.vig-layout > * { min-width: 0; }

.vig-map-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vig-map-header .records-card-title { margin: 0; }


/* Noms des départements (vue Landes) : sans cadre, lisibles sur la couleur */
.leaflet-tooltip.vig-dep-label {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff;
}

.leaflet-tooltip.vig-dep-label::before { display: none; }

.vig-phen { flex-wrap: wrap; margin: 10px 0 8px; }

#vig-map {
    height: 560px;
    border-radius: 8px;
    border: 1px solid var(--app-border);
    background: var(--app-bg, #e2e8f0);
}

html[data-bs-theme="dark"] #vig-map { background: #0f172a; }

.vig-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--app-text-muted);
}

.vig-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    border-radius: 3px;
    vertical-align: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.vig-swatch[data-couleur="1"] { background: #31aa35; }
.vig-swatch[data-couleur="2"] { background: #fff600; }
.vig-swatch[data-couleur="3"] { background: #ffb82b; }
.vig-swatch[data-couleur="4"] { background: #cc0000; }


.vig-bulletins { display: flex; flex-direction: column; gap: var(--gap); }

.vig-section { padding: 10px 0; border-top: 1px solid var(--app-border); }

.vig-section:first-of-type { border-top: 0; }

.vig-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 6px;
}

.vig-section-time { font-size: 12px; color: var(--app-text-muted); }

.vig-paragraph { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }

.vig-popup { font-size: 13px; }

.vig-popup-level { margin: 2px 0 4px; }

/* Tablette et téléphone : carte puis bulletins */
@media (max-width: 1100px) {

    .vig-layout { grid-template-columns: 1fr; }

    #vig-map { height: 70vh; min-height: 380px; }

}

/*
 * Ordinateur : la page tient dans la fenêtre (pas de défilement pour
 * voir le bas de la carte). La carte prend la hauteur restante, les
 * bulletins défilent dans leur colonne s'ils sont longs.
 */
@media (min-width: 1101px) and (min-height: 640px) {

    .vig-page { height: calc(100vh - 52px); gap: 12px; padding-top: 12px; padding-bottom: 10px; }

    .vig-layout { flex: 1 1 auto; min-height: 0; align-items: stretch; gap: 12px; }

    .vig-map-card { display: flex; flex-direction: column; min-height: 0; }

    #vig-map { flex: 1 1 auto; height: auto; min-height: 200px; }

    .vig-days { margin-top: 6px; gap: 12px; }

    .vig-day { padding: 10px 16px; }

    .vig-day-level { margin-bottom: 4px; }

    .vig-legend { margin-top: 6px; }

    .vig-bulletins { min-height: 0; overflow-y: auto; }

    .vig-page > .records-source { flex: none; }

}
/* Frise de la journée (vigilance.js, timeline) */
.vig-timeline {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 6px 12px;
    padding-top: 8px;
    border-top: 1px solid var(--app-border);
}

.vig-timeline .vig-phen-name { padding-top: 1px; }

.vig-tl-scale { position: relative; height: 16px; margin: 0 12px 0 8px; }

.vig-tl-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--app-text-muted);
    white-space: nowrap;
}

.vig-tl-cell { margin: 0 12px 0 8px; }

.vig-tl-bar {
    position: relative;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--app-border);
}

.vig-tl-seg { position: absolute; top: 0; bottom: 0; }

.vig-tl-seg[data-couleur="1"] { background: #31aa35; }
.vig-tl-seg[data-couleur="2"] { background: #fff600; }
.vig-tl-seg[data-couleur="3"] { background: #ffb82b; }
.vig-tl-seg[data-couleur="4"] { background: #cc0000; }

/* Avant la mise à jour de la carte : hachures grises */
.vig-tl-past {
    background: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.35) 0 4px, transparent 4px 8px);
}

.vig-tl-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }

/* Téléphone : graduation toutes les 6 heures */
@media (max-width: 560px) {

    .vig-tl-minor { display: none; }

}
/* Rose des vents (onglet Graphiques de la page Observations) */
/* Même hauteur que les autres graphiques (deux par rangée) : rose calée en bas */
.wind-rose { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; }

.wind-rose svg { width: 100%; max-width: 212px; height: auto; font-family: inherit; }

.wind-rose-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    font-size: 12px;
    color: var(--app-text-muted);
}

.wind-rose-legend i {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 5px;
    border-radius: 2px;
    vertical-align: -1px;
}

/* ============================================================
   PAGE AUJOURD'HUI (bilan de la journée)
   ============================================================ */

.today-page { gap: var(--gap); }

.today-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.today-copy {
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: var(--app-card);
    color: var(--app-text);
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.today-copy:hover:not(:disabled) { background: var(--app-hover); }

.today-copy:disabled { opacity: .5; cursor: default; }

.today-records { margin: 0; }

.today-podiums {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.today-podium .chart-subtitle { margin: -4px 0 6px; }

.today-rank {
    list-style: none;
    counter-reset: rank;
    margin: 0;
    padding: 0;
}

.today-rank li {
    counter-increment: rank;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--app-border);
    font-size: 14px;
}

.today-rank li:last-child { border-bottom: 0; }

.today-rank li::before {
    content: counter(rank);
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--app-hover);
    color: var(--app-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 22px;
}

.today-rank li:first-child::before { background: #fcc419; color: #5c3c00; }

.today-rank-name { flex: 1; min-width: 0; }

.today-rank-time {
    display: block;
    font-size: 11px;
    color: var(--app-text-muted);
}

.today-rank-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.today-empty { color: var(--app-text-muted); font-style: italic; margin: 0; }

.today-table td:not(.today-td-name),
.today-table th.today-sortable {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.today-table th.today-sortable { cursor: pointer; user-select: none; }

.today-table th.today-sortable span { display: block; }

.today-table th.today-sorted { color: var(--app-text); }

.today-table .today-td-name {
    position: sticky;
    left: 0;
    background: var(--app-card);
}

.today-table tr.today-old td { color: var(--app-text-muted); }

.records-unit-small { font-size: 10px; font-weight: 400; }


/* ============================================================
   PAGE MARÉES
   ============================================================ */

.tide-page { gap: var(--gap); }

.tide-now-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.tide-now-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.tide-now-grid .record-value { font-size: 26px; }

@media (max-width: 560px) {
    .tide-now-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .tide-now-grid .record-value { font-size: 20px; }
    .tide-chart { height: 240px; }
}

.tide-coef-today { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.tide-coef-label { font-size: 12px; font-weight: 600; color: var(--app-text-muted); }

.tide-coef {
    display: inline-block;
    min-width: 34px;
    margin: 1px 3px 1px 0;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    cursor: help;
}

.tide-coef-today .tide-coef { font-size: 18px; padding: 4px 12px; }

.coef-ve   { background: #dc2626; }
.coef-high { background: #f97316; }
.coef-mid  { background: #0ea5e9; }
.coef-me   { background: #64748b; }

.tide-chart { height: 300px; }

.tide-table td { vertical-align: middle; }

.tide-table tr.tide-today td { background: var(--app-hover); }

.tide-times { white-space: normal !important; }

.tide-time {
    display: inline-block;
    min-width: 118px;
    margin: 2px 10px 2px 0;
    font-variant-numeric: tabular-nums;
}

.tide-time b {
    display: inline-block;
    width: 28px;
    font-size: 11px;
    padding: 1px 0;
    border-radius: 4px;
    text-align: center;
    color: #fff;
}

.tide-pm b { background: #0284c7; }

.tide-bm b { background: #a16207; }

.tide-time small { color: var(--app-text-muted); }

.swell-spots {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.swell-arrow {
    display: inline-block;
    font-size: 20px;
    color: var(--blue, #2563eb);
}

.swell-sea { margin-top: 6px; font-size: 13px; font-weight: 600; }


/* ============================================================
   PRÉVISIONS (page d'une station, forecast.js)
   ============================================================ */

.station-forecast[hidden] { display: none; }

.fc-days {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.fc-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-card);
    color: var(--app-text);
    font-size: 13px;
    cursor: pointer;
    min-width: 0;
}

.fc-day:hover { background: var(--app-hover); }

.fc-day-active {
    border-color: var(--blue, #2563eb);
    box-shadow: inset 0 0 0 1px var(--blue, #2563eb);
}

.fc-day-name { font-weight: 700; font-size: 14px; }

.fc-day-date { font-size: 11px; color: var(--app-text-muted); }

.fc-day-icon { font-size: 34px; line-height: 1.2; }

.fc-day-label {
    font-size: 12px;
    color: var(--app-text-muted);
    text-align: center;
    min-height: 1.3em;
}

.fc-day-temps { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

.fc-day-meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--app-text-muted);
    white-space: nowrap;
}

.fc-day-meta .rt-arrow,
.fc-hour-wind .rt-arrow { width: 11px; height: 11px; }

.fc-hours {
    margin-top: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Colonnes élargies pour occuper toute la largeur (défilement si trop d'heures) */
.fc-hours-strip { display: flex; width: 100%; min-width: max-content; }

.fc-hour {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 0 52px;
    padding: 6px 0;
    border-right: 1px solid var(--app-border);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.fc-hour > span { min-height: 20px; display: inline-flex; align-items: center; gap: 2px; }

.fc-hour-legend {
    position: sticky;
    left: 0;
    z-index: 1;
    flex: 0 0 62px;
    align-items: flex-start;
    padding-right: 6px;
    background: var(--app-card);
    color: var(--app-text-muted);
    font-size: 11px;
}

.fc-hour-time { color: var(--app-text-muted); font-size: 12px; }

/* Passage au jour suivant (minuit) : trait plus marqué, nom du jour */
.fc-hour-newday { border-left: 2px solid var(--blue, #2563eb); }

.fc-hour-newday .fc-hour-time { color: var(--app-text); font-weight: 700; }

.fc-hour-icon { font-size: 20px; min-height: 26px !important; }

.fc-hour-temp { font-weight: 700; }

.fc-hour-rain { color: #1c7ed6; font-size: 12px; }

.fc-hour-dry { color: var(--app-text-muted); }

.fc-hour-wind, .fc-hour-gust { font-size: 12px; }

.fc-hour-gust { color: var(--app-text-muted); }

.fc-note { margin: 10px 0 0; }

:root[data-theme="dark"] .fc-hour-rain:not(.fc-hour-dry) { color: #6cb4ff; }

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .fc-hour-rain:not(.fc-hour-dry) { color: #6cb4ff; }
}

@media (max-width: 560px) {
    .fc-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   PAGE BILAN DU MOIS (bilan.js)
   ============================================================ */

.bilan-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bilan-actions .station-daynav { margin: 0; }

.bilan-actions .daynav-btn:disabled { opacity: .4; cursor: default; }

/* ============================================================
   PAGE PRÉVISIONS (previsions.js)
   ============================================================ */

.pv-search-box {
    position: relative;
    width: min(340px, 100%);
}

.pv-search {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--app-input-border);
    border-radius: 8px;
    background: var(--app-input);
    color: var(--app-input-text);
    font-size: 15px;
}

.pv-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-text-muted);
    pointer-events: none;
}

.pv-suggest {
    position: absolute;
    z-index: 1100;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: var(--app-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.pv-suggest[hidden] { display: none; }

.pv-suggest-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--app-text);
    cursor: pointer;
}

.pv-suggest-item.active,
.pv-suggest-item:hover { background: var(--app-hover); }

.pv-suggest-cp { color: var(--app-text-muted); font-size: 13px; }

/* Avertissement : prévisions automatiques */
.pv-warning {
    padding: 12px 16px;
    border: 1px solid rgba(245, 159, 0, .55);
    border-left-width: 5px;
    border-radius: var(--radius, 10px);
    background: rgba(245, 159, 0, .12);
    color: var(--app-text);
    font-size: 14px;
    line-height: 1.5;
}

.pv-warning > strong { margin-right: 4px; }

.pv-map-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.pv-map-head .chart-subtitle { margin: 2px 0 0; }

.pv-mapdays { margin: 10px 0; flex-wrap: wrap; }

.pv-map {
    height: 620px;
    border-radius: 8px;
}

@media (max-width: 560px) {
    .pv-map { height: 520px; }
}

/* Repère d'une ville : icône, min / max, nom */
.pv-marker-wrap { background: none; border: 0; }

.pv-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
    padding: 2px 6px 3px;
    border: 1px solid rgba(15, 23, 42, .25);
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    color: #0f172a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
}

.pv-marker-current {
    border: 2px solid #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .3);
}

.pv-marker-icon { font-size: 20px; }

.pv-marker-temps { font-size: 13px; font-weight: 700; }

.pv-marker-temps .normal-cold { color: #1c7ed6; }

.pv-marker-temps .normal-warm { color: #d9480f; }

.pv-marker-name { font-size: 10px; color: #475569; }

/* Téléphone : repères compacts (nom de la ville au toucher, title) */
@media (max-width: 560px) {
    .pv-marker { padding: 1px 4px 2px; border-radius: 6px; }
    .pv-marker-icon { font-size: 15px; }
    .pv-marker-temps { font-size: 11px; }
    .pv-marker-name { display: none; }
    .pv-map { height: 460px; }
}

/* Lien vers les prévisions expertisées (Facebook) */
.pv-warning-fb { display: block; margin-top: 6px; font-weight: 600; }

.pv-warning-fb a { white-space: nowrap; }


/* Crues historiques : date, date à vérifier, notes */
.crues-history-table .crues-histo-date { white-space: nowrap; }

.crues-histo-warn { color: #b76e00; cursor: help; }

:root[data-theme="dark"] .crues-histo-warn { color: #ffc34d; }

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .crues-histo-warn { color: #ffc34d; }
}

.crues-histo-note { margin: 6px 0 0; }


/* ============================================================
   BANDEAU DE VIGILANCE (toutes les pages, vigilance-badge.js)
   ============================================================ */

.vig-banner-wrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 12px var(--gap) 0;
}

.vig-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid var(--app-border);
    border-left: 6px solid #22c55e;
    border-radius: 10px;
    background: var(--app-card);
    color: var(--app-text);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
}

.vig-banner[hidden] { display: none; }

.vig-banner:hover { color: var(--app-text); background: var(--app-hover); }

.vig-banner[data-couleur="2"] { border-left-color: #facc15; background: rgba(250, 204, 21, .16); }
.vig-banner[data-couleur="3"] { border-left-color: #f97316; background: rgba(249, 115, 22, .18); }
.vig-banner[data-couleur="4"] { border-left-color: #dc2626; background: rgba(220, 38, 38, .2); }

/* Pas de vigilance : bandeau discret */
.vig-banner[data-couleur="1"] { padding: 6px 14px; font-size: 13px; }

.vig-banner[data-couleur="1"] strong { font-weight: 600; }

.vig-banner-icon { flex: 0 0 auto; font-size: 18px; }

.vig-banner[data-couleur="1"] .vig-banner-icon { font-size: 14px; }

.vig-banner-text { flex: 1 1 auto; min-width: 0; }

.vig-banner-more {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--blue, #2563eb);
    white-space: nowrap;
}

:root[data-theme="dark"] .vig-banner-more { color: #6cb4ff; }

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .vig-banner-more { color: #6cb4ff; }
}

@media (max-width: 560px) {
    .vig-banner { flex-wrap: wrap; }
    .vig-banner-text { flex-basis: calc(100% - 40px); }
    .vig-banner-more { margin-left: 28px; }
}

/* Accueil tenant dans la fenêtre : hauteur du bandeau retirée */
@media (min-width: 1401px) and (min-height: 700px) {
    body.has-vig-banner .home-layout { height: calc(100vh - 52px - 40px - 52px); }
}

/* ============================================================
   PAGE PRÉVISIONS : RUBRIQUE PLAGES (plages.js)
   ============================================================ */

.pv-mode { margin-bottom: 10px; }

.pl-section[hidden] { display: none; }

/* Choix de la plage (du nord au sud) */
.pl-beaches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
}

.pl-chip {
    padding: 5px 11px;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-card);
    color: var(--app-text);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.pl-chip:hover { background: var(--app-hover); color: var(--app-text); }

.pl-chip.active {
    border-color: #0284c7;
    background: #0284c7;
    color: #fff;
    font-weight: 600;
}

/* Cartes des jours */
.pl-days {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 900px) {
    .pl-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .pl-days { grid-template-columns: minmax(0, 1fr); }
}

.pl-day {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-card);
    color: var(--app-text);
    font-size: 13px;
    cursor: pointer;
    min-width: 0;
}

.pl-day:hover { background: var(--app-hover); }

.pl-day-active {
    border-color: #0284c7;
    box-shadow: inset 0 0 0 1px #0284c7;
}

.pl-day-head { display: flex; justify-content: space-between; align-items: center; }

.pl-day-name { font-weight: 700; font-size: 15px; }

.pl-day-icon { font-size: 30px; line-height: 1; }

.pl-day-label { color: var(--app-text-muted); font-size: 12px; margin-top: -4px; }

.pl-day-temps {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 2px 0 4px;
}

.pl-air { font-size: 26px; font-weight: 800; color: #d9480f; }

.pl-water { font-size: 15px; font-weight: 700; color: #0284c7; }

:root[data-theme="dark"] .pl-air { color: #ff8a50; }
:root[data-theme="dark"] .pl-water { color: #38bdf8; }

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .pl-air { color: #ff8a50; }
    :root[data-theme="auto"] .pl-water { color: #38bdf8; }
}

.pl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    border-top: 1px solid var(--app-border);
}

.pl-row-label { color: var(--app-text-muted); flex: 0 0 auto; }

.pl-row-value {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 3px 6px;
    text-align: right;
    font-weight: 600;
}

.pl-row-value .rt-arrow { width: 11px; height: 11px; }

.pl-alert {
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(245, 159, 0, .16);
    font-size: 12px;
    font-weight: 600;
}

/* Indice UV : couleurs de l'OMS */
.pl-uv { padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }

.pl-uv-1 { background: #3d9a2c; }
.pl-uv-2 { background: #e0b100; color: #1f1a00; }
.pl-uv-3 { background: #ea6a0a; }
.pl-uv-4 { background: #d1263b; }
.pl-uv-5 { background: #7b3fb5; }

/* Marées et coefficients */
.pl-tide { white-space: nowrap; font-weight: 500; }

.pl-tide b {
    display: inline-block;
    min-width: 24px;
    padding: 0 3px;
    border-radius: 4px;
    font-size: 10px;
    text-align: center;
    color: #fff;
}

.pl-tide-pm b { background: #0284c7; }
.pl-tide-bm b { background: #a16207; }

.pl-coef {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--app-hover);
    font-size: 12px;
}

.pl-coef-vive { background: #0284c7; color: #fff; }
.pl-coef-morte { background: #a1a1aa; color: #fff; }

/* Détail heure par heure : lignes UV, vagues, marée */
.pl-section .fc-hours { margin-top: 14px; }

.pl-hour-uv, .pl-hour-wave, .pl-hour-tide { font-size: 12px; }

.fc-hour .pl-hour-uv[class*="pl-uv-"] { padding: 0 6px; border-radius: 999px; color: #fff; font-weight: 700; }

.fc-hour .pl-hour-uv.pl-uv-2 { color: #1f1a00; }

.pl-hour-wave { color: #0284c7; font-weight: 600; }

.pl-hour-tide { font-size: 10px; font-weight: 700; white-space: nowrap; }

.fc-hour .pl-hour-tide.pl-tide-pm { color: #0284c7; }
.fc-hour .pl-hour-tide.pl-tide-bm { color: #a16207; }

.fc-hour-legend .pl-hour-uv,
.fc-hour-legend .pl-hour-wave,
.fc-hour-legend .pl-hour-tide { color: var(--app-text-muted); font-weight: 400; font-size: 11px; }

/* Marées : horaires espacés */
.pl-tides { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px 10px; }

/* Téléphone : plages sur une ligne qui défile */
@media (max-width: 560px) {
    .pl-beaches {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-left: -4px;
        margin-right: -4px;
        padding: 2px 4px 6px;
        scrollbar-width: thin;
    }
}

/* Bandeau vers plages-landes.info et fiche de la plage */
.pl-partner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 0;
    padding: 10px 14px;
    border: 1px solid rgba(2, 132, 199, .45);
    border-left: 5px solid #0284c7;
    border-radius: 10px;
    background: rgba(2, 132, 199, .1);
    color: var(--app-text);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
}

.pl-partner:hover { background: rgba(2, 132, 199, .18); color: var(--app-text); }

.pl-partner-icon { font-size: 26px; flex: 0 0 auto; }

.pl-partner-text { flex: 1 1 auto; min-width: 0; }

.pl-partner-text strong { display: block; font-size: 14px; }

.pl-partner-more {
    flex: 0 0 auto;
    font-weight: 700;
    color: #0284c7;
    white-space: nowrap;
}

:root[data-theme="dark"] .pl-partner-more { color: #38bdf8; }

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .pl-partner-more { color: #38bdf8; }
}

@media (max-width: 560px) {
    .pl-partner { flex-wrap: wrap; }
    .pl-partner-text { flex-basis: calc(100% - 40px); }
    .pl-partner-more { margin-left: 38px; }
}

.pl-fiche { margin: -4px 0 10px; font-size: 13px; font-weight: 600; }

.pl-fiche[hidden] { display: none; }

/* Ligne Baïnes du détail heure par heure */
.pl-hour-baine { font-size: 13px; }

.fc-hour-legend .pl-hour-baine { color: var(--app-text-muted); font-size: 11px; }


/* En-tête de la page Prévisions : bascule, titre et recherche centrés */
.pv-head {
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.pv-head .pv-mode { display: inline-flex; width: fit-content; margin: 0 auto 10px; }

.pv-head .pv-search-box { margin: 0 auto; text-align: left; }