/* Tapeout — interface sobre (clair par défaut, sombre au choix ou selon le système). Polices système pour le texte,
   Geist (OFL, servie par notre domaine) pour les titres ; le nom est dessiné en SVG. Aucune requête externe, aucun
   style en ligne (CSP) : couleurs par classes, largeurs, positions et délais d'animation via le CSSOM. */
@font-face {
  font-family: "Geist"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bg: #ffffff; --bg2: #f6f7f8; --bg3: #eaecee; --card: #ffffff;
  --line: #e6e8ea; --line2: #d5d8dc;
  --text: #0b0d0f; --text2: #5b6470; --text3: #8b939d;
  --up: #00a82d; --down: #e03c00; --upbg: rgba(0, 168, 45, .09); --downbg: rgba(224, 60, 0, .08);
  --accent: #00a82d; --accentbg: rgba(0, 168, 45, .09); --warn: #a86b00; --warnbg: rgba(168, 107, 0, .1);
  --violet: #6b4ee0; --cyan: #0a7ea4; --gold: #b58500;
  --shadow: 0 1px 2px rgba(11, 13, 15, .04), 0 8px 24px rgba(11, 13, 15, .08);
  /* Colonne fluide : toute la largeur disponible jusqu'à un plafond, avec une gouttière qui grandit doucement ; les
     filets verticaux se posent sur ses bords. Pourcentages et non 100vw, qui compterait la barre de défilement. */
  --gutter: clamp(16px, 2.2vw, 44px); --page-max: 1720px;
  /* Filets de la grille (façon document) et courbes d'animation. */
  --rule: #d7dade;
  --ease-smooth: cubic-bezier(.4, 0, .2, 1); --ease-out-fluid: cubic-bezier(.32, .72, 0, 1); --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --hdr: 64px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #000000; --bg2: #0b0d0f; --bg3: #15181b; --card: #060708;
  --line: #1c1f23; --line2: #2a2e34;
  --text: #ffffff; --text2: #a3acb9; --text3: #6d7682;
  --rule: #2c3138;
  --up: #00c805; --down: #ff5000; --upbg: rgba(0, 200, 5, .1); --downbg: rgba(255, 80, 0, .1);
  --accent: #00c805; --accentbg: rgba(0, 200, 5, .12); --warn: #e3a64a; --warnbg: rgba(227, 166, 74, .12);
  --violet: #a78bfa; --cyan: #4cc3f0; --gold: #e5b53d;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 56px) }
html, body { margin: 0; background: var(--bg); color: var(--text) }
html, body { overflow-x: clip }  /* les règles pleine largeur (100vw) dépassent de la barre de défilement : rien ne doit glisser latéralement */
body { font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column }
a { color: inherit; text-decoration: none }
button, select, input { font: inherit; color: inherit }
button { background: none; border: 0; padding: 0; cursor: pointer }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em }
.num { font-variant-numeric: tabular-nums }
.up { color: var(--up) } .down { color: var(--down) } .muted { color: var(--text2) } .dim { color: var(--text3) } .warn { color: var(--warn) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ---------- bandeau des chiffres clés ---------- */
.gbar { border-bottom: 1px solid var(--rule); background: var(--bg); font-size: 12.5px; color: var(--text2) }
.gbar-in { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); height: 38px; display: flex; align-items: center; gap: 22px; overflow-x: auto; scrollbar-width: none; white-space: nowrap }
.gbar-in::-webkit-scrollbar { display: none }
.gbar b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums }
.gbar a:hover b { text-decoration: underline }
.gbar .chg { font-weight: 600; margin-left: 2px }
.gbar .right { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding-left: 12px }
/* Compte à rebours de la séance : chasse fixe, largeur stable à chaque seconde. */
.gbar .right .num { font-variant-numeric: tabular-nums }
@media (max-width: 1680px) { .gbar .opt { display: none } }
@media (max-width: 1380px) { .gbar-in { gap: 16px; font-size: 12px } }

/* ---------- en-tête ---------- */
.hdr { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule) }
.hdr-in { width: 100%; max-width: var(--page-max); margin: 0 auto; height: var(--hdr); padding: 0 var(--gutter); display: flex; align-items: center; gap: 28px }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--text); flex: none }
.logo-mark { width: 22px; height: 22px; flex: none; display: block }
/* Le nom était un tracé SVG taillé pour « tapeout » ; il est maintenant écrit dans la police d'affichage, servie
   depuis notre domaine. Douze lettres tiennent mieux en texte qu'en chemins, et le nom reste sélectionnable. */
.logo-word { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.045em; line-height: 1;
  margin-top: 2px; white-space: nowrap; user-select: none }
/* Monogramme : T allumé sur une grille de points éteints (afficheur de salle de marché). Animations discrètes :
   allumage point par point au chargement, balayage léger à chaque nouveau relevé de cours ou au survol. */
.logo-mark .d { opacity: .16 }
.logo-mark .d.on { opacity: 1 }
.logo-mark.boot .d.on { animation: tp-boot .34s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--o, 0) * 55ms + 120ms) }
.logo-mark.sweep .d { animation: tp-sweep-off .8s ease-in-out; animation-delay: calc(var(--c, 0) * 75ms) }
.logo-mark.sweep .d.on { animation-name: tp-sweep-on }
@keyframes tp-boot { from { opacity: .16 } to { opacity: 1 } }
@keyframes tp-sweep-off { 0%, 100% { opacity: .16 } 45% { opacity: .62 } }
@keyframes tp-sweep-on { 0%, 100% { opacity: 1 } 45% { opacity: .4 } }
@media (prefers-reduced-motion: reduce) { .logo-mark .d { animation: none !important } }
.nav { display: flex; gap: 2px }
.nav a { padding: 8px 12px; border-radius: 8px; color: var(--text2); font-weight: 500; white-space: nowrap }
.nav a:hover { color: var(--text); background: var(--bg2) }
.nav a[aria-current="page"] { color: var(--text); background: var(--bg2) }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 8px }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 9px; color: var(--text2) }
.icon-btn:hover { background: var(--bg2); color: var(--text) }
.icon-btn svg { width: 18px; height: 18px }
.menu { position: absolute; right: 24px; top: calc(var(--hdr) - 6px); min-width: 230px; background: var(--card); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: grid; z-index: 40 }
.menu a, .menu button { text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 13.5px }
.menu a:hover, .menu button:hover { background: var(--bg2) }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0 }
.menu small { display: block; color: var(--text3); font-size: 12px }
.m-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 4px 12px; font-size: 13.5px }
.m-lang .select { height: 32px; font-size: 13px }

