/* Opt-in editorial pages. Commerce markup and behaviours remain WooCommerce's. */
.kh-editorial {
  --kh-editorial-muted: var(--kh-sumi-70);
}
.kh-editorial .kh-home { min-width: 0; }
.kh-editorial .kh-home h1,
.kh-editorial .kh-home h2,
.kh-editorial .kh-home h3 { font-family: var(--kh-font-display); font-weight: 400; color: var(--kh-sumi); }
.kh-editorial .kh-home h1 { max-width: 14ch; margin: 1.5rem 0; font-size: clamp(3rem, 5.8vw, 5.5rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.kh-editorial .kh-home h3 { font-size: 2rem; line-height: 1.15; }
/* Ornement Manus (05_ornements/trait_pinceau_vermillon) sous les titres de section, comme sur ses maquettes. */
.kh-editorial .kh-home h2.kh-title::after, .kh-editorial .kh-home .kh-home-manifesto h2::after { /* Manifeste : même trait que les autres titres (Alain, 2026-10-06) */ content: ""; display: block; width: min(16rem, 70%); height: 1.1rem; margin-top: 1.1rem; background: url('../images/trait-pinceau-vermillon.webp') left center / contain no-repeat; }
/* Illustration Manus de Lifestyle & Koi : bloc image du contenu (remplaçable dans l'éditeur). */
.kh-home-living__img { margin: 2.5rem 0 0; }
.kh-home-living__img img { display: block; width: 100%; height: auto; }
.kh-editorial .kh-home .kh-eyebrow { color: var(--kh-editorial-muted); font-size: .875rem; }
.kh-editorial .kh-home .kh-button--primary { color: var(--kh-white); }
.kh-editorial .kh-home .kh-button { font-size: .875rem; letter-spacing: .04em; }
.kh-editorial .kh-home :focus-visible { outline: 2px solid var(--kh-vermillon); outline-offset: 5px; }
/* Hero Manus : fond_hero_washi_koinobori_house (Manus, 2026-09-25) en fond de toute la section, texte dans la zone libre à gauche.
   Éclairci à 60 % (Alain, 2026-10-11) : le haut de l'accueil se rapproche du papier des autres pages.
   L'image se fond dans le papier washi (multiply) et s'efface vers le bas : elle fait partie du fond, pas de cadre. */
.kh-home-hero { position: relative; display: grid; grid-template-columns: 1fr; min-height: min(56rem, 100svh); align-items: center; overflow: hidden; }
.kh-home-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('../images/hero-washi-paysage.webp') center / cover no-repeat; mix-blend-mode: multiply; opacity: .6; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
.kh-home-hero > * { position: relative; z-index: 1; }
/* Le paysage du hero remonte sous le header transparent (hauteur de .kh-header-spacer) : pas de raccord avec le washi
   (Alain, 2026-10-07). Sur mobile, le paysage est en bas du hero. Sans overflow: clip, le hero reste coupé en haut. */
@media (min-width: 768px) { .kh-home-hero { overflow: clip visible; } .kh-home-hero::before { top: -100px; } }
.kh-home-hero__inner { width: auto; margin: 0; padding: clamp(3rem, 6vw, 6rem) max(1.25rem, calc((100vw - 75rem) / 2)); padding-right: 2rem; }
/* Cadrage validé par Alain (25/09) : bloc de texte dans la moitié gauche, comme l'ancienne colonne. */
.kh-home-hero__inner { max-width: 50%; }
.kh-editorial .kh-home .kh-home-hero .kh-eyebrow { color: var(--kh-vermillon); }
.kh-home-hero__inner .kh-lead { max-width: 35ch; margin-bottom: 2rem; }
/* « koinobori » de la signature, lien vers « 03 · Le koinobori » (#kh-koinobori ; Alain, 2026-10-24, à la place d'une
   définition sous le titre) : même texte, même couleur, un soulignement fin qui passe au vermillon au survol. */
.kh-editorial .kh-home .kh-home-hero .kh-lead a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color 200ms ease; }
.kh-editorial .kh-home .kh-home-hero .kh-lead a:hover { text-decoration-color: var(--kh-vermillon); }
.kh-editorial .kh-home .kh-home-hero .kh-lead a:focus-visible { outline: 2px solid var(--kh-vermillon); outline-offset: 3px; text-decoration-color: var(--kh-vermillon); }
/* À l'arrivée sur l'étiquette « 03 » (porteuse de l'ancre), elle et le titre restent sous le bandeau fixe (100 px, 68 px une fois défilé). */
#kh-koinobori { scroll-margin-top: 7rem; }
.kh-home-hero__art { display: flex; min-height: 34rem; margin: 0; align-items: center; justify-content: center; }
.kh-home-hero__art img { width: 100%; height: 100%; max-height: 40rem; object-fit: contain; }
/* Un bloc image ajouté dans le hero depuis l'éditeur reste possible ; il s'affiche sous le texte. */
.kh-home-worlds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3rem; border-top: 1px solid var(--kh-sumi-20); }
.kh-home-world { padding: 2rem 1.5rem 2rem 0; border-bottom: 1px solid var(--kh-sumi-20); }
.kh-home-world:nth-child(3n + 2) { padding-top: 3.5rem; }
.kh-home-world h3 { margin: 1rem 0; }
.kh-home-world a { text-decoration: none; }
.kh-home-world a:hover { color: var(--kh-vermillon); }
.kh-home-world p { max-width: 25ch; }
/* Les cinq mondes en cartes illustrées (Manus, slide 5 ; fichiers 0N_<monde>_1024x1792).
   La carte est reconnue par sa classe kh-world--<monde>, posée dans le contenu : texte modifiable, image du thème.
   Toutes les règles sont préfixées par .kh-home-world : la charte v3 définit déjà .kh-world__kanji (absolu, vermillon). */
