/* Bodoni Moda, auto-hébergée (police variable, poids 500-700).
   Auto-hébergée pour que le mode hors ligne fonctionne et sans requête vers un tiers. */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/bodoni-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/bodoni-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}


  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }

  :root {
    --ground:   #EEF2F0;
    --surface:  #FBFCFB;
    --surface-2:#E6ECE9;
    --ink:      #12292E;
    --ink-soft: #3E585D;
    --ink-mute: #6C8286;
    --line:     #D4DDD9;
    --line-2:   #C4D0CC;
    --accent:   #0E7C8B;
    --accent-2: #0B5561;
    --warm:     #C97F2C;
    --warm-soft:#DE9236;
    --nature:   #4E7C59;
    --baignade: #1592B0;
    --village:  #B87038;
    --suisse:   #BE443B;
    --shadow:   0 1px 2px rgba(18,41,46,.05), 0 12px 30px -18px rgba(18,41,46,.28);
    --shadow-lift: 0 2px 4px rgba(18,41,46,.06), 0 22px 44px -22px rgba(18,41,46,.38);
    --font-serif: "Bodoni Moda", "Bodoni 72", Didot, "Didot LT STD", "Playfair Display", "Iowan Old Style", Palatino, Georgia, serif;
    --font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    --maxw: 1120px;
    /* Surface commune au header et au bandeau de filtres : mêmes valeurs
       des deux côtés, sinon une différence de teinte trahit la jointure. */
    --chrome-bg: color-mix(in srgb, var(--ground) 91%, transparent);
    --chrome-blur: saturate(1.5) blur(14px);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ground:   #08171B;
      --surface:  #0E2429;
      --surface-2:#12303699;
      --ink:      #E8F0EE;
      --ink-soft: #AAC0C2;
      --ink-mute: #7B9296;
      --line:     #1D3A40;
      --line-2:   #244851;
      --accent:   #35B0C1;
      --accent-2: #6FD3E0;
      --warm:     #E6A24A;
      --warm-soft:#E6A24A;
      --nature:   #74A883;
      --baignade: #46B7D4;
      --village:  #D69B6A;
      --suisse:   #DE6A60;
      --shadow:   0 1px 2px rgba(0,0,0,.30), 0 16px 34px -20px rgba(0,0,0,.7);
      --shadow-lift: 0 2px 6px rgba(0,0,0,.36), 0 26px 50px -22px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="light"] {
    --ground:#EEF2F0; --surface:#FBFCFB; --surface-2:#E6ECE9; --ink:#12292E; --ink-soft:#3E585D;
    --ink-mute:#6C8286; --line:#D4DDD9; --line-2:#C4D0CC; --accent:#0E7C8B; --accent-2:#0B5561;
    --warm:#C97F2C; --warm-soft:#DE9236; --nature:#4E7C59; --baignade:#1592B0; --village:#B87038; --suisse:#BE443B;
    --shadow:0 1px 2px rgba(18,41,46,.05), 0 12px 30px -18px rgba(18,41,46,.28);
    --shadow-lift:0 2px 4px rgba(18,41,46,.06), 0 22px 44px -22px rgba(18,41,46,.38);
  }
  :root[data-theme="dark"] {
    --ground:#08171B; --surface:#0E2429; --surface-2:#12303699; --ink:#E8F0EE; --ink-soft:#AAC0C2;
    --ink-mute:#7B9296; --line:#1D3A40; --line-2:#244851; --accent:#35B0C1; --accent-2:#6FD3E0;
    --warm:#E6A24A; --warm-soft:#E6A24A; --nature:#74A883; --baignade:#46B7D4; --village:#D69B6A; --suisse:#DE6A60;
    --shadow:0 1px 2px rgba(0,0,0,.30), 0 16px 34px -20px rgba(0,0,0,.7);
    --shadow-lift:0 2px 6px rgba(0,0,0,.36), 0 26px 50px -22px rgba(0,0,0,.8);
  }

  /* le fond de page vit sur html : posé sur body il remonterait au canevas
     et masquerait la couche décorative en z-index négatif */
  html { background: var(--ground); }
  body {
    font-family: var(--font-sans);
    background: transparent;
    color: var(--ink);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }

  h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; text-wrap: balance; margin: 0; letter-spacing: -0.015em; }
  /* Bodoni a des déliés très fins : en très grand on peut resserrer, en petit il faut de la graisse. */
  .hero h1, .intro-title, .pagehead h1 { font-weight: 600; letter-spacing: -0.025em; }
  .tl-date, .card h3, .lex-it, .ql .t, .day-card h3, .m-content h3, .pop-t, .trip-stat .v, .fact .v, .info-card .v { font-weight: 600; }
  .brand { letter-spacing: -0.005em; }
  p { margin: 0; }
  a { color: inherit; }

  .eyebrow {
    font-family: var(--font-sans);
    font-size: .74rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .16em; color: var(--accent);
  }
  .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  /* ---------- Sticky nav ---------- */
  .topbar {
    position: sticky; top: 0; z-index: 40;
    background: var(--chrome-bg);
    backdrop-filter: var(--chrome-blur);
    -webkit-backdrop-filter: var(--chrome-blur);
    /* séparation en ombre et non en bordure : une bordure ajouterait 1px à la
       hauteur du header, le bandeau collé à 56px le chevaucherait, et les deux
       fonds translucides se superposeraient en un filet plus sombre. */
    border-bottom: none;
    box-shadow: 0 1px 0 var(--line);
    transition: box-shadow .28s ease;
  }
  /* Une fois les filtres collés dessous, les deux ne forment qu'une surface.
     On passe en fond PLEIN des deux côtés : deux éléments voisins portant
     chacun un backdrop-filter échantillonnent des zones différentes et ne
     coïncident jamais tout à fait, ce qui laisse un filet à la jonction. */
  html.chrome-merged .topbar {
    box-shadow: none;
    background: var(--ground);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .topbar .wrap { display: flex; align-items: center; gap: 16px; height: 56px; }
  .brand { font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem; white-space: nowrap; text-decoration: none; color: var(--ink); transition: color .15s; }
  .brand:hover { color: var(--accent); }
  .brand .dot { color: var(--warm-soft); }
  .navlinks { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
  .navlinks::-webkit-scrollbar { display: none; }
  .navlinks a {
    text-decoration: none; color: var(--ink-soft); font-size: .84rem; font-weight: 500;
    padding: 6px 11px; border-radius: 999px; white-space: nowrap; transition: color .15s, background .15s;
  }
  .navlinks a:hover { color: var(--ink); background: var(--surface-2); }
  .navlinks a[aria-current="page"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
  .theme-btn {
    flex: none; display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
    color: var(--ink-soft); cursor: pointer; transition: color .15s, border-color .15s;
  }
  .theme-btn:hover { color: var(--accent); border-color: var(--accent); }
  .theme-btn svg { width: 17px; height: 17px; }
  .theme-btn .moon { display: none; }
  :root[data-theme="dark"] .theme-btn .sun  { display: none; }
  :root[data-theme="dark"] .theme-btn .moon { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-btn .sun  { display: none; }
    :root:not([data-theme="light"]) .theme-btn .moon { display: block; }
  }

  /* ---------- Hero ---------- */
  .hero { position: relative; overflow: hidden; background: #0A2A31; color: #EAF5F4; isolation: isolate; }
  .hero-slides { position: absolute; inset: 0; z-index: 0; }
  .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease; will-change: opacity; }
  .hero-slide.on { opacity: 1; }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(102deg, rgba(6,19,23,.93) 0%, rgba(7,23,28,.76) 40%, rgba(7,23,28,.44) 72%, rgba(7,23,28,.30) 100%),
      linear-gradient(0deg, rgba(6,17,20,.68) 0%, rgba(6,17,20,0) 44%),
      radial-gradient(120% 90% at 84% 6%, rgba(222,146,54,.18), transparent 52%);
    background-color: rgba(10,42,49,.18);
  }
  #topo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: .26; pointer-events: none; }
  .hero .wrap {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100dvh - 56px);
  padding-top: clamp(48px, 7vh, 90px); padding-bottom: clamp(34px, 6vh, 74px);
}
@media (max-height: 620px) {
  .hero .wrap { min-height: 0; padding-top: clamp(38px, 6vh, 64px); padding-bottom: clamp(30px, 5vh, 56px); }
}
  .hero .eyebrow { color: #7FE0EA; }
  .hero h1 {
    color: #F3FAF9; margin: 14px 0 0; line-height: 1.0;
    font-size: clamp(2.5rem, 6.4vw, 4.7rem);
  }
  .hero .lede {
    margin-top: 18px; max-width: 30ch; font-size: clamp(1.02rem, 2vw, 1.24rem);
    color: #BFDBDA; line-height: 1.5;
  }
  .hero .lede b { color: #EAF5F4; font-weight: 600; }

  .facts { display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: 30px; border-top: 1px solid rgba(191,219,218,.22); padding-top: 22px; }
  .fact { flex: 1 1 140px; padding-right: 18px; }
  .fact .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: #7FB6BC; }
  .fact .v { font-family: var(--font-serif); font-size: 1.16rem; margin-top: 4px; color: #EAF5F4; }

  .countbox {
    margin-top: 30px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 13px;
    background: linear-gradient(150deg, rgba(11,42,49,.55), rgba(6,26,31,.40));
    border: 1px solid rgba(127,224,234,.20);
    border-radius: 18px; padding: 15px 18px 16px; backdrop-filter: blur(6px);
  }
  .cd-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .2em; color: #86DFEA; font-weight: 600; }
  .cd-units { display: flex; gap: 8px; }
  .cd-cell {
    min-width: 64px; text-align: center; padding: 9px 10px 8px; border-radius: 12px;
    background: rgba(127,224,234,.08); border: 1px solid rgba(127,224,234,.13);
  }
  .cd-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.8rem; font-weight: 600; color: #F3FAF9; line-height: 1; letter-spacing: -.01em; }
  .cd-unit { display: block; font-size: .56rem; text-transform: uppercase; letter-spacing: .14em; color: #83B5BB; margin-top: 8px; }
  .cd-msg { font-family: var(--font-serif); font-size: 1.2rem; color: #F3FAF9; padding: 2px 0; }

  /* ---------- Sections ---------- */
  section { padding: clamp(48px, 7vw, 84px) 0; }
  .sec-head { max-width: 62ch; margin-bottom: clamp(26px, 4vw, 40px); }
  .sec-head h2 { font-size: clamp(1.75rem, 3.6vw, 2.55rem); margin-top: 10px; }
  .sec-head p { margin-top: 12px; color: var(--ink-soft); font-size: 1.04rem; }

  .divider { height: 1px; background: var(--line); border: 0; margin: 0; }

  /* ---------- Voyage ---------- */
  .voyage-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(20px, 3vw, 34px); align-items: start; }
  .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
  .route-head { padding: 17px clamp(16px, 2.4vw, 24px) 15px; border-bottom: 1px solid var(--line); }
  .route-head h2 { font-size: 1.18rem; line-height: 1.2; }
  .route-head p { margin: 5px 0 0; font-size: .78rem; font-weight: 500; letter-spacing: .02em; color: var(--accent); }
  .route-body { padding: 20px clamp(16px, 2.4vw, 24px) 22px; }
  .route-path { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; }
  .route-path li { display: inline-flex; align-items: center; font-size: .9rem; }
  .route-path li .stop { padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink); white-space: nowrap; }
  .route-path li .stop.key { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-2); font-weight: 600; }
  .route-path li .stop.tunnel, .route-path li .stop.col { background: color-mix(in srgb, var(--warm-soft) 20%, var(--surface)); color: var(--warm); font-weight: 600; }
  .route-path li::after { content: "›"; color: var(--ink-mute); padding: 0 4px; }
  .route-path li:last-child::after { content: ""; padding: 0; }
  .route-note { margin-top: 16px; font-size: .92rem; color: var(--ink-soft); line-height: 1.55; border-left: 2px solid var(--accent); padding-left: 12px; }

  .trip-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
  .trip-stat { background: var(--surface); padding: 16px 18px; }
  .trip-stat .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-mute); }
  .trip-stat .v { font-family: var(--font-serif); font-size: 1.5rem; margin-top: 5px; }
  .trip-stat .v small { font-family: var(--font-sans); font-size: .8rem; color: var(--ink-mute); font-weight: 500; }
  .checklist { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
  .checklist li { display: flex; gap: 11px; font-size: .93rem; color: var(--ink-soft); line-height: 1.5; }
  .checklist li b { color: var(--ink); font-weight: 600; }
  .checklist .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }

  /* ---------- Essentiel ---------- */
  .info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .info-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 20px; box-shadow: var(--shadow); }
  .info-card .k { display: flex; align-items: center; gap: 8px; font-size: .7rem; text-transform: uppercase; letter-spacing: .13em; color: var(--accent); font-weight: 600; }
  .info-card .k .ic { width: 15px; height: 15px; }
  .info-card .v { font-family: var(--font-serif); font-size: 1.16rem; margin-top: 9px; line-height: 1.25; }
  .info-card .d { margin-top: 6px; font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }

  /* ---------- Activités ---------- */
  .act-toolbar { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
    font-family: var(--font-sans); font-size: .86rem; font-weight: 550;
    padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid var(--line-2);
    background: var(--surface); color: var(--ink-soft); transition: all .15s;
  }
  .chip .swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--accent)); }
  .chip:hover { border-color: var(--c, var(--accent)); color: var(--ink); }
  .chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
  .chip[aria-pressed="true"] .swatch { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--accent)) 45%, transparent); }
  .sortwrap { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-mute); }
  .segmented { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; border: 1px solid var(--line); }
  .segmented button {
    font-family: var(--font-sans); font-size: .82rem; font-weight: 550; cursor: pointer;
    border: none; background: transparent; color: var(--ink-mute); padding: 6px 14px; border-radius: 999px; transition: all .15s;
  }
  .segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

  .act-meta { font-size: .84rem; color: var(--ink-mute); margin: 4px 0 22px; }

  .act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
  .card {
    position: relative; display: flex; flex-direction: column; background: var(--surface);
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow);
    border-top: 3px solid var(--c); transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
  }
  .card-media { height: 158px; background: var(--surface-2); overflow: hidden; }
  .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
  .card:hover .card-media img { transform: scale(1.05); }
  .card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .card-cat { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--c); display: inline-flex; align-items: center; gap: 6px; }
  .card-cat .swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
  .card-time { text-align: right; flex: none; }
  .card-time .t { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.32rem; font-weight: 600; color: var(--ink); line-height: 1; }
  .card-time .km { display: block; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-mute); margin-top: 5px; }
  .card h3 { font-size: 1.24rem; margin-top: 13px; line-height: 1.15; }
  .card .desc { margin-top: 8px; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; flex: 1; }
  .card .tag { align-self: flex-start; margin-top: 14px; font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 26%, transparent); }
  .card.hidden { display: none; }

  /* ---------- Programme (timeline) ---------- */
  .timeline { list-style: none; margin: 0; padding: 0; max-width: 880px; }
  .tl-day { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding-bottom: 20px; }
  .tl-rail { position: relative; display: flex; justify-content: center; }
  .tl-rail::before { content: ""; position: absolute; top: 6px; bottom: -20px; left: 50%; width: 2px; background: var(--line-2); transform: translateX(-50%); }
  .tl-day:last-child .tl-rail::before { display: none; }
  .tl-num { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; background: var(--surface); border: 2px solid var(--c, var(--accent)); color: var(--c, var(--accent)); font-family: var(--font-mono); font-weight: 600; font-size: .9rem; display: grid; place-items: center; box-shadow: var(--shadow); }
  .tl-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--accent)); border-radius: 14px; box-shadow: var(--shadow); padding: 15px 18px 16px; }
  .tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
  .tl-when { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .tl-date { font-family: var(--font-serif); font-size: 1.16rem; font-weight: 600; }
  .tl-theme { color: var(--ink-soft); font-size: .93rem; }
  .tl-badge { flex: none; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 28%, transparent); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
  .tl-items { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
  .tl-item { display: flex; gap: 12px; align-items: baseline; padding: 4px 0; }
  .tl-item .tc { flex: none; width: 66px; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .7rem; color: var(--ic, var(--ink-mute)); border: 1px solid color-mix(in srgb, var(--ic, var(--ink-mute)) 40%, transparent); background: color-mix(in srgb, var(--ic, var(--ink-mute)) 10%, transparent); padding: 3px 6px; border-radius: 999px; }
  .tl-item .tdot { flex: none; width: 66px; display: flex; justify-content: center; align-items: center; align-self: center; }
  .tl-item .tdot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ic, var(--ink-mute)); }
  .tl-item .tx { font-size: .93rem; color: var(--ink-soft); line-height: 1.45; }
  .tl-note { margin-top: 12px; font-size: .86rem; color: var(--ink-soft); font-style: italic; border-left: 2px solid var(--c, var(--accent)); padding-left: 11px; line-height: 1.5; }
  @media (max-width: 560px) {
    .tl-day { grid-template-columns: 38px 1fr; gap: 12px; }
    .tl-num { width: 34px; height: 34px; font-size: .76rem; }
    .tl-item { gap: 9px; }
    .tl-item .tc, .tl-item .tdot { width: 56px; }
  }

  /* ---------- Variantes (jours de pluie) ---------- */
  .day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
  .day-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
  .day-card .badge { align-self: flex-start; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--warm); background: color-mix(in srgb, var(--warm-soft) 14%, var(--surface)); padding: 4px 10px; border-radius: 999px; }
  .day-card h3 { font-size: 1.28rem; margin-top: 12px; }
  .day-steps { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 0; }
  .day-steps li { position: relative; padding: 0 0 15px 30px; font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }
  .day-steps li::before {
    counter-increment: step; content: counter(step); position: absolute; left: 0; top: -1px;
    width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); color: var(--accent);
    font-family: var(--font-mono); font-size: .72rem; font-weight: 600; display: grid; place-items: center;
  }
  .day-steps li::after { content: ""; position: absolute; left: 9.5px; top: 20px; bottom: 4px; width: 1px; background: var(--line-2); }
  .day-steps li:last-child { padding-bottom: 0; }
  .day-steps li:last-child::after { display: none; }

  /* ---------- Lexique ---------- */
  .lex-toolbar { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .lex-search { flex: 1 1 200px; max-width: 300px; font-family: var(--font-sans); font-size: .9rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 16px; transition: border-color .15s; }
  .lex-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
  .lex-search::placeholder { color: var(--ink-mute); }
  .lex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
  .lex-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--accent)); border-radius: 12px; padding: 13px 16px; box-shadow: var(--shadow); }
  .lex-fr { font-size: .78rem; color: var(--ink-mute); }
  .lex-it { font-family: var(--font-serif); font-size: 1.18rem; font-weight: 600; color: var(--ink); margin-top: 3px; line-height: 1.2; }
  .lex-pr { font-family: var(--font-mono); font-size: .76rem; color: var(--accent); margin-top: 6px; letter-spacing: .01em; }

  /* ---------- Footer ---------- */
  footer { padding: clamp(40px, 6vw, 64px) 0 56px; border-top: 1px solid var(--line); background: var(--surface); }
  footer .wrap { display: flex; flex-direction: column; gap: 26px; }
  .foot-main { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; }
  footer h3 { font-size: 1.5rem; }
  footer p { color: var(--ink-soft); font-size: .92rem; margin-top: 8px; max-width: 46ch; }
  footer .sign { font-family: var(--font-serif); font-style: italic; color: var(--warm); font-size: 1.1rem; }
  .foot-credit { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: baseline; }
  .foot-credit p { margin: 0; max-width: none; font-size: .84rem; color: var(--ink-mute); }
  .foot-credit a { color: var(--ink-soft); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--warm) 50%, transparent); padding-bottom: 1px; transition: color .15s ease, border-color .15s ease; }
  .foot-credit a:hover { color: var(--warm); border-bottom-color: var(--warm); }
  .foot-year { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--ink-mute); }
  /* ---------- Cliquable + liens carte ---------- */
  .card.is-clickable { cursor: pointer; }
  .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
  .card-foot .tag { margin-top: 0; }
  .map-link { flex: none; font-size: .72rem; font-weight: 600; color: var(--c, var(--accent)); text-decoration: none; padding: 4px 11px; border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 32%, transparent); border-radius: 999px; white-space: nowrap; transition: background .15s; }
  .map-link:hover { background: color-mix(in srgb, var(--c, var(--accent)) 12%, transparent); }
  .tl-day.is-clickable .tl-card { cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; }
  .tl-day.is-clickable:hover .tl-card { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
  /* aligné à droite à toutes les tailles ; width:fit-content garde la zone
     cliquable sur le texte seul plutôt que sur toute la largeur */
  .tl-more { display: block; width: fit-content; margin-left: auto; margin-top: 12px; font-size: .76rem; font-weight: 600; color: var(--c, var(--accent)); }

  /* ---------- Modales ---------- */
  .modal-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(6,17,20,.6); backdrop-filter: blur(6px); animation: mfade .2s ease; }
  .modal-overlay[hidden] { display: none; }
  @keyframes mfade { from { opacity: 0; } to { opacity: 1; } }
  /* c'est le corps qui défile, pas la modale : sinon le bouton de fermeture,
     positionné en absolu, s'en irait avec le contenu */
  .modal { position: relative; width: min(680px, 100%); max-height: 88vh; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: var(--shadow-lift); animation: mrise .25s ease; }
  .modal-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  @keyframes mrise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .modal-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 999px; border: none; background: rgba(6,17,20,.5); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
    display: grid; place-items: center;
    /* flou + liseré : lisible aussi bien sur une photo claire que sombre */
    backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
    border: 1px solid rgba(255,255,255,.24); box-shadow: 0 2px 10px -3px rgba(6,17,20,.5);
    transition: background .15s, transform .15s; }
  .modal-close:hover { background: rgba(6,17,20,.8); }
  .m-media { height: 240px; background: var(--surface-2); }
  .m-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .m-content { padding: 22px clamp(18px,3vw,28px) 26px; display: flex; flex-direction: column; }
  .m-cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--c, var(--accent)); display: inline-flex; align-items: center; gap: 7px; }
  .m-cat .swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); }
  .m-content h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 8px; }
  .m-theme { color: var(--ink-soft); font-size: 1.05rem; margin-top: 4px; }
  .m-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
  .m-meta .m-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 600; color: var(--ink); }
  .m-meta .m-km { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-mute); }
  .m-desc { margin-top: 14px; color: var(--ink-soft); line-height: 1.6; }
  .m-btn { align-self: flex-start; margin-top: 18px; font-size: .88rem; font-weight: 600; color: #fff; background: var(--accent); padding: 10px 17px; border-radius: 999px; text-decoration: none; }
  .m-btn:hover { background: var(--accent-2); }
  .m-map { width: 100%; height: 300px; border: 0; border-radius: 12px; margin-top: 18px; background: var(--surface-2); }
  .m-day .m-items { margin-top: 14px; }
  .m-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 18px; }
  .m-thumb { position: relative; border: none; padding: 0; cursor: pointer; border-radius: 10px; overflow: hidden; height: 92px; background: var(--surface-2); }
  .m-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
  .m-thumb:hover img { transform: scale(1.06); }
  .m-thumb span { position: absolute; left: 0; right: 0; bottom: 0; font-size: .66rem; color: #fff; background: linear-gradient(0deg, rgba(6,17,20,.82), transparent); padding: 16px 8px 5px; text-align: left; line-height: 1.2; }

  /* ---------- Ergonomie tactile & navigation mobile ---------- */
  body { -webkit-tap-highlight-color: transparent; }

  .modal-grab { display: none; }
  @keyframes msheet { from { transform: translateY(100%); } to { transform: none; } }
  @media (max-width: 640px) {
    .modal-overlay { align-items: end; padding: 0; }
    .modal { width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; animation: msheet .32s cubic-bezier(0.22, 1, 0.36, 1); }
    .modal-grab { display: block; position: absolute; top: 8px; left: 0; right: 0; height: 8px; z-index: 5; touch-action: none; cursor: grab; }
    .modal-grab::before { content: ""; display: block; width: 42px; height: 5px; margin: 0 auto; border-radius: 999px; background: rgba(150, 150, 150, .9); }
    .m-media { touch-action: none; }
    .modal-close { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 1.5rem; }
    .m-content { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
    .m-map { height: 260px; }
  }

  @media (max-width: 820px) {
    .chip, .segmented button { min-height: 42px; }
    /* la nav du haut disparaît au profit de la barre d'onglets :
       le bouton de thème doit alors se caler seul contre le bord droit */
    .theme-btn { width: 40px; height: 40px; margin-left: auto; }
    .modal-close { width: 42px; height: 42px; }
    .card-foot { margin-top: 16px; gap: 10px; }
    .map-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; font-size: .78rem; }
    .lex-search { min-height: 44px; }
    .m-btn { min-height: 46px; display: inline-flex; align-items: center; }
    .tl-more { padding: 6px 0; }
  }
  @media (hover: none) {
    .card.is-clickable:hover { transform: none; box-shadow: var(--shadow); }
    .card.is-clickable:active { transform: scale(.985); }
    .tl-day.is-clickable:hover .tl-card { transform: none; box-shadow: var(--shadow); }
    .tl-day.is-clickable:active .tl-card { transform: scale(.99); }
    .chip:active, .segmented button:active, .map-link:active, .m-btn:active,
    .theme-btn:active, .modal-close:active, .m-thumb:active { transform: scale(.94); }
  }
  @media (prefers-reduced-motion: reduce) {
    .modal { animation: none !important; }
  }

  /* ---------- Reveal (progressive enhancement : visible par défaut) ---------- */
  .reveal { transition: opacity .6s ease, transform .6s ease; }
  html.anim .reveal { opacity: 0; transform: translateY(16px); }
  html.anim .reveal.in { opacity: 1; transform: none; }

  /* pas de border-radius ici : il écrasait l'arrondi propre de chaque élément
     (le bouton rond de fermeture devenait un carré une fois focalisé) */
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .card { transition: none; }
    * { scroll-behavior: auto !important; }
  }
  html { scroll-behavior: smooth; }

  @media (max-width: 820px) {
    .voyage-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 460px) {
    .countbox { display: flex; width: 100%; }
    .cd-units { width: 100%; gap: 6px; }
    .cd-cell { min-width: 0; flex: 1; padding: 8px 4px; }
    .cd-num { font-size: 1.5rem; }
    .facts { gap: 16px 0; }
    .fact { flex-basis: 45%; }
  }

/* ================================================================
   Multi-pages : en-tête de page, accès rapides, barre d'onglets
   ================================================================ */

/* --- En-tête des pages internes --- */
.pagehead { position: relative; overflow: hidden; background: #0A2A31; color: #EAF5F4; isolation: isolate; }
.pagehead-img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: scale(1.06); animation: phzoom 12s ease-out forwards; }
@keyframes phzoom { to { transform: scale(1); } }
.pagehead::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(6,19,23,.93) 0%, rgba(7,23,28,.78) 46%, rgba(7,23,28,.42) 100%),
    linear-gradient(0deg, rgba(6,17,20,.55), rgba(6,17,20,0) 60%);
}
.pagehead .wrap {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* pleine page : la barre du haut est sticky et occupe déjà 56px du flux */
  min-height: calc(100dvh - 56px);
  padding-top: clamp(72px, 12vh, 150px);
  padding-bottom: clamp(34px, 6vh, 72px);
}
/* paysage sur téléphone : on relâche la contrainte pour ne pas écraser le texte */
@media (max-height: 540px) {
  .pagehead .wrap { min-height: 0; padding-top: clamp(40px, 8vh, 70px); padding-bottom: clamp(28px, 5vh, 48px); }
}
.pagehead .eyebrow { color: #7FE0EA; }
.pagehead h1 { color: #F3FAF9; margin: 14px 0 0; font-size: clamp(2.15rem, 5.4vw, 3.6rem); line-height: 1.02; }
.pagehead p { margin-top: 14px; max-width: 54ch; color: #C3DEDD; font-size: clamp(.98rem, 1.6vw, 1.1rem); line-height: 1.55; }

/* --- Accès rapides (accueil) --- */
.ql-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.ql {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  min-height: 178px; padding: 18px; border-radius: 16px; text-decoration: none; color: #F2FAF9;
  background: #0A2A31; border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .2s cubic-bezier(0.22,1,0.36,1), box-shadow .2s;
}
.ql-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transition: transform .55s cubic-bezier(0.22,1,0.36,1); }
.ql::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(4,15,18,.96) 0%, rgba(4,15,18,.9) 34%, rgba(5,18,21,.5) 66%, rgba(5,18,21,.24) 100%); }
.ql .k, .ql .t, .ql .d { position: relative; z-index: 2; }
.ql:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.ql:hover .ql-bg { transform: scale(1.07); }
.ql .k { font-size: .67rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 600; color: #A6ECF4; }
.ql .t { font-family: var(--font-serif); font-size: 1.42rem; font-weight: 600; margin-top: 5px; line-height: 1.15; }
.ql .d { font-size: .85rem; color: #C6DEDD; margin-top: 5px; line-height: 1.45; }

/* --- Barre d'onglets fixe (mobile) --- */
.tabbar { display: none; }
@media (max-width: 820px) {
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 9px 4px calc(7px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 28px -22px rgba(6,17,20,.6);
    /* Safari iOS décroche les éléments fixes pendant l'animation de sa barre
       d'outils. Les promouvoir sur leur propre couche règle le décollement. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 58px; padding: 5px 2px; border-radius: 13px; text-decoration: none;
    color: var(--ink-mute); font-size: .68rem; font-weight: 600; letter-spacing: .01em;
    transition: color .16s, background .16s;
  }
  .tab svg { width: 23px; height: 23px; stroke-width: 1.7; }
  .tab[aria-current="page"] { color: var(--accent); }
  .tab[aria-current="page"] .tab-ico { background: color-mix(in srgb, var(--accent) 15%, transparent); }
  .tab-ico { display: grid; place-items: center; width: 44px; height: 29px; border-radius: 999px; transition: background .18s; }
  .tab:active { transform: scale(.94); }
  .navlinks { display: none; }
}
@media (max-width: 360px) { .tab { font-size: .62rem; } }

/* --- Intro d'arrivée --- */
#intro[hidden] { display: none; }
#intro {
  position: fixed; inset: 0; z-index: 90; overflow: hidden;
  background: #061317; color: #F3FAF9;
  display: grid; place-items: center;
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1), opacity .7s ease;
}
#intro.done { transform: translateY(-101%); opacity: .55; pointer-events: none; }
.intro-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.14); animation: ibg 3.4s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes ibg { 0% { opacity: 0; transform: scale(1.14); } 40% { opacity: .5; } 100% { opacity: .42; transform: scale(1.02); } }
.intro-veil { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(6,19,23,.42), rgba(4,13,16,.93) 78%); }
.intro-inner { position: relative; z-index: 2; text-align: center; padding: 24px; }
.intro-rule { width: 0; height: 1px; margin: 0 auto 22px; background: linear-gradient(90deg, transparent, #7FE0EA, transparent); animation: irule 1.1s cubic-bezier(0.22,1,0.36,1) .15s forwards; }
@keyframes irule { to { width: min(280px, 62vw); } }
.intro-eyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .26em; color: #7FE0EA; opacity: 0; animation: ifade .8s ease .5s forwards; }
.intro-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.4rem, 8vw, 5rem); line-height: 1; margin: 16px 0 0; letter-spacing: -.02em; }
.intro-title span { display: block; overflow: hidden; }
.intro-title span i { display: block; font-style: normal; transform: translateY(105%); animation: irise 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.intro-title span:nth-child(1) i { animation-delay: .72s; }
.intro-title span:nth-child(2) i { animation-delay: .86s; }
@keyframes irise { to { transform: none; } }
.intro-sub { margin-top: 18px; font-size: clamp(.9rem, 2vw, 1.05rem); color: #B7D6D6; opacity: 0; animation: ifade .9s ease 1.5s forwards; }
.intro-count { margin-top: 26px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 600; color: #F3FAF9; opacity: 0; animation: ifade .8s ease 1.75s forwards; }
.intro-count small { display: block; font-family: var(--font-sans); font-size: .6rem; text-transform: uppercase; letter-spacing: .2em; color: #7FB6BC; margin-top: 8px; font-weight: 600; }
@keyframes ifade { to { opacity: 1; } }
.intro-skip {
  position: absolute; z-index: 3; bottom: calc(26px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: transparent; border: 1px solid rgba(127,224,234,.32); color: #A9CFD4;
  font-family: var(--font-sans); font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  padding: 10px 20px; min-height: 42px; border-radius: 999px; cursor: pointer;
  opacity: 0; animation: ifade .6s ease 2.1s forwards; transition: color .15s, border-color .15s;
}
.intro-skip:hover { color: #F3FAF9; border-color: #7FE0EA; }
html.intro-lock, html.intro-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .intro-bg, .intro-rule, .intro-eyebrow, .intro-title span i, .intro-sub, .intro-count, .intro-skip { animation: none !important; opacity: 1 !important; transform: none !important; width: min(280px,62vw); }
  #intro { transition: opacity .25s ease; }
  #intro.done { transform: none; opacity: 0; }
  .pagehead-img { animation: none; transform: none; }
  .ql, .ql-bg { transition: none; }
}

/* ================================================================
   Transitions entre pages, lieux cliquables, carte
   ================================================================ */

/* --- Transitions natives (Chrome, Safari 18+) --- */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.tabbar { view-transition-name: tabbar; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
::view-transition-old(root) { animation: vt-out .18s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .3s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* --- Lieux cliquables dans les cartes de repli --- */
.places { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.place {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600; color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  padding: 4px 12px 4px 4px; border-radius: 999px; min-height: 34px;
  transition: background .15s, border-color .15s, transform .15s;
}
.place:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); border-color: var(--accent); }
.place-th { flex: none; width: 24px; height: 24px; border-radius: 999px; background-size: cover; background-position: center; background-color: var(--surface-2); }
@media (max-width: 820px) { .place { min-height: 40px; font-size: .8rem; } }
@media (hover: none) { .place:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } .place:active { transform: scale(.95); } }

/* --- Page carte --- */
.map-wrap { position: relative; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
#map { height: clamp(380px, 62vh, 640px); width: 100%; background: var(--surface-2); z-index: 1; }
.leaflet-container { font-family: var(--font-sans); background: var(--surface-2); }
.map-pin {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(6,17,20,.42);
  background: var(--pc, var(--accent));
}
.map-pin b { transform: rotate(45deg); color: #fff; font-size: .62rem; font-weight: 700; font-family: var(--font-mono); }
.map-pin.home { width: 32px; height: 32px; border-width: 3px; background: var(--ink); }
.leaflet-popup-content-wrapper { border-radius: 14px; padding: 0; overflow: hidden; box-shadow: var(--shadow-lift); background: var(--surface); color: var(--ink); }
.leaflet-popup-content { margin: 0; width: 232px !important; }
.leaflet-popup-tip { background: var(--surface); }
.leaflet-popup-close-button { color: #fff !important; right: 6px !important; top: 6px !important; z-index: 3; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pop-img { height: 108px; background: var(--surface-2); background-size: cover; background-position: center; }
.pop-b { padding: 11px 13px 13px; }
.pop-cat { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--pc, var(--accent)); }
.pop-t { font-family: var(--font-serif); font-size: 1.06rem; font-weight: 600; margin-top: 3px; line-height: 1.2; }
.pop-m { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-mute); margin-top: 4px; }
.pop-a { display: flex; gap: 6px; margin-top: 10px; }
.pop-a button, .pop-a a {
  flex: 1; text-align: center; font-family: var(--font-sans); font-size: .74rem; font-weight: 600;
  padding: 8px 6px; min-height: 36px; border-radius: 999px; cursor: pointer; text-decoration: none; border: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.pop-a button { background: var(--accent); color: #fff; }
.pop-a button:hover { background: var(--accent-2); }
.pop-a a { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); }
.pop-a a:hover { border-color: var(--accent); color: var(--accent); }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: .8rem; color: var(--ink-soft); }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--lc); display: inline-block; }

/* --- Bandeau hors ligne --- */
.offline-bar {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(-140%); z-index: 70;
  top: calc(56px + 10px); padding: 9px 18px; border-radius: 999px;
  background: var(--ink); color: var(--ground); font-size: .8rem; font-weight: 600;
  box-shadow: var(--shadow-lift); white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .3s cubic-bezier(0.16,1,0.3,1), opacity .25s ease, visibility 0s linear .25s;
}
.offline-bar.on {
  transform: translateX(-50%) translateY(0);
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform .3s cubic-bezier(0.16,1,0.3,1), opacity .25s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .place, .offline-bar { transition: none; }
}

/* --- Deux colonnes sur mobile pour les activités et le lexique --- */
@media (max-width: 820px) {
  .act-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-media { height: 108px; }
  .card-body { padding: 13px 13px 15px; }
  .card h3 { font-size: 1.02rem; margin-top: 10px; }
  .card .desc { font-size: .81rem; margin-top: 6px; }
  /* en 2 colonnes la ligne « catégorie + durée » est trop étroite :
     on empile, durée d'abord, catégorie sur une seule ligne en dessous */
  .card-top { flex-direction: column-reverse; align-items: flex-start; gap: 5px; }
  .card-time { text-align: left; display: flex; align-items: baseline; gap: 7px; }
  .card-time .t { font-size: 1.06rem; }
  .card-time .km { display: inline; font-size: .64rem; margin-top: 0; }
  .card-cat { font-size: .56rem; letter-spacing: .06em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .card-cat .swatch { width: 7px; height: 7px; }
  .card .tag { font-size: .63rem; padding: 3px 8px; }
  .card-foot { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; }
  .map-link { min-height: 40px; justify-content: center; }

  .lex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lex-card { padding: 11px 12px; }
  .lex-fr { font-size: .71rem; }
  .lex-it { font-size: 1rem; }
  .lex-pr { font-size: .69rem; margin-top: 5px; }
}
@media (max-width: 460px) {
  /* on garde une amorce de description, tronquée à 2 lignes */
  /* .desc est un enfant flex : -webkit-box y est neutralisé, on borne donc
     la hauteur à exactement deux interlignes pour éviter la ligne coupée */
  .card .desc {
    font-size: .78rem; line-height: 1.45; max-height: 1.45em; overflow: hidden;
    flex: 0 0 auto;
    -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  }
  .card-media { height: 100px; }
}

/* --- Invitation au défilement : un filet où descend une goutte de lumière --- */
.scrollcue {
  display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
  margin-top: clamp(26px, 4.5vh, 54px);
  transition: opacity .5s ease, transform .5s ease;
}
.scrollcue-label {
  font-family: var(--font-sans); font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .26em; color: rgba(198, 224, 224, .72);
}
.scrollcue-line { position: relative; width: 1px; height: clamp(40px, 7vh, 66px); background: rgba(191, 219, 218, .2); overflow: hidden; }
.scrollcue-line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 42%;
  background: linear-gradient(180deg, rgba(127,224,234,0), #8FE7F1);
  animation: cue-drip 2.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes cue-drip {
  0%   { transform: translateY(-110%); opacity: 0; }
  22%  { opacity: 1; }
  70%  { transform: translateY(240%); opacity: 0; }
  100% { transform: translateY(240%); opacity: 0; }
}
.scrollcue.gone { opacity: 0; transform: translateY(10px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .scrollcue-line::after { animation: none; top: auto; bottom: 0; height: 42%; opacity: .9; }
  .scrollcue { transition: opacity .2s ease; }
}

/* Sur mobile la barre d'onglets est fixée en bas : les en-têtes pleine page
   doivent réserver sa hauteur, sinon l'invitation au défilement passe dessous. */
@media (max-width: 820px) {
  .pagehead .wrap, .hero .wrap {
    padding-bottom: calc(80px + env(safe-area-inset-bottom) + clamp(20px, 3vh, 34px));
  }
}

/* Le hero porte plus de contenu que les autres en-têtes (compte à rebours + chiffres clés) :
   on le compacte sur mobile pour que tout, invitation comprise, tienne dans une page. */
@media (max-width: 820px) {
  .hero h1 { font-size: clamp(2.2rem, 8.5vw, 3.4rem); }
  .hero .lede { margin-top: 14px; font-size: 1rem; }
  .countbox { margin-top: 20px; padding: 12px 14px 13px; gap: 10px; }
  .cd-cell { padding: 7px 6px 6px; }
  .cd-num { font-size: 1.42rem; }
  .cd-unit { margin-top: 6px; }
  .facts { margin-top: 20px; padding-top: 16px; gap: 12px 0; }
  .fact .v { font-size: 1.04rem; }
  .hero .scrollcue { margin-top: clamp(14px, 2.2vh, 28px); }
  .hero .scrollcue-line { height: clamp(28px, 4.5vh, 44px); }
}
@media (max-width: 820px) and (max-height: 740px) {
  /* écrans courts : on retire l'invitation du hero, le contenu prime */
  .hero .scrollcue { display: none; }
}

/* ================================================================
   Équilibre des cartes, filtres collants, grilles, animations
   ================================================================ */

/* --- 1. Équilibre : tous les pieds de carte alignés en bas --- */
.act-grid { align-items: stretch; }
.card { height: 100%; }
.card-body { flex: 1; }
/* margin-top:auto pousse le pied en bas, padding-top garantit une respiration
   minimale quand la description remplit déjà toute la carte */
.card-foot { margin-top: auto; padding-top: 12px; }
/* la description occupe l'espace disponible sans pousser le pied */
.card .desc { flex: 0 1 auto; }
/* dégradé de fin de texte quand la description est tronquée */
.card .desc.is-clamped { position: relative; }
.card .desc.is-clamped::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 3.2em; height: 1.45em;
  background: linear-gradient(90deg, transparent, var(--surface) 62%);
}

/* --- 2. Filtres collants (lexique) --- */
/* bandeau de filtres collant, partagé par les pages Activités et Lexique */
/* Le bandeau est frère du .wrap, donc pleine largeur par construction :
   plus besoin de marges négatives, qui ne compensaient que le rembourrage
   et laissaient une dalle flottante sur les écrans larges. */
/* Au repos : rien du tout, les pastilles flottent sur la page.
   Une fois collé sous la barre du site, le fond apparaît en fondu, sinon
   les cartes qui défilent derrière rendent les libellés illisibles. */
.filters-sticky {
  position: sticky; top: 56px; z-index: 30;
  padding: 14px 0 12px;
  background: none;
  border-bottom: 1px solid transparent;
  transition: background-color .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.filters-sticky.stuck {
  background: var(--ground);
  border-bottom-color: var(--line);
  box-shadow: 0 14px 26px -24px rgba(6, 17, 20, .5);
}
@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: var(--ground); }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--ground); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* --- 3. L'essentiel sur deux colonnes --- */
@media (max-width: 820px) {
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .info-card { padding: 14px 14px 16px; }
  .info-card .k { font-size: .58rem; letter-spacing: .1em; }
  .info-card .v { font-size: 1rem; margin-top: 7px; }
  .info-card .d { font-size: .79rem; margin-top: 5px; line-height: 1.45; }
}

/* --- 4. Programme : pastille du jour centrée + accroche au défilement --- */
.tl-rail { align-items: center; }
.tl-rail::before { top: 0; bottom: -20px; }
html.snap-days { scroll-snap-type: y proximity; }
html.snap-days .tl-day { scroll-snap-align: center; scroll-margin-top: 68px; }
@media (min-width: 821px) { html.snap-days { scroll-snap-type: none; } }
@media (prefers-reduced-motion: reduce) { html.snap-days { scroll-snap-type: none; } }

/* --- 5. Invitation au défilement centrée --- */
.scrollcue { align-self: center; align-items: center; text-align: center; }

/* --- 6. Animations d'entrée en cascade --- */
html.anim .stagger > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s cubic-bezier(0.16, 1, 0.3, 1), transform .55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 42ms);
}
html.anim .stagger.in > * { opacity: 1; transform: none; }
/* la timeline arrive latéralement, elle se lit comme une progression */
html.anim .timeline.stagger > * { transform: translateY(14px); }

/* --- Fond animé : deux nappes de lumière très lentes --- */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(72px); opacity: .78; will-change: transform;
}
.ambient .a1 {
  width: 46vmax; height: 46vmax; left: -14vmax; top: -10vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%);
  animation: drift-a 46s ease-in-out infinite alternate;
}
.ambient .a2 {
  width: 38vmax; height: 38vmax; right: -12vmax; bottom: -8vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--warm-soft) 30%, transparent), transparent 70%);
  animation: drift-b 62s ease-in-out infinite alternate;
}
@keyframes drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(9vw, 7vh, 0) scale(1.14); }
}
@keyframes drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.08); }
  100% { transform: translate3d(-8vw, -6vh, 0) scale(1); }
}
:root[data-theme="dark"] .ambient span { opacity: .42; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ambient span { opacity: .42; } }
@media (prefers-reduced-motion: reduce) { .ambient span { animation: none; } }

/* ================================================================
   Pastille posée sur la photo + photos plus généreuses
   ================================================================ */
.card-media { position: relative; }
.tag-photo {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  margin: 0; max-width: calc(100% - 20px);
  font-size: .68rem; font-weight: 600; line-height: 1.25;
  padding: 5px 11px; border-radius: 999px;
  color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px);
  box-shadow: 0 2px 10px -4px rgba(6, 17, 20, .5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@supports not (backdrop-filter: blur(1px)) { .tag-photo { background: var(--surface); } }
/* le pied ne contient plus que le lien Maps */
.card-foot { justify-content: flex-end; }

@media (max-width: 820px) {
  /* format portrait 4/5 : c'est le rapport qui fait passer la photo
     au-dessus de la moitié de la hauteur de carte en 2 colonnes */
  /* photo carrée : avec la description retirée en 2 colonnes,
     elle dépasse largement la moitié de la carte sans l'allonger */
  .card-media { height: auto; aspect-ratio: 5 / 6; }
  /* une description tronquée à une ligne ne donnait qu'un fragment ("Votre ville de") :
     mieux vaut ne rien afficher, le texte complet est dans la fiche */
  .card .desc { display: none; }
  .tag-photo { top: 8px; left: 8px; font-size: .62rem; padding: 4px 9px; }

  /* « ~40 min » ne doit jamais se casser en deux lignes */
  .card-time { flex-wrap: wrap; row-gap: 2px; }
  .card-time .t { white-space: nowrap; }
  .card-time .km { white-space: normal; }

  /* corps resserré pour que la photo pèse davantage dans la carte */
  .card-body { padding: 12px 13px 14px; }
  .card h3 { margin-top: 8px; line-height: 1.12; }
  .card .desc { margin-top: 6px; }
  .card-foot { padding-top: 10px; }
}

.filters-sticky .act-toolbar, .filters-sticky .lex-toolbar { margin-bottom: 0; }
/* le compteur, désormais hors du bandeau, reprend sa respiration */
.act-meta { margin-top: 12px; }

/* Une fois accroché, le bandeau se compacte : les pastilles passent sur une
   seule rangée qui défile horizontalement, au lieu d'empiler trois lignes. */
@media (max-width: 820px) {
  .filters-sticky { transition: padding .22s ease, box-shadow .25s ease, border-color .25s ease; }
  .filters-sticky.stuck { padding-top: 9px; padding-bottom: 9px; }
  .filters-sticky.stuck .chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * clamp(18px, 4vw, 40px));
    padding: 2px clamp(18px, 4vw, 40px);
    scroll-snap-type: x proximity;
  }
  .filters-sticky.stuck .chips::-webkit-scrollbar { display: none; }
  .filters-sticky.stuck .chip { flex: 0 0 auto; scroll-snap-align: start; }
  .filters-sticky.stuck .act-toolbar,
  .filters-sticky.stuck .lex-toolbar { gap: 10px; }
  .filters-sticky.stuck .sortwrap { font-size: .76rem; }
  .filters-sticky.stuck .lex-search { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .filters-sticky { transition: none; } }

