/* ═══ チケットリアライブ ・ Yuzuru Hanyu “REALIVE” an ICE STORY project 佐賀公演 ═══
   Page d'accueil seulement : tokens, en-tête, héros, sections, titres, flow, galerie, final, pied,
   boutons de la page, bandeau #mq, barre mobile, couche #fx, dates passées (.is-done). Tout ce que
   génère app.js (cartes DAY, plans, modale, panier, toast, cartes de 席種 et de salle, FAQ) est stylé
   par styles-app.css (voir _contract/dom-hooks.md).
   DA « REALIVE, la glace et la nuit » : le diptyque officiel (blanc glacé à gauche, noir profond à
   droite) se prolonge dans toute la page : sections claires (glace, grain, rayures de lames très
   pâles) et sections nuit en alternance, un seul trait fin (le cercle), lettrage serif large (Cinzel,
   écho du lettrage officiel), Zen Old Mincho pour les titres (fonte du site officiel), Oswald pour
   les dates, heures et prix, Noto Sans JP pour le texte courant.
   Règle : aucune couleur en dur hors de :root. Les teintes dérivées sont des color-mix() des variables
   du contrat (§3). Les plans SVG d'app.js lisent ces variables : hex à 6 chiffres (sauf --line, --line-d). */

*,*::before,*::after{box-sizing:border-box}

:root{
  color-scheme:light;
  /* contrat §3 (hex à 6 chiffres : les plans SVG d'app.js et fx.js les lisent) */
  --ink:#0A0C0F;
  --night:#12161B;
  --char:#1E242B;
  --steel:#3A4350;
  --slate:#5E6875;
  --mist:#9AA6B4;
  --frost:#C1CCDF;
  --peri:#7083AE;
  --deep:#2F7C99;
  --glacier:#8FD0DE;
  --ice:#EEF3F5;
  --snow:#F7FAFB;
  --paper:#FFFFFF;
  --line:#0A0C0F1A;
  --line-d:#FFFFFF1F;
  /* dérivés */
  --line2:color-mix(in srgb,var(--ink) 30%,transparent);
  --line-d2:color-mix(in srgb,var(--paper) 30%,transparent);
  --fg2:color-mix(in srgb,var(--paper) 76%,transparent);
  --fg3:color-mix(in srgb,var(--paper) 52%,transparent);
  --scrim:color-mix(in srgb,var(--ink) 74%,transparent);
  --glass:color-mix(in srgb,var(--snow) 93%,transparent);
  --glass-d:color-mix(in srgb,var(--ink) 84%,transparent);
  /* la glace du visuel officiel (fond de la moitié claire, un peu plus cyan que --ice) */
  --kv-l:color-mix(in srgb,var(--glacier) 14%,var(--ice));
  /* grain argentique (bruit SVG, noir ou blanc, sans couleur) */
  --grain-k:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.6 1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* typo */
  --display:"Cinzel","Zen Old Mincho",Georgia,"Times New Roman",serif;
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --num:"Oswald","Noto Sans JP",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --sans:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  /* mise en page */
  --wrap:1240px;
  --gut:40px;
  --hdr:72px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.62,0,.24,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink)}
body{
  margin:0;background:var(--ice);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.95;letter-spacing:.04em;font-feature-settings:"palt" 1;font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip;
}
img,svg,video{max-width:100%}
img{height:auto}
img.nf{visibility:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.5}
h1,h2,h3,h4,.final h2,.galhead__tx h2{word-break:auto-phrase}
p{margin:0;text-wrap:pretty}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;letter-spacing:inherit}
select{font:inherit;color:inherit}
figure{margin:0}
[hidden]{display:none!important}
::selection{background:var(--deep);color:var(--paper)}
:focus-visible{outline:1.5px solid var(--deep);outline-offset:4px}
.is-dark :focus-visible,.hero :focus-visible,.ft :focus-visible,.mbar :focus-visible{outline-color:var(--glacier)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* couche glace (fx.js) : poussière, traces de lames, éclat du cercle, grain.
   Au-dessus des sections, sous l'en-tête, la barre mobile et la modale, sans gêner le clic */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:35;pointer-events:none;display:block}
main{position:relative;z-index:2;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.br-sp{display:none}

/* ─────────── Titres : petit mark (3 cercles) + libellé Cinzel espacé, grand titre en Zen Old Mincho ─────────── */
.ttl{display:flex;flex-direction:column;align-items:flex-start;gap:20px;font-weight:400}
.ttl__k{display:inline-flex;align-items:center;gap:16px;font-family:var(--display);font-weight:500;font-size:12.5px;line-height:1;letter-spacing:.46em;text-transform:uppercase;color:var(--deep)}
.ttl__k::before{content:"";flex:0 0 auto;width:30px;height:15px;background:currentColor;
  -webkit-mask:url(img/mark-ink.svg) center/contain no-repeat;mask:url(img/mark-ink.svg) center/contain no-repeat}
.ttl__k::after{content:"";flex:0 0 auto;width:40px;height:1px;background:currentColor;opacity:.45}
.ttl__ja{font-family:var(--mincho);font-weight:600;font-size:clamp(30px,3.4vw,48px);line-height:1.34;letter-spacing:.1em;color:var(--ink)}
.is-dark .ttl__k{color:var(--glacier)}
.is-dark .ttl__ja{color:var(--paper)}

.shead{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:24px 64px;align-items:end;
  margin-bottom:72px;padding-bottom:38px}
/* un seul trait fin : un court segment plein, puis le filet */
.shead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--ink) 0 56px,var(--line) 56px)}
.shead__lead{color:var(--slate);font-size:14.5px;line-height:2.05}
.is-dark .shead::after{background:linear-gradient(90deg,var(--paper) 0 56px,var(--line-d) 56px)}
.is-dark .shead__lead{color:var(--mist)}

