/* ═══ チケットイコール ・ ＝LOVE in TOKYO DOME ═══
   Page d'accueil seulement : tokens, en-tête, héros, sections, titres, galerie, pied, boutons de la page,
   bandeau #mq, barre mobile, couche de cœurs #sparkle. Tout ce que génère app.js (lignes, modale, plans,
   panier, toast, cartes de 席種 et de salle, FAQ) est stylé par styles-app.css (voir _contract/dom-hooks.md).
   DA « ＝LOVE » : idole japonaise « 王道 », douce et lumineuse. Blanc lait, rose pâle, lavande ; rose
   officiel #EA6C81 pour les boutons ; rayures diagonales du site officiel refaites en CSS ; pilules,
   rubans et cœurs discrets. Une seule ambiance sombre, la « nuit du dôme » (--night), pour le plan
   (#venues) et l'appel final.
   Jost (écho du lettrage Futura du logo) pour les chiffres et le latin, Comfortaa (fonte du site
   officiel) pour les petites étiquettes espacées, Zen Maru Gothic pour les titres japonais, Noto Sans JP
   pour le texte.
   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. */

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

:root{
  color-scheme:light;
  /* contrat §3 (hex à 6 chiffres : les plans SVG d'app.js les lisent) */
  --milk:#FFFAFB;
  --paper:#FFFFFF;
  --blush:#FDEEF2;
  --petal:#F4DEEB;
  --pink:#F9769F;
  --rose:#EA6C81;
  --berry:#C2456A;
  --lav:#EEE8FA;
  --lilac:#B9A3E3;
  --sky:#9FD3F2;
  --mint:#9EDFC4;
  --gold:#E7C27D;
  --cream:#F3EFE0;
  --ink:#2B2730;
  --ink2:#6E6573;
  --mute:#B9B2BC;
  --night:#221A30;
  --plum:#3A2C4E;
  --line:#2B27301F;
  /* dérivés */
  --line2:color-mix(in srgb,var(--ink) 34%,transparent);
  --lineR:color-mix(in srgb,var(--rose) 30%,transparent);
  --lineN:color-mix(in srgb,var(--paper) 16%,transparent);
  --lineN2:color-mix(in srgb,var(--paper) 34%,transparent);
  --paperD:color-mix(in srgb,var(--paper) 76%,transparent);
  --paperD2:color-mix(in srgb,var(--paper) 54%,transparent);
  --glass:color-mix(in srgb,var(--milk) 84%,transparent);
  --scrim:color-mix(in srgb,var(--night) 58%,transparent);
  --shadow:0 22px 50px -24px color-mix(in srgb,var(--berry) 34%,transparent),0 2px 8px -2px color-mix(in srgb,var(--rose) 12%,transparent);
  --shadow2:0 30px 70px -30px color-mix(in srgb,var(--berry) 40%,transparent);
  /* rayures officielles (motif 16 px du site officiel, en diagonale « / ») */
  --stripe:repeating-linear-gradient(135deg,transparent 0 10.3px,color-mix(in srgb,var(--ink) 11%,transparent) 10.3px 11.3px);
  --stripeR:repeating-linear-gradient(135deg,transparent 0 10.3px,color-mix(in srgb,var(--rose) 22%,transparent) 10.3px 11.3px);
  --stripeN:repeating-linear-gradient(135deg,transparent 0 10.3px,color-mix(in srgb,var(--paper) 7%,transparent) 10.3px 11.3px);
  --dots:radial-gradient(circle,var(--lilac) 1.1px,transparent 1.6px);
  /* typo */
  --display:"Jost","Zen Maru Gothic","Helvetica Neue",Arial,sans-serif;
  --label:"Comfortaa","Jost","Helvetica Neue",Arial,"Zen Maru Gothic",sans-serif;
  --jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
  --sans:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  /* alias (anciens noms, au cas où) */
  --serifjp:var(--jp);
  --serif:var(--display);
  --lat:var(--display);
  /* mise en page */
  --wrap:1220px;
  --gut:40px;
  --hdr:74px;
  --r:24px;
  --ease:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--milk)}
body{
  margin:0;background:var(--milk);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}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.5}
h1,h2,h3,h4,.hero__catch,.final h2,.shead__catch{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(--petal);color:var(--ink)}
:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
.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}
img.is-miss{visibility:hidden}

/* couche de cœurs (hearts.js) : au-dessus des sections, sous l'en-tête, la barre mobile et la modale */
#sparkle{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 : étiquette Comfortaa espacée précédée d'un « ＝ », titre japonais rond ─────────── */
.ttl{display:flex;flex-direction:column;align-items:flex-start;gap:16px;font-weight:400}
.ttl__en{display:inline-flex;align-items:center;gap:14px;font-family:var(--label);font-weight:700;font-size:12.5px;line-height:1.2;
  letter-spacing:.5em;text-transform:uppercase;color:var(--rose)}
.ttl__en::before{content:"";flex:0 0 auto;width:20px;height:7px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.ttl__ja{font-family:var(--jp);font-weight:700;font-size:clamp(28px,3.2vw,42px);line-height:1.4;letter-spacing:.1em}

.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:24px 64px;align-items:end;
  margin-bottom:60px;padding-bottom:34px;background:var(--dots) left bottom/9px 3px repeat-x}
.shead__lead{color:var(--ink2);font-size:14.5px;line-height:2.05}
.shead__catch{margin-bottom:10px;font-family:var(--jp);font-weight:700;font-size:clamp(19px,1.7vw,23px);line-height:1.6;letter-spacing:.1em;color:var(--paper)}

/* ─────────── Boutons : pilules, rose officiel ─────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:12px 30px;border:1.5px solid var(--rose);border-radius:999px;
  background:transparent;color:var(--berry);font-family:var(--jp);font-weight:700;font-size:14.5px;
  letter-spacing:.12em;line-height:1.4;text-align:center;white-space:nowrap;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s 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:.4;cursor:not-allowed}
.btn--primary,.btn--light{background:var(--rose);color:var(--paper);border-color:var(--rose);
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--rose) 80%,transparent)}
.btn--primary:hover,.btn--light:hover{background:var(--berry);border-color:var(--berry);color:var(--paper);
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--berry) 80%,transparent)}
.btn--primary:disabled:hover{background:var(--rose);border-color:var(--rose)}
.btn--ghost,.btn--line{background:color-mix(in srgb,var(--paper) 70%,transparent);color:var(--berry);border-color:var(--rose)}
.btn--ghost:hover,.btn--line:hover{background:var(--rose);color:var(--paper);border-color:var(--rose)}
/* sur la nuit du dôme */
.is-dark .btn--line,.is-dark .btn--ghost{background:color-mix(in srgb,var(--night) 38%,transparent);color:var(--paper);border-color:var(--lineN2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.is-dark .btn--line:hover,.is-dark .btn--ghost:hover{background:var(--paper);color:var(--berry);border-color:var(--paper)}
.btn--lg{min-height:58px;padding:14px 36px;font-size:15px}
.btn--full{width:100%;margin-top:14px}

/* ─────────── En-tête ─────────── */
.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(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  transition:background-color .5s var(--ease),border-color .5s var(--ease)}
.hdr__in{max-width:var(--wrap);height:100%;margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;gap:14px;flex:0 0 auto;line-height:0;transition:opacity .5s var(--ease),visibility .5s}
.brand img{display:block;height:27px;width:auto;max-width:none}
.brand .brand__white{display:none}
.brand span{font-family:var(--display);font-weight:400;font-size:11.5px;line-height:1;letter-spacing:.32em;white-space:nowrap;color:var(--ink2);
  padding-left:14px;border-left:1px solid var(--line)}
.nav{margin-left:auto;display:flex;gap:34px;font-family:var(--jp);font-weight:700;font-size:13.5px;letter-spacing:.14em}
.nav a{position:relative;padding:6px 0;white-space:nowrap;transition:color .35s var(--ease)}
.nav a::after{content:"";position:absolute;left:50%;bottom:-2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--rose);
  opacity:0;transform:translateY(4px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.nav a:hover{color:var(--berry)}
.nav a:hover::after{opacity:1;transform:none}
.cartbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 6px 0 16px;
  border:1.5px solid var(--rose);border-radius:999px;background:color-mix(in srgb,var(--paper) 78%,transparent);color:var(--berry);
  font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.18em;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:30px;height:30px;padding:0 7px;display:grid;place-items:center;letter-spacing:0;border-radius:999px;
  background:var(--rose);color:var(--paper);font-family:var(--display);font-weight:500;font-size:14px;line-height:1;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.cartbtn:hover{background:var(--rose);color:var(--paper)}
.cartbtn:hover em{background:var(--paper);color:var(--berry)}
/* panier non vide (classe posée par app.js) : bouton plein */
.cartbtn.has-items{background:var(--rose);color:var(--paper)}
.cartbtn.has-items em{background:var(--paper);color:var(--berry)}
.cartbtn.has-items:hover{background:var(--berry);border-color:var(--berry)}
/* au-dessus de la nuit du dôme (#venues, #final) : verre nuit, logo blanc */
body.on-dark .hdr{background:color-mix(in srgb,var(--night) 80%,transparent);border-bottom-color:var(--lineN);color:var(--paper)}
body.on-dark .brand__ink{display:none}
body.on-dark .brand .brand__white{display:block}
body.on-dark .brand span{color:var(--paperD);border-left-color:var(--lineN2)}
body.on-dark .nav a:hover{color:var(--pink)}
body.on-dark .cartbtn{background:transparent;color:var(--paper);border-color:var(--lineN2)}
body.on-dark .cartbtn:hover,body.on-dark .cartbtn.has-items{background:var(--rose);border-color:var(--rose);color:var(--paper)}
/* au-dessus du héros : transparent, logo masqué (le grand logo est dans le héros) */
body.on-hero .hdr{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
body.on-hero .brand{opacity:0;visibility:hidden}

/* ─────────── Héros : plein écran sur la photo de groupe ───────────
   La photo est pleine de visages jusqu'à mi-hauteur : rien ne se pose dessus. Un voile blanc lait
   monte des jupes et accueille, en bas, le logo encre + « in TOKYO DOME » + les dates (à gauche) et
   l'accroche, les boutons et les arguments (à droite).
   Écrans étroits ou portrait : visuel 4:5 en haut, logo posé sur le bas fondu, texte dessous. */
.hero{position:relative;z-index:2;isolation:isolate;overflow:hidden;margin-top:calc(-1 * var(--hdr));
  min-height:max(680px,min(100vh,56.25vw + 300px));min-height:max(680px,min(100svh,56.25vw + 300px));display:flex;background:var(--milk);color:var(--ink)}
/* desktop : la photo (16:9) garde toute sa largeur ; si l'écran est plus haut que 16:9, du blanc lait
   sous la photo plutôt que de couper les membres des bords */
.hero__ph{position:absolute;left:0;right:0;top:0;height:min(100%,56.25vw);z-index:-2;display:block;overflow:hidden;
  background:linear-gradient(160deg,var(--blush) 0,var(--petal) 46%,var(--lav) 100%)}
.hero__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 14%;
  transform-origin:50% 22%;animation:kb 40s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{from{transform:scale(1.005)}to{transform:scale(1.05) translate3d(.6%,0,0)}}
.hero__veil{position:absolute;left:0;right:0;top:0;height:calc(min(100%,56.25vw) + 2px);z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--milk) 62%,transparent) 0,color-mix(in srgb,var(--milk) 0%,transparent) 15%),
    linear-gradient(0deg,var(--milk) 0,color-mix(in srgb,var(--milk) 97%,transparent) 15%,color-mix(in srgb,var(--milk) 86%,transparent) 25%,color-mix(in srgb,var(--milk) 50%,transparent) 35%,color-mix(in srgb,var(--blush) 14%,transparent) 44%,transparent 52%)}
.hero__in{position:relative;flex:1;width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:". ." "brand side";column-gap:56px;
  padding-top:var(--hdr);padding-bottom:clamp(36px,5.4vh,60px)}

/* lockup : logo encre, « in TOKYO DOME » en Jost fin, dates cliquables */
.hero__brand{grid-area:brand;align-self:end;container-type:inline-size;
  width:clamp(330px,min(34vw,calc(16vh * 3.472)),500px);width:clamp(330px,min(34vw,calc(16svh * 3.472)),500px)}
.hero__logo{margin:0;line-height:0;font-weight:400}
.hero__logo img{display:block;width:100%;height:auto}
.hero__dome{display:block;margin-top:5.2cqi;font-family:var(--display);font-weight:300;font-size:7.4cqi;line-height:1;letter-spacing:.33em;
  white-space:nowrap;color:var(--ink)}
.hero__date{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin-top:6.4cqi;padding-top:4.6cqi;
  background:var(--dots) left top/9px 3px repeat-x}
.hero__days{display:inline-flex;align-items:baseline;font-family:var(--display);font-weight:400;font-size:clamp(22px,5.6cqi,28px);line-height:1.1;letter-spacing:.04em;white-space:nowrap}
.hero__y{color:var(--ink2)}
.hero__dot{margin:0 .12em;color:var(--rose)}
.hero__days button{position:relative;display:inline-flex;align-items:baseline;gap:.24em;padding:2px 0;font-family:inherit;font-weight:inherit;letter-spacing:inherit;color:var(--ink)}
.hero__days small{font-family:var(--label);font-weight:700;font-size:.44em;letter-spacing:.14em;color:var(--rose)}
.hero__days button::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;border-radius:2px;background:var(--rose);transition:right .45s var(--ease)}
.hero__days button:hover::after{right:0}
.hero__venue{font-family:var(--jp);font-weight:700;font-size:15px;letter-spacing:.2em;color:var(--ink)}