/* Recherche */
.search { position: relative; flex: 1; max-width: 420px }
.search input { width: 100%; height: 40px; padding: 0 64px 0 38px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg2); font-size: 14px; outline: none; transition: border-color .12s, background .12s }
.search input::placeholder { color: var(--text3) }
.search input:focus { border-color: var(--accent); background: var(--bg) }
.search > svg { position: absolute; left: 12px; top: 11px; width: 18px; height: 18px; color: var(--text3); pointer-events: none }
.search kbd { position: absolute; right: 10px; top: 9px; font: 11px var(--sans); color: var(--text3); border: 1px solid var(--line2); border-radius: 5px; padding: 1px 6px; pointer-events: none }
.search input:focus ~ kbd { display: none }
.results { position: absolute; left: 0; right: 0; top: 46px; background: var(--card); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; max-height: min(70vh, 560px); overflow: auto; z-index: 45 }
.results .grp { font-size: 12px; color: var(--text3); padding: 8px 10px 4px; font-weight: 500 }
.results a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px }
.results a[aria-selected="true"] { background: var(--bg2) }
.results a b { font-weight: 600 }
.results a .nm { display: block; color: var(--text2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.results a .r { text-align: right; font-size: 13px }
.results .none { padding: 16px 12px; color: var(--text2) }
.results .ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); color: var(--text2) }
.results .ico svg { width: 16px; height: 16px }

/* ---------- mise en page ---------- */
main#app { flex: 1 }
/* Grille façon document : deux filets verticaux encadrent la colonne de contenu sur toute la hauteur, effacés dès
   que la fenêtre est trop étroite pour les loger hors du contenu. */
body::before, body::after { content: ""; position: fixed; top: var(--hdr); bottom: 0; width: 2px; background: var(--rule); pointer-events: none; z-index: 1 }
body::before { left: max(0px, calc(50% - var(--page-max) / 2)) }
body::after { right: max(0px, calc(50% - var(--page-max) / 2)) }
@media (max-width: 1700px) { body::before, body::after { display: none } }
/* Le contenu passe au-dessus des filets ; l'en-tête garde son propre positionnement (collé en haut). */
.gbar, main#app, .site-foot { position: relative; z-index: 2 }
.page { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 32px var(--gutter) 72px }
/* Règle pleine largeur : le trait traverse l'écran, le contenu reste dans la colonne. */
.rule { position: relative }
.rule::before { content: ""; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; border-top: 1px solid var(--rule) }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--text2); margin-bottom: 14px }
.crumbs a:hover { color: var(--text); text-decoration: underline }
.crumbs span[aria-hidden] { color: var(--text3) }
.title { font-size: 30px; line-height: 1.15 }
/* Titres en Geist, chiffres et interface en police système. */
.title, .tk-id h1, .sec-h h2, .tk-sec > h2, dialog h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em }
.lede { margin: 6px 0 0; color: var(--text2); font-size: 15px; max-width: 80ch }
.page-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding-bottom: 24px }
.page-head::after { content: ""; position: absolute; bottom: 0; left: calc(50% - 50vw); width: 100vw; border-bottom: 1px solid var(--rule) }
.sec { position: relative; margin-top: 40px; padding-top: 40px }
.sec::before { content: ""; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; border-top: 1px solid var(--rule) }
.sec.flush { padding-top: 0 } .sec.flush::before { content: none }
/* Fiche d'un titre : le contenu vit dans une colonne de la grille — la ligne s'arrête à cette colonne, elle ne
   traverse pas l'écran (elle passerait sous la colonne des statistiques). */
.tk-grid .sec::before { left: 0; width: 100% }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px }
.sec-h h2 { font-size: 21px }
.sec-h a.more { color: var(--accent); font-weight: 500; font-size: 14px }
.sec-h a.more:hover { text-decoration: underline }
.hint { color: var(--text3); font-size: 13px }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px }
.card-h h2, .card-h h3 { font-size: 15px }
.empty { color: var(--text2); padding: 28px 0; text-align: center }
.foot-note { margin-top: 48px; color: var(--text3); font-size: 12.5px; line-height: 1.6; max-width: 110ch }
.site-foot { border-top: 1px solid var(--rule); color: var(--text3); font-size: 12.5px }
.site-foot > div { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 18px var(--gutter); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between }
.site-foot a:hover { color: var(--text) }

/* Boutons et contrôles */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line2); background: var(--card); font-weight: 500; font-size: 13.5px; white-space: nowrap }
.btn:hover { background: var(--bg2) }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent) }
.btn.danger { color: var(--down) }
.btn[disabled] { opacity: .5; cursor: not-allowed }
.btn svg { width: 16px; height: 16px }
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; gap: 2px; border-radius: 10px; background: var(--bg2) }
.seg::-webkit-scrollbar { display: none }
.seg button, .seg a { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text2); display: inline-flex; align-items: center; white-space: nowrap }
.seg button:hover, .seg a:hover { color: var(--text) }
.seg [aria-pressed="true"], .seg [aria-current="page"] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line) }
.select { height: 36px; padding: 0 30px 0 12px; border-radius: 9px; border: 1px solid var(--line2); background: var(--card); font-size: 13.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text2) 50%), linear-gradient(135deg, var(--text2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px; background-size: 5px 5px; background-repeat: no-repeat }
.field { height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line2); background: var(--card); font-size: 13.5px; min-width: 0 }
.field:focus, .select:focus { outline: none; border-color: var(--accent) }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 16px }
.tabs::-webkit-scrollbar { display: none }
.tabs a, .tabs button { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); font-size: 13.5px; font-weight: 500; color: var(--text2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }
.tabs a:hover, .tabs button:hover { color: var(--text); border-color: var(--text3) }
.tabs [aria-current="page"], .tabs [aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text) }
.tabs small { color: inherit; opacity: .6; font-weight: 400 }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px }
.toolbar .grow { flex: 1 }

/* Variations, avatars, badges */
.chg { font-weight: 500; white-space: nowrap }
.chg.up { color: var(--up) } .chg.down { color: var(--down) } .chg.flat { color: var(--text2) }
.chg-pill { display: inline-block; padding: 3px 8px; border-radius: 7px; font-weight: 600; font-size: 13px; white-space: nowrap }
.av { flex: none; position: relative; overflow: hidden; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: -.02em; color: #fff; background: #64748b }
.av.logo { background: #fff; color: transparent; box-shadow: inset 0 0 0 1px rgba(15, 20, 25, .08) }
.av.logo.lt { background: #1b2130 }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 9% }
/* Logo déjà opaque (il porte son propre fond) : il remplit la pastille, sans plaque ni marge. */
.av.logo.full { background: transparent; box-shadow: inset 0 0 0 1px rgba(15, 20, 25, .1) }
.av.logo.full img { padding: 0; object-fit: cover }
:root[data-theme="dark"] .av.logo.full { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) }
:root[data-theme="dark"] .av.logo { box-shadow: none }
.av.lg { width: 48px; height: 48px; font-size: 16px }
.av.sm { width: 24px; height: 24px; font-size: 9.5px }
.av.t-compute { background: #2f5bd3 } .av.t-interconnect { background: #0f8b8d } .av.t-optics { background: #7c3aed } .av.t-memory { background: #c2410c }
.av.t-systems { background: #334155 } .av.t-power { background: #b45309 } .av.t-neocloud { background: #0e7490 } .av.t-equipment { background: #4d7c0f }
.av.t-software { background: #be185d } .av.t-platform { background: #111827 } .av.t-other { background: #6b7280 } .av.t-etf { background: #475569 }
:root[data-theme="dark"] .av.t-platform { background: #3b4252 }
.av.logo, :root[data-theme="dark"] .av.logo.t-platform { background: #fff } .av.logo.lt, :root[data-theme="dark"] .av.logo.lt.t-platform { background: #1b2130 }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--bg2); color: var(--text2); font-size: 12px; font-weight: 600; white-space: nowrap }
/* Étiquettes : sobres, sans fond teinté ; la couleur est réservée aux chiffres (hausse / baisse) et aux états. */
/* Fait chiffré d'un dépôt SEC (montant d'un Form 4, rubrique 8-K, dérive historique) : posé dans la ligne de méta. */
.fact { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--bg2); color: var(--text2); font-size: 11.5px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums }
.fact.up { color: var(--up) } .fact.down { color: var(--down) } .fact.dim { color: var(--text3) }
.tag, .mode { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line2); color: var(--text2); font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap }
.meter { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); white-space: nowrap }
.meter .bars { display: inline-flex; gap: 2px }
.meter i { width: 4px; height: 12px; border-radius: 1px; background: var(--line2) }
.meter i.on { background: var(--text2) }
.meter.hi { color: var(--down) } .meter.hi i.on { background: var(--down) }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text3) }
.dot.on { background: var(--up) }
.spark { display: block }
.spark path:not(.veil) { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke }
.spark.up path { stroke: var(--up) } .spark.down path { stroke: var(--down) }
/* Trame de points sous la courbe : remplie par le motif, jamais tracée (sinon le contour de la zone apparaît). */
.spark path.veil { stroke: none }

/* ---------- tableaux ---------- */
.tbl-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px }
/* En-tête collé sous la barre du site : seulement hors zone de défilement horizontal (sinon il se décale sur les lignes). */
@media (min-width: 981px) { .tbl-wrap.fit { overflow: visible } .tbl-wrap.fit .tbl th { position: sticky; top: var(--hdr); z-index: 2 } }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px }
.tbl th { background: var(--bg); font-size: 12.5px; font-weight: 600; color: var(--text2); text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none }
.tbl th[data-k] { cursor: pointer }
.tbl th[data-k]:hover { color: var(--text) }
.tbl th[aria-sort] { color: var(--text) }
.tbl th[aria-sort="descending"]::after { content: " ↓" } .tbl th[aria-sort="ascending"]::after { content: " ↑" }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums }
.tbl th.l, .tbl td.l { text-align: left }
/* La courbe est un bloc : sans cela elle se colle à gauche pendant que son en-tête reste à droite. */
.tbl td.spk .spark { margin-left: auto }
.tbl tbody tr { transition: background-color 120ms var(--ease-smooth) }
.tbl tbody tr:hover { background: var(--bg2) }
.tbl tr[data-href] { cursor: pointer }
.tbl .rank { color: var(--text3); width: 36px }
.tbl .name { display: flex; align-items: center; gap: 12px; min-width: 200px; max-width: 320px }
.tbl .name b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis }
.tbl .name small { display: block; color: var(--text2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis }
.tbl .name .txt { min-width: 0; overflow: hidden }
.tbl.compact td { padding: 9px 12px }
.tbl.plain th { position: static }
.tbl .two { display: grid; gap: 1px } .tbl .two small { color: var(--text2); font-size: 12px }
.tbl td.wrap { white-space: normal; min-width: 220px }
.bar { display: inline-block; width: 56px; height: 5px; border-radius: 3px; background: var(--bg3); overflow: hidden; vertical-align: middle; margin-right: 8px }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px }

/* ---------- marchés (accueil) ---------- */
.indices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 36px }
.kcard { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); position: relative; min-width: 0 }
a.kcard:hover { border-color: var(--line2); background: var(--bg2) }
.kcard .k { font-size: 13px; color: var(--text2); display: flex; justify-content: space-between; gap: 8px }
.kcard .v { font-size: 22px; font-weight: 600; letter-spacing: -.02em }
.kcard .s { font-size: 13px; color: var(--text2) }
.kcard .spark { position: absolute; right: 16px; bottom: 16px }
.movers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px }
.mlist { list-style: none; margin: 0; padding: 0 }
.mlist li a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0 }
.mlist li + li a { border-top: 1px solid var(--line) }
.mlist li a:hover b { text-decoration: underline }
.mlist b { font-weight: 600 }
.mlist .nm { display: block; color: var(--text2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mlist .r { text-align: right; display: grid; gap: 1px; font-size: 13.5px }
.heat { display: grid; gap: 18px }
.heat-g h3 { font-size: 13.5px; font-weight: 600; display: flex; justify-content: space-between; margin-bottom: 8px }
.heat-t { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px }
.tile { display: grid; gap: 1px; padding: 9px 10px; border-radius: 8px; background: var(--bg2); font-size: 12.5px }
.tile b { font-weight: 600; font-size: 13px }
.tile:hover { outline: 2px solid var(--text); outline-offset: -2px }
.h-p3 { background: color-mix(in srgb, var(--up) 55%, var(--bg)); color: #fff } .h-p2 { background: color-mix(in srgb, var(--up) 32%, var(--bg)) } .h-p1 { background: color-mix(in srgb, var(--up) 15%, var(--bg)) }
.h-n1 { background: color-mix(in srgb, var(--down) 15%, var(--bg)) } .h-n2 { background: color-mix(in srgb, var(--down) 32%, var(--bg)) } .h-n3 { background: color-mix(in srgb, var(--down) 55%, var(--bg)); color: #fff }

/* Listes d'actualités et de dépôts */
.feed { list-style: none; margin: 0; padding: 0 }
.feed li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line) }
.feed li:last-child { border-bottom: 0 }
.feed .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--text2) }
.feed .t { font-weight: 500; line-height: 1.45 }
.feed a.t:hover { text-decoration: underline }
.feed .tks { display: inline-flex; flex-wrap: wrap; gap: 4px }
.feed .tks a { font-size: 12px; font-weight: 600; color: var(--accent) }
.feed .tks a:hover { text-decoration: underline }
.feed .imp { font-weight: 600 }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px }

