/* Article d'Art de vivre / Lifestyle (inc/lifestyle.php ; textes : PC48, modifiables dans l'éditeur). En-tête comme la
   rubrique (titre en italique à l'indigo de Lifestyle, trait vermillon) ; sous le titre, le mois, l'année et l'auteur,
   puis l'image ; un texte de lecture étroit (≈ 65 caractères par ligne, charte §5.3), chapô en italique, intertitres
   en questions ; deux koi au milieu du texte et deux à la fin (Alain, 2026-10-11) ; au bas, « Poursuivre le voyage » :
   deux autres articles en cartes (kh-articles.css), puis le retour à la rubrique. */

/* ---- En-tête ---- */
.kh-article-page .entry-hero .entry-header { min-height: 0; padding: clamp(2rem, 4vw, 3rem) 0 0; }
.kh-article-page .entry-hero h1 { max-width: 24ch; margin: 0 auto; color: var(--kh-indigo); font: italic 400 clamp(2.2rem, 4.2vw, 3.4rem)/1.1 var(--kh-font-display); text-wrap: balance; }
.kh-article-page .entry-hero h1::after { content: ""; display: block; width: min(12rem, 60%); height: 1rem; margin: .8rem auto 0; background: url('../images/trait-pinceau-vermillon.webp') center / contain no-repeat; }
.kh-article-page .content-area { margin-top: clamp(1rem, 2vw, 1.75rem); }
.kh-article-page .content-container { max-width: 1200px; }
.kh-article-page .entry { background: transparent; box-shadow: none; }

/* ---- Colonne de lecture ---- */
.kh-article-page .entry-content > * { max-width: 42rem; margin-inline: auto; }
.kh-article-page .entry-content > p { margin-top: 0; margin-bottom: 1.15rem; font: 400 1.0625rem/1.8 var(--kh-font-body); color: var(--kh-sumi); }
.kh-article-page .entry-content > h2 { margin-top: 2.6rem; margin-bottom: .9rem; font: italic 400 clamp(1.55rem, 2.6vw, 1.95rem)/1.2 var(--kh-font-display); color: var(--kh-sumi); text-wrap: balance; }
.kh-article-page .entry-content > p a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.kh-article-page .entry-content > p a:is(:hover, :focus-visible) { color: var(--kh-vermillon); }

