/*
Theme Name: Le Courrier de Bukavu Pro
Theme URI: https://lecourrierdebukavu.com
Author: Rédaction Le Courrier de Bukavu
Author URI: https://lecourrierdebukavu.com
Description: Thème WordPress d'information journalistique et portail radio FM 98.5 en direct pour Le Courrier de Bukavu (Sud-Kivu, RDC). Palette officielle Bleu Congo et Rouge Éditorial, lecteur de streaming audio persistant (Icecast/Shoutcast), bandeau Flash Info en temps réel, podcasts, gestion des publicités et 100% personnalisable depuis l'administration WordPress.
Version: 1.2.3
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lecourrierdebukavu
Tags: news, magazine, radio, streaming, audio, custom-colors, custom-header, custom-menu, custom-logo, featured-images, theme-options, widgets, translation-ready
*/

/* Base Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;800;900&family=Playfair+Display:ital,wght@0,600;0,700;0,800;0,900;1,600;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  /* Palette Officielle Bleu & Rouge - Personnalisable dans Apparence > Personnaliser */
  --cb-blue-primary: #0b2545;     /* Bleu Nuit Institutionnel */
  --cb-blue-nav: #0f2c59;         /* Bleu Navigation Rubriques */
  --cb-blue-light: #1e3a8a;       /* Bleu Cobalt Accent */
  --cb-red-primary: #c53030;      /* Rouge Editorial & Flash Info */
  --cb-red-vivid: #dc2626;        /* Rouge Direct FM & Alertes */
  --cb-gold: #d97706;             /* Or / Étoile RDC */
  --cb-dark: #0a192f;             /* Fond Sombre Régie */
  --cb-bg: #f8fafc;               /* Fond Page Clair */
  --cb-border: #e2e8f0;           /* Bordures Discrètes */
}

/* 1. Plein Écran & Fluidité Totale (Anti-Boxed / Anti-Centrage restreint) */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--cb-bg);
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
}

#page, .site, .site-content, #masthead, #primary, #colophon, #cb-persistent-player {
  width: 100% !important;
  max-width: 100% !important;
}

/* Annule le bridage WordPress 6.x (.is-layout-constrained) qui comprime le site au centre à 840px */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.wp-site-blocks,
.wp-block-group {
  max-width: 100% !important;
  width: 100% !important;
}

/* Conteneurs larges pour grand écran */
.cb-wide-container {
  width: 100%;
  max-width: 1720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .cb-wide-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .cb-wide-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* 2. Pied de Page Institutionnel Garanti 100% Visible & Plein Écran */
footer#colophon,
#colophon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-width: 100% !important;
  background-color: #0a192f !important;
  background: #0a192f !important;
  color: #cbd5e1 !important;
  border-top: 4px solid var(--cb-red-primary, #c53030) !important;
  clear: both !important;
  position: relative !important;
  z-index: 40 !important;
  margin-top: 3rem !important;
  padding-top: 3rem !important;
  padding-bottom: 7.5rem !important; /* Dégagement obligatoire au-dessus du lecteur audio fixe */
  box-sizing: border-box !important;
}

#colophon h3,
#colophon h4 {
  color: #ffffff !important;
  font-weight: 700;
}

#colophon p,
#colophon span,
#colophon li {
  color: #cbd5e1 !important;
}

#colophon a {
  color: #94a3b8 !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

#colophon a:hover {
  color: #ef4444 !important;
}

#colophon .newsletter-box,
#colophon div[class*="bg-[#0B1E36]"],
#colophon div[class*="0B1E36"] {
  background-color: #0b1e36 !important;
  border: 1px solid #1e3a8a !important;
  border-radius: 1rem !important;
  color: #ffffff !important;
}

#colophon input[type="email"] {
  background-color: #071324 !important;
  color: #ffffff !important;
  border: 1px solid #1e3a8a !important;
}

/* 3. Lecteur Audio Persistant 98.5 FM */
#cb-persistent-player {
  display: block !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background-color: #0a192f !important;
  border-top: 2px solid var(--cb-red-primary, #c53030) !important;
}

/* Utilitaires généraux */
.hidden {
  display: none !important;
}

