/* ══════════════════════════════════════════════════════════
   Casa Flava · Composants des pages internes
   Chargé uniquement par les sept gabarits, jamais par l'accueil,
   qui porte le LCP et n'utilise rien d'ici.
   Mêmes jetons que style.css : aucun arrondi, aucune ombre,
   filets 1 px et aplats.
   ══════════════════════════════════════════════════════════ */

/* ── Hero de page interne ───────────────────────────────── */
/* --heroh-page et --h1-page sont posés par chaque page : les titres
   SEO sont longs et leur hauteur varie d'un gabarit à l'autre. */
.hero--page { min-height: var(--heroh-page, 480px); }
@media (min-width: 900px) {
  .hero--page { min-height: clamp(var(--heroh-page, 480px), 34vw, 78vh); }
}
.hero--page .hero__body { gap: 20px; }
.hero--page .hero__title {
  font-size: var(--h1-page, var(--h1));
  line-height: 1.04;
  max-width: 24ch;
}
/* Page /questions : pas de photo, le bloc sombre porte directement le titre. */
.hero--flat { min-height: 0; background: var(--abysse); }
.hero--flat .hero__body { background: none; }

/* Fil d'ariane du hero : deux ou trois libellés séparés d'un trait. */
.crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--paper);
}
.crumb__rule { width: 22px; height: 1px; background: rgba(240, 235, 224, .6); }
.crumb a:hover { color: var(--pale); }

/* Bloc de preuve chiffrée : quatre colonnes en desktop, deux en mobile. */
.proof {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  padding-top: 22px; border-top: 1px solid rgba(240, 235, 224, .34);
  color: var(--paper);
}
@media (min-width: 900px) { .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.proof__item { display: flex; flex-direction: column-reverse; gap: 6px; min-width: 0; }
.proof__value {
  margin: 0; font-family: 'Instrument Serif', Georgia, serif;
  font-size: 30px; line-height: 1;
}
@media (min-width: 900px) { .proof__value { font-size: 34px; } }
.proof__label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }

/* ── Onglets sur fond sombre, et filtres ────────────────── */
.tabs--dark .tab { color: rgba(240, 235, 224, .88); border-color: rgba(240, 235, 224, .45); }
.tabs--dark .tab:hover { border-color: var(--paper); color: var(--paper); }
.tabs--dark .tab.is-active { background: var(--paper); color: var(--nuit); border-color: var(--paper); }

/* Même motif visuel que les onglets, mais filtre une liste au lieu de
   changer un panneau, et porte un compteur. */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--gmd); }
.filter {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--line-str); color: var(--ink-82);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.filter svg { flex: none; }
.filter__count { opacity: .6; }
.filter:hover { border-color: var(--nuit); color: var(--nuit); }
.filter.is-active { background: var(--nuit); color: var(--paper); border-color: var(--nuit); }
.filters--dark .filter { color: rgba(240, 235, 224, .88); border-color: rgba(240, 235, 224, .45); }
.filters--dark .filter:hover { border-color: var(--paper); color: var(--paper); }
.filters--dark .filter.is-active { background: var(--paper); color: var(--nuit); border-color: var(--paper); }

/* Ligne d'état des filtres et de la recherche. */
.state { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pale); }
.state--ink { color: var(--ink-strong); }

/* ── Lignes tabulaires à trois colonnes ─────────────────── */
/* « Ce qui est compris » : on compare, on ne contemple pas. */
.speclist { display: flex; flex-direction: column; border-top: 1px solid var(--line-str); }
.specrow {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 20px;
  align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) { .specrow { grid-template-columns: 1fr 1.4fr auto; } }
.specrow__key { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.specrow__key svg { flex: none; }
.specrow__detail { font-size: 13.5px; line-height: 1.5; color: var(--ink-82); grid-column: 1 / -1; }
@media (min-width: 900px) { .specrow__detail { grid-column: auto; } }
.specrow__tag {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--nuit); white-space: nowrap; text-align: right;
}
/* La variante douce sert de CELLULE DE CONTENU (« Couple · salle d'eau
   privative »), pas d'etiquette courte : elle doit pouvoir revenir a la
   ligne, sinon elle deborde sous 360 px. */
