/* =====================================================================
   METALGO5 — système de design « GRAND LIVRE »
   Socle commun à toutes les pages Flask de xvscreener (2026-10-29).

       <link rel="stylesheet" href="/static/metalgo5.css">
       <body class="m5">

   CE FICHIER AMÉLIORE L'EXISTANT, IL NE LE REMPLACE PAS
   -----------------------------------------------------
   Les pages actuelles sont bonnes : on garde leur structure, leurs
   habitudes et leurs classes, et on monte le niveau — mêmes jetons de
   couleur partout, même rythme typographique, mêmes tableaux lisibles,
   mêmes états vides. Charger ce fichier SANS mettre `class="m5"` sur le
   <body> ne change rien à l'écran : seuls les jetons deviennent
   disponibles. On migre ensuite bloc par bloc, en vérifiant à chaque
   étape.

   PARTI PRIS
   ----------
   L'interface emprunte au grand livre comptable et au terminal : filets
   d'un cheveu, colonnes réglées, libellés en petites capitales très
   espacées, et surtout des CHIFFRES EN SERIF (Fraunces) — on ne voit
   presque jamais ça sur un écran de trading, et c'est précisément ce qui
   donne le caractère. Ces gestes s'ajoutent à l'existant par touches ;
   ils ne justifient jamais de refaire une page qui marche.

   Quatre dispositifs portent l'identité ; les respecter suffit à rendre
   n'importe quelle page reconnaissable :
     1. `.m5-panel`  — cadre à ÉQUERRES dans les coins, pas d'ombre, pas
                       de gros rayon. Le panneau est tracé, pas posé.
     2. `.m5-rule`   — titre de section suivi d'un filet qui file jusqu'au
                       bord droit, précédé d'un numéro d'ordre (01, 02…).
     3. `.m5-ledger` — tableau réglé comme un registre : filets de colonne
                       et bande une ligne sur cinq, pas de zébrure.
     4. Chiffres     — Fraunces, `tabular-nums`, signe toujours visible ;
                       l'accent sable souligne, il ne remplit pas.

   Le vert et le rouge ne disent qu'une chose : hausse/baisse,
   gain/perte. Jamais de décoration.

   Tout est préfixé `m5-`, la remise à zéro est portée par `body.m5` :
   une page migre composant par composant sans casser ses classes
   historiques (.btn, .stat, .badge…).

   Polices à charger dans le <head> de chaque page :
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Source+Sans+3:wght@400;600;700&family=JetBrains+Mono:wght@400;600&display=swap">
   ===================================================================== */

:root {
  /* --- Fonds : encre bleu nuit, du plus profond au plus proche --- */
  --m5-bg: #070d18;
  --m5-surface: #0c1526;
  --m5-surface-2: #111c30;
  --m5-surface-3: #16243c;
  --m5-overlay: rgba(3, 7, 14, .82);

  /* --- Filets d'un cheveu --- */
  --m5-line: rgba(228, 210, 176, .14);
  --m5-line-soft: rgba(228, 210, 176, .07);
  --m5-line-strong: rgba(228, 210, 176, .3);

  /* --- Texte --- */
  --m5-text: #e9eff5;
  --m5-text-dim: #93a4b7;
  --m5-text-faint: #64748b;

  /* --- Accent sable : il souligne, il ne remplit pas --- */
  --m5-accent: #e4d2b0;
  --m5-accent-strong: #f5e8ce;
  --m5-accent-dim: rgba(228, 210, 176, .55);
  --m5-accent-wash: rgba(228, 210, 176, .07);

  /* --- Sens --- */
  --m5-bull: #7dbe9a;
  --m5-bull-wash: rgba(125, 190, 154, .12);
  --m5-bear: #e08b8b;
  --m5-bear-wash: rgba(224, 139, 139, .12);
  --m5-warn: #e0b15a;
  --m5-warn-wash: rgba(224, 177, 90, .12);
  --m5-info: #8fb8d9;
  --m5-info-wash: rgba(143, 184, 217, .12);
  --m5-neutral: #8092a6;
  --m5-neutral-wash: rgba(128, 146, 166, .11);

  /* --- Rythme : rayons volontairement petits --- */
  --m5-r-xs: 2px;
  --m5-r-sm: 3px;
  --m5-r-md: 4px;
  --m5-s-1: 4px;
  --m5-s-2: 8px;
  --m5-s-3: 12px;
  --m5-s-4: 16px;
  --m5-s-5: 24px;
  --m5-s-6: 32px;
  --m5-s-7: 48px;

  --m5-ring: 0 0 0 1px var(--m5-accent), 0 0 0 4px rgba(228, 210, 176, .16);
  --m5-bracket: 11px;   /* longueur des équerres d'angle */

  --m5-font: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --m5-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --m5-font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', ui-monospace, monospace;

  color-scheme: dark;
}