.hero__side{grid-area:side;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:560px;position:relative}
/* halo blanc lait derrière le texte : lisible même quand l'écran est bas et que le texte monte sur la photo */
.hero__brand::before,.hero__side::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-70px -90px -50px -90px;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--milk) 78%,transparent) 0,color-mix(in srgb,var(--milk) 50%,transparent) 55%,transparent 100%)}
.hero__brand{position:relative}
.hero__catch{font-family:var(--jp);font-weight:700;font-size:clamp(24px,2.15vw,31px);line-height:1.5;letter-spacing:.08em}
.hero__sub{margin-top:-6px;font-size:14px;letter-spacing:.1em;color:var(--ink2)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.live{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:12px;letter-spacing:.1em;color:var(--ink2)}
.live span[lang]{font-family:var(--label);font-weight:700;font-size:10.5px;letter-spacing:.16em;color:var(--ink2)}
.live i{flex:0 0 auto;width:7px;height:7px;margin-right:2px;border-radius:50%;background:var(--rose);animation:live 2.6s ease-out infinite}
.live b{font-family:var(--jp);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--berry)}
.live__sep{color:var(--mute)}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--rose) 55%,transparent)}70%,100%{box-shadow:0 0 0 9px color-mix(in srgb,var(--rose) 0%,transparent)}}
.trust{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.trust li{display:inline-flex;align-items:center;gap:7px;padding:5px 14px 5px 12px;border-radius:999px;background:color-mix(in srgb,var(--paper) 80%,transparent);
  border:1px solid var(--lineR);font-family:var(--jp);font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.08em;color:var(--ink);white-space:nowrap}
.trust svg{color:var(--rose)}

/* ─────────── Bande défilante (texte écrit par app.js dans #mq) ─────────── */
.mq{position:relative;z-index:2;overflow:hidden;padding:15px 0 14px;background:var(--rose);color:var(--paper)}
.mq::before,.mq::after{content:"";position:absolute;left:0;right:0;height:1px;background:color-mix(in srgb,var(--paper) 45%,transparent)}
.mq::before{top:5px}
.mq::after{bottom:5px}
.mq__track{display:block;width:max-content;white-space:nowrap;font-family:var(--display);font-weight:400;font-size:17px;line-height:1.3;letter-spacing:.18em;
  animation:mqr 120s linear infinite}
@keyframes mqr{from{transform:none}to{transform:translateX(-50%)}}

/* ─────────── Sections ─────────── */
.sec{position:relative;z-index:2;isolation:isolate;padding:132px 0;scroll-margin-top:var(--hdr)}
.sec--milk{background:var(--milk);color:var(--ink)}
.sec--blush{background:var(--blush);color:var(--ink)}
.sec--lav{background:var(--lav);color:var(--ink)}
.sec--night{background:var(--night);color:var(--paper)}
.sec--night ::selection{background:var(--rose);color:var(--paper)}
.sec__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;pointer-events:none}
.sec__bg+.wrap{position:relative}
.is-dark .ttl__en{color:var(--pink)}
.is-dark .shead{background-image:radial-gradient(circle,color-mix(in srgb,var(--paper) 40%,transparent) 1.1px,transparent 1.6px)}
.is-dark .shead__lead{color:var(--paperD)}