.specrow__tag--soft {
  color: var(--ink-strong); white-space: normal; text-align: left;
}
@media (min-width: 900px) { .specrow__tag--soft { text-align: right; } }

.section--dark .speclist { border-top-color: var(--line-light-md); }
.section--dark .specrow { border-bottom-color: var(--line-light); }
.section--dark .specrow__detail { color: var(--paper-78); }
.section--dark .specrow__tag { color: var(--pale); }
.section--dark .specrow__tag--soft { color: rgba(240, 235, 224, .7); }

/* ── Timeline verticale ─────────────────────────────────── */
.timeline { display: flex; flex-direction: column; min-width: 0; }
.slot { display: grid; grid-template-columns: 82px 15px 1fr; }
@media (min-width: 900px) { .slot { grid-template-columns: 96px 15px 1fr; } }
.timeline--wide .slot { grid-template-columns: 96px 15px 1fr; }
@media (min-width: 900px) { .timeline--wide .slot { grid-template-columns: 110px 15px 1fr; } }
.slot__time { padding-top: 16px; font-size: 12.5px; color: var(--pale); }
.slot__gutter { display: flex; flex-direction: column; align-items: center; }
.slot__dot { width: 9px; height: 9px; margin-top: 21px; flex: none; border: 1px solid var(--pale); }
.slot__dot.is-first { background: var(--pale); }
.slot__line { width: 1px; flex: 1; background: rgba(240, 235, 224, .3); }
.slot:last-child .slot__line { display: none; }
.slot__body { padding: 14px 0 18px; min-width: 0; }
.slot__title { font-size: 15px; line-height: 1.4; }
.slot__detail { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--paper-78); }

/* Variante claire, sur fond papier (/week-end-de-groupe). */
.timeline--light .slot__time { color: var(--nuit); }
.timeline--light .slot__dot { border-color: var(--nuit); }
.timeline--light .slot__dot.is-first { background: var(--nuit); }
.timeline--light .slot__line { background: rgba(31, 42, 34, .24); }
.timeline--light .slot__detail { color: var(--ink-82); }

/* ── Plan de couchage ───────────────────────────────────── */
/* Traité comme un plan d'architecte simplifié, pas une illustration. */
.plan { display: grid; gap: var(--glg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan__house { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.plan__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-str);
}
.plan__name { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 24px; }
.plan__meta { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-68); }
.plan__level { display: flex; flex-direction: column; gap: 10px; }
.plan__label { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--nuit); }
.plan__cells { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .plan__cells[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan__cells[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cell {
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  min-height: 96px; padding: 16px 14px; min-width: 0;
  border: 1px solid rgba(31, 42, 34, .22);
}
.cell__top {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-68);
}
.cell__top svg { flex: none; }
.cell__title { font-family: 'Instrument Serif', Georgia, serif; font-size: 19px; line-height: 1.15; }
.cell__detail { margin-top: 4px; font-size: 11.5px; line-height: 1.45; color: var(--ink-72); }
.cell--room { min-height: 124px; background: rgba(45, 80, 56, .1); border-color: rgba(45, 80, 56, .55); }
.cell--room .cell__top { color: var(--nuit); }
.cell--bath { background: rgba(31, 42, 34, .05); border-color: rgba(31, 42, 34, .3); }

.plan__legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 4px; }
.legend { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-82); }
.legend__swatch { width: 18px; height: 18px; flex: none; border: 1px solid rgba(31, 42, 34, .22); }
.legend__swatch--room { background: rgba(45, 80, 56, .1); border-color: rgba(45, 80, 56, .55); }
.legend__swatch--bath { background: rgba(31, 42, 34, .05); border-color: rgba(31, 42, 34, .3); }

