/* ================================================================ ITAG LMS — Certification App : 5 thèmes interchangeables Utilisation : etc. ================================================================ */ /* ─── Variables communes par défaut (Dark Premium) ─── */ :root{ --bg-main:#0f0a0a; --bg-card:#1a1414; --bg-soft:#0f0a0a; --text-primary:#eee; --text-secondary:#aaa; --accent-primary:#C0392B; --accent-secondary:#F39C12; --accent-hover:#E74C3C; --border:#2a1f1f; --shadow:0 2px 10px rgba(0,0,0,.5); --radius:12px; --radius-sm:6px; --font-main:system-ui,-apple-system,sans-serif; --hdr-grad:linear-gradient(135deg,#1a0a0a,#C0392B); --score-grad:linear-gradient(135deg,#C0392B,#F39C12); --timer-grad:linear-gradient(135deg,#C0392B,#E74C3C); --tab-bg:#1a1414; --tab-active-bg:#C0392B; --tab-active-fg:#fff; --input-bg:#0f0a0a; --input-fg:#fff; } /* ===================================================== 1) DARK PREMIUM — Rouge ITAG + Or sur fond noir ===================================================== */ .theme-dark-premium{ --bg-main:#0f0a0a; --bg-card:#1a1414; --bg-soft:#0f0a0a; --text-primary:#eee; --text-secondary:#aaa; --accent-primary:#C0392B; --accent-secondary:#F39C12; --accent-hover:#E74C3C; --border:#2a1f1f; --shadow:0 2px 10px rgba(0,0,0,.5); --radius:12px; --radius-sm:6px; --font-main:system-ui,-apple-system,sans-serif; --hdr-grad:linear-gradient(135deg,#1a0a0a,#C0392B); --score-grad:linear-gradient(135deg,#C0392B,#F39C12); --timer-grad:linear-gradient(135deg,#C0392B,#E74C3C); --tab-bg:#1a1414; --tab-active-bg:#C0392B; --tab-active-fg:#fff; --input-bg:#0f0a0a; --input-fg:#fff; } /* ===================================================== 2) LIGHT ACADEMIC — Oxford/Cambridge (blanc + bleu marine + doré) ===================================================== */ .theme-light-academic{ --bg-main:#F8F6F0; --bg-card:#FFFFFF; --bg-soft:#F1EEE4; --text-primary:#1A1F36; --text-secondary:#5A6478; --accent-primary:#1B3A5C; --accent-secondary:#C8A863; --accent-hover:#234C78; --border:#E5E1D8; --shadow:0 2px 10px rgba(27,58,92,.08); --radius:10px; --radius-sm:6px; --font-main:Georgia,'Times New Roman',serif; --hdr-grad:linear-gradient(135deg,#1B3A5C,#2C5A8C); --score-grad:linear-gradient(135deg,#1B3A5C,#C8A863); --timer-grad:linear-gradient(135deg,#1B3A5C,#234C78); --tab-bg:#FFFFFF; --tab-active-bg:#1B3A5C; --tab-active-fg:#FFFFFF; --input-bg:#FFFFFF; --input-fg:#1A1F36; } /* ===================================================== 3) UNIVERSITY MODERN — MIT/Stanford (gris clair + rouge profond + Inter) ===================================================== */ .theme-university-modern{ --bg-main:#F4F4F6; --bg-card:#FFFFFF; --bg-soft:#EDEDF0; --text-primary:#0E0E13; --text-secondary:#62636B; --accent-primary:#8C1515; /* Stanford Cardinal */ --accent-secondary:#A61B1B; --accent-hover:#A51C30; --border:#D8D8DC; --shadow:0 4px 14px rgba(0,0,0,.06); --radius:8px; --radius-sm:4px; --font-main:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; --hdr-grad:linear-gradient(135deg,#0E0E13,#8C1515); --score-grad:linear-gradient(135deg,#8C1515,#D97706); --timer-grad:linear-gradient(135deg,#8C1515,#A51C30); --tab-bg:#FFFFFF; --tab-active-bg:#8C1515; --tab-active-fg:#FFFFFF; --input-bg:#FFFFFF; --input-fg:#0E0E13; } /* ===================================================== 4) TECH MINIMALIST — Apple/Linear (blanc pur + bleu ciel) ===================================================== */ .theme-tech-minimalist{ --bg-main:#FAFAFC; --bg-card:#FFFFFF; --bg-soft:#F4F4F7; --text-primary:#0A0A0B; --text-secondary:#6B6F76; --accent-primary:#0066CC; --accent-secondary:#00A8E8; --accent-hover:#0077E6; --border:#EBEBF0; --shadow:0 1px 3px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.04); --radius:14px; --radius-sm:8px; --font-main:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif; --hdr-grad:linear-gradient(135deg,#0066CC,#00A8E8); --score-grad:linear-gradient(135deg,#0066CC,#00A8E8); --timer-grad:linear-gradient(135deg,#0066CC,#0077E6); --tab-bg:#FFFFFF; --tab-active-bg:#0066CC; --tab-active-fg:#FFFFFF; --input-bg:#FFFFFF; --input-fg:#0A0A0B; } /* ===================================================== 5) NATURE GREEN — Cambridge Green Books (vert foncé + beige + serif) ===================================================== */ .theme-nature-green{ --bg-main:#F5F1E6; --bg-card:#FFFDF7; --bg-soft:#EEE7D3; --text-primary:#1F2A1F; --text-secondary:#5B6B5B; --accent-primary:#1F4D2C; /* vert forêt */ --accent-secondary:#B08A3E; /* vieux or */ --accent-hover:#2A6A3C; --border:#D6CDB2; --shadow:0 2px 12px rgba(31,77,44,.10); --radius:10px; --radius-sm:6px; --font-main:'Merriweather','Georgia',serif; --hdr-grad:linear-gradient(135deg,#1F4D2C,#2A6A3C); --score-grad:linear-gradient(135deg,#1F4D2C,#B08A3E); --timer-grad:linear-gradient(135deg,#1F4D2C,#2A6A3C); --tab-bg:#FFFDF7; --tab-active-bg:#1F4D2C; --tab-active-fg:#FFFDF7; --input-bg:#FFFDF7; --input-fg:#1F2A1F; } /* ================================================================ APPLICATION DES VARIABLES — overrides styles existants ================================================================ */ body{ margin:0; font-family:var(--font-main); background:var(--bg-main); color:var(--text-primary); min-height:100vh; } .hdr{ background:var(--hdr-grad)!important; padding:16px 24px; display:flex;justify-content:space-between;align-items:center; box-shadow:var(--shadow); color:#fff; } .card{ background:var(--bg-card)!important; border:1px solid var(--border)!important; border-radius:var(--radius)!important; padding:20px;margin-bottom:16px; color:var(--text-primary); } .cert{ background:var(--bg-card)!important; border:2px solid var(--border)!important; border-radius:var(--radius)!important; padding:16px;cursor:pointer;transition:.2s; color:var(--text-primary); } .cert:hover{ border-color:var(--accent-primary)!important; transform:translateY(-2px); box-shadow:var(--shadow); } .cert h3{color:var(--accent-secondary)!important;margin:4px 0;} .cert .lvl{ display:inline-block;padding:2px 8px; background:var(--accent-primary)!important;color:#fff!important; border-radius:4px;font-size:11px;font-weight:bold; } .tab{ padding:8px 16px; background:var(--tab-bg)!important; border:1px solid var(--border)!important; border-radius:var(--radius-sm)!important; cursor:pointer;font-size:13px; color:var(--text-secondary)!important; } .tab.active{ background:var(--tab-active-bg)!important; border-color:var(--tab-active-bg)!important; color:var(--tab-active-fg)!important; } .btn{ padding:10px 20px; background:var(--accent-primary)!important; color:#fff!important;border:0; border-radius:var(--radius-sm)!important; cursor:pointer;font-size:14px;font-weight:600; font-family:var(--font-main); } .btn:hover{background:var(--accent-hover)!important;} .btn.sec{background:var(--bg-soft)!important;color:var(--text-primary)!important;} input,textarea,select{ background:var(--input-bg)!important; color:var(--input-fg)!important; border:1px solid var(--border)!important; padding:10px;border-radius:var(--radius-sm)!important; font-size:14px;width:100%;font-family:var(--font-main); } .module{ border-left:4px solid var(--accent-primary)!important; padding:16px;margin:16px 0; background:var(--bg-soft)!important; border-radius:var(--radius-sm)!important; color:var(--text-primary); } .q{ background:var(--bg-card)!important; padding:14px;border-radius:var(--radius-sm)!important; margin:10px 0; border:1px solid var(--border); color:var(--text-primary); } .q .opts label{ display:block;padding:8px;margin:4px 0; background:var(--bg-soft)!important; border-radius:4px;cursor:pointer; color:var(--text-primary); } .q .opts label:hover{background:var(--border)!important;} .timer{ position:fixed;top:16px;right:16px; background:var(--accent-primary)!important; color:#fff!important; padding:10px 16px;border-radius:8px;font-weight:bold;z-index:100; } .login-box{ max-width:400px;margin:80px auto;padding:30px; background:var(--bg-card)!important; border-radius:var(--radius)!important; border:1px solid var(--border)!important; box-shadow:var(--shadow); color:var(--text-primary); } .login-box h2{margin-top:0;color:var(--accent-secondary)!important;} .score-card{ text-align:center;padding:30px; background:var(--score-grad)!important; border-radius:var(--radius)!important;margin:20px 0; color:#fff; } .score-card .big{font-size:48px;font-weight:bold;} .audio-btn{ background:#27AE60;color:#fff;border:0;padding:14px 24px; border-radius:50px;cursor:pointer;font-size:16px;margin:10px 5px; } .audio-btn.rec{background:var(--accent-primary)!important;animation:pulse 1s infinite;} .back{color:var(--accent-secondary)!important;cursor:pointer;display:inline-block;margin-bottom:16px;} /* Timer bannière en haut (override inline gradient) */ #exam-timer{ background:var(--timer-grad)!important; color:#fff!important; border-radius:var(--radius-sm)!important; } /* Liens accent */ a{color:var(--accent-secondary);} /* Mini preview cards admin */ .cert-theme-preview{ border-radius:10px;overflow:hidden;border:2px solid #e5e7eb; cursor:pointer;transition:.15s;background:#fff; } .cert-theme-preview:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08);} .cert-theme-preview.active{border-color:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.15);} .cert-theme-preview .pv-hdr{padding:14px;color:#fff;font-weight:700;} .cert-theme-preview .pv-body{padding:14px;} .cert-theme-preview .pv-chip{display:inline-block;padding:3px 10px;border-radius:4px;font-size:10px;font-weight:700;margin-right:6px;}