/* ============================================================
   1. LAYOUTS & HÉROS NATIFS
   ============================================================ */
.cp-container {
  width: min(var(--cp-content-wide-size, 1240px), calc(100% - 2 * var(--cp-gutter, 16px)));
  max-width: var(--cp-content-wide-size, 1240px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* En-tête de Page / Hero Banner Majeur & Aéré */
.cp-page-hero,
.hero-section {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%);
  color: #ffffff;
  padding-top: clamp(8.5rem, 12vw, 11.5rem) !important;
  padding-bottom: clamp(4.5rem, 6vw, 6.5rem) !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-top: 0 !important;
  margin-bottom: 3.5rem;
  border-radius: 0 0 var(--cp-radius-md, 16px) var(--cp-radius-md, 16px);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Compensation parfaite si l'admin-bar WordPress est active */
body.admin-bar .cp-page-hero,
body.admin-bar .hero-section {
  padding-top: calc(clamp(8.5rem, 12vw, 11.5rem) + 32px) !important;
}

@media (max-width: 782px) {
  .cp-page-hero,
  .hero-section {
    padding-top: clamp(7.5rem, 14vw, 9.5rem) !important;
    padding-bottom: clamp(4.5rem, 6vw, 6.5rem) !important;
    margin-bottom: 2.5rem;
  }
  body.admin-bar .cp-page-hero,
  body.admin-bar .hero-section {
    padding-top: calc(clamp(7.5rem, 14vw, 9.5rem) + 46px) !important;
  }
}

.cp-page-hero-inner {
  width: min(var(--cp-content-wide-size, 1240px), calc(100% - 2 * var(--cp-gutter, 16px)));
  max-width: var(--cp-content-wide-size, 1240px);
  margin: 0 auto;
  box-sizing: border-box;
}

.cp-page-subtitle {
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cp-color-secondary, #EB7630);
  font-weight: 800;
  margin-bottom: 0.85rem;
}

/* Catégories dynamiques d'articles et événements (wp:post-terms dans cp-page-hero) */
.cp-page-hero .wp-block-post-terms.cp-page-subtitle,
.wp-block-post-terms.cp-page-subtitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.95rem;
}

/* Masquage de la virgule séparatrice Gutenberg pour des pastilles propres */
.cp-page-hero .wp-block-post-terms.cp-page-subtitle .wp-block-post-terms__separator,
.wp-block-post-terms.cp-page-subtitle .wp-block-post-terms__separator {
  display: none !important;
}

/* Pastilles Pilules Orange Éclatantes (Haute Visibilité & Conforme WCAG AAA sur fond sombre) */
.cp-page-subtitle a,
.cp-page-hero .cp-page-subtitle a,
.wp-block-post-terms.cp-page-subtitle a {
  display: inline-flex;
  align-items: center;
  background: var(--cp-color-secondary, #EB7630) !important;
  color: #FFFFFF !important;
  border-radius: var(--cp-radius-pill, 50px) !important;
  padding: 0.35rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none !important;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  border: none !important;
}

.cp-page-subtitle a:hover,
.cp-page-hero .cp-page-subtitle a:hover,
.wp-block-post-terms.cp-page-subtitle a:hover {
  background: var(--cp-color-secondary, #EB7630) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(235, 118, 48, 0.45);
}

.cp-page-title {
  font-size: var(--cp-h1-size, clamp(2.2rem, 4vw, 3.4rem));
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 1rem;
  line-height: 1.15;
}

.cp-post-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: var(--cp-info-size);
  color: #94A3B8;
  flex-wrap: wrap;
}

.cp-post-meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cp-post-meta-item i {
  color: var(--cp-color-secondary);
}

.cp-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: inherit;
  color: #94A3B8;
}

.cp-reading-time i {
  color: var(--cp-color-secondary);
}

/* Layout 2 colonnes (Contenu principal + Sidebar) */
.cp-single-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 3.5rem;
  margin-bottom: 4rem;
}

.cp-single-layout.no-sidebar {
  grid-template-columns: 1fr;
  max-width: var(--wp--style--global--content-size, 100%);
  margin-left: auto;
  margin-right: auto;
}