/* ==========================================================================
   Fiche Wat Pha Lat. Chargée par cette fiche seulement, après place.css et
   story.css, dont elle reprend les chapitres, la photo annotée, la chronique
   et les panneaux.

   Deux teintes locales, tirées du lieu et réservées à leurs blocs :
   - la mousse sur la brique du chedi, qui prend ici la place de la brique de
     Wat Chedi Luang (filets, dates de la chronique, appels de note) :
     7,0:1 sur blanc, 6,4:1 sur la brume, elle porte du texte ;
   - la latérite du sentier, pour le seul tracé du Monk's Trail, dans la coupe
     et sur les trois façons d'arriver (6,6:1 sur blanc, 5,2:1 sur le sol de la coupe).
   Le reste est la palette du site.
   ========================================================================== */
:root {
  --c-brick: #4F5E3A;
  --c-brick-soft: #E9EDDF;
  --c-laterite: #8F4A20;
  --c-ground: #E6E3D8;
}

/* --- Ouverture ---------------------------------------------------------------
   La salle à arcades est au centre, l'eau en bas. Le voile, teinté teck et non
   bleu nuit, ne couvre que le bas et la gauche, là où est le texte. */
@media (min-width: 768px) {
  .hero--wat-pha-lat.hero--shot::after {
    background:
      linear-gradient(180deg, rgba(22,33,29,0) 0%, rgba(22,33,29,0) 46%, rgba(22,33,29,.72) 100%),
      linear-gradient(90deg, rgba(22,33,29,.7) 0%, rgba(22,33,29,.38) 40%, rgba(22,33,29,0) 64%);
  }
}
@media (max-width: 767px) {
  .hero--wat-pha-lat.hero--shot::after {
    background: linear-gradient(180deg, rgba(22,33,29,0) 0%, rgba(22,33,29,.1) 34%,
                rgba(22,33,29,.6) 50%, rgba(22,33,29,.86) 68%, rgba(22,33,29,.95) 100%);
  }
}
.hero--wat-pha-lat .place-title__name,
.hero--wat-pha-lat .place-title__tag,
.hero--wat-pha-lat .eyebrow { text-shadow: 0 1px 2px rgba(22,33,29,.7), 0 0 22px rgba(22,33,29,.5); }

/* Sous 1024 px, les repères pratiques remontent entre le chapô (ses deux
   paragraphes, intacts) et l'avis : sans cela, il faut deux écrans et demi
   pour lire l'horaire sur un téléphone. Le chapô se fond dans la colonne
   (display: contents) pour que l'encadré s'y glisse ; ses paragraphes gardent
   leur mesure, l'avis et le profil la leur. L'avis et le profil ne contiennent
   aucun lien : l'ordre du focus clavier reste celui de l'écran. Au-dessus de
   1024 px, rien ne bouge. */
@media (max-width: 1023px) {
  .story-open__inner { display: flex; flex-direction: column; gap: 0; }
  .story-open__intro { display: contents; }
  .story-open__intro > p:not(.story-take) { max-width: 38rem; }
  .story-open__intro > .story-take,
  .story-open__intro > .story-fit { order: 2; }
  .story-open__inner > .brief { order: 1; margin: var(--sp-4) 0 var(--sp-7); }
}

/* --- La montagne en coupe ---------------------------------------------------
   Le bloc signature. Le schéma à gauche, les trois dénivelés à droite, en
   Fraunces noire à grand corps : ce qu'il faut monter, ou descendre, selon la
   façon d'arriver. Les chiffres disent en clair ce que le dessin montre. */
