/* ═══ チケットウィンド ・ TOMORROW X TOGETHER WORLD TOUR ＜STEAL THE WIND＞ IN JAPAN ═══
   Page d'accueil seulement : tokens, en-tête, héros, sections, titres, galerie, pied, boutons de la page,
   bandeau #mq, barre mobile, couche de vent #wind. Tout ce que génère app.js (lignes, modale, plans,
   panier, toast, cartes de 席種 et de dôme, FAQ, puces de ville) est stylé par styles-app.css
   (voir _contract/dom-hooks.md).
   DA « STEAL THE WIND » : herbes hautes au vent, vert nuit, blanc des tenues, ciel d'orage bleu.
   IM Fell English pour les titres latins (écho au lettrage encré du logo), Barlow en capitales
   espacées pour dates et libellés (comme l'affiche officielle), Shippori Mincho pour les titres
   japonais, Noto Sans JP pour le texte. Thème sombre, sections os (--bone) pour respirer.
   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:dark;
  /* contrat §3 (hex à 6 chiffres : les plans SVG d'app.js les lisent) */
  --night:#04120A;
  --forest:#00260A;
  --moss:#123A22;
  --grass:#2E5B3E;
  --sage:#8DA696;
  --mist:#D5E0D8;
  --bone:#F2EFE6;
  --paper:#FFFFFF;
  --ink:#0B1A13;
  --ink2:#4A5A51;
  --mute:#8A948E;
  --sky:#9DC3D6;
  --storm:#2B4A5C;
  --sand:#C9B98F;
  --line:#F2EFE624;
  /* dérivés */
  --line2:color-mix(in srgb,var(--bone) 40%,transparent);
  --lineL:color-mix(in srgb,var(--ink) 14%,transparent);
  --lineL2:color-mix(in srgb,var(--ink) 55%,transparent);
  --boneD:color-mix(in srgb,var(--bone) 76%,transparent);
  --boneD2:color-mix(in srgb,var(--bone) 52%,transparent);
  --scrim:color-mix(in srgb,var(--night) 72%,transparent);
  --glass:color-mix(in srgb,var(--night) 90%,transparent);
  /* typo */
  --display:"IM Fell English","Shippori Mincho",Georgia,"Times New Roman",serif;
  --label:"Barlow","Helvetica Neue",Arial,"Noto Sans JP",sans-serif;
  --serifjp:"Shippori Mincho","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) */
  --serif:var(--display);
  --lat:var(--label);
  --dot:var(--label);
  /* 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(--night)}
body{
  margin:0;background:var(--night);color:var(--bone);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:600;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(--bone);color:var(--ink)}
: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}

/* couche de vent (wind.js) : au-dessus des sections, sous l'en-tête, la barre mobile et la modale */
#wind{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 éditoriaux ─────────── */
.ttl{display:flex;flex-direction:column;align-items:flex-start;gap:18px;font-weight:400}
.ttl__en{font-family:var(--display);font-weight:400;font-size:clamp(54px,7.2vw,102px);line-height:.94;letter-spacing:-.01em}
.ttl__ja{display:flex;align-items:center;gap:14px;font-family:var(--serifjp);font-weight:600;font-size:14px;line-height:1.4;letter-spacing:.26em}
.ttl__ja::before{content:"";width:30px;height:1px;background:currentColor;opacity:.7}

.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(--line2)}
.shead__lead{color:var(--sage);font-size:14.5px;line-height:2.05}
.sec--bone .shead{border-bottom-color:var(--ink)}
.sec--bone .shead__lead{color:var(--ink2)}

/* ─────────── Boutons : rectangles nets (2px), 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(--bone);border-radius:2px;
  background:transparent;color:var(--bone);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 sur sombre : os plein, texte encre (app.js peut aussi poser btn--gold) */
