/* Parissi web — shared stylesheet.
   Brand tokens mirror lib/utils/Style.dart. No gradients anywhere.
   Contrast rules: #AF44F2 on white is 4.25:1, so small text and filled buttons
   use --accent-strong (#9D33E6, 5.2:1); #AF44F2 outlines interactive controls
   (the light lila #EED4FF is too pale). Yellow #FFF835 is always a background
   under #34045F text, never text on white. */

/* Inter arrives after the first paint (non-blocking): until then a local Arial
   scaled to Inter's metrics holds the same lines, so nothing reflows on swap. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%;
}
@font-face {
  font-family: 'AvantGarde-Demi';
  src: url('/assets/fonts/avantgarde_demi.ttf') format('truetype');
  font-display: swap;
}

:root {
  --font-title: 'AvantGarde-Demi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --bg: #FFFFFF;
  --surface: #FBF4FF;
  --border: #EED4FF;
  --line: #AF44F2;
  --text: #1E0638;
  --text-muted: #5B4A6B;
  --accent: #AF44F2;
  --accent-strong: #9D33E6;
  --on-accent: #FFFFFF;
  --accent-text: #8A2BC9;
  --see-all: #8A2BC9;
  --focus: #34045F;
  --yellow: #FFF835;
  --on-yellow: #34045F;
  --skeleton: #F3E6FC;
  --heart: #E0245E;
  --logo: #AF44F2;
  --hero-shape: #FBF4FF;
  --error-text: #B0134F;
  --kicker-bg: #EED4FF;
  --divider: #D699FF;
  --weather-bg: #FBF4FF; --weather-rule: #FFFFFF;
  --statement-em: #8A2BC9;
  --scrim: rgba(251, 244, 255, 0.9); --scrim-text: #1E0638; --scrim-date: #6B1FA0;
  --review-bg: #FFFFFF; --review-quote: #0D0E12; --review-avatar: #D699FF; --review-source: #8A2BC9;
  --footer-shape: #EED4FF; --footer-logo: #AF44F2; --footer-title: #34045F; --footer-text: #2B2B39;
  --header-h: 65px;

  --radius: 18px;
  --radius-lg: 28px;
  --wrap: 1200px;
  --gutter: 16px;
  --gap: 16px;
  --tabbar-h: 64px;
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 32px; --gap: 20px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D0E12; --surface: #15181F; --border: #2B2E33; --line: #AF44F2;
    --text: #F4EEF8; --text-muted: #B8AEBF;
    --accent: #D699FF; --accent-strong: #D699FF; --on-accent: #1E0638; --accent-text: #D699FF;
    --see-all: #FFF835; --focus: #FFF835; --skeleton: #1C2029; --heart: #FF6B9A; --logo: #FFF835; --hero-shape: #34045F; --error-text: #FF8FB8; --kicker-bg: #0D0E12; --divider: #5B1F8F; --weather-bg: #000000; --weather-rule: rgba(255,255,255,.15); --statement-em: #FFF835; --scrim: rgba(13, 14, 18, 0.82); --scrim-text: #FFFFFF; --scrim-date: #FFF835; --review-bg: #34045F; --review-quote: #FFF835; --review-avatar: #AF44F2; --review-source: #FFF835; --footer-shape: #34045F; --footer-logo: #D699FF; --footer-title: #FFFFFF; --footer-text: rgba(255,255,255,.86);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D0E12; --surface: #15181F; --border: #2B2E33; --line: #AF44F2;
  --text: #F4EEF8; --text-muted: #B8AEBF;
  --accent: #D699FF; --accent-strong: #D699FF; --on-accent: #1E0638; --accent-text: #D699FF;
  --see-all: #FFF835; --focus: #FFF835; --skeleton: #1C2029; --heart: #FF6B9A; --logo: #FFF835; --hero-shape: #34045F; --error-text: #FF8FB8; --kicker-bg: #0D0E12; --divider: #5B1F8F; --weather-bg: #000000; --weather-rule: rgba(255,255,255,.15); --statement-em: #FFF835; --scrim: rgba(13, 14, 18, 0.82); --scrim-text: #FFFFFF; --scrim-date: #FFF835; --review-bg: #34045F; --review-quote: #FFF835; --review-avatar: #AF44F2; --review-source: #FFF835; --footer-shape: #34045F; --footer-logo: #D699FF; --footer-title: #FFFFFF; --footer-text: rgba(255,255,255,.86);
  color-scheme: dark;
}

/* Profile › text size. Everything is sized in rem, so this scales the page. */
:root[data-text="lg"] { font-size: 112.5%; }
:root[data-text="xl"] { font-size: 125%; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* never let a component's display override the hidden attribute */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 820px) { body { padding-bottom: 0; } }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
a { color: var(--accent-text); }
button, input, select { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
main:focus, h1:focus, h2:focus { outline: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--accent-strong); color: var(--on-accent);
  padding: 12px 20px; border-radius: var(--radius); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- header */
.site-header { position: relative; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); }
.header-row { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-title); font-size: 1.5rem; color: var(--text); text-decoration: none;
}
.brand { gap: 8px; }
/* Logo mark (Figma export) as a mask, so its colour follows the theme:
   brand lila #AF44F2 in light mode, yellow #FFF835 in dark mode. */
.logo-mark {
  display: block; width: 32px; height: 38px; flex-shrink: 0;
  background: var(--logo);
  -webkit-mask: url('/assets/logo-mark.svg') center / contain no-repeat;
  mask: url('/assets/logo-mark.svg') center / contain no-repeat;
}
.brand[aria-current="page"] { color: var(--text); }

.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0;
  border: 1.5px solid var(--line); border-radius: 50%; background: none; color: var(--text); cursor: pointer;
}
.icon-btn:hover { box-shadow: 0 0 0 3px var(--yellow); }
.icon-btn[aria-expanded="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }

/* Header settings (⚙): languages + light/dark in a small panel. */
.settings { position: relative; }
.settings-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  width: max-content; min-width: 240px; padding: 16px;
  display: grid; gap: 8px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius);
}
.settings-panel[hidden] { display: none; }
.settings-label { font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.settings-label + .lang-switch { justify-self: start; margin-bottom: 8px; }
.theme-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 4px 12px 4px 4px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-weight: 600; font-size: 0.9375rem; color: var(--text); text-align: left;
}
.theme-row:hover { background: var(--surface); }
.icon-btn .icon { width: 20px; height: 20px; }
/* sun/moon swap */
.icon-btn .i-sun { display: none; }
:root[data-theme="dark"] .icon-btn .i-sun { display: block; }
:root[data-theme="dark"] .icon-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .icon-btn .i-moon { display: none; }
}
.main-nav { display: none; }
.main-nav ul { display: flex; gap: 4px; }
.main-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  color: var(--text); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.main-nav a:hover { background: var(--surface); }
.main-nav a[aria-current="page"] { color: var(--accent-text); font-weight: 700; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (min-width: 820px) { .header-right { gap: 12px; } }
@media (max-width: 359px) { .brand > span:last-child { display: none; } }
.header-right .tools { display: none; }

.lang-switch { display: flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 2px; }
.lang-switch button, .lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 40px; border: 0; background: none; cursor: pointer; text-decoration: none;
  border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted);
}
.lang-switch button[aria-pressed="true"], .lang-switch a[aria-current] { background: var(--accent-strong); color: var(--on-accent); }

.icon { width: 22px; height: 22px; fill: currentColor; }
.icon-chevLeft, .icon-chevRight { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.tools { display: flex; gap: 4px; }
.tool {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px; border-radius: 999px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
}
.tool:hover { background: var(--surface); }
.tool[aria-current="page"] { background: var(--accent-strong); color: var(--on-accent); }
.header-right .tool[aria-current="page"] { gap: 5px; padding: 0 14px 0 12px; }
.header-right .tool[aria-current="page"] .tool-icon { margin-right: 0; }
.tool-icon { position: relative; display: inline-flex; margin-right: 4px; }
.count {
  position: absolute; top: -6px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--yellow); color: var(--on-yellow);
  font-size: 0.6875rem; font-weight: 700; line-height: 18px; text-align: center;
}

@media (min-width: 820px) {
  .site-header { position: sticky; top: 0; }
  .main-nav { display: block; margin-left: 16px; }
  .header-right .tools { display: flex; }
}
@media (min-width: 820px) and (max-width: 1099px) {
  /* Icon-only tools on mid widths; the label stays for screen readers. */
  .header-right .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-right .tool { padding: 0 11px; }
}

/* Phone tab bar, like the app's bottom navigation. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--bg); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar ul { display: grid; grid-template-columns: repeat(4, 1fr); height: var(--tabbar-h); }
/* Each tab fills its quarter of the bar, icon and label centred: as an
   inline-flex .tool it hugged its content at the left of its cell, so
   « Accueil » touched the screen edge and the spare room piled up on the right. */
.tabbar .tool {
  display: flex; width: 100%;
  height: 100%; flex-direction: column; justify-content: center; gap: 2px;
  border-radius: 0; padding: 0; font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
}
.tabbar .tool-icon { margin-right: 0; }
.tabbar .tool[aria-current="page"] { background: none; color: var(--accent-text); }
.tabbar .tool[aria-current="page"] .tool-icon { background: var(--surface); border-radius: 999px; padding: 2px 16px; }
@media (min-width: 820px) { .tabbar { display: none; } }

/* ----------------------------------------------------------- page heads */
.page-head { padding-top: 32px; }
.page-head h1, .hero h1 {
  font-family: var(--font-title); font-weight: normal; letter-spacing: -0.01em;
}
.page-head h1 { font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.1; }
.page-head p { margin-top: 8px; color: var(--text-muted); max-width: 40em; }

.hero { position: relative; text-align: center; }
.hero-inner { position: relative; padding-top: clamp(64px, 8vw, 96px); padding-bottom: clamp(64px, 9vw, 120px); }
/* The shape starts under the header (top: -header height) and ends with the
   hero, so its height always follows the content above it. */
.hero-bg { position: absolute; left: 0; right: 0; bottom: 0; top: calc(-1 * var(--header-h)); z-index: 0; pointer-events: none; }
.hero-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--hero-shape); }
.hero-rond { display: none; }
@media (max-width: 719px) {
  .hero-wave { display: none; }
  .hero-rond { display: block; }
}
.hero .chip { background: var(--hero-shape); }
.hero .chip:hover, .hero .chip:active { background: var(--bg); }
/* Home: the header is see-through over the shape, solid again once scrolled. */
body[data-page="home"] .site-header, body[data-page="about"] .site-header { background: transparent; border-bottom-color: transparent; transition: background .2s ease, border-color .2s ease; }
body[data-page="home"] .site-header.scrolled, body[data-page="about"] .site-header.scrolled { background: var(--bg); border-bottom-color: var(--border); }
body[data-page="home"] main, body[data-page="about"] main { position: relative; z-index: 0; }
.hero h1 { font-size: clamp(2.25rem, 7vw, 3.75rem); line-height: 1.05; }
.hero h1 mark {
  position: relative; display: inline-block; isolation: isolate;
  background: none; color: var(--on-yellow); padding: 0 .12em;
}
/* Yellow marker behind "Paris": swipes in with a springy overshoot and lands
   slightly tilted; a playful wiggle on hover. Static when motion is reduced
   (OS setting or Profil › Réduire les animations): the base state is final. */
.hero h1 mark::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--yellow); border-radius: 10px;
  transform: rotate(-2deg); transform-origin: left center;
}
/* Whole title: words spring up one after another (80 ms apart), then the
   marker swipes under "Paris" once the last word has landed. */
