/**
 * Suivi Formation - Candidat
 * Styles pour le tableau de bord candidat
 */

/* =============================================================================
   VARIABLES
   ============================================================================= */
:root {
    --sf-primary: #2271b1;
    --sf-primary-dark: #135e96;
    --sf-success: #00a32a;
    --sf-success-light: #e6f6e6;
    --sf-warning: #dba617;
    --sf-warning-light: #fff8e5;
    --sf-info: #72aee6;
    --sf-info-light: #e7f3ff;
    --sf-danger: #d63638;
    --sf-light: #f6f7f7;
    --sf-border: #c3c4c7;
    --sf-text: #1d2327;
    --sf-text-light: #50575e;
    --sf-radius: 8px;
    --sf-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* =============================================================================
   DASHBOARD CANDIDAT
   ============================================================================= */
.sf-candidat-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* En-tête candidat */
.sf-candidat-header {
    background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-primary-dark) 100%);
    color: #fff;
    padding: 30px;
    border-radius: var(--sf-radius);
    margin-bottom: 30px;
    text-align: center;
}

.sf-candidat-header h1 {
    margin: 0 0 10px 0;
    font-size: 28px;
}

.sf-candidat-formation {
    font-size: 18px;
    opacity: 0.9;
    margin: 0 0 5px 0;
}

.sf-candidat-entreprise {
    font-size: 14px;
    opacity: 0.8;
    margin: 0;
}

/* =============================================================================
   STATISTIQUES GLOBALES
   ============================================================================= */
.sf-candidat-stats-global {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.sf-stat-card {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--sf-shadow);
}

.sf-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--sf-primary);
    margin-bottom: 5px;
}

.sf-stat-label {
    font-size: 13px;
    color: var(--sf-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-stat-progress {
    height: 6px;
    background: var(--sf-light);
    border-radius: 3px;
    margin-top: 12px;
    overflow: hidden;
}

.sf-stat-progress > div {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.sf-stat-formation .sf-stat-value { color: var(--sf-info); }
.sf-stat-formation .sf-stat-progress > div { background: var(--sf-info); }

.sf-stat-pratique .sf-stat-value { color: var(--sf-warning); }
.sf-stat-pratique .sf-stat-progress > div { background: var(--sf-warning); }

.sf-stat-evalue .sf-stat-value { color: var(--sf-success); }
.sf-stat-evalue .sf-stat-progress > div { background: var(--sf-success); }

/* =============================================================================
   BLOCS
   ============================================================================= */
.sf-candidat-bloc {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: var(--sf-shadow);
}

.sf-candidat-bloc-header {
    background: var(--sf-light);
    padding: 20px 24px;
    border-bottom: 1px solid var(--sf-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.sf-candidat-bloc-header h2 {
    margin: 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sf-bloc-num {
    background: var(--sf-danger);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
}

.sf-bloc-stats {
    display: flex;
    gap: 10px;
}

.sf-mini-stat {
    background: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--sf-text-light);
    border: 1px solid var(--sf-border);
}

/* =============================================================================
   ACTIVITÉS
   ============================================================================= */
.sf-candidat-activite {
    padding: 20px 24px;
    border-bottom: 1px solid var(--sf-border);
}

.sf-candidat-activite:last-child {
    border-bottom: none;
}

.sf-candidat-activite h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sf-activite-num {
    background: var(--sf-success);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

/* =============================================================================
   GRILLE DE FICHES
   ============================================================================= */
.sf-fiches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.sf-fiche-card {
    background: var(--sf-light);
    border: 2px solid transparent;
    border-radius: var(--sf-radius);
    padding: 16px;
    transition: all 0.2s;
}

.sf-fiche-card:hover {
    box-shadow: var(--sf-shadow);
    transform: translateY(-2px);
}

/* États de la fiche */
.sf-fiche-card.has-formation {
    border-left: 4px solid var(--sf-info);
}

.sf-fiche-card.has-pratique {
    border-left: 4px solid var(--sf-warning);
}

.sf-fiche-card.has-evaluation {
    border-left: 4px solid var(--sf-success);
}

.sf-fiche-card.has-formation.has-pratique.has-evaluation {
    background: var(--sf-success-light);
    border: 2px solid var(--sf-success);
}

.sf-fiche-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.sf-fiche-code {
    background: var(--sf-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: monospace;
}

.sf-fiche-status {
    display: flex;
    gap: 4px;
}

.sf-status-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.sf-status-formation { background: var(--sf-info); }
.sf-status-pratique { background: var(--sf-warning); }
.sf-status-niveau { background: var(--sf-success); }

.sf-fiche-card-title {
    font-size: 14px;
    line-height: 1.4;
    color: var(--sf-text);
    margin-bottom: 12px;
    min-height: 40px;
}

.sf-fiche-card-actions {
    display: flex;
    gap: 8px;
}

.sf-btn-small {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.sf-btn-small:first-child {
    background: var(--sf-light);
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
}

.sf-btn-small:first-child:hover {
    background: #e8e8e8;
}

.sf-btn-edit {
    background: var(--sf-primary);
    color: #fff !important;
}

.sf-btn-edit:hover {
    background: var(--sf-primary-dark);
}

/* =============================================================================
   MODAL
   ============================================================================= */
.sf-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-modal-content {
    background: #fff;
    border-radius: var(--sf-radius);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
}

.sf-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: var(--sf-text-light);
    line-height: 1;
}

.sf-modal-close:hover {
    color: var(--sf-danger);
}

.sf-modal h2 {
    margin: 0 0 20px 0;
    padding-right: 30px;
}

/* =============================================================================
   FORMULAIRE DE SUIVI
   ============================================================================= */
.sf-suivi-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sf-form-section {
    background: var(--sf-light);
    padding: 20px;
    border-radius: var(--sf-radius);
}

.sf-form-section h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sf-text-light);
}

.sf-form-row {
    margin-bottom: 15px;
}

.sf-form-row:last-child {
    margin-bottom: 0;
}

.sf-form-row label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.sf-form-row input[type="text"],
.sf-form-row input[type="date"],
.sf-form-row textarea,
.sf-form-row select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--sf-border);
    border-radius: 4px;
    font-size: 14px;
}

.sf-form-row textarea {
    resize: vertical;
    min-height: 80px;
}

.sf-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sf-checkbox-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.sf-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 10px;
}

.sf-btn {
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.sf-btn-primary {
    background: var(--sf-primary);
    color: #fff;
}

.sf-btn-primary:hover {
    background: var(--sf-primary-dark);
}

.sf-btn-secondary {
    background: var(--sf-light);
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
}

.sf-btn-secondary:hover {
    background: #e8e8e8;
}

/* =============================================================================
   LÉGENDE
   ============================================================================= */
.sf-legend {
    background: var(--sf-light);
    padding: 15px 20px;
    border-radius: var(--sf-radius);
    margin-bottom: 30px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.sf-legend-title {
    font-weight: 600;
    margin-right: 10px;
}

.sf-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.sf-legend-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.sf-legend-color.formation { background: var(--sf-info); }
.sf-legend-color.pratique { background: var(--sf-warning); }
.sf-legend-color.evaluation { background: var(--sf-success); }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 768px) {
    .sf-candidat-header {
        padding: 20px;
    }

    .sf-candidat-header h1 {
        font-size: 22px;
    }

    .sf-candidat-stats-global {
        grid-template-columns: repeat(2, 1fr);
    }

    .sf-candidat-bloc-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .sf-fiches-grid {
        grid-template-columns: 1fr;
    }

    .sf-modal-content {
        padding: 20px;
    }
}

/* =============================================================================
   ADMIN STYLES
   ============================================================================= */
.wrap .sf-candidat-dashboard {
    padding: 0;
}

.wrap .sf-candidat-header {
    margin-top: 20px;
}

/* =============================================================================
   MESSAGES & ERREURS
   ============================================================================= */
.sf-error-box {
    background: #fff;
    border: 2px solid var(--sf-danger);
    border-radius: var(--sf-radius);
    padding: 40px;
    text-align: center;
    max-width: 500px;
    margin: 50px auto;
}

.sf-error-box h2 {
    color: var(--sf-danger);
    margin: 0 0 15px 0;
}

.sf-error-box p {
    color: var(--sf-text-light);
    margin: 0;
}

#sf-form-message {
    padding: 15px;
    border-radius: 4px;
    margin-top: 15px;
    text-align: center;
    font-weight: 500;
}

#sf-form-message.success {
    background: var(--sf-success-light);
    color: var(--sf-success);
    border: 1px solid var(--sf-success);
}

#sf-form-message.error {
    background: #fef2f2;
    color: var(--sf-danger);
    border: 1px solid var(--sf-danger);
}

/* =============================================================================
   FORMULAIRE DE CONNEXION
   ============================================================================= */
.sf-login-container {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.sf-login-box {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 40px;
    max-width: 400px;
    width: 100%;
    box-shadow: var(--sf-shadow);
}

.sf-login-box h2 {
    margin: 0 0 30px 0;
    text-align: center;
    color: var(--sf-primary);
    font-size: 24px;
}

.sf-login-box .sf-form-row {
    margin-bottom: 20px;
}

.sf-login-box .sf-form-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--sf-text);
}

.sf-login-box .sf-form-row input[type="email"],
.sf-login-box .sf-form-row input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--sf-border);
    border-radius: 4px;
    font-size: 15px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sf-login-box .sf-form-row input[type="email"]:focus,
.sf-login-box .sf-form-row input[type="password"]:focus {
    outline: none;
    border-color: var(--sf-primary);
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
}

.sf-btn-full {
    width: 100%;
    padding: 14px 20px;
    background: var(--sf-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.sf-btn-full:hover {
    background: var(--sf-primary-dark);
}

.sf-btn-full:disabled {
    background: var(--sf-border);
    cursor: not-allowed;
}

#sf-login-message {
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 500;
}

#sf-login-message.success {
    background: var(--sf-success-light);
    color: var(--sf-success);
    border: 1px solid var(--sf-success);
}

#sf-login-message.error {
    background: #fef2f2;
    color: var(--sf-danger);
    border: 1px solid var(--sf-danger);
}

/* =============================================================================
   BARRE D'ACTIONS CANDIDAT
   ============================================================================= */
.sf-candidat-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 20px;
}

.sf-btn-outline {
    padding: 8px 16px;
    background: transparent;
    color: var(--sf-primary);
    border: 1px solid var(--sf-primary);
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.sf-btn-outline:hover {
    background: var(--sf-primary);
    color: #fff;
}

.sf-btn-logout {
    color: var(--sf-danger);
    border-color: var(--sf-danger);
}

.sf-btn-logout:hover {
    background: var(--sf-danger);
    color: #fff;
}

/* =============================================================================
   MODAL MOT DE PASSE
   ============================================================================= */
#sf-password-message {
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 500;
}

#sf-password-message.success {
    background: var(--sf-success-light);
    color: var(--sf-success);
    border: 1px solid var(--sf-success);
}

#sf-password-message.error {
    background: #fef2f2;
    color: var(--sf-danger);
    border: 1px solid var(--sf-danger);
}

/* =============================================================================
   RESPONSIVE LOGIN
   ============================================================================= */
@media (max-width: 480px) {
    .sf-login-box {
        padding: 30px 20px;
    }

    .sf-login-box h2 {
        font-size: 20px;
    }

    .sf-candidat-actions {
        flex-direction: column;
    }

    .sf-candidat-actions .sf-btn-outline {
        text-align: center;
    }
}

/* =============================================================================
   ONGLETS / TABS
   ============================================================================= */
.sf-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--sf-border);
    padding-bottom: 0;
    flex-wrap: wrap;
}

.sf-tab-btn {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sf-text-light);
    cursor: pointer;
    transition: all 0.2s;
}

.sf-tab-btn:hover {
    color: var(--sf-primary);
}

.sf-tab-btn.active {
    color: var(--sf-primary);
    border-bottom-color: var(--sf-primary);
    background: var(--sf-light);
}

.sf-tab-content {
    display: none;
}

.sf-tab-content.active {
    display: block;
}

/* =============================================================================
   STATISTIQUES RAPIDES
   ============================================================================= */
.sf-quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.sf-quick-stat {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--sf-shadow);
}

.sf-quick-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--sf-primary);
}

.sf-quick-stat-label {
    display: block;
    font-size: 12px;
    color: var(--sf-text-light);
    margin-top: 5px;
}

/* =============================================================================
   SECTIONS
   ============================================================================= */
.sf-section {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--sf-shadow);
}

.sf-section h3,
.sf-section h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--sf-text);
}

.sf-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.sf-section-header h3 {
    margin: 0;
}

.sf-section-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--sf-border);
}

.sf-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--sf-text-light);
}

.sf-empty-state p {
    margin-bottom: 20px;
}

/* =============================================================================
   LISTE DES ACTIVITES (Dashboard)
   ============================================================================= */
.sf-activites-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sf-activite-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
    transition: all 0.2s;
}

.sf-activite-item:hover {
    background: #e8f4fc;
}

.sf-activite-item-header {
    flex: 1;
}

.sf-activite-date {
    font-size: 12px;
    color: var(--sf-text-light);
    margin-bottom: 4px;
}

.sf-activite-titre {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.sf-activite-item-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sf-activite-lieu {
    font-size: 13px;
    color: var(--sf-text-light);
}

.sf-activite-badges {
    display: flex;
    gap: 8px;
}

.sf-badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.sf-badge-competences {
    background: var(--sf-info-light);
    color: var(--sf-primary);
}

.sf-badge-preuves {
    background: var(--sf-success-light);
    color: var(--sf-success);
}

.sf-activite-item-actions {
    display: flex;
    gap: 8px;
}

.sf-btn-icon {
    padding: 6px 12px;
    font-size: 12px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.sf-btn-icon:hover {
    background: var(--sf-primary);
    color: #fff;
    border-color: var(--sf-primary);
}

/* =============================================================================
   LISTE COMPLETE DES ACTIVITES
   ============================================================================= */
.sf-activites-full-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.sf-activite-card {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    box-shadow: var(--sf-shadow);
    transition: all 0.2s;
}

.sf-activite-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sf-activite-card-header {
    margin-bottom: 12px;
}

.sf-activite-card-date {
    font-size: 12px;
    color: var(--sf-text-light);
    margin-bottom: 5px;
}

.sf-activite-card-title {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: var(--sf-text);
}

.sf-activite-card-lieu {
    font-size: 13px;
    color: var(--sf-text-light);
}

.sf-activite-card-desc {
    font-size: 13px;
    color: var(--sf-text-light);
    line-height: 1.5;
    margin-bottom: 12px;
}

.sf-activite-card-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.sf-activite-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* =============================================================================
   MODAL LARGE
   ============================================================================= */
.sf-modal-large {
    max-width: 900px;
}

.sf-modal-small {
    max-width: 400px;
}

.sf-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .sf-form-grid {
        grid-template-columns: 1fr;
    }
}

.sf-form-row-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Formulaire deux colonnes dans les modals */
.sf-modal .sf-form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 0;
}

