*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Fonts */
  --title-font: Archivo Narrow, sans-serif;
  --base-font: Roboto, sans-serif;
}

body {
  font-family: var(--title-font);
  background-color: #b2b2a8;
}

html {
  scroll-behavior: smooth;
}

main {
  width: 98%;
  height: 98%;
  margin: 1vw;
  margin-bottom: -6rem;
  padding: 2vw;
  background-color: #dfd7c9;
  border-radius: 3.2rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.main-2 {
  padding: 3vw;
  display: flex;
  flex-direction: column;
}

.title {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 60px;
}

.title img {
  height: 6vw;
  width: 6vw;
  filter: grayscale();
  /* position: fixed; */
}

.block-title {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #3f3b37;
}

.main-title {
  width: 100%;
  margin-left: 1vw;
  font-family: var(--base-font);
  font-weight: 400;
  font-size: clamp(50px, 8vw, 140px);
  color: #3f3b37;
}

.main-title span {
  font-style: italic;
}

.engagement-1 {
  display: none;
}

@media screen and (max-width: 950px) {
  .main-2 {
    padding: 0;
  }
  .main-title {
    text-align: center;
    margin: 0;
  }
  .title img {
    display: none;
  }
}

/* grid */

.container-subtitle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 7em;
}

.grid a:hover::before {
  top: 0;
}

.item-3 {
  grid-column-start: 1;
  grid-column-end: 4;
  color: #ffffff;
  display: flex;
  align-items: center;
}

.item-4 {
  grid-column-start: 4;
  display: flex;
  align-items: center;
}

.item-4 a {
  display: flex;
  align-items: flex-end;
  padding: 9px;
  width: 20vw;
  color: #3f3b37;
  font-size: clamp(30px, 4vw, 100px);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 0;
  background-color: #e7aa2c;
  border-bottom-right-radius: 2rem;
  box-shadow: 5px 5px 10px #b2b2a8;
}

.item-4 a:hover {
  transition: all 0.6s;
  color: #ffffff;
}

.item-4 a::before {
  content: "";
  position: absolute;
  top: 7em;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3f3b37;
  border-bottom-right-radius: 2rem;
  transition: all 0.8s;
  z-index: -1;
}

.item-5 {
  grid-column-start: 4;
  display: flex;
  align-items: center;
}

.item-5 a {
  display: flex;
  padding: 9px;
  width: 20vw;
  color: #3f3b37;
  font-size: clamp(30px, 4vw, 100px);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 0;
  background-color: #db4c44;
  border-bottom-right-radius: 2rem;
  box-shadow: 5px 5px 10px #b2b2a8;
}

.item-5 a:hover {
  color: #ffffff;
  transition: all 0.6s;
}

.item-5 a::before {
  content: "";
  position: absolute;
  top: 7em;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3f3b37;
  border-bottom-right-radius: 2rem;
  transition: all 0.6s;
  z-index: -1;
}

.item-6 {
  grid-column-start: 1;
  grid-column-end: 4;
  display: flex;
  color: #ffffff;
  align-items: center;
}

.item-7 {
  grid-column-start: 1;
  grid-column-end: 4;
  color: #3f3b37;
  display: flex;
  align-items: center;
  z-index: 1;
}

.item-8 {
  grid-column-start: 4;
  display: flex;
  align-items: center;
}

.item-8 a {
  display: flex;
  align-items: flex-end;
  padding: 9px;
  color: #3f3b37;
  font-size: clamp(30px, 4vw, 100px);
  width: 20vw;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 0;
  background-color: #fbefdf;
  border-bottom-right-radius: 2rem;
  box-shadow: 5px 5px 10px #b2b2a8;
}

.item-8 a:hover {
  color: #ffffff;
  transition: all 0.6s;
}

.item-8 a::before {
  content: "";
  position: absolute;
  top: 7em;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3f3b37;
  border-bottom-right-radius: 2rem;
  transition: all 0.6s;
  z-index: -1;
}

.main-subtitle {
  margin-top: 4cqmax;
}

#subtitle-1 {
  font-size: clamp(35px, 5vw, 110px);
  font-family: var(--title-font);
  font-weight: 500;
  padding: 0.2em 0.1em 0.1em;
  z-index: 1;
}

