/* ===========================================================
   TOPATOPIA — PAPER-CUT tactile layer
   Torn deckle edges via clip-path (renders everywhere, keeps text
   crisp) + layered drop-shadows for tactile elevation + inset
   highlight/edge for the cut-paper feel. Palette: our lavender /
   cream / fuchsia / violet / blue.
   =========================================================== */

:root {
  --pc-cream:  #f7f1fb;
  --pc-cream2: #fcf8ff;
  --pc-edge:   #cdbcec;

  /* torn deckle silhouettes (percent points → scale to any size) */
  --torn: polygon(
    0% 2%, 6% 0.4%, 13% 1.8%, 20% 0.3%, 27% 1.4%, 34% 0.2%, 41% 1.6%, 48% 0.3%,
    55% 1.5%, 62% 0.2%, 69% 1.8%, 76% 0.4%, 83% 1.3%, 90% 0.2%, 95% 1.6%, 100% 1%,
    99.4% 10%, 100% 19%, 99% 28%, 100% 37%, 99.3% 46%, 100% 55%, 99% 64%, 100% 73%,
    99.3% 82%, 100% 91%, 99.4% 99%,
    93% 99.7%, 86% 98.4%, 79% 99.8%, 72% 98.6%, 65% 99.7%, 58% 98.3%, 51% 99.8%,
    44% 98.5%, 37% 99.7%, 30% 98.4%, 23% 99.8%, 16% 98.6%, 9% 99.7%, 3% 98.4%,
    0.6% 91%, 0% 82%, 0.8% 73%, 0% 64%, 0.7% 55%, 0% 46%, 0.8% 37%, 0% 28%, 0.6% 19%, 0% 10%
  );
  --torn2: polygon(
    0% 1.4%, 7% 0.2%, 14% 1.6%, 21% 0.4%, 28% 1.3%, 35% 0.2%, 42% 1.7%, 49% 0.3%,
    56% 1.4%, 63% 0.2%, 70% 1.6%, 77% 0.3%, 84% 1.5%, 91% 0.2%, 96% 1.4%, 100% 0.6%,
    99.3% 11%, 100% 22%, 99% 33%, 100% 44%, 99.4% 56%, 100% 67%, 99% 78%, 100% 89%, 99.4% 99%,
    92% 99.6%, 84% 98.4%, 76% 99.8%, 68% 98.5%, 60% 99.7%, 52% 98.3%, 44% 99.8%,
    36% 98.5%, 28% 99.7%, 20% 98.4%, 12% 99.8%, 5% 98.5%,
    0.6% 89%, 0% 78%, 0.8% 67%, 0% 56%, 0.7% 44%, 0% 33%, 0.8% 22%, 0% 11%
  );

  /* tactile drop-shadows (follow the torn silhouette) */
  --pc-lift:    drop-shadow(-3px 6px 6px rgba(40,20,90,.20)) drop-shadow(-8px 16px 20px rgba(40,20,90,.25));
  --pc-lift-hi: drop-shadow(-4px 8px 8px rgba(40,20,90,.20)) drop-shadow(-12px 24px 30px rgba(40,20,90,.25));
  --pc-lift-sm: drop-shadow(-2px 4px 4px rgba(40,20,90,.30));
}

/* ===========================================================
   BUTTONS — torn paper chips
   =========================================================== */
.btn {
  position: relative;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff;
  padding: 16px 32px;
  box-shadow: none !important;
  clip-path: none !important;
  filter: var(--pc-lift);
  transition: transform .18s var(--ease), filter .18s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fuchsia);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 6px rgba(120,8,80,.35);
  clip-path: var(--torn2);
  transition: background .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px) rotate(-.6deg); filter: var(--pc-lift-hi); }
.btn:active { transform: translateY(2px); filter: var(--pc-lift-sm); }

