/* ═══ ONGLETS « FEUILLE » (12.10.2026) ════════════════════════════════════════════════════════
   « Change l'affichage des onglets, c'est moche. Donne un effet feuille. » Depuis e76fa84, la barre
   segmentée .dbx-onglets n'avait plus de style (commentaire dans css/10) alors qu'une quinzaine
   d'écrans l'utilisent encore : suivi des affaires, suivi financier, conseil, rentabilité,
   commissions, factures, objectifs… Les boutons sortaient bruts.
   - Les onglets de page (role="tablist", ou sans rôle) deviennent des feuilles de classeur : coin
     supérieur droit corné, feuilles inactives un peu en retrait derrière la ligne, feuille active
     au premier plan, surlignée de l'accent et ouverte sur le contenu.
   - Les sélecteurs (role="group" : horizon, unité, personne) gardent une barre segmentée compacte :
     ce ne sont pas des pages.
   Tout passe par les jetons (--surface, --border, --accent…), donc chaque thème suit. */

.dbx-onglets {
  --onglet-corne: 11px;
  display: flex; align-items: flex-end; gap: 3px;
  padding: 0 4px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.dbx-onglets::-webkit-scrollbar { display: none; }

.dbx-onglets > button {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  margin: 6px 0 -1px; padding: 8px 24px 9px 16px;
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 10px 0 0 0;
  background: linear-gradient(180deg, var(--surface-alt), color-mix(in srgb, var(--surface-alt) 82%, var(--border)));
  color: var(--text-muted);
  font: inherit; font-size: var(--t-m); font-weight: 600; white-space: nowrap;
  cursor: pointer;
  /* Le coin coupé en biais : la feuille du dessous se devine derrière. */
  clip-path: polygon(0 0, calc(100% - var(--onglet-corne)) 0, 100% var(--onglet-corne), 100% 100%, 0 100%);
  transform: translateY(3px);
  transition: transform .18s ease, color .18s ease, background .18s ease;
}
/* Le rabat du coin corné */
.dbx-onglets > button::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: var(--onglet-corne); height: var(--onglet-corne);
  background: linear-gradient(225deg, transparent 50%, color-mix(in srgb, var(--border) 75%, var(--text-dim)) 50%);
  border-bottom-left-radius: 3px;
}
.dbx-onglets > button:hover { color: var(--text); transform: translateY(1px); }
.dbx-onglets > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

.dbx-onglets > button.actif,
.dbx-onglets > button[aria-selected="true"] {
  z-index: 1;
  background: var(--surface);
  color: var(--text);
  border-top: 3px solid var(--accent);
  padding-top: 6px;
  transform: none;
}
.dbx-onglets > button.actif::after,
.dbx-onglets > button[aria-selected="true"]::after {
  background: linear-gradient(225deg, transparent 50%, var(--accent-border) 50%);
}
/* La feuille active s'ouvre sur le contenu : elle recouvre la ligne de la barre. */
.dbx-onglets > button.actif::before,
.dbx-onglets > button[aria-selected="true"]::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--surface);
}

.dbx-onglets .dbx-classique { font-size: var(--t-xs); font-weight: 500; color: var(--text-dim); margin-left: 4px; }
.dbx-onglets small { font-weight: 600; opacity: .75; }

/* Sélecteurs (role="group") : barre segmentée compacte, sans effet de feuille. */
.dbx-onglets[role="group"] {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px; width: fit-content;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.dbx-onglets[role="group"] > button {
  margin: 0; padding: 6px 14px; border: none; border-radius: 9px;
  background: transparent; clip-path: none; transform: none;
}
.dbx-onglets[role="group"] > button::after,
.dbx-onglets[role="group"] > button::before { content: none; }
.dbx-onglets[role="group"] > button.actif,
.dbx-onglets[role="group"] > button[aria-selected="true"] {
  background: var(--accent); color: var(--on-accent); border-top: none; padding-top: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
}

@media (max-width: 768px) {
  .dbx-onglets > button { padding: 7px 20px 8px 12px; font-size: var(--t-s); }
  .dbx-onglets > button.actif, .dbx-onglets > button[aria-selected="true"] { padding-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .dbx-onglets > button { transition: none; }
}
@media print { .dbx-onglets { display: none !important; } }