/* ═══════════════════════════════════════════════════════════════════════
   Tactiview - outil d'analyse post-navigation
   Refonte visuelle alignée sur les design tokens du site SailCapture.
   Structure HTML/JS conservée : on ne touche qu'au rendu visuel.
   Palette : papier (#F0EFED) / blanc / accent rouge #D42B2B / anthracite
   Typographie : Space Grotesk (UI) + DM Mono (data)
═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────── Design tokens (alignés sur le site) ───────────────────── */
:root {
    /* Surfaces */
    --bg:           #F0EFED;       /* fond général (paper) */
    --surface:      #FFFFFF;       /* cartes / panneaux */
    --surface-2:    #FAF9F7;       /* alternative très légère */

    /* Texte */
    --text:         #1C1C1C;
    --text-2:       #6B6560;
    --text-3:       #9A938C;

    /* Bordures */
    --border:       #E0DDD8;
    --border-2:     #ECEAE6;

    /* Accents */
    --anthracite:   #2E2C2A;
    --accent:       #D42B2B;
    --accent-soft:  rgba(212, 43, 43, 0.08);
    --accent-dim:   rgba(212, 43, 43, 0.55);
    --ok:           #1E8A4B;

    /* Tracés */
    --trace-1:      #1F5FA6;       /* bleu - cohérent avec le schéma Tactiview du site */
    --trace-2:      #D42B2B;       /* rouge accent */
    --trace-3:      #C9762B;       /* sand - un orangé chaud (3e couleur de la palette site) */
    --trace-4:      green;

    /* Rayons */
    --radius:       4px;
    --radius-sm:    2px;

    /* Typographie */
    --font-ui:      'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
    --font-mono:    'DM Mono', ui-monospace, Menlo, Consolas, monospace;

    /* Dimensions layout */
    --sidebar-w:    248px;
}

/* ───────────────────── Reset ───────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text);
    background: var(--bg);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT GLOBAL - Sidebar fixe + Main scrollable
═══════════════════════════════════════════════════════════════════════ */

body {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: 100vh;
}


/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════════════ */

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── Logo ─────────────────────────────────────────────────────────── */
.sidebar__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 16px;
    border-bottom: 1px solid var(--border);
}

.logo-icon {
    height: 26px;
    width: auto;
    flex-shrink: 0;
    display: block;
}

.logo-text {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    color: var(--anthracite);
    letter-spacing: 0.02em;
}

.logo-accent {
    color: var(--accent);
}

/* ── Séparateur ───────────────────────────────────────────────────── */
.sidebar__sep {
    height: 1px;
    background: var(--border);
    margin: 6px 12px;
}

/* ── Titre de section (eyebrow style site) ───────────────────────── */
.sidebar__section-title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-2);
    padding: 14px 16px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* tiret accent comme l'eyebrow du site */
.sidebar__section-title::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--accent);
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   BLOCS DE TRACE (chargement fichier)
═══════════════════════════════════════════════════════════════════════ */