.btn--primary,.btn--gold,.btn--light{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn--primary:hover,.btn--gold:hover,.btn--light:hover{background:transparent;color:var(--bone)}
.btn--primary:disabled:hover,.btn--gold:disabled:hover{background:var(--bone);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--bone);border-color:var(--line2)}
.btn--ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn--line{background:transparent;color:var(--bone);border-color:var(--line2)}
.btn--line:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
/* sur clair : encre plein, texte os */
.sec--bone .btn--primary,.sec--bone .btn--light{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.sec--bone .btn--primary:hover,.sec--bone .btn--light:hover{background:transparent;color:var(--ink)}
.sec--bone .btn--ghost,.sec--bone .btn--line{color:var(--ink);border-color:var(--lineL2)}
.sec--bone .btn--ghost:hover,.sec--bone .btn--line:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.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 currentColor;font-size:11px;font-weight:500;line-height:1.9;letter-spacing:.08em;white-space:nowrap}
.pill--gray{border-color:var(--mute);color:var(--mute)}

/* ─────────── 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(--bone);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  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:block;flex:0 0 auto;line-height:0;transition:opacity .5s var(--ease),visibility .5s}
.brand img{display:block;height:42px;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 var(--line2);border-radius:2px;font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.24em;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(--bone);color:var(--ink);font-family:var(--label);font-weight:600;font-size:14px;line-height:1;border-radius:1px;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.cartbtn:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.cartbtn:hover em{background:var(--ink);color:var(--bone)}
/* panier non vide (classe posée par app.js) : bouton plein */
.cartbtn.has-items{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.cartbtn.has-items em{background:var(--ink);color:var(--bone)}
.cartbtn.has-items:hover{background:transparent;color:var(--bone)}
.cartbtn.has-items:hover em{background:var(--bone);color:var(--ink)}
/* 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 le key visual ───────────
   Le KV n'a qu'un bon quart de ciel au-dessus des têtes : le titre (logo + « TOMORROW X TOGETHER /
   WORLD TOUR IN JAPAN » logé dans le vide en haut à droite du lettrage, comme le lockup officiel)
   tient sur le ciel, centré, et sa taille suit la hauteur d'écran pour ne jamais toucher un visage.
   Accroche, boutons et dates vivent en bas, sur un voile vert nuit qui monte des herbes.
   Écrans étroits ou portrait : visuel 4:5 en haut (logo sur le grand ciel), texte dessous. */
.hero{position:relative;z-index:2;isolation:isolate;overflow:hidden;margin-top:calc(-1 * var(--hdr));
  min-height:max(660px,100vh);min-height:max(660px,100svh);display:flex;background:var(--night);color:var(--bone)}
.hero__ph{position:absolute;inset:0;z-index:-2;display:block;overflow:hidden;background:var(--storm)}
.hero__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  transform-origin:50% 30%;animation:kb 36s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{from{transform:scale(1.01)}to{transform:scale(1.075) translate3d(-.8%,0,0)}}
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--night) 50%,transparent) 0,color-mix(in srgb,var(--storm) 12%,transparent) 16%,transparent 30%),
    radial-gradient(38% 34% at 80% 86%,color-mix(in srgb,var(--night) 55%,transparent),transparent),
    linear-gradient(0deg,var(--night) 0,color-mix(in srgb,var(--night) 88%,transparent) 14%,color-mix(in srgb,var(--night) 52%,transparent) 32%,color-mix(in srgb,var(--forest) 12%,transparent) 50%,transparent 60%)}
.hero__in{position:relative;flex:1;width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);grid-template-rows:auto minmax(28px,1fr) auto auto;
  grid-template-areas:"brand brand" ". ." "msg dates" "act dates";column-gap:64px;
  padding-top:calc(var(--hdr) + 4px);padding-bottom:clamp(34px,5.6vh,60px)}

/* titre : logo + ligne de tournée nichée dans le lettrage */
.hero__brand{grid-area:brand;justify-self:center;position:relative;container-type:inline-size;
  width:clamp(340px,min(44vw,calc((31vh - var(--hdr) - 8px) * 2.685)),760px);
  width:clamp(340px,min(44vw,calc((31svh - var(--hdr) - 8px) * 2.685)),760px)}
.hero__logo{margin:0;line-height:0;width:100%}
.hero__logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 20px color-mix(in srgb,var(--storm) 60%,transparent))}
.hero__tour{position:absolute;left:65%;top:19.5%;display:flex;flex-direction:column;align-items:flex-start;gap:0;
  font-family:var(--label);font-weight:600;font-size:2.3cqi;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 12px color-mix(in srgb,var(--storm) 80%,transparent)}
