/* Lecture des articles du blog — lot 13 EE (2026-10-02). Chargé uniquement par post.tpl.
   Portée : #module-everpsblog-post .hr-lecture. Les !important battent custom.css (everpsblog)
   et le <style> intégré de post.tpl, qui forcent #333/#000, une carte blanche et 15 px. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

#module-everpsblog-post .hr-lecture {
  --hr-mesure: 42rem;
  --hr-or: var(--stitch-gold, #8B6A00);
  --hr-or-clair: var(--stitch-gold-light, #D4AF37);
  --hr-encre: var(--color-neutral-900, #2d2a26);
  --hr-texte: var(--color-neutral-800, #4a4640);
  --hr-doux: var(--color-neutral-600, #756f66);
  --hr-filet: var(--stitch-border-light, #EDE6D8);
  --hr-creme: var(--stitch-cream-light, #FAF8F4);
  max-width: var(--hr-mesure) !important;
  padding-bottom: var(--space-12, 3rem) !important;
}

/* ---- En-tête ---------------------------------------------------------------------------------- */
#module-everpsblog-post .hr-lecture .blog-post-header { margin-bottom: var(--space-8, 2rem); }
#module-everpsblog-post .hr-lecture .blog-back-link {
  display: inline-flex; align-items: center; gap: var(--space-2, 0.5rem); min-height: 2.75rem;
  color: var(--color-primary-700, #65513d) !important; font-size: 0.875rem; font-weight: 500;
  text-decoration: none !important;
}
#module-everpsblog-post .hr-lecture .blog-back-link:hover { text-decoration: underline !important; text-underline-offset: 4px; }
#module-everpsblog-post .hr-lecture .blog-post-title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.5rem) !important; font-weight: 600 !important;
  line-height: 1.15 !important; letter-spacing: -0.01em; text-wrap: balance;
  color: var(--hr-encre) !important; margin: var(--space-2, 0.5rem) 0 var(--space-4, 1rem) !important;
}
#module-everpsblog-post .hr-lecture .blog-post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 0.5rem) 0;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  font-size: 0.875rem; color: var(--hr-doux) !important;
}
#module-everpsblog-post .hr-lecture .blog-post-meta > span { color: var(--hr-doux) !important; }
#module-everpsblog-post .hr-lecture .blog-post-meta > span + span::before {
  content: "·"; margin: 0 var(--space-3, 0.75rem); color: var(--color-neutral-400, #b5b0a8);
}
/* Mobile : l'auteur sur sa ligne, pour qu'aucun « · » n'ouvre une ligne */
#module-everpsblog-post .hr-lecture .hr-auteur { flex-basis: 100%; font-weight: 600; color: var(--hr-encre) !important; }
#module-everpsblog-post .hr-lecture .blog-post-meta > .hr-auteur + span::before { content: none; }
@media (min-width: 36em) {
  #module-everpsblog-post .hr-lecture .hr-auteur { flex-basis: auto; }
  #module-everpsblog-post .hr-lecture .blog-post-meta > .hr-auteur + span::before { content: "·"; }
}

/* ---- Image principale : cadre 4:3 réservé (aucun décalage au chargement), image entière ------- */
#module-everpsblog-post .hr-lecture .blog-post-featured-image {
  margin: 0 0 var(--space-10, 2.5rem) !important; border-radius: var(--radius-xl, 1rem) !important;
  overflow: hidden; background: var(--color-neutral-0, #ffffff); border: 1px solid var(--hr-filet);
  box-shadow: none !important;
}
#module-everpsblog-post .hr-lecture .blog-post-featured-image img {
  display: block; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: contain;
}

