/* =================================================================
   JAPON 2026 - STYLES COMMUNS
   Fichier : assets/styles.css
   Design : carnet de voyage japonais traditionnel
   ================================================================= */

:root {
  color-scheme: light only;

  /* Palette principale */
  --washi: #f4ede2;
  --washi-dark: #e8dcc6;
  --washi-light: #faf5e9;
  --sumi: #1a1410;
  --sumi-soft: #2d251d;
  --vermillon: #c0392b;
  --vermillon-deep: #8b1e1e;
  --gold: #b8860b;
  --gold-light: #d4af37;
  --sky-ink: #3a5a6b;
  --moss: #5d6d4e;

  /* Catégories d'activités */
  --cat-culture: #8e6bb8;
  --cat-shopping: #d97e3a;
  --cat-detente: #6a9a6a;
  --cat-food: #c0392b;
  --cat-fun: #4a7ba6;
  --cat-iconic: #c9a227;

  /* Utilitaires */
  --grid: rgba(26, 20, 16, 0.08);
  --shadow-soft: 0 1px 3px rgba(26, 20, 16, 0.06);
  --shadow-elevated: 0 4px 16px rgba(26, 20, 16, 0.12);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  background: var(--washi);
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--washi) !important;
  color: var(--sumi) !important;
  line-height: 1.55;
  font-size: 14px;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  padding-top: 56px; /* espace pour la navbar fixe */
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 14px 60px;
}

/* =================================================================
   NAVBAR — barre de navigation en haut
   ================================================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--washi);
  border-bottom: 2px solid var(--sumi);
  box-shadow: var(--shadow-soft);
  z-index: 100;
  height: 56px;
}

.navbar-inner {
  max-width: 720px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
}

.navbar-brand {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin-right: auto;
  color: var(--sumi);
  text-decoration: none;
}

.navbar-brand:hover,
.navbar-brand:active {
  color: var(--sumi);
}

.navbar-brand .accent {
  color: var(--vermillon);
  font-style: italic;
}

.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
}

.nav-link {
  display: inline-block;
  padding: 7px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--sumi-soft);
  border-radius: 3px;
  font-weight: 600;
  transition: all 0.15s;
}

.nav-link:hover,
.nav-link:active {
  background: var(--washi-dark);
  color: var(--sumi);
}

.nav-link.active {
  background: var(--vermillon);
  color: white;
}

.nav-link.active:hover {
  background: var(--vermillon-deep);
}

/* =================================================================
   HEADER DE PAGE (titre principal de chaque page)
   ================================================================= */
.page-header {
  text-align: center;
  padding: 24px 0 16px;
  margin-bottom: 20px;
  border-bottom: 2px double var(--sumi);
}

.page-header .jp-tag {
  font-family: 'Shippori Mincho', serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--vermillon);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.page-header h1 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.page-header h1 .accent {
  color: var(--vermillon);
  font-style: italic;
}

.page-header .sub {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  color: var(--sumi-soft);
  font-size: 13px;
  margin-top: 6px;
}

/* =================================================================
   BLOC GÉNÉRIQUE (réutilisable)
   ================================================================= */
.bloc {
  background: white;
  border: 1px solid var(--grid);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}

.bloc h2 {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bloc h2::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--vermillon);
}

/* =================================================================
   FOOTER
   ================================================================= */
.page-footer {
  margin-top: 32px;
  text-align: center;
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  color: var(--sumi-soft);
  font-size: 10px;
  padding: 16px;
  border-top: 1px dashed var(--grid);
}

.page-footer .names {
  color: var(--vermillon);
  letter-spacing: 0.18em;
  font-size: 11px;
  margin-top: 6px;
}

/* =================================================================
   PLACEHOLDER (pour les pages encore vides)
   ================================================================= */
.placeholder {
  text-align: center;
  padding: 40px 20px;
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  color: var(--sumi-soft);
  font-size: 13px;
  border: 1px dashed var(--grid);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5);
}

.placeholder .ph-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 10px;
  opacity: 0.5;
}

/* =================================================================
   BLOC BIENVENUE (page Accueil)
   ================================================================= */
.welcome .welcome-lead {
  font-family: 'Shippori Mincho', serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sumi);
  margin-bottom: 8px;
}

.welcome .welcome-lead em {
  color: var(--vermillon);
  font-style: italic;
  font-weight: 600;
}

.welcome .welcome-sub {
  font-size: 13px;
  color: var(--sumi-soft);
  line-height: 1.55;
  margin-bottom: 14px;
}

.welcome .welcome-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px dashed var(--grid);
  font-family: 'Shippori Mincho', serif;
  font-size: 12px;
  color: var(--sumi-soft);
}

.welcome .meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.welcome .meta-num {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--vermillon);
  font-style: italic;
  line-height: 1;
}

.welcome .meta-sep {
  color: var(--vermillon);
  opacity: 0.5;
  font-weight: 700;
}

/* =================================================================
   COMMENT FONCTIONNE (accordéon natif <details>)
   ================================================================= */
.how-it-works {
  /* on retire le style par défaut */
}

.how-it-works summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 2px 0;
  user-select: none;
  -webkit-user-select: none;
}

.how-it-works summary::-webkit-details-marker {
  display: none;
}

.how-it-works .hiw-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--sumi);
  display: flex;
  align-items: center;
  gap: 8px;
}

.how-it-works .hiw-title::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--vermillon);
}

.how-it-works .hiw-chevron {
  font-family: 'JetBrains Mono', monospace;
  color: var(--vermillon);
  font-size: 14px;
  transition: transform 0.2s ease;
}

.how-it-works[open] .hiw-chevron {
  transform: rotate(-180deg);
}

.how-it-works .hiw-body {
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px dashed var(--grid);
}

.how-it-works .hiw-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.55;
}

.how-it-works .hiw-row strong {
  color: var(--vermillon);
  font-weight: 700;
}

.how-it-works .hiw-tag {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--washi);
  background: var(--sumi);
  padding: 3px 6px;
  border-radius: 2px;
  letter-spacing: 0.05em;
  margin-top: 1px;
}

.how-it-works .hiw-divider {
  height: 1px;
  background: var(--grid);
  margin: 12px 0;
}

.how-it-works .hiw-note {
  font-size: 12px;
  color: var(--sumi-soft);
  line-height: 1.55;
  margin-bottom: 6px;
}

.how-it-works .hiw-note strong {
  color: var(--sumi);
}

/* =================================================================
   BLOC AUJOURD'HUI / COUNTDOWN (page Accueil)
   ================================================================= */
.today-bloc {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.today-state {
  padding: 16px;
}

/* AVANT LE DÉPART : countdown */
.today-before {
  background: linear-gradient(135deg, var(--vermillon) 0%, var(--vermillon-deep) 100%);
  color: var(--washi);
  text-align: center;
}

.today-before .today-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 237, 226, 0.7);
  margin-bottom: 8px;
}

.today-before .today-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.today-before .today-num {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-style: italic;
  font-size: 48px;
  line-height: 1;
  color: white;
  letter-spacing: -0.02em;
}

.today-before .today-meta {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(244, 237, 226, 0.85);
}

/* Countdown vivant à la seconde — 4 cellules J/H/M/S */
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 4px 0 14px;
}

.cd-cell {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(244, 237, 226, 0.18);
  border-radius: 4px;
  padding: 10px 4px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.cd-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: white;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.cd-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 237, 226, 0.7);
  margin-top: 4px;
}

/* Légère pulsation sur la cellule des secondes pour signifier le live */
.cd-cell-sec .cd-num {
  animation: cd-pulse 1s ease-in-out infinite;
}

@keyframes cd-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

@media (max-width: 480px) {
  .cd-num { font-size: 24px; }
  .cd-lbl { font-size: 8px; }
}

.today-before .today-line {
  font-family: 'Shippori Mincho', serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--washi);
  margin-bottom: 12px;
  padding: 0 6px;
}

.today-before .today-line strong {
  color: white;
  font-weight: 700;
}

.today-before .today-checklist {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 12px;
  border-top: 1px dashed rgba(244, 237, 226, 0.25);
}

.today-before .today-check {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(244, 237, 226, 0.85);
}

/* PENDANT LE VOYAGE */
.today-during {
  background: white;
  border-left: 4px solid var(--vermillon);
}

.today-during .today-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--grid);
  flex-wrap: wrap;
  gap: 6px;
}

.today-during .today-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: white;
  background: var(--vermillon);
  padding: 3px 8px;
  border-radius: 2px;
  font-weight: 700;
}

.today-during .today-date {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--sumi-soft);
}

.today-during .today-jour-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.today-during .today-jour-num {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 24px;
  color: white;
  background: var(--sumi);
  padding: 6px 12px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.today-during .today-ville-block {
  flex: 1;
  min-width: 0;
}

.today-during .today-ville-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--sumi);
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.today-during .today-ville-kanji {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--vermillon);
  opacity: 0.85;
}

.today-during .today-ville-progress {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--sumi-soft);
  margin-top: 3px;
}

.today-during .today-type-pill {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  color: white;
}

.today-during .today-type-pill[data-type="fixe"]    { background: var(--vermillon); }
.today-during .today-type-pill[data-type="libre"]   { background: var(--moss); }
.today-during .today-type-pill[data-type="transit"] { background: var(--sky-ink); }
.today-during .today-type-pill[data-type="mixte"]   { background: var(--gold); }

.today-during .today-apercu {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sumi);
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 2px solid var(--washi-dark);
}

.today-during .today-resas-list {
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.today-during .today-resas-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--washi-dark);
}

.today-during .today-resa {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 5px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--sumi);
}

.today-during .today-resa-heure {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--vermillon);
  min-width: 50px;
}

.today-during .today-resa-titre {
  flex: 1;
}

.today-during .today-resa-none {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  color: var(--sumi-soft);
  text-align: center;
  padding: 6px 0;
}

.today-during .today-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vermillon);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.15s;
}

.today-during .today-cta:hover {
  color: var(--vermillon-deep);
}

/* APRÈS LE VOYAGE */
.today-after {
  background: var(--washi-light);
  text-align: center;
  border: 1px dashed var(--washi-dark);
}

.today-after .today-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-bottom: 8px;
}

.today-after .today-num {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 36px;
  color: var(--sumi);
}

.today-after .today-meta {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--sumi-soft);
  margin-left: 8px;
}

.today-after .today-line {
  font-family: 'Shippori Mincho', serif;
  font-size: 13px;
  color: var(--sumi-soft);
  margin-top: 10px;
}

/* =================================================================
   BLOC REPÈRES JAPON — horloges live + convertisseur ¥/€
   ================================================================= */
.reperes-bloc .reperes-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--grid);
}

.repere-clock {
  text-align: center;
  padding: 10px 6px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 4px;
}

.repere-clock[data-tz="tokyo"] {
  background: linear-gradient(135deg, var(--vermillon) 0%, var(--vermillon-deep) 100%);
  border-color: var(--vermillon-deep);
  color: white;
}

.repere-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.85;
}

.repere-time {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.repere-date {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 10.5px;
  opacity: 0.85;
  margin-top: 4px;
}

.repere-diff {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--vermillon);
  background: white;
  border: 1px solid var(--washi-dark);
  border-radius: 999px;
  padding: 4px 10px;
  text-align: center;
}

/* === Convertisseur === */
.conv-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conv-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vermillon);
}

.conv-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.conv-field {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid var(--washi-dark);
  border-radius: 4px;
  transition: border-color 0.15s;
}

.conv-field:focus-within {
  border-color: var(--vermillon);
}

.conv-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 10px;
  color: var(--sumi);
  -webkit-appearance: none;
  appearance: none;
  font-variant-numeric: tabular-nums;
  /* éviter le zoom auto iOS au focus */
  font-size: max(16px, 18px);
}

.conv-input::-webkit-outer-spin-button,
.conv-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.conv-unit {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--vermillon);
  padding: 0 12px 0 4px;
}

.conv-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--vermillon);
  text-align: center;
}

.conv-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--sumi-soft);
}

.conv-meta strong {
  color: var(--sumi);
  font-weight: 700;
}

.conv-edit {
  background: transparent;
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 11px;
  color: var(--sumi-soft);
  transition: all 0.15s;
}

.conv-edit:hover {
  background: var(--vermillon);
  color: white;
  border-color: var(--vermillon);
}

.conv-rate-editor {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--sumi-soft);
}

.conv-rate-editor label {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.conv-rate-editor .conv-input {
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid var(--washi-dark);
  background: white;
  border-radius: 2px;
  max-width: 80px;
}

.conv-save {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  background: var(--vermillon);
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

@media (max-width: 480px) {
  .repere-time { font-size: 22px; }
  .conv-input { font-size: 16px; padding: 8px; }
  .conv-unit { font-size: 15px; padding: 0 8px 0 2px; }
}

/* =================================================================
   BLOC SAUVEGARDE — version DISCRÈTE en bas de page (accordéon replié)
   ================================================================= */
.backup-discrete {
  margin-top: 10px;
  margin-bottom: 14px;
  padding: 8px 4px;
  border-top: 1px dashed var(--grid);
}

.backup-discrete > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sumi-soft);
  opacity: 0.7;
  transition: opacity 0.15s;
}

.backup-discrete > summary::-webkit-details-marker { display: none; }

.backup-discrete > summary:hover,
.backup-discrete[open] > summary {
  opacity: 1;
  color: var(--vermillon);
}

.backup-discrete-chevron {
  font-size: 11px;
  transition: transform 0.2s;
}

.backup-discrete[open] .backup-discrete-chevron {
  transform: rotate(180deg);
}

.backup-discrete-body {
  padding: 10px 4px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--grid);
}

.backup-discrete-intro {
  font-size: 11.5px;
  font-style: italic;
  color: var(--sumi-soft);
  font-family: 'Shippori Mincho', serif;
  line-height: 1.5;
  margin-bottom: 12px;
  opacity: 0.9;
}