.hero__tour span{white-space:nowrap}

.hero__msg{grid-area:msg;align-self:end;max-width:600px}
.hero__catch{font-family:var(--serifjp);font-weight:600;font-size:clamp(26px,2.5vw,38px);line-height:1.58;letter-spacing:.08em}
.hero__sub{margin-top:12px;font-size:14px;letter-spacing:.12em;color:var(--boneD)}
.hero__act{grid-area:act;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:28px}
.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(--boneD)}
.live i{flex:0 0 auto;width:7px;height:7px;margin-right:4px;border-radius:50%;background:var(--bone);animation:live 2.6s ease-out infinite}
.live b{font-family:var(--label);font-weight:500;font-size:22px;line-height:1;letter-spacing:.02em;color:var(--bone)}
.live__sep{color:var(--boneD2)}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bone) 55%,transparent)}70%,100%{box-shadow:0 0 0 9px color-mix(in srgb,var(--bone) 0%,transparent)}}
.trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:11.5px;letter-spacing:.14em;color:var(--boneD)}
.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(--line2)}

/* dates : liste de tournée, une ligne par ville */
.hdates{grid-area:dates;align-self:end;width:min(540px,42vw);border-top:1px solid var(--line2)}
.hd{display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:center;gap:2px 18px;padding:11px 0 10px;border-bottom:1px solid var(--line)}
.hd__c{display:flex;flex-direction:column;font-family:var(--serifjp);font-weight:600;font-size:11px;letter-spacing:.2em;line-height:1.35;color:var(--boneD)}
.hd__c span{font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--bone)}
.hd__v{min-width:0;font-size:12.5px;letter-spacing:.08em;line-height:1.5;color:var(--boneD)}
.hd__d{display:flex;align-items:baseline;justify-content:flex-end}
.hd__d button{position:relative;display:inline-flex;align-items:baseline;gap:3px;padding:2px 0;font-family:var(--label);font-weight:500;
  font-size:27px;line-height:1.1;letter-spacing:.02em;white-space:nowrap}
.hd__d button+button{margin-left:18px}
.hd__d button+button::before{content:"";position:absolute;left:-11px;top:50%;width:3px;height:3px;margin-top:-1px;border-radius:50%;background:var(--boneD2)}
.hd__d button i{font-style:normal;font-family:var(--sans);font-size:10.5px;letter-spacing:0;color:var(--boneD)}
.hd__d button::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1px;background:currentColor;transition:right .45s var(--ease)}
.hd__d button:hover::after{right:0}

/* ─────────── Bande défilante (texte écrit par app.js dans #mq) : elle file avec le vent ─────────── */
.mq{position:relative;z-index:2;overflow:hidden;padding:18px 0 16px;background:var(--forest);color:var(--bone);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mq__track{display:block;width:max-content;white-space:nowrap;font-family:var(--display);font-style:italic;font-weight:400;font-size:21px;line-height:1.3;letter-spacing:.06em;
  animation:mqr 130s linear infinite}
@keyframes mqr{from{transform:translateX(-50%)}to{transform:none}}

/* ─────────── Sections ─────────── */
.sec{position:relative;z-index:2;isolation:isolate;padding:140px 0;scroll-margin-top:var(--hdr)}
.sec--night{background:var(--night);color:var(--bone)}
.sec--forest{background:var(--forest);color:var(--bone)}
.sec--bone{background:var(--bone);color:var(--ink)}
.sec--bone ::selection{background:var(--ink);color:var(--bone)}
/* textures en fond (herbes, dôme, vent) : très atténuées, voile par-dessus */
.sec__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;pointer-events:none}
.sec__bg+.wrap{position:relative}