/* ─────────── Boutons : angles droits ; sur clair encre pleine, sur sombre blanc plein ─────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:52px;padding:12px 30px;border:1px solid var(--paper);border-radius:0;
  background:var(--paper);color:var(--ink);font-family:var(--mincho);font-weight:600;font-size:14.5px;
  letter-spacing:.16em;line-height:1.4;text-align:center;
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.btn svg{flex:0 0 auto;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:disabled,.btn:disabled:hover{opacity:.35;cursor:not-allowed}
/* sur sombre (par défaut) : blanc plein, survol cyan glacier */
.btn--primary,.btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--primary:hover,.btn--light:hover{background:var(--glacier);border-color:var(--glacier);color:var(--ink)}
.btn--ghost,.btn--line,.btn--snowline{background:transparent;color:var(--paper);border-color:var(--line-d2)}
.btn--ghost:hover,.btn--line:hover,.btn--snowline:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
/* sur clair : encre pleine, survol bleu glacier profond */
.btn--ink,.is-light .btn--primary,.is-light .btn--light{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--ink:hover,.is-light .btn--primary:hover,.is-light .btn--light:hover{background:var(--deep);border-color:var(--deep);color:var(--paper)}
.is-light .btn--ghost,.is-light .btn--line{color:var(--ink);border-color:var(--line2)}
.is-light .btn--ghost:hover,.is-light .btn--line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--lg{min-height:58px;padding:14px 36px;font-size:15px}
.btn--full{width:100%;margin-top:14px}

/* ─────────── Cadre fin (remise des billets) ─────────── */
.win{--wb:var(--line2);position:relative;border:1px solid var(--wb)}
.win__bar{display:flex;align-items:center;gap:14px;height:36px;padding:0 18px;border-bottom:1px solid var(--wb);
  font-family:var(--display);font-weight:500;font-size:11px;line-height:1;letter-spacing:.4em;text-transform:uppercase;color:var(--deep)}
.win__bar::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:currentColor}

/* ─────────── En-tête : verre givré sur la page, transparent sur le héros ─────────── */
.hdr{position:sticky;top:0;z-index:40;height:var(--hdr);background:var(--glass);border-bottom:1px solid var(--line);color:var(--ink);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  transition:background-color .6s var(--ease),border-color .6s var(--ease),color .6s var(--ease)}
.hdr__in{max-width:1680px;height:100%;margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;flex:0 0 auto;line-height:1;transition:opacity .6s var(--ease),visibility .6s}
.brand__lk{display:block;height:13px;width:auto;max-width:none}
.brand__sm{display:none;align-items:center;gap:10px}
.brand__sm img{display:block;width:auto;max-width:none}
.brand__sm img:first-child{height:15px}
.brand__sm img:last-child{height:14px}
.nav{margin-left:auto;display:flex;gap:36px;font-size:12.5px;font-weight:500;letter-spacing:.18em;color:var(--slate);transition:opacity .6s var(--ease),visibility .6s}
.nav a{position:relative;padding:6px 0;white-space:nowrap;transition:color .35s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .45s var(--ease)}
.nav a:hover::after{right:0}
.cartbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;height:42px;padding:0 8px 0 18px;margin-left:0;
  border:1px solid var(--line2);font-family:var(--num);font-weight:400;font-size:12px;letter-spacing:.3em;text-transform:uppercase;line-height:1;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);-webkit-tap-highlight-color:transparent}
.cartbtn em{font-style:normal;min-width:26px;height:26px;padding:0 6px;display:grid;place-items:center;letter-spacing:0;
  background:var(--ink);color:var(--paper);font-family:var(--num);font-weight:500;font-size:13px;font-variant-numeric:tabular-nums;line-height:1;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.cartbtn:hover{border-color:var(--ink)}
/* panier non vide (classe posée par app.js) : la pastille passe au bleu glacier */
.cartbtn.has-items{border-color:var(--deep)}
.cartbtn.has-items em{background:var(--deep);color:var(--paper)}
/* sur le héros : en-tête transparent, seul le panier reste (le lettrage officiel est dans le héros) */
body.on-hero .hdr{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--paper)}
body.on-hero .brand,body.on-hero .nav{opacity:0;visibility:hidden}
body.on-hero .cartbtn{border-color:var(--line-d2)}
body.on-hero .cartbtn em{background:var(--paper);color:var(--ink)}
body.on-hero .cartbtn:hover{border-color:var(--paper)}
body.on-hero .cartbtn.has-items em{background:var(--glacier);color:var(--ink)}

