/**
 * Suivi Formation - Référentiel
 * Styles pour l'affichage front-end
 */

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

/* =============================================================================
   BASE
   ============================================================================= */
.sf-error {
    background: #fcf0f0;
    border-left: 4px solid var(--sf-danger);
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: var(--sf-radius);
}

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

/* =============================================================================
   FICHE COMPÉTENCE
   ============================================================================= */
.sf-fiche {
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    margin: 20px 0;
    overflow: hidden;
}

/* Header */
.sf-fiche-header {
    background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-primary-dark) 100%);
    color: #fff;
    padding: 20px 24px;
}

.sf-breadcrumb {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.sf-breadcrumb-item {
    display: inline;
}

.sf-breadcrumb-sep {
    margin: 0 6px;
    opacity: 0.7;
}

.sf-breadcrumb-current {
    font-weight: 600;
}

.sf-fiche-title {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 8px 0;
    opacity: 0.9;
    font-family: monospace;
}

.sf-fiche-competence {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

/* Sections */
.sf-fiche-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--sf-border);
}

.sf-fiche-section:last-child {
    border-bottom: none;
}

.sf-fiche-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--sf-primary);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sf-primary);
}

/* Finalité */
.sf-finalite p {
    margin: 0;
    color: var(--sf-secondary);
    line-height: 1.6;
}

/* Capacités */
.sf-capacite {
    background: var(--sf-light);
    border-radius: var(--sf-radius);
    margin-bottom: 16px;
    overflow: hidden;
}

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

.sf-capacite-header {
    background: #fff;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sf-border);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sf-capacite-num {
    background: var(--sf-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.sf-capacite-texte {
    font-weight: 500;
    color: #1d2327;
    line-height: 1.5;
}

/* Observables et Tâches */
.sf-observables,
.sf-taches {
    padding: 16px;
}

.sf-observables h4,
.sf-taches h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

.sf-observables ul,
.sf-taches ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sf-observables li,
.sf-taches li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 4px;
    margin-bottom: 8px;
    border: 1px solid var(--sf-border);
}

.sf-observables li:last-child,
.sf-taches li:last-child {
    margin-bottom: 0;
}

.sf-item-num {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}

.sf-observables .sf-item-num {
    background: #e6f0f7;
    color: var(--sf-primary);
}

.sf-taches .sf-item-num {
    background: #e8f5e9;
    color: var(--sf-success);
}

.sf-item-texte {
    color: #1d2327;
    line-height: 1.5;
    flex: 1;
}

/* Missions pédagogiques */
.sf-missions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.sf-mission {
    background: var(--sf-light);
    border-radius: var(--sf-radius);
    padding: 16px;
    border-left: 4px solid;
}

.sf-mission-n1 {
    border-color: #93c5fd;
    background: #eff6ff;
}

.sf-mission-n2 {
    border-color: #fcd34d;
    background: #fffbeb;
}

.sf-mission-n3 {
    border-color: #86efac;
    background: #f0fdf4;
}

.sf-mission-level {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.sf-mission-n1 .sf-mission-level { color: #2563eb; }
.sf-mission-n2 .sf-mission-level { color: #d97706; }
.sf-mission-n3 .sf-mission-level { color: #16a34a; }

.sf-mission-label {
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    margin-bottom: 8px;
}

.sf-mission p {
    margin: 0;
    font-size: 14px;
    color: var(--sf-secondary);
    line-height: 1.5;
}

/* =============================================================================
   RÉFÉRENTIEL COMPLET
   ============================================================================= */
.sf-referentiel-complet {
    max-width: 1200px;
    margin: 0 auto;
}

.sf-referentiel-header {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-primary-dark) 100%);
    color: #fff;
    border-radius: var(--sf-radius);
    margin-bottom: 30px;
}

.sf-referentiel-header h1 {
    margin: 0 0 8px 0;
    font-size: 28px;
}

.sf-code {
    font-family: monospace;
    font-size: 16px;
    opacity: 0.9;
    margin: 0;
}

/* Navigation rapide */
.sf-nav-rapide {
    background: var(--sf-light);
    border-radius: var(--sf-radius);
    padding: 20px 24px;
    margin-bottom: 30px;
}

.sf-nav-rapide h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sf-secondary);
}

.sf-nav-rapide ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sf-nav-rapide a {
    display: inline-block;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--sf-border);
    border-radius: 4px;
    color: var(--sf-primary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}

.sf-nav-rapide a:hover {
    background: var(--sf-primary);
    color: #fff;
    border-color: var(--sf-primary);
}

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

.sf-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-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-duree {
    background: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--sf-secondary);
    border: 1px solid var(--sf-border);
}

/* Activités */
.sf-activite {
    border-bottom: 1px solid var(--sf-border);
}

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

.sf-activite-header {
    padding: 16px 24px;
    background: #fff;
    border-bottom: 1px solid var(--sf-border);
}

.sf-activite-header h3 {
    margin: 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;
}

/* Liste des fiches */
.sf-fiches-liste {
    padding: 16px 24px;
}

.sf-fiche-resume {
    margin-bottom: 16px;
}

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

.sf-fiche-resume .sf-fiche {
    margin: 0;
}

/* =============================================================================
   TABLE LISTE
   ============================================================================= */
.sf-liste-fiches {
    overflow-x: auto;
}

.sf-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--sf-radius);
    overflow: hidden;
    box-shadow: var(--sf-shadow);
}

.sf-table th,
.sf-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--sf-border);
}

.sf-table th {
    background: var(--sf-light);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sf-secondary);
}

.sf-table td {
    font-size: 14px;
}

.sf-table code {
    background: var(--sf-light);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.sf-table tr:hover td {
    background: #fafafa;
}

/* Boutons */
.sf-btn {
    display: inline-block;
    padding: 8px 16px;
    background: var(--sf-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
    border: none;
    cursor: pointer;
}

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

.sf-btn-small {
    padding: 4px 10px;
    font-size: 12px;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 768px) {
    .sf-fiche-header,
    .sf-fiche-section {
        padding: 16px;
    }

    .sf-capacite-header {
        flex-direction: column;
        gap: 8px;
    }

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

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

    .sf-bloc-header h2 {
        font-size: 18px;
    }

    .sf-nav-rapide ul {
        flex-direction: column;
    }

    .sf-nav-rapide a {
        display: block;
        text-align: center;
    }
}