/* ---------- fiche d'un titre ---------- */
.tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "top side" "rest side"; column-gap: 40px; align-items: start }
.tk-top { grid-area: top } .tk-rest { grid-area: rest } .tk-side { grid-area: side }
.tk-id { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.tk-id h1 { font-size: 30px; line-height: 1.1 }
.tk-id .badge { font-size: 13px }
.tk-actions { display: flex; gap: 8px; margin-left: auto; position: relative }
.tk-price { margin: 18px 0 6px }
.tk-price .big { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1 }
.tk-price .line { margin-top: 6px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline }
.tk-price .when { color: var(--text2) }
.tk-status { display: inline-flex; align-items: center; gap: 7px; color: var(--text2); font-size: 13px; margin-top: 4px }
.chart-card { margin-top: 18px }
.pc { height: 380px; position: relative }
.pc .empty { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; background: var(--bg) }
.chart-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 0; border-top: 1px solid var(--line); margin-top: 8px }
.ranges { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; max-width: 100% }
.ranges::-webkit-scrollbar { display: none }
.ranges button { height: 32px; min-width: 40px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text2) }
.ranges button:hover { color: var(--text); background: var(--bg2) }
.ranges button[aria-pressed="true"] { color: var(--text); background: var(--bg3) }
.chart-opts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.tog { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; color: var(--text2); border: 1px solid var(--line) }
.tog:hover { color: var(--text) }
.tog[aria-pressed="true"] { color: var(--text); border-color: var(--line2); background: var(--bg2) }
.tog[aria-pressed="false"] .ev-dot { opacity: .35 }
.tog:disabled { opacity: .4; cursor: default }
.ev-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block }
.ev-dot.news { background: var(--cyan) } .ev-dot.filing { background: var(--warn); border-radius: 2px } .ev-dot.dividend { background: var(--violet) }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text2) }
.legend i { display: inline-block; width: 12px; height: 2px; vertical-align: middle; margin-right: 5px }
.legend .l21 { background: var(--cyan) } .legend .l50 { background: var(--gold) } .legend .l200 { background: var(--violet) }
.events { margin-top: 12px; display: grid; gap: 2px; min-height: 40px }
.events .cap { font-size: 12.5px; color: var(--text3); margin-bottom: 4px }
.events .ev { display: grid; grid-template-columns: 70px 92px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 5px 0; font-size: 13.5px }
.events .ev time { color: var(--text3); font-size: 12.5px }
.events .ev .k { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.events .ev.news .k { color: var(--cyan) } .events .ev.filing .k { color: var(--warn) } .events .ev.dividend .k { color: var(--violet) }
.events .ev.up .k { color: var(--up) } .events .ev.down .k { color: var(--down) }
.events .ev .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.events .ev .t a:hover { text-decoration: underline }
.events .ev small { color: var(--text3); white-space: nowrap }
.subnav { position: sticky; top: var(--hdr); z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-top: 36px }
.subnav::-webkit-scrollbar { display: none }
.subnav a { padding: 14px 12px 12px; color: var(--text2); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 180ms var(--ease-smooth), border-bottom-color 180ms var(--ease-smooth) }
.subnav a:hover { color: var(--text) }
.subnav a[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text) }
/* Flux d'initiés d'un titre (Form 4 des 90 derniers jours), au-dessus de ses dépôts. */
.insider { margin-bottom: 18px }
.insider .ag-h3 { margin-bottom: 8px }
.insider p { margin-top: 6px; font-size: 12.5px }
.ins-row { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums }
.ins-row > span { display: inline-flex; align-items: baseline; gap: 8px }
.ins-row .dim { font-size: 12.5px; font-weight: 400 }
.tk-sec { padding-top: 32px }
/* Changement d'onglet : le panneau entrant se pose, dans le sens du déplacement (rien au premier affichage ;
   mouvement réduit = instantané, règle générale en fin de feuille). */
@keyframes tk-in { from { opacity: 0; transform: translate3d(14px, 0, 0) } to { opacity: 1; transform: none } }
@keyframes tk-in-back { from { opacity: 0; transform: translate3d(-14px, 0, 0) } to { opacity: 1; transform: none } }
.tk-sec.in { animation: tk-in 200ms var(--ease-out-fluid) both }
.tk-sec.in.back { animation-name: tk-in-back }
.tk-sec > h2 { font-size: 21px; margin-bottom: 14px }
.about { color: var(--text); line-height: 1.65; margin: 0 0 18px; max-width: 80ch }
.about.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }
.link { color: var(--accent); font-weight: 500 }
.link:hover { text-decoration: underline }
.kstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 24px; margin: 0 }
.kstats div { display: grid; gap: 3px; min-width: 0 }
.kstats dt { color: var(--text2); font-size: 13px }
.kstats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis }
.perf { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.perf div { display: grid; gap: 2px; padding: 12px 10px; text-align: center; border-right: 1px solid var(--line) }
.perf div:last-child { border-right: 0 }
.perf span { font-size: 12.5px; color: var(--text2) }
.perf b { font-weight: 600; font-variant-numeric: tabular-nums }
.side-sticky { position: sticky; top: calc(var(--hdr) + 20px); display: grid; gap: 16px }
.kv { display: grid }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px }
.kv > div:last-child { border-bottom: 0 }
.kv dt { color: var(--text2) }
.kv dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.kv .note { display: block; color: var(--text3); font-size: 12px; font-weight: 400 }
.range52 { margin: 4px 0 2px }
.range52 .track { position: relative; height: 4px; border-radius: 2px; background: var(--bg3) }
.range52 .track i { position: absolute; top: -4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--card); border: 2px solid var(--text) }
.range52 .ends { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text2); margin-top: 8px }
.div-hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px }
.div-hero div { display: grid; gap: 3px }
.div-hero span { color: var(--text2); font-size: 13px }
.div-hero b { font-size: 20px; font-weight: 600; letter-spacing: -.01em }
.basis { margin: 12px 0 0; padding-left: 18px; color: var(--text2); line-height: 1.6; font-size: 13.5px }
.qbars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: 180px; margin: 8px 0 10px }
.qbars > div { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; font-size: 11.5px; color: var(--text2) }
.qbars .b { flex: 1; width: 100%; max-width: 44px; position: relative }
.qbars .b i { position: absolute; left: 0; right: 0; bottom: 0; min-height: 2px; border-radius: 5px 5px 2px 2px; background: var(--accent) }
.qbars .b i.neg { background: var(--down) }
.peers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px }
.peer { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px }
.peer:hover { background: var(--bg2) }
.peer b { font-weight: 600 } .peer small { display: block; color: var(--text2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.peer .r { text-align: right; display: grid; font-size: 13px }
.sig-list { list-style: none; margin: 0; padding: 0 }
.sig-list li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline }
.sig-list li:last-child { border-bottom: 0 }
.sig-list li.dim { display: block }
.sig-list time { color: var(--text3); font-size: 12.5px }
.sig-list .lbl b { font-weight: 600 }
.sig-list .lbl small { display: block; color: var(--text3); font-size: 12px }
.skel { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--bg2), var(--bg3), var(--bg2)); background-size: 200% 100%; animation: sk 1.2s linear infinite }
.skel.h40 { height: 40px } .skel.w40 { width: 40% } .skel.w60 { width: 60% }
@keyframes sk { to { background-position: -200% 0 } }

