/* ——— Tokens ——— */
:root {
  --card: #FFFFFF;
  --paper: #FBFAF7;
  --paper-2: #F2F0EA;
  --ink: #15161A;
  --ink-2: #4A4C55;
  --ink-3: #7A7C85;
  --line: #E2DFD7;
  --focus: #1F4C8F;

  /* Obangsaek (오방색) + ganseak (간색) */
  --jeok: #C8322B;   --jeok-on: #fff;   /* 적 rouge   */
  --cheong: #1F4C8F; --cheong-on: #fff; /* 청 bleu    */
  --hwang: #E5A50A;  --hwang-on: #15161A; /* 황 jaune */
  --heuk: #15161A;   --heuk-on: #fff;   /* 흑 noir    */
  --nok: #2F7A55;    --nok-on: #fff;    /* 녹 vert    */
  --ja: #6A3D8F;     --ja-on: #fff;     /* 자 violet  */
  --hong: #C94770;   --hong-on: #fff;   /* 홍 rose    */
  --byeok: #2A80A8;  --byeok-on: #fff;  /* 벽 bleu ciel */

  --f-display: "Archivo", "Black Han Sans", "Pretendard", system-ui, sans-serif;
  --f-ko: "Black Han Sans", "Pretendard", sans-serif;
  --f-body: "Pretendard", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --r: 6px;
  --wrap: 1180px;
  color-scheme: light;
}

/* Catégorie → couleur */
.c-kpop     { --c: var(--jeok);   --on: var(--jeok-on); --c-ink: var(--jeok); }
.c-trad     { --c: var(--cheong); --on: var(--cheong-on); --c-ink: var(--cheong); }
.c-festival { --c: var(--hwang);  --on: var(--hwang-on); --c-ink: #9C7100; }
.c-cinema   { --c: var(--heuk);   --on: var(--heuk-on); --c-ink: var(--heuk); }
.c-expo     { --c: var(--nok);    --on: var(--nok-on); --c-ink: var(--nok); }
.c-scene    { --c: var(--ja);     --on: var(--ja-on); --c-ink: var(--ja); }
.c-atelier  { --c: var(--hong);   --on: var(--hong-on); --c-ink: #B03A60; }
.c-sport    { --c: var(--byeok);  --on: var(--byeok-on); --c-ink: #1F6F94; }

/* ——— Base ——— */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h, 74px) + 24px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* ——— Header ——— */
.top { border-bottom: 1px solid var(--line); background: var(--paper); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.brand-ko { font-family: var(--f-ko); font-size: 28px; line-height: 1; letter-spacing: -0.01em; }
.brand-ko.small { font-size: 20px; }
.brand-fr { font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); }
.nav { display: flex; gap: 22px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--ink-2); }
.nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ——— Hero ——— */
.hero { padding: 48px 0 40px; }
.hero-inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1fr 1.05fr; gap: 56px; } .hero { padding: 72px 0 56px; } }
.eyebrow { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 18px; }
.hero h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.hero-count { font-size: 17px; color: var(--ink-2); margin: 0 0 28px; }
.hero-count strong { color: var(--ink); font-weight: 600; }
.hero-search { display: flex; max-width: 480px; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.hero-search input { flex: 1; min-width: 0; border: 0; padding: 14px 16px; background: transparent; font-size: 16px; }
.hero-search input:focus { outline: none; }
.hero-search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.hero-search button { border: 0; background: var(--ink); color: var(--paper); padding: 0 22px; font-weight: 600; cursor: pointer; }

/* ——— Bojagi (signature) ——— */
.bojagi-wrap { margin: 0; }
.bojagi {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 5px;
  aspect-ratio: 6 / 5;
  padding: 5px;
  background: var(--paper-2);
  border-radius: 4px;
}
.patch {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 11px;
  background: var(--c);
  color: var(--on);
  border: 0;
  border-radius: 2px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  min-width: 0;
  transition: transform .18s ease, filter .18s ease;
}
/* points de couture */
.patch::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed color-mix(in srgb, var(--on) 38%, transparent);
  border-radius: 1px;
  pointer-events: none;
}
.patch:hover { filter: brightness(1.08); transform: translateY(-2px); }
.patch:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; z-index: 2; }
.patch-date { font-family: var(--f-display); font-size: clamp(18px, 2.2vw, 26px); line-height: 1; }
.patch-date small { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; opacity: .85; }
.patch-title { font-size: 13px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.patch-city { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; margin-top: 4px; }
.patch.big .patch-date { font-size: clamp(36px, 5vw, 64px); }
.patch.big .patch-title { font-size: clamp(15px, 1.6vw, 19px); -webkit-line-clamp: 3; }
.patch.small .patch-title, .patch.small .patch-city { display: none; }
.patch.small .patch-date small { display: block; }
.p1 { grid-column: 1 / 4; grid-row: 1 / 3; }
.p2 { grid-column: 4 / 6; grid-row: 1 / 2; }
.p3 { grid-column: 6 / 7; grid-row: 1 / 3; }
.p4 { grid-column: 4 / 5; grid-row: 2 / 3; }
.p5 { grid-column: 5 / 6; grid-row: 2 / 4; }
.p6 { grid-column: 1 / 2; grid-row: 3 / 6; }
.p7 { grid-column: 2 / 5; grid-row: 3 / 4; }
.p8 { grid-column: 6 / 7; grid-row: 3 / 5; }
.p9 { grid-column: 2 / 4; grid-row: 4 / 6; }
.p10 { grid-column: 4 / 6; grid-row: 4 / 5; }
.p11 { grid-column: 4 / 7; grid-row: 5 / 6; }
.bojagi-wrap figcaption { font-size: 13px; color: var(--ink-3); margin-top: 10px; }
@media (max-width: 899px) {
  .bojagi { aspect-ratio: 6 / 6; }
  .patch { padding: 7px 8px; }
  .patch-title { font-size: 11.5px; -webkit-line-clamp: 2; }
  .patch-city { display: none; }
  .patch:not(.big):not(.wide) .patch-title { display: none; }
  .patch.wide .patch-title { -webkit-line-clamp: 1; }
  .patch.wide .patch-date small { display: none; }
}
/* l'entrée en vol des pièces est dans « Direction artistique », seulement si les animations sont activées */

/* ——— Bandeau 140 ans ——— */
.anniv { background: var(--ink); color: var(--paper); }
.anniv-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding-top: 18px; padding-bottom: 18px; }
.anniv-years { font-family: var(--f-display); font-size: 26px; white-space: nowrap; }
.anniv p { margin: 0; font-size: 15px; max-width: 760px; opacity: .92; }

/* ——— Filtres ——— */
.agenda { padding-bottom: 72px; }
.filters { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 14px 0 12px; }
.filters-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.field-q { flex: 1 1 220px; }
.filters input, .filters select {
  height: 40px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 0 12px; font-size: 15px; width: 100%;
}
.filters select { padding-right: 28px; cursor: pointer; }
.filters .field:not(.field-q) { flex: 0 1 auto; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; height: 40px; margin-left: auto; }
.view-toggle button { border: 0; background: transparent; padding: 0 14px; cursor: pointer; font-size: 14.5px; color: var(--ink-2); }
.view-toggle button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 640px) {
  .filters .field:not(.field-q) { flex: 1 1 40%; }
  .view-toggle { margin-left: 0; flex: 1 1 100%; }
  .view-toggle button { flex: 1; }
}
.cats { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cats::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  height: 32px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  font-size: 13.5px; cursor: pointer; color: var(--ink-2); white-space: nowrap;
}
.chip .dot { width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.chip-ico { width: 15px; height: 15px; flex: none; color: var(--c-ink); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.chip:hover .chip-ico { transform: rotate(-12deg) scale(1.15); }
.chip[aria-pressed="true"] .chip-ico, .chip[aria-current="page"] .chip-ico { color: var(--on); }
.chip .n { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.chip[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--on); }
.chip[aria-pressed="true"] .dot { background: var(--on); }
.chip[aria-pressed="true"] .n { color: var(--on); opacity: .8; }
.chip.all[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ——— Liste ——— */
.result-line { font-size: 14px; color: var(--ink-2); margin: 22px 0 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.result-line button { border: 0; background: none; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--ink); font-size: 14px; }
.month { margin-top: 36px; }
.month-head { position: relative; display: flex; align-items: baseline; gap: 14px; padding-bottom: 16px; margin-bottom: 4px; }
/* bande saekdong (색동), les rayures multicolores des manches de hanbok */
.month-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--jeok) 0 26px, var(--card) 26px 29px, var(--hwang) 29px 55px, var(--card) 55px 58px,
    var(--nok) 58px 84px, var(--card) 84px 87px, var(--cheong) 87px 113px, var(--card) 113px 116px,
    var(--hong) 116px 142px, var(--card) 142px 145px, var(--ja) 145px 171px, var(--card) 171px 174px);
}
.fx .month-head::after { background-size: 174px 100%; animation: saekdong 14s linear infinite; }
@keyframes saekdong { to { background-position: 174px 0; } }
.month-head h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 36px); line-height: 1; margin: 0; }
.month-head h3::first-letter { text-transform: uppercase; }
.month-head .ko { font-family: var(--f-ko); font-size: 18px; color: var(--ink-3); }
.month-head .count { margin-left: auto; font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); }

