@font-face {
  font-family: 'Caprasimo'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/caprasimo-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Caprasimo'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/caprasimo-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/figtree-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/figtree-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/figtree-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/figtree-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/figtree-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/figtree-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);

  --site-header-h: 60px;
  --site-sidebar-w: 320px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); }
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: none; }
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

.card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
.btn, .tag, .seg, .input { border-radius: 999px; }
.input { padding-inline: 14px; }

/* ═══════════════════════════ MISE EN PAGE DU SITE (spécifique au projet) ═══════════════════════════ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--color-accent); color: var(--color-bg); padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

.site { display: flex; flex-direction: column; min-height: 100vh; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
}
.site-header-bar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.site-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: 19px; color: var(--color-text); text-decoration: none;
  margin-right: var(--space-2);
}
.site-brand svg { color: var(--color-accent-700); flex: none; }
.site-nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-left: auto; }
.site-nav a { color: inherit; text-decoration: none; font-size: 14px; }
.site-nav a:hover { color: var(--color-accent); }
.site-sidebar-toggle { flex: none; }
.site-sidebar-toggle svg { display: block; }
.site-sidebar-toggle .icon-close { display: none; }
.site-sidebar-toggle[aria-expanded="true"] .icon-open { display: none; }
.site-sidebar-toggle[aria-expanded="true"] .icon-close { display: block; }
/* Repli DESKTOP (hors media query mobile) : visible par défaut, masqué en ajoutant .is-collapsed */
.site-sidebar.is-collapsed { display: none; }

.site-body { display: flex; flex: 1; align-items: flex-start; }

.site-sidebar {
  flex: none; width: var(--site-sidebar-w);
  padding: var(--space-4); position: sticky; top: var(--site-header-h);
  max-height: calc(100vh - var(--site-header-h)); overflow-y: auto;
}
.site-sidebar h6 { margin-top: var(--space-4); color: var(--color-accent-700); }
.site-sidebar h6:first-of-type { margin-top: var(--space-2); }
.sidebar-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-1) 0 0; }
.tag-lg { font-size: 13px; padding: 5px 12px; }
.sidebar-chips a[hidden] { display: none; }

.site-main { flex: 1; min-width: 0; }

.site-banner { padding: var(--space-8) var(--space-4) var(--space-4); max-width: 1100px; margin: 0 auto; }
.site-banner h1 { font-size: 48px; }
.site-banner p { color: color-mix(in srgb, var(--color-text) 70%, transparent); margin-bottom: var(--space-4); }

.site-footer {
  border-top: 1px solid var(--color-divider); background: var(--color-surface);
  padding: var(--space-8) var(--space-6) var(--space-4);
}
.site-footer-cols { display: flex; flex-wrap: wrap; gap: var(--space-8); max-width: 1100px; margin: 0 auto; }
.site-footer-brand { flex: 2 1 260px; }
.site-footer-brand .site-brand { padding: 0; margin-bottom: var(--space-2); }
.site-footer-brand p { font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.site-footer-col { flex: 1 1 160px; }
.site-footer-col h6 { color: var(--color-accent-700); margin-bottom: var(--space-2); }
.site-footer-col ul { list-style: none; margin: 0; padding: 0; }
.site-footer-col li { margin-bottom: 6px; }
.site-footer-col a { color: var(--color-text); text-decoration: none; font-size: 14px; }
.site-footer-col a:hover { color: var(--color-accent); }
.site-footer-bottom {
  max-width: 1100px; margin: var(--space-6) auto 0; padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* Repli mobile : sidebar cachée par défaut, révélée par site.js (bouton ☰), en surimpression
   (position: fixed) pour ne pas obliger à remonter en haut de page pour l'atteindre. */
@media (max-width: 780px) {
  body.sidebar-open { overflow: hidden; }
  .site-body { flex-direction: column; }
  .site-sidebar {
    display: none; width: 100%; max-height: none;
    position: fixed; top: var(--site-header-h); left: 0; right: 0; bottom: 0; z-index: 19;
    background: var(--color-bg); border-bottom: none; box-shadow: var(--shadow-lg);
  }
  .site-sidebar.is-open { display: block; }
  .site-nav { display: none; width: 100%; margin-left: 0; }
}

/* Contenu pas encore réhabillé (free.phtml, home.phtml…) : marges de lecture correctes en attendant
   leur tour, sans classes spécifiques. */
.site-main > div#content, .site-main > div.container { padding: var(--space-6); max-width: 900px; margin: 0 auto; }

/* — page photo (templates/layouts/photo.phtml) — */
.photo-page { max-width: 960px; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.photo-hero { margin: var(--space-4) 0; padding: 0; overflow: hidden; }
.photo-hero img { width: 100%; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.photo-hero figcaption { padding: var(--space-2) var(--space-3); font-size: 12px; }
.tag-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tag-row .tag { margin-right: 2px; }

.mini-gallery { margin: var(--space-6) 0; }
.mini-gallery h3 { font-size: 16px; }
.mini-gallery-row { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); margin-bottom: var(--space-2); }
.mini-gallery-item { flex: none; width: 96px; border-radius: var(--radius-sm); overflow: hidden; }
.mini-gallery-item img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }

.photo-meta { margin: var(--space-6) 0; }
.meta-list { margin: 0; }
.meta-list dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); margin-top: var(--space-3); }
.meta-list dt:first-child { margin-top: 0; }
.meta-list dd { margin: 2px 0 0; font-size: 14px; }