.trace-block {
    padding: 10px 12px;
    margin: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.trace-block:hover {
    background: var(--surface-2);
    border-color: var(--border);
}

.trace-block__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.trace-block__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.trace-block__dot--1 { background: var(--trace-1); }
.trace-block__dot--2 { background: var(--trace-2); }
.trace-block__dot--3 { background: var(--trace-3); }
.trace-block__dot--4 { background: var(--trace-4); }

.trace-block__name {
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    flex: 1;
}

.trace-block__del {
    background: transparent;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 12px;
    padding: 2px;
    line-height: 1;
    transition: color 0.12s ease;
}
.trace-block__del:hover { color: var(--accent); }

/* Bouton de chargement - style "ghost button" du site */
.trace-block__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.trace-block__btn:hover {
    border-color: var(--anthracite);
    background: var(--bg);
    color: var(--anthracite);
}
.trace-block__btn input[type="file"] { display: none; }

/* Nom de fichier - monospace, ellipse */
.trace-block__file {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   PLAGE ANALYSÉE D'UNE TRACE
   ---------------------------------------------------------------------------
   Sert à écarter les phases au moteur, souvent présentes en début et en fin de
   sortie. Volontairement discret : trois petits boutons et une ligne de texte,
   aucun curseur à viser. */

.trace-plage {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
}

.trace-plage__texte {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-2);
    padding: 0 2px 4px;
    letter-spacing: 0.02em;
}

.trace-plage__boutons {
    display: flex;
    gap: 4px;
}

.trace-plage__boutons button {
    flex: 1;
    font: inherit;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 3px 0;
    cursor: pointer;
}

.trace-plage__boutons button:hover {
    color: var(--text);
    border-color: var(--text-3);
}

/* La remise à zéro est plus étroite : c'est une flèche, pas un mot. */
.trace-plage__reset {
    flex: 0 0 26px !important;
    font-size: 12px !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION SIDEBAR (entre les vues)
═══════════════════════════════════════════════════════════════════════ */

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-2);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 500;
    transition: background-color 0.12s ease, color 0.12s ease;
    position: relative;
    cursor: pointer;
    border-left: 2px solid transparent;
    letter-spacing: 0.01em;
}

.nav-item:hover:not(.nav-item--soon) {
    background: var(--surface-2);
    color: var(--text);
}

.nav-item--active {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    font-weight: 600;
    border-left-color: var(--accent);
}

.nav-item--soon {
    opacity: 0.55;
    cursor: default;
}

.nav-item__icon {
    font-family: var(--font-mono);
    font-size: 13px;
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    color: var(--text-3);
}

.nav-item--active .nav-item__icon { color: var(--accent); }

.nav-item__badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--border-2);
    color: var(--text-3);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    margin-left: auto;
}


/* ═══════════════════════════════════════════════════════════════════════
   PLAYBAR (lecteur temporel)
═══════════════════════════════════════════════════════════════════════ */

.playbar {
    padding: 6px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.playbar__top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.playbar__play {
    width: 32px;
    height: 32px;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.12s ease;
}
.playbar__play:hover:not(:disabled) { opacity: 0.88; }
.playbar__play:disabled {
    background: var(--border);
    border-color: var(--border);
    color: var(--text-3);
    cursor: default;
}

.playbar__time {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.04em;
}

/* Slider de temps */
.playbar__slider {
    width: 100%;
    accent-color: var(--accent);
    height: 4px;
    cursor: pointer;
}
.playbar__slider:disabled { opacity: 0.3; cursor: default; }

/* Boutons de vitesse - style "segmented" du site */
.playbar__speeds {
    display: flex;
    gap: 4px;
}

.speed-btn {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border);
    padding: 6px 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    text-align: center;
    letter-spacing: 0.04em;
}
.speed-btn:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--anthracite);
}
.speed-btn.active {
    background: var(--anthracite);
    color: #fff;
    border-color: var(--anthracite);
}


/* ── Légende en bas de sidebar ────────────────────────────────────── */
.sidebar__legend {
    margin-top: auto;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    background: var(--surface-2);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-2);
    font-weight: 500;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.legend-dot--1 { background: var(--trace-1); }
.legend-dot--2 { background: var(--trace-2); }
.legend-dot--3 { background: var(--trace-3); }
.legend-dot--4 { background: var(--trace-4); }


/* ═══════════════════════════════════════════════════════════════════════
   BOUTONS DE MODE (synchronisation des temps)
═══════════════════════════════════════════════════════════════════════ */

.mode-group {
    display: flex;
    gap: 4px;
    padding: 0 12px 12px;
}