/* La rubrique (lien de retour), le mois, l'année et l'auteur, sous le titre. */
.kh-article-page .entry-content > p.kh-article-meta { margin-bottom: 1.6rem; text-align: center; font: 400 .75rem/1.4 var(--kh-font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--kh-sumi-70); }
.kh-article-page .entry-content > p.kh-article-meta a { color: inherit; text-decoration: none; }
.kh-article-page .entry-content > p.kh-article-meta a:is(:hover, :focus-visible) { color: var(--kh-vermillon); }
/* L'image de l'article, plus large que le texte. */
.kh-article-page .entry-content > .kh-article-hero { max-width: 60rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.kh-article-page .kh-article-hero img { display: block; width: 100%; height: auto; }
/* Le chapô : la réponse directe à la question du titre. */
.kh-article-page .entry-content > p.kh-article-lead { font: italic 400 clamp(1.3rem, 2vw, 1.5rem)/1.5 var(--kh-font-display); }
/* La signature et le crédit de l'image. */
.kh-article-page .entry-content > p.kh-article-signature { margin-top: 1.6rem; font: italic 400 1.4rem/1.2 var(--kh-font-display); }
.kh-article-page .entry-content > p.kh-article-credit { margin-top: 2.2rem; padding-top: .9rem; border-top: 1px solid var(--kh-sumi-20); font: 400 .8rem/1.5 var(--kh-font-ui); color: var(--kh-sumi-70); }

/* ---- Les koi de l'article (Alain, 2026-10-11) ---- */
/* Les cartes de « La sélection » de l'accueil (classe kh-home : kh-editorial.css et kh-foundations.css, section 7bis),
   qui ondulent dès qu'elles sont à l'écran (koi-film.js), deux par rangée dans la colonne de lecture. */
.kh-article-page .kh-article-koi .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; }
.kh-article-page .kh-article-koi .woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 0 0 .9rem; font: italic 400 1.5rem/1.15 var(--kh-font-display); color: var(--kh-sumi); }
.kh-article-page .kh-article-koi .woocommerce ul.products li.product .price { display: block; width: max-content; margin: auto auto 0; padding-top: .5rem; border-top: 2px solid var(--kh-vermillon); color: var(--kh-sumi); font: 400 .9rem/1.2 var(--kh-font-ui); }
/* Le même repère clavier que sur l'accueil (kh-editorial.css, réservé aux pages .kh-editorial). */
.kh-article-page .kh-article-koi :focus-visible { outline: 2px solid var(--kh-vermillon); outline-offset: 5px; }
/* Agrandi au survol, le koi de gauche part vers la droite et celui de droite vers la gauche (kh-foundations.css). */
.kh-article-page .kh-article-koi .woocommerce ul.products li.product:nth-child(odd) { --kh-koi-origin: left center; }
.kh-article-page .kh-article-koi .woocommerce ul.products li.product:nth-child(even) { --kh-koi-origin: right center; }
/* Au milieu : un filet, un petit titre, les deux cartes, un filet avant la question suivante. */
.kh-article-page .entry-content > .kh-article-koi--middle { margin: 2.4rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--kh-sumi-20); }
.kh-article-page .kh-article-koi__title { margin: 0 0 1.1rem; text-align: center; font: 400 .75rem/1.4 var(--kh-font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--kh-sumi-70); }
.kh-article-page .entry-content > .kh-article-koi--middle + h2 { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--kh-sumi-20); }
/* À la fin : un filet, le titre, les deux cartes, puis le bouton vers La Boutique. */
.kh-article-page .entry-content > .kh-article-koi--end { margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--kh-sumi-20); }
.kh-article-page .kh-article-koi--end > h2 { margin: 0 0 1.75rem; text-align: center; font: italic 400 clamp(1.55rem, 2.6vw, 1.95rem)/1.2 var(--kh-font-display); color: var(--kh-sumi); }
.kh-article-page .entry-content > .kh-article-koi--end + .kh-article-cta { margin-top: 2rem; }

/* ---- Poursuivre le voyage ---- */
/* Bouton vers La Boutique à la fin de chaque article (Alain, 2026-10-08), avant « Poursuivre le voyage ». */
.kh-article-page .entry-content > .kh-article-cta { display: flex; justify-content: center; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; }
.kh-article-page .entry-content > .kh-article-more { max-width: 56rem; margin: clamp(3.5rem, 7vw, 5rem) auto clamp(1.5rem, 3vw, 2.25rem); }
.kh-article-page .kh-article-more > h2 { margin: 0 0 1.5rem; text-align: center; font: italic 400 clamp(1.55rem, 2.6vw, 1.95rem)/1.2 var(--kh-font-display); color: var(--kh-sumi); }
.kh-article-page .kh-article-more .kh-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Le retour à la rubrique, en dernier (Alain, 2026-10-11). */
.kh-article-page .entry-content > p.kh-article-back { margin: 0 auto clamp(3rem, 6vw, 4.5rem); text-align: center; font: 400 .78rem/1.4 var(--kh-font-ui); letter-spacing: .14em; text-transform: uppercase; }
.kh-article-page .entry-content > p.kh-article-back a { padding-bottom: .2rem; border-bottom: 1px solid var(--kh-sumi-20); color: var(--kh-sumi); text-decoration: none; }
.kh-article-page .entry-content > p.kh-article-back a:is(:hover, :focus-visible) { border-color: currentColor; color: var(--kh-vermillon); }

@media (max-width: 767px) {
  .kh-article-page .kh-article-koi .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.15rem; }
}

@media (max-width: 600px) {
  .kh-article-page .kh-article-more .kh-articles { grid-template-columns: 1fr; }
  .kh-article-page .kh-article-koi .woocommerce ul.products { gap: .75rem; }
}