/* Signaux : la base commune. Identité « cellule de veille » : fond quadrillé de points, pétrole pour la structure,
   orange vif pour les signaux et les dépêches, vert pour les points marqués. Bricolage Grotesque pour les titres et
   les chiffres clés, IBM Plex Sans pour le texte (licence OFL). Thème clair ou sombre. */
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url(/polices/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url(/polices/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url(/polices/ibm-plex-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; font-style: normal; font-display: swap; src: url(/polices/bricolage-grotesque-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-style: normal; font-display: swap; src: url(/polices/bricolage-grotesque-latin-800-normal.woff2) format('woff2'); }
:root {
  --fond: #EDF1F4; --point: #D2DAE1; --carte: #FFFFFF; --carte2: #F3F6F8; --trait: #D3DBE2; --trait2: #B5C1CC;
  --encre: #0F1E2B; --texte: #1C2934; --doux: #586674;
  --primaire: #0B6E78; --primaire-fonce: #07525A; --primaire-f: #DCEFF0; --sur-primaire: #FFFFFF;
  --signal: #D9480F; --signal-vif: #F76707; --signal-f: #FFE8D9;
  --ok: #1E7A4C; --ok-f: #DCF2E5; --moyen: #A8670D; --moyen-f: #FBEFD6; --perd: #BF3326; --perd-f: #FBE2DE;
  --h0: #2F5D99; --h0-f: #E2EBF8; --h1: #9B2F6A; --h1-f: #F7E3EE;
  --nuit: #0F1E2B; --sur-nuit: #EAF2F5; --focus: #2563EB;
  --ombre: 0 1px 2px rgba(15, 30, 43, .06), 0 8px 24px rgba(15, 30, 43, .08);
  --f-texte: 'IBM Plex Sans', system-ui, 'Segoe UI', Arial, sans-serif;
  --f-titre: 'Bricolage Grotesque', 'Segoe UI', Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #0A1318; --point: #1C2B35; --carte: #111E26; --carte2: #162733; --trait: #243845; --trait2: #33505F;
    --encre: #E9F2F5; --texte: #DCE7EC; --doux: #93A6B2;
    --primaire: #3BB0BB; --primaire-fonce: #2B929C; --primaire-f: #0F3237; --sur-primaire: #06181B;
    --signal: #FF8A4C; --signal-vif: #FF9A5C; --signal-f: #3A2214;
    --ok: #4CC38A; --ok-f: #12301F; --moyen: #E2A84B; --moyen-f: #392A10; --perd: #F2776B; --perd-f: #3A1A17;
    --h0: #8FB2E8; --h0-f: #17273A; --h1: #E59AC3; --h1-f: #391B2B;
    --nuit: #050B0E; --sur-nuit: #E9F2F5; --focus: #80B3EE;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); color-scheme: dark;
  }
}
:root[data-theme="sombre"] {
  --fond: #0A1318; --point: #1C2B35; --carte: #111E26; --carte2: #162733; --trait: #243845; --trait2: #33505F;
  --encre: #E9F2F5; --texte: #DCE7EC; --doux: #93A6B2;
  --primaire: #3BB0BB; --primaire-fonce: #2B929C; --primaire-f: #0F3237; --sur-primaire: #06181B;
  --signal: #FF8A4C; --signal-vif: #FF9A5C; --signal-f: #3A2214;
  --ok: #4CC38A; --ok-f: #12301F; --moyen: #E2A84B; --moyen-f: #392A10; --perd: #F2776B; --perd-f: #3A1A17;
  --h0: #8FB2E8; --h0-f: #17273A; --h1: #E59AC3; --h1-f: #391B2B;
  --nuit: #050B0E; --sur-nuit: #E9F2F5; --focus: #80B3EE;
  --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background-color: var(--fond); background-image: radial-gradient(var(--point) 1px, transparent 1.2px); background-size: 22px 22px;
  color: var(--texte); font-family: var(--f-texte); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, select:disabled, input:disabled, textarea:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, p, ol, ul { margin: 0; }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 800; color: var(--encre); text-wrap: balance; letter-spacing: -.01em; }
[hidden] { display: none !important; }
a { color: var(--primaire); }
mark { background: var(--signal-f); color: inherit; border-radius: 3px; padding: 0 1px; box-shadow: 0 0 0 1px var(--signal); }
.vide { color: var(--doux); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.defile { overflow-x: auto; }
table { border-collapse: collapse; overflow-wrap: normal; word-break: normal; }
td.num, .num { white-space: nowrap; }

/* La marque : le point qui émet. */
.marque { font-family: var(--f-titre); font-weight: 800; letter-spacing: .01em; color: inherit; display: inline-flex; align-items: center; gap: 10px; font-size: 20px; }
.marque::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--signal-vif); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal-vif) 30%, transparent), 0 0 0 9px color-mix(in srgb, var(--signal-vif) 12%, transparent); }