.kh-home-worlds:has(.kh-world--mer) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; border-top: 0; }
.kh-home-world[class*="kh-world--"] {
  --kh-world-ink: var(--kh-white);
  --kh-world-accent: var(--kh-white);
  --kh-world-shade: linear-gradient(180deg, rgb(10 8 6 / .72) 0%, rgb(10 8 6 / .35) 22%, transparent 40%, transparent 58%, rgb(10 8 6 / .45) 74%, rgb(10 8 6 / .82) 100%);
  position: relative; display: flex; flex-direction: column; aspect-ratio: 4 / 7; padding: 1.5rem 1.3rem; border: 0; overflow: hidden;
  background-color: var(--kh-sumi); background-position: center; background-size: cover; background-repeat: no-repeat;
  color: var(--kh-world-ink); box-shadow: 0 1px 2px rgb(26 20 16 / .12);
}
.kh-home-world[class*="kh-world--"]:nth-child(3n + 2) { padding-top: 1.5rem; }
.kh-home-world[class*="kh-world--"] .kh-eyebrow { display: none; }
.kh-editorial .kh-home .kh-home-world[class*="kh-world--"] h3 { margin: 0; color: var(--kh-world-ink); font-size: clamp(1.7rem, 2.3vw, 2.2rem); font-style: italic; line-height: 1.05; text-shadow: 0 1px 12px rgb(0 0 0 / .55); }
.kh-home-world[class*="kh-world--"] h3 a { color: inherit; }
.kh-home-world[class*="kh-world--"] h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.kh-home-world[class*="kh-world--"] h3 a::after { content: none; }
.kh-home-world[class*="kh-world--"] .kh-world__kanji { position: static; inset: auto; margin: .5rem 0 0; opacity: 1; color: var(--kh-world-accent); font-family: var(--kh-font-kanji); font-size: clamp(1.6rem, 2vw, 2rem); line-height: 1.1; letter-spacing: .12em; text-shadow: 0 1px 10px rgb(0 0 0 / .5); }
.kh-home-world[class*="kh-world--"] p:last-child { max-width: none; margin: auto 0 0; color: var(--kh-world-ink); font-family: var(--kh-font-body); font-size: 1rem; font-style: italic; line-height: 1.4; text-shadow: 0 1px 8px rgb(0 0 0 / .6); }
.kh-home-world[class*="kh-world--"] p:last-child::after { content: " \2192"; font-style: normal; }
/* Survol (Alain 25/09) : la carte visée s'agrandit, les quatre autres s'estompent. Même effet au clavier. */
.kh-home-world[class*="kh-world--"] { transition: transform 450ms cubic-bezier(.2,.7,.2,1), opacity 450ms ease, filter 450ms ease, box-shadow 450ms ease; }
.kh-home-worlds:has(.kh-home-world:hover, .kh-home-world:focus-within) .kh-home-world[class*="kh-world--"]:not(:hover):not(:focus-within) { opacity: .45; filter: saturate(.6); }
.kh-home-worlds .kh-home-world[class*="kh-world--"]:is(:hover, :focus-within) { z-index: 2; opacity: 1; filter: none; transform: scale(1.08); box-shadow: 0 18px 40px rgb(26 20 16 / .28); }
.kh-home-world[class*="kh-world--"]:focus-within { outline: 2px solid var(--kh-vermillon); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .kh-home-worlds .kh-home-world[class*="kh-world--"]:is(:hover, :focus-within) { transform: none; } }
@media (hover: none) { .kh-home-worlds:has(.kh-home-world:hover) .kh-home-world[class*="kh-world--"] { opacity: 1; filter: none; } .kh-home-worlds .kh-home-world[class*="kh-world--"]:hover { transform: none; } }
/* Hanami : seule carte claire, encre sombre sur voile de papier. */
.kh-home-world.kh-world--hanami {
  --kh-world-ink: var(--kh-sumi);
  --kh-world-accent: var(--kh-vermillon);
  --kh-world-shade: linear-gradient(180deg, rgb(248 244 238 / .88) 0%, rgb(248 244 238 / .45) 22%, transparent 40%, transparent 58%, rgb(248 244 238 / .55) 74%, rgb(248 244 238 / .9) 100%);
  background-image: var(--kh-world-shade), url('../images/monde-hanami.webp');
}
.kh-editorial .kh-home .kh-home-world.kh-world--hanami h3, .kh-home-world.kh-world--hanami .kh-world__kanji, .kh-home-world.kh-world--hanami p:last-child { text-shadow: 0 0 10px rgb(248 244 238 / .9); }
.kh-home-creations { padding-top: 0; }
.kh-home-creations > .kh-container > .kh-lead { max-width: 50ch; margin: 2rem 0 3rem; }
.kh-home .woocommerce ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; list-style: none; padding: 0; }
.kh-home .woocommerce ul.products::before,
.kh-home .woocommerce ul.products::after { display: none; }
.kh-home .woocommerce ul.products li.product { width: auto; float: none; margin: 0; padding: 0; box-shadow: none; border: 0; background: transparent; }
/* Sans fond blanc (Alain, 2026-09-25) : koi entier (taille non recadrée, inc/world-archive.php) ; photos détourées
   (fond transparent, tools/staging/pc8), donc koi opaque posé sur le papier, sans mode de fusion. */
.kh-home .woocommerce ul.products li.product a img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; background: transparent; } /* cadre commun 2:1 : titres et prix alignés, quelle que soit la photo */
.kh-home .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.7rem; line-height: 1.15; }
.kh-home .woocommerce ul.products li.product .price { color: var(--kh-sumi); font-family: var(--kh-font-ui); font-size: 1rem; }
.kh-home .woocommerce ul.products li.product .button { border-radius: 0; font-family: var(--kh-font-ui); }
.kh-home-kairo { margin-top: 5rem; max-width: 42rem; padding-left: 2rem; border-left: 1px solid var(--kh-or); }
.kh-home-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; }
/* Block content: core buttons and links take the charte look, arrows are decoration, not text. */
.kh-home .wp-block-button__link { display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; border: 1px solid var(--kh-vermillon); border-radius: 0; padding: .95rem 1.5rem; background: var(--kh-vermillon); color: var(--kh-white); font-family: var(--kh-font-ui); font-size: .875rem; font-weight: 400; line-height: 1; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.kh-home .wp-block-button__link:hover, .kh-home .wp-block-button__link:focus-visible { border-color: var(--kh-sumi); background: var(--kh-sumi); color: var(--kh-white); }
.kh-home .kh-link { margin: 2rem 0 0; }
.kh-home .kh-link a { display: inline-flex; align-items: center; gap: var(--kh-space-3); padding-bottom: var(--kh-space-2); border-bottom: 1px solid currentColor; font-family: var(--kh-font-body); font-size: 1rem; text-decoration: none; transition: gap 200ms var(--kh-ease-out); }
.kh-home .kh-link a::after { content: "\2192"; }
.kh-home .kh-link a:hover, .kh-home .kh-link a:focus-visible { gap: var(--kh-space-5); color: var(--kh-vermillon); }
.kh-home-world h3 a::after { content: " \2197"; }
.kh-home-house { border-top: 1px solid var(--kh-sumi-20); }
/* Fond blanc retiré le 2026-10-05 (Alain) : la section repose sur le papier washi comme les autres. */
.kh-home-living .kh-title { color: var(--kh-indigo); }
/* Plusieurs paragraphes d'introduction à la suite (sections 03 et 04, textes d'Alain du 2026-10-08) : un interligne. */
.kh-home-split__text .kh-lead + .kh-lead { margin-top: 1rem; }
/* Les 3 derniers articles : cartes d'articles (kh-articles.css), centrées sur la largeur de la rubrique Art de vivre. */
.kh-home-living .kh-home-journal { max-width: 1200px; margin: 3rem auto 0; }
.kh-home-manifesto { text-align: center; }
.kh-home-manifesto h2 { font-size: clamp(3rem, 6vw, 6rem); font-style: italic; line-height: 1.05; margin: 2rem 0; }
.kh-home-manifesto .kh-lead { max-width: 54ch; margin-inline: auto; }
.kh-home-professionals { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3rem; }
.kh-home-professional { border-top: 1px solid var(--kh-sumi-20); padding-top: 2rem; }
/* Opt-in product skin: no template override, stock/variation/checkout logic untouched. */
.kh-editorial.single-product .product_title { font: 400 clamp(2.5rem, 4vw, 4.5rem)/1.05 var(--kh-font-display); text-wrap: balance; }
.kh-editorial.single-product div.product .price { color: var(--kh-sumi); font-family: var(--kh-font-ui); font-size: 1.375rem; }
.kh-editorial.single-product div.product .woocommerce-product-gallery img { aspect-ratio: 4/3; object-fit: contain; background: var(--kh-white); }
.kh-editorial.single-product .woocommerce-product-details__short-description { max-width: 48ch; line-height: 1.75; }
.kh-editorial.single-product .variations select { min-height: 3rem; border: 1px solid var(--kh-sumi-70); border-radius: 0; font-size: 1rem; background: var(--kh-white); }
.kh-editorial.single-product .quantity input { min-height: 3rem; font-size: 1rem; }
.kh-editorial.single-product .single_add_to_cart_button { min-height: 3rem; border-radius: 0; background: var(--kh-vermillon); color: var(--kh-white); font-family: var(--kh-font-ui); }
.kh-editorial.single-product .single_add_to_cart_button:hover { background: var(--kh-sumi); }
.kh-editorial.single-product .woocommerce-tabs { padding-top: 4rem; }
.kh-editorial.single-product .woocommerce-tabs .panel { max-width: 65ch; }
@media (min-width: 1600px) { .kh-home-hero__inner { padding-right: 2rem; } }
@media (max-width: 1024px) {
  .kh-home-hero { min-height: min(40rem, 90svh); }
  .kh-home-hero__inner { max-width: none; }
  .kh-home-hero::before { background-position: 72% center; }
  .kh-home-hero__inner { padding: 3rem var(--kh-gutter); }
  .kh-home-hero__art { min-height: 0; aspect-ratio: 16/9; }
  .kh-home .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-home-worlds:has(.kh-world--mer) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kh-home-split { gap: 2rem; }
}
@media (max-width: 600px) {
  .kh-home-worlds, .kh-home-split, .kh-home-professionals { grid-template-columns: 1fr; }
  .kh-home-worlds:has(.kh-world--mer) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .kh-home-world[class*="kh-world--"] { padding: 1rem .9rem; }
  .kh-home-world:nth-child(3n + 2) { padding-top: 2rem; }
  .kh-home-world p { max-width: none; }
  .kh-home .woocommerce ul.products { gap: 1rem; }
  .kh-home .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.4rem; }
  .kh-home-kairo { padding-left: 1rem; }
  .kh-home-professionals { gap: 2rem; }
  .kh-home .wp-block-button, .kh-home .wp-block-button__link { width: 100%; white-space: normal; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .kh-editorial *, .kh-editorial *::before, .kh-editorial *::after { scroll-behavior: auto; animation: none; transition: none; }
}

/* ==== Recette de l'accueil, lot 1 (Alain, 2026-10-05) ==== */

/* Cartes produits « Carte koi » (Manus, 01_slides_finales) : cadre fin, koi posé sur un papier, monde en vermillon,
   nom en italique, prix. Toute la carte mène à la fiche ; pas de bouton par carte (charte §15 : un seul bouton par
   section, vermillon rare). L'agrandissement du koi au survol est conservé (kh-foundations.css, section 7bis). */
.kh-home .woocommerce ul.products li.product { display: flex; flex-direction: column; padding: .55rem .55rem 1.4rem; border: 1px solid rgb(26 20 16 / .32); background: rgb(255 253 252 / .45); }
.kh-home .woocommerce ul.products li.product a img { box-sizing: border-box; padding: 7% 5%; aspect-ratio: 16 / 10; background: var(--kh-world-bg, url('../images/fond-washi-nuages.webp')) center / cover no-repeat; }
.kh-home .woocommerce ul.products .woocommerce-loop-image-link:is(:hover, :focus-visible) img { background: none; }
.kh-home .woocommerce ul.products li.product .product-details { padding: 1.1rem .65rem 0; text-align: left; }
.kh-home .kh-card-world { display: block; margin: 0 0 .4rem; color: var(--kh-vermillon); font: 400 .72rem/1.3 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; }
.kh-editorial .kh-home .woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 0 0 .7rem; font-size: 1.5rem; font-style: italic; line-height: 1.15; }
/* 2026-10-06 (Alain) : un koi par monde ; plus de bouton vermillon, le prix se lit comme sur les chapitres Kaïro
   (court trait vermillon, prix dessous), texte centré. Le prix reste en bas de carte quand un nom tient sur deux lignes. */
