/**
 * Gabarit : article (templates/single.html) — chargé uniquement sur les articles.
 *
 * Objectifs de lecture :
 *  - colonne de 68 caractères environ (au-delà, l'œil se perd en revenant à la ligne) ;
 *  - corps en taille « prose » (17-19 px), interlignage 1,75 ;
 *  - intertitres sur l'échelle du système, en plus petit que les titres de section
 *    de l'accueil : dans un texte long, un H2 de 38 px casserait la lecture.
 *      H2 d'article = 2x-large (22-28 px) · H3 d'article = xl (20-24 px)
 *  - liens soulignés : sans soulignement, un lecteur ne les voit pas dans un paragraphe.
 */

/* --- Grille : texte + colonne latérale ------------------------------------ */
.single-article-layout-wrap {
  max-width: var(--wp--style--global--wide-size);
  margin: var(--wp--preset--spacing--60) auto 0;
  padding: 0 var(--wp--preset--spacing--40);
}

.single-article-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--wp--custom--measure)) 300px;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--80);
  align-items: stretch; /* la colonne latérale fait la hauteur de l'article : son dernier bloc peut rester collé */
}

.single-article-main {
  min-width: 0;
  max-width: none;
}

/* --- Feuille de lecture : le corps de l'article posé sur un fond teinté ----
   Distingue la lecture du reste de la page (en-tête, colonne latérale,
   articles liés). La teinte est un seul réglage : --lobst-sheet-bg.
   La largeur du texte (44rem) est conservée : la colonne grandit du padding. */
.single-article-grid {
  --lobst-sheet-pad: var(--wp--preset--spacing--70);
  --lobst-sheet-bg: var(--wp--preset--color--surface-mint);
  --lobst-sheet-border: rgba(19, 82, 46, 0.10);
  grid-template-columns: minmax(0, calc(var(--wp--custom--measure) + 2 * var(--lobst-sheet-pad))) 300px;
  gap: var(--wp--preset--spacing--70);
}

.single-article-main {
  align-self: start;
  padding: var(--lobst-sheet-pad);
  border: 1px solid var(--lobst-sheet-border);
  border-radius: var(--wp--custom--radius--lg);
  background: var(--lobst-sheet-bg);
  box-shadow: 0 20px 44px -30px rgba(9, 40, 28, 0.28);
}

/* Les encadrés blancs du texte (sommaire, tableaux, citations) ressortent sur la feuille. */
.single-article-main .lobst-toc,
.single-article-prose .wp-block-table,
.single-article-prose blockquote {
  background: var(--wp--preset--color--base);
}

@media (max-width: 1023px) {
  .single-article-grid {
    --lobst-sheet-pad: var(--wp--preset--spacing--50);
  }
}

@media (max-width: 599px) {
  .single-article-grid {
    --lobst-sheet-pad: var(--wp--preset--spacing--40);
  }
}

/* --- Corps du texte -------------------------------------------------------- */
.single-article-prose {
  font-size: var(--wp--preset--font-size--prose);
  line-height: var(--wp--custom--line-height--prose);
  color: var(--wp--preset--color--text-main);
}

.single-article-prose > * + * {
  margin-top: 0;
}

.single-article-prose :where(p, ul, ol, figure, table, blockquote, .wp-block-group) {
  margin: 0 0 1.25em;
}

.single-article-prose :where(h2, h3, h4) {
  scroll-margin-top: 6rem; /* l'en-tête collant ne recouvre pas le titre visé par le sommaire */
  font-family: var(--wp--preset--font-family--newsreader);
  font-weight: var(--wp--custom--font-weight--medium);
  color: var(--wp--preset--color--contrast);
  letter-spacing: var(--wp--custom--letter-spacing--tight);
}

.single-article-prose h2 {
  margin: 2em 0 0.5em;
  font-size: var(--wp--preset--font-size--2-x-large);
  line-height: 1.25;
}

.single-article-prose h3 {
  margin: 1.6em 0 0.4em;
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1.3;
}

