html
{
    background-color:#1a202c;
    color:#a0aec0;
}
.inactif
{
    opacity : 0.5;
}
.flex-vertical
{
    display:flex;
    flex-flow : column nowrap;
}
.flex-horizontal
{
    display:flex;
    flex-flow : row nowrap;
}
.flex-wrap
{
    flex-wrap: wrap;
}
.circle
{
    display:block;
    min-height: 27px;
    height:27px;
    min-width:27px;
    width:27px;
    border: 3px solid #020202;
    border-radius:15px;
}
.circle.choiced , .gdcarre.choiced
{
    border-color:#f4feff;
}

.gdcarre
{
    display:block;
    min-height: 80px;
    height:80px;
    min-width:80px;
    width:80px;
    background-color:#a0aec0;
    border: 3px solid #020202;
    margin-right:5px;
    border-radius:10% 10% 50% 50%;
}
.icon_placement
{
    border:5px solid #020202;
}

.icon_placement.choiced, .icon_meuble_empty.choiced
{
    border:5px solid #f4feff;
}

#blason{
    height:650px;
    max-height:650px;
    width : 650px;
    max-width:650px;
}

#icon_champs,.icon_meuble_empty, #icon_partition, .icon_meuble, .icon_attribut, .icon_placement{
    background-color:#a0aec0;
    width:var(--i);
    max-width:var(--i);
    height:var(--i);
    max-height:var(--i);
    border-radius:10% 10% 50% 50%;
}

.roue_color
{
    --i:90px; /*taille de l'icone*/
    --c:30px; /*taille de la couleur*/
    --g:5px; /*taille de l'espacement*/
    --a:65px; /*distance de centre à centre A*/
    --b:100px; /*distance centre à centre éloigné A"*/
    --e:-60px; /*décalage pour centrer */
    display:grid;
    margin-left : var(--b);
    margin-top : var(--b);
}
.roue_color > div{
    grid-area : 1/1;
}
.roue_color > div{
    transform: translate(var(--ax),var(--ay));
}
.roue_color > div:nth-child(1){
    transform: translate(calc(var(--e)/2),calc(var(--e)/2));
}
.roue_color > div:nth-child(2){
    transform: translate(calc(var(--a)*0),calc(var(--a)*1));
}
.roue_color > div:nth-child(3){
    transform: translate(calc(var(--a)*0.59),calc(var(--a)*0.81));
}
.roue_color > div:nth-child(4){
    transform: translate(calc(var(--a)*0.95),calc(var(--a)*0.31));
}
.roue_color > div:nth-child(5){
    transform: translate(calc(var(--a)*0.95),calc(var(--a)*-0.31));
}
.roue_color > div:nth-child(6){
    transform: translate(calc(var(--a)*0.59),calc(var(--a)*-0.81));
}
.roue_color > div:nth-child(7){
    transform: translate(calc(var(--a)*0),calc(var(--a)*-1));
}
.roue_color > div:nth-child(8){
    transform: translate(calc(var(--a)*-0.59),calc(var(--a)*-0.81));
}
.roue_color > div:nth-child(9){
    transform: translate(calc(var(--a)*-0.95),calc(var(--a)*-0.31));
}
.roue_color > div:nth-child(10){
    transform: translate(calc(var(--a)*-0.95),calc(var(--a)*0.31));
}
.roue_color > div:nth-child(11){
    transform: translate(calc(var(--a)*-0.59),calc(var(--a)*0.81));
}

.roue_color > div:nth-child(12){
    transform: translate(calc(var(--b)*0.87),calc(var(--b)*-0.50));
}
.roue_color > div:nth-child(13){
    transform: translate(calc(var(--b)*0),calc(var(--b)*1));
}
.roue_color > div:nth-child(14){
    transform: translate(calc(var(--b)*-0.87),calc(var(--b)*-0.50));
}

.roue_color_empty > div:nth-child(12){
    transform: translate(calc(var(--b)*0.71),calc(var(--b)*0.71));
}
.roue_color_empty > div:nth-child(13){
    transform: translate(calc(var(--b)*0.71),calc(var(--b)*-0.71));
}
.roue_color_empty > div:nth-child(14){
    transform: translate(calc(var(--b)*-0.71),calc(var(--b)*-0.71));
}
.roue_color_empty > div:nth-child(15){
    transform: translate(calc(var(--b)*-0.71),calc(var(--b)*0.71));
}
#crest_container
{
    display:flex;
    flex-flow : row nowrap;
    align-items:flex-start;
}
#flex_crest{
    display:flex;
    flex-flow : column nowrap;
    align-items:center;
}
#attributes_container
{
    display:flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin-top:-45px;
}
#flex_crest
{
    width:650px;
    max-width:650px;
}
#desc_blason
{
    margin-bottom : 1.5rem;
}
#flex_partition
{
    display:flex;
    order:-1;
    margin-top:2rem;
}
#flex_champs
{
    display:flex;
    order:1;
    z-index:10;
}
#flex_champs2
{
    display:flex;
    order:2;
    z-index:10;
    margin-top:1rem;
}
#flex_meuble{
    display:flex;
    z-index:10;
    margin-left:-2rem;
    margin-top:2rem;
}
#flex_placement{
    --i:90px;
    display:flex;
    margin-top:50px;
    align-items: center;
    gap:20px;
}
.color_attributes{
    display:flex;
    flex-flow:row wrap;
    justify-content : center;
}