/* AZOBÉ — feuille des pages « hebergements », chargée après styles.css (générée par découpage, voir cssplit.py). */
@layer components { .no { color: var(--fg-soft); }

  /* ---------- barres de saisons, climat ---------- */
  .seasons { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; list-style: none; padding: 0; margin: 0; }
  .seasons li { display: grid; gap: 0.3rem; text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
  .seasons li::before { content: ""; block-size: 2.5rem; background: var(--color-saison-haute); border-block-start: 3px solid var(--color-laiton); }
  .seasons li.s-split::before { background: linear-gradient(to right, var(--color-saison-basse) 0 40%, repeating-linear-gradient(135deg, var(--color-sable-2) 0 4px, #d6c7ae 4px 8px) 40% 55%, var(--color-saison-basse) 55%); border-color: var(--color-lagune); }
}

@layer pages {

  /* ================= HÉBERGEMENTS ================= */
  .filters { display: grid; gap: 0.75rem; margin-block-end: var(--space-6); }
  .filters__row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }
  .empty { padding: 2rem; border: 1px dashed var(--color-laiton); text-align: center; display: grid; gap: 0.75rem; justify-items: center; }
  .room-list { display: grid; gap: clamp(3rem, 2rem + 5vw, 6rem); }
  .room-card { display: grid; gap: var(--space-6); align-items: center; scroll-margin-block-start: calc(var(--header-h) + 1rem); }
  @media (min-width: 48em) { .room-card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); } .room-card:nth-child(even) .room-card__media { order: 2; } }
  .room-card__media { max-inline-size: 28rem; justify-self: center; inline-size: 100%; }
  .room-card__body { display: grid; gap: 1rem; }
  .room-card h2 { font-size: var(--step-3); }
  .room-card__tag { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--accent); }
  .room-card__quick { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.9rem; color: var(--fg-soft); }
  .room-card__quick span { display: inline-flex; align-items: center; gap: 0.4rem; }
  .room-card__price { display: flex; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; padding-block: 0.75rem; border-block: 1px solid var(--line); }
  .room-card__price strong { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
  .room-card__price small { color: var(--fg-soft); }
  .btn-cmp[aria-pressed="true"] { background: var(--color-nuit); color: var(--color-sable); border-color: var(--color-nuit); }
  .cmp-note { font-size: 0.875rem; color: var(--color-corail); min-block-size: 1.3em; font-weight: 500; }
  .switch { display: inline-flex; align-items: center; gap: 0.75rem; min-block-size: 44px; font-weight: 500; font-size: 0.95rem; }
  .switch__track { position: relative; inline-size: 2.75rem; block-size: 1.55rem; border-radius: 99px; background: #6B7787; transition: background-color var(--dur-2); flex: none; }
  .switch__track::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; background: #fff; transition: translate var(--dur-2) var(--ease); }
  .switch[aria-checked="true"] .switch__track { background: var(--color-foret); }
  .switch[aria-checked="true"] .switch__track::after { translate: 1.2rem 0; }
  .cmp-table { table-layout: fixed; min-inline-size: 56rem; }
  .cmp-table thead th:first-child { inline-size: 10rem; }
  .cmp-table th[scope="col"] { min-inline-size: 9.5rem; vertical-align: top; }
  .cmp-table th[scope="col"] a { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; }
  .cmp-table th[scope="row"] { min-inline-size: 9rem; }
  .cmp-table tbody th[scope="row"] { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--color-sable-2); }
  .cmp-table thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--color-sable-2); }
  .season-grid { display: grid; gap: var(--space-6); }
}

@layer components {

  /* bande des saisons : janvier, mai, décembre à cheval */
  .seasons li.s-jan::before { background: linear-gradient(to right, var(--color-saison-haute) 0 50%, var(--color-sable-2) 50%); border-color: var(--color-laiton); }
  .seasons li.s-dec::before { background: linear-gradient(to right, var(--color-sable-2) 0 48%, var(--color-saison-haute) 48%); border-color: var(--color-laiton); }
  .seasons li.s-split::before { background: linear-gradient(to right, var(--color-saison-basse) 0 12%, repeating-linear-gradient(135deg, var(--color-sable-2) 0 4px, #d6c7ae 4px 8px) 12% 58%, var(--color-saison-basse) 58%); }

  /* tableaux : aides */
  .cmp-table td, .cmp-table th { min-inline-size: 8.5rem; }
  .cmp-table tbody tr:hover > * { background: color-mix(in srgb, var(--color-laiton-clair) 12%, transparent); }
}

.u-td-none { text-decoration:none; }