.single-article-prose h4 {
  margin: 1.4em 0 0.3em;
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: var(--wp--preset--font-size--lg);
  letter-spacing: 0;
}

.single-article-prose > :first-child {
  margin-top: 0;
}

.single-article-prose a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--primary);
  font-weight: var(--wp--custom--font-weight--medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.single-article-prose a:where(:not(.wp-element-button)):hover {
  color: var(--wp--preset--color--primary-dark);
  text-decoration-thickness: 2px;
}

.single-article-prose :where(ul, ol) {
  padding-left: 1.4em;
}

.single-article-prose li {
  margin-bottom: 0.4em;
}

.single-article-prose li::marker {
  color: var(--wp--preset--color--primary);
}

.single-article-prose strong {
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--contrast);
}

.single-article-prose blockquote {
  margin-inline: 0;
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  border-left: 3px solid var(--wp--preset--color--secondary);
  background: var(--wp--preset--color--surface-subtle);
  border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--lg);
  font-style: italic;
  color: var(--wp--preset--color--contrast);
}

.single-article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--wp--custom--radius--md);
}

.single-article-prose figcaption {
  margin-top: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--muted);
  text-align: left;
}

.single-article-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--sm);
}

.single-article-prose :where(th, td) {
  padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--wp--preset--color--border);
  text-align: left;
  vertical-align: top;
}

.single-article-prose th {
  background: var(--wp--preset--color--surface-subtle);
  color: var(--wp--preset--color--contrast);
}

/* Les tableaux larges défilent dans leur cadre au lieu de faire déborder la page. */
.single-article-prose .wp-block-table {
  overflow-x: auto;
}

/* --- En-tête : méta et relecture médicale --------------------------------- */
.single-article-meta {
  gap: 0.35rem 0.6rem;
}

.lobst-review {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin: 0 0 var(--wp--preset--spacing--50);
  padding: 0.45rem 0.85rem;
  border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--surface-mint);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-main);
}

.lobst-review__label {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: var(--wp--custom--letter-spacing--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}

.lobst-review strong {
  color: var(--wp--preset--color--contrast);
}

/* --- En-tête d'article (v1.7) : trois niveaux, une seule barre de signature ---
   Remplace l'empilement fil d'Ariane + pastilles + méta + gros boutons.        */
.lobst-ahero {
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
  margin-bottom: var(--wp--preset--spacing--50);
}

.lobst-ahero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--60);
  align-items: center;
  max-width: var(--wp--style--global--wide-size, 1240px);
  margin-inline: auto;
}

.lobst-ahero__inner.has-cover {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.lobst-ahero__text {
  min-width: 0;
  max-width: 44rem;
}

/* 1. Où suis-je ? discret, en petites capitales. */
.lobst-ahero__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: var(--wp--custom--letter-spacing--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.lobst-ahero__crumbs a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}

.lobst-ahero__crumbs a:last-child {
  color: var(--wp--preset--color--primary);
}

.lobst-ahero__crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* 2. Que vais-je lire ? le titre domine seul. */
.lobst-ahero .lobst-ahero__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--4-x-large);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lobst-ahero__lead {
  margin: var(--wp--preset--spacing--40) 0 0;
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.55;
  color: var(--wp--preset--color--text-main);
}

/* 3. Qui, quand, partager : une barre unique, séparée par un filet. */
.lobst-ahero__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
  margin-top: var(--wp--preset--spacing--60);
  padding-top: var(--wp--preset--spacing--50);
  border-top: 1px solid var(--wp--preset--color--border);
}

.lobst-ahero__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.lobst-ahero__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: 1.05rem;
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--wp--preset--color--base);
}

.lobst-ahero__mono {
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.lobst-ahero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lobst-ahero__who-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.35;
}

.lobst-ahero__author {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-main);
}

.lobst-ahero__author strong {
  color: var(--wp--preset--color--contrast);
}

.lobst-ahero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--muted);
}

.lobst-ahero__share {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.lobst-ahero__share-label {
  margin-right: 0.25rem;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: var(--wp--custom--letter-spacing--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.lobst-ahero__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 50%;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lobst-ahero__icon:hover {
  border-color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

.lobst-ahero__icon--wa {
  border-color: transparent;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

.lobst-ahero__icon--wa:hover {
  background: var(--wp--preset--color--primary-dark, #0b3a20);
}

/* Confirmation « Lien copié » : bulle sous l'icône, vide le reste du temps. */
.lobst-ahero__copied:empty {
  display: none;
}

.lobst-ahero__copied {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  padding: 0.2rem 0.55rem;
  border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--xs);
  white-space: nowrap;
}

.lobst-ahero .lobst-review {
  margin: var(--wp--preset--spacing--40) 0 0;
}

/* Couverture : format fixe, ne déborde jamais du conteneur. */
.lobst-ahero__cover {
  margin: 0;
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  background: var(--wp--preset--color--surface-mint);
  box-shadow: 0 24px 50px -22px rgba(9, 40, 28, 0.35);
}

.lobst-ahero__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 900px) {
  .lobst-ahero__inner.has-cover {
    grid-template-columns: minmax(0, 1fr);
  }

  .lobst-ahero__cover img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 599px) {
  .lobst-ahero {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  }

  .lobst-ahero .lobst-ahero__title {
    font-size: var(--wp--preset--font-size--3-x-large);
  }

  .lobst-ahero__share-label {
    display: none;
  }
}

/* --- Sommaire ------------------------------------------------------------- */
.lobst-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.lobst-toc__list li {
  counter-increment: toc;
}

.lobst-toc__list a {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  padding: 0.4rem 0;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--wp--preset--color--text-main);
  text-decoration: none;
}

.lobst-toc__list a::before {
  content: counter(toc) ".";
  color: var(--wp--preset--color--muted);
  font-variant-numeric: tabular-nums;
}

.lobst-toc__list a:hover,
.lobst-toc__list a[aria-current] {
  color: var(--wp--preset--color--primary);
}

.lobst-toc__list a[aria-current] {
  font-weight: var(--wp--custom--font-weight--medium);
}

/* Colonne latérale : seul le dernier bloc (le sommaire s'il existe) reste collé. */
.single-sidebar {
  position: static;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--50);
}

.single-sidebar > :last-child {
  position: sticky;
  top: 6rem;
}

.lobst-toc--sidebar {
  padding: var(--wp--preset--spacing--50);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--base);
}

.lobst-toc--sidebar .lobst-toc__list a[aria-current] {
  box-shadow: inset 2px 0 0 var(--wp--preset--color--primary);
  margin-left: calc(var(--wp--preset--spacing--50) * -1);
  padding-left: calc(var(--wp--preset--spacing--50) - 2px);
  grid-template-columns: calc(1.6em + 2px) 1fr;
}

/* Sommaire repliable : mobile et tablette uniquement. */
.lobst-toc--inline {
  display: none;
  margin: 0 0 var(--wp--preset--spacing--60);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--surface-subtle);
}

.lobst-toc--inline summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0 var(--wp--preset--spacing--50);
  cursor: pointer;
  list-style: none;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--contrast);
}

.lobst-toc--inline summary::-webkit-details-marker {
  display: none;
}

.lobst-toc--inline summary::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.lobst-toc--inline[open] summary::after {
  transform: rotate(-135deg);
}

.lobst-toc__count {
  font-weight: 500;
  color: var(--wp--preset--color--muted);
}

.lobst-toc--inline .lobst-toc__list {
  padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

/* --- Sources et références ----------------------------------------------- */
.lobst-sources {
  margin: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--50);
  border-top: 1px solid var(--wp--preset--color--border);
}

