/* =============================================
   utils.css — Classes utilitaires réutilisables
   ============================================= */
.hidden     { display: none !important; }
.sr-only    { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }
.text-orange{ color: var(--orange); }
.text-grey  { color: var(--grey-lt); }
.text-center{ text-align: center; }
.font-bold  { font-weight: 700; }

.btn {
  display: inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:14px;font-weight:600;
  cursor:pointer;transition:all var(--transition);border:none;
}
.btn-primary { background:var(--orange);color:#000; }
.btn-primary:hover { background:var(--orange-lt);transform:scale(1.03); }
.btn-outline { background:transparent;color:var(--orange);border:1.5px solid var(--orange); }
.btn-outline:hover { background:rgba(255,149,0,.1); }

.badge { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:50px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; }
.badge-orange { background:var(--orange);color:#000; }
.badge-green  { background:var(--green);color:#fff; }
.badge-red    { background:var(--red);color:#fff; }
.badge-gold   { background:var(--gold);color:#000; }

.skeleton { background:linear-gradient(90deg,var(--card) 25%,var(--border) 50%,var(--card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-sm); }
@keyframes shimmer { 0%{background-position:200% 0;}100%{background-position:-200% 0;} }

.toast { position:fixed;bottom:80px;right:24px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--orange);color:var(--cream);padding:12px 18px;border-radius:var(--r-md);font-size:13px;box-shadow:var(--shadow-card);z-index:300;transform:translateX(120%);transition:transform var(--transition); }
.toast.show { transform:translateX(0); }