/* =====================================================================
   blog-tresse.css — refonte présentation blog (module prestablog)
   v3 — LUXE, police de marque KARLA uniquement — 2026-06-13
   Servi HORS CCC. Karla (300..700) chargé via <link> dans le master.
   Luxe = traitement : graisses médium, interlettrage serré sur display /
   large en capitales, hairlines or fines, retenue chromatique, beaucoup d'air.
   Corps article = #prestablogfont (PAS .prestablog_article .rte).
   ===================================================================== */

:root {
  --blog-ink: #1c1a17;
  --blog-ink-soft: #3a382f;
  --blog-faint: #9a968b;
  --blog-gold: #7a5a15;        /* or texte (liens) — lisible */
  --blog-gold-mid: #b5852a;
  --blog-gold-hair: #cdb06a;   /* hairlines or — subtil */
  --blog-cream: #faf6ef;
  --blog-cream-dk: #f1e9da;
  --blog-line: #ece5d8;
  --blog-card-bg: #ffffff;
  --blog-radius: 14px;
  --blog-measure: 680px;
  --blog-font: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =====================================================================
   1. PAGE LISTE — grille de cartes
   ===================================================================== */
ul#blog_list_1-7.blog_list_1-7-grid {
  list-style: none !important;
  margin: 30px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 34px !important;
  height: auto !important;
  position: static !important;
}
/* le module lance un masonry JS (position:absolute inline) -> on force le flux */
ul#blog_list_1-7.blog_list_1-7-grid > li.blog-grid {
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
  width: auto !important; float: none !important;
  position: static !important; left: auto !important; top: auto !important; right: auto !important;
  transform: none !important;
}
ul#blog_list_1-7.blog_list_1-7-grid > li.blog-grid-sizer,
ul#blog_list_1-7.blog_list_1-7-grid > li.tiers:empty { display: none !important; }

li.blog-grid .block_cont {
  display: flex !important; flex-direction: column !important; height: 100% !important;
  background: var(--blog-card-bg) !important;
  border: 1px solid var(--blog-line) !important;
  border-radius: var(--blog-radius) !important;
  overflow: hidden !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
li.blog-grid .block_cont:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 34px rgba(28,26,23,.09) !important; }

li.blog-grid .block_top { display: block !important; margin: 0 !important; aspect-ratio: 3 / 2 !important; background: var(--blog-cream) !important; overflow: hidden !important; }
li.blog-grid .block_top a, li.blog-grid .block_top picture { display: block !important; height: 100% !important; }
li.blog-grid .block_top img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform .5s ease !important; }
li.blog-grid .block_cont:hover .block_top img { transform: scale(1.045) !important; }
li.blog-grid .block_top.blog-ph { display: flex !important; align-items: center !important; justify-content: center !important; background: radial-gradient(circle at 32% 26%, var(--blog-cream-dk), var(--blog-cream)) !important; }
li.blog-grid .block_top.blog-ph .blog-ph-mark { font-family: var(--blog-font) !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: .32em !important; color: var(--blog-gold) !important; opacity: .6 !important; text-transform: uppercase !important; }

li.blog-grid .block_bas { display: flex !important; flex-direction: column !important; gap: 11px !important; padding: 20px 22px 8px !important; flex: 1 1 auto !important; }
li.blog-grid .block_bas h3 { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
li.blog-grid .block_bas h3 a { font-family: var(--blog-font) !important; font-size: 20px !important; line-height: 1.28 !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: var(--blog-ink) !important; text-decoration: none !important; }
li.blog-grid .block_bas h3 a:hover { color: var(--blog-gold) !important; }
li.blog-grid .block_bas h3 br { display: none !important; }
li.blog-grid .categorie_blog, .blog-cat-pill { display: inline-block !important; align-self: flex-start !important; font-family: var(--blog-font) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--blog-gold) !important; background: none !important; padding: 0 !important; border: 0 !important; text-decoration: none !important; }
li.blog-grid .date_blog-cat { display: block !important; order: 3 !important; font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--blog-faint) !important; }
li.blog-grid .date_blog-cat a { color: var(--blog-faint) !important; }
li.blog-grid p.prestablog_desc { margin: 0 !important; font-size: 14px !important; line-height: 1.62 !important; color: var(--blog-ink-soft) !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
li.blog-grid .star_content { margin-top: 2px !important; }
li.blog-grid .prestablog_more { padding: 16px 22px 22px !important; margin-top: auto !important; background: none !important; }
li.blog-grid .prestablog_more a.blog_link { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: none !important; border: 0 !important; padding: 0 !important; font-family: var(--blog-font) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--blog-gold) !important; text-decoration: none !important; }
li.blog-grid .prestablog_more a.blog_link::after { content: "→" !important; transition: transform .2s ease !important; }
li.blog-grid .block_cont:hover .prestablog_more a.blog_link::after { transform: translateX(5px) !important; }
li.blog-grid .prestablog_more .comments, li.blog-grid .prestablog_more span { color: var(--blog-faint) !important; font-size: 12px !important; }