/* ---- Corps du texte : 18 px, interligne 1,75, ~70 caractères par ligne ----------------------- */
#module-everpsblog-post .hr-lecture .blog-post-content {
  background: transparent !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-size: 1.125rem !important; line-height: 1.75 !important; color: var(--hr-texte) !important;
}
#module-everpsblog-post .hr-lecture .blog-post-content :is(p, li) {
  font-size: 1.125rem !important; line-height: 1.75 !important; color: var(--hr-texte) !important;
  text-align: left !important; hyphens: auto; overflow-wrap: break-word;
}
@media (min-width: 48em) {
  #module-everpsblog-post .hr-lecture .blog-post-content :is(p, li) { hyphens: manual; }
}
#module-everpsblog-post .hr-lecture .blog-post-content p { margin: 0 0 var(--space-6, 1.5rem) !important; }
#module-everpsblog-post .hr-lecture .blog-post-content > p:first-child {
  font-size: 1.25rem !important; line-height: 1.65 !important; color: var(--hr-encre) !important;
}
#module-everpsblog-post .hr-lecture .blog-post-content h2 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem) !important; font-weight: 600 !important; line-height: 1.25 !important;
  color: var(--hr-encre) !important; margin: var(--space-12, 3rem) 0 var(--space-4, 1rem) !important;
  padding: 0 !important; border: 0 !important; scroll-margin-top: var(--space-20, 5rem); text-wrap: balance;
}
#module-everpsblog-post .hr-lecture .blog-post-content h2::before {
  content: ""; display: block; width: var(--space-10, 2.5rem); height: var(--space-1, 0.25rem); margin-bottom: var(--space-4, 1rem);
  border-radius: var(--radius-full, 9999px); background: var(--hr-or-clair);
}
#module-everpsblog-post .hr-lecture .blog-post-content h3 {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important; font-size: 1.25rem !important;
  font-weight: 600 !important; line-height: 1.4 !important; color: var(--hr-encre) !important;
  margin: var(--space-8, 2rem) 0 var(--space-3, 0.75rem) !important; scroll-margin-top: var(--space-20, 5rem);
}
#module-everpsblog-post .hr-lecture .blog-post-content strong { color: var(--hr-encre) !important; font-weight: 600; }
/* Liens du texte seulement : les 41 boutons rédigés (style inline background + color:#fff, 38 articles
   le 02/10) gardent leurs couleurs — les forcer donnait brun sur or (1,49:1). */
#module-everpsblog-post .hr-lecture .blog-post-content a:not([style*="background" i]) {
  color: var(--color-primary-700, #65513d) !important; border: 0 !important;
  text-decoration: underline !important; text-decoration-color: var(--hr-or-clair) !important;
  text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness 0.15s;
}
/* custom.css force aussi `.blog-post-content a { color: var(--blog-primary) !important }` (1,62:1 avant EE) :
   on rend le blanc aux seuls boutons qui DÉCLARENT un texte blanc (41/41 le 02/10). « ;color » et non
   « color » : sinon « background-color:#fff » rendrait blanc un bouton clair. Autre bouton : inchangé. */
#module-everpsblog-post .hr-lecture .blog-post-content a[style*="background" i]:is([style*=";color:#fff" i], [style*="; color:#fff" i], [style*=";color: #fff" i], [style*="; color: #fff" i], [style*=";color:white" i], [style*="; color:white" i], [style*=";color: white" i], [style*="; color: white" i], [style^="color:#fff" i], [style^="color: #fff" i], [style^="color:white" i], [style^="color: white" i]) {
  color: var(--color-neutral-0, #fff) !important; border: 0 !important; text-decoration: none !important;
}
#module-everpsblog-post .hr-lecture .blog-post-content a:not([style*="background" i]):hover { text-decoration-thickness: 2px; color: var(--hr-encre) !important; }
#module-everpsblog-post .hr-lecture .blog-post-content :is(ul, ol) { margin: 0 0 var(--space-6, 1.5rem) !important; padding-left: var(--space-6, 1.5rem) !important; }
#module-everpsblog-post .hr-lecture .blog-post-content ul { list-style: disc outside !important; }
#module-everpsblog-post .hr-lecture .blog-post-content ol { list-style: decimal outside !important; }
#module-everpsblog-post .hr-lecture .blog-post-content li { display: list-item !important; margin-bottom: var(--space-2, 0.5rem) !important; padding-left: var(--space-1, 0.25rem); }
#module-everpsblog-post .hr-lecture .blog-post-content li::marker { color: var(--hr-or); font-weight: 600; }
#module-everpsblog-post .hr-lecture .blog-post-content ::selection { background: var(--color-primary-100, #ede9e4); }

