body {
  margin-top: 6px;
    font-family: Arial, sans-serif;
    line-height: 1.4;
    padding: 0;
    word-break: break-word;
    hyphens: auto;
    background-color: #FAFAF9;
    color: #222222;
    text-align: justify;
    max-width: 100vw;
   overflow-x: hidden;
    counter-reset: koan-compteur;
  }


  html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

 blockquote {
      margin: 1em auto;
      padding: 1em;
      background-image: linear-gradient(to right, #D0D0B9, #FAFAF9);
      width: 95%;
      border-bottom-left-radius: 14px;
      box-shadow : -15px 7px 20px -1px #808080;
        }
   blockquote::first-line {
  font-weight: bold;
  color: #990000;
  font-size: 12pt;
}


/* N'oublie pas de l'initialiser au début */
body {
  counter-reset: koan-compteur;
}

  .conteneur {
    max-width: 1000px;
    width: 100%;
    margin: auto;
    padding: 0 1em 2em 1em;
    overflow-x: hidden;
  }
h1 {
font-family: "Trebuchet MS", sans-serif;
font-size : 2em;
color : #064647;
text-align : center;
font-weight : normal;
margin-top: 0.1em;
margin-bottom: 4px;
}
h2  {
  font-family: "Trebuchet MS", sans-serif;
  font-size : 2.4em;
  color: #363636;
  font-weight : bold;
  text-align : center;
  margin-top: 0;

}

h6   {
font-size : 0.9em;
color : #234378;
text-align : center;
font-weight: normal;
}
.numero {
      display: block;
      text-align: center;
      font-size : 1.4em;
      margin-top: 20px;
}
    .numero a {
      text-decoration: none;
      background-color: #ABABAB;
      padding: 8px 10px;
      border-radius: 8px;
      color: #0E0A07;
      font-weight: bold;
      box-shadow: 1px 2px 6px rgba(0,0,0,0.2);
    }
  .numero a.actif {
  background-color: #CFCFCF;
  color: white;
  pointer-events: none;
  cursor: default;
}
   .numero a:hover {
      background-color: #2C2016;
      color: #FFFFFF;
    }
  .soustitre {
    text-align: center;
    font-style: italic;
    margin-bottom: 1em;
  }
a {
  color: #006699;
  text-decoration: none;
}
a:hover {
   color: #FCF8F3;
   background-color: #006699;
  text-decoration: none;
}
  .imagegauche {
    float: left;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 10px;
    max-width: 80%;
    text-align: center;
     position: relative;
    z-index: 5; /* assez haut pour passer devant les autres éléments */
    font-size: 12px;
    border-radius: 20px;
  }
.imagedroite {
    float: right;
    width: auto;
    max-width: 100%;  /* empêche de dépasser la largeur du bloc parent */
    height: auto;     /* garde les proportions naturelles de l'image */
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: hidden;
     position: relative;
    z-index: 5; /* assez haut pour passer devant les autres éléments */
    }

      hr {
      border: solid;
      border-top: 2px dashed #ccc;
      margin: 40px 0;
    }
    .retour {
      display: block;
      text-align: center;
      margin-top: 40px;
    }
    .retour a {
      text-decoration: none;
      background-color: #e6cfa8;
      padding: 10px 20px;
      border-radius: 8px;
      color: #3e2e1e;
      font-weight: bold;
      box-shadow: 1px 2px 6px rgba(0,0,0,0.2);
    }
    .retour a:hover {
      background-color: #f5e6cc;
      color: #000;
    }
 .dialogue-menu ul {
  list-style: none;
  padding: 0;
  margin: 1em 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  white-space: nowrap;
  gap: 1.2em;
}

.dialogue-menu li {
  display: inline;
}

.dialogue-menu a {
  text-decoration: none;
  color: #603e2d;
  font-weight: normal;
}

.dialogue-menu a:hover {
  text-decoration: underline;
  color: #000;
}
    @media screen and (max-width: 768px) {
  .illustration {
    width: 100%;
    height: auto;
    display: block;
    margin: auto;
  }
     .imagegauche {
      float: none;
      margin: 0 auto 1em auto;
      display: block;
      max-width: 100%;
    }
      .imagedroite {
      float: none;
      margin: 0 auto 1em auto;
      display: block;
      max-width: 100%;
    }

    h1, h2, .soustitre {
      font-size: 1.2em;
    }
  }