@import url(allstyle.css);
body {
  color: #08100C;
}
.Accueil {
  margin-top: 70px;
  display: flex;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  justify-content: space-around;
  align-items: center;
}

.Logo-and-Join img {
  max-width: 300px;
  width: 100%;
}

.btn-Join-Us {
  text-decoration: none;
  color: black;
  background-color: #FBFBFB;
  display: flex;
  padding: 1.1rem 2.5rem 1.1rem 3.5rem;
  border-radius: 99rem;
  transition: all 0.5s ease;
  justify-content: center;
  align-items: center;
  gap: 15px;
  border: solid #08100C 2px;
  font-size: 1.125rem;
  margin-bottom: 53.600px;
  margin-top: 53.600px;
}

.btn-Join-Us .icon {
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-Join-Us .icon span {
  box-sizing: content-box;
  background: #E02B20;
  border-radius: 100%;
  padding: 0rem;

  width: 0rem;
  height: 0rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transform: rotate(-180deg);

  transition: all 0.5s ease;
}

.btn-Join-Us:hover .icon span {
  transform: rotate(0deg);
  border-radius: 100%;
  padding: 0.6rem;
  width: 1rem;
  height: 1rem;
}

.Slogan {
  width: 40%;
}

.Slogan h1 {
  font-size: 4rem;
  line-height: 1.6;
  color: #08100C;
}

/*Animation flèche de scroll*/
@-webkit-keyframes fade_move_down {
  0% {
    -webkit-transform: translate(0, -10px) rotate(45deg);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate(0, 10px) rotate(45deg);
    opacity: 0;
  }
}

@-moz-keyframes fade_move_down {
  0% {
    -moz-transform: translate(0, -10px) rotate(45deg);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -moz-transform: translate(0, 10px) rotate(45deg);
    opacity: 0;
  }
}

@keyframes fade_move_down {
  0% {
    transform: translate(0, -10px) rotate(45deg);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(0, 10px) rotate(45deg);
    opacity: 0;
  }
}

.trait {
  height: 2px;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
  background-color: #08100C;
}

.trait-blanc {
  margin-top: 100px;
  height: 2px;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
  background-color: white;
}

/* La liste des deux services de locations  */
.part1 {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
  border-radius: 50px;
  margin-top: 150px;
  padding: 25px;
  display: flex;
  justify-content: space-around;


}

.text-part1 {
  color: white;
}

.text-part1 h2 {
  margin-top: 0px;
  margin-left: 25px;
  font-size: 3rem;
}

.text-part1 p {
  margin-left: 25px;
  font-size: 1.25rem;
}

.btn-1 {
  margin-left: 25px;
  padding: 15px 25px;
  text-decoration: none;
  font-size: 1.25rem;
  border: #E02B20 solid 3px;
  color: white;
  background-color: none;
  border-radius: 25px;
  box-shadow: inset 0 0 0 0 #E02B20;
  transition: ease-in-out 0.3s;

}

.btn-1:hover {
  box-shadow: inset 300px 0 0 0 #E02B20;
}

.part1-number {
  color: white;
  font-size: 2.5rem;
}

.part1-number h3 {
  margin: 0px;
}

.number {
  font-size: 4rem;
}

.part1link {
  margin-top: 50px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}


/* Navigation avec les cartes */

.navigation {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

.navigation h2 {
  color: #FBFBFB;
  font-size: 3rem;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}
.navigation p {
  color: white;
  font-size: 2rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.list-navigation {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list-navigation a {
  width: 30%;
  text-decoration: none;
}
.card-explication {
  width: 100%;
}

.explication-off {
  height: 0px;
  transition: 0.3s;
  position: relative;
  opacity: 0;
  top: -50px;
}

.explication-off p {
  height: 0;
  color: #08100C;
  font-size: 1rem;
}

.explication-on {
  height: auto;
  position: relative;
  top: 0px;
  opacity: 1;
  transition: 0.5s;
}

.explication-on p {
  height: auto;
}

.explication-on h3,
.explication-off h3 {
  margin: 0px;
  width: fit-content;

}

.explication-on p,
.explication-off p {
  margin: 0;
  width: 90%;
  padding: 15px;

}
.explication-on p a {
  color: #08100C;
}
.explication-on p a:hover {
  color: #E02B20;
}
.card-wrapper {
  border-radius: 16px;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background-color: #08100C;
}
.card-wrapper:hover {
  border-bottom-left-radius:0 ;
  border-bottom-right-radius:0 ;
}

.card {
  width: 100%;
  height: 100%;

  background-position: center;
  background-size: cover;
  transition: 0.5s all;
}


.card-background {
  width: 100%;
  height: 100%;
  transition: 0.5s;
  background-color: rgba(0, 0, 0, 0.2);
}

.card-background:hover {
  background-color: rgba(0, 0, 0, 0.7);

}

.card-background h3 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  width: fit-content;
  color: white;
  margin: 0 auto;
}

.card:hover {
  scale: 1.2;
}


.section-profil-card {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  color: white;
}

.section-profil-card h2 {
  font-size: 3rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.profil-list-card {
  margin-top: 100px;
  display: flex;
  justify-content: space-around;

}

.profil-card {
  width: 30%;
  background-color: #FBFBFB;
  color: black;
  padding: 25px 25px;
  border-radius: 16px;
  height: fit-content;
}

.profil-card h3 {
  width: fit-content;
  padding: 5px 10px;
}

.profil-card img {
  border-radius: 8px;
  width: 100%;
  filter: grayscale(100%);
  transition: 0.5s ease-in-out;
}

.profil-card img:hover {
  filter: grayscale(0%);
}

.to-drive-presentation {
  width: 50%;
}

.to-drive-presentation h3 {
  margin: 0;
}

.slider-avis {
  width: 50%;
  margin-top: 50px;
}

.slider-avis h2 {
  margin: 0;

}



.avis-list h2 {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  font-size: 3rem;
  color: white;

}

.avis-card {
  padding: 15px 25px;
  border-radius: 16px;
  color: #FBFBFB;
  width: 400px;
  background-color: #3A3A3A;
  transition: 0.3s;
  border: solid 3px transparent;
}

.avis-card:hover {
  border: #E02B20 solid 3px;
}

.top-card {
  display: flex;
  align-items: center;
}

.top-card img {
  width: 100px;
  border-radius: 50%;
}

.top-card p {
  margin-left: 15px;
}

/* Scroll Auto horizontal */
.scroller {
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg,
      transparent,
      white 20%,
      white 80%,
      transparent);
  mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-animated="true"] .scroller__inner:hover {
  animation-play-state: paused;
}


.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-40% - 0.5rem));
  }
}

