/* Pages éditoriales : valeurs et composants de la charte de l’accueil. */
.topic-page { padding-top: 68px; }
.topic-attribution { max-width: 1160px; margin: 0 auto 56px; padding: 0 48px; font: 400 14px/1.6 var(--font-body); color: var(--text-medium); }
.topic-page section { padding: 120px 48px; }
.topic-wrap { max-width: 1160px; margin: 0 auto; }
.topic-page h1 { font: italic 300 clamp(32px, 4vw, 60px)/1.12 var(--font-display); letter-spacing: -.5px; max-width: 900px; margin-bottom: 32px; }
.topic-page h2 { font: italic 300 clamp(36px, 4.5vw, 64px)/1.12 var(--font-display); letter-spacing: -.5px; max-width: 920px; margin-bottom: 36px; }
.topic-page h3 { font: italic 400 34px/1.15 var(--font-display); margin-bottom: 18px; }
.topic-page p { font: 300 19px/1.85 var(--font-body); color: var(--text-medium); max-width: 760px; margin-bottom: 24px; }
.topic-page .topic-hero { padding-top: 80px; padding-bottom: 80px; background: var(--beige-creme); }
.topic-kicker, .topic-num { font: 500 13px/1.5 var(--font-body); color: var(--corail); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 24px; }
.topic-mantra { font: italic 400 34px/1.3 var(--font-display); margin-top: 32px; }
/* Deux accents uniquement, avec une version légère du marbre existant.
   Le décor du mantra ne change ni ses dimensions ni les espaces autour. */
.topic-hero .topic-mantra { position: relative; isolation: isolate; }
.topic-hero .topic-mantra::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px auto -12px -14px;
  width: min(calc(100% + 28px), 560px);
  border-radius: var(--radius-lg);
  background-image: linear-gradient(90deg, rgba(250,245,240,.5), rgba(250,245,240,.94)), url('/assets/images/marble-texture-light.webp');
  background-size: cover;
  background-position: center, center 42%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.topic-page .topic-band { padding-top: 56px; padding-bottom: 56px; background: var(--rose-poudre); }
.topic-band .topic-quote { font: italic 400 32px/1.4 var(--font-display); color: var(--text-dark); margin: 0 auto; text-align: center; }
.topic-alt { background: var(--beige-creme); }
.topic-grid, .topic-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 40px 0; }
.topic-card, .topic-step { padding: 48px; border-radius: var(--radius-lg); background: white; box-shadow: var(--card-shadow); }
.topic-card p, .topic-step p { font-size: 16px; line-height: 1.8; margin-bottom: 0; }
.topic-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.topic-step { padding: 32px; }
.topic-note, .topic-softbox { font: 300 19px/1.85 var(--font-body); max-width: 760px; padding: 28px 32px; margin-top: 36px; border-left: 2px solid var(--corail); background: var(--corail-light); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.topic-questions { margin: 32px 0; }
.topic-q { font: italic 400 26px/1.5 var(--font-display); margin: 12px 0; }
.topic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 32px; }
.topic-midcta { margin-top: 32px; }
.topic-btn { display: inline-block; max-width: 100%; padding: 18px 44px; border-radius: var(--radius-pill); font: 500 16px/1.5 var(--font-body); text-decoration: none; text-align: center; }
.topic-primary { color: white; background: var(--corail); box-shadow: 0 4px 20px rgba(224,123,101,.28); transition: background 200ms; }
.topic-primary:hover { background: var(--corail-hover); }
.topic-cta {
  background-color: var(--beige-creme);
  background-image: linear-gradient(100deg, rgba(250,245,240,.9), rgba(250,245,240,.72)), url('/assets/images/marble-texture-light.webp');
  background-size: cover;
  background-position: center, center 65%;
  background-repeat: no-repeat;
}
.topic-ctabox { max-width: 960px; margin: auto; }
.topic-explore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.topic-explore-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; border-radius: var(--radius-lg); background: white; box-shadow: var(--card-shadow); text-decoration: none; color: var(--text-dark); font: 400 24px/1.3 var(--font-display); }
.topic-explore-card:hover { box-shadow: var(--card-shadow-hover); }
.topic-explore-card > span:last-child { color: var(--corail); }
.topic-directory { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px; }
.topic-directory-card { display: block; max-width: 560px; color: var(--text-dark); text-decoration: none; transition: box-shadow 200ms; }
.topic-directory-card:hover { box-shadow: var(--card-shadow-hover); }
.topic-directory-card h2 { font: italic 400 34px/1.15 var(--font-display); margin-bottom: 18px; }
.topic-directory-link { display: block; margin-top: 28px; font: 500 15px/1.6 var(--font-body); color: var(--text-medium); }
.topic-directory-link > span { color: var(--corail); margin-left: 8px; }
.topic-breadcrumb { font: 400 14px/1.6 var(--font-body); margin-bottom: 32px; color: var(--text-medium); }
.topic-breadcrumb a { color: inherit; text-underline-offset: 4px; }
.topic-page :focus-visible, .skip-link:focus { outline: 2px solid var(--text-dark); outline-offset: 5px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; background: white; color: var(--text-dark); padding: 12px 20px; }
.skip-link:focus { top: 12px; }
@media (max-width: 767px) {
  .topic-page section { padding: 64px 22px; }
  .topic-attribution { padding: 0 22px; margin-bottom: 40px; }
  .topic-page .topic-hero { padding: 40px 26px 56px; }
  .topic-page h1 { font-size: clamp(30px, 8vw, 42px); }
  .topic-page p, .topic-note, .topic-softbox { font-size: 17px; line-height: 1.8; }
  .topic-grid, .topic-steps, .topic-explore { grid-template-columns: 1fr; gap: 18px; }
  .topic-card, .topic-step { padding: 28px 26px; }
  .topic-note, .topic-softbox { padding: 24px; }
  .topic-actions > a, .topic-midcta > a { width: 100%; }
  .topic-btn { padding: 18px 24px; }
  .topic-band .topic-quote { font-size: 28px; }
}

/* Responsive de la navigation et du pied de page, limité aux pages thématiques. */
@media (min-width: 768px) and (max-width: 1150px) {
  #site-header .nav-links { display: none !important; }
}
@media (max-width: 400px) {
  #site-header .nav-actions > svg { display: none; }
}
@media (max-width: 767px) {
  #site-footer .footer-bottom { flex-wrap: wrap; gap: 16px; }
  #site-footer .footer-bottom span { line-height: 1.5 !important; }
}

/* Rapprocher les cartes du hub, sans changer les pages thématiques. */
.topic-page .topic-hub-hero { padding-top: 56px; padding-bottom: 24px; }
.topic-hub-hero p { margin-bottom: 16px; }
.topic-hub-hero .topic-mantra { margin-top: 20px; }
.topic-page .topic-hub-content { padding-top: 24px; }
@media (max-width: 767px) {
  .topic-page .topic-hub-hero { padding-top: 28px; padding-bottom: 20px; }
  .topic-page .topic-hub-content { padding-top: 20px; }
}