img.boussole {
  width: 17px;
  position: absolute;
  margin-right: 10px;
  transform: translateX(-150%);
}

.titre-bulle {
  position: relative;
  width: 41%;
}

.titre-bulle h2 {
  z-index: 2;
  position: relative;
  color: white;
  margin-bottom: 0px;
}

img.bulle {
  position: absolute;
  width: 120%;
  z-index: 0;
}

@media (max-width: 600px) {
  .titre-bulle {
    width: 100%;
  }
}

/*********** ALTERNANCE (S1) ***********/
#alternance {
  padding-top: 160px;
  background-color: #0a2c7a;
  color: white;
  padding-bottom: 100px;
}

#alternance h1 {
  margin-bottom: 25px;
  color: white;
}

#alternance p {
  margin-bottom: 32px;
}

#alternance .col-1 {
  width: 40%;
}

#alternance img {
  position: absolute;
  width: 48%;
  transform: translate(60%, -50%);
}

@media (min-width: 901px) and (max-width: 1400px) {
  #alternance .col-1 {
    width: 51%;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  #alternance .col-1 {
    width: 60%;
  }
  #alternance img {
    width: 54%;
    transform: translate(45%, -27%);
  }
}

@media (min-width: 601px) and (max-width: 700px) {
  #alternance .col-1 {
    width: 82%;
  }
  #alternance img {
    width: 60%;
    transform: translate(35%, -17%);
  }
}

@media (max-width: 600px) {
  h2 {
    font-size: 25px !important;
  }
  #alternance .col-1 {
    width: 100%;
  }
  img.bulle {
    display: none;
  }
}

@media (min-width: 501px) and (max-width: 700px) {
  #alternance img {
    width: 59%;
    transform: translate(25%, -17%);
  }
}

@media (max-width: 500px) {
  #alternance img {
    width: 101%;
    transform: translate(5%, -17%);
  }
}

/*********** POURQUOI ? ***********/
#pourquoi {
  margin-top: 82px;
  margin-bottom: 120px;
}

#pourquoi .ligne-1 {
  position: relative;
  transform: translateY(-70%);
}

#pourquoi .ligne-1 img.bulle {
  transform: translateY(-79%);
  left: -12%;
}

#pourquoi .ligne-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10%;
  margin-top: 60px;
  margin-bottom: 60px;
}

#pourquoi .ligne-2 img {
  width: 17px;
  position: absolute;
  margin-right: 10px;
  transform: translateX(-150%);
}

#pourquoi .ligne-3 img {
  width: 26px;
  position: absolute;
  margin-right: 10px;
  transform: translateX(-150%);
}

#pourquoi .ligne-3 h3 {
  font-size: 35px;
}

#pourquoi h3 {
  color: #5493f7;
}

@media (min-width: 1151px) and (max-width: 1300px) {
  #pourquoi .titre-bulle {
    width: 48%;
  }
}

@media (min-width: 1001px) and (max-width: 1150px) {
  #pourquoi .titre-bulle {
    width: 53%;
  }
}

@media (min-width: 801px) and (max-width: 900px) {
  #pourquoi .titre-bulle {
    width: 52%;
  }
}

@media (min-width: 701px) and (max-width: 800px) {
  #pourquoi .ligne-1 {
    transform: none;
  }
  #pourquoi .titre-bulle {
    width: 54%;
  }
}

@media (min-width: 601px) and (max-width: 700px) {
  #pourquoi .ligne-1 {
    transform: none;
  }
  #pourquoi .titre-bulle {
    width: 63%;
  }
}

@media (max-width: 600px) {
  #pourquoi {
    margin-top: 120px;
    margin-bottom: 60px;
  }
  #pourquoi .ligne-1 {
    transform: translateY(0%);
  }
  #pourquoi .ligne-2 {
    margin-top: 20px;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
  }
  #pourquoi h2 {
    color: #5493f7;
    margin-bottom: 30px;
  }
  #pourquoi .ligne-3 h3 {
    font-size: 20px;
  }
  #pourquoi .ligne-3 img {
    width: 17px;
  }
}

/*********** MISSIONS ***********/

