/*==================================================
    SyncBoard
    Apple macOS Sonoma UI
    Partie 1 / 8
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{

    --background:#f5f5f7;

    --surface:#ffffff;

    --surface-hover:#fbfbfc;

    --glass:rgba(255,255,255,.72);

    --border:rgba(0,0,0,.06);

    --border-light:rgba(255,255,255,.55);

    --text:#1d1d1f;

    --text-secondary:#6e6e73;

    --blue:#0071E3;

    --blue-hover:#0A84FF;

    --green:#30D158;

    --orange:#FF9F0A;

    --red:#FF453A;

    --radius:22px;

    --radius-small:16px;

    --transition:.22s cubic-bezier(.4,0,.2,1);

    --shadow-small:
        0 8px 24px rgba(0,0,0,.05);

    --shadow:

        0 18px 45px rgba(0,0,0,.08);

    --shadow-large:

        0 35px 90px rgba(0,0,0,.14);

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    width:100%;

    height:100%;

}

body{

    width:100%;

    height:100%;

    overflow:hidden;

    font-family:"Inter",sans-serif;

    background:var(--background);

    color:var(--text);

    -webkit-font-smoothing:antialiased;

    position:relative;

}

/*=============================
        BACKGROUND
=============================*/

body::before{

    content:"";

    position:fixed;

    width:650px;

    height:650px;

    left:-250px;

    top:-250px;

    border-radius:50%;

    background:

        radial-gradient(circle,

        rgba(0,113,227,.08),

        transparent 70%);

    pointer-events:none;

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    width:700px;

    height:700px;

    right:-280px;

    bottom:-280px;

    border-radius:50%;

    background:

        radial-gradient(circle,

        rgba(255,255,255,.9),

        transparent 72%);

    pointer-events:none;

    z-index:-2;

}

/*=============================
        SCROLLBAR
=============================*/

::-webkit-scrollbar{

    width:11px;

    height:11px;

}

::-webkit-scrollbar-track{

    background:transparent;

}

::-webkit-scrollbar-thumb{

    background:#d5d5da;

    border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

    background:#c3c3c8;

}

/*=============================
        APP
=============================*/

.app{

    display:grid;

    grid-template-columns:280px 1fr;

    width:100vw;

    height:100vh;

}

/*=============================
        SIDEBAR
=============================*/

.sidebar{

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(35px);

    -webkit-backdrop-filter:blur(35px);

    border-right:1px solid var(--border);

    padding:22px;

    display:flex;

    flex-direction:column;

    gap:26px;

}

/*=============================
        LOGO
=============================*/

.sidebar-logo{

    display:flex;

    align-items:center;

    gap:16px;

}

.logo-icon{

    width:64px;

    height:64px;

    border-radius:20px;

    background:

        linear-gradient(

        180deg,

        #0A84FF,

        #0071E3);

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:24px;

    font-weight:800;

    box-shadow:

        0 18px 45px rgba(0,113,227,.25);

}

.sidebar-logo h2{

    font-size:25px;

    font-weight:800;

    letter-spacing:-1px;

}

.sidebar-logo span{

    display:block;

    margin-top:5px;

    color:var(--text-secondary);

    font-size:14px;

}

/*=============================
        MENU
=============================*/

.sidebar-menu{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.menu-item{

    height:52px;

    border:none;

    background:transparent;

    border-radius:16px;

    padding:0 18px;

    text-align:left;

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

    color:var(--text);

}

.menu-item:hover{

    background:white;

    transform:translateX(6px);

    box-shadow:

        var(--shadow-small);

}

.menu-item.active{

    background:white;

    box-shadow:

        var(--shadow-small);

}
/*==================================================
        CONTENT
==================================================*/

.content{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    position:relative;

}

/*==================================================
        HEADER
==================================================*/

.topbar{

    height:88px;

    margin:20px 20px 0 20px;

    padding:0 28px;

    border-radius:24px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

    border:1px solid rgba(255,255,255,.65);

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:var(--shadow);

    flex-shrink:0;

}

.topbar h1{

    font-size:30px;

    font-weight:800;

    letter-spacing:-1px;

}

.topbar p{

    margin-top:4px;

    color:var(--text-secondary);

    font-size:14px;

}

/*==================================================
        BOUTON APPLE
==================================================*/

#newColumn{

    border:none;

    outline:none;

    height:50px;

    padding:0 24px;

    border-radius:18px;

    background:linear-gradient(
        180deg,
        #0A84FF,
        #0071E3
    );

    color:white;

    font-size:15px;

    font-weight:700;

    transition:var(--transition);

    box-shadow:

        0 15px 35px rgba(0,113,227,.28);

}

#newColumn:hover{

    transform:

        translateY(-2px)
        scale(1.02);

    background:linear-gradient(
        180deg,
        #2994ff,
        #0077ED
    );

}

#newColumn:active{

    transform:scale(.97);

}

/*==================================================
        BOARD
==================================================*/

#board{

    flex:1;

    padding:24px;

    display:grid;

    grid-auto-flow:column;

    grid-auto-columns:340px;

    gap:20px;

    overflow-x:auto;

    overflow-y:hidden;

    align-items:start;

}

/*==================================================
        COLUMN
==================================================*/

.column{

    display:flex;

    flex-direction:column;

    max-height:100%;

    border-radius:24px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

    border:1px solid rgba(255,255,255,.65);

    box-shadow:var(--shadow);

    transition:var(--transition);

    overflow:hidden;

}

.column:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-large);

}

/*==================================================
        COLUMN HEADER
==================================================*/

.column-header{

    height:68px;

    padding:0 18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-bottom:1px solid rgba(0,0,0,.05);

}

.column-header h2{

    font-size:17px;

    font-weight:700;

    letter-spacing:-.4px;

}

/*==================================================
        BOUTON +
==================================================*/

.add-card{

    width:38px;

    height:38px;

    border:none;

    border-radius:14px;

    background:#f2f2f5;

    font-size:22px;

    transition:var(--transition);

}

.add-card:hover{

    background:#0071E3;

    color:white;

    transform:rotate(90deg);

}
/*==================================================
        LISTE DES CARTES
==================================================*/

.cards{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:16px;

    overflow-y:auto;

    overflow-x:hidden;

    min-height:80px;

}

.cards::-webkit-scrollbar{

    width:8px;

}

.cards::-webkit-scrollbar-thumb{

    background:#d8d8dc;

    border-radius:999px;

}

/*==================================================
        CARTE
==================================================*/

.card{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:10px;

    background:rgba(255,255,255,.94);

    border:1px solid rgba(0,0,0,.04);

    border-radius:18px;

    padding:16px;

    cursor:pointer;

    transition:all .22s cubic-bezier(.4,0,.2,1);

    box-shadow:

        0 4px 12px rgba(0,0,0,.04),

        0 1px 2px rgba(0,0,0,.03);

}

.card:hover{

    transform:

        translateY(-2px);

    box-shadow:

        0 18px 40px rgba(0,0,0,.10);

}

/*==================================================
        TITRE
==================================================*/

.card-title{

    font-size:15px;

    font-weight:700;

    line-height:1.4;

    color:var(--text);

    word-break:break-word;

}

/*==================================================
        DESCRIPTION
==================================================*/

.card-description{

    font-size:13px;

    line-height:1.55;

    color:var(--text-secondary);

    word-break:break-word;

}

/*==================================================
        FOOTER
==================================================*/

.card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:6px;

}

.card-date{

    font-size:12px;

    color:#8c8c90;

}

.card-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 10px;

    border-radius:999px;

    background:#eef6ff;

    color:#0071E3;

    font-size:11px;

    font-weight:700;

}

/*==================================================
        AJOUTER UNE CARTE
==================================================*/

.new-card{

    margin:0 16px 16px 16px;

    height:46px;

    border:none;

    border-radius:16px;

    background:#f3f3f5;

    color:#6e6e73;

    font-size:14px;

    font-weight:700;

    transition:all .22s cubic-bezier(.4,0,.2,1);

}

.new-card:hover{

    background:#0071E3;

    color:white;

    transform:translateY(-2px);

}

/*==================================================
        AJOUTER UNE COLONNE
==================================================*/

.add-column{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    height:220px;

    border-radius:24px;

    border:2px dashed rgba(0,0,0,.08);

    background:rgba(255,255,255,.55);

    backdrop-filter:blur(25px);

    cursor:pointer;

    transition:all .22s cubic-bezier(.4,0,.2,1);

}

.add-column:hover{

    transform:

        translateY(-3px);

    border-color:#0071E3;

    background:white;

    box-shadow:

        0 25px 55px rgba(0,113,227,.12);

}

.add-icon{

    width:76px;

    height:76px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:white;

    color:#0071E3;

    font-size:40px;

    font-weight:300;

    box-shadow:

        0 12px 30px rgba(0,0,0,.08);

    transition:all .22s cubic-bezier(.4,0,.2,1);

}

.add-column:hover .add-icon{

    transform:rotate(90deg);

}

.add-column p{

    margin-top:20px;

    font-size:15px;

    font-weight:700;

    color:var(--text-secondary);

}

/*==================================================
        ETAT VIDE
==================================================*/

.column-empty{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:140px;

    color:#9b9ba1;

    font-size:13px;

    text-align:center;

    padding:20px;

}
/*==================================================
        MODAL OVERLAY
==================================================*/

.modal-overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(25,28,35,.22);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    opacity:0;

    visibility:hidden;

    transition:.22s ease;

    z-index:999999;

}

.modal-overlay.show{

    opacity:1;

    visibility:visible;

}

/*==================================================
        MODAL
==================================================*/

.modal{

    width:520px;

    max-width:92%;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(35px);

    -webkit-backdrop-filter:blur(35px);

    border:1px solid rgba(255,255,255,.65);

    border-radius:30px;

    padding:30px;

    box-shadow:

        0 40px 90px rgba(0,0,0,.20);

    animation:modalShow .22s ease;

}

@keyframes modalShow{

    from{

        transform:
            translateY(25px)
            scale(.95);

        opacity:0;

    }

    to{

        transform:
            translateY(0)
            scale(1);

        opacity:1;

    }

}

.modal h2{

    font-size:27px;

    font-weight:800;

    letter-spacing:-1px;

    margin-bottom:22px;

}

/*==================================================
        INPUT
==================================================*/

.modal input{

    width:100%;

    height:56px;

    border:none;

    outline:none;

    padding:0 18px;

    border-radius:18px;

    background:#f2f2f5;

    font-size:16px;

    transition:.2s;

}

.modal input:focus{

    background:white;

    box-shadow:

        0 0 0 4px rgba(0,113,227,.12);

}

/*==================================================
        BUTTONS
==================================================*/

.modal-buttons{

    display:flex;

    justify-content:flex-end;

    gap:14px;

    margin-top:24px;

}

.modal-buttons button{

    height:48px;

    padding:0 22px;

    border:none;

    border-radius:16px;

    font-size:15px;

    font-weight:700;

    transition:.2s;

}

.secondary{

    background:#efeff2;

}

.secondary:hover{

    background:#e2e2e7;

}

#confirmModal{

    background:linear-gradient(

        180deg,

        #0A84FF,

        #0071E3

    );

    color:white;

    box-shadow:

        0 14px 30px rgba(0,113,227,.30);

}

#confirmModal:hover{

    transform:

        translateY(-2px);

}

/*==================================================
        MICRO ANIMATIONS
==================================================*/

button{

    transition:

        transform .18s ease,

        background .18s ease,

        box-shadow .18s ease;

}

button:active{

    transform:scale(.97);

}

input{

    transition:

        background .18s ease,

        box-shadow .18s ease;

}

.column{

    animation:fadeColumn .28s ease;

}

