/**
 * Contenus embarqués — vidéos et cadres externes.
 *
 * Problème corrigé : une vidéo YouTube insérée dans une FAQ débordait de sa
 * colonne. L'oEmbed produit ici un <iframe> brut, avec width="800" et
 * height="450" en attributs, sans l'habillage « wp-block-embed » que
 * l'éditeur de blocs ajoute d'ordinaire — le contenu des FAQ passe par un
 * champ, pas par des blocs. La feuille responsive de WordPress ne s'applique
 * donc pas, et 800px ne tiennent pas dans une colonne qui en fait ~760.
 *
 * Deux niveaux, volontairement :
 *
 * 1. Aucun cadre embarqué ne dépasse jamais sa colonne. Règle large, sans
 *    effet de bord : elle ne touche pas aux proportions.
 * 2. Les lecteurs vidéo connus reprennent en plus un ratio 16/9 fluide. Cette
 *    règle-là est restreinte aux hébergeurs vidéo : l'appliquer à tout iframe
 *    écraserait une carte, un formulaire ou un lecteur de document, qui ont
 *    leurs propres proportions.
 */

.page-content iframe,
.page-content embed,
.page-content object,
.page-content video {
   max-width: 100%;
}

/* Le ratio fluide n'est posé QUE là où aspect-ratio fonctionne. Sans cette
   condition, « height: auto » seul ramènerait l'iframe à sa hauteur par
   défaut — 150px — sur un navigateur ancien : la vidéo ne déborderait plus,
   elle serait écrasée. Ailleurs, la règle de largeur ci-dessus suffit à
   empêcher le débordement, au prix de bandes noires. */
@supports (aspect-ratio: 16 / 9) {
   .page-content iframe[src*="youtube.com"],
   .page-content iframe[src*="youtube-nocookie.com"],
   .page-content iframe[src*="youtu.be"],
   .page-content iframe[src*="vimeo.com"],
   .page-content iframe[src*="dailymotion.com"],
   .page-content iframe[src*="peertube"] {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
   }
}