/* ═══ チケットマイル ・ SixTONES「MILESixTONES」スタジアムツアー ═══
   Page d'accueil seulement : tokens, en-tête, héros, sections, titres, galerie, pied, boutons de la page,
   bandeau #mq, barre mobile. Tout ce que génère app.js (lignes, modale, plans, panier, toast, cartes de
   席種 et de stade, FAQ, puces de ville) est stylé par styles-app.css (voir _contract/dom-hooks.md).
   DA : noir et blanc classique, calquée sur sixtones.jp (fond #F4F4F4, encre noire, Cormorant
   Garamond pour les titres latins, Noto Serif JP pour les titres japonais, Noto Sans JP pour le
   texte, filets fins, beaucoup d'air, sections noires pleines pour le rythme).
   Règle : aucune couleur en dur hors de :root. Les teintes dérivées sont des color-mix() des
   variables du contrat. Les pages légales peuvent charger ce fichier pour ses variables : aucune
   règle globale sur .lg (classe de leur <body> dans l'ancienne base). */

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

:root{
  color-scheme:light;
  /* contrat §3 (hex à 6 chiffres : les plans SVG d'app.js les lisent) */
  --paper:#FFFFFF;
  --paper2:#F4F4F4;
  --paper3:#E4E4E4;
  --ink:#0A0A0A;
  --ink2:#5E5E5E;
  --mute:#A3A3A3;
  --night:#000000;
  --line:#0A0A0A22;
  /* dérivés */
  --line2:color-mix(in srgb,var(--ink) 40%,transparent);
  --lineD:color-mix(in srgb,var(--paper) 22%,transparent);
  --lineD2:color-mix(in srgb,var(--paper) 46%,transparent);
  --paperD:color-mix(in srgb,var(--paper) 72%,transparent);
  --paperD2:color-mix(in srgb,var(--paper) 52%,transparent);
  --scrim:color-mix(in srgb,var(--night) 62%,transparent);
  --glass:color-mix(in srgb,var(--paper2) 94%,transparent);
  /* typo */
  --serif:"Cormorant Garamond","Noto Serif JP",Georgia,"Times New Roman",serif;
  --serifjp:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  /* alias lus par styles-app.css (repli si absent) */
  --lat:var(--serif);
  --dot:var(--serif);
  /* mise en page */
  --wrap:1240px;
  --gut:40px;
  --hdr:76px;
  --ease:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper2)}
body{
  margin:0;background:var(--paper2);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{max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.5}
h1,h2,h3,h4,.hero__catch,.final 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(--ink);color:var(--paper)}
:focus-visible{outline:1.5px solid currentColor;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}

#dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
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 éditoriaux (« Live » du site officiel) ─────────── */
.ttl{display:flex;flex-direction:column;align-items:flex-start;gap:16px;font-weight:400}
.ttl__en{font-family:var(--serif);font-weight:500;font-size:clamp(54px,7.4vw,104px);line-height:.92;letter-spacing:-.012em}
.ttl__ja{display:flex;align-items:center;gap:14px;font-family:var(--serifjp);font-weight:500;font-size:14px;line-height:1.4;letter-spacing:.24em}
.ttl__ja::before{content:"";width:28px;height:1px;background:currentColor}

.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:24px 64px;align-items:end;
  margin-bottom:64px;padding-bottom:34px;border-bottom:1px solid var(--ink)}
.shead__lead{color:var(--ink2);font-size:14.5px;line-height:2.05}
.shead--dark{border-bottom-color:var(--lineD2)}
.shead--dark .shead__lead{color:var(--paperD)}

/* ─────────── Boutons : rectangles nets, inversion au survol ─────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:52px;padding:12px 30px;border:1px solid var(--ink);border-radius:2px;
  background:transparent;color:var(--ink);font-family:var(--sans);font-weight:500;font-size:14px;
  letter-spacing:.14em;line-height:1.4;text-align:center;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .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:.35;cursor:not-allowed}
/* principal : noir plein (app.js pose aussi btn--gold) */
.btn--primary,.btn--gold{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--primary:hover,.btn--gold:hover{background:var(--paper);color:var(--ink)}
.btn--primary:disabled:hover,.btn--gold:disabled:hover{background:var(--ink);color:var(--paper)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
/* sur fond noir */
.btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--light:hover{background:transparent;color:var(--paper)}
.btn--line{background:transparent;color:var(--paper);border-color:var(--lineD2)}
.btn--line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--lg{min-height:58px;padding:14px 36px;font-size:14.5px}
.btn--full{width:100%;margin-top:14px}

.pill{display:inline-block;padding:0 12px;border:1px solid var(--ink);font-size:11px;font-weight:500;line-height:1.9;letter-spacing:.08em;white-space:nowrap}
.pill--gray{border-color:var(--mute);color:var(--ink2)}

/* ─────────── 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(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  transition:background-color .5s var(--ease),border-color .5s var(--ease),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:block;flex:0 0 auto;line-height:0;transition:opacity .5s var(--ease),visibility .5s}
.brand img{display:block;height:34px;width:auto;max-width:none}
.nav{margin-left:auto;display:flex;gap:38px;font-size:13px;font-weight:500;letter-spacing:.16em}
.nav a{position:relative;padding:6px 0;white-space:nowrap}
.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;
  border:1px solid currentColor;border-radius:2px;font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.06em;line-height:1;
  transition:background-color .35s var(--ease),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;
  background:var(--ink);color:var(--paper);font-family:var(--serif);font-weight:600;font-size:15px;line-height:1;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.cartbtn:hover{background:var(--ink);color:var(--paper)}
.cartbtn:hover em{background:var(--paper);color:var(--ink)}
/* panier non vide (classe posée par app.js) : bouton plein */
.cartbtn.has-items{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cartbtn.has-items em{background:var(--paper);color:var(--ink)}
.cartbtn.has-items:hover{background:var(--paper);color:var(--ink)}
.cartbtn.has-items:hover em{background:var(--ink);color:var(--paper)}
/* au-dessus du héros noir : transparent, blanc, logo masqué (le grand logo est juste dessous) */
body.on-hero .hdr{background:transparent;border-bottom-color:transparent;color:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
body.on-hero .brand{opacity:0;visibility:hidden}
body.on-hero .cartbtn em{background:var(--paper);color:var(--ink)}
body.on-hero .cartbtn:hover{background:var(--paper);color:var(--ink)}
body.on-hero .cartbtn:hover em{background:var(--ink);color:var(--paper)}
body.on-hero .cartbtn.has-items{background:var(--paper);color:var(--ink);border-color:var(--paper)}
body.on-hero .cartbtn.has-items em{background:var(--ink);color:var(--paper)}
body.on-hero .cartbtn.has-items:hover{background:transparent;color:var(--paper)}
body.on-hero .cartbtn.has-items:hover em{background:var(--paper);color:var(--ink)}

/* ─────────── Héros (noir, photo N&B, grand logo blanc) ───────────
   ≥ 900 px : texte à gauche sur le noir, photo des 6 à droite fondue dans le noir.
   < 900 px : photo portrait en haut (logo sur le ciel de nuit), texte dessous. */
.hero{position:relative;z-index:2;isolation:isolate;overflow:hidden;margin-top:calc(-1 * var(--hdr));
  min-height:max(680px,min(100vh,980px));min-height:max(680px,min(100svh,980px));
  display:flex;background:var(--night);color:var(--paper)}
.hero__ph{position:absolute;z-index:-2;top:0;right:0;bottom:0;width:60%;display:block}
.hero__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 64%}
.hero__veil{position:absolute;z-index:-1;top:0;right:0;bottom:0;width:60%;pointer-events:none;
  background:
    linear-gradient(90deg,var(--night) 0,color-mix(in srgb,var(--night) 72%,transparent) 14%,color-mix(in srgb,var(--night) 20%,transparent) 34%,transparent 52%),
    linear-gradient(180deg,color-mix(in srgb,var(--night) 66%,transparent) 0,transparent 24%,transparent 72%,color-mix(in srgb,var(--night) 80%,transparent) 100%)}
.hero__in{position:relative;flex:1;display:flex;align-items:center;width:100%;
  padding-top:calc(var(--hdr) + clamp(24px,4vh,56px));padding-bottom:clamp(40px,6vh,72px)}
.hero__col{width:min(620px,52%);min-width:0}
.hero__head{display:flex;flex-direction:column;align-items:flex-start}
.hero__logo{margin:0 0 0 -1.2%;line-height:0;width:100%}
.hero__logo img{display:block;width:100%;height:auto}
.hero__tour{margin-top:clamp(16px,2.4vh,26px);font-family:var(--serif);font-weight:500;font-size:clamp(13px,1.1vw,16px);
  letter-spacing:.32em;color:var(--paperD)}
.hero__body{margin-top:clamp(34px,5.4vh,60px)}
.hero__catch{font-family:var(--serifjp);font-weight:500;font-size:clamp(21px,1.9vw,28px);line-height:1.7;letter-spacing:.1em}
.hdates{margin-top:22px;border-top:1px solid var(--lineD2)}
.hdates__row{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:4px 18px;align-items:center;padding:13px 0;border-bottom:1px solid var(--lineD)}
.hdates__city{display:flex;flex-direction:column;font-family:var(--serifjp);font-size:11.5px;letter-spacing:.2em;line-height:1.45;color:var(--paperD)}
.hdates__city span{font-family:var(--serif);font-weight:500;font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper)}
.hdates__v{font-family:var(--serifjp);font-weight:500;font-size:15px;letter-spacing:.08em;line-height:1.5}
.hdates__v em{display:block;width:max-content;margin-top:4px;padding:0 7px;border:1px solid var(--lineD2);font-style:normal;font-family:var(--sans);
  font-size:10px;letter-spacing:.12em;line-height:1.75;color:var(--paperD)}
.hdates__d{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 20px}
.hdates__d button{position:relative;display:inline-flex;align-items:baseline;gap:2px;padding:2px 0;font-family:var(--serif);font-weight:500;
  font-size:29px;line-height:1.1;letter-spacing:.02em;white-space:nowrap;transition:opacity .3s}
.hdates__d button i{font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:0;color:var(--paperD)}
.hdates__d button::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:currentColor;transition:right .45s var(--ease)}
.hdates__d button:hover::after{right:0}
.hero__act{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:32px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.live{display:flex;flex-wrap:wrap;align-items:center;gap:2px 7px;font-size:12.5px;letter-spacing:.12em;color:var(--paperD)}
.live i{flex:0 0 auto;width:7px;height:7px;margin-right:4px;border-radius:50%;background:var(--paper);animation:live 2.6s ease-out infinite}
.live b{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1;letter-spacing:.02em;color:var(--paper)}
.live__sep{color:var(--paperD2)}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--paper) 55%,transparent)}70%,100%{box-shadow:0 0 0 9px color-mix(in srgb,var(--paper) 0%,transparent)}}
.trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:11.5px;letter-spacing:.14em;color:var(--paperD)}
.trust li{white-space:nowrap}
.trust li+li::before{content:"";display:inline-block;width:1px;height:10px;margin:0 12px;vertical-align:-1px;background:var(--lineD2)}

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