/* =====================================================================
   1. Remise à zéro — portée par body.m5
   ===================================================================== */
body.m5 {
  margin: 0;
  min-height: 100vh;
  color: var(--m5-text);
  font-family: var(--m5-font);
  font-size: 15px;
  line-height: 1.5;
  background-color: var(--m5-bg);
  /* Papier réglé : des lignes horizontales presque invisibles, une lueur
     sable en haut de page. Aucun dégradé coloré, aucune « aurore ». */
  background-image:
    radial-gradient(ellipse 60% 38% at 50% -12%, rgba(228, 210, 176, .07), transparent 62%),
    repeating-linear-gradient(180deg, rgba(228, 210, 176, .018) 0 1px, transparent 1px 30px);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.m5 *, body.m5 *::before, body.m5 *::after { box-sizing: border-box; }

body.m5 h1, body.m5 h2, body.m5 h3 {
  margin: 0;
  font-family: var(--m5-font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
}
body.m5 h1 { font-size: clamp(1.55rem, 2.7vw, 2.1rem); }
body.m5 h2 { font-size: 1.1rem; }
body.m5 h3 { font-size: .96rem; }

body.m5 a { color: var(--m5-accent); text-decoration: none; }
body.m5 a:hover { color: var(--m5-accent-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.m5 ::selection { background: rgba(228, 210, 176, .28); color: #fff; }
body.m5 :focus-visible { outline: none; box-shadow: var(--m5-ring); }

body.m5 ::-webkit-scrollbar { width: 9px; height: 9px; }
body.m5 ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .02); }
body.m5 ::-webkit-scrollbar-thumb { background: rgba(228, 210, 176, .22); }
body.m5 ::-webkit-scrollbar-thumb:hover { background: rgba(228, 210, 176, .36); }
body.m5 { scrollbar-width: thin; scrollbar-color: rgba(228, 210, 176, .24) transparent; }

/* =====================================================================
   2. DISPOSITIF 1 — le panneau à équerres
   Deux pseudo-éléments tracent quatre angles sable ; le cadre reste un
   filet. Rien n'est « posé sur » la page, tout y est tracé.
   ===================================================================== */
.m5-panel {
  position: relative;
  padding: var(--m5-s-4);
  border: 1px solid var(--m5-line);
  background: var(--m5-surface);
}
.m5-panel::before, .m5-panel::after {
  content: ''; position: absolute; width: var(--m5-bracket); height: var(--m5-bracket);
  pointer-events: none; border-color: var(--m5-accent); opacity: .85;
}
.m5-panel::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.m5-panel::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.m5-panel--pad { padding: var(--m5-s-5); }
.m5-panel--quiet { background: transparent; }
.m5-panel--quiet::before, .m5-panel--quiet::after { opacity: .5; }
/* Variante à quatre angles, pour les blocs qui doivent accrocher l'œil. */
.m5-panel--corners { background-image:
    linear-gradient(var(--m5-accent), var(--m5-accent)), linear-gradient(var(--m5-accent), var(--m5-accent)),
    linear-gradient(var(--m5-accent), var(--m5-accent)), linear-gradient(var(--m5-accent), var(--m5-accent));
  background-repeat: no-repeat;
  background-size: 2px var(--m5-bracket), var(--m5-bracket) 2px, 2px var(--m5-bracket), var(--m5-bracket) 2px;
  background-position: right -1px top -1px, right -1px top -1px, left -1px bottom -1px, left -1px bottom -1px;
}

/* =====================================================================
   3. DISPOSITIF 2 — le titre de section et son filet
   <div class="m5-rule" data-index="02"><h2>Signaux</h2><span>12 lignes</span></div>
   Le filet file jusqu'au bord droit : geste éditorial, pas de boîte.
   ===================================================================== */
.m5-rule { display: flex; align-items: baseline; gap: var(--m5-s-3); margin: var(--m5-s-5) 0 var(--m5-s-3); }
.m5-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--m5-line-strong), transparent); }
.m5-rule[data-index]::before {
  content: attr(data-index);
  font-family: var(--m5-font-mono); font-size: .68rem; font-weight: 600;
  color: var(--m5-accent); letter-spacing: .1em;
  padding-right: var(--m5-s-2); border-right: 1px solid var(--m5-line);
}
.m5-rule h2, .m5-rule h3 { white-space: nowrap; }
.m5-rule > span { color: var(--m5-text-faint); font-size: .76rem; white-space: nowrap; }

