/* ===== Bloc portrait : figure (image + légende) à côté du texte ===== */
body div.bloc-portrait {
  overflow: hidden !important;
  display: block !important;
}

/* Réglages par défaut : à gauche, 30 % */
body div.bloc-portrait figure {
  float: left !important;
  width: 30% !important;
  max-width: 30% !important;
  margin: 10px !important;
  padding: 0 !important;
  border: 0 none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Côté */
body div.bloc-portrait.gauche figure { float: left !important; }
body div.bloc-portrait.droite figure { float: right !important; }

/* Largeur */
body div.bloc-portrait.l20 figure { width: 20% !important; max-width: 20% !important; }
body div.bloc-portrait.l30 figure { width: 30% !important; max-width: 30% !important; }
body div.bloc-portrait.l40 figure { width: 40% !important; max-width: 40% !important; }

/* Image */
body div.bloc-portrait figure img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 none !important;
  outline: none !important;
  box-shadow: none !important;
  float: none !important;
}

/* Légende */
body div.bloc-portrait figcaption {
  display: block !important;
  margin: 5px 0 0 0 !important;
  padding: 0 !important;
  font-size: 0.85em !important;
  font-style: italic !important;
  line-height: 1.3 !important;
  text-align: center !important;
  color: #555 !important;
}

/* Sur mobile : la figure passe au-dessus du texte, quelles que soient les classes */
@media (max-width: 600px) {
  body div.bloc-portrait figure,
  body div.bloc-portrait.gauche figure,
  body div.bloc-portrait.droite figure,
  body div.bloc-portrait.l20 figure,
  body div.bloc-portrait.l30 figure,
  body div.bloc-portrait.l40 figure {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
  }
}