body {
    font-family: sans-serif;
    padding: 40px;
}
h2 { margin-top: 30px; margin-bottom: 15px; }

/* 7.1 Bouton animé avec transitions */
.btn-anime {
    padding: 12px 24px;
    font-size: 16px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* Transition fluide sur plusieurs propriétés */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn-anime:hover {
    background-color: #c0392b;
    transform: translateY(-3px) scale(1.05); /* Soulève le bouton */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Ombre douce */
}

.btn-anime:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 7.2 Spinner de chargement avec @keyframes */
.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #f3f3f3; /* gris très clair */
    border-top: 6px solid #3498db; /* bleu */
    border-radius: 50%;
    /* Application de l'animation infinie */
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}