.backup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.backup-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--washi-dark);
  background: var(--washi-light);
  color: var(--sumi);
  text-align: left;
  transition: all 0.15s;
  font-family: 'Noto Sans JP', sans-serif;
}

.backup-btn:hover,
.backup-btn:active {
  background: white;
  border-color: var(--vermillon);
}

.backup-btn-ico {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vermillon);
  color: white;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.backup-btn-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.backup-btn-text strong {
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--sumi);
  line-height: 1.2;
}

.backup-btn-text small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--sumi-soft);
  line-height: 1.3;
}

/* Bouton import = label avec input file caché */
.backup-btn-import {
  cursor: pointer;
}

/* Options avancées (accordéon) */
.backup-advanced {
  margin-bottom: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--grid);
}

.backup-advanced > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sumi-soft);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.backup-advanced > summary::-webkit-details-marker { display: none; }

.backup-advanced > summary::before {
  content: '▸';
  color: var(--vermillon);
  transition: transform 0.2s;
}

.backup-advanced[open] > summary::before {
  transform: rotate(90deg);
}

.backup-advanced[open] > summary {
  margin-bottom: 8px;
}

.backup-link-btn {
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--sumi);
  background: transparent;
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  padding: 8px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.backup-link-btn:hover {
  background: var(--washi-light);
  border-color: var(--vermillon);
  color: var(--vermillon);
}

.backup-link-btn.danger:hover {
  background: var(--vermillon);
  border-color: var(--vermillon-deep);
  color: white;
}

/* Statut (succès / erreur) */
.backup-status {
  margin: 0;
  min-height: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--sumi-soft);
  transition: opacity 0.2s;
  padding-top: 6px;
  border-top: 1px dashed var(--grid);
}

.backup-status[data-type="success"] { color: var(--moss); }
.backup-status[data-type="error"]   { color: var(--vermillon); }

@media (max-width: 480px) {
  .backup-actions {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   BLOC TO-DO LIST
   ================================================================= */
.todo-bloc .todo-intro {
  font-size: 12px;
  color: var(--sumi-soft);
  margin-bottom: 14px;
  line-height: 1.5;
}

.todo-add {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.todo-input {
  flex: 1;
  min-width: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--washi-dark);
  background: var(--washi-light);
  color: var(--sumi);
  border-radius: 3px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.todo-input:focus {
  border-color: var(--vermillon);
  background: white;
}

.todo-input::placeholder {
  color: var(--sumi-soft);
  opacity: 0.55;
  font-style: italic;
}

.todo-add-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  font-family: 'Shippori Mincho', serif;
  font-size: 22px;
  font-weight: 700;
  color: white;
  background: var(--vermillon);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s;
  line-height: 1;
}

.todo-add-btn:hover,
.todo-add-btn:active {
  background: var(--vermillon-deep);
}

.todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px dashed var(--grid);
  font-size: 13.5px;
  line-height: 1.45;
  transition: opacity 0.15s;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--vermillon);
  cursor: pointer;
}

.todo-text {
  flex: 1;
  word-break: break-word;
  color: var(--sumi);
  transition: color 0.15s, text-decoration 0.15s;
}

.todo-item.is-done .todo-text {
  color: var(--sumi-soft);
  text-decoration: line-through;
  opacity: 0.55;
}

.todo-del {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 400;
  color: var(--sumi-soft);
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
  opacity: 0.5;
}

.todo-del:hover,
.todo-del:active {
  color: var(--vermillon);
  background: var(--washi-dark);
  opacity: 1;
}

.todo-empty {
  text-align: center;
  padding: 20px 10px;
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  color: var(--sumi-soft);
  font-size: 13px;
  opacity: 0.6;
}

.todo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--grid);
  gap: 10px;
}

.todo-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--sumi-soft);
  text-transform: uppercase;
}

.todo-clear-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sumi-soft);
  background: transparent;
  border: 1px solid var(--washi-dark);
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}

.todo-clear-btn:hover,
.todo-clear-btn:active {
  color: var(--vermillon);
  border-color: var(--vermillon);
  background: var(--washi-light);
}

/* =================================================================
   PAGE VILLES — cartes étapes (carnet de voyage)
   ================================================================= */
.villes-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ville-card {
  position: relative;
  background: white;
  border: 1px solid var(--grid);
  border-radius: 4px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.ville-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--vermillon);
  z-index: 2;
}

/* Summary cliquable (toujours visible) */
.ville-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 38px 16px 16px; /* room pour le chevron */
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.ville-card > summary::-webkit-details-marker { display: none; }

.ville-card > summary:hover .ville-name,
.ville-card[open] > summary .ville-name {
  color: var(--vermillon);
}

.ville-card[open] > summary {
  border-bottom: 1px dashed var(--grid);
}

.ville-card-chevron {
  position: absolute;
  right: 14px;
  top: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--vermillon);
  transition: transform 0.25s ease;
  pointer-events: none;
}

.ville-card[open] .ville-card-chevron {
  transform: rotate(180deg);
}

/* Petit "vibe" sous le titre dans le summary */
.ville-summary-vibe {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sumi-soft);
  margin: 6px 0 10px;
}

/* Footer du summary : jours + hotel résumé */
.ville-summary-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--grid);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--sumi-soft);
  text-transform: uppercase;
}

.ville-summary-meta .ville-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 2px;
  font-weight: 600;
  color: var(--vermillon);
}

.ville-summary-meta .ville-hotel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--sumi-soft);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  font-family: 'Noto Sans JP', sans-serif;
}

.ville-summary-meta .ville-hotel::before {
  content: '🏨';
  font-size: 11px;
}

/* Body : contenu détaillé révélé au tap */
.ville-card-body {
  padding: 14px 16px 16px;
}

.ville-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--grid);
}

.ville-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--washi);
  background: var(--sumi);
  padding: 3px 7px;
  border-radius: 2px;
}

.ville-dates {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--sumi-soft);
  text-align: right;
}

.ville-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--sumi);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.ville-kanji {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--vermillon);
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.ville-icone {
  font-size: 22px;
  margin-right: 4px;
  vertical-align: -2px;
}

/* Bloc hébergement (objet riche : nom + type + CI/CO + adresse + note) */
.ville-hebergement-bloc {
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--sumi);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.ville-hebergement-bloc strong {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--sumi);
}

.ville-hebergement-bloc .hb-type {
  font-style: italic;
  color: var(--sumi-soft);
}

.ville-hebergement-bloc .hb-ci,
.ville-hebergement-bloc .hb-co {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--vermillon);
  background: white;
  border: 1px solid var(--washi-dark);
  border-radius: 2px;
  padding: 1px 6px;
}

.ville-hebergement-bloc .hb-addr {
  width: 100%;
  font-size: 11.5px;
  font-style: italic;
  color: var(--sumi-soft);
}

.ville-hebergement-bloc .hb-note {
  width: 100%;
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--sumi-soft);
  padding-top: 4px;
  border-top: 1px dashed var(--washi-dark);
  margin-top: 2px;
}

.ville-hebergement-extra {
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--washi-dark);
  font-size: 11.5px;
  color: var(--sumi-soft);
}

/* Tags v1.1 : strings simples sans coloration par catégorie */
.ville-tag-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  color: var(--sumi-soft);
}

.ville-desc {
  font-family: 'Shippori Mincho', serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sumi);
  margin-bottom: 12px;
}

/* Tags d'identité (catégories dominantes) */
.ville-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}

.ville-tag-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: white;
  border: 1px solid currentColor;
}

.ville-tag-pill[data-cat="culture"]   { color: var(--cat-culture); }
.ville-tag-pill[data-cat="shopping"]  { color: var(--cat-shopping); }
.ville-tag-pill[data-cat="detente"]   { color: var(--cat-detente); }
.ville-tag-pill[data-cat="food"]      { color: var(--cat-food); }
.ville-tag-pill[data-cat="fun"]       { color: var(--cat-fun); }
.ville-tag-pill[data-cat="iconique"]  { color: var(--cat-iconic); }

/* Intro courte (italique mincho) */
.ville-intro {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sumi);
  margin-bottom: 14px;
  padding-left: 10px;
  border-left: 2px solid var(--washi-dark);
}

/* Section : titre */
.ville-section-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin: 14px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ville-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--grid);
}

/* Liste des highlights */
.ville-highlights {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.ville-highlights li {
  position: relative;
  padding: 6px 0 6px 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sumi);
  border-bottom: 1px dashed var(--grid);
}

.ville-highlights li:last-child {
  border-bottom: none;
}

.ville-highlights li::before {
  content: '─';
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--vermillon);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

/* =================================================================
   BANDEAU GLOBAL "Spots conquis" (haut de la page Villes)
   ================================================================= */
.spots-global-bar {
  margin-bottom: 14px;
}

.spots-global-inner {
  background: linear-gradient(135deg, var(--vermillon) 0%, var(--vermillon-deep) 100%);
  color: white;
  border-radius: 4px;
  padding: 12px 14px;
  box-shadow: var(--shadow-soft);
}

.spots-global-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.spots-global-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.9;
}

.spots-global-count {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 14px;
}

.spots-global-count strong {
  font-style: italic;
  font-size: 22px;
  font-weight: 800;
  margin-right: 2px;
}

.spots-global-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.spots-global-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, #ffc857 100%);
  border-radius: 3px;
  transition: width 0.35s ease;
}

.spots-global-pct {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 11px;
  margin-top: 6px;
  opacity: 0.9;
  text-align: right;
}

/* =================================================================
   PAGE VILLES — Section Spots photo & vidéo (par ville)
   Vignettes fermées (photo + nom + types) qui se déplient pour les conseils
   ================================================================= */
.spots-section {
  margin-bottom: 14px;
}

.spots-intro {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--sumi-soft);
  line-height: 1.5;
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 2px solid var(--washi-dark);
}

.spots-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Groupes de zones (touristique vs moins-connue) */
.spots-zone-group {
  margin-bottom: 14px;
}

.spots-zone-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-bottom: 8px;
  padding: 4px 8px;
  background: var(--washi-light);
  border-left: 3px solid var(--vermillon);
  border-radius: 0 3px 3px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.spots-zone-count {
  background: var(--vermillon);
  color: white;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
}

/* Pills "categorie" / "zone" / "cout" / "jour" sur chaque spot */
.spot-type[data-zone="touristique"] {
  background: var(--gold);
  color: white;
  border-color: var(--gold);
}

.spot-type[data-zone="moins-connue"] {
  background: var(--cat-culture);
  color: white;
  border-color: var(--cat-culture);
}

.spot-type[data-cat="temple-sanctuaire"] { background: var(--cat-culture); color: white; border-color: var(--cat-culture); }
.spot-type[data-cat="vue-panorama"]      { background: var(--sky-ink); color: white; border-color: var(--sky-ink); }
.spot-type[data-cat="rue-quartier"]      { background: var(--cat-shopping); color: white; border-color: var(--cat-shopping); }
.spot-type[data-cat="nature"]            { background: var(--moss); color: white; border-color: var(--moss); }
.spot-type[data-cat="architecture"]      { background: var(--sumi); color: white; border-color: var(--sumi); }
.spot-type[data-cat="plage"]             { background: #0891b2; color: white; border-color: #0891b2; }
.spot-type[data-cat="food-vlog"]         { background: var(--cat-food); color: white; border-color: var(--cat-food); }
.spot-type[data-cat="culture"]           { background: var(--cat-culture); color: white; border-color: var(--cat-culture); }

.spot-cout {
  background: var(--washi);
  color: var(--vermillon);
  font-weight: 700;
}

.spot-jour {
  background: var(--vermillon);
  color: white;
}

/* Tip vlog (mis en avant) */
.spot-tips {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3d0 100%);
  border-left: 3px solid var(--gold);
  padding: 8px 12px;
  border-radius: 0 3px 3px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sumi);
  margin: 6px 0;
}

.spot-tips strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 3px;
}

.spot-item {
  background: white;
  border: 1px solid var(--washi-dark);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.spot-item[open] {
  border-color: var(--vermillon);
  box-shadow: var(--shadow-soft);
}

.spot-item > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  display: grid;
  grid-template-columns: 64px 1fr 32px 22px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px 8px 8px;
  position: relative;
}

/* Vignette photo Wikipedia (lazy + cache) */
.spot-thumb {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.spot-thumb-placeholder {
  font-size: 26px;
  opacity: 0.55;
}

.spot-thumb.has-photo {
  border-color: var(--vermillon);
}

.spot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: spot-thumb-fadein 0.35s ease;
}

@keyframes spot-thumb-fadein {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}

.spot-item.is-done .spot-thumb {
  filter: saturate(0.3) brightness(1.02);
}

.spot-item.is-done {
  background: rgba(106, 154, 106, 0.06);
  border-color: var(--moss);
}

.spot-item.is-done .spot-photo {
  filter: saturate(0.4) brightness(0.95);
}

.spot-item.is-done .spot-name {
  text-decoration: line-through;
  text-decoration-color: var(--moss);
  text-decoration-thickness: 1.5px;
  opacity: 0.85;
}

/* Bouton checkbox "conquis" — rond vert qui s'allume quand validé */
.spot-check {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--washi-dark);
  color: transparent;
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 0;
  line-height: 1;
}

.spot-check:hover {
  border-color: var(--moss);
  color: var(--moss);
}

.spot-check.is-done {
  background: var(--moss);
  border-color: var(--moss);
  color: white;
  box-shadow: 0 0 0 2px rgba(106, 154, 106, 0.15);
}

.spots-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vermillon);
}

.spots-counter strong {
  font-size: 13px;
}

.spots-intro-text {
  margin-left: 4px;
  color: var(--sumi-soft);
  font-weight: 400;
  letter-spacing: 0;
}

.spot-item > summary::-webkit-details-marker { display: none; }

/* Photo en vignette à gauche */
.spot-photo {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--washi-light);
  flex-shrink: 0;
}

.spot-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
}

.spot-photo-credit {
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 0.05em;
  color: white;
  background: rgba(0, 0, 0, 0.55);
  padding: 1px 4px;
  border-radius: 2px 0 0 0;
  pointer-events: none;
}

/* Corps du summary (texte) */
.spot-summary-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spot-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--sumi);
  line-height: 1.25;
}

.spot-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.spot-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  color: var(--sumi-soft);
}

.spot-type[data-type="iconique"]   { background: var(--gold); color: white; border-color: var(--gold); }
.spot-type[data-type="cinematique"]{ background: var(--sumi); color: white; border-color: var(--sumi); }
.spot-type[data-type="tiktok"]     { background: #ff0050; color: white; border-color: #ff0050; }
.spot-type[data-type="goldenhour"] { background: #f59e0b; color: white; border-color: #d97706; }
.spot-type[data-type="nocturne"]   { background: #1e293b; color: white; border-color: #0f172a; }
.spot-type[data-type="portrait"]   { background: var(--cat-culture); color: white; border-color: var(--cat-culture); }
.spot-type[data-type="paysage"]    { background: var(--moss); color: white; border-color: var(--moss); }

.spot-desc {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--sumi-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.spot-item[open] .spot-desc {
  -webkit-line-clamp: unset;
  display: block;
}

.spot-chevron {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--vermillon);
  align-self: center;
  transition: transform 0.2s;
}

.spot-item[open] .spot-chevron {
  transform: rotate(180deg);
}

/* Body déplié */
.spot-body {
  padding: 10px 12px 12px;
  border-top: 1px dashed var(--grid);
  background: var(--washi-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spot-row {
  font-size: 12px;
  line-height: 1.5;
  color: var(--sumi);
}

.spot-row strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-right: 6px;
  display: inline-block;
}

.spot-conseils {
  list-style: none;
  margin: 0;
  padding: 0;
}

.spot-conseils li {
  position: relative;
  padding: 4px 0 4px 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sumi);
  border-bottom: 1px dashed var(--washi-dark);
}

.spot-conseils li:last-child { border-bottom: none; }

.spot-conseils li::before {
  content: '▸';
  position: absolute;
  left: 2px;
  top: 4px;
  color: var(--vermillon);
  font-size: 11px;
}

.spot-maps-btn {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 12px;
  background: var(--sumi);
  color: white;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.15s;
}

.spot-maps-btn:hover {
  background: var(--vermillon);
}

/* Actions sur un spot (Maps + Planifier) */
.spot-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.spot-plan-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 12px;
  background: var(--vermillon);
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.spot-plan-btn:hover { background: var(--vermillon-deep); }
.spot-plan-btn:active { transform: scale(0.97); }

/* Bouton planifier sur un resto */
.resto-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.resto-plan-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 11px;
  background: var(--vermillon);
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.resto-plan-btn:hover { background: var(--vermillon-deep); }
.resto-plan-btn:active { transform: scale(0.97); }

/* ============== MODALE PLANIFIER (depuis Villes) ============== */
.plan-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 20, 16, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  animation: planBackdropIn 0.18s ease-out;
}

@keyframes planBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 640px) {
  .plan-modal-backdrop {
    align-items: center;
  }
}

.plan-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--washi);
  border: 2px solid var(--sumi);
  border-radius: 6px;
  padding: 22px 20px 18px;
  box-shadow: 0 12px 48px rgba(26, 20, 16, 0.35);
  animation: planModalIn 0.22s ease-out;
  max-height: 90dvh;
  overflow-y: auto;
}

@keyframes planModalIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.plan-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--sumi);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-modal-close:hover { background: rgba(26, 20, 16, 0.08); }

.plan-modal-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-bottom: 6px;
}

.plan-modal-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--sumi);
  margin: 0 0 6px;
  padding-right: 28px;
  line-height: 1.25;
}

.plan-modal-lieu {
  font-size: 12px;
  color: var(--sumi-soft);
  margin-bottom: 16px;
}

.plan-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-modal-field > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sumi-soft);
}

.plan-modal-field input,
.plan-modal-field select,
.plan-modal-field textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 11px;
  border: 1.5px solid var(--washi-dark);
  border-radius: 4px;
  background: var(--washi-light);
  color: var(--sumi);
  width: 100%;
  box-sizing: border-box;
}

.plan-modal-field input:focus,
.plan-modal-field select:focus,
.plan-modal-field textarea:focus {
  outline: none;
  border-color: var(--vermillon);
}

.plan-modal-field textarea { resize: vertical; min-height: 50px; }

.plan-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.plan-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

.plan-modal-cancel,
.plan-modal-submit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  border: 1.5px solid var(--sumi);
  transition: background 0.15s, transform 0.1s;
}

.plan-modal-cancel {
  background: transparent;
  color: var(--sumi);
}
.plan-modal-cancel:hover { background: rgba(26, 20, 16, 0.06); }

.plan-modal-submit {
  background: var(--vermillon);
  color: white;
  border-color: var(--vermillon);
}
.plan-modal-submit:hover:not(:disabled) { background: var(--vermillon-deep); border-color: var(--vermillon-deep); }
.plan-modal-submit:disabled { opacity: 0.7; cursor: default; }
.plan-modal-submit:active:not(:disabled) { transform: scale(0.97); }

.plan-modal-toast {
  margin-top: 14px;
  padding: 12px 14px;
  background: #e7f3e0;
  border: 1.5px solid var(--moss);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: planToastIn 0.2s ease-out;
}

@keyframes planToastIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.plan-modal-toast-line {
  font-size: 13px;
  color: var(--sumi);
}
.plan-modal-toast-line strong {
  color: var(--moss);
}
.plan-modal-toast-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vermillon);
  text-decoration: none;
  align-self: flex-start;
}
.plan-modal-toast-link:hover { text-decoration: underline; }

.plan-modal-toast-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2px;
}

.plan-modal-toast-remove {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vermillon-deep);
  background: transparent;
  border: 1.5px solid var(--vermillon-deep);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.plan-modal-toast-remove:hover {
  background: var(--vermillon-deep);
  color: white;
}

/* Toast en mode "retiré" : virage vers le neutre */
.plan-modal-toast.is-removed {
  background: var(--washi-dark);
  border-color: var(--sumi-soft);
}
.plan-modal-toast.is-removed .plan-modal-toast-line {
  color: var(--sumi-soft);
}

/* ============== BADGE "Planifié" sur spots/restos déjà ajoutés ============== */
.planned-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.planned-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e7f3e0;
  border: 1.5px solid var(--moss);
  border-radius: 999px;
  padding: 2px 4px 2px 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--moss);
  line-height: 1.6;
}

.planned-pill-when {
  white-space: nowrap;
}

.planned-pill-remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--moss);
  color: white;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.1s;
}
.planned-pill-remove:hover { background: var(--vermillon); }
.planned-pill-remove:active { transform: scale(0.9); }

/* Subtle highlight sur les spots/restos déjà planifiés */
.spot-item.is-planned > summary {
  background: linear-gradient(90deg, rgba(93, 109, 78, 0.05), transparent 30%);
}
.resto-item.is-planned {
  border-left: 3px solid var(--moss);
  padding-left: 9px;
}

@media (max-width: 480px) {
  .spot-item > summary {
    grid-template-columns: 56px 1fr 28px 18px;
    gap: 8px;
  }
  .spot-thumb {
    width: 56px;
    height: 56px;
  }
  .spot-thumb-placeholder { font-size: 22px; }
  .spot-check {
    width: 26px;
    height: 26px;
    font-size: 15px;
  }
}

/* =================================================================
   PAGE VILLES — Section Restaurants halal (par ville, éditable)
   ================================================================= */

.resto-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.resto-empty {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  color: var(--sumi-soft);
  font-size: 12px;
  padding: 8px 0;
  opacity: 0.7;
}

.resto-item {
  position: relative;
  padding: 10px 30px 10px 0;
  border-bottom: 1px dashed var(--grid);
}

.resto-item:last-child {
  border-bottom: none;
}

.resto-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--sumi);
  line-height: 1.3;
  margin-bottom: 4px;
}

.resto-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--sumi-soft);
}

.resto-halal {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 9.5px;
  text-transform: uppercase;
}

.resto-halal[data-halal="certifie"] {
  background: var(--moss);
  color: white;
}

.resto-halal[data-halal="friendly"] {
  background: var(--gold);
  color: white;
}

.resto-halal[data-halal="a-confirmer"] {
  background: var(--vermillon);
  color: white;
  opacity: 0.85;
}

.resto-cuisine {
  text-transform: uppercase;
  font-weight: 600;
}

.resto-prix {
  color: var(--vermillon);
  font-weight: 600;
}

.resto-adresse {
  font-size: 11.5px;
  font-style: italic;
  color: var(--sumi-soft);
  line-height: 1.4;
}

.resto-note {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--sumi-soft);
  margin-top: 3px;
  line-height: 1.4;
}

.resto-del {
  position: absolute;
  top: 8px;
  right: 0;
  width: 24px;
  height: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--sumi-soft);
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
  opacity: 0.45;
}

.resto-del:hover,
.resto-del:active {
  color: var(--vermillon);
  background: var(--washi-dark);
  opacity: 1;
}

/* Formulaire d'ajout (accordéon) */
.resto-add {
  margin-top: 6px;
  border-top: 1px solid var(--grid);
  padding-top: 10px;
}

.resto-add > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vermillon);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--vermillon);
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}

.resto-add > summary::-webkit-details-marker {
  display: none;
}

.resto-add[open] > summary,
.resto-add > summary:hover {
  background: var(--vermillon);
  color: white;
}

.resto-add-form {
  margin-top: 12px;
  padding: 12px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  display: grid;
  gap: 8px;
}

.resto-add-form label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sumi-soft);
  margin-bottom: 3px;
}

.resto-add-form input[type="text"],
.resto-add-form select {
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--washi-dark);
  background: white;
  color: var(--sumi);
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.resto-add-form input[type="text"]:focus,
.resto-add-form select:focus {
  border-color: var(--vermillon);
}

.resto-add-form .row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.resto-add-form .checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--sumi);
}

.resto-add-form .checks label {
  font-family: inherit;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sumi);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin-bottom: 0;
}

.resto-add-form .checks input {
  accent-color: var(--vermillon);
  margin: 0;
}

.resto-add-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 6px;
}

.resto-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}

.resto-btn-cancel {
  background: transparent;
  color: var(--sumi-soft);
  border-color: var(--washi-dark);
}

.resto-btn-cancel:hover {
  color: var(--sumi);
  background: var(--washi-dark);
}

.resto-btn-save {
  background: var(--vermillon);
  color: white;
}

.resto-btn-save:hover {
  background: var(--vermillon-deep);
}

/* Mini-map Google Maps */
.ville-map-wrap {
  position: relative;
  margin-bottom: 14px;
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  overflow: hidden;
  background: var(--washi-light);
}

.ville-map-iframe {
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
  filter: saturate(0.85) contrast(0.95);
}

.ville-map-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--sumi);
  color: var(--washi);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-top: 1px solid var(--washi-dark);
  transition: background 0.15s;
}

.ville-map-link:hover,
.ville-map-link:active {
  background: var(--vermillon);
}

.ville-map-link::before {
  content: '📍';
  font-size: 12px;
}

/* Bloc vibe (ambiance) */
.ville-vibe {
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-family: 'Shippori Mincho', serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sumi-soft);
}

.ville-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--grid);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--sumi-soft);
  text-transform: uppercase;
}

.ville-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 2px;
  font-weight: 600;
  color: var(--vermillon);
}

.ville-hotel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--sumi-soft);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  font-family: 'Noto Sans JP', sans-serif;
}

.ville-hotel::before {
  content: '🏨';
  font-size: 11px;
}

/* =================================================================
   PAGE BUDGET — totaux + barre progression + catégories
   ================================================================= */
.budget-totaux {
  background: linear-gradient(135deg, var(--vermillon) 0%, var(--vermillon-deep) 100%);
  color: white;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}

.budget-total-main {
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(255,255,255,0.25);
}

.budget-total-num {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-style: italic;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.budget-total-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 6px;
}

.budget-total-pers {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 13px;
  margin-top: 8px;
  opacity: 0.95;
}

.budget-statuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.budget-statut {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
  padding: 8px 6px;
  text-align: center;
}

.bs-num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.bs-lbl {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 3px;
}

/* Barre de progression */
.budget-progress {
  margin-bottom: 14px;
}

.budget-progress-bar {
  display: flex;
  height: 12px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 6px;
  overflow: hidden;
}

.bp-seg {
  height: 100%;
  transition: width 0.4s ease;
}

.bp-seg[data-statut="paye"]    { background: var(--moss); }
.bp-seg[data-statut="a-payer"] { background: var(--cat-shopping); }
.bp-seg[data-statut="estime"]  { background: #8e8e93; }

.budget-progress-legend {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--sumi-soft);
  text-align: center;
  margin-top: 6px;
}

/* Catégories */
.budget-cats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.budget-cat {
  background: white;
  border: 1px solid var(--washi-dark);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.budget-cat > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: grid;
  grid-template-columns: 32px 1fr auto auto 18px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.budget-cat > summary::-webkit-details-marker { display: none; }

.budget-cat-emoji {
  font-size: 22px;
  text-align: center;
}

.budget-cat-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--sumi);
}

.budget-cat-amount {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--vermillon);
}

.budget-cat-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sumi-soft);
  background: var(--washi-light);
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--washi-dark);
}

.budget-cat-chevron {
  font-family: 'JetBrains Mono', monospace;
  color: var(--vermillon);
  transition: transform 0.2s;
}

.budget-cat[open] .budget-cat-chevron {
  transform: rotate(180deg);
}

