/* ════════════════════════════════════════════════════════════════════════════
   Section « Actualités » de la page studio.

   Charte de cette page : fond presque noir, cyan et magenta, sections séparées
   par un filet. Rien n'est repris du site SpaceWord — c'est la même source de
   contenu, pas la même maison.
   ════════════════════════════════════════════════════════════════════════════ */

.nw-lede { display: flex; align-items: center; }

/* Le point pulse : seul indice visuel que la section arrive en direct plutôt
   que d'être recopiée dans le HTML. */
.nw-dot {
  flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  margin-right: 9px;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(85, 216, 255, .5);
  animation: nwPulse 2.4s ease-out infinite;
}
@keyframes nwPulse {
  0%   { box-shadow: 0 0 0 0 rgba(85, 216, 255, .5); }
  70%  { box-shadow: 0 0 0 10px rgba(85, 216, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(85, 216, 255, 0); }
}

.nw-cards { display: grid; gap: 14px; margin-top: 22px; }

.nw-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(16px, 3vw, 24px);
  background: rgba(255, 255, 255, .02);
}
/* Le dernier billet porte le liseré cyan : on lit d'abord ce qui vient de sortir. */
.nw-card-lead { border-color: rgba(85, 216, 255, .38); }

.nw-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px;
}
/* Page du studio : plusieurs projets y publient, donc le nom du produit passe
   avant le numéro de version. */
.nw-product {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .04em;
  color: #06060a;
  background: var(--cyan);
  border-radius: 999px;
  padding: 4px 10px;
}
.nw-version {
  font-size: .72rem; font-weight: 600;
  color: var(--cyan);
  border: 1px solid rgba(85, 216, 255, .35);
  border-radius: 999px;
  padding: 3px 9px;
}
.nw-date { font-size: .78rem; color: var(--ink-dim); }

.nw-title {
  margin: 0 0 12px;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}

.nw-body { color: var(--ink-dim); font-size: .93rem; line-height: 1.62; }
.nw-body > * + * { margin-top: 10px; }
.nw-body p { margin: 0; max-width: 62ch; }
.nw-h {
  margin: 18px 0 0;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--magenta);
}
.nw-body strong { color: var(--ink); font-weight: 700; }
.nw-list { margin: 8px 0 0; padding-left: 19px; max-width: 62ch; }
.nw-list li { margin-top: 5px; }
.nw-list li::marker { color: var(--cyan); }

/* Replié = hauteur fixe et fondu en bas, pour que la coupe se lise comme « il y
   a la suite » et non comme un texte tronqué par accident. */
.nw-collapsed {
  max-height: 116px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
}

.nw-more {
  margin-top: 12px;
  font: 600 .78rem/1 inherit;
  font-family: inherit;
  color: var(--cyan);
  background: transparent;
  border: 1px solid rgba(85, 216, 255, .35);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  transition: background .18s ease;
}
.nw-more:hover { background: rgba(85, 216, 255, .12); }
.nw-more:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nw-dot { animation: none; }
}

/* ── captures de la fiche Play ────────────────────────────────────────────
   Rangée horizontale à hauteur fixe : la hauteur ne dépend donc jamais des
   dimensions annoncées par Google, et la carte ne saute pas au chargement.
   L'image de secours livrée dans le HTML garde, elle, sa mise en forme
   d'origine (.project-shot) — celle-ci ne s'applique qu'au rail construit
   par store-shots.js. */
.shot-rail {
  grid-column: 1 / -1;
  /* Un élément de grille vaut min-width:auto par défaut : sans ce 0, la rangée
     d'images impose sa largeur à la colonne et c'est toute la page qui
     déborde à l'horizontale au lieu de la rangée qui défile. */
  min-width: 0;
  max-width: 100%;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  cursor: grab;
}
.shot-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.shot-rail::-webkit-scrollbar { height: 8px; }
.shot-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

.shot-rail .shot {
  height: 300px;
  width: auto;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0b0b12;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 720px) {
  .shot-rail .shot { height: 240px; }
}