/* ---------- agents ---------- */
.ag-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: 28px }
.ag-pnl { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; margin-top: 6px }
.ag-sub { margin-top: 6px; color: var(--text2); font-size: 15px }
.ag-sub b { font-weight: 600 }
.stats-row { display: grid; grid-template-columns: repeat(4, auto); gap: 6px 40px; margin: 0 }
.stats-row div { display: grid; gap: 2px }
.stats-row dt { font-size: 13px; color: var(--text2) }
.stats-row dd { margin: 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums }
.ag-live { display: inline-flex; align-items: center; gap: 6px; color: var(--up); font-size: 13px; font-weight: 500 }
.ag-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--up) }
.ag-controls { display: flex; flex-wrap: wrap; gap: 8px }
.ag-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 10px; font-size: 13px; color: var(--text2) }
.ag-legend span { display: inline-flex; align-items: center; gap: 7px }
.ag-legend i { width: 16px; height: 3px; border-radius: 2px }
.ag-legend b { color: var(--text); font-weight: 600 }
#raceChart { height: 320px; position: relative }
.race-empty { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; background: var(--card); color: var(--text2) }
.ag-agents { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 16px 0 }
.ag-agent { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-align: left }
.ag-agent:hover { border-color: var(--line2); background: var(--bg2) }
.ag-agent.on { border-color: var(--text) }
.ag-agent-top { display: flex; align-items: center; gap: 9px; min-width: 0 }
.ag-agent-top b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ag-state { margin-left: auto; font-size: 12px; color: var(--text3); white-space: nowrap }
.ag-state.run { color: var(--up) }
.ag-agent-pnl { display: flex; align-items: baseline; gap: 10px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.ag-agent-pnl small { font-size: 14px; font-weight: 500 }
.ag-spark { width: 100%; height: 40px; display: block }
.ag-spark path { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke }
.ag-spark .zero { stroke: var(--line2); stroke-dasharray: 3 3 }
.ag-agent dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 }
.ag-agent dt { font-size: 12px; color: var(--text2) }
.ag-agent dd { margin: 2px 0 0; font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums }
.ag-agent-foot { font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ac-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; vertical-align: -1px }
.expo { display: flex; height: 4px; border-radius: 3px; overflow: hidden; background: var(--bg3) }
.expo i { display: block; height: 100% }
.expo .l { background: var(--up) } .expo .s { background: var(--down) }
.side-tag { font-size: 12.5px; font-weight: 600 }
.side-tag.long { color: var(--up) } .side-tag.short { color: var(--down) }
.ag-two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; margin-top: 16px }
.ag-title { display: flex; align-items: center; gap: 10px }
.ag-mandate { margin: 0 0 12px; color: var(--text2); line-height: 1.6; max-width: 90ch }
.ag-policy { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px }
.ag-policy span { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--bg2); color: var(--text2) }
.ag-policy b { color: var(--text); font-weight: 600 }
.ag-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 -20px 14px; padding: 0 16px; overflow-x: auto; scrollbar-width: none }
.ag-tabs button { padding: 10px; font-weight: 500; color: var(--text2); border-bottom: 2px solid transparent; margin-bottom: -1px }
.ag-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text) }
.ag-alloc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px }
.alloc { display: grid; gap: 8px; align-content: start }
.alloc .cap { font-size: 12.5px; color: var(--text2); margin-bottom: 2px }
.alloc .row { display: grid; grid-template-columns: 128px 1fr 44px; align-items: center; gap: 10px; font-size: 13px }
.alloc .row b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.alloc .bar2 { height: 8px; border-radius: 4px; background: var(--bg3); overflow: hidden }
.alloc .bar2 i { display: block; height: 100%; border-radius: 4px }
.alloc .bar2 i.l { background: var(--up) } .alloc .bar2 i.s { background: var(--down) } .alloc .bar2 i.t { background: var(--accent) }
.alloc .row span { text-align: right; color: var(--text2); font-variant-numeric: tabular-nums }
.ag-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px } .ag-cols > div { min-width: 0; overflow-x: auto }
.ag-h3 { margin: 18px 0 8px; font-size: 13.5px; font-weight: 600 }
.ag-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px }
.ag-minis span { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--bg2) }
.ag-minis em { font-style: normal; font-size: 12px; color: var(--text2) }
.ag-minis b { font-weight: 600; font-variant-numeric: tabular-nums }
.ag-list, .ag-notes, .ag-feed { list-style: none; margin: 0; padding: 0; display: grid }
.ag-list li { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px }
.ag-list li:last-child { border-bottom: 0 }
.ag-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px }
.ag-line time { font-size: 12.5px; color: var(--text3) }
.ag-line .res { margin-left: auto; font-variant-numeric: tabular-nums }
.ag-why { color: var(--text2); font-size: 13px; line-height: 1.55 }
.ag-why b { color: var(--text); font-weight: 500 }
.ag-why .thesis { display: block; margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--line2); color: var(--text) }
.ag-why .thesis i { font-style: normal; color: var(--text3) }
.ag-notes li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.5 }
.ag-notes li:last-child { border-bottom: 0 }
.ag-notes small { display: block; color: var(--text3); font-size: 12px; margin-top: 2px }
/* États (ordres, services) : point de couleur + libellé neutre. */
.status, .sp-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text2); white-space: nowrap }
.status::before, .sp-pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--text3) }
.status.filled::before, .sp-pill.operational::before { background: var(--up) }
.status.rejected::before, .sp-pill.down::before { background: var(--down) }
.status.pending::before, .sp-pill.degraded::before { background: var(--warn) }
.sp-pill.limited::before { background: var(--accent) }
.status.cancelled, .sp-pill.idle { color: var(--text3) }
.sp-pill.degraded { color: var(--warn) } .sp-pill.down { color: var(--down) }
.mode.conviction { color: var(--text) }
.ag-feed-card { position: sticky; top: calc(var(--hdr) + 16px); max-height: calc(100vh - var(--hdr) - 32px); display: flex; flex-direction: column }
.ag-feed { overflow: auto }
.ag-feed li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px }
.ag-feed li:last-child { border-bottom: 0 }
.ag-feed .ac-sw { margin-top: 5px }
.ag-feed .sub { grid-column: 2; color: var(--text3); font-size: 12px; line-height: 1.45 }
.ag-backstage summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none }
.ag-backstage summary::-webkit-details-marker { display: none }
.ag-backstage summary::before { content: "›"; color: var(--text3); transition: transform .15s }
.ag-backstage[open] summary::before { transform: rotate(90deg) }

