@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
  --filmm-primary: #FFFBF9;
  --filmm-light: #FFFFFF;
  --filmm-lighter-grey: #f5f5f5;
  --filmm-light-grey: #E3E3E3;
  --filmm-grey: #8C7883;
  --filmm-dark: #322A2E;
  --filmm-accent-orange: #F8630C;
  --filmm-accent-light-orange: #f87123;
  --filmm-accent-yellow: #FFC502;
  --filmm-accent-blue: #128789;
  --filmm-accent-red: #D03438;
  --filmm-background: var(--filmm-light);
  --filmm-text-color: var(--filmm-dark);
  --filmm-accent-color: var(--filmm-accent-orange);
  --filmm-accent2-color: var(--filmm-light-grey);



  --filmm-title-size: calc(38px * 0.8);
  --filmm-subtitle-size: calc(34px * 0.8);
  --filmm-hero-size: calc(22px * 0.8);
  --filmm-btn-size: calc(16px * 0.8);
  --filmm-text-size: calc(16px * 0.8);
  @media (min-width: 750px) {
    --filmm-title-size: calc(40px * 0.8);
    --filmm-subtitle-size: calc(38px * 0.8);
    --filmm-hero-size: calc(24px * 0.8);
    --filmm-btn-size: calc(22px * 0.8);
    --filmm-text-size: calc(18px * 0.8);
  }
  @media (min-width: 1024px) {
    --filmm-title-size: calc(48px * 0.8);
  }
  @media (min-width: 1400px) {
    --filmm-title-size: calc(54px * 0.8);
    --filmm-subtitle-size: calc(48px * 0.8);
    --filmm-btn-size: calc(28px * 0.8);
    --filmm-hero-size: calc(28px * 0.8);
    --filmm-text-size: calc(24px * 0.8);
  }

  @media (min-width: 1675px) {
    --filmm-title-size: calc(64px * 0.8);
  }
}

.back-primary, .hover-primary:hover {
  --filmm-background: var(--filmm-primary);
  --filmm-text-color: var(--filmm-dark);
  --filmm-texttitlecolor: var(--filmm-accent-orange);
  --filmm-accent2-color: var(--filmm-light-grey)
}
.back-light, .hover-light:hover {
  --filmm-background: var(--filmm-light);
  --filmm-text-color: var(--filmm-dark);
  --filmm-accent-color: var(--filmm-accent-orange);
  --filmm-accent2-color: var(--filmm-light-grey)
}
.back-grey, .hover-grey:hover {
  --filmm-background: var(--filmm-lighter-grey);
  --filmm-text-color: var(--filmm-dark);
  --filmm-accent-color: var(--filmm-accent-orange);
  --filmm-accent2-color: var(--filmm-light-grey)
}
.back-accent-orange, .hover-accent-orange:hover {
  --filmm-background: var(--filmm-accent-orange);
  --filmm-text-color: var(--filmm-light);
  --filmm-accent-color: var(--filmm-light);
  --filmm-accent2-color: var(--filmm-accent-red)
}
.back-accent-light-orange, .hover-accent-light-orange:hover {
  --filmm-background: var(--filmm-accent-light-orange);
  --filmm-text-color: var(--filmm-light);
  --filmm-accent-color: var(--filmm-light);
  --filmm-accent2-color: var(--filmm-accent-red)
}
.back-accent-yellow, .hover-accent-yellow:hover, .back-accent-jaune, .hover-accent-jaune:hover {
  --filmm-background: var(--filmm-accent-yellow);
  --filmm-text-color: var(--filmm-dark);
  --filmm-accent-color: var(--filmm-dark);
  --filmm-accent2-color: var(--filmm-light-grey)
}
.back-accent-blue, .hover-accent-blue:hover {
  --filmm-background: var(--filmm-accent-blue);
  --filmm-text-color: var(--filmm-light);
  --filmm-accent-color: var(--filmm-light);
  --filmm-accent2-color: var(--filmm-light-grey)
}
.back-accent-red, .hover-accent-red:hover, .back-accent-rouge, .hover-accent-rouge:hover {
  --filmm-background: var(--filmm-accent-red);
  --filmm-text-color: var(--filmm-light);
  --filmm-accent-color: var(--filmm-light);
  --filmm-accent2-color: var(--filmm-light-grey)
}

