/* À propos. Loaded after site.css.
   Page layout only: az-narrative, az-values, az-network / az-partner, az-zone.
   Shared parts come from site.css: az-pagehead--media, az-statement (with
   __cols), az-quote, az-contact, az-form, az-visually-hidden. */

/* ---------- Narrative: one photo, a heading and steps told as prose ---------- */
.az-narrative { padding-block: var(--s-5) var(--s-7); }

.az-narrative__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-5) var(--gap);
  align-items: center;
}
.az-narrative__photo { grid-column: 1 / 6; }
.az-narrative__photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% 50%; }
.az-narrative__text { grid-column: 7 / 13; }
.az-narrative__steps { margin-top: var(--s-4); }
.az-narrative__word {
  font-size: var(--t-xl);
  font-style: italic;
  margin-top: var(--s-4);
}
.az-narrative__word:first-child { margin-top: 0; }
.az-narrative__steps p { margin-top: var(--s-1); color: var(--c-ink-soft); }

/* ---------- Values: sentences in serif, on terra ---------- */
.az-values {
  background: var(--c-terra);
  padding-block: var(--s-6);
}
.az-values__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-4) var(--gap);
  align-items: start;
}
.az-values__head { grid-column: 1 / 5; }
.az-values__lead { margin-top: var(--s-3); }
.az-values__list { grid-column: 6 / 13; }
.az-values__item {
  font-family: var(--f-serif);
  font-size: var(--t-xl);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.az-values__item + .az-values__item { margin-top: var(--s-3); }

/* ---------- Network: text and a short list of partners ---------- */
.az-network { padding-block: var(--s-7) var(--s-6); }

.az-network__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-5) var(--gap);
  align-items: start;
}
.az-network__text { grid-column: 1 / 6; }
.az-network__lead { margin-top: var(--s-3); color: var(--c-ink-soft); }
.az-network__link { display: inline-block; margin-top: var(--s-3); }

.az-network__partners {
  grid-column: 7 / 13;
  border-top: 1px solid var(--c-line);
}
.az-partner {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.az-partner__name {
  font-size: var(--t-xl);
  letter-spacing: -0.01em;
}
.az-partner__text { margin-top: var(--s-2); color: var(--c-ink-soft); }
.az-partner__link { display: inline-block; margin-top: var(--s-2); }

/* ---------- Zone: sand band, portrait photo rising above it ---------- */
.az-zone {
  background: var(--c-sand);
  margin-top: var(--s-7);
  padding-bottom: var(--s-6);
}
.az-zone__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-4) var(--gap);
  align-items: end;
}
.az-zone__text { grid-column: 1 / 7; padding-bottom: var(--s-5); }
.az-zone__lead { margin-top: var(--s-3); color: var(--c-ink-soft); }
.az-zone__places { margin-top: var(--s-3); }
.az-zone__figure {
  grid-column: 8 / 12;
  margin-top: calc(-1 * var(--s-7));
}
.az-zone__img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 55%; }
.az-zone__caption {
  margin-top: var(--s-1);
  font-size: var(--t-small);
  color: var(--c-ink-soft);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .az-values__head,
  .az-values__list,
  .az-network__text,
  .az-network__partners { grid-column: 1 / -1; }
  .az-narrative__photo { grid-column: 1 / 6; }
  .az-narrative__text { grid-column: 6 / 13; }
}

@media (max-width: 767px) {
  .az-narrative { padding-block: var(--s-3) var(--s-6); }
  .az-narrative__photo,
  .az-narrative__text { grid-column: 1 / -1; }
  .az-narrative__photo img { aspect-ratio: 4 / 3; }
  .az-narrative__grid { row-gap: var(--s-4); }

  .az-values__item { font-size: var(--t-lg); }
  .az-network { padding-block: var(--s-6) var(--s-5); }

  .az-zone { margin-top: 0; padding-top: var(--s-5); }
  .az-zone__text,
  .az-zone__figure { grid-column: 1 / -1; }
  .az-zone__text { padding-bottom: 0; }
  .az-zone__figure { margin-top: 0; }
  .az-zone__img { aspect-ratio: 4 / 3; }
}

/* ---------- Signature motion: the page head photo settles on load ---------- */
@media (prefers-reduced-motion: no-preference) {
  .az-pagehead__photo img { animation: az-settle 1200ms var(--ease-out) 120ms both; }
}