/* ============================================================
   Components — Cards, Gallery, Timeline, etc.
   ============================================================ */

/* ——— Card lieu (grille quartier) ——— */
.card-lieu { position: relative; }
.card-lieu .media { position: relative; overflow: hidden; }
.card-lieu .media img { transition: transform 900ms var(--ease); }
.card-lieu:hover .media img { transform: scale(1.04); }
.card-lieu .media .badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; }
.card-lieu .card-body h3 { font-size: 1.5rem; line-height: 1.15; margin-bottom: 2px; }
.card-lieu .card-body .hangeul { font-size: 0.9rem; display: block; margin-bottom: 10px; }
.card-lieu .meta { display: flex; gap: 12px; color: var(--text-muted); font-size: 0.82rem; margin-top: 12px; align-items: center; }
.card-lieu .rating { color: var(--color-secondary); font-weight: 500; }
.card-lieu .rating .star { color: var(--color-accent); }

/* ——— Card quartier ——— */
.card-quartier { position: relative; }
.card-quartier .media { background: var(--bg-beige); }
.card-quartier .media img { mix-blend-mode: multiply; }
.card-quartier h3 { font-size: 1.6rem; }
.card-quartier .quartier-tagline { font-family: var(--font-serif); color: var(--text-secondary); margin-top: 4px; font-size: 1.02rem; }
.card-quartier .meta-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.count-chip { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ——— Card favori ——— */
.card-favori { position: relative; border-radius: var(--r-large); overflow: hidden; }
.card-favori .media { aspect-ratio: 4/5; }
.card-favori .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.card-favori:hover .media img { transform: scale(1.05); }
.card-favori .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,24,16,0.0) 30%, rgba(43,24,16,0.78) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px; color: #fff;
}
.card-favori .rank {
  position: absolute; top: 20px; left: 20px;
  background: var(--color-accent); color: var(--color-secondary);
  padding: 8px 16px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600;
}
.card-favori h3 { color: #fff; font-size: 2rem; line-height: 1.1; margin-bottom: 4px; }
.card-favori .sub { color: var(--color-accent); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.card-favori .line { color: rgba(249,237,204,0.9); font-family: var(--font-serif); font-size: 1.05rem; }

/* XXL favori (#1) */
.card-favori-xxl .media { aspect-ratio: 21/9; }
.card-favori-xxl h3 { font-size: 3.2rem; }
@media (max-width: 768px) {
  .card-favori-xxl .media { aspect-ratio: 4/5; }
  .card-favori-xxl h3 { font-size: 2rem; }
}

/* ——— Filter chips ——— */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--bg-beige); color: var(--text-secondary);
  font-size: 0.85rem; font-weight: 500;
  border: 1px solid transparent;
  transition: all var(--t-fast);
}
.chip:hover { background: #f5ebe0; }
.chip.active { background: var(--color-secondary); color: var(--bg-warm); }
.chip.toggle { display: inline-flex; align-items: center; gap: 6px; }
.chip.toggle::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.chip.toggle.active::before { background: var(--color-green); }

/* ——— Tip de Jimin callout ——— */
.tip-callout {
  background: var(--bg-warm);
  border-radius: var(--r-large);
  padding: 32px;
  display: grid; grid-template-columns: auto 1fr; gap: 24px;
  align-items: start;
}
.tip-callout .avatar {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: var(--bg-beige);
  flex-shrink: 0;
}
.tip-callout .avatar img { width: 100%; height: 100%; object-fit: cover; }
.tip-callout .eyebrow { color: var(--color-primary); margin-bottom: 6px; }
.tip-callout p {
  font-family: var(--font-sans);
  font-size: 1.3rem; line-height: 1.5;
  color: var(--color-secondary);
  margin: 0;
}
@media (max-width: 600px) {
  .tip-callout { grid-template-columns: 1fr; padding: 24px; }
  .tip-callout p { font-size: 1.1rem; }
}

/* ——— Saviez-vous block ——— */
.saviez-vous {
  border-left: 3px solid var(--color-accent);
  background: var(--bg-beige);
  padding: 24px 28px;
  border-radius: 0 var(--r-std) var(--r-std) 0;
}
.saviez-vous .eyebrow { color: var(--color-primary); margin-bottom: 8px; display: block; }
.saviez-vous p { margin: 0; color: var(--text-primary); }

/* ——— Gallery ——— */
/* Ordinateur : mosaïque, la première photo en grand ; la grille suit le nombre de photos (n-2 à n-6). */
.gallery-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  aspect-ratio: 16/10;
  border-radius: var(--r-large);
  overflow: hidden;
}
.gallery-mosaic > *:nth-child(1) { grid-row: 1 / 3; }
.gallery-mosaic img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
@media (min-width: 701px) {
  .gallery-mosaic.n-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .gallery-mosaic.n-2 > *:nth-child(1) { grid-row: auto; }
  .gallery-mosaic.n-3 { grid-template-columns: 2fr 1fr; }
  .gallery-mosaic.n-4 > *:nth-child(2) { grid-column: 2 / 4; }
  .gallery-mosaic.n-6 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; aspect-ratio: 3/2; }
  .gallery-mosaic.n-6 > *:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .gallery-count { display: none; }
}
/* Téléphone : une photo carrée pleine largeur, on glisse au doigt, compteur « 1 / n ». */
@media (max-width: 700px) {
  .gallery-mosaic {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    aspect-ratio: 1 / 1; gap: 0; border-radius: 0;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .gallery-mosaic::-webkit-scrollbar { display: none; }
  .gallery-mosaic > img { flex: 0 0 100%; scroll-snap-align: start; }
  .gallery-count {
    position: absolute; right: 12px; bottom: 12px;
    padding: 4px 10px; border-radius: var(--r-pill);
    background: rgba(20, 12, 8, 0.62); color: #fff;
    font: 500 0.78rem/1.4 var(--font-sans); letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
  }
}

/* ——— Numeric steps (comment utiliser) ——— */
.steps-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step .num { font-family: var(--font-serif); font-size: 4rem; color: var(--color-primary); line-height: 1; }
.step h3 { font-size: 1.5rem; margin: 12px 0 8px; }
.step p { color: var(--text-secondary); margin: 0; }
@media (max-width: 768px) { .steps-3 { grid-template-columns: 1fr; gap: 32px; } }

/* ——— AQI dot ——— */
.aqi-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.aqi-good { background: var(--color-green); }
.aqi-mod  { background: var(--color-accent); }
.aqi-bad  { background: var(--color-primary); }

/* ——— Info blocks ——— */
.info-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.info-row:last-child { border-bottom: 0; }
.info-row .label { flex-shrink: 0; width: 28px; color: var(--color-primary); margin-top: 2px; font-size: 1.05rem; }
.info-row .val { flex: 1; font-size: 0.95rem; color: var(--text-primary); }
.info-row .val small { color: var(--text-muted); font-size: 0.8rem; display: block; margin-top: 2px; }

/* ——— Sticky actions ——— */
.sticky-actions {
  position: sticky; bottom: 24px; z-index: 20;
  background: #fff; border-radius: var(--r-pill);
  box-shadow: var(--shadow-strong);
  padding: 8px; display: inline-flex; gap: 4px;
  border: 1px solid var(--border);
}

/* ——— Divider ——— */
.divider-korean {
  text-align: center;
  font-family: var(--font-serif);
  color: var(--color-primary);
  font-size: 1rem;
  margin: 60px 0;
  display: flex; align-items: center; gap: 20px;
}
.divider-korean::before, .divider-korean::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ——— Price pill ——— */
.price { color: var(--color-green); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.05em; }

/* ——— Quick peek overlay ——— */
.quick-peek {
  position: absolute; inset: 0;
  background: rgba(43,24,16,0.85);
  color: #fff; padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.card-lieu:hover .quick-peek { opacity: 1; pointer-events: auto; }
.quick-peek .qp-dots { display: flex; gap: 4px; margin-top: auto; }
.quick-peek .qp-dots span { flex: 1; height: 2px; background: rgba(255,255,255,0.3); }
.quick-peek .qp-dots span.on { background: var(--color-accent); }

/* ============================================================
   Currency converter — inline annotations + popover (Option C)
   ============================================================ */

/* Montant ₩ rendu cliquable */
.fx-amount {
  cursor: pointer;
  border-bottom: 1px dotted var(--color-primary);
  transition: color var(--t-fast), background var(--t-fast);
  border-radius: 2px;
  padding: 0 1px;
}
.fx-amount:hover,
.fx-amount:focus-visible {
  color: var(--color-primary-dark);
  background: rgba(209, 123, 110, 0.08);
  outline: none;
}

/* Équivalent € inline (gris discret, dans la police du montant en wons) */
.fx-eur {
  color: var(--text-muted);
  font-weight: 400;
  white-space: nowrap;
  margin-left: 2px;
}

/* Popover convertisseur */
.fx-popover {
  position: absolute;
  width: 280px;
  background: var(--bg-white);
  border-radius: var(--r-std);
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--border);
  z-index: 1000;
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  font-family: var(--font-sans);
}
.fx-popover.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.fx-popover-arrow {
  position: absolute;
  top: -7px;
  width: 12px; height: 12px;
  background: var(--bg-white);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
/* Quand le popover ouvre vers le haut, la flèche descend en bas */
.fx-popover.above .fx-popover-arrow {
  top: auto;
  bottom: -7px;
  border-left: 0;
  border-top: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.fx-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border);
}
.fx-popover-title {
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-secondary);
}
.fx-popover-close {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.fx-popover-close:hover { background: var(--bg-beige); color: var(--color-primary-dark); }
.fx-popover-body {
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fx-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fx-row-label {
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fx-input {
  font-family: inherit;
  font-size: 1.4rem;
  color: var(--color-secondary);
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 4px 0 6px;
  background: transparent;
  outline: none;
  width: 100%;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast);
}
.fx-input:focus { border-bottom-color: var(--color-primary); }
.fx-arrows {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 2px 0;
}
.fx-popover-foot {
  padding: 8px 16px 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.fx-rate-info {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.fx-rate-src {
  font-size: 0.72rem;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .fx-popover { width: calc(100vw - 24px); }
}
@media (hover: none) { .quick-peek { display: none; } }

/* ——— Chargement (docs/07, 23 octobre 2026 : « le reflet ») ———
   Une photo pas encore là attend dans sa case beige, puis arrive entière, en fondu (chargement.js). La fiche, le
   quartier, les coups de cœur et la page Quartiers montrent leur forme en blocs beige pendant que leur script les
   construit. Si l'attente dépasse 0,7 s, une lumière chaude passe sur les blocs et sur les cases encore vides : rien
   ne bouge quand la page arrive vite. Deux classes par règle : les pages donnent parfois un fond à leurs cases. */
:root {
  --ch-fond: #F4ECE4;     /* le beige du carnet, un cran plus soutenu */
  --ch-reflet: #FBF7F2;   /* la lumière qui passe */
}
.ch-case:not(.ch-fini) { background-color: var(--ch-fond); }
.cpe-photo.ch-case { border-radius: 14px; }
img.ch-attend { opacity: 0; }
img.ch-arrive { animation: ch-fondu 450ms ease both; }
@keyframes ch-fondu { from { opacity: 0; } }

.ch-bloc { background-color: var(--ch-fond); border-radius: 8px; }
.ch-squelette .ch-bloc, .ch-case:not(.ch-pret) {
  background-image: linear-gradient(100deg, transparent 0 35%, var(--ch-reflet) 50%, transparent 65% 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  animation: ch-reflet 1.5s 700ms ease-in-out infinite both;
}
@keyframes ch-reflet { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* La forme des pages, écrite dans la page à la place de « Chargement… », remplacée par le contenu. Elle occupe l'écran :
   le pied de page reste en bas pendant l'attente. Le texte « Chargement… » reste pour les lecteurs d'écran. */
.ch-squelette { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
.ch-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ch-squelette .ch-texte { padding: 24px var(--section-pad-x) 0; }
.ch-squelette .ch-ligne { height: 14px; margin-bottom: 12px; }
.ch-squelette .ch-ligne.ch-courte { width: 62%; }

/* La fiche (lieu.html) : au téléphone, la photo carrée en tête, puis les étiquettes, le prix, le nom, le coréen et le
   texte ; à l'ordinateur, le texte d'abord, puis la mosaïque des photos */
.ch-fiche .ch-photo { aspect-ratio: 1 / 1; border-radius: 0; }
.ch-fiche .ch-pastilles { display: flex; gap: 8px; margin-bottom: 18px; }
.ch-fiche .ch-pastille { width: 132px; height: 26px; border-radius: var(--r-pill); }
.ch-fiche .ch-pastille + .ch-pastille { width: 56px; }
.ch-fiche .ch-prix { width: 78%; height: 12px; margin-bottom: 22px; }
.ch-fiche .ch-nom { width: 52%; height: 42px; margin-bottom: 14px; }
.ch-fiche .ch-han { width: 30%; height: 24px; margin-bottom: 26px; }
@media (min-width: 701px) {
  .ch-fiche { display: flex; flex-direction: column; max-width: var(--max-wide); margin: 0 auto; padding: 56px var(--section-pad-x) 0; }
  .ch-fiche .ch-texte { order: -1; width: 100%; max-width: 640px; min-height: 440px; padding: 0 0 40px; }   /* l'en-tête de la fiche est haut : la mosaïque vient dessous */
  .ch-fiche .ch-photo { aspect-ratio: 16 / 10; border-radius: var(--r-large); }
}

/* Le quartier (quartier.html) : le surtitre, le nom, le coréen, l'accroche et le texte, puis la carte du quartier
   (à côté, à l'ordinateur) */
.ch-quartier { max-width: var(--max-wide); margin: 0 auto; padding: 64px var(--section-pad-x) 0; display: grid; gap: 32px; align-content: start; }
.ch-quartier .ch-texte { padding: 0; }
.ch-quartier .ch-surtitre { width: 110px; height: 12px; margin-bottom: 28px; }
.ch-quartier .ch-nom { width: 55%; height: 48px; margin-bottom: 10px; }
.ch-quartier .ch-han { width: 28%; height: 36px; margin-bottom: 22px; }
.ch-quartier .ch-accroche { width: 66%; height: 18px; margin-bottom: 36px; }
.ch-quartier .ch-carte { height: 420px; border-radius: var(--r-large); }
@media (min-width: 601px) { .ch-quartier .ch-carte { height: 460px; } }
@media (min-width: 901px) {
  .ch-quartier { grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: end; padding-top: 80px; }
  .ch-quartier .ch-carte { height: auto; aspect-ratio: 1 / 1; }
}

/* Un coup de cœur (favoris.html), sous le titre : sa grande photo, son quartier, son nom, son texte. Posé juste après la
   liste des coups de cœur, il s'efface dès que la page y ajoute le premier. */
#fav-main:not(:empty) + .ch-attente { display: none; }
.ch-coeur { max-width: var(--max-wide); margin: 0 auto; padding: 32px var(--section-pad-x) 48px; display: grid; gap: 32px; align-content: start; }
.ch-coeur .ch-texte { padding: 0; }
.ch-coeur .ch-photo { aspect-ratio: 4 / 5; border-radius: var(--r-large); }
.ch-coeur .ch-surtitre { width: 90px; height: 12px; margin-bottom: 16px; }
.ch-coeur .ch-nom { width: 50%; height: 36px; margin-bottom: 16px; }
@media (min-width: 901px) { .ch-coeur { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 80px var(--section-pad-x); } }

/* La page Quartiers, à la place de « Chargement des quartiers… » : sa vue par défaut, la carte d'ensemble puis la liste
   des quartiers, un numéro, un nom et une accroche par ligne (la carte en haut au téléphone, à gauche à l'ordinateur) */
.ch-qx { min-height: 0; display: grid; gap: 32px; }
.ch-qx .ch-texte { padding: 0; }
.ch-qx .ch-carte { height: 60vh; border-radius: var(--r-large); }
.ch-qx .ch-rang { display: grid; grid-template-columns: 60px 1fr; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--border); }
.ch-qx .ch-num { width: 40px; height: 36px; }
.ch-qx .ch-nom { display: block; width: 50%; height: 22px; margin-bottom: 10px; }
.ch-qx .ch-ligne { display: block; margin-bottom: 0; }
@media (min-width: 901px) {
  .ch-qx { grid-template-columns: 1.4fr 1fr; height: 78vh; min-height: 600px; }
  .ch-qx .ch-carte { height: auto; }
}

/* La carte pas encore dessinée : un quadrillage léger, comme Apple Plans, jusqu'à sa première tuile (chargement.js
   pose ch-actif sur la page). Ensuite, ce qui n'est pas encore chargé garde le fond beige de la carte, comme avant. */
.ch-actif #jimin-map:not(.ch-fond-pret), .ch-actif .leaflet-container:not(.ch-fond-pret) {
  background-image: linear-gradient(rgba(97, 33, 15, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(97, 33, 15, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Moins d'animations : pas de reflet, un fondu bref pour les photos */
@media (prefers-reduced-motion: reduce) {
  .ch-squelette .ch-bloc, .ch-case:not(.ch-pret) { animation: none; }
  .ch-squelette .ch-bloc, .ch-case:not(.ch-pret) { background-image: none; }
  img.ch-arrive { animation-duration: 150ms; }
}