/* Fond pleine largeur sur tous les écrans */
body {
  background-color: #f2fff9;
}

/* Bandeau d'en-tête*/
#header {
    background-color: #bbcfc7;
}

/* Style des titres */
#body-wrapper .container > h1 {
  margin-top: 5rem;
  margin-bottom: 3rem;
  text-align: center;
}
#body-wrapper .container > h3 {
  margin-top: 5rem;
  margin-bottom: 3rem;
  text-align: center;
}

/* Images hors tableaux */
.inline-img{
  max-width:312px;
  height:250px;
  object-fit:cover;
  display:inline-block;
  margin:5px;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {

  /* Le tableau devient un bloc */
#body-wrapper .container table,
#body-wrapper .container tbody,
#body-wrapper .container tr,
#body-wrapper .container td {
    display: block;
    width: 100%;
}

  /* Images */
#body-wrapper .container table img {
    width: 100%;
    height: 220px;        /* même hauteur */
    object-fit: cover;
    display: block;
  }

  /* Texte bien justifié */
#body-wrapper .container p {
    text-align: justify;
  }
}

/* Style des paragraphes */
#body-wrapper .container p {
  width : 100%;
  line-height: 1.7;        /* meilleur confort de lecture */
  margin-bottom: 1.2rem;   /* espace entre paragraphes */
  text-align: justify;     /* aligné gauche + droite */
  margin-left: auto;
  margin-right: auto;
}

/* Si le paragraphe contient UNE SEULE image */
#body-wrapper .container p img:only-child {
  width: 600px;        /* plus grande */
  height: 400px;       /* plus haute */
  display: block;
  margin: 0 auto;
}