/* Fiche produit (recette, Alain 2026-10-07 ; inc/product.php, kh-product.js ; charte v2.0 §10.2). Deux colonnes sur
   ordinateur : le koi en grand sur le papier washi, qui ondule tout seul (son film), et l'achat ; dessous, sans
   onglets, les quatre mouvements de la charte, fermés, ouverts un à la fois (chiffres japonais vermillon, comme le
   Manifeste de l'accueil) ; enfin « Du même monde », trois cartes koi de La Boutique (kh-shop.css). Mobile : koi, nom,
   prix, taille, ajout au panier, puis les mouvements. Le vermillon reste rare : trait du prix, bouton d'achat,
   chiffres des mouvements. */

body.kh-fiche div.product { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
body.kh-fiche div.product > * { grid-column: 1 / -1; min-width: 0; }

/* ---- Le koi ---- */
body.kh-fiche div.product > div.woocommerce-product-gallery { grid-column: 1; position: relative; width: auto; float: none; margin: 0; }
.kh-fiche .woocommerce-product-gallery__trigger { display: none; } /* un clic sur la photo l'agrandit déjà */
/* La marge du papier est portée par le lien de l'image, pas par la diapositive (Alain, 2026-10-21, premières photos) :
   avec plusieurs images, le diaporama de WooCommerce rend la bande des diapositives dix fois plus large que la galerie,
   et une marge en % de la diapositive se calculait sur cette bande (marges énormes, défilement décalé). */
.kh-fiche .woocommerce-product-gallery__image { position: relative; box-sizing: border-box; padding: 0; border: 1px solid rgb(26 20 16 / .18); background: none; }
/* Le koi détouré (photo « -detoure », et son film par-dessus) sur le fond de son monde (Alain, 2026-10-08 ; papier
   washi hors des cinq mondes) ; les photos réelles et la vidéo réelle, à venir, s'affichent sans fond, quelle que soit
   leur place dans la galerie (revue #48 : le fond suivait la première place). Kaïro : sa nuit, plus bas. */
body.kh-fiche div.product:is(.product_cat-mer, .product_cat-sea) { --kh-fiche-bg: url('../images/fond-mer-1672.webp'); }
body.kh-fiche div.product:is(.product_cat-motifs, .product_cat-patterns) { --kh-fiche-bg: url('../images/fond-motifs-1672.webp'); }
body.kh-fiche div.product:is(.product_cat-hanami, .product_cat-hanami-en) { --kh-fiche-bg: url('../images/fond-hanami-1672.webp'); }
body.kh-fiche div.product:is(.product_cat-territoires, .product_cat-lands) { --kh-fiche-bg: url('../images/fond-territoires-1672.webp'); }
body.kh-fiche:not(.kh-fiche-kairo) .woocommerce-product-gallery__image:has(img[src*="-detoure"]) { background: var(--kh-fiche-bg, url('../images/fond-washi-nuages.webp')) center / cover no-repeat; }
.kh-fiche .woocommerce-product-gallery__image > a { display: block; padding: 5% 3%; }
.kh-fiche .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; transition: opacity 300ms ease; }
/* Les photos réelles, souvent en hauteur, tiennent dans l'écran : jamais plus de 78 % de sa hauteur, entières. */
.kh-fiche .woocommerce-product-gallery__image img:not([src*="-detoure"]) { max-height: 78vh; object-fit: contain; }
/* Le film (koi opaque, fond transparent) se pose exactement sur la photo, qui s'efface pendant qu'il joue. */
.kh-fiche .kh-fiche-film-canvas { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 5% 3%; object-fit: contain; opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
.kh-fiche .is-film-playing .kh-fiche-film-canvas { opacity: 1; }
.kh-fiche .is-film-playing > a img { opacity: 0; }
.kh-fiche .woocommerce-product-gallery video.kh-koi-film-src { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
/* Bouton pause (WCAG 2.2.2), au trait, dans l'angle du papier, comme celui de « 02 · La sélection ». */
.kh-fiche-film-toggle { position: absolute; right: .9rem; bottom: .9rem; z-index: 2; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid rgb(26 20 16 / .45); border-radius: 0; background: none; color: var(--kh-sumi); cursor: pointer; opacity: .75; transition: opacity 200ms ease; }
.kh-fiche-film-toggle:is(:hover, :focus, :focus-visible, :active) { background: none; color: var(--kh-sumi); opacity: 1; }
.kh-fiche-film-toggle::before { content: ""; position: absolute; inset: 0; box-sizing: border-box; width: 8px; height: 10px; margin: auto; border-inline: 2.5px solid currentColor; }
.kh-fiche-film-toggle[data-state="paused"]::before { width: 0; height: 0; margin-left: calc(50% - 3px); border-inline: 0; border-block: 6px solid transparent; border-left: 9px solid currentColor; }
/* Plusieurs photos (plus tard) : vignettes au trait sous le papier. */
/* Sélecteur plus précis que celui de Kadence (woocommerce.min.css : margin-top -32px, les vignettes remontaient sur le
   bas de l'image ; vu avec les premières photos, 2026-10-21). */
body.kh-fiche div.product div.images .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.kh-fiche .flex-control-thumbs li { width: 4.5rem !important; margin: 0 !important; }
.kh-fiche .flex-control-thumbs img { border: 1px solid rgb(26 20 16 / .18); opacity: .6; cursor: pointer; }
body.kh-fiche:not(.kh-fiche-kairo) .flex-control-thumbs img[src*="-detoure"] { background: var(--kh-fiche-bg, url('../images/fond-washi-nuages.webp')) center / cover; }
.kh-fiche .flex-control-thumbs img.flex-active, .kh-fiche .flex-control-thumbs img:hover { opacity: 1; }
/* La vidéo réelle du koi, dernière image de la galerie (PC95 ; Alain, 2026-10-21) : même marge que les photos (sur un
   cadre intérieur, jamais sur la diapositive), à la taille de son image d'aperçu, au plus 78 % de la hauteur de l'écran,
   sans fond noir (charte v2.0 §15). Bouton de lecture : un triangle au trait blanc, transparent, sans cadre (Alain : « le
   carré blanc n'est pas esthétique ») ; une ombre douce le garde lisible sur un ciel clair ; sa vignette, la dernière,
   porte le même triangle, en petit. */
.kh-fiche .kh-gallery-video__frame { position: relative; padding: 5% 3%; }
.kh-fiche .kh-gallery-video video { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; background: none; }
.kh-fiche .kh-gallery-video__play { position: absolute; inset: 0; width: 4.6rem; height: 5.2rem; margin: auto; padding: 0; border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 60'%3E%3Cpath d='M6 5 48 30 6 55Z' fill='rgba(255,253,252,.22)' stroke='%23FFFDFC' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 1px 5px rgb(26 20 16 / .55)); cursor: pointer; transition: transform 200ms ease; }
.kh-fiche .kh-gallery-video__play:is(:hover, :focus-visible) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 60'%3E%3Cpath d='M6 5 48 30 6 55Z' fill='rgba(255,253,252,.45)' stroke='%23FFFDFC' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transform: scale(1.06); }
.kh-fiche .kh-gallery-video__play:focus-visible { outline: 2px solid var(--kh-vermillon); outline-offset: 3px; }
.kh-fiche .woocommerce-product-gallery:has(.kh-gallery-video) .flex-control-thumbs li:last-child { position: relative; }
.kh-fiche .woocommerce-product-gallery:has(.kh-gallery-video) .flex-control-thumbs li:last-child::after { content: ""; position: absolute; inset: 0; width: 1.4rem; height: 1.6rem; margin: auto; translate: 1px 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 60'%3E%3Cpath d='M6 5 48 30 6 55Z' fill='rgba(255,253,252,.3)' stroke='%23FFFDFC' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 2px rgb(26 20 16 / .8)); pointer-events: none; }

/* ---- L'achat ---- */
body.kh-fiche div.product > div.summary { grid-column: 2; align-self: center; width: auto; float: none; margin: 0; padding: 0; }
.kh-fiche .kh-fiche__world { margin: 0 0 1.1rem; font: 400 .75rem/1.3 var(--kh-font-ui); letter-spacing: .14em; text-transform: uppercase; }
.kh-fiche .kh-fiche__world a { color: var(--kh-sumi-70); text-decoration: none; transition: color 200ms ease; }
.kh-fiche .kh-fiche__world a:is(:hover, :focus-visible) { color: var(--kh-vermillon); }
.kh-fiche .kh-fiche__world [lang="ja"] { margin-left: .35em; font-family: var(--kh-font-jp); letter-spacing: 0; }
.kh-fiche .summary .product_title { margin: 0; color: var(--kh-sumi); font: italic 400 clamp(2.6rem, 4.4vw, 4.25rem)/1.02 var(--kh-font-display); text-wrap: balance; }
.kh-fiche .summary > .price { width: max-content; margin: 1.75rem 0 0; padding-top: .6rem; border-top: 2px solid var(--kh-vermillon); color: var(--kh-sumi); font: 400 1.3rem/1.2 var(--kh-font-ui); }
.kh-fiche .summary > .price * { color: inherit; }
.kh-fiche .woocommerce-product-details__short-description { max-width: 44ch; margin-top: 1.5rem; color: var(--kh-sumi); font: 400 1.05rem/1.7 var(--kh-font-body); }
.kh-fiche .woocommerce-product-details__short-description > :last-child { margin-bottom: 0; }

/* Tailles en boutons (inc/product.php) ; la liste de WooCommerce reste dans la page, cachée, et fait le travail. */
.kh-fiche form.cart { margin: 2rem 0 0; }
.kh-fiche table.variations, .kh-fiche table.variations :is(tbody, tr, th, td) { display: block; width: auto; margin: 0; padding: 0; border: 0; background: none; text-align: left; }
.kh-fiche table.variations th.label, .kh-fiche table.variations th.label label, .kh-fiche .kh-fiche-size__label { margin: 0 0 .65rem; color: var(--kh-sumi-70); font: 400 .75rem/1.3 var(--kh-font-ui); letter-spacing: .14em; text-transform: uppercase; }
.kh-fiche .kh-sizes-select, .kh-fiche .reset_variations { display: none !important; }
/* Produit simple à une taille (Kaïro, Stars & Stripes) : même pastille, au-dessus de la quantité. */
.kh-fiche .kh-fiche-size { margin-top: 2rem; }
.kh-fiche .kh-fiche-size + form.cart { margin-top: 1.6rem; }
.kh-fiche .kh-sizes { display: flex; flex-wrap: wrap; gap: .6rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.kh-fiche .kh-size { position: relative; display: block; margin: 0; cursor: pointer; }
.kh-fiche .kh-size input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kh-fiche .kh-size span, .kh-fiche .kh-size-single { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 5.75rem; min-height: 3rem; padding: 0 1.1rem; border: 1px solid rgb(26 20 16 / .3); background: rgb(255 253 252 / .55); color: var(--kh-sumi); font: 400 .95rem/1 var(--kh-font-ui); transition: border-color 200ms ease, box-shadow 200ms ease; }
.kh-fiche .kh-size:hover span { border-color: var(--kh-sumi-70); }
.kh-fiche .kh-size input:checked + span, .kh-fiche .kh-size-single { border-color: var(--kh-sumi); box-shadow: inset 0 0 0 1px var(--kh-sumi); }
.kh-fiche .kh-size input:focus-visible + span { outline: 2px solid var(--kh-vermillon); outline-offset: 2px; }
.kh-fiche .kh-size input:disabled + span { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

/* Le prix de la taille choisie remplace la fourchette, en haut (kh-product.js) : pas de second prix ici. */
.kh-fiche .single_variation_wrap { margin-top: 1.6rem; }
.kh-fiche .woocommerce-variation-price { display: none; }
.kh-fiche .woocommerce-variation-availability p.stock { margin: 0 0 .9rem; color: var(--kh-sumi-70); font: 400 .85rem/1.4 var(--kh-font-ui); }
.kh-fiche .woocommerce-variation-availability p.stock.out-of-stock { color: var(--kh-sumi); }
.kh-fiche :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; }
.kh-fiche form.cart .quantity { margin: 0; }
.kh-fiche form.cart .quantity input.qty { box-sizing: border-box; width: 4.25rem; height: 100%; min-height: 3.25rem; border: 1px solid rgb(26 20 16 / .3); border-radius: 0; background: rgb(255 253 252 / .55); color: var(--kh-sumi); font: 400 1rem var(--kh-font-ui); text-align: center; }
.kh-fiche form.cart .single_add_to_cart_button { flex: 1 1 14rem; max-width: 22rem; min-height: 3.25rem; margin: 0; border: 0; border-radius: 0; background: var(--kh-vermillon); color: var(--kh-white); font: 400 .82rem/1.2 var(--kh-font-ui); letter-spacing: .14em; text-transform: uppercase; opacity: 1; transition: background-color 200ms ease; }
.kh-fiche form.cart .single_add_to_cart_button:is(:hover, :focus-visible) { background: var(--kh-sumi); color: var(--kh-white); }
.kh-fiche form.cart .single_add_to_cart_button:is(.disabled, :disabled) { background: var(--kh-vermillon); opacity: .45; cursor: not-allowed; }

/* Livraison offerte (free-shipping.css) et réassurance : ton calme, sous un trait fin. */
.kh-fiche .summary .kh-free-shipping { margin: 2rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--kh-sumi-20); }
/* No progress line under the truck on the product page (Alain, 2026-10-14: « je préfère finalement supprimer le trait
   sous le camion »); the cart drawer and the cart page keep theirs. The truck stays centred on the sentence. */
.kh-fiche .summary .kh-free-shipping::before { grid-row: 1; }
.kh-fiche .summary .kh-free-shipping .kh-fs__bar { display: none; }
.kh-fiche .kh-fiche__assure { margin-top: .9rem; color: var(--kh-sumi-70); font: 400 .82rem/1.55 var(--kh-font-ui); letter-spacing: .02em; }
.kh-fiche .kh-fiche__assure p { margin: 0; }
.kh-fiche .kh-fiche__assure a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Vers le sur-mesure (Alain, 2026-10-11) : la même petite ligne, en italique, sous la réassurance. */
.kh-fiche .kh-fiche__custom { margin: .7rem 0 0; color: var(--kh-sumi); font: italic 400 1.15rem/1.45 var(--kh-font-display); } /* une taille au-dessus, plus foncée (Alain : « peu visible ») */
.kh-fiche .kh-fiche__custom a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.kh-fiche .kh-fiche__custom a:is(:hover, :focus-visible) { color: var(--kh-vermillon); }
/* Dans la nuit de Kaïro : presque blanc (Alain), et le vermillon lumineux de la nuit au survol. */
body.kh-fiche-kairo .kh-fiche__custom { color: #f4efe6; }
body.kh-fiche-kairo .kh-fiche__custom a:is(:hover, :focus-visible) { color: var(--kh-vermillon-night); }

/* ---- Les quatre mouvements : fermés, le visiteur en ouvre un à la fois (Alain, 2026-10-07) ---- */
/* width: 100% : élément de grille aux marges automatiques, il prendrait sinon la largeur de son contenu, qui change
   selon la rubrique ouverte. */
.kh-fiche-movements { width: 100%; max-width: 48rem; margin: clamp(4rem, 8vw, 6.5rem) auto 0; border-top: 1px solid var(--kh-sumi-20); counter-reset: kh-movement; }
.kh-fiche-movement { border-bottom: 1px solid var(--kh-sumi-20); counter-increment: kh-movement; }
.kh-fiche-movement > summary { position: relative; display: block; padding: 1.6rem 3rem 1.6rem 0; list-style: none; cursor: pointer; }
.kh-fiche-movement > summary::-webkit-details-marker { display: none; }
.kh-fiche-movement > summary:focus-visible { outline: 2px solid var(--kh-vermillon); outline-offset: 2px; }
/* Plus / moins au trait, à droite. */
.kh-fiche-movement > summary::before, .kh-fiche-movement > summary::after { content: ""; position: absolute; top: 50%; right: .5rem; width: 1.1rem; height: 1px; background: var(--kh-sumi); transition: transform 250ms ease; }
.kh-fiche-movement > summary::after { transform: rotate(90deg); }
.kh-fiche-movement[open] > summary::after { transform: rotate(0deg); }
.kh-fiche .kh-fiche-movement__title { position: relative; margin: 0; padding-left: 3.25rem; color: var(--kh-sumi); font: italic 400 clamp(1.6rem, 2.4vw, 2.2rem)/1.15 var(--kh-font-display); transition: color 200ms ease; }
.kh-fiche-movement > summary:hover .kh-fiche-movement__title { color: var(--kh-vermillon); }
.kh-fiche-movement__title::before { content: counter(kh-movement, cjk-ideographic); position: absolute; top: .2em; left: 0; color: var(--kh-vermillon); font: normal 400 1.5rem/1 var(--kh-font-kanji); }
.kh-fiche-movement__body { max-width: 62ch; padding: 0 0 2rem 3.25rem; color: var(--kh-sumi); font: 400 1.05rem/1.75 var(--kh-font-body); }
.kh-fiche-movement__body > :first-child { margin-top: 0; }
.kh-fiche-movement__body > :last-child { margin-bottom: 0; }
.kh-fiche-movement__body p + p { margin-top: 1rem; }
.kh-fiche-movement__body a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kh-fiche-movement__body a:is(:hover, :focus-visible) { color: var(--kh-vermillon); }
/* Ouverture en douceur là où le navigateur sait le faire. */
@supports (interpolate-size: allow-keywords) {
  .kh-fiche-movements { interpolate-size: allow-keywords; }
  .kh-fiche-movement::details-content { height: 0; overflow: clip; transition: height 300ms ease, content-visibility 300ms allow-discrete; }
  .kh-fiche-movement[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .kh-fiche-movement::details-content { transition: none; }
}
.kh-fiche .kh-fiche-sizes { margin: 0 0 1.1rem; font: 400 .95rem/1.4 var(--kh-font-ui); }
.kh-fiche .kh-fiche-sizes span { margin-right: .6rem; color: var(--kh-sumi-70); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }


/* ---- Du même monde : trois cartes koi (kh-shop.css), films au survol ---- */
.kh-fiche .related.products { margin-top: clamp(4rem, 8vw, 6.5rem); }
.kh-fiche .related.products > h2 { margin: 0 0 2.5rem; color: var(--kh-sumi); font: italic 400 clamp(2rem, 3.6vw, 3rem)/1.1 var(--kh-font-display); text-align: center; }
.kh-fiche .related.products > h2::after { content: ""; display: block; width: min(12rem, 60%); height: 1rem; margin: .9rem auto 0; background: url('../images/trait-pinceau-vermillon.webp') center / contain no-repeat; }
.kh-fiche .related ul.products { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: 64rem; margin: 0 auto; }
.kh-fiche .related ul.products::before, .kh-fiche .related ul.products::after { display: none; }
/* Kadence rogne l'image des cartes de cette section (section.products, sans son réglage « image-hover-none ») et, la
   fiche étant « sans cadre », peint leur texte en blanc : le koi agrandi au survol et le papier comme dans La Boutique. */
.kh-fiche .related ul.products li.product a { overflow: visible; }
.kh-fiche .related ul.products li.product .product-details { background: transparent; }
/* Flèches ‹ › sous une ligne qui défile (mobile), seulement quand toutes les cartes ne tiennent pas (kh-product.js). */
.kh-more-nav { display: flex; justify-content: center; gap: .75rem; margin-top: 1rem; }
.kh-more-nav[hidden] { display: none; }
.kh-more-nav button { position: relative; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid rgb(26 20 16 / .45); border-radius: 0; background: none; color: var(--kh-sumi); cursor: pointer; transition: opacity 200ms ease; }
.kh-more-nav button:is(:hover, :focus, :active) { background: none; color: var(--kh-sumi); }
.kh-more-nav button:focus-visible { outline: 2px solid var(--kh-vermillon); outline-offset: 2px; }
.kh-more-nav button:disabled { opacity: .3; cursor: default; }
.kh-more-nav button::before { content: ""; position: absolute; inset: 0; width: .55rem; height: .55rem; margin: auto; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; transform: translateX(.12rem) rotate(-45deg); }
.kh-more-nav button + button::before { transform: translateX(-.12rem) rotate(135deg); }
.kh-fiche .related ul.products li.product:nth-child(3n+1) { --kh-koi-origin: left center; }
.kh-fiche .related ul.products li.product:nth-child(3n) { --kh-koi-origin: right center; }

/* ---- Kaïro : un chapitre de l'histoire en 15 koinobori (inc/kairo.php, Alain 2026-10-07) ---- */
/* Fin de « L'histoire » : chapitre précédent / suivant (titre et « À venir » s'il n'est pas encore en vente). */
.kh-saga-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-top: 1.75rem; padding-top: 1.1rem; border-top: 1px solid var(--kh-sumi-20); }
.kh-saga-nav > * { display: flex; flex-direction: column; gap: .25rem; color: var(--kh-sumi); }
.kh-fiche-movement__body .kh-saga-nav a { text-decoration: none; }
.kh-saga-nav__next { align-items: flex-end; text-align: right; }
.kh-saga-nav__label, .kh-saga-nav__soon { color: var(--kh-sumi-70); font: 400 .72rem/1.3 var(--kh-font-ui); letter-spacing: .14em; text-transform: uppercase; }
.kh-saga-nav__prev .kh-saga-nav__label::before { content: "\2190\00a0"; }
.kh-saga-nav__next .kh-saga-nav__label::after { content: "\00a0\2192"; }
.kh-saga-nav__title { font: italic 400 1.15rem/1.25 var(--kh-font-display); transition: color 200ms ease; }
a:is(.kh-saga-nav__prev, .kh-saga-nav__next):is(:hover, :focus-visible) .kh-saga-nav__title { color: var(--kh-vermillon); }
.kh-saga-nav .is-soon .kh-saga-nav__title { color: var(--kh-sumi-70); }

/* ---- Kaïro : la nuit (Alain, 2026-10-07 ; classes kh-night et kh-fiche-kairo, inc/kairo.php) ----
   Fond (paysage du hero Kaïro voilé d'indigo), textes clairs et header : communs avec la page du monde Kaïro
   (kh-foundations.css, body.kh-night). Ici, la fiche : le koi vole sans son papier, avec un halo clair qui garde
   lisibles les koi sombres ; numéros en or (le vermillon ne se lit pas sur l'indigo ; l'or est permis pour les détails,
   charte §5.1) ; « Du même monde » : koi flottants, sans cadre ni papier (ci-dessous). Les 15 chapitres sont sur la page
   du monde (kh-world-archive.css). */
/* « Du même monde » sur la nuit (Alain, 2026-10-07) : comme sur la page du monde Kaïro, les koi flottent sans cadre ni
   papier, entourés de la lueur des fiches (portée par le lien, pour valoir aussi pour le film) ; pas de papier derrière
   le koi agrandi au survol. */
body.kh-fiche-kairo .related ul.products li.product { border-color: transparent; background: none; }
body.kh-fiche-kairo .related ul.products li.product a img { background: none; }
body.kh-fiche-kairo .related 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)); }
body.kh-fiche-kairo .related ul.products .woocommerce-loop-image-link::before { display: none; }
body.kh-fiche-kairo .related ul.products li.product .woocommerce-loop-product__title :is(a, a:visited) { color: #F4EFE6; }
body.kh-fiche-kairo .related ul.products li.product .woocommerce-loop-product__title a:is(:hover, :focus-visible) { color: #D9B45A; }
body.kh-fiche-kairo .kh-more-nav button { border-color: rgb(244 239 230 / .5); }
body.kh-fiche-kairo .woocommerce-product-gallery__image { border-color: transparent; background: none; }
body.kh-fiche-kairo .woocommerce-product-gallery__image :is(img, video, .kh-fiche-film-canvas) { filter: drop-shadow(0 0 1.6rem rgb(248 244 238 / .45)) drop-shadow(0 0 .35rem rgb(248 244 238 / .5)); }
body.kh-fiche-kairo .kh-fiche-film-toggle { border-color: rgb(244 239 230 / .6); }
body.kh-fiche-kairo .kh-size span, body.kh-fiche-kairo .kh-size-single, body.kh-fiche-kairo form.cart .quantity input.qty { border-color: rgb(244 239 230 / .4); background: rgb(255 255 255 / .06); color: #F4EFE6; }
body.kh-fiche-kairo .kh-size-single, body.kh-fiche-kairo .kh-size input:checked + span { border-color: #F4EFE6; box-shadow: inset 0 0 0 1px #F4EFE6; }
/* Bouton d'achat dans le rouge de la nuit (kh-foundations.css) : texte sumi, le blanc ne se lit pas assez sur ce rouge
   plus lumineux (3,1:1 ; sumi 5,9:1). La règle « body.kh-fiche-kairo .kh-fiche … » ne visait rien (kh-fiche est la
   classe du body) : tailles, quantité et survol du bouton n'avaient pas leur version de nuit avant 1.10.9. */
body.kh-fiche-kairo form.cart .single_add_to_cart_button { color: #1A1410; }
body.kh-fiche-kairo form.cart .single_add_to_cart_button:is(:hover, :focus-visible) { background: #F4EFE6; color: #1A1410; }
body.kh-fiche-kairo .related.products > h2::after { filter: brightness(1.45) saturate(1.15); } /* trait de pinceau vermillon, ravivé sur la nuit */
body.kh-fiche-kairo .kh-fiche-movement__title::before { color: #D9B45A; }

@media (max-width: 900px) {
  body.kh-fiche div.product { grid-template-columns: minmax(0, 1fr); }
  body.kh-fiche div.product > :is(div.woocommerce-product-gallery, div.summary) { grid-column: 1; }
  body.kh-fiche div.product > div.summary { margin-top: 1.75rem; }
}
@media (max-width: 767px) {
  .kh-fiche .woocommerce-product-gallery__image > a, .kh-fiche .kh-fiche-film-canvas, .kh-fiche .kh-gallery-video__frame { padding: 10% 4%; }
  .kh-fiche-film-toggle { right: .5rem; bottom: .5rem; }
  .kh-fiche .summary .product_title { font-size: 2.4rem; }
  .kh-fiche .summary > .price { margin-top: 1.25rem; }
  .kh-fiche .woocommerce-product-details__short-description { margin-top: 1.1rem; font-size: 1rem; line-height: 1.6; }
  .kh-fiche form.cart .single_add_to_cart_button { max-width: none; }
  .kh-fiche-movement > summary { padding: 1.25rem 2.5rem 1.25rem 0; }
  .kh-fiche .kh-fiche-movement__title { padding-left: 2.6rem; font-size: 1.45rem; }
  .kh-fiche-movement__title::before { font-size: 1.3rem; }
  .kh-fiche-movement__body { padding: 0 0 1.5rem 2.6rem; font-size: 1rem; line-height: 1.65; }
  /* Grandes cartes sur une ligne qui défile de gauche à droite, du bord à bord ; les flèches ‹ › dessous disent qu'il y
     en a d'autres (Alain, 2026-10-07). */
  .kh-fiche .related ul.products { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; gap: 1rem; margin: 0 calc(-1 * var(--kh-gutter)); padding: 0 var(--kh-gutter) .5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--kh-gutter); scrollbar-width: none; }
  .kh-fiche .related ul.products::-webkit-scrollbar { display: none; }
  .kh-fiche .related ul.products li.product { scroll-snap-align: start; }
  .kh-saga-nav__title { font-size: 1rem; }
}

/* ---- La barre d'achat (Alain, 2026-10-10 ; kh-product.js, 6) : en bas de l'écran quand le bloc d'achat de la fiche
   n'est plus visible ; nom du koi (ordinateur), tailles, prix, « Ajouter au panier ». Une seule action vermillon. ---- */
/* No space kept under the page for the bar (Alain, 2026-10-14: the washi band under it): the bar hides itself while the
   footer is on screen (kh-product.js), so it never covers the footer's last line. */
/* body > : la feuille des composants de WordPress, chargée sur les fiches pour l'administrateur connecté (boîte de SEOPress),
   met tout [role="region"] en position relative et faisait passer la barre sous le bas de l'écran (2026-10-13). */
body > .kh-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgb(255 253 252 / .97); border-top: 1px solid var(--kh-sumi-20); box-shadow: 0 -4px 14px rgb(26 20 16 / .06); visibility: hidden; transform: translateY(100%); transition: transform 250ms ease, visibility 0s linear 250ms; }
.kh-buybar.is-visible { visibility: visible; transform: none; transition: transform 250ms ease; }
.kh-buybar__inner { display: flex; align-items: center; gap: 1rem; max-width: 1280px; margin: 0 auto; padding: .7rem clamp(1rem, 3vw, 2rem) calc(.7rem + env(safe-area-inset-bottom)); }
.kh-buybar__name { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--kh-sumi); font: italic 400 1.35rem/1.2 var(--kh-font-display); white-space: nowrap; text-overflow: ellipsis; }
.kh-buybar__sizes { display: flex; gap: .4rem; }
.kh-buybar__size { display: inline-flex; align-items: center; justify-content: center; min-width: 4.25rem; min-height: 2.6rem; margin: 0; padding: 0 .75rem; border: 1px solid var(--kh-sumi-20); border-radius: 0; background: transparent; color: var(--kh-sumi); font: 400 .82rem/1 var(--kh-font-ui); cursor: pointer; }
.kh-buybar__size[aria-pressed="true"], .kh-buybar__size.is-single { border-color: var(--kh-sumi); box-shadow: inset 0 0 0 1px var(--kh-sumi); }
.kh-buybar__size:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
/* Les boutons du thème parent passent en or au survol et au clic : jamais d'or sur un bouton (charte). */
.kh-buybar .kh-buybar__size:is(:hover, :focus, :active) { background: transparent; color: var(--kh-sumi); }
.kh-buybar .kh-buybar__size:hover { border-color: var(--kh-sumi-70); }
.kh-buybar__size:focus-visible, .kh-buybar__add:focus-visible { outline: 2px solid var(--kh-vermillon); outline-offset: 2px; }
.kh-buybar__price { margin: 0; color: var(--kh-sumi); font: 400 1.15rem/1 var(--kh-font-ui); white-space: nowrap; }
.kh-buybar__price * { color: inherit; }
.kh-buybar__add { min-height: 2.75rem; margin: 0; padding: 0 1.5rem; border: 0; border-radius: 0; background: var(--kh-vermillon); color: var(--kh-white); font: 400 .78rem/1 var(--kh-font-ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.kh-buybar .kh-buybar__add:is(:focus, :active) { background: var(--kh-vermillon); color: var(--kh-white); }
.kh-buybar .kh-buybar__add:is(:hover, :focus-visible) { background: var(--kh-sumi); color: var(--kh-white); }
.kh-buybar__add:disabled { opacity: .45; cursor: not-allowed; }
body.kh-fiche-kairo .kh-buybar { --kh-vermillon: var(--kh-vermillon-night); background: rgb(15 27 61 / .96); border-top-color: rgb(244 239 230 / .2); }
body.kh-fiche-kairo .kh-buybar__name, body.kh-fiche-kairo .kh-buybar__price, body.kh-fiche-kairo .kh-buybar__size { color: #F4EFE6; }
body.kh-fiche-kairo .kh-buybar__size { border-color: rgb(244 239 230 / .4); }
body.kh-fiche-kairo .kh-buybar__size[aria-pressed="true"], body.kh-fiche-kairo .kh-buybar__size.is-single { border-color: #F4EFE6; box-shadow: inset 0 0 0 1px #F4EFE6; }
body.kh-fiche-kairo .kh-buybar__add { color: #1A1410; }
body.kh-fiche-kairo .kh-buybar .kh-buybar__size:is(:hover, :focus, :active) { color: #F4EFE6; }
body.kh-fiche-kairo .kh-buybar .kh-buybar__size:hover { border-color: #F4EFE6; }
body.kh-fiche-kairo .kh-buybar .kh-buybar__add:is(:focus, :active) { color: #1A1410; }
body.kh-fiche-kairo .kh-buybar .kh-buybar__add:is(:hover, :focus-visible) { background: #F4EFE6; color: #1A1410; }
@media (max-width: 767px) {
  .kh-buybar__inner { gap: .5rem; padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom)); }
  .kh-buybar__name { display: none; }
  .kh-buybar__size { min-width: 3.4rem; min-height: 2.6rem; padding: 0 .5rem; font-size: .78rem; }
  .kh-buybar__price { font-size: 1rem; }
  .kh-buybar__add { flex: 1 1 auto; padding: 0 .75rem; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { body > .kh-buybar, .kh-buybar.is-visible { transition: none; } }