: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*/
    --Color10:#d8cdc9; /*gris*/
    --Color11:#c2b7b4; /*gris moyen*/
    --Color12:#a99f9c; /*gris moyen accentué*/

}


html body {
margin: 0;
padding: 0;
font-size: 100%;
background-color: var(--Color1);
font-family: Arial, Helvetica, sans-serif;
}
a:link, a:visited, a:hover, a:active{
text-decoration: none;
color: black;
} 

.textarea{
    font-family: Arial, Helvetica, sans-serif;
}
.Debug{
    display: block;
    position: Absolute;
    z-index: 1000;
    background-color:white;
    width: 50%;
    height: auto;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
}


/* --------------------------- Menu -----------------------------*/
.MenuAdminPosition{
    display: block;
    position: fixed;
     
    top:0;
    width: 100%;
    align-items: center;
    text-align: center;

}
.TitreAdmin{
    background-color: black;
    color:lightblue;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;
}
.TitreAdmin a{
    color:lightblue;
    font-family: Arial, Helvetica, sans-serif;
}
.TitreAdmin a:hover{
    color:orange;
    font-family: Arial, Helvetica, sans-serif;
}

.MenuAdmin {
    width: 95%;
    font-family: Arial, Helvetica, sans-serif;
    background-color: lightblue;
    color: white;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 10px 50px 10px 0;
     max-height: 20px;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition:max-height 1s;
    -moz-transition:max-height 1s;
    -ms-transition:max-height 1s;
    -o-transition:max-height 1s;
    transition:max-height 1s;

}
.MenuAdmin:hover { max-height: 1000px;}
.MenuAdminN2{
    text-transform: uppercase;

}
.MenuAdminN3{
    text-transform: none;
    background-color: lightblue;
    margin-top: 10px;
    padding: 2px ;
}
.MenuAdminN3:hover{
     background-color: orange;

}
.TitrePage{
    color: orange;
    background-color: black;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;

}
.MenuAidePosition {
 display: block;
    position: fixed;
     
    top:25%;
    left: 10px;
    width: 20%;
    align-items: center;
    text-align: center;

}
.MenuAide {
    width: 98%;
    padding-left: 20px;
    padding-right: 30px;    
    display: flex;
    justify-content: space-between; 
}
.MenuAideN2 {
    display: flex;
    flex-direction:column ;
    flex-wrap: nowrap;
    max-height: 35px;
    width: 25%;
    border-radius: 0px 0px 10px 10px;
    background-color: var(--Color0T);
    overflow: hidden;
    cursor: auto;
    -webkit-transition:max-height 1s;
    -moz-transition:max-height 1s;
    -ms-transition:max-height 1s;
    -o-transition:max-height 1s;
    transition:max-height 1s;
    padding-bottom: 10px;
}
.MenuAideN2:hover { max-height: 1000px;}
.MenuAide .Titre {
    background-color: var(--Color2);
    color: var(--Color1);
    padding: 10px;
}
.MenuAide .Info {    
    color: var(--Color1);
    padding-top: 10px;
}
.ConteneurBlockDeroulant{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: var(--Color1);

}
.BlockDeroulant {
    display: flex;
    width: 25%;
    max-height: 35px;
    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;
}
.BlockDeroulant:hover { max-height: 10000px; width:100%}
.CadreAide{
    display: flex;
    flex-direction: column;
    width: 700px;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 10px;
    background-color: var(--Color1);
    color: var(--Color0);
}
.CadreAide .Info {
    display: flex;
    color: var(--color0);
    justify-content: flex-start;
     align-self: flex-start;
     padding: 10px;
}
.CadreAide .Liens {
color: var(--Color3);
padding-left: 10px;
}
#PopupLienImage{
   display: none;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    transition: all 2s ease-out;
}
#PopupLienImage:target{display: block;}
#PopupLienOeuvre{
   display: none;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    transition: all 2s ease-out;
}
#PopupLienOeuvre:target{
    display: block;
}
#PopupLienVideo{
   display: none;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    transition: all 2s ease-out;
}
#PopupLienVideo:target{ display: block;}
#PopupLienAudio{
   display: none;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    transition: all 2s ease-out;
}
#PopupLienAudio:target{ display: block;}
#PopupLienTexte{
   display: none;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    transition: all 2s ease-out;
}
#PopupLienTexte:target{ display: block;}
.LienPopup{
    width: 85%;
    background-color: var(--Color1);
    color: var(--Color0);
    padding: 10px;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 10px;
}
.LienPopup:hover{color: var(--Color2);}
.Popup{
    display: flex;              /* Gestion du pop up oeuvre*/
    flex-wrap: wrap;
    align-items: top;    
    max-height: 90%;    
    overflow: auto;
    background: var(--Color3);
    padding: 20px;
    border: 5px solid var(--Color2);
    position: relative;
    margin: 5% auto;
    width: 90%;
    box-shadow: 0px 0px 20px #000;
    border-radius: 10px;
}
.Popup .Titre {
    width: 100%;
    background-color: var(--Color2);
    text-align: center;
    padding: 15px;
    color: var(--Color1);
    text-transform: uppercase;
}
.Popup .Cadre{
    display: flex;
     flex-wrap: wrap;
    background-color: var(--Color1);
    width: 100%;
    gap: 10px;
    padding: 20px;
}
.Popup .BlockIMG{
    background-color: var(--Color10);
    padding: 10px;
}
.Popup .TitreDoc {
    background-color: var(--Color1);
    padding: 5px;
    margin-bottom: 5px;
    color: var(--Color0);
}
.Popup .MiniIMG{
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.Popup img{
        width : 100%;
        height : 100%;
        object-fit: cover;}
.Popup .LienDoc {
    background-color: var(--Color2);
    padding: 10px;
    margin-bottom: 5px;
    border: 1px solid var(--Color1);
}
.BtnClose {
    background-color: var(--Color2);
    padding: 10px 20px 0px 20px;
    border-radius: 10px 10px 0px 0px;
}
/* --------------------------- Message -----------------------------*/ 
.Alerte {
    background-color: black;
    text-transform: uppercase;
    font-weight: 400;
    color: red;
    padding: 20px;
    margin: 20px;
}
.Recap {
    background-color: whitesmoke;    
    color: grey;
    padding: 10px;
    margin: 10px;
}
.RecapVignette{
    max-width: 700px;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0 20px 0;
    justify-content: center;
}
.Vignette {
        display: block;
        width: 100px;
        height: 100px;
        object-fit: cover;
        margin-right: 10px;
        margin-bottom: 10px;
    }
.Vignette img{
        width : 100%;
        height : 100%;
        object-fit: cover;
      }
.Vignette-Med {
        display: block;
        width: 700px;
        height: 700px;
        object-fit: cover;
        margin-right: 10px;
        margin-bottom: 10px;
    }
.Vignette-Med img{
        width : 100%;
        height : 100%;
        object-fit: cover;
      }
/* --------------------------- Boutons -----------------------------*/

.Retour{margin: 50px 0 50px 0px;    }
.Retour a {
    background-color:var(--Color3); 
    text-transform:uppercase;
    font-weight: 600;
    font-size: 200%;  
    padding:30px; 
    color:var(--Color1);
    font-family: Arial, Helvetica, sans-serif;
    cursor:pointer; 
    border: none;
    border-radius: 10px;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;}
.Retour a:hover {background-color: var(--Color2);padding:35px;}
.Envoyer{margin-top: 50px; margin-right: 20px; margin-left: 20px}
.Envoyer input { 
    background-color:var(--Color3); 
    text-transform:uppercase;
    font-weight: 600;
    font-size: 200%;  
    padding:30px; 
    color:var(--Color1);
    font-family: Arial, Helvetica, sans-serif;
    cursor:pointer; 
    border: none;
    border-radius: 10px;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
}
.Envoyer input:hover{
    background-color:var(--Color2);padding:35px;color: black;}
.Supprimer{margin-top: 50px}
.Supprimer input { 
    background-color:var(--Color4); 
    text-transform:uppercase;
    font-weight: 600;
    font-size: 200%;  
    padding:30px; 
    color:var(--Color1);
    font-family: Arial, Helvetica, sans-serif;
    cursor:pointer; 
    border: none;
    border-radius: 10px;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
}
.Supprimer input:hover{background-color:var(--Color2);padding:35px;color: black;}
.Conteneur-Choix;{
    display: flex;
    flex-direction: row;       
    width: 800px;
    background: var(--Color2);
    padding: 0px;
    margin: 40px;
}
.Choix{margin-top: 50px; margin-right: 20px; margin-left: 20px}
.Choix input { 
    background-color:var(--Color3); 
    text-transform:uppercase;
    font-weight: 600;
    font-size: 200%;  
    padding:30px; 
    color:var(--Color1);
    font-family: Arial, Helvetica, sans-serif;
    cursor:pointer; 
    border: none;
    border-radius: 10px;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
}
.Choix input:hover{background-color:var(--Color2);padding:35px;color: black;}


/* --------------------------- Formulaire -----------------------------*/
.TitreChamps{
     max-width: 700px;
    padding: 10px;
    background-color: var(--Color1);
    color: whitesmoke;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
}
.Info{text-transform: none;}
.Obligatoire{
    width: 20px;
    height: 20px;
    padding: 5px;
    background-color: red;
}
.Lien{
    width: 20px;
    height: 20px;
    padding: 5px;
    background-color: var(--Color2);
}

input, textarea, select, option {background-color: var(--Color10);}
textarea, select {
 padding:10px;
 border:0px solid #F5C5C5;
 border-radius:0px;
 width:700px;
 
 }
/* --------------------------- Corps de page -----------------------------*/

.Conteneur{
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 95%;
    background:linear-gradient(var(--Color3),var(--Color1));
    margin-top: 140px;
    padding: 60px;
}
input[type="checkbox"] {visibility: hidden;}
input[type="radio"] {visibility: hidden;}
.Block-min{
    display: block;
    margin:10px;
}
.checkbox-IMG {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        background: var(--Color1);
        padding: 0px;
        margin-right: 20px;
 }

 .Block-min{
    display: block;
    margin:30px;
}
.Block-min-input {
    background-color: var(--Color1);
    border-radius: 10px;
}
.Block-min-input input {
    background: var(--Color1);
    color: var(--Color2);
    border: 0px solid;
    padding: 10px 10px 10px 10px;
    cursor: pointer;
     -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
}
.Block-min-input input:hover {
    background: var(--Color2);
    color: var(--Color1);
    border: 0px solid;
    padding: 20px 2px 12px 2;
    cursor: pointer;
}
.checkbox-IMG label {
        display: block;
        width: 100px;
        border: 0px solid;
        border-color:var(--Color1);
        object-fit: cover;
        transition: all 0.5s ease;
        cursor: pointer;
        background: #ccc;
      }
.checkbox-IMG input[type="checkbox"]:checked +  label {
        left: 27px;
        border: 10px solid;
        border-color: orange;
      }
.checkbox-IMG input[type="radio"]:checked +  label {
        left: 27px;
        border: 10px solid;
        border-color: orange;
      }
.checkbox-IMG img{
        width : 100px;
        height : 100px;
        object-fit: cover;
      }
.info{
        display: block;
        color: var(--Color0);
        width: 100px;
        height: 60px;
        background-color: var(--Color1);
        padding: 5px;
        border: 0px solid;
        border-color:var(--Color1);
        font-family: Arial, Helvetica, sans-serif;        
      }
.Conteneur-A{
    display: flex;
    background-color: var(--Color1);
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
.CAT-Menu{background-color: var(--Color1);padding: 0px;}
.CAT-Haitien{ background:linear-gradient(var(--Color1),var(--Color3)) ;padding: 10px; margin: 0 10px 0 10px}
.CAT-Haitien a{color: whitesmoke;}
.CAT-Haitien:hover {background:linear-gradient(var(--Color3),var(--Color3));}

.CAT-ArtPop {background:linear-gradient(var(--Color1),var(--Color5)) ;padding: 10px;margin: 0 10px 0 10px}
.CAT-ArtPop a{color: whitesmoke;}
.CAT-ArtPop:hover {background:linear-gradient(var(--Color5),var(--Color5));}

.CAT-EnfantMDH {background:linear-gradient(var(--Color1),var(--Color4)) ;padding: 10px;margin: 0 10px 0 10px}
.CAT-EnfantMDH a{color: whitesmoke;}
.CAT-EnfantMDH:hover {background:linear-gradient(var(--Color4),var(--Color4));}

.CAT-Afrodescendant {background:linear-gradient(var(--Color1),var(--Color6)) ;padding: 10px;margin: 0 10px 0 10px}
.CAT-Afrodescendant a{color: whitesmoke;}
.CAT-Afrodescendant:hover {background:linear-gradient(var(--Color6),var(--Color6));}

.ConteneurPopInfo{
        display: flex;
        width: 90%;
        align-items: center;
        justify-content: center;
        margin-right: auto;
        margin-left: auto;
     }
.PopInfo {
        display: block;
        text-align: center;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        font-family: sans-serif;
     }
/* --------------------------- Accordeon -----------------------------*/
.accordion {
    box-sizing: border-box;
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    width: 100%;
}
.accordion-select {
    cursor: pointer;
    margin: 0;
    opacity: 0;
    z-index: 1;
}
.accordion-title {position: relative;}
.accordion-title:not(:nth-last-child(2))::after {
    border: 1px solid transparent;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.accordion-title span {
    bottom: 0px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    white-space: nowrap;
    width: 100%;
}
.accordion-content {
    box-sizing: border-box;
    overflow: auto;
    position: relative;
    transition: margin 0.3s ease 0.1s;
}
.accordion-select:checked + .accordion-title + .accordion-content {
    margin-bottom: 0;
    margin-right: 0;
}

/* Generated styles starts here */

.accordion {
    border-color: #dedede;
    border-radius: 8px;
    border-style: solid;
    border-width: 1px;
    flex-direction: column;
    height: auto;
} 

.accordion-title,
.accordion-select  {
    background-color: #ffffff;
    color: #7f8787;
    width: 100%;
    height: 65px;
    font-size: 15px;
}

.accordion-select {
    margin-bottom: -65px;
    margin-right: 0;
}

.accordion-title:not(:nth-last-child(2))::after {
    border-bottom-color: rgb(234, 234, 234);
    border-right-color: transparent;
} 

.accordion-select:hover + .accordion-title,
.accordion-select:checked + .accordion-title {
    background-color: #ffffff;
} 

 .accordion-title span  {	
    transform: rotate(0deg);
    -ms-writing-mode: lr-tb;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
    padding-left: 33px;
    padding-right: 33px;
    line-height: 65px;
} 

.accordion-content {
    background-color: #f7f7f7;
    color: #7f8787;
    height: 280px;
    margin-bottom: -280px;
    margin-right: 0;
    padding: 30px;
    width: 100%;
} 
/* Page Accueil _____________________________*/

.ConteneurAccueil{
    display: flex;
    margin-left: 5%;
    margin-top: 200px;
    width: 90%;
    height: 500px;
    justify-content: space-between;
    background-color: var(--Color10);
}
.ConteneurAccueil .LienPages{
    border: solid 1px;
    padding: 10px;
    margin-top: 10px;
    background-color: var(--Color10);
    color: var(--Color1);
    text-transform: uppercase;
}
.ConteneurAccueil .LienPages:hover{
    background-color: var(--Color2);
}
.ConteneurAccueil .Artiste {
    background-color: var(--Color3);
    width: 100%;
    padding: 20px;
}
.ConteneurAccueil .Oeuvre {
    background-color: var(--Color4);
    width: 100%;
    padding: 20px;
}
.ConteneurAccueil .Parcours {
    background-color: var(--Color2);
    width: 100%;
    padding: 20px;
}
.ConteneurAccueil .Medias {
    background-color: var(--Color6);
    width: 100%;
    padding: 20px;
}