/* =====================================================================
   2. PAGE ARTICLE — en-tête
   ===================================================================== */
article#prestablogfront { max-width: 860px !important; margin: 0 auto !important; padding: 0 20px !important; font-family: var(--blog-font) !important; }
article#prestablogfront > picture { display: block !important; margin: 10px auto 36px !important; max-width: 620px !important; }
article#prestablogfront > picture img.news, article#prestablogfront img.news { width: 100% !important; height: auto !important; max-height: 470px !important; object-fit: cover !important; border-radius: var(--blog-radius) !important; display: block !important; }
article#prestablogfront time.date { display: block !important; text-align: center !important; font-size: 11px !important; letter-spacing: .26em !important; text-transform: uppercase !important; color: var(--blog-faint) !important; margin: 0 0 16px !important; }
article#prestablogfront h1, #prestablog_article {
  font-family: var(--blog-font) !important; font-weight: 500 !important; text-align: center !important;
  font-size: clamp(27px, 3.1vw, 37px) !important; line-height: 1.16 !important; letter-spacing: -.018em !important;
  color: var(--blog-ink) !important; margin: .1em auto .5em !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
}
article#prestablogfront .info_blog {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important;
  gap: 8px 18px !important; max-width: 520px !important; margin: 26px auto 0 !important; padding: 18px 0 0 !important;
  border: 0 !important; border-top: 1px solid var(--blog-line) !important;
  font-size: 11px !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--blog-faint) !important;
}
article#prestablogfront .info_blog a { color: var(--blog-gold) !important; text-decoration: none !important; font-weight: 600 !important; }
article#prestablogfront .info_blog .blog-readtime { color: var(--blog-faint) !important; }

/* =====================================================================
   3. CORPS DE L'ARTICLE — #prestablogfont (centré, éditorial luxe)
   ===================================================================== */
#prestablogfont {
  max-width: var(--blog-measure) !important; margin: 44px auto 0 !important;
  font-family: var(--blog-font) !important; font-size: 18px !important; line-height: 1.62 !important;
  color: var(--blog-ink-soft) !important; text-align: center !important;
}
#prestablogfont p { text-align: center !important; margin: 0 0 1.15em !important; line-height: 1.62 !important; }
#prestablogfont > *:first-child { margin-top: 0 !important; }

#prestablogfont h1, #prestablogfont h2, #prestablogfont h3, #prestablogfont h4 {
  font-family: var(--blog-font) !important; font-weight: 600 !important; text-align: center !important;
  color: var(--blog-ink) !important; border: 0 !important; background: none !important; box-shadow: none !important;
}
#prestablogfont h2 { font-size: clamp(22px, 2.5vw, 28px) !important; line-height: 1.24 !important; letter-spacing: -.01em !important; margin: 2em auto .7em !important; padding: 0 !important; scroll-margin-top: 90px !important; }
#prestablogfont h2::before { content: "" !important; display: block !important; width: 30px !important; height: 1px !important; background: var(--blog-gold-hair) !important; margin: 0 auto 16px !important; }
#prestablogfont h3 { font-size: clamp(19px, 2.1vw, 22px) !important; line-height: 1.32 !important; letter-spacing: -.005em !important; margin: 1.8em auto .5em !important; scroll-margin-top: 90px !important; }
#prestablogfont h4 { font-size: 19px !important; margin: 1.5em auto .4em !important; }

#prestablogfont a { color: var(--blog-gold) !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-color: var(--blog-cream-dk) !important; font-weight: 600 !important; }
#prestablogfont a:hover { text-decoration-color: var(--blog-gold-hair) !important; }

