/* ============================================================
   Médias — compatibilité avec la conversion WebP en balises <picture>
   Chargé APRÈS a11y.css, donc en dernier.

   COMPORTEMENT CONSTATÉ DE L'EXTENSION (WPMasterToolkit)
   Elle enveloppe chaque image et DÉPLACE la classe de l'<img> sur le
   <picture>, tout en dupliquant loading / fetchpriority / decoding :

     <picture class="hero-page-img" loading="eager" ...>
       <source type="image/webp" srcset="...jpg.webp">
       <img loading="eager" src="...jpg" alt="...">
     </picture>

   L'<img> interne n'a donc plus de classe. Quand l'image d'origine n'en
   portait pas, le <picture> n'en porte pas non plus.

   D'où DEUX SITUATIONS OPPOSÉES, qui appellent deux traitements.

   ------------------------------------------------------------
   1. Images sans classe : le <picture> doit s'effacer.

   Le thème les dimensionne par sélecteur descendant : .split-media img,
   .blog-card-media img, .story-media img, .article-body img. Ces règles
   continuent de viser l'<img> interne, mais le <picture> s'intercale : il
   est inline et de hauteur auto, donc les height:100% ne se résolvent plus
   et l'image reprend sa hauteur intrinsèque. Le recadrage 16/10 des cartes
   du blog et la colonne 100vh du bloc Notre histoire cassent.

   display:contents supprime la boîte du <picture> : l'<img> redevient
   enfant direct de son conteneur et tout se comporte comme avant.
   ------------------------------------------------------------ */
picture{ display:contents; }

/* ------------------------------------------------------------
   2. Images à classe : c'est le <picture> qui porte les règles.

   Trois images du thème sont stylisées par une classe posée directement
   sur la balise : les en-têtes .hero-full-img, .hero-page-img et
   .blog-hero-img. Toutes trois sont en position:absolute; inset:0;
   object-fit:cover pour couvrir leur section.

   Cette classe se retrouvant sur le <picture>, c'est lui qui doit rester
   une boîte positionnée : display:contents l'effacerait, et l'image
   retomberait dans le flux — elle deviendrait un élément flex à côté du
   texte, puisque ces sections sont en display:flex.

   On les exclut donc de la règle ci-dessus.
   ------------------------------------------------------------ */
picture.hero-full-img,
picture.hero-page-img,
picture.blog-hero-img{ display:block; }

/* L'<img> interne n'a plus de classe : il doit remplir le cadre posé par le
   <picture> et reprendre son cadrage. object-fit et object-position ne sont
   pas des propriétés héritées, d'où le mot-clé inherit : il récupère ainsi
   le « cover » et le point de recadrage (center 30%, center 32%) propres à
   chaque en-tête, sans les réécrire ici. */
picture.hero-full-img > img,
picture.hero-page-img > img,
picture.blog-hero-img > img{
	display:block;
	width:100%;
	height:100%;
	object-fit:inherit;
	object-position:inherit;
}

/* ------------------------------------------------------------
   3. Repli navigateurs sans display:contents.

   Le <picture> reste alors une boîte : on lui donne au moins le
   comportement bloc, ce qui évite l'espace de baseline sous les images.
   Les hauteurs en pourcentage n'y seront pas correctes, mais le support
   de display:contents est généralisé depuis 2020.
   ------------------------------------------------------------ */
@supports not (display:contents){
	picture{ display:block; }
}

/* ============================================================
   CE QUE CETTE APPROCHE NE COUVRE PAS
   Les images de fond CSS ne passent par aucun <img> et ne sont donc pas
   converties : le bloc Espace RH (--rh-bg), le bloc Différenciateur
   (--diff-bg) et les images de repli de sbd_img() continuent de servir le
   fichier d'origine.

   SI L'EXTENSION CHANGE DE COMPORTEMENT
   Le partage ci-dessus repose sur un point précis : la classe est sur le
   <picture>, pas sur l'<img>. Si une mise à jour la laissait sur l'<img>,
   la règle 1 suffirait seule et les règles 2 deviendraient inutiles (sans
   pour autant nuire : elles ne matcheraient plus). Vérifier le HTML généré
   après toute mise à jour de l'extension.
   ============================================================ */