:root{
    --Largeurglobale:1200px;                                                    /*Largeur du site*/
    --FontCourant :'Hind', sans-serif;                              /*Défintion du texte courant*/
    --FontDeco :    'Barlow Condensed', sans-serif; /*Définition de la police décorative*/
    --FontInfo : 'Comfortaa', cursive;                          /*Définition dez la police pour les infos*/
        /*Nuancier*/
    --Color1:#403f39; /*Gris foncé*/
    --Color2:#fdba16; /*Jaune Orange*/
    --Color3:#52c2ef; /*Bleu clair*/
    --Color3T:rgba(82, 194, 239,0.8); /*Bleu clair transparent*/
    --Color4:#f26839; /*Rouge orange*/
    --Color5:#935ea7; /*Violet*/
    --Color6:#8eda4c; /*Vert pomme*/
    --Color0:rgba(244, 244, 242,1); /*Blanc cassé*/
    --Color0T:rgba(244, 244, 242,0.8); /*Blanc cassé transparent*/
    --Color0TT:rgba(244, 244, 242,0.5); /*Blanc cassé plus transparent*/
    --Color10:#d8cdc9; /*gris*/
    --Color11:#c2b7b4; /*gris moyen*/
    --Color12:#a99f9c; /*gris moyen accentué*/
    --Color10T:rgba(64, 63, 57, 0.8); /*gris transparent*/
    --Color10TT:rgba(216, 205, 201, 0.5); /*gris plus transparent*/

}


html body {
margin: 0;
padding: 0;
font-size: 62.5%;
background-color: var(--Color1);
}
a:link, a:visited, a:hover, a:active{
text-decoration: none;
color: none;
} 
/*gestion des typo*/
p{
    font-family: 'Hind', sans-serif;
    color: var(--Color1);
    font-size : clamp(0.9rem, 1.2vw, 1.1rem);
    text-align: justify;
    text-indent: 1.5em; /* retrait du texte */
    letter-spacing: ;
    word-spacing :;
    line-height: 1.5em;
    text-transform: ;
    margin: 0;
}

h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size : clamp(3rem, 8vw, 5rem);
    font-weight: 100;
    color: var(--Color1);
    margin-bottom:3vh;
    margin-top:3vh;
    padding-top: 1em;
}
h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 100;
    font-size : clamp(1rem, 4vw, 3rem);
    margin: 0;
}

h3 {font-family:'Barlow Condensed', sans-serif; /*Intertitre*/
    font-size : clamp(1.5rem, 3vw, 2rem);
    font-weight: 100;
    margin: 0;
    line-height: 1.2em;
    

}
h4 {font-family: var(--FontInfo);
    font-size : clamp(1rem, 2vw, 1.5rem);
    font-weight: 100;
    margin: 0;
}
h5 {font-family: var(--FontInfo);
    font-size : clamp(0.6rem, 1vw, 1.2rem);
    font-weight: 100;
    margin: 0;
}
h6 {font-family: var(--FontCourant);
    font-size : clamp(0.6rem, 1vw, 1rem);
    font-weight: 100;
    margin: 0;
}

.Italic{
    font-style: italic;
}

.Bold{
font-weight: 800;

}

.FontUp{
    text-transform: uppercase;
}
.AuteurArticle{
    text-transform: uppercase ;
    text-align: right;
    font-style: italic;
}

.Intertitre{
    font-family:'Barlow Condensed', sans-serif; /*Intertitre*/
    font-size : clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 100;
    margin: 3vh 0 2vh 0;
    line-height: 1.2em;
    
    color: var(--Color1);
}

.Chapeau{
   color: var(--Color1);
   font-family: var(--FontCourant);
   font-size : clamp(1rem, 2vw, 1.5rem);
    line-height: 1.2em;
    padding-bottom: 1em;

}
/*gestion des div et img*/
img {
    width : 100%;
    height : auto;
}
.Miniature{
    display: block;
    width: 15vw;
    height: 15vw;
    min-width: 100px;
    min-height: 100px;
    overflow: hidden;
    object-fit: cover;
    margin: 0vw;
    
}
.ContainerType{
    display: block;
    flex-direction: column;
    max-width: var(--Largeurglobale);
   
    margin-left: auto;
    margin-right: auto;   
    padding: 0% 5% 0% 5%;
}
.DivFond0{
    width: 100%;
    background-color: var(--Color0);
}

.DivFond1{
    width: 100%;
    background-color: var(--Color1);
}
.DivFond2{
    width: 100%;
    background-color: var(--Color3);
}
.DivFond2Img{
    width: 100%;
    background-color: var(--Color1);
    background-image:url("../Images/IMG-Site/Fondbleu.jpg") ;
    background-repeat: no-repeat;
}

.DivFond3{
    width: 100%;
    background-color: var(--Color2);
}
.DivFond4{
    width: 100%;
    background-color: var(--Color4);
}
.DivFond4Img{
    width: 100%;
    background-color: var(--Color1);
    background-image:url("../Images/IMG-Site/FondOrange.jpg") ;
    background-repeat: no-repeat;
}
.DivFond5{
    width: 100%;
    background-color: var(--Color5);
}
.DivFond6{
    width: 100%;
    background-color: var(--Color6);
}
.DivFond10{
    width: 100%;
    background-color: var(--Color10);
    background-image:url("../Images/IMG-Site/test2.jpg") ;
    color: var(--Color0);
}

