/* Tomas Crovetto, 17.01.25, Page d'accueil */
/* Importation des polices Ducati */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

body {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    background-color: #000;
    /* Noir pour rappeler les couleurs Ducati */
    color: #fff;
}

header {
    text-align: center;
    background-color: #D70000;
    /* Rouge Ducati */
    padding: 20px;
    color: white;
}

h1 {
    font-size: 3rem;
    letter-spacing: 3px;
}

.models {
    display: flex;
    flex-wrap: wrap;
    /* Pour que les cartes passent à la ligne sur les petits écrans */
    justify-content: center;
    padding: 20px;
    gap: 20px;
}

.model-card {
    background-color: #333;
    /* Gris foncé pour contraster avec le rouge */
    border: 2px solid #D70000;
    /* Bordure rouge Ducati */
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    width: 300px;
    padding: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Transition pour effet d'animation fluide */
    position: relative;
    opacity: 0;
    /* Les cartes commenceront invisibles */
    transform: translateY(50px);
    /* Et légèrement décalées vers le bas */
}

.model-card img {
    width: 100%;
    transition: transform 0.3s ease;
    /* Pour l'effet de zoom sur l'image */
}

.model-card h2 {
    margin: 10px 0;
    color: #D70000;
    /* Titre en rouge Ducati */
}

.model-card p {
    color: #bbb;
    /* Texte en gris clair */
}

.model-card:hover {
    transform: scale(1.05);
    /* Effet zoom au survol */
    box-shadow: 0px 0px 20px 5px rgba(215, 0, 0, 0.5);
    /* Ombre rouge au survol */
}

.model-card:hover img {
    transform: scale(1.1);
    /* Zoom sur l'image au survol */
}

/* Animation d'apparition */
@keyframes slideIn {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Les cartes apparaissent avec un léger décalage */
.model-card {
    animation: slideIn 1s ease-in-out forwards;
}

/* Responsiveness pour petits écrans */
@media (max-width: 768px) {
    .models {
        flex-direction: column;
        /* Les cartes seront empilées sur petits écrans */
        align-items: center;
    }

    .model-card {
        width: 90%;
        /* Les cartes occuperont plus d'espace sur mobile */
    }
}

.Navigation {
    display: flex;
    justify-content: center;
    /* Centrer horizontalement */
    align-items: center;
    /* Centrer verticalement */
    height: 15vh;
    /* Prendre toute la hauteur de la page */
}

/* Styles de base pour les boutons */
button {
    background-color: #e6e6e6;
    /* Gris très clair */
    color: black;
    /* Texte en noir */
    border: none;
    /* Enlever les bordures par défaut */
    padding: 10px 20px;
    /* Espace intérieur des boutons */
    margin: 10px;
    /* Espacement entre les boutons */
    font-size: 16px;
    /* Taille du texte */
    cursor: pointer;
    /* Changement du curseur sur hover */
    border-radius: 9px;
    /* Coins légèrement arrondis */
    transition: background-color 0.5s ease;
    /* Effet de transition */

}

/* Styles lorsque la souris survole le bouton */
button:hover {
    background-color: #5d2020;
    /* Gris un peu plus foncé lors du hover */
    color: rgb(182, 0, 0)
}
.pageActive button {
    background-color:rgb(93, 22, 30) ;

    color: rgb(255, 111, 116);
    
}