.ev {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 4px 20px;
  margin: 12px 0;
  padding: 12px 16px 12px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  align-items: center;
  transition: transform .22s cubic-bezier(.3,1.4,.5,1), box-shadow .22s ease, border-color .22s ease;
}
.ev:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--c) 85%, transparent); }
/* Vignette de date : une pièce de bojagi à la couleur de la catégorie */
.ev-date {
  position: relative; align-self: stretch; min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 12px 6px 10px; border-radius: 10px; overflow: hidden;
  background-color: var(--c); color: var(--on);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.ev:hover .ev-date { transform: rotate(-3deg) scale(1.04); }
.ev-ico { position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; opacity: .9; }
.ev:hover .ev-ico { animation: wiggle .5s ease-in-out; }
.ev-day { font-family: var(--f-display); font-size: 36px; line-height: .95; text-shadow: 0 1px 0 color-mix(in srgb, #000 15%, transparent); }
.ev-month { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.ev-until { font-family: var(--f-mono); font-size: 10.5px; opacity: .85; margin-top: 2px; }
.ev-body { min-width: 0; }
.ev-cat {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; border-radius: 999px;
  font-size: 11.5px; font-family: var(--f-mono); font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-ink); background: color-mix(in srgb, var(--c) 11%, var(--card));
}
.ev-cat-ico { width: 14px; height: 14px; flex: none; }
.ev-title { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 7px 0 5px; letter-spacing: -0.01em; }
.ev-title button, .ev-title a { all: unset; cursor: pointer; }
.ev-title button::after, .ev-title a::after { content: ""; position: absolute; inset: 0; }
.ev-title button:focus-visible, .ev-title a:focus-visible { outline: none; }
.ev:has(.ev-title :is(button, a):focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.ev:hover .ev-title :is(button, a) { color: var(--c-ink); }
.ev-meta { font-size: 15px; color: var(--ink-2); }
.ev-meta svg { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; color: var(--c-ink); }
.ev-meta strong { color: var(--ink); font-weight: 600; }
.ev-price { font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }
.ev-badge, .ev-feat {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: 3px;
}
.ev-badge { background: color-mix(in srgb, var(--nok) 14%, var(--card)); color: var(--nok); }
.ev-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--nok); }
.fx .ev-badge i { animation: live 1.6s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nok) 60%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
.ev-feat { background: var(--jeok); color: #fff; }
.ev-actions { display: flex; gap: 6px; position: relative; z-index: 1; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: 13.5px; text-decoration: none; color: var(--ink);
}
.icon-btn:hover { border-color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 640px) {
  .ev { grid-template-columns: 76px 1fr; gap: 4px 14px; padding: 10px 12px 12px 10px; }
  .ev-date { min-height: 84px; }
  .ev-day { font-size: 30px; }
  .ev-actions { grid-column: 2; padding-top: 4px; }
  .ev-title { font-size: 17px; }
  .ev-feat { margin-left: 0; margin-top: 4px; }
}

.empty { padding: 56px 0; text-align: center; }
.empty h3 { font-family: var(--f-display); font-weight: 400; font-size: 28px; margin: 0 0 8px; }
.empty p { color: var(--ink-2); margin: 0 0 18px; }

/* ——— Carte ——— */
.map { height: min(70vh, 620px); border-radius: var(--r); border: 1px solid var(--line); margin-top: 14px; z-index: 0; }
.map-note { font-size: 13.5px; color: var(--ink-3); }
.leaflet-popup-content { font-family: var(--f-body); margin: 12px 14px; min-width: 220px; }
.pop-venue { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.pop-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; }
.pop-list li { border-top: 1px solid #eee; }
.pop-list button { all: unset; display: block; cursor: pointer; padding: 6px 0; font-size: 13.5px; line-height: 1.3; }
.pop-list button:hover { text-decoration: underline; }
.pop-list .d { font-family: var(--f-mono); font-size: 11px; color: #666; display: block; }

/* ——— Fiche détail ——— */
.detail {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0; border: 0; border-radius: 8px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
.detail::backdrop { background: rgba(10,10,14,.55); }
.d-band { background: var(--c); color: var(--on); padding: 22px 24px 20px; position: relative; }
.d-band::after { content: ""; position: absolute; inset: 6px; border: 1px dashed color-mix(in srgb, var(--on) 35%, transparent); pointer-events: none; }
.d-cat { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.d-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 4vw, 34px); line-height: 1.1; margin: 8px 40px 0 0; }
.d-close { position: absolute; top: 12px; right: 12px; z-index: 1; width: 38px; height: 38px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--on) 18%, transparent); color: var(--on); cursor: pointer; font-size: 22px; line-height: 1; }
.d-body { padding: 20px 24px 24px; }
.d-facts { display: grid; grid-template-columns: 96px 1fr; gap: 10px 14px; margin: 0 0 18px; font-size: 15px; }
.d-facts dt { font-family: var(--f-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding-top: 3px; }
.d-facts dd { margin: 0; }
.d-desc { font-size: 15.5px; margin: 0 0 20px; color: var(--ink-2); }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--r); border: 0; background: var(--ink); color: var(--paper); font-weight: 600; cursor: pointer; text-decoration: none; font-size: 15px; }
.btn-primary:hover { opacity: .9; }
.btn-primary svg { width: 16px; height: 16px; flex: none; }
.d-actions .icon-btn { height: 42px; padding: 0 14px; }
.d-note { font-size: 12.5px; color: var(--ink-3); margin: 16px 0 0; }

/* ——— Proposer ——— */
.propose { background: var(--paper-2); padding: 80px 0 72px; border-top: 1px solid var(--line); }
.propose h2, .about h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.08; margin: 0 0 16px; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-full { grid-column: 1 / -1; }
@media (max-width: 560px) { .pf-grid { grid-template-columns: 1fr; } }
.propose-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 600; }
.propose-form .opt { font-weight: 400; color: var(--ink-3); }
.propose-form input, .propose-form select, .propose-form textarea {
  border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--paper); font-size: 15px; font-weight: 400; min-height: 42px;
}
.propose-form textarea { resize: vertical; }
.propose-form [aria-invalid="true"] { border-color: var(--jeok); }
.pf-error { color: var(--jeok); font-size: 14px; min-height: 1em; margin: 12px 0; }

/* ——— À propos ——— */
.about { padding: 72px 0; }
.about-cols { display: grid; gap: 8px 48px; max-width: 980px; }
@media (min-width: 800px) { .about-cols { grid-template-columns: 1fr 1fr; } }
.about-cols p { margin: 0 0 12px; color: var(--ink-2); }
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 28px; }
.legend-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.legend-sw { width: 34px; height: 34px; border-radius: 3px; background: var(--c); color: var(--on); display: grid; place-items: center; font-family: var(--f-ko); font-size: 17px; flex: none; }
.legend-txt { font-size: 14px; line-height: 1.3; }
.legend-txt small { display: block; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.legend-note { font-size: 13.5px; color: var(--ink-3); margin-top: 14px; }

/* ——— Footer / toast ——— */
.foot { border-top: 1px solid var(--line); padding: 36px 0 56px; }
.foot-inner { display: flex; align-items: center; gap: 26px; font-size: 13.5px; color: var(--ink-3); }
.foot p { margin: 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r); font-size: 14.5px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Archivo : grasse et étroite, façon affiche ; le hangeul passe en Black Han Sans */
.hero h1, .patch-date, .anniv-years, .month-head h3, .ev-day, .empty h3, .d-title, .propose h2, .about h2 {
  font-weight: 800;
  font-stretch: 78%;
  font-variation-settings: "wdth" 78;
}
.hero h1 { letter-spacing: -0.02em; }

/* ——— Pages ville et catégorie ——— */
.hero-sub { padding: 36px 0 40px; }
@media (min-width: 900px) { .hero-sub { padding: 48px 0 52px; } }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); }
.hero-sub h1 { max-width: 920px; margin-bottom: 18px; }
.h1-ko { display: inline-grid; place-items: center; width: .95em; height: .95em; margin-right: .22em; vertical-align: -.08em; border-radius: 3px; background: var(--c); color: var(--on); font-family: var(--f-ko); font-weight: 400; font-size: .72em; }
.hero-lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 760px; margin: 0 0 14px; }

/* Bandeau en patchwork : largeur de chaque pièce = nombre d'événements */
.strip { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--paper-2); border-radius: 4px; margin-top: 26px; max-width: 980px; }
.strip-patch {
  position: relative; min-width: 112px; min-height: 76px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  padding: 10px 12px; background: var(--c); color: var(--on); text-decoration: none; border-radius: 2px;
  transition: filter .15s ease, transform .15s ease;
}
.strip-patch::after { content: ""; position: absolute; inset: 4px; border: 1px dashed color-mix(in srgb, var(--on) 38%, transparent); pointer-events: none; }
.strip-patch:hover { filter: brightness(1.08); transform: translateY(-2px); }
.strip-patch:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.strip-n { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 30px; line-height: 1; }
.strip-l { font-size: 13px; font-weight: 600; line-height: 1.25; }
/* sur une page catégorie, toutes les pièces ont la même couleur : on alterne l'intensité */
.strip-mono .strip-patch:nth-child(3n+2) { filter: saturate(.85) brightness(1.1); }
.strip-mono .strip-patch:nth-child(3n+3) { filter: saturate(1.1) brightness(.9); }
.strip .strip-patch:hover { filter: brightness(1.12); }
@media (max-width: 640px) { .strip-patch { min-width: calc(50% - 2px); } }

/* Pastilles devenues liens (page catégorie) */
a.chip { text-decoration: none; }
.chip[aria-current="page"] { background: var(--c); border-color: var(--c); color: var(--on); }
.chip[aria-current="page"] .dot { background: var(--on); }
.chip[aria-current="page"] .n { color: var(--on); opacity: .8; }
.result-line a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.empty .icon-btn { height: 42px; padding: 0 16px; }

