/* ArtiBox — système de design commun (servi par chaque appli sous /commun/artibox.css).
 *
 * Identité : la nuit de Kinshasa (fond encre chaud), la latérite (terre rouge-orangé), l'or des
 * cuivres, le fleuve. Un motif discret de tissage (losanges) et d'ondes (le son qui se propage).
 * Pensé d'abord pour un téléphone de 360 px, puis tablette (≥ 768 px) et ordinateur (≥ 1 080 px).
 *
 * Utilisation : <html data-appli="play|artist|place|partner|ogc|capture|admin">, puis les classes
 * « ab-* ». Thème : data-theme="clair|sombre" sur <html> (posé par artibox.js d'après le choix
 * enregistré ou prefers-color-scheme ; Play est sombre par défaut). Voir commun/statique/LISEZMOI.md.
 */

/* --- Jetons ------------------------------------------------------------------------------ */
:root {
  /* Palette de marque (fixe) */
  --ab-terre: #e2572b; --ab-terre-fonce: #b83d15; --ab-or: #f3a632; --ab-fleuve: #1e9e7a;
  --ab-nuit: #14110f; --ab-indigo: #3a2f8f; --ab-sable: #f6f1ea;

  /* Typographie : polices du système (rien à télécharger), chiffres tabulaires pour les montants */
  --ab-police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --ab-police-titre: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ab-police-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ab-t-xs: .75rem; --ab-t-s: .875rem; --ab-t-m: 1rem; --ab-t-l: 1.125rem; --ab-t-xl: 1.375rem;
  --ab-t-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); --ab-t-3xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
  --ab-t-chiffre: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);

  /* Espacements (pas de 4 px) */
  --ab-e1: 4px; --ab-e2: 8px; --ab-e3: 12px; --ab-e4: 16px; --ab-e5: 20px; --ab-e6: 24px; --ab-e8: 32px;
  --ab-e10: 40px; --ab-e12: 48px; --ab-e16: 64px;
  --ab-gouttiere: 16px; --ab-largeur: 1180px;

  /* Rayons */
  --ab-r-s: 8px; --ab-r-m: 12px; --ab-r-l: 18px; --ab-r-xl: 26px; --ab-r-rond: 999px;

  /* Mouvements */
  --ab-m-rapide: 120ms; --ab-m-moyen: 220ms; --ab-m-lent: 380ms;
  --ab-courbe: cubic-bezier(.2, .8, .2, 1); --ab-courbe-ressort: cubic-bezier(.34, 1.4, .64, 1);

  /* Cible tactile minimale */
  --ab-cible: 44px;
  --ab-barre-bas: 64px;   /* navigation mobile en bas d'écran */
  --ab-zone-bas: env(safe-area-inset-bottom, 0px);
}

/* Thème clair (défaut) : sable chaud */
:root, :root[data-theme="clair"] {
  color-scheme: light;
  --ab-fond: #f7f3ee; --ab-fond-2: #efe8df; --ab-surface: #ffffff; --ab-surface-2: #faf7f3;
  --ab-surface-haute: #ffffff; --ab-bord: #e4dbd0; --ab-bord-fort: #cbbfb1;
  --ab-texte: #1c1714; --ab-texte-2: #5a5048; --ab-texte-3: #6e645b;
  --ab-succes: #157347; --ab-succes-fond: #e3f4ea; --ab-alerte: #9a5b00; --ab-alerte-fond: #fdf0d8;
  --ab-danger: #b42318; --ab-danger-fond: #fde7e4; --ab-info: #1d5fbf; --ab-info-fond: #e3edfb;
  --ab-ombre-1: 0 1px 2px rgb(60 40 20 / .06), 0 1px 1px rgb(60 40 20 / .04);
  --ab-ombre-2: 0 2px 4px rgb(60 40 20 / .05), 0 8px 24px -6px rgb(60 40 20 / .12);
  --ab-ombre-3: 0 4px 8px rgb(60 40 20 / .06), 0 24px 48px -12px rgb(60 40 20 / .22);
  --ab-voile: rgb(28 23 20 / .45);
  --ab-motif-opacite: .07;
}
:root[data-theme="sombre"] {
  color-scheme: dark;
  --ab-fond: #110e0c; --ab-fond-2: #1a1512; --ab-surface: #1d1815; --ab-surface-2: #241e1a;
  --ab-surface-haute: #2b241f; --ab-bord: #352c26; --ab-bord-fort: #4a3f37;
  --ab-texte: #f5efe9; --ab-texte-2: #c9bdb2; --ab-texte-3: #a99c90;
  --ab-succes: #4ade80; --ab-succes-fond: #11321f; --ab-alerte: #fbbf24; --ab-alerte-fond: #3a2a08;
  --ab-danger: #f87171; --ab-danger-fond: #3d1512; --ab-info: #7cb4ff; --ab-info-fond: #13284a;
  --ab-ombre-1: 0 1px 2px rgb(0 0 0 / .4);
  --ab-ombre-2: 0 2px 6px rgb(0 0 0 / .35), 0 10px 28px -8px rgb(0 0 0 / .55);
  --ab-ombre-3: 0 6px 12px rgb(0 0 0 / .4), 0 28px 56px -12px rgb(0 0 0 / .7);
  --ab-voile: rgb(0 0 0 / .62);
  --ab-motif-opacite: .09;
}
/* Sans JavaScript : on suit le système. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ab-fond: #110e0c; --ab-fond-2: #1a1512; --ab-surface: #1d1815; --ab-surface-2: #241e1a;
    --ab-surface-haute: #2b241f; --ab-bord: #352c26; --ab-bord-fort: #4a3f37;
    --ab-texte: #f5efe9; --ab-texte-2: #c9bdb2; --ab-texte-3: #a99c90;
    --ab-succes: #4ade80; --ab-succes-fond: #11321f; --ab-alerte: #fbbf24; --ab-alerte-fond: #3a2a08;
    --ab-danger: #f87171; --ab-danger-fond: #3d1512; --ab-info: #7cb4ff; --ab-info-fond: #13284a;
    --ab-voile: rgb(0 0 0 / .62); --ab-motif-opacite: .09;
  }
}

/* Couleur d'accent de chaque appli (texte et fond de bouton : contraste AA vérifié).
   --ab-accent : boutons, liens, éléments actifs ; --ab-sur-accent : texte posé dessus ;
   --ab-accent-doux : fonds teintés ; --ab-accent-2 : seconde teinte des dégradés. */