.hero h1 .word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .hero h1 .word { animation: word-in .7s cubic-bezier(.34, 1.56, .64, 1) calc(80ms * var(--i) + 100ms) both; }
  :root:not([data-motion="reduce"]) .hero h1 mark { animation: mark-ink .9s ease calc(80ms * var(--words, 4) + 250ms) both; }
  :root:not([data-motion="reduce"]) .hero h1 mark::before { animation: marker-in .8s cubic-bezier(.34, 1.56, .64, 1) calc(80ms * var(--words, 4) + 300ms) both; }
  :root:not([data-motion="reduce"]) .hero h1 mark:hover::before { animation: marker-wiggle .6s cubic-bezier(.34, 1.56, .64, 1); }
}
@keyframes word-in {
  0% { opacity: 0; transform: translateY(.45em) rotate(-4deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes marker-in {
  0% { transform: scaleX(0) rotate(-8deg); }
  60% { transform: scaleX(1.06) rotate(1deg); }
  100% { transform: scaleX(1) rotate(-2deg); }
}
@keyframes marker-wiggle {
  0%, 100% { transform: rotate(-2deg); }
  25% { transform: rotate(3deg) scale(1.06); }
  50% { transform: rotate(-4deg) scale(1.02); }
  75% { transform: rotate(1deg); }
}
/* The word switches from page text colour to ink-on-yellow as the marker
   passes, so it stays readable in dark mode before the marker lands. */
@keyframes mark-ink {
  0%, 30% { color: var(--text); }
  100% { color: var(--on-yellow); }
}
.hero-intro { max-width: 36em; margin: 12px auto 0; font-size: 1.125rem; color: var(--text-muted); }
/* Quick filters: a centred group under the search bar, tight spacing. */
.hero .chips { margin: 24px auto 0; justify-content: center; gap: 10px; }
/* Large hero search bar */
.hero .search-box-lg { max-width: 760px; margin: 28px auto 0; }
.search-box-lg input { min-height: 52px; padding: 0 22px; font-size: 1.0625rem; }
.search-box-lg .btn { min-height: 52px; border-radius: 999px; padding: 0 26px; }
@media (max-width: 559px) {
  .search-box-lg input { padding: 0 16px; }
  .search-box-lg .btn { padding: 0 18px; }
  .search-box-lg .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* --------------------------------------------------------------- chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none;
  font-weight: 600; font-size: 0.9375rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.chip:hover { box-shadow: 0 0 0 3px var(--yellow); transform: translateY(-2px); }
.chip[aria-pressed="true"], .chip:has(input:checked) {
  background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent);
}
/* Chips that wrap a real radio/checkbox: the input stays focusable. */
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Lila « + » of the « Plus de filtres » chip, sized like the emojis next to it. */
.chip-plus { display: inline-grid; place-items: center; width: 1.1em; font-size: 1.375rem; font-weight: 800; line-height: 1; color: var(--accent-text); }
.chips-sm .chip { min-height: 44px; padding: 0 16px; font-size: 0.875rem; }

/* -------------------------------------------------------------- sections */
.section { padding-top: 48px; }
.section-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.section-head h2 {
  font-family: var(--font-title); font-weight: normal;
  font-size: clamp(1.375rem, 3.2vw, 1.75rem); line-height: 1.2;
}
.see-all { margin-left: auto; }
.see-all, .link-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--see-all); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.status { color: var(--text-muted); }
.status:empty { display: none; }

/* ------------------------------------------------------------- carousels
   The track lives inside .wrap, so every carousel stops at the same right
   margin as the rest of the page. Card widths are fractions of the wrap. */
.carousel { position: relative; }
.track {
  --cols: 1.25;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 6px 0 14px; margin: -6px 0 -14px;
  scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }
.track > li { scroll-snap-align: start; min-width: 0; }
/* Phones and tablets: the track runs to the screen edges, so a card being
   swiped slides off the screen instead of being cut at the page margin; the
   padding and scroll-padding keep the first card lined up with the page. */
@media (max-width: 819px) {
  .track { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
.track-large { --cols: 1.1; }
@media (min-width: 560px) { .track { --cols: 2.2; } .track-large { --cols: 1.6; } }
@media (min-width: 820px) { .track { --cols: 3; } .track-large { --cols: 2; } }
@media (min-width: 1100px) { .track { --cols: 4; } .track-large { --cols: 3; } }

.carousel-controls { display: none; gap: 8px; margin-left: auto; }
.see-all + .carousel-controls { margin-left: 8px; }
@media (hover: hover) and (min-width: 720px) { .carousel-controls { display: flex; } }
.carousel-nav {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer;
}
.carousel-nav .icon { width: 20px; height: 20px; }
.carousel-nav:disabled { opacity: .35; cursor: default; }

.grid {
  display: grid; gap: 24px var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.more-row { display: flex; justify-content: center; margin-top: 28px; }
.error-state { display: grid; gap: 12px; justify-items: start; }

/* ----------------------------------------------------------------- cards */
.card {
  position: relative; height: 100%; display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  transition: transform .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--accent); }
.card-media { position: relative; aspect-ratio: 4 / 3; background: var(--skeleton); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* the frame's aspect-ratio rules, never the photo's own size */
.card-media.no-img { display: grid; place-items: center; font-size: 2.5rem; }
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.card-date { font-size: 0.8125rem; font-weight: 700; color: var(--accent-text); text-transform: uppercase; letter-spacing: 0.02em; }
.card-title {
  font-family: var(--font-title); font-weight: normal; font-size: 1.0625rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* 2 lines max, then … */
}
.card { cursor: pointer; }
/* Same structure on every standard card, so a carousel row needs no stretch gap:
   title and description keep a 2-line slot, the info area keeps 3 one-line rows
   (price + date · transport · accessibility), nothing wraps. */
.card:not(.card-large) .card-title { min-height: calc(2 * 1.3em); }
.card:not(.card-large) .card-desc { min-height: calc(3 * 1.5em); -webkit-line-clamp: 3; }
.card:not(.card-large) .card-meta { min-height: 94px; justify-content: flex-start; }
.card:not(.card-large) .meta-row { flex-wrap: nowrap; max-width: 100%; overflow: hidden; white-space: nowrap; }
.card:not(.card-large) .meta-row .price-free { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.card:not(.card-large) .transport-tag { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Whole card clickable via the title link's stretched hit area: one clean link per event. */
.card-title a { color: var(--text); text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-title a:focus-visible { outline: none; }
.card:has(.card-title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.card-desc {
  font-size: 0.875rem; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 0.8125rem; color: var(--text-muted); }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.meta-row.access { flex-wrap: nowrap; max-width: 100%; overflow: hidden; }
.access-more { color: var(--accent-text); }
button.access-more { position: relative; z-index: 2; font: inherit; font-size: 0.75rem; font-weight: 700; background: none; cursor: help; } /* above the card's stretched link */
button.access-more:hover, button.access-more:focus-visible { border-color: var(--accent); }
/* « +N » bubble: the other accessibility tags (events.js, on hover/focus/tap). */
.access-pop {
  position: fixed; z-index: 300; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  max-width: min(280px, calc(100vw - 16px)); padding: 10px 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(52, 4, 95, .18);
  pointer-events: none;
}
.access-pop { padding: 8px 10px; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .access-pop:not([hidden]) { animation: pop-in .15s ease-out; }
}
@keyframes pop-in { from { opacity: 0; transform: translateY(4px); } }
.access-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; color: var(--text); white-space: nowrap;
}
/* Transport reads like the date line: no stroke, same colour, weight and size. */
.transport-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--accent-text); }
.access-tag .access-picto { width: 14px; height: 14px; color: var(--accent-text); }
.transport-tag .transport-icon { width: 15px; height: 15px; color: currentColor; }
.meta-away { font-weight: 600; }
.card-large .access-tag { border-color: currentColor; color: inherit; }
.card-large .transport-tag { color: var(--scrim-date); }
.card-large .access-tag .access-picto, .card-large .transport-tag .transport-icon { color: inherit; }
.meta-date { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--accent-text); }
.meta-date .icon { width: 15px; height: 15px; }
/* Metro / tram pictograms from the app (assets/ic_metro.png, ic_tram.png),
   used as masks so they take the surrounding text colour. */
.transport-icon {
  display: inline-block; width: 16px; height: 16px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url('/assets/ic_metro.png') center / contain no-repeat;
  mask: url('/assets/ic_metro.png') center / contain no-repeat;
}
.transport-icon.tram { -webkit-mask-image: url('/assets/ic_tram.png'); mask-image: url('/assets/ic_tram.png'); }
.info-emoji .transport-icon { width: 22px; height: 22px; color: var(--accent-text); }
/* Transport block (home) */
.transport-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.transport-tile {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 77px; padding: 0 14px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface);
  font-family: var(--font-title); font-size: 1rem; color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease;
}
.transport-tile:hover { box-shadow: 0 0 0 3px var(--yellow); transform: translateY(-2px); }
.transport-tile[aria-expanded="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.transport-icon.big { width: 34px; height: 34px; color: var(--accent); }
.transport-tile[aria-expanded="true"] .transport-icon.big { color: var(--on-accent); }
.transport-chev { display: inline-flex; color: var(--accent-text); transition: transform .2s ease; }
.transport-tile[aria-expanded="true"] .transport-chev { color: var(--on-accent); transform: rotate(90deg); }
.lines-panel { margin-top: 16px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.lines-hint { font-weight: 600; margin-bottom: 12px; }
.lines-grid { display: flex; flex-wrap: wrap; gap: 16px; padding: 4px; }
.line-link { display: inline-flex; border-radius: 50%; text-decoration: none; transition: transform .15s ease; }
.line-link:hover { transform: scale(1.12); }
/* Hover: yellow stroke right against the badge. */
.line-pill { transition: box-shadow .15s ease; }
.line-link:hover .line-pill, .line-link:focus-visible .line-pill { box-shadow: 0 0 0 3px var(--yellow); }
.line-pill {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px;
  border-radius: 999px; font-weight: 800; font-size: 0.9375rem; line-height: 1;
}
.line-pill.tram { border-radius: 10px; }
.chip .line-pill { min-width: 26px; height: 26px; font-size: 0.75rem; }
.station { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Transport + accessibility options as stroked tags, like the app. */
.info-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.info-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--bg); font-size: 0.875rem; line-height: 1.3;
}
.info-tag .access-picto { width: 18px; height: 18px; color: var(--accent-text); }
.info-tag .lines { margin-left: 2px; }
.info-tag .line-badge { min-width: 22px; height: 22px; font-size: 0.6875rem; }
.info-tag .status { font-size: 0.8125rem; }
.badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  background: var(--yellow); color: var(--on-yellow);
}
.price-free { background: var(--yellow); color: var(--on-yellow) !important; padding: 2px 8px; border-radius: 999px; font-weight: 700; }

/* Heart: above the stretched link so it stays its own button. */
.fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92); color: #34045F;
}
.fav .icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.fav[aria-pressed="true"] .icon { fill: var(--heart); stroke: var(--heart); }
.fav:hover .icon { transform: scale(1.12); }
@keyframes pop { 50% { transform: scale(1.3); } }

/* Large highlight cards: image-led like the app, text on a solid scrim. */
.card-large { aspect-ratio: 4 / 4.9; }
.card-large .card-media { position: absolute; inset: 0; aspect-ratio: auto; }
.card-large .card-body {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--scrim); color: var(--scrim-text);
  height: 14.25rem; /* same band on every card: date · title (2) · description (3) · info row */
}
.card-large .card-title { min-height: calc(2 * 1.3em); }
.card-large .card-desc { min-height: calc(3 * 1.5em); }
.card-large .card-meta { flex-wrap: nowrap !important; overflow: hidden; margin-top: auto !important; }
.card-large .card-title { font-size: 1.25rem; }
.card-large .card-title a, .card-large .card-desc, .card-large .card-meta { color: var(--scrim-text); }
.card-large .card-date { color: var(--scrim-date); }
.card-large .card-desc { -webkit-line-clamp: 3; }
.card-large .card-meta { margin-top: 0; }
/* "Sélectionnés pour vous" only: info tags flow on one line, wrapping when needed. */
.card-large .card-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.card-large .meta-row { display: contents; }
@media (max-width: 559px) {
  .card-large { aspect-ratio: 4 / 5.6; }
  .track-large .skeleton { aspect-ratio: 4 / 5.6; }
}
.track-large .skeleton { aspect-ratio: 4 / 4.9; }

/* As tall as the card it stands for: the 4:3 photo plus the fixed text block. */
.skeleton { border-radius: var(--radius); background: var(--skeleton); padding-bottom: 243px; }
.skeleton::before { content: ''; display: block; aspect-ratio: 4 / 3; }
.track-large .skeleton { padding-bottom: 0; }
.track-large .skeleton::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .skeleton { animation: breathe 1.4s ease-in-out infinite; }
}
@keyframes breathe { 50% { opacity: .55; } }