/* ─────────── お申し込みの流れ (os) ─────────── */
.flow{overflow:hidden}
.flow::before{content:"";position:absolute;z-index:-1;right:-6%;top:-10%;width:52%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sand) 18%,transparent),transparent)}
.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(--lineL)}
.stp__n{display:flex;align-items:baseline;gap:10px;font-family:var(--label);font-weight:500;font-size:60px;line-height:.9;letter-spacing:.01em;color:var(--grass)}
.stp__n::after{content:"";flex:1;height:1px;margin-left:6px;background:var(--lineL);transform:translateY(-14px)}
.stp h3{margin-top:24px;font-family:var(--serifjp);font-weight:700;font-size:18.5px;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:76px 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:28px 14px 24px;text-align:center}
.facts3 li+li{border-left:1px solid var(--lineL)}
.facts3 b{display:flex;align-items:baseline;gap:4px;font-family:var(--serifjp);font-weight:700;font-size:15px;letter-spacing:.06em;white-space:nowrap;line-height:46px}
.facts3 li:first-child b{font-size:24px;letter-spacing:.14em}
.facts3 b span{font-family:var(--label);font-weight:500;font-size:46px;line-height:1;letter-spacing:0}
.facts3 li>span{font-size:12.5px;color:var(--ink2);letter-spacing:.08em;line-height:1.7}

/* ─────────── 公演一覧 (nuit, herbes en fond ; lignes, puces et badges : styles-app.css) ─────────── */
.shows__bg{opacity:.34;object-position:50% 100%}
.shows::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) 82%,transparent) 30%,color-mix(in srgb,var(--night) 70%,transparent) 70%,color-mix(in srgb,var(--night) 55%,transparent) 100%)}
.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(--sage);text-align:right;white-space:nowrap}
.fcount b{margin-right:6px;font-family:var(--label);font-weight:500;font-size:24px;line-height:1;color:var(--bone);vertical-align:-2px}
.empty{padding:56px 0;text-align:center;color:var(--sage);font-size:14px}
.more{display:flex;justify-content:center;margin-top:36px}

/* ─────────── 座席について (forêt, dôme aux lumières en fond) ─────────── */
.seat{overflow:hidden}
.seat{background:var(--night)}
.seat__bg{opacity:.62;object-position:50% 30%}
.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) 40%,transparent) 22%,color-mix(in srgb,var(--night) 62%,transparent) 48%,color-mix(in srgb,var(--night) 88%,transparent) 72%,var(--night) 100%),
    linear-gradient(90deg,color-mix(in srgb,var(--storm) 22%,transparent),transparent 60%)}
.seat__in{position:relative}
.seat__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px 72px;align-items:end;margin-bottom:72px}
.seat__top .shead{margin-bottom:0;grid-template-columns:minmax(0,1fr)}
.tkt{padding:28px 30px 24px;border:1px solid var(--line2);border-radius:2px;background:color-mix(in srgb,var(--night) 46%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tkt__k{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--serifjp);font-weight:600;font-size:14px;letter-spacing:.16em}
.tkt__k small{font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--sage)}
.tkt__list{list-style:none;margin:14px 0 0;padding:0}
.tkt__list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.tkt__n{min-width:0;font-size:13.5px;letter-spacing:.06em;line-height:1.5}
.tkt__n small{display:block;font-size:11px;letter-spacing:.08em;color:var(--sage)}
.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(--label);font-weight:500;font-size:30px;line-height:1;letter-spacing:.01em}
.tkt__list li:first-child b span{font-size:36px}
.tkt__row{display:grid;grid-template-columns:1fr 1fr;margin-top:6px;border-top:1px solid var(--line2)}
.tkt__row span{padding-top:14px;font-size:12.5px;letter-spacing:.1em;color:var(--sage)}
.tkt__row span+span{padding-left:18px;border-left:1px solid var(--line)}
.tkt__row b{margin:0 3px;font-family:var(--label);font-weight:500;font-size:26px;line-height:1;color:var(--bone)}

.points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2)}
.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(--line)}
.points__n{display:block;font-family:var(--display);font-style:italic;font-weight:400;font-size:30px;line-height:1;color:var(--sand)}
.points h3{margin-top:20px;font-family:var(--serifjp);font-weight:600;font-size:19px;letter-spacing:.08em}
.points p{margin-top:12px;font-size:13.5px;line-height:2.05;color:var(--sage)}

