/* À propos */

/* Hero */
.about-hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 32px 80px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 56px);
}
.about-hero__head .stack { --stack: 24px; }
.about-hero__title { font-size: clamp(42px, 5.3vw, 76px); font-weight: 600; max-width: 17ch; }
.about-hero__intro { font-size: 18px; max-width: 40ch; padding-bottom: 8px; }
.about-hero__media { width: 100%; }
@media (max-width: 900px) {
  .about-hero__head { grid-template-columns: 1fr; }
  .about-hero__media { --ratio: 4 / 3 !important; }
}

/* 01 · Approche */
.about-approach { grid-template-columns: minmax(0, 384px) minmax(0, 1fr); }
.about-approach .lead-title { font-weight: 600; }
.about-approach__lead {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.about-approach__text { font-size: 17px; }
.about-approach__notice { align-items: flex-start; margin-top: 8px; padding: 16px; }
.about-approach__notice .icon { margin-top: 2px; }
@media (max-width: 900px) {
  .about-approach { grid-template-columns: 1fr; }
}

/* 02 · Pôles */
.about-poles {
  display: grid;
  grid-template-columns: minmax(0, 736fr) minmax(0, 520fr);
  gap: 24px;
}
.about-pole {
  --pole-bg: var(--anthracite);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--pole-bg);
  color: var(--white);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.about-pole--renov {
  --pole-bg: var(--cream);
  --fg: var(--noir);
  --muted: var(--text-on-light-muted);
  --accent: var(--gold-ink);
  color: var(--noir);
}
.about-pole .media {
  aspect-ratio: auto;
  height: clamp(240px, 29vw, 420px);
  border-radius: 0;
}
.about-pole__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(28px, 2.8vw, 40px); }
.about-pole__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.about-pole__title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg);
  text-wrap: balance;
}
.about-pole__text { color: var(--muted); max-width: 52ch; }
.about-pole .link-arrow { margin-top: 4px; }
@media (hover: hover) {
  .about-pole:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6); }
  .about-pole:hover .media > img { --media-scale: 1.05; }
  .about-pole:hover .link-arrow::after { transform: scaleX(1); transform-origin: left; }
  .about-pole:hover .link-arrow .icon { transform: translate(3px, -3px); }
}
@media (max-width: 900px) {
  .about-poles { grid-template-columns: 1fr; }
  .about-pole .media { height: auto; aspect-ratio: 4 / 3; }
}

/* 03 · Exigences */
.about-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.about-value {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
}
.about-value:first-child { padding-left: 0; }
.about-value + .about-value { border-left: 1px solid var(--line); }
.about-value__num {
  font-family: var(--font-heading);
  font-size: clamp(48px, 4.4vw, 64px);
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  transition: transform 0.6s var(--ease-out);
}
.about-value__title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.about-value .text { max-width: 36ch; }
@media (hover: hover) {
  .about-value:hover .about-value__num { transform: translateX(6px); }
}
@media (max-width: 900px) {
  .about-values { grid-template-columns: 1fr; }
  .about-value { padding: 32px 0; }
  .about-value + .about-value { border-left: 0; border-top: 1px solid var(--line); }
}