/* =====================================================
   PAGE "FRANPOQUOI ?" — d'après le mock Claude Design (5a)
   ===================================================== */
.fp-franpoquoi { max-width: var(--page-max); margin: 0 auto; padding: var(--space-6) var(--page-pad) var(--space-7); display: flex; flex-direction: column; gap: var(--space-7); text-align: left; }

.fp-eyebrow {
  font: 500 12px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cerise-intense);
}
.fp-eyebrow--sm { font-size: 12px; letter-spacing: .12em; }

/* --- Hero --- */
.fp-page-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.fp-page-hero__text { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; }
.fp-page-hero__title { margin: 0; font: 500 44px/1.05 var(--font-display); letter-spacing: -.02em; color: var(--cachou); }
.fp-page-hero__subtitle { margin: 0; font: italic 400 20px/1.4 var(--font-serif); color: var(--cachou-70); }
.fp-page-hero__stamp { width: 110px; height: 110px; transform: rotate(-8deg); flex: none; }

/* --- Cartes Franponator / Franponais --- */
.fp-info-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.fp-info-card {
  border: var(--border-hairline); border-radius: var(--radius-xl); padding: var(--space-5);
  display: flex; flex-direction: column; gap: 12px;
}
.fp-info-card--dark { background: var(--cachou); border-color: var(--cachou); color: var(--beige-doux); }
.fp-info-card__head { display: flex; align-items: center; gap: 10px; }
.fp-info-card__head img { width: 22px; height: 22px; }
.fp-info-card__head h2 { margin: 0; font: 500 19px var(--font-display); letter-spacing: -.01em; color: var(--cerise-intense); }
.fp-info-card--dark .fp-info-card__head h2 { color: var(--beige-doux); }
.fp-info-card p { margin: 0; font: 400 15px/1.6 var(--font-body); color: var(--cachou); }
.fp-info-card--dark p { color: var(--beige-doux); }

/* --- Photo + citation --- */
.fp-quote-block { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: center; }
.fp-quote-block__photo { border-radius: var(--radius-lg); overflow: hidden; border: var(--border-hairline); }
.fp-quote-block__photo img { display: block; width: 100%; height: 260px; object-fit: cover; }
.fp-quote-block__content { display: flex; flex-direction: column; gap: 14px; }
.fp-quote-block__content > img { width: 26px; height: 26px; }
.fp-quote-block__quote { margin: 0; font: italic 400 22px/1.35 var(--font-serif); color: var(--cachou); }
.fp-quote-block__caption { margin: 0; font: 400 13px/1.5 var(--font-body); color: var(--cachou-70); }

/* --- Sections génériques --- */
.fp-section { display: flex; flex-direction: column; gap: var(--space-4); }
.fp-section__title {
  margin: 0; font: 500 26px var(--font-display); letter-spacing: -.02em; color: var(--cachou);
  border-bottom: var(--border-hairline); padding-bottom: 14px;
}
.fp-section__title-row {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: var(--border-hairline); padding-bottom: 14px;
}
.fp-section__title--inline { border-bottom: none; padding-bottom: 0; }
.fp-section__title-note { font: italic 400 15px var(--font-serif); color: var(--cachou-70); }

/* --- Frise --- */
.fp-timeline-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.fp-timeline-card {
  border: var(--border-hairline); border-radius: var(--radius-xl); padding: var(--space-4);
  display: flex; flex-direction: column; gap: 10px;
}
.fp-timeline-card img { width: 24px; height: 24px; }
.fp-timeline-card h3 { margin: 0; font: 500 18px/1.25 var(--font-display); letter-spacing: -.01em; color: var(--cachou); }
.fp-timeline-card p { margin: 0; font: 400 14px/1.55 var(--font-body); color: var(--cachou); }
.fp-timeline-card p a { color: var(--cerise-intense); }
.fp-serif { font-family: var(--font-serif); }
.fp-serif-italic { font-family: var(--font-serif); font-style: italic; }

/* --- Callout "pour aller plus loin" --- */
.fp-callout {
  border: var(--border-hairline); border-radius: var(--radius-xl); background: var(--cerise-12);
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start;
}
.fp-callout__text { display: flex; flex-direction: column; gap: 6px; }
.fp-callout__text p { margin: 0; font: 400 16px/1.5 var(--font-body); color: var(--cachou); }
.fp-callout__btn {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  background: var(--cerise-intense); color: var(--beige-doux); text-decoration: none;
  border-radius: var(--radius-pill); padding: 13px 22px; font: 500 14px var(--font-display); letter-spacing: -.01em;
}
.fp-callout__btn:hover { background: var(--cerise-hover); }

/* --- Artistes --- */
.fp-artists-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.fp-artist-chip {
  display: flex; align-items: center; gap: 12px; border: var(--border-hairline); border-radius: var(--radius-lg);
  padding: 14px 16px; text-decoration: none;
}
.fp-artist-chip:hover { background: var(--cerise-12); }
.fp-artist-chip img { width: 20px; height: 20px; }
.fp-artist-chip span { font: 500 15px var(--font-display); letter-spacing: -.01em; color: var(--cachou); }

/* --- CTA finale --- */
.fp-cta-banner {
  background: var(--cachou); border-radius: var(--radius-xl); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start;
}
.fp-cta-banner__text h2 { margin: 0 0 8px; font: 500 26px/1.15 var(--font-display); letter-spacing: -.02em; color: var(--beige-doux); }
.fp-cta-banner__text p { margin: 0; font: italic 400 16px/1.4 var(--font-serif); color: var(--beige-doux); }
.fp-cta-banner__btn {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  background: var(--cerise-intense); color: var(--beige-doux); text-decoration: none;
  border-radius: var(--radius-pill); padding: 15px 26px; font: 500 16px var(--font-display); letter-spacing: -.01em;
}
.fp-cta-banner__btn:hover { background: var(--cerise-hover); }
.fp-cta-banner__btn img { width: 20px; height: 20px; }

/* --- Desktop : on retrouve les proportions du mock --- */
@media (min-width: 48em) {
  .fp-page-hero__title { font-size: 68px; }
  .fp-page-hero__subtitle { font-size: 24px; max-width: 26ch; }
  .fp-page-hero__stamp { width: 160px; height: 160px; }

  .fp-info-cards { grid-template-columns: 1fr 1fr; }
  .fp-quote-block { grid-template-columns: 1.35fr 1fr; }
  .fp-quote-block__photo img { height: 380px; }

  .fp-section__title { font-size: 30px; }
  .fp-timeline-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .fp-callout { flex-direction: row; align-items: center; justify-content: space-between; }

  .fp-artists-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .fp-cta-banner { flex-direction: row; align-items: center; justify-content: space-between; }
}