.kh-home .woocommerce ul.products li.product .product-details { display: flex; flex: 1; flex-direction: column; text-align: center; }
.kh-editorial .kh-home .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); }
.kh-home .woocommerce ul.products li.product .price * { color: inherit; }
.kh-home .woocommerce ul.products li.product .woocommerce-loop-product__title { margin-bottom: .9rem; }
.kh-home .woocommerce ul.products li.product .woocommerce-loop-product__title a:is(:hover, :focus-visible) { color: var(--kh-vermillon); }
/* Un monde sans produit photographié est omis : les cartes restantes gardent leur largeur et se centrent. */
.kh-home .woocommerce ul.products { grid-template-columns: repeat(auto-fit, calc((100% - 4.5rem) / 4)); justify-content: center; }
@media (max-width: 1024px) { .kh-home .woocommerce ul.products { grid-template-columns: repeat(auto-fit, calc((100% - 1.5rem) / 2)); } }
@media (max-width: 600px) { .kh-home .woocommerce ul.products { grid-template-columns: repeat(auto-fit, calc((100% - 1rem) / 2)); } }
/* Kadence remontait le texte de 32 px au survol pour montrer son bouton (retiré) : texte immobile. */
.kh-home .woocommerce ul.products li.product .product-details { transform: none !important; }
/* Pas de bouton dans les cartes : Kadence ajoutait « Ajouter au panier » aux seuls produits à taille unique. */
.kh-home .woocommerce ul.products li.product :is(.product-action-wrap, .button, .add_to_cart_button) { display: none; }
.kh-home-creations .kh-home-shop-link { margin-top: 3rem; }

/* Kaïro (d'après l'affiche « Koi Kaïro ») : le jeune marin à gauche, les chapitres disponibles à droite. */
.kh-home-kairo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "art title" "art lead" "art list" "art films" "art link" "art ."; grid-template-rows: auto auto auto auto auto 1fr; gap: 0 clamp(2rem, 5vw, 5rem); max-width: none; margin-top: 7rem; padding: 0; border: 0; }
.kh-home-kairo > .kh-kairo-art { grid-area: art; margin: 0; }
.kh-home-kairo > .kh-kairo-art img { display: block; width: 100%; height: auto; }
.kh-home-kairo > h3 { grid-area: title; margin-top: 0; }
.kh-editorial .kh-home .kh-home-kairo > h3 { font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1.05; }
.kh-home-kairo > p:not(.kh-link) { grid-area: lead; max-width: 46ch; }
.kh-home-kairo > .kh-kairo-chapters { grid-area: list; }
.kh-home-kairo > .kh-link { grid-area: link; }
/* Bouton pause des chapitres animés (Alain, 2026-10-19 ; koi-film.js), sous la liste, à droite. */
.kh-home-kairo > .kh-films-toggle-wrap { grid-area: films; }
.kh-kairo-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.kh-kairo-chapters li { margin: 0; }
.kh-kairo-chapters a { display: block; color: var(--kh-sumi); text-align: center; text-decoration: none; }
/* Survol : le koi s'agrandit et ondule au vent, les autres s'estompent (même effet que les cartes de « Créations BCDG »,
   kh-foundations.css section 7bis ; demande d'Alain, 2026-10-05), sur la mer de Kaïro au clair de lune voilée d'indigo,
   comme ses cartes de La Boutique (Alain, 2026-10-08 ; c'était la bannière Kaïro, puis le papier washi). La mer n'est
   chargée que sur les écrans à souris, les seuls à avoir ce survol (revue #49). */