#subtitle-3 {
  font-size: clamp(35px, 5vw, 110px);
  font-family: var(--title-font);
  font-weight: 500;
  padding: 0.2em 0.1em 0.1em;
  z-index: 1;
}

#subtitle-3 span {
  font-style: italic;
}

#subtitle-4 {
  font-size: clamp(35px, 5vw, 110px);
  font-family: var(--title-font);
  font-weight: 500;
  padding: 0.2em 0.1em 0.1em;
}

@media (max-width: 1400px) {
  .container-subtitle {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 950px) {
  .container-subtitle {
    display: grid;
    margin-top: 4vw;
  }

  .item-3 {
    font-size: 70px;
    grid-column: 1 / 4;
    width: 100%;
  }

  .item-4 {
    grid-column: 1 / 4;
    grid-row-start: 4;
    width: 100%;
    margin-top: 15px;
    border-bottom: none;
  }

  .item-4 a {
    width: 100%;
    margin-bottom: 0;
  }

  .item-5 {
    grid-column: 1 / 4;
    grid-row-start: 5;
    width: 100%;
    border-bottom: none;
  }

  .item-5 a {
    width: 100%;
    margin-bottom: 0;
  }

  .item-6 {
    grid-column: 1 / 4;
    width: 100%;
  }

  .item-7 {
    grid-column: 1 / 4;
    width: 100%;
  }

  .item-8 {
    grid-column: 1 / 4;
    grid-row-start: 6;
    width: 100%;
    border-bottom: none;
  }

  .item-8 a {
    width: 100%;
    margin-bottom: 0;
  }
}

/* grid--fin */

.container-engagement {
  display: flex;
  flex-direction: column;
  width: 87%;
  margin-top: 7em  ;
  /* align-items: center; */
}

@media screen and (max-width: 950px) {
  .container-engagement {
    flex-direction: column;
    margin-top: 2em;
  }
}

.container-engagement h3{
  font-family: var(--title-font);
font-size: clamp(25px, 3vw, 80px);
font-weight: 500;
color: #3f3b37;
margin-bottom: 2vw;
margin-top: 2vw;
}
article-0 p {
  font-family: var(--title-font);
  font-size: clamp(17px, 3vw, 25px);
  line-height: 1.5;
  color: #3f3b37;
}
article-0 ul{
  font-family: var(--title-font);
  font-size: clamp(17px, 3vw, 25px);
  line-height: 1.5;
  color: #3f3b37;
  margin-top: 1vw;
  margin-bottom: 1vw;
}
article-0 li{
  list-style-type: circle;
  margin-left: 25px;
}
article-1 p{
  font-family: var(--title-font);
font-size: clamp(17px, 3vw, 25px);
line-height: 1.5;
color: #3f3b37;
}
article-2 ul{
  font-family: var(--title-font);
  font-size: clamp(21px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.5;
  color: #3f3b37;
  list-style-type: circle;
  margin: 1vw;
}
article-2 p{
  font-family: var(--title-font);
  font-size: clamp(17px, 3vw, 25px);
line-height: 1.5;
color: #3f3b37;
margin-left: 2vw;
}
article-3 ul{
  font-family: var(--title-font);
  font-size: clamp(21px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.5;
  color: #3f3b37;
  list-style-type: circle;
  margin: 1vw;
}
article-3 p{
  font-family: var(--title-font);
  font-size: clamp(17px, 3vw, 25px);
line-height: 1.5;
color: #3f3b37;
margin-left: 2vw;
}


.block-titre {
  grid-column: 1 / 6;
  grid-row: 1 / 2;
  height: auto;
}
.card-container {
  margin-top: 6vw;
  z-index: 1;
}
.block-titre h2 {
  font-family: var(--title-font);
  font-size: clamp(30px, 3vw, 80px);
  font-weight: 500;
  margin-bottom: 2vw;
  color: #3f3b37;
}

.container {
  display: grid;
}

.card__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem; 
}

.card__article {
  position: relative;
  overflow: hidden;
  border-bottom-right-radius: 2rem;
  cursor: pointer;
  box-shadow: 5px 5px 10px #b2b2a8;
}
#card-1{
  background-color: #b2b2a8;
}
#card-2{
  background-color: #FBEFDF;
}
#card-3{
  background-color:#E7AA2C;
}
#card-4{
  background-color: #FBEFDF;
}
#card-5{
  background-color: #E7AA2C;
}
#card-6{
  background-color: #b2b2a8;
}
#card-7{
  background-color: #E7AA2C;
}
#card-8{
  background-color: #FBEFDF;
}
.card-title{
  display: flex;
}

