body {
    margin: 0px;
}
/* En-tête*/
    header {
max-width: 100%;
height: 80px;
background: #152237;
display:flex;
justify-content: space-around;
align-items: center;

  }
header img {
width: 84px;
height: 31px;

}
header p {
        font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
    color: #FFFFFF;
    margin: 0;
    display: flex;
    align-items: center;
}

.button {
     display: flex;
    flex-direction: row;
    gap: 15px;
    font-family: 'Montserrat', sans-serif;
}
.b01 {
width: 130px;
height: 40px;
top: 20px;
left: 1300px;
opacity: 1;
border-radius: 6px;
background: #FFFFFF; 
font-size: 15px;
border: none;
}
.b02 {
width: 130px;
height: 40px;
top: 20px;
left: 1449px;
opacity: 1;
border-radius: 6px;
font-size: 15px;
background: linear-gradient(95.98deg, #44DD8A 8.7%, #15B7E2 100%);
border: none;
}

header input {
width: 90px;
height: 18px;
top: 31px;
left: 620px;
opacity: 1;
width: 477px;
height: 40px;
opacity: 1;
border-width: 1px;
border-radius: 6px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
  no-repeat right 10px center;
    background-size: 18px;
    border: 1px solid #FFFFFF
}
header input::placeholder {
width: 90px;
height: 18px;
top: 31px;
left: 620px;
opacity: 1;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 100%;
text-align: center;
vertical-align: middle;
color: #FFFFFF;
}

.menu-mobile {
  display: none;
  width: 56px;
  height: 56px;
  background: transparent;
  border: none;
  cursor: pointer;

  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.menu-mobile span {
  width: 24px;
  height: 2px;
  background: #FEF7FF;
  display: block;
}

@media (max-width: 768px) {
   header {
    justify-content: space-between;
    height: 64px;
    padding: 10px 20px;
  }
  .nav, header input, .button {
    display: none;
  }
  .menu-mobile {
    display: flex;
  }
}

/*Section 0*/
.container_hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 450px;

    background: linear-gradient(94deg, rgba(68,221,138,0.8) 3%, rgba(21,183,226,0.8) 98%),
    url(bg-header.png);
    background-size: cover;
    background-position: center;
    text-align: center;
}
.container_hero h1 {
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  font-size: 48px;
  line-height: 100%;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: #152237;
}

.container_hero h3 {
    margin-top: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.container_hero button {

padding: 12px 24px;

background: #FFFFFF;
color: #152237;
border-radius: 6px;

font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 15px;
line-height: 18px;
letter-spacing: -0.015em;
border: none;
display: flex;
align-items: center;
text-align: center;
}

/* Section 1 */
.marché {
 
    padding: 30px 0 60px;
    background: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
}
.marché .container {
    padding: 0 200px;    
    font-size: 0px;
}

.marché h2 {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 36px;
    color: #152237;
    margin-bottom: 30px;
}
.card {
  display: flex;
  justify-content: center;
  gap: 90px;
  padding-bottom: 30px;
}

.card_marché {
    height: 362px;
    width: 305px;
    background: #fff;
    position: relative;
}

.card_marché img {
    width: 305px;
    height: 206px;
    object-fit: cover;
    background: #44DD8A;
}

.card_prix {
    position: absolute;
    top: 190px;
    right: 15px;
    background: #152237;
    border-radius: 93px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 5px 4px 13.2px -1px rgba(0, 0, 0, 0.25);
}

.prix {
  font-family: montserrat, sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}

.priz {
    font-size: 10px;
    text-decoration: line-through;
    color: #fff;
}

.card_marché h4 {
    margin: 30px 16px 6px;
    font-weight: 700;
    font-size: 24px;
    color: #152237;
}

.auteur {
    margin: 0 16px 10px;
    font-size: 16px;
   
    color: #152237;
    font-family: montserrat, sans-serif;
    font-weight: 400;
    font-size: 16px;
}

.stars {
    margin: 0 16px 10px;
}

.stars i {
    color: #FFC700;
    font-size: 16px;
}

.description {
    margin: 0 16px 20px;
font-family: Montserrat, sans-serif;
font-weight: 100;
font-size: 16px;
color: #152237;

}

.btn_marché {
    width: 225px;
    height: 40px;

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

    margin: 0 auto;

    background: #152237;
    border: none;
    border-radius: 6px;

    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    color: #FFFFFF;
    white-space: nowrap;

    cursor: pointer;
}
@media (max-width: 768px) {
  .marché .container {
    padding: 0 20px; 
  }

  .card {
    flex-direction: column; 
    align-items: center;   
    gap: 20px;     
  }

  .card_marché {
    width: 100%;  
    max-width: 305px;
    height: auto;  
  }

 .marché h2 {
    white-space: normal; 
    text-align: center;  
    margin-bottom: 20px;
  }

  .card_marché img {
    width: 100%;
    height: auto;   
  }

  .card_prix {
    top: 160px;
    right: 10px;
    padding: 5px 12px;
  }

  .card_marché h4 {
    font-size: 20px;
  }

  .auteur, .description {
    font-size: 14px;
    margin: 0 10px 10px;
  }

  .btn_marché {
    width: 80%;
    font-size: 14px;
  }
}
/*Section II*/
.blackmarket {
  background: #152237;
  padding: 40px 100px 60px;
  position: relative;
}

.blackmarket container {
    padding: 0 200px;    
    font-size: 0px;
    background: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
}
.blackmarket h2 {
  padding: 0 100px;
  font-weight: 800;
  font-size: 36px;

  color: #fff;
  margin-bottom: 40px;
}
.blackcard  {
  display: flex;
  gap: 93px;
  justify-content: center;
  margin-bottom: 50px;
}
.card_blackmarket {
  width: 305px;
  color: #fff;
  position: relative;
}
.card_blackmarket img {
 height: 206px;
  background: #44DD8A;
  border-radius: 6px;
  margin-bottom: 16px;
}
.card_blackprix {
  position: absolute;
  top: 190px;
  right: 12px;
  background: #fff;
  border-radius: 93px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 5px 4px 13px rgba(0,0,0,0.25);
}
.blackprix {
  font-weight: 700;
  font-size: 20px;
  color: #152237;
}
.blackpriz {
  font-size: 10px;
  text-decoration: line-through;
  color: #152237;
}
.blackmarket h4  {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  margin: 0px 16px 6px;
}
.blackauteur {
    margin: 0 16px 10px;
    font-size: 16px;
    margin-bottom: 6px;
    color: white;
    font-family: montserrat, sans-serif;
    font-weight: 400;
    font-size: 16px;

}

.blackdescription {
    margin: 0 16px 20px;
  font-family: Montserrat, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  font-size: 16px;
  color: #FFFFFF;


}
.blackbtn {
    width: 225px;
    height: 40px;

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

    margin: 0px auto;

    background: #FFFFFF;
    border-radius: 6px;

    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    color: #152237;
    white-space: nowrap;
    border:none;
    cursor: pointer;
}

@media (max-width: 768px) {

  .blackmarket {
    padding: 40px 20px 60px;
  }

  .blackmarket .container {
    padding: 0 20px;
  }

  .blackcard {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .card_blackmarket {
    width: 100%;
    max-width: 305px;
    height: auto;
  }

  .blackmarket h2 {
    white-space: normal;
    text-align: center;
    padding: 0;
    margin-bottom: 20px;
    font-size: 28px;
  }

  .card_blackmarket img {
    width: 100%;
    height: auto;
  }

  .card_blackprix {
    top: 160px;
    right: 10px;
    padding: 5px 12px;
  }

  .blackmarket h4 {
    font-size: 20px;
    text-align: center;
  }

  .blackauteur,
  .blackdescription {
    font-size: 14px;
    margin: 0 10px 10px;
    text-align: center;
  }

  .blackbtn {
    width: 80%;
    font-size: 14px;
  }
}

/*Section III*/
.avis {
  background: #ffffff;
  padding: 0px 0 80px;
  font-family: 'Montserrat', sans-serif;
}
.avis .container {
  padding: 0 100px;
}
.avis-titre {
  text-align: center;
  font-weight: 900;
  font-size: 40px;
  text-transform: uppercase;
  color: #152237;
  margin-bottom: 80px;
}
.avis-liste {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.avis-photo {
  width: 139px;
  height: 139px;
  border-radius: 50%;
  background: #D9D9D9;
  overflow: hidden;
  margin-bottom: 20px;
}
.avis-photo img {
      width: 100%;
  height: 100%;
  object-fit: cover;
}
.avis-card h4 {
margin: 0 auto;
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 36px;
color: #152237;


}
.blackstars {
margin: 0 auto;
}
.avis-texte {
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.8);
  max-width: 656px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
}


@media (max-width: 768px) {

  .avis {
    padding: 0 0 60px;
  }

  .avis .container {
    padding: 0 20px;
  }

  .avis-titre {
    font-size: 28px;
    margin-bottom: 40px;
  }

  .avis-liste {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .avis-card {
    width: 100%;
    max-width: 500px;
    text-align: center;
  }

  .avis-photo {
    margin: 0 auto 16px;
    width: 110px;
    height: 110px;
  }

  .avis-card h4 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 8px;
  }

  .blackstars {
    margin-bottom: 12px;
  }

  .avis-texte {
    font-size: 14px;
    line-height: 24px;
    max-width: 100%;
  }
}

/* Section IV */
.avantages {
    background: #F5F5F5;
    padding: 80px 0;
    font-family: 'Montserrat', sans-serif;
}

.avantages__container {
    margin: 0 auto;
    padding: 0 120px;
}

.avantages__content {
    display: flex;
    height: 100%;
}

.avantages__image {
  flex: 1;
    max-width: 100%;
    height: auto;
}

.avantages__text {
flex:1;
}

.avantages__title {
    font-weight: 900;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: #152237;
    margin: 0 0 60px 0;
}

.avantages__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.avantages__item {
    display: flex;
    align-items: center;
    gap: 24px;
}

.avantages__item p {
    width: 616px;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.015em;
    color: rgba(0, 0, 0, 0.8);
    margin: 0;
}

.avantages__icon {
    flex-shrink: 0;
}

@media (max-width: 768px) {

  .avantages {
    padding: 60px 0;
  }

  .avantages__container {
    padding: 0 20px;
  }

  .avantages__content {
    flex-direction: column;
    gap: 40px;
  }

  .avantages__image {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 6px;
  }

  .avantages__text {
    width: 100%;
  }

  .avantages__title {
    font-size: 28px;
    margin-bottom: 30px;
    text-align: center;
  }

  .avantages__list {
    gap: 20px;
  }

  .avantages__item {
    align-items: flex-start;
    gap: 16px;
  }

  .avantages__item p {
    width: 100%;
    font-size: 16px;
    line-height: 22px;
  }

  .avantages__icon {
    width: 22px;
    height: 22px;
  }
}

/* Section V */
 .formation {
    background: #44DD8A;
    padding: 80px 0;
    font-family: 'Montserrat', sans-serif;
 }
 .formation__container {
    display: flex;
    gap: 80px;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 120px;
    justify-content: center;
  
 }
 .formation__content {
     display: flex;
    gap: 80px;
    align-items: center;
    width: 100%;
 }
 .formation__text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
 }
 .formation__title {
    font-weight: 900;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: #152237;
    margin: 0 0 60px 0;
 }
 .formation__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
 }
  .formation__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-size: 24px;
    line-height: 28px;
    color: rgba(0,0,0,0.8);
  }
  .formation__item p {
    width: 616px;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.015em;
    color: rgba(0, 0, 0, 0.8);
    margin: 0;
   }