.kh-kairo-chapters li:nth-child(odd) { --kh-koi-origin: left center; }
.kh-kairo-chapters li:nth-child(even) { --kh-koi-origin: right center; }
.kh-kairo-chapters__art { position: relative; display: block; margin-bottom: .9rem; }
.kh-kairo-chapters__art::before { content: ""; position: absolute; inset: -12% -4%; z-index: -1; pointer-events: none; opacity: 0; scale: 1; transform-origin: var(--kh-koi-origin, center); box-shadow: 0 24px 50px rgb(26 20 16 / .28); transition: opacity 450ms ease, scale 500ms cubic-bezier(.2,.7,.2,1); }
.kh-kairo-chapters__img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; scale: 1; transform-origin: var(--kh-koi-origin, center); transition: scale 500ms cubic-bezier(.2,.7,.2,1), opacity 450ms ease, filter 450ms ease; }
.kh-kairo-chapters :is(.kh-kairo-chapters__no, .kh-kairo-chapters__name, .kh-kairo-chapters__price) { transition: opacity 350ms ease; }
@media (hover: hover) and (pointer: fine) {
  .kh-kairo-chapters:has(a:is(:hover, :focus-visible)) li:not(:has(a:is(:hover, :focus-visible))) :is(img, .kh-kairo-chapters__no, .kh-kairo-chapters__name, .kh-kairo-chapters__price) { opacity: .3; filter: saturate(.5); }
  .kh-kairo-chapters li:has(a:is(:hover, :focus-visible)) { position: relative; z-index: 5; }
  .kh-kairo-chapters a:is(:hover, :focus-visible) :is(.kh-kairo-chapters__no, .kh-kairo-chapters__name, .kh-kairo-chapters__price) { opacity: 0; }
  .kh-kairo-chapters__art::before { background: linear-gradient(rgb(15 27 61 / .2), rgb(15 27 61 / .2)), url('../images/kairo-mer-960.webp') center 40% / cover no-repeat; }
  .kh-kairo-chapters a:is(:hover, :focus-visible) .kh-kairo-chapters__art::before { opacity: 1; scale: 1.8; }
  .kh-kairo-chapters a:is(:hover, :focus-visible) .kh-kairo-chapters__img { scale: 1.8; animation: kh-koi-wind 4.5s ease-in-out infinite; filter: url(#kh-wind); }
}
.kh-kairo-chapters__no { color: var(--kh-vermillon); font: 600 1.15rem/1.2 var(--kh-font-display); }
.kh-kairo-chapters__name { font: 400 1.25rem/1.25 var(--kh-font-display); }
.kh-kairo-chapters__price { display: block; width: max-content; margin: .55rem auto 0; padding-top: .5rem; border-top: 2px solid var(--kh-vermillon); font: 400 .9rem/1.2 var(--kh-font-ui); }
.kh-kairo-chapters a:is(:hover, :focus-visible) .kh-kairo-chapters__name { color: var(--kh-vermillon); }
@media (prefers-reduced-motion: reduce) { .kh-kairo-chapters a:is(:hover, :focus-visible) .kh-kairo-chapters__img { animation: none; filter: none; } }
/* Koi animés (Alain, 2026-10-06 ; koi-film.js) : dans le monde Kaïro, un chapitre qui a son film le joue au survol
   (souris seulement), sur la mer agrandie, à la place de la simulation du vent ; sur mobile, ces chapitres restent fixes.
   Sur l’accueil (Alain, 2026-10-19), les chapitres ondulent en permanence, ordinateur et mobile, comme les cartes de la
   sélection, avec leur bouton pause. */
.kh-kairo-chapters li.kh-has-film a .kh-kairo-chapters__img { animation: none; filter: none; }
.kh-kairo-chapters .kh-koi-film-video { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; scale: 1; transform-origin: var(--kh-koi-origin, center); transition: opacity 300ms ease, scale 500ms cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (pointer: fine) { .kh-kairo-chapters a:is(:hover, :focus-visible) .kh-koi-film-video { scale: 1.8; } }
.kh-kairo-chapters li.is-film-playing .kh-koi-film-video { opacity: 1; }
.kh-kairo-chapters li.is-film-playing a .kh-kairo-chapters__img { opacity: 0; }
/* « 02 · La sélection » animée en permanence (Alain, 2026-10-06) : un seul bouton pause pour la section (WCAG 2.2.2),
   discret, à droite sous les cartes ; même dessin que celui du hero. */
.kh-films-toggle-wrap { display: flex; justify-content: flex-end; margin-top: .75rem; }
.kh-films-toggle { position: relative; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid rgb(26 20 16 / .4); border-radius: 0; background: none; color: var(--kh-sumi); cursor: pointer; opacity: .75; transition: opacity 200ms ease; }
.kh-films-toggle:is(:hover, :focus-visible) { opacity: 1; }
/* Kadence peint les boutons survolés de la couleur des boutons (or) : jamais d'or sur un bouton (charte), les deux
   boutons pause restent au trait. */
.kh-films-toggle:is(:hover, :focus, :active), .kh-hero-video-toggle:is(:hover, :focus, :active) { background: none; color: var(--kh-sumi); }
.kh-films-toggle::before { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 10px; border-inline: 2.5px solid currentColor; box-sizing: border-box; }
.kh-films-toggle[data-state="paused"]::before { width: 0; height: 0; border-inline: 0; border-block: 6px solid transparent; border-left: 9px solid currentColor; margin-left: calc(50% - 3px); }

/* Mouvements image + texte (modèle Manus « L'Atelier_Mise en page ») : le texte sur le papier d'une moitié, l'image
   pleine hauteur sur l'autre ; côtés alternés en damier depuis l'ordre du 2026-10-08 (Alain) : 03 Le koinobori image à
   droite, 04 L'Atelier à gauche, 05 Art de vivre à droite, 06 Professionnels à gauche.
   Les images sont des blocs du contenu (remplaçables dans l'éditeur). */
.kh-home-house, .kh-home-living, .kh-home-manifesto { container-type: inline-size; padding-block: 0; border-top: 0; text-align: left; }
/* Même espace entre le titre souligné et le texte dans les sections 03 à 06 (Alain, 2026-10-09 : « il y a de la
   place », puis « le même espace pour 03, 04, 05 et 06 ») : 36 px sur grand écran, 20 px sur téléphone. */
.kh-home { --kh-title-gap: clamp(1.25rem, 3cqw, 2.25rem); }
:is(.kh-home-house, .kh-home-living, .kh-home-manifesto) > .kh-container { width: 100%; max-width: none; }
.kh-home-house .kh-home-split, .kh-home-living .kh-home-split, .kh-home-manifesto > .kh-container {
  --kh-split-edge: max(var(--kh-gutter), calc((100cqw - var(--kh-container)) / 2));
  --kh-split-inner: clamp(2rem, 5cqw, 5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; min-height: clamp(34rem, 48cqw, 46rem);
}
.kh-split-media, .kh-home-living .kh-home-living__img { position: relative; align-self: stretch; margin: 0; min-height: 22rem; }
.kh-split-media img, .kh-home-living .kh-home-living__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* L'Atelier : image à gauche, texte à droite. */
.kh-home-house .kh-home-split { grid-template-areas: "media ." "media title" "media text" "media ."; grid-template-rows: 1fr auto auto 1fr; }
.kh-home-house .kh-home-split__title { grid-area: title; padding-top: clamp(4rem, 7cqw, 6rem); }
.kh-home-house .kh-home-split__text { grid-area: text; margin-top: var(--kh-title-gap); padding-bottom: clamp(4rem, 7cqw, 6rem); }
.kh-home-house :is(.kh-home-split__title, .kh-home-split__text) { padding-left: var(--kh-split-inner); padding-right: var(--kh-split-edge); }
.kh-home-house .kh-split-media { grid-area: media; }
/* Photo d'Alain et Catherine (2026-10-08) : cadrage sur le couple (l'image est en paysage, le cadre presque carré).
   Sans légende : Alain a retiré la mention « créée avec l'IA » (2026-10-08, PC33), informé du règlement européen sur
   l'IA (art. 50). */
.kh-home .kh-split-media.kh-atelier-photo img { object-position: 30% 50%; }
/* Art de vivre : texte à gauche, image à droite (le groupe du titre s'efface pour que l'image prenne sa colonne). */
.kh-home-living .kh-home-split { grid-template-areas: ". media" "eyebrow media" "title media" "text media" ". media"; grid-template-rows: 1fr auto auto auto 1fr; }
.kh-home-living .kh-home-split__title { display: contents; }
.kh-home-living .kh-home-split__title > .kh-eyebrow { grid-area: eyebrow; padding-top: clamp(4rem, 7cqw, 6rem); }
.kh-home-living .kh-home-split__title > .kh-title { grid-area: title; }
.kh-home-living .kh-home-living__img { grid-area: media; }
.kh-home-living .kh-home-split__text { grid-area: text; margin-top: var(--kh-title-gap); padding-bottom: clamp(4rem, 7cqw, 6rem); }
.kh-home-living :is(.kh-home-split__title > .kh-eyebrow, .kh-home-split__title > .kh-title, .kh-home-split__text) { padding-left: var(--kh-split-edge); padding-right: var(--kh-split-inner); }
/* « 03 · Le koinobori » (ancien Manifeste, classe kh-home-manifesto gardée ; Alain, 2026-10-08, PC52) : une définition,
   placée avant L'Atelier ; texte à gauche (quatre repères, lien vers l'article « Que symbolise la carpe japonaise ? »),
   image à droite. Le chapô de PC52 a été fondu dans « Le vent » (PC53) ; sa ligne de grille reste pour un chapô ajouté
   dans l'éditeur. */
.kh-home-manifesto > .kh-container { grid-template-areas: ". media" "eyebrow media" "title media" "lead media" "text media" "link media" ". media"; grid-template-rows: 1fr auto auto auto auto auto 1fr; }
.kh-home-manifesto > .kh-container > .kh-eyebrow { grid-area: eyebrow; padding-top: clamp(4rem, 7cqw, 6rem); }
.kh-home-manifesto > .kh-container > h2 { grid-area: title; }
.kh-home-manifesto > .kh-container > .kh-lead { grid-area: lead; max-width: none; margin-inline: 0; padding-bottom: 1.75rem; }
.kh-home-manifesto > .kh-container > :is(.kh-eyebrow, h2, .kh-lead) { padding-left: var(--kh-split-edge); padding-right: var(--kh-split-inner); }
.kh-home-manifesto > .kh-container > .kh-link { grid-area: link; margin: 0; padding: 0 var(--kh-split-inner) 2rem var(--kh-split-edge); }
.kh-home-manifesto > .kh-container > .kh-split-media { grid-area: media; }
.kh-editorial .kh-home .kh-home-manifesto h2 { font-size: var(--kh-type-title-size); margin: 0 0 var(--kh-title-gap); } /* taille et écart au surtitre des autres titres de section (Alain, 2026-10-08) */

/* Professionnels (modèle Manus « Entreprises & Collectivités ») : à gauche, un grand kanji effacé (場, « le lieu »),
   le repère vertical et le titre ; à droite, les deux parcours numérotés en chiffres japonais (一, 二). */
.kh-movement:has(> .kh-container > .kh-home-professionals) { container-type: inline-size; padding-block: 0; }
.kh-movement:has(> .kh-container > .kh-home-professionals) > .kh-container {
  --kh-split-edge: max(var(--kh-gutter), calc((100cqw - var(--kh-container)) / 2));
  position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: 1fr auto auto 1fr; width: 100%; max-width: none; min-height: clamp(30rem, 40cqw, 38rem);
}
.kh-movement:has(> .kh-container > .kh-home-professionals) > .kh-container::before { content: ""; grid-column: 1; grid-row: 1 / -1; background: rgb(26 20 16 / .035); }
.kh-movement:has(> .kh-container > .kh-home-professionals) > .kh-container > :is(.kh-kanji-bg, .kh-eyebrow, .kh-title) { grid-column: 1; position: relative; z-index: 1; padding-left: calc(var(--kh-split-edge) + 2.5rem); padding-right: 2rem; }
.kh-home .kh-kanji-bg { grid-row: 2; align-self: end; margin: 0; color: rgb(26 20 16 / .08); font-family: var(--kh-font-kanji); font-size: clamp(7rem, 13cqw, 12rem); line-height: 1; }
.kh-movement:has(> .kh-container > .kh-home-professionals) > .kh-container > .kh-eyebrow { position: absolute; top: clamp(3rem, 5cqw, 4.5rem); left: calc(var(--kh-split-edge) - .5rem); padding: 0; writing-mode: vertical-rl; rotate: 180deg; color: var(--kh-vermillon); letter-spacing: .2em; text-transform: uppercase; }
.kh-movement:has(> .kh-container > .kh-home-professionals) > .kh-container > .kh-title { grid-row: 3; margin: 0 0 clamp(3rem, 5cqw, 4rem); font-style: italic; }
.kh-home .kh-home-professionals { grid-column: 2; grid-row: 1 / -1; align-self: center; display: block; margin: 0; padding: clamp(4rem, 7cqw, 6rem) var(--kh-split-edge) clamp(4rem, 7cqw, 6rem) clamp(3rem, 6cqw, 6rem); counter-reset: kh-pro; }
.kh-home .kh-home-professional { position: relative; padding: 0 0 2.75rem 3.75rem; border-top: 0; counter-increment: kh-pro; }
.kh-home .kh-home-professional::before { content: counter(kh-pro, cjk-ideographic); position: absolute; top: .1rem; left: 0; color: var(--kh-vermillon); font-family: var(--kh-font-kanji); font-size: 1.7rem; line-height: 1; }
.kh-editorial .kh-home .kh-home-professional h3 { margin: 0 0 .75rem; color: var(--kh-vermillon); font: 500 .95rem/1.3 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; }
.kh-home .kh-home-professional .kh-link { margin-top: 1.25rem; }
/* « Vu dans Ouest-France et Le Télégramme » (PC79, Alain 2026-10-12) : sous les deux cartes, pas dans celle des
   Collectivités (la presse vaut pour les Entreprises aussi), après un trait fin ; en gris, vers « Dans la presse » de
   Collectivités. */
.kh-home .kh-home-professionals > .kh-home-press { margin: .75rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--kh-sumi-20); color: var(--kh-sumi-70); font: italic 400 .95rem/1.5 var(--kh-font-body); }
.kh-home .kh-home-press a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.kh-home .kh-home-press a:is(:hover, :focus-visible) { color: var(--kh-vermillon); } /* au clavier aussi, comme « Imaginons votre projet » (Alain, 2026-10-13) */

/* Mobile (≤ 767 px) : hero texte au-dessus et koi dessous, en entier ; sections image + texte en une colonne,
   image d'abord ; Kaïro et Professionnels empilés. */
@media (max-width: 767px) {
  .kh-home-hero { display: block; min-height: 0; padding-bottom: 92vw; }
  .kh-home-hero::before { top: auto; height: 100vw; background-size: auto 100%; background-position: 90% 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 86%, transparent 100%); }
  .kh-home-hero__inner { max-width: none; padding: 2.5rem var(--kh-gutter) 0; }
  .kh-home-house .kh-home-split, .kh-home-living .kh-home-split, .kh-home-manifesto > .kh-container { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .kh-home-house .kh-home-split { grid-template-areas: "media" "title" "text"; }
  .kh-home-living .kh-home-split { grid-template-areas: "media" "eyebrow" "title" "text"; }
  .kh-home-manifesto > .kh-container { grid-template-areas: "media" "eyebrow" "title" "lead" "text" "link"; }
  /* Même cadrage que sur ordinateur (Alain, 2026-10-06) : la colonne image y fait environ 9:8 (L'Atelier, Art de
     vivre) et un carré (Manifeste, plus haut) ; le 4:3 d'avant n'en montrait qu'une bande. */
  /* Le rapport est porté par l'image elle-même (plus en position absolue dans un cadre à aspect-ratio) : dans cette
     grille, Safari sur iPhone écrasait le cadre à zéro et les images de 03, 04, 05 et 06 disparaissaient (Alain,
     2026-10-07). */
  .kh-split-media, .kh-home-living .kh-home-living__img { min-height: 0; }
  .kh-split-media img, .kh-home-living .kh-home-living__img img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 9 / 8; object-fit: cover; }
  .kh-home-manifesto .kh-split-media img { aspect-ratio: 1 / 1; }
  .kh-home-house :is(.kh-home-split__title, .kh-home-split__text),
  .kh-home-living :is(.kh-home-split__title > .kh-eyebrow, .kh-home-split__title > .kh-title, .kh-home-split__text),
  .kh-home-manifesto > .kh-container > :is(.kh-eyebrow, h2, .kh-lead) { padding-left: var(--kh-gutter); padding-right: var(--kh-gutter); }
  .kh-home-house .kh-home-split__title, .kh-home-living .kh-home-split__title > .kh-eyebrow, .kh-home-manifesto > .kh-container > .kh-eyebrow { padding-top: 2.5rem; }
  .kh-home-house .kh-home-split__text, .kh-home-living .kh-home-split__text { padding-bottom: 3rem; }
  .kh-home-manifesto > .kh-container > .kh-lead { padding-bottom: 1.25rem; }
  .kh-home-manifesto > .kh-container > .kh-link { padding: 0 var(--kh-gutter) 3rem; }
  .kh-home-kairo { grid-template-columns: 1fr; grid-template-areas: "title" "lead" "art" "list" "films" "link"; grid-template-rows: none; margin-top: 4rem; }
  .kh-home-kairo > .kh-kairo-art { max-width: 22rem; margin: 1.5rem auto 0; }
  .kh-kairo-chapters { gap: 1.5rem 1rem; }
  .kh-kairo-chapters__name { font-size: 1.05rem; }
  .kh-movement:has(> .kh-container > .kh-home-professionals) > .kh-container { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .kh-movement:has(> .kh-container > .kh-home-professionals) > .kh-container::before { grid-row: 1 / 3; }
  .kh-movement:has(> .kh-container > .kh-home-professionals) > .kh-container > :is(.kh-kanji-bg, .kh-eyebrow, .kh-title) { padding-left: calc(var(--kh-gutter) + 2rem); }
  .kh-home .kh-kanji-bg { grid-row: 1; padding-top: 2rem; font-size: 6.5rem; }
  .kh-movement:has(> .kh-container > .kh-home-professionals) > .kh-container > .kh-eyebrow { top: 2rem; left: calc(var(--kh-gutter) - .25rem); }
  .kh-movement:has(> .kh-container > .kh-home-professionals) > .kh-container > .kh-title { grid-row: 2; margin-bottom: 2rem; }
  .kh-home .kh-home-professionals { grid-column: 1; grid-row: 3; padding: 2.5rem var(--kh-gutter) 3rem; }
  .kh-home .woocommerce ul.products li.product { padding: .4rem .4rem 1rem; }
  /* Cinq mondes (Alain, 2026-10-05) : pas de dernière rangée à un seul monde ; Territoires remonte, Kaïro descend
     en carré sur toute la largeur. Depuis le 2026-10-06, Kaïro est aussi le dernier monde dans le contenu (PC20). */
  /* Cadrage de « Koinobori Kaïro III » (2026-10-08) : la lune entière en haut du carré. */
  .kh-home-worlds:has(.kh-world--mer) .kh-home-world.kh-world--kairo { grid-column: 1 / -1; aspect-ratio: 1 / 1; background-position: center 22%; }
  .kh-editorial .kh-home .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.15rem; }
}

/* ==== Recette de l'accueil, lot 2 (Alain, 2026-10-06) ==== */

/* Bandeau de réassurance sous le hero (d'après madamemo.com) : trois engagements, icônes au trait (Lucide, comme le
   header, licenses/lucide.txt). Les textes sont dans le contenu de la page : modifiables dans l'éditeur. L'icône suit
   la classe de l'élément (kh-reassure--shipping, --payment, --returns). */
.kh-home .kh-reassurance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(calc(100% - (2 * var(--kh-gutter))), var(--kh-container)); margin: 0 auto; padding: 1.6rem 0; border-block: 1px solid var(--kh-sumi-20); }
.kh-home .kh-reassure { display: grid; grid-template-columns: 2rem auto; grid-template-areas: "icon title" "icon text"; column-gap: 1rem; align-items: center; justify-content: center; margin: 0; padding: .2rem 1.25rem; }
.kh-home .kh-reassure + .kh-reassure { border-left: 1px solid var(--kh-sumi-20); }
.kh-home .kh-reassure[class*="kh-reassure--"]::before { content: ""; grid-area: icon; width: 2rem; height: 2rem; background: currentColor; -webkit-mask: var(--kh-icon) center / contain no-repeat; mask: var(--kh-icon) center / contain no-repeat; }
.kh-home .kh-reassure > p { margin: 0; grid-area: text; color: var(--kh-sumi-70); font: 400 .95rem/1.45 var(--kh-font-body); }
.kh-home .kh-reassure > p.kh-reassure__title { grid-area: title; color: var(--kh-sumi); font: 400 .8rem/1.4 var(--kh-font-ui); letter-spacing: .1em; text-transform: uppercase; }
.kh-home .kh-reassure a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kh-home .kh-reassure a:is(:hover, :focus-visible) { color: var(--kh-vermillon); }
.kh-home .kh-reassure--shipping { --kh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); }
.kh-home .kh-reassure--payment { --kh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.kh-home .kh-reassure--returns { --kh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); }
/* Le bandeau se voit dès l'arrivée sur ordinateur (le hero laisse sa place) et remplace le vide avant les cinq mondes. */
@media (min-width: 1025px) { .kh-home:has(.kh-reassurance) .kh-home-hero { min-height: min(52rem, calc(100svh - 100px - 7.5rem)); } }
.kh-home .kh-reassurance + .kh-movement { padding-top: clamp(3.5rem, 6vw, 5.5rem); }
/* Bandeau de confiance entre le hero et la réassurance (Alain, 2026-10-26 : « les gens ne lisent plus », la presse et
   les avis étaient trop bas ; avant la réassurance pour rester à l'écran d'arrivée sur téléphone, où la réassurance
   s'empile) : note Google, presse, communes, chacun mène à sa preuve. Trois paragraphes du contenu de la page (PC101),
   modifiables dans l'éditeur ; sur téléphone, les communes restent sur la page Collectivités. Sans filet : celui du
   haut de la réassurance le sépare d'elle. */