/* ─────────── お申し込みの流れ (blanc lait, rayures officielles en haut) ─────────── */
.flow{overflow:hidden}
.flow::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:300px;pointer-events:none;background:var(--stripe);
  -webkit-mask-image:linear-gradient(180deg,var(--ink) 0,transparent 100%);mask-image:linear-gradient(180deg,var(--ink) 0,transparent 100%);opacity:.75}
.flow::after{content:"";position:absolute;z-index:-1;right:-8%;top:8%;width:46%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--petal) 70%,transparent),transparent)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stp{position:relative;padding:30px 28px 32px;border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow)}
.stp::after{content:"";position:absolute;right:22px;top:26px;width:9px;height:9px;border-radius:50%;background:var(--petal)}
.stp__n{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-weight:300;font-size:52px;line-height:.9;letter-spacing:.02em;color:var(--rose)}
.stp__n span{font-family:var(--label);font-weight:700;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink2)}
.stp h3{margin-top:22px;font-family:var(--jp);font-weight:700;font-size:18px;line-height:1.55;letter-spacing:.06em}
.stp p{margin-top:10px;color:var(--ink2);font-size:13.5px;line-height:2}
.facts3{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-radius:var(--r);background:var(--blush);border:1px solid var(--lineR);overflow:hidden}
.facts3 li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:26px 14px 22px;text-align:center}
.facts3 li+li{border-left:1px dashed var(--lineR)}
.facts3 b{display:flex;align-items:baseline;gap:4px;font-family:var(--jp);font-weight:700;font-size:15px;letter-spacing:.06em;white-space:nowrap;line-height:46px;color:var(--berry)}
.facts3 li:first-child b{font-size:24px;letter-spacing:.14em}
.facts3 b span{font-family:var(--display);font-weight:300;font-size:46px;line-height:1;letter-spacing:.01em}
.facts3 li:last-child b span{font-size:38px;letter-spacing:.06em}
.facts3 li>span{font-size:12.5px;color:var(--ink2);letter-spacing:.08em;line-height:1.7}

/* ─────────── 公演一覧 (rose très pâle ; lignes et badges : styles-app.css) ─────────── */
.shows{overflow:hidden}
.shows::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:var(--stripeR);opacity:.55;
  -webkit-mask-image:radial-gradient(70% 60% at 100% 0,var(--ink),transparent);mask-image:radial-gradient(70% 60% at 100% 0,var(--ink),transparent)}
