/* 12 — À PROPOS */

.c-about {
  --container: 1520px;

  background-color: var(--c-bg-3);
  padding-block-end: 0;
}

.c-about__eyebrow {
  margin-block-end: var(--space-6);
}

.c-about__eyebrow,
.c-about__body,
.c-about__cols {
  position: relative;
}

.c-about__halo {
  display: none;
}

/* --- Portrait --- */

.c-about__media {
  position: relative;
  aspect-ratio: 3/4;
  margin-block-end: var(--space-8);
  overflow: hidden;
  border: var(--line) solid var(--c-accent-1);
  background-color: var(--c-bg-1);
}

.c-about__portrait {
  position: relative;
  z-index: 2;
  --portrait-scale: 100%;

  display: block;
  width: var(--portrait-scale);
  height: var(--portrait-scale);
  margin-inline-start: calc((100% - var(--portrait-scale)) / 2);
  object-fit: cover;
  object-position: center;
}

/* --- Texte --- */

.c-about__lead {
  margin-block-end: var(--space-5);
}

.c-about__text {
  margin-block-end: var(--space-8);
}

/* --- Colonnes d'étiquettes --- */

.c-about__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.c-about__col-titre {
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-dim);
  padding-block-end: var(--space-3);
  margin-block-end: var(--space-4);
  border-block-end: var(--line) solid var(--c-border);
}

/* PALIERS */

@media (min-width: 768px) {
  .c-about__inner {
    display: grid;
    grid-template-columns: minmax(0, clamp(15rem, 32%, 38rem)) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: var(--space-10);
    align-items: start;
  }

  .c-about__eyebrow {
    grid-column: 2;
    grid-row: 1;
  }

  .c-about__media,
  .c-about__halo {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .c-about__halo {
    --halo-step: clamp(1rem, 1.5vw, 2rem);

    display: block;
    position: relative;
    align-self: stretch;
    min-height: 0;
    pointer-events: none;
  }

  .c-about__halo i {
    position: absolute;
    inset: calc(var(--n) * var(--halo-step) * -1);
    border: var(--line) solid var(--relief-line, transparent);
    opacity: calc(1 - var(--n) / 6);
  }

  .c-about__halo i:nth-child(1) {
    --n: 1;
  }

  .c-about__halo i:nth-child(2) {
    --n: 2;
  }

  .c-about__halo i:nth-child(3) {
    --n: 3;
  }

  .c-about__halo i:nth-child(4) {
    --n: 4;
  }

  .c-about__halo i:nth-child(5) {
    --n: 5;
  }

  .c-about__media {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 0;
    margin-block-end: 0;
  }

  .c-about__body {
    grid-column: 2;
    grid-row: 2;
  }

  .c-about__cols {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 36rem));
    justify-content: space-between;
    gap: var(--space-8) var(--space-10);
    margin-block-start: var(--space-10);
  }
}

@media (min-width: 1200px) {
  .c-about__inner {
    column-gap: var(--space-16);
  }

  .c-about__eyebrow {
    margin-block-end: var(--space-8);
  }
}

/* BASCULE DE COMPOSITION — seuil propre à cette section */

@media (min-width: 1400px) {

  .c-about__media,
  .c-about__halo {
    grid-row: 1 / -1;
  }

  .c-about__cols {
    grid-column: 2;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    margin-block-start: var(--space-8);
  }
}