/* Tableaux : défilement horizontal dans le tableau, jamais dans la page */
#module-everpsblog-post .hr-lecture .blog-post-content table {
  display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse;
  margin: 0 0 var(--space-6, 1.5rem); font-size: 1rem;
}
#module-everpsblog-post .hr-lecture .blog-post-content :is(th, td) {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem); border-bottom: 1px solid var(--hr-filet);
  text-align: left; vertical-align: top; color: var(--hr-texte);
}
#module-everpsblog-post .hr-lecture .blog-post-content th { color: var(--hr-encre); font-weight: 600; background: var(--hr-creme); }

/* ---- Fin d'article ----------------------------------------------------------------------------- */
#module-everpsblog-post .hr-lecture .blog-post-share { padding-top: var(--space-6, 1.5rem); border-top: 1px solid var(--hr-filet); }

/* ---- Barre de progression (créée par blog-lecture.js) ----------------------------------------- */
.hr-progression {
  position: fixed; top: 0; left: 0; right: 0; height: var(--space-1, 0.25rem); z-index: 2000; pointer-events: none;
  background: transparent;
}
.hr-progression > span {
  display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: var(--stitch-gold-light, #D4AF37);
}

/* ---- Sommaire (créé par blog-lecture.js) : repliable en flux, colonne collante dès 80em ------- */
#module-everpsblog-post .hr-lecture .hr-sommaire {
  margin: 0 0 var(--space-10, 2.5rem); border: 1px solid var(--hr-filet);
  border-radius: var(--radius-lg, 0.75rem); background: var(--hr-creme);
}
#module-everpsblog-post .hr-lecture .hr-sommaire summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem); cursor: pointer; list-style: none;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-primary-700, #65513d);
}
#module-everpsblog-post .hr-lecture .hr-sommaire summary::-webkit-details-marker { display: none; }
#module-everpsblog-post .hr-lecture .hr-sommaire summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; line-height: 1; }
#module-everpsblog-post .hr-lecture .hr-sommaire details[open] summary::after { content: "−"; }
#module-everpsblog-post .hr-lecture .hr-sommaire ol { list-style: none; margin: 0; padding: 0 var(--space-4, 1rem) var(--space-4, 1rem); }
#module-everpsblog-post .hr-lecture .hr-sommaire a {
  display: block; padding: var(--space-2, 0.5rem) 0 var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-left: 2px solid var(--hr-filet); font-size: 0.875rem; line-height: 1.4;
  color: var(--color-neutral-700, #5f5a53) !important; text-decoration: none !important;
  transition: color 0.2s, border-color 0.2s;
}
#module-everpsblog-post .hr-lecture .hr-sommaire a:hover { color: var(--hr-encre) !important; border-left-color: var(--hr-or-clair); }
#module-everpsblog-post .hr-lecture .hr-sommaire a[aria-current="true"] {
  color: var(--hr-encre) !important; border-left-color: var(--hr-or); font-weight: 600;
}
/* sticky exige des ancêtres sans conteneur de défilement : #content, #wrapper et main sont en
   overflow hidden. clip rogne pareil sans créer de conteneur (sur cette page seulement). */
#module-everpsblog-post :is(#wrapper, main, #content) { overflow-x: clip !important; overflow-y: visible !important; }
@media (min-width: 80em) {
  /* :has → grille posée dès le premier rendu (coque côté serveur) : aucun décalage à l'exécution du JS */
  #module-everpsblog-post .hr-lecture:has(> .hr-sommaire) {
    display: grid; max-width: none !important; justify-content: center; column-gap: var(--space-16, 4rem);
    grid-template-columns: minmax(0, var(--hr-mesure)) 15rem;
  }
  /* Tout le mode colonne dépend de :has — sans :has, le sommaire reste un repli dans le flux */
  #module-everpsblog-post .hr-lecture:has(> .hr-sommaire) > * { grid-column: 1; min-width: 0; }
  #module-everpsblog-post .hr-lecture:has(> .hr-sommaire) > .hr-sommaire {
    grid-column: 2; grid-row: 1 / span 12; align-self: start; position: sticky; top: var(--space-8, 2rem);
    margin: var(--space-16, 4rem) 0 0; border: 0; background: transparent;
  }
  #module-everpsblog-post .hr-lecture:has(> .hr-sommaire) .hr-sommaire summary { cursor: default; padding-left: 0; }
  #module-everpsblog-post .hr-lecture:has(> .hr-sommaire) .hr-sommaire details summary::after,
  #module-everpsblog-post .hr-lecture:has(> .hr-sommaire) .hr-sommaire details[open] summary::after { content: none; }
  #module-everpsblog-post .hr-lecture:has(> .hr-sommaire) .hr-sommaire ol { padding: 0; }
}
/* Sans JS (ou JS en échec), la coque vide reste invisible ; sa place est gardée (aucun décalage) */
#module-everpsblog-post .hr-lecture .hr-sommaire:not(.est-pret) { visibility: hidden; }