.relief {
  margin-inline: 0; padding: var(--sp-6); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-card);
  display: grid; gap: var(--sp-6);
}
@media (min-width: 960px) {
  .relief { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; padding: var(--sp-7); gap: var(--sp-7); }
  .relief__cap { grid-column: 1 / -1; }
}
.relief__draw svg { display: block; width: 100%; height: auto; max-height: 640px; }
.relief__figs { display: grid; gap: var(--sp-5); }
.relief__fig + .relief__fig { border-top: 1px solid var(--c-border); padding-top: var(--sp-5); }
.relief__num {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-variation-settings: "opsz" 72;
  font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: .95; color: var(--c-laterite);
  font-variant-numeric: lining-nums; letter-spacing: -.01em;
}
.relief__fig:last-child .relief__num { color: var(--c-muted); }
.relief__k { margin: var(--sp-2) 0 var(--sp-1); font-weight: 700; color: var(--c-primary); }
.relief__n { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-muted); max-width: 26rem; }
.relief__cap { margin: 0; font-size: 14px; line-height: 1.55; color: var(--c-muted); max-width: 44rem; border-top: 1px solid var(--c-border); padding-top: var(--sp-4); }
@media (max-width: 559px) {
  .relief { padding: var(--sp-4); }
  .relief__figs { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 560px) and (max-width: 959px) {
  .relief__figs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
  .relief__fig + .relief__fig { border-top: 0; padding-top: 0; border-left: 1px solid var(--c-border); padding-left: var(--sp-4); }
}
/* Le dessin. Le sentier en latérite pleine jusqu'au temple, en pointillé
   au-delà, où il n'est plus balisé ; la route en pointillé fin gris. Les
   textes sont écrits grands dans les unités du schéma pour rester lisibles à
   13–14 px quand il est réduit de moitié sur un téléphone. */
.pr-grid { stroke: var(--c-border); stroke-width: 1.5; }
.pr-tick { stroke: var(--c-muted); stroke-width: 2; }
.pr-ground { fill: var(--c-ground); }
.pr-trail { fill: none; stroke: var(--c-laterite); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.pr-trail--up { stroke-dasharray: 12 9; }
.pr-road { fill: none; stroke: var(--c-muted); stroke-width: 3; stroke-dasharray: 3 7; stroke-linecap: round; }
.pr-cross { stroke: var(--c-muted); stroke-width: 3; stroke-linecap: round; }
.pr-walkdown { fill: none; stroke: var(--c-primary); stroke-width: 2.5; stroke-dasharray: 4 5; }
.pr-lead { fill: none; stroke: var(--c-laterite); stroke-width: 2; stroke-dasharray: 3 5; }
.pr-park { fill: var(--c-surface); stroke: var(--c-primary); stroke-width: 3; }
.pr-dot { fill: var(--c-surface); stroke: var(--c-laterite); stroke-width: 4; }
.pr-dot--key { fill: var(--c-brick); stroke: var(--c-surface); stroke-width: 4; }
.pr-axis { fill: var(--c-muted); font-family: var(--font-body); font-size: 20px; }
.pr-seg { fill: var(--c-laterite); font-family: var(--font-body); font-size: 22px; font-weight: 700; }
.pr-l { fill: var(--c-text); font-family: var(--font-body); font-size: 24px; font-weight: 700; }
.pr-l--key { fill: var(--c-brick); font-size: 27px; }
.pr-l-m { font-weight: 400; fill: var(--c-muted); font-size: 22px; }
.pr-exag { fill: var(--c-laterite); font-family: var(--font-body); font-size: 20px; font-weight: 700; }
.pr-city { fill: var(--c-muted); font-family: var(--font-body); font-size: 20px; font-style: italic; }

/* --- Trois façons d'arriver ----------------------------------------------------
   D'abord un tableau qu'on lit d'un coup d'œil : quatre critères, trois façons.
   Chaque colonne porte en tête le trait qu'elle a dans la coupe : route grise,
   sentier en latérite plein, sentier prolongé en pointillé. Sous 640 px le
   tableau devient une grille : l'intitulé du critère sur toute la largeur, les
   trois valeurs dessous, chacune sous le trait de sa colonne. Puis une fiche
   par façon, ses précisions repliées dans un <details>. */
.ways { display: grid; gap: var(--sp-6); }
.wg { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.wg__cap { caption-side: top; text-align: left; margin: 0 0 var(--sp-3); font-weight: 700; color: var(--c-primary); }
.wg th, .wg td { text-align: left; vertical-align: top; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; }
.wg tbody tr { border-top: 1px solid var(--c-border); }
.wg tbody th { font-size: 13px; font-weight: 700; color: var(--c-muted); width: 7.5rem; }
.wg thead th { position: relative; padding-top: calc(var(--sp-3) + 5px); font-size: 16px; }
.wg thead th::before { content: ""; position: absolute; left: 0; right: var(--sp-3); top: 0; height: 5px; border-radius: 3px; background: var(--c-muted); }
.wg thead th a { color: var(--c-primary); font-weight: 700; text-decoration: none; display: inline-block; min-height: 24px; }
.wg thead th a:hover { text-decoration: underline; }
.wg thead .wg__col--trail::before { background: var(--c-laterite); }
.wg thead .wg__col--summit::before { border-radius: 0; background: repeating-linear-gradient(90deg, var(--c-laterite) 0 14px, transparent 14px 22px); }
.wg thead th + th, .wg td + td { padding-left: var(--sp-3); }
.wg thead th + th::before { left: var(--sp-3); }
@media (max-width: 639px) {
  .wg, .wg thead, .wg tbody, .wg caption { display: block; }
  .wg tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-3); }
  .wg thead tr { align-items: start; }
  .wg__corner { display: none; }
  .wg thead th, .wg thead th + th { padding: calc(var(--sp-2) + 5px) 0 0; font-size: 14px; line-height: 1.3; }
  .wg thead th::before, .wg thead th + th::before { left: 0; right: 0; }
  .wg tbody tr { padding-block: var(--sp-2); }
  .wg tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 var(--sp-1); }
  .wg td, .wg td + td { padding: 0; font-size: 14px; }
}
.ways__cards { display: grid; gap: var(--sp-4); }
@media (min-width: 1024px) { .ways__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); align-items: start; } }
.way {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card);
  padding: var(--sp-5); position: relative; scroll-margin-top: 140px;
}
.way__t { margin: 0 0 var(--sp-2); color: var(--c-primary); font-size: clamp(1.2rem, 2vw, 1.35rem); line-height: 1.2; }
.way__take { margin: 0; font-size: 16px; line-height: 1.55; }
.way__more { margin-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.way__more summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--c-primary); list-style: none;
}
.way__more summary::-webkit-details-marker { display: none; }
.way__more summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--c-muted); }
.way__more[open] summary::after { content: "\2212"; }
.way__more summary:focus-visible { outline: 2px solid var(--c-cta); outline-offset: 2px; border-radius: 4px; }
.way__list { margin: 0 0 var(--sp-1); }
.way__row { padding-block: var(--sp-2); }
.way__row + .way__row { border-top: 1px solid var(--c-border); }
.way__row dt { font-size: 13px; font-weight: 700; color: var(--c-muted); margin-bottom: 2px; }
.way__row dd { margin: 0; font-size: 15px; line-height: 1.5; }
@media (max-width: 479px) { .way { padding: var(--sp-4); } }

