/**
 * Styles pour les modules additionnels - Caly-Quiz IRVE v2.0
 * Mode Formateur, Gamification, Revision, PWM Simulator, Questions Interactives
 * Habilec Light Theme
 */

/* ============================================
   VARIABLES ADDITIONNELLES
   ============================================ */
:root {
    --quiz-question-size: 1.8rem;
    --quiz-option-size: 1.1rem;
    --slide-base-size: 1em;

    --gold: #ffd700;
    --silver: #c0c0c0;
    --bronze: #cd7f32;
}

/* ============================================
   MODE FORMATEUR - Panneau de controle
   ============================================ */
.trainer-panel {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 320px;
    max-height: 80vh;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    z-index: 10000;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.trainer-panel.hidden {
    transform: translateY(-50%) translateX(400px);
    opacity: 0;
    pointer-events: none;
}

.trainer-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--primary);
    color: white;
}

.trainer-panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.trainer-panel-content {
    padding: 15px;
    max-height: 60vh;
    overflow-y: auto;
}

.trainer-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
}

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

.trainer-section h4 {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.trainer-option {
    margin-bottom: 12px;
}

.trainer-option label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

.trainer-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.btn-group {
    display: flex;
    gap: 5px;
    margin-top: 8px;
}

.btn-group button {
    flex: 1;
    padding: 8px;
    font-size: 0.8rem;
    background: var(--surface);
    border: 1px solid #e5e7eb;
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-group button:hover {
    background: var(--surface-hover);
}

.btn-group button.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.hint-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 5px;
}

/* Bouton flottant formateur */
.trainer-fab {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    z-index: 9999;
    transition: all 0.3s ease;
}

.trainer-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

/* Overlay raccourcis clavier */
.shortcuts-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    transition: opacity 0.3s;
}

.shortcuts-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.shortcuts-content {
    background: var(--surface);
    padding: 30px;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.shortcuts-content h2 {
    text-align: center;
    margin-bottom: 20px;
}

.shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--background);
    border-radius: 8px;
}

.shortcut-item kbd {
    background: #f3f4f6;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.9rem;
    min-width: 40px;
    text-align: center;
    border: 1px solid #d1d5db;
    color: #1f2937;
}

/* Indicateur taille police */
.font-size-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 20px 40px;
    border-radius: 12px;
    font-size: 1.5rem;
    z-index: 20000;
    transition: opacity 0.3s;
}

.font-size-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Toast notifications */
.trainer-toast {
    position: fixed;
    bottom: 150px;
    right: 20px;
    background: var(--surface);
    color: var(--text);
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 20000;
    transform: translateX(200%);
    transition: transform 0.3s ease;
    border: 1px solid #e5e7eb;
}

.trainer-toast.visible {
    transform: translateX(0);
}

/* ============================================
   MODES DE TAILLE DE POLICE (Projection Salle)
   ============================================ */
body.font-large #q-text {
    font-size: 2.4rem !important;
}

body.font-large .option-btn {
    font-size: 1.4rem !important;
    padding: 1.5rem !important;
}

body.font-large .reveal .slides section {
    font-size: 1.2em !important;
}

body.font-xlarge #q-text {
    font-size: 3rem !important;
}

body.font-xlarge .option-btn {
    font-size: 1.7rem !important;
    padding: 2rem !important;
}

body.font-xlarge .reveal .slides section {
    font-size: 1.5em !important;
}

/* ============================================
   MODE DALTONIEN
   ============================================ */
body.colorblind-mode .option-btn.correct {
    background: #1e40af !important;
    border-color: #3b82f6 !important;
}

body.colorblind-mode .option-btn.correct::after {
    content: ' \2713';
}

body.colorblind-mode .option-btn.incorrect {
    background: #78350f !important;
    border-color: #f59e0b !important;
}

body.colorblind-mode .option-btn.incorrect::after {
    content: ' \2717';
}

body.colorblind-mode .tag-pass {
    background: #1e3a8a !important;
    color: #93c5fd !important;
}

body.colorblind-mode .tag-fail {
    background: #78350f !important;
    color: #fcd34d !important;
}

/* ============================================
   GAMIFICATION - Barre XP
   ============================================ */
.xp-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    padding: 0 15px 0 100px;
    gap: 12px;
    z-index: 9998;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
}

/* HIDE XP bar completely in LMS/Course presentation mode & simulateurs */
#lms-screen.active ~ .xp-bar-container,
body.lms-active .xp-bar-container,
.reveal-viewport .xp-bar-container,
body:has(#lms-screen.active) .xp-bar-container,
body:has(#pwm-simulator-screen:not(.hidden)) .xp-bar-container {
    display: none !important;
    visibility: hidden !important;
}

.xp-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.xp-level {
    background: linear-gradient(135deg, var(--gold), #b8860b);
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.85rem;
}

.xp-text {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.xp-progress-bg {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    max-width: 200px;
}

.xp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #a855f7);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Bouton badges */
.btn-badges {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface);
    border: 1px solid #e5e7eb;
    color: var(--text);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-badges:hover {
    background: var(--surface-hover);
    border-color: var(--gold);
}

/* Notifications gamification */
.gamification-notification {
    position: fixed;
    top: 60px;
    right: 20px;
    background: var(--surface);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 20000;
    transform: translateX(400px);
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--gold);
}

.gamification-notification.visible {
    transform: translateX(0);
}

.gamification-notification .notif-icon {
    font-size: 2rem;
}

.gamification-notification .notif-title {
    font-weight: bold;
    color: var(--gold);
}

.gamification-notification .notif-text {
    color: var(--text);
}

.levelup-notification {
    border-left-color: #a855f7;
}

.levelup-notification .notif-title {
    color: #a855f7;
}

/* Popup fin quiz */
.quiz-completion-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    padding: 30px 50px;
    border-radius: 20px;
    z-index: 20000;
    text-align: center;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.quiz-completion-popup.visible {
    transform: translate(-50%, -50%) scale(1);
}

.popup-xp {
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
}

.popup-streak {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 10px;
}

/* Ecran badges */
.badges-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.badge-stat {
    text-align: center;
}

.badge-stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--gold);
}

.badge-stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.badges-categories h3 {
    margin-top: 25px;
    margin-bottom: 15px;
    color: var(--text-muted);
    font-size: 1rem;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: var(--background);
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.badge-item.unlocked {
    border-color: var(--gold);
    background: rgba(255, 215, 0, 0.05);
}

.badge-item.locked {
    opacity: 0.5;
}

.badge-icon {
    font-size: 2rem;
}

.badge-name {
    font-weight: bold;
}

.badge-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============================================
   REVISION INTELLIGENTE
   ============================================ */
.revision-card {
    position: relative;
}

.revision-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
}

.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #92400e;
}

.badge-success {
    background: rgba(34, 197, 94, 0.15);
    color: #15803d;
}

.revision-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.revision-stat {
    text-align: center;
}

.revision-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.btn-large {
    padding: 15px 30px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-large .badge {
    background: white;
    color: #92400e;
}

.revision-section {
    margin-top: 30px;
}

.revision-section h3 {
    margin-bottom: 15px;
}

.domain-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.domain-stat-card {
    background: var(--background);
    padding: 15px;
    border-radius: 10px;
}

.domain-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.domain-progress .progress-bar-bg {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.domain-progress .progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s;
}

.domain-details {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.failed-questions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.failed-question-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--background);
    border-radius: 10px;
    border-left: 4px solid var(--danger);
}

.fq-rank {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--danger);
    min-width: 40px;
}

.fq-content {
    flex: 1;
}

.fq-text {
    font-weight: 500;
    margin-bottom: 5px;
}

.fq-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.fq-domain {
    background: rgba(245, 158, 11, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    color: #92400e;
}

.empty-state {
    text-align: center;
    padding: 30px;
    color: var(--text-muted);
}

/* ============================================
   SIMULATEUR PWM
   ============================================ */
.simulator-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background);
    overflow: hidden;
}

.simulator-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 20px;
    background: var(--surface);
    border-bottom: 1px solid #e5e7eb;
}

.simulator-header h2 {
    flex: 1;
    margin: 0;
}

.simulator-main {
    flex: 1;
    display: flex;
    gap: 20px;
    padding: 20px;
    overflow: hidden;
}

.oscilloscope-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.oscilloscope-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.oscilloscope-header h3 {
    margin: 0;
}

.osc-controls select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid #e5e7eb;
    padding: 5px 10px;
    border-radius: 6px;
}

.oscilloscope-screen {
    position: relative;
    background: #0a0a0a;
    border-radius: 12px;
    padding: 10px;
    border: 3px solid #d1d5db;
}

#oscilloscope-canvas {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    background: #0a0a0a;
}

.osc-measurements {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
}

