/* ============================================================================
   UN bouton, UN groupe de boutons.

   Le projet en comptait sept en concurrence pour le même rôle, et la divergence
   n'était jamais intentionnelle : `.seg` et `.zoomseg` étaient des conteneurs
   copiés mot pour mot, dont les boutons avaient dérivé d'un demi-pixel de taille
   et d'un pixel de padding — la preuve étant `.rangeseg button{font-size:12.5px}`,
   une sous-classe qui n'existait que pour annuler le 13px hérité de la copie.

   Les alias vers ces anciens sélecteurs ont disparu en même temps que les vues
   qui les posaient (Plan, Site). Il ne reste que le composant.
   ========================================================================= */

.btn{
  appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--ctl-h);padding:var(--ctl-pad);
  font:inherit;font-size:var(--t-xs);font-weight:500;
  color:var(--soft-foreground);background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-md);
  cursor:pointer;white-space:nowrap;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.btn:hover{color:var(--foreground);border-color:var(--border-strong)}

/* Une seule action dominante par vue. */
.btn--primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}
.btn--primary:hover{color:var(--primary-foreground);opacity:.88}

/* Pour les listes longues : le cadre disparaît, le bouton reste un bouton. */
.btn--quiet{
  appearance:none;background:none;border:1px solid transparent;
  font:inherit;color:var(--soft-foreground);cursor:pointer;border-radius:var(--radius-sm);
}
.btn--quiet:hover{background:var(--accent);color:var(--foreground)}

.btn--icon{min-width:var(--ctl-h);padding-inline:var(--s-2)}

/* --- groupe de boutons -------------------------------------------------- */
/* PAS d'`overflow:hidden` ici. C'était la seule règle de tout le projet qui
   SUPPRIMAIT une fonctionnalité : à 390 px le cinquième onglet sortait du cadre,
   et comme la valeur était `hidden` et non `auto`, aucun geste ne pouvait le
   ramener. Un onglet sur cinq n'existait pas sur téléphone, à cause d'un coin
   arrondi fabriqué en rognant le conteneur. */
.btn-group{
  display:flex;align-items:stretch;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.btn-group::-webkit-scrollbar{display:none}
.btn-group>*{flex:0 0 auto}

/* Les boutons d'un groupe partagent un cadre : ils perdent le leur et ne gardent
   qu'un filet de séparation. Les coins sont arrondis par les enfants d'extrémité
   plutôt que par un rognage du parent. */
.btn-group .btn{border:0;border-radius:0;background:transparent}
.btn-group .btn+.btn{border-left:1px solid var(--border)}
.btn-group>:first-child{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md)}
.btn-group>:last-child{border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md)}

/* --- états, portés par ARIA et par rien d'autre -------------------------
   Déclarés EN DERNIER, à dessein : `.btn-group .btn{background:transparent}`
   a la même spécificité (0,2,0) qu'un sélecteur d'attribut, donc à égalité
   c'est l'ordre du fichier qui tranche. Placés plus haut, les états actifs
   perdaient leur fond et il ne restait qu'un texte couleur --background sur fond
   transparent : le bouton sélectionné devenait invisible. */
.btn[aria-current="true"],.btn[aria-pressed="true"],.btn[aria-selected="true"],
.btn-group .btn[aria-current="true"],.btn-group .btn[aria-pressed="true"],
.btn-group .btn[aria-selected="true"]{
  background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);
}
/* `opacity:.55` et pas .3/.35/.4 : à .35 un bouton désactivé tombait à 1,4:1
   et on ne pouvait plus lire ni son nom ni la raison de sa désactivation. */
.btn:disabled{opacity:.55;cursor:default}
.btn:disabled:hover{color:var(--soft-foreground);border-color:var(--border)}

/* Étiquette d'un groupe. Sans capitales : « RANGER Chapitres Familles » se
   lisait comme trois boutons dont le premier crie. */
.segcap,.btn-group__label{
  display:inline-flex;align-items:center;
  font-size:var(--t-2xs);font-weight:500;color:var(--muted-foreground);
  padding-inline:var(--s-3) var(--s-2);white-space:nowrap;
}

/* Une étiquette posée devant son groupe, hors du cadre des boutons. */
.btn-field{display:flex;align-items:center;gap:var(--s-2)}
.btn-field>.segcap{padding-inline:0}

.controls{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);
  padding-block:var(--s-4);border-bottom:1px solid var(--border);
}
.controls .spacer{flex:1 1 var(--s-5)}
.scalebar{display:flex;align-items:center;gap:var(--s-2)}
.scalebar svg{display:block}
.scalebar .cap{font-size:var(--t-2xs);color:var(--muted-foreground)}

/* --- pastilles de verdict -----------------------------------------------
   Elles portent un aplat plein, donc une seule valeur sert les deux thèmes.
   Jamais une couleur de famille d'usage : un token de famille détourné en
   token d'état fait mentir la légende. */
.chip{
  display:inline-block;font-style:normal;
  font-size:var(--t-3xs);font-weight:600;letter-spacing:.04em;
  color:var(--on-fill);border-radius:var(--radius-sm);
  padding:1px var(--s-1);white-space:nowrap;
}
.chip--danger{background:var(--danger-fill)}
.chip--warn{background:var(--warn-fill)}
.chip--ok{background:var(--ok-fill)}

/* --- témoin d'enregistrement --------------------------------------------
   Le seul message d'échec de l'app était « non enregistré » : deux mots, sans
   cause ni remède, dans le même gris que « sauvegarde locale ». */
.savechip{font-size:var(--t-2xs);color:var(--muted-foreground);white-space:nowrap}
.savechip b{color:var(--ok);font-weight:400}
.savechip.is-bad{color:var(--destructive);white-space:normal}

/* --- le cadenas d'un onglet -----------------------------------------------
   Le bandeau dit qu'on regarde sans pouvoir changer, et rouvre le bon
   cadenas. Sous lui, ce qui modifie ne répond plus (`render.js`) : on le dit
   aussi au curseur. */
.tab-verrou{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);
  margin-block:var(--s-3);padding:var(--s-2) var(--s-3);
  font-size:var(--t-xs);color:var(--foreground);
  background:var(--muted);border:1px solid var(--border);border-radius:var(--radius-md);
}
.tab-verrou svg{inline-size:15px;block-size:15px;flex:none}
.tab-verrou span{flex:1 1 20ch}
body[data-fige] #panels :is(button, input, select, textarea, .mixblk, .mixchip):not(:is(.subtabs, .tab-verrou, .viewbar, .mass-barre, .mix-iss, .mass-al__b, [data-vue]) *):not([data-vue]):not(.pr__q){cursor:not-allowed}

/* --- sous un Shuffle : le mode auto, et les shuffles des autres onglets ---
   (`views/shuffles.js`). Petits, à dessein : le Shuffle de l'onglet reste le
   geste ; ceux-ci sont des raccourcis. */
.shf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1);margin-block-start:var(--s-2)}
.shf .btn{min-height:24px;padding:0 var(--s-2);font-size:11px;gap:var(--s-1)}
.shf__sep{inline-size:1px;block-size:16px;background:var(--border);margin-inline:var(--s-1)}
.shf__m.is-fait{border-color:var(--primary);color:var(--foreground);animation:shf-fait 1.2s ease-out}
@keyframes shf-fait{from{background:color-mix(in srgb, var(--primary) 18%, var(--card))}}
.is-auto{outline:2px dashed var(--primary);outline-offset:2px}