/* labo-theme.css — the ONE hosted stylesheet of the 9e labs (built by tools/mcg-header/build-theme.py, version 2026-10-10). */ /* 1. fonts */ @import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Newsreader:opsz,wght@6..72,500;6..72,600&family=Caveat:wght@700&display=swap"); /* 2. tokens */ html.rn-pkg,html.rn-ra{--paper:#F5EFE4;--sheet:#FFFDF8;--ink:#1A1C1E;--soft:#454A50;--forest:#2D5C45;--navy:#1E3250;--line:#DDD3C2;--wash:#E8EFE9;--rust:#9A4A2A;--rustwash:#F6E7DF;} :root{--rn-paper:#F5EFE4;--rn-sheet:#FFFDF8;--rn-ink:#1A1C1E;--rn-soft:#454A50;--rn-forest:#2D5C45;--rn-forest-dk:#234836;--rn-navy:#1E3250;--rn-line:#DDD3C2;--rn-wash:#E8EFE9;--rn-rust:#9A4A2A;--rn-peach:#F6E6D8;--rn-side:#EFE7D8;--rn-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;--rn-title:"Newsreader",Georgia,serif;--rn-col:48rem;--rn-tear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 18' preserveAspectRatio='none'%3E%3Cpath d='M0 0H640V9C618 7 603 13 579 11S541 4 517 8 482 15 455 12 421 5 396 9 360 14 333 10 296 4 270 8 236 15 207 12 172 6 147 9 115 14 88 11 52 5 29 8 9 12 0 9Z'/%3E%3C/svg%3E");--rn-wob:16px 13px 17px 12px / 13px 17px 12px 16px;--rn-wob-sm:9px 7px 10px 8px / 8px 10px 7px 9px} /* 3. packages (html.rn-pkg): the exercises' page, cards, buttons, chips, player, depth */ :where(html.rn-pkg) *{box-sizing:border-box} :where(html.rn-pkg){-webkit-text-size-adjust:100%} :where(html.rn-pkg) body{margin:0;padding:0 14px 28px;background:var(--paper);color:var(--ink); font:19px/1.7 'Atkinson Hyperlegible',Verdana,Tahoma,system-ui,sans-serif;letter-spacing:.01em;word-spacing:.04em} :where(html.rn-pkg) main{max-width:760px;margin:0 auto} :where(html.rn-pkg) h1{font:600 28px/1.2 Newsreader,Georgia,'Times New Roman',serif;color:var(--ink);margin:0 0 8px} :where(html.rn-pkg) h2{font:600 23px/1.25 Newsreader,Georgia,'Times New Roman',serif;color:var(--ink);margin:30px 0 12px} :where(html.rn-pkg) .sub{color:var(--soft);font-size:18px;margin:0 0 18px;line-height:1.6} :where(html.rn-pkg) .card{background:var(--sheet);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px} :where(html.rn-pkg) .player{background:var(--sheet);border:2px solid var(--forest);border-radius:14px; padding:12px 14px;margin:0 0 22px;position:sticky;top:0;z-index:5} :where(html.rn-pkg) audio{width:100%;height:48px} :where(html.rn-pkg) .hint{font-size:17px;color:var(--soft);margin:8px 0 0;line-height:1.55} :where(html.rn-pkg) .cloze{background:var(--sheet);border:1.5px solid var(--line);border-radius:14px; padding:16px 18px;line-height:2.9;font-size:19px} :where(html.rn-pkg) .cloze p{margin:0 0 6px} :where(html.rn-pkg) .cloze{line-height:2.7} :where(html.rn-pkg) input.gap{font:inherit;font-size:19px;line-height:1.3;padding:6px 10px;margin:0 2px; width:var(--w,auto);min-width:calc(6ch + 24px);max-width:100%;height:auto;min-height:0; background:#fff;color:var(--ink);border:2px solid #B9AE99;border-radius:9px; text-align:center;vertical-align:baseline} @media (pointer:coarse){:where(html.rn-pkg) input.gap{padding:8px 10px} } :where(html.rn-pkg) .slot{display:inline-block;min-width:calc(7ch + 24px);max-width:100%;min-height:0;line-height:1.3;padding:6px 10px; margin:0 2px;background:#fff;border:2px dashed #B9AE99;border-radius:9px;text-align:center; vertical-align:baseline;cursor:pointer;font-size:19px} @media (pointer:coarse){:where(html.rn-pkg) .slot{padding:8px 10px} } :where(html.rn-pkg) .slot:empty::before{content:"\200b"} :where(html.rn-pkg) input.gap:focus{outline:3px solid var(--forest);outline-offset:1px} :where(html.rn-pkg) input.ok,:where(html.rn-pkg) .slot.ok{border-color:var(--forest)!important;border-style:solid!important;background:var(--wash)!important} :where(html.rn-pkg) input.no,:where(html.rn-pkg) .slot.no{border-color:var(--rust)!important;border-style:solid!important;background:var(--rustwash)!important} :where(html.rn-pkg) .sol{color:var(--rust);font-weight:700;font-size:18px;margin-left:6px} :where(html.rn-pkg) .src{color:var(--soft);font-size:16px} :where(html.rn-pkg) .bank{background:var(--wash);border:2px dashed #9DB8A8;border-radius:12px; padding:12px 14px;margin:0 0 16px;line-height:2.5} :where(html.rn-pkg) .bank .hint{margin:0 0 6px;color:var(--ink)} :where(html.rn-pkg) .chip{display:inline-block;min-height:44px;line-height:40px;padding:0 16px;margin:4px 6px 4px 0; background:#fff;border:2px solid var(--forest);border-radius:999px;cursor:pointer; font-size:19px;user-select:none;-webkit-user-select:none;touch-action:manipulation} :where(html.rn-pkg) .chip.sel{background:var(--forest);color:#fff} :where(html.rn-pkg) .chip.used{opacity:.3;cursor:default;text-decoration:line-through} :where(html.rn-pkg) .chip.ref{cursor:default;user-select:text;-webkit-user-select:text;border-style:dashed} :where(html.rn-pkg) .slot.over{border-color:var(--forest);background:var(--wash)} :where(html.rn-pkg) .scene{position:relative;display:block;margin:0 0 22px;border:2px solid var(--line); border-radius:14px;overflow:hidden;background:var(--sheet)} :where(html.rn-pkg) .scene img{display:block;width:100%;height:auto} :where(html.rn-pkg) .spot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;border-radius:50%; background:var(--rust);color:#fff;font:700 19px/44px 'Atkinson Hyperlegible',Verdana,Tahoma,system-ui,sans-serif;text-align:center; cursor:pointer;padding:0;box-shadow:0 0 0 3px rgba(255,253,248,.95),0 2px 6px rgba(0,0,0,.35)} :where(html.rn-pkg) .spot.seen{background:var(--forest)} :where(html.rn-pkg) .bulle{position:absolute;z-index:20;max-width:300px;background:var(--sheet); border:2px solid var(--forest);border-radius:12px;padding:12px 40px 12px 14px; font-size:18px;line-height:1.55;box-shadow:0 6px 22px rgba(0,0,0,.22)} :where(html.rn-pkg) .bulle b{display:block;color:var(--forest);margin:0 0 4px} :where(html.rn-pkg) .bulle .x{position:absolute;top:2px;right:2px;width:40px;height:40px;border:0;background:none; font:700 24px/1 'Atkinson Hyperlegible',Verdana,Tahoma,system-ui,sans-serif;color:var(--soft);cursor:pointer} :where(html.rn-pkg) .q{background:var(--sheet);border:1.5px solid var(--line);border-radius:14px; padding:14px 16px;margin:0 0 12px} :where(html.rn-pkg) .q p{margin:0 0 10px;font-weight:700;line-height:1.5} :where(html.rn-pkg) .q label{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px;margin:6px 0; border:2px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;line-height:1.4} :where(html.rn-pkg) .q label input{width:22px;height:22px;flex:none;accent-color:var(--forest)} :where(html.rn-pkg) .q label.ok{border-color:var(--forest);background:var(--wash);font-weight:700} :where(html.rn-pkg) .q label.no{border-color:var(--rust);background:var(--rustwash);text-decoration:line-through} :where(html.rn-pkg) .match{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px} :where(html.rn-pkg) .match button{width:100%;min-height:52px;text-align:left;font:inherit;font-size:18px; padding:10px 12px;background:#fff;color:var(--ink);border:2px solid #B9AE99; border-radius:10px;cursor:pointer;line-height:1.3;margin:0 0 10px} :where(html.rn-pkg) .match button.sel{border-color:var(--forest);background:var(--wash);border-width:3px} :where(html.rn-pkg) .match button.done{border-color:var(--forest);background:var(--wash);color:var(--soft); cursor:default;text-decoration:line-through} :where(html.rn-pkg) .match button.wrong{border-color:var(--rust);background:var(--rustwash)} :where(html.rn-pkg) .match button.missed{border-color:var(--rust);background:var(--rustwash);color:var(--rust); font-weight:700;cursor:default} :where(html.rn-pkg) .actions{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:12px} :where(html.rn-pkg) button.go{font:700 19px 'Atkinson Hyperlegible',Verdana,Tahoma,system-ui,sans-serif;min-height:52px;padding:0 26px;border:0; border-radius:12px;background:var(--forest);color:var(--sheet);cursor:pointer} :where(html.rn-pkg) button.go:focus-visible{outline:3px solid var(--navy);outline-offset:3px} :where(html.rn-pkg) button.ghost{background:var(--sheet);color:var(--forest);border:2px solid var(--forest)} :where(html.rn-pkg) #score{margin:16px 0 0;font-weight:700;color:var(--forest);font-size:20px} @media (max-width:480px){:where(html.rn-pkg) body{padding:0 10px 24px} :where(html.rn-pkg) h1{font-size:25px} :where(html.rn-pkg) .match{grid-template-columns:1fr 1fr;gap:8px} :where(html.rn-pkg) .match button{font-size:17px;padding:8px 10px} :where(html.rn-pkg) .cloze{padding:14px 12px} } :where(html.rn-pkg){--lift:0 1px 2px rgba(26,28,30,.06),0 8px 22px -6px rgba(26,28,30,.14); --lift-hi:0 2px 4px rgba(26,28,30,.08),0 14px 30px -8px rgba(26,28,30,.22)} :where(html.rn-pkg) .card,:where(html.rn-pkg) .cloze,:where(html.rn-pkg) .q,:where(html.rn-pkg) .scene,:where(html.rn-pkg) .bank,:where(html.rn-pkg) .player{box-shadow:var(--lift)} :where(html.rn-pkg) .player{background:linear-gradient(180deg,#FFFDF8 0%,#FBF6EC 100%)} :where(html.rn-pkg) button.go{box-shadow:0 3px 0 #234836,0 8px 18px -6px rgba(45,92,69,.55); transition:transform .12s ease,box-shadow .12s ease} :where(html.rn-pkg) button.go:active{transform:translateY(2px);box-shadow:0 1px 0 #234836,0 3px 8px -4px rgba(45,92,69,.5)} :where(html.rn-pkg) button.ghost{box-shadow:0 3px 0 rgba(45,92,69,.35),0 8px 18px -8px rgba(26,28,30,.18)} :where(html.rn-pkg) button.ghost:active{box-shadow:0 1px 0 rgba(45,92,69,.35)} :where(html.rn-pkg) .chip:not(.used):not(.ref){box-shadow:0 2px 0 rgba(45,92,69,.28),0 4px 10px -4px rgba(26,28,30,.22); transition:transform .12s ease,box-shadow .12s ease} :where(html.rn-pkg) .chip.sel{transform:translateY(-3px);box-shadow:0 4px 0 rgba(35,72,54,.9),0 12px 22px -6px rgba(26,28,30,.35)} :where(html.rn-pkg) .chip:active:not(.used):not(.ref){transform:translateY(-2px) scale(1.03); box-shadow:0 4px 0 rgba(45,92,69,.35),0 14px 24px -6px rgba(26,28,30,.32)} :where(html.rn-pkg) .match button,:where(html.rn-pkg) .q label{box-shadow:0 1px 0 rgba(26,28,30,.08),0 3px 8px -4px rgba(26,28,30,.14); transition:transform .12s ease,box-shadow .12s ease} :where(html.rn-pkg) .spot{transition:transform .12s ease} @media (hover:hover) and (pointer:fine){:where(html.rn-pkg) button.go:hover{transform:translateY(-1px);box-shadow:0 4px 0 #234836,0 12px 22px -6px rgba(45,92,69,.55)} :where(html.rn-pkg) button.go:active{transform:translateY(2px)} :where(html.rn-pkg) .chip:not(.used):not(.ref):hover{transform:translateY(-2px)} :where(html.rn-pkg) .match button:not(.done):not(.missed):hover,:where(html.rn-pkg) .q label:hover{transform:translateY(-1px);box-shadow:var(--lift)} :where(html.rn-pkg) .spot:hover{transform:scale(1.08)} } @media (prefers-reduced-motion:reduce){:where(html.rn-pkg) *,:where(html.rn-pkg) *::before,:where(html.rn-pkg) *::after{transition:none!important;animation:none!important} :where(html.rn-pkg) .chip.sel,:where(html.rn-pkg) .chip:active,:where(html.rn-pkg) button.go:hover,:where(html.rn-pkg) button.go:active,:where(html.rn-pkg) .chip:hover,:where(html.rn-pkg) .match button:hover,:where(html.rn-pkg) .q label:hover,:where(html.rn-pkg) .spot:hover{transform:none!important} } /* 4. read-along package (html.rn-ra): the template's toolbar as plain paper */ :where(html.rn-ra),:where(html.rn-ra) body.theme-cream{ --bg-app:var(--paper);--bg-surface:var(--sheet);--bg-surface-elevated:var(--sheet);--bg-card:var(--sheet); --bg-card-hover:var(--wash);--bg-toolbar:rgba(245,239,228,.98); --text-main:var(--ink);--text-muted:var(--soft);--text-subtle:var(--soft); --border-color:var(--line);--border-subtle:var(--line); --color-primary:var(--forest);--color-primary-light:var(--wash);--color-primary-glow:rgba(45,92,69,.22); --hl-color:var(--forest)} :where(html.rn-ra) body.font-atkinson{--font-family:'Atkinson Hyperlegible',Verdana,Tahoma,sans-serif} :where(html.rn-ra) .header-bar{background:var(--sheet)!important;color:var(--ink)!important;border-bottom:1.5px solid var(--line)!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 4px 12px -8px rgba(26,28,30,.3)} :where(html.rn-ra) .header-bar h1{margin:0!important;font:700 24px/1.15 Caveat,'Atkinson Hyperlegible',cursive!important;color:var(--ink)!important} :where(html.rn-ra) .header-bar #header-course-name{color:inherit!important;font:inherit!important} :where(html.rn-ra) .header-bar .brand-badge{background:#FFFDF7!important;color:#1D1E20!important;border:1.5px solid #1D1E20!important; font:700 12px/1.2 'Atkinson Hyperlegible',Verdana,sans-serif!important;letter-spacing:.04em;padding:2px 8px!important;border-radius:999px!important} :where(html.rn-ra) .header-bar .brand-subtitle{display:none!important} :where(html.rn-ra) .header-bar .action-btn{color:#1D1E20!important;background:#FFFDF7!important;border:2px solid #1D1E20!important; border-radius:9px 7px 10px 8px / 8px 10px 7px 9px!important;box-shadow:1px 3px 4px rgba(29,30,32,.16)!important} :where(html.rn-ra) .brand-icon img{width:44px!important;height:44px!important;box-sizing:border-box;border-radius:51% 49% 50% 50% / 49% 51% 49% 51%!important; background:#FFFDF7!important;border:2.5px solid #1D1E20!important;object-fit:cover!important;object-position:50% 30%!important; filter:none!important;box-shadow:1px 3px 4px rgba(29,30,32,.16)} /* 5. lesson pages: side list, content column, Continue, phones */ /* page + fonts */ html,body,#__next,.screen-wrapper,[class*="theme_wrapper"]{background:var(--rn-paper)!important} #__next :where(*:not(svg):not(path):not(code):not(pre)){font-family:var(--rn-body)!important} #__next h1,#__next h2,#__next h3,#__next h4,#__next [class*="card-title"] p{font-family:var(--rn-title)!important} body{color:var(--rn-ink)!important;-webkit-text-size-adjust:100%} /* ---------- side list ---------- */ [class*="sidebar_drawer"]:not([class*="button"]):not([class*="header"]){background:var(--rn-side)!important;border-right:1px solid var(--rn-line)!important;box-shadow:none!important} [class*="sidebar_drawer_header"],[class*="sidebar_header"]{background:var(--rn-navy)!important;color:#fff!important} [class*="sidebar_header_background"]{opacity:.18!important} [class*="sidebar_header_text"]{font:600 1.15rem/1.25 var(--rn-title)!important;color:#fff!important;text-transform:none!important;text-align:left!important} [class*="sidebar_header_progress_text"]{color:#fff!important;font-weight:700!important;opacity:.9} [class*="sidebar_header"] button,[class*="sidebar_header"] svg{color:#fff!important} nav[class*="outline"]{background:var(--rn-side)!important} nav[class*="outline"] .MuiListItem-root .MuiListItemText-primary{font-size:.78rem!important;font-weight:700!important;letter-spacing:.03em!important;color:var(--rn-soft)!important;text-transform:uppercase} nav[class*="outline"] .MuiListItemButton-root{border-radius:10px!important;margin:2px 8px!important;padding:9px 10px!important;min-height:44px} nav[class*="outline"] .MuiListItemButton-root .MuiListItemText-primary{font-size:.95rem!important;line-height:1.3!important;color:var(--rn-ink)!important;text-transform:none!important;letter-spacing:0!important;font-weight:400!important} nav[class*="outline"] .MuiListItemButton-root:hover{background:rgba(45,92,69,.08)!important} nav[class*="outline"] .MuiListItemButton-root.Mui-selected{background:var(--rn-sheet)!important;box-shadow:inset 3px 0 0 var(--rn-rust)!important} nav[class*="outline"] .MuiListItemButton-root.Mui-selected .MuiListItemText-primary{font-weight:700!important} nav[class*="outline"] svg{color:var(--rn-forest)!important} /* menu button: a paper plate in the storybook look on every screen (was a navy square on computers, 10.10.2026) */ [class*="sidebar_drawer_button"]{background:#FFFDF7!important;color:#1D1E20!important;border:2px solid #1D1E20!important;border-radius:9px 7px 10px 8px / 8px 10px 7px 9px!important; width:44px!important;height:44px!important;box-shadow:1px 3px 4px rgba(29,30,32,.16)!important} [class*="sidebar_drawer_button"] svg{color:#1D1E20!important;fill:#1D1E20!important} [class*="sidebar_drawer_button"]:hover{background:#F3EBDB!important} /* ---------- content column ---------- */ [class*="theme_defaultThemeWrapper"]{box-sizing:border-box!important} #mcg-content,[class*="theme_pageContent"]{max-width:none!important;padding:0!important} [class*="card_cardContainer"],[class*="card_defaultThemeCardContentContainer"],.htmlText,.htmlCourse, .simple-box-wrapper,.simple-box,.simple-box .column{background:transparent!important;border:0!important;box-shadow:none!important} [class*="card-title_cardContainer"],[class*="card_defaultThemeCardContentContainer"],[class*="navigator_navigator"],[class*="back_button"]{ max-width:var(--rn-col)!important;margin-left:auto!important;margin-right:auto!important; padding-left:clamp(16px,4vw,32px)!important;padding-right:clamp(16px,4vw,32px)!important;box-sizing:border-box!important;width:100%!important} .simple-box-wrapper,.simple-box,.simple-box .column{max-width:none!important;width:100%!important;padding-left:0!important;padding-right:0!important;margin:0!important} #mcg-content [class*="card-title_cardContainer"] p{font:600 clamp(1.9rem,1.4rem + 2.2vw,2.75rem)/1.12 var(--rn-title)!important;color:var(--rn-forest)!important;text-align:left!important;letter-spacing:-.01em!important;margin:0!important} #mcg-content [class*="card-title_cardContainer"] > div{display:none!important} /* MCG's orange underline */ #mcg-content [class*="card-title_cardContainer"]{display:block!important;text-align:left!important;padding-top:clamp(20px,4vw,40px)!important} #mcg-content [class*="card-title_cardContainer"] p{width:100%!important} #__next [class*="sidebar_header_text"]{font:600 1.15rem/1.25 var(--rn-title)!important;color:#fff!important} /* an exercise page already shows its own title: hide MCG's duplicate */ #mcg-content:has([data-type="scorm-package"]) [class*="card-title_cardContainer"]{display:none!important} #mcg-content:has([data-type="scorm-package"]) [class*="card_defaultThemeCardContentContainer"]{padding-top:clamp(12px,3vw,28px)!important} [class*="back_button"]{justify-content:flex-start!important;color:var(--rn-forest)!important;font-weight:700!important;text-transform:none!important} [class*="back_button"] p{font-weight:700!important;color:var(--rn-forest)!important} #mcg-content p,#mcg-content li,#mcg-content td,#mcg-content th{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem)!important;line-height:1.6!important;color:var(--rn-ink)!important} #mcg-content h2{font:600 clamp(1.45rem,1.2rem + 1.2vw,2rem)/1.2 var(--rn-title)!important;color:var(--rn-forest)!important;margin:0 0 .6em!important;text-align:left!important} #mcg-content h2::after{display:none!important} #mcg-content h3,#mcg-content h4{font:600 1.25rem/1.25 var(--rn-title)!important;color:var(--rn-ink)!important;margin:0 0 .35em!important} #mcg-content a{color:var(--rn-forest)!important;text-underline-offset:3px} /* MCG cards block -> Renardo cards */ #mcg-content .card-wrapper{display:grid!important;gap:16px!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr))!important;width:100%!important;margin:0 0 24px!important} #mcg-content .card-box{width:auto!important;max-width:none!important;min-width:0!important;height:auto!important;margin:0!important; background:var(--rn-sheet)!important;border:1px solid var(--rn-line)!important;border-top:4px solid var(--rn-forest)!important;border-radius:16px!important; padding:18px 20px!important;box-shadow:0 1px 2px rgba(26,28,30,.05)!important} #mcg-content .card-header,#mcg-content .card-content{padding:0!important;margin:0!important;width:auto!important;text-align:left!important} #mcg-content .card-content p{margin:0!important} /* SCORM and media fill the column */ #mcg-content iframe,#mcg-content video,#mcg-content img{max-width:100%!important} #mcg-content [data-type="scorm-package"],#mcg-content [data-type="scorm-package"] iframe{width:100%!important} /* ---------- Continue ---------- */ [class*="navigator_navigator"]{padding-top:20px!important;padding-bottom:max(28px,env(safe-area-inset-bottom))!important;border-top:1px solid var(--rn-line)!important;margin-top:28px!important;height:auto!important} [class*="navigator_navigator"] button{min-height:56px!important;border-radius:999px!important;background:var(--rn-forest)!important;color:#fff!important; box-shadow:0 2px 0 var(--rn-forest-dk)!important;font-size:0!important;text-transform:none!important} [class*="navigator_navigator"] button::after{content:"Continuer \2192";font:700 1.08rem/1 var(--rn-body);white-space:pre;text-transform:none;letter-spacing:0} [class*="sidebar_drawer"],nav[class*="outline"]{overflow-x:hidden!important} [class*="navigator_navigator"] button:hover{background:var(--rn-forest-dk)!important} [class*="navigator_navigator"] button:focus-visible{outline:3px solid #F2B48C!important;outline-offset:3px!important} /* ---------- phones ---------- */ @media (max-width:640px){ html,body,.screen-wrapper{scrollbar-width:none!important} html::-webkit-scrollbar,body::-webkit-scrollbar,.screen-wrapper::-webkit-scrollbar{display:none!important;width:0!important;height:0!important} [class*="navigator_navigator"]{position:sticky!important;bottom:0!important;z-index:5!important;background:rgba(245,239,228,.96)!important; backdrop-filter:blur(6px);margin-top:20px!important;padding-top:12px!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important} [class*="navigator_navigator"] button{min-height:54px!important} /* menu button pinned to the top-left corner, content starts below it */ [class*="sidebar_drawer_button"]{position:fixed!important;top:10px!important;left:10px!important;z-index:20!important} [class*="theme_defaultThemeWrapper"]{padding-top:56px!important} [class*="back_button"]{display:none!important} } /* ---------- depth (08.10.2026) ---------- */ #mcg-content .card-box{box-shadow:0 1px 2px rgba(26,28,30,.06),0 8px 22px -6px rgba(26,28,30,.14)!important;transition:transform .18s ease,box-shadow .18s ease} #mcg-content .card-box:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(26,28,30,.07),0 14px 30px -8px rgba(26,28,30,.2)!important} [class*="navigator_navigator"] button{box-shadow:0 3px 0 var(--rn-forest-dk),0 10px 22px -6px rgba(45,92,69,.45)!important;transition:transform .12s ease,box-shadow .12s ease} [class*="navigator_navigator"] button:hover{transform:translateY(-1px)} [class*="navigator_navigator"] button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--rn-forest-dk),0 4px 10px -4px rgba(45,92,69,.4)!important} nav[class*="outline"] .MuiListItemButton-root.Mui-selected{box-shadow:inset 3px 0 0 var(--rn-rust),0 2px 8px -2px rgba(26,28,30,.15)!important} [class*="sidebar_drawer_header"],[class*="sidebar_header"]{box-shadow:0 4px 14px -6px rgba(30,50,80,.5)!important} @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}} /* ---------- the side list header wears the unit painting ---------- */ /* the side list's header wears the same painting */ [class*="sidebar_drawer_header"],[class*="sidebar_header"]{background:#C9D8C4 var(--rn-bg,none) 50% 35%/cover no-repeat!important; box-shadow:none!important} [class*="sidebar_header_background"]{display:none!important} /* only the outer header carries the painting: the boxes inside it stay transparent (no picture in a picture) */ [class*="sidebar_drawer_header"] [class*="sidebar_header"]:not([class*="sidebar_header_text"]):not([class*="sidebar_header_progress_text"]){background:transparent!important;box-shadow:none!important} [class*="sidebar_drawer_header"]{padding-top:env(safe-area-inset-top)!important} #__next [class*="sidebar_header_text"],[class*="sidebar_header_text"]{display:inline-block!important;width:auto!important;max-width:calc(100% - 8px)!important;margin:0 0 0 2px!important; padding:2px 12px 5px!important;background:rgba(255,253,247,.94)!important;color:#1D1E20!important;border-radius:var(--rn-wob-sm)!important; box-shadow:0 1px 2px rgba(29,30,32,.10),0 4px 10px -4px rgba(29,30,32,.25)!important;font:700 24px/1.1 Caveat,"Atkinson Hyperlegible",cursive!important} [class*="sidebar_header_progress_text"]{background:rgba(255,253,247,.94)!important;color:#1D1E20!important;border-radius:6px!important;padding:1px 6px!important;opacity:1!important} [class*="sidebar_header"] button,[class*="sidebar_header"] svg{color:#1D1E20!important} /* phones: the side list opens OVER the page (no push), with a dimmed background and a close button */ @media (max-width:760px){ .MuiDrawer-docked,.screen-wrapper > div:first-child:not([class*="theme_wrapper"]){width:0!important;min-width:0!important;flex:0 0 0!important} .MuiDrawer-paper{box-shadow:6px 0 24px rgba(0,0,0,.25)!important} #rn-dim{position:fixed;inset:0;z-index:1199;background:rgba(29,30,32,.4);display:none} html.rn-drawer-open #rn-dim{display:block} html.rn-drawer-open body [class*="sidebar_drawer_button"],html.rn-drawer-open body:has(#rn-band) [class*="sidebar_drawer_button"]{ left:226px!important;top:calc(10px + env(safe-area-inset-top))!important;margin:0!important;z-index:1301!important;background:#FFFDF7!important; border:2px solid #1D1E20!important;border-radius:50%!important;box-shadow:1px 3px 4px rgba(29,30,32,.2)!important} html.rn-drawer-open body [class*="sidebar_drawer_button"] svg{display:none!important} html.rn-drawer-open [class*="sidebar_header_text"]{max-width:calc(100% - 62px)!important;box-sizing:border-box!important} html.rn-drawer-open body [class*="sidebar_drawer_button"]::before{content:"\2715";color:#1D1E20;font:700 20px/1 system-ui,sans-serif} } /* 5b. THE band */ /* ---------- THE storybook band: static HTML in the lesson Header Script, drawn by this file (10.10.2026) ---------- No script draws it, hides it or moves it: it survives MCG's innerHTML write on a client-side click. It sits in MCG's header slot (a zero-height row at the top of the page, in flow), full width. At scroll 0 the whole band shows. Scrolling: position:sticky with a negative top keeps the bottom strip pinned (the sky slides away), so the disc and the title, which sit in that strip, are never cut. The side list (fixed, above) covers its left 280 px on computers. */ #__next{overflow:visible!important} /* MCG writes the header into a zero-height wrapper (id "header script") at the top of the page. A sticky band cannot pin inside a parent that is 150 px tall, so the wrapper dissolves: the band's containing block becomes the whole page. */ #__next > [id="header script"]{display:contents!important} #rn-band{position:sticky;top:-54px;z-index:19;display:flex;align-items:flex-end;gap:10px;box-sizing:border-box;width:100%;height:150px;margin:0 0 6px; padding:0 20px 24px 352px;isolation:isolate;filter:drop-shadow(0 4px 6px rgba(29,30,32,.18));font-family:"Atkinson Hyperlegible",system-ui,sans-serif} /* the header's inline fallback paints the picture on #rn-band itself (before this file loads); once the theme is here, only the masked .scene paints it, or the unmasked fallback shows through under the torn edge and the bottom looks straight (John 10.10 22:54) */ body:has(#rn-band) #rn-band{background:none!important} #rn-band .scene{position:absolute;inset:0;z-index:-1;background:#C9D8C4 var(--rn-bg,none) var(--rn-pos,50% 14%)/cover no-repeat; -webkit-mask:var(--rn-tear) left bottom/420px 12px repeat-x,linear-gradient(#000 0 0) left top/100% calc(100% - 11px) no-repeat; mask:var(--rn-tear) left bottom/420px 12px repeat-x,linear-gradient(#000 0 0) left top/100% calc(100% - 11px) no-repeat} #rn-band .disc{display:block;flex:none;width:60px;height:60px;overflow:hidden;background:#FFFDF7;border:2.5px solid #1D1E20; border-radius:51% 49% 50% 50% / 49% 51% 49% 51%;box-shadow:1px 3px 4px rgba(29,30,32,.16)} #rn-band .disc img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.08) translateY(4%);max-width:none} #rn-band .txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px} #rn-band p{margin:0;max-width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1D1E20; background:rgba(255,253,247,.94);border-radius:var(--rn-wob-sm);box-shadow:0 1px 2px rgba(29,30,32,.10),0 4px 10px -4px rgba(29,30,32,.22)} #rn-band p.who{font:700 12px/1.2 "Atkinson Hyperlegible",system-ui,sans-serif!important;letter-spacing:.04em;padding:2px 8px} #rn-band p.what{font:700 30px/1.05 Caveat,"Atkinson Hyperlegible",cursive!important;padding:1px 10px 3px} /* phones: the painting reaches the top edge; the menu button (fixed, top left) sits on it */ @media (max-width:760px){ #rn-band{height:calc(132px + env(safe-area-inset-top));top:-44px;padding:env(safe-area-inset-top) 14px 22px 66px} #rn-band .disc{width:52px;height:52px} #rn-band p.what{font-size:25px!important} body:has(#rn-band) [class*="theme_defaultThemeWrapper"]{padding-top:0!important} } /* the menu button stays level with the disc */ @media (max-width:760px){ body:has(#rn-band) [class*="sidebar_drawer_button"]{top:calc(16px + env(safe-area-inset-top))!important;left:10px!important} } /* 6. lab landing pages and the collection page */ body:has(#rn-lm){background-color:#F7F3EA!important; background-image:linear-gradient(#E3DACB 1px,transparent 1px),linear-gradient(90deg,#E3DACB 1px,transparent 1px)!important; background-size:22px 22px!important;background-position:-1px -1px!important} body:has(#rn-lm) [class*="body_backgroundDiv"]{display:none!important} /* the hero keeps only its buttons */ body:has(#rn-lm) [class*="hero_heroTemplateContainer"]{background:none!important;min-height:0!important;padding:18px 16px 6px!important} body:has(#rn-lm) [class*="hero_heroTemplateContainer"] [class*="hero_heroLogoContainer"], body:has(#rn-lm) [class*="hero_heroTemplateContainer"] [class*="hero_heroTitle"], body:has(#rn-lm) [class*="hero_heroTemplateContainer"] [class*="hero_heroImageContainer"]{display:none!important} body:has(#rn-lm) [class*="hero_heroTemplateContainer"] [class*="hero_heroMainContent"]{display:flex!important;justify-content:center!important;max-width:880px!important;width:100%!important;margin:0 auto!important;padding:0!important;min-height:0!important} body:has(#rn-lm) [class*="hero_heroTemplateContainer"] [class*="hero_heroLeftContent"]{width:100%!important;max-width:none!important;padding:0!important;margin:0!important;min-height:0!important;height:auto!important;align-items:flex-start!important} body:has(#rn-lm) [class*="hero_heroTemplateContainer"] [class*="hero_heroActionSection"]{margin:0!important;justify-content:flex-start!important} /* the masthead */ #rn-lm{position:relative;isolation:isolate;display:flex;align-items:flex-end;gap:12px;box-sizing:border-box;width:100%;min-height:176px;padding:16px 16px 30px; filter:drop-shadow(0 4px 6px rgba(29,30,32,.18));font-family:"Atkinson Hyperlegible",system-ui,sans-serif;letter-spacing:.01em} #rn-lm .scene{position:absolute;inset:0;z-index:-1;background:#C9D8C4 no-repeat;background-size:cover; -webkit-mask:var(--rn-tear) left bottom/420px 12px repeat-x,linear-gradient(#000 0 0) left top/100% calc(100% - 11px) no-repeat; mask:var(--rn-tear) left bottom/420px 12px repeat-x,linear-gradient(#000 0 0) left top/100% calc(100% - 11px) no-repeat} #rn-lm .disc{flex:none;width:56px;height:56px;overflow:hidden;background:#FFFDF7;border:2.5px solid #1D1E20;border-radius:51% 49% 50% 50% / 49% 51% 49% 51%;box-shadow:1px 3px 4px rgba(29,30,32,.16)} #rn-lm .disc img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.08) translateY(4%)} #rn-lm .txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-right:132px} #rn-lm .plate{margin:0;max-width:100%;color:#1D1E20;background:rgba(255,253,247,.95);border-radius:var(--rn-wob-sm);box-shadow:0 1px 2px rgba(29,30,32,.10),0 4px 10px -4px rgba(29,30,32,.22)} #rn-lm .who{font:700 13px/1.2 "Atkinson Hyperlegible",system-ui,sans-serif;letter-spacing:.04em;padding:3px 9px} #rn-lm .what{font:700 34px/1 Caveat,"Atkinson Hyperlegible",cursive;padding:2px 12px 5px} #rn-lm .about{font:700 14px/1.3 "Atkinson Hyperlegible",system-ui,sans-serif;padding:3px 10px;color:#454A50} #rn-lm .cast{position:absolute;right:10px;bottom:-14px;display:flex;align-items:flex-end;z-index:2} .rn-stk{display:block;height:var(--h,72px);width:auto;flex:none; filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 5px 7px rgba(29,30,32,.28)); transform:rotate(var(--tilt,-3deg));transform-origin:50% 90%} .rn-stk.alt{--tilt:2deg} #rn-lm .cast .rn-stk{--h:112px} #rn-lm .cast .rn-stk + .rn-stk{margin-left:-14px} /* the text of the page on sheets, never straight on the squares */ body:has(#rn-lm) .htmlLandingPage{max-width:880px;margin:0 auto;padding:12px 14px 56px;background:none!important} body:has(#rn-lm) .htmlLandingPage .simple-box-wrapper{background:none!important} body:has(#rn-lm) .htmlLandingPage .simple-box-wrapper > .simple-box{background:none!important} body:has(#rn-lm) .htmlLandingPage h2{display:inline-block;margin:0 0 14px!important;padding:2px 14px 4px;background:#FFFDF8;border-radius:var(--rn-wob-sm); font:700 32px/1.1 Caveat,cursive!important;color:#1A1C1E!important;box-shadow:0 1px 2px rgba(26,28,30,.08)} body:has(#rn-lm) .htmlLandingPage .card-box[type="highlightCard"]{border-left:1px solid #DDD3C2!important;border-radius:var(--rn-wob)!important;padding:10px 16px 10px 10px!important;gap:14px!important; font-family:"Atkinson Hyperlegible",Verdana,sans-serif!important} body:has(#rn-lm) .htmlLandingPage .card-box[type="highlightCard"] .card-content p{font-family:"Atkinson Hyperlegible",Verdana,sans-serif!important;font-size:18px!important;color:#1A1C1E!important} body:has(#rn-lm) .htmlLandingPage .card-box[type="highlightCard"] .card-icon-button{background:none!important;box-shadow:none!important;width:84px!important;height:84px!important;border-radius:12px!important;padding:4px 4px 2px!important; display:flex!important;align-items:flex-end!important;justify-content:center!important;border:1px solid #DDD3C2!important;background-color:#F7F3EA!important; background-image:linear-gradient(#E3DACB 1px,transparent 1px),linear-gradient(90deg,#E3DACB 1px,transparent 1px)!important;background-size:22px 22px!important} body:has(#rn-lm) .htmlLandingPage .card-box[type="highlightCard"] .card-icon-button .rn-stk{--h:72px;max-width:76px;object-fit:contain} body:has(#rn-lm) .htmlLandingPage .dynamic-list{font-family:"Atkinson Hyperlegible",Verdana,sans-serif!important} @media (min-width:761px){ #rn-lm{min-height:232px;padding:16px max(28px,calc((100% - 880px)/2 + 14px)) 38px;gap:18px} #rn-lm .disc{width:76px;height:76px} #rn-lm .who{font-size:15px;padding:3px 11px} #rn-lm .what{font-size:54px;padding:2px 16px 6px} #rn-lm .about{font-size:17px;padding:4px 12px} #rn-lm .txt{gap:6px;padding-right:300px} #rn-lm .cast{right:max(24px,calc((100% - 880px)/2 + 10px));bottom:-18px} #rn-lm .cast .rn-stk{--h:196px} #rn-lm .cast .rn-stk + .rn-stk{margin-left:-22px} body:has(#rn-lm) .htmlLandingPage .card-box[type="highlightCard"] .card-icon-button{width:100px!important;height:100px!important} body:has(#rn-lm) .htmlLandingPage .card-box[type="highlightCard"] .card-icon-button .rn-stk{--h:88px;max-width:92px} } @media (max-width:420px){#rn-lm .what{font-size:31px}#rn-lm.three .cast .rn-stk:nth-child(n+3){display:none}} @media (min-width:761px){#rn-lm.three .txt{padding-right:440px}} /* MCG's own landing CSS is strong: these win over it */ .rn-stk,html body:has(#rn-lm) img.rn-stk,html body:has(#rn-lm) .htmlLandingPage img.rn-stk,html body:has(#rn-lm) .htmlLandingPage img.rn-stk.zoom-enabled{background:none!important;border:0!important;padding:0!important;box-shadow:none!important;border-radius:0!important;pointer-events:none!important;cursor:default!important;margin:0!important;outline:0!important} html body:has(#rn-lm) .htmlLandingPage img.rn-stk{filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 5px 7px rgba(29,30,32,.28))!important} body:has(#rn-lm){overflow-x:hidden!important} /* the page's container may be a padded flex row: equal negative margins keep the masthead from being re-centred */ #rn-lm{width:100%!important;flex:0 0 auto!important;margin-left:0!important;margin-right:0!important} #rn-lm .cast .rn-stk + .rn-stk{margin-left:-14px!important} @media (min-width:761px){#rn-lm .cast .rn-stk + .rn-stk{margin-left:-22px!important}} /* second landing template (Lab c): cover picture with the title and the button on it */ body:has(#rn-lm) [class*="default_details__root"]{background:none!important;box-shadow:none!important} body:has(#rn-lm) [class*="default_details__root"] [class*="default_image__content"]{background:none!important;background-image:none!important;min-height:0!important;height:auto!important;box-shadow:none!important;border-radius:0!important} body:has(#rn-lm) [class*="default_details__root"] [class*="logo_logoWrapper"],body:has(#rn-lm) [class*="default_details__root"] h1{display:none!important} body:has(#rn-lm) [class*="default_details__root"] [class*="default_coverContentInfo"]{align-items:flex-start!important;text-align:left!important;max-width:880px!important;width:100%!important;margin:0 auto!important;padding:18px 14px 6px!important;min-height:0!important;height:auto!important;box-sizing:border-box!important} body:has(#rn-lm) [class*="default_details__root"] [class*="coverContentActionButton"]{width:auto!important;max-width:none!important} body:has(#rn-lm) [class*="default_details__root"] [class*="coverContentActionButton"]{border:0!important;background:none!important;padding:0!important;box-shadow:none!important;border-radius:0!important} body:has(#rn-lm) [class*="default_details__root"],body:has(#rn-lm) [class*="default_details__root"] *{background-color:transparent!important} body:has(#rn-lm) [class*="default_details__root"] button.MuiButton-root{background-color:#C25A25!important} body:has(#rn-lm) [class*="default_details__root"] .MuiStack-root{width:auto!important} body:has(#rn-lm) [class*="default_details__root"] button.MuiButton-root{width:auto!important;background:#C25A25!important;border-radius:6px!important;padding:12px 24px!important;color:#fff!important} body:has(#rn-lm) [class*="default_details__root"] button.MuiButton-root div{color:#fff!important} #rn-lm .what{font-family:Caveat,"Atkinson Hyperlegible",cursive!important;font-weight:700!important;color:#1D1E20!important;margin:0!important;text-transform:none!important;letter-spacing:.01em!important;text-shadow:none!important;text-align:left!important} #rn-lm .what{font-size:34px!important;line-height:1!important;padding:2px 12px 5px!important} @media (min-width:761px){#rn-lm .what{font-size:54px!important;padding:2px 16px 6px!important}} @media (max-width:420px){#rn-lm .what{font-size:31px!important}} #rn-lm .who,#rn-lm .about{font-family:"Atkinson Hyperlegible",system-ui,sans-serif!important;margin:0!important;text-transform:none!important} #rn-lm .who{color:#1D1E20!important} #rn-lm .about{color:#454A50!important} #rn-lm .cast .rn-stk{height:112px!important;width:auto!important;max-width:none!important} body:has(#rn-lm) .htmlLandingPage .card-icon-button .rn-stk{height:72px!important;width:auto!important;max-width:76px!important;margin:0!important} @media (min-width:761px){ #rn-lm .cast .rn-stk{height:196px!important} body:has(#rn-lm) .htmlLandingPage .card-icon-button .rn-stk{height:88px!important;max-width:92px!important} } body:has(#rn-lm) .htmlLandingPage h2::before,body:has(#rn-lm) .htmlLandingPage h2::after{display:none!important;content:none!important} body:has(#rn-lm) .htmlLandingPage h2{height:auto!important;border:0!important;line-height:1.1!important;margin:0 0 14px!important;font-weight:700!important} body:has(#rn-lm) [class*="theme_defaultThemeCardContentContainer"]{padding-left:0!important;padding-right:0!important;max-width:none!important;width:100%!important;background:none!important;box-shadow:none!important} body:has(#rn-lm) .htmlLandingPage{box-sizing:border-box!important;width:100%!important;max-width:880px!important;margin:0 auto!important;padding:12px 14px 56px!important} body:has(#rn-lm) .htmlLandingPage .simple-box-wrapper,body:has(#rn-lm) .htmlLandingPage .simple-box,body:has(#rn-lm) .htmlLandingPage .column{box-sizing:border-box!important;width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important} body:has(#rn-lm) .htmlLandingPage .card-wrapper:has(.card-box[type="highlightCard"]){max-width:none!important;width:100%!important;box-sizing:border-box!important;padding:0!important} body:has(#rn-lm) .htmlLandingPage .card-box[type="highlightCard"]{box-sizing:border-box!important} body:has(#rn-lm) .screen-wrapper,body:has(#rn-lm) #mcg-content,body:has(#rn-lm) [class*="theme_ltr"],body:has(#rn-lm) [class*="theme_defaultThemeCardContentContainer"]{background:none!important} body:has(#rn-lm) [class*="hero_heroTemplateContainer"]{padding-left:14px!important;padding-right:14px!important} body:has(#rn-lm) [class*="hero_heroTemplateContainer"],body:has(#rn-lm) [class*="hero_heroTemplateContainer"] [class*="hero_heroMainContent"],body:has(#rn-lm) [class*="hero_heroTemplateContainer"] [class*="hero_heroLeftContent"]{background:none!important;box-shadow:none!important;border-radius:0!important} body:has(#rn-lm) .htmlLandingPage .section-title p,body:has(#rn-lm) .htmlLandingPage .card-title{font-family:"Atkinson Hyperlegible",Verdana,sans-serif!important;font-weight:700!important} /* MCG's back arrow (top-left over the painting): no cream square (John 10.10), only the dark round arrow; the 52 px button stays the tap area */ body:has(#rn-lm) div[class*="backToCollectionButton_buttonHero"]{background:transparent!important;background-color:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important} body:has(#rn-lm) div[class*="backToCollectionButton_buttonHero"] .MuiIconButton-root,body:has(#rn-lm) div[class*="backToCollectionButton_buttonHero"] .MuiIconButton-root:hover{background:transparent!important;background-color:transparent!important;border:0!important;box-shadow:none!important;min-width:44px!important;min-height:44px!important} /* "Les écrans", proposal A (John, 10.10 16:42): one card per section, every lesson listed, extra lessons as chips. No count, no minutes. MCG's own accordion stays in the page, hidden, and receives the clicks. */ html body:has(#rn-toc) .htmlLandingPage .course-sections-container{display:none!important} html body:has(#rn-lm) .htmlLandingPage h2.rn-toc-h2{display:none!important} html body:has(#rn-lm) .htmlLandingPage .course-container,html body:has(#rn-lm) .htmlLandingPage .course-inner-container{background:none!important;box-shadow:none!important;border:0!important;padding:0!important;margin:0!important} #rn-toc{box-sizing:border-box;width:100%;margin:0 0 22px;font-family:"Atkinson Hyperlegible",Verdana,sans-serif;color:#1A1C1E;text-align:left} #rn-toc *{box-sizing:border-box} #rn-toc .rn-tt{display:inline-block;margin:0 0 12px;padding:2px 14px 4px;background:#FFFDF8;border-radius:var(--rn-wob-sm);box-shadow:0 1px 2px rgba(26,28,30,.08);font:700 32px/1.1 Caveat,cursive;color:#1A1C1E} #rn-toc .rn-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;align-items:start} /* MCG's theme sets its own heading font and link colour: these win over it */ html body:has(#rn-lm) #rn-toc .rn-sh{font:700 26px/1.05 Caveat,cursive!important;color:#1A1C1E!important;margin:0!important;padding:0!important;text-transform:none!important;letter-spacing:0!important} html body:has(#rn-lm) #rn-toc .rn-tt{font:700 32px/1.1 Caveat,cursive!important;color:#1A1C1E!important} html body:has(#rn-lm) #rn-toc a.rn-lk,html body:has(#rn-lm) #rn-toc a.rn-lk *{color:#1A1C1E!important;font-family:"Atkinson Hyperlegible",Verdana,sans-serif!important} html body:has(#rn-lm) #rn-toc li.rn-ls.done a.rn-lk .rn-t{color:#5C6169!important} html body:has(#rn-lm) #rn-toc a.rn-lk .rn-k{color:#2D5C45!important} html body:has(#rn-lm) #rn-toc a.rn-lk .rn-n{color:#454A50!important} html body:has(#rn-lm) #rn-toc li.rn-ls.done a.rn-lk .rn-n{color:#2D5C45!important} html body:has(#rn-lm) #rn-toc a.rn-chip{color:#2D5C45!important;font-family:"Atkinson Hyperlegible",Verdana,sans-serif!important} #rn-toc .rn-card{position:relative;margin:0;padding:12px 14px 14px;background:#FFFDF8;border:1px solid #DDD3C2;border-radius:var(--rn-wob); box-shadow:0 1px 2px rgba(26,28,30,.06),0 8px 20px -10px rgba(26,28,30,.18)} /* John 10.10 22:54: live cards had no inner padding (MCG resets li/ul padding) — force it */ html body:has(#rn-lm) #rn-toc .rn-grid > .rn-card,html body:has(#rn-lm) #rn-toc li.rn-card{padding:14px 16px 16px!important;margin:0!important;box-sizing:border-box!important} html body:has(#rn-lm) #rn-toc .rn-card .rn-lk{padding:0 4px!important} /* the lesson list: MCG's own ul/ol padding (20 px) pushed the rows past the card text; rows line up with the header and description */ html body:has(#rn-lm) #rn-toc .rn-card ul,html body:has(#rn-lm) #rn-toc .rn-card ol{padding:0!important;margin:0!important;list-style:none!important} #rn-toc .rn-card header{display:flex;align-items:flex-end;gap:10px;margin:0 0 8px} #rn-toc .rn-patch{flex:none;display:flex;align-items:flex-end;justify-content:center;width:64px;height:64px;padding:2px;border-radius:12px;border:1px solid #DDD3C2;background-color:#F7F3EA; background-image:linear-gradient(#E3DACB 1px,transparent 1px),linear-gradient(90deg,#E3DACB 1px,transparent 1px);background-size:22px 22px;background-position:-1px -1px} html body:has(#rn-lm) #rn-toc img.rn-tk{display:block;height:58px!important;width:auto!important;max-width:60px!important;object-fit:contain;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;border-radius:0!important; background:none!important;pointer-events:none!important;transform:rotate(-3deg);transform-origin:50% 90%; filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 5px rgba(29,30,32,.25))!important} #rn-toc .rn-card:nth-child(even) img.rn-tk{transform:rotate(2deg)} #rn-toc .rn-sh{margin:0;padding:0;font:700 26px/1.05 Caveat,cursive;color:#1A1C1E;background:none;text-transform:none;letter-spacing:0} #rn-toc .rn-say{margin:0 0 8px;font:400 15px/1.4 "Atkinson Hyperlegible",Verdana,sans-serif;color:#454A50} #rn-toc ul{list-style:none;margin:0;padding:0} #rn-toc li.rn-ls{margin:0;padding:0;border-top:1px solid #DDD3C2} #rn-toc a,#rn-toc a:hover,#rn-toc a:visited{color:inherit;text-decoration:none!important;-webkit-tap-highlight-color:transparent;cursor:pointer} #rn-toc .rn-lk{display:flex;align-items:center;gap:8px;min-height:44px;font:400 16px/1.3 "Atkinson Hyperlegible",Verdana,sans-serif;color:#1A1C1E;border-radius:8px} #rn-toc .rn-lk:hover,#rn-toc .rn-lk:active{background:#F4EEDF} #rn-toc .rn-lk:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #2D5C45} #rn-toc .rn-n{flex:none;width:24px;font:700 14px/1 "Atkinson Hyperlegible",Verdana,sans-serif;color:#454A50;text-align:center} #rn-toc .rn-t{flex:1;min-width:0} #rn-toc .rn-k{flex:none;padding:1px 9px;border-radius:999px;background:#E8EFE9;color:#2D5C45;font:700 13px/1.6 "Atkinson Hyperlegible",Verdana,sans-serif;white-space:nowrap} #rn-toc li.rn-ls.done .rn-t{color:#5C6169} #rn-toc li.rn-ls.done .rn-n{color:#2D5C45} #rn-toc li.rn-ls.done .rn-n::before{content:"\2713"} #rn-toc li.rn-ls.done .rn-n span{display:none} #rn-toc .rn-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} #rn-toc .rn-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid #2D5C45;border-radius:var(--rn-wob-sm);background:#FFFDF8;font:700 15px "Atkinson Hyperlegible",Verdana,sans-serif;color:#2D5C45!important} #rn-toc .rn-chip:hover,#rn-toc .rn-chip:active{background:#E8EFE9} #rn-toc .rn-chip:focus-visible{outline:0;box-shadow:0 0 0 3px #fff,0 0 0 5px #2D5C45} #rn-toc .rn-chip.done::before{content:"\2713\00a0"} /* « Ce que tu fais aujourd'hui » on the lab landing pages: the icon of each highlight card is replaced by a sticker, with CSS only (nth-child), so it survives MCG's client-side navigation. The poses come from the unit data: --rn-st1..4 are set per lab by the critical