.DivFond10 h1 {
    color: var(--Color0);
}

.DivFond10 .Chapeau{
    color: var(--Color0);
}
.Spacer{
width: 100%;
height: 10vh;
}
.SpacerColor{
    display: flex;
    justify-content: space-between;
    width: 16vw;

    height: 1px;
    margin-top: 5px;
}
.SpacerColor .Color2{
    display: flex;
    background-color: var(--Color2);
    width: 10%;
    height: 1px;
}
.SpacerColor .Color3{
    display: flex;
    background-color: var(--Color3);
    width: 10%;
    height: 100%;
}
.SpacerColor .Color4{
    display: flex;
    background-color: var(--Color4);
    width: 10%;
    height: 100%vh;
}
.SpacerColor .Color5{
    display: flex;
    background-color: var(--Color5);
    width: 10%;
    height: 100%;
}
/*------------icone-------*/
.Icone{
    font-family: 'Comfortaa', cursive; 
    font-weight: 100;
    font-size : clamp(0.5rem, 1vw, 1rem);
    margin: 0;
    padding: 0.3rem 0.5rem 0.1rem 0.5rem;
    border: 0px solid var(--Color10);
    background-color: var(--Color1);
}
/**/
header{

}

.HeaderPosition{
    
    position: fixed;
    top: 0;
    width: 100%;
    height: 2.4rem;
    background-color: var(--Color0);
    z-index: 100;
}
.HeaderDisposition{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    max-width: var(--Largeurglobale);
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem 1rem 0rem 1rem;
 }
 .HeaderTitre{
    font-family: var(--FontDeco);
    font-size: 1.4rem;
 }
 .HeaderMenu{
    display: flex;
    font-family: var(--FontCourant);
    font-size : clamp(0.6rem, 1vw, 1.2rem);
    
    letter-spacing: 1px;
    gap: 0.7rem;
 }

 .HeaderMenu a {
    text-decoration: none;
    color: var(--Color1);
    

 }
 #LienGalerie a:hover {
     color: var(--Color2);
     border-bottom: solid 1px var(--Color2);
     border-top: solid 20px var(--Color2);
 }

 #LienGalerieactive a {
     color: var(--Color2);
     border-bottom: solid 1px var(--Color2);
     
 }
 #LienArtistes a:hover {
     color: var(--Color3);
     border-bottom: solid 1px var(--Color3);
     border-top: solid 20px var(--Color3);
 }
 #LienArtistesactive a {
     color: var(--Color3);
     border-bottom: solid 1px var(--Color3);
     
 }
 #LienMedia a:hover {
     color: var(--Color6);
     border-bottom: solid 1px var(--Color6);
     border-top: solid 20px var(--Color6);
 }
 #LienMediaactive a {
     color: var(--Color6);
     border-bottom: solid 1px var(--Color6);
 }

 #LienApropos a:hover {
     color: var(--Color5);
     border-bottom: solid 1px var(--Color5);
     border-top: solid 20px var(--Color5);
 }
 #LienAproposactive a {
     color: var(--Color5);
     border-bottom: solid 1px var(--Color5);
     
 }
.BlockLogo{
    display: flex;
    justify-content: center;
    height: 7rem;
    background-color: var(--Color0);
    width: 100%;
}
#ImgLogo{
     margin-top: 2.4rem;
     /*width: 70px;*/
     width:3rem;
}


@keyframes img {
    0% {background-image:  url("../Images/Galerie-MDH/Repro-MH1231.jpg"); }
    15% {background-image:  url("../Images/Galerie-MDH/Repro-MH1231.jpg"); }
    16% {background-image:  url("../Images/Galerie-MDH/Repro-MH1189.jpg"); }    
    30% {background-image:  url("../Images/Galerie-MDH/Repro-MH1189.jpg") ;}
    31% {background-image:  url("../Images/Galerie-MDH/Repro-MH1134.jpg"); }    
    45% {background-image:  url("../Images/Galerie-MDH/Repro-MH1134.jpg") ; }
    46% {background-image:  url("../Images/Galerie-MDH/Sans-titre-1-v2.jpg");}    
    60% {background-image:  url("../Images/Galerie-MDH/Sans-titre-1-v2.jpg") ; }
    61% {background-image:  url("../Images/Galerie-MDH/Repro-MH1126.jpg"); }    
    75% {background-image:  url("../Images/Galerie-MDH/Repro-MH1126.jpg") ; }
    76% {background-image:  url("../Images/Galerie-MDH/Repro-MH1070.jpg"); }    
    90% {background-image:  url("../Images/Galerie-MDH/Repro-MH1070.jpg") ; }
    91% {background-image:  url("../Images/Galerie-MDH/Repro-MH1304.jpg"); }    
    100% {background-image:  url("../Images/Galerie-MDH/Repro-MH1304.jpg") ; background-size: 130%;}
    }