/* ——— Explorer ——— */
.explore { padding: 64px 0 72px; border-top: 1px solid var(--line); }
.explore h2 { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.08; margin: 0 0 28px; }
.explore h3 { font-family: var(--f-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }
.explore-cols { display: grid; gap: 36px; }
@media (min-width: 900px) { .explore-cols { grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; } }
.city-links, .cat-links { list-style: none; margin: 0; padding: 0; }
.city-links { columns: 2 180px; column-gap: 32px; }
.city-links li, .cat-links li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.city-links a, .cat-links a { text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.city-links a:hover, .cat-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.city-links a[aria-current], .cat-links a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.city-links .n, .cat-links .n { margin-left: auto; font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }
.cat-links .sw { width: 24px; height: 24px; border-radius: 3px; background: var(--c); color: var(--on); display: inline-grid; place-items: center; font-family: var(--f-ko); font-size: 13px; font-weight: 400; }
.nw { white-space: nowrap; }

/* ═══════════ Animations (assets/fun.js) ═══════════
   Actives seulement avec la classe .fx sur <html> (bouton du bandeau) */

/* Feuilles de saison dans le haut de page */
.hero { position: relative; overflow: hidden; }
/* limitées au haut de page, avec un fondu, pour ne pas passer sur les longs textes */
.season-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: 760px; pointer-events: none; z-index: 3;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
html:not(.fx) .season-canvas { display: none; }

/* Interrupteur */
.fx-toggle {
  width: 36px; height: 36px; flex: none; margin-left: 4px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink-3); cursor: pointer;
}
.fx-toggle svg { width: 17px; height: 17px; }
.fx-toggle[aria-pressed="true"].season-ginkgo { color: #E0A800; }
.fx-toggle[aria-pressed="true"].season-petals { color: #EE8FAD; }
.fx-toggle[aria-pressed="true"].season-fireflies { color: #E2B93B; }
.fx-toggle[aria-pressed="true"].season-snow { color: #7E9CC4; }
.fx-toggle:hover { border-color: var(--ink); }
.fx .fx-toggle:hover svg { animation: sway 1s ease-in-out infinite; }
.top-inner .nav { margin-left: auto; }
@keyframes sway { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }

/* Logo qui s'écrit */
.brand-ko { display: inline-block; min-width: 2.1em; }
.brand-ko.pop { animation: pop .22s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { from { transform: scale(.8) translateY(2px); } to { transform: none; } }

/* Coutures du bojagi qui « cousent » au survol */
.patch::after, .strip-patch::after, .d-band::after, .ev-date::after,
.offer-band::after, .promo-visual::after, .spot-visual::after, .pf-done-patch::after,
.guide-badge::after, .fete-tile::after, .guide-card-band::after {
  --stitch: color-mix(in srgb, var(--on) 40%, transparent);
  border: 0;
  background:
    linear-gradient(90deg, var(--stitch) 55%, transparent 0) 0 0 / 9px 1px repeat-x,
    linear-gradient(90deg, var(--stitch) 55%, transparent 0) 0 100% / 9px 1px repeat-x,
    linear-gradient(0deg, var(--stitch) 55%, transparent 0) 0 0 / 1px 9px repeat-y,
    linear-gradient(0deg, var(--stitch) 55%, transparent 0) 100% 0 / 1px 9px repeat-y;
}
.ev-date::after { content: ""; position: absolute; inset: 4px; border-radius: 7px; pointer-events: none; }
.fx .patch:hover::after, .fx .strip-patch:hover::after, .fx .ev:hover .ev-date::after { animation: sew .7s linear infinite; }
@keyframes sew { to { background-position: 9px 0, -9px 100%, 0 -9px, 100% 9px; } }
.fx .patch:nth-child(odd):hover { transform: translateY(-3px) rotate(-1.2deg); }
.fx .patch:nth-child(even):hover { transform: translateY(-3px) rotate(1.2deg); }

/* Fiches qui apparaissent au défilement */
.fx .ev { transition: opacity .45s ease var(--d, 0ms), transform .3s cubic-bezier(.3,1.4,.5,1) var(--d, 0ms), box-shadow .22s ease, border-color .22s ease; }
.fx .ev.fx-pre { opacity: 0; transform: translateY(14px); }
.fx .month-head .ko { transition: transform .3s cubic-bezier(.3,1.6,.5,1); display: inline-block; }
.fx .month:hover .month-head .ko { transform: rotate(-8deg) scale(1.15); color: var(--jeok); }

/* Fiche détail qui s'ouvre avec un petit rebond */
.fx .detail[open] { animation: dialog-in .32s cubic-bezier(.3,1.4,.5,1); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }

/* Cœurs */
.fx-heart {
  position: fixed; z-index: 300; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none;
  font-size: 15px; line-height: 18px; text-align: center;
  animation: heart-fly .95s cubic-bezier(.2,.8,.3,1) forwards;
}
.fx-heart svg { width: 100%; height: 100%; display: block; }
@keyframes heart-fly {
  0% { transform: translate(0, 0) scale(.3); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); opacity: 0; }
}

/* Horangi, le petit tigre */
.horangi { position: fixed; right: 14px; bottom: -14px; z-index: 40; width: 112px; transition: transform .5s cubic-bezier(.3,1.4,.5,1); transform: translateY(26%); }
.horangi.is-hidden { transform: translateY(115%); }
.horangi.is-off { display: none; }
.horangi:hover:not(.is-hidden), .horangi.talking { transform: translateY(-6%); }
.horangi-btn { all: unset; display: block; cursor: pointer; width: 100%; }
.horangi-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 50%; }
.horangi .tiger { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
.horangi .t-eyes { transform-origin: 60px 57px; animation: blink 4.5s infinite; }
.horangi:hover .t-ears { transform-origin: 60px 40px; animation: wiggle .5s ease-in-out 2; }
.horangi.hop .tiger { animation: hop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes hop { 40% { transform: translateY(-14px) scale(1.04, .96); } }
.horangi-bubble {
  position: absolute; right: 70%; bottom: 88%; width: max-content; max-width: min(240px, calc(100vw - 110px));
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px 14px 2px 14px;
  padding: 9px 12px; box-shadow: 3px 3px 0 var(--ink);
  opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 100% 100%; pointer-events: none;
  transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1);
}
.horangi.talking .horangi-bubble { opacity: 1; transform: none; }
.horangi-bubble .ko { display: block; font-family: var(--f-ko); font-size: 20px; line-height: 1.2; color: var(--jeok); }
.horangi-bubble .fr { display: block; font-size: 13px; line-height: 1.35; margin-top: 3px; color: var(--ink-2); }
@media (max-width: 640px) { .horangi { width: 80px; right: 8px; } }

/* Horangi fait la sieste quand il n'y a rien à afficher */
.horangi-nap { position: relative; width: 96px; margin: 0 auto 14px; }
.horangi-nap .tiger { width: 100%; height: auto; display: block; }
.fx .horangi-nap .tiger { animation: breathe 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.horangi-nap .zz { position: absolute; right: -6px; top: 6px; font-family: var(--f-display); font-weight: 800; color: var(--cheong); opacity: 0; }
html:not(.fx) .horangi-nap .zz:first-of-type { opacity: .8; }
.fx .horangi-nap .zz { animation: zz 2.7s ease-out infinite; }
.fx .horangi-nap .zz:nth-of-type(2) { animation-delay: .9s; font-size: 13px; }
.fx .horangi-nap .zz:nth-of-type(3) { animation-delay: 1.8s; font-size: 11px; }
@keyframes breathe { 50% { transform: scale(1.03, .97); } }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(18px, -26px) scale(1.2); } }

/* ═══════════ Motifs traditionnels coréens (un par catégorie) ═══════════
   Posés sur les pièces du patchwork, les vignettes de date, les bandeaux et la fiche détaillée. */
/* étoiles de bâton lumineux */
.c-kpop { --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath fill='rgba%28255,255,255,0.2%29' d='M10 5Q10 10 15 10Q10 10 10 15Q10 10 5 10Q10 10 10 5ZM30 24.5Q30 28 33.5 28Q30 28 30 31.5Q30 28 26.5 28Q30 28 30 24.5Z'/%3E%3Ccircle fill='rgba%28255,255,255,0.2%29' cx='29' cy='9' r='1.3'/%3E%3Ccircle fill='rgba%28255,255,255,0.2%29' cx='9' cy='31' r='1'/%3E%3C/svg%3E"); --ps: 40px 40px; }
/* vagues (물결무늬) */
.c-trad { --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14'%3E%3Cpath fill='none' stroke='rgba%28255,255,255,0.2%29' stroke-width='1.6' d='M0 9Q8 1 16 9T32 9'/%3E%3C/svg%3E"); --ps: 32px 14px; }
/* treillis de porte de hanok (창살) */
.c-festival { --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath fill='none' stroke='rgba%2821,22,26,0.10%29' stroke-width='1.2' d='M0 .6H30M.6 0V30M8 8h14v14H8zM15 8v14M8 15h14'/%3E%3C/svg%3E"); --ps: 30px 30px; }
/* perforations de pellicule */
.c-cinema { --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect fill='rgba%28255,255,255,0.2%29' x='6' y='7' width='8' height='6' rx='1.5'/%3E%3C/svg%3E"); --ps: 20px 20px; }
/* nuages porte-bonheur (구름문) */
.c-expo { --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='30'%3E%3Cpath fill='none' stroke='rgba%28255,255,255,0.2%29' stroke-width='1.5' stroke-linecap='round' d='M8 22c-3.5 0-4.5-4.5-1-5.5 0-4.5 5.5-5.5 7.5-2 2-4.5 8.5-3.5 8.5 1 3.5 0 4.5 3.5 2 6.5zM13.5 19c0-2.4 3.6-2.4 3.6 0'/%3E%3C/svg%3E"); --ps: 44px 30px; }
/* losanges (능화문) */
.c-scene { --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='none' stroke='rgba%28255,255,255,0.2%29' stroke-width='1.3' d='M8 1.5 14.5 8 8 14.5 1.5 8z'/%3E%3C/svg%3E"); --ps: 16px 16px; }
/* fleurs de prunier (매화) */
.c-atelier { --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg fill='rgba%28255,255,255,0.2%29'%3E%3Ccircle cx='14.00' cy='10.40' r='2.5'/%3E%3Ccircle cx='17.42' cy='12.89' r='2.5'/%3E%3Ccircle cx='16.12' cy='16.91' r='2.5'/%3E%3Ccircle cx='11.88' cy='16.91' r='2.5'/%3E%3Ccircle cx='10.58' cy='12.89' r='2.5'/%3E%3Ccircle cx='1' cy='1' r='1.2'/%3E%3Ccircle cx='27' cy='27' r='1.2'/%3E%3C/g%3E%3C/svg%3E"); --ps: 28px 28px; }
/* chevrons */
.c-sport { --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath fill='none' stroke='rgba%28255,255,255,0.2%29' stroke-width='1.6' d='M0 9 6 3 12 9 18 3 24 9'/%3E%3C/svg%3E"); --ps: 24px 12px; }
.patch, .strip-patch, .ev-date, .d-band, .legend-sw, .cat-links .sw, .h1-ko,
.offer-band, .promo-visual, .spot-visual, .cd-box, .pf-tier-ko, .pf-done-patch, .steps-n,
.gp-mark, .guide-badge, .fete-tile, .guide-card-band {
  background-image: var(--pat); background-size: var(--ps); background-color: var(--c);
}
.fx .strip-patch:hover, .fx .ev:hover .ev-date { animation: drift 6s linear infinite; }
@keyframes drift { to { background-position: 120px 60px; } }

/* Icônes dans les pièces */
.patch-ico { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; opacity: .9; }
.patch.big .patch-ico { width: 34px; height: 34px; top: 12px; right: 12px; }
.fx .patch:hover .patch-ico, .fx .strip-patch:hover .strip-ico { animation: wiggle .5s ease-in-out 2; }
.strip-ico { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; opacity: .9; }
.d-ico { position: absolute; right: 64px; bottom: -14px; width: 104px; height: 104px; opacity: .2; pointer-events: none; }
@media (max-width: 899px) { .patch-ico { width: 14px; height: 14px; top: 6px; right: 6px; } .patch.big .patch-ico { width: 24px; height: 24px; } }

/* ═══════════ Organisateurs : offres et formulaire ═══════════ */
.btn-big { height: 52px; padding: 0 26px; font-size: 16.5px; }
.propose-head { max-width: 780px; margin-bottom: 40px; }
.propose-lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; }
.propose-example { font-weight: 700; color: var(--jeok); text-underline-offset: 4px; }

.offer-band::after, .promo-visual::after, .spot-visual::after, .pf-done-patch::after { content: ""; position: absolute; inset: 6px; border-radius: inherit; pointer-events: none; }
.offers { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: stretch; }
.offer {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s ease;
}
.offer:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--c) 90%, transparent); }
.offer.is-reco { border: 2px solid var(--c); box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--c) 90%, transparent); }
.offer-band { position: relative; display: flex; align-items: flex-end; justify-content: space-between; height: 96px; padding: 14px 18px; color: var(--on); }
.offer-ko { font-family: var(--f-ko); font-size: 42px; line-height: 1; }
.fx .offer:hover .offer-ko { animation: wiggle .5s ease-in-out; }
.offer-reco { align-self: flex-start; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--card); color: var(--c-ink); }
.offer-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
.offer-name { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 30px; line-height: 1; margin: 0; }
.offer-price { margin: 10px 0 4px; color: var(--ink-3); font-size: 14px; }
.offer-price strong { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 46px; line-height: 1; color: var(--c-ink); margin-right: 4px; }
.offer-pitch { color: var(--ink-2); margin: 0 0 16px; }
.offer-features { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; font-size: 15px; }
.offer-features li { position: relative; padding-left: 28px; line-height: 1.4; }
.offer-features li::before {
  content: "✓"; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 6px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--c) 14%, var(--card)); color: var(--c-ink);
}
.offer-features li.all { font-weight: 700; }
.offer-btn { margin-top: auto; justify-content: center; width: 100%; height: 48px; font-weight: 700; }

.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; margin: 44px 0 28px; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: start; }
.steps-n { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 20px; color: #fff; }
.steps li:nth-child(1) .steps-n { --c: var(--cheong); --pat: none; }
.steps li:nth-child(2) .steps-n { --c: var(--jeok); --pat: none; }
.steps li:nth-child(3) .steps-n { --c: var(--nok); --pat: none; }
.steps strong { font-size: 16px; }
.steps span:last-child { color: var(--ink-2); font-size: 14.5px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

.propose-form { max-width: 940px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
@media (max-width: 560px) { .propose-form { padding: 20px 16px; } }
.pf-step { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.pf-step legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 16px; font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 24px; }
.pf-n { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--ink); color: var(--card); font-size: 17px; }
.pf-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 760px) { .pf-tiers { grid-template-columns: 1fr; } }
.propose-form .pf-tier {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; font-size: 16px;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.pf-tier input { position: absolute; opacity: 0; pointer-events: none; }
.pf-tier:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pf-tier:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, var(--card)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent); }
.pf-tier-ko { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--on); font-family: var(--f-ko); font-size: 15px; font-weight: 400; }
.pf-tier:has(input:checked) .pf-tier-ko { animation: pop .3s cubic-bezier(.3,1.6,.5,1); }
.pf-tier-price { font-family: var(--f-display); font-weight: 800; font-size: 20px; color: var(--c-ink); }
.propose-form .pf-check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14.5px; line-height: 1.45; }
.propose-form .pf-check input { min-height: 0; width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--jeok); }
.pf-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 14px 18px; border-radius: 14px; background: var(--paper-2); }
.pf-sum-name { font-weight: 700; }
.pf-sum-price { font-family: var(--f-display); font-weight: 800; font-size: 26px; margin-left: auto; }
.pf-sum-note { flex-basis: 100%; font-size: 13.5px; color: var(--ink-2); }
.pf-submit { height: 52px; padding: 0 28px; font-size: 16px; }
.pf-submit:disabled { opacity: .6; cursor: progress; }
.pf-done { max-width: 940px; outline: none; }
.pf-done-inner { display: grid; grid-template-columns: 104px 1fr; gap: 26px; align-items: start; padding: 28px; background: var(--card); border: 2px solid var(--c); border-radius: 18px; }
@media (max-width: 560px) { .pf-done-inner { grid-template-columns: 1fr; padding: 22px 18px; } }
.pf-done-patch { position: relative; width: 104px; height: 104px; border-radius: 16px; display: grid; place-items: center; color: var(--on); font-size: 50px; font-weight: 800; }
.fx .pf-done-patch { animation: pop .5s cubic-bezier(.3,1.6,.5,1); }
.pf-done h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 30px; line-height: 1.1; margin: 0 0 10px; }
.pf-ref code { font-family: var(--f-mono); font-size: 13px; background: var(--paper-2); padding: 2px 6px; border-radius: 4px; }
.pf-pay-txt { margin: 14px 0 12px; }
.pf-next { color: var(--ink-2); font-size: 14.5px; margin: 16px 0; }
.propose-free { margin: 24px 0 0; color: var(--ink-2); font-size: 14.5px; }

/* ═══════════ Partenaires dans l'agenda ═══════════ */
.ev.is-promo { border: 2px solid var(--c); background: linear-gradient(100deg, color-mix(in srgb, var(--c) 6%, var(--card)), var(--card) 45%); }
.ev-partner { display: inline-flex; align-items: center; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: 3px; background: var(--hwang); color: var(--ink); }
.ev-promo-link { position: relative; z-index: 1; display: inline-block; margin-top: 8px; font-size: 14.5px; font-weight: 700; color: var(--c-ink); text-decoration: none; }
.ev-promo-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.month-pinned .month-head h3::before { content: "★ "; color: var(--hwang); }
a.patch { text-decoration: none; }
.patch.is-promo { box-shadow: inset 0 0 0 3px var(--hwang); }

/* Bannière « À la une » de l'accueil */
.spotlight { padding: 28px 0 4px; }
.spot-list { display: grid; gap: 16px; }
.spot {
  display: grid; grid-template-columns: 240px 1fr; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--card); border: 2px solid var(--c); border-radius: 18px;
  transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s ease;
}
.spot:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--c) 90%, transparent); }
.spot-body { display: flex; flex-direction: column; gap: 6px; padding: 22px 26px; }
.spot-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); }
.spot-partner { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--hwang); color: var(--ink); }
.spot-title { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.05; }
.spot-meta { color: var(--ink-2); }
.spot-cta { margin-top: 6px; font-weight: 700; color: var(--c-ink); }
@media (max-width: 640px) { .spot { grid-template-columns: 1fr; } .spot .spot-visual { min-height: 150px; } }