.sf-modal .sf-form-row .sf-form-group {
    margin-bottom: 15px;
}

.sf-form-half {
    flex: 1;
    min-width: 0;
}

.sf-form-help {
    font-size: 12px;
    color: var(--sf-text-light);
    margin-top: 5px;
}

/* =============================================================================
   MODAL DETAIL EVENEMENT (Manager/Tuteur)
   ============================================================================= */
.sf-modal-event-detail {
    max-width: 550px;
}

.sf-modal-event-detail .sf-modal-header {
    padding: 20px 24px;
}

.sf-modal-event-detail .sf-modal-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.sf-modal-event-detail .sf-modal-body {
    padding: 0;
}

.sf-event-detail-container {
    padding: 20px 24px 24px;
}

/* Badges en haut */
.sf-event-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.sf-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

/* Cartes d'information */
.sf-event-info-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.sf-event-info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.sf-event-info-card:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.sf-event-info-icon {
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}

.sf-event-info-content {
    flex: 1;
    min-width: 0;
}

.sf-event-info-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 4px;
}

.sf-event-info-value {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    word-break: break-word;
}

.sf-event-info-sub {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* Section description */
.sf-event-description-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-top: 8px;
}

.sf-event-description-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.sf-event-description-icon {
    font-size: 1.1rem;
}

.sf-event-description-title {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-event-description-content {
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
}

/* Meta informations */
.sf-event-meta {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sf-event-meta-item {
    font-size: 12px;
    color: #64748b;
}

/* Responsive */
@media (max-width: 500px) {
    .sf-event-info-cards {
        grid-template-columns: 1fr;
    }

    .sf-modal-event-detail {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
}

/* =============================================================================
   SELECTEUR DE COMPETENCES
   ============================================================================= */
.sf-competences-selector {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
}

.sf-competences-accordion {
    padding: 10px;
}

.sf-comp-bloc {
    margin-bottom: 10px;
}

.sf-comp-bloc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--sf-light);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}

.sf-comp-bloc-header:hover {
    background: #e0e0e0;
}

.sf-comp-bloc-toggle {
    width: 20px;
    text-align: center;
    font-weight: bold;
    color: var(--sf-primary);
}

.sf-comp-bloc-num {
    background: var(--sf-danger);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
}

.sf-comp-bloc-content {
    padding-left: 15px;
}

.sf-comp-activite {
    margin: 10px 0;
}

.sf-comp-activite-header {
    font-size: 13px;
    color: var(--sf-text-light);
    padding: 5px 0;
}

.sf-comp-activite-num {
    background: var(--sf-success);
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 5px;
}

.sf-comp-fiches {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 10px;
}

.sf-comp-fiche {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.sf-comp-fiche:hover {
    border-color: var(--sf-primary);
}

.sf-comp-fiche.selected {
    background: var(--sf-info-light);
    border-color: var(--sf-primary);
}

.sf-comp-fiche input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.sf-comp-fiche-code {
    background: var(--sf-primary);
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: monospace;
}

.sf-comp-fiche-titre {
    font-size: 13px;
    flex: 1;
}

/* =============================================================================
   DETAIL ACTIVITE
   ============================================================================= */
.sf-activite-detail {
    padding: 10px;
}

.sf-activite-detail-header {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--sf-light);
}

.sf-activite-detail-header h2 {
    margin: 0 0 10px 0;
}

.sf-activite-detail-meta {
    font-size: 14px;
    color: var(--sf-text-light);
}

.sf-detail-section {
    margin-bottom: 20px;
}

.sf-detail-section h4 {
    font-size: 14px;
    color: var(--sf-primary);
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-detail-section p {
    margin: 0;
    line-height: 1.6;
}

.sf-detail-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.sf-detail-section-header h4 {
    margin: 0;
}

.sf-competences-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sf-competences-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--sf-light);
}

.sf-competences-list li:last-child {
    border-bottom: none;
}

.sf-competences-list code {
    background: var(--sf-primary);
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
}

.sf-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--sf-border);
}

/* =============================================================================
   PREUVES
   ============================================================================= */
.sf-preuves-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-preuve-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
}

.sf-preuve-type {
    background: var(--sf-warning);
    color: #fff;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.sf-preuve-info {
    flex: 1;
}

.sf-preuve-info strong {
    display: block;
    margin-bottom: 4px;
}

.sf-preuve-info p {
    margin: 0;
    font-size: 13px;
    color: var(--sf-text-light);
}

.sf-preuve-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sf-empty-text {
    color: var(--sf-text-light);
    font-style: italic;
    text-align: center;
    padding: 15px;
}

/* =============================================================================
   ANALYSE DU PARCOURS
   ============================================================================= */
.sf-parcours-header {
    text-align: center;
    margin-bottom: 30px;
}

.sf-parcours-header h3 {
    margin: 0 0 10px 0;
    font-size: 22px;
}

.sf-parcours-header p {
    margin: 0;
    color: var(--sf-text-light);
}

.sf-parcours-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.sf-parcours-stat-card {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--sf-shadow);
}

.sf-parcours-stat-icon {
    font-size: 36px;
}

.sf-parcours-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--sf-primary);
}

.sf-parcours-stat-label {
    font-size: 13px;
    color: var(--sf-text-light);
}

/* Barre de progression large */
.sf-progress-bar-large {
    height: 30px;
    background: var(--sf-light);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

.sf-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sf-primary) 0%, var(--sf-success) 100%);
    border-radius: 15px;
    transition: width 0.5s ease;
}

.sf-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    color: var(--sf-text);
}

.sf-progress-help {
    font-size: 13px;
    color: var(--sf-text-light);
    margin-top: 10px;
}

/* Types de preuves */
.sf-preuves-types {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sf-preuve-type-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
}

.sf-preuve-type-label {
    font-size: 14px;
}

.sf-preuve-type-count {
    background: var(--sf-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Timeline chart */
.sf-timeline-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 150px;
    padding: 20px 0;
    border-bottom: 1px solid var(--sf-border);
}

.sf-timeline-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
}

.sf-timeline-bar-fill {
    width: 30px;
    background: var(--sf-primary);
    border-radius: 4px 4px 0 0;
    min-height: 5px;
    transition: height 0.3s ease;
}

.sf-timeline-bar-value {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
}

.sf-timeline-bar-label {
    font-size: 11px;
    color: var(--sf-text-light);
    margin-top: 8px;
}

/* Alertes */
.sf-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-alert {
    padding: 15px 20px;
    border-radius: var(--sf-radius);
    font-size: 14px;
}

.sf-alert strong {
    display: block;
    margin-bottom: 5px;
}

.sf-alert-warning {
    background: var(--sf-warning-light);
    border-left: 4px solid var(--sf-warning);
}

.sf-alert-info {
    background: var(--sf-info-light);
    border-left: 4px solid var(--sf-info);
}

.sf-alert-success {
    background: var(--sf-success-light);
    border-left: 4px solid var(--sf-success);
}

/* =============================================================================
   BOUTON DANGER
   ============================================================================= */
.sf-btn-danger {
    background: var(--sf-danger) !important;
    color: #fff !important;
    border-color: var(--sf-danger) !important;
}

.sf-btn-danger:hover {
    background: #b32d2e !important;
}

/* =============================================================================
   LOADING
   ============================================================================= */
.sf-loading {
    text-align: center;
    padding: 30px;
    color: var(--sf-text-light);
}

/* =============================================================================
   MODAL TABS (onglets dans les modals)
   ============================================================================= */
.sf-modal-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--sf-border);
    flex-wrap: wrap;
}

.sf-modal-tab {
    padding: 10px 15px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sf-text-light);
    cursor: pointer;
    transition: all 0.2s;
}

.sf-modal-tab:hover {
    color: var(--sf-primary);
}

.sf-modal-tab.active {
    color: var(--sf-primary);
    border-bottom-color: var(--sf-primary);
}

.sf-modal-tab-content {
    display: none;
    padding: 10px 0;
}

.sf-modal-tab-content.active {
    display: block;
}

.sf-modal-subtitle {
    color: var(--sf-text-light);
    margin-bottom: 15px;
}

/* =============================================================================
   RESUME GRID (dans le modal)
   ============================================================================= */
.sf-resume-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.sf-resume-card {
    background: var(--sf-light);
    border-radius: var(--sf-radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

.sf-resume-card-icon {
    font-size: 32px;
}

.sf-resume-card-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--sf-primary);
}

.sf-resume-card-label {
    font-size: 12px;
    color: var(--sf-text-light);
}

.sf-resume-card-sub {
    font-size: 11px;
    color: var(--sf-text-light);
    margin-top: 3px;
}

.sf-resume-card.sf-resume-eval {
    background: var(--sf-success-light);
}

.sf-resume-card.sf-resume-empty {
    background: var(--sf-warning-light);
}

.sf-resume-actions {
    text-align: center;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .sf-resume-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   ACTIVITES LIEES
   ============================================================================= */
.sf-activites-liees-list,
.sf-formations-liees-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-activite-liee-item,
.sf-formation-liee-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
}

.sf-activite-liee-date,
.sf-formation-liee-date {
    background: var(--sf-primary);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}

.sf-activite-liee-content,
.sf-formation-liee-content {
    flex: 1;
}

.sf-activite-liee-content strong,
.sf-formation-liee-content strong {
    display: block;
    margin-bottom: 5px;
}

.sf-activite-liee-lieu {
    font-size: 13px;
    color: var(--sf-text-light);
    display: block;
    margin-bottom: 5px;
}

.sf-activite-liee-content p,
.sf-formation-liee-content p {
    margin: 5px 0 0;
    font-size: 13px;
    color: var(--sf-text-light);
}

.sf-formation-duree {
    background: var(--sf-light);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    margin-left: 10px;
}

.sf-empty-state-small {
    text-align: center;
    padding: 20px;
    color: var(--sf-text-light);
}

/* =============================================================================
   HISTORIQUE
   ============================================================================= */
.sf-historique-chart {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 15px;
    height: 120px;
    padding: 20px 0;
    border-bottom: 1px solid var(--sf-border);
    overflow-x: auto;
}

.sf-historique-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    height: 100%;
    justify-content: flex-end;
}

.sf-historique-bar-fill {
    width: 40px;
    background: linear-gradient(180deg, var(--sf-success) 0%, var(--sf-primary) 100%);
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5px;
    min-height: 20px;
}

.sf-historique-bar-value {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.sf-historique-bar-label {
    font-size: 10px;
    color: var(--sf-text-light);
    margin-top: 5px;
    text-align: center;
}

.sf-historique-list {
    margin-top: 20px;
}

.sf-historique-list h5 {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: var(--sf-text);
}

.sf-historique-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sf-light);
}

.sf-historique-item:last-child {
    border-bottom: none;
}

.sf-historique-item-date {
    font-size: 12px;
    color: var(--sf-text-light);
    min-width: 80px;
}

.sf-historique-item-content {
    flex: 1;
}

.sf-historique-item-content .sf-badge {
    margin-right: 8px;
}

.sf-historique-item-content p {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--sf-text-light);
}

/* =============================================================================
   FORMATIONS OVERVIEW
   ============================================================================= */
.sf-formations-overview {
    padding: 10px 0;
}

.sf-bloc-formations {
    margin-bottom: 25px;
}

.sf-bloc-formations h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
}

.sf-activite-formations {
    margin-left: 20px;
    margin-bottom: 15px;
}

.sf-activite-formations h5 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--sf-text-light);
}

.sf-fiches-formations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.sf-fiche-formation-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
    transition: all 0.2s;
}

.sf-fiche-formation-card:hover {
    background: #e8f4fc;
}

.sf-fiche-formation-card .sf-fiche-code {
    background: var(--sf-primary);
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 3px;
}

.sf-fiche-formation-card .sf-fiche-titre {
    flex: 1;
    font-size: 13px;
}

/* =============================================================================
   HELP TEXT
   ============================================================================= */
.sf-help-text {
    font-size: 13px;
    color: var(--sf-text-light);
    margin-bottom: 20px;
    padding: 10px 15px;
    background: var(--sf-info-light);
    border-radius: var(--sf-radius);
    border-left: 3px solid var(--sf-info);
}

/* =============================================================================
   RESPONSIVE ADDITIONS
   ============================================================================= */
@media (max-width: 768px) {
    .sf-tabs {
        flex-wrap: wrap;
    }

    .sf-tab-btn {
        flex: 1;
        text-align: center;
        padding: 10px 12px;
        font-size: 13px;
    }

    .sf-quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .sf-activites-full-list {
        grid-template-columns: 1fr;
    }

    .sf-activite-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .sf-activite-item-actions {
        margin-top: 10px;
    }

    .sf-parcours-stats {
        grid-template-columns: 1fr;
    }

    .sf-timeline-chart {
        overflow-x: auto;
    }

    .sf-dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .sf-dashboard-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .sf-quick-counters {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =============================================================================
   NOUVEAU DASHBOARD - STATISTIQUES GLOBALES
   ============================================================================= */
.sf-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.sf-dashboard-stat {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: var(--sf-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}

.sf-dashboard-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sf-dashboard-stat-icon {
    font-size: 32px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-light);
    border-radius: 50%;
}

.sf-dashboard-stat-content {
    flex: 1;
}

.sf-dashboard-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--sf-text);
    line-height: 1.2;
}

.sf-dashboard-stat-label {
    font-size: 12px;
    color: var(--sf-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.sf-dashboard-stat-main .sf-dashboard-stat-icon {
    background: var(--sf-primary);
    color: #fff;
}

.sf-dashboard-stat-formation .sf-dashboard-stat-icon {
    background: var(--sf-info-light);
    color: var(--sf-primary);
}

.sf-dashboard-stat-pratique .sf-dashboard-stat-icon {
    background: var(--sf-warning-light);
    color: var(--sf-warning);
}

.sf-dashboard-stat-evaluation .sf-dashboard-stat-icon {
    background: var(--sf-success-light);
    color: var(--sf-success);
}

.sf-mini-progress {
    height: 4px;
    background: var(--sf-light);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.sf-mini-progress div {
    height: 100%;
    background: var(--sf-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.sf-dashboard-stat-formation .sf-mini-progress div {
    background: var(--sf-info);
}

.sf-dashboard-stat-pratique .sf-mini-progress div {
    background: var(--sf-warning);
}

.sf-dashboard-stat-evaluation .sf-mini-progress div {
    background: var(--sf-success);
}

/* =============================================================================
   NOUVEAU DASHBOARD - COMPTEURS RAPIDES
   ============================================================================= */
.sf-quick-counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.sf-quick-counter {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 15px 20px;
    text-align: center;
    position: relative;
}

.sf-counter-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--sf-primary);
    line-height: 1;
    margin-bottom: 5px;
}

.sf-counter-label {
    font-size: 12px;
    color: var(--sf-text-light);
    text-transform: uppercase;
}

.sf-counter-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--sf-success);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
}

/* =============================================================================
   NOUVEAU DASHBOARD - GRILLE
   ============================================================================= */
.sf-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.sf-dashboard-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sf-dashboard-section {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    box-shadow: var(--sf-shadow);
}

.sf-dashboard-section .sf-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sf-light);
}