.card-title p{
height: 7vw;
display: flex;
align-items: center;
margin: 1vw;
font-family: var(--title-font);
font-size: clamp(20px, 3vw, 40px);
font-weight: 500;
color: #3f3b37;
}

.card__data-1 {
  width: 95%; 
  display: flex;
  flex-direction: column;
  padding: 1rem ;
  background-color: #dfd7c9;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
  border-radius: 1rem;
  position: absolute;
  bottom: -19rem;
  left: 0;
  right: 0;
  margin-inline-end: auto;
  opacity: 0;
  /* transition: opacity 1s 1s; */
  z-index: 1;
}
.card__data-2 {
  width: 95%; 
  display: flex;
  flex-direction: column;
  padding: 1rem ;
  background-color: #dfd7c9;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
  border-radius: 1rem;
  position: absolute;
  bottom: -23rem;
  left: 0;
  right: 0;
  margin-inline-end: auto;
  opacity: 0;
  /* transition: opacity 1s 1s; */
  z-index: 1;
}
.card__data-3 {
  width: 95%; 
  display: flex;
  flex-direction: column;
  padding: 1rem ;
  background-color: #dfd7c9;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
  border-radius: 1rem;
  position: absolute;
  bottom: -16rem;
  left: 0;
  right: 0;
  margin-inline-end: auto;
  opacity: 0;
  /* transition: opacity 1s 1s; */
  z-index: 1;
}
.card__data-4 {
  width: 95%; 
  display: flex;
  flex-direction: column;
  padding: 1rem ;
  background-color: #dfd7c9;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
  border-radius: 1rem;
  position: absolute;
  bottom: -16rem;
  left: 0;
  right: 0;
  margin-inline-end: auto;
  opacity: 0;
  /* transition: opacity 1s 1s; */
  z-index: 1;
}
.card__data-5 {
  width: 95%; 
  display: flex;
  flex-direction: column;
  padding: 1rem ;
  background-color: #dfd7c9;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
  border-radius: 1rem;
  position: absolute;
  bottom: -18rem;
  left: 0;
  right: 0;
  margin-inline-end: auto;
  opacity: 0;
  /* transition: opacity 1s 1s; */
  z-index: 1;
}
.card__data-6 {
  width: 95%; 
  display: flex;
  flex-direction: column;
  padding: 1rem ;
  background-color: #dfd7c9;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
  border-radius: 1rem;
  position: absolute;
  bottom: -16rem;
  left: 0;
  right: 0;
  margin-inline-end: auto;
  opacity: 0;
  /* transition: opacity 1s 1s; */
  z-index: 1;
}
.card__data-7 {
  width: 95%; 
  display: flex;
  flex-direction: column;
  padding: 1rem ;
  background-color: #dfd7c9;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
  border-radius: 1rem;
  position: absolute;
  bottom: -16rem;
  left: 0;
  right: 0;
  margin-inline-end: auto;
  opacity: 0;
  /* transition: opacity 1s 1s; */
  z-index: 1;
}
.card__data-8 {
  width: 95%; 
  display: flex;
  flex-direction: column;
  padding: 1rem ;
  background-color: #dfd7c9;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
  border-radius: 1rem;
  position: absolute;
  bottom: -16rem;
  left: 0;
  right: 0;
  margin-inline-end: auto;
  opacity: 0;
  /* transition: opacity 1s ; */
  z-index: 1;
}

.card__button {
  text-decoration: none;
  margin: 5px;
padding: 10px;
font-family: var(--title-font);
font-size: 1.4em;
line-height: 1.5;
color: #3f3b37;
}
.card__button:hover{
  color: #fcff77;
  transition: all 0.5s;
}