:root { --ab-accent: #b83d15; --ab-sur-accent: #fff; --ab-accent-2: #f3a632; --ab-accent-doux: #fbe6dc; }
[data-appli="play"] { --ab-accent: #a8470f; --ab-accent-2: #e2572b; --ab-accent-doux: #fde9d4; }
[data-appli="artist"] { --ab-accent: #5536d6; --ab-accent-2: #c8336b; --ab-accent-doux: #ece8ff; }
[data-appli="place"] { --ab-accent: #b83d15; --ab-accent-2: #f3a632; --ab-accent-doux: #fbe6dc; }
[data-appli="partner"] { --ab-accent: #0e7059; --ab-accent-2: #1e9e7a; --ab-accent-doux: #dcf3ea; }
[data-appli="ogc"] { --ab-accent: #1f56b8; --ab-accent-2: #3a2f8f; --ab-accent-doux: #e2ebfb; }
[data-appli="capture"] { --ab-accent: #15803d; --ab-accent-2: #1e9e7a; --ab-accent-doux: #dcf5e4; }
[data-appli="admin"] { --ab-accent: #3a2f8f; --ab-accent-2: #e2572b; --ab-accent-doux: #e8e6f7; }
[data-theme="sombre"] { --ab-sur-accent: #160f0a; --ab-accent: #ff8a4c; --ab-accent-doux: #3a1d10; }
[data-theme="sombre"][data-appli="play"] { --ab-accent: #ffb547; --ab-accent-2: #ff6a3d; --ab-accent-doux: #3b2a10; }
[data-theme="sombre"][data-appli="artist"] { --ab-accent: #b4a3ff; --ab-accent-2: #ff6fa5; --ab-accent-doux: #261f4d; }
[data-theme="sombre"][data-appli="place"] { --ab-accent: #ff8a4c; --ab-accent-2: #ffc35c; --ab-accent-doux: #3a1d10; }
[data-theme="sombre"][data-appli="partner"] { --ab-accent: #44d6ad; --ab-accent-2: #1e9e7a; --ab-accent-doux: #0f3329; }
[data-theme="sombre"][data-appli="ogc"] { --ab-accent: #82b1ff; --ab-accent-2: #8f83ff; --ab-accent-doux: #172846; }
[data-theme="sombre"][data-appli="capture"] { --ab-accent: #4ade80; --ab-accent-2: #2dd4bf; --ab-accent-doux: #10301d; }
[data-theme="sombre"][data-appli="admin"] { --ab-accent: #a99dff; --ab-accent-2: #ff8a4c; --ab-accent-doux: #241f47; }

/* --- Base ---------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body.ab, .ab-corps {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--ab-fond); color: var(--ab-texte);
  font: 400 var(--ab-t-m)/1.5 var(--ab-police); font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.ab :where(h1, h2, h3, h4) { margin: 0; font-family: var(--ab-police-titre); letter-spacing: -.02em; line-height: 1.15; color: var(--ab-texte); }
.ab h1 { font-size: var(--ab-t-2xl); font-weight: 800; }
.ab h2 { font-size: var(--ab-t-xl); font-weight: 750; }
.ab h3 { font-size: var(--ab-t-l); font-weight: 700; }
.ab :where(p) { margin: 0; }
.ab :where(a) { color: var(--ab-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ab :where(img, svg) { max-width: 100%; }
.ab :where(button, input, select, textarea) { font: inherit; color: inherit; }
.ab ::selection { background: var(--ab-accent); color: var(--ab-sur-accent); }
.ab :focus-visible { outline: 3px solid var(--ab-accent); outline-offset: 2px; border-radius: 6px; }
.ab [hidden] { display: none !important; }
.ab-chiffres, .ab-montant { font-variant-numeric: tabular-nums; }
.ab-mono { font-family: var(--ab-police-mono); font-size: .92em; letter-spacing: 0; }
.ab-doux { color: var(--ab-texte-2); }
.ab-discret { color: var(--ab-texte-3); font-size: var(--ab-t-s); }
.ab-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ab-lien-evitement { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ab-accent); color: var(--ab-sur-accent); padding: 10px 16px; border-radius: var(--ab-r-m); font-weight: 700; }
.ab-lien-evitement:focus { top: 8px; }
.ab-surtitre { font-size: var(--ab-t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ab-texte-3); }

/* --- Mise en page --------------------------------------------------------------------------- */
.ab-page { width: 100%; max-width: var(--ab-largeur); margin: 0 auto; padding: var(--ab-e5) var(--ab-gouttiere) calc(var(--ab-e10) + var(--ab-zone-bas)); }
.ab-avec-barre-bas .ab-page { padding-bottom: calc(var(--ab-barre-bas) + var(--ab-e10) + var(--ab-zone-bas)); }
.ab-pile { display: flex; flex-direction: column; gap: var(--ab-e4); }
.ab-pile-s { display: flex; flex-direction: column; gap: var(--ab-e2); }
.ab-ligne { display: flex; align-items: center; gap: var(--ab-e3); flex-wrap: wrap; }
.ab-ligne-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--ab-e3); flex-wrap: wrap; }
.ab-grille { display: grid; gap: var(--ab-e4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ab-grille-2 { display: grid; gap: var(--ab-e4); }
.ab-section { display: flex; flex-direction: column; gap: var(--ab-e3); margin-top: var(--ab-e8); }
.ab-section-titre { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ab-e3); }
.ab-section-titre a { font-size: var(--ab-t-s); font-weight: 650; text-decoration: none; }
@media (min-width: 768px) {
  :root { --ab-gouttiere: 28px; }
  .ab-grille-2 { grid-template-columns: 1fr 1fr; }
  .ab-page { padding-top: var(--ab-e8); }
}
@media (min-width: 1080px) { :root { --ab-gouttiere: 40px; } }

/* En-tête de page : titre, sous-titre, actions */
.ab-entete-page { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ab-e4); margin-bottom: var(--ab-e6); }
.ab-entete-page h1 { font-size: var(--ab-t-3xl); }
.ab-entete-page p { color: var(--ab-texte-2); margin-top: var(--ab-e2); max-width: 60ch; }

/* --- En-tête d'appli ------------------------------------------------------------------------ */
.ab-entete {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--ab-e3);
  min-height: 60px; padding: calc(var(--ab-e2) + env(safe-area-inset-top, 0px)) var(--ab-gouttiere) var(--ab-e2);
  background: color-mix(in srgb, var(--ab-fond) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--ab-bord) 70%, transparent);
}
.ab-entete-interieur { display: flex; align-items: center; gap: var(--ab-e3); width: 100%; max-width: var(--ab-largeur); margin: 0 auto; }
.ab-marque { display: inline-flex; align-items: center; gap: 10px; font: 800 1.125rem/1 var(--ab-police-titre); letter-spacing: -.02em; color: var(--ab-texte); text-decoration: none; white-space: nowrap; }
.ab-marque small { font: 600 var(--ab-t-xs)/1 var(--ab-police); letter-spacing: .06em; text-transform: uppercase; color: var(--ab-accent); }
.ab-logo { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ab-terre), var(--ab-or)); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .15); }
.ab-logo svg { width: 20px; height: 20px; fill: #fff; }
.ab-entete .ab-espace { flex: 1; }
.ab-entete-nav { display: none; gap: 2px; }
.ab-entete-nav a, .ab-entete-nav button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--ab-r-rond);
  color: var(--ab-texte-2); text-decoration: none; font-weight: 600; font-size: var(--ab-t-s); border: 0; background: none; cursor: pointer;
  transition: background var(--ab-m-rapide), color var(--ab-m-rapide);
}
.ab-entete-nav a:hover, .ab-entete-nav button:hover { background: var(--ab-fond-2); color: var(--ab-texte); }
.ab-entete-nav [aria-current="page"], .ab-entete-nav .actif { background: var(--ab-accent-doux); color: var(--ab-accent); }
.ab-entete-nav svg { width: 18px; height: 18px; fill: currentColor; }
@media (min-width: 768px) { .ab-entete-nav { display: flex; } }

/* Utilisateur connecté */
.ab-avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: .875rem;
  color: #fff; background: linear-gradient(135deg, var(--ab-accent), var(--ab-accent-2)); }
.ab-avatar.grand { width: 64px; height: 64px; font-size: 1.375rem; }

/* --- Navigation mobile en bas d'écran ---------------------------------------------------- */
.ab-barre-bas {
  position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--ab-barre-bas) + var(--ab-zone-bas)); padding: 0 4px var(--ab-zone-bas);
  background: color-mix(in srgb, var(--ab-surface) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-top: 1px solid var(--ab-bord);
}
.ab-barre-bas a, .ab-barre-bas button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: var(--ab-cible); min-height: var(--ab-cible); color: var(--ab-texte-3); text-decoration: none; font-size: 11px; font-weight: 650;
  border: 0; background: none; cursor: pointer; transition: color var(--ab-m-rapide);
}
.ab-barre-bas svg { width: 24px; height: 24px; fill: currentColor; transition: transform var(--ab-m-moyen) var(--ab-courbe-ressort); }
.ab-barre-bas [aria-current="page"], .ab-barre-bas .actif { color: var(--ab-accent); }
.ab-barre-bas [aria-current="page"] svg, .ab-barre-bas .actif svg { transform: translateY(-1px) scale(1.08); }
.ab-barre-bas [aria-current="page"]::before, .ab-barre-bas .actif::before {
  content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ab-accent); }
.ab-barre-bas .ab-central span.ab-bulle { width: 44px; height: 44px; margin-top: -6px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ab-accent), var(--ab-accent-2)); color: #fff; box-shadow: var(--ab-ombre-2); }
.ab-barre-bas .ab-central span.ab-bulle svg { fill: #fff; }
.ab-barre-bas .ab-central::before { display: none; }
@media (min-width: 768px) { .ab-barre-bas.ab-mobile-seulement { display: none; } .ab-avec-barre-bas.ab-barre-mobile .ab-page { padding-bottom: var(--ab-e16); } }

/* --- Cartes ------------------------------------------------------------------------------- */
.ab-carte { position: relative; background: var(--ab-surface); border: 1px solid var(--ab-bord); border-radius: var(--ab-r-l);
  padding: var(--ab-e5); box-shadow: var(--ab-ombre-1); }
.ab-carte > h2, .ab-carte > h3, .ab-carte-titre { font-size: var(--ab-t-l); font-weight: 750; margin-bottom: var(--ab-e3); }
.ab-carte-titre { display: flex; align-items: center; justify-content: space-between; gap: var(--ab-e3); }
.ab-carte.ab-elevee { box-shadow: var(--ab-ombre-2); border-color: transparent; }
.ab-carte.ab-plate { box-shadow: none; background: var(--ab-surface-2); }
.ab-carte.ab-compacte { padding: var(--ab-e4); }
.ab-carte-lien { display: block; color: inherit; text-decoration: none; transition: transform var(--ab-m-moyen) var(--ab-courbe), box-shadow var(--ab-m-moyen); }
.ab-carte-lien:hover { transform: translateY(-2px); box-shadow: var(--ab-ombre-2); }
@media (min-width: 768px) { .ab-carte { padding: var(--ab-e6); } }

/* Carte « héros » : dégradé d'accent et motif de tissage */
.ab-heros { position: relative; overflow: hidden; isolation: isolate; color: #fff; border: 0; border-radius: var(--ab-r-xl);
  padding: var(--ab-e6); background: linear-gradient(135deg, var(--ab-accent) 0%, var(--ab-accent-2) 130%); box-shadow: var(--ab-ombre-2); }
[data-theme="sombre"] .ab-heros { background: linear-gradient(135deg, color-mix(in srgb, var(--ab-accent) 55%, #000) 0%, color-mix(in srgb, var(--ab-accent-2) 45%, #000) 120%); }
.ab-heros::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background-image: var(--ab-motif-tissage); background-size: 44px 44px; }
.ab-heros :where(h1, h2, h3, p, a, small, strong) { color: #fff; }
.ab-heros .ab-discret, .ab-heros .ab-doux { color: rgb(255 255 255 / .85); }

/* Motifs (SVG en données, aucun fichier à charger) */
:root {
  --ab-motif-tissage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 2 42 22 22 42 2 22Z M22 12 32 22 22 32 12 22Z' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
  --ab-motif-ondes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24'%3E%3Cpath d='M0 12c10 0 10-8 20-8s10 16 20 16 10-16 20-16 10 16 20 16 10-16 20-16 10 8 20 8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}
.ab-fond-motif { position: relative; isolation: isolate; }
.ab-fond-motif::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--ab-motif-opacite);
  background-image: var(--ab-motif-ondes); background-size: 120px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%); }
[data-theme="sombre"] .ab-fond-motif::before { filter: invert(1); }

/* --- Statistiques ------------------------------------------------------------------------- */
.ab-stats { display: grid; gap: var(--ab-e3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .ab-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--ab-e4); } }
.ab-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--ab-e4); border-radius: var(--ab-r-l);
  background: var(--ab-surface); border: 1px solid var(--ab-bord); box-shadow: var(--ab-ombre-1); }
.ab-stat-libelle { font-size: var(--ab-t-xs); font-weight: 650; letter-spacing: .02em; color: var(--ab-texte-2); line-height: 1.3; }
.ab-stat-valeur { font: 800 var(--ab-t-chiffre)/1.05 var(--ab-police-titre); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: var(--ab-texte); overflow-wrap: anywhere; }
.ab-stat-valeur small { font-size: .5em; font-weight: 700; color: var(--ab-texte-2); letter-spacing: 0; margin-left: 2px; }
.ab-stat-detail { font-size: var(--ab-t-xs); color: var(--ab-texte-3); }
.ab-stat.ab-accent { background: var(--ab-accent-doux); border-color: transparent; }
.ab-stat.ab-accent .ab-stat-valeur { color: var(--ab-accent); }
.ab-tendance { display: inline-flex; align-items: center; gap: 2px; font-size: var(--ab-t-xs); font-weight: 700; }
.ab-tendance.hausse { color: var(--ab-succes); } .ab-tendance.baisse { color: var(--ab-danger); }

/* --- Boutons ------------------------------------------------------------------------------ */
.ab-btn {
  --b-fond: var(--ab-accent); --b-texte: var(--ab-sur-accent); --b-bord: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ab-cible); padding: 0 20px;
  border: 1.5px solid var(--b-bord); border-radius: var(--ab-r-rond); background: var(--b-fond); color: var(--b-texte);
  font: 700 var(--ab-t-m)/1 var(--ab-police); text-decoration: none; cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform var(--ab-m-rapide) var(--ab-courbe), filter var(--ab-m-rapide), background var(--ab-m-rapide), box-shadow var(--ab-m-moyen);
}
.ab-btn:hover { filter: brightness(1.06); box-shadow: var(--ab-ombre-1); }
.ab-btn:active { transform: scale(.97); }
.ab-btn:disabled, .ab-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.ab-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.ab-btn.ab-second { --b-fond: var(--ab-surface); --b-texte: var(--ab-texte); --b-bord: var(--ab-bord-fort); }
.ab-btn.ab-second:hover { --b-fond: var(--ab-surface-2); }
.ab-btn.ab-teinte { --b-fond: var(--ab-accent-doux); --b-texte: var(--ab-accent); }
.ab-btn.ab-fantome { --b-fond: transparent; --b-texte: var(--ab-accent); padding: 0 12px; }
.ab-btn.ab-fantome:hover { --b-fond: var(--ab-accent-doux); box-shadow: none; }
.ab-btn.ab-danger { --b-fond: var(--ab-danger); --b-texte: #fff; }
[data-theme="sombre"] .ab-btn.ab-danger { --b-texte: #1a0705; }
.ab-btn.ab-plein { width: 100%; }
.ab-btn.ab-grand { min-height: 56px; padding: 0 28px; font-size: var(--ab-t-l); }
.ab-btn.ab-petit { min-height: 36px; padding: 0 14px; font-size: var(--ab-t-s); }
.ab-btn-icone { display: inline-grid; place-items: center; width: var(--ab-cible); height: var(--ab-cible); flex: none; border: 0; border-radius: 50%;
  background: transparent; color: var(--ab-texte); cursor: pointer; transition: background var(--ab-m-rapide), transform var(--ab-m-rapide); }
.ab-btn-icone:hover { background: var(--ab-fond-2); }
.ab-btn-icone:active { transform: scale(.92); }
.ab-btn-icone svg { width: 22px; height: 22px; fill: currentColor; }
.ab-btn-icone.ab-actif { color: var(--ab-accent); }
.ab-actions { display: flex; flex-wrap: wrap; gap: var(--ab-e3); align-items: center; }
.ab-actions.ab-fin { justify-content: flex-end; }
@media (max-width: 479px) { .ab-actions.ab-empile > .ab-btn { flex: 1 1 100%; } }

/* Onglets segmentés */
.ab-segments { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--ab-r-rond); background: var(--ab-fond-2); border: 1px solid var(--ab-bord); max-width: 100%; overflow-x: auto; }
.ab-segments button, .ab-segments a { min-height: 38px; padding: 0 16px; border: 0; border-radius: var(--ab-r-rond); background: none; color: var(--ab-texte-2);
  font-weight: 650; font-size: var(--ab-t-s); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.ab-segments [aria-pressed="true"], .ab-segments [aria-selected="true"], .ab-segments .actif { background: var(--ab-surface); color: var(--ab-texte); box-shadow: var(--ab-ombre-1); }
.ab-segments.ab-plein { display: flex; } .ab-segments.ab-plein > * { flex: 1; justify-content: center; }

/* Pastilles de filtre */
.ab-puces { display: flex; gap: var(--ab-e2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ab-puces::-webkit-scrollbar { display: none; }
.ab-puce { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--ab-r-rond);
  border: 1px solid var(--ab-bord-fort); background: var(--ab-surface); color: var(--ab-texte); font-size: var(--ab-t-s); font-weight: 600; cursor: pointer; text-decoration: none; }
.ab-puce[aria-pressed="true"], .ab-puce.actif { background: var(--ab-texte); color: var(--ab-fond); border-color: var(--ab-texte); }

/* --- Badges --------------------------------------------------------------------------------- */
.ab-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--ab-r-rond); font-size: var(--ab-t-xs);
  font-weight: 700; line-height: 1.4; white-space: nowrap; background: var(--ab-fond-2); color: var(--ab-texte-2); vertical-align: middle; }
.ab-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.ab-badge.ab-sans-point::before { display: none; }
.ab-badge.succes { background: var(--ab-succes-fond); color: var(--ab-succes); }
.ab-badge.alerte { background: var(--ab-alerte-fond); color: var(--ab-alerte); }
.ab-badge.danger { background: var(--ab-danger-fond); color: var(--ab-danger); }
.ab-badge.info { background: var(--ab-info-fond); color: var(--ab-info); }
.ab-badge.accent { background: var(--ab-accent-doux); color: var(--ab-accent); }

/* --- Formulaires ------------------------------------------------------------------------- */
.ab-form { display: flex; flex-direction: column; gap: var(--ab-e4); }
.ab-champ { display: flex; flex-direction: column; gap: 6px; font-size: var(--ab-t-s); font-weight: 650; color: var(--ab-texte); }
.ab-champ > small, .ab-aide { font-weight: 400; color: var(--ab-texte-3); font-size: var(--ab-t-xs); }
.ab-entree, .ab-form :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea) {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--ab-r-m); border: 1.5px solid var(--ab-bord-fort);
  background: var(--ab-surface); color: var(--ab-texte); font: 400 var(--ab-t-m)/1.3 var(--ab-police);
  transition: border-color var(--ab-m-rapide), box-shadow var(--ab-m-rapide); -webkit-appearance: none; appearance: none;
}
.ab-form select, select.ab-entree { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23887' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
.ab-form textarea, textarea.ab-entree { min-height: 110px; resize: vertical; }
.ab-entree::placeholder, .ab-form ::placeholder { color: var(--ab-texte-3); opacity: .8; }
.ab-entree:hover, .ab-form :where(input, select, textarea):hover { border-color: var(--ab-texte-3); }
.ab-entree:focus, .ab-form :where(input, select, textarea):focus { outline: none; border-color: var(--ab-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ab-accent) 22%, transparent); }
.ab-form :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--ab-danger); }
.ab-form fieldset, fieldset.ab-groupe { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--ab-e4); min-width: 0; }
.ab-form legend { font: 750 var(--ab-t-l)/1.2 var(--ab-police-titre); padding: 0; margin-bottom: var(--ab-e3); }
.ab-coche { display: flex; align-items: flex-start; gap: 12px; min-height: var(--ab-cible); padding: 10px 0; font-weight: 500; cursor: pointer; }
.ab-coche input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--ab-accent); }
.ab-choix-carte { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--ab-bord-fort); border-radius: var(--ab-r-m);
  cursor: pointer; font-weight: 500; transition: border-color var(--ab-m-rapide), background var(--ab-m-rapide); }
