/* Art de vivre / Lifestyle (recette Alain 2026-10-08 ; inc/lifestyle.php, contenu : PC47). En-tête comme L'Atelier
   (titre en italique, trait vermillon), titre à l'indigo de la rubrique (charte : l'indigo porte Lifestyle, comme le
   titre de la section « 04 » de l'accueil) ; une ouverture image et texte (bloc « Média et texte », classe
   kh-lifestyle-intro) ; les articles en cartes (kh-articles.css) ; un seul bouton. Sur mobile : l'image au-dessus. */

/* ---- En-tête ---- */
.kh-lifestyle-page .entry-hero .entry-header { min-height: 0; padding: clamp(2rem, 4vw, 3rem) 0 0; }
.kh-lifestyle-page .entry-hero h1 { margin: 0; color: var(--kh-indigo); font: italic 400 clamp(2.6rem, 4.6vw, 3.8rem)/1.05 var(--kh-font-display); }
.kh-lifestyle-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-lifestyle-page .content-area { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.kh-lifestyle-page .content-container { max-width: 1200px; }
.kh-lifestyle-page .entry { background: transparent; box-shadow: none; }

/* ---- Ouverture image et texte ---- */
.kh-lifestyle-page .kh-lifestyle-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); margin: 0 0 clamp(3rem, 6vw, 5rem); }
/* Placement explicite : le CSS du bloc « Média et texte » (WordPress) fixe lui-même colonnes et rangées. */
.kh-lifestyle-page .kh-lifestyle-intro .wp-block-media-text__media { grid-column: 1; grid-row: 1; margin: 0; }
.kh-lifestyle-page .kh-lifestyle-intro .wp-block-media-text__content { grid-column: 2; grid-row: 1; padding: 0; max-width: 34rem; }
.kh-lifestyle-page .kh-lifestyle-intro .wp-block-media-text__media img { display: block; width: 100%; height: auto; }
.kh-lifestyle-page .kh-lifestyle-intro p { margin: 0 0 1rem; line-height: 1.75; }
.kh-lifestyle-page .kh-lifestyle-lead { font: italic 400 clamp(1.3rem, 2vw, 1.55rem)/1.4 var(--kh-font-display); color: var(--kh-sumi); }
/* Le texte ne dépasse jamais l'image (Alain, 2026-10-08) : l'image prend toute la hauteur de la rangée, recadrée quand
   le texte est plus long ; le texte reste centré quand l'image est plus haute. Ordinateur seulement (mobile : empilés). */
@media (min-width: 782px) {
  .kh-lifestyle-page .kh-lifestyle-intro { align-items: stretch; }
  .kh-lifestyle-page .kh-lifestyle-intro .wp-block-media-text__media { align-self: stretch; }
  .kh-lifestyle-page .kh-lifestyle-intro .wp-block-media-text__content { align-self: center; }
  .kh-lifestyle-page .kh-lifestyle-intro .wp-block-media-text__media img { height: 100%; object-fit: cover; }
}

/* ---- Les articles ---- */
/* « Les premiers articles arrivent. » : affiché seulement tant qu'aucun article n'est publié. */
.kh-lifestyle-page .kh-lifestyle-soon { margin: 0 0 2rem; text-align: center; font: italic 400 1.35rem/1.4 var(--kh-font-display); color: var(--kh-sumi-70); }
.kh-lifestyle-page .entry-content:has(.kh-articles) .kh-lifestyle-soon { display: none; }
.kh-lifestyle-page .kh-articles { margin: 0 0 clamp(3rem, 6vw, 4.5rem); }

/* ---- Le bouton de fin ---- */
.kh-lifestyle-page .kh-lifestyle-cta { display: flex; justify-content: center; margin: 0 0 clamp(3rem, 6vw, 5rem); }

@media (max-width: 781px) {
  .kh-lifestyle-page .kh-lifestyle-intro { grid-template-columns: 1fr; gap: 1.25rem; }
  .kh-lifestyle-page .kh-lifestyle-intro .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
  .kh-lifestyle-page .kh-lifestyle-intro .wp-block-media-text__content { grid-column: 1; grid-row: 2; max-width: none; }
}