.sf-dashboard-section .sf-section-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sf-text);
}

.sf-dashboard-section .sf-section-footer {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--sf-light);
    text-align: center;
}

/* =============================================================================
   NOUVEAU DASHBOARD - MINI LISTES
   ============================================================================= */
.sf-mini-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-mini-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--sf-light);
    border-radius: 6px;
    transition: background 0.2s;
}

.sf-mini-item:hover {
    background: #e8e8e8;
}

.sf-mini-item-date {
    font-size: 11px;
    color: var(--sf-text-light);
    min-width: 65px;
    padding-top: 2px;
}

.sf-mini-item-content {
    flex: 1;
    min-width: 0;
}

.sf-mini-item-content strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-mini-item-sub {
    display: block;
    font-size: 12px;
    color: var(--sf-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-mini-item-meta {
    display: block;
    font-size: 11px;
    color: var(--sf-text-light);
    margin-top: 4px;
}

.sf-mini-badges {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.sf-mini-badge {
    font-size: 10px;
    padding: 2px 8px;
    background: var(--sf-border);
    color: var(--sf-text-light);
    border-radius: 10px;
}

.sf-mini-badge.sf-badge-niveau {
    background: var(--sf-success-light);
    color: var(--sf-success);
}

.sf-mini-badge.sf-badge-confiance {
    background: var(--sf-info-light);
    color: var(--sf-primary);
}

.sf-mini-item-actions {
    display: flex;
    gap: 5px;
}

.sf-mini-item-actions .sf-btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.sf-mini-item-actions .sf-btn-icon:hover {
    background: var(--sf-primary);
    color: #fff;
    border-color: var(--sf-primary);
}

/* Mini item types */
.sf-mini-item-formation {
    border-left: 3px solid var(--sf-info);
}

.sf-mini-item-activite {
    border-left: 3px solid var(--sf-warning);
}

.sf-mini-item-evaluation {
    border-left: 3px solid var(--sf-success);
}

/* =============================================================================
   NOUVEAU DASHBOARD - CONSEILS
   ============================================================================= */
.sf-dashboard-tips {
    background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
}

.sf-tips-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sf-tip-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid var(--sf-border);
}

.sf-tip-icon {
    font-size: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-info-light);
    border-radius: 50%;
    flex-shrink: 0;
}

.sf-tip-text {
    flex: 1;
    font-size: 13px;
    color: var(--sf-text);
}

.sf-btn-outline {
    background: transparent;
    border: 1px solid var(--sf-primary);
    color: var(--sf-primary);
}

.sf-btn-outline:hover {
    background: var(--sf-primary);
    color: #fff;
}

/* =============================================================================
   EMPTY STATES SMALL
   ============================================================================= */
.sf-empty-state-small {
    text-align: center;
    padding: 30px 20px;
    color: var(--sf-text-light);
}

.sf-empty-state-small p {
    margin: 0 0 15px 0;
    font-size: 13px;
}

/* =============================================================================
   EQUIPE PEDAGOGIQUE
   ============================================================================= */
.sf-equipe-pedagogique {
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
}

.sf-equipe-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-equipe-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
}

.sf-equipe-member:hover {
    border-color: var(--sf-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.sf-equipe-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.sf-equipe-tuteur .sf-equipe-avatar {
    background: #d1fae5;
    color: #065f46;
}

.sf-equipe-formateur .sf-equipe-avatar {
    background: #dbeafe;
    color: #1e40af;
}

.sf-equipe-manager .sf-equipe-avatar {
    background: #ede9fe;
    color: #5b21b6;
}

.sf-equipe-rh .sf-equipe-avatar {
    background: #fef3c7;
    color: #92400e;
}

.sf-equipe-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sf-equipe-role {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sf-text-light);
    font-weight: 500;
}

.sf-equipe-info strong {
    font-size: 14px;
    color: var(--sf-text);
}

.sf-equipe-email {
    font-size: 12px;
    color: var(--sf-primary);
    text-decoration: none;
}

.sf-equipe-email:hover {
    text-decoration: underline;
}

.sf-equipe-meta {
    font-size: 12px;
    color: var(--sf-text-light);
}

/* =============================================================================
   CALENDRIER TUTEUR - MISSIONS
   ============================================================================= */
.sf-calendrier-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
}

.sf-calendrier-nav h3 {
    margin: 0;
    font-size: 18px;
    text-transform: capitalize;
}

.sf-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sf-calendrier-grid {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
}

.sf-cal-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--sf-primary);
    color: #fff;
}

.sf-cal-day-header {
    padding: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
}

.sf-cal-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.sf-cal-day {
    min-height: 100px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 5px;
    position: relative;
}

.sf-cal-day:nth-child(7n) {
    border-right: none;
}

.sf-cal-day-empty {
    background: #fafafa;
}

.sf-cal-day-num {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-text-light);
    margin-bottom: 5px;
}

.sf-cal-today {
    background: #e7f3ff;
}

.sf-cal-today .sf-cal-day-num {
    color: var(--sf-primary);
    font-weight: 700;
}

.sf-cal-has-events {
    background: #f0fdf4;
}

.sf-cal-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sf-cal-event {
    padding: 3px 5px;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
    background: #d1fae5;
    border-left: 3px solid #10b981;
}

.sf-cal-event:hover {
    opacity: 0.9;
}

.sf-event-candidat {
    display: block;
    font-weight: 600;
    color: #065f46;
}

.sf-event-titre {
    display: block;
    color: #047857;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-mission-type-objectif {
    background: #dbeafe;
    border-left-color: #3b82f6;
}
.sf-mission-type-objectif .sf-event-candidat { color: #1e40af; }
.sf-mission-type-objectif .sf-event-titre { color: #2563eb; }

.sf-mission-type-evaluation {
    background: #ede9fe;
    border-left-color: #8b5cf6;
}
.sf-mission-type-evaluation .sf-event-candidat { color: #5b21b6; }
.sf-mission-type-evaluation .sf-event-titre { color: #7c3aed; }

.sf-mission-type-formation {
    background: #fef3c7;
    border-left-color: #f59e0b;
}
.sf-mission-type-formation .sf-event-candidat { color: #92400e; }
.sf-mission-type-formation .sf-event-titre { color: #d97706; }

.sf-mission-type-reunion {
    background: #fce7f3;
    border-left-color: #ec4899;
}
.sf-mission-type-reunion .sf-event-candidat { color: #9d174d; }
.sf-mission-type-reunion .sf-event-titre { color: #db2777; }

.sf-mission-urgente {
    border-left-color: #dc2626 !important;
    background: #fef2f2 !important;
}

.sf-mission-haute {
    border-left-color: #f59e0b !important;
}

/* Types d'evenements calendrier tuteur */
.sf-event-type-mission {
    background: #d1fae5;
    border-left: 3px solid #10b981;
}
.sf-event-type-mission .sf-event-candidat { color: #065f46; }
.sf-event-type-mission .sf-event-titre { color: #047857; }

.sf-event-type-formation {
    background: #ede9fe;
    border-left: 3px solid #8b5cf6;
}
.sf-event-type-formation .sf-event-candidat { color: #5b21b6; }
.sf-event-type-formation .sf-event-titre { color: #7c3aed; }

.sf-event-type-activite {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
}
.sf-event-type-activite .sf-event-candidat { color: #92400e; }
.sf-event-type-activite .sf-event-titre { color: #d97706; }

.sf-event-urgente {
    border-left-color: #dc2626 !important;
    background: #fef2f2 !important;
}

.sf-event-haute {
    border-left-color: #f59e0b !important;
}

/* Legende calendrier */
.sf-cal-legende {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    padding: 10px 15px;
    background: #f8fafc;
    border-radius: var(--sf-radius);
    font-size: 12px;
}

.sf-legende-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sf-legende-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.sf-legende-color.sf-type-mission {
    background: #d1fae5;
    border-left: 3px solid #10b981;
}

.sf-legende-color.sf-type-formation {
    background: #ede9fe;
    border-left: 3px solid #8b5cf6;
}

.sf-legende-color.sf-type-activite {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
}

/* Jours cliquables */
.sf-cal-day-clickable {
    cursor: pointer;
    position: relative;
}

.sf-cal-day-clickable:hover {
    background: #f0f9ff;
}

.sf-cal-day-clickable:hover .sf-cal-add-btn {
    opacity: 1;
}

.sf-cal-add-btn {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: var(--sf-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
}

.sf-cal-add-btn:hover {
    background: var(--sf-primary-dark);
}

/* Liste des missions a venir */
.sf-missions-list-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--sf-border);
}

.sf-missions-list-section h3 {
    margin: 0 0 15px 0;
}

.sf-missions-avenir-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-mission-avenir-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    transition: all 0.2s;
}

.sf-mission-avenir-item:hover {
    border-color: var(--sf-primary);
    box-shadow: var(--sf-shadow);
}

.sf-mission-date {
    width: 50px;
    text-align: center;
    flex-shrink: 0;
}

.sf-mission-jour {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--sf-primary);
    line-height: 1;
}

.sf-mission-mois {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--sf-text-light);
}

.sf-mission-content {
    flex: 1;
}

.sf-mission-header {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 5px;
}

.sf-mission-type-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
}

.sf-mission-priorite {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
}

.sf-priorite-basse { background: #f3f4f6; color: #6b7280; }
.sf-priorite-normale { background: #dbeafe; color: #1e40af; }
.sf-priorite-haute { background: #fef3c7; color: #92400e; }
.sf-priorite-urgente { background: #fef2f2; color: #dc2626; font-weight: 700; }

.sf-mission-titre {
    margin: 0 0 3px 0;
    font-size: 14px;
    color: var(--sf-text);
}

.sf-mission-candidat {
    margin: 0;
    font-size: 13px;
    color: var(--sf-text-light);
}

.sf-mission-lieu {
    margin: 3px 0 0 0;
    color: var(--sf-text-light);
}

.sf-mission-actions {
    flex-shrink: 0;
}

.sf-btn-mission-done {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--sf-success);
    background: transparent;
    color: var(--sf-success);
    cursor: pointer;
    font-size: 14px;
}

.sf-btn-mission-done:hover {
    background: var(--sf-success);
    color: #fff;
}

/* Responsive calendrier */
@media (max-width: 768px) {
    .sf-cal-day {
        min-height: 60px;
        padding: 3px;
    }

    .sf-cal-event {
        font-size: 8px;
        padding: 2px 3px;
    }

    .sf-event-candidat {
        display: none;
    }

    .sf-calendrier-nav {
        flex-direction: column;
        gap: 10px;
    }

    .sf-header-actions {
        flex-direction: column;
        width: 100%;
    }

    .sf-header-actions select,
    .sf-header-actions button {
        width: 100%;
    }
}

/* =============================================================================
   ONGLET FORMATIONS - HEADER & TABS INTERNES
   ============================================================================= */
.sf-formations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.sf-formations-tabs {
    display: flex;
    gap: 5px;
    background: var(--sf-light);
    padding: 5px;
    border-radius: var(--sf-radius);
}

.sf-formations-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sf-text-light);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-formations-tab:hover {
    color: var(--sf-primary);
    background: rgba(255,255,255,0.5);
}

.sf-formations-tab.active {
    background: #fff;
    color: var(--sf-primary);
    box-shadow: var(--sf-shadow);
}

.sf-formations-actions {
    display: flex;
    gap: 10px;
}

.sf-formations-tab-content {
    display: none;
}

.sf-formations-tab-content.active {
    display: block;
}

/* =============================================================================
   HISTORIQUE DES FORMATIONS - TIMELINE
   ============================================================================= */
.sf-formations-timeline {
    position: relative;
    padding-left: 30px;
}

.sf-formations-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--sf-border);
}

.sf-formation-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    margin-bottom: 20px;
    box-shadow: var(--sf-shadow);
    overflow: hidden;
}

.sf-formation-card::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 25px;
    width: 12px;
    height: 12px;
    background: var(--sf-primary);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--sf-primary);
}

.sf-formation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    background: linear-gradient(135deg, var(--sf-info-light) 0%, #fff 100%);
    border-bottom: 1px solid var(--sf-border);
}

.sf-formation-card-info {
    flex: 1;
}

.sf-formation-card-date {
    font-size: 12px;
    color: var(--sf-text-light);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-formation-card-date span {
    background: var(--sf-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.sf-formation-card-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: var(--sf-text);
}

.sf-formation-card-meta {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: var(--sf-text-light);
}

.sf-formation-card-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sf-formation-card-actions {
    display: flex;
    gap: 8px;
}

.sf-formation-card-body {
    padding: 20px;
}

.sf-formation-fiches {
    margin-bottom: 20px;
}

.sf-formation-fiches h5 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--sf-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-fiches-mini-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sf-fiche-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--sf-light);
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.2s;
}

.sf-fiche-mini:hover {
    background: #e8e8e8;
}

.sf-fiche-mini code {
    background: var(--sf-primary);
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
}

.sf-formation-supports {
    border-top: 1px solid var(--sf-border);
    padding-top: 15px;
}

.sf-formation-supports-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sf-formation-supports-header h5 {
    margin: 0;
    font-size: 14px;
    color: var(--sf-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-supports-mini-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sf-support-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--sf-light);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.sf-support-mini:hover {
    border-color: var(--sf-primary);
    background: var(--sf-info-light);
}

.sf-support-mini-icon {
    font-size: 18px;
}

.sf-support-mini-info {
    font-size: 13px;
}

.sf-support-mini-info strong {
    display: block;
    color: var(--sf-text);
}

.sf-support-mini-info span {
    font-size: 11px;
    color: var(--sf-text-light);
}

/* =============================================================================
   FORMATIONS GROUPEES PAR BLOC/ACTIVITE/COMPETENCE
   ============================================================================= */
.sf-formations-grouped {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sf-formations-bloc {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
    box-shadow: var(--sf-shadow);
}

.sf-formations-bloc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--sf-primary) 0%, #2980b9 100%);
    color: #fff;
}

.sf-formations-bloc-header .sf-bloc-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
}

.sf-formations-bloc-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.sf-formations-activite {
    border-bottom: 1px solid var(--sf-border);
}

.sf-formations-activite:last-child {
    border-bottom: none;
}

.sf-formations-activite-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--sf-light);
    border-bottom: 1px solid var(--sf-border);
}

.sf-formations-activite-header .sf-activite-badge {
    background: var(--sf-success);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
}

.sf-formations-activite-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--sf-text);
}

.sf-formations-competences-list {
    padding: 15px 20px;
}

.sf-formation-competence-group {
    background: var(--sf-light);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
}

.sf-formation-competence-group:last-child {
    margin-bottom: 0;
}

.sf-formation-competence-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.sf-formation-competence-header .sf-competence-code {
    background: var(--sf-primary);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.sf-formation-competence-header .sf-competence-titre {
    flex: 1;
    font-weight: 500;
    color: var(--sf-text);
    font-size: 14px;
}

.sf-formation-competence-header .sf-competence-count {
    font-size: 12px;
    color: var(--sf-text-light);
    background: #fff;
    padding: 2px 8px;
    border-radius: 10px;
}

.sf-formation-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.sf-formation-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid var(--sf-border);
}

.sf-formation-item-date {
    font-size: 12px;
    font-weight: 500;
    color: var(--sf-primary);
    white-space: nowrap;
}

.sf-formation-item-details {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--sf-text-light);
}

