@margin-line-image: 2em;
.black .bio ul.biography {
  li .texte {
    p, .h3 {
      color:@white;
    }
  }
  &::after {
    background-color:@white;
  }
  &::before {
    background-color:@white;
  }
}

body.open .bio ul.biography{
  > li .texte h2 {
    font-size:12em;
  }
  &:before {
    margin-left:@menuWidth * .5;
  }
}

.cursorOut .bio ul.biography:before {
  width: 0em;
  height: 0em;
}

.bio:last-child {
  ul.biography {
    margin-bottom: 0;
  }
}

.page_rubrique_1 {
  .parent-container-iframe {
    width:50%;
    margin:0 auto;
    & + a {
      display: block;
      float: none;
      max-width: 370px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

.bio {
  h2, .h3 {
    display:block;
  }

  ul.biography {
    position:relative;
    // margin-top:-16em;
    display:block;
    padding: 25em 0 30em;
    @max-width-image-size:600px;

    &::before {
      position: fixed;
      content:' ';
      left:50%;
      top:50%;
      width:2em;
      height:2em;
      transform:translateX(-50%) translateY(-50%);
      transition:all 450ms ease-in-out;
      border-radius: 100%;
      z-index: 10;
      background-color:@black;
    }

    &::after {
      position: absolute;
      content:' ';
      left:50%;
      top:0;
      width:1px;
      height:100%;
      background-color:@black;
    }

    > li {
      position:relative;
      width:50%;
      margin-top:17em;
      padding:0;
      &:first-child{
        margin-top:0;
      }
      p {
        max-width: 580px;
      }
      &.force {
        margin-top:1em;
      }
      &.forceRight,
      &.forceLeft {
        margin-top:10em;
        position: relative;
        ul {
          
          li {
            margin-bottom:1em;
          }
        }
        a {
          padding:.75em;
          display:inline-flex;
          h4 {
            font-size: 1.25em;
          }
          img {
            width:10em;
            height:auto;
          }
        }
        &:not(.force)::before {
          position: absolute;
          content:' ';
          left:0%;
          top:50%;
          width:2em;
          height:2em;
          transform:translateX(-50%) translateY(-50%);
          border-radius: 100%;
          z-index: 11;
          border:1px solid @orange;
        }
      }
      &.forceLeft {
        padding-right:0;
        padding-left:1.5em;
        a {
          border: 1px solid transparent;
          img {
            margin-right:.5em;
          }
        }
        ul li:hover a {
          border-color:@orange;
        }
      }
      &.forceRight {
        padding-right:1.5em;
        margin-left:0;
        &:hover a {
          background-color:@orange;
          color:@black;
        }
        a {
          border:1px solid @orange;
          img {
            margin-left:.5em;
          }
        }
        &:not(.force)::before {
          left:inherit;
          left:100%;
          background:@orange;
          border:none;
        }
      }
      &:nth-child(odd) {
        text-align:right;
        .image {
          left:100%;
          transform:translateY(-50%);
          margin-left: @margin-line-image;
        }
        p, .h3 {
          left:150%;
        }
        p {
          margin-left: auto;
        }
      }
      &.forceLeft,
      &:nth-child(even) {
        text-align: left;
        left:50%;
        .image {
          right:100%;
          transform:translateY(-50%);
          margin-right: @margin-line-image;
        }
        p, .h3 {
          left:-150%;
        }
        p {
          margin-right: auto;
        }
      }

      .image {
        position: absolute;
        top:50%;
        width:0%;
        overflow: hidden;
        transition: all 450ms ease-out;
        img {
          position: relative;
          width:@max-width-image-size;
          height:auto
        }
      }

      .texte {
        padding:1em 2em;
        overflow: hidden;
        position: relative;
        h2 {
          margin:0;
          font-size: 15em;
          span {
            letter-spacing: -.05em;
            display: block;
            transition: padding 450ms ease-in-out;
            padding-right:0;
            line-height: .8;
          }
        }
        p,
        .h3 {
          transition:all 1s ease-in-out;
          color:@black;
        }
        .h3 {
          line-height:1;
          font-size: 1.6em;
          margin-bottom:.5em;
          position: relative;
        }
        p {
          position: relative;
          margin-top:1.5em;
          transition-delay: 250ms;
        }
      }
      &.active {
        .image {
          width: @max-width-image-size;
        }
        .texte {
          .h3,
          p {
            left:0;
          }
        }
      }
    }
  }
}