.osc-measure {
    text-align: center;
}

.measure-label {
    color: #b0b0b0;
    font-size: 0.8rem;
}

.measure-value {
    font-family: monospace;
    font-size: 1.2rem;
    color: #16a34a;
}

.state-indicator-panel {
    background: var(--surface);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.state-indicator-panel h4 {
    margin: 0 0 15px 0;
}

.state-display {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.state-letter {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: bold;
    background: #22c55e;
    color: white;
    border-radius: 12px;
}

.state-name {
    font-size: 1.2rem;
    font-weight: bold;
}

.state-desc {
    color: var(--text-muted);
}

.state-voltage {
    font-family: monospace;
    font-size: 1.5rem;
    color: #92400e;
}

.state-diagram {
    display: flex;
    gap: 8px;
}

.state-box {
    flex: 1;
    text-align: center;
    padding: 10px;
    background: var(--background);
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.state-box.active {
    border-color: var(--primary);
    background: rgba(245, 158, 11, 0.08);
}

.state-letter-small {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
}

.state-voltage-small {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.controls-panel {
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
}

.control-section {
    background: var(--surface);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.control-section h3 {
    margin: 0 0 15px 0;
    font-size: 1rem;
}

.control-group {
    margin-bottom: 15px;
}

.control-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.state-buttons {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

.state-btn {
    padding: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    background: var(--background);
    border: 2px solid #e5e7eb;
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

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

.state-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

#duty-cycle-slider {
    width: 100%;
}

.dc-presets {
    display: flex;
    gap: 5px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.dc-presets button {
    padding: 5px 10px;
    font-size: 0.8rem;
    background: var(--background);
    border: 1px solid #e5e7eb;
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
}

.dc-presets button:hover {
    background: var(--surface-hover);
}

.scenarios-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.scenario-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--background);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.scenario-item:hover {
    background: var(--surface-hover);
}

.scenario-item.running {
    border-color: var(--primary);
    background: rgba(245, 158, 11, 0.08);
}

.scenario-item.fault-scenario {
    border-left: 3px solid var(--warning);
}

.scenario-icon {
    font-size: 1.2rem;
}

.scenario-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.scenario-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.diagnostic-output {
    background: var(--background);
    padding: 15px;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.diagnostic-hint {
    color: var(--text-muted);
    text-align: center;
}

.diagnostic-header {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.diagnostic-steps {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}

.diagnostic-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.step-time {
    color: var(--text-muted);
    font-family: monospace;
    min-width: 50px;
}

.step-state {
    padding: 2px 8px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
}

.step-desc {
    color: var(--text);
}

.diagnostic-section {
    margin-bottom: 15px;
}

.current-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #92400e;
}

.current-formula {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.diagnostic-fault {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid var(--danger);
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.diagnostic-fault ul {
    margin: 10px 0 0 20px;
}

.reference-panel {
    padding: 15px 20px;
    background: var(--surface);
    border-top: 1px solid #e5e7eb;
}

.reference-panel h3 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
}

.reference-table {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.reference-table table {
    border-collapse: collapse;
    font-size: 0.85rem;
}

.reference-table th,
.reference-table td {
    padding: 8px 15px;
    border: 1px solid #e5e7eb;
}

.reference-table th {
    background: var(--background);
}

.formula-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.8;
}

/* ============================================
   QUESTIONS INTERACTIVES
   ============================================ */
.interactive-question {
    padding: 20px;
}

.question-text {
    font-size: var(--quiz-question-size);
    margin-bottom: 20px;
}

.blank-placeholder {
    background: rgba(245, 158, 11, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
    color: #92400e;
}

.formula-display {
    background: var(--surface);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-family: monospace;
    font-size: 1.1rem;
    border: 1px solid #e5e7eb;
}

.given-values {
    margin-bottom: 15px;
}

.given-values ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.given-values li {
    background: var(--surface);
    padding: 8px 15px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.answer-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}

.blank-input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blank-input {
    width: 150px;
    padding: 12px;
    font-size: 1.1rem;
    background: var(--background);
    border: 2px solid #e5e7eb;
    color: var(--text);
    border-radius: 8px;
}

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

.blank-input.correct {
    border-color: var(--success) !important;
    background: rgba(34, 197, 94, 0.08);
}

.blank-input.incorrect {
    border-color: var(--danger) !important;
    background: rgba(239, 68, 68, 0.08);
}

.unit {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.tolerance-info {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.calculator-toggle {
    margin-top: 15px;
}

/* Schema drag-drop */
.schema-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.schema-image-wrapper {
    position: relative;
    flex: 1;
}

.schema-image {
    width: 100%;
    border-radius: 8px;
}

.drop-zones {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.drop-zone {
    position: absolute;
    border: 2px dashed rgba(245, 158, 11, 0.5);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.08);
    transition: all 0.2s;
}

.drop-zone.drag-over {
    border-color: var(--primary);
    background: rgba(245, 158, 11, 0.2);
}

.drop-zone.correct {
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.15);
}

.drop-zone.incorrect {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.15);
}

.zone-label {
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.9rem;
    font-weight: 500;
}

.draggable-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
}

.draggable-item {
    padding: 10px 15px;
    background: var(--surface);
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}

.draggable-item:hover {
    border-color: var(--primary);
}

.draggable-item.dragging {
    opacity: 0.5;
}

/* Matching */
.matching-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.matching-column {
    flex: 1;
}

.matching-column h4 {
    text-align: center;
    margin-bottom: 15px;
    color: var(--text-muted);
}

.matching-item {
    padding: 12px 15px;
    background: var(--surface);
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.matching-item:hover {
    border-color: var(--primary);
}

.matching-item.selected {
    border-color: var(--primary);
    background: rgba(245, 158, 11, 0.08);
}

.matching-item.matched {
    border-color: #22c55e;
}

.matching-item.correct {
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.08);
}

.matching-lines {
    width: 100px;
    min-height: 200px;
}

/* Calculation workspace */
.calculation-workspace {
    display: grid;
    gap: 20px;
}

.calc-given,
.calc-formula,
.calc-steps {
    background: var(--surface);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.calc-given h4,
.calc-formula h4,
.calc-steps h4 {
    margin: 0 0 15px 0;
    color: var(--text-muted);
}

.given-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.given-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.given-symbol {
    font-weight: bold;
    font-style: italic;
}

.given-value {
    font-weight: bold;
    color: #92400e;
}

.given-unit {
    color: var(--text-muted);
}

.given-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.formula-box {
    font-family: monospace;
    font-size: 1.3rem;
    text-align: center;
    padding: 15px;
    background: var(--background);
    border-radius: 8px;
}

.formula-hint {
    display: block;
    text-align: center;
    color: var(--text-muted);
    margin-top: 10px;
}

.calc-step {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.step-number {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-weight: bold;
}

.step-text {
    flex: 1;
}

.step-input {
    width: 120px;
    padding: 10px;
    font-size: 1rem;
    background: var(--background);
    border: 2px solid #e5e7eb;
    color: var(--text);
    border-radius: 8px;
}

.step-unit {
    color: var(--text-muted);
}

.calc-tools {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* Hotspot */
.hotspot-container {
    position: relative;
    display: inline-block;
}

.hotspot-image {
    max-width: 100%;
    border-radius: 8px;
}

.hotspot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

.hotspot-zone {
    position: absolute;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: all 0.2s;
}

.hotspot-zone.visible {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.08);
}

.hotspot-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    border: 1px solid #e5e7eb;
}

.click-marker {
    position: absolute;
    width: 30px;
    height: 30px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: pulse 0.5s ease;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Calculatrice embarquee */
.embedded-calculator {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 250px;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    overflow: hidden;
    transform: scale(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
    border: 1px solid #e5e7eb;
}

.embedded-calculator.visible {
    transform: scale(1);
}

.calc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: var(--primary);
    color: white;
}

.calc-header button {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

.calc-display input {
    width: 100%;
    padding: 15px;
    font-size: 1.5rem;
    font-family: monospace;
    text-align: right;
    background: #f5f5f5;
    border: none;
    color: #1f2937;
}

.calc-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 5px;
}

.calc-buttons button {
    padding: 15px;
    font-size: 1.1rem;
    background: var(--background);
    border: none;
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s;
}

.calc-buttons button:hover {
    background: var(--surface-hover);
}

.calc-buttons .calc-clear {
    background: var(--danger);
    color: white;
}

.calc-buttons .calc-op {
    background: var(--primary);
    color: white;
}

.calc-buttons .calc-equals {
    background: var(--success);
    color: white;
}

.calc-buttons .calc-zero {
    grid-column: span 2;
}

.calc-extra {
    display: flex;
    gap: 2px;
    padding: 0 5px 5px;
}

.calc-extra button {
    flex: 1;
    padding: 10px;
    font-size: 0.9rem;
    background: #f3f4f6;
    border: none;
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
}

/* ============================================
   AJUSTEMENTS POUR LA PROJECTION EN SALLE
   ============================================ */
@media (min-width: 1920px) {
    :root {
        --quiz-question-size: 2.2rem;
        --quiz-option-size: 1.3rem;
    }

    .hero-section h1 {
        font-size: 4rem;
    }

    .card {
        padding: 2.5rem;
    }

    .card h3 {
        font-size: 1.4rem;
    }
}

/* Mode presentation plein ecran */
body:fullscreen .xp-bar-container,
body:fullscreen .trainer-fab,
body:fullscreen .app-footer {
    display: none;
}

body:fullscreen #quiz-interface {
    padding-top: 0;
}

/* ============================================
   SIMULATEUR CEM PWM/PLC
   ============================================ */

.cem-simulator-container {
    min-height: 100vh;
    background: var(--background);
    display: flex;
    flex-direction: column;
}

.cem-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 25px;
    background: var(--surface);
    border-bottom: 1px solid #e5e7eb;
}

.cem-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cem-icon {
    font-size: 2rem;
    background: linear-gradient(135deg, #f59e0b, #8b5cf6);
    padding: 10px 15px;
    border-radius: 12px;
}

.cem-title h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.cem-title p {
    margin: 5px 0 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Onglets */
.cem-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    padding: 10px 25px;
    margin: 0;
    border-bottom: 1px solid #e5e7eb;
}

.cem-tabs::before {
    content: 'CEM';
    font-size: 0.65rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 10px 4px 0;
    border-right: 1px solid #e5e7eb;
    margin-right: 4px;
}

.cem-tab {
    padding: 8px 18px;
    background: #f3f4f6;
    border: 2px solid transparent;
    border-radius: 8px;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
}

.cem-tab:hover {
    color: #374151;
    background: #e5e7eb;
    transform: translateY(-1px);
}

.cem-tab.active {
    color: #1f2937;
    background: rgba(245, 158, 11, 0.12);
    border-color: #f59e0b;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
}

/* Grille principale */
.cem-main-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 25px;
    padding: 25px;
    flex: 1;
}

/* Panneau de controles */
.cem-controls-panel {
    background: var(--surface);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    height: fit-content;
}

.cem-section-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 20px 0;
}

.cem-controls-group {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cem-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cem-control label {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text);
}

.cem-control label span:last-child {
    color: #92400e;
    font-weight: 600;
    font-family: monospace;
}

.cem-control input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 5px;
    outline: none;
}

.cem-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    transition: transform 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.cem-control input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.cem-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 10px 0;
}

.cem-subsection-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

.cem-subsection-title.danger {
    color: #ef4444;
}

.cem-subsection-title.warning {
    color: #92400e;
}

.cem-reset-btn {
    width: 100%;
    margin-top: 25px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #1f2937;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.cem-reset-btn:hover {
    background: #f3f4f6;
}

/* Zone oscilloscope */
.cem-scope-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cem-scope-container {
    background: radial-gradient(circle at center, #1a202c, #000);
    border: 3px solid #d1d5db;
    border-radius: 20px;
    padding: 20px;
    position: relative;
}

#cemScopeCanvas {
    width: 100%;
    height: 350px;
    border-radius: 12px;
    display: block;
}

/* Badge de statut */
.cem-status-badge {
    position: absolute;
    top: 30px;
    left: 30px;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.cem-status-badge.ok {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.cem-status-badge.error {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.ok {
    background: #10b981;
}

.status-dot.error {
    background: #ef4444;
    animation: pulse-error 1s infinite;
}

@keyframes pulse-error {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Legende */
.cem-legend {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 15px;
    padding: 12px;
    background: #f3f4f6;
    border-radius: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.blue { background: #3b82f6; }
.legend-dot.yellow { background: #fbbf24; }

.legend-line {
    width: 20px;
    height: 0;
    border-top: 2px dashed #ef4444;
}

/* Panneau verdict */
.cem-verdict-panel {
    background: var(--surface);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
}

.cem-verdict-panel h3 {
    margin: 0 0 12px 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.verdict-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text);
}

/* Panneau info pedagogique */
.cem-info-panel {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: 16px;
    padding: 20px;
}

.cem-info-panel h3 {
    margin: 0 0 12px 0;
    font-size: 0.85rem;
    color: #92400e;
}

.info-content {
    font-size: 0.9rem;
    line-height: 1.6;
}

.info-content p {
    margin: 0 0 10px 0;
}

.info-content ul {
    margin: 0;
    padding-left: 20px;
}

.info-content li {
    margin-bottom: 5px;
    color: var(--text-muted);
}

/* ─── États CP Grid ─── */
.cem-cp-states {
    margin-bottom: 5px;
}

.cem-cp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.cem-cp-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
}

.cem-cp-btn:hover {
    border-color: var(--state-color, #f59e0b);
    background: rgba(245, 158, 11, 0.05);
}

.cem-cp-btn.active {
    border-color: var(--state-color, #f59e0b);
    background: rgba(245, 158, 11, 0.1);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.cp-letter {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--state-color, #1f2937);
    line-height: 1;
}

.cp-volts {
    font-family: monospace;
    font-size: 0.75rem;
    color: #475569;
    white-space: nowrap;
}

.cem-cp-desc {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fffdf7;
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #4b5563;
}

/* ─── Duty Info ─── */
.cem-duty-info {
    padding: 8px 12px;
    background: #f0fdf4;
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #166534;
    transition: opacity 0.3s;
}

.cem-duty-info strong {
    color: #15803d;
    font-family: monospace;
    font-size: 1rem;
}

/* ─── PLC Info Box ─── */
.cem-plc-info-box {
    padding: 14px;
    background: rgba(30, 58, 95, 0.04);
    border: 1px solid rgba(30, 58, 95, 0.12);
    border-radius: 10px;
}

.cem-plc-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.plc-spec {
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.plc-spec span {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plc-spec strong {
    font-size: 0.8rem;
    color: #1e3a5f;
    margin-top: 2px;
}

/* ─── Popup Trigger (?) ─── */
.cem-popup-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
    vertical-align: middle;
    margin-left: 4px;
    transition: transform 0.15s, background 0.15s;
}

.cem-popup-trigger:hover {
    transform: scale(1.15);
    background: #d97706;
}

/* ─── Popup Overlay ─── */
.cem-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.cem-popup-overlay.active {
    display: flex;
}

.cem-popup-card {
    background: white;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: popupSlideIn 0.2s ease-out;
}

@keyframes popupSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.cem-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #fffdf7;
    border-radius: 16px 16px 0 0;
}

.cem-popup-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e3a5f;
}

.cem-popup-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 1.4rem;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.cem-popup-close:hover {
    background: #ef4444;
    color: white;
}

.cem-popup-body {
    padding: 20px 24px 24px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: #374151;
}

.cem-popup-body h4 {
    margin: 16px 0 8px 0;
    font-size: 0.95rem;
    color: #1e3a5f;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 4px;
}

.cem-popup-body ul {
    margin: 8px 0;
    padding-left: 20px;
}

.cem-popup-body li {
    margin-bottom: 6px;
}

.cem-popup-body p {
    margin: 8px 0;
}

.cem-popup-body strong {
    color: #1f2937;
}

.cem-popup-body em {
    color: #d97706;
    font-style: normal;
    font-weight: 500;
}

/* ─── Onglet 3 : Circuit Résistances CP ─── */

.cem-circuit-intro {
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(30,58,95,0.04));
    border: 1px solid rgba(245,158,11,0.15);
    border-radius: 10px;
}

.cem-resist-section {
    padding: 10px 0;
}

.cem-resist-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e3a5f;
}

.resist-icon {
    font-size: 1.1rem;
}

.cem-resist-section.borne .cem-resist-section-title {
    color: #dc2626;
}

.cem-resist-section.vehicule .cem-resist-section-title {
    color: #15803d;
}

.cem-resist-norm {
    margin-top: 6px;
    padding: 6px 10px;
    background: #fffdf7;
    border: 1px dashed rgba(245,158,11,0.3);
    border-radius: 6px;
    font-size: 0.78rem;
    color: #6b7280;
}

.cem-resist-norm strong {
    color: #1e3a5f;
}

/* Interrupteur S2 */
.cem-s2-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.cem-switch-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
}

.cem-s2-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #f8f9fa;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.25s ease;
}

.cem-s2-btn.open {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.cem-s2-btn.closed {
    border-color: #22c55e;
    color: #15803d;
    background: rgba(34, 197, 94, 0.08);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.s2-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.s2-text {
    font-family: monospace;
    letter-spacing: 1px;
}

/* Checkbox diode */
.cem-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
}

.cem-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
    cursor: pointer;
}

/* Résultats de calcul en temps réel */
.cem-calc-results {
    padding: 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
}

.calc-row:last-of-type {
    border-bottom: none;
}

.calc-row.highlight {
    padding: 10px 8px;
    margin: 6px -8px;
    background: rgba(245,158,11,0.06);
    border-radius: 8px;
    border-bottom: none;
}

.calc-label {
    font-size: 0.82rem;
    color: #4b5563;
    font-weight: 500;
}

.calc-value {
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
}

.calc-value.big {
    font-size: 1.2rem;
    color: #d97706;
}

.calc-formula {
    padding: 4px 8px;
    margin: 2px 0 6px;
    font-family: monospace;
    font-size: 0.72rem;
    color: #64748b;
    background: #f8f9fa;
    border-radius: 4px;
    line-height: 1.5;
}

/* État détecté (gros badge) */
.cem-state-result {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    border: 2px solid #f59e0b;
    border-radius: 12px;
    background: rgba(245,158,11,0.04);
    transition: border-color 0.3s ease;
}

.state-result-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f59e0b;
    color: white;
    font-size: 1.6rem;
    font-weight: 900;
    font-family: monospace;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.state-result-letter.mini {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 1rem;
}

.state-result-info {
    flex: 1;
}

.state-result-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
}

.state-result-desc {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 2px;
}

/* Badge état sur le canvas circuit */
.cem-circuit-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
}

/* Canvas circuit */
#cemCircuitCanvas {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
}

/* ─── Layout Circuit : Schema + Calculs côte à côte ─── */
.cem-circuit-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    align-items: start;
}

.cem-circuit-schema-col {
    min-width: 0;
}

.cem-circuit-calc-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* État détecté (grand badge en haut des calculs) */
.cem-state-result-big {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 3px solid #f59e0b;
    border-radius: 14px;
    background: rgba(245,158,11,0.04);
    transition: border-color 0.3s ease, background 0.3s ease;
}

.cem-state-result-big .state-result-letter {
    width: 52px;
    height: 52px;
    font-size: 1.8rem;
}

.cem-state-result-big .state-result-name {
    font-size: 1rem;
    font-weight: 800;
}

.cem-state-result-big .state-result-desc {
    font-size: 0.8rem;
}

/* Affichage TENSION CP (très gros, couleur dynamique) */
.cem-vcp-display {
    text-align: center;
    padding: 18px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(30,58,95,0.06));
    border: 2px solid rgba(245,158,11,0.2);
    transition: all 0.3s ease;
}

.vcp-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #6b7280;
    margin-bottom: 4px;
}

.vcp-value {
    font-family: monospace;
    font-size: 2.8rem;
    font-weight: 900;
    color: #d97706;
    line-height: 1;
    transition: color 0.3s ease;
}

.vcp-iec-ref {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    margin-top: 6px;
    letter-spacing: 0.5px;
}

/* Badge conformité IEC */
.cem-iec-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.cem-iec-badge.iec-ok {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.3);
    color: #15803d;
}

.cem-iec-badge.iec-warn {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.3);
    color: #dc2626;
}

