/* ============================================================ Figma — Cours interactif (eSBi) Theme « studio » : sombre par defaut, bascule clair. Palette reprise des 5 couleurs de la marque Figma. ATTENTION : les noms de classes sont un CONTRAT avec assets/script.js, qui est identique dans les 13 modules. Ne pas renommer : .module .module-head .module-body .btn-done .ic .lbl .done-flag .caret .check input[data-chk] .progress-bar>span .progress-pct .progress-count .btn-reset .toc a .course-card[data-course] .cc-progress>span .cc-pct .btn-copy figure.shot img .lightbox .topbar .topbar-inner .brand .logo ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap'); /* ---------------------------------------------------------- 1. Les jetons */ :root { /* couleurs de marque Figma — elles ne changent pas avec le theme */ --orange: #F24E1E; --coral: #FF7262; --violet: #A259FF; --blue: #1ABCFE; --mint: #0ACF83; --grad: linear-gradient(135deg, #A259FF 0%, #1ABCFE 100%); --grad-3: linear-gradient(120deg, #F24E1E, #FF7262, #A259FF, #1ABCFE, #0ACF83); --grad-soft: linear-gradient(135deg, rgba(162,89,255,.18), rgba(26,188,254,.14)); /* encre constante : sert aux textes poses sur du blanc (fenetre d'identification injectee par script.js, boutons clairs) */ --ink: #15111C; --radius: 18px; --radius-s: 12px; --maxw: 1200px; --font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --display: "Space Grotesk", "Inter", -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; --t: .22s cubic-bezier(.4, 0, .2, 1); } /* --- theme sombre (par defaut) --- */ :root, :root[data-theme="dark"] { --bg: #08070D; --bg-2: #0E0C16; --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.075); --surface-3: rgba(255,255,255,.11); --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18); --txt: #ECE8F6; --txt-2: #A9A2C0; --txt-3: #6E6786; --accent-txt:#C4A2FF; --glow: 0 0 0 1px rgba(162,89,255,.22), 0 18px 50px -18px rgba(162,89,255,.55); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.8); --aurora-1: rgba(162,89,255,.30); --aurora-2: rgba(26,188,254,.20); --aurora-3: rgba(10,207,131,.14); --code-bg: #0B0A13; --shot-bg: #16131F; color-scheme: dark; } /* --- theme clair (projection en salle, lecture longue) --- */ :root[data-theme="light"] { --bg: #FAF9FE; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #F5F2FD; --surface-3: #ECE6FA; --line: #E8E3F4; --line-2: #D4CCEB; --txt: #15111C; --txt-2: #5B5470; --txt-3: #8B84A3; --accent-txt:#6B28D9; --glow: 0 0 0 1px rgba(162,89,255,.20), 0 18px 44px -20px rgba(162,89,255,.45); --shadow: 0 1px 2px rgba(21,17,28,.05), 0 14px 36px -18px rgba(21,17,28,.22); --aurora-1: rgba(162,89,255,.16); --aurora-2: rgba(26,188,254,.12); --aurora-3: rgba(10,207,131,.10); --code-bg: #15111C; --shot-bg: #F2EFFA; color-scheme: light; } /* ------------------------------------------------------------- 2. La base */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; font-family: var(--font); color: var(--txt); background: var(--bg); line-height: 1.65; font-size: 15.5px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.02em; line-height: 1.15; } a { color: var(--accent-txt); text-decoration: none; transition: color var(--t); } a:hover { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; } img { max-width: 100%; } strong, b { font-weight: 700; color: var(--txt); } code { font-family: var(--mono); font-size: .9em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--accent-txt); } ::selection { background: rgba(162,89,255,.32); color: #fff; } /* --- l'aurore de fond : trois taches lumineuses, tres lentes --- */ body::before { content: ""; position: fixed; inset: -25vh -10vw auto -10vw; height: 130vh; z-index: -2; pointer-events: none; background: radial-gradient(48vw 42vh at 14% 6%, var(--aurora-1), transparent 62%), radial-gradient(44vw 40vh at 88% 18%, var(--aurora-2), transparent 60%), radial-gradient(52vw 46vh at 52% 78%, var(--aurora-3), transparent 64%); filter: blur(18px); animation: derive 28s ease-in-out infinite alternate; } @keyframes derive { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-3%,2%,0) scale(1.06); } 100% { transform: translate3d(2.5%,-2%,0) scale(1.02); } } /* grain discret : casse les bandes des degrades */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } :root[data-theme="light"] body::after { opacity: .1; } /* ------------------------------------------------ 3. Barre de progression de lecture */ .readbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 80; background: var(--grad-3); background-size: 300% 100%; box-shadow: 0 0 14px rgba(162,89,255,.8); transition: width .1s linear; } /* ------------------------------------------------------- 4. Barre du haut */ .topbar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--line); } .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--grad-3); opacity: .55; } .topbar-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 11px 22px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--txt); letter-spacing: -.01em; white-space: nowrap; } .brand:hover { text-decoration: none; color: var(--txt); } .brand .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 6px 18px -6px rgba(162,89,255,.9); transition: transform var(--t); } .brand:hover .logo { transform: rotate(-8deg) scale(1.08); } .topnav { display: flex; gap: 2px; margin-left: auto; } .topnav a { color: var(--txt-2); padding: 7px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background var(--t), color var(--t); } .topnav a:hover { background: var(--surface-2); color: var(--txt); text-decoration: none; } .topnav a.active { color: #fff; background: var(--grad); box-shadow: 0 6px 18px -8px rgba(162,89,255,.95); } /* --- bascule clair / sombre --- */ .theme-toggle { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--txt); display: grid; place-items: center; font-size: 15px; line-height: 1; padding: 0; transition: background var(--t), transform var(--t), border-color var(--t); } .theme-toggle:hover { background: var(--surface-3); transform: translateY(-1px); border-color: var(--violet); } .theme-toggle .sun { display: none; } :root[data-theme="light"] .theme-toggle .sun { display: block; } :root[data-theme="light"] .theme-toggle .moon { display: none; } /* ------------------------------------------------------------ 5. Boutons */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t); font-family: var(--font); } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 30px -12px rgba(162,89,255,.95); } .btn-primary:hover { color: #fff; box-shadow: 0 16px 40px -12px rgba(162,89,255,1); } .btn-ghost { background: var(--surface-2); color: var(--txt); border-color: var(--line-2); } .btn-ghost:hover { background: var(--surface-3); color: var(--txt); border-color: var(--violet); } .btn-white { background: #fff; color: var(--ink); box-shadow: 0 10px 30px -14px rgba(0,0,0,.7); } .btn-white:hover { color: var(--ink); } .btn-line { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); } .btn-line:hover { background: rgba(255,255,255,.14); color: #fff; } /* --------------------------------------------------- 6. Pastilles, touches */ .chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--txt-2); } kbd { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 600; line-height: 1; color: var(--txt); background: var(--surface-2); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 7px; padding: 4px 7px; margin: 0 1px; white-space: nowrap; } .ui { font-weight: 600; color: var(--accent-txt); } .path { font-family: var(--mono); font-size: .9em; color: var(--txt-2); } .path .sep { opacity: .5; margin: 0 2px; } /* ------------------------------------------------------------- 7. Le hero */ .hero-figma { position: relative; overflow: hidden; border-radius: 28px; padding: 56px 48px 48px; margin-bottom: 34px; color: #fff; background: linear-gradient(150deg, #150F24 0%, #26124A 45%, #3A1470 100%); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 40px 90px -50px rgba(162,89,255,.9); } .hero-figma::before { content: ""; position: absolute; inset: -40% -10% auto -10%; height: 160%; background: radial-gradient(40% 44% at 78% 22%, rgba(26,188,254,.55), transparent 62%), radial-gradient(38% 40% at 18% 84%, rgba(10,207,131,.40), transparent 60%), radial-gradient(44% 46% at 44% 10%, rgba(242,78,30,.28), transparent 60%); filter: blur(8px); animation: derive 22s ease-in-out infinite alternate; } .hero-figma::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); opacity: .2; pointer-events: none; } .hero-figma > * { position: relative; z-index: 1; } .hero-figma .kick { display: inline-flex; align-items: center; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 16px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 22px; backdrop-filter: blur(8px); color: #EDE4FF; } .hero-figma h1 { margin: 0 0 16px; font-size: clamp(30px, 4.2vw, 52px); font-weight: 700; letter-spacing: -.035em; } .hero-figma h1 .neon { background: linear-gradient(100deg, #FF7262, #A259FF 38%, #1ABCFE 68%, #0ACF83); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% 100%; animation: flux 9s ease infinite; } @keyframes flux { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero-figma p { margin: 0; color: #CDC2E8; max-width: 60ch; font-size: 16.5px; } .hero-figma .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; } .total { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; } .total div { flex: 1 1 130px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 16px 18px; font-size: 12.5px; color: #B9AEDA; backdrop-filter: blur(10px); transition: transform var(--t), background var(--t); } .total div:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); } .total b { display: block; font-family: var(--display); font-size: 27px; color: #fff; font-weight: 700; letter-spacing: -.02em; margin-bottom: 2px; } /* ------------------------------------------------------- 8. Titres de section */ .section-title { font-size: clamp(21px, 2.4vw, 28px); margin: 52px 0 6px; font-weight: 700; display: flex; align-items: center; gap: 14px; } .section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); } .section-sub { margin: 0 0 22px; color: var(--txt-2); max-width: 74ch; } /* --------------------------------------------------------- 9. Cartes (bento) */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; } .course-card { position: relative; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 24px; color: var(--txt); overflow: hidden; backdrop-filter: blur(12px); transition: transform var(--t), border-color var(--t), box-shadow var(--t); } .course-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad-3); opacity: 0; transition: opacity var(--t); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .course-card:hover { transform: translateY(-6px); text-decoration: none; color: var(--txt); box-shadow: var(--glow); } .course-card:hover::before { opacity: 1; } .course-card .cc-num { width: 52px; height: 52px; border-radius: 15px; background: var(--grad-soft); border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 24px; margin-bottom: 16px; transition: transform var(--t); } .course-card:hover .cc-num { transform: scale(1.08) rotate(-6deg); } .course-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; } .course-card p { margin: 0; color: var(--txt-2); font-size: 14px; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .tag { background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; font-size: 11.5px; font-weight: 500; color: var(--txt-3); } .cc-progress { height: 5px; border-radius: 99px; background: var(--surface-3); margin-top: 16px; overflow: hidden; } .cc-progress > span { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 99px; transition: width .6s cubic-bezier(.4,0,.2,1); } .t-sub { font-size: 12.5px; color: var(--txt-3); } .course-card .cc-pct { color: var(--accent-txt); } /* ------------------------------------------------------ 10. Les 4 livrables */ .livrables { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; margin: 22px 0 30px; } .livrable-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px 20px; overflow: hidden; transition: transform var(--t), box-shadow var(--t); } .livrable-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-3); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.4,0,.2,1); } .livrable-card:hover { transform: translateY(-5px); box-shadow: var(--glow); } .livrable-card:hover::after { transform: scaleX(1); } .livrable-card .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--grad); color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px; margin-bottom: 12px; box-shadow: 0 8px 20px -10px rgba(162,89,255,.95); } .livrable-card h4 { margin: 0 0 3px; font-size: 16px; font-weight: 600; } .livrable-card .dim { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent-txt); } .livrable-card p { margin: 8px 0 0; font-size: 13.5px; color: var(--txt-2); } /* ------------------------------------------------------ 11. Mise en page cours */ .layout { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 272px 1fr; gap: 40px; padding: 32px 22px 90px; } .sidebar { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; } .sidebar h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--txt-3); margin: 0 0 12px 6px; font-family: var(--font); font-weight: 700; } .toc { list-style: none; margin: 0; padding: 0; } .toc li { margin: 2px 0; } .toc a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px; color: var(--txt-2); font-size: 14px; font-weight: 500; transition: all var(--t); } .toc a:hover { background: var(--surface-2); color: var(--txt); text-decoration: none; } .toc a.active { background: var(--grad-soft); color: var(--txt); box-shadow: inset 2px 0 0 var(--violet); } .toc .num { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--surface-3); color: var(--txt-2); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; transition: all var(--t); } .toc a.done .num { background: var(--mint); color: #04241D; } .toc a.done .num::after { content: "✓"; } .toc a.done .num span { display: none; } .content { min-width: 0; } /* ------------------------------------------------------- 12. En-tete de page */ .page-head { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 34px 34px 30px; margin-bottom: 24px; overflow: hidden; backdrop-filter: blur(12px); } .page-head::before { content: ""; position: absolute; right: -60px; top: -90px; width: 320px; height: 320px; border-radius: 50%; background: var(--grad-soft); filter: blur(30px); } .page-head > * { position: relative; } .kicker { display: inline-block; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--accent-txt); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 13px; border-radius: 999px; margin-bottom: 14px; } .page-head h1 { margin: 0 0 10px; font-size: clamp(24px, 3.2vw, 36px); font-weight: 700; } .page-head p { margin: 0; color: var(--txt-2); max-width: 68ch; } .meta-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; } /* --------------------------------------------------- 13. Barre de progression */ .progress-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 22px; margin-bottom: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; backdrop-filter: blur(12px); } .progress-wrap .label { font-weight: 600; font-size: 13.5px; color: var(--txt-2); } .progress-bar { flex: 1; min-width: 170px; height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; } .progress-bar > span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--grad-3); background-size: 250% 100%; animation: flux 6s ease infinite; transition: width .6s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 14px rgba(162,89,255,.7); } .progress-pct { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--accent-txt); min-width: 46px; } .btn-reset { background: transparent; border: 1px solid var(--line-2); color: var(--txt-3); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; cursor: pointer; font-family: var(--font); transition: all var(--t); } .btn-reset:hover { color: var(--txt); border-color: var(--coral); } /* -------------------------------------------------------- 14. Les modules */ .module { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; backdrop-filter: blur(12px); transition: border-color var(--t), box-shadow var(--t); } .module:hover { border-color: var(--line-2); } .module.open { border-color: rgba(162,89,255,.38); box-shadow: var(--glow); } .module.completed { border-color: rgba(10,207,131,.38); } .module-head { display: flex; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; user-select: none; } .module-head h2 { margin: 0; font-size: 18px; font-weight: 600; } .module-head .obj { font-size: 13px; color: var(--txt-3); } .module-badge { flex: 0 0 40px; height: 40px; border-radius: 13px; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--txt-2); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 16px; transition: all var(--t); } .module.open .module-badge { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 22px -10px rgba(162,89,255,.95); } .module.completed .module-badge { background: var(--mint); color: #04241D; border-color: transparent; } .done-flag { display: none; font-size: 11.5px; font-weight: 700; color: var(--mint); background: rgba(10,207,131,.12); border: 1px solid rgba(10,207,131,.3); border-radius: 999px; padding: 4px 11px; } .module.completed .done-flag { display: inline-block; } .caret { color: var(--txt-3); font-size: 22px; transition: transform var(--t); line-height: 1; } .module.open .caret { transform: rotate(90deg); color: var(--violet); } .module-body { display: none; padding: 0 24px 24px; } .module.open .module-body { display: block; animation: deplie .3s cubic-bezier(.4,0,.2,1); } @keyframes deplie { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .module-body > p { color: var(--txt-2); } .module-done-row { margin-top: 20px; } .btn-done { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--txt-2); font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font); transition: all var(--t); } .btn-done:hover { border-color: var(--mint); color: var(--txt); } .btn-done .ic { font-size: 15px; } .btn-done.is-done { background: rgba(10,207,131,.14); border-color: var(--mint); color: var(--mint); } /* ------------------------------------------------- 15. Taches et cases a cocher */ .task { background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 14px; padding: 18px 20px; margin: 20px 0; } .task-title { font-weight: 700; font-size: 13.5px; margin-bottom: 10px; color: var(--accent-txt); font-family: var(--display); } .check { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; cursor: pointer; font-size: 14.5px; color: var(--txt-2); transition: color var(--t); } .check:hover { color: var(--txt); } .check input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; border-radius: 7px; border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; position: relative; transition: all var(--t); } .check input:hover { border-color: var(--violet); } .check input:checked { background: var(--grad); border-color: transparent; box-shadow: 0 4px 14px -6px rgba(162,89,255,.95); } .check input:checked::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; animation: pop .3s cubic-bezier(.34,1.56,.64,1); } @keyframes pop { 0% { transform: scale(0); } 100% { transform: scale(1); } } .check input:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; } .check input:checked + span { color: var(--txt-3); text-decoration: line-through; text-decoration-color: var(--line-2); } /* ---------------------------------------------------------- 16. Les etapes */ .steps { counter-reset: step; list-style: none; padding: 0; margin: 20px 0; } .steps > li { counter-increment: step; position: relative; padding: 2px 0 20px 46px; color: var(--txt-2); } .steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--accent-txt); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 13px; } .steps > li::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 1px; background: var(--line); } .steps > li:last-child { padding-bottom: 0; } .steps > li:last-child::after { display: none; } /* ------------------------------------------- 16 bis. Le point d'arbitrage Marque un CHOIX, pas un geste. Le pas-a-pas dit comment faire ; l'arbitrage dit comment decider — et c'est la que l'intervenant sert. */ .arbitrage { position: relative; margin: 20px 0; padding: 16px 20px 16px 54px; border-radius: 14px; border: 1px solid rgba(254,188,46,.34); background: color-mix(in srgb, #FEBC2E 8%, var(--surface)); font-size: 14.5px; color: var(--txt-2); } .arbitrage::before { content: "\1F914"; position: absolute; left: 18px; top: 14px; font-size: 18px; } .arbitrage .titre { display: block; font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: #FEBC2E; margin-bottom: 6px; } .arbitrage b { color: var(--txt); } .arbitrage .regle { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(254,188,46,.24); font-size: 13.5px; } .arbitrage .regle b { color: #FEBC2E; } /* ------------------------------------------------------------ 17. Encadres */ .callout { position: relative; border-radius: 14px; padding: 15px 18px 15px 50px; margin: 18px 0; font-size: 14.5px; border: 1px solid var(--line); background: var(--surface-2); color: var(--txt-2); } .callout::before { position: absolute; left: 17px; top: 14px; font-size: 17px; } .callout::after { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; } .callout p:first-child { margin-top: 0; } .callout p:last-child { margin-bottom: 0; } .callout strong { color: var(--txt); } .callout.info::before { content: "ℹ️"; } .callout.info::after { background: var(--blue); } .callout.warn::before { content: "⚠️"; } .callout.warn::after { background: var(--orange); } .callout.warn { background: color-mix(in srgb, var(--orange) 8%, var(--surface-2)); } .callout.tip::before { content: "💡"; } .callout.tip::after { background: var(--coral); } .callout.goal::before { content: "🎯"; } .callout.goal::after { background: var(--mint); } .callout.goal { background: color-mix(in srgb, var(--mint) 8%, var(--surface-2)); } .callout.fg::before { content: "◆"; color: var(--violet); } .callout.fg::after { background: var(--violet); } .callout.fg { background: color-mix(in srgb, var(--violet) 9%, var(--surface-2)); } /* -------------------------------------------------------------- 18. Tableaux */ table.demo, table.formats { width: 100%; border-collapse: separate; border-spacing: 0; margin: 20px 0; font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } table.demo th, table.formats th { background: var(--surface-3); color: var(--txt); text-align: left; padding: 12px 14px; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--line); } table.demo td, table.formats td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--txt-2); vertical-align: top; } table.demo tr:last-child td, table.formats tr:last-child td { border-bottom: 0; } table.demo tr:hover td, table.formats tr:hover td { background: var(--surface-2); } table.demo td strong { color: var(--txt); } table.formats td.px { font-family: var(--mono); font-weight: 600; color: var(--accent-txt); white-space: nowrap; } table.formats .reseau { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--txt); } table.formats .puce { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; box-shadow: 0 0 10px currentColor; } .ratio-chip { display: inline-block; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--accent-txt); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; font-family: var(--mono); } /* ------------------------------------------------------------ 19. Blocs de code */ .code { position: relative; background: var(--code-bg); border: 1px solid var(--line-2); border-radius: 14px; margin: 18px 0; overflow: hidden; } .code .code-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); font-size: 11.5px; font-weight: 600; color: #9C93B8; letter-spacing: .06em; } .code pre { margin: 0; padding: 16px 18px; overflow-x: auto; } .code code { font-family: var(--mono); font-size: 13px; line-height: 1.7; white-space: pre; color: #DCD5F0; background: none; border: 0; padding: 0; } .code .kw { color: #A259FF; font-weight: 600; } .btn-copy { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #CFC7E6; border-radius: 7px; padding: 3px 10px; font-size: 11.5px; cursor: pointer; font-family: var(--font); transition: all var(--t); } .btn-copy:hover { background: rgba(162,89,255,.3); color: #fff; } .btn-copy.ok { background: var(--mint); color: #04241D; border-color: transparent; } /* ---------------------------------------- 20. Captures : cadre de navigateur */ figure.shot { margin: 22px 0; background: var(--shot-bg); border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); transition: transform var(--t), box-shadow var(--t); } figure.shot:hover { transform: translateY(-3px); box-shadow: var(--glow); } figure.shot .chrome { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); } figure.shot .chrome i { width: 10px; height: 10px; border-radius: 50%; display: block; } figure.shot .chrome i:nth-child(1) { background: #FF5F57; } figure.shot .chrome i:nth-child(2) { background: #FEBC2E; } figure.shot .chrome i:nth-child(3) { background: #28C840; } figure.shot .chrome span { margin-left: 10px; font-size: 11.5px; color: var(--txt-3); font-family: var(--mono); } figure.shot img { display: block; width: 100%; height: auto; background: #fff; cursor: zoom-in; } figure.shot figcaption { padding: 13px 18px; font-size: 13.5px; color: var(--txt-2); border-top: 1px solid var(--line); background: var(--surface); } figure.shot figcaption b { color: var(--txt); } ol.legende { list-style: none; counter-reset: leg; margin: 16px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px 20px; } ol.legende li { counter-increment: leg; position: relative; padding-left: 34px; font-size: 14px; color: var(--txt-2); } ol.legende li::before { content: counter(leg); position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; } ol.legende li b { color: var(--txt); } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6,4,12,.94); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; padding: 34px; cursor: zoom-out; } .lightbox.open { display: flex; animation: fondu .2s ease; } @keyframes fondu { from { opacity: 0; } to { opacity: 1; } } .lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 12px; box-shadow: 0 30px 90px rgba(0,0,0,.8); background: #fff; } .lightbox .close { position: absolute; top: 20px; right: 28px; color: #fff; font-size: 36px; font-weight: 300; cursor: pointer; line-height: 1; } /* --------------------------------------------------- 21. Blocs pedagogiques */ .ratios { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; margin: 22px 0; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; } .ratios figure { margin: 0; text-align: center; } .ratios .boite { border-radius: 10px; background: var(--grad); box-shadow: 0 10px 30px -14px rgba(162,89,255,.95); transition: transform var(--t); } .ratios figure:hover .boite { transform: translateY(-6px) scale(1.03); } .ratios figcaption { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--txt); font-family: var(--mono); } .ratios figcaption span { display: block; font-weight: 400; color: var(--txt-3); font-size: 11px; font-family: var(--font); } .planning { display: grid; gap: 14px; margin: 22px 0 30px; } .jour { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; overflow: hidden; transition: transform var(--t), box-shadow var(--t); } .jour::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad-3); } .jour:hover { transform: translateX(4px); box-shadow: var(--glow); } .jour .j { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .jour .j span { display: block; font-size: 11px; font-weight: 600; color: var(--txt-3); text-transform: uppercase; letter-spacing: .1em; margin-top: 6px; -webkit-text-fill-color: var(--txt-3); } .jour h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; } .jour p { margin: 0 0 12px; font-size: 14px; color: var(--txt-2); } .jour .livrable { display: inline-flex; align-items: center; gap: 8px; background: rgba(10,207,131,.12); border: 1px solid rgba(10,207,131,.32); color: var(--mint); border-radius: 999px; padding: 5px 14px; font-size: 12.5px; font-weight: 600; } .avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; } .avant-apres > div { border-radius: 14px; padding: 18px 20px; font-size: 14px; border: 1px solid; } .avant-apres .non { background: color-mix(in srgb, var(--orange) 10%, var(--surface)); border-color: color-mix(in srgb, var(--orange) 34%, transparent); color: var(--txt-2); } .avant-apres .oui { background: color-mix(in srgb, var(--mint) 10%, var(--surface)); border-color: color-mix(in srgb, var(--mint) 34%, transparent); color: var(--txt-2); } .avant-apres h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font); } .avant-apres .non h4 { color: var(--coral); } .avant-apres .oui h4 { color: var(--mint); } .nuancier { display: flex; flex-wrap: wrap; gap: 14px; margin: 20px 0; } .nuance { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; width: 146px; background: var(--surface); transition: transform var(--t), box-shadow var(--t); } .nuance:hover { transform: translateY(-5px); box-shadow: var(--glow); } .nuance .aplat { height: 64px; } .nuance .txt { padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--txt-3); } .nuance .txt b { display: block; font-size: 13px; color: var(--txt); } .nuance .txt code { font-family: var(--mono); color: var(--accent-txt); background: none; border: 0; padding: 0; font-size: 11.5px; } .data-badge { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--violet); border-radius: 10px; padding: 11px 16px; margin: 0 0 16px; font-size: 14px; color: var(--txt-2); } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(246px, 1fr)); gap: 12px; } .tile { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 18px; color: var(--txt); transition: all var(--t); } .tile:hover { border-color: var(--violet); transform: translateY(-3px); text-decoration: none; box-shadow: var(--glow); } .tile .ico { font-size: 21px; flex: 0 0 auto; } .tile .t-name { font-weight: 600; font-size: 14px; } /* ------------------------------------------------------------ 22. Exercices */ .exo { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; margin-bottom: 20px; backdrop-filter: blur(12px); transition: border-color var(--t), box-shadow var(--t); } .exo:hover { border-color: var(--line-2); } .exo h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; } .exo p { color: var(--txt-2); } .exo .lvl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--txt-3); } .sec-h { margin: 44px 0 8px; font-size: 21px; display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; } .sec-h .pill { background: var(--grad); color: #fff; font-size: 16px; border-radius: 11px; padding: 5px 12px; box-shadow: 0 8px 22px -10px rgba(162,89,255,.95); } details.solution { margin-top: 16px; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 12px; padding: 12px 16px; } details.solution > summary { font-weight: 600; cursor: pointer; color: var(--accent-txt); font-size: 14px; list-style: none; display: flex; align-items: center; gap: 8px; } details.solution > summary::-webkit-details-marker { display: none; } details.solution > summary::before { content: "▸"; transition: transform var(--t); } details.solution[open] > summary::before { transform: rotate(90deg); } details.solution[open] { padding-bottom: 16px; } details.solution .sol-body { margin-top: 12px; font-size: 14.5px; color: var(--txt-2); } .sol-body ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 7px; } .sol-body ol li::marker { color: var(--accent-txt); font-weight: 700; } .sol-body .verif { display: block; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--txt-3); } .sol-body .verif b { color: var(--mint); } .analyse { margin-top: 12px; border-left: 3px solid var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--surface)); border-radius: 10px; padding: 12px 16px; font-size: 14px; color: var(--txt-2); } .analyse b { color: var(--blue); } .exo.mission { border-color: rgba(162,89,255,.34); background: linear-gradient(160deg, color-mix(in srgb, var(--violet) 10%, var(--surface)), var(--surface)); } .exo.mission .lvl { color: var(--accent-txt); } /* ---------------------------------------------------------------- 23. QCM */ .quiz-wrap { max-width: 880px; margin: 0 auto; } .q-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 16px; backdrop-filter: blur(12px); transition: border-color var(--t); } .q-card .q-num { font-size: 11px; font-weight: 700; color: var(--txt-3); letter-spacing: .12em; text-transform: uppercase; } .q-card .q-text { font-weight: 600; font-size: 16.5px; margin: 8px 0 16px; font-family: var(--display); } .opt { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 9px 0; cursor: pointer; background: var(--surface-2); transition: all var(--t); } .opt:hover { background: var(--surface-3); border-color: var(--line-2); transform: translateX(3px); } .opt input { appearance: none; -webkit-appearance: none; margin-top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); flex: 0 0 auto; position: relative; cursor: pointer; transition: all var(--t); } .opt input:checked { border-color: var(--violet); } .opt input:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--grad); animation: pop .25s cubic-bezier(.34,1.56,.64,1); } .opt .opt-txt { font-size: 14.5px; color: var(--txt-2); } .opt.correct { background: color-mix(in srgb, var(--mint) 13%, var(--surface)); border-color: color-mix(in srgb, var(--mint) 45%, transparent); } .opt.wrong { background: color-mix(in srgb, var(--orange) 13%, var(--surface)); border-color: color-mix(in srgb, var(--orange) 45%, transparent); } .opt .mark { margin-left: auto; font-weight: 800; display: none; } .opt.correct .mark { display: inline; color: var(--mint); } .opt.wrong .mark { display: inline; color: var(--coral); } .explain { display: none; margin-top: 12px; font-size: 13.5px; padding: 12px 16px; border-radius: 10px; background: color-mix(in srgb, var(--blue) 9%, var(--surface)); border-left: 3px solid var(--blue); color: var(--txt-2); } .explain.show { display: block; animation: deplie .25s ease; } .q-card.graded .opt { cursor: default; transform: none; } .q-card.graded .opt:hover { transform: none; } .scorebar { position: sticky; bottom: 0; z-index: 30; margin-top: 14px; background: color-mix(in srgb, var(--bg-2) 96%, transparent); backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 18px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: 0 -10px 40px -18px rgba(0,0,0,.7); } .scorebar .big { font-family: var(--display); font-size: 23px; font-weight: 700; color: var(--txt); } .result-banner { display: none; border-radius: var(--radius); padding: 24px 28px; margin-bottom: 18px; font-size: 16px; border: 1px solid; } .result-banner.show { display: block; animation: deplie .35s cubic-bezier(.34,1.3,.64,1); } .result-banner.pass { background: color-mix(in srgb, var(--mint) 12%, var(--surface)); border-color: color-mix(in srgb, var(--mint) 42%, transparent); color: var(--txt); } .result-banner.fail { background: color-mix(in srgb, var(--orange) 12%, var(--surface)); border-color: color-mix(in srgb, var(--orange) 42%, transparent); color: var(--txt); } /* ------------------------------------------------------ 24. Pagination, pied */ .pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; flex-wrap: wrap; } .pager a { flex: 1; min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; transition: all var(--t); } .pager a:hover { border-color: var(--violet); text-decoration: none; transform: translateY(-3px); box-shadow: var(--glow); } .pager .dir { font-size: 11.5px; font-weight: 700; color: var(--txt-3); text-transform: uppercase; letter-spacing: .1em; } .pager .ttl { font-weight: 600; color: var(--txt); font-family: var(--display); } .pager a.next { text-align: right; } footer.site { border-top: 1px solid var(--line); padding: 30px 22px; text-align: center; color: var(--txt-3); font-size: 13px; margin-top: 40px; } /* ----------------------------------- 25. La fenetre d'identification (script.js) */ /* script.js injecte sa propre feuille avec un fond blanc : on force une encre sombre, sinon le texte devient invisible en theme sombre. */ .skolae-modal .skolae-box { color: var(--ink) !important; } .skolae-modal .skolae-box input { color: var(--ink) !important; background: #fff !important; } /* script.js ecrit la pastille en blanc sur blanc : illisible en theme clair. Sa feuille est injectee APRES la notre, on passe donc par .topbar pour gagner en specificite. */ .topbar .skolae-idchip { background: var(--surface-2); color: var(--txt); border-color: var(--line-2); font-family: var(--font); } .topbar .skolae-idchip:hover { background: var(--surface-3); } /* Meme cas pour le lien de retour que scripts/05 injecte dans la copie commerciale : il est ecrit en blanc, donc invisible sur barre claire. La regle du script est ajoutee en fin de fichier, on passe donc par .topbar pour rester plus specifique. */ .topbar .retour-esbi { color: var(--txt); border-color: var(--line-2); background: var(--surface-2); opacity: 1; } .topbar .retour-esbi:hover { background: var(--surface-3); } /* ------------------------------------------- 26. Apparition au defilement */ [data-reveal] { opacity: 0; transform: translateY(22px); } [data-reveal].vu { opacity: 1; transform: none; transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1); } /* A l'impression, rien ne doit dependre du defilement. */ @media print { [data-reveal] { opacity: 1 !important; transform: none !important; } body::before, body::after, .readbar, .theme-toggle { display: none !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } } /* --------------------------------------------------------- 27. Responsive */ @media (max-width: 1080px) { .topnav a { padding: 6px 9px; font-size: 13px; } .brand { font-size: 14px; } } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; gap: 20px; padding: 20px 16px 70px; } .sidebar { position: static; max-height: none; order: -1; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; } .hero-figma { padding: 36px 24px 32px; border-radius: 22px; } .avant-apres { grid-template-columns: 1fr; } } @media (max-width: 640px) { html { scroll-padding-top: 76px; } body { font-size: 15px; } .topbar-inner { padding: 9px 12px; gap: 10px; flex-wrap: nowrap; } .brand span:not(.logo) { display: none; } .topnav { gap: 2px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: calc(100vw - 130px); scrollbar-width: none; } .topnav::-webkit-scrollbar { display: none; } main[style] { padding-left: 14px !important; padding-right: 14px !important; } .page-head { padding: 22px 18px; border-radius: 18px; } .module-head { padding: 16px 16px; gap: 12px; } .module-head .done-flag { display: none !important; } .module-body { padding: 0 16px 20px; } .exo { padding: 20px 18px; } .q-card { padding: 18px 18px; } .cards, .livrables, .tiles { grid-template-columns: 1fr; } .jour { grid-template-columns: 1fr; gap: 8px; padding: 18px 18px; } .hero-figma .cta { flex-direction: column; } .hero-figma .btn { width: 100%; justify-content: center; } .total div { flex-basis: calc(50% - 7px); } table.demo, table.formats { display: block; overflow-x: auto; white-space: nowrap; } ol.legende { grid-template-columns: 1fr; } .pager { flex-direction: column; } .pager a, .pager a.next { text-align: left; min-width: 0; } .scorebar { padding: 14px 16px; border-radius: 16px 16px 0 0; } .scorebar .big { font-size: 19px; } } /* ============================================================ 28. Les ateliers interactifs (pilotes par assets/effets.js) ============================================================ */ .labo { position: relative; margin: 24px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; backdrop-filter: blur(12px); } .labo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-3); } .labo-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .labo-head h4 { margin: 0; font-size: 15.5px; font-weight: 600; } .labo-head .tagline { font-size: 12.5px; color: var(--txt-3); } .labo-head .live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); } .labo-head .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: pulse 1.8s ease infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } } .labo-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 22px 0; } .labo-tab { background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-2); border-radius: 999px; padding: 7px 15px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font); display: inline-flex; align-items: center; gap: 8px; transition: all var(--t); } .labo-tab:hover { border-color: var(--line-2); color: var(--txt); transform: translateY(-2px); } .labo-tab[aria-selected="true"] { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 22px -10px rgba(162,89,255,.95); } .labo-tab .puce { width: 9px; height: 9px; border-radius: 3px; } .labo-tab[aria-selected="true"] .puce { background: #fff !important; } /* --- l'atelier des formats --- */ .labo-scene { display: grid; grid-template-columns: 1fr 270px; gap: 26px; padding: 24px 22px 26px; align-items: center; } .scene-boite { display: grid; place-items: center; min-height: 340px; background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 22px 22px, var(--surface-2); border-radius: 16px; padding: 22px; } .apercu { position: relative; border-radius: 10px; background: var(--grad); box-shadow: 0 22px 50px -22px rgba(162,89,255,1); overflow: hidden; transition: width .55s cubic-bezier(.34,1.2,.64,1), height .55s cubic-bezier(.34,1.2,.64,1); } .apercu .etiquette { position: absolute; inset: auto 0 0 0; padding: 8px 10px; font-size: 11px; font-family: var(--mono); font-weight: 600; color: #fff; background: rgba(8,7,13,.45); backdrop-filter: blur(6px); text-align: center; } .apercu .zs { position: absolute; left: 0; right: 0; background: repeating-linear-gradient( 45deg, rgba(242,78,30,.55) 0 8px, rgba(242,78,30,.25) 8px 16px); opacity: 0; transition: opacity .35s ease; } .apercu.avec-zs .zs { opacity: 1; } /* la cote de dimension passerait sous la bande basse : on l'efface alors */ .apercu.avec-zs .etiquette { display: none; } .apercu .zs.haut { top: 0; } .apercu .zs.bas { bottom: 0; } .apercu .zs b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); font-family: var(--font); } .labo-infos { display: grid; gap: 10px; } .labo-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; padding: 13px 16px; } .labo-stat .k { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); } .labo-stat .v { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--txt); margin-top: 3px; } .labo-stat .v.accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .labo-stat .n { font-size: 12.5px; color: var(--txt-2); margin-top: 4px; line-height: 1.5; } /* --- l'atelier de contraste --- */ .contraste { padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } .contraste-champs { display: grid; gap: 14px; } .champ-couleur { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; padding: 11px 14px; } .champ-couleur label { font-size: 12.5px; font-weight: 600; color: var(--txt-2); flex: 1; } .champ-couleur input[type="color"] { width: 42px; height: 32px; border: 1px solid var(--line-2); border-radius: 9px; background: none; cursor: pointer; padding: 2px; } .champ-couleur .hex { font-family: var(--mono); font-size: 12.5px; color: var(--accent-txt); min-width: 64px; text-align: right; } .contraste-apercu { border-radius: 16px; padding: 26px 24px; min-height: 168px; display: grid; align-content: center; gap: 8px; border: 1px solid var(--line-2); } .contraste-apercu .gros { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1.15; } .contraste-apercu .petit { font-size: 14px; } .contraste-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; } .contraste-note .ratio { font-family: var(--display); font-size: 32px; font-weight: 700; color: var(--txt); line-height: 1; } .contraste-note .ratio small { font-size: 14px; color: var(--txt-3); font-weight: 500; } .verdict { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; border: 1px solid; } .verdict.ok { background: rgba(10,207,131,.14); border-color: rgba(10,207,131,.4); color: var(--mint); } .verdict.moy { background: rgba(254,188,46,.14); border-color: rgba(254,188,46,.4); color: #FEBC2E; } .verdict.ko { background: rgba(242,78,30,.14); border-color: rgba(242,78,30,.4); color: var(--coral); } .contraste-note .aide { font-size: 12.5px; color: var(--txt-3); flex: 1; min-width: 190px; } /* --- la salve de confettis du QCM reussi --- */ .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 150; overflow: hidden; } .confetti i { position: absolute; width: 9px; height: 15px; border-radius: 2px; animation: tombe linear forwards; } @keyframes tombe { 0% { transform: translateY(-12vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(105vh) rotate(760deg); opacity: 0; } } @media (max-width: 820px) { .labo-scene { grid-template-columns: 1fr; gap: 18px; } .scene-boite { min-height: 270px; } .contraste { grid-template-columns: 1fr; } } /* ============================================================ Contraste (27/09/2026, audit-contraste.js) : QCM au moteur a tirage. --txt-3 remonte a 4,5:1 minimum dans les deux themes (numeros de question, formats, indices, pied de page) ; --ok-txt / --ko-txt sont les couleurs du juste et du faux que lit exos.css (sans elles, il retombait sur des valeurs prevues pour le theme sombre). ============================================================ */ :root, :root[data-theme="dark"] { --txt-3: #9A94B0; --ok-txt: #5EE0A0; --ko-txt: #FF8A7A; } :root[data-theme="light"] { --txt-3: #665F80; --ok-txt: #0A6E4A; --ko-txt: #B42318; } .opt.correct .mark { color: var(--ok-txt); } .opt.wrong .mark { color: var(--ko-txt); } #scoreSub { color: var(--txt-2); } /* Texte blanc sur le degrade de marque : le bleu #1ABCFE ne donnait que 2,2:1. Les elements qui portent du texte prennent un degrade fonce (5:1 au pire), les decors gardent --grad. */ :root { --grad-texte: linear-gradient(135deg, #8A3FFC 0%, #0A76AD 100%); } .brand .logo, .topnav a.active, .btn-primary, .sec-h .pill { background: var(--grad-texte); } /* ========================================================================= MENU DU HAUT -- meme regle que les autres cours (scripts/theme/theme-pont.css, LE BANDEAU DU HAUT), posee sur Figma le 08/10/2026 : avec 9 liens, la barre d'une seule rangee debordait de l'ecran sous 900 px (QCM, Exercices et Export hors champ, defilement horizontal de la page entiere). au-dessus de 700 px la navigation prend sa propre rangee, pleine largeur ; en dessous un bouton (effets.js) la replie. Couleurs : jetons de Figma, lisibles en clair comme en sombre. ========================================================================= */ .topbar-inner { flex-wrap: wrap; row-gap: 8px; column-gap: 12px; } .topbar-inner .brand { flex: 1 1 auto; min-width: 0; } .topbar-inner .brand .logo { flex-shrink: 0; } .topbar-inner .skolae-idchip, .topbar-inner .theme-toggle { order: 2; flex: 0 0 auto; } .topnav { order: 3; flex: 1 0 100%; margin-left: 0; max-width: none; overflow: visible; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; } .topnav a { white-space: nowrap; } .nav-burger { display: none; } @media (max-width: 700px) { .topbar-inner { flex-wrap: nowrap; row-gap: 0; } .topbar-inner .brand .brand-nom { display: inline-block; vertical-align: middle; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-sous { display: none; } .nav-burger { display: inline-flex; align-items: center; gap: 8px; order: 2; margin-left: auto; padding: 7px 12px; border-radius: 10px; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--txt); font: inherit; font-size: 13px; font-weight: 600; } .nav-burger-ic { width: 16px; height: 2px; background: currentColor; border-radius: 2px; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; } .nav-burger-txt { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topnav { display: none; } .topbar.nav-ouvert .topbar-inner { flex-wrap: wrap; row-gap: 4px; } .topbar.nav-ouvert .topnav { display: flex; flex-direction: column; order: 3; flex: 1 0 100%; width: 100%; gap: 2px; padding: 8px 0 4px; overflow: visible; } .topbar.nav-ouvert .topnav a { padding: 11px 12px; font-size: 15px; border-radius: 8px; } } @media (max-width: 420px) { .nav-burger-txt { display: none; } .nav-burger { padding: 8px 11px; } .topbar-inner .brand .brand-nom { max-width: 52vw; } } /* La barre fait deux rangees : une ancre visee ne doit pas passer dessous. */ html { scroll-padding-top: 112px; } @media (max-width: 700px) { html { scroll-padding-top: 64px; } } /* --- La demarcation des groupes (08/10/2026) -------------------------------- Le menu est classe en trois groupes : Decouvrir | Apprendre | S'evaluer. effets.js insere un