:root {
  --bg: #0b1220;
  --bg2: #111a2e;
  --card: #16223c;
  --card2: #1b2a47;
  --text: #e8eef8;
  --muted: #9db0ca;
  --line: #263757;
  --accent: #4da3ff;
  --critique: #ff5252;
  --elevee: #ff9f43;
  --moyenne: #ffd93d;
  --faible: #7d8ca3;
  --exploite: #ff3860;
  --parc: #2ee6a8;
  --radius: 12px;
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0;
  background: linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
  padding: 0 1rem 3rem;
}
a { color: var(--accent); }
.topbar {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1.1rem 0 .6rem;
}
.brand { display: flex; gap: .8rem; align-items: center; }
.brand-mark { width: 2.6rem; height: 2.6rem; flex: none; display: block; }
.brand h1 { margin: 0; font-size: 2.1rem; letter-spacing: .2px; }
.refresh-btn { flex: none; margin-left: .4rem; background: #12233d; color: #cfe6ff; border: 1px solid #4da3ff; border-radius: 999px; padding: .45rem .95rem; font-size: .95rem; font-weight: 700; cursor: pointer; }
.refresh-btn:hover { background: #1a3050; }
.refresh-btn:disabled { opacity: .55; cursor: wait; }
.tagline { margin: .1rem 0 0; color: var(--muted); font-size: .92rem; }
.freshness { text-align: right; color: var(--muted); font-size: .95rem; }
.freshness .countdown { font-variant-numeric: tabular-nums; }

.statusbar {
  display: flex; flex-wrap: wrap; gap: .55rem .8rem; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .6rem .8rem; margin: .4rem 0 .8rem;
}
.statusbar-title { font-weight: 800; font-size: .95rem; white-space: nowrap; }
.statusbar-items { display: flex; flex-wrap: wrap; gap: .5rem; }
.status-pill {
  display: flex; gap: .5rem; align-items: center; text-decoration: none; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .75rem .35rem .55rem;
}
.status-pill:hover { border-color: var(--accent); }
.status-dot { width: .72rem; height: .72rem; border-radius: 50%; background: var(--faible); flex: none; }
.status-pill.state-operationnel .status-dot { background: var(--parc); }
.status-pill.state-degradation .status-dot { background: var(--elevee); }
.status-pill.state-incident .status-dot { background: var(--critique); }
.status-pill.state-inconnu .status-dot { background: var(--faible); }
.status-text { display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; }
.status-text strong { font-size: .92rem; }
.status-state { font-size: .85rem; font-weight: 700; }
.status-pill.state-operationnel .status-state { color: var(--parc); }
.status-pill.state-degradation .status-state { color: var(--elevee); }
.status-pill.state-incident .status-state { color: var(--critique); }
.status-pill.state-inconnu .status-state { color: var(--muted); }
.status-detail { font-size: .8rem; color: var(--muted); }
/* Puces « signalements » (2026-11-13) : dans la pastille, à côté de
   l'état officiel — orange pour une remontée, rouge pour un incident
   déjà annoncé dans le fil officiel mais pas encore reflété ici. */
.sig-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700;
  color: var(--elevee); background: rgba(255,159,67,.13); border: 1px solid var(--elevee);
  border-radius: 999px; padding: .08rem .55rem; white-space: nowrap; }
.sig-chip.fort { color: #ffb3b3; background: rgba(255,82,82,.14); border-color: var(--critique); }
.statusbar-note { flex-basis: 100%; font-size: .8rem; color: var(--muted); }

.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin: .6rem 0;
}
.kpi {
  background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: var(--radius); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .15rem;
}
.kpi-num { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi-label { color: var(--muted); font-size: .88rem; }
button.kpi { font: inherit; color: var(--text); text-align: left; cursor: pointer; width: 100%;
  transition: transform .08s ease, border-color .15s ease; }
button.kpi:hover { border-color: var(--accent); transform: translateY(-1px); }
button.kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi-go { color: var(--accent); font-size: .8rem; font-weight: 700; }
.kpi.sev-critique { border-top-color: rgba(255, 82, 82, .55); }
.kpi.sev-exploite { border-top-color: rgba(255, 56, 96, .55); }
.kpi.parc { border-top-color: rgba(46, 230, 168, .55); }

.legend { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: .4rem 0 1rem; color: var(--muted); font-size: .9rem; }
.chip {
  display: inline-block; padding: .02rem .4rem; border-radius: 999px; font-size: .66rem; font-weight: 700;
  border: 1px solid var(--line); color: var(--text); background: var(--card);
}
/* Pastilles adoucies (Simon 2026-10-15) : petites, fonds presque
   effacés, bordures douces — et la COULEUR EST DANS LES MOTS, comme
   il l'a précisé : « les mots des pastilles, les ovales, c'est là
   que je voulais des couleurs ». */
.chip.sev-critique, .chip.sev-elevee, .chip.sev-moyenne, .chip.sev-faible, .chip.exploite, .chip.parc {
  background: rgba(255, 255, 255, .04); border-color: var(--line); color: var(--text);
}
.legend-note { font-size: .85rem; }

.incident-banner { border: 1px solid #b3543f; background: rgba(179, 84, 63, .14); border-radius: .6rem; padding: .55rem .8rem; margin: 0 0 .6rem; font-weight: 600; }
.incident-banner.critique { border-color: #d64541; background: rgba(214, 69, 65, .2); }
.incident-banner .incident-line + .incident-line { margin-top: .25rem; }
.eol-strip { border: 1px solid rgba(230, 180, 84, .5); background: rgba(230, 180, 84, .1); border-radius: .6rem; padding: .5rem .8rem; margin: 0 0 .8rem; color: #e8cf9a; }
.pt-countdown { margin: 0 0 .8rem; color: var(--muted); font-weight: 600; }
.more-toggle { grid-column: 1 / -1; justify-self: center; background: none; border: 1px solid var(--muted); color: var(--muted); border-radius: 999px; padding: .3rem .9rem; font: inherit; font-size: .85rem; cursor: pointer; }
.old-items { display: contents; }
.old-items[hidden] { display: none; }
/* Une SEULE rangée d'onglets partout (restructuration 2026-11-10,
   10 onglets) : à l'ordi ils tiennent sur la ligne ; au téléphone la
   rangée défile à l'horizontale — jamais deux rangées. */
.tabs { display: flex; gap: .5rem; margin: .4rem 0 1rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .35rem; touch-action: pan-x; }
.tab.dragging { opacity: .55; outline: 2px dashed #4da3ff; outline-offset: 1px; }
.reorder-hint { margin: -.4rem 0 .8rem; color: var(--muted); font-size: .85rem; }
.tab {
  /* Couleur douce et transparente (demande Simon 2026-10-15) : lavis
     bleu translucide au lieu du fond plein ; l'onglet actif garde un
     lavis plus soutenu, mais fini le bloc bleu vif plein. */
  background: rgba(77, 163, 255, .08); color: var(--text); border: 1px solid rgba(77, 163, 255, .25);
  padding: .55rem 1.1rem; border-radius: 999px; font-size: 1rem; cursor: pointer; flex: none; white-space: nowrap;
  /* Au tactile, la pastille laisse passer le geste : pan-x, le
     navigateur fait défiler la rangée au lieu de « ramasser »
     l'onglet. Le réordonnancement ne se fait plus qu'à la souris
     (app.js, pointerType === "mouse"), qui ne tient pas compte de
     touch-action. Décision de Simon 2026-11-11 — remplace le
     touch-action: none de 2026-10-16, qui servait l'ancien glisser
     tactile et volait le défilement de la rangée. */
  touch-action: pan-x; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.tab:hover { background: rgba(77, 163, 255, .16); }
.tab.active { background: rgba(77, 163, 255, .30); color: #eaf4ff; font-weight: 800; border-color: rgba(77, 163, 255, .55); }

/* Couleurs douces sur les MOTS des onglets (Simon 2026-10-15 : « les
   mots des pastilles, les ovales » = Citrix, Microsoft, Veille,
   Nouvelles TI, Communautés — JUSTE leurs pastilles). */
#tabBtnCitrix { color: #7cc4ff; }
#tabBtnMicrosoft { color: #ff9d9d; }
#tabBtnVeille { color: #ffe066; }
#tabBtnNouvelles { color: #c9a7ff; }
#tabBtnReddit { color: #7fe0d4; }
/* Nouveaux onglets de la restructuration 2026-11-10 : même principe,
   couleurs douces sur les mots. */
#tabBtnRecherche { color: #e8eef8; }
#tabBtnImprivata { color: #ffb27d; }
#tabBtnAdobe { color: #ff8a80; }
#tabBtnFslogix { color: #a7e08b; }
#tabBtnTeams { color: #a5b4ff; }

.urgences {
  border: 1px solid rgba(255, 56, 96, .45); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,56,96,.07), rgba(255,56,96,.02));
  padding: 1rem; margin-bottom: 1.2rem;
}
.urgences h2 { margin: 0 0 .2rem; color: #ffb3c2; font-size: 1.25rem; }
.urgences-sub { margin: 0 0 .8rem; color: var(--muted); }

.patchtuesday {
  border: 2px solid var(--accent); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(77,163,255,.13), rgba(77,163,255,.04));
  padding: 1rem; margin-bottom: 1.2rem;
}
#patchFixes { margin: 0 0 1.1rem; }
.patchtuesday h2 { margin: 0 0 .2rem; font-size: 1.25rem; }
.patchtuesday-stats { margin: 0 0 .8rem; color: var(--muted); }

.toolbar {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: end;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem; margin-bottom: 1rem;
}
.toolbar label { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; color: var(--muted); }
.toolbar label.check { flex-direction: row; align-items: center; gap: .4rem; padding-bottom: .35rem; color: var(--text); }
.toolbar select, .toolbar input[type="search"] {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: .45rem .6rem; font-size: .95rem;
}
/* Barre de recherche en pleine largeur, en haut de la barre d'outils
   (demande de Simon, 2026-10-21 : retrouver un bulletin vite). */
.toolbar label.search { flex: 1 1 100%; }
.toolbar label.search input { width: 100%; box-sizing: border-box; }
.share-btn {
  margin-left: auto; background: var(--parc); color: #04241a; font-weight: 800; border: 0;
  border-radius: 8px; padding: .55rem .9rem; cursor: pointer; font-size: .95rem;
}
.share-confirm { color: var(--parc); font-weight: 600; }

.section-title { font-size: 1.2rem; margin: 1.2rem 0 .6rem; }
.section-sub { color: var(--muted); margin: -.3rem 0 .8rem; font-size: .93rem; }
.empty { color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: .7rem; }
.card {
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--faible);
  border-radius: var(--radius); padding: .85rem .95rem; display: flex; flex-direction: column; gap: .45rem;
}
.card.sev-critique { border-left-color: var(--critique); }
.card.sev-elevee { border-left-color: var(--elevee); }
.card.sev-moyenne { border-left-color: var(--moyenne); }
.card.sev-faible { border-left-color: var(--faible); }
.card h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card .meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .8rem; color: var(--muted); }
.card .summary { margin: 0; font-size: .92rem; color: #cdd9ec; }
.card .foot { margin-top: auto; display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; }
.pill { font-weight: 600; font-size: .7rem; letter-spacing: .02em; opacity: .75; }
.pill.sev-critique { color: var(--critique); }
.pill.sev-elevee { color: var(--elevee); }
.pill.sev-moyenne { color: var(--moyenne); }
.pill.sev-faible { color: var(--faible); }
.badge-exploite { color: #ffe3e9; background: rgba(255, 56, 96, .28); border: 1px solid rgba(255, 56, 96, .5); border-radius: 6px; padding: .05rem .45rem; font-weight: 700; font-size: .75rem; }
.badge-parc { color: #b9f5dd; background: rgba(46, 230, 168, .22); border: 1px solid rgba(46, 230, 168, .5); border-radius: 6px; padding: .05rem .45rem; font-weight: 700; font-size: .75rem; }
.badge-ransom { color: #fff; background: #8e2de2; border-radius: 6px; padding: .05rem .45rem; font-weight: 700; font-size: .75rem; }
/* Badge « Onglet <nom> » des résultats de la recherche globale
   (maquette approuvée par Simon, 2026-11-10) : dit de quel onglet
   vient la carte. */
.tab-badge { color: #cfe6ff; background: rgba(77, 163, 255, .18); border: 1px solid var(--accent); border-radius: 6px; padding: .05rem .45rem; font-weight: 700; font-size: .75rem; }
.search-count { color: var(--muted); font-size: .88rem; margin: .2rem 0 .8rem; }
.cve { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; color: var(--muted); }
.reddit-meta { font-size: .85rem; font-weight: 700; color: var(--muted); }

.table-wrap { overflow-x: auto; }
table.cal { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.cal th, table.cal td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .95rem; }
table.cal th { background: var(--card2); }
table.cal tr.past td { color: var(--muted); }
table.cal tr.soon td { background: rgba(255,159,67,.08); }
.state-past { color: var(--muted); }
.state-soon { color: var(--elevee); font-weight: 700; }
.state-ok { color: var(--parc); }

footer { margin-top: 2.2rem; border-top: 1px solid var(--line); padding-top: 1rem; color: var(--muted); }
footer h2 { font-size: 1rem; color: var(--text); }
.sources { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.sources .ok { color: var(--parc); }
.sources .ko { color: var(--critique); }
.fineprint { font-size: .85rem; }

.modal { position: fixed; inset: 0; background: rgba(2,6,16,.7); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.modal[hidden] { display: none; }
.modal-card { background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; width: min(680px, 100%); }
.modal-card textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: .6rem; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.modal-actions { display: flex; gap: .6rem; margin-top: .7rem; }
.modal-actions button { padding: .55rem 1rem; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; font-weight: 700; }
.modal-actions button:first-child { background: var(--parc); color: #04241a; border: 0; }

@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .freshness { text-align: left; }
  .share-btn { margin-left: 0; }
  html { font-size: 16px; }
}
@media (min-width: 1400px) {
  html { font-size: 19px; }
  body { max-width: 1700px; margin: 0 auto; }
  .kpi-num { font-size: 2.6rem; }
}

/* Points saillants de la salve pour le parc (sous le titre du bloc
   des correctifs notables) : bien en évidence (demande Simon
   2026-10-15 : plus gros, gras, fond pâle et bordure accent). */
.salvo-highlights { margin: 6px 0 12px; padding: 10px 12px; background: rgba(46, 230, 168, 0.07); border-left: 3px solid #2ee6a8; border-radius: 6px; }
.salvo-highlights-title { margin: 0 0 5px; font-size: 16px; font-weight: 800; color: #2ee6a8; }
.salvo-highlights-list { margin: 0; padding-left: 20px; font-size: 15px; font-weight: 700; line-height: 1.55; }
.salvo-highlights-list a { color: #cfe6ff; }
.salvo-highlights-kb { color: #8fa3bf; font-weight: 400; }

/* Bloc « Correctifs notables de la salve » aussi plus en évidence
   (demande Simon 2026-10-15) — règles LIMITÉES au bloc, le reste de
   la page garde ses tailles habituelles. */
#patchFixes .section-title { font-size: 1.45rem; font-weight: 800; }
#patchFixes .card { border-left-width: 4px; }
#patchFixes .card h3 { font-size: 1.12rem; font-weight: 700; }
#patchFixes .card .summary { font-size: 1rem; }