/* .mode-btn  : boutons d'un choix EXCLUSIF (un seul actif à la fois),
                comme « Temps relatif » / « Temps réel ».
   .bascule-btn : boutons qui s'allument et s'éteignent CHACUN DE LEUR CÔTÉ,
                comme les deux tiges de vent.

   Les deux se ressemblent, mais ne doivent surtout pas partager la même
   classe : un gestionnaire de clic global vise tous les .mode-btn, éteint les
   autres et lit leur attribut data-mode. Un bouton bascule qui porterait cette
   classe déréglerait donc le mode de temps. */
.mode-btn,
.bascule-btn {
    flex: 1;
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 500;
    text-align: center;
    padding: 7px 4px;
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    letter-spacing: 0.01em;
}

.mode-btn:hover,
.bascule-btn:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--anthracite);
}

.mode-btn.active,
.bascule-btn.active {
    background: var(--anthracite);
    color: #fff;
    border-color: var(--anthracite);
}


/* ═══════════════════════════════════════════════════════════════════════
   MAIN - zone de contenu scrollable
═══════════════════════════════════════════════════════════════════════ */

.main {
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: var(--bg);
}

.main::-webkit-scrollbar { width: 6px; }
.main::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.main::-webkit-scrollbar-thumb:hover { background: var(--text-3); }


/* ═══════════════════════════════════════════════════════════════════════
   PANELS (carte, graphiques, placeholders)
═══════════════════════════════════════════════════════════════════════ */

.panel {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* En-tête du panel - codes mono + titre comme une fiche datasheet */
.panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}

.panel__title-group {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.panel__title {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--anthracite);
    letter-spacing: -0.005em;
}

.panel__sub {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.panel__legend {
    display: flex;
    gap: 18px;
}

.panel__legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-ui);
    font-size: 11.5px;
    color: var(--text-2);
    font-weight: 500;
}

.panel__legend-dot {
    width: 14px;
    height: 2.5px;
    border-radius: 1px;
}
.panel__legend-dot--1 { background: var(--trace-1); }
.panel__legend-dot--2 { background: var(--trace-2); }
.panel__legend-dot--3 { background: var(--trace-3); }
.panel__legend-dot--4 { background: var(--trace-4); }

/* Badge "Bientôt" - mono uppercase */
.panel__badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-dim);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

/* ── Carte ────────────────────────────────────────────────────────── */
.panel__map-body {
    height: 480px;
    flex-shrink: 0;
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
}

/* -----------------------------------------------------------------------
   Barre de déplacement sous les graphiques

   Elle ne déplace pas le temps : elle fait défiler la VUE du graphique
   quand celui-ci est zoomé, à niveau de zoom constant. Elle est désactivée
   tant que tout le graphique tient à l'écran.
   ----------------------------------------------------------------------- */
.graph-scroll {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: calc(100% - 16px);
    margin: 6px 8px 2px;
    height: 10px;
    background: transparent;
    cursor: grab;
}

.graph-scroll:active {
    cursor: grabbing;
}

.graph-scroll:disabled {
    cursor: default;
    opacity: 0.35;
}

/* Rail */
.graph-scroll::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 5px;
    background: var(--border);
}
.graph-scroll::-moz-range-track {
    height: 10px;
    border-radius: 5px;
    background: var(--border);
}

/* Curseur : volontairement large, il se lit comme une barre de défilement */
.graph-scroll::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 72px;
    height: 10px;
    border: none;
    border-radius: 5px;
    background: var(--text-3);
}
.graph-scroll::-moz-range-thumb {
    width: 72px;
    height: 10px;
    border: none;
    border-radius: 5px;
    background: var(--text-3);
}

.graph-scroll:hover:not(:disabled)::-webkit-slider-thumb {
    background: var(--text-2);
}
.graph-scroll:hover:not(:disabled)::-moz-range-thumb {
    background: var(--text-2);
}

/* Les flèches des bateaux sont cliquables : la carte se verrouille dessus. */
#map .leaflet-marker-icon {
    cursor: pointer;
}

/* Le dessin d'un bateau est un grand carré, car il doit contenir les deux
   tiges de vent qui tournent tout autour. Sans précaution, ce carré capterait
   les clics sur une large zone vide et empêcherait de glisser la carte.

   On rend donc tout le dessin transparent aux clics, sauf la coque du bateau
   elle-même — la seule partie sur laquelle cliquer doit verrouiller la caméra.

   Le préfixe #map est indispensable. Cette feuille est chargée AVANT celle de
   Leaflet, qui pose de son côté « .leaflet-marker-icon.leaflet-interactive
   { pointer-events: auto } ». Sans ce préfixe, la règle de Leaflet l'emporte
   et tout le carré redevient cliquable. */
#map .marqueur-bateau {
    pointer-events: none;
}

#map .marqueur-bateau .coque-du-bateau {
    pointer-events: auto;
    cursor: pointer;
}

/* Suivi caméra actif : un liseré rappelle que la carte est verrouillée
   sur un bateau. Seul le zoom molette conserve ce mode. */
#map.suivi-actif {
    box-shadow: inset 0 0 0 2px var(--accent, #C9A800);
}

/* Poignée de redimensionnement carte */
.map-resize-handle {
    height: 10px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.12s ease;
}
.map-resize-handle:hover { background: var(--bg); }

.map-resize-handle::after {
    content: '··· ···';
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 2px;
    line-height: 1;
}

/* -----------------------------------------------------------------------
   Bouton « détacher la carte »

   Posé en bas à gauche de la carte, au-dessus de l'affichage des
   coordonnées. Voir JS/fenetre-carte.js.
   ----------------------------------------------------------------------- */
.controle-fenetre-carte {
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-2);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.controle-fenetre-carte:hover {
    background: var(--bg);
    color: var(--text);
}

/* Les téléphones et tablettes n'ont pas de fenêtres séparées : le bouton y
   ouvrirait un onglet dont on ne pourrait rien faire. On le masque donc. */
@media (max-width: 767px) {
    .controle-fenetre-carte { display: none; }
}

/* Lien du menu vers un panneau actuellement masqué (la carte est détachée). */
.nav-item--indisponible {
    opacity: 0.35;
    pointer-events: none;
}

/* ── Corps des graphiques ─────────────────────────────────────────── */
.panel__graph-body {
    height: 340px;
    padding: 18px 22px 14px;
    flex-shrink: 0;
    background: var(--surface);
}

.panel__graph-body canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ---------------------------------------------------------------------------
   POLAIRE DE VITESSE
   ---------------------------------------------------------------------------
   Le radar est un cercle : il lui faut de la hauteur, et une largeur limitée
   pour ne pas s'étirer en ovale sur un grand écran. */

/* L'en-tête de la polaire porte deux menus en plus du titre. Quand le panneau
   est étroit (affichage en colonnes), les deux se chevauchaient : on autorise
   donc le passage à la ligne, et le titre garde la priorité sur la largeur. */
#vue-polaire .panel__header {
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: flex-end;
}

#vue-polaire .panel__title-group {
    flex-wrap: wrap;
    row-gap: 2px;
}

.polaire-reglages {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}

.polaire-reglage {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.polaire-reglage select {
    font: inherit;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 8px;
    cursor: pointer;
}

.polaire-reglage select:disabled {
    color: var(--text-3);
    cursor: not-allowed;
}

/* Les cases à cocher des navigations et les boutons du mode. */
.polaire-choix {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-bottom: 3px;
}

.polaire-puce {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.polaire-puce input {
    margin: 0;
    cursor: pointer;
    accent-color: var(--anthracite);
}

/* Navigation sans fichier chargé : visible pour montrer qu'elle existe, mais
   clairement inutilisable. */
.polaire-puce--vide {
    color: var(--text-3);
    cursor: not-allowed;
}

.polaire-puce--vide input {
    cursor: not-allowed;
}

/* Rappel de la couleur de la navigation, la même que sur la carte. */
.polaire-puce__pastille {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.polaire-puce--vide .polaire-puce__pastille {
    opacity: 0.3;
}

.polaire-resume {
    padding: 12px 22px 18px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-2);
    border-top: 1px solid var(--border-2);
    background: var(--surface);
}

@media (max-width: 767px) {
    .polaire-reglages { gap: 10px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   GRILLE 2 COLONNES - graphiques + placeholders
═══════════════════════════════════════════════════════════════════════ */

.panels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--border);
}

.panels-grid .panel {
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.panels-grid .panel:nth-child(even) {
    border-right: none;
}

.panel--full {
    grid-column: 1 / -1;
    border-right: none !important;
}

.panel--placeholder {
    opacity: 0.85;
}

.panel__placeholder-body {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 24px 32px;
    background: var(--surface-2);
}

.placeholder__icon {
    font-family: var(--font-mono);
    font-size: 30px;
    color: var(--text-3);
    flex-shrink: 0;
    opacity: 0.6;
}

.placeholder__text {
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.6;
    max-width: 480px;
}


/* ═══════════════════════════════════════════════════════════════════════
   OVERRIDES LEAFLET - pour rester cohérent avec le site
═══════════════════════════════════════════════════════════════════════ */

.leaflet-control-attribution {
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.02em !important;
}

.leaflet-control-mouseposition {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    background: rgba(255,255,255,0.92) !important;
    color: var(--text) !important;
    padding: 3px 8px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    letter-spacing: 0.04em !important;
}

.leaflet-control-zoom a {
    font-family: var(--font-ui) !important;
    color: var(--text) !important;
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
.leaflet-control-zoom a:hover {
    background: var(--bg) !important;
    color: var(--accent) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE - tablettes & téléphones
   Tactiview a une sidebar fixe à 248px ; en dessous de ~900px, on bascule
   en layout vertical : sidebar en haut (compacte), main en dessous.
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    :root { --sidebar-w: 220px; }
    .panel__map-body { height: 380px; }
    .panel__graph-body { height: 280px; }
}

@media (max-width: 767px) {
    html, body { overflow: auto; }

    body {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        grid-template-rows: auto auto;
    }

    .sidebar {
        height: auto;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        overflow: visible;
    }

    .main {
        height: auto;
        overflow: visible;
    }

    /* Grille des panels stack en mobile */
    .panels-grid {
        grid-template-columns: 1fr;
    }
    .panels-grid .panel,
    .panels-grid .panel:nth-child(even) {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    /* Carte plus courte sur mobile */
    .panel__map-body { height: 320px; }
    .panel__graph-body { height: 240px; padding: 12px 14px 10px; }

    /* Panel header en colonne */
    .panel__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 14px;
    }
}


/* ---------------------------------------------------------------------------
   HAUTEUR DU CERCLE DE LA POLAIRE
   ---------------------------------------------------------------------------
   Ces règles sont volontairement placées en DERNIER dans le fichier.

   .panel__graph-body--polaire et .panel__graph-body ont la même spécificité
   (une seule classe chacune) : à égalité, c'est la règle écrite le plus bas qui
   s'applique. Les media queries plus haut ramènent .panel__graph-body à 280 px
   puis 240 px ; placées avant elles, les hauteurs de la polaire étaient donc
   écrasées et le cercle se retrouvait aplati.

   Un radar a besoin de hauteur : contrairement à une courbe, il occupe un
   cercle. La largeur est bornée pour qu'il ne s'étire pas en ovale sur un grand
   écran. */

.panel__graph-body--polaire {
    height: 620px;
    display: flex;
    justify-content: center;
}

.panel__graph-body--polaire canvas {
    max-width: 620px;
}

@media (max-width: 1023px) {
    .panel__graph-body--polaire { height: 520px; }
}

@media (max-width: 767px) {
    .panel__graph-body--polaire {
        height: 400px;
        padding: 12px 14px 10px;
    }
}