/* Les pastilles d'information. */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; border-radius: 99px; padding: 2px 9px; background: var(--carte2); color: var(--doux); white-space: nowrap; }
.badge.nouveau { background: var(--signal-f); color: var(--signal); }
.badge.lu { background: var(--ok-f); color: var(--ok); }
.badge.epingle { background: var(--signal-f); color: var(--signal); }
.badge.note { background: var(--primaire-f); color: var(--primaire); }

/* « Ce qui se passe » : la phrase à lire à voix haute. */
.explique { display: grid; gap: 4px; background: var(--primaire-f); border-radius: 14px; padding: 14px 18px; border-left: 6px solid var(--primaire); }
.explique .ex-titre { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primaire); }
.explique p { color: var(--encre); font-size: 1.05em; }

/* Les boutons. */
.b-principal { background: var(--primaire); color: var(--sur-primaire); border: 0; border-radius: 12px; padding: 12px 20px; font-weight: 700; font-size: 17px; box-shadow: 0 2px 0 var(--primaire-fonce); }
.b-principal:hover { background: var(--primaire-fonce); }
.b-second { background: var(--carte); color: var(--encre); border: 1px solid var(--trait2); border-radius: 12px; padding: 9px 15px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.b-second:hover { border-color: var(--primaire); }
.b-lien { background: none; border: 0; color: var(--primaire); font-weight: 700; padding: 4px 0; }
.b-signal { background: var(--signal); color: #fff; border: 0; border-radius: 12px; padding: 9px 15px; font-weight: 700; }

/* Les messages. */
.reseau { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 50; background: var(--perd); color: #fff; font-weight: 700; border-radius: 99px; padding: 8px 16px; font-size: 15px; box-shadow: var(--ombre); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; width: max-content; max-width: calc(100% - 32px); background: var(--nuit); color: var(--sur-nuit); font-weight: 700; border-radius: 12px; padding: 10px 16px; box-shadow: var(--ombre); }
.toast.erreur { background: var(--perd); color: #fff; }
.seul { max-width: 560px; margin: 12vh auto; padding: 24px; display: grid; gap: 14px; }

/* Les icônes des types de document. */
.ico { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.type-doc { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; flex: none; }
.t-interne { background: #E4ECF7; color: #2F5D99; } .t-donnees { background: #DCF2E5; color: #1E7A4C; } .t-reunion { background: #EEE6F8; color: #6B3FA0; }
.t-etude { background: #E1F1F3; color: #0B6E78; } .t-presse { background: #F1ECE4; color: #7A5A2E; } .t-social { background: #FBE6F0; color: #A12B67; }
.t-vente { background: #FFE8D9; color: #C2410C; } .t-officiel { background: #E8EAED; color: #3B4652; } .t-veille { background: #E6F0DA; color: #4A6B12; }

/* Les jauges de points. */
.jauge { display: grid; grid-template-columns: 9.5em 1fr 4.5em; gap: 12px; align-items: center; }
.j-lib { font-weight: 700; }
.j-barre { height: 14px; border-radius: 99px; background: var(--carte2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--trait); }
.j-barre .barre { display: block; height: 100%; width: var(--w, 0%); border-radius: 99px; background: var(--ok); transition: width .25s; }
.jauge.non .barre { background: var(--h0); }
.jauge b { font-family: var(--f-titre); font-size: 20px; text-align: right; }
.jauge small { font-family: var(--f-texte); font-weight: 400; font-size: 13px; color: var(--doux); }
.barre { width: var(--w, 0%); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }