/*
 * Le système de boutons du site, et l'échelle des couches (z-index) des éléments fixes.
 *
 * `.btn` est la classe à utiliser dans les vues. Les classes propres aux écrans (`.ad-btn` de
 * l'administration, `.sk-chip` du créateur de personnage, `.pe-btn` de l'édition de la page) partagent
 * exactement le même socle : un bouton se voit et se touche partout de la même façon.
 *
 * Règles de placement :
 *   - dans un formulaire, les actions vont en bas à droite (`.form-actions`) : le bouton principal
 *     est le dernier, l'annulation (`.btn-ghost`) juste avant ; sur téléphone la pile s'inverse et
 *     l'action principale passe en premier, pleine largeur ;
 *   - un bouton destructeur (`.btn-danger`) ne touche jamais le bouton principal : il est à part.
 */

:root {
    --btn-gold: #d97706;
    --btn-gold-hover: #f59e0b;
    --btn-gold-text: #fbbf24;
    --btn-bg: #111827;
    --btn-border: #374151;
    --btn-danger: #ef4444;

    /* Échelle des éléments fixes : du plus discret au plus prioritaire. */
    --z-nav: 50;
    --z-floating: 60;
    --z-drawer: 100;
    --z-flash: 200;
    --z-modal: 300;
    --z-toast: 400;
    --z-editor: 9990;
}

.btn,
.ad-btn,
.sk-chip,
.sk-icon,
.sk-download,
.sk-walk,
.pe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: .55rem 1.1rem;
    border-radius: var(--btn-radius, .6rem);
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: #e5e7eb;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.btn:hover:not(:disabled),
.ad-btn:hover:not(:disabled),
.sk-chip:hover:not(:disabled),
.sk-icon:hover:not(:disabled),
.sk-download:hover:not(:disabled),
.sk-walk:hover:not(:disabled),
.pe-btn:hover:not(:disabled) {
    border-color: var(--btn-gold-hover);
    color: var(--btn-gold-text);
}

.btn:focus-visible,
.ad-btn:focus-visible,
.sk-chip:focus-visible,
.sk-icon:focus-visible,
.pe-btn:focus-visible {
    outline: 2px solid var(--btn-gold-hover);
    outline-offset: 2px;
}

.btn:disabled,
.ad-btn:disabled,
.sk-icon:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Principal : une seule action par zone. */
.btn-primary,
.ad-btn.primary,
.sk-chip.is-active,
.pe-primary {
    background: var(--btn-gold);
    border-color: var(--btn-gold);
    color: #000;
}

.btn-primary:hover:not(:disabled),
.ad-btn.primary:hover:not(:disabled),
.sk-chip.is-active:hover:not(:disabled),
.pe-primary:hover:not(:disabled) {
    background: var(--btn-gold-hover);
    border-color: var(--btn-gold-hover);
    color: #000;
}

/* Secondaire : le contour doré, pour une action qui compte sans être la principale. */
.btn-outline {
    background: transparent;
    border-color: rgba(245, 158, 11, .4);
    color: var(--btn-gold-text);
}

.btn-outline:hover:not(:disabled) {
    background: rgba(245, 158, 11, .1);
}

/* Discret : annuler, retour. */
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: #9ca3af;
}

.btn-ghost:hover:not(:disabled) {
    background: transparent;
    border-color: transparent;
    color: #fff;
}

/* Destructif : rouge au survol seulement, jamais collé à l'action principale. */
.btn-danger,
.ad-btn.danger,
.sk-danger {
    color: #fca5a5;
}

.btn-danger:hover:not(:disabled),
.ad-btn.danger:hover:not(:disabled),
.sk-danger:hover:not(:disabled) {
    border-color: var(--btn-danger);
    background: rgba(239, 68, 68, .1);
    color: #f87171;
}

.btn-info {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}

.btn-info:hover:not(:disabled) {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

.btn-sm,
.ad-btn.small {
    padding: .3rem .7rem;
    font-size: .78rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

/* Pied de formulaire : actions à droite, principal en dernier. */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
}

/* Une rangée de boutons qui reste alignée sur sa ligne de base quand le texte passe à la ligne. */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

@media (max-width: 480px) {
    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .form-actions .btn {
        width: 100%;
    }
}

/*
 * Écrans tactiles : une zone de clic d'au moins 44 px (recommandation d'accessibilité), sans grossir
 * l'interface à la souris. `pointer: coarse` = le doigt est le pointeur principal.
 */
@media (pointer: coarse) {
    .btn,
    .ad-btn,
    .sk-chip,
    .sk-download,
    .sk-walk,
    .pe-btn {
        min-height: 44px;
    }

    .btn-sm,
    .ad-btn.small {
        min-height: 40px;
        padding-inline: .9rem;
    }

    .sk-icon,
    .sk-stepper button,
    .ad-rte-bar button,
    .ad-thumb .tools button {
        min-width: 44px;
        min-height: 44px;
    }

    .sk-swatch {
        width: 2.75rem;
        height: 2.75rem;
    }

    .admin-tab {
        min-height: 44px;
    }

    .ad-check input,
    .ad-field input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }
}