/* ─────────── Héros : le diptyque officiel, la glace et la nuit ───────────
   Paysage : le champ est coupé en deux à 50 % (glace à gauche, nuit à droite) ; le diptyque officiel
   (16:9, couture exactement au milieu) est posé dessus, centré, fondu sur ses bords : il paraît plein
   écran à toutes les proportions sans jamais rogner un visage. Le lettrage officiel horizontal est dans
   la rangée de l'en-tête, en mix-blend-mode: difference, le mark (3 cercles) posé sur la couture :
   « YUZURU HANYU » noir sur la glace, « REALIVE AN ICE STORY PROJECT » blanc sur la nuit. Dessous, sur
   la couture et sous les visages : SAGA, les dates, la salle et les deux boutons, en miroir.
   Portrait / étroit : diptyque empilé (nuit en haut, glace en bas), lettrage empilé dans le noir du haut,
   textes et boutons en encre sur la glace en bas.
   Variables : --hh hauteur du héros, --ftop haut du diptyque, --band place réservée sous lui (moins
   --ov, la partie fondue qui passe sous les textes), --fh hauteur du diptyque. */
.hero{--hh:max(640px,100vh);--ftop:var(--hdr);--band:252px;--ov:78px;
  --fh:min(calc(100vw * 9 / 16),calc(var(--hh) - var(--ftop) - var(--band) + var(--ov)));
  --lkw:min(1080px,calc((50vw - 200px) / .6123));
  position:relative;z-index:2;isolation:isolate;overflow:hidden;margin-top:calc(-1 * var(--hdr));
  min-height:var(--hh);display:flex;flex-direction:column;background:var(--ink);color:var(--paper)}
@supports (height:1svh){.hero{--hh:max(640px,100svh)}}
.hero__media{position:absolute;inset:0;z-index:-3;overflow:hidden;background:linear-gradient(90deg,var(--kv-l) 50%,var(--ink) 50%)}
.hero__frame{position:absolute;left:0;right:0;top:var(--ftop);margin:0 auto;height:var(--fh);width:calc(var(--fh) * 16 / 9);
  transform-origin:50% 42%;animation:kb 52s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 9%,var(--ink) 91%,transparent),linear-gradient(180deg,transparent,var(--ink) 3%,var(--ink) 76%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,var(--ink) 9%,var(--ink) 91%,transparent),linear-gradient(180deg,transparent,var(--ink) 3%,var(--ink) 76%,transparent);
  mask-composite:intersect}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.035)}}
.hero__ph,.hero__ph img{display:block;width:100%;height:100%}
.hero__ph img{object-fit:cover}
/* le fin cercle : redessiné exactement sur ceux du visuel, il se trace lentement à l'arrivée */
.hero__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hero__ring--t{display:none}
.rg{fill:none;stroke:var(--paper);stroke-width:2.3;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:.82;
  animation:ring 4.2s var(--ease-io) .45s forwards}
.rg--l{stroke-width:2.6;opacity:.95;animation-delay:.6s}
@keyframes ring{to{stroke-dashoffset:0}}
/* repère de la couture (lu par fx.js : la poussière ne tombe que sur la moitié nuit) */
.hero__seam{position:absolute;left:50%;top:0;bottom:0;width:1px;pointer-events:none}
/* repère (invisible) de la partie haute du héros : tant qu'il passe sous l'en-tête, l'en-tête reste transparent */
.hero__lit{position:absolute;left:0;right:0;top:0;height:56%;z-index:-4;pointer-events:none}

/* lettrage officiel : blanc + difference = noir sur la glace, blanc sur la nuit (comme l'affiche) */
.hero__lock{position:absolute;left:0;right:0;top:0;height:var(--hdr);margin:0;font-weight:400;line-height:0;pointer-events:none}
.hero__lk{position:absolute;top:50%;left:calc(50% - var(--lkw) * .3877);width:var(--lkw);height:auto;max-width:none;
  transform:translateY(-50%);mix-blend-mode:difference}
.hero__logo{display:none}