/* panneau des 席種 (les cartes de #zoneGrid : styles-app.css) */
.seat__zones{margin-top:80px;padding:44px 48px 48px;border:1px solid var(--line);border-radius:2px;
  background:color-mix(in srgb,var(--night) 62%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.seat__zt{display:flex;align-items:baseline;gap:18px;margin-bottom:28px;font-family:var(--serifjp);font-weight:600;font-size:14px;letter-spacing:.2em}
.seat__zt span{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.4vw,46px);line-height:1;letter-spacing:-.005em}

/* ─────────── Galerie éditoriale (aucune légende) ─────────── */
.gal-sec{padding-bottom:150px;overflow:hidden;
  background:linear-gradient(180deg,var(--night) 0,var(--forest) 300px,var(--forest) calc(100% - 300px),var(--night) 100%)}
.gal-sec::before{content:"";position:absolute;z-index:-1;left:-14%;top:-6%;width:72%;height:46%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--grass) 34%,transparent),transparent)}
.galhead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px 64px;align-items:end;margin-bottom:60px}
.galhead__en{font-family:var(--display);font-weight:400;font-size:clamp(58px,8vw,124px);line-height:.9;letter-spacing:-.012em}
.galhead__en i{font-size:.62em;letter-spacing:0;color:var(--sage)}
.galhead__tx h2{font-family:var(--serifjp);font-weight:600;font-size:clamp(22px,2.2vw,30px);line-height:1.65;letter-spacing:.1em}
.galhead__tx p{margin-top:16px;color:var(--sage);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(320px,40vw,580px) clamp(250px,29vw,420px) clamp(250px,29vw,420px) clamp(240px,26vw,380px);
  grid-template-areas:
    "a a a a a a a b b b b b"
    "c c c c c c c c d d d d"
    "f f f f e e e e e e e e"
    "g g g g g g g n n n n n"}
.g{position:relative;overflow:hidden;background:var(--night);min-height:0;border-radius:1px}
.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--field{grid-area:a}
.g--field img{object-position:50% 45%}
.g--soobin{grid-area:b}
.g--soobin img{object-position:50% 40%}
.g--dome{grid-area:c}
.g--dome img{object-position:50% 60%}
.g--back{grid-area:d}
.g--back img{object-position:50% 40%}
.g--pink{grid-area:f}
.g--pink img{object-position:50% 50%}
.g--live{grid-area:e}
.g--live img{object-position:50% 40%}
.g--stage{grid-area:g}
.g--stage img{object-position:50% 38%}
/* photos live / coulisses (rouge, rose vif) : un cran de saturation en moins pour vivre dans le vert nuit */
.g--back img,.g--live img,.g--stage img{filter:saturate(.8)}
.g--pink img{filter:saturate(.66)}
.g--note{grid-area:n;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:28px 20px;
  background:var(--night);color:var(--bone);text-align:center;border:1px solid var(--line)}
.gnote__k{font-family:var(--display);font-style:italic;font-size:22px;letter-spacing:.04em;color:var(--sand)}
.gnote__d{font-family:var(--label);font-weight:500;font-size:clamp(64px,6.6vw,96px);line-height:1;letter-spacing:.01em}
.gnote__v{margin-top:4px;font-family:var(--serifjp);font-weight:600;font-size:13px;letter-spacing:.2em;color:var(--boneD)}
.g--note .btn{margin-top:18px;min-height:44px;padding:8px 22px;font-size:12.5px}

/* ─────────── 会場 (nuit, champ au vent en fond ; cartes : styles-app.css) ─────────── */
.venues{overflow:hidden}
/* même champ que la vidéo finale : ici on n'en garde que le ciel d'orage, en bandeau */
.venues__bg{bottom:auto;height:clamp(420px,46vw,680px);opacity:.75;object-position:50% 0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,var(--night) 16%,var(--night) 48%,transparent 96%);
  mask-image:linear-gradient(180deg,transparent 0,var(--night) 16%,var(--night) 48%,transparent 96%)}
.venues::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--night) 20%,transparent) 0,color-mix(in srgb,var(--night) 26%,transparent) 260px,color-mix(in srgb,var(--night) 82%,transparent) 560px,var(--night) 760px)}