.sf-formation-item-details span {
    display: inline-block;
}

.sf-formation-statut {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 10px;
}

.sf-formation-statut.en-cours {
    background: #fff3cd;
    color: #856404;
}

.sf-formation-statut.termine {
    background: #d4edda;
    color: #155724;
}

.sf-formation-statut.a-revoir {
    background: #f8d7da;
    color: #721c24;
}

.sf-formation-supports-mini {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--sf-border);
}

.sf-formation-supports-mini .sf-supports-label {
    font-size: 12px;
    color: var(--sf-text-light);
}

.sf-formation-supports-mini .sf-support-tag {
    display: inline-block;
    background: #fff;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 11px;
    border: 1px solid var(--sf-border);
    cursor: pointer;
}

.sf-formation-supports-mini .sf-support-tag:hover {
    border-color: var(--sf-primary);
    background: var(--sf-info-light);
}

/* =============================================================================
   GRILLE DES SUPPORTS
   ============================================================================= */
.sf-supports-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sf-filter-btn {
    padding: 8px 16px;
    background: var(--sf-light);
    border: 1px solid var(--sf-border);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sf-filter-btn:hover {
    border-color: var(--sf-primary);
    color: var(--sf-primary);
}

.sf-filter-btn.active {
    background: var(--sf-primary);
    color: #fff;
    border-color: var(--sf-primary);
}

.sf-filter-btn .sf-filter-count {
    background: rgba(0,0,0,0.1);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
}

.sf-filter-btn.active .sf-filter-count {
    background: rgba(255,255,255,0.3);
}

.sf-supports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.sf-support-card {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
    transition: all 0.2s;
    position: relative;
}

.sf-support-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.sf-support-card-color {
    height: 6px;
    background: var(--sf-primary);
}

.sf-support-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px;
    background: var(--sf-light);
}

.sf-support-card-type {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-support-card-icon {
    font-size: 24px;
}

.sf-support-card-type-label {
    font-size: 12px;
    color: var(--sf-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-support-card-favori {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    color: var(--sf-border);
    transition: all 0.2s;
}

.sf-support-card-favori:hover {
    color: var(--sf-warning);
    transform: scale(1.2);
}

.sf-support-card-favori.is-favori {
    color: var(--sf-warning);
}

.sf-support-card-body {
    padding: 15px;
}

.sf-support-card-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sf-text);
}

.sf-support-card-excerpt {
    font-size: 13px;
    color: var(--sf-text-light);
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sf-support-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sf-support-card-tag {
    font-size: 11px;
    padding: 3px 8px;
    background: var(--sf-light);
    border-radius: 4px;
    color: var(--sf-text-light);
}

.sf-support-card-tag.sf-tag-formation {
    background: var(--sf-info-light);
    color: var(--sf-primary);
}

.sf-support-card-tag.sf-tag-fiche {
    background: var(--sf-success-light);
    color: var(--sf-success);
}

.sf-support-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--sf-light);
    border-top: 1px solid var(--sf-border);
}

.sf-support-card-date {
    font-size: 11px;
    color: var(--sf-text-light);
}

.sf-support-card-actions {
    display: flex;
    gap: 5px;
}

.sf-support-card-actions .sf-btn-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* =============================================================================
   GROUPES DE SUPPORTS PAR TYPE
   ============================================================================= */
.sf-supports-type-group {
    margin-bottom: 30px;
}

.sf-supports-type-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--sf-border);
}

.sf-supports-type-icon {
    font-size: 28px;
}

.sf-supports-type-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--sf-text);
}

.sf-supports-type-count {
    background: var(--sf-primary);
    color: #fff;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 12px;
    margin-left: auto;
}

/* =============================================================================
   GRILLE FAVORIS
   ============================================================================= */
.sf-favoris-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.sf-favori-card {
    background: linear-gradient(135deg, #fffdf0 0%, #fff 100%);
    border: 1px solid var(--sf-warning);
    border-radius: var(--sf-radius);
    padding: 20px;
    position: relative;
    transition: all 0.2s;
}

.sf-favori-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(219, 166, 23, 0.2);
}

.sf-favori-card::before {
    content: '\2605';
    position: absolute;
    top: -8px;
    right: 15px;
    font-size: 24px;
    color: var(--sf-warning);
}

.sf-favori-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.sf-favori-card-icon {
    font-size: 24px;
}

.sf-favori-card-type {
    font-size: 11px;
    color: var(--sf-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-favori-card-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sf-text);
}

.sf-favori-card-excerpt {
    font-size: 13px;
    color: var(--sf-text-light);
    line-height: 1.5;
    margin-bottom: 15px;
}

.sf-favori-card-actions {
    display: flex;
    gap: 8px;
}

/* =============================================================================
   MODAL SUPPORT DETAIL
   ============================================================================= */
.sf-support-detail {
    padding: 10px;
}

.sf-support-detail-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--sf-light);
}

.sf-support-detail-icon {
    font-size: 48px;
}

.sf-support-detail-info h2 {
    margin: 0 0 5px 0;
    font-size: 22px;
}

.sf-support-detail-type {
    font-size: 13px;
    color: var(--sf-text-light);
}

.sf-support-detail-section {
    margin-bottom: 20px;
}

.sf-support-detail-section h4 {
    font-size: 14px;
    color: var(--sf-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
}

.sf-support-detail-content {
    background: var(--sf-light);
    padding: 20px;
    border-radius: var(--sf-radius);
    white-space: pre-wrap;
    line-height: 1.6;
}

.sf-support-detail-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: var(--sf-info-light);
    border-radius: var(--sf-radius);
    text-decoration: none;
    color: var(--sf-primary);
    transition: all 0.2s;
}

.sf-support-detail-link:hover {
    background: var(--sf-primary);
    color: #fff;
}

.sf-support-detail-file {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
    border: 1px solid var(--sf-border);
}

.sf-support-detail-file-icon {
    font-size: 32px;
}

.sf-support-detail-file-info {
    flex: 1;
}

.sf-support-detail-file-name {
    font-weight: 600;
    margin-bottom: 3px;
}

.sf-support-detail-file-size {
    font-size: 12px;
    color: var(--sf-text-light);
}

.sf-support-detail-meta {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
}

.sf-support-detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sf-support-detail-meta-label {
    font-size: 11px;
    color: var(--sf-text-light);
    text-transform: uppercase;
}

.sf-support-detail-meta-value {
    font-weight: 500;
}

.sf-support-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--sf-border);
}

/* =============================================================================
   MODAL SUPPORT FORM
   ============================================================================= */
.sf-support-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.sf-support-type-option {
    position: relative;
}

.sf-support-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sf-support-type-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 10px;
    background: var(--sf-light);
    border: 2px solid transparent;
    border-radius: var(--sf-radius);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.sf-support-type-option label:hover {
    border-color: var(--sf-border);
    background: #fff;
}

.sf-support-type-option input[type="radio"]:checked + label {
    border-color: var(--sf-primary);
    background: var(--sf-info-light);
}

.sf-support-type-icon {
    font-size: 28px;
}

.sf-support-type-label {
    font-size: 12px;
    color: var(--sf-text);
    font-weight: 500;
}

/* Color picker */
.sf-color-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sf-color-option {
    position: relative;
}

.sf-color-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sf-color-option label {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
}

.sf-color-option label:hover {
    transform: scale(1.1);
}

.sf-color-option input[type="radio"]:checked + label {
    border-color: var(--sf-text);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sf-text);
}

/* Conditional fields */
.sf-field-lien,
.sf-field-fichier,
.sf-field-contenu {
    display: none;
}

.sf-field-lien.show,
.sf-field-fichier.show,
.sf-field-contenu.show {
    display: block;
}

/* =============================================================================
   RESPONSIVE FORMATIONS
   ============================================================================= */
@media (max-width: 768px) {
    .sf-formations-header {
        flex-direction: column;
        align-items: stretch;
    }

    .sf-formations-tabs {
        flex-wrap: wrap;
    }

    .sf-formations-tab {
        flex: 1;
        justify-content: center;
        padding: 8px 12px;
        font-size: 13px;
    }

    .sf-formations-timeline {
        padding-left: 20px;
    }

    .sf-formations-timeline::before {
        left: 5px;
    }

    .sf-formation-card::before {
        left: -19px;
        width: 10px;
        height: 10px;
    }

    .sf-formation-card-header {
        flex-direction: column;
        gap: 15px;
    }

    .sf-formation-card-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .sf-supports-grid {
        grid-template-columns: 1fr;
    }

    .sf-favoris-grid {
        grid-template-columns: 1fr;
    }

    .sf-support-type-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sf-support-detail-header {
        flex-direction: column;
        text-align: center;
    }

    .sf-support-detail-meta {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .sf-support-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sf-formation-card-meta {
        flex-direction: column;
        gap: 5px;
    }
}

/* =============================================================================
   SELECTEUR DE COMPETENCES VISUEL (PICKER)
   ============================================================================= */

/* Etapes du formulaire */
.sf-form-step {
    display: none;
}

.sf-form-step.active {
    display: block;
}

.sf-step-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--sf-primary);
}

.sf-step-number {
    width: 36px;
    height: 36px;
    background: var(--sf-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
}

.sf-step-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--sf-text);
}

.sf-step-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--sf-border);
}

/* Barre de recherche */
.sf-competence-search {
    margin-bottom: 15px;
}

.sf-search-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--sf-border);
    border-radius: var(--sf-radius);
    font-size: 15px;
    transition: border-color 0.2s;
}

.sf-search-input:focus {
    outline: none;
    border-color: var(--sf-primary);
}

/* Picker accordeon */
.sf-competence-picker {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: #fff;
}

.sf-picker-loading,
.sf-picker-error {
    padding: 40px;
    text-align: center;
    color: var(--sf-text-light);
}

/* Bloc */
.sf-picker-bloc {
    border-bottom: 1px solid var(--sf-border);
}

.sf-picker-bloc:last-child {
    border-bottom: none;
}

.sf-picker-bloc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: var(--sf-light);
    cursor: pointer;
    transition: background 0.2s;
}

.sf-picker-bloc-header:hover {
    background: #e8e8e8;
}

.sf-picker-bloc.open .sf-picker-bloc-header {
    background: var(--sf-primary);
    color: #fff;
}

.sf-picker-toggle {
    font-size: 12px;
    transition: transform 0.2s;
}

.sf-picker-bloc.open .sf-picker-toggle,
.sf-picker-activite.open .sf-picker-toggle {
    transform: rotate(90deg);
}

.sf-picker-bloc.open .sf-picker-bloc-header .sf-picker-toggle {
    color: #fff;
}

.sf-picker-bloc-num {
    background: var(--sf-danger);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
}

.sf-picker-bloc.open .sf-picker-bloc-num {
    background: #fff;
    color: var(--sf-danger);
}

.sf-picker-bloc-titre {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
}

.sf-picker-bloc-count {
    font-size: 12px;
    color: var(--sf-text-light);
    background: #fff;
    padding: 2px 8px;
    border-radius: 10px;
}

.sf-picker-bloc.open .sf-picker-bloc-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.sf-picker-bloc-content {
    padding: 10px 10px 10px 20px;
}

/* Activite */
.sf-picker-activite {
    margin-bottom: 8px;
    border: 1px solid var(--sf-border);
    border-radius: 6px;
    overflow: hidden;
}

.sf-picker-activite-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s;
}

.sf-picker-activite-header:hover {
    background: var(--sf-light);
}

.sf-picker-activite.open .sf-picker-activite-header {
    background: var(--sf-info-light);
}

.sf-picker-activite-num {
    background: var(--sf-success);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
}

.sf-picker-activite-titre {
    flex: 1;
    font-size: 13px;
    color: var(--sf-text);
}

.sf-picker-activite-content {
    padding: 10px;
    background: var(--sf-light);
}

