/* ============================================================
   KH-000 — Fondations Design System v1.2 « Ma (間) »  (Lot 6 / PR1)
   Référence : docs/charte-graphique/KH-000 — Koinobori House Design System.md
   Tokens, polices self-host, base, typo, boutons, resets. AUCUN rendu de page ici.
   ============================================================ */

/* ---- 1. Polices self-host (woff2 ; RGPD, zéro appel Google) ---- */
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/cormorant-garamond-300-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/cormorant-garamond-300-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-400-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-400-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/cormorant-garamond-600-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/cormorant-garamond-600-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/cormorant-garamond-300-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/cormorant-garamond-300-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-400-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-400-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/lora-400-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/lora-400-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/lora-400-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/lora-400-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/dm-sans-300-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/dm-sans-300-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/dm-sans-400-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/dm-sans-400-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Japonais (v3, 2026-10-15, audit de rapidité) : seulement les caractères du site (noms des mondes, chiffres 一…十 des
   numérotations, 鯉のぼり, liste de la charte ; tools/fetch-fonts.py), 30 Ko au lieu de 312. Un caractère absent
   s'affiche dans la police japonaise de l'appareil. */
@font-face{font-family:"Shippori Mincho";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/shippori-mincho-400-jp-v3.woff2") format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+4E00-9FFF,U+FF00-FFEF;}
@font-face{font-family:"Shippori Mincho";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/shippori-mincho-500-jp-v3.woff2") format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+4E00-9FFF,U+FF00-FFEF;}
@font-face{font-family:"Noto Serif JP";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/noto-serif-jp-var-jp-v3.woff2") format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+4E00-9FFF,U+FF00-FFEF;}

/* ---- 2. Tokens couleur KH-000 (§4) — arbitrage Alain 2026-06-30 : --kh-or = #C9A96E ---- */
:root{
  --kh-washi:#F7F3EC;   --kh-sumi:#1A1410;   --kh-vermillon:#C8311A;  --kh-or:#C9A96E;
  --kh-vermillon-night:#FF5A3D; /* le vermillon, plus lumineux, de la nuit de Kaïro (body.kh-night) */
  --kh-vermillon-day:var(--kh-vermillon); /* le vermillon du jour, gardé pour le menu clair ouvert sur la nuit */
  --kh-brume:#E8E4DC;   --kh-indigo:#1B2B5E;  --kh-sakura:#F2C4CE;     --kh-foret:#3D5A3E;
  /* 5 Mondes (§6) */
  --kh-mer-1:#1B2B5E;          --kh-mer-2:#F0F4F8;          --kh-mer-3:#C8D8E8;
  --kh-kairo-1:#0D0D0D;        --kh-kairo-2:#C8311A;        --kh-kairo-3:#8B6914;
  --kh-hanami-1:#F2C4CE;       --kh-hanami-2:#D4A853;       --kh-hanami-3:#8FAF7E;
  --kh-motifs-1:#F7F3EC;       --kh-motifs-2:#1A1410;       --kh-motifs-3:#C9A96E;
  --kh-territoires-1:#3D5A3E;  --kh-territoires-2:#C17F3A;  --kh-territoires-3:#E8D5B0;
  /* familles typo (§5) */
  --kh-font-display:"Cormorant Garamond",Georgia,serif;
  --kh-font-jp:"Shippori Mincho","Noto Serif JP",serif;
  --kh-font-body:"Lora",Georgia,serif;
  --kh-font-ui:"DM Sans",system-ui,sans-serif;
  --kh-font-kanji:"Noto Serif JP","Shippori Mincho",serif;
}

/* ---- 3. Mapping palette Kadence -> KH (les éléments Kadence héritent KH sans Customizer)
         ⚠️ noms de variables à vérifier sur staging (inspecter le :root généré par Kadence) ---- */
:root{
  --global-palette1:var(--kh-vermillon);
  --global-palette2:var(--kh-or);
  --global-palette3:var(--kh-sumi);
  --global-palette4:var(--kh-sumi);
  --global-palette5:var(--kh-indigo);
  --global-palette6:var(--kh-brume);
  --global-palette7:var(--kh-washi);
  --global-palette8:var(--kh-washi);
  --global-palette9:#ffffff;
}

/* ---- 4. Base — fond washi + texture (concept Ma) ; jamais blanc pur global (§7,§17) ---- */
/* Fond washi Manus (pack v3.1, 03_fonds_et_textures) : image unique, non répétable (nuages d'encre
   dans les coins), donc posée en calque fixe couvrant l'écran ; le contenu défile par-dessus.
   Couleur de secours = ivoire chaud (moyenne de l'image), consigne README_assets.md. Décision Alain 2026-09-24. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:#F1E4D0 url("../images/fond-washi-nuages.webp") center / cover no-repeat;
}
/* Kadence peint le conteneur et les articles en blanc (palette9) : le fond doit rester visible partout. */
body .site,body.content-style-unboxed .site,body #inner-wrap,body .content-area,body .content-bg:not(.loop-entry){background:transparent;}
/* Bandeau de titre des pages (Kadence) : sans son aplat clair, le washi continue du header jusqu'au contenu (Alain,
   2026-10-07 : « le header n'est pas complètement transparent »). */
body .entry-hero:is(.page-hero-section,.post-hero-section,.post-archive-hero-section,.product-archive-hero-section,.product-hero-section) .entry-hero-container-inner{background:transparent;}
/* La nuit de Kaïro (Alain, 2026-10-07 ; classe kh-night, inc/kairo.php) : fiches Kaïro et page du monde Kaïro (« l'univers
   Kaïro commence dès la page du monde »). « Sous la lune, le navire fantôme » (Alain, 2026-10-08 : la mer, pas les
   montagnes ; estampe générée d'après le prompt de Claude) : pleine lune dorée, chemin de lune, navire fantôme à
   l'horizon, vagues, kairo-mer-1672.webp ; sur mobile, sa version portrait « Lune dorée sur la mer nocturne »
   (kairo-mer-mobile-941.webp), descendue de 72 px pour que la lune se lève sous le logo et non derrière lui (choix B
   d'Alain, 2026-10-08 ; le haut est comblé par le bleu du ciel). Fond fixe à la place du washi, voile indigo léger,
   plus dense en bas de l'écran (écume sous les textes). Textes clairs : les couleurs de
   texte passent par --kh-sumi, redéfinies pour le contenu seulement (footer inchangé). Header au trait clair (Alain :
   « en blanc dans l'environnement Kaïro »), icônes et libellés du menu compris ; seul le logo posé sur la plaque shoji
   claire reste foncé (sans plaque, header compact, il passe au clair) ; page en cours au rouge de nuit ;
   sous-menu des mondes en indigo ; voile indigo au défilement. Réglages propres : kh-product.css, kh-world-archive.css. */
body.kh-night{background-color:#0f1b3d;}
body.kh-night::before{background:linear-gradient(180deg,rgb(15 27 61 / .15) 0%,rgb(15 27 61 / .32) 45%,rgb(10 18 42 / .72) 100%),url("../images/kairo-mer-1672.webp") center / cover no-repeat #0f1b3d;}
@media (max-width:767px){body.kh-night::before{background:linear-gradient(180deg,rgb(15 27 61 / .15) 0%,rgb(15 27 61 / .32) 45%,rgb(10 18 42 / .72) 100%),url("../images/kairo-mer-mobile-941.webp") center 72px / cover no-repeat rgb(4 30 53);}}
body.kh-night :is(.site-main,.product-title.product-above){--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-night .kadence-breadcrumbs,body.kh-night .kadence-breadcrumbs a{color:rgb(244 239 230 / .75);}
body.kh-night .kh-header{--kh-header-ink:#F4EFE6;}
body.kh-night .kh-header:not(.is-compact) .kh-wordmark{color:#1A1410;}
body.kh-night .kh-header :is(.kh-shoji-hint,.kh-menu-toggle){color:#F4EFE6;}
/* Panier sans cadre sur la nuit de Kaïro aussi (Alain, 2026-10-13), comme partout depuis le 2026-10-09. */
body.kh-night .kh-header .kh-subnav{background:rgb(21 34 77 / .96);border-color:rgb(244 239 230 / .2);}
body.kh-night .kh-header .kh-subnav__kanji{color:rgb(244 239 230 / .6);}
body.kh-night .kh-header .kh-subnav__all{border-top-color:rgb(244 239 230 / .15);}
body.kh-night .kh-header.is-scrolled{background:rgb(21 34 77 / .84);border-bottom-color:rgb(244 239 230 / .12);}
/* Rouge de la nuit (Alain, 2026-10-07 : « le rouge vermillon ne ressort pas très bien ») : le même vermillon, plus
   lumineux (#FF5A3D : contraste 5:1 sur l'indigo, au lieu de 2,9:1), dans le header (torii, rubrique en
   cours, panier rempli, sous-menu) et le contenu (traits des prix, liens au survol, bouton d'achat, livraison offerte).
   Le menu mobile et le footer, sur papier clair, gardent le vermillon. */
body.kh-night :is(.site-main,.kh-header){--kh-vermillon:var(--kh-vermillon-night);}
body.kh-night .kh-header{--kh-header-accent:var(--kh-vermillon-night);}
body.kh-night .kh-menu-dialog{--kh-header-accent:var(--kh-vermillon-day);--kh-vermillon:var(--kh-vermillon-day);}
body{
  background-color:#F1E4D0;
  color:var(--kh-sumi);
  font-family:var(--kh-font-body);
  line-height:1.75;
}

/* ---- 5. Typographie (§5) ---- */
.kh-title-hero{font-family:var(--kh-font-display);font-style:italic;font-weight:300;letter-spacing:-.02em;line-height:1.1;color:var(--kh-sumi);}
.kh-subtitle-jp{font-family:var(--kh-font-jp);font-weight:400;letter-spacing:.05em;color:var(--kh-sumi);}
.kh-body{font-family:var(--kh-font-body);font-weight:400;line-height:1.75;color:var(--kh-sumi);}
.kh-ui{font-family:var(--kh-font-ui);font-weight:300;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;}
.kh-kanji{font-family:var(--kh-font-kanji);font-weight:400;}
/* Titres de contenu -> Cormorant (override Kadence ; ajustable si specificité insuffisante) */
h1,h2,h3{font-family:var(--kh-font-display);}

/* ---- 6. Boutons (§7) — radius 0 ; vermillon = CTA uniquement ---- */
.btn-primary{background:var(--kh-vermillon);color:var(--kh-washi);font-family:var(--kh-font-ui);font-weight:300;letter-spacing:.15em;text-transform:uppercase;font-size:.75rem;padding:.75rem 2rem;border:none;border-radius:0;transition:background 160ms ease-out,transform 160ms ease-out;cursor:pointer;}
.btn-primary:hover{background:#A02515;transform:scale(1.02);}
.btn-primary:active{transform:scale(.97);}
.btn-secondary{background:transparent;color:var(--kh-sumi);font-family:var(--kh-font-ui);font-weight:300;letter-spacing:.15em;text-transform:uppercase;font-size:.75rem;padding:.75rem 2rem;border:1px solid var(--kh-sumi);border-radius:0;transition:all 200ms ease-out;}
.btn-secondary:hover{background:var(--kh-sumi);color:var(--kh-washi);}

/* ---- 7. Reset radius 0 (écrase l'ancien 8px + défauts Kadence/WC) (§16.4,§17.3) ---- */
.wp-block-button__link,.wp-element-button,.kb-button,
.woocommerce button.button,.woocommerce a.button,.woocommerce #respond input#submit,
.woocommerce .button,button,input[type="submit"],input[type="button"]{border-radius:0 !important;}

/* ---- 7bis. Koi au vent, au survol (Alain, 2026-09-25) ---- */
/* Galeries produits des cinq mondes et de la home. Au repos : koi immobiles, sans fond, fondus dans le
   papier (photos détourées, fond transparent). Survol ou clavier : le koi grandit et flotte au vent (balancement + ondulation, filtre
   SVG #kh-wind imprimé par inc/world-archive.php) sur la bannière voilée de SA collection (classe
   product_cat-<slug> posée par WooCommerce, slugs FR et EN) ; les autres koi s'estompent. Tout revient
   quand la souris part. Écrans à souris seulement ; pas d'animation si « réduire les animations ».
   L'estompage porte sur l'image et le texte, jamais sur la carte : une carte transparente (opacity)
   isolerait l'image du papier et ferait réapparaître le fond blanc des photos.
   Remarques d'Alain (2026-09-25, soir) : koi entièrement visible, même s'il déborde sur les voisins
   estompés (fond plus grand que le koi agrandi, marge pour le balancement) ; koi net, sans effet de
   transparence : photos détourées (tools/staging/pc8), koi opaque sans mode de fusion ; bannière voilée à 80 %. */
.kh-home .woocommerce ul.products,
.kh-world-archive ul.products,
.kh-shop ul.products,
.kh-fiche .related ul.products{--kh-koi-zoom:1.45;}
.kh-home .woocommerce ul.products{--kh-koi-zoom:1.8;}
/* Revue PR #29 : agrandi depuis son centre, le koi des colonnes de bord sortait de l'écran sous ~1550 px de large
   (tête ou queue rognée par .site{overflow:clip} de Kadence). L'agrandissement part donc du bord extérieur :
   colonne de gauche vers la droite, colonne de droite vers la gauche ; le fond suit avec la même origine. */
/* Pages des mondes : trois colonnes, deux sur mobile (2026-10-08, revue #48 : la règle pair / impair des deux colonnes
   faisait sortir les koi des bords). */
@media (min-width:768px){
  .kh-world-archive ul.products li.product:nth-child(3n+1){--kh-koi-origin:left center;}
  .kh-world-archive ul.products li.product:nth-child(3n){--kh-koi-origin:right center;}
}
@media (max-width:767px){
  .kh-world-archive ul.products li.product:nth-child(odd){--kh-koi-origin:left center;}
  .kh-world-archive ul.products li.product:nth-child(even){--kh-koi-origin:right center;}
}
@media (min-width:1025px){
  .kh-home .woocommerce ul.products li.product:nth-child(4n+1){--kh-koi-origin:left center;}
  .kh-home .woocommerce ul.products li.product:nth-child(4n){--kh-koi-origin:right center;}
}
@media (min-width:1025px){
  .kh-shop ul.products li.product:nth-child(4n+1){--kh-koi-origin:left center;}
  .kh-shop ul.products li.product:nth-child(4n){--kh-koi-origin:right center;}
}
@media (max-width:1024px){
  .kh-home .woocommerce ul.products li.product:nth-child(odd){--kh-koi-origin:left center;}
  .kh-home .woocommerce ul.products li.product:nth-child(even){--kh-koi-origin:right center;}
}
.kh-home .woocommerce ul.products li.product.loop-entry,
.kh-world-archive ul.products li.product.loop-entry,
.kh-shop ul.products li.product.loop-entry,
.kh-fiche .related ul.products li.product.loop-entry{overflow:visible !important;} /* Kadence rognait le koi agrandi. */
.kh-home .woocommerce ul.products .woocommerce-loop-image-link,
.kh-world-archive ul.products .woocommerce-loop-image-link,
.kh-shop ul.products .woocommerce-loop-image-link,
.kh-fiche .related ul.products .woocommerce-loop-image-link{position:relative;display:block;}
.kh-home .woocommerce ul.products .woocommerce-loop-image-link::before,
.kh-world-archive ul.products .woocommerce-loop-image-link::before,
.kh-shop ul.products .woocommerce-loop-image-link::before,
.kh-fiche .related ul.products .woocommerce-loop-image-link::before{
  content:"";position:absolute;inset:-12% -4%;z-index:-1;pointer-events:none;opacity:0;scale:1;transform-origin:var(--kh-koi-origin,center);
  background:var(--kh-world-bg,url("../images/fond-washi-nuages.webp")) center / cover no-repeat;
  box-shadow:0 24px 50px rgb(26 20 16 / .28);transition:opacity 450ms ease,scale 500ms cubic-bezier(.2,.7,.2,1);
}
.kh-home .woocommerce ul.products li.product img,
.kh-world-archive ul.products li.product img,
.kh-shop ul.products li.product img,
.kh-fiche .related ul.products li.product img{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-home .woocommerce ul.products .product-details,
.kh-world-archive ul.products .product-details,
.kh-shop ul.products .product-details,
.kh-fiche .related ul.products .product-details{transition:opacity 350ms ease;}
/* Revue PR #29 : une photo non détourée (nom de fichier sans « -detoure » : ajout depuis l'admin, import du
   catalogue, image d'attente) garde son fond blanc ; il est fondu dans le papier (multiply) en attendant son
   détourage (tools/images/koi-cutout.py, docs/development/photos-produits.md). Les photos détourées restent opaques. */
.kh-home .woocommerce ul.products li.product img:not([src*="-detoure"]),
.kh-world-archive ul.products li.product img:not([src*="-detoure"]),
.kh-shop ul.products li.product img:not([src*="-detoure"]),
.kh-fiche .related ul.products li.product img:not([src*="-detoure"]){mix-blend-mode:multiply;}
/* Fond de chaque monde derrière ses koi (Alain, 2026-10-08) : l'image de la carte (accueil, La Boutique, pages des
   mondes, « Du même monde » ; kh-editorial.css, kh-shop.css) et le panneau de l'agrandissement au survol. Les fonds de
   jour sont générés d'après les prompts de Claude (« Vague pâle d'Hokusai », « Soleil vermillon et nuages dorés »,
   « Branche de cerisier », « Collines brumeuses sur carte ancienne ») ; Kaïro : sa mer au clair de lune. Sans monde :
   le papier washi. */
li.product.product_cat-mer,li.product.product_cat-sea{--kh-world-bg:url("../images/fond-mer-800.webp");}
li.product.product_cat-motifs,li.product.product_cat-patterns{--kh-world-bg:url("../images/fond-motifs-800.webp");}
li.product.product_cat-hanami,li.product.product_cat-hanami-en{--kh-world-bg:url("../images/fond-hanami-800.webp");}
li.product.product_cat-kairo,li.product.product_cat-kairo-en{--kh-world-bg:url("../images/kairo-mer-960.webp");}
/* Dans la nuit de Kaïro, la grande estampe est déjà chargée pour le fond de page : la même pour les cartes (revue #50). */
body.kh-night li.product:is(.product_cat-kairo,.product_cat-kairo-en){--kh-world-bg:url("../images/kairo-mer-1672.webp");}
li.product.product_cat-territoires,li.product.product_cat-lands{--kh-world-bg:url("../images/fond-territoires-800.webp");}
@keyframes kh-koi-wind{
  0%{transform:rotate(-1.5deg) skewY(0deg) translateY(0);}
  20%{transform:rotate(.8deg) skewY(1deg) translateY(-5px);}
  45%{transform:rotate(2deg) skewY(-.6deg) translateY(-9px);}
  70%{transform:rotate(-.3deg) skewY(.8deg) translateY(-4px);}
  100%{transform:rotate(-1.5deg) skewY(0deg) translateY(0);}
}
@media (hover:hover) and (pointer:fine){
  :is(.kh-home .woocommerce,.kh-world-archive,.kh-shop,.kh-fiche .related) ul.products:has(.woocommerce-loop-image-link:is(:hover,:focus-visible)) li.product:not(:has(.woocommerce-loop-image-link:is(:hover,:focus-visible))) :is(img,.product-details){opacity:.3;filter:saturate(.5);}
  :is(.kh-home .woocommerce,.kh-world-archive,.kh-shop,.kh-fiche .related) ul.products li.product:has(.woocommerce-loop-image-link:is(:hover,:focus-visible)){position:relative;z-index:5;}
  :is(.kh-home .woocommerce,.kh-world-archive,.kh-shop,.kh-fiche .related) ul.products li.product:has(.woocommerce-loop-image-link:is(:hover,:focus-visible)) .product-details{opacity:0;}
  :is(.kh-home .woocommerce,.kh-world-archive,.kh-shop,.kh-fiche .related) ul.products .woocommerce-loop-image-link:is(:hover,:focus-visible)::before{opacity:1;scale:var(--kh-koi-zoom);}
  :is(.kh-home .woocommerce,.kh-world-archive,.kh-shop,.kh-fiche .related) ul.products .woocommerce-loop-image-link:is(:hover,:focus-visible) img{scale:var(--kh-koi-zoom);animation:kh-koi-wind 4.5s ease-in-out infinite;filter:url(#kh-wind);}
}
@media (prefers-reduced-motion:reduce){
  :is(.kh-home .woocommerce,.kh-world-archive,.kh-shop,.kh-fiche .related) ul.products .woocommerce-loop-image-link:is(:hover,:focus-visible) img{animation:none;filter:none;}
}

/* Koi animés (Alain, 2026-10-06 ; inc/koi-film.php, koi-film.js) : sur une carte qui a son film, le vrai produit en
   mouvement (canvas, koi opaque) prend la place de la photo, au survol sur ordinateur (même cadre, même
   agrandissement, même bannière voilée ; plus de simulation du vent pour elle) et, sur mobile, quand la carte est bien
   visible. Sans film, rien ne change. La vidéo source reste dans la page, invisible (un pixel). */
ul.products li.product.kh-has-film .woocommerce-loop-image-link{position:relative;display:block;}
:is(.kh-home .woocommerce,.kh-world-archive,.kh-shop,.kh-fiche .related) ul.products li.product.kh-has-film .woocommerce-loop-image-link img{animation:none;filter:none;}
ul.products li.product .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){
  :is(.kh-home .woocommerce,.kh-world-archive,.kh-shop,.kh-fiche .related) ul.products .woocommerce-loop-image-link:is(:hover,:focus-visible) .kh-koi-film-video{scale:var(--kh-koi-zoom);}
}
ul.products li.product.is-film-playing .kh-koi-film-video{opacity:1;}
ul.products li.product.is-film-playing .woocommerce-loop-image-link img{opacity:0;}
/* Sélecteur renforcé : le hero donne à ses vidéos width:100% (kh-editorial.css). */
:is(ul.products,.kh-home-hero__koi,.kh-kairo-chapters) video.kh-koi-film-src{position:absolute;left:0;bottom:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none;}

/* ---- 8. Mouvement réduit (§8) ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}