.ab-choix-carte:has(input:checked) { border-color: var(--ab-accent); background: var(--ab-accent-doux); }
.ab-choix-carte input { width: 22px; height: 22px; margin: 0; accent-color: var(--ab-accent); flex: none; }
.ab-deux { display: grid; gap: var(--ab-e4); }
@media (min-width: 560px) { .ab-deux { grid-template-columns: 1fr 1fr; } }
.ab-erreur { color: var(--ab-danger); font-size: var(--ab-t-s); font-weight: 600; }
.ab-erreur:empty { display: none; }
input[type=range].ab-curseur { width: 100%; height: 28px; accent-color: var(--ab-accent); background: none; }

/* --- Tableaux (deviennent des cartes sur téléphone) --------------------------------------- */
.ab-tableau-cadre { width: 100%; overflow-x: auto; border-radius: var(--ab-r-m); }
.ab-tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ab-t-s); font-variant-numeric: tabular-nums; }
.ab-tableau th { position: sticky; top: 0; text-align: left; padding: 10px 12px; font-size: var(--ab-t-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ab-texte-3); background: var(--ab-surface); border-bottom: 1px solid var(--ab-bord); white-space: nowrap; }
.ab-tableau td { padding: 12px; border-bottom: 1px solid var(--ab-bord); vertical-align: middle; }
.ab-tableau tbody tr { transition: background var(--ab-m-rapide); }
.ab-tableau tbody tr:hover { background: var(--ab-surface-2); }
.ab-tableau tbody tr:last-child td { border-bottom: 0; }
.ab-tableau tfoot td { font-weight: 750; border-top: 2px solid var(--ab-bord-fort); border-bottom: 0; }
.ab-tableau .n, .ab-tableau .num, .ab-tableau [data-num] { text-align: right; white-space: nowrap; }
.ab-tableau td.ab-principal { font-weight: 650; }
@media (max-width: 639px) {
  .ab-tableau.ab-cartes thead { display: none; }
  .ab-tableau.ab-cartes, .ab-tableau.ab-cartes tbody, .ab-tableau.ab-cartes tfoot { display: block; }
  .ab-tableau.ab-cartes tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 4px; border-bottom: 1px solid var(--ab-bord); }
  .ab-tableau.ab-cartes tbody tr:hover { background: none; }
  .ab-tableau.ab-cartes td { display: flex; justify-content: space-between; gap: 12px; padding: 0; border: 0; grid-column: 1 / -1; text-align: right; }
  .ab-tableau.ab-cartes td::before { content: attr(data-libelle); color: var(--ab-texte-3); font-size: var(--ab-t-xs); font-weight: 600; text-align: left; }
  .ab-tableau.ab-cartes td:first-child { grid-column: 1; font-weight: 700; font-size: var(--ab-t-m); text-align: left; }
  .ab-tableau.ab-cartes td:first-child::before { display: none; }
  .ab-tableau.ab-cartes td:nth-child(2) { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .ab-tableau.ab-cartes td:nth-child(2)::before { display: none; }
  .ab-tableau.ab-cartes td:empty { display: none; }
  .ab-tableau.ab-cartes tfoot tr { border-bottom: 0; }
}