/* ---------- statut des services ---------- */
.sp { max-width: 1040px }
.sp-banner { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--card) }
.sp-banner.down strong { color: var(--down) } .sp-banner.degraded strong { color: var(--warn) }
.sp-banner strong { display: block; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.02em }
.sp-banner small { display: block; margin-top: 2px; color: var(--text2); font-size: 13px }
.sp-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--text3) }
.sp-banner.operational .sp-dot { background: var(--up) }
.sp-banner.degraded .sp-dot { background: var(--warn) }
.sp-banner.down .sp-dot { background: var(--down) }
.sp-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card) }
.sp-row { padding: 16px 18px; border-bottom: 1px solid var(--line) }
.sp-row:last-child { border-bottom: 0 }
.sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px }
.sp-name { min-width: 0 }
.sp-name b { font-weight: 600 }
.sp-name small, .sp-state small { display: block; color: var(--text3); font-size: 12.5px; margin-top: 2px }
.sp-state { flex: none; text-align: right }
.sp-note { margin: 8px 0 0; font-size: 13px; color: var(--text2) }
.sp-note.degraded { color: var(--warn) } .sp-note.down { color: var(--down) }
.sp-bars { display: flex; gap: 2px; height: 30px; margin-top: 12px }
.sp-bars i, .sp-legend i { flex: 1; min-width: 0; border-radius: 2px; background: var(--bg3) }
.sp-bars i:hover { opacity: .7 }
.sp-bars i.operational, .sp-legend i.operational { background: var(--up) }
.sp-bars i.degraded, .sp-legend i.degraded { background: var(--warn) }
.sp-bars i.down, .sp-legend i.down { background: var(--down) }
.sp-axis { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--text3); font-size: 12px }
.sp-axis span:nth-child(2) { color: var(--text2); text-align: center }
.sp-inc { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card) }
.sp-inc li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px }
.sp-inc li:last-child { border-bottom: 0 }
.sp-inc .sp-pill { flex: none; min-width: 78px; margin-top: 1px }
.sp-inc small { display: block; color: var(--text3); font-size: 12.5px; margin-top: 2px }
.sp-inc li.done .sp-pill { opacity: .6 }
.sp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 28px; line-height: 1.5 }
.sp-foot { margin: 8px 0 0; line-height: 1.5 }
.sp-legend span { display: inline-flex; align-items: center; gap: 6px }
.sp-legend i { flex: none; display: inline-block; width: 10px; height: 10px }
@media (max-width: 640px) {
  .sp-row { padding: 14px }
  .sp-axis span:first-child, .sp-axis span:last-child { display: none }
  .sp-axis { justify-content: flex-start }
  .sp-axis span:nth-child(2) { text-align: left }
  .sp-inc li { padding: 12px 14px }
}

/* ---------- toast, dialogues ---------- */
/* ---------- actionnariat : champ de points, 1 point = 0,1 % du capital (trame du monogramme) ---------- */
.own { display: grid; gap: 22px }
.own-head { display: flex; flex-wrap: wrap; gap: 10px 38px }
.own-k { display: flex; flex-direction: column; gap: 2px }
.own-k b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.own-k span { font-size: 12.5px; color: var(--text2) }
/* Champ de points : une grille continue de 20 rangées, remplie colonne par colonne. Chaque détenteur occupe une
   suite de colonnes ; une teinte sur deux est adoucie pour que deux voisins de même nature restent distincts. */
.own-map { display: block; width: 100%; height: auto; overflow: visible }
.own-map a { cursor: pointer }
.own-map .od { transition: fill 240ms var(--ease-smooth), opacity 180ms var(--ease-smooth), transform 180ms var(--ease-out-fluid) }
.own-map .ow .od { fill: var(--text3) }
.own-map .ow.none .od { fill: var(--line2) }
.own-map .ow.tail .od { fill: var(--text3); opacity: .45 }
.own-map .ow.active .od { fill: var(--cyan) }
.own-map .ow.corp .od { fill: var(--violet) }
.own-map .ow.person .od { fill: var(--gold) }
.own-map .ow.broker .od { fill: var(--text3) }
.own-map .ow.activist .od { fill: var(--down) }
.own-map .ow.alt .od { opacity: .6 }
.own-map .ow[data-h]:hover .od { stroke: var(--text); stroke-width: .7 }
/* Allumage en vague : le délai de chaque point est posé par le CSSOM (la CSP interdit un style en ligne). */
.own-map.lighting .od { animation: dot-on 420ms var(--ease-out-fluid) both }
@keyframes dot-on { from { opacity: 0; transform: scale(.4) } to { opacity: 1; transform: none } }
.own-map .od { transform-box: fill-box; transform-origin: center }

/* Légende : seulement les natures présentes dans ce titre. */
.own-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 12.5px; color: var(--text2) }
.own-legend li { display: inline-flex; align-items: center; gap: 7px }
.own-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--text3) }
.own-legend i.active { background: var(--cyan) } .own-legend i.corp { background: var(--violet) }
.own-legend i.person { background: var(--gold) } .own-legend i.activist { background: var(--down) }
.own-legend i.tail { background: var(--text3); opacity: .45 } .own-legend i.none { background: var(--line2) }

/* Liaison au survol : la grappe et sa ligne ressortent, le reste s'efface. */
.own-hl .own-map .ow[data-h]:not(.hl) .od { opacity: .12 }
.own-hl .own-map .ow.none .od, .own-hl .own-map .ow.tail .od { opacity: .12 }
.own-hl .own-map .hl .od { opacity: 1; transform: scale(1.22) }
.own-hl .own-list .own-row:not(.hl) { opacity: .3 }
.own-hl .own-list .own-row.hl > a, .own-hl .own-list .own-row.hl > .own-cell { background: var(--bg2) }
.own-row { transition: opacity 180ms var(--ease-smooth) }

.own-note { font-size: 12.5px; color: var(--text2); cursor: help; margin: -6px 0 0 }
.own-note .warn { color: var(--warn) }

/* Marqueur d'un détenteur : sa favicon, sinon un point de la couleur de sa grappe. Pas de plaque colorée sous un
   logo — c'est l'empilement carré sur carré qui salissait la liste. */
.mk { width: 26px; height: 26px; display: grid; place-items: center; flex: none; border-radius: 7px }
.mk::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--text3) }
.mk.active::after { background: var(--cyan) } .mk.corp::after { background: var(--violet) }
.mk.person::after { background: var(--gold) } .mk.activist::after { background: var(--down) }
.mk.has-logo { background: #fff } .mk.has-logo::after { display: none }
.mk img { max-width: 19px; max-height: 19px; width: auto; height: auto; opacity: 0; transition: opacity 200ms var(--ease-smooth) }
.mk.has-logo img { opacity: 1 }

/* Flux du trimestre : barre divergente autour d'un axe — le côté qui dépasse est le solde, sans soustraction.
   Un rail traverse toute la largeur : l'espace vide devient une échelle, et non un manque. Le segment hachuré est
   ce qui a été déclaré depuis la clôture du trimestre, sur la même échelle. */
.own-flow { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--card) }
.own-flow-h { display: flex; align-items: baseline; gap: 12px }
.own-flow-h .hint { cursor: help }
.own-net { margin-left: auto; font-size: 25px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums }
.own-diverge { display: grid; grid-template-columns: 1fr 1fr; align-items: center; height: 22px; position: relative }
.own-diverge::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line) }
.own-diverge::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line2) }
.own-diverge .side { display: flex; height: 14px; gap: 2px; position: relative }
.own-diverge .side.out { justify-content: flex-end }
.own-diverge .seg { display: block; height: 100%; border-radius: 3px; min-width: 3px; cursor: help;
  transition: width 550ms var(--ease-out-fluid), filter 150ms var(--ease-smooth) }
