/* About page. Logical properties only; photos are never mirrored. */

.about-story { background: var(--surface); }
@media (min-width: 1024px) { .about-split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
.about-story__text .prose,
.about-team__text .prose { margin-block-start: var(--sp-4); }

/* "Notre histoire en détails": native <details> styled as the gold button. */
.about-more { margin-block-start: var(--sp-2); }
.about-more > summary { list-style: none; cursor: pointer; width: fit-content; }
.about-more > summary::-webkit-details-marker { display: none; }
.about-more__chev { transition: transform var(--dur) var(--ease); }
.about-more[open] .about-more__chev { transform: rotate(180deg); }
.about-more__body { margin-block-start: var(--sp-5); padding-inline-start: var(--sp-4); border-inline-start: 3px solid var(--gold-500); }

/* Coast photo + caption chip */
.about-photo { position: relative; margin: 0; }
.about-photo__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--sh-md); }
.about-chip {
  position: absolute; inset-inline-start: var(--sp-4); inset-block-end: var(--sp-4); max-width: calc(100% - 2 * var(--sp-4));
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  background: rgba(5, 7, 11, 0.82); color: var(--text-on-dark); backdrop-filter: blur(6px);
}
.about-chip strong { display: block; font-family: var(--font-display); font-size: 0.95rem; color: #fff; }
.about-chip span span { display: block; font-size: var(--fs-small); color: var(--text-on-dark-2); }

/* Mission / Vision / Values */
.about-mvv { isolation: isolate; overflow: hidden; background: var(--ink-950); }
.about-mvv__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.about-mvv__bg.is-placeholder { opacity: 0.06; }
.about-mvv__grid { display: grid; gap: var(--sp-7); list-style: none; padding: 0; margin: 0; }
.about-mvv .feature__title { font-size: var(--fs-h2); color: var(--gold-500); }
.about-mvv .feature__text { font-size: 0.98rem; max-width: 42ch; }
@media (min-width: 1024px) {
  .about-mvv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
}
.about-values { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.about-values li { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-on-dark); }
.about-values .icon { color: var(--gold-500); flex: none; }

/* Team */
.about-rule { display: block; width: 56px; height: 3px; border-radius: var(--r-pill); background: var(--grad-gold); margin-block-start: var(--sp-4); }
.about-team .button-row { margin-block-start: var(--sp-2); }
.about-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.about-mosaic__main { grid-column: 1 / -1; }
.about-mosaic__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }
.about-mosaic__main .about-mosaic__img { aspect-ratio: 4 / 3; }
.about-mosaic__side .about-mosaic__img { aspect-ratio: 3 / 2; }
@media (min-width: 640px) {
  .about-mosaic { grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; }
  .about-mosaic__main { grid-column: 1; grid-row: 1 / span 2; }
  .about-mosaic__main .about-mosaic__img,
  .about-mosaic__side .about-mosaic__img { aspect-ratio: auto; min-height: 150px; }
  .about-mosaic__main .about-mosaic__img { min-height: 320px; }
}