/* ============================================================================
   Strata Landing — styles spécifiques à la vitrine publique
   Les composants de base (vnct-progress-bar, vnct-tile, vnct-btn, etc.)
   viennent du design system VNCT (vnct-design-system.css).
   ============================================================================ */

.strata-landing {
  max-width: 720px;
  margin: 0 auto;
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

@media (max-width: 768px) {
  .strata-landing {
    padding-top: var(--space-4);
    /* Marges horizontales de sécurité sur mobile, cohérentes avec le header VNCT,
       pour que le bandeau progression, la pill filtres et les cards ne collent pas
       aux bords de l'écran. */
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* --- Bandeau progression d'enquête --- */
.strata-progress {
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.strata-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
}

.strata-progress__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.strata-progress__percent {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.strata-progress__text {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ----------------------------------------------------------------------------
   Pilule de filtres - repliable (pattern calque sur .strata-toc-pill)
   Fermee par defaut : petit bouton compact avec icone + label + badge count.
   Ouverte : panel qui descend sous la pill avec recherche + tri + chips tags.
   ---------------------------------------------------------------------------- */

.strata-filters-pill {
  position: sticky;
  top: calc(var(--nav-desktop-height, 60px) + var(--space-2));
  z-index: 50;
  margin-bottom: var(--space-6);
  align-self: flex-start;
  display: block;
  transition: top 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.strata-filters-pill[hidden] {
  display: none;
}

.strata-filters-pill__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: color-mix(in srgb, var(--bg-secondary) 75%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--shadow-elevation-2);
  transition:
    background var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

@supports not (backdrop-filter: blur(12px)) {
  .strata-filters-pill__trigger {
    background: var(--bg-secondary);
  }
}

@media (hover: hover) {
  .strata-filters-pill__trigger:hover {
    border-color: var(--border-hover);
  }
}

.strata-filters-pill.is-open .strata-filters-pill__trigger {
  border-color: var(--border-hover);
}

.strata-filters-pill__icon {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.strata-filters-pill__label {
  white-space: nowrap;
}

.strata-filters-pill__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.4em;
  background: var(--accent);
  color: var(--bg-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.strata-filters-pill__chevron {
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-smooth);
  color: var(--text-secondary);
}

.strata-filters-pill.is-open .strata-filters-pill__chevron {
  transform: rotate(180deg);
}

.strata-filters-pill__panel {
  display: none;
  position: absolute;
  /* Petit gap sous la pill trigger : le panel est une carte indépendante,
     pas raccordée au trigger. Évite les artefacts de bordures non alignées
     entre un trigger étroit (pill) et un panel large. */
  top: calc(100% + var(--space-2));
  left: 0;
  /* 100vw - space-8 = viewport moins les deux marges horizontales (space-4 * 2)
     de .strata-landing sur mobile. Évite que le panel dépasse la zone safe. */
  width: min(440px, calc(100vw - var(--space-8)));
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--bg-secondary) 75%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevation-2);
  animation: strata-filters-pill-in 180ms var(--ease-smooth);
}

@supports not (backdrop-filter: blur(12px)) {
  .strata-filters-pill__panel {
    background: var(--bg-secondary);
  }
}

.strata-filters-pill.is-open .strata-filters-pill__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@keyframes strata-filters-pill-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .strata-filters-pill {
    top: calc(var(--header-mobile-height, 52px) + var(--space-2));
  }
  .strata-filters-pill.strata-filters--nav-hidden {
    top: var(--space-2);
  }
}

/* ----------------------------------------------------------------------------
   Contenus du panel (recherche, tri, tags)
   ---------------------------------------------------------------------------- */

.strata-filters__search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.strata-filters__search-icon {
  position: absolute;
  left: var(--space-3);
  color: var(--text-muted);
  pointer-events: none;
}

.strata-filters__input {
  padding-left: calc(var(--space-3) + 16px + var(--space-2));
  padding-right: var(--space-8);
  width: 100%;
}

.strata-filters__clear {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (hover: hover) {
  .strata-filters__clear:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
  }
}

.strata-filters__sort {
  width: 100%;
}

.strata-filters__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.strata-filters__tags:empty {
  display: none;
}

.strata-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.75em;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .strata-tag-chip:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border-default));
  }
}

.strata-tag-chip.is-active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border-color: var(--accent);
}

/* --- Liste des articles --- */
.strata-articles {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.strata-card {
  display: block;
  padding: var(--space-6);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Reset underline (iOS Safari propagation) + outline au tap : voir la classe
   utilitaire `.vnct-link-reset` dans vnct-design-system.css, appliquée sur
   chaque .strata-card dans landing.js.

   Feedback visuel au tap mobile (remplace le :hover désactivé par
   @media (hover: hover)). :active dure le temps du tap et disparaît au
   relâchement — pas de "saut" persistant pendant le scroll. Glow cohérent
   avec le pattern `.vnct-tile:active` du DS. */
.strata-card:active {
  border-color: var(--accent);
  box-shadow: var(--neon-shadow-md);
}

/* Les effets :hover ne doivent s'appliquer que sur les devices qui ont un vrai
   hover (souris/trackpad). Sans ça, sur mobile le toucher déclenche :hover
   pendant le scroll et les cards sautent sous le doigt. Glow calqué sur le
   pattern `.vnct-tile:hover` du design system (border accent + neon-shadow-md). */
@media (hover: hover) {
  .strata-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--neon-shadow-md);
  }
}

.strata-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.strata-card--pinned {
  position: relative;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-default));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 6%, var(--bg-secondary)),
    var(--bg-secondary)
  );
  margin-bottom: var(--space-6);
}

.strata-card__pin-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.2em 0.6em;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.strata-card__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.3;
  padding-right: var(--space-16);
}

.strata-card:not(.strata-card--pinned) .strata-card__title {
  padding-right: 0;
}

.strata-card__summary {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.6;
}

.strata-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.strata-card__meta > time {
  color: var(--text-muted);
}

.strata-card__confidence {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.15em 0.6em;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.strata-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.strata-card__tags li {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
  .strata-card {
    padding: var(--space-5);
  }
  .strata-card__title {
    font-size: var(--text-lg);
    padding-right: 0;
  }
  .strata-card--pinned .strata-card__pin-badge {
    position: static;
    margin-bottom: var(--space-2);
  }
}

/* --- Section lore --- */
.strata-lore {
  margin-top: var(--space-16);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.strata-lore__separator {
  color: var(--text-muted);
  font-size: var(--text-sm);
  letter-spacing: 0.5em;
  margin-bottom: var(--space-6);
}

.strata-lore__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.strata-lore__body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.8;
  margin: 0;
}

.strata-lore__body em {
  color: var(--accent);
  font-style: italic;
}

.strata-lore__tagline {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0.03em;
}

/* --- Loading --- */
#loading.strata-loading {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}