.budget-cat-body {
  padding: 8px 12px 12px;
  background: var(--washi-light);
  border-top: 1px dashed var(--grid);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Ligne budget */
.budget-line {
  position: relative;
  background: white;
  border: 1px solid var(--washi-dark);
  border-left: 4px solid var(--washi-dark);
  border-radius: 3px;
  padding: 8px 10px 8px 12px;
}

.budget-line[data-statut="paye"]    { border-left-color: var(--moss); }
.budget-line[data-statut="a-payer"] { border-left-color: var(--cat-shopping); }
.budget-line[data-statut="estime"]  { border-left-color: #8e8e93; }

.budget-line-head {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.budget-line-statut {
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--washi-light);
  color: var(--sumi-soft);
}

.budget-line[data-statut="paye"] .budget-line-statut    { background: var(--moss); color: white; }
.budget-line[data-statut="a-payer"] .budget-line-statut { background: var(--cat-shopping); color: white; }
.budget-line[data-statut="estime"] .budget-line-statut  { background: #8e8e93; color: white; }

.budget-line-jour {
  padding: 2px 6px;
  background: var(--vermillon);
  color: white;
  border-radius: 2px;
}

.budget-line-ville {
  padding: 2px 6px;
  background: var(--washi);
  border: 1px solid var(--washi-dark);
  color: var(--sumi-soft);
  border-radius: 2px;
}

.budget-line-body {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.budget-line-libelle {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--sumi);
  line-height: 1.3;
  flex: 1;
}

.budget-line-amount {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--vermillon);
  white-space: nowrap;
}

.budget-line-meta {
  margin-top: 4px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 10.5px;
}

.budget-line-ref {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  background: var(--sumi);
  color: var(--washi);
  padding: 1px 6px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}

.budget-line-note {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  color: var(--sumi-soft);
  font-size: 11px;
}

.budget-line-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid var(--washi-dark);
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  color: var(--sumi-soft);
  cursor: pointer;
  transition: all 0.15s;
}

.budget-line-del:hover {
  background: var(--vermillon);
  color: white;
  border-color: var(--vermillon);
}

/* Formulaire d'ajout */
.budget-add-wrap {
  background: white;
  border: 1px dashed var(--washi-dark);
  border-radius: 4px;
  margin-bottom: 14px;
}

.budget-add-wrap > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vermillon);
  padding: 12px 16px;
  text-align: center;
}

.budget-add-wrap > summary::-webkit-details-marker { display: none; }

.budget-add-wrap[open] > summary {
  border-bottom: 1px dashed var(--washi-dark);
  background: var(--washi-light);
}

.budget-add-form {
  padding: 12px 14px 14px;
  display: grid;
  gap: 10px;
}

.budget-add-form label {
  display: block;
}

.budget-add-form .bf-lbl {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sumi-soft);
  margin-bottom: 3px;
}

.budget-add-form input,
.budget-add-form select {
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--washi-dark);
  background: white;
  color: var(--sumi);
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.budget-add-form .row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.bf-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
}

.bf-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}

.bf-btn-cancel {
  background: transparent;
  color: var(--sumi-soft);
  border-color: var(--washi-dark);
}

.bf-btn-save {
  background: var(--vermillon);
  color: white;
}

@media (max-width: 480px) {
  .budget-total-num { font-size: 30px; }
  .budget-cat > summary {
    grid-template-columns: 28px 1fr auto 18px;
  }
  .budget-cat-pct { display: none; }
}

/* =================================================================
   PAGE CARTE — Leaflet + markers numérotés + trajet pointillé
   ================================================================= */
.wrap-carte {
  max-width: 900px;
}

.carte-wrap {
  position: relative;
  background: white;
  border: 1px solid var(--grid);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}

.carte-map {
  width: 100%;
  height: 540px;
  background: var(--washi-light);
}

@media (max-width: 600px) {
  .carte-map { height: 420px; }
}

/* Filtre subtil pour adoucir le rendu OSM (couleurs trop saturées) */
.carte-map .leaflet-tile {
  filter: saturate(0.75) brightness(1.02);
}

.carte-controls {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: var(--washi-light);
  border-top: 1px solid var(--grid);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.carte-btn {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 12px;
  background: white;
  color: var(--sumi);
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}

.carte-btn:hover,
.carte-btn:active {
  background: var(--vermillon);
  color: white;
  border-color: var(--vermillon);
}

/* === PINS NUMÉROTÉS sur la carte === */
.ville-pin-wrapper {
  background: transparent !important;
  border: none !important;
}

.ville-pin {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--vermillon);
  color: white;
  border: 3px solid white;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  position: relative;
  transition: transform 0.15s;
  margin: 4px;
}

.ville-pin:hover {
  transform: scale(1.15);
  cursor: pointer;
}

.ville-pin-start {
  background: var(--sumi);
}

.ville-pin-end {
  background: var(--gold);
}

/* Animation pulse sur l'étape courante */
.ville-pin-pulse {
  animation: pin-pulse 1.8s ease-in-out infinite;
}

.ville-pin-pulse::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--vermillon);
  opacity: 0.35;
  animation: pin-pulse-ring 1.8s ease-out infinite;
  z-index: -1;
}

@keyframes pin-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

@keyframes pin-pulse-ring {
  0%   { transform: scale(1); opacity: 0.45; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* === POPUP Leaflet — style washi === */
.leaflet-popup.map-popup-wrap .leaflet-popup-content-wrapper {
  background: var(--washi);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  padding: 0;
  border: 1px solid var(--washi-dark);
}

.leaflet-popup.map-popup-wrap .leaflet-popup-content {
  margin: 0;
  padding: 12px 14px;
  font-family: 'Noto Sans JP', sans-serif;
}

.leaflet-popup.map-popup-wrap .leaflet-popup-tip {
  background: var(--washi);
  border: 1px solid var(--washi-dark);
}

.map-popup-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-bottom: 4px;
}

.map-popup-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--sumi);
  margin-bottom: 4px;
  line-height: 1.25;
}

.map-popup-kanji {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--vermillon);
  opacity: 0.85;
  margin-left: 4px;
}

.map-popup-dates {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--sumi-soft);
  margin-bottom: 6px;
}

.map-popup-hotel {
  font-size: 11.5px;
  color: var(--sumi-soft);
  margin-bottom: 8px;
}

.map-popup-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed var(--grid);
}

.map-popup-links a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: white;
  background: var(--vermillon);
  padding: 5px 10px;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.15s;
}

.map-popup-links a:hover {
  background: var(--vermillon-deep);
}

/* === LÉGENDE === */
.carte-legend {
  background: white;
  border: 1px solid var(--grid);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.carte-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--sumi);
}

.carte-legend-pin {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--vermillon);
  color: white;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 11px;
}

.carte-legend-pin-pulse {
  animation: pin-pulse 1.8s ease-in-out infinite;
}

.carte-legend-line {
  flex-shrink: 0;
  width: 30px;
  height: 0;
  border-top: 3px dashed var(--vermillon);
}

.carte-legend-text strong {
  color: var(--vermillon);
}

/* === STATS === */
.carte-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 6px 0;
}

.carte-stat {
  text-align: center;
  padding: 12px 4px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 4px;
}

.carte-stat-num {
  display: block;
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-style: italic;
  font-size: 24px;
  color: var(--vermillon);
  line-height: 1.1;
}

.carte-stat-lbl {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sumi-soft);
  margin-top: 4px;
}

@media (max-width: 480px) {
  .carte-stats { grid-template-columns: repeat(2, 1fr); }
  .carte-stat-num { font-size: 20px; }
}

/* =================================================================
   PAGE SURVIVAL KIT — sommaire + sections d'infos pratiques
   ================================================================= */
.survival-toc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: white;
  border: 1px solid var(--grid);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}

.survival-toc a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--sumi);
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  padding: 7px 8px;
  text-decoration: none;
  text-align: left;
  transition: all 0.15s;
}

.survival-toc a:hover {
  color: white;
  background: var(--vermillon);
  border-color: var(--vermillon);
}

.survival-bloc {
  scroll-margin-top: 70px; /* pour que le scroll-to-anchor n'aille pas sous la navbar */
}

/* Variante "warning" — section vitale en haut de page */
.survival-bloc-warn {
  background: linear-gradient(180deg, #fff8e1 0%, #fff3d0 100%);
  border: 1px solid var(--gold);
  border-left: 4px solid var(--gold);
}

.survival-bloc-warn h2::before {
  background: var(--gold);
}

.survival-bloc-warn .survival-intro {
  border-left-color: var(--gold);
  font-style: normal;
  color: var(--sumi);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
}

.survival-bloc h2 {
  font-family: 'Shippori Mincho', serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.survival-bloc h2::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--vermillon);
}

.survival-h3 {
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--vermillon);
  margin: 16px 0 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--grid);
}

.survival-bloc:first-of-type .survival-h3:first-child,
.survival-bloc .survival-h3:first-of-type {
  border-top: none;
  padding-top: 0;
}

.survival-intro {
  font-family: 'Shippori Mincho', serif;
  font-size: 13px;
  font-style: italic;
  color: var(--sumi-soft);
  line-height: 1.55;
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 2px solid var(--washi-dark);
}

.survival-intro strong {
  color: var(--vermillon);
  font-style: normal;
  font-weight: 700;
}

.survival-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.survival-list li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sumi);
  border-bottom: 1px dashed var(--grid);
}

.survival-list li:last-child {
  border-bottom: none;
}

.survival-list li::before {
  content: '─';
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--vermillon);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

ol.survival-list {
  counter-reset: ol-counter;
}

ol.survival-list li {
  counter-increment: ol-counter;
  padding-left: 30px;
}

ol.survival-list li::before {
  content: counter(ol-counter);
  position: absolute;
  left: 0;
  top: 5px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vermillon);
  color: white;
  border-radius: 50%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
}

.survival-list strong {
  color: var(--vermillon);
  font-weight: 700;
}

.survival-note {
  font-size: 12px;
  font-style: italic;
  color: var(--sumi-soft);
  background: var(--washi-light);
  border-left: 3px solid var(--gold);
  padding: 9px 12px;
  border-radius: 3px;
  margin-top: 12px;
  line-height: 1.5;
}

.survival-note strong {
  color: var(--sumi);
  font-style: normal;
}

/* Tableaux compacts */
.survival-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px;
  font-size: 12.5px;
}

.survival-table thead th {
  background: var(--sumi);
  color: var(--washi);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 7px 10px;
}

.survival-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px dashed var(--grid);
  line-height: 1.5;
  vertical-align: top;
}

.survival-table tbody tr:last-child td {
  border-bottom: none;
}

.survival-table tbody td:first-child {
  font-weight: 600;
  color: var(--sumi);
  white-space: nowrap;
  width: 40%;
}

.survival-table strong {
  color: var(--vermillon);
}

.survival-table em {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  color: var(--sumi-soft);
  font-size: 12px;
}

.survival-table a {
  color: var(--vermillon);
  text-decoration: none;
}

.survival-table a:hover {
  text-decoration: underline;
}

/* Grille apps */
.survival-apps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.survival-app {
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.survival-app strong {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--vermillon);
}

.survival-app span {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--sumi-soft);
}

@media (max-width: 480px) {
  .survival-toc {
    grid-template-columns: 1fr;
  }
  .survival-apps {
    grid-template-columns: 1fr;
  }
  .survival-table tbody td:first-child {
    width: auto;
  }
}

/* =================================================================
   PAGE PLANNING — Niveau 1 : timeline étapes + connecteurs
   ================================================================= */

/* Timeline globale */
.planning-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* --- Vol international (arrivée / retour) --- */
.vol-intl {
  position: relative;
  background: var(--sumi);
  color: var(--washi);
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 6px;
  box-shadow: var(--shadow-soft);
}

.vol-intl.retour {
  margin-bottom: 0;
  margin-top: 6px;
}

.vol-intl-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(244, 237, 226, 0.2);
}

.vol-intl-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermillon);
  background: var(--washi);
  padding: 3px 8px;
  border-radius: 2px;
}

.vol-intl-icon {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: #fbf3df;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.vol-intl-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.vol-intl-route {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vol-intl-route .arrow {
  color: var(--vermillon);
  opacity: 0.8;
}

.vol-intl-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(244, 237, 226, 0.7);
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.vol-intl-meta .vol-num {
  color: var(--washi);
  font-weight: 700;
}

/* --- Carte étape (Planning N1, compact, dépliable) --- */
.etape-card {
  position: relative;
  background: white;
  border: 1px solid var(--grid);
  border-radius: 4px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  z-index: 2;
}

.etape-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--vermillon);
  z-index: 2;
}

/* Bandeau cliquable (summary) */
.etape-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 36px 12px 14px; /* 36px à droite : réserve pour le chevron */
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.etape-card > summary::-webkit-details-marker {
  display: none;
}

.etape-card > summary:hover .etape-name,
.etape-card[open] > summary .etape-name {
  color: var(--vermillon);
}

.etape-card[open] > summary {
  border-bottom: 1px dashed var(--grid);
}

/* Chevron à droite */
.etape-chevron {
  position: absolute;
  right: 14px;
  top: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--vermillon);
  transition: transform 0.25s ease;
  pointer-events: none;
}

.etape-card[open] .etape-chevron {
  transform: rotate(180deg);
}

.etape-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.etape-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--washi);
  background: var(--sumi);
  padding: 3px 7px;
  border-radius: 2px;
  flex-shrink: 0;
}

.etape-jours {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--vermillon);
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  padding: 2px 7px;
  border-radius: 2px;
  flex-shrink: 0;
}

.etape-dates {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--sumi-soft);
  margin-left: auto;
  text-align: right;
}

.etape-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--sumi);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.etape-kanji {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--vermillon);
  opacity: 0.85;
}

.etape-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.etape-tags .ville-tag-pill {
  font-size: 9px;
  padding: 2px 6px;
}

.etape-hotel {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11.5px;
  color: var(--sumi-soft);
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 6px;
  border-top: 1px dashed var(--grid);
}

.etape-hotel::before {
  content: '🏨';
  font-size: 11px;
}

/* --- Liste des jours (étape dépliée) --- */
.etape-jours-list {
  padding: 10px 14px 14px;
  background: var(--washi-light);
}

.etape-jours-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sumi-soft);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--washi-dark);
}

.jour-item {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--washi-dark);
}

