@charset "UTF-8";
@import url("https://use.typekit.net/mfn0qbw.css");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");
/*
Styles du custom post type "Project" (réalisations)
Inclure les media queries ensuite dans ce même fichier
*/
#header-projet-single .wp-block-image {
  aspect-ratio: 1 / 1;
}

#header-projet-single .wp-block-column:has(ul) {
  display: flex;
  flex-direction: column;
}

#header-projet-single ul {
  margin-top: auto;
}

#header-projet-single ul li {
  border-bottom: 1px solid black;
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

#header-projet-single ul li span:first-child {
  flex-shrink: 0;
}

#header-projet-single ul li span:last-child {
  text-align: right;
}

.project-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 48px 0;
  margin: 0 auto;
  gap: 32px;
}

.project-navigation a {
  text-decoration: none;
  color: black;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: opacity 0.3s ease;
}

.project-navigation a:hover {
  opacity: 0.6;
}

.project-navigation .nav-prev {
  text-align: left;
}

.project-navigation .nav-prev .nav-arrow {
  transform: rotate(180deg);
}

.project-navigation .nav-next {
  text-align: right;
  margin-left: auto;
}

.project-navigation .nav-arrow {
  mask: url(img/button-arrow.svg) no-repeat center center;
  background-color: black;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: all .3s ease;
}

.project-navigation .nav-title {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
}

.project-navigation .nav-prev-placeholder {
  width: 0;
}

.single-projets .wp-block-group:has(.project-navigation) {
  position: sticky;
  bottom: 0;
  background-color: #F4F1EC;
  z-index: 100;
}

.single-projets .wp-block-group:has(.project-navigation) > .wp-block-group__inner-container {
  padding-bottom: 0;
}

.single-projets .wp-block-group:has(.project-navigation) .project-navigation {
  padding: 24px 0;
}

#header-projet-archive .wp-block-columns .wp-block-column:first-child {
  flex-basis: 25%;
  flex-grow: 0;
}

#header-projet-archive .wp-block-columns .wp-block-column:last-child .wp-block-image {
  aspect-ratio: 16 / 9;
}

#header-projet-archive .wp-block-columns .wp-block-column:last-child .wp-block-image img {
  min-height: unset;
}

body.archive.tax-projets_taxonomy .taxonomy-child-container + .taxonomy-child-container {
  margin-top: 128px;
}

body.archive.tax-projets_taxonomy .taxonomy-child-container-header {
  display: flex;
  align-items: center;
  gap: 32px;
}

body.archive.tax-projets_taxonomy .taxonomy-child-container-header h2 {
  flex-shrink: 0;
  margin: 0 !important;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 80px;
  margin-top: 48px;
}

.project-list .wp-block-image {
  aspect-ratio: 3 / 4;
  margin: 0 auto;
}

.project-list .wp-block-image img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project-list a {
  text-decoration: none;
  color: black;
}

.project-list .project-title {
  font-size: 60px;
  line-height: 72px;
}

.project-list article {
  margin-top: 160px;
  position: relative;
}

.project-list article .project-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-100%);
  padding-bottom: 16px;
}

.project-list article:nth-of-type(3n + 2) {
  margin-top: 440px;
}

.project-list .project-meta {
  display: grid;
  grid-template-columns: 1fr 30%;
  gap: 0 64px;
  margin-top: 24px;
}

.project-list .project-meta span:last-child {
  text-align: right;
}

@media only screen and (max-width: 1230px) {
  #header-projet-archive .wp-block-columns .wp-block-column:first-child {
    flex-basis: 30%;
    min-width: 300px;
  }
  .project-list {
    margin-top: 0px;
  }
  .project-list .project-title {
    font-size: 42px;
    line-height: 56px;
  }
  .project-list article {
    margin-top: 128px;
  }
  .project-list article:nth-of-type(3n + 2) {
    margin-top: 300px;
  }
}

@media only screen and (max-width: 1024px) {
  .project-list .project-title {
    font-size: 32px;
    line-height: 40px;
  }
  body.archive.tax-projets_taxonomy .taxonomy-child-container + .taxonomy-child-container {
    margin-top: 80px;
  }
  .project-list .project-meta {
    gap: 8px 32px;
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column-reverse;
  }
  .project-list .project-meta span:last-child {
    text-align: left;
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }
  .project-list article {
    margin-top: 96px;
  }
  .project-list article:nth-of-type(3n + 2) {
    margin-top: 200px;
  }
  .project-list {
    gap: 16px 40px;
  }
}

@media only screen and (max-width: 768px) {
  #header-projet-archive .wp-block-columns .wp-block-column:first-child {
    flex-basis: 50%;
  }
  .project-list {
    grid-template-columns: 1fr 1fr;
  }
  .project-list article:nth-of-type(3n + 2) {
    margin-top: 96px;
  }
  .project-list article:nth-of-type(2n) {
    margin-top: 200px;
  }
}

@media only screen and (max-width: 550px) {
  body.archive.tax-projets_taxonomy .taxonomy-child-container-header {
    display: block;
  }
  body.archive.tax-projets_taxonomy .taxonomy-child-container-header hr {
    width: 100%;
  }
  body.archive.tax-projets_taxonomy .taxonomy-child-container-header h2 {
    flex-shrink: 1;
  }
  body.archive.tax-projets_taxonomy .taxonomy-child-container-header + .project-list {
    margin-top: 24px;
  }
  .taxonomy-child-anchors + .taxonomy-child-container {
    margin-top: 48px;
  }
  h1 + * {
    margin-top: 16px;
  }
}

@media only screen and (max-width: 440px) {
  .project-list {
    grid-template-columns: 1fr;
    grid-gap: 48px;
  }
  .project-list article {
    margin-top: 0 !important;
  }
  .project-list article .project-title {
    position: static;
    transform: none;
  }
  body.archive.tax-projets_taxonomy .taxonomy-child-anchors a {
    padding: 4px 8px;
  }
  #header-projet-single ul {
    margin-top: 24px;
  }
  .project-navigation {
    padding: 32px 0;
    gap: 16px;
    flex-direction: column;
  }
  .project-navigation .nav-prev,
  .project-navigation .nav-next {
    width: 100%;
    text-align: center;
    margin-left: 0;
    justify-content: center;
  }
  .project-navigation .nav-title {
    font-size: 16px;
  }
}