/* Pages des cinq mondes (archives product_cat ; inc/world-archive.php). Depuis le 2026-10-08 (Alain), chaque monde a son
   ambiance de jour, plus légère que la nuit de Kaïro (plus bas) : le fond de son monde en pleine page, sous un léger
   voile de papier ; en tête, le nom, le nom japonais (couleur du monde) et l'accroche, à côté de l'image de sa carte de
   l'accueil (4:5) ; puis les koi en cartes de La Boutique (kh-shop.css), trois par rangée, deux sur mobile, chacun sur
   le fond de son monde (kh-foundations.css). Textes : nom, nom japonais et description de la catégorie, dans l'admin. */
.kh-world-hero { position: relative; }
.kh-world-hero__lead { max-width: 60ch; color: var(--kh-sumi-70); font-family: var(--kh-font-body); font-size: clamp(1.05rem, 1.3vw, 1.2rem); font-style: italic; line-height: 1.7; }
.kh-world-hero__lead > :last-child { margin-bottom: 0; }
.kh-world-hero:not(.kh-world-hero--kairo) { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); align-items: center; gap: clamp(2rem, 5vw, 5rem); max-width: 72rem; }
.kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__art { order: 2; width: 100%; margin: 0; }
.kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 18px 40px rgb(26 20 16 / .18); }
.kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__text { position: relative; order: 1; margin: 0; padding: 2.5rem 3rem 2.5rem 0; text-align: left; }
/* Halo de papier derrière le texte : il reste lisible sur le fond du monde (crête de la vague, branche…). */
.kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__text::before { content: ""; position: absolute; inset: -2rem -3rem -2rem -4rem; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgb(247 243 236 / .92) 0%, rgb(247 243 236 / .75) 55%, rgb(247 243 236 / 0) 100%); }
.kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__text::after { content: ""; display: block; width: min(12rem, 60%); height: 1rem; margin-top: 1.5rem; background: url('../images/trait-pinceau-vermillon.webp') left center / contain no-repeat; }
/* Taille du nom : variables par monde, lues par une seule règle (revue #49 : la taille de Territoires ne doit pas
   dépendre de l'ordre des règles). */