/* listes : UL = puce or unique ; OL = on garde les numéros */
#prestablogfont ul { list-style: none !important; text-align: center !important; padding: 0 !important; margin: 0 0 1.45em !important; }
#prestablogfont ul > li { list-style: none !important; text-align: center !important; margin: 0 0 .5em !important; padding: 0 !important; line-height: 1.55 !important; }
#prestablogfont ul > li::before { content: "—" !important; color: var(--blog-gold-hair) !important; margin-right: .5em !important; position: static !important; width: auto !important; height: auto !important; background: none !important; display: inline !important; }
#prestablogfont ol { text-align: center !important; padding: 0 !important; margin: 0 0 1.45em !important; list-style-position: inside !important; }
#prestablogfont ol > li { text-align: center !important; margin: 0 0 .6em !important; line-height: 1.7 !important; }

#prestablogfont img { max-width: 100% !important; height: auto !important; display: block !important; margin: 2em auto !important; border-radius: 10px !important; }

/* tableaux (cellules alignées à gauche pour lisibilité) */
#prestablogfont table { width: 100% !important; border-collapse: collapse !important; margin: 2em auto !important; font-size: 15.5px !important; border: 1px solid var(--blog-line) !important; border-radius: 10px !important; overflow: hidden !important; text-align: left !important; }
#prestablogfont thead th, #prestablogfont th { background: var(--blog-cream-dk) !important; color: var(--blog-gold) !important; text-align: left !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
#prestablogfont th, #prestablogfont td { padding: 12px 15px !important; border-bottom: 1px solid var(--blog-line) !important; vertical-align: top !important; line-height: 1.55 !important; text-align: left !important; }
#prestablogfont tbody tr:nth-child(even) td { background: var(--blog-cream) !important; }
#prestablogfont tbody tr:last-child td { border-bottom: 0 !important; }

/* citation = pull-quote */
#prestablogfont blockquote { font-family: var(--blog-font) !important; font-weight: 400 !important; font-style: normal !important; font-size: 23px !important; line-height: 1.5 !important; letter-spacing: -.005em !important; text-align: center !important; color: var(--blog-ink) !important; max-width: 580px !important; margin: 2.2em auto !important; padding: 0 !important; border: 0 !important; background: none !important; }
#prestablogfont blockquote::before { content: "" !important; display: block !important; width: 26px !important; height: 1px !important; background: var(--blog-gold-hair) !important; margin: 0 auto 18px !important; }
#prestablogfont blockquote p:last-child { margin-bottom: 0 !important; }

/* encadré */
#prestablogfont .blog-callout { text-align: center !important; margin: 2.2em auto !important; max-width: 600px !important; padding: 24px 28px !important; background: var(--blog-cream) !important; border: 1px solid var(--blog-line) !important; border-radius: 12px !important; }

/* séparateur = hairline or */
#prestablogfont hr, hr.blog-sep { display: block !important; border: 0 !important; width: 34px !important; height: 1px !important; background: var(--blog-gold-hair) !important; margin: 2.6em auto !important; }

#prestablogfont .panel, #prestablogfont .card, #prestablogfont .well, #prestablogfont .box { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

/* =====================================================================
   4. SOMMAIRE (TOC flottant) — hairlines, sans boîte
   ===================================================================== */
.prestablog-toc.float-toc { max-width: 560px !important; margin: 8px auto 30px !important; background: none !important; border: 0 !important; border-radius: 0 !important; padding: 4px 0 0 !important; text-align: center !important; }
.prestablog-toc .prestablog-toc-title { font-family: var(--blog-font) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .26em !important; text-transform: uppercase !important; color: var(--blog-faint) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; cursor: pointer !important; }
.prestablog-toc-list { list-style: none !important; margin: 16px 0 0 !important; padding: 0 !important; }
.prestablog-toc.collapsed .prestablog-toc-list { display: none !important; }
.prestablog-toc-item { margin: 0 0 9px !important; line-height: 1.45 !important; }
.prestablog-toc-link { color: var(--blog-gold) !important; text-decoration: none !important; font-size: 13px !important; }
.prestablog-toc-link:hover { text-decoration: underline !important; }
.prestablog-toc-level-3 { font-size: 13px !important; opacity: .8 !important; }

/* Anti double-sommaire : si un sommaire est écrit dans le contenu (.article-toc),
   masquer le TOC module redondant. Les articles SANS sommaire en dur gardent le TOC module. */