/* ── Photo à venir ──────────────────────────────────────── */
/* Deux chambres sont créées par les travaux : l'état fait partie du design. */
.photo-pending {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px; text-align: center; height: 100%;
  background: var(--stone); border: 1px solid rgba(31, 42, 34, .24);
}
.photo-pending svg { color: var(--ink-strong); }
.photo-pending__label {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-strong);
}
.photo-pending__note { font-size: 11.5px; line-height: 1.5; color: var(--ink-72); max-width: 26ch; }

/* ── Spécifications sous une carte ──────────────────────── */
.specs { display: flex; flex-direction: column; gap: 7px; }
.specs li { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-82); }
.specs svg { flex: none; color: var(--nuit); }

/* ── Cartes bien-être (image + spécifications, fond sombre) ─ */
.wcards {
  display: grid; gap: var(--gsm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.wcard { display: flex; flex-direction: column; background: var(--abysse); color: var(--paper); min-width: 0; }
.wcard .ph img { opacity: .92; }
.wcard__body { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.wcard__head { display: flex; align-items: center; gap: 12px; }
.wcard__name { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 26px; }
.wcard__text { font-size: 13.5px; line-height: 1.6; color: var(--paper-86); }
.wcard__specs { display: flex; flex-direction: column; margin-top: 2px; }
.wcard__specs > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-top: 1px solid rgba(240, 235, 224, .24);
}
.wcard__specs dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--pale); }
.wcard__specs dd { margin: 0; font-size: 13px; text-align: right; }

/* ── Liste d'équipements à donnée chiffrée ──────────────── */
/* La donnée de droite est le point central de la page. */
.eqgrid { display: grid; gap: 0 var(--glg); grid-template-columns: minmax(0, 1fr); }
/* Les familles s'enchainaient sans respiration : la liste se lisait comme
   un seul tableau continu au lieu de quatre blocs. */
[data-group-block] + [data-group-block] { margin-top: var(--gmd); }
@media (min-width: 900px) { .eqgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eqrow {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line-light);
}
.eqrow__key { display: flex; align-items: center; gap: 12px; font-size: 14px; min-width: 0; }
.eqrow__key svg { flex: none; }
.eqrow__value { font-size: 12.5px; color: var(--paper-78); text-align: right; }
.eqrow__value--accent { color: var(--pale); }

/* ── Étapes numérotées ──────────────────────────────────── */
.steps {
  display: grid; gap: var(--gsm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.step {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 20px; border: 1px solid var(--line-md); min-width: 0;
}
.step__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.step__num {
  font-family: 'Instrument Serif', Georgia, serif; font-size: 26px; line-height: 1;
  color: rgba(31, 42, 34, .32);
}
.step__title { font-family: 'Instrument Serif', Georgia, serif; font-size: 21px; line-height: 1.15; }
.step__text { font-size: 13px; line-height: 1.6; color: var(--ink-82); }
.step__when {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--nuit);
}

/* Étapes en ligne, dans un encadré plein (« comment ça se passe »). */
.stepline { display: flex; gap: 14px; padding: 12px 0; }
.stepline__num {
  font-family: 'Instrument Serif', Georgia, serif; font-size: 20px; line-height: 1.2;
  color: var(--pale); flex: none;
}
.stepline__text { font-size: 13.5px; line-height: 1.6; }

/* ── Encadrés ───────────────────────────────────────────── */
.box {
  display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; min-width: 0;
  border: 1px solid rgba(31, 42, 34, .26);
}
.box--paper { background: rgba(240, 235, 224, .6); }
.box--filled { background: var(--nuit); color: var(--paper); border-color: var(--nuit); }
.box--filled .box__head { color: var(--pale); }
.box--green { border-color: var(--nuit); }
/* Sur fond abysse, le vert nuit ne se distingue pas : on passe au vert pale. */
.section--dark .box--green { border-color: var(--pale); }
.section--dark .box--green .box__head { color: var(--pale); }
.section--dark .box__text { color: var(--paper-86); }
.box__head {
  display: flex; align-items: center; gap: 11px;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--nuit);
}
.box__head svg { flex: none; }
.box__head--soft { color: var(--ink-strong); }
.box__text { font-size: 13.5px; line-height: 1.6; color: var(--ink-82); }
.box--filled .box__text { color: var(--paper-86); }
.box__lines { display: flex; flex-direction: column; }
.box__lines li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5;
}
.box__lines li:first-child { border-top: 0; }
.box--filled .box__lines li { border-top-color: rgba(240, 235, 224, .24); }

