/* NewsbotEA : le tableau de bord et les pages de connexion suivent la charte de la page d'accueil (vitrine.css) :
   fond nuit quadrillé, titres Space Grotesk, texte IBM Plex Sans, étiquettes IBM Plex Mono, cyan pour l'action,
   or pour les prix et les repères. Polices sous licence OFL servies par le site (fonts/OFL-*.txt). */
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root {
  --bg: #080c14; --panel: #0b1120; --panel-2: #0e1628; --line: rgba(149, 161, 186, .14); --line-2: rgba(149, 161, 186, .28);
  --fg: #edf3fa; --muted: #95a1ba; --gold: #f5c26b; --gold-ink: #241900;
  --cyan: #26d9f2; --cyan-ink: #04222a; --cyan-line: rgba(38, 217, 242, .2);
  --ok: #34c58f; --bad: #f0607a; --blue: #5aa8ff; --violet: #a98bfa; --teal: #2ec7c9;
  --radius: 16px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --titre: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --quadrillage: radial-gradient(ellipse 70% 45% at 55% -10%, rgba(38, 217, 242, .09), transparent 70%),
    linear-gradient(rgba(149, 161, 186, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(149, 161, 186, .04) 1px, transparent 1px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; color: var(--fg); font: 15px/1.55 var(--font); background-color: var(--bg); background-image: var(--quadrillage); background-size: auto, 56px 56px, 56px 56px; }
h1, h2, h3 { font-family: var(--titre); letter-spacing: -.01em; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
b { font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.pos { color: var(--ok); }
.neg { color: var(--bad); }
.big { font-size: 22px; }
.lead { max-width: 75ch; color: var(--fg); margin: 0 0 18px; }

/* mise en page */
.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.side { background: rgba(8, 12, 20, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-right: 1px solid rgba(149, 161, 186, .12); padding: 22px 14px 20px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
/* logo texte, comme l'en-tête de la page d'accueil */
.marque { display: inline-block; align-self: flex-start; padding: 4px 8px 2px; font: 700 17px/1 var(--titre); letter-spacing: .14em; color: var(--fg); }
.marque span { color: var(--gold); }
.marque:hover { color: var(--fg); text-decoration: none; }
.who { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(14, 22, 40, .6); min-width: 0; }
.who b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.who small { color: var(--gold); font-size: 12px; }
.avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(38, 217, 242, .14); color: var(--cyan); font: 700 15px/1 var(--titre); }
.side nav { display: flex; flex-direction: column; gap: 4px; }
.side nav a { color: var(--fg); padding: 9px 12px; border-radius: 10px; }
.side nav a:hover { background: rgba(149, 161, 186, .08); text-decoration: none; }
.side nav a.on { background: linear-gradient(90deg, rgba(38, 217, 242, .16), rgba(38, 217, 242, .03)); color: var(--cyan); font-weight: 600; box-shadow: inset 2px 0 0 var(--cyan); }
.nav-title { margin-top: 12px; padding: 0 12px; font: 400 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.logout { margin: 0; }
.logout button { width: 100%; text-align: left; font: inherit; color: var(--muted); background: none; border: 0; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.logout button:hover, .logout button:focus-visible { background: rgba(149, 161, 186, .08); color: var(--fg); }
/* administrateur : vue admin / vue client */
.vue-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.vue-switch button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 6px; border-radius: 9px; cursor: pointer; }
.vue-switch button:hover { color: var(--fg); }
.vue-switch button.on { background: rgba(38, 217, 242, .12); color: var(--cyan); box-shadow: 0 0 0 1px rgba(38, 217, 242, .35); }
.vue-switch button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.bandeau-vue { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(90, 168, 255, .45); background: rgba(90, 168, 255, .08); font-size: 14px; }
.bandeau-vue p { margin: 0; flex: 1 1 320px; }
.bandeau-vue b { color: var(--blue); }
.main { padding: 22px clamp(16px, 3vw, 36px) 40px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.top h1 { margin: 0; font: 700 26px/1.15 var(--titre); letter-spacing: -.02em; }
.run { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.foot { margin-top: auto; padding-top: 16px; color: var(--muted); font-size: 12px; }

/* éléments */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(14, 22, 40, .85); color: var(--fg); font: 600 14.5px/1.2 var(--titre); letter-spacing: .02em; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.btn:hover { border-color: var(--cyan); text-decoration: none; }
/* bouton principal (classe « gold » d'origine) : cyan, comme les boutons d'action de la page d'accueil */
.btn.gold { background: var(--cyan); border-color: var(--cyan); color: var(--cyan-ink); box-shadow: 0 8px 24px rgba(38, 217, 242, .18); }
.btn.gold:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(38, 217, 242, .3); }
.btn:disabled { opacity: .6; cursor: progress; }
.form input:disabled { opacity: .45; cursor: not-allowed; }
.valider-main { margin: 2px 0 6px; }
.valider-main > summary { cursor: pointer; display: inline-block; font-size: 13px; color: var(--cyan); padding: 6px 0; }
.valider-main[open] > summary { display: block; margin-bottom: 6px; }
.valider-main .form { gap: 6px; min-width: 230px; }
.valider-main input[name=note] { width: 100%; min-width: 200px; }
.table td.detail { max-width: 360px; overflow-wrap: anywhere; }
.actions-ligne { flex-wrap: wrap; }
.btn.wide { width: 100%; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(38, 217, 242, .18); }
button.link { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 6px 12px; }
button.link:hover { color: var(--fg); }
button.link.neg { color: var(--bad); padding: 0; }
.card { background: rgba(11, 17, 32, .92); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.card h2 { margin: 0; font: 600 18px/1.3 var(--titre); letter-spacing: -.01em; }
.card p { margin: 0; }
.card.narrow { max-width: 520px; }
.grid2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.kpi { background: rgba(11, 17, 32, .92); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.kpi.teal { border-left-color: var(--teal); } .kpi.blue { border-left-color: var(--blue); } .kpi.violet { border-left-color: var(--violet); }
.kpi .label { color: var(--muted); font: 400 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.kpi b { font: 700 30px/1.15 var(--titre); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi small { color: var(--muted); font-size: 12px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; border: 1px solid currentColor; }
.badge.buy { color: var(--ok); background: rgba(52, 197, 143, .12); }
.badge.sell { color: var(--bad); background: rgba(240, 96, 122, .12); }
.badge.none { color: var(--muted); }
/* signal pas encore visible pour un client : faux contenu flouté (les vraies valeurs ne sont pas dans la page) */
.flou { display: inline-block; filter: blur(5px); opacity: .85; -webkit-user-select: none; user-select: none; pointer-events: none; }
.flou:has(> .badge) { filter: blur(3px); opacity: 1; }
.badge.cache { color: var(--fg); border-color: var(--line-2); background: linear-gradient(90deg, rgba(52, 197, 143, .55), rgba(240, 96, 122, .55)); }
.verrou { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--gold); background: rgba(242, 184, 75, .1); border: 1px solid rgba(242, 184, 75, .45); vertical-align: middle; }
.verrou .ico { width: 12px; height: 12px; flex: none; }
.date-analyse { color: var(--fg); font-weight: 600; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line-2); color: var(--muted); }
.pill.ok { color: var(--ok); border-color: rgba(52, 197, 143, .5); }
.pill.bad { color: var(--bad); border-color: rgba(240, 96, 122, .5); }
.signal-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alert { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.alert.ok { background: rgba(52, 197, 143, .1); border: 1px solid rgba(52, 197, 143, .4); }
.alert.bad { background: rgba(240, 96, 122, .1); border: 1px solid rgba(240, 96, 122, .4); }

/* tableaux */
.scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.table th { color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.table .num { text-align: right; }
.table .exit { background: rgba(38, 217, 242, .05); }
.table.compact th, .table.compact td { padding: 6px 8px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; background: rgba(11, 17, 32, .85); border: 1px solid var(--line); padding: 5px; border-radius: 12px; width: fit-content; max-width: 100%; }
.tabs a { padding: 7px 14px; border-radius: 9px; color: var(--muted); font: 600 14px/1.3 var(--titre); }
.tabs a:hover { color: var(--fg); text-decoration: none; }
.tabs a.on { background: rgba(38, 217, 242, .12); color: var(--cyan); box-shadow: 0 0 0 1px rgba(38, 217, 242, .35); }
.tabs .spacer { width: 18px; }
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pager { display: flex; gap: 16px; justify-content: center; align-items: center; color: var(--muted); }
.console { background: #060a12; border: 1px solid var(--line); border-radius: 10px; padding: 14px; font: 12.5px/1.5 var(--mono); white-space: pre-wrap; overflow-x: auto; margin: 0; }

/* formulaires */
.form { display: flex; flex-direction: column; gap: 8px; }
.form label { font-size: 13px; color: var(--muted); margin-top: 6px; }
input, select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(149, 161, 186, .32); background: var(--panel-2); color: var(--fg); font: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.filters select { width: auto; }
.form .btn { margin-top: 12px; }
form.inline { display: inline; }
.auth { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: min(440px, 100%); background: rgba(11, 17, 32, .94); border: 1px solid var(--cyan-line); border-radius: 18px; padding: 30px; display: flex; flex-direction: column; gap: 12px; text-align: left; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 60px rgba(38, 217, 242, .06); }
.auth-card .marque { align-self: center; font-size: 21px; padding: 0 0 4px; }
.auth-card h2 { margin: 6px 0 0; font: 600 22px/1.25 var(--titre); letter-spacing: -.01em; }
.auth-card p { margin: 0; }
.accroche { text-align: center; font: 400 11.5px/1.5 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.auth-card .form label:not(.check) { font: 400 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.auth-card .btn.wide { padding: 13px 16px; font-size: 15.5px; }

/* analyse : progression et notifications */
.progress { display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
.progress .texte { font-size: 12.5px; color: var(--muted); }
.progress .barre { display: block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress .barre > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), #8beefb); transition: width .4s ease; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; padding: 14px 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--ok); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); font-weight: 600; }
.toast.ko { border-color: var(--bad); }

/* graphiques */
.chart-box { overflow-x: auto; }
.chart { width: 100%; max-width: 760px; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ref { stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1; }
.chart .band { fill: rgba(242, 184, 75, .07); }
.chart .tick { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chart .end { font-size: 12px; font-weight: 700; font-family: var(--font); }
.chart .s1 { stroke: var(--gold); } .chart .dot.s1, .chart .end.s1 { fill: var(--gold); stroke: none; }
.chart .s2 { stroke: var(--blue); } .chart .dot.s2, .chart .end.s2 { fill: var(--blue); stroke: none; }
.chart .s3 { stroke: var(--violet); } .chart .dot.s3, .chart .end.s3 { fill: var(--violet); stroke: none; }
.chart .s4 { stroke: var(--teal); } .chart .dot.s4, .chart .end.s4 { fill: var(--teal); stroke: none; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: column; gap: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side nav { flex-direction: row; flex-wrap: wrap; }
  .nav-title { width: 100%; margin-top: 4px; }
  .logout button { width: auto; }
  .progress { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .progress .barre > span, .btn, input, select { transition: none; } .btn.gold:hover { transform: none; } }

/* ---------------------------------------------------------------- licences (administration et client) */
.etat { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid currentColor; white-space: nowrap; }
.etat.active { color: var(--ok); background: rgba(52, 197, 143, .12); }
.etat.attente { color: var(--blue); background: rgba(90, 168, 255, .1); }
.etat.expiree, .etat.utilisee { color: var(--muted); }
.etat.desactivee { color: var(--gold); background: rgba(242, 184, 75, .1); }
.etat.exclue { color: var(--bad); background: rgba(240, 96, 122, .12); }
.statut { font-size: 13px; font-weight: 600; }
.statut.payee { color: var(--ok); } .statut.a_verifier { color: var(--gold); } .statut.attente { color: var(--blue); }
.statut.expiree, .statut.annulee { color: var(--muted); }
.cle { font: 500 14px/1.4 var(--mono); letter-spacing: .04em; color: var(--fg); }
.cle.grande { font-size: 18px; color: var(--gold); margin: 0; overflow-wrap: anywhere; }
.mono { font-family: var(--mono); overflow-wrap: anywhere; }
.lien-brut { font: 12.5px var(--mono); overflow-wrap: anywhere; color: var(--muted); }
.btn.petit { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn.danger { background: rgba(240, 96, 122, .14); border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: rgba(240, 96, 122, .24); }
.compteur { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11.5px; }
.tabs.petits a { padding: 5px 11px; font-size: 13px; }
.champ-court { max-width: 180px; }
.filters input[type="search"] { width: 220px; max-width: 100%; }
.narrow-l { max-width: 640px; }
.label-groupe { font-size: 13px; color: var(--muted); margin-top: 6px; }
.choix { display: flex; gap: 8px; flex-wrap: wrap; }
.choix.colonne { flex-direction: column; }
.choix-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; background: var(--panel-2); }
.choix-item input, .check input { width: auto; margin-top: 3px; accent-color: var(--cyan); }
.choix-item small { display: block; color: var(--muted); font-size: 12.5px; }
.choix-item:has(input:checked) { border-color: var(--cyan); background: rgba(38, 217, 242, .08); }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-top: 6px; cursor: pointer; }
.form label.check, .form label.choix-item, .form label.duree { color: var(--fg); font-size: 14px; margin-top: 0; }
textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(149, 161, 186, .32); background: var(--panel-2); color: var(--fg); font: inherit; resize: vertical; }
.ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ligne input { flex: 1 1 200px; width: auto; }
.form .ligne .btn { margin-top: 0; }
.infos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 14px; }
.infos dt { color: var(--muted); }
.infos dd { margin: 0; overflow-wrap: anywhere; }
.zone-danger { border-top: 1px solid var(--line); padding-top: 10px; }
.table tr.alerte td { background: rgba(242, 184, 75, .06); }
.table td.detail { white-space: normal; min-width: 220px; max-width: 420px; }
.actions-ligne { display: flex; gap: 8px; align-items: center; }
.actions-ligne select { width: auto; max-width: 280px; padding: 6px 8px; }
.cree { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.prix-grille { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.prix-grille label { display: block; font-size: 13px; color: var(--muted); margin: 6px 0 4px; }
.card h2.sous-titre { margin-top: 14px; font-size: 15px; }
.liste-aide { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.auth-liens { text-align: center; }

/* ---------------------------------------------------------------- page de paiement (styles de la vitrine : vitrine.css) */
.paiement-grille { display: grid; gap: 22px; grid-template-columns: 220px minmax(0, 1fr); align-items: start; margin-top: 4px; }
.qr-box { display: flex; flex-direction: column; gap: 4px; align-items: center; background: #fff; border-radius: 14px; padding: 10px; }
.qr-box small { color: #0a1020; font-size: 12px; font-weight: 600; }
svg.qr { width: 100%; height: auto; display: block; }
.paiement-infos { min-width: 0; }
.paiement-infos .label { margin: 8px 0 2px; color: var(--muted); font-size: 13px; }
.paiement-infos p { margin: 0 0 4px; }
.montant { font: 700 30px/1.2 var(--titre); color: var(--gold); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.montant span { font-size: 16px; color: var(--fg); }
.reseau { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(242, 184, 75, .14); border: 1px solid rgba(242, 184, 75, .5); color: var(--gold); font-weight: 700; font-size: 13px; }
.adresse { font-size: 15px; }
.consignes { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.suivi { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px dashed var(--line-2); color: var(--muted); font-size: 14px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); animation: pulse 1.4s ease-in-out infinite; flex: none; }
@keyframes pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.paiement-ok h1, .card h1 { margin: 0; font-size: 22px; }
@media (max-width: 640px) {
  .paiement-grille { grid-template-columns: 1fr; }
  .qr-box { width: min(240px, 100%); margin: 0 auto; }
  .montant { font-size: 26px; }
  .infos { grid-template-columns: 1fr; gap: 2px; }
  .infos dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; opacity: 1; } }

/* ---------------------------------------------------------------- protection anti-capture (comptes clients) */
body.protege .layout { -webkit-user-select: none; user-select: none; }
body.protege .layout input, body.protege .layout textarea { -webkit-user-select: text; user-select: text; }
.filigrane { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.fg-t { fill: rgba(255, 255, 255, .085); font: 600 13px var(--font); }
.voile-msg { display: none; }
body.voile .layout { filter: blur(24px); }
body.voile .voile-msg { display: grid; place-items: center; position: fixed; inset: 0; z-index: 70; font: 700 18px/1.4 var(--titre); color: var(--gold); background: rgba(8, 12, 20, .6); }
@media print {
  body.protege .layout, body.protege .filigrane, body.protege .voile-msg { display: none !important; }
  body.protege::after { content: "Impression désactivée · NewsbotEA"; display: block; padding: 40px; font: 700 20px sans-serif; color: #000; }
}

/* témoignages (client et administration) */
.tm-carte { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tm-carte img { display: block; width: 100%; max-height: 320px; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.tm-carte blockquote { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.tm-carte figcaption { font-size: 13px; color: var(--muted); }
.tm-apercu { display: block; max-width: 260px; max-height: 200px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-2); }
.tm-actions { gap: 10px; }
.tm-actions .ligne .check { margin-top: 0; flex: 1 1 220px; }
.tm-actions .ligne .check input { flex: none; }

/* témoignages : liste du client, à valider */
.tm-ligne { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.tm-ligne img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.tm-ligne p { margin: 0 0 6px; }
.tm-retrait { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tm-retrait .check { margin-top: 0; }
.card.tm-a-valider { border-color: rgba(169, 139, 250, .55); }
.tm-ajout { margin-bottom: 16px; }
.tm-ajout > summary { cursor: pointer; }
.tm-ajout[open] > summary { margin-bottom: 12px; }
.duo { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.duo > div { display: flex; flex-direction: column; }
progress.jauge { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; margin: 8px 0 4px; border: 0; border-radius: 99px; background: var(--line); overflow: hidden; color: var(--gold); }
progress.jauge::-webkit-progress-bar { background: var(--line); border-radius: 99px; }
progress.jauge::-webkit-progress-value { background: linear-gradient(90deg, var(--gold), #ffd98a); border-radius: 99px; }
progress.jauge::-moz-progress-bar { background: linear-gradient(90deg, var(--gold), #ffd98a); border-radius: 99px; }

/* signaux manuels */
.tag-manuel { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(169, 139, 250, .6); color: var(--violet); font-size: 11px; font-weight: 600; }

/* résultats des signaux : saisis ou corrigés par l'administrateur, annonces suivies en direct */
.tag-corrige { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(242, 184, 75, .6); color: var(--gold); font-size: 11px; font-weight: 600; cursor: help; }
.tag-direct { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(38, 217, 242, .5); color: var(--cyan); font-size: 11px; font-weight: 600; }
.tag-non-envoye { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(139, 148, 158, .55); color: var(--muted); font-size: 11px; font-weight: 600; cursor: help; }
.table tr.annule td { color: var(--muted); }
.table td.corriger { white-space: normal; min-width: 96px; }
.table td.corriger .resultat { white-space: nowrap; }
.table td.corriger .valider-main { margin: 0; }
.table td.corriger .valider-main > summary { display: block; padding: 2px 0 0; font-size: 12px; }
.table td.corriger .form { min-width: 220px; }
/* historique des signaux : une ligne par annonce, la prédiction et le signal côte à côte, résultats empilés */
.table.par-annonce td.resultats { white-space: normal; min-width: 170px; }
.res-ligne { white-space: nowrap; }
.res-ligne + .res-ligne { margin-top: 3px; }
.res-ligne.annule { opacity: .6; }
/* réaction de l'or après le chiffre (analyse prévision) */
.table.reaction td { vertical-align: top; }
/* scénarios du PRE sur 5 s, dans une carte étroite : libellés et en-têtes sur plusieurs lignes */
.table.scenarios-pre th, .table.scenarios-pre td:first-child { white-space: normal; }
.table.scenarios-pre th.num { min-width: 72px; }
.obs-reaction { margin: 8px 0 0; }
.form-reaction { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.form-reaction input[name=observation] { flex: 1 1 260px; min-width: 0; }
.card.a-completer { border-color: rgba(242, 184, 75, .5); }
.saisie { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.saisie-libre .saisie { border-top: 0; padding-top: 4px; }
.saisie-tete { margin: 0; }
.saisie-champs { display: grid; gap: 8px 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); align-items: end; }
.saisie-champs label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.saisie-champs label.large { grid-column: 1 / -1; }
.saisie-champs input, .saisie-champs select { padding: 8px 10px; }
.saisie-champs .btn { justify-self: start; }
.saisie-libre > summary { font-size: 14px; color: var(--cyan); padding: 4px 0; }

/* dernier signal et précédents */
.dernier { display: flex; flex-direction: column; gap: 4px; }
.precedents { list-style: none; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.precedents .badge { font-size: 11px; padding: 1px 8px; }

/* veille des news */
.ton-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; border: 1px solid var(--line-2); color: var(--muted); }
.ton-pill.hawk { color: var(--bad); border-color: rgba(240, 96, 122, .55); background: rgba(240, 96, 122, .1); }
.ton-pill.dove { color: var(--ok); border-color: rgba(52, 197, 143, .55); background: rgba(52, 197, 143, .1); }
.ton-pill.petit { padding: 0 7px; font-size: 10.5px; font-weight: 600; margin-right: 4px; }
.veille-bloc { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.veille-bloc .sous-titre { margin: 0; font-size: 15px; }
.veille-titres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.veille-titres a { color: var(--fg); }
.veille-titres a:hover { color: var(--cyan); }

/* analyse fondamentale et bouton de l'IA */
.composantes { line-height: 1.9; }
.composantes-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.agent-ia { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
section.card > .agent-ia { border-top: 0; margin-top: 0; padding-top: 0; }
.agent-ia-tete { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agent-ia form { margin: 0; }

/* prédiction du résultat (avant la publication) */
.prediction { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.prediction .sous-titre { margin: 0; font-size: 15px; }
.prediction p { margin: 0; }
.prediction-ligne { display: inline-block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.prediction-ligne b { color: var(--fg); }

/* calendrier économique */
.filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.filters select { width: auto; min-width: 130px; }
.cal-jour h2 { text-transform: none; }
.cal-jour.aujourdhui { border-color: rgba(38, 217, 242, .45); }
.table.cal td { vertical-align: middle; }
.table.cal .cal-heure { font-family: var(--mono); white-space: nowrap; }
.table.cal tr.cal-passe td { color: var(--muted); }
.table.cal tr.cal-suivi td { background: rgba(242, 184, 75, .07); }
.impact { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; color: var(--muted); }
.impact::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.impact.fort::before { background: var(--bad); }
.impact.moyen::before { background: var(--gold); }
.impact.faible::before { background: #e8d97a; }
.tag-suivi { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(242, 184, 75, .5); color: var(--gold); font-size: 11px; font-weight: 600; white-space: nowrap; }