/**
 * embed — contenu embarqué (iframe, embed, video, audio) issu d'un champ
 * string_long sanitisé par `embed_safe`.
 *
 * Le conteneur impose un ratio 16/9 et cale l'enfant dessus. Le ratio est
 * exprimé en `aspect-ratio`, ce qui permet de le lever d'une seule déclaration
 * dans les cas particuliers ci-dessous.
 */

.comp--embed {
  display: block;
  position: relative;
  margin: 0;
}

.comp--embed--16-9 {
  aspect-ratio: 16 / 9;
}

.comp--embed--16-9 > :is(iframe, embed, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/**
 * `embed_safe` autorise aussi <audio> et tout HTML non-vidéo (par exemple
 * l'intégration d'un fournisseur tiers sans iframe). Forcer un ratio 16/9 y
 * créerait une boîte aux trois quarts vide : on l'annule dès qu'aucun enfant
 * iframe/embed/video n'est présent.
 */
.comp--embed--16-9:not(:has(> iframe, > embed, > video)) {
  aspect-ratio: auto;
  height: auto;
}

/**
 * Instagram. Le code d'intégration officiel de la plateforme est un
 * <blockquote> accompagné d'un <script> (embed.js) chargé de le remplacer par
 * une iframe. `embed_safe` bloque les balises script : le remplacement n'a
 * jamais lieu et seul le repli textuel du blockquote s'affiche. La publication
 * s'intègre donc par l'URL /embed/ de la plateforme, qui rend le post sans
 * JavaScript tiers et passe le filtre.
 *
 * Ces publications sont au format portrait : le ratio 16/9 du conteneur les
 * écraserait, et l'étirer à la largeur de la colonne ne montrerait pas la
 * publication en plus grand — la plateforme rend toujours la même mise en page,
 * simplement diluée. L'iframe garde donc la taille que la plateforme lui donne,
 * au fer à gauche comme tout média. Sans embed.js, aucun message ne vient la
 * redimensionner selon son contenu : la hauteur est posée ici.
 */
.comp--embed--16-9:has(> iframe[src*="instagram.com"]) {
  aspect-ratio: auto;
  height: auto;
}

.comp--embed--16-9 > iframe[src*="instagram.com"] {
  position: static;
  width: var(--ffc-embed-reseau-largeur, 26.25rem); /* 420 */
  max-width: 100%;
  height: var(--ffc-embed-reseau-hauteur, 37.5rem); /* 600 */
}