/* =====================================================
   0. EXEMPLES DE CLASSES
   {.centerimagecaption}      <figcaption class="centercaption"></figcaption>
   {.leftimagecaption}        <figcaption class="leftcaption"></figcaption>
   {.centerimagecaption-full} <figcaption class="centercaption"></figcaption>
   {.centerimage}  {.img-inline}  {.img-row}  {.img-row-center}  {.img-full}  {.img-item}  {.img-center} .sm .md .lg
   {style="width:200px"} {style="width:49%"} {style="height:200px"} {style="height:400px"}
   {style="width:300px"}  {style="height:300px"}  {style="width:49%"}
   ===================================================== */

/* =====================================================
   VARIABLES CSS
   ===================================================== */
:root {
  --img-height-base: 180px;
  --img-height-sm: 100px;
  --img-height-md: 140px;
  --img-height-lg: 220px;
  --img-inline-base: 1em;
  --img-inline-sm: 0.9em;
  --img-inline-md: 1.1em;
  --img-inline-lg: 1.8em;
  --img-gap: 6px;
  --caption-size: 0.8em;
  --caption-spacing: 0.4em;
}

/* =====================================================
   1. IMAGES DANS LES LISTES (BULLET POINT)
   ===================================================== */
li p > img.img-item {
  display: block;
  height: 140px;
  width: auto;
  max-width: none;
  object-fit: contain;
  margin-top: 0.5em;
  margin-bottom: 1em;
}

/* Fix du <p> dans les listes contenant des images inline */
li p:has(> img.img-inline) {
  display: inline;
  margin: 0;
}

/* =====================================================
   2. IMAGES INLINE (TEXTE ET LISTES)
   ===================================================== */
p > img.img-inline,
li p > img.img-inline,
li > img.img-inline {
  display: inline;
  width: auto;
  object-fit: contain;
  height: var(--img-inline-base);
  max-height: none;
  vertical-align: -0.15em;
}

/* Variantes de taille inline */
.img-inline.sm { height: var(--img-inline-sm); }
.img-inline.md { height: var(--img-inline-md); }
.img-inline.lg { height: var(--img-inline-lg); }

/* =====================================================
   3. IMAGES EN LIGNE (GALERIE HORIZONTALE)
   ===================================================== */
/* Conteneurs de galerie - propriétés communes */
p:has(> img.img-row),
p:has(> img.img-row-center) {
  display: flex;
  gap: var(--img-gap);
  align-items: flex-start;
  margin-bottom: 0;
}

/* Galerie standard */
p:has(> img.img-row) {
  max-width: 100%;
  overflow-x: auto;
}

/* Galerie centrée */
p:has(> img.img-row-center) {
  justify-content: center;
}

/* Images de galerie - propriétés communes */
p > img.img-row,
p > img.img-row-center {
  height: var(--img-height-base);
  width: auto;
  object-fit: contain;
  flex: 0 1 auto;
}

/* Spécifique à img-row */
p > img.img-row {
  flex-shrink: 1;
  max-height: var(--img-height-base);
}

/* Variantes de taille pour galeries */
p > img.img-row.sm,
p > img.img-row-center.sm { height: var(--img-height-sm); }

p > img.img-row.md,
p > img.img-row-center.md { height: var(--img-height-md); }

p > img.img-row.lg,
p > img.img-row-center.lg { height: var(--img-height-lg); }

/* =====================================================
   4. IMAGE PLEINE LARGEUR
   ===================================================== */
p > img.img-full {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

p:has(> img.img-full) {
  max-width: 100%;
  width: 100%;
}

/* =====================================================
   5. IMAGE CENTRÉE SIMPLE
   ===================================================== */
p > img.img-center {
  display: block;
  margin: 0 auto;
}

/* =====================================================
   6. CAPTIONS (Material-like)
   ===================================================== */
.md-typeset figcaption,
figcaption {
  font-size: var(--caption-size);
  line-height: 1.0;
  color: var(--md-default-fg-color--light);
  margin-top: var(--caption-spacing);
}

/* Réduit l'espacement entre image avec caption et figcaption */
p:has(> img.centerimagecaption),
p:has(> img.centerimagecaption-full),
p:has(> img.leftimagecaption),
p:has(> img.img-row-center) + figcaption {
  margin-bottom: 0;
}

/* Images avec caption - propriétés communes */
img.centerimagecaption,
img.centerimagecaption-full,
img.leftimagecaption {
  margin-bottom: 0;
  display: block;
}

/* Alignement centré */
figcaption.center,
figcaption.centercaption,
figcaption.centercaption-full {
  text-align: center;
}

/* Alignement gauche */
figcaption.left,
figcaption.leftcaption {
  text-align: left;
}

/* =====================================================
   7. RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
  /* Empile les images en ligne */
  p:has(> img.img-row),
  p:has(> img.img-row-center) {
    display: block;
  }

  p > img.img-row,
  p > img.img-row-center {
    display: block;
    margin: 0.3em auto;
    height: auto;
    max-width: 100%;
  }
}