@keyframes fadeColumn{

    from{

        opacity:0;

        transform:

            translateY(18px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

.card{

    animation:fadeCard .22s ease;

}

@keyframes fadeCard{

    from{

        opacity:0;

        transform:

            scale(.96);

    }

    to{

        opacity:1;

        transform:

            scale(1);

    }

}
/*==================================================
        DRAG & DROP
==================================================*/

.column.drag-over{

    outline:2px solid rgba(0,113,227,.25);

    outline-offset:-8px;

}

.card.dragging{

    opacity:.45;

    transform:rotate(2deg) scale(.98);

    cursor:grabbing;

}

.column.drop-target{

    background:

        rgba(0,113,227,.05);

}

.sortable-ghost{

    opacity:.30;

}

.sortable-chosen{

    cursor:grabbing;

}

.sortable-drag{

    transform:rotate(3deg);

}

/*==================================================
        BADGES
==================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:24px;

    padding:0 10px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

}

.badge.blue{

    background:#E8F2FF;

    color:#0071E3;

}

.badge.green{

    background:#EAFBF0;

    color:#2FB344;

}

.badge.orange{

    background:#FFF4E5;

    color:#FF9500;

}

.badge.red{

    background:#FFE8E8;

    color:#FF453A;

}

/*==================================================
        AVATAR
==================================================*/

.avatar{

    width:28px;

    height:28px;

    border-radius:50%;

    background:linear-gradient(

        180deg,

        #0A84FF,

        #0071E3

    );

    color:white;

    font-size:12px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

}

.avatar-group{

    display:flex;

}

.avatar-group .avatar{

    margin-left:-8px;

    border:2px solid white;

}

.avatar-group .avatar:first-child{

    margin-left:0;

}

/*==================================================
        TOOLTIP
==================================================*/

.tooltip{

    position:absolute;

    padding:8px 12px;

    border-radius:12px;

    background:rgba(35,35,38,.92);

    color:white;

    font-size:12px;

    white-space:nowrap;

    opacity:0;

    pointer-events:none;

    transform:translateY(6px);

    transition:.18s;

}

.has-tooltip:hover .tooltip{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
        LOADING
==================================================*/

.loading{

    width:100%;

    height:5px;

    border-radius:999px;

    overflow:hidden;

    background:#ECECEC;

}

.loading::before{

    content:"";

    display:block;

    width:45%;

    height:100%;

    background:#0071E3;

    animation:loading 1.2s infinite linear;

}

@keyframes loading{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(260%);

    }

}

/*==================================================
        SELECTION
==================================================*/

::selection{

    background:rgba(0,113,227,.18);

    color:inherit;

}

/*==================================================
        FOCUS
==================================================*/

button:focus-visible,

input:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 4px rgba(0,113,227,.18);

}

/*==================================================
        GLASS EFFECT
==================================================*/

.glass{

    background:rgba(255,255,255,.68);

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

    border:1px solid rgba(255,255,255,.55);

}
/*==================================================
        RESPONSIVE
==================================================*/

@media (max-width:1600px){

    #board{

        grid-auto-columns:320px;

    }

}

@media (max-width:1400px){

    .app{

        grid-template-columns:240px 1fr;

    }

    #board{

        grid-auto-columns:300px;

    }

}

@media (max-width:1100px){

    .sidebar{

        width:90px;

        padding:18px 12px;

    }

    .app{

        grid-template-columns:90px 1fr;

    }

    .sidebar-logo h2,

    .sidebar-logo span{

        display:none;

    }

    .sidebar-logo{

        justify-content:center;

    }

    .menu-item{

        display:flex;

        justify-content:center;

        align-items:center;

        padding:0;

        font-size:20px;

    }

}

@media (max-width:768px){

    .topbar{

        margin:12px;

        padding:18px;

        height:auto;

        flex-direction:column;

        align-items:flex-start;

        gap:16px;

    }

    #newColumn{

        width:100%;

    }

    #board{

        padding:14px;

        gap:16px;

        grid-auto-columns:290px;

    }

}

@media (max-width:520px){

    .app{

        display:block;

    }

    .sidebar{

        display:none;

    }

    #board{

        grid-auto-columns:90vw;

    }

}

/*==================================================
        HOVER EFFECTS
==================================================*/

.column:hover .column-header{

    background:rgba(255,255,255,.18);

}

.column:hover .new-card{

    background:#ececef;

}

.column:hover .new-card:hover{

    background:#0071E3;

    color:white;

}

/*==================================================
        TRANSITIONS
==================================================*/

*{

    scroll-behavior:smooth;

}

.column,

.card,

button,

input,

.menu-item,

.add-column,

.add-card{

    transition:

        background .22s,

        color .22s,

        transform .22s,

        box-shadow .22s,

        border-color .22s,

        opacity .22s;

}

/*==================================================
        APPARITION
==================================================*/

