/* Style général */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: rgb(243, 243, 243);
    color: #333;
}

/*------------------------------------------------------------------ Barre de navigation sur toutes les pages ---------------------------------------------------------------------------*/

.nav-links a {
    margin: 10px;
}

.topnav {
    overflow: hidden;
    background-color: #302f2f;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #04AA6D;
    color: white;
}

.topnav .icon {
    display: none;
}

/* Header */
header {
    background-color: #181818;
    color: #fff;
    padding: 15px;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.nav-links a:hover {
    color: #f4f4f4;
}

/* Menu mobile */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px;
}

@media screen and (max-width: 768px) {
    .nav-links {
        display: none;
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }

    .nav-links a {
        margin: 10px 0;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-links.active {
        display: block;
    }
}

/*----------------------------------------------- Hero Section page data ----------------------------------------------------*/
.hero {
    display: flex;
    color: white;
    background-color: rgb(48, 48, 48);
    text-align: center;
}

.hero1 {
    background-image: url('assets/portrait1.jpg');
    background-size: cover;
    background-position: center;
    width: 32%;
    height: auto;
    margin: 10px;
    filter: brightness(70%);
    animation: slow_up 2s ease;
    transition: 0.5s ease-in-out;
    box-shadow: -10px -10px 10px black;
}

.hero2 {
    background-image: url('assets/portrait2.jpg');
    background-size: cover;
    background-position: center;
    width: 32%;
    height: auto;
    margin: 10px;
    filter: brightness(70%);
    animation: slow_up 3s ease;
    transition: 0.5s ease-in-out;
    box-shadow: -10px -10px 10px black;
}

.hero3 {
    background-image: url('assets/portrait3.jpg');
    background-size: cover;
    background-position: center;
    width: 32%;
    height: 1000px;
    margin: 10px;
    filter: brightness(70%);
    animation: slow_up 4s ease;
    transition: 0.5s ease-in-out;
    box-shadow: -10px -10px 10px black;
}

@keyframes slow_up {
    0% {
        transform: translateY(200px);
        opacity: 0;
    }

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


.hero1:hover {
    filter: brightness(100%);
    transform: scale(1.01);
}

.hero2:hover {
    filter: brightness(100%);
    transform: scale(1.01);
}

.hero3:hover {
    filter: brightness(100%);
    transform: scale(1.01);
}

/*---- hero txt & title + button  -------*/

.hero-text h2 {
    font-size: 3em;
    margin-bottom: 20px;
    text-shadow: 2px 2px 5px black;
}

.hero-text p {
    font-size: 1.2em;
    margin-bottom: 20px;
    text-shadow: 2px 2px 5px black;
}

.btn-primary {
    background-color: #ff6600;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 1em;
    border-radius: 5px;
}

.btn-primary:hover {
    background-color: #cc5200;
    transform: scale(1.5);
}



/*------------------------- 2nd bloc page data --------------------------------*/

.left {
    perspective: 700px;
    display: flex;
    align-items: left;
    justify-content: left;
    text-align: right;
    margin: 20px;
    margin-top: 90px;
    margin-left: 150px;
}

.left h2 {
    overflow-wrap: anywhere;
    flex-grow: calc(0.5);
}

.left p {
    overflow-wrap: anywhere;
    flex-grow: calc(0.2);
}

.right {
    perspective: 700px;
    display: flex;
    align-items: right;
    justify-content: right;
    text-align: left;
    margin: 20px;
    margin-top: 90px;
    margin-right: 150px;
}

.right h2 {
    overflow-wrap: anywhere;
    flex-grow: calc(0.5);
}

.right p {
    overflow-wrap: anywhere;
    flex-grow: calc(0.2);
}

.img_rond_l {
    transform: rotateY(20deg);
    border-radius: 50px;
    border: 8px solid rgb(65, 65, 65);
    box-shadow: 5px 5px 5px black;
}

.img_rond_r {
    max-width: 45vw;
    transform: rotateY(-20deg);
    border-radius: 50px;
    border: 8px solid rgb(65, 65, 65);
    box-shadow: -5px 5px 5px black;
}

.bloc_info {
    margin-left: 100px;
    margin-right: 100px;
    text-align: left;
    padding-top: 50px;

}

/* Pour les petits écrans (mobiles) */
@media (max-width: 768px) {
    .left, .right {
        flex-direction: column; /* Empile les éléments verticalement */
        align-items: center; /* Aligne les éléments au centre */
        justify-content: center;
        text-align: center;
        margin: 20px; /* Réduit la marge */
    }

    .left h2, .right h2, .left p, .right p {
        font-size: 14px; /* Réduit la taille de la police */
        line-height: 1.4;
    }

    .img_rond_l, .img_rond_r {
        width: 80%; /* Réduit la taille des images */
        height: auto; /* Maintient le ratio d'aspect */
        margin-bottom: 15px; /* Ajoute un espacement sous les images */
    }

    .bloc_info {
        margin-left: 0;
        margin-right: 0;
        padding-top: 20px;
    }

    .lienweb {
        font-size: 12px; /* Ajuste la taille des liens */
    }
}



/*----------------------------------------------------------------- Voitures en vente page boutique -----------------------------------------*/


/* ----------------- avis ----------------------- */

/* Témoignages */
.testimonials {

    background-color: #818080;
    padding: 50px 20px;
    text-align: center;
}

.testimonials h2 {
    font-size: 2.5em;
    margin-bottom: 30px;
}

.testimonial {
    max-width: 600px;
    margin: 0 auto 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.testimonial.left {
    text-align: left;
}

.testimonial.right {
    text-align: right;
}

.testimonial h4 {
    margin-top: 15px;
    font-weight: bold;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .car-item {
        flex-direction: column;
        text-align: center;
    }

    .car-item img {
        width: 80%;
        margin-bottom: 20
    }
}



/* --------------------- boutton page data ------------------------------- */

.lienweb {
    padding: 10px;
    border-radius: 15px;
    background-color: #ff6600;
    color: white;
}

.lienweb:hover {
    background-color: #cc5200;
}

/*------------- top video page index ------------*/

.vid_container {
    width: 100%;
    height: 80vh;
    background-color: #333;
}


#back_vid {
    width: 100%;
    /*z-index: -1;
    /*filter: brightness(80%);*/
    background: linear-gradient(90deg, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}


/* ----------------------------------------------------- media responsive page data ----------------------------------------------------------------------- */
/* Pour les tablettes (jusqu'à 1024px) */
@media (max-width: 1024px) {
    
    .left, .right {
        flex-direction: column; /* Empile les éléments verticalement */
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 20px;
    }

    .left h2, .right h2 {
        font-size: 22px; /* Ajuste la taille de la police */
        line-height: 1.5;
        font-weight: bold;
    }

    .left p, .right p {
        font-size: 16px; /* Ajuste la taille de la police */
        line-height: 1.5;
    }

    .img_rond_l, .img_rond_r {
        width: 70%; /* Taille des images ajustée */
        height: auto;
        margin-top: 20px;
    }

    .bloc_info {
        margin-left: 20px;
        margin-right: 20px;
        padding-top: 30px;
    }

    .lienweb {
        font-size: 14px;
    }
    .vid_container {
        height: auto;
    }
}

@media screen and (max-width: 1500px){
    
    .img_rond_l {
        width: 500px;
        height: auto;
        max-height: 450px;
    }

    .left h2 {
        overflow-wrap: anywhere;
        flex-grow: calc(0.5);
    }
    
    .left p {
        overflow-wrap: anywhere;
        flex-grow: calc(0.2);
        font-size: 15px;
    }

    .img_rond_r {
        width: 500px;
        height: auto;
        max-height: 450px;
    }

    .right h2 {
        overflow-wrap: anywhere;
        flex-grow: calc(0.5);
    }
    
    .right p {
        overflow-wrap: anywhere;
        flex-grow: calc(0.2);
    }

    .bloc_info {
        margin-left: 10px;
        margin-right: 10px;
        text-align: left;
        padding-top: 10px;
    
    }
}

/* ---------------------------------- grid actu page index ------------------------------- */


.grid-container {
    margin: 0 auto; /* Centrer la grille horizontalement */
    display: grid;
    grid-template-columns: auto auto auto;
    width: 85%; /* La grille prend 100% de la largeur de l'écran */
    max-width: 85%; /* La grille ne dépasse pas 100% de la largeur de l'écran */
    gap: 5px;
    box-sizing: border-box; /* Assurer que padding et bordure ne causent pas de débordement */
    margin-top: 70px;
    margin-bottom: 70px;
  }
  
  .grid-container > div {
    background-color: #f1f1f1;
    text-align: center;
    padding: 10px;
    overflow: hidden; /* Empêcher le débordement des éléments enfants */
  }
  
  .item1 {
    height: 600px;
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .item3 {
    height: 600px;
  }

   
  .item1 img {
    width: 100%; /* Les images s'ajustent à la largeur du conteneur */
    max-width: 100%; /* Les images ne dépassent pas la largeur de leur conteneur */
    height: 100%; /* Garder le ratio d'aspect de l'image */
    object-fit: cover; /* Remplir le conteneur sans déformer l'image */
  }
  .item2 img {
    width: 100%; /* Les images s'ajustent à la largeur du conteneur */
    max-width: 100%; /* Les images ne dépassent pas la largeur de leur conteneur */
    height: 100%; /* Garder le ratio d'aspect de l'image */
    object-fit: cover; /* Remplir le conteneur sans déformer l'image */
  }
  
  /* Cette partie applique le style aux images */
 .item3 img, .item4 img, .item5 img {
    width: 100%; /* Les images s'ajustent à la largeur du conteneur */
    max-width: 100%; /* Les images ne dépassent pas la largeur de leur conteneur */
    height: 100%; /* Garder le ratio d'aspect de l'image */
    object-fit: cover; /* Remplir le conteneur sans déformer l'image */
  }