body {
    margin: 0;
    font-family: "Dosis", sans-serif;
    font-weight: 300;
    font-style: normal;
    background-color: #1a1412;
}


.moto-link {
    display: block;  
    width: 100%;
    height: 100%;
    text-decoration: none; 
    transition: transform 0.3s ease;
}

.moto-link:hover {
    transform: scale(1.05); 
}
.row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    margin: 1.66%;
    padding: 20px;
    text-align: center;
    color: rgb(0, 0, 0);
    box-sizing: border-box;
    border-radius: 15px;
    min-height: 500px;
    background-color: #EBE4E2;
    transition: transform 0.3s, background-color 0.3s, color 0.3s;
}

.icon {
    font-size: 40px; /* Réduire la taille de l'icône */
    margin-bottom: 15px;
}

.title {
    font-size: 28px; /* Réduire la taille du titre */
    font-weight: bold;
    margin-bottom: 10px;
    transition: transform 0.3s;
}

.description {
    font-size: 6px; /* Réduire la taille de la description */
    transition: transform 0.3s;
}
.description p {
    color:white;
    font-size: 30px;
}
.icon-conteneur {
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4rem;
}
.icon-conteneur i {
 font-size: 50px;
}
.column:hover {
    transform: scale(1.05); /* Légèrement réduire l'effet de zoom au survol */
    background-color: #ffffff;

    color: rgb(0, 0, 0);
}

.column:hover .title,
.column:hover .description {
    transform: translateY(5px); /* Réduire la distance de déplacement au survol */
}

.allo {
    display: flex;
    align-items: center;
    /* position: absolute; */
}
.categorie {
    display: flex;
    justify-content: center;
    height: fit-content;
    align-items: center;
    flex-direction: column;
    background-color: #000000;
    padding:100px 0;
}

.small-cards-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    align-items: center;
    width:80%;
}

.small-cards-container a {
    text-decoration: none;
}
.small-cards-container h2 {
    margin: 0;
}
.carte {
    flex: 1;
    margin: 0 10px; /* Marges horizontales pour espacement */
    box-sizing: border-box;
    transition: transform 0.3s ease;
}
.js-photos a {
    height: fit-content;
  width: 100%;
  margin: 0 1.5rem;
}

.js-photo:hover {
    transform: scale(1.05);

}
/* Déplacer les règles de flou du bouton vers le conteneur du slider */
.js-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px; /* Largeur du bouton */
    height: 100%; /* Hauteur du slider */
    background-color: #141414; /* Flou blanc avec opacité */*/
    transition: background-color 0.2s, filter 0.2s;
    z-index:3;
}

.js-slider::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px; /* Largeur du bouton */
    height: 100%; /* Hauteur du slider */
    background-color: #141414; /* Flou blanc avec opacité */
    transition: background-color 0.2s, filter 0.2s;
}

/* Style spécifique pour le bouton de droite */
.btnD {
    right: 10px;
}

/* Style spécifique pour le bouton de gauche */
.btnG {
    left: 10px;
}

.texte {
    margin-left: 20px;
    position: relative;
    font-size: 20px;
    right: 2%;
    color: white;
}

.ptit-texte {
    padding: 1px 90px;
    text-align: center;
}

.moto-slider h2, .categorie h2, .service h2 {
    color: white;
    text-align: center;
    font-size: 2.5em;
}
.box1 h2 {
    margin: 0 0 3rem 0;
     text-align: center;
    font-size: 4em;
      color: white;
    
}
.box1 {
    height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  background-color: #01040a;
}

.search-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
}

.search-box {
    position: relative;
    width: 100%;
    max-width: 350px;
}

.search-box input {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    outline: none;
}

.search-box button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

.search-box button img {
    width: 24px;
    height: 24px;
}

.search-box input::placeholder {
    color: #999;
    font-style: italic;
}

