/* ──────────────────────────────────────────────────────────────
   Qui est Ludilon ? (qui-est-ludilon.html) — charte verte Ludilon.
   S'appuie sur home.css (en-tête, footer, modale, feuilles) ;
   classes propres à la page préfixées .ab-*.
   ────────────────────────────────────────────────────────────── */

body.ab { background: var(--hp-cream); }

/* overflow-x: clip rogne les feuilles qui débordent sur les côtés */
.ab-main { position: relative; overflow-x: clip; padding: 64px 24px 104px; }
.ab-leaf { position: absolute; width: 190px; pointer-events: none; user-select: none; }
.ab-leaf--left  { top: -30px; left: -70px; transform: rotate(-70deg); }
.ab-leaf--right { bottom: 40px; right: -70px; transform: rotate(100deg) scaleX(-1); }

.ab-wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.ab-eyebrow {
  text-align: center;
  font-family: 'Baloo 2', sans-serif; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--hp-green);
  margin-bottom: 6px;
}
.ab-h1 {
  text-align: center; color: var(--hp-black);
  font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 700; line-height: 1.15;
  margin-bottom: 44px;
}

.ab-card { background: #fff; border-radius: 24px; padding: 44px 48px; }

/* ── PORTRAIT + 3 GÉNÉRATIONS ── */
.ab-intro { display: grid; grid-template-columns: 180px 1fr; gap: 40px; align-items: center; }
.ab-portrait { margin: 0; display: flex; flex-direction: column; align-items: center; }
.ab-photo-wrap { position: relative; }
.ab-photo {
  display: block; width: 180px; height: 180px; border-radius: 50%; object-fit: cover;
  border: 6px solid var(--hp-mint-strong);
}
.ab-monkey {
  position: absolute; right: -6px; bottom: 4px; width: 56px; height: auto;
  background: #fff; border-radius: 50%; padding: 8px 6px 4px;
  box-shadow: 0 6px 16px rgba(0, 75, 56, 0.15);
}
.ab-sign {
  text-align: center; margin-top: 14px; line-height: 1.2;
  font-family: 'Baloo 2', sans-serif; font-weight: 700; color: var(--hp-green);
}
.ab-sign span { display: block; font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 0.78rem; color: var(--hp-body); }

.ab-family { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ab-family li {
  position: relative; padding-left: 30px;
  font-size: 1.05rem; font-weight: 600; line-height: 1.5; color: var(--hp-ink);
}
.ab-family li::before {
  content: ''; position: absolute; left: 0; top: 0.45em;
  width: 14px; height: 14px; border-radius: 50%; background: var(--hp-mint-strong);
}
/* Fil vertical qui relie les générations */
.ab-family li:not(:last-child)::after {
  content: ''; position: absolute; left: 6px; top: calc(0.45em + 14px); bottom: -14px;
  width: 2px; background: var(--hp-mint);
}
.ab-punch {
  margin-top: 22px;
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1.3;
  color: var(--hp-green);
}

/* ── LE MARATHON ── */
.ab-story { margin-top: 40px; padding-top: 36px; border-top: 1px solid #EFEAE0; }
.ab-lead {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.35;
  color: var(--hp-black); margin-bottom: 14px;
}
.ab-hl { color: var(--hp-green); }
.ab-story p:not(.ab-lead) { font-size: 1rem; line-height: 1.75; color: var(--hp-body); }
.ab-story strong { color: var(--hp-ink); }

/* ── REMERCIEMENTS ── */
.ab-thanks {
  margin-top: 28px;
  display: flex; align-items: center; gap: 16px;
  background: var(--hp-mint); border-radius: 18px; padding: 20px 24px;
  font-weight: 600; line-height: 1.55; color: var(--hp-green-dark);
}
.ab-thanks-emoji { font-size: 1.8rem; flex-shrink: 0; }

/* Lien de la page courante dans le footer */
.hp-footer-links a[aria-current="page"] { color: var(--hp-mint); }

/* ── RESPONSIVE ── */
@media (max-width: 760px) {
  .ab-main { padding: 40px 16px 72px; }
  .ab-h1 { margin-bottom: 28px; }
  .ab-card { padding: 30px 22px; }
  .ab-intro { grid-template-columns: 1fr; gap: 24px; }
  .ab-photo { width: 150px; height: 150px; }
  .ab-leaf { width: 120px; }
  .ab-leaf--left  { left: -60px; }
  .ab-leaf--right { right: -60px; }
  .ab-punch { font-size: 1.2rem; }
}