/* Listes riches (titres, lieux, factures) */
.ab-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ab-liste > li, .ab-element { display: flex; align-items: center; gap: var(--ab-e3); min-height: 60px; padding: 10px 4px;
  border-bottom: 1px solid var(--ab-bord); }
.ab-liste > li:last-child { border-bottom: 0; }
.ab-element-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ab-element-texte strong, .ab-element-texte .ab-titre { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-element-texte small { color: var(--ab-texte-2); font-size: var(--ab-t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-element-fin { flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.ab-element-fin small { display: block; font-weight: 400; color: var(--ab-texte-3); font-size: var(--ab-t-xs); }
.ab-rang { width: 24px; flex: none; text-align: center; font-weight: 800; color: var(--ab-texte-3); font-variant-numeric: tabular-nums; }

/* Pochettes */
.ab-pochette { flex: none; width: 52px; height: 52px; border-radius: var(--ab-r-s); object-fit: cover; background: var(--ab-fond-2); box-shadow: var(--ab-ombre-1); }
.ab-pochette.grande { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--ab-r-m); box-shadow: var(--ab-ombre-2); }

/* Barres de progression */
.ab-jauge { height: 8px; border-radius: var(--ab-r-rond); background: var(--ab-fond-2); overflow: hidden; }
.ab-jauge > span, .ab-jauge > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ab-accent), var(--ab-accent-2)); transform-origin: left; animation: ab-jauge var(--ab-m-lent) var(--ab-courbe) both; }
@keyframes ab-jauge { from { transform: scaleX(0); } }

