/* =========================================================================
 *  PAGE ACTUALITÉS — styles scopés
 *  Réutilise les tokens globaux (couleurs, rayons, ombres, espacements).
 * ====================================================================== */

/* ---------------- Article à la une ---------------- */
.news-featured__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.news-featured__meta {
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.news-featured__date {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-50);
  font-weight: 600;
  color: var(--color-faint);
}
.news-featured__date .icon { color: var(--color-accent); }
.news-featured__title { margin-top: var(--sp-2); }
.news-featured .feature-row__media .media { aspect-ratio: 16/11; box-shadow: var(--sh-lg); }

/* L'ancre cible un titre fixe sous le header collant */
.news-featured,
.news-card { scroll-margin-top: calc(var(--header-h) + var(--sp-6)); }

/* ---------------- Bande newsletter ---------------- */
.newsletter {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.newsletter__deco {
  position: absolute;
  right: -3%;
  bottom: -28%;
  color: var(--c-amber-400);
  opacity: 0.12;
  pointer-events: none;
}
.newsletter__inner {
  position: relative;
  z-index: 1;
  max-width: 56ch;
  margin-inline: auto;
}
.newsletter .lead { color: var(--color-on-dark); margin-inline: auto; }
.newsletter__form { margin-top: var(--sp-6); text-align: left; }
.newsletter__form .form-status:empty { display: none; }

.newsletter__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: stretch;
}
.newsletter__field {
  flex: 1 1 240px;
  margin-bottom: 0;
}
.newsletter__row .btn { flex: none; }

.newsletter__note {
  margin-top: var(--sp-4);
  text-align: center;
  font-size: var(--fs-50);
  color: var(--color-on-dark);
}

/* Champs dans le formulaire de la newsletter (signalisation d'erreur héritée) */
.newsletter .field--error .input { border-color: var(--c-terra-300); }

@media (max-width: 520px) {
  .newsletter__row { flex-direction: column; }
  .newsletter__row .btn { width: 100%; justify-content: center; }
}