.kh-home .kh-home-trust { display: flex; flex-wrap: wrap; justify-content: center; width: min(calc(100% - (2 * var(--kh-gutter))), var(--kh-container)); margin: 0 auto; padding: .9rem 0; }
.kh-home .kh-home-trust > p { margin: 0; color: var(--kh-sumi-70); font: 400 .75rem/1.6 var(--kh-font-ui); letter-spacing: .1em; text-transform: uppercase; }
.kh-home .kh-home-trust > p + p::before { content: "·"; margin: 0 .9em; }
.kh-home .kh-home-trust a { color: inherit; text-decoration: none; }
.kh-home .kh-home-trust a:is(:hover, :focus-visible) { color: var(--kh-vermillon); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Le hero remonte pour que le bandeau se voie entier dès l'arrivée sur ordinateur (Alain, 2026-10-26 : « à moitié
   caché par le bas de l'écran ») : moins de hauteur, de marges et de réassurance. */
@media (min-width: 1025px) {
  .kh-home:has(.kh-home-trust) .kh-home-hero { min-height: min(50rem, calc(100svh - 100px - 12rem)); }
  .kh-home:has(.kh-home-trust) .kh-home-hero__inner { padding-top: clamp(2rem, 4vw, 4rem); padding-bottom: clamp(2rem, 4vw, 4rem); }
  .kh-home:has(.kh-home-trust) .kh-reassurance { padding: 1.1rem 0; }
}

/* Hero vidéo (Alain, 2026-10-06) : le décor d'origine (brume, montagnes, temple) sans son koi peint
   (hero-washi-paysage.webp, koi gommé) et, à sa place, un vrai produit qui ondule au vent : bloc Vidéo du contenu (PC22),
   remplaçable dans l'éditeur. Son image fixe a un fond transparent (PC42) : le koi est opaque dès le premier affichage,
   sans fondu dans le papier. Seul le MP4 de secours (fond blanc, classe kh-koi-mp4) est fondu dans le papier (multiply).
   Image fixe remplacée dans l'éditeur : prendre la première image du film du produit, à fond transparent (méthode de
   PC42), sinon fond blanc visible ou double koi pendant le fondu. Légende = lien vers la fiche, à gauche sous la tête du koi (sur la brume claire) ; bouton pause à droite, même ligne.
   Bouton pause (WCAG 2.2.2) ajouté par hero-video.js ; animations réduites : la vidéo ne démarre pas. */
.kh-home-hero > .kh-home-hero__koi { position: absolute; top: 50%; right: 3%; width: min(50vw, 52rem); margin: 0; transform: translateY(-55%); }
.kh-home-hero > .kh-home-hero__koi.kh-koi-mp4 { mix-blend-mode: multiply; }
.kh-home-hero__koi video { display: block; width: 100%; height: auto; }
.kh-home-hero__koi figcaption { margin: .4rem 0 0 6%; text-align: left; font: 400 .75rem/1.4 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; }
.kh-home-hero__koi figcaption a { color: var(--kh-sumi-70); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.kh-home-hero__koi figcaption a::after { content: " \2192"; }
.kh-home-hero__koi figcaption a:is(:hover, :focus-visible) { color: var(--kh-vermillon); }
/* Koi animé du hero (Alain, 2026-10-06 ; koi-film.js) : le film du produit recomposé dans un canvas, koi opaque, sans
   fondu dans le papier ; il apparaît en fondu quand il démarre. La vidéo source reste dans la page, invisible. */
/* Jusqu'à la première image du film, l'image fixe du bloc (fond transparent) tient sa place : le hero n'est jamais vide,
   même si le téléphone tarde ou refuse de lire le film (iPhone, Alain 2026-10-07 ; hero-video.js). Ni rectangle blanc ni
   koi translucide au retour sur l'accueil (Alain, 2026-10-08). */
/* L'image fixe est la première image du film (PC42) : le film apparaît en fondu par-dessus, l'image fixe restant
   entière dessous, puis elle s'efface d'un coup ; le koi n'est jamais translucide. */
.kh-home-hero__koi .kh-koi-film-still { position: absolute; top: 0; left: 0; z-index: 0; display: block; width: 100%; height: auto; margin: 0; pointer-events: none; }
.kh-home-hero__koi.is-playing .kh-koi-film-still { opacity: 0; transition: opacity 0s linear 400ms; }
.kh-home-hero__koi .kh-koi-film-canvas { position: relative; z-index: 1; display: block; width: 100%; height: auto; opacity: 0; transition: opacity 400ms ease; }
.kh-home-hero__koi.kh-koi-alpha.is-playing .kh-koi-film-canvas { opacity: 1; }
.kh-hero-video-toggle { position: absolute; right: 10%; bottom: 0; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid rgb(26 20 16 / .4); border-radius: 50%; background: none; color: var(--kh-sumi); cursor: pointer; opacity: .75; transition: opacity 200ms ease; }
.kh-hero-video-toggle:is(:hover, :focus-visible) { opacity: 1; }
/* Bouton pause à côté de la légende (Alain, 2026-10-06) : tout à droite, il se confondait avec les montagnes ; sur la
   brume claire, trait plus marqué. */
.kh-home-hero__koi figcaption { display: flex; align-items: center; gap: .9rem; }
.kh-home-hero__koi figcaption .kh-hero-video-toggle { position: relative; right: auto; bottom: auto; flex: none; width: 1.7rem; height: 1.7rem; border-color: rgb(26 20 16 / .6); opacity: .9; }
.kh-hero-video-toggle::before { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 10px; border-inline: 2.5px solid currentColor; box-sizing: border-box; }
.kh-hero-video-toggle[data-state="paused"]::before { width: 0; height: 0; border-inline: 0; border-block: 6px solid transparent; border-left: 9px solid currentColor; margin-left: calc(50% - 3px); }
@media (max-width: 1024px) {
  .kh-home-hero > .kh-home-hero__koi { position: relative; top: auto; right: auto; width: min(92%, 44rem); margin: 0 auto 2.5rem; transform: none; }
}
@media (max-width: 767px) {
  .kh-home-hero { padding-bottom: 6vw; }
  .kh-home-hero > .kh-home-hero__koi { width: 94%; margin-top: 1.5rem; }
}
/* Mobile : le bouton après le koi (Alain, 2026-10-07) : le koi entier dès l'arrivée, puis l'invitation, juste au-dessus
   du bandeau de réassurance. Ordre visuel seulement : le contenu (page 318 / 319) reste tel qu'il s'édite. Le bloc du
   texte s'efface (display: contents) pour que ses enfants se rangent avec le koi ; les marges, qui ne fusionnent plus
   en colonne flex, sont reprises une à une (mêmes positions qu'avant pour le surtitre, le titre et le chapô). */
@media (max-width: 767px) {
  .kh-home-hero { display: flex; flex-direction: column; align-items: stretch; }
  .kh-home-hero__inner { display: contents; }
  .kh-home .kh-home-hero .kh-home-hero__inner > * { position: relative; z-index: 1; margin-inline: var(--kh-gutter); }
  .kh-home .kh-home-hero .kh-home-hero__inner > * + * { margin-top: 0; }
  .kh-home .kh-home-hero .kh-home-hero__inner > :first-child { margin-top: 2.5rem; }
  .kh-home .kh-home-hero .kh-home-hero__inner > .wp-block-buttons { order: 1; margin-bottom: 1.5rem; }
  /* Bouton à la taille de son texte, centré sous le koi (Alain, 2026-10-08 : « cadre rouge beaucoup trop grand ») ; les
     autres boutons de l'accueil restent pleine largeur sur mobile. */
  .kh-home .kh-home-hero .wp-block-buttons { justify-content: center; }
  .kh-home .kh-home-hero :is(.wp-block-button, .wp-block-button__link) { width: auto; }
  .kh-home-hero > .kh-home-hero__koi { margin: 0 auto 1.5rem; }
}

/* Professionnels avec une image (Alain, 2026-10-06 : le kanji sur fond clair était fade) : image à gauche, texte à
   droite, comme Art de vivre. Sans image dans le contenu, la mise en page au kanji ci-dessus reste en place. */
.kh-movement:has(> .kh-container > .kh-pro-media) > .kh-container { --kh-split-inner: clamp(2rem, 5cqw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media ." "media eyebrow" "media title" "media list" "media ."; grid-template-rows: 1fr auto auto auto 1fr; min-height: clamp(34rem, 48cqw, 46rem); }
.kh-movement:has(> .kh-container > .kh-pro-media) > .kh-container::before { content: none; }
.kh-movement > .kh-container > .kh-pro-media { grid-area: media; position: relative; min-height: 22rem; margin: 0; }
.kh-movement > .kh-container > .kh-pro-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kh-movement:has(> .kh-container > .kh-pro-media) > .kh-container > .kh-eyebrow { grid-area: eyebrow; position: static; padding: clamp(4rem, 7cqw, 6rem) var(--kh-split-edge) 0 var(--kh-split-inner); writing-mode: horizontal-tb; rotate: none; color: var(--kh-editorial-muted); letter-spacing: .14em; text-transform: uppercase; }
.kh-movement:has(> .kh-container > .kh-pro-media) > .kh-container > .kh-title { grid-area: title; margin: 0; padding: 0 var(--kh-split-edge) 0 var(--kh-split-inner); }
.kh-home .kh-movement:has(> .kh-container > .kh-pro-media) .kh-home-professionals { grid-area: list; align-self: start; padding: var(--kh-title-gap) var(--kh-split-edge) clamp(4rem, 7cqw, 6rem) var(--kh-split-inner); }
/* Sur ordinateur, les sections 03 à 06 ont la même hauteur, 46rem (736 px), et leurs images, bord à bord, la même
   taille (Alain, 2026-10-08 : images identiques, pas plus grandes que celle de L'Atelier, aucun écart entre elles, le
   surtitre jamais au-dessus de l'image). Pour que le texte du 03 et du 06 tienne dans cette hauteur : colonne de
   texte élargie (60 / 40) et marges resserrées ; vérifié de 1280 à 1920 px, FR et EN (à 1024 px, le 03 dépasse de
   37 px). Pas en dessous de 1024 px : sur une tablette en portrait, les images devenaient des bandes de 300 px de large
   (revue de la PR #67) ; de 768 à 1023 px, colonnes égales et hauteur minimale d'avant. Mobile : règles ≤ 767 px. */
@media (min-width: 1024px) {
  .kh-home-manifesto > .kh-container, .kh-home-living .kh-home-split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .kh-home-house .kh-home-split, .kh-movement:has(> .kh-container > .kh-pro-media) > .kh-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .kh-home-manifesto > .kh-container, .kh-home-house .kh-home-split, .kh-home-living .kh-home-split,
  .kh-movement:has(> .kh-container > .kh-pro-media) > .kh-container { min-height: 46rem; }
  .kh-home-manifesto > .kh-container > .kh-eyebrow, .kh-movement:has(> .kh-container > .kh-pro-media) > .kh-container > .kh-eyebrow { padding-top: 2rem; }
  .kh-home .kh-movement:has(> .kh-container > .kh-pro-media) .kh-home-professionals { padding-bottom: 2.5rem; }
  .kh-home .kh-home-professional { padding-bottom: 1.75rem; }
}

/* Cinq mondes en clair (Alain, 2026-10-06) : ses nouvelles images sur papier washi (Mer, Motifs, Territoires, Kaïro ;
   Hanami conservée). Toutes les cartes prennent le traitement de Hanami : voile de papier en haut et en bas, texte à
   l'encre ; le kanji reprend la couleur du koi. Fichiers -v2 : nouveaux noms, pas de cache à l'ancienne image.
   Ordre : Mer, Motifs, Hanami, Territoires, Kaïro, comme sur mobile (contenu réordonné par PC20). */
.kh-home-world[class*="kh-world--"] {
  --kh-world-ink: var(--kh-sumi);
  --kh-world-shade: linear-gradient(180deg, rgb(248 244 238 / .88) 0%, rgb(248 244 238 / .45) 22%, transparent 40%, transparent 58%, rgb(248 244 238 / .55) 74%, rgb(248 244 238 / .9) 100%);
}
.kh-editorial .kh-home .kh-home-world[class*="kh-world--"] h3, .kh-home-world[class*="kh-world--"] .kh-world__kanji, .kh-home-world[class*="kh-world--"] p:last-child { text-shadow: 0 0 10px rgb(248 244 238 / .9); }
.kh-home-world.kh-world--mer { --kh-world-accent: var(--kh-indigo); background-image: var(--kh-world-shade), url('../images/monde-mer-v2.webp'); }
.kh-home-world.kh-world--motifs { --kh-world-accent: var(--kh-vermillon); background-image: var(--kh-world-shade), url('../images/monde-motifs-v2.webp'); }
.kh-home-world.kh-world--territoires { --kh-world-accent: var(--kh-sumi); background-image: var(--kh-world-shade), url('../images/monde-territoires-v2.webp'); }
/* Kaïro dans sa nuit (Alain, 2026-10-08) : « Koinobori Kaïro III » (koi au mât sous la pleine lune, mer calme sous le
   texte), comme l'univers Kaïro (fiches et page du monde) : texte clair, 海路 en or, voile indigo en haut et en bas au
   lieu du papier ; la carte annonce l'univers et se détache des quatre autres. */
.kh-home-world.kh-world--kairo {
  --kh-world-ink: #F4EFE6;
  --kh-world-accent: #D9B45A;
  --kh-world-shade: linear-gradient(180deg, rgb(10 18 42 / .7) 0%, rgb(10 18 42 / .3) 22%, transparent 40%, transparent 58%, rgb(10 18 42 / .45) 74%, rgb(10 18 42 / .85) 100%);
  background-color: #0f1b3d;
  background-image: var(--kh-world-shade), url('../images/monde-kairo-v3.webp');
}
.kh-editorial .kh-home .kh-home-world.kh-world--kairo h3, .kh-home-world.kh-world--kairo .kh-world__kanji, .kh-home-world.kh-world--kairo p:last-child { text-shadow: 0 1px 10px rgb(4 10 30 / .8); }

/* Manifeste en quatre principes (Alain, 2026-10-06 ; modèle Manus « Le Manifeste ») : chiffres japonais 一 二 三 四
   comme les parcours de Professionnels. Textes dans le contenu de la page (PC21), à valider avec Catherine. */
.kh-home-manifesto > .kh-container > .kh-home-principles { grid-area: text; margin: 0; padding: 0 var(--kh-split-inner) 2.5rem var(--kh-split-edge); counter-reset: kh-principle; }
.kh-home .kh-home-principle { position: relative; margin: 0; padding: 0 0 .75rem 3.25rem; counter-increment: kh-principle; }
.kh-home .kh-home-principle::before { content: counter(kh-principle, cjk-ideographic); position: absolute; top: .1rem; left: 0; color: var(--kh-vermillon); font: 400 1.6rem/1 var(--kh-font-kanji); }
/* Intertitre sur la même ligne que son texte (« LA CARPE  Une ancienne légende… », Alain, 2026-10-08). */
.kh-editorial .kh-home .kh-home-principle h3 { display: inline; margin: 0 .6em 0 0; color: var(--kh-sumi); font: 500 .95rem/1.3 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; }
.kh-home .kh-home-principle p { display: inline; margin: 0; font: 400 var(--kh-type-body-size)/1.6 var(--kh-font-body); }
/* Une seule échelle de texte de 03 à 06 (Alain, 2026-10-08), celle de Professionnels : les chapôs (kh-lead, 22 px) de
   la définition, de L'Atelier et d'Art de vivre passent à la taille du texte courant (17 px). */
.kh-home :is(.kh-home-manifesto, .kh-home-house, .kh-home-living) .kh-lead { font-size: var(--kh-type-body-size); line-height: 1.75; }
/* Suivis du lien vers l'article (03 · Le koinobori), les repères laissent l'espace du bas au lien. */
.kh-home-manifesto > .kh-container > .kh-home-principles:has(~ .kh-link) { padding-bottom: 1rem; }

@media (max-width: 767px) {
  .kh-home .kh-reassurance { grid-template-columns: 1fr; width: calc(100% - (2 * var(--kh-gutter))); padding: .5rem 0; }
  .kh-home .kh-reassure { justify-content: start; padding: .9rem 0; }
  .kh-home .kh-reassure + .kh-reassure { border-left: 0; border-top: 1px solid var(--kh-sumi-20); }
  .kh-home .kh-home-trust { flex-direction: column; align-items: center; width: calc(100% - (2 * var(--kh-gutter))); }
  .kh-home .kh-home-trust > p + p::before { content: none; }
  .kh-home .kh-home-trust > p:nth-child(3) { display: none; }
  .kh-home-manifesto > .kh-container > .kh-home-principles { padding: 0 var(--kh-gutter) 3rem; }
  .kh-home-manifesto > .kh-container > .kh-home-principles:has(~ .kh-link) { padding-bottom: .5rem; }
  .kh-movement:has(> .kh-container > .kh-pro-media) > .kh-container { grid-template-columns: 1fr; grid-template-areas: "media" "eyebrow" "title" "list"; grid-template-rows: none; min-height: 0; }
  .kh-movement > .kh-container > .kh-pro-media { min-height: 0; } /* cadrage de l'ordinateur, porté par l'image (Safari) */
  .kh-movement > .kh-container > .kh-pro-media img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 9 / 8; object-fit: cover; }
  .kh-movement:has(> .kh-container > .kh-pro-media) > .kh-container > :is(.kh-eyebrow, .kh-title) { padding-left: var(--kh-gutter); padding-right: var(--kh-gutter); }
  .kh-movement:has(> .kh-container > .kh-pro-media) > .kh-container > .kh-eyebrow { padding-top: 2.5rem; }
  .kh-home .kh-movement:has(> .kh-container > .kh-pro-media) .kh-home-professionals { padding: var(--kh-title-gap) var(--kh-gutter) 3rem; }
  /* Trait gris très fin entre les sections (Alain, 2026-10-06) : sur mobile l'image ouvre chaque section, juste après
     le texte de la précédente ; le trait et l'espace qui le suit disent à quelle section elle appartient. */
  .kh-home .kh-movement + .kh-movement { padding-top: 0; }
  .kh-home .kh-movement + .kh-movement::before { content: ""; display: block; height: 1px; margin: 0 var(--kh-gutter) 2.5rem; background: var(--kh-sumi-20); }
}