/**
 * ═══════════════════════════════════════════════════════════════
 * STYLES : components.css
 * RÔLE   : Boutons, cartes, modal, toast, smiley-toggle, menu-popup
 * SCOPE  : composants · DÉPS : tokens.css
 * NOTE   : Squelette stylé — détails affinés en Phase 1.
 * @project Caroteck · @signature TECHNOTECK ♥ POWER — Pour Caro Annie
 * ═══════════════════════════════════════════════════════════════
 */
/* --- Boutons --- */
.btn { padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md); font-weight: var(--font-weight-semibold); transition: filter var(--transition-fast); }
.btn-primary { background: var(--primary); color: var(--text-on-primary); }
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-bright); }
.btn:active { filter: brightness(1.1); }

/* --- Carte --- */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-md); }

/* --- Modal --- */
.modal-overlay { position: fixed; inset: 0; background: var(--bg-overlay); z-index: var(--z-modal); display: none; }
.modal-overlay.open { display: block; }
.modal-box { position: absolute; bottom: 0; left: 0; right: 0; background: var(--bg-card); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-lg); }

/* --- Toast --- */
.toast { position: fixed; bottom: calc(var(--tabbar-height) + var(--space-md)); left: 50%; transform: translateX(-50%); background: var(--bg-card); border: 1px solid var(--border-bright); border-radius: var(--radius-full); padding: var(--space-sm) var(--space-lg); z-index: var(--z-toast); opacity: 0; transition: opacity var(--transition-base); }
.toast.show { opacity: 1; }

/* --- Smiley toggle (innovation Caro) --- */
.smiley-toggle { display: inline-flex; gap: var(--space-xs); }
.smiley-toggle .smiley { width: 40px; height: 40px; border-radius: var(--radius-full); display: grid; place-items: center; font-size: var(--font-size-lg); border: 2px solid var(--border); }
.smiley-toggle .smiley.on-success { background: var(--success); color: var(--text-on-primary); border-color: var(--success); }
.smiley-toggle .smiley.on-fail { background: var(--danger); color: var(--text-primary); border-color: var(--danger); }

/* --- Tabbar tabs --- */
.tabbar-tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-muted);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
  cursor: pointer; transition: color var(--transition-fast);
  padding: 0; min-height: 44px;
}
.tabbar-tab--active { color: var(--primary); }
.tabbar-tab:active { color: var(--primary-soft); }

/* --- Menu popup (drag-drop mode menu) --- */
.menu-popup { position: absolute; background: var(--bg-card); border: 1px solid var(--border-bright); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-elevated); }
.menu-popup button { display: block; width: 100%; text-align: left; padding: var(--space-sm) var(--space-md); }
.menu-popup button:hover { background: var(--bg-card-hover); }