:root {
    --primary: #7C3AED;
    --primary-dark: #5B21B6;
    --accent: #A78BFA;
    --bg-dark: #1E1B4B;
    --text: #1F2937;
    --text-muted: #6B7280;
    --border: #E5E7EB;
    --bg: #F9FAFB;
    --success: #10B981;
    --error: #EF4444;
    --warning: #F59E0B;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============ HEADER ============ */
.site-header {
    color: white;
    padding: 12px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
}
.logo:hover { text-decoration: none; }
.logo-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 14px;
}
.logo-text { display: block; font-weight: 600; font-size: 16px; }
.logo-sub { display: block; font-size: 12px; opacity: 0.85; }
.nav-links { list-style: none; display: flex; gap: 6px; align-items: center; }
.nav-links a {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 6px;
}
.nav-links a:hover, .nav-links a.active {
    background: rgba(255,255,255,0.15);
    text-decoration: none;
}
/* Tag utilisateur (Prénom Nom) — affichage desktop par défaut */
.nav-user-tag {
    color: #fff;
    font-size: 13px;
    opacity: 0.85;
    padding: 6px 8px;
    white-space: nowrap;
}

/* ============ BURGER MENU CSS-ONLY (visible uniquement en mobile) ============ */
.nav-toggle { display: none; }
.nav-toggle-label {
    display: none; cursor: pointer; padding: 6px 8px;
    border-radius: 8px; user-select: none;
}
.nav-toggle-label span {
    display: block; width: 22px; height: 2px;
    background: #fff; margin: 5px 0; border-radius: 2px;
    transition: transform .25s, opacity .25s;
}

/* ============ MAIN ============ */
.page-main {
    flex: 1;
    width: 100%;
}
.page-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px;
}

/* ============ HERO ============ */
.hero {
    background: linear-gradient(135deg, #1E1B4B, #5B21B6, #7C3AED);
    color: white;
    padding: 60px 24px;
    text-align: center;
}
.hero h1 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 12px;
}
.hero p {
    font-size: 16px;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 22px;
}
.badge-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