.iec-icon {
    font-size: 1.1rem;
}

/* Note sous la formule principale */
.formula-note {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    margin-top: 6px;
    font-style: italic;
}

/* Carte de calculs détaillés */
.cem-calc-card {
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.calc-card-title {
    margin: 0 0 10px 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e3a5f;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
}

/* Formule encadrée en bas */
.cem-formula-box {
    padding: 12px 14px;
    background: #1e3a5f;
    border-radius: 12px;
    text-align: center;
}

.formula-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
}

.formula-main {
    font-family: monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fbbf24;
}

/* Responsive circuit layout */
@media (max-width: 900px) {
    .cem-circuit-layout {
        grid-template-columns: 1fr;
    }
    .cem-circuit-calc-col {
        order: -1;
    }
    .vcp-value {
        font-size: 2rem;
    }
}

/* ─── Override: display:none car .hidden du projet utilise opacity seule ─── */
#scope-container-signal.cem-hidden,
#scope-container-circuit.cem-hidden,
#scope-container-plc-arch.cem-hidden,
#scope-container-plc-fft.cem-hidden,
#scope-container-plc-coupler.cem-hidden,
#controls-pwm.cem-hidden,
#controls-plc.cem-hidden,
#controls-resist.cem-hidden,
#manual-controls.cem-hidden {
    display: none !important;
}