.hero__info{position:relative;margin-top:auto;padding:0 var(--gut) clamp(22px,4.6vh,46px);display:flex;flex-direction:column;align-items:stretch}
/* chaque ligne est coupée en deux à la couture : à gauche (glace) calée à droite, à droite (nuit) calée à gauche */
.hero__city,.hero__date,.hero__kind{color:var(--paper);mix-blend-mode:difference}
.hero__city{display:grid;grid-template-columns:1fr 1fr;font-family:var(--display);font-weight:500;font-size:clamp(40px,4.3vw,66px);line-height:.98;letter-spacing:.34em}
.hero__city span:nth-child(2){text-align:right;margin-right:-.17em}
.hero__city span:nth-child(3){text-align:left;padding-left:.17em}
.hero__date{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;margin-top:16px;
  font-family:var(--num);font-weight:300;font-size:clamp(16px,1.42vw,21px);line-height:1.3;letter-spacing:.2em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hero__date span:first-child{text-align:right;margin-right:-.2em}
.hero__date span:last-child{text-align:left}
.hero__date small{margin-left:.35em;font-size:.72em;font-weight:400;letter-spacing:.24em}
.hero__date i{font-style:normal;padding:0 .7em;letter-spacing:0}
.hero__kind{display:grid;grid-template-columns:1fr 1fr;column-gap:1.4em;margin-top:8px;
  font-family:var(--mincho);font-weight:600;font-size:clamp(13.5px,1.02vw,15px);line-height:1.6;letter-spacing:.3em;white-space:nowrap}
.hero__kind span:first-child{text-align:right;margin-right:-.3em}
.hero__kind span:last-child{text-align:left}
.hero__cta{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;margin-top:clamp(20px,3.2vh,30px)}
.hero__cta .btn{min-width:min(240px,100%);white-space:nowrap}
.hero__cta .btn:first-child{justify-self:end}
.hero__cta .btn:last-child{justify-self:start}

/* ─────────── Bande défilante (texte écrit par app.js dans #mq) ─────────── */
.mq{position:relative;z-index:2;overflow:hidden;padding:17px 0 15px;background:var(--ink);color:var(--fg2);
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.mq__track{display:block;width:max-content;white-space:nowrap;font-family:var(--display);font-weight:400;font-size:15px;line-height:1.3;letter-spacing:.2em;
  animation:mq 150s linear infinite}
@keyframes mq{from{transform:none}to{transform:translateX(-50%)}}

/* ─────────── Sections : la glace (clair, grain, rayures pâles) et la nuit ─────────── */
.sec{position:relative;z-index:2;isolation:isolate;padding:168px 0;scroll-margin-top:var(--hdr)}
.is-light{color:var(--ink)}
.is-dark{color:var(--paper)}
.sec--ice{background:var(--ice)}
.sec--snow{background:linear-gradient(180deg,var(--ice) 0,var(--snow) 420px,var(--snow) calc(100% - 420px),var(--ice) 100%)}
.sec--ink{background:var(--ink)}
/* glace : la texture de patinoire (rayures de lames) très pâle, puis le grain */
.sec--ice::before,.sec--snow::before,.sec--ink::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url(img/tex-ice.jpg) center/cover no-repeat;opacity:.4;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(180deg,transparent,var(--ink) 220px,var(--ink) calc(100% - 220px),transparent);
  mask-image:linear-gradient(180deg,transparent,var(--ink) 220px,var(--ink) calc(100% - 220px),transparent)}
.sec--snow::before{opacity:.22}
.sec--ink::before{background-image:url(img/tex-ice-dark.jpg);opacity:.11;mix-blend-mode:screen}
/* deux sections du même ton à la suite : un peu moins d'air entre elles */
.sec.is-light+.sec.is-light,.sec.is-dark+.sec.is-dark{padding-top:96px}
.sec--ice::after,.sec--snow::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain-k);background-size:220px;opacity:.07}
.sec--ink::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain-w);background-size:220px;opacity:.035}
.is-light ::selection{background:var(--ink);color:var(--paper)}

/* ─────────── お申し込みの流れ ─────────── */
.flow{overflow:clip}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stp{position:relative;padding:4px 32px 8px}
.stp:first-child{padding-left:0}
.stp:last-child{padding-right:0}
.stp+.stp{border-left:1px solid var(--line)}
.stp__n{display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:400;font-size:44px;line-height:1;letter-spacing:.04em;color:var(--deep)}
.stp__n::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--deep) 45%,transparent),transparent)}
.stp h3{margin-top:28px;font-family:var(--mincho);font-weight:700;font-size:19px;line-height:1.5;letter-spacing:.08em;color:var(--ink)}
.stp h3 small{display:block;margin-top:3px;font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.12em;color:var(--slate)}
.stp p{margin-top:12px;color:var(--slate);font-size:14px;line-height:2}
.note{margin-top:76px;background:color-mix(in srgb,var(--paper) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.note__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 48px;padding:22px 26px 24px}
.note__in p{font-size:13.5px;line-height:2;color:var(--slate)}
.note__in p:first-child{color:var(--ink);font-weight:500}
.facts3{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--ink)}
.facts3 li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:30px 14px 26px;text-align:center}
.facts3 li+li{border-left:1px solid var(--line)}
.facts3 b{display:flex;align-items:baseline;gap:5px;font-family:var(--mincho);font-weight:700;font-size:15px;letter-spacing:.06em;white-space:nowrap;line-height:52px;color:var(--ink)}
.facts3 b span{font-family:var(--num);font-weight:300;font-size:50px;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.facts3 li>span{font-size:12.5px;color:var(--slate);letter-spacing:.08em;line-height:1.7}

/* ─────────── 公演一覧 (雪の白 ; cartes DAY : styles-app.css) ─────────── */
.fcount{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;margin:-28px 0 30px;font-size:12.5px;letter-spacing:.12em;color:var(--slate)}
.fcount b{margin-right:6px;font-family:var(--num);font-weight:400;font-size:26px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.fcount span{display:inline-flex;align-items:center}
.fcount span::before{content:"";display:inline-block;width:1px;height:11px;margin:0 16px;background:var(--line2)}

/* ─────────── 席種と価格 (nuit, le plan à gauche et les 席種 à droite) ─────────── */
.seat{overflow:clip}
.seat::before{background-position:center 30%}
.points{list-style:none;margin:0 0 88px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-d)}
.points li{padding:34px 40px 6px}
.points li:first-child{padding-left:0}
.points li:last-child{padding-right:0}
.points li+li{border-left:1px solid var(--line-d)}
.points__n{display:block;font-family:var(--display);font-weight:400;font-size:22px;line-height:1;letter-spacing:.12em;color:var(--glacier)}
.points h3{margin-top:18px;font-family:var(--mincho);font-weight:700;font-size:19px;letter-spacing:.06em}
.points p{margin-top:12px;font-size:13.5px;line-height:2.05;color:var(--mist)}
.seat__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:56px;align-items:start}
.seat__plan{position:sticky;top:calc(var(--hdr) + 28px);min-width:0}
.seat__cap{display:flex;align-items:center;gap:14px;margin-bottom:16px;font-family:var(--display);font-weight:500;font-size:11.5px;line-height:1;letter-spacing:.4em;text-transform:uppercase;color:var(--paper)}
.seat__cap span{color:var(--mist)}
.seat__cap span::after{content:"";display:inline-block;width:28px;height:1px;margin-left:14px;vertical-align:middle;background:var(--line-d2)}
.seat__zones{min-width:0}

