/* Styles personnalisés pour la page blog */

/* Style pour la catégorie active */
.categories a.active-category {
  position: relative;
  padding-left: 10px;
}

.categories a.active-category::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: #ff0a54;
}

/* Ajout d'un ID pour le défilement */
#articles {
  scroll-margin-top: 100px; /* Espace pour éviter que le contenu soit caché sous la navbar */
}

/* Surlignage du tag actif (page blog) */
.tagcloud a.active-tag {
  background: #ff0a54; /* rose du site */
  border-color: #ff0a54;
  color: #fff;
}

/* Style des tags non cliquables dans la page article */
.tagcloud .tag-chip {
  text-transform: uppercase;
  display: inline-block;
  padding: 4px 10px;
  margin: 0 7px 7px 0;
  color: #000;
  border: 1px solid #ccc;
  font-size: 11px;
  border-radius: 4px;
}

/* Rendre les tags de la page article non cliquables tout en gardant le style */
.tagcloud a.disabled {
  pointer-events: none;
  cursor: default;
}

/* Navbar blanche sur les pages d'articles */
.blog-single .ftco-navbar-light {
  background: #fff !important;
}

.blog-single .ftco-navbar-light .navbar-brand {
  color: #000 !important;
}

.blog-single .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
  color: #000 !important;
}

.blog-single .ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover,
.blog-single .ftco-navbar-light .navbar-nav > .nav-item > .nav-link:focus {
  color: #ff0a54 !important; /* garder le rose au survol */
}

.blog-single .ftco-navbar-light .navbar-nav > .nav-item.active > a {
  color: #000 !important;
}

.blog-single .ftco-navbar-light.scrolled {
  background: #fff !important;
}

.blog-single .ftco-navbar-light.scrolled .navbar-nav > .nav-item > .nav-link {
  color: #000 !important;
}

@media (max-width: 991.98px) {
  .blog-single .ftco-navbar-light {
    background: #fff !important; /* override mobile noir par défaut */
  }
  .blog-single .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
    color: #000 !important;
  }
  .blog-single .ftco-navbar-light .navbar-toggler {
    color: #000 !important;
  }
}

/* Page article : titres « Articles Récents » en noir (sidebar droite) */
body.blog-single #main-content .block-21 .text .heading-1 a,
body.blog-single #main-content .block-21 .text h3.heading-1 a {
  color: #000000 !important;
}
body.blog-single #main-content .block-21 .text .heading-1 a:hover,
body.blog-single #main-content .block-21 .text .heading-1 a:focus {
  color: #1a1a1a !important;
}

/*
 * Liste des actualités (body.page-blog) — contenu uniquement.
 * La barre de navigation reprend le comportement global (style.css + hero-section).
 */
body.page-blog .slider-text .bread {
  color: #fff !important;
}
body.page-blog .slider-text .breadcrumbs span {
  color: rgba(255, 255, 255, 0.92) !important;
}

body.page-blog #main-content .tagcloud a.active-tag {
  background: #ff0a54 !important;
  border-color: #ff0a54 !important;
  color: #ffffff !important;
}

body.page-blog #main-content .blog-entry .text .heading a,
body.page-blog #main-content .blog-entry .text h3 a,
body.page-blog #main-content .blog-entry h3.heading a {
  color: #000000 !important;
}
body.page-blog #main-content .blog-entry .text .heading a:hover,
body.page-blog #main-content .blog-entry .text .heading a:focus,
body.page-blog #main-content .blog-entry h3.heading a:hover,
body.page-blog #main-content .blog-entry h3.heading a:focus {
  color: #1a1a1a !important;
}

body.page-blog #main-content .blog-entry .meta > div,
body.page-blog #main-content .blog-entry .meta > div a,
body.page-blog #main-content .blog-entry .meta > div a span {
  color: #555555 !important;
}

body.page-blog #main-content .block-21 .text .heading-1 a,
body.page-blog #main-content .block-21 .text .heading-1 a:hover,
body.page-blog #main-content .block-21 .text .heading-1 a:focus {
  color: #000000 !important;
}

body.page-blog #main-content .sidebar .heading-section .subheading,
body.page-blog #main-content .heading-section .subheading,
body.page-blog #main-content .sidebar .categories a,
body.page-blog #main-content .sidebar-box .heading-2,
body.page-blog #main-content .tagcloud a:not(.active-tag):not(.disabled) {
  color: #000000 !important;
}

/* Nombre d’articles entre parenthèses : gris (#808080), nom de catégorie reste noir */
body.page-blog #main-content .sidebar .categories li a > span {
  color: rgb(128, 128, 128) !important;
}

body.page-blog #main-content .block-27 ul li a,
body.page-blog #main-content .block-27 ul li span {
  color: #000000 !important;
}

body.page-blog #main-content .block-27 ul li.active span,
body.page-blog #main-content .block-27 ul li.active a {
  background: #ff0a54 !important;
  border-color: #ff0a54 !important;
  color: #ffffff !important;
}

body.page-blog #main-content .categories a.active-category {
  color: #000000 !important;
}

/* Conteneur principal de l'article : empêche tout débordement latéral.
   Le sélecteur n'inclut plus .ftco-animate pour rester stable quelle que
   que soit l'étape de l'animation waypoint. */
body.blog-single .ftco-section .col-lg-8 {
  overflow: hidden;
  min-width: 0;
}

/* Wrapper sémantique injecté par renderSinglePost — couche de confinement
   intermédiaire entre le contenu riche et la colonne Bootstrap. */
body.blog-single .blog-article-body {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Filet de sécurité : toute <img> à l'intérieur du corps de l'article
   est contrainte à la largeur de son parent, quelle que soit sa taille
   intrinsèque (images haute résolution du CDN Sanity). */
body.blog-single .blog-article-body img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Images dans le corps de l'article (page article) */
body.blog-single .blog-body-figure {
  margin: 1.5rem 0;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}

body.blog-single .blog-body-image {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
  object-fit: contain;
}