.filmm-btn {
  margin: 0 auto;
  min-width: min(100%, 250px);
  text-align: center;
  display: inline-block;
  padding: 10px 12px;
  background-color: var(--filmm-background);
  color: var(--filmm-text-color)!important;
  font-size: var(--filmm-btn-size);
  font-weight: 700;
  width: fit-content;
  text-decoration: none !important;
  transition: color .15s, background-color .15s;
  @media (min-width: 1400px) {
    padding: 19px 16px;
  }
}

body:has(.home-hero) #main-container {
  padding: 0;
}
.home-hero {
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  justify-content: end;
  background-color: var(--filmm-light);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  ._content {
    background-color: #8B7784B2;
    color: var(--filmm-light);
    padding: 45px 55px;
  }
  ._title {
    text-transform: uppercase;
    font-size: var(--filmm-subtitle-size);
    font-weight: 700;
  }
  ._subtitle {
    font-weight: 600;
    font-size: var(--filmm-hero-size);
  }
  ._ctas {
    display: flex;
    flex-direction: column;
    gap: 20px;
    @media (min-width: 500px) {
      flex-direction: row;
      gap: 50px;
    }
    .filmm-btn {
      margin: 0;
    }
  }
}

.page-section {
  padding: 36px 0;
  background-color: var(--filmm-background);
  color: var(--filmm-text-color);

  @media (min-width: 1150px) {
    padding-left: calc((100vw - 1210px) / 2);
    padding-right: calc((100vw - 1210px) / 2);
  }
  .row {
    margin: 0;
    @media (max-width: 990px) {
      display: block;
    }
  }
  @media (min-width: 6500px) {
    padding: 72px 50px;
  }
  &.colored-article-section {
    @media (min-width: 650px) {
      padding-left: 165px;
      padding-right: 165px;
    }
    @media (min-width: 1150px) {
      padding-left: calc((100vw - 1110px) / 2);
      padding-right: calc((100vw - 1110px) / 2);
    }
  }
}


.page-section-title {
  padding: 0 24px;
  font-size: var(--filmm-subtitle-size);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 48px;
}

.article-column {
  padding: 0 64px;
  &:not(:nth-child(3n)) {
    border-right: 4px solid var(--filmm-accent2-color);
  }
}
.colored-article-column {
  padding: 0 15px;
  @media (max-width: 1200px) {
    padding-bottom: 30px;

  }
}


.article-teaser {
  display: flex;
  flex-direction: column;
  height: 100%;
  @media (max-width: 1200px) {
    padding-bottom: 42px;
  }


  ._title {
    font-size: var(--filmm-subtitle-size);
    font-weight: 700;
    color: var(--filmm-accent-color);
    margin-bottom: 12px;
  }
  ._excerpt {
    font-size: var(--filmm-text-size);
    font-weight: 600;
    margin-bottom: 45px;
  }
  ._subtitle {
    font-size: var(--filmm-text-size);
    font-weight: 900;
    margin-bottom: 12px;
  }
  ._link {
    margin-top: auto;
    --filmm-background: var(--filmm-grey);
    --filmm-text-color: var(--filmm-light);
    &:hover {
      --filmm-background: var(--filmm-accent-yellow);
      --filmm-text-color: var(--filmm-light);
    }
  }
  ._thumbnail {
    width: 100%;
    aspect-ratio: 1.9;
    object-fit: cover;
    object-position: center;
    margin-bottom: 60px;
    margin-top: auto;
    + ._link {
      margin-top: 0;
    }
  }
}

.colored-teaser {
  background-color: var(--filmm-background);
  color: var(--filmm-text-color);

  ._thumbnail {
    aspect-ratio: 2;
    height: auto;
    object-fit: cover;
    margin: 0;
  }
  ._content {
    padding: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 0;
      border:40px solid transparent;
      border-bottom:  32px solid var(--filmm-background);
      left: 60px;
      top: -72px;
    }
  }
}

.about-section {
  display: flex;
  align-items: start;
  gap: 120px;
  padding: 0 48px;
  flex-direction: column;
  @media (min-width: 650px) {
    padding: 0 128px;
  }
  @media (min-width: 850px) {
    flex-direction: row;
  }
  ._title {
    margin-bottom: 38px;
    padding: 0;
    text-align: left;
  }
  ._thumbnail {
    width: 188px;
  }
  ._content {
    ._description {
      font-weight: 600;
      font-size: var(--filmm-text-size);
      margin-bottom: 60px;
    }
    ._link {
      margin-top: auto;
      --filmm-background: var(--filmm-grey);
      --filmm-text-color: var(--filmm-light);
      &:hover {
        --filmm-background: var(--filmm-accent-yellow);
        --filmm-text-color: var(--filmm-light);
      }
    }
  }
}