/* Visuel d'événement : image, ou pièce de bojagi avec la date */
.promo-visual, .spot-visual {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 200px; overflow: hidden; color: var(--on); text-align: center;
}
.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-ico { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; opacity: .9; }
.pv-day { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 110px; line-height: .85; text-shadow: 0 2px 0 color-mix(in srgb, #000 15%, transparent); }
.pv-month { font-family: var(--f-mono); font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }
.spot-visual .pv-day { font-size: 76px; }
.spot-visual .pv-ico { width: 28px; height: 28px; top: 12px; right: 12px; }

/* ═══════════ Page d'un événement partenaire ═══════════ */
.example-ribbon { background: var(--hwang); color: var(--ink); padding: 11px 0; font-size: 14.5px; }
.example-ribbon a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; margin-left: 6px; }
.hero.promo { padding: 32px 0 48px; }
.promo-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; align-items: center; }
@media (max-width: 860px) { .promo-top { grid-template-columns: 1fr; gap: 26px; } .promo-visual { aspect-ratio: 16 / 9; } .pv-day { font-size: 84px; } }
.promo-visual { aspect-ratio: 4 / 3; border-radius: 22px; box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--c) 90%, transparent); }
.fx .promo-visual .pv-ico { animation: sway 3s ease-in-out infinite; }
.promo-label { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.promo-partner { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--hwang); color: var(--ink); }
.promo-cat { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px 4px 8px; border-radius: 999px; color: var(--c-ink); background: color-mix(in srgb, var(--c) 12%, var(--card)); }
.promo-cat-ico { width: 14px; height: 14px; }
.hero.promo h1 { font-size: clamp(38px, 5.6vw, 66px); margin: 0 0 14px; }
.promo-when { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.promo-where { color: var(--ink-2); font-size: 16.5px; margin: 0; }
.promo-where svg { width: 17px; height: 17px; vertical-align: -3px; margin-right: 6px; color: var(--c-ink); }
.countdown { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 22px 0; font-weight: 600; }
.cd-label { align-self: center; font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-right: 4px; }
.cd-box { position: relative; min-width: 68px; padding: 9px 8px 8px; border-radius: 12px; color: var(--on); text-align: center; }
.cd-box b { display: block; font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 32px; line-height: 1; }
.cd-box small { font-family: var(--f-mono); font-size: 10px; opacity: .9; }
.cd-live { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--nok) 14%, var(--card)); color: var(--nok); }
.cd-live i { width: 9px; height: 9px; border-radius: 50%; background: var(--nok); animation: live 1.6s ease-out infinite; }
.promo-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.promo-cta .icon-btn { height: 52px; padding: 0 16px; font-size: 15px; }
.promo-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; margin-top: 56px; align-items: start; }
@media (max-width: 860px) { .promo-body { grid-template-columns: 1fr; gap: 28px; } }
.promo-text h2, .promo-side h2, .promo-preview h2 { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 28px; margin: 0 0 14px; }
.promo-text h3 { font-size: 17px; margin: 26px 0 10px; }
.promo-text p { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; max-width: 680px; }
.promo-highlights { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.promo-highlights li { padding: 12px 14px 12px 40px; position: relative; border-radius: 12px; background: color-mix(in srgb, var(--c) 8%, var(--card)); font-weight: 600; }
.promo-highlights li::before { content: "✦"; position: absolute; left: 15px; top: 11px; color: var(--c-ink); }
.promo-video { margin-top: 26px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--ink); }
.promo-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.promo-side { padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.promo-facts { display: grid; grid-template-columns: 104px 1fr; gap: 12px 14px; margin: 0; font-size: 15px; }
.promo-facts dt { font-family: var(--f-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding-top: 3px; }
.promo-facts dd { margin: 0; }
.promo-map { height: 230px; margin-top: 18px; border-radius: 14px; border: 1px solid var(--line); z-index: 0; }
.promo-preview { margin-top: 48px; padding: 24px; border: 2px dashed var(--line); border-radius: 18px; }
.promo-preview p { color: var(--ink-2); margin: 0 0 8px; }
.preview-card .ev { margin: 8px 0 0; }
.promo-more { margin: 44px 0 0; }
.promo-more a { font-weight: 700; color: var(--c-ink); text-underline-offset: 4px; }

/* ═══════════ Drapeaux (assets/fun.js) ═══════════ */

/* Drapeau qui flotte : 18 bandes verticales, de plus en plus mobiles loin de la hampe */
.wave-flag { position: relative; display: inline-flex; width: 48px; height: 32px; flex: none; vertical-align: middle; cursor: pointer; filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)); }
.wave-flag.big { width: 78px; height: 52px; }
.wave-flag i {
  flex: 1 0 0; height: 100%; margin-right: -0.4px;
  background-image: var(--flag); background-repeat: no-repeat;
  background-size: calc(var(--n) * 100%) 100%;
  background-position: calc(var(--i) / (var(--n) - 1) * 100%) 0;
}
.wave-flag i:first-child { border-radius: 2px 0 0 2px; }
.wave-flag i:last-child { border-radius: 0 2px 2px 0; }
.fx .wave-flag i { animation: flag-wave 1.9s ease-in-out infinite; animation-delay: calc(var(--i) * -0.1s); }
.fx .wave-flag:hover i, .wave-flag.flap i { animation: flag-flap .55s ease-in-out infinite; animation-delay: calc(var(--i) * -0.04s); }
@keyframes flag-wave {
  0%, 100% { transform: translateY(calc(var(--i) / var(--n) * -8%)); filter: brightness(1.06); }
  50% { transform: translateY(calc(var(--i) / var(--n) * 8%)); filter: brightness(.86); }
}
@keyframes flag-flap {
  0%, 100% { transform: translateY(calc(var(--i) / var(--n) * -16%)) scaleY(1.02); filter: brightness(1.1); }
  50% { transform: translateY(calc(var(--i) / var(--n) * 16%)) scaleY(.97); filter: brightness(.8); }
}
/* hampe en bois et pommeau doré */
.wave-flag.pole { margin-left: 10px; }
.wave-flag.pole::before { content: ""; position: absolute; left: -6px; top: -8px; bottom: -30px; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #A97A45, #6E4A22); }
.wave-flag.pole::after { content: ""; position: absolute; left: -8.5px; top: -15px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE08A, #D99A00); }

/* Bandeau des 140 ans : France ♥ Corée */
.anniv-flags { display: inline-flex; align-items: center; gap: 8px; }
.anniv-heart { color: var(--jeok); font-size: 18px; line-height: 1; display: inline-block; }
.fx .anniv-heart { animation: heartbeat 1.5s ease-in-out infinite; }
@keyframes heartbeat { 0%, 45%, 100% { transform: scale(1); } 15% { transform: scale(1.35); } 30% { transform: scale(.95); } }

/* Pied de page */
.foot-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.foot-ko { font-family: var(--f-ko); font-size: 15px; color: var(--ink-2); }
.foot-ko span { color: var(--jeok); }

/* Guirlande de drapeaux (만국기) en haut de page */
.hero.has-garland { padding-top: 92px; }
@media (max-width: 640px) { .hero.has-garland { padding-top: 72px; } }
.garland { position: absolute; top: 0; left: 0; right: 0; height: 80px; z-index: 2; pointer-events: none; }
.garland-string { display: block; width: 100%; height: auto; overflow: visible; }
.garland-string path { fill: none; stroke: #A39880; stroke-width: 1.5; }
.g-flag {
  position: absolute; width: 27px; height: 18px; margin-left: -13.5px; border-radius: 1px;
  background-size: cover; box-shadow: 0 2px 3px rgba(0,0,0,.2);
  transform-origin: 50% 0; transform: rotate(var(--r)); pointer-events: auto; cursor: pointer;
}
.fx .g-flag { animation: g-swing 2.6s ease-in-out infinite; animation-delay: var(--d); }
.fx .g-flag:hover { animation-duration: .7s; }
.g-flag.spin, .fx .g-flag.spin { animation: g-spin .9s cubic-bezier(.3,1.4,.5,1); }
@keyframes g-swing { 0%, 100% { transform: rotate(calc(var(--r) - 7deg)); } 50% { transform: rotate(calc(var(--r) + 7deg)); } }
@keyframes g-spin { from { transform: rotate(var(--r)) rotateY(0); } to { transform: rotate(var(--r)) rotateY(360deg); } }
@media (max-width: 640px) { .g-flag { width: 21px; height: 14px; margin-left: -10.5px; } }

/* Horangi tient un petit Taegukgi */
.horangi .t-flag-cloth { transform-box: fill-box; transform-origin: 0 50%; }
.fx .horangi .t-flag-cloth { animation: cloth 1.7s ease-in-out infinite; }
@keyframes cloth { 0%, 100% { transform: skewY(-5deg) scaleX(1); } 50% { transform: skewY(6deg) scaleX(.93); } }

/* ═══════════ Guides pratiques ═══════════ */
.guide-badge::after, .fete-tile::after, .guide-card-band::after { content: ""; position: absolute; inset: 5px; border-radius: inherit; pointer-events: none; }
.all-guides { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--jeok); text-underline-offset: 3px; }
.guide-links .sw { width: auto; min-width: 24px; padding: 0 5px; font-size: 11px; }

.hero.guide { padding-bottom: 40px; }
.guide-head { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; margin-bottom: 26px; }
@media (max-width: 640px) { .guide-head { grid-template-columns: 1fr; gap: 16px; } }
.guide-badge { position: relative; width: 104px; height: 104px; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--on); box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--c) 90%, transparent); }
.guide-badge-ico { width: 40px; height: 40px; }
.guide-badge-ko { font-family: var(--f-ko); font-size: 17px; }
.fx .guide-badge { animation: pop .5s cubic-bezier(.3,1.6,.5,1); }
.hero.guide h1 { font-size: clamp(32px, 4.6vw, 54px); margin-bottom: 14px; }
.hero.guide .eyebrow { margin-bottom: 12px; }

.guide-cities { flex-wrap: wrap; overflow: visible; margin: 0 0 22px; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 900px) { .guide-layout { grid-template-columns: 1fr; } .guide-aside { order: -1; } }
.guide-sec h2 { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 30px; margin: 26px 0 4px; padding-bottom: 12px; position: relative; }
.guide-sec:first-child h2 { margin-top: 0; }
.guide-sec h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 5px; border-radius: 3px; background: var(--c); }

