/*
* base.css — Template CSS SCORM — Charte rail4mation
* Bundlé avec la skill SCORM
*
* CHARTE rail4mation :
* #E84E36 Orange Corail → Boutons d'action, navigation, erreurs UI
* #F18E33 Orange Vif → Icônes, accentuation, hover
* #F7B52C Jaune Orangé → Barre de progression, badges
* #333333 Gris Anthracite→ Texte principal, titres
* #FFFFFF Blanc Pur → Fond unique (pas de dégradés de fond)
*
* RÈGLES DESIGN :
* - Fond toujours blanc — jamais de dégradés en fond de page
* - Jamais de texte jaune sur fond blanc (illisible)
* - Flat design — pas d'ombres lourdes
* - Border-radius 4-8px
* - Succès = vert émeraude #059669 (le orange ne peut pas signifier "correct")
* - Logo toujours depuis assets/logo.* — jamais généré
*/
/* ── Variables de charte rail4mation ─────────────────────────────────────── */
:root {
--color-primary: #E84E36; /* Orange Corail — CTA, navigation, focus */
--color-secondary: #C03A26; /* Orange foncé — hover, states actifs */
--color-accent: #F18E33; /* Orange Vif — icônes, surbrillance */
--color-progress: #F7B52C; /* Jaune Orangé — barre de progression, badges */
--color-success: #059669; /* Vert émeraude — bonne réponse, validation */
--color-error: #E84E36; /* Orange Corail — mauvaise réponse (couleur marque) */
--color-neutral: #666666; /* Gris moyen — texte secondaire */
--color-bg: #FFFFFF; /* Fond blanc pur — règle absolue */
--color-surface: #FFFFFF; /* Fond cartes */
--color-surface-alt:#FFF8F6; /* Surface légèrement teintée (orange 3%) */
--color-text: #333333; /* Gris Anthracite — texte principal */
--color-text-light: #666666; /* Texte secondaire */
--color-border: #E8E8E8; /* Bordures légères */
--font-primary: 'Montserrat', 'Roboto', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Open Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.10);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
--transition: 200ms ease;
}
/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
}
/* ── Layout principal ────────────────────────────────────────────────────── */
.scorm-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
max-width: 900px;
margin: 0 auto;
padding: 0 16px;
}
/* ── Google Fonts — à inclure dans le de chaque module ────────────── */
/* */
/* */
/* ── Header module ───────────────────────────────────────────────────────── */
.module-header {
background: #FFFFFF;
border-bottom: 3px solid var(--color-primary);
padding: 16px 28px 12px;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 16px;
}
/* Logo toujours depuis assets/logo.* — ne jamais générer une image de logo */
.module-logo {
height: 40px;
width: auto;
flex-shrink: 0;
}
.module-header-text {
flex: 1;
}
.module-header h1 {
font-family: var(--font-primary);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text);
letter-spacing: -0.01em;
}
.module-header .subtitle {
font-size: 0.8rem;
color: var(--color-text-light);
margin-top: 2px;
}
/* ── Barre de progression — dégradé orange → jaune (couleurs logo) ───────── */
.progress-bar-container {
background: #F0F0F0;
border-radius: 999px;
height: 6px;
margin: 8px 0 0;
overflow: hidden;
width: 100%;
}
.progress-bar {
height: 100%;
background: linear-gradient(to right, var(--color-primary), var(--color-accent), var(--color-progress));
border-radius: 999px;
transition: width 0.5s ease;
}
/* ── Carte / Slide ───────────────────────────────────────────────────────── */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 28px 32px;
margin-bottom: 20px;
box-shadow: var(--shadow-sm);
}
.card-title {
font-family: var(--font-primary);
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 12px;
border-left: 3px solid var(--color-primary);
padding-left: 10px;
}
/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
border-radius: var(--radius-md);
border: none;
cursor: pointer;
font-family: var(--font-primary);
font-size: 0.95rem;
font-weight: 600;
transition: all var(--transition);
text-decoration: none;
}
.btn-primary {
background: var(--color-primary);
color: #fff;
}
.btn-primary:hover { background: var(--color-secondary); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
.btn-secondary:hover { background: var(--color-primary); color: #fff; }
.btn:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none !important;
}
/* ── Navigation (prev / next) ────────────────────────────────────────────── */
.nav-controls {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0 24px;
gap: 12px;
}
.slide-counter {
font-size: 0.875rem;
color: var(--color-text-light);
font-weight: 500;
}
/* ── Quiz ────────────────────────────────────────────────────────────────── */
.question-block {
margin-bottom: 24px;
}
.question-text {
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 16px;
color: var(--color-text);
}
.answers-list {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
}
.answer-item label {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
border-radius: var(--radius-md);
border: 2px solid var(--color-border);
cursor: pointer;
transition: all var(--transition);
background: var(--color-bg);
}
.answer-item label:hover {
border-color: var(--color-primary);
background: #EFF6FF;
}
.answer-item input[type="radio"],
.answer-item input[type="checkbox"] {
margin-top: 2px;
accent-color: var(--color-primary);
flex-shrink: 0;
}
/* États de correction */
.answer-item.correct label { border-color: var(--color-success); background: #ECFDF5; }
.answer-item.incorrect label { border-color: var(--color-error); background: #FEF2F2; }
/* ── Feedback de réponse ─────────────────────────────────────────────────── */
.feedback-box {
border-radius: var(--radius-md);
padding: 14px 18px;
margin-top: 16px;
font-weight: 500;
display: none;
}
.feedback-box.correct { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.feedback-box.incorrect { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.feedback-box.info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
.feedback-box.active { display: block; }
/* ── Score final ─────────────────────────────────────────────────────────── */
.score-display {
text-align: center;
padding: 32px;
}
.score-circle {
width: 120px;
height: 120px;
border-radius: 50%;
border: 6px solid var(--color-primary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.score-number {
font-family: var(--font-primary);
font-size: 2rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
}
.score-label { font-size: 0.75rem; color: var(--color-text-light); }
.score-passed { border-color: var(--color-success); }
.score-passed .score-number { color: var(--color-success); }
/* Échec : Orange Corail (couleur de marque, pas rouge neutre) */
.score-failed { border-color: var(--color-primary); }
.score-failed .score-number { color: var(--color-primary); }
/* ── Simulation / Scénario ───────────────────────────────────────────────── */
.scenario-scene {
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 20px;
}
.scene-image {
width: 100%;
max-height: 320px;
object-fit: cover;
}
.scene-context {
background: #F0F9FF;
border-left: 4px solid var(--color-primary);
padding: 16px 20px;
margin-bottom: 16px;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-style: italic;
color: var(--color-text);
}
.choices-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 16px;
}
.choice-btn {
background: var(--color-bg);
border: 2px solid var(--color-border);
border-radius: var(--radius-md);
padding: 16px;
cursor: pointer;
text-align: left;
transition: all var(--transition);
font-family: var(--font-primary);
font-size: 0.9rem;
line-height: 1.4;
}
.choice-btn:hover { border-color: var(--color-primary); background: #EFF6FF; }
.choice-btn.selected { border-color: var(--color-primary); background: #DBEAFE; }
.choice-btn.good-choice { border-color: var(--color-success); background: #ECFDF5; }
.choice-btn.wrong-choice { border-color: var(--color-error); background: #FEF2F2; }
/* ── Exercices interactifs ───────────────────────────────────────────────── */
/* Drag & drop */
.drag-area {
min-height: 80px;
border: 2px dashed var(--color-border);
border-radius: var(--radius-md);
padding: 12px;
transition: border-color var(--transition);
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
}
.drag-area.drag-over { border-color: var(--color-primary); background: #EFF6FF; }
.drag-area.correct { border-color: var(--color-success); border-style: solid; background: #ECFDF5; }
.drag-area.incorrect { border-color: var(--color-error); border-style: solid; background: #FEF2F2; }
.draggable-item {
background: var(--color-primary);
color: #fff;
padding: 6px 14px;
border-radius: var(--radius-sm);
cursor: grab;
font-size: 0.875rem;
font-weight: 500;
user-select: none;
transition: opacity var(--transition);
}
.draggable-item:active { cursor: grabbing; opacity: 0.7; }
/* Fill in the blank */
.fill-blank {
border: none;
border-bottom: 2px solid var(--color-primary);
background: transparent;
font-family: var(--font-primary);
font-size: 1rem;
padding: 2px 8px;
min-width: 100px;
outline: none;
color: var(--color-text);
transition: border-color var(--transition);
}
.fill-blank:focus { border-color: var(--color-secondary); }
.fill-blank.correct-answer { border-color: var(--color-success); color: var(--color-success); }
.fill-blank.wrong-answer { border-color: var(--color-error); color: var(--color-error); }
/* ── Objectifs pédagogiques ──────────────────────────────────────────────── */
.objectives-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.objectives-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
background: #F0F9FF;
border-radius: var(--radius-md);
font-size: 0.95rem;
}
.objectives-list li::before {
content: "✓";
color: var(--color-primary);
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
/* ── Utilitaires ─────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-light); font-size: 0.875rem; }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.hidden { display: none !important; }
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
background: var(--color-progress); /* Jaune Orangé — jamais sur fond blanc seul */
color: var(--color-text); /* Gris anthracite sur fond jaune pour lisibilité */
}
/* ── Footer module ───────────────────────────────────────────────────────── */
.module-footer {
text-align: center;
padding: 12px;
font-size: 0.75rem;
color: var(--color-text-light);
border-top: 1px solid var(--color-border);
margin-top: auto;
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.choices-grid { grid-template-columns: 1fr; }
.card { padding: 18px 16px; }
.module-header { padding: 16px 18px; }
.module-header h1 { font-size: 1.1rem; }
}