/* =============================================================
   PEAU DE COMPOSANTS — skin martaf (couche 2)
   -------------------------------------------------------------
   Feuille de SURCHARGE : la feuille de base (mt-ui.css) reste
   chargée, on ne redéfinit que ce qui change.

   Chargée par @mtSkin, APRÈS partials/theme-vars → a le dernier mot.

   Parti pris : site VITRINE institutionnel (martaf-group.com), pas un
   back-office — CTA en PILULE (signature visuelle du mockup fourni),
   cartes à liseré doux et légère élévation au survol (aération "brochure
   premium"), plutôt que la sobriété plate de school ou le liseré latéral
   d'un back-office.

   Contrat (cf. docs/ARCHITECTURE/peaux-composants.md) : uniquement des
   classes .mt-* existantes, uniquement des tokens --mt-* pour les
   couleurs ET les grandeurs. Aucune valeur en dur (hors 999px, qui est
   la valeur littérale du token --mt-radius-full lui-même).
   ============================================================= */

/* ── Boutons : CTA en pilule, relief discret au survol ──────────────── */
.mt-btn-primary,
.mt-btn-warning,
.mt-btn-outline {
    border-radius: 999px;
    box-shadow: var(--mt-shadow-sm);
}
.mt-btn-primary:hover,
.mt-btn-warning:hover {
    box-shadow: var(--mt-shadow-md);
    filter: brightness(1.06);
}
.mt-btn-primary:active,
.mt-btn-warning:active {
    filter: brightness(0.97);
    box-shadow: none;
}
/* CTA doré (ocre) : texte foncé pour le contraste, comme le mockup. */
.mt-btn-warning {
    color: rgb(var(--mt-primary));
}

/* ── Cartes : liseré doux + légère élévation au survol (aération vitrine) ── */
.mt-card {
    transition: var(--mt-transition-base);
}
.mt-card-hover:hover {
    box-shadow: var(--mt-shadow-lg);
    transform: translateY(-2px);
}

/* ── Badges : pastille douce (ex. "En développement") ───────────────── */
.mt-badge-warning {
    background: transparent;
    border: 1px solid rgb(var(--mt-warning) / 0.4);
    color: rgb(var(--mt-warning));
    font-weight: 600;
}

/* ── Champs : halo doré au focus (cohérent avec l'accent CTA) ───────── */
.mt-input:focus,
.mt-select:focus,
.mt-textarea:focus {
    box-shadow: 0 0 0 3px rgb(var(--mt-warning) / 0.35);
}