/* table_editor, par Sébastien L.
 */

/***************************/
/* Le tableau              */
/***************************/
.tableau{
    display: grid;
    grid-auto-rows: minmax(24px, auto);
    gap: 2px;
    margin-top: 5px;
    background: #fffefa;
    margin: 10px;
}
.entete{
    background: #09c;
    font-weight: bold;
}
.tableau>div{
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #999;
    grid-column: var(--x) / span var(--nbX);
    grid-row: var(--y) / span var(--nbY);
}

[data-editable="true"]{
    cursor: pointer;
}

/***************************/
/* Statut des cellules     */
/***************************/
.selected{	outline: 1px solid #c09; }
.modifying{	outline: 2px dashed #c09; }
.wait{		outline: 2px solid #c90; }
.good{		outline: 2px solid #9c0; }
.modified { font-weight: bold; color:indigo}
/***************************/
/* Message                 */
/***************************/
.message{
    position: fixed;
    bottom: 100%;
    left: 50%;
    z-index: 10;
    padding: 20px;
    border-radius: 0 0 10px 10px;
    background: #ec7068;
    background: #90c;
    color: #FFF;
    font-size: 24px;
    animation: message 3s;
    transform: translate(-50%, 0);
}
@keyframes message{
    20%{transform: translate(-50%, 100%)}
    80%{transform: translate(-50%, 100%)}
}