.ec-photo-wrapper {
    display: inline-block;
    width: 400px;
    height: 400px;
    overflow: hidden;
    border-radius: 8px;
}

.ec-profile-photo {
    width: 400px;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

@media (max-width: 480px) {
    .ec-photo-wrapper,
    .ec-profile-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}



    background-color: #f8d7da;

    color: #721c24;

    padding: 10px;

    margin-bottom: 10px;

    border: 1px solid #f5c6cb;

    border-radius: 5px;

}



.ec-success {

    background-color: #d4edda;

    color: #155724;

    border: 1px solid #c3e6cb;

}



.ec-error {

    background-color: #f8d7da;

    color: #721c24;

    border: 1px solid #f5c6cb;

}



.password-container {

    display: flex;

    align-items: center;

}



.toggle-password {

    background: none;

    border: none;

    cursor: pointer;

    margin-left: 5px;

    font-size: 1.2em;

}



.ec-form {

    display: flex;

    flex-direction: column;

    gap: 10px;

    max-width: 500px;

    margin: auto;

}



.ec-row {

    display: flex;

    gap: 10px;

}



.ec-row input {

    flex: 1;

}



/* Responsive : Empile les champs en mode mobile */

@media (max-width: 768px) {

    .ec-row {

        flex-direction: column;

    }

}



.ec-logout {

    display: inline-block;

    margin-top: 10px;

    padding: 8px 15px;

    background: #dc3545;

    color: white;

    text-decoration: none;

    border-radius: 5px;

}



.ec-logout:hover {

    background: #c82333;

}



.ec-espace-client {

    max-width: 600px;

    margin: auto;

    padding: 20px;

    background: #f8f9fa;

    border-radius: 10px;

}



.ec-espace-client h2 {

    color: #007bff;

}



.ec-espace-client ul {

    list-style: none;

    padding: 0;

}



.ec-espace-client ul li {

    background: #fff;

    margin: 5px 0;

    padding: 10px;

    border-radius: 5px;

}



#ec-chart {

    max-width: 100%;

    height: auto;

}



.ec-stat-container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;

    margin-top: 20px;

}



.ec-chart-wrapper {

    width: 200px;

    height: 200px;

}



.ec-chart-wrapper canvas {

    width: 100% !important;

    height: 100% !important;

}



.ec-legend {

    font-size: 16px;

    min-width: 200px;

}



.ec-legend ul {

    list-style: none;

    padding: 0;

}



.ec-legend li {

    display: flex;

    align-items: center;

    margin-bottom: 10px;

}



.ec-legend-color {

    display: inline-block;

    width: 40px;

    height: 10px;

    margin-right: 10px;

    border-radius: 2px;

}








/* ── [ec_photo] : affichage avatar style BMS ─────────────────────── */
.ec-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(5, 21, 71, 0.12);
    background: rgba(5, 21, 71, 0.06);
    flex-shrink: 0;
}

.ec-avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.ec-avatar-icon {
    font-size: 3.2em;
    line-height: 1;
    opacity: .5;
}