/* The mobile menu is outside .kh-header: it shares the accent, so that its current section shows in vermilion as
   on a computer (it stayed black, 2026-10-14). */
.kh-header,.kh-menu-dialog{--kh-header-accent:#c8311a}
.kh-header{
  --kh-header-bg:#f8f4ee;--kh-header-glass:rgba(248,244,238,.84);--kh-header-ink:#1a1410;
  --kh-header-h:100px;--kh-logo-size:3.4rem;--kh-pan-left:0px;--kh-pan-right:0px;--kh-admin-offset:0px;
  position:fixed;inset:var(--kh-admin-offset) 0 auto;z-index:1000;height:var(--kh-header-h);min-height:0;
  background:var(--kh-header-bg);color:var(--kh-header-ink);border-bottom:1px solid #1a141018;
  transition:height 400ms ease,background-color 400ms ease;font-family:'DM Sans',sans-serif;
}
.kh-header *,.kh-menu-dialog *{box-sizing:border-box}
.kh-header::before,.kh-header::after{content:none}
.kh-header a,.kh-menu-dialog a{color:inherit;text-decoration:none}
.kh-header-spacer{height:100px}
.kh-header.is-scrolled{--kh-header-h:68px;--kh-logo-size:2.6rem;background:var(--kh-header-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* Fond continu (Alain, 2026-10-07) : en haut de page, plus de bande claire, le header laisse voir le fond de la page
   (washi, nuit de Kaïro : kh-product.css) ; dès que le contenu passe dessous, voile flouté (is-scrolled). Le
   sous-menu garde son fond (--kh-header-bg). */
.kh-header:not(.is-scrolled){background:transparent;border-bottom-color:transparent}
.kh-header-home{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}
.kh-wordmark{display:flex;align-items:baseline;white-space:nowrap;font-size:var(--kh-logo-size);line-height:1;transition:font-size 400ms ease;pointer-events:none}
.kh-wordmark>span{display:block;transition:transform 700ms ease-out,padding 400ms ease}
/* Logo calligraphié d'origine (Alain, 2026-10-13 : « C'était le logo original »), sans le cartouche 鯉のぼり : chaque mot
   est une image (logo-koinobori.png, logo-house.png : même hauteur, l'encre et les gris de la brosse dans la
   transparence) posée en masque sur la couleur du texte, qui suit donc le header (nuit de Kaïro comprise). Haute d'1 em,
   la calligraphie a la largeur du mot en Cormorant qu'elle remplace : shoji, coulissement et header compact ne changent
   pas. Les mêmes mots dans les portes du menu (.kh-door span) et dans son cartouche (.kh-cal). */
.kh-word-left::after,.kh-word-right::after,.kh-menu-dialog .kh-door span::after,.kh-cal::after{content:"";display:block;height:1em;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.kh-word-left::after,.kh-menu-dialog .kh-door--left span::after,.kh-cal--left::after{width:3.718em;-webkit-mask-image:url('../images/logo-koinobori.png');mask-image:url('../images/logo-koinobori.png')} /* 580 × 156 */
.kh-word-right::after,.kh-menu-dialog .kh-door--right span::after,.kh-cal--right::after{width:2.295em;-webkit-mask-image:url('../images/logo-house.png');mask-image:url('../images/logo-house.png')} /* 358 × 156 */
/* « Koinobori House » en deux mots (Alain, 2026-10-08) : un espace de part et d'autre de la jointure des cloisons, le « i »
   et le « H » ne la touchent plus. */
.kh-word-left{padding-right:.22em} /* « Koinobori » un peu plus en retrait que « House » (Alain) : le « i » est fin */
.kh-word-right{padding-left:.14em}
/* Shoji avec montant central élargi et encoches (Alain, 2026-10-19) : sur grand écran, les deux mots s'écartent du
   montant ; le header compact (défilement, tablette, téléphone) garde l'écart ci-dessus, sans montant ni encoche. */
.kh-header.is-ready:not(.is-compact) .kh-word-left{padding-right:.52em}
.kh-header.is-ready:not(.is-compact) .kh-word-right{padding-left:.44em}
.kh-header-center{position:absolute;inset:0 auto 0 50%;transform:translateX(-50%);display:flex;align-items:center;gap:24px;z-index:2;width:max-content;max-width:100%;opacity:1}
.kh-nav-list{display:flex;align-items:center;gap:clamp(12px,2vw,32px);list-style:none!important;padding:0!important;margin:0!important}
.kh-nav-item{margin:0!important;padding:0!important}
.kh-nav-link,.kh-action{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0}
.kh-header svg,.kh-menu-dialog svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;width:28px;height:28px}
.kh-header-actions{display:flex;align-items:center;gap:24px}
/* Compte et panier sans cadre (Alain : le panier le 2026-10-09, « le panier sans cadre partout » ; le compte le
   2026-10-11). Le cadre transparent garde la taille des boutons. */
.kh-header .kh-action{width:48px;height:48px;border:1px solid transparent}
/* Panier (Alain, 2026-10-05) : vermillon seulement s'il contient un article. */
.kh-header .kh-cart-desktop.is-filled{background:var(--kh-header-accent);color:#fffdfc}
.kh-header .kh-cart-desktop:not(.is-filled) .kh-cart-count{display:none}
/* Panier un peu plus grand que les autres icônes (Alain, 2026-10-09), sur ordinateur, iPad, téléphone et dans le menu. */
.kh-header .kh-cart-desktop svg,.kh-menu-dialog .kh-cart-mobile svg{width:32px;height:32px}
/* Compte, panier et langues toujours visibles, à droite, hors du logo coulissant (Alain, 2026-10-05). */
.kh-header-utility{position:absolute;top:0;bottom:0;right:clamp(16px,2.5vw,40px);display:flex;align-items:center;z-index:3}
/* Compte, panier, FR et EN régulièrement espacés (Alain, 2026-10-11 : « un peu trop espacés ») : zones de 44 px, 4 px
   entre elles, environ 18 px entre les dessins ; de même quand le header se réduit. */
.kh-header-utility .kh-header-actions,.kh-header.is-compact .kh-header-utility .kh-header-actions{gap:4px}
.kh-header .kh-header-utility .kh-action{width:44px;height:44px}
/* Lisibles sur les nuages d'encre du papier (Alain, 2026-10-11 : « EN se voit moins bien » sur l'accueil) : un halo
   couleur washi derrière les langues et les icônes, léger (charte : pas d'ombres épaisses) ; ni dans la nuit de Kaïro, ni
   sur le panier rempli (icône claire sur vermillon). */
body:not(.kh-night) .kh-header-utility .kh-header-languages a{text-shadow:0 0 4px #f8f4ee,0 0 10px #f8f4ee}
body:not(.kh-night) .kh-header-utility .kh-action:not(.is-filled) svg{filter:drop-shadow(0 0 5px #f8f4ee)}
.kh-cart-count{position:absolute;right:-5px;top:-5px;background:#fffdfc;color:#1a1410;min-width:18px;height:18px;font:400 11px/18px 'DM Sans',sans-serif;text-align:center;border:1px solid #1a141030}
.kh-header .kh-nav-link:hover,.kh-header .kh-nav-link:focus-visible,.kh-header [aria-current=page],.kh-menu-dialog [aria-current=page]{color:var(--kh-header-accent)}
.kh-header a:focus-visible,.kh-header button:focus-visible,.kh-menu-dialog a:focus-visible,.kh-menu-dialog button:focus-visible{outline:2px solid var(--kh-header-accent,#c8311a);outline-offset:4px}
.kh-tip{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);padding:5px 8px;background:#1a1410;color:#fffdfc;white-space:nowrap;font:400 10px/1.2 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.07em;opacity:0;pointer-events:none;transition:opacity 120ms ease}
.kh-header a:hover>.kh-tip,.kh-header a:focus-visible>.kh-tip{opacity:1}
.kh-header-languages{display:flex;gap:2px;font:400 12px/1 'DM Sans',sans-serif}
.kh-header-languages a{display:grid;place-items:center;min-width:24px;min-height:44px} /* FR et EN un peu plus proches (Alain, 2026-10-13) : 12 px entre les deux au lieu de 20 ; zone de 24 × 44 px, le minimum d'accessibilité */
.kh-header-languages a[aria-current]{text-decoration:underline;text-underline-offset:5px}
/* Boutique : les cinq mondes en sous-menu, au survol ou au clavier ; Échap le referme (Alain, 2026-10-06).
   Le panneau part du bas du bandeau ; son ::before couvre l'écart pour que la souris passe de l'icône au panneau. */
.kh-nav-item.has-subnav{position:relative}
.kh-subnav{--kh-subnav-gap:calc((var(--kh-header-h) - var(--kh-nav-item-h,44px)) / 2);position:absolute;top:calc(100% + var(--kh-subnav-gap));left:50%;z-index:5;min-width:15rem;margin:0;padding:.5rem 0;list-style:none;background:var(--kh-header-bg);border:1px solid #1a141026;box-shadow:0 10px 28px rgb(26 20 16 / .08);transform:translate(-50%,-4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 160ms ease,transform 160ms ease,visibility 0s linear 160ms}
.kh-subnav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(var(--kh-subnav-gap) + 2px)}
@media(hover:hover){.kh-header .has-subnav:hover>.kh-subnav{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}}
.kh-header .has-subnav:focus-within>.kh-subnav{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
.kh-header .has-subnav.is-dismissed>.kh-subnav{opacity:0;visibility:hidden;pointer-events:none}
.kh-subnav li{margin:0;padding:0}
.kh-subnav a{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding:.5rem 1.25rem;color:var(--kh-header-ink)}
.kh-subnav__name{font:italic 400 1.3rem/1.2 'Cormorant Garamond',serif}
.kh-subnav__kanji{font:400 .95rem/1 'Noto Serif JP',serif;letter-spacing:.08em;color:#1a141080}
.kh-header .kh-subnav a:is(:hover,:focus-visible),.kh-subnav [aria-current]{color:var(--kh-header-accent)}
.kh-subnav__all{margin-top:.35rem;border-top:1px solid #1a14101f}
.kh-subnav__all a{justify-content:flex-start;gap:.5rem;padding-top:.8rem;font:400 11px/1.2 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.kh-subnav__all a::after{content:"\2192"}
/* « Sur-mesure » juste sous « Toute la boutique » (Alain, 2026-10-11) : même allure, sans second filet. */
.kh-subnav__all.kh-subnav__custom{margin-top:0;border-top:0}
.kh-subnav__custom a{padding-top:.55rem}
.kh-menu-toggle{display:none}
.kh-menu-dialog:not([open]){display:none}
.kh-menu-dialog{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:24px;background:#f8f4ee;color:#1a1410;overflow:auto}
.kh-menu-dialog::backdrop{background:#f8f4ee}
.kh-menu-dialog:focus{outline:none}
/* Le nom du site en tête du menu ouvert, sur fond blanc avec une ombre légère (Alain, 2026-10-09) ; le toucher referme
   le menu, sans croix (Alain : « la croix est inesthétique »). */
.kh-menu-dialog .kh-menu-close{display:block;position:relative;margin:0 auto 40px;padding:14px 28px 12px;border:0;background:#fffdfc!important;box-shadow:0 8px 24px rgb(26 20 16 / .1);color:#1a1410!important;font:400 clamp(28px,7vw,40px)/1.2 'Cormorant Garamond',serif;text-transform:none;letter-spacing:-.02em;cursor:pointer}
.kh-menu-close .kh-cal-row{display:flex;justify-content:center;gap:.32em} /* l'écart des deux mots dans le logo d'origine */
.kh-menu-dialog .kh-nav-list{display:flex;flex-direction:column;align-items:stretch;gap:18px}
.kh-menu-dialog .kh-nav-link{justify-content:flex-start;width:auto;height:auto;min-height:48px;gap:20px}
.kh-menu-dialog .kh-tip{position:static;transform:none;opacity:1;background:none;color:inherit;padding:0;white-space:normal;font-size:clamp(18px,5.5vw,24px);line-height:1.4;letter-spacing:.06em}
/* Menu mobile (Alain, 2026-10-07) : les cinq mondes repliés sous La Boutique, alignés sur les libellés ; la flèche vers le
   bas en bout de ligne les déroule, vers le haut les replie (Alain, 2026-10-09, à la place de « + » et « − » ;
   header.js) ; « Toute la boutique » en dernier. */
.kh-menu-dialog .has-subnav{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.kh-menu-dialog .has-subnav>.kh-subnav{grid-column:1/-1}
.kh-menu-dialog .kh-subnav{display:none;position:static;min-width:0;margin:.25rem 0 0 48px;padding:0;border:0;background:none;box-shadow:none;transform:none;opacity:1;visibility:visible;pointer-events:auto}
.kh-menu-dialog .has-subnav.is-expanded>.kh-subnav{display:block}
.kh-subnav-toggle{display:none}
.kh-menu-dialog .kh-subnav-toggle{display:block;position:relative;width:48px;height:48px;margin:0;padding:0;border:0;background:none!important;color:#1a1410!important;cursor:pointer}
.kh-menu-dialog .kh-subnav-toggle::before{content:"";position:absolute;inset:0;margin:auto;width:10px;height:10px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-3px) rotate(45deg);transition:transform 200ms ease}
.kh-menu-dialog .kh-subnav-toggle[aria-expanded="true"]::before{transform:translateY(3px) rotate(-135deg)}
.kh-menu-dialog .kh-subnav-toggle:focus-visible{outline:2px solid #c8311a;outline-offset:2px}
.kh-menu-dialog .kh-subnav a{justify-content:flex-start;align-items:center;gap:.9rem;min-height:40px;padding:.2rem 0}
.kh-menu-dialog .kh-subnav__name{font-size:1.25rem}
.kh-menu-dialog .kh-subnav__all{margin-top:.35rem;border-top:0}
/* « Toute la boutique » aussi dans le menu mobile, sous les cinq mondes (Alain, 2026-10-07). */
.kh-menu-dialog .kh-subnav__all a{gap:.5rem;padding-top:.6rem;font:400 12px/1.2 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase}
/* The section just chosen, while the next page loads (header.js; Alain, 2026-10-14). */
.kh-menu-dialog a.is-chosen{color:var(--kh-header-accent,#c8311a)}
.kh-menu-dialog .kh-header-actions{margin-top:36px;flex-wrap:wrap;gap:16px}
.kh-menu-dialog .kh-action{width:auto;height:auto;min-height:48px;padding:12px 16px;gap:12px;background:transparent;color:#1a1410;border:1px solid #1a141030}
/* Comme sur ordinateur (Alain, 2026-10-05) : compte au trait ; panier vermillon seulement s'il contient un article. */
.kh-menu-dialog .kh-cart-mobile.is-filled{background:#c8311a;color:#fffdfc;border-color:transparent}
.kh-menu-dialog .kh-cart-mobile:not(.is-filled) .kh-cart-count{display:none}
.kh-menu-dialog .kh-action .kh-tip{font-size:14px}
.kh-menu-dialog .kh-header-languages{width:100%;font-size:16px}
.kh-menu-dialog .kh-header-languages a{min-width:48px;min-height:48px}
@media(min-width:768px){.kh-menu-dialog{padding:48px max(24px,calc(50vw - 15rem))}}
/* Progressive enhancement: all links remain usable if JS fails. */
.kh-header:not(.is-ready) .kh-header-home{position:relative;height:90px}
.kh-header:not(.is-ready){position:relative;height:auto;padding-bottom:18px}
.kh-header:not(.is-ready) .kh-header-center{position:relative;inset:auto;transform:none;margin:auto;flex-wrap:wrap;justify-content:center}
.kh-header:not(.is-ready)+.kh-header-spacer{display:none}
.kh-header:not(.is-ready) .kh-header-utility{position:relative;inset:auto;justify-content:center;padding-top:10px}
.kh-header.is-ready:not(.is-compact) .kh-header-center{opacity:0;pointer-events:none;transition:opacity 700ms linear}
/* Ouverture à la souris (Alain, 2026-10-08) : seuls le torii, « Menu » et les deux cloisons ouvrent les shoji
   (header.js : .is-hover-open) ; le reste du bandeau, qui appartient au lien du logo, ne les ouvre plus. Les cloisons
   reçoivent donc le pointeur. Le clavier ouvre toujours par le focus. */
.kh-header.is-ready:not(.is-compact) :is(.kh-word-left,.kh-word-right){pointer-events:auto}
/* Clic (Alain, 2026-10-08) : seul le logo ramène à l'accueil, pas le vide du bandeau. Grand écran : le lien couvre tout
   le bandeau pour centrer le logo, il laisse donc passer le pointeur et seules les cloisons (et les mots) le reçoivent.
   Version compacte : le lien n'a déjà que la largeur du logo ; mobile : plus bas. */
.kh-header.is-ready:not(.is-compact) .kh-header-home{pointer-events:none}
/* Échap (revue du 2026-10-24) : .is-dismissed (header.js) referme les shoji ouverts au survol ou au clavier, même si le
   focus reste sur « Menu » ; le prochain focus ou la sortie du pointeur les rend de nouveau ouvrables. */
.kh-header.is-ready:not(.is-compact):not(.is-dismissed):is(:has(.kh-header-home:focus-visible,.kh-header-center:focus-within,.kh-shoji-hint:focus-visible),.header-onboarding,.is-open,.is-hover-open) .kh-word-left{transform:translateX(var(--kh-pan-left))}
.kh-header.is-ready:not(.is-compact):not(.is-dismissed):is(:has(.kh-header-home:focus-visible,.kh-header-center:focus-within,.kh-shoji-hint:focus-visible),.header-onboarding,.is-open,.is-hover-open) .kh-word-right{transform:translateX(var(--kh-pan-right))}
.kh-header.is-ready:not(.is-compact):not(.is-dismissed):is(:has(.kh-header-home:focus-visible,.kh-header-center:focus-within,.kh-shoji-hint:focus-visible),.header-onboarding,.is-open,.is-hover-open) .kh-header-center{opacity:1;pointer-events:auto}
.kh-header.is-ready:not(.is-compact).header-onboarding .kh-header-center{pointer-events:none}
/* Version compacte (téléphone, tablette, écran trop étroit pour le menu ; Alain, 2026-10-09 : « le même sur iPad ») :
   le header du téléphone. Le torii et « Menu » à gauche ouvrent le menu en shoji, le logo seul au centre, compte,
   panier et FR/EN à droite (le téléphone ne garde que le panier, plus bas). */
.kh-header.is-compact .kh-header-home{inset:0 auto;left:50%;transform:translateX(-50%);width:max-content;padding:0 12px}
.kh-header.is-compact .kh-wordmark{font-size:32px}
/* iPad et portables (Alain, 2026-10-09, « sur l'iPad, le logo doit être plus grand ») : 40 px à 768 px de large, 52 px
   dès 945 px, près des 54 px de l'ordinateur ; 36 à 42 px une fois la barre réduite. */
@media(min-width:768px){
  .kh-header.is-compact{--kh-compact-logo:clamp(40px,5.5vw,52px)}
  .kh-header.is-compact.is-scrolled{--kh-compact-logo:clamp(36px,4.4vw,42px)}
  .kh-header.is-compact .kh-wordmark{font-size:var(--kh-compact-logo)}
}
/* Caché sans quitter la mise en page : header.js mesure ses libellés pour choisir la version. */
.kh-header.is-ready.is-compact .kh-header-center{left:auto;right:calc(clamp(16px,2.5vw,40px) + var(--kh-utility-w,0px) + 18px);transform:none;visibility:hidden;pointer-events:none}
.kh-header.is-ready.is-compact .kh-menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:absolute;left:8px;top:50%;transform:translateY(-50%);min-width:48px;height:52px;padding:0 3px;background:none;border:0;color:rgb(26 20 16 / .72);font:400 12px/1 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;z-index:3}
.kh-header.is-ready.is-compact .kh-menu-toggle svg{width:28px;height:28px;color:var(--kh-header-accent)}
.kh-header.is-ready.is-compact .kh-menu-toggle span{display:block;line-height:1}
@media(min-width:768px){.kh-header.is-ready.is-compact .kh-menu-toggle{left:clamp(16px,2.5vw,40px)}}
.kh-header.is-compact .kh-header-actions{gap:18px}
.kh-header.is-compact .kh-action{width:44px;height:44px}
/* Libellés sous les icônes (Alain, 2026-10-06) : quand le menu s'ouvre, chaque rubrique s'écrit en toutes lettres sous
   son icône (même police que l'infobulle, d'où une largeur mesurable dans header.js). */
.kh-header.is-ready:not(.is-compact){--kh-nav-item-h:54px}
.kh-header.is-ready:not(.is-compact) .kh-nav-link{flex-direction:column;gap:7px;width:auto;min-width:44px;height:var(--kh-nav-item-h);padding:0 2px}
.kh-header.is-ready:not(.is-compact) .kh-nav-link svg{width:24px;height:24px}
.kh-header.is-ready:not(.is-compact) .kh-nav-link>.kh-tip{position:static;transform:none;opacity:1;padding:0;background:none;color:inherit}
/* Shoji (Alain, 2026-10-06) : chaque mot du logo est porté par un battant de cloison coulissante : cadre de bois,
   croisillons kumiko (montants tous les 46 px, traverses au tiers de la hauteur), papier washi lumineux. Au repos, les
   deux battants se rejoignent derrière le logo ; ils coulissent avec les mots et découvrent le menu. Grand écran
   seulement (hors version compacte) ; largeur d'un battant calculée dans header.js (--kh-shoji-w).
   1.5.5 (Alain : « plus dessiné », puis « le plus clair possible », montant central simple) : bois clair, un seul montant
   central (3 px de chaque battant, le droit recouvre le gauche d'1 px : pas de filet entre les deux), papier texturé. */
/* Shoji en seigaiha (Alain, 2026-10-23, essai B parmi trois : « affiner le shoji, des motifs très légers en fond des
   deux battants, un cadre plus réaliste ») : bois clair veiné dans le sens de chaque pièce, filet d'ombre à l'intérieur
   du cadre (le papier est en retrait), croisillons fins de 1,5 px, vagues seigaiha en filigrane dans le papier washi.
   Tout en CSS (aucune image de plus). Variables communes à la barre et aux portes du menu mobile. */
.kh-header,.kh-menu-dialog{--kh-shoji-bar:rgb(196 173 140 / .85);--kh-shoji-shade:rgb(140 110 76 / .38);
  --kh-wood-v:repeating-linear-gradient(90deg,rgb(222 205 178) 0 1.6px,rgb(207 186 154) 1.6px 2.2px,rgb(222 205 178) 2.2px 4.1px,rgb(214 195 165) 4.1px 4.6px,rgb(222 205 178) 4.6px 6.3px,rgb(207 186 154) 6.3px 6.8px);
  --kh-wood-h:repeating-linear-gradient(0deg,rgb(222 205 178) 0 1.4px,rgb(214 195 165) 1.4px 1.9px,rgb(222 205 178) 1.9px 3.3px,rgb(207 186 154) 3.3px 3.8px);
  --kh-shoji-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cg stroke='%23b8986a' stroke-opacity='.2' stroke-width='.6'%3E%3Ccircle cx='0' cy='0' r='12' fill='%23fbf7ee'/%3E%3Ccircle cx='0' cy='0' r='12' fill='none'/%3E%3Ccircle cx='0' cy='0' r='8' fill='none'/%3E%3Ccircle cx='0' cy='0' r='4' fill='none'/%3E%3Ccircle cx='24' cy='0' r='12' fill='%23fbf7ee'/%3E%3Ccircle cx='24' cy='0' r='12' fill='none'/%3E%3Ccircle cx='24' cy='0' r='8' fill='none'/%3E%3Ccircle cx='24' cy='0' r='4' fill='none'/%3E%3Ccircle cx='12' cy='6' r='12' fill='%23fbf7ee'/%3E%3Ccircle cx='12' cy='6' r='12' fill='none'/%3E%3Ccircle cx='12' cy='6' r='8' fill='none'/%3E%3Ccircle cx='12' cy='6' r='4' fill='none'/%3E%3Ccircle cx='0' cy='12' r='12' fill='%23fbf7ee'/%3E%3Ccircle cx='0' cy='12' r='12' fill='none'/%3E%3Ccircle cx='0' cy='12' r='8' fill='none'/%3E%3Ccircle cx='0' cy='12' r='4' fill='none'/%3E%3Ccircle cx='24' cy='12' r='12' fill='%23fbf7ee'/%3E%3Ccircle cx='24' cy='12' r='12' fill='none'/%3E%3Ccircle cx='24' cy='12' r='8' fill='none'/%3E%3Ccircle cx='24' cy='12' r='4' fill='none'/%3E%3C/g%3E%3C/svg%3E")}
.kh-header.is-ready:not(.is-compact) :is(.kh-word-left,.kh-word-right){position:relative}
.kh-header.is-ready:not(.is-compact) :is(.kh-word-left,.kh-word-right)::before{
  content:"";position:absolute;top:50%;z-index:-1;width:var(--kh-shoji-w,0px);height:var(--kh-header-h);transform:translateY(-50%);
  transition:height 400ms ease,transform 400ms ease}
/* Montants extérieurs 6 px, traverses haute 6 px et basse 8 px ; montant central 9 + 9 px, tous peints en fond (veinage) avec, sur chaque battant, une encoche marron (hikite) de 5 × 18 px,
   à mi-hauteur, contre la jointure (Alain, 2026-10-19, d'après une photo de shoji : encoches réduites, marron plutôt
   que noires, montant affiné pour les rapprocher). Couches : encoche (creux, bord), montants, traverses, filets d'ombre, croisillons, vagues, papier. */
.kh-header.is-ready:not(.is-compact) .kh-word-left::before{right:0;background:
  linear-gradient(rgb(101 70 44),rgb(101 70 44)) right 3.5px center / 2px 14px no-repeat,
  linear-gradient(rgb(150 112 76),rgb(150 112 76)) right 2px center / 5px 18px no-repeat,
  var(--kh-wood-v) right 0 top 0 / 9px 100% no-repeat,
  var(--kh-wood-v) left 0 top 0 / 6px 100% no-repeat,
  var(--kh-wood-h) 0 0 / 100% 6px no-repeat,
  var(--kh-wood-h) 0 100% / 100% 8px no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) 0 6px / 100% 1px no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) 0 calc(100% - 8px) / 100% 1px no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) left 6px top 0 / 1px 100% no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) right 9px top 0 / 1px 100% no-repeat,
  linear-gradient(90deg,var(--kh-shoji-bar) 0 1.5px,transparent 1.5px) 39px 0 / 40px 100% repeat-x,
  linear-gradient(0deg,var(--kh-shoji-bar) 0 1.5px,transparent 1.5px) 0 5px / 100% calc((var(--kh-header-h) - 14px) / 4) repeat-y,
  var(--kh-shoji-motif) 0 0 / 24px 12px repeat,
  linear-gradient(rgb(253 250 244 / .66),rgb(253 250 244 / .66)),
    url('../images/texture-washi-v2.webp') center / 320px auto,
    #fdfaf4}
.kh-header.is-ready:not(.is-compact) .kh-word-right::before{left:-1px;background:
  linear-gradient(rgb(101 70 44),rgb(101 70 44)) left 3.5px center / 2px 14px no-repeat,
  linear-gradient(rgb(150 112 76),rgb(150 112 76)) left 2px center / 5px 18px no-repeat,
  var(--kh-wood-v) left 0 top 0 / 9px 100% no-repeat,
  var(--kh-wood-v) right 0 top 0 / 6px 100% no-repeat,
  var(--kh-wood-h) 0 0 / 100% 6px no-repeat,
  var(--kh-wood-h) 0 100% / 100% 8px no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) 0 6px / 100% 1px no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) 0 calc(100% - 8px) / 100% 1px no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) right 6px top 0 / 1px 100% no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) left 9px top 0 / 1px 100% no-repeat,
  linear-gradient(90deg,var(--kh-shoji-bar) 0 1.5px,transparent 1.5px) 39px 0 / 40px 100% repeat-x,
  linear-gradient(0deg,var(--kh-shoji-bar) 0 1.5px,transparent 1.5px) 0 5px / 100% calc((var(--kh-header-h) - 14px) / 4) repeat-y,
  var(--kh-shoji-motif) 0 0 / 24px 12px repeat,
  linear-gradient(rgb(253 250 244 / .66),rgb(253 250 244 / .66)),
    url('../images/texture-washi-v2.webp') center / 320px auto,
    #fdfaf4}
/* Invitation « Menu » (Alain, 2026-10-06) : à gauche, un torii au trait et le mot
   Menu ; elle ouvre les battants au survol, au clavier ou au clic (header.js : .is-open) et s'efface quand ils s'ouvrent. */
.kh-shoji-hint{position:absolute;left:clamp(16px,2.5vw,40px);top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:flex-end;gap:10px;margin:0;padding:12px 4px;background:none;border:0;color:rgb(26 20 16 / .72);font:400 12px/1 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:opacity 400ms ease}
/* « MENU » à la taille de FR et EN (Alain, 2026-10-19). Sans .kh-header devant, « .kh-page button » (kh-charte-v3.css)
   l'emportait et donnait au mot les 17 px du texte courant. */
.kh-header .kh-shoji-hint{font-size:12px}
.kh-header .kh-shoji-hint svg{width:32px;height:32px;color:var(--kh-header-accent)} /* torii au trait, vermillon comme au Japon (Alain, 2026-10-06) */
/* « Menu » posé au pied du torii (Alain) : bas des boîtes alignés et hauteur de ligne 1, la ligne de base tombe au bas
   des piliers (y 21,75 sur 24 du dessin), quelle que soit la hauteur de ligne héritée. */
.kh-header .kh-shoji-hint span{display:block;line-height:1}
.kh-header.is-ready:not(.is-compact):not(.is-dismissed):is(:has(.kh-header-home:focus-visible,.kh-header-center:focus-within),.header-onboarding,.is-open,.is-hover-open) .kh-shoji-hint{opacity:0}
.kh-header.is-compact .kh-shoji-hint,.kh-header:not(.is-ready) .kh-shoji-hint{display:none}
@media(max-width:767px){
  .kh-header.is-ready .kh-header-center{display:none}
  /* Téléphone : seul le panier reste dans la barre, à droite ; compte et langues sont dans le menu. */
  .kh-header.is-ready .kh-header-utility{right:10px;left:auto}
  .kh-header.is-ready .kh-header-utility .kh-header-actions>:not(.kh-cart-desktop){display:none}
  .kh-header.is-ready .kh-header-utility .kh-action{width:44px;height:44px}
  /* Bas du panier aligné sur le bas du torii (Alain, 2026-10-09) : le torii (34 px) est remonté par le mot « Menu »
     au-dessous de lui, le panier (32 px) est centré ; écart mesuré 6,9 px. */
  .kh-header.is-ready .kh-header-utility .kh-cart-desktop{transform:translateY(-7px)}
  /* Torii et logo plus grands (Alain, 2026-10-09, « pour l'esthétique sur mobile », puis « le logo est petit sur
     mobile ») : le logo prend la place laissée entre le torii et le panier, à 15 px de chacun (le mot mesure 6,47 fois
     sa taille de police) ; 29 px au plus petit (320 px), 38 px à 390 px, 44 px au plus. */
  .kh-header.is-ready.is-compact .kh-menu-toggle svg{width:34px;height:34px}
  .kh-header.is-ready{--kh-phone-logo:clamp(29px,calc((100vw - 142px) / 6.47),44px)}
  .kh-header.is-ready .kh-wordmark{font-size:var(--kh-phone-logo);transform:translateY(-7px)} /* sur la ligne du torii et du panier (Alain, 2026-10-19) */
  .kh-header:not(.is-ready) .kh-nav-list{gap:8px;flex-wrap:wrap;justify-content:center}
}
/* Menu mobile en shoji (Alain, 2026-10-09) : à l'ouverture, deux cloisons de papier portant le logo couvrent l'écran,
   puis coulissent vers les côtés et découvrent le menu ; à la fermeture, elles se referment avant de disparaître.
   Jointure, hauteur et taille des mots relevées sur le logo de la barre (header.js : --kh-seam, --kh-word-*). */
.kh-menu-dialog .kh-door{position:fixed;top:0;bottom:0;z-index:5;pointer-events:none;background:#fdfaf4;
  transition:transform 560ms cubic-bezier(.65,0,.35,1)}
/* Même montant central à encoches que la barre (Alain, 2026-10-19), à l'échelle de la porte : 14 px par porte, encoches
   7 × 36 px à mi-hauteur, à 4 px de la jointure (Alain : montant un peu plus large, encoches plus séparées).
   Sur les portes, « Koinobori » et « House » s'écartent du montant comme sur la barre du grand écran (Alain : « uniquement
   quand tu ouvres le menu ») ; la barre du téléphone, menu fermé, garde le logo serré. */
.kh-menu-dialog .kh-door--left{left:0;width:calc(var(--kh-seam,50%) + 2px);background:
  linear-gradient(rgb(101 70 44),rgb(101 70 44)) right 6px center / 3px 30px no-repeat,
  linear-gradient(rgb(150 112 76),rgb(150 112 76)) right 4px center / 7px 36px no-repeat,
  var(--kh-wood-v) right 0 top 0 / 14px 100% no-repeat,
  var(--kh-wood-v) left 0 top 0 / 5px 100% no-repeat,
  var(--kh-wood-h) 0 0 / 100% 6px no-repeat,
  var(--kh-wood-h) 0 100% / 100% 6px no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) 0 6px / 100% 1px no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) 0 calc(100% - 6px) / 100% 1px no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) left 5px top 0 / 1px 100% no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) right 14px top 0 / 1px 100% no-repeat,
  linear-gradient(90deg,var(--kh-shoji-bar) 0 1.5px,transparent 1.5px) 0 0 / 46px 100% repeat-x,
  linear-gradient(0deg,var(--kh-shoji-bar) 0 1.5px,transparent 1.5px) 0 0 / 100% 72px repeat-y,
  var(--kh-shoji-motif) 0 0 / 24px 12px repeat,
  linear-gradient(rgb(253 250 244 / .66),rgb(253 250 244 / .66)),
    url('../images/texture-washi-v2.webp') center / 320px auto,
    #fdfaf4}
.kh-menu-dialog .kh-door--right{left:var(--kh-seam,50%);right:0;background:
  linear-gradient(rgb(101 70 44),rgb(101 70 44)) left 6px center / 3px 30px no-repeat,
  linear-gradient(rgb(150 112 76),rgb(150 112 76)) left 4px center / 7px 36px no-repeat,
  var(--kh-wood-v) left 0 top 0 / 14px 100% no-repeat,
  var(--kh-wood-v) right 0 top 0 / 5px 100% no-repeat,
  var(--kh-wood-h) 0 0 / 100% 6px no-repeat,
  var(--kh-wood-h) 0 100% / 100% 6px no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) 0 6px / 100% 1px no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) 0 calc(100% - 6px) / 100% 1px no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) right 5px top 0 / 1px 100% no-repeat,
  linear-gradient(var(--kh-shoji-shade),var(--kh-shoji-shade)) left 14px top 0 / 1px 100% no-repeat,
  linear-gradient(90deg,var(--kh-shoji-bar) 0 1.5px,transparent 1.5px) 0 0 / 46px 100% repeat-x,
  linear-gradient(0deg,var(--kh-shoji-bar) 0 1.5px,transparent 1.5px) 0 0 / 100% 72px repeat-y,
  var(--kh-shoji-motif) 0 0 / 24px 12px repeat,
  linear-gradient(rgb(253 250 244 / .66),rgb(253 250 244 / .66)),
    url('../images/texture-washi-v2.webp') center / 320px auto,
    #fdfaf4}
.kh-menu-dialog .kh-door span{position:absolute;top:var(--kh-word-top,34px);color:#1a1410;font:400 var(--kh-word-size,32px)/1 'Cormorant Garamond',serif;letter-spacing:-.025em;white-space:nowrap}
.kh-menu-dialog .kh-door--left span{right:calc(.52em + 2px)} /* + les 2 px dont la cloison dépasse la jointure */
.kh-menu-dialog .kh-door--right span{left:.44em} /* mots écartés du montant sur les portes seulement (Alain, 2026-10-19) */
.kh-menu-dialog.is-doors-open .kh-door--left{transform:translateX(-101%)}
.kh-menu-dialog.is-doors-open .kh-door--right{transform:translateX(101%)}
.kh-menu-dialog>:not(.kh-door){transition:opacity 300ms ease 200ms}
.kh-menu-dialog:not(.is-doors-open)>:not(.kh-door){opacity:0}
@media(prefers-reduced-motion:reduce){
  .kh-header,.kh-header *,.kh-menu-dialog,.kh-menu-dialog *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .kh-menu-dialog .kh-door{display:none}
  .kh-menu-dialog:not(.is-doors-open)>:not(.kh-door){opacity:1}
}