:root {
    /* Polices d'écriture */
    
    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'Archivo', sans-serif;

    /* Palette de Couleurs (À modifier selon vos besoins) */
    --primary-color: #2563eb;       /* Bleu principal */
    --secondary-color: #1e293b;     /* Couleur secondaire sombre */
    --accent-color:#ff5a1f;        /* Couleur d'accentuation (orange/or) */
    
    --bg-color: #ffffff;            /* Fond de page principal */
    --bg-surface: #f8fafc;          /* Fond pour les cartes, sections, etc. */
    --bg-section: #ebf5fc52;          /* Fond pour les cartes, sections, etc. */
    
    --text-color: #0f172a;          /* Texte principal (très sombre) */
    --text-muted: #64748b;          /* Texte secondaire / estompé */
    
    --border-color: #e2e8f0;        /* Couleur des bordures et lignes */
}
@font-face {
    font-family: 'Archivo';
    src: url('../fonts/Archivo/Archivo-Bold.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Archivo';
    src: url('../fonts/Archivo/Archivo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Archivo';
    src: url('../fonts/Archivo/Archivo-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Archivo';
    src: url('../fonts/Archivo/Archivo-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Archivo';
    src: url('../fonts/Archivo/Archivo-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Version Droite (Regular, Bold, etc.) */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations'),
         url('../fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900; /* Supporte toutes les épaisseurs de 100 à 900 */
    font-style: normal;
}

/* Version Italique (Italic, MediumItalic, BoldItalic, etc.) */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations'),
         url('../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}
/* ==========================================================================
   DESIGN DES SECTIONS ARTICLES & VIDÉOS GLADIMY JEAN
   ========================================================================== */

/* Structure Générale */
.content-section-post {
  padding: 80px 0;
  background-color: #f8fafc;
  font-family: var(--font-primary);
}

.videos-section-post {
  background-color: #ffffff;
}

/* En-têtes de Sections */
.section-header-post {
  margin-bottom: 45px;
  position: relative;
}

.section-title-post {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-color);
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}

.section-title-post::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #ff0000, #ff6b6b);
  border-radius: 2px;
}

.videos-section-post .section-title-post::after {
  background: linear-gradient(90deg, #ff0000, #ff6b6b);
}

.section-subtitle-post {
  color: #64748b;
  font-size: 1.05rem;
  margin: 0;
}

/* Grille Responsive */
.grid-layout-post {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

/* --------------------------------------------------------------------------
   CARTES ARTICLES
   -------------------------------------------------------------------------- */
.article-card-post {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
}

.article-card-post:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 30px rgba(11, 26, 61, 0.12);
}

.article-card-media-post {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #e2e8f0;
}

.article-card-media-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.article-card-post:hover .article-card-media-post img {
  transform: scale(1.08);
}

.article-tag-post {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(11, 26, 61, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.article-card-content-post {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.article-title-post {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
  color: #1e293b;
  margin-bottom: 20px;
  flex-grow: 1;
}

.btn-read-post {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0d6efd;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.btn-read-post:hover {
  color: #0b1a3d;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   CARTES VIDÉOS YOUTUBE
   -------------------------------------------------------------------------- */
.video-card-post {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.video-card-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(255, 0, 0, 0.1);
}

.video-embed-responsive-post {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  background-color: #000;
}

.video-embed-responsive-post iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-card-body-post {
  padding: 18px 20px;
  flex-grow: 1;
}

.video-card-title-post {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   PAGINATION
   -------------------------------------------------------------------------- */
.pagination-wrapper-post {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
}

.page-btn-post {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  color: #334155;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-btn-post:hover:not(:disabled) {
  background-color: #0b1a3d;
  color: #ffffff;
  border-color: #0b1a3d;
}

.page-btn-post.active {
  background-color: #0d6efd;
  color: #ffffff;
  border-color: #0d6efd;
}

.page-btn-post:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dots-post {
  color: #94a3b8;
  padding: 0 6px;
}

.page-info-post {
  text-align: center;
  font-size: 0.9rem;
  color: #64748b;
  margin-top: 15px;
}

/* --------------------------------------------------------------------------
   SECTION CTA (CALL TO ACTION)
   -------------------------------------------------------------------------- */
.cta-section-post {
  background: linear-gradient(135deg, #0b1a3d 0%, #1e3a8a 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.cta-section-post::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 50%;
  pointer-events: none;
}

.cta-text-post {
  color: #cbd5e1 !important;
  font-size: 1.1rem;
  line-height: 1.6;
}

.btn-cta-post {
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
}

.btn-cta-light-post {
  background-color: #ffffff;
  color: #0b1a3d;
}

.btn-cta-light-post:hover {
  background-color: #f1f5f9;
  color: #0d6efd;
  transform: translateY(-2px);
  text-decoration: none;
}

.btn-cta-primary-post {
  background-color: #0d6efd;
  color: #ffffff;
}

.btn-cta-primary-post:hover {
  background-color: #2563eb;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   ANIMATIONS & RESPONSIVE
   -------------------------------------------------------------------------- */
@keyframes fadeInUpPost {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .content-section-post {
    padding: 50px 0;
  }

  .grid-layout-post {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }

  .section-title-post {
    font-size: 1.75rem;
  }

  .btn-cta-post {
    width: 100%;
  }
}