/* -------------------------------- */
/* ----  ARCHIVE RÉALISATIONS  ---- */
/* -------------------------------- */

/* Filtres */
.section-archive-realisation {
  padding: 6vh 0 10vh;
}
.section-archive-realisation__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 3rem;
  row-gap: 1rem;
  margin-bottom: 8vh;
}
.categorie-link {
  padding: .5rem 1rem;
  background:
    linear-gradient(var(--color-yellow) 0 0) 
    bottom /var(--d, 0) 2px 
    no-repeat;
  border-radius: 10px;
  color: var(--color-blue);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: .1rem;
  text-align: center;
  text-decoration: none;
}
.categorie-link:is(:hover,:active,:focus) {
  --d: calc(100% - 2rem);
}
.categorie-link.active {
  background-color: var(--color-yellow);
  font-weight: 600;
}

/* Grille */
.section-realisation__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 9vh;
}
.section-realisation__grid a {
  text-decoration: none;
}
.vignette-realisation {
  width: min(calc(100vw - 2rem),100%);
  margin-bottom: .75rem;
  padding: 2.5rem;
  gap: 0;
  justify-content: end;
}
.vignette-realisation__tag-block {
  display: flex;
  text-align: center;
}
.vignette-realisation__tag {
  padding: .5rem 1rem;
  color: var(--color-black);
  font-size: 1rem;
  text-transform: uppercase;
}
.vignette-realisation__tag:first-child {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-yellow);
  border-radius: 5px 0 0 5px;
  font-weight: 600;
}
.vignette-realisation__tag:last-child {
  background-color: var(--color-white);
  border-radius: 0 5px 5px 0;
  font-weight: normal;
}
.vignette-realisation>:not(.vignette-realisation__tag-block),
.vignette-realisation:is(:hover,:active,:focus) .vignette-realisation__tag {
  display: none;
}
.vignette-realisation:is(:hover,:active,:focus) {
  justify-content: center;
}
.vignette-realisation:is(:hover,:active,:focus)>:not(.vignette-realisation__tag-block) {
  display: block;
}
.vignette-realisation:is(:hover,:active,:focus) .vignette-metier__description {
  display: -webkit-box;
}
.vignette-realisation__soustitre {
  padding-bottom: 0;
  font-size: 1.25rem;
  font-weight: 300;
  text-transform: uppercase;
}
.vignette-realisation .vignette-metier__description {
  padding: 1rem 0 2rem;
}
.vignette-realisation__titre {
  font-size: 1.125rem;
  text-align: center;
  text-transform: uppercase;
}
/* Navigation */
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  font-size: 1.125rem;
}
.page-numbers {
  display: block;
  padding: .5rem;
  border-bottom: 3px solid transparent;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
.page-numbers.prev {
  transform: rotate(.5turn) translateY(.3rem);
}
.page-numbers.current {
  width: 2.25rem;
  background-color: var(--color-light);
  border-radius: 50%;
  font-weight: bold;
}
.page-numbers:not(.current,.prev,.next):is(:hover,:active,:focus) {
  border-bottom-color: var(--color-yellow);
}
@media (max-width: 900px) {
  .section-realisation__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
@media (max-width: 600px) {
  .categorie-link {
    max-width: min-content;
    background-color: var(--color-light);
    font-size: 1rem;
  }
  .vignette-realisation {
    padding: 1rem;
  }
  .vignette-realisation__tag {
    font-size: .8rem;
  }
  .vignette-realisation__soustitre--points {
    line-height: 1;
  }
  .vignette-realisation .vignette-metier__description {
    padding-bottom: .5rem;
  }
  .nav-links {
    gap: 1rem;
  }
}

/* -------------------------------- */
/* -----  SINGLE RÉALISATION  ----- */
/* -------------------------------- */

/* Header */
body.single-realisation .header {
  background-color: var(--color-blue);
}
body.single-realisation .header::after {
  display: none;
}
body.single-realisation .header__logo {
  border-radius: 0;
}
body.single-realisation .header__menu-list .menu-item a {
  text-shadow: none;
}

/* Section Hero */
.section-hero--single-realisation {
  background: transparent;
  color: var(--color-blue);
  padding: 20vh 0 10vh;
}
.section-hero__categorie {
  color: var(--color-yellow);
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: .05rem;
  text-align: center;
  text-transform: uppercase;
}
.section-hero__categorie::before,
.section-hero__categorie::after {
  font-size: 1.75rem;
  font-weight: 300;
}
.section-hero__categorie::before {
  padding-right: 1.25rem;
  content: "[ ";
}
.section-hero__categorie::after {
  padding-left: 1.25rem;
  content: " ]";
}

/* Section Réalisation */
.section-realisation {
  margin-bottom: 12vh;
}
.section-realisation__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-bottom: 4rem;
}
.section-realisation__liens {
  display: flex;
  max-width: max-content;
  padding: .5rem 1.5rem;
  background-color: var(--color-light);
  border-radius: 2rem;
  font-size: 1.125rem;
  font-weight: bold;
}
.section-realisation__liens a {
  text-decoration: none;
}
.section-realisation__liens--chevron {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.section-realisation__liens--chevron::before {
  display: block;
  height: 1.25rem;
  content: url('../images/chevron.svg');
  transform: rotate(.5turn);
}
.top-header-widgets {
  margin-bottom: -.5rem;
}
.btn--whatsapp {
  display: inline-block;
  width: 2.4rem;
  height: 2.5rem;
}
.btn--whatsapp svg {
  width: 30px;
  height: 30px;
}
.section-realisation__image {
  position: relative;
  height: min(80vh,634px);
}
.section-realisation__image img {
  height: 100%;
  margin: auto;
  border-radius: 1rem;
}
.section-realisation__image::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-light);
  border-radius: 1rem;
  content: "";
  transform: rotate(-2.5deg);
}