/* Petites capitales très espacées : tous les micro-libellés passent par là. */
.m5-label, .m5-kicker, .m5-eyebrow {
  font-size: .62rem; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--m5-text-dim);
}
.m5-kicker, .m5-eyebrow { color: var(--m5-accent); }

/* =====================================================================
   4. Structure de page
   ===================================================================== */
.m5-shell { max-width: 1640px; margin: 0 auto; padding: var(--m5-s-5) var(--m5-s-4) var(--m5-s-7); }
.m5-shell--wide { max-width: none; }

.m5-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--m5-s-4); flex-wrap: wrap;
  padding-bottom: var(--m5-s-3);
  border-bottom: 1px solid var(--m5-line);
}
/* Bandeau de titre : double filet, comme un en-tête de registre. */
.m5-top::after { content: ''; position: absolute; }
.m5-brand { display: flex; align-items: center; gap: var(--m5-s-3); min-width: 0; }
.m5-mark {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: 1px solid var(--m5-accent-dim); color: var(--m5-accent);
  font-family: var(--m5-font-display); font-size: 1.05rem; font-weight: 700;
}
.m5-sub { color: var(--m5-text-dim); font-size: .84rem; }

/* Navigation en onglets soulignés — jamais de pilule pleine. */
.m5-nav { display: flex; gap: var(--m5-s-4); flex-wrap: wrap; align-items: center; }
.m5-nav a {
  position: relative; padding: 4px 1px 7px; color: var(--m5-text-dim);
  font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-decoration: none;
  border-bottom: 2px solid transparent; transition: color .18s, border-color .18s;
}
.m5-nav a:hover { color: var(--m5-text); border-bottom-color: var(--m5-line-strong); text-decoration: none; }
.m5-nav a[aria-current="page"] { color: var(--m5-accent-strong); border-bottom-color: var(--m5-accent); }