.fade-in{

    animation:fadeIn .25s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.scale-in{

    animation:scaleIn .20s ease;

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==================================================
        DISABLED
==================================================*/

.disabled{

    opacity:.45;

    pointer-events:none;

}

/*==================================================
        UTILITAIRES
==================================================*/

.hidden{

    display:none !important;

}

.flex{

    display:flex;

}

.center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.space-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.w100{

    width:100%;

}

.h100{

    height:100%;

}

.mt8{margin-top:8px;}
.mt12{margin-top:12px;}
.mt16{margin-top:16px;}
.mt20{margin-top:20px;}
.mt24{margin-top:24px;}

.mb8{margin-bottom:8px;}
.mb12{margin-bottom:12px;}
.mb16{margin-bottom:16px;}
.mb20{margin-bottom:20px;}
.mb24{margin-bottom:24px;}

/*==================================================
        FIN
==================================================*/
/*==================================================
        PRIORITÉS
==================================================*/

.priority{

    width:10px;

    height:10px;

    border-radius:50%;

    flex-shrink:0;

}

.priority.low{

    background:#30D158;

}

.priority.medium{

    background:#FF9F0A;

}

.priority.high{

    background:#FF453A;

}

.priority.urgent{

    background:#AF52DE;

}

/*==================================================
        CHECKLIST
==================================================*/

.checklist{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.check-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:13px;

    color:var(--text-secondary);

}

.check-item input{

    width:16px;

    height:16px;

    accent-color:#0071E3;

}

/*==================================================
        BARRE DE PROGRESSION
==================================================*/

.progress{

    width:100%;

    height:6px;

    border-radius:999px;

    background:#ECECEF;

    overflow:hidden;

}

.progress-value{

    height:100%;

    border-radius:999px;

    background:linear-gradient(

        90deg,

        #0A84FF,

        #0071E3

    );

}

/*==================================================
        PIECES JOINTES
==================================================*/

.attachment{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px;

    border-radius:14px;

    background:#F7F7F9;

    transition:.2s;

}

.attachment:hover{

    background:white;

    box-shadow:0 10px 24px rgba(0,0,0,.08);

}

.attachment-icon{

    width:42px;

    height:42px;

    border-radius:12px;

    background:#EEF6FF;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#0071E3;

    font-weight:700;

}

/*==================================================
        COMMENTAIRES
==================================================*/

.comment{

    display:flex;

    gap:12px;

    padding:14px 0;

    border-bottom:1px solid rgba(0,0,0,.05);

}

.comment:last-child{

    border-bottom:none;

}

.comment-content{

    flex:1;

}

.comment-author{

    font-size:13px;

    font-weight:700;

}

.comment-text{

    margin-top:4px;

    font-size:13px;

    color:var(--text-secondary);

    line-height:1.5;

}

/*==================================================
        ETIQUETTES
==================================================*/

.labels{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.label{

    padding:6px 10px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

}

.label.blue{

    background:#E8F2FF;

    color:#0071E3;

}

.label.green{

    background:#EAFBF0;

    color:#30D158;

}

.label.orange{

    background:#FFF4E5;

    color:#FF9F0A;

}

.label.red{

    background:#FFEAEA;

    color:#FF453A;

}
/*==================================================
        EMPTY STATES
==================================================*/

.empty-state{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:30px;

    color:#8A8A8F;

    text-align:center;

}

.empty-state svg{

    width:64px;

    height:64px;

    opacity:.35;

    margin-bottom:18px;

}

.empty-state h3{

    font-size:18px;

    font-weight:700;

    color:var(--text);

    margin-bottom:8px;

}

.empty-state p{

    font-size:14px;

    line-height:1.6;

}

/*==================================================
        SKELETON
==================================================*/

.skeleton{

    position:relative;

    overflow:hidden;

    background:#ECECEF;

}

.skeleton::after{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );

    animation:skeletonLoading 1.3s infinite;

}

@keyframes skeletonLoading{

    100%{

        transform:translateX(100%);

    }

}

/*==================================================
        CONTEXT MENU
==================================================*/

.context-menu{

    position:fixed;

    min-width:220px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    border-radius:18px;

    border:1px solid rgba(255,255,255,.55);

    box-shadow:0 20px 50px rgba(0,0,0,.16);

    padding:8px;

    display:none;

    z-index:999999;

}

.context-menu button{

    width:100%;

    height:42px;

    border:none;

    background:transparent;

    border-radius:12px;

    text-align:left;

    padding:0 14px;

    font-size:14px;

    font-weight:600;

}

.context-menu button:hover{

    background:#F2F2F5;

}

/*==================================================
        DROPDOWN
==================================================*/

.dropdown{

    position:absolute;

    top:100%;

    right:0;

    margin-top:10px;

    width:240px;

    background:white;

    border-radius:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

    overflow:hidden;

    display:none;

}

.dropdown-item{

    padding:14px 18px;

    cursor:pointer;

    transition:.2s;

}

.dropdown-item:hover{

    background:#F5F5F7;

}

/*==================================================
        STATUTS
==================================================*/

.status-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    display:inline-block;

    margin-right:8px;

}

.status-online{

    background:#30D158;

}

.status-away{

    background:#FF9F0A;

}

.status-offline{

    background:#C7C7CC;

}

/*==================================================
        IMPRESSION
==================================================*/

@media print{

    .sidebar,
    .topbar,
    .new-card,
    .add-column{

        display:none !important;

    }

    body{

        overflow:visible;

        background:white;

    }

    #board{

        display:block;

        overflow:visible;

    }

    .column{

        break-inside:avoid;

        margin-bottom:24px;

        box-shadow:none;

        border:1px solid #DDD;

    }

}

/*==================================================
        FIN DU CSS
==================================================*/