/* =========================================================================
   PAGE À PROPOS — template apropos.php
   Ref : maquette A PROPOS.pdf (06/10/2026)
   - tout le texte en petit (« mini »), titres entre deux filets
   - bio sur 1/3 à gauche, portrait 5:7 sur la moitié droite
   - titre → 4px → liste → 2 lignes vides → titre suivant
   - plusieurs sections côte à côte : rangée « 1/3, 1/3, 1/3 », titre +
     texte dans chaque colonne
   Grille de 6 colonnes : 1/3 = 2 colonnes, 1/2 = 3, 1/6 = 1.
   ========================================================================= */

.apropos {
  container-type: inline-size;
  --apropos-gap: var(--ds-space-tight);
  --apropos-line: var(--ds-line-mini);
  font-size: var(--ds-font-mini);
  line-height: var(--apropos-line);
  /* Contenu collé sous le header, comme les pages projet */
  padding-top: 0;
  padding-bottom: calc(var(--padding) * 1.75);
}

/* ---------- Rangées ------------------------------------------------------- */

.apropos-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--apropos-gap);
  align-items: start;
  height: auto;
  /* 2 lignes vides avant chaque section */
  margin-top: calc(2 * var(--apropos-line));
}
.apropos-row:first-child {
  margin-top: 0;
}
/* Titre → liste : 4px sous le filet du titre (comme Design / Recherche) */
.apropos-row--heading + .apropos-row {
  margin-top: 0.25rem;
}

.apropos-col {
  grid-column: span var(--span, 6);
  min-width: 0;
}

/* ---------- Texte --------------------------------------------------------- */

.apropos p,
.apropos h2,
.apropos h3 {
  margin: 0;
  font: inherit;
  font-family: 'mainFont', sans-serif;
  font-weight: normal;
  text-align: left;
}
/* Titres : même style que Design / Recherche et les projets —
   filet → 4px → titre → 4px → filet, sur la largeur de la colonne (1/1 =
   toute la page). */
.apropos h2,
.apropos h3 {
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  padding: 0.25rem 0;
}
/* Titre + texte dans une même colonne (ex. rangée « 1/3, 1/3, 1/3 » :
   Acquisitions | Résidences) : 4px sous le filet, comme entre deux rangées */
.apropos-col > :is(h2, h3) + * {
  margin-top: 0.25rem;
}
/* Titre placé sous un texte dans la même colonne : écart d'une section */
.apropos-col > * + :is(h2, h3) {
  margin-top: calc(2 * var(--apropos-line));
}
/* Les titres d'œuvres restent en romain, comme sur la maquette */
.apropos em {
  font-style: normal;
}
.apropos a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Images (portrait) -------------------------------------------- */

.apropos figure,
.apropos figure a {
  display: block;
}
.apropos figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: cover;
}

/* ---------- Intro : bio + contact | portrait ------------------------------
   Rangée « 1/2, 1/2 » : à gauche la bio, puis le texte du contact (sans titre) ;
   à droite le portrait. La bio occupe le tiers collé à l'image (aligné à
   droite), le contact le tiers de gauche, son bas aligné sur le bas de
   l'image. */
@media screen and (min-width: 600px) {
  .apropos-row--intro {
    align-items: stretch;
  }
  .apropos-row--intro > .apropos-col:not(:has(figure)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .apropos-row--intro > .apropos-col:not(:has(figure)) > * {
    width: calc((100cqw - 2 * var(--apropos-gap)) / 3);
  }
  /* bio : premier bloc, poussé contre l'image */
  .apropos-row--intro > .apropos-col:not(:has(figure)) > :first-child {
    align-self: flex-end;
  }
  /* contact (bloc suivant la bio) : poussé en bas de la colonne,
     sa dernière ligne alignée sur le bas de l'image */
  .apropos-row--intro > .apropos-col:not(:has(figure)) > :first-child + * {
    margin-top: auto;
  }
}
/* ---------- Mobile : une seule colonne ------------------------------------ */

@media screen and (max-width: 599px) {
  .apropos-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--apropos-line);
  }
  .apropos-col {
    grid-column: 1 / -1;
  }
  .apropos-col--empty {
    display: none;
  }
  /* Sections côte à côte (titre + texte par colonne) : empilées avec le
     même écart qu'entre deux sections */
  .apropos-row:has(.apropos-col > :is(h2, h3) + *) {
    row-gap: calc(2 * var(--apropos-line));
  }
  /* Intro : une ligne vide entre la bio et le contact */
  .apropos-row--intro .apropos-col > * + * {
    margin-top: var(--apropos-line);
  }
  /* Bio puis portrait : écart d'une gouttière fine */
  .apropos-row:has(figure) {
    row-gap: var(--apropos-gap);
  }
}