/* ==========================================================================
   IVORY — Page Actualités / Blog  (refonte éditoriale, mai 2026)
   --------------------------------------------------------------------------
   Brief cliente : "Je retrouve encore trop le template de base. Adapter à la
   charte et à ce qu'on a fait sur la page d'accueil." → on sort de la liste
   uniforme et on bascule en magazine éditorial premium :

     1. Page header avec eyebrow "JOURNAL — ÉDITION 2026" + filet
     2. Premier article = "Une" pleine largeur (image grande + titre lead)
     3. Articles suivants = grille asymétrique alternée (img gauche / droite)
        (pas de numérotation : retiré sur demande cliente)
     4. Date verticale en stamp sur la marge (signature éditoriale)
     5. Sidebar bordeaux affinée, plus aérée, monogramme en filigrane
     6. Pagination en pills bordeaux/ivoire
     7. Single post conservé, juste affiné

   Rien n'est ajouté côté PHP : tout passe par le markup que Nordic fournit
   déjà (.pxl-item--archive.pxl-item--standard). On surcharge uniquement.
   ========================================================================== */

/* ==========================================================================
   1. EN-TÊTE DE PAGE  (ACTUALITÉS)
   ========================================================================== */

/* Le wrap du titre — on lui colle un eyebrow + un filet en signature.
   Nordic peut sortir `.page-title-wrap` ou `.pxl-title-wrap` selon l'option. */
.archive .page-title-wrap,
.blog .page-title-wrap,
.archive .pxl-title-wrap,
.blog .pxl-title-wrap {
  text-align: center;
  padding: 56px 0 32px;
  position: relative;
}

/* Eyebrow "Journal — Édition 2026" */
.archive .page-title-wrap::before,
.blog .page-title-wrap::before,
.archive .pxl-title-wrap::before,
.blog .pxl-title-wrap::before {
  content: "Journal — Édition 2026";
  display: block;
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--e-global-color-primary, #520f1a);
  margin-bottom: 18px;
}

/* Filet décoratif sous le titre */
.archive .page-title-wrap::after,
.blog .page-title-wrap::after,
.archive .pxl-title-wrap::after,
.blog .pxl-title-wrap::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 26px auto 0;
  background: var(--e-global-color-primary, #520f1a);
  opacity: 0.45;
}