/* Fiche (competence) */
.sf-picker-fiche {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    margin-bottom: 6px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.sf-picker-fiche:last-child {
    margin-bottom: 0;
}

.sf-picker-fiche:hover {
    border-color: var(--sf-primary);
    background: var(--sf-info-light);
}

.sf-picker-fiche.selected {
    border-color: var(--sf-success);
    background: var(--sf-success-light);
}

.sf-picker-fiche-code {
    background: var(--sf-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 3px;
    white-space: nowrap;
    font-family: monospace;
}

.sf-picker-fiche.selected .sf-picker-fiche-code {
    background: var(--sf-success);
}

.sf-picker-fiche-titre {
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
    color: var(--sf-text);
}

/* Competence selectionnee */
.sf-selected-competence {
    background: var(--sf-success-light);
    border: 2px solid var(--sf-success);
    border-radius: var(--sf-radius);
    padding: 15px;
    margin-top: 15px;
}

.sf-selected-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sf-selected-icon {
    font-size: 20px;
}

.sf-selected-label {
    font-size: 12px;
    color: var(--sf-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1;
}

.sf-btn-change {
    background: transparent;
    border: 1px solid var(--sf-success);
    color: var(--sf-success);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.sf-btn-change:hover {
    background: var(--sf-success);
    color: #fff;
}

.sf-selected-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sf-selected-code {
    background: var(--sf-success);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: monospace;
}

.sf-selected-titre {
    font-size: 14px;
    font-weight: 500;
    color: var(--sf-text);
    line-height: 1.4;
}

/* Resume de competence dans etape 2 */
.sf-competence-resume {
    margin-bottom: 20px;
}

.sf-competence-resume-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--sf-info-light) 0%, #fff 100%);
    border: 1px solid var(--sf-info);
    border-radius: var(--sf-radius);
}

.sf-competence-resume-icon {
    font-size: 32px;
}

.sf-competence-resume-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sf-competence-resume-label {
    font-size: 11px;
    color: var(--sf-text-light);
    text-transform: uppercase;
}

.sf-competence-resume-code {
    font-size: 14px;
    color: var(--sf-primary);
    font-family: monospace;
}

.sf-competence-resume-titre {
    font-size: 13px;
    color: var(--sf-text);
}

/* Responsive picker */
@media (max-width: 768px) {
    .sf-competence-picker {
        max-height: 300px;
    }

    .sf-picker-bloc-header {
        padding: 12px;
    }

    .sf-picker-bloc-titre {
        font-size: 13px;
    }

    .sf-picker-fiche {
        padding: 10px;
    }

    .sf-picker-fiche-titre {
        font-size: 12px;
    }

    .sf-step-header {
        flex-direction: column;
        text-align: center;
    }
}

/* =============================================================================
   MULTI-SELECTION PICKER
   ============================================================================= */

/* Toolbar */
.sf-picker-toolbar {
    display: flex;
    gap: 10px;
    padding: 10px 15px;
    background: var(--sf-light);
    border-bottom: 1px solid var(--sf-border);
}

.sf-picker-toolbar-btn {
    background: #fff;
    border: 1px solid var(--sf-border);
    color: var(--sf-text-light);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sf-picker-toolbar-btn:hover {
    border-color: var(--sf-primary);
    color: var(--sf-primary);
}

.sf-picker-toolbar-btn.sf-btn-clear:hover {
    border-color: var(--sf-danger);
    color: var(--sf-danger);
}

/* Checkboxes */
.sf-picker-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--sf-success);
    cursor: pointer;
    flex-shrink: 0;
}

.sf-picker-bloc-header .sf-picker-checkbox,
.sf-picker-activite-header .sf-picker-checkbox {
    margin-right: 5px;
}

/* Selection Summary */
.sf-selection-summary {
    padding: 15px;
    background: var(--sf-success-light);
    border: 2px solid var(--sf-success);
    border-radius: var(--sf-radius);
    margin-top: 15px;
}

.sf-selection-summary.empty {
    background: var(--sf-light);
    border-color: var(--sf-border);
}

.sf-selection-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sf-selection-icon {
    font-size: 20px;
}

.sf-selection-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--sf-success);
}

.sf-selection-summary.empty .sf-selection-count {
    color: var(--sf-text-light);
}

.sf-selection-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.sf-selection-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--sf-success);
    color: var(--sf-text);
    padding: 4px 8px 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    max-width: 250px;
}

.sf-selection-tag-code {
    font-family: monospace;
    font-weight: 600;
    color: var(--sf-primary);
}

.sf-selection-tag-titre {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-selection-tag-remove {
    background: none;
    border: none;
    color: var(--sf-danger);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.sf-selection-tag-remove:hover {
    opacity: 1;
}

/* Multi-selection fiche row */
.sf-picker-fiche-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 15px;
    margin-bottom: 6px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 6px;
    transition: all 0.2s;
}

.sf-picker-fiche-row:last-child {
    margin-bottom: 0;
}

.sf-picker-fiche-row:hover {
    background: var(--sf-info-light);
    border-color: var(--sf-info);
}

.sf-picker-fiche-row.checked {
    background: var(--sf-success-light);
    border-color: var(--sf-success);
}

.sf-picker-fiche-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    cursor: pointer;
}

/* Modal large pour multi-selection */
.sf-modal-large .sf-modal-content {
    max-width: 900px;
}

/* Step indicator pour multi-selection */
.sf-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.sf-step-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sf-light);
    border: 2px solid var(--sf-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--sf-text-light);
    transition: all 0.3s;
}

.sf-step-dot.active {
    background: var(--sf-primary);
    border-color: var(--sf-primary);
    color: #fff;
}

.sf-step-dot.completed {
    background: var(--sf-success);
    border-color: var(--sf-success);
    color: #fff;
}

.sf-step-line {
    width: 60px;
    height: 2px;
    background: var(--sf-border);
    transition: background 0.3s;
}

.sf-step-line.completed {
    background: var(--sf-success);
}

/* Responsive multi-selection */
@media (max-width: 768px) {
    .sf-picker-toolbar {
        flex-wrap: wrap;
    }

    .sf-selection-tag {
        max-width: 200px;
    }

    .sf-modal-large .sf-modal-content {
        max-width: 100%;
        margin: 10px;
    }
}

/* =============================================================================
   CALENDRIER CANDIDAT (partage avec formateur)
   ============================================================================= */

/* Selecteur de groupe */
.sf-groupe-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: var(--sf-radius);
    border: 1px solid var(--sf-border);
}

.sf-groupe-selector label {
    font-weight: 600;
    color: var(--sf-text);
    font-size: 14px;
    white-space: nowrap;
}

.sf-groupe-selector .sf-select {
    flex: 1;
    max-width: 350px;
    padding: 10px 15px;
    border: 2px solid var(--sf-primary);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    color: var(--sf-text);
    cursor: pointer;
    transition: all 0.2s;
}

.sf-groupe-selector .sf-select:hover {
    border-color: var(--sf-primary-dark);
}

.sf-groupe-selector .sf-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.2);
}

.sf-calendrier-container {
    background: #fff;
    border-radius: var(--sf-radius);
    padding: 20px;
    border: 1px solid var(--sf-border);
}

.sf-calendrier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.sf-calendrier-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sf-calendrier-titre {
    font-size: 18px;
    font-weight: 600;
    color: var(--sf-text);
    min-width: 180px;
    text-align: center;
}

.sf-calendrier-views {
    display: flex;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
    padding: 3px;
}

.sf-calendrier-view-btn {
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    color: var(--sf-text);
}

.sf-calendrier-view-btn:hover {
    background: rgba(34, 113, 177, 0.1);
}

.sf-calendrier-view-btn.active {
    background: var(--sf-primary);
    color: #fff;
}

/* Legende */
.sf-calendrier-legende {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 12px;
    color: var(--sf-text-light);
    flex-wrap: wrap;
}

.sf-legende-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sf-legende-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.sf-legende-dot.formation_prevue { background: #8b5cf6; }
.sf-legende-dot.formation_realisee { background: #00a32a; }
.sf-legende-dot.activite_terrain { background: #dba617; }
.sf-legende-dot.activite_candidat { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border: 1px solid #b45309; }
.sf-legende-dot.mission_tuteur { background: linear-gradient(135deg, #10b981 0%, #059669 100%); border: 1px solid #047857; }

/* Grille calendrier */
.sf-calendrier-grid {
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
}

.sf-calendrier-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-text-light);
    text-transform: uppercase;
    padding: 12px 0;
    background: var(--sf-light);
    border-bottom: 1px solid var(--sf-border);
}

.sf-calendrier-weekdays span {
    display: block;
    width: 100%;
}

.sf-calendrier-days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    grid-auto-rows: minmax(80px, auto);
    width: 100%;
}

.sf-calendrier-day {
    min-height: 100px;
    min-width: 0;
    padding: 8px;
    border-right: 1px solid var(--sf-border);
    border-bottom: 1px solid var(--sf-border);
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    position: relative;
}

.sf-calendrier-day:hover {
    background: #f0f9ff;
    box-shadow: inset 0 0 0 2px var(--sf-primary-light);
}

.sf-calendrier-day:hover::after {
    content: '+ Ajouter activite';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--sf-primary);
    opacity: 0.7;
    white-space: nowrap;
}

.sf-calendrier-day:nth-child(7n) {
    border-right: none;
}

.sf-calendrier-day.other-month {
    background: var(--sf-light);
}

.sf-calendrier-day.other-month:hover {
    background: #e8f4fd;
}

.sf-calendrier-day.today {
    background: var(--sf-info-light);
}

.sf-calendrier-day.today:hover {
    background: #dbeafe;
}

.sf-calendrier-day.today .sf-day-number {
    background: var(--sf-primary);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sf-day-number {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--sf-text);
}

.sf-calendrier-day.other-month .sf-day-number {
    color: var(--sf-text-light);
}

/* Evenements */
.sf-calendrier-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    min-width: 0;
}

.sf-calendrier-event {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 3px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    max-width: 100%;
    display: block;
}

.sf-calendrier-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.sf-calendrier-event.formation_prevue { background: #8b5cf6; }
.sf-calendrier-event.formation_realisee { background: #00a32a; }
.sf-calendrier-event.activite_terrain { background: #dba617; }
.sf-calendrier-event.activite_candidat {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-left: 3px solid #b45309;
}
.sf-calendrier-event.mission_tuteur {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-left: 3px solid #047857;
}
.sf-calendrier-event.autre { background: #72aee6; }

.sf-calendrier-event-more {
    font-size: 10px;
    color: var(--sf-text-light);
    padding: 2px 0;
}

/* Vue semaine */
.sf-calendrier-week-view {
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
}

.sf-week-header {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    background: var(--sf-light);
    border-bottom: 1px solid var(--sf-border);
}

.sf-week-hour-header {
    padding: 10px;
    border-right: 1px solid var(--sf-border);
}

.sf-week-day-header {
    padding: 10px;
    text-align: center;
    border-right: 1px solid var(--sf-border);
}

.sf-week-day-header:last-child {
    border-right: none;
}

.sf-week-day-header.today {
    background: var(--sf-info-light);
}

.sf-week-day-name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--sf-text-light);
    text-transform: uppercase;
}

.sf-week-day-num {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--sf-text);
}

.sf-week-body {
    max-height: 500px;
    overflow-y: auto;
}

.sf-week-row {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    min-height: 60px;
    border-bottom: 1px solid var(--sf-border);
}

.sf-week-row:last-child {
    border-bottom: none;
}

.sf-week-hour {
    padding: 5px 8px;
    font-size: 11px;
    color: var(--sf-text-light);
    text-align: right;
    border-right: 1px solid var(--sf-border);
    background: var(--sf-light);
}

.sf-week-cell {
    border-right: 1px solid var(--sf-border);
    padding: 2px;
    cursor: pointer;
    transition: background 0.2s;
}

.sf-week-cell:hover {
    background: #f0f9ff;
}

.sf-week-cell:last-child {
    border-right: none;
}

.sf-week-cell .sf-calendrier-event {
    margin-bottom: 2px;
    font-size: 10px;
}

/* Modal detail evenement */
.sf-event-detail-info {
    padding: 10px 0;
}

.sf-event-detail-type {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 15px;
}

.sf-event-detail-type.formation_prevue { background: #8b5cf6; }
.sf-event-detail-type.formation_realisee { background: #00a32a; }
.sf-event-detail-type.activite_terrain { background: #dba617; }
.sf-event-detail-type.mission_tuteur { background: #10b981; }
.sf-event-detail-type.autre { background: #72aee6; }

.sf-event-detail-info p {
    margin: 8px 0;
    font-size: 14px;
}

.sf-event-detail-description {
    margin-top: 15px;
    padding: 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
    border-left: 4px solid var(--sf-primary);
}

.sf-event-detail-description strong {
    display: block;
    margin-bottom: 8px;
    color: var(--sf-text);
}

.sf-event-detail-description p {
    margin: 0;
    color: var(--sf-text);
    line-height: 1.6;
}

/* Responsive calendrier */
@media (max-width: 768px) {
    .sf-calendrier-header {
        flex-direction: column;
        align-items: stretch;
    }

    .sf-calendrier-nav {
        justify-content: center;
    }

    .sf-calendrier-views {
        justify-content: center;
    }

    .sf-calendrier-day {
        min-height: 70px;
        padding: 5px;
    }

    .sf-calendrier-event {
        font-size: 9px;
        padding: 2px 4px;
    }

    .sf-day-number {
        font-size: 12px;
    }
}


/* =============================================================================
   FICHES DE REVISION
   ============================================================================= */

.sf-revisions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.sf-revision-card {
    background: white;
    border-radius: var(--sf-radius);
    border: 1px solid var(--sf-border);
    overflow: hidden;
    box-shadow: var(--sf-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sf-revision-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.sf-revision-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 20px;
}

.sf-revision-header h3 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: white;
}

.sf-revision-formateur {
    font-size: 0.85rem;
    opacity: 0.8;
}

.sf-revision-content {
    padding: 20px;
}

.sf-revision-points {
    margin-bottom: 20px;
    padding: 15px;
    background: #f0f9ff;
    border-radius: 8px;
    border-left: 4px solid var(--sf-primary);
}

.sf-revision-points h4 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: var(--sf-text);
}

.sf-points-content {
    font-size: 0.9rem;
    color: var(--sf-text-light);
    line-height: 1.6;
}

.sf-revision-audio,
.sf-revision-video {
    margin-bottom: 15px;
}

.sf-revision-audio h4,
.sf-revision-video h4 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: var(--sf-text);
}

.sf-revision-audio audio {
    width: 100%;
    border-radius: 8px;
}

.sf-revision-video video {
    width: 100%;
    border-radius: 8px;
    background: #000;
}

.sf-revision-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--sf-border);
    background: var(--sf-light);
}

.sf-revision-date {
    font-size: 0.8rem;
    color: var(--sf-text-light);
}

/* Responsive */
@media (max-width: 768px) {
    .sf-revisions-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   MODAL DETAILS EVENEMENT CANDIDAT - RESSOURCES
   ============================================================================= */

#sf-event-resources-container {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px solid var(--sf-border);
}

#sf-event-resources-container h3 {
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    color: var(--sf-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

#sf-event-resources-loading {
    text-align: center;
    padding: 20px;
    color: var(--sf-text-light);
}

.sf-event-resource-section {
    margin-bottom: 20px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
    padding: 15px;
}

.sf-event-resource-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: var(--sf-text);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sf-border);
}

.sf-event-resource-section h4 .sf-icon {
    font-size: 1.1rem;
}

.sf-resource-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-resource-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid var(--sf-border);
    transition: all 0.2s ease;
}

