body {
background-color : #F8F8F8;
color : #000000;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 1em;
margin : 0;
padding : 0;
text-align : center;
}
#master {
margin : auto;
width : 100%;
}
#contenu {
background-color: #FFFFFF;
margin-left : 12px;
margin-right : 12px;
margin-top : 5px;
word-wrap: break-word;
line-height: 24px;
}
.groupe {
width : auto;
margin-left : 8%;
margin-right : 8%;
text-align : justify;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 1em;
}
a {
color : #099090;
 text-decoration: none;
}
a:visited {
color : #074550;
}
a:hover {
color : #FFFEF0;
background-color : #301B07;
text-decoration: none;
}

a:active {
 color: #BBBBBB;
}

a:active, a:focus {
  background-color: #999999;
  color: white;
  text-decoration: none;
  }
.bloc-image {
  max-width: 100%;
  margin: 0px 10px 10px 0;
  float: left;
  text-align: center;
}

.bloc-image-droite {
    max-width: 100%;
  float: right;
  margin-left: 15px;
}
.bloc-image-gauche {
  max-width: 100%;
  float: left;
  margin-right: 15px;
}

.image-gauche {
  float: left;
  margin: 0 15px 5px 0;

}
.image-droite {
  float: right;
  margin: 0 0 5px 15px;
}

.legende {
  font-size: 0.9em;
  font-style: italic;
  color: #3B3B3B;
  margin-top: 5px;
  text-align: center;
}
h1 {
color : #FFFFFF;
background-image : linear-gradient(to right, #616161, #EEEEEE);
height : auto;
width : auto;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 250%;
font-weight : bold;
text-align : center;
text-shadow: 1px 1px 4px #262626;
line-height : 180%;
padding : 8px;
border-radius : 6px;
box-shadow : 5px 12px 29px 1px #808080;
}
h2 {
color : #0B4C61;
font-family: Times new Roman,cursive;
text-align : center;
font-size : 2em;

font-weight : normal;

}
h3  {
 font-size: 2em;
 font-family: "Times New Roman", Times, serif;
 color: #222222;
 text-align: center;
 line-height : 130%;
 padding-bottom: 10px;
}
h4  {
 font-size: 1.6em;
 font-family: "Times New Roman", Times, serif;
 color: #00ADAD;
 text-align: center;

 padding: 10px;
}
h6  {
 font-size: 1.1em;
 font-family: "Times New Roman", Times, serif;
 color: #996600;
 text-align: left;
 appearance: push-button;
}

.cadre {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 15px;
}
.cadre img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 5px 12px 29px 1px #808080;
}

.item-image {
  flex: 1 1 calc(33.333% - 24px); /* trois images par ligne avec l'espace entre */
  max-width: 300px;
  text-align: center;
}

.item-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 5px 12px 29px 1px #808080;
}

.item-image .legende {
  margin-top: 5px;
  font-size: 0.9em;
  font-style: italic;
  color: #292929;
}

img {
border-radius : 8px;
box-shadow : 5px 12px 29px 1px #808080;
}
.groupe-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size : 0.9em;
}

.groupe-images img {
  max-width: 100%;
  height: auto;
  border: 0;
  transition: transform 0.3s ease;
}

.groupe-images a:hover img {
  transform: scale(1.05);
}
@media screen and (max-width: 768px) {

  /* Pour que les images s’adaptent bien */
  img {
    float: none !important;
    display: block;
    margin: 1em auto;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
@media screen and (max-width: 768px) {
  .bloc-image-droite,
  .bloc-image-gauche,
  .image-gauche,
  .image-droite {
    float: none !important;
    display: block;
    margin: 1em auto !important;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}



  /* Césure et gestion des mots longs */
  textarea,
  code,
  pre,
  samp {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
  }
}
@media screen and (max-width: 768px) {
  .legende {
    text-align: center;
    font-size: 1em; /* ou adapte selon ton besoin */
    padding: 0.5em;
  }
}

@media screen and (max-width: 768px) {
  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1em auto;
    float: none !important;
    clear: both;
  }
}