/* ========================================
   Clairval — boutons rectangulaires (référence unique)
   Aligné sur : floating-btn, btn-primary/btn-secondary + create-game-btn,
   play-menu-button (modales composition, menu Jouer)
   ======================================== */

/* --- Primaire (liquid glass — accent via tokens thème) --- */
.btn-primary,
button.btn-primary,
a.btn-primary,
input.btn-primary[type="submit"],
input[type="submit"].btn-primary {
    padding: 10px 20px;
    min-height: 40px;
    box-sizing: border-box;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Crimson Pro', Georgia, serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: color-mix(in srgb, var(--clairval-glass-accent, var(--primary-color, #c4755a)) 15%, transparent);
    color: var(--text-primary, #f2ebe3);
    border: 1px solid var(--clairval-glass-border-strong, var(--border-color, rgba(196, 117, 90, 0.28)));
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
}

.btn-primary:hover:not(:disabled),
a.btn-primary:hover {
    background: color-mix(in srgb, var(--clairval-glass-accent, var(--primary-color, #c4755a)) 28%, transparent);
    border-color: var(--clairval-glass-border-strong, rgba(196, 117, 90, 0.45));
    color: var(--text-primary, #f2ebe3);
}

.btn-primary:disabled,
.btn-primary.btn-disabled,
.btn-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Secondaire (neutral glass — floating-btn / Annuler) --- */
.btn-secondary,
button.btn-secondary,
a.btn-secondary {
    padding: 10px 20px;
    min-height: 40px;
    box-sizing: border-box;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Crimson Pro', Georgia, serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #f2ebe3);
    border: 1px solid var(--clairval-glass-border, var(--border-color, rgba(196, 117, 90, 0.2)));
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
}

.btn-secondary:hover:not(:disabled),
a.btn-secondary:hover {
    background: color-mix(in srgb, var(--clairval-glass-accent, var(--primary-color, #c4755a)) 15%, transparent);
    border-color: var(--clairval-glass-border-strong, rgba(196, 117, 90, 0.35));
    color: var(--text-primary, #f2ebe3);
}

/* Modificateur composition / création de partie */
.create-game-btn {
    padding: 10px 20px !important;
    min-height: 40px !important;
    box-sizing: border-box;
}

/* Menu empilé pleine largeur (problèmes connexion, etc.) */
.play-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.play-menu-button,
a.play-menu-button,
button.play-menu-button {
    width: 100%;
    padding: 16px 20px;
    min-height: 40px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--clairval-glass-border, var(--border-color, rgba(196, 117, 90, 0.22)));
    border-radius: 12px;
    color: var(--text-primary, #f2ebe3);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    font-weight: 600;
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    white-space: normal;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
}

.play-menu-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--clairval-glass-border-strong, rgba(196, 117, 90, 0.5));
    color: var(--text-primary, #f2ebe3);
}

/* Utilitaires layout */
.btn-block,
.btn-full {
    width: 100%;
}

.step-buttons {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    margin-top: 30px;
}

.step-buttons .btn-primary,
.step-buttons .btn-secondary,
.step-buttons button,
.step-buttons a {
    flex: 1;
}

.guest-accueil-cta .btn-primary,
.guest-accueil-cta .btn-secondary {
    min-width: 190px;
    text-align: center;
}

.links-section .btn-primary,
.links-section .btn-secondary,
.links-section a.btn-primary {
    margin-bottom: 12px;
}