/* ============================================================
   Actualités — grille et article
   Aucune couleur nouvelle : tout provient des variables de
   style.css, pour que la section ne se distingue en rien du
   reste du site.
   ============================================================ */

/* ---------- en-tête de page ---------- */

.page-head {
  padding: 9rem 0 var(--space-5);
  border-bottom: 1px solid var(--c-line-soft);
}
.page-head h1 {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.page-head p {
  margin: var(--space-3) 0 0;
  max-width: 54ch;
  font-size: 1.05rem;
  color: var(--c-text-dim);
}

/* ---------- emplacement d'image ----------
   Tant qu'aucune image n'est générée, on montre une plaque
   dans les tons du site plutôt qu'un carré vide ou une image
   d'emprunt. */

.visuel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  background:
    var(--gradient-metallic-soft),
    linear-gradient(135deg, rgba(22, 36, 74, 0.10), rgba(143, 176, 232, 0.16));
  border: 1px solid var(--c-line);
}
/* L'image générée se superpose au visuel de données. Si le fichier
   n'existe pas encore, le onerror la retire et le visuel de données
   reprend sa place — aucune case vide, jamais. */
.visuel img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.visuel-vide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* ---------- grille des actualités ---------- */

.nouvelles {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .nouvelles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .nouvelles { grid-template-columns: repeat(3, 1fr); } }

.nouvelle {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-bg-card);
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out);
}
.nouvelle:hover {
  transform: translateY(-3px);
  border-color: var(--c-accent);
  box-shadow: 0 10px 30px rgba(18, 20, 28, 0.07);
}
.nouvelle .visuel {
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--c-line);
}
.nouvelle-corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
  padding: var(--space-3);
}
.nouvelle h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.nouvelle p { margin: 0; font-size: 0.94rem; color: var(--c-text-dim); }
.nouvelle-source {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--c-line-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--c-text-faint);
}

/* étiquettes catégorie et date */
.meta-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.categorie {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-accent);
  letter-spacing: 0.1em;
}

/* ---------- article ---------- */

.article { padding: 8rem 0 var(--space-6); }
.article-largeur { max-width: 720px; margin: 0 auto; }
.article .visuel { aspect-ratio: 16 / 9; margin-bottom: var(--space-4); }
.article h1 {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.chapeau {
  margin: var(--space-3) 0 0;
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--c-text-dim);
}
.article-corps { margin-top: var(--space-4); }
.article-corps h2 {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.article-corps p { margin: 0 0 var(--space-2); line-height: 1.7; }

/* auteur */
.auteur {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-line-soft);
}
.auteur img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.auteur strong { display: block; font-size: 0.95rem; }
.auteur span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--c-text-dim);
}

/* encart En bref */
.en-bref {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: var(--c-bg-alt);
}
.en-bref h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.en-bref ul { margin: 0; padding-left: 1.1rem; }
.en-bref li { margin-bottom: 0.35rem; color: var(--c-text-dim); }

/* sources consultées */
.sources {
  margin-top: var(--space-5);
  padding: var(--space-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
}
.sources h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.sources ol { margin: 0; padding-left: 1.2rem; font-size: 0.92rem; }
.sources li { margin-bottom: 0.45rem; color: var(--c-text-dim); }
.sources a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- bloc d'abonnement ---------- */

.abonnement {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-bg-alt);
  text-align: center;
}
.abonnement h2 {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.abonnement p {
  margin: var(--space-2) auto 0;
  max-width: 46ch;
  color: var(--c-text-dim);
}
.abonnement-formulaire { margin-top: var(--space-3); }
.abonnement-attente {
  padding: var(--space-3);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-bg);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* ============================================================
   Visuel de données
   Alternative à l'image générée : le chiffre de la nouvelle,
   composé aux couleurs et aux polices du site. Rien à produire,
   rien à téléverser, et surtout rien d'inventé — le visuel
   affiche la donnée réelle de l'article et sa source.
   ============================================================ */

.visuel-donnee {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.35rem;
  padding: var(--space-3);
  background:
    radial-gradient(circle at 78% 18%, rgba(143, 176, 232, 0.30), transparent 62%),
    radial-gradient(circle at 12% 88%, rgba(22, 36, 74, 0.16), transparent 58%),
    var(--c-bg-alt);
}
.visuel-donnee .chiffre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--gradient-metallic);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.visuel-donnee .legende {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.visuel-donnee .provenance {
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--c-text-faint);
}
.article .visuel-donnee { padding: var(--space-4); }
.article .visuel-donnee .chiffre { font-size: clamp(3.4rem, 9vw, 5.4rem); }
.article .visuel-donnee .legende { font-size: 0.8rem; }


/* ============================================================
   État vide
   Tant qu'aucun article n'est publié, la page annonce la suite
   et met l'abonnement en avant, plutôt que d'afficher une
   grille vide ou du contenu d'exemple.
   ============================================================ */

.etat-vide {
  max-width: 62ch;
  padding: var(--space-5) 0 var(--space-2);
}
.etat-vide h2 {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.etat-vide p {
  margin: var(--space-3) 0 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--c-text-dim);
}


/* lien de secours sous le formulaire, discret tant que tout va bien */
.abonnement-secours {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--c-text-faint);
}
.abonnement-secours a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }