/* ═══════════════════════════════════════════════════════════════════════
   NewsBoard — coquille et mise en page responsive
   ═══════════════════════════════════════════════════════════════════════

   Chargée APRÈS wire-monitor.css, dont elle reprend la main sur la
   disposition seulement. Les couleurs, la typographie et le rendu des
   composants restent où ils sont ; ce fichier ne traite que : la grille de
   l'application, les seuils, la forme du fil et la barre d'état.

   Pourquoi une feuille à part : l'existante fait 116 Ko et seize seuils
   accumulés, dont un unique « ≤1100 px » qui servait à la fois de
   téléphone, de tablette et de portable. La démêler en place se serait
   payé en régressions invisibles.

   Les seuils sont dictés par le CONTENU, pas par des noms d'appareils :
     < 640   le titre ne tient plus sur une ligne avec des colonnes
     < 1024  trois colonnes ne laissent plus assez de place au titre
     < 1400  le volet d'alertes coûte plus qu'il ne rapporte
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --nb-rail: 224px;
    --nb-alerts: 320px;
    --nb-dock-h: 3.6rem;
    --nb-gap: 1px;
}

html, body { margin: 0; padding: 0; }

/* ── Coquille ─────────────────────────────────────────────────────────── */

.wire-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* En-tête, tendances et bandeau urgent ne défilent jamais : ce sont des
   repères fixes. Seul le fil défile. */
.wire-app > .wire-topbar,
.wire-app > .wire-trends,
.wire-app > .wire-topline,
.wire-app > .wire-stale-banner { flex: 0 0 auto; }

.wire-app > .wire-views { flex: 1 1 auto; min-height: 0; display: flex; }
.wire-view { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; }

/* ── Bandeau urgent : ne jamais tronquer les actions ──────────────────── */

.wire-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;            /* les boutons passent dessous plutôt que
                                   d'être coupés, comme ils l'étaient */
    gap: 0.4rem 0.75rem;
    padding: 0.45rem 0.9rem;
    min-height: 0;
}
.wire-topline-text { flex: 1 1 14rem; min-width: 0; }
.wire-topline-actions { flex: 0 0 auto; margin-left: auto; }

/* ── Corps : rail · fil · alertes ─────────────────────────────────────── */

.wire-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: grid;
    gap: var(--nb-gap);
    background: var(--st-line, #24272c);
    /* Par défaut (téléphone et tablette) : le fil occupe tout. Les volets
       sont des tiroirs superposés, déclarés plus bas. */
    grid-template-columns: minmax(0, 1fr);
}

/* Le fil ne doit jamais imposer sa largeur à la grille : sans min-width 0,
   une dépêche à long titre élargit la colonne et pousse le reste hors champ.
   C'est ce qui envoyait le contenu à droite de l'écran sur téléphone. */
.wire-body > * { min-width: 0; }

/* .wire-body compte CINQ enfants : rail, poignée, fil, poignée, alertes.
   N'en déclarer que trois faisait glisser chaque élément d'une piste — le
   fil héritait de la largeur des alertes, 320 px sur un écran de 1440. Les
   poignées qui ne servent pas sont mises en display:none et ne créent alors
   aucune piste ; celles qui servent en occupent une, qu'il faut déclarer. */
@media (min-width: 1024px) {
    .wire-body {
        grid-template-columns: var(--nb-rail) var(--nb-resize, 5px) minmax(0, 1fr);
    }
}
/* Plus de piste d'alertes : #alertsPanel est en position fixe, donc hors
   flux, et #resizeAlerts est masqué. Trois pistes suffisent à toutes les
   largeurs de bureau. */
@media (min-width: 1400px) {
    .wire-body {
        grid-template-columns: var(--nb-rail) var(--nb-resize, 5px) minmax(0, 1fr);
    }
}
.wire-resize-col#resizeAlerts { display: none; }

/* ── Volets ───────────────────────────────────────────────────────────── */

.wire-side-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--st-surface, #16181c);
}

/* Docké : le contenu est TOUJOURS visible. La classe `open` est une notion
   de tiroir ; elle avait fuité dans la disposition dockée, si bien que le
   rail réservait 260 px et n'affichait rien. */
@media (min-width: 1024px) {
    .wire-side-panel-nav {
        position: static;
        inset: auto;
        width: auto;
        transform: none;
        box-shadow: none;
        pointer-events: auto;
    }
    .wire-side-panel-nav .wire-side-panel-head,
    .wire-side-panel-nav .wire-side-panel-body { display: flex !important; }
    .wire-side-panel-nav .wire-side-panel-body { flex: 1 1 auto; min-height: 0; }
}
/* Les alertes ne sont plus jamais docquées : elles vivent derrière un
   bouton, à toutes les largeurs. Elles occupaient une colonne permanente
   de 320 px pour un contenu consulté par à-coups, pendant que l'article —
   qu'on lit vraiment — s'ouvrait en bas et mangeait la hauteur du fil. La
   colonne de droite revient donc à l'article. */

/* Tiroir : hors champ, ramené par translation. `visibility` accompagne la
   translation pour que le contenu ne soit ni cliquable ni lu par un lecteur
   d'écran tant qu'il est fermé. */
@media (max-width: 1023px) {
    .wire-side-panel-nav {
        position: fixed;
        top: var(--wire-chrome-top, 52px);
        bottom: 0;
        left: 0;
        z-index: 220;
        width: min(86vw, 340px);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.28s;
        box-shadow: 8px 0 36px rgba(0, 0, 0, 0.45);
    }
    .wire-side-panel-nav.open {
        transform: none;
        visibility: visible;
    }
    .wire-side-panel-nav.open .wire-side-panel-head,
    .wire-side-panel-nav.open .wire-side-panel-body { display: flex !important; }
}
/* Tiroir d'alertes, à toutes les largeurs. */
@media all {
    .wire-side-panel-alerts {
        position: fixed;
        top: var(--wire-chrome-top, 52px);
        bottom: 0;
        right: 0;
        left: auto;
        z-index: 220;
        width: min(92vw, 380px);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.28s;
        box-shadow: -8px 0 36px rgba(0, 0, 0, 0.45);
    }
    .wire-app.alerts-mobile-open .wire-side-panel-alerts {
        transform: none;
        visibility: visible;
    }
}

/* Colonnes de redimensionnement : sans objet hors disposition dockée. */

@media (max-width: 1023px) { .wire-resize-col#resizeNav { display: none; } }

/* ── Le fil ───────────────────────────────────────────────────────────── */

.wire-feed {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Bureau et tablette : une ligne par dépêche, colonnes alignées.
   La source est bornée : en max-content sans borne elle prenait 348 px et
   le titre tombait à 66, cassé à deux mots par ligne. */
@media (min-width: 640px) {
    .wire-feed--list {
        display: grid;
        grid-template-columns:
            max-content                    /* heure     */
            max-content                    /* pavillon  */
            minmax(4rem, 9rem)             /* source    */
            max-content                    /* rubrique  */
            minmax(0, 1fr)                 /* titre     */
            max-content;                   /* badge     */
        column-gap: 0.55rem;
        align-items: stretch;
        grid-auto-rows: minmax(min-content, auto);
    }
    .wire-feed--list .wire-row {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        align-items: start;
        gap: 0.35rem 0.55rem;
        padding: 0.6rem 0.9rem;
    }
}

/* Téléphone : la colonne ne tient plus. Chaque dépêche devient une carte,
   titre en premier — c'est ce qu'on balaie. */
@media (max-width: 639px) {
    .wire-feed--list { display: block; }

    /* Placement par NUMÉROS de lignes, pas par noms.
       La feuille existante assigne déjà des aires nommées aux cellules
       (grid-area: time, source, rubrique…). Des noms français ne
       correspondaient à rien : l'heure et le titre repassaient en placement
       automatique et se retrouvaient posés n'importe où, superposés au
       reste. Les numéros ne dépendent d'aucune convention de nommage.

       grid-area: <début ligne> / <début colonne> / <fin ligne> / <fin colonne> */
    .wire-feed--list .wire-row {
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        grid-template-areas: none;
        grid-template-rows: auto auto auto;
        gap: 0.3rem 0.5rem;
        padding: 0.75rem 0.9rem;
        border-bottom: 1px solid var(--st-line, #24272c);
    }
    .wire-feed--list .wire-row > .wire-col-time   { grid-area: 1 / 1 / 2 / 2; align-self: center; }
    .wire-feed--list .wire-row > .wire-col-cat    { grid-area: 1 / 2 / 2 / 3; align-self: center; }
    .wire-feed--list .wire-row > .wire-col-aside  { grid-area: 1 / 4 / 2 / 5; justify-self: end; align-self: center; }
    .wire-feed--list .wire-row > .wire-col-title  { grid-area: 2 / 1 / 3 / 5; font-size: 0.95rem; line-height: 1.35; }
    .wire-feed--list .wire-row > .wire-col-source { grid-area: 3 / 1 / 4 / 5; font-size: 0.72rem; opacity: 0.78; }
    .wire-col-flag   { display: none; }   /* le pavillon redouble la source */

    /* Cible tactile : une dépêche se tape au pouce. */
    .wire-feed--list .wire-row { min-height: 3.4rem; }

    /* Les cellules héritent de la disposition en colonnes : positionnement
       absolu, largeurs fixes, alignements calés sur une grille qui n'existe
       plus ici. Sans remise à plat, le titre passait SOUS le badge et les
       deux textes se superposaient. */
    .wire-feed--list .wire-row > * {
        position: static;
        width: auto;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        text-align: left;
    }

    /* La source porte plusieurs pastilles et un logo : une rangée simple,
       qui passe à la ligne plutôt que de déborder. */
    .wire-col-source {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.3rem;
    }
    .wire-col-source img,
    .wire-col-source svg { width: 14px; height: 14px; flex: 0 0 auto; }

    /* Le titre occupe sa propre rangée : il peut donc se dérouler sur
       plusieurs lignes sans rien rencontrer. */
    .wire-col-title {
        display: block;
        overflow-wrap: anywhere;
    }

    .wire-col-aside { align-self: start; }
}

/* ── Dock du bas : téléphone seulement ────────────────────────────────── */

.wire-mobile-dock { display: none; }
@media (max-width: 639px) {
    .wire-mobile-dock { display: flex; }
    .wire-feed { padding-bottom: calc(var(--nb-dock-h) + env(safe-area-inset-bottom, 0px)); }
}

/* Entre 640 et 1023 : pas de dock, mais les boutons d'ouverture des tiroirs
   restent dans la barre haute. */
@media (min-width: 640px) and (max-width: 1023px) {
    .wire-mobile-nav-btn, .wire-mobile-more-btn { display: inline-flex; }
}
@media (min-width: 1024px) {
    .wire-mobile-nav-btn { display: none; }
}
@media (min-width: 1400px) {
    .wire-mobile-more-btn { display: none; }
}

/* ── Barre d'état ─────────────────────────────────────────────────────── */

.nb-statusbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0;
    height: 24px;
    padding: 0 0.7rem;
    background: var(--st-surface, #16181c);
    border-top: 1px solid var(--st-line, #24272c);
    font-family: var(--wire-font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 0.65rem;
    color: var(--st-text-2, #a1a1aa);
    white-space: nowrap;
    overflow: hidden;
}
.nb-statusbar > * { flex: 0 0 auto; }
.nb-sep { width: 1px; height: 11px; margin: 0 0.6rem; background: var(--st-line, #24272c); }
.nb-spacer { flex: 1 1 auto; min-width: 6px; }
.nb-label { margin: 0 0.3rem 0 0; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.07em; }
.nb-statusbar b { font-weight: 600; color: var(--st-text, #f4f4f5); font-variant-numeric: tabular-nums; }

.nb-state::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}
.nb-state[data-ton="ok"]    { color: #22c55e; }
.nb-state[data-ton="tendu"] { color: #f59e0b; }
.nb-state[data-ton="ko"]    { color: #ef4444; font-weight: 700; }

/* Masquer les libellés laissait « 907 14:52:47 839 1 » : des nombres sans
   légende, illisibles. On réduit plutôt le pas et on laisse tomber les
   champs les moins utiles, en gardant leur intitulé. */
@media (max-width: 1000px) {
    .nb-statusbar { font-size: 0.6rem; }
    .nb-sep { margin: 0 0.4rem; }
    .nb-label { letter-spacing: 0.04em; }
}
@media (max-width: 780px) {
    .nb-statusbar .nb-label[data-opt], .nb-statusbar b[data-opt] { display: none; }
}
@media (max-width: 639px) {
    /* Sur téléphone le dock occupe déjà le bas : la barre d'état passerait
       dessous. On la remonte au-dessus du dock. */
    .nb-statusbar { display: none; }
}

/* ── Pastilles de rupture et de lieu ──────────────────────────────────────
   Posées dans la cellule de titre après rendu. La reprise passe DEVANT le
   titre — c'est l'information qui décide si on lit la suite ; le lieu passe
   derrière, il précise sans interrompre. */

.nb-tag {
    display: inline-block;
    vertical-align: baseline;
    padding: 0.08em 0.42em;
    border-radius: 3px;
    font-family: var(--wire-font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.5;
}

.nb-tag--burst {
    margin-right: 0.45rem;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.55);
    color: #fbbf24;
}
/* Palier haut : resserré dans le temps, donc vraiment simultané. */
.nb-tag--burst.est-fort {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.7);
    color: #fca5a5;
}

.nb-tag--geo {
    margin-left: 0.45rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--st-line, #2a2d33);
    color: var(--st-text-2, #9ca3af);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Sur téléphone la ligne est déjà dense : le lieu passe sous le titre. */
@media (max-width: 639px) {
    .nb-tag--geo { margin-left: 0; margin-top: 0.2rem; }
}

/* ── Type de flux : une fois par ligne, pas deux ──────────────────────────
   La pastille de type (RSS, BSKY, GNEWS…) était affichée à gauche dans la
   cellule source ET à droite dans la colonne latérale. Même information,
   deux fois, sur chaque ligne — et autant de largeur prise au titre, qui
   est ce qu'un journaliste balaie. On garde celle de droite, alignée
   verticalement d'une ligne à l'autre donc plus facile à ignorer quand on
   ne la cherche pas.

   La règle est limitée au fil : le même composant reste utile dans la
   gestion des sources, où il identifie la nature du flux. */
#wireFeed .wire-col-source .wire-kind-badge { display: none; }

/* Second badge de type, en fin de nom de source (« BS », « YT », « X »).
   Même information que la pastille de droite, une troisième fois sur la
   ligne. Retiré du fil, conservé ailleurs. */
#wireFeed .wire-col-source .wire-badge-platform { display: none; }


/* ── Bouton d'alertes dans la barre haute ─────────────────────────────── */
.nb-alert-btn { position: relative; }
.nb-alert-btn .nb-alert-n {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--st-accent, #e4002b);
    color: #fff;
    font-family: var(--wire-font-mono, ui-monospace, monospace);
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}
.nb-alert-btn .nb-alert-n[hidden] { display: none; }

/* ═══ En-tête aligné sur NewsGrid ════════════════════════════════════════
   Mesuré sur NewsGrid : 34 px de haut, padding 0 12px, police 13 px,
   gap 10 px, bordure basse #26262c, marque 14 px / 700.

   NewsBoard en faisait 60 avec 20 px de padding — près du double, pour la
   même fonction. Sa barre porte davantage (horloge, état, douze outils),
   donc les boutons doivent suivre la réduction, sinon ils débordent ou
   forcent la hauteur qu'on vient de retirer. */

.wire-topbar {
    height: var(--st-appbar-h, 34px);
    min-height: var(--st-appbar-h, 34px);
    padding: 0 12px;
    gap: 10px;
    font-size: 13px;
    background: transparent;
    border-bottom: 1px solid #26262c;
}

.wire-topbar .st-logo--text { font-size: 14px; font-weight: 700; }

/* Les boutons tiennent dans 34 px : 24 de haut, icône 14. Sans cela, un
   bouton de 32 px imposerait sa hauteur à toute la barre. */
.wire-topbar .wire-btn,
.wire-topbar .wire-btn-icon {
    height: 24px;
    min-height: 24px;
    padding: 0 6px;
    font-size: 12px;
}
.wire-topbar .wire-btn-icon { width: 24px; padding: 0; }
.wire-topbar .wire-btn svg,
.wire-topbar .wire-btn-icon svg { width: 14px; height: 14px; }

/* Horloge, badge et état : même réduction, en gardant l'horloge lisible —
   c'est la valeur qu'on lit le plus souvent. */
.wire-topbar .wire-clock { font-size: 12px; }
.wire-topbar .wire-badge { font-size: 0.58rem; padding: 0.1rem 0.34rem; }
.wire-topbar .wire-status { font-size: 11px; }
.wire-topbar .head-nav { gap: 0.3rem; }

/* Rien ne doit forcer la barre à grandir : ce qui ne tient pas se coupe
   plutôt que de repousser la hauteur. */
.wire-topbar,
.wire-topbar-left,
.wire-topbar-right,
.wire-topbar-tools { min-width: 0; overflow: hidden; }
.wire-topbar-left { flex: 1 1 auto; }
.wire-topbar-right,
.wire-topbar-tools { flex: 0 0 auto; }

/* Les tiroirs partent sous l'en-tête, comme les volets de NewsGrid. */
.wire-app { --wire-chrome-top: var(--st-appbar-h, 34px); }

/* ── Marque NewsBoard ─────────────────────────────────────────────────── */
.wire-brand .wire-i-brand {
    display: inline-flex;
    align-items: center;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}
.wire-brand .wire-i-brand svg { width: 100%; height: 100%; display: block; }

/* La marque StudioTools reprend la taille de NewsGrid. La feuille partagée
   la fixe à 13 px via `.st-grafted > .st-appbar-home .st-logo--text`, plus
   spécifique que le sélecteur évident : on l'égale au lieu de la surenchère
   d'importance. */
.st-grafted > .st-appbar-home .wire-topbar .st-logo--text,
.wire-topbar .st-grafted > .st-appbar-home .st-logo--text,
.wire-topbar .st-appbar-home .st-logo--text { font-size: 14px; font-weight: 700; }

.wire-topbar .wire-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}