/* ================================================================
   Entrée progressive du hero et des en-têtes, cadre du décompte
   ================================================================ */

/* Les éléments du hero (ou de l'en-tête de page) apparaissent l'un après
   l'autre. Sur l'accueil, le déclenchement attend la disparition complète
   du rideau d'intro : voir l'événement "intro:done". */
html.anim .entrance > * { opacity: 0; transform: translateY(20px); }
html.anim .entrance.go > * {
  opacity: 1; transform: none;
  transition: opacity .75s cubic-bezier(0.16, 1, 0.3, 1),
              transform .75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 115ms);
}
/* le titre arrive avec un léger retard supplémentaire, il porte la page */
html.anim .entrance.go > h1 { transition-duration: .9s; }
/* décalage de départ propre à l'invitation : uniquement tant qu'elle est masquée,
   sinon elle resterait décalée de 14px en état final */
html.anim .entrance:not(.go) > .scrollcue { transform: translateY(14px); }

/* Le cadre du décompte : enfant d'un conteneur flex, il s'étirait sur toute
   la largeur. align-self l'empêche et le centre sur grand écran. */
@media (min-width: 821px) {
  .countbox { align-self: center; }
  .hero .wrap > .facts { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html.anim .entrance > *,
  html.anim .entrance.go > * { opacity: 1; transform: none; transition: none; }
}

/* ================================================================
   Réservations à l'avance
   ================================================================ */
.tag-resa {
  left: auto; right: 8px;
  color: #fff; background: color-mix(in srgb, var(--warm) 92%, black);
  border-color: color-mix(in srgb, var(--warm) 60%, white);
}
.m-resa {
  margin-top: 16px; padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--warm-soft) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warm-soft) 34%, transparent);
}
.m-resa-t {
  display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--warm);
}
.m-resa p { margin-top: 7px; font-size: .9rem; color: var(--ink-soft); line-height: 1.55; }
.m-resa a {
  display: inline-block; margin-top: 10px; font-size: .82rem; font-weight: 600;
  color: var(--warm); text-decoration: none; border-bottom: 1px solid currentColor;
}
.resa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.resa-card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--c, var(--warm)); border-radius: 14px;
  padding: 16px 18px 18px; box-shadow: var(--shadow);
}
.resa-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.resa-n { font-family: var(--font-serif); font-size: 1.16rem; font-weight: 600; }
.resa-t { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .76rem; color: var(--ink-mute); }
.resa-q { display: block; margin-top: 6px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c, var(--warm)); }
.resa-card p { margin-top: 8px; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }
.resa-card a {
  display: inline-block; margin-top: 11px; font-size: .82rem; font-weight: 600;
  color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor;
}
.resa-card a:hover { color: var(--accent-2); }
@media (max-width: 820px) { .resa-grid { grid-template-columns: 1fr; } }

/* ================================================================
   Aide à la décision sur les fiches
   ================================================================ */
.card-time .km .sep { opacity: .5; }
.m-infos {
  margin-top: 16px; display: flex; flex-direction: column; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.m-info { display: flex; gap: 14px; padding: 11px 14px; background: var(--surface); align-items: baseline; }
.m-info .k {
  flex: none; width: 116px; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-mute);
}
.m-info .v { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 560px) {
  .m-info { flex-direction: column; gap: 4px; }
  .m-info .k { width: auto; }
}