/* ─────────── Galerie : noir et blanc froid, les couleurs reviennent au survol (aucune légende) ─────────── */
.gal-sec{overflow:clip;padding-bottom:150px}
.gal-sec::before{background-position:70% 40%;opacity:.16}
.galhead{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 72px;align-items:end;margin-bottom:76px}
.galhead__k{grid-column:1/-1;margin-bottom:6px}
.galhead__en{font-family:var(--display);font-weight:400;font-size:clamp(46px,5.4vw,82px);line-height:1.04;letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.galhead__en span{display:block}
.galhead__en span:nth-child(2){padding-left:1.1em;color:var(--frost)}
.galhead__en span:nth-child(3){padding-left:2.2em;color:transparent;-webkit-text-stroke:1px var(--glacier)}
.galhead__tx h2{font-family:var(--mincho);font-weight:600;font-size:clamp(25px,2.5vw,36px);line-height:1.65;letter-spacing:.1em}
.galhead__tx p{margin-top:20px;color:var(--mist);font-size:14.5px;line-height:2.1}

/* rangées « justifiées » : chaque photo garde ses proportions, toutes à la même hauteur dans la rangée */
.gal{display:flex;flex-direction:column;gap:14px}
.gal__row{display:flex;gap:14px}
.g{position:relative;overflow:hidden;flex:calc(var(--ar)) 1 0;min-width:0;aspect-ratio:var(--ar);background:var(--night);isolation:isolate}
.g img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.98);
  transition:filter 1.6s var(--ease),transform 2.4s var(--ease)}
/* voile glacier : le gris devient froid (comme l'ombre cyan du visuel), puis un grain argentique */
.g__veil{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity 1.6s var(--ease);
  background:linear-gradient(165deg,color-mix(in srgb,var(--glacier) 70%,transparent),color-mix(in srgb,var(--deep) 80%,transparent));
  mix-blend-mode:color;opacity:.34}
.g::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:var(--grain-w);background-size:220px;opacity:.06;mix-blend-mode:screen}
@media (hover:hover){
  .g:hover img{filter:none;transform:scale(1.02)}
  .g:hover .g__veil{opacity:0}
}
.g--a img{object-position:50% 50%}
.g--e img{object-position:50% 60%}

/* les deux jours, en diptyque : glace et nuit */
.days{display:grid;grid-template-columns:1fr 1fr;margin-top:14px}
.day{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;padding:52px 24px 48px}
.day--ice{background:var(--ice);color:var(--ink)}
.day--ice::before{content:"";position:absolute;inset:0;z-index:-1;background:url(img/tex-ice.jpg) 30% 40%/cover;opacity:.55;mix-blend-mode:multiply;pointer-events:none}
.day--night{background:var(--night);color:var(--paper);border:1px solid var(--line-d);border-left:0}
.day__k{font-family:var(--display);font-weight:500;font-size:12px;line-height:1;letter-spacing:.5em;text-indent:.5em;text-transform:uppercase;color:var(--deep)}
.day--night .day__k{color:var(--glacier)}
.day__d{display:flex;align-items:baseline;gap:.3em;margin-top:18px;font-family:var(--num);font-weight:300;font-size:clamp(54px,6vw,92px);line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.day__d small{font-size:.24em;font-weight:400;letter-spacing:.26em}
.day__v{margin-top:16px;font-family:var(--mincho);font-weight:600;font-size:14px;letter-spacing:.2em;line-height:1.7}
.day__v span{display:block;font-family:var(--num);font-weight:300;font-size:13px;letter-spacing:.14em;color:var(--slate)}
.day--night .day__v span{color:var(--mist)}
.day .btn{margin-top:26px;min-height:46px;padding:10px 26px;font-size:13.5px;white-space:nowrap}
/* 公演終了（app.js が is-done を付ける）: ボタンは「公演終了」に変わり、押すと公演一覧へ */
.day .btn.is-done{background:transparent;color:var(--slate);border-color:var(--slate);font-size:0;letter-spacing:0}
.day .btn.is-done::before{content:"公演終了";font-size:13.5px;letter-spacing:.16em}
.day:has(.btn.is-done) .day__d{color:var(--slate)}
.gal__more{display:flex;justify-content:center;margin-top:64px}

/* ─────────── 会場 (glace ; carte de salle et plan : styles-app.css) ─────────── */
.venues{overflow:clip}

/* ─────────── FAQ (les <details class="faq"> : styles-app.css) ─────────── */
.faqwrap{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:88px;align-items:start}
.faqhead{position:sticky;top:calc(var(--hdr) + 40px);display:block;margin:0;padding:0}
.faqhead::after{display:none}
.faqhead .shead__lead{margin-top:28px}
.faqhead .ttl__ja{font-size:clamp(30px,3.1vw,44px)}

/* ─────────── Dernier appel : la patinoire dans le noir, un projecteur qui respire (vidéo) ─────────── */
.final{position:relative;z-index:2;isolation:isolate;overflow:hidden;padding:210px 0 190px;background:var(--ink);color:var(--paper);text-align:center;scroll-margin-top:var(--hdr)}
.final__media{position:absolute;inset:0;z-index:-2;background:var(--ink)}
.final__bg,.final__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.final__vid{opacity:0;transition:opacity 2s var(--ease)}
.final__vid.on{opacity:1}
.final::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--ink) 0,color-mix(in srgb,var(--ink) 34%,transparent) 22%,color-mix(in srgb,var(--ink) 40%,transparent) 64%,var(--ink) 100%),
    radial-gradient(ellipse 40% 36% at 50% 46%,color-mix(in srgb,var(--ink) 58%,transparent),transparent)}