.sf-resource-item:hover {
    border-color: var(--sf-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.sf-resource-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.sf-resource-info {
    flex: 1;
    min-width: 0;
}

.sf-resource-title {
    display: block;
    font-weight: 500;
    color: var(--sf-text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-resource-meta {
    display: block;
    font-size: 0.8rem;
    color: var(--sf-text-light);
}

.sf-resource-badges {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.sf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

.sf-badge-audio {
    background: #e0f2fe;
    color: #0369a1;
}

.sf-badge-video {
    background: #fce7f3;
    color: #be185d;
}

.sf-resource-item .sf-btn-small {
    padding: 6px 12px;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Status des ressources */
.sf-resource-evaluation.sf-status-done {
    border-left: 3px solid var(--sf-success);
}

.sf-resource-evaluation.sf-status-pending {
    border-left: 3px solid var(--sf-warning);
}

/* Message pas de ressources */
.sf-no-resources {
    text-align: center;
    padding: 30px;
    color: var(--sf-text-light);
}

.sf-no-resources p {
    margin: 0;
    font-style: italic;
}

/* Type d'evenement dans le modal */
.sf-event-detail-type {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 15px;
}

.sf-event-detail-type.formation_prevue { background: #8b5cf6; }
.sf-event-detail-type.formation_realisee { background: #00a32a; }
.sf-event-detail-type.activite_terrain { background: #dba617; }
.sf-event-detail-type.autre { background: #72aee6; }

.sf-event-detail-info {
    margin-bottom: 15px;
}

.sf-event-detail-info p {
    margin: 8px 0;
}

.sf-event-detail-description {
    margin-top: 15px;
    padding: 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
}

.sf-event-detail-description strong {
    display: block;
    margin-bottom: 8px;
}

/* Erreur */
.sf-error {
    color: var(--sf-danger);
    padding: 15px;
    text-align: center;
    background: #fee2e2;
    border-radius: var(--sf-radius);
}

/* Responsive modal ressources */
@media (max-width: 768px) {
    .sf-resource-item {
        flex-wrap: wrap;
    }

    .sf-resource-info {
        width: calc(100% - 50px);
    }

    .sf-resource-item .sf-btn-small {
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }
}

/* =============================================================================
   MODALS DYNAMIQUES - VISUALISATION DETAILS
   ============================================================================= */

/* Modal Medium */
.sf-modal-medium {
    max-width: 600px;
}

/* Support detail modal */
.sf-support-type-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--sf-primary);
    color: #fff;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 15px;
}

.sf-support-description {
    margin: 20px 0;
    padding: 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
}

.sf-support-description h4 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: var(--sf-text);
}

.sf-support-description p {
    margin: 0;
    color: var(--sf-text-light);
    line-height: 1.6;
}

.sf-support-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.sf-support-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--sf-border);
}

.sf-support-date {
    font-size: 0.8rem;
    color: var(--sf-text-light);
}

/* Activite terrain detail modal */
.sf-activite-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
    padding: 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
}

.sf-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sf-info-label {
    font-size: 0.8rem;
    color: var(--sf-text-light);
    font-weight: 500;
}

.sf-info-value {
    font-size: 0.95rem;
    color: var(--sf-text);
    font-weight: 600;
}

.sf-activite-description {
    margin: 20px 0;
    padding: 15px;
    background: #f0f9ff;
    border-radius: var(--sf-radius);
    border-left: 4px solid var(--sf-primary);
}

.sf-activite-description h4 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: var(--sf-text);
}

.sf-activite-description p {
    margin: 0;
    color: var(--sf-text-light);
    line-height: 1.6;
}

.sf-activite-competences {
    margin: 20px 0;
}

.sf-activite-competences h4 {
    margin: 0 0 15px 0;
    font-size: 0.95rem;
    color: var(--sf-text);
}

.sf-competences-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-competence-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
    border: 1px solid var(--sf-border);
}

.sf-comp-code {
    background: var(--sf-primary);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.sf-comp-titre {
    flex: 1;
    font-size: 0.9rem;
    color: var(--sf-text);
}

.sf-comp-niveau {
    font-size: 0.8rem;
    color: var(--sf-text-light);
    background: var(--sf-light);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Preuves activite */
.sf-activite-preuves {
    margin: 20px 0;
}

.sf-activite-preuves h4 {
    margin: 0 0 15px 0;
    font-size: 0.95rem;
    color: var(--sf-text);
}

.sf-preuves-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sf-preuve-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
    border: 1px solid var(--sf-border);
    text-decoration: none;
    color: var(--sf-text);
    transition: all 0.2s;
}

.sf-preuve-item:hover {
    background: var(--sf-primary);
    color: #fff;
    border-color: var(--sf-primary);
}

.sf-preuve-icon {
    font-size: 1.1rem;
}

.sf-preuve-name {
    font-size: 0.85rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Actions dans le modal activite terrain */
.sf-activite-actions {
    display: flex;
    gap: 12px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--sf-border);
}

.sf-btn-modifier-activite,
.sf-btn-ajouter-preuve {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--sf-radius);
    cursor: pointer;
    transition: all 0.2s;
}

.sf-btn-modifier-activite {
    background: var(--sf-primary);
    color: #fff;
    border: none;
}

.sf-btn-modifier-activite:hover {
    background: var(--sf-primary-dark);
    transform: translateY(-1px);
}

.sf-btn-ajouter-preuve {
    background: #fff;
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
}

.sf-btn-ajouter-preuve:hover {
    background: var(--sf-light);
    border-color: var(--sf-primary);
    color: var(--sf-primary);
}

/* Sessions calendrier dans l'onglet formations */
.sf-calendrier-sessions {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: var(--sf-radius);
    padding: 15px;
    margin-bottom: 15px;
}

.sf-calendrier-sessions-bloc {
    margin-bottom: 20px;
}

.sf-sessions-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.sf-sessions-icon {
    font-size: 1.1rem;
}

.sf-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-session-item {
    background: #fff;
    border-radius: 6px;
    padding: 12px 15px;
    border-left: 4px solid #0ea5e9;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.sf-session-item.realisee {
    border-left-color: #22c55e;
    background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
}

.sf-session-item.prevue {
    border-left-color: #3b82f6;
}

.sf-session-date {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--sf-text-light);
    margin-bottom: 6px;
}

.sf-session-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.sf-session-type-badge.realisee {
    background: #dcfce7;
    color: #166534;
}

.sf-session-type-badge.prevue {
    background: #dbeafe;
    color: #1e40af;
}

.sf-session-titre {
    font-weight: 600;
    color: var(--sf-text);
    margin-bottom: 4px;
}

.sf-session-lieu {
    font-size: 0.85rem;
    color: var(--sf-text-light);
}

.sf-session-description {
    font-size: 0.85rem;
    color: var(--sf-text-light);
    margin-top: 6px;
    line-height: 1.4;
}

/* =============================================================================
   TABLEAU DE BORD FORMATIONS CANDIDAT - VERSION COMPACTE ACCORDEON
   ============================================================================= */

.sf-dashboard-formations {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Graphique de progression global */
.sf-progress-overview {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--sf-radius-lg);
    color: #fff;
}

.sf-progress-circle-wrap {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.sf-progress-circle {
    width: 70px;
    height: 70px;
    transform: rotate(-90deg);
}

.sf-circle-bg {
    fill: none;
    stroke: rgba(255,255,255,0.2);
    stroke-width: 3;
}

.sf-circle-progress {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.sf-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    font-weight: 700;
}

.sf-progress-info {
    flex: 1;
}

.sf-progress-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.sf-progress-detail {
    font-size: 0.85rem;
    opacity: 0.9;
}

.sf-niveaux-mini {
    display: flex;
    gap: 8px;
}

.sf-niveau-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255,255,255,0.15);
    border-radius: 6px;
    min-width: 40px;
}

.sf-niveau-count {
    font-size: 1rem;
    font-weight: 700;
}

.sf-niveau-label {
    font-size: 0.7rem;
    opacity: 0.8;
}

.sf-niveau-1 { background: rgba(239, 68, 68, 0.3); }
.sf-niveau-2 { background: rgba(249, 115, 22, 0.3); }
.sf-niveau-3 { background: rgba(234, 179, 8, 0.3); }
.sf-niveau-4 { background: rgba(34, 197, 94, 0.3); }
.sf-niveau-5 { background: rgba(16, 185, 129, 0.4); }

/* Accordeon des blocs */
.sf-blocs-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-accordion-bloc {
    background: #fff;
    border-radius: var(--sf-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.sf-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s;
}

.sf-accordion-header:hover {
    background: var(--sf-light);
}

.sf-accordion-header.active {
    background: var(--sf-primary);
    color: #fff;
}

.sf-accordion-header.active .sf-bloc-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.sf-accordion-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sf-accordion-arrow {
    font-size: 0.8rem;
    width: 20px;
    transition: transform 0.2s;
}

.sf-accordion-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.sf-accordion-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sf-mini-stat {
    font-size: 0.85rem;
    font-weight: 600;
}

.sf-mini-progress {
    width: 60px;
    height: 6px;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.sf-accordion-header.active .sf-mini-progress {
    background: rgba(255,255,255,0.3);
}

.sf-mini-progress-bar {
    height: 100%;
    background: #22c55e;
    border-radius: 3px;
}

.sf-accordion-content {
    padding: 0 20px 20px;
    border-top: 1px solid var(--sf-border);
}

/* Activite dans accordeon */
.sf-dashboard-activite {
    margin-top: 15px;
    padding: 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
}

.sf-dashboard-activite-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.sf-dashboard-activite-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.sf-dashboard-activite-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Sections compactes */
.sf-dashboard-section {
    padding: 10px;
    background: #fff;
    border-radius: 6px;
}

.sf-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--sf-text-light);
    margin-bottom: 8px;
}

.sf-section-icon {
    font-size: 0.9rem;
}

/* Sessions compactes */
.sf-sessions-list-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sf-session-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--sf-light);
    border-radius: 4px;
    font-size: 0.8rem;
    border-left: 3px solid #3b82f6;
}

.sf-session-compact.realisee {
    border-left-color: #22c55e;
}

.sf-session-date-compact {
    font-weight: 600;
    color: var(--sf-primary);
}

.sf-session-titre-compact {
    color: var(--sf-text);
}

.sf-session-lieu-compact {
    color: var(--sf-text-light);
    font-size: 0.75rem;
}

/* Supports inline */
.sf-supports-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sf-support-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--sf-light);
    border: 1px solid var(--sf-border);
    border-radius: 20px;
    text-decoration: none;
    color: var(--sf-text);
    font-size: 0.8rem;
    transition: all 0.2s;
}

.sf-support-chip:hover {
    background: var(--sf-primary);
    color: #fff;
    border-color: var(--sf-primary);
}

.sf-support-chip .sf-support-icon {
    font-size: 0.9rem;
}

.sf-support-chip .sf-support-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Liste de competences compacte */
.sf-competences-list-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sf-competence-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--sf-light);
    border-radius: 6px;
    transition: all 0.2s;
}

.sf-competence-row:hover {
    background: #e5e7eb;
}

.sf-competence-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sf-competence-info .sf-competence-code {
    font-weight: 700;
    color: var(--sf-primary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.sf-competence-info .sf-competence-titre {
    font-size: 0.85rem;
    color: var(--sf-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-competence-icons {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.sf-icon-status {
    font-size: 0.85rem;
    opacity: 0.7;
}

.sf-icon-revision {
    color: var(--sf-primary);
}

.sf-competence-eval {
    flex-shrink: 0;
}

.sf-btn-eval {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.sf-btn-eval-done {
    background: #dcfce7;
    color: #166534;
}

.sf-btn-eval-done:hover {
    background: #22c55e;
    color: #fff;
}

.sf-btn-eval-todo {
    background: #fff;
    color: var(--sf-primary);
    border: 1px solid var(--sf-primary);
}

.sf-btn-eval-todo:hover {
    background: var(--sf-primary);
    color: #fff;
}

/* Ancien style - Bloc */
.sf-dashboard-bloc {
    background: #fff;
    border-radius: var(--sf-radius-lg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
}

.sf-dashboard-bloc-header {
    background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-primary-dark) 100%);
    color: #fff;
    padding: 20px;
    position: relative;
}

.sf-bloc-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.sf-bloc-info h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.sf-bloc-info .sf-bloc-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
}

.sf-bloc-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
}

.sf-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    opacity: 0.9;
}

.sf-stat-icon {
    font-size: 1rem;
}

.sf-bloc-progress {
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    overflow: hidden;
}

.sf-progress-bar {
    height: 100%;
    background: #22c55e;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Activite */
.sf-dashboard-activite {
    border-bottom: 1px solid var(--sf-border);
}

.sf-dashboard-activite:last-child {
    border-bottom: none;
}

.sf-dashboard-activite-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: var(--sf-light);
    border-bottom: 1px solid var(--sf-border);
}

.sf-dashboard-activite-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sf-text);
}

.sf-dashboard-activite-content {
    padding: 15px 20px;
}

/* Sections */
.sf-dashboard-section {
    margin-bottom: 20px;
}

.sf-dashboard-section:last-child {
    margin-bottom: 0;
}

.sf-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--sf-text);
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.sf-section-icon {
    font-size: 1.1rem;
}

/* Grille de competences */
.sf-competences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.sf-competence-card {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
    transition: all 0.2s;
}

.sf-competence-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.sf-competence-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--sf-light);
    border-bottom: 1px solid var(--sf-border);
}

.sf-competence-card-header .sf-competence-code {
    font-weight: 700;
    color: var(--sf-primary);
    font-size: 0.9rem;
}

.sf-competence-status-icons {
    display: flex;
    gap: 6px;
}

.sf-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
}

.sf-status-formation {
    background: #dbeafe;
}

.sf-status-pratique {
    background: #fef3c7;
}

.sf-status-eval {
    background: #dcfce7;
    font-weight: 700;
    color: #166534;
}

.sf-competence-card-body {
    padding: 12px;
}

.sf-competence-card-body .sf-competence-titre {
    font-size: 0.9rem;
    color: var(--sf-text);
    margin-bottom: 10px;
    line-height: 1.4;
}

.sf-competence-actions {
    margin-bottom: 10px;
}

.sf-btn-outline {
    background: transparent;
    border: 1px solid var(--sf-border);
    color: var(--sf-text);
}

.sf-btn-outline:hover {
    background: var(--sf-light);
    border-color: var(--sf-primary);
    color: var(--sf-primary);
}

.sf-btn-success {
    background: #22c55e;
    color: #fff;
    border: none;
}

.sf-btn-success:hover {
    background: #16a34a;
}

/* Fiches revision mini */
.sf-competence-revisions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--sf-border);
}

.sf-revision-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.sf-rev-icon {
    font-size: 1rem;
}

.sf-rev-titre {
    flex: 1;
    font-size: 0.85rem;
    color: var(--sf-text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-btn-play-revision {
    background: var(--sf-primary);
    color: #fff;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
}

.sf-btn-play-revision:hover {
    background: var(--sf-primary-dark);
}

/* Supports mini dans competence */
.sf-competence-supports {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.sf-support-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--sf-light);
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.sf-support-mini:hover {
    background: var(--sf-primary);
    color: #fff;
}

/* Grille supports */
.sf-supports-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sf-support-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--sf-light);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    text-decoration: none;
    color: var(--sf-text);
    transition: all 0.2s;
}