@keyframes Panneau {
    0% {background-color: rgba(244, 244, 242,0);}
    14% {background-color: rgba(244, 244, 242,0);}
    15% {background-color: rgba(244, 244, 242,1);}
    16% {background-color: rgba(244, 244, 242,1);}
    17% {background-color: rgba(244, 244, 242,0);}
    29% {background-color: rgba(244, 244, 242,0);}
    30% {background-color: rgba(244, 244, 242,1);}
    31% {background-color: rgba(244, 244, 242,1);}
    32% {background-color: rgba(244, 244, 242,0);}
    44% {background-color: rgba(244, 244, 242,0);}
    45% {background-color: rgba(244, 244, 242,1);}
    46% {background-color: rgba(244, 244, 242,1);}
    47% {background-color: rgba(244, 244, 242,0);}
    59% {background-color: rgba(244, 244, 242,0);}
    60% {background-color: rgba(244, 244, 242,1);}
    61% {background-color: rgba(244, 244, 242,1);}
    62%  {background-color: rgba(244, 244, 242,0);}
    74% {background-color: rgba(244, 244, 242,0);}
    75% {background-color: rgba(244, 244, 242,1);}
    76% {background-color: rgba(244, 244, 242,1);}
    77%  {background-color: rgba(244, 244, 242,0);}
    89% {background-color: rgba(244, 244, 242,0);}
    90% {background-color: rgba(244, 244, 242,1);}
    91% {background-color: rgba(244, 244, 242,1);}
    92%  {background-color: rgba(244, 244, 242,0);}
    100% {background-color: rgba(244, 244, 242,0);}   
}
@keyframes example {
    0%   {background-image: url("../Images/Galerie-MDH/Repro-MH1062.jpg") ; }  
    20%   {background-image: url("../Images/Galerie-MDH/Repro-MH1227.jpg") ; }    
    40%   {background-image: url("../Images/Galerie-MDH/Repro-MH1134.jpg") ;}   
    60%   {background-image: url("../Images/Galerie-MDH/Repro-MH1189.jpg") ;}   
    80%   {background-image: url("../Images/Galerie-MDH/Repro-MH1101.jpg") ;}    
    100%   {background-image: url("../Images/Galerie-MDH/Sans-titre-1-v2.jpg") ; background-position:90%;}    
}

@keyframes banniere {
    0%   {background-image: url("../Images/IMG-Site/banniere.jpg") ; }  
       
    100%   {background-image: url("../Images/IMG-Site/banniere.jpg")  ; background-position:90%;}    
}

.SliderAccueil-Animation{
    display: block;
    margin-top: 0px;
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: var(--Color0);
    /*animation-name: img;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    */   
    height: 550px;
   
    min-height: 300px;
    
    align-items: center;
    justify-content: center;
       z-index: 1;
}



.SliderAccueil-Container{
    display: flex;
    margin-top: 0px;
    flex-direction: column;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: rgba(244, 244, 242,0.5);
    /*animation-name: Panneau ;
    animation-duration: 50s;
    animation-iteration-count: infinite;*/   
    height: 50%;
   
    min-height: 300px;
    
    align-items: center;
    justify-content: center;
       z-index: 1;
}
.TitreAccueil{
    display: flex;

    align-items: center;
    color:transparent;
    /*height: 14rem;*/
    background-color: var(--Color0);   
    padding: 0rem 4rem 0rem 4rem;
    animation-name: banniere;
    animation-duration: 200s;
    animation-iteration-count: infinite;
  -webkit-background-clip: text;
  background-clip: text;   
    
    
    z-index: 2;
}


.TitreAccueil h1{
     
    font-size:10vw;
    /*font-size: clamp(400%, 1500%, 2000%);*/
    font-weight: 200;
     color:transparent;
     z-index: 1;
}
.BaseligneTitreAcceuil{
    /*font-size:1.5vw;*/
    font-size: clamp(1rem, 1.5vw, 5rem);
    text-transform:uppercase ;
    font-family: var(--FontDeco);
    padding-top: 0rem;
}




.LigneDecoAccueil{
    position: absolute;
    width: 100%;
    height: 0.5rem;
    background-color: rgba(255, 255, 255,0);
   
    
    z-index: 0;
}

.DivTexteIntro{
    display: flex;
    flex-direction: column;
    background-color: var(--Color1);
    max-width: var(--Largeurglobale);
    margin-left: auto;
    margin-right: auto;   
    padding: 0% 5% 0% 5%;
    margin-top: -4rem;
    padding: 1.5rem;
    bottom: 0;
}
.DivTexteIntro p {
    color: var(--Color0);
}
.DivTexteIntro h2 {
    color: var(--Color0);
    text-align: center;
    padding-bottom: 1em;
}
.DivTexteIntro h3 {
    color: var(--Color0);
    text-align: center;
    padding-bottom: 1em;
}
.BoutonGalerie{
    text-transform: uppercase;
    font-family: var(--FontInfo);
    color: var(--Color1);
    padding: 1%;
    border-radius: 0;
    border: none;
    cursor: pointer;
    background: none;

}
/*-----------------section parcours--------------------*/
.ContainerParcours{
    display: flex;
    justify-content: space-around;
    row-gap: 5vh;
    column-gap: 5vw;
    flex-wrap: wrap;
    flex-grow: 30%;
    flex-shrink: 30%;
    padding-bottom: 3vh;
}

/* Vignette art populaire */
.VignetteParcourArtPop{
    
    flex:450px;
    max-width: 600px;
    min-width: 200px;
    height: 300px;
    background-color: var(--Color1);
    background-image: url("../Images/Galerie-MDH/Repro-MH1379.jpg");
    background-size: cover;
    }

.VignetteParcourArtPop .info {
    display: flex;
    opacity: 1;
    color: #rgba(0, 0, 0, 0.0);
    width: 100%;   
    height: 100%;
    z-index: 1;    
}

.VignetteParcourArtPop .info:hover {  
    opacity: 1;

}

.VignetteParcourArtPop .Titre{
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--Color5);
    padding: 1rem 1rem 1rem 2rem;
    z-index: 3;
    width: 100%;
    height: auto;
    margin-left: 0vw;
    margin-top: 0vh;
    border-bottom: 0px double var(--Color5);
    border-left: 0px solid var(--Color5);
}

.VignetteParcourArtPop .Titre h3{
     color: var(--Color0);
     font-weight: 100;

}

.VignetteParcourArtPop .Titre h4{
     color: var(--Color1);
     font-weight: 100;
     font-style: italic;
}


/*Vignette Artiste haitien*/ 
.VignetteParcourArtHaitien{
    flex:450px;
    max-width: 600px;
    min-width: 200px;
    height: 300px;
    background-color: var(--Color1);
    background-image: url("../Images/Galerie-MDH/Repro-MH1379.jpg");
    background-size: cover;
    }

.VignetteParcourArtHaitien .info {
    display: flex;
    opacity: 1;
    color: #rgba(0, 0, 0, 0.0);
    width: 100%;   
    height: 100%;
    z-index: 1;    
}

.VignetteParcourArtHaitien .info:hover {  
    opacity: 1;

}

.VignetteParcourArtHaitien .Titre{
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--Color4);
    padding: 1rem 1rem 1rem 2rem;
    z-index: 3;
    width: 100%;
    height: auto;
    margin-left: 0vw;
    margin-top: 0vh;
    border-bottom: 0px double var(--Color4);
    border-left: 0px solid var(--Color4);
}

.VignetteParcourArtHaitien .Titre h3{
     color: var(--Color0);
     font-weight: 100;
}
.VignetteParcourArtHaitien .Titre h4{
     color: var(--Color1);
     font-weight: 100;
     font-style: italic;
}


.VignetteParcourArtHaitien .Decotitre{
    background-color: var(--Color5);
    opacity: 1;
    width: 100%;
    height: 100%;
}

/*Vignette Art des enfants de la MDH*/ 
.VignetteParcourArtEnfant{
    flex:450px;
    max-width: 600px;
    min-width: 200px;
    height: 300px;
    background-color: var(--Color1);
    background-image: url("../Images/Galerie-MDH/Repro-MH1379.jpg");
    background-size: cover;
    }

.VignetteParcourArtEnfant .info {
    display: flex;
    opacity: 1;
    color: #rgba(0, 0, 0, 0.0);
    width: 100%;   
    height: 100%;
    z-index: 1;    
}

.VignetteParcourArtEnfant .info:hover {  
    opacity: 1;

}

.VignetteParcourArtEnfant .Titre{
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--Color6);
    padding: 1rem 1rem 1rem 2rem;
    z-index: 3;
    width: 100%;
    height: auto;
    margin-left: 0vw;
    margin-top: 0vh;
    border-bottom: 0px double var(--Color5);
    border-left: 0px solid var(--Color6);
}

.VignetteParcourArtEnfant .Titre h3{
     color: var(--Color0);
     font-weight: 100;
}
.VignetteParcourArtEnfant .Titre h4{
     color: var(--Color1);
     font-weight: 100;
     font-style: italic;
}


.VignetteParcourArtEnfant .Decotitre{
    background-color: var(--Color5);
    opacity: 1;
    width: 100%;
    height: 100%;
}

/*Vignette Artiste afrodescendant*/ 
.VignetteParcourArtAfro{
    flex:450px;
    max-width: 600px;
    min-width: 200px;
    height: 300px;
    background-color: var(--Color1);
    background-image: url("../Images/Galerie-MDH/Repro-MH1379.jpg");
    background-size: cover;
    }

.VignetteParcourArtAfro .info {
    display: flex;
    opacity: 1;
    color: #rgba(0, 0, 0, 0.0);
    width: 100%;   
    height: 100%;
    z-index: 1;    
}

.VignetteParcourArtAfro .info:hover {  
    opacity: 1;

}

.VignetteParcourArtAfro .Titre{
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--Color3);
    padding: 1rem 1rem 1rem 2rem;
    z-index: 3;
    width: 100%;
    height: auto;
    margin-left: 0vw;
    margin-top:0vh;
    border-bottom: 0px double var(--Color5);
    border-right: 0px solid var(--Color3);
}

.VignetteParcourArtAfro .Titre h3{
     color: var(--Color0);
     font-weight: 100;
}
.VignetteParcourArtAfro .Titre h4{
     color: var(--Color1);
     font-weight: 100;
     font-style: italic;
}


.VignetteParcourArtAfro .Decotitre{
    background-color: var(--Color5);
    opacity: 1;
    width: 100%;
    height: 100%;
}
/*---------------------Divers Page index -----------------*/
.LienPages {
    display: flex;
    max-width: var(--Largeurglobale);
    align-items: flex-end;
    justify-content:center ;
    margin-top:  2em;
}
.LienPages .Texte{
   
    text-transform: uppercase;
    padding: 1em 10em 0.7em 10em ;
    color: var(--Color4);
    border: solid 1px;
    border-left: 1px;
    border-right: 1px;
    border-color: var(--Color10T);
    margin-bottom: 6em;
    background-color: var(--Color0);
}

.LienPages .Texte:hover{
    color: var(--Color4);
    background-color: var(--Color0T);
}

.Espace{
    display: block;
    width: 100%;
    height: 2rem;
    margin-bottom: 2rem;
}


/*---------------------Pages Artistes-----------------*/

.ImageOeuvreArtiste{
    display: flex;
    margin-top: 0px;
    background-image : url("../Images/Galerie-MDH/Repro-MH1062.jpg") ;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: var(--Color1);
    height: 35vh;
    min-height: 400px;    
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
.ImageOeuvreArtiste .NomAuteur{
    width: 100%;
    max-width: var(--Largeurglobale);
    background-color: var(--Color3T);
    margin-left: 5%;
    margin-right: 5%;   
    


}
.ImageOeuvreArtiste .Nom{
    font-weight: 600;
    color: var(--Color2);
    margin-left: 3rem;
}

.TexteArtiste{
    display:inline-block;
    flex-direction: column;
    

    background-color: var(--Color0);
    padding: 2rem 7vw 2rem 7vw ;

}
.DansLaCollection{
         display:inline-block;
    background-color: var(--Color2);
    padding: 2rem 7vw 2rem 7vw ;

}
.BlockDiaporama{
    background-color: var(--Color0);
    padding: 2rem 7vw 2rem 7vw ;
}
.ImgDroite {

    
    margin-left:  2em;
    margin-bottom:  2em;
    margin-top:  0em;
    
    background-color: var(--Color0) ;
    width: 40%;
    height: auto;
    object-fit: cover;
    float: right;

    
}

.ImgDroite img {
    object-fit: cover;
}
.ImgGauche {

    margin-right:   2em;
    margin-bottom:   2em;
    margin-top:   0em;
    width: 40%;
    height: auto;
    object-fit: cover;
    float: left;

    
}

.ImgGauche img {
    object-fit: cover;
}

.LienTexteDroite{
    margin-left:   2em;
    margin-bottom:   2em;
    margin-top:   2em;
    padding: 2em;
    
    background-color: var(--Color10);
    color: var(--Color1);
    text-transform: capitalize;
    height: auto;
    float: right;
}
.LienTexteDroite .LienTexte{
    padding: 0.5em 1em 0.5em 1em;
    margin-top: 2em;
    color: var(--Color0);
    background-color: var(--Color12);

    }
.LienTexteDroite .LienTexte:hover {
    padding: 0.5em 1em 0.5em 1em;
    margin-top: 2em;
    color: var(--Color6);

    }
/*---------------------Pages Oeuvres-----------------*/

.BlockTitreArtPop{
    display: flex;
    
    background-color:var(--Color5) ;
    padding: 7rem 3rem 0rem 3rem;

}
.BlockTitreHaitien{
    display: flex;
    
    background-color:var(--Color4) ;
    padding: 7rem 3rem 0rem 3rem;
    
}
.BlockTitreAfro{
    display: flex;
    
    background-color:var(--Color3) ;
    padding: 7rem 3rem 0rem 3rem;
    
}
.BlockTitreEnfant{
    display: flex;
   
    background-color:var(--Color6) ;
    padding: 7rem 3rem 0rem 3rem;
    
}

/* Souscatégorie*/

.SScatConteneur {
    display: flex;
    flex-wrap: wrap;
    gap: 4em 4em;
    background-color: var(--Color0);
    padding-top: 4em;
    padding-bottom: 20em;


}
.SScatBlock {
    
    flex: 400px;
    max-width: 600px;
    background-color:var(--Color0) ;
    padding: 0em;
    margin: 0em;
}

.SScatTitre-Violet {    
    color: var(--Color5);    
        text-transform: uppercase;
   background-color:var(--Color0) ;
   padding: 1em 0em 1em 0em;
}
.SScatTitre-Orange {    
    color: var(--Color4);    
        text-transform: uppercase;
   background-color:var(--Color0) ;
   padding: 1em 0em 1em 0em;
}
.SScatTitre-Bleu {    
    color: var(--Color3);    
        text-transform: uppercase;
   background-color:var(--Color0) ;
   padding: 1em 0em 1em 0em;
}
.SScatTitre-Vert {    
    color: var(--Color6);    
        text-transform: uppercase;
   background-color:var(--Color0) ;
   padding: 1em 0em 1em 0em;
}

.SScatTexte {

   background-color:var(--Color0) ;
   padding: 0em 0em 2em 0em;
    
}
.SScatLien {
    font-family: var(--FontInfo);
        color: var(--Color1);
    text-transform: uppercase;
        text-align: center;
   background-color:var(--Color0) ;
   padding: 1em 1em 1em 1em;
   border-radius: 0 0em 1em 1em;
   background-color: var(--Color10TT);
    
}
.SScatLien:hover {
   color: var(--Color0); 
   background-color:var(--Color2) ;
   
    
}

.SScatImg {
    width: 100%;
    height : 200px    
}
.SScatImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ConteneurGalerie{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: flex-start;
    flex-wrap: wrap;
    row-gap: 1vw;
    column-gap: 1vh;
    width: 100%;
    margin-top: 7vh;
    margin-bottom: 10vh;
}
.InfoOeuvreGalerie{
    background-color: var(--Color0);
    padding: 1rem;
}
.InfoOeuvreGalerie #Titre {
    color : var(--Color1);
    font-family: var(--FontCourant);
    font-size : clamp(0.75rem, 1.5vw, 1rem);
}
.InfoOeuvreGalerie #Auteur {
    color : var(--Color5);
    font-family: var(--FontInfo);
    font-size : clamp(0.5rem, 1vw, 0.75rem);
    font-weight: 800;
    text-transform: uppercase;
   } 
#Oeuvre-Zoom-1{
    display: none;
    overflow: auto;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    transition: all 2s ease-out;
    padding: 2vw;
 }
 #Oeuvre-Zoom-1:target{
    display: block;
 }
.ZoomOeuvre{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-wrap: ;
    gap: 10px;
    justify-content: center;
    
}
.ZoomOeuvre .IMG{
flex-grow: 1;

}
 .ZoomOeuvre img{
    max-width: 90vw;
    max-height: 90vh;
    min-width: 300px;
    object-fit: contain;
 }
 .ZoomOeuvre .Info{
    display: flex;
    flex-grow: 0;
    flex-direction: column;
    gap: 0px;
    max-width: 500px;
    
 }
 .ZoomOeuvre .Navigation{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0px;
    padding: 0rem;
    margin-bottom: 0px;
    color : var(--Color0);
    font-family: var(--FontCourant);
    font-size : clamp(1rem, 3vw, 2rem);
 }
.ZoomOeuvre .CAT{
    display: flex;
    width: 100%;
    background-color: var(--Color5);
    padding: 0rem;
    color : var(--Color0);
    font-family: var(--FontCourant);
    font-size : clamp(0.5rem, 1vw, 1rem);
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    line-height: -1;
    border: 1px solid var(--Color5);
 }

 .ZoomOeuvre .Titre{
    background-color: var(--Color0);
    padding: 1rem 3rem 1rem 3rem;
    color : var(--Color10);
    font-family: var(--FontCourant);
    font-size : clamp(1rem, 3vw, 2rem);
 }
 .ZoomOeuvre .Auteur{
    background-color: var(--Color3);
    padding: 1rem 3rem 1rem 3rem;
    color : var(--Color1);
    font-family: var(--FontInfo);
    font-size : clamp(0.5rem, 1vw, 0.75rem);
    font-weight: 800;
    text-transform: uppercase;
 }
 .ZoomOeuvre .Texte{
    background-color: var(--Color0);
    padding: 1rem 3rem 3rem 3rem;
 }

/*---------------------Deroulant "Toutes les oeuvres"-----------------*/
 .DivAllOeuvre{
   color: white;
    border: none;
    cursor: pointer;
    padding:0px;
    margin-top:0px;
    margin-bottom: 15rem;
    width: 100%;  
    
    overflow: hidden;
  -webkit-transition:max-height 1s;
    -moz-transition:max-height 1s;
    -ms-transition:max-height 1s;
    -o-transition:max-height 1s;
    transition:max-height 1s;
  display: block;
 
}
.DivAllOeuvre:hover {max-height: 5000px;}

.DivAllOeuvre-Childs{
  color: var(--Color1);
  display: flex;
  background-color: var(--Color1);
  flex-direction: column;
  flex-wrap: nowrap;
    padding-bottom:3em }