/* Entrée à icône dans un encadré (« possible » / « pas ici »). */
.box__items { display: flex; flex-direction: column; }
.box__items li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--line);
}
.box__items li:first-child { border-top: 0; }
.box__items svg { flex: none; margin-top: 2px; color: var(--nuit); }
.box__items .box__label { display: block; font-size: 14.5px; line-height: 1.35; }
.box__items .box__note { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--ink-72); }
.box--soft .box__items svg { color: var(--ink-strong); }

/* Bandeau d'attente : assume le manque au lieu de le masquer. */
.notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
  padding: 22px var(--gut); background: var(--stone);
  border-bottom: 1px solid var(--line);
}
.notice > svg { flex: none; color: var(--nuit); }
.notice__text { flex: 1 1 320px; font-size: 14px; line-height: 1.6; color: rgba(31, 42, 34, .84); }
.notice .btn { border-color: var(--nuit); color: var(--nuit); }
.notice .btn:hover { background: rgba(45, 80, 56, .1); }

/* ── Cartes de saison (tarifs) ──────────────────────────── */
.seasons {
  display: grid; gap: var(--gsm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.season {
  display: flex; flex-direction: column; gap: 16px; padding: 26px 22px; min-width: 0;
  border: 1px solid var(--line-md);
}
.season--dark { background: var(--abysse); color: var(--paper); border-color: var(--abysse); }
.season__tag {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--nuit);
}
.season--dark .season__tag { color: var(--pale); }
.season__name { font-family: 'Instrument Serif', Georgia, serif; font-size: 30px; line-height: 1.1; }
.season__months { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-68); }
.season--dark .season__months { color: rgba(240, 235, 224, .7); }
/* Le bloc tarif est le point d'attente : le prix remplacera ces deux
   lignes sans toucher à la structure. */
.season__price {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.season--dark .season__price { border-color: var(--line-light); }
.season__amount { font-family: 'Instrument Serif', Georgia, serif; font-size: 26px; line-height: 1.1; }
.season__note { font-size: 12px; line-height: 1.5; color: var(--ink-72); }
.season--dark .season__note { color: var(--paper-78); }
.season__terms { display: flex; flex-direction: column; }
.season__terms li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 13px;
}
.season__terms span:last-child { color: var(--ink-72); text-align: right; }
.season--dark .season__terms span:last-child { color: var(--paper-78); }

/* ── Calendrier de disponibilité ────────────────────────── */
.months { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.month {
  display: flex; flex-direction: column; gap: 5px; padding: 16px 14px; min-width: 0;
  border: 1px solid rgba(31, 42, 34, .3);
}
.month__name { font-family: 'Instrument Serif', Georgia, serif; font-size: 20px; line-height: 1.1; }
.month__year { font-size: 11px; letter-spacing: .16em; color: var(--ink-68); }
.month__state { margin-top: 6px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.month--booked { background: var(--nuit); color: var(--paper); border-color: var(--nuit); }
.month--booked .month__year { color: rgba(240, 235, 224, .7); }
.month--closed { background: rgba(31, 42, 34, .06); }

/* ── Champ de recherche ─────────────────────────────────── */
.search {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 620px; padding: 16px 20px;
  background: var(--paper); color: var(--ink);
}
.search > svg { flex: none; color: var(--ink-72); }
.search input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--ink);
  background: none; border: 0; padding: 0;
}
.search input:focus { outline: 0; }
.search:focus-within { outline: 2px solid var(--nuit); outline-offset: 2px; }
.search__clear { display: none; padding: 4px; margin: -4px; color: var(--ink-72); }
.search__clear:hover { color: var(--nuit); }
.search.has-value .search__clear { display: flex; }