.lobst-sources__title {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: var(--wp--custom--letter-spacing--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.lobst-sources__list {
  margin: 0;
  padding-left: 1.4em;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.55;
  color: var(--wp--preset--color--text-main);
}

.lobst-sources__list li {
  margin-bottom: 0.35em;
  overflow-wrap: anywhere; /* les longues adresses ne font pas déborder la page */
}

.lobst-sources__list a {
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Mots-clés : pilules sans virgules entre elles. */
.single-article-tags .wp-block-post-terms__separator {
  display: none;
}

/* --- Tablette et mobile --------------------------------------------------- */
@media (max-width: 1023px) {
  .single-article-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--70);
  }

  .single-article-main {
    max-width: var(--wp--custom--measure);
    margin-inline: auto;
    width: 100%;
  }

  .lobst-toc--inline {
    display: block;
  }

  .lobst-toc--sidebar {
    display: none;
  }

  .single-sidebar {
    max-width: var(--wp--custom--measure);
    margin-inline: auto;
    width: 100%;
  }

  .single-sidebar > :last-child {
    position: static;
  }
}

@media (max-width: 599px) {
  /* Sur mobile, les points de séparation tombaient en début de ligne : on garde l'espacement seul. */
  .single-article-meta {
    gap: 0.2rem 0.9rem;
  }

  .single-article-meta .single-article-sep {
    display: none;
  }
}

/* --- Feuille de lecture : ajustements tablette / mobile ------------------- */
.single-article-main {
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  .single-article-main {
    max-width: calc(var(--wp--custom--measure) + 2 * var(--lobst-sheet-pad));
  }
}

@media (max-width: 599px) {
  /* Sur téléphone : feuille bord à bord, sans marges latérales qui grignotent le texte. */
  .single-article-main {
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * var(--wp--preset--spacing--40));
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* --- Navigation précédent / suivant : deux cartes cliquables --------------- */
.single-post-nav-wrap,
.lobst-pnav.single-post-nav {
  container-type: inline-size;
}

.lobst-pnav.single-post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--40);
  margin-top: var(--wp--preset--spacing--60);
  padding-top: var(--wp--preset--spacing--60);
  border-top: 1px solid var(--lobst-sheet-border, var(--wp--preset--color--border));
}

.lobst-pnav__card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  box-sizing: border-box;
  min-height: 104px;
  padding: 0.9rem 1.1rem 0.9rem 0.9rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--base);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 10px 24px -20px rgba(9, 40, 28, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* « Suivant » : miroir, flèche à droite, texte aligné à droite. */
.lobst-pnav__card--next {
  flex-direction: row-reverse;
  padding: 0.9rem 0.9rem 0.9rem 1.1rem;
  text-align: right;
}

.lobst-pnav__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--wp--preset--color--surface-mint);
  color: var(--wp--preset--color--primary);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.lobst-pnav__thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: var(--wp--custom--radius--sm);
  object-fit: cover;
}

.lobst-pnav__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}

.lobst-pnav__label {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: var(--wp--custom--letter-spacing--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}

.lobst-pnav__cat {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--muted);
}

.lobst-pnav__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--contrast);
}

@media (hover: hover) {
  .lobst-pnav__card:hover {
    transform: translateY(-2px);
    border-color: var(--wp--preset--color--secondary);
    box-shadow: 0 16px 30px -20px rgba(9, 40, 28, 0.45);
  }

  .lobst-pnav__card:hover .lobst-pnav__arrow {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
  }

  .lobst-pnav__card:hover .lobst-pnav__title {
    color: var(--wp--preset--color--primary);
  }
}

/* Deux colonnes seulement si chaque carte dispose d'au moins ~300 px. */
@container (max-width: 640px) {
  .lobst-pnav__card,
  .lobst-pnav__card--next {
    grid-column: 1 / -1;
  }

  .lobst-pnav__empty {
    display: none;
  }
}

@media (max-width: 599px) {

  .lobst-pnav__thumb {
    flex-basis: 60px;
    width: 60px;
    height: 60px;
  }
}

/* Gouttière unique de 20 px sous 1024 px (en-tête d'article). */
@media (max-width: 1023px) {
  .lobst-ahero {
    padding-left: var(--wp--preset--spacing--40);
    padding-right: var(--wp--preset--spacing--40);
  }
}