/* ─── Sous-onglets PLC ─── */
.cem-plc-subtabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f3f4f6;
    border-radius: 10px;
    margin-bottom: 8px;
}

.cem-plc-subtab {
    flex: 1;
    padding: 6px 10px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

.cem-plc-subtab:hover {
    background: #e5e7eb;
    color: #374151;
}

.cem-plc-subtab.active {
    background: #ffffff;
    color: #b45309;
    border-color: #f59e0b;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.15);
}

/* Canvas des sous-vues PLC */
#cemArchCanvas,
#cemFFTCanvas,
#cemCouplerCanvas {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

/* ─── Mode Toggle (Auto/Manuel) ─── */
.cem-mode-toggle {
    display: flex;
    gap: 6px;
    margin: 8px 0;
}

.cem-mode-btn {
    flex: 1;
    padding: 8px 10px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #f8f9fa;
    font-size: 0.82rem;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.cem-mode-btn:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.04);
}

.cem-mode-btn.active {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* Contrôles manuels */
.cem-manual-controls {
    padding: 8px 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .cem-main-grid {
        grid-template-columns: 1fr;
    }

    .cem-controls-panel {
        order: 2;
    }

    .cem-scope-section {
        order: 1;
    }
}

@media (max-width: 768px) {
    .cem-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .cem-tabs {
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px 12px;
    }

    .cem-tab {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .bm-tabs-row {
        padding: 6px 12px;
        gap: 4px;
    }

    .bm-tab-btn {
        padding: 5px 10px;
        font-size: 0.72rem;
    }

    .cem-legend {
        flex-wrap: wrap;
        gap: 15px;
    }

    .cem-status-badge {
        position: static;
        margin-bottom: 15px;
    }
}

/* ============================================
   APPLICATIONS EXTERNES
   ============================================ */

.external-app-card {
    position: relative;
}

.external-app-card .icon {
    padding: 15px;
    border-radius: 12px;
    font-size: 2rem;
}

.external-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    background: #fce7f3;
    color: #9f1239;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
}

.external-app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--background);
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.external-app-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 6px 15px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    min-height: 40px;
}

.external-app-header h2 {
    flex: 1;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e3a5f;
}

.btn-back {
    padding: 6px 12px;
    background: #f3f4f6;
    border: none;
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.btn-back:hover {
    background: #e5e7eb;
}

.btn-fullscreen {
    padding: 6px 12px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #92400e;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.btn-fullscreen:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

#external-app-iframe {
    flex: 1;
    width: 100%;
    height: calc(100vh - 40px);
    border: none;
    background: #f5f5f5;
}

/* Ecran applications externes - masquer elements LMS */
#external-app-screen {
    padding: 0 !important;
    overflow: hidden;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

#external-app-screen.screen.active {
    display: block;
}

/* Masquer gamification et footer quand app externe active */
#external-app-screen.active ~ .gamification-bar,
#external-app-screen.active ~ .app-footer,
body:has(#external-app-screen.active) .gamification-bar,
body:has(#external-app-screen.active) .app-footer,
body:has(#external-app-screen.active) #gamification-status-bar {
    display: none !important;
}

/* Fullscreen mode */
.external-app-container:fullscreen {
    background: #000;
    height: 100vh;
}

.external-app-container:fullscreen .external-app-header {
    display: none;
}

.external-app-container:fullscreen #external-app-iframe {
    height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════
   BORNE MODULES — 6 modules complémentaires IEC 61851
   Session · PP · Diagnostic · K1 · OCPP · Quiz
   Caly-Quiz IRVE v7.0
   ═══════════════════════════════════════════════════════════════ */

/* ─── SECOND TAB ROW (Borne modules) ─── */
.bm-tabs-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 25px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
    border-bottom: 2px solid #f59e0b;
    flex-wrap: wrap;
}

.bm-tabs-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 10px 4px 0;
    border-right: 1px solid rgba(255,255,255,0.15);
    margin-right: 4px;
}

.bm-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.bm-tab-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: translateY(-1px);
}

.bm-tab-btn.active {
    background: #f59e0b;
    color: #1e3a5f;
    font-weight: 700;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.bm-tab-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.bm-tab-text {
    line-height: 1;
}

/* ─── HIDE main grid when BM module is active ─── */
.cem-simulator-container.bm-active .cem-main-grid {
    display: none !important;
}

/* ─── Container principal (sibling of .cem-main-grid) ─── */
.bm-container {
    padding: 30px;
    min-height: 400px;
    overflow-y: auto;
    animation: bmFadeIn 0.25s ease-out;
}

@keyframes bmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Module wrapper ─── */
.bm-module {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.bm-module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 3px solid #f3f4f6;
}

.bm-module-header h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e3a5f;
}