/* Naming animations in hover */
.card__article:hover .card__data-1 {
  animation: show-data 1s forwards;
  opacity: 1;
  transition: opacity .3s;
}
.card__article:hover .card__data-2 {
  animation: show-data 1s forwards;
  opacity: 1;
  transition: opacity .3s;
}
.card__article:hover .card__data-3 {
  animation: show-data 1s forwards;
  opacity: 1;
  transition: opacity .3s;
}
.card__article:hover .card__data-4 {
  animation: show-data 1s forwards;
  opacity: 1;
  transition: opacity .3s;
}
.card__article:hover .card__data-5 {
  animation: show-data 1s forwards;
  opacity: 1;
  transition: opacity .3s;
}
.card__article:hover .card__data-6 {
  animation: show-data 1s forwards;
  opacity: 1;
  transition: opacity .3s;
}
.card__article:hover .card__data-7 {
  animation: show-data 1s forwards;
  opacity: 1;
  transition: opacity .3s;
}
.card__article:hover .card__data-8 {
  animation: show-data 1s forwards;
  opacity: 1;
  transition: opacity .3s;
}

.card__article:hover {
  animation: remove-overflow 2s forwards;
}

.card__article:not(:hover) {
  animation: show-overflow 2s forwards;
}


/* Card animation */
@keyframes show-data {
  50% {
    transform: translateY(-10rem);
  }
  100% {
    transform: translateY(-7rem);
  }
}

@keyframes remove-overflow {
  to {
    overflow: initial;
  }
}

@keyframes remove-data {
  0% {
    transform: translateY(-7rem);
  }
  50% {
    transform: translateY(-10rem);
  }
  100% {
    transform: translateY(.5rem);
  }
}

@keyframes show-overflow {
  0% {
    overflow: initial;
    pointer-events: none;
  }
  50% {
    overflow: hidden;
  }
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
 @media screen and (min-width: 340px) {
  .container {
    margin-inline-end: 1rem;
  }
  .card__data {
    width: 250px;
    padding: 1rem;
  }
}  

/* For medium devices */
@media screen and (max-width: 768px) {
  .card__container {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 0;
  }
 .card-title p{
   padding-top: 25px;
   padding-bottom: 25px;
 }
} 

/* For large devices */
@media screen and (min-width: 1120px) {
  
  .card__container {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
  }
  .card__img {
    width: 348px;
  }
  .card__data {
    width: 316px;
    padding-inline-end: 2.5rem;
  }
}


/* Contact */

.contact {
  display: flex;
  flex-direction: column;
  margin: 6vw 0 6vw 0;
  border-radius: 25px;
  background: #3f3b37;
  padding: 1vw;
}

.block-contact {
  margin: 4vw 20vw 5vw 1vw;
}

@media (max-width: 1280px) {
  .block-contact {
    margin: 4vw 2vw 4vw 2vw;
  }
}

.block-contact p {
  font-family: var(--title-font);
  font-size: clamp(25px, 3vw, 80px);
  font-weight: 500;
  color: #ffffff;
}

.block-contact span {
  font-style: italic;
}

.block-contact span-1 {
  color: #ffffff;
}

.coucou {
  color: #3f3b37;
}

.block-card-contact {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
}

.card-contact-1 {
  width: 36vw;
  height: 15rem;
  margin: 3vw;
  border: 1px solid #ffffff;
}

.card-contact-1 a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  font-size: clamp(20px, 3vw, 50px);
  font-weight: 200;
  padding: 15px;
  color: #ffffff;
  transition: 0.3s;
  overflow: hidden;
}

.card-contact-1 a:hover {
  font-size: 10em;
  overflow: hidden;
  transition: 0.9s;
  color: #e7aa2c;
}

.card-contact-2 {
  width: 36vw;
  height: 15rem;
  margin: 3vw;
  border: 1px solid #ffffff;
}

.card-contact-2 a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  font-size: clamp(20px, 3vw, 50px);
  font-weight: 200;
  padding: 15px;
  color: #ffffff;
  transition: 0.3s;
  overflow: hidden;
}

