/* PROTECTO — « Nos réalisations » (accueils FR et EN).
   Le balisage est généré par scripts/photos-site.mjs (pnpm photos) ; cette feuille
   ne fait que le mettre en forme, avec les jetons de site.css. Sans JavaScript.
   Grille : 3 colonnes dès 900 px, 2 dès 600 px, 1 en dessous. Une paire avant/après
   occupe 2 colonnes (vues côte à côte), une série de 3 vues toute la largeur ;
   sous 600 px, les vues s'empilent, l'avant toujours au-dessus de l'après. */

.rea__groupe + .rea__groupe {
  margin-top: clamp(40px, 5vw, 64px);
}
.rea__categorie {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  font-size: clamp(26px, 3vw, 34px);
}
.rea__categorie::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

.rea__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rea__item {
  min-width: 0;
}
.rea__item--paire {
  grid-column: span 2;
}
.rea__item--serie {
  grid-column: 1 / -1;
}

.rea__fig {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background: var(--ink-3);
  border: 1px solid var(--line);
}
/* Vues côte à côte ; l'interstice laisse voir un trait jaune entre l'avant et l'après. */
.rea__vues {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  background: var(--yellow);
}
.rea__vue {
  position: relative;
  min-width: 0;
  background: var(--ink-4);
}
.rea__vue picture {
  display: block;
}
.rea__vue img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.rea__etiquette {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  max-width: calc(100% - 24px);
  padding: 7px 12px 6px;
  background: rgba(10, 10, 12, 0.84);
  color: var(--text);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.rea__etiquette--apres {
  background: var(--yellow);
  color: #0a0a0c;
}
.rea__etiquette--droite {
  left: auto;
  right: 12px;
}

.rea__legende {
  flex: 1;
  padding: 16px 18px 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.rea__legende strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-family: var(--display);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (max-width: 899px) {
  .rea__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  .rea__grille {
    grid-template-columns: minmax(0, 1fr);
  }
  .rea__item--paire {
    grid-column: auto;
  }
  .rea__vues {
    grid-auto-flow: row;
  }
  .rea__etiquette {
    top: 10px;
    left: 10px;
    font-size: 14px;
  }
  .rea__etiquette--droite {
    left: auto;
    right: 10px;
  }
}
@media (forced-colors: active) {
  .rea__etiquette {
    border: 1px solid CanvasText;
  }
}