/* — galerie de miniatures (templates/partials/galerie.phtml, pages tag + galeries d'itinéraires) —
   Portrait/paysage mélangés : plutôt qu'un recadrage carré à l'Instagram (mauvais pour des photos de
   paysage ferroviaire, souvent panoramiques), un « masonry » en colonnes CSS pures (sans JS) qui
   garde le cadrage d'origine de chaque photo — la référence actuelle pour des galeries à ratios
   mixtes (Pinterest, Google Photos). */
ul.galerie { list-style: none; margin: 0; padding: 0; column-count: 3; column-gap: var(--space-3); }
ul.galerie li { break-inside: avoid; margin-bottom: var(--space-3); }
ul.galerie li img { width: 100%; border-radius: var(--radius-sm); }
ul.galerie li p { font-size: 12px; margin: 4px 0 0; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
@media (max-width: 780px) { ul.galerie { column-count: 2; } }
@media (max-width: 480px) { ul.galerie { column-count: 1; } }
/* Galerie d'itinéraire (photos -400, plus grandes) : moins de colonnes pour leur laisser la place. */
ul.galerie.galerie-lg { column-count: 2; }
@media (max-width: 480px) { ul.galerie.galerie-lg { column-count: 1; } }

/* — page itinéraire (templates/layouts/article.phtml + partials troncon/escale/boite/features) — */
.article-page { max-width: 820px; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.article-header { margin-bottom: var(--space-4); }
.article-subtitle { font-size: 17px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.article-hero { margin: 0 0 var(--space-6); padding: 0; overflow: hidden; }
.article-hero img { width: 100%; border-radius: var(--radius-md); display: block; }
.article-after { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.article-after h2 { font-size: 24px; }

/* pages statiques simples (FAQ, contact, presse, partenariats…) : contenu générique en <dl>/<span
   class="image featured"> venant directement des textes i18n (steps ['html' => …]) */
.article-page dl { margin: var(--space-4) 0; }
.article-page dl dt { font-family: var(--font-heading); font-weight: 400; font-size: 17px; margin-top: var(--space-4); }
.article-page dl dt:first-child { margin-top: 0; }
.article-page dl dd { margin: 4px 0 0; color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.article-page .image.featured { display: block; margin: var(--space-4) 0; }
.article-page .image.featured img { width: 100%; border-radius: var(--radius-md); }
.article-page iframe { border-radius: var(--radius-md); margin: var(--space-4) 0; max-width: 100%; }
.article-page .twitter-tweet {
  display: block; background: var(--color-surface); border-radius: var(--radius-md);
  padding: var(--space-4); margin: var(--space-4) 0; font-size: 14px;
}

/* timeline (étapes tronçon/escale, wrapping ajouté dans render_step(), src/Page.php) */
.timeline-step { position: relative; margin: 0 0 var(--space-6) 8px; padding-left: var(--space-6); border-left: 3px solid var(--color-neutral-300); }
.timeline-step:last-child { border-left-color: transparent; }
.timeline-dot {
  position: absolute; left: -10px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-bg); border: 3px solid var(--color-accent);
}
.timeline-content h3 { margin-top: 0; }

/* fiche technique d'un tronçon (partials/troncon.phtml) */
.fichetechnique { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-3); }
.fichetechnique h4 { font-size: 15px; margin-bottom: var(--space-2); }
.fichetechnique p { font-size: 14px; margin-bottom: 6px; }
.nom-original { font-style: italic; font-size: 13px; }

/* citations (page.*.citation, src/Page.php render_step()) — simple ou attribuée (figure+figcaption) */
p.citation, figure.citation blockquote {
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-accent-300); background: var(--color-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic;
}
figure.citation { margin: var(--space-3) 0; }
figure.citation blockquote { margin: 0; }
figure.citation figcaption {
  margin: 6px 0 0 var(--space-4); font-size: 13px; font-style: normal;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* carnet de voyage d'un tiers (page.*.carnet, src/Page.php render_step()) : bloc visuellement à
   part de la voix habituelle du site */
.carnet {
  background: var(--color-surface); border-left: 4px solid var(--color-accent-2-400);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-6); margin: var(--space-6) 0;
}
.carnet > h2:first-child { margin-top: 0; }

/* mini-carte de localisation d'une photo (partials/carte-photo.phtml), chargée au clic */
.map-card { margin-top: var(--space-4); }
.map-holder {
  display: flex; align-items: center; justify-content: center; min-height: 220px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent-2) 8%, var(--color-surface));
}
.map-holder iframe { display: block; width: 100%; border-radius: var(--radius-sm); }
.map-prompt { text-align: center; padding: var(--space-4); }
.map-prompt p { margin: var(--space-2) 0 0; font-size: 12px; max-width: 32ch; }
.map-caption { font-size: 13px; margin: var(--space-2) 0 0; }

/* lien discret « Tous les tags » en bas d'une page listing d'un tag (layouts/photo-tag.phtml) */
.tags-index-link { font-size: 13px; margin-top: var(--space-4); }

/* équipements d'un tronçon (partials/features.phtml) : pastilles en ligne plutôt qu'un <p> par ligne,
   couleur par catégorie pour distinguer confort / hygiène / ponctualité d'un coup d'œil */
.features { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-2) 0; }
.features p {
  margin: 0; padding: 4px 12px; font-size: 12px; border-radius: 999px;
}
.features p.feature-confort { background: var(--color-accent-100); color: var(--color-accent-800); }
.features p.feature-hygiene { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.features p.feature-ponctualite { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-divider); }
/* équipement absent (structurellement connu, pas deviné depuis un texte libre — troncon_features(),
   src/Helpers.php) : grisée plutôt que colorée, pour qu'on la distingue d'un coup d'œil des pastilles
   « présentes ». Règle après feature-confort/feature-hygiene pour gagner sur la couleur de catégorie. */