#missions {
  background-color: #c6dcff;
  color: #0a2c7a;
  padding: 60px 0px 60px 0px;
}

#missions .ligne-1 {
  display: flex;
  justify-content: end;
  position: relative;
  transform: translateY(-70%);
  text-align: right;
}

#missions h2 {
  margin: 0px;
}

#missions img.bulle {
  transform: translateY(-81%);
  left: -4%;
}

#missions .ligne-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3%;
  position: relative;
  z-index: 1;
  margin-top: 30px;
  margin-bottom: 60px;
}

#missions .ligne-2 .col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 3px solid #0a2c7a;
  border-radius: 14px;
  padding: 24px;
  min-height: 307px;
}

#missions .ligne-2 .col:hover {
  cursor: pointer;
}

#missions .ligne-2 .col.actif {
  justify-content: center;
  background-color: #0a2c7a;
  color: white;
  text-align: left;
}

#missions .ligne-2 .col.actif li {
  margin-bottom: 10px;
}

#missions .ligne-2 img {
  width: 32%;
  margin-bottom: 20px;
}

#missions .bouton {
  display: none;
}

@media (min-width: 1001px) and (max-width: 1150px) {
  #missions .titre-bulle {
    width: 45%;
  }
}

@media (max-width: 1000px) {
  #missions .bouton {
    display: initial;
  }
  #missions h3 {
    font-size: 22px;
  }
  #missions .ligne-2 {
    grid-template-columns: 1fr;
  }
  #missions .ligne-2 .col:hover {
    cursor: pointer;
  }
  #missions .contenu-out p {
    display: none;
  }
  #missions .ligne-2 .col {
    justify-content: center;
  }
}

@media (min-width: 601px) and (max-width: 1000px) {
  #missions .ligne-2 .col {
    min-height: 200px;
  }
}

@media (min-width: 601px) and (max-width: 700px) {
  #missions .ligne-1 {
    transform: none;
  }
  #missions .titre-bulle {
    width: 55%;
  }
}

@media (max-width: 600px) {
  #missions .ligne-1 {
    transform: none;
  }
  #missions h2 {
    color: #0a2c7a;
    width: 100%;
    text-align: left;
  }
}

/*********** OBJECTIFS (S4) ***********/

#objectifs {
  margin-top: 120px;
  margin-bottom: 120px;
}

#objectifs .ligne-1 h2 {
  color: #0a2c7a;
  width: 55%;
  font-size: 41px;
}

#objectifs .ligne-2 {
  display: flex;
}

#objectifs .ligne-2 .col-1 {
  width: 56%;
  display: flex;
  justify-content: start;
  align-content: center;
  align-items: center;
}

#objectifs .ligne-2 .col-1 .texte-bulle {
  width: 41%;
  position: relative;
  z-index: 2;
  transform: translate(38%, -2%);
}

#objectifs .ligne-2 .col-1 h3 {
  z-index: 2;
  position: relative;
  color: white;
  font-size: 35px;
  margin-bottom: 20px;
}

#objectifs .ligne-2 .col-2 {
  width: 29%;
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
}

#objectifs .ligne-2 .col-2 h3 {
  color: #3bab6f;
  margin-bottom: 10px;
}

#objectifs .ligne-2 img.bulle {
  width: 30%;
  max-width: 406px;
}

@media (min-width: 901px) and (max-width: 1250px) {
  #objectifs .ligne-1 h2 {
    width: 75%;
  }
  #objectifs .ligne-2 .col-2 {
    width: 44%;
  }
}

@media (min-width: 1001px) and (max-width: 1250px) {
  #objectifs .ligne-2 .col-1 .texte-bulle {
    width: 52%;
    transform: translate(28%, -2%);
  }
  #objectifs .ligne-2 img.bulle {
    width: 33%;
  }
}

@media (min-width: 901px) and (max-width: 1000px) {
  #objectifs .ligne-2 .col-1 .texte-bulle {
    width: 61%;
    transform: translate(28%, -2%);
  }
  #objectifs .ligne-2 img.bulle {
    width: 39%;
  }
}

