body {
background-color: #F8F8F8;
color : #000000;
text-align : justify;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 1em;
margin : 0;
padding : 0;

}
#master {
  margin: auto;
  width: 100%;
  max-width: 1200px; /* ça évite que ça s’étale trop sur les écrans larges */
}
#contenu {
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
}
#groupetab {
width : auto;
margin-left : 10px;
margin-right : 10px;
}
#frameHeader {
background-image : url(expo_titre.gif);
background-repeat : no-repeat;
background-position : center 0%;
margin : 5px;
height : 40px;
}
.portrait {
float : left;
margin-left : 10px;
margin-right : 10px;
margin-bottom : 5px;
}
.groupe {
width : auto;
margin-left : 20px;
margin-right : 20px;
}
#groupetab {
width : auto;
margin-left : 10px;
margin-right : 10px;
}
a {
color : #0A9E9E;
 text-decoration: none;
}
a:visited {
color : #085461;
}
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;
  }
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 : 120%;
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  {
 width: 400px;
 font-size: 1.4em;
 color: #FFFFFF;
 text-align: center;
 text-shadow: 1px 1px 4px #404040;
 background-color: #3CBFAC;
 padding-bottom: 10px;
 border-radius : 6px;
box-shadow : 5px 12px 29px 1px #808080;
}

table {
  width: auto;
  padding: 2px;
  background-color: transparent;
  text-align: center;
  border-collapse: collapse;
}

td {
  color: #CC3300;
  text-align: center;
  font-family: Verdana;
  font-size: 0.9em;
  vertical-align: top;
  padding: 10px;
  border-bottom: none;
}

.cadre {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 12px;
}


.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 {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 5px 12px 29px 1px #808080;
}

.item-image .legende {
  margin-top: 12px;
  font-size: 0.9em;
  font-style: italic;
  color: #292929;
}
.legende {
  font-style: italic;
   color: #404040;
  margin-top: 12px;
  font-size: 0.9em;
}
.titre {
color : #EB3A1A;
font-family: Times new Roman,cursive;
text-align : center;
font-size : 3.2em;
 text-shadow: 1px 1px 2px #000000;
}
img {
border-radius : 6px;
box-shadow : 5px 12px 29px 1px #808080;
}

/* ?? RESPONSIVE : sur écran étroit (mobile), chaque image prend toute la ligne */
@media screen and (max-width: 700px) {
  .item-image {
    flex: 1 1 100%;
  }
}