/* ─── Controls row ─── */
.bm-controls-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ─── Buttons ─── */
.bm-btn {
    padding: 7px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #f8f9fa;
    font-size: 0.82rem;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bm-btn:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.bm-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bm-btn.active {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.bm-btn.primary {
    border-color: #f59e0b;
    background: #f59e0b;
    color: white;
}

.bm-btn.primary:hover {
    background: #d97706;
    border-color: #d97706;
}

.bm-btn.primary:disabled {
    background: #d1d5db;
    border-color: #d1d5db;
    color: #6b7280;
}

.bm-btn.danger {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

.bm-btn.danger:hover {
    background: #ef4444;
    color: white;
}

/* ─── Badges ─── */
.bm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.bm-badge.green {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.bm-badge.amber {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.bm-badge.red {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.bm-badge.slate {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* ═══════════════════════════════════════════════════
   MODULE 1 — SESSION DE CHARGE (Timeline)
   ═══════════════════════════════════════════════════ */

.bm-timeline {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    gap: 0;
    padding: 12px 0 16px;
    margin-bottom: 16px;
}

.bm-tl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
    min-width: 70px;
}

.bm-tl-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f3f4f6;
    border: 3px solid #d1d5db;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.bm-tl-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    max-width: 80px;
    line-height: 1.2;
    transition: color 0.3s;
}

.bm-tl-item.active .bm-tl-icon {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
    transform: scale(1.1);
}

.bm-tl-item.active .bm-tl-label {
    color: #d97706;
    font-weight: 700;
}

.bm-tl-item.done .bm-tl-icon {
    border-color: #22c55e;
    background: #dcfce7;
}

.bm-tl-item.done .bm-tl-label {
    color: #15803d;
}

.bm-tl-item:hover .bm-tl-icon {
    transform: scale(1.08);
}

/* Connector lines */
.bm-tl-line {
    flex: 1;
    height: 3px;
    background: #e5e7eb;
    min-width: 20px;
    margin-top: 20px;
    border-radius: 2px;
    transition: background 0.3s;
}

.bm-tl-line.done {
    background: #22c55e;
}

/* Phase detail layout */
.bm-phase-detail {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}

.bm-phase-left h4 {
    margin: 0 0 8px;
    font-size: 1rem;
    color: #1e3a5f;
}

.bm-phase-left p {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #374151;
    margin: 0 0 12px;
}

.bm-signal-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Fault injection zone */
.bm-fault-inject {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e5e7eb;
}

.bm-alert {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    animation: bmPulse 1s ease-in-out infinite alternate;
}

.bm-alert.danger {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #dc2626;
}

@keyframes bmPulse {
    from { opacity: 1; }
    to   { opacity: 0.7; }
}

/* Dashboard grid */
.bm-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bm-dash-item {
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-align: center;
}

.bm-dash-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.bm-dash-value {
    font-family: 'Fira Mono', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
}

.bm-dash-value small {
    font-size: 0.7rem;
    font-weight: 500;
    color: #6b7280;
}

/* SOC bar */
.bm-soc-bar {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
}

.bm-soc-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease, background 0.3s ease;
}

/* ═══════════════════════════════════════════════════
   MODULE 2 — SIGNAL PP
   ═══════════════════════════════════════════════════ */

.bm-pp-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.bm-schema-box {
    padding: 16px;
    background: #fafafa;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bm-schema-box:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.bm-schema-box h4 {
    margin: 0 0 10px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e3a5f;
}

.bm-schema-box svg {
    display: block;
    width: 100%;
    max-height: 300px;
    height: auto;
    margin: 0 auto;
}

.bm-pp-cables {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.bm-pp-cable {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.bm-pp-cable:hover {
    border-color: var(--cable-color, #6b7280);
    background: rgba(0, 0, 0, 0.02);
}

.bm-pp-cable.active {
    border-color: var(--cable-color, #f59e0b);
    background: rgba(245, 158, 11, 0.06);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.bm-pp-cable-icon {
    font-size: 1.3rem;
}

.bm-pp-cable-type {
    font-size: 0.72rem;
    font-weight: 700;
    color: #374151;
}

.bm-pp-cable-r {
    font-size: 0.68rem;
    font-weight: 600;
    font-family: 'Fira Mono', monospace;
    color: #6b7280;
}

/* ─── Info cards (shared) ─── */
.bm-info-card {
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
}

.bm-info-card:last-child {
    margin-bottom: 0;
}

.bm-info-card.warn {
    background: #fffbeb;
    border-color: rgba(245, 158, 11, 0.25);
}

.bm-info-card h4 {
    margin: 0 0 10px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e3a5f;
}

.bm-info-card p {
    font-size: 0.82rem;
    line-height: 1.6;
    color: #374151;
    margin: 6px 0;
}

/* Key-value list */
.bm-kv-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bm-kv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #f3f4f6;
}

.bm-kv:last-child {
    border-bottom: none;
}

.bm-kv span {
    font-size: 0.82rem;
    color: #4b5563;
}

.bm-kv strong {
    font-family: 'Fira Mono', monospace;
    font-size: 0.88rem;
    color: #1f2937;
}

/* Table */
.bm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.bm-table thead th {
    padding: 8px 10px;
    background: #f3f4f6;
    color: #374151;
    font-weight: 700;
    text-align: left;
    border-bottom: 2px solid #e5e7eb;
}

.bm-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid #f3f4f6;
    color: #4b5563;
}

.bm-table tbody tr.highlight {
    background: rgba(245, 158, 11, 0.06);
    font-weight: 600;
}

.bm-table tbody tr.highlight td {
    color: #1f2937;
}

/* ═══════════════════════════════════════════════════
   MODULE 3 — DIAGNOSTIC PANNES
   ═══════════════════════════════════════════════════ */

.bm-fault-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.bm-symptom-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.bm-symptom-list li {
    padding: 6px 0;
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.5;
    border-bottom: 1px solid #fef3c7;
}

.bm-symptom-list li:last-child {
    border-bottom: none;
}

/* Fault option buttons */
.bm-fault-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}

.bm-fault-opt {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #f8f9fa;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bm-fault-opt:hover:not(:disabled) {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.04);
}

.bm-fault-opt:disabled {
    cursor: default;
}

.bm-fault-opt.correct {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.08);
    color: #166534;
    font-weight: 700;
}

.bm-fault-opt.wrong {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    text-decoration: line-through;
}

/* Explanation box */
.bm-fault-explain {
    padding: 14px 16px;
    border-radius: 10px;
    margin-top: 12px;
    font-size: 0.84rem;
    line-height: 1.6;
}

.bm-fault-explain strong {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.bm-fault-explain p {
    margin: 0;
    color: inherit;
}

.bm-fault-explain.ok {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #166534;
}

.bm-fault-explain.ko {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #991b1b;
}

/* ═══════════════════════════════════════════════════
   MODULE 4 — CONTACTEUR K1 & SÉCURITÉ
   ═══════════════════════════════════════════════════ */

.bm-k1-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.bm-k1-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Slider row */
.bm-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bm-slider-row label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.bm-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e5e7eb;
    border-radius: 3px;
    outline: none;
}

.bm-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f59e0b;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.bm-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f59e0b;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.bm-slider-val {
    font-family: 'Fira Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 55px;
    text-align: right;
}

/* Sequence steps */
.bm-sequence {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bm-seq-step {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    border-left: 3px solid #d1d5db;
    transition: all 0.3s;
}

.bm-seq-step.done {
    color: #166534;
    background: rgba(34, 197, 94, 0.06);
    border-left-color: #22c55e;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   MODULE 5 — OCPP & CLOUD (2-column layout)
   ═══════════════════════════════════════════════════ */

/* Split layout: sequence left, JSON right */
.bm-ocpp-split {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}

.bm-ocpp-left {
    min-width: 0;
}

.bm-ocpp-right {
    position: sticky;
    top: 0;
    min-width: 0;
}

/* Sequence header */
.bm-ocpp-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.bm-ocpp-col-borne {
    color: #2563eb;
}

.bm-ocpp-col-mid {
    color: #475569;
    font-size: 0.75rem;
}

.bm-ocpp-col-csms {
    color: #15803d;
}

/* Messages flow */
.bm-ocpp-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 520px;
    overflow-y: auto;
    padding: 4px 0;
}

.bm-ocpp-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    animation: bmSlideIn 0.3s ease-out;
}

@keyframes bmSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.bm-ocpp-msg.right {
    flex-direction: row-reverse;
}

.bm-ocpp-msg.right .bm-ocpp-arrow {
    text-align: right;
}

.bm-ocpp-msg.active {
    background: rgba(245, 158, 11, 0.06);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.bm-ocpp-arrow {
    font-family: 'Fira Mono', monospace;
    font-size: 0.7rem;
    color: #64748b;
    min-width: 28px;
    padding-top: 4px;
    flex-shrink: 0;
}

.bm-ocpp-bubble {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.bm-ocpp-bubble.blue {
    background: #eff6ff;
    border-color: rgba(37, 99, 235, 0.2);
}

.bm-ocpp-bubble.green {
    background: #f0fdf4;
    border-color: rgba(22, 163, 74, 0.2);
}

.bm-ocpp-type {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e3a5f;
    margin-bottom: 2px;
    font-family: 'Fira Mono', monospace;
}

.bm-ocpp-desc {
    font-size: 0.74rem;
    color: #4b5563;
    line-height: 1.45;
}

/* JSON card (right panel) */
.bm-ocpp-json-card {
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
}

.bm-ocpp-json-card.from-borne {
    border-color: rgba(37, 99, 235, 0.25);
}

.bm-ocpp-json-card.from-csms {
    border-color: rgba(22, 163, 74, 0.25);
}

.bm-ocpp-json-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
}

.bm-ocpp-json-dir {
    font-size: 1rem;
}

.bm-ocpp-json-type {
    font-family: 'Fira Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e3a5f;
}

.bm-ocpp-json-info {
    padding: 10px 14px;
    background: #fafafa;
    border-top: 1px solid #f3f4f6;
}

.bm-ocpp-json-info p {
    margin: 0;
    font-size: 0.78rem;
    color: #4b5563;
    line-height: 1.5;
}

/* JSON code block */
.bm-json {
    padding: 14px 16px;
    margin: 0;
    background: #1e293b;
    color: #a5f3fc;
    font-family: 'Fira Mono', monospace;
    font-size: 0.73rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════
   MODULE 6 — QUIZ FINAL
   ═══════════════════════════════════════════════════ */

/* Score card hero */
.bm-score-card {
    padding: 24px;
    border-radius: 14px;
    text-align: center;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.bm-score-value {
    font-family: 'Fira Mono', monospace;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 6px;
}

.bm-score-label {
    font-size: 0.95rem;
    font-weight: 600;
    opacity: 1;
}

/* Quiz questions list */
.bm-quiz-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 4px;
}

.bm-quiz-card {
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    transition: all 0.2s;
}

.bm-quiz-card.ok {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.03);
}

.bm-quiz-card.ko {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.03);
}

.bm-quiz-q {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 10px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.bm-quiz-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1e3a5f;
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.bm-quiz-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.bm-quiz-opt {
    padding: 8px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #f8f9fa;
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bm-quiz-opt:hover:not(:disabled) {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.04);
}

.bm-quiz-opt:disabled {
    cursor: default;
}

.bm-quiz-opt.correct {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    color: #166534;
    font-weight: 700;
}

.bm-quiz-opt.wrong {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    text-decoration: line-through;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Borne Modules
   ═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .bm-phase-detail {
        grid-template-columns: 1fr;
    }
    .bm-pp-layout {
        grid-template-columns: 1fr;
    }
    .bm-fault-layout {
        grid-template-columns: 1fr;
    }
    .bm-k1-grid {
        grid-template-columns: 1fr;
    }
    .bm-pp-cables {
        grid-template-columns: repeat(2, 1fr);
    }
    .bm-ocpp-split {
        grid-template-columns: 1fr;
    }
    .bm-ocpp-right {
        position: static;
    }
}

@media (max-width: 768px) {
    .bm-module {
        padding: 14px 16px;
    }
    .bm-module-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .bm-dashboard {
        grid-template-columns: 1fr;
    }
    .bm-quiz-opts {
        grid-template-columns: 1fr;
    }
    .bm-ocpp-header {
        font-size: 0.72rem;
    }
    .bm-timeline {
        padding-bottom: 8px;
    }
    .bm-tl-item {
        min-width: 56px;
    }
    .bm-tl-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    .bm-tl-label {
        font-size: 0.6rem;
    }
}

/* ─── Layout column children (grid children) ─── */
.bm-phase-right,
.bm-pp-right,
.bm-fault-right {
    min-width: 0; /* prevent grid blowout */
}

.bm-phase-left,
.bm-pp-left,
.bm-fault-left {
    min-width: 0;
}

/* ─── Borne Modules: hidden by default, shown via inline style ─── */
/* Container visibility is managed by JS (style.display = 'block' / 'none') */

/* ═══════════════════════════════════════════════════
   PEDAGOGICAL ELEMENTS — Shared across all modules
   Design tokens:
     --primary: #f59e0b    --secondary: #1e3a5f
     --text: #1f2937       --text-muted: #4b5563
     --success: #22c55e    --danger: #ef4444
     --border: #e5e7eb     --surface: #ffffff
     --background: #f5f5f5
   Fonts: Inter (body), Outfit (headings), Fira Mono (code)
   ═══════════════════════════════════════════════════ */

/* ─── 1. Tip boxes ("Le saviez-vous?") ─── */
.bm-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 12px 0;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-left: 4px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    font-size: 0.85rem;
    color: #1f2937;
    line-height: 1.55;
    transition: box-shadow 0.2s ease;
}

.bm-tip:hover {
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.12);
}

.bm-tip-icon {
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1;
    margin-top: 1px;
}

.bm-tip-content {
    flex: 1;
    min-width: 0;
}

.bm-tip-content strong {
    color: #92400e;
}

/* ─── 2. Formula display boxes ─── */
.bm-formula {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 24px;
    margin: 12px 0;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-align: center;
}

.bm-formula-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4b5563;
    margin-bottom: 8px;
}

.bm-formula code,
.bm-formula .bm-formula-expr {
    font-family: 'Fira Mono', 'Fira Code', monospace;
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e3a5f;
    letter-spacing: 0.02em;
}

/* ─── 3. Waveform SVG containers ─── */
.bm-waveform {
    width: 100%;
    margin: 12px 0;
    border: 2px solid #1e293b;
    border-radius: 10px;
    background: #0a0a0a;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.bm-waveform svg {
    width: 100%;
    height: auto;
    max-height: 240px;
    display: block;
}

/* ─── 4. Chronogram ─── */
.bm-chrono {
    width: 100%;
    height: 200px;
    min-height: 160px;
    max-height: 300px;
    margin: 10px 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
    overflow-x: auto;
    overflow-y: hidden;
}

.bm-chrono svg {
    min-width: 600px;
    height: 100%;
    display: block;
}

/* ─── 5. Difficulty badges ─── */
.bm-difficulty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.2s ease;
}

.bm-difficulty:hover {
    transform: scale(1.05);
}

.bm-difficulty.basique {
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.bm-difficulty.intermediaire {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.bm-difficulty.expert {
    background: rgba(239, 68, 68, 0.12);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ─── 5b. Hint section ─── */
.bm-hint-section {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ─── 6. Hint system ─── */
.bm-hint-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 1px dashed #d1d5db;
    border-radius: 20px;
    color: #4b5563;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bm-hint-btn:hover {
    border-color: #f59e0b;
    color: #92400e;
    background: rgba(245, 158, 11, 0.05);
}

.bm-hint-box {
    position: relative;
    max-height: 0;
    overflow: hidden;
    margin: 8px 0;
    padding: 0 14px;
    background: #fefce8;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    color: #1f2937;
    line-height: 1.55;
    transition: max-height 0.4s ease, padding 0.3s ease, border-color 0.3s ease;
}

.bm-hint-box {
    max-height: 200px;
    padding: 10px 14px;
    border-color: #fde68a;
}

.bm-hint-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to bottom, transparent, #fefce8);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bm-hint-box:not(.open)::after {
    opacity: 1;
}

/* ─── 7. Tools recommended ─── */
.bm-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
}

.bm-tools-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4b5563;
    white-space: nowrap;
}

.bm-tool-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: #1e40af;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.bm-tool-pill:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.bm-tool-pill .bm-tool-icon {
    font-size: 0.9rem;
}

/* ─── 8. "Et si?" scenario cards ─── */
.bm-whatif {
    margin: 8px 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.bm-whatif:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bm-whatif-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #f9fafb;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    line-height: 1.5;
    font-weight: 600;
    color: #1e3a5f;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
}

.bm-whatif-header:hover {
    background: #f3f4f6;
}

.bm-whatif-header::before {
    content: '▸';
    font-size: 0.8rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

.bm-whatif.open .bm-whatif-header::before {
    transform: rotate(90deg);
}

.bm-whatif.open .bm-whatif-header {
    border-bottom-color: #e5e7eb;
}

.bm-whatif-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.6;
    transition: max-height 0.35s ease, padding 0.3s ease;
}

.bm-whatif.open .bm-whatif-body {
    max-height: 600px;
    padding: 14px 16px;
}

/* ─── 9. Norm reference boxes ─── */
.bm-norm-ref {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin: 10px 0;
    background: #f0f4ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    font-size: 0.83rem;
    color: #1f2937;
    line-height: 1.5;
}

.bm-norm-ref .bm-norm-icon,
.bm-norm-ref-icon {
    flex-shrink: 0;
    font-size: 1.3rem;
    line-height: 1;
    margin-top: 1px;
}

.bm-norm-ref > div {
    flex: 1;
    min-width: 0;
}

.bm-norm-ref strong {
    color: #1e3a5f;
}

.bm-norm-ref-content {
    flex: 1;
    min-width: 0;
}

.bm-norm-ref-content strong {
    color: #1e3a5f;
}

.bm-norm-ref-content ul {
    margin: 4px 0 0 0;
    padding-left: 16px;
}

.bm-norm-ref-content li {
    margin-bottom: 3px;
}

/* ─── 10. OCPP / Comparison table styles ─── */
.bm-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.bm-compare-table thead th {
    background: #1e3a5f;
    color: #ffffff;
    padding: 10px 12px;
    text-align: left;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.bm-compare-table thead th:first-child {
    border-radius: 8px 0 0 0;
}

.bm-compare-table thead th:last-child {
    border-radius: 0 8px 0 0;
}

.bm-compare-table tbody tr {
    transition: background 0.15s ease;
}

.bm-compare-table tbody tr:nth-child(even) {
    background: #f9fafb;
}

.bm-compare-table tbody tr:hover {
    background: rgba(245, 158, 11, 0.06);
}

.bm-compare-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
    vertical-align: top;
}

.bm-compare-table tbody td:first-child {
    font-weight: 600;
    color: #1e3a5f;
    white-space: nowrap;
}

/* Responsive table wrapper */
.bm-lock-comparison {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 8px 0;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.bm-lock-comparison .bm-table {
    margin: 0;
    border: none;
}

/* ─── 11. Radar / Spider chart container ─── */
.bm-radar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 450px;
    margin: 16px auto;
    padding: 12px;
}

.bm-radar-container svg,
.bm-radar-container canvas {
    width: 100%;
    height: auto;
    max-height: 350px;
}

/* ─── 12. Topic filter buttons ─── */
.bm-topic-filters {
    display: flex;
    gap: 6px;
    padding: 8px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.bm-topic-filters::-webkit-scrollbar {
    height: 4px;
}

.bm-topic-filters::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

.bm-topic-btn {
    flex-shrink: 0;
    padding: 5px 14px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: #ffffff;
    color: #4b5563;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.bm-topic-btn:hover {
    border-color: #f59e0b;
    color: #92400e;
    background: rgba(245, 158, 11, 0.05);
}

.bm-topic-btn.active {
    background: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
    font-weight: 600;
}

/* ─── 13. Lock module specific ─── */

/* 2-column grid layout */
.bm-lock-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 16px;
}

.bm-lock-left,
.bm-lock-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Step-by-step vertical sequence */
.bm-lock-sequence {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bm-lock-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border-left: 3px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.bm-lock-step:hover {
    background: rgba(245, 158, 11, 0.04);
}

.bm-lock-step.active {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.06);
}

.bm-lock-step.done {
    border-left-color: #22c55e;
}

.bm-lock-step-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: #f3f4f6;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.bm-lock-step.active .bm-lock-step-icon {
    background: #fef3c7;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.bm-lock-step.done .bm-lock-step-icon {
    background: #dcfce7;
}