@media (min-width: 651px) and (max-width: 900px) {
  #objectifs .ligne-2 .col-2 {
    gap: 20px;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  #objectifs {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  #objectifs .ligne-1 h2 {
    width: 100%;
  }
  #objectifs .ligne-2 .col-1 {
    display: none;
  }
  #objectifs .ligne-2 .col-2 {
    width: 100%;
    gap: 20px;
  }
}

/*********** COMPOSITION ***********/

#composition .ligne-1 {
  text-align: right;
}

#composition .ligne-1 h2 {
  color: #0a2c7a;
  width: 55%;
  font-size: 41px;
  margin-left: auto;
  margin-bottom: 72px;
}

#composition .ligne-2 {
  display: flex;
  gap: 50px;
}

#composition .ligne-2 .col {
  justify-content: center;
  display: flex;
}

#composition .ligne-2 img {
  width: 100%;
}

#composition .ligne-2 img:hover {
  cursor: pointer;
}

#composition .ligne-3 {
  margin-top: 40px;
  display: grid;
}

#composition .ligne-3 h3,
#composition .onglets h3 {
  color: white;
}

#composition .onglets .onglet-contenu-portable img {
  position: absolute;
  width: 15%;
  transform: translate(370%, -70%);
}

#composition #onglet-contenu-bureau h3 {
  margin-bottom: 0px;
}

#composition .onglet-contenu,
#composition .onglet-contenu-portable {
  border-radius: 20px;
  padding: 40px;
  color: white;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

#composition .onglet-contenu {
  display: grid;
  grid-template-columns: 1fr;
  grid-area: 2/1/3/2;
  position: relative;
}

#composition .onglet-contenu-portable {
  display: none;
}

#composition .sous-onglet-contenu {
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

#composition .onglet-contenu.actif,
#composition .sous-onglet-contenu.actif,
#composition .onglet-contenu-portable.actif {
  display: inherit;
  visibility: visible;
  opacity: 1;
  -webkit-transition: all 0.4s ease-in-out 0.4s;
  transition: all 0.4s ease-in-out 0.4s;
}

#composition .onglet-contenu .description {
  width: 85%;
}

#composition .onglet-contenu img {
  position: absolute;
  width: 6%;
  right: 3%;
  top: 10%;
}

#composition .onglet-contenu p:first-child,
#composition .onglet-contenu p:last-child {
  margin: 0px;
}

#composition #onglet-contenu-president,
#composition #onglet-contenu-portable-president {
  background-color: #3bab6f;
}

#composition #onglet-contenu-bureau,
#composition #onglet-contenu-portable-bureau {
  background-color: #f77129;
}

#composition #onglet-contenu-admins,
#composition #onglet-contenu-portable-admins {
  background-color: #5493f7;
}

#composition .sous-onglets {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

@media (min-width: 1101px) and (max-width: 1200px) {
  #composition .ligne-1 h2 {
    width: 74%;
  }
}

@media (min-width: 1001px) and (max-width: 1100px) {
  #composition .ligne-1 h2 {
    width: 76%;
  }
}

@media (min-width: 801px) and (max-width: 1000px) {
  #composition .ligne-1 h2 {
    width: 89%;
  }
}

@media (min-width: 601px) and (max-width: 800px) {
  #composition .onglets .onglet-contenu-portable img {
    width: 9%;
    right: 15%;
    transform: translateY(-40%);
  }
  #composition .ligne-2 .col {
    width: 71%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 800px) {
  #composition .ligne-1 h2 {
    width: 100%;
    text-align: left;
  }
  #composition .ligne-2 {
    flex-direction: column;
  }
  #composition .ligne-2 .col-1 img {
    width: 60%;
  }
  #composition .ligne-1 h2 {
    margin-bottom: 30px;
  }
  #composition .contenus {
    display: none;
  }
}

/*********** POSTULER ***********/
#ancre-postuler {
  position: absolute;
  transform: translateY(40px);
  height: 10px;
  display: block;
}

#postuler {
  margin-top: 240px;
  margin-bottom: 120px;
}

#postuler .ligne-1 {
  display: flex;
  justify-content: center;
}

#postuler .container.ligne-2 {
  width: 67%;
  margin-left: auto;
  margin-right: auto;
}

#postuler .titre-bulle {
  width: 45%;
  transform: translateX(-10%);
}