/* ─────────── FAQ (os ; 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 : herbes au vent en vidéo ─────────── */
.final{position:relative;z-index:2;isolation:isolate;overflow:hidden;padding:180px 0 170px;background:var(--forest);color:var(--bone);text-align:center}
.final__media{position:absolute;inset:0;z-index:-2;background:var(--forest)}
.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) 30%,transparent) 26%,color-mix(in srgb,var(--night) 40%,transparent) 64%,var(--night) 100%),
    radial-gradient(ellipse 46% 42% at 50% 50%,color-mix(in srgb,var(--night) 50%,transparent),transparent)}
.final__in{display:flex;flex-direction:column;align-items:center}
.final__logo{display:block;width:min(560px,78vw);height:auto;filter:drop-shadow(0 2px 22px color-mix(in srgb,var(--night) 60%,transparent))}
.final__en{margin-top:18px;font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:var(--boneD)}
.final h2{margin-top:44px;font-family:var(--serifjp);font-weight:600;font-size:clamp(28px,3.4vw,46px);line-height:1.5;letter-spacing:.12em;text-indent:.12em}
.final__sub{margin-top:16px;font-size:13.5px;letter-spacing:.14em;color:var(--boneD)}
.final .btn{margin-top:42px}

/* ─────────── Pied de page ─────────── */
.ft{position:relative;z-index:2;padding:84px 0 34px;background:var(--night);border-top:1px solid var(--line);text-align:center;color:var(--bone)}
.ft__logo{display:inline-block;line-height:0}
.ft__logo img{display:block;height:64px;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;color:var(--sage)}
.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(--bone)}
.ftlinks a:hover::after{right:0}
.ftcopy{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.18em;color:var(--sage)}

/* ─────────── 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);color:var(--bone);border:1px solid var(--line2);border-radius:2px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  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:600;letter-spacing:.08em;white-space:nowrap}
.mbar__tx span{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--boneD);white-space:nowrap}
.mbar .btn{flex:0 0 auto;min-height:44px;padding:8px 20px;font-size:13px}

/* ─────────── Apparition : fondu + léger glissement « porté par le vent » ─────────── */
.rise{animation:rise 1.5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translate3d(-18px,8px,0)}to{opacity:1;transform:none}}
.js .rv{opacity:0;transform:translate3d(-30px,6px,0);transition:opacity 1.2s var(--ease),transform 1.5s 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:28px}
  .hero__in{column-gap:36px}
  .hd{grid-template-columns:96px minmax(0,1fr) auto;gap:2px 14px}
  .hd__d button{font-size:24px}
  .stp{padding:4px 22px 8px}
  .stp__n{font-size:52px}
}
@media (max-width:1040px){
  .nav{display:none}
  .cartbtn{margin-left:auto}
  .seat__top{grid-template-columns:minmax(0,1fr);gap:40px}
  .tkt{max-width:460px}
  .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(--lineL)}
  .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(--lineL)}
}

