/*

=================================

Blog / Actualités

=================================

*/



/* ========================================

   Page Actualités

======================================== */



.actualites-page {

  padding-top: 8rem;

  background-color: var(--bs-gray-light);

  min-height: 100vh;

}

/* ========================================

   En-tête de la page

======================================== */



.actualites-header {

  text-align: center;

  margin-bottom: 3rem;

  padding-bottom: 2rem;

}



.actualites-title {

  color: var(--bs-gray-dark);

  font-family: var(--heading-font);

  font-size: var(--display-md);

  font-weight: 600;

  margin-bottom: 1rem;

}



.actualites-intro {

  max-width: 700px;

  margin: 0 auto;

  color: var(--bs-gray-medium);

  font-size: var(--text-lg);

  line-height: 1.6;

}



/* ========================================

   Sidebar catégories

======================================== */



.actualites-sidebar {

  background-color: #ffffff;

  border-radius: var(--radius-lg);

  padding: 2rem;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  top: 8rem;

}



.sidebar-title {

  color: var(--bs-gray-dark);

  font-family: var(--heading-font);

  font-size: var(--text-xl);

  font-weight: 600;

  margin-bottom: 1.5rem;

  padding-bottom: 1rem;

  border-bottom: 2px solid var(--bs-gray-light);

}



.category-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



.category-list li {

  margin-bottom: 0.5rem;

}



.category-link {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.75rem 1rem;

  color: var(--bs-gray-dark);

  text-decoration: none;

  border-radius: var(--radius-sm);

  font-size: var(--text-md);

  font-weight: 500;

  transition: all 0.3s ease;

}



.category-link:hover {

  background-color: var(--bs-gray-light);

  color: var(--bs-primary);

  padding-left: 1.25rem;

}



.category-link.active {

  background-color: var(--bs-primary);

  color: #ffffff;

}



.category-link.active:hover {

  background-color: var(--bs-primary);

  color: #ffffff;

}



.category-count {

  font-size: var(--text-sm);

  opacity: 0.7;

}



/* ========================================

   Grille d'articles

======================================== */



.actualites-grid {

  margin-bottom: 3rem;

}



/* ========================================

   Card Article

======================================== */



.post-card {

  height: 100%;

  background-color: #ffffff;

  border-radius: var(--radius-lg);

  overflow: hidden;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  display: flex;

  flex-direction: column;

}



.post-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}



.post-card-link {

  text-decoration: none;

  color: inherit;

  display: flex;

  flex-direction: column;

  height: 100%;

}



/* Image */

.post-card-image {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background-color: var(--bs-gray-light);

}



.post-card-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

}



.post-card:hover .post-card-image img {

  transform: scale(1.05);

}



/* Badge catégorie */

.post-card-category {

  position: absolute;

  top: 1rem;

  left: 1rem;

  background-color: var(--bs-secondary);

  color: var(--bs-primary);

  padding: 0.375rem 0.875rem;

  border-radius: var(--radius-sm);

  font-size: var(--text-xs);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  z-index: 2;

}



/* Contenu */

.post-card-content {

  padding: 1.5rem;

  display: flex;

  flex-direction: column;

  min-height: 150px;

}



/* Date */

.post-card-date {

  display: block;

  color: var(--bs-gray-medium);

  font-size: var(--text-sm);

  font-weight: 500;

  margin-bottom: 0.75rem;

}



/* Titre */