/* ---- FAQ en accordéon (créée par blog-lecture.js) --------------------------------------------- */
#module-everpsblog-post .hr-lecture .hr-faq { border-bottom: 1px solid var(--hr-filet); }
#module-everpsblog-post .hr-lecture .hr-faq:first-of-type { border-top: 1px solid var(--hr-filet); }
#module-everpsblog-post .hr-lecture .hr-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 1rem);
  min-height: 2.75rem; padding: var(--space-4, 1rem) 0; cursor: pointer; list-style: none;
}
#module-everpsblog-post .hr-lecture .hr-faq summary::-webkit-details-marker { display: none; }
#module-everpsblog-post .hr-lecture .hr-faq summary h3 { margin: 0 !important; font-size: 1.125rem !important; }
#module-everpsblog-post .hr-lecture .hr-faq summary::after {
  content: ""; flex: none; width: var(--space-3, 0.75rem); height: var(--space-3, 0.75rem); margin-right: var(--space-1, 0.25rem);
  border-right: 2px solid var(--hr-or); border-bottom: 2px solid var(--hr-or);
  transform: translateY(-25%) rotate(45deg); transition: transform 0.25s ease;
}
#module-everpsblog-post .hr-lecture .hr-faq[open] summary::after { transform: translateY(25%) rotate(-135deg); }
#module-everpsblog-post .hr-lecture .hr-faq summary:hover h3 { color: var(--color-primary-700, #65513d) !important; }
#module-everpsblog-post .hr-lecture .hr-faq-corps > :last-child { margin-bottom: var(--space-5, 1.25rem) !important; }

/* ---- Produits associés (hors .hr-lecture, sous l'article) : grille propre, une carte = un lien ---
   Le Bootstrap du thème n'a pas .flex-column et main.bundle force h3 en clamp() !important :
   l'ancien balisage rangeait nom, prix et bouton sur une ligne (02/10). */