.bm-lock-step-content {
    flex: 1;
    min-width: 0;
}

.bm-lock-step-label {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 2px;
}

.bm-lock-step.active .bm-lock-step-label {
    color: #92400e;
}

.bm-lock-step-desc {
    font-size: 0.8rem;
    color: #4b5563;
    line-height: 1.5;
    margin-top: 4px;
    animation: bmFadeIn 0.25s ease-out;
}

.bm-lock-step-status {
    flex-shrink: 0;
    font-size: 0.9rem;
    color: #64748b;
}

.bm-lock-step.active .bm-lock-step-status {
    color: #b45309;
}

.bm-lock-step.done .bm-lock-step-status {
    color: #15803d;
}

/* Large SVG container */
.bm-lock-svg {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bm-lock-svg:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.bm-lock-svg h4 {
    margin: 0 0 10px 0;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e3a5f;
}

.bm-lock-svg svg {
    display: block;
    width: 100%;
    max-height: 340px;
    height: auto;
    margin: 0 auto;
}

/* Failure scenario card */
.bm-lock-failure {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    overflow: hidden;
    animation: bmFadeIn 0.25s ease-out;
}

.bm-lock-failure-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.08);
    font-size: 0.9rem;
    color: #991b1b;
    border-bottom: 1px solid #fecaca;
}