.DivAllOeuvre  h2 {
    
    font-size : clamp(1rem, 3vw, 2rem);
    font-weight: 100;
    color: var(--Color0);
    margin-bottom:0vh;
    margin-top:0vh;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.DivAllOeuvre  h6 { color: var(--Color0);}

.DivAllOeuvre a {
    color: var(--Color0);
}
.DivAllOeuvre a:hover {
    color: var(--Color2);
}
.DivAllOeuvre .ConteneurMiniature {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

.DivAllOeuvre .BlockMin {
    display: block;
    margin:30px;
}
.DivAllOeuvre .Miniature {
    display: block;
    margin:0px;
}

.DivAllOeuvre .Miniature img {
    width : 100%;
    height : 100%;
    object-fit: cover;}
}

.DivAllOeuvre input {
    display: block;
    margin:20px;
}
/*---------------------Alloeuvres-----------------*/
.DivconteneurAlloeuvres{
    display: block;
    position: absolute;
    z-index:1000;
    top:37px; right:0; bottom:0; left:0;
    background-color: var(--Color11);
    width: 100%;
    height: 96%;
}
.Slide{
    display: flex;
    flex-direction: column;
    height: 100%;
    opacity: 1;
    padding-bottom: 10%;
    top:0px; right:0; bottom:10%; left:0;
    -index: 10;
    background-color: var(--Color0);
    animation-duration: 1s;
    animation-name: slidein;
}

 @keyframes slidein {
    from {
        opacity: 0;
        margin-left: 100%;
        width: 100%;
    }

    to {
        opacity: 100%;
        margin-left: 0%;
        width: 100%;
    }
}
.BarreGalerie{
display: flex;
justify-content: center;
background-color: var(--Color0);
padding-top: 2em;
}

.BarreGalerieChemin{
display: flex;
justify-content: flex-start;
<?php echo 'background-color: '.$ColorCat.';'; ?>
}

.BarreGalerieChemin .Cat{
  text-transform: uppercase;
  color : var(--Color0);
  padding: 0.5em;
  background-color: rgba(0, 0, 0, 0.2);
  
}
.BarreGalerieChemin .Parcours{
  color : var(--Color0);
  padding: 0.5em;
  
}
.BarreGalerie .Fermer{
    position: absolute;
    z-index: 102;
    bottom: 5%;
    left:80%;
    width: 40px;
    text-align: right;
    text-transform: none;
    padding: 0.5em 0.5em 0em 0.5em;
    color: var(--Color11);
    width:90px ;
    height: auto;
    background-color: var(--Color0);
    border-bottom:solid 1px; border-right:solid 1px;
    border-color: var(--Color11);
}
.BarreGalerie .Fermer:hover{
    color: var(--Color0);
    background-color: var(--Color2); 
}
   
.BarreGalerie .Titre{
  z-index: 101;
  color : var(--Color1);
  padding: 1em;
  background-color: var(--Color0);
}
.BarreGalerie .Auteur{
  z-index: 101;
  text-transform: uppercase;
  color : skyblue;
  padding: 1em;
  background-color: var(--Color0);
}
.GalerieInfo{
  position: absolute;
  z-index: 100;
  left: 10%;
  padding: 0em;
  background-color: var(--Color0);
  max-height: 35px;
  max-width: 80%;
  
  overflow: hidden;
  -webkit-transition:max-height 1s;
    -moz-transition:max-height 1s;
    -ms-transition:max-height 1s;
    -o-transition:max-height 1s;;
    transition:max-height 1s;
    display: block;
    border-radius: 0rem 0rem 0.75rem 0rem;
}

.GalerieInfo:hover{max-height: 1000px;}

.GalerieInfo .Titre{
    text-transform: none;
    padding: 0.5em 0.5em 0em 0.5em;
    color: var(--Color11);
    width:90px ;
    height: auto;
    background-color: var(--Color0);
    border-top:solid 1px; border-left:solid 1px;
    border-color: var(--Color11);
}
.GalerieInfo .Titre:hover{
    color: var(--Color0);
    background-color: var(--Color2); 
}
.GalerieInfo .Texte{
    text-transform: none;
    padding: 10em 5em 3em 5em;
    border-bottom: solid 3px;
    border-color: var(--Color10);  
}

.BarreGalerieChemin .Fermer{
  text-transform: none;
  margin-left: auto;
  padding: 0.5em 2em 0.5em 1em;
  color: var(--Color0);
  background-color: var(--Color11);
}
.BarreGalerieChemin .Fermer:hover {
 background-color: var(--Color2);
}
.BarreGalerieChemin .Fermer a{
  text-decoration: none;
}
.BarreGalerieChemin .Fermer a:visited{
  color: var(--Color0);
  text-decoration: none;
}
.SlideImg{
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  height: 80%;
  margin-bottom: 10%;
  background-color: var(--Color0);
  padding: 1em;
}

.SlideImg img{
  width:100%;
  height:100%;
  object-fit: contain;}
  

.BarreNavPosition{
  display: block;
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 1000;
}
.SlideNav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1vw;
    padding: 1em;
    background-color: var(--Color0);
}

.SlideNav .Mini{
background-color: var(--Color2);
width: 30px;
height: 30px;
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

.SlideNav .Mini:hover{
  -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
    filter: grayscale(0%);
}

.SlideNav .Mini img {
  width:100%;
  height:100%;
  object-fit: cover;
}

.NavG{
    display: block;
    position: absolute;
    width: 30px;
    height: 100px;
    top: 40%;
    left: 10%;
    z-index: 1000;
    

}

.NavG:hover{
    
}
.NavD{
    display: block;
    position: absolute;
    width: 30px;
    height: 100px;
    top: 40%;
    left: 83.7%;
    z-index: 1000;
    
}
.NavD:hover{
    color: var(--Color2);
   
}
.IntroSlide{
    color: var(--Color1);
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    padding: 10vw ;
    z-index: 1000;  
}
.IntroSlideTitre{
    color: #52c2ef;
    padding-bottom: 2em;  
}
.IntroSlideTexte{
    color: var(--color1);
    text-transform: none;
}
.Lien {
      display: block;
      position: relative;
      color:white;
      text-transform: uppercase;
      border-top: 1px  solid;
      background-color:var(--Color2);
      text-align: center;
      top: 1em;
      left: 25%;
      right: 25%; 
      width: 50%;
    padding: 0.5em 0.5em 0.5em 0.9em;
}
.Lien:hover {
  
  background-color:var(--Color3);
}

.Lien:active {
  
  background-color:var(--Color6);
}
.Lien a:link, a:visited, a:hover, a:active {
  color:background-color:var(--Color0);}
/*---------------------Page Medias-----------------*/
.MenuMediaPosition{
    display: block;
    position: fixed;
    width: 100%;
    background-color: var(--Color1);
    z-index: 3;
    top:38px;
}
.MenuMedia{
    display: flex;
    width: 100%;
    align-content: center;
    justify-content: space-between;
    color: var(--Color0);
    font-family: var(--FontCourant);
    font-size : clamp(0.5rem, 1vw, 0.8rem);
    text-transform: uppercase;

}
.MenuMediaTitre{
    display: flex;
    justify-content: center;
    color: var(--Color3);
    padding-top: 1em;
    padding-bottom: 1em;
}
.MenuMedia .Video{ background-color: var(--Color1);width: 100%; text-align: center; padding: 1em;}
.MenuMedia .Video:hover{ background-color: var(--Color2);}
.MenuMedia .Son{ background-color: var(--Color1);width: 100%;text-align: center;padding: 1em;}
.MenuMedia .Son:hover { background-color: var(--Color3);}
.MenuMedia .Texte{ background-color: var(--Color1);width: 100%;text-align: center;padding: 1em;}
.MenuMedia .Texte:hover{ background-color: var(--Color6);}
.MenuMedia .Recherche{ background-color: var(--Color1);width: 100%;text-align: center;padding: 1em;}
.MenuMedia .Recherche:hover{ background-color: var(--Color5);}

.DivMedia{
   color: white;
    border: none;
    cursor: pointer;
    padding:0px;
    margin-top:0px;  
    max-height: 9rem;
    overflow: hidden;
  -webkit-transition:max-height 1s;
    -moz-transition:max-height 1s;
    -ms-transition:max-height 1s;
    -o-transition:max-height 1s;
    transition:max-height 1s;
  display: block;
  position: relative;
}
.DivMedia:hover {max-height: 1000px;}

.DivMedia-Childs{
  color: var(--Color1);
  display: flex;
  background-color: whitesmoke;
  flex-direction: column;
  flex-wrap: nowrap;
padding-bottom:3em }


.DivMedia  h1 {
    
    font-size : clamp(3rem, 8vw, 5rem);
    font-weight: 100;
    color: var(--Color1);
    margin-bottom:0vh;
    margin-top:3vh;
    padding-top: 1rem;
    padding-bottom: 3rem;
}
.Entre{
    flex-direction: column;
    background-color: var(--Color0);
    padding: 1em ;
    margin-top: 1em;
}
.Entre:hover {background-color: var(--Color10);}

.Entre p{text-align: left;
    text-indent: 0em; /* retrait du texte */}
.PartieTitre{display:flex; flex-direction: row;}
.MediaTitre{color: var(--Color1);}
.MediaType{text-transform: uppercase; font-weight: bolder; color: var(--Color12); padding-right: 1em; }
.PartieTexte{display:flex; flex-direction: row;}
.MediaTexte{}
.MediaImg{}

/*---------------------Page Contact-----------------*/

.MenuContactPosition{
    display: block;
    position: fixed;
    width: 100%;
    background-color: var(--Color1);
    z-index: 3;
    top:38px;
}
.MenuContact{
    display: flex;
    width: 100%;
    align-content: center;
    justify-content: space-between;
    color: var(--Color0);
    font-family: var(--FontCourant);
    font-size : clamp(0.5rem, 1vw, 0.8rem);
    text-transform: uppercase;

}
.MenuContactTitre{
    display: flex;
    justify-content: center;
    color: var(--Color3);
    padding-top: 1em;
    padding-bottom: 1em;
}
.MenuContact .Video{ background-color: var(--Color1);width: 100%; text-align: center; padding: 1em;}
.MenuContact .Video:hover{ background-color: var(--Color2);}
.MenuContact .Son{ background-color: var(--Color1);width: 100%;text-align: center;padding: 1em;}
.MenuContact .Son:hover { background-color: var(--Color3);}
.MenuContact .Texte{ background-color: var(--Color1);width: 100%;text-align: center;padding: 1em;}
.MenuContact .Texte:hover{ background-color: var(--Color6);}
.MenuContact .Recherche{ background-color: var(--Color1);width: 100%;text-align: center;padding: 1em;}
.MenuContact .Recherche:hover{ background-color: var(--Color5);}

.DivContact{
   color: white;
    border: none;
    cursor: pointer;
    padding:0px;
    margin-top:0px;  
    max-height: 9rem;
    overflow: hidden;
  -webkit-transition:max-height 1s;
    -moz-transition:max-height 1s;
    -ms-transition:max-height 1s;
    -o-transition:max-height 1s;
    transition:max-height 1s;
  display: block;
  position: relative;
}
.DivContact:hover {max-height: 1000px;}

.DivContact-Childs{
  color: var(--Color1);
  display: flex;
  background-color: whitesmoke;
  flex-direction: column;
  flex-wrap: nowrap;
padding-bottom:3em }


.DivContact  h1 {
    
    font-size : clamp(3rem, 8vw, 5rem);
    font-weight: 100;
    color: var(--Color1);
    margin-bottom:0vh;
    margin-top:3vh;
    padding-top: 1rem;
    padding-bottom: 3rem;
}
.Entre{
    flex-direction: column;
    background-color: var(--Color0);
    padding: 1em ;
    margin-top: 1em;
}
.Entre:hover {background-color: var(--Color10);}

.Entre p{text-align: left;
    text-indent: 0em; /* retrait du texte */}
.PartieTitre{display:flex; flex-direction: row;}
.MediaTitre{color: var(--Color1);}
.MediaType{text-transform: uppercase; font-weight: bolder; color: var(--Color12); padding-right: 1em; }
.PartieTexte{display:flex; flex-direction: row;}
.MediaTexte{}
.MediaImg{}


/*---------------------Footer-----------------*/

.FooterConteneur{
    color: var(--Color0);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: ;
    justify-content: space-between;
    row-gap: 0em;
    flex: 200px;
    
}
.colonneFooter{
    flex: 200px;
    max-width: 400px;
    padding: 0 1em 0 1em;
    border-color: var(--Color1);
    border-right: solid 1px ;
    border-left: solid 1px;
}
.LogoFooter {
  flex: 200px;
   max-width: 400px;
}
.LogoFooter img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid pink;
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}