.m5-live { display: inline-flex; align-items: center; gap: 7px; color: var(--m5-bull); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.m5-live::before { content: ''; width: 6px; height: 6px; background: currentColor; box-shadow: 0 0 0 3px rgba(125, 190, 154, .15); animation: m5-pulse 2.4s ease-in-out infinite; }
.m5-live.is-stale { color: var(--m5-warn); }
.m5-live.is-off { color: var(--m5-text-faint); }
@keyframes m5-pulse { 50% { opacity: .3; transform: scale(.7); } }

/* =====================================================================
   5. Chiffres — le cœur de l'identité
   ===================================================================== */
.m5-figure, .m5-stat b {
  font-family: var(--m5-font-display);
  font-weight: 600; letter-spacing: -.028em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1;
}
.m5-figure { font-size: clamp(1.7rem, 3.2vw, 2.5rem); display: block; }
.m5-num, .m5-table td { font-variant-numeric: tabular-nums; }
.m5-mono { font-family: var(--m5-font-mono); font-size: .82em; letter-spacing: -.01em; }

.m5-grid { display: grid; gap: 1px; background: var(--m5-line-soft); border: 1px solid var(--m5-line); }
.m5-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.m5-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.m5-grid--4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
/* Les cellules se touchent et ne sont séparées que par le filet du fond :
   une planche de chiffres, pas une rangée de cartes flottantes. */
.m5-grid > .m5-stat { border: 0; background: var(--m5-surface); }

.m5-stat { padding: var(--m5-s-3) var(--m5-s-4); background: var(--m5-surface); }
.m5-stat b { display: block; font-size: 1.6rem; line-height: 1.15; }
.m5-stat span { display: block; margin-top: 3px; font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--m5-text-dim); }
.m5-stat small { display: block; margin-top: 3px; color: var(--m5-text-faint); font-size: .72rem; }
.m5-stat--accent b { color: var(--m5-accent); }

/* =====================================================================
   6. Contrôles — filets, pas de boutons bombés
   ===================================================================== */
.m5-toolbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; gap: var(--m5-s-2); flex-wrap: wrap; align-items: center;
  padding: 9px 10px; margin: var(--m5-s-4) 0 var(--m5-s-3);
  border-top: 1px solid var(--m5-line); border-bottom: 1px solid var(--m5-line);
  background: rgba(12, 21, 38, .95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

.m5-btn, .m5-input, .m5-select {
  font-family: var(--m5-font); font-size: .84rem;
  color: var(--m5-text); background: transparent;
  border: 1px solid var(--m5-line); border-radius: var(--m5-r-sm);
  padding: 7px 11px; transition: border-color .16s, color .16s, background .16s;
}
.m5-input::placeholder { color: var(--m5-text-faint); }
.m5-input:hover, .m5-select:hover { border-color: var(--m5-line-strong); }
.m5-input:focus, .m5-select:focus { outline: none; border-color: var(--m5-accent-dim); box-shadow: var(--m5-ring); }
.m5-input--grow { flex: 1; min-width: 210px; }
.m5-select { background: var(--m5-surface); }
.m5-select option { background: var(--m5-surface-2); color: var(--m5-text); }
.m5-field { display: inline-flex; align-items: center; gap: 6px; color: var(--m5-text-dim); font-size: .76rem; }
.m5-field .m5-input { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }

.m5-btn { cursor: pointer; font-weight: 700; letter-spacing: .04em; }
.m5-btn:hover { color: var(--m5-accent-strong); border-color: var(--m5-accent-dim); background: var(--m5-accent-wash); }
.m5-btn:disabled { opacity: .4; cursor: not-allowed; }
/* Le bouton principal se signale par un filet sable plein, pas par un aplat. */
.m5-btn--primary { color: var(--m5-accent-strong); border-color: var(--m5-accent); box-shadow: inset 0 0 0 1px rgba(228, 210, 176, .22); }
.m5-btn--buy { color: var(--m5-bull); border-color: rgba(125, 190, 154, .5); }
.m5-btn--buy:hover { color: #0b1a13; background: var(--m5-bull); border-color: var(--m5-bull); }
.m5-btn--sell { color: var(--m5-bear); border-color: rgba(224, 139, 139, .5); }
.m5-btn--sell:hover { color: #1d0e0e; background: var(--m5-bear); border-color: var(--m5-bear); }
.m5-btn--ghost { border-color: transparent; color: var(--m5-text-dim); }
.m5-btn--sm { padding: 4px 8px; font-size: .74rem; }

.m5-chip {
  cursor: pointer; padding: 5px 10px; border: 1px solid transparent;
  border-bottom-color: var(--m5-line); background: transparent;
  color: var(--m5-text-dim); font-family: var(--m5-font);
  font-size: .76rem; font-weight: 700; letter-spacing: .05em;
  transition: color .16s, border-color .16s;
}
.m5-chip:hover { color: var(--m5-text); border-bottom-color: var(--m5-line-strong); }
.m5-chip.is-active { color: var(--m5-accent-strong); border-bottom-color: var(--m5-accent); }

/* =====================================================================
   7. Badges — un filet et une couleur de sens, sans rayon
   ===================================================================== */
.m5-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border: 1px solid currentColor; border-radius: 0;
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.m5-badge--bull { color: var(--m5-bull); background: var(--m5-bull-wash); }
.m5-badge--bear { color: var(--m5-bear); background: var(--m5-bear-wash); }
.m5-badge--warn { color: var(--m5-warn); background: var(--m5-warn-wash); }
.m5-badge--info { color: var(--m5-info); background: var(--m5-info-wash); }
.m5-badge--accent { color: var(--m5-accent); background: var(--m5-accent-wash); }
.m5-badge--muted { color: var(--m5-neutral); background: var(--m5-neutral-wash); }

/* Jauge : un trait plein sur un trait creux. `--v` = pourcentage. */
.m5-gauge { position: relative; height: 3px; min-width: 56px; background: rgba(255, 255, 255, .08); }
.m5-gauge > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 1%); background: var(--m5-accent); }
.m5-gauge--bull > i { background: var(--m5-bull); }
.m5-gauge--bear > i { background: var(--m5-bear); }

/* =====================================================================
   8. DISPOSITIF 3 — le tableau-registre
   Filets de colonne, bande une ligne sur cinq, en-tête en petites
   capitales. Rien à voir avec une zébrure une ligne sur deux.
   ===================================================================== */
.m5-table-wrap { border: 1px solid var(--m5-line); background: var(--m5-surface); overflow: auto; max-width: 100%; }
.m5-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.m5-table thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 9px 12px; text-align: left; white-space: nowrap;
  color: var(--m5-accent); font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  background: var(--m5-surface-2);
  border-bottom: 1px solid var(--m5-line-strong);
}
.m5-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--m5-line-soft); vertical-align: top; }
.m5-table tbody tr:last-child td { border-bottom: 0; }
.m5-table tbody tr:hover td { background: var(--m5-accent-wash); }
.m5-table td.m5-num, .m5-table th.m5-num { text-align: right; }
.m5-table .m5-empty, .m5-empty { padding: var(--m5-s-6) var(--m5-s-4); text-align: center; color: var(--m5-text-faint); }