.final__in{display:flex;flex-direction:column;align-items:center}
.final__logo{display:block;width:min(300px,62vw);height:auto}
.final__en{margin-top:34px;font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;color:var(--fg2)}
.final__en i{font-style:normal;margin:0 .2em;color:var(--glacier)}
.final h2{margin-top:36px;font-family:var(--mincho);font-weight:600;font-size:clamp(30px,3.6vw,50px);line-height:1.5;letter-spacing:.14em;text-indent:.14em}
.final__sub{margin-top:12px;font-size:13.5px;letter-spacing:.14em;color:var(--fg2)}
.final h2,.final__sub,.final__en{text-shadow:0 0 22px var(--ink),0 0 6px color-mix(in srgb,var(--ink) 80%,transparent)}
.final .btn{margin-top:44px}

/* ─────────── Pied de page ─────────── */
.ft{position:relative;z-index:2;padding:100px 0 34px;background:var(--ink);border-top:1px solid var(--line-d);text-align:center;color:var(--paper)}
.ft__logo{display:inline-block;line-height:0}
.ft__logo img{display:block;width:min(170px,44vw);height:auto}
.ft__name{margin-top:30px;font-family:var(--mincho);font-weight:600;font-size:13px;letter-spacing:.24em;text-indent:.24em;color:var(--mist)}
.ft__name span{margin-left:1em;font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.32em;color:var(--fg3)}
.ftlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 40px;margin-top:44px;font-size:12.5px;letter-spacing:.12em;color:var(--mist)}
.ftlinks a{position:relative;padding:2px 0;transition:color .35s var(--ease)}
.ftlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--glacier);transition:right .45s var(--ease)}
.ftlinks a:hover{color:var(--paper)}
.ftlinks a:hover::after{right:0}
.ftcopy{margin-top:42px;padding-top:24px;border-top:1px solid var(--line-d);font-size:11px;letter-spacing:.18em;color:var(--slate)}
.ftcopy span{margin-left:1.2em;font-family:var(--display);font-size:10.5px;letter-spacing:.28em}

/* ─────────── Barre d'achat mobile ─────────── */
.mbar{position:fixed;z-index:45;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:none;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 10px 10px 18px;background:var(--glass-d);color:var(--paper);border:1px solid var(--line-d);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 40px color-mix(in srgb,var(--ink) 40%,transparent);
  transform:translateY(160%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s}
.mbar.on{transform:none;visibility:visible;transition:transform .5s var(--ease)}
.mbar__tx{min-width:0;line-height:1.4}
.mbar__tx b{display:flex;align-items:center;gap:8px;font-family:var(--mincho);font-size:14px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.mbar__tx b::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--glacier)}
.mbar__tx span{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--fg2);white-space:nowrap}
.mbar .btn{flex:0 0 auto;min-height:44px;padding:8px 20px;font-size:13px}

/* ─────────── Apparitions : comme une buée qui se dissipe sur la glace (fondu + flou) ─────────── */
.rise{animation:buee 2.2s var(--ease) both}
@keyframes buee{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:blur(0)}}
.hero__lk.rise{animation-delay:.25s}
.js .rv{opacity:0;filter:blur(10px);transform:translate3d(0,16px,0);
  transition:opacity 1.5s var(--ease),filter 1.8s var(--ease),transform 1.8s var(--ease)}
.js .rv.in{opacity:1;filter:none;transform:none}
.steps .rv:nth-child(2),.points .rv:nth-child(2){transition-delay:.12s}
.steps .rv:nth-child(3),.points .rv:nth-child(3){transition-delay:.24s}
.steps .rv:nth-child(4){transition-delay:.36s}
.gal__row .rv:nth-child(2){transition-delay:.14s}
.gal__row .rv:nth-child(3){transition-delay:.28s}