.jour-item:last-child {
  border-bottom: none;
}

/* Highlight du jour courant (auto-scroll à l'ouverture) */
.jour-item.is-today {
  position: relative;
  background: rgba(184, 134, 11, 0.08);
  border-left: 4px solid var(--gold);
  padding-left: 10px;
  border-radius: 3px;
  scroll-margin-top: 80px;
  animation: today-flash 1.2s ease-out;
}

.jour-item.is-today::before {
  content: 'AUJOURD\'HUI';
  position: absolute;
  top: -8px;
  right: 8px;
  background: var(--gold);
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 2px 7px;
  border-radius: 2px;
  box-shadow: var(--shadow-soft);
}

@keyframes today-flash {
  0%   { background: rgba(184, 134, 11, 0.35); }
  100% { background: rgba(184, 134, 11, 0.08); }
}

/* COLONNE DATE — page d'éphéméride japonaise :
   ┌──────────┐
   │   J1     │  ← ruban sombre en haut
   ├──────────┤
   │   12     │  ← chiffre HÉROS
   │   mai    │  ← mois en kana-like minuscules
   │ ─────    │
   │  MARDI   │  ← jour de semaine fin
   └──────────┘ */
.jour-num-col {
  flex-shrink: 0;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  background: white;
  border: 1px solid var(--washi-dark);
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(26, 20, 16, 0.07);
  overflow: hidden;
  height: fit-content;
}

.jour-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--washi);
  background: var(--sumi);
  padding: 4px 0;
  text-align: center;
  border-radius: 0;
}

.jour-date-num {
  font-family: 'Shippori Mincho', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--vermillon);
  line-height: 1;
  margin-top: 8px;
  letter-spacing: -0.02em;
}

.jour-date-month {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-top: 1px;
  opacity: 0.85;
}

.jour-jour-semaine {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sumi);
  font-weight: 700;
  padding: 8px 0 9px;
  margin-top: 6px;
  border-top: 1px dashed var(--washi-dark);
  background: var(--washi-light);
  word-break: keep-all;
}

.jour-content {
  flex: 1;
  min-width: 0;
}

.jour-header-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.jour-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  color: white;
}

/* Couleurs des types de jour (conservées + plus douces) */
.jour-type[data-type="fixe"]    { background: var(--vermillon); }     /* rouge = "Calé" : agenda chargé */
.jour-type[data-type="libre"]   { background: var(--moss); }          /* vert = "Libre" : à composer */
.jour-type[data-type="transit"] { background: var(--sky-ink); }       /* bleu = "Trajet" : route/vol */
.jour-type[data-type="mixte"]   { background: var(--gold); }          /* or = "Mixte" : un peu calé, un peu libre */

/* =================================================================
   LÉGENDE DES TYPES DE JOUR (haut du Planning)
   ================================================================= */
.planning-legend {
  background: white;
  border: 1px solid var(--grid);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}

.planning-legend-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.planning-legend-title::before {
  content: '';
  width: 14px;
  height: 2px;
  background: var(--vermillon);
}

.planning-legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.legend-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.4;
}

.legend-swatch {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-top: 2px;
}

.legend-swatch[data-type="fixe"]    { background: var(--vermillon); }
.legend-swatch[data-type="libre"]   { background: var(--moss); }
.legend-swatch[data-type="transit"] { background: var(--sky-ink); }
.legend-swatch[data-type="mixte"]   { background: var(--gold); }

.legend-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sumi);
}

.legend-desc {
  display: block;
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--sumi-soft);
  margin-top: 1px;
}

/* Sous-légende pour les types de réservations */
.planning-legend-resa {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--grid);
}

.legend-resa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
}

.legend-resa-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  color: var(--sumi);
}

.legend-resa-swatch {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-resa-swatch[data-type="activite"]    { background: var(--resa-activite-bg); }
.legend-resa-swatch[data-type="repas"]       { background: var(--resa-repas-bg); }
.legend-resa-swatch[data-type="transport"]   { background: var(--resa-transport-bg); }
.legend-resa-swatch[data-type="hebergement"] { background: var(--resa-hebergement-bg); }

.jour-badges {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
}

.jour-badge {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid var(--washi-dark);
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
}

.jour-badge[data-badge="reservation"] {
  background: var(--vermillon);
  border-color: var(--vermillon);
  color: white;
}

.jour-badge[data-badge="takkyubin"] {
  background: var(--gold);
  border-color: var(--gold);
}

.jour-apercu {
  font-size: 13px;
  line-height: 1.55;
  color: var(--sumi-soft);
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  padding: 6px 0 8px;
  border-bottom: 1px dashed var(--washi-dark);
  margin-bottom: 12px;
}

.jour-apercu::before {
  content: '— ';
  color: var(--vermillon);
  font-style: normal;
  font-weight: 700;
  opacity: 0.7;
}

.jour-notes {
  font-size: 12px;
  font-style: italic;
  color: var(--sumi-soft);
  margin-top: 4px;
  line-height: 1.5;
  opacity: 0.9;
}

/* =================================================================
   SECTION TITLES dans un jour (Réservations / Notes) — barre verticale style sumi
   ================================================================= */
.jour-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
  padding-left: 10px;
  position: relative;
}

.jour-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background: var(--vermillon);
  border-radius: 2px;
}

.jour-section-icon {
  font-size: 13px;
  line-height: 1;
}

.jour-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sumi);
}

.jour-section-count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: white;
  background: var(--vermillon);
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

/* Mobile : colonne date plus compacte mais toujours lisible */
@media (max-width: 480px) {
  .jour-item { gap: 10px; padding: 16px 0; }
  .jour-num-col { width: 60px; }
  .jour-date-num { font-size: 24px; margin-top: 6px; }
  .jour-date-month { font-size: 8.5px; letter-spacing: 0.14em; }
  .jour-num { font-size: 9px; padding: 3px 0; letter-spacing: 0.14em; }
  .jour-jour-semaine { font-size: 7.5px; padding: 6px 0 7px; }
}

/* Encart cascade J3 → J23/J24 (décision météo + propagation) */
.meteo-cascade {
  margin: 6px 0;
  padding: 10px 12px;
  border-radius: 4px;
  border-left: 4px solid var(--gold);
  background: linear-gradient(135deg, #fff8e1 0%, #fff3d0 100%);
  font-size: 12.5px;
  line-height: 1.5;
}

.meteo-cascade[data-state="beau"]  { border-left-color: var(--moss);     background: linear-gradient(135deg, #e8f0e0 0%, #d6e3c8 100%); }
.meteo-cascade[data-state="pluie"] { border-left-color: var(--sky-ink);  background: linear-gradient(135deg, #dfe7ec 0%, #c8d3da 100%); }

.meteo-cascade-loading {
  font-style: italic;
  color: var(--sumi-soft);
}

.meteo-cascade-titre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-bottom: 5px;
}

.meteo-cascade[data-state="beau"]  .meteo-cascade-titre { color: var(--moss); }
.meteo-cascade[data-state="pluie"] .meteo-cascade-titre { color: var(--sky-ink); }

.meteo-cascade-body {
  font-family: 'Shippori Mincho', serif;
  color: var(--sumi);
}

.meteo-cascade-body strong {
  font-weight: 700;
}

.cascade-pick {
  background: var(--vermillon);
  color: white;
  padding: 1px 7px;
  border-radius: 2px;
  font-weight: 700;
}

.meteo-cascade[data-state="beau"]  .cascade-pick { background: var(--moss); }
.meteo-cascade[data-state="pluie"] .cascade-pick { background: var(--sky-ink); }

.cascade-link {
  color: var(--vermillon);
  text-decoration: none;
  font-weight: 600;
}

.cascade-override {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0,0,0,0.12);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cascade-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border: 1px solid var(--washi-dark);
  background: white;
  color: var(--sumi-soft);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}

.cascade-btn.is-active {
  background: var(--vermillon);
  color: white;
  border-color: var(--vermillon);
}

.cascade-btn:hover {
  border-color: var(--vermillon);
  color: var(--vermillon);
}

.cascade-btn.is-active:hover { color: white; }

.cascade-btn-reset {
  font-size: 9px;
  opacity: 0.7;
}

/* Widget météo — couleur dynamique selon les conditions du jour */
.jour-meteo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 6px 0;
  background: linear-gradient(135deg, #4a7ba6 0%, #355a82 100%);
  color: white;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.4;
  transition: background 0.4s ease;
}

/* === Palettes par condition === */
/* Soleil clair → bleu ciel lumineux */
.jour-meteo[data-tone="clear"]        { background: linear-gradient(135deg, #5fb3e8 0%, #2c89c4 100%); }
/* Peu nuageux → bleu doux */
.jour-meteo[data-tone="mostly-clear"] { background: linear-gradient(135deg, #6ea3c8 0%, #4a7ba6 100%); }
/* Couvert → gris perle */
.jour-meteo[data-tone="cloudy"]       { background: linear-gradient(135deg, #8a98a3 0%, #5d6d7a 100%); }
/* Brouillard → blanc-gris */
.jour-meteo[data-tone="fog"]          { background: linear-gradient(135deg, #a5adb3 0%, #7c858d 100%); }
/* Bruine → bleu-gris foncé (pluie + un peu de soleil) */
.jour-meteo[data-tone="drizzle"]      { background: linear-gradient(135deg, #5b7891 0%, #3a5a6b 100%); }
/* Pluie continue → gris ardoise */
.jour-meteo[data-tone="rain"]         { background: linear-gradient(135deg, #5a6470 0%, #36404b 100%); }
/* Averses → gris-bleu profond */
.jour-meteo[data-tone="showers"]      { background: linear-gradient(135deg, #4d6173 0%, #2a3d4f 100%); }
/* Orage → ardoise sombre violet */
.jour-meteo[data-tone="storm"]        { background: linear-gradient(135deg, #3d3a52 0%, #1f1d33 100%); }
/* Neige → blanc-bleu glacé */
.jour-meteo[data-tone="snow"]         { background: linear-gradient(135deg, #b8c8d6 0%, #7896b0 100%); color: var(--sumi); }
.jour-meteo[data-tone="snow"] .jour-meteo-text strong,
.jour-meteo[data-tone="snow"] .jour-meteo-prefix { color: var(--sumi); }
/* Fallback (lien Tenki, hors plage) → gris neutre */
.jour-meteo[data-tone="fallback"]     { background: var(--washi-light); color: var(--sumi); border: 1px dashed var(--washi-dark); }
.jour-meteo[data-tone="fallback"] .jour-meteo-text a { color: var(--vermillon); }

.jour-meteo[data-state="loading"] {
  background: var(--washi-light) !important;
  color: var(--sumi-soft) !important;
  border: 1px dashed var(--washi-dark);
  font-style: italic;
  font-size: 11px;
}

.jour-meteo-icon {
  flex-shrink: 0;
  font-size: 16px;
}

.jour-meteo-text {
  flex: 1;
  font-family: 'Shippori Mincho', serif;
}

.jour-meteo-prefix {
  display: inline-block;
  font-size: 10.5px;
  font-style: italic;
  opacity: 0.85;
  margin-right: 4px;
  letter-spacing: 0.02em;
}

.jour-meteo-text strong {
  font-weight: 700;
}

.jour-meteo-text a {
  color: white;
  text-decoration: underline;
}

.jour-meteo-link {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: white;
  background: rgba(244, 237, 226, 0.15);
  padding: 3px 7px;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.15s;
}

.jour-meteo-link:hover {
  background: rgba(244, 237, 226, 0.3);
}

/* =================================================================
   💡 HINTS — notes utiles d'un jour, mode discret (pas de section title)
   ================================================================= */
.jour-hints {
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: rgba(244, 237, 226, 0.55);
  border-radius: 5px;
  border-left: 3px solid var(--gold);
}

.jour-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sumi-soft);
}

.jour-hint-icon {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.85;
}

.jour-hint-text {
  flex: 1;
  font-style: italic;
}

.jour-hints-more {
  margin-top: 4px;
}

.jour-hints-more > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 4px 0;
  display: inline-block;
}

.jour-hints-more > summary::-webkit-details-marker { display: none; }
.jour-hints-more > summary::before {
  content: '▸ ';
  display: inline-block;
  margin-right: 2px;
}
.jour-hints-more[open] > summary::before {
  content: '▾ ';
}

/* =================================================================
   🗾 BANNIÈRE PHASE VILLE — entrée dans une nouvelle ville
   ================================================================= */
.ville-phase {
  margin: 32px 0 16px;
  padding: 20px 18px 18px;
  background: linear-gradient(135deg, var(--sumi) 0%, #2d251d 100%);
  color: white;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 20, 16, 0.18);
}

.ville-phase::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(192, 57, 43, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.ville-phase:first-child {
  margin-top: 8px;
}

.ville-phase-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.ville-phase-num-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(192, 57, 43, 0.4);
  border-radius: 50%;
}

.ville-phase-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1;
}

.ville-phase-icone {
  font-size: 22px;
  line-height: 1;
  margin-top: 2px;
}

.ville-phase-titre-block {
  flex: 1;
  min-width: 0;
}

.ville-phase-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 4px;
}

.ville-phase-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.1;
  color: white;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.ville-phase-kanji {
  font-family: 'Shippori Mincho', serif;
  font-size: 17px;
  font-weight: 400;
  color: rgba(192, 57, 43, 0.85);
  letter-spacing: 0.04em;
}

.ville-phase-tags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  padding-left: 72px;
}

.ville-phase-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.ville-phase-hotel {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
}

.ville-phase-hotel-icon {
  font-size: 20px;
  line-height: 1;
}

.ville-phase-hotel-body {
  flex: 1;
  min-width: 0;
}

.ville-phase-hotel-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 15px;
  color: white;
  line-height: 1.2;
}

.ville-phase-hotel-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ville-phase-heb-ref strong {
  color: var(--gold);
  font-weight: 700;
}

.ville-phase-heb-type {
  font-style: italic;
}

@media (max-width: 480px) {
  .ville-phase { padding: 16px 14px 14px; margin: 24px 0 14px; }
  .ville-phase-num-block { width: 48px; height: 48px; }
  .ville-phase-icone { font-size: 18px; }
  .ville-phase-name { font-size: 20px; }
  .ville-phase-kanji { font-size: 15px; }
  .ville-phase-tags { padding-left: 0; margin-top: 10px; }
  .ville-phase-hotel { padding: 10px 12px; }
  .ville-phase-hotel-name { font-size: 14px; }
}

/* =================================================================
   🚗 BANNIÈRE TRANSITION — entre 2 villes (ex: Tokyo → Fuji)
   Inline, compact : ce n'est pas un "événement-jour", juste un repère.
   ================================================================= */
.ville-transition {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 14px;
  padding: 10px 14px;
  background: var(--washi-light);
  border-radius: 4px;
  border: 1px dashed var(--washi-dark);
  flex-wrap: wrap;
}

.ville-transition::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--vermillon);
  opacity: 0.5;
  flex-shrink: 0;
}

.ville-transition-emoji {
  font-size: 18px;
  line-height: 1;
}

.ville-transition-arrow {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 13.5px;
  color: var(--sumi);
}

.ville-transition-dur {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sumi-soft);
  text-align: right;
}

/* Notes en liste (legacy — utilisée si jamais notesHtml fallback) */
.jour-notes-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

/* Notes supplémentaires repliées par défaut (synthèse v8) */
.jour-notes-more {
  margin: 4px 0 0;
}

.jour-notes-more > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vermillon);
  padding: 4px 0;
  display: inline-block;
}

.jour-notes-more > summary::-webkit-details-marker { display: none; }
.jour-notes-more > summary::before {
  content: '▸ ';
  display: inline-block;
  margin-right: 2px;
  transition: transform 0.2s;
}
.jour-notes-more[open] > summary::before {
  content: '▾ ';
}

.jour-notes-list-hidden {
  margin-top: 4px;
}

.jour-notes-list li {
  position: relative;
  padding: 3px 0 3px 12px;
  font-size: 11px;
  font-style: italic;
  color: var(--sumi-soft);
  line-height: 1.45;
  opacity: 0.9;
}

.jour-notes-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: 2px;
  color: var(--vermillon);
  font-weight: 700;
}

/* Titre court du jour (avant l'aperçu) */
.jour-titre {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--sumi);
  margin-bottom: 4px;
  line-height: 1.25;
}

/* Icône d'étape (emoji ville) dans le titre étape */
.etape-icone {
  font-size: 18px;
  margin-right: 4px;
  vertical-align: -1px;
}

/* =================================================================
   BANDEAU "OÙ ON EN EST" — collant en haut du Planning
   ================================================================= */
.planning-now {
  position: sticky;
  top: 56px; /* sous la navbar */
  z-index: 50;
  margin: -16px -14px 14px;
  padding: 0;
}

.planning-now-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--grid);
  box-shadow: var(--shadow-soft);
}

.planning-now-before  { background: linear-gradient(90deg, var(--vermillon) 0%, var(--vermillon-deep) 100%); color: white; }
.planning-now-during  { background: linear-gradient(90deg, var(--gold) 0%, #a06f00 100%); color: white; }
.planning-now-after   { background: var(--washi-light); color: var(--sumi); border-bottom-color: var(--washi-dark); }

.planning-now-tag {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  background: rgba(255,255,255,0.18);
  color: white;
  white-space: nowrap;
}

.planning-now-after .planning-now-tag {
  background: var(--vermillon);
  color: white;
}

.planning-now-main {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.planning-now-jx {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.planning-now-line {
  font-family: 'Shippori Mincho', serif;
  font-size: 12.5px;
  line-height: 1.35;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-now-line strong {
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 480px) {
  .planning-now-state { padding: 9px 12px; gap: 8px; }
  .planning-now-jx    { font-size: 16px; }
  .planning-now-line  { font-size: 11.5px; }
}

/* =================================================================
   BOUTON FLOTTANT "MAINTENANT" — Planning (visible pendant le voyage)
   ================================================================= */
.now-fab {
  position: fixed;
  bottom: 20px;
  right: 16px;
  z-index: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px 12px 14px;
  background: linear-gradient(135deg, var(--vermillon) 0%, var(--vermillon-deep) 100%);
  color: white;
  border: none;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(192, 57, 43, 0.4),
              0 0 0 1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 0.18s, box-shadow 0.18s;
  animation: now-fab-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.now-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(192, 57, 43, 0.55);
}

.now-fab-emoji {
  font-size: 16px;
  animation: now-fab-pulse 2s ease-in-out infinite;
}

@keyframes now-fab-in {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes now-fab-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* === Marqueur "Maintenant" dans l'agenda (ligne horizontale animée) === */
.agenda-now-marker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px -12px 6px;
  padding: 0 12px;
  position: relative;
  scroll-margin-top: 100px;
}

.agenda-now-marker::before,
.agenda-now-marker::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--vermillon);
  box-shadow: 0 0 6px rgba(192, 57, 43, 0.5);
}

.agenda-now-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vermillon);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.2);
  animation: now-dot-pulse 1.5s ease-in-out infinite;
}

.agenda-now-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vermillon);
  background: white;
  padding: 3px 8px;
  border: 1px solid var(--vermillon);
  border-radius: 999px;
  white-space: nowrap;
}

@keyframes now-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.15); }
  50%      { box-shadow: 0 0 0 8px rgba(192, 57, 43, 0.05); }
}