/* 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.25),86vh);--phh:min(calc(100vw * 1.25),86svh);min-height:0;display:block}
  .hero__ph{bottom:auto;height:var(--phh)}
  .hero__ph img{object-position:50% 70%;transform-origin:50% 45%}
  .hero__veil{bottom:auto;height:calc(var(--phh) + 2px);
    background:
      linear-gradient(180deg,color-mix(in srgb,var(--night) 50%,transparent) 0,transparent 22%,transparent 60%,color-mix(in srgb,var(--night) 70%,transparent) 86%,var(--night) 100%)}
  .hero__in{display:flex;flex-direction:column;align-items:stretch;padding-top:calc(var(--hdr) + 3vw);padding-bottom:64px}
  .hero__brand{width:min(80vw,600px,calc(var(--phh) * .62));align-self:center;display:flex;flex-direction:column;align-items:center;
    min-height:calc(var(--phh) - var(--hdr) - 3vw - 26px);text-align:center}
  .hero__tour{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 1.1em;margin-top:clamp(8px,2vw,16px);
    font-size:clamp(10px,2.5vw,13px);letter-spacing:.26em;text-indent:.26em}
  .hero__msg,.hdates,.hero__act{align-self:center;width:min(100%,640px);max-width:none}
  .hero__msg{margin-top:4px;text-align:center}
  .hero__catch{font-size:clamp(23px,5.4vw,32px)}
  .hero__sub{font-size:13.5px}
  .hdates{margin-top:30px}
  .hd{grid-template-columns:minmax(0,1fr) auto;padding:13px 0}
  .hd__c{grid-column:1;flex-direction:row;align-items:baseline;gap:10px}
  .hd__v{grid-column:1;font-size:11.5px}
  .hd__d{grid-column:2;grid-row:1/3}
  .hd__d button{font-size:26px}
  .hero__act{align-items:center;margin-top:30px}
  .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% 46%}
  .hero__brand{width:min(52vw,calc(var(--phh) * .9))}
}
@media (max-width:899px){
  :root{--gut:28px;--hdr:64px}
  .brand img{height:34px}
  .shead{grid-template-columns:minmax(0,1fr);gap:22px}
  .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(--line)}
  .galhead{grid-template-columns:minmax(0,1fr);gap:22px}
  .gal{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:84vw 68vw 58vw 58vw 68vw 64vw;
    grid-template-areas:"a a" "b d" "c c" "e e" "f n" "g g"}
  .g--note{padding:28px 14px}
  .gnote__d{font-size:clamp(48px,13vw,72px)}
  .gnote__v{font-size:11px;letter-spacing:.04em;white-space:nowrap}
  .g--note .btn{padding:8px 14px;letter-spacing:.08em}
  .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}
  .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:72px minmax(0,1fr);column-gap:18px;padding:28px 0;border-left:0}
  .stp+.stp{border-top:1px solid var(--lineL)}
  .stp:first-child{padding-top:0}
  .stp__n{grid-row:1/3;font-size:54px}
  .stp h3{margin-top:2px}
  .stp p{margin-top:6px}
  .facts3{margin-top:52px;grid-template-columns:minmax(0,1fr)}
  .facts3 li{flex-direction:row;justify-content:space-between;padding:16px 4px}
  .facts3 li+li{border-left:0;border-top:1px solid var(--lineL)}
  .facts3 b span{font-size:38px}
  .facts3 li:first-child b{font-size:20px}
  .facts3 li>span{text-align:right}
}
@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:30px}
  .cartbtn{height:38px;padding:0 6px 0 14px;gap:10px;font-size:11px}
  .cartbtn em{min-width:24px;height:24px;font-size:13px}
  .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}
  .hd__v{font-size:11px}
  .hd__d button{font-size:24px}
  .hd__d button+button{margin-left:14px}
  .cta{width:100%;gap:10px}
  .cta .btn{flex:1 1 100%}
  .live{justify-content:center}
  .trust{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:17px}
  .sec{padding:84px 0}
  .stp,.stp:first-child,.stp:last-child,.stp:nth-child(odd),.stp:nth-child(even){grid-template-columns:52px minmax(0,1fr);column-gap:14px}
  .stp__n{font-size:42px}
  .stp h3{font-size:17px}
  .stp p{font-size:13.5px}
  .facts3 li>span{font-size:12px}
  .seat__top{margin-bottom:48px}
  .tkt{padding:22px 18px 20px}
  .tkt__list b span{font-size:26px}
  .tkt__list li:first-child b span{font-size:30px}
  .points h3{font-size:17px}
  .seat__zones{margin-top:56px;padding:30px 16px 26px;margin-inline:calc(-1 * var(--gut) + 8px)}
  .galhead__en{font-size:clamp(48px,14vw,68px)}
  .gal{gap:8px}
  .final{padding:128px 0 116px}
  .final h2{margin-top:36px}
  .final__en{font-size:10.5px;letter-spacing:.24em;text-indent:.24em}
  .final .btn{width:100%;max-width:360px}
  .ft{padding-top:64px}
  .ft__logo img{height:52px}
  .ftlinks{flex-direction:column;align-items:center;gap:14px;margin-top:36px}
}
@media (max-width:380px){
  .cartbtn{padding:0 5px 0 12px;gap:8px}
  .hd__d button{font-size:21px}
  .hd__d button i{font-size:10px}
  .hd__v{font-size:10.5px;letter-spacing:.04em}
  .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}
  .hero__ph img{animation:none;transform:none}
  #wind{display:none}
}