.bm-lock-failure-body {
    padding: 12px 14px;
    font-size: 0.83rem;
    color: #1f2937;
    line-height: 1.55;
}

.bm-lock-failure-section {
    margin-bottom: 10px;
}

.bm-lock-failure-section:last-child {
    margin-bottom: 0;
}

.bm-lock-failure-section strong {
    display: block;
    margin-bottom: 4px;
    color: #991b1b;
    font-size: 0.82rem;
}

.bm-lock-failure-section ul {
    margin: 4px 0 0 16px;
    padding: 0;
}

.bm-lock-failure-section li {
    margin-bottom: 3px;
}

.bm-lock-failure-section p {
    margin: 0;
}

.bm-lock-failure-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ─── 14. Wrong explanation in fault module ─── */
.bm-wrong-explain {
    margin-top: 6px;
    padding: 8px 12px;
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    border-radius: 0 6px 6px 0;
    font-size: 0.8rem;
    color: #4b5563;
    line-height: 1.5;
    animation: bmFadeIn 0.2s ease-out;
}

.bm-wrong-explain strong {
    color: #991b1b;
}

/* ─── 15. Intro section ─── */
.bm-intro {
    padding: 14px 18px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 4px solid #1e3a5f;
    border-radius: 0 12px 12px 0;
    font-size: 0.88rem;
    color: #1f2937;
    line-height: 1.65;
}

.bm-intro p {
    margin: 0;
}

.bm-intro strong {
    color: #1e3a5f;
}

/* ─── 16. Quiz explanation ─── */
.bm-quiz-explain {
    margin-top: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.83rem;
    color: #1f2937;
    line-height: 1.55;
    animation: bmFadeIn 0.25s ease-out;
}