/* Registre : filets verticaux entre colonnes + repère toutes les 5 lignes. */
.m5-ledger tbody td + td, .m5-ledger thead th + th { border-left: 1px solid var(--m5-line-soft); }
.m5-ledger tbody tr:nth-child(5n) td { border-bottom: 1px solid var(--m5-line); }
.m5-table--sticky-first tbody td:first-child,
.m5-table--sticky-first thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--m5-surface-2); }
.m5-table--sticky-first thead th:first-child { z-index: 3; }

.m5-pos { color: var(--m5-bull); }
.m5-neg { color: var(--m5-bear); }
.m5-muted { color: var(--m5-text-dim); }
.m5-faint { color: var(--m5-text-faint); }

/* =====================================================================
   9. États : chargement, vide, erreur
   ===================================================================== */
.m5-skeleton {
  background: linear-gradient(90deg, rgba(228, 210, 176, .04) 25%, rgba(228, 210, 176, .1) 37%, rgba(228, 210, 176, .04) 63%);
  background-size: 400% 100%; animation: m5-shimmer 1.5s ease infinite; min-height: 13px;
}
@keyframes m5-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.m5-note { padding: 9px 12px; border-left: 2px solid var(--m5-line-strong); background: var(--m5-surface-2); color: var(--m5-text-dim); font-size: .82rem; }
.m5-note--warn { color: #f0d6a4; border-left-color: var(--m5-warn); background: var(--m5-warn-wash); }
.m5-note--error { color: #f3c4c4; border-left-color: var(--m5-bear); background: var(--m5-bear-wash); }

/* =====================================================================
   10. Surcouches
   ===================================================================== */
.m5-overlay { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: var(--m5-s-4); background: var(--m5-overlay); backdrop-filter: blur(4px); }
.m5-dialog { width: 100%; max-width: 440px; padding: var(--m5-s-5); border: 1px solid var(--m5-line-strong); background: var(--m5-surface); position: relative; }
.m5-dialog::before, .m5-dialog::after {
  content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--m5-accent);
}
.m5-dialog::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.m5-dialog::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.m5-dialog-actions { display: flex; gap: var(--m5-s-2); justify-content: flex-end; margin-top: var(--m5-s-4); }

.m5-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: flex; flex-direction: column; gap: var(--m5-s-2); }
.m5-toast { padding: 9px 13px; border: 1px solid var(--m5-line-strong); border-left: 2px solid var(--m5-accent); background: var(--m5-surface-3); font-size: .83rem; animation: m5-rise .2s ease; }
@keyframes m5-rise { from { opacity: 0; transform: translateY(6px); } }

