/*
██████▄░██████░▄██████░██████░████████░▄████▄░██░░░░░░░▄████▄░██████░█████▄░░░▄██▄▄██▄░▄█████░██████▄░██████░▄████▄
██░░░██░░░██░░░██░░░░░░░██░░░░░░██░░░░██░░██░██░░░░░░░██░░██░░░██░░░██░░██░░░██░██░██░██░░░░░██░░░██░░░██░░░██░░██
██░░░██░░░██░░░██░░███░░░██░░░░░░██░░░░██░░██░██░░░░░░░██░░██░░░██░░░█████▀░░░██░██░██░█████░░██░░░██░░░██░░░██░░██
██░░░██░░░██░░░██░░░██░░░██░░░░░░██░░░░██████░██░░░░░░░██████░░░██░░░██░░██░░░██░██░██░██░░░░░██░░░██░░░██░░░██████
██████▀░██████░▀█████▀░██████░░░░██░░░░██░░██░██████░░░██░░██░██████░██░░██░░░██░██░██░▀█████░██████▀░██████░██░░██
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
:root {
  --sumi: #08080a;            
  --sumi-2: #0e0e12;
  --sumi-3: #16161c;
  --lacquer: #12100f;         
  --washi: #f0ebe1;           
  --ink-dim: #b2aa9c;
  --ink-faint: #777064;
  --kin: #c9a962;             
  --kin-light: #ecd9a8;
  --kin-deep: #8a6d33;
  --shu: #a8372a;             
  --line: rgba(201, 169, 98, 0.18);
  --line-soft: rgba(240, 235, 225, 0.07);
  --radius: 2px;              
  --font-display: "Shippori Mincho", "Noto Serif JP", Georgia, serif;
  --font-body: "Outfit", "Noto Sans JP", "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ink: cubic-bezier(0.16, 0.84, 0.24, 1);
  --glow: 0 0 60px rgba(201, 169, 98, 0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--sumi);
  color: var(--washi);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--kin); color: var(--sumi); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--sumi); }
.ambient::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 78% -12%, rgba(201, 169, 98, 0.10), transparent 62%),
    radial-gradient(ellipse 60% 45% at 10% 108%, rgba(138, 109, 51, 0.09), transparent 62%);
}
.ambient::after {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.038; animation: grain 12s steps(5) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.2%, 0.8%); }
  50% { transform: translate(0.8%, -1.2%); }
  75% { transform: translate(-0.8%, -0.4%); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient::after { animation: none; }
}
@media (max-width: 900px), (hover: none) {
  .ambient::after { display: none; }
}

.tex-asanoha {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='104' viewBox='0 0 60 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c9a962' stroke-width='1'%3E%3Cpath d='M30 0v52M30 52v52M0 26l30 26 30-26M0 78l30-26 30 26M0 0l30 26M60 0L30 26M0 104l30-26M60 104L30 78M0 26v52M60 26v52'/%3E%3C/g%3E%3C/svg%3E");
}
.tex-seigaiha {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='40' viewBox='0 0 80 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c9a962' stroke-width='1'%3E%3Cpath d='M0 40a40 40 0 0 1 80 0M0 40a30 30 0 0 1 80 0M0 40a20 20 0 0 1 80 0M0 40a10 10 0 0 1 80 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 40px;
}

.spotlight {
  position: fixed; width: 520px; height: 520px; border-radius: 50%;
  pointer-events: none; z-index: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201, 169, 98, 0.09), transparent 62%);
  mix-blend-mode: screen; transition: opacity 0.6s;
}
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 150; }
.cursor-dot { width: 5px; height: 5px; background: var(--kin-light); border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-ring {
  width: 34px; height: 34px; border: 1px solid rgba(201, 169, 98, 0.5);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: width 0.3s var(--ease), height 0.3s var(--ease), border-color 0.3s, border-radius 0.3s;
}
.cursor-ring.hovering { width: 62px; height: 62px; border-color: var(--kin-light); border-radius: 50%; }
@media (hover: none), (max-width: 900px) { .cursor-dot, .cursor-ring, .spotlight { display: none; } }

#preloader {
  position: fixed; inset: 0; z-index: 200; background: var(--sumi);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: opacity 1s var(--ease), visibility 1s;
}
#preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.deja-entre #preloader { display: none; }
#preloader.abrege { transition-duration: 0.25s; }
#preloader .pre-coeur {
  position: relative; width: min(66vw, 260px); aspect-ratio: 1;
  display: grid; place-items: center;
}
#preloader .pre-enso { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#preloader .pre-enso-trait {
  fill: none; stroke: url(#prl-or); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 640; stroke-dashoffset: 640;
  filter: url(#prl-rugueux);
}
@keyframes pre-enso { to { stroke-dashoffset: 40; } }
#preloader .kanji-write { width: 168px; height: 168px; overflow: visible; }
#preloader .kanji-write path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 9px rgba(201, 169, 98, 0.35));
}
#preloader .pre-seal {
  width: 46px; height: 46px; margin-top: -14px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.35rem; line-height: 1;
  color: var(--shu); border: 2px solid var(--shu); background: rgba(168, 55, 42, 0.12);
  transform: scale(2.6) rotate(-20deg); opacity: 0;
  transition: transform 0.42s cubic-bezier(0.2, 1.7, 0.4, 1), opacity 0.26s;
}
#preloader .pre-seal.stamped { transform: scale(1) rotate(-8deg); opacity: 1; }
#preloader .mark { font-size: 0.62rem; letter-spacing: 0.62em; text-transform: uppercase; color: var(--ink-faint); }
#preloader .bar { width: 140px; height: 1px; background: var(--line-soft); overflow: hidden; }
#preloader .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--kin-deep), var(--kin-light)); transition: width 0.3s; }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background:
    radial-gradient(55% 170% at 50% 100%, rgba(201, 169, 98, 0.065), transparent 62%),
    linear-gradient(180deg, #030303 0%, #070706 100%);
  transition: box-shadow 0.6s;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--kin-deep) 18%, var(--kin-light) 50%, var(--kin-deep) 82%, transparent);
  transition: transform 1.6s var(--ease-ink), opacity 0.3s;
}
.attente-seuil .site-header::after { transform: scaleX(0); }
.site-header.scrolled { box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.95); }
.header-inner { max-width: 1360px; margin: 0 auto; padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: flex; align-items: center; gap: 14px; }
.logo .seal-mini {
  width: 34px; height: 34px; border: 1px solid var(--kin); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--kin-light); flex-shrink: 0;
  transition: 0.5s var(--ease);
}
.logo:hover .seal-mini { background: var(--kin); color: var(--sumi); }
.logo .wordmark { display: flex; flex-direction: column; line-height: 1.2; }
.logo .word { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: 0.3em; text-transform: uppercase; }
.logo .sub { font-size: 0.52rem; letter-spacing: 0.46em; text-transform: uppercase; color: var(--ink-faint); }

.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a {
  font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-dim);
  position: relative; padding: 8px 0; transition: color 0.4s;
  display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 2px; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--kin), transparent); transition: width 0.5s var(--ease);
}
.main-nav a:hover, .main-nav a.active { color: var(--kin-light); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.main-nav .jp { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0; color: var(--ink-faint); }

.main-nav { position: relative; gap: 2px; }
.main-nav::before { content: none; position: absolute; pointer-events: none; }
.main-nav > a, .main-nav > .nav-branche > a { padding: 10px 13px; z-index: 1; }
.main-nav > a::after, .main-nav > .nav-branche > a::after { left: 13px; bottom: 4px; }
.main-nav > a:hover::after, .main-nav > a.active::after,
.main-nav > .nav-branche > a:hover::after, .main-nav > .nav-branche > a.active::after { width: calc(100% - 26px); }
.nav-repere {
  position: absolute; bottom: 4px; left: 0; width: 0; height: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, var(--kin-light), var(--kin));
  transition: transform 0.55s var(--ease), width 0.55s var(--ease), opacity 0.35s;
}
.main-nav.avec-repere .nav-repere.vu { opacity: 1; }
.main-nav.avec-repere > a::after, .main-nav.avec-repere > .nav-branche > a::after { display: none; }
.main-nav > a.nav-cta {
  margin-left: 14px; color: var(--kin-light); border: 1px solid rgba(201, 169, 98, 0.55);
  transition: color 0.4s, background 0.4s, border-color 0.4s;
}
.main-nav > a.nav-cta::after { display: none; }
.main-nav > a.nav-cta .jp { color: var(--kin); transition: color 0.4s; }
.main-nav > a.nav-cta .fleche { font-size: 0.8rem; letter-spacing: 0; transition: transform 0.5s var(--ease); }
.main-nav > a.nav-cta:hover { background: var(--kin); color: var(--sumi); }
.main-nav > a.nav-cta:hover .jp { color: var(--sumi); }
.main-nav > a.nav-cta:hover .fleche { transform: translateX(4px); }
.nav-pied { display: none; }
@media (min-width: 901px) and (max-width: 1180px) {
  .header-inner { padding-left: 24px; padding-right: 24px; gap: 16px; }
  .main-nav > a, .main-nav > .nav-branche > a { padding: 10px 9px; font-size: 0.68rem; letter-spacing: 0.15em; }
  .main-nav > a .jp, .main-nav > .nav-branche > a .jp, .main-nav .fleche { display: none; }
  .main-nav > a.nav-cta { margin-left: 4px; }
}
@media (min-width: 901px) and (max-width: 1020px) {
  .logo .wordmark { display: none; }
}
@media (min-width: 1500px) {
  .main-nav > a, .main-nav > .nav-branche > a { font-size: 0.8rem; letter-spacing: 0.17em; }
  .main-nav > a .jp, .main-nav > .nav-branche > a .jp { font-size: 0.76rem; }
}
@media (min-width: 1181px) and (max-width: 1339px) {
  .main-nav > a, .main-nav > .nav-branche > a { padding: 10px 11px; letter-spacing: 0.19em; }
  .main-nav > a::after, .main-nav > .nav-branche > a::after { left: 11px; }
  .main-nav > a:hover::after, .main-nav > a.active::after,
  .main-nav > .nav-branche > a:hover::after, .main-nav > .nav-branche > a.active::after { width: calc(100% - 22px); }
  .main-nav > a .jp, .main-nav > .nav-branche > a .jp { display: none; }
}

.header-actions { display: flex; align-items: center; gap: 18px; }
.lang-switch {
  position: relative; display: flex; isolation: isolate;
  border: 1px solid rgba(201, 169, 98, 0.45);
  background: linear-gradient(180deg, #15120e, #0b0a08);
  box-shadow: inset 0 1px 0 rgba(236, 217, 168, 0.08);
}
.lang-switch button {
  position: relative; z-index: 1; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-width: 54px; background: none; border: 0; color: var(--ink-faint);
  font-size: 0.66rem; letter-spacing: 0.16em; padding: 7px 12px; transition: color 0.4s;
}
.lang-switch .lang-kj {
  font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0; line-height: 1;
  color: var(--kin); opacity: 0.75; transition: color 0.4s, opacity 0.4s;
}
.lang-switch button:hover { color: var(--kin-light); }
.lang-switch button.active { background: var(--kin); color: var(--sumi); }
.lang-switch button.active .lang-kj { color: var(--sumi); opacity: 0.85; }
@supports selector(:has(a)) {
  .lang-switch::before {
    content: ""; position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px);
    background: linear-gradient(135deg, #f3e2b0, #c9a962 45%, #a8874a);
    box-shadow: 0 0 12px rgba(201, 169, 98, 0.35), inset 0 1px 0 rgba(255, 250, 230, 0.6);
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .lang-switch button.active { background: none; }
  .lang-switch:has(button[data-lang="en"].active)::before { transform: translateX(100%); }
  .lang-switch:has(button[data-lang="en"]:not(.active):hover)::before { transform: translateX(14%); }
  .lang-switch:has(button[data-lang="fr"]:not(.active):hover)::before { transform: translateX(86%); }
  .lang-switch.vers-en::before { transform: translateX(100%) !important; }
  .lang-switch.vers-fr::before { transform: translateX(0) !important; }
  .lang-switch.vers-en button[data-lang="en"], .lang-switch.vers-fr button[data-lang="fr"] { color: var(--sumi); }
  .lang-switch.vers-en button[data-lang="en"] .lang-kj, .lang-switch.vers-fr button[data-lang="fr"] .lang-kj { color: var(--sumi); }
  .lang-switch.vers-en button[data-lang="fr"], .lang-switch.vers-fr button[data-lang="en"] { color: var(--ink-faint); }
  .lang-switch.vers-en button[data-lang="fr"] .lang-kj, .lang-switch.vers-fr button[data-lang="en"] .lang-kj { color: var(--kin); }
}
@media (prefers-reduced-motion: reduce) { .lang-switch::before { transition: none; } }
@media (hover: none) and (min-width: 901px) {
  .lang-switch button { padding-top: 13px; padding-bottom: 13px; touch-action: manipulation; }
}
@media (max-width: 640px) {
  .header-actions { gap: 12px; }
  .header-actions .lang-switch button { min-width: 0; gap: 5px; padding: 13px 10px; }
}
@media (max-width: 380px) {
  .header-actions { gap: 10px; }
  .header-actions .lang-switch button { gap: 4px; padding: 13px 8px; }
}
@media (max-width: 340px) { .header-actions .lang-switch .lang-kj { display: none; } }
.burger { display: none; background: none; border: 0; width: 32px; height: 24px; position: relative; }
.burger span { position: absolute; left: 0; width: 100%; height: 1px; background: var(--kin-light); transition: 0.5s var(--ease); }
.burger span:nth-child(1) { top: 3px; } .burger span:nth-child(2) { top: 12px; } .burger span:nth-child(3) { top: 21px; }
body.nav-open .burger span:nth-child(1) { top: 12px; transform: rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { top: 12px; transform: rotate(-45deg); }

.nav-branche { position: relative; display: inline-flex; }
.mega { display: none; }

@media (min-width: 901px) {
  .mega {
    position: fixed; left: 0; right: 0; top: var(--mega-haut, 85.67px); z-index: 1;
    color: var(--washi); font-size: 1rem; line-height: 1.6; letter-spacing: 0; text-transform: none; text-align: left;
    opacity: 0;
    transition: opacity 0.24s var(--ease), display 0.24s allow-discrete;
  }
  .nav-mega:hover > .mega,
  .nav-mega:focus-within > .mega { display: block; opacity: 1; z-index: 2; }
  @starting-style {
    .nav-mega:hover > .mega,
    .nav-mega:focus-within > .mega { opacity: 0; }
  }
  .nav-mega.mega-clos > .mega { display: none; opacity: 0; z-index: 1; }
  .mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; }

  .mega-voile {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--mega-haut, 85.67px); z-index: -1;
    background: radial-gradient(70% 60% at var(--mega-x, 50%) 0%, rgba(3, 3, 4, 0.62), rgba(3, 3, 4, 0.76));
    pointer-events: none;
    animation: mega-voile 0.5s var(--ease) backwards;
  }
  .mega-fond {
    position: relative; overflow: hidden;
    background:
      radial-gradient(38% 150% at var(--mega-x, 50%) 0%, rgba(201, 169, 98, 0.1), transparent 66%),
      linear-gradient(180deg, #0d0b09 0%, #080706 100%);
    border-bottom: 1px solid rgba(201, 169, 98, 0.3);
    box-shadow: 0 36px 70px -30px rgba(0, 0, 0, 0.95);
    animation: mega-derouler 0.5s var(--ease-ink) backwards;
  }
  .mega-jiku {
    position: absolute; left: 0; right: 0; top: 100%; height: 2px; z-index: 3; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, transparent, var(--kin-deep) 12%, var(--kin-light) var(--mega-x, 50%), var(--kin-deep) 88%, transparent);
    box-shadow: 0 0 16px rgba(236, 217, 168, 0.55);
    animation: mega-jiku 0.5s var(--ease-ink) backwards;
  }
  .mega-fil {
    position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--kin-deep) 16%, var(--kin-light) var(--mega-x, 50%), var(--kin-deep) 84%, transparent);
    transform-origin: var(--mega-x, 50%) 50%;
    animation: mega-fil 0.75s var(--ease) backwards;
  }
  .mega-pointe {
    position: absolute; top: -4px; left: var(--mega-x, 50%); z-index: 4; pointer-events: none;
    width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);
    background: var(--kin-light); box-shadow: 0 0 10px rgba(236, 217, 168, 0.8);
    transition: left 0.45s var(--ease);
    animation: mega-pointe 0.45s 0.05s var(--ease) backwards;
  }
  .mega-trame {
    opacity: 0.035;
    -webkit-mask-image: linear-gradient(105deg, #000, transparent 58%);
    mask-image: linear-gradient(105deg, #000, transparent 58%);
  }
  .mega-kj {
    position: absolute; left: -0.06em; bottom: -0.22em; pointer-events: none; user-select: none;
    font-family: var(--font-display); font-size: clamp(11rem, 18vw, 17rem); line-height: 1;
    color: rgba(201, 169, 98, 0.028);
    animation: mega-peindre 1.2s 0.12s var(--ease-ink) backwards;
  }

  .mega-cadre {
    position: relative; z-index: 1; max-width: 1360px; margin: 0 auto;
    padding: 34px 40px 36px;
    display: grid; grid-template-columns: minmax(220px, 0.82fr) 1.2fr 1.1fr; gap: 0 48px; align-items: start;
    max-height: calc(100vh - var(--mega-haut, 85.67px)); overflow-y: auto; overscroll-behavior: contain;
  }
  .mm-leve { animation: mega-leve 0.55s var(--ease) backwards; animation-delay: calc(0.1s + var(--k, 0) * 0.045s); }

  .main-nav .mega a {
    display: block; gap: 0; padding: 0; color: inherit; font-size: inherit; letter-spacing: normal;
    text-transform: none; white-space: normal; transition: none;
  }
  .main-nav .mega a::after { display: none; }

  .mega-intro { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 2px; }
  .mega-sur { display: inline-flex; align-items: center; gap: 12px; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--kin); }
  .mega-sur-kj {
    width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0;
    border: 1px solid rgba(201, 169, 98, 0.55); background: rgba(201, 169, 98, 0.05);
    font-family: var(--font-display); font-size: 1rem; letter-spacing: 0; color: var(--kin-light);
  }
  .mega-titre { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.32; color: var(--washi); text-wrap: balance; }
  .mega-texte { font-size: 0.92rem; line-height: 1.7; color: var(--ink-dim); max-width: 40ch; }
  .main-nav .mega a.mega-tout {
    position: relative; display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 0;
    font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kin-light);
  }
  .main-nav .mega a.mega-tout::after {
    display: block; content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px;
    background: linear-gradient(90deg, var(--kin), transparent);
    transform: scaleX(0.3); transform-origin: left; transition: transform 0.5s var(--ease);
  }
  .main-nav .mega a.mega-tout:is(:hover, :focus-visible)::after { transform: scaleX(1); }
  .mega-fleche { display: inline-block; transition: transform 0.45s var(--ease); }
  .main-nav .mega a:is(:hover, :focus-visible, .choisi) .mega-fleche { transform: translateX(5px); }
  .main-nav .mega a:focus-visible { outline: 1px solid var(--kin); outline-offset: 3px; }

  .mega-txt { display: flex; flex-direction: column; min-width: 0; }
  .mega-txt b {
    font-family: var(--font-display); font-weight: 500; font-size: 1.06rem; line-height: 1.35;
    color: var(--washi); transition: color 0.35s;
  }
  .mega-txt > em { font-style: normal; font-size: 0.82rem; line-height: 1.5; color: var(--ink-dim); margin-top: 3px; transition: color 0.35s; }
  .main-nav .mega a:is(:hover, :focus-visible, .choisi) .mega-txt b { color: var(--kin-light); }
  .main-nav .mega a:is(:hover, :focus-visible, .choisi) .mega-txt > em { color: #d9d2c4; }

  .mega-pieces { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); }
  .main-nav .mega a.mega-piece {
    position: relative; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 16px;
    padding: 9px 14px 9px 10px; border-bottom: 1px solid var(--line-soft);
    transition: background 0.45s var(--ease), padding 0.45s var(--ease);
  }
  .mega-piece::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(180deg, var(--kin-light), var(--kin-deep));
    transform: scaleY(0); transition: transform 0.45s var(--ease);
  }
  .main-nav .mega a.mega-piece:is(:hover, :focus-visible, .choisi) {
    padding-left: 16px; background: linear-gradient(90deg, rgba(201, 169, 98, 0.1), rgba(201, 169, 98, 0) 80%);
  }
  .mega-piece:is(:hover, :focus-visible, .choisi)::before { transform: scaleY(1); }
  .mp-kj {
    width: 38px; height: 38px; display: grid; place-items: center;
    font-family: var(--font-display); font-size: 1.12rem; color: var(--kin);
    border: 1px solid rgba(201, 169, 98, 0.35); background: rgba(201, 169, 98, 0.04);
    transition: color 0.35s, background-color 0.35s, border-color 0.35s, transform 0.45s var(--ease);
  }
  .mega-piece:is(:hover, :focus-visible, .choisi) .mp-kj {
    color: #f6ece0; background-color: var(--shu); border-color: var(--shu); transform: rotate(-4deg);
  }
  .mp-neuf {
    align-self: flex-start; margin-bottom: 3px; padding: 1px 7px;
    font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.6;
    color: #e7b3a3; border: 1px solid rgba(168, 55, 42, 0.7);
  }
  .mega-piece .mega-fleche, .mt-ligne .mega-fleche { color: var(--kin); opacity: 0.5; transition: transform 0.45s var(--ease), opacity 0.35s; }
  .main-nav .mega a:is(:hover, :focus-visible, .choisi) .mega-fleche { opacity: 1; }

  .mega-salle { position: relative; padding-top: 28px; }
  .ms-lampe {
    position: absolute; top: 6px; left: 50%; z-index: 4; width: 44%; height: 9px; transform: translateX(-50%);
    background: linear-gradient(180deg, #e2c98f, #9a7a3d 70%, #5e4a23);
    border-radius: 1px 1px 6px 6px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
  }
  .ms-lampe::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 12px; margin-left: -1px; background: #8a6d33; }
  .ms-lampe::after {
    content: ""; position: absolute; top: 9px; left: -45%; right: -45%; height: 260px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 228, 168, 0.26), rgba(255, 228, 168, 0.07) 55%, transparent 92%);
    clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
    animation: mega-lampe 1.2s 0.2s linear backwards;
  }
  .mega-salle.vacille .ms-lampe::after { animation: mega-vacille 0.55s linear; }
  .ms-cadre {
    position: relative; aspect-ratio: 16 / 10; padding: 9px;
    background: linear-gradient(145deg, #1b1712, #0a0908);
    border: 1px solid rgba(201, 169, 98, 0.38);
    box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  }
  .ms-cadre::before {
    content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
    background:
      linear-gradient(var(--kin), var(--kin)) top left / 18px 2px no-repeat,
      linear-gradient(var(--kin), var(--kin)) top left / 2px 18px no-repeat,
      linear-gradient(var(--kin), var(--kin)) top right / 18px 2px no-repeat,
      linear-gradient(var(--kin), var(--kin)) top right / 2px 18px no-repeat,
      linear-gradient(var(--kin), var(--kin)) bottom left / 18px 2px no-repeat,
      linear-gradient(var(--kin), var(--kin)) bottom left / 2px 18px no-repeat,
      linear-gradient(var(--kin), var(--kin)) bottom right / 18px 2px no-repeat,
      linear-gradient(var(--kin), var(--kin)) bottom right / 2px 18px no-repeat;
  }
  .ms-cadre::after { content: ""; position: absolute; inset: 9px; z-index: 2; pointer-events: none; box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.55); }
  .ms-cadre .mega-vue {
    position: absolute; top: 9px; left: 9px; width: calc(100% - 18px); height: calc(100% - 18px);
    object-fit: cover; object-position: top center; opacity: 0; background: #0b0a08;
  }
  .mega-collection .ms-cadre .mega-vue { object-position: center; }
  .ms-cadre .mega-vue.ancien { opacity: 1; z-index: 0; }
  .ms-cadre .mega-vue.actif {
    opacity: 1; z-index: 1;
    -webkit-mask-image: linear-gradient(270deg, #000 0 40%, transparent 60%);
    mask-image: linear-gradient(270deg, #000 0 40%, transparent 60%);
    -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0; mask-position: 100% 0;
    animation: mega-encre 0.7s var(--ease-ink) backwards;
  }
  .ms-cartel { position: relative; margin-top: 16px; min-height: 2.9em; padding-left: 14px; border-left: 1px solid var(--kin-deep); }
  .mega-vue-cartel { display: none; }
  .mega-vue-cartel.actif { display: flex; flex-direction: column; animation: mega-leve 0.45s var(--ease) backwards; }
  .mega-collection .mega-vue-cartel.actif { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .mega-collection .mega-vue-cartel.actif .ms-k { flex-basis: 100%; }
  .ms-k { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); }
  .ms-v { font-size: 0.92rem; line-height: 1.5; color: var(--washi); }
  .ms-no { font-family: var(--font-display); font-size: 1.1rem; color: var(--kin); }

  .mega-sceaux { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; align-content: start; }
  .main-nav .mega a.mega-sceau {
    position: relative; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 14px;
    padding: 12px; border: 1px solid transparent;
    transition: border-color 0.4s, background-color 0.4s;
  }
  .main-nav .mega a.mega-sceau:is(:hover, :focus-visible, .choisi) { border-color: rgba(201, 169, 98, 0.16); background-color: rgba(201, 169, 98, 0.035); }
  .mc-kj {
    position: relative; width: 48px; height: 48px; display: grid; place-items: center;
    font-family: var(--font-display); font-size: 1.42rem; color: var(--kin);
    border: 1px solid rgba(201, 169, 98, 0.42);
    background: radial-gradient(circle at 30% 25%, rgba(201, 169, 98, 0.09), transparent 70%);
    transition: color 0.3s, background-color 0.3s, border-color 0.3s;
  }
  .mc-kj::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--shu); opacity: 0; pointer-events: none; }
  .mega-sceau:is(:hover, :focus-visible, .choisi) .mc-kj {
    color: #f6ece0; background-color: var(--shu); border-color: var(--shu);
    transform: rotate(-3deg);
    animation: mega-tampon 0.42s var(--ease) backwards;
  }
  .mega-sceau:is(:hover, :focus-visible, .choisi) .mc-kj::after { animation: mega-bave 0.7s 0.12s var(--ease) backwards; }

  .mega-fuda { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 6px; align-items: start; }
  .mt-poutre {
    position: absolute; top: 0; left: -8px; right: -8px; height: 7px;
    background: linear-gradient(180deg, #2b2218, #110e0a);
    border-top: 1px solid rgba(201, 169, 98, 0.6); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.85);
    transform-origin: left center;
    animation: mega-poutre 0.5s 0.06s var(--ease) backwards;
  }
  .main-nav .mega a.mt-plaque {
    position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center;
    margin-top: 30px; padding: 30px 12px 18px;
    transform-origin: 50% -24px;
    animation: mega-fuda 1.05s var(--ease) backwards; animation-delay: calc(0.12s + var(--k, 0) * 0.07s);
    transition: transform 0.5s var(--ease), filter 0.45s;
  }
  .mt-plaque::before, .mt-plaque::after {
    content: ""; position: absolute; z-index: -1;
    clip-path: polygon(50% 0, 100% 16px, 100% 100%, 0 100%, 0 16px);
  }
  .mt-plaque::before { inset: 0; background: linear-gradient(180deg, rgba(236, 217, 168, 0.55), rgba(201, 169, 98, 0.22)); }
  .main-nav .mega a.mt-plaque::after {
    display: block; inset: 1px; width: auto; height: auto; transition: none;
    background: linear-gradient(180deg, #19140e 0%, #0e0c09 70%, #0b0907 100%);
  }
  .main-nav .mega a.mt-plaque:is(:hover, :focus-visible) { transform: translateY(-4px); filter: drop-shadow(0 12px 18px rgba(201, 169, 98, 0.14)); }
  .mt-plaque.vedette { filter: drop-shadow(0 0 14px rgba(201, 169, 98, 0.18)); }
  .mt-plaque.vedette::before { background: linear-gradient(180deg, #f3e2b0, #c9a962 55%, #8a6d33); }
  .main-nav .mega a.mt-plaque.vedette::after { background: linear-gradient(180deg, #221a11 0%, #120f0b 70%, #0d0b08 100%); }
  .mt-cordon {
    position: absolute; top: -30px; left: 50%; width: 2px; height: 30px; margin-left: -1px;
    background: linear-gradient(180deg, var(--kin-deep), #b0473a);
  }
  .mt-cordon::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--shu); }
  .mt-kj { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--kin-light); margin-bottom: 12px; }
  .mt-nom { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.3; color: var(--washi); }
  .mt-tag { font-size: 0.78rem; line-height: 1.4; color: var(--ink-dim); margin-top: 6px; min-height: 2.8em; }
  .mt-prix { display: flex; align-items: baseline; gap: 3px; margin-top: 12px; }
  .mt-num { font-family: var(--font-display); font-size: 1.95rem; line-height: 1; color: var(--kin-light); }
  .mt-cur { font-size: 1rem; color: var(--kin); }
  .mt-per { margin-top: 6px; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
  .mt-badge {
    order: 9; margin-top: 12px; padding: 3px 8px;
    font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: #f6ece0; background: var(--shu);
  }

  .mega-mesure { display: flex; flex-direction: column; }
  .mt-sur-mesure {
    position: relative; padding: 16px 16px 4px;
    background:
      radial-gradient(90% 70% at 0% 0%, rgba(168, 55, 42, 0.14), transparent 62%),
      linear-gradient(170deg, #1a140e, #0e0b08 70%);
    border: 1px solid rgba(201, 169, 98, 0.32);
    box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(201, 169, 98, 0.12);
  }
  .mt-sur-mesure::before {
    content: ""; position: absolute; inset: -1px; pointer-events: none;
    background:
      linear-gradient(var(--kin), var(--kin)) top left / 16px 2px no-repeat,
      linear-gradient(var(--kin), var(--kin)) top left / 2px 16px no-repeat,
      linear-gradient(var(--kin), var(--kin)) top right / 16px 2px no-repeat,
      linear-gradient(var(--kin), var(--kin)) top right / 2px 16px no-repeat,
      linear-gradient(var(--kin), var(--kin)) bottom left / 16px 2px no-repeat,
      linear-gradient(var(--kin), var(--kin)) bottom left / 2px 16px no-repeat,
      linear-gradient(var(--kin), var(--kin)) bottom right / 16px 2px no-repeat,
      linear-gradient(var(--kin), var(--kin)) bottom right / 2px 16px no-repeat;
  }
  .mt-sm-tete { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(201, 169, 98, 0.22); }
  .mt-sm-sceau {
    width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center;
    font-family: var(--font-display); font-size: 1.2rem; line-height: 1; color: #f6ece0;
    background: var(--shu); transform: rotate(-3deg);
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.8);
    animation: mega-tampon 0.45s 0.32s var(--ease) backwards;
  }
  .mt-sm-titres { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .mt-sm-titre { font-family: var(--font-display); font-weight: 500; font-size: 1.22rem; line-height: 1.25; color: var(--washi); }
  .mt-sm-glose { font-size: 0.82rem; line-height: 1.45; color: var(--ink-dim); }
  .main-nav .mega .mt-sur-mesure a.mt-ligne:last-child { border-bottom: 0; }
  .mt-sur-mesure .mt-ligne-kj { border-color: rgba(201, 169, 98, 0.5); background: rgba(201, 169, 98, 0.05); }
  .mt-sur-mesure .mt-ligne-prix { font-family: var(--font-display); font-size: 0.98rem; color: var(--kin-light); }
  .main-nav .mega a.mt-ligne {
    display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px;
    padding: 12px 8px 12px 4px; border-bottom: 1px solid var(--line-soft);
    transition: background 0.45s var(--ease), padding 0.45s var(--ease);
  }
  .main-nav .mega a.mt-ligne:is(:hover, :focus-visible) { padding-left: 10px; background: linear-gradient(90deg, rgba(201, 169, 98, 0.09), transparent 80%); }
  .mt-ligne-kj {
    width: 34px; height: 34px; display: grid; place-items: center;
    font-family: var(--font-display); font-size: 1.15rem; color: var(--kin);
    border: 1px solid rgba(201, 169, 98, 0.32); transition: color 0.35s, border-color 0.35s, background-color 0.35s;
  }
  .mt-ligne:is(:hover, :focus-visible) .mt-ligne-kj { color: var(--sumi); background-color: var(--kin); border-color: var(--kin); }
  .mt-ligne-prix { font-size: 0.84rem; color: var(--kin-light); white-space: nowrap; text-align: right; }
  .main-nav .mega a.mega-cta {
    display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; margin-top: 20px; padding: 10px 18px 10px 10px;
    border: 1px solid rgba(201, 169, 98, 0.55); color: var(--kin-light);
    font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
    transition: background-color 0.4s, color 0.4s;
  }
  .mega-cta-sceau { width: 26px; height: 26px; display: grid; place-items: center; background: var(--shu); color: #f6ece0; font-family: var(--font-display); font-size: 0.92rem; letter-spacing: 0; }
  .main-nav .mega a.mega-cta:is(:hover, :focus-visible) { background-color: var(--kin); color: var(--sumi); }

  .mega-maison .mega-cadre { grid-template-columns: minmax(220px, 0.8fr) 0.95fr 1.42fr; }
  .mega-toko {
    --mk-h: 236px;
    --mk-washi:
      radial-gradient(circle at 18% 22%, rgba(150, 120, 70, 0.07) 0 1px, transparent 1.5px) 0 0 / 23px 19px,
      radial-gradient(circle at 70% 60%, rgba(150, 120, 70, 0.06) 0 1px, transparent 1.5px) 0 0 / 31px 27px,
      linear-gradient(100deg, rgba(255, 251, 238, 0.4), rgba(255, 251, 238, 0) 46%, rgba(60, 40, 20, 0.06)),
      #ece2cc;
    display: grid; grid-template-columns: 16px 1fr; grid-template-rows: 16px auto 15px;
    padding-top: 0;
  }
  .mk-otoshi {
    grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 2;
    background: linear-gradient(180deg, #2c2218, #16110c);
    border-bottom: 1px solid rgba(201, 169, 98, 0.45); box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.8);
  }
  .mk-hashira {
    grid-column: 1; grid-row: 2 / 4; position: relative; z-index: 2;
    background:
      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 4px),
      radial-gradient(ellipse 60% 9px at 50% 38%, rgba(0, 0, 0, 0.35), transparent 70%),
      linear-gradient(90deg, #3d2c1e, #6a4e36 45%, #4a3524 80%, #2a1e14);
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.55);
  }
  .mk-toko {
    grid-column: 2; grid-row: 3; position: relative; z-index: 2;
    background: linear-gradient(180deg, #1c1611, #0a0807);
    border-top: 1px solid rgba(201, 169, 98, 0.55);
  }
  .mk-niche {
    grid-column: 2; grid-row: 2; position: relative;
    display: flex; justify-content: center; padding: 12px 26px 34px;
    background:
      radial-gradient(ellipse 70% 80% at 28% 0%, rgba(255, 226, 170, 0.12), transparent 70%),
      repeating-radial-gradient(circle at 40% 30%, rgba(255, 240, 210, 0.012) 0 2px, transparent 2px 5px),
      linear-gradient(180deg, #211a13, #15110c);
    box-shadow: inset 0 14px 18px -10px rgba(0, 0, 0, 0.75);
  }
  .mk-crochet { position: absolute; top: 0; left: 50%; width: 2px; height: 9px; margin-left: -1px; background: var(--kin-deep); }
  .mk-jiku {
    position: relative; width: min(100%, 400px); margin-top: 21px;
    transform-origin: 50% -21px;
    filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.55));
  }
  .mk-jiku::before {
    content: ""; position: absolute; left: 32%; right: 32%; bottom: 100%; height: 13px;
    background:
      linear-gradient(to top left, transparent calc(50% - 0.8px), #b89a5c 50%, transparent calc(50% + 0.8px)) left / 50% 100% no-repeat,
      linear-gradient(to top right, transparent calc(50% - 0.8px), #b89a5c 50%, transparent calc(50% + 0.8px)) right / 50% 100% no-repeat;
  }
  .mega-toko.vacille .mk-jiku { animation: mk-balance 1.1s var(--ease); }
  .mk-tete {
    position: relative; display: block; height: 24px;
    background:
      linear-gradient(180deg, #120e0a 0 4px, rgba(201, 169, 98, 0.55) 4px 5px, transparent 5px),
      repeating-linear-gradient(45deg, rgba(201, 169, 98, 0.14) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(-45deg, rgba(201, 169, 98, 0.14) 0 1px, transparent 1px 6px),
      linear-gradient(180deg, #2b2117, #1f1811);
  }
  .mk-tete i {
    position: absolute; top: 5px; left: 34%; width: 8px; height: 29px; z-index: 2;
    background:
      repeating-linear-gradient(0deg, rgba(201, 169, 98, 0.3) 0 1px, transparent 1px 5px),
      linear-gradient(90deg, #3a2c1d, #2a2015);
    border-inline: 1px solid rgba(201, 169, 98, 0.35);
    box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.4);
  }
  .mk-tete i + i { left: auto; right: 34%; }
  .mk-corps {
    position: relative; padding: 10px 18px 18px;
    background:
      repeating-linear-gradient(45deg, rgba(201, 169, 98, 0.12) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(-45deg, rgba(201, 169, 98, 0.12) 0 1px, transparent 1px 6px),
      linear-gradient(180deg, #2b2117, #1f1811);
    animation: mk-derouler 0.95s 0.16s var(--ease-ink) backwards;
  }
  .mk-honshi {
    position: relative; height: var(--mk-h); overflow: hidden;
    background: var(--mk-washi);
    border-block: 3px solid #b2924f;
    box-shadow: inset 0 0 22px rgba(90, 60, 25, 0.16);
  }
  .mk-honshi::after {
    content: "空"; position: absolute; right: 9px; bottom: 8px; z-index: 3; width: 17px; height: 17px;
    display: grid; place-items: center; font-family: var(--font-display); font-size: 0.6rem; line-height: 1;
    color: #f6ece0; background: var(--shu); opacity: 0.88;
  }
  .mk-rouleau {
    position: relative; display: block; height: 11px; margin: 0 -6px;
    background: linear-gradient(180deg, #4a3826, #1d150e 70%, #120d09);
    border-radius: 2px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    animation: mk-rouleau 0.95s 0.16s var(--ease-ink) backwards;
  }
  .mk-rouleau::before, .mk-rouleau::after {
    content: ""; position: absolute; top: -2px; width: 9px; height: 15px; border-radius: 2px;
    background: linear-gradient(90deg, #8a6d33, #f1dfac 45%, #a88a4c);
  }
  .mk-rouleau::before { left: -8px; }
  .mk-rouleau::after { right: -8px; }
  .mk-kouro {
    position: absolute; right: 22px; bottom: 15px; z-index: 3; width: 30px; height: 13px;
    background: linear-gradient(180deg, #7d6538, #3b2e1a 75%);
    border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(241, 223, 172, 0.5);
  }
  .mk-kouro i {
    position: absolute; bottom: 12px; left: 12px; width: 2px; height: 46px; border-radius: 2px;
    background: linear-gradient(0deg, rgba(240, 228, 205, 0.32), rgba(240, 228, 205, 0));
    filter: blur(0.8px); transform-origin: 50% 100%;
    animation: mk-fumee 5.2s ease-in-out infinite;
  }
  .mk-kouro i + i { left: 16px; height: 34px; animation-duration: 6.4s; animation-delay: -2.1s; }

  .mk-vue { position: absolute; inset: 0; padding: 14px 22px; color: #1d1712; opacity: 0; }
  .mk-vue.ancien { opacity: 1; z-index: 0; }
  .mk-vue.actif {
    opacity: 1; z-index: 1; background: var(--mk-washi);
    -webkit-mask: linear-gradient(180deg, #000 0 40%, transparent 60%) 0 0 / 100% 260% no-repeat;
    mask: linear-gradient(180deg, #000 0 40%, transparent 60%) 0 0 / 100% 260% no-repeat;
    animation: mk-encre 0.75s var(--ease-ink) backwards;
  }
  .mk-vue.actif [style*="--r"] { animation: mk-ligne 0.55s var(--ease) backwards; animation-delay: calc(0.16s + var(--r, 0) * 0.09s); }

  .mk-epine {
    position: absolute; left: 91px; top: 26px; bottom: 26px; width: 1px;
    background: linear-gradient(180deg, #b2924f, #8a6d33);
    transform-origin: top; animation: mk-epine 1s 0.1s var(--ease) backwards;
  }
  .mk-chapitres { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0; }
  .mk-chapitres li { display: grid; grid-template-columns: 44px 26px 1fr; align-items: center; gap: 0 12px; }
  .mk-an { font-family: var(--font-display); font-size: 0.92rem; color: #6c5323; text-align: right; letter-spacing: 0.04em; }
  .mk-kj {
    position: relative; z-index: 1; width: 26px; height: 26px; display: grid; place-items: center;
    font-family: var(--font-display); font-size: 0.9rem; line-height: 1; color: #1d1712;
    background: #f1e8d4; border: 1px solid rgba(29, 23, 18, 0.55); border-radius: 50%;
  }
  .mk-chapitres li:last-child .mk-kj { color: #f6ece0; background: var(--shu); border-color: var(--shu); }
  .mk-t { font-family: var(--font-display); font-size: 1rem; line-height: 1.25; color: #1d1712; }

  .mk-maitres { display: flex; justify-content: center; align-items: flex-start; gap: 14px; padding-top: 16px; }
  .mk-portrait { width: 136px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .mk-portrait img {
    display: block; width: 104px; height: 130px; object-fit: cover;
    border: 1px solid rgba(154, 122, 61, 0.7); box-shadow: 0 6px 12px -4px rgba(40, 25, 10, 0.5);
  }
  .mk-vue.actif .mk-portrait img { animation: mk-revelateur 1.2s 0.2s var(--ease) backwards; }
  .mk-portrait figcaption { display: flex; flex-direction: column; gap: 2px; }
  .mk-portrait b { font-family: var(--font-display); font-weight: 500; font-size: 0.94rem; line-height: 1.25; color: #1d1712; }
  .mk-portrait figcaption span { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; color: #5c4c39; }
  .mk-couture {
    align-self: stretch; width: 2px; margin: 4px 0 30px;
    background: linear-gradient(180deg, transparent, #c9a962 18%, #e6cd8f 50%, #c9a962 82%, transparent);
    transform-origin: top;
  }
  .mk-vue.actif .mk-couture { animation: mk-epine 0.9s 0.35s var(--ease) backwards; }

  .mk-regles { display: flex; justify-content: center; align-items: flex-start; gap: 14px; padding-top: 22px; }
  .mk-shikishi { width: 30%; max-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .mk-sk {
    position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center;
    background:
      radial-gradient(circle at 20% 30%, rgba(201, 169, 98, 0.35) 0 0.8px, transparent 1.3px) 0 0 / 9px 11px,
      radial-gradient(circle at 60% 70%, rgba(201, 169, 98, 0.28) 0 0.8px, transparent 1.3px) 0 0 / 13px 7px,
      #f3ead7;
    border: 1px solid rgba(154, 122, 61, 0.65);
    box-shadow: inset 0 0 0 4px #f3ead7, inset 0 0 0 5px rgba(154, 122, 61, 0.35), 0 5px 10px -4px rgba(40, 25, 10, 0.45);
  }
  .mk-sk span {
    font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: #15110d;
    -webkit-mask: linear-gradient(115deg, #000 0 40%, transparent 60%) 0 0 / 260% 100% no-repeat;
    mask: linear-gradient(115deg, #000 0 40%, transparent 60%) 0 0 / 260% 100% no-repeat;
  }
  .mk-vue.actif .mk-sk span { animation: mk-pinceau 0.8s var(--ease-ink) backwards; animation-delay: calc(0.3s + var(--r, 0) * 0.16s); }
  .mk-sk::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 7px; height: 7px; background: var(--shu); opacity: 0.85; }
  .mk-shikishi b { font-family: var(--font-display); font-weight: 500; font-size: 0.9rem; line-height: 1.3; color: #1d1712; text-align: center; white-space: nowrap; }

  .mk-croyance { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto 1fr; gap: 10px 20px; align-items: center; padding-top: 12px; }
  .mk-enso { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
  .mk-enso svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .mk-enso circle {
    fill: none; stroke: #1a1510; stroke-width: 6.5; stroke-linecap: round;
    stroke-dasharray: 1; stroke-dashoffset: 0.07;
  }
  .mk-vue.actif .mk-enso circle { animation: mk-enso 1.1s 0.15s var(--ease-ink) backwards; }
  .mk-enso > span { font-family: var(--font-display); font-size: 2.3rem; line-height: 1; color: #15110d; }
  .mk-lectures { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; line-height: 1.35; color: #3f3428; }
  .mk-lectures b { font-family: var(--font-display); font-weight: 500; font-size: 0.96rem; color: #6c5323; margin-right: 6px; }
  .mk-citation {
    grid-column: 1 / -1; align-self: start; padding-left: 12px; border-left: 2px solid #b2924f;
    font-family: var(--font-display); font-size: 0.9rem; line-height: 1.5; color: #2e251c;
  }

  @keyframes mk-derouler { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes mk-rouleau { from { transform: translateY(calc(-1 * (var(--mk-h) + 34px))); } }
  @keyframes mk-balance { 0% { transform: rotate(0); } 22% { transform: rotate(0.9deg); } 48% { transform: rotate(-0.55deg); } 72% { transform: rotate(0.25deg); } 100% { transform: rotate(0); } }
  @keyframes mk-encre { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }
  @keyframes mk-ligne { from { opacity: 0; transform: translateY(6px); } }
  @keyframes mk-epine { from { transform: scaleY(0); } }
  @keyframes mk-revelateur { from { filter: brightness(0.15) blur(3px); } }
  @keyframes mk-pinceau { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
  @keyframes mk-enso { from { stroke-dashoffset: 1; } }
  @keyframes mk-fumee {
    0% { opacity: 0; transform: translateY(4px) scaleY(0.7) skewX(0deg); }
    30% { opacity: 1; }
    60% { transform: translateY(-6px) scaleY(1.05) skewX(-7deg); }
    100% { opacity: 0; transform: translateY(-14px) scaleY(1.2) skewX(5deg); }
  }

  .nav-mega.mega-enchaine .mega-fond, .nav-mega.mega-enchaine .mega-voile,
  .nav-mega.mega-enchaine .mega-jiku, .nav-mega.mega-enchaine .mega-pointe { animation: none; }
  .nav-mega.mega-enchaine .mega-fil { animation-duration: 0.45s; }
  .nav-mega.mega-enchaine .mm-leve { animation-delay: calc(var(--k, 0) * 0.035s); }

  @keyframes mega-voile { from { opacity: 0; } }
  @keyframes mega-derouler { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes mega-jiku { from { top: 0; opacity: 1; } 80% { opacity: 1; } to { top: 100%; opacity: 0; } }
  @keyframes mega-fil { from { transform: scaleX(0); } }
  @keyframes mega-pointe { from { opacity: 0; transform: rotate(45deg) scale(0.2); } }
  @keyframes mega-peindre { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes mega-leve { from { opacity: 0; transform: translateY(12px); } }
  @keyframes mega-lampe { 0% { opacity: 0; } 22% { opacity: 0.9; } 30% { opacity: 0.15; } 44% { opacity: 1; } 52% { opacity: 0.55; } 64%, 100% { opacity: 1; } }
  @keyframes mega-vacille { 0% { opacity: 1; } 25% { opacity: 0.3; } 45% { opacity: 0.95; } 60% { opacity: 0.6; } 100% { opacity: 1; } }
  @keyframes mega-encre { from { -webkit-mask-position: 0 0; mask-position: 0 0; } }
  @keyframes mega-tampon { 0% { transform: scale(1.22) rotate(-7deg); opacity: 0.35; } 55% { transform: scale(0.93) rotate(-3deg); opacity: 1; } 100% { transform: scale(1) rotate(-3deg); } }
  @keyframes mega-bave { 0% { opacity: 0.75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
  @keyframes mega-poutre { from { transform: scaleX(0); } }
  @keyframes mega-fuda {
    0% { opacity: 0; transform: translateY(-22px) rotate(-10deg); }
    32% { opacity: 1; transform: translateY(0) rotate(6deg); }
    56% { transform: rotate(-3.5deg); }
    76% { transform: rotate(1.5deg); }
    100% { transform: rotate(0); }
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .mega-cadre { grid-template-columns: 1.12fr 1fr; gap: 22px 30px; padding: 24px 24px 28px; }
  .mega-intro { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
  .mega-texte { display: none; }
  .mega-titre { font-size: 1.22rem; }
  .main-nav .mega a.mega-tout { margin: 0 0 0 auto; }
  .mega-kj { font-size: 11rem; }
  .mega-sceaux { gap: 4px 10px; }
  .main-nav .mega a.mega-sceau { grid-template-columns: 42px 1fr; gap: 12px; padding: 10px 8px; }
  .mc-kj { width: 42px; height: 42px; font-size: 1.25rem; }
  .mega-fuda { gap: 10px; }
  .main-nav .mega a.mt-plaque { padding: 28px 8px 16px; }
  .mt-num { font-size: 1.7rem; }
  .mega-maison .mega-cadre { grid-template-columns: 0.9fr 1.25fr; }
  .mega-toko { --mk-h: 226px; }
  .mk-niche { padding: 12px 18px 34px; }
  .mk-chapitres li { grid-template-columns: 38px 24px 1fr; gap: 0 9px; }
  .mk-kj { width: 24px; height: 24px; }
  .mk-epine { left: 81px; }
  .mk-t { font-size: 0.92rem; }
}

:is(#formules, #pivot, #au-dela, #film) { scroll-margin-top: 130px; }
#croyance { scroll-margin-top: 110px; }

@media (prefers-reduced-motion: reduce) {
  .mega, .mega *, .mega *::before, .mega *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.22; }
.display-xl { font-size: clamp(1.9rem, 4vw, 3.05rem); line-height: 1.18; letter-spacing: -0.005em; }
.display-lg { font-size: clamp(2rem, 4.2vw, 3.3rem); }
.display-md { font-size: clamp(1.4rem, 2.4vw, 2rem); }

.display-xl + p,
.display-lg + p,
.display-md + p { margin-top: clamp(16px, 2.4vw, 26px); }
.gold { background: linear-gradient(100deg, var(--kin-deep), var(--kin-light) 55%, var(--kin)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gold .word-mask i {
  background: linear-gradient(100deg, var(--kin-deep), var(--kin-light) 55%, var(--kin));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { font-size: clamp(0.98rem, 1.3vw, 1.1rem); color: var(--ink-dim); max-width: 620px; }

.eyebrow { display: inline-flex; align-items: center; gap: 16px; font-size: 0.68rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--kin); margin-bottom: 22px; }
.eyebrow .num-jp { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0; color: var(--kin-light); }
.eyebrow::after { content: ""; width: 54px; height: 1px; background: linear-gradient(90deg, var(--kin), transparent); }

.btn {
  --n: 6px;
  --forme: polygon(var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)), 0 var(--n), var(--n) var(--n));
  --btn-filet: var(--kin); --btn-deco: none;
  --btn-fond: linear-gradient(180deg, #1a150f, #0d0b09);
  display: inline-flex; align-items: center; gap: 14px; padding: 17px 36px;
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 400;
  position: relative; isolation: isolate; border: 0; background: var(--btn-filet); clip-path: var(--forme);
  cursor: pointer; transition: color 0.5s var(--ease), background-color 0.4s;
}
.btn::before, .btn::after { content: ""; position: absolute; inset: 1px; clip-path: var(--forme); pointer-events: none; }
.btn::after { z-index: -2; background: var(--btn-deco), var(--btn-fond); transition: box-shadow 0.3s; }
.btn::before {
  z-index: -1; background: var(--kin);
  transform: scaleY(0); transform-origin: bottom; transition: transform 0.55s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before { transform: scaleY(1); }
.btn:focus-visible { outline: none; }
.btn:focus-visible::after { box-shadow: inset 0 0 0 2px var(--kin-light); }

.btn-ghost {
  color: var(--kin-light); --btn-filet: rgba(201, 169, 98, 0.55);
  --btn-deco:
    radial-gradient(circle at 13px 50%, #f1dfac 0 1.4px, #a88a4c 1.9px, rgba(201, 169, 98, 0.25) 2.6px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 13px) 50%, #f1dfac 0 1.4px, #a88a4c 1.9px, rgba(201, 169, 98, 0.25) 2.6px, transparent 3.2px);
}
.btn-ghost:hover { color: var(--sumi); --btn-filet: var(--kin); }

.btn-gold {
  color: var(--sumi); font-weight: 500; padding-left: 44px; --btn-filet: #8a6d33;
  --btn-deco:
    linear-gradient(rgba(246, 236, 224, 0.8), rgba(246, 236, 224, 0.8)) 17px 50% / 3px 3px no-repeat,
    linear-gradient(var(--shu), var(--shu)) 14px 50% / 9px 9px no-repeat;
  --btn-fond:
    repeating-linear-gradient(90deg, rgba(120, 88, 34, 0.13) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(180deg, rgba(120, 88, 34, 0.09) 0 1px, transparent 1px 22px),
    linear-gradient(170deg, #f6e8bf 0%, #dcc283 44%, #c09f5a 100%);
}
.btn-gold::before {
  transform: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 251, 236, 0.62) 50%, transparent 68%) 120% 0 / 230% 100% no-repeat;
  transition: background-position 0.9s var(--ease);
}
.btn-gold:hover::before { transform: none; background-position: -120% 0; }
.btn-gold:hover { --btn-filet: #b8955a; }
.btn-gold:focus-visible::after { box-shadow: inset 0 0 0 2px #2b2010; }

.btn .arrow { transition: transform 0.5s var(--ease); }
.btn:hover .arrow { transform: translateX(6px); }
.btn:hover .arrow.retour { transform: translateX(-6px); }

.tategaki {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.5em;
  color: var(--ink-faint); text-transform: uppercase;
}
.side-mark {
  position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 18px; z-index: 3; pointer-events: none;
}
.side-mark::before { content: ""; width: 1px; height: 70px; background: linear-gradient(180deg, transparent, var(--kin), transparent); }

.kanji-ghost {
  position: absolute; font-family: var(--font-display); line-height: 1; pointer-events: none;
  font-size: clamp(9rem, 22vw, 20rem); color: rgba(201, 169, 98, 0.035);
  top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; user-select: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 2.4s var(--ease-ink);
}
.kanji-ghost.in { clip-path: inset(0 0 0 0); }

.sumi-layer {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  mix-blend-mode: screen; opacity: 0.85;
}
.section > .container { position: relative; z-index: 1; }

.section { padding: clamp(84px, 11vw, 160px) 40px; position: relative; }
.container { max-width: 1360px; margin: 0 auto; }
.section-head { max-width: 800px; margin-bottom: clamp(46px, 6vw, 84px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lead { margin: 20px auto 0; }

.hero { min-height: 100vh; display: flex; align-items: center; position: relative; padding: 150px 40px 90px; }
.hero-3d { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-3d canvas { width: 100%; height: 100%; display: block; }
.hero-content { position: relative; z-index: 2; max-width: 1360px; margin: 0 auto; width: 100%; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 12px; padding: 9px 20px;
  border: 1px solid var(--line); font-size: 0.66rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--kin-light); background: rgba(14, 14, 18, 0.5);
  backdrop-filter: blur(10px); margin-bottom: 32px;
}
.hero-badge-sceau {
  display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px;
  border: 1px solid var(--kin); color: var(--kin-light); font-family: var(--font-display);
  font-size: 0.76rem; line-height: 1; letter-spacing: 0; text-transform: none; transform: rotate(-4deg);
}
html:not(.attente-seuil) .hero-badge-sceau { animation: badge-sceau 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 0.45s both; }
@keyframes badge-sceau {
  from { opacity: 0; transform: rotate(-4deg) scale(1.9); }
  55% { opacity: 1; }
  to { opacity: 1; transform: rotate(-4deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { html:not(.attente-seuil) .hero-badge-sceau { animation: none; } }
.hero h1 { max-width: 740px; text-wrap: balance; }
.hero .lead { margin: 30px 0 42px; max-width: 560px; }
.hero-cta { display: flex; gap: 18px; flex-wrap: wrap; }
.hero-preuve { margin: 30px 0 0; max-width: 560px; font-size: 0.86rem; line-height: 1.65; color: var(--ink-dim); }
.hero-preuve-sceau { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; vertical-align: -0.42em; background: var(--shu); color: var(--washi); font-family: var(--font-display); font-size: 0.8rem; transform: rotate(-4deg); }
.hero-preuve a { color: var(--kin-light); border-bottom: 1px solid var(--kin-deep); white-space: nowrap; transition: color 0.4s, border-color 0.4s; }
.hero-preuve a:hover { color: var(--kin); border-bottom-color: var(--kin); }
@media (min-width: 901px) {
  .hero-preuve { max-width: min(560px, 52%); }
  .hero-badge, .hero h1, .hero .lead, .hero-cta,
  .page-hero .eyebrow, .page-hero h1, .page-hero .lead { max-width: min(740px, 52%); }
}
.hero-scroll {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  font-size: 0.6rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-faint);
  display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 2;
}
.hero-scroll::after { content: ""; width: 1px; height: 48px; background: linear-gradient(180deg, var(--kin), transparent); transform-origin: top; animation: scrollHint 2.4s var(--ease) infinite; }
@keyframes scrollHint {
  0% { transform: translateY(0) scaleY(0); }
  50% { transform: translateY(0) scaleY(1); }
  100% { transform: translateY(48px) scaleY(0); }
}
.page-hero { min-height: 64vh; display: flex; align-items: flex-end; position: relative; padding: 180px 40px 74px; }

.hero-sceau {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: clamp(20px, 7vw, 130px); pointer-events: none;
}
.hero-sceau svg {
  width: clamp(300px, 38vw, 520px); height: auto; overflow: visible;
}

.sc-halo { transform-origin: 300px 300px; animation: sc-souffle 9s ease-in-out infinite; }
@keyframes sc-souffle {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.06); opacity: 1; }
}

.sc-anneau { transform-origin: 300px 300px; animation: sc-tourne-inv 120s linear infinite; }
@keyframes sc-tourne-inv { to { transform: rotate(-360deg); } }

.sc-enso {
  transform-origin: 300px 300px;
  animation: sc-tourne 150s linear infinite;
}
@keyframes sc-tourne { to { transform: rotate(360deg); } }
.sc-geste-l {
  pathLength: 1; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: sc-tracer 2.2s cubic-bezier(0.22, 1, 0.36, 1) .25s forwards;
}
@keyframes sc-tracer { to { stroke-dashoffset: 0; } }

.sc-encre-d {
  transform-origin: 300px 316px; transform: scale(0);
  animation: sc-diffuser 1.9s cubic-bezier(0.16, 0.84, 0.24, 1) 1.15s forwards;
}
@keyframes sc-diffuser { to { transform: scale(1); } }

.sc-kanji {
  font-family: var(--font-display); font-size: 210px; font-weight: 500;
  letter-spacing: 0; opacity: .92;
}

.sc-hanko {
  transform-origin: 435px 435px; opacity: 0;
  animation: sc-apposer .5s cubic-bezier(0.16, 0.84, 0.24, 1) 2.7s forwards;
}
@keyframes sc-apposer {
  0%   { opacity: 0; transform: scale(1.75) rotate(-9deg); }
  62%  { opacity: 1; transform: scale(.94) rotate(1.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.sc-hanko-k { font-family: var(--font-display); font-size: 34px; }

.sc-mote { opacity: 0; animation: sc-deriver 11s ease-in-out infinite; }
.sc-mote-1 { animation-duration: 14s; }
.sc-mote-2 { animation-duration: 9s; }
@keyframes sc-deriver {
  0%, 100% { opacity: 0; transform: translateY(6px); }
  30%      { opacity: .55; }
  60%      { opacity: .28; transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-halo, .sc-anneau, .sc-enso, .sc-mote { animation: none; }
  .sc-geste-l { stroke-dashoffset: 0; animation: none; }
  .sc-encre-d { transform: scale(1); animation: none; }
  .sc-hanko { opacity: 1; transform: none; animation: none; }
  .sc-mote { opacity: .35; }
}

@media (max-width: 1100px) {
  .sc-kanji { font-size: 190px; }
}
@media (max-width: 900px) {
  .page-hero-sceau { padding-top: 272px; }
  .hero-sceau {
    align-items: flex-start; justify-content: center;
    padding: 84px 0 0; opacity: .95;
  }
  .hero-sceau svg { width: min(46vw, 176px); }
}

.hero-pagode {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: clamp(10px, 4vw, 80px); pointer-events: none;
}
.page-hero-pagode { min-height: 76vh; }
.hero-pagode svg {
  height: min(88%, 620px); width: auto; max-width: 46vw; overflow: visible;
}

.pg-halo { transform-origin: 300px 330px; animation: pg-souffle 11s ease-in-out infinite; }
@keyframes pg-souffle {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.05); opacity: 1; }
}
.pg-sol { opacity: 0; animation: pg-venir 1s var(--ease) .1s forwards; }
@keyframes pg-venir { to { opacity: 1; } }

.pg-socle { opacity: 0; animation: pg-poser .8s cubic-bezier(0.16, 0.84, 0.24, 1) .15s forwards; }
@keyframes pg-poser {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}

.pg-etage { opacity: 0; animation: pg-monter .7s cubic-bezier(0.16, 0.84, 0.24, 1) forwards; }
@keyframes pg-monter {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: none; }
}
.pg-toit {
  transform-box: fill-box; transform-origin: center;
  animation: pg-deplier .8s cubic-bezier(0.16, 0.9, 0.28, 1) both;
  animation-delay: inherit;
}
@keyframes pg-deplier {
  0%   { transform: scaleX(.24); opacity: .2; }
  100% { transform: none; opacity: 1; }
}

.pg-chevrons line { stroke: #c9a962; stroke-width: .5; stroke-opacity: .34; }
.pg-pilier { stroke: #c9a962; stroke-width: .7; stroke-opacity: .3; }
.pg-lisse  { stroke: #c9a962; stroke-width: .8; stroke-opacity: .42; }

.pg-baie {
  opacity: 0; animation: pg-allumer 1.5s ease-out forwards;
  filter: drop-shadow(0 0 7px rgba(232, 149, 47, 0.55));
}
@keyframes pg-allumer {
  0%   { opacity: 0; }
  60%  { opacity: .95; }
  100% { opacity: .8; }
}

.pg-sorin { opacity: 0; animation: pg-venir .6s var(--ease) 1.7s forwards; }
.pg-hampe {
  stroke: url(#pg-bronze); stroke-width: 3;
  pathLength: 1; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: pg-tracer 1s cubic-bezier(0.3, 0.9, 0.4, 1) 1.75s forwards;
}
@keyframes pg-tracer { to { stroke-dashoffset: 0; } }
.pg-anneau { opacity: 0; animation: pg-venir .34s var(--ease) forwards; }
.pg-flamme { opacity: 0; animation: pg-venir .6s var(--ease) 2.6s forwards; }
.pg-joyau  { opacity: 0; animation: pg-eclore .7s cubic-bezier(0.16, 0.84, 0.24, 1) 2.75s forwards; }
@keyframes pg-eclore {
  0%   { opacity: 0; transform: scale(.3); }
  70%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: none; }
}

.pg-hanko {
  transform-origin: 479px 547px; opacity: 0;
  animation: pg-apposer .5s cubic-bezier(0.16, 0.84, 0.24, 1) 3.2s forwards;
}
@keyframes pg-apposer {
  0%   { opacity: 0; transform: scale(1.7) rotate(-8deg); }
  62%  { opacity: 1; transform: scale(.95) rotate(1.4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.pg-hanko-k { font-family: var(--font-display); font-size: 31px; }

.pg-mote { opacity: 0; animation: pg-deriver 12s ease-in-out infinite; }
.pg-mote-1 { animation-duration: 15s; }
.pg-mote-2 { animation-duration: 9.5s; }
@keyframes pg-deriver {
  0%, 100% { opacity: 0; transform: translateY(6px); }
  30%      { opacity: .46; }
  60%      { opacity: .22; transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
  .pg-halo, .pg-mote { animation: none; }
  .pg-sol, .pg-socle, .pg-etage, .pg-toit, .pg-sorin,
  .pg-anneau, .pg-flamme, .pg-joyau, .pg-hanko {
    opacity: 1; transform: none; animation: none;
  }
  .pg-baie { opacity: .8; animation: none; }
  .pg-hampe { stroke-dashoffset: 0; animation: none; }
  .pg-mote { opacity: .3; }
}

@media (max-width: 900px) {
  .page-hero-pagode { min-height: 0; padding-top: 348px; }
  .hero-pagode {
    align-items: flex-start; justify-content: center;
    padding: 72px 0 0; opacity: .95;
  }
  .hero-pagode svg { width: min(64vw, 252px); height: auto; max-width: none; }
}

.page-hero-piece { min-height: 70vh; }
.hero-piece {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 84px clamp(10px, 4vw, 80px) 0 0; pointer-events: none;
}
.hero-piece > svg { height: min(86%, 560px); width: auto; max-width: 44vw; overflow: visible; }
.piece-kj { font-family: var(--font-display); font-weight: 700; }
@keyframes piece-tracer { to { stroke-dashoffset: 0; } }
@keyframes piece-venir { to { opacity: 1; } }
@keyframes piece-apposer {
  0%   { opacity: 0; transform: scale(1.7) rotate(-8deg); }
  62%  { opacity: 1; transform: scale(.95) rotate(1.4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes piece-souffle {
  0%, 100% { transform: scale(1); opacity: .75; }
  50%      { transform: scale(1.05); opacity: 1; }
}

.mo-halo { transform-origin: 300px 300px; opacity: 0; animation: piece-venir 1.6s ease .2s forwards; }
.mo-guide {
  fill: none; stroke: #c9a962; stroke-width: .6; stroke-opacity: .5;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: piece-tracer .9s cubic-bezier(.45, .1, .25, 1) var(--d) forwards, mo-estomper 1.2s ease 3.3s forwards;
}
@keyframes mo-estomper { to { stroke-opacity: .13; } }
.mo-gaine { fill: none; stroke: #0b0a0d; stroke-width: 23; }
.mo-or { fill: none; stroke: url(#mo-or); stroke-width: 15; }
.mo-fil { fill: none; stroke: #f3e2b4; stroke-width: 1.1; stroke-opacity: .5; }
.mo-maru .mo-gaine { stroke-width: 26; }
.mo-maru .mo-or { stroke-width: 18; }
.mo-anneau path, .mo-maru path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: piece-tracer .85s cubic-bezier(.5, .05, .3, 1) var(--d) forwards;
}
.mo-maru { --d: 2.55s; }
.mo-dessus { opacity: 0; animation: piece-venir .3s ease 2.7s forwards; }
.mo-pointe { fill: #ecd9a8; opacity: 0; animation: piece-venir .25s ease var(--d) forwards, mo-estomper-p 1s ease 3.4s forwards; }
@keyframes mo-estomper-p { to { opacity: .35; } }
.mo-hanko { opacity: 0; animation: piece-apposer .5s cubic-bezier(.16, .84, .24, 1) 3.5s forwards; }

.in-page { opacity: 0; transform: translateY(18px) rotate(-2deg); transform-origin: 300px 300px; animation: in-poser 1s cubic-bezier(.16, .84, .24, 1) .1s forwards; }
@keyframes in-poser { to { opacity: 1; transform: none; } }
.in-cadre { stroke-dasharray: 1; stroke-dashoffset: 1; animation: piece-tracer 1.1s ease .7s forwards; }
.in-cadre-2 { animation-delay: .85s; }
.in-cadre-3 { animation-delay: 1s; }
.in-fil { stroke-dasharray: 1; stroke-dashoffset: 1; animation: piece-tracer 1.2s ease 1s forwards; }
.in-sceau { opacity: 0; animation: in-apposer .44s cubic-bezier(.2, .8, .2, 1.2) var(--d) forwards; }
@keyframes in-apposer {
  0%   { opacity: 0; transform: scale(1.5) translateY(-6px); }
  55%  { opacity: 1; transform: scale(.96); }
  100% { opacity: .94; transform: none; }
}

.hero-emaki .em-defs { position: absolute; }
.em-rouleau { position: relative; width: min(40vw, 600px); aspect-ratio: 2 / 1; container-type: inline-size; }
.em-papier {
  position: absolute; inset: 0 40px 0 18px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(201, 169, 98, .025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #1a1611, #110e0b 60%, #16120e);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .65);
  clip-path: inset(0 0 0 100%);
  animation: em-derouler 2s cubic-bezier(.55, .1, .3, 1) .3s forwards;
}
@keyframes em-derouler { to { clip-path: inset(0 0 0 0); } }
.em-bande { position: absolute; top: 0; bottom: 0; right: 0; display: flex; flex-direction: row-reverse; align-items: center; width: max-content; }
.em-scene { position: relative; flex: none; height: 70%; aspect-ratio: 520 / 380; margin: 0 10px 0 0; border: 1px solid rgba(201, 169, 98, .45); background: rgba(0, 0, 0, .3); }
.em-scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.em-no { position: absolute; top: -21px; right: 0; font-family: var(--font-display); font-size: 12px; letter-spacing: .1em; color: var(--kin); }
.em-kumo { position: relative; z-index: 1; display: block; flex: none; width: 140px; height: 86%; margin: 0 -34px 0 -44px; opacity: .72; }
.em-kumo svg { display: block; width: 100%; height: 100%; }
.em-brocart { position: absolute; left: 0; right: 0; height: 11px; z-index: 2;
  background: repeating-linear-gradient(45deg, rgba(201, 169, 98, .55) 0 2px, rgba(138, 109, 51, .55) 2px 5px), #2a2016; }
.em-haut { top: 0; border-bottom: 1px solid rgba(236, 217, 168, .5); }
.em-bas { bottom: 0; border-top: 1px solid rgba(236, 217, 168, .5); }
.em-nuages { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .8; }
.em-couverture {
  position: absolute; right: 0; top: -6px; bottom: -6px; width: 42px;
  background: repeating-linear-gradient(-45deg, rgba(201, 169, 98, .18) 0 2px, transparent 2px 7px), #1d1712;
  border-left: 1px solid rgba(236, 217, 168, .55); box-shadow: -6px 0 14px rgba(0, 0, 0, .5);
}
.em-daisen { position: absolute; top: 18px; left: 10px; width: 22px; height: 64px; display: grid; place-items: center;
  background: #e9dfca; color: #1a1611; font-family: var(--font-display); font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(168, 55, 42, .5); }
.em-jiku {
  position: absolute; left: 4px; top: -12px; bottom: -12px; width: 20px; border-radius: 10px; z-index: 3;
  background: linear-gradient(90deg, #241b12, #6d5528 30%, #ecd9a8 50%, #8a6d33 72%, #241b12);
  box-shadow: 4px 0 12px rgba(0, 0, 0, .55);
  transform: translateX(calc(100cqw - 70px));
  animation: em-jiku 2s cubic-bezier(.55, .1, .3, 1) .3s forwards;
}
.em-jiku::before, .em-jiku::after { content: ""; position: absolute; left: 3px; width: 14px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #8a6d33, #ecd9a8, #8a6d33); }
.em-jiku::before { top: -8px; }
.em-jiku::after { bottom: -8px; }
@keyframes em-jiku { to { transform: none; } }
.em-bande { animation: em-defiler 90s linear 2.4s infinite; }
@keyframes em-defiler { to { transform: translateX(50%); } }

.mz-halo { opacity: 0; animation: piece-venir 1.6s ease .2s forwards; }
.mz-gaine, .mz-or, .mz-shu, .mz-coeur { fill: none; stroke-linejoin: round; }
.mz-gaine { stroke: #0b0a0d; stroke-width: 28; }
.mz-or { stroke: url(#mz-or); stroke-width: 22; }
.mz-shu { stroke: #9f2a1e; stroke-width: 14; }
.mz-coeur { stroke: url(#mz-or); stroke-width: 6; }
.mz-cordon path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: piece-tracer var(--duree) linear var(--d) forwards; }
.mz-dessus { opacity: 0; animation: piece-venir .1s linear var(--d) forwards; }
.mz-hanko { opacity: 0; animation: piece-apposer .5s cubic-bezier(.16, .84, .24, 1) 3.3s forwards; }

@media (min-width: 901px) and (hover: hover) {
  .mo-halo, .mz-halo { animation: piece-venir 1.6s ease .2s forwards, piece-souffle 11s ease-in-out 1.8s infinite; transform-origin: 300px 290px; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-halo, .mz-halo, .mo-dessus, .mo-hanko, .mz-dessus, .mz-hanko, .in-page, .in-sceau { opacity: 1; transform: none; animation: none; }
  .mo-pointe { opacity: .35; animation: none; }
  .mo-guide { stroke-dashoffset: 0; stroke-opacity: .13; animation: none; }
  .mo-anneau path, .mo-maru path, .in-cadre, .in-fil, .mz-cordon path { stroke-dashoffset: 0; animation: none; }
  .em-papier { clip-path: none; animation: none; }
  .em-jiku, .em-bande { transform: none; animation: none; }
}

@media (max-width: 1100px) {
  .page-hero-piece { min-height: 0; padding-top: 360px; }
  .hero-piece { align-items: flex-start; justify-content: center; padding: 92px 0 0; }
  .hero-piece > svg { width: min(64vw, 252px); height: auto; max-width: none; }
  .page-hero-piece:has(.hero-emaki) { padding-top: calc(130px + min(46vw, 260px)); }
  .em-rouleau { width: min(92vw, 520px); }
}
@media (max-width: 900px) {
  .page-hero-piece { min-height: 0; padding-top: 340px; }
  .hero-piece { align-items: flex-start; justify-content: center; padding: 76px 0 0; }
  .hero-piece > svg { width: min(64vw, 252px); height: auto; max-width: none; }
  .page-hero-piece:has(.hero-emaki) { padding-top: calc(110px + min(46vw, 260px)); }
  .em-rouleau { width: min(92vw, 520px); }
}

.etang { --p: 1; position: relative; height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent); mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent); }
.etang svg { position: absolute; left: 50%; top: 0; width: max(1440px, 100%); height: 300px; transform: translateX(-50%); overflow: visible; }
.etang-onde { transform: translateX(calc(var(--p) * var(--dx) * 1px)); }
.etang-feuille { transform-box: fill-box; transform-origin: 50% 50%; transform: translateX(calc(var(--p) * var(--dx) * 1px)) rotate(calc(var(--p) * var(--rot) * 1deg)); }
@media (prefers-reduced-motion: no-preference) {
  .etang.vue .etang-surface { animation: etang-derive 26s linear infinite; }
}
@keyframes etang-derive { from { transform: translateX(0); } to { transform: translateX(-240px); } }
@media (prefers-reduced-motion: reduce) {
  .etang { --p: 1 !important; }
}

.kintsugi { position: relative; height: 130px; overflow: visible; }
.kintsugi svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kintsugi path { fill: none; stroke: url(#kinGrad); stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(201, 169, 98, 0.55)); }
.kintsugi .vein { stroke-width: 2; }
.kintsugi .vein-thin { stroke-width: 1; opacity: 0.7; }

.enso-wrap { position: relative; display: grid; place-items: center; min-height: 400px; }
.enso { width: min(330px, 84%); aspect-ratio: 1; overflow: visible; }
.enso circle, .enso path { fill: none; }
.enso .stroke {
  stroke: url(#ensoGrad); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 900; stroke-dashoffset: 900;
  transition: stroke-dashoffset 2.6s var(--ease-ink);
  filter: drop-shadow(0 0 14px rgba(201, 169, 98, 0.4));
}
.enso.in .stroke { stroke-dashoffset: 60; } 
.enso-core { position: absolute; text-align: center; width: min(260px, 62%); }
.enso-core .kanji { font-family: var(--font-display); font-size: 3.4rem; color: var(--kin-light); line-height: 1; display: block; }
.enso-core .romaji {
  display: block; margin-top: 14px; font-size: 0.66rem; line-height: 1.9;
  letter-spacing: 0.2em; color: var(--ink-dim);
}

.fenetre { --p: 1; display: grid; justify-items: center; align-content: center; min-height: 440px; }
.fenetre-boite { position: relative; width: min(420px, 100%); aspect-ratio: 1; }
.fenetre-boite svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fenetre-legende { display: block; margin-top: 18px; text-align: center; font-size: 0.66rem; line-height: 1.9; letter-spacing: 0.2em; color: var(--ink-dim);
  --l: clamp(0, (var(--p) - 0.72) / 0.28, 1); opacity: var(--l); transform: translateY(calc((1 - var(--l)) * 8px)); }
.fenetre-store { transform: translateY(calc(var(--p) * -310px)); }
.fenetre-lampe-g { opacity: 0; }
.fenetre.in .fenetre-lampe-g { animation: fenetre-lampe 1.3s ease both; }
@keyframes fenetre-lampe { 0% { opacity: 0; } 25% { opacity: 0.9; } 38% { opacity: 0.45; } 58% { opacity: 1; } 100% { opacity: 1; } }
.fenetre-lampe { opacity: calc(1 - var(--p)); }
.fenetre-halo-lune { opacity: calc(0.35 + 0.65 * clamp(0, (var(--p) - 0.45) / 0.45, 1)); }
.fenetre-encre { --e: clamp(0, (var(--p) - 0.6) / 0.35, 1); opacity: calc(var(--e) * 0.85); filter: blur(calc((1 - var(--e)) * 4px)); }
.fenetre-reflet rect { transform-box: fill-box; transform-origin: center; }
.fenetre-branche { transform-box: fill-box; transform-origin: 0 0; transition: transform 1.6s var(--ease); }
@media (min-width: 901px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fenetre.vue .fenetre-brume { animation: fenetre-brume 22s ease-in-out infinite alternate; }
  .fenetre.vue .fenetre-reflet rect { animation: fenetre-scintille 3.6s ease-in-out calc(var(--i) * -0.4s) infinite alternate; }
  .fenetre-boite:hover .fenetre-branche { transform: rotate(-1.2deg); }
}
@keyframes fenetre-brume { from { transform: translateX(-20px); } to { transform: translateX(20px); } }
@keyframes fenetre-scintille { from { transform: scaleX(0.7); } to { transform: scaleX(1.15); } }
@media (max-width: 900px) {
  .fenetre { min-height: 0; }
  .fenetre-boite { width: min(360px, 88vw); }
}
@media (prefers-reduced-motion: reduce) {
  .fenetre { --p: 1 !important; }
  .fenetre.in .fenetre-lampe-g { animation: none; }
  .fenetre-encre { filter: none; }
}

.vision-ku { padding-bottom: clamp(48px, 6vw, 90px); }   
.vision-grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.vision-ku .enso-wrap { min-height: 430px; }
.vision-ku .enso { width: 330px; }
.vision-citation { font-style: italic; margin: 18px 0 26px; }
.vision-texte p { color: var(--ink-dim); margin-top: 16px; }
.ku-lectures { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: 0; padding: 0; list-style: none; }
.ku-lectures li {
  position: absolute; white-space: nowrap; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim);
  opacity: 0; transition: opacity 0.7s ease, transform 0.9s var(--ease);
}
.ku-lectures li b { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: 0.08em; text-transform: none; color: var(--kin-light); }
.ku-lectures li::before {
  content: ""; position: absolute; width: 7px; height: 7px; background: var(--kin); transform: rotate(45deg) scale(0);
  box-shadow: 0 0 10px rgba(201, 169, 98, 0.7); transition: transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.ku-lectures .kl-1 { left: 158px; top: -70px; transform: translateX(-12px); }
.ku-lectures .kl-1::before { left: -30px; top: 18px; }
.ku-lectures .kl-2 { left: -24px; top: 160px; transform: translate(-50%, -10px); text-align: center; }
.ku-lectures .kl-2::before { left: calc(50% - 3.5px); top: -24px; }
.ku-lectures .kl-3 { right: 146px; top: -114px; transform: translateX(12px); text-align: right; }
.ku-lectures .kl-3::before { right: -50px; top: 18px; }
.enso.in ~ .ku-lectures li { opacity: 1; }
.enso.in ~ .ku-lectures .kl-1 { transform: none; transition-delay: 0.5s; }
.enso.in ~ .ku-lectures .kl-2 { transform: translate(-50%, 0); transition-delay: 1.2s; }
.enso.in ~ .ku-lectures .kl-3 { transform: none; transition-delay: 1.9s; }
.enso.in ~ .ku-lectures li::before { transform: rotate(45deg) scale(1); }
.enso.in ~ .ku-lectures .kl-1::before { transition-delay: 0.45s; }
.enso.in ~ .ku-lectures .kl-2::before { transition-delay: 1.15s; }
.enso.in ~ .ku-lectures .kl-3::before { transition-delay: 1.85s; }
@media (max-width: 1100px) {
  .vision-ku .enso-wrap { min-height: 0; padding-bottom: 8px; display: flex; flex-direction: column; align-items: center; }
  .ku-lectures { position: static; width: auto; height: auto; display: flex; justify-content: center; gap: 22px; margin-top: 18px; flex-wrap: wrap; }
  .ku-lectures li, .ku-lectures .kl-1, .ku-lectures .kl-2, .ku-lectures .kl-3 { position: relative; left: auto; right: auto; top: auto; text-align: center; transform: translateY(8px); }
  .enso.in ~ .ku-lectures .kl-1, .enso.in ~ .ku-lectures .kl-2, .enso.in ~ .ku-lectures .kl-3 { transform: none; }
  .ku-lectures li::before { display: none; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .vision-ku .enso { width: 300px; }
  .vision-ku .enso-core { top: 150px; transform: translateY(-50%); }
}
@media (max-width: 900px) {
  .vision-grille { grid-template-columns: 1fr; }
  .vision-ku .enso { width: min(260px, 72vw); }
  .vision-ku .enso-core { top: calc(min(260px, 72vw) / 2); transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ku-lectures li { opacity: 1; transform: none; transition: none; }
  .ku-lectures .kl-2 { transform: translate(-50%, 0); }
  .ku-lectures li::before { transform: rotate(45deg); transition: none; }
}

.hanko {
  width: 96px; height: 96px; display: grid; place-items: center; position: relative;
  border: 2px solid var(--shu); background: rgba(168, 55, 42, 0.10);
  font-family: var(--font-display); font-size: 2.6rem; color: var(--shu); line-height: 1;
  transform: scale(2.4) rotate(-18deg); opacity: 0;
  transition: transform 0.5s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.32s;
}
.hanko.stamped { transform: scale(1) rotate(-7deg); opacity: 1; }
.hanko.gold { border-color: var(--kin); color: var(--kin-light); background: rgba(201, 169, 98, 0.08); }

.byobu { display: grid; gap: clamp(30px, 4vw, 56px); perspective: 2000px; }
.byobu-panel {
  position: relative; display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 48px; align-items: center;
  padding: clamp(34px, 4vw, 58px);
  background: linear-gradient(150deg, rgba(22, 22, 28, 0.96), rgba(9, 9, 12, 0.99));
  border: 1px solid var(--line-soft);
  transform-style: preserve-3d; will-change: transform;
  transition: border-color 0.6s, box-shadow 0.6s;
}
.byobu-panel:nth-child(even) { transform-origin: right center; }
.byobu-panel:nth-child(odd) { transform-origin: left center; }
.byobu-panel:nth-child(even) .byobu-media { order: -1; }
.byobu-panel:hover { border-color: var(--line); box-shadow: var(--glow); }
.byobu-panel::before {
  content: ""; position: absolute; top: 12%; bottom: 12%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--kin), transparent); opacity: 0.5;
}
.byobu-panel:nth-child(odd)::before { left: 0; }
.byobu-panel:nth-child(even)::before { right: 0; }
.byobu-no {
  font-family: var(--font-display); font-size: 2.4rem; color: var(--kin-light);
  line-height: 1; margin-bottom: 14px; display: flex; align-items: baseline; gap: 14px;
}
.byobu-no .lat { font-size: 0.66rem; letter-spacing: 0.4em; color: var(--ink-faint); text-transform: uppercase; }
.byobu-panel h3 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); margin-bottom: 14px; }
.byobu-panel > div > p { color: var(--ink-dim); max-width: 520px; }
.byobu-list { margin-top: 24px; display: grid; gap: 11px; }
.byobu-list li { display: flex; align-items: baseline; gap: 14px; font-size: 0.92rem; color: var(--washi); }
.byobu-list li::before { content: "—"; color: var(--kin); flex-shrink: 0; }
.byobu-panel .btn { margin-top: 30px; }
.byobu-media { position: relative; overflow: hidden; border: 1px solid var(--line); min-height: 310px; align-self: stretch; background: var(--sumi-2); }
.byobu-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.byobu-panel:hover .byobu-media img { transform: scale(1.05); }

.shikishi { --u: 1.05px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (min-width: 1450px) { .shikishi { --u: 1.15px; } }
.shikishi .sk-cell {
  position: relative; height: 300px; perspective: 1300px; cursor: pointer;
  transition-delay: calc(var(--c, 0) * 0.12s);
}
.shikishi .sk-cell:nth-child(3n + 2) { --c: 1; }
.shikishi .sk-cell:nth-child(3n) { --c: 2; }
.shikishi .sk-carte { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s var(--ease); }
@media (hover: hover) { .shikishi .sk-cell.in:hover .sk-carte { transform: rotateY(180deg); transition-delay: 0.08s; } }
.shikishi .sk-cell.retourne .sk-carte, .shikishi .sk-cell:focus-within .sk-carte { transform: rotateY(180deg); }
.shikishi .sk-face {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: calc(30 * var(--u) + 4px) calc(30 * var(--u) + 6px);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border: 1px solid rgba(201, 169, 98, 0.38);
  background: linear-gradient(160deg, #1a1511, #0f0c0a);
  box-shadow: inset 0 0 0 7px #0d0a08, inset 0 0 0 8px rgba(201, 169, 98, 0.3), 0 18px 34px rgba(0, 0, 0, 0.4);
}
.shikishi .sk-dos { transform: rotateY(180deg); justify-content: center; }
.shikishi .sk-dos { pointer-events: none; }
@media (hover: hover) { .shikishi .sk-cell.in:hover .sk-dos { pointer-events: auto; } .shikishi .sk-cell.in:hover .sk-avant { pointer-events: none; } }
.shikishi .sk-cell.retourne .sk-dos, .shikishi .sk-cell:focus-within .sk-dos { pointer-events: auto; }
.shikishi .sk-cell.retourne .sk-avant { pointer-events: none; }
.shikishi .sk-face > :not(.kinpaku) { position: relative; z-index: 1; }
.shikishi .sk-face::before {
  --c1: 0% 0%; --c2: 100% 100%;
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--sunago) repeat; background-size: 140px 140px;
  -webkit-mask: radial-gradient(ellipse 210px 120px at var(--c1), #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 100%),
                radial-gradient(ellipse 180px 100px at var(--c2), #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 100%);
          mask: radial-gradient(ellipse 210px 120px at var(--c1), #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 100%),
                radial-gradient(ellipse 180px 100px at var(--c2), #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 100%);
  opacity: 0; transition: opacity 0.9s ease calc(var(--c, 0) * 0.12s + 0.3s);
}
.shikishi .sk-cell.in .sk-face::before { opacity: 1; }
.shikishi .sk-cell:nth-child(even) .sk-avant::before, .shikishi .sk-cell:nth-child(odd) .sk-dos::before { --c1: 100% 0%; --c2: 0% 100%; }
.shikishi .sk-cell:nth-child(even) .sk-avant .kinpaku, .shikishi .sk-cell:nth-child(odd) .sk-dos .kinpaku { transform: scaleX(-1); }
.kinpaku { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.kinpaku > span { position: absolute; inset: 0; }
.kinpaku i {
  position: absolute; display: block; overflow: hidden;
  background: linear-gradient(135deg, #f6e8b6 0%, #dcbc6a 30%, #a8843a 52%, #e9d08c 74%, #b8913f 100%);
  background-size: 260% 260%; background-position: var(--gp, 50% 50%);
  opacity: 0; transform: rotate(var(--r));
  transition: filter 0.6s ease;
}
.kinpaku i.ag { background-image: linear-gradient(135deg, #f3eee2 0%, #d2c9b5 30%, #9c937f 52%, #e6dfce 74%, #a99f8a 100%); }
.kinpaku i.ng { background: linear-gradient(180deg, #f0dc9e, #b8923f); }
.kinpaku i::after {
  content: ""; position: absolute; inset: -2px;
  background: linear-gradient(120deg, transparent 18%, rgba(255, 250, 228, 0.95) 50%, transparent 82%);
  opacity: 0;
}
.shikishi .sk-cell.in .kinpaku i {
  opacity: 1;
  animation: kp-chute calc(var(--t) * 0.55) cubic-bezier(0.45, 0.05, 0.55, 0.95) calc(var(--d) * 0.4 + var(--c, 0) * 0.12s) backwards;
}
.shikishi .sk-cell.in .kinpaku i::after { animation: kp-lustre 0.5s ease-out calc(var(--b) * 0.55 + var(--c, 0) * 0.12s); }
.shikishi .sk-cell.in:hover .kinpaku i { filter: brightness(1.28) saturate(1.08); }
.kinpaku b {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  background: radial-gradient(circle, rgba(255, 250, 230, 0.95) 0 1.6px, transparent 3.2px),
              linear-gradient(90deg, transparent 47%, rgba(255, 246, 214, 0.9) 50%, transparent 53%),
              linear-gradient(0deg, transparent 47%, rgba(255, 246, 214, 0.9) 50%, transparent 53%);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%);
          mask: radial-gradient(circle, #000 18%, transparent 68%);
  opacity: 0; transform: scale(0);
}
.shikishi .sk-cell.in .kinpaku b { animation: kp-eclat 0.7s ease-out calc(var(--b) * 0.55 + var(--c, 0) * 0.12s) both; }
.shikishi.kp-js .sk-cell.in .kinpaku i { animation: none; }
.shikishi .sk-cell.in .sk-dos .kinpaku i,
.shikishi .sk-cell.in .sk-dos .kinpaku i::after,
.shikishi .sk-cell.in .sk-dos .kinpaku b { animation: none; }
@keyframes kp-chute {
  0%   { opacity: 0; transform: translate(var(--dx), calc(var(--h) * -1)) rotate(var(--r0)) scaleY(1); }
  14%  { opacity: 1; }
  32%  { transform: translate(calc(var(--dx) * -0.55), calc(var(--h) * -0.66)) rotate(calc(var(--r0) * 0.45)) scaleY(0.3); }
  58%  { transform: translate(calc(var(--dx) * 0.32), calc(var(--h) * -0.32)) rotate(calc(var(--r) + 34deg)) scaleY(0.92); }
  82%  { transform: translate(calc(var(--dx) * -0.1), calc(var(--h) * -0.08)) rotate(calc(var(--r) - 9deg)) scaleY(0.55); }
  100% { opacity: 1; transform: translate(0, 0) rotate(var(--r)) scaleY(1); }
}
@keyframes kp-lustre { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kp-eclat {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  40% { opacity: 1; transform: scale(1) rotate(45deg); }
  100% { opacity: 0; transform: scale(0.35) rotate(90deg); }
}
.shikishi { --sunago: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='16.7' cy='70.4' r='0.57' fill='%23ecd9a8' fill-opacity='0.77'/%3E%3Ccircle cx='14.4' cy='31.3' r='0.66' fill='%23ecd9a8' fill-opacity='0.61'/%3E%3Ccircle cx='109.7' cy='76.7' r='0.8' fill='%23ecd9a8' fill-opacity='0.72'/%3E%3Ccircle cx='105.1' cy='82.1' r='0.4' fill='%23ecd9a8' fill-opacity='0.64'/%3E%3Ccircle cx='15.5' cy='114.3' r='0.52' fill='%23ecd9a8' fill-opacity='0.75'/%3E%3Ccircle cx='95.9' cy='95.1' r='0.39' fill='%23ecd9a8' fill-opacity='0.44'/%3E%3Ccircle cx='137.2' cy='130.1' r='0.9' fill='%23ecd9a8' fill-opacity='0.85'/%3E%3Ccircle cx='71.9' cy='10.7' r='0.45' fill='%23ecd9a8' fill-opacity='0.61'/%3E%3Ccircle cx='40.9' cy='64' r='1' fill='%23ecd9a8' fill-opacity='0.69'/%3E%3Ccircle cx='80.8' cy='3.5' r='0.78' fill='%23ecd9a8' fill-opacity='0.5'/%3E%3Ccircle cx='59.1' cy='55.8' r='0.64' fill='%23ecd9a8' fill-opacity='0.57'/%3E%3Ccircle cx='16.3' cy='70.9' r='0.83' fill='%23ecd9a8' fill-opacity='0.63'/%3E%3Ccircle cx='68.7' cy='128.3' r='0.41' fill='%23ecd9a8' fill-opacity='0.53'/%3E%3Ccircle cx='129.7' cy='67.1' r='0.58' fill='%23ecd9a8' fill-opacity='0.31'/%3E%3Ccircle cx='31.4' cy='18.1' r='0.35' fill='%23ecd9a8' fill-opacity='0.69'/%3E%3Ccircle cx='124.2' cy='14.4' r='0.68' fill='%23ecd9a8' fill-opacity='0.56'/%3E%3Ccircle cx='67.5' cy='32' r='1.02' fill='%23ecd9a8' fill-opacity='0.64'/%3E%3Ccircle cx='64' cy='65.7' r='1.08' fill='%23ecd9a8' fill-opacity='0.84'/%3E%3Ccircle cx='76.4' cy='78.4' r='0.73' fill='%23ecd9a8' fill-opacity='0.47'/%3E%3Ccircle cx='112' cy='70.3' r='0.54' fill='%23ecd9a8' fill-opacity='0.79'/%3E%3Ccircle cx='60.6' cy='41.2' r='0.41' fill='%23ecd9a8' fill-opacity='0.32'/%3E%3Ccircle cx='91.8' cy='83.6' r='0.53' fill='%23ecd9a8' fill-opacity='0.59'/%3E%3Ccircle cx='68.5' cy='129' r='0.41' fill='%23ecd9a8' fill-opacity='0.57'/%3E%3Ccircle cx='71.6' cy='115.7' r='0.9' fill='%23ecd9a8' fill-opacity='0.61'/%3E%3Ccircle cx='127' cy='116.4' r='0.44' fill='%23ecd9a8' fill-opacity='0.8'/%3E%3Ccircle cx='13.8' cy='96.5' r='0.87' fill='%23ecd9a8' fill-opacity='0.58'/%3E%3Ccircle cx='63.4' cy='135.1' r='1.15' fill='%23ecd9a8' fill-opacity='0.76'/%3E%3Ccircle cx='67.1' cy='9' r='0.41' fill='%23ecd9a8' fill-opacity='0.57'/%3E%3Ccircle cx='13.5' cy='104.7' r='0.49' fill='%23ecd9a8' fill-opacity='0.55'/%3E%3Ccircle cx='2' cy='0' r='0.64' fill='%23ecd9a8' fill-opacity='0.81'/%3E%3Ccircle cx='11.6' cy='111.1' r='0.4' fill='%23ecd9a8' fill-opacity='0.64'/%3E%3Ccircle cx='105.3' cy='133.9' r='0.73' fill='%23ecd9a8' fill-opacity='0.65'/%3E%3Ccircle cx='21.7' cy='43.9' r='0.64' fill='%23ecd9a8' fill-opacity='0.72'/%3E%3Ccircle cx='133' cy='68.9' r='0.79' fill='%23ecd9a8' fill-opacity='0.37'/%3E%3Ccircle cx='31.2' cy='82.3' r='1.13' fill='%23ecd9a8' fill-opacity='0.78'/%3E%3Ccircle cx='70.7' cy='11.8' r='0.73' fill='%23ecd9a8' fill-opacity='0.81'/%3E%3Ccircle cx='109.7' cy='128.1' r='0.43' fill='%23ecd9a8' fill-opacity='0.53'/%3E%3Ccircle cx='113.1' cy='72.8' r='0.38' fill='%23ecd9a8' fill-opacity='0.31'/%3E%3Ccircle cx='14.9' cy='124.3' r='0.35' fill='%23ecd9a8' fill-opacity='0.49'/%3E%3Ccircle cx='49.5' cy='107.7' r='0.35' fill='%23ecd9a8' fill-opacity='0.58'/%3E%3Ccircle cx='45.9' cy='42.5' r='0.44' fill='%23ecd9a8' fill-opacity='0.37'/%3E%3Ccircle cx='132.8' cy='80' r='0.9' fill='%23ecd9a8' fill-opacity='0.38'/%3E%3Ccircle cx='72.7' cy='60.7' r='0.45' fill='%23ecd9a8' fill-opacity='0.63'/%3E%3Ccircle cx='95' cy='9.7' r='0.49' fill='%23ecd9a8' fill-opacity='0.41'/%3E%3Ccircle cx='129' cy='6.3' r='0.6' fill='%23ecd9a8' fill-opacity='0.76'/%3E%3Ccircle cx='63.3' cy='105.7' r='0.38' fill='%23ecd9a8' fill-opacity='0.69'/%3E%3Ccircle cx='122.9' cy='18.1' r='0.59' fill='%23ecd9a8' fill-opacity='0.73'/%3E%3Ccircle cx='72.4' cy='133.9' r='0.37' fill='%23ecd9a8' fill-opacity='0.76'/%3E%3Ccircle cx='54.6' cy='59.5' r='0.5' fill='%23ecd9a8' fill-opacity='0.34'/%3E%3Ccircle cx='42.7' cy='48.2' r='0.41' fill='%23ecd9a8' fill-opacity='0.57'/%3E%3Ccircle cx='109.2' cy='58.2' r='0.54' fill='%23ecd9a8' fill-opacity='0.48'/%3E%3Ccircle cx='67.5' cy='16.8' r='0.89' fill='%23ecd9a8' fill-opacity='0.74'/%3E%3Ccircle cx='114.3' cy='118.7' r='0.4' fill='%23ecd9a8' fill-opacity='0.82'/%3E%3Ccircle cx='123' cy='90.4' r='0.49' fill='%23ecd9a8' fill-opacity='0.73'/%3E%3Ccircle cx='118.9' cy='93.9' r='1.14' fill='%23ecd9a8' fill-opacity='0.49'/%3E%3Ccircle cx='21.9' cy='78.7' r='0.63' fill='%23ecd9a8' fill-opacity='0.6'/%3E%3Ccircle cx='15.4' cy='100.2' r='0.61' fill='%23ecd9a8' fill-opacity='0.61'/%3E%3Ccircle cx='30' cy='41.3' r='0.41' fill='%23ecd9a8' fill-opacity='0.61'/%3E%3Ccircle cx='14.2' cy='36.9' r='1.13' fill='%23ecd9a8' fill-opacity='0.39'/%3E%3Ccircle cx='95.8' cy='106.3' r='0.79' fill='%23ecd9a8' fill-opacity='0.4'/%3E%3Ccircle cx='88.2' cy='70.9' r='0.42' fill='%23ecd9a8' fill-opacity='0.76'/%3E%3Ccircle cx='40.7' cy='44' r='0.41' fill='%23ecd9a8' fill-opacity='0.33'/%3E%3Ccircle cx='57.6' cy='125.7' r='0.86' fill='%23ecd9a8' fill-opacity='0.53'/%3E%3Ccircle cx='2.2' cy='13.5' r='0.35' fill='%23ecd9a8' fill-opacity='0.37'/%3E%3Crect x='80.1' y='127.6' width='2.2' height='2.2' fill='%23e2c784' fill-opacity='0.64' transform='rotate(70 80.1 127.6)'/%3E%3Crect x='90.4' y='85.2' width='2.1' height='2.1' fill='%23e2c784' fill-opacity='0.87' transform='rotate(28 90.4 85.2)'/%3E%3Crect x='65.1' y='133.2' width='1.5' height='1.5' fill='%23e2c784' fill-opacity='0.85' transform='rotate(62 65.1 133.2)'/%3E%3Crect x='93.9' y='125.9' width='2.4' height='2.4' fill='%23e2c784' fill-opacity='0.66' transform='rotate(85 93.9 125.9)'/%3E%3Crect x='101.1' y='61.6' width='1.7' height='1.7' fill='%23e2c784' fill-opacity='0.51' transform='rotate(63 101.1 61.6)'/%3E%3Crect x='130.5' y='109.6' width='1.6' height='1.6' fill='%23e2c784' fill-opacity='0.55' transform='rotate(69 130.5 109.6)'/%3E%3Crect x='123.2' y='75.6' width='1.6' height='1.6' fill='%23e2c784' fill-opacity='0.64' transform='rotate(50 123.2 75.6)'/%3E%3Crect x='18.9' y='85.7' width='2.2' height='2.2' fill='%23e2c784' fill-opacity='0.55' transform='rotate(11 18.9 85.7)'/%3E%3C/svg%3E"); }
.kp-a .kp-haut i:nth-of-type(1) { left: calc(2.76% + calc(2 * var(--u))); top: calc(-3.2 * var(--u)); width: calc(19.8 * var(--u)); height: calc(20.9 * var(--u)); --r: 4deg; --r0: -260deg; --dx: -28px; --h: 101px; --t: 1.41s; --d: 0.2s; --b: 1.74s; --gp: 66% 93%; clip-path: polygon(6.8% 4%, 97.5% 1.5%, 99.8% 97.2%, 4.8% 97.4%); }
.kp-a .kp-haut i:nth-of-type(2) { left: calc(22.93% + calc(2 * var(--u))); top: calc(-0.6 * var(--u)); width: calc(5.8 * var(--u)); height: calc(5.8 * var(--u)); --r: 11deg; --r0: -280deg; --dx: -30px; --h: 132px; --t: 1.06s; --d: 0.49s; --b: 2s; --gp: 17% 31%; clip-path: polygon(5.7% 7.1%, 93.2% 5.6%, 98.9% 97.3%, 4.2% 98.1%); }
.kp-a .kp-haut i:nth-of-type(3) { left: calc(14.2 * var(--u)); top: calc(8.2% + calc(8 * var(--u))); width: calc(9.7 * var(--u)); height: calc(8.4 * var(--u)); --r: -7deg; --r0: -263deg; --dx: -19px; --h: 122px; --t: 1.14s; --d: 0.48s; --b: 1.81s; --gp: 54% 16%; clip-path: polygon(8.9% 5.1%, 91.2% 6.4%, 100% 96.3%, 3.7% 97.8%); }
.kp-a .kp-haut i:nth-of-type(4) { left: calc(3.3 * var(--u)); top: calc(3.31% + calc(8 * var(--u))); width: calc(1.7 * var(--u)); height: calc(19.5 * var(--u)); --r: 66deg; --r0: 231deg; --dx: 18px; --h: 141px; --t: 1.27s; --d: 0.14s; --b: 1.74s; }
.kp-a .kp-haut i:nth-of-type(5) { left: calc(39.05% + calc(2 * var(--u))); top: calc(-1.7 * var(--u)); width: calc(6.4 * var(--u)); height: calc(5.3 * var(--u)); --r: -23deg; --r0: 139deg; --dx: 23px; --h: 87px; --t: 1.31s; --d: 0.44s; --b: 2.21s; --gp: 65% 53%; clip-path: polygon(7.3% 1.9%, 93.9% 7%, 98.5% 98.6%, 8% 92%); }
.kp-a .kp-haut i:nth-of-type(6) { left: calc(3.6 * var(--u)); top: calc(1.92% + calc(8 * var(--u))); width: calc(19.5 * var(--u)); height: calc(22.6 * var(--u)); --r: 2deg; --r0: 151deg; --dx: -30px; --h: 147px; --t: 1.37s; --d: 0.31s; --b: 1.75s; --gp: 24% 6%; clip-path: polygon(2.2% 5.1%, 98.5% 7.5%, 91.3% 92.9%, 3.6% 92.1%); }
.kp-a .kp-haut i:nth-of-type(7) { left: calc(10.9 * var(--u)); top: calc(14.34% + calc(8 * var(--u))); width: calc(5.9 * var(--u)); height: calc(6.7 * var(--u)); --r: 20deg; --r0: 239deg; --dx: 23px; --h: 139px; --t: 1.25s; --d: 0.49s; --b: 1.89s; --gp: 8% 56%; clip-path: polygon(8% 7.6%, 90.4% 9.6%, 94.7% 91.3%, 6.3% 90.7%); }
.kp-a .kp-haut i:nth-of-type(8) { left: calc(5.87% + calc(2 * var(--u))); top: calc(-0.1 * var(--u)); width: calc(1.8 * var(--u)); height: calc(21.6 * var(--u)); --r: 58deg; --r0: -155deg; --dx: -32px; --h: 81px; --t: 1.28s; --d: 0.49s; --b: 1.84s; }
.kp-a .kp-haut i:nth-of-type(9) { left: calc(4 * var(--u)); top: calc(4.53% + calc(8 * var(--u))); width: calc(9.6 * var(--u)); height: calc(10.8 * var(--u)); --r: -12deg; --r0: -194deg; --dx: 30px; --h: 120px; --t: 1.39s; --d: 0.19s; --b: 1.76s; --gp: 40% 55%; clip-path: polygon(3.3% 4.1%, 99% 7.7%, 95.1% 93.2%, 6.3% 91.6%); }
.kp-a .kp-haut i:nth-of-type(10) { left: calc(7.5 * var(--u)); top: calc(20.02% + calc(8 * var(--u))); width: calc(5.6 * var(--u)); height: calc(6.6 * var(--u)); --r: 44deg; --r0: 318deg; --dx: -31px; --h: 98px; --t: 1.1s; --d: 0.34s; --b: 1.96s; --gp: 13% 48%; clip-path: polygon(3.7% 8.4%, 95.3% 3.7%, 94.9% 92.7%, 3% 94.2%); }
.kp-a .kp-haut i:nth-of-type(11) { left: calc(5.18% + calc(2 * var(--u))); top: calc(11 * var(--u)); width: calc(12.5 * var(--u)); height: calc(11.3 * var(--u)); --r: -11deg; --r0: -183deg; --dx: 20px; --h: 128px; --t: 1.16s; --d: 0.44s; --b: 1.77s; --gp: 69% 35%; clip-path: polygon(7.9% 4.1%, 92% 3.8%, 98.5% 92.6%, 6.6% 98.7%); }
.kp-a .kp-haut i:nth-of-type(12) { left: calc(8.8 * var(--u)); top: calc(0.89% + calc(8 * var(--u))); width: calc(5.7 * var(--u)); height: calc(5.8 * var(--u)); --r: -7deg; --r0: -200deg; --dx: 36px; --h: 84px; --t: 1.28s; --d: 0.21s; --b: 1.71s; --gp: 80% 85%; clip-path: polygon(4.8% 0.1%, 92.4% 6.4%, 93.4% 90.6%, 3.3% 92.2%); }
.kp-a .kp-haut i:nth-of-type(13) { left: calc(1.86% + calc(2 * var(--u))); top: calc(-2.2 * var(--u)); width: calc(21.5 * var(--u)); height: calc(19.8 * var(--u)); --r: 9deg; --r0: 179deg; --dx: 18px; --h: 135px; --t: 1.47s; --d: 0.46s; --b: 2.01s; --gp: 89% 95%; clip-path: polygon(8.1% 8.4%, 93% 8%, 93.6% 99.2%, 3.7% 92.7%); }
.kp-a .kp-haut i:nth-of-type(14) { left: calc(15.1 * var(--u)); top: calc(5.25% + calc(8 * var(--u))); width: calc(8.9 * var(--u)); height: calc(9.3 * var(--u)); --r: -24deg; --r0: -220deg; --dx: 17px; --h: 128px; --t: 1.25s; --d: 0.25s; --b: 1.77s; --gp: 52% 83%; clip-path: polygon(6.8% 4.6%, 94.1% 0.8%, 92.2% 99.1%, 4.9% 96.9%); }
.kp-a .kp-haut i:nth-of-type(15) { left: calc(3.29% + calc(2 * var(--u))); top: calc(12.9 * var(--u)); width: calc(8.8 * var(--u)); height: calc(9.6 * var(--u)); --r: 32deg; --r0: 258deg; --dx: -39px; --h: 117px; --t: 1.38s; --d: 0.33s; --b: 1.79s; --gp: 10% 14%; clip-path: polygon(3.9% 5.5%, 96.9% 7.4%, 93.4% 98.1%, 9% 97%); }
.kp-a .kp-haut i:nth-of-type(16) { left: calc(4.2 * var(--u)); top: calc(18.08% + calc(8 * var(--u))); width: calc(1.4 * var(--u)); height: calc(16.2 * var(--u)); --r: 55deg; --r0: -153deg; --dx: 19px; --h: 72px; --t: 1.35s; --d: 0.3s; --b: 1.94s; }
.kp-a .kp-bas i:nth-of-type(1) { right: calc(7.84% + calc(2 * var(--u))); bottom: calc(3.3 * var(--u)); width: calc(11.4 * var(--u)); height: calc(10.9 * var(--u)); --r: 9deg; --r0: -193deg; --dx: -28px; --h: 143px; --t: 1.05s; --d: 0.57s; --b: 1.8s; --gp: 25% 97%; clip-path: polygon(7.5% 0.7%, 94% 1.2%, 90.4% 90.9%, 7.2% 96.9%); }
.kp-a .kp-bas i:nth-of-type(2) { right: calc(6.6 * var(--u)); bottom: calc(14.86% + calc(8 * var(--u))); width: calc(1.4 * var(--u)); height: calc(16.6 * var(--u)); --r: -36deg; --r0: 241deg; --dx: -17px; --h: 170px; --t: 1.16s; --d: 0.52s; --b: 1.89s; }
.kp-a .kp-bas i:nth-of-type(3) { right: calc(10.9 * var(--u)); bottom: calc(19.93% + calc(8 * var(--u))); width: calc(3.9 * var(--u)); height: calc(4.2 * var(--u)); --r: -9deg; --r0: -281deg; --dx: 37px; --h: 142px; --t: 1.3s; --d: 0.3s; --b: 1.96s; --gp: 15% 80%; clip-path: polygon(1.8% 5.5%, 98.6% 8.1%, 99.1% 93%, 6.3% 93.3%); }
.kp-a .kp-bas i:nth-of-type(4) { right: calc(6.4 * var(--u)); bottom: calc(0.23% + calc(8 * var(--u))); width: calc(4.3 * var(--u)); height: calc(5 * var(--u)); --r: -38deg; --r0: -227deg; --dx: -39px; --h: 154px; --t: 1.38s; --d: 0.56s; --b: 2.02s; --gp: 34% 74%; clip-path: polygon(7.1% 5.9%, 97.6% 4.7%, 90.6% 93.9%, 5% 93.4%); }
.kp-a .kp-bas i:nth-of-type(5) { right: calc(8.9% + calc(2 * var(--u))); bottom: calc(-0.9 * var(--u)); width: calc(1.5 * var(--u)); height: calc(13.5 * var(--u)); --r: 18deg; --r0: -193deg; --dx: -17px; --h: 193px; --t: 1.06s; --d: 0.37s; --b: 1.82s; }
.kp-a .kp-bas i:nth-of-type(6) { right: calc(0.09% + calc(2 * var(--u))); bottom: calc(1.9 * var(--u)); width: calc(17.7 * var(--u)); height: calc(20.3 * var(--u)); --r: 6deg; --r0: 176deg; --dx: 15px; --h: 215px; --t: 1.34s; --d: 0.33s; --b: 1.75s; --gp: 97% 65%; clip-path: polygon(9.1% 7.9%, 97.1% 3.7%, 99.9% 94.8%, 8.9% 91.6%); }
.kp-a .kp-bas i:nth-of-type(7) { right: calc(6.64% + calc(2 * var(--u))); bottom: calc(-2 * var(--u)); width: calc(20.9 * var(--u)); height: calc(18.2 * var(--u)); --r: 7deg; --r0: 268deg; --dx: -26px; --h: 213px; --t: 1.53s; --d: 0.47s; --b: 2.08s; --gp: 35% 83%; clip-path: polygon(5.3% 5.3%, 99% 2.8%, 99.6% 94.1%, 0.7% 90.8%); }
.kp-a .kp-bas i:nth-of-type(8) { right: calc(14.8% + calc(2 * var(--u))); bottom: calc(7.1 * var(--u)); width: calc(10.2 * var(--u)); height: calc(9.3 * var(--u)); --r: 28deg; --r0: -169deg; --dx: 36px; --h: 226px; --t: 1.18s; --d: 0.32s; --b: 1.89s; --gp: 52% 93%; clip-path: polygon(9.6% 9%, 90.3% 6.5%, 90.3% 99.5%, 0.9% 93.5%); }
.kp-a .kp-bas i:nth-of-type(9) { right: calc(8.2 * var(--u)); bottom: calc(3.79% + calc(8 * var(--u))); width: calc(10.8 * var(--u)); height: calc(10.1 * var(--u)); --r: 25deg; --r0: -185deg; --dx: -29px; --h: 242px; --t: 1.2s; --d: 0.41s; --b: 1.75s; --gp: 59% 48%; clip-path: polygon(0.2% 9.5%, 96.2% 0.3%, 95.3% 98.6%, 2.4% 94.8%); }
.kp-a .kp-bas i:nth-of-type(10) { right: calc(43.05% + calc(2 * var(--u))); bottom: calc(-2.3 * var(--u)); width: calc(4.1 * var(--u)); height: calc(3.4 * var(--u)); --r: 11deg; --r0: -209deg; --dx: -28px; --h: 224px; --t: 1.22s; --d: 0.45s; --b: 2.26s; --gp: 23% 39%; clip-path: polygon(0.9% 0.3%, 95.9% 5.6%, 95.6% 93.8%, 1.7% 98.4%); }
.kp-a .kp-bas i:nth-of-type(11) { right: calc(11.63% + calc(2 * var(--u))); bottom: calc(5 * var(--u)); width: calc(9.6 * var(--u)); height: calc(9.4 * var(--u)); --r: 15deg; --r0: -219deg; --dx: -26px; --h: 254px; --t: 1.15s; --d: 0.32s; --b: 1.85s; --gp: 81% 80%; clip-path: polygon(8.1% 4.2%, 90.2% 2.4%, 99.5% 92.5%, 1.7% 97.3%); }
.kp-a .kp-haut b { left: calc(calc(1.86% + calc(2 * var(--u))) + calc(10.7 * var(--u))); top: calc(calc(-2.2 * var(--u)) + calc(9.9 * var(--u))); --b: 2.13s; }
.kp-b .kp-haut i:nth-of-type(1) { left: calc(2.09% + calc(2 * var(--u))); top: calc(-4.4 * var(--u)); width: calc(22.9 * var(--u)); height: calc(26 * var(--u)); --r: -9deg; --r0: 136deg; --dx: -40px; --h: 150px; --t: 1.43s; --d: 0.16s; --b: 1.73s; --gp: 12% 40%; clip-path: polygon(4.6% 3.5%, 94.8% 8.8%, 99% 97.6%, 3.1% 100%); }
.kp-b .kp-haut i:nth-of-type(2) { left: calc(1.34% + calc(2 * var(--u))); top: calc(-3.8 * var(--u)); width: calc(18.7 * var(--u)); height: calc(19 * var(--u)); --r: 10deg; --r0: 156deg; --dx: -22px; --h: 139px; --t: 1.34s; --d: 0.28s; --b: 1.72s; --gp: 85% 67%; clip-path: polygon(1.3% 9.9%, 93.6% 6.8%, 93.9% 92.6%, 8% 94.9%); }
.kp-b .kp-haut i:nth-of-type(3) { left: calc(46.85% + calc(2 * var(--u))); top: calc(2.8 * var(--u)); width: calc(5.3 * var(--u)); height: calc(4.9 * var(--u)); --r: 43deg; --r0: -243deg; --dx: -21px; --h: 145px; --t: 1.19s; --d: 0.39s; --b: 2.3s; --gp: 39% 79%; clip-path: polygon(9.7% 1%, 96.9% 2.6%, 93.2% 95.9%, 4.8% 97.2%); }
.kp-b .kp-haut i:nth-of-type(4) { left: calc(10.8 * var(--u)); top: calc(18.49% + calc(8 * var(--u))); width: calc(4 * var(--u)); height: calc(3.3 * var(--u)); --r: -12deg; --r0: -198deg; --dx: -37px; --h: 124px; --t: 1.25s; --d: 0.31s; --b: 1.94s; --gp: 23% 69%; clip-path: polygon(0.7% 1%, 92.1% 10%, 91.3% 92.8%, 0.4% 95.6%); }
.kp-b .kp-haut i:nth-of-type(5) { left: calc(3 * var(--u)); top: calc(8.96% + calc(8 * var(--u))); width: calc(1.6 * var(--u)); height: calc(23.7 * var(--u)); --r: 54deg; --r0: 344deg; --dx: 32px; --h: 73px; --t: 1.23s; --d: 0.44s; --b: 1.82s; }
.kp-b .kp-haut i:nth-of-type(6) { left: calc(6.86% + calc(2 * var(--u))); top: calc(4.2 * var(--u)); width: calc(13.3 * var(--u)); height: calc(14.6 * var(--u)); --r: 10deg; --r0: 205deg; --dx: -17px; --h: 136px; --t: 1.32s; --d: 0.18s; --b: 1.79s; --gp: 35% 15%; clip-path: polygon(4.7% 8.5%, 99% 10%, 92% 95.8%, 9.5% 99.1%); }
.kp-b .kp-haut i:nth-of-type(7) { left: calc(5.54% + calc(2 * var(--u))); top: calc(-0.5 * var(--u)); width: calc(11.4 * var(--u)); height: calc(10.8 * var(--u)); --r: 17deg; --r0: -262deg; --dx: 28px; --h: 108px; --t: 1.19s; --d: 0.24s; --b: 1.77s; --gp: 54% 5%; clip-path: polygon(7.7% 4.3%, 96.2% 9.1%, 90.5% 97.4%, 2.1% 99.4%); }
.kp-b .kp-haut i:nth-of-type(8) { left: calc(8 * var(--u)); top: calc(10.79% + calc(8 * var(--u))); width: calc(6 * var(--u)); height: calc(6.5 * var(--u)); --r: 23deg; --r0: -183deg; --dx: -21px; --h: 124px; --t: 1.08s; --d: 0.42s; --b: 1.84s; --gp: 93% 54%; clip-path: polygon(6.1% 7.2%, 99.3% 9.7%, 95.9% 95.2%, 6.4% 98.5%); }
.kp-b .kp-haut i:nth-of-type(9) { left: calc(1.71% + calc(2 * var(--u))); top: calc(2.9 * var(--u)); width: calc(12.1 * var(--u)); height: calc(11.8 * var(--u)); --r: 31deg; --r0: 274deg; --dx: 33px; --h: 130px; --t: 1.16s; --d: 0.5s; --b: 1.74s; --gp: 52% 42%; clip-path: polygon(3.5% 1.7%, 91.4% 6%, 92.1% 97.4%, 8% 92.1%); }
.kp-b .kp-haut i:nth-of-type(10) { left: calc(1.85% + calc(2 * var(--u))); top: calc(-1 * var(--u)); width: calc(1.5 * var(--u)); height: calc(23.3 * var(--u)); --r: 66deg; --r0: -79deg; --dx: 19px; --h: 77px; --t: 1.08s; --d: 0.18s; --b: 1.72s; }
.kp-b .kp-haut i:nth-of-type(11) { left: calc(12.55% + calc(2 * var(--u))); top: calc(4.7 * var(--u)); width: calc(12.2 * var(--u)); height: calc(11.6 * var(--u)); --r: 16deg; --r0: 194deg; --dx: -28px; --h: 119px; --t: 1.34s; --d: 0.23s; --b: 1.86s; --gp: 25% 56%; clip-path: polygon(2.5% 4.6%, 95.9% 8.5%, 97.4% 92.9%, 7.7% 94.1%); }
.kp-b .kp-haut i:nth-of-type(12) { left: calc(6.87% + calc(2 * var(--u))); top: calc(23.8 * var(--u)); width: calc(3.2 * var(--u)); height: calc(3.5 * var(--u)); --r: -36deg; --r0: -299deg; --dx: 15px; --h: 107px; --t: 1.08s; --d: 0.35s; --b: 1.79s; --gp: 10% 47%; clip-path: polygon(0.8% 3.9%, 99.3% 9.9%, 96.3% 93.3%, 2.8% 97.8%); }
.kp-b .kp-haut i:nth-of-type(13) { left: calc(22.32% + calc(2 * var(--u))); top: calc(13.1 * var(--u)); width: calc(4.3 * var(--u)); height: calc(3.7 * var(--u)); --r: 4deg; --r0: -164deg; --dx: -28px; --h: 107px; --t: 1.31s; --d: 0.24s; --b: 1.99s; --gp: 68% 39%; clip-path: polygon(5.9% 4.7%, 98.1% 7.6%, 90.6% 95.3%, 9.1% 94%); }
.kp-b .kp-haut i:nth-of-type(14) { left: calc(3 * var(--u)); top: calc(4.24% + calc(8 * var(--u))); width: calc(21.5 * var(--u)); height: calc(24.1 * var(--u)); --r: -7deg; --r0: 266deg; --dx: 34px; --h: 146px; --t: 1.5s; --d: 0.3s; --b: 1.88s; --gp: 53% 1%; clip-path: polygon(5.3% 3.9%, 91.1% 3.6%, 90.5% 97.6%, 5.8% 96.4%); }
.kp-b .kp-haut i:nth-of-type(15) { left: calc(2.07% + calc(2 * var(--u))); top: calc(6.7 * var(--u)); width: calc(9 * var(--u)); height: calc(10 * var(--u)); --r: -12deg; --r0: 244deg; --dx: -31px; --h: 70px; --t: 1.24s; --d: 0.18s; --b: 1.73s; --gp: 41% 42%; clip-path: polygon(4.6% 3.8%, 98.9% 3.7%, 91.8% 95.7%, 6.8% 94.2%); }
.kp-b .kp-haut i:nth-of-type(16) { left: calc(12.86% + calc(2 * var(--u))); top: calc(6.9 * var(--u)); width: calc(2 * var(--u)); height: calc(14.4 * var(--u)); --r: 70deg; --r0: -139deg; --dx: -31px; --h: 113px; --t: 1.25s; --d: 0.41s; --b: 1.87s; }
.kp-b .kp-bas i:nth-of-type(1) { right: calc(3.4 * var(--u)); bottom: calc(1.77% + calc(8 * var(--u))); width: calc(20.7 * var(--u)); height: calc(22.1 * var(--u)); --r: -9deg; --r0: -261deg; --dx: 19px; --h: 187px; --t: 1.46s; --d: 0.54s; --b: 2.08s; --gp: 75% 29%; clip-path: polygon(8.2% 5.6%, 98% 4%, 91.5% 91.3%, 6.1% 92.6%); }
.kp-b .kp-bas i:nth-of-type(2) { right: calc(4.8 * var(--u)); bottom: calc(2.4% + calc(8 * var(--u))); width: calc(10.5 * var(--u)); height: calc(11.3 * var(--u)); --r: 23deg; --r0: -269deg; --dx: -36px; --h: 150px; --t: 1.01s; --d: 0.28s; --b: 1.73s; --gp: 1% 21%; clip-path: polygon(9.5% 3.1%, 96.1% 7.6%, 90.4% 91.2%, 4.9% 96.6%); }
.kp-b .kp-bas i:nth-of-type(3) { right: calc(9 * var(--u)); bottom: calc(0.02% + calc(8 * var(--u))); width: calc(8.1 * var(--u)); height: calc(8.7 * var(--u)); --r: 8deg; --r0: -164deg; --dx: -27px; --h: 232px; --t: 1.04s; --d: 0.47s; --b: 1.7s; --gp: 97% 4%; clip-path: polygon(4.5% 2%, 96.9% 9.9%, 95.2% 93.1%, 6.9% 99%); }
.kp-b .kp-bas i:nth-of-type(4) { right: calc(41% + calc(2 * var(--u))); bottom: calc(-1.3 * var(--u)); width: calc(4.4 * var(--u)); height: calc(4.9 * var(--u)); --r: -23deg; --r0: -287deg; --dx: 26px; --h: 193px; --t: 1.04s; --d: 0.44s; --b: 2.23s; --gp: 87% 79%; clip-path: polygon(6% 1.7%, 92.9% 1.7%, 94.1% 94.9%, 7.3% 91%); }
.kp-b .kp-bas i:nth-of-type(5) { right: calc(12.8 * var(--u)); bottom: calc(26.38% + calc(8 * var(--u))); width: calc(4.8 * var(--u)); height: calc(5.3 * var(--u)); --r: 2deg; --r0: 161deg; --dx: -24px; --h: 164px; --t: 1.04s; --d: 0.46s; --b: 2.04s; --gp: 22% 99%; clip-path: polygon(10% 4%, 98.5% 8.1%, 94.3% 90.1%, 8.6% 92.1%); }
.kp-b .kp-bas i:nth-of-type(6) { right: calc(8.13% + calc(2 * var(--u))); bottom: calc(0.2 * var(--u)); width: calc(2 * var(--u)); height: calc(21.6 * var(--u)); --r: 21deg; --r0: 163deg; --dx: -22px; --h: 218px; --t: 1.21s; --d: 0.45s; --b: 1.81s; }
.kp-b .kp-bas i:nth-of-type(7) { right: calc(39.36% + calc(2 * var(--u))); bottom: calc(7.9 * var(--u)); width: calc(3.8 * var(--u)); height: calc(3.2 * var(--u)); --r: -33deg; --r0: -320deg; --dx: 38px; --h: 155px; --t: 1.05s; --d: 0.46s; --b: 2.21s; --gp: 67% 47%; clip-path: polygon(3.4% 2.6%, 91% 0.6%, 96% 90.3%, 8.2% 99%); }
.kp-b .kp-bas i:nth-of-type(8) { right: calc(21.16% + calc(2 * var(--u))); bottom: calc(1.9 * var(--u)); width: calc(12.9 * var(--u)); height: calc(13.8 * var(--u)); --r: 8deg; --r0: 268deg; --dx: 16px; --h: 223px; --t: 1.16s; --d: 0.3s; --b: 1.98s; --gp: 70% 28%; clip-path: polygon(7.1% 5.2%, 98.7% 9.5%, 91.9% 90.9%, 9.5% 97.3%); }
.kp-b .kp-bas i:nth-of-type(9) { right: calc(3.5 * var(--u)); bottom: calc(14.05% + calc(8 * var(--u))); width: calc(1.5 * var(--u)); height: calc(18.3 * var(--u)); --r: 63deg; --r0: 229deg; --dx: -39px; --h: 216px; --t: 1.12s; --d: 0.29s; --b: 1.88s; }
.kp-b .kp-bas i:nth-of-type(10) { right: calc(22.72% + calc(2 * var(--u))); bottom: calc(8.7 * var(--u)); width: calc(12 * var(--u)); height: calc(9.9 * var(--u)); --r: -14deg; --r0: -277deg; --dx: -21px; --h: 173px; --t: 1.3s; --d: 0.59s; --b: 2s; --gp: 27% 1%; clip-path: polygon(3.9% 0.9%, 96.3% 7.6%, 93.1% 92.6%, 0% 99.5%); }
.kp-b .kp-bas i:nth-of-type(11) { right: calc(3.1 * var(--u)); bottom: calc(5.06% + calc(8 * var(--u))); width: calc(21.6 * var(--u)); height: calc(23.2 * var(--u)); --r: 0deg; --r0: -277deg; --dx: 19px; --h: 246px; --t: 1.5s; --d: 0.52s; --b: 2.09s; --gp: 46% 22%; clip-path: polygon(7.7% 9.3%, 93.8% 4.7%, 95.5% 90.5%, 8.5% 92.8%); }
.kp-b .kp-haut b { left: calc(calc(1.34% + calc(2 * var(--u))) + calc(9.3 * var(--u))); top: calc(calc(-3.8 * var(--u)) + calc(9.5 * var(--u))); --b: 1.84s; }
.shikishi .sk-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.shikishi .sk-repere { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.shikishi .sk-no { font-family: var(--font-display); color: var(--kin); font-size: 1rem; line-height: 1; }
.shikishi .sk-tourne { font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--kin-deep); white-space: nowrap; }
.shikishi .sk-kj { font-family: var(--font-display); font-size: 4.4rem; line-height: 1; color: var(--kin-light); margin-top: -4px; }
.shikishi .sk-kj > span { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 0.9s var(--ease-ink) calc(var(--c, 0) * 0.12s + 0.25s); }
.shikishi .sk-cell.in .sk-kj > span { clip-path: inset(-10%); }
.shikishi .sk-face h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; line-height: 1.25; color: var(--washi); margin: auto 0 8px; }
.shikishi .sk-desc { color: var(--ink-dim); font-size: 0.9rem; line-height: 1.65; margin: 0; }
.shikishi .sk-avant h3, .shikishi .sk-desc { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.shikishi .sk-cell.in .sk-avant h3 { transition-delay: calc(var(--c, 0) * 0.12s + 0.2s); }
.shikishi .sk-cell.in .sk-desc { transition-delay: calc(var(--c, 0) * 0.12s + 0.3s); }
.shikishi .sk-cell.in .sk-avant h3, .shikishi .sk-cell.in .sk-desc { opacity: 1; transform: none; }
.shikishi .sk-desc-dos { display: none; }
.shikishi .sk-liste { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.shikishi .sk-liste li { position: relative; padding-left: 18px; color: var(--washi); font-size: 0.86rem; line-height: 1.45; }
.shikishi .sk-liste li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--kin); transform: rotate(45deg); }
.shikishi .sk-dos .btn { align-self: flex-start; }
@media (max-width: 1100px) {
  .shikishi { grid-template-columns: repeat(2, minmax(0, 1fr)); --u: 1px; }
  .shikishi .sk-cell { height: 284px; }
  .shikishi .sk-cell:nth-child(n) { --c: 0; }
  .shikishi .sk-cell:nth-child(even) { --c: 1; }
}
@media (max-width: 640px) {
  .shikishi { gap: 12px; --u: 0.6px; }
  .shikishi .sk-cell { height: 214px; }
  .shikishi .sk-face { padding: 18px 16px; }
  .shikishi .sk-repere { gap: 8px; }
  .shikishi .sk-tourne { font-size: 0.52rem; letter-spacing: 0.16em; }
  .shikishi .sk-kj { font-size: 3rem; }
  .shikishi .sk-face h3 { font-size: 1.08rem; margin-bottom: 0; }
  .shikishi .sk-desc, .shikishi .sk-liste { display: none; }
  .shikishi .sk-dos { justify-content: space-between; }
  .shikishi .sk-desc-dos { display: block; color: var(--ink-dim); font-size: 0.78rem; line-height: 1.55; margin: 0; }
  .shikishi .sk-dos .btn { --btn-deco: none; padding: 10px 12px; font-size: 0.58rem; letter-spacing: 0.1em; white-space: nowrap; }
  .shikishi .sk-dos .btn .arrow { display: none; }
}
@media (max-width: 380px) {
  .shikishi .sk-cell { height: 224px; }
  .shikishi .sk-face { padding: 16px 14px; }
  .shikishi .sk-face h3 { font-size: 4.4vw; }
  .shikishi .sk-desc-dos { font-size: 0.72rem; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .shikishi .sk-carte { transition: none; }
  .shikishi .sk-face::before { opacity: 1; transition: none; }
  .kinpaku i { opacity: 1; animation: none !important; transition: none; }
  .kinpaku i::after, .kinpaku b { animation: none !important; opacity: 0; }
  .shikishi .sk-kj > span { clip-path: none; transition: none; }
  .shikishi .sk-avant h3, .shikishi .sk-desc { opacity: 1; transform: none; transition: none; }
}

.roku {
  --roku-nuees: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' preserveAspectRatio='none'%3E%3Cg fill='%23ecd9a8' fill-opacity='.55'%3E%3Crect x='118' y='112' width='3' height='3'/%3E%3Crect x='236' y='14' width='2' height='2'/%3E%3Crect x='402' y='132' width='3' height='3'/%3E%3Crect x='512' y='30' width='2' height='2'/%3E%3Crect x='690' y='140' width='3' height='3'/%3E%3Crect x='842' y='96' width='2' height='2'/%3E%3Crect x='1010' y='120' width='3' height='3'/%3E%3Crect x='1150' y='84' width='2' height='2'/%3E%3Crect x='300' y='640' width='2' height='2'/%3E%3Crect x='760' y='638' width='3' height='3'/%3E%3Crect x='980' y='680' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E");
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  perspective: 1700px; padding: 13px 0;
}
.roku.reveal { opacity: 1; transform: none; transition: none; }
.roku::before, .roku::after {
  content: ""; position: absolute; left: -8px; right: -8px; height: 10px; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, #2c2318, #0c0907);
  border-top: 1px solid rgba(236, 217, 168, 0.55); border-bottom: 1px solid rgba(201, 169, 98, 0.3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  transform: scaleX(0); transition: transform 1.1s var(--ease-ink);
}
.roku::before { top: 0; }
.roku::after { bottom: 0; transition-delay: 0.15s; }
.roku.in::before, .roku.in::after { transform: none; }
.roku-panel {
  --d: var(--k, 0);
  position: relative; min-width: 0; padding: 50px 20px 44px;
  display: flex; flex-direction: column; align-items: center;
  background:
    var(--roku-nuees) calc(var(--k, 0) * 20%) 0 / 600% 100% no-repeat,
    linear-gradient(180deg, #1b1610, #100d0a 55%, #0b0907);
  border-left: 1px solid rgba(201, 169, 98, 0.16);
  transform-origin: 50% 50%;
}
.roku-panel:last-child { border-right: 1px solid rgba(201, 169, 98, 0.16); }
.roku-panel:nth-child(odd) { --a: 8deg; --a0: 84deg; }
.roku-panel:nth-child(even) { --a: -8deg; --a0: -84deg; }
.roku-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(201, 169, 98, 0.08) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(180deg, rgba(201, 169, 98, 0.08) 0 1px, transparent 1px 44px);
  -webkit-mask: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35) 24%, transparent 44%);
  mask: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35) 24%, transparent 44%);
}
.roku-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity 0.7s;
  background: linear-gradient(90deg, rgba(255, 236, 200, 0.05), transparent 42%, rgba(0, 0, 0, 0.3));
}
.roku-panel:nth-child(even)::after { background: linear-gradient(270deg, rgba(255, 236, 200, 0.05), transparent 42%, rgba(0, 0, 0, 0.3)); }
.roku-charniere {
  position: absolute; z-index: 2; left: -4px; top: 0; bottom: 0; width: 7px; pointer-events: none;
  background:
    linear-gradient(180deg, #f1dfac, #a88a4c 55%, #5d4a28) 0 18% / 7px 24px no-repeat,
    linear-gradient(180deg, #f1dfac, #a88a4c 55%, #5d4a28) 0 50% / 7px 24px no-repeat,
    linear-gradient(180deg, #f1dfac, #a88a4c 55%, #5d4a28) 0 82% / 7px 24px no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.roku-panel:first-child .roku-charniere { display: none; }
.roku-kj {
  position: relative; font-family: var(--font-display); font-weight: 600; font-size: 3.5rem; line-height: 1;
  color: var(--kin-light); text-shadow: 0 0 24px rgba(201, 169, 98, 0.4); margin-bottom: 20px;
}
.roku-no {
  position: relative; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 0.95rem; color: var(--kin); letter-spacing: 0.2em;
}
.roku-no::before, .roku-no::after { content: ""; width: 18px; height: 1px; background: rgba(201, 169, 98, 0.5); }
.roku-panel h3 {
  position: relative; font-size: 1.1rem; line-height: 1.3; text-align: center;
  margin: 12px 0 16px; min-height: 2.6em; display: flex; align-items: center; justify-content: center;
}
.roku-panel p { position: relative; align-self: stretch; font-size: 0.84rem; line-height: 1.72; color: var(--ink-dim); hyphens: manual; }
.roku-panel .roku-accroche { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.98rem; line-height: 1.6; color: var(--washi); text-align: center; hyphens: manual; }
.roku-lire {
  position: relative; display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  min-height: 38px; padding: 8px 16px; background: transparent; border: 1px solid rgba(201, 169, 98, 0.45);
  color: var(--kin-light); font: inherit; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  cursor: pointer; touch-action: manipulation; transition: background 0.4s, border-color 0.4s, color 0.4s;
}
.roku-lire::before {
  content: ""; width: 7px; height: 7px; border: 1px solid var(--kin); transform: rotate(45deg);
  transition: transform 0.5s var(--ease), background 0.4s;
}
.roku-lire:hover, .roku-lire:focus-visible { background: rgba(201, 169, 98, 0.1); border-color: var(--kin); }
.roku-lire-f { display: none; }
.roku-panel.ouvert .roku-lire-o { display: none; }
.roku-panel.ouvert .roku-lire-f { display: inline; }
.roku-panel.ouvert .roku-lire::before { transform: rotate(225deg); background: var(--kin); }
.roku:not(.roku-js) .roku-lire { display: none; }
.roku-texte { display: grid; grid-template-rows: 1fr; align-self: stretch; }
.roku-texte > div { min-height: 0; overflow: hidden; position: relative; }
.roku-texte p { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(201, 169, 98, 0.25); }
.roku-js .roku-texte { grid-template-rows: 0fr; transition: grid-template-rows 0.9s var(--ease-ink); }
.roku-js .roku-panel.ouvert .roku-texte { grid-template-rows: 1fr; }
.roku-js .roku-texte p { opacity: 0; transition: opacity 0.6s ease; }
.roku-js .roku-panel.ouvert .roku-texte p { opacity: 1; transition-delay: 0.25s; }
.roku-js .roku-texte { position: relative; }
.roku-js .roku-texte::after {
  content: ""; position: absolute; left: -6px; right: -6px; bottom: -6px; height: 5px; border-radius: 3px;
  background: linear-gradient(180deg, #f1dfac, #a88a4c 55%, #5d4a28);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
  opacity: 0; transition: opacity 0.4s;
}
.roku-js .roku-panel.ouvert .roku-texte::after { opacity: 1; }
.roku-panel.reveal { opacity: 0; transform: rotateY(var(--a0)); transition: none; }
.roku-panel.reveal.in {
  opacity: 1; transform: rotateY(var(--a));
  animation: roku-tourne 1.6s cubic-bezier(0.2, 0.75, 0.2, 1) calc(0.15s + var(--d) * 0.14s) backwards;
  transition: transform 0.7s var(--ease), box-shadow 0.7s, opacity 0.6s ease;
}
@keyframes roku-tourne {
  0% { opacity: 0; transform: rotateY(var(--a0)); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: rotateY(var(--a)); }
}
.roku-panel .roku-kj { clip-path: inset(0 0 100% 0); }
.roku-panel.in .roku-kj { clip-path: inset(-12%); transition: clip-path 1.1s var(--ease-ink) calc(0.95s + var(--d) * 0.14s); }
.roku-panel .roku-no, .roku-panel h3, .roku-panel .roku-accroche, .roku-panel .roku-lire { opacity: 0; transform: translateY(10px); }
.roku-panel.in .roku-no, .roku-panel.in h3, .roku-panel.in .roku-accroche, .roku-panel.in .roku-lire {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ease) calc(1.25s + var(--d) * 0.14s), transform 0.8s var(--ease) calc(1.25s + var(--d) * 0.14s);
}
.roku-panel.in .roku-accroche { transition-delay: calc(1.4s + var(--d) * 0.14s); }
.roku-panel.in .roku-lire { transition: opacity 0.8s var(--ease) calc(1.55s + var(--d) * 0.14s), transform 0.8s var(--ease) calc(1.55s + var(--d) * 0.14s), background 0.4s, border-color 0.4s; }
@media (hover: hover) {
  .roku-panel.reveal.in:hover {
    transform: rotateY(0deg);
    box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.35), 0 26px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(201, 169, 98, 0.12);
  }
  .roku-panel:hover::after { opacity: 0.35; }
}
@media (max-width: 1240px) {
  .roku { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 46px; padding: 0; }
  .roku::before, .roku::after { display: none; }
  .roku-panel {
    background:
      var(--roku-nuees) calc(var(--d) * 50%) 0 / 300% 100% no-repeat,
      linear-gradient(180deg, #1b1610, #100d0a 55%, #0b0907);
    border-top: 2px solid #2c2318; border-bottom: 2px solid #2c2318;
    box-shadow: inset 0 1px 0 rgba(236, 217, 168, 0.35), inset 0 -1px 0 rgba(201, 169, 98, 0.25);
  }
  .roku-panel:nth-child(3n+1) { --d: 0; border-left-color: rgba(201, 169, 98, 0.3); }
  .roku-panel:nth-child(3n+2) { --d: 1; }
  .roku-panel:nth-child(3n) { --d: 2; border-right: 1px solid rgba(201, 169, 98, 0.3); }
  .roku-panel:nth-child(3n+1) .roku-charniere { display: none; }
  .roku-panel { padding: 46px 24px 40px; }
}
@media (max-width: 640px) {
  .roku { grid-template-columns: 1fr; row-gap: 22px; perspective: 1200px; }
  .roku-panel {
    --d: 0; padding: 38px 26px 34px;
    background: var(--roku-nuees) 0 0 / 100% 100% no-repeat, linear-gradient(180deg, #1b1610, #100d0a 55%, #0b0907);
    border-left: 1px solid rgba(201, 169, 98, 0.3); border-right: 1px solid rgba(201, 169, 98, 0.3);
    transform-origin: 50% 0;
  }
  .roku-panel::after { display: none; }
  .roku-charniere { display: none; }
  .roku-kj { font-size: 3rem; margin-bottom: 16px; }
  .roku-panel h3 { min-height: 0; }
  .roku-lire { min-height: 42px; }
  .roku-panel.reveal { transform: rotateX(-74deg); }
  .roku-panel.reveal.in { transform: none; animation-name: roku-tombe; }
}
@keyframes roku-tombe {
  0% { opacity: 0; transform: rotateX(-74deg); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .roku::before, .roku::after { transform: none; transition: none; }
  .roku-panel.reveal, .roku-panel.reveal.in { opacity: 1; transform: rotateY(var(--a)); animation: none; transition: none; }
  .roku-panel .roku-kj, .roku-panel.in .roku-kj { clip-path: none; transition: none; }
  .roku-panel .roku-no, .roku-panel h3, .roku-panel .roku-accroche, .roku-panel .roku-lire { opacity: 1; transform: none; transition: none; }
  .roku-js .roku-texte, .roku-js .roku-texte p { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .roku-panel.reveal, .roku-panel.reveal.in { transform: none; }
}

.roku-lecture {
  --x: 50%; --decal: 8px;
  position: relative; display: grid; grid-template-rows: 0fr; margin: 0 -8px;
  transition: grid-template-rows 0.85s var(--ease-ink);
}
.roku-lecture[hidden] { display: none; }
.roku-lecture.ouverte { grid-template-rows: 1fr; }
.roku-lecture::before, .roku-lecture::after {
  content: ""; position: absolute; z-index: 2; left: calc(var(--x) + var(--decal)); pointer-events: none;
  opacity: 0; transition: opacity 0.4s ease, left 0.6s var(--ease);
}
.roku-lecture::before { top: -2px; width: 2px; height: 22px; margin-left: -1px; background: linear-gradient(180deg, var(--kin), rgba(201, 169, 98, 0.35)); }
.roku-lecture::after {
  top: 16px; width: 11px; height: 11px; margin-left: -5.5px; transform: rotate(45deg);
  background: linear-gradient(135deg, #f1dfac, #a88a4c 60%, #5d4a28); box-shadow: 0 0 12px rgba(201, 169, 98, 0.45);
}
.roku-lecture.ouverte::before, .roku-lecture.ouverte::after { opacity: 1; transition-delay: 0.3s, 0s; }
.roku-lecture-feuille { position: relative; min-height: 0; overflow: hidden; }
.roku-lecture-feuille::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; border-radius: 4px; pointer-events: none;
  background:
    linear-gradient(90deg, #3d2f17 0 16px, transparent 16px calc(100% - 16px), #3d2f17 calc(100% - 16px)),
    linear-gradient(180deg, #f1dfac, #a88a4c 55%, #5d4a28);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5);
}
.roku-lecture-dedans {
  position: relative; display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) auto;
  column-gap: clamp(28px, 4vw, 56px); align-items: start;
  padding: 56px clamp(28px, 4vw, 60px) 58px;
  background:
    repeating-linear-gradient(90deg, rgba(201, 169, 98, 0.045) 0 1px, transparent 1px 44px),
    radial-gradient(ellipse 55% 90% at 14% 0%, rgba(201, 169, 98, 0.09), transparent 70%),
    linear-gradient(180deg, #17130e, #0d0b09);
  border-left: 1px solid rgba(201, 169, 98, 0.24); border-right: 1px solid rgba(201, 169, 98, 0.24);
}
.roku-lecture-dedans > * { transition: opacity 0.3s ease; }
.roku-lecture.change .roku-lecture-dedans > * { opacity: 0; transition-duration: 0.22s; }
.roku-lecture-tete {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-right: clamp(20px, 3vw, 44px); border-right: 1px solid rgba(201, 169, 98, 0.22); align-self: stretch;
}
.roku-lecture-kj {
  font-family: var(--font-display); font-weight: 600; font-size: 4.4rem; line-height: 1;
  color: var(--kin-light); text-shadow: 0 0 30px rgba(201, 169, 98, 0.45);
}
.roku-lecture-no {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.2em; color: var(--kin);
}
.roku-lecture-no::before, .roku-lecture-no::after { content: ""; width: 18px; height: 1px; background: rgba(201, 169, 98, 0.5); }
.roku-lecture-titre { margin: 12px 0 0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.35; color: var(--washi); }
.roku-lecture-texte {
  -webkit-mask: linear-gradient(90deg, #000 38%, transparent 62%) 0 0 / 260% 100% no-repeat;
  mask: linear-gradient(90deg, #000 38%, transparent 62%) 0 0 / 260% 100% no-repeat;
}
.roku-lecture-texte p {
  margin: 0; max-width: 66ch; font-size: 1.02rem; line-height: 1.95; color: #cfc6b5;
  hyphens: manual; text-align: left; text-wrap: pretty;
}
.roku-lecture-texte p::first-letter {
  float: left; margin: 9px 7px 0 0; font-family: var(--font-display); font-size: 3.4em; line-height: 0.8; color: var(--kin-light);
}
.roku-lecture-fermer {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 16px;
  background: transparent; border: 1px solid rgba(201, 169, 98, 0.45); color: var(--kin-light);
  font: inherit; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  cursor: pointer; touch-action: manipulation; transition: background 0.4s, border-color 0.4s;
}
.roku-lecture-fermer::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--kin); }
.roku-lecture-fermer:hover, .roku-lecture-fermer:focus-visible { background: rgba(201, 169, 98, 0.12); border-color: var(--kin); }
.roku-lecture.ecrit .roku-lecture-kj { animation: lecture-pinceau 1s var(--ease-ink) 0.2s backwards; }
.roku-lecture.ecrit .roku-lecture-no { animation: lecture-leve 0.7s var(--ease) 0.5s backwards; }
.roku-lecture.ecrit .roku-lecture-titre { animation: lecture-leve 0.7s var(--ease) 0.62s backwards; }
.roku-lecture.ecrit .roku-lecture-texte { animation: lecture-encre 1.2s var(--ease-ink) 0.4s backwards; }
@keyframes lecture-pinceau { from { opacity: 0.3; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(-14%); } }
@keyframes lecture-leve { from { opacity: 0; transform: translateY(8px); } }
@keyframes lecture-encre { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.roku.lecture-ouverte .roku-panel.reveal.in:not(.choisie) { opacity: 0.42; }
.roku.lecture-ouverte .roku-panel.reveal.in.choisie {
  transform: rotateY(0deg);
  box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.6), 0 0 46px rgba(201, 169, 98, 0.18), 0 26px 60px rgba(0, 0, 0, 0.6);
}
.roku-panel.choisie .roku-lire { background: rgba(201, 169, 98, 0.14); border-color: var(--kin); }
.roku-panel.choisie .roku-lire-o { display: none; }
.roku-panel.choisie .roku-lire-f { display: inline; }
.roku-panel.choisie .roku-lire::before { transform: rotate(225deg); background: var(--kin); }
@media (hover: hover) {
  .roku.lecture-ouverte .roku-panel.reveal.in:not(.choisie):hover { opacity: 0.85; }
}
@media (max-width: 1240px) {
  .roku-lecture { --decal: 0px; margin: 26px 0 0; }
  .roku-lecture::before { display: none; }
  .roku-lecture::after { top: 10px; }
}
@media (max-width: 900px) {
  .roku-lecture-dedans { grid-template-columns: minmax(0, 1fr); row-gap: 26px; padding: 46px 32px 48px; }
  .roku-lecture-tete {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: center; justify-items: start;
    text-align: left; padding: 0 0 22px; border-right: 0; border-bottom: 1px solid rgba(201, 169, 98, 0.22);
  }
  .roku-lecture-kj { grid-row: span 2; font-size: 3.3rem; }
  .roku-lecture-no { margin-top: 0; }
  .roku-lecture-titre { margin-top: 4px; }
  .roku-lecture-fermer { justify-self: start; }
}
@media (max-width: 640px) {
  .roku-lecture { display: none !important; }
  .roku-texte p { font-size: 0.95rem; line-height: 1.82; color: #cfc6b5; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .roku-lecture, .roku-lecture::before, .roku-lecture::after, .roku-lecture-dedans > * { transition: none; }
  .roku-lecture.ecrit .roku-lecture-kj, .roku-lecture.ecrit .roku-lecture-no,
  .roku-lecture.ecrit .roku-lecture-titre, .roku-lecture.ecrit .roku-lecture-texte { animation: none; }
}

.gallery { display: grid; gap: clamp(50px, 7vw, 96px); }
.artwork { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 46px; align-items: center; }
.artwork:nth-child(even) .art-frame { order: 2; }
.art-frame {
  position: relative; border: 1px solid var(--line); padding: 16px;
  background: linear-gradient(150deg, rgba(20, 20, 26, 0.9), rgba(9, 9, 13, 0.96));
}
.art-frame::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line-soft); pointer-events: none; }
.art-canvas { position: relative; min-height: 340px; overflow: hidden; }
.art-canvas img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 1.2s var(--ease); }
.artwork:hover .art-canvas img { transform: scale(1.04); }
.art-frame .lamp {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 60%; height: 90px; pointer-events: none;
  background: linear-gradient(180deg, rgba(201, 169, 98, 0.16), transparent 75%);
}
.cartel { border-left: 1px solid var(--kin); padding-left: 28px; }
.cartel .no { font-family: var(--font-display); font-size: 0.9rem; color: var(--kin); letter-spacing: 0.3em; }
.cartel h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 12px 0 6px; }
.cartel .sub { font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); }
.cartel p { color: var(--ink-dim); font-size: 0.94rem; margin-top: 20px; }
.cartel .spec { margin-top: 24px; display: grid; gap: 9px; border-top: 1px solid var(--line-soft); padding-top: 20px; }
.cartel .spec div { display: flex; justify-content: space-between; gap: 20px; font-size: 0.76rem; letter-spacing: 0.1em; }
.cartel .spec dt, .cartel .spec .k { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.66rem; }
.cartel .spec .v { color: var(--kin-light); text-align: right; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-soft); }
.stat { padding: 46px 28px; text-align: center; border-right: 1px solid var(--line-soft); position: relative; transition: background 0.6s; }
.stat:last-child { border-right: 0; }
.stats-grid[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .stats-grid[data-n="3"] { grid-template-columns: 1fr; }
  .stats-grid[data-n="3"] .stat { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .stats-grid[data-n="3"] .stat:last-child { border-bottom: 0; }
}
.stat:hover { background: rgba(201, 169, 98, 0.035); }
.stat .num { font-family: var(--font-display); font-size: clamp(2.2rem, 3.6vw, 3.1rem); color: var(--kin-light); line-height: 1; }
.stat .label { margin-top: 12px; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); }
.stat .jp { display: block; font-family: var(--font-display); font-size: 0.78rem; color: var(--kin); opacity: 0.6; margin-top: 8px; }

.manifesto-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 66px; align-items: center; }
.manifesto-text p { color: var(--ink-dim); margin-bottom: 18px; max-width: 620px; }
.signature { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.signature .stroke { width: 50px; height: 1px; background: linear-gradient(90deg, var(--kin), transparent); }
.signature .name { font-family: var(--font-display); font-size: 1.3rem; color: var(--kin-light); }
.signature .role { font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); }

.selection { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.sel-item { background: var(--sumi); padding: 44px 34px; position: relative; overflow: hidden; transition: background 0.6s; }
.sel-item:hover { background: var(--sumi-2); }
.sel-item .idx { font-family: var(--font-display); font-size: 1.5rem; color: var(--kin); display: block; margin-bottom: 20px; }
.sel-item h3 { font-size: 1.16rem; margin-bottom: 10px; }
.sel-item p { font-size: 0.88rem; color: var(--ink-dim); }
.sel-item::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--kin), transparent); transition: width 0.7s var(--ease);
}
.sel-item:hover::after { width: 100%; }

.michi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.michi-step { border: 1px solid var(--line-soft); padding: 30px 26px 34px; background: rgba(14, 14, 18, 0.6); transition: 0.6s var(--ease); position: relative; }
.michi-step:hover { border-color: var(--line); transform: translateY(-6px); }
.michi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.michi-head .kj { font-family: var(--font-display); font-size: 1.9rem; color: var(--kin-light); line-height: 1; }
.michi-head .no { font-size: 0.62rem; letter-spacing: 0.3em; color: var(--ink-faint); border: 1px solid var(--line); padding: 5px 10px; }
.michi-step .when { display: block; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--kin); margin-bottom: 10px; }
.michi-step h3 { font-size: 1.2rem; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 14px; }
.michi-step p { font-size: 0.87rem; color: var(--ink-dim); }
.notfound-head { padding-top: clamp(150px, 17vw, 212px); }

a.michi-step { display: block; text-decoration: none; color: inherit; }
a.michi-step:hover h3 { color: var(--kin-light); }
.michi-tasks { margin-top: 18px; display: grid; gap: 8px; }
.michi-tasks li { font-size: 0.8rem; color: var(--ink-dim); display: flex; gap: 10px; }
.michi-tasks li .n { color: var(--kin); font-family: var(--font-display); }

.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.voice { border: 1px solid var(--line-soft); padding: 36px 30px; background: rgba(14, 14, 18, 0.55); display: flex; flex-direction: column; gap: 20px; transition: 0.6s var(--ease); }
.voice:hover { border-color: var(--line); transform: translateY(-6px); }
.voice .mark { font-family: var(--font-display); font-size: 2rem; color: var(--kin); line-height: 0.6; }
.voice blockquote { font-family: var(--font-display); font-size: 1.08rem; flex: 1; }
.voice .who { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.voice .who strong { display: block; color: var(--kin-light); font-weight: 400; margin-bottom: 3px; }


.stats-shaku { border: 0; padding-top: 10px; }
.stats-shaku::before {
  content: "曲尺"; position: absolute; top: -22px; left: 0; font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.4em; color: var(--kin); opacity: 0;
  transition: opacity 0.8s ease 0.2s;
}
.stats-shaku { position: relative; }
.stats-shaku.in::before { opacity: 0.7; }
.stats-shaku .stat { border-right: 0; border-bottom: 0; padding: 62px 24px 34px; }
.stats-shaku .stat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none;
  background:
    linear-gradient(90deg, var(--kin), var(--kin-light) 50%, var(--kin)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(201, 169, 98, 0.75) 0 1px, transparent 1px 60px) 0 1px / 100% 11px no-repeat,
    repeating-linear-gradient(90deg, rgba(201, 169, 98, 0.4) 0 1px, transparent 1px 12px) 0 1px / 100% 5px no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.55s linear calc(0.2s + var(--k, 0) * 0.55s);
}
.stats-shaku.in .stat::before { clip-path: inset(0 0 0 0); }
.stats-shaku .stat::after {
  content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 40px; margin-left: -0.5px;
  background: linear-gradient(180deg, var(--kin-light), rgba(201, 169, 98, 0.1));
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.6s var(--ease) calc(0.45s + var(--k, 0) * 0.55s);
}
.stats-shaku.in .stat::after { transform: scaleY(1); }
.stats-shaku .stat:hover::after { height: 48px; }
.stats-shaku .stat .num, .stats-shaku .stat .label {
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.7s ease, transform 0.8s var(--ease);
  transition-delay: calc(0.65s + var(--k, 0) * 0.55s);
}
.stats-shaku.in .stat .num, .stats-shaku.in .stat .label { opacity: 1; transform: none; }
.stats-shaku .stat .jp {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-top: 18px;
  border: 1px solid rgba(201, 169, 98, 0.6); font-size: 0.86rem; opacity: 0;
  transform: rotate(-4deg) scale(1.9);
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.25);
  transition-delay: calc(1.5s + var(--k, 0) * 0.55s);
}
.stats-shaku.in .stat .jp { opacity: 0.9; transform: rotate(-4deg); }
.stats-shaku .stat:hover .jp { background: var(--kin); color: var(--sumi); }

.section-cartes { padding-bottom: clamp(24px, 3vw, 48px); }
.section-cartes + .section { padding-top: clamp(64px, 7vw, 110px); }
.hanafuda { --w: 176px; --ecart: 56px; --decal: 54px; --pas: calc(var(--w) + var(--ecart)); display: flex; justify-content: center; gap: var(--ecart); }
.hanafuda.reveal { opacity: 1; transform: none; transition: none; }
.hf { --dx: calc((1.5 - var(--i)) * var(--pas)); --dy: calc(var(--decal) * 0.5); --biais: -1.2deg; position: relative; z-index: calc(10 - var(--i)); width: var(--w); margin: 0; perspective: 1000px; text-align: center; transition: transform 0.5s var(--ease); }
.hf:nth-child(even) { margin-top: var(--decal); --dy: calc(var(--decal) * -0.5); --biais: 1deg; }
.hf:nth-child(3) { --biais: -0.6deg; }
.hf:nth-child(4) { --biais: 1.4deg; }
.hf:hover { transform: translateY(-10px); }
.hf-carte { position: relative; width: var(--w); aspect-ratio: 150 / 240; margin-bottom: 24px; transform-style: preserve-3d;
  transform: translate(var(--dx), var(--dy)) rotateY(180deg) rotate(calc((var(--i) - 1.5) * 4deg)); }
.hanafuda.in .hf-carte { animation: hf-donne 1.7s var(--ease) both; animation-delay: calc(0.3s + var(--i) * 0.24s); }
@keyframes hf-donne {
  0% { transform: translate(var(--dx), var(--dy)) rotateY(180deg) rotate(calc((var(--i) - 1.5) * 4deg)); }
  55% { transform: translate(0, 0) rotateY(180deg) rotate(var(--biais)); }
  100% { transform: translate(0, 0) rotateY(0) rotate(var(--biais)); }
}
.hf-face, .hf-dos { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 7px; overflow: hidden; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.55); }
.hf-dos { transform: rotateY(180deg); background: #1b0f0b; border: 7px solid #8f2219; }
.hf-dos::after { content: "空"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.4rem; color: rgba(201, 169, 98, 0.35); }
.hf-face { background: #efe5cf; border: 3px solid #1b1410; }
.hf-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf-face::after { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(201, 169, 98, 0.45), inset 0 0 26px rgba(40, 26, 10, 0.38); }
.hf-cap { opacity: 0; transform: translateY(14px); }
.hanafuda.in .hf-cap { animation: hf-leve 0.9s var(--ease) both; animation-delay: calc(1.9s + var(--i) * 0.24s); }
@keyframes hf-leve { to { opacity: 1; transform: none; } }
.hf-cap .num { font-family: var(--font-display); font-size: clamp(2.2rem, 3.6vw, 3.1rem); color: var(--kin-light); line-height: 1; }
.hf-cap .label { margin-top: 12px; min-height: 3.5em; font-size: 0.66rem; line-height: 1.75; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-dim); }
.hf-cap .jp { display: inline-block; margin-top: 12px; padding: 3px 6px; font-family: var(--font-display); font-size: 0.8rem; color: var(--kin); border: 1px solid rgba(201, 169, 98, 0.45); transition: background 0.4s, color 0.4s; }
.hf:hover .jp { background: var(--kin); color: var(--sumi); }
@media (max-width: 900px) {
  .hanafuda { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 40px 38px; --decal: 34px; }
  .hf:nth-child(n) { --dx: 0px; --dy: 0px; }
  .hf-cap .label { min-height: 5.25em; }
}
@media (max-width: 1100px) { .hanafuda { --ecart: 32px; } }
@media (min-width: 901px) and (max-width: 1100px) { .hanafuda { --decal: 42px; } }
@media (max-width: 640px) { .hanafuda { --w: 138px; --decal: 26px; column-gap: 30px; } }
@media (max-width: 340px) { .hanafuda { --w: 122px; } }
@media (prefers-reduced-motion: reduce) {
  .hf-carte, .hanafuda.in .hf-carte { transform: rotate(var(--biais)); animation: none; }
  .hf-cap, .hanafuda.in .hf-cap { opacity: 1; transform: none; animation: none; }
  .hf { transition: none; }
}

.kosatsu { position: relative; padding: 0 24px 58px; margin-top: 12px; }
.kosatsu-toit {
  position: relative; z-index: 2; height: 38px; margin: 0 -34px;
  filter: drop-shadow(0 -1px 0 rgba(236, 217, 168, 0.5)) drop-shadow(0 1px 0 rgba(201, 169, 98, 0.75)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.6));
  transform: translateY(-24px); opacity: 0;
  transition: transform 0.9s var(--ease) 0.15s, opacity 0.6s ease 0.15s;
}
.kosatsu.in .kosatsu-toit { transform: none; opacity: 1; }
.kosatsu-toit::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #2a231a, #0c0a08 80%);
  clip-path: polygon(4% 24%, 96% 24%, 100% 70%, 94% 90%, 50% 100%, 6% 90%, 0 70%);
}
.kosatsu-toit::after {
  content: ""; position: absolute; left: 7%; right: 7%; top: 0; height: 10px;
  background: linear-gradient(180deg, #2f271d, #120f0c); border-top: 1px solid rgba(236, 217, 168, 0.5);
}
.kosatsu-plaque {
  position: absolute; z-index: 1; left: 50%; top: 14px; width: 36px; height: 44px; margin-left: -18px;
  display: grid; place-items: center; background: linear-gradient(180deg, #17130f, #0b0a08);
  border: 1px solid var(--kin); box-shadow: inset 0 0 0 3px #0b0a08, inset 0 0 0 4px rgba(201, 169, 98, 0.4);
  font-family: var(--font-display); font-size: 1.1rem; color: var(--kin-light); line-height: 1;
}
.kosatsu-pied {
  position: absolute; top: 16px; bottom: 0; width: 15px; z-index: 0;
  background: linear-gradient(90deg, #0b0a08, #241e16 45%, #0e0c0a);
  border-left: 1px solid rgba(201, 169, 98, 0.22); border-right: 1px solid rgba(201, 169, 98, 0.12);
  transform: scaleY(0); transform-origin: top; transition: transform 0.9s var(--ease) 0.55s;
}
.kosatsu-pied.gauche { left: 0; }
.kosatsu-pied.droite { right: 0; }
.kosatsu-pied::after {
  content: ""; position: absolute; left: -7px; right: -7px; bottom: -2px; height: 9px;
  background: linear-gradient(180deg, #2a241c, #0c0a08); border-top: 1px solid rgba(201, 169, 98, 0.3);
}
.kosatsu.in .kosatsu-pied { transform: none; }
.selection-kosatsu { position: relative; z-index: 1; gap: 7px; background: none; border: 0; margin-top: -6px; }
.selection-kosatsu .sel-item {
  border: 1px solid rgba(201, 169, 98, 0.16);
  background:
    radial-gradient(ellipse at 28% 35%, rgba(255, 196, 130, 0.035), transparent 62%),
    repeating-linear-gradient(180deg, rgba(255, 235, 200, 0.022) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0 2px, transparent 2px 23px),
    linear-gradient(180deg, #17130f, #0d0b09);
  opacity: 0; transform: translateY(-18px) rotate(calc(var(--s, 1) * 1.6deg));
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.25), box-shadow 0.5s;
  transition-delay: calc(1s + var(--k, 0) * 0.16s), calc(1s + var(--k, 0) * 0.16s), 0s;
}
.selection-kosatsu .sel-item:nth-child(even) { --s: -1; }
.kosatsu.in .selection-kosatsu .sel-item { opacity: 1; transform: none; }
.selection-kosatsu .sel-item:hover {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(201, 169, 98, 0.45), 0 10px 26px rgba(0, 0, 0, 0.5);
}
.selection-kosatsu .sel-item::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle, #f3e2b0 0 1.8px, #8a6f3c 2.4px, transparent 3px) left 12px top 12px / 8px 8px no-repeat,
    radial-gradient(circle, #f3e2b0 0 1.8px, #8a6f3c 2.4px, transparent 3px) right 12px top 12px / 8px 8px no-repeat;
  opacity: 0; transform: scale(1.3);
  transition: opacity 0.2s ease, transform 0.3s ease;
  transition-delay: calc(1.65s + var(--k, 0) * 0.16s);
}
.kosatsu.in .selection-kosatsu .sel-item::before { opacity: 1; transform: none; }
.selection-kosatsu .sel-item .idx { font-size: 1.8rem; line-height: 1; }

.michi-montee { position: relative; }
.montee-scene { position: relative; }
.montee-scene svg { display: block; width: 100%; height: auto; aspect-ratio: 1360 / 400; overflow: visible; }
.montee-soleil, .montee-lueur, .montee-torii { transform-box: fill-box; transform-origin: 50% 50%; }
.montee-torii { transform-origin: 50% 100%; }
.montee-fil { stroke: rgba(201, 169, 98, 0.3); stroke-width: 1; stroke-dasharray: 2 5; transition: stroke 0.8s ease; }
.montee-fil.atteint { stroke: rgba(236, 217, 168, 0.7); }
.montee-station {
  position: absolute; z-index: 1; left: var(--x); top: var(--y);
  display: grid; place-items: center; width: 68px; height: 58px;
  transform: translate(-50%, -50%);
  border-radius: 48% 52% 44% 56% / 56% 46% 54% 44%;
  background: radial-gradient(ellipse at 35% 28%, #2e271e, #16130f 58%, #0b0a08);
  box-shadow: inset 0 1px 0 rgba(236, 217, 168, 0.12), 0 7px 16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 169, 98, 0.26);
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: rgba(201, 169, 98, 0.45);
  transition: color 0.7s, box-shadow 0.9s, transform 0.6s var(--ease);
}
.montee-station:nth-of-type(2) { border-radius: 55% 45% 52% 48% / 46% 58% 42% 54%; width: 64px; }
.montee-station:nth-of-type(3) { border-radius: 44% 56% 58% 42% / 52% 44% 56% 48%; width: 72px; }
.montee-station:nth-of-type(4) { border-radius: 52% 48% 40% 60% / 58% 52% 48% 42%; width: 66px; }
.montee-station.atteint {
  color: var(--kin-light);
  box-shadow: inset 0 1px 0 rgba(236, 217, 168, 0.28), 0 7px 16px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--kin), 0 0 30px rgba(201, 169, 98, 0.38);
}
.montee-vue .brume { animation: montee-brume 26s ease-in-out infinite alternate; }
.montee-vue .brume.b2 { animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes montee-brume { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
@media (max-width: 900px), (hover: none), (prefers-reduced-motion: reduce) { .montee-vue .brume { animation: none; } }

.montee-temps { gap: 0; margin-top: 30px; padding: 0 16px; position: relative; }
.montee-temps::before, .montee-temps::after {
  content: ""; position: absolute; top: -9px; bottom: -9px; width: 26px; z-index: 0;
  background: repeating-linear-gradient(45deg, rgba(201, 169, 98, 0.16) 0 1px, transparent 1px 7px), linear-gradient(160deg, #3a1d16, #170c09);
  border: 1px solid rgba(201, 169, 98, 0.4); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
}
.gs-pages { display: none; }
.montee-temps::before { left: 0; }
.montee-temps::after { right: 0; }
.montee-temps .michi-step {
  z-index: 1; border: 0; padding: 24px 26px 32px; text-align: left; color: #2b2219;
  background-color: #ebe2cd;
  background-image: linear-gradient(90deg, rgba(70, 48, 24, 0), rgba(70, 48, 24, 0) 84%, rgba(70, 48, 24, 0.2)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .16' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .22 1.6 0 0 0 -.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
}
.montee-temps .michi-step:nth-child(even) {
  background-color: #e6dcc6;
  background-image: linear-gradient(90deg, rgba(70, 48, 24, 0.22), rgba(70, 48, 24, 0) 16%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .16' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .22 1.6 0 0 0 -.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.montee-temps .michi-step:hover { border-color: transparent; transform: none; }
.gs { position: relative; display: block; height: 150px; margin: 0 0 14px; }
.gs-hohai, .gs-sono { position: absolute; writing-mode: vertical-rl; font-family: var(--font-display); letter-spacing: 0.32em; }
.gs-hohai { top: 2px; right: 2px; font-size: 0.82rem; color: #2b2219; }
.gs-sono { left: 2px; bottom: 0; font-size: 0.72rem; color: #5a4a36; }
.gs-sceau {
  position: absolute; left: 50%; top: 52%; width: 96px; height: 96px; transform: translate(-50%, -50%) rotate(-4deg);
  display: grid; place-items: center; border-radius: 4px; background: rgba(168, 55, 42, 0.86);
  box-shadow: inset 0 0 0 4px rgba(168, 55, 42, 0.86), inset 0 0 0 5px rgba(243, 230, 214, 0.85);
  font-family: var(--font-display); font-size: 3.1rem; line-height: 1; color: rgba(243, 230, 214, 0.9);
}
.gs-sceau i { font-style: normal; }
.gs-kj {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-2deg);
  font-family: var(--font-display); font-weight: 700; font-size: 4.3rem; line-height: 1; color: rgba(20, 14, 10, 0.92);
}
.montee-temps .michi-head { justify-content: flex-start; gap: 10px; margin-bottom: 10px; }
.montee-temps .michi-head .no { border: 0; padding: 0; font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0; color: var(--shu); }
.montee-temps .michi-head .sep { width: 18px; height: 1px; background: #a08460; }
.montee-temps .michi-head .when { display: inline; margin: 0; color: #7c5d2c; }
.montee-temps .michi-step h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; font-size: 1.35rem; color: #1d1610; }
.montee-temps .michi-step p { color: #4b3f31; }
.montee-temps .michi-tasks { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(70, 48, 24, 0.18); }
.montee-temps .michi-tasks li { color: #4b3f31; }
.montee-temps .michi-tasks li .n { color: var(--shu); }
@keyframes gs-appose { from { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(1.55); } 55% { opacity: 1; } to { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); } }
@keyframes gs-ecrit { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -4% 0); } }
@keyframes gs-encre { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1101px) {
  .montee-js .montee-temps .michi-step:not(.atteint) :is(.gs-sceau, .gs-kj, .gs-hohai, .gs-sono) { opacity: 0; }
  .montee-js .montee-temps .michi-step.atteint .gs-sceau { animation: gs-appose 0.5s cubic-bezier(0.3, 1.35, 0.5, 1) 0.15s both; }
  .montee-js .montee-temps .michi-step.atteint .gs-kj { animation: gs-ecrit 0.9s var(--ease-ink, ease) 0.55s both; }
  .montee-js .montee-temps .michi-step.atteint :is(.gs-hohai, .gs-sono) { animation: gs-encre 0.8s ease 1.1s both; }
}
@media (max-width: 1100px) {
  .montee-js .montee-temps .michi-step:not(.in) :is(.gs-sceau, .gs-kj, .gs-hohai, .gs-sono) { opacity: 0; }
  .montee-js .montee-temps .michi-step.in .gs-sceau { animation: gs-appose 0.5s cubic-bezier(0.3, 1.35, 0.5, 1) 0.5s both; }
  .montee-js .montee-temps .michi-step.in .gs-kj { animation: gs-ecrit 0.9s var(--ease-ink, ease) 0.9s both; }
  .montee-js .montee-temps .michi-step.in :is(.gs-hohai, .gs-sono) { animation: gs-encre 0.8s ease 1.4s both; }
}
@media (prefers-reduced-motion: reduce) {
  .montee-js .montee-temps .michi-step :is(.gs-sceau, .gs-kj, .gs-hohai, .gs-sono) { opacity: 1 !important; animation: none !important; }
}
.lecteur-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1101px) {
  .montee-js .montee-temps .michi-step > :not(.gs) { opacity: 0.5; transition: opacity 0.9s var(--ease); }
  .montee-js .montee-temps .michi-step.atteint > :not(.gs) { opacity: 1; }
}
@media (hover: hover) and (min-width: 1101px) {
  .michi-montee:has(.michi-step[data-k="0"]:hover) .montee-station[data-k="0"],
  .michi-montee:has(.michi-step[data-k="1"]:hover) .montee-station[data-k="1"],
  .michi-montee:has(.michi-step[data-k="2"]:hover) .montee-station[data-k="2"],
  .michi-montee:has(.michi-step[data-k="3"]:hover) .montee-station[data-k="3"] { transform: translate(-50%, -50%) scale(1.12); color: var(--kin-light); }
}
@media (max-width: 1100px) {
  .montee-fil { display: none; }
  .montee-station { width: 52px; height: 44px; font-size: 1.15rem; }
  .montee-station:nth-of-type(n) { width: 52px; }
  .montee-temps { margin-top: 34px; }
  .montee-temps .michi-step:nth-child(-n + 2) { box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55), inset 0 -10px 12px -10px rgba(70, 48, 24, 0.3); }
}
@media (max-width: 640px) {
  .montee-scene svg { aspect-ratio: 1360 / 600; }
  .montee-soleil { transform: scaleY(0.6667); }
  .montee-lueur { transform: scale(2.2, 1.47); }
  .montee-torii { transform: translateX(56px) scale(1.4, 0.93); }
  .montee-chemin, .montee-or { stroke-dasharray: 3 4; }
  .montee-station, .montee-station:nth-of-type(n) { width: 40px; height: 35px; font-size: 0.95rem; }
  .montee-temps {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 26px calc(50% - 50vw) 0; padding: 12px calc(11vw - 14px) 30px;
  }
  .montee-temps::-webkit-scrollbar { display: none; }
  .montee-temps::before, .montee-temps::after { position: static; flex: 0 0 14px; margin: -9px 0; }
  .montee-temps .michi-step { flex: 0 0 78vw; scroll-snap-align: center; padding: 22px 22px 28px; }
  .montee-temps .michi-step:nth-child(n) { box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5); background-size: auto, 170px 170px; }
  .montee-temps .michi-step.reveal { opacity: 1; transform: none; }
  .montee-js .montee-temps .michi-step:not(.ouverte) :is(.gs-sceau, .gs-kj, .gs-hohai, .gs-sono) { opacity: 0; animation: none; }
  .montee-js .gs-pages { display: flex; justify-content: center; gap: 14px; margin-top: 2px; }
  .gs-pages i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--kin-deep); transition: background-color 0.4s, border-color 0.4s; }
  .gs-pages i.actif { background: var(--kin); border-color: var(--kin); }
}

.voices-ema { position: relative; padding-top: 48px; gap: 34px; }
.ema-corde {
  position: absolute; top: 8px; left: -1%; right: -1%; height: 7px; border-radius: 4px; pointer-events: none;
  background: repeating-linear-gradient(115deg, #6b5630 0 4px, #c9a962 4px 7px, #4a3b21 7px 10px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.55);
  clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--ease) 0.2s;
}
.voices-ema.in .ema-corde { clip-path: inset(0 0 0 0); }
.voices-ema .voice {
  position: relative; isolation: isolate; border: 0; background: none; padding: 104px 34px 40px;
  transform-origin: 50% -36px;
}
.voices-ema .voice:hover { transform: none; }
.voices-ema .voice::before, .voices-ema .voice::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 36px; bottom: 0;
  clip-path: polygon(50% 0, 100% 54px, 100% 100%, 0 100%, 0 54px);
}
.voices-ema .voice::before { background: linear-gradient(160deg, #ecd9a8, #c9a962 38%, #7d6334); }
.voices-ema .voice::after {
  inset: 37.6px 1.6px 1.6px 1.6px; clip-path: polygon(50% 0, 100% 53px, 100% 100%, 0 100%, 0 53px);
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 220, 160, 0.05), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 240, 210, 0.02) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #19150f, #0d0b09);
}
.ema-fil {
  position: absolute; top: -36px; left: 50%; width: 2px; height: 98px; margin-left: -1px;
  background: linear-gradient(180deg, #b8402c, var(--shu)); pointer-events: none;
}
.ema-fil::before {
  content: ""; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--shu); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.ema-fil::after {
  content: ""; position: absolute; bottom: -6px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; background: #070605; box-shadow: 0 0 0 1.5px var(--kin), inset 0 1px 2px rgba(0, 0, 0, 0.8);
}
.voices-ema .voice .mark { text-align: center; }
.ema-etoiles { display: block; margin-bottom: 8px; font-size: 0.86rem; letter-spacing: 0.22em; color: var(--kin); }
.voices-source {
  margin: 46px auto 0; max-width: 62ch; text-align: center;
  font-size: 0.86rem; line-height: 1.7; color: var(--ink-dim);
}
.voices-source a { color: var(--kin-light); white-space: nowrap; border-bottom: 1px solid rgba(201, 169, 98, 0.4); transition: border-color 0.4s, color 0.4s; }
.voices-source a:hover, .voices-source a:focus-visible { color: var(--washi); border-color: var(--kin-light); }
.voices-ema.in .voice { animation: ema-arrivee 2.6s cubic-bezier(0.3, 0.6, 0.4, 1) calc(0.7s + var(--k, 0) * 0.28s) backwards; }
.voices-ema .voice:nth-of-type(2n) { --s: -1; }
@keyframes ema-arrivee {
  0% { opacity: 0; transform: translateY(-28px) rotate(calc(var(--s, 1) * 8deg)); }
  24% { opacity: 1; transform: rotate(calc(var(--s, 1) * -4.5deg)); }
  46% { transform: rotate(calc(var(--s, 1) * 2.4deg)); }
  66% { transform: rotate(calc(var(--s, 1) * -1.1deg)); }
  84% { transform: rotate(calc(var(--s, 1) * 0.4deg)); }
  100% { opacity: 1; transform: none; }
}
.voices-ema.in .voice:hover {
  animation: ema-arrivee 2.6s cubic-bezier(0.3, 0.6, 0.4, 1) calc(0.7s + var(--k, 0) * 0.28s) backwards,
             ema-souffle 3.2s ease-in-out infinite;
}
@keyframes ema-souffle {
  0%, 100% { transform: none; }
  30% { transform: rotate(1.4deg); }
  70% { transform: rotate(-1.1deg); }
}

@media (max-width: 1100px) {
  .ema-corde { display: none; }
  .voices-ema { padding-top: 40px; row-gap: 70px; }
  .ema-fil::before { width: 30px; height: 7px; margin-left: -15px; border-radius: 2px; top: -4px;
    background: linear-gradient(180deg, #2f271d, #0c0a08); box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.45); }
}
@media (max-width: 640px) {
  .kosatsu { padding: 0 16px 50px; }
  .kosatsu-toit { margin: 0 -10px; height: 32px; }
  .kosatsu-pied { width: 11px; }
  .voices-ema .voice { padding: 100px 26px 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .stats-shaku::before, .stats-shaku .stat .num, .stats-shaku .stat .label { transition: none; }
  .stats-shaku .stat::before, .stats-shaku .stat::after, .stats-shaku .stat .jp { transition: none; }
  .kosatsu-toit, .kosatsu-pied, .selection-kosatsu .sel-item, .selection-kosatsu .sel-item::before { transition: none; }
  .ema-corde { transition: none; }
  .voices-ema.in .voice, .voices-ema.in .voice:hover { animation: none; }
}


.shikishi { --chute: 0px; padding-bottom: var(--chute); }
.shikishi .sk-cell:nth-child(3n + 2) { top: var(--chute); }
.collection-suite { text-align: center; margin-top: 60px; }
@media (min-width: 1101px) {
  .shikishi { --chute: 64px; }
  .section-collection .section-head {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: clamp(48px, 6vw, 110px); align-items: end;
  }
  .section-collection .section-head .eyebrow, .section-collection .section-head h2 { grid-column: 1; }
  .section-collection .section-head .lead {
    grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0 0 0.4em;
    padding-left: 28px; border-left: 1px solid rgba(201, 169, 98, 0.35);
  }
  .collection-suite { text-align: right; margin-top: 34px; }
}
@media (max-width: 1100px) {
  .shikishi { --chute: 40px; }
  .shikishi .sk-cell:nth-child(n) { top: 0; }
  .shikishi .sk-cell:nth-child(even) { top: var(--chute); }
}
@media (max-width: 640px) { .shikishi { --chute: 26px; } }

@media (min-width: 1240px) {
  .section-cartes > .container {
    display: grid; grid-template-columns: auto minmax(0, 380px); justify-content: center; align-items: center;
    column-gap: clamp(64px, 6vw, 112px);
  }
  .section-cartes .section-head { grid-column: 2; grid-row: 1; margin: 0; text-align: left; }
  .section-cartes .section-head .eyebrow { justify-content: flex-start; }
  .section-cartes .hanafuda { grid-column: 1; grid-row: 1; --w: clamp(150px, 12.5vw, 176px); --ecart: clamp(30px, 3.2vw, 56px); --decal: 64px; }
}
@media (min-width: 1240px) and (max-width: 1407px) { .section-cartes .hf-cap .label { min-height: 5.25em; } }

@media (min-width: 1101px) {
  .section-admission > .container {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 5vw, 96px); align-items: start;
  }
  .section-admission .section-head.center {
    position: sticky; top: 150px; margin: 34px 0 0; text-align: left;
  }
  .section-admission .section-head.center .eyebrow { justify-content: flex-start; }
  .section-admission .section-head.center .lead { margin: 20px 0 0; }
  .section-admission .kosatsu { margin-top: 0; }
  .section-admission .selection-kosatsu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-admission .selection-kosatsu .sel-item { padding: 40px 32px; }
}

.badge-google {
  position: relative; display: inline-flex; align-items: center; gap: 14px; margin-top: 28px;
  padding: 11px 20px 11px 11px; text-decoration: none; color: var(--ink-soft); overflow: hidden;
  border: 1px solid rgba(201, 169, 98, 0.36);
  background: radial-gradient(120% 140% at 0% 0%, rgba(201, 169, 98, 0.08), transparent 60%), linear-gradient(160deg, #17130f, #0b0a08);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
}
.badge-google.reveal { transition: opacity 1.1s var(--ease) 0.2s, transform 1.1s var(--ease) 0.2s, border-color 0.5s, box-shadow 0.5s; }
.badge-google::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(var(--kin), var(--kin)) top left / 14px 1px no-repeat, linear-gradient(var(--kin), var(--kin)) top left / 1px 14px no-repeat,
    linear-gradient(var(--kin), var(--kin)) bottom right / 14px 1px no-repeat, linear-gradient(var(--kin), var(--kin)) bottom right / 1px 14px no-repeat;
}
.badge-google::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 190, 0.13) 50%, transparent);
  transform: translateX(-120%);
}
.badge-google.in::after { animation: bg-reflet 1.3s var(--ease) 1.5s both; }
.badge-google:hover::after { animation: bg-reflet 1s var(--ease) both; }
@keyframes bg-reflet { from { transform: translateX(-120%); } to { transform: translateX(260%); } }
.badge-google:hover, .badge-google:focus-visible { border-color: var(--kin); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9), 0 0 26px rgba(201, 169, 98, 0.16); }
.badge-google:focus-visible { outline: 1px solid var(--kin-light); outline-offset: 3px; }
.bg-g { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f4efe4; box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.55), 0 6px 14px rgba(0, 0, 0, 0.55); }
.bg-g svg { width: 22px; height: 22px; display: block; }
.bg-note { font-family: var(--font-display); font-size: 2.05rem; line-height: 1; color: var(--kin-light); }
.bg-detail { display: grid; gap: 5px; text-align: left; }
.bg-etoiles { display: flex; gap: 3px; font-size: 0.92rem; line-height: 1; color: var(--kin); }
.bg-etoiles i { display: inline-block; font-style: normal; opacity: 0; transform: scale(0.3) rotate(-40deg); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 1.5, 0.4, 1); transition-delay: calc(0.75s + var(--k, 0) * 0.11s); }
.badge-google.in .bg-etoiles i { opacity: 1; transform: none; }
.bg-avis { font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.bg-fleche { color: var(--kin); margin-left: 4px; transition: transform 0.4s var(--ease); }
.badge-google:hover .bg-fleche { transform: translateX(4px); }
.bg-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) {
  .badge-google { gap: 11px; padding-right: 14px; margin-top: 22px; }
  .bg-note { font-size: 1.7rem; }
  .bg-avis { letter-spacing: 0.16em; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-etoiles i { opacity: 1; transform: none; transition: none; }
  .badge-google.in::after, .badge-google:hover::after { animation: none; }
}

.voices-ema .voice { top: var(--chute, 0px); transform-origin: 50% calc(-36px - var(--chute, 0px)); }
.voices-ema .ema-fil { top: calc(-36px - var(--chute, 0px)); height: calc(98px + var(--chute, 0px)); }
@media (min-width: 1101px) {
  .voices-ema { padding-bottom: 56px; }
  .voices-ema .voice:nth-of-type(2) { --chute: 56px; }
  .voices-ema .voice:nth-of-type(3) { --chute: 22px; }
}


.team-duo { position: relative; padding-top: 58px; }
.team-duo .team-card { opacity: 0; transition: opacity 0.9s ease, transform 1s var(--ease), border-color 0.6s, box-shadow 0.6s; }
.team-duo .team-card:nth-of-type(1) { transform: translateX(-40px); }
.team-duo .team-card:nth-of-type(2) { transform: translateX(40px); }
.team-duo.in .team-card { opacity: 1; transform: none; }
.team-duo.in .team-card:hover { transform: translateY(-6px); }
.duo-bol { position: absolute; z-index: 2; top: 0; left: 50%; width: 112px; margin-left: -56px; pointer-events: none; }
.duo-bol svg { display: block; width: 100%; height: auto; overflow: visible; }
.duo-bol path { fill: #120f0b; stroke: var(--kin); stroke-width: 1.2; stroke-linejoin: round; }
.duo-bol .bol-levre { fill: none; stroke-width: 1; opacity: 0.7; }
.duo-bol .bol-g, .duo-bol .bol-d { opacity: 0; transition: opacity 0.6s ease 0.35s, transform 1.1s var(--ease) 0.35s; transform-box: view-box; transform-origin: 50% 90%; }
.duo-bol .bol-g { transform: translateX(-18px) rotate(-9deg); }
.duo-bol .bol-d { transform: translateX(18px) rotate(9deg); }
.team-duo.in .duo-bol .bol-g, .team-duo.in .duo-bol .bol-d { opacity: 1; transform: none; }
.team-duo.in .duo-bol .bol-levre { opacity: 0.7; }
.duo-bol .bol-or {
  fill: none; stroke: var(--kin-light); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 3px rgba(236, 217, 168, 0.75));
  transition: stroke-dashoffset 0.9s var(--ease) 1.45s;
}
.team-duo.in .duo-bol .bol-or { stroke-dashoffset: 0; }
.team-duo::after {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 92px; bottom: 0; width: 1px; margin-left: -0.5px;
  background: linear-gradient(180deg, var(--kin-light), rgba(201, 169, 98, 0.35) 70%, transparent);
  transform: scaleY(0); transform-origin: top; transition: transform 1.3s var(--ease) 2.2s;
}
.team-duo.in::after { transform: scaleY(1); }

.trio-shikishi .trio-item { position: relative; padding: 40px 32px 36px; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, rgba(26, 22, 17, 0.92), rgba(10, 9, 7, 0.96)); }
.trio-shikishi .trio-item::before {
  content: ""; position: absolute; inset: 9px; z-index: -1; pointer-events: none;
  border: 1px solid rgba(201, 169, 98, 0.35); opacity: 0; transform: scale(0.96);
  transition: opacity 0.8s ease, transform 1s var(--ease); transition-delay: calc(0.2s + var(--k, 0) * 0.2s);
}
.trio-shikishi .trio-item::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(236, 217, 168, 0.42) 0 1px, transparent 1.6px) 0 0 / 17px 13px,
    radial-gradient(circle at 70% 55%, rgba(201, 169, 98, 0.32) 0 0.8px, transparent 1.4px) 3px 5px / 11px 19px,
    radial-gradient(circle at 35% 80%, rgba(243, 226, 176, 0.5) 0 1.3px, transparent 2px) 7px 2px / 29px 23px;
  -webkit-mask: radial-gradient(ellipse at 0 0, #000 0, transparent 34%), radial-gradient(ellipse at 100% 100%, #000 0, transparent 30%);
  mask: radial-gradient(ellipse at 0 0, #000 0, transparent 34%), radial-gradient(ellipse at 100% 100%, #000 0, transparent 30%);
  transition: opacity 1.2s ease; transition-delay: calc(0.35s + var(--k, 0) * 0.2s);
}
.trio-shikishi.in .trio-item::before { opacity: 1; transform: none; }
.trio-shikishi.in .trio-item::after { opacity: 1; }
.trio-shikishi .shikishi-kj { position: absolute; top: 22px; right: 26px; line-height: 1; }
.trio-shikishi .shikishi-kj > span {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 4.2rem; line-height: 1;
  background: linear-gradient(160deg, #f3e2b0, #c9a962 50%, #8a6f3c); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-mask: linear-gradient(120deg, #000 40%, transparent 60%) 100% 0 / 300% 300% no-repeat;
  mask: linear-gradient(120deg, #000 40%, transparent 60%) 100% 0 / 300% 300% no-repeat;
  transition: -webkit-mask-position 1.1s cubic-bezier(0.55, 0.1, 0.3, 1), mask-position 1.1s cubic-bezier(0.55, 0.1, 0.3, 1), filter 0.6s;
  transition-delay: calc(0.7s + var(--k, 0) * 0.35s);
}
.trio-shikishi.in .shikishi-kj > span { -webkit-mask-position: 0 0; mask-position: 0 0; }
.trio-shikishi .trio-item:hover .shikishi-kj > span { filter: drop-shadow(0 0 10px rgba(201, 169, 98, 0.35)); }
.trio-shikishi .shikishi-kj::after {
  content: "空"; position: absolute; right: -6px; bottom: -16px; display: grid; place-items: center;
  width: 20px; height: 20px; background: var(--shu); color: #f6ece0; -webkit-text-fill-color: #f6ece0;
  font-size: 0.68rem; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(246, 236, 224, 0.55);
  opacity: 0; transform: rotate(-6deg) scale(1.9);
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.2);
  transition-delay: calc(1.6s + var(--k, 0) * 0.35s);
}
.trio-shikishi.in .shikishi-kj::after { opacity: 1; transform: rotate(-6deg); }
.trio-shikishi .trio-item h3, .trio-shikishi .trio-item p { position: relative; opacity: 0; transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.8s var(--ease); transition-delay: calc(1.3s + var(--k, 0) * 0.35s); }
.trio-shikishi .trio-item h3 { margin-top: 46px; font-size: 1.22rem; }
.trio-shikishi.in .trio-item h3, .trio-shikishi.in .trio-item p { opacity: 1; transform: none; }

.trio-origata .trio-item { position: relative; }
.tsutsumi { position: absolute; inset: 0; z-index: 3; pointer-events: none; perspective: 1100px;
  overflow: clip; overflow-clip-margin: 12px; }
.tsutsumi i {
  position: absolute; inset: 0; filter: drop-shadow(0 0 0.6px rgba(201, 169, 98, 0.85)) drop-shadow(6px 8px 14px rgba(0, 0, 0, 0.45));
  backface-visibility: hidden;
  transition: transform 1.2s cubic-bezier(0.6, 0.05, 0.25, 1), opacity 0.5s ease;
  transition-delay: calc(1.25s + var(--k, 0) * 0.2s), calc(1.95s + var(--k, 0) * 0.2s);
}
.tsutsumi i::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg, rgba(255, 240, 210, 0.018) 0 1px, transparent 1px 6px),
    linear-gradient(150deg, #241e17, #110e0b);
}
.tsutsumi i:nth-child(1) { transform-origin: 0 50%; }
.tsutsumi i:nth-child(1)::before { clip-path: polygon(0 0, 62% 0, 50% 100%, 0 100%); }
.tsutsumi i:nth-child(2) { transform-origin: 100% 50%; }
.tsutsumi i:nth-child(2)::before { clip-path: polygon(40% 0, 100% 0, 100% 100%, 46% 100%);
  background:
    repeating-linear-gradient(65deg, rgba(255, 240, 210, 0.02) 0 1px, transparent 1px 6px),
    linear-gradient(210deg, #2a231a, #130f0c); }
.trio-origata.in .tsutsumi i:nth-child(1) { transform: rotateY(-108deg); opacity: 0; }
.trio-origata.in .tsutsumi i:nth-child(2) { transform: rotateY(108deg); opacity: 0; }
.tsutsumi b {
  position: absolute; left: -2px; right: -2px; top: 50%; height: 9px; margin-top: -4.5px;
  background: repeating-linear-gradient(180deg, #e9d29a 0 1.4px, #8a6f3c 1.4px 2.2px, transparent 2.2px 3px);
  transform: scaleX(0);
  transition: transform 0.7s var(--ease), opacity 0.45s ease, translate 0.45s ease;
  transition-delay: calc(0.3s + var(--k, 0) * 0.2s), calc(1s + var(--k, 0) * 0.2s), calc(1s + var(--k, 0) * 0.2s);
}
.tsutsumi b::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 2px solid #e9d29a; box-shadow: 0 0 0 1px #8a6f3c, inset 0 0 0 3px #110e0b, inset 0 0 0 4.5px #c9a962;
}
.trio-origata.in .tsutsumi b { transform: scaleX(1); opacity: 0; translate: 0 -14px; }
.trio-origata .trio-item > .t-no, .trio-origata .trio-item > h3, .trio-origata .trio-item > p {
  opacity: 0; transition: opacity 0.8s ease; transition-delay: calc(1.7s + var(--k, 0) * 0.2s);
}
.trio-origata.in .trio-item > .t-no, .trio-origata.in .trio-item > h3, .trio-origata.in .trio-item > p { opacity: 1; }

@property --tp-trace { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.team-card.avec-portrait { padding-top: 0; }
.team-card.avec-portrait .kj { top: auto; bottom: 12px; }
.team-portrait { position: relative; margin: 0 -40px 34px; aspect-ratio: 20 / 17; overflow: hidden; background: #0b0b0b; border-bottom: 1px solid var(--line); }
.team-portrait img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.team-portrait .tp-enso {
  -webkit-mask-image: conic-gradient(from var(--de) at var(--cx) var(--cy), #000 calc(var(--tp-trace) - 10deg), transparent var(--tp-trace));
  mask-image: conic-gradient(from var(--de) at var(--cx) var(--cy), #000 calc(var(--tp-trace) - 10deg), transparent var(--tp-trace));
  transition: filter 0.6s ease;
}
.team-portrait::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 68%, rgba(9, 9, 13, 0.6)); }
.tp-sceau {
  position: absolute; right: 16px; bottom: 16px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--shu); color: #f6ece0; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1;
  box-shadow: inset 0 0 0 2px var(--shu), inset 0 0 0 3px rgba(246, 236, 224, 0.7);
  opacity: 0; transform: rotate(-4deg) scale(1.8);
}
.team-duo.in .tp-photo { animation: tp-revele 1.9s cubic-bezier(0.3, 0.6, 0.3, 1) 0.35s both; }
.team-duo.in .tp-enso { animation: tp-trace 1.7s cubic-bezier(0.55, 0.1, 0.35, 1) 1.45s both; }
.team-duo.in .tp-sceau { animation: tp-sceau 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.25) 3.05s both; }
.team-duo.in .team-card:nth-of-type(2) .tp-photo { animation-delay: 0.6s; }
.team-duo.in .team-card:nth-of-type(2) .tp-enso { animation-delay: 1.7s; }
.team-duo.in .team-card:nth-of-type(2) .tp-sceau { animation-delay: 3.3s; }
.team-card.avec-portrait:hover .tp-enso { filter: brightness(1.18) saturate(1.1); }
@keyframes tp-revele {
  from { filter: brightness(0.08) contrast(1.4) blur(6px); transform: scale(1.04); }
  to { filter: none; transform: none; }
}
@keyframes tp-trace { from { --tp-trace: 0deg; } to { --tp-trace: 370deg; } }
@keyframes tp-sceau {
  from { opacity: 0; transform: rotate(-4deg) scale(1.8); }
  to { opacity: 0.95; transform: rotate(-4deg); }
}
@media (max-width: 640px) {
  .tp-sceau { width: 32px; height: 32px; right: 12px; bottom: 12px; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .team-duo.in .tp-photo, .team-duo.in .tp-enso, .team-duo.in .tp-sceau { animation: none; }
  .team-portrait .tp-enso { -webkit-mask-image: none; mask-image: none; }
  .tp-sceau { opacity: 0.95; transform: rotate(-4deg); }
}

@media (max-width: 900px) {
  .team-duo { padding-top: 96px; }
  .team-duo::after { display: none; }
  .team-duo .team-card:nth-of-type(1), .team-duo .team-card:nth-of-type(2) { transform: translateY(24px); }
}
@media (max-width: 640px) {
  .trio-shikishi .shikishi-kj { right: 22px; }
  .trio-shikishi .shikishi-kj > span { font-size: 3.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .team-duo .team-card, .duo-bol .bol-g, .duo-bol .bol-d, .duo-bol .bol-or, .team-duo::after { transition: none; }
  .trio-shikishi .trio-item::before, .trio-shikishi .trio-item::after, .trio-shikishi .shikishi-kj > span,
  .trio-shikishi .shikishi-kj::after, .trio-shikishi .trio-item h3, .trio-shikishi .trio-item p { transition: none; }
  .tsutsumi { display: none; }
  .trio-origata .trio-item > .t-no, .trio-origata .trio-item > h3, .trio-origata .trio-item > p { opacity: 1; transition: none; }
}

.stats-shaku[data-n] .stat { border-right: 0; border-bottom: 0; }

.included-kiri { gap: 14px; background: none; border: 0; }
.included-kiri .inc-item {
  position: relative; overflow: hidden; isolation: isolate; padding: 40px 28px 34px;
  border: 1px solid rgba(201, 169, 98, 0.22); background: linear-gradient(180deg, #17130f, #0c0a08);
}
.included-kiri .inc-item::before {
  content: ""; position: absolute; inset: 7px; z-index: -1; pointer-events: none; border: 1px solid rgba(201, 169, 98, 0.14);
}
.included-kiri .inc-no { display: block; margin-bottom: 14px; font-family: var(--font-display); font-size: 1.3rem; color: var(--kin); }
.kiri-futa {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(110, 80, 40, 0.09) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(255, 250, 235, 0.06) 0 2px, transparent 2px 23px),
    linear-gradient(180deg, #dcc7a0, #c7ad7e 60%, #b4996a);
  box-shadow: inset 0 0 0 1px rgba(90, 64, 30, 0.35), inset 0 -14px 22px rgba(80, 55, 25, 0.22);
  transition: transform 1s cubic-bezier(0.6, 0.05, 0.3, 1), opacity 0.5s ease;
  transition-delay: calc(1s + var(--k, 0) * 0.22s), calc(1.65s + var(--k, 0) * 0.22s);
}
.kiri-futa > span { font-family: var(--font-display); font-weight: 600; font-size: 3.1rem; line-height: 1; color: #1b140c; opacity: 0.86; }
.kiri-futa > i {
  position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 20px; height: 20px;
  background: var(--shu); color: #f6ece0; font-style: normal; font-size: 0.66rem; font-family: var(--font-display);
  box-shadow: inset 0 0 0 1px rgba(246, 236, 224, 0.5); transform: rotate(-5deg);
}
.included-kiri.in .kiri-futa { transform: translateY(-104%); opacity: 0; }
.included-kiri .inc-item > .inc-no, .included-kiri .inc-item > h3, .included-kiri .inc-item > p {
  opacity: 0; transition: opacity 0.8s ease; transition-delay: calc(1.45s + var(--k, 0) * 0.22s);
}
.included-kiri.in .inc-item > .inc-no, .included-kiri.in .inc-item > h3, .included-kiri.in .inc-item > p { opacity: 1; }

.ov-parti-pinceau .ov-citation { position: relative; border-left: 0;
  color: transparent; text-shadow: 0 0 12px rgba(236, 229, 214, 0.55);
  transition: color 1.4s ease 1.1s, text-shadow 1.4s ease 1.1s; }
.ov-parti-pinceau.in .ov-citation { color: var(--washi); text-shadow: 0 0 0 transparent; }
.ov-parti-pinceau .ov-citation::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 6px;
  background: linear-gradient(180deg, #f3e2b0, var(--kin) 55%, rgba(201, 169, 98, 0.12));
  clip-path: polygon(10% 0, 100% 1.5%, 62% 100%, 38% 100%);
  transform: scaleY(0); transform-origin: top; transition: transform 1.2s cubic-bezier(0.6, 0.05, 0.3, 1) 0.4s;
}
.ov-parti-pinceau.in .ov-citation::before { transform: none; }

@property --couture { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ov-faits-sashiko { gap: 14px; background: none; border: 0; }
.ov-faits-sashiko .inc-item { position: relative; isolation: isolate; padding: 40px 32px 36px;
  background: linear-gradient(160deg, var(--sumi-2), var(--sumi)); }
.ov-faits-sashiko .inc-item::before {
  content: ""; position: absolute; inset: 8px; z-index: -1; pointer-events: none;
  border: 1.5px dashed rgba(233, 210, 154, 0.72);
  -webkit-mask: conic-gradient(from -90deg, #000 var(--couture), transparent var(--couture));
  mask: conic-gradient(from -90deg, #000 var(--couture), transparent var(--couture));
  transition: --couture 1.6s linear; transition-delay: calc(0.3s + var(--k, 0) * 0.28s);
}
.ov-faits-sashiko.in .inc-item::before { --couture: 360deg; }
.ov-faits-sashiko .inc-item::after {
  content: ""; position: absolute; inset: 14px; z-index: -1; pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 9v8M9 13h8' stroke='%23c9a962' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 26px 26px;
  -webkit-mask: radial-gradient(ellipse at 50% 50%, transparent 46%, #000 100%);
  mask: radial-gradient(ellipse at 50% 50%, transparent 46%, #000 100%);
  transition: opacity 1.2s ease; transition-delay: calc(1.6s + var(--k, 0) * 0.28s);
}
.ov-faits-sashiko.in .inc-item::after { opacity: 0.32; }

.ov-resultat-cadre blockquote {
  background: linear-gradient(100deg, var(--kin-light) 42%, #fff6dc 50%, var(--kin-light) 58%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 1.6s ease 1.5s;
}
.ov-resultat-cadre.in blockquote { background-position: 0 0; }
.ov-resultat-cadre blockquote::before, .ov-resultat-cadre blockquote::after {
  display: inline-block; opacity: 0; transition: transform 1.1s var(--ease) 0.5s, opacity 0.7s ease 0.5s;
}
.ov-resultat-cadre blockquote::before { transform: translateX(-90px); }
.ov-resultat-cadre blockquote::after { transform: translateX(90px); }
.ov-resultat-cadre.in blockquote::before, .ov-resultat-cadre.in blockquote::after { opacity: 1; transform: none; }

.office-chochin .office { position: relative; padding-right: 108px; }
.chochin { position: absolute; top: 50%; right: 30px; width: 52px; height: 74px; margin-top: -37px; pointer-events: none; }
.chochin::before, .chochin::after {
  content: ""; position: absolute; left: 9px; right: 9px; height: 6px; z-index: 1;
  background: linear-gradient(180deg, #2b241b, #0b0a08); border: 1px solid rgba(201, 169, 98, 0.5);
}
.chochin::before { top: 0; }
.chochin::after { bottom: 0; }
.chochin > span {
  position: absolute; inset: 4px 0; isolation: isolate; border-radius: 50% / 44%; display: grid; place-items: center;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 45%, #3b2f23, #1d1712 78%);
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1; color: rgba(201, 169, 98, 0.4);
  transition: color 0.6s ease, box-shadow 0.8s ease;
  transition-delay: calc(1.2s + var(--k, 0) * 0.5s), calc(0.6s + var(--k, 0) * 0.5s);
}
.chochin > span::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: repeating-linear-gradient(180deg, rgba(120, 60, 20, 0.28) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 45%, #fff3d0 0, #f3c873 34%, #d0863a 74%, #8f4d1d);
}
.office-chochin.in .chochin > span { color: var(--shu);
  box-shadow: 0 0 20px rgba(242, 184, 96, 0.45), 0 0 56px rgba(242, 160, 70, 0.18); }
.office-chochin.in .chochin > span::before { animation: chochin-allume 1.3s ease calc(0.5s + var(--k, 0) * 0.5s) both; }
@keyframes chochin-allume {
  0% { opacity: 0; } 18% { opacity: 0.75; } 26% { opacity: 0.15; } 40% { opacity: 0.9; }
  52% { opacity: 0.45; } 70% { opacity: 1; } 100% { opacity: 1; }
}
.office-chochin .office:hover .chochin > span { box-shadow: 0 0 26px rgba(242, 184, 96, 0.6), 0 0 80px rgba(242, 160, 70, 0.26); }

.form-shojo { position: relative; isolation: isolate; }
.form-shojo::before {
  content: ""; position: absolute; inset: 10px; z-index: -1; pointer-events: none; opacity: 0;
  background:
    linear-gradient(var(--kin), var(--kin)) 0 0 / 22px 1px, linear-gradient(var(--kin), var(--kin)) 0 0 / 1px 22px,
    linear-gradient(var(--kin), var(--kin)) 100% 0 / 22px 1px, linear-gradient(var(--kin), var(--kin)) 100% 0 / 1px 22px,
    linear-gradient(var(--kin), var(--kin)) 0 100% / 22px 1px, linear-gradient(var(--kin), var(--kin)) 0 100% / 1px 22px,
    linear-gradient(var(--kin), var(--kin)) 100% 100% / 22px 1px, linear-gradient(var(--kin), var(--kin)) 100% 100% / 1px 22px;
  background-repeat: no-repeat; transform: scale(1.04); transition: opacity 0.9s ease 0.5s, transform 1.1s var(--ease) 0.5s;
}
.form-shojo.in::before { opacity: 0.8; transform: none; }
.form-shojo::after {
  content: "願"; position: absolute; top: 26px; right: 28px; display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--shu); color: #f6ece0; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1;
  box-shadow: inset 0 0 0 2px var(--shu), inset 0 0 0 3.5px rgba(246, 236, 224, 0.7);
  opacity: 0; transform: rotate(-6deg) scale(1.9);
  transition: opacity 0.2s ease 1.1s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.25) 1.1s;
}
.form-shojo.in::after { opacity: 1; transform: rotate(-6deg); }
.form-shojo > h2 { padding-right: 56px; }
.form-shojo .field { position: relative; }
.form-shojo .field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, var(--kin-light), var(--kin) 55%, rgba(201, 169, 98, 0.1));
  clip-path: polygon(0 0, 100% 35%, 100% 65%, 0 100%);
  transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease);
}
.form-shojo .field:focus-within::after { transform: none; }
.form-shojo .field:focus-within label { color: var(--kin); }

@media (max-width: 640px) {
  .office-chochin .office { padding-right: 76px; }
  .chochin { right: 18px; width: 38px; height: 54px; margin-top: -27px; }
  .chochin::before, .chochin::after { left: 7px; right: 7px; }
  .chochin > span { font-size: 1rem; }
  .form-shojo::after { top: 20px; right: 20px; width: 34px; height: 34px; font-size: 1.05rem; }
  .kiri-futa > span { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kiri-futa { display: none; }
  .included-kiri .inc-item > .inc-no, .included-kiri .inc-item > h3, .included-kiri .inc-item > p { opacity: 1; transition: none; }
  .ov-parti-pinceau .ov-citation { color: var(--washi); text-shadow: none; transition: none; }
  .ov-parti-pinceau .ov-citation::before { transform: none; transition: none; }
  .ov-faits-sashiko .inc-item::before { --couture: 360deg; transition: none; }
  .ov-faits-sashiko .inc-item::after { opacity: 0.32; transition: none; }
  .ov-resultat-cadre blockquote { transition: none; }
  .ov-resultat-cadre blockquote::before, .ov-resultat-cadre blockquote::after { opacity: 1; transform: none; transition: none; }
  .office-chochin .chochin > span { transition: none; }
  .office-chochin.in .chochin > span::before { animation: none; opacity: 1; }
  .form-shojo::before, .form-shojo::after, .form-shojo .field::after { transition: none; }
}


.mur-nu { position: relative; width: 380px; height: 278px; margin: 0 auto 34px; }
.mur-lampe {
  position: absolute; left: 50%; top: 0; width: 150px; height: 8px; margin-left: -75px; z-index: 2;
  background: linear-gradient(180deg, #e9d29a, #8a6f3c); border-radius: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.mur-lampe::before {
  content: ""; position: absolute; left: 50%; top: -14px; width: 2px; height: 14px; margin-left: -1px;
  background: linear-gradient(180deg, #5d4a28, #c9a962);
}
.mur-lampe::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 380px; height: 262px; margin-left: -190px;
  background: radial-gradient(ellipse 60% 85% at 50% 0, rgba(255, 236, 190, 0.27), rgba(255, 226, 170, 0.08) 55%, transparent 76%);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); opacity: 0;
}
.mur-trace {
  position: absolute; left: 50%; top: 36px; width: 252px; height: 172px; margin-left: -126px;
  background: linear-gradient(180deg, rgba(236, 229, 214, 0.1), rgba(236, 229, 214, 0.045));
  box-shadow: inset 0 0 0 1px rgba(236, 229, 214, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(0, 0, 0, 0.14), 0 0 30px rgba(236, 229, 214, 0.04);
  opacity: 0;
}
.mur-clou {
  position: absolute; left: 50%; top: -8px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3d0, #c9a962 45%, #5d4a28);
  box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.6);
}
.mur-cartel {
  position: absolute; right: 0; top: 186px; display: grid; gap: 4px; justify-items: start;
  padding: 9px 12px 8px; border: 1px solid rgba(201, 169, 98, 0.45); background: rgba(14, 12, 9, 0.9);
  opacity: 0; transform: translateX(16px);
}
.mur-cartel b { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1; color: var(--kin-light); letter-spacing: 0.08em; }
.mur-cartel i {
  display: grid; place-items: center; width: 14px; height: 14px; background: var(--shu); color: #f6ece0;
  font-style: normal; font-size: 0.5rem; font-family: var(--font-display);
}
html:not(.attente-seuil) .mur-lampe::after { animation: mur-allume 1.4s ease 0.5s both; }
html:not(.attente-seuil) .mur-trace { animation: mur-trace 1.6s ease 1.3s both; }
html:not(.attente-seuil) .mur-cartel { animation: mur-cartel 0.9s var(--ease) 2.2s both; }
@keyframes mur-allume {
  0% { opacity: 0; } 15% { opacity: 0.8; } 24% { opacity: 0.1; } 38% { opacity: 0.95; }
  50% { opacity: 0.5; } 68% { opacity: 1; } 100% { opacity: 1; }
}
@keyframes mur-trace { from { opacity: 0; } to { opacity: 1; } }
@keyframes mur-cartel { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.michi-shirube { gap: 22px; }
.michi-shirube .michi-step { border: 0; background: none; isolation: isolate; padding: 30px 50px 34px 26px; }
.michi-shirube .michi-step.reveal { transform: none; transition: opacity 0.6s ease, transform 0.5s var(--ease); }
.michi-shirube .michi-step::before, .michi-shirube .michi-step::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
}
.michi-shirube .michi-step::before {
  inset: 0; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
  background: linear-gradient(160deg, rgba(236, 217, 168, 0.6), rgba(201, 169, 98, 0.25));
}
.michi-shirube .michi-step::after {
  inset: 1px; clip-path: polygon(0 0, calc(100% - 27.4px) 0, 100% 50%, calc(100% - 27.4px) 100%, 0 100%);
  background:
    repeating-linear-gradient(90deg, rgba(255, 240, 210, 0.018) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #1b1611, #0d0b09);
  transition: background 0.5s;
}
.michi-shirube .michi-step.reveal.in { animation: shirube-pose 0.9s var(--ease) calc(0.15s + var(--k, 0) * 0.16s) backwards; }
@keyframes shirube-pose {
  0% { opacity: 0; transform: translateX(-46px); }
  70% { opacity: 1; transform: translateX(6px); }
  100% { opacity: 1; transform: none; }
}
.michi-shirube .michi-step.reveal.in:hover { transform: translateX(8px); }
.michi-shirube .michi-step:hover::after {
  background:
    repeating-linear-gradient(90deg, rgba(255, 240, 210, 0.025) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #241c14, #120f0b);
}

@media (max-width: 640px) {
  .mur-nu { transform: scale(0.86); margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.attente-seuil) .mur-lampe::after, html:not(.attente-seuil) .mur-trace, html:not(.attente-seuil) .mur-cartel { animation: none; }
  .mur-lampe::after, .mur-trace, .mur-cartel { opacity: 1; transform: none; }
  .michi-shirube .michi-step.reveal.in { animation: none; }
}

.kintsugi-bol { position: relative; width: 360px; max-width: 100%; margin: 0 auto 30px; }
.kb { display: block; width: 100%; height: auto; overflow: visible; }
.kb-bol { opacity: 0; }
.kb-felures path, .kb-or path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.kb-eclat { opacity: 0; transform-box: fill-box; transform-origin: center; }
.kb-cartel { position: absolute; right: -4px; bottom: 30px; display: grid; gap: 4px; justify-items: start; padding: 9px 12px 8px;
  border: 1px solid rgba(201, 169, 98, 0.45); background: rgba(14, 12, 9, 0.9); opacity: 0; transform: translateX(16px); }
.kb-cartel b { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1; color: var(--kin-light); letter-spacing: 0.08em; }
.kb-cartel i { font-style: normal; font-family: var(--font-display); font-size: 0.72rem; color: var(--shu); }
html:not(.attente-seuil) .kb-bol { animation: kb-vient 0.8s var(--ease) 0.2s both, kb-choc 0.36s ease-out 1s; }
html:not(.attente-seuil) .kb-felures path { animation: kb-trace 0.22s ease-out both; animation-delay: calc(1s + var(--k) * 0.06s); }
html:not(.attente-seuil) .kb-or path { animation: kb-trace 0.9s var(--ease-ink) both; animation-delay: calc(1.55s + var(--k) * 0.32s); }
html:not(.attente-seuil) .kb-eclat { animation: kb-eclat 0.9s ease-out 2.75s both; }
html:not(.attente-seuil) .kb-cartel { animation: kb-cartel 0.9s var(--ease) 2.5s both; }
@keyframes kb-vient { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes kb-choc { 0%, 100% { transform: none; } 20% { transform: translateX(-4px) rotate(-0.6deg); } 45% { transform: translateX(3px) rotate(0.4deg); } 70% { transform: translateX(-2px); } }
@keyframes kb-trace { to { stroke-dashoffset: 0; } }
@keyframes kb-eclat { 0% { opacity: 0; transform: scale(0) rotate(0); } 40% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0.85; transform: scale(0.7) rotate(90deg); } }
@keyframes kb-cartel { to { opacity: 1; transform: none; } }
.erreur-texte { text-align: center; max-width: 72ch; margin: 0 auto; color: var(--ink-dim); }
.erreur-texte a { color: var(--kin-light); }
.erreur-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 38px; }
@media (max-width: 640px) {
  .kintsugi-bol { width: 300px; margin-bottom: 18px; }
  .kb-cartel { right: 0; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.attente-seuil) .kb-bol, html:not(.attente-seuil) .kb-felures path, html:not(.attente-seuil) .kb-or path,
  html:not(.attente-seuil) .kb-eclat, html:not(.attente-seuil) .kb-cartel { animation: none; }
  .kb-bol, .kb-cartel { opacity: 1; transform: none; }
  .kb-felures path, .kb-or path { stroke-dashoffset: 0; }
  .kb-eclat { opacity: 0.85; }
}

.chat-site {
  --px: 0; --py: 0; --pas: 0.5s;
  position: absolute; left: 0; top: 0; z-index: 85; width: 150px;
  pointer-events: none; will-change: transform; transform-origin: 50% 70%;
}
body.nav-open .chat-site, body.nav-open .cs-pelote { visibility: hidden; }
.cs-sens { opacity: 0; transition: opacity 0.7s ease, transform 0.22s ease; }
.chat-site.present .cs-sens { opacity: 1; }
.cs-saut { position: relative; }
.cs-svg { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.cs-assis, .cs-marche, .cs-couche, .cs-tete-pos, .cs-patte-lave { pointer-events: visiblePainted; cursor: pointer; }
.cs-ombre { pointer-events: none; opacity: 0.85; }

.cs-assis { transition: opacity 0.2s; }
.cs-marche, .cs-couche { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
.chat-site.marche .cs-marche, .chat-site.couche .cs-couche { opacity: 1; visibility: visible; transition: opacity 0.2s; }
.chat-site.marche .cs-assis, .chat-site.couche .cs-assis { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
.cs-tete-pos { transform-box: view-box; transform: translate(10px, 5px); transition: transform 0.38s var(--ease); }
.chat-site.marche .cs-tete-pos { transform: translate(58px, 2px); }
.chat-site.couche .cs-tete-pos { transform: translate(10px, 44px); }
.chat-site.couche.dort .cs-tete-pos { transform: translate(10px, 50px); }

.cs-tete {
  transform-box: view-box; transform-origin: 130px 160px;
  transform: translate(calc(var(--px) * 0.4px), calc(var(--py) * 0.3px));
  transition: transform 0.4s var(--ease);
}
.chat-site.dort .cs-tete { transform: rotate(7deg); }
.cs-iris { transform: translate(calc(var(--px) * 1px), calc(var(--py) * 1px)); transition: transform 0.16s ease-out; }
.cs-paupiere { transform: translateY(-34px); transition: transform 0.08s ease-in; }
.chat-site.cligne .cs-paupiere { transform: none; }
.cs-oeil, .cs-oeil-trait { transition: opacity 0.2s; }
.cs-rieur, .cs-sommeil, .cs-zzz { opacity: 0; transition: opacity 0.3s; }
.chat-site.ronronne .cs-oeil, .chat-site.ronronne .cs-oeil-trait,
.chat-site.dort .cs-oeil, .chat-site.dort .cs-oeil-trait { opacity: 0; }
.chat-site.ronronne .cs-rieur, .chat-site.dort .cs-sommeil, .chat-site.dort .cs-zzz { opacity: 1; }
.cs-joue { opacity: 0.14; transition: opacity 0.5s; }
.chat-site.ronronne .cs-joue, .chat-site.dort .cs-joue { opacity: 0.7; }

.cs-jambe { transform-box: view-box; }
.cs-j1 { transform-origin: 74px 180px; }
.cs-j2 { transform-origin: 94px 180px; }
.cs-j3 { transform-origin: 170px 180px; }
.cs-j4 { transform-origin: 188px 180px; }
.chat-site.marche .cs-jambe { animation: csPas var(--pas) ease-in-out infinite; }
.chat-site.marche .cs-j2, .chat-site.marche .cs-j3 { animation-delay: calc(var(--pas) / -2); }
@keyframes csPas { 0%, 100% { transform: rotate(22deg); } 50% { transform: rotate(-22deg); } }
.chat-site.marche .cs-buste, .chat-site.marche .cs-tete { animation: csHoche calc(var(--pas) / 2) ease-in-out infinite alternate; }
@keyframes csHoche { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }
.cs-queue-marche { transform-box: view-box; transform-origin: 52px 150px; }
.chat-site.marche .cs-queue-marche { animation: csQueue calc(var(--pas) * 2) ease-in-out infinite alternate; }
@keyframes csQueue { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
.cs-queue-assis { transform-box: view-box; transform-origin: 184px 214px; }
.cs-queue-couche { transform-box: view-box; transform-origin: 228px 214px; }
.cs-queue-pend { display: none; transform-box: view-box; transform-origin: 226px 220px; }
.chat-site.pend .cs-queue-pend { display: inline; animation: csPend 2.6s ease-in-out infinite alternate; }
.chat-site.pend .cs-queue-couche { display: none; }
@keyframes csPend { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
@media (hover: hover) and (pointer: fine) {
  .chat-site.assis:not(.dort) .cs-queue-assis { animation: csQueueAssis 3.8s ease-in-out infinite; }
}
@keyframes csQueueAssis { 0%, 100% { transform: none; } 40% { transform: rotate(-9deg); } 70% { transform: rotate(4deg); } }

.chat-site.dort .cs-zzz text { animation: csZ 2.6s ease-in-out infinite; }
.chat-site.dort .cs-zzz text:nth-child(2) { animation-delay: 0.5s; }
.chat-site.dort .cs-zzz text:nth-child(3) { animation-delay: 1s; }
@keyframes csZ { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -10px); } }

.chat-site.ronronne .cs-tete { animation: csRonron 0.16s linear infinite; }
@keyframes csRonron { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.7px); } }
.chat-site.bondit .cs-saut { animation: csBond 0.6s cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes csBond { 0% { transform: none; } 18% { transform: scale(1.04, 0.93); } 45% { transform: translateY(-24px) scale(0.97, 1.04); } 75% { transform: translateY(0) scale(1.03, 0.96); } 100% { transform: none; } }
.cs-bulle {
  position: absolute; left: 66%; top: -14px; padding: 3px 11px 4px;
  border: 1px solid var(--kin); background: #120f0b; color: var(--kin-light);
  font-family: var(--font-display); font-size: 15px; line-height: 1.4; white-space: nowrap;
  opacity: 0; transform: translateY(6px) scale(0.8); transition: opacity 0.25s, transform 0.25s var(--ease);
  pointer-events: none;
}
.cs-bulle::after {
  content: ""; position: absolute; left: 10px; bottom: -6px; width: 9px; height: 9px;
  background: #120f0b; border-right: 1px solid var(--kin); border-bottom: 1px solid var(--kin); transform: rotate(45deg);
}
.chat-site.miaule .cs-bulle { opacity: 1; transform: none; }
.cs-oreille { transform-box: view-box; }
.cs-oreille-d { transform-origin: 174px 74px; }
.chat-site.frisson .cs-oreille-d { animation: csOreille 0.45s ease-out; }
@keyframes csOreille { 30% { transform: rotate(16deg); } 65% { transform: rotate(-5deg); } }
.cs-grelot { transform-box: view-box; transform-origin: 130px 168px; }
.chat-site.tinte .cs-grelot { animation: csGrelot 0.8s ease-out; }
@keyframes csGrelot { 15% { transform: rotate(18deg); } 35% { transform: rotate(-13deg); } 55% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }

.cs-jambe, .cs-queue-marche { transition: transform 0.14s ease-out; }
.chat-site.elan .cs-saut { animation: csElan 0.17s ease-out forwards; }
@keyframes csElan { to { transform: scale(1.05, 0.9); } }
.chat-site.vole .cs-jambe, .chat-site.vole .cs-buste, .chat-site.vole .cs-tete,
.chat-site.vole .cs-queue-marche { animation: none; }
.chat-site.vole .cs-j3, .chat-site.vole .cs-j4 { transform: rotate(-50deg); }
.chat-site.vole .cs-j1, .chat-site.vole .cs-j2 { transform: rotate(44deg); }
.chat-site.vole .cs-queue-marche { transform: rotate(-58deg); }
.chat-site.atterrit .cs-saut { animation: csAtterrit 0.34s ease-out; }
@keyframes csAtterrit { 0% { transform: scale(1.08, 0.86); } 55% { transform: scale(0.97, 1.04); } 100% { transform: none; } }

.cs-patte { transform-box: view-box; }
.cs-patte-g { transform-origin: 123px 189px; }
.cs-patte-d { transform-origin: 157px 189px; }
.chat-site.tape-d .cs-patte-d { animation: csTapeD 0.46s cubic-bezier(0.3, 0.7, 0.4, 1); }
.chat-site.tape-g .cs-patte-g { animation: csTapeG 0.46s cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes csTapeD { 35% { transform: rotate(-64deg) translateY(-4px); } 62% { transform: rotate(-18deg); } 100% { transform: none; } }
@keyframes csTapeG { 35% { transform: rotate(64deg) translateY(-4px); } 62% { transform: rotate(18deg); } 100% { transform: none; } }

.chat-site.penche-g .cs-tete { transform: rotate(-11deg) translate(calc(var(--px) * 0.4px), 0); }
.chat-site.penche-d .cs-tete { transform: rotate(11deg) translate(calc(var(--px) * 0.4px), 0); }
.cs-patte-lave { display: none; transform-box: view-box; transform-origin: 157px 189px; }
.chat-site.toilette .cs-patte-lave { display: inline; animation: csLave 0.42s ease-in-out infinite alternate; }
.chat-site.toilette .cs-patte-d { opacity: 0; }
@keyframes csLave { from { transform: rotate(150deg); } to { transform: rotate(163deg) translateY(-3px); } }
.chat-site.toilette .cs-tete { transform: translateY(4px) rotate(10deg); animation: csLeche 0.42s ease-in-out infinite alternate; }
@keyframes csLeche { from { transform: translateY(4px) rotate(10deg); } to { transform: translateY(6px) rotate(13deg); } }
.chat-site.toilette .cs-oeil, .chat-site.toilette .cs-oeil-trait,
.chat-site.baille .cs-oeil, .chat-site.baille .cs-oeil-trait { opacity: 0; }
.chat-site.toilette .cs-rieur, .chat-site.baille .cs-sommeil { opacity: 1; }
.cs-langue { opacity: 0; transform-box: view-box; transform-origin: 133px 134px; }
.chat-site.toilette .cs-langue { opacity: 1; animation: csLangue 0.42s ease-in-out infinite alternate; }
@keyframes csLangue { from { transform: scaleY(0.5); } to { transform: scaleY(1.1); } }
.cs-baille { opacity: 0; transform-box: view-box; transform-origin: 130px 131px; transform: scaleY(0.1); }
.chat-site.baille .cs-baille { animation: csBaille 1.9s ease-in-out forwards; }
.chat-site.baille .cs-tete { animation: csBailleTete 1.9s ease-in-out forwards; }
@keyframes csBaille { 0% { opacity: 0; transform: scaleY(0.1); } 12% { opacity: 1; } 45%, 72% { opacity: 1; transform: scaleY(1); } 92% { opacity: 1; transform: scaleY(0.15); } 100% { opacity: 0; transform: scaleY(0.1); } }
@keyframes csBailleTete { 0%, 100% { transform: none; } 45%, 72% { transform: translateY(-3px) rotate(-6deg); } }
.chat-site.etire .cs-jambe, .chat-site.etire .cs-buste, .chat-site.etire .cs-tete,
.chat-site.etire .cs-queue-marche { animation: none; }
.cs-buste { transform-box: view-box; transform-origin: 56px 160px; transition: transform 0.6s var(--ease); }
.chat-site.etire .cs-buste { transform: rotate(10deg); }
.chat-site.etire .cs-j3, .chat-site.etire .cs-j4 { transition-duration: 0.6s; transform: translate(10px, 12px) rotate(-66deg); }
.chat-site.etire .cs-j1, .chat-site.etire .cs-j2 { transition-duration: 0.6s; transform: rotate(-8deg); }
.chat-site.etire .cs-tete-pos { transform: translate(66px, 26px); transition-duration: 0.6s; }
.chat-site.etire .cs-queue-marche { transition-duration: 0.6s; transform: rotate(16deg); }
.cs-saut { transition: transform 0.45s var(--ease); }
.chat-site.cache .cs-sens, .chat-site.ressort .cs-sens { clip-path: inset(-80% -50% 2.9% -50%); }
.chat-site.cache .cs-saut { transform: translateY(41%); transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
.chat-site.ressort .cs-saut { transition: none; transform-origin: 50% 97%; animation: csRessort 0.66s linear; }
@keyframes csRessort {
  0% { transform: translateY(41%); animation-timing-function: ease-in; }
  16% { transform: translateY(46%) scale(1.05, 0.93); animation-timing-function: cubic-bezier(0.2, 0.75, 0.4, 1); }
  52% { transform: translateY(-24%) scale(0.95, 1.07); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.45); }
  76% { transform: translateY(0) scale(1.09, 0.87); animation-timing-function: ease-out; }
  89% { transform: scale(0.97, 1.03); }
  100% { transform: none; }
}
.cs-ombre { transition: opacity 0.25s ease; }
.chat-site.cache .cs-ombre, .chat-site.ressort .cs-ombre { opacity: 0; }

.chat-site.au-sol { position: fixed; top: auto; bottom: 0; }
html.chat-sol .site-footer { padding-bottom: calc(var(--chat-h, 0px) + 18px); }
.cs-pelote.au-sol { position: fixed; top: auto; bottom: var(--pb, 0px); }

.cs-pelote {
  position: absolute; left: 0; top: 0; z-index: 86; width: 30px; height: 30px;
  pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
}
.cs-pelote.vue { opacity: 1; }
.cs-pelote.derriere { z-index: 84; }   
.cs-pelote-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cs-pelote-boule { transform-box: view-box; transform-origin: 22px 24px; }

@media (max-width: 900px) { .chat-site { width: 128px; } }
@media (max-width: 640px) { .chat-site { width: 104px; } .cs-bulle { font-size: 13px; top: -16px; } }
@media (prefers-reduced-motion: reduce) {
  .chat-site *, .chat-site { animation: none !important; transition-duration: 0.01ms !important; }
}

.gallery-salle.salle-active .artwork.reveal.in:not(.eclairee) { opacity: 0.14; }
.gallery-salle.salle-active .artwork.reveal.in:not(.eclairee):hover { opacity: 0.6; }
.gallery-salle .artwork .art-frame { transition: box-shadow 1s ease, border-color 1s ease; }
.gallery-salle .artwork.eclairee .art-frame {
  border-color: rgba(236, 217, 168, 0.75);
  box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.25), 0 -30px 90px rgba(242, 196, 120, 0.16), 0 30px 70px rgba(0, 0, 0, 0.7);
}
.gallery-salle .art-frame { margin-top: 64px; }
:is(.gallery-salle, .ov-suivante) .art-frame .lamp {
  z-index: 3; top: -64px; width: 92%; height: calc(100% + 64px); opacity: 1;
  background:
    linear-gradient(180deg, #c9a962, #6e5528) 50% 0 / 26px 5px no-repeat,
    linear-gradient(90deg, #5d4a28, #e9d29a 50%, #5d4a28) 50% 4px / 3px 30px no-repeat;
}
:is(.gallery-salle, .ov-suivante) .art-frame .lamp::before {
  content: ""; position: absolute; left: 50%; top: 32px; width: 38%; height: 15px; margin-left: -19%; z-index: 1;
  border-radius: 4px 4px 12px 12px / 4px 4px 10px 10px;
  background: linear-gradient(180deg, #f6e7ba, #c9a962 40%, #6e5528);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 250, 230, 0.7), inset 0 -2px 0 rgba(60, 45, 20, 0.6);
  transition: box-shadow 0.9s ease;
}
:is(.gallery-salle, .ov-suivante) .art-frame .lamp::after {
  content: ""; position: absolute; left: 0; right: 0; top: 46px; bottom: 0; opacity: 0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 0, rgba(255, 238, 196, 0.5), rgba(255, 222, 160, 0.16) 48%, transparent 78%),
    linear-gradient(180deg, rgba(255, 226, 170, 0.14), transparent 72%);
  clip-path: polygon(31% 0, 69% 0, 100% 100%, 0 100%);
  transition: opacity 0.9s ease;
}
.gallery-salle:not(.salle-active) .art-frame .lamp::after, .gallery-salle .artwork.eclairee .art-frame .lamp::after { opacity: 1; }
.gallery-salle:not(.salle-active) .art-frame .lamp::before, .gallery-salle .artwork.eclairee .art-frame .lamp::before {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 250, 230, 0.7), inset 0 -2px 0 rgba(255, 236, 190, 0.9),
    0 8px 22px rgba(255, 220, 150, 0.55);
}
.gallery-salle .artwork.eclairee .art-canvas img { filter: brightness(1.12) saturate(1.08); }
.gallery-salle .artwork.eclairee .art-frame .lamp::after { animation: salle-allume 1.2s ease both; }
@keyframes salle-allume {
  0% { opacity: 0.3; } 16% { opacity: 0.9; } 26% { opacity: 0.35; } 42% { opacity: 1; } 58% { opacity: 0.7; } 100% { opacity: 1; }
}
@media (hover: hover) and (min-width: 901px) {
  .gallery-salle .art-canvas img { transition: transform 1.2s var(--ease), filter 0.9s ease; }
  .gallery-salle.salle-active .artwork:not(.eclairee) .art-canvas img { filter: grayscale(1) brightness(0.45); }
}
.gallery-salle .cartel { position: relative; border-left: 0; }
.gallery-salle .cartel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, var(--kin-light), var(--kin) 70%, rgba(201, 169, 98, 0.2));
  transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--ease) 0.3s;
}
.gallery-salle .artwork.in .cartel::before { transform: none; }
.cartel-sceau {
  position: absolute; top: -4px; right: 0; display: grid; place-items: center; width: 30px; height: 30px;
  background: var(--shu); color: #f6ece0; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; line-height: 1;
  box-shadow: inset 0 0 0 1.5px var(--shu), inset 0 0 0 2.5px rgba(246, 236, 224, 0.7);
  opacity: 0; transform: rotate(-6deg) scale(1.8);
  transition: opacity 0.2s ease 1.1s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.25) 1.1s;
}
.artwork.in .cartel-sceau { opacity: 1; transform: rotate(-6deg); }
.cartel .spec .spec-resultat { display: block; }
.cartel .spec .spec-resultat .k { display: block; margin-bottom: 7px; }
.cartel .spec .spec-resultat .v { display: block; text-align: left; letter-spacing: 0.03em; line-height: 1.65; font-size: 0.82rem; }
@media (prefers-reduced-motion: reduce) {
  .gallery-salle .cartel::before, .cartel-sceau { transition: none; }
  .gallery-salle .artwork.eclairee .art-frame .lamp::after { animation: none; }
}

.obi-croise { position: relative; height: 280px; overflow: clip; }
.obi {
  position: absolute; left: -6vw; width: 112vw; top: 50%; height: 62px;
  display: flex; align-items: center; overflow: hidden;
}
.obi::before, .obi::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px; z-index: 1; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.obi::before { top: 0; }
.obi::after { bottom: 0; }
.obi-laque {
  z-index: 1; transform: translateY(-50%) rotate(-4.6deg);
  background:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2214%22 viewBox=%220 0 28 14%22%3E%3Cg fill=%22none%22 stroke=%22%23c9a962%22 stroke-opacity=%220.2%22 stroke-width=%220.8%22%3E%3Cpath d=%22M0 14a14 14 0 0 1 28 0M0 14a10.5 10.5 0 0 1 28 0M0 14a7 7 0 0 1 28 0M0 14a3.5 3.5 0 0 1 28 0%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 28px 14px,
    repeating-linear-gradient(90deg, rgba(255, 240, 210, 0.02) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #1f1a14, #0a0907);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
  clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--ease) 0.15s;
}
.obi-laque::before, .obi-laque::after {
  background: repeating-linear-gradient(115deg, #f0dca2 0 2px, #9c7c42 2px 4px, #3d2f17 4px 5px);
}
.obi-or {
  z-index: 2; transform: translateY(-50%) rotate(3.8deg);
  background:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2230%22 height=%2217.32%22 viewBox=%220 0 30 17.32%22%3E%3Cg fill=%22none%22 stroke=%22%237a5a26%22 stroke-opacity=%220.32%22 stroke-width=%220.9%22%3E%3Cpath d=%22M0.00 8.66 L5.00 0.00 L15.00 0.00 L20.00 8.66 L15.00 17.32 L5.00 17.32 Z M20 8.66 L30 8.66%22/%3E%3Cpath d=%22M4.20 8.66 L7.10 3.64 L12.90 3.64 L15.80 8.66 L12.90 13.68 L7.10 13.68 Z%22 stroke-opacity=%220.2%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 30px 17.32px,
    repeating-linear-gradient(0deg, rgba(120, 85, 30, 0.06) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f6e7ba, #dcc285 45%, #b8955a);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55);
  clip-path: inset(0 0 0 100%); transition: clip-path 1.3s var(--ease) 0.45s;
}
.obi-or::before, .obi-or::after {
  background: repeating-linear-gradient(115deg, #c2432f 0 2px, #f0a07e 2px 3px, #6e1a12 3px 5px);
}
.obi-croise.in .obi-laque, .obi-croise.in .obi-or { clip-path: inset(0); }
.obi-piste { display: flex; align-items: center; flex: none; white-space: nowrap; will-change: transform;
  animation: obi-defile 56s linear infinite; }
.obi-or .obi-piste { animation-duration: 48s; animation-direction: reverse; }
.obi-croise:not(.obi-vu) .obi-piste, .obi-croise:hover .obi-piste { animation-play-state: paused; }
@keyframes obi-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.obi-piste span { text-transform: uppercase; line-height: 1; }
.obi-or .obi-piste span { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.24em; color: #1a120a; }
.obi-laque .obi-piste span { font-family: var(--font-body); font-weight: 400; font-size: 0.76rem; letter-spacing: 0.36em; color: var(--kin-light); }
.obi-sceau {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 16px 0 40px;
  background: var(--shu); color: #f6ece0; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; line-height: 1;
  box-shadow: inset 0 0 0 1.5px var(--shu), inset 0 0 0 2.5px rgba(246, 236, 224, 0.7), 0 1px 2px rgba(80, 30, 10, 0.4);
  transform: rotate(-4deg);
}
.obi-sceau.deux { font-size: 0.66rem; letter-spacing: -0.04em; }
.obi-mon {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 16px 0 40px; border-radius: 50%;
  background: #0c0a08; border: 1px solid var(--kin);
  box-shadow: inset 0 0 0 3px #0c0a08, inset 0 0 0 4px rgba(201, 169, 98, 0.55);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; line-height: 1; color: var(--kin-light);
}
.obi-dome {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3d0, #d9bc78 42%, #8a6a32 78%, #5a4320);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 250, 230, 0.55), inset 0 0 0 6px rgba(110, 85, 40, 0.5),
    0 0 0 3px #1a140c, 0 0 0 4px rgba(201, 169, 98, 0.7);
  font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; line-height: 1; color: var(--shu);
  text-shadow: 0 1px 0 rgba(255, 245, 220, 0.6);
  opacity: 0; transform: scale(0.4) rotate(-40deg);
  transition: opacity 0.35s ease 1.6s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1.25) 1.6s;
}
.obi-croise.in .obi-dome { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .obi-croise { height: 190px; }
  .obi { height: 46px; }
  .obi::before, .obi::after { height: 4px; }
  .obi-or .obi-piste span { font-size: 0.76rem; letter-spacing: 0.2em; }
  .obi-laque .obi-piste span { font-size: 0.64rem; letter-spacing: 0.28em; }
  .obi-sceau { width: 24px; height: 24px; margin: 0 12px 0 28px; font-size: 0.76rem; }
  .obi-sceau.deux { font-size: 0.56rem; }
  .obi-mon { width: 26px; height: 26px; margin: 0 12px 0 28px; font-size: 0.76rem; }
  .obi-dome { width: 46px; height: 46px; margin: -23px 0 0 -23px; font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .obi-laque, .obi-or { clip-path: none; transition: none; }
  .obi-piste { animation: none; }
  .obi-dome { opacity: 1; transform: none; transition: none; }
}

.statement { padding: clamp(80px, 10vw, 140px) 40px; border-block: 1px solid var(--line-soft); position: relative; overflow: hidden; }
.statement p {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.9rem); line-height: 1.42;
  max-width: 1080px; margin: 0 auto; text-align: center; color: var(--ink-dim); position: relative; z-index: 1;
}
.statement .hl { color: var(--kin-light); }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trio-item { border: 1px solid var(--line-soft); padding: 32px 28px; background: rgba(14, 14, 18, 0.55); transition: 0.5s var(--ease); }
.trio-item:hover { border-color: var(--line); transform: translateY(-4px); }
.trio-item .t-no { font-family: var(--font-display); color: var(--kin-light); font-size: 1.5rem; }
.trio-item h3 { font-size: 1.1rem; margin: 10px 0 8px; }
.trio-item p { font-size: 0.88rem; color: var(--ink-dim); }

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.team-card { padding: 46px 40px; border: 1px solid var(--line-soft); background: linear-gradient(150deg, rgba(22, 22, 28, 0.9), rgba(9, 9, 13, 0.96)); transition: 0.6s var(--ease); position: relative; overflow: hidden; }
.team-card:hover { border-color: var(--line); transform: translateY(-6px); box-shadow: var(--glow); }
.team-card .kj { position: absolute; top: 10px; right: 18px; font-family: var(--font-display); font-size: 5rem; color: rgba(201, 169, 98, 0.06); line-height: 1; }
.team-card .role { font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--kin); }
.team-card h3 { font-size: 1.8rem; margin: 12px 0 18px; }
.team-card p { color: var(--ink-dim); font-size: 0.92rem; }
.team-card .skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.team-card .skills li { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line-soft); padding: 5px 12px; }

.detail-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 54px; align-items: center; padding: clamp(46px, 6vw, 82px) 0; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 110px; }
.detail-row:last-of-type { border-bottom: 0; }
.detail-row:nth-child(even) .detail-text { order: 2; }
.detail-num { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem); line-height: 1; color: rgba(201, 169, 98, 0.3); }
.detail-text h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin: 12px 0 16px; }
.detail-text > p { color: var(--ink-dim); max-width: 560px; margin-bottom: 14px; }
.detail-list { margin-top: 24px; display: grid; gap: 12px; }
.detail-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-dim); font-size: 0.93rem; }
.detail-list li::before { content: ""; width: 6px; height: 6px; margin-top: 0.62em; background: var(--kin); transform: rotate(45deg); flex-shrink: 0; }
.detail-text .btn { margin-top: 34px; }
.detail-visual { position: relative; min-height: 320px; overflow: hidden; border: 1px solid var(--line); background: var(--sumi-2); }
.detail-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.detail-visual:hover img { transform: scale(1.05); }

.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-q {
  width: 100%; background: none; border: 0; color: var(--washi); text-align: left;
  padding: 28px 54px 28px 4px; font-size: 1.08rem; font-family: var(--font-display);
  position: relative; transition: color 0.4s;
}
.faq-q:hover { color: var(--kin-light); }
.faq-q::after { content: "+"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--kin); transition: transform 0.5s var(--ease); font-family: var(--font-body); font-weight: 200; }
.faq-item.open .faq-q::after { transform: translateY(-50%) rotate(135deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.6s var(--ease); }
.faq-a p { padding: 0 4px 30px; color: var(--ink-dim); font-size: 0.94rem; max-width: 740px; }

@property --arc { syntax: "<angle>"; inherits: false; initial-value: 290deg; }
.faq-mondo .faq-item {
  position: relative; padding-left: 64px; border-bottom: 0;
  opacity: 0; transform: translateX(-14px);
  transition: opacity 0.8s ease, transform 0.8s var(--ease), background 0.5s;
  transition-delay: calc(0.15s + var(--k, 0) * 0.12s), calc(0.15s + var(--k, 0) * 0.12s), 0s;
}
.faq-mondo.in .faq-item { opacity: 1; transform: none; }
.faq-mondo .faq-item.open { background: linear-gradient(90deg, rgba(201, 169, 98, 0.06), transparent 70%); }
.faq-mondo .faq-item::before {
  content: attr(data-n); position: absolute; left: 6px; top: 24px;
  display: grid; place-items: center; width: 34px; height: 34px;
  font-family: var(--font-display); font-size: 1rem; line-height: 1; color: var(--kin);
  border: 1px solid rgba(201, 169, 98, 0.5);
  transition: background 0.5s, color 0.5s, border-color 0.5s;
}
.faq-mondo .faq-item:hover::before { border-color: var(--kin); }
.faq-mondo .faq-item.open::before { background: var(--kin); color: var(--sumi); border-color: var(--kin); }
.faq-mondo .faq-item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, var(--kin), rgba(201, 169, 98, 0.18) 60%, transparent);
  transform: scaleX(0); transform-origin: left;
}
.faq-mondo.in .faq-item::after { transform: scaleX(1); transition: transform 1.1s var(--ease) calc(0.35s + var(--k, 0) * 0.12s); }
.faq-mondo .faq-q { padding-left: 0; padding-right: 62px; transition: color 0.4s, transform 0.5s var(--ease); }
.faq-mondo .faq-q:hover { transform: translateX(4px); }
.faq-mondo .faq-q::after {
  content: ""; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  border: 1.6px solid var(--kin); font-size: 0;
  -webkit-mask: conic-gradient(from 20deg, #000 0 var(--arc), transparent var(--arc));
  mask: conic-gradient(from 20deg, #000 0 var(--arc), transparent var(--arc));
  transition: transform 0.6s var(--ease), --arc 0.6s var(--ease);
}
.faq-mondo .faq-item.open .faq-q::after { --arc: 360deg; transform: translateY(-50%) rotate(80deg); }
.faq-mondo .faq-q::before {
  content: ""; position: absolute; right: 20px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--kin-light); transform: scale(0); transition: transform 0.4s var(--ease);
}
.faq-mondo .faq-item.open .faq-q::before { transform: scale(1); transition-delay: 0.3s; }
.faq-mondo .faq-a::before {
  content: "答"; float: left; display: grid; place-items: center; width: 28px; height: 28px;
  margin: 1px 16px 8px 0; background: var(--shu); color: #f6ece0;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; line-height: 1;
  box-shadow: inset 0 0 0 1.5px var(--shu), inset 0 0 0 2.5px rgba(246, 236, 224, 0.75);
  transform: rotate(-5deg) scale(0);
}
.faq-mondo .faq-item.open .faq-a::before { animation: mondo-sceau 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
@keyframes mondo-sceau {
  0% { transform: rotate(-5deg) scale(1.8); opacity: 0; }
  70% { transform: rotate(-5deg) scale(0.92); opacity: 1; }
  100% { transform: rotate(-5deg) scale(1); opacity: 1; }
}
.faq-mondo .faq-a p { padding-left: 0; }
.faq-mondo .faq-item.open .faq-a p {
  -webkit-mask: linear-gradient(100deg, #000 42%, transparent 58%) 0 0 / 260% 100% no-repeat;
  mask: linear-gradient(100deg, #000 42%, transparent 58%) 0 0 / 260% 100% no-repeat;
  animation: mondo-encre 1.2s var(--ease) 0.15s both;
}
@keyframes mondo-encre {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@media (max-width: 640px) {
  .faq-mondo .faq-item { padding-left: 48px; }
  .faq-mondo .faq-item::before { left: 2px; width: 30px; height: 30px; top: 22px; font-size: 0.92rem; }
  .faq-mondo .faq-q { padding-right: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-mondo .faq-item { opacity: 1; transform: none; transition: background 0.5s; }
  .faq-mondo .faq-item::after { transform: none; transition: none; }
  .faq-mondo .faq-item.open .faq-a::before { animation: none; transform: rotate(-5deg); }
  .faq-mondo .faq-item.open .faq-a p { animation: none; -webkit-mask: none; mask: none; }
}

.cta-band { position: relative; text-align: center; padding: clamp(96px, 12vw, 170px) 40px; overflow: hidden; }
.cta-band .torii { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 84%); opacity: 0.16; pointer-events: none; }
.cta-band .torii path, .cta-band .torii line { stroke: var(--kin); stroke-width: 2; fill: none; }
.cta-band h2, .cta-band .lead, .cta-band .btn, .cta-band .hanko { position: relative; z-index: 2; }
.cta-band .lead { margin: 22px auto 38px; }
.cta-band .hanko { margin: 0 auto 34px; }

.cta-band .audit {
  position: relative; z-index: 2; max-width: 780px; margin: 0 auto; text-align: left;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  background: radial-gradient(90% 70% at 100% 0%, rgba(201, 169, 98, 0.06), transparent 60%), linear-gradient(160deg, rgba(18, 16, 20, 0.94), rgba(9, 8, 10, 0.96) 72%);
  box-shadow: 0 40px 120px -50px rgba(0, 0, 0, 0.9);
}
.cta-band .audit::before, .cta-band .audit::after { content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none; }
.cta-band .audit::before { top: -1px; left: -1px; border-top: 1px solid var(--kin); border-left: 1px solid var(--kin); }
.cta-band .audit::after { right: -1px; bottom: -1px; border-right: 1px solid var(--kin); border-bottom: 1px solid var(--kin); }
.audit-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; }
.audit-champ { position: relative; display: grid; gap: 9px; align-content: start; min-width: 0; }
.audit-champ.large { grid-column: 1 / -1; }
.audit-champ label { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-dim); transition: color 0.35s; }
.audit-champ input, .audit-champ textarea {
  font: inherit; font-size: 16px; color: var(--washi); background: rgba(8, 8, 10, 0.55); border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 12px 4px; width: 100%; min-width: 0;
}
.audit-champ textarea { min-height: 96px; resize: vertical; border: 1px solid var(--line-soft); padding: 12px 14px; }
.audit-champ input::placeholder, .audit-champ textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.audit-champ input:focus, .audit-champ textarea:focus { outline: none; }
.audit-champ::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, var(--kin-deep), var(--kin-light), var(--kin-deep));
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease);
}
.audit-champ:focus-within::after { transform: scaleX(1); }
.audit-champ:focus-within label { color: var(--kin); }
.audit-champ.manque input, .audit-champ.manque textarea { border-color: var(--shu); }
.audit-champ.manque label { color: #e08a7a; }
.audit-piege { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; }
.audit-accord { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin: 24px 0 0; font-size: 0.78rem; line-height: 1.6; color: var(--ink-dim); cursor: pointer; }
.audit-accord input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--kin); }
.audit-accord a { color: var(--kin-light); border-bottom: 1px solid var(--kin-deep); }
.audit-accord.manque { color: #e08a7a; }
.audit-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.audit-reponse { margin: 20px 0 0; padding: 14px 18px; font-size: 0.86rem; line-height: 1.6; border-left: 2px solid var(--kin); background: rgba(201, 169, 98, 0.06); color: var(--ink-soft); }
.audit-reponse.mauvais { border-left-color: var(--shu); background: rgba(168, 55, 42, 0.08); }
.audit-dossier { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 0.8rem; line-height: 1.6; color: var(--ink-faint); }
.audit-dossier a { color: var(--kin-light); border-bottom: 1px solid var(--kin-deep); white-space: nowrap; }
.audit.envoye .audit-grille, .audit.envoye .audit-accord, .audit.envoye .audit-actions button { display: none; }
.audit.envoye { display: flex; flex-direction: column; }
.audit.envoye .audit-reponse { order: 1; margin-top: 0; }
.audit.envoye .audit-actions { order: 2; margin-top: 18px; }
.audit.envoye .audit-dossier { order: 3; }
.audit.reveal .audit-champ { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); transition-delay: calc(0.25s + var(--k, 0) * 0.08s); }
.audit.reveal.in .audit-champ { opacity: 1; transform: none; }
@media (max-width: 640px) {
  .cta-band { padding-left: 16px; padding-right: 16px; }
  .cta-band .audit { padding: 22px 18px 24px; }
  .audit-grille { grid-template-columns: 1fr; gap: 18px; }
  .audit-actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (min-width: 1101px) {
  .cta-band {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(56px, 6vw, 110px); align-items: start; text-align: left;
    padding-left: max(40px, calc((100% - 1280px) / 2)); padding-right: max(40px, calc((100% - 1280px) / 2));
  }
  .cta-band .hanko { grid-column: 1; grid-row: 2; margin: 0 0 30px; }
  .cta-band h2 { grid-column: 1; grid-row: 3; }
  .cta-band .lead { grid-column: 1; grid-row: 4; margin: 22px 0 0; }
  .cta-band .audit { grid-column: 2; grid-row: 1 / -1; max-width: none; margin: 0; padding: clamp(24px, 2.7vw, 38px); }
  .cta-band .torii { left: calc(max(40px, (100% - 1280px) / 2) + min(100% - 80px, 1280px) * 0.21); width: min(500px, 38%); }
}
@media (prefers-reduced-motion: reduce) {
  .audit.reveal .audit-champ { opacity: 1; transform: none; transition: none; }
  .audit-champ::after { transition: none; }
}

.plans {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
  align-items: stretch; padding-top: 70px;   
}
.plans + .price-note { margin-top: 70px; }   
.plan {
  --i: 0; --pad: 32px; --cadre: 10px;
  position: relative; display: flex; flex-direction: column;
  padding: 0 var(--pad) 34px;
  border: var(--cadre) solid transparent;
  background:
    linear-gradient(170deg, rgba(19, 17, 15, 0.98), rgba(9, 9, 11, 0.99)) padding-box,
    linear-gradient(150deg, #3b3021 0%, #17120c 26%, #2d2417 50%, #110d09 76%, #3b3021 100%) border-box;
  box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.26), 0 40px 70px -40px #000;
  transition: box-shadow 0.6s;
}
.plan:nth-child(2) { --i: 1; }
.plan:nth-child(3) { --i: 2; }
.plans .plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.5), var(--glow), 0 40px 70px -40px #000;
}

.plan::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -40px; height: 24px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(236, 200, 120, 0.34), transparent);
  opacity: 0;
  transition: opacity 1.4s ease calc(0.7s + var(--i) * 0.3s), transform 1.1s var(--ease);
}
.plan.in::after { opacity: 0.75; }
.plans .plan:hover::after { opacity: 1; transform: translateY(6px) scaleX(0.9); transition-delay: 0s; }

.plan.featured {
  background:
    linear-gradient(170deg, rgba(19, 17, 15, 0.98), rgba(9, 9, 11, 0.99)) padding-box,
    linear-gradient(150deg, #5a4628 0%, #1d160d 26%, #46371f 50%, #18120a 76%, #5a4628 100%) border-box;
  box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.5), 0 0 70px rgba(201, 169, 98, 0.14), 0 40px 70px -40px #000;
}
.plans .plan.featured:hover {
  box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.7), 0 0 80px rgba(201, 169, 98, 0.22), 0 40px 70px -40px #000;
}
.plans .plan.featured.in { transform: scale(1.035); }
.plans .plan.featured.in:hover { transform: scale(1.035) translateY(-6px); }
.plan .badge {
  position: absolute; z-index: 4; top: calc(var(--cadre) / -2); left: 50%; transform: translate(-50%, -50%);
  background: var(--kin); color: var(--sumi); font-size: 0.6rem; letter-spacing: 0.24em;
  text-transform: uppercase; padding: 5px 14px; white-space: nowrap; font-weight: 500;
}

.plan-lampes {
  position: absolute; left: 10%; right: 10%; top: -62px; height: 62px;
  z-index: 2; pointer-events: none; opacity: 0.82; transition: opacity 0.6s;
}
.plans .plan:hover .plan-lampes { opacity: 1; }
.plan-lampes i {
  position: absolute; top: 0; left: 0; width: 46px; height: 62px;
  background:
    radial-gradient(circle at 18px 24px, #e2c88a 0 1.6px, #8a6d33 2.4px 3.2px, transparent 3.6px),
    linear-gradient(var(--kin-deep), #3a2f1c) 17px 0 / 2px 24px no-repeat;
}
.plan-lampes i:last-child { left: auto; right: 0; transform: scaleX(-1); }
.plan-lampes i::before {
  content: ""; position: absolute; top: 24px; left: 11px; width: 14px; height: 22px;
  border-radius: 3px 3px 2px 2px; transform: rotate(-30deg); transform-origin: 7px 0;
  background: linear-gradient(90deg, #15110b, #6b5733 40%, #2a2115 80%, #15110b);
  box-shadow: inset 0 -2px 0 rgba(120, 100, 70, 0.5);
}
.plan.in .plan-lampes i::before {
  box-shadow: inset 0 -3px 0 rgba(255, 238, 200, 0.95), 0 7px 10px -2px rgba(255, 214, 140, 0.7);
  transition: box-shadow 0.4s ease calc(0.3s + var(--i) * 0.3s);
}
.plan-lampes i::after {
  content: ""; position: absolute; top: 44px; left: -62px; width: 160px; height: 230px;
  transform: rotate(-30deg); transform-origin: 80px -20px;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 236, 196, 0.34), rgba(255, 233, 190, 0.1) 45%, rgba(255, 233, 190, 0) 92%);
  opacity: 0;
}
.plan.in .plan-lampes i::after { animation: plan-allume 1.5s linear calc(0.25s + var(--i) * 0.3s) 1 both; }
.plan.in .plan-lampes i:last-child::after { animation-delay: calc(0.42s + var(--i) * 0.3s); }
@keyframes plan-allume {
  0% { opacity: 0; } 6% { opacity: 0.8; } 11% { opacity: 0.08; } 19% { opacity: 0.6; }
  23% { opacity: 0.2; } 38% { opacity: 1; } 100% { opacity: 1; }
}

.plan-tete {
  --nashiji: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Ccircle cx='143.2' cy='126.5' r='0.85' fill='%23a8874a' fill-opacity='0.30'/%3E%3Ccircle cx='132.4' cy='70.8' r='0.35' fill='%23f3e2b0' fill-opacity='0.82'/%3E%3Ccircle cx='134.3' cy='168.0' r='0.92' fill='%23a8874a' fill-opacity='0.76'/%3E%3Ccircle cx='137.4' cy='98.3' r='0.68' fill='%23e2c88a' fill-opacity='0.59'/%3E%3Ccircle cx='168.2' cy='46.6' r='0.58' fill='%23c9a962' fill-opacity='0.55'/%3E%3Ccircle cx='169.3' cy='131.5' r='0.54' fill='%23a8874a' fill-opacity='0.73'/%3E%3Ccircle cx='64.6' cy='63.1' r='0.62' fill='%23c9a962' fill-opacity='0.36'/%3E%3Ccircle cx='127.5' cy='85.5' r='0.36' fill='%23a8874a' fill-opacity='0.84'/%3E%3Ccircle cx='45.1' cy='48.9' r='0.41' fill='%23c9a962' fill-opacity='0.56'/%3E%3Ccircle cx='42.5' cy='22.4' r='0.39' fill='%23a8874a' fill-opacity='0.68'/%3E%3Ccircle cx='21.8' cy='137.4' r='1.35' fill='%23c9a962' fill-opacity='0.73'/%3E%3Ccircle cx='60.1' cy='45.7' r='0.37' fill='%23a8874a' fill-opacity='0.63'/%3E%3Ccircle cx='18.5' cy='46.6' r='0.35' fill='%23a8874a' fill-opacity='0.54'/%3E%3Ccircle cx='117.3' cy='98.4' r='0.50' fill='%23f3e2b0' fill-opacity='0.82'/%3E%3Ccircle cx='125.5' cy='130.9' r='0.99' fill='%23e2c88a' fill-opacity='0.58'/%3E%3Ccircle cx='127.0' cy='6.7' r='1.02' fill='%23a8874a' fill-opacity='0.82'/%3E%3Ccircle cx='127.4' cy='156.7' r='0.98' fill='%23a8874a' fill-opacity='0.51'/%3E%3Ccircle cx='135.5' cy='67.1' r='0.68' fill='%23f3e2b0' fill-opacity='0.73'/%3E%3Ccircle cx='10.2' cy='137.0' r='0.59' fill='%23e2c88a' fill-opacity='0.68'/%3E%3Ccircle cx='118.6' cy='111.6' r='0.44' fill='%23c9a962' fill-opacity='0.59'/%3E%3Ccircle cx='26.4' cy='102.3' r='0.35' fill='%23e2c88a' fill-opacity='0.42'/%3E%3Ccircle cx='98.4' cy='109.1' r='0.36' fill='%23c9a962' fill-opacity='0.68'/%3E%3Ccircle cx='95.2' cy='32.7' r='0.85' fill='%23a8874a' fill-opacity='0.47'/%3E%3Ccircle cx='124.7' cy='122.8' r='0.36' fill='%23f3e2b0' fill-opacity='0.49'/%3E%3Ccircle cx='138.1' cy='89.0' r='1.07' fill='%23c9a962' fill-opacity='0.82'/%3E%3Ccircle cx='8.1' cy='168.4' r='0.36' fill='%23f3e2b0' fill-opacity='0.44'/%3E%3Ccircle cx='169.8' cy='118.8' r='0.35' fill='%23e2c88a' fill-opacity='0.62'/%3E%3Ccircle cx='134.8' cy='148.5' r='0.53' fill='%23c9a962' fill-opacity='0.37'/%3E%3Ccircle cx='170.6' cy='169.2' r='0.93' fill='%23e2c88a' fill-opacity='0.33'/%3E%3Ccircle cx='91.2' cy='101.3' r='0.46' fill='%23a8874a' fill-opacity='0.44'/%3E%3Ccircle cx='159.7' cy='115.5' r='0.40' fill='%23e2c88a' fill-opacity='0.26'/%3E%3Ccircle cx='118.5' cy='18.7' r='0.35' fill='%23a8874a' fill-opacity='0.31'/%3E%3Ccircle cx='173.8' cy='68.1' r='0.51' fill='%23c9a962' fill-opacity='0.74'/%3E%3Ccircle cx='87.8' cy='159.1' r='0.54' fill='%23f3e2b0' fill-opacity='0.46'/%3E%3Ccircle cx='24.8' cy='7.5' r='1.31' fill='%23e2c88a' fill-opacity='0.38'/%3E%3Ccircle cx='169.1' cy='45.9' r='0.41' fill='%23c9a962' fill-opacity='0.84'/%3E%3Ccircle cx='168.7' cy='140.3' r='1.26' fill='%23c9a962' fill-opacity='0.28'/%3E%3Ccircle cx='100.8' cy='144.9' r='0.79' fill='%23a8874a' fill-opacity='0.71'/%3E%3Ccircle cx='173.8' cy='61.4' r='0.41' fill='%23a8874a' fill-opacity='0.68'/%3E%3Ccircle cx='28.2' cy='77.1' r='0.85' fill='%23c9a962' fill-opacity='0.59'/%3E%3Ccircle cx='41.9' cy='37.2' r='0.72' fill='%23f3e2b0' fill-opacity='0.29'/%3E%3Ccircle cx='19.4' cy='22.8' r='0.95' fill='%23e2c88a' fill-opacity='0.30'/%3E%3Ccircle cx='42.9' cy='28.6' r='1.03' fill='%23c9a962' fill-opacity='0.35'/%3E%3Ccircle cx='11.9' cy='93.4' r='0.72' fill='%23f3e2b0' fill-opacity='0.50'/%3E%3Ccircle cx='90.6' cy='103.4' r='0.77' fill='%23e2c88a' fill-opacity='0.50'/%3E%3Ccircle cx='14.4' cy='148.1' r='0.36' fill='%23f3e2b0' fill-opacity='0.47'/%3E%3Ccircle cx='51.4' cy='74.9' r='0.56' fill='%23f3e2b0' fill-opacity='0.28'/%3E%3Ccircle cx='45.4' cy='134.3' r='0.61' fill='%23c9a962' fill-opacity='0.43'/%3E%3Ccircle cx='81.5' cy='168.0' r='1.03' fill='%23f3e2b0' fill-opacity='0.40'/%3E%3Ccircle cx='162.4' cy='67.8' r='0.47' fill='%23e2c88a' fill-opacity='0.49'/%3E%3Ccircle cx='57.3' cy='145.8' r='0.42' fill='%23a8874a' fill-opacity='0.82'/%3E%3Ccircle cx='44.5' cy='18.1' r='0.39' fill='%23c9a962' fill-opacity='0.78'/%3E%3Ccircle cx='167.9' cy='54.8' r='0.91' fill='%23c9a962' fill-opacity='0.34'/%3E%3Ccircle cx='130.4' cy='150.3' r='0.58' fill='%23c9a962' fill-opacity='0.52'/%3E%3Ccircle cx='48.1' cy='134.3' r='0.60' fill='%23c9a962' fill-opacity='0.51'/%3E%3Ccircle cx='91.8' cy='116.4' r='0.36' fill='%23c9a962' fill-opacity='0.34'/%3E%3Ccircle cx='135.1' cy='128.6' r='0.36' fill='%23f3e2b0' fill-opacity='0.73'/%3E%3Ccircle cx='109.1' cy='121.3' r='1.10' fill='%23c9a962' fill-opacity='0.80'/%3E%3Ccircle cx='17.0' cy='170.6' r='0.73' fill='%23c9a962' fill-opacity='0.71'/%3E%3Ccircle cx='164.6' cy='174.4' r='0.35' fill='%23f3e2b0' fill-opacity='0.71'/%3E%3Ccircle cx='145.8' cy='113.8' r='0.37' fill='%23a8874a' fill-opacity='0.26'/%3E%3Ccircle cx='100.3' cy='157.8' r='0.36' fill='%23f3e2b0' fill-opacity='0.57'/%3E%3Ccircle cx='63.9' cy='92.1' r='0.70' fill='%23c9a962' fill-opacity='0.47'/%3E%3Ccircle cx='125.9' cy='43.6' r='0.62' fill='%23e2c88a' fill-opacity='0.44'/%3E%3Ccircle cx='151.0' cy='70.0' r='1.04' fill='%23a8874a' fill-opacity='0.34'/%3E%3Ccircle cx='137.7' cy='7.4' r='1.17' fill='%23e2c88a' fill-opacity='0.41'/%3E%3Ccircle cx='104.9' cy='26.3' r='0.65' fill='%23a8874a' fill-opacity='0.40'/%3E%3Ccircle cx='82.0' cy='15.6' r='1.10' fill='%23c9a962' fill-opacity='0.33'/%3E%3Ccircle cx='92.9' cy='19.1' r='0.42' fill='%23e2c88a' fill-opacity='0.64'/%3E%3Ccircle cx='110.8' cy='45.9' r='0.74' fill='%23a8874a' fill-opacity='0.76'/%3E%3Ccircle cx='56.5' cy='100.4' r='0.58' fill='%23a8874a' fill-opacity='0.59'/%3E%3Ccircle cx='79.6' cy='100.1' r='1.21' fill='%23f3e2b0' fill-opacity='0.53'/%3E%3Ccircle cx='155.8' cy='24.1' r='0.40' fill='%23e2c88a' fill-opacity='0.68'/%3E%3Ccircle cx='35.0' cy='89.9' r='0.35' fill='%23c9a962' fill-opacity='0.74'/%3E%3Ccircle cx='53.0' cy='163.0' r='0.43' fill='%23f3e2b0' fill-opacity='0.30'/%3E%3Ccircle cx='114.4' cy='110.2' r='0.69' fill='%23f3e2b0' fill-opacity='0.58'/%3E%3Ccircle cx='57.6' cy='168.8' r='1.14' fill='%23f3e2b0' fill-opacity='0.59'/%3E%3Ccircle cx='129.9' cy='47.4' r='0.75' fill='%23f3e2b0' fill-opacity='0.39'/%3E%3Cpolygon points='164.8 143.3 165.2 142.0 167.0 142.0 166.7 144.0' fill='%23ecd9a8' fill-opacity='0.65'/%3E%3Cpolygon points='136.0 111.9 136.7 108.7 139.3 109.7 138.5 112.0' fill='%23ecd9a8' fill-opacity='0.54'/%3E%3Cpolygon points='51.0 48.9 48.0 47.9 50.1 44.1 52.8 46.5' fill='%23ecd9a8' fill-opacity='0.59'/%3E%3Cpolygon points='48.3 66.6 45.9 65.1 47.8 62.9 49.4 64.2' fill='%23ecd9a8' fill-opacity='0.63'/%3E%3Cpolygon points='66.2 66.5 65.6 64.6 66.8 64.1 67.8 65.5' fill='%23ecd9a8' fill-opacity='0.67'/%3E%3Cpolygon points='65.4 68.6 63.1 69.7 61.5 67.2 64.2 66.1' fill='%23ecd9a8' fill-opacity='0.60'/%3E%3Cpolygon points='121.2 138.1 119.7 138.7 119.7 137.3 120.8 137.1' fill='%23ecd9a8' fill-opacity='0.80'/%3E%3C/svg%3E");
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 calc(var(--pad) * -1);
  padding: 34px 56px 26px var(--pad);
  background:
    linear-gradient(205deg, rgba(13, 11, 8, 0) 6%, rgba(13, 11, 8, 0.5) 40%, rgba(13, 11, 8, 0.93) 76%),
    var(--nashiji) 0 0 / 180px 180px,
    radial-gradient(130% 95% at 30% -10%, rgba(201, 169, 98, 0.2), transparent 62%),
    linear-gradient(172deg, #1a1611, #0b0a09 82%);
  border-bottom: 1px solid rgba(201, 169, 98, 0.32);
}
.plan.featured .plan-tete {
  background:
    linear-gradient(205deg, rgba(13, 11, 8, 0) 6%, rgba(13, 11, 8, 0.5) 40%, rgba(13, 11, 8, 0.93) 76%),
    var(--nashiji) 0 0 / 180px 180px,
    radial-gradient(130% 95% at 30% -10%, rgba(236, 217, 168, 0.3), transparent 62%),
    linear-gradient(172deg, #241c12, #0d0b08 82%);
  border-bottom-color: rgba(201, 169, 98, 0.6);
}
.plan-tete > * { position: relative; z-index: 1; }
.plan-tete::before {
  content: ""; position: absolute; z-index: 2; top: -30%; bottom: -30%; left: 0; width: 34%;
  pointer-events: none; transform: translateX(-150%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 240, 205, 0.16) 42%,
    rgba(255, 246, 222, 0.3) 50%, rgba(255, 240, 205, 0.16) 58%, transparent);
}
.plan.in .plan-tete::before { animation: plan-reflet 1.8s var(--ease) calc(1.35s + var(--i) * 0.3s) 1 both; }
@keyframes plan-reflet { to { transform: translateX(420%) skewX(-18deg); } }
.plan-tete::after {
  content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none;
  background: #050505; opacity: 0.86;
  transition: opacity 1.3s ease calc(0.55s + var(--i) * 0.3s);
}
.plan.in .plan-tete::after { opacity: 0; }

.plan-fuda {
  position: absolute; top: 26px; right: -16px; z-index: 3; pointer-events: none;
  transform-origin: 50% -12px;
}
.plan-fuda::before {
  content: ""; position: absolute; left: 50%; top: -12px; width: 1px; height: 12px;
  background: linear-gradient(var(--kin-light), var(--kin));
}
.plan-fuda::after {
  content: ""; position: absolute; left: calc(50% - 3px); top: -15px; width: 6px; height: 6px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3cf, var(--kin) 55%, var(--kin-deep));
}
.plan-fuda span {
  display: block; writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; line-height: 1;
  letter-spacing: 0.22em; color: var(--kin-light);
  padding: 13px 7px 10px; transform-origin: 50% -12px;
  background: linear-gradient(180deg, #1d1813, #0d0b09);
  border: 1px solid rgba(201, 169, 98, 0.55);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.55);
}
.plan.featured .plan-fuda span {
  background: linear-gradient(180deg, #b23e2e, #8d2a1e); color: #f6ece0;
  border-color: rgba(246, 236, 224, 0.4);
}
.plan.in .plan-fuda { animation: plan-balance 2.6s cubic-bezier(0.3, 0.6, 0.3, 1) calc(1s + var(--i) * 0.3s) 1 both; }
.plans .plan:hover .plan-fuda span { animation: plan-balance 2s ease-out 0s 1; }
@keyframes plan-balance {
  0% { transform: rotate(0); } 14% { transform: rotate(10deg); } 32% { transform: rotate(-7deg); }
  50% { transform: rotate(4deg); } 68% { transform: rotate(-2deg); } 84% { transform: rotate(0.8deg); }
  100% { transform: rotate(0); }
}

.plan-feux {
  position: absolute; inset: calc(var(--cadre) * -1); z-index: 1; pointer-events: none;
}
.plan-feux::before {
  content: ""; position: absolute; inset: calc(var(--cadre) - 1px);
  border: 1px solid rgba(201, 169, 98, 0.42);
}
.plan.featured .plan-feux::before { border-color: rgba(236, 217, 168, 0.62); }
.plan-feux::after {
  --or: linear-gradient(135deg, #f3e2b0, #c9a962 45%, #8a6d33);
  --clou: radial-gradient(circle, #fff1c9 0 1px, #d9bd7a 1.5px, #8a6d33 2.6px, transparent 3.1px);
  content: ""; position: absolute; inset: 0;
  background:
    var(--clou) 0 0 / var(--cadre) var(--cadre) no-repeat,
    var(--clou) 100% 0 / var(--cadre) var(--cadre) no-repeat,
    var(--clou) 0 100% / var(--cadre) var(--cadre) no-repeat,
    var(--clou) 100% 100% / var(--cadre) var(--cadre) no-repeat,
    var(--or) 0 0 / 28px 3px no-repeat, var(--or) 0 0 / 3px 28px no-repeat,
    var(--or) 100% 0 / 28px 3px no-repeat, var(--or) 100% 0 / 3px 28px no-repeat,
    var(--or) 0 100% / 28px 3px no-repeat, var(--or) 0 100% / 3px 28px no-repeat,
    var(--or) 100% 100% / 28px 3px no-repeat, var(--or) 100% 100% / 3px 28px no-repeat;
}
.plan-feux i { display: none; }
.plan.featured .plan-feux i {
  --d: radial-gradient(circle, #fff1c9 0 1.6px, rgba(240, 196, 110, 0.9) 2.2px, transparent 3px);
  --m: calc((var(--cadre) - 6px) / 2);
  display: block; position: absolute; inset: 0; opacity: 0;
  background:
    var(--d) 0 var(--m) / 18px 6px repeat-x,
    var(--d) 0 calc(100% - var(--m)) / 18px 6px repeat-x,
    var(--d) var(--m) 0 / 6px 18px repeat-y,
    var(--d) calc(100% - var(--m)) 0 / 6px 18px repeat-y;
  filter: drop-shadow(0 0 3px rgba(255, 210, 130, 0.9)) drop-shadow(0 0 7px rgba(233, 170, 70, 0.55));
}
.plan.featured .plan-feux i:last-child {
  background-position: 9px var(--m), 9px calc(100% - var(--m)), var(--m) 9px, calc(100% - var(--m)) 9px;
}
.plan.featured.in .plan-feux i { animation: plan-feux-venir 1.4s ease calc(1.5s + var(--i) * 0.3s) both; }
@media (min-width: 901px) and (hover: hover) {
  .plan.featured.in .plan-feux i {
    animation: plan-feux-venir 1.4s ease calc(1.5s + var(--i) * 0.3s) both,
               plan-feu 2.4s ease-in-out calc(2.9s + var(--i) * 0.3s) infinite alternate;
  }
  .plan.featured.in .plan-feux i:last-child {
    animation: plan-feux-venir 1.4s ease calc(1.5s + var(--i) * 0.3s) both,
               plan-feu 2.4s ease-in-out calc(5.3s + var(--i) * 0.3s) infinite alternate;
  }
}
@keyframes plan-feux-venir { from { opacity: 0; } to { opacity: 1; } }
@keyframes plan-feu { from { opacity: 1; } to { opacity: 0.22; } }

.plan .kj { font-family: var(--font-display); font-size: 2.2rem; color: var(--kin-light); line-height: 1; }
.plan h3 { font-size: 1.55rem; margin: 12px 0 4px; }
.plan .tag { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--kin); }
.plan > p { font-size: 0.9rem; color: var(--ink-dim); margin-top: 24px; }
.plan .amount {
  margin: 22px 0 6px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: baseline; gap: 8px;
}
.plan .amount .num { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; color: var(--washi); }
.plan .amount .cur { font-family: var(--font-display); font-size: 1.4rem; color: var(--kin-light); }
.plan .amount .per { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); margin-left: 4px; }
.plan .commit { display: block; font-size: 0.72rem; color: var(--ink-dim); letter-spacing: 0.04em; }
.plan ul { margin: 22px 0 30px; display: grid; gap: 12px; flex: 1; align-content: start; }
.plan ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; color: var(--ink-dim); }
.plan ul li::before {
  content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 0.6em;
  background: var(--kin); transform: rotate(45deg);
}
.plan ul li:first-child { color: var(--kin-light); }
.plan .btn { width: 100%; justify-content: center; margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .plan-tete::before, .plan-tete::after { display: none; }
  .plan-lampes i::after, .plan.in .plan-lampes i::after { animation: none; opacity: 1; }
  .plan.in .plan-fuda, .plans .plan:hover .plan-fuda span { animation: none; }
  .plan.featured .plan-feux i, .plan.featured.in .plan-feux i,
  .plan.featured.in .plan-feux i:last-child { animation: none; opacity: 1; }
  .plan::after { transition: none; }
}

.partenariat {
  margin-top: 26px; padding-top: 22px; text-align: center;
  border-top: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(10px);
  animation: part-venir .8s var(--ease) .5s forwards;
}
@keyframes part-venir { to { opacity: 1; transform: none; } }

.part-label {
  display: block; font-size: 0.58rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-faint);
}

.part-logo {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 13px;
  text-decoration: none; transition: opacity 0.4s;
}
.part-logo:hover { opacity: .82; }
.part-logo:hover .part-opus { color: var(--kin-light); }
.part-logo:focus-visible { outline: 1px solid var(--kin); outline-offset: 6px; }
.part-opus, .part-venture { transition: color 0.4s; }

.tansu { width: 100%; max-width: 300px; height: auto; overflow: visible; }

.tn-halo { transform-origin: 150px 186px; animation: tn-souffle 9s ease-in-out infinite; }
@keyframes tn-souffle {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.06); opacity: 1; }
}

.tn-corps { opacity: 0; animation: tn-poser .8s cubic-bezier(0.16, 0.84, 0.24, 1) .15s forwards; }
@keyframes tn-poser {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}

.tn-tiroir { opacity: 0; animation: tn-glisser .55s cubic-bezier(0.16, 0.84, 0.24, 1) forwards; }
@keyframes tn-glisser {
  0%   { opacity: 0; transform: translateX(-9px); }
  70%  { opacity: 1; transform: translateX(2px); }
  100% { opacity: 1; transform: none; }
}

.tn-t2 { animation: tn-glisser .55s cubic-bezier(0.16, 0.84, 0.24, 1) forwards,
                    tn-ouvrir 12s ease-in-out 3.4s infinite; }
@keyframes tn-ouvrir {
  0%, 6%     { transform: none; }
  16%, 62%   { transform: translateY(9px); }
  72%, 100%  { transform: none; }
}

.tn-feuille {
  opacity: 0; transform: translateY(0);
  animation: tn-sortir 12s ease-in-out 3.4s infinite;
}
@keyframes tn-sortir {
  0%, 22%    { opacity: 0; transform: translateY(0); }
  32%, 46%   { opacity: 1; transform: translateY(-34px); }
  56%        { opacity: 1; transform: translateY(0); }
  60%, 100%  { opacity: 0; transform: translateY(0); }
}

.tn-anneau { animation: tn-luire 7s ease-in-out infinite; }
@keyframes tn-luire {
  0%, 100% { stroke-opacity: .75; }
  50%      { stroke-opacity: 1; }
}

.tn-kj {
  font-family: var(--font-display); font-size: 58px; text-anchor: middle;
  fill: var(--kin-light); opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: tn-entrer 1.9s cubic-bezier(0.16, 0.84, 0.24, 1) 1.2s forwards;
}
@keyframes tn-entrer {
  0%   { opacity: 0; transform: translate(-22px, -22px) rotate(-32deg) scale(1.12); }
  100% { opacity: .34; transform: rotate(-32deg); }
}

}

@media (prefers-reduced-motion: reduce) {
  .tn-halo, .tn-anneau { animation: none; }
  .tn-corps, .tn-tiroir, .tn-t2 { opacity: 1; transform: none; animation: none; }
  .tn-kj { opacity: .34; transform: rotate(-32deg); animation: none; }
  .tn-feuille { opacity: 0; animation: none; }
}

.commission-admin .commission-pied {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px;
  align-items: start;
  margin-top: 36px; padding-top: 34px;
  position: relative;
}
.commission-admin .commission-pied::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent,
              rgba(201, 169, 98, 0.5) 16%, rgba(236, 217, 168, 0.9) 50%,
              rgba(201, 169, 98, 0.5) 84%, transparent);
}
.commission-admin .commission-pied::after {
  content: ""; position: absolute; top: -3.5px; left: 50%;
  width: 7px; height: 7px; margin-left: -3.5px;
  transform: rotate(45deg); background: var(--kin-light);
}
.commission-admin .commission-pied { align-items: stretch; }
.commission-admin .pied-texte {
  grid-column: 1 / 3; display: flex; flex-direction: column;
}
.commission-admin .commission-note { margin: 0; }
.commission-admin .pied-texte .btn { margin-top: auto; align-self: start; }
.commission-admin .partenariat-large { grid-column: 3; margin: 0; }

@media (max-width: 1100px) {
  .commission-admin .commission-pied { grid-template-columns: 1fr 1fr; }
  .commission-admin .pied-texte { grid-column: 1 / -1; }
  .commission-admin .partenariat-large { grid-column: 1 / -1; margin-top: 26px; }
  .commission-admin .pied-texte .btn { margin-top: 30px; }
  .commission ul li:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
  .commission ul li:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 640px) {
  .commission-admin .commission-pied { grid-template-columns: 1fr; }
  .commission ul li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .commission ul li:last-child { border-bottom: 0; }
}

.commission ul li:nth-last-child(-n+3) { border-bottom: 0; }

.commission-note {
  margin: 0; font-size: 0.82rem; line-height: 1.6;
  color: var(--ink-faint); max-width: 520px;
}


.partenariat-large {
  margin: 26px 0 0; padding: 22px 20px 20px;
  text-align: center; border: 1px solid var(--line-soft);
  background: rgba(201, 169, 98, 0.022);
  align-self: start;
}
.partenariat-large .part-logo { justify-content: center; }
.partenariat-large .part-mention {
  margin-left: auto; margin-right: auto; max-width: 250px;
  font-size: 0.64rem; line-height: 1.5; margin-top: 12px;
}
.partenariat-large .part-label { font-size: 0.54rem; letter-spacing: 0.32em; }
.partenariat-large:hover { border-color: var(--line); background: rgba(201, 169, 98, 0.038); }
.partenariat-large { transition: border-color .5s var(--ease), background .5s var(--ease); }
.partenariat-large .part-logo { margin-top: 12px; gap: 14px; }
.partenariat-large .part-mark { width: 34px; height: 34px; }
.partenariat-large .part-opus { font-size: 1.16rem; }
.partenariat-large .part-venture { font-size: 0.56rem; }
.partenariat-large .part-mention { margin-left: 0; margin-right: 0; max-width: 420px; }

.part-orbite { transform-origin: 17px 17px; animation: part-tourner 14s linear infinite; }
@keyframes part-tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .part-orbite { animation: none; }
}


@media (max-width: 900px) {
  .partenariat-large { text-align: center; }
  .partenariat-large .part-mention { margin-left: auto; margin-right: auto; }
  .tansu { max-width: 240px; }
}

.part-mark { width: 25px; height: 25px; flex-shrink: 0; }
.part-dot { transform-origin: 17px 17px; animation: part-battre 5.5s ease-in-out infinite; }
@keyframes part-battre {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.86); opacity: .78; }
}

.part-nom { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.part-opus {
  font-family: var(--font-display); font-size: 0.94rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
}
.part-venture {
  font-size: 0.48rem; letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--kin);
}

.part-mention {
  display: block; margin-top: 14px; font-size: 0.68rem;
  line-height: 1.55; color: var(--ink-faint); max-width: 260px;
  margin-left: auto; margin-right: auto;
}

@media (prefers-reduced-motion: reduce) {
  .partenariat { opacity: 1; transform: none; animation: none; }
  .part-dot { animation: none; }
}

.included { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.inc-item { background: var(--sumi); padding: 34px 28px; transition: background 0.5s; }
.inc-item:hover { background: var(--sumi-2); }
.inc-item h3 { font-size: 1.05rem; margin-bottom: 10px; }
.inc-item p { font-size: 0.86rem; color: var(--ink-dim); }
.inc-item .n { font-family: var(--font-display); color: var(--kin); font-size: 1.2rem; display: block; margin-bottom: 14px; }

.price-note { text-align: center; font-size: 0.76rem; color: var(--ink-faint); margin-top: 34px; letter-spacing: 0.06em; }

.commission {
  position: relative; margin-top: clamp(56px, 7vw, 90px);
  border: 1px solid var(--line); padding: clamp(38px, 4.5vw, 62px);
  background: linear-gradient(150deg, rgba(22, 22, 28, 0.94), rgba(9, 9, 13, 0.98));
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  grid-template-areas: "visual body" "liste liste";
  gap: clamp(34px, 3.6vw, 58px); align-items: center; overflow: hidden;
}
.commission-visual { grid-area: visual; }
.commission-body { grid-area: body; }
.commission-liste { grid-area: liste; padding-top: 30px; border-top: 1px solid var(--line-soft); }

.commission-visual { position: relative; display: grid; place-items: center; align-self: stretch; min-height: 340px; }
.fan { width: min(340px, 100%); overflow: visible; }
.fan .sway { transform-origin: 150px 300px; animation: fanSway 9s ease-in-out infinite; }
@keyframes fanSway { 0%, 100% { transform: rotate(-3.2deg); } 50% { transform: rotate(3.2deg); } }
.fan .blade, .fan .arc {
  fill: none; stroke: url(#fanGrad); stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.fan .blade { stroke-width: 1.6; opacity: 0.75; }
.fan .arc { stroke-width: 2.4; }
.fan .rivet { fill: var(--kin); opacity: 0; transition: opacity 0.6s; }
.fan .rivet-ring { fill: none; stroke: var(--kin-light); stroke-width: 1.4; opacity: 0; transition: opacity 0.6s; }
.fan .rivet.lit { opacity: 1; animation: rivetGlow 3.4s ease-in-out 1s infinite; }
.fan .rivet-ring.lit { opacity: 0.85; }
@keyframes rivetGlow { 50% { opacity: 0.45; } }
.fan .kj-mark { font-family: var(--font-display); font-size: 46px; fill: var(--kin-light); text-anchor: middle; opacity: 0; transition: opacity 1s; }
.fan .kj-mark.lit { opacity: 0.9; }
.commission .tex-asanoha { opacity: 0.04; }
.commission > * { position: relative; z-index: 1; }
.commission .kj { font-family: var(--font-display); font-size: 3rem; color: var(--kin-light); line-height: 1; display: block; }
.commission .tag { display: block; margin-top: 16px; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin); }
.commission h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 10px 0 18px; }
.commission p { color: var(--ink-dim); font-size: 0.95rem; margin-bottom: 16px; }
.commission .quote {
  display: inline-flex; align-items: baseline; gap: 10px; margin-top: 8px;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--kin-light);
}
.commission .quote small { font-family: var(--font-body); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); }
.commission ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.commission ul li {
  display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; color: var(--ink-dim);
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.commission ul li::before {
  content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-top: 0.5em; border-radius: 50%;
  background: radial-gradient(circle, var(--kin-light) 0 1.4px, transparent 1.9px);
  box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.75);
}
.rouleau .commission ul li {
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease);
  transition-delay: calc(2.2s + var(--k, 0) * 0.07s);
}
.rouleau.in .commission ul li { opacity: 1; transform: none; }
.commission .btn { margin-top: 30px; }
@media (max-width: 1100px) {
  .commission { grid-template-columns: 1fr; grid-template-areas: "visual" "body" "liste"; gap: 30px; }
  .commission-visual { min-height: 250px; }
  .fan { width: min(260px, 72%); }
  .commission ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .commission ul { grid-template-columns: 1fr; } }

.rouleau { position: relative; margin-top: clamp(56px, 7vw, 90px); container-type: inline-size; }
.rouleau > .commission {
  box-shadow: inset 5px 0 0 #2a2015, inset 6px 0 0 rgba(201, 169, 98, 0.55),
              inset -34px 0 32px -26px rgba(0, 0, 0, 0.75);
  margin-top: 0; clip-path: inset(0 calc(100% - 13px) 0 0);
  padding-top: calc(clamp(38px, 4.5vw, 62px) + 10px);   
}
.rouleau.in > .commission {
  clip-path: inset(0 0 0 0);
  transition: clip-path 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
}
.rouleau > .commission::before, .rouleau > .commission::after {
  content: ""; position: absolute; left: 0; right: 0; height: 16px; z-index: 0; pointer-events: none;
  background:
    linear-gradient(var(--kin), var(--kin)) 0 0 / 100% 1px no-repeat,
    linear-gradient(rgba(201, 169, 98, 0.45), rgba(201, 169, 98, 0.45)) 0 3px / 100% 1px no-repeat,
    linear-gradient(var(--kin), var(--kin)) 0 100% / 100% 1px no-repeat,
    linear-gradient(rgba(201, 169, 98, 0.45), rgba(201, 169, 98, 0.45)) 0 calc(100% - 3px) / 100% 1px no-repeat,
    radial-gradient(circle at 7px 50%, rgba(243, 226, 176, 0.75) 0 1.3px, transparent 1.9px) 0 0 / 28px 100%,
    radial-gradient(circle at 21px 50%, rgba(201, 169, 98, 0.5) 0 0.8px, transparent 1.3px) 0 0 / 28px 100%,
    linear-gradient(90deg, #22190e, #3a2c17 50%, #22190e);
}
.rouleau > .commission::before { top: 0; height: 24px; }
.rouleau > .commission::after { bottom: 0; }
.commission-jiku {
  position: absolute; top: -6px; bottom: -6px; right: -13px; width: 26px; z-index: 3;
  pointer-events: none; border-radius: 5px;
  background:
    linear-gradient(90deg, transparent 33%, rgba(255, 236, 196, 0.35) 38%, transparent 44%),
    linear-gradient(90deg, #0b0805, #3c2e1b 22%, #5c4829 40%, #2a2014 68%, #0a0704);
  box-shadow: -6px 0 16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(201, 169, 98, 0.25);
  transform: translateX(calc(-100cqw + 13px));
}
.rouleau.in .commission-jiku {
  transform: translateX(0);
  transition: transform 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
}
.commission-jiku::before, .commission-jiku::after {
  content: ""; position: absolute; left: -6px; right: -6px; height: 16px; border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 30%, rgba(255, 250, 230, 0.7) 38%, transparent 46%),
    linear-gradient(90deg, #6e5428, #f3e2b0 40%, #c9a962 58%, #6e5428);
  box-shadow: 0 0 12px rgba(236, 200, 120, 0.4);
}
.commission-jiku::before { top: -14px; border-bottom: 2px solid #3a2c17; }
.commission-jiku::after { bottom: -14px; border-top: 2px solid #3a2c17; }
.commission > .commission-sceau {
  position: absolute; top: 30px; right: 40px; z-index: 2;
  display: grid; place-items: center; width: 50px; height: 50px;
  background: var(--shu); color: #f6ece0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1;
  box-shadow: inset 0 0 0 2px var(--shu), inset 0 0 0 3px rgba(246, 236, 224, 0.8);
  opacity: 0; transform: rotate(-5deg) scale(1.9);
}
.rouleau.in .commission > .commission-sceau { animation: sceau-appose 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 2.55s both; }
@keyframes sceau-appose {
  0% { opacity: 0; transform: rotate(-5deg) scale(1.9); }
  70% { opacity: 1; transform: rotate(-5deg) scale(0.93); }
  100% { opacity: 1; transform: rotate(-5deg) scale(1); }
}
@media (max-width: 640px) {
  .commission > .commission-sceau { top: 22px; right: 22px; width: 42px; height: 42px; font-size: 1.35rem; }
}
.shoji { position: relative; margin-top: clamp(56px, 7vw, 90px); overflow: hidden; }
.shoji > .commission { margin-top: 0; }
.shoji::before, .shoji::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 6; pointer-events: none;
}
.shoji::before {
  top: 0; height: 14px;
  background: linear-gradient(180deg, #3b2d1b, #241a0f 55%, #160f08);
  border-bottom: 1px solid rgba(201, 169, 98, 0.45);
}
.shoji::after {
  bottom: 0; height: 10px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)) 0 3px / 100% 1px no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)) 0 6px / 100% 1px no-repeat,
    linear-gradient(180deg, #3b2d1b, #160f08);
  border-top: 1px solid rgba(201, 169, 98, 0.45);
}
.shoji-panneau {
  position: absolute; top: 14px; bottom: 10px; width: 50%; z-index: 5;
  pointer-events: none; overflow: hidden;
  border: 7px solid #2a2015;
  box-shadow: inset 0 0 0 1px rgba(201, 169, 98, 0.4), 0 0 24px rgba(0, 0, 0, 0.6);
  transition: transform 1.5s cubic-bezier(0.7, 0, 0.3, 1) 1.3s;
}
.shoji-panneau.gauche {
  left: 0; background: radial-gradient(90% 55% at 100% 45%, #f7ecd4, #e4d1aa 60%, #c9b086);
}
.shoji-panneau.droite {
  right: 0; background: radial-gradient(90% 55% at 0% 45%, #f7ecd4, #e4d1aa 60%, #c9b086);
}
.shoji.in .shoji-panneau.gauche { transform: translateX(-101%); }
.shoji.in .shoji-panneau.droite { transform: translateX(101%); }
.shoji-panneau::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    repeating-linear-gradient(90deg, transparent 0 57px, #3a2c1c 57px 60px),
    repeating-linear-gradient(180deg, transparent 0 87px, #3a2c1c 87px 90px);
}
.shoji-ombre {
  position: absolute; top: 50%; z-index: 1; line-height: 1;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(220px, 32vw, 440px);
  color: rgba(58, 38, 18, 0.34); filter: blur(1.5px);
}
.shoji-panneau.gauche .shoji-ombre { right: 0; transform: translate(50%, -50%); }
.shoji-panneau.droite .shoji-ombre { left: 0; transform: translate(-50%, -50%); }
.shoji-hikite {
  position: absolute; top: 50%; z-index: 3; width: 12px; height: 26px; margin-top: -13px;
  border-radius: 7px; background: radial-gradient(#1a130b, #0a0704);
  box-shadow: 0 0 0 2px #c9a962, 0 0 0 3px #6e5428;
}
.shoji-panneau.gauche .shoji-hikite { right: 18px; }
.shoji-panneau.droite .shoji-hikite { left: 18px; }
.shoji-panneau::after {
  content: ""; position: absolute; inset: 0; z-index: 4; background: #0b0906; opacity: 0.9;
}
.shoji.in .shoji-panneau::after { animation: shoji-lampe 1.1s ease-out 0.15s both; }
@keyframes shoji-lampe {
  0% { opacity: 0.9; } 22% { opacity: 0.5; } 30% { opacity: 0.72; }
  48% { opacity: 0.25; } 56% { opacity: 0.38; } 100% { opacity: 0.06; }
}
.shoji .commission ul li::before {
  width: 6px; height: 6px; margin-top: 0.55em; border-radius: 0;
  background: none; box-shadow: inset 0 0 0 1px var(--kin);
}
.shoji .commission ul li {
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease);
  transition-delay: calc(2.7s + var(--k, 0) * 0.06s);
}
.shoji.in .commission ul li { opacity: 1; transform: none; }
@media (max-width: 640px) {
  .shoji-panneau { border-width: 5px; }
  .shoji-hikite { width: 9px; height: 20px; margin-top: -10px; }
  .shoji-panneau.gauche .shoji-hikite { right: 10px; }
  .shoji-panneau.droite .shoji-hikite { left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .shoji-panneau { display: none; }
  .shoji .commission ul li { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rouleau > .commission, .rouleau.in > .commission { clip-path: none; transition: none; }
  .commission-jiku, .rouleau.in .commission-jiku { transform: none; transition: none; }
  .rouleau .commission ul li { opacity: 1; transform: none; transition: none; }
  .commission > .commission-sceau, .rouleau.in .commission > .commission-sceau {
    animation: none; opacity: 1; transform: rotate(-5deg);
  }
}

@media (max-width: 1100px) {
  .plans { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; row-gap: 118px; }
  .plans .plan.featured.in { transform: none; }
  .plans .plan.featured.in:hover { transform: translateY(-6px); }
  .included { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .plans { padding-top: 60px; row-gap: 104px; }
  .plan { --pad: 22px; --cadre: 7px; }
  .plan-tete { padding: 28px 50px 22px var(--pad); }
  .plan-fuda { top: 22px; right: 12px; }
  .plan-lampes { left: 5%; right: 5%; }
}
@media (max-width: 640px) { .included { grid-template-columns: 1fr; } }

.included-mon { gap: 0; background: none; }
.included-mon .inc-item {
  --c: 0; position: relative; overflow: hidden; padding: 38px 30px 36px;
  background: linear-gradient(180deg, rgba(21, 18, 14, 0.92), rgba(9, 9, 11, 0.97));
  transition: background 0.5s, box-shadow 0.5s;
}
.included-mon .inc-item:hover {
  background: linear-gradient(180deg, rgba(30, 24, 16, 0.95), rgba(12, 11, 10, 0.97));
  box-shadow: inset 0 1px 0 rgba(201, 169, 98, 0.6);
}
.included-mon .inc-item + .inc-item::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--kin) 22%, var(--kin-light) 50%, var(--kin) 78%, transparent);
  opacity: 0.6; transform: scaleY(0); transform-origin: top;
}
.included-mon.in .inc-item + .inc-item::after {
  transform: scaleY(1); transition: transform 1.2s var(--ease) calc(0.3s + var(--c) * 0.35s);
}
.included-mon .inc-item::before {
  content: ""; position: absolute; left: 4px; top: 12px; width: 130px; height: 130px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(236, 200, 120, 0.16), transparent);
  opacity: 0;
}
.included-mon.in .inc-item::before { opacity: 1; transition: opacity 1.2s ease calc(1s + var(--c) * 0.35s); }
.inc-mon {
  position: relative; display: block; width: 70px; height: 70px; margin-bottom: 22px; overflow: visible;
  transition: transform 0.7s var(--ease);
}
.included-mon .inc-item:hover .inc-mon { transform: rotate(-45deg) scale(1.05); }
.inc-mon .mon-trait {
  fill: none; stroke: var(--kin-light); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.inc-mon circle.mon-trait { stroke: var(--kin); stroke-width: 1.3; }
.inc-mon circle.mon-trait + circle.mon-trait { stroke-width: 0.8; opacity: 0.6; }
.included-mon.in .mon-trait {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s var(--ease-ink) calc(0.25s + var(--c) * 0.35s + var(--t) * 0.14s);
}
.included-mon .n { position: absolute; top: 30px; right: 28px; margin: 0; font-size: 1.05rem; opacity: 0.85; }
.included-mon .inc-item h3, .included-mon .inc-item p {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s var(--ease);
  transition-delay: calc(0.8s + var(--c) * 0.35s);
}
.included-mon .inc-item p { transition-delay: calc(0.92s + var(--c) * 0.35s); }
.included-mon.in .inc-item h3, .included-mon.in .inc-item p { opacity: 1; transform: none; }
@media (max-width: 1100px) {
  .included-mon .inc-item:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 640px) {
  .included-mon .inc-item:nth-child(n+2) { border-top: 1px solid var(--line-soft); }
  .included-mon .inc-item + .inc-item::after { display: none; }
  .inc-mon { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .included-mon .mon-trait, .included-mon.in .mon-trait { stroke-dashoffset: 0; transition: none; }
  .included-mon .inc-item h3, .included-mon .inc-item p { opacity: 1; transform: none; transition: none; }
  .included-mon .inc-item + .inc-item::after { transform: none; transition: none; }
  .included-mon .inc-item::before { opacity: 1; transition: none; }
}

.legal-doc { max-width: 780px; margin: 0 auto; }
.legal-cadre {
  display: grid; grid-template-columns: 236px minmax(0, 780px);
  gap: 0 clamp(48px, 5.5vw, 92px); justify-content: center; align-items: start;
}
.legal-cadre > .legal-doc { margin: 0; max-width: none; min-width: 0; }

.legal-section { padding-top: clamp(150px, 13vw, 196px); }
.legal-tete { grid-column: 1 / -1; margin-bottom: clamp(44px, 5vw, 70px); position: relative; padding-bottom: 22px; }
.legal-tete h1 {
  font-family: var(--font-display); font-weight: 500; color: var(--washi);
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: 0.01em;
}
.legal-tete::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 1px;
  background: linear-gradient(90deg, var(--kin), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-ink) 0.4s;
}
.legal-tete.in::after { transform: scaleX(1); }

.legal-sommaire { position: sticky; top: 128px; padding-left: 24px; }
.legal-sommaire.reveal { transform: none; transition: opacity 1s var(--ease); }
.legal-sommaire::before, .legal-sommaire::after {
  content: ""; position: absolute; left: 0; width: 1px;
  top: var(--epine-t, 64px); height: var(--epine-h, calc(100% - 84px));
}
.legal-sommaire::before { background: var(--line); }
.legal-sommaire::after {
  background: linear-gradient(180deg, var(--kin-light), var(--kin));
  box-shadow: 0 0 8px rgba(201, 169, 98, 0.45);
  transform: scaleY(var(--lu, 0)); transform-origin: top; transition: transform 0.18s linear;
}
.legal-sommaire-titre {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 20px;
  font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint);
}
.legal-sommaire-titre [lang="ja"] { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.12em; color: var(--kin); }
.legal-sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal-sommaire li { opacity: 0; transform: translateX(-10px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.legal-sommaire.in li { opacity: 1; transform: none; transition-delay: calc(0.25s + var(--k, 0) * 0.07s); }
.legal-sommaire a {
  display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: baseline;
  padding: 8px 0; min-height: 36px; font-size: 0.8rem; line-height: 1.45;
  color: var(--ink-faint); transition: color 0.45s var(--ease); touch-action: manipulation;
}
.legal-sommaire-num { font-family: var(--font-display); font-size: 0.95rem; color: var(--ink-faint); transition: color 0.45s var(--ease), text-shadow 0.45s var(--ease); }
.legal-sommaire li.lu .legal-sommaire-num { color: var(--kin-deep); }
.legal-sommaire li.actuel a { color: var(--washi); }
.legal-sommaire li.actuel .legal-sommaire-num { color: var(--kin-light); text-shadow: 0 0 12px rgba(201, 169, 98, 0.55); }
.legal-sommaire a:hover, .legal-sommaire a:focus-visible { color: var(--kin-light); }
.legal-shiori {
  position: absolute; left: -4px; top: 0; width: 9px; height: 30px; pointer-events: none;
  background: linear-gradient(90deg, #8f2c21, #c24a35 45%, #9c3124);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
  transform: translateY(var(--shiori-y, 64px)); opacity: 0;
  transition: transform 0.18s linear, opacity 0.6s var(--ease);
}
.legal-shiori::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(236, 217, 168, 0.55); }
.legal-sommaire.suit .legal-shiori { opacity: 1; }

.legal-art { padding: 0 0 clamp(38px, 4.5vw, 58px); }
.legal-art:last-child { padding-bottom: 0; }
.legal-art[id] { scroll-margin-top: 120px; }
.legal-art h2 {
  position: relative;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); margin-bottom: 18px;
  padding-bottom: 14px;
  display: flex; align-items: center; gap: 18px;
}
.legal-art h2::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--kin) 0, rgba(201, 169, 98, 0.32) 34%, var(--line-soft) 72%);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-ink) 0.45s;
}
.legal-art.in h2::after { transform: scaleX(1); }
.legal-num {
  flex-shrink: 0; display: inline-grid; place-items: center;
  width: 2.15em; height: 2.15em; position: relative;
  border: 1px solid rgba(201, 169, 98, 0.55);
  box-shadow: inset 0 0 0 3px var(--sumi), inset 0 0 0 4px rgba(201, 169, 98, 0.22);
  background: radial-gradient(circle at 50% 40%, rgba(201, 169, 98, 0.12), transparent 70%);
  opacity: 0;
}
.legal-art.in .legal-num { opacity: 1; animation: legal-tampon 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 0.2s backwards; }
@keyframes legal-tampon {
  0% { opacity: 0; transform: scale(1.7) rotate(-8deg); }
  55% { opacity: 1; transform: scale(0.92) rotate(1deg); }
  100% { opacity: 1; transform: none; }
}
.legal-art h2 .num-jp { font-family: var(--font-display); color: var(--kin); font-size: 0.95em; line-height: 1; }
.legal-art p { color: var(--ink-dim); margin-bottom: 14px; }
.legal-art p:last-child { margin-bottom: 0; }
.legal-art > p, .legal-art > .legal-list, .legal-art > .legal-id {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.9s var(--ease) 0.55s, transform 0.9s var(--ease) 0.55s;
}
.legal-art.in > p, .legal-art.in > .legal-list, .legal-art.in > .legal-id { opacity: 1; transform: none; }

.legal-id { position: relative; display: grid; gap: 0; margin-top: 30px; }
.legal-id::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) 0.6s;
}
.legal-art.in .legal-id::before { transform: scaleX(1); }
.legal-id > div {
  position: relative; display: grid; grid-template-columns: 240px 1fr; gap: 20px;
  padding: 13px 0; transition: background 0.5s var(--ease);
}
.legal-id > div::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-soft);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s var(--ease) calc(0.7s + var(--k, 0) * 0.12s);
}
.legal-art.in .legal-id > div::after { transform: scaleX(1); }
.legal-id > div:hover { background: linear-gradient(90deg, rgba(201, 169, 98, 0.06), transparent 80%); }
.legal-id dt, .legal-id .k { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }
.legal-id .v { color: var(--washi); font-size: 0.92rem; }
.legal-id .k { opacity: 0; transform: translateX(-8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(0.8s + var(--k, 0) * 0.12s); }
.legal-id .v { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-ink) calc(0.95s + var(--k, 0) * 0.12s); }
.legal-art.in .legal-id .k { opacity: 1; transform: none; }
.legal-art.in .legal-id .v { clip-path: inset(0 -4px 0 0); }
.legal-id-sceau {
  position: absolute; right: 2px; top: -27px; z-index: 1;
  width: 50px; height: 50px; display: grid; place-items: center;
  background: var(--shu); color: #f6ece0; border-radius: 3px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1;
  box-shadow: inset 0 0 0 2px rgba(246, 236, 224, 0.28), 0 10px 26px -10px rgba(0, 0, 0, 0.8);
  transform: rotate(7deg); opacity: 0;
}
.legal-art.in .legal-id-sceau { opacity: 0.94; animation: legal-sceau 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) 2.05s backwards; }
@keyframes legal-sceau {
  0% { opacity: 0; transform: rotate(7deg) scale(1.9); }
  60% { opacity: 0.94; transform: rotate(7deg) scale(0.9); }
  100% { opacity: 0.94; transform: rotate(7deg) scale(1); }
}

.legal-list { margin-top: 20px; display: grid; gap: 11px; }
.legal-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-dim); font-size: 0.92rem; }
.legal-list li::before {
  content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-top: 0.6em;
  border: 1px solid var(--kin); background: rgba(201, 169, 98, 0.25);
  transform: rotate(45deg) scale(0); transition: transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
  transition-delay: calc(0.8s + var(--k, 0) * 0.12s);
}
.legal-art.in .legal-list li::before { transform: rotate(45deg) scale(1); }

.legal-preambule { position: relative; padding-left: 28px; margin-bottom: 64px; }
.legal-preambule::before {
  content: ""; position: absolute; left: 0; top: 0.35em; bottom: 0.35em; width: 1px;
  background: linear-gradient(180deg, var(--kin-light), var(--kin) 40%, rgba(201, 169, 98, 0.12));
  transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--ease-ink) 0.3s;
}
.legal-preambule.in::before { transform: scaleY(1); }

.legal-date {
  position: relative; margin-top: 54px; padding: 24px 72px 0 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.74rem; letter-spacing: 0.12em; color: var(--ink-faint);
}
.legal-date::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, var(--kin) 0, rgba(201, 169, 98, 0.4) 70%, var(--kin));
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-ink) 0.2s;
}
.legal-date.in::before { transform: scaleX(1); }
.wariin { position: absolute; right: 10px; top: 0; width: 46px; height: 46px; transform: translateY(-50%) rotate(-5deg); }
.wariin i {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 3px;
  background: var(--shu); color: #f6ece0; font-family: var(--font-display); font-style: normal;
  font-weight: 600; font-size: 1.45rem; line-height: 1;
  box-shadow: inset 0 0 0 2px rgba(246, 236, 224, 0.26);
  opacity: 0;
}
.wariin i:first-child { clip-path: inset(0 0 calc(50% + 1px) 0); transform: translateX(-18px); }
.wariin i:last-child { clip-path: inset(calc(50% + 1px) 0 0 0); transform: translateX(18px); }
.legal-date.in .wariin i { opacity: 0.94; transform: none; transition: transform 1.2s var(--ease) 1.3s, opacity 0.6s ease 1.3s; }
.legal-date.in .wariin { animation: wariin-presse 0.45s var(--ease) 2.5s; }
@keyframes wariin-presse {
  50% { transform: translateY(-50%) rotate(-5deg) scale(0.9); }
}

@media (max-width: 1100px) {
  .legal-cadre { grid-template-columns: minmax(0, 780px); gap: 0; }
  .legal-section { padding-top: clamp(130px, 20vw, 170px); }
  .legal-sommaire {
    position: static; padding: 22px 26px 16px; margin-bottom: clamp(48px, 7vw, 72px);
    border: 1px solid var(--line);
    background: radial-gradient(120% 120% at 0% 0%, rgba(201, 169, 98, 0.06), transparent 60%);
  }
  .legal-sommaire::before, .legal-sommaire::after, .legal-shiori { display: none; }
  .legal-sommaire ol { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .legal-sommaire li.actuel a { color: inherit; }
  .legal-sommaire li.actuel .legal-sommaire-num, .legal-sommaire li.lu .legal-sommaire-num { color: var(--kin); text-shadow: none; }
  .legal-sommaire-num { color: var(--kin); }
}
@media (max-width: 640px) {
  .legal-sommaire { padding: 20px 20px 12px; }
  .legal-sommaire ol { grid-template-columns: 1fr; }
  .legal-sommaire a { padding: 9px 0; min-height: 40px; font-size: 0.86rem; }
  .legal-id > div { grid-template-columns: 1fr; gap: 4px; }
  .legal-id-sceau { width: 42px; height: 42px; font-size: 1.3rem; top: -22px; }
  .legal-art h2 { gap: 14px; }
  .legal-date { padding-right: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .legal-sommaire li, .legal-art > p, .legal-art > .legal-list, .legal-art > .legal-id,
  .legal-id .k { opacity: 1; transform: none; transition: none; }
  .legal-art h2::after, .legal-id::before, .legal-id > div::after, .legal-date::before { transform: none; transition: none; }
  .legal-preambule::before { transform: none; transition: none; }
  .legal-tete::after { transform: none; transition: none; }
  .legal-list li::before { transform: rotate(45deg); transition: none; }
  .legal-num { opacity: 1; animation: none !important; }
  .legal-id .v { clip-path: none; transition: none; }
  .legal-id-sceau { opacity: 0.94; animation: none !important; }
  .wariin i { opacity: 0.94; transform: none; transition: none; }
  .legal-date .wariin { animation: none !important; }
  .legal-sommaire::after, .legal-shiori { transition: opacity 0.3s; }
}

.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a { font-size: 0.72rem; color: var(--ink-faint); margin: 0; padding: 7px 0; touch-action: manipulation; }
.footer-legal a:hover { color: var(--kin-light); }
.footer-legal .footer-cookies {
  background: none; border: 0; font: inherit; font-size: 0.72rem; letter-spacing: inherit;
  color: var(--ink-faint); margin: 0; padding: 7px 0; cursor: pointer; touch-action: manipulation;
}
.footer-legal .footer-cookies:hover { color: var(--kin-light); }
.footer-legal a.footer-atelier { display: inline-flex; align-items: center; gap: 7px; }
.footer-atelier .atelier-kj {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--kin);
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; line-height: 1; letter-spacing: 0;
  color: var(--kin); transition: background 0.3s, color 0.3s;
}
.footer-legal a.footer-atelier:hover .atelier-kj { background: var(--kin); color: #17140f; }

.consentement { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 24px; }
.consentement[hidden] { display: none; }
html.consentement-ouvert { overflow: hidden; }
.consentement-voile { position: absolute; inset: 0; background: rgba(6, 5, 7, 0.76); opacity: 0; transition: opacity 0.7s var(--ease); }
.consentement.ouvert .consentement-voile { opacity: 1; }
@media (min-width: 901px) and (hover: hover) {
  .consentement-voile { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.consentement-fenetre {
  position: relative; display: grid; grid-template-columns: minmax(280px, 38%) 1fr;
  width: min(1000px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  background: radial-gradient(90% 70% at 100% 0%, rgba(201, 169, 98, 0.06), transparent 60%), linear-gradient(160deg, #121014, #09080a 72%);
  border: 1px solid var(--line); box-shadow: 0 50px 140px -40px rgba(0, 0, 0, 0.95);
  opacity: 0; transform: translateY(26px) scale(0.985); outline: none;
  transition: opacity 0.8s var(--ease), transform 1s var(--ease);
}
.consentement.ouvert .consentement-fenetre { opacity: 1; transform: none; }
.consentement-fenetre::before, .consentement-fenetre::after { content: ""; position: absolute; z-index: 2; width: 28px; height: 28px; pointer-events: none; }
.consentement-fenetre::before { top: -1px; left: -1px; border-top: 1px solid var(--kin); border-left: 1px solid var(--kin); }
.consentement-fenetre::after { right: -1px; bottom: -1px; border-right: 1px solid var(--kin); border-bottom: 1px solid var(--kin); }

.consentement-scene { position: relative; overflow: hidden; min-height: 100%; border-right: 1px solid var(--line-soft); background: #0a0809; }
.consentement-scene svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.consentement-tategaki { position: absolute; top: 28px; left: 24px; writing-mode: vertical-rl; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.5em; color: var(--kin-light); opacity: 0; }
.consentement-sceau {
  position: absolute; right: 22px; bottom: 22px; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--shu); color: #f6ece0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.9); opacity: 0;
}
.cs-plateau-g, .cs-bol-g, .cs-galette-g { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.cs-dent { transform: scale(0); transform-box: fill-box; transform-origin: center; }
.cs-miette { opacity: 0; transform-box: fill-box; transform-origin: center; }
.cs-vapeur path { stroke-dasharray: 0.32 1; stroke-dashoffset: 0.32; opacity: 0; }
html:not(.attente-seuil) .consentement.ouvert .cs-plateau-g { animation: cs-leve 0.9s var(--ease) 0.15s both; }
html:not(.attente-seuil) .consentement.ouvert .cs-bol-g { animation: cs-leve 0.9s var(--ease) 0.45s both; }
html:not(.attente-seuil) .consentement.ouvert .cs-galette-g { animation: cs-pose 0.85s cubic-bezier(0.3, 1.35, 0.5, 1) 0.75s both; }
html:not(.attente-seuil) .consentement.ouvert .cs-dent { animation: cs-croque 0.2s ease-out 1.9s both; }
html:not(.attente-seuil) .consentement.ouvert .cs-dent-2 { animation-delay: 1.95s; }
html:not(.attente-seuil) .consentement.ouvert .cs-dent-3 { animation-delay: 2s; }
html:not(.attente-seuil) .consentement.ouvert .cs-miette { animation: cs-miette 1.05s cubic-bezier(0.35, 0, 0.6, 1) calc(1.95s + var(--d)) both; }
html:not(.attente-seuil) .consentement.ouvert .cs-vapeur path { animation: cs-vapeur 3.9s linear 1.2s infinite; }
html:not(.attente-seuil) .consentement.ouvert .cs-vapeur path:nth-child(2) { animation-delay: 2.5s; }
html:not(.attente-seuil) .consentement.ouvert .cs-vapeur path:nth-child(3) { animation-delay: 3.3s; }
html:not(.attente-seuil) .consentement.ouvert .consentement-tategaki { animation: cs-tategaki 1.3s var(--ease-ink) 0.6s both; }
html:not(.attente-seuil) .consentement.ouvert .consentement-sceau { animation: cs-sceau 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 2.6s both; }
@keyframes cs-leve { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cs-pose { from { opacity: 0; transform: translateY(-80px) rotate(-7deg); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes cs-croque { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes cs-miette {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  12% { opacity: 1; }
  45% { transform: translate(calc(var(--x) * 0.55), calc(var(--y) * 0.18 - 9px)) rotate(calc(var(--r) * 0.45)); }
  100% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
@keyframes cs-vapeur { 0% { stroke-dashoffset: 0.32; opacity: 0; } 18% { opacity: 0.55; } 70% { opacity: 0.32; } 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes cs-tategaki { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 0.78; clip-path: inset(0 0 0 0); } }
@keyframes cs-sceau { 0% { opacity: 0; transform: scale(1.7) rotate(-9deg); } 60% { opacity: 1; transform: scale(0.94); } 100% { opacity: 1; transform: none; } }

.consentement-corps { display: flex; flex-direction: column; min-width: 0; overflow-y: auto; padding: clamp(30px, 4vw, 52px) clamp(26px, 4vw, 52px) clamp(24px, 3vw, 38px); }
.consentement-corps > * { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); }
.consentement.ouvert .consentement-corps > * { opacity: 1; transform: none; }
.consentement.ouvert .consentement-corps > :nth-child(1) { transition-delay: 0.25s; }
.consentement.ouvert .consentement-corps > :nth-child(2) { transition-delay: 0.32s; }
.consentement.ouvert .consentement-corps > :nth-child(3) { transition-delay: 0.39s; }
.consentement.ouvert .consentement-corps > :nth-child(4) { transition-delay: 0.46s; }
.consentement.ouvert .consentement-corps > :nth-child(5) { transition-delay: 0.53s; }
.consentement.ouvert .consentement-corps > :nth-child(n+6) { transition-delay: 0.6s; }
.consentement-sur { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin); }
.consentement-sur .kj { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0; color: var(--kin-light); }
.consentement-titre { font-family: var(--font-display); font-size: clamp(1.75rem, 2.9vw, 2.45rem); line-height: 1.12; color: var(--washi); margin: 0 0 16px; }
.consentement-titre em { font-style: italic; padding-right: 0.06em; }
.consentement-texte { font-size: 0.9rem; line-height: 1.75; color: var(--ink-dim); margin: 0 0 22px; max-width: 56ch; }
.consentement-choix { border-top: 1px solid var(--line-soft); margin-bottom: 24px; }
.consentement-ligne { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.consentement-nom { margin: 0 0 3px; font-size: 0.92rem; color: var(--washi); }
.consentement-desc { margin: 0; font-size: 0.78rem; line-height: 1.55; color: var(--ink-faint); }
.consentement-etat { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kin-light); white-space: nowrap; }
.consentement-etat.jamais { color: #d0705f; }
.consentement-bascule {
  position: relative; flex: none; width: 54px; height: 28px; padding: 0; cursor: pointer; touch-action: manipulation;
  border: 1px solid var(--line); background: rgba(240, 235, 225, 0.05); transition: background 0.4s var(--ease), border-color 0.4s;
}
.consentement-bascule::before { content: ""; position: absolute; inset: -9px -6px; }
.consentement-bascule i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--ink-faint); transition: transform 0.45s var(--ease), background 0.4s; }
.consentement-bascule[aria-checked="true"] { background: linear-gradient(100deg, var(--kin-deep), var(--kin)); border-color: var(--kin); }
.consentement-bascule[aria-checked="true"] i { transform: translateX(26px); background: var(--sumi); }
.consentement-bascule:focus-visible { outline: 1px solid var(--kin-light); outline-offset: 4px; }
.consentement-actions { display: grid; grid-template-columns: 1fr minmax(max-content, 1.3fr) 1fr; gap: 10px; }
.consentement-actions .btn { --btn-deco: none; --n: 5px; justify-content: center; text-align: center; white-space: nowrap; padding: 14px 10px; min-height: 48px; font-size: 0.68rem; letter-spacing: 0.1em; touch-action: manipulation; }
@media (min-width: 761px) and (max-width: 1000px) {
  .consentement-actions { grid-template-columns: 1fr 1fr; }
  .consentement-actions [data-consentement="refuser"] { order: 1; }
  .consentement-actions [data-consentement="accepter"] { order: 2; }
  .consentement-actions .consentement-enregistrer { order: 3; grid-column: 1 / -1; }
}
.consentement-detail { display: none; }
.consentement-lien { align-self: flex-start; margin-top: 18px; font-size: 0.74rem; color: var(--ink-faint); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color 0.4s; }
.consentement-lien:hover { color: var(--kin-light); border-bottom-color: var(--kin); }

@media (max-width: 760px) {
  .consentement { place-items: end center; padding: 0; }
  .consentement-fenetre {
    grid-template-columns: 1fr; grid-template-rows: 172px auto; width: 100%;
    max-height: 94vh; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain;
    border-left: 0; border-right: 0; border-bottom: 0; transform: translateY(48px);
  }
  .consentement-scene { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .consentement-scene svg { transform: scale(1.3); transform-origin: 50% 72%; }
  .consentement-tategaki { display: none; }
  .consentement-sceau { right: 16px; top: 14px; bottom: auto; width: 32px; height: 32px; font-size: 1.05rem; }
  .consentement-corps { overflow: visible; padding: 24px 20px calc(18px + env(safe-area-inset-bottom)); }
  .consentement-titre { font-size: 1.6rem; }
  .consentement-texte { font-size: 0.86rem; margin-bottom: 18px; }
  .consentement-choix { display: none; margin-bottom: 18px; }
  .consentement.detail .consentement-choix { display: block; animation: cs-deplie 0.5s var(--ease) both; }
  .consentement-actions { grid-template-columns: 1fr 1fr; }
  .consentement-actions [data-consentement="refuser"] { order: 1; }
  .consentement-actions [data-consentement="accepter"] { order: 2; }
  .consentement-actions .consentement-enregistrer { display: none; order: 3; grid-column: 1 / -1; }
  .consentement.detail .consentement-actions .consentement-enregistrer { display: inline-flex; }
  .consentement-detail {
    display: block; align-self: center; margin: 14px 0 0; padding: 10px 8px; min-height: 44px;
    background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.86rem; color: var(--washi);
    text-decoration: underline; text-decoration-color: var(--kin); text-underline-offset: 5px; touch-action: manipulation;
  }
  .consentement.detail .consentement-detail { display: none; }
  .consentement-lien { align-self: center; margin-top: 10px; }
}

@keyframes cs-deplie { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .consentement-voile, .consentement-fenetre, .consentement-corps > * { transition: none; }
  .consentement .cs-plateau-g, .consentement .cs-bol-g, .consentement .cs-galette-g, .consentement .cs-miette,
  .consentement .consentement-tategaki, .consentement .consentement-sceau, .consentement.detail .consentement-choix { animation: none !important; opacity: 1; }
  .consentement .consentement-tategaki { opacity: 0.78; }
  .consentement .cs-dent { animation: none !important; transform: scale(1); }
  .consentement .cs-miette { transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  .consentement .cs-vapeur path { animation: none !important; stroke-dasharray: none; opacity: 0.22; }
}
@media print { .consentement { display: none !important; } }

.chronicle { position: relative; padding-left: clamp(0px, 3vw, 28px); }
.chr-spine { position: absolute; left: clamp(0px, 3vw, 28px); top: 0; bottom: 0; width: 1px; background: var(--line-soft); }
.chr-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(180deg, var(--kin-light), var(--kin-deep)); box-shadow: 0 0 14px rgba(201, 169, 98, 0.55); }
.chr-item { position: relative; display: grid; grid-template-columns: 210px 1fr; gap: 46px; padding: 0 0 clamp(58px, 7vw, 94px) clamp(32px, 4vw, 52px); }
.chr-item:last-child { padding-bottom: 0; }
.chr-item::before { content: ""; position: absolute; left: -4px; top: 18px; width: 9px; height: 9px; background: var(--sumi); border: 1px solid var(--kin); transform: rotate(45deg); transition: 0.6s var(--ease); }
.chr-item.in::before { background: var(--kin); box-shadow: 0 0 18px rgba(201, 169, 98, 0.8); }
.chr-year { position: sticky; top: 130px; align-self: start; }
.chr-year .num { font-family: var(--font-display); font-size: clamp(3rem, 5.4vw, 4.4rem); line-height: 0.95; color: var(--kin-light); }
.chr-year .chapter { display: block; margin-top: 10px; font-size: 0.64rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-faint); }
.chr-year .kj { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--kin); opacity: 0.7; margin-top: 6px; }
.chr-body h3 { font-size: clamp(1.3rem, 2.1vw, 1.8rem); margin-bottom: 16px; }
.chr-body p { color: var(--ink-dim); max-width: 660px; }
.chr-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.chr-facts li { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kin-light); border: 1px solid var(--line); padding: 7px 14px; transition: 0.4s var(--ease); }
.chr-facts li:hover { background: rgba(201, 169, 98, 0.1); }

.contact-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: start; }
.office-list { display: grid; gap: 18px; margin-top: 32px; }
.office { padding: 28px 30px; border: 1px solid var(--line-soft); background: rgba(14, 14, 18, 0.55); display: grid; gap: 6px; transition: 0.5s var(--ease); }
.office:hover { border-color: var(--line); transform: translateX(6px); }
.office .city { font-family: var(--font-display); font-size: 1.3rem; color: var(--kin-light); display: flex; align-items: baseline; gap: 12px; }
.office .city .jp { font-size: 0.85rem; color: var(--kin); opacity: 0.75; }
.office p, .office a { font-size: 0.88rem; color: var(--ink-dim); transition: color 0.4s; }
.office a:hover { color: var(--kin-light); }

.contact-form { display: grid; gap: 22px; padding: 46px 42px; border: 1px solid var(--line-soft); background: linear-gradient(150deg, rgba(22, 22, 28, 0.9), rgba(9, 9, 13, 0.96)); }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); }
.field input, .field textarea, .field select {
  background: rgba(8, 8, 10, 0.7); border: 0; border-bottom: 1px solid var(--line-soft);
  padding: 14px 4px; color: var(--washi); font-family: inherit; font-size: 0.95rem; transition: border-color 0.4s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--kin); }
.field textarea { min-height: 130px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.dossier { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(26px, 4vw, 54px); align-items: start; }
.dossier-cartel {
  position: sticky; top: 112px; display: grid; gap: 16px; padding: 22px 22px 20px;
  border: 1px solid var(--line); background: linear-gradient(170deg, rgba(22, 20, 24, 0.92), rgba(9, 9, 12, 0.96));
}
.cartel-titre { font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); }
.cartel-formule { display: flex; gap: 12px; align-items: baseline; min-height: 54px; padding-right: 40px; }
.cartel-formule .kj { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--kin-light); }
.cartel-formule strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--washi); }
.cartel-formule small { display: block; font-size: 0.8rem; color: var(--ink-dim); }
.cartel-vide { font-size: 0.86rem; color: var(--ink-faint); font-style: italic; }
.cartel-sceau {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--shu); color: #f6ece0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  border-radius: 2px; box-shadow: inset 0 0 0 2px rgba(246, 236, 224, 0.18);
  opacity: 0; transform: scale(2.4) rotate(-18deg); pointer-events: none;
}
.dossier-cartel.retenu .cartel-sceau { animation: dossierSceau 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.2s forwards; }
@keyframes dossierSceau { 60% { opacity: 1; } to { opacity: 1; transform: scale(1) rotate(-7deg); } }
.dossier-portes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dossier-portes li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; color: var(--ink-faint); transition: color 0.5s; }
.dossier-portes svg { width: 22px; height: 20px; }
.dossier-portes svg path { stroke: currentColor; transition: stroke 0.5s; }
.dossier-portes button { font: inherit; font-size: 0.88rem; background: none; border: 0; color: inherit; padding: 6px 0; text-align: left; cursor: pointer; min-height: 32px; }
.dossier-portes button:disabled { cursor: default; }
.dossier-portes button:focus-visible { outline: 1px solid var(--kin); outline-offset: 2px; }
.dossier-portes .k { font-family: var(--font-display); color: var(--kin); margin-right: 4px; }
.dossier-portes li.fait { color: var(--ink-dim); }
.dossier-portes li.fait svg { color: var(--shu); animation: toriiAllume 0.7s var(--ease); }
.dossier-portes li.ici { color: var(--washi); }
.dossier-portes li.ici svg { color: var(--kin-light); }
@keyframes toriiAllume { from { transform: translateY(4px) scale(0.85); opacity: 0.4; } }
.cartel-note { font-size: 0.76rem; line-height: 1.6; color: var(--ink-faint); border-top: 1px solid var(--line-soft); padding-top: 12px; }

.dossier-corps { display: grid; gap: 22px; min-width: 0; }
.porte { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 24px; align-content: start; }
.dossier.js .porte:not(.active) { display: none; }
.dossier.js .porte.active { animation: porteEntre 0.6s var(--ease); }
@keyframes porteEntre { from { opacity: 0; transform: translateY(16px); } }
.dossier:not(.js) .porte + .porte { padding-top: 34px; border-top: 1px solid var(--line-soft); }
.porte-tete { display: grid; gap: 6px; padding: 0; margin-bottom: 14px; }
.porte-num { display: flex; gap: 12px; align-items: baseline; font-family: var(--font-display); color: var(--kin); font-size: 0.95rem; }
.porte-num b { font-size: 1.7rem; color: var(--kin-light); font-weight: 600; }
.porte-titre { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; color: var(--washi); text-wrap: balance; }
.porte-intro { color: var(--ink-dim); max-width: 62ch; }
.dossier .champ { display: grid; gap: 10px; align-content: start; min-width: 0; }
.dossier .champ > label, .dossier .champ > .lib { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-dim); }
.dossier .champ .aide { font-size: 0.8rem; color: var(--ink-faint); }
.dossier input[type="text"], .dossier input[type="email"], .dossier input[type="tel"], .dossier textarea {
  font: inherit; font-size: 16px; color: var(--washi); background: rgba(8, 8, 10, 0.55); border: 0; border-bottom: 1px solid var(--line);
  padding: 12px 4px; width: 100%; min-width: 0; transition: border-color 0.35s;
}
.dossier textarea { min-height: 104px; resize: vertical; border: 1px solid var(--line-soft); padding: 12px 14px; }
.dossier input:focus, .dossier textarea:focus { outline: none; border-color: var(--kin); }
.dossier .champ:focus-within > label { color: var(--kin); }
.dossier .deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.dossier .champ.manque input, .dossier .champ.manque textarea { border-color: #a8372a; }

.societe { display: grid; gap: 20px; padding: 22px 22px 24px; border: 1px solid var(--line-soft); background: rgba(201, 169, 98, 0.025); }
.societe-tete { display: grid; gap: 6px; }
.dossier .societe-tete .lib { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--kin); }
.dossier .societe-tete .aide { font-size: 0.82rem; color: var(--ink-faint); max-width: 62ch; }
.societe-cherche { display: flex; gap: 12px; align-items: stretch; }
.societe-cherche input { flex: 1 1 auto; }
.societe-cherche .btn { flex: none; min-height: 46px; }
.societe-cherche .btn[hidden] { display: none; }
.dossier .societe-etat:empty { display: none; }
.dossier .societe-etat.bon { color: var(--kin-light); }
.dossier .societe-etat.mauvais { color: #d0705f; }
.dossier .societe textarea.court { min-height: 64px; }
.dossier .societe .rempli { border-color: var(--kin); animation: societeRempli 1.6s var(--ease); }
@keyframes societeRempli { from { background: rgba(201, 169, 98, 0.16); } }
@media (max-width: 640px) {
  .societe { padding: 16px; }
  .societe-cherche { flex-wrap: wrap; }
  .societe-cherche .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .dossier .societe .rempli { animation: none; } }

.dossier .logo-joint[hidden] { display: none; }
.logo-joint { display: grid; gap: 16px; padding: 22px 22px 24px; border: 1px solid var(--line-soft); background: rgba(201, 169, 98, 0.025);
  animation: logoLeve 0.7s var(--ease) both; }
.logo-tete { display: grid; gap: 6px; }
.dossier .logo-tete .lib { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--kin); }
.dossier .logo-tete .aide { font-size: 0.82rem; color: var(--ink-faint); max-width: 66ch; }
.logo-depot { position: relative; display: flex; align-items: center; gap: 18px; min-height: 92px; padding: 16px 20px;
  border: 1px dashed rgba(201, 169, 98, 0.42); cursor: pointer; transition: border-color 0.4s var(--ease), background 0.4s var(--ease); }
.logo-depot input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.logo-depot:hover, .logo-depot.survol { border-style: solid; border-color: var(--kin); background: rgba(201, 169, 98, 0.06); }
.logo-depot:focus-within { outline: 1px solid var(--kin); outline-offset: 3px; }
.logo-kj { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(201, 169, 98, 0.5);
  font-family: var(--font-display); font-size: 1.7rem; color: var(--kin); transition: background 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease); }
.logo-invite { display: grid; gap: 4px; font-size: 0.9rem; color: var(--ink-faint); }
.logo-invite b { font-weight: 400; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kin-light); }
.logo-joint.joint .logo-kj { background: var(--shu); border-color: var(--shu); color: #f6ece0; animation: logoSceau 0.5s var(--ease) both; }
.logo-choisi { display: flex; align-items: center; gap: 16px; }
.dossier .logo-choisi[hidden] { display: none; }
.logo-vue { flex: none; display: grid; place-items: center; width: 96px; height: 64px; padding: 6px;
  background: repeating-conic-gradient(#efece6 0 25%, #dedad2 0 50%) 50% / 12px 12px; }
.logo-vue img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-vue .pdf { font-size: 0.72rem; letter-spacing: 0.18em; color: var(--shu); }
.logo-nom { flex: 1 1 auto; min-width: 0; font-size: 0.88rem; color: var(--ink-dim, #b8b1a3); overflow-wrap: anywhere; }
.logo-choisi .btn { flex: none; min-height: 44px; }
.dossier .logo-etat:empty { display: none; }
.dossier .logo-etat.bon { color: var(--kin-light); }
.dossier .logo-etat.mauvais { color: #d0705f; }
@keyframes logoLeve { from { opacity: 0; transform: translateY(10px); } }
@keyframes logoSceau { 0% { transform: scale(1.35) rotate(-6deg); opacity: 0.4; } 60% { transform: scale(0.94); } }
@media (max-width: 640px) {
  .logo-joint { padding: 16px; }
  .logo-depot { gap: 14px; padding: 14px 16px; }
  .logo-choisi { flex-wrap: wrap; }
  .logo-nom { flex-basis: calc(100% - 112px); }
  .logo-choisi .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .logo-joint, .logo-joint.joint .logo-kj { animation: none; } }

.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 15px;
  border: 1px solid var(--line-soft); color: var(--ink-dim); font-size: 0.88rem; cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s, opacity 0.3s;
}
.puce input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.puce::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); flex-shrink: 0; transition: background 0.3s; }
.puce:hover { border-color: var(--line); color: var(--washi); }
.puce:has(input:checked) { color: var(--washi); border-color: var(--kin); background: rgba(201, 169, 98, 0.1); }
.puce:has(input:checked)::before { background: var(--kin); border-color: var(--kin); }
.puce:has(input:focus-visible) { outline: 1px solid var(--kin-light); outline-offset: 2px; }
.puce:has(input:disabled) { opacity: 0.35; cursor: default; }

.planches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.planche { position: relative; display: grid; border: 1px solid var(--line-soft); cursor: pointer; transition: border-color 0.3s, transform 0.45s var(--ease); }
.planche input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.planche .vue { height: 74px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; background: var(--p0); }
.planche .vue i:nth-of-type(1) { background: var(--p1); }
.planche .vue i:nth-of-type(2) { background: var(--p2); }
.planche .vue i:nth-of-type(3) { background: var(--p3); }
.planche .aa { display: grid; place-items: center; font-size: 1.55rem; color: var(--pa); }
.planche .aa.serif { font-family: var(--font-display); }
.planche .aa.sans { font-family: var(--font-body); }
.planche .lib { padding: 9px 11px; font-size: 0.84rem; color: var(--ink-dim); }
.planche:hover { border-color: var(--line); }
.planche:has(input:checked) { border-color: var(--kin); transform: translateY(-3px); }
.planche:has(input:checked) .lib { color: var(--washi); }
.planche:has(input:checked)::after {
  content: "選"; position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--shu); color: #f6ece0; font-family: var(--font-display); font-size: 0.8rem; border-radius: 2px; transform: rotate(-7deg);
}
.planche:has(input:focus-visible) { outline: 1px solid var(--kin-light); outline-offset: 2px; }
.refs { display: grid; gap: 10px; }
.refs .ref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; }

.conseil { border-left: 2px solid var(--kin); padding: 12px 16px; background: rgba(201, 169, 98, 0.06); font-size: 0.92rem; color: var(--ink-dim); }
.conseil b { color: var(--kin-light); font-weight: 400; }
.choix-formules { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.formule-choix { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 0; align-items: baseline; padding: 14px 16px; }
.formule-choix::before { display: none; }
.formule-choix .kj { grid-row: span 2; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--kin-light); align-self: center; }
.formule-choix .nom { font-family: var(--font-display); font-size: 1.02rem; color: var(--washi); }
.formule-choix .prix { font-size: 0.78rem; color: var(--ink-faint); }
.seulement-etude { display: grid; }
.dossier.js .seulement-etude:not(.vu) { display: none; }

.dossier .recap { margin: 0; border: 1px solid var(--line); display: grid; }
.dossier .recap div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); font-size: 0.88rem; }
.dossier .recap div:last-child { border-bottom: 0; }
.dossier .recap dt { color: var(--ink-faint); }
.dossier .recap dd { margin: 0; color: var(--washi); overflow-wrap: anywhere; }
.dossier:not(.js) .recap { display: none; }
.dossier .case { display: flex; gap: 12px; align-items: flex-start; font-size: 0.86rem; line-height: 1.65; color: var(--ink-dim); cursor: pointer; }
.dossier .case input { margin-top: 5px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--kin); }
.dossier .case a { color: var(--kin-light); }
.dossier .piege { position: absolute; left: -9999px; }
.dossier-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.dossier:not(.js) .dossier-nav [data-nav] { display: none; }
.dossier.js .dossier-nav [hidden] { display: none; }

.dossier-carnet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(26px, 5vw, 64px); align-items: start; outline: none; }
.carnet-tete { display: grid; gap: 16px; }
.carnet-tete p { color: var(--ink-dim); max-width: 52ch; }
.carnet-tete .btn { justify-self: start; }
.carnet-sceau {
  width: 92px; height: 92px; display: grid; place-items: center; background: var(--shu); color: #f6ece0;
  font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; border-radius: 3px; transform: rotate(-7deg);
  box-shadow: inset 0 0 0 3px rgba(246, 236, 224, 0.18); animation: carnetSceau 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) 0.2s backwards;
}
@keyframes carnetSceau { from { opacity: 0; transform: scale(2.6) rotate(-20deg); } }
.carnet-numero { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.carnet-fil { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.carnet-fil::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: var(--line); }
.carnet-fil li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding: 11px 0; position: relative; animation: carnetLigne 0.6s var(--ease) backwards; animation-delay: calc(0.5s + var(--k) * 0.12s); }
@keyframes carnetLigne { from { opacity: 0; transform: translateY(10px); } }
.carnet-fil .pt { width: 31px; height: 31px; display: grid; place-items: center; font-family: var(--font-display); color: var(--ink-faint); background: var(--sumi-2); border: 1px solid var(--line-soft); z-index: 1; }
.carnet-fil li.fait .pt { background: var(--shu); color: #f6ece0; border-color: var(--shu); }
.carnet-fil li.ici .pt { border-color: var(--kin); color: var(--kin-light); box-shadow: 0 0 0 4px rgba(201, 169, 98, 0.12); }
.carnet-fil .qui { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kin); }
.carnet-fil h3 { font-size: 1.05rem; }
.carnet-fil p { font-size: 0.88rem; color: var(--ink-dim); }

.dossier[hidden], .dossier-carnet[hidden], .dossier-carnet [hidden] { display: none; }
.dossier .case.manque { color: #e3907f; }
.dossier .case.manque input { outline: 1px solid #a8372a; outline-offset: 2px; }

body.app-page {
  min-height: 100vh; min-height: 100dvh; overflow: hidden;
  background: radial-gradient(120% 80% at 50% -10%, #1b1519 0%, var(--sumi) 62%);
}
.app { position: fixed; inset: 0; display: grid; padding: clamp(0px, 1.5vw, 20px); }
.app-cadre {
  position: relative; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(172deg, #141116 0%, #0c0b0e 48%, #09090b 100%);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(240, 235, 225, 0.025);
  animation: appEntre 0.7s var(--ease) both;
}
@keyframes appEntre { from { opacity: 0; transform: scale(0.985); } }
.app-coin { position: absolute; z-index: 7; width: 22px; height: 22px; pointer-events: none; border: 0 solid var(--kin); animation: appCoin 0.8s var(--ease) 0.45s backwards; }
.app-coin.hg { top: 5px; left: 5px; border-top-width: 1.5px; border-left-width: 1.5px; transform-origin: top left; }
.app-coin.hd { top: 5px; right: 5px; border-top-width: 1.5px; border-right-width: 1.5px; transform-origin: top right; }
.app-coin.bg { bottom: 5px; left: 5px; border-bottom-width: 1.5px; border-left-width: 1.5px; transform-origin: bottom left; }
.app-coin.bd { bottom: 5px; right: 5px; border-bottom-width: 1.5px; border-right-width: 1.5px; transform-origin: bottom right; }
@keyframes appCoin { from { opacity: 0; transform: scale(0.2); } }

.app-barre {
  position: relative; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 16px; padding: 12px clamp(18px, 2.6vw, 34px);
  border-bottom: 1px solid var(--line-soft); background: rgba(8, 8, 10, 0.62);
}
.app-marque {
  justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 40px;
  color: var(--ink-dim); font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; text-decoration: none; transition: color 0.3s;
}
.app-marque:hover, .app-marque:focus-visible { color: var(--kin-light); outline: none; }
.app-marque b {
  width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--kin); color: var(--kin-light);
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: 0;
}
.app-etat { display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; }
.app-titre { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 1.02rem; color: var(--washi); white-space: nowrap; }
.app-titre .jp { color: var(--kin); }
.app-porte { min-height: 1.3em; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }
.app-outils { justify-self: end; display: flex; align-items: center; gap: 12px; }
.app-quitter {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line-soft); color: var(--ink-dim); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; transition: border-color 0.3s, color 0.3s;
}
.app-quitter:hover, .app-quitter:focus-visible { border-color: var(--kin); color: var(--kin-light); outline: none; }
.app-quitter .x { font-size: 1.15rem; line-height: 1; letter-spacing: 0; }
.app-progres { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.app-progres i {
  display: block; height: 100%; width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, rgba(201, 169, 98, 0.3), var(--kin) 70%, var(--kin-light));
  box-shadow: 0 0 14px rgba(201, 169, 98, 0.55); transition: width 0.9s var(--ease);
}

.app-corps { position: relative; min-height: 0; display: grid; }
.app-scene {
  position: relative; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(26px, 3.6vw, 50px) clamp(18px, 4vw, 64px) 0;
  scrollbar-width: thin; scrollbar-color: rgba(201, 169, 98, 0.35) transparent;
}
.app-filigrane {
  position: absolute; top: -0.1em; right: -0.06em; font-family: var(--font-display); line-height: 1;
  font-size: clamp(14rem, 30vw, 26rem); color: rgba(201, 169, 98, 0.035); pointer-events: none; user-select: none;
}
.app-intro { position: relative; display: grid; gap: 14px; max-width: 780px; margin-bottom: clamp(26px, 4vw, 46px); animation: appLeve 0.9s var(--ease) 0.5s backwards; }
.app-intro .lead { max-width: 66ch; }
.app-intro[hidden] { display: none; }
@keyframes appLeve { from { opacity: 0; transform: translateY(14px); } }
.app .dossier { position: relative; }
.app .dossier-cartel { top: 0; }
.app .dossier-nav {
  position: sticky; bottom: 0; z-index: 3; margin-top: 4px; padding: 20px 0 22px; border-top: 0;
  background: #0b0a0d;
}
.app .dossier-nav::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--line-soft); }
.app .dossier-nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 34px; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 10, 13, 0), #0b0a0d);
}
.app .dossier-nav .btn-ghost { --btn-fond: #0b0a0d; }   
.app .form-reponse { margin-top: 0; }
.app .dossier-carnet { padding-bottom: clamp(30px, 5vw, 60px); }

.app-noren { display: none; }
.app-js .app-noren { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; pointer-events: none; }
.app-noren span {
  position: relative; overflow: hidden; border-top: 6px solid var(--kin-deep);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #24181b 0%, #170f12 100%);
  transition: transform 0.72s var(--ease);
}
.app-noren span:first-child { transform: translateX(-101%); box-shadow: inset -1px 0 0 rgba(201, 169, 98, 0.35); }
.app-noren span:last-child { transform: translateX(101%); box-shadow: inset 1px 0 0 rgba(201, 169, 98, 0.35); }
.app-noren em {
  position: absolute; top: 50%; font-style: normal; font-family: var(--font-display); line-height: 1;
  font-size: clamp(7rem, 16vw, 12rem); color: rgba(236, 217, 168, 0.86);
}
.app-noren span:first-child em { right: 0; transform: translate(50%, -50%); }
.app-noren span:last-child em { left: 0; transform: translate(-50%, -50%); }
.app-js .app-noren span:first-child { animation: appNorenG 1.05s var(--ease) 0.3s backwards; }
.app-js .app-noren span:last-child { animation: appNorenD 1.05s var(--ease) 0.3s backwards; }
@keyframes appNorenG { from { transform: none; } }
@keyframes appNorenD { from { transform: none; } }
.app.rideau-ferme .app-noren span { transform: none; }

@media (max-width: 900px) {
  .app { padding: 0; }
  .app-cadre { border-width: 0; box-shadow: none; }
  .app-barre { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 10px 16px; }
  .app-marque span { display: none; }
  .app-etat { justify-items: start; text-align: left; }
  .app-titre { font-size: 0.94rem; }
}
@media (max-width: 640px) {
  .app-barre { gap: 10px; padding: 9px 14px; }
  .app-titre .jp, .app-barre .lang-kj { display: none; }
  .app-titre { font-size: 0.86rem; max-width: 100%; overflow: hidden; }
  .app-titre [data-i18n] { overflow: hidden; text-overflow: ellipsis; }
  .app-porte { font-size: 0.6rem; letter-spacing: 0.16em; }
  .app-quitter { width: 40px; padding: 0; justify-content: center; }
  .app-quitter [data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app-scene { padding: 22px 16px 0; }
  .app .dossier-nav { flex-wrap: nowrap; padding: 18px 0 16px; }
  .app .dossier-nav .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; --btn-deco: none; }
  .app-coin { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-js .app-noren { display: none; }
  .app-cadre, .app-intro, .app-coin { animation: none; }
  .app-progres i { transition: none; }
}

.dossier-invite {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "sceau corps" "portes portes"; gap: 28px clamp(24px, 4vw, 52px);
  padding: clamp(26px, 4vw, 52px); border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(22, 20, 24, 0.92), rgba(9, 9, 12, 0.97));
}
.dossier-invite::before, .dossier-invite::after { content: ""; position: absolute; width: 22px; height: 22px; border: 0 solid var(--kin); pointer-events: none; }
.dossier-invite::before { top: 6px; left: 6px; border-top-width: 1.5px; border-left-width: 1.5px; }
.dossier-invite::after { bottom: 6px; right: 6px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.invite-sceau {
  grid-area: sceau; width: 96px; height: 96px; display: grid; place-items: center; align-self: start;
  background: var(--shu); color: #f6ece0; font-family: var(--font-display); font-weight: 700; font-size: 2.8rem;
  border-radius: 3px; box-shadow: inset 0 0 0 3px rgba(246, 236, 224, 0.18); opacity: 0; transform: rotate(-7deg);
}
.dossier-invite.in .invite-sceau { animation: inviteSceau 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) 0.35s forwards; }
@keyframes inviteSceau { from { opacity: 0; transform: scale(2.4) rotate(-20deg); } to { opacity: 1; transform: rotate(-7deg); } }
.invite-corps { grid-area: corps; display: grid; gap: 16px; justify-items: start; }
.invite-texte { color: var(--ink-dim); max-width: 64ch; }
.invite-portes {
  grid-area: portes; list-style: none; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
}
.invite-portes li { display: grid; justify-items: center; gap: 6px; color: var(--ink-faint); }
.invite-portes svg { width: 34px; height: 31px; }
.invite-portes svg path { stroke: currentColor; }
.invite-portes .jp { font-family: var(--font-display); font-size: 1.3rem; color: var(--washi); line-height: 1.2; }
.invite-portes .k { font-family: var(--font-display); font-size: 0.8rem; color: var(--kin); }
.dossier-invite.in .invite-portes li { animation: invitePorte 0.6s var(--ease) backwards; animation-delay: calc(0.8s + var(--k) * 0.14s); }
.dossier-invite.in .invite-portes svg { color: var(--shu); transition: color 0.5s; transition-delay: calc(1.1s + var(--k) * 0.14s); }
@keyframes invitePorte { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 640px) {
  .dossier-invite { grid-template-columns: 1fr; grid-template-areas: "sceau" "corps" "portes"; }
  .invite-sceau { width: 72px; height: 72px; font-size: 2.1rem; }
  .invite-portes { gap: 4px; }
  .invite-portes svg { width: 26px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .invite-sceau { opacity: 1; }
  .dossier-invite.in .invite-sceau, .dossier-invite.in .invite-portes li { animation: none; }
}

.office-rangee { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.office-rangee .office:hover { transform: translateY(-4px); }

.plan-sceau {
  position: absolute; right: 22px; bottom: 82px; z-index: 4; width: 58px; height: 58px; display: grid; place-items: center;
  background: var(--shu); color: #f6ece0; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
  border-radius: 3px; box-shadow: inset 0 0 0 3px rgba(246, 236, 224, 0.18); pointer-events: none;
  animation: planSceau 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}
@keyframes planSceau { from { opacity: 0; transform: scale(2.4) rotate(-18deg); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(-7deg); } }
.plans.retenue .plan:not(.retenue) { opacity: 0.32; transition: opacity 0.5s; }

@media (max-width: 1100px) {
  .dossier { grid-template-columns: 1fr; }
  .dossier-cartel { position: relative; top: 0; }
  .dossier-portes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dossier-portes li { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 2px; }
  .dossier-portes button { text-align: center; font-size: 0.74rem; }
  .dossier-carnet { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .office-rangee { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dossier .deux, .refs .ref { grid-template-columns: 1fr; }
  .planches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dossier-portes .texte { display: none; }
  .dossier .recap div { grid-template-columns: 1fr; gap: 2px; }
  .dossier-nav .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dossier.js .porte.active, .dossier-portes li.fait svg, .carnet-sceau, .carnet-fil li { animation: none; }
  .dossier-cartel.retenu .cartel-sceau { animation: none; opacity: 1; transform: rotate(-7deg); }
  .plan-sceau { animation: none; transform: rotate(-7deg); }
}


.site-footer { border-top: 1px solid var(--line-soft); padding: 74px 40px 34px; background: rgba(6, 6, 8, 0.85); position: relative; }
.footer-grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; }
.footer-grid h4 { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin); margin-bottom: 20px; font-weight: 400; }
.footer-grid a, .footer-grid p { display: block; font-size: 0.86rem; color: var(--ink-dim); margin-bottom: 10px; transition: color 0.4s; }
.footer-grid a:hover { color: var(--kin-light); }
.footer-grid .logo { display: flex; margin-bottom: 0; color: inherit; }
.footer-brand p { max-width: 300px; }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a { width: 38px; height: 38px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-dim); margin: 0; transition: 0.4s; }
.footer-social a:hover { border-color: var(--kin); color: var(--kin-light); transform: translateY(-3px); }
.footer-social svg { width: 15px; height: 15px; }
.footer-grid a.footer-rdv {
  display: inline-flex; align-items: center; gap: 12px; margin: 22px 0 0; min-height: 44px; padding: 0 18px 0 16px;
  background: #17140f; border: 1px solid var(--kin); color: var(--kin-light);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  transition: border-color 0.4s, background 0.4s, color 0.4s;
}
.footer-rdv .rdv-kj { font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.06em; text-transform: none; color: var(--kin); }
.footer-rdv .rdv-fleche { letter-spacing: 0; transition: transform 0.4s var(--ease); }
.footer-grid a.footer-rdv:hover { background: #211b12; border-color: var(--kin-light); color: var(--washi); }
.footer-rdv:hover .rdv-fleche { transform: translateX(4px); }
.footer-bottom { max-width: 1360px; margin: 54px auto 0; padding-top: 26px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.08em; }

.pied-bande {
  position: relative; margin: -74px -40px 78px; padding: 48px 40px 0;
  background:
    radial-gradient(55% 140% at 50% 0%, rgba(201, 169, 98, 0.075), transparent 62%),
    linear-gradient(180deg, #030303 0%, #070706 100%);
}
.pied-bande::before, .pied-bande::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--kin-deep) 18%, var(--kin-light) 50%, var(--kin-deep) 82%, transparent);
  transform: scaleX(0); transition: transform 1.6s var(--ease-ink);
}
.pied-bande::before { top: 0; }
.pied-bande::after { bottom: 0; transition-delay: 0.25s; }
.pied-bande.in::before, .pied-bande.in::after { transform: scaleX(1); }
.pied-sur {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 4px;
  font-size: 0.64rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--kin);
}
.pied-sur::before, .pied-sur::after { content: ""; width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--kin)); }
.pied-sur::after { transform: scaleX(-1); }
.pied-sur-kj { font-family: var(--font-display); font-size: 0.98rem; letter-spacing: 0; color: var(--kin-light); }
.pied-maisons { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.pied-maison {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: 46px 28px 48px; border-right: 1px solid var(--line);
}
.pied-maison:last-child { border-right: 0; }
.pied-maison::before {
  content: attr(data-k); position: absolute; left: 50%; bottom: -48px; z-index: -1;
  font-family: var(--font-display); font-weight: 800; font-size: 150px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(240, 235, 225, 0.06);
  transform: translateX(-50%);
  transition: transform 1s var(--ease), -webkit-text-stroke-color 0.6s;
}
.pied-maison:hover::before { transform: translateX(-50%) translateY(-18px) rotate(-4deg); -webkit-text-stroke-color: rgba(201, 169, 98, 0.5); }
.pied-maison::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 90% at 50% 100%, rgba(201, 169, 98, 0.1), transparent 70%);
  transition: opacity 0.6s;
}
.pied-maison:hover::after { opacity: 1; }
.pied-maison h4 {
  display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: 0.04em; line-height: 1.2;
}
.pied-heure {
  display: inline-flex; align-items: center; gap: 10px; min-height: 1.3em;
  font-family: var(--font-body); font-size: 0.76rem; letter-spacing: 0.18em; color: var(--kin);
  font-variant-numeric: tabular-nums;
}
.pied-heure:empty { visibility: hidden; }
.pied-heure::before {
  content: ""; width: 6px; height: 6px; background: var(--kin); box-shadow: 0 0 10px var(--kin);
  transform: rotate(45deg); animation: pied-pouls 2.6s ease-in-out infinite;
}
@keyframes pied-pouls {
  0%, 100% { opacity: 1; transform: rotate(45deg) scale(1); }
  50% { opacity: 0.35; transform: rotate(45deg) scale(0.65); }
}
.pied-maison p, .pied-maison a { display: block; font-size: 0.88rem; line-height: 1.95; color: var(--ink-dim); transition: color 0.4s; }
.pied-maison a:hover { color: var(--kin-light); }

.pied-geant {
  --p: 1;
  position: relative; max-width: 1360px; margin: 74px auto 0; text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, calc((100vw - 80px) / 8.8), 9.4rem);
  line-height: 1.1; letter-spacing: -0.01em; user-select: none; padding-bottom: 0.2em;
  color: transparent; -webkit-text-stroke: 1px rgba(201, 169, 98, 0.24);
}
.pied-geant .pied-geant-or {
  position: absolute; inset: 0; padding-bottom: inherit;
  background: linear-gradient(100deg, var(--kin-deep) 0%, var(--kin) 28%, var(--kin-light) 50%, var(--kin) 72%, var(--kin-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0;
  clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0);
}

.pied-haut { display: inline-flex; align-items: center; gap: 12px; color: var(--washi); letter-spacing: 0.1em; transition: color 0.4s; }
.pied-haut:hover { color: var(--kin-light); }
.pied-haut .seal-mini {
  width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--shu); color: var(--washi); font-family: var(--font-display); font-size: 1.05rem;
  box-shadow: inset 0 0 0 2px var(--shu), inset 0 0 0 3px rgba(240, 235, 225, 0.6);
  transition: transform 0.9s var(--ease);
}
.pied-haut:hover .seal-mini { transform: rotate(360deg); }

.hanabira { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 80; pointer-events: none; }

.oeuvre-seuil { position: relative; padding: 170px 40px 30px; overflow: hidden; }
.oeuvre-seuil > .container { position: relative; z-index: 1; }
.ov-retour, .ov-galerie a {
  display: inline-flex; align-items: center; gap: 10px; font-size: 0.7rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--ink-faint); transition: color 0.4s;
}
.ov-retour { margin-bottom: 44px; }
.ov-retour:hover, .ov-galerie a:hover { color: var(--kin-light); }
.ov-tete { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: end; margin-bottom: 54px; }
.ov-titre .display-xl { margin-top: 16px; }
.ov-sous { display: block; margin-top: 16px; font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--kin); }
.ov-chapo { color: var(--ink-dim); }

.ov-ecran {
  position: relative; margin: 0; padding: 18px; border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(20, 20, 26, 0.9), rgba(9, 9, 13, 0.96));
}
.ov-ecran::after { content: ""; position: absolute; inset: 9px; border: 1px solid var(--line-soft); pointer-events: none; }
.ov-ecran .lamp {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 60%; height: 130px; pointer-events: none;
  background: linear-gradient(180deg, rgba(201, 169, 98, 0.2), transparent 75%);
}
.ov-fenetre, .ov-cadre { position: relative; overflow: hidden; border: 1px solid rgba(201, 169, 98, 0.26); background: #050506; }
.ov-barre {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; flex: none;
  background: var(--lacquer); border-bottom: 1px solid var(--line);
}
.ov-barre i { width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid var(--kin); opacity: 0.55; }
.ov-barre b { margin-left: 14px; font-weight: 300; font-size: 0.68rem; letter-spacing: 0.16em; color: var(--ink-faint); }
.ov-fenetre img { width: 100%; height: auto; clip-path: inset(0 0 100% 0); animation: ov-leve 1.6s var(--ease) 0.45s forwards; }
@keyframes ov-leve { to { clip-path: inset(0 0 0 0); } }

.ov-fiche {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; margin-top: 44px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft);
}
.ov-fiche > div { padding: 22px 22px; border-left: 1px solid var(--line-soft); }
.ov-fiche > div:first-child { border-left: 0; padding-left: 0; }
.ov-fiche dt { font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.ov-fiche dd { font-size: 0.88rem; line-height: 1.5; color: var(--kin-light); }
.ov-fiche .ov-visite { display: flex; align-items: center; justify-content: flex-end; padding-right: 0; }
.ov-fiche { position: relative; }
.ov-fiche::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, var(--kin-light), var(--kin) 40%, rgba(201, 169, 98, 0.3));
  transform: scaleX(0); transform-origin: left; transition: transform 1.5s var(--ease-ink) 0.1s;
}
.ov-fiche.in::before { transform: scaleX(1); }
.ov-fiche > div { opacity: 0; transform: translateY(12px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(0.3s + var(--k, 0) * 0.1s); }
.ov-fiche.in > div { opacity: 1; transform: none; }

.ov-kakejiku { position: relative; width: 210px; margin: 0 auto; padding: 46px 0 18px; --mont: 420px; }
.ov-kakejiku.reveal { transform: none; transition: opacity 0.8s var(--ease); }
.ov-kakejiku::before {
  content: ""; position: absolute; left: 50%; top: 40%; width: min(420px, 92vw); height: 520px; margin-top: -260px; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 40%, rgba(201, 169, 98, 0.13), transparent 62%);
  pointer-events: none;
}
.kj-cordon { position: absolute; left: 5px; top: 0; width: 200px; height: 46px; overflow: visible; }
.kj-cordon path { fill: none; stroke: var(--kin); stroke-width: 1.2; opacity: 0.75; }
.kj-cordon circle { fill: var(--kin-light); }
.kj-hassou {
  position: relative; z-index: 3; display: block; height: 9px; margin: 0 -3px; border-radius: 2px;
  background: linear-gradient(180deg, #4a3a24, #1d160e 60%, #0b0805);
  border-top: 1px solid rgba(236, 217, 168, 0.55); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.65);
}
.kj-monture {
  position: relative; display: block; height: var(--mont);
  background:
    repeating-linear-gradient(45deg, rgba(201, 169, 98, 0.08) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(201, 169, 98, 0.08) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #2b2117, #19130d);
  box-shadow: inset 1px 0 0 rgba(201, 169, 98, 0.3), inset -1px 0 0 rgba(201, 169, 98, 0.3), 0 34px 60px -22px rgba(0, 0, 0, 0.95);
  clip-path: inset(0 -40px 100% -40px);
  transition: clip-path 1.8s cubic-bezier(0.45, 0.05, 0.25, 1) 0.5s;
}
.ov-kakejiku.in .kj-monture { clip-path: inset(0 -40px -70px -40px); }
.kj-futai { position: absolute; inset: 0 0 auto; height: 78px; z-index: 2; }
.kj-futai i {
  position: absolute; top: 0; width: 11px; height: 74px;
  background: linear-gradient(90deg, #7a5f30, #d8bd7c 50%, #7a5f30);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  transform-origin: top;
}
.kj-futai i::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: -3px; height: 3px; background: #c9a962; opacity: 0.6; }
.kj-futai i:first-child { left: 30%; }
.kj-futai i:last-child { right: 30%; }
.kj-honshi {
  position: absolute; top: 80px; bottom: 58px; left: 22px; right: 22px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.35), transparent 60%),
    linear-gradient(180deg, #efe5d1, #e2d4b8);
  box-shadow: 0 0 0 6px #3a2b18, 0 0 0 7px rgba(201, 169, 98, 0.5), inset 0 0 26px rgba(120, 95, 50, 0.22);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 40px;
}
.kj-kanji {
  font-family: var(--font-display); font-weight: 600; font-size: 7.6rem; line-height: 1; color: #16110c;
  text-shadow: 0 0 1px rgba(22, 17, 12, 0.7), 0 0 6px rgba(22, 17, 12, 0.18);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.5s var(--ease-ink) 2.3s;
}
.ov-kakejiku.in .kj-kanji { clip-path: inset(-10% -10% -10% -10%); }
.kj-rakkan {
  position: absolute; left: 18px; bottom: 18px; width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--shu); color: #f6ece0; border-radius: 2px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; line-height: 1;
  box-shadow: inset 0 0 0 1.5px rgba(246, 236, 224, 0.3);
  opacity: 0; transform: rotate(-4deg);
}
.ov-kakejiku.in .kj-rakkan { opacity: 0.92; animation: kj-rakkan 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 3.75s backwards; }
@keyframes kj-rakkan { 0% { opacity: 0; transform: rotate(-4deg) scale(2); } 60% { opacity: 0.92; transform: rotate(-4deg) scale(0.9); } 100% { opacity: 0.92; transform: rotate(-4deg); } }
.kj-jiku {
  position: absolute; z-index: 3; left: -17px; right: -17px; top: calc(46px + 9px + var(--mont) - 5px); height: 17px;
  background:
    radial-gradient(circle at 50% 32%, #f6e7ba, #c9a962 45%, #6e5528 80%) 0 0 / 17px 17px no-repeat,
    radial-gradient(circle at 50% 32%, #f6e7ba, #c9a962 45%, #6e5528 80%) 100% 0 / 17px 17px no-repeat,
    linear-gradient(180deg, #4a3a24, #140f09 70%) 16px 2px / calc(100% - 32px) 13px no-repeat;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7));
  transform: translateY(calc(-1 * var(--mont)));
  transition: transform 1.8s cubic-bezier(0.45, 0.05, 0.25, 1) 0.5s;
}
.ov-kakejiku.in .kj-jiku { transform: none; }
@media (hover: hover) and (min-width: 901px) {
  .ov-kakejiku.in .kj-futai i { animation: kj-futai 5.5s ease-in-out 2.4s infinite alternate; }
  .ov-kakejiku.in .kj-futai i:last-child { animation-duration: 6.4s; animation-direction: alternate-reverse; }
}
@keyframes kj-futai { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }

.ov-parti { max-width: 1000px; margin: 0 auto; }
.ov-citation {
  font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.62rem); line-height: 1.7;
  color: var(--washi); border-left: 1px solid var(--kin); padding-left: 34px;
}

.ov-palette { display: flex; flex-wrap: wrap; justify-content: center; padding-top: 6px; }
.ov-teinte {
  position: relative; flex: 1 1 0; min-width: 0; padding: 0 6px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ov-teinte::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background:
    linear-gradient(90deg, rgba(60, 45, 20, 0.85) 0 2px, transparent 2px),
    linear-gradient(180deg, #f1dfac, #b8995a 50%, #5d4a28);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.26s linear calc(0.15s + var(--i) * 0.26s);
}
.ov-palette.in .ov-teinte::before { transform: scaleX(1); }
.ov-teinte:first-child::before { border-radius: 3px 0 0 3px; }
.ov-teinte:last-child::before { border-radius: 0 3px 3px 0; }
.ov-tanzaku {
  position: relative; margin-top: 40px; width: min(96px, 72%); height: 250px;
  display: flex; justify-content: center; padding-top: 24px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07), transparent 28%, transparent 70%, rgba(0, 0, 0, 0.14)),
    var(--c);
  box-shadow: 0 22px 34px -16px rgba(0, 0, 0, 0.85);
  transform-origin: 50% -34px;
  clip-path: inset(-40px -30px 100% -30px);
  transition: clip-path 1.25s var(--ease-ink) calc(0.5s + var(--i) * 0.17s);
}
.ov-tanzaku::before {
  content: ""; position: absolute; left: 50%; top: -34px; width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--kin-light), var(--kin));
}
.ov-tanzaku::after {
  content: ""; position: absolute; left: 50%; top: -8px; width: 7px; height: 7px; margin-left: -3px;
  border-radius: 50%; background: var(--kin); box-shadow: 0 0 0 2px rgba(201, 169, 98, 0.25);
}
.ov-tanzaku.claire { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 22px 34px -16px rgba(0, 0, 0, 0.85); }
.ov-tanzaku.sombre { box-shadow: inset 0 0 0 1px rgba(201, 169, 98, 0.5), 0 22px 34px -16px rgba(0, 0, 0, 0.85); }
.ov-palette.in .ov-tanzaku {
  clip-path: inset(-40px -30px -40px -30px);
  animation: tanzaku-balance 1.8s ease-out calc(1.25s + var(--i) * 0.17s) backwards;
}
@keyframes tanzaku-balance {
  0% { transform: rotate(0); } 22% { transform: rotate(5deg); } 48% { transform: rotate(-3deg); }
  72% { transform: rotate(1.4deg); } 100% { transform: rotate(0); }
}
@media (hover: hover) and (min-width: 901px) {
  .ov-palette.in .ov-tanzaku {
    animation: tanzaku-balance 1.8s ease-out calc(1.25s + var(--i) * 0.17s) backwards,
               tanzaku-brise calc(6s + var(--i) * 0.9s) ease-in-out calc(3.1s + var(--i) * 0.17s) infinite alternate;
  }
  .ov-teinte:hover .ov-tanzaku { animation: tanzaku-balance 1.5s ease-out; }
}
@keyframes tanzaku-brise { from { transform: rotate(-0.9deg); } to { transform: rotate(0.9deg); } }
.ov-nom {
  writing-mode: vertical-rl; font-family: var(--font-display); font-size: 1.12rem;
  letter-spacing: 0.16em; color: var(--washi); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.ov-tanzaku.encre .ov-nom { color: #1a1510; text-shadow: none; }
.ov-code {
  font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-dim); font-variant-numeric: tabular-nums; text-align: center;
  opacity: 0; transition: opacity 0.8s var(--ease) calc(1.5s + var(--i) * 0.17s);
}
.ov-tanzaku + .ov-code { margin-top: 20px; }
.ov-palette.in .ov-code { opacity: 1; }
.ov-code span { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.58rem; margin-right: 6px; }
.ov-sous-titre {
  display: flex; align-items: center; gap: 14px; margin: 70px 0 26px; font-family: var(--font-body);
  font-weight: 400; font-size: 0.76rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin);
}
.ov-typo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.ov-police {
  position: relative; overflow: hidden; padding: 34px 32px; border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, var(--sumi-2), var(--sumi));
}
.ov-aa { position: absolute; right: 26px; top: 4px; font-family: var(--font-display); font-size: 5.4rem; line-height: 1; color: var(--kin); opacity: 0.13; }
.ov-police h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; margin-bottom: 10px; color: var(--kin-light); }
.ov-police p { color: var(--ink-dim); font-size: 0.92rem; max-width: 470px; }
.ov-typo-katsuji .ov-aa { opacity: 1; top: 20px; right: 30px; color: rgba(201, 169, 98, 0); }
.ov-typo-katsuji .ov-aa::before {
  content: "Aa"; position: absolute; inset: -6px -12px; display: grid; place-items: center;
  color: #2b2116; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.28);
  background: linear-gradient(135deg, #c3a466, #7a5f30 42%, #3d3020);
  border-radius: 3px;
  box-shadow: 0 18px 30px -8px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 240, 200, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translateY(-46px) scale(1.12) scaleX(-1);
}
.ov-typo-katsuji .ov-police.in .ov-aa { animation: katsuji-encre 2.6s ease 0.35s forwards; }
.ov-typo-katsuji .ov-police.in .ov-aa::before { animation: katsuji-presse 2.6s cubic-bezier(0.5, 0, 0.3, 1) 0.35s forwards; }
@keyframes katsuji-presse {
  0% { opacity: 0; transform: translateY(-46px) scale(1.12) scaleX(-1); }
  18% { opacity: 1; }
  36% { opacity: 1; transform: translateY(0) scale(1) scaleX(-1); }
  50% { opacity: 1; transform: translateY(0) scale(0.97) scaleX(-1); }
  78% { opacity: 0.85; transform: translateY(-30px) scale(1.06) scaleX(-1); }
  100% { opacity: 0; transform: translateY(-46px) scale(1.1) scaleX(-1); }
}
@keyframes katsuji-encre {
  0%, 40% { color: rgba(201, 169, 98, 0); text-shadow: none; }
  52% { color: rgba(236, 217, 168, 0.72); text-shadow: 0 0 18px rgba(201, 169, 98, 0.45); }
  100% { color: rgba(201, 169, 98, 0.34); text-shadow: 0 0 1px rgba(201, 169, 98, 0.4); }
}

.ov-rouleaux { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.ov-rouleau { margin: 0; }
.ov-rouleau figcaption { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.ov-cadre { height: min(76vh, 760px); display: flex; flex-direction: column; }
.ov-defile { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--kin-deep) transparent; }
.ov-defile img { width: 100%; height: auto; }
.ov-defile.deroule { overflow: hidden; }
.ov-defile.deroule img { will-change: transform; }
.ov-telephone {
  position: relative; display: flex; aspect-ratio: 9 / 19; padding: 28px 10px 20px;
  border: 1px solid var(--line); background: var(--lacquer);
}
.ov-telephone::before {
  content: ""; position: absolute; top: 12px; left: 50%; width: 46px; height: 3px;
  transform: translateX(-50%); background: var(--kin); opacity: 0.4;
}
.ov-telephone .ov-defile { border: 1px solid rgba(201, 169, 98, 0.22); background: #050506; }

.ov-faits .inc-item p { color: var(--washi); font-size: 0.95rem; }

.ov-resultat { max-width: 980px; margin: 0 auto; text-align: center; }
.ov-resultat .eyebrow { justify-content: center; }
.ov-resultat blockquote {
  margin: 28px 0 40px; font-family: var(--font-display); font-size: clamp(1.35rem, 2.5vw, 2.05rem);
  line-height: 1.55; color: var(--kin-light);
}
.ov-resultat blockquote::before { content: "「"; color: var(--kin); margin-right: 6px; }
.ov-resultat blockquote::after { content: "」"; color: var(--kin); margin-left: 6px; }

.ov-section-suivante { padding-top: 0; }
.ov-suivante {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  border-top: 1px solid var(--line); padding-top: 70px;
}
.ov-suivante .art-canvas { min-height: 300px; }
.ov-suivante-texte { display: flex; flex-direction: column; gap: 10px; }
.ov-suivante-no { font-family: var(--font-display); color: var(--kin); letter-spacing: 0.3em; font-size: 0.9rem; }
.ov-suivante-titre { font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 3.7rem); line-height: 1.06; color: var(--washi); transition: color 0.5s; }
.ov-fleche { font-size: 2rem; color: var(--kin); transition: transform 0.6s var(--ease); }
.ov-suivante:hover .ov-suivante-titre { color: var(--kin-light); }
.ov-suivante:hover .ov-fleche { transform: translateX(14px); }
.ov-suivante:hover .art-canvas img { transform: scale(1.04); }
.ov-noren { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ov-noren::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; z-index: 2;
  background: linear-gradient(180deg, #ecd9a8, #8a6d33 60%, #4a3a1f); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: opacity 0.7s ease 1.5s;
}
.ov-suivante.in .ov-noren::before { opacity: 0; }
.ov-noren i {
  position: absolute; top: 0; bottom: 0; width: calc(50% - 1px); overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255, 240, 210, 0.03) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #2a1f15, #120d09);
  box-shadow: inset 0 -40px 50px -26px rgba(0, 0, 0, 0.7);
  transition: transform 1.6s var(--ease-ink) 0.55s;
}
.ov-noren i:first-child { left: 0; transform-origin: 0 0; }
.ov-noren i:last-child { right: 0; transform-origin: 100% 0; }
.ov-noren b {
  position: absolute; top: 50%; font-family: var(--font-display); font-weight: 600; font-size: 8.4rem; line-height: 1;
  color: #e7dcc4; opacity: 0.9;
}
.ov-noren i:first-child b { left: calc(100% + 1px); transform: translate(-50%, -50%); }
.ov-noren i:last-child b { left: -1px; transform: translate(-50%, -50%); }
.ov-suivante.in .ov-noren i:first-child { transform: translateX(-112%) rotate(5deg); }
.ov-suivante.in .ov-noren i:last-child { transform: translateX(112%) rotate(-5deg); }
.ov-suivante .art-frame { margin-top: 64px; }
.ov-suivante.in .art-frame .lamp::after { opacity: 1; animation: salle-allume 1.2s ease 1.6s both; }
.ov-suivante.in .art-frame .lamp::before {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 250, 230, 0.7), inset 0 -2px 0 rgba(255, 236, 190, 0.9),
    0 8px 22px rgba(255, 220, 150, 0.55);
}
.ov-galerie { margin-top: 56px; text-align: center; }

.cartel-gestes { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }

@media (max-width: 1100px) {
  .ov-tete { grid-template-columns: 1fr; gap: 24px; }
  .ov-fiche { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-fiche > div { border-left: 0; padding-left: 0; }
  .ov-fiche .ov-visite { grid-column: 1 / -1; justify-content: flex-start; padding-top: 4px; }
}
@media (max-width: 900px) {
  .oeuvre-seuil { padding: 130px 22px 24px; }
  .ov-rouleaux { grid-template-columns: 1fr; gap: 46px; }
  .ov-cadre { height: 62vh; }
  .ov-mobile { width: min(300px, 82%); margin: 0 auto; }
  .ov-typo { grid-template-columns: 1fr; }
  .ov-suivante { grid-template-columns: 1fr; gap: 34px; padding-top: 54px; }
}
@media (max-width: 640px) {
  .ov-fiche { grid-template-columns: 1fr 1fr; }
  .ov-teinte { flex: 0 0 33.333%; padding-bottom: 26px; }
  .ov-palette[data-n="4"] .ov-teinte { flex-basis: 50%; }
  .ov-tanzaku { height: 196px; width: min(78px, 72%); padding-top: 18px; }
  .ov-nom { font-size: 1rem; }
  .ov-code span { display: block; margin: 6px 0 1px; }
  .ov-kakejiku { width: 184px; --mont: 360px; }
  .kj-cordon { left: -8px; }
  .kj-honshi { top: 70px; bottom: 50px; left: 19px; right: 19px; padding-bottom: 34px; }
  .kj-kanji { font-size: 6.2rem; }
  .ov-noren b { font-size: 6.6rem; }
  .ov-typo-katsuji .ov-aa { position: relative; top: auto; right: auto; display: inline-block; font-size: 3.6rem; margin: 4px 0 14px 12px; }
  .ov-ecran { padding: 10px; }
  .ov-ecran::after { inset: 5px; }
  .ov-barre b { display: none; }
  .ov-citation { padding-left: 22px; }
  .ov-police { padding: 28px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-fenetre img { animation: none; clip-path: none; }
  .ov-teinte::before, .ov-palette.in .ov-teinte::before { transform: none; transition: none; }
  .ov-tanzaku, .ov-palette.in .ov-tanzaku { clip-path: none; transition: none; animation: none; }
  .ov-code { opacity: 1; transition: none; }
  .ov-fiche::before { transform: none; transition: none; }
  .ov-fiche > div { opacity: 1; transform: none; transition: none; }
  .ov-typo-katsuji .ov-aa, .ov-typo-katsuji .ov-police.in .ov-aa { animation: none; color: rgba(201, 169, 98, 0.34); }
  .ov-typo-katsuji .ov-aa::before { display: none; }
  .kj-monture, .ov-kakejiku.in .kj-monture { clip-path: none; transition: none; }
  .kj-jiku { transform: none; transition: none; }
  .kj-kanji { clip-path: none; transition: none; }
  .kj-rakkan { opacity: 0.92; animation: none !important; }
  .ov-noren { display: none; }
  .ov-suivante .art-frame .lamp::after { opacity: 1; animation: none !important; }
}

.reveal { opacity: 0; transform: translateY(44px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; } .reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; } .reveal-d4 { transition-delay: 0.4s; }

.word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; }
.word-mask i { display: inline-block; font-style: inherit; transform: translateY(105%); transition: transform 1.1s var(--ease-ink); }
.split-words.words-in .word-mask i { transform: translateY(0); }

.ink-reveal {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 30%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 30%, transparent 62%);
  -webkit-mask-size: 0% 0%; mask-size: 0% 0%;
  -webkit-mask-position: 50% 50%; mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: -webkit-mask-size 2.2s var(--ease-ink), mask-size 2.2s var(--ease-ink);
}
.ink-reveal.in { -webkit-mask-size: 320% 320%; mask-size: 320% 320%; }

@media (max-width: 1100px) {
  .main-nav { gap: 14px; }
  .main-nav .jp { display: none; }

  .byobu-panel {
    grid-template-columns: 1fr; gap: 30px; transform: none !important;
    will-change: auto; transform-style: flat;
  }
  .byobu-panel:nth-child(even) .byobu-media { order: -1; }
  .byobu-media { min-height: 250px; }
  .artwork { grid-template-columns: 1fr; gap: 28px; }
  .artwork:nth-child(even) .art-frame { order: 0; }
  .michi, .stats-grid, .voices, .selection { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { justify-content: center; text-align: center; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 40px; }
  .enso-wrap { min-height: 320px; }
  .side-mark { display: none; }
}
@media (max-width: 900px) {
  .pied-maisons { grid-template-columns: 1fr; }
  .pied-maison { border-right: 0; border-bottom: 1px solid var(--line); padding: 34px 12px 36px; }
  .pied-maison:last-child { border-bottom: 0; }
  .main-nav {
    position: fixed; inset: 0; background: rgba(6, 6, 8, 0.985);
    flex-direction: column; justify-content: center; gap: 32px;
    z-index: 90; opacity: 0; visibility: hidden;
    transition: opacity 0.26s var(--ease), visibility 0s 0.26s;
  }
  body.nav-open .main-nav { transition: opacity 0.26s var(--ease), visibility 0s; }
  .header-actions { position: relative; z-index: 95; }
  .lang-switch button { padding: 13px 17px; font-size: 0.7rem; touch-action: manipulation; }
  .burger { touch-action: manipulation; }

  .site-header.scrolled {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }


  .nav-branche { display: contents; }


  body.nav-open .site-header { transition: none; }

  .hero-3d { opacity: 0.38; }
  .hero-3d[data-vessel] { animation: ceramiqueRespire 9s ease-in-out infinite; }
  .hero { overflow-x: clip; }
  .hero-3d[data-vessel]::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: no-repeat center / cover; transition: opacity 0.45s var(--ease);
  }
  .hero-3d[data-vessel="tsubo"]::before   { background-image: url(../img/ceramique/tsubo.webp?v=20261007); }
  .hero-3d[data-vessel="chawan"]::before  { background-image: url(../img/ceramique/chawan.webp?v=20261007); }
  .hero-3d[data-vessel="tokkuri"]::before { background-image: url(../img/ceramique/tokkuri.webp?v=20261007); }
  .hero-3d canvas { opacity: 0; transition: opacity 0.9s var(--ease) 0.45s; }
  .hero-3d.vivant::before { opacity: 0; }
  .hero-3d.vivant canvas { opacity: 1; }
  .hero-3d.vivant-seul::before { display: none; }
  body.nav-open .site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: transparent; }
  body.nav-open .site-header::after { opacity: 0; }
  .main-nav .jp { display: inline; font-size: 0.9rem; }
  .main-nav a { font-size: 1.05rem; justify-content: center; gap: 10px; }
  body.nav-open .main-nav { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  .burger { display: block; z-index: 95; }
  .contact-layout, .team-grid { grid-template-columns: 1fr; }
  .detail-row { grid-template-columns: 1fr; gap: 30px; }
  .detail-row:nth-child(even) .detail-text { order: 0; }
  .chr-item { grid-template-columns: 1fr; gap: 16px; }
  .chr-year { position: static; }
}
@media (max-width: 640px) {
  .section, .hero, .page-hero { padding-left: 22px; padding-right: 22px; }
  .header-inner { padding: 16px 22px; gap: 14px; }

  .hero h1 { font-size: clamp(1.15rem, 6.1vw, 1.9rem); }
  .hero { padding-bottom: 128px; }
  .hero-cta .btn { --btn-deco: none; white-space: nowrap; letter-spacing: 0.13em; padding-left: 18px; padding-right: 18px; justify-content: center; }

  .logo { gap: 10px; }
  .logo .seal-mini { width: 30px; height: 30px; font-size: 0.96rem; }
  .logo .word { font-size: 0.84rem; letter-spacing: 0.15em; white-space: nowrap; }
  .logo .sub { font-size: 0.44rem; letter-spacing: 0.18em; white-space: nowrap; }

  .michi, .stats-grid, .voices, .selection, .trio, .footer-grid { grid-template-columns: 1fr; }
  .pied-maison h4 { font-size: 1.45rem; }
  .pied-sur { gap: 10px; letter-spacing: 0.24em; }
  .pied-sur::before, .pied-sur::after { width: 26px; }
  .pied-geant { margin-top: 54px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom .footer-legal { justify-content: center; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .form-row { grid-template-columns: 1fr; }
  .etang { height: 220px; }
  .etang svg { width: max(1056px, 100%); height: 220px; }
}

@media (max-width: 900px) {
  .main-nav {
    justify-content: flex-start; align-items: stretch; gap: 0;
    padding: 92px 28px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto;
    overscroll-behavior: contain;
    border: 0; background: var(--sumi); counter-reset: entree;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .main-nav::before {
    content: "空"; position: fixed; inset: auto -6% -4% auto; background: none;
    font-family: var(--font-display); font-weight: 800; font-size: min(68vw, 420px); line-height: 1;
    color: transparent; -webkit-text-stroke: 1px rgba(201, 169, 98, 0.13);
    opacity: 0; transform: translateY(50px);
    transition: opacity 1s var(--ease), transform 1.2s var(--ease);
  }
  body.nav-open .main-nav::before { opacity: 1; transform: none; }
  .main-nav > a, .main-nav > .nav-branche > a {
    display: flex; align-items: baseline; gap: 16px; width: 100%;
    padding: 15px 2px; border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-display); font-size: 1.7rem; font-weight: 400;
    letter-spacing: 0.01em; text-transform: none; color: var(--washi);
    counter-increment: entree;
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.6s var(--ease), transform 0.7s var(--ease), color 0.4s;
    transition-delay: calc(var(--i, 0) * 60ms + 90ms);
  }
  body.nav-open .main-nav > a, body.nav-open .main-nav > .nav-branche > a { opacity: 1; transform: none; }
  .main-nav > a::before, .main-nav > .nav-branche > a::before {
    content: counter(entree, cjk-ideographic); flex-shrink: 0; width: 22px;
    font-size: 0.82rem; color: var(--kin); transform: translateY(-4px);
  }
  .main-nav > a::after, .main-nav > .nav-branche > a::after { display: none; }
  .main-nav > a .jp, .main-nav > .nav-branche > a .jp { margin-left: auto; font-size: 1.05rem; color: var(--ink-faint); }
  .main-nav > a.active, .main-nav > .nav-branche > a.active { color: var(--kin-light); }
  .main-nav > a.active .jp, .main-nav > .nav-branche > a.active .jp { color: var(--kin); }
  .main-nav > a.nav-cta { margin-left: 0; border: 0; border-bottom: 1px solid var(--line-soft); background: none; color: var(--washi); }
  .main-nav > a.nav-cta.active { color: var(--kin-light); }
  .main-nav > a.nav-cta .jp { color: var(--ink-faint); }
  .main-nav > a.nav-cta.active .jp { color: var(--kin); }
  .main-nav > a.nav-cta:hover { background: none; color: var(--kin-light); }
  .main-nav > a.nav-cta:hover .jp { color: var(--kin); }
  .main-nav > a.nav-cta .fleche { display: none; }
  .logo { position: relative; z-index: 95; }
  .nav-repere { display: none; }
  .nav-pied {
    display: grid; gap: 2px; justify-items: start; margin-top: 0; padding-top: 34px; position: relative;
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.6s var(--ease) 0.5s, transform 0.7s var(--ease) 0.5s;
  }
  body.nav-open .nav-pied { opacity: 1; transform: none; }
  body.nav-depart .main-nav > a:not(.depart), body.nav-depart .main-nav > .nav-branche > a:not(.depart),
  body.nav-depart .nav-pied { opacity: 0.28; transition-delay: 0s; }
  .main-nav > a.depart, .main-nav > .nav-branche > a.depart { position: relative; color: var(--kin-light); }
  .main-nav > a.depart .jp, .main-nav > .nav-branche > a.depart .jp { color: var(--kin); }
  .main-nav > a.depart::after, .main-nav > .nav-branche > a.depart::after {
    content: ""; display: block; position: absolute; left: 0; right: auto; bottom: -1px; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--kin-light) 40%, var(--kin));
    transform-origin: left; animation: navDepart 1.6s var(--ease) both;
  }
  @keyframes navDepart { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .nav-pied-titre { font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--kin); }
  .main-nav .nav-pied a.nav-pied-mail {
    display: inline-block; padding: 8px 0; font-family: var(--font-display); font-size: 1.15rem;
    letter-spacing: 0.01em; text-transform: none; color: var(--washi);
    border-bottom: 1px solid var(--shu);
  }
  .main-nav .nav-pied a.nav-pied-mail::after, .main-nav .nav-pied a.nav-pied-tel::after { display: none; }
  .main-nav .nav-pied a.nav-pied-tel {
    display: inline-block; padding: 8px 0 2px; font-family: var(--font-display); font-size: 1.15rem;
    letter-spacing: 0.04em; text-transform: none; color: var(--washi);
  }
  .nav-pied-villes { margin-top: 8px; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--ink-faint); }
  .main-nav .nav-pied a.nav-pied-rdv {
    display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; min-height: 46px; padding: 0 18px 0 16px;
    background: #17140f; border: 1px solid var(--kin); color: var(--kin-light);
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    transition: border-color 0.4s, background 0.4s;
  }
  .main-nav .nav-pied a.nav-pied-rdv::after { display: none; }
  .nav-pied-rdv .rdv-kj { font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.06em; text-transform: none; color: var(--kin); }
  .nav-pied-rdv .rdv-fleche { letter-spacing: 0; transition: transform 0.4s var(--ease); }
  .main-nav .nav-pied a.nav-pied-rdv:hover, .main-nav .nav-pied a.nav-pied-rdv:active { background: #211b12; border-color: var(--kin-light); }
  .nav-pied-rdv:hover .rdv-fleche, .nav-pied-rdv:active .rdv-fleche { transform: translateX(4px); }

  .burger { width: 44px; height: 44px; border: 1px solid var(--line); transition: border-color 0.4s; }
  .burger span { left: 11px; width: 22px; }
  .burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 21px; } .burger span:nth-child(3) { top: 27px; }
  body.nav-open .burger { border-color: var(--kin); }
  body.nav-open .burger span:nth-child(1), body.nav-open .burger span:nth-child(3) { top: 21px; }
}
@media (max-width: 640px) {
  .site-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
  .site-footer > .pied-bande { grid-column: 1 / -1; grid-row: 1; }
  .site-footer > .footer-grid { grid-column: 1; grid-row: 2; min-width: 0; }
  .site-footer > .footer-bottom { grid-column: 1 / -1; grid-row: 3; }
  .footer-bottom {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px;
    align-items: center; text-align: left; margin-top: 36px; padding-top: 18px; line-height: 1.6;
  }
  .footer-bottom > .footer-legal { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; gap: 0 18px; margin-bottom: 6px; }
  .footer-bottom > :nth-child(1) { grid-column: 1; grid-row: 2; }
  .footer-bottom > :nth-child(3) { grid-column: 1; grid-row: 3; }
  .footer-bottom > .pied-haut { grid-column: 2; grid-row: 2 / 4; }
  .pied-haut > [data-i18n] {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .pied-haut .seal-mini { width: 40px; height: 40px; }
  .site-footer > .pied-geant {
    grid-column: 2; grid-row: 2; align-self: end; margin: 0; max-width: none;
    writing-mode: vertical-rl; white-space: nowrap; text-transform: uppercase;
    transform: rotate(180deg);
    font-size: clamp(3.8rem, 24vw, 7rem); line-height: 1; letter-spacing: 0.06em;
    padding: 0 0 0 0.16em;
  }
  .site-footer > .pied-geant .pied-geant-or {
    padding: inherit;
    background: linear-gradient(180deg, var(--kin-deep) 0%, var(--kin) 28%, var(--kin-light) 50%, var(--kin) 72%, var(--kin-deep) 100%);
    -webkit-background-clip: text; background-clip: text;
    clip-path: inset(0 0 calc(100% - var(--p) * 100%) 0);
    opacity: 0.72;   
  }
  .site-footer > .pied-geant .pied-geant-reste { display: none; }
}
body.nav-fige { position: fixed; left: 0; right: 0; overflow: hidden; }
@media (max-width: 640px) {
  .main-nav { padding-left: 22px; padding-right: 22px; }
  .main-nav > a, .main-nav > .nav-branche > a { font-size: 1.5rem; padding: 13px 2px; }
}
@media (max-width: 900px) and (max-height: 720px) {
  .main-nav { padding-top: 84px; }
  .main-nav > a, .main-nav > .nav-branche > a { padding-top: 9px; padding-bottom: 9px; font-size: 1.35rem; }
  .nav-pied { padding-top: 18px; }
  .main-nav .nav-pied a.nav-pied-mail { font-size: 1.05rem; padding: 5px 0; }
  .main-nav .nav-pied a.nav-pied-tel { font-size: 1.05rem; padding: 5px 0 0; }
  .main-nav .nav-pied a.nav-pied-rdv { margin-top: 14px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
  html { scroll-behavior: auto; }
  .ink-reveal { -webkit-mask-image: none; mask-image: none; }
}

.form-reponse {
  margin-top: 18px; padding: 14px 18px;
  font-size: 0.84rem; line-height: 1.6;
  border-left: 2px solid var(--kin);
  background: rgba(201, 169, 98, 0.06);
  color: var(--ink-soft);
}
.form-reponse.bon { border-left-color: var(--kin); }
.form-reponse.mauvais {
  border-left-color: #a8372a;
  background: rgba(168, 55, 42, 0.08);
}

@keyframes ceramiqueRespire {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-7px) scale(1.012); }
}
@media (prefers-reduced-motion: reduce) { .hero-3d[data-vessel] { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  .pied-heure::before { animation: none; }
  .pied-maison::before, .pied-haut .seal-mini { transition: none; }
}


.suminagashi { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 0 auto; }
.suminagashi svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sn-eau-fond { fill: #0b0a0c; }
.sn-bord { fill: none; stroke: var(--kin); stroke-width: 1.2; opacity: 0.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.suminagashi.in .sn-bord { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-ink) 0.1s; }
.sn-eau { filter: url(#sn-courant); }
.sn-anneau { fill: none; opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; }
.sn-or { stroke: var(--kin); stroke-opacity: 0.58; }
.sn-encre { stroke: #2b2721; stroke-opacity: 0.95; }
.sn-papier { stroke: var(--washi); stroke-opacity: 0.14; }
.suminagashi.in .sn-anneau { animation: sn-goutte 2.6s var(--ease-ink) calc(0.3s + var(--g) * 0.7s + var(--a) * 0.15s) both; }
@keyframes sn-goutte { from { opacity: 0; transform: scale(0); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
.sn-kanji {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5.2rem); color: var(--kin-light);
  text-shadow: 0 0 28px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9); opacity: 0;
}
.suminagashi.in .sn-kanji { animation: sn-pose 1.6s ease 1.7s both, sn-flotte 10s ease-in-out 3.4s infinite; }
@keyframes sn-pose { from { opacity: 0; transform: translateY(12px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes sn-flotte { 50% { transform: translate(3px, -5px) rotate(-1.5deg); } }
@media (max-width: 900px), (hover: none) {
  .sn-eau { filter: none; }
  .suminagashi.in .sn-kanji { animation: sn-pose 1.6s ease 1.7s both; }
}

.inro { position: relative; max-width: 980px; margin: 0 auto; padding: 100px 0 64px; }
.inro-cordes { position: absolute; left: 0; top: 4px; width: 100%; height: 96px; overflow: visible; clip-path: inset(100% 0 0 0); }
.inro-cordes path { fill: none; stroke: var(--kin); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.inro.in .inro-cordes { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease) 0.15s; }
.inro-netsuke {
  position: absolute; left: 50%; top: 0; z-index: 2; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.05rem; color: #2b2010;
  background: radial-gradient(circle at 34% 30%, #f6e8bf, var(--kin) 46%, var(--kin-deep) 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), inset 0 -3px 6px rgba(0, 0, 0, 0.25);
}
.inro-netsuke i { font-style: normal; }
.inro-ojime {
  position: absolute; left: 50%; top: 56px; z-index: 2; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ec6a52, var(--shu) 58%, #4e140e); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  transform: translateY(26px);
}
.inro.in .inro-ojime { transform: none; transition: transform 1s var(--ease) 0.35s; }
.inro-cordon {
  position: absolute; top: 100px; bottom: 34px; width: 3px; z-index: 0;
  background: repeating-linear-gradient(160deg, var(--kin) 0 3px, var(--kin-deep) 3px 6px);
}
.inro-cordon.gauche { left: calc(7% - 1.5px); }
.inro-cordon.droite { right: calc(7% - 1.5px); }
.inro-fusa {
  position: absolute; left: 7%; right: 7%; bottom: 8px; height: 30px; z-index: 0;
  border: 3px solid var(--kin-deep); border-top: 0; border-radius: 0 0 48px 48px; opacity: 0.85;
}
.inro-dan {
  position: relative; z-index: 1; display: grid; grid-template-columns: 58px 1fr; align-items: center; column-gap: 26px;
  padding: 13px 34px; border-radius: 16px / 11px; border: 1px solid rgba(201, 169, 98, 0.3);
  background: linear-gradient(180deg, #1c1714, #100d0c 58%, #0b0909);
  box-shadow: inset 0 1px 0 rgba(236, 217, 168, 0.14), 0 20px 40px -26px rgba(0, 0, 0, 0.95);
  transition: margin-top 0.9s var(--ease) calc(0.5s + var(--k) * 0.12s), padding 1s var(--ease) calc(0.5s + var(--k) * 0.12s);
}
.inro-dan + .inro-dan { margin-top: -1px; }
.inro.in .inro-dan + .inro-dan { margin-top: 22px; }
.inro.in .inro-dan { padding: 28px 44px 30px 34px; }
.inro-dan::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 150px; height: 56px; transform: translateY(-50%);
  pointer-events: none; opacity: 0.28;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'%3E%3Cg fill='none' stroke='%23c9a962' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M4 56 C40 40 70 30 156 6'/%3E%3Cpath d='M40 42 C44 30 52 24 62 20'/%3E%3Cpath d='M78 32 C80 22 88 14 100 12'/%3E%3Cpath d='M112 22 C118 16 126 14 136 14'/%3E%3C/g%3E%3Cg fill='%23c9a962'%3E%3Ccircle cx='62' cy='20' r='2.6'/%3E%3Ccircle cx='100' cy='12' r='2.6'/%3E%3Ccircle cx='136' cy='14' r='2.2'/%3E%3Ccircle cx='24' cy='47' r='1.8'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.inro-kj {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.45rem; color: var(--kin-light);
}
.inro-corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 1.1s var(--ease) calc(0.6s + var(--k) * 0.14s); }
.inro-corps > div { min-height: 0; overflow: hidden; position: relative; z-index: 1; }
.inro.in .inro-corps { grid-template-rows: 1fr; }
.inro-corps h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 1.32rem; color: var(--washi); }
.inro-corps p { margin: 0; max-width: 62ch; color: var(--ink-dim); line-height: 1.75; }
@media (max-width: 640px) {
  .inro { padding-top: 92px; }
  .inro-dan { grid-template-columns: 44px 1fr; column-gap: 16px; padding: 11px 18px; }
  .inro.in .inro-dan { padding: 22px 22px 24px 18px; }
  .inro-kj { width: 42px; height: 42px; font-size: 1.15rem; }
  .inro-dan::after { display: none; }   
  .inro-cordon.gauche { left: calc(4% - 1.5px); }
  .inro-cordon.droite { right: calc(4% - 1.5px); }
  .inro-fusa { left: 4%; right: 4%; }
}

.koban-rangee {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 4vw, 64px);
  max-width: 900px; margin: 70px auto 0;
}
.koban-piece { position: relative; display: flex; flex-direction: column; align-items: center; perspective: 700px; }
.koban {
  position: relative; order: 0; width: min(100%, 172px); aspect-ratio: 0.68; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background:
    linear-gradient(105deg, transparent 36%, rgba(255, 251, 232, 0.62) 50%, transparent 64%) 150% 0 / 260% 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(92, 64, 22, 0.2) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 36% 26%, #fcf1cc 0%, #e6c880 32%, #bb9442 68%, #7a5a22 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 238, 196, 0.42), inset 0 0 0 7px rgba(112, 82, 30, 0.38),
    inset 0 -12px 22px rgba(62, 42, 12, 0.5), inset 0 10px 18px rgba(255, 246, 220, 0.25),
    0 24px 42px -20px rgba(0, 0, 0, 0.95);
  transition: transform 0.7s var(--ease), background-position 1.2s ease;
}
.koban-kj {
  width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(70, 48, 14, 0.55);
  background: rgba(255, 240, 200, 0.22); box-shadow: inset 0 1px 2px rgba(60, 40, 10, 0.35);
  font-family: var(--font-display); font-size: 1rem; line-height: 1; color: #4a3512;
}
.koban .num {
  font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1; color: #3a2a0f;
  text-shadow: 0 1px 0 rgba(255, 244, 210, 0.65), 0 -1px 0 rgba(70, 48, 14, 0.35);
}
.koban-sceau {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(70, 48, 14, 0.5); font-family: var(--font-display); font-size: 0.78rem; line-height: 1; color: #5a4116;
}
.koban-piece::before {
  content: ""; order: 1; width: 70%; height: 18px; margin-top: 12px; border-radius: 50%; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(201, 169, 98, 0.32), transparent 70%);
}
.koban-nom { order: 2; margin-top: 18px; text-align: center; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); opacity: 0; }
.koban-rangee .koban { opacity: 0; }
.koban-rangee.in .koban {
  opacity: 1;
  animation: koban-lance 1.6s cubic-bezier(0.18, 0.7, 0.25, 1) calc(0.2s + var(--k) * 0.28s) backwards,
             koban-reflet 1.3s ease calc(1.65s + var(--k) * 0.28s) backwards;
}
.koban-rangee.in .koban-piece::before { animation: koban-lueur 0.9s ease calc(1.3s + var(--k) * 0.28s) both; }
.koban-rangee.in .koban-nom { opacity: 1; transition: opacity 0.9s ease calc(1.5s + var(--k) * 0.28s); }
.koban-rangee.in .koban-piece:hover .koban { transform: translateY(-6px) rotateY(18deg) rotateX(-5deg); background-position: -40% 0, 0 0, 0 0; }
@keyframes koban-lance {
  0% { opacity: 0; transform: translateY(-70px) rotateY(-1080deg) scale(0.62); }
  20% { opacity: 1; }
  76% { transform: translateY(5px) rotateY(-12deg) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
}
@keyframes koban-reflet { from { background-position: 150% 0, 0 0, 0 0; } to { background-position: -40% 0, 0 0, 0 0; } }
@keyframes koban-lueur { from { opacity: 0; transform: scaleX(0.4); } to { opacity: 1; transform: scaleX(1); } }
@media (max-width: 640px) {
  .koban-rangee { gap: 12px; margin-top: 56px; }
  .koban { gap: 8px; }
  .koban .num { font-size: 1.22rem; }
  .koban-kj { width: 22px; height: 22px; font-size: 0.78rem; }
  .koban-sceau { width: 20px; height: 20px; font-size: 0.62rem; }
  .koban-nom { margin-top: 12px; font-size: 0.58rem; letter-spacing: 0.12em; }
}

.senbon-voie, .senbon-fil { display: none; }
.senbon-etapes { list-style: none; max-width: 820px; margin: 60px auto 0; padding: 0; display: grid; gap: 26px; }
.senbon-etape { border-left: 1px solid var(--line); padding: 4px 0 4px 26px; }
.senbon-no { font-family: var(--font-display); font-size: 1.5rem; color: var(--kin-light); margin-right: 14px; }
.senbon-jalon { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin); }
.senbon-etape h3 { margin: 10px 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; color: var(--washi); }
.senbon-etape p { margin: 0; color: var(--ink-dim); line-height: 1.75; }

.senbon-js .senbon-piste { position: relative; height: calc(var(--n) * 62vh + 100vh); margin: 30px -40px 0; }
.senbon-js .senbon-scene {
  --passe: 340; --large: 360;
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  perspective: 900px; perspective-origin: 50% 42%;
  background: radial-gradient(ellipse 30% 26% at 50% 42%, rgba(201, 169, 98, 0.13), rgba(168, 55, 42, 0.04) 55%, transparent 100%);
}
.senbon-js .senbon-scene::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, var(--sumi) 0%, transparent 16%, transparent 76%, var(--sumi) 100%);
}
.senbon-js .senbon-voie { display: block; position: absolute; inset: 0; z-index: 1; transform-style: preserve-3d; transform: translateZ(calc(var(--cam, 0) * 1px)); }
.senbon-js .senbon-torii {
  --z: calc(var(--i) * -700 - 420);
  position: absolute; left: 50%; top: 42%; width: 520px; height: 460px; margin: -230px 0 0 -260px;
  transform: translateZ(calc(var(--z) * 1px));
  opacity: min(clamp(0, calc(1 - (var(--cam, 0) + var(--z) - var(--passe)) / var(--large)), 1),
               clamp(0, calc((var(--cam, 0) + var(--z) + 3600) / 1400), 1));
}
.senbon-js .senbon-torii.passe { visibility: hidden; }
.senbon-js .senbon-sol {
  position: absolute; left: 50%; top: calc(42% + 230px); width: 640px; height: 6200px; margin-left: -320px;
  transform-origin: 50% 0; transform: rotateX(-90deg);
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(201, 169, 98, 0.45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(180deg, rgba(201, 169, 98, 0.16) 0 2px, transparent 2px 140px),
    linear-gradient(90deg, transparent 9%, rgba(201, 169, 98, 0.3) 9% calc(9% + 2px), transparent calc(9% + 2px) calc(91% - 2px), rgba(201, 169, 98, 0.3) calc(91% - 2px) 91%, transparent 91%);
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 75%); mask: linear-gradient(180deg, #000 0%, transparent 75%);
}
.senbon-torii-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.t-kasagi { fill: #0e0b0a; stroke: var(--kin); stroke-width: 1.4; }
.t-shimaki { fill: #170f0c; stroke: rgba(201, 169, 98, 0.5); stroke-width: 1; }
.t-nuki { fill: #8f3024; }
.t-hashira { fill: #a8372a; stroke: #5e1a13; stroke-width: 2; }
.t-pied { fill: #0b0908; }
.t-gaku { fill: #0d0b0a; stroke: var(--kin); stroke-width: 1.2; }
.t-gaku-kj { fill: var(--kin-light); font-family: var(--font-display); font-size: 30px; }
.senbon-js .senbon-fond .senbon-torii-svg { opacity: 0.75; }
.senbon-js .senbon-etapes {
  position: absolute; z-index: 3; left: 50%; bottom: max(7vh, 36px); width: min(620px, calc(100% - 40px));
  margin: 0; display: block; transform: translateX(-50%);
}
.senbon-js .senbon-etape {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 30px 26px; border: 1px solid var(--line);
  background: rgba(8, 8, 10, 0.86); opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity 0.55s ease, transform 0.7s var(--ease);
}
.senbon-js .senbon-etape::before, .senbon-js .senbon-etape::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; }
.senbon-js .senbon-etape::before { top: -1px; left: -1px; border-top: 1px solid var(--kin); border-left: 1px solid var(--kin); }
.senbon-js .senbon-etape::after { right: -1px; bottom: -1px; border-right: 1px solid var(--kin); border-bottom: 1px solid var(--kin); }
.senbon-js .senbon-etape.actif { opacity: 1; transform: none; pointer-events: auto; }
.senbon-js .senbon-no {
  display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 14px; vertical-align: middle;
  background: var(--shu); color: #f6ece0; font-size: 1.05rem; line-height: 1;
}
.senbon-js .senbon-fil {
  display: flex; flex-direction: column; gap: 14px; position: absolute; z-index: 3;
  right: clamp(16px, 4vw, 48px); top: 50%; transform: translateY(-50%);
}
.senbon-fil i { width: 8px; height: 8px; border: 1px solid var(--kin); transform: rotate(45deg); opacity: 0.45; transition: background 0.4s, opacity 0.4s; }
.senbon-fil i.actif { background: var(--kin); opacity: 1; }
@media (max-width: 640px) {
  .senbon-js .senbon-piste { margin-left: -22px; margin-right: -22px; }
  .senbon-js .senbon-scene { --passe: 240; --large: 260; perspective: 700px; perspective-origin: 50% 36%;
    background: radial-gradient(ellipse 40% 22% at 50% 36%, rgba(201, 169, 98, 0.13), transparent 100%); }
  .senbon-js .senbon-torii { top: 36%; width: 300px; height: 266px; margin: -133px 0 0 -150px; }
  .senbon-js .senbon-sol { top: calc(36% + 133px); width: 380px; margin-left: -190px; }
  .senbon-js .senbon-etapes { bottom: 4vh; width: calc(100% - 32px); }
  .senbon-js .senbon-etape { padding: 18px 20px 20px; }
  .senbon-js .senbon-etape h3 { font-size: 1.18rem; }
  .senbon-js .senbon-etape p { font-size: 0.9rem; line-height: 1.65; }
  .senbon-js .senbon-fil { display: none; }
}

.faq-omikuji { position: relative; max-width: 900px; padding-left: 34px; }
.omikuji-corde {
  position: absolute; left: 0; top: -20px; bottom: 0; width: 13px; border-radius: 7px;
  background: repeating-linear-gradient(28deg, #dcc792 0 7px, #a68a4c 7px 10px, #ead9a8 10px 16px);
  box-shadow: 3px 0 8px rgba(0, 0, 0, 0.5); transform: scaleY(0); transform-origin: 50% 0;
}
.faq-omikuji.in .omikuji-corde { transform: none; transition: transform 1.2s var(--ease) 0.1s; }
.faq-omikuji .faq-item {
  position: relative; margin: 0 0 16px; border: 0; color: #1b1611;
  background: linear-gradient(180deg, #f2e9d6, #e7dcc3); box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.95);
  opacity: 0; transform-origin: 0 50%;
}
.faq-omikuji.in .faq-item { opacity: 1; animation: omikuji-noue 0.85s cubic-bezier(0.3, 1.3, 0.5, 1) calc(0.45s + var(--k) * 0.14s) backwards; }
@keyframes omikuji-noue {
  from { opacity: 0; transform: translateX(-30px) rotate(-3deg) scaleX(0.7); }
  60% { opacity: 1; transform: translateX(4px) rotate(0.8deg) scaleX(1); }
  to { opacity: 1; transform: translateX(0) rotate(0) scaleX(1); }
}
.faq-omikuji .faq-item::after {
  content: attr(data-n); position: absolute; left: 22px; top: 21px; width: 34px; height: 34px; pointer-events: none;
  display: grid; place-items: center; background: var(--shu); color: #f6ece0; font-family: var(--font-display); font-size: 1rem; line-height: 1;
}
.faq-omikuji .faq-q { color: #1b1611; padding: 25px 64px 25px 76px; font-size: 1.06rem; }
.faq-omikuji .faq-q:hover { color: #7e2418; }
.faq-omikuji .faq-q:focus-visible { outline: 1px solid var(--shu); outline-offset: -4px; }
.faq-omikuji .faq-q::before {
  content: ""; position: absolute; left: -40px; top: 50%; width: 22px; height: 34px; transform: translateY(-50%) rotate(-14deg);
  border-radius: 3px; background: repeating-linear-gradient(160deg, #f7f0e1 0 4px, #d6c9ad 4px 7px); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.45);
}
.faq-omikuji .faq-q::after {
  content: ""; right: 26px; width: 13px; height: 13px; font-size: 0; border: 1.5px solid #8a6d33;
  transform: translateY(-50%) rotate(45deg); transition: transform 0.5s var(--ease), background 0.4s, border-color 0.4s;
}
.faq-omikuji .faq-item.open .faq-q::after { transform: translateY(-50%) rotate(225deg); background: var(--shu); border-color: var(--shu); }
.faq-omikuji .faq-a { position: relative; }
.faq-omikuji .faq-a p {
  max-width: none; margin: 0; padding: 18px 96px 28px 76px; color: #3f362b; font-size: 0.95rem; line-height: 1.75;
  background: linear-gradient(90deg, rgba(27, 22, 17, 0.25) 50%, transparent 0) 76px 0 / 10px 1px repeat-x;
  transform-origin: 50% 0;
}
.faq-omikuji .faq-item.open .faq-a p { animation: omikuji-deplie 0.7s var(--ease) both; }
@keyframes omikuji-deplie { from { opacity: 0; transform: perspective(700px) rotateX(-78deg); } to { opacity: 1; transform: perspective(700px) rotateX(0); } }
.faq-omikuji .faq-a::after {
  content: "吉"; position: absolute; right: 26px; bottom: 26px; width: 42px; height: 42px; display: grid; place-items: center;
  border: 2px solid var(--shu); color: var(--shu); font-family: var(--font-display); font-size: 1.35rem; line-height: 1;
  opacity: 0; transform: rotate(-9deg) scale(1.6); pointer-events: none;
}
.faq-omikuji .faq-item.open .faq-a::after { animation: omikuji-kichi 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.4s both; }
@keyframes omikuji-kichi { from { opacity: 0; transform: rotate(-9deg) scale(1.6); } to { opacity: 0.9; transform: rotate(-9deg) scale(1); } }
@media (max-width: 640px) {
  .faq-omikuji { padding-left: 26px; }
  .omikuji-corde { width: 10px; }
  .faq-omikuji .faq-item::after { left: 14px; top: 18px; width: 30px; height: 30px; font-size: 0.9rem; }
  .faq-omikuji .faq-q { padding: 20px 48px 20px 58px; font-size: 1rem; }
  .faq-omikuji .faq-q::before { left: -33px; width: 18px; height: 28px; }
  .faq-omikuji .faq-q::after { right: 18px; }
  .faq-omikuji .faq-a p { padding: 16px 20px 70px 20px; background-position: 20px 0; }
  .faq-omikuji .faq-a::after { right: 18px; bottom: 18px; width: 36px; height: 36px; font-size: 1.15rem; }
}

.senja {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px);
  padding: 46px clamp(18px, 3vw, 42px); border-top: 6px solid #120b07; border-bottom: 6px solid #120b07;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 37px),
    linear-gradient(180deg, #2c1d13, #1b110b 52%, #25170f);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.65);
}
.senja-fuda {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: 268px; padding: 28px 16px 24px; color: #1b1611; text-decoration: none;
  background: linear-gradient(180deg, #efe5cf, #e2d3b4);
  box-shadow: inset 0 0 0 5px #efe5cf, inset 0 0 0 6px #a8372a, inset 0 0 0 9px #efe5cf, inset 0 0 0 10px rgba(168, 55, 42, 0.5),
              0 12px 22px -10px rgba(0, 0, 0, 0.85);
  transform: rotate(var(--r)); transform-origin: 50% 12%; opacity: 0;
  transition: transform 0.45s var(--ease), box-shadow 0.45s;
}
.senja.in .senja-fuda { opacity: 1; animation: senja-colle 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15) calc(0.25s + var(--k) * 0.16s) backwards; }
@keyframes senja-colle {
  from { opacity: 0; transform: rotate(calc(var(--r) + 8deg)) scale(1.24) translateY(-24px); }
  62% { opacity: 1; transform: rotate(var(--r)) scale(0.96) translateY(0); }
  to { opacity: 1; transform: rotate(var(--r)) scale(1) translateY(0); }
}
.senja-fuda::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(118deg, transparent 32%, rgba(255, 255, 255, 0.55) 46%, transparent 60%) 120% 0 / 250% 100% no-repeat;
}
.senja.in .senja-fuda::before { animation: senja-reflet 1.1s ease calc(0.75s + var(--k) * 0.16s) both; }
@keyframes senja-reflet { from { opacity: 1; background-position: 120% 0; } 99% { opacity: 1; } to { opacity: 0; background-position: -30% 0; } }
.senja-fuda::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; pointer-events: none;
  background: linear-gradient(315deg, #24170f 0 50%, #cbb994 50% 100%); box-shadow: -3px -3px 6px rgba(0, 0, 0, 0.25);
  transition: width 0.45s var(--ease), height 0.45s var(--ease);
}
.senja.in .senja-fuda:hover, .senja.in .senja-fuda:focus-visible { transform: rotate(var(--r)) translateY(-5px); }
.senja-fuda:hover::after, .senja-fuda:focus-visible::after { width: 34px; height: 34px; }
.senja-fuda:focus-visible { outline: 2px solid var(--kin); outline-offset: 4px; }
.senja-kj { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: #1b1611; }
.senja-no {
  position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--shu); color: #f6ece0; font-family: var(--font-display); font-size: 0.72rem; line-height: 1;
}
.senja-fuda h3 { margin: 18px 0 10px; font-family: var(--font-display); font-weight: 500; font-size: 1.04rem; line-height: 1.3; color: #1b1611; }
.senja-fuda p { margin: 0; font-size: 0.8rem; line-height: 1.55; color: #4a4034; }
@media (max-width: 1100px) {
  .senja { display: flex; flex-wrap: wrap; justify-content: center; }
  .senja-fuda { flex: 0 0 calc((100% - 2 * clamp(14px, 2vw, 26px)) / 3); }
}
@media (max-width: 640px) {
  .senja { padding: 30px 14px; }
  .senja-fuda { flex-basis: calc((100% - 14px) / 2); }
  .senja-fuda { min-height: 232px; padding: 24px 12px 20px; }
  .senja-kj { font-size: 2.4rem; }
}

@property --trace { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.shippo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1180px; margin: 0 auto; }
.shippo-cel { position: relative; isolation: isolate; min-height: 236px; padding: 34px 32px 32px; }
.shippo-cel::before {
  content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 6px;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 246, 222, 0.22) 50%, transparent 62%) 150% 0 / 250% 100% no-repeat,
    radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.12), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23c9a962' stroke-opacity='.17' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='0' cy='40' r='20'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--email), #0a0808 130%);
  clip-path: circle(0% at 10% 10%);
}
.shippo-cel::after {
  content: ""; position: absolute; inset: 0; border: 1.6px solid var(--kin); border-radius: 8px; pointer-events: none;
  -webkit-mask: conic-gradient(from -90deg, #000 var(--trace), transparent 0); mask: conic-gradient(from -90deg, #000 var(--trace), transparent 0);
}
.shippo.in .shippo-cel::after { --trace: 360deg; transition: --trace 1.2s ease calc(0.15s + var(--k) * 0.16s); }
.shippo.in .shippo-cel::before {
  clip-path: circle(150% at 10% 10%);
  transition: clip-path 1.7s var(--ease-ink) calc(1s + var(--k) * 0.16s);
  animation: shippo-cuisson 1.4s ease calc(2.4s + var(--k) * 0.16s) both;
}
@keyframes shippo-cuisson { from { background-position: 150% 0, 0 0, 0 0, 0 0; } to { background-position: -40% 0, 0 0, 0 0, 0 0; } }
.shippo-no {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.4px solid var(--kin);
  font-family: var(--font-display); font-size: 1.1rem; line-height: 1; color: var(--kin-light);
}
.shippo-cel h3 { margin: 18px 0 10px; font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--washi); }
.shippo-cel p { margin: 0; color: var(--ink-dim); line-height: 1.7; font-size: 0.93rem; }
.shippo-cel > * { opacity: 0; transform: translateY(10px); }
.shippo.in .shippo-cel > * { opacity: 1; transform: none; transition: opacity 0.8s ease calc(1.7s + var(--k) * 0.16s), transform 0.9s var(--ease) calc(1.7s + var(--k) * 0.16s); }
@media (max-width: 1100px) { .shippo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .shippo { grid-template-columns: 1fr; } .shippo-cel { min-height: 0; padding: 28px 24px; } }

@media (prefers-reduced-motion: reduce) {
  .sn-eau { filter: none; }
  .suminagashi .sn-anneau, .suminagashi .sn-kanji { animation: none !important; opacity: 1; transform: none; }
  .suminagashi .sn-bord { stroke-dashoffset: 0; transition: none; }
  .inro .inro-dan, .inro .inro-corps, .inro .inro-ojime, .inro .inro-cordes { transition: none !important; }
  .inro .inro-cordes { clip-path: none; }
  .inro .inro-corps { grid-template-rows: 1fr; }
  .inro .inro-dan + .inro-dan { margin-top: 22px; }
  .inro .inro-dan { padding: 28px 44px 30px 34px; }
  .inro .inro-ojime { transform: none; }
  .koban-rangee .koban, .koban-rangee .koban-piece::before { animation: none !important; }
  .koban-rangee .koban, .koban-rangee .koban-nom, .koban-rangee .koban-piece::before { opacity: 1; }
  .faq-omikuji .faq-item, .faq-omikuji .faq-a p, .faq-omikuji .faq-a::after { animation: none !important; }
  .faq-omikuji .faq-item, .faq-omikuji .faq-a p { opacity: 1; }
  .faq-omikuji .faq-a::after { transform: rotate(-9deg); opacity: 0; }
  .faq-omikuji .faq-item.open .faq-a::after { opacity: 0.9; }
  .faq-omikuji .omikuji-corde { transform: none; transition: none; }
  .senja .senja-fuda, .senja .senja-fuda::before { animation: none !important; }
  .senja .senja-fuda { opacity: 1; }
  .shippo .shippo-cel::before { clip-path: none; animation: none; transition: none; }
  .shippo .shippo-cel::after { --trace: 360deg; transition: none; }
  .shippo .shippo-cel > * { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .inro .inro-dan { padding: 22px 22px 24px 18px; }
}
@media print { .senbon-voie, .senbon-fil { display: none !important; } }


@property --film-arc { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.film-section { padding-bottom: 40px; }
.film-lead { max-width: 820px; margin: 0 auto 64px; text-align: center; }
.film { max-width: 1040px; margin: 0 auto; }
.film-ecran {
  position: relative; aspect-ratio: 16 / 9; background: #050403; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(214, 176, 106, 0.38), 0 0 0 9px #0e0b08, 0 0 0 10px rgba(214, 176, 106, 0.2),
    0 40px 90px rgba(0, 0, 0, 0.55);
}
.film-ecran::before {
  content: ""; position: absolute; inset: -14% -8%; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(214, 176, 106, 0.2), rgba(214, 176, 106, 0.05) 55%, transparent 72%);
}
.film.in .film-ecran::before { animation: film-halo 2.4s ease-out 0.35s both; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #050403; border-radius: 3px; }
.film-lancer[hidden] { display: none; }
.film-lancer {
  position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--washi, #f4efe4); text-align: left; border-radius: 3px; transition: opacity 0.5s ease, visibility 0s linear 0s;
}
.film-lancer:focus-visible { outline: 2px solid var(--kin, #d6b06a); outline-offset: -8px; }
.film-lumiere { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; background: #050403; }
.film-lumiere img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  clip-path: circle(0% at 50% 52%); opacity: 0; filter: blur(18px) brightness(0.3) sepia(0.6);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.film-lumiere::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 58%, rgba(5, 4, 3, 0.42) 100%);
}
.film.in .film-lumiere img { animation: film-projeter 2.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both; }
.film-lancer:hover .film-lumiere img { transform: scale(1.018); }
.film-sceau {
  position: absolute; left: -24px; bottom: -28px; width: 94px; height: 94px; display: grid; place-items: center;
  background: var(--vermillon, #c8422f); color: #f6ece0; border-radius: 7px;
  font-family: var(--serif, serif); font-weight: 700; font-size: 54px; line-height: 1;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(246, 236, 224, 0.16);
  transform: rotate(-4deg); opacity: 0;
}
.film.in .film-sceau { animation: film-sceau 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) 2.35s both; }
.film-sceau::after {
  content: ""; position: absolute; inset: -13px; border-radius: 50%; border: 2px solid var(--kin, #d6b06a);
  -webkit-mask: conic-gradient(from 200deg, #000 var(--film-arc), transparent 0); mask: conic-gradient(from 200deg, #000 var(--film-arc), transparent 0);
  transition: --film-arc 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.film-lancer:hover .film-sceau::after, .film-lancer:focus-visible .film-sceau::after { --film-arc: 330deg; }
.film-lancer:hover .film-sceau { transform: rotate(-4deg) translateY(-3px); transition: transform 0.3s ease; }
.film-etiquette {
  position: absolute; left: 94px; bottom: 22px; display: flex; align-items: center; gap: 12px;
  font-family: var(--sans, sans-serif); font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); opacity: 0; transform: translateX(-10px);
}
.film.in .film-etiquette { animation: film-etiquette 0.6s ease-out 2.75s both; }
.film-tri { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--kin, #d6b06a); }
.film-duree { color: var(--kin, #d6b06a); font-weight: 500; letter-spacing: 0.1em; }
.film-legende { margin-top: 40px; text-align: center; font-size: 14px; letter-spacing: 0.06em; color: var(--ink-faint, #8a8070); }
.film.joue .film-lancer { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
@keyframes film-projeter {
  0% { clip-path: circle(0% at 50% 52%); opacity: 0; filter: blur(18px) brightness(0.3) sepia(0.6); }
  10% { opacity: 0.85; }
  16% { opacity: 0.35; }
  24% { opacity: 1; }
  30% { opacity: 0.7; }
  36% { opacity: 1; }
  58% { clip-path: circle(46% at 50% 52%); filter: blur(7px) brightness(0.85) sepia(0.25); }
  100% { clip-path: circle(80% at 50% 50%); opacity: 1; filter: blur(0) brightness(1) sepia(0); }
}
@keyframes film-halo { 0% { opacity: 0; } 14% { opacity: 0.8; } 22% { opacity: 0.3; } 34% { opacity: 1; } 100% { opacity: 0.75; } }
@keyframes film-sceau {
  0% { opacity: 0; transform: rotate(-4deg) scale(1.9); }
  60% { opacity: 1; transform: rotate(-4deg) scale(0.92); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}
@keyframes film-etiquette { to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .film-lead { margin-bottom: 48px; }
  .film-sceau { width: 74px; height: 74px; font-size: 42px; left: -12px; bottom: -22px; }
  .film-etiquette { left: 76px; bottom: 16px; font-size: 13px; gap: 10px; }
}
@media (max-width: 640px) {
  .film-ecran { box-shadow: 0 0 0 1px rgba(214, 176, 106, 0.38), 0 0 0 6px #0e0b08, 0 0 0 7px rgba(214, 176, 106, 0.2), 0 24px 50px rgba(0, 0, 0, 0.5); }
  .film-sceau { width: 56px; height: 56px; font-size: 32px; left: -8px; bottom: -18px; border-radius: 5px; }
  .film-sceau::after { inset: -9px; }
  .film-etiquette { left: 58px; bottom: 10px; font-size: 11px; letter-spacing: 0.1em; gap: 8px; }
  .film-tri { border-width: 5px 0 5px 9px; }
  .film-legende { margin-top: 30px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-lumiere img { clip-path: none; opacity: 1; filter: none; }
  .film.in .film-lumiere img, .film.in .film-ecran::before, .film.in .film-sceau, .film.in .film-etiquette { animation: none; }
  .film-sceau, .film-etiquette { opacity: 1; transform: rotate(-4deg); }
  .film-etiquette { transform: none; }
  .film-ecran::before { opacity: 0.75; }
}