/* -- SECTION PRESENTATION -- */
.presentation {
    padding: 90px 40px 120px 40px;
}

.presentation-container {
    display: flex;
    align-items: center;
    max-width: 1300px;
    width: 100%;
}

.presentation-image {
    flex: 1;
    margin-left: -35px;
}

.presentation-image img {
    width: clamp(300px, 50vw, 650px); /* Ajuste la largeur de l'image entre 300px et 600px, en utilisant 50vw de la largeur de l'écran quand possible */
}

.presentation-text {
    max-width: 600px;
    text-align: right;
    padding-bottom: 12px;
}

.presentation-text h1 {
    font-size: clamp(2.5rem, 5vw, 5rem); /* Ajuste la taille de la police entre 2.5rem et 5rem, en utilisant 5vw de la largeur de l'écran quand possible */
    text-transform: uppercase;
    margin-bottom: 20px;
}

.top-btn {
    font-size: clamp(1rem, 2vw, 1.3rem); /* Ajuste la taille du texte entre 1rem et 1.3rem, en utilisant 2vw de la largeur de l'écran */
    text-decoration: none;
    background-color: #fff;
    color: #000;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s;
}

.top-btn:hover {
    background-color: #adadad;
}

/* -- SECTION PARALLAXE -- */
.parallax {
    width: 100vw;
    height: 62vh;
    background-image: url('../images/Laferrari.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* -- SECTION HISTOIRE -- */
.history {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px;
    padding: 100px 40px 60px 40px;
}

.history-content {
    background-color: #fff;
    color: #000;
    padding: 10px 20px 30px 45px;
    border-radius: 15px;
    max-width: 500px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.history-content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.history-content p {
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 20px;
}

.btn {
    text-decoration: none;
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    transition: 0.3s;
}

.btn:hover {
    background-color: #504f4f;
}

.history-image {
    max-width: clamp(250px, 40%, 350px); /* Limite la largeur de l'image entre 250px et 350px, en utilisant 40% de la largeur de l'écran */
}

.history-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(115, 192, 247, 0.3);
}

/* -- SECTION DES 6 DERNIERES VOITURES -- */
.background {
    background-color: #1f1f1f;
    border-top-left-radius: 100% 120px; /* Arrondit le coin supérieur gauche, avec un rayon horizontal de 100% et vertical de 120px */
    border-top-right-radius: 100% 120px; /* Même chose pour le coin supérieur droit */
}

.last-cars {
    padding: 20px 0px;
    max-width: 1350px;
    margin: auto;
    padding-bottom: 50px;
}

.last-cars h2 {
    text-align: center;
    font-size: 2.3rem;
    margin-bottom: 50px;
}

.vehicules-container-global {
    padding: 0 25px;
}

.vehicules-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crée une grille avec 3 colonnes de taille égale */
    gap: 15px;
}

.car {
    overflow: hidden; /* Empêche l'image de dépasser visuellement du cadre lors du zoom quand on la survole */
    border-radius: 10px;
}

.car-image {
    position: relative;
    width: 100%;
    height: 100%;
}

.car-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

/* Overlay qui s'affiche au survol */
.car-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.5);
    color: #fff;
    opacity: 0; /* Masque l'overlay par défaut */
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.car-overlay h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.overlay-bouton {
    background: rgba(255, 255, 255, 0.8);
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.overlay-bouton:hover {
    background: #fff;
}

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

.car:hover .car-overlay {
    opacity: 1; /* Affiche l'overlay au survol */
}

/* -- RESPONSIVE -- */
@media (max-width: 768px) {
    .presentation {
        padding: 170px 20px 0px 20px;
    }

    .presentation-container {
        flex-direction: column;
    }

    .presentation-image {
        display: flex;
        justify-content: center;
        margin-left: 0;
    }

    .presentation-image img {
        width: 90%;
        max-width: 500px;
    }

    .presentation-text {
        text-align: center;
    }

    .presentation-text h1 {
        font-size: clamp(1.5rem, 6vw, 3rem); /* La taille du titre varie entre 1.5rem au minium et 3rem au maximum, en utilisant 6vw de la largeur de l'écran */
    }

    .top-btn {
        font-size: clamp(1rem, 3vw, 1.5rem); /* La taille du bouton varie automatiquement entre 1rem et 1.5rem, en fonction de 3vw de la largeur de l'écran */
    }

    .parallax {
        height: 70vw;
        background-attachment: scroll; /* On change le comportement de l'arrière-plan pour qu'il défile avec le contenu */
        background-size: contain; /* On ajuste la taille de l'image de l'arrière-plan pour qu'elle soit entièrement visible */
    }

    .history {
        flex-direction: column;
        padding: 0;
        margin: 0;
        gap: 30px;
        padding-bottom: 40px;
    }

    .history-content {
        max-width: clamp(250px, 75%, 500px); /* La taille varie entre 250px au minium et 500px au maximum, en utilisant 75% de la largeur de l'écran */
        padding: 15px 20px;
        align-items: center;
    }

    .history-content p {
        text-align: center;
        font-size: clamp(1rem, 2.2vw, 1.2rem); /* La taille varie entre 1rem au minium et 1.2rem au maximum, en utilisant 2.2vw de la largeur de l'écran */
    }

    .history-content h2 {
        text-align: center;
        font-size: clamp(1.3rem, 5vw, 1.7rem); /* La taille varie entre 1.3rem au minium et 1.7rem au maximum, en utilisant 5vw de la largeur de l'écran */
    }

    .history-image {
        width: 100%;
        max-width: clamp(250px, 75%, 500px); /* La taille varie entre 250px au minium et 500px au maximum, en utilisant 75% de la largeur de l'écran */
        height: 180px;
    }

    .history-image img {
        height: 100%;
        object-fit: cover;
        object-position: 50% 15%; /* Positionne l’image centrée horizontalement, et décalée vers le haut verticalement pour voir le haut de l'image */
    }

    .car:hover .car-image img {
        transform: scale(1); /* Retire le zoom de l'image au survol */
    }

    .background {
        border-top-left-radius: 80% 60px;
        border-top-right-radius: 80% 60px;
    }
}

@media (min-width: 768px) {
    .presentation {
        min-height: 80vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 1023px) {
    .vehicules-container {
        display: flex;
        overflow-x: scroll; /* Permet le défilement horizontal, ici de gauche a droite */
        gap: 20px;
        scroll-snap-type: x mandatory; /* Rend le défilement plus agréable en centrant les éléments*/
        padding: 15px;
    }

    /* Modification de la scrollbar */
    .vehicules-container::-webkit-scrollbar {
        height: 6px;
    }

    .vehicules-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.5);
        margin: 0 15px;
        border-radius: 10px;
    }

    .vehicules-container::-webkit-scrollbar-thumb {
        background-color: #fff;
        border-radius: 10px;
        width: 25%;
    }

    .car {
        flex: 0 0 85%; /* "flew-grow: 0" → Fait en sorte que l'élément ne grandit pas -- "flex-shrink: 0" → Fait en sorte que l’élément ne rétrécit pas -- "flex-basis: 85%" → la largeur de base -- L'éléments ne change donc jamais de taille */
        scroll-snap-align: center; /* Centre chaque élément au défilement */
        background-color: #2f2f2f;
        border-radius: 10px;
        padding: 10px;
    }

    .car-image {
        aspect-ratio: 16 / 9; /* Définit un ratio au format 16:9, peu importe la taille de l'écran */
        overflow: hidden; /* Empêche l'image de dépasser visuellement du cadre lors du zoom */
        border-radius: 5px;
    }

    .last-cars h2 {
        font-size: 1.8rem;
        color: #fff;
        margin-bottom: 15px;
        font-weight: bold;
        padding: 0 30px;
        text-align: center;
    }

    .car-overlay h3 {
        font-size: clamp(1rem, 4vw, 2rem); /* La taille varie entre 1rem au minium et 2rem au maximum, en utilisant 4vw de la largeur de l'écran */
        margin-bottom: 10px;
    }

    .overlay-bouton {
        font-size: clamp(0.5rem, 3.5vw, 1.1rem); /* La taille varie entre 0.5rem au minium et 1.1rem au maximum, en utilisant 3.5vw de la largeur de l'écran */
    }

    .active-slide .car-overlay {
        opacity: 1; /* Affiche l'overlay au survol */
    }
}