.formation__image {
     width: 729px;
    height: 487px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.formation__item svg {
      width: 30px;
    height: 30px;
    min-width: 30px;
    flex-shrink: 0;
    border-radius: 4px;
}

@media (max-width: 768px) {

  .formation {
    padding: 60px 0;
  }

  .formation__container {
    padding: 0 20px;
  }

  .formation__content {
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }

  .formation__text {
    width: 100%;
  }

  .formation__title {
    font-size: 28px;
    margin-bottom: 30px;
    text-align: center;
  }

  .formation__list {
    gap: 20px;
  }

  .formation__item {
    font-size: 16px;
    line-height: 22px;
    align-items: flex-start;
  }

  .formation__item p {
    width: 100%;
    font-size: 16px;
    line-height: 22px;
  }

  .formation__item svg {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }

  .formation__image {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 6px;
  }
}
/* Section VI */
.propos {
  display:flex;
  justify-content: space-between;
  flex: 0 0 686px;
  width: 100%;
  min-height: 740px;
}
.propos-text {
 flex: 0 0 686px;
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  padding-left: 103px;
 
}

.propos-text h2 {
   font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 40px;
  text-transform:uppercase;
  color: #152237;
  margin-bottom: 80px;
}

.propos-text p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.015em;
  color: #152237;
  margin: 0;     
}

