.carré1 {
    background-color:#abd19c;
    width:50px;
    height:50px;
}
.carré2 {
    background-color:#FFFF4D;
    width:50px;
    height:50px;
    opacity:0.5;
}
.carré3 {
    background-color:#FFFF00;
    width:50px;
    height:50px;
}
.carré4 {
    background-color:#e5414f;
    width:50px;
    height:50px;
}
.carré5 {
    background-color:#ffc0cb;
    width:50px;
    height:50px;
}
.carré6 {
    background-color:#eb4ea0;
    width:50px;
    height:50px;
}
.carré7 {
    background-color:#222626;
    width:50px;
    height:50px;
}
.carré8 {
    background-color:#a5dbf9;
    width:50px;
    height:50px;
}
.carré9 {
    background-color:dodgerblue;
    width:50px;
    height:50px;
}
.carré10 {
    background-color:#747a72;
    width:50px;
    height:50px;
}

.carré11 {
    background-color:darkgreen;
    width:50px;
    height:50px;
}
.carré12 {
    background-color:#FFFF4D;
    width:50px;
    height:50px;
    opacity:0.5;
}
.carré13 {
    background-color:#FFFF00;
    width:50px;
    height:50px;
}
.carré14 {
    background-color:#ffc0cb;
    width:50px;
    height:50px;
}
.carré15 {
    background-color:#eb4ea0;
    width:50px;
    height:50px;
}
.carré16{
    background-color:#584ba1;
    width:50px;
    height:50px;
}
.carré17{
    background-color:#a5dbf9;
    width:50px;
    height:50px;
}
.carré18{
    background-color:dodgerblue;
    width:50px;
    height:50px;
}
.carré19{
    background-color:#999ad4;
    width:50px;
    height:50px;
}
.carré20{
    background-color:#f5a98b;
    width:50px;
    height:50px;
}
@media all and (max-width:1024px) {

    .carré17{
        display:none;
    }
    .carré18{
        display:none;
    }
    .carré19{
        display:none
    }
    .carré20{
        display:none;
    }
}
header {
  
    height:auto;
    display:inline-block;
    text-align:center;
    border:1px double black;
}

.header-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo {
    max-width: 60%;
    max-height: auto;
}

div {
    background-color:none;
    width:auto;
    display:inline-block;
    margin-top:2.5px;
}


/* Navigation */

nav {
    display: inline-block;
    width:61.2%;
    height:40px;
    background-color:black;
    text-align:center;
    
    
}

nav ul {
    list-style-type: none;
    
}

nav li {
    display: inline-block;
    margin-right: 50px;
    font-family:verdana;
}
nav a {
    font-size: 1em;
    color: white;
    padding-bottom: 10px;
    text-decoration:none;
    font-family: 'kontrapunktlight_italic';
}
nav a:visited {
  text-decoration-line:line-through;
  text-decoration-color: #eb4ea0;
}

nav a:hover {
    color:dodgerblue;
}

.form-group {
    bottom:20px;
    margin-top:-35px;
}
ul {

    margin-top:10px;
}
body {
    font-family:verdana;
    text-align: center;
     border:1px double black;
}