.gp {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; margin: 12px 0; padding: 16px 18px 16px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; scroll-margin: 140px;
  transition: transform .22s cubic-bezier(.3,1.4,.5,1), box-shadow .22s ease, border-color .22s ease;
}
.gp:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow: 0 14px 28px -20px color-mix(in srgb, var(--c) 85%, transparent); }
.gp.is-flash { animation: gp-flash 1.4s ease; }
@keyframes gp-flash { 0%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 45%, transparent); border-color: var(--c); } }
.gp-mark { position: relative; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--on); font-family: var(--f-display); font-weight: 800; font-size: 20px; }
.gp-ico { width: 22px; height: 22px; }
.gp-name { font-size: 19px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.gp-addr { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.gp-addr svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; color: var(--c-ink); }
.gp-approx { color: var(--ink-3); font-size: 13px; }
.gp-desc { margin: 8px 0 10px; font-size: 15.5px; line-height: 1.55; }
.gp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.gp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-tag { font-family: var(--f-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; color: var(--c-ink); background: color-mix(in srgb, var(--c) 11%, var(--card)); }
.gp-links { display: flex; gap: 14px; font-size: 14px; font-weight: 700; }
.gp-links a { color: var(--c-ink); text-underline-offset: 3px; }

.guide-aside { position: sticky; top: 150px; display: grid; gap: 16px; }
@media (max-width: 900px) { .guide-aside { position: static; } }
.guide-map { height: 420px; border-radius: 16px; border: 1px solid var(--line); z-index: 0; }
@media (max-width: 900px) { .guide-map { height: 280px; } }
.gmark span {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; border: 2px solid #fff;
  background: var(--c); color: var(--on); font-family: var(--f-display); font-weight: 800; font-size: 13px;
  box-shadow: 0 3px 8px rgba(0,0,0,.25); transition: transform .2s cubic-bezier(.3,1.6,.5,1);
}
.gmark:hover span { transform: scale(1.2); }
.gmark-pop { font-weight: 700; color: var(--ink); }
.guide-box { padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.guide-box h2 { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 22px; margin: 0 0 12px; }
.glossary { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.glossary li { display: grid; grid-template-columns: 62px 1fr; gap: 0 10px; align-items: baseline; font-size: 14px; line-height: 1.4; }
.gl-ko { grid-row: span 2; font-family: var(--f-ko); font-size: 15px; color: var(--c-ink); }
.glossary strong { font-weight: 700; }
.glossary span:last-child { color: var(--ink-2); }
.guide-tips { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); }

/* Fêtes */
.fete-next {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 24px; padding: 16px 20px;
  border-radius: 16px; background: var(--card); border: 2px solid var(--jeok); text-decoration: none; color: inherit;
}
.fete-next-label { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--jeok); }
.fete-next-ko { font-family: var(--f-ko); font-size: 22px; color: var(--jeok); }
.fete-next-name { font-weight: 700; font-size: 18px; }
.fete-next-when { color: var(--ink-2); }
.fete-next.is-soon .fete-next-when { color: var(--jeok); font-weight: 700; }
.fx .fete-next.is-soon { animation: soon 2.4s ease-in-out infinite; }
@keyframes soon { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--jeok) 18%, transparent); } }
.fetes { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.fete { display: grid; grid-template-columns: 132px 1fr; gap: 20px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; scroll-margin: 140px; }
@media (max-width: 560px) { .fete { grid-template-columns: 1fr; } }
.fete-tile { position: relative; min-height: 112px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; color: var(--on); text-align: center; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.fete:hover .fete-tile { transform: rotate(-3deg) scale(1.03); }
.fete-ko { font-family: var(--f-ko); font-size: 26px; line-height: 1.1; }
.fete-date { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.fete-body h3 { font-size: 20px; margin: 2px 0 4px; letter-spacing: -.01em; }
.fete-rule { margin: 0 0 8px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.fete-body p { margin: 0 0 8px; line-height: 1.6; }
.fete-trad { color: var(--ink-2); font-size: 15px; }

.guide-sources { margin-top: 32px; padding: 14px 18px; border: 1px dashed var(--line); border-radius: 14px; font-size: 14px; color: var(--ink-2); }
.guide-sources summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.guide-sources ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }

/* Accueil des guides */
.guide-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-top: 28px; }
.guide-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 18px; transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s ease; }
.guide-card:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -26px rgba(0,0,0,.35); }
.guide-card-band { position: relative; display: flex; align-items: center; justify-content: space-between; height: 92px; padding: 16px 18px; color: var(--on); }
.guide-card-ico { width: 36px; height: 36px; }
.fx .guide-card:hover .guide-card-ico { animation: wiggle .5s ease-in-out; }
.guide-card-ko { font-family: var(--f-ko); font-size: 30px; }
.guide-card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.guide-card-title { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 26px; line-height: 1.05; }
.guide-card-intro { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.guide-card-meta { margin-top: auto; font-weight: 700; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════
   Direction artistique : le pinceau, le sceau et le tissu
   ═══════════════════════════════════════════════════════════════════ */
:root { --hanji: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.30  0 0 0 0 0.22  0 0 0 0.09 0'/%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.11' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.26  0 0 0 0.13 -0.035'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); --vermillon: #C8322B; --wood: #5A3A20; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
.brand .seal { view-transition-name: moim-seal; }
::selection { background: var(--hwang); color: var(--ink); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Papier hanji : fond fibreux sur tout le site */
body { background-color: var(--paper); background-image: var(--hanji); }

/* ——— En-tête et sceau (도장) ——— */
.top { position: relative; z-index: 30; background: transparent; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.top-inner { height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; }
.seal { display: inline-block; width: 48px; height: 48px; flex: none; transform: rotate(-4deg); filter: drop-shadow(0 1px 0 rgba(120, 20, 10, .15)); }
.seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx .brand .seal { animation: stamp .75s cubic-bezier(.2, 1.5, .4, 1) .1s backwards; }
.fx .brand:hover .seal { animation: stamp .55s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes stamp {
  0% { transform: scale(1.9) rotate(-20deg); opacity: 0; }
  55% { transform: scale(.88) rotate(-2deg); opacity: 1; }
  100% { transform: scale(1) rotate(-4deg); }
}
.brand-word { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand-fr { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 27px; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.brand .brand-ko { font-size: 13px; color: var(--vermillon); min-width: 0; letter-spacing: .08em; }
.nav { gap: 26px; }
.nav a { position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--vermillon); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.3, 1.2, .5, 1); }
.nav a:hover { text-decoration: none; color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }

/* ——— Haut de page de l'accueil ——— */
.hero > .wrap { position: relative; z-index: 1; }
.hero-home .hero-inner { gap: 40px; }
.hero-home > .wrap { max-width: 1400px; }
@media (min-width: 1000px) {
  .hero-home .hero-inner { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
}
.hero-home h1 { font-size: clamp(44px, 5.4vw, 84px); line-height: .96; letter-spacing: -.025em; margin-bottom: 22px; }
.hero-lede-home { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 520px; margin: 0 0 10px; }

/* Coup de pinceau sous « coréens » */
.brush { position: relative; z-index: 0; white-space: nowrap; }
.brush svg { position: absolute; left: -4%; bottom: -.2em; width: 108%; height: .4em; z-index: -1; color: var(--vermillon); overflow: visible; }
.fx .brush svg { clip-path: inset(0 100% 0 0); animation: brush-draw 1s cubic-bezier(.65, .05, .3, 1) .55s forwards; }
@keyframes brush-draw { to { clip-path: inset(0 0 0 0); } }

/* Rouleau suspendu (족자) : calligraphie verticale et sceau */
.jokja { display: none; }
@media (min-width: 1000px) {
  .jokja { display: flex; flex-direction: column; align-items: center; align-self: start; margin-top: -54px; transform-origin: 50% 0; }
}
.fx .jokja { animation: jokja-sway 8s ease-in-out infinite; }
@keyframes jokja-sway { 0%, 100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.3deg); } }
.jokja-cord { position: relative; width: 52px; height: 30px; }
.jokja-cord::before, .jokja-cord::after { content: ""; position: absolute; top: 2px; width: 1.5px; height: 33px; background: #7A5A35; }
.jokja-cord::before { left: 50%; transform-origin: top; transform: rotate(38deg); }
.jokja-cord::after { left: 50%; transform-origin: top; transform: rotate(-38deg); }
.jokja-rod { position: relative; z-index: 1; width: 104px; height: 9px; border-radius: 5px; background: linear-gradient(#80583A, var(--wood) 60%, #3D2614); box-shadow: 0 3px 5px rgba(40, 20, 5, .3); }
.jokja-rod::before, .jokja-rod::after { content: ""; position: absolute; top: -3px; width: 11px; height: 15px; border-radius: 4px; background: linear-gradient(90deg, #2E1C0F, #5B3A21, #2E1C0F); }
.jokja-rod::before { left: -7px; }
.jokja-rod::after { right: -7px; }
.jokja-silk { display: block; width: 86px; padding: 9px 9px 12px; background: #355E5C linear-gradient(90deg, rgba(255,255,255,.06), transparent 30%, transparent 70%, rgba(0,0,0,.12)); box-shadow: 0 26px 40px -24px rgba(40, 25, 5, .55); }
.jokja-sheet { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 22px 0 16px; background-color: #F6EFDD; background-image: var(--hanji); }
.jokja-text { writing-mode: vertical-rl; text-orientation: upright; font-family: "Song Myung", serif; font-size: 38px; line-height: 1; letter-spacing: .06em; color: #1A1410; }
.seal-sm { width: 30px; height: 30px; transform: rotate(5deg); }

/* Le patchwork devient un tissu : inclinaison 3D, reflet soyeux, toile */
.bojagi-wrap { perspective: 1200px; }
.bojagi {
  position: relative; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 50px 70px -50px rgba(40, 25, 10, .55); border-radius: 6px;
}
.bojagi::after {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .34), transparent 42%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .35s;
}
.bojagi:hover::after { opacity: 1; }
.patch::before, .strip-patch::before, .ev-date::before, .offer-band::before, .fete-tile::before, .guide-card-band::before,
.promo-visual:not(.has-img)::before, .spot-visual:not(.has-img)::before, .cd-box::before, .gp-mark::before, .guide-badge::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .055) 0 1px, transparent 1px 3px);
}
/* les pièces arrivent de partout et se cousent ensemble */
@media (prefers-reduced-motion: no-preference) {
  .fx .patch { animation: stitch-in .85s cubic-bezier(.2, .9, .25, 1.15) backwards; animation-delay: calc(var(--i) * 65ms + .15s); }
}
.patch:nth-child(4n+1) { --fx: -140px; --fy: -60px; --fr: -22deg; }
.patch:nth-child(4n+2) { --fx: 120px; --fy: -90px; --fr: 18deg; }
.patch:nth-child(4n+3) { --fx: 90px; --fy: 110px; --fr: -14deg; }
.patch:nth-child(4n) { --fx: -110px; --fy: 80px; --fr: 26deg; }
@keyframes stitch-in {
  from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)) scale(.6); }
  to { opacity: 1; transform: none; }
}
.bojagi-wrap figcaption { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; margin-top: 14px; }

/* ——— 140 ans : défilé comme un écran de concert ——— */
.anniv { position: relative; overflow: hidden; }
.marquee { overflow: hidden; padding: 18px 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.marquee-track { display: flex; align-items: center; width: max-content; }
.marquee-track span { white-space: nowrap; padding: 0 26px; font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: clamp(32px, 4.6vw, 64px); line-height: 1; text-transform: uppercase; letter-spacing: -.01em; }
.marquee-track .mq-ko { font-family: var(--f-ko); font-weight: 400; text-transform: none; color: var(--hwang); }
.marquee-track i { font-style: normal; color: var(--vermillon); font-size: clamp(18px, 2.2vw, 30px); }
@media (prefers-reduced-motion: no-preference) {
  .fx .marquee-track { animation: marquee 42s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }
.anniv-inner { padding-top: 16px; padding-bottom: 18px; }

/* ——— Titres de section bilingues ——— */
.sec-head { display: flex; align-items: flex-end; gap: 22px; padding-top: 72px; margin-bottom: 26px; }
.sec-head-flush { padding-top: 0; }
.sec-ko {
  position: relative; flex: none; font-family: "Song Myung", serif; font-size: clamp(50px, 7vw, 100px); line-height: .82;
  color: var(--vermillon); padding-right: 22px; border-right: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.sec-head h2, .explore .sec-head h2, .propose .sec-head h2, .about .sec-head h2 {
  font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78;
  font-size: clamp(34px, 4.6vw, 64px); line-height: .95; letter-spacing: -.02em; margin: 0;
}
.sec-sub { margin: 10px 0 0; color: var(--ink-2); font-size: 16px; }
.sec-head .eyebrow { margin-bottom: 8px; }
@media (max-width: 640px) { .sec-head { gap: 14px; padding-top: 52px; } .sec-ko { font-size: 42px; padding-right: 14px; } }
@media (prefers-reduced-motion: no-preference) {
  .fx .sec-head:not(.is-in) .sec-ko { opacity: 0; transform: translateY(26px); }
  .fx .sec-head .sec-ko { transition: opacity .7s ease, transform .9s cubic-bezier(.2, 1.2, .3, 1); }
}

/* ——— Mois : grand chiffre coréen en filigrane ——— */
.month { margin-top: 48px; }
.month-head { align-items: flex-end; min-height: 96px; padding-bottom: 18px; }
.month-head h3 { position: relative; z-index: 1; font-size: clamp(32px, 4vw, 50px); }
.month-head .count { position: relative; z-index: 1; margin-left: 2px; }
.month-head .ko {
  position: absolute; right: 0; bottom: 14px; z-index: 0; font-size: clamp(66px, 9.5vw, 132px); line-height: .8; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 18%, transparent); pointer-events: none;
}
.fx .month:hover .month-head .ko { transform: translateX(-10px); color: transparent; -webkit-text-stroke-color: var(--vermillon); }

/* ——— Fiches façon billet : souche détachable ——— */
@media (min-width: 641px) {
  .ev { --bw: 1px; padding-right: 0; }
  .ev.is-promo { --bw: 2px; }
  .ev-actions { align-self: stretch; align-items: center; margin: -12px 0; padding: 0 20px; border-left: 2px dashed color-mix(in srgb, var(--ink) 14%, transparent); }
  .ev-actions::before, .ev-actions::after {
    content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--paper); border: var(--bw) solid var(--line); transition: border-color .22s ease;
  }
  .ev-actions::before { top: calc(-1 * var(--bw) - 10px); clip-path: inset(50% 0 0 0); }
  .ev-actions::after { bottom: calc(-1 * var(--bw) - 10px); clip-path: inset(0 0 50% 0); }
  .ev:hover .ev-actions::before, .ev:hover .ev-actions::after { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
  .ev.is-promo .ev-actions::before, .ev.is-promo .ev-actions::after { border-color: var(--c); }
}

/* ——— Grand filigrane vertical des pages (ville, catégorie, guide) ——— */
.hero-vko {
  position: absolute; z-index: 0; top: 96px; right: max(16px, calc((100vw - var(--wrap)) / 2 + 24px));
  writing-mode: vertical-rl; text-orientation: upright; font-family: var(--f-ko); line-height: 1; letter-spacing: -.02em;
  font-size: min(clamp(76px, 12vw, 180px), calc(420px / var(--n, 2))); color: transparent; pointer-events: none;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--c, var(--vermillon)) 50%, transparent);
}
@media (max-width: 760px) { .hero-vko { top: 64px; font-size: min(64px, calc(300px / var(--n, 2))); -webkit-text-stroke-width: 1.5px; opacity: .55; } }
/* le texte d'en-tête laisse la place au filigrane */
@media (min-width: 761px) {
  .hero:has(> .hero-vko) h1, .hero:has(> .hero-vko) .hero-lede, .hero:has(> .hero-vko) .guide-head { max-width: calc(100% - clamp(90px, 12vw, 190px)); }
}
@media (prefers-reduced-motion: no-preference) {
  .fx .hero-vko { animation: vko-in 1.2s cubic-bezier(.2, .9, .25, 1) .2s backwards; }
}
@keyframes vko-in { from { opacity: 0; transform: translateY(-40px); } }

/* ——— Pied de page monumental ——— */
.foot { position: relative; overflow: hidden; border-top: 0; padding: 60px 0 0; }
.foot::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: repeating-linear-gradient(90deg, var(--jeok) 0 26px, var(--card) 26px 29px, var(--hwang) 29px 55px, var(--card) 55px 58px,
    var(--nok) 58px 84px, var(--card) 84px 87px, var(--cheong) 87px 113px, var(--card) 113px 116px,
    var(--hong) 116px 142px, var(--card) 142px 145px, var(--ja) 145px 171px, var(--card) 171px 174px);
}
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 26px; font-weight: 600; font-size: 15px; }
.foot-nav a { color: var(--ink); text-decoration: none; }
.foot-nav a:hover { color: var(--vermillon); }
.foot-giant { margin-top: 26px; text-align: center; line-height: .74; user-select: none; }
.foot-giant span {
  display: inline-block; transform: translateY(14%);
  font-family: var(--f-ko); font-size: clamp(150px, 36vw, 560px); letter-spacing: -.04em;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, var(--jeok) 0 17%, var(--hwang) 17% 30%, var(--cheong) 30% 51%, var(--nok) 51% 63%, var(--hong) 63% 81%, var(--ja) 81% 100%),
    linear-gradient(90deg, var(--cheong) 0 13%, var(--hong) 13% 31%, var(--hwang) 31% 46%, var(--jeok) 46% 64%, var(--byeok) 64% 79%, var(--nok) 79% 100%);
  background-size: auto, 100% 52%, 100% 48%;
  background-position: 0 0, 0 0, 0 100%;
  background-repeat: repeat, no-repeat, no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .fx .foot-giant span { animation: patch-shift 18s ease-in-out infinite alternate; }
}
@keyframes patch-shift { to { background-position: 0 0, 60px 0, -60px 100%; } }

/* ═══════════ Page d'un événement (standard) ═══════════ */
.event-see { margin-top: 18px; font-size: 15px; color: var(--ink-2); }
.event-see a { color: var(--c-ink); font-weight: 600; text-underline-offset: 3px; }
.event-upsell {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 22px; margin-top: 40px; padding: 20px 24px;
  border-radius: 18px; background: var(--card); border: 2px dashed color-mix(in srgb, var(--vermillon) 45%, var(--line));
}
.event-upsell-ko { font-family: "Song Myung", serif; font-size: 44px; line-height: 1; color: var(--vermillon); }
.event-upsell div { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.event-upsell strong { color: var(--ink); }
@media (max-width: 760px) { .event-upsell { grid-template-columns: 1fr; } .event-upsell-ko { display: none; } }

/* ═══════════ Organisateurs : page dédiée, aperçu, « C'est mon événement » ═══════════ */
/* la page Organisateurs va droit au but : pas d'agenda ni d'exploration */
body[data-page="organisateurs"] #agenda, body[data-page="organisateurs"] #explorer { display: none; }
.orga h1 { font-size: clamp(38px, 5.4vw, 74px); max-width: 920px; }
.orga-launch { display: inline-flex; gap: 8px; align-items: center; margin: 0 0 18px; padding: 8px 16px; border-radius: 999px; background: var(--hwang); color: var(--ink); font-weight: 700; }
.orga-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 34px; }
.orga-cta .orga-cta-2 { height: 52px; padding: 0 20px; font-size: 15.5px; }
.orga-stats { list-style: none; padding: 0; margin: 0 0 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; max-width: 980px; }
.orga-stats li { position: relative; padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.orga-stats li::before { content: ""; position: absolute; left: 20px; top: 0; width: 46px; height: 4px; border-radius: 0 0 3px 3px; background: var(--vermillon); }
.orga-stats li:nth-child(2)::before { background: var(--cheong); }
.orga-stats li:nth-child(3)::before { background: var(--hwang); }
.orga-stats li:nth-child(4)::before { background: var(--nok); }
.orga-stats strong { display: block; font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 52px; line-height: 1; }
.orga-stats span { color: var(--ink-2); font-size: 14.5px; }
.orga-demo { margin-bottom: 64px; }
.orga-demo-lede { color: var(--ink-2); max-width: 760px; margin: 0 0 20px; }
.orga-faq { max-width: 900px; }
.orga-faq-item { border-bottom: 1px solid var(--line); padding: 4px 0; }
.orga-faq-item summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.orga-faq-item summary::-webkit-details-marker { display: none; }
.orga-faq-item summary::after { content: "+"; font-family: var(--f-display); font-size: 26px; line-height: .8; color: var(--vermillon); transition: transform .25s; }
.orga-faq-item[open] summary::after { transform: rotate(45deg); }
.orga-faq-item p { margin: 0 0 16px; color: var(--ink-2); line-height: 1.6; max-width: 760px; }

/* Aperçu (fenêtre et démonstration intégrée) */
.pv-dialog { width: min(900px, calc(100vw - 24px)); }
.pv-inline { padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; }
.pv-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 18px; }
.pv-tab {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 10px; align-items: center; text-align: left;
  padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.pv-tab[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent); }
.pv-tab-ko { grid-row: span 2; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background-color: var(--c); background-image: var(--pat); background-size: var(--ps); color: var(--on); font-family: var(--f-ko); font-size: 14px; }
.pv-tab-name { font-weight: 700; }
.pv-tab-price { font-family: var(--f-display); font-weight: 800; font-size: 18px; color: var(--c-ink); }
.pv-content { display: grid; gap: 14px; }
.pv-sec { padding: 16px 18px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.pv-sec h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 16px; }
.pv-check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--nok); color: #fff; font-size: 13px; flex: none; }
.pv-sec.is-off { opacity: .62; }
.pv-sec.is-off h3 { margin-bottom: 4px; }
.pv-sec.is-off .pv-check { background: var(--ink-3); }
.pv-off { margin: 0 0 0 34px; color: var(--ink-3); font-size: 14px; }
.pv-note { margin: 10px 0 0; color: var(--ink-2); font-size: 14.5px; }
.pv-note a { color: var(--c-ink, var(--vermillon)); font-weight: 700; }
.pv-agenda .ev { margin: 0; }
.pv-pinned { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 24px; }
.pv-pinned > span:first-child { color: var(--ink); }
.pv-pinned-ko { font-family: var(--f-ko); font-weight: 400; font-size: 16px; color: var(--vermillon); }
.pv-pinned small { width: 100%; font-family: var(--f-body); font-weight: 400; font-size: 13px; color: var(--ink-3); }
.pv-bojagi { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 104px); gap: 5px; padding: 5px; border-radius: 6px; background: var(--paper-2); max-width: 520px; }
.pv-bojagi .pv-mine { grid-column: 1; grid-row: 1; }
.pv-bojagi.is-big .pv-mine { grid-column: 1 / 3; grid-row: 1 / 3; }
.pv-bojagi .patch-title { -webkit-line-clamp: 2; }
.pv-ghost { position: relative; border-radius: 2px; background: color-mix(in srgb, var(--ink) 9%, var(--card)); }
.pv-ghost::after { content: ""; position: absolute; inset: 5px; border: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent); }
.pv-spot { grid-template-columns: 180px 1fr; }
.pv-spot .spot-visual { min-height: 150px; }
.pv-spot .spot-visual .pv-day { font-size: 60px; }
.pv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
.pv-foot-note { color: var(--ink-3); font-size: 13.5px; }
@media (max-width: 640px) { .pv-spot { grid-template-columns: 1fr; } .pv-inline { padding: 14px; } }