/* ── État vide ──────────────────────────────────────────── */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: var(--py) 20px; text-align: center;
}
.empty__title { font-family: 'Instrument Serif', Georgia, serif; font-size: var(--h4); line-height: 1.2; }
.empty__text { font-size: 14px; line-height: 1.7; color: var(--ink-82); max-width: 46ch; }
.empty__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── FAQ ────────────────────────────────────────────────── */
/* Question en h3, réponse en p : c'est ce format que les moteurs citent. */
.faq {
  display: grid; gap: var(--glg); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.faq__list { display: flex; flex-direction: column; min-width: 0; }
.faq__item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.faq__item:first-child { padding-top: 0; }
.faq__q {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 20px; line-height: 1.25; margin-bottom: 9px;
}
.faq__a { font-size: 14px; line-height: 1.7; color: var(--ink-82); }
.section--dark .faq__item { border-bottom-color: var(--line-light); }
.section--dark .faq__a { color: var(--paper-86); }

/* Grille de réponses sur deux colonnes (page /questions). */
.answers { display: grid; gap: 0 var(--glg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .answers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Grilles utilitaires ────────────────────────────────── */
.grid-2 { display: grid; gap: var(--glg); grid-template-columns: minmax(0, 1fr); align-items: start; }
.grid-3 { display: grid; gap: var(--gsm); grid-template-columns: minmax(0, 1fr); }
.grid-4 { display: grid; gap: var(--gsm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid-middle { align-items: center; }

/* Liste à icônes sur filet bas. */
/* width:100% : place dans une colonne .stack (flex, align-items:flex-start),
   la grille se replierait sur son contenu au lieu d'occuper la colonne. */
.iconlist {
  display: grid; gap: 0 24px; width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
.iconlist li {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid rgba(31, 42, 34, .16);
  font-size: 13.5px; line-height: 1.5;
}
.iconlist svg { flex: none; color: var(--nuit); }
.section--dark .iconlist li { border-bottom-color: var(--line-light); }
.section--dark .iconlist svg { color: var(--pale); }

/* Carte simple bordée, reprise par /venir et /week-end-de-groupe. */
.tile {
  display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; min-width: 0;
  border: 1px solid var(--line-md);
}
.tile--paper { background: rgba(240, 235, 224, .66); }
.tile__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tile__title { font-family: 'Instrument Serif', Georgia, serif; font-size: 21px; line-height: 1.15; }
.tile__text { font-size: 13px; line-height: 1.6; color: var(--ink-82); }
.tile__aside {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--nuit); white-space: nowrap;
}

/* Carte d'occasion : image, corps, métadonnée sur filet. */
.occas { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line-md); }
.occas__body { display: flex; flex-direction: column; gap: 12px; padding: 20px; flex: 1; }
.occas__tag {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--nuit);
}
.occas__title { font-family: 'Instrument Serif', Georgia, serif; font-size: 23px; line-height: 1.15; }
.occas__text { font-size: 13px; line-height: 1.6; color: var(--ink-82); }
.occas__meta {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-68);
}

/* Tableau de répartition (qui / quoi / état). */
.split-table { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.split-table > div {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.split-table__state {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--nuit);
}

/* Tableau d'horaires de train. */
.timetable { display: flex; flex-direction: column; border-top: 1px solid var(--line-light-md); }
.timetable > div {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line-light); font-size: 13.5px;
}
.timetable__note {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(240, 235, 224, .66);
}
.timetable__last { color: var(--pale); }
.timetable__last .timetable__note { color: var(--pale); }