/* ============================================
   DESIGN SYSTEM - QUIZZ MAKER
   Fondations visuelles unifiees
   Version 1.0 - 2024-12-21
   ============================================ */

/* === POLICES === */
/* Google Fonts avec fallback systeme pour mode offline */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:wght@600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* === VARIABLES CSS === */
:root {
    /* --- Couleurs principales --- */
    --primary: #3b82f6;           /* Bleu - actions principales */
    --primary-dark: #2563eb;
    --primary-light: #93c5fd;
    --primary-bg: #eff6ff;        /* Fond teinte bleu */

    --cta: #f97316;               /* Orange - CTA importants */
    --cta-dark: #ea580c;
    --cta-light: #fed7aa;
    --cta-bg: #fff7ed;

    /* --- Etats semantiques --- */
    --success: #22c55e;
    --success-dark: #16a34a;
    --success-bg: #dcfce7;

    --warning: #f59e0b;
    --warning-dark: #d97706;
    --warning-bg: #fef3c7;

    --danger: #ef4444;
    --danger-dark: #dc2626;
    --danger-bg: #fee2e2;

    --info: #3b82f6;
    --info-bg: #dbeafe;

    /* --- Neutres --- */
    --white: #ffffff;
    --paper: #f8fafc;             /* Surface cartes */
    --bg: #e2e8f0;                /* Fond page */
    --bg-dark: #0f172a;           /* Headers sombres */
    --bg-dark-soft: #1e293b;

    --ink: #0f172a;               /* Texte principal */
    --ink-soft: #334155;          /* Texte secondaire */
    --muted: #64748b;             /* Texte desactive */

    --border: #e2e8f0;
    --border-dark: #cbd5e1;

    /* --- Typographie --- */
    --font-sans: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-serif: 'Fraunces', 'Georgia', serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;

    /* --- Espacements --- */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */

    /* --- Rayons --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 999px;  /* Pills */

    /* --- Ombres --- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.15);

    /* --- Transitions --- */
    --transition-fast: 0.15s ease;
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* --- Focus accessibilite --- */
    --focus-ring: #fbbf24;        /* Gold pour focus visible */
    --focus-width: 3px;

    /* --- Alias compatibilite anciennes variables --- */
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
}

/* === RESET MINIMAL === */
*, *::before, *::after {
    box-sizing: border-box;
}

/* === BASE TYPOGRAPHIE === */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Titres avec police serif */
h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}

/* Code et monospace */
code, pre, .mono {
    font-family: var(--font-mono);
}

/* === FOCUS VISIBLE GLOBAL === */
/* Outline gold pour accessibilite - remplace box-shadow */
:focus-visible {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: 2px;
}

/* Reset pour les elements qui gerent leur propre focus */
:focus:not(:focus-visible) {
    outline: none;
}

/* === UTILITAIRES TEXTE === */
.text-primary { color: var(--primary); }
.text-cta { color: var(--cta); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-muted { color: var(--muted); }
.text-ink { color: var(--ink); }
.text-ink-soft { color: var(--ink-soft); }

.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }

.font-sans { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }
.font-mono { font-family: var(--font-mono); }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* === UTILITAIRES FOND === */
.bg-primary { background: var(--primary); }
.bg-primary-bg { background: var(--primary-bg); }
.bg-cta { background: var(--cta); }
.bg-cta-bg { background: var(--cta-bg); }
.bg-success-bg { background: var(--success-bg); }
.bg-warning-bg { background: var(--warning-bg); }
.bg-danger-bg { background: var(--danger-bg); }
.bg-paper { background: var(--paper); }
.bg-white { background: var(--white); }
.bg-dark { background: var(--bg-dark); }

/* === SECTION TITLE === */
.section-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: var(--space-md);
}

/* === GRILLES LAYOUT === */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

/* === UTILITAIRES D'AFFICHAGE === */
.is-hidden {
    display: none !important;
}

[data-progress] {
    width: 0%;
}

.grid-3 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-lg);
}