.post-card-title {

  color: var(--bs-gray-dark);

  font-family: var(--heading-font);

  font-size: var(--text-lg);

  font-weight: 600;

  line-height: 1.4;

  margin: 0 0 1rem 0;

  transition: color 0.3s ease;

  min-height: 3.2em;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.post-card:hover .post-card-title {

  color: var(--bs-primary);

}



/* Lire la suite */

.post-card-readmore {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  color: var(--bs-primary);

  font-size: var(--text-md);

  font-weight: 600;

  margin-top: auto;

  transition: gap 0.3s ease;

}



.post-card:hover .post-card-readmore {

  gap: 0.75rem;

}



.post-card-readmore svg {

  width: 16px;

  height: 16px;

  transition: transform 0.3s ease;

}



.post-card:hover .post-card-readmore svg {

  transform: translateX(4px);

}



/* ========================================

   Pagination

======================================== */



.actualites-pagination {

  text-align: center;

  margin-top: 3rem;

  margin-bottom: 8rem;

  display: block;

  width: 100%;

}



.actualites-pagination ul.pagination {

  border: 1px solid rgba(18, 38, 170, 0.35) !important;

  border-right: 1px solid rgba(18, 38, 170, 0.35) !important;

  border-radius: 6px !important;

  overflow: hidden;

  margin: 0 auto !important;

  display: inline-flex !important;

  padding: 0 !important;

  white-space: normal !important;

  list-style: none;

}



.actualites-pagination ul li {

  margin: 0 !important;

  border: none !important;

  display: inline-block;

}



.actualites-pagination ul li a,

.actualites-pagination ul li span {

  display: flex !important;

  align-items: center;

  justify-content: center;

  min-width: 50px;

  height: 50px;

  padding: 0 0.75rem !important;

  margin: 0 !important;

  background-color: transparent !important;

  border: none !important;

  border-right: 1px solid #eee !important;

  border-radius: 0 !important;

  color: var(--bs-primary) !important;

  font-family: 'Poppins', var(--body-font) !important;

  font-size: 16px !important;

  font-weight: 500 !important;

  text-decoration: none !important;

  transition: all 0.3s ease;

  line-height: normal !important;

}



.actualites-pagination ul li:last-child a,

.actualites-pagination ul li:last-child span {

  border-right: none !important;

}



.actualites-pagination ul li a:hover {

  background-color: var(--bs-primary) !important;

  color: #ffffff !important;

}



.actualites-pagination ul li.active span {

  background-color: var(--bs-primary) !important;

  color: #ffffff !important;

}



.actualites-pagination ul li.disabled span {

  opacity: 0.5;

  cursor: not-allowed;

}



/* ========================================

   Page Article Single

======================================== */



/* Hero */

.single-hero {

  position: relative;

  min-height: 500px;

  display: flex;

  align-items: flex-end;

  padding: 8rem 0 5rem;

  background-color: var(--bs-gray-dark);

}



.single-hero-image {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

}



.single-hero-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.single-hero-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(

    to top,

    rgba(0, 0, 0, 0.8) 0%,

    rgba(0, 0, 0, 0.3) 100%

  );

}



.single-hero-content {

  position: relative;

  z-index: 2;

  max-width: 900px;

}



.single-category {

  display: inline-block;

  background-color: var(--bs-secondary);

  color: var(--bs-primary);

  padding: 0.5rem 1.25rem;

  border-radius: var(--radius-sm);

  font-size: var(--text-sm);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-bottom: 1.5rem;

}



.single-title {

  color: #ffffff;

  font-family: var(--heading-font);

  font-size: var(--display-md);

  font-weight: 700;

  line-height: 1.2;

  margin-bottom: 1rem;

}



.single-meta {

  color: rgba(255, 255, 255, 0.9);

  font-size: var(--text-md);

  font-weight: 500;

}



.meta-separator {

  margin: 0 0.5rem;

  opacity: 0.5;

}



/* Contenu de l'article */

.single-article {

  padding: 3rem 0 6rem;

  background-color: #ffffff;

}



.single-content {

  color: var(--bs-gray-dark);

  font-size: var(--text-lg);

  line-height: 1.8;

  margin-bottom: 3rem;

}



.single-content p {

  margin-bottom: 1.5rem;

}



.single-content h2,

.single-content h3,

.single-content h4 {

  font-family: var(--heading-font);

  font-weight: 600;

  color: var(--bs-gray-dark);

  margin-top: 2.5rem;

  margin-bottom: 1.25rem;

}



.single-content h2 {

  font-size: var(--text-2xl);

}



.single-content h3 {

  font-size: var(--text-xl);

}



.single-content h4 {

  font-size: var(--text-lg);

}



.single-content ul,

.single-content ol {

  margin-bottom: 1.5rem;

  padding-left: 2rem;

}



.single-content li {

  margin-bottom: 0.5rem;

}



.single-content img {

  max-width: 100%;

  height: auto;

  border-radius: var(--radius-lg);

  margin: 2rem 0;

}