.propos-image {
  position: relative;
  flex: 1;
  max-width: 830px;
  min-height: 740px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.propos-fond {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #152237;
  top: 0;
  left: 0;
  z-index: 1;
}

.propos-logo {
  position: relative;
  width: 430px;
  height: auto;
  z-index: 2;
}

@media (max-width: 768px) {

  .propos {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: auto;
    padding-top: 20px;
  }

  .propos-text {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  .propos-text h2 {
    width: 100%;
    margin: 0 auto 16px;

    text-align: center;
    display: block;

    font-size: 28px;
    margin-bottom: 24px;

    white-space: normal;
    overflow-wrap: break-word;
  }

  .propos-text p {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
  }

  .propos-image {
    width: 100%;
    min-height: 260px;
    height: 260px;
    margin-top: 20px;
  }

  .propos-logo {
    width: 200px;
    max-width: 90%;
  }
}

/* Section VII */
.contact {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  background: #ffffff;
  padding: 40px 0;
}
.contact h2 {
  text-align: center;
  font-weight: 900;
  color: #152237;
  font-size: 40px;
  line-height: 36px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.bordu {
  width: 350px;
  height: 1px;
  background: #44DD8A;
  margin: 20px auto 60px auto;
}
.formul {
  width: 100%;
  max-width: 1336px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 24px;
}
.formuname {
margin-right: 70px;
}

.contact input {
  width: 630px;
  height: 45px;
  background: #152237;
  border: none;
  outline: none;
  color: #fff;
  padding: 12px 18px;
  font-size: 15px;
  box-sizing: border-box;
  margin: auto;
}
.contact textarea {
  max-width: 100%;
  height: 194.64px;
  background: #152237;
  border: none;
  outline: none;
  color: #fff;
  padding: 16px 18px;
  font-size: 15px;
  box-sizing: border-box;
  
}
.contact input::placeholder,
.contact textarea::placeholder {
  color: #ffffff;
  opacity: 0.9;
}

.btn__contact {
  display: block;
  width: 351px;
  height: 45px;
  margin: 50px auto 0 auto;
  background: #44DD8A;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: #152237;
  letter-spacing: -0.015em;
}

@media (max-width: 768px) {
  .nom-mail {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .nom-mail label {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
  }

  .contact input {
    width: 100%;
    max-width: 400px;
    padding: 12px 15px;
    box-sizing: border-box;
    display: block;
  }

  .contact textarea {
    width: 100%;
    max-width: 400px;
    padding: 12px 15px;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
  }

  .btn__contact {
    width: 100%;
    max-width: 400px;
  }
}


/* Section VIII */
.line__footer {
max-width: 100%;
height: 18px;
background: linear-gradient(90.01deg, #44DD8A 2.38%, #18A0FB 100%);

}
.background__footer {
background: #152237;
width: 100%;
height: 489px;
color: #FFFFFF;



}
.footer__footer {
display: flex;
justify-content: space-between;
padding: 100px 100px 0px 100px;
flex-wrap: wrap;
}

.logo__footer img {
width: 243px;
height: 87px;
}

.btn__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.foot__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 100px;
  border-top: 2px solid #44DD8A;

}
.mention__footer {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.015em;
    color: #FFFFFF;
}

.coord__footer p {
    display: flex;
    flex-direction: column;
}

.coord__footer p > span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 100;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.015em;
    color: #FFFFFF;
}


.media__footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 768px) {
  .btn__footer,
  .media__footer,
  .foot__footer,
  .line__footer {
    display: none;
  }

  .footer__footer {
    flex-direction: column;
    align-items: center;
    padding: 50px 20px 0 20px;
    color: white;
  }

  .mentions-legales-title,
  .coordonnees-title {
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
  }

  .mentions-list,
  .coordonnees-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .mention__footer {
    text-align: center;
    margin-top: 40px;
  }

  .background__footer {
    height: auto;
    padding-bottom: 20px;
  }
}