.shows__in{min-width:0}
.fcount{margin:0 0 22px auto;font-size:12px;letter-spacing:.12em;color:var(--ink2);text-align:right;white-space:nowrap}
.fcount b{margin-right:6px;font-family:var(--display);font-weight:400;font-size:26px;line-height:1;color:var(--berry);vertical-align:-3px}
.empty{padding:56px 0;text-align:center;color:var(--ink2);font-size:14px}

/* ─────────── 席種と料金 (lavande pâle, satin rose en fond) ─────────── */
.seat{overflow:hidden}
.seat__bg{opacity:.5;object-position:50% 40%}
.seat::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--lav) 0,color-mix(in srgb,var(--lav) 55%,transparent) 22%,color-mix(in srgb,var(--lav) 72%,transparent) 55%,var(--lav) 100%)}
.seat__in{position:relative}
.seat__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px 72px;align-items:end;margin-bottom:64px}
.seat__top .shead{margin-bottom:0;grid-template-columns:minmax(0,1fr)}
.tkt{position:relative;padding:30px 30px 24px;border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow2)}
.tkt::before{content:"";position:absolute;inset:7px;border:1px dashed var(--lineR);border-radius:calc(var(--r) - 6px);pointer-events:none}
.tkt__bow{position:absolute;left:50%;top:-17px;margin-left:-27px;color:var(--rose)}
.tkt__k{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--jp);font-weight:700;font-size:14px;letter-spacing:.16em}
.tkt__k small{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.1em;color:var(--ink2)}
.tkt__list{list-style:none;margin:12px 0 0;padding:0}
.tkt__list li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.tkt__n{position:relative;min-width:0;padding-left:20px;font-family:var(--jp);font-weight:700;font-size:14.5px;letter-spacing:.06em;line-height:1.5}
.tkt__n small{display:block;margin-top:2px;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.04em;line-height:1.6;color:var(--ink2);word-break:keep-all}
.sw{position:absolute;left:0;top:.45em;width:11px;height:11px;border-radius:50%}
.sw--gold{background:var(--gold)}
.sw--std{background:conic-gradient(var(--petal) 0 25%,var(--pink) 0 50%,var(--sky) 0 75%,var(--mint) 0)}
.tkt__list b{flex:0 0 auto;font-weight:500;font-size:13px;letter-spacing:.06em;white-space:nowrap}
.tkt__list b span{margin-right:3px;font-family:var(--display);font-weight:400;font-size:32px;line-height:1;letter-spacing:.01em;color:var(--ink)}
.tkt__row{display:grid;grid-template-columns:1fr 1fr;margin-top:4px;border-top:1px solid var(--line)}
.tkt__row span{padding-top:14px;font-size:12.5px;letter-spacing:.1em;color:var(--ink2)}
.tkt__row span+span{padding-left:18px;border-left:1px solid var(--line)}
.tkt__row b{margin:0 3px;font-family:var(--display);font-weight:400;font-size:26px;line-height:1;color:var(--berry)}

.points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.points li{padding:28px 30px 30px;border-radius:var(--r);background:color-mix(in srgb,var(--paper) 72%,transparent);border:1px solid color-mix(in srgb,var(--paper) 90%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.points__n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paper);border:1px solid var(--lineR);
  font-family:var(--display);font-weight:400;font-size:15px;line-height:1;letter-spacing:.04em;color:var(--rose)}
.points h3{margin-top:18px;font-family:var(--jp);font-weight:700;font-size:18px;letter-spacing:.06em}
.points p{margin-top:10px;font-size:13.5px;line-height:2.05;color:var(--ink2)}

/* panneau des 席種 (les cartes de #zoneGrid : styles-app.css) */
.seat__zones{margin-top:72px}
.seat__zt{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:26px;font-family:var(--jp);font-weight:700;font-size:15px;letter-spacing:.16em}
.seat__zt span{font-family:var(--display);font-weight:300;font-size:clamp(30px,3vw,40px);line-height:1;letter-spacing:.08em;color:var(--berry)}

/* ─────────── Galerie éditoriale (aucune légende) ─────────── */
.gal-sec{padding-bottom:140px;overflow:hidden}
.gal-sec::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:46%;pointer-events:none;background:var(--stripe);opacity:.7;
  -webkit-mask-image:linear-gradient(180deg,var(--ink),transparent);mask-image:linear-gradient(180deg,var(--ink),transparent)}
