.focus-grid {
  width: min(100%, var(--max-content-width));
  margin-inline: auto;
  padding: 0 var(--page-padding) clamp(40px, 7vw, 86px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--linked-grid-gap);
}

.focus-grid--tight-bottom {
  padding-bottom: clamp(16px, 2.5vw, 32px);
}

.focus-grid-text {
  width: 100%;
  padding: clamp(18px, 2.6vw, 34px);
  display: grid;
}

.focus-grid-copy {
  max-width: 42ch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  place-self: start start;
}

.focus-grid-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.focus-grid-cta:hover,
.focus-grid-cta:focus-visible {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: #fff;
  outline: none;
}

@media (min-width: 760px) {
  .focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .focus-grid .presentation-element {
    aspect-ratio: 4 / 3;
  }

  .focus-grid--text-bottom-right .presentation-element:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .focus-grid--text-bottom-right .presentation-element:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .focus-grid--text-bottom-right .presentation-element:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .focus-grid--text-bottom-right .focus-grid-text {
    grid-column: 2;
    grid-row: 2;
  }

  .focus-grid--text-bottom-right .focus-grid-copy {
    place-self: start start;
    text-align: left;
    align-items: flex-start;
  }

  .focus-grid--text-bottom-left .presentation-element:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .focus-grid--text-bottom-left .presentation-element:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .focus-grid--text-bottom-left .presentation-element:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .focus-grid--text-bottom-left .focus-grid-text {
    grid-column: 1;
    grid-row: 2;
  }

  .focus-grid--text-bottom-left .focus-grid-copy {
    place-self: start end;
    text-align: right;
    align-items: flex-end;
  }

  .focus-grid--text-top-right .presentation-element:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .focus-grid--text-top-right .presentation-element:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .focus-grid--text-top-right .presentation-element:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .focus-grid--text-top-right .focus-grid-text {
    grid-column: 2;
    grid-row: 1;
  }

  .focus-grid--text-top-right .focus-grid-copy {
    place-self: end start;
    text-align: left;
    align-items: flex-start;
  }

  .focus-grid--text-top-left .presentation-element:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
  }

  .focus-grid--text-top-left .presentation-element:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .focus-grid--text-top-left .presentation-element:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .focus-grid--text-top-left .focus-grid-text {
    grid-column: 1;
    grid-row: 1;
  }

  .focus-grid--text-top-left .focus-grid-copy {
    place-self: end end;
    text-align: right;
    align-items: flex-end;
  }
}

/* Variante "urbanisme" : plusieurs composants de documents au format
   papier, comme des planches posees sur une table. Portrait (21 x 29,7)
   par defaut ; ajouter la classe "focus-grid--paper-landscape" pour des
   documents au format paysage (29,7 x 21) a la place — moins de colonnes,
   les documents ayant besoin de plus de largeur chacun.
   - .focus-grid-photos (seule) : rangee de documents, suivie d'un
     .focus-grid-text en pleine largeur en dessous.
   - .focus-grid-photos--thirds : grille a colonnes egales, le dernier
     emplacement etant un .focus-grid-text au lieu d'un document
     (documents donc plus grands que dans la rangee du dessus). */
.focus-grid--paper-row {
  /* Annule le passage a 2 colonnes du focus-grid standard (@media plus
     haut) : ici les composants s'empilent, chacun gere ses propres
     colonnes internes. */
  grid-template-columns: 1fr;
  --focus-grid-paper-columns: 2;
  --focus-grid-paper-thirds-columns: 3;
  /* Espace avec le tableau d'informations generales au-dessus : sans
     galerie entre les deux sur les pages urbanisme, il n'y avait plus
     rien pour les separer. */
  padding-top: clamp(30px, 4vw, 56px);
}

@media (min-width: 760px) {
  .focus-grid--paper-row {
    --focus-grid-paper-columns: 4;
  }
}

.focus-grid--paper-row.focus-grid--paper-landscape {
  --focus-grid-paper-columns: 1;
  --focus-grid-paper-thirds-columns: 1;
}

@media (min-width: 760px) {
  .focus-grid--paper-row.focus-grid--paper-landscape {
    --focus-grid-paper-columns: 2;
    --focus-grid-paper-thirds-columns: 2;
  }
}

.focus-grid--paper-row .focus-grid-photos {
  display: grid;
  grid-template-columns: repeat(var(--focus-grid-paper-columns), minmax(0, 1fr));
  gap: var(--linked-grid-gap);
}

/* Le cadre s'adapte a la taille de l'image (plus de ratio impose, plus de
   recadrage) : on sort du positionnement absolu par defaut de
   .presentation-element pour laisser l'image dicter la hauteur de sa
   cellule dans la grille. */
.focus-grid--paper-row .presentation-element {
  position: static;
  aspect-ratio: auto;
}

.focus-grid--paper-row .presentation-element img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: initial;
  display: block;
}

.focus-grid--paper-row .focus-grid-photos--thirds {
  grid-template-columns: repeat(var(--focus-grid-paper-thirds-columns), minmax(0, 1fr));
  /* Espace supplementaire par rapport au texte du composant precedent,
     au-dela du gap uniforme de .focus-grid, pour bien separer les deux
     composants. */
  margin-top: clamp(24px, 4vw, 56px);
}

@media (max-width: 759px) {
  .focus-grid--paper-row .focus-grid-photos--thirds {
    grid-template-columns: 1fr;
  }
}

/* Autre variante de 2e composant : un "tableau" de 4 documents en 2x2 a
   gauche, le texte occupant tout le cote droit (au lieu d'un document
   parmi d'autres dans une rangee a colonnes egales). */
.focus-grid--paper-row .focus-grid-photos--grid-2x2 {
  display: grid;
  /* Le tableau 2x2 prend plus de place que le texte (visuels plus grands,
     colonne de texte plus etroite) au lieu d'un partage a parts egales. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--linked-grid-gap);
  margin-top: clamp(24px, 4vw, 56px);
}

.focus-grid--paper-row .focus-grid-photos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--linked-grid-gap);
}

/* Les 4 documents du tableau restent carres, quelle que soit l'orientation
   (portrait/paysage) du reste de la page : contrairement au reste de la
   variante "urbanisme", le cadre est ici impose (pas adapte a l'image), on
   retrouve donc le recadrage "cover" en position absolue. */
.focus-grid--paper-row .focus-grid-photos-grid .presentation-element {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
}

.focus-grid--paper-row .focus-grid-photos-grid .presentation-element img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 759px) {
  .focus-grid--paper-row .focus-grid-photos--grid-2x2 {
    grid-template-columns: 1fr;
  }
}

/* Texte en pleine largeur sous une rangee simple de documents (composant
   sans variante) : plus large que le texte standard du site (42ch), pour
   profiter de l'espace disponible sur une page urbanisme. */
.focus-grid--paper-row > .focus-grid-text .focus-grid-copy {
  max-width: 75ch;
}

/* Texte insere directement comme derniere case d'une grille de documents
   (ex. 4e case d'un 2x2 : 3 documents + le texte), plutot qu'en dessous ou
   a cote : pas de plafond de largeur en caracteres, occupe toute sa
   cellule, centre verticalement sur la hauteur de la rangee. */
.focus-grid--paper-row
  .focus-grid-photos:not(.focus-grid-photos--thirds):not(.focus-grid-photos--grid-2x2)
  > .focus-grid-text {
  align-content: center;
}

.focus-grid--paper-row
  .focus-grid-photos:not(.focus-grid-photos--thirds):not(.focus-grid-photos--grid-2x2)
  > .focus-grid-text
  .focus-grid-copy {
  max-width: none;
}

/* Exception ponctuelle : certains documents (ex. les axonometries de la
   page Vandoeuvre) portent une legende qu'un recadrage "cover" couperait.
   Le cadre s'adapte alors a la taille de l'image, comme sur les pages
   urbanisme, au lieu du recadrage carre/4:3 impose par defaut. */
.focus-grid--photos-uncropped .presentation-element {
  position: static;
  aspect-ratio: auto;
}

.focus-grid--photos-uncropped .presentation-element img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: initial;
}