/* Typographie de presse */
.font-cinzel {
  font-family: 'Cinzel', serif;
}

.font-editorial {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Classes utilitaires de la charte graphique Bleu & Rouge */
.cb-bg-blue {
  background-color: var(--cb-blue-primary);
}

.cb-bg-blue-nav {
  background-color: var(--cb-blue-nav);
}

.cb-text-blue {
  color: var(--cb-blue-primary);
}

.cb-bg-red {
  background-color: var(--cb-red-primary);
}

.cb-text-red {
  color: var(--cb-red-primary);
}

.cb-border-red {
  border-color: var(--cb-red-primary);
}

/* Normalisation WordPress */
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

.alignright {
  float: right;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.wp-caption {
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.wp-caption-text {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 0.5rem;
  font-style: italic;
}

/* ==========================================================================
   5. NAVIGATION DES ACTUALITÉS & PAGINATION ÉQUILIBRÉE
   ========================================================================== */
/* Masquage accessible pour le titre h2 généré par WordPress (the_posts_pagination) */
.screen-reader-text {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f8fafc !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 0 2px 2px rgba(11, 37, 69, 0.6) !important;
  clip: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  color: #0b2545 !important;
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  height: auto !important;
  left: 0.5rem !important;
  line-height: normal !important;
  padding: 0.75rem 1rem !important;
  text-decoration: none !important;
  top: 0.5rem !important;
  width: auto !important;
  z-index: 100000 !important;
}

/* Conteneur principal de Navigation des Actualités */
.cb-pagination,
.pagination,
.navigation.pagination,
.posts-navigation,
.post-navigation,
#pagination-actualites {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2.5rem !important;
  margin-bottom: 2rem !important;
  padding: 1.25rem 1rem !important;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
  clear: both !important;
  box-sizing: border-box !important;
}

/* En-tête / Label "Navigation des actualités" */
.cb-pagination-header,
.cb-pagination-title,
.pagination-title,
#pagination-actualites .cb-pagination-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #475569 !important;
  margin-bottom: 0.875rem !important;
  text-align: center !important;
}

.cb-pagination-header::before,
.cb-pagination-header::after {
  content: "" !important;
  display: inline-block !important;
  width: 1.25rem !important;
  height: 2px !important;
  background-color: #cbd5e1 !important;
  border-radius: 2px !important;
}

/* Liste des liens de navigation */
.cb-pagination ul.page-numbers,
ul.page-numbers,
.navigation.pagination .nav-links,
.nav-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cb-pagination ul.page-numbers li,
ul.page-numbers li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
}

/* Boutons numérotés et éléments de page */
.page-numbers,
.nav-links a,
.nav-links span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.35rem !important;
  height: 2.35rem !important;
  padding: 0 0.75rem !important;
  border-radius: 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

a.page-numbers:hover,
.nav-links a:hover {
  background-color: #0b2545 !important;
  color: #ffffff !important;
  border-color: #0b2545 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 6px -1px rgba(11, 37, 69, 0.2) !important;
}

/* Page active / courante */
.page-numbers.current,
span.page-numbers.current,
.nav-links span.current {
  background-color: #0b2545 !important;
  color: #ffffff !important;
  border-color: #0b2545 !important;
  box-shadow: 0 4px 6px -1px rgba(11, 37, 69, 0.25) !important;
  cursor: default !important;
  font-weight: 900 !important;
}

/* Séparateur pointillé (...) */
.page-numbers.dots,
.nav-links span.dots {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #94a3b8 !important;
  font-weight: 800 !important;
  font-size: 1.125rem !important;
  min-width: 1.5rem !important;
}

/* Boutons Précédent et Suivant */
.page-numbers.prev,
.page-numbers.next,
a.prev.page-numbers,
a.next.page-numbers,
.nav-links .prev,
.nav-links .next {
  padding: 0 1rem !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

.page-numbers.prev:hover,
.page-numbers.next:hover,
a.prev.page-numbers:hover,
a.next.page-numbers:hover,
.nav-links .prev:hover,
.nav-links .next:hover {
  background-color: #be123c !important;
  border-color: #be123c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(190, 18, 60, 0.25) !important;
}