@media (max-width: 480px) {
  .now-fab {
    bottom: 14px;
    right: 12px;
    padding: 10px 16px 10px 12px;
    font-size: 10px;
  }
}

/* =================================================================
   PLANNING N3 v2 — Agenda chronologique (Option C)
   Liste verticale d'événements ordonnés par heure, hauteur proportionnelle
   à la durée. Inclut résas officielles + items custom + gaps libres.
   ================================================================= */
.planning-agenda {
  margin-top: 12px;
  padding: 10px 12px 12px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 4px;
}

.planning-agenda-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--washi-dark);
}

/* Événement : un bloc occupant la durée */
.agenda-event {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  background: white;
  border: 1px solid var(--washi-dark);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.agenda-event:hover {
  border-color: var(--vermillon);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

/* Couleur de bordure gauche selon type/source */
.agenda-event[data-event-kind="resa"][data-event-type="activite"][data-event-source="default"] {
  border-left: 4px solid var(--resa-activite-bg);
}
.agenda-event[data-event-kind="resa"][data-event-type="repas"][data-event-source="default"] {
  border-left: 4px solid var(--resa-repas-bg);
}
.agenda-event[data-event-kind="resa"][data-event-type="activite"][data-event-source="custom"] {
  border-left: 4px dashed var(--resa-activite-bg);
}
.agenda-event[data-event-kind="resa"][data-event-type="repas"][data-event-source="custom"] {
  border-left: 4px dashed var(--resa-repas-bg);
}
.agenda-event[data-event-kind="custom"][data-event-type="activite"] {
  border-left: 4px solid var(--gold);
}
.agenda-event[data-event-kind="custom"][data-event-type="repas"] {
  border-left: 4px solid #b85c00;
}

/* Colonne heure à gauche */
.agenda-event-time {
  flex-shrink: 0;
  width: 64px;
  padding: 8px 6px;
  background: var(--washi-light);
  border-right: 1px dashed var(--washi-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-family: 'JetBrains Mono', monospace;
}

.agenda-event-time-start {
  font-size: 13px;
  font-weight: 700;
  color: var(--sumi);
  letter-spacing: 0.04em;
}

.agenda-event-time-end {
  font-size: 9.5px;
  color: var(--sumi-soft);
  margin-top: 1px;
}

.agenda-event-time-dur {
  font-size: 9px;
  font-weight: 700;
  color: var(--vermillon);
  margin-top: 6px;
  padding: 1px 5px;
  background: white;
  border: 1px solid var(--washi-dark);
  border-radius: 2px;
  letter-spacing: 0.04em;
}

.agenda-event-time-badge {
  margin-top: 4px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--gold);
  color: white;
  padding: 1px 5px;
  border-radius: 2px;
  text-align: center;
}

/* Mini-timeline planDetail à l'intérieur d'un gros bloc (USJ, Sixt, Maikoya…) */
.agenda-event-plan {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--washi-dark);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.agenda-substep {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  line-height: 1.4;
  padding: 2px 0;
}

.agenda-substep-time {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--vermillon);
  width: 70px;
  letter-spacing: 0.04em;
}

.agenda-substep-title {
  flex: 1;
  font-family: 'Shippori Mincho', serif;
  color: var(--sumi);
}

/* Pour les blocs longs (4h+), le bloc a un fond doux + dégradé "journée" */
.agenda-event.is-long {
  background: linear-gradient(180deg, white 0%, var(--washi-light) 100%);
}

/* Conflit horaire (chevauchement avec un autre event) */
.agenda-event.has-conflict {
  outline: 2px solid var(--vermillon);
  outline-offset: -1px;
  background: rgba(192, 57, 43, 0.04);
}

.agenda-event-conflict {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 8px;
  background: var(--vermillon);
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 2px;
  line-height: 1.3;
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Corps de l'événement */
.agenda-event-body {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.agenda-event-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--washi-light);
  color: var(--sumi-soft);
}

.agenda-event[data-event-kind="resa"][data-event-source="default"] .agenda-event-tag {
  background: var(--vermillon);
  color: white;
}

.agenda-event[data-event-kind="custom"] .agenda-event-tag {
  background: var(--gold);
  color: white;
}

.agenda-event-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--sumi);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
}

.agenda-event-emoji {
  font-size: 16px;
  flex-shrink: 0;
}

.agenda-event-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--sumi-soft);
  text-transform: uppercase;
}

/* Actions à droite */
.agenda-event-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--washi-light);
  border-left: 1px dashed var(--washi-dark);
}

.agenda-action {
  width: 26px;
  height: 26px;
  border: 1px solid var(--washi-dark);
  background: white;
  border-radius: 50%;
  font-size: 13px;
  font-family: 'Shippori Mincho', serif;
  color: var(--sumi-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.agenda-action:hover {
  background: var(--vermillon);
  color: white;
  border-color: var(--vermillon);
}

.agenda-action-del:hover { background: var(--vermillon-deep); }

/* Trou libre cliquable */
.agenda-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 4px 0;
  padding: 8px 10px;
  background: transparent;
  border: 1.5px dashed var(--washi-dark);
  border-radius: 4px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--sumi-soft);
  transition: all 0.15s;
}

.agenda-gap:hover {
  background: rgba(192, 57, 43, 0.04);
  border-color: var(--vermillon);
  color: var(--vermillon);
}

.agenda-gap-text {
  font-weight: 600;
}

/* Journée vide (pas de résa, juste un gros bouton) */
.agenda-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 14px;
  background: white;
  border: 1.5px dashed var(--washi-dark);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.agenda-empty:hover {
  border-color: var(--vermillon);
  background: rgba(192, 57, 43, 0.04);
}

.agenda-empty-emoji {
  font-size: 28px;
  flex-shrink: 0;
}

.agenda-empty-text {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--sumi-soft);
  line-height: 1.4;
}

.agenda-empty-text strong {
  color: var(--vermillon);
  font-style: normal;
  font-weight: 700;
}

/* Choix du kind dans la modale picker (étape 1) */
.picker-kind-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 18px 18px;
}

.picker-kind-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 12px;
  background: white;
  border: 2px solid var(--washi-dark);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Noto Sans JP', sans-serif;
}

.picker-kind-btn:hover {
  border-color: var(--vermillon);
  background: var(--washi-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.picker-kind-emoji {
  font-size: 36px;
  line-height: 1;
}

.picker-kind-label {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--sumi);
}

.picker-kind-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--sumi-soft);
  text-align: center;
  line-height: 1.3;
}

@media (max-width: 480px) {
  .agenda-event-time { width: 54px; padding: 6px 4px; }
  .agenda-event-time-start { font-size: 12px; }
  .agenda-event-title { font-size: 13px; }
}

/* =================================================================
   PLANNING N3 — Créneaux modulables (3 repas + 3 activités par jour)
   Sur jours "fixe" → repas seulement
   ================================================================= */
.planning-slots {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 4px;
}

.planning-slots-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--washi-dark);
}

.planning-slot {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--washi-dark);
  align-items: center;
}

.planning-slot:last-child {
  border-bottom: none;
}

.slot-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--sumi);
}

.slot-emoji {
  font-size: 14px;
  flex-shrink: 0;
}

.slot-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sumi-soft);
}

.slot-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
}

/* Bouton vide "+ Ajouter" */
.slot-empty {
  flex: 1;
  text-align: left;
  padding: 6px 10px;
  background: white;
  border: 1px dashed var(--washi-dark);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--sumi-soft);
  letter-spacing: 0.04em;
}

.slot-empty:hover,
.slot-empty:active {
  border-color: var(--vermillon);
  color: var(--vermillon);
  background: rgba(192, 57, 43, 0.04);
  border-style: solid;
}

.slot-empty-text {
  font-weight: 600;
}

/* Bouton rempli (item assigné) */
.slot-filled {
  flex: 1;
  text-align: left;
  padding: 6px 10px;
  background: white;
  border: 1px solid var(--vermillon);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Noto Sans JP', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slot-filled:hover,
.slot-filled:active {
  background: var(--washi-light);
}

.slot-item-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--sumi);
  line-height: 1.25;
}

.slot-item-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--sumi-soft);
  text-transform: uppercase;
}

/* Slot occupé par une résa officielle/perso (non-éditable, ouvre modale détail) */
.slot-content-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.slot-resa {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 7px 10px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Noto Sans JP', sans-serif;
  background: white;
}

/* Officiel : fond plein selon type */
.slot-resa[data-source="default"][data-type="activite"] { background: var(--resa-activite-bg);    color: white; border-color: var(--resa-activite-fg); }
.slot-resa[data-source="default"][data-type="repas"]    { background: var(--resa-repas-bg);       color: white; border-color: var(--resa-repas-fg); }