@font-face {
    font-family: 'silkscreennormal';
    src: url('Polices/slkscr-webfont.eot');
    src: url('Polices/slkscr-webfont.eot?#iefix') format('embedded-opentype'),
         url('Polices/-webfont.woff') format('woff'),
         url('Polices/slkscr-webfont.ttf') format('truetype'),
         url('Polices/slkscr-webfont.svg#silkscreennormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'si';
    src: url('Polices/socicon.eot');
    src: url('Polices/socicon.eot?#iefix') format('embedded-opentype'),
         url('Polices/socicon.woff') format('woff'),
         url('Polices/socicon.ttf') format('truetype'),
         url('Polices/socicon.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'kontrapunktlight_italic';
    src: url('Polices/Kontrapunkt-LightItalic-webfont.eot');
    src: url('Polices/Kontrapunkt-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('PolicesKontrapunkt-LightItalic-webfont.woff') format('woff'),
         url('Polices/Kontrapunkt-LightItalic-webfont.ttf') format('truetype'),
         url('Polices/Kontrapunkt-LightItalic-webfont.svg#kontrapunktlight_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bebasregular';
    src: url('Polices/BEBAS___-webfont.eot');
    src: url('Polices/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('Polices/BEBAS___-webfont.woff') format('woff'),
         url('Polices/BEBAS___-webfont.ttf') format('truetype'),
         url('Polices/BEBAS___-webfont.svg#bebasregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:si;
        src: url('Polices/socicon.svg') format(svg);
    }
}
.soc {
    overflow:hidden;
    margin:0; padding:0;
    list-style:none;
    display:inline-block;
}
.soc li {
    display:inline-block;
    *display:inline;
    zoom:1;
}
.soc li a {
    font-family:si!important;
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;a
    -o-box-sizing:border-box;
    box-sizing:border-box;

    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
    transition:.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:block;
    position: relative;
    z-index: 1;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 19px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-right: 10px;
    color: black;
    background-color:#ffffff;
}

.soc a:hover {
    z-index: 2;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.soc-icon-last{
    margin:0 !important;
}

.soc-twitter:before {
    content:'a';
}
.soc-vimeo:before {
    content:'s';
}
.soc-github:before {
    content:'Q';
}
.soc-instagram:before {
    content:'x';
}
.soc-facebook:before {
    content:'b';
}
.soc-pinterest:before {
    content:'d';
}
.soc-linkedin:before {
    content:'j';
}
.soc-flickr:before {
    content:'v';
}

.container {
    display: flex;
    justify-content: space-between; /* Espacement entre la sidebar et le carrousel */
    align-items:center;
    align-content:center;
    margin: 0 auto; /* Centrer le contenu global */
    max-width: 1200px; /* Largeur maximale de la page */
}


aside {

    width:30%;
    height:500px;
    background-image:white;
    border: 2px double black;
    margin-left:15px;
    padding-left:15px; 
    margin-right:15px;
    font-family:verdana;   
    text-align:left;
    

}

@media all and (max-width:1024px) {
    aside {
        margin-left:0.2%;
        margin-right:0.2%;
    }
}

/* Suppression des marges et des bords pour html et body */
html,
body {
    padding: 0;
    margin: 0;
    align-content: center;
}




sidebar {
    padding: 20px;
    position:relative;
    z-index: 1;
    flex: 1; /* Prend un espace proportionnel */
    max-width: 400px; /* Limite la largeur */
    margin-right: 5px;
    
    
    
   
}

.sidebar ul {
    list-style-type: none;
    padding: 10px 0;
   
}

.sidebar ul li a {
    color: #000;
    text-decoration: none;
    display: block;
    padding: 7px 0;
    font-size: 17px;
    font-weight: italic;
    
    
}

.sidebar ul li a:hover {

    color: dodgerblue;
}

@media all and (max-width:1024px) {
    aside {
        margin-left:0.2%;
        margin-right:0.2%;
    }
}

.sculptures{
  
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 2fr));
  
  
}

.sculpture-item {
  width:300px;
  height:auto;
  background-color: #f4f4f4;
  padding-top:20px;
  padding-bottom: 20px;
  text-align: center;
}

.sculpture-item img {
  width:85%;
  height: auto;
  border-color: black;
  justify-items: center;
}

.sculpture-item h3 {
  font-size: 1em;
  margin-top: 15px;
}

.sculpture-item p {
  text-align:justify-all;
  font-size: 0.9em;
  color: #333;
}

.sculpture-item button {
  background-color: pink;
  border-color: black;
  padding: 5px;
  color: white;
  font-size: 0.7em;
  cursor: pointer;
  
}

.sculpture-item button:hover {
  background-color: hotpink;
}
h2 {
    font-weight:bolder;
    font-size:20px;
}
h3 { 
    font-size:20px;
    font-weight:bold;
    font-family:'bebasregular';
}
h4 {
    font-size:14px;
}
a {
    text-decoration:none;
    font-size:12px;
    text-decoration-color:none


}
.pagetitle {
    font-family:verdana;
    font-size:12px;
    width:50%;
    text-align:match-parent;

}

.text2 {
    font-family:verdana;
    width:auto;