/* ═══════════ Responsive ═══════════ */
/* écrans paysage pas très larges : le lettrage descend sous la rangée de l'en-tête (le panier reste libre) */
@media (min-width:900px) and (max-width:1279px){
  .hero{--lkw:min(84vw,calc((50vw - var(--gut)) / .6123));--ftop:calc(var(--hdr) + var(--lkw) / 30.72 + 18px)}
  .hero__lock{top:calc(var(--hdr) - 4px);height:calc(var(--lkw) / 30.72 + 8px)}
}
@media (max-width:1180px){
  .nav{gap:28px}
  .stp{padding:4px 22px 8px}
  .stp__n{font-size:38px}
}
/* héros paysage peu haut (portable 720 à 800 px) : un peu moins d'air sous le diptyque */
@media (min-width:900px) and (max-height:800px) and (min-aspect-ratio:1001/1000){
  .hero{--band:222px;--ov:70px}
  .hero__date{margin-top:12px}
  .hero__cta{margin-top:18px}
  .hero__cta .btn--lg{min-height:52px;padding:10px 28px;font-size:14px}
}
@media (max-width:1040px){
  .nav{display:none}
  .cartbtn{margin-left:auto}
  .faqwrap{grid-template-columns:minmax(0,1fr);gap:8px}
  .faqhead{position:static}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .stp:nth-child(odd){padding-left:0;border-left:0}
  .stp:nth-child(even){padding-right:0}
  .stp:nth-child(n+3){padding-top:36px;border-top:1px solid var(--line)}
  .facts3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts3 li:nth-child(3){border-left:0}
  .facts3 li:nth-child(n+3){border-top:1px solid var(--line)}
  .points li{padding:34px 26px 6px}
  .note__in{grid-template-columns:minmax(0,1fr)}
  .seat__grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .seat__plan{position:relative;top:auto}
}