/* --- Graphiques SVG (dessinés par ArtiBox.graphique) ------------------------------------ */
.ab-graphique { width: 100%; display: block; overflow: visible; }
.ab-graphique text { font: 600 11px var(--ab-police); fill: var(--ab-texte-3); font-variant-numeric: tabular-nums; }
.ab-graphique .grille { stroke: var(--ab-bord); stroke-width: 1; }
.ab-graphique .barre { fill: var(--ab-accent); }
.ab-graphique .barre.b2 { fill: var(--ab-accent-2); opacity: .55; }
.ab-graphique .courbe { fill: none; stroke: var(--ab-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ab-graphique .courbe.c2 { stroke: var(--ab-texte-3); stroke-dasharray: 5 5; stroke-width: 2; }
.ab-graphique .aire { fill: url(#ab-degrade-aire); }
.ab-graphique .point { fill: var(--ab-surface); stroke: var(--ab-accent); stroke-width: 2.5; }
.ab-graphique .valeur { fill: var(--ab-texte); font-weight: 700; }
.ab-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--ab-t-xs); color: var(--ab-texte-2); }
.ab-legende span { display: inline-flex; align-items: center; gap: 6px; }
.ab-legende i { width: 12px; height: 12px; border-radius: 4px; background: var(--ab-accent); }
.ab-legende i.b2 { background: var(--ab-accent-2); opacity: .55; } .ab-legende i.c2 { background: none; border: 2px dashed var(--ab-texte-3); height: 0; border-radius: 0; width: 14px; }
.ab-anneau { --p: 0; width: 120px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ab-accent) calc(var(--p) * 1%), var(--ab-fond-2) 0); }
.ab-anneau::after { content: attr(data-valeur); width: 76%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--ab-surface); font: 800 1.25rem var(--ab-police-titre); }

