/* kosteo — les boutons de l'application, une seule définition.
 *
 * Avant le 09/10/2026 chacune des six feuilles de page recopiait ces règles, avec
 * des écarts (rayon 6 px ici, 8 px là, trois définitions de « .crit »). Elles
 * vivent maintenant ici, chargées après socle.css et avant la feuille de page.
 * Les feuilles de page ne gardent que la disposition (marges, alignement).
 *
 * Familles (voir le design system, « Boutons ») :
 *   .btn               secondaire : contour gris, fond de carte
 *   .btn.primary,.pbtn principal : plein vert ; .pbtn = grande taille
 *   .btn.fil           accent : contour vert, se remplit au survol (actions Pro, IA)
 *   .btn.violet        accent Orac : teinte violette
 *   .btn.crit          destructif discret : contour rouge
 *   .btn.danger        destructif confirmé : plein rouge
 *   .btn.done          action faite : texte vert
 * Tailles : .sm (5/11, 12 px) · défaut (6/12, 12,5 px) · .pbtn (8/15, 13 px).
 * Rayon 8 px, comme tout le reste du guide graphique.
 */
.btn,.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1;
  border:1px solid var(--line);border-radius:8px;cursor:pointer;text-decoration:none;
  transition:background-color .14s ease-out,border-color .14s ease-out,color .14s ease-out,box-shadow .14s ease-out,transform .11s ease-out}
.btn>span,.pbtn>span{line-height:1;display:inline-block}
.btn .ic,.pbtn .ic{flex:none}

/* secondaire */
.btn{padding:6px 12px;background:var(--surf);color:var(--tx2);font-size:12.5px;font-weight:500}
.btn:hover{border-color:var(--tx3);color:var(--tx)}
.btn.sm{padding:5px 11px;font-size:12px}

/* principal : le .pbtn est le même bouton en grand */
.btn.primary,.pbtn{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.btn.primary:hover,.pbtn:hover{background:var(--acc-d);border-color:var(--acc-d);color:#fff;box-shadow:0 2px 10px rgba(31,191,99,.32)}
.btn.primary:active,.pbtn:active{transform:translateY(1px) scale(.99)}
.pbtn{padding:7px 14px;font-size:13px;gap:7px}

/* accent : contour vert, plein au survol — pour ce qui est Pro ou passe par l'IA */
.btn.fil,.pbtn.fil{background:transparent;border-color:var(--acc);color:var(--acc-d);font-weight:600;box-shadow:none}
.btn.fil:hover,.pbtn.fil:hover{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:none}
.btn.fil .probadge,.pbtn.fil .probadge{margin:0}
.pbtn.fil .ic{fill:currentColor;stroke:none}

/* accent Orac */
.btn.violet{color:var(--violet);border-color:color-mix(in srgb,var(--violet) 45%,var(--line));
  background:var(--violet-w);font-weight:600}
.btn.violet:hover{background:color-mix(in srgb,var(--violet) 16%,var(--violet-w));
  border-color:var(--violet);color:var(--violet)}

/* destructifs */
.btn.crit{color:var(--crit,#C4462F);border-color:color-mix(in srgb,var(--crit,#C4462F) 40%,var(--line))}
.btn.crit:hover{background:var(--crit-w,rgba(204,58,46,.1));border-color:var(--crit,#C4462F);color:var(--crit,#C4462F)}
.btn.danger{background:var(--crit);border-color:var(--crit);color:#fff;font-weight:700}
.btn.danger:hover{background:var(--crit);border-color:var(--crit);color:#fff;filter:brightness(1.08)}

.btn.done,.tb .done{color:var(--ok,#12A150)}
.btn[disabled],.pbtn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn:focus-visible,.pbtn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}