/* héros empilé : écrans étroits, ou tablettes en portrait (même condition que le <picture>) */
@media (max-width:899px),(max-width:1199px) and (max-aspect-ratio:1/1){
  .hero{--band:200px;--ov:44px;--ftop:calc(var(--hdr) + 34px);
    --fh:min(calc(100vw * 5 / 3),calc(var(--hh) - var(--ftop) - var(--band) + var(--ov)));
    --lgh:min(230px,calc(var(--ftop) + var(--fh) * .2 - var(--hdr) - 12px))}
  .hero__media{background:linear-gradient(180deg,var(--ink) calc(var(--ftop) + var(--fh) * .6),var(--kv-l) calc(var(--ftop) + var(--fh) * .6))}
  .hero__frame{width:calc(var(--fh) * .6);transform-origin:50% 60%;
    -webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 13%,var(--ink) 87%,transparent),linear-gradient(180deg,transparent,var(--ink) 5%,var(--ink) 89%,transparent);
    mask-image:linear-gradient(90deg,transparent,var(--ink) 13%,var(--ink) 87%,transparent),linear-gradient(180deg,transparent,var(--ink) 5%,var(--ink) 89%,transparent)}
  .hero__ring--w{display:none}
  .hero__ring--t{display:block}
  .rg--t{stroke-width:3.4;opacity:.7}
  .hero__seam{left:0;right:0;width:auto;bottom:auto;top:calc(var(--ftop) + var(--fh) * .6);height:1px}
  .hero__lit{height:calc(var(--ftop) + var(--fh) * .55)}
  .hero__lock{height:auto}
  .hero__lk{display:none}
  .hero__logo{display:block;position:absolute;left:0;right:0;top:calc(var(--hdr) - 4px);margin:0 auto;height:var(--lgh);width:auto;max-width:none;mix-blend-mode:difference}
  .hero__info{padding-bottom:22px}
  .hero__city,.hero__date,.hero__kind{color:var(--ink);mix-blend-mode:normal}
  .hero__city{font-size:clamp(38px,11vw,54px)}
  .hero__date{margin-top:12px;font-size:clamp(15px,4.3vw,19px);font-weight:400;letter-spacing:.14em}
  .hero__date span:first-child{margin-right:-.14em}
  .hero__kind{margin-top:4px;font-size:clamp(12.5px,3.5vw,14px);letter-spacing:.2em;column-gap:1em}
  .hero__kind span:first-child{margin-right:-.2em}
  .hero__cta{margin-top:18px;column-gap:10px;width:100%;max-width:520px;align-self:center}
  .hero__cta .btn{min-width:0;justify-self:stretch!important}
  .hero .btn--snowline{color:var(--ink);border-color:var(--line2)}
  .hero .btn--snowline:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
}
@media (min-width:600px) and (max-width:1199px) and (max-aspect-ratio:1/1){
  .hero{--band:236px;--ov:56px}
}
@media (max-width:899px){
  :root{--gut:28px;--hdr:64px}
  .brand__lk{display:none}
  .brand__sm{display:flex}
  .shead{grid-template-columns:minmax(0,1fr);gap:22px}
  .points{grid-template-columns:minmax(0,1fr);margin-bottom:64px}
  .points li,.points li:first-child,.points li:last-child{padding:30px 0}
  .points li+li{border-left:0;border-top:1px solid var(--line-d)}
  .galhead{grid-template-columns:minmax(0,1fr);gap:26px;margin-bottom:56px}
  /* galerie : 2 colonnes */
  .gal,.gal__row{gap:10px}
  .gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal__row{display:contents}
  .g{flex:none;aspect-ratio:auto;height:auto}
  .g--a{grid-column:1/-1;aspect-ratio:4/4.4}
  .g--b,.g--f{aspect-ratio:3/5}
  .g--c,.g--d{aspect-ratio:3/4.1}
  .g--e{grid-column:1/-1;aspect-ratio:16/9}
  .g--b{order:1}.g--f{order:2}.g--d{order:3}.g--c{order:4}.g--e{order:5}
  .g--a{order:0}
  .days{margin-top:10px}
  .day{padding:36px 12px 32px}
  .day .btn{padding:8px 14px;letter-spacing:.1em;font-size:12.5px}
  .mbar{display:flex}
  .ft{padding-bottom:110px}
}
@media (max-width:760px){
  .br-pc{display:none}
  .sec{padding:112px 0}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:0}
  .stp,.stp:first-child,.stp:last-child,.stp:nth-child(odd),.stp:nth-child(even){display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:18px;padding:28px 0;border-left:0}
  .stp+.stp,.stp:nth-child(n+3){border-top:1px solid var(--line)}
  .stp:first-child{padding-top:0}
  .stp__n{grid-row:1/3;align-self:start;font-size:34px}
  .stp__n::after{display:none}
  .stp h3{margin-top:0}
  .stp p{margin-top:6px}
  .note{margin-top:48px}
  .note__in{padding:18px 18px 20px}
  .facts3{grid-template-columns:minmax(0,1fr)}
  .facts3 li{flex-direction:row;justify-content:space-between;padding:16px 4px}
  .facts3 li+li,.facts3 li:nth-child(3){border-left:0;border-top:1px solid var(--line)}
  .facts3 b span{font-size:38px}
  .facts3 li>span{text-align:right}
  .fcount{margin-top:-18px}
  .fcount span{flex-basis:100%}
  .fcount span::before{display:none}
}
@media (max-width:600px){
  :root{--gut:20px;--hdr:60px}
  .br-sp{display:inline}
  .br-sp-dot{display:none}
  body{font-size:14.5px}
  .hdr__in{gap:12px}
  .cartbtn{height:38px;padding:0 6px 0 14px;gap:10px;font-size:11px}
  .cartbtn em{min-width:24px;height:24px;font-size:12.5px}
  .ttl{gap:16px}
  .ttl__k{font-size:11.5px;letter-spacing:.4em;gap:12px}
  .ttl__k::before{width:26px;height:13px}
  .ttl__k::after{width:26px}
  .ttl__ja{font-size:clamp(28px,8.2vw,38px)}
  .shead{margin-bottom:46px;padding-bottom:28px}
  .shead__lead{font-size:14px}
  .hero__cta .btn--lg{min-height:52px;padding:10px 8px;font-size:14px;letter-spacing:.1em;gap:8px}
  .hero__cta .btn svg{display:none}
  .mq{padding:13px 0 11px}
  .mq__track{font-size:13.5px}
  .sec{padding:96px 0}
  .stp,.stp:first-child,.stp:last-child,.stp:nth-child(odd),.stp:nth-child(even){grid-template-columns:46px minmax(0,1fr);column-gap:14px}
  .stp__n{font-size:28px}
  .stp h3{font-size:18px}
  .stp p{font-size:13.5px}
  .facts3 li>span{font-size:12px}
  .points h3{font-size:18px}
  .galhead__en{font-size:clamp(40px,12.4vw,58px)}
  .galhead__tx h2{font-size:clamp(23px,6.4vw,28px)}
  .gal,.gal__row{gap:8px}
  .days{margin-top:8px}
  .day__d{font-size:clamp(44px,13vw,60px)}
  .day__v{font-size:12.5px;letter-spacing:.12em}
  .day__v span{font-size:12px;letter-spacing:.06em}
  .gal__more{margin-top:44px}
  .gal__more .btn{width:100%;max-width:360px}
  .final{padding:140px 0 128px}
  .final h2{margin-top:30px}
  .final__en{font-size:10.5px;letter-spacing:.22em;text-indent:.22em}
  .final .btn{width:100%;max-width:360px}
  .ft{padding-top:76px}
  .ftlinks{flex-direction:column;align-items:center;gap:14px;margin-top:36px}
  .ftcopy span{display:block;margin:6px 0 0}
}
@media (max-width:380px){
  .cartbtn{padding:0 5px 0 12px;gap:8px}
  .hero__cta .btn--lg{font-size:13px;letter-spacing:.06em}
  .mbar{padding-left:14px}
  .mbar__tx b{font-size:13px}
  .mbar .btn{padding:8px 14px;font-size:12.5px}
}
@media (hover:none){
  .btn:hover svg{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1;filter:none;transform:none}
  .rise{animation:none}
  .mq__track{animation:none}
  .hero__frame{animation:none;transform:none}
  .rg{animation:none;stroke-dashoffset:0}
  #fx{display:none}
}