.avis-formulaire {
  margin-top: 25px;
  color: white;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  background-color: #3A3A3A;
  padding: 15px 25px;
  border-radius: 16px;
  display: none;
  border: solid 3px transparent;
  transition: 0.3s;
}

.avis-formulaire h2 {
  font-size: 2rem;
}

.avis-formulaire .trait-blanc {
  margin-top: 10px;
}

form {
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;

}
form label{
  font-size: 1.25rem;
  color: white;
}
form input, form textarea {
  font-size: 1.125rem;
}
form input {
  margin-top: 10px;
  margin-bottom: 20px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  outline-color: #E02B20;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
              rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}
input[type="submit"] {
  background-color: #E02B20;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, 
              #E02B20 0px 0px 0px 1px, 
              rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
form textarea {
  margin-top: 10px;
  margin-bottom: 20px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  border: unset;
  border-radius: 4px;
  outline-color: #E02B20;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
              rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}
.avis-formulaire:hover {
  border: #E02B20 solid 3px;
}

.avis-btn {
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

.avis-btn a {
  margin-left: 0px;
}

/* FAQ */
details {
  font-size: 1.125rem;
  width: max-content;
  border-bottom: #3A3A3A 3px solid;
  width: 180%;
}
summary {
  font-size: 1.5rem;
  padding: 15px 0;
}

summary::marker {
  content: none;
}
summary:after {
  content: "+";
  float: right;
  font-size: 1.5em;
  font-weight: bold;
  margin:-7px 0 0 15px;
  padding: 0;
  color: #E02B20;
  text-align: center;
  width: 20px;
}
details[open] summary:after {
  content: "-";
}
details[open]{
  width: 180%;
  padding: 15px 0px;
}
.first-details{
  border-top: 3px solid #3A3A3A;
}
.slider-avis p {
  width: 120%;
}
.slider-avis a {
  color: white;
  font-size: 1.125rem;
}
.slider-avis a:hover {
  color: #E02B20;
}
.submit {
  margin-top: 15px;
  color: #FBFBFB;
  padding: 5px 15px;
  border-radius: 16px;
  border: #E02B20 solid 3px;
}
.submit:hover {
  box-shadow: inset 300px 0 0 0 #E02B20;
  color: white;
}

@media (max-width:900px) {
  .Accueil {
    flex-flow: column-reverse;
  }

  .Slogan {
    width: 90%;
  }

}

/* on fait passer en colone la liste*/
@media screen and (max-width: 1000px) {
  .list-navigation {
    flex-flow: column;
    gap: 50px;
    align-items: center;
  }
  .list-navigation a {
    width: 80%;
  }
  .profil-list-card {
    flex-flow: column;
    align-items: center;
    gap: 20px;
  }
  .profil-card {
    width: 50% ;
  }
  .to-drive-presentation {
    width: 80%;
  }
} 

/* Un peu d'adaptation en fonction de la taille du navigateur */
@media screen and (max-width:1300px) {
  .cards-container {
    width: 40%;
  }
}

@media screen and (max-width:930px) {
  .cards-container {
    width: 100%;
  }

  .text-navigation {
    width: 50%;
  }
}

@media screen and (max-width:1455px) {
  .part1 {
    flex-flow: column;
    align-items: center;
    gap: 50px;

  }

  .part1-number {
    text-align: center;
  }

}