/*!
 * ui.css — composants interactifs des pages intérieures : tableau comparatif, onglets, filtres, modale.
 * À charger APRÈS styles.css (et content.css). Pages : services, réalisations, FAQ, méthode, secteurs… selon besoin.
 */
@layer components {
  /* ---------- Tableau comparatif ---------- */
  .table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-raised); }
  .table-wrap:focus-visible { outline-offset: 2px; }
  .table { inline-size: 100%; min-inline-size: 42rem; font-size: var(--step--1); }
  .table caption { padding: 0.9rem 1rem; text-align: start; font-weight: 600; caption-side: top; border-block-end: 1px solid var(--c-line); }
  .table th, .table td { padding: 0.85rem 1rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--c-line); }
  .table tbody tr:last-child > * { border-block-end: 0; }
  .table thead th { font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-2); background: var(--c-surface); }
  .table tbody th { font-weight: 600; }
  .table th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--c-raised); box-shadow: inset -1px 0 0 var(--c-line); }
  .table thead th:first-child { background: var(--c-surface); }
  .table .is-featured { background: color-mix(in srgb, var(--c-accent) 11%, var(--c-raised)); }
  .table thead .is-featured { color: var(--c-text); }
  .yes, .no { display: inline-flex; align-items: center; gap: 0.35rem; }
  .yes { color: var(--c-led-text); font-weight: 550; }
  .no { color: var(--c-text-3); }

  /* ---------- Onglets ---------- */
  .tabs__list { display: flex; gap: 0.25rem; overflow-x: auto; border-block-end: 1px solid var(--c-line); scrollbar-width: thin; }
  .tabs__tab { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding: 0.5rem 1rem; margin-block-end: -1px; border-block-end: 2px solid transparent; font-weight: 550; font-size: var(--text-ui); color: var(--c-text-2); text-decoration: none; white-space: nowrap; }
  .tabs__tab:hover { color: var(--c-text); }
  .tabs__tab[aria-selected="true"] { color: var(--c-text); border-block-end-color: var(--c-accent); }
  .tabs__panel { padding-block-start: var(--space-m); }
  .tabs__panel:focus-visible { outline-offset: 6px; }

  /* ---------- Filtres ---------- */
  .filters { display: grid; gap: var(--space-s); margin-block-end: var(--space-m); }
  .filters__group { display: grid; gap: 0.5rem; }
  .filters__legend { font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3); }
  .filters__options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .filters__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding-block: 0.75rem; border-block: 1px solid var(--c-line); }
  .filters__count { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.04em; color: var(--c-text-2); }
  .filters__count strong { color: var(--c-text); font-weight: 600; }
  .filters__empty { padding: var(--space-l); text-align: center; border: 1px dashed var(--c-line-strong); border-radius: var(--radius-l); color: var(--c-text-2); }

  /* ---------- Fenêtre modale ---------- */
  .dialog { padding: 0; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-bg); color: var(--c-text); inline-size: min(40rem, 100% - 2rem); max-block-size: min(88dvh, 52rem); margin: auto; box-shadow: var(--shadow-3); }
  .dialog::backdrop { background: rgb(13 19 33 / 0.6); }
  .dialog__inner { display: grid; gap: var(--space-s); padding: var(--space-l); }
  .dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-s); }
  .dialog__title { font-size: var(--step-2); }
  .dialog__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; margin-block-start: var(--space-xs); }
  :root:has(.dialog[open]) { overflow: hidden; }
  @media (prefers-reduced-motion: no-preference) {
    .dialog[open] { animation: dialog-in var(--dur-3) var(--ease-out); }
    .dialog[open]::backdrop { animation: fade-in var(--dur-3) var(--ease-out); }
  }
  @keyframes dialog-in { from { opacity: 0; translate: 0 1rem; scale: 0.98; } }
  @keyframes fade-in { from { opacity: 0; } }
}