.features p.feature-negatif { background: var(--color-surface); color: color-mix(in srgb, var(--color-text) 50%, transparent); border: 1px solid var(--color-divider); opacity: 0.75; }
/* dernier_trajet (fraîcheur des données) : pas une pastille, une note discrète sous la liste */
.features-note { font-size: 13px; margin: 4px 0 var(--space-2); }

/* tableau d'horaires (partials/horaires.phtml) */
table.horaires { width: 100%; border-collapse: collapse; font-size: 13px; margin: var(--space-3) 0; }
table.horaires th, table.horaires td { padding: 6px var(--space-2); text-align: center; }
table.horaires th:first-child, table.horaires td:first-child { text-align: left; font-weight: 600; }
table.horaires tr:not(:last-child) th, table.horaires tr:not(:last-child) td { border-bottom: 1px solid var(--color-divider); }
table.horaires .select { background: var(--color-accent-100); border-radius: var(--radius-sm); }

/* encadrés Attention / Bon plan (partials/boite.phtml) */
.boitewarning, .boitebonplan { border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-4) 0; }
.boitewarning { background: var(--color-accent-100); }
.boitewarning h4 { color: var(--color-accent-800); font-size: 15px; }
.boitebonplan { background: var(--color-accent-2-100); }
.boitebonplan h4 { color: var(--color-accent-2-800); font-size: 15px; }
.boitewarning p:last-child, .boitebonplan p:last-child { margin-bottom: 0; }