.single-content blockquote {

  border-left: 4px solid var(--bs-primary);

  padding-left: 1.5rem;

  margin: 2rem 0;

  font-style: italic;

  color: var(--bs-gray-medium);

}



/* Tags */

.single-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

  padding: 2rem 0;

  border-top: 1px solid var(--bs-gray-light);

  margin-bottom: 2rem;

}



.tag-badge {

  display: inline-block;

  padding: 0.5rem 1rem;

  background-color: var(--bs-gray-light);

  color: var(--bs-gray-dark);

  border-radius: var(--radius-sm);

  font-size: var(--text-sm);

  font-weight: 500;

  text-decoration: none;

  transition: all 0.3s ease;

}



.tag-badge:hover {

  background-color: var(--bs-primary);

  color: #ffffff;

}



/* Navigation entre articles */

.single-navigation {

  margin-top: 3rem;

  padding-top: 3rem;

  border-top: 2px solid var(--bs-gray-light);

}



.nav-card {

  display: block;

  position: relative;

  padding: 2rem;

  background-color: var(--bs-gray-light);

  border-radius: var(--radius-lg);

  text-decoration: none;

  transition: all 0.3s ease;

  height: 100%;

}



.nav-card:hover {

  background-color: var(--bs-primary);

  transform: translateY(-5px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}



.nav-card:hover .nav-label,

.nav-card:hover .nav-title {

  color: #ffffff;

}



.nav-card:hover svg {

  stroke: #ffffff;

}



.nav-label {

  display: block;

  font-size: var(--text-sm);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  color: var(--bs-gray-medium);

  margin-bottom: 0.75rem;

  transition: color 0.3s ease;

}



.nav-title {

  font-family: var(--heading-font);

  font-size: var(--text-lg);

  font-weight: 600;

  color: var(--bs-gray-dark);

  line-height: 1.4;

  margin: 0;

  transition: color 0.3s ease;

}



.nav-card svg {

  position: absolute;

  transition: all 0.3s ease;

}



.nav-prev svg {

  left: 2rem;

  bottom: 2rem;

}



.nav-next svg {

  right: 2rem;

  bottom: 2rem;

}



.nav-prev:hover svg {

  transform: translateX(-5px);

}



.nav-next:hover svg {

  transform: translateX(5px);

}



/* Page links pagination */

.page-links {

  margin-top: 2rem;

  padding-top: 2rem;

  border-top: 1px solid var(--bs-gray-light);

}



.page-links-title {

  font-weight: 600;

  margin-right: 1rem;

}



.page-number {

  display: inline-block;

  padding: 0.5rem 1rem;

  background-color: var(--bs-primary);

  color: #ffffff;

  border-radius: var(--radius-sm);

  text-decoration: none;

  margin-right: 0.5rem;

  transition: all 0.3s ease;

}



.page-number:hover {

  background-color: var(--bs-gray-dark);

}



/* ========================================

   Responsive

======================================== */



@media (max-width: 768px) {

  .actualites-page {

    padding-top: 6rem;

  }



  .actualites-title {

    font-size: var(--display-sm);

  }



  .actualites-sidebar {

    position: static;

    padding: 1.5rem;

  }



  .sidebar-title {

    font-size: var(--text-lg);

    margin-bottom: 1rem;

  }



  .category-link {

    font-size: var(--text-sm);

    padding: 0.5rem 0.75rem;

  }



  .post-card-content {

    padding: 1.25rem;

  }



  .post-card-title {

    font-size: var(--text-lg);

  }



  /* Single article */

  .single-hero {

    min-height: 400px;

    padding: 6rem 0 3rem;

  }



  .single-title {

    font-size: var(--display-sm);

  }



  .single-meta {

    font-size: var(--text-sm);

  }



  .single-article {

    padding: 2rem 0 4rem;

  }



  .single-content {

    font-size: var(--text-md);

  }



  .nav-card {

    padding: 1.5rem;

  }



  .nav-title {

    font-size: var(--text-md);

  }



  .nav-card svg {

    width: 16px;

    height: 16px;

  }



  .nav-prev svg {

    left: 1.5rem;

    bottom: 1.5rem;

  }



  .nav-next svg {

    right: 1.5rem;

    bottom: 1.5rem;

  }

}