#module-everpsblog-post .hr-produits {
  --hr-encre: var(--color-neutral-900, #2d2a26);
  --hr-filet: var(--stitch-border-light, #EDE6D8);
  margin: var(--space-12, 3rem) 0 var(--space-8, 2rem); padding: 0;
}
#module-everpsblog-post .hr-produits .hr-produits-titre {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.5rem !important; font-weight: 600 !important; line-height: 1.25 !important;
  color: var(--hr-encre) !important; text-align: center; margin: 0 0 var(--space-6, 1.5rem) !important;
}
#module-everpsblog-post .hr-produits .hr-produits-grille {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4, 1rem);
  list-style: none !important; margin: 0 auto !important; padding: 0 !important; max-width: 64rem;
}
/* Mobile : 4 demi-pistes, chaque carte en couvre 2 ; une carte seule en fin de rangée impaire est centrée (pistes 2-3). */
@media (max-width: 47.99em) {
  #module-everpsblog-post .hr-produits .hr-produits-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #module-everpsblog-post .hr-produits .hr-produits-grille > li { grid-column: span 2; }
  #module-everpsblog-post .hr-produits .hr-produits-grille > li:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (min-width: 48em) {
  #module-everpsblog-post .hr-produits .hr-produits-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6, 1.5rem); }
  /* 1 à 3 produits : autant de colonnes que de cartes (≤ 14,5rem, rétrécissables), centrées.
     Pas d'auto-fit : à 768-1000 px il ne créait que 2 pistes et la 3e carte passait seule à la ligne. */
  #module-everpsblog-post .hr-produits .hr-produits-grille:not(:has(> li:nth-child(4))) { justify-content: center; }
  #module-everpsblog-post .hr-produits .hr-produits-grille:has(> li:nth-child(3)):not(:has(> li:nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 14.5rem)); }
  #module-everpsblog-post .hr-produits .hr-produits-grille:has(> li:nth-child(2)):not(:has(> li:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 14.5rem)); }
  #module-everpsblog-post .hr-produits .hr-produits-grille:not(:has(> li:nth-child(2))) { grid-template-columns: minmax(0, 14.5rem); }
}
#module-everpsblog-post .hr-produits .hr-produit { margin: 0 !important; padding: 0 !important; min-width: 0; }
#module-everpsblog-post .hr-produits .hr-produit::before { content: none !important; }
#module-everpsblog-post .hr-produits .hr-produit-lien {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--color-neutral-0, #fff); border: 1px solid var(--hr-filet); border-radius: var(--radius-lg, 0.75rem);
  color: var(--hr-encre) !important; text-decoration: none !important;
}
#module-everpsblog-post .hr-produits .hr-produit-image { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--stitch-cream-light, #FAF8F4); }
#module-everpsblog-post .hr-produits .hr-produit-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
#module-everpsblog-post .hr-produits .hr-produit-nom {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin: var(--space-3, 0.75rem) var(--space-3, 0.75rem) var(--space-1, 0.25rem);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important; font-size: 0.875rem !important;
  font-weight: 600; line-height: 1.4; color: var(--hr-encre) !important;
}
#module-everpsblog-post .hr-produits .hr-produit-prix {
  margin: 0 var(--space-3, 0.75rem) var(--space-3, 0.75rem); font-size: 1rem !important; font-weight: 700;
  color: var(--color-primary-700, #65513d) !important;
}
#module-everpsblog-post .hr-produits .hr-produit-action {
  margin: auto var(--space-3, 0.75rem) var(--space-3, 0.75rem); padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border: 1px solid var(--color-primary-700, #65513d); border-radius: var(--radius-full, 9999px);
  font-size: 0.875rem !important; font-weight: 600; text-align: center; white-space: normal;
  color: var(--color-primary-700, #65513d) !important;
}
#module-everpsblog-post .hr-produits .hr-produit-lien:hover .hr-produit-action,
#module-everpsblog-post .hr-produits .hr-produit-lien:focus-visible .hr-produit-action {
  background: var(--color-primary-700, #65513d); color: var(--color-neutral-0, #fff) !important;
}
/* Très petits écrans (320) : bouton sur une ligne dans une carte de ~130 px */
@media (max-width: 25.99em) {
  #module-everpsblog-post .hr-produits .hr-produits-grille { gap: var(--space-3, 0.75rem); }
  #module-everpsblog-post .hr-produits .hr-produit-action {
    margin-inline: var(--space-2, 0.5rem); padding-inline: var(--space-2, 0.5rem); font-size: 0.75rem !important;
  }
}
#module-everpsblog-post .hr-produits .hr-produit-lien:focus-visible { outline: 2px solid var(--stitch-gold, #8B6A00); outline-offset: 2px; }

/* ---- Mouvement : seulement si l'utilisateur ne l'a pas désactivé ------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  #module-everpsblog-post .hr-lecture .hr-faq[open] .hr-faq-corps { animation: hr-deplier 0.3s ease-out; }
  #module-everpsblog-post .hr-lecture .hr-apparait { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.6s ease, transform 0.6s ease; }
  #module-everpsblog-post .hr-lecture .hr-apparait.est-visible { opacity: 1; transform: none; }
  #module-everpsblog-post .hr-produits .hr-produit-lien {
    transition: transform var(--duration-normal, 250ms) var(--ease-out, ease-out), box-shadow var(--duration-normal, 250ms) var(--ease-out, ease-out);
  }
  #module-everpsblog-post .hr-produits .hr-produit-lien:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-md, 0 4px 12px rgba(43, 39, 35, 0.08)); }
  #module-everpsblog-post .hr-produits .hr-produit-image img { transition: transform var(--duration-slow, 400ms) var(--ease-out, ease-out); }
  #module-everpsblog-post .hr-produits .hr-produit-lien:hover .hr-produit-image img { transform: scale(1.04); }
}
@keyframes hr-deplier { from { opacity: 0; transform: translateY(-0.25rem); } to { opacity: 1; transform: none; } }
@media print {
  .hr-progression, #module-everpsblog-post .hr-lecture .hr-sommaire { display: none !important; }
  #module-everpsblog-post .hr-lecture .hr-apparait { opacity: 1 !important; transform: none !important; }
}