/* « C'est votre événement ? » */
.event-upsell { grid-template-columns: auto 1fr auto; }
.event-upsell-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.event-upsell-cta .icon-btn { height: 42px; padding: 0 16px; }
@media (max-width: 760px) { .event-upsell { grid-template-columns: 1fr; } }
.d-claim { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--vermillon) 7%, var(--card)); font-size: 14.5px; }
.d-claim span { font-family: "Song Myung", serif; color: var(--vermillon); font-size: 18px; }
.d-claim button { all: unset; cursor: pointer; font-weight: 700; color: var(--vermillon); text-decoration: underline; text-underline-offset: 3px; }
.d-claim button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pf-claim { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 14px 18px; border-radius: 14px; background: color-mix(in srgb, var(--hwang) 18%, var(--card)); border: 1px solid color-mix(in srgb, var(--hwang) 50%, var(--line)); }
.pf-claim-ko { flex: none; white-space: nowrap; font-family: "Song Myung", serif; font-size: 30px; color: var(--vermillon); line-height: 1; }

/* ═══════════ Offre de lancement : −10 % sur la première mise en avant ═══════════ */
.offer-first { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
.offer-first span { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 999px; background: var(--hwang); color: var(--ink); font-weight: 700; }
.offer-first strong { color: var(--ink); }
.propose-form .pf-first { grid-column: 1 / -1; margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--hwang) 16%, var(--card)); }
.pf-first strong { color: var(--vermillon); }
.pf-sum-price s { font-size: 18px; color: var(--ink-3); font-weight: 600; margin-right: 6px; }
.upsell-first { display: inline-block; margin-top: 4px; font-weight: 700; color: var(--vermillon); }

