/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  Cosmélyse V2 — boutons.css                                           ║
   ║  Style des boutons Bootstrap (.btn et variantes)                      ║
   ╚═══════════════════════════════════════════════════════════════════════╝

   Compatible Bootstrap 5.3.x.
   Charger APRÈS bootstrap.css ET cosmelyse.css (consomme les vars :root).

   ─── Pourquoi ce fichier ─────────────────────────────────────────────

   On override les classes natives Bootstrap (.btn-primary,
   .btn-outline-primary, .btn-secondary…) pour qu'elles adoptent la
   charte Cosmélyse. Avantages vs créer .btn-cosmelyse-rose :

     1. DRY    : pas besoin de retaper la classe partout dans le HTML,
                 le markup reste idiomatique Bootstrap.
     2. Compat : tous les composants Bootstrap (modals, alerts, navbars
                 avec .btn-close…) bénéficient de la charte sans patch.
     3. Maint. : si demain on retire Bootstrap, on retire ce fichier
                 et on garde un projet sain.

   ─── Périmètre épuré ─────────────────────────────────────────────────

   On ne style QUE les variantes effectivement utilisées dans le markup
   V2 actuel (primary, secondary, outline-primary, outline-secondary).
   Pas de btn-success / btn-warning / btn-danger / btn-light / btn-dark
   tant qu'aucune page n'en a besoin — ajout au cas par cas, on évite
   le code mort.

   ─── Double notation supportée ───────────────────────────────────────

   Le markup confirmer.php V2 utilise la notation BEM (.btn--primary,
   .btn--secondary, .btn--small) au lieu de la notation Bootstrap
   (.btn-primary, .btn-secondary, .btn-sm). Plutôt que de toucher au
   markup ou de dupliquer les règles, ce fichier déclare les deux
   sélecteurs sur la même règle — DRY préservé.
*/


/* ============================================
   1. BASE COMMUNE
   ============================================ */

.btn {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    border-radius: 10px;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled):not(.disabled) {
    transform: translateY(0);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}


/* ============================================
   2. TAILLES
   ============================================ */

.btn-sm,
.btn--small {
    font-size: 0.8rem;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
}

.btn-lg {
    font-size: 1.1rem;
    padding: 0.85rem 1.75rem;
    border-radius: 12px;
}


/* ============================================
   3. SOLIDES
   ============================================ */

/* ── Primary — rose gradient ──────────────── */
.btn-primary,
.btn--primary {
    background: linear-gradient(135deg, var(--primary-pink), var(--dark-pink));
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(233, 30, 99, 0.2);
}
.btn-primary:hover:not(:disabled):not(.disabled),
.btn--primary:hover:not(:disabled):not(.disabled),
.btn-primary:focus-visible,
.btn--primary:focus-visible {
    background: linear-gradient(135deg, var(--primary-pink), var(--dark-pink));
    color: #fff;
    box-shadow: 0 6px 18px rgba(233, 30, 99, 0.32);
}
.btn-primary:active:not(:disabled),
.btn--primary:active:not(:disabled) {
    background: var(--dark-pink);
    color: #fff;
    box-shadow: none;
}
.btn-primary:disabled,
.btn-primary.disabled,
.btn--primary:disabled,
.btn--primary.disabled {
    background: linear-gradient(135deg, var(--primary-pink), var(--dark-pink));
    color: #fff;
    border: none;
}

/* ── Secondary — vert plein ───────────────── */
.btn-secondary,
.btn--secondary {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: #fff;
    box-shadow: 0 4px 14px rgba(143, 181, 105, 0.2);
}
.btn-secondary:hover:not(:disabled):not(.disabled),
.btn--secondary:hover:not(:disabled):not(.disabled),
.btn-secondary:focus-visible,
.btn--secondary:focus-visible {
    background-color: var(--darker-green);
    border-color: var(--darker-green);
    color: #fff;
    box-shadow: 0 6px 18px rgba(143, 181, 105, 0.3);
}
.btn-secondary:active:not(:disabled),
.btn--secondary:active:not(:disabled) {
    background-color: var(--darker-green);
    border-color: var(--darker-green);
    color: #fff;
}


/* ============================================
   4. OUTLINE
   ============================================ */

[class*="btn-outline-"] {
    background: transparent;
    border-width: 1.5px;
}

/* ── Outline Primary — rose ───────────────── */
.btn-outline-primary {
    border-color: var(--primary-pink);
    color: var(--primary-pink);
}
.btn-outline-primary:hover:not(:disabled):not(.disabled),
.btn-outline-primary:focus-visible {
    background: linear-gradient(135deg, var(--primary-pink), var(--dark-pink));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(233, 30, 99, 0.22);
}
.btn-outline-primary:active:not(:disabled) {
    background: var(--dark-pink);
    border-color: var(--dark-pink);
    color: #fff;
}

/* ── Outline Secondary — vert ─────────────── */
.btn-outline-secondary {
    border-color: var(--primary-green);
    color: var(--primary-green);
}
.btn-outline-secondary:hover:not(:disabled):not(.disabled),
.btn-outline-secondary:focus-visible {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: #fff;
    box-shadow: 0 4px 14px rgba(143, 181, 105, 0.22);
}
.btn-outline-secondary:active:not(:disabled) {
    background-color: var(--darker-green);
    border-color: var(--darker-green);
    color: #fff;
}