.search-box input:focus {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.submit {
    color: white;
    background-color: black;
}


a {
    color: rgb(255, 255, 255);
}

.titre2 {
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.description {
    font-size: 20px;
    display: flex;
    justify-content: center;
}
.image-box img {
   height: 700px;
    object-fit: cover;
}
.background {
    background-image: url(image/imagetest1.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.background h1 {
   position: absolute;
  top: -10%;
  left: 50%;
  transform: translate(-50%, 50%);
  color: white;
  font-size: 8rem;
  font-family: "Tanker", sans-serif
}
.carte:hover{
    transform: scale(1.05);
}
/* Style pour les boutons du slider */
.btnD, .btnG {
    position: relative; /* Permet de positionner les pseudo-éléments par rapport à ces boutons */
    font-size: 1.3rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #FFF; /* Fond blanc */
    color: #000; /* Texte noir */
    cursor: pointer;
    position: absolute;
    z-index: 99;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}

/* Effet de flou blanc au survol */
.btnD::before, .btnG::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5); /* Flou blanc avec opacité */
    filter: blur(10px); /* Ajoute un flou */
    transition: background-color 0.2s, filter 0.2s;
}

/* Style spécifique pour le bouton de droite */
.btnD {
    right: 10px;
}

/* Style spécifique pour le bouton de gauche */
.btnG {
    left: 10px;
}

/* Effet de survol */
.btnD:hover, .btnG:hover {
    transform: translateY(-50%) scale(1.1);
    background-color: #DDD; /* Fond blanc plus clair au survol */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Effet de flou blanc au survol */
.btnD:hover::before, .btnG:hover::before {
    background-color: rgba(255, 255, 255, 0.8); /* Augmente l'opacité au survol */
    filter: blur(20px); /* Augmente le flou au survol */
}

/* Effet de clic */
.btnD:active, .btnG:active {
    transform: translateY(-50%) scale(1.05);
    background-color: #BBB; /* Fond blanc encore plus clair au clic */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Effet de flou blanc au clic */
.btnD:active::before, .btnG:active::before {
    background-color: rgba(255, 255, 255, 0.9); /* Augmente l'opacité au clic */
    filter: blur(30px); /* Augmente le flou au clic */
}


.un p {
    margin: 0 0 4rem 0;
    font-size: 1.7rem;
}

.toto img {
    width: 200px;
    height: 200px;
}

.toto {
    text-align: center;
}

.js-slider {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    
}

.js-photos {
    position: relative;
    display: flex;
    width: max-content;
    left: -500px;
    transition: left 0.3s ease;
    height: 20px;
    padding: 10px;
    
}
.service {
    background-color:#141414;
    padding: 5px;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10rem 0;
}
.moto-slider{
    background-color: #141414;
    padding: 10px;  
    height: 100vh;  
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.js-photo {
    flex-shrink: 0;
    position: relative;
    width: 500px;
    height: 400px;
    font-size: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    border-radius: 12px;
    border: solid white;
    margin-right:20px;
  

}

.green {
    background-color: #5b8f8a;
    background-image: url(https://data.1freewallpapers.com/detail/lamborghini-aventador-lamborghini-sports-car-supercar-red-front-view.jpg);
    background-position: center;
    background-size: cover;
}

.green-dark {
    background-color: #15524c;
    background-image: url(https://www.newsauto.gr/wp-content/uploads/2021/06/210624170739_ferrari-296-gtb.jpg);
    background-position: center;
    background-size: cover;
}

.green-darker {
    background-color: #042e2a;
    background-image: url(https://gotmdm.com/auto/wp-content/uploads/sites/2/2017/04/Audi-R8-LMS-GT4-2017-front-face-945x668.jpg);
    background-position: center;
    background-size: cover;
}


.carte_france {
    width: 67%;
    position: relative;
    right: 2%;
    top: 80px;
}

.slide-track {
  display: flex;
  width: calc(300px * 8);
  animation: scroll 10s infinite linear;
}
.slide-track:hover {
  animation-play-state: paused;
}

.slide {
  height: 200px;
  width: 250px;
  display: flex;
  align-items: center;
  padding: 15px;
  perspective: 100px;
}
img {
  width: 100%;
  transition: transform 1s;
}
img:hover {
  transform: translateZ(20px);
}

.row img {
    width: 20%;
}


a:hover {
    color: blue;
}
@media (width <2030px){
    .background img {
        transform:translateY(50px);
    }
    .background h1 {
        top:5%;
    }
}
@media (width <1870px){
    .background img {
        transform:translateY(70px);
    }
}
@media (width <1550px){
    .background img {
        transform:translateY(90px);
       
    }
     .background h1 {
        top:5%;
    }
}

@media (width <1390px){
    .background img {
        transform:translateY(100px);
    }
     .background h1 {
        top:10%;
    }
 
    .row {
        flex-direction: column;
    }
    .column {
        min-width:400px;
    }
    
}

@media (width <1120px){
    .background img {
        transform:translateY(130px);
    }
     .background h1 {
        top:15%;
    }
}

@media (width < 920px){
    .background img {
        transform:translateY(160px);
    }
    .background h1 {
        top:25%;
    }
}

@media (width < 750px){
    .background img {
        transform:translateY(200px);
    }
}
@media (max-width: 400px) {
    .search-box input {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    .search-box button img {
        width: 20px;
        height: 20px;
    }
}
@media (max-width:1500px){
    .small-cards-container {
        flex-direction:column;
        width: 50%;
        gap: 2rem;
    }
}