:root {
  --color1: #a09696;
  --color2: #c9c9bcc4;
  --color3: #000000;
  --color4: #ffffff;
  --color5: #e79bbcfe;
}



body { background-color: var(--color3); color: var(--color4); margin: 0;  padding: 0;}

nav ul { background: var(--color4); text-align: center; padding-top: 20px; padding-bottom: 20px;}

nav a {text-decoration: none; color: var(--color1); font-size: 1.5rem;  margin-right: 100px;}

nav a:hover {color: #000000;}

body a {color: var(--color1);}

body a:hover {color: var(--color3);}

#logo2 { width: 50px;  position: absolute;  top: 25px;}

.platine { width: 40%;  padding-bottom: 40px;}


.Titre { text-align: center;}

h1 { height: 30px;  font-size: 3rem;  color: #a09696;  text-shadow: 2px 2px 0px var(--color4);}

footer { color: #ffffff;  background-color: var(--color2);}







.images { display: flex;margin: 2em;}

.image {  margin: 0;  flex: 1;
  color: #000000;
  padding: 1rem;
  border: 1px solid #d8d8d8;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.1)}

.image + .image { margin-left: 20px;}

.image-item { width: 100%;vertical-align: top;}

.image-description { margin-top: 10px;margin-bottom: 10px;text-align:justify;}




      @media screen and (max-width: 760px){
        body { background-color: #000000; }

        .images {display: grid;    
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));    
            grid-gap: 1em; }

                                                  }