/* ---- Limitation globale des images ----
   Ajuste ces variables selon tes préférences.
   Par défaut : largeur max = 800px ou 90% de la fenêtre, hauteur max = 80% de la fenêtre.
*/
:root {
  --img-max-width: min(400px, 40vw);
  --img-max-height: 80vh;
}

/* Cible toutes les images, y compris celles dans <picture> ou <figure> */
img,
picture img,
figure > img {
  max-width: var(--img-max-width);
  max-height: var(--img-max-height);
  width: auto;   /* garde le ratio */
  height: auto;  /* garde le ratio */
  object-fit: contain;
  display: block; /* évite certains débordements/espaces */
}

/* Si des attributs HTML width/height sont présents, on neutralise pour éviter l'étirement */
img[width],
img[height] {
  width: auto !important;
  height: auto !important;
}

/* Optionnel : images dans des liens restent bien alignées si tu laisses display:inline */
a > img {
  vertical-align: middle;
}

/* ---- Exceptions pratiques ---- */

/* 1) Image fluide qui ne dépasse jamais son conteneur (utile dans du texte) */
.img-fluid {
  max-width: 100% !important;
  height: auto !important;
}

/* 2) Autoriser ponctuellement une image à dépasser les limites */
.img-no-limit {
  max-width: none !important;
  max-height: none !important;
}