body:has(#prestablogfont .article-toc) .prestablog-toc.float-toc { display: none !important; }

/* Sommaire écrit EN DUR dans le contenu (div.article-toc) — on retire l'encadré
   et on aligne sur le look hairline luxe (l'inline est battu par !important). */
#prestablogfont .article-toc {
  background: none !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
  max-width: 560px !important; margin: 8px auto 30px !important; padding: 4px 0 0 !important; text-align: center !important;
}
#prestablogfont .article-toc > p:first-child,
#prestablogfont .article-toc > strong:first-child,
#prestablogfont .article-toc > h2:first-child, #prestablogfont .article-toc > h3:first-child, #prestablogfont .article-toc > h4:first-child {
  font-family: var(--blog-font) !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .26em !important; text-transform: uppercase !important; color: var(--blog-faint) !important;
  margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; background: none !important;
}
#prestablogfont .article-toc ol, #prestablogfont .article-toc ul { margin: 0 !important; }
#prestablogfont .article-toc li { margin: 0 0 5px !important; line-height: 1.5 !important; }
#prestablogfont .article-toc li::before { content: none !important; }
#prestablogfont .article-toc a { color: var(--blog-gold) !important; text-decoration: none !important; font-weight: 500 !important; font-size: 13px !important; }
#prestablogfont .article-toc a:hover { text-decoration: underline !important; }

/* =====================================================================
   5. PARTAGE / AUTEUR / LIÉS
   ===================================================================== */
.blogsoc-buttons { list-style: none !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; max-width: var(--blog-measure) !important; margin: 40px auto 8px !important; padding: 0 !important; }
.blogsoc-buttons .blogsoc-icon { width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--blog-line) !important; border-radius: 50% !important; background: #fff !important; transition: background .15s ease, border-color .15s ease !important; }
.blogsoc-buttons .blogsoc-icon:hover { background: var(--blog-cream) !important; border-color: var(--blog-gold-hair) !important; }
.blogsoc-buttons svg { width: 16px !important; height: 16px !important; fill: var(--blog-ink-soft) !important; }
.prestablogtitle { font-family: var(--blog-font) !important; max-width: var(--blog-measure) !important; margin: 38px auto 16px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .26em !important; text-transform: uppercase !important; text-align: center !important; color: var(--blog-faint) !important; }

#prestablogauthor { max-width: var(--blog-measure) !important; margin: 40px auto !important; padding: 26px !important; background: var(--blog-cream) !important; border: 1px solid var(--blog-line) !important; border-radius: 12px !important; display: grid !important; grid-template-columns: 64px 1fr !important; gap: 18px !important; align-items: center !important; text-align: left !important; }
#prestablogauthor img.author { width: 64px !important; height: 64px !important; border-radius: 50% !important; object-fit: cover !important; grid-row: span 2 !important; }
#prestablogauthor .prestablogtitle { margin: 0 !important; text-align: left !important; }

#blog_article_linked { max-width: var(--blog-measure) !important; margin: 48px auto 0 !important; }
#blog_article_linked ul.blog_list { list-style: none !important; padding: 0 !important; margin: 18px 0 0 !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 22px !important; }
#blog_article_linked ul.blog_list > li { background: #fff !important; border: 1px solid var(--blog-line) !important; border-radius: 12px !important; overflow: hidden !important; }
#blog_article_linked img { width: 100% !important; aspect-ratio: 3/2 !important; object-fit: cover !important; display: block !important; }
#blog_article_linked .h3title { font-family: var(--blog-font) !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -.01em !important; margin: 0 !important; padding: 14px 16px !important; text-align: left !important; }
#blog_article_linked .h3title a { color: var(--blog-ink) !important; text-decoration: none !important; }
#blog_article_linked .date_blog-cat { font-size: 11px !important; color: var(--blog-faint) !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: .14em !important; }
#blog_article_linked .blog_link { display: inline-block !important; padding: 0 16px 16px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--blog-gold) !important; text-decoration: none !important; }

#blog_product_linked { max-width: var(--blog-measure) !important; margin: 38px auto 0 !important; text-align: center !important; }

/* masque l'icône loupe parasite */
.blog_link i.material-icons { display: none !important; }

/* =====================================================================
   6. RESPONSIVE
   ===================================================================== */
@media (max-width: 768px) {
  ul#blog_list_1-7.blog_list_1-7-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  #prestablogfont { font-size: 16.5px !important; line-height: 1.75 !important; margin-top: 32px !important; }
  article#prestablogfront { padding: 0 18px !important; }
  article#prestablogfront > picture img.news { max-height: 280px !important; }
  #prestablogfont table { font-size: 14px !important; display: block !important; overflow-x: auto !important; }
  #prestablogfont blockquote { font-size: 20px !important; }
}