/* =====================================================================
   10 bis. Deux utilitaires réclamés par les pages déjà migrées
   ===================================================================== */

/* Équerres seules, à poser sur un bloc dont le nom de classe est imposé
   par du JS existant (`.signal-deck`, `.pnl-panel`, `.risk-box`…) : on
   ajoute `m5-brackets` et le cadre vient, sans renommer quoi que ce soit. */
.m5-brackets { position: relative; }
.m5-brackets::before, .m5-brackets::after {
  content: ''; position: absolute; width: var(--m5-bracket); height: var(--m5-bracket);
  pointer-events: none; border-color: var(--m5-accent); opacity: .85;
}
.m5-brackets::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.m5-brackets::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

/* Titre de section à deux étages (sur-titre au-dessus du h2) : le filet et
   le numéro d'ordre se calent sur le BAS du bloc, pas sur le sur-titre. */
.m5-rule--stacked { align-items: flex-end; }
.m5-rule--stacked::after { margin-bottom: .45em; }
.m5-rule--stacked[data-index]::before { align-self: flex-end; margin-bottom: .1em; }
@media (max-width: 560px) {
  .m5-rule--stacked { flex-wrap: wrap; }
  .m5-rule--stacked::after { flex-basis: 100%; margin: var(--m5-s-1) 0 0; }
}

/* =====================================================================
   10 ter. Multilingue : sélecteur de langue et écriture droite-à-gauche
   ===================================================================== */

/* Sélecteur : des onglets soulignés, comme la navigation. */
.m5-lang { display: inline-flex; align-items: center; gap: 2px; }
.m5-lang button {
  cursor: pointer; padding: 4px 7px; border: 1px solid transparent;
  border-bottom-color: var(--m5-line); background: transparent;
  color: var(--m5-text-faint); font-family: var(--m5-font);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transition: color .16s, border-color .16s;
}
.m5-lang button:hover { color: var(--m5-text); border-bottom-color: var(--m5-line-strong); }
.m5-lang button.active, .m5-lang button.is-active {
  color: var(--m5-accent-strong); border-bottom-color: var(--m5-accent);
}

/* Les polices arabe et chinoise sont injectées à la demande par i18n.js ;
   on les met en tête de pile uniquement pour la langue concernée. */
html[data-lang="ar"] body.m5,
html[data-lang="ar"] .m5-figure, html[data-lang="ar"] .m5-stat b,
html[data-lang="ar"] h1, html[data-lang="ar"] h2, html[data-lang="ar"] h3 {
  font-family: 'Noto Sans Arabic', var(--m5-font);
  letter-spacing: 0;              /* l'arabe ne se laisse pas espacer */
}
html[data-lang="zh"] body.m5,
html[data-lang="zh"] h1, html[data-lang="zh"] h2, html[data-lang="zh"] h3 {
  font-family: 'Noto Sans SC', var(--m5-font);
}
/* Les petites capitales très espacées n'ont aucun sens dans ces écritures. */
html[data-lang="ar"] .m5-label, html[data-lang="ar"] .m5-kicker, html[data-lang="ar"] .m5-eyebrow,
html[data-lang="ar"] .m5-table thead th, html[data-lang="ar"] .m5-stat span,
html[data-lang="zh"] .m5-label, html[data-lang="zh"] .m5-kicker, html[data-lang="zh"] .m5-eyebrow,
html[data-lang="zh"] .m5-table thead th, html[data-lang="zh"] .m5-stat span {
  letter-spacing: .04em; text-transform: none;
}