.kh-world-hero--territoires { --kh-world-title-size: clamp(2.2rem, 4.2vw, 4rem); --kh-world-title-size-m: clamp(1.6rem, 8.4vw, 2.2rem); --kh-world-title-spacing: .08em; } /* le nom le plus long */
.kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__title { margin: 0; color: var(--kh-sumi); font: 400 var(--kh-world-title-size, clamp(3.5rem, 7vw, 6rem))/1 var(--kh-font-display); letter-spacing: var(--kh-world-title-spacing, .12em); text-transform: uppercase; }
.kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__kanji { margin: .8rem 0 0; color: var(--kh-world-accent, var(--kh-sumi)); font: 400 clamp(1.4rem, 2.4vw, 2rem)/1 var(--kh-font-jp); letter-spacing: .3em; }
.kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__lead { margin: clamp(1.25rem, 2.5vw, 2rem) 0 0; }
/* Couleur du nom japonais (celle de la carte du monde sur l'accueil) et fond de chaque monde, sous un voile de papier. */
body.kh-world-archive--mer { --kh-world-accent: var(--kh-indigo); }
body.kh-world-archive--motifs, body.kh-world-archive--hanami { --kh-world-accent: var(--kh-vermillon); }
body.kh-world-archive--territoires { --kh-world-accent: var(--kh-sumi); }
body.kh-world-archive--mer::before { background: linear-gradient(rgb(247 243 236 / .42), rgb(247 243 236 / .42)), url('../images/fond-mer-1672.webp') center / cover no-repeat #F1E4D0; }
body.kh-world-archive--motifs::before { background: linear-gradient(rgb(247 243 236 / .42), rgb(247 243 236 / .42)), url('../images/fond-motifs-1672.webp') center / cover no-repeat #F1E4D0; }
body.kh-world-archive--hanami::before { background: linear-gradient(rgb(247 243 236 / .42), rgb(247 243 236 / .42)), url('../images/fond-hanami-1672.webp') center / cover no-repeat #F1E4D0; }
body.kh-world-archive--territoires::before { background: linear-gradient(rgb(247 243 236 / .42), rgb(247 243 236 / .42)), url('../images/fond-territoires-1672.webp') center / cover no-repeat #F1E4D0; }
/* Articles remontés (Alain, 2026-09-25) : marges Kadence réduites entre l'accroche, la barre « résultats / tri » et les
   cartes. */
.kh-world-archive #primary { margin-top: clamp(1rem, 2vw, 1.5rem); }
.kh-world-archive .kadence-shop-top-row { padding-bottom: 1rem; }
/* Cartes de La Boutique, trois par rangée ; sur le fond du monde, le bas des cartes est plus opaque (noms lisibles). */
.kh-world-archive ul.products { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.kh-world-archive ul.products::before, .kh-world-archive ul.products::after { display: none; }
body.kh-world-archive:not(.kh-world-archive--kairo) ul.products li.product { background: rgb(250 247 241 / .9); }
/* Tablettes : l'image plus étroite laisse au nom la place d'une ligne (revue #48). */
@media (min-width: 768px) and (max-width: 1023px) {
  .kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__inner { grid-template-columns: minmax(0, 1fr) 38%; }
  .kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__text { padding-right: 1.5rem; }
}
@media (max-width: 767px) {
  /* Le nom sur toute la largeur (un seul mot : à côté de l'image, il passait dessus, revue #48) ; dessous, le nom
     japonais, l'accroche et le trait à côté de l'image. Le bloc texte s'efface (contents) pour placer ses éléments. */
  .kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__inner { position: relative; grid-template-columns: minmax(0, 1fr) 46%; grid-template-rows: auto auto auto 1fr; column-gap: 1.25rem; row-gap: 0; align-items: start; }
  .kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__text { display: contents; }
  .kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__title { grid-area: 1 / 1 / 2 / 3; margin-bottom: 1.1rem; font-size: var(--kh-world-title-size-m, clamp(2rem, 11vw, 2.6rem)); }
  .kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__art { grid-area: 2 / 2 / 5 / 3; }
  .kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__kanji { grid-area: 2 / 1; margin-top: .4rem; }
  .kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__lead { grid-area: 3 / 1; }
  .kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__text::after { grid-area: 4 / 1; }
  .kh-world-hero:not(.kh-world-hero--kairo) .kh-world-hero__text::before { grid-area: 1 / 1 / 5 / 3; inset: -1.5rem -1rem; }
  /* Fond plus léger sur mobile, cadré sur l'élément du monde (vague à gauche, soleil à droite, branche en haut…). */
  body.kh-world-archive--mer::before { background: linear-gradient(rgb(247 243 236 / .42), rgb(247 243 236 / .42)), url('../images/fond-mer-800.webp') 0% 100% / cover no-repeat #F1E4D0; }
  body.kh-world-archive--motifs::before { background: linear-gradient(rgb(247 243 236 / .42), rgb(247 243 236 / .42)), url('../images/fond-motifs-800.webp') 85% 0% / cover no-repeat #F1E4D0; }
  body.kh-world-archive--hanami::before { background: linear-gradient(rgb(247 243 236 / .42), rgb(247 243 236 / .42)), url('../images/fond-hanami-800.webp') 0% 0% / cover no-repeat #F1E4D0; }
  body.kh-world-archive--territoires::before { background: linear-gradient(rgb(247 243 236 / .42), rgb(247 243 236 / .42)), url('../images/fond-territoires-800.webp') 85% 100% / cover no-repeat #F1E4D0; }
  .kh-world-archive ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .kh-world-archive ul.products li.product { padding: .4rem .4rem 1rem; }
  .kh-world-archive ul.products li.product .woocommerce-loop-product__title { font-size: 1.15rem; }
}

/* ---- Monde Kaïro : la nuit de Kaïro (Alain, 2026-10-07 : « l'univers Kaïro commence dès la page du monde ») ----
   Fond, textes clairs et header : kh-foundations.css (body.kh-night), comme les fiches Kaïro. Ici : pas de voile de
   teinte ; en tête, le nom et 海路 sur le paysage (la bannière, peinte sur papier clair, avec un lettrage japonais
   généré et 回路 au lieu de 海路, n'est pas affichée) ; les koi volent sans papier, avec le halo des fiches ; titres,
   prix, compte et tri au trait clair. */
body.kh-world-archive--kairo :is(.kh-world-hero, .site-main) { --kh-sumi: #F4EFE6; --kh-sumi-70: rgb(244 239 230 / .72); --kh-sumi-20: rgb(244 239 230 / .22); color: var(--kh-sumi); }
body.kh-world-archive--kairo .kh-world-hero { padding: clamp(3.5rem, 9vw, 7.5rem) 0 clamp(1rem, 2vw, 1.5rem); }
body.kh-world-archive--kairo .kh-world-hero__art { display: none; }
body.kh-world-archive--kairo .kh-world-hero__text { width: min(100%, 100svh); margin: 0 auto; text-align: center; }
body.kh-world-archive--kairo .kh-world-hero__title { margin: 0; color: #F4EFE6; font: 400 clamp(3.5rem, 8vw, 6.5rem)/1 var(--kh-font-display); letter-spacing: .12em; text-transform: uppercase; }
body.kh-world-archive--kairo .kh-world-hero__kanji { margin: .9rem 0 0; color: #D9B45A; font: 400 clamp(1.3rem, 2.2vw, 1.8rem)/1 var(--kh-font-jp); letter-spacing: .35em; }
body.kh-world-archive--kairo .kh-world-hero__lead { margin: clamp(1.25rem, 2.5vw, 2rem) auto 0; }
/* Sans la page des 15 chapitres, la grille revient (docs/development/fiche-produit.md) : koi sans cadre ni papier, comme
   dans « Du même monde » des fiches Kaïro (revue #48 : les cartes de La Boutique étaient claires sur la nuit). */
body.kh-world-archive--kairo ul.products li.product { border-color: transparent; background: transparent; }
body.kh-world-archive--kairo ul.products li.product a img { background: none; }
body.kh-world-archive--kairo ul.products .woocommerce-loop-image-link { filter: drop-shadow(0 0 1.6rem rgb(248 244 238 / .45)) drop-shadow(0 0 .35rem rgb(248 244 238 / .5)); }
@media (hover: hover) and (pointer: fine) {
  body.kh-world-archive--kairo ul.products .woocommerce-loop-image-link:is(:hover, :focus-visible) { filter: none; } /* la mer du survol prend le relais */
}
body.kh-world-archive--kairo ul.products li.product :is(.woocommerce-loop-product__title, .woocommerce-loop-product__title a, .price, .price *) { color: #F4EFE6; }
body.kh-world-archive--kairo ul.products li.product .woocommerce-loop-product__title a:is(:hover, :focus-visible) { color: #D9B45A; }
body.kh-world-archive--kairo :is(.woocommerce-result-count, .woocommerce-ordering select, .kadence-product-toggle-container button) { color: rgb(244 239 230 / .85); }
body.kh-world-archive--kairo .woocommerce-ordering select { border-color: rgb(244 239 230 / .35); background-color: transparent; }
body.kh-world-archive--kairo .woocommerce-ordering select option { color: #1A1410; }

/* ---- Monde Kaïro : les 15 chapitres à la place de la grille (Alain, 2026-10-07 : « c'est là qu'il faut afficher tous
   les Kaïro à venir » ; inc/kairo.php, classe kh-saga-world). Dans l'ordre, trois par rangée (deux sur mobile) : en
   vente, le koi qui flotte sans cadre ni papier, entouré de la lueur des fiches (Alain, 2026-10-07), numéro, titre, prix
   sous le trait vermillon, film au survol (koi-film.js) ; à venir, un koi au trait, sans cadre lui aussi, numéro,
   titre, « À venir », jamais de date. Compte et tri masqués (la boucle WooCommerce est vide). */
body.kh-saga-world :is(.kadence-shop-top-row, .site-main ul.products) { display: none; }
.kh-saga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.75rem); max-width: 64rem; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; padding: 0; list-style: none; text-align: center; }
.kh-saga li { position: relative; margin: 0; }
.kh-saga a { display: block; color: var(--kh-sumi); text-decoration: none; }
.kh-saga .kh-kairo-chapters__art { position: relative; display: block; margin-bottom: 1rem; }
.kh-saga :is(.kh-kairo-chapters__img, .kh-koi-film-video) { filter: drop-shadow(0 0 1.6rem rgb(248 244 238 / .45)) drop-shadow(0 0 .35rem rgb(248 244 238 / .5)); }
.kh-saga .kh-kairo-chapters__img { display: block; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: 16 / 10; padding: 8% 5%; object-fit: contain; background: none; transition: opacity 300ms ease; }
.kh-saga .kh-koi-film-video { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 8% 5%; object-fit: contain; opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
.kh-saga li.is-film-playing .kh-koi-film-video { opacity: 1; }
.kh-saga li.is-film-playing .kh-kairo-chapters__img { opacity: 0; }
/* Koi au trait des chapitres à venir : le dessin sombre passe au clair sur la nuit (invert). */
.kh-saga__outline { display: block; aspect-ratio: 16 / 10; margin-bottom: 1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%231A1410' stroke-opacity='.32' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M22 50C30 26 70 16 120 24C140 27 152 34 160 40L188 20C182 38 182 62 188 80L160 60C152 66 140 73 120 76C70 84 30 74 22 50Z'/%3E%3Cellipse cx='22' cy='50' rx='5' ry='13'/%3E%3Ccircle cx='44' cy='44' r='6'/%3E%3Cpath d='M62 30C70 42 70 58 62 70'/%3E%3Cpath d='M82 23C92 10 110 9 122 24'/%3E%3Cpath d='M88 78C95 89 107 89 113 77'/%3E%3C/svg%3E") center / 78% auto no-repeat; filter: invert(1); opacity: .8; }
.kh-saga__no { display: block; color: #D9B45A; font: 600 1.1rem/1.2 var(--kh-font-display); }
.kh-saga__name { display: block; margin-top: .2rem; font: italic 400 clamp(1.25rem, 1.7vw, 1.5rem)/1.2 var(--kh-font-display); transition: color 200ms ease; }
.kh-saga a:is(:hover, :focus-visible) .kh-saga__name { color: #D9B45A; }
.kh-saga .is-soon .kh-saga__no { color: rgb(244 239 230 / .6); }
.kh-saga .is-soon .kh-saga__name { color: var(--kh-sumi-70); }
.kh-saga__price { display: block; width: max-content; margin: .6rem auto 0; padding-top: .45rem; border-top: 2px solid var(--kh-vermillon); font: 400 .9rem/1.2 var(--kh-font-ui); }
.kh-saga__price * { color: inherit; }
.kh-saga__soon { display: block; margin-top: .5rem; color: var(--kh-sumi-70); font: 400 .7rem/1.2 var(--kh-font-ui); letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 767px) {
  .kh-saga { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1rem; }
  .kh-saga__name { font-size: 1.05rem; }
  .kh-saga__price { font-size: .8rem; }
}