/* ============================================
   COMPOSANT BOUTON KRAFT PARTAGÉ
   css/boutons.css
   --------------------------------------------
   Bouton kraft réutilisé sur plusieurs domaines : Mon compte, checkout, et
   catalogue/archives attribut (bouton « Voir les variétés hors stock »).
   Déplacé depuis account.css pour être chargé GLOBALEMENT (cf inc/assets.php,
   tableau $modules), car account.css n'est enqueue que sur compte + checkout.

   ORDRE STRICT : la base .ps-account-btn DOIT rester avant l'override
   .ps-order-toggle (spécificité égale 0,1,0 → c'est l'ordre source qui tranche).
   ============================================ */

/* a. Base — bouton kraft (fond texturé, cadre kraft border-image, MAJUSCULES). */
.ps-account-btn {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: url('../images/kraft-long.jpg') var(--ps-kraft-couleur);
    background-size: 6%;
    border: var(--ps-bordure-epaisse);
    border-image: url('../images/border.png') 24 24 / 12px 12px / 0 round;
    padding: 5px 18px 7px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.2s;
}

/* b. Survol — voile ambré superposé au fond kraft. */
.ps-account-btn:hover,
.ps-account-valider:hover {
    background:
        radial-gradient(rgba(220, 156, 90, 0.25), rgba(220, 156, 90, 0.25)),
        url('../images/kraft-long.jpg') var(--ps-kraft-couleur) !important;
    background-size: auto, 6% !important;
    background-clip: padding-box !important;
    color: var(--ps-texte) !important;
}

/* c. Verrouillage couleur texte — bouton voir le détail / masquer, tous états. */
.ps-order-toggle,
.ps-order-toggle:hover,
.ps-order-toggle:active,
.ps-order-toggle:focus,
.ps-order-toggle:visited {
    color: var(--ps-texte) !important;
}

/* c. Verrouillage couleur texte des boutons compte sur tous les états.
   Évite que le navigateur applique sa couleur native au focus/active
   (Firefox notamment passe en blanc). Pattern identique à .ps-order-toggle.
   .ps-account-valider est inclus car réutilisé sur les boutons login/register
   de la page Mon compte non connectée (page-mon-compte.php). */
.ps-account-btn,
.ps-account-btn:hover,
.ps-account-btn:active,
.ps-account-btn:focus,
.ps-account-btn:visited,
.ps-account-valider,
.ps-account-valider:hover,
.ps-account-valider:active,
.ps-account-valider:focus,
.ps-account-valider:visited {
    color: var(--ps-texte) !important;
}

/* d. Override petit bouton Voir / Masquer (détail commande, devis, paiement) :
   réduit la taille héritée de .ps-account-btn et remplace le cadre kraft
   (border-image) par une fine bordure marron arrondie. Le fond kraft hérité de
   .ps-account-btn est conservé. Placé APRÈS .ps-account-btn : à spécificité
   égale (0,1,0), cette règle l'emporte par l'ordre. */
.ps-order-toggle,
.ps-devis-toggle,
.ps-devis-commander,
.ps-order-payer {
    font-size: 0.85rem;
    padding: 3px 14px 4px;
    letter-spacing: 0.03em;
    line-height: 1.1;
    border: 1px solid var(--ps-bordure-fonce);
    border-image: none;
    border-radius: var(--ps-radius);
}