/* ============ MEMENTO VIV'EXPRESS — images responsive ============
   Deux règles, et c'est tout. Elles accompagnent le passage des <img> en
   <picture> (voir tools/rewrite-images.mjs) sans rien changer au rendu.

   Chargée APRÈS style.css / pages.css : les deux sélecteurs sont volontairement
   des sélecteurs d'élément (spécificité 0,0,1), donc n'importe quelle règle de
   classe existante continue de gagner. Rien n'est écrasé. */

/* Le <picture> ne doit pas exister pour la mise en page : sans ça il s'intercale
   comme boîte entre le conteneur et l'image, et tout ce qui repose sur la
   relation directe parent → img casse (les .g-item en flex, les .pilier-img img
   en position:absolute, les grilles de .lieu-grid…). display:contents le fait
   disparaître du rendu tout en gardant l'élément dans le DOM. */
picture {
  display: contents;
}

/* Les <img> portent maintenant width/height (= dimensions de l'original) pour
   que le navigateur réserve la place avant le téléchargement — c'est ce qui
   supprime les sauts de mise en page (CLS). Mais dès qu'une largeur CSS
   s'applique, la hauteur de l'attribut deviendrait une hauteur figée et
   déformerait l'image : height:auto rétablit le ratio.
   Les règles de classe qui imposent une hauteur (.temo-photo img{height:300px},
   .g-item img{height:100%}…) restent prioritaires. */
img {
  height: auto;
}