/* ==========================================================================
   À propos — maquette/APropos.dc.html
   apropos-intro · apropos-dessin · apropos-valeurs · apropos-coulisses
   (autonome : ne dépend pas de accueil.css, chargée avant)
   ========================================================================== */

/* ----------------------------------------------------------------- Intro */
.apropos-intro { padding: 40px 0 var(--section); }
.apropos-intro__inner { display: flex; flex-direction: column; gap: 48px; }
.apropos-intro__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6.7vw, 96px); align-items: center; }
.apropos-intro__media .b-img, .apropos-intro__media .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.apropos-intro__body { display: flex; flex-direction: column; gap: 22px; }
.apropos-intro__script { font-family: var(--font-script); font-size: clamp(40px, 4vw, 60px); line-height: 1; color: var(--accent); }
.apropos-intro__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.05; }
.apropos-intro__lead { font-size: clamp(20px, 1.7vw, 23px); line-height: 1.65; color: var(--ink-soft); }
.apropos-intro__text { font-size: var(--fs-body); line-height: 1.65; color: var(--ink-soft); }
.apropos-intro__signature { font-family: var(--font-script); font-size: 56px; line-height: 1; color: var(--ink); }
.apropos-intro__signature-img { width: auto; max-width: 240px; max-height: 96px; background: none; }

/* ----------------------------------------------------------------- Dessin */
.apropos-dessin { padding: clamp(80px, 9vw, 128px) 0; background: var(--bg-alt); }
.apropos-dessin__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6.7vw, 96px); align-items: center; }
.apropos-dessin__body { display: flex; flex-direction: column; gap: 22px; }
.apropos-dessin__text { font-size: var(--fs-body); line-height: 1.65; color: var(--ink-soft); }
.apropos-dessin__link { align-self: flex-start; border-bottom-color: var(--ink); }
.apropos-dessin__media .b-img, .apropos-dessin__media .ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------------------------------------------------------------- Valeurs */
.apropos-valeurs { display: flex; flex-direction: column; gap: 56px; }
.apropos-valeurs__head { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.apropos-valeurs__script { font-family: var(--font-script); font-size: clamp(34px, 3vw, 44px); line-height: 1; color: var(--accent); }
.apropos-valeurs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4.4vw, 64px); }
.apropos-valeur { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--ink); padding-top: 24px; }
.apropos-valeur__title { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.2; }
.apropos-valeur__text { font-size: 19px; line-height: 1.6; color: var(--ink-soft); }

/* -------------------------------------------------------------- Coulisses */
.apropos-coulisses { padding-bottom: clamp(80px, 9vw, 128px); }
.apropos-coulisses__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.apropos-coulisses__item .b-img, .apropos-coulisses__item .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.apropos-coulisses__item .ph { font-size: 10px; letter-spacing: .14em; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 900px) {
	.apropos-intro__grid, .apropos-dessin__grid, .apropos-valeurs__grid { grid-template-columns: minmax(0, 1fr); }
	.apropos-dessin__media { order: -1; }
	.apropos-coulisses__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.apropos-coulisses__item:nth-child(n + 4) { display: none; }
}
@media (max-width: 600px) {
	.apropos-coulisses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.apropos-coulisses__item:nth-child(n + 4) { display: block; } /* 2 × 2 plutôt qu'une vignette orpheline */
}