/* ==========================================================================
   Gabarit article. Sert les entrées du journal.
   ========================================================================== */

.article {
  max-width: 1184px;
  margin: 0 auto;
  padding: var(--esp-8) var(--esp-12) var(--esp-16);
  display: flex; flex-direction: column; gap: var(--esp-8);
}
.article__entete { display: flex; flex-direction: column; gap: var(--esp-3); max-width: var(--largeur-lecture); }
.article__meta { font-size: var(--taille-legende); color: var(--vert-coteau); }

.article__bandeau {
  height: 520px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: var(--rayon);
  background-color: var(--vert-coteau);
  background-image: url("/statique/images/motifs/filigrane-blanc.svg");
  background-repeat: repeat;
  background-size: 96px auto;
}
.article__bandeau img { width: 100%; height: 100%; object-fit: cover; }

/* Le corps est en colonne de lecture ; seules les figures débordent, parce
   qu'une photo de chantier ne se lit pas à 62 caractères de large. */
.article__corps { display: flex; flex-direction: column; gap: var(--esp-8); }
.article__texte { max-width: var(--largeur-lecture); }
.article__texte > * + * { margin-top: var(--esp-4); }
.article__texte h2 { margin-bottom: var(--esp-4); }

.article__figure,
.article__video { margin: 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.article__figure img { width: 100%; border-radius: var(--rayon); }
.article__figure-trame {
  display: block; aspect-ratio: 1184 / 560;
  border-radius: var(--rayon);
  background-color: var(--vert-coteau);
  background-image: url("/statique/images/motifs/filigrane-blanc.svg");
  background-repeat: repeat;
  background-size: 96px auto;
}
figcaption { font-size: var(--taille-legende); color: var(--vert-coteau); max-width: var(--largeur-lecture); }
.article__video h2 { margin-bottom: var(--esp-2); }
.article__video .prose { max-width: var(--largeur-lecture); margin-bottom: var(--esp-3); }

/* --- Façade vidéo -----------------------------------------------------------
   Rien du fournisseur n'est chargé avant le clic. */
.facade {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--esp-3);
  aspect-ratio: 16 / 9;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--vert-profond);
  color: var(--creme-calcaire);
  text-align: center;
  padding: var(--esp-6);
}
.facade--attente { aspect-ratio: 16 / 9; }
.facade__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.facade__bouton {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--esp-3);
  min-height: 52px;
  padding: 0 var(--esp-8);
  border-radius: var(--rayon);
  background: var(--creme-calcaire);
  color: var(--vert-profond);
  font-size: var(--taille-corps);
  font-weight: var(--poids-semibold);
  text-decoration: none;
}
.facade__icone { font-size: var(--taille-legende); }
.facade__note {
  position: relative;
  max-width: 44ch;
  font-size: var(--taille-legende);
  color: var(--creme-calcaire);
}
.facade--chargee { padding: 0; background: #000; }
.facade__cadre { width: 100%; height: 100%; border: 0; }

.article__pied { padding-top: var(--esp-6); border-top: var(--filet); }
.article__signature { font-size: var(--taille-legende); color: var(--vert-coteau); }

@media (max-width: 900px) {
  .article { padding: var(--esp-4) var(--esp-4) var(--esp-16); gap: var(--esp-6); }
  .article__bandeau { height: 220px; }
  /* La mention « service externe » ne se masque pas : c'est une information
     de confidentialité, pas une décoration. On la laisse passer sous le
     bouton, quitte à ce que la façade grandisse. */
  .facade { aspect-ratio: auto; min-height: 220px; }
}

/* --- Liste du journal ---------------------------------------------------------- */
.journal__intro { max-width: var(--largeur-lecture); }
.journal__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-6); }
.journal__liste .vignette { height: 100%; }
.journal__vide { max-width: var(--largeur-lecture); padding: var(--esp-6); border-radius: var(--rayon); background: var(--vert-pale); }
@media (max-width: 900px) { .journal__liste { grid-template-columns: 1fr; } }