.sf-support-card:hover {
    background: var(--sf-primary);
    color: #fff;
    border-color: var(--sf-primary);
}

.sf-support-icon {
    font-size: 1.1rem;
}

.sf-support-titre {
    font-size: 0.85rem;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-support-favori {
    margin-left: auto;
}

/* Modal loading spinner */
.sf-loading-spinner {
    text-align: center;
    padding: 40px 20px;
    color: var(--sf-text-light);
}

/* Context banner in event modal */
.sf-event-context-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--sf-border);
}

.sf-context-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.sf-context-tag.sf-tag-bloc {
    background: #8b5cf6;
    color: #fff;
}

.sf-context-tag.sf-tag-activite {
    background: #dba617;
    color: #fff;
}

/* Revision content - additonal styles for modal */
.sf-revision-contenu {
    margin: 20px 0;
    padding: 15px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
}

.sf-revision-contenu h4 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: var(--sf-text);
}

.sf-contenu-text {
    font-size: 0.9rem;
    color: var(--sf-text-light);
    line-height: 1.6;
}

/* Responsive for detail modals */
@media (max-width: 768px) {
    .sf-modal-medium {
        max-width: 100%;
        margin: 10px;
    }

    .sf-activite-info-grid {
        grid-template-columns: 1fr;
    }

    .sf-competence-item {
        flex-wrap: wrap;
    }

    .sf-comp-niveau {
        width: 100%;
        margin-top: 5px;
    }
}

/* =============================================================================
   ACTIONS EVENEMENT CANDIDAT
   ============================================================================= */

.sf-event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
    padding: 15px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: var(--sf-radius);
    border: 1px dashed var(--sf-primary);
}

.sf-event-actions .sf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sf-event-actions .sf-btn-icon {
    font-size: 1.1rem;
}

/* Bandeau contexte evenement dans formulaire activite */
.sf-activite-event-context {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid var(--sf-primary);
    border-radius: var(--sf-radius);
    padding: 15px;
    margin-bottom: 20px;
}

.sf-activite-event-context .sf-context-header {
    font-weight: 600;
    color: var(--sf-primary);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.sf-activite-event-context .sf-context-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sf-activite-event-context .sf-tag-event {
    background: var(--sf-primary);
    color: #fff;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* =============================================================================
   INTERFACES TUTEUR / MANAGER / RH
   ============================================================================= */

/* Dashboard tuteur/manager/rh */
.sf-tuteur-dashboard,
.sf-manager-dashboard,
.sf-rh-dashboard {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Headers specifiques */
.sf-tuteur-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.sf-manager-header {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.sf-rh-header {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Stats grid RH */
.sf-rh-stats-grid,
.sf-manager-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.sf-stat-card.sf-stat-primary .sf-stat-value { color: var(--sf-primary); }
.sf-stat-card.sf-stat-success .sf-stat-value { color: var(--sf-success); }
.sf-stat-card.sf-stat-info .sf-stat-value { color: var(--sf-info); }
.sf-stat-card.sf-stat-warning .sf-stat-value { color: var(--sf-warning); }

.sf-stat-card .sf-stat-icon {
    font-size: 32px;
    margin-right: 15px;
}

.sf-stat-card .sf-stat-content {
    display: flex;
    flex-direction: column;
}

.sf-stat-card {
    display: flex;
    align-items: center;
}

/* Grilles candidats tuteur */
.sf-candidats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.sf-candidat-card {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    box-shadow: var(--sf-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}

.sf-candidat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sf-candidat-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.sf-candidat-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--sf-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    margin-right: 15px;
}

.sf-candidat-info h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
}

.sf-candidat-card-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    padding: 10px 0;
    border-top: 1px solid var(--sf-light);
    border-bottom: 1px solid var(--sf-light);
}

.sf-mini-stat {
    text-align: center;
    flex: 1;
}

.sf-mini-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--sf-primary);
}

.sf-mini-stat-label {
    font-size: 11px;
    color: var(--sf-text-light);
    text-transform: uppercase;
}

.sf-candidat-card-actions {
    display: flex;
    gap: 10px;
}

/* Tuteurs grid */
.sf-tuteurs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.sf-tuteur-card {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.sf-tuteur-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.sf-tuteur-info {
    flex: 1;
}

.sf-tuteur-info h4 {
    margin: 0 0 3px 0;
    font-size: 14px;
}

.sf-tuteur-stats {
    font-size: 12px;
    color: var(--sf-text-light);
}

/* Tables */
.sf-candidats-table-container {
    overflow-x: auto;
}

.sf-candidats-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--sf-radius);
    overflow: hidden;
    box-shadow: var(--sf-shadow);
}

.sf-candidats-table th,
.sf-candidats-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--sf-light);
}

.sf-candidats-table th {
    background: var(--sf-light);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--sf-text-light);
}

.sf-candidats-table.sf-table-striped tbody tr:nth-child(even) {
    background: #fafafa;
}

.sf-candidats-table tbody tr:hover {
    background: #f0f6ff;
}

.sf-candidat-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sf-mini-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sf-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
}

.sf-progress-mini {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-progress-bar-mini {
    height: 8px;
    background: var(--sf-success);
    border-radius: 4px;
    min-width: 50px;
}

.sf-progress-text-mini {
    font-size: 12px;
    font-weight: 600;
    color: var(--sf-text-light);
}

.sf-table-info {
    text-align: center;
    color: var(--sf-text-light);
    font-size: 13px;
    margin-top: 15px;
}

/* Challenges */
.sf-challenges-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.sf-challenge-card {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    box-shadow: var(--sf-shadow);
}

.sf-challenge-card.sf-statut-en_cours {
    border-left: 4px solid var(--sf-warning);
}

.sf-challenge-card.sf-statut-terminee {
    border-left: 4px solid var(--sf-success);
}

.sf-challenge-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sf-challenge-type {
    font-size: 13px;
    color: var(--sf-text-light);
}

.sf-challenge-statut {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.sf-challenge-statut.sf-statut-en_attente {
    background: #e0e7ff;
    color: #4338ca;
}

.sf-challenge-statut.sf-statut-en_cours {
    background: #fef3c7;
    color: #92400e;
}

.sf-challenge-statut.sf-statut-terminee {
    background: #d1fae5;
    color: #065f46;
}

.sf-challenge-titre {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.sf-challenge-description,
.sf-challenge-participants,
.sf-challenge-echeance {
    font-size: 13px;
    color: var(--sf-text-light);
    margin: 5px 0;
}

.sf-challenge-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--sf-light);
}

/* Messages */
.sf-messages-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sf-message-item {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 15px;
}

.sf-message-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.sf-message-type {
    font-weight: 500;
}

.sf-message-date {
    font-size: 12px;
    color: var(--sf-text-light);
}

.sf-message-lu {
    font-size: 12px;
    color: var(--sf-success);
}

.sf-message-destinataire {
    font-size: 13px;
    margin: 0 0 8px 0;
}

.sf-message-contenu {
    margin: 0;
    color: var(--sf-text);
}

.sf-message-templates {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--sf-light);
}

.sf-template-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.sf-template-btn {
    background: var(--sf-light) !important;
    color: var(--sf-text) !important;
}

/* Rapports */
.sf-rapports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.sf-rapport-card {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    min-height: 200px;
}

.sf-rapport-card h4 {
    margin: 0 0 15px 0;
    color: var(--sf-text-light);
    font-size: 14px;
    text-transform: uppercase;
}

.sf-rapports-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.sf-rapport-stat {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    text-align: center;
}

.sf-rapport-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--sf-primary);
    display: block;
}

.sf-rapport-stat-label {
    font-size: 12px;
    color: var(--sf-text-light);
    text-transform: uppercase;
}

/* Classement */
.sf-classement-section h3 {
    margin-bottom: 15px;
}

.sf-classement-list {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    overflow: hidden;
}

.sf-classement-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--sf-light);
    gap: 15px;
}

.sf-classement-item:last-child {
    border-bottom: none;
}

.sf-classement-rank {
    width: 30px;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
}

.sf-classement-nom {
    flex: 1;
    font-weight: 500;
}

.sf-classement-progress {
    width: 150px;
    height: 8px;
    background: var(--sf-light);
    border-radius: 4px;
    overflow: hidden;
}

.sf-classement-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--sf-success) 0%, #10b981 100%);
    border-radius: 4px;
}

.sf-classement-pct {
    width: 50px;
    text-align: right;
    font-weight: 600;
    color: var(--sf-text-light);
}

/* Exports */
.sf-exports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.sf-export-card {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 25px;
    text-align: center;
}

.sf-export-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.sf-export-card h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.sf-export-card p {
    color: var(--sf-text-light);
    font-size: 14px;
    margin: 0 0 20px 0;
}

.sf-export-options {
    margin-bottom: 15px;
}

/* Formations stats */
.sf-formations-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.sf-formation-stat-card {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
}

.sf-formation-stat-card h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
}

.sf-formation-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 15px;
}

.sf-formation-stat {
    text-align: center;
}

/* Progress large */
.sf-progress-large {
    height: 12px;
    background: var(--sf-light);
    border-radius: 6px;
    overflow: hidden;
}

.sf-progress-bar-large {
    height: 100%;
    background: linear-gradient(90deg, var(--sf-success) 0%, #10b981 100%);
    border-radius: 6px;
    transition: width 0.3s;
}

.sf-progress-label {
    text-align: center;
    font-size: 13px;
    color: var(--sf-text-light);
    margin-top: 8px;
}

/* Role badges */
.sf-role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.sf-role-tuteur {
    background: #d1fae5;
    color: #065f46;
}

.sf-role-manager {
    background: #ede9fe;
    color: #5b21b6;
}

/* Niveaux chart */
.sf-niveaux-chart {
    padding: 15px 0;
}

.sf-niveau-bar-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.sf-niveau-label {
    width: 80px;
    font-size: 13px;
    font-weight: 500;
}

.sf-niveau-bar-container {
    flex: 1;
    height: 20px;
    background: var(--sf-light);
    border-radius: 10px;
    overflow: hidden;
}

.sf-niveau-bar {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s;
}

.sf-niveau-count {
    width: 80px;
    text-align: right;
    font-size: 13px;
    color: var(--sf-text-light);
}

/* Activity chart */
.sf-activity-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 150px;
    padding: 15px 0;
}

.sf-activity-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.sf-activity-bar {
    width: 100%;
    max-width: 30px;
    background: linear-gradient(180deg, var(--sf-primary) 0%, #60a5fa 100%);
    border-radius: 4px 4px 0 0;
    margin-top: auto;
    min-height: 4px;
}

.sf-activity-label {
    font-size: 10px;
    color: var(--sf-text-light);
    margin-top: 5px;
    transform: rotate(-45deg);
    white-space: nowrap;
}

/* Notifications */
.sf-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: var(--sf-radius);
    color: #fff;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.sf-notification-show {
    opacity: 1;
    transform: translateY(0);
}

.sf-notification-success {
    background: var(--sf-success);
}

.sf-notification-error {
    background: var(--sf-danger);
}

.sf-notification-info {
    background: var(--sf-primary);
}

/* Checkbox group */
.sf-checkbox-group {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 10px;
    margin-bottom: 10px;
}

.sf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    cursor: pointer;
}

.sf-checkbox-label:hover {
    background: var(--sf-light);
}

/* Stats section */
.sf-stats-section {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.sf-stats-section h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--sf-text);
}

/* Section header */
.sf-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.sf-section-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sf-input-search {
    min-width: 200px;
}

.sf-select-filter {
    min-width: 180px;
}

/* Detail sections */
.sf-detail-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sf-light);
}

.sf-detail-section:last-child {
    border-bottom: none;
}

.sf-detail-section h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--sf-text);
}

.sf-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.sf-detail-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.sf-detail-grid p {
    margin: 0;
    font-size: 14px;
}

/* Mini table */
.sf-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sf-mini-table th,
.sf-mini-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--sf-light);
}

.sf-mini-table th {
    background: var(--sf-light);
    font-weight: 600;
}

.sf-more-info {
    text-align: center;
    color: var(--sf-text-light);
    font-size: 12px;
    margin-top: 10px;
}

/* Observations mini */
.sf-observations-mini {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sf-obs-mini-item {
    padding: 12px;
    background: var(--sf-light);
    border-radius: var(--sf-radius);
}

.sf-obs-mini-date {
    font-size: 12px;
    color: var(--sf-text-light);
    margin-right: 10px;
}

.sf-obs-mini-auteur {
    font-size: 12px;
    font-weight: 500;
    color: var(--sf-primary);
}

.sf-obs-mini-item p {
    margin: 8px 0 0 0;
    font-size: 13px;
}

/* Detail actions */
.sf-detail-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--sf-border);
    text-align: center;
}

/* Tuteurs/Candidats sections */
.sf-tuteurs-section,
.sf-candidats-section {
    margin-bottom: 30px;
}

.sf-tuteurs-section h3,
.sf-candidats-section h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--sf-light);
}

/* Button sizes */
.sf-btn-xs {
    padding: 4px 10px !important;
    font-size: 12px !important;
}

.sf-btn-success {
    background: var(--sf-success) !important;
    color: #fff !important;
}

.sf-btn-danger {
    background: var(--sf-danger) !important;
    color: #fff !important;
}

/* =============================================================================
   MANAGER - ONGLET EVALUATIONS COMPLET
   ============================================================================= */

/* Stats Cards Grid */
.sf-eval-stats-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.sf-eval-stat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.sf-eval-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.sf-eval-stat-icon {
    font-size: 32px;
    line-height: 1;
}

.sf-eval-stat-content {
    flex: 1;
}

.sf-eval-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

.sf-eval-stat-label {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
}

.sf-eval-stat-sub {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.sf-eval-stat-bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.sf-eval-stat-bar > div {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.sf-eval-stat-tuteur {
    border-left: 4px solid #3b82f6;
}

.sf-eval-stat-auto {
    border-left: 4px solid #22c55e;
}

.sf-eval-stat-moyenne {
    border-left: 4px solid #f59e0b;
}

.sf-eval-stat-total {
    border-left: 4px solid #8b5cf6;
}

/* Toggle View Buttons */
.sf-eval-view-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.sf-toggle-group {
    display: flex;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 4px;
}

.sf-toggle-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s;
}

.sf-toggle-btn:hover {
    color: #374151;
}

.sf-toggle-btn.active {
    background: #fff;
    color: #1f2937;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Graph Section */
.sf-eval-graph-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.sf-eval-graph-section h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: #374151;
}

.sf-eval-graph-container {
    min-height: 200px;
}

/* Simple Chart CSS */
.sf-eval-simple-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 180px;
    padding: 20px 0;
    border-bottom: 2px solid #e5e7eb;
}

