/* 1. Ocean (bleu → turquoise) */
.btn-ocean {
    background: linear-gradient(135deg, #007bff 0%, #00d4ff 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3);
    transition: transform .2s, box-shadow .2s;
}

.btn-ocean:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.4);
}

/* 2. Sunset (orange → corail) */
.btn-sunset {
    background: linear-gradient(135deg, #fd7e14 0%, #ff6347 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    box-shadow: 0 6px 12px rgba(253, 126, 20, 0.3);
    transition: transform .2s, box-shadow .2s;
}

.btn-sunset:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 20px rgba(253, 126, 20, 0.4);
}

/* 3. Forest (vert profond → vert clair) */
.btn-forest {
    background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    box-shadow: 0 6px 12px rgba(30, 126, 52, 0.3);
    transition: transform .2s, box-shadow .2s;
}

.btn-forest:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 20px rgba(30, 126, 52, 0.4);
}

/* 4. Midnight (gris anthracite → violet foncé) */
.btn-midnight {
    background: linear-gradient(135deg, #343a40 0%, #5a3f85 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    box-shadow: 0 6px 12px rgba(52, 58, 64, 0.4);
    transition: transform .2s, box-shadow .2s;
}

.btn-midnight:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 20px rgba(52, 58, 64, 0.6);
}