/* ============================================
   Charte royale — ornements au trait d'or
   Basilique, saint Denis, rois et reines : une touche par page.
   Chargée sur toutes les pages publiques sauf Cours jeunes (qui a ses poissons).
   Les motifs sont des masques SVG peints avec --color-gold : ils suivent le thème clair/sombre.
   ============================================ */

@font-face {
  font-family: 'UnifrakturMaguntia';
  src: url('../assets/fonts/unifraktur-maguntia.woff2') format('woff2');
  font-display: swap;
}

/* --- Séparateur au lys sous les titres de section --- */
.section-title h2::after {
  width: 180px;
  height: 24px;
  bottom: -14px;
  border-radius: 0;
  background: var(--color-gold);
  -webkit-mask: url('../assets/img/ornements/separateur.svg') center / contain no-repeat;
  mask: url('../assets/img/ornements/separateur.svg') center / contain no-repeat;
}
.section-title h2 { padding-bottom: var(--space-6); }

/* --- Rosace en filigrane dans l'en-tête des pages intérieures --- */
.page-hero::after {
  content: '';
  position: absolute;
  right: -90px;
  top: 50%;
  width: 420px;
  aspect-ratio: 1;
  translate: 0 -46%;
  background: var(--color-gold);
  opacity: 0.09;
  -webkit-mask: url('../assets/img/ornements/rosace.svg') center / contain no-repeat;
  mask: url('../assets/img/ornements/rosace.svg') center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
  animation: royal-turn 160s linear infinite;
}
.page-hero > .container { position: relative; z-index: 1; }
@keyframes royal-turn { to { rotate: 360deg; } }

/* --- Accueil : la façade de la basilique en filigrane --- */
.hero::after {
  content: '';
  position: absolute;
  right: 1.5%;
  bottom: 0;
  width: min(26vw, 380px);
  aspect-ratio: 320 / 254;
  background: var(--color-gold);
  opacity: 0.2;
  -webkit-mask: url('../assets/img/ornements/basilique.svg') bottom / contain no-repeat;
  mask: url('../assets/img/ornements/basilique.svg') bottom / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}
.hero-content { position: relative; z-index: 1; }

/* --- Lettrine gothique : texte « Le club » (pas dans les articles d'actualité) --- */
.lettrine::first-letter {
  float: left;
  font-family: 'UnifrakturMaguntia', var(--font-heading);
  font-weight: 400;
  font-size: 4.6em;
  line-height: 0.72;
  color: var(--color-gold);
  padding: 0.12em 0.16em 0 0;
  margin-right: 0.12em;
  border-right: 1px solid var(--color-gold-glow);
}

/* --- Portraits : fenêtre gothique (arc brisé) --- */
.instructor-avatar {
  width: 116px;
  height: 145px;
  border: 0;
  border-radius: 0;
  padding: 2px;
  background: var(--color-gold);
  clip-path: polygon(0.0% 47.3%, 2.5% 33.6%, 5.0% 28.1%, 7.5% 24.1%, 10.0% 20.8%, 12.5% 18.0%, 15.0% 15.6%, 17.5% 13.4%, 20.0% 11.6%, 22.5% 9.9%, 25.0% 8.3%, 27.5% 7.0%, 30.0% 5.8%, 32.5% 4.7%, 35.0% 3.7%, 37.5% 2.8%, 40.0% 2.1%, 42.5% 1.4%, 45.0% 0.9%, 47.5% 0.4%, 50.0% 0.0%, 52.5% 0.4%, 55.0% 0.9%, 57.5% 1.4%, 60.0% 2.1%, 62.5% 2.8%, 65.0% 3.7%, 67.5% 4.7%, 70.0% 5.8%, 72.5% 7.0%, 75.0% 8.3%, 77.5% 9.9%, 80.0% 11.6%, 82.5% 13.4%, 85.0% 15.6%, 87.5% 18.0%, 90.0% 20.8%, 92.5% 24.1%, 95.0% 28.1%, 97.5% 33.6%, 100.0% 47.3%, 100% 100%, 0 100%);
}
.instructor-avatar--lg { width: 132px; height: 165px; }
.instructor-avatar picture,
.instructor-avatar img { clip-path: polygon(0.0% 47.3%, 2.5% 33.6%, 5.0% 28.1%, 7.5% 24.1%, 10.0% 20.8%, 12.5% 18.0%, 15.0% 15.6%, 17.5% 13.4%, 20.0% 11.6%, 22.5% 9.9%, 25.0% 8.3%, 27.5% 7.0%, 30.0% 5.8%, 32.5% 4.7%, 35.0% 3.7%, 37.5% 2.8%, 40.0% 2.1%, 42.5% 1.4%, 45.0% 0.9%, 47.5% 0.4%, 50.0% 0.0%, 52.5% 0.4%, 55.0% 0.9%, 57.5% 1.4%, 60.0% 2.1%, 62.5% 2.8%, 65.0% 3.7%, 67.5% 4.7%, 70.0% 5.8%, 72.5% 7.0%, 75.0% 8.3%, 77.5% 9.9%, 80.0% 11.6%, 82.5% 13.4%, 85.0% 15.6%, 87.5% 18.0%, 90.0% 20.8%, 92.5% 24.1%, 95.0% 28.1%, 97.5% 33.6%, 100.0% 47.3%, 100% 100%, 0 100%); }

/* --- Galerie et photos d'articles : liseré d'or intérieur --- */
.blog-post-content .img-pair picture { position: relative; }
.gallery-item::before,
.blog-post-content .img-pair picture::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(224, 197, 106, 0.85);
  pointer-events: none;
  z-index: 1;
}
.blog-post-content .img-pair picture { display: block; }

