/* Restyle visuel du Journal (blog) — Task 11.
   Chargé uniquement sous le drapeau preview (cf. functions.php), mais les
   sélecteurs restent scopés body.cl-refonte-preview en défense en profondeur.
   Additif : aucun display:none sur du contenu existant (fil d'Ariane, FAQ,
   temps de lecture, barre de progression, publications similaires).
   Pas de nouveau gabarit : le rendu de la boucle d'articles vient du thème
   Kadence standard (confirmé dans refonte-maquette/notes/architecture-shell.md,
   aucun wp_template_part dédié au blog). */

/* ══════════════════════════════════════════════════════════
   HERO D'ARCHIVE — page /blog/ et pages catégorie
══════════════════════════════════════════════════════════ */

body.cl-refonte-preview .post-archive-hero-section {
  background: var(--bg2, #E6E8D7) !important;
}

body.cl-refonte-preview .post-archive-hero-section .page-title.archive-title {
  font-family: 'EB Garamond', serif !important;
  color: var(--ink, #1B241D) !important;
}

/* ══════════════════════════════════════════════════════════
   HARMONISATION DES CARTES MAGAZINE EXISTANTES (page /blog/)
   La grille "cartes magazine" (vedette + survol) existe déjà en production
   dans style.css (body.blog), avec un vert #5E8C4A codé en dur. On bascule
   ce badge sur le token --accent pour suivre la palette jour/nuit de la
   refonte, sans toucher à la structure.
══════════════════════════════════════════════════════════ */

body.cl-refonte-preview.blog .entry-list-item .category-links a {
  background: var(--accent, #C98B3B) !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
}

body.cl-refonte-preview.blog .entry-list-item .entry-title {
  font-family: 'Hanken Grotesk', sans-serif !important;
}

body.cl-refonte-preview.blog .entry-list-item .entry-meta,
body.cl-refonte-preview.blog .entry-list-item .entry-meta * {
  font-family: 'Hanken Grotesk', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════
   EXTENSION DU MÊME STYLE DE CARTE AUX PAGES CATÉGORIE
   Les archives catégorie (is_category(), ex. /category/blog/) partagent le
   même gabarit Kadence (#archive-container > li.entry-list-item >
   article.loop-entry, confirmé par lecture du rendu de /category/blog/) mais
   n'avaient jusqu'ici aucun style magazine : carte blanche Kadence par
   défaut. On reprend la même mécanique (image plein cadre + voile dégradé +
   premier article mis en avant) pour rester cohérent avec la page /blog/.
══════════════════════════════════════════════════════════ */

body.cl-refonte-preview.category #primary,
body.cl-refonte-preview.category .content-area {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 40px 24px !important;
}

body.cl-refonte-preview.category ul.content-wrap.kadence-posts-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.cl-refonte-preview.category .entry-list-item {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--radius, 12px) !important;
  height: 280px !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: transform .4s ease, box-shadow .4s ease !important;
  list-style: none !important;
}
body.cl-refonte-preview.category .entry-list-item:first-child { height: 420px !important; }
body.cl-refonte-preview.category .entry-list-item:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,.3) !important;
  transform: translateY(-2px) !important;
}

body.cl-refonte-preview.category .entry-list-item .loop-entry {
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  isolation: isolate !important;
}

body.cl-refonte-preview.category .entry-list-item .post-thumbnail {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body.cl-refonte-preview.category .entry-list-item .post-thumbnail-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding-bottom: 0 !important;
}
body.cl-refonte-preview.category .entry-list-item .post-thumbnail img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform .6s ease !important;
  max-width: none !important;
  padding: 0 !important;
}
body.cl-refonte-preview.category .entry-list-item:hover .post-thumbnail img {
  transform: scale(1.04) !important;
}

body.cl-refonte-preview.category .entry-list-item .entry-content-wrap {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.60) 35%,
    rgba(0,0,0,.15) 60%,
    transparent 80%
  ) !important;
  box-shadow: none !important;
}

body.cl-refonte-preview.category .entry-list-item .entry-header {
  padding: 20px 24px 16px !important;
}
body.cl-refonte-preview.category .entry-list-item .entry-taxonomies { margin-bottom: 8px !important; }

