div.tabCombat {
    $subTab:(
        "justifyContent": space-evenly,
        "color": $white,
        "background": $sombre,
        "borderColor": $black,
        "fontSize":14px,
        "fontBold":true,

        "button":(
            "width":calc(100% / 5),
            "widthBL":calc((100% / 5) - 1px),
            "widthBLR":calc((100% / 5) - 2px),
            "height":28px,
            "lastLine":true
        )
    );

    @include col(100%, calc((100% / 2) - 5px));
    @include col(100%, calc((100% / 3) - 5px), "col3");
    @include subMenu("subTab", $subTab);

    flex-wrap:wrap;

    //COL GAUCHE PJ
    div.dataArmure {
        $titre:(
            "titre":(
                "hasButton":true,
                "hasActionSpecial":true
            )
        );

        @include block($sombre);
        @include titre($white, transparent, $titre);

        input[type="number"] {
            width: 100%;
            border: 0px;
            padding: 0px;
            text-align: center;
            height: 28px;
        }

        h1.titre {
            text-transform:capitalize;
        }

        div.ligneTitre {
            display:flex;
            width:100%;
            justify-content: space-between;
            background:$clair;

            span {
                display:flex;
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                justify-content: center;
                align-items:center;

                &:first-of-type {
                    padding-left: 2px;
                    width: calc(31% - 2px);
                }

                &:not(:first-of-type) {
                    width: calc(23% - 1px);
                    border-left:1px solid $sombre;
                }
            }
        }

        div.ligne3 {
            width:100%;
            justify-content: space-between;
            background:$clair;
            border-top:1px solid $sombre;

            span {
                display:flex;
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                padding-left: 2px;
                width: calc(31% - 2px);
            }

            div {
                width: calc(23% - 1px);
                border-left:1px solid $sombre;
            }
        }

        div.ligne1 {
            width:100%;
            justify-content: space-between;
            background:$clair;
            border-top:1px solid $sombre;

            span {
                display:flex;
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                padding-left: 2px;
                width: calc(31% - 2px);
            }

            div {
                width: 23%;

                &:nth-of-type(1),
                &:nth-of-type(2) {
                    width: calc(23% - 1px);
                    border-left:1px solid $sombre;
                }
            }
        }
    }

    div.sorcererPE {
        @include block($clair);
        @include buttonRoll() {
            border-left:1px solid $sombre;
        };

        h1 {
            display:flex;
        }

        @include oneLineIS($clair, $black, 29px, true);
    }

    div.physiqueMental {
        @include block($sombre);
        @include titre($white);

        input[type="number"] {
            width: 100%;
            border: 0px;
            padding: 0px;
            text-align: center;
            height: 28px;
        }

        div.ligneTitre {
            display:flex;
            width:100%;
            justify-content: space-between;
            background:$clair;

            span {
                display:flex;
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                justify-content: center;
                align-items:center;

                &:first-of-type {
                    padding-left: 2px;
                    width: calc(31% - 2px);
                }

                &:not(:first-of-type) {
                    width: calc(23% - 1px);
                    border-left:1px solid $sombre;
                }
            }
        }

        div.ligne3 {
            width:100%;
            justify-content: space-between;
            background:$clair;
            border-top:1px solid $sombre;

            span {
                display:flex;
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                padding-left: 2px;
                width: calc(31% - 2px);
            }

            div {
                width: calc(23% - 1px);
                border-left:1px solid $sombre;
            }
        }
    }

    div.egide {
        $titre:(
            "titre":(
                "hasButton":true
            )
        );

        @include block($sombre);
        @include titre($white, transparent, $titre);
        @include buttonRoll();

        input[type="number"] {
            width: 100%;
            border: 0px;
            padding: 0px;
            text-align: center;
            height: 28px;
        }

        div.ligneTitre {
            display:flex;
            width:100%;
            justify-content: space-between;
            background:$clair;

            span {
                display:flex;
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                justify-content: center;
                align-items:center;

                &:first-of-type {
                    width:calc(100% / 3);
                }

                &:not(:first-of-type) {
                    width:calc((100% / 3) - 1px);
                    border-left:1px solid $sombre;
                }
            }
        }

        div.ligne3 {
            width:100%;
            justify-content: space-between;
            background:$clair;
            border-top:1px solid $sombre;

            span {
                display:flex;
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                padding-left: 2px;
                width: calc(31% - 2px);
            }

            div {
                &:first-of-type {
                    width:calc(100% / 3);
                }

                &:not(:first-of-type) {
                    width:calc((100% / 3) - 1px);
                    border-left:1px solid $sombre;
                }
            }
        }
    }

    //COL GAUCHE PNJ/CREATURES
    div.PES {
        @include block($sombre);
        @include titre($white);

        input[type="number"] {
            width: 100%;
            border: 0px;
            padding: 0px;
            text-align: center;
            height: 28px;
        }

        div.ligneTitre {
            display:flex;
            width:100%;
            justify-content: space-between;
            background:$clair;

            span {
                display:flex;
                width: calc(100% / 3);
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                justify-content: center;
                align-items:center;

                &:not(:first-of-type) {
                    border-left:1px solid $sombre;
                }
            }
        }

        div.ligne2 {
            width:100%;
            justify-content: space-between;
            background:$clair;
            border-top:1px solid $sombre;

            span {
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                width: calc((100% / 3) - 2px);
                padding-left:2px;
            }

            div {
                width: calc(100% / 3);
                border-left:1px solid $sombre;
            }
        }

        div.resilience {
            width:100%;
            justify-content: space-between;
            background:$clair;
            border-top:1px solid $sombre;

            div {
                span {
                    display:flex;
                    width: calc(100% - 70px);
                    line-height: 28px;
                    font-size: 14px;
                    color: $black;
                    font-weight: bold;
                }

                &:first-of-type {
                    width: calc((100% / 3) - 2px);
                    padding-left:2px;

                    button[type="action"] {
                        width: 68px;
                        height: 26px;
                        padding: 0px;
                        justify-content: center;
                        align-items: center;
                        background: $sombre;
                        border: 1px solid $clair;
                        font-size: 12px;
                        font-variant: small-caps;
                        font-weight: bold;
                        margin-top: auto;
                        margin-bottom: auto;
                        margin-left: auto;
                        color: $white;

                        &:hover {
                            box-shadow: inset 1px 1px 2px 2px $black;
                        }
                    }
                }   

                &:not(:first-of-type) {
                    width: calc(100% / 3);
                    border-left:1px solid $sombre;
                }
            }
        }
    }

    div.bandeDebordement {
        $titre:(
            "titre":(
                "hasButton":true
            )
        );

        @include block($sombre);
        @include titre($white, transparent, $titre);
        @include buttonRoll();

        input[type="number"] {
            width: 100%;
            border: 0px;
            padding: 0px;
            text-align: center;
            height: 28px;
        }

        div.ligneTitre {
            display:flex;
            width:100%;
            justify-content: space-between;
            background:$clair;

            span {
                display:flex;
                width: calc(100% / 2);
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                justify-content: center;
                align-items:center;

                &:not(:first-of-type) {
                    border-left:1px solid $sombre;
                }
            }
        }

        div.ligne2 {
            width:100%;
            justify-content: space-between;
            background:$clair;
            border-top:1px solid $sombre;

            span {
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                width: calc(100% / 2);
                padding-left:2px;
            }

            div {
                width: calc(100% / 2);

                &:not(:first-of-type) {
                    border-left:1px solid $sombre;
                }
            }
        }
    }

    //COL DROITE PJ
    div.nods {
        $titre:(
            "titre":(
                "hasButton":true
            )
        );

        @include block($sombre);
        @include titre($white, transparent, $titre);
        @include buttonRoll();

        h1.titre {
            display:flex;
        }

        div.ligne {
            display:flex;
            width:100%;
            justify-content: space-between;

            span {
                display:flex;
                background:$clair;
                width: calc((100% / 3) - 2px);
                padding-left: 2px;
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
            }

            div.blockM {
                display:flex;
                width:calc(((100% / 3) * 2) - 28px - 2px);
                height:28px;
                justify-content: space-between;
                border-left:1px solid $sombre;
                border-right:1px solid $sombre;

                input[type="number"] {
                    width:calc((100% / 2) - 3px);
                    height:28px;
                    border:0px;
                    padding:0px;
                    text-align: center
                }

                b {
                    display:flex;
                    width:6px;
                    height:28px;
                    background:$white;
                    font-weight:bold;
                    align-content: center;
                    align-items: center;
                }
            }

            &:not(:first-of-type) {
                border-top:1px solid $sombre;
            }
        }
    }

    div.styleCombat {
        @include block($sombre);
        @include titre($white);

        h1.titre {
            display:flex;
        }

        select {
            width: 100%;
            padding: 0px;
            border: 0px;
            border-bottom:1px solid $sombre;
        }

        div.puissant {
            display:none;
            width:100%;
            background:$clair;
            border-bottom:1px solid $sombre;
            justify-content: space-between;

            span {
                width: 70px;
                font-size: 14px;
                height: 28px;
                line-height: 28px;
                font-weight: bold;
                padding-left: 2px;
                color: $black;
            }
            
            select {
                width: calc(50% - 35px);
                padding: 0px;
                margin: 0px;
                border: 0px;
                text-align: center;
            }

            input[type="number"] {
                width: calc(50% - 35px);
                padding: 0px;
                margin: 0px;
                border: 0px;
                text-align: center;
                border-left:1px solid $sombre;
            }
        }

        div.suppression {
            display:none;
            width:100%;
            background:$clair;
            border-bottom:1px solid $sombre;
            justify-content: space-between;

            label {
                display:flex;
                justify-content: space-between;

                span {
                    width:150px;
                    font-size: 14px;
                    height: 28px;
                    line-height: 28px;
                    font-weight: bold;
                    padding-left: 2px;
                    color: $black;
                }

                input[type="number"] {
                    width: calc(100% - 150px);
                    padding: 0px;
                    margin: 0px;
                    border: 0px;
                    text-align: center;
                }
                
                &:first-of-type {
                    width:50%;
                }

                &:not(:first-of-type) {
                    width:calc(50% - 1px);
                    border-left:1px solid $sombre;
                }
            }
        }

        input[type="hidden"] {
            &[value="puissant"] ~ div.puissant {
                display:flex;
            }

            &[value="suppression"] ~ div.suppression {
                display:flex;
            }
        }
    }

    
    div.herauts {
        @include block($sombre);
        @include titre($white);

        h1.titre {
            display:flex;
        }

        div {
            display:flex;
            width:100%;
            background:$clair;
            justify-content: space-between;
            flex-wrap: wrap;
            padding-right:2px;
            padding-left:2px;

            button[type="action"] {
                display:flex;
                width:calc((100% / 2) - 5px);
                background:$clair;
                color:$black;
                justify-content: center;
                border:1px solid $black;
                padding:0px;
                margin-top:2px;
                margin-bottom:2px;
                font-weight:bold;
                height: 25px;
                line-height: 25px;

                &:nth-of-type(3) {
                    margin-left:auto;
                    margin-right:auto;
                }
            }

            input[type="hidden"] {
                &.devasterAnatheme[value="1"] ~ button[type="action"].devasterAnatheme,
                &.bourreauTenebres[value="1"] ~ button[type="action"].bourreauTenebres,
                &.equilibreBalance[value="1"] ~ button[type="action"].equilibreBalance {
                    background:$sombre;
                    color:$white;
                }
            }
        }
    }
    
    //COL DROITE PJ/PNJ/CREATURES
    label.BMJets {
        display:flex;
        background: $clair;
        border:1px solid $sombre;
        align-content:center;
        align-items:center;
        position:relative;

        width:100%;
        min-height: 28px;

        span {
            position:absolute;
            width: calc(100% - 2px);
            align-content: baseline;
            background: transparent;
            color: $black;
            line-height: 28px;
            min-height: 28px;
            justify-content: left;
            font-size: 14px; 
            padding-left:2px;
        }

        input[type="number"] {
            position:absolute;
            width: 50%;
            height:28px;
            text-align: center;
            border-top: 0px;
            border-bottom: 0px;
            border-right: 0px;
            border-left:1px solid $sombre;
            padding: 0px;
            right:0px;
        }
    }

    //PORTEE
    div.portee {
        @include block($sombre);
        @include titre($white);

        h1.titre{
            display: flex;
        }

        div.col5 {
            display:flex;
            justify-content: center;
            width:calc(100% / 5);
            flex-wrap: wrap;
            background:$clair;
        }

        div.col5BL {
            display:flex;
            justify-content: center;
            width:calc((100% / 5) - 1px);
            flex-wrap: wrap;
            background:$clair;
            border-left:1px solid $sombre;
        }

        div.col5,
        div.col5BL {
            span {
                display:flex;
                width: 100%;
                justify-content: center;
                font-size: 14px;
                line-height: 28px;

                &:first-of-type {
                    font-weight:bold;
                }

                &:last-of-type {
                    border-top:1px solid $sombre;
                }
            }
        }
    }

    //ZONE CENTRALE PJ
    div.subTabArmure {
        width:100%;
        justify-content: space-between;
        flex-wrap: wrap;

        >div {
            display:none;
        }

        div.complet {
            width:100%;
            flex-wrap: wrap;
        }

        div.barbarianGoliath {
            @include block($sombre);
            @include titre($white);
    
            h1.titre {
                display:flex;
            }

            h1.borderBottom {
                border-bottom:1px solid $clair;
            }
    
            span {
                display:flex;
                font-size: 13px;
                font-weight: bold;
                padding-left: 2px;
                line-height: 28px;
                align-items: center;
            }
    
            input[type="number"],
            input[type="text"] {
                text-align: center;
                padding: 0px;
                height: 28px;
                border: 0px;
            }
    
            label.ligne {
                display:flex;
                justify-content: space-between;
                background:$clair;
    
                span {
                    width: calc(50% - 2px);
                }
    
                input[type="number"] {
                    width: 50%;
                    border-left:1px solid $sombre;
                }
            }
    
            label.col {
                display:flex;
                flex-wrap: wrap;
                background:$clair;
    
                span {
                    width:100%;
                    justify-content: center;
                }
    
                input[type="number"],
                input[type="text"] {
                    width:100%;
                    border-top:1px solid $sombre;
                }

                width:50%;
            }

            label.colBL {
                display:flex;
                flex-wrap: wrap;
                background:$clair;
    
                span {
                    width:100%;
                    justify-content: center;
                }
    
                input[type="number"],
                input[type="text"] {
                    width:100%;
                    border-top:1px solid $sombre;
                }
    
                width:calc(50% - 1px);
                border-left:1px solid $sombre;
            }
    
            label.borderTop {
                border-top:1px solid $sombre;
            }
        }

        div.bardChangeling {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasButtonActivate":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
    
            div.titre,
            h1.titre {
                display:flex;
            }

            div.firstTitre {
                border-bottom:1px solid $clair;
            }
    
            input[type="text"] {
                text-align: center;
                padding: 0px;
                height: 28px;
                border: 0px;
            }
    
            div.bard250 {
                border-top:1px solid $sombre;
            }
    
            label.ligne {
                background:$clair;
                justify-content: space-between;
                width:100%;
    
                span {
                    display:flex;
                    width:calc(50% - 2px);
                    font-size: 13px;
                    font-weight: bold;
                    padding-left: 2px;
                    line-height: 28px;
                    align-items: center;
                }
    
                input[type="text"] {
                    width:50%;
                    border-left:1px solid $sombre;
                    border-right:0px;
                    border-top:0px;
                    border-bottom:0px;
                }
            }
    
            input[type="text"] {
                width:100%;
                border-top:1px solid $sombre;
            }
    
            div.bard250,
            label.bard250,
            input[type="text"].bard250 {
                display:none;
            }
    
            input[type="hidden"].bard250 {
                &[value="on"] ~ div.bard250,
                &[value="on"] ~ label.bard250,
                &[value="on"] ~ input[type="text"].bard250 {
                    display:flex;
                }
            }

            input[type="hidden"].active {
                &[value^="{{modeChangeling"] {
                    & ~ div.titre {
                        button[type="action"].active {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
                    }
                }
            }
        }

        div.berserkIllumination {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasButtonActivate":true
                ),
                "secondTitre":(
                    "actif":true,
                    "background":$clair,
                    "color":$black
                ),
                "titreInverse":(
                    "actif":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
            @include buttonSelect();
    
            h1.titre,
            h2.titreBis {
                display:flex;
            }
    
            div.titre,
            div.titreInverse {
                display:none;
                
                &:not(:first-of-type) {
                    border-top:1px solid $sombre;
                }
    
                input[type="hidden"][value="on"] ~ button[type="action"] {
                    box-shadow: 0px 0px 7px 0px $black inset;
                }
            }
    
            h2.titreBis {
                border-bottom:1px solid $sombre;
            }
    
            label {
                display:none;
                
                span {
                    display:flex;
                    width:100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }
        
                input[type="text"],
                input[type="number"] {
                    width:100%;
                    border-bottom: 0px;
                    border-left: 0px;
                    border-right: 0px;
                    text-align: center;
                    padding: 0px;
                    height: 28px;
                    border-top: 1px solid $sombre;
                    min-width: 0px;
                }
    
                &.col1 {
                    flex-wrap: wrap;
                    background:$clair;
                    width:100%;
                }
    
                &.col2 {
                    flex-wrap: wrap;
                    background:$clair;
                    width:calc(100% / 2);
                }
    
                &.col2BL {
                    flex-wrap: wrap;
                    background:$clair;
                    width:calc((100% / 2) - 1px);
                    border-left:1px solid $sombre;
                }
    
                &.col3 {
                    flex-wrap: wrap;
                    background:$clair;
                    width:calc(100% / 3);
                }
    
                &.col3BL {
                    flex-wrap: wrap;
                    background:$clair;
                    width:calc((100% / 3) - 1px);
                    border-left:1px solid $sombre;
                }
            }
    
            input[type="text"].ligne {
                display:none;
                width:100%;
                border-top:1px solid $sombre;
                border-bottom: 0px;
                border-left: 0px;
                border-right: 0px;
                text-align: center;
                padding: 0px;
                height: 28px;
                min-width: 0px;
            }
    
            input[type="hidden"] {
                &.blaze {
                    &[value="on"] {
                        & ~ div.button button[type="action"].blaze {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
    
                        & ~ .blaze {
                            display:flex;
                        }
                    } 
                }
    
                &.candle {
                    &[value="on"] {
                        & ~ div.button button[type="action"].candle {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
    
                        & ~ .candle {
                            display:flex;
                        }
                    }
                }
    
                &.beacon {
                    &[value="on"] {
                        & ~ div.button button[type="action"].beacon {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
    
                        & ~ .beacon {
                            display:flex;
                        }
                    }
                }
    
                &.torch {
                    &[value="on"] {
                        & ~ div.button button[type="action"].torch {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
    
                        & ~ .torch {
                            display:flex;
                        }
                    }
                }
    
                &.projector {
                    &[value="on"] {
                        & ~ div.button button[type="action"].projector {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
    
                        & ~ .projector {
                            display:flex;
                        }
                    }
                }
    
                &.lighthouse {
                    &[value="on"] {
                        & ~ div.button button[type="action"].lighthouse {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
    
                        & ~ .lighthouse {
                            display:flex;
                        }
                    }
                }
    
                &.lantern {
                    &[value="on"] {
                        & ~ div.button button[type="action"].lantern {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
    
                        & ~ .lantern {
                            display:flex;
                        }
                    }
                }
            }
        }
        div.berserkRage {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasButtonActivate":true
                ),
                "secondTitre":(
                    "actif":true,
                    "background":$clair,
                    "color":$black
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
            @include buttonSelect();
    
            div.button,
            div.passif,
            div.niveaux,
            div.N1,
            div.N2,
            div.N3 {
                display:none;
            }
    
            h1.titre {
                display:flex;
            }
    
            input[type="hidden"] {
                &.niveau {
                    &[value="1"] {
                        & ~ div button[type="action"].N1 {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
                        
                        & ~ div.niveaux div.N1 {
                            display:flex;
                        }
                    }
    
                    &[value="2"] {
                        & ~ div button[type="action"].N2 {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
    
                        & ~ div.niveaux div.N2 {
                            display:flex;
                        }
                    }
                    
                    &[value="3"] {
                        & ~ div button[type="action"].N3 {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
    
                        & ~ div.niveaux div.N3 {
                            display:flex;
                        }
                    }
                }
    
                &.active {
                    &[value="on"] {
                        & ~ div button[type="action"].rageActive {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
    
                        & ~ div.button,
                        & ~ div.passif,
                        & ~ div.niveaux {
                            display:flex;
                        }
                    }
                }
            }
    
            div.passif {
                flex-wrap: wrap;
                justify-content: space-between;
                width:100%;
    
                div.espoir {
                    display:flex;
                    width:100%;
                    background:$clair;
    
                    span {
                        width: max-content;
                        line-height: 28px;
                        font-size: 14px;
                        color: $black;
                        font-weight: bold;
                        padding-left: 2px;
                    }
    
                    button[type="roll"],
                    button[type="action"] {
                        border-left:1px solid $sombre;
                    }
                }
    
                h2.titreBis {
                    display:flex;
                    border-bottom:1px solid $sombre;
    
                    &:last-of-type {
                        border-top:1px solid $sombre;
                    }
                }
    
                div.col4 {
                    display:flex;
                    flex-wrap: wrap;
                    width:calc(100% / 4);
                    background:$clair;
    
                    span {
                        display:flex;
                        width:100%;
                        line-height: 28px;
                        font-size: 14px;
                        justify-content: center;
                        color: $black;
                        font-weight: bold;
                        align-items: center;
                    }
    
                    div {
                        display:flex;
                        justify-content: space-between;
                        width:100%;
                        border-top:1px solid $sombre;
    
                        input[type="number"],
                        input[type="text"] {
                            width: calc(100% - 28px);
                            border-top: 0px;
                            border-left: 0px;
                            border-bottom: 0px;
                            text-align: center;
                            padding: 0px;
                            height: 28px;
                            border-right: 1px solid $sombre;
                        }
                    }
                }
    
                div.col4BL {
                    display:flex;
                    flex-wrap: wrap;
                    width:calc((100% / 4) - 1px);
                    background:$clair;
                    border-left:1px solid $sombre;
    
                    span {
                        display:flex;
                        width:100%;
                        line-height: 28px;
                        font-size: 14px;
                        justify-content: center;
                        color: $black;
                        font-weight: bold;
                        align-items: center;
                    }
    
                    div {
                        display:flex;
                        justify-content: space-between;
                        width:100%;
                        border-top:1px solid $sombre;
    
                        input[type="number"],
                        input[type="text"] {
                            width: calc(100% - 28px);
                            border-top: 0px;
                            border-left: 0px;
                            border-bottom: 0px;
                            text-align: center;
                            padding: 0px;
                            height: 28px;
                            border-right: 1px solid $sombre;
                        }
                    }
                }
            }
    
            div.niveaux {
                width:100%;
                flex-wrap: wrap;
            }
    
            div.N1,
            div.N2,
            div.N3 {
                width:100%;
                justify-content: space-between;
                flex-wrap: wrap;
    
                label.col2 {
                    display:flex;
                    flex-wrap: wrap;
                    width:calc(100% / 2);
                    background:$clair;
                    border-top:1px solid $sombre;
    
                    span {
                        display:flex;
                        width:100%;
                        line-height: 28px;
                        font-size: 14px;
                        justify-content: center;
                        color: $black;
                        font-weight: bold;
                        align-items: center;
                    }
    
                    input[type="text"],
                    input[type="number"] {
                        width: 100%;
                        border-top: 1px solid $sombre;
                        border-left: 0px;
                        border-bottom: 0px;
                        border-right:0px;
                        text-align: center;
                        padding: 0px;
                        height: 29px;
                    }
                }
    
                label.col2BL {
                    display:flex;
                    flex-wrap: wrap;
                    width:calc((100% / 2) - 1px);
                    border-left:1px solid $sombre;
                    background:$clair;
                    border-top:1px solid $sombre;
    
                    span {
                        display:flex;
                        width:100%;
                        line-height: 28px;
                        font-size: 14px;
                        justify-content: center;
                        color: $black;
                        font-weight: bold;
                        align-items: center;
                    }
    
                    input[type="text"],
                    input[type="number"] {
                        width: 100%;
                        border-top: 1px solid $sombre;
                        border-left: 0px;
                        border-bottom: 0px;
                        border-right:0px;
                        text-align: center;
                        padding: 0px;
                        height: 29px;
                    }
                }
    
                label.col3 {
                    display:flex;
                    flex-wrap: wrap;
                    width:calc(100% / 3);
                    background:$clair;
    
                    span {
                        display:flex;
                        width:100%;
                        line-height: 28px;
                        font-size: 14px;
                        justify-content: center;
                        color: $black;
                        font-weight: bold;
                        align-items: center;
                    }
    
                    input[type="text"],
                    input[type="number"] {
                        width: 100%;
                        border-top: 1px solid $sombre;
                        border-left: 0px;
                        border-bottom: 0px;
                        border-right:0px;
                        text-align: center;
                        padding: 0px;
                        height: 29px;
                    }
                }
    
                label.col3BL {
                    display:flex;
                    flex-wrap: wrap;
                    width:calc((100% / 3) - 1px);
                    border-left:1px solid $sombre;
                    background:$clair;
    
                    span {
                        display:flex;
                        width:100%;
                        line-height: 28px;
                        font-size: 14px;
                        justify-content: center;
                        color: $black;
                        font-weight: bold;
                        align-items: center;
                    }
    
                    input[type="text"],
                    input[type="number"] {
                        width: 100%;
                        border-top: 1px solid $sombre;
                        border-left: 0px;
                        border-bottom: 0px;
                        border-right:0px;
                        text-align: center;
                        padding: 0px;
                        height: 29px;
                    }
                }
    
                label.col3SBL {
                    display:flex;
                    flex-wrap: wrap;
                    width:calc((100% / 3) - 1px);
                    border-left:1px solid $sombre;
                    background:$clair;
    
                    span {
                        display:flex;
                        width:100%;
                        line-height: 28px;
                        font-size: 14px;
                        justify-content: center;
                        color: $black;
                        font-weight: bold;
                        align-items: center;
                    }
    
                    div {
                        display:flex;
                        width:100%;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
    
                        input[type="text"],
                        input[type="number"] {
                            width: calc(100% - 28px);
                            border-top: 0px;
                            border-left: 0px;
                            border-bottom: 0px;
                            text-align: center;
                            padding: 0px;
                            height: 28px;
                            border-right: 1px solid $sombre;
                        }
                    }   
                }
            }
    
            div.borderTop,
            label.borderTop {
                border-top:1px solid $sombre;
            }
        }

        div.druidModJetCompagnons {
            @include block($clair);
            
            h1 {
                display:flex;
            }
    
            @include oneLineIS($clair, $black, 0px, false, true);
        }
        div.druidModCompanions {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasSelect":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonSelect();
    
            div.titre,
            h1.titre {
                display:flex;
            }
    
            div.titre {
                border-bottom:0px;
            }
    
            input[type="hidden"].choix {
                &[value="aucun"] ~ .button {
                    button[type="action"] {
                        &.aucun {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
                    }
                }
    
                &[value="lion"] ~ .button {
                    button[type="action"] {
                        &.lion {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
                    }
                }
    
                &[value="wolf"] ~ .button {
                    button[type="action"] {
                        &.wolf {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
                    }
                }
    
                &[value="crow"] ~ .button {
                    button[type="action"] {
                        &.crow {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
                    }
                }
            }
        }

        input[type="hidden"].druidCompanions {
            &[value="aucun"] {
                & ~ div.DCLion,
                & ~ div.DCWolf,
                & ~ div.DCCrow {
                    display:none;
                }
            }
    
            &[value="lion"] {
                & ~ div.DCWolf,
                & ~ div.DCCrow {
                    display:none;
                }
            }
    
            &[value="wolf"] {
                & ~ div.DCLion,
                & ~ div.DCCrow {
                    display:none;
                }
            }
    
            &[value="crow"] {
                & ~ div.DCLion,
                & ~ div.DCWolf {
                    display:none;
                }
            }
        }

        div.DCLion {
            $titre:(
                "titre":(
                    "hasButton":true
                )
            );
    
            $subMenu: (
                "color":$white,
                "background":$sombre,
                "borderColor":$black,
                "fontSize":1.2em,
                "fontBold":true,
    
                "button":(
                    "width":calc(100% / 3),
                    "widthBL":calc((100% / 3) - 1px),
                    "height":28px
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
            @include subMenu("subMenu", $subMenu);
    
            h1.titre {
                display:flex;
            }
    
            div.col4,
            div.col4BL {
                width:calc(100% / 4);
                flex-wrap: wrap;
                align-content: flex-start;
                align-items:flex-start;
    
                >h1.titre {
                    border-top:1px solid $white;
                }
    
                div.ligne {
                    width:100%;
                    justify-content: space-between;
                    background:$clair;
    
                    span {
                        line-height: 28px;
                        font-size: 14px;
                        color: $black;
                        font-weight: bold;
                    }
    
                    div.blockR {
                        width:50%;
                        justify-content: space-between;
                    }
    
                    &:not(:first-of-type) {
                        border-top:1px solid $sombre;
                    }
                }
    
                div.aspect {
                    span {
                        width:calc(50% - 2px);
                        padding-left:2px;
                    }
    
                    div.blockR {
                        input[type="number"] {
                            width:calc(100% - 28px);
                            border-top: 0px;
                            border-left: 0px;
                            border-bottom: 0px;
                            padding: 0px;
                            text-align: center;
                            height: 28px;
                            border-right:1px solid $sombre;
                        }
                    }
                }
    
                div.AE {
                    justify-content: center;
    
                    span.mineur,
                    span.majeur {
                        display:none;
                        margin-right:2px;
                        width: min-content;
                        justify-content: center;
                    }
    
                    span.value {
                        display:flex;
                        width: min-content;
                        justify-content: center;
    
                        &::before {
                        content: "(";
                        }
    
                        &::after {
                        content: ")";
                        }
                    }
    
                    input[type="hidden"] {
                        &[value="0"],
                        &[value="1"],
                        &[value="2"],
                        &[value="3"],
                        &[value="4"],
                        &[value="5"] {
                            & ~ span.mineur {
                                display:flex;
                            }
                        }
    
                        &[value="6"],
                        &[value="7"],
                        &[value="8"],
                        &[value="9"],
                        &[value="10"] {
                            & ~ span.majeur {
                                display:flex;
                            }
                        }
                    }
                }
    
                div.defense,
                div.reaction {
                    span {
                        width:calc(50% - 2px);
                        padding-left:2px;
                    }
                    
                    div.blockR {
                        input[type="number"] {
                            width:100%;
                            border: 0px;
                            padding: 0px;
                            text-align: center;
                            height: 28px;
                        }
                    }
                }
    
                div.initiative {
                    span {
                        width:calc(50% - 2px);
                        padding-left:2px;
                    }
    
                    div.blockR {
                        input[type="number"] {
                            width:calc(100% - 28px);
                            border-top: 0px;
                            border-left: 0px;
                            border-bottom: 0px;
                            padding: 0px;
                            text-align: center;
                            height: 28px;
                            border-right:1px solid $sombre;
                        }
                    }
                }
    
                div.armure,
                div.energie {
                    span {
                        width:calc(50% - 2px);
                        padding-left:2px;
                    }
    
                    div.blockR {
                        input[type="number"] {
                            width:calc(100% - 3px);
                            border: 0px;
                            padding: 0px;
                            text-align: center;
                            height: 28px;
                        }
    
                        b {
                            display:flex;
                            width:6px;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                }
    
                div.CDF {
                    input[type="number"] {
                        width:100%;
                        border: 0px;
                        padding: 0px;
                        text-align: center;
                        height: 28px;
                    }
                }
            }
    
            div.col4BL {
                >h1.titre {
                    border-left:1px solid $white;
                }
    
                >div {
                    border-left:1px solid $sombre;
                }
            }
    
            div.armes {
                $fakeButton: (
                    "label":(
                        "width":100%,
                        "height":23px
                    ),
                    "span": (
                        "height":23px,
                        "width":100%,
                        "background":$sombre,
                        "color":$white,
                        "border":false
                    ),
                    "shadow":false
                );
    
                @include fakeButton($fakeButton) {
                    font-size:12px;
                };
    
                display:none;
                width:100%;
                flex-wrap: wrap;
    
                div.ligneTitre {
                    width:100%;
                    justify-content: space-between;
    
                    span {
                        display:flex;
                        justify-content: center;
                        color:$black;
                        font-weight:bold;
                        font-size:14px;
                        height:28px;
                        line-height:28px;
                    }
    
                    div.firstCol {
                        background:$clair;
                        width:calc(100% - (170px * 4));
    
                        span {
                            width:100%;
                        }
                    }
    
                    div.midCol {
                        background:$clair;
                        width:calc(170px - 1px);
                        border-left:1px solid $sombre;
    
                        span {
                            width:100%;
                        }
                    }
    
                    div.lastCol {
                        background:$clair;
                        width:calc(170px - 1px);
                        border-left:1px solid $sombre;
    
                        span {
                            width:calc(100% - 28px);
    
                            margin-right:28px;
                        }
                    }
                }

                input[type="hidden"] {
                    &.guidage {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;
    
                                label.guidage {
                                    display:block;
                                }
                            }
                        }
                    }
    
                    &.cadence {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;
    
                                label.cadence {
                                    display:flex;
                                    padding-right:28px;
                                }
    
                                label.guidage {
                                    width:99px;
                                    margin-right:0px !important;
                                }
                            }
                        }
                    }
                }
    
                div.coups {
                    $subMenu: (
                        "color":$white,
                        "background":transparent,
                        "borderColor":$black,
                        "fontSize":12px,
                        "fontBold":true,
    
                        "button":(
                            "width":100%,
                            "widthBL":calc(100% - 1px),
                            "height":23px
                        )
                    );
    
                    @include subMenu("subMenu", $subMenu);
    
                    width:100%;
                    flex-wrap: wrap;
                    justify-content: space-between;
    
                    div.ligne {
                        width:100%;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
    
                        div.firstCol {
                            background:$clair;
                            width:calc(100% - (170px * 4));
                        }
    
                        div.midCol,
                        div.lastCol {
                            justify-content: space-between;
                            background:$clair;
                            width:calc(170px - 1px);
                            border-left:1px solid $sombre;
                        }
    
                        div.aB1Nom {
                            input[type="text"] {
                                width: 100%;
                                font-size: 14px;
                                height: 28px;
                                padding-top: 0px;
                                padding-right: 0px;
                                padding-bottom: 0px;
                                border: 0px;
                                padding-left: 4px;
                                min-width: 0px;
                            }
                        }
    
                        div.aB1Degats,
                        div.aB1Violence {
                            input[type="number"] {
                                width: calc(50% - 14px);
                                font-size: 14px;
                                height: 28px;
                                padding: 0px;
                                border: 0px;
                                min-width: 0px;
                            }
    
                            input[type="number"].nbre {
                                text-align:right;
                            }
    
                            input[type="number"].bonus {
                                text-align:left;
                            }
    
                            b {
                                display:flex;
                                width: 28px;
                                height: 28px;
                                align-items: center;
                                justify-content: center;
                                font-size: 14px;
                                font-weight: bold;
                            }
                        }
    
                        div.aB1Portee {
                            select {
                                width:100%;
                                font-size: 14px;
                                height: 28px;
                                text-align: center;
                                padding-top: 0px;
                                padding-right: 0px;
                                padding-bottom: 0px;
                                border: 0px;
                                padding-left: 15px;
                            }
                        }
    
                        div.aB1Aspect {
                            select {
                                width:calc(100% - 28px);
                                font-size: 14px;
                                height: 28px;
                                text-align: center;
                                padding-top: 0px;
                                padding-right: 0px;
                                padding-bottom: 0px;
                                border: 0px;
                                padding-left: 15px;
                                border-right:1px solid $sombre;
                            }
                        }
                    }
    
                    div.special {
                        display:none;
                        width:100%;
                        background:$clair;
                        justify-content: space-evenly;
                        flex-wrap: wrap;
    
                        div.simple {
                            justify-content: space-between;
                            width:150px;
                            height:23px;
                            margin:2px;
                            border:1px solid $black;
    
                            input[type="checkbox"] {
                                &:not(:checked) {
                                    & ~ span::before {
                                        background:$clair;
                                        color:$black;
                                    }
                                }
                            }
                        }
    
                        div.double {
                            justify-content: space-between;
                            width:150px;
                            height:23px;
                            margin:2px;
                            border:1px solid $black;
    
                            label.fakeButton {
                                width:calc(100% - 30px);
    
                                input[type="checkbox"] {
                                    &:not(:checked) {
                                        & ~ span::before {
                                            background:$clair;
                                            color:$black;
                                        }
                                    }
                                }
                            }
                        }
    
                        div.doubleTexte {
                            width:150px;
                            height:46px;
                            margin:2px;
                            flex-wrap: wrap;
                            border:1px solid $black;
    
                            input[type="checkbox"] {
                                &:not(:checked) {
                                    & ~ span::before {
                                        background:$clair;
                                        color:$black;
                                    }
                                }
                            }
    
                            input[type="text"] {
                                width: 100%;
                                height: 23px;
                                text-align: center;
                                border: 1px solid black;
                                border-radius: 0px;
                                padding: 0px;
                            }
                        }
    
                        div.triple {
                            width:150px;
                            height:46px;
                            margin:2px;
                            flex-wrap: wrap;
                            border:1px solid $black;
    
                            div {
                                input[type="number"] {
                                    width: calc(50% - 14px);
                                    height: 23px;
                                    border-radius: 0px;
                                    padding: 0px;
                                    border-bottom:0px;
                                    border-right:0px;
                                    border-left:0px;
                                    border-top:1px solid $black;
                                    color:$black;
    
                                    &.R {
                                        text-align:left;
                                        border-left:1px solid $black;
                                    }
    
                                    &.L {
                                        text-align:right;
                                        border-right:1px solid $black;
                                    }
                                }
    
                                span {
                                    display:flex;
                                    background:$sombre;
                                    width: 28px;
                                    height: 22px;
                                    align-items: center;
                                    justify-content: center;
                                    font-size: 14px;
                                    font-weight: bold;
                                    color: $white;
                                    border-top: 1px solid $black;
                                }
                                
                            }
    
                            input[type="hidden"] {
                                &[value="0"] {
                                    & ~ label span::before,
                                    & ~ div span {
                                        background:$clair;
                                        color:$black;
                                    }
                                }
                            }
                        }
                    }
    
                    input[type="hidden"].subMenu {
                        &[value="1"] {
                            & ~ div button[type="action"].effets {
                                box-shadow: 0px 0px 7px 0px $black inset;
                            }
            
                            & ~ div.effets {
                                display:flex;
                            }
                        }
            
                        &[value="2"] {
                            & ~ div button[type="action"].ameliorationsArmes {
                                box-shadow: 0px 0px 7px 0px $black inset;
                            }
            
                            & ~ div.ameliorationsArmes {
                                display:flex;
                            }
                        }
            
                        &[value="3"] {
                            & ~ div button[type="action"].special {
                                box-shadow: 0px 0px 7px 0px $black inset;
                            }
            
                            & ~ div.special {
                                display:flex;
                            }
                        }
                    }
                }
    
                div.repcontainer,
                div.repitem {
                    width:100%;
                    flex-wrap: wrap;
                }
    
                div.repitem {
                    $subMenu: (
                        "color":$white,
                        "background":transparent,
                        "borderColor":$black,
                        "fontSize":12px,
                        "fontBold":true,
    
                        "button":(
                            "width":calc(100% / 3),
                            "widthBL":calc((100% / 3) - 1px),
                            "height":23px
                        )
                    );
    
                    @include subMenu("subMenu", $subMenu);
     
                    justify-content: space-between;
    
                    div.data {
                        display:none;
                    }
    
                    div.ligne {
                        width:100%;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
    
                        div.firstCol {
                            background:$clair;
                            width:calc(100% - (170px * 4));
                        }
    
                        div.midCol,
                        div.lastCol {
                            justify-content: space-between;
                            background:$clair;
                            width:calc(170px - 1px);
                            border-left:1px solid $sombre;
                        }
    
                        div.aNom {
                            input[type="text"] {
                                width: 100%;
                                font-size: 14px;
                                height: 28px;
                                padding-top: 0px;
                                padding-right: 0px;
                                padding-bottom: 0px;
                                border: 0px;
                                padding-left: 4px;
                                min-width: 0px;
                            }
                        }
    
                        div.aDegats,
                        div.aViolence {
                            input[type="number"] {
                                width: calc(50% - 14px);
                                font-size: 14px;
                                height: 28px;
                                padding: 0px;
                                border: 0px;
                                min-width: 0px;
                            }
    
                            input[type="number"].nbre {
                                text-align:right;
                            }
    
                            input[type="number"].bonus {
                                text-align:left;
                            }
    
                            b {
                                display:flex;
                                width: 28px;
                                height: 28px;
                                align-items: center;
                                justify-content: center;
                                font-size: 14px;
                                font-weight: bold;
                            }
                        }
    
                        div.aPortee {
                            select {
                                width:100%;
                                font-size: 14px;
                                height: 28px;
                                text-align: center;
                                padding-top: 0px;
                                padding-right: 0px;
                                padding-bottom: 0px;
                                border: 0px;
                                padding-left: 15px;
                            }
                        }
    
                        div.aAspect {
                            select {
                                width:calc(100% - 28px);
                                font-size: 14px;
                                height: 28px;
                                text-align: center;
                                padding-top: 0px;
                                padding-right: 0px;
                                padding-bottom: 0px;
                                border: 0px;
                                padding-left: 15px;
                                border-right:1px solid $sombre;
                            }
                        }
                    }

                    div.bonus {
                        display:none;
                        width:100%;
                        justify-content: flex-end;
                    }
    
                    div.effets,
                    div.ameliorationsArmes,
                    div.special {
                        display:none;
                        width:100%;
                        background:$clair;
                        justify-content: space-evenly;
                        flex-wrap: wrap;
    
                        label.simple {
                            justify-content: space-between;
                            width:150px;
                            height:23px;
                            margin:2px;
                            border:1px solid $black;
    
                            input[type="checkbox"] {
                                &:not(:checked) {
                                    & ~ span::before {
                                        background:$clair;
                                        color:$black;
                                    }
                                }
                            }
                        }
    
                        div.double {
                            justify-content: space-between;
                            width:150px;
                            height:23px;
                            margin:2px;
                            border:1px solid $black;
    
                            label.fakeButton {
                                width:calc(100% - 30px);
                                border:0px;
    
                                input[type="checkbox"] {
                                    &:not(:checked) {
                                        & ~ span::before {
                                            background:$clair;
                                            color:$black;
                                        }
                                    }
                                }
                            }
    
                            input[type="number"] {
                                width: 30px;
                                height: 23px;
                                text-align: center;
                                border-top: 0px;
                                border-right: 0px;
                                border-left: 1px solid $black;
                                border-bottom: 0px;
                                border-radius: 0px;
                                padding: 0px;
                            }
                        }
    
                        div.doubleTexte {
                            width:150px;
                            margin:2px;
                            flex-wrap: wrap;
                            border:1px solid $black;
    
                            input[type="checkbox"] {
                                &:not(:checked) {
                                    & ~ span::before {
                                        background:$clair;
                                        color:$black;
                                    }
                                }
                            }
    
                            input[type="text"] {
                                width: 100%;
                                height: 23px;
                                text-align: center;
                                border-top: 1px solid black;
                                border-right: 0px;
                                border-left: 0px;
                                border-bottom: 0px;
                                border-radius: 0px;
                                padding: 0px;
    
                                &.borderBottom {
                                    border-bottom:1px solid $black;
                                }
                            }
    
                            .borderTop {
                                border-top:1px solid $black;
                            }                        
                        }
    
                        div.triple {
                            width:150px;
                            height:46px;
                            margin:2px;
                            flex-wrap: wrap;
                            border:1px solid $black;
    
                            div {
                                input[type="number"] {
                                    width: calc(50% - 14px);
                                    height: 23px;
                                    border-radius: 0px;
                                    padding: 0px;
                                    border-bottom:0px;
                                    border-right:0px;
                                    border-left:0px;
                                    border-top:1px solid $black;
                                    color:$black;
    
                                    &.R {
                                        text-align:left;
                                        border-left:1px solid $black;
                                    }
    
                                    &.L {
                                        text-align:right;
                                        border-right:1px solid $black;
                                    }
                                }
    
                                span {
                                    display:flex;
                                    background:$sombre;
                                    width: 28px;
                                    height: 22px;
                                    align-items: center;
                                    justify-content: center;
                                    font-size: 14px;
                                    font-weight: bold;
                                    color: $white;
                                    border-top: 1px solid $black;
                                }
                                
                            }
    
                            input[type="hidden"] {
                                &[value="0"] {
                                    & ~ label span::before,
                                    & ~ div span {
                                        background:$clair;
                                        color:$black;
                                    }
                                }
                            }
                        }
                    }
    
                    input[type="hidden"].subMenu {
                        &[value="1"] {
                            & ~ div button[type="action"].effets {
                                box-shadow: 0px 0px 7px 0px $black inset;
                            }
            
                            & ~ div.effets {
                                display:flex;
                            }
                        }
            
                        &[value="2"] {
                            & ~ div button[type="action"].ameliorationsArmes {
                                box-shadow: 0px 0px 7px 0px $black inset;
                            }
            
                            & ~ div.ameliorationsArmes {
                                display:flex;
                            }
                        }
            
                        &[value="3"] {
                            & ~ div button[type="action"].special {
                                box-shadow: 0px 0px 7px 0px $black inset;
                            }
            
                            & ~ div.special {
                                display:flex;
                            }
                        }
                    }
                }

                div.bonus {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "width":100%,
                            "height":23px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
        
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };
    
                    label.cadence {
                        display:none;
                        width:382px;
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
            
                        span {
                            width: 236px;
                            padding-left: 2px;
                            line-height: 27px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            
                        }
    
                        select {
                            width:142px;
                            border:0px;
                            padding:0px;
                            padding-left:15px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                            border-right:1px solid $sombre;
                        }
                    }
    
                    label.guidage {
                        display:none;
                        margin-top:1px;
                        width:140px;
                        height:28px;
                        margin:0px;
                        margin-right:29px;
                        border-right:1px solid $sombre;
                        border:0px;
                        background:$clair;
    
                        span.actif,
                        span.inactif {
                            display:none;
                            text-align: center;
                            color:$black;
                            height:28px;
                            line-height: 28px;
                            align-items:center;
                            border-left:1px solid $sombre;
    
                            &::before {
                                height:28px;
                                line-height: 28px;
                                background:transparent;
                                color:$black;
                            }
                        }
    
                        span.actif {
                            border-left:1px solid $clair;
    
                            &::before {
                                background:$sombre;
                                color:$white;
                                border-bottom:1px solid $clair;
                            }
                            
                        }
    
                        input[type="checkbox"] {
                            height:28px;
    
                            &:checked {
                                & ~ span.actif {
                                    display:flex;
                                }
                            }
    
                            &:not(:checked) {
                                & ~ span.inactif {
                                    display:flex;
                                }
                            }
                        }
                    }
                }
            }
    
            div.modules {
                @include extendModules();
    
                display:none;
                width:100%;
                flex-wrap: wrap;
    
                h1.titre {
                    display:flex;
                }
    
                .ligne {
                    width:100%;
                    justify-content: space-between;
                }
    
                div.slots {
                    div.col6,
                    div.col6BL {
                        justify-content: space-between;
                        background:$clair;
    
                        >span {
                            width: max-content;
                            font-weight: bold;
                            font-variant: small-caps;
                            line-height: 28px;
                            padding-left: 3px;
                            color:$black;
                        }
    
                        div {
                            width: 45px;
                            height: 28px;
                            margin: 0px;
                            padding: 0px;
                            align-items: center;
                            flex-wrap: nowrap;
    
                            input[type="number"] {
                                background: transparent;
                                border: none;
                                line-height: 28px;
                                height: 28px;
                                padding: 0px;
                                width: 19px;
                                font-weight: bold;
                                font-size: 13px;
                                margin-left: auto;
                                text-align: right;
                                color: $black;
                            }
    
                            b {
                                font-size: 14px;
                                line-height: 28px;
                                color: RGB(55, 53, 53);
                            }
    
                            span {
                                line-height: 28px;
                                margin-left: 0px;
                                margin-top: 0px;
                                margin-bottom: 0px;
                                width: auto;
                                text-align: center;
                                font-size: 13px;
                                margin-right: 2px;
                                color: $black;
                                font-weight:bold;
                            }
                        }
                    }
    
                    div.col6 {
                        width:calc(100% / 6);
                    }
    
                    div.col6BL {
                        width:calc((100% / 6) - 1px);
                        border-left:1px solid $sombre;
                    }
                }
    
                div.repitem {
                    display:flex;
                    width: calc(50% - 10px);
                    justify-content: space-between;
                    background-color: $sombre;
                    border: 1px solid $clair;
                    align-self: flex-start;
                    flex-wrap: wrap;
    
                    div.titre {
                        display:flex;
                        position:initial;
                    }
    
                    div.ligne {
                        height:28px;
                    }
    
                    input[type="hidden"] {
                        &.expandSlots {
                            &[value="1"] {
                                & ~ div button[type="action"].buttonArrow {
                                    transform: rotate(-90deg);
                                }
    
                                & ~ .hSlots {
                                    display:flex;
                                }
                            }
                        }
    
                        &.expandModule {
                            &[value="0"] {
                                & ~ div button[type="action"].buttonPlus {
                                    span.plus {
                                        display:flex;
                                    }
                                }
    
                                & ~ .hModule,
                                & ~ .hSlots {
                                    display:none;
                                }
                            }
    
                            &[value="1"] {
                                & ~ div button[type="action"].buttonPlus {
                                    span.moins {
                                        display:flex;
                                    }
                                }
    
                                & ~ .hModule {
                                    display:flex;
                                }
                            }
                        }
                    }
    
                    div.titreModule {
                        input[type="text"] {
                            width: calc(100% - 28px);
                            height:28px;
                            text-align: center;
                            background: transparent;
                            color: $white;
                            font-weight: bold;
                            font-variant: small-caps;
                            padding-top: 0px;
                            padding-bottom: 0px;
                            padding-left: 0px;
                            padding-right: 25px;
                            border:0px;
                        }
                    }
    
                    label.activation {
                        display:flex;
                        justify-content: space-between;
                        background:$clair;
                        width:calc(100% - 100px);
                        height:28px;
    
                        span {
                            display:flex;
                            width:78px;
                            padding-left:2px;
                            font-size:13px;
                            line-height:28px;
                            height:28px;
                        }
    
                        input[type="text"] {
                            width:calc(100% - 80px);
                            height:28px;
                            border:0px;
                            padding-top:0px;
                            padding-bottom:0px;
                            padding-right:0px;
                            padding-left:2px;
                        }
                    }
    
                    div.PE {
                        width:100px;
                        height:28px;
                        justify-content: space-between;
    
                        button[type="action"] {
                            width: 20px;
                            padding: 0px;
                            font-weight: bold;
                            background: $sombre;
                            color: $white;
                            border-color: $clair;
                            border-width: 1px;
                            justify-content: center;
                            align-items: center;
                            margin-left:1px;
                        }
                        
                        input[type="number"] {
                            width:calc(100% - 23px);
                            height:28px;
                            border:0px;
                            padding:0px;
                            text-align: center;
                            color:$black;
                        }
                    }
    
                    label.duree {
                        justify-content: space-between;
                        background:$clair;
                        width:100%;
                        height:28px;
                        border-top:1px solid $sombre;
    
                        span {
                            display:flex;
                            width:78px;
                            padding-left:2px;
                            font-size:13px;
                            line-height:28px;
                            height:28px;
                        }
    
                        input[type="text"] {
                            width:calc(100% - 80px);
                            height:28px;
                            border:0px;
                            padding-top:0px;
                            padding-bottom:0px;
                            padding-right:0px;
                            padding-left:2px;
                        }
                    }
    
                    div.autoex {
                        border-top:1px solid $sombre;
                    }
    
                    div.titreSlots {
                        input[type="number"] {
                            width: 20px;
                            height: 28px;
                            margin: 0px;
                            padding: 0px;
                            background: transparent;
                            border: 0px;
                            color: $white;
                            font-size: 18px;
                            font-weight: bold;
                            text-align: center;
                        }
                    }
    
                    label.slot,
                    label.slotBL {
                        display:flex;
                        justify-content: space-between;
                        background:$clair;
    
                        span {
                            display:flex;
                            width:105px;
                            height:28px;
                            line-height:28px;
                            padding-left:2px;
                            font-size:13px;
                            font-weight:bold;
                            color:$black;
                        }
    
                        input[type="number"] {
                            width:calc(100% - 107px);
                            height: 28px;
                            border: 0px;
                            padding: 0px;
                            text-align: center;
                        }
                    }
    
                    label.slot {
                        width:calc(100% / 2);
                    }
    
                    label.slotBL {
                        width:calc((100% / 2) - 1px);
                        border-left:1px solid $sombre;
                    }
    
                    div.bTop {
                        border-top:1px solid $sombre;
                    }
    
                    .hModule,
                    .hSlots {
                        display:none;
                    }
    
                    &:not(:nth-of-type(1)):not(:nth-of-type(2)) {
                        margin-top:10px;
                    }
                }
    
                div.repcontainer{
                    width:100%;
                    flex-wrap: wrap;
                    padding:2px;
                    justify-content: space-between;
    
                    &.editmode {
                        .repitem {
                            width:100%;
    
                            &:nth-of-type(2) {
                                margin-top:10px;
                            }
                        }
                    }
                }
            }
    
            div.evolutions {
                display:none;
                width:100%;
                justify-content: space-between;
                flex-wrap: wrap;
    
                div.aspects {
                    display:flex;
                    width:calc((100% / 2) - 10px);
                    background:$clair;
                    border-right:1px solid $sombre;
                    flex-wrap: wrap;
    
                    div.ligneTitre {
                        display:flex;
                        justify-content: space-between;
                        width:100%;
    
                        span {
                            display:flex;
                            line-height: 28px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
    
                            &:first-of-type {
                                width:calc(20% - 2px);
                                padding-left:2px;
                            }
    
                            &:not(:first-of-type) {
                                width:calc(40% - 1px);
                                border-left:1px solid $sombre;
                                justify-content: center;
                            }
                        }
                    }
    
                    div.ligne2 {
                        display:flex;
                        justify-content: space-between;
                        width:100%;
                        border-top:1px solid $sombre;
    
                        span {
                            display:flex;
                            width:calc(20% - 2px);
                            padding-left:2px;
                            line-height: 28px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                        }
    
                        div {
                            display:flex;
                            width:calc(40% - 1px);
                            border-left:1px solid $sombre;
    
                            input[type="number"],
                            select {
                                width: 100%;
                                text-align: center;
                                border: 0px;
                                padding: 0px;
                                height: 28px;
                            }
                            select {
                                padding-left:20px;
                            }
                        }
                    }
                }
    
                div.VD {
                    display:flex;
                    width:calc((100% / 2) - 10px);
                    background:$clair;
                    border-left:1px solid $sombre;
                    flex-wrap: wrap;
    
                    div.ligneTitre {
                        display:flex;
                        justify-content: space-between;
                        width:100%;
    
                        span {
                            display:flex;
                            line-height: 28px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
    
                            &:first-of-type {
                                width:calc(100% / 2);
                            }
    
                            &:not(:first-of-type) {
                                width:calc((100% / 2) - 1px);
                                border-left:1px solid $sombre;
                                justify-content: center;
                            }
                        }
                    }
                
                    label.ligne1 {
                        display:flex;
                        justify-content: space-between;
                        width:100%;
                        border-top:1px solid $sombre;
    
                        span {
                            display:flex;
                            width:calc((100% / 2) - 2px);
                            padding-left:2px;
                            line-height: 28px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                        }
    
                        input[type="number"] {
                            width: calc(100% / 2);
                            text-align: center;
                            border: 0px;
                            padding: 0px;
                            height: 28px;
                            border-left:1px solid $sombre;
                        }
                    }
                }
            }
    
            >input[type="hidden"].subMenu {
                &[value="1"] {
                    & ~ div button[type="action"].armes {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ div.armes {
                        display:flex;
                    }
                }
    
                &[value="2"] {
                    & ~ div button[type="action"].modules {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ div.modules {
                        display:flex;
                    }
                }
    
                &[value="3"] {
                    & ~ div button[type="action"].evolutions {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ div.evolutions {
                        display:flex;
                    }
                }
            }
        }

        div.DCWolf {
            $titre:(
                "titre":(
                    "hasButton":true
                )
            );
    
            $subMenu: (
                "color":$white,
                "background":$sombre,
                "borderColor":$black,
                "fontSize":1.2em,
                "fontBold":true,
    
                "button":(
                    "width":100%,
                    "widthBL":calc(100% - 1px),
                    "height":28px
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
            @include subMenu("subMenu", $subMenu);
    
            .labor,
            .medik,
            .tech,
            .fighter,
            .recon,
            .N1,
            .N2,
            .N3 {
                display:none;
            }
    
            h1.titre {
                display:flex;
            }
    
            div.col4,
            div.col4BL {
                width:calc(100% / 4);
                flex-wrap: wrap;
                align-content: flex-start;
                align-items:flex-start;
    
                >h1.titre {
                    border-top:1px solid $white;
                }
    
                div.ligne {
                    width:100%;
                    justify-content: space-between;
                    background:$clair;
    
                    span {
                        line-height: 28px;
                        font-size: 14px;
                        color: $black;
                        font-weight: bold;
                    }
    
                    div.blockR {
                        width:50%;
                        justify-content: space-between;
                    }
    
                    &:not(:first-of-type) {
                        border-top:1px solid $sombre;
                    }
                }
    
                div.aspect {
                    span {
                        width:calc(50% - 2px);
                        padding-left:2px;
                    }
    
                    div.blockR {
                        input[type="number"] {
                            width:calc(100% - 28px);
                            border-top: 0px;
                            border-left: 0px;
                            border-bottom: 0px;
                            padding: 0px;
                            text-align: center;
                            height: 28px;
                            border-right:1px solid $sombre;
                        }
                    }
                }
    
                div.AE {
                    justify-content: center;
    
                    span.mineur,
                    span.majeur {
                        display:none;
                        margin-right:2px;
                        width: min-content;
                        justify-content: center;
                    }
    
                    span.value {
                        display:flex;
                        width: min-content;
                        justify-content: center;
    
                        &::before {
                        content: "(";
                        }
    
                        &::after {
                        content: ")";
                        }
                    }
    
                    input[type="hidden"] {
                        &[value="0"],
                        &[value="1"],
                        &[value="2"],
                        &[value="3"],
                        &[value="4"],
                        &[value="5"] {
                            & ~ span.mineur {
                                display:flex;
                            }
                        }
    
                        &[value="6"],
                        &[value="7"],
                        &[value="8"],
                        &[value="9"],
                        &[value="10"] {
                            & ~ span.majeur {
                                display:flex;
                            }
                        }
                    }
                }
    
                div.defense,
                div.reaction {
                    span {
                        width:calc(50% - 2px);
                        padding-left:2px;
                    }
                    
                    div.blockR {
                        input[type="number"] {
                            width:100%;
                            border: 0px;
                            padding: 0px;
                            text-align: center;
                            height: 28px;
                        }
                    }
                }
    
                div.initiative {
                    span {
                        width:calc(50% - 2px);
                        padding-left:2px;
                    }
    
                    div.blockR {
                        input[type="number"] {
                            width:calc(100% - 28px);
                            border-top: 0px;
                            border-left: 0px;
                            border-bottom: 0px;
                            padding: 0px;
                            text-align: center;
                            height: 28px;
                            border-right:1px solid $sombre;
                        }
                    }
                }
    
                div.armure,
                div.energie {
                    span {
                        width:calc(50% - 2px);
                        padding-left:2px;
                    }
    
                    div.blockR {
                        input[type="number"] {
                            width:calc(100% - 3px);
                            border: 0px;
                            padding: 0px;
                            text-align: center;
                            height: 28px;
                        }
    
                        b {
                            display:flex;
                            width:6px;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                }
    
                div.CDF {
                    input[type="number"] {
                        width:100%;
                        border: 0px;
                        padding: 0px;
                        text-align: center;
                        height: 28px;
                    }
                }
    
                div.configuration {
                    select {
                        width: calc(100% - 21px - 30px);
                        border: 0px;
                        padding: 0px;
                        text-align: center;
                        height: 28px;
                    }
    
                    button[type="action"] {
                        width: 20px;
                        padding: 0px;
                        font-weight: bold;
                        background: $sombre;
                        color: $white;
                        border-color: $clair;
                        border-width: 1px;
                        justify-content: center;
                        align-items: center;
                        margin-left:1px;
                    }
    
                    input[type="number"] {
                        width: 30px;
                        height: 28px;
                        border: 0px;
                        padding: 0px;
                        text-align: center;
                    }
                }
    
                div.nbreCompanions {
                    select {
                        width: 100%;
                        border: 0px;
                        padding: 0px;
                        text-align: center;
                        height: 28px;
                    }
                    
                }
    
                div.fighter {
                    span {
                        width: max-content;
                        line-height: 28px;
                        font-size: 14px;
                        padding-left: 2px;
                        color: $black;
                        font-weight: bold;
                        align-items: center;
                    }
                    
                    button[type="roll"],
                    button[type="action"] {
                        border-left:1px solid $sombre;
                    }
                }
            }
    
            div.col4BL {
                >h1.titre {
                    border-left:1px solid $white;
                }
    
                >div {
                    border-left:1px solid $sombre;
                }
            }
    
            div.description {
                width: 100%;
                flex-wrap: wrap;
                background: $clair;
    
                span {
                    width: 100%;
                    text-align: justify;
                    padding-left: 2px;
                    padding-right: 2px;
                    padding-top: 2px;
                    padding-bottom: 2px;
                }
            }
    
            div.evolutions {
                display:none;
                width:100%;
                justify-content: space-between;
                align-items:flex-start;
                flex-wrap: wrap;
    
                div.aspects {
                    display:flex;
                    width:calc((100% / 2) - 10px);
                    background:$clair;
                    border-right:1px solid $sombre;
                    flex-wrap: wrap;
    
                    div.ligneTitre {
                        display:flex;
                        justify-content: space-between;
                        width:100%;
    
                        span {
                            display:flex;
                            line-height: 28px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
    
                            &:first-of-type {
                                width:calc(20% - 2px);
                                padding-left:2px;
                            }
    
                            &:not(:first-of-type) {
                                width:calc(40% - 1px);
                                border-left:1px solid $sombre;
                                justify-content: center;
                            }
                        }
                    }
    
                    div.ligne2 {
                        display:flex;
                        justify-content: space-between;
                        width:100%;
                        border-top:1px solid $sombre;
    
                        span {
                            display:flex;
                            width:calc(20% - 2px);
                            padding-left:2px;
                            line-height: 28px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                        }
    
                        div {
                            display:flex;
                            width:calc(40% - 1px);
                            border-left:1px solid $sombre;
    
                            input[type="number"],
                            select {
                                width: 100%;
                                text-align: center;
                                border: 0px;
                                padding: 0px;
                                height: 28px;
                            }
                            select {
                                padding-left:20px;
                            }
                        }
                    }
                }
    
                div.companions {
                    display:flex;
                    width:calc((100% / 2) - 10px);
                    background:$clair;
                    align-content:flex-start;
                    align-self:stretch;
                    flex-wrap: wrap;
    
                    &:nth-of-type(even) {
                        border-left:1px solid $sombre;
                    }
    
                    &:nth-of-type(odd) {
                        border-right:1px solid $sombre;
                    }
    
                    div.tCompanions {
                        display:flex;
                        width:100%;
                        border-bottom:1px solid $sombre;
                        position:relative;
    
                        h2 {
                            position:absolute;
                            display:flex;
                            width:100%;
                            line-height: 28px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            justify-content: center;
                        }
    
                        select {
                            width: 85px;
                            height: 28px;
                            line-height: 28px;
                            padding: 0px;
                            border: 0px;
                            margin-left: auto;
                            color:$black;
                            z-index:9;
                        }
                    }
    
                    span {
                        padding:2px;
                        text-align: justify;
                    }
                }
    
                div.mT {
                    margin-top:10px;
                }
            }
    
            >input[type="hidden"].laborNiveau {
                &[value="1"] {
                    & ~ div.labor .N1,
                    & ~ div div.cLabor .N1 {
                        display:flex;
                    }
                }
    
                &[value="2"] {
                    & ~ div.labor .N2,
                    & ~ div div.cLabor .N2 {
                        display:flex;
                    }
                }
    
                &[value="3"] {
                    & ~ div.labor .N3,
                    & ~ div div.cLabor .N3 {
                        display:flex;
                    }
                }
            }
    
            >input[type="hidden"].medikNiveau {
                &[value="1"] {
                    & ~ div.medik .N1,
                    & ~ div div.cMedik .N1 {
                        display:flex;
                    }
                }
    
                &[value="2"] {
                    & ~ div.medik .N2,
                    & ~ div div.cMedik .N2 {
                        display:flex;
                    }
                }
    
                &[value="3"] {
                    & ~ div.medik .N3,
                    & ~ div div.cMedik .N3 {
                        display:flex;
                    }
                }
            }
    
            >input[type="hidden"].techNiveau {
                &[value="1"] {
                    & ~ div.tech .N1,
                    & ~ div div.cTech .N1 {
                        display:flex;
                    }
                }
    
                &[value="2"] {
                    & ~ div.tech .N2,
                    & ~ div div.cTech .N2 {
                        display:flex;
                    }
                }
    
                &[value="3"] {
                    & ~ div.tech .N3,
                    & ~ div div.cTech .N3 {
                        display:flex;
                    }
                }
            }
    
            >input[type="hidden"].fighterNiveau {
                &[value="1"] {
                    & ~ div.fighter .N1,
                    & ~ div div.cFighter .N1 {
                        display:flex;
                    }
                }
    
                &[value="2"] {
                    & ~ div.fighter .N2,
                    & ~ div div.cFighter .N2 {
                        display:flex;
                    }
                }
    
                &[value="3"] {
                    & ~ div.fighter .N3,
                    & ~ div div.cFighter .N3 {
                        display:flex;
                    }
                }
            }
    
            >input[type="hidden"].reconNiveau {
                &[value="1"] {
                    & ~ div.recon .N1,
                    & ~ div div.cRecon .N1 {
                        display:flex;
                    }
                }
    
                &[value="2"] {
                    & ~ div.recon .N2,
                    & ~ div div.cRecon .N2 {
                        display:flex;
                    }
                }
    
                &[value="3"] {
                    & ~ div.recon .N3,
                    & ~ div div.cRecon .N3 {
                        display:flex;
                    }
                }
            }
    
            >input[type="hidden"].choixConfiguration {
                &[value="Labor"] {
                    & ~ .labor,
                    & ~ div .labor {
                        display:flex;
                    }
                }
    
                &[value="Medic"] {
                    & ~ .medik,
                    & ~ div .medik {
                        display:flex;
                    }
                }
    
                &[value="Tech"] {
                    & ~ .tech,
                    & ~ div .tech {
                        display:flex;
                    }
                }
    
                &[value="Fighter"] {
                    & ~ .fighter,
                    & ~ div .fighter {
                        display:flex;
                    }
                }
    
                &[value="Recon"] {
                    & ~ .recon,
                    & ~ div .recon {
                        display:flex;
                    }
                }
            }
    
            >input[type="hidden"].subMenu {
                &[value="3"] {
                    & ~ div button[type="action"].evolutions {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ div.evolutions {
                        display:flex;
                    }
                }
            }
        }
    
        div.DCCrow {
            $titre:(
                "titre":(
                    "hasButton":true
                )
            );
    
            $subMenu: (
                "color":$white,
                "background":$sombre,
                "borderColor":$black,
                "fontSize":1.2em,
                "fontBold":true,
    
                "button":(
                    "width":100%,
                    "widthBL":calc(100% - 1px),
                    "height":28px
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
            @include subMenu("subMenu", $subMenu);
    
            h1.titre {
                display:flex;
            }
    
            div.col4,
            div.col4BL {
                width:calc(100% / 3);
                flex-wrap: wrap;
                align-content: flex-start;
                align-items:flex-start;
    
                >h1.titre {
                    border-top:1px solid $white;
                }
    
                div.ligne {
                    width:100%;
                    justify-content: space-between;
                    background:$clair;
    
                    span {
                        line-height: 28px;
                        font-size: 14px;
                        color: $black;
                        font-weight: bold;
                    }
    
                    div.blockR {
                        width:50%;
                        justify-content: space-between;
                    }
    
                    &:not(:first-of-type) {
                        border-top:1px solid $sombre;
                    }
                }
    
                div.aspect {
                    span {
                        width:calc(50% - 2px);
                        padding-left:2px;
                    }
    
                    div.blockR {
                        input[type="number"] {
                            width:calc(100% - 28px);
                            border-top: 0px;
                            border-left: 0px;
                            border-bottom: 0px;
                            padding: 0px;
                            text-align: center;
                            height: 28px;
                            border-right:1px solid $sombre;
                        }
                    }
                }
    
                div.defense,
                div.reaction,
                div.debordement {
                    span {
                        width:calc(50% - 2px);
                        padding-left:2px;
                    }
                    
                    div.blockR {
                        input[type="number"] {
                            width:100%;
                            border: 0px;
                            padding: 0px;
                            text-align: center;
                            height: 28px;
                        }
                    }
                }
    
                div.initiative {
                    span {
                        width:calc(50% - 2px);
                        padding-left:2px;
                    }
    
                    div.blockR {
                        input[type="number"] {
                            width:calc(100% - 28px);
                            border-top: 0px;
                            border-left: 0px;
                            border-bottom: 0px;
                            padding: 0px;
                            text-align: center;
                            height: 28px;
                            border-right:1px solid $sombre;
                        }
                    }
                }
    
                div.cohesion {
                    span {
                        width:calc(50% - 2px);
                        padding-left:2px;
                    }
    
                    div.blockR {
                        input[type="number"] {
                            width:calc(100% - 3px);
                            border: 0px;
                            padding: 0px;
                            text-align: center;
                            height: 28px;
                        }
    
                        b {
                            display:flex;
                            width:6px;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                }
    
                div.CDF {
                    input[type="number"] {
                        width:100%;
                        border: 0px;
                        padding: 0px;
                        text-align: center;
                        height: 28px;
                    }
                }
    
                div.tourCombat {
                    
                    span {
                        width: max-content;
                        line-height: 28px;
                        font-size: 14px;
                        padding-left: 2px;
                        color: $black;
                        font-weight: bold;
                        align-items: center;
                    }
                    
                    input[type="number"] {
                        width: calc(100% - 29px);
                        border: 0px;
                        padding: 0px;
                        text-align: center;
                        height: 28px;
                    }
    
     
                    
                    button[type="roll"],
                    button[type="action"] {
                        border-left:1px solid $sombre;
                    }
                }
            }
    
            div.col4BL {
                >h1.titre {
                    border-left:1px solid $white;
                }
    
                >div {
                    border-left:1px solid $sombre;
                }
            }
    
            span.specificites {
                display:inline-block;
                width:100%;
                padding:2px;
                background:$clair;
                text-align: justify;
            }
    
            div.evolutions {
                display:none;
                width:100%;
                justify-content: space-between;
                flex-wrap: wrap;
    
                div.aspects {
                    display:flex;
                    width:calc((100% / 2) - 10px);
                    background:$clair;
                    border-right:1px solid $sombre;
                    flex-wrap: wrap;
    
                    div.ligneTitre {
                        display:flex;
                        justify-content: space-between;
                        width:100%;
    
                        span {
                            display:flex;
                            line-height: 28px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
    
                            &:first-of-type {
                                width:calc(40% - 2px);
                                padding-left:2px;
                            }
    
                            &:not(:first-of-type) {
                                width:calc(60% - 1px);
                                border-left:1px solid $sombre;
                                justify-content: center;
                            }
                        }
                    }
    
                    label.ligne1 {
                        display:flex;
                        justify-content: space-between;
                        width:100%;
                        border-top:1px solid $sombre;
    
                        span {
                            display:flex;
                            width:calc(40% - 2px);
                            padding-left:2px;
                            line-height: 28px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                        }
    
                        div {
                            display:flex;
                            width:calc(60% - 1px);
                            border-left:1px solid $sombre;
    
                            input[type="number"],
                            select {
                                width: 100%;
                                text-align: center;
                                border: 0px;
                                padding: 0px;
                                height: 28px;
                            }
                            select {
                                padding-left:20px;
                            }
                        }
                    }
                }
            }
    
            >input[type="hidden"].subMenu {
                &[value="3"] {
                    & ~ div button[type="action"].evolutions {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ div.evolutions {
                        display:flex;
                    }
                }
            }
        }

        div.monkModeZen {
            $titre:(
                "titre":(
                    "hasButton":true
                )
            );
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
    
            div.titre,
            h1.titre {
                display:flex;
            }
    
            div.ligne {
                display:flex;
                justify-content: space-between;
                width:100%;
                background:$clair;
    
                span {
                    width: 70%;
                    padding-left: 2px;
                    line-height: 28px;
                    font-size: 14px;
                    color: $black;
                    font-weight: bold;
                }
                
                input[type="number"] {
                    width: 30%;
                    text-align: center;
                    border: 0px;
                    padding: 0px;
                }
            }
    
            input[type="number"].col2 {
                width: calc(100% / 2);
                text-align: center;
                padding: 0px;
                border-top:1px solid $sombre;
                border-right: 0px;
                border-bottom: 0px;
                height: 28px;
    
                &:first-of-type {
                    border-left:0px;
                }
    
                &:last-of-type {
                    border-left:1px solid $sombre;
                }
            }   
        }
    
        div.monkModeCea {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasBonusCarac":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
    
            div.titre,
            h1.titre {
                display:flex;
            }
    
            div.titre {
                border-top:1px solid $sombre;
            }

            div.borderBottom {
                border-bottom:1px solid $clair;
            }
    
            select {
                border:0px;
            }
    
            label.ligne2 {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
    
                span {
                    width: calc(50% - 2px);
                    line-height: 28px;
                    padding-left: 2px;
                    font-size: 14px;
                    font-weight:bold;
                    color:$black;
                }
    
                input[type="number"] {
                    width: 50%;
                    height:28px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    border-left:1px solid $sombre;
                    color:$black;
                }
            }
    
            label.ligne2Special {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
                border-top:1px solid $sombre;
    
                span {
                    width: calc(70% - 2px);
                    line-height: 28px;
                    padding-left: 2px;
                    font-size: 14px;
                    font-weight:bold;
                    color:$black;
                }
    
                input[type="number"] {
                    width: 30%;
                    height:28px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    border-left:1px solid $sombre;
                    color:$black;
                }
            }
    
            div.rollPJ {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
                border-top:1px solid $sombre;
    
                select {
                    width:50%;
                    padding:0px;
                    height:28px;
                    text-align: center;
    
                    &:last-of-type {
                        border-left:1px solid $sombre;
                    }
                }
            }
    
            div.bonusCarac {
                display:none;
                width: 100%;
                background: $clair;
                justify-content: space-between;
                border-top:1px solid $sombre;
                
                select {
                    display:none;
                    padding:0px;
                    height:28px;
                    text-align: center;
                }
            }
    
            input[type="hidden"].bonusCarac {
                &[value="1"] {
    
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div.bonusCarac {
                        display:flex;
    
                        select:first-of-type {
                            display:inline-block;
                            width:100%;
                        }
                    }
                }
    
                &[value="2"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1,
                        button[type="action"].bonusCaracL2 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div.bonusCarac {
                        display:flex;
                        
                        select:first-of-type {
                            display:inline-block;
                            width:50%;
                        }
                        
                        select:last-of-type {
                            display:inline-block;
                            width:50%;
                            border-left:1px solid $sombre;
                        }
                    }
                }
            }
    
            label.col4 {
                display:flex;
                width:calc(100% / 4);
                flex-wrap: wrap;
                background:$clair;
            }
    
            label.col4BL {
                display:flex;
                width:calc((100% / 4) - 1px);
                flex-wrap: wrap;
                background:$clair;
                border-left:1px solid $sombre;
            }
    
            label.col4,
            label.col4BL {
                span {
                    display:flex;
                    width:100%;
                    line-height: 28px;
                    font-size: 14px;
                    color: $black;
                    font-weight: bold;
                    justify-content: center;
                    align-items: center;
                }
                
                input[type="number"],
                input[type="text"] {
                    width:100%;
                    min-width:0px;
                    border-top:1px solid $sombre;
                    border-bottom: 0px;
                    border-left: 0px;
                    border-right: 0px;
                    padding: 0px;
                    text-align: center;
                    height: 28px;
                }
            }
    
            input[type="text"].ligne {
                width:100%;
                border-top: 1px solid $sombre;
                border-left: 0px;
                border-right: 0px;
                border-bottom: 0px;
                padding: 0px;
                text-align: center;
                height: 28px;
            }
        }

        div.paladinShrine {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasButtonActivate":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
    
            div.titre,
            h1.titre {
                display:flex;
            }
    
            label.col3 {
                display:flex;
                justify-content: space-between;
                background:$clair;
                flex-wrap: wrap;
    
                width:calc(100% / 3);
    
                span {
                    display:flex;
                    width: 100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }
    
                input[type="number"] {
                    width: 100%;
                    height: 28px;
                    border-left: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    text-align: center;
                    padding: 0px;
                    border-top: 1px solid $sombre;
                }
            }
    
            label.col3BL {
                display:flex;
                justify-content: space-between;
                background:$clair;
                flex-wrap: wrap;
    
                width:calc((100% / 3) - 1px);
                border-left:1px solid $sombre;
    
                span {
                    display:flex;
                    width: 100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }
    
                input[type="number"] {
                    width: 100%;
                    height: 28px;
                    border-left: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    text-align: center;
                    padding: 0px;
                    border-top: 1px solid $sombre;
                }
            }
    
            input[type="hidden"].active {
                &[value^="Activ"] {
                    & ~ div.titre {
                        button[type="action"].active {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
                    }
                }
            }
        }
    
        div.paladinWatchtower {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasButtonActivate":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
    
            div.titre,
            h1.titre {
                display:flex;
            }
    
            label.ligne {
                display:flex;
                justify-content: space-between;
                background:$clair;
    
                span {
                    display:flex;
                    width: calc(50% - 2px);
                    padding-left: 2px;
                    line-height: 28px;
                    font-size: 14px;
                    color: $black;
                    font-weight: bold;
                }
    
                input[type="number"] {
                    width: 50%;
                    border: 0px;
                    text-align: center;
                    height: 28px;
                }
            }
    
            input[type="hidden"].active {
                &[value^="Activ"] {
                    & ~ div.titre {
                        button[type="action"].active {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
                    }
                }
            }
        }

        div.priestMechanic {
            @include block($sombre);
            @include titre($white);
            @include buttonRoll() {
                border-left:1px solid $sombre;
            };
    
            h1.titre {
                display:flex;
            }
    
            div {
                display:flex;
                width:100%;
                justify-content: space-between;
                position:relative;
                background:$clair;
    
                span {
                    width: calc(50% - 2px);
                    padding-left: 2px;
                    line-height: 28px;
                    font-size: 14px;
                    color: #333;
                    font-weight: bold;
                }
    
                input[type="text"],
                input[type="number"] {
                    position:absolute;
                    width: calc(50% - 29px);
                    height:28px;
                    text-align: center;
                    border-top: 0px;
                    border-bottom: 0px;
                    border-right: 0px;
                    border-left:1px solid $sombre;
                    padding: 0px;
                    right:29px;
                }
    
                &:not(:first-of-type) {
                    border-top:1px solid $sombre;
                }
            }
        }
    
        div.priestNanoC {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasBonusCarac":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
    
            div.titre,
            h1.titre {
                display:flex;
            }
    
            div.titre {
                border-top:1px solid $sombre;
            }
    
            select {
                border:0px;
            }
    
            label.ligne2 {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
    
                span {
                    width: calc(50% - 2px);
                    line-height: 28px;
                    padding-left: 2px;
                    font-size: 14px;
                    font-weight:bold;
                    color:$black;
                }
    
                input[type="number"] {
                    width: 50%;
                    height:28px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    border-left:1px solid $sombre;
                    color:$black;
                }
            }
    
            div.rollPJ {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
                border-top:1px solid $sombre;
    
                select {
                    width:50%;
                    padding:0px;
                    height:28px;
                    text-align: center;
    
                    &:last-of-type {
                        border-left:1px solid $sombre;
                    }
                }
            }
    
            div.bonusCarac {
                display:none;
                width: 100%;
                background: $clair;
                justify-content: space-between;
                border-top:1px solid $sombre;
                
                select {
                    display:none;
                    padding:0px;
                    height:28px;
                    text-align: center;
                }
            }
    
            input[type="hidden"].bonusCarac {
                &[value="1"] {
    
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div.bonusCarac {
                        display:flex;
    
                        select:first-of-type {
                            display:inline-block;
                            width:100%;
                        }
                    }
                }
    
                &[value="2"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1,
                        button[type="action"].bonusCaracL2 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div.bonusCarac {
                        display:flex;
                        
                        select:first-of-type {
                            display:inline-block;
                            width:50%;
                        }
                        
                        select:last-of-type {
                            display:inline-block;
                            width:50%;
                            border-left:1px solid $sombre;
                        }
                    }
                }
            }
        }

        .psion150,
        .psion200 {
            display:none;
        }

        input[type="hidden"] {
            &.psion150PG {
                &[value="0"] {
                    & ~ div .psion150 {
                        display:none !important;
                    }
                }

                &[value="on"] {
                    & ~ div .psion150 {
                        display:flex;
                    }
                }
            }

            &.psion200PG {
                &[value="0"] {
                    & ~ div .psion200 {
                        display:none !important;
                    }
                }
                
                &[value="on"] {
                    & ~ div .psion200 {
                        display:flex;
                    }
                }
            }
        }

        div.psionPuppetMaster {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasBonusCarac":true
                ),
                "secondTitre":(
                    "actif":true,
                    "background":$clair,
                    "color":$black
                )
            );

            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();

            div.titre,
            h1.titre,
            h2.titreBis {
                display:flex;
            }

            h2.titreBis{
                border-bottom:1px solid $sombre;
            }

            select {
                border:0px;
            }

            div.rollPJ {
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
                border-bottom:1px solid $sombre;

                select {
                    width:50%;
                    padding:0px;
                    height:28px;
                    text-align: center;

                    &:last-of-type {
                        border-left:1px solid $sombre;
                    }
                }
            }

            div.bonusCarac {
                display:none;
                width: 100%;
                background: $clair;
                justify-content: space-between;
                border-bottom:1px solid $sombre;
                
                select {
                    display:none;
                    padding:0px;
                    height:28px;
                    text-align: center;
                }
            }

            input[type="hidden"].bonusCarac {
                &[value="0"] {

                    & ~ div.bonusCarac {
                        display:none;
                    }
                }

                &[value="1"] {

                    & ~ div.titre {
                        button[type="action"].bonusCaracL1 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }

                    & ~ div.bonusCarac {
                        display:flex;

                        select:first-of-type {
                            display:inline-block;
                            width:100%;
                        }
                    }
                }

                &[value="2"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1,
                        button[type="action"].bonusCaracL2 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }

                    & ~ div.bonusCarac {
                        display:flex;
                        
                        select:first-of-type {
                            display:inline-block;
                            width:50%;
                        }
                        
                        select:last-of-type {
                            display:inline-block;
                            width:50%;
                            border-left:1px solid $sombre;
                        }
                    }
                }
            }
        }

        div.psionDiscord {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasBonusCarac":true,
                    "hasButtonActivate":true
                ),
                "secondTitre":(
                    "actif":true,
                    "background":$clair,
                    "color":$black
                )
            );

            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll() {
                border-left:1px solid $sombre;
            };

            div.titre,
            h1.titre,
            h2.titreBis {
                display:flex;
            }

            select {
                border:0px;
            }

            label.ligne2 {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;

                span {
                    width: calc(50% - 2px);
                    line-height: 28px;
                    padding-left: 2px;
                    font-size: 14px;
                    font-weight:bold;
                    color:$black;
                }

                input[type="number"] {
                    width: 50%;
                    height:28px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    border-left:1px solid $sombre;
                    color:$black;
                }
            }

            div.rollPJ {
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
                border-top:1px solid $sombre;
                border-bottom:1px solid $sombre;

                select {
                    
                    padding:0px;
                    height:28px;
                    text-align: center;

                    &:first-of-type {
                        width:50%;
                    }

                    &:last-of-type {
                        width:calc(50% - 29px);
                        border-left:1px solid $sombre;
                    }
                }
            }

            div.bonusCarac {
                display:none;
                width: 100%;
                background: $clair;
                justify-content: space-between;
                border-bottom:1px solid $sombre;
                
                select {
                    display:none;
                    padding:0px;
                    height:28px;
                    text-align: center;
                }
            }

            input[type="hidden"].bonusCarac {
                &[value="0"] {

                    & ~ div.bonusCarac {
                        display:none;
                    }
                }

                &[value="1"] {

                    & ~ div.titre {
                        button[type="action"].bonusCaracL1 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }

                    & ~ div.bonusCarac {
                        display:flex;

                        select:first-of-type {
                            display:inline-block;
                            width:100%;
                        }
                    }
                }

                &[value="2"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1,
                        button[type="action"].bonusCaracL2 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }

                    & ~ div.bonusCarac {
                        display:flex;
                        
                        select:first-of-type {
                            display:inline-block;
                            width:50%;
                        }
                        
                        select:last-of-type {
                            display:inline-block;
                            width:50%;
                            border-left:1px solid $sombre;
                        }
                    }
                }
            }

            label.col3 {
                display:flex;
                width:calc(100% / 3);
                justify-content: space-between;
                flex-wrap: wrap;
                background:$clair;

                span {
                    display:flex;
                    justify-content: center;
                    width:100%;
                    line-height: 28px;
                    font-size: 14px;
                    color: $black;
                    font-weight: bold;
                }

                input[type="text"],
                input[type="number"] {
                    width: 100%;
                    border: 0px;
                    text-align: center;
                    padding: 0px;
                    height: 28px;
                    border-top:1px solid $sombre;
                }
            }

            label.col3BL {
                display:flex;
                width:calc((100% / 3) - 1px);
                justify-content: space-between;
                flex-wrap: wrap;
                background:$clair;
                border-left:1px solid $sombre;

                span {
                    display:flex;
                    justify-content: center;
                    width:100%;
                    line-height: 28px;
                    font-size: 14px;
                    color: $black;
                    font-weight: bold;
                }

                input[type="text"],
                input[type="number"] {
                    width: 100%;
                    border: 0px;
                    text-align: center;
                    padding: 0px;
                    height: 28px;
                    border-top:1px solid $sombre;
                }
            }

            input[type="hidden"].active {
                &[value^="Activ"] {
                    & ~ div.titre {
                        button[type="action"].active {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
                    }
                }
            }
        }

        div.psionWindtalker {
            $titre:(
                "secondTitre":(
                    "actif":true,
                    "background":$clair,
                    "color":$black
                )
            );

            @include block($sombre);
            @include titre($white, transparent, $titre);

            h1.titre,
            h2.titreBis {
                display:flex;
            }

            h2.titreBis {
                border-bottom:1px solid $sombre;
            }
        }

        div.rangerVision {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasBonusCarac":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
    
            div.titre,
            h1.titre {
                display:flex;
            }
    
            div.titre {
                border-bottom:0px;
            }
    
            select {
                border:0px;
            }
    
            div.rollPJ {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
                border-top:1px solid $sombre;
    
                select {
                    width:50%;
                    padding:0px;
                    height:28px;
                    text-align: center;
    
                    &:last-of-type {
                        border-left:1px solid $sombre;
                    }
                }
            }
    
            div.bonusCarac {
                display:none;
                width: 100%;
                background: $clair;
                justify-content: space-between;
                border-top:1px solid $sombre;
                
                select {
                    display:none;
                    padding:0px;
                    height:28px;
                    text-align: center;
                }
            }
    
            input[type="hidden"].bonusCarac {
                &[value="1"] {
    
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div.bonusCarac {
                        display:flex;
    
                        select:first-of-type {
                            display:inline-block;
                            width:100%;
                        }
                    }
                }
    
                &[value="2"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1,
                        button[type="action"].bonusCaracL2 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div.bonusCarac {
                        display:flex;
                        
                        select:first-of-type {
                            display:inline-block;
                            width:50%;
                        }
                        
                        select:last-of-type {
                            display:inline-block;
                            width:50%;
                            border-left:1px solid $sombre;
                        }
                    }
                }
            }
        }

        div.rangerLongbow {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasBonusCarac":true
                ),
                "secondTitre":(
                    "actif":true,
                    "color":$black,
                    "background":$clair
                )
            );
    
            $subMenu: (
                "color":$white,
                "background":transparent,
                "borderColor":$black,
                "fontSize":12px,
                "fontBold":true,
    
                "button":(
                    "width":calc(100% / 2),
                    "widthBL":calc((100% / 2) - 1px),
                    "height":23px
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
            @include subMenu("subMenu", $subMenu);
    
            >div.titre {
                display:flex;
    
                h1.titre {
                    display:flex;
                }
            }
    
            div.data,
            div.bonus,
            div.bonusCarac,
            label.pilonnage,
            .PG50,
            .PG50_2,
            .PG100 {
                display:none;
            }
    
            div.col5,
            div.col5BL,
            div.col5LargeBL {
                display:flex;
                flex-wrap: wrap;
                background:$clair;
    
                span {
                    display:flex;
                    width:100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }
    
                select {
                    border-top:1px solid $sombre;
                    text-align: center;
                    border-right: 0px;
                    border-left: 0px;
                    border-bottom: 0px;
                    margin: 0px;
                    padding: 0px;
                }
            }
    
            div.col5 {
                width:calc(100% / 5);
            }
    
            div.col5,
            div.col5BL {
                select {
                    width:100%;
                }
            }
    
            div.col5BL {
                width:calc((100% / 5) - 1px);
            }
    
            div.col5BL,
            div.col5LargeBL {
                border-left:1px solid $sombre;
            }
    
            div.col5LargeBL {
                width:calc(((100% / 5) * 2) - 1px);
    
                select {
                    width:calc(100% / 2);
    
                    &:last-of-type {
                        border-left:1px solid $sombre;
                    }
                }
            }
    
            div.eCol3,
            div.eCol3BL {
                flex-wrap: wrap;
                
                border-top:1px solid $clair;
    
                h1.titre {
                    background:$sombre;
                }
    
                h1.notPG100 {
                    display:flex;
                }
    
    
                div.rangerBEffet {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "width":100%,
                            "height":23px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
    
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };
    
                    width:100%;
                    flex-wrap: wrap;
                    justify-content: space-evenly;
                    background:$clair;
    
                    label.simple {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
        
                    div.double {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        label.fakeButton {
                            width:calc(100% - 30px);
                            border:0px;
        
                            input[type="checkbox"] {
                                &:not(:checked) {
                                    & ~ span::before {
                                        background:$clair;
                                        color:$black;
                                    }
                                }
                            }
                        }
        
                        input[type="number"] {
                            width: 30px;
                            height: 23px;
                            text-align: center;
                            border-top: 0px;
                            border-right: 0px;
                            border-left: 1px solid $black;
                            border-bottom: 0px;
                            border-radius: 0px;
                            padding: 0px;
                        }
                    }
                }
    
                
            }
    
            div.eCol3,
            div.eCol3BL {
                width:calc(100% / 2);
            }
    
            div.eCol3BL {   
    
                h1.titre {
                    border-left:1px solid $clair;
                }
    
                div.rangerBEffet {
                    border-left:1px solid $sombre;
                }            
            }
    
            div.bonus {
                width:100%;
                justify-content: flex-end;
                flex-wrap: wrap;
            }
    
            div.bonusCarac {
                display:none;
                width: calc(((100% / 5) *2) - 1px);
                background: $clair;
                justify-content: space-between;
                border-top:1px solid $sombre;
                border-left:1px solid $sombre;
                
                select {
                    display:none;
                    border:0px;
                    padding:0px;
                    height:28px;
                    text-align: center;
                }
            }
    
            label.pilonnage {
                display:none;
                width: calc(40%);
                background: $clair;
                justify-content: space-between;
                border-top:1px solid $sombre;
    
                span {
                    width: calc((100% / 2) - 2px);
                    padding-left: 2px;
                    line-height: 27px;
                    font-size: 14px;
                    color: $black;
                    font-weight: bold;
                }
    
                input[type="number"] {
                    width:calc(100% / 2);
                    border:0px;
                    padding:0px;
                    height:28px;
                    text-align: center;
                    border-left:1px solid $sombre;
                }
            }
    
            label.pilonnageDetails {
                display:none;
                width:calc(60% - 1px);
                border-left:1px solid $sombre;
                background: $clair;
                justify-content: space-between;
                border-top:1px solid $sombre;
    
                span {
                    width: max-content;
                    padding-left: 2px;
                    line-height: 27px;
                    font-size: 14px;
                    color: $black;
                    font-weight: bold;
                    
                }
    
                select {
                    width:calc((100% / 3) - 0.5px);
                    border:0px;
                    padding:0px;
                    height:28px;
                    text-align: center;
                    border-left:1px solid $sombre;
                    padding-left:15px;
                }
            }
    
            label.cadence {
                display:none;
                width:calc(60% - 1px);
                background: $clair;
                justify-content: space-between;
                border-top:1px solid $sombre;
                border-left:1px solid $sombre;
    
                span {
                    width: max-content;
                    padding-left: 2px;
                    line-height: 27px;
                    font-size: 14px;
                    color: $black;
                    font-weight: bold;
                }
    
                select {
                    width:calc((100% / 3) - 0.5px);
                    border:0px;
                    padding:0px;
                    padding-left:15px;
                    height:28px;
                    text-align: center;
                    border-left:1px solid $sombre;
                }
            };
    
            div.ameliorationsArmes,
            div.special {
                $fakeButton: (
                    "label":(
                        "width":100%,
                        "height":23px
                    ),
                    "span": (
                        "width":100%,
                        "height":23px,
                        "background":$sombre,
                        "color":$white,
                        "border":false
                    ),
                    "shadow":false
                );
    
                @include fakeButton($fakeButton) {
                    font-size:12px;
                };
                
                display:none;
                width:100%;
                background:$clair;
                justify-content: space-evenly;
                flex-wrap: wrap;
    
                label.simple {
                    justify-content: space-between;
                    width:150px;
                    height:23px;
                    margin:2px;
                    border:1px solid $black;
    
                    input[type="checkbox"] {
                        &:not(:checked) {
                            & ~ span::before {
                                background:$clair;
                                color:$black;
                            }
                        }
                    }
                }
    
                div.double {
                    justify-content: space-between;
                    width:150px;
                    height:23px;
                    margin:2px;
                    border:1px solid $black;
    
                    label.fakeButton {
                        width:calc(100% - 30px);
                        border:0px;
    
                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
    
                    input[type="number"] {
                        width: 30px;
                        height: 23px;
                        text-align: center;
                        border-top: 0px;
                        border-right: 0px;
                        border-left: 1px solid $black;
                        border-bottom: 0px;
                        border-radius: 0px;
                        padding: 0px;
                    }
                }
    
                div.doubleTexte {
                    width:150px;
                    height:46px;
                    margin:2px;
                    flex-wrap: wrap;
                    border:1px solid $black;
    
                    input[type="checkbox"] {
                        &:not(:checked) {
                            & ~ span::before {
                                background:$clair;
                                color:$black;
                            }
                        }
                    }
    
                    input[type="text"] {
                        width: 100%;
                        height: 23px;
                        text-align: center;
                        border-top: 1px solid black;
                        border-right: 0px;
                        border-left: 0px;
                        border-bottom: 0px;
                        border-radius: 0px;
                        padding: 0px;
                    }
                }
    
                div.triple {
                    width:150px;
                    height:46px;
                    margin:2px;
                    flex-wrap: wrap;
                    border:1px solid $black;
    
                    div {
                        input[type="number"] {
                            width: calc(50% - 14px);
                            height: 23px;
                            border-radius: 0px;
                            padding: 0px;
                            border-bottom:0px;
                            border-right:0px;
                            border-left:0px;
                            border-top:1px solid $black;
                            color:$black;
    
                            &.R {
                                text-align:left;
                                border-left:1px solid $black;
                            }
    
                            &.L {
                                text-align:right;
                                border-right:1px solid $black;
                            }
                        }
    
                        span {
                            display:flex;
                            background:$sombre;
                            width: 28px;
                            height: 22px;
                            align-items: center;
                            justify-content: center;
                            font-size: 14px;
                            font-weight: bold;
                            color: $white;
                            border-top: 1px solid $black;
                        }
                        
                    }
    
                    input[type="hidden"] {
                        &[value="0"] {
                            & ~ label span::before,
                            & ~ div span {
                                background:$clair;
                                color:$black;
                            }
                        }
                    }
                }
            }
    
            input[type="hidden"].subMenu {
                &[value="1"] {
                    & ~ div button[type="action"].ameliorationsArmes {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ div.ameliorationsArmes {
                        display:flex;
                    }
                }
    
                &[value="2"] {
                    & ~ div button[type="action"].special {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ div.special {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].bonusCarac {
                &[value="1"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div.bonus {
                        display:flex;
    
                        label.pilonnage,
                        label.pilonnageDetails {
                            span {
                                border-right:1px solid $sombre;
                            }
    
                            input[type="number"] {
                                border-left:0px;
                            }
                        }
                    }
    
                    & ~ div div.bonusCarac {
                        display:flex;
    
                        select:first-of-type {
                            display:inline-block;
                            width:100%;
                        }
                    }
                }
    
                &[value="2"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1,
                        button[type="action"].bonusCaracL2 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div.bonus {
                        display:flex;
    
                        label.pilonnage,
                        label.pilonnageDetails {
                            span {
                                border-right:1px solid $sombre;
                            }
    
                            input[type="number"] {
                                border-left:0px;
                            }
                        }
                    }
    
                    & ~ div div.bonusCarac {
                        display:flex;
                        
                        select:first-of-type {
                            display:inline-block;
                            width:50%;
                        }
                        
                        select:last-of-type {
                            display:inline-block;
                            width:50%;
                            border-left:1px solid $sombre;
                        }
                    }
                }
            }
    
            input[type="hidden"].styleCombat {
                &[value="pilonnage"] {
                    & ~ div.bonus {
                        display:flex;
                    }
    
                    & ~ div label.pilonnage {
                        display:flex;
                    }
    
                    & ~ div label.pilonnageDetails {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].PG50 {
                &[value="on"] {
                    & ~ div.eCol3,
                    & ~ div.eCol3BL {
                        width:calc(100% / 3);
                    }
    
                    & ~ div.PG50,
                    & ~ div .PG50 {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].PG50_2 {
                &[value="on"] {
                    & ~ .PG50_2,
                    & ~ div .PG50_2 {
                        display:flex;
                    }
    
                    & ~ .notPG50_2,
                    & ~ div .notPG50_2 {
                        display:none;
                    }
                }
            }
    
            input[type="hidden"].PG100 {
                &[value="on"] {
                    & ~ .PG100,
                    & ~ div .PG100 {
                        display:flex;
                    }
    
                    & ~ .notPG100,
                    & ~ div .notPG100 {
                        display:none;
                    }
                }
            }

            input[type="hidden"] {
                &.cadence {
                    &:not([value="0"]) {
                        & ~ div.bonus {
                            display:flex;
    
                            label.cadence {
                                display:flex;
                            }
                        }
                    }
                }
            }
        }

        div.rogueGhost {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasBonusCarac":true,
                    "hasButtonActivate":true
                ),
                "secondTitre":(
                    "actif":true,
                    "background":$clair,
                    "color":$black
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll() {
                border-left:1px solid $sombre;
            };
    
            div.titre,
            h1.titre {
                display:flex;
            }
    
            select {
                border:0px;
            }
    
            label.ligne2 {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
    
                span {
                    width: calc(50% - 2px);
                    line-height: 28px;
                    padding-left: 2px;
                    font-size: 14px;
                    font-weight:bold;
                    color:$black;
                }
    
                input[type="number"] {
                    width: 50%;
                    height:28px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    border-left:1px solid $sombre;
                    color:$black;
                }
            }
    
            div.rollPJ {
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
                border-top:1px solid $sombre;
    
                select {
                    
                    padding:0px;
                    height:28px;
                    text-align: center;
    
                    &:first-of-type {
                        width:50%;
                    }
    
                    &:last-of-type {
                        width:calc(50% - 29px);
                        border-left:1px solid $sombre;
                    }
                }
            }
    
            div.bonusCarac {
                display:none;
                width: 100%;
                background: $clair;
                justify-content: space-between;
                border-top:1px solid $sombre;
                
                select {
                    display:none;
                    padding:0px;
                    height:28px;
                    text-align: center;
                }
            }
    
            input[type="hidden"].bonusCarac {
                &[value="0"] {
    
                    & ~ div.bonusCarac {
                        display:none;
                    }
                }
    
                &[value="1"] {
    
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div.bonusCarac {
                        display:flex;
    
                        select:first-of-type {
                            display:inline-block;
                            width:100%;
                        }
                    }
                }
    
                &[value="2"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1,
                        button[type="action"].bonusCaracL2 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div.bonusCarac {
                        display:flex;
                        
                        select:first-of-type {
                            display:inline-block;
                            width:50%;
                        }
                        
                        select:last-of-type {
                            display:inline-block;
                            width:50%;
                            border-left:1px solid $sombre;
                        }
                    }
                }
            }
    
            input[type="hidden"].active {
                &[value^="{{modeGhost"] {
                    & ~ div.titre {
                        button[type="action"].active {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
                    }
                }
            }
        }

        div.shamanImpregnation,
        div.jet {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasBonusCarac":true
                )
            );

            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();

            div.titre,
            h1.titre {
                display:flex;
            }

            select {
                border:0px;
            }

            label.ligne2 {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;

                span {
                    width: calc(50% - 2px);
                    line-height: 28px;
                    padding-left: 2px;
                    font-size: 14px;
                    font-weight:bold;
                    color:$black;
                }

                input[type="number"] {
                    width: 50%;
                    height:28px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    border-left:1px solid $sombre;
                    color:$black;
                }
            }

            div.rollPJ {
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
                border-top:1px solid $sombre;

                select {
                    width:50%;
                    padding:0px;
                    height:28px;
                    text-align: center;

                    &:last-of-type {
                        border-left:1px solid $sombre;
                    }
                }
            }

            div.rollPNJ {
                width: 100%;
                background: $clair;
                justify-content: space-between;
                border-top:1px solid $sombre;

                select {
                    width:100%;
                    padding:0px;
                    height:28px;
                    text-align: center;
                }
            }

            div.bonusCarac {
                display:none;
                width: 100%;
                background: $clair;
                justify-content: space-between;
                border-top:1px solid $sombre;
                
                select {
                    display:none;
                    padding:0px;
                    height:28px;
                    text-align: center;
                }
            }

            input[type="hidden"].bonusCarac {
                &[value="1"] {

                    & ~ div.titre {
                        button[type="action"].bonusCaracL1 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }

                    & ~ div.bonusCarac {
                        display:flex;

                        select:first-of-type {
                            display:inline-block;
                            width:100%;
                        }
                    }
                }

                &[value="2"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1,
                        button[type="action"].bonusCaracL2 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }

                    & ~ div.bonusCarac {
                        display:flex;
                        
                        select:first-of-type {
                            display:inline-block;
                            width:50%;
                        }
                        
                        select:last-of-type {
                            display:inline-block;
                            width:50%;
                            border-left:1px solid $sombre;
                        }
                    }
                }
            }
        }

        div.shamanTotem {
            @include block($sombre);
            @include titre($white);

            h1.titre {
                display:flex;
            }

            label.ligne2 {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
                border-top:1px solid $sombre;

                span {
                    width: calc(50% - 2px);
                    line-height: 28px;
                    padding-left: 2px;
                    font-size: 14px;
                    font-weight:bold;
                    color:$black;
                }

                input[type="number"],
                select {
                    width: 50%;
                    height:28px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    border-left:1px solid $sombre;
                    color:$black;
                }
            }

            label.totem1,
            label.totem2,
            label.totem3 {
                display:none;
            }


            input[type="hidden"].nbreTotem {
                &[value="1"] {
                    & ~ label.totem1 {
                        display:flex;
                    }
                }

                &[value="2"] {
                    & ~ label.totem1,
                    & ~ label.totem2 {
                        display:flex;
                    }
                }

                &[value="3"] {
                    & ~ label.totem1,
                    & ~ label.totem2,
                    & ~ label.totem3 {
                        display:flex;
                    }
                }
            }
        }

        div.shamanAscension {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasButtonActivate":true
                )
            );

            @include block($sombre);
            @include titre($white, transparent, $titre);

            div.titre,
            h1.titre {
                display:flex;
            }

            input[type="number"] {
                width: 100%;
                border: 0px;
                padding: 0px;
                text-align: center;
                height: 28px;
            }

            div.ligneTitre {
                display:none;
                width:100%;
                justify-content: space-between;
                background:$clair;
                border-top:1px solid $sombre;

                span {
                    display:flex;
                    line-height: 28px;
                    font-size: 14px;
                    color: $black;
                    font-weight: bold;
                    justify-content: center;
                    align-items:center;

                    &:first-of-type {
                        padding-left: 2px;
                        width: calc(31% - 2px);
                    }

                    &:not(:first-of-type) {
                        width: calc(23% - 1px);
                        border-left:1px solid $sombre;
                    }
                }
            }

            label.ligne2 {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;

                span {
                    width: calc(50% - 2px);
                    line-height: 28px;
                    padding-left: 2px;
                    font-size: 14px;
                    font-weight:bold;
                    color:$black;
                }

                input[type="number"] {
                    width: 50%;
                    height:28px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    border-left:1px solid $sombre;
                    color:$black;
                }
            }

            div.ligne3 {
                display:none;
                width:100%;
                justify-content: space-between;
                background:$clair;
                border-top:1px solid $sombre;

                span {
                    display:flex;
                    line-height: 28px;
                    font-size: 14px;
                    color: $black;
                    font-weight: bold;
                    padding-left: 2px;
                    width: calc(31% - 2px);
                }

                div {
                    width: calc(23% - 1px);
                    border-left:1px solid $sombre;
                }
            }

            input[type="hidden"].active {
                &[value^="1"] {
                    & ~ div.ligne3,
                    & ~ div.ligneTitre {
                            display:flex;
                    }

                    & ~ div.titre {
                        button[type="action"].active {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
                    }
                }
            }
        }

        div.sorcererMorph {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasBonusCarac":true,
                    "hasButtonActivate":true
                ),
                "secondTitre":(
                    "actif":true,
                    "background":$clair,
                    "color":$black,
                    "hasButton":true,
                    "hasBonusCarac":true
                )
            );
    
            $fakeButton: (
                "label":(
                    "width":102px,
                    "height":27px
                ),
                "span": (
                    "height":27px,
                    "background":$sombre,
                    "color":$white,
                    "border":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll() {
                border-left:1px solid $sombre;
            };
            @include fakeButton($fakeButton) {
                margin-left:auto;
            };
    
            div.titre,
            h1.titre,
            div.titreBis,
            h2.titreBis {
                display:flex;
            }
    
            select {
                border:0px;
            }
    
            label.ligne2 {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
    
                span {
                    width: calc(50% - 2px);
                    line-height: 28px;
                    padding-left: 2px;
                    font-size: 14px;
                    font-weight:bold;
                    color:$black;
                }
    
                input[type="number"] {
                    width: 50%;
                    height:28px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    border-left:1px solid $sombre;
                    color:$black;
                }
            }
    
            div.rollPJ {
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
                border-top:1px solid $sombre;
    
                select {
                    width:50%;
                    padding:0px;
                    height:28px;
                    text-align: center;
    
                    &:last-of-type {
                        border-left:1px solid $sombre;
                    }
                }
            }
    
            div.bonusCarac {
                display:none;
                width: 100%;
                background: $clair;
                justify-content: space-between;
                border-top:1px solid $sombre;
                
                select {
                    display:none;
                    padding:0px;
                    height:28px;
                    text-align: center;
                }
            }
    
            label.col2 {
                display:flex;
                flex-wrap: wrap;
                width:calc(100% / 2);
                background:$clair;
                border-top:1px solid $sombre;
    
                span {
                    display:flex;
                    width:100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }
    
                input[type="text"],
                input[type="number"] {
                    width: 100%;
                    border-top: 1px solid $sombre;
                    border-left: 0px;
                    border-bottom: 0px;
                    border-right:0px;
                    text-align: center;
                    padding: 0px;
                    height: 29px;
                }
            }
    
            label.col2BL {
                display:flex;
                flex-wrap: wrap;
                width:calc((100% / 2) - 1px);
                border-left:1px solid $sombre;
                background:$clair;
                border-top:1px solid $sombre;
    
                span {
                    display:flex;
                    width:100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }
    
                input[type="text"],
                input[type="number"] {
                    width: 100%;
                    border-top: 1px solid $sombre;
                    border-left: 0px;
                    border-bottom: 0px;
                    border-right:0px;
                    text-align: center;
                    padding: 0px;
                    height: 29px;
                }
            }
    
            .borderCTop {
                border-top:1px solid $clair;
            }
    
            .borderSBottom {
                border-bottom:1px solid $sombre;
            }
    
            .borderS {
                border-bottom:1px solid $sombre;
                border-top:1px solid $sombre;
            }
    
            button[type="action"].PG250 {
                display:none;
            }
    
            input[type="hidden"].bonusCarac {
                &[value="0"] {
    
                    & ~ div.bonusCarac {
                        display:none;
                    }
                }
    
                &[value="1"] {
    
                    & ~ div.titre,
                    & ~ div.titreBis {
                        button[type="action"].bonusCaracL1 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div.bonusCarac {
                        display:flex;
    
                        select:first-of-type {
                            display:inline-block;
                            width:100%;
                        }
                    }
                }
    
                &[value="2"] {
                    & ~ div.titre,
                    & ~ div.titreBis {
                        button[type="action"].bonusCaracL1,
                        button[type="action"].bonusCaracL2 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div.bonusCarac {
                        display:flex;
                        
                        select:first-of-type {
                            display:inline-block;
                            width:50%;
                        }
                        
                        select:last-of-type {
                            display:inline-block;
                            width:50%;
                            border-left:1px solid $sombre;
                        }
                    }
                }
            }
    
            input[type="hidden"].sorcerer250 {
                &[value="on"] {
                    & ~ div button[type="action"].PG250 {
                        display:flex;
                    }
    
                    & ~ div label.not250PG {
                        display:none;
                    }
                }
            }
    
            input[type="hidden"].activateModeMorph250 {
                &[value="1"] {
                    & ~ div button[type="action"].active {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
                }
            }
        }

        div.warlockForward,
        div.warlockRewind {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasButtonActivate":true
                ),
                "secondTitre":(
                    "actif":true,
                    "background":$sombre,
                    "color":$white
                )
            );

            @include block($sombre);
            @include titre($white, transparent, $titre);

            div.titre,
            h1.titre {
                display:flex;
            }

            input[type="hidden"].active {
                &[value="1"] {
                    & ~ div button[type="action"].active {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
                }
            }
        }

        div.warlockForward {
            div.titre {
                border-bottom:0px;
            }
        }

        div.warlockRecord {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasButtonActivate":true
                ),
                "secondTitre":(
                    "actif":true,
                    "background":$sombre,
                    "color":$white
                )
            );

            @include block($sombre);
            @include titre($white, transparent, $titre);

            div.titre,
            h1.titre {
                display:flex;
            }

            label.ligne2 {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;

                span {
                    width: calc(50% - 2px);
                    line-height: 28px;
                    padding-left: 2px;
                    font-size: 14px;
                    font-weight:bold;
                    color:$black;
                }

                input[type="number"] {
                    width: 50%;
                    height:28px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    border-left:1px solid $sombre;
                    color:$black;
                }

                &:not(:first-of-type) {
                    border-top:1px solid $sombre;
                }
            }

            input[type="hidden"].active {
                &[value="1"] {
                    & ~ div button[type="action"].active {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
                }
            }
        }

        div.warlockContrecoups {
            $titre:(
                "titre":(
                    "hasButton":true
                )
            );

            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();

            div.titre,
            h1.titre {
                display:flex;
            }

            div.titre {
                border-bottom:0px;
            }
        }

        div.warmasterFalcon {
            $titre:(
                "secondTitre":(
                    "actif":true,
                    "background":$clair,
                    "color":$black
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            
            h1.titre,
            h2.titreBis {
                display:flex;
            }
    
            h2.titreBis {
                border-bottom:1px solid $sombre;
            }
        }
    
        div.warmasterWarlord {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasButtonActivate":true,
                    "hasButtonPersonnel":true
                ),
                "secondTitre":(
                    "actif":true,
                    "background":$clair,
                    "color":$black
                )
            );
    
            $fakeButton: (
                "label":(
                    "width":102px,
                    "height":27px
                ),
                "span": (
                    "height":27px,
                    "background":$sombre,
                    "color":$white,
                    "border":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include fakeButton($fakeButton);
            @include buttonSelect();
    
            h1.titre {
                display:flex;
            }
    
            h2.titreBis {
                border-bottom:1px solid $sombre;
            }
    
            div.energie {
                border-bottom:0px;
            }
    
            div.action {
                border-bottom:1px solid $clair;
                border-top:1px solid $clair;
            }
    
            label.ligne2 {
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
    
                span {
                    width: calc(50% - 2px);
                    line-height: 28px;
                    padding-left: 2px;
                    font-size: 14px;
                    font-weight:bold;
                    color:$black;
                }
    
                input[type="number"] {
                    width: 50%;
                    height:28px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    border-left:1px solid $sombre;
                    color:$black;
                }
    
                &:not(:first-of-type) {
                    border-top:1px solid $sombre;
                }
            }
    
            label.col2 {
                justify-content: space-between;
                background:$clair;
                flex-wrap: wrap;
    
                width:calc(100% / 2);
    
                span {
                    display:flex;
                    width: 100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }
    
                input[type="number"],
                input[type="text"] {
                    width: 100%;
                    height: 28px;
                    border-left: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    text-align: center;
                    padding: 0px;
                    border-top: 1px solid $sombre;
                }
            }
    
            label.col2BL {
                justify-content: space-between;
                background:$clair;
                flex-wrap: wrap;
    
                width:calc((100% / 2) - 1px);
                border-left:1px solid $sombre;
    
                span {
                    display:flex;
                    width: 100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }
    
                input[type="number"],
                input[type="text"] {
                    width: 100%;
                    height: 28px;
                    border-left: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    text-align: center;
                    padding: 0px;
                    border-top: 1px solid $sombre;
                }
            }
    
            .action,
            .esquive,
            .force,
            .guerre,
            .energie {
                display:none;
            }
    
            input[type="hidden"].active {
                &[value="on"] {
                    & ~ button[type="action"].active {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
                }
            }
    
            input[type="hidden"].personnel {
                &[value="on"] {
                    & ~ button[type="action"].personnel {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
                }
            }
    
            input[type="hidden"].action {
                &[value="on"] {
                    & ~ div.button button[type="action"].action {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ .action {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].esquive {
                &[value="on"] {
                    & ~ div.button button[type="action"].esquive {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ .esquive {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].force {
                &[value="on"] {
                    & ~ div.button button[type="action"].force {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ .force {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].guerre {
                &[value="on"] {
                    & ~ div.button button[type="action"].guerre {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ .guerre {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].energie {
                &[value="on"] {
                    & ~ div.button button[type="action"].energie {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ .energie {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].PG200 {
                &[value="on"] {
                    & ~ div.button,
                    & ~ h2.titreBis {
                        display:none;
                    }
    
                    & ~ .action {
                        border-top:1px solid $clair;
                    }
    
                    & ~ .action,
                    & ~ .esquive,
                    & ~ .force,
                    & ~ .guerre,
                    & ~ .energie {
                        display:flex;
                    }
                }
            }
        }

        div.warriorTypes {
            $titre:(
                "titre":(
                    "hasButton":true
                ),
                "secondTitre":(
                    "actif":true,
                    "background":$clair,
                    "color":$black
                )
            );
    
            $fakeButton: (
                "label":(
                    "width":100px,
                    "height":27px
                ),
                "span": (
                    "height":27px,
                    "background":$sombre,
                    "color":$white,
                    "border":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include fakeButton($fakeButton) {
                margin-left:auto;
            };
            @include buttonSelect();
    
            h1.titre,
            h2.titreBis {
                display:flex;
            }

            h1.borderBottom {
                border-bottom:1px solid $clair;
            }
    
            h2.titreBis {
                border-bottom:1px solid $sombre;
            }
    
            label.col3 {
                justify-content: space-between;
                background:$clair;
                flex-wrap: wrap;
    
                width:calc(100% / 3);
    
                span {
                    display:flex;
                    width: 100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }
    
                input[type="number"],
                input[type="text"] {
                    width: 100%;
                    height: 28px;
                    border-left: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    text-align: center;
                    padding: 0px;
                    border-top: 1px solid $sombre;
                }
            }
    
            label.col3BL {
                justify-content: space-between;
                background:$clair;
                flex-wrap: wrap;
    
                width:calc((100% / 3) - 1px);
                border-left:1px solid $sombre;
    
                span {
                    display:flex;
                    width: 100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }
    
                input[type="number"],
                input[type="text"] {
                    width: 100%;
                    height: 28px;
                    border-left: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    text-align: center;
                    padding: 0px;
                    border-top: 1px solid $sombre;
                }
            }
    
            .soldier,
            .hunter,
            .scholar,
            .herald,
            .scout {
                display:none;
            }
    
            input[type="hidden"].soldier {
                &[value="on"] {
                    & ~ div.button button[type="action"].soldier {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ .soldier {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].hunter {
                &[value="on"] {
                    & ~ div.button button[type="action"].hunter {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ .hunter {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].scholar {
                &[value="on"] {
                    & ~ div.button button[type="action"].scholar {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ .scholar {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].herald {
                &[value="on"] {
                    & ~ div.button button[type="action"].herald {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ .herald {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].scout {
                &[value="on"] {
                    & ~ div.button button[type="action"].scout {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
    
                    & ~ .scout {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].PG200 {
                &[value="on"] {
                    & ~ .soldier,
                    & ~ .hunter,
                    & ~ .scholar,
                    & ~ .herald,
                    & ~ .scout {
                        display:flex;
                    }
    
                    & ~ h1.titre {
                        border-bottom:1px solid $clair;
                    }
    
                    & ~ h2.titreBis,
                    & ~ div.button {
                        display:none;
                    }
                }
            }
        }

        div.wizardBorealis {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasBonusCarac":true,
                    "hasButtonActivate":true
                ),
                "secondTitre":(
                    "actif":true,
                    "background":$clair,
                    "color":$black,
                    "hasButton":true
                )
            );

            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();

            div.titre,
            h1.titre,
            div.titreBis,
            h2.titreBis {
                display:flex;
            }

            select {
                border:0px;
            }

            label.ligne2 {
                display:flex;
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;

                span {
                    width: calc(50% - 2px);
                    line-height: 28px;
                    padding-left: 2px;
                    font-size: 14px;
                    font-weight:bold;
                    color:$black;
                }

                input[type="number"],
                select {
                    width: 50%;
                    height:28px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    border-left:1px solid $sombre;
                    color:$black;
                }
            }

            div.rollPJ {
                width: 100%;
                background: $clair;
                font-size: 14px;
                justify-content: space-between;
                border-top:1px solid $sombre;

                select {
                    width:50%;
                    padding:0px;
                    height:28px;
                    text-align: center;

                    &:last-of-type {
                        border-left:1px solid $sombre;
                    }
                }
            }

            div.bonusCarac {
                display:none;
                width: 100%;
                background: $clair;
                justify-content: space-between;
                border-top:1px solid $sombre;
                
                select {
                    display:none;
                    padding:0px;
                    height:28px;
                    text-align: center;
                }
            }

            label.col3 {
                justify-content: space-between;
                background:$clair;
                flex-wrap: wrap;

                width:calc(100% / 3);
                border-top:1px solid $sombre;

                span {
                    display:flex;
                    width: 100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }

                input[type="number"],
                input[type="text"] {
                    width: 100%;
                    height: 28px;
                    border-left: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    text-align: center;
                    padding: 0px;
                    border-top: 1px solid $sombre;
                }
            }

            label.col3BL {
                justify-content: space-between;
                background:$clair;
                flex-wrap: wrap;

                width:calc((100% / 3) - 1px);
                border-left:1px solid $sombre;
                border-top:1px solid $sombre;

                span {
                    display:flex;
                    width: 100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }

                input[type="number"],
                input[type="text"] {
                    width: 100%;
                    height: 28px;
                    border-left: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    text-align: center;
                    padding: 0px;
                    border-top: 1px solid $sombre;
                }
            }

            .borderTop {
                border-top:1px solid $sombre;
            }

            button[type="action"].rollDice {
                border-left:1px solid $sombre;
            }

            input[type="hidden"].active {
                &[value="on"] {
                    & ~ div button[type="action"].active {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
                }
            }

            input[type="hidden"].bonusCarac {
                &[value="1"] {

                    & ~ div.titre {
                        button[type="action"].bonusCaracL1 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }

                    & ~ div.bonusCarac {
                        display:flex;

                        select:first-of-type {
                            display:inline-block;
                            width:100%;
                        }
                    }
                }

                &[value="2"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1,
                        button[type="action"].bonusCaracL2 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }

                    & ~ div.bonusCarac {
                        display:flex;
                        
                        select:first-of-type {
                            display:inline-block;
                            width:50%;
                        }
                        
                        select:last-of-type {
                            display:inline-block;
                            width:50%;
                            border-left:1px solid $sombre;
                        }
                    }
                }
            }

            input[type="text"] {
                width:100%;
                text-align: center;
                border-top:1px solid $sombre;
                border-left:0px;
                border-right:0px;
                border-bottom:0px;
            }
        }
    
        div.wizardOriflamme {
            $titre:(
                "titre":(
                    "hasButton":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
    
            div.titre,
            h1.titre {
                display:flex;
            }
    
            select {
                border:0px;
            }
    
            label.col3 {
                justify-content: space-between;
                background:$clair;
                flex-wrap: wrap;
    
                width:calc(100% / 3);
    
                span {
                    display:flex;
                    width: 100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }
    
                input[type="number"],
                input[type="text"] {
                    width: 100%;
                    height: 28px;
                    border-left: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    text-align: center;
                    padding: 0px;
                    border-top: 1px solid $sombre;
                }
            }
    
            label.col3BL {
                justify-content: space-between;
                background:$clair;
                flex-wrap: wrap;
    
                width:calc((100% / 3) - 1px);
                border-left:1px solid $sombre;
    
                span {
                    display:flex;
                    width: 100%;
                    line-height: 28px;
                    font-size: 14px;
                    justify-content: center;
                    color: $black;
                    font-weight: bold;
                    align-items: center;
                }
    
                input[type="number"],
                input[type="text"] {
                    width: 100%;
                    height: 28px;
                    border-left: 0px;
                    border-right: 0px;
                    border-bottom: 0px;
                    text-align: center;
                    padding: 0px;
                    border-top: 1px solid $sombre;
                }
            }
    
            .wizard250 {
                display:none;
            }
    
            div.autoex {
                border-top:1px solid $sombre;
            }
    
            input[type="hidden"].PG250 {
                &[value="on"] {
                    & ~ div button[type="roll"].wizard250,
                    & ~ div button[type="action"].wizard250 {
                        display:flex;
                    }
    
                    & ~ div button[type="roll"].wizardNot250,
                    & ~ div button[type="action"].wizardNot250 {
                        display:none;
                    }
                }
            }
        }

        div.MAL {
            @include block(transparent, $sombre, true);

            justify-content: space-between;
    
            >h1.titre {
                display:flex;
                width: 100%;
                align-content: baseline;
                background: $sombre;
                color: $white;
                line-height: 28px;
                min-height: 28px;
                justify-content: center;
                font-size: 14px;
                border-bottom:1px solid $clair;
            }

            div.information {
                @include block($sombre);
                @include titre($white);
        
                width:100%;
                flex-wrap: wrap;
                
                h1.titre {
                    display:flex;
                }
        
                div.autoex {
                    textarea {
                        background:$clair;
                    }
                }
            }
    
            div.MALPriest,
            div.MALPsion,
            div.MALShaman,
            div.MALWarlock,
            div.MALWarmaster {
                width:100%;
    
                >div {
                    border-top:0px;
                }
            }
    
            div.druidModJetCompagnons {
                border-top:0px;
                border-bottom:0px;
            }
    
            div.MALDCompagnon {
                button[type="action"].lion,
                button[type="action"].wolf,
                button[type="action"].crow {
                    display:none;
                }
    
                input[type="hidden"].legendeChoisie {
                    &[value="1"] {
                        & ~ div.button {
                            button[type="action"].lion {
                                display:flex;
                            }
                        }
                    }
    
                    &[value="2"] {
                        & ~ div.button {
                            button[type="action"].wolf {
                                display:flex;
                            }
                        }
                    }
    
                    &[value="3"] {
                        & ~ div.button {
                            button[type="action"].crow {
                                display:flex;
                            }
                        }
                    }
                }
            }
    
            div.MALPaladin,
            div.MALRanger,
            div.MALWarrior,
            div.MALWizard {
                border-top:0px;
            }
    
            div.MALPriest {
                >div {
                    display:none;
                }
    
                input[type="hidden"].legendeChoisie {
                    &[value="1"] {
                        & ~ div.priestMechanic {
                            display:flex;
    
                            div.titre {
                                border-top:0px;
                            }
                        }
                    }
    
                    &[value="2"] {
                        & ~ div.priestNanoC {
                            display:flex;
    
                            div.titre {
                                border-top:0px;
                            }
                        }
                    }
                }
            }
    
            div.MALPsion {
                >div {
                    display:none;
                }
    
                input[type="hidden"].legendeChoisie,
                input[type="hidden"].legendeChoisie2 {
                    &[value="1"] {
                        & ~ div.psionPuppetMaster {
                            display:flex;
                            border-top:0px;
                        }
                    }
    
                    &[value="2"] {
                        & ~ div.psionDiscord {
                            display:flex;
                            border-top:0px;
                        }
                    }
    
                    &[value="3"] {
                        & ~ div.psionWindtalker {
                            display:flex;
                            border-top:0px;
                        }
                    }
                }
            }
    
            div.MALShaman {
                flex-wrap: wrap;
            }
    
            div.MALWarlock {
                flex-wrap: wrap;
                >div {
                    display:none;
                }
    
                div.warlockContrecoups {
                    border-bottom:1px solid $clair;
                }
    
                input[type="hidden"].legendeChoisie {
                    &[value="1"] {
                        & ~ div.warlockContrecoups,
                        & ~ div.warlockRecord {
                            display:flex;
    
                            div.titre {
                                border-top:0px;
                            }
                        }
                    }
    
                    &[value="2"] {
                        & ~ div.warlockContrecoups,
                        & ~ div.warlockRewind {
                            display:flex;
    
                            div.titre {
                                border-top:0px;
                            }
                        }
                    }
                }
            }
    
            div.MALWarmaster {
                >div {
                    display:none;
                }
    
                div.warmasterWarlord {
                    input[type="hidden"].warlordChoisie {    
                        &[value="1"] {
                            & ~ div.action,
                            & ~ div.esquive {
                                display:flex;
                            }
                        }
        
                        &[value="2"] {
                            & ~ div.action,
                            & ~ div.force {
                                display:flex;
                            }
                        }
        
                        &[value="3"] {
                            & ~ div.action,
                            & ~ div.guerre {
                                display:flex;
                            }
                        }
        
                        &[value="4"] {
                            & ~ div.action,
                            & ~ div.energie {
                                display:flex;
                            }
                        }
                    }

                    div.action {
                        border-bottom-color:$sombre;
                    }
                }
    
                input[type="hidden"].legendeChoisie {
                    &[value="1"] {
                        & ~ div.warmasterWarlord {
                            display:flex;
    
                            div.titre {
                                border-top:0px;
                            }
                        }
                    }
    
                    &[value="2"] {
                        & ~ div.warmasterFalcon {
                            display:flex;
    
                            div.titre {
                                border-top:0px;
                            }
                        }
                    }
                }
            }
    
            div.MALWarrior {
                input[type="hidden"].legendeChoisie {
                    &[value="1"] {
                        & ~ .soldier {
                            display:flex;
                        }
                    }
    
                    &[value="2"] {
                        & ~ .hunter {
                            display:flex;
                        }
                    }
    
                    &[value="3"] {
                        & ~ .scholar {
                            display:flex;
                        }
                    }
    
                    &[value="4"] {
                        & ~ .herald {
                            display:flex;
                        }
                    }
    
                    &[value="5"] {
                        & ~ .scout {
                            display:flex;
                        }
                    }
                }
            }

            div.MALDruidCompanions {
                $titre:(
                    "titre":(
                        "hasButton":true
                    )
                );
        
                @include titre($white, transparent, $titre);
                display:flex;
                width:100%;
                flex-wrap: wrap;
        
                >h1.titre {
                    display:flex;
                    border-bottom:1px solid $clair;
                }
            }
        }
    }

    //ZONE CENTRALE PNJ
    div.subTabArmure {
        div.AEBlock {
            width:100%;
            flex-wrap: wrap;
    
            div.AE {
                @include block($sombre);
                @include titre($white);
                
                display:none;
        
                h1.titre {
                    display:flex;
                }
        
                div {
                    display:none;
                    justify-content: space-between;
                    width:100%;
                    background:$clair;
        
                    span {
                        display:flex;
                        font-size: 14px;
                        color: $black;
        
                        &:first-of-type {
                            width:70px;
                            align-items: center;
                            justify-content: center;
                            font-weight: bold;
                            line-height: 28px;
                        }
        
                        &:last-of-type {
                            width: calc(100% - 70px - 4px - 1px);
                            border-left:1px solid $sombre;
                            text-align: justify;
                            padding: 2px;
                        }
                    }
        
                    &:not(:first-of-type) {
                        border-top:1px solid $sombre;
                    }
                }
            }
    
            $AEs:"Chair", "Bete", "Machine", "Dame", "Masque";
    
            input[type="hidden"] {
                @each $AE in $AEs {
                    &.AE#{$AE}Mineur {
                        @for $i from 1 through 20 {
                            &[value="#{$i}"] {
                                & ~ div.AE#{$AE} {
                                    display:flex;
                                }
        
                                & ~ div.AE#{$AE} div.Mineur {
                                    display:flex;
                                }
                            }
                        }
                        
                    }
            
                    &.AE#{$AE}Majeur {
                        @for $i from 1 through 20 {
                            &[value="#{$i}"] {
                                & ~ div.AE#{$AE} {
                                    display:flex;
                                }
        
                                & ~ div.AE#{$AE} div.Mineur {
                                    display:flex;
                                }
        
                                & ~ div.AE#{$AE} div.Majeur {
                                    display:flex;
                                }
                            }
                        }
                    }
                }
            }
        
            &>div {
                &:not(:first-of-type) {
                    margin-top:10px;
                }
            }
        }

        div.capacitesFanMade {
            $fakeButton: (
                "label":(
                    "width":150px,
                    "height":23px
                ),
                "span": (
                    "height":23px,
                    "background":$sombre,
                    "color":$white
                )
            );
    
            @include block($sombre);
            @include titre($white);
            @include fakeButton($fakeButton) {
                margin-left:auto;
                margin-right:auto;
                font-size:12px;
            };
    
            h1.titre {
                display:flex;
            }
    
            div {
                display:flex;
                width:100%;
                justify-content: center;
                background:$clair;
                padding:2px;
            }
        }
    
        div.capacitesSpeciales {
            @include block($sombre);
            @include titre($white);
     
            h1.titre {
                display:flex;
            }
    
            div {
                display:flex;
                width:100%;
                justify-content: center;
                background:$clair;
                padding:2px;
    
                button[type="action"] {
                    display:flex;
                    width: 150px;
                    height:23px;
    
                    justify-content: center;
    
                    font-size: 12px;
                    font-weight: bold;
                    border: 1px solid $black;
                    background: $sombre;
                    color: $white;
                    line-height: 22px;
                    padding:0px;
    
                    z-index:9;
    
                    margin-top:1px;
                    margin-bottom:1px;
                }
            }
    
            input[type="hidden"] {
                &[value="1"] {
                    & ~ div button[type="action"] {
                        box-shadow: 0px 0px 7px 0px $black inset;
                    }
                }
            }
        }
    
        div.capacites,
        div.capacitePhase2 {
            @include block($sombre);
            @include titre($white);
            @include extend();
    
            h1.titre {
                display:flex;
            }
    
            div.repcontainer {
                flex-wrap: wrap;
    
                div.repitem {
                    flex-wrap: wrap;
                }
            }
    
            div.repitem {
                details {
                    display:flex;
                    width:100%;
                    justify-content: space-between;
                    flex-wrap: wrap;
    
                    summary {
                        display:flex;
    
                        input[type="text"] {
                            width: calc(100% - 25px);
                            padding-top: 0px;
                            padding-left: 0px;
                            padding-bottom: 0px;
                            padding-right: 25px;
                            border-left: 0px;
                            border-right: 0px;
                            border-bottom: 0px;
                            text-align: center;
                            height: 28px;
                            border-top:1px solid $sombre;
                        }
                    }
                }
    
                div.autoex {
                    border-top:1px solid $sombre;
                }
            }
        }
    
        div.notes {
            @include block($sombre);
            @include titre($white);
    
            h1.titre {
                display:flex;
            }
    
            div.repcontainer {
                flex-wrap: wrap;
    
                div.repitem {
                    flex-wrap: wrap;
                }
            }
    
            div.autoex {
                border-top:1px solid $sombre;
            }
        }
    }

    div.armesPJ {
        width:100%;
        flex-wrap: wrap;

        div.subTabMelee {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasBonusCarac":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
    
            display:none;
            margin-top:10px;
    
            div.data {
                display:none;
            }
    
            >div.titre {
                display:flex;
    
                h1.titre {
                    display:flex;
                }
            }
    
            div.ligneTitre {
                width:100%;
                justify-content: space-between;
    
                span {
                    display:flex;
                    justify-content: center;
                    color:$black;
                    font-weight:bold;
                    font-size:14px;
                    height:28px;
                    line-height:28px;
                }
    
                div.firstCol {
                    background:$clair;
                    width:calc(100% - (121px * 3) - 289px);
    
                    span {
                        width:100%;
                    }
                }
    
                div.midCol {
                    background:$clair;
                    width:calc(121px - 1px);
                    border-left:1px solid $sombre;
    
                    span {
                        width:100%;
                    }
                }
    
                div.lastCol {
                    background:$clair;
                    width:calc(289px - 1px);
                    border-left:1px solid $sombre;
    
                    span {
                        width:calc(100% - 28px);
    
                        margin-right:28px;
                    }
                }
            }

            div.armesListe {
                width:100%;
                flex-wrap: wrap;

                input[type="hidden"] {
                    &.guidage {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;

                                label.guidage {
                                    display:block;
                                }

                                label.precis {
                                    width:250px;
                                    padding:0px;

                                    span {
                                        width:119px;
                                    }

                                    select {
                                        width:131px;
                                        border-right:0px;
                                    }
                                    
                                }
                            }
                        }
                    }

                    &.cadence {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;

                                label.cadence {
                                    display:flex;
                                    padding-right:28px;
                                }

                                label.guidage {
                                    width:121px;
                                    margin-right:0px;
                                }

                                label.precis {
                                    width:241px;
                                    padding-right:0px;

                                    span {
                                        width: calc(50% - 3px);
                                    }

                                    select {
                                        width:121px;
                                        border-right:0px;
                                    }
                                }
                            }
                        }
                    }
                }

                div.poing {
                    $subMenu: (
                        "color":$white,
                        "background":transparent,
                        "borderColor":$black,
                        "fontSize":12px,
                        "fontBold":true,

                        "button":(
                            "width":100%,
                            "widthBL":calc(100% - 1px),
                            "height":23px
                        )
                    );

                    @include subMenu("subMenu", $subMenu);

                    width:100%;
                    flex-wrap: wrap;

                    div.bonus {
                        display:none;
                        flex-wrap: wrap;
                        width:100%;
                        justify-content: flex-end;
                    }
            
                    div.bonusCarac {
                        display:none;
                        width: calc(289px - 1px - 28px);
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
                        padding-right:28px;
                        
                        select {
                            display:none;
                            border:0px;
                            font-size:14px;
                            padding-top:0px;
                            padding-right:0px;
                            padding-bottom:0px;
                            padding-left:15px;
                            height:28px;
                            text-align: center;
                            border-right:1px solid $sombre;
                        }
                    }
                }

                div.armeSection1,
                div.armeSection2 {
                    $subMenu: (
                        "color":$white,
                        "background":transparent,
                        "borderColor":$black,
                        "fontSize":12px,
                        "fontBold":true,

                        "button":(
                            "width":calc(100% / 4),
                            "widthBL":calc((100% / 4) - 1px),
                            "height":23px
                        )
                    );

                    @include subMenu("subMenu", $subMenu);

                    display:none;
                    width:100%;
                    flex-wrap: wrap;

                    div.bonus {
                        display:none;
                        flex-wrap: wrap;
                        width:100%;
                        justify-content: flex-end;
                    }

                    label.precis,
                    label.guidage {
                        display:none;
                    }
            
                    div.bonusCarac {
                        display:none;
                        width: calc(289px - 1px - 28px);
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
                        padding-right:28px;
                        
                        select {
                            display:none;
                            border:0px;
                            font-size:14px;
                            padding-top:0px;
                            padding-right:0px;
                            padding-bottom:0px;
                            padding-left:15px;
                            height:28px;
                            text-align: center;
                            border-right:1px solid $sombre;
                        }
                    }
                }

                div.repcontainer {
                    display:flex;
                    width:100%;
                    flex-wrap: wrap;
                }

                div.repitem {
                    $subMenu: (
                        "color":$white,
                        "background":transparent,
                        "borderColor":$black,
                        "fontSize":12px,
                        "fontBold":true,

                        "button":(
                            "width":calc(100% / 4),
                            "widthBL":calc((100% / 4) - 1px),
                            "height":23px
                        )
                    );

                    @include subMenu("subMenu", $subMenu);

                    display:flex;
                    width:100%;
                    flex-wrap: wrap;

                    div.bonus {
                        display:none;
                        flex-wrap: wrap;
                        width:100%;
                        justify-content: flex-end;
                    }

                    label.precis {
                        display:none;
                    }
            
                    div.bonusCarac {
                        display:none;
                        width: calc(289px - 1px - 28px);
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
                        padding-right:28px;
                        
                        select {
                            display:none;
                            border:0px;
                            font-size:14px;
                            padding-top:0px;
                            padding-right:0px;
                            padding-bottom:0px;
                            padding-left:15px;
                            height:28px;
                            text-align: center;
                            border-right:1px solid $sombre;
                        }
                    }
                }

                div.ligne {
                    width:100%;
                    justify-content: space-between;
                    border-top:1px solid $sombre;
    
                    div.firstCol {
                        background:$clair;
                        width:calc(100% - (121px * 3) - 289px);
                    }
    
                    div.midCol {
                        justify-content: space-between;
                        background:$clair;
                        width:calc(121px - 1px);
                        border-left:1px solid $sombre;
                    }

                    div.lastCol {
                        justify-content: space-between;
                        background:$clair;
                        width:calc(289px - 1px);
                        border-left:1px solid $sombre;
                    }
    
                    div.armeNom {
                        input[type="text"] {
                            width: 100%;
                            font-size: 14px;
                            height: 28px;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 4px;
                            min-width: 0px;
                        }
                    }
    
                    div.armeDegats,
                    div.armeViolence {
                        input[type="number"] {
                            width: calc(50% - 14px);
                            font-size: 14px;
                            height: 28px;
                            padding: 0px;
                            border: 0px;
                            min-width: 0px;
                        }
    
                        input[type="number"].nbre {
                            text-align:right;
                        }
    
                        input[type="number"].bonus {
                            text-align:left;
                        }
    
                        b {
                            display:flex;
                            width: 28px;
                            height: 28px;
                            align-items: center;
                            justify-content: center;
                            font-size: 14px;
                            font-weight: bold;
                        }
                    }
    
                    div.armePortee {
                        select {
                            width:100%;
                            font-size: 14px;
                            height: 28px;
                            text-align: center;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 15px;
                        }
                    }
    
                    div.armeCaracs {
                        select {
                            width:calc((100% / 2) - 14px);
                            font-size: 14px;
                            height: 28px;
                            text-align: center;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 15px;
                            border-right:1px solid $sombre;
                        }
                    }
                }

                div.bonus {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "width":100%,
                            "height":23px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
        
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };

                    label.simple {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }

                    input[type="hidden"] {
                        &.deuxMains {
                            &[value="0"] {
                                & ~ label.precis {
                                    display:none;
                                }
                            }
                        }

                        &.allegee {
                            &[value="1"] {
                                & ~ label.precis {
                                    display:none;
                                }
                            }
                        }
                    }

                    label.precis {
                        display:none;
                        width: calc(261px - 1px);
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
                        padding-right:28px;
            
                        span {
                            width: calc((100% / 2) - 3px);
                            padding-left: 2px;
                            line-height: 27px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            
                        }

                        select {
                            width:calc((100% / 2) + 1px);
                            border:0px;
                            padding:0px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                            border-right:1px solid $sombre;
                        }
                    }

                    label.cadence {
                        display:none;
                        width:381px;
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
            
                        span {
                            width: 251px;
                            padding-left: 2px;
                            line-height: 27px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            
                        }

                        select {
                            width:132px;
                            border:0px;
                            padding:0px;
                            padding-left:15px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                            border-right:1px solid $sombre;
                        }
                    }

                    label.guidage {
                        display:none;
                        margin-top:1px;
                        width:130px;
                        height:28px;
                        margin:0px;
                        margin-right:29px;
                        border-right:1px solid $sombre;
                        border:0px;
                        background:$clair;

                        span.actif,
                        span.inactif {
                            display:none;
                            text-align: center;
                            color:$black;
                            height:28px;
                            line-height: 28px;
                            align-items:center;
                            border-left:1px solid $sombre;

                            &::before {
                                height:28px;
                                line-height: 28px;
                            }
                        }

                        span.actif {
                            border-left:1px solid $clair;
                        }

                        input[type="checkbox"] {
                            height:28px;

                            &:checked {
                                & ~ span.actif {
                                    display:flex;
                                }
                            }

                            &:not(:checked) {
                                & ~ span.inactif {
                                    display:flex;
                                }
                            }
                        }
                    }
                }            

                div.effets,
                div.ameliorationsStructurelles,
                div.ameliorationsArmes,
                div.special {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "width":100%,
                            "height":23px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
        
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };
                    
                    display:none;
                    width:100%;
                    background:$clair;
                    justify-content: space-evenly;
                    flex-wrap: wrap;
        
                    label.simple {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
        
                    div.double {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        label.fakeButton {
                            width:calc(100% - 30px);
                            border:0px;
        
                            input[type="checkbox"] {
                                &:not(:checked) {
                                    & ~ span::before {
                                        background:$clair;
                                        color:$black;
                                    }
                                }
                            }
                        }
        
                        input[type="number"] {
                            width: 30px;
                            height: 23px;
                            text-align: center;
                            border-top: 0px;
                            border-right: 0px;
                            border-left: 1px solid $black;
                            border-bottom: 0px;
                            border-radius: 0px;
                            padding: 0px;
                        }
                    }
        
                    div.doubleTexte {
                        width:150px;
                        height:46px;
                        margin:2px;
                        flex-wrap: wrap;
                        border:1px solid $black;

                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }

                        input[type="text"] {
                            width: 100%;
                            height: 23px;
                            text-align: center;
                            border: 1px solid black;
                            border-radius: 0px;
                            padding: 0px;
                        }
                    }
        
                    div.triple {
                        width:150px;
                        height:46px;
                        margin:2px;
                        flex-wrap: wrap;
                        border:1px solid $black;
        
                        div {
                            input[type="number"] {
                                width: calc(50% - 14px);
                                height: 23px;
                                border-radius: 0px;
                                padding: 0px;
                                border-bottom:0px;
                                border-right:0px;
                                border-left:0px;
                                border-top:1px solid $black;
                                color:$black;
        
                                &.R {
                                    text-align:left;
                                    border-left:1px solid $black;
                                }
        
                                &.L {
                                    text-align:right;
                                    border-right:1px solid $black;
                                }
                            }
        
                            span {
                                display:flex;
                                background:$sombre;
                                width: 28px;
                                height: 22px;
                                align-items: center;
                                justify-content: center;
                                font-size: 14px;
                                font-weight: bold;
                                color: $white;
                                border-top: 1px solid $black;
                            }
                            
                        }
        
                        input[type="hidden"] {
                            &[value="0"] {
                                & ~ label span::before,
                                & ~ div span {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
                }

                input[type="hidden"].subMenu {
                    &[value="1"] {
                        & ~ div button[type="action"].effets {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.effets {
                            display:flex;
                        }
                    }

                    &[value="2"] {
                        & ~ div button[type="action"].ameliorationsStructurelles {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.ameliorationsStructurelles {
                            display:flex;
                        }
                    }

                    &[value="3"] {
                        & ~ div button[type="action"].ameliorationsArmes {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.ameliorationsArmes {
                            display:flex;
                        }
                    }
        
                    &[value="4"] {
                        & ~ div button[type="action"].special {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.special {
                            display:flex;
                        }
                    }
                }
            }
            
            input[type="hidden"].styleCombat {
                &[value="precis"] {
                    & ~ div div.bonus {
                        display:flex;
                    }

                    & ~ div label.precis {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].bonusCarac {
                &[value="1"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div div.bonus {
                        display:flex;

                        label.precis {
                            width:calc((121px * 2) - 1px);
                            padding-right:0px;

                            span {
                                width:calc(121px - 3px);
                            }
    
                            select {
                                width:121px;
                                border-right:0px;
                            }
                        }
                    }
    
                    & ~ div div.bonusCarac {
                        display:flex;
    
                        select:first-of-type {
                            display:inline-block;
                            width:100%;
                        }
                    }
                }
    
                &[value="2"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1,
                        button[type="action"].bonusCaracL2 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div div.bonus {
                        display:flex;

                        label.precis {
                            width:calc((121px * 2) - 1px);
                            padding-right:0px;

                            span {
                                width:calc(121px - 3px);
                            }
    
                            select {
                                width:121px;
                                border-right:0px;
                            }
                        }
                    }
    
                    & ~ div div.bonusCarac {
                        display:flex;
                        
                        select:first-of-type {
                            display:inline-block;
                            width:50%;
                        }
                        
                        select:last-of-type {
                            display:inline-block;
                            width:50%;
                        }
                    }
                }
            }

            input[type="hidden"].armePoing {
                &[value="0"] {
                    & ~ div div.poing {
                        display:none;
                    }
                }
            }

            input[type="hidden"].armeSection1 {
                &[value="1"] {
                    & ~ div div.armeSection1 {
                        display:flex;
                    }
                }
            }

            input[type="hidden"].armeSection2 {
                &[value="1"] {
                    & ~ div div.armeSection2 {
                        display:flex;
                    }
                }
            }
        }

        div.subTabDistance {
            $titre:(
                "titre":(
                    "hasButton":true,
                    "hasBonusCarac":true
                )
            );
    
            @include block($sombre);
            @include titre($white, transparent, $titre);
            @include buttonRoll();
    
            margin-top:10px;
            display:none;
    
            div.data {
                display:none;
            }
    
            >div.titre {
                display:flex;
    
                h1.titre {
                    display:flex;
                }
            }
    
            div.ligneTitre {
                width:100%;
                justify-content: space-between;
    
                span {
                    display:flex;
                    justify-content: center;
                    color:$black;
                    font-weight:bold;
                    font-size:14px;
                    height:28px;
                    line-height:28px;
                }
    
                div.firstCol {
                    background:$clair;
                    width:calc(100% - (121px * 3) - 289px);
    
                    span {
                        width:100%;
                    }
                }
    
                div.midCol {
                    background:$clair;
                    width:calc(121px - 1px);
                    border-left:1px solid $sombre;
    
                    span {
                        width:100%;
                    }
                }
    
                div.lastCol {
                    background:$clair;
                    width:calc(289px - 1px);
                    border-left:1px solid $sombre;
    
                    span {
                        width:calc(100% - 28px);
    
                        margin-right:28px;
                    }
                }
            }

            div.armesListe {
                width:100%;
                flex-wrap: wrap;

                input[type="hidden"] {
                    &.guidage {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;

                                label.guidage {
                                    display:block;
                                }

                                label.precis {
                                    width:250px;
                                    padding:0px;

                                    span {
                                        width:119px;
                                    }

                                    select {
                                        width:131px;
                                        border-right:0px;
                                    }
                                    
                                }
                            }
                        }
                    }

                    &.cadence {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;

                                label.cadence {
                                    display:flex;
                                    padding-right:28px;
                                }

                                label.guidage {
                                    width:121px;
                                    margin-right:0px !important;
                                }

                                label.precis {
                                    width:241px;
                                    padding-right:0px;

                                    span {
                                        width: calc(50% - 3px);
                                    }

                                    select {
                                        width:121px;
                                        border-right:0px;
                                    }
                                }
                            }
                        }
                    }
                }

                div.armeSection1,
                div.armeSection2 {
                    $subMenu: (
                        "color":$white,
                        "background":transparent,
                        "borderColor":$black,
                        "fontSize":12px,
                        "fontBold":true,

                        "button":(
                            "width":calc(100% / 3),
                            "widthBL":calc((100% / 3) - 1px),
                            "height":23px
                        )
                    );

                    @include subMenu("subMenu", $subMenu);

                    display:none;
                    width:100%;
                    flex-wrap: wrap;

                    div.bonus {
                        display:none;
                        flex-wrap: wrap;
                        width:100%;
                        justify-content: flex-end;
                    }

                    label.guidage {
                        display:none;
                    }
            
                    div.bonusCarac {
                        display:none;
                        width: calc(289px - 1px - 28px);
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
                        padding-right:28px;
                        
                        select {
                            display:none;
                            border:0px;
                            font-size:14px;
                            padding-top:0px;
                            padding-right:0px;
                            padding-bottom:0px;
                            padding-left:15px;
                            height:28px;
                            text-align: center;
                            border-right:1px solid $sombre;
                        }
                    }
                }

                div.repcontainer {
                    display:flex;
                    width:100%;
                    flex-wrap: wrap;
                }

                div.repitem {
                    $subMenu: (
                        "color":$white,
                        "background":transparent,
                        "borderColor":$black,
                        "fontSize":12px,
                        "fontBold":true,

                        "button":(
                            "width":calc(100% / 3),
                            "widthBL":calc((100% / 3) - 1px),
                            "height":23px
                        )
                    );

                    @include subMenu("subMenu", $subMenu);

                    display:flex;
                    width:100%;
                    flex-wrap: wrap;

                    div.bonus {
                        display:none;
                        width:100%;
                        justify-content: flex-end;
                    }

                    label.precis {
                        display:none;
                    }
            
                    div.bonusCarac {
                        display:none;
                        width: calc(289px - 1px - 28px);
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
                        padding-right:28px;
                        
                        select {
                            display:none;
                            border:0px;
                            font-size:14px;
                            padding-top:0px;
                            padding-right:0px;
                            padding-bottom:0px;
                            padding-left:15px;
                            height:28px;
                            text-align: center;
                            border-right:1px solid $sombre;
                        }
                    }
                }

                div.ligne {
                    width:100%;
                    justify-content: space-between;
                    border-top:1px solid $sombre;
    
                    div.firstCol {
                        background:$clair;
                        width:calc(100% - (121px * 3) - 289px);
                    }
    
                    div.midCol {
                        justify-content: space-between;
                        background:$clair;
                        width:calc(121px - 1px);
                        border-left:1px solid $sombre;
                    }

                    div.lastCol {
                        justify-content: space-between;
                        background:$clair;
                        width:calc(289px - 1px);
                        border-left:1px solid $sombre;
                    }
    
                    div.armeNom {
                        input[type="text"] {
                            width: 100%;
                            font-size: 14px;
                            height: 28px;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 4px;
                            min-width: 0px;
                        }
                    }
    
                    div.armeDegats,
                    div.armeViolence {
                        input[type="number"] {
                            width: calc(50% - 14px);
                            font-size: 14px;
                            height: 28px;
                            padding: 0px;
                            border: 0px;
                            min-width: 0px;
                        }
    
                        input[type="number"].nbre {
                            text-align:right;
                        }
    
                        input[type="number"].bonus {
                            text-align:left;
                        }
    
                        b {
                            display:flex;
                            width: 28px;
                            height: 28px;
                            align-items: center;
                            justify-content: center;
                            font-size: 14px;
                            font-weight: bold;
                        }
                    }
    
                    div.armePortee {
                        select {
                            width:100%;
                            font-size: 14px;
                            height: 28px;
                            text-align: center;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 15px;
                        }
                    }
    
                    div.armeCaracs {
                        select {
                            width:calc((100% / 2) - 14px);
                            font-size: 14px;
                            height: 28px;
                            text-align: center;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 15px;
                            border-right:1px solid $sombre;
                        }
                    }
                }

                div.bonus {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "width":100%,
                            "height":23px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
        
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };

                    input[type="hidden"] {
                        &.deuxMains {
                            &[value="0"] {
                                & ~ label.pilonnage,
                                & ~ label.pilonnageDetails {
                                    display:none;
                                }

                                & ~ label.guidage {
                                    margin-right:29px;
                                }
                            }
                        }
                    }

                    label.pilonnage {
                        display:none;
                        width: 241px;
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
            
                        span {
                            width: max-content;
                            padding-left: 2px;
                            line-height: 27px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            
                        }

                        input[type="number"] {
                            width:121px;
                            border:0px;
                            padding:0px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                        }

                        select {
                            width:131px;
                            border:0px;
                            padding:0px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                            border-right:1px solid $sombre;
                            padding-left:15px;
                        }
                    }

                    label.pilonnageDetails {
                        display:none;
                        width:calc(130px + 130px + 121px);
                        border-left:1px solid $sombre;
                        padding-right:28px;
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
            
                        span {
                            width: max-content;
                            padding-left: 2px;
                            line-height: 27px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            
                        }

                        input[type="number"] {
                            width:121px;
                            border:0px;
                            padding:0px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                        }

                        select {
                            width:131px;
                            border:0px;
                            padding:0px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                            border-right:1px solid $sombre;
                            padding-left:15px;
                        }

                        &:first-of-type {
                            width: 241px;
                        }

                        &:last-of-type {
                            width:calc(130px + 130px + 121px);
                            border-left:1px solid $sombre;
                            padding-right:28px;
                        }
                    }

                    label.cadence {
                        display:none;
                        width:381px;
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
            
                        span {
                            width: 251px;
                            padding-left: 2px;
                            line-height: 27px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            
                        }

                        select {
                            width:132px;
                            border:0px;
                            padding:0px;
                            padding-left:15px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                            border-right:1px solid $sombre;
                        }
                    }

                    label.guidage {
                        display:none;
                        margin-top:1px;
                        width:130px;
                        height:28px;
                        margin:0px;
                        margin-right:29px;
                        border-right:1px solid $sombre;
                        border:0px;
                        background:$clair;

                        span.actif,
                        span.inactif {
                            display:none;
                            text-align: center;
                            color:$black;
                            height:28px;
                            line-height: 28px;
                            align-items:center;
                            border-left:1px solid $sombre;

                            &::before {
                                height:28px;
                                line-height: 28px;
                                background:transparent;
                                color:$black;
                            }
                        }

                        span.actif {
                            border-left:1px solid $clair;

                            &::before {
                                background:$sombre;
                                color:$white;
                                border-bottom:1px solid $clair;
                            }
                            
                        }

                        input[type="checkbox"] {
                            height:28px;

                            &:checked {
                                & ~ span.actif {
                                    display:flex;
                                }
                            }

                            &:not(:checked) {
                                & ~ span.inactif {
                                    display:flex;
                                }
                            }
                        }
                    }
                }            

                div.effets,
                div.ameliorationsArmes,
                div.special {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "height":23px,
                            "width":100%,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );

                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };
                    
                    display:none;
                    width:100%;
                    background:$clair;
                    justify-content: space-evenly;
                    flex-wrap: wrap;
        
                    label.simple {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
        
                    div.double {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        label.fakeButton {
                            width:calc(100% - 30px);
                            border:0px;
        
                            input[type="checkbox"] {
                                &:not(:checked) {
                                    & ~ span::before {
                                        background:$clair;
                                        color:$black;
                                    }
                                }
                            }
                        }
        
                        input[type="number"] {
                            width: 30px;
                            height: 23px;
                            text-align: center;
                            border-top: 0px;
                            border-right: 0px;
                            border-left: 1px solid $black;
                            border-bottom: 0px;
                            border-radius: 0px;
                            padding: 0px;
                        }
                    }

                    div.doubleTexte {
                        width:150px;
                        margin:2px;
                        flex-wrap: wrap;
                        border:1px solid $black;

                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }

                        input[type="text"] {
                            width: 100%;
                            height: 23px;
                            text-align: center;
                            border-top: 1px solid black;
                            border-right: 0px;
                            border-left: 0px;
                            border-bottom: 0px;
                            border-radius: 0px;
                            padding: 0px;

                            &.borderBottom {
                                border-bottom:1px solid $black;
                            }
                        }

                        .borderTop {
                            border-top:1px solid $black;
                        }                        
                    }
        
                    div.triple {
                        width:150px;
                        height:46px;
                        margin:2px;
                        flex-wrap: wrap;
                        border:1px solid $black;
        
                        div {
                            input[type="number"] {
                                width: calc(50% - 14px);
                                height: 23px;
                                border-radius: 0px;
                                padding: 0px;
                                border-bottom:0px;
                                border-right:0px;
                                border-left:0px;
                                border-top:1px solid $black;
                                color:$black;
        
                                &.R {
                                    text-align:left;
                                    border-left:1px solid $black;
                                }
        
                                &.L {
                                    text-align:right;
                                    border-right:1px solid $black;
                                }
                            }
        
                            span {
                                display:flex;
                                background:$sombre;
                                width: 28px;
                                height: 22px;
                                align-items: center;
                                justify-content: center;
                                font-size: 14px;
                                font-weight: bold;
                                color: $white;
                                border-top: 1px solid $black;
                            }
                            
                        }
        
                        input[type="hidden"] {
                            &[value="0"] {
                                & ~ label span::before,
                                & ~ div span {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
                }

                input[type="hidden"].subMenu {
                    &[value="1"] {
                        & ~ div button[type="action"].effets {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.effets {
                            display:flex;
                        }
                    }

                    &[value="3"] {
                        & ~ div button[type="action"].ameliorationsArmes {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.ameliorationsArmes {
                            display:flex;
                        }
                    }
        
                    &[value="4"] {
                        & ~ div button[type="action"].special {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.special {
                            display:flex;
                        }
                    }
                }
            }
            
            input[type="hidden"].styleCombat {
                &[value="pilonnage"] {
                    & ~ div div.bonus {
                        display:flex;
                    }

                    & ~ div label.pilonnage {
                        display:flex;
                    }

                    & ~ div label.pilonnageDetails {
                        display:flex;
                    }

                    & ~ div label.guidage {
                        margin-right:0px;
                    }
                }
            }
    
            input[type="hidden"].bonusCarac {
                &[value="1"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div div.bonus {
                        display:flex;
    
                        label.pilonnage {
                            width:calc((121px * 2) - 1px);
                            padding-right:0px;
    
                            input[type="number"] {
                                border-right:0px;
                            }
                        }

                        label.cadence {
                            width:362px;
                            padding-right:0px !important;

                            span {
                                width:238px;
                            }

                            select {
                                width:121px;
                                border-right:0px;
                            }
                        }

                        label.guidage {
                            margin-right:0px !important;
                            width:121px;
                        }
                    }
    
                    & ~ div div.bonusCarac {
                        display:flex;
    
                        select:first-of-type {
                            display:inline-block;
                            width:100%;
                        }
                    }
                }
    
                &[value="2"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1,
                        button[type="action"].bonusCaracL2 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div div.bonus {
                        display:flex;
    
                        label.pilonnage {
                            width:calc((121px * 2) - 1px);
                            padding-right:0px;

    
                            input[type="number"] {
                                border-right:0px;
                            }
                        }

                        label.cadence {
                            width:362px;
                            padding-right:0px !important;

                            span {
                                width:238px;
                            }

                            select {
                                width:121px;
                                border-right:0px;
                            }
                        }
                        
                        label.guidage {
                            margin-right:0px !important;
                            width:121px;
                        }
                    }
    
                    & ~ div div.bonusCarac {
                        display:flex;
                        
                        select:first-of-type {
                            display:inline-block;
                            width:50%;
                        }
                        
                        select:last-of-type {
                            display:inline-block;
                            width:50%;
                        }
                    }
                }
            }

            input[type="hidden"].armeSection1 {
                &[value="1"] {
                    & ~ div div.armeSection1 {
                        display:flex;
                    }
                }
            }

            input[type="hidden"].armeSection2 {
                &[value="1"] {
                    & ~ div div.armeSection2 {
                        display:flex;
                    }
                }
            }
        }

        div.subTabImprovisee {

            display:none;
            flex-wrap: wrap;
            width:100%;

            div.utilisation {
                $fakeButton: (
                    "label":(
                        "width":calc((100% / 2) - 50px),
                        "height":26px
                    ),
                    "span": (
                        "width":100%,
                        "height":26px,
                        "background":$sombre,
                        "color":$white,
                        "border":true
                    ),
                    "shadow":true
                );

                $titre:(
                    "titre":(
                        "hasButton":true,
                        "hasBonusCarac":true
                    )
                );

                @include block($sombre);
                @include titre($white, transparent, $titre);
                @include fakeButton($fakeButton);

                width:50%;
                margin-left:auto;
                margin-right:auto;
                margin-top:10px;

                h1.titre {
                    display:flex;
                }

                div.buttons {
                    display:flex;
                    justify-content: space-evenly;
                    background:$clair;
                    width:100%;
                    padding-top:5px;
                    padding-bottom:5px;
                }

                div.bonus {
                    display:none;
                    width:100%;
                    justify-content: flex-end;
                    border-top:1px solid $sombre;
                }
        
                div.bonusCarac {
                    display:none;
                    width: 100%;
                    background: $clair;
                    justify-content: space-between;
                    
                    select {
                        display:none;
                        border:0px;
                        font-size:14px;
                        padding-top:0px;
                        padding-right:0px;
                        padding-bottom:0px;
                        padding-left:15px;
                        height:28px;
                        text-align: center;
                    }
                }

                input[type="hidden"].bonusCarac {
                    &[value="1"] {
                        & ~ div.titre {
                            button[type="action"].bonusCaracL1 {
                                box-shadow: 0px 0px 7px 0px #000000 inset;
                            }
                        }

                        & ~ div.bonus {
                            display:flex;
                        }
        
                        & ~ div div.bonusCarac {
                            display:flex;
        
                            select:first-of-type {
                                display:inline-block;
                                width:100%;
                            }
                        }
                    }
        
                    &[value="2"] {
                        & ~ div.titre {
                            button[type="action"].bonusCaracL1,
                            button[type="action"].bonusCaracL2 {
                                box-shadow: 0px 0px 7px 0px #000000 inset;
                            }
                        }

                        & ~ div.bonus {
                            display:flex;
                        }
        
                        & ~ div div.bonusCarac {
                            display:flex;
                            
                            select:first-of-type {
                                display:inline-block;
                                width:50%;
                                border-right:1px solid $sombre;
                            }
                            
                            select:last-of-type {
                                display:inline-block;
                                width:50%;
                            }
                        }
                    }
                }
            }

            div.liste {        
                @include block($sombre);
                @include titre($white, transparent);
                @include buttonRoll();
        
                margin-top:10px;
        
                div.data {
                    display:none;
                }
    
                h1.titre {
                    display:flex;
                }
        
                div.ligneTitre {
                    width:100%;
                    justify-content: space-between;
        
                    span {
                        display:flex;
                        background:$clair;
                        justify-content: center;
                        color:$black;
                        font-weight:bold;
                        font-size:14px;
                        height:28px;
                        line-height:28px;
                    }

                    .type {
                        width:calc(100% - 1px - (110px * 4) - 29px);
                    }

                    .jet {
                        width:110px;
                        padding-right:29px;
                    }
                }

                .OD,
                .type,
                .degats,
                .violence {
                    display:flex;
                    justify-content: center;
                    align-items:center;
                    align-content:center;
                }

                .OD {
                    width:110px;
                }
                .degats,
                .violence {
                    width:calc(110px - 1px);
                    border-left:1px solid $sombre;
                }

                .type {
                    border-left:1px solid $sombre;
                }

                .jet {
                    border-left:1px solid $sombre;
                }

                div.ligne {
                    display:flex;
                    width:100%;
                    justify-content: space-between;
                    border-top:1px solid $sombre;

                    .OD,
                    .degats,
                    .violence {
                        height:28px;

                        input[type="text"],
                        input[type="number"] {
                            width:100%;
                            margin: 0px;
                            padding: 0px;
                            border: 0px;
                            min-height: 28px;
                            height:100%;
                            background: white;
                            text-align: center;
                            cursor: context-menu;
                        }
                    }

                    .type {
                        display:flex;
                        width:calc(100% - 1px - (110px * 4) - 29px - 4px);
                        background: white;
                        text-align: justify;
                        justify-content: flex-start;
                        align-items: center;
                        align-content:center;
                        padding-left: 2px;
                        padding-right: 2px;
                    }

                    .jet {
                        width:calc(110px + 29px);
                        height:28px;

                        input[type="number"] {
                            width:calc(100% - 29px);
                            margin: 0px;
                            padding: 0px;
                            border: 0px;
                            min-height: 28px;
                            height:100%;
                            background: white;
                            text-align: center;
                            cursor: context-menu;
                        }
                    }
                }

                div.separationTop {
                    border-top:2px solid $sombre;
                }
            }
        }

        div.subTabAutre {    
            @include block($sombre);
            @include titre($white, transparent);
            @include buttonRoll();
    
            margin-top:10px;
            display:none;
    
            div.data {
                display:none;
            }
    
            h1.titre {
                display:flex;
            }
    
            div.ligneTitre {
                width:100%;
                justify-content: space-between;
    
                span {
                    display:flex;
                    justify-content: center;
                    color:$black;
                    font-weight:bold;
                    font-size:14px;
                    height:28px;
                    line-height:28px;
                }
    
                div.firstCol {
                    background:$clair;
                    width:calc(100% - (121px * 4) - 130px - 29px);
    
                    span {
                        width:100%;
                    }
                }
    
                div.midCol {
                    background:$clair;
                    width:calc(121px - 1px);
                    border-left:1px solid $sombre;
    
                    span {
                        width:100%;
                    }
                }
    
                div.lastCol {
                    background:$clair;
                    width:calc(130px - 1px);
                    padding-right:29px;
                    border-left:1px solid $sombre;
    
                    span {
                        width:100%;
                    }
                }
            }

            div.armesListe {
                width:100%;
                flex-wrap: wrap;

                input[type="hidden"] {
                    &.guidage {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;

                                label.guidage {
                                    display:block;
                                }

                                label.precis {
                                    width:250px;
                                    padding:0px;

                                    span {
                                        width:119px;
                                    }

                                    select {
                                        width:131px;
                                        border-right:0px;
                                    }
                                    
                                }
                            }
                        }
                    }

                    &.cadence {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;

                                label.cadence {
                                    display:flex;
                                    padding-right:28px;
                                }

                                label.guidage {
                                    width:121px;
                                    margin-right:0px !important;
                                }

                                label.precis {
                                    width:241px;
                                    padding-right:0px;

                                    span {
                                        width: calc(50% - 3px);
                                    }

                                    select {
                                        width:121px;
                                        border-right:0px;
                                    }
                                }
                            }
                        }
                    }
                }

                div.repcontainer {
                    display:flex;
                    width:100%;
                    flex-wrap: wrap;
                }

                div.repitem {
                    $subMenu: (
                        "color":$white,
                        "background":transparent,
                        "borderColor":$black,
                        "fontSize":12px,
                        "fontBold":true,

                        "button":(
                            "width":calc(100% / 3),
                            "widthBL":calc((100% / 3) - 1px),
                            "height":23px
                        )
                    );

                    @include subMenu("subMenu", $subMenu);

                    display:flex;
                    width:100%;
                    flex-wrap: wrap;

                    div.bonus {
                        display:none;
                        width:100%;
                        justify-content: flex-end;
                    }
                }

                div.ligne {
                    width:100%;
                    justify-content: space-between;
                    border-top:1px solid $sombre;
    
                    div.firstCol {
                        background:$clair;
                        width:calc(100% - (121px * 4) - 130px - 29px);
                    }
    
                    div.midCol {
                        justify-content: space-between;
                        background:$clair;
                        width:calc(121px - 1px);
                        border-left:1px solid $sombre;
                    }

                    div.lastCol {
                        justify-content: space-between;
                        background:$clair;
                        width:calc(130px + 29px - 1px);
                        border-left:1px solid $sombre;
                    }
    
                    div.armeNom {
                        input[type="text"] {
                            width: 100%;
                            font-size: 14px;
                            height: 28px;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 4px;
                            min-width: 0px;
                        }
                    }
    
                    div.armeDegats,
                    div.armeViolence {
                        input[type="number"] {
                            width: calc(50% - 14px);
                            font-size: 14px;
                            height: 28px;
                            padding: 0px;
                            border: 0px;
                            min-width: 0px;
                        }
    
                        input[type="number"].nbre {
                            text-align:right;
                        }
    
                        input[type="number"].bonus {
                            text-align:left;
                        }
    
                        b {
                            display:flex;
                            width: 28px;
                            height: 28px;
                            align-items: center;
                            justify-content: center;
                            font-size: 14px;
                            font-weight: bold;
                        }
                    }
    
                    div.armePortee {
                        select {
                            width:100%;
                            font-size: 14px;
                            height: 28px;
                            text-align: center;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 15px;
                        }
                    }
    
                    div.armeAttaque {
                        input[type="number"] {
                            width:calc(100% - 28px);
                            font-size: 14px;
                            height: 28px;
                            text-align: center;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 15px;
                        }

                        input[type="number"].nbre {
                            text-align:right;
                        }
    
                        input[type="number"].bonus {
                            text-align:left;
                        }

                        b {
                            display:flex;
                            width: 28px;
                            height: 28px;
                            align-items: center;
                            justify-content: center;
                            font-size: 14px;
                            font-weight: bold;
                        }
                    }
    
                    div.armeJet {
                        input[type="number"] {
                            width:calc(100% - 28px);
                            font-size: 14px;
                            height: 28px;
                            padding: 0px;
                            border: 0px;
                            border-right:1px solid $sombre;
                        }

                        input[type="number"].nbre {
                            text-align:right;
                        }
    
                        input[type="number"].bonus {
                            text-align:left;
                        }
                    }
                }
                
                div.bonus {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "width":100%,
                            "height":23px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
        
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };

                    label.cadence {
                        display:none;
                        width:372px;
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
            
                        span {
                            width: 236px;
                            padding-left: 2px;
                            line-height: 27px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            
                        }

                        select {
                            width:131px;
                            border:0px;
                            padding:0px;
                            padding-left:15px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                            border-right:1px solid $sombre;
                        }
                    }

                    label.guidage {
                        display:none;
                        margin-top:1px;
                        width:130px;
                        height:28px;
                        margin:0px;
                        margin-right:29px;
                        border-right:1px solid $sombre;
                        border:0px;
                        background:$clair;

                        span.actif,
                        span.inactif {
                            display:none;
                            text-align: center;
                            color:$black;
                            height:28px;
                            line-height: 28px;
                            align-items:center;
                            border-left:1px solid $sombre;

                            &::before {
                                height:28px;
                                line-height: 28px;
                                background:transparent;
                                color:$black;
                            }
                        }

                        span.actif {
                            border-left:1px solid $clair;

                            &::before {
                                background:$sombre;
                                color:$white;
                                border-bottom:1px solid $clair;
                            }
                            
                        }

                        input[type="checkbox"] {
                            height:28px;

                            &:checked {
                                & ~ span.actif {
                                    display:flex;
                                }
                            }

                            &:not(:checked) {
                                & ~ span.inactif {
                                    display:flex;
                                }
                            }
                        }
                    }
                }

                div.effets,
                div.ameliorationsArmes,
                div.special {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "width":100%,
                            "height":23px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
        
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };
                    
                    display:none;
                    width:100%;
                    background:$clair;
                    justify-content: space-evenly;
                    flex-wrap: wrap;
        
                    label.simple {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
        
                    div.double {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        label.fakeButton {
                            width:calc(100% - 30px);
                            border:0px;
        
                            input[type="checkbox"] {
                                &:not(:checked) {
                                    & ~ span::before {
                                        background:$clair;
                                        color:$black;
                                    }
                                }
                            }
                        }
        
                        input[type="number"] {
                            width: 30px;
                            height: 23px;
                            text-align: center;
                            border-top: 0px;
                            border-right: 0px;
                            border-left: 1px solid $black;
                            border-bottom: 0px;
                            border-radius: 0px;
                            padding: 0px;
                        }
                    }
        
                    div.doubleTexte {
                        width:150px;
                        margin:2px;
                        flex-wrap: wrap;
                        border:1px solid $black;

                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }

                        input[type="text"] {
                            width: 100%;
                            height: 23px;
                            text-align: center;
                            border-top: 1px solid black;
                            border-right: 0px;
                            border-left: 0px;
                            border-bottom: 0px;
                            border-radius: 0px;
                            padding: 0px;

                            &.borderBottom {
                                border-bottom:1px solid $black;
                            }
                        }

                        .borderTop {
                            border-top:1px solid $black;
                        }                        
                    }
        
                    div.triple {
                        width:150px;
                        height:46px;
                        margin:2px;
                        flex-wrap: wrap;
                        border:1px solid $black;
        
                        div {
                            input[type="number"] {
                                width: calc(50% - 14px);
                                height: 23px;
                                border-radius: 0px;
                                padding: 0px;
                                border-bottom:0px;
                                border-right:0px;
                                border-left:0px;
                                border-top:1px solid $black;
                                color:$black;
        
                                &.R {
                                    text-align:left;
                                    border-left:1px solid $black;
                                }
        
                                &.L {
                                    text-align:right;
                                    border-right:1px solid $black;
                                }
                            }
        
                            span {
                                display:flex;
                                background:$sombre;
                                width: 28px;
                                height: 22px;
                                align-items: center;
                                justify-content: center;
                                font-size: 14px;
                                font-weight: bold;
                                color: $white;
                                border-top: 1px solid $black;
                            }
                            
                        }
        
                        input[type="hidden"] {
                            &[value="0"] {
                                & ~ label span::before,
                                & ~ div span {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
                }

                input[type="hidden"].subMenu {
                    &[value="1"] {
                        & ~ div button[type="action"].effets {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.effets {
                            display:flex;
                        }
                    }

                    &[value="3"] {
                        & ~ div button[type="action"].ameliorationsArmes {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.ameliorationsArmes {
                            display:flex;
                        }
                    }
        
                    &[value="4"] {
                        & ~ div button[type="action"].special {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.special {
                            display:flex;
                        }
                    }
                }
            }
        }
    }

    div.armesPNJ {
        width:100%;
        flex-wrap: wrap;

        div.subTabMelee {    
            @include block($sombre);
            @include titre($white, transparent);
            @include buttonRoll();
    
            display:none;
            margin-top:10px;
    
            div.data {
                display:none;
            }
    
            h1.titre {
                display:flex;
            }
    
            div.ligneTitre {
                width:100%;
                justify-content: space-between;
    
                span {
                    display:flex;
                    justify-content: center;
                    color:$black;
                    font-weight:bold;
                    font-size:14px;
                    height:28px;
                    line-height:28px;
                }
    
                div.firstCol {
                    background:$clair;
                    width:calc(100% - (121px * 3) - 159px - 120px);
    
                    span {
                        width:100%;
                    }
                }
    
                div.midCol {
                    background:$clair;
                    width:calc(121px - 1px);
                    border-left:1px solid $sombre;
    
                    span {
                        width:100%;
                    }
                }
    
                div.midColL {
                    background:$clair;
                    width:calc(241px - 1px);
                    border-left:1px solid $sombre;
    
                    span {
                        width:100%;
                    }
                }
    
                div.lastCol {
                    background:$clair;
                    width:calc(159px - 1px);
                    border-left:1px solid $sombre;
    
                    span {
                        width:calc(100% - 29px);
    
                        margin-right:29px;
                    }
                }
            }

            div.armesListe {
                width:100%;
                flex-wrap: wrap;

                input[type="hidden"] {
                    &.guidage {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;

                                label.guidage {
                                    display:block;
                                }

                                label.precis {
                                    width:250px;
                                    padding:0px;

                                    span {
                                        width:119px;
                                    }

                                    select {
                                        width:131px;
                                        border-right:0px;
                                    }
                                    
                                }
                            }
                        }
                    }

                    &.cadence {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;

                                label.cadence {
                                    display:flex;
                                    padding-right:28px;
                                }

                                label.guidage {
                                    width:121px;
                                    margin-right:0px;
                                }

                                label.precis {
                                    width:241px;
                                    padding-right:0px;

                                    span {
                                        width: calc(50% - 3px);
                                    }

                                    select {
                                        width:121px;
                                        border-right:0px;
                                    }
                                }
                            }
                        }
                    }
                }

                div.armeSection1,
                div.armeSection2 {
                    $subMenu: (
                        "color":$white,
                        "background":transparent,
                        "borderColor":$black,
                        "fontSize":12px,
                        "fontBold":true,

                        "button":(
                            "width":calc(100% / 4),
                            "widthBL":calc((100% / 4) - 1px),
                            "height":23px
                        )
                    );

                    @include subMenu("subMenu", $subMenu);

                    display:none;
                    width:100%;
                    flex-wrap: wrap;

                    div.bonus {
                        display:none;
                        flex-wrap: wrap;
                        width:100%;
                        justify-content: flex-end;
                    }

                    label.precis,
                    label.guidage {
                        display:none;
                    }
                }

                div.repcontainer {
                    display:flex;
                    width:100%;
                    flex-wrap: wrap;
                }

                div.repitem {
                    $subMenu: (
                        "color":$white,
                        "background":transparent,
                        "borderColor":$black,
                        "fontSize":12px,
                        "fontBold":true,

                        "button":(
                            "width":calc(100% / 4),
                            "widthBL":calc((100% / 4) - 1px),
                            "height":23px
                        )
                    );

                    @include subMenu("subMenu", $subMenu);

                    display:flex;
                    width:100%;
                    flex-wrap: wrap;

                    div.bonus {
                        display:none;
                        flex-wrap: wrap;
                        width:100%;
                        justify-content: flex-end;
                    }

                    label.precis,
                    label.guidage {
                        display:none;
                    }
                }

                div.ligne {
                    width:100%;
                    justify-content: space-between;
                    border-top:1px solid $sombre;

                    $fakeButton: (
                        "label":(
                            "width":120px,
                            "height":28px
                        ),
                        "span": (
                            "width":100%,
                            "height":28px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
        
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };
    
                    div.firstCol {
                        background:$clair;
                        width:calc(100% - (121px * 3) - 159px - 120px);
                    }
    
                    div.midCol {
                        justify-content: space-between;
                        background:$clair;
                        width:calc(121px - 1px);
                        border-left:1px solid $sombre;
                    }
    
                    div.midColL {
                        justify-content: space-between;
                        background:$clair;
                        width:calc(241px - 1px);
                        border-left:1px solid $sombre;
                    }

                    div.lastCol {
                        justify-content: space-between;
                        background:$clair;
                        width:calc(159px - 1px);
                        border-left:1px solid $sombre;
                    }
    
                    div.armeNom {
                        input[type="text"] {
                            width: 100%;
                            font-size: 14px;
                            height: 28px;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 4px;
                            min-width: 0px;
                        }
                    }
    
                    div.armeDegats,
                    div.armeViolence {
                        div {
                            width:120px;
                        }

                        input[type="number"] {
                            width: calc(50% - 14px);
                            font-size: 14px;
                            height: 28px;
                            padding: 0px;
                            border: 0px;
                            min-width: 0px;
                        }
    
                        input[type="number"].nbre {
                            text-align:right;
                        }
    
                        input[type="number"].bonus {
                            text-align:left;
                        }
    
                        b {
                            display:flex;
                            width: 28px;
                            height: 28px;
                            align-items: center;
                            justify-content: center;
                            font-size: 14px;
                            font-weight: bold;
                        }

                        label.fakeButton {
                            span {
                                border-left:1px solid $black;
                            }

                            &:hover {
                                span::before {
                                    box-shadow: 0px 0px 7px 0px $black inset;
                                }
                            }
                        }
                        
                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
    
                    div.armePortee {
                        select {
                            width:100%;
                            font-size: 14px;
                            height: 28px;
                            text-align: center;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 15px;
                        }
                    }
    
                    div.armeAspect {
                        select {
                            width:calc(100% - 29px);
                            font-size: 14px;
                            height: 28px;
                            text-align: center;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 15px;
                            border:0px;
                        }

                        button[type="roll"],
                        button[type="action"] {
                            border-left:1px solid $sombre;
                        }
                    }
                }

                div.bonus {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "width":100%,
                            "height":23px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
        
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };

                    label.simple {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }

                    input[type="hidden"] {
                        &.deuxMains {
                            &[value="0"] {
                                & ~ label.precis {
                                    display:none;
                                }
                            }
                        }

                        &.allegee {
                            &[value="1"] {
                                & ~ label.precis {
                                    display:none;
                                }
                            }
                        }
                    }

                    label.precis {
                        display:none;
                        width: calc(261px - 1px);
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
                        padding-right:28px;
            
                        span {
                            width: calc((100% / 2) - 3px);
                            padding-left: 2px;
                            line-height: 27px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            
                        }

                        select {
                            width:calc((100% / 2) + 1px);
                            border:0px;
                            padding:0px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                            border-right:1px solid $sombre;
                        }
                    }

                    label.cadence {
                        display:none;
                        width:381px;
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
            
                        span {
                            width: 251px;
                            padding-left: 2px;
                            line-height: 27px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            
                        }

                        select {
                            width:132px;
                            border:0px;
                            padding:0px;
                            padding-left:15px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                            border-right:1px solid $sombre;
                        }
                    }

                    label.guidage {
                        display:none;
                        margin-top:1px;
                        width:130px;
                        height:28px;
                        margin:0px;
                        margin-right:29px;
                        border-right:1px solid $sombre;
                        border:0px;
                        background:$clair;

                        span.actif,
                        span.inactif {
                            display:none;
                            text-align: center;
                            color:$black;
                            height:28px;
                            line-height: 28px;
                            align-items:center;
                            border-left:1px solid $sombre;

                            &::before {
                                height:28px;
                                line-height: 28px;
                            }
                        }

                        span.actif {
                            border-left:1px solid $clair;
                        }

                        input[type="checkbox"] {
                            height:28px;

                            &:checked {
                                & ~ span.actif {
                                    display:flex;
                                }
                            }

                            &:not(:checked) {
                                & ~ span.inactif {
                                    display:flex;
                                }
                            }
                        }
                    }
                }

                div.effets,
                div.ameliorationsStructurelles,
                div.ameliorationsArmes,
                div.special {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "width":100%,
                            "height":23px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
        
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };
                    
                    display:none;
                    width:100%;
                    background:$clair;
                    justify-content: space-evenly;
                    flex-wrap: wrap;
        
                    label.simple {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
        
                    div.double {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        label.fakeButton {
                            width:calc(100% - 30px);
                            border:0px;
        
                            input[type="checkbox"] {
                                &:not(:checked) {
                                    & ~ span::before {
                                        background:$clair;
                                        color:$black;
                                    }
                                }
                            }
                        }
        
                        input[type="number"] {
                            width: 30px;
                            height: 23px;
                            text-align: center;
                            border-top: 0px;
                            border-right: 0px;
                            border-left: 1px solid $black;
                            border-bottom: 0px;
                            border-radius: 0px;
                            padding: 0px;
                        }
                    }
        
                    div.doubleTexte {
                        width:150px;
                        height:46px;
                        margin:2px;
                        flex-wrap: wrap;
                        border:1px solid $black;

                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }

                        input[type="text"] {
                            width: 100%;
                            height: 23px;
                            text-align: center;
                            border: 1px solid black;
                            border-radius: 0px;
                            padding: 0px;
                        }
                    }
        
                    div.triple {
                        width:150px;
                        height:46px;
                        margin:2px;
                        flex-wrap: wrap;
                        border:1px solid $black;
        
                        div {
                            input[type="number"] {
                                width: calc(50% - 14px);
                                height: 23px;
                                border-radius: 0px;
                                padding: 0px;
                                border-bottom:0px;
                                border-right:0px;
                                border-left:0px;
                                border-top:1px solid $black;
                                color:$black;
        
                                &.R {
                                    text-align:left;
                                    border-left:1px solid $black;
                                }
        
                                &.L {
                                    text-align:right;
                                    border-right:1px solid $black;
                                }
                            }
        
                            span {
                                display:flex;
                                background:$sombre;
                                width: 28px;
                                height: 22px;
                                align-items: center;
                                justify-content: center;
                                font-size: 14px;
                                font-weight: bold;
                                color: $white;
                                border-top: 1px solid $black;
                            }
                            
                        }
        
                        input[type="hidden"] {
                            &[value="0"] {
                                & ~ label span::before,
                                & ~ div span {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
                }

                input[type="hidden"].subMenu {
                    &[value="1"] {
                        & ~ div button[type="action"].effets {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.effets {
                            display:flex;
                        }
                    }

                    &[value="2"] {
                        & ~ div button[type="action"].ameliorationsStructurelles {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.ameliorationsStructurelles {
                            display:flex;
                        }
                    }

                    &[value="3"] {
                        & ~ div button[type="action"].ameliorationsArmes {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.ameliorationsArmes {
                            display:flex;
                        }
                    }
        
                    &[value="4"] {
                        & ~ div button[type="action"].special {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.special {
                            display:flex;
                        }
                    }
                }
            }

            input[type="hidden"].armeSection1 {
                &[value="1"] {
                    & ~ div div.armeSection1 {
                        display:flex;
                    }
                }
            }

            input[type="hidden"].armeSection2 {
                &[value="1"] {
                    & ~ div div.armeSection2 {
                        display:flex;
                    }
                }
            }
        }

        div.subTabDistance {    
            @include block($sombre);
            @include titre($white, transparent);
            @include buttonRoll();
    
            margin-top:10px;
            display:none;
    
            div.data {
                display:none;
            }

            h1.titre {
                display:flex;
            }
    
            div.ligneTitre {
                width:100%;
                justify-content: space-between;
    
                span {
                    display:flex;
                    justify-content: center;
                    color:$black;
                    font-weight:bold;
                    font-size:14px;
                    height:28px;
                    line-height:28px;
                }
    
                div.firstCol {
                    background:$clair;
                    width:calc(100% - (121px * 3) - 159px);
    
                    span {
                        width:100%;
                    }
                }
    
                div.midCol {
                    background:$clair;
                    width:calc(121px - 1px);
                    border-left:1px solid $sombre;
    
                    span {
                        width:100%;
                    }
                }
    
                div.lastCol {
                    background:$clair;
                    width:calc(159px - 1px);
                    border-left:1px solid $sombre;
    
                    span {
                        width:calc(100% - 29px);
    
                        margin-right:29px;
                    }
                }
            }

            div.armesListe {
                width:100%;
                flex-wrap: wrap;

                input[type="hidden"] {
                    &.guidage {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;

                                label.guidage {
                                    display:block;
                                }

                                label.precis {
                                    width:250px;
                                    padding:0px;

                                    span {
                                        width:119px;
                                    }

                                    select {
                                        width:131px;
                                        border-right:0px;
                                    }
                                    
                                }
                            }
                        }
                    }

                    &.cadence {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;

                                label.cadence {
                                    display:flex;
                                    padding-right:28px;
                                }

                                label.guidage {
                                    width:121px;
                                    margin-right:0px;
                                }

                                label.precis {
                                    width:241px;
                                    padding-right:0px;

                                    span {
                                        width: calc(50% - 3px);
                                    }

                                    select {
                                        width:121px;
                                        border-right:0px;
                                    }
                                }
                            }
                        }
                    }
                }

                div.armeSection1,
                div.armeSection2 {
                    $subMenu: (
                        "color":$white,
                        "background":transparent,
                        "borderColor":$black,
                        "fontSize":12px,
                        "fontBold":true,

                        "button":(
                            "width":calc(100% / 3),
                            "widthBL":calc((100% / 3) - 1px),
                            "height":23px
                        )
                    );

                    @include subMenu("subMenu", $subMenu);

                    display:none;
                    width:100%;
                    flex-wrap: wrap;

                    div.bonus {
                        display:none;
                        flex-wrap: wrap;
                        width:100%;
                        justify-content: flex-end;
                    }

                    label.precis,
                    label.guidage {
                        display:none;
                    }
                }

                div.repcontainer {
                    display:flex;
                    width:100%;
                    flex-wrap: wrap;
                }

                div.repitem {
                    $subMenu: (
                        "color":$white,
                        "background":transparent,
                        "borderColor":$black,
                        "fontSize":12px,
                        "fontBold":true,

                        "button":(
                            "width":calc(100% / 3),
                            "widthBL":calc((100% / 3) - 1px),
                            "height":23px
                        )
                    );

                    @include subMenu("subMenu", $subMenu);

                    display:flex;
                    width:100%;
                    flex-wrap: wrap;

                    div.bonus {
                        display:none;
                        flex-wrap: wrap;
                        width:100%;
                        justify-content: flex-end;
                    }

                    label.precis,
                    label.guidage {
                        display:none;
                    }
                }

                div.ligne {
                    width:100%;
                    justify-content: space-between;
                    border-top:1px solid $sombre;
    
                    div.firstCol {
                        background:$clair;
                        width:calc(100% - (121px * 3) - 159px);
                    }
    
                    div.midCol {
                        justify-content: space-between;
                        background:$clair;
                        width:calc(121px - 1px);
                        border-left:1px solid $sombre;
                    }

                    div.lastCol {
                        justify-content: space-between;
                        background:$clair;
                        width:calc(159px - 1px);
                        border-left:1px solid $sombre;
                    }
    
                    div.armeNom {
                        input[type="text"] {
                            width: 100%;
                            font-size: 14px;
                            height: 28px;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 4px;
                            min-width: 0px;
                        }
                    }
    
                    div.armeDegats,
                    div.armeViolence {
                        input[type="number"] {
                            width: calc(50% - 14px);
                            font-size: 14px;
                            height: 28px;
                            padding: 0px;
                            border: 0px;
                            min-width: 0px;
                        }
    
                        input[type="number"].nbre {
                            text-align:right;
                        }
    
                        input[type="number"].bonus {
                            text-align:left;
                        }
    
                        b {
                            display:flex;
                            width: 28px;
                            height: 28px;
                            align-items: center;
                            justify-content: center;
                            font-size: 14px;
                            font-weight: bold;
                        }
                    }
    
                    div.armePortee {
                        select {
                            width:100%;
                            font-size: 14px;
                            height: 28px;
                            text-align: center;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 15px;
                        }
                    }
    
                    div.armeAspect {
                        select {
                            width:calc(100% - 29px);
                            font-size: 14px;
                            height: 28px;
                            text-align: center;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 15px;
                        }

                        button[type="roll"],
                        button[type="action"] {
                            border-left:1px solid $sombre;
                        }
                    }
                }
                
                div.bonus {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "width":100%,
                            "height":23px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
        
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };

                    label.simple {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }

                    input[type="hidden"] {
                        &.deuxMains {
                            &[value="0"] {
                                & ~ label.precis {
                                    display:none;
                                }
                            }
                        }

                        &.allegee {
                            &[value="1"] {
                                & ~ label.precis {
                                    display:none;
                                }
                            }
                        }
                    }

                    label.precis {
                        display:none;
                        width: calc(261px - 1px);
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
                        padding-right:28px;
            
                        span {
                            width: calc((100% / 2) - 3px);
                            padding-left: 2px;
                            line-height: 27px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            
                        }

                        select {
                            width:calc((100% / 2) + 1px);
                            border:0px;
                            padding:0px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                            border-right:1px solid $sombre;
                        }
                    }

                    label.cadence {
                        display:none;
                        width:381px;
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
            
                        span {
                            width: 251px;
                            padding-left: 2px;
                            line-height: 27px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            
                        }

                        select {
                            width:132px;
                            border:0px;
                            padding:0px;
                            padding-left:15px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                            border-right:1px solid $sombre;
                        }
                    }

                    label.guidage {
                        display:none;
                        margin-top:1px;
                        width:130px;
                        height:28px;
                        margin:0px;
                        margin-right:29px;
                        border-right:1px solid $sombre;
                        border:0px;
                        background:$clair;

                        span.actif,
                        span.inactif {
                            display:none;
                            text-align: center;
                            color:$black;
                            height:28px;
                            line-height: 28px;
                            align-items:center;
                            border-left:1px solid $sombre;

                            &::before {
                                height:28px;
                                line-height: 28px;
                            }
                        }

                        span.actif {
                            border-left:1px solid $clair;
                        }

                        input[type="checkbox"] {
                            height:28px;

                            &:checked {
                                & ~ span.actif {
                                    display:flex;
                                }
                            }

                            &:not(:checked) {
                                & ~ span.inactif {
                                    display:flex;
                                }
                            }
                        }
                    }
                }

                div.effets,
                div.ameliorationsArmes,
                div.special {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "width":100%,
                            "height":23px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
        
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };
                    
                    display:none;
                    width:100%;
                    background:$clair;
                    justify-content: space-evenly;
                    flex-wrap: wrap;
        
                    label.simple {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
        
                    div.double {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        label.fakeButton {
                            width:calc(100% - 30px);
                            border:0px;
        
                            input[type="checkbox"] {
                                &:not(:checked) {
                                    & ~ span::before {
                                        background:$clair;
                                        color:$black;
                                    }
                                }
                            }
                        }
        
                        input[type="number"] {
                            width: 30px;
                            height: 23px;
                            text-align: center;
                            border-top: 0px;
                            border-right: 0px;
                            border-left: 1px solid $black;
                            border-bottom: 0px;
                            border-radius: 0px;
                            padding: 0px;
                        }
                    }
        
                    div.doubleTexte {
                        width:150px;
                        height:46px;
                        margin:2px;
                        flex-wrap: wrap;
                        border:1px solid $black;

                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }

                        input[type="text"] {
                            width: 100%;
                            height: 23px;
                            text-align: center;
                            border-top: 1px solid $black;
                            border-bottom: 0px;
                            border-left: 0px;
                            border-right: 0px;
                            border-radius: 0px;
                            padding: 0px;
                        }
                    }
        
                    div.triple {
                        width:150px;
                        height:46px;
                        margin:2px;
                        flex-wrap: wrap;
                        border:1px solid $black;
        
                        div {
                            input[type="number"] {
                                width: calc(50% - 14px);
                                height: 23px;
                                border-radius: 0px;
                                padding: 0px;
                                border-bottom:0px;
                                border-right:0px;
                                border-left:0px;
                                border-top:1px solid $black;
                                color:$black;
        
                                &.R {
                                    text-align:left;
                                    border-left:1px solid $black;
                                }
        
                                &.L {
                                    text-align:right;
                                    border-right:1px solid $black;
                                }
                            }
        
                            span {
                                display:flex;
                                background:$sombre;
                                width: 28px;
                                height: 22px;
                                align-items: center;
                                justify-content: center;
                                font-size: 14px;
                                font-weight: bold;
                                color: $white;
                                border-top: 1px solid $black;
                            }
                            
                        }
        
                        input[type="hidden"] {
                            &[value="0"] {
                                & ~ label span::before,
                                & ~ div span {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
                }

                input[type="hidden"].subMenu {
                    &[value="1"] {
                        & ~ div button[type="action"].effets {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.effets {
                            display:flex;
                        }
                    }

                    &[value="3"] {
                        & ~ div button[type="action"].ameliorationsArmes {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.ameliorationsArmes {
                            display:flex;
                        }
                    }
        
                    &[value="4"] {
                        & ~ div button[type="action"].special {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.special {
                            display:flex;
                        }
                    }
                }
            }

            input[type="hidden"].armeSection1 {
                &[value="1"] {
                    & ~ div div.armeSection1 {
                        display:flex;
                    }
                }
            }

            input[type="hidden"].armeSection2 {
                &[value="1"] {
                    & ~ div div.armeSection2 {
                        display:flex;
                    }
                }
            }
        }

        div.subTabImprovisee {

            display:none;
            flex-wrap: wrap;
            width:100%;

            div.utilisation {
                $fakeButton: (
                    "label":(
                        "width":calc((100% / 2) - 50px),
                        "height":26px
                    ),
                    "span": (
                        "width":100%,
                        "height":26px,
                        "background":$sombre,
                        "color":$white,
                        "border":true
                    ),
                    "shadow":true
                );

                @include block($sombre);
                @include titre($white, transparent);
                @include fakeButton($fakeButton);

                width:50%;
                margin-left:auto;
                margin-right:auto;
                margin-top:10px;

                h1.titre {
                    display:flex;
                }

                div.buttons {
                    display:flex;
                    justify-content: space-evenly;
                    background:$clair;
                    width:100%;
                    padding-top:5px;
                    padding-bottom:5px;
                }
            }

            div.liste {        
                @include block($sombre);
                @include titre($white, transparent);
                @include buttonRoll();
        
                margin-top:10px;
        
                div.data {
                    display:none;
                }
    
                h1.titre {
                    display:flex;
                }
        
                div.ligneTitre {
                    width:100%;
                    justify-content: space-between;
        
                    span {
                        display:flex;
                        background:$clair;
                        justify-content: center;
                        color:$black;
                        font-weight:bold;
                        font-size:14px;
                        height:28px;
                        line-height:28px;
                    }

                    .type {
                        width:calc(100% - 1px - (110px * 4) - 29px);
                    }

                    .jet {
                        width:110px;
                        padding-right:29px;
                    }
                }

                .OD,
                .type,
                .degats,
                .violence {
                    display:flex;
                    justify-content: center;
                    align-items:center;
                    align-content:center;
                }

                .OD {
                    width:110px;
                }
                .degats,
                .violence {
                    width:calc(110px - 1px);
                    border-left:1px solid $sombre;
                }

                .type {
                    border-left:1px solid $sombre;
                }

                .jet {
                    border-left:1px solid $sombre;
                }

                div.ligne {
                    display:flex;
                    width:100%;
                    justify-content: space-between;
                    border-top:1px solid $sombre;

                    .OD,
                    .degats,
                    .violence {
                        height:28px;

                        input[type="text"],
                        input[type="number"] {
                            width:100%;
                            margin: 0px;
                            padding: 0px;
                            border: 0px;
                            min-height: 28px;
                            height:100%;
                            background: white;
                            text-align: center;
                            cursor: context-menu;
                        }
                    }

                    .type {
                        display:flex;
                        width:calc(100% - 1px - (110px * 4) - 29px - 4px);
                        background: white;
                        text-align: justify;
                        justify-content: flex-start;
                        align-items: center;
                        align-content:center;
                        padding-left: 2px;
                        padding-right: 2px;
                    }

                    .jet {
                        width:calc(110px + 29px);
                        height:28px;

                        input[type="number"] {
                            width:calc(100% - 29px);
                            margin: 0px;
                            padding: 0px;
                            border: 0px;
                            min-height: 28px;
                            height:100%;
                            background: white;
                            text-align: center;
                            cursor: context-menu;
                        }
                    }
                }

                div.separationTop {
                    border-top:2px solid $sombre;
                }
            }
        }

        div.subTabAutre {    
            @include block($sombre);
            @include titre($white, transparent);
            @include buttonRoll();
    
            margin-top:10px;
            display:none;
    
            div.data {
                display:none;
            }
    
            h1.titre {
                display:flex;
            }
    
            div.ligneTitre {
                width:100%;
                justify-content: space-between;
    
                span {
                    display:flex;
                    justify-content: center;
                    color:$black;
                    font-weight:bold;
                    font-size:14px;
                    height:28px;
                    line-height:28px;
                }
    
                div.firstCol {
                    background:$clair;
                    width:calc(100% - (116px * 4) - 150px - 29px);
    
                    span {
                        width:100%;
                    }
                }
    
                div.midCol {
                    background:$clair;
                    width:calc(116px - 1px);
                    border-left:1px solid $sombre;
    
                    span {
                        width:100%;
                    }
                }
    
                div.lastCol {
                    background:$clair;
                    width:calc(150px - 1px);
                    padding-right:29px;
                    border-left:1px solid $sombre;
    
                    span {
                        width:100%;
                    }
                }
            }

            div.armesListe {
                width:100%;
                flex-wrap: wrap;

                input[type="hidden"] {
                    &.guidage {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;

                                label.guidage {
                                    display:block;
                                }

                                label.precis {
                                    width:250px;
                                    padding:0px;

                                    span {
                                        width:119px;
                                    }

                                    select {
                                        width:131px;
                                        border-right:0px;
                                    }
                                    
                                }
                            }
                        }
                    }

                    &.cadence {
                        &:not([value="0"]) {
                            & ~ div.bonus {
                                display:flex;

                                label.cadence {
                                    display:flex;
                                    padding-right:28px;
                                }

                                label.guidage {
                                    width:121px;
                                    margin-right:0px;
                                }

                                label.precis {
                                    width:241px;
                                    padding-right:0px;

                                    span {
                                        width: calc(50% - 3px);
                                    }

                                    select {
                                        width:121px;
                                        border-right:0px;
                                    }
                                }
                            }
                        }
                    }
                }

                div.repcontainer {
                    display:flex;
                    width:100%;
                    flex-wrap: wrap;
                }

                div.repitem {
                    $subMenu: (
                        "color":$white,
                        "background":transparent,
                        "borderColor":$black,
                        "fontSize":12px,
                        "fontBold":true,

                        "button":(
                            "width":calc(100% / 3),
                            "widthBL":calc((100% / 3) - 1px),
                            "height":23px
                        )
                    );

                    @include subMenu("subMenu", $subMenu);

                    display:flex;
                    width:100%;
                    flex-wrap: wrap;

                    div.bonus {
                        display:none;
                        flex-wrap: wrap;
                        width:100%;
                        justify-content: flex-end;
                    }

                    label.precis,
                    label.guidage {
                        display:none;
                    }
                }

                div.ligne {
                    width:100%;
                    justify-content: space-between;
                    border-top:1px solid $sombre;
    
                    div.firstCol {
                        background:$clair;
                        width:calc(100% - (116px * 4) - 150px - 29px);
                    }
    
                    div.midCol {
                        justify-content: space-between;
                        background:$clair;
                        width:calc(116px - 1px);
                        border-left:1px solid $sombre;
                    }

                    div.lastCol {
                        justify-content: space-between;
                        background:$clair;
                        width:calc(150px + 29px - 1px);
                        border-left:1px solid $sombre;
                    }
    
                    div.armeNom {
                        input[type="text"] {
                            width: 100%;
                            font-size: 14px;
                            height: 28px;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 4px;
                            min-width: 0px;
                        }
                    }
    
                    div.armeDegats,
                    div.armeViolence {
                        input[type="number"] {
                            width: calc(50% - 14px);
                            font-size: 14px;
                            height: 28px;
                            padding: 0px;
                            border: 0px;
                            min-width: 0px;
                        }
    
                        input[type="number"].nbre {
                            text-align:right;
                        }
    
                        input[type="number"].bonus {
                            text-align:left;
                        }
    
                        b {
                            display:flex;
                            width: 28px;
                            height: 28px;
                            align-items: center;
                            justify-content: center;
                            font-size: 14px;
                            font-weight: bold;
                        }
                    }
    
                    div.armePortee {
                        select {
                            width:100%;
                            font-size: 14px;
                            height: 28px;
                            text-align: center;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 15px;
                        }
                    }
    
                    div.armeAttaque {
                        input[type="number"] {
                            width:calc(100% - 28px);
                            font-size: 14px;
                            height: 28px;
                            text-align: center;
                            padding-top: 0px;
                            padding-right: 0px;
                            padding-bottom: 0px;
                            border: 0px;
                            padding-left: 15px;
                        }

                        input[type="number"].nbre {
                            text-align:right;
                        }
    
                        input[type="number"].bonus {
                            text-align:left;
                        }

                        b {
                            display:flex;
                            width: 28px;
                            height: 28px;
                            align-items: center;
                            justify-content: center;
                            font-size: 14px;
                            font-weight: bold;
                        }
                    }
    
                    div.armeJet {
                        input[type="number"] {
                            width:calc(100% - 28px);
                            font-size: 14px;
                            height: 28px;
                            padding: 0px;
                            border: 0px;
                            border-right:1px solid $sombre;
                        }

                        input[type="number"].nbre {
                            text-align:right;
                        }
    
                        input[type="number"].bonus {
                            text-align:left;
                        }
                    }
                } 

                div.bonus {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "width":100%,
                            "height":23px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
        
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };

                    label.simple {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }

                    input[type="hidden"] {
                        &.deuxMains {
                            &[value="0"] {
                                & ~ label.precis {
                                    display:none;
                                }
                            }
                        }

                        &.allegee {
                            &[value="1"] {
                                & ~ label.precis {
                                    display:none;
                                }
                            }
                        }
                    }

                    label.precis {
                        display:none;
                        width: calc(261px - 1px);
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
                        padding-right:28px;
            
                        span {
                            width: calc((100% / 2) - 3px);
                            padding-left: 2px;
                            line-height: 27px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            
                        }

                        select {
                            width:calc((100% / 2) + 1px);
                            border:0px;
                            padding:0px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                            border-right:1px solid $sombre;
                        }
                    }

                    label.cadence {
                        display:none;
                        width:381px;
                        background: $clair;
                        justify-content: space-between;
                        border-top:1px solid $sombre;
                        border-left:1px solid $sombre;
            
                        span {
                            width: 251px;
                            padding-left: 2px;
                            line-height: 27px;
                            font-size: 14px;
                            color: $black;
                            font-weight: bold;
                            
                        }

                        select {
                            width:132px;
                            border:0px;
                            padding:0px;
                            padding-left:15px;
                            height:28px;
                            text-align: center;
                            border-left:1px solid $sombre;
                            border-right:1px solid $sombre;
                        }
                    }

                    label.guidage {
                        display:none;
                        margin-top:1px;
                        width:130px;
                        height:28px;
                        margin:0px;
                        margin-right:29px;
                        border-right:1px solid $sombre;
                        border:0px;
                        background:$clair;

                        span.actif,
                        span.inactif {
                            display:none;
                            text-align: center;
                            color:$black;
                            height:28px;
                            line-height: 28px;
                            align-items:center;
                            border-left:1px solid $sombre;

                            &::before {
                                height:28px;
                                line-height: 28px;
                            }
                        }

                        span.actif {
                            border-left:1px solid $clair;
                        }

                        input[type="checkbox"] {
                            height:28px;

                            &:checked {
                                & ~ span.actif {
                                    display:flex;
                                }
                            }

                            &:not(:checked) {
                                & ~ span.inactif {
                                    display:flex;
                                }
                            }
                        }
                    }
                }

                div.effets,
                div.ameliorationsArmes,
                div.special {
                    $fakeButton: (
                        "label":(
                            "width":100%,
                            "height":23px
                        ),
                        "span": (
                            "width":100%,
                            "height":23px,
                            "background":$sombre,
                            "color":$white,
                            "border":false
                        ),
                        "shadow":false
                    );
        
                    @include fakeButton($fakeButton) {
                        font-size:12px;
                    };
                    
                    display:none;
                    width:100%;
                    background:$clair;
                    justify-content: space-evenly;
                    flex-wrap: wrap;
        
                    label.simple {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
        
                    div.double {
                        justify-content: space-between;
                        width:150px;
                        height:23px;
                        margin:2px;
                        border:1px solid $black;
        
                        label.fakeButton {
                            width:calc(100% - 30px);
                            border:0px;
        
                            input[type="checkbox"] {
                                &:not(:checked) {
                                    & ~ span::before {
                                        background:$clair;
                                        color:$black;
                                    }
                                }
                            }
                        }
        
                        input[type="number"] {
                            width: 30px;
                            height: 23px;
                            text-align: center;
                            border-top: 0px;
                            border-right: 0px;
                            border-left: 1px solid $black;
                            border-bottom: 0px;
                            border-radius: 0px;
                            padding: 0px;
                        }
                    }
        
                    div.doubleTexte {
                        width:150px;
                        height:46px;
                        margin:2px;
                        flex-wrap: wrap;
                        border:1px solid $black;

                        input[type="checkbox"] {
                            &:not(:checked) {
                                & ~ span::before {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }

                        input[type="text"] {
                            width: 100%;
                            height: 23px;
                            text-align: center;
                            border-top: 1px solid $black;
                            border-bottom: 0px;
                            border-left: 0px;
                            border-right: 0px;
                            border-radius: 0px;
                            padding: 0px;
                        }
                    }
        
                    div.triple {
                        width:150px;
                        height:46px;
                        margin:2px;
                        flex-wrap: wrap;
                        border:1px solid $black;
        
                        div {
                            input[type="number"] {
                                width: calc(50% - 14px);
                                height: 23px;
                                border-radius: 0px;
                                padding: 0px;
                                border-bottom:0px;
                                border-right:0px;
                                border-left:0px;
                                border-top:1px solid $black;
                                color:$black;
        
                                &.R {
                                    text-align:left;
                                    border-left:1px solid $black;
                                }
        
                                &.L {
                                    text-align:right;
                                    border-right:1px solid $black;
                                }
                            }
        
                            span {
                                display:flex;
                                background:$sombre;
                                width: 28px;
                                height: 22px;
                                align-items: center;
                                justify-content: center;
                                font-size: 14px;
                                font-weight: bold;
                                color: $white;
                                border-top: 1px solid $black;
                            }
                            
                        }
        
                        input[type="hidden"] {
                            &[value="0"] {
                                & ~ label span::before,
                                & ~ div span {
                                    background:$clair;
                                    color:$black;
                                }
                            }
                        }
                    }
                }

                input[type="hidden"].subMenu {
                    &[value="1"] {
                        & ~ div button[type="action"].effets {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.effets {
                            display:flex;
                        }
                    }

                    &[value="3"] {
                        & ~ div button[type="action"].ameliorationsArmes {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.ameliorationsArmes {
                            display:flex;
                        }
                    }
        
                    &[value="4"] {
                        & ~ div button[type="action"].special {
                            box-shadow: 0px 0px 7px 0px $black inset;
                        }
        
                        & ~ div.special {
                            display:flex;
                        }
                    }
                }
            }
            
            input[type="hidden"].styleCombat {
                &[value="pilonnage"] {
                    & ~ div div.bonus {
                        display:flex;
                    }

                    & ~ div label.pilonnage {
                        display:flex;
                    }

                    & ~ div label.pilonnageDetails {
                        display:flex;
                    }
                }
            }
    
            input[type="hidden"].bonusCarac {
                &[value="1"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div div.bonus {
                        display:flex;
    
                        label.pilonnage {
                            width:calc((121px * 2) - 1px);
                            padding-right:0px;
    
                            input[type="number"] {
                                border-right:0px;
                            }
                        }
                    }
    
                    & ~ div div.bonusCarac {
                        display:flex;
    
                        select:first-of-type {
                            display:inline-block;
                            width:100%;
                        }
                    }
                }
    
                &[value="2"] {
                    & ~ div.titre {
                        button[type="action"].bonusCaracL1,
                        button[type="action"].bonusCaracL2 {
                            box-shadow: 0px 0px 7px 0px #000000 inset;
                        }
                    }
    
                    & ~ div div.bonus {
                        display:flex;
    
                        label.pilonnage {
                            width:calc((121px * 2) - 1px);
                            padding-right:0px;

    
                            input[type="number"] {
                                border-right:0px;
                            }
                        }
                    }
    
                    & ~ div div.bonusCarac {
                        display:flex;
                        
                        select:first-of-type {
                            display:inline-block;
                            width:50%;
                        }
                        
                        select:last-of-type {
                            display:inline-block;
                            width:50%;
                        }
                    }
                }
            }

            input[type="hidden"].armeSection1 {
                &[value="1"] {
                    & ~ div div.armeSection1 {
                        display:flex;
                    }
                }
            }

            input[type="hidden"].armeSection2 {
                &[value="1"] {
                    & ~ div div.armeSection2 {
                        display:flex;
                    }
                }
            }
        }
    }

    //ZONE DU BAS - COL GAUCHE PJ
    div.grenade {
        $titre:(
            "titre":(
                "hasButton":true,
                "hasBonusCarac":true
            )
        );

        $subMenu: (
            "color":$white,
            "background":transparent,
            "borderColor":$black,
            "fontSize":12px,
            "fontBold":true,

            "button":(
                "width":100%,
                "widthBL":calc(100% - 1px),
                "height":23px
            )
        );

        @include block($sombre);
        @include titre($white, transparent, $titre);
        @include buttonRoll();
        @include subMenu("subMenu", $subMenu);

        div.titre {
            display:flex;
            
            h1.titre {
                display:flex;
            }

            div {
                display:flex;
                height:28px;
                width:80px;
                justify-content: space-between;
                align-items: center;
                align-content: center;
                margin-left:auto;

                input[type="number"] {
                    width: 37px;
                    height: 100%;
                    text-align: center;
                    padding: 0px;
                    border: 0px;
                    z-index: 9;
                }

                b {
                    display:flex;
                    width: 6px;
                    height: 100%;
                    color: $black;
                    background: $white;
                    justify-content: center;
                    align-items: center;
                }
            }
        }

        div.roll {
            display:flex;
            justify-content: space-between;
            width:100%;

            select {
                width:calc(100% / 2);
                font-size: 14px;
                height: 28px;
                text-align: center;
                padding-top: 0px;
                padding-right: 0px;
                padding-bottom: 0px;
                border: 0px;
                padding-left: 15px;

                &:last-of-type {
                    width:calc(100% / 2);
                    border-left:1px solid $sombre;
                }
            }
        }

        div.ligne {
            display:flex;
            justify-content: space-between;
            align-items:center;
            align-content:center;
            width:100%;
            border-top:1px solid $sombre;
            background:$clair;

            span {
                display:flex;

                &.nom {
                    width: calc(100px - 2px);
                    padding-left: 2px;
                    line-height: 28px;
                    font-weight: bold;
                    font-size: 14px;
                }

                &.description {
                    height:100%;
                    width: calc(100% - 100px - 29px - 4px);
                    padding-left: 2px;
                    padding-right:2px;
                    line-height: 18px;
                    font-weight: normal;
                    font-size: 13px;
                    border-right:1px solid $sombre;
                    align-items:center;
                    align-content:center;
                }
            }
        }

        div.effets {
            $fakeButton: (
                "label":(
                    "width":100%,
                    "height":23px
                ),
                "span": (
                    "width":100%,
                    "height":23px,
                    "background":$sombre,
                    "color":$white,
                    "border":false
                ),
                "shadow":false
            );

            @include fakeButton($fakeButton) {
                font-size:12px;
            };
            
            display:none;
            width:100%;
            background:$clair;
            justify-content: space-evenly;
            flex-wrap: wrap;

            label.simple {
                justify-content: space-between;
                width:200px;
                height:23px;
                margin:2px;
                border:1px solid $black;

                input[type="checkbox"] {
                    &:not(:checked) {
                        & ~ span::before {
                            background:$clair;
                            color:$black;
                        }
                    }
                }
            }

            div.double {
                justify-content: space-between;
                width:150px;
                height:23px;
                margin:2px;
                border:1px solid $black;

                label.fakeButton {
                    width:calc(100% - 30px);
                    border:0px;

                    input[type="checkbox"] {
                        &:not(:checked) {
                            & ~ span::before {
                                background:$clair;
                                color:$black;
                            }
                        }
                    }
                }

                input[type="number"] {
                    width: 30px;
                    height: 23px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-left: 1px solid $black;
                    border-bottom: 0px;
                    border-radius: 0px;
                    padding: 0px;
                }
            }

            div.doubleTexte {
                width:150px;
                height:46px;
                margin:2px;
                flex-wrap: wrap;
                border:1px solid $black;

                input[type="checkbox"] {
                    &:not(:checked) {
                        & ~ span::before {
                            background:$clair;
                            color:$black;
                        }
                    }
                }

                input[type="text"] {
                    width: 100%;
                    height: 23px;
                    text-align: center;
                    border-top: 1px solid $black;
                    border-bottom: 0px;
                    border-left: 0px;
                    border-right: 0px;
                    border-radius: 0px;
                    padding: 0px;
                }
            }

            div.triple {
                width:150px;
                height:46px;
                margin:2px;
                flex-wrap: wrap;
                border:1px solid $black;

                div {
                    input[type="number"] {
                        width: calc(50% - 14px);
                        height: 23px;
                        border-radius: 0px;
                        padding: 0px;
                        border-bottom:0px;
                        border-right:0px;
                        border-left:0px;
                        border-top:1px solid $black;
                        color:$black;

                        &.R {
                            text-align:left;
                            border-left:1px solid $black;
                        }

                        &.L {
                            text-align:right;
                            border-right:1px solid $black;
                        }
                    }

                    span {
                        display:flex;
                        background:$sombre;
                        width: 28px;
                        height: 22px;
                        align-items: center;
                        justify-content: center;
                        font-size: 14px;
                        font-weight: bold;
                        color: $white;
                        border-top: 1px solid $black;
                    }
                    
                }

                input[type="hidden"] {
                    &[value="0"] {
                        & ~ label span::before,
                        & ~ div span {
                            background:$clair;
                            color:$black;
                        }
                    }
                }
            }
        }

        div.bonusCarac {
            display:none;
            width: 100%;
            background: $clair;
            justify-content: space-between;
            border-top:1px solid $sombre;
            
            select {
                display:none;
                font-size: 14px;
                height: 28px;
                text-align: center;
                padding-top: 0px;
                padding-right: 0px;
                padding-bottom: 0px;
                border: 0px;
                padding-left: 15px;
            }
        }

        input[type="hidden"].effets {
            &[value="1"] {
                & ~ div button[type="action"].effets {
                    box-shadow: 0px 0px 7px 0px $black inset;
                }

                & ~ div.effets {
                    display:flex;
                }
            }
        }

        input[type="hidden"].bonusCarac {
            &[value="1"] {
                & ~ div.titre {
                    button[type="action"].bonusCaracL1 {
                        box-shadow: 0px 0px 7px 0px #000000 inset;
                    }
                }
                & ~ div.bonusCarac {
                    display:flex;

                    select:first-of-type {
                        display:inline-block;
                        width:100%;
                    }
                }
            }

            &[value="2"] {
                & ~ div.titre {
                    button[type="action"].bonusCaracL1,
                    button[type="action"].bonusCaracL2 {
                        box-shadow: 0px 0px 7px 0px #000000 inset;
                    }
                }

                & ~ div.bonusCarac {
                    display:flex;
                    
                    select:first-of-type {
                        display:inline-block;
                        width: calc(100% / 2);
                    }
                    
                    select:last-of-type {
                        display:inline-block;
                        width: calc(100% / 2);
                        border-left:1px solid $sombre;
                    }
                }
            }
        }
    }

    //ZONE DU BAS - COL GAUCHE PNJ
    div.grenadePNJ {
        $titre:(
            "titre":(
                "hasButton":true
            )
        );

        $subMenu: (
            "color":$white,
            "background":transparent,
            "borderColor":$black,
            "fontSize":12px,
            "fontBold":true,

            "button":(
                "width":100%,
                "widthBL":calc(100% - 1px),
                "height":23px
            )
        );

        @include block($sombre);
        @include titre($white, transparent, $titre);
        @include buttonRoll();
        @include subMenu("subMenu", $subMenu);

        div.titre {
            display:flex;
            
            h1.titre {
                display:flex;
            }

            div {
                display:flex;
                height:28px;
                width:80px;
                justify-content: space-between;
                align-items: center;
                align-content: center;
                margin-left:auto;

                input[type="number"] {
                    width: 37px;
                    height: 100%;
                    text-align: center;
                    padding: 0px;
                    border: 0px;
                    z-index: 9;
                }

                b {
                    display:flex;
                    width: 6px;
                    height: 100%;
                    color: $black;
                    background: $white;
                    justify-content: center;
                    align-items: center;
                }
            }
        }

        div.roll {
            display:flex;
            justify-content: space-between;
            width:100%;

            select {
                width:100%;
                font-size: 14px;
                height: 28px;
                text-align: center;
                padding-top: 0px;
                padding-right: 0px;
                padding-bottom: 0px;
                border: 0px;
                padding-left: 15px;
            }
        }

        div.ligne {
            display:flex;
            justify-content: space-between;
            align-items:center;
            align-content:center;
            width:100%;
            border-top:1px solid $sombre;
            background:$clair;

            span {
                display:flex;

                &.nom {
                    width: calc(100px - 2px);
                    padding-left: 2px;
                    line-height: 28px;
                    font-weight: bold;
                    font-size: 14px;
                }

                &.description {
                    height:100%;
                    width: calc(100% - 100px - 29px - 4px);
                    padding-left: 2px;
                    padding-right:2px;
                    line-height: 18px;
                    font-weight: normal;
                    font-size: 13px;
                    border-right:1px solid $sombre;
                    align-items:center;
                    align-content:center;
                }
            }
        }

        div.effets {
            $fakeButton: (
                "label":(
                    "width":100%,
                    "height":23px
                ),
                "span": (
                    "width":100%,
                    "height":23px,
                    "background":$sombre,
                    "color":$white,
                    "border":false
                ),
                "shadow":false
            );

            @include fakeButton($fakeButton) {
                font-size:12px;
            };
            
            display:none;
            width:100%;
            background:$clair;
            justify-content: space-evenly;
            flex-wrap: wrap;

            label.simple {
                justify-content: space-between;
                width:200px;
                height:23px;
                margin:2px;
                border:1px solid $black;

                input[type="checkbox"] {
                    &:not(:checked) {
                        & ~ span::before {
                            background:$clair;
                            color:$black;
                        }
                    }
                }
            }

            div.double {
                justify-content: space-between;
                width:150px;
                height:23px;
                margin:2px;
                border:1px solid $black;

                label.fakeButton {
                    width:calc(100% - 30px);
                    border:0px;

                    input[type="checkbox"] {
                        &:not(:checked) {
                            & ~ span::before {
                                background:$clair;
                                color:$black;
                            }
                        }
                    }
                }

                input[type="number"] {
                    width: 30px;
                    height: 23px;
                    text-align: center;
                    border-top: 0px;
                    border-right: 0px;
                    border-left: 1px solid $black;
                    border-bottom: 0px;
                    border-radius: 0px;
                    padding: 0px;
                }
            }

            div.doubleTexte {
                width:150px;
                height:46px;
                margin:2px;
                flex-wrap: wrap;
                border:1px solid $black;

                input[type="checkbox"] {
                    &:not(:checked) {
                        & ~ span::before {
                            background:$clair;
                            color:$black;
                        }
                    }
                }

                input[type="text"] {
                    width: 100%;
                    height: 23px;
                    text-align: center;
                    border-top: 1px solid $black;
                    border-bottom: 0px;
                    border-left: 0px;
                    border-right: 0px;
                    border-radius: 0px;
                    padding: 0px;
                }
            }

            div.triple {
                width:150px;
                height:46px;
                margin:2px;
                flex-wrap: wrap;
                border:1px solid $black;

                div {
                    input[type="number"] {
                        width: calc(50% - 14px);
                        height: 23px;
                        border-radius: 0px;
                        padding: 0px;
                        border-bottom:0px;
                        border-right:0px;
                        border-left:0px;
                        border-top:1px solid $black;
                        color:$black;

                        &.R {
                            text-align:left;
                            border-left:1px solid $black;
                        }

                        &.L {
                            text-align:right;
                            border-right:1px solid $black;
                        }
                    }

                    span {
                        display:flex;
                        background:$sombre;
                        width: 28px;
                        height: 22px;
                        align-items: center;
                        justify-content: center;
                        font-size: 14px;
                        font-weight: bold;
                        color: $white;
                        border-top: 1px solid $black;
                    }
                    
                }

                input[type="hidden"] {
                    &[value="0"] {
                        & ~ label span::before,
                        & ~ div span {
                            background:$clair;
                            color:$black;
                        }
                    }
                }
            }
        }

        input[type="hidden"].effets {
            &[value="1"] {
                & ~ div button[type="action"].effets {
                    box-shadow: 0px 0px 7px 0px $black inset;
                }

                & ~ div.effets {
                    display:flex;
                }
            }
        }
    }

    //ZONE DU BAS - COL DROITE PJ
    div.protections {
        $subMenu: (
            "width":calc(100% / 4),
            "color":$white,
            "background":$sombre,
            "borderColor":$black,
            "fontSize":1.2em,
            "fontBold":true,

            "button":(
                "width":100%,
                "widthBL":calc(100% - 1px),
                "height":26px
            )
        );

        @include block($sombre);
        @include titre($white, transparent);

        display:none;
        
        h1.titre {
            display:flex;
        }

        div.ligneTitre,
        div.repcontainer,
        div.repitem {
            display:flex;
            width:100%;
            justify-content: space-between;
        }

        div.repcontainer {
            flex-wrap: wrap;
        }

        div.ligneTitre {
            span {
                display:flex;
                font-weight: bold;
                line-height: 28px;
                font-size: 14px;
                color: $black;
                align-items: center;
                justify-content: center;
            }        
        }

        .col4 {
            display:flex;
            width:calc(100% / 4);
            background:$clair;
            justify-content: center;
            align-items:center;
            align-content:center;
        }

        .col4BL {
            display:flex;
            width:calc((100% / 4) - 1px);
            border-left:1px solid $sombre;
            background:$clair;
            justify-content: center;
            align-items:center;
            align-content:center;
        }

        .repitem {
            @include subMenu("subMenu", $subMenu);

            border-top:1px solid $sombre;

            input[type="text"],
            input[type="number"] {
                width:100%;
                text-align: center;
                padding: 0px;
                margin: 0px;
                border: 0px;
                height: 28px;
            }

            input[type="hidden"].porte {
                &[value="1"] ~ div button[type="action"].porte {
                    box-shadow: 0px 0px 7px 0px $black inset;
                }
            }
        }
    }

    //ZONE DU BAS - 3COL
    div.effetsArmes {
        @include block($sombre);
        @include titre($white);

        h1.titre {
            display:flex;
        }

        select {
            width: 100%;
            padding: 0px;
            border: 0px;
            border-bottom:1px solid $sombre;
        }

        span {
            display:flex;
            width:100%;
            background-color: #f5f5f5;
            min-height: 28px;
            padding-right: 2px;
            padding-left: 2px;
            text-align: justify;
            white-space: pre-line;
        }
    }

    input[type="hidden"] {
        &.subTabDistance {
            &[value="1"] {
                & ~ div button[type="action"].subTabDistance {
                    box-shadow: 0px 0px 7px 0px $black inset;
                }
                
                & ~ .subTabMelee,
                & ~ div .subTabDistance {
                    display:flex;
                }
            }
        }
        
        &.subTabMelee {
            &[value="2"] {
                & ~ div button[type="action"].subTabMelee {
                    box-shadow: 0px 0px 7px 0px $black inset;
                }

                & ~ .subTabMelee,
                & ~ div .subTabMelee {
                    display:flex;
                }
            }
        }
        
        &.subTabAutre {
            &[value="3"] {
                & ~ div button[type="action"].subTabAutre {
                    box-shadow: 0px 0px 7px 0px $black inset;
                }

                & ~ .subTabAutre,
                & ~ div .subTabAutre {
                    display:flex;
                }
            }
        }

        &.subTabDefensif {
            &[value="4"] {
                & ~ div button[type="action"].subTabDefensif {
                    box-shadow: 0px 0px 7px 0px $black inset;
                }

                & ~ .protections,
                & ~ div .protections {
                    display:flex;
                }
            }
        }

        &.subTabArmure {
            &[value="5"] {
                & ~ div button[type="action"].subTabArmure {
                    box-shadow: 0px 0px 7px 0px $black inset;
                }

                & ~ .subTabArmure >div {
                    display:flex;
                }
            }
        }

        &.subTabImprovisee {
            &[value="6"] {
                & ~ div button[type="action"].subTabImprovisee {
                    box-shadow: 0px 0px 7px 0px $black inset;
                }

                & ~ .subTabImprovisee,
                & ~ div .subTabImprovisee {
                    display:flex;
                }
            }
        }

    }

    >div.col >*
    {
        margin-bottom:10px;
    }

    div.marginTop {
        margin-top:10px;
    }
}