body {
  margin: auto;
  max-width: 100%;
  font-family: "Montserrat";

}
main {
  margin: 7.7%;
}


/*CSS pour hero*/
.hero {
  display: flex;
  flex-direction: column;
  margin-top: 194px;
  text-align: center;
  gap: 94px;
}

.hero h1 {
  font-weight: 700;
  font-size: 72px;
  line-height: 88px;
  margin: 0;
}
.hero img {
  width: 100%;
  height: auto;
}

.main img {
  max-width: 100%;
  height: auto;
}

.text
{
  padding-top: 70px;
  display: flex;
  flex-direction: column;
  gap: 15px;

}
 
.image img:nth-child(1) 
{
  margin-bottom: 12px;
}
.image img:nth-child(2) 
{
  margin-right: 15px;
}

main hr

{
  margin-top: 100px;
  margin-bottom: 100px;
}

.section1 , .section3, .section2
{
  display: flex;
  width: 100%;
  height: auto;
  gap: 9.5%;
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
  text-align: justify;
  letter-spacing: 0.02em;
}
.section3 h2 
{
  font-weight: 700;
  font-size: 52px;
  line-height: 63px;
  text-align:left ;
  margin: 0;
}

.section3 p:nth-child(2) 
{
  text-align: left;
}

.section3 ul {
  padding: 0;
  list-style: url("../img/Images_et_Icones/Icones_globals/Formation - en - coaching - de - gestion.svg") inside;
}
.section3 ul li span
{
  margin-left: 40px;
}

.section3 p:nth-child(2)
{
  color:#0000FF ;
  font-weight: 700;
  font-size: 24px;
}
.section3 p:nth-child(3)
{
  font-weight: 600;
}


/*Desktop 2 : 1780 x 1001 (9/16)*/
@media only screen and (max-width: 1780px)
{

}


/*Desktop 3 : 1640 x 1230 (3/4)*/
@media only screen and (max-width: 1640px)
{
}
/*Desktop 4 : 1500 x 1125 (3/4)*/
@media only screen and (max-width: 1500px)
{
}


/*Desktop 4 : 1500 x 1125 (3/4)*/
@media only screen and (max-width: 1360px)
{
  .image img:nth-child(1)
  {
    max-width: 95%;
    height: auto;
  }

  .text
  {
    padding: 0;
  }

  .section3 img {
    max-width: 100%;
    height: auto;
  }
  .section3 div {
    width: 50%;
  }

}


/*Desktop 4 : 1500 x 1125 (3/4)*/
@media only screen and (max-width: 800px)
{
  .hero {
    margin-top: 140px;
    gap: 50px;
  }
  hr
  { 
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .hero h1
  {
    font-size: 50px;
    line-height: 60px;
  }
  .section1 , .section3{
    display: inline;
  }
  .section3 div {
    width: 100%;
  }

  .image 
  {
    display:none;
  }
  .section3 h2 {
    font-size: 40px;
    text-align: center;
  }
  .section1 , .section3
  {
    font-size: 24px;
    line-height: 45px;
  }
}


@media only screen and (max-width: 520px) 
{
  .hero h1
  {
    font-size: 38px;
    line-height: 47px;
  }
  .section3 h2 {
    font-size: 30px;
    line-height: 27px;
  }
  .section1 , .section3
  {
    font-size: 22px;
    line-height: 38px;
    text-align:justify;
  }
}

@media only screen and (max-width: 375px) 
{
  .hero h1
  {
    font-size: 38px;
    line-height: 47px;
  }
  .section3 h2 {
    font-size: 30px;
    line-height: 27px;
  }
  .section1 , .section3
  {
    font-size: 19px;
    line-height: 38px;
  }
}