/* Titre principal — on assure le rendu Latienne Swash bordeaux. */
.archive .page-title-wrap .page-title,
.blog .page-title-wrap .page-title,
.archive .pxl-title-wrap .pxl-title,
.blog .pxl-title-wrap .pxl-title,
.archive .pxl-title-wrap h1,
.blog .pxl-title-wrap h1 {
  font-family:
    var(--e-global-typography-primary-font-family, "Latienne"), Georgia, serif;
  color: var(--e-global-color-primary, #520f1a);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 86px);
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0;
}

/* Sous-titre éventuel ("Retrouvez toutes nos actualités ici") */
.archive .page-title-wrap .pxl-sub-title,
.blog .page-title-wrap .pxl-sub-title,
.archive .pxl-title-wrap .pxl-sub-title,
.blog .pxl-title-wrap .pxl-sub-title {
  font-family:
    var(--e-global-typography-text-font-family, "Latienne"), Georgia, serif;
  font-style: italic;
  color: var(--e-global-color-427dcb4, #3c241b);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
  margin-top: 14px;
}

/* ==========================================================================
   2. LISTE DES ARTICLES  (counter scope sur #pxl-content-main)
   ========================================================================== */

/* Reset complet de la carte parent — on repart sur grid à partir d'ici. */
.pxl-item--archive.pxl-item--standard {
  margin: 0 0 64px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

/* Tuer le filet de hover 2px que Nordic ajoute en haut des cartes : */
/* il fait doublon avec notre hairline entre articles.                */
.pxl-item--archive.pxl-item--standard::before,
.pxl-item--archive.pxl-item--standard:hover::before {
  display: none !important;
  content: none !important;
}

/* Hairline ivoire entre articles (sauf après la Une, qui a son propre filet) */
.pxl-item--archive.pxl-item--standard + .pxl-item--archive.pxl-item--standard {
  padding-top: 56px;
  border-top: 1px solid rgba(82, 15, 26, 0.12);
}

/* Reset du wrapper interne (Nordic le met en flex 79% / reste) */
.pxl-item--archive.pxl-item--standard .pxl-item-inner,
.pxl-item--archive.pxl-item--standard .pxl-post--inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 44px;
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* --- 2.a. La "UNE" (premier article) ------------------------------------- */
/* On lui donne tout l'espace : image grande sur le dessus, contenu lead   */

.pxl-item--archive.pxl-item--standard:first-of-type .pxl-item-inner,
.pxl-item--archive.pxl-item--standard:first-of-type .pxl-post--inner {
  grid-template-columns: 1fr;
  gap: 32px;
}

.pxl-item--archive.pxl-item--standard:first-of-type .pxl-item--image {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
}

.pxl-item--archive.pxl-item--standard:first-of-type .pxl-item--holder {
  width: 100%;
  max-width: 760px;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

.pxl-item--archive.pxl-item--standard:first-of-type .pxl-item--title {
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.1;
  margin: 12px 0 18px;
}

.pxl-item--archive.pxl-item--standard:first-of-type .pxl-item--excerpt {
  font-size: 17px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA centré sur la Une */
.pxl-item--archive.pxl-item--standard:first-of-type .pxl-item-bottom {
  justify-content: center;
}

/* Tags / catégories centrés sur la Une */
.pxl-item--archive.pxl-item--standard:first-of-type .pxl-post--category {
  justify-content: center;
}

/* --- 2.b. Articles secondaires : alternance image gauche / droite -------- */

/* Par défaut : image à gauche, contenu à droite (déjà via grid columns) */
.pxl-item--archive.pxl-item--standard:not(:first-of-type) .pxl-item--image {
  grid-column: 1;
  grid-row: 1;
}
.pxl-item--archive.pxl-item--standard:not(:first-of-type) .pxl-item--holder {
  grid-column: 2;
  grid-row: 1;
}

/* Pair (2, 4, 6…) : image à droite */
.pxl-item--archive.pxl-item--standard:nth-of-type(even):not(:first-of-type)
  .pxl-item--image {
  grid-column: 2;
}
.pxl-item--archive.pxl-item--standard:nth-of-type(even):not(:first-of-type)
  .pxl-item--holder {
  grid-column: 1;
}

/* --- 2.c. (retiré) Numérotation éditoriale ------------------------------- */
/* La cliente ne veut PAS de numéro (01. 02. 03.) sur les articles du blog.  */
/* On neutralise explicitement le filigrane au cas où un style parent ou un  */
/* cache le réintroduirait.                                                  */
.pxl-item--archive.pxl-item--standard:not(:first-of-type)
  .pxl-item--holder::before {
  content: none !important;
  display: none !important;
}

/* --- 2.d. Fallback "pas d'image en vedette" : holder prend toute la ligne */
/* Le template parent n'imprime .pxl-item--image que si has_post_thumbnail() */
/* est vrai → sinon .pxl-item--holder est seul dans le grid.                 */

.pxl-item--archive.pxl-item--standard
  .pxl-item-inner
  > .pxl-item--holder:only-child,
.pxl-item--archive.pxl-item--standard
  .pxl-post--inner
  > .pxl-item--holder:only-child {
  grid-column: 1 / -1;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 0;
}

/* ==========================================================================
   3. BLOC IMAGE  (zoom doux + ratio magazine)
   ========================================================================== */

.pxl-item--archive .pxl-item--image {
  overflow: hidden;
  border-radius: 2px;
  position: relative;
  width: auto;
  background: rgba(82, 15, 26, 0.06);
}

.pxl-item--archive .pxl-item--image .pxl-link-image,
.pxl-item--archive .pxl-link-image {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}

.pxl-item--archive .pxl-item--image img,
.pxl-item--archive .pxl-link-image img {
  width: 100%;
  height: auto;
  object-fit: initial;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scale(1);
}

.pxl-item--archive .pxl-item--image:hover img,
.pxl-item--archive .pxl-link-image:hover img {
  transform: scale(1.04);
}

/* Désactive l'overlay sombre que Nordic met au survol */
.pxl-item--archive .pxl-item--image .pxl-link-image::before {
  display: none !important;
}

/* ==========================================================================
   4. DATE — stamp vertical en haut-droit de l'image
   ========================================================================== */
/* Nordic la rend en .pxl-item--date avec .pxl-day (jour) + .pxl-may (mois année). */

.pxl-item--archive .pxl-item--image .pxl-item--date,
.pxl-item--archive .pxl-item--date {
  position: absolute;
  top: 16px;
  right: 16px;
  width: auto;
  height: auto;
  min-width: 48px;
  padding: 10px 12px;
  background: var(--e-global-color-secondary, #f4eee2);
  color: var(--e-global-color-primary, #520f1a);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(60, 36, 27, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  z-index: 2;
}

.pxl-item--archive .pxl-item--image .pxl-item--date .date,
.pxl-item--archive .pxl-item--date .date {
  color: var(--e-global-color-primary, #520f1a);
  background: transparent;
  line-height: 1;
  padding: 0;
  margin: 0;
}

.pxl-item--archive .pxl-item--image .pxl-item--date .date.pxl-day,
.pxl-item--archive .pxl-item--date .pxl-day {
  font-family:
    var(--e-global-typography-primary-font-family, "Latienne"), Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.pxl-item--archive .pxl-item--image .pxl-item--date .date.pxl-may,
.pxl-item--archive .pxl-item--date .pxl-may {
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Sur la "Une", le stamp est plus large et placé en bas-gauche pour ne pas
   masquer le sujet d'une photo plein cadre. */
.pxl-item--archive.pxl-item--standard:first-of-type .pxl-item--date {
  top: auto;
  right: auto;
  bottom: 16px;
  left: 16px;
  padding: 12px 16px;
}
.pxl-item--archive.pxl-item--standard:first-of-type .pxl-item--date .pxl-day {
  font-size: 26px;
}

/* ==========================================================================
   5. BLOC CONTENU — typo, catégories, titre, extrait
   ========================================================================== */

.pxl-item--archive .pxl-item--holder {
  width: 100%;
  padding: 0;
}

/* Catégorie / breadcrumb — Figtree CAPS olive, séparateur · */
.pxl-item--archive .pxl-item--holder .pxl-post--category,
.pxl-item--archive .pxl-post--category {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--e-global-color-primary, #520f1a);
  margin: 0 0 14px;
}
.pxl-item--archive .pxl-item--holder .pxl-post--category a,
.pxl-item--archive .pxl-post--category a {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--e-global-color-primary, #520f1a);
  text-decoration: none;
  padding-right: 12px;
  margin-right: 12px;
  position: relative;
  transition: color 0.25s ease;
}
.pxl-item--archive .pxl-item--holder .pxl-post--category a::after,
.pxl-item--archive .pxl-post--category a::after {
  content: "·";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--e-global-color-primary, #520f1a);
  opacity: 0.55;
}
.pxl-item--archive .pxl-item--holder .pxl-post--category a:last-child::after,
.pxl-item--archive .pxl-post--category a:last-child::after {
  display: none;
}
.pxl-item--archive .pxl-item--holder .pxl-post--category a:hover,
.pxl-item--archive .pxl-post--category a:hover {
  color: var(--e-global-color-primary, #520f1a);
  text-decoration: none;
}

/* Titre d'article — Latienne bordeaux (logique de marque : titres en
   Latienne, texte/labels en Figtree). */
.pxl-item--archive .pxl-item--holder .pxl-item--title,
.pxl-item--archive .pxl-item--title {
  font-family:
    var(--e-global-typography-primary-font-family, "Latienne"), Georgia, serif;
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
}
.pxl-item--archive .pxl-item--title a {
  color: var(--e-global-color-primary, #520f1a);
  background-image: none !important;
  text-decoration: none;
  transition: color 0.35s ease;
}
.pxl-item--archive .pxl-item--title a:hover {
  color: var(--e-global-color-primary, #520f1a);
}

/* Désactive l'effet "title-hover-line" du parent (souligné rapide) */
.pxl-item--archive .pxl-item--title.title-hover-line a,
.pxl-item--archive .title-hover-line a {
  background: none !important;
  background-image: none !important;
}

/* Extrait — Latienne Becker chocolat */
.pxl-item--archive .pxl-item--holder .pxl-item--excerpt,
.pxl-item--archive .pxl-item--excerpt {
  font-family:
    var(--e-global-typography-text-font-family, "Latienne"), Georgia, serif;
  color: var(--e-global-color-427dcb4, #3c241b);
  line-height: 1.7;
  font-size: 15px;
  margin: 0 0 22px;
}

/* Reset du bloc bottom (Nordic met une border-top et un padding hauts) */
.pxl-item--archive .pxl-item--holder .pxl-item-bottom,
.pxl-item--archive .pxl-item-bottom {
  border: 0 !important;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ==========================================================================
   6. BOUTON « LIRE L'ARTICLE »  (filet qui se trace au survol)
   ========================================================================== */

.pxl-item--archive .pxl-item--readmore {
  margin: 0;
}

.pxl-item--archive .pxl-item--readmore .btn,
.pxl-item--archive .pxl-item--readmore .btn.btn-style1 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 6px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--e-global-color-primary, #520f1a) !important;
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  font-size: 15px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  box-shadow: none !important;
  transition: color 0.3s ease;
}

/* Cache la flèche SVG du parent — on la remplace par le monogramme */
.pxl-item--archive .pxl-item--readmore .pxl-button-arrow,
.pxl-item--archive .pxl-item--readmore .btn .pxl-button-arrow,
.pxl-item--archive .pxl-item--readmore .btn .pxl-icon,
.pxl-item--archive .pxl-item--readmore .btn svg {
  display: none !important;
}

/* Monogramme bordeaux à droite du label */
.pxl-item--archive .pxl-item--readmore .btn::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("../img/ivory-monogram-bordeaux.svg") no-repeat center /
    contain;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pxl-item--archive .pxl-item--readmore .btn:hover::after {
  transform: translateX(4px);
}

/* Filet qui se trace sous le label */
.pxl-item--archive .pxl-item--readmore .btn .pxl--btn-text {
  position: relative;
}
.pxl-item--archive .pxl-item--readmore .btn .pxl--btn-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pxl-item--archive .pxl-item--readmore .btn:hover .pxl--btn-text::after {
  width: 100%;
}

/* ==========================================================================
   7. META INFOS  (auteur, commentaires) — discret
   ========================================================================== */

.pxl-item--archive .pxl-item--meta {
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--e-global-color-primary, #520f1a);
  margin: 0;
  display: flex;
  gap: 20px;
}
.pxl-item--archive .pxl-item--meta a {
  color: var(--e-global-color-primary, #520f1a);
  text-decoration: none;
  transition: color 0.25s ease;
}
.pxl-item--archive .pxl-item--meta a:hover {
  color: var(--e-global-color-primary, #520f1a);
}

/* ==========================================================================
   8. SIDEBAR  (encart bordeaux affiné)
   ========================================================================== */

#pxl-sidebar-area {
  position: relative;
}

#pxl-sidebar-area .pxl-sidebar-sticky {
  position: relative;
}

#pxl-sidebar-area .widget,
#pxl-sidebar-area .pxl-widget {
  background: var(--e-global-color-primary, #520f1a);
  color: var(--e-global-color-secondary, #f4eee2);
  padding: 36px 30px;
  border-radius: 2px;
  border: 0;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

/* Monogramme en filigrane discret en bas à droite de chaque widget */
#pxl-sidebar-area .widget::after,
#pxl-sidebar-area .pxl-widget::after {
  content: "";
  position: absolute;
  bottom: -28px;
  right: -28px;
  width: 130px;
  height: 130px;
  background: url("../img/ivory-monogram-ivoire.svg") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
}

/* Titre de widget — Latienne Swash + filet ivoire */
#pxl-sidebar-area .widget-title,
#pxl-sidebar-area .pxl-widget-title,
#pxl-sidebar-area .widget > h2,
#pxl-sidebar-area .widget > h3,
#pxl-sidebar-area .widget > h4 {
  font-family:
    var(--e-global-typography-primary-font-family, "Latienne"), Georgia, serif;
  color: var(--e-global-color-secondary, #f4eee2);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(244, 238, 226, 0.22);
  text-transform: none;
  letter-spacing: 0.01em;
}

/* --- 8.a. Listes (catégories, archives, tags…) --------------------------- */

#pxl-sidebar-area .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#pxl-sidebar-area .widget ul li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(244, 238, 226, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#pxl-sidebar-area .widget ul li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
#pxl-sidebar-area .widget ul li a {
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  color: var(--e-global-color-secondary, #f4eee2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color 0.25s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  flex: 1;
  min-width: 0;
  background-image: none !important;
}
#pxl-sidebar-area .widget ul li a:hover {
  color: var(--e-global-color-accent, #dfcdb7);
  transform: translateX(4px);
}
#pxl-sidebar-area .widget ul li .pxl-count,
#pxl-sidebar-area .widget ul li .count {
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  background: transparent;
  color: var(--e-global-color-accent, #dfcdb7);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  padding: 0;
  border: 0;
  opacity: 0.65;
}

/* --- 8.b. Articles récents (avec vignette) ------------------------------- */

#pxl-sidebar-area .widget_pxl_recent_posts .pxl--items,
#pxl-sidebar-area .widget_pxl_recent_posts ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#pxl-sidebar-area .widget_pxl_recent_posts .pxl--item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(244, 238, 226, 0.1);
}
#pxl-sidebar-area .widget_pxl_recent_posts .pxl--item:first-child {
  padding-top: 0;
}
#pxl-sidebar-area .widget_pxl_recent_posts .pxl--item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
#pxl-sidebar-area .widget_pxl_recent_posts .pxl-item--img,
#pxl-sidebar-area .widget_pxl_recent_posts .pxl-item--image,
#pxl-sidebar-area .widget_pxl_recent_posts .pxl--item-image {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(244, 238, 226, 0.08);
  margin: 0;
}
#pxl-sidebar-area .widget_pxl_recent_posts .pxl-item--img a,
#pxl-sidebar-area .widget_pxl_recent_posts .pxl-item--image a {
  display: block;
  width: 100%;
  height: 100%;
}
#pxl-sidebar-area .widget_pxl_recent_posts .pxl-item--img img,
#pxl-sidebar-area .widget_pxl_recent_posts .pxl-item--image img,
#pxl-sidebar-area .widget_pxl_recent_posts .pxl--item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Désactive l'overlay sombre du parent (hover-imge-effect3) */
#pxl-sidebar-area
  .widget_pxl_recent_posts
  .pxl-item--img.hover-imge-effect3
  a::before,
#pxl-sidebar-area
  .widget_pxl_recent_posts
  .pxl-item--img.hover-imge-effect3::before {
  display: none !important;
}

#pxl-sidebar-area .widget_pxl_recent_posts .pxl-item--holder,
#pxl-sidebar-area .widget_pxl_recent_posts .pxl--item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  margin: 0;
}

#pxl-sidebar-area .widget_pxl_recent_posts .pxl-item--title,
#pxl-sidebar-area .widget_pxl_recent_posts h4.pxl-item--title,
#pxl-sidebar-area .widget_pxl_recent_posts .pxl-item--title a,
#pxl-sidebar-area .widget_pxl_recent_posts .pxl-item--holder a {
  font-family:
    var(--e-global-typography-primary-font-family, "Latienne"), Georgia, serif;
  color: var(--e-global-color-secondary, #f4eee2);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none;
  background-image: none !important;
  letter-spacing: 0.01em;
  text-transform: none;
  display: block;
  margin: 0 0 4px;
  padding: 0;
  transition: color 0.25s ease;
}
#pxl-sidebar-area .widget_pxl_recent_posts .pxl-item--title a:hover,
#pxl-sidebar-area .widget_pxl_recent_posts .pxl-item--holder a:hover {
  color: var(--e-global-color-accent, #dfcdb7);
}

#pxl-sidebar-area .widget_pxl_recent_posts .pxl-item--date,
#pxl-sidebar-area .widget_pxl_recent_posts .post-date,
#pxl-sidebar-area .widget_pxl_recent_posts time {
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  color: var(--e-global-color-accent, #dfcdb7);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: 0.75;
  background: transparent;
  padding: 0;
  border: 0;
}

/* --- 8.c. Tag cloud — pills outline ivoire ------------------------------- */

#pxl-sidebar-area .tagcloud,
#pxl-sidebar-area .wp-block-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
#pxl-sidebar-area .tagcloud a,
#pxl-sidebar-area .wp-block-tag-cloud a {
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif !important;
  font-size: 9px !important;
  font-weight: 500;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(244, 238, 226, 0.32);
  color: var(--e-global-color-secondary, #f4eee2);
  background: transparent;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
#pxl-sidebar-area .tagcloud a:hover,
#pxl-sidebar-area .wp-block-tag-cloud a:hover {
  background: var(--e-global-color-secondary, #f4eee2);
  color: var(--e-global-color-primary, #520f1a);
  border-color: var(--e-global-color-secondary, #f4eee2);
}

/* --- 8.d. Champ de recherche -------------------------------------------- */

#pxl-sidebar-area .widget_search,
#pxl-sidebar-area .widget_search form {
  margin: 0;
}
#pxl-sidebar-area .widget_search input[type="search"],
#pxl-sidebar-area .widget_search input[type="text"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(244, 238, 226, 0.32);
  color: var(--e-global-color-secondary, #f4eee2);
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 12px 0;
  border-radius: 0;
  width: 100%;
  transition: border-color 0.3s ease;
}
#pxl-sidebar-area .widget_search input:focus {
  outline: none;
  border-bottom-color: var(--e-global-color-secondary, #f4eee2);
}
#pxl-sidebar-area .widget_search input::placeholder {
  color: rgba(244, 238, 226, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
}

/* ==========================================================================
   9. PAGINATION  (pills bordeaux / ivoire)
   ========================================================================== */

.pxl-pagination-wrap,
.archive .pagination,
.blog .pagination,
nav.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 56px 0 32px;
  padding: 0;
}

.pxl-pagination-wrap .page-numbers,
.archive .pagination .page-numbers,
.blog .pagination .page-numbers,
nav.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--e-global-color-primary, #520f1a);
  color: var(--e-global-color-primary, #520f1a) !important;
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  border-radius: 999px;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}
.pxl-pagination-wrap .page-numbers:hover,
.archive .pagination .page-numbers:hover,
.blog .pagination .page-numbers:hover,
nav.pagination .page-numbers:hover {
  background: rgba(82, 15, 26, 0.08);
  color: var(--e-global-color-primary, #520f1a) !important;
  border-color: var(--e-global-color-primary, #520f1a);
  transform: translateY(-1px);
}
.pxl-pagination-wrap .page-numbers.current,
.archive .pagination .page-numbers.current,
.blog .pagination .page-numbers.current {
  background: var(--e-global-color-primary, #520f1a);
  color: var(--e-global-color-secondary, #f4eee2) !important;
}
.pxl-pagination-wrap .page-numbers.dots {
  border: 0;
  background: transparent;
  color: var(--e-global-color-primary, #520f1a) !important;
}

/* ==========================================================================
   10. ARTICLE INDIVIDUEL  (single.php)
   ========================================================================== */

.single-post .pxl---post .pxl-post--inner {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.single-post .entry-title,
.single-post .pxl-item--title,
.single-post h1.entry-title {
  font-family:
    var(--e-global-typography-primary-font-family, "Latienne"), Georgia, serif;
  color: var(--e-global-color-primary, #520f1a);
  font-weight: 400;
  font-size: clamp(32px, 3.2vw, 56px);
  line-height: 1.1;
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}

.single-post .entry-meta,
.single-post .post-meta,
.single-post .pxl-post-meta {
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--e-global-color-primary, #520f1a);
}

.single-post .entry-content,
.single-post .post-content,
.single-post .pxl-post-content {
  font-family:
    var(--e-global-typography-text-font-family, "Latienne"), Georgia, serif;
  line-height: 1.75;
  color: var(--e-global-color-427dcb4, #3c241b);
  font-size: 16px;
}

.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .post-content h2,
.single-post .post-content h3 {
  font-family:
    var(--e-global-typography-primary-font-family, "Latienne"), Georgia, serif;
  color: var(--e-global-color-primary, #520f1a);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Container global de l'article single */
.single-post .pxl---post {
  margin-bottom: 0;
}
.single-post .pxl---post::before,
.single-post .pxl---post:hover::before {
  display: none !important;
  content: none !important;
}
.single-post .pxl-post-inner {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Légère respiration entre les widgets Elementor du corps d'article */
.single-post .pxl-item--content > .elementor > .e-con-boxed {
  padding-top: 32px;
  padding-bottom: 48px;
}

/* Citations dans le contenu (blockquote) */
.single-post .pxl-text-editor blockquote,
.single-post .entry-content blockquote {
  margin: 32px 0;
  padding: 24px 32px;
  border-left: 2px solid var(--e-global-color-primary, #520f1a);
  background: rgba(82, 15, 26, 0.04);
  font-family:
    var(--e-global-typography-primary-font-family, "Latienne"), Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--e-global-color-primary, #520f1a);
}

/* ==========================================================================
   10.b. RELATED ARTICLES  (.pxl-related-post)
   ========================================================================== */

.single-post .pxl-related-post {
  margin: 80px 0 60px;
  padding-top: 64px;
  border-top: 1px solid rgba(82, 15, 26, 0.15);
}

.single-post .pxl-container-related {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* En-tête : titre "Related Articles" + arrows slick */
.single-post .pxl-swiper-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(82, 15, 26, 0.15);
}

.single-post .pxl-swiper-title .item-title,
.single-post .pxl-swiper-title h4.item-title {
  font-family:
    var(--e-global-typography-primary-font-family, "Latienne"), Georgia, serif;
  color: var(--e-global-color-primary, #520f1a);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0;
  text-transform: none;
}
.single-post .pxl-swiper-title .item-title::before {
  content: "À découvrir aussi";
  display: block;
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--e-global-color-primary, #520f1a);
  opacity: 0.6;
  margin-bottom: 8px;
}

/* Flèches slick (prev / next) — pills bordeaux */
/* Flèches slick prev/next — cercles bordeaux outline, sans SVG, monogramme à
   l'intérieur. Hover doux : pas d'inversion, juste un léger tint + lift. */
.single-post .pxl-item-slick-arrow {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.single-post .pxl-item-slick-arrow .slick-arrow {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(82, 15, 26, 0.4);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.35s ease,
    background-color 0.35s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* On masque la flèche SVG du parent */
.single-post .pxl-item-slick-arrow .slick-arrow svg {
  display: none !important;
}

/* Monogramme bordeaux centré, taille 18px */
.single-post .pxl-item-slick-arrow .slick-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background: url("../img/ivory-monogram-bordeaux.svg") no-repeat center /
    contain;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover doux : la bordure devient pleine bordeaux + très léger fond +
   le monogramme glisse selon la direction (prev = gauche, next = droite). */
.single-post .pxl-item-slick-arrow .slick-arrow:hover {
  border-color: var(--e-global-color-primary, #520f1a);
  background: rgba(82, 15, 26, 0.06);
  transform: translateY(-1px);
}
.single-post .pxl-item-slick-arrow .slick-prev:hover::after {
  transform: translateX(-3px);
}
.single-post .pxl-item-slick-arrow .slick-next:hover::after {
  transform: translateX(3px);
}

/* Focus visible (accessibilité clavier) */
.single-post .pxl-item-slick-arrow .slick-arrow:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #520f1a);
  outline-offset: 3px;
}

/* Grille des cartes (non-carousel par défaut) */
.single-post .pxl-related-post-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* Si Slick s'initialise, on laisse le carousel gérer la largeur */
.single-post .pxl-related-post-inner.slick-initialized {
  display: block;
}
.single-post .pxl-related-post-inner.slick-initialized .grid-item {
  padding: 0 16px;
}

/* Carte d'article lié */
.single-post .grid-item .pxl-grid-item-inner {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
}

.single-post .grid-item .pxl-item-featured {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4 / 5;
  background: rgba(82, 15, 26, 0.06);
  margin-bottom: 18px;
}
.single-post .grid-item .pxl-img-link {
  display: block;
  width: 100%;
  height: 100%;
}
.single-post .grid-item .pxl-img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.single-post .grid-item .pxl-img-link:hover img {
  transform: scale(1.04);
}

/* Stamp date en haut-droite */
.single-post .grid-item .item--date {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 8px 12px;
  background: var(--e-global-color-secondary, #f4eee2);
  color: var(--e-global-color-primary, #520f1a);
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(60, 36, 27, 0.08);
  z-index: 2;
}

/* Catégories breadcrumb */
.single-post .grid-item .pxl-item-content {
  padding: 0;
}
.single-post .grid-item .pxl-post--category {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family:
    var(--e-global-typography-accent-font-family, "Figtree"), system-ui,
    sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--e-global-color-primary, #520f1a);
  margin: 0 0 10px;
  gap: 0;
}
.single-post .grid-item .pxl-post--category a {
  color: var(--e-global-color-primary, #520f1a);
  text-decoration: none;
  padding-right: 12px;
  margin-right: 12px;
  position: relative;
  transition: opacity 0.25s ease;
}
.single-post .grid-item .pxl-post--category a::after {
  content: "·";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--e-global-color-primary, #520f1a);
  opacity: 0.55;
}
.single-post .grid-item .pxl-post--category a:last-child {
  padding-right: 0;
  margin-right: 0;
}
.single-post .grid-item .pxl-post--category a:last-child::after {
  display: none;
}
.single-post .grid-item .pxl-post--category a:hover {
  opacity: 0.65;
}

/* Titre de la carte */
.single-post .grid-item .pxl-item-title,
.single-post .grid-item h6.pxl-item-title {
  font-family:
    var(--e-global-typography-primary-font-family, "Latienne"), Georgia, serif;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.2;
  font-weight: 400;
  color: var(--e-global-color-primary, #520f1a);
  margin: 0;
  letter-spacing: 0.01em;
}
.single-post .grid-item .pxl-item-title a {
  color: var(--e-global-color-primary, #520f1a);
  text-decoration: none;
  background-image: none !important;
  transition: opacity 0.25s ease;
}
.single-post .grid-item .pxl-item-title.title-hover-line a {
  background: none !important;
}
.single-post .grid-item .pxl-item-title a:hover {
  opacity: 0.7;
}

/* ==========================================================================
   10.c. COMMENTAIRES  — DÉSACTIVÉS SUR LES PAGES DÉTAIL
   ========================================================================== */
/* Décision cliente : pas de section commentaires sur les single posts.       */
/* On masque la zone côté frontend ; pour désactiver complètement (et ne pas  */
/* charger le markup) → WP-admin → Réglages → Discussion → décocher           */
/* "Autoriser les commentaires sur les nouveaux articles".                    */

.single-post #comments,
.single-post .comments-area,
.single-post .comment-respond,
.single-post #respond,
.single-post .comment-form {
  display: none !important;
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
  .pxl-item--archive.pxl-item--standard {
    margin-bottom: 48px;
  }
  .pxl-item--archive.pxl-item--standard
    + .pxl-item--archive.pxl-item--standard {
    padding-top: 44px;
  }
  .pxl-item--archive.pxl-item--standard .pxl-item-inner,
  .pxl-item--archive.pxl-item--standard .pxl-post--inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Sur mobile/tablette : tout passe en image dessus / contenu dessous */
  .pxl-item--archive.pxl-item--standard:not(:first-of-type) .pxl-item--image,
  .pxl-item--archive.pxl-item--standard:nth-of-type(even):not(:first-of-type)
    .pxl-item--image {
    grid-column: 1;
    grid-row: 1;
  }
  .pxl-item--archive.pxl-item--standard:not(:first-of-type) .pxl-item--holder,
  .pxl-item--archive.pxl-item--standard:nth-of-type(even):not(:first-of-type)
    .pxl-item--holder {
    grid-column: 1;
    grid-row: 2;
  }
  .pxl-item--archive .pxl-item--image {
    aspect-ratio: 16 / 11;
  }
  .pxl-item--archive.pxl-item--standard:first-of-type .pxl-item--image {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 767px) {
  .archive .page-title-wrap,
  .blog .page-title-wrap,
  .archive .pxl-title-wrap,
  .blog .pxl-title-wrap {
    padding: 36px 0 24px;
  }
  .archive .page-title-wrap::before,
  .blog .page-title-wrap::before,
  .archive .pxl-title-wrap::before,
  .blog .pxl-title-wrap::before {
    font-size: 9px;
    letter-spacing: 0.28em;
  }
  .archive .page-title-wrap .page-title,
  .blog .page-title-wrap .page-title,
  .archive .pxl-title-wrap h1,
  .blog .pxl-title-wrap h1 {
    font-size: clamp(36px, 9vw, 56px);
  }

  .pxl-item--archive.pxl-item--standard {
    margin-bottom: 40px;
  }
  .pxl-item--archive.pxl-item--standard
    + .pxl-item--archive.pxl-item--standard {
    padding-top: 36px;
  }
  .pxl-item--archive .pxl-item--holder .pxl-item--title,
  .pxl-item--archive .pxl-item--title {
    font-size: 22px;
  }
  .pxl-item--archive.pxl-item--standard:first-of-type .pxl-item--title {
    font-size: 28px;
  }
  .pxl-item--archive .pxl-item--image .pxl-item--date,
  .pxl-item--archive .pxl-item--date {
    top: 12px;
    right: 12px;
    min-width: 42px;
    padding: 8px 10px;
  }
  .pxl-item--archive .pxl-item--image .pxl-item--date .date.pxl-day,
  .pxl-item--archive .pxl-item--date .pxl-day {
    font-size: 18px;
  }

  #pxl-sidebar-area .widget,
  #pxl-sidebar-area .pxl-widget {
    padding: 28px 24px;
  }
  #pxl-sidebar-area .widget::after,
  #pxl-sidebar-area .pxl-widget::after {
    width: 100px;
    height: 100px;
  }

  /* Single post : related + comments */
  .single-post .pxl-related-post {
    margin: 56px 0 40px;
    padding-top: 40px;
  }
  .single-post .pxl-swiper-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
  }
  .single-post .pxl-related-post-inner {
    gap: 24px;
  }
}

@media (max-width: 991px) {
  /* Related posts : 2 colonnes en tablette */
  .single-post .pxl-related-post-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  /* Related posts : 1 colonne en mobile */
  .single-post .pxl-related-post-inner {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   12. PREFERS-REDUCED-MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pxl-item--archive .pxl-item--image img,
  .pxl-item--archive .pxl-link-image img,
  .pxl-item--archive .pxl-item--readmore .btn .pxl--btn-text::after,
  .pxl-item--archive .pxl-item--readmore .pxl-button-arrow,
  #pxl-sidebar-area .widget ul li a {
    transition: none !important;
  }
  .pxl-item--archive .pxl-item--image:hover img,
  .pxl-item--archive .pxl-link-image:hover img {
    transform: none;
  }
}