body.cl-refonte-preview.category .entry-list-item .category-links a {
  display: inline-block !important;
  background: var(--accent, #C98B3B) !important;
  color: #fff !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  text-decoration: none !important;
}

body.cl-refonte-preview.category .entry-list-item .entry-title {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: clamp(15px, 2vw, 22px) !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.6) !important;
}
body.cl-refonte-preview.category .entry-list-item .entry-title a {
  color: #fff !important;
  text-decoration: none !important;
}

body.cl-refonte-preview.category .entry-list-item .entry-meta,
body.cl-refonte-preview.category .entry-list-item .entry-meta * {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 10px !important;
  color: rgba(255,255,255,.65) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

body.cl-refonte-preview.category .entry-list-item .entry-summary { display: none !important; }
body.cl-refonte-preview.category .entry-list-item:first-child .entry-summary {
  display: block !important;
  font-family: 'EB Garamond', serif !important;
  font-style: italic !important;
  font-size: 14px !important;
  color: rgba(255,255,255,.80) !important;
  margin: 4px 0 0 !important;
  line-height: 1.5 !important;
}
body.cl-refonte-preview.category .entry-list-item .entry-summary p {
  color: rgba(255,255,255,.80) !important;
  margin: 0 !important;
}

body.cl-refonte-preview.category .entry-list-item .entry-footer,
body.cl-refonte-preview.category .entry-list-item .more-link { display: none !important; }

@media (min-width: 768px) {
  body.cl-refonte-preview.category ul.content-wrap.kadence-posts-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body.cl-refonte-preview.category .entry-list-item:first-child { grid-column: 1 / -1 !important; }
}
@media (max-width: 767px) {
  body.cl-refonte-preview.category .entry-list-item { height: 230px !important; }
  body.cl-refonte-preview.category .entry-list-item:first-child { height: 300px !important; }
  body.cl-refonte-preview.category .entry-list-item:first-child .entry-summary { display: none !important; }
  body.cl-refonte-preview.category .entry-list-item .entry-header { padding: 14px 16px 12px !important; }
}

/* ══════════════════════════════════════════════════════════
   PAGINATION — restylée en pastilles, cohérente avec la galerie (Task 9)
══════════════════════════════════════════════════════════ */

body.cl-refonte-preview nav.navigation.pagination {
  margin-top: clamp(32px, 4vw, 56px);
}

body.cl-refonte-preview nav.navigation.pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

body.cl-refonte-preview nav.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--card, #F4F0E6);
  border: 1px solid var(--line, #D6E0C6);
  color: var(--ink, #1B241D);
  font: 600 14px 'Hanken Grotesk', sans-serif;
  text-decoration: none;
  transition: background-color .3s, color .3s, border-color .3s;
}

body.cl-refonte-preview nav.navigation.pagination .page-numbers:hover:not(.current) {
  background: color-mix(in srgb, var(--ink, #1B241D) 8%, transparent);
}

body.cl-refonte-preview nav.navigation.pagination .page-numbers.current {
  background: var(--ink, #1B241D);
  border-color: var(--ink, #1B241D);
  color: var(--bg, #F4F0E6);
}

body.cl-refonte-preview nav.navigation.pagination .page-numbers.next,
body.cl-refonte-preview nav.navigation.pagination .page-numbers.prev {
  background: transparent;
  border-color: transparent;
}

body.cl-refonte-preview nav.navigation.pagination .page-numbers svg {
  width: 16px;
  height: 16px;
}

/* ══════════════════════════════════════════════════════════
   ARTICLE — harmonisation couleur accent sur les éléments déjà présents
   (FAQ, sources scientifiques). Structure et visibilité inchangées.
══════════════════════════════════════════════════════════ */

body.cl-refonte-preview .cl-faq-title,
body.cl-refonte-preview .cl-sources-title {
  color: var(--accent, #C98B3B) !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
}

body.cl-refonte-preview .cl-faq-question::after {
  color: var(--accent, #C98B3B) !important;
}

body.cl-refonte-preview .cl-faq-question:hover {
  color: var(--accent, #C98B3B) !important;
}

body.cl-refonte-preview .cl-reading-meta {
  border-bottom-color: var(--line, #D6E0C6) !important;
}

body.cl-refonte-preview .cl-reading-time,
body.cl-refonte-preview .cl-updated-date {
  color: var(--muted, #5C6358) !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
}

body.cl-refonte-preview .cl-updated-date {
  border-left-color: var(--line, #D6E0C6) !important;
}

body.cl-refonte-preview .entry-related-title {
  color: var(--ink, #1B241D) !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
}