/* --- Pied de page : le roi gisant, échec et mat --- */
.footer-bottom { flex-wrap: wrap; }
.footer-bottom::before {
  content: '';
  display: block;
  flex: 0 0 100%;
  width: 100%;
  height: 54px;
  margin-bottom: var(--space-6);
  background: var(--color-gold);
  opacity: 0.75;
  -webkit-mask: url('../assets/img/ornements/gisant.svg') center / contain no-repeat;
  mask: url('../assets/img/ornements/gisant.svg') center / contain no-repeat;
}

@media (max-width: 640px) {
  .page-hero::after { width: 260px; right: -80px; }
  .hero::after { width: 80vw; right: 10vw; opacity: 0.14; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero::after { animation: none; }
}

/* --- Page « Ils nous inspirent » --- */
.inspire-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}
.inspire-card {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: var(--space-6);
  align-items: start;
  background: var(--color-bg-card);
  border: var(--border-subtle);
  padding: var(--space-6);
  min-width: 0;
}
.inspire-window { clip-path: polygon(0.0% 47.3%, 2.5% 33.6%, 5.0% 28.1%, 7.5% 24.1%, 10.0% 20.8%, 12.5% 18.0%, 15.0% 15.6%, 17.5% 13.4%, 20.0% 11.6%, 22.5% 9.9%, 25.0% 8.3%, 27.5% 7.0%, 30.0% 5.8%, 32.5% 4.7%, 35.0% 3.7%, 37.5% 2.8%, 40.0% 2.1%, 42.5% 1.4%, 45.0% 0.9%, 47.5% 0.4%, 50.0% 0.0%, 52.5% 0.4%, 55.0% 0.9%, 57.5% 1.4%, 60.0% 2.1%, 62.5% 2.8%, 65.0% 3.7%, 67.5% 4.7%, 70.0% 5.8%, 72.5% 7.0%, 75.0% 8.3%, 77.5% 9.9%, 80.0% 11.6%, 82.5% 13.4%, 85.0% 15.6%, 87.5% 18.0%, 90.0% 20.8%, 92.5% 24.1%, 95.0% 28.1%, 97.5% 33.6%, 100.0% 47.3%, 100% 100%, 0 100%); background: var(--color-gold); padding: 1.5px; }
.inspire-window-in { clip-path: polygon(0.0% 47.3%, 2.5% 33.6%, 5.0% 28.1%, 7.5% 24.1%, 10.0% 20.8%, 12.5% 18.0%, 15.0% 15.6%, 17.5% 13.4%, 20.0% 11.6%, 22.5% 9.9%, 25.0% 8.3%, 27.5% 7.0%, 30.0% 5.8%, 32.5% 4.7%, 35.0% 3.7%, 37.5% 2.8%, 40.0% 2.1%, 42.5% 1.4%, 45.0% 0.9%, 47.5% 0.4%, 50.0% 0.0%, 52.5% 0.4%, 55.0% 0.9%, 57.5% 1.4%, 60.0% 2.1%, 62.5% 2.8%, 65.0% 3.7%, 67.5% 4.7%, 70.0% 5.8%, 72.5% 7.0%, 75.0% 8.3%, 77.5% 9.9%, 80.0% 11.6%, 82.5% 13.4%, 85.0% 15.6%, 87.5% 18.0%, 90.0% 20.8%, 92.5% 24.1%, 95.0% 28.1%, 97.5% 33.6%, 100.0% 47.3%, 100% 100%, 0 100%); background: var(--color-bg-card); padding: 6px; }
.inspire-window picture,
.inspire-window img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; clip-path: polygon(0.0% 47.3%, 2.5% 33.6%, 5.0% 28.1%, 7.5% 24.1%, 10.0% 20.8%, 12.5% 18.0%, 15.0% 15.6%, 17.5% 13.4%, 20.0% 11.6%, 22.5% 9.9%, 25.0% 8.3%, 27.5% 7.0%, 30.0% 5.8%, 32.5% 4.7%, 35.0% 3.7%, 37.5% 2.8%, 40.0% 2.1%, 42.5% 1.4%, 45.0% 0.9%, 47.5% 0.4%, 50.0% 0.0%, 52.5% 0.4%, 55.0% 0.9%, 57.5% 1.4%, 60.0% 2.1%, 62.5% 2.8%, 65.0% 3.7%, 67.5% 4.7%, 70.0% 5.8%, 72.5% 7.0%, 75.0% 8.3%, 77.5% 9.9%, 80.0% 11.6%, 82.5% 13.4%, 85.0% 15.6%, 87.5% 18.0%, 90.0% 20.8%, 92.5% 24.1%, 95.0% 28.1%, 97.5% 33.6%, 100.0% 47.3%, 100% 100%, 0 100%); }
.inspire-body { display: grid; gap: var(--space-2); min-width: 0; }
.inspire-kicker { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 600; color: var(--color-gold); margin: 0; }
.inspire-dates { font-size: var(--text-sm); color: var(--color-gray); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; margin: 0; }
.inspire-text { color: var(--color-cream-dim); margin: 0; }
.inspire-lesson { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-gold-glow); display: grid; gap: var(--space-1); }
.inspire-lesson-title { font-family: 'UnifrakturMaguntia', var(--font-heading); font-size: var(--text-2xl); line-height: 1.1; color: var(--color-gold); }
.inspire-lesson p { margin: 0; font-size: var(--text-sm); color: var(--color-cream-dim); }
.inspire-credit { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-gray); }

@media (max-width: 860px) {
  .inspire-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .inspire-card { grid-template-columns: 1fr; }
  .inspire-window { max-width: 200px; }
}