/* ─────────── Sections ─────────── */
.sec{position:relative;z-index:2;padding:136px 0;scroll-margin-top:var(--hdr)}
.sec--gray{background:var(--paper2)}
.sec--white{background:var(--paper)}
.sec--night{background:var(--night);color:var(--paper)}

/* ─────────── お申し込みの流れ ─────────── */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.stp{position:relative;padding:4px 40px 8px}
.stp:first-child{padding-left:0}
.stp:last-child{padding-right:0}
.stp+.stp{border-left:1px solid var(--line)}
.stp__n{display:block;font-family:var(--serif);font-weight:400;font-size:76px;line-height:.9;letter-spacing:-.01em}
.stp h3{margin-top:26px;font-family:var(--serifjp);font-weight:500;font-size:19px;line-height:1.55;letter-spacing:.06em}
.stp p{margin-top:12px;color:var(--ink2);font-size:14px;line-height:2}
.facts3{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--ink)}
.facts3 li{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 16px;padding:26px 16px;text-align:center}
.facts3 li+li{border-left:1px solid var(--line)}
.facts3 b{font-family:var(--serifjp);font-weight:500;font-size:15px;letter-spacing:.06em;white-space:nowrap}
.facts3 b span{margin-right:3px;font-family:var(--serif);font-weight:500;font-size:46px;line-height:1;letter-spacing:0}
.facts3 li>span{font-size:13px;color:var(--ink2);letter-spacing:.08em}

/* ─────────── 公演一覧 (lignes, puces et badges : styles-app.css) ─────────── */
.shows__in{min-width:0}
.shows__bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:0 24px}
.shows__bar .cpick{flex:1 1 auto;min-width:0}
.fcount{margin:0 0 26px auto;font-size:12px;letter-spacing:.12em;color:var(--ink2);text-align:right;white-space:nowrap}
.fcount b{margin-right:6px;font-family:var(--serif);font-weight:500;font-size:24px;line-height:1;color:var(--ink);vertical-align:-2px}
.empty{padding:56px 0;text-align:center;color:var(--ink2);font-size:14px}
.more{display:flex;justify-content:center;margin-top:36px}