.sf-chart-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 80px;
}

.sf-chart-bars {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 120px;
}

.sf-chart-bar {
    width: 20px;
    min-height: 4px;
    border-radius: 4px 4px 0 0;
    transition: height 0.3s;
}

.sf-chart-bar-tuteur {
    background: #3b82f6;
}

.sf-chart-bar-auto {
    background: #22c55e;
}

.sf-chart-label {
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
}

.sf-chart-moyenne {
    font-size: 11px;
    color: #f59e0b;
    font-weight: 600;
    margin-top: 4px;
}

.sf-chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

.sf-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}

.sf-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* View Panels */
.sf-eval-view-panel {
    display: none;
}

.sf-eval-view-panel.active {
    display: block;
}

/* Timeline Chrono */
.sf-eval-timeline {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sf-eval-month-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sf-eval-month-header {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    padding: 8px 12px;
    background: #f3f4f6;
    border-radius: 6px;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Eval Cards */
.sf-eval-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    position: relative;
    transition: box-shadow 0.2s;
}

.sf-eval-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.sf-eval-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    background: #dbeafe;
    color: #1e40af;
    font-weight: 500;
}

.sf-eval-card-badge-auto {
    background: #dcfce7;
    color: #166534;
}

.sf-eval-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-right: 80px;
}

.sf-eval-card-candidat {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.sf-eval-card-date {
    font-size: 12px;
    color: #9ca3af;
}

.sf-eval-card-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sf-eval-card-note {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.sf-eval-card-details {
    flex: 1;
}

.sf-eval-card-evaluateur,
.sf-eval-card-niveau {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}

.sf-eval-card-cible,
.sf-eval-card-fiche,
.sf-eval-card-activite,
.sf-eval-card-bloc {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.sf-eval-card-comment {
    font-size: 13px;
    color: #374151;
    margin-top: 8px;
    padding: 8px;
    background: #f9fafb;
    border-radius: 6px;
    line-height: 1.5;
}

/* Vue par Bloc */
.sf-eval-blocs-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sf-eval-bloc-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.sf-eval-bloc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #f8fafc;
    cursor: pointer;
    transition: background 0.2s;
}

.sf-eval-bloc-header:hover {
    background: #f1f5f9;
}

.sf-eval-bloc-icon {
    font-size: 20px;
}

.sf-eval-bloc-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.sf-eval-bloc-counts {
    display: flex;
    gap: 8px;
}

.sf-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.sf-badge-auto {
    background: #dcfce7;
    color: #166534;
}

.sf-badge-tuteur {
    background: #dbeafe;
    color: #1e40af;
}

.sf-badge-count {
    background: #f3f4f6;
    color: #6b7280;
}

.sf-eval-bloc-toggle {
    color: #9ca3af;
    font-size: 12px;
}

.sf-eval-bloc-content {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
}

.sf-eval-bloc-tuteur-section {
    margin-bottom: 20px;
}

.sf-eval-bloc-tuteur-section h5 {
    font-size: 14px;
    color: #374151;
    margin: 0 0 12px 0;
}

.sf-eval-activite-section {
    margin-bottom: 16px;
    padding-left: 16px;
    border-left: 3px solid #e5e7eb;
}

.sf-eval-activite-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.sf-eval-activite-icon {
    font-size: 16px;
}

.sf-eval-activite-title {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.sf-eval-fiches-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

/* Responsive */
@media (max-width: 1024px) {
    .sf-eval-stats-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sf-eval-stats-cards {
        grid-template-columns: 1fr;
    }

    .sf-eval-view-toggle {
        flex-direction: column;
        align-items: stretch;
    }

    .sf-toggle-group {
        width: 100%;
        justify-content: center;
    }

    .sf-eval-card-header {
        flex-direction: column;
        gap: 4px;
        padding-right: 0;
    }

    .sf-eval-card-badge {
        position: static;
        display: inline-block;
        margin-bottom: 8px;
    }

    .sf-eval-fiches-list {
        grid-template-columns: 1fr;
    }
}

/* Responsive general */
@media (max-width: 768px) {
    .sf-rh-stats-grid,
    .sf-manager-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .sf-candidats-grid,
    .sf-challenges-list,
    .sf-exports-grid {
        grid-template-columns: 1fr;
    }

    .sf-section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .sf-detail-grid-3 {
        grid-template-columns: 1fr;
    }

    .sf-classement-progress {
        display: none;
    }
}

/* ================================================
   GRAPHIQUES RADAR MANAGER
   ================================================ */

/* Section Radar */
.sf-eval-radar-section {
    margin: 25px 0;
    padding: 25px;
    background: #ffffff;
    border: 1px solid var(--sf-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.sf-radar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* Carte Radar */
.sf-radar-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    overflow: hidden;
}

.sf-radar-card-soft {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fcd34d;
}

.sf-radar-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.sf-radar-card-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.sf-radar-info {
    font-size: 12px;
    color: #64748b;
    font-style: italic;
}

.sf-radar-card-soft .sf-radar-info {
    color: #92400e;
}

/* Container du graphique */
.sf-radar-chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.sf-radar-chart-container svg {
    max-width: 100%;
    height: auto;
}

/* Empty state radar */
.sf-empty-radar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.sf-empty-radar .sf-empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.sf-empty-radar p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

/* Légende Soft Skills */
.sf-soft-skills-legend {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

/* Légende Radar (générique Hard/Soft Skills) */
.sf-radar-legend {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,0,0,0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sf-radar-legend .sf-legend-item {
    font-size: 11px;
    color: #64748b;
    padding: 4px 8px;
    background: #f8fafc;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.sf-radar-legend .sf-legend-item:hover {
    background: #e2e8f0;
}

#sf-hard-skills-legend {
    margin-top: 15px;
}

/* Légende avec numéros et texte complet */
.sf-radar-legend-list {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sf-legend-item-full {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: #334155;
    line-height: 1.4;
}

.sf-legend-number {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3b82f6;
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    border-radius: 50%;
}

.sf-legend-text {
    flex: 1;
    padding-top: 2px;
}

/* Filtre désactivé */
#sf-hard-skills-view-filter:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f1f5f9;
}

/* Graphique Evolution dans le temps */
.sf-evolution-svg {
    width: 100%;
    height: auto;
    min-height: 300px;
}

.sf-evolution-svg .sf-chart-point {
    cursor: pointer;
    transition: r 0.2s ease;
}

.sf-evolution-svg .sf-chart-point:hover {
    r: 8;
}

#sf-evolution-chart {
    background: #fafbfc;
    border-radius: 8px;
    padding: 15px;
    min-height: 350px;
}

.sf-legend-title {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 15px 0;
}

.sf-soft-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.sf-skill-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
}

.sf-skill-label {
    flex: 1;
    font-size: 12px;
    color: #374151;
    font-weight: 500;
}

.sf-skill-bar-wrap {
    width: 50px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.sf-skill-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.sf-skill-note {
    font-weight: 700;
    font-size: 13px;
    min-width: 30px;
    text-align: right;
}

/* Responsive Radar */
@media (max-width: 1200px) {
    .sf-radar-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sf-eval-radar-section {
        padding: 15px;
    }

    .sf-radar-card {
        padding: 15px;
    }

    .sf-radar-chart-container {
        min-height: 250px;
    }

    .sf-soft-skills-grid {
        grid-template-columns: 1fr;
    }

    .sf-radar-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* =============================================================================
   AFFECTATIONS - Interface RH
   ============================================================================= */

/* Groupe d'affectations par candidat */
.sf-affectation-group {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    margin-bottom: 15px;
    overflow: hidden;
}

.sf-affectation-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: var(--sf-light);
    border-bottom: 1px solid var(--sf-border);
}

.sf-affectation-group-header strong {
    flex: 1;
    font-size: 15px;
}

.sf-affectation-count {
    font-size: 12px;
    color: var(--sf-text-light);
    background: #fff;
    padding: 3px 10px;
    border-radius: 12px;
}

.sf-affectation-group-body {
    padding: 10px;
}

/* Item d'affectation individuel */
.sf-affectation-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 5px;
    background: #fafafa;
    flex-wrap: wrap;
}

.sf-affectation-item:last-child {
    margin-bottom: 0;
}

.sf-affectation-item:hover {
    background: #f0f0f0;
}

.sf-affectation-responsable {
    flex: 1;
    font-weight: 500;
    min-width: 150px;
}

.sf-affectation-groupe {
    color: var(--sf-text-light);
    font-size: 13px;
    min-width: 120px;
}

.sf-affectation-date {
    color: var(--sf-text-light);
    font-size: 12px;
    min-width: 130px;
}

.sf-affectation-actions {
    display: flex;
    gap: 8px;
}

/* Help text */
.sf-help-text {
    margin: 10px 0;
    color: #666;
    font-size: 13px;
}

/* Section actions header amelioree */
.sf-section-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sf-section-actions .sf-input-search {
    width: 250px;
}

.sf-section-actions .sf-select-filter {
    min-width: 150px;
}

/* Responsive affectations */
@media (max-width: 768px) {
    .sf-affectation-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .sf-affectation-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .sf-section-actions {
        flex-direction: column;
        width: 100%;
    }

    .sf-section-actions .sf-input-search,
    .sf-section-actions .sf-select-filter {
        width: 100%;
    }
}

/* =============================================================================
   ENTREPRISES
   ============================================================================= */
.sf-entreprises-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.sf-entreprise-card {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 20px;
    box-shadow: var(--sf-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}

.sf-entreprise-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.sf-entreprise-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--sf-border);
}

.sf-entreprise-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--sf-text);
}

.sf-entreprise-secteur {
    background: var(--sf-info-light);
    color: var(--sf-primary);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.sf-entreprise-info {
    margin-bottom: 15px;
}

.sf-entreprise-info p {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: var(--sf-text-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-entreprise-info .sf-icon {
    font-size: 14px;
}

.sf-entreprise-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    padding: 12px;
    background: var(--sf-light);
    border-radius: 8px;
}

.sf-mini-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.sf-mini-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--sf-primary);
}

.sf-mini-stat-label {
    font-size: 10px;
    color: var(--sf-text-light);
    text-transform: uppercase;
}

.sf-entreprise-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Detail entreprise modal */
.sf-entreprise-detail {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sf-detail-section {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sf-border);
}

.sf-detail-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sf-detail-section h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--sf-primary);
}

.sf-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.sf-detail-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sf-detail-label {
    font-size: 11px;
    color: var(--sf-text-light);
    text-transform: uppercase;
    font-weight: 600;
}

.sf-detail-value {
    font-size: 14px;
    color: var(--sf-text);
}

.sf-mini-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-mini-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--sf-light);
    border-radius: 6px;
}

.sf-mini-name {
    font-weight: 500;
    color: var(--sf-text);
}

.sf-mini-info {
    font-size: 12px;
    color: var(--sf-text-light);
}

.sf-empty-text {
    color: var(--sf-text-light);
    font-style: italic;
    margin: 0;
    padding: 10px 0;
}

.sf-notes-text {
    background: var(--sf-light);
    padding: 12px 15px;
    border-radius: 6px;
    margin: 0;
    font-size: 13px;
    white-space: pre-wrap;
}

/* Responsive entreprises */
@media (max-width: 768px) {
    .sf-entreprises-grid {
        grid-template-columns: 1fr;
    }

    .sf-entreprise-stats {
        flex-wrap: wrap;
    }

    .sf-mini-stat {
        min-width: calc(50% - 10px);
    }

    .sf-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   ONGLET PERSONNES - TABLEAU SIMPLE
   ============================================================================= */

/* Table responsive */
.sf-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table personnes */
.sf-table-personnes {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sf-table-personnes thead {
    background: #f8f9fa;
}

.sf-table-personnes th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #6b7280;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.sf-table-personnes td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.sf-table-personnes tbody tr:hover {
    background: #f9fafb;
}

.sf-table-personnes td:last-child {
    white-space: nowrap;
}

/* Bouton extra small */
.sf-btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 11px;
    border-radius: 4px;
}

/* Avatars couleurs par role */
.sf-avatar-tuteur {
    background: #d1fae5 !important;
    color: #065f46 !important;
}

.sf-avatar-manager {
    background: #ede9fe !important;
    color: #5b21b6 !important;
}

.sf-avatar-formateur {
    background: #dbeafe !important;
    color: #1e40af !important;
}

.sf-avatar-rh {
    background: #fef3c7 !important;
    color: #92400e !important;
}

/* Equipe grid pour candidat (sa propre vue) */
.sf-equipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.sf-equipe-grid .sf-card {
    margin-bottom: 0;
    padding: 0;
}

.sf-equipe-grid .sf-card-header {
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
}

.sf-equipe-grid .sf-card-header h3 {
    font-size: 12px;
    margin: 0;
}

.sf-equipe-grid .sf-card-body {
    padding: 0.75rem;
}

.sf-equipe-grid .sf-person-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sf-equipe-grid .sf-person-avatar {
    width: 32px;
    height: 32px;
    font-size: 11px;
}

.sf-equipe-grid .sf-person-info strong {
    font-size: 13px;
    display: block;
}

.sf-equipe-grid .sf-person-role {
    font-size: 10px;
    color: var(--sf-text-light);
}

.sf-equipe-grid .sf-person-email {
    display: none;
}

.sf-equipe-grid .sf-empty-state-sm {
    padding: 0.5rem;
}

.sf-equipe-grid .sf-empty-state-sm p {
    font-size: 11px;
    margin: 0;
    color: #9ca3af;
}

/* Liste mini candidats (vue candidat de son groupe) */
.sf-candidats-mini-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sf-candidat-mini {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: #f8f9fa;
    border-radius: 20px;
    font-size: 12px;
}

.sf-candidat-avatar-mini {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sf-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    margin-right: 6px;
}

.sf-candidat-moi {
    background: #d1fae5;
    border: 1px solid #10b981;
}

.sf-candidat-moi em {
    color: #059669;
    font-style: normal;
    font-size: 10px;
    margin-left: 4px;
}

/* Groupe formateur info */
.sf-groupe-formateur {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: #eff6ff;
    border-radius: 6px;
    font-size: 12px;
    color: #1e40af;
}

/* Badge formateur dans header groupe */
.sf-groupe-formateur-badge {
    display: inline-block;
    margin-left: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: #dbeafe;
    border-radius: 4px;
    font-size: 11px;
    color: #1e40af;
    font-weight: normal;
}

/* Accordion groupes - tableau dans content */
.sf-groupe-accordion-content .sf-table-responsive {
    margin: 0;
}

.sf-groupe-accordion-content .sf-table-personnes {
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .sf-equipe-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sf-table-personnes th,
    .sf-table-personnes td {
        padding: 0.5rem;
        font-size: 12px;
    }
}