.slot-resa[data-source="default"]:hover { filter: brightness(0.92); }

/* Perso : outline pointillé */
.slot-resa[data-source="custom"] {
  background: var(--washi-light);
  border-style: dashed;
  border-width: 1.5px;
}
.slot-resa[data-source="custom"][data-type="activite"] { border-color: var(--resa-activite-bg); color: var(--resa-activite-fg); }
.slot-resa[data-source="custom"][data-type="repas"]    { border-color: var(--resa-repas-bg);    color: var(--resa-repas-fg); }

.slot-resa[data-source="custom"]:hover { background: white; }

.slot-resa-tag {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
  white-space: nowrap;
}

.slot-resa[data-source="default"][data-type="activite"] .slot-resa-tag { background: white; color: var(--resa-activite-fg); }
.slot-resa[data-source="default"][data-type="repas"]    .slot-resa-tag { background: white; color: var(--resa-repas-fg); }
.slot-resa[data-source="custom"][data-type="activite"]  .slot-resa-tag { background: var(--resa-activite-bg); color: white; }
.slot-resa[data-source="custom"][data-type="repas"]     .slot-resa-tag { background: var(--resa-repas-bg);    color: white; }

.slot-resa-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.slot-resa-heure {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.slot-resa-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.25;
}

.slot-resa-info {
  flex-shrink: 0;
  font-size: 14px;
  font-family: 'Shippori Mincho', serif;
  opacity: 0.65;
}

/* Hint "à enchaîner ensemble" quand 2+ résas dans le même slot */
.slot-combo-hint {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--gold);
  background: rgba(184, 134, 11, 0.08);
  border-left: 3px solid var(--gold);
  padding: 4px 8px;
  border-radius: 2px;
  margin-top: 2px;
}

.slot-combo-hint::before {
  content: '↔ ';
  font-weight: 700;
}

/* Bouton ✕ pour vider */
.slot-clear {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--sumi-soft);
  background: transparent;
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.15s;
}

.slot-clear:hover,
.slot-clear:active {
  color: white;
  background: var(--vermillon);
  border-color: var(--vermillon);
}

/* =================================================================
   PICKER MODALE (sélection d'une activité ou d'un resto)
   ================================================================= */
.picker-search-wrap {
  padding: 12px 18px 0;
  position: sticky;
  top: 0;
  background: var(--washi);
  z-index: 1;
}

/* Sélecteur heure + durée — éditable, en haut du picker */
.picker-time-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 4px;
}

.picker-time-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.picker-time-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vermillon);
}

.picker-time-input {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--washi-dark);
  background: white;
  color: var(--sumi);
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}

.picker-time-input:focus {
  border-color: var(--vermillon);
}

.picker-search {
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  padding: 9px 12px;
  border: 1px solid var(--washi-dark);
  background: white;
  color: var(--sumi);
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.picker-search:focus {
  border-color: var(--vermillon);
}

.picker-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--washi-light);
  border: 1px dashed var(--washi-dark);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sumi-soft);
}

.picker-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.picker-legend-emoji {
  font-size: 12px;
}

.picker-list {
  padding: 12px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Groupement géographique : header + items à proximité */
.picker-zone-group {
  margin-bottom: 14px;
  border-left: 3px solid var(--gold);
  padding-left: 10px;
}

.picker-zone-group.is-other {
  border-left-color: var(--washi-dark);
  opacity: 0.85;
}

.picker-zone-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--washi-dark);
}

.picker-zone-label {
  font-family: 'Shippori Mincho', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--vermillon);
  letter-spacing: 0.01em;
}

.picker-zone-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--sumi-soft);
  font-style: italic;
}

.picker-zone-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.picker-empty {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--sumi-soft);
  text-align: center;
  padding: 24px 8px;
}

.picker-item-wrap {
  position: relative;
  background: white;
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  transition: border-color 0.15s, background 0.15s;
}

.picker-item-wrap:hover {
  border-color: var(--vermillon);
}

.picker-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 36px 10px 10px; /* room for ⓘ button on right */
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  border-radius: 3px;
}

.picker-item:hover,
.picker-item:active {
  background: var(--washi-light);
}

.picker-item.is-current {
  background: rgba(192, 57, 43, 0.06);
}

.picker-item-wrap:has(.picker-item.is-current) {
  border-color: var(--vermillon);
  border-width: 2px;
}

/* Emoji visuel grand format (clé de tri rapide) */
.picker-item-emoji {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}

.picker-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.picker-item-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--sumi);
  line-height: 1.3;
}

.picker-item-halal {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  align-self: flex-start;
  margin-top: 1px;
}
.picker-item-halal[data-halal="certifie"]    { background: var(--moss); color: white; }
.picker-item-halal[data-halal="friendly"]    { background: var(--gold); color: white; }
.picker-item-halal[data-halal="a-confirmer"] { background: var(--vermillon); color: white; opacity: 0.85; }

.picker-item-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--sumi-soft);
  text-transform: uppercase;
}

.picker-current-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--vermillon);
  color: white;
  padding: 1px 5px;
  border-radius: 2px;
}

/* Bouton ⓘ "Détails" : ouvre une mini popover sans sélectionner l'item */
.picker-item-info {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--washi-dark);
  border-radius: 50%;
  font-size: 14px;
  font-family: 'Shippori Mincho', serif;
  color: var(--sumi-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.picker-item-info:hover {
  background: var(--vermillon);
  color: white;
  border-color: var(--vermillon);
}

/* Détails (popover inline qui se déplie) */
.picker-item-details {
  padding: 8px 12px 10px;
  border-top: 1px dashed var(--washi-dark);
  background: var(--washi-light);
  font-size: 12px;
  line-height: 1.5;
  color: var(--sumi-soft);
}

.picker-item-details[hidden] { display: none; }

.picker-detail-line {
  margin: 3px 0;
}

.picker-detail-line strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--vermillon);
  margin-right: 4px;
}

@media (max-width: 480px) {
  .planning-slot {
    grid-template-columns: 90px 1fr;
  }
}

/* --- Réservations sous chaque jour (Planning N2) ---
   COULEURS PAR TYPE (le type de la résa donne la couleur principale).
   La SOURCE (officielle vs perso) se distingue par le STYLE (plein vs outline).
   Le STATUT (à faire) se distingue par un liseré pointillé.

   Types :  activite=violet · repas=rouge food · transport=bleu sky · hebergement=or
*/
/* =================================================================
   RÉSAS DU JOUR — vraies cartes visuelles encadrées
   ================================================================= */
.jour-resas {
  margin-top: 0;
}

.jour-resas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

/* Mini timeline verticale entre les résas (rappel visuel chronologique) */
.jour-resas-list::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--washi-dark);
  border-radius: 1px;
  z-index: 0;
}

.jour-resas-list .resa-card-wrap {
  position: relative;
  padding-left: 26px;
  z-index: 1;
}

.jour-resas-list .resa-card-wrap::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  border: 2.5px solid var(--vermillon);
  box-shadow: 0 0 0 3px var(--washi);
  z-index: 2;
}

/* Journée libre (pas de résa) — encart de respiration plus visuel */
.jour-resas-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 14px 14px;
  background: linear-gradient(135deg, var(--washi-light) 0%, #faf5e9 100%);
  border: 1px dashed var(--washi-dark);
  border-radius: 5px;
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--sumi-soft);
}

.jour-resas-empty-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.jour-resas-empty-text {
  line-height: 1.4;
}

/* Wrapper qui contient la carte résa + le bouton × pour les résas perso.
   `position: relative` pour positionner le × en absolu. */
.resa-card-wrap {
  position: relative;
}

/* === CARTE RÉSA — VISUELLE, encadrée === */
.resa-card {
  display: block;
  width: 100%;
  text-align: left;
  background: white;
  border: 1px solid var(--washi-dark);
  border-left: 6px solid var(--vermillon);
  border-radius: 5px;
  padding: 12px 14px;
  margin: 0;
  cursor: pointer;
  transition: all 0.18s;
  font-family: 'Noto Sans JP', sans-serif;
  box-shadow: 0 1px 3px rgba(26, 20, 16, 0.08);
  position: relative;
}

/* Bouton × retrait rapide (uniquement sur les résas perso) */
.resa-card-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--vermillon-deep);
  background: white;
  color: var(--vermillon-deep);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(26, 20, 16, 0.15);
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.resa-card-remove:hover {
  background: var(--vermillon-deep);
  color: white;
}
.resa-card-remove:active {
  transform: scale(0.9);
}

/* Quand le wrap contient un bouton ×, on laisse de la place en haut-droite
   pour ne pas que le contenu de la carte passe dessous */
.resa-card-wrap:has(.resa-card-remove) .resa-card {
  padding-right: 42px;
}

/* Couleur de la bordure gauche selon type */
.resa-card[data-type="activite"]    { border-left-color: var(--resa-activite-bg); }
.resa-card[data-type="repas"]       { border-left-color: var(--resa-repas-bg); }
.resa-card[data-type="transport"]   { border-left-color: var(--resa-transport-bg); }
.resa-card[data-type="hebergement"] { border-left-color: var(--resa-hebergement-bg); }

/* Style "perso" : bordure gauche en pointillés */
.resa-card[data-source="custom"] {
  border-left-style: dashed;
  background: var(--washi-light);
}

/* Style "à faire" : fond légèrement teinté pour alerter */
.resa-card[data-status="a-faire"] {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3d0 100%);
  border-color: var(--gold);
}

.resa-card:hover,
.resa-card:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 20, 16, 0.15);
  outline: none;
}

.resa-card:active {
  transform: translateY(0);
}

/* Header de la carte : tag source + status + icône ⓘ */
.resa-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--grid);
}

.resa-card-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sumi-soft);
}

.resa-card[data-source="default"] .resa-card-tag {
  color: var(--vermillon);
}

.resa-card-status-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: var(--gold);
  color: white;
  padding: 2px 7px;
  border-radius: 2px;
}

.resa-card-info-icon {
  margin-left: auto;
  font-family: 'Shippori Mincho', serif;
  font-size: 18px;
  color: var(--sumi-soft);
  opacity: 0.7;
  line-height: 1;
}

.resa-card:hover .resa-card-info-icon {
  color: var(--vermillon);
  opacity: 1;
}

/* Heure en grand avec emoji */
.resa-card-heure {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: var(--washi-light);
  border-radius: 4px;
  border-left: 3px solid var(--vermillon);
}

/* Couleur du liseré gauche du badge heure selon le type */
.resa-card[data-type="activite"]    .resa-card-heure { border-left-color: var(--resa-activite-bg); }
.resa-card[data-type="repas"]       .resa-card-heure { border-left-color: var(--resa-repas-bg); }
.resa-card[data-type="transport"]   .resa-card-heure { border-left-color: var(--resa-transport-bg); }
.resa-card[data-type="hebergement"] .resa-card-heure { border-left-color: var(--resa-hebergement-bg); }

.resa-card-emoji {
  font-size: 22px;
  line-height: 1;
}

.resa-card-heure-text {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 17px;
  color: var(--sumi);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

/* Titre de la résa */
.resa-card-titre {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--sumi);
  line-height: 1.3;
  margin-bottom: 4px;
}

.resa-card-lieu {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--sumi-soft);
  line-height: 1.4;
  margin-bottom: 4px;
}

/* Encart "arrivée avant" mis en évidence */
.resa-card-arrivee {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--vermillon);
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.2);
  padding: 4px 8px;
  border-radius: 3px;
  margin-top: 4px;
}

.resa-card-ref {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--sumi-soft);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--grid);
  letter-spacing: 0.02em;
}

.resa-card-ref strong {
  background: var(--sumi);
  color: var(--washi);
  padding: 1px 6px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}

/* =================================================================
   📋 INLINE PLAN DETAIL — mini-timeline visible directement sur la carte
   Affiche les "créneaux verts" Express Pass USJ, déroulé Sixt, Maikoya, etc.
   Sans avoir besoin d'ouvrir la modale.
   ================================================================= */
.resa-plan {
  margin-top: 10px;
  padding: 10px 12px 8px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-left: 3px solid var(--moss);
  border-radius: 0 4px 4px 0;
}

.resa-plan-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--washi-dark);
}

.resa-plan-title-icon {
  font-size: 11px;
  line-height: 1;
}

.resa-plan-step {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.06);
}

.resa-plan-step:last-child {
  border-bottom: none;
}

.resa-plan-step-heure {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: white;
  background: var(--moss);
  padding: 3px 6px;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  height: fit-content;
  align-self: start;
}

/* Étape "phare" : créneau Express Pass imposé (⭐) ou attraction majeure → vermillon */
.resa-plan-step.is-highlight .resa-plan-step-heure {
  background: var(--vermillon);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.18);
}

.resa-plan-step.is-highlight .resa-plan-step-titre {
  color: var(--vermillon-deep);
  font-weight: 700;
}

/* Étape flexible (libre / choice) → étiquette plus discrète, or */
.resa-plan-step.is-flex .resa-plan-step-heure {
  background: var(--washi-dark);
  color: var(--sumi-soft);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resa-plan-step-body {
  min-width: 0;
  padding-top: 2px;
}

.resa-plan-step-titre {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: var(--sumi);
}

.resa-plan-step-detail {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--sumi-soft);
  margin-top: 2px;
  font-style: italic;
}

/* Bloc replié "+ X étapes" pour voir le reste du déroulé */
.resa-plan-more {
  margin-top: 4px;
}

.resa-plan-more > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
  padding: 6px 0 4px;
  display: inline-block;
}

.resa-plan-more > summary::-webkit-details-marker { display: none; }
.resa-plan-more > summary::before {
  content: '▸ ';
  display: inline-block;
  margin-right: 2px;
}
.resa-plan-more[open] > summary::before {
  content: '▾ ';
}

