.container {
    display: grid;
    grid-template-rows: 40px 1fr 40px;
    height: 100vh;
    width: 100vw;
}

.main-content {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: 7% 43% 43% 7%; /* Largeurs des colonnes en pourcentage */
    grid-auto-flow: column; /* Empile les items par colonne */
}

.item,
.stock {
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 5px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.item .nb,
.stock .nb {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
}

.item.head {
    background-image: url('/img/head.png');
}

.item.body {
    background-image: url('/img/body.png');
}

.item.actuator {
    background-image: url('/img/actuator.png');
}

.item.right-hand {
    background-image: url('/img/right-hand.png');
}

.item.left-hand {
    background-image: url('/img/left-hand.png');
}

.item.foot {
    background-image: url('/img/foot.png');
}

.item img {
    max-width: 80%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.stock {
    grid-row: 1 / -1;
    grid-column: 4;
    padding: 0;
}

.stock .content-stock {
    width: 100%;
    height: 100%;
}

.stock .output {
    border: 1px solid black;
    width: 100%;
    height: 25%;
    position: relative;
    box-sizing: border-box;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.stock .output.right-arm {
    background-image: url('/img/stock_right-arm.png');
}

.stock .output.left-arm {
    background-image: url('/img/stock_left-arm.png');
}

.stock .output.leg {
    background-image: url('/img/stock-leg.png');
}

.stock .output.bot {
    background-image: url('/img/stock_bot.png');
}

.main-content.factory .item {
    border: 1px solid #000;
}

.main-content.factory .stock {
    border-width: 0 1px 0 0; 
    border-style: solid; 
    border-color: #000000;
}

.main-content.choose-the-workshops .item {
    background-color: #CCC;
}

.item.full-column {
    grid-row: span 6;
}

.workshop button {
    margin: 20px auto;
    font-size: 18px;
    font-size: 1.8rem;
}

.workshop .add_right-arm, 
.workshop .add_left-arm,
.workshop .add_leg,
.workshop .add_bot {
    width: 50%;
    align-items: center;
    justify-content: center;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-color: black;
    border-style: solid;
}

.workshop .add_right-arm {
    background-image: url('/img/choice_workshop_right-arm.png');
    border-width: 0 1px 0 0;
}

.workshop .add_left-arm {
    background-image: url('/img/choice_workshop_left-arm.png');
    border-width: 0 1px 0 0;
}

.workshop .add_leg {
    background-image: url('/img/choice_workshop_leg.png');
    border-width: 0 1px 0 0;
}

.workshop .add_bot {
    background-image: url('/img/choice_workshop_bot.png');
    border-width: 0 0 0 0;
}