.own-diverge .seg:hover { filter: brightness(1.2) }
.own-diverge .seg.in { background: var(--up) }
.own-diverge .seg.up { background: color-mix(in srgb, var(--up) 58%, var(--bg)) }
.own-diverge .seg.down { background: color-mix(in srgb, var(--down) 58%, var(--bg)) }
.own-diverge .seg.out { background: var(--down) }
/* Hachuré : déclaré après la photo trimestrielle — même échelle, autre nature. */
.own-diverge .side.in .seg.fresh { background: repeating-linear-gradient(115deg, var(--up) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 1px var(--up) }
.own-diverge .side.out .seg.fresh { background: repeating-linear-gradient(115deg, var(--down) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 1px var(--down) }
.own-fresh { display: flex; align-items: center; gap: 8px; margin: -4px 0 0; font-size: 12px; color: var(--text3) }
.own-fresh i { width: 22px; height: 8px; border-radius: 2px; background: repeating-linear-gradient(115deg, var(--text2) 0 3px, transparent 3px 7px);
  box-shadow: inset 0 0 0 1px var(--text3) }

/* Détenteurs : la ligne entière ouvre son dépôt ; la couleur du marqueur dit la nature, sans la nommer. */
.own-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.own-row > a, .own-row > .own-cell { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; background: var(--card); color: inherit }
.own-row > a:hover { background: var(--bg2) }
.own-id { display: grid; min-width: 0 }
.own-id b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.own-id small { color: var(--text3); font-size: 11.5px }
.own-pct { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums }
.own-pct small { font-size: 12px; font-weight: 500 }

/* Mouvements déclarés : une seule liste classée par ampleur, barre proportionnelle par ligne. */
/* Mouvements déclarés, en explorateur : filtres par nature, tri, et déploiement de la liste. */
.own-moves { display: grid; gap: 12px }
.own-moves .toolbar { margin: 0 }
.own-moves .seg small { opacity: .55; font-size: 11px; margin-left: 4px; font-variant-numeric: tabular-nums }
.own-moves .mv.beyond { display: none }
.own-moves.all .mv.beyond { display: grid }
.mv-more { justify-self: start; font-size: 13px }
.mv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.mv { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(56px, 120px) auto; align-items: center; gap: 12px; padding: 9px 12px; background: var(--card) }
.mv:hover { background: var(--bg2) }
.mv-id { display: grid; min-width: 0 }
.mv-id b { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mv-id small { color: var(--text3); font-size: 11.5px; font-variant-numeric: tabular-nums }
.mv-bar { display: block; height: 8px; border-radius: 3px; background: var(--bg3) }
.mv-bar i { display: block; height: 100%; border-radius: 3px; transition: width 500ms var(--ease-out-fluid) }
.mv-up .mv-bar i { background: var(--up) } .mv-down .mv-bar i { background: var(--down) }
.mv-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap }
.mv-up .mv-val { color: var(--up) } .mv-down .mv-val { color: var(--down) }
/* La date n'est pas décorative : un 13F de juin et un 13D/G de septembre ne se lisent pas de la même façon. */
.mv-val small { display: block; color: var(--text3); font-weight: 400; font-size: 11px }
@media (max-width: 640px) { .mv { grid-template-columns: 26px minmax(0, 1fr) auto } .mv-bar { display: none } }

/* Infobulles : une mesure expliquée en une phrase. Le libellé porte un pointillé discret ; la boîte est unique,
   posée sur <body> et positionnée par le CSSOM (la CSP interdit les attributs style), donc jamais coupée. */
.tip { border-bottom: 1px dotted var(--line2); cursor: help }
.tipbox { position: fixed; left: 0; top: 0; z-index: 70; max-width: 280px; padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--line2); background: var(--card); color: var(--text2); font-size: 12.5px; line-height: 1.5;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(2px);
  transition: opacity 120ms var(--ease-smooth), transform 160ms var(--ease-out-fluid) }
.tipbox.on { opacity: 1; transform: none }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 60; max-width: min(420px, calc(100vw - 40px)); padding: 12px 16px; border-radius: 12px; background: var(--text); color: var(--bg); box-shadow: var(--shadow); font-size: 13.5px }
.toast.err { background: var(--down); color: #fff }
dialog { background: var(--card); color: var(--text); border: 1px solid var(--line2); border-radius: 16px; padding: 24px; width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow) }
dialog::backdrop { background: rgba(10, 12, 16, .45) }
dialog h2 { font-size: 20px; margin-bottom: 6px }
dialog p { margin: 0 0 16px; color: var(--text2) }
dialog .field, dialog .select { width: 100%; margin-bottom: 10px; height: 40px }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px }

/* ---------- connexion ---------- */
.login-page { display: grid; place-items: center; padding: 16px }
.login { width: min(360px, 100%); display: grid; gap: 24px; padding: 32px 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--card) }
.login .logo-mark { width: 30px; height: 30px } .login .logo-word { height: 27px; margin-top: 5px }
.login-form { display: grid; gap: 10px }
.login-form label { font-size: 13px; color: var(--text2) }
.login-form input { height: 42px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg); font-size: 15px }
.login-form input:focus { border-color: var(--accent); outline: none }
.login-form .btn { height: 42px; justify-content: center; font-size: 14px }
.login-error { margin: 0; font-size: 13px; color: var(--down) }

/* ---------- adaptatif ---------- */
@media (max-width: 1180px) {
  .hdr-in { gap: 18px }
  .search { min-width: 200px }
  .tk-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "side" "rest" }
  .tk-side { margin-top: 24px }
  .side-sticky { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }
  .ag-two { grid-template-columns: minmax(0, 1fr) } .ag-feed-card { position: static; max-height: 440px }
  .nav a { padding: 8px 9px }
}
@media (max-width: 980px) {
  .nav { display: none }
  .hdr-in { gap: 14px }
  .search { max-width: none }
  .movers { grid-template-columns: minmax(0, 1fr) }
  .kstats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .perf { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .perf div:nth-child(4) { border-right: 0 } .perf div:nth-child(n + 5) { border-top: 1px solid var(--line) }
  .div-hero { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cols2 { grid-template-columns: minmax(0, 1fr) }
  .menu .m-nav { display: block }
}
.menu .m-nav { display: none }
@media (max-width: 640px) {
  :root { --hdr: 58px }
  .hdr .logo-word { display: none }
  .gbar-in { gap: 18px }
  .title, .tk-id h1 { font-size: 26px }
  .page { padding: 20px var(--gutter) 56px }
  .tk-price .big { font-size: 34px }
  .pc { height: 300px }
  .ranges button { min-width: 0; padding: 0 8px; height: 30px }
  .tk-actions { margin-left: 0 }
  .events .ev { grid-template-columns: 56px minmax(0, 1fr); gap: 2px 10px } .events .ev .k { grid-column: 2 } .events .ev .t { grid-column: 1 / -1 } .events .ev small { display: none }
  .tbl .name { min-width: 150px }
  .tbl .hm { display: none }
  .tbl td, .tbl th { padding-left: 8px; padding-right: 8px }
  .stats-row { grid-template-columns: repeat(2, auto) } .ag-pnl { font-size: 32px }
  .ag-alloc, .ag-cols { grid-template-columns: minmax(0, 1fr) } #raceChart { height: 240px }
  .search kbd { display: none }
  .menu { right: 14px }
}

/* Arène sans agent : un seul bloc qui explique et donne la marche à suivre. */
.ag-empty { max-width: 68ch; padding: 28px }
.ag-empty h2 { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 8px }
.ag-empty p { margin: 0; color: var(--text2); line-height: 1.6 }
.ag-steps { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px }
.ag-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--text2); font-size: 13.5px; line-height: 1.55 }
.ag-steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line2); border-radius: 50%; color: var(--text); font-size: 12px; font-weight: 600 }