.galhead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px 64px;align-items:end;margin-bottom:56px}
.galhead__en{display:flex;flex-direction:column;font-family:var(--display);font-weight:300;font-size:clamp(58px,8.4vw,128px);line-height:.92;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.galhead__en span+span{padding-left:1.1em;color:var(--rose)}
.galhead__tx h2{font-family:var(--jp);font-weight:700;font-size:clamp(23px,2.3vw,32px);line-height:1.6;letter-spacing:.1em}
.galhead__tx p{margin-top:16px;color:var(--ink2);font-size:14.5px;line-height:2.05}
.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;
  grid-template-rows:clamp(330px,42vw,560px) clamp(290px,35vw,470px) clamp(250px,24vw,350px);
  grid-template-areas:
    "a a a a a a a a b b b b"
    "c c c c d d d d d d d d"
    "e e e e e e e f f n n n"}
.g{position:relative;overflow:hidden;min-height:0;border-radius:var(--r);background:linear-gradient(150deg,var(--petal),var(--lav))}
.g img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.g:hover img{transform:scale(1.03)}
.g--colors{grid-area:a}
.g--colors img{object-position:50% 30%}
.g--snow{grid-area:b}
.g--snow img{object-position:50% 58%}
.g--stadium{grid-area:c}
.g--stadium img{object-position:50% 62%}
.g--dance{grid-area:d}
.g--dance img{object-position:50% 78%}
.g--official{grid-area:e}
.g--official img{object-position:50% 70%;transform:scale(1.12);transform-origin:50% 72%}
.g--official:hover img{transform:scale(1.15)}
.g--trio{grid-area:f}
.g--trio img{object-position:42% 40%}
.g--note{grid-area:n;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:28px 18px;
  background:var(--blush);color:var(--ink);text-align:center;border:1px solid var(--lineR)}
.g--note::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--stripeR);opacity:.6}
.g--note{isolation:isolate;container-type:inline-size}
.gnote__bow{color:var(--rose);margin-bottom:6px}
.gnote__k{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--rose)}
.gnote__d{font-family:var(--display);font-weight:300;font-size:min(16cqi,64px);line-height:1.1;letter-spacing:.02em;white-space:nowrap}
.gnote__d span{color:var(--rose)}
.gnote__v{font-family:var(--jp);font-weight:700;font-size:13px;letter-spacing:.24em;color:var(--ink2)}
.gnote__b{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.gnote__b .btn{min-height:40px;padding:6px 16px;font-size:12.5px;letter-spacing:.06em}

/* ─────────── 会場・座席表 (nuit du dôme ; carte de salle : styles-app.css) ─────────── */
.venues{overflow:hidden}
.venues__bg{bottom:auto;height:clamp(440px,48vw,720px);opacity:.62;object-position:50% 40%;
  -webkit-mask-image:linear-gradient(180deg,var(--night) 0,var(--night) 40%,transparent 96%);
  mask-image:linear-gradient(180deg,var(--night) 0,var(--night) 40%,transparent 96%)}
.venues::before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(60% 40% at 50% 0,color-mix(in srgb,var(--plum) 90%,transparent),transparent 80%),var(--night)}
.venues::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--night) 30%,transparent) 0,color-mix(in srgb,var(--night) 40%,transparent) 240px,color-mix(in srgb,var(--night) 84%,transparent) 540px,var(--night) 760px)}

/* ─────────── FAQ (rose très pâle ; les <details class="faq"> : styles-app.css) ─────────── */
.faqwrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:80px;align-items:start}
.faqhead{position:sticky;top:calc(var(--hdr) + 40px);display:block;margin:0;padding:0;background:none}
.faqhead .shead__lead{margin-top:26px}

/* ─────────── Dernier appel : mer de penlights en vidéo ─────────── */
.final{position:relative;z-index:2;isolation:isolate;overflow:hidden;padding:170px 0 160px;background:var(--night);color:var(--paper);text-align:center;scroll-margin-top:var(--hdr)}
.final__media{position:absolute;inset:0;z-index:-2;background:radial-gradient(80% 60% at 50% 100%,var(--plum),var(--night))}
.final__bg,.final__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.final__vid{opacity:0;transition:opacity 1.6s 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(--night) 0,color-mix(in srgb,var(--night) 34%,transparent) 26%,color-mix(in srgb,var(--night) 30%,transparent) 64%,color-mix(in srgb,var(--night) 86%,transparent) 100%),
    radial-gradient(ellipse 46% 44% at 50% 48%,color-mix(in srgb,var(--night) 62%,transparent),transparent)}
.final__in{display:flex;flex-direction:column;align-items:center}
.final__logo{display:block;width:min(500px,72vw);height:auto;filter:drop-shadow(0 2px 24px color-mix(in srgb,var(--rose) 50%,transparent))}
.final__en{margin-top:20px;font-family:var(--display);font-weight:300;font-size:clamp(19px,2vw,27px);line-height:1;letter-spacing:.34em;text-indent:.34em;color:var(--paper)}
.final__date{margin-top:16px;font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.2em;text-indent:.2em;color:var(--paperD)}
.final h2{margin-top:46px;font-family:var(--jp);font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:1.5;letter-spacing:.14em;text-indent:.14em}
.final__sub{margin-top:14px;font-size:13.5px;letter-spacing:.14em;color:var(--paperD);text-shadow:0 1px 14px var(--night)}
.final h2,.final__en,.final__date{text-shadow:0 2px 24px color-mix(in srgb,var(--night) 80%,transparent)}
.final__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}