/* ------------------------------------------------------------ categories */
.cat-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 560px) { .cat-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
/* Tall tiles: icon on top, label underneath, centred. */
.cat {
  width: 100%; height: 100%; min-height: 116px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 10px; text-align: center; text-decoration: none; color: var(--text);
  border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface);
  font-weight: 600; font-size: 0.9375rem; line-height: 1.25; hyphens: auto; overflow-wrap: anywhere;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cat:hover { box-shadow: 0 0 0 3px var(--yellow); transform: translateY(-2px); }
.cat-emoji { font-size: 2.25rem; line-height: 1; }
@media (max-width: 559px) { .cat { min-height: 104px; font-size: 0.8125rem; } .cat-emoji { font-size: 2rem; } }

/* ------------------------------------------------------------ panels */
.panel, .prompt-card {
  padding: 24px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
}
.prompt-card { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.prompt-card > div { flex: 1 1 260px; }
.prompt-emoji { font-size: 2.5rem; }
.prompt-title { font-family: var(--font-title); font-size: 1.1875rem; margin-bottom: 4px; }
.prompt-text { color: var(--text-muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border: 2px solid var(--accent-strong); border-radius: var(--radius);
  background: var(--accent-strong); color: var(--on-accent);
  font-weight: 600; font-size: 0.9375rem; text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn-outline { background: transparent; color: var(--accent-text); border-color: var(--line); }
.btn-yellow { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
.btn .icon { width: 20px; height: 20px; }

/* Personalise card motion (pothy-style, springy, plays once on reveal):
   card rises in (once), ✨ twinkles with a two-star burst and the yellow button
   nudges (.play, replayed every 5 s by JS, max 4 times).
   .reveal is only added by JS when motion is allowed. */
.perso-emoji { position: relative; display: inline-grid; place-items: center; }
.perso-emoji > span { display: inline-block; }
.perso-emoji::before, .perso-emoji::after {
  content: "✦"; position: absolute; font-size: 0.875rem; opacity: 0; pointer-events: none;
}
.perso-emoji::before { color: var(--yellow); left: -6px; top: -4px; -webkit-text-stroke: .5px var(--on-yellow); }
.perso-emoji::after { color: var(--accent); right: -8px; bottom: 0; }
.perso-card.reveal { opacity: 0; transform: translateY(28px) scale(.98); }
.perso-card.reveal.in-view { animation: card-rise .75s cubic-bezier(.34, 1.56, .64, 1) both; }
.perso-card.play .perso-emoji > span { animation: twinkle 1s ease .35s 2; }
.perso-card.play .perso-emoji::before { animation: burst-l .9s ease-out .45s both; }
.perso-card.play .perso-emoji::after { animation: burst-r .9s ease-out .6s both; }
.perso-card.play .btn-yellow { animation: nudge .7s cubic-bezier(.34, 1.56, .64, 1) 1.1s; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .perso-card:hover .perso-emoji > span { animation: twinkle .8s ease; }
}
@keyframes card-rise {
  from { opacity: 0; transform: translateY(28px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.35) rotate(18deg); }
  60% { transform: scale(.9) rotate(-10deg); }
}
@keyframes burst-l {
  0% { opacity: 0; transform: translate(8px, 8px) scale(.4); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-10px, -12px) scale(1.2) rotate(-30deg); }
}
@keyframes burst-r {
  0% { opacity: 0; transform: translate(-8px, -6px) scale(.4); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(12px, 10px) scale(1.2) rotate(40deg); }
}
@keyframes nudge {
  0%, 100% { transform: none; }
  35% { transform: translateY(-5px) scale(1.05); }
  65% { transform: translateY(1px) scale(.99); }
}

/* App promo block (parissi.app feature 02 / 05 style). */
.app-card {
  position: relative; overflow: hidden;
  display: grid; gap: 8px;
  padding: 36px 24px 0; border-radius: 36px;
  background: var(--surface); border: 1px solid var(--border);
}
.app-text { position: relative; z-index: 1; }
.app-text h2 { font-family: var(--font-title); font-weight: normal; font-size: clamp(1.625rem, 3.5vw, 2.5rem); line-height: 1.15; margin-bottom: 12px; }
.app-text p { color: var(--text-muted); font-size: 1.0625rem; line-height: 1.6; max-width: 34em; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* Phones: part of the pair only; the card's bottom edge crops them. */
.app-phones { position: relative; height: 290px; }
.phone {
  position: absolute; width: 172px; aspect-ratio: 1080 / 2404;
  padding: 7px; border-radius: 30px; background: #1A1A1A;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 23px; background: var(--skeleton); }
.phone-back { left: calc(50% - 160px); top: 60px; z-index: 2; }
.phone-front { left: calc(50% - 12px); top: 16px; z-index: 1; }
@media (min-width: 820px) {
  .app-card { grid-template-columns: 55% 45%; gap: 0; padding: 0 0 0 56px; min-height: 440px; }
  .app-text { align-self: center; padding: 56px 24px 56px 0; }
  .app-phones { height: auto; }
  .phone { width: 230px; border-radius: 34px; padding: 8px; }
  .phone img { border-radius: 26px; }
  .phone-back { left: calc(50% - 205px); top: 96px; }
  .phone-front { left: calc(50% - 10px); top: 40px; }
}

.app-free { margin-top: 20px; font-family: var(--font-title); font-size: 1.0625rem; color: var(--text) !important; }
.app-free + .stores { margin-top: 24px; }

/* Reviews ("Ils adorent Parissi"), as on parissi.app. */
.section-sub { color: var(--text-muted); margin: -8px 0 16px; }
.track-reviews:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 28px; }
.track-reviews { --cols: 1.15; padding-top: 8px; padding-bottom: 16px; }
@media (min-width: 560px) { .track-reviews { --cols: 1.8; } }
@media (min-width: 820px) { .track-reviews { --cols: 2.5; } }
@media (min-width: 1100px) { .track-reviews { --cols: 3; } }
.review-card {
  position: relative; height: 100%; display: flex; gap: 16px;
  padding: 18px 22px 16px; border-radius: 24px;
  background: var(--review-bg); border: 1px solid var(--border);
}
.review-quote { position: absolute; top: 10px; left: 14px; width: 44px; height: 44px; fill: var(--review-quote); }
.review-avatar {
  position: relative; z-index: 1; flex: 0 0 auto; width: 46px; height: 64px; margin: 8px 0 0 10px;
  display: grid; place-items: center; border-radius: 100px; background: var(--review-avatar);
}
.review-avatar span { font-size: 1.9rem; line-height: 1; color: #fff; }
.review-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.review-stars { display: flex; gap: 2px; line-height: 1; }
.review-star { color: #FBB040; font-size: 1rem; }
.review-star.is-empty { color: var(--border); }
.review-heading { font-family: var(--font-title); font-weight: normal; font-size: 1rem; line-height: 1.2; }
/* Two lines max, ending with an ellipsis; the full text stays in the DOM for
   screen readers and in the title tooltip. */
.review-text {
  font-style: italic; font-size: 0.875rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.review-meta { margin-top: auto; padding-top: 2px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; }
.review-name { font-family: var(--font-title); font-size: 0.9375rem; }
.review-source { font-weight: 700; font-size: 0.75rem; color: var(--review-source); }

/* Store buttons, as on parissi.app (flat, like every button here). */
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 12px 26px; border-radius: 36px;
  background: var(--accent-strong); color: var(--on-accent); text-decoration: none;
  transition: transform .25s ease;
}
.store-btn:hover { transform: translateY(-3px); }
.store-icon { width: 26px; height: 30px; flex-shrink: 0; fill: currentColor; }
.store-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store-label { font-family: var(--font-title); font-size: 0.75rem; text-transform: uppercase; letter-spacing: .02em; }
.store-name { font-family: var(--font-title); font-size: 1.25rem; }

.empty { text-align: center; padding: 48px 24px; }
.empty-emoji { font-size: 3rem; }
.empty h2 { font-family: var(--font-title); font-weight: normal; font-size: 1.5rem; margin: 12px 0 8px; }
.empty p { color: var(--text-muted); max-width: 32em; margin: 0 auto 20px; }
.empty .stores { justify-content: center; }

/* ---------------------------------------------------------------- search */
.search-layout { display: grid; gap: 24px; padding-top: 24px; }
@media (min-width: 960px) { .search-layout { grid-template-columns: 300px 1fr; align-items: start; } }
.search-box { display: flex; gap: 8px; margin-top: 20px; max-width: 720px; }
.search-box input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 18px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 1rem;
}
.search-box input::placeholder { color: var(--text-muted); opacity: 1; }
.search-box input:focus-visible { outline-offset: 2px; border-radius: 999px; }
.filters { display: grid; gap: 24px; }
.filters legend, .field-label { font-weight: 700; margin-bottom: 10px; padding: 0; }
.filters-toggle { width: 100%; justify-content: space-between; }
@media (min-width: 960px) {
  .filters-toggle { display: none; }
  .filters[hidden] { display: grid; }
  .filters { position: sticky; top: 88px; }
}
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.results-bar .status { font-weight: 600; color: var(--text); }
.select { display: inline-flex; align-items: center; gap: 8px; }
.select select { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); }

/* ----------------------------------------------------------------- event */
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 12px; font-weight: 600; color: var(--text); text-decoration: none; }
.back:hover { text-decoration: underline; }
.ev-hero { display: grid; gap: 24px; margin-top: 8px; }
@media (min-width: 900px) { .ev-hero { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.ev-cover { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--skeleton); aspect-ratio: 4 / 3; }
.ev-cover img { width: 100%; height: 100%; object-fit: cover; }
.ev-cover .fav { top: 12px; right: 12px; }
.ev-credit { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; }
.ev-kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; background: var(--surface); border: 1px solid var(--line); }
.pill-yellow { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
.ev-title { font-family: var(--font-title); font-weight: normal; font-size: clamp(1.875rem, 4.5vw, 2.75rem); line-height: 1.1; }
.ev-lead { margin-top: 12px; font-size: 1.125rem; color: var(--text-muted); }
.ev-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ev-actions .fav-inline[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
.ev-actions .fav-inline[aria-pressed="true"] .icon { fill: var(--heart); }
.ev-body { display: grid; gap: 32px; padding-top: 40px; }
@media (min-width: 900px) { .ev-body { grid-template-columns: 1fr 360px; align-items: start; } }
.ev-desc h2, .ev-info h2 { font-family: var(--font-title); font-weight: normal; font-size: 1.375rem; margin-bottom: 12px; }
.ev-desc .rich { font-size: 1.0625rem; line-height: 1.7; }
.ev-desc .rich p + p { margin-top: 1em; }
.ev-desc .rich ul { list-style: disc; padding-left: 1.4em; margin: .8em 0; }
.ev-desc .rich ol { list-style: decimal; padding-left: 1.4em; margin: .8em 0; }
.ev-info { display: grid; gap: 20px; }
@media (min-width: 900px) { .ev-info { position: sticky; top: 88px; } }
.info-list { display: grid; gap: 16px; }
.info-list > div { display: grid; grid-template-columns: 28px 1fr; gap: 4px 12px; }
.info-list dt { grid-column: 2; font-weight: 700; font-size: 0.875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.info-list dd { grid-column: 2; }
.info-list .info-emoji { grid-row: span 2; font-size: 1.375rem; line-height: 1.2; }
.dates-list { display: grid; gap: 4px; }
.lines { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.line-badge {
  min-width: 24px; height: 24px; padding: 0 5px; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 0.75rem; font-weight: 800;
  background: var(--line-color, #AF44F2); color: var(--line-ink, #FFFFFF); border: 0;
}
.line-badge.tram { border-radius: 6px; }
.ev-map { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--skeleton); z-index: 0; }
.ev-map:not(.maplibregl-map) { display: grid; place-items: center; }
.ev-map-open { font-weight: 600; color: var(--accent-text); }
.access-list { display: grid; gap: 6px; }
.access-list li { display: flex; gap: 8px; align-items: center; }

/* Event page: share top-right, weather card, accessibility pictograms */
.ev-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ev-top .ev-kicker { margin-bottom: 0; flex: 1; }
.ev-top-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }
.btn-sm { min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 0.875rem; }
.btn-sm .icon { width: 18px; height: 18px; }
.ev-top { flex-wrap: wrap; }
.pill { white-space: nowrap; }
@media (max-width: 559px) {
  .ev-top .ev-kicker { flex-basis: 100%; }
  .ev-top-actions { margin-left: 0; }
}
.ev-divider { border: 0; height: 2px; margin: 64px 0 0; background: var(--divider); border-radius: 2px; }
.ev-app { padding-top: 32px !important; }
.weather-card {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-bottom: 32px; padding: 12px 24px; border-radius: var(--radius);
  background: var(--weather-bg); border: 1px solid var(--border);
}
.weather-art img { width: 62px; height: 62px; display: block; }
.weather-art .wa-dark { display: none; }
:root[data-theme="dark"] .weather-art .wa-light { display: none; }
:root[data-theme="dark"] .weather-art .wa-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .weather-art .wa-light { display: none; }
  :root:not([data-theme="light"]) .weather-art .wa-dark { display: block; }
}
.weather-temp { font-family: var(--font-title); font-size: 3rem; line-height: 1; display: flex; align-items: flex-start; padding-right: 22px; border-right: 1px solid var(--weather-rule); }
.weather-temp span { font-family: var(--font-body); font-size: 0.8125rem; margin: 6px 0 0 3px; color: var(--text-muted); }
.weather-text { display: grid; gap: 3px; }
.weather-title { font-size: 0.8125rem; }
.weather-desc { font-family: var(--font-title); font-size: 1rem; line-height: 1.2; }
.weather-range { display: flex; gap: 24px; font-family: var(--font-title); font-size: 0.75rem; }
.access-picto {
  display: inline-block; width: 20px; height: 20px; flex-shrink: 0; background: currentColor;
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat;
}
.access-list .access-picto { color: var(--accent-text); }
.info-emoji .access-picto { width: 22px; height: 22px; color: var(--accent-text); }
/* Event page: more room above a smaller app block */
body[data-page="event"] .app-card { min-height: 0; }
@media (min-width: 820px) {
  body[data-page="event"] .app-card { min-height: 340px; }
  body[data-page="event"] .app-text { padding: 40px 24px 40px 0; }
  body[data-page="event"] .app-text h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
  body[data-page="event"] .phone { width: 200px; }
  body[data-page="event"] .phone-back { top: 70px; left: calc(50% - 180px); }
  body[data-page="event"] .phone-front { top: 28px; }
}
body[data-page="event"] .app-phones { height: 230px; }
@media (min-width: 820px) { body[data-page="event"] .app-phones { height: auto; } }

/* --------------------------------------------------------------- profile */
.profile-grid { display: grid; gap: 20px; padding-top: 24px; }
@media (min-width: 900px) { .profile-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.profile-grid .panel h2 { font-family: var(--font-title); font-weight: normal; font-size: 1.375rem; margin-bottom: 6px; }
.panel-intro { color: var(--text-muted); margin-bottom: 16px; }
.panel fieldset + fieldset { margin-top: 20px; }
.account { display: flex; align-items: center; gap: 16px; }
.avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; background: var(--yellow); flex-shrink: 0; }
.avatar-btn { position: relative; border: 0; cursor: pointer; padding: 0; }
.avatar-btn:hover { box-shadow: 0 0 0 3px var(--accent); }
.avatar-emoji { display: inline-block; line-height: 1; }
.avatar-edit {
  position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.8125rem; background: var(--accent-strong); color: var(--on-accent);
}
/* Avatar motion: pops in, floats up and down 3 times, then rests (no endless loop); wiggles on hover. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .avatar-emoji { animation: icon-pop .8s cubic-bezier(.34, 1.56, .64, 1) .2s both, avatar-bob 1.6s ease-in-out 1s 3; }
  :root:not([data-motion="reduce"]) .avatar-btn:hover .avatar-emoji { animation: icon-wiggle .7s cubic-bezier(.34, 1.56, .64, 1); }
}
@keyframes avatar-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* up and down only, no tilt */
/* Large dialogs (all interests, avatar picker) */
.dialog.dialog-lg { width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 24px; overflow: auto; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dialog-head h2 { font-family: var(--font-title); font-weight: normal; font-size: 1.5rem; }
.dialog-lg .dialog-actions { position: sticky; bottom: -24px; margin: 16px -24px -24px; padding: 16px 24px; background: var(--bg); border-top: 1px solid var(--border); align-items: center; justify-content: space-between; }
.envies-more { margin-top: 16px; gap: 6px; }
.envies-search { width: 100%; min-height: 48px; padding: 0 16px; margin: 8px 0; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; }
.envies-groups { display: grid; gap: 20px; }
.envies-group-title { font-family: var(--font-title); font-size: 1.0625rem; margin-bottom: 8px; padding: 0; }
.tone-row { display: flex; gap: 10px; margin: 6px 0 16px; }
.tone { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; }
.tone[aria-checked="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent-strong); }
.avatar-groups { display: grid; gap: 18px; }
.avatar-group h3 { font-family: var(--font-title); font-weight: normal; font-size: 1rem; margin-bottom: 8px; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.avatar-pick { height: 48px; border: 0; border-radius: 12px; background: var(--surface); font-size: 1.625rem; cursor: pointer; }
.avatar-pick:hover { box-shadow: 0 0 0 2px var(--accent); transform: scale(1.1); }
.avatar-pick[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--accent-strong); }
.account-pitch { margin-top: -10px; color: var(--accent-text); }
.more-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; }
.more-actions .btn { gap: 8px; }
.notif-btn { margin-top: 8px; gap: 6px; }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
/* Login page */
.l-wrap { max-width: 560px; padding-top: 24px; }
.l-form { gap: 16px; }
.l-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); }
.l-tab { min-height: 44px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-weight: 700; color: var(--text-muted); }
.l-tab[aria-selected="true"] { background: var(--accent-strong); color: var(--on-accent); }
.l-panel { display: grid; gap: 16px; }
.l-title { font-family: var(--font-title); font-weight: normal; font-size: 1.5rem; margin-top: 8px; }
.l-lead { font-size: 0.9375rem; }
.l-input-row { display: flex; gap: 10px; align-items: center; }
.l-input-row input { flex: 1; min-width: 0; }
.l-toggle { font-size: 0.875rem; white-space: nowrap; }
.l-forgot { justify-self: start; font-size: 0.875rem; }
.l-submit { width: 100%; }
.l-switch { text-align: center; color: var(--text-muted); }
.l-form input[type=password], .l-form input[type=text], .l-form input[type=email] {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg); font: inherit; color: var(--text);
}
.saved { color: var(--accent-text); font-weight: 600; min-height: 1.5em; margin-top: 12px; }
.links-list { display: grid; gap: 4px; }
.links-list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Organiser call-out (home, after the reviews), as on parissi.app. */
.organiser-card {
  padding: clamp(36px, 5vw, 56px) clamp(22px, 5vw, 56px);
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  border-radius: 36px; background: var(--surface); border: 1px solid var(--border);
}
.organiser-eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.organiser-card h2 { font-family: var(--font-title); font-weight: normal; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.15; }
.organiser-card p:not(.organiser-eyebrow) { max-width: 56ch; line-height: 1.6; color: var(--text-muted); }
.organiser-btn { margin-top: 6px; border-radius: 50px; padding: 0 34px; font-weight: 700; transition: transform .15s ease; }
.organiser-btn:hover { transform: translateY(-2px); }

/* ---------------------------------------------------- Qui sommes-nous ?
   Same sections as parissi.app (about, statement, steps, manifesto, CTA). */
.about-kicker {
  /* Tag like parissi.app's hero eyebrow: lila pill, Parissi logo + text. */
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
  padding: 6px 18px 6px 10px; border-radius: 999px;
  background: var(--kicker-bg); color: var(--accent-text);
  font-family: var(--font-title); font-size: 0.9375rem;
}
/* Polaroid: tilted, springs in, wiggles on hover. */
.polaroid {
  width: min(340px, 82%); margin: 28px auto 0; padding: 12px 12px 14px; border-radius: 6px;
  background: #FFFFFF; transform: rotate(-3deg);
  box-shadow: 0 18px 50px rgba(52, 4, 95, 0.18), 0 3px 10px rgba(0, 0, 0, 0.08);
}
.polaroid img { width: 100%; height: auto; border-radius: 2px; }
.polaroid figcaption { text-align: center; margin-top: 10px; font-family: var(--font-title); font-size: 1.125rem; color: #34045F; }
.about-hero .hero-inner { padding-bottom: clamp(24px, 3vw, 40px); }
.about-story-head .about-people { margin-top: 20px; }
.about-tag-emoji { margin-right: 6px; font-size: 1rem; }
/* About hero: one centred column. */
.about-hero-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.about-hero-col .polaroid { margin-top: 28px; }
.about-hero-text { display: grid; gap: 14px; max-width: 880px; margin-top: 40px; }
.about-hero-text .about-desc { font-size: 1.0625rem; }
.about-hero .story-wave { display: inline-block; margin: 0 10px 0 0; font-size: 1em; }
.about-hero .about-story-intro { font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
.about-hero-col .about-kicker { margin: 0 0 16px; }
.about-hero-col .about-people { justify-content: center; margin-top: 28px; }
.kicker-logo { width: 17px; height: 20px; align-self: center; margin-top: -2px; }
/* "Paris ne s'arrête jamais. Vous non plus." */
.never-stops { max-width: 1000px; padding-top: 72px; text-align: center; }
.statement + .never-stops { padding-top: 0; }
.never-stops-title { font-family: var(--font-title); font-weight: normal; font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.05; }
.never-stops-title em { font-style: normal; color: var(--accent-text); }
.never-stops-sub { margin: 20px auto 0; max-width: 40em; font-size: 1.125rem; line-height: 1.6; color: var(--text-muted); }
.about-story { display: grid; gap: 16px 56px; padding-top: 0; position: relative; }
@media (min-width: 820px) { .about-story { grid-template-columns: 1fr 2fr; align-items: start; } }
.about-story-text { display: grid; gap: 16px; }
.about-story .about-desc { font-size: 1.125rem; }
.about-story-intro { font-family: var(--font-title); font-weight: normal; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.15; }
.story-wave { display: block; font-size: 2.75rem; margin-bottom: 8px; transform-origin: 75% 85%; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .about-story.in .story-wave, :root:not([data-motion="reduce"]) .about-hero .story-wave { animation: wave 1.6s ease-in-out 1.2s 2; }
}
@keyframes wave {
  /* A hello wave: rocks side to side around the wrist, no scale, no jump. */
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(18deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(18deg); }
  60% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}
.about-kicker { letter-spacing: .12em; }
.about-duo { display: grid; gap: 20px; padding-top: 56px; }
@media (min-width: 820px) { .about-duo { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .polaroid { animation: polaroid-in 1s cubic-bezier(.34, 1.56, .64, 1) .5s both; }
  :root:not([data-motion="reduce"]) .polaroid:hover { animation: polaroid-wiggle .7s cubic-bezier(.34, 1.56, .64, 1); }
    :root:not([data-motion="reduce"]) .about-kicker { animation: card-rise .7s cubic-bezier(.34, 1.56, .64, 1) .35s both; }
}
@keyframes polaroid-in {
  0% { opacity: 0; transform: translateY(40px) rotate(8deg) scale(.9); }
  100% { opacity: 1; transform: rotate(-3deg); }
}
@keyframes polaroid-wiggle {
  0%, 100% { transform: rotate(-3deg); }
  30% { transform: rotate(2deg) scale(1.03); }
  60% { transform: rotate(-5deg); }
}
/* "Tout Paris, à ta façon" */
.about-cats { padding-top: 8px; text-align: center; }
.about-cats-head h2 { font-family: var(--font-title); font-weight: normal; font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.about-cats-head p { color: var(--text-muted); margin: 10px auto 0; max-width: 44em; font-size: 1.0625rem; }
.about-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
@media (min-width: 720px) { .about-cat-grid { grid-template-columns: repeat(6, 1fr); } }
.about-cat-grid li {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 96px; padding: 12px 8px; border-radius: var(--radius);
  background: var(--surface); border: 0; font-weight: 600; font-size: 0.875rem; line-height: 1.25;
}
.about-cat-grid .cat-emoji { font-size: 1.75rem; }
.about-cats-more { margin-top: 18px; }
.about-cats-more a { color: var(--see-all); font-weight: 600; }
/* Features 01–05: text + phones cropped by the card, alternating sides. */
.feature { padding-top: 48px; }
.feature-card {
  position: relative; overflow: hidden; display: grid; gap: 16px;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px) 0; border-radius: 36px;
  background: var(--surface); border: 1px solid var(--border);
}
@media (min-width: 820px) {
  .feature-card { grid-template-columns: 55% 1fr; align-items: center; min-height: 460px; padding-bottom: 0; }
  .feature--flip .feature-text { order: 2; }
  .feature-text { padding-bottom: 56px; }
}
.feature-number { font-family: var(--font-title); font-size: clamp(3.5rem, 6vw, 5rem); line-height: 1; color: var(--accent); }
.feature-title { font-family: var(--font-title); font-weight: normal; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; margin: 4px 0 16px; }
.feature-desc { font-size: 1.0625rem; line-height: 1.7; }
.feature-desc + .feature-desc { margin-top: 10px; }
.feature-list { display: grid; gap: 12px; margin-top: 18px; }
.feature-list li { font-size: 1.0625rem; line-height: 1.5; }
.feature-list .star { color: var(--accent); margin-right: 8px; }
.feature-visual { position: relative; align-self: stretch; display: flex; flex-direction: column; }
.feature-access { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-bottom: 12px; position: relative; z-index: 3; }
.feature-access .access-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 0.8125rem; background: var(--bg); }
.feature-access .access-picto { width: 16px; height: 16px; color: var(--accent-text); }
.feature-phones { position: relative; flex: 1; min-height: 330px; }
.feature-phones .phone { width: 200px; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.feature-phones .f-single { left: calc(50% - 100px); top: 16px; }
.feature-phones .f-back { left: calc(50% - 180px); top: 56px; z-index: 2; }
.feature-phones .f-front { left: calc(50% - 16px); top: 12px; z-index: 1; }
@media (min-width: 820px) {
  .feature-phones { min-height: 470px; }
  .feature-phones .phone { width: 260px; }
  .feature-phones .f-single { left: calc(50% - 130px); top: 40px; }
  .feature-phones .f-back { left: calc(50% - 240px); top: 96px; }
  .feature-phones .f-front { left: calc(50% - 16px); top: 40px; }
}
@media (min-width: 820px) { .feature-card { min-height: 520px; } }

/* About page motion (only once .reveal/.in exist, i.e. motion allowed):
   phones rise one after the other, mission/events icons pop, store buttons hop. */
.feature-card.reveal .phone { opacity: 0; }
.feature-card.in .phone { animation: phone-rise .9s cubic-bezier(.34, 1.56, .64, 1) calc(.25s + var(--k, 0) * .15s) both; }
.about-card.in .about-icon { animation: icon-pop .9s cubic-bezier(.34, 1.56, .64, 1) calc(.25s + var(--d, 0s)) both; }
.cta.in .store-btn { animation: hop .7s cubic-bezier(.34, 1.56, .64, 1) .45s both; }
.cta.in .store-btn + .store-btn { animation-delay: .6s; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .feature-phones .phone:hover { transform: translateY(-10px) rotate(-2deg); }
  :root:not([data-motion="reduce"]) .about-card:hover .about-icon { animation: icon-wiggle .7s cubic-bezier(.34, 1.56, .64, 1); }
}
@keyframes phone-rise {
  0% { opacity: 0; transform: translateY(80px) rotate(6deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes icon-pop {
  0% { transform: scale(0) rotate(-30deg); }
  70% { transform: scale(1.25) rotate(8deg); }
  100% { transform: none; }
}
@keyframes icon-wiggle {
  0%, 100% { transform: none; }
  30% { transform: rotate(14deg) scale(1.15); }
  60% { transform: rotate(-10deg); }
}
@keyframes hop {
  0% { transform: translateY(24px); opacity: 0; }
  60% { transform: translateY(-8px); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
/* Scroll reveal (class added by JS only when motion is allowed). */
[data-reveal].reveal { opacity: 0; transform: translateY(28px); }
[data-reveal].reveal.in { animation: card-rise .75s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
.about-card {
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(28px, 4vw, 48px); border-radius: 36px;
  background: var(--surface); border: 1px solid var(--border);
}
.about-icon { width: 40px; height: 40px; }
:root[data-theme="dark"] .about-icon { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .about-icon { filter: invert(1) hue-rotate(180deg); } }
.about-card h1, .about-card h2 { font-family: var(--font-title); font-weight: normal; font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.15; }
.about-photo { max-width: 342px; border-radius: 12px; overflow: hidden; }
.about-photo img { width: 100%; height: auto; }
.about-intro { font-weight: 700; font-size: 1.125rem; }
.about-desc { font-size: 1.0625rem; line-height: 1.7; }
.about-people { display: flex; flex-wrap: wrap; gap: 10px; }
.about-tag {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 18px;
  background: var(--bg); border: 1.5px solid var(--line); color: var(--text);
  font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; text-decoration: none;
}
.about-tag:hover { box-shadow: 0 0 0 3px var(--yellow); }
/* Full-bleed lila bands: statement + manifesto. */
.statement { margin: 72px 0; padding: 64px 0; background: var(--footer-shape); text-align: center; }
.statement-text { max-width: 860px; margin: 0 auto; font-family: var(--font-title); font-size: clamp(1.3rem, 2.5vw, 2rem); line-height: 1.5; color: var(--footer-title); }
.statement-text em { font-style: normal; color: var(--statement-em); }
.steps-title { font-family: var(--font-title); font-weight: normal; font-size: clamp(1.8rem, 3.5vw, 2.6rem); text-align: center; margin-bottom: 32px; }
.steps-grid { display: grid; gap: 20px; }
@media (min-width: 820px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
.step-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 4vw, 44px); border-radius: 36px; background: var(--surface); border: 1px solid var(--border); }
.step-number { font-family: var(--font-title); font-size: clamp(3.5rem, 6vw, 5rem); line-height: 1; color: var(--accent); }
.step-card h3 { font-family: var(--font-title); font-weight: normal; font-size: 1.3rem; color: var(--accent-text); }
.step-card p { font-size: 1.0625rem; line-height: 1.7; }
.manifesto-inner { max-width: 800px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.manifesto-logo { width: 72px; height: 86px; background: var(--footer-logo); }
.manifesto blockquote { margin: 0; }
.manifesto-quote { font-family: var(--font-title); font-size: clamp(1.3rem, 2.5vw, 2rem); line-height: 1.4; color: var(--footer-title); }
.manifesto-sub { font-size: 1.125rem; color: var(--footer-title); }
.cta { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-top: 16px; }
.cta h2 { font-family: var(--font-title); font-weight: normal; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; }
.cta p { font-size: 1.125rem; color: var(--text-muted); }
.cta .stores { justify-content: center; margin-top: 12px; }

/* Back to top: bottom-right, above the phone tab bar. */
.to-top {
  position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); z-index: 55;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 0; background: var(--accent-strong); color: var(--on-accent);
  box-shadow: 0 8px 24px rgba(52, 4, 95, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.to-top .icon { width: 24px; height: 24px; }
.to-top:hover { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--yellow), 0 8px 24px rgba(52, 4, 95, .25); }
.to-top[hidden] { display: none; }
@media (min-width: 820px) { .to-top { right: 24px; bottom: 24px; } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .to-top:not([hidden]) { animation: hop .45s cubic-bezier(.34, 1.56, .64, 1); }
}

/* ---------------------------------------------------------------- contact */
.c-head { text-align: center; }
.c-head p:not(.about-kicker) { margin: 12px auto 0; }
.c-grid { display: grid; gap: 24px; padding-top: 32px; }
@media (min-width: 900px) { .c-grid { grid-template-columns: 2fr 1fr; align-items: start; } }
.c-form { display: grid; gap: 20px; }
.c-field { display: grid; gap: 6px; }
.c-field .field-label { margin: 0; }
.c-req { font-weight: 500; color: var(--text-muted); }
.c-form input[type=text], .c-form input[type=email], .c-form textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--bg); font: inherit; color: var(--text); resize: vertical;
}
.c-form [aria-invalid="true"] { border-color: #C2185B; box-shadow: 0 0 0 1px #C2185B; }
.c-error { color: var(--error-text); font-weight: 600; font-size: 0.875rem; min-height: 0; }
.c-error:empty { display: none; }
.c-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.c-send { justify-self: start; }
.c-status { font-weight: 600; color: var(--error-text); }
.c-done { text-align: center; justify-items: center; padding: 48px 24px; }
.c-done:focus { outline: none; }
.c-done-emoji { font-size: 3rem; }
.c-done h2 { font-family: var(--font-title); font-weight: normal; font-size: 1.75rem; }
.c-done p { color: var(--text-muted); }
.c-done .stores { justify-content: center; }
.c-aside { display: grid; gap: 20px; padding: 24px; border-radius: var(--radius-lg); border: 1.5px dashed var(--line); }
.c-aside h2 { font-family: var(--font-title); font-weight: normal; font-size: 1.25rem; }
.c-aside-item { display: grid; gap: 4px; }
.c-aside-item a { font-weight: 600; overflow-wrap: anywhere; }
.c-socials { justify-content: flex-start; }

/* ----------------------------------------------------------------- footer
   Same as parissi.app: lila wave on top, centred logo, languages, three link
   columns, tagline, contact pill, copyright. */
.site-footer { position: relative; margin-top: clamp(72px, 9vw, 112px); padding-top: 110px; overflow: hidden; color: var(--footer-text); }
.footer-wave { position: absolute; inset: 0; pointer-events: none; }
.footer-wave svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; fill: var(--footer-shape); }
.footer-rond { display: none; }
.footer-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding-bottom: 40px; text-align: center;
}
.footer-logo { display: inline-flex; border-radius: 12px; }
.footer-logo .logo-mark { width: 69px; height: 82px; background: var(--accent-strong); } /* same as the active language button */
.site-footer .lang-switch { background: var(--bg); }
.footer-nav {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 28px;
  width: 100%; max-width: 1100px; margin: 10px 0; text-align: left;
}
/* Desktop: columns spread edge to edge of the page content. */
@media (min-width: 1000px) { .footer-nav { display: flex; justify-content: space-between; gap: 56px; max-width: none; } }
.footer-store { gap: 8px; }
.footer-store-icon { width: 16px; height: 18px; flex-shrink: 0; fill: currentColor; }
.footer-store-icon.play {
  display: inline-block; background: currentColor;
  -webkit-mask: url('/assets/icon-google-play.svg') center / contain no-repeat;
  mask: url('/assets/icon-google-play.svg') center / contain no-repeat;
}
.footer-link-btn {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none;
  font-size: 0.875rem; color: var(--footer-text); cursor: pointer; text-align: left;
}
.footer-link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Feedback dialog */
.dialog {
  width: min(520px, calc(100vw - 32px)); padding: 0; border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg); color: var(--text);
}
.dialog::backdrop { background: rgba(13, 14, 18, 0.55); }
.feedback-form { display: grid; gap: 8px; padding: 28px; }
.feedback-form h2 { font-family: var(--font-title); font-weight: normal; font-size: 1.5rem; margin-bottom: 8px; }
.feedback-form .field-label { margin: 8px 0 0; }
.field-hint { font-size: 0.8125rem; color: var(--text-muted); }
.feedback-form textarea, .feedback-form input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--surface); font: inherit; color: var(--text); resize: vertical;
}
.feedback-form textarea::placeholder { color: var(--text-muted); opacity: 1; }
.feedback-form .status { min-height: 1.5em; font-weight: 600; color: var(--accent-text); }
.feedback-form .status:empty { display: block; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-title { font-family: var(--font-title); font-weight: normal; font-size: 0.95rem; color: var(--footer-title); }
.footer-col ul { display: flex; flex-direction: column; gap: 2px; }
.footer-col a {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: 0.875rem; color: var(--footer-text); text-decoration: none;
}
.footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.socials { display: flex; gap: 12px; justify-content: center; }
.footer-col ul.socials { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin-top: 12px; gap: 8px; }
.footer-col .socials .social-link { display: grid; place-items: center; justify-content: center; min-height: 0; width: 40px; height: 40px; padding: 0; }
@media (max-width: 719px) { .footer-col ul.socials { justify-content: center; } }
.social-link {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg); color: var(--footer-title); border: 1.5px solid var(--line);
  transition: transform .15s ease, box-shadow .15s ease;
}
.social-link:hover { box-shadow: 0 0 0 3px var(--yellow); transform: translateY(-2px); }
.social-link .icon { width: 20px; height: 20px; }
.icon-instagram { fill-rule: evenodd; } /* cut out the lens and the frame */
.footer-tagline { font-family: var(--font-title); font-size: 0.95rem; color: var(--footer-title); }
.footer-contact {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 20px;
  border-radius: var(--radius); background: var(--bg); color: var(--footer-text);
  font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; text-decoration: none;
  transition: transform .2s ease;
}
.footer-contact:hover { transform: translateY(-2px); }
.footer-contact .icon { width: 18px; height: 18px; }
.footer-copy { font-size: 0.8125rem; color: var(--footer-text); }
@media (max-width: 719px) {
  .site-footer { padding-top: 64px; }
  .footer-inner { padding-bottom: 52px; }
  .footer-wave-lg { display: none; }
  .footer-rond { display: block; }
  .footer-nav { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .footer-col { align-items: center; }
  .footer-col ul { align-items: center; }
}

/* Reduced motion: OS setting or Profile › "Réduire les animations". */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  transition: none !important; animation: none !important; scroll-behavior: auto !important;
}

.fav-inline .icon { fill: none; stroke: currentColor; stroke-width: 2; }
.ev-actions .fav-inline[aria-pressed="true"] .icon { fill: var(--heart); stroke: var(--heart); }

/* ------------------------------------------------ swipe onboarding (« Choisir mes envies ») */
.dialog.sw-dialog { width: min(760px, calc(100vw - 24px)); padding: 24px 32px 32px; overflow: hidden; }
/* Title in the middle, « Passer » + close on the right (a spacer balances them). */
.sw-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.sw-head h2 { text-align: center; }
.sw-head .sw-head-actions { justify-self: end; }
@media (max-width: 600px) {
  .sw-head { grid-template-columns: 1fr; grid-template-areas: "actions" "title"; gap: 4px; }
  .sw-head-spacer { display: none; }
  .sw-head h2 { grid-area: title; }
  .sw-head .sw-head-actions { grid-area: actions; }
}
.sw-head-actions { display: flex; align-items: center; gap: 12px; }
.sw-dialog .dialog-head h2 { font-size: 1.375rem; }
.sw-body { display: grid; gap: 14px; justify-items: center; }
.sw-help { max-width: 32em; text-align: center; font-size: 0.875rem; line-height: 1.35; color: var(--text-muted); }
/* The card: narrower than the dialog, so the buttons get room below it. */
.sw-stack { position: relative; width: min(100%, 500px); aspect-ratio: 4 / 5; max-height: 58vh; margin-bottom: 12px; }
.sw-card {
  position: absolute; inset: 0; border-radius: 24px; overflow: hidden; background: var(--skeleton);
  box-shadow: 0 12px 32px rgba(52, 4, 95, .18); touch-action: none; user-select: none; cursor: grab;
  transform: translateY(calc(var(--depth) * 12px)) scale(calc(1 - var(--depth) * .05));
  transition: transform .45s cubic-bezier(.22, 1.2, .36, 1), opacity .3s ease;
}
.sw-card.dragging { transition: none; cursor: grabbing; }
.sw-card.flying { transition: transform .38s cubic-bezier(.4, 0, .6, 1), opacity .38s ease; opacity: 0; }
.sw-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sw-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px 18px; background: var(--scrim); color: var(--scrim-text); }
.sw-info h3 { font-family: var(--font-title); font-weight: normal; font-size: 1.1875rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-date { font-size: 0.8125rem; font-weight: 700; color: var(--scrim-date); text-transform: uppercase; margin-bottom: 4px; }
.sw-desc { font-size: 0.875rem; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-stamp {
  position: absolute; top: 22px; padding: 6px 14px; border-radius: 12px; border: 3px solid currentColor;
  font-family: var(--font-title); font-size: 1.25rem; text-transform: uppercase; background: rgba(255, 255, 255, .85);
}
.sw-stamp-yes { left: 18px; color: #1B8A4B; transform: rotate(-12deg); opacity: var(--yes, 0); }
.sw-stamp-no { right: 18px; color: #C2185B; transform: rotate(12deg); opacity: var(--no, 0); }
/* The app's three round buttons: white, a tinted ring, a soft shadow; the star sits higher. */
.sw-controls { display: flex; align-items: flex-end; justify-content: center; gap: 28px; margin-bottom: 20px; }
.sw-btn {
  --c: #AF44F2;
  width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  /* Filled with the icon's colour, the icon in white (dark on the yellow, which white can't read on). */
  border: 2px solid color-mix(in srgb, var(--c) 30%, transparent); background: var(--c); color: var(--ink, #FFFFFF);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}
.sw-btn svg { width: 38px; height: 38px; fill: currentColor; }
.sw-no { --c: #FF6B6B; }
.sw-super { --c: #FFD93D; --ink: #34045F; margin-bottom: 18px; }
.sw-yes { --c: #AF44F2; }
.sw-star { width: 38px; height: 38px; background: currentColor; -webkit-mask: url('/assets/icon-star-shine.svg') center / contain no-repeat; mask: url('/assets/icon-star-shine.svg') center / contain no-repeat; }
.sw-btn:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 14px rgba(0, 0, 0, .22); }
.sw-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Progress pills, like the app: lila once a card is decided. */
.sw-progress { display: flex; justify-content: center; gap: 4px; width: min(100%, 500px); margin: 10px 0 4px; }
.sw-pill { flex: 0 1 26px; min-width: 4px; height: 5px; border-radius: 18px; background: #EBD7FA; transition: background-color .3s ease, transform .3s ease; }
.sw-pill.on { background: #D699FF; }
:root[data-theme="dark"] .sw-pill:not(.on) { background: #1C2029; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sw-pill:not(.on) { background: #1C2029; } }
.sw-done { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 24px 8px 8px; }
.sw-done:focus { outline: none; }
.sw-done-emoji { font-size: 3.5rem; }
.sw-done h3 { font-family: var(--font-title); font-weight: normal; font-size: 1.75rem; }
.sw-done p { color: var(--text-muted); max-width: 30em; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .sw-dialog[open] { animation: sw-in .45s cubic-bezier(.22, 1.2, .36, 1); }
  :root:not([data-motion="reduce"]) .sw-dialog[open]::backdrop { animation: sw-fade .3s ease; }
  :root:not([data-motion="reduce"]) .sw-card.hint { animation: sw-sway 1.6s ease-in-out .5s 1; }
  :root:not([data-motion="reduce"]) .sw-btn.pop { animation: sw-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
  :root:not([data-motion="reduce"]) .sw-pill.on { animation: sw-pill .35s ease; }
  :root:not([data-motion="reduce"]) .sw-done-emoji { animation: icon-pop .8s cubic-bezier(.34, 1.56, .64, 1) both; }
}
@keyframes sw-in { from { opacity: 0; transform: translateY(24px) scale(.94); } }
@keyframes sw-fade { from { opacity: 0; } }
@keyframes sw-sway {
  0%, 100% { transform: none; }
  25% { transform: translateX(-18px) rotate(-4deg); }
  60% { transform: translateX(14px) rotate(3deg); }
  85% { transform: translateX(-4px) rotate(-1deg); }
}
@keyframes sw-pop { 40% { transform: scale(1.18); } }
@keyframes sw-pill { 50% { transform: scaleY(1.8); } }
@media (max-width: 420px) {
  .sw-btn { width: 62px; height: 62px; }
  .sw-btn svg, .sw-star { width: 32px; height: 32px; }
  .sw-controls { gap: 20px; }
}

/* ------------------------------------------------ search: tools, loading, map, all tags */
.results-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); }
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px;
  background: none; cursor: pointer; font-weight: 600; font-size: 0.875rem; color: var(--text-muted);
  transition: background .2s ease, color .2s ease;
}
.seg-btn[aria-pressed="true"] { background: var(--accent-strong); color: var(--on-accent); }
.seg-btn:not([aria-pressed="true"]):hover { background: var(--surface); color: var(--text); }
.progress { position: relative; height: 4px; margin: -6px 0 14px; border-radius: 4px; background: var(--border); overflow: hidden; }
.progress span { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 4px; background: var(--accent-strong); left: 0; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .progress span { animation: progress-slide 1.1s ease-in-out infinite; }
}
@keyframes progress-slide { 0% { left: -40%; } 100% { left: 100%; } }
.results-zone { transition: opacity .25s ease, filter .25s ease; }
.results-zone.is-loading { opacity: .45; filter: saturate(.6); pointer-events: none; }
.map-wrap { display: grid; gap: 8px; }
.results-map { height: min(70vh, 640px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--skeleton); z-index: 0; }
.map-card { display: grid; gap: 4px; text-decoration: none; color: #1E0638; }
.map-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.map-card-date { font-size: 0.75rem; font-weight: 700; color: #6B1FA0; text-transform: uppercase; }
.map-card-title { font-family: var(--font-title); font-size: 0.9375rem; line-height: 1.25; }
.tag-more { border-radius: var(--radius); border: 1.5px dashed var(--line); padding: 0; }
.tag-more summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--accent-text); list-style: none; display: flex; align-items: center; gap: 6px; }
.tag-more summary::before { content: "+"; font-size: 1.25rem; line-height: 1; transition: transform .2s ease; }
.tag-more[open] summary::before { transform: rotate(45deg); }
.tag-more summary::-webkit-details-marker { display: none; }
.tag-more-inner { padding: 0 16px 16px; display: grid; gap: 12px; }
.tag-more-body { display: grid; gap: 16px; max-height: 420px; overflow: auto; }

.chip .access-picto { width: 16px; height: 16px; color: var(--accent-text); }
.chip:has(input:checked) .access-picto { color: inherit; }

/* ------------------------------------------------ motion (all off with reduced motion) */
/* Cross-page fade (View Transitions API); the header and tab bar stay put. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* Cards fade up one after the other; photos fade in when loaded. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .appear { animation: card-appear .5s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 55ms) both; }
  :root:not([data-motion="reduce"]) .card-media img { opacity: 0; transition: opacity .45s ease; }
  :root:not([data-motion="reduce"]) .card-media img.loaded { opacity: 1; }
  :root:not([data-motion="reduce"]) .reveal-up { opacity: 0; transform: translateY(26px); }
  :root:not([data-motion="reduce"]) .reveal-up.in { animation: card-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
  :root:not([data-motion="reduce"]) :is(.btn, .chip, .cat, .seg-btn, .tool, .transport-tile, .line-link, .icon-btn, .sw-btn):active { transform: scale(.96); transition-duration: .05s; }
  :root:not([data-motion="reduce"]) .see-all { transition: letter-spacing .2s ease; }
  :root:not([data-motion="reduce"]) .see-all:hover { letter-spacing: .02em; }
}
@keyframes card-appear { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* Map (MapLibre): pins are buttons (keyboard + screen readers), popup = mini card. */
.map-pin { width: 30px; height: 38px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: start center; }
.map-pin span {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--accent-strong); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  transition: transform .15s ease;
}
.map-pin:hover span, .map-pin:focus-visible span { transform: rotate(-45deg) scale(1.2); }
.map-pin:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.maplibregl-popup-content { padding: 10px; border-radius: 16px; box-shadow: 0 10px 30px rgba(52, 4, 95, .25); }
.maplibregl-popup-close-button { width: 28px; height: 28px; font-size: 1.125rem; border-radius: 50%; }
a.map-card { color: #1E0638; }
/* Date range + transport filter */
.date-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.date-range label { display: grid; gap: 4px; font-weight: 600; font-size: 0.875rem; }
.date-range input { min-height: 44px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; }
.transport-field .chip .transport-icon { width: 16px; height: 16px; color: var(--accent-text); }
.transport-field .chip:has(input:checked) .transport-icon { color: inherit; }
.line-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.line-choice { position: relative; display: inline-flex; border-radius: 999px; cursor: pointer; }
.line-choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.line-choice .line-pill { min-width: 40px; height: 40px; font-size: 0.875rem; transition: transform .15s ease, box-shadow .15s ease; }
.line-choice:hover .line-pill { transform: scale(1.08); }
/* Selected: yellow ring + a ✓ badge (state not shown by colour alone; full colours keep the contrast). */
.line-choice:has(input:checked) .line-pill { box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--yellow); }
.line-choice:has(input:checked)::after {
  content: "✓"; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.6875rem; font-weight: 800;
  background: var(--yellow); color: var(--on-yellow); pointer-events: none;
}
.line-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.map-card:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 10px; }
.map-card:focus:not(:focus-visible) { outline: none; }

/* Consent banner (bottom, non-modal; equal-weight buttons) */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); z-index: 80;
  max-width: 720px; margin: 0 auto; padding: 18px 20px; border-radius: var(--radius-lg);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  background: var(--bg); border: 1.5px solid var(--line); box-shadow: 0 16px 48px rgba(52, 4, 95, .22);
}
@media (min-width: 820px) { .consent { bottom: 24px; } }
.consent-text { flex: 1 1 320px; }
.consent h2 { font-family: var(--font-title); font-weight: normal; font-size: 1.125rem; margin-bottom: 4px; }
.consent p { font-size: 0.875rem; color: var(--text-muted); }
.consent-actions { display: flex; gap: 10px; }
.consent-actions .btn { min-width: 112px; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .consent { animation: card-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
}
.footer-cookies { font-size: inherit; color: inherit; text-decoration: underline; min-height: 0; }

/* Offer of this page in the browser's language (first visit only). */
.lang-hint { display: none; background: var(--accent-strong); color: var(--on-accent); font-size: 0.9375rem; }
/* Shown from the first paint: <html data-lang-hint> is set by the head's inline script. */
:root[data-lang-hint="fr"] .lang-hint[data-hint="fr"],
:root[data-lang-hint="en"] .lang-hint[data-hint="en"],
:root[data-lang-hint="es"] .lang-hint[data-hint="es"] { display: block; }
.lang-hint p { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 auto; padding-block: 8px; }
.lang-hint a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lang-hint-close {
  margin-left: auto; min-width: 40px; min-height: 40px; border: 0; border-radius: 999px;
  background: none; color: inherit; font-size: 1rem; cursor: pointer;
}
.lang-hint-close:hover { background: rgba(255, 255, 255, 0.18); }

/* Event page (rendered by the function): when + where under the lead, the
   links back into the site after « Vous aimerez aussi ». */
.ev-facts { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 12px; font-weight: 600; }
.ev-facts span + span::before { content: '·'; margin: 0 10px; color: var(--text-muted); }
/* « Envie d'autres sorties ? »: the weekend and search links as cards. */
.ev-more { margin-top: 48px; }
.ev-more h2 { font-family: var(--font-title); font-size: 1.375rem; margin-bottom: 16px; }
.ev-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.more-card {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 18px; border-radius: 18px;
  background: var(--surface); color: var(--text); text-decoration: none; font-weight: 700; line-height: 1.3;
  border: 1px solid transparent; transition: border-color .15s ease, transform .15s ease;
}
.more-card span { flex: 1; }
.more-card .icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--accent-text); }
.more-card .icon-arrow { width: 20px; height: 20px; transition: transform .15s ease; }
.more-card:hover { border-color: #AF44F2; }
.more-card:hover .icon-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .more-card, .more-card .icon-arrow { transition: none; } }
.open-app[hidden] { display: none !important; }
/* The header is drawn by core.js: keep its room so nothing jumps when it arrives. */
.site-header:empty { min-height: 65px; }

/* Pages drawn by JS keep the footer below the fold until their content arrives. */
#home-sections:empty, #about-page:empty, #contact-page:empty, #login-page:empty, #profile:empty { min-height: 110vh; }
/* Recherche: the count line, the sort / view switches (drawn by search.js) and
   the loading bar keep their room, so the results never move under the eye. The
   empty count line stays in the bar so the switches sit on the right from the start. */
.results-bar #status:empty { display: block; min-height: 1.5em; }
.results-tools .seg:empty { min-height: 46px; min-width: 170px; }
.progress[hidden] { display: block; visibility: hidden; }
/* Static heading + text of a JS-drawn page (web/build.mjs): holds the room, never shown. */
.seo-fallback { min-height: 110vh; clip-path: inset(50%); }
.site-footer > .seo-fallback { min-height: 0; position: absolute; }

/* Home: what Parissi is + the evergreen hubs (static HTML, see web/build.mjs). */
.home-about { max-width: 860px; text-align: center; }
.home-about h2 { font-family: var(--font-title); font-weight: normal; font-size: clamp(1.375rem, 3vw, 1.75rem); }
.home-about p { margin-top: 12px; color: var(--text-muted); line-height: 1.6; }
.home-about-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.home-about-links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px;
  border: 1.5px solid var(--accent); color: var(--text); font-weight: 600; text-decoration: none;
}
.home-about-links a:hover { background: var(--accent); color: var(--on-accent); }

/* Event page: our intro leads « À propos »; the official text folds underneath. */
.ev-intro { font-size: 1.125rem; font-weight: 500; line-height: 1.65; margin-bottom: 1em; }
.ev-source { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.ev-source summary { cursor: pointer; font-weight: 700; color: var(--text-muted); min-height: 44px; display: flex; align-items: center; }
.ev-source summary:hover { color: var(--text); }
.ev-source .rich { margin-top: 8px; }
.ev-source summary { color: var(--accent-text); }

/* ------------------------------------------------ weekend & dossier pages
   Rendered by the weekendPages / blockPages functions in the site's shell. */
.wk-page .page-head { padding-bottom: 8px; }
.wk-page .updated { margin-top: 6px; font-size: 0.875rem; font-weight: 600; color: var(--accent-text); }
.wk-page .intro { margin-top: 10px; max-width: 62ch; line-height: 1.65; color: var(--text-muted); }
.wk-grid { margin-top: 28px; }
/* The blurb is the card's own text: shown in full, cards of a row share a height. */
.card.card-wk .card-desc { -webkit-line-clamp: unset; line-clamp: unset; display: block; overflow: visible; min-height: 0; max-height: none; }
.card.card-wk .card-meta { margin-top: auto; min-height: 0; padding-top: 6px; }
.meta-venue { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 0.8125rem; }
.card-cta { display: none; }
.wk-see-all { margin-top: 28px; text-align: center; }
.wk-more { margin-top: 40px; text-align: center; color: var(--text-muted); }
.wk-more strong { color: var(--text); }
.wk-page .sec-title, .wk-page .next-weekends h2, .wk-page .faq h2 {
  font-family: var(--font-title); font-weight: normal; font-size: clamp(1.375rem, 3vw, 1.75rem); margin: 56px 0 16px;
}
.wk-page .next-weekends p { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0; }
.wk-page .next-weekends a, .wk-page .archives-link, .wk-page .nav-link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px;
  border: 1.5px solid var(--accent); color: var(--text); font-size: 0.9375rem; font-weight: 600; text-decoration: none;
}
.wk-page .next-weekends a:hover, .wk-page .archives-link:hover, .wk-page .nav-link:hover { background: var(--accent); color: var(--on-accent); }
.wk-page .archives-link { margin-top: 32px; }
.wk-page .blk-list, .wk-page .wk-list { display: grid; gap: 12px; }
@media (min-width: 720px) { .wk-page .blk-list { grid-template-columns: repeat(3, 1fr); } }
.wk-page .blk-list a, .wk-page .wk-list a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.wk-page .blk-list a:hover, .wk-page .wk-list a:hover { border-color: var(--accent); transform: translateY(-2px); }
.wk-page .blk-list strong { font-family: var(--font-title); font-weight: normal; font-size: 1.125rem; }
.wk-page .blk-list span { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.5; }
.wk-page .wk-list a { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.wk-page .blk-list, .wk-page .wk-list, .wk-page .blk-list li, .wk-page .wk-list li { min-width: 0; }
.wk-page .wk-list .count { position: static; transform: none; flex-shrink: 0; min-width: 32px; height: auto; line-height: 1.6; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 0.8125rem; text-align: center; }
.wk-page .blk-list + p { margin-top: 16px; }
.wk-page .faq-item { padding: 16px 0; border-top: 1px solid var(--border); }
.wk-page .faq-item h3 { font-size: 1.0625rem; font-weight: 700; }
.wk-page .faq-item p { margin-top: 6px; color: var(--text-muted); line-height: 1.6; }
.wk-page > .section:last-child { margin-bottom: 0; }

/* Reviews panel: filled with the brand purple, white text. */
.reviews-panel { padding: 32px 20px 24px; border-radius: 36px; background: #AF44F2; color: #FFFFFF; }
@media (min-width: 820px) { .reviews-panel { padding: 44px 48px 36px; } }
.reviews-panel .section-head h2, .reviews-panel .section-sub { color: #FFFFFF; }
.reviews-panel .carousel-nav { border-color: rgba(255, 255, 255, .85); background: transparent; color: #FFFFFF; }
.reviews-panel .carousel-nav:disabled { opacity: .45; }
.reviews-panel .review-card { border-color: transparent; color: var(--text); }
.reviews-panel .track-reviews:focus-visible { outline-color: #FFFFFF; }

/* Home: one purple band, the full width of the page, from where the divider
   line above was to where the one below was: the app card (light lila, as
   everywhere) sits inside it, the reviews below it on the purple. */
.purple-band { margin-top: 64px; padding: 72px 0; background: #AF44F2; color: #FFFFFF; }
@media (max-width: 559px) { .purple-band { padding: 56px 0; } }
.purple-band .reviews-panel { background: transparent; border-radius: 0; padding: 40px 0 0; }
.purple-band .app-card { color: var(--text); border: 0; } /* the site's colours (not the band's white), no stroke */


/* « Personnalisez vos recommandations » and « Près de vous »: a fun gradient
   (deep purple → Parissi purple → magenta) with a soft pink glow drifting
   slowly; white text, yellow button. Romy's call for these two
   cards — the rest of the site stays flat. */
.prompt-card.fun-card { position: relative; overflow: hidden; isolation: isolate; border: 0; color: #FFFFFF; background: #AF44F2; }
/* The gradient lives on a layer behind the content, so its drift never
   replaces the card's own reveal animation. */
.prompt-card.fun-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 85% 0%, rgba(255, 107, 154, .45), transparent 42%),
    linear-gradient(115deg, #8E24E3 0%, #AF44F2 45%, #D84FD8 100%);
  background-size: 180% 180%, 100% 100%;
  background-position: 100% 0%, 0 0;
}
.fun-card .prompt-title, .fun-card .prompt-text { color: #FFFFFF; }
.fun-card .perso-emoji::after { color: #FFFFFF; }
.fun-card .btn-yellow:focus-visible { outline-color: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .prompt-card.fun-card::before { animation: fun-drift 9s ease-in-out infinite alternate; }
}
@keyframes fun-drift {
  to { background-position: 55% 60%, 0 0; }
}


.title-emoji { font-style: normal; }
.organiser-btn .icon { width: 20px; height: 20px; }
/* Home band: a shorter app card (smaller phones, less padding). */
@media (min-width: 820px) {
  .purple-band .app-card { min-height: 360px; }
  .purple-band .app-text { padding: 40px 24px 40px 0; }
  .purple-band .phone { width: 196px; border-radius: 30px; padding: 7px; }
  .purple-band .phone img { border-radius: 23px; }
  .purple-band .phone-back { left: calc(50% - 175px); top: 84px; }
  .purple-band .phone-front { left: calc(50% - 4px); top: 36px; }
}
@media (max-width: 819px) { .purple-band .app-phones { height: 240px; } }
/* Review bubbles in the home band: the same light lila as the app card above. */
.purple-band .review-card { background: var(--surface); }
/* Reviews heading: the subtitle right under its title; yellow arrows. */
.reviews-panel .section-head { margin-bottom: 4px; }
.reviews-panel .section-sub { margin: 0 0 22px; }
.reviews-panel .carousel-nav { background: var(--yellow); border-color: var(--yellow); color: #AF44F2; } /* Parissi purple arrow on the yellow */
.reviews-panel .carousel-nav:disabled { opacity: 1; background: transparent; border-color: rgba(255, 248, 53, .7); color: rgba(255, 255, 255, .7); }

/* Search filters: icons in « Choisir des dates » and « Réinitialiser les filtres ». */
.filters .chip .icon { width: 16px; height: 16px; margin-right: 4px; }
.reset-btn { display: inline-flex; align-items: center; gap: 6px; }
.reset-btn .icon { width: 18px; height: 18px; }

/* ------------------------------------------------ search page: head, dock, calendar */
/* The search heads the filters column (title + bar), never wider than it. */
.search-layout { padding-top: 32px; }
.search-head h1 { font-family: var(--font-title); font-weight: normal; font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.1; }
.search-head .search-box { margin: 14px 0 20px; max-width: none; }
.search-head .search-box .btn { width: 52px; min-height: 52px; padding: 0; border-radius: 50%; flex-shrink: 0; }
.search-head .search-box .btn .icon { width: 22px; height: 22px; }
@media (min-width: 960px) {
  /* The column sticks and scrolls on its own, so its end stays reachable. */
  .search-layout > .search-side { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 16px 2px; scrollbar-width: thin; }
  .filters { position: static; }
}

/* « Quand ? »: Du / Au fields, then the presets. */
.when-field .chips { margin-top: 12px; }
.date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.date-field {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text); font: inherit;
}
.date-field .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-text); }
.date-field-text { display: grid; line-height: 1.2; min-width: 0; }
.date-field-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.date-field-value { font-size: 0.875rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-field:hover, .date-field[aria-expanded="true"] { border-color: var(--accent); }
.date-field.is-set { border-color: var(--accent); background: var(--surface); }
/* The calendar, like the app's date sheet. */
.calendar { --cal-range: rgba(175, 68, 242, .14); margin-top: 10px; padding: 14px 12px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
:root[data-theme="dark"] .calendar { --cal-range: rgba(214, 153, 255, .22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .calendar { --cal-range: rgba(214, 153, 255, .22); } }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-month { font-size: 1.0625rem; font-weight: 600; text-align: center; flex: 1; }
.cal-nav { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.cal-nav .icon { width: 18px; height: 18px; }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekdays span { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); padding: 4px 0; }
.cal-weekdays span.on { color: #AF44F2; }
.cal-day {
  position: relative; z-index: 0; aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.875rem; color: var(--text);
}
.cal-day:disabled { opacity: .3; cursor: default; }
.cal-day.is-today { color: #AF44F2; font-weight: 700; }
.cal-day:not(:disabled):hover::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px solid #AF44F2; z-index: -1; }
.cal-day.in-range { background: var(--cal-range); }
.cal-day.is-start { background: linear-gradient(90deg, transparent 50%, var(--cal-range) 50%); }
.cal-day.is-end { background: linear-gradient(90deg, var(--cal-range) 50%, transparent 50%); }
.cal-day.is-edge:not(.is-start):not(.is-end) { background: none; }
.cal-day.is-edge { color: #FFFFFF; font-weight: 700; }
.cal-day.is-edge::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #AF44F2; z-index: -1; }
.cal-day:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; border-radius: 50%; }
.cal-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.cal-actions .btn:disabled { opacity: .45; cursor: default; }

/* The list the visitor came from: name + a separate round ✕. */
.selection-row { display: flex; }
.selection-chip {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-height: 48px; padding: 8px 8px 8px 18px;
  border: 0; border-radius: 999px; background: var(--accent-strong); color: var(--on-accent);
  font: inherit; font-weight: 700; font-size: 0.9375rem; text-align: left; cursor: pointer;
}
.selection-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selection-x { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background .15s ease, transform .15s ease; }
.selection-x .icon { width: 18px; height: 18px; }
.selection-chip:hover .selection-x { background: rgba(255, 255, 255, .38); transform: rotate(90deg); }
.selection-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Map « locate me »: the visitor's dot in Parissi purple. */
.maplibregl-user-location-dot, .maplibregl-user-location-dot::before { background-color: #AF44F2; }
.maplibregl-user-location-accuracy-circle { background-color: rgba(175, 68, 242, .18); }

/* Map pins: favourites in a darker lila with a white heart; the one last opened in yellow. */
.map-pin.is-fav span { background: #7A1FB8; }
.pin-heart { width: 13px; height: 13px; fill: #FFFFFF; transform: rotate(45deg); }
.map-pin.is-active span { background: var(--yellow); border-color: #AF44F2; }
.map-pin.is-active .pin-heart { fill: #7A1FB8; }

/* Search page: the filter chips a little smaller (the search bar keeps its size),
   and the category titles inside « Voir tous les tags » smaller still. */
.filters .chips-sm .chip { min-height: 40px; padding: 0 13px; font-size: 0.8125rem; gap: 6px; }
.filters .chip .icon { width: 15px; height: 15px; margin-right: 2px; }
.filters .chip .access-picto { width: 15px; height: 15px; }
.tag-more .envies-group-title { font-size: 0.875rem; margin-bottom: 6px; }
/* Header: the active page in the same purple → magenta gradient as « Près de vous ». */
.header-right .tool[aria-current="page"] { background: linear-gradient(115deg, #8E24E3 0%, #AF44F2 45%, #D84FD8 100%); color: #FFFFFF; }

/* « Du » / « Au »: white until a date is picked, then filled in Parissi purple. */
.date-field { background: #FFFFFF; }
:root[data-theme="dark"] .date-field { background: var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .date-field { background: var(--bg); } }
.date-field.is-set, :root[data-theme="dark"] .date-field.is-set { background: #AF44F2; border-color: #AF44F2; color: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .date-field.is-set { background: #AF44F2; border-color: #AF44F2; } }
.date-field.is-set .icon, .date-field.is-set .date-field-label { color: #FFFFFF; }

/* Event page: a slightly smaller title; the venue line under it with a pin. */
.ev-title { font-size: clamp(1.625rem, 4vw, 2.375rem); }
.ev-facts { align-items: center; gap: 6px; }
.ev-facts .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-text); }
.ev-facts span + span::before { content: none; }

/* Event page « Infos pratiques »: the app's icons; « Y aller » like the app's
   outlined pill; contact tags carry their icon too. */
.info-list .info-emoji .icon { width: 22px; height: 22px; color: var(--accent-text); }
.info-tag .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent-text); }
.go-btn {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 6px 12px; border-radius: 18px;
  border: 1px solid #AF44F2; background: #EBD7FA; color: var(--text); text-decoration: none;
  font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
}
.go-btn .icon { width: 18px; height: 18px; color: #AF44F2; }
.go-btn:hover { background: #DFC0F8; }
:root[data-theme="dark"] .go-btn { background: #AF44F2; color: #FFFFFF; }
:root[data-theme="dark"] .go-btn .icon { color: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .go-btn { background: #AF44F2; color: #FFFFFF; } :root:not([data-theme="light"]) .go-btn .icon { color: #FFFFFF; } }
/* Bottom « Réserver »: centred, wide, a soft light sweep and a gentle lift on hover. */
.ev-book { margin-top: 32px; display: flex; justify-content: center; }
.ev-book .btn {
  position: relative; overflow: hidden; width: min(100%, 380px); min-height: 54px; justify-content: center; gap: 10px;
  font-size: 1rem; font-weight: 700; isolation: isolate;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .25s ease;
}
.ev-book .btn .icon { width: 20px; height: 20px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.ev-book .btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
  transform: translateX(-110%); animation: book-sweep 3.6s cubic-bezier(.45, 0, .2, 1) 1.2s infinite;
}
.ev-book .btn:hover { transform: translateY(-2px) scale(1.02); background-color: #9A2FE0; }
.ev-book .btn:hover .icon { transform: rotate(-8deg) scale(1.1); }
.ev-book .btn:active { transform: scale(.98); }
@keyframes book-sweep { 0% { transform: translateX(-110%); } 45%, 100% { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
  .ev-book .btn, .ev-book .btn .icon { transition: none; }
  .ev-book .btn::after { animation: none; display: none; }
  .ev-book .btn:hover { transform: none; }
}
a.info-tag { text-decoration: none; }
a.info-tag:hover { border-color: #AF44F2; }

/* « Ajouter à mon agenda »: Google, Outlook or the .ics file. */
.cal-menu { position: relative; display: inline-block; }
.cal-options {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 300px; max-width: calc(100vw - 32px); margin: 0; padding: 8px; list-style: none;
  background: var(--bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 12px 32px rgba(52, 4, 95, .18);
}
.cal-options[hidden] { display: none; }
.cal-option {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 12px;
  background: none; color: var(--text); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.cal-option:hover, .cal-option:focus-visible { background: var(--surface); }
.cal-option-text { display: grid; gap: 2px; }
.cal-option small { font-weight: 400; font-size: 0.8125rem; color: var(--text-muted); }
.cal-option-logo { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; color: #FFFFFF; font-weight: 800; font-size: 0.875rem; }
.cal-option.google .cal-option-logo { border-radius: 0; background: center / 26px 26px no-repeat url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M18 6H6v12h12z'/><path fill='%23EA4335' d='M18 24l6-6h-6z'/><path fill='%23FBBC04' d='M24 6h-6v12h6z'/><path fill='%2334A853' d='M18 18H6v6h12z'/><path fill='%23188038' d='M0 18v4a2 2 0 0 0 2 2h4v-6z'/><path fill='%231967D2' d='M24 6V2a2 2 0 0 0-2-2h-4v6z'/><path fill='%234285F4' d='M18 0H2a2 2 0 0 0-2 2v16h6V6h12z'/><text x='12' y='14.9' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='7.2' fill='%234285F4'>31</text></svg>"); }
.cal-option.outlook .cal-option-logo { background: #0F6CBD; }
.cal-option.outlook .cal-option-logo::before { content: "O"; }
.cal-option.ics .cal-option-logo { background: var(--surface); color: var(--accent-text); }
.cal-option.ics .cal-option-logo::before { content: "↓"; font-size: 1rem; }

/* Event page: Favoris / Partager on the « Retour » line. */
.ev-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 8px; }
.ev-nav .back { margin-top: 0; }
.ev-nav .ev-top-actions { margin-left: auto; }
/* Price conditions under the price tag: plain text, like the other rows. */
.price-detail { margin-top: 6px; color: var(--text); font-size: 0.8125rem; font-weight: 400; line-height: 1.4; }
.price-detail p { margin: 0 0 4px; }
.when-detail { color: var(--text); }
/* « Y aller » and the contact links: filled in Parissi purple, like buttons. */
.go-btn, a.info-tag { background: #AF44F2; border-color: #AF44F2; color: #FFFFFF; }
.go-btn .icon, a.info-tag .icon { color: #FFFFFF; }
.go-btn:hover, a.info-tag:hover { background: #9A2FE0; border-color: #9A2FE0; color: #FFFFFF; }
/* Event page: the footer closer to the app block. */
main:has(#event) + .site-footer { margin-top: 32px; }
/* Weather now closes « À propos », under the description. */
.ev-desc .weather-card { margin: 32px 0 0; }

/* Event page: from « Vous aimerez aussi » down to the footer, one light-lila band
   edge to edge (the app's background); the cards on it turn white. */
.ev-after {
  margin-top: 64px; padding: 8px 0 48px; background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax);
}
.ev-after .card, .ev-after .more-card, .ev-after .app-card { background: var(--bg); }
.ev-after .app-card { border-color: transparent; }
main:has(#event) + .site-footer { margin-top: 0; background: var(--surface); }
/* Calendar options: a hover/focus fill that reads at a glance, plus a ring for the keyboard. */
.cal-option:hover, .cal-option:focus-visible { background: #E6CCFA; }
.cal-option:focus-visible { outline: 2px solid #AF44F2; outline-offset: -2px; }
:root[data-theme="dark"] .cal-option:hover, :root[data-theme="dark"] .cal-option:focus-visible { background: #4A2470; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cal-option:hover, :root:not([data-theme="light"]) .cal-option:focus-visible { background: #4A2470; } }
/* On the lila band: a visible lila stroke on the event cards and the « Envie d'autres sorties ? » cards. */
.ev-after .card, .ev-after .more-card { border: 1px solid #D4B1F5; }
.ev-after .card:hover, .ev-after .more-card:hover { border-color: #AF44F2; }
:root[data-theme="dark"] .ev-after .card, :root[data-theme="dark"] .ev-after .more-card { border-color: #4A2470; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ev-after .card, :root:not([data-theme="light"]) .ev-after .more-card { border-color: #4A2470; } }
:root[data-theme="dark"] .ev-after .card:hover, :root[data-theme="dark"] .ev-after .more-card:hover { border-color: #AF44F2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ev-after .card:hover, :root:not([data-theme="light"]) .ev-after .more-card:hover { border-color: #AF44F2; } }
.ev-more li { display: flex; }
.ev-more .more-card { flex: 1; }
/* Event page: a little more air between the date / Favoris / Partager row and the title. */
.ev-top { margin-bottom: 22px; }

/* Favourites: list / map switch, and « En cours » with a softly pulsing dot. */
.fav-tools { display: flex; justify-content: flex-end; margin-top: 16px; }
.fav-map-wrap { margin-top: 24px; }
.live-dot { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: #E5397F; vertical-align: middle; position: relative; top: -2px; box-shadow: 0 0 0 0 rgba(229, 57, 127, .55); animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 127, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(229, 57, 127, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Event page « Favoris »: selected = purple fill with a filled white heart;
   adding it pops the heart with a ring and a burst of sparkles. */
.fav-inline { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.fav-inline[aria-pressed="true"] { background: #AF44F2; border-color: #AF44F2; color: #FFFFFF; }
.fav-inline[aria-pressed="true"] .icon { fill: #FFFFFF; stroke: #FFFFFF; }
.fav-inline[aria-pressed="true"]:hover { background: #9A2FE0; border-color: #9A2FE0; }
.fav-heart { position: relative; display: inline-flex; }
.fav-heart::before, .fav-heart::after { content: ""; position: absolute; left: 50%; top: 50%; pointer-events: none; opacity: 0; }
.fav-heart::before { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #FFF835; }
.fav-heart::after {
  width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  box-shadow: 0 -15px #FFF835, 11px -11px #FF6B9A, 15px 0 #FFFFFF, 11px 11px #FFF835, 0 15px #FF6B9A, -11px 11px #FFFFFF, -15px 0 #FFF835, -11px -11px #FF6B9A;
}
.fav-inline.fav-pop { animation: fav-press .45s cubic-bezier(.3, 1.6, .5, 1); }
.fav-inline.fav-pop .icon { animation: fav-heart-pop .6s cubic-bezier(.2, 1.8, .4, 1); }
.fav-inline.fav-pop .fav-heart::before { animation: fav-ring .55s ease-out; }
.fav-inline.fav-pop .fav-heart::after { animation: fav-sparks .65s ease-out; }
@keyframes fav-press { 0% { transform: scale(1); } 35% { transform: scale(.93); } 100% { transform: scale(1); } }
@keyframes fav-heart-pop { 0% { transform: scale(1); } 25% { transform: scale(.55); } 60% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes fav-ring { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes fav-sparks { 0% { opacity: 1; transform: scale(.4) rotate(0deg); } 100% { opacity: 0; transform: scale(1.6) rotate(25deg); } }
@media (prefers-reduced-motion: reduce) {
  .fav-inline.fav-pop, .fav-inline.fav-pop .icon, .fav-inline.fav-pop .fav-heart::before, .fav-inline.fav-pop .fav-heart::after { animation: none; }
}

/* Favourites « Terminés »: faded photo + « Terminé » tag top-left. */
.fav-past .card-media { background: #FFFFFF; }
.fav-past .card-media img { opacity: .28; filter: grayscale(1); }
.expired-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 8px; border-radius: 999px; background: #34045F; color: #FFFFFF; font-size: 0.75rem; font-weight: 700;
}
.expired-tag .icon { width: 14px; height: 14px; fill: currentColor; }
/* Removing it: the heart deflates and the button gives a little shake. */
.fav-inline.fav-unpop { animation: fav-shake .4s ease; }
.fav-inline.fav-unpop .icon { animation: fav-heart-out .45s ease; }
@keyframes fav-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
@keyframes fav-heart-out { 0% { transform: scale(1); } 40% { transform: scale(.5); opacity: .5; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fav-inline.fav-unpop, .fav-inline.fav-unpop .icon { animation: none; } }

/* « Partager »: selected while its list is open (same fill and pop as « Favoris »),
   and the list in the page's style, opening under the button on the right. */
.share-menu { position: relative; display: inline-block; }
.share-options { left: auto; right: 0; min-width: 260px; }
.share-btn { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.share-btn[aria-expanded="true"] { background: #AF44F2; border-color: #AF44F2; color: #FFFFFF; }
.share-btn[aria-expanded="true"] .icon { fill: #FFFFFF; }
.share-btn.fav-pop { animation: fav-press .45s cubic-bezier(.3, 1.6, .5, 1); }
.share-btn.fav-pop .icon { animation: fav-heart-pop .6s cubic-bezier(.2, 1.8, .4, 1); }
.share-btn.fav-pop .fav-heart::before { animation: fav-ring .55s ease-out; }
.share-btn.fav-pop .fav-heart::after { animation: fav-sparks .65s ease-out; }
.share-btn.fav-unpop { animation: fav-shake .4s ease; }
.share-btn.fav-unpop .icon { animation: fav-heart-out .45s ease; }
@media (prefers-reduced-motion: reduce) {
  .share-btn.fav-pop, .share-btn.fav-pop .icon, .share-btn.fav-pop .fav-heart::before, .share-btn.fav-pop .fav-heart::after,
  .share-btn.fav-unpop, .share-btn.fav-unpop .icon { animation: none; }
}
.share-options .cal-option-logo .icon, .share-options .cal-option-logo svg { width: 18px; height: 18px; fill: currentColor; }
.share-copy .cal-option-logo, .share-email .cal-option-logo, .share-sms .cal-option-logo, .share-native .cal-option-logo { background: #EBD7FA; color: #7A1FB8; }
.share-whatsapp .cal-option-logo { background: #25D366; color: #FFFFFF; }
.share-facebook .cal-option-logo { background: #1877F2; }
.share-facebook .cal-option-logo::before { content: "f"; font-size: 1.125rem; font-weight: 800; font-family: Arial, Helvetica, sans-serif; }
.share-x .cal-option-logo { background: #000000; }
.share-x .cal-option-logo::before { content: "X"; font-family: Arial, Helvetica, sans-serif; font-weight: 800; }
.cal-option.is-done .cal-option-logo { background: #1F9D55; color: #FFFFFF; }
/* « Ajouter à mon agenda »: the same selected fill and pop while its list is open. */
.cal-menu > .btn { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.cal-menu > .btn[aria-expanded="true"] { background: #AF44F2; border-color: #AF44F2; color: #FFFFFF; }
.cal-menu > .btn[aria-expanded="true"] .icon { fill: #FFFFFF; }
.cal-menu > .btn.fav-pop { animation: fav-press .45s cubic-bezier(.3, 1.6, .5, 1); }
.cal-menu > .btn.fav-pop .icon { animation: fav-heart-pop .6s cubic-bezier(.2, 1.8, .4, 1); }
.cal-menu > .btn.fav-pop .fav-heart::before { animation: fav-ring .55s ease-out; }
.cal-menu > .btn.fav-pop .fav-heart::after { animation: fav-sparks .65s ease-out; }
.cal-menu > .btn.fav-unpop { animation: fav-shake .4s ease; }
.cal-menu > .btn.fav-unpop .icon { animation: fav-heart-out .45s ease; }
@media (prefers-reduced-motion: reduce) {
  .cal-menu > .btn.fav-pop, .cal-menu > .btn.fav-pop .icon, .cal-menu > .btn.fav-pop .fav-heart::before, .cal-menu > .btn.fav-pop .fav-heart::after,
  .cal-menu > .btn.fav-unpop, .cal-menu > .btn.fav-unpop .icon { animation: none; }
}

/* Favourites: the account emoji before the title, and a compact guest strip. */
.fav-title { display: flex; align-items: center; gap: 16px; }
.fav-avatar { width: 56px; height: 56px; font-size: 1.75rem; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.fav-avatar:hover { transform: scale(1.06); box-shadow: 0 0 0 3px var(--accent); }
.guest-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; padding: 12px 16px;
  border-radius: 18px; background: var(--surface); border: 1px solid #E3C8F8;
}
.guest-strip-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #EBD7FA; color: #7A1FB8; flex-shrink: 0; }
.guest-strip-icon .icon { width: 20px; height: 20px; fill: currentColor; }
.guest-strip p { flex: 1; min-width: 200px; margin: 0; display: grid; gap: 2px; font-size: 0.875rem; color: var(--text-muted); }
.guest-strip strong { color: var(--text); font-size: 0.9375rem; }
.guest-strip-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.guest-strip-actions .btn-sm { min-height: 40px; }

.live-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 0;
  padding: 4px 10px 4px 9px; border-radius: 999px; background: #FFFFFF; color: #34045F; font-size: 0.75rem; font-weight: 700;
  box-shadow: 0 2px 8px rgba(52, 4, 95, .18);
}
.live-tag .live-dot { width: 8px; height: 8px; margin-right: 7px; top: 0; }
/* The dot breathes (scale) as well as glowing. */
.live-dot { animation: live-pulse 1.8s ease-out infinite, live-scale 1.8s ease-in-out infinite; }
@keyframes live-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
/* Finished favourites stay faded once loaded (beats the fade-in rule above). */
.fav-past .card-media img.loaded, :root:not([data-motion="reduce"]) .fav-past .card-media img.loaded { opacity: .28; }
/* Favourites page only: card subtitles on 2 lines, then « … ». */
#fav-content .card:not(.card-large) .card-desc { -webkit-line-clamp: 2; min-height: calc(2 * 1.5em); }

/* Card hearts: the event page's celebration — pop, purple ring and a burst of
   sparkles on adding; a deflate and a little shake on removing. */
.fav .fav-heart { display: grid; place-items: center; }
.fav .fav-heart::before { border-color: #AF44F2; width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.fav .fav-heart::after { box-shadow: 0 -17px #AF44F2, 12px -12px #FF6B9A, 17px 0 #FFC107, 12px 12px #AF44F2, 0 17px #FF6B9A, -12px 12px #FFC107, -17px 0 #AF44F2, -12px -12px #FF6B9A; }
.fav.fav-pop { animation: fav-press .45s cubic-bezier(.3, 1.6, .5, 1); }
.fav.fav-pop .icon { animation: fav-heart-pop .6s cubic-bezier(.2, 1.8, .4, 1); }
.fav.fav-pop .fav-heart::before { animation: fav-ring .55s ease-out; }
.fav.fav-pop .fav-heart::after { animation: fav-sparks .65s ease-out; }
.fav.fav-unpop { animation: fav-shake .4s ease; }
.fav.fav-unpop .icon { animation: fav-heart-out .45s ease; }
@media (prefers-reduced-motion: reduce) {
  .fav.fav-pop, .fav.fav-pop .icon, .fav.fav-pop .fav-heart::before, .fav.fav-pop .fav-heart::after, .fav.fav-unpop, .fav.fav-unpop .icon { animation: none; }
}
/* The site's own « reduce motion » setting switches all of these off too. */
:root[data-motion="reduce"] .fav-pop, :root[data-motion="reduce"] .fav-pop .icon,
:root[data-motion="reduce"] .fav-pop .fav-heart::before, :root[data-motion="reduce"] .fav-pop .fav-heart::after,
:root[data-motion="reduce"] .fav-unpop, :root[data-motion="reduce"] .fav-unpop .icon,
:root[data-motion="reduce"] .ev-book .btn::after, :root[data-motion="reduce"] .live-dot { animation: none !important; }
:root[data-motion="reduce"] .ev-book .btn:hover { transform: none; }

/* Favourites header: « Mes favoris » on the left, the guest strip on the right. */
.fav-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.fav-head h1 { margin: 0; }
.fav-head .guest-strip { margin-top: 0; max-width: 560px; padding: 10px 14px; }
.fav-head .guest-strip p { min-width: 180px; }
/* « En cours » card tag: purple, with an icon (no animation). */
.live-tag { gap: 5px; padding: 4px 10px 4px 8px; background: #AF44F2; color: #FFFFFF; box-shadow: none; }
.live-tag .icon { width: 14px; height: 14px; fill: currentColor; }
/* The guest strip now sits under « Mes favoris ». */
.fav-head { flex-direction: column; align-items: flex-start; gap: 16px; }
.fav-head .guest-strip { width: 100%; max-width: 640px; }
/* Title row: emoji + « Mes favoris » left, Liste / Carte right; icons on the guest CTAs. */
.fav-title-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fav-title-row .fav-tools { margin-top: 0; }
.guest-strip-actions .btn { gap: 6px; }
.guest-strip-actions .btn .icon { width: 18px; height: 18px; fill: currentColor; }
#fav-content.section { padding-top: 0; }
#fav-list > .section:first-child { padding-top: 32px; }

/* Guest strip in the « Près de vous » style: drifting purple → magenta gradient,
   white text, yellow « Se connecter », white-outlined « S'inscrire ». */
.guest-strip { position: relative; overflow: hidden; isolation: isolate; border: 0; background: #AF44F2; color: #FFFFFF; }
.guest-strip::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 85% 0%, rgba(255, 107, 154, .45), transparent 42%),
    linear-gradient(115deg, #8E24E3 0%, #AF44F2 45%, #D84FD8 100%);
  background-size: 180% 180%, 100% 100%;
  background-position: 100% 0%, 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .guest-strip::before { animation: fun-drift 9s ease-in-out infinite alternate; }
}
.guest-strip p, .guest-strip strong { color: #FFFFFF; }
.guest-strip p span { opacity: .92; }
.guest-strip-icon { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
.guest-strip .btn-outline { background: transparent; border-color: #FFFFFF; color: #FFFFFF; }
.guest-strip .btn-outline:hover { background: rgba(255, 255, 255, .16); }
.guest-strip .btn:focus-visible { outline-color: #FFFFFF; }
#fav-content > .panel.empty, #fav-content > .status { margin-top: 32px; }