/* ===== Thèmes complets du site : sombre / blanc / violet / miel ===== Un seul fichier pour TOUT le site (accueil, démos, DriveWise, fiches). Le JS (js/theme.js) pose data-theme sur ; ce fichier recolorie tout. */ /* ===== Carbon Design System — tokens IBM (gray-100 / white + violet & miel signatures) ===== */ :root, html[data-theme="sombre"]{ --bg:#070A12; --surface:#0F172A; --surface2:#1a2440; --accent:#38BDF8; --accent2:#2DD4BF; --btn:#38BDF8; --btn-hover:#0EA5E9; --btn-ink:#fff; --ink:#E5E7EB; --muted:#94A3B8; --line:rgba(255,255,255,.08); --navy:#0F172A; --ok:#10B981; --err:#F87171; --teal:#2DD4BF; --teal-dark:#14B8A6; --orange:#F59E0B; --orange-dark:#D97706; --text:#E5E7EB; --border:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.22); --focus:#38BDF8; --success:#10B981; --error:#F87171; color-scheme:dark; } html[data-theme="blanc"]{ --bg:#F6F1E7; --surface:#FFFDF7; --surface2:#efe9db; --accent:#0E7490; --accent2:#0D9488; --btn:#0E7490; --btn-hover:#0B6E84; --btn-ink:#fff; --ink:#0F172A; --muted:#64748B; --line:rgba(15,23,42,.08); --navy:#0F172A; --ok:#0E9F6E; --err:#DC2626; --teal:#127C70; --teal-dark:#0E5F56; --orange:#C65B16; --orange-dark:#9E4A12; --text:#17212B; --border:#D7E1E8; --border-strong:#B9CAD8; --focus:#0B6E84; --success:#127C70; --error:#B42318; color-scheme:light; } html[data-theme="violet"]{ --bg:#0f0a1e; --surface:#1d1433; --surface2:#322759; --accent:#b79dff; --accent2:#8a3ffc; --btn:#8a3ffc; --btn-hover:#6929c4; --btn-ink:#ffffff; --ink:#f4f1fd; --muted:#b9b3d9; --line:rgba(138,63,255,.32); --navy:#1d1433; --ok:#42be65; --err:#ff8389; --teal:#8a3ffc; --teal-dark:#b79dff; --orange:#ff832b; --orange-dark:#d6772b; --text:#f4f1fd; --border:rgba(138,63,255,.32); --border-strong:rgba(138,63,255,.6); --focus:#b79dff; --success:#42be65; --error:#ff8389; color-scheme:dark; } /* ===== Base commune : tout le site suit les variables ===== */ body{background:var(--bg);color:var(--ink)} h1,h2,h3{color:var(--ink)} /* ===== Accueil : fonds et cartes vitrées par thème ===== */ html[data-theme="blanc"] .bg{background:linear-gradient(180deg,#F6F1E7 0%,#F1EDE2 55%,#F6F1E7 100%)} html[data-theme="blanc"] .bg::before{background:radial-gradient(760px 560px at 14% 10%, rgba(14,116,144,.10), transparent 62%),radial-gradient(680px 520px at 88% 14%, rgba(13,148,136,.10), transparent 62%),radial-gradient(900px 640px at 50% 92%, rgba(14,116,144,.06), transparent 72%)} html[data-theme="blanc"] .glass{background:linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.20));border:1px solid rgba(255,255,255,.62);box-shadow:0 10px 36px rgba(15,23,42,.10), 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(255,255,255,.32) inset} html[data-theme="blanc"] .glass::before{background:linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,0) 48%)} html[data-theme="violet"] .bg{background:radial-gradient(1200px 800px at 15% 10%, rgba(138,63,255,.14), transparent 60%),radial-gradient(1000px 700px at 85% 15%, rgba(105,41,196,.12), transparent 60%),linear-gradient(180deg,#0f0a1e 0%,#150f28 55%,#0f0a1e 100%)} html[data-theme="violet"] .glass{background:linear-gradient(135deg, rgba(80,45,150,0.42), rgba(255,255,255,.05) 45%, rgba(60,30,120,0.32));backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(183,157,255,.35);box-shadow:0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22)} html[data-theme="violet"] .glass::before{background:linear-gradient(180deg, rgba(183,157,255,.16), rgba(183,157,255,0) 32%)} html[data-theme="miel"] .bg{background:radial-gradient(1200px 800px at 15% 10%, rgba(234,179,8,.12), transparent 60%),radial-gradient(1000px 700px at 85% 15%, rgba(180,83,9,.10), transparent 60%),linear-gradient(180deg,#0C0A06 0%,#141005 55%,#0C0A06 100%)} html[data-theme="miel"] .glass{background:linear-gradient(135deg, rgba(120,80,10,0.5), rgba(255,255,255,.05) 45%, rgba(90,60,8,0.4));backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(234,179,8,.4);box-shadow:0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22)} html[data-theme="miel"] .glass::before{background:linear-gradient(180deg, rgba(253,230,138,.18), rgba(253,230,138,0) 32%)} html[data-theme="miel"] .bg{background:radial-gradient(1200px 800px at 12% 6%, rgba(234,179,8,.20), transparent 60%),radial-gradient(1000px 700px at 88% 10%, rgba(180,83,9,.16), transparent 60%),radial-gradient(900px 700px at 50% 105%, rgba(234,179,8,.12), transparent 65%),linear-gradient(180deg,#0C0A06 0%,#141005 55%,#0C0A06 100%)} html[data-theme="miel"] .btn.primary{color:#161616} .badge{background:rgba(127,127,127,.12);color:var(--ink);border:1px solid var(--line)} .sub{color:var(--ink)} .card h2{color:var(--ink)} .card h3{color:var(--ink)} .card h2 span.icon{color:#fff} .btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff} html[data-theme="blanc"] .btn.primary{color:#fff} html[data-theme="violet"] .btn.primary{color:#ffffff} html[data-theme="miel"]{ --bg:#0C0A06; --surface:#161207; --surface2:#3a2c10; --accent:#EAB308; --accent2:#B45309; --btn:#EAB308; --btn-hover:#B45309; --btn-ink:#161616; --ink:#FAF3E3; --muted:#A89C86; --line:rgba(234,179,8,.28); --navy:#161207; --ok:#42be65; --err:#ff8389; --teal:#C9970D; --teal-dark:#EAB308; --orange:#EAB308; --orange-dark:#B45309; --text:#FAF3E3; --border:rgba(234,179,8,.28); --border-strong:rgba(234,179,8,.55); --focus:#EAB308; --success:#42be65; --error:#ff8389; color-scheme:dark; } .btn.glass{background:transparent;color:var(--accent);border:1px solid var(--border-strong,var(--line))} nav.sticky a{color:var(--ink)} nav.sticky a.link:hover{background:rgba(127,127,127,.14)} .pill{background:rgba(127,127,127,.10);color:var(--ink);border:1px solid var(--line)} ul li{color:var(--ink)} footer{border-top:1px solid var(--line)} /* ===== Démos (main .card, .btn, quiz…) : suivent le thème ===== */ main header{background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.18)} main .card{background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.18)} main .btn{background:var(--accent);color:#fff} main .btn.secondary{background:rgba(127,127,127,.12);color:var(--ink);border:1px solid var(--line)} main .choice{background:var(--surface);border-color:var(--line);color:var(--ink)} main .pill{background:var(--surface);border-color:var(--line);color:var(--ink)} main .pill.active{border-color:var(--accent)} main .quiz{background:var(--surface);border-color:var(--line);color:var(--ink)} main .email{background:rgba(127,127,127,.08);border-color:var(--line);color:var(--ink)} main .feedback{background:rgba(127,127,127,.08);border-color:var(--accent);color:var(--ink)} main .progress{background:var(--line)} main .calc input{background:var(--surface);border-color:var(--line);color:var(--ink)} main .niveau{border:1px solid var(--line)} /* bandeaux d'info codés en dur dans les démos */ main [style*="#F0FDF4"]{background:rgba(16,185,129,.12);border-color:var(--ok)} main [style*="#FFFBEB"]{background:rgba(245,158,11,.10);border-color:var(--accent)} main [style*="#EFF6FF"]{background:rgba(56,189,248,.10);border-color:var(--accent)} main [style*="#FEF2F2"]{background:rgba(248,113,113,.10);border-color:var(--err)} main [style*="#F0F9FF"]{background:rgba(56,189,248,.10);border-color:var(--accent)} /* ===== DriveWise : surfaces codées en dur repassées en variables ===== */ .site-header{background:var(--surface);border-bottom:1px solid var(--line)} .brand{color:var(--ink)} .card{background:var(--surface);border-color:var(--line)} .lever-card{background:var(--surface);border-color:var(--line)} .option{background:var(--surface);border-color:var(--line);color:var(--ink)} .option.selected{border-color:var(--accent)} .stop{background:var(--surface);border-color:var(--line)} .dialog{background:var(--surface);border-color:var(--line)} .illus{background:var(--surface);border-color:var(--line)} .btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line)} .close-btn{background:var(--surface);color:var(--ink);border-color:var(--line)} .lang-btn,.ghost-btn{background:var(--surface);color:var(--ink);border-color:var(--line)} .progress-track{background:var(--line)} /* ===== Fiches projets ===== */ div[style*="background:#fff"]{background:var(--surface)} table th,table td{border-color:var(--line)} code{background:rgba(127,127,127,.14);color:var(--ink)} /* ===== Sélecteur flottant (pages sans boutons .theme-btn) ===== */ #tp-switch{position:fixed;right:14px;bottom:14px;z-index:9999;display:flex;gap:6px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 10px;box-shadow:0 8px 24px rgba(0,0,0,.28)} #tp-switch .tp-label{font-size:10px;color:var(--muted);font-weight:800} #tp-switch button.tp-dot{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;padding:0} #tp-switch button.tp-dot[data-theme="dark"]{background:#070A12;border-color:#38BDF8} #tp-switch button.tp-dot[data-theme="light"]{background:#F8FAFC;border-color:#0EA5E9} #tp-switch button.tp-dot[data-theme="violet"]{background:radial-gradient(circle at 32% 30%,#d4bbff,#8a3ffc 55%,#3a2570);border-color:#8a3ffc} #tp-switch button.tp-dot[data-theme="miel"]{background:radial-gradient(circle at 32% 30%,#FDE68A,#EAB308 55%,#B45309);border-color:#EAB308} /* ===== Contraste blanc corrigé : muted blanc 3.8→4.6:1 (WCAG AA) ===== */ html[data-theme="blanc"]{--muted:#5A6A7E} /* ===== Objectifs affichés à l'entrée des démos (LXD) ===== */ .objectifs{border:1px solid var(--line);background:rgba(127,127,127,.08);border-radius:12px;padding:12px;font-size:13px;color:var(--ink)}