/* ═══════════ Pages légales et 404 ═══════════ */
body[data-page="legal"] #agenda, body[data-page="legal"] #explorer, body[data-page="legal"] #proposer,
body[data-page="404"] #agenda, body[data-page="404"] #proposer { display: none; }
.legal { max-width: 780px; margin-top: 18px; padding: 28px 32px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; line-height: 1.7; }
@media (max-width: 640px) { .legal { padding: 20px 18px; } }
.legal h2 { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; font-size: 24px; margin: 28px 0 8px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--ink-2); }
.legal a { color: var(--vermillon); text-underline-offset: 3px; }
.legal mark.todo { background: color-mix(in srgb, var(--hwang) 35%, transparent); color: var(--ink); padding: 0 4px; border-radius: 4px; font-weight: 600; }
.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 14.5px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.legal-table thead th { font-family: var(--f-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.legal-table tbody th { white-space: nowrap; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; font-size: 13.5px; }
.foot-legal a { color: var(--ink-3); text-underline-offset: 3px; }
.foot-legal a:hover { color: var(--vermillon); }
.propose-form .pf-check a { color: var(--vermillon); font-weight: 600; }
.notfound h1 { font-size: clamp(38px, 5vw, 68px); }
.notfound-nap { padding: 16px 0 0; text-align: left; }
.notfound-nap .horangi-nap { margin: 0 0 8px; }

/* ═══════════ En-tête collé en haut et appel aux organisateurs ═══════════ */
:root { --head-h: 74px; }
html.is-scrolled { --head-h: 60px; }
@media (max-width: 640px) { :root { --head-h: 62px; } html.is-scrolled { --head-h: 56px; } }
.top {
  position: sticky; top: 0; z-index: 50;
  background-color: color-mix(in srgb, var(--paper) 90%, transparent); background-image: var(--hanji);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  transition: box-shadow .25s ease;
}
.is-scrolled .top { box-shadow: 0 12px 26px -20px rgba(40, 25, 10, .45); }
.top-inner { height: var(--head-h); gap: 18px; transition: height .25s ease; }
.seal { transition: width .25s ease, height .25s ease; }
.is-scrolled .brand .seal { width: 40px; height: 40px; }
.filters { top: var(--head-h); transition: top .25s ease; }
.nav { margin-left: auto; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* le bouton qui dit tout de suite à quoi sert la page Organisateurs */
.top-cta {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px;
  background: var(--vermillon); color: #fff; font-weight: 700; font-size: 14.5px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(200, 50, 43, .8); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.top-cta:hover { background: #B02A24; transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(200, 50, 43, .85); }
.top-cta:focus-visible { outline: 3px solid var(--hwang); outline-offset: 3px; }
.top-cta[aria-current="page"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--hwang); }
.top-cta-ico { color: var(--hwang); font-size: 15px; }
.fx .top-cta-ico { display: inline-block; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 70%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.35) rotate(25deg); } 90% { transform: scale(.9) rotate(-10deg); } }
.top-cta-short { display: none; }
@media (max-width: 1200px) { .top-cta-long { display: none; } .top-cta-short { display: inline; } }

/* menu mobile */
.menu-btn { display: none; flex: none; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
@media (max-width: 960px) {
  .menu-btn { display: grid; }
  .top-cta { margin-left: auto; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; gap: 0;
    padding: 6px 16px 16px; background-color: var(--paper); background-image: var(--hanji);
    border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -24px rgba(40, 25, 10, .5);
  }
  .top.is-open .nav { display: flex; }
  .nav a { padding: 13px 4px; font-size: 17px; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }
  .nav a::after { display: none; }
  .top.is-open .menu-btn { background: var(--ink); color: var(--paper); }
}
@media (max-width: 560px) {
  .brand-word { display: none; }
  .top-inner { gap: 10px; }
  .top-cta { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .fx-toggle { width: 34px; height: 34px; margin-left: 0; }
}

/* bandeau d'annonce pour les organisateurs */
.announce { background: var(--ink); color: var(--paper); font-size: 14px; }
.announce-inner { display: flex; align-items: center; gap: 8px 16px; min-height: 42px; padding-top: 6px; padding-bottom: 6px; }
.announce p { margin: 0; flex: 1; }
.announce-ko { font-family: "Song Myung", serif; font-size: 20px; color: var(--hwang); line-height: 1; }
.announce-link { color: var(--hwang); font-weight: 700; white-space: nowrap; text-underline-offset: 3px; }
.announce-close { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; }
.announce-close:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
body[data-page="organisateurs"] .announce, body[data-page="legal"] .announce { display: none; }
@media (max-width: 640px) { .announce-ko, .announce-more { display: none; } }

/* ═══════════ Visuels des événements (repris des sources) ═══════════ */
/* Fiche de l'agenda : la vignette, comme une photo glissée dans le billet */
.ev.has-img { grid-template-columns: 96px 88px 1fr auto; }
.ev-img {
  position: relative; width: 88px; aspect-ratio: 4 / 5; align-self: center; border-radius: 9px; overflow: hidden;
  background: color-mix(in srgb, var(--c) 18%, var(--paper-2));
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px color-mix(in srgb, var(--c) 30%, var(--line)), 0 10px 18px -12px rgba(0, 0, 0, .45);
  transform: rotate(2deg); transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.ev-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev:hover .ev-img { transform: rotate(-1deg) scale(1.06); }
@media (max-width: 640px) {
  .ev.has-img { grid-template-columns: 76px 1fr 64px; }
  .ev.has-img .ev-date { grid-column: 1; grid-row: 1; }
  .ev.has-img .ev-body { grid-column: 2; grid-row: 1; }
  .ev.has-img .ev-img { grid-column: 3; grid-row: 1; width: 64px; align-self: start; margin-top: 4px; }
  .ev.has-img .ev-actions { grid-column: 2 / 4; }
}

/* Pièces du patchwork : le visuel teinté à la couleur de la pièce, en couleurs au survol */
.patch-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.patch-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: multiply; filter: grayscale(1) contrast(1.1) brightness(1.15); opacity: .5;
  transition: opacity .35s ease, filter .35s ease, transform .6s ease;
}
.patch-media::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease;
  background: linear-gradient(to top, rgba(14, 14, 18, .82), rgba(14, 14, 18, .15) 62%, rgba(14, 14, 18, .35));
}
.patch.has-img > :not(.patch-media):not(.patch-ico) { position: relative; z-index: 1; }
.patch.has-img .patch-ico { z-index: 1; }
.patch.has-img:is(:hover, :focus-visible, .big) { color: #fff; }
.patch.has-img:is(:hover, :focus-visible, .big) .patch-media img { mix-blend-mode: normal; filter: none; opacity: 1; }
.patch.has-img:is(:hover, :focus-visible, .big) .patch-media::after { opacity: 1; }
.patch.has-img:hover .patch-media img { transform: scale(1.06); }
.patch.has-img.big { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }

/* Grand visuel (page de l'événement, bannière, fiche) : l'affiche entière sur un fond flouté */
.has-img .img-bg { transform: scale(1.18); filter: blur(22px) saturate(1.35); opacity: .95; }
.has-img .img-main { object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35)); }
.promo-visual.has-img { background: color-mix(in srgb, var(--c) 30%, var(--ink)); }
@media (min-width: 861px) { .promo-visual.has-img { aspect-ratio: 1; } }
.img-credit {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; max-width: calc(100% - 20px);
  padding: 2px 8px; border-radius: 999px; background: rgba(14, 14, 18, .62); color: #fff;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .03em; line-height: 1.6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.spot-visual .img-credit { right: 8px; bottom: 8px; font-size: 9.5px; }

/* Fiche détaillée : le visuel au-dessus du bandeau */
.d-media { position: relative; height: 260px; overflow: hidden; background: color-mix(in srgb, var(--c) 30%, var(--ink)); }
.d-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .d-media { height: 200px; } }
.detail.has-media .d-close { top: -236px; background: rgba(14, 14, 18, .55); color: #fff; }
@media (max-width: 560px) { .detail.has-media .d-close { top: -176px; } }
/* lisibilité : la couleur de la pièce remonte sous le texte, le visuel reste visible en haut */
.patch-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; transition: opacity .35s ease;
  background: linear-gradient(to top, var(--c) 34%, color-mix(in srgb, var(--c) 55%, transparent) 70%, transparent);
}
.patch-media::after { z-index: 2; }
.patch.has-img:is(:hover, :focus-visible, .big) .patch-media::before { opacity: 0; }
.d-media .img-bg { transform: scale(1.18); filter: blur(22px) saturate(1.35); }
.d-media .img-main { object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35)); }