.btn-ghost { color: var(--indigo-800) !important; background: transparent !important; }
.btn-ghost::before {
  background: var(--pc-cream2);
  box-shadow: inset 0 0 0 2.5px var(--indigo-800), inset 0 2px 0 rgba(255,255,255,.6);
}
.btn-ghost:hover { color: #fff !important; }
.btn-ghost:hover::before { background: var(--indigo-800); }

/* ===========================================================
   PAPER CARDS / WINDOWS
   =========================================================== */
.paper-card {
  position: relative;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: var(--pc-lift);
  overflow: visible;
}
.paper-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--pc-cream);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 0 0 2px rgba(205,188,236,.55);
  clip-path: var(--torn);
}
.paper-card::after { content: none !important; } /* drop old top-tint overlay */
.mob-card { transition: transform .25s var(--ease), filter .25s var(--ease); }
.mob-card:hover { transform: translateY(-8px) rotate(-1deg); filter: var(--pc-lift-hi); }
.loc-card::before { clip-path: var(--torn2); }

/* night-band cards read on dark → brighter paper */
.band-night .paper-card::before { background: var(--pc-cream2); }

/* map frame = torn window (canvas content is clipped to the torn edge) */
.map-frame {
  position: relative;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: var(--pc-lift);
  overflow: visible;
}
.map-frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--pc-cream);
  box-shadow: inset 0 0 0 2px rgba(205,188,236,.6);
  clip-path: var(--torn2);
}
.map-frame canvas {
  clip-path: var(--torn2);
}

/* gallery slots → torn paper photos */
.gal-grid > div {
  filter: var(--pc-lift);
}
.gal-grid image-slot {
  clip-path: var(--torn);
  filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.gal-grid .tall image-slot { clip-path: var(--torn2); }

/* ===========================================================
   NAV CONTROLS
   =========================================================== */
.lang {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: var(--pc-lift-sm);
  position: relative;
  overflow: visible;
}
.lang::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--pc-cream2);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6);
  clip-path: var(--torn2);
}
.lang button { position: relative; z-index: 1; }
.lang button.on { background: var(--indigo-800); color: #fff; border-radius: 999px; }

.burger {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: var(--pc-lift-sm);
  position: relative;
}
.burger::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--pc-cream2);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6);
  clip-path: var(--torn2);
}
.burger:active { filter: none; }

.nav.scrolled { background: transparent !important; box-shadow: none !important; }
.nav.scrolled::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: rgba(247,241,251,.95);
  clip-path: var(--torn);
}
.nav.scrolled::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  box-shadow: 0 10px 24px rgba(40,20,90,.15);
}

/* ===========================================================
   PROGRAMMATION — day tabs + tags
   =========================================================== */
.day-tab {
  position: relative;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--indigo-800) !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: var(--pc-lift-sm);
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.day-tab::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--pc-cream2);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6);
  clip-path: var(--torn2);
  transition: background .2s, box-shadow .2s;
}
.day-tab small { opacity: .7; position: relative; z-index: 1; }
.day-tab:hover { transform: translateY(-3px) rotate(-1deg); color: var(--fuchsia-deep) !important; filter: var(--pc-lift); }
.day-tab.on { color: #fff !important; filter: var(--pc-lift-hi); }
.day-tab.on::before {
  background: var(--fuchsia);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 6px rgba(120,8,80,.3);
}

.tag {
  position: relative;
  border-radius: 0 !important;
  color: #fff !important;
  padding: 6px 13px !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: var(--pc-lift-sm);
}
.tag::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25);
  clip-path: var(--torn2);
}
.tag.atelier::before { background: var(--blue); }
.tag.scene::before   { background: var(--fuchsia); }
.tag.parole::before  { background: var(--violet-600); }
.tag.repas::before   { background: var(--magenta); }

.slot { border-top-style: dotted !important; border-top-width: 2px !important; }

/* ===========================================================
   INPUTS — pressed paper field
   =========================================================== */
.news-row input {
  background: var(--pc-cream2) !important;
  color: var(--indigo-800) !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--torn2);
  box-shadow: inset 0 4px 9px -3px rgba(40,20,90,.4), inset 0 0 0 2px rgba(205,188,236,.7) !important;
}
.news-row input::placeholder { color: var(--ink-soft); opacity: .7; }

/* pins keep a little lift */
.loc-row .pin, .map-pin .pinbody { box-shadow: var(--shadow-paper) !important; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .day-tab:hover, .mob-card:hover { transform: none; }
}