/* Page /about (spec « refonte nouvelle DA ») : grille 6 colonnes de shared/design.css, nav et pied de page : shared/site-chrome.css.
   Graisses 300 et 400 uniquement dans le corps de la page, aucune ombre, aucun arrondi, aucun dégradé, un seul ocre (le CTA de la nav).
   Libellés de section en colonnes 1 → 2, contenu en 3 → 6, filets pleine largeur entre sections. Espacements : 8, 16, 24, 40, 64, 96. */

/* Base (cette page n'utilise pas new/new.css) */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-y: scroll; color-scheme: light; }
html, body { background: var(--blanc-focal); }
body { font-family: var(--font-primary); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--noir-focal); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 4px; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: inherit; }
.v-main a:hover { color: var(--gris-moyen); }
.v-main a:focus-visible { outline: 2px solid var(--noir-focal); outline-offset: 4px; }

.v-main { padding: 0 var(--margin); }

/* Grille commune des blocs */
.v-hero, .v-gallery, .v-row, .v-engage {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Hero */
.v-hero { padding-top: 24px; }
.v-meta { font-size: 14px; }
.v-meta.v-c1 { grid-column: 1 / 3; }
.v-meta.v-c3 { grid-column: 3 / -1; }
.v-statement { font-weight: 300; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.14; letter-spacing: -0.01em; text-wrap: balance; }
.v-hero .v-statement { grid-column: 3 / -1; margin-top: 72px; }
.v-hero-fig { grid-column: 1 / -1; margin-top: 64px; }
.v-img { position: relative; overflow: hidden; background: var(--gris-tres-clair); }
.v-hero-fig .v-img { aspect-ratio: 1208 / 600; }
.v-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-wm { position: absolute; right: 16px; bottom: 16px; font-size: 9px; line-height: 12px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.7); pointer-events: none; }
.v-fig figcaption { margin-top: 16px; font-size: 12px; line-height: 16px; }

/* Sections : filet, libellé, puis contenu 64 px plus bas */
.v-sec { border-top: 1px solid var(--gris-clair); margin-top: 96px; padding-top: 24px; }
.v-k { font-size: 14px; line-height: 24px; font-weight: 400; }
.v-body { margin-top: 64px; }

/* Histoire : texte sur 3 → 6 */
.v-story { display: grid; gap: 24px; max-width: 64ch; margin-left: calc((100% - 5 * var(--gutter)) / 6 * 2 + 2 * var(--gutter)); }
.v-lead { font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; }

/* Galerie décalée */
.v-gallery { margin-top: 96px; align-items: start; }
.v-ga { grid-column: 1 / span 3; }
.v-ga .v-img { aspect-ratio: 4 / 3; }
.v-gb { grid-column: 4 / span 3; margin-top: 96px; margin-left: var(--space-m); } /* SPACE-M de plus entre les deux images : la 1ʳᵉ reste calée sur les colonnes 1 → 3, la 2ᵉ garde son bord droit sur la colonne 6 */
.v-gb .v-img { aspect-ratio: 4 / 5; }

/* Engagements : trois colonnes de 2 */
.v-engage { row-gap: 40px; }
.v-item { grid-column: span 2; border-top: 1px solid var(--gris-tres-clair); padding-top: 16px; }
.v-item h3 { font-weight: 300; font-size: 32px; line-height: 40px; margin-bottom: 24px; }
.v-item p { font-size: 14px; color: var(--gris-moyen); max-width: 36ch; }

/* Ce qui nous distingue : libellé 1 → 2, texte 3 → 6 */
.v-rows { border-bottom: 1px solid var(--gris-tres-clair); }
.v-row { border-top: 1px solid var(--gris-tres-clair); padding-block: 24px; row-gap: 8px; }
.v-row h3 { grid-column: 1 / 3; font-size: 18px; line-height: 24px; }
.v-row p { grid-column: 3 / -1; max-width: 64ch; }

/* Votre projet : sur 3 → 6 */
.v-closing .v-body { margin-left: calc((100% - 5 * var(--gutter)) / 6 * 2 + 2 * var(--gutter)); }
.v-statement-sm { max-width: 20ch; }
.v-actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; }
.v-actions a { font-size: 16px; line-height: 24px; padding-block: 10px; }
.v-arrow { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } /* soulignement en bordure : couvre aussi la flèche */
.v-muted { color: var(--gris-moyen); }

.v-page .foot { margin-top: 96px; }

@media (max-width: 760px) {
  .v-hero, .v-gallery, .v-row, .v-engage { grid-template-columns: 1fr; row-gap: 16px; }
  .v-meta.v-c1, .v-meta.v-c3, .v-hero .v-statement, .v-hero-fig, .v-ga, .v-gb, .v-item, .v-row h3, .v-row p { grid-column: 1 / -1; }
  .v-hero .v-statement { margin-top: 40px; }
  .v-hero-fig { margin-top: 40px; }
  .v-hero-fig .v-img { aspect-ratio: 4 / 3; }
  .v-sec { margin-top: 64px; }
  .v-body { margin-top: 40px; }
  .v-gallery { margin-top: 64px; }
  .v-gb { margin-top: 0; margin-left: 0; }
  .v-story, .v-closing .v-body { margin-left: 0; }
  .v-page .foot { margin-top: 64px; }
}