/* 03 — Explorer : un projet vedette + grille. Les visuels d'abord. */
.work { padding-top: var(--section-y); }
.work__grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem);
  counter-reset: work;
}
@media (min-width: 700px) { .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card { display: grid; gap: 1.1rem; align-content: start; counter-increment: work; }
.card--featured { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .card--featured { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; gap: 2.5rem; }
}

.card__media {
  position: relative; display: block;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  aspect-ratio: 16 / 10;
  transition: border-color var(--t-ui), transform var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 900ms var(--ease); }
a.card__media:hover { border-color: color-mix(in srgb, var(--orange) 55%, transparent); box-shadow: 0 24px 48px -28px var(--shadow); transform: translateY(-4px); }
a.card__media:hover img { transform: scale(1.02); }
.card__url {
  position: absolute; left: 12px; bottom: 12px;
  font-size: var(--fs-xs); padding: 0.4em 0.9em; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
}

/* Capture manquante : trame discrète de rubans, pas de grand vide */
.card__media--empty {
  display: grid; place-items: center;
  background:
    radial-gradient(80% 60% at 50% 120%, color-mix(in srgb, var(--orange) 22%, transparent), transparent 70%),
    var(--bg-2);
}

.card__meta { display: flex; gap: 0.8rem; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.card__meta::before { content: counter(work, decimal-leading-zero); color: var(--neon); }
.card__name { margin-top: 0.45rem; font-family: var(--font-display); letter-spacing: var(--display-track); font-weight: var(--display-weight); font-size: clamp(1.1rem, 0.85rem + 0.9vw, 1.7rem); line-height: 1.05; text-transform: uppercase; }
.card--featured .card__name { font-size: clamp(1.4rem, 0.95rem + 1.7vw, 2.5rem); }
.card__name.placeholder { color: transparent; -webkit-text-stroke: 1px var(--muted); }
.card__desc { margin-top: 0.6rem; color: var(--ink-2); max-width: 44ch; }
.card__features { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.card__features li { font-size: var(--fs-xs); padding: 0.35em 0.85em; border-radius: var(--r-pill); border: 1px solid var(--line-strong); }
.card__link { margin-top: 1rem; }
.card__link a, .card__link span { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; font-size: var(--fs-sm); font-weight: 600; }
.card__link a { border-bottom: 1px solid var(--neon); min-height: 0; padding: 0.6rem 0 0.2rem; }
.card__link a:hover { color: var(--orange-text); }
.card__link span { color: var(--muted); }

/* En-tête Explorer : la description reste toujours sur une seule ligne */
.work .section-head__lede {
  white-space: nowrap;
  /* taille normale ; réduite seulement si la phrase (≈ 29,5 em) ne tient pas entre les marges */
  font-size: min(var(--fs-lg), calc((100vw - 2 * var(--gutter)) / 29.6));
  margin-left: -0.1em; /* approche du « L » */
}



/* ---------- Filtres par domaine ---------- */
.filters { max-width: var(--maxw); margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3.25rem); padding: 0 var(--gutter); }
.filters__list {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}
.filter {
  display: inline-flex; align-items: center; gap: 0.55em;
  min-height: 44px; padding: 0 1.15rem;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap;
  transition: background-color var(--t-micro), border-color var(--t-micro), color var(--t-micro);
}
.filter:hover { border-color: var(--blue); color: var(--ink); }
.filter__n { font-size: var(--fs-xs); color: var(--orange-text); font-variant-numeric: tabular-nums; }
.filter[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-ink); }
.filter[aria-pressed="true"] .filter__n { color: #FF8248; }

/* Changement de filtre : fondu court + léger glissement, sans animation lourde */
.work__grid { transition: opacity 220ms var(--ease), transform 320ms var(--ease); }
.work__grid.is-leaving { opacity: 0; transform: translateY(10px); }
.work__grid .card.is-in { animation: work-in 480ms var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes work-in { from { opacity: 0; transform: translateY(14px); } }

.work__empty {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2); font-size: var(--fs-lg);
}

/* Mobile : une seule ligne qui défile horizontalement, bords fondus pour signaler la suite */
@media (max-width: 699px) {
  .filters { padding: 0; }
  .filters__list {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    padding: 0 var(--gutter) 1.25rem; margin: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
    border-bottom: 0;
  }
  .filters__list::-webkit-scrollbar { display: none; }
  .filters__list li { scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  .filters__list li:last-child { padding-right: var(--gutter); }
  .filters::after { content: ''; display: block; height: 1px; background: var(--line); margin: 0 var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  .work__grid, .work__grid .card.is-in { transition: none; animation: none; }
}

/* ---------- Carte avec vidéo (projet avec page dédiée) ---------- */
.card__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__tag {
  position: absolute; left: 14px; bottom: 14px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.5em 0.95em; border-radius: var(--r-pill);
  background: var(--orange); color: var(--on-orange);
}
.card__link .card__hint { margin-left: 1rem; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.04em; }