/* --- Deux points de départ ------------------------------------------------------
   Le parking du temple et le départ du sentier ne sont pas au même endroit :
   chacun porte la marque qu'il a dans la coupe (carré vert : la route ;
   cercle de latérite : le départ du sentier), ses coordonnées et un lien
   d'itinéraire qui ouvre l'application de cartes du téléphone. */
.access__h { margin: 0 0 var(--sp-3); font-weight: 700; color: var(--c-primary); }
.access__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .access__list { grid-template-columns: 1fr 1fr; } }
.access__pt {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-3);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-4) var(--sp-5);
}
.access__mark { width: 18px; height: 18px; margin-top: 4px; box-sizing: border-box; }
.access__pt--road .access__mark { border: 3px solid var(--c-primary); border-radius: 3px; }
.access__pt--trail .access__mark { border: 4px solid var(--c-laterite); border-radius: 50%; }
.access__t { margin: 0 0 var(--sp-1); font-size: 1.1rem; line-height: 1.25; color: var(--c-primary); }
.access__p { margin: 0 0 var(--sp-2); font-size: 15px; line-height: 1.55; }
.access__coord { margin: 0 0 var(--sp-3); font-size: 14px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.access__coord span { font-weight: 700; margin-right: 4px; }
.access__links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.access__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--c-primary); }
.access__links .access__go {
  padding: 0 var(--sp-4); border-radius: var(--r-btn); background: var(--c-primary); color: #fff; text-decoration: none;
}
.access__links .access__go:hover { background: var(--c-primary-deep); }
.access__note { margin: var(--sp-3) 0 0; font-size: 14px; line-height: 1.55; color: var(--c-muted); max-width: 44rem; }

/* --- Chronologie compacte -------------------------------------------------------
   La légende des marques une seule fois, sous le titre ; sur chaque ligne, la
   marque seule devant l'intitulé. Plein : daté ; cercle pointillé : tradition ;
   hachures : une seule source ou des sources qui divergent. */
.chron__key { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: 13px; color: var(--c-muted); }
.chron__key li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.chron__mark { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; flex: none; }
.chron__t .chron__mark { margin-right: 8px; vertical-align: -1px; }
.chron__mark--dated { background: var(--c-brick); }
.chron__mark--chronicle { border: 2px dashed var(--c-brick); }
.chron__mark--disputed { border-radius: 3px; outline: 1px solid var(--c-brick); background: repeating-linear-gradient(45deg, var(--c-brick) 0 2px, transparent 2px 5px); }

/* Les intitulés « Tarifs » et « Horaires » sont des titres (h3) : on les cherche. */
h3.signs__h { font-size: clamp(1.15rem, 1.8vw, 1.3rem); line-height: 1.25; }