/* ─────────── 座席について (noir, photo de stade en fond) ─────────── */
.seat{isolation:isolate;overflow:hidden}
.seat__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.5;filter:grayscale(1) contrast(1.05)}
.seat::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) 55%,transparent) 26%,color-mix(in srgb,var(--night) 72%,transparent) 62%,var(--night) 100%)}
.seat__in{position:relative}
.seat__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:40px 72px;align-items:end;margin-bottom:72px}
.seat__top .shead{margin-bottom:0;grid-template-columns:minmax(0,1fr)}
.tkt{padding:30px 32px 26px;border:1px solid var(--lineD2);background:color-mix(in srgb,var(--night) 40%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tkt__k{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--serifjp);font-size:14px;letter-spacing:.14em}
.tkt__k small{font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--paperD)}
.tkt__p{margin-top:12px;font-family:var(--serifjp);font-size:16px;letter-spacing:.08em}
.tkt__p b{margin-right:6px;font-family:var(--serif);font-weight:500;font-size:clamp(64px,6vw,84px);line-height:1;letter-spacing:-.01em}
.tkt__row{display:grid;grid-template-columns:1fr 1fr;margin-top:20px;border-top:1px solid var(--lineD)}
.tkt__row span{padding-top:14px;font-size:12.5px;letter-spacing:.1em;color:var(--paperD)}
.tkt__row span+span{padding-left:18px;border-left:1px solid var(--lineD)}
.tkt__row b{margin:0 3px;font-family:var(--serif);font-weight:500;font-size:28px;line-height:1;color:var(--paper)}

.points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--lineD2)}
.points li{padding:34px 40px 10px}
.points li:first-child{padding-left:0}
.points li:last-child{padding-right:0}
.points li+li{border-left:1px solid var(--lineD)}
.points__n{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:30px;line-height:1;color:var(--paperD)}
.points h3{margin-top:20px;font-family:var(--serifjp);font-weight:500;font-size:19px;letter-spacing:.08em}
.points p{margin-top:12px;font-size:13.5px;line-height:2.05;color:var(--paperD)}

/* panneau clair des 席種 posé sur la photo (les cartes de #zoneGrid : styles-app.css) */
.seat__zones{margin-top:80px;padding:44px 48px 48px;background:var(--paper2);color:var(--ink)}
.seat__zt{display:flex;align-items:baseline;gap:18px;margin-bottom:28px;font-family:var(--serifjp);font-weight:500;font-size:14px;letter-spacing:.2em}
.seat__zt span{font-family:var(--serif);font-weight:500;font-size:clamp(34px,3.4vw,46px);line-height:1;letter-spacing:-.005em}

/* ─────────── Galerie éditoriale (aucune légende) ─────────── */
.gal-sec{padding-bottom:128px}
.galhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 64px;align-items:end;margin-bottom:56px}
.galhead__en{font-family:var(--serif);font-weight:500;font-size:clamp(54px,7.4vw,104px);line-height:.92;letter-spacing:-.012em}
.galhead__en i{font-weight:400}
.galhead__tx h2{font-family:var(--serifjp);font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.65;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:16px;
  grid-template-rows:clamp(300px,40vw,580px) clamp(240px,29vw,420px) clamp(280px,36vw,520px);
  grid-template-areas:
    "a a a a a a a a b b b b"
    "c c c c n n n n d d d d"
    "e e e e e f f f f f f f"}
.g{position:relative;overflow:hidden;background:var(--paper3);min-height:0}
.g img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform 1.6s var(--ease)}
.g:hover img{transform:scale(1.025)}
.g--live{grid-area:a}
.g--live img{object-position:50% 55%}
.g--roof{grid-area:b}
.g--roof img{object-position:50% 62%}
.g--white{grid-area:c}
.g--white img{object-position:50% 30%}
.g--note{grid-area:n;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:28px 20px;
  background:var(--night);color:var(--paper);text-align:center}
.gnote__d{font-family:var(--serif);font-weight:400;font-size:clamp(56px,6vw,88px);line-height:1;letter-spacing:-.01em}
.gnote__k{font-family:var(--serif);font-style:italic;font-size:20px;letter-spacing:.08em;color:var(--paperD)}
.gnote__v{font-family:var(--serifjp);font-size:13px;letter-spacing:.2em;color:var(--paperD)}
.g--note .btn{margin-top:16px;min-height:44px;padding:8px 22px;font-size:12.5px;color:var(--paper);border-color:var(--lineD2)}
.g--note .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.g--ice{grid-area:d}
.g--ice img{object-position:50% 58%}
.g--stage{grid-area:e}
.g--stage img{object-position:50% 40%}
.g--moon{grid-area:f}
.g--moon img{object-position:50% 52%}