.bm-quiz-explain.ok {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.bm-quiz-explain.ok strong {
    color: #166534;
}

.bm-quiz-explain.ko {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.bm-quiz-explain.ko strong {
    color: #991b1b;
}

.bm-quiz-explain p {
    margin: 4px 0 0 0;
}

/* ─── 17. Whatif arrow ─── */
.bm-whatif-arrow {
    margin-left: auto;
    font-size: 0.8rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

.bm-whatif.open .bm-whatif-arrow {
    transform: rotate(90deg);
}

/* ─── 18. Waveform title ─── */
.bm-waveform h4 {
    margin: 0;
    padding: 10px 14px 6px;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #e5e7eb;
    background: #0a0a0a;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Lock Module + Pedagogical Elements
   ═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .bm-lock-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .bm-lock-step {
        padding: 8px 10px;
    }
    .bm-lock-step-icon {
        width: 28px;
        height: 28px;
        font-size: 0.95rem;
    }
    .bm-lock-failure-btns {
        flex-direction: column;
    }
    .bm-lock-failure-btns .bm-btn {
        width: 100%;
        text-align: center;
    }
    .bm-compare-table {
        font-size: 0.75rem;
    }
    .bm-compare-table thead th,
    .bm-compare-table tbody td {
        padding: 7px 8px;
    }
    .bm-topic-filters {
        padding: 6px 0;
    }
    .bm-intro {
        padding: 10px 14px;
        font-size: 0.82rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   PROJECTION ENHANCEMENTS — Modéré et scoped
   Pour écrans 1024px+ (vidéoprojecteur salle de formation)
   Les schémas SVG sont gérés par le Schema Viewer (popup plein écran)
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
    .bm-module { padding: 24px 28px; }
    .bm-module-header h3 { font-size: 1.5rem; }
    .bm-module p, .bm-module li { font-size: 1.05rem; line-height: 1.7; }
    .bm-info-card h4 { font-size: 1.1rem; }
    .bm-info-card p { font-size: 0.98rem; }
    .bm-badge { font-size: 0.88rem; padding: 6px 14px; }
    .bm-btn { font-size: 0.95rem; padding: 10px 20px; }
    .bm-dash-value { font-size: 2rem; }
    .bm-dash-label { font-size: 0.88rem; }
    .bm-intro { font-size: 1.05rem; line-height: 1.75; padding: 16px 20px; }
    .bm-tip { font-size: 1rem; padding: 14px 18px; }
    .bm-tip-icon { font-size: 1.5rem; }
    .bm-tl-icon { width: 50px; height: 50px; font-size: 1.3rem; }
    .bm-tl-label { font-size: 0.78rem; font-weight: 600; }
    .bm-formula code, .bm-formula .bm-formula-expr { font-size: 1.3rem; }
    .bm-table th, .bm-compare-table thead th { font-size: 0.9rem; padding: 10px 14px; }
    .bm-table td, .bm-compare-table tbody td { font-size: 0.9rem; padding: 10px 14px; }
    .bm-norm-ref { font-size: 0.95rem; padding: 14px 18px; }
    .bm-kv-list .bm-kv span { font-size: 0.95rem; }
    .bm-kv-list .bm-kv strong { font-size: 1.02rem; }
    .bm-schema-box h4, .bm-lock-svg h4 { font-size: 1rem; }
    .bm-waveform h4 { font-size: 0.92rem; padding: 10px 14px 6px; }
    .bm-ocpp-type { font-size: 0.92rem; }
    .bm-ocpp-desc { font-size: 0.85rem; }
    .bm-json { font-size: 0.82rem; }
    .bm-phase-detail h4 { font-size: 1.1rem; }
    .bm-fault-opt { font-size: 0.95rem; padding: 12px 16px; }
    .bm-quiz-q { font-size: 1.02rem; }
    .bm-score-value { font-size: 3.5rem; }
    .bm-lock-step-label { font-size: 0.95rem; }
    .bm-alert { font-size: 0.95rem; padding: 12px 16px; }
    .bm-slider-val { font-size: 1.05rem; font-weight: 700; }
}

/* ─── 19. K1 enrichi — Reference box ─── */
.bm-ref-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
}
.bm-ref-box h4 {
    color: #0369a1;
    margin: 0 0 12px 0;
    font-size: 0.95rem;
}
.bm-ref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.bm-ref-item {
    background: rgba(255,255,255,0.8);
    border-radius: 8px;
    padding: 10px 14px;
}
.bm-ref-item strong {
    display: block;
    color: #0c4a6e;
    font-size: 0.85rem;
    margin-bottom: 4px;
}
.bm-ref-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.82rem;
    color: #475569;
}
.bm-ref-list li {
    padding: 2px 0;
}
.bm-ref-list li::before {
    content: "▸ ";
    color: #0ea5e9;
}

/* ─── 20. K1 enrichi — Weld detection ─── */
.bm-weld-detect {
    margin-top: 16px;
}
.bm-weld-detect h4 {
    color: #1e3a5f;
    font-size: 0.95rem;
    margin: 0 0 10px 0;
}
.bm-weld-diagram {
    display: flex;
    justify-content: center;
    margin: 12px 0;
}
.bm-weld-diagram svg {
    max-width: 100%;
    height: auto;
}

/* ─── 21. K1 enrichi — Cost indicators ─── */
.bm-cost {
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: #dcfce7;
    color: #15803d;
}
.bm-cost-mid {
    background: #fef3c7;
    color: #92400e;
}
.bm-cost-high {
    background: #fee2e2;
    color: #b91c1c;
}

/* ─── 22. K1 enrichi — RCD table ─── */
.bm-table-rcd {
    width: 100%;
    font-size: 0.82rem;
}
.bm-table-rcd th {
    background: #f1f5f9;
    font-weight: 600;
    white-space: nowrap;
}
.bm-table-rcd td {
    vertical-align: middle;
}

/* ─── 23. K1 enrichi — Emergency sequence ─── */
.bm-seq-emergency .bm-seq-step {
    border-left-color: #dc2626;
}

/* ─── 24. OCPP enrichi — Intro & versions ─── */
.bm-ocpp-intro {
    margin-bottom: 16px;
}
.bm-ocpp-intro h4 {
    color: #1e3a5f;
    font-size: 0.95rem;
    margin: 0 0 10px 0;
}
.bm-ocpp-versions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.bm-ocpp-version-item {
    flex: 1;
    min-width: 120px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    transition: all 0.2s;
}
.bm-ocpp-version-item strong {
    display: block;
    color: #1e3a5f;
    font-size: 0.9rem;
    margin-bottom: 4px;
}
.bm-ocpp-version-current {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

/* ─── 25. OCPP enrichi — JSON-RPC frame ─── */
.bm-jsonrpc-frame {
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 8px 0;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    overflow-x: auto;
}
.bm-jsonrpc-example {
    margin: 4px 0;
    padding: 4px 0;
    line-height: 1.6;
}
.bm-jsonrpc-label {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 4px;
    font-family: inherit;
}

.bm-jsonrpc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 0.78rem;
}

.bm-jrpc-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.75rem;
    font-family: 'Fira Code', 'Consolas', monospace;
}
.bm-jrpc-type {
    background: #dbeafe;
    color: #1e40af;
}
.bm-jrpc-id {
    background: #fef3c7;
    color: #92400e;
}
.bm-jrpc-action {
    background: #dcfce7;
    color: #166534;
}
.bm-jrpc-payload {
    background: #f3e8ff;
    color: #7c3aed;
}

.bm-json-frame {
    background: #0f172a;
    color: #a5f3fc;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    overflow-x: auto;
    margin: 6px 0;
}

/* ─── 26. OCPP enrichi — Offline grid ─── */
.bm-offline-box {
    margin-top: 16px;
}
.bm-offline-box h4 {
    color: #1e3a5f;
    font-size: 0.95rem;
    margin: 0 0 10px 0;
}
.bm-offline-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.bm-offline-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    font-size: 0.82rem;
}
.bm-offline-item strong {
    display: block;
    color: #334155;
    margin-bottom: 4px;
}
.bm-offline-item p {
    margin: 0;
    color: #64748b;
    font-size: 0.8rem;
}

/* ─── 27. OCPP enrichi — Compare table ─── */
.bm-table-compare {
    width: 100%;
    font-size: 0.82rem;
    margin-top: 12px;
}
.bm-table-compare th {
    background: #f1f5f9;
    font-weight: 600;
}

/* ─── 28. Tip box generique ─── */
.bm-tip-box {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 12px;
    font-size: 0.82rem;
    color: #92400e;
}
.bm-tip-box strong {
    color: #78350f;
}

/* ─── 29. Quiz enrichi — Filters ─── */
.bm-quiz-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
}
.bm-quiz-filter-btn {
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    background: white;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}
.bm-quiz-filter-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.bm-quiz-filter-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* ─── 30. Quiz enrichi — Radar chart ─── */
.bm-radar-chart {
    margin: 16px 0;
    text-align: center;
}
.bm-radar-chart svg {
    max-width: 100%;
    height: auto;
}

/* ─── 31. Responsive pour contenu enrichi ─── */
@media (max-width: 768px) {
    .bm-ref-grid { grid-template-columns: 1fr; }
    .bm-ocpp-versions { flex-direction: column; }
    .bm-offline-grid { grid-template-columns: 1fr; }
    .bm-jsonrpc-legend { flex-direction: column; gap: 4px; }
    .bm-quiz-filters { justify-content: center; }
}

/* ============================================================
 * PARCOURS INTEGRE & COMPETENCE TRACKER
 * ============================================================ */

/* --- Barre de progression parcours sur l'accueil --- */
.parcours-bar-wrapper {
    max-width: 700px;
    margin: 16px auto 8px;
    padding: 0 1.5rem;
}

.btn-parcours-map {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    background: var(--surface, #1e1e3a);
    color: var(--text, #e0e0e0);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.btn-parcours-map:hover {
    background: var(--primary, #f59e0b);
    color: #000;
    border-color: var(--primary, #f59e0b);
}

/* --- Modal carte du parcours --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.hidden {
    display: none;
}

.modal-content.parcours-modal {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 800px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
}
.modal-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: #1e3a5f;
}
.modal-header .btn-icon {
    width: 32px;
    height: 32px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    transition: background 0.2s;
}
.modal-header .btn-icon:hover {
    background: #e2e8f0;
}

.parcours-map-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

/* --- Ecran profil competences --- */
#competences-screen .panel {
    padding: 2rem;
}
#competences-screen canvas {
    max-width: 100%;
    height: auto !important;
}

@media (max-width: 768px) {
    .parcours-bar-wrapper { padding: 0 1rem; }
    .modal-content.parcours-modal { max-width: 95vw; max-height: 90vh; }
    .parcours-map-body { padding: 12px 16px; }
}