/* Responsive : 1 colonne sur mobile */
@media (max-width: 768px) {
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* === MODE ACCESSIBILITE === */

/* --- Contraste eleve --- */
body.high-contrast,
body.contrast {
    --bg: #000000;
    --paper: #000000;
    --white: #000000;
    --ink: #ffffff;
    --ink-soft: #e2e8f0;
    --muted: #cbd5e1;
    --border: var(--focus-ring);
    --primary: var(--focus-ring);
    --cta: var(--focus-ring);
    --bg-dark: #000000;
    --bg-dark-soft: #111111;
}

body.high-contrast,
body.contrast {
    background: #000 !important;
    color: #fff !important;
}

body.high-contrast .card,
body.high-contrast .question-card,
body.high-contrast .login-card,
body.high-contrast .sidebar-panel,
body.high-contrast .exam-header-bar,
body.high-contrast .session-control-panel,
body.high-contrast .monitoring-section,
body.high-contrast .side-card,
body.contrast .card,
body.contrast .question-card,
body.contrast .login-card {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid var(--focus-ring) !important;
}

body.high-contrast .option-item,
body.high-contrast .student-card,
body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid var(--focus-ring) !important;
}

body.high-contrast .button,
body.high-contrast .btn {
    background: var(--focus-ring) !important;
    color: #000 !important;
    border: 2px solid #fff !important;
}

body.high-contrast a {
    color: var(--focus-ring) !important;
    text-decoration: underline !important;
}

/* --- Grande taille texte / Zoom --- */
body.large-text,
body.zoomed {
    font-size: 18px;
}

body.large-text h1,
body.zoomed h1 { font-size: 2rem; }

body.large-text h2,
body.zoomed h2 { font-size: 1.5rem; }

body.large-text h3,
body.zoomed h3 { font-size: 1.25rem; }

body.large-text .question-text,
body.zoomed .question-text {
    font-size: 1.2rem;
}

body.large-text .option-text,
body.zoomed .option-text {
    font-size: 1.1rem;
}

/* --- Police Dyslexie --- */
body.dyslexic-font,
body.dyslexia {
    font-family: 'OpenDyslexic', 'Comic Sans MS', 'Verdana', sans-serif !important;
    letter-spacing: 0.05em;
    word-spacing: 0.2em;
    line-height: 1.8;
}

body.dyslexic-font *,
body.dyslexia * {
    font-family: inherit !important;
}

body.dyslexic-font h1,
body.dyslexic-font h2,
body.dyslexic-font h3,
body.dyslexia h1,
body.dyslexia h2,
body.dyslexia h3 {
    font-family: 'OpenDyslexic', 'Comic Sans MS', 'Verdana', sans-serif !important;
}

/* --- Skip link pour navigation clavier --- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-dark);
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    z-index: 9999;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 10px;
}

/* --- Indicateurs de focus ameliores --- */
:focus-visible {
    outline: var(--focus-width) solid var(--focus-ring) !important;
    outline-offset: 2px !important;
}

/* Focus specifique pour les inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: var(--focus-width) solid var(--focus-ring) !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.3) !important;
}

/* Focus specifique pour les boutons */
button:focus-visible,
.button:focus-visible,
.btn:focus-visible {
    outline: var(--focus-width) solid var(--focus-ring) !important;
    outline-offset: 3px !important;
}

/* Focus pour les liens */
a:focus-visible {
    outline: var(--focus-width) solid var(--focus-ring) !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* --- Reduce motion preference --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Barre d'accessibilite flottante --- */
.a11y-toolbar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: var(--bg-dark);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
}

.a11y-toolbar button {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.15s;
}

.a11y-toolbar button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.a11y-toolbar button.active {
    background: var(--focus-ring);
    color: #000;
}

/* --- Lecteur d'ecran only --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Touch targets minimum 44x44px --- */
@media (pointer: coarse) {
    .button,
    .btn,
    .option-item,
    .qchip,
    .a11y-btn,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    .option-item {
        padding: 16px;
    }
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.animate-fade-in { animation: fadeIn var(--transition-slow); }
.animate-fade-in-up { animation: fadeInUp var(--transition-slow); }