/**
 * CSS pour la page fonctionnement
 * @file fonctionnement.css
 * @author GN
 * @date 05/08/2026
 */
.fonction-list {
    padding: 0px !important;
}
.fonction-copilot-list li {
    margin-bottom:20px !important;
}
.fonction-copilot-list li:last-child {
    margin-bottom:0px !important;
}
/* ============================
   ROND + POINTILLÉS
   ============================ */

.fonction_rondpoint {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Rond avec numéro */
.fonction_numero {
    width: 48px;
    height: 48px;
    min-width: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background-color: var(--fonction-color);

    color: #fff;
    font-size: 15px;
    font-weight: 700;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* Ligne de petits points */
.fonction_pointilles {
    flex: 1;
    height: 4px;
    margin-left: 10px;

    background-image: radial-gradient(
        circle,
        var(--fonction-color) 2px,
        transparent 2.2px
    );

    background-size: 10px 4px;
    background-repeat: repeat-x;
    background-position: center;
}

/* Point final */
.fonction_point_final {
    width: 8px;
    height: 8px;
    min-width: 8px;

    border-radius: 50%;
    background-color: var(--fonction-color);
}


/* ============================
   COULEURS
   ============================ */

.fonctions_rond_point_bleu {
    --fonction-color: #216CA9;
}

.fonctions_rond_point_vert {
    --fonction-color: #18A66A;
}

.fonctions_rond_point_violet {
    --fonction-color: #7047B8;
}

.fonctions_rond_point_orange {
    --fonction-color: #FF7900;
}