/* ─────────── Pied de page ─────────── */
.ft{position:relative;z-index:2;padding:76px 0 34px;background:var(--milk);text-align:center;color:var(--ink)}
.ft::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--stripeR)}
.ft__logo{display:inline-flex;flex-direction:column;align-items:center;gap:12px;line-height:0}
.ft__logo img{display:block;height:44px;width:auto;max-width:100%}
.ft__logo span{font-family:var(--display);font-weight:300;font-size:13px;line-height:1;letter-spacing:.34em;text-indent:.34em;color:var(--ink2)}
.ftlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 36px;margin-top:40px;font-size:12.5px;letter-spacing:.1em;color:var(--ink2)}
.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:currentColor;transition:right .45s var(--ease)}
.ftlinks a:hover{color:var(--berry)}
.ftlinks a:hover::after{right:0}
.ftcopy{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.18em;color:var(--ink2)}

/* ─────────── 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:8px 8px 8px 20px;background:color-mix(in srgb,var(--paper) 92%,transparent);color:var(--ink);border:1px solid var(--lineR);border-radius:999px;
  box-shadow:var(--shadow2);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  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:block;font-family:var(--jp);font-size:14px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.mbar__tx span{display:block;font-size:10.5px;letter-spacing:.06em;color:var(--ink2);white-space:nowrap}
.mbar .btn{flex:0 0 auto;min-height:44px;padding:8px 20px;font-size:13px;box-shadow:none}

/* ─────────── Apparition : fondu + léger glissement vers le haut ─────────── */
.rise{animation:rise 1.4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
.js .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.steps .rv:nth-child(2),.points .rv:nth-child(2){transition-delay:.1s}
.steps .rv:nth-child(3),.points .rv:nth-child(3){transition-delay:.2s}
.steps .rv:nth-child(4){transition-delay:.3s}
.gal .rv:nth-child(even){transition-delay:.1s}

/* ═══════════ Responsive ═══════════ */
@media (max-width:1180px){
  .nav{gap:26px}
  .hero__in{column-gap:36px}
  .stp{padding:26px 22px 28px}
  .stp__n{font-size:46px}
}
@media (max-width:1040px){
  .nav{display:none}
  .cartbtn{margin-left:auto}
  .seat__top{grid-template-columns:minmax(0,1fr);gap:48px}
  .tkt{max-width:480px}
  .points{grid-template-columns:minmax(0,1fr)}
  .points li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:18px;padding:24px 24px 26px}
  .points__n{grid-row:1/3}
  .points h3{margin-top:6px}
  .faqwrap{grid-template-columns:minmax(0,1fr);gap:8px}
  .faqhead{position:static;margin-bottom:40px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .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 dashed var(--lineR)}
}