/* carte « Et après…? » (partials/itineraire-excerpt.phtml) */
.box.excerpt { display: flex; gap: var(--space-4); background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); }
.box.excerpt .image { flex: none; width: 240px; }
.box.excerpt .image img { width: 240px; height: 170px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.box.excerpt header .date { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-700); }
.box.excerpt h3 { font-size: 20px; margin: 2px 0 4px; }
.box.excerpt p { font-size: 14px; margin: 0 0 6px; opacity: 0.9; }
.box.excerpt footer.credit p {
  font-size: 11px; opacity: 0.65; margin-top: var(--space-2); margin-bottom: 0;
}

/* Contexte compact : bloc « et après…? » (partials/itineraire-excerpt.phtml, un seul excerpt) */
.article-after .box.excerpt .image { width: 140px; }
.article-after .box.excerpt .image img { width: 140px; height: 100px; }
.article-after .box.excerpt h3 { font-size: 17px; }
.article-after .box.excerpt p { font-size: 13px; }

@media (max-width: 560px) {
  .box.excerpt { flex-direction: column; }
  .box.excerpt .image, .box.excerpt .image img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
}

/* encart Interrail (partials/interrail.phtml) */
.box.spotlight { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-4); }
.box.spotlight h2 { font-size: 20px; }
.box.spotlight article header h3 { font-size: 16px; margin-bottom: 2px; }
.box.spotlight article header p { font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.box.spotlight footer { margin-top: var(--space-3); }

/* — page d'accueil (templates/layouts/home.phtml) — */
.home-page { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.home-intro { max-width: 720px; margin-bottom: var(--space-6); color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.home-section { margin-bottom: var(--space-8); }
.home-section header { margin-bottom: var(--space-4); }
.home-section h2 { font-size: 26px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.card-tile {
  display: block; text-decoration: none; color: inherit; border-radius: var(--radius-md);
  background: var(--color-surface); overflow: hidden;
}
.card-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-tile-body { padding: var(--space-3); }
.card-tile h3 { font-size: 17px; margin-bottom: 2px; }
.card-tile p { font-size: 13px; margin: 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

.home-voyageurs { margin-top: var(--space-1); }

.home-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); margin-top: var(--space-8); }
.home-box { padding: var(--space-6); }
.home-box h2 { font-size: 22px; }
.home-box-accent-2 { background: var(--color-accent-2-100); }
.home-box-accent { background: var(--color-accent-100); }
.home-box .btn-primary { margin-top: var(--space-2); }

/* — page listing d'un tag (templates/layouts/photo-tag.phtml) — */
.tag-page { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.tag-page-header { margin-bottom: var(--space-6); }
.tag-page-header h1 { text-transform: capitalize; }

/* — aperçu cliquable des variantes (partials/route-summary.phtml, avant le détail de chaque
   variante) : mini-timeline horizontale, villes reliées par une ligne, cliquable dans son ensemble. */
.route-overview { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0 var(--space-6); }
.route-summary {
  display: block; text-decoration: none; color: inherit; background: var(--color-surface);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.route-summary:hover { background: var(--color-accent-100); }
.route-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.route-summary-title { font-family: var(--font-heading); font-size: 16px; }
.route-summary-price { font-size: 12px; color: var(--color-accent-700); white-space: nowrap; }
.route-line { display: flex; align-items: flex-start; margin-top: var(--space-4); padding: 0 var(--space-2); }
.route-stop {
  flex: 1; position: relative; text-align: center; font-size: 11px; padding-top: 16px;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}
.route-stop::before {
  content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); z-index: 1;
}
.route-stop::after {
  content: ''; position: absolute; top: 6px; left: 50%; width: 100%; height: 2px;
  background: var(--color-neutral-300); z-index: 0;
}
.route-stop:first-child { text-align: left; }
.route-stop:first-child::before { left: 4px; transform: none; }
.route-stop:last-child { text-align: right; }
.route-stop:last-child::after { display: none; }
@media (max-width: 560px) {
  .route-stop { font-size: 10px; }
}