/* Variables */
:root {
  --primary-color: #0a5c84;
  --secondary-color: #0097c2;
  --bg-light: #d9e8ed;
  --bg-lighter: #e5eef3;
  --white: #fff;
  --section-padding: 100px;
  --text-size: 1.6em;
  --title-size: 2.6em;
}

/* Styles communs pour toutes les sections */
.page-la-reunion {
  /* Reset margin */
  .c27-top-content-margin {
    margin-top: 0 !important;
    height: 0;
  }

  /* Styles communs pour les sections */
  [id^='section'] {
    height: 100vh;
    position: relative;

    /* Structure commune Elementor */
    > .elementor-container,
    > .elementor-container > .elementor-column,
    > .elementor-container > .elementor-column > .elementor-widget-wrap,
    > .elementor-container
      > .elementor-column
      > .elementor-element
      > .elementor-column-wrap,
    > .elementor-container
      > .elementor-column
      > .elementor-element
      > .elementor-column-wrap
      > .elementor-widget-wrap {
      /* display: block; */
      width: 100%;
      height: 100%;
    }

    /* Titre des sections */
     {
      width: 100%;

      h2 {
        font-weight: 400 !important;
        color: var(--primary-color);
        text-transform: uppercase;
        font-size: var(--title-size);
        padding: var(--section-padding) 0 20px;
        width: auto;
        display: inline-block;
        position: relative;
        z-index: 2;

        &:after {
          content: '';
          width: 70%;
          height: 1px;
          border-bottom: 2px solid currentColor;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }

    /* Layout commun */
    .section-img {
      display: inline-block !important;
      position: absolute;
      top: 55%;
      transform: translateY(-50%);
      height: auto !important;
      vertical-align: middle;
      text-align: right;
      padding-left: 10%;
    }

    .section-text {
      width: 52% !important;
      display: inline-block !important;
      position: absolute;
      top: 55%;
      right: 0;
      transform: translateY(-50%);
      height: auto !important;
      padding-left: 0;

      [class^='section'] {
        width: 80%;
        padding-left: 5%;
      }

      p,
      li {
        font-size: var(--text-size);
        color: var(--primary-color);
        margin-bottom: 10px;
        text-align: justify;
      }

      ul li {
        list-style: none;
      }
    }
  }
}

/* Styles spécifiques par section */
.page-la-reunion {
  #section1 {
    background: url('/wp-content/uploads/2020/06/la_reunion.png') center -50px /
      auto 100% no-repeat #fff;
    height: calc(100vh - 145px);
    overflow: hidden;
  }

  #section1b,
  #section3,
  #section5,
  #section8 {
    background: url('/wp-content/themes/b2b-immo/img/back-simu.jpg') top
      right/auto 100% no-repeat var(--bg-light);
    height: 100vh;
  }

  #section2 {
    background: url('/wp-content/themes/b2b-immo/img/back-apropos.jpg') top
      left/auto 100% no-repeat var(--bg-lighter);
    height: 100vh;
  }

  #section4 {
    background: url('/wp-content/themes/b2b-immo/img/back-section4.jpg') top
      left/auto 100% no-repeat var(--secondary-color);
    height: 100vh;
    h2,
    .section-text p,
    ul li {
      color: var(--white) !important;
    }
  }

  #section6 {
    background: url('/wp-content/themes/b2b-immo/img/back-section6.jpg')
      center/cover no-repeat var(--bg-light);
    height: 100vh;
  }

  #section7 {
    background: url('/wp-content/themes/b2b-immo/img/back-section7.jpg') top
      left/auto 100% no-repeat var(--white);
    height: 100vh;
  }

  #section1b {
    > .elementor-container {
      display: flex;
      flex-direction: column;
      height: 100%;

      /* Conteneur du titre */
      .title-row {
        height: auto !important;
      }

      /* Conteneur du contenu */
      > .elementor-row {
        position: relative;
        flex: 1;
      }
    }

    .section1b-carte {
      width: 50% !important;
      display: inline-block !important;
      position: absolute;
      top: 55%;
      transform: translateY(-50%);
      height: auto !important;
      vertical-align: middle;
      text-align: right;
      padding-right: 5%;
    }

    .section1b-text {
      width: 50% !important;
      display: inline-block !important;
      position: absolute;
      top: 55%;
      right: 0;
      transform: translateY(-50%);
      height: auto !important;
      padding-left: 0;

      .section1b-content {
        width: 65%;

        p,
        li {
          font-size: var(--text-size);
          color: var(--primary-color);
          margin-bottom: 10px;
          text-align: justify;
        }

        ul li {
          list-style: none;
        }
      }
    }
  }
}

/* Styles communs pour les titres de section */
.page-la-reunion {
  [id^='section'] {
    width: 100%;
    text-align: center;

    h2 {
      font-weight: 400 !important;
      color: var(--primary-color);
      text-transform: uppercase;
      font-size: var(--title-size);
      padding: var(--section-padding) 0 20px;
      width: auto;
      display: inline-block;
      position: relative;
      z-index: 2;

      &:after {
        content: '';
        width: 70%;
        height: 1px;
        border-bottom: 2px solid currentColor;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  /* Variations spécifiques des titres */
  #section4 h2 {
    color: var(--white) !important;

    &:after {
      border-bottom-color: var(--white);
    }
  }

  #section7 h2 {
    color: var(--primary-color) !important;

    &:after {
      border-bottom-color: var(--white);
    }
  }
}

/* Styles spécifiques pour section1 */
#section1 {
  .section1img {
    margin-top: -150px;
  }

  .section1txt {
    h3 {
      color: var(--primary-color);
      text-transform: uppercase;
      font-weight: 400;
      margin-bottom: 40px;

      &:after {
        content: '';
        display: block;
        width: 250px;
        height: 1px;
        border-bottom: 1px solid var(--primary-color);
        margin: 20px auto;
      }
    }

    ul li {
      list-style: none;
      color: var(--primary-color);
      margin-bottom: 10px;
    }
  }
}

/* Styles spécifiques pour les autres sections de texte */
.section1b-text .section1b-content,
.section2text,
.section3text,
.section4txt,
.section5text,
.section6txt,
.section7txt,
.section8txt {
  li {
    font-size: var(--text-size);
    text-align: justify;
    margin-bottom: 10px;
  }
}

/* Structure commune pour toutes les sections */
[id^='section'] {
  > .elementor-container {
    display: flex;
    flex-direction: column;
    height: 100%;

    /* Conteneur du titre */
    .title-row,
    .section-title {
      height: auto !important;
    }

    /* Conteneur du contenu */
    > .elementor-row {
      position: relative;
      flex: 1;
    }
  }

  /* Styles communs pour les images et textes */
  .section-img {
    width: 40% !important;
    display: inline-block !important;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    height: auto !important;
    vertical-align: middle;
    text-align: right;
    padding-left: 10%;
  }

  .section-text {
    width: 60% !important;
    display: inline-block !important;
    position: absolute;
    top: 55%;
    right: 0;
    transform: translateY(-50%);
    height: auto !important;
    padding-left: 0;

    [class*='section'] {
      width: 80%;
      padding-left: 5%;

      li {
        font-size: 1.6em;
        text-align: justify;
      }
    }
  }
}

/* Ajustements spécifiques */
#section1b .section1b-carte {
  width: 50% !important;
}
#section6 .section-text {
  width: 90% !important;
  left: 0;
}
#section2 .section-img,
#section8 .section-img {
  width: 48% !important;
}
#section8 {
  .section-img,
  .section-text {
    width: 50%;

    ul li {
      list-style: disc;
    }
  }
}