/* Section Description du projet */
.section-description-projet {
  padding: 10vh 0;
  background-color: var(--color-light);
}
.section-description-projet:has(+ .section-reassurance-contact) {
  margin-bottom: 5vh;
}
.section-description-projet .container {
  columns: 2;
  column-gap: 3rem;
}
.section-description-projet :is(h2,h3) {
  color: var(--color-dark);
  text-align: left;
}
.section-description-projet h2 {
  font-size: 2rem;
}
.section-description-projet h2::before,
.section-description-projet h2::after {
  font-size: 2.5rem;
}
.section-description-projet h3 {
    padding-bottom: .75rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
}
.section-description-projet h3 em {
  font-weight: 500;
}
.section-description-projet h3 strong {
  font-weight: 600;
}

/* Section Évolution du projet en images */
.section-evolution {
  display: grid;
  grid-template-columns: minmax(0,1fr);
}
.section-evolution__slider {
  grid-area: 1/1/1/1;
}
.section-evolution__slider__image {
  height: min(738px, 90vh);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.section-evolution__block {
  grid-area: 1/1/1/1;
  align-self: end;
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: center;
  padding: 3rem 0;
  background-color: #0000005E;
  color: var(--color-white);
}
.section-evolution__h3 {
  grid-column: 2;
  font-size: 1.5rem;
  font-weight: 300;
  text-transform: uppercase;
}
.section-evolution__h3 strong {
  display: block;
  font-size: 2rem;
  font-weight: 800;
}

/* Section Réalisations associées */
.section-realisations-associees {
  display: none;
  padding: 10vh 0 12vh;
  color: var(--color-dark);
}
.section-realisations-associees--bg {
  background: 
    linear-gradient(#162445D9, #162445D9),
    var(--bg-image, var(--color-blue));
  color: var(--color-white);
}
.section-realisations-associees:has(.section-realisations-associees__slide) {
  display: block;
}
.section-realisations-associees h2 {
  padding-bottom: 3rem;
}
.section-realisations-associees__content {
  display: grid;
  grid-template-columns: 5vw minmax(0,1fr) 5vw;
  column-gap: 2rem;
}
.section-realisations-associees__btn.section-metiers-slider__btn--prev {
  justify-self: start;
}
.section-realisations-associees__btn.section-metiers-slider__btn--next {
  justify-self: end;
}
.section-realisations-associees__slider {
  grid-column: 2;
}
.section-realisations-associees__slide a {
  text-decoration: none;
}
.section-realisations-associees__slide .vignette-metier {
  margin: auto;
}
.section-realisations-associees:not(.section-realisations-associees--bg) svg path {
  stroke: var(--color-dark);
}
@media (max-width: 1400px) {
  .section-realisations-associees__slide .vignette-metier {
    width: auto;
    margin: 0 .5rem;
  }
}
@media (max-width: 900px) {
  .section-hero--single-realisation {
    padding: 20vh 0 10vh;
  }
  .section-hero--single-realisation .h1 {
    padding-bottom: 1rem;
  }
  .section-realisation__liens a {
    font-size: .9rem;
  }
  .section-realisation__image {
    height: unset;
  }
  .section-realisation__image::before {
    transform: rotate(-5deg);
  }
  .section-description-projet .container {
    columns: 1;
  }
  .section-evolution__slider__image {
    height: 50vh;
    background-size: cover;
  }
  .section-evolution__block {
    padding: 1rem 0;
  }
  .section-evolution__h3 {
    font-size: 1rem;
    letter-spacing: .05rem;
  }
  .section-evolution__h3 strong {
    font-size: 1.125rem;
  }
  .section-realisations-associees__slide .vignette-metier {
    width: unset;
  }
}