/* ============ CARDS ============ */
.card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.card.elevated {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
h1, h2, h3 { color: var(--primary-dark); font-weight: 700; }
h1 { font-size: 26px; }
h2 { font-size: 20px; margin-bottom: 12px; }
h3 { font-size: 16px; margin-bottom: 8px; }

/* ============ ALERTS ============ */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.alert-success { background: #D1FAE5; color: #065F46; }
.alert-error   { background: #FEE2E2; color: #991B1B; }
.alert-warning { background: #FEF3C7; color: #92400E; }
.alert-info    { background: #DBEAFE; color: #1E40AF; }

/* ============ BUTTONS ============ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
    text-decoration: none;
    justify-content: center;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: white; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg); }
.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: #059669; }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 28px; font-size: 16px; }

/* ============ FORMS ============ */
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    font-size: 14px;
}
.form-control {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 16px;            /* 16px = anti-zoom iOS Safari au focus */
    font-family: inherit;
    transition: border-color 0.15s;
    background: white;
}
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(124,58,237,0.12);
}
.required { color: var(--error); }

/* ============ COURS CARDS ============ */
.cours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    margin-top: 14px;
}
.cours-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.15s;
}
.cours-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: var(--accent);
}
.cours-card .cours-titre {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 6px;
    line-height: 1.3;
}
.cours-card .cours-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
    flex: 1;
}
.cours-card .cours-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.meta-pill {
    background: var(--bg);
    color: var(--text-muted);
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}
.cours-card .cours-status {
    margin-bottom: 14px;
    font-size: 12px;
}
.status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.status-not-started { background: #F3F4F6; color: #6B7280; }
.status-in-progress { background: #FEF3C7; color: #92400E; }
.status-completed   { background: #D1FAE5; color: #065F46; }

/* ============ FOOTER ============ */
.site-footer {
    background: var(--bg-dark);
    color: rgba(255,255,255,0.7);
    padding: 18px 24px;
    margin-top: 40px;
    font-size: 12px;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ============ UTILS ============ */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }

/* Autocomplete dropdown */
.auto-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid var(--primary);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
.auto-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.auto-item:hover { background: rgba(124,58,237,0.06); }
.auto-item:last-child { border-bottom: none; }

/* Player — height: 100dvh est CRITIQUE sur mobile Android.
   Avec 100vh seul, Chrome/Samsung Android utilisent le viewport "max" (sans barre URL),
   donc le shell dépasse de la zone visible et la barre nav du SCORM passe sous la barre URL.
   100dvh ("dynamic viewport height") s'ajuste en temps réel à la zone réellement visible. */
.player-shell {
    background: #000;
    width: 100vw;
    height: 100vh;          /* fallback navigateurs anciens */
    height: 100dvh;         /* override sur navigateurs récents (2022+) */
    display: flex;
    flex-direction: column;
}
.player-bar {
    background: var(--primary-dark);
    color: white;
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.player-bar .player-title { font-weight: 600; }
.player-bar .player-status { opacity: 0.9; }
.player-iframe-wrap {
    flex: 1;
    background: white;
    overflow: hidden;
}
.player-iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Bloc droit de la barre du player (statut + bouton Quitter) */
.player-bar-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-shrink: 0;
}

/* ============================================================
   ============ ADAPTATION MOBILE / TABLETTE ==================
   ============================================================ */

/* Tablettes & mobiles (≤ 768px) */
@media (max-width: 768px) {

    /* HEADER : logo plus compact, nav repliée dans un menu burger */
    .site-header { padding: 10px 12px; }
    .header-inner {
        flex-wrap: wrap; gap: 8px;
        flex-direction: row; align-items: center; justify-content: space-between;
    }
    .logo-icon { width: 36px; height: 36px; font-size: 13px; }
    .logo-text { font-size: 15px; }
    .logo-sub { display: none; }

    /* Burger : afficher le bouton, cacher la nav par defaut */
    .nav-toggle-label { display: inline-flex; flex-direction: column; }
    .site-header nav { flex-basis: 100%; display: none; order: 99; }
    .nav-toggle:checked ~ nav { display: block; }

    /* Nav repliee : items en colonne pleine largeur */
    .nav-links {
        flex-direction: column; gap: 0;
        padding: 6px 0 4px;
        border-top: 1px solid rgba(255,255,255,0.12);
    }
    .nav-links a {
        display: block; padding: 12px 14px;
        border-radius: 8px; font-size: 14px;
    }
    .nav-links span { font-size: 12px !important; }

    /* Tag utilisateur en sous-titre du burger (juste avant Deconnexion) */
    .nav-user { padding: 0; }
    .nav-user-tag {
        display: block;
        padding: 14px 14px 6px;
        font-size: 12px;
        opacity: 0.7;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        border-top: 1px solid rgba(255,255,255,0.12);
        margin-top: 4px;
        white-space: normal;
        word-break: break-word;
    }

    /* Burger anime : 3 traits → croix au check */
    .nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .nav-toggle:checked + .nav-toggle-label span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* MAIN CONTENT */
    .page-content { padding: 16px 12px; }

    /* HERO : compact */
    .hero { padding: 32px 16px; }
    .hero h1 { font-size: 24px; }
    .hero p { font-size: 14px; }
    .badge-tag { font-size: 11px; }

    /* TITRES */
    h1 { font-size: 20px; }
    h2 { font-size: 17px; }

    /* CARDS : padding et radius réduits */
    .card { padding: 16px; border-radius: 10px; margin-bottom: 12px; }

    /* COURS GRID : 1 colonne pleine largeur */
    .cours-grid { grid-template-columns: 1fr; gap: 12px; }
    .cours-card { padding: 16px; }
    .cours-card .cours-titre { font-size: 15px; }
    .cours-card .cours-desc { font-size: 13px; }

    /* BOUTONS : cible tactile elargie (min 44px) */
    .btn { padding: 12px 16px; font-size: 14px; min-height: 44px; }
    .btn-lg { padding: 14px 20px; font-size: 15px; min-height: 48px; }
    .btn:hover { transform: none; box-shadow: none; }

    /* FORMS : labels et inputs plus aeres — toujours 16px pour anti-zoom iOS */
    .form-control { padding: 12px 14px; font-size: 16px; }

    /* FOOTER : empile en colonne */
    .footer-inner { flex-direction: column; gap: 6px; text-align: center; }

    /* ============ PLAYER (le plus critique sur mobile) ============ */
    .player-bar {
        padding: 8px 10px;
        gap: 8px;
        font-size: 12px;
    }
    .player-bar .player-title {
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;          /* indispensable pour permettre le truncate en flex */
    }
    .player-bar-actions {
        gap: 6px;
        flex-shrink: 0;
    }
    .player-bar .player-status {
        font-size: 11px;
        max-width: 110px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .player-bar .btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}

/* Mobiles standards (≤ 600px) — palier intermediaire entre tablette et smartphone etroit */
@media (max-width: 600px) {
    .hero { padding: 32px 14px; }
    .hero h1 { font-size: 22px; }
    .hero p { font-size: 14px; }
    .card { padding: 14px; border-radius: 10px; }
    h1 { font-size: 19px; }
    h2 { font-size: 16px; }
    h3 { font-size: 15px; }
    .alert { padding: 11px 13px; font-size: 13px; }
    .btn { padding: 11px 14px; font-size: 14px; }
    .form-group label { font-size: 13px; }
}

/* Smartphones étroits (≤ 380px) — iPhone SE, Galaxy A0x, etc. */
@media (max-width: 380px) {
    /* Header encore plus compact */
    .nav-links a { font-size: 12px; padding: 4px 7px; }
    .logo-text { font-size: 14px; }

    /* Le statut du player disparaît : on garde juste le bouton Quitter */
    .player-bar .player-status { display: none; }
    .player-bar .player-title { font-size: 12px; }

    /* Hero ultra-compact */
    .hero { padding: 24px 14px; }
    .hero h1 { font-size: 20px; }
}