/* ============================================================
   tabs.css — Onglets maison (source unique, cross-produit)
   ------------------------------------------------------------
   Onglets FONCTIONNELS du Design System (barre + panneaux).
   Remplacent les onglets Bootstrap (nav-tabs / tab-pane) sur les
   pages reconstruites. Pilotés par scripts/modules/ds-tabs.js
   (attribut data-ds-tab sur .tab ↔ id sur .tab-panel).
   Aucune collision avec Bootstrap (.nav-tabs / .tab-pane / .tab-content).
   Chargé dans le style-guide ET les pages de production,
   APRÈS layout.css. Source unique : ne pas redéfinir ailleurs.
   ============================================================ */

/* ---------- Barre d'onglets ---------- */
.tabs {
  display: flex; gap: var(--sp-1);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-5);
}

/* ---------- Onglet (bouton ou lien) ---------- */
.tab {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--c-text-muted); background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--c-text); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab i { margin-right: var(--sp-2); }

/* AI.biza : le jaune est illisible en texte sur fond clair → on garde
   un texte lisible, l'accent ne porte que sur la bordure active. */
[data-product="aibiza"] .tab.is-active { color: var(--c-text); }

/* ---------- Variante « niveau page » : onglets plus larges ---------- */
.tabs--page { gap: var(--sp-2); margin-bottom: var(--sp-6); }
.tabs--page .tab { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-h3); }

/* ---------- Panneaux : masqués par défaut, affichés si actifs ---------- */
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }