.tutorial-title{
    font-size:32px;
    font-weight:bold;
    color:#0d6efd;
}

.tutorial-subtitle{
    font-size:18px;
    color:#6c757d;
    margin-bottom:25px;
}

.tutorial-card{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:22px;

    height:auto;
    
    min-height:210px;

    padding:18px;

    text-align:center;

    margin-bottom:20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    transition:all .25s ease;

    cursor:pointer;

    box-shadow:0 2px 8px rgba(0,0,0,.05);

}

.tutorial-card:hover{

    transform:translateY(-4px);

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

    border-color:#0d6efd;

}

.tutorial-icon{

    font-size:42px;

    margin-bottom:12px;

}

.tutorial-name{

    font-size:19px;

    font-weight:600;

    color:#212529;

    margin-bottom:10px;

}

.tutorial-description{

    color:#6c757d;

    font-size:14px;

    line-height:1.45;

    text-align:left;

    width:100%;

    overflow-wrap:break-word;

}

.tutorial-footer{

    margin-top:25px;

}

/* ================================
   Carte active (en cours d'explication)
================================ */

.tutorial-card-active{

    border:2px solid #0d6efd !important;

    background:#eef5ff;

    transform:translateY(-4px);

    box-shadow:0 8px 24px rgba(13,110,253,.25);

}

/* ================================
   Carte terminée
================================ */

.tutorial-card-done{

    border:2px solid #198754 !important;

    background:#f0fff5;

}

/* ================================
   Apparition douce
================================ */

.tutorial-card{

    transition:
        background .3s,
        border .3s,
        transform .3s,
        box-shadow .3s;

}

.tutorial-progress{

    width:100%;
    height:8px;

    background:#E5E7EB;

    border-radius:20px;

    overflow:hidden;

    margin:18px 0;

}

.tutorial-progress-bar{

    width:0%;

    height:100%;

    background:#2563EB;

    transition:width 0.1s linear;

}

.modal-dialog.modal-lg{

    max-width:1200px;

}

.modal-body{

    max-height:85vh;

    overflow-y:auto;

}