#postuler img.bulle {
  transform: translateY(-77%);
  left: -12%;
}

#postuler .ligne-2 .bloc {
  background-color: #f8cc46;
  color: #0a2c7a;
  padding: 60px;
  border-radius: 20px;
}

#postuler .ligne-2 .bloc ol {
  margin-bottom: 35px;
}

#postuler .ligne-2 .bloc li {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 13px;
}

#postuler .ligne-2 .bloc .texte {
  width: 65%;
}

#postuler .ligne-2 .bloc .texte > a {
  margin-right: 10px;
}

#postuler .ligne-2 .bloc img {
  width: 24%;
  max-width: 400px;
  position: absolute;
  transform: translateY(-80%);
  right: 15%;
}
@media (min-width: 1201px) and (max-width: 1300px) {
  #postuler img.bulle {
    transform: translateY(-85%);
    left: -18%;
    width: 130%;
  }
}

@media (min-width: 1101px) and (max-width: 1200px) {
  #postuler .ligne-2 .bloc img {
    width: 30%;
    transform: translateY(-80%);
    right: 9%;
  }
  #postuler img.bulle {
    transform: translateY(-88%);
    left: -20%;
    width: 140%;
  }
}

@media (min-width: 1001px) and (max-width: 1100px) {
  #postuler .ligne-2 .bloc img {
    width: 33%;
    transform: translateY(-80%);
    right: 6%;
  }
}

@media (min-width: 801px) and (max-width: 900px) {
  #postuler img.bulle {
    transform: translateY(-86%);
    left: -21%;
    width: 140%;
  }
  #postuler .ligne-2 .bloc img {
    width: 38%;
    transform: translateY(-90%);
    right: -4%;
  }
  #postuler .ligne-2 .bloc .texte {
    width: 77%;
  }
}

@media (min-width: 701px) and (max-width: 800px) {
  #postuler img.bulle {
    transform: translateY(-86%);
    left: -24%;
    width: 157%;
  }
  #postuler .ligne-2 .bloc img {
    width: 42%;
    transform: translateY(-100%);
    right: -7%;
  }
}

@media (min-width: 601px) and (max-width: 700px) {
  #postuler .titre-bulle {
    width: 52%;
  }
  #postuler img.bulle {
    transform: translateY(-86%);
    left: -24%;
    width: 157%;
  }
  #postuler .ligne-2 .bloc .texte {
    width: 94%;
  }
  #postuler .ligne-2 .bloc img {
    width: 44%;
    transform: translateY(-100%);
    right: -15%;
  }
  #postuler .bloc .boutons {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  #postuler {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  #postuler .titre-bulle {
    width: 100%;
    transform: none;
    margin-bottom: 20px;
  }
  #postuler h2 {
    color: #0a2c7a;
    width: 100%;
    transform: none;
  }
  #postuler .ligne-2 .bloc {
    padding: 20px 45px 20px 20px;
  }
  #postuler .container.ligne-2 {
    width: 77%;
  }
  #postuler .ligne-2 .bloc ol {
    margin-bottom: 15px;
  }
  #postuler .ligne-2 .bloc li {
    font-size: 14px;
  }
  #postuler .ligne-2 .bloc .texte {
    width: 100%;
  }
  #postuler .bloc .boutons {
    display: flex;
    justify-content: center;
  }
  #postuler .ligne-2 .bloc img {
    width: 37%;
    transform: translateY(-90%);
    right: -12%;
  }
}

/*********** FAQ ***********/

#faq {
  margin-top: 240px;
  margin-bottom: 120px;
}

#faq img.bulle {
  transform: translateY(-78%);
  left: -15%;
}

#faq .ligne-2 {
  padding-top: 120px;
  background-color: #c6dcff;
}

#faq .searchbar {
  min-width: 220px;
  margin-bottom: 20px;
}

#faq .searchbar {
  border: 1px solid #c6dcff;
}

@media (max-width: 600px) {
  #faq {
    margin-top: 60px;
  }
  #faq .ligne-1 h2 {
    color: #0a2c7a;
    margin-bottom: 20px;
  }
  #faq .ligne-2 {
    padding-top: 40px;
  }
}