/* ============================================================================
   cab-bouton — la pièce qui manquait.

   Quinze composants et pas de bouton : chaque démo réinventait le sien en CSS
   jetable, et la galerie, qui réintègre les démos sans leur feuille de style,
   affichait des boutons natifs du navigateur. Le cordonnier était mal chaussé.

   CE QUI GOUVERNE LE DESSIN

   1. Le retour se déclenche à l'APPUI, jamais au relâchement. C'est ce qui
      donne l'impression que l'interface écoute — attendre le clic complet fait
      toujours l'effet d'un temps mort.
   2. La densité prime. Trente-deux pixels de haut par défaut, vingt-six en
      compact : un bouton de quarante-quatre pixels mange une barre d'outils.
   3. Un seul bouton plein par zone. Le plein dit « c'est ici que ça se passe » ;
      trois pleins côte à côte ne disent plus rien du tout.
   4. Aucun dégradé, aucune ombre portée décorative. Le relief vient du
      contraste et de la bordure, pas d'un effet.
   ============================================================================ */

:where(:root),
:where([data-cab-theme]) {
  --cabb-encre:      var(--cab-ink, #06121A);
  --cabb-douce:      var(--cab-ink-2, #4D5B68);
  --cabb-faible:     var(--cab-ink-3, #8A95A0);
  --cabb-filet:      var(--cab-line, #E7E9EC);
  --cabb-filet-fort: var(--cab-line-strong, #D9DCE1);
  --cabb-fond:       var(--cab-surface, #FFFFFF);
  --cabb-creux:      var(--cab-band, #F7F8F9);
  --cabb-accent:     var(--cab-accent, #9A1B38);
  --cabb-accent-vif: var(--cab-accent-hover, #7A1F2E);
  /* Le texte POSÉ SUR l'accent. Surtout pas --cab-accent-ink, qui vaut l'accent
     lui-même et sert à écrire EN accent : l'employer ici peint du bordeaux sur
     du bordeaux. Les quatre feuilles ont un accent sombre, le blanc y tient. */
  --cabb-sur-accent: #FFFFFF;
  --cabb-danger:     var(--cab-danger-ink, #C2334A);
  --cabb-sans:       var(--cab-font-sans, system-ui, sans-serif);
  --cabb-mono:       var(--cab-font-mono, ui-monospace, monospace);
}

.cab-bouton {
  /* `inline-flex` et non `inline-block` : c'est ce qui centre verticalement un
     glyphe à côté d'un mot sans avoir à corriger la ligne de base. */
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 32px; padding: 0 14px;
  border: 1px solid var(--cabb-filet); border-radius: 999px;
  background: var(--cabb-fond); color: var(--cabb-douce);
  font-family: var(--cabb-sans); font-size: 13px; font-weight: 500;
  line-height: 1; white-space: nowrap; cursor: pointer;
  /* Jamais `all` : une transition sur tout attrape la couleur de fond au survol
     ET la position au défilement, et le bouton devient mou. */
  transition: transform 120ms cubic-bezier(.22, 1, .36, 1),
              border-color 140ms ease, background-color 140ms ease, color 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
.cab-bouton:hover { border-color: var(--cabb-filet-fort); color: var(--cabb-encre); }
/* Le retour à l'appui. 0,97 et pas moins : en dessous, le bouton a l'air de
   reculer plutôt que de répondre. */
.cab-bouton:active { transform: scale(.97); }
.cab-bouton:focus-visible {
  outline: 2px solid var(--cabb-accent); outline-offset: 2px;
}

/* --- les quatre traitements ---------------------------------------------- */

/* Le plein : un seul par zone. */
.cab-bouton[data-ton="principal"] {
  background: var(--cabb-accent); border-color: transparent; color: var(--cabb-sur-accent);
  font-weight: 600;
}
.cab-bouton[data-ton="principal"]:hover { background: var(--cabb-accent-vif); color: var(--cabb-sur-accent); }

/* Le contour : l'action secondaire, qui doit rester lisible sans réclamer. */
.cab-bouton[data-ton="second"] { border-color: var(--cabb-filet-fort); color: var(--cabb-encre); }

/* Le discret : dans une barre dense, une bordure par bouton fait une grille. */
.cab-bouton[data-ton="discret"] {
  border-color: transparent; background: transparent; color: var(--cabb-douce);
}
.cab-bouton[data-ton="discret"]:hover { background: var(--cabb-creux); color: var(--cabb-encre); }

/* Le danger reste en CONTOUR, jamais en plein : un aplat rouge dans une liste
   attire l'œil sur ce qu'il ne faut justement pas faire par réflexe. */
.cab-bouton[data-ton="danger"] { border-color: var(--cabb-danger); color: var(--cabb-danger); }
.cab-bouton[data-ton="danger"]:hover {
  background: color-mix(in srgb, var(--cabb-danger) 8%, transparent); color: var(--cabb-danger);
}

/* --- tailles et états ----------------------------------------------------- */

.cab-bouton[data-taille="compact"] { min-height: 26px; padding: 0 11px; font-size: 12px; gap: 5px; }
.cab-bouton[data-taille="large"] { min-height: 40px; padding: 0 20px; font-size: 14px; }

/* Une étiquette en chasse fixe, pour les barres d'outils où le mot est un
   repère plutôt qu'une phrase. */
.cab-bouton[data-etiquette] {
  font-family: var(--cabb-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}

.cab-bouton[disabled], .cab-bouton[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
/* Occupé : le libellé RESTE lisible et la largeur ne bouge pas. Remplacer le
   texte par un rond qui tourne fait sauter la barre entière et perd le sens du
   bouton pendant tout le temps de l'attente. */
.cab-bouton[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.cab-bouton[aria-busy="true"]::after {
  content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid currentColor; border-top-color: transparent;
  color: var(--cabb-douce);
  animation: cab-bouton-tourne 620ms linear infinite;
}
.cab-bouton[data-ton="principal"][aria-busy="true"]::after { color: var(--cabb-sur-accent); }
@keyframes cab-bouton-tourne { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  .cab-bouton { transition: border-color 140ms ease, background-color 140ms ease; }
  .cab-bouton:active { transform: none; }
  .cab-bouton[aria-busy="true"]::after { animation-duration: 1800ms; }
}

/* ============================================================================
   GROUPE SEGMENTÉ — deux ou trois options qui s'excluent.
   Pas des boutons côte à côte : un seul objet, dont une part est retenue.
   ============================================================================ */

.cab-segments {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--cabb-filet); border-radius: 999px;
  background: var(--cabb-creux);
}
.cab-segments .cab-bouton {
  border-color: transparent; background: transparent; min-height: 26px; padding: 0 12px;
  font-size: 12px; color: var(--cabb-faible);
}
.cab-segments .cab-bouton:hover { color: var(--cabb-encre); background: transparent; }
/* L'option retenue prend la surface, pas l'accent : dans un segmenté, c'est le
   contraste avec le creux qui désigne, et l'accent y serait une alarme. */
.cab-segments .cab-bouton[aria-pressed="true"] {
  background: var(--cabb-fond); color: var(--cabb-encre); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

/* --- une barre d'outils --------------------------------------------------- */

.cab-barre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Pousse ce qui suit à droite : une barre a presque toujours deux camps. */
.cab-barre__ecart { margin-left: auto; }