/* ─────────── 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;border:0}
.faqhead .shead__lead{margin-top:28px}

/* ─────────── Dernier appel ─────────── */
.final{position:relative;z-index:2;isolation:isolate;overflow:hidden;padding:170px 0 160px;background:var(--night);color:var(--paper);text-align:center}
.final__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(1)}
.final::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--night) 0,color-mix(in srgb,var(--night) 35%,transparent) 30%,color-mix(in srgb,var(--night) 55%,transparent) 66%,var(--night) 100%),
    radial-gradient(ellipse 50% 40% at 50% 52%,color-mix(in srgb,var(--night) 55%,transparent),transparent)}
.final__en{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1.2;letter-spacing:.02em;color:var(--paperD)}
.final h2{margin-top:22px;font-family:var(--serifjp);font-weight:500;font-size:clamp(26px,3.4vw,44px);line-height:1.6;letter-spacing:.1em;text-wrap:balance}
.final__sub{margin-top:18px;font-size:13.5px;letter-spacing:.14em;color:var(--paperD)}
.final .btn{margin-top:42px}

/* ─────────── Pied de page ─────────── */
.ft{position:relative;z-index:2;padding:80px 0 34px;background:var(--paper2);border-top:1px solid var(--line);text-align:center}
.ft__logo{display:inline-block;line-height:0}
.ft__logo img{display:block;height:44px;width:auto;max-width:100%}
.ftlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 40px;margin-top:44px;font-size:12.5px;letter-spacing:.12em}
.ftlinks a{position:relative;padding:2px 0}
.ftlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .45s var(--ease)}
.ftlinks a:hover::after{right:0}
.ftcopy{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:11.5px;letter-spacing:.16em;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:10px 10px 10px 18px;background:var(--night);color:var(--paper);border:1px solid var(--lineD2);
  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(--serifjp);font-size:14px;font-weight:500;letter-spacing:.06em;white-space:nowrap}
.mbar__tx span{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--paperD);white-space:nowrap}
.mbar .btn{flex:0 0 auto;min-height:44px;padding:8px 20px;font-size:13px;background:var(--paper);color:var(--ink);border-color:var(--paper)}


/* ─────────── Apparition ─────────── */
.rise{animation:rise 1.4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.js .rv{opacity:0;transform:translateY(22px);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}
.gal .rv:nth-child(even){transition-delay:.08s}

/* ═══════════ Responsive ═══════════ */
@media (max-width:1180px){
  .nav{gap:28px}
  /* dates du héros en version compacte : ville + stade à gauche, dates en colonne à droite */
  .hdates__row{grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:14px 0}
  .hdates__city{grid-column:1;flex-direction:row;align-items:baseline;gap:10px}
  .hdates__v{grid-column:1}
  .hdates__v em{display:inline-block;margin:0 0 0 10px;vertical-align:2px}
  .hdates__d{grid-column:2;grid-row:1/3;flex-direction:column;align-items:flex-end;gap:2px}
  .hdates__d button{font-size:26px}
  .hero__col{width:min(540px,50%)}
  .hero__ph,.hero__veil{width:54%}
}
@media (max-width:1040px){
  .nav{display:none}
  .cartbtn{margin-left:auto}
  .seat__top{grid-template-columns:minmax(0,1fr);gap:40px}
  .tkt{max-width:440px}
  .faqwrap{grid-template-columns:minmax(0,1fr);gap:8px}
  .faqhead{position:static}
}
@media (max-width:899px){
  :root{--gut:28px;--hdr:64px}
  .brand img{height:28px}
  /* héros mobile : photo portrait en haut, logo sur le ciel noir, texte dessous sur fond noir */
  .hero{--phh:min(calc(100vw * 4 / 3),860px);min-height:0;display:block}
  .hero__ph,.hero__veil{left:0;width:100%;bottom:auto;height:var(--phh)}
  .hero__ph img{object-position:50% 72%}
  .hero__veil{height:calc(var(--phh) + 2px);
    background:linear-gradient(180deg,color-mix(in srgb,var(--night) 60%,transparent) 0,transparent 30%,transparent 58%,color-mix(in srgb,var(--night) 70%,transparent) 84%,var(--night) 100%)}
  .hero__in{display:block;padding-top:calc(var(--hdr) + 6vw);padding-bottom:56px}
  .hero__col{width:auto}
  .hero__head{align-items:center;min-height:calc(var(--phh) - var(--hdr) - 6vw - 40px);text-align:center}
  .hero__logo{width:min(86vw,560px);margin:0 auto}
  .hero__tour{font-size:clamp(11px,3vw,15px);letter-spacing:.3em;text-indent:.3em}
  .hero__body{margin-top:0}
  .hero__catch{font-size:clamp(21px,5.6vw,28px)}
  .hero__act{margin-top:30px}
  .shead{grid-template-columns:minmax(0,1fr);gap:22px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .stp,.stp:first-child,.stp:last-child{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:20px;padding:30px 0}
  .stp+.stp{border-left:0;border-top:1px solid var(--line)}
  .stp:first-child{padding-top:0}
  .stp__n{grid-row:1/3;font-size:56px}
  .stp h3{margin-top:4px}
  .stp p{margin-top:8px}
  .facts3{margin-top:48px}
  .points{grid-template-columns:minmax(0,1fr)}
  .points li,.points li:first-child,.points li:last-child{padding:30px 0}
  .points li+li{border-left:0;border-top:1px solid var(--lineD)}
  .galhead{grid-template-columns:minmax(0,1fr);gap:22px}
  .gal{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:62vw 66vw auto 66vw 64vw;
    grid-template-areas:"a a" "b d" "n n" "c e" "f f"}
  .g--note{padding:44px 20px}
  .seat__zones{padding:36px 28px 32px}
  .mbar{display:flex}
  .ft{padding-bottom:110px}
}
@media (max-width:760px){
  .br-pc{display:none}
  .sec{padding:96px 0}
  .facts3{grid-template-columns:minmax(0,1fr)}
  .facts3 li{justify-content:space-between;padding:18px 4px}
  .facts3 li+li{border-left:0;border-top:1px solid var(--line)}
  .facts3 b span{font-size:40px}
}
@media (max-width:600px){
  :root{--gut:20px;--hdr:60px}
  .br-sp{display:inline}
  body{font-size:14.5px}
  .hdr__in{gap:12px}
  .brand img{height:24px}
  .cartbtn{height:38px;padding:0 6px 0 14px;font-size:16px;gap:10px}
  .cartbtn em{min-width:24px;height:24px;font-size:14px}
  .ttl{gap:12px}
  .ttl__en{font-size:clamp(46px,13.5vw,64px)}
  .ttl__ja{font-size:13px}
  .shead{margin-bottom:44px;padding-bottom:26px}
  .shead__lead{font-size:14px}
  .hdates__v{font-size:14px}
  .hdates__v em{margin-left:8px;padding:0 6px;font-size:9.5px;letter-spacing:.08em}
  .hdates__d button{font-size:25px}
  .cta{width:100%;gap:10px}
  .cta .btn{flex:1 1 100%}
  .hero__act{align-items:stretch}
  .live{justify-content:center}
  .trust{justify-content:center;font-size:11px;letter-spacing:.08em}
  .trust li:nth-child(4){display:none}
  .trust li+li::before{margin:0 10px}
  .mq{padding:13px 0 11px}
  .mq__track{font-size:16px}
  .sec{padding:84px 0}
  .stp,.stp:first-child,.stp:last-child{grid-template-columns:56px minmax(0,1fr);column-gap:14px}
  .stp__n{font-size:44px}
  .stp h3{font-size:17px}
  .stp p{font-size:13.5px}
  .seat__top{margin-bottom:48px}
  .tkt{padding:24px 20px 22px}
  .tkt__k{flex-direction:column;gap:2px}
  .points h3{font-size:17px}
  .seat__zones{margin-top:56px;padding:30px 18px 28px;margin-inline:calc(-1 * var(--gut) + 8px)}
  .galhead__en{font-size:clamp(44px,12.4vw,62px)}
  .gal{gap:8px}
  .final{padding:120px 0 112px}
  .final .btn{width:100%;max-width:360px}
  .ft{padding-top:60px}
  .ft__logo img{height:34px}
  .ftlinks{flex-direction:column;align-items:center;gap:14px;margin-top:36px}
}
@media (max-width:380px){
  .cartbtn{padding:0 5px 0 12px;font-size:15px;gap:8px}
  .hdates__d button{font-size:22px}
  .facts3 li>span{font-size:12px}
  .mbar{padding-left:14px}
  .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}
}