@media (max-width: 480px) {
  .resa-plan { padding: 8px 10px 6px; }
  .resa-plan-step { grid-template-columns: 68px 1fr; gap: 7px; }
  .resa-plan-step-heure { font-size: 10px; padding: 2.5px 5px; }
  .resa-plan-step-titre { font-size: 12.5px; }
  .resa-plan-step-detail { font-size: 11px; }
}

@media (max-width: 480px) {
  .resa-card { padding: 11px 12px; }
  .resa-card-titre { font-size: 15px; }
  .resa-card-emoji { font-size: 19px; }
  .resa-card-heure-text { font-size: 14px; }
}

/* Couleurs de base par type */
:root {
  --resa-activite-bg:    #8e6bb8;  /* violet (cat-culture) */
  --resa-activite-fg:    #6b4f8f;
  --resa-repas-bg:       #c0392b;  /* rouge food */
  --resa-repas-fg:       #8b1e1e;
  --resa-transport-bg:   #3a5a6b;  /* bleu sky-ink */
  --resa-transport-fg:   #25404f;
  --resa-hebergement-bg: #b8860b;  /* or (gold) */
  --resa-hebergement-fg: #8a640a;
}

.resa-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  line-height: 1.35;
  background: white;
  color: var(--sumi);
}

/* ====== STYLE PAR SOURCE ======
   default = OFFICIEL : fond plein de la couleur du type, texte blanc
   custom  = AJOUT PERSO : fond clair, bordure pointillée de la couleur du type
*/

/* OFFICIEL (default) : plein */
.resa-chip[data-source="default"][data-type="activite"]    { background: var(--resa-activite-bg);    color: white; border-color: var(--resa-activite-fg); }
.resa-chip[data-source="default"][data-type="repas"]       { background: var(--resa-repas-bg);       color: white; border-color: var(--resa-repas-fg); }
.resa-chip[data-source="default"][data-type="transport"]   { background: var(--resa-transport-bg);   color: white; border-color: var(--resa-transport-fg); }
.resa-chip[data-source="default"][data-type="hebergement"] { background: var(--resa-hebergement-bg); color: white; border-color: var(--resa-hebergement-fg); }

.resa-chip[data-source="default"]:hover,
.resa-chip[data-source="default"]:active {
  filter: brightness(0.92);
}

/* PERSO (custom) : outline avec pointillé, fond très clair */
.resa-chip[data-source="custom"] {
  background: var(--washi-light);
  border-style: dashed;
  border-width: 1.5px;
}
.resa-chip[data-source="custom"][data-type="activite"]    { border-color: var(--resa-activite-bg);    color: var(--resa-activite-fg); }
.resa-chip[data-source="custom"][data-type="repas"]       { border-color: var(--resa-repas-bg);       color: var(--resa-repas-fg); }
.resa-chip[data-source="custom"][data-type="transport"]   { border-color: var(--resa-transport-bg);   color: var(--resa-transport-fg); }
.resa-chip[data-source="custom"][data-type="hebergement"] { border-color: var(--resa-hebergement-bg); color: var(--resa-hebergement-fg); }

.resa-chip[data-source="custom"]:hover,
.resa-chip[data-source="custom"]:active {
  background: white;
}

/* STATUT À FAIRE : pointillé en plus, opacité réduite */
.resa-chip[data-status="a-faire"] {
  border-style: dashed;
  border-width: 2px;
  opacity: 0.92;
}

/* Tag source (OFFICIEL / PERSO) — petit chip discret en début */
.resa-source-tag {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
  white-space: nowrap;
}

/* Pour les officielles : tag blanc avec couleur du type */
.resa-chip[data-source="default"][data-type="activite"]    .resa-source-tag { background: white; color: var(--resa-activite-fg); }
.resa-chip[data-source="default"][data-type="repas"]       .resa-source-tag { background: white; color: var(--resa-repas-fg); }
.resa-chip[data-source="default"][data-type="transport"]   .resa-source-tag { background: white; color: var(--resa-transport-fg); }
.resa-chip[data-source="default"][data-type="hebergement"] .resa-source-tag { background: white; color: var(--resa-hebergement-fg); }

/* Pour les perso : tag plein dans la couleur du type */
.resa-chip[data-source="custom"][data-type="activite"]    .resa-source-tag { background: var(--resa-activite-bg);    color: white; }
.resa-chip[data-source="custom"][data-type="repas"]       .resa-source-tag { background: var(--resa-repas-bg);       color: white; }
.resa-chip[data-source="custom"][data-type="transport"]   .resa-source-tag { background: var(--resa-transport-bg);   color: white; }
.resa-chip[data-source="custom"][data-type="hebergement"] .resa-source-tag { background: var(--resa-hebergement-bg); color: white; }

.resa-heure {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.resa-titre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.resa-chip-arrow {
  flex-shrink: 0;
  opacity: 0.6;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

/* Bouton "+ Ajouter une réservation" sous la liste des jours */
.jour-resa-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px dashed var(--gold);
  padding: 4px 7px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
}

.jour-resa-add:hover,
.jour-resa-add:active {
  background: var(--gold);
  color: white;
}

/* =================================================================
   MODALE — Détail réservation + form add/edit
   ================================================================= */
.modal-backdrop {
  position: fixed;
  /* Couverture explicite de tout le viewport (plus robuste que inset:0 sur Safari iOS) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height pour Safari iOS — couvre vraiment tout */
  /* Overlay franc + blur uniforme (pas de saturate qui crée des bugs Safari) */
  background: rgba(20, 14, 10, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.modal-backdrop.is-open {
  display: flex;
}

.modal {
  background: var(--washi);
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 14px 14px 0 0;
  /* Ombre forte vers le haut pour décoller visuellement de la page derrière */
  box-shadow:
    0 -2px 0 rgba(255, 255, 255, 0.6) inset,
    0 -10px 30px rgba(0, 0, 0, 0.35),
    0 -2px 8px rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  position: relative;
  -webkit-overflow-scrolling: touch;
  animation: modal-slide-up 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes modal-slide-up {
  from { transform: translateY(20px); }
  to   { transform: translateY(0); }
}

/* Barre de drag iOS-like en haut de la modale (signal visuel "carte modale") */
.modal::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: rgba(26, 20, 16, 0.18);
  border-radius: 2px;
  margin: 8px auto 0;
  position: sticky;
  top: 8px;
  z-index: 5;
  pointer-events: none;
}

@media (min-width: 600px) {
  .modal-backdrop { align-items: center; padding: 20px; }
  .modal {
    border-radius: 8px;
    max-height: 88vh;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.08),
      0 24px 60px rgba(0, 0, 0, 0.45),
      0 8px 20px rgba(0, 0, 0, 0.25);
    animation: modal-pop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .modal::before { display: none; } /* pas de drag bar sur desktop */
}

@keyframes modal-pop {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: rgba(26, 20, 16, 0.08);
  border: none;
  border-radius: 50%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--sumi);
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: rgba(26, 20, 16, 0.18);
}

.modal-header {
  padding: 18px 50px 14px 18px;
  border-bottom: 1px solid var(--grid);
}

.modal-source-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  margin-bottom: 10px;
}

.modal-source-banner[data-source="default"] {
  background: var(--vermillon);
  color: white;
}

.modal-source-banner[data-source="custom"] {
  background: var(--gold);
  color: white;
}

.modal-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--sumi);
  margin-bottom: 6px;
}

.modal-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sumi-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.modal-subtitle .modal-jour {
  background: var(--vermillon);
  color: white;
  padding: 1px 6px;
  border-radius: 2px;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.modal-body {
  padding: 16px 18px;
}

.modal-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--grid);
  font-size: 13px;
  line-height: 1.5;
}

.modal-row:last-of-type {
  border-bottom: none;
}

.modal-row dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vermillon);
  padding-top: 2px;
}

.modal-row dd {
  color: var(--sumi);
  word-break: break-word;
}

.modal-row dd .ref-pill {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  background: var(--sumi);
  color: var(--washi);
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: 0.05em;
}

.modal-conseils {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--washi-light);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--sumi);
}

/* Plan détaillé (créneaux horaires) dans la modale */
.modal-plan-detail {
  margin-top: 16px;
  background: var(--washi-light);
  border: 1px solid var(--washi-dark);
  border-radius: 4px;
  overflow: hidden;
}

.modal-plan-title {
  background: var(--sumi);
  color: var(--washi);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-plan-title::before {
  content: '🗓';
  font-size: 12px;
}

.modal-plan-list {
  padding: 0;
}

.plan-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--washi-dark);
  align-items: flex-start;
}

.plan-step:last-child {
  border-bottom: none;
}

.plan-step-heure {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--vermillon);
  letter-spacing: 0.04em;
  background: white;
  padding: 3px 6px;
  border-radius: 2px;
  border: 1px solid var(--washi-dark);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-step-content {
  font-size: 12.5px;
  line-height: 1.5;
}

.plan-step-titre {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  color: var(--sumi);
  margin-bottom: 2px;
}

.plan-step-detail {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--sumi-soft);
  line-height: 1.5;
}

.modal-map {
  margin-top: 14px;
  border: 1px solid var(--washi-dark);
  border-radius: 3px;
  overflow: hidden;
}

.modal-map iframe {
  display: block;
  width: 100%;
  height: 200px;
  border: 0;
  filter: saturate(0.85) contrast(0.95);
}

.modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--grid);
  background: white;
}

.modal-btn {
  flex: 1 1 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
}

.modal-btn-maps {
  background: var(--sumi);
  color: var(--washi);
}

.modal-btn-maps:hover {
  background: var(--vermillon);
}

.modal-btn-maps::before {
  content: '📍';
  font-size: 12px;
}

.modal-btn-delete {
  background: transparent;
  color: var(--sumi-soft);
  border-color: var(--washi-dark);
  flex: 0 0 auto;
}

.modal-btn-delete:hover {
  color: var(--vermillon);
  border-color: var(--vermillon);
  background: var(--washi-light);
}

/* Form ajout réservation (modale dédiée) */
.modal-form {
  padding: 16px 18px;
  display: grid;
  gap: 10px;
}

.modal-form label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sumi-soft);
  margin-bottom: 3px;
}

.modal-form input[type="text"],
.modal-form input[type="time"],
.modal-form select,
.modal-form textarea {
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--washi-dark);
  background: white;
  color: var(--sumi);
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus {
  border-color: var(--vermillon);
}

.modal-form textarea {
  min-height: 60px;
  resize: vertical;
  font-family: 'Noto Sans JP', sans-serif;
}

.modal-form .row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* --- Connecteur transport entre 2 étapes --- */
.transport-connector {
  position: relative;
  margin: 0;
  padding: 14px 0 14px 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Ligne verticale pointillée à gauche */
.transport-connector::before {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 11px;
  width: 0;
  border-left: 2px dashed var(--vermillon);
  opacity: 0.55;
}

/* Bulle ronde centrée sur la ligne avec icône mode (SVG silhouette) */
.transport-icon {
  position: absolute;
  top: 50%;
  left: -4px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: var(--washi);
  border: 2px solid var(--vermillon);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vermillon);
  z-index: 3;
  box-shadow: 0 0 0 3px var(--washi), 0 1px 4px rgba(26, 20, 16, 0.12);
  transition: transform 0.2s ease;
}

.transport-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Couleur par mode — distinction visuelle immédiate */
.transport-icon[data-mode="voiture"] {
  border-color: var(--moss);
  color: var(--moss);
  background: #f1f4eb;
}

.transport-icon[data-mode="train"] {
  border-color: var(--sky-ink);
  color: var(--sky-ink);
  background: #e9eef2;
}

.transport-icon[data-mode="shinkansen"] {
  border-color: var(--vermillon);
  color: var(--vermillon);
  background: #fbeae7;
}

.transport-icon[data-mode="avion"] {
  border-color: var(--gold);
  color: var(--gold);
  background: #fbf3df;
}

.transport-icon[data-mode="bus"] {
  border-color: var(--cat-fun);
  color: var(--cat-fun);
  background: #e8eff5;
}

.transport-icon[data-mode="bateau"] {
  border-color: var(--cat-culture);
  color: var(--cat-culture);
  background: #efe7f5;
}

/* Couleur de la ligne pointillée alignée sur le mode si possible (subtil) */
.transport-connector:has(.transport-icon[data-mode="voiture"])::before {
  border-color: var(--moss);
  opacity: 0.4;
}
.transport-connector:has(.transport-icon[data-mode="avion"])::before {
  border-color: var(--gold);
  opacity: 0.5;
}
.transport-connector:has(.transport-icon[data-mode="shinkansen"])::before,
.transport-connector:has(.transport-icon[data-mode="train"])::before {
  border-color: var(--vermillon);
  opacity: 0.55;
}

.transport-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--sumi);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.transport-line .sep {
  color: var(--vermillon);
  opacity: 0.5;
}

.transport-day {
  background: var(--vermillon);
  color: white;
  padding: 1px 6px;
  border-radius: 2px;
  letter-spacing: 0.08em;
}

.transport-label {
  text-transform: uppercase;
  font-weight: 700;
}

.transport-duration {
  color: var(--sumi-soft);
  font-weight: 500;
}

.transport-note {
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--sumi-soft);
  line-height: 1.45;
}

.transport-note.takkyubin {
  color: var(--vermillon);
  font-weight: 500;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 480px) {
  .wrap {
    padding: 12px 10px 50px;
  }
  .page-header h1 {
    font-size: 30px;
  }
  .navbar-brand {
    font-size: 14px;
  }
  .nav-link {
    padding: 6px 9px;
    font-size: 9px;
  }
  .welcome .welcome-lead {
    font-size: 14px;
  }
  .welcome .meta-num {
    font-size: 16px;
  }
  .todo-input {
    font-size: 16px; /* évite le zoom auto iOS sur focus */
  }
  .ville-name {
    font-size: 22px;
  }
  .ville-desc {
    font-size: 13px;
  }
  .etape-name {
    font-size: 18px;
  }
  .etape-dates {
    font-size: 10.5px;
  }
  .vol-intl-route {
    font-size: 14px;
  }
}