/* Page « L'association » — design_2026/l-association.html.
   Chaque section est autonome (marge haute comprise) : l'ordre se règle au
   back-office, aucune règle ne suppose un voisin particulier. */

.about-intro, .about-values, .about-split, .about-join, .about-text {
  padding-top: clamp(80px, 13vh, 150px);
}
main > :first-child.about-intro,
main > :first-child.about-values,
main > :first-child.about-split,
main > :first-child.about-join,
main > :first-child.about-text { padding-top: clamp(48px, 9vh, 110px); }

.about-h2 { font-size: clamp(30px, 4vw, 56px); line-height: 1.3; }
.about-h2 em, .about-intro__title em, .about-split__title em, .about-feature__title em { color: var(--color-primary); }
.about-feature__title em { color: var(--color-highlight); }

/* Texte courant et citation, partagés par tous les types. */
.about-copy { display: flex; flex-direction: column; gap: 18px; font-size: 15px; font-weight: 300; line-height: 1.8; max-width: 560px; }
.about-copy--lg { font-size: clamp(16px, 1.25vw, 18px); max-width: 600px; }
.about-quote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; color: var(--color-primary);
}
.on-primary .about-quote { color: var(--color-highlight); }

/* ── Introduction ─────────────────────────────────────────────────────── */

.about-intro {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(32px, 5vw, 80px); align-items: end;
}
.about-intro__glow {
  position: absolute; right: -15%; top: -30%; width: 50vw; height: 50vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 163, 64, 0.24), rgba(232, 163, 64, 0));
  pointer-events: none;
}
.about-intro__text { position: relative; display: flex; flex-direction: column; gap: clamp(22px, 3vh, 32px); }
.about-intro__title {
  font-size: clamp(40px, 5.6vw, 88px); line-height: 1.3; text-wrap: balance;
}
.about-intro__title em { font-style: italic; }
.about-intro__media {
  justify-self: end; width: min(100%, 460px); aspect-ratio: 3 / 4; max-height: 70vh;
  border-radius: clamp(120px, 18vw, 230px) clamp(120px, 18vw, 230px) 0 0;
}

/* ── Points numérotés ─────────────────────────────────────────────────── */

.about-rule { display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--line-strong); padding-bottom: 18px; }
.about-values__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0 clamp(32px, 4vw, 64px);
}
.about-value {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(32px, 5vh, 48px) 0 clamp(28px, 4vh, 40px);
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px; font-weight: 300; line-height: 1.75;
}
.about-value p { max-width: 520px; }
.about-value__n { font-family: var(--font-display); font-size: clamp(44px, 5vw, 72px); line-height: 0.85; color: var(--color-accent); }
.about-value__title { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.3; }

/* ── Aplat brun ───────────────────────────────────────────────────────── */

.about-feature {
  margin: clamp(80px, 13vh, 150px) var(--gutter) 0;
  padding: clamp(48px, 7vh, 88px) clamp(20px, 4vw, 56px);
  border-radius: 0 clamp(60px, 10vw, 140px) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
main > .about-feature:first-child { margin-top: clamp(48px, 9vh, 110px); }
.about-feature__intro { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 96px; }
.about-feature__intro .kicker { letter-spacing: 0.24em; }
.about-feature__title { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.3; text-wrap: balance; }
.about-feature .about-copy { max-width: 480px; }
.about-feature__listtitle {
  display: block; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  border-bottom: 1px solid rgba(247, 242, 235, 0.4); padding-bottom: 14px;
}
.about-feature__list { list-style: none; margin: 0; padding: 0; }
.about-feature__list li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line-on-primary-soft);
  font-size: 16px; font-weight: 300; line-height: 1.6;
}
.about-feature__n { font-family: var(--font-display); font-size: 18px; color: var(--color-highlight); }

/* ── Texte et image ───────────────────────────────────────────────────── */

.about-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.about-split__media {
  aspect-ratio: 4 / 5; max-height: 70vh;
  border-radius: 0 0 clamp(100px, 14vw, 200px) 0;
}
a.about-split__media:hover img { transform: scale(1.03); }
.about-split__text { display: flex; flex-direction: column; gap: 22px; }
.about-split__title { font-size: clamp(32px, 4vw, 58px); line-height: 1.3; text-wrap: balance; }
.about-split--right .about-split__media { border-radius: 0 0 0 clamp(100px, 14vw, 200px); }
@media (min-width: 760px) {
  .about-split--right .about-split__media { order: 2; }
}

/* ── Liste de liens et appel ─────────────────────────────────────────── */

.about-join__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px 40px; border-bottom: 1px solid var(--line-strong); padding-bottom: 22px;
}
.about-join__lead { max-width: 460px; line-height: 1.75; }
.about-join__listtitle {
  display: block; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-primary); padding: 28px 0 8px;
}
.about-join__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
}
.about-join__link {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 18px 4px; border-bottom: 1px solid var(--line-soft); color: var(--color-text);
}
.about-join__link:hover { color: var(--color-primary); }
.about-join__text { font-family: var(--font-title); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; }
.about-join__arrow { font-size: 14px; color: var(--color-accent); }
.about-join__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px 40px; margin-top: clamp(48px, 8vh, 88px);
}
.about-join__closing {
  font-family: var(--font-display); font-size: clamp(24px, 3vw, 44px); line-height: 1.3;
  max-width: 26ch; text-wrap: balance;
}
.about-join__cta { padding: 18px 32px 16px; white-space: nowrap; }

/* ── Texte simple ─────────────────────────────────────────────────────── */

.about-text__inner { display: flex; flex-direction: column; gap: 22px; max-width: 820px; }