/* --- Écriture droite-à-gauche ---------------------------------------- */
[dir="rtl"] body.m5 { direction: rtl; }
[dir="rtl"] .m5-table thead th, [dir="rtl"] .m5-table tbody td { text-align: right; }
[dir="rtl"] .m5-table td.m5-num, [dir="rtl"] .m5-table th.m5-num { text-align: left; }
/* Les nombres, eux, restent lus de gauche à droite. */
[dir="rtl"] .m5-num, [dir="rtl"] .m5-figure, [dir="rtl"] .m5-stat b, [dir="rtl"] .m5-mono {
  direction: ltr; unicode-bidi: isolate;
}
[dir="rtl"] .m5-rule::after { background: linear-gradient(270deg, var(--m5-line-strong), transparent); }
[dir="rtl"] .m5-rule[data-index]::before { padding: 0 0 0 var(--m5-s-2); border-right: 0; border-left: 1px solid var(--m5-line); }
[dir="rtl"] .m5-note { border-left: 0; border-right: 2px solid var(--m5-line-strong); }
[dir="rtl"] .m5-note--warn { border-right-color: var(--m5-warn); }
[dir="rtl"] .m5-note--error { border-right-color: var(--m5-bear); }
[dir="rtl"] .m5-toast { border-left: 1px solid var(--m5-line-strong); border-right: 2px solid var(--m5-accent); }
[dir="rtl"] .m5-toasts { right: auto; left: 16px; }
[dir="rtl"] .m5-gauge > i { inset: 0 0 0 auto; }
[dir="rtl"] .m5-ledger tbody td + td, [dir="rtl"] .m5-ledger thead th + th {
  border-left: 0; border-right: 1px solid var(--m5-line-soft);
}
[dir="rtl"] .m5-table--sticky-first tbody td:first-child,
[dir="rtl"] .m5-table--sticky-first thead th:first-child { left: auto; right: 0; }
/* Les équerres d'angle suivent le sens de lecture. */
[dir="rtl"] .m5-panel::before, [dir="rtl"] .m5-brackets::before, [dir="rtl"] .m5-dialog::before {
  left: auto; right: -1px; border-left: 0; border-right: 2px solid;
}
[dir="rtl"] .m5-panel::after, [dir="rtl"] .m5-brackets::after, [dir="rtl"] .m5-dialog::after {
  right: auto; left: -1px; border-right: 0; border-left: 2px solid;
}
[dir="rtl"] .m5-field .m5-input { text-align: left; }

/* =====================================================================
   11. Responsive et préférences
   ===================================================================== */
@media (max-width: 900px) {
  .m5-shell { padding: var(--m5-s-4) var(--m5-s-4) var(--m5-s-6); }
  .m5-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; gap: var(--m5-s-3); padding-bottom: 2px; }
  .m5-toolbar { position: static; }
  .m5-grid--3, .m5-grid--4 { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
  .m5-stat b { font-size: 1.3rem; }
  :root { --m5-bracket: 8px; }
}
@media (max-width: 560px) {
  body.m5 { font-size: 14px; }
  .m5-input--grow { min-width: 0; }
  .m5-grid--2, .m5-grid--3 { grid-template-columns: 1fr; }
  .m5-rule { margin-top: var(--m5-s-4); }
}
@media (prefers-reduced-motion: reduce) {
  body.m5 *, body.m5 *::before, body.m5 *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media print {
  body.m5 { background: #fff; color: #000; }
  .m5-toolbar, .m5-nav, .m5-toasts { display: none !important; }
}