/* héros empilé : écrans étroits, ou tablettes en portrait (même condition que le <picture> et le script) */
@media (max-width:899px),(max-width:1199px) and (max-aspect-ratio:1/1){
  .hero{--phh:min(calc(100vw * 1.16),80vh);--phh:min(calc(100vw * 1.16),80svh);min-height:0;display:block}
  .hero__ph{bottom:auto;height:var(--phh)}
  .hero__ph img{object-position:50% 88%;transform-origin:50% 60%}
  .hero__veil{bottom:auto;height:calc(var(--phh) + 2px);
    background:
      linear-gradient(180deg,color-mix(in srgb,var(--milk) 58%,transparent) 0,transparent 13%,transparent 64%,color-mix(in srgb,var(--milk) 42%,transparent) 74%,color-mix(in srgb,var(--milk) 82%,transparent) 83%,color-mix(in srgb,var(--milk) 96%,transparent) 92%,var(--milk) 100%)}
  .hero__in{display:flex;flex-direction:column;align-items:center;text-align:center;
    padding-top:calc(var(--phh) - min(23vw,190px));padding-bottom:64px}
  .hero__brand{width:min(72vw,440px);display:flex;flex-direction:column;align-items:center}
  .hero__dome{letter-spacing:.3em;text-indent:.3em}
  .hero__date{justify-content:center;background-position:center top}
  .hero__side{align-items:center;width:min(100%,560px);max-width:none;margin-top:24px;gap:12px}
  .hero__subd{display:none}
  .hero__brand::before,.hero__side::before{display:none}
  .live{order:4;margin-top:2px}
  .trust{order:5}
  .hero__catch{font-size:clamp(23px,6.2vw,30px)}
  .hero__sub{margin-top:-4px;font-size:13.5px}
  .live{justify-content:center}
  .cta{justify-content:center}
  .trust{justify-content:center}
}
/* téléphone couché : bandeau de visuel plus bas */
@media (max-width:999px) and (max-height:520px) and (orientation:landscape){
  .hero{--phh:100vh;--phh:100svh}
  .hero__ph img{object-position:50% 40%}
  .hero__in{padding-top:calc(var(--phh) - var(--hdr) - 160px)}
  .hero__brand{width:min(46vw,420px)}
}
@media (max-width:899px){
  :root{--gut:28px;--hdr:64px}
  .brand img{height:24px}
  .shead{grid-template-columns:minmax(0,1fr);gap:20px}
  .galhead{grid-template-columns:minmax(0,1fr);gap:22px}
  .gal{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:66vw 82vw 52vw 46vw 76vw;
    grid-template-areas:"a a" "b c" "d d" "e e" "f n"}
  .g{border-radius:18px}
  .g--note{padding:22px 10px}
  .gnote__d{font-size:min(17cqi,48px)}
  .gnote__v{font-size:11.5px;letter-spacing:.16em}
  .gnote__b{flex-direction:column;align-items:stretch;width:100%;max-width:200px;margin-top:14px}
  .gnote__b .btn{padding:6px 10px}
  .mbar{display:flex}
  .ft{padding-bottom:110px}
}
@media (max-width:760px){
  .br-pc{display:none}
  .sec{padding:96px 0}
  .steps{grid-template-columns:minmax(0,1fr);gap:12px}
  .stp{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;padding:22px 22px 24px}
  .stp__n{grid-row:1/3;flex-direction:column;align-items:flex-start;gap:6px;font-size:42px}
  .stp__n span{order:-1;font-size:9.5px}
  .stp h3{margin-top:0}
  .stp p{margin-top:6px}
  .facts3{margin-top:40px;grid-template-columns:minmax(0,1fr)}
  .facts3 li{flex-direction:row;justify-content:space-between;padding:14px 22px}
  .facts3 li+li{border-left:0;border-top:1px dashed var(--lineR)}
  .facts3 li:nth-child(3){border-top:1px dashed var(--lineR)}
  .facts3 b span{font-size:36px}
  .facts3 li:last-child b span{font-size:30px}
  .facts3 li:first-child b{font-size:20px}
  .facts3 li>span{text-align:right}
}
@media (max-width:600px){
  :root{--gut:20px;--hdr:60px;--r:20px}
  .br-sp{display:inline}
  body{font-size:14.5px}
  .hdr__in{gap:12px}
  .brand{gap:10px}
  .brand img{height:21px}
  .brand span{padding-left:10px;font-size:9.5px;letter-spacing:.24em}
  .cartbtn{height:40px;padding:0 5px 0 12px;gap:7px;font-size:11px}
  .cartbtn em{min-width:28px;height:28px;font-size:13px}
  .ttl{gap:12px}
  .ttl__en{font-size:11.5px;letter-spacing:.42em}
  .ttl__ja{font-size:clamp(25px,7vw,30px)}
  .shead{margin-bottom:40px;padding-bottom:26px}
  .shead__lead{font-size:14px}
  .hero__days{font-size:clamp(20px,6.2vw,25px)}
  .hero__venue{font-size:14px}
  .cta{width:100%;gap:10px}
  .cta .btn{flex:1 1 100%}
  .trust{gap:6px}
  .trust li{padding:4px 11px 4px 10px;font-size:11px;letter-spacing:.04em}
  .mq{padding:13px 0 12px}
  .mq__track{font-size:14.5px}
  .sec{padding:84px 0}
  .tkt{padding:26px 18px 20px}
  .tkt::before{inset:6px}
  .tkt__n{font-size:13.5px}
  .tkt__list b span{font-size:27px}
  .points li{padding:22px 18px 24px;column-gap:14px}
  .points h3{font-size:16.5px}
  .seat__zones{margin-top:56px}
  .galhead__en{font-size:clamp(48px,15vw,72px)}
  .gal{gap:8px}
  .final{padding:120px 0 116px}
  .final h2{margin-top:36px}
  .final__en{letter-spacing:.28em;text-indent:.28em}
  .final__cta{flex-direction:column;align-items:stretch;width:100%;max-width:360px}
  .ft{padding-top:64px}
  .ft__logo img{height:38px}
  .ftlinks{flex-direction:column;align-items:center;gap:14px;margin-top:34px}
}
@media (max-width:380px){
  .cartbtn__t{display:none}
  .cartbtn{padding:0 5px 0 11px}
  .brand span{display:none}
  .trust li{font-size:10.5px;padding:4px 9px}
  .mbar{padding-left:16px}
  .mbar__tx b{font-size:13px}
  .mbar .btn{padding:8px 14px;font-size:12.5px}
}
@media (hover:none){
  .g:hover img{transform: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;transform:none}
  .mq__track{animation:none}
  .hero__ph img{animation:none;transform:none}
  .live i{animation:none}
  #sparkle{display:none}
}