/* --- États vides, chargement, notifications ---------------------------------------------- */
.ab-vide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ab-e3); padding: var(--ab-e10) var(--ab-e5);
  color: var(--ab-texte-2); border: 1.5px dashed var(--ab-bord-fort); border-radius: var(--ab-r-l); }
.ab-vide svg { width: 48px; height: 48px; fill: var(--ab-texte-3); opacity: .8; }
.ab-vide strong { color: var(--ab-texte); font-size: var(--ab-t-l); }
.ab-vide p { max-width: 42ch; }

.ab-squelette { position: relative; overflow: hidden; background: var(--ab-fond-2); border-radius: var(--ab-r-s); min-height: 14px; }
.ab-squelette::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ab-surface) 60%, transparent), transparent); animation: ab-reflet 1.3s infinite; }
@keyframes ab-reflet { to { transform: translateX(100%); } }
.ab-chargement { display: grid; gap: var(--ab-e3); padding: var(--ab-e4) 0; }
.ab-roue { width: 22px; height: 22px; border-radius: 50%; border: 3px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: ab-tour .8s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes ab-tour { to { transform: rotate(360deg); } }

.ab-encart { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--ab-r-m); background: var(--ab-info-fond); color: var(--ab-texte); font-size: var(--ab-t-s); }
.ab-encart svg { width: 22px; height: 22px; flex: none; fill: var(--ab-info); }
.ab-encart.succes { background: var(--ab-succes-fond); } .ab-encart.succes svg { fill: var(--ab-succes); }
.ab-encart.alerte { background: var(--ab-alerte-fond); } .ab-encart.alerte svg { fill: var(--ab-alerte); }
.ab-encart.danger { background: var(--ab-danger-fond); } .ab-encart.danger svg { fill: var(--ab-danger); }