/* ---------- fil de dépêches (actualités, dépôts SEC) ---------- */
.wire { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start }
.wire-list { list-style: none; margin: 0; padding: 0 }
.wire-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; padding: 13px 8px 13px 0; border-bottom: 1px solid var(--line) }
.wire-row:last-child { border-bottom: 0 }
.wire-row:hover { background: var(--bg2) }
.wire-row time { color: var(--text3); font-size: 12.5px; font-variant-numeric: tabular-nums; padding-top: 1px }
.wire-row .t { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--text); text-wrap: pretty }
.wire-row a.t:hover { text-decoration: underline }
.wire-row .t.up { color: var(--up) } .wire-row .t.down { color: var(--down) }
.wire-row .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 5px; font-size: 12.5px; color: var(--text3) }
/* Séparateur de journée : repère fixe pendant le défilement. */
.wire-day { position: sticky; top: calc(var(--hdr) + 8px); z-index: 2; padding: 18px 0 8px; background: linear-gradient(var(--bg) 70%, transparent) }
.wire-day span { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text3) }
.wire-list .wire-day:first-child { padding-top: 0 }
/* Ticker cité : la variation du jour dit tout de suite si l'information a compté. */
.tk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text2) }
.tk:hover { color: var(--text) }
.tk span { font-variant-numeric: tabular-nums; font-weight: 500 }
.wire-rail { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 4px }
.wire-rail .rail-h { margin-top: 26px }
.rail-tks { list-style: none; margin: 0; padding: 0 }
.rail-tks li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line) }
.rail-list { list-style: none; margin: 0; padding: 0 }
.rail-list li { display: grid; grid-template-columns: auto auto; gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; align-items: center }
.rail-list .t { grid-column: 1 / -1; color: var(--text2); line-height: 1.4 }
.rail-list a.t:hover { color: var(--text) }
.rail-tks li:last-child, .rail-list li:last-child { border-bottom: 0 }
@media (max-width: 1100px) { .wire { grid-template-columns: minmax(0, 1fr) } .wire-rail { position: static } }
@media (max-width: 640px) { .wire-row { grid-template-columns: 52px minmax(0, 1fr); gap: 12px } }

/* ---------- bandeau défilant du desk ---------- */
/* Pleine largeur, il défile en continu ; survol = arrêt sur image, clic = fiche du titre. */
/* Le bandeau reste dans la colonne, aligné sur les cartes : les filets verticaux passent de part et d'autre, sans le
   traverser. Le dégradé de bords n'agit que sur les vignettes, pas sur le cadre. */
.tape-band { position: relative; margin: 0 0 28px; border-block: 1px solid var(--rule); background: var(--bg) }
.tape { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent) }
.tape-track { display: flex; width: max-content; animation: tape-roll var(--tape-time, 90s) linear infinite }
.tape:hover .tape-track, .tape:focus-within .tape-track { animation-play-state: paused }
.tape-item { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; height: 38px; border-right: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; color: var(--text2) }
.tape-item b { color: var(--text); font-weight: 600; letter-spacing: .01em }
.tape-item .num { font-variant-numeric: tabular-nums; color: var(--text2) }
.tape-item .chg { font-variant-numeric: tabular-nums; font-weight: 600 }
.tape-item .av { width: 17px; height: 17px; font-size: 7px }
.tape-item:hover { background: var(--bg2) }
.tape-item:hover b { text-decoration: underline }
/* Cours qui bouge : un souffle de couleur, jamais un clignotement. */
.tape-item.up-flash { animation: tape-flash-up 1.2s var(--ease-smooth) }
.tape-item.down-flash { animation: tape-flash-down 1.2s var(--ease-smooth) }
@keyframes tape-roll { from { transform: translate3d(0, 0, 0) } to { transform: translate3d(-50%, 0, 0) } }
@keyframes tape-flash-up { 0%, 30% { background: var(--upbg) } to { background: transparent } }
@keyframes tape-flash-down { 0%, 30% { background: var(--downbg) } to { background: transparent } }
@media (prefers-reduced-motion: reduce) {
  .tape { overflow-x: auto; scrollbar-width: none }
  .tape::-webkit-scrollbar { display: none }
  .tape-track { animation: none }
}

/* ---------- mouvement ---------- */
/* Une entrée accélère puis ralentit (ease-out-fluid), un changement sur place suit ease-smooth, une sortie ease-in-quart ;
   rien au-delà de 300 ms, et seules l'opacité et les transformations sont animées (pas de recalcul de mise en page). */
.btn, .icon-btn, .tabs a, .tabs button, .seg a, .seg button, .ranges button, .tog, .select, .field, .m-nav a, .menu a, .menu button {
  transition: color 150ms var(--ease-smooth), background-color 150ms var(--ease-smooth), border-color 150ms var(--ease-smooth), box-shadow 150ms var(--ease-smooth), opacity 150ms var(--ease-smooth);
}
.card, .kcard, .peer, .sp-row, .mlist a { transition: border-color 150ms var(--ease-smooth), background-color 150ms var(--ease-smooth) }
@media (prefers-reduced-motion: no-preference) {
  .btn, .icon-btn, .seg button, .ranges button, .tabs a, .tabs button { transition-property: color, background-color, border-color, box-shadow, opacity, transform }
  .btn:active, .icon-btn:active { transform: scale(.97) }
  .seg button:active, .ranges button:active, .tabs a:active, .tabs button:active { transform: scale(.98) }
}
dialog[open] { animation: fade-scale-in 200ms var(--ease-out-fluid) both }
dialog::backdrop { animation: fade-in 200ms var(--ease-smooth) both }
.menu:not([hidden]) { transform-origin: top right; animation: pop-in 150ms var(--ease-out-fluid) both }
.results:not([hidden]) { transform-origin: top center; animation: pop-in 150ms var(--ease-out-fluid) both }
.toast:not([hidden]) { animation: toast-in 200ms var(--ease-out-fluid) both }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes fade-scale-in { from { opacity: 0; transform: scale(.98) } to { opacity: 1; transform: none } }
@keyframes pop-in { from { opacity: 0; transform: scale(.98) translateY(-4px) } to { opacity: 1; transform: none } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
/* Animations réduites : tout devient instantané, rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
}