/* =================================================================
   buttons.css - Boutons standardises
   .btn          : bouton plein (accent)
   .btn-ghost    : bouton outline neutre
   .btn-danger   : bouton plein rouge
   .btn-success  : bouton plein vert
   .btn-square   : bouton carre/rond 28x28 (icone)
   .btn-circle   : bouton rond 44px (icone)
   .btn-glass    : bouton glass (pour fonds complexes / images)
   .btn-block    : prend toute la largeur
   .btn-sm / .btn-lg : tailles
   .btn-open / .btn-close-panel : cercle chevron (convention socle)

   Les boutons pleins suivent l'accent du theme et contrastent
   automatiquement en mode sombre ET clair (via --accent-on).
   ================================================================= */

/* === Base commune des boutons pill === */
.btn,
.btn-ghost,
.btn-danger,
.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-norm);
  white-space: nowrap;
  user-select: none;
  box-shadow: var(--shadow-sm);
}

/* Primary : fond plein accent, texte contrastant automatique */
.btn {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}
.btn:hover   { filter: brightness(1.12); }
.btn:active  { filter: brightness(0.95); }

/* Ghost : outline neutre, marche sur fond clair comme sombre */
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-light);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Danger : fond plein rouge (couleur statut fixe) */
.btn-danger {
  background: var(--error);
  color: #16171c;
  border-color: var(--error);
}
.btn-danger:hover  { filter: brightness(1.10); }
.btn-danger:active { filter: brightness(0.95); }

/* Success : fond plein vert (couleur statut fixe) */
.btn-success {
  background: var(--success);
  color: #16171c;
  border-color: var(--success);
}
.btn-success:hover  { filter: brightness(1.10); }
.btn-success:active { filter: brightness(0.95); }

/* Bouton icone : ROND par defaut (decide 2026-05-14), style glass leger.
   --glass-tint / --glass-border s'inversent en mode clair. */
.btn-square {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--glass-tint);
  color: var(--text);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  font-family: var(--font-icon), var(--font);
  font-size: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-norm);
}
.btn-square:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-square.danger:hover {
  color: var(--error-text);
  border-color: var(--error);
}

/* === Bouton rond grande taille (icone Segoe MDL2 centree) === */
.btn-circle {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--glass-tint);
  color: var(--text);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  font-family: var(--font-icon), var(--font);
  font-size: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-norm);
  position: relative;
  flex-shrink: 0;
}
.btn-circle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-circle.btn-sm { width: 32px; height: 32px; font-size: 14px; }
.btn-circle.btn-lg { width: 56px; height: 56px; font-size: 22px; }

/* Badge notification (point rouge en haut a droite) */
.btn-circle .btn-badge {
  position: absolute;
  top: 2px; right: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--error);
  border: 2px solid var(--bg-base);
}
/* Variante : badge avec un nombre (1, 2, 9+, etc.) */
.btn-circle .btn-badge.count {
  width: auto; height: auto;
  min-width: 16px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  color: #16171c;                       /* sombre fixe sur rose : lisible */
  font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
  top: -2px; right: -2px;
}

/* === Bouton glass (glassmorphism) ===
   Pour fonds complexes (image, degrade). --glass-tint s'inverse en clair. */
.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: var(--glass-tint);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  color: var(--text);
  cursor: pointer;
  transition: var(--transition-norm);
  box-shadow: var(--shadow-sm);
}
.btn-glass:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn[disabled],
.btn-ghost[disabled],
.btn-danger[disabled],
.btn-success[disabled],
.btn-square[disabled],
.btn-glass[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  filter: none;
}

.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }

/* =================================================================
   Bouton rond "ouvrir / fermer" - CONVENTION SOCLE
   .btn-open        : chevron droite, marque une fiche/page ouvrante
   .btn-close-panel : chevron gauche, marque un retour / une fermeture
   Style fidele a .ar-pilier-cta (arundo.html). Le glyphe est injecte
   via CSS pour garantir la coherence : ecrire juste <button class="btn-open">.
   ================================================================= */
.btn-open,
.btn-close-panel {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--glass-tint);
  border: 1px solid var(--accent);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-icon), var(--font);
  font-size: 9px;
  cursor: pointer;
  transition: var(--transition-norm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.btn-open::before        { content: '\E76C'; }   /* ChevronRight */
.btn-close-panel::before { content: '\E76B'; }   /* ChevronLeft  */
.btn-open:hover,
.btn-close-panel:hover {
  background: var(--accent-glow);
  transform: scale(1.1);
  box-shadow: 0 0 16px var(--accent-glow);
}


/* =================================================================
   Bouton toggle de panneau (sidebar / subnav) - MODELE UNIQUE
   .sidebar-toggle et .subnav-toggle partagent exactement ce bloc.
   Chevron injecte en CSS ; le parent .collapsed le fait pivoter.
   ================================================================= */
.sidebar-toggle,
.subnav-toggle {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-tint);
  color: var(--text-muted);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  font-family: var(--font-icon), var(--font);
  font-size: 11px;
  line-height: 1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: var(--transition-norm), transform 0.2s ease;
  flex-shrink: 0;
}
.sidebar-toggle::before,
.subnav-toggle::before { content: "\E76B"; }   /* ChevronLeft */
.sidebar-toggle:hover,
.subnav-toggle:hover {
  background: var(--glass-tint-2);
  border-color: var(--accent);
  color: var(--accent);
}