.ab-notifs { position: fixed; z-index: 90; left: 50%; bottom: calc(var(--ab-e4) + var(--ab-zone-bas)); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 2 * var(--ab-gouttiere))); pointer-events: none; }
.ab-avec-barre-bas .ab-notifs { bottom: calc(var(--ab-barre-bas) + var(--ab-e3) + var(--ab-zone-bas)); }
.ab-notif { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--ab-r-m);
  background: var(--ab-texte); color: var(--ab-fond); box-shadow: var(--ab-ombre-3); font-size: var(--ab-t-s); font-weight: 600;
  animation: ab-monte var(--ab-m-moyen) var(--ab-courbe) both; }
.ab-notif.sort { animation: ab-descend var(--ab-m-moyen) var(--ab-courbe) both; }
.ab-notif svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.ab-notif.erreur { background: var(--ab-danger); color: #fff; }
@keyframes ab-monte { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes ab-descend { to { opacity: 0; transform: translateY(8px); } }

/* Feuille (dialogue en bas d'écran sur téléphone, centré sur ordinateur) */
.ab-feuille-fond { position: fixed; inset: 0; z-index: 80; background: var(--ab-voile); animation: ab-apparait var(--ab-m-moyen) both; }
.ab-feuille { position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto; padding: var(--ab-e3) var(--ab-e5) calc(var(--ab-e6) + var(--ab-zone-bas));
  background: var(--ab-surface-haute); border-radius: var(--ab-r-xl) var(--ab-r-xl) 0 0; box-shadow: var(--ab-ombre-3); animation: ab-glisse var(--ab-m-lent) var(--ab-courbe) both; }
.ab-feuille::before { content: ""; display: block; width: 40px; height: 5px; margin: 0 auto var(--ab-e4); border-radius: 3px; background: var(--ab-bord-fort); }
@media (min-width: 768px) { .ab-feuille { left: 50%; bottom: auto; top: 50%; width: min(520px, 92vw); transform: translate(-50%, -50%); border-radius: var(--ab-r-xl); animation-name: ab-apparait; } .ab-feuille::before { display: none; } }
@keyframes ab-apparait { from { opacity: 0; } }
@keyframes ab-glisse { from { transform: translateY(100%); } }

/* Entrée des vues */
.ab-entree-vue { animation: ab-vue var(--ab-m-lent) var(--ab-courbe) both; }
@keyframes ab-vue { from { opacity: 0; transform: translateY(8px); } }

/* Pied de page */
.ab-pied { margin-top: var(--ab-e12); padding-top: var(--ab-e5); border-top: 1px solid var(--ab-bord); color: var(--ab-texte-3); font-size: var(--ab-t-xs);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* Écran de connexion : panneau de marque + formulaire */
.ab-accueil { min-height: calc(100dvh - 60px); display: grid; align-content: center; gap: var(--ab-e6); padding: var(--ab-e6) var(--ab-gouttiere) var(--ab-e10); max-width: 1080px; margin: 0 auto; }
.ab-accueil-marque { display: flex; flex-direction: column; gap: var(--ab-e3); }
.ab-accueil-marque h1 { font-size: var(--ab-t-3xl); font-weight: 850; letter-spacing: -.035em; }
.ab-accueil-marque p { color: var(--ab-texte-2); font-size: var(--ab-t-l); max-width: 44ch; }
.ab-accueil .ab-carte { box-shadow: var(--ab-ombre-2); }
.ab-points { list-style: none; padding: 0; margin: var(--ab-e2) 0 0; display: flex; flex-direction: column; gap: 10px; color: var(--ab-texte-2); }
.ab-points li { display: flex; gap: 10px; align-items: flex-start; }
.ab-points svg { width: 20px; height: 20px; fill: var(--ab-accent); flex: none; margin-top: 2px; }
@media (min-width: 900px) { .ab-accueil { grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--ab-e16); } }

/* Bouton de thème */
.ab-theme svg { width: 20px; height: 20px; }

/* --- Mouvement réduit ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .ab-entete, .ab-barre-bas, .ab-notifs, .ab-actions { display: none !important; }
  body.ab { background: #fff; color: #000; }
  .ab-carte { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* Hauteurs des squelettes */
.ab-h16 { height: 16px; } .ab-h24 { height: 24px; } .ab-h56 { height: 56px; } .ab-h120 { height: 120px; } .ab-h200 { height: 200px; }

/* Retouches après application aux applis (contraste, cibles, graphiques) */
[data-theme="sombre"] .ab-avatar,
[data-theme="sombre"] .ab-barre-bas .ab-central span.ab-bulle { color: var(--ab-sur-accent); }
[data-theme="sombre"] .ab-barre-bas .ab-central span.ab-bulle svg { fill: var(--ab-sur-accent); }
.ab-btn.ab-petit { min-height: var(--ab-cible); }
.ab-jauge { background: color-mix(in srgb, var(--ab-texte) 10%, transparent); }
[data-theme="sombre"] .ab-graphique .barre.b2, [data-theme="sombre"] .ab-legende i.b2 { opacity: .85; }
.ab-graphique text.valeur { font-size: 18px; font-weight: 800; fill: var(--ab-texte); }
.ab-tendance svg { width: 14px; height: 14px; fill: currentColor; }
.ab-tendance.baisse svg { transform: scaleY(-1); }
@media (max-width: 639px) {
  .ab-tableau.ab-cartes td { align-items: baseline; }
  .ab-graphique text { font-size: 20px; }
}
.ab-entete-nav a, .ab-entete-nav button { white-space: nowrap; min-height: var(--ab-cible); }
.ab-entete-nav svg { flex: none; }
.ab-puce, .ab-segments button, .ab-segments a { min-height: var(--ab-cible); }
.ab-form fieldset.ab-carte { padding: var(--ab-e5); border: 1px solid var(--ab-bord); border-radius: var(--ab-r-l); background: var(--ab-surface); }
@media (min-width: 768px) { .ab-form fieldset.ab-carte { padding: var(--ab-e6); } }
/* Héros : le dégradé fonce vers la droite pour garder le petit texte blanc lisible (AA). */
.ab-heros { background: linear-gradient(135deg, var(--ab-accent) 0%, color-mix(in srgb, var(--ab-accent-2) 55%, #000) 135%); }