@import 'fonts.scss';

$body-margin-x: 10px;
$body-margin-y: 5px;

$sm-font-size: 0.8rem;

$main-color: #1a1918;
$main-color-light: #635b58;
$light-color: #faf1eb;

body{
  font-family: Marianne, sans-serif;
  color: $main-color;
  margin: 0;
  padding: 0;
  header {
    z-index: 2;
    position: relative;
    > div {
      padding: $body-margin-y $body-margin-x 0 $body-margin-x;
      display: grid;
      grid-template-columns: repeat(16, 1fr);
      > #block-caravane-logorepublique {
        grid-column: 1 / span 1;
        display: flex;
        align-items: center;
        > div > div > a > img {
          width: 100%;
          height: auto;
        }
      }
      > #block-caravane-logoepau {
        grid-column: 2 / span 2;
        display: flex;
        align-items: center;
        > div > div > a > img {
          width: 100%;
          height: auto;
        }
      }
      > #block-caravane-logocaravane {
        grid-column: 7 / span 4;
        display: flex;
        align-items: center;
        > div > div > a > img {
          width: 100%;
          height: auto;
        }
      }
      > #block-caravane-mainnavigation {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-column: 16 / span 1;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        > h2 {
          margin-block: 0;
          font-size: $sm-font-size;
          color: $main-color-light;
          font-weight: normal;
          margin-bottom: 5px;
        }
        > #hamburger {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          > div {
            width: 40%;
            height: 3px;
            margin: 4px 0;
            border-radius: 2px;
            background-color: $main-color-light;
          }
        }
        > ul {
          display: none;
        }
      }
    }
  }
  main {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    > .layout-content {
      z-index: 1;
      position: relative;
      > div > .layout {
        display: grid;
        grid-template-columns: repeat(16,1fr);
        height: 100vh;
        align-items: center;
        > .layout__region--first {
          padding-left: $body-margin-x;
          grid-column: 1 / span 4;
          position: relative;
          z-index: 2;
          pointer-events: none;
          width: fit-content;
          > div {
            pointer-events: auto;
          }
        } 
        > .layout__region--second {
          position: absolute;
          z-index: 1;
          width: 100vw;
          height: 100vh;
        } 
        > .layout__region--third {
          padding-right: $body-margin-x;
          grid-column: 13 / span 4;
          position: relative;
          z-index: 2;
          background: linear-gradient(to right, transparent, #faf1eb);
          height: 100vh;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          pointer-events: none;
          > div {
            pointer-events: auto;
          }
        } 
      }
    }
    > #etape-modale {
      z-index: 2;
      position: absolute;
      top: 10vh;
      left: 25vw;
      width: 50vw;
      height: 80vh;
      background-color: rgba(255,255,255,0.5);
    }
  }
}