.card-contact-2 a:hover {
  font-size: 10em;
  overflow: hidden;
  transition: 0.9s;
  color: #db4c44;
}

  /* #form{
   display: flex;
   flex-wrap: wrap;
 }
 input{
   width: 50%;
   height: 50px;
   font-family: var(--base-font);
   font-size: clamp(10px, 3vw, 17px);
 }
 
 .coche{
   display: flex;
  align-items: center;
   margin: 1vw;
 }
 #coche{
   width: 2vw;
  margin-right: 1vw;
 }
 #cocheText{
   font-family: var(--base-font);
   font-size: clamp(10px, 3vw, 17px);
   color: #ffffff;
 }
 #formation{
  font-family: var(--base-font);
  font-size: clamp(10px, 3vw, 17px);
  color: #3f3b37;
 }
 
 select{
   width: 50%;
   height: 50px;
 }
 textarea{
   width: 50%;
   height: 50px;
 }

 button{
width: 150px;
height: 50px;
margin: 0 auto;
background: #e7aa2c;
border: none;
  cursor: pointer;
  color: #ffffff;
  margin-bottom: 10px;
  font-size: clamp(10px, 3vw, 17px);
 }  */

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: 0.4s;
  padding: 15px;
}

.content span:hover {
  display: none;
}

.card-contact-3 {
  width: 36vw;
  height: 15rem;
  margin: 3vw;
  border: 1px solid #ffffff;
}

.card-contact-3 a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  font-size: clamp(20px, 3vw, 50px);
  font-weight: 200;
  color: #ffffff;
  transition: 0.3s;
  padding: 15px;
  overflow: hidden;
}

.card-contact-3 a:hover {
  font-size: 10em;
  overflow: hidden;
  transition: 0.9s;
  color: #fcff77;
}

@media (max-width: 1280px) {
  .card-contact-1 {
    width: 32vw;
  }
  .card-contact-2 {
    width: 32vw;
  }
  .card-contact-3 {
    width: 32vw;
  }
}

@media (max-width: 950px) {
  .block-contact {
    margin: 10px;
  }

  .block-card-contact {
    display: flex;
    flex-direction: column;
  }

  .card-contact-1 {
    width: 80%;
    height: 120px;
    margin: 10px auto;
  }

  .card-contact-2 {
    width: 80%;
    /* height: 120px; */
    margin: 10px auto;
  }

  .card-contact-3 {
    width: 80%;
    height: 120px;
    margin: 10px auto;
  }

  .content {
    height: auto;
  }
}

.btn-1 {
  display: flex;
  justify-content: end;
  margin: 2em;
  width: 3vw;
  height: 3vw;
  padding: 30px;
  background: #e7aa2c;
  outline: none;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

@media (max-width: 750px){
#form{
  display: flex;
  flex-direction: column;
}
input{
  width: 100%;
}
select{
  width: 100%;
}
textarea{
  width: 100%;
}
.btn-1{
  margin: auto;
}
}

.btn-1 span {
  font-size: 2em;
  transition: top 0.5s;
  color: #ffffff;
}

#btn-text-one {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

#btn-text-two {
  position: absolute;
  width: 100%;
  top: 150%;
  left: 0;
  transform: translateY(-50%);
}

.btn-1:hover #btn-text-one {
  top: -100%;
}

.btn-1:hover #btn-text-two {
  top: 50%;
}

footer{
  display: flex;
  justify-content: space-around;
  background: #3f3b37; 
 /* border-bottom-left-radius: 25px;
 border-bottom-right-radius: 25px; */
border-radius: 25px;
}
.contenu-footer{
  display: flex;
  align-items: center;
  width: 320px;
  height: 200px;
 
}

.contenu-footer img{
  display: flex;
  height: 7vw;
  /* filter: grayscale(100%); */
}
.liste-services li{
  color: #ffffff;
  list-style-type: circle;
}
.Contact p{
  font-family: var(--title-font);
  font-size: 1.2em;
  line-height: 1.5;
  color: #ffffff;
}
.tel{
  margin: 25px auto;
  background: #E7AA2C;
  text-align: center;
}
.liste-services a{
  color: #ffffff;
  text-decoration: none;
  font-family: var(--title-font);
  font-size: 1.2em;
  line-height: 1.5;
}
.liste-services a:hover{
  color: #e7aa2c;
}

.entreprise p{
  font-family: var(--title-font);
  line-height: 1.5;
  color: #ffffff;
 
}
@media screen and (max-width: 768px) {
  footer{
    flex-direction: column;
    align-items: center;
    
  }
  .contenu-footer{
    justify-content: center;
    height:auto;
  }
  .entreprise{
    padding: 10px;
    text-align: center;
}
}