/* ============================================
     IMPORTS ET POLICES
     ============================================ */
@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap");

/* ============================================
     STYLES PRINCIPAUX
     ============================================ */

/* Conteneur principal */
main {
     height: auto;
     width: 100%;
}

/* Section principale "À propos" */
.main_propos {
     height: 100vh;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-self: center;
     background-image: url("../images/welcome/bg_welcome.png");
}

     /* Titres et textes dans .main_propos */
     .main_propos h1 {
          margin-top: 20px;
          text-align: center;
          font-size: 48px;
          color: #ffffff;
     }

     .main_propos h4 {
          text-align: center;
          font-size: 24px;
          color: #ffffff;
     }

     .main_propos h6 {
          text-align: center;
          font-size: 20px;
          color: #ffffff;
     }

     .main_propos p {
          margin: 0 auto;
          margin-top: 20px;
          width: 50%;
          text-align: center;
          font-size: 18px;
          color: var(--bleu_clair);
     }

/* ============================================
     POLICES PERSONNALISÉES
     ============================================ */

.alex-brush-regular {
     font-family: "Alex Brush", cursive;
     font-weight: 400;
     font-style: normal;
}

/* ============================================
     CONTENEURS ET SECTIONS
     ============================================ */

/* Conteneur texte principal */
.container_txt {
     margin-top: 50px;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
}

/* Section texte */
.section_txt {
     width: 50%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
}

     /* Premier enfant de .section_txt */
     .section_txt:first-child {
          display: flex;
          flex-direction: row;
          justify-content: space-evenly;
     }

     /* Titres dans .section_txt */
     .section_txt h1 {
          font-size: 70px;
          color: var(--bleu_clair);
     }

     .section_txt h3 {
          font-size: 24px;
          color: var(--bleu_clair);
     }

/* ============================================
     SECTION VISION
     ============================================ */

.our_vision {
     margin-top: 50px;
     display: flex;
     flex-direction: row-reverse;
     align-items: center;
     justify-content: center;
}

     /* Section texte dans .our_vision */
     .our_vision .section_txt {
          width: 50%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
     }

          /* Titres dans .our_vision .section_txt */
          .our_vision .section_txt h1 {
               font-size: 70px;
               color: var(--bleu_clair);
          }

          .our_vision .section_txt h3 {
               font-size: 24px;
               color: var(--bleu_clair);
          }

          /* Paragraphe dans .our_vision .section_txt */
          .our_vision .section_txt p {
               margin: 0 auto;
               margin-top: 20px;
               width: 50%;
               text-align: center;
               font-size: 18px;
               color: var(--bleu_clair);
               background-color: var(--bleu_foncer);
               padding: 20px 10px;
               border-radius: 10px;
          }

          /* Premier enfant de .our_vision .section_txt */
          .our_vision .section_txt:first-child {
               display: flex;
               flex-direction: row;
               justify-content: space-evenly;
          }

/* ============================================
     ÉTAPES
     ============================================ */

/* Titre des étapes */
.title_steps {
     margin-top: 50px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: var(--bleu_foncer);
}

     .title_steps h2 {
          font-size: 48px;
     }

/* Conteneur étapes */
.container_step {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
}

     .container_step h4 {
          font-size: 30px;
     }

/* Section étape individuelle */
.section_steps {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     margin-top: 20px;
     height: 300px;
     position: relative;
     max-width: 1000px;
     margin: 0 auto;
     padding: 20px;
     color: #004a99;
}

/* ============================================
     CONTENEURS DE TEXTE ET NOMBRES
     ============================================ */

.wrapper_txt_number {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
}

     .wrapper_txt_number p {
          flex: 2;
          font-size: 1.1rem;
          line-height: 1.5;
     }

     .wrapper_txt_number h1 {
          flex: 1;
          font-size: 8rem;
          font-weight: 300;
          margin: 0;
          text-align: right;
     }

/* ============================================
     LIGNES DÉCORATIVES
     ============================================ */

.line_container {
     position: relative;
     margin-top: 20px;
     height: 60px;
     display: flex;
     justify-content: center;
     align-items: flex-end;
     width: 100%;
}

     .horizontal_line {
          width: 100%;
          height: 2px;
          background-color: #ccc;
          position: absolute;
          bottom: 0;
     }

/* ============================================
     IMAGES DÉCORATIVES
     ============================================ */

.city_image {
     z-index: 1;
     max-height: 100%;
     min-height: 100%;
     height: max-content;
}

.boussole {
     z-index: 1;
     max-height: 200%;
     min-height: 200%;
     height: max-content;
}

.forge {
     z-index: 1;
     max-height: 200%;
     min-height: 200%;
     height: max-content;
}

.tablette {
     z-index: 1;
     max-height: 150%;
     min-height: 150%;
     height: max-content;
}

.pc {
     z-index: 1;
     max-height: 150%;
     min-height: 150%;
     height: max-content;
}

.fusee {
     z-index: 1;
     max-height: 200%;
     min-height: 200%;
     rotate: 30deg;
     height: max-content;
}

/* ============================================
     UTILITAIRES
     ============================================ */

#reverse {
     flex-direction: row-reverse;
}

.cap_point {
     display: flex;
     flex-direction: row;
     align-items: center;
}

     .cap_point img {
          width: 50px;
     }

/* ============================================
     BOUTONS
     ============================================ */

.btn_contact_cap {
     display: inline-block;
     margin-top: 20px;
     padding: 10px 20px;
     background-color: var(--bleu_clair);
     color: var(--bleu_foncer);
     text-decoration: none;
     border-radius: 5px;
     font-size: 18px;
     margin-bottom: 30px;
     transition: all ease-in-out 0.3s;
     -webkit-transition: all ease-in-out 0.3s;
     -moz-transition: all ease-in-out 0.3s;
     -ms-transition: all ease-in-out 0.3s;
     -o-transition: all ease-in-out 0.3s;
}

     .btn_contact_cap:hover {
          background-color: var(--bleu_foncer);
          color: var(--bleu_clair);
     }

/* ============================================
     RESPONSIVE - Écrans petits (max 992px)
     ============================================ */

@media all and (max-width: 992px) {
     .main_propos {
          height: auto;
          padding-bottom: 20px;
     }

          .main_propos p {
               width: 80%;
          }

     .container_txt {
          flex-direction: column;
     }

          .section_txt {
               width: 80%;
          }

     .our_vision {
          flex-direction: column;
     }

          .our_vision .section_txt {
               width: 80%;
          }

               .our_vision .section_txt p {
                    width: 80%;
               }

     .title_steps h2 {
          font-size: 36px;
     }

     .wrapper_txt_number h1 {
          font-size: 5rem;
     }

     .city_image {
          max-height: 80%;
          min-height: 80%;
     }

     .container_step {
          gap: 60px;
     }

          .container_step h4 {
               font-size: 24px;
          }
}