/* ==========================================================================
   L'écrin — l'accueil
   --------------------------------------------------------------------------
   Un écrin n'est pas une grille : on y a quelques objets, pas un catalogue.
   La mise en page est donc dissymétrique — une pièce en vedette, puis des
   cartes plus petites. Rien ici ne ressemble à un fil d'actualité.
   ========================================================================== */

.vault {
  width: var(--w-wide);
  margin-inline: auto;
  padding-block: var(--s-6) var(--s-10);
}

/* --------------------------------------------------------------------------
   Le seuil — quand personne n'est identifié
   -------------------------------------------------------------------------- */

.threshold {
  min-height: calc(100dvh - 140px);
  display: grid;
  align-items: center;
  position: relative;
  isolation: isolate;
}
.threshold::before {
  content: "";
  position: absolute; inset: -20% -30% auto -30%; height: 120%;
  background: radial-gradient(50% 50% at 30% 20%, color-mix(in oklab, var(--c-accent) 22%, transparent) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.threshold__inner { max-width: 46rem; padding-block: var(--s-8); }

.threshold__title {
  font-size: var(--t-hero);
  margin-block: var(--s-4) var(--s-5);
}
.threshold__lede {
  font-family: var(--f-read);
  font-size: clamp(1.06rem, 1rem + 0.45vw, 1.32rem);
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 36rem;
}

.threshold__cases {
  display: grid; gap: var(--s-4);
  margin-top: var(--s-8);
}
@media (min-width: 860px) { .threshold__cases { grid-template-columns: repeat(3, 1fr); } }
.threshold__case {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  align-items: start;
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.threshold__case-title { font-weight: 600; font-size: var(--t-small); }
.threshold__case-desc { font-size: var(--t-tiny); color: var(--c-ink-soft); line-height: 1.5; margin-top: 4px; }

.threshold__enter {
  display: flex; align-items: center; gap: var(--s-5);
  flex-wrap: wrap;
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}
.threshold__hint {
  flex: 1 1 18rem;
  font-size: var(--t-small);
  color: var(--c-ink-soft);
  max-width: 32rem;
}
.threshold__hint strong { color: var(--c-accent); }
.threshold__code {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--t-small);
  background: var(--c-raised);
  border: 1px solid var(--c-line-strong);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   En attente d'une réponse
   -------------------------------------------------------------------------- */

.vault__pending { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }

.pending-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--c-line-accent);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in oklab, var(--c-accent) 12%, transparent) 0%, transparent 62%),
    var(--c-surface);
  box-shadow: var(--sh-edge);
}
.pending-card__media {
  width: 96px; height: 96px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-raised);
}
.pending-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pending-card__title {
  font-family: var(--f-display); font-variation-settings: var(--vf-title);
  font-size: 1.4rem; margin-block: var(--s-2) 2px;
}
.pending-card__msg {
  margin-top: var(--s-3); padding-left: var(--s-4);
  border-left: 2px solid var(--c-accent);
  font-family: var(--f-read); font-style: italic;
  font-size: var(--t-small); color: var(--c-ink-soft);
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.vault__head {
  display: grid; gap: var(--s-5);
  margin-bottom: var(--s-5);
}
@media (min-width: 860px) {
  .vault__head { grid-template-columns: 1fr auto; align-items: end; }
}
.vault__title {
  font-family: var(--f-display);
  font-variation-settings: var(--vf-display);
  font-size: var(--t-h1);
  font-weight: 400;
  letter-spacing: var(--ls-mega);
  margin-top: var(--s-2);
}
.vault__tools { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.vault__tools .search { min-width: 12rem; }

.vault__filters { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-6); }

.vault__section-title {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-ui); font-size: var(--t-small); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--c-ink-faint);
  margin-bottom: var(--s-4);
}
.vault__drafts { margin-top: var(--s-8); }

/* --------------------------------------------------------------------------
   La pièce en vedette
   -------------------------------------------------------------------------- */

.feature {
  display: grid;
  gap: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-2), var(--sh-edge);
  margin-bottom: var(--s-6);
  transition: transform var(--d-mid) var(--e-scene), box-shadow var(--d-mid) var(--e-ui), border-color var(--d-mid) var(--e-ui);
}
@media (min-width: 880px) { .feature { grid-template-columns: 1.35fr 1fr; } }
.feature:hover {
  transform: translateY(-3px);
  border-color: var(--c-line-accent);
  box-shadow: var(--sh-3), var(--sh-edge), var(--glow-soft);
}

.feature__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--c-raised);
  overflow: hidden;
}
@media (min-width: 880px) { .feature__media { aspect-ratio: auto; min-height: 26rem; } }
.feature__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-scene) var(--e-scene);
}
.feature:hover .feature__media img { transform: scale(1.03); }
.feature__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 60%, color-mix(in oklab, var(--c-surface) 90%, transparent) 100%);
  display: none;
}
@media (min-width: 880px) { .feature__media::after { display: block; } }

.feature__body {
  padding: var(--s-6);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s-3);
}
@media (min-width: 880px) { .feature__body { padding: var(--s-8) var(--s-7); } }
.feature__title {
  font-family: var(--f-display);
  font-variation-settings: var(--vf-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: var(--ls-mega);
  text-wrap: balance;
}
.feature__line {
  font-family: var(--f-read);
  font-size: var(--t-read);
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.feature__meta {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--t-tiny); color: var(--c-ink-faint);
}

/* --------------------------------------------------------------------------
   Les autres pièces
   -------------------------------------------------------------------------- */

.vault__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.piece-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border-radius: var(--r-lg);
  transition: transform var(--d-mid) var(--e-scene);
}
.piece-card:hover { transform: translateY(-4px); }

.piece-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-raised);
  border: 1px solid var(--c-line);
  transition: border-color var(--d-mid) var(--e-ui), box-shadow var(--d-mid) var(--e-ui);
}
.piece-card:hover .piece-card__media {
  border-color: var(--c-line-accent);
  box-shadow: var(--glow-soft);
}
.piece-card__media img { width: 100%; height: 100%; object-fit: cover; }
.piece-card__blank {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--c-ink-faint);
}
.piece-card__count {
  position: absolute; top: var(--s-3); right: var(--s-3);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(6, 5, 10, 0.72);
  backdrop-filter: blur(6px);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.92);
}
.piece-card.is-draft .piece-card__media { border-style: dashed; }

.piece-card__body { padding: var(--s-4) 2px 0; }
.piece-card__title {
  font-family: var(--f-display);
  font-variation-settings: var(--vf-title);
  font-weight: 400;
  font-size: 1.24rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.piece-card__teaser {
  margin-top: var(--s-2);
  font-family: var(--f-read); font-size: 0.92rem; line-height: 1.5;
  color: var(--c-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.piece-card__meta { margin-top: var(--s-2); font-size: var(--t-tiny); color: var(--c-ink-faint); }