:root{--forest:#2f6b4f;--deep:#173e30;--ink:#243b30;--cream:#f7f3ea;--paper:#fffdf8;--muted:#70776c;--line:#e6e5d9;--pale:#e5ecdF;--success:#ddefd9;--orange:#d98340;--red:#a23e37;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',system-ui,-apple-system,sans-serif;font-family:var(--sans);font-size:16px;color:var(--ink);background:#0f2a22;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 65% 35%,#234b3a 0,#142f26 40%,#0b211b 90%);min-height:100dvh}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit}button{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:500}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b5702e;outline-offset:4px}button{touch-action:manipulation}svg{display:inline-block;vertical-align:middle;flex-shrink:0}img{max-width:100%;display:block}.phone{position:relative;width:100%;max-width:430px;margin:auto;background:var(--cream);min-height:100dvh;overflow:clip;box-shadow:0 20px 100px #0003}.screen{min-height:100dvh;animation:enter .24s ease-out;padding-bottom:105px}.screen-inner{padding:26px 24px}.desktop-brand,.desktop-note{display:none}.eyebrow{text-transform:uppercase;font-size:.67rem;letter-spacing:.19em;font-weight:650}.button{border:0;border-radius:16px;min-height:56px;padding:16px 20px;background:var(--forest);color:#fff;font-weight:650;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .16s,background .16s,box-shadow .16s;box-shadow:0 4px 10px #214b2710}.button:hover{background:#24543d;transform:translateY(-1px)}.button:active{transform:scale(.985)}.button:disabled{background:#deded2;color:#848779;transform:none;box-shadow:none}.button.cream{background:#fbf7ed;color:var(--deep)}.button.outline{background:transparent;border:1px solid #cbd5c8;color:var(--forest);box-shadow:none}.button.secondary{background:#e6ebdf;color:var(--forest);box-shadow:none}.text-button{background:none;border:0;min-height:44px;font-size:.875rem;color:var(--forest);font-weight:600;padding:10px}.icon-button{width:44px;height:44px;flex:0 0 44px;border:0;background:transparent;display:grid;place-items:center;border-radius:50%;color:var(--deep)}.icon-button:hover{background:#e7ebdf}.muted{color:var(--muted)}.small{font-size:.8rem;line-height:1.6}.serif{font-family:var(--serif)}.stack{display:grid;gap:16px}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.section-title{display:flex;justify-content:space-between;align-items:center;margin:26px 0 14px}.section-title h2{font-size:1.4rem}.section-title .text-button{font-size:.8rem}.tag{font-size:.67rem;letter-spacing:.07em;font-weight:700;text-transform:uppercase}.pill{padding:7px 11px;border-radius:100px;background:#e9ede2;font-size:.75rem;font-weight:600;display:inline-flex;align-items:center;gap:5px}.pill.orange{background:#fbecdd;color:#9c572a}.brandmark{width:49px;height:49px;border-radius:15px;background:var(--forest);display:grid;place-items:center;color:#fff}.brand{display:flex;align-items:center;gap:11px}.wordmark{font-family:var(--serif);font-size:1.8rem;letter-spacing:-.07em}.brand .brandmark{width:38px;height:38px;border-radius:11px}.brand .brandmark svg{width:26px}.card{background:var(--paper);border:1px solid #ebe8dc;border-radius:22px;box-shadow:0 3px 8px #283c2903}.divider{height:1px;background:var(--line);margin:22px 0}.skip-link{position:fixed;top:-80px;left:12px;z-index:200;background:white;color:#123;padding:15px}.skip-link:focus{top:12px}.noscript{color:white;padding:20px}.loading-error{padding:50px 25px;min-height:100dvh;display:grid;place-content:center;gap:20px}.hidden{display:none!important}
/* Full-height welcome, inspired by an editorial travel cover. */
.splash{position:relative;isolation:isolate;min-height:100dvh;display:flex;flex-direction:column;background:#294d3c url('../assets/mountains.webp') center 38%/cover;color:#fffdf2;padding:35px 30px 24px}.splash:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0b221d18 10%,#112c2440 36%,#102b22ed 78%,#102b22 100%)}.splash-top{display:flex;justify-content:space-between;align-items:center;color:#fcfaedcf}.splash-top .eyebrow{font-size:.58rem;letter-spacing:.2em}.splash-top .edition{border:1px solid #ffffff50;border-radius:100px;padding:6px 9px;font-size:.6rem}.splash-content{margin-top:auto;padding-top:225px;text-align:center}.splash-content .brandmark{margin:0 auto 9px;background:#f9f5e912;border:1px solid #f9f5e936;backdrop-filter:blur(8px);width:55px;height:55px}.splash h1{font-size:4.6rem;letter-spacing:-.07em;line-height:1.05;margin-bottom:16px}.splash-tagline{font-family:var(--serif);font-size:1.85rem;line-height:1.2;letter-spacing:-.03em}.splash-description{font-size:.85rem;line-height:1.6;color:#e2e7d9;margin:16px 0 27px}.splash .button{min-height:58px}.splash-login{color:#f8f4e7;font-size:.8rem;min-height:46px;margin-top:6px;background:none;border:none;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#ffffff60}.splash-bottom{border-top:1px solid #ffffff21;padding-top:19px;margin-top:24px;text-align:center}.splash-bottom .ce{font-family:var(--serif);font-size:.86rem}.splash-bottom .translation{font-size:.62rem;color:#f7f4e7a6;line-height:1.6;margin-top:6px}.splash-bottom .eyebrow{font-size:.57rem;letter-spacing:.16em;margin-bottom:13px}
/* Home and persistent navigation. */
.home-header{padding:27px 24px 20px;display:flex;align-items:center;gap:11px}.avatar{height:46px;width:46px;border-radius:50%;display:grid;place-items:center;background:#e2e8d8;border:3px solid #fffdf5;color:var(--forest);font-family:var(--serif);font-size:1.25rem}.home-header .greeting{font-size:1.4rem;font-family:var(--serif);letter-spacing:-.03em}.home-header .header-sub{font-size:.68rem;color:var(--muted);margin-top:3px}.streak{margin-left:auto;color:#ab622e;background:#faeadd;border:1px solid #efd7c4;display:flex;align-items:center;gap:4px;padding:8px 9px;border-radius:13px;font-size:.76rem;white-space:nowrap}.home-body{padding:0 24px}.daily-card{padding:17px 17px 16px}.daily-icon{background:#e7efdf;min-width:37px;height:37px;border-radius:12px;color:var(--forest);display:grid;place-items:center}.daily-card h2{font-family:var(--sans);font-size:.82rem;font-weight:650;margin:1px 0 4px}.daily-card p{font-size:.7rem;color:var(--muted)}.progress-line{display:flex;align-items:center;gap:10px;margin-top:14px}.progress-track{flex:1;background:#e8e9de;border-radius:10px;height:6px;overflow:hidden}.progress-fill{height:100%;background:var(--forest);border-radius:inherit;transition:width .4s ease}.progress-label{font-size:.67rem;color:var(--muted)}.landscape-banner{position:relative;isolation:isolate;min-height:150px;border-radius:22px;overflow:hidden;margin-top:20px;background:#637555 url('../assets/mountains.webp') center 36%/cover;padding:25px 22px;color:#fff8e7;display:flex;flex-direction:column;justify-content:end}.landscape-banner:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#153927a6,#1539270a);z-index:-1}.landscape-banner .eyebrow{font-size:.56rem;letter-spacing:.17em;margin-bottom:9px}.landscape-banner p{font-family:var(--serif);font-size:1.38rem;line-height:1.3;max-width:250px;font-style:italic;text-shadow:0 1px 15px #15392755}.continue-card{padding:19px 18px;background:#e8eedf;border:1px solid #d7dfcd;display:flex;align-items:center;gap:16px;width:100%;text-align:left;border-radius:20px;transition:background .2s}.continue-card:hover{background:#e0e9d3}.continue-card .tag{color:#557050;font-size:.58rem;letter-spacing:.11em}.continue-card h3{font-family:var(--serif);font-size:1.3rem;margin:7px 0}.meta{display:flex;align-items:center;gap:4px;font-size:.66rem;color:var(--muted)}.play-circle{margin-left:auto;border-radius:50%;background:var(--forest);color:white;width:46px;height:46px;display:grid;place-items:center;flex-shrink:0;box-shadow:0 4px 9px #1f593125}.course-list{display:grid;gap:12px}.course-card{display:flex;align-items:center;gap:14px;padding:15px 14px;width:100%;border:1px solid #e5e4d8;text-align:left;background:#fffdf7;border-radius:18px;box-shadow:0 2px 4px #263b2702}.course-card:hover{border-color:#a7b69c}.course-level{width:48px;height:53px;display:grid;place-content:center;gap:2px;border-radius:13px;background:#e7ecdf;font-family:var(--serif);font-size:1.2rem;text-align:center;flex-shrink:0}.course-level span{font-family:var(--sans);font-size:.43rem;font-weight:600;letter-spacing:.08em}.course-card:nth-child(2) .course-level{background:#efe5d6;color:#796445}.course-card:nth-child(3) .course-level{background:#e4e9e6;color:#527264}.course-card h3{font-family:var(--sans);font-size:.86rem;font-weight:650;margin-bottom:4px}.course-card p{font-size:.65rem;line-height:1.5;color:var(--muted)}.course-card>.icon{margin-left:auto;color:#8c9687}.home-footnote{text-align:center;font-family:var(--serif);font-style:italic;font-size:.78rem;color:#909781;margin:25px 0 6px}.bottom-nav{position:fixed;z-index:20;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;display:grid;grid-template-columns:repeat(4,1fr);padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:#fbf9f1f7;backdrop-filter:blur(20px);border-top:1px solid #e7e6da;box-shadow:0 -5px 20px #20332103}.nav-item{background:none;border:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-height:48px;color:#8c9385;font-size:.64rem;font-weight:500}.nav-item.active{color:var(--forest)}.nav-item.active .nav-icon{background:#e6eddc}.nav-icon{width:44px;height:27px;display:grid;place-items:center;border-radius:10px}.page-top{padding:25px 22px 18px;display:flex;align-items:center;justify-content:space-between}.page-top h1{font-size:1.55rem}.section-heading{font-size:1.9rem;letter-spacing:-.04em;margin:0 0 8px}.intro-text{font-size:.86rem;line-height:1.65;color:var(--muted)}
/* Course trail. */
.course-hero{padding:5px 26px 22px}.course-hero h1{font-size:2rem;letter-spacing:-.045em;margin:10px 0}.tabs{display:flex;margin:0 24px;padding:5px;background:#ebece1;border-radius:13px}.tab{flex:1;border:0;min-height:44px;background:none;border-radius:9px;color:#727c6b;font-size:.86rem;font-weight:550}.tab.active{background:var(--paper);color:var(--forest);box-shadow:0 2px 5px #1833240b}.trail{padding:28px 24px 10px;list-style:none;margin:0}.trail-step{position:relative;display:flex;gap:17px;padding-bottom:19px;align-items:center}.trail-step:not(:last-child):before{position:absolute;content:'';left:26px;top:52px;bottom:0;border-left:2px dashed #cdd5c4}.trail-node{position:relative;z-index:1;flex-shrink:0;width:54px;height:54px;background:#e7e9dd;border:5px solid var(--cream);border-radius:50%;color:#9ca493;display:grid;place-items:center}.trail-step.current .trail-node{background:var(--forest);color:white;box-shadow:0 0 0 1px var(--forest)}.trail-step.done .trail-node{background:#d9e8ce;color:var(--forest)}.trail-card{flex:1;border:1px solid transparent;background:transparent;text-align:left;border-radius:17px;padding:15px 13px;display:flex;justify-content:space-between;align-items:center;min-height:83px}.trail-card h3{font-size:.93rem;font-family:var(--sans);font-weight:600;margin:6px 0}.trail-card .tag{font-size:.55rem;color:#828c77}.trail-card .meta{font-size:.65rem}.current .trail-card{background:#e8eedf;border-color:#c9d9bf}.locked .trail-card{opacity:.62}.trail-card:disabled{cursor:not-allowed}.trail-quote{margin:12px 24px 25px;border-radius:20px;min-height:145px;background:#dce2cd url('../assets/mountains.webp') center 20%/cover;display:flex;flex-direction:column;justify-content:end;padding:23px;text-align:center;position:relative;isolation:isolate;overflow:hidden;color:white}.trail-quote:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#163e30e6,#163e3022);z-index:-1}.trail-quote p{font-family:var(--serif);font-size:1.1rem;line-height:1.4}.trail-quote small{font-size:.65rem;margin-top:7px;color:#f2f4e2}.detail-panel{padding:25px}.detail-panel p,.detail-panel li{font-size:.88rem;line-height:1.8;color:#65715e}.detail-panel h2{font-size:1.5rem;margin-bottom:13px}.detail-panel ul{padding-left:20px}.detail-chip{display:flex;align-items:center;gap:9px;margin-top:15px;font-size:.86rem;color:var(--forest)}
/* Lesson flow. */
.lesson-screen{padding-bottom:130px;min-height:100dvh}.lesson-header{display:flex;align-items:center;gap:14px;padding:24px 20px 14px}.lesson-header .icon-button{color:#ab7465;width:35px;flex-basis:35px}.lesson-header .progress-track{height:8px}.lesson-count{font-size:.72rem;white-space:nowrap;color:#78836e}.lesson-body{padding:20px 25px}.lesson-heading{font-size:1.9rem;letter-spacing:-.04em;margin:7px 0 10px;line-height:1.2}.lesson-description{font-size:.85rem;color:var(--muted);line-height:1.65}.lesson-kicker{font-size:.63rem;letter-spacing:.13em;color:#72816a;font-weight:600}.character-wrap{height:245px;display:flex;align-items:center;justify-content:center;position:relative;margin:8px 0 -2px}.character-wrap:before{content:'';height:183px;width:183px;background:#e8eadb;border-radius:50%;position:absolute;bottom:15px}.character{height:240px;width:auto;object-fit:contain;position:relative;z-index:1;mix-blend-mode:multiply}.word-card{padding:24px 18px;text-align:center;position:relative}.word-card .ce-word{font-family:var(--serif);font-size:1.58rem;line-height:1.4;overflow-wrap:anywhere}.word-card .phonetic{font-size:.8rem;color:#7c8472;margin-top:7px}.audio-button{border:none;background:#e9efdf;color:var(--forest);width:45px;height:45px;display:inline-grid;place-items:center;border-radius:50%;margin-top:16px}.audio-button:hover{background:#dce8cc}.translation-card{padding:17px 19px;margin-top:13px;background:#eceee2;border:1px solid #e0e4d6;border-radius:17px}.translation-card .tag{font-size:.56rem;color:#8b927f}.translation-card p{font-size:.88rem;line-height:1.6;margin-top:6px}.lesson-dock{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--cream);padding:18px 24px calc(20px + env(safe-area-inset-bottom));z-index:15;border-top:1px solid #e6e6d9}.lesson-dock .small{text-align:center;margin-bottom:10px}.choices{display:grid;gap:12px;margin-top:26px}.choice{background:var(--paper);border:1.5px solid #dedfd3;border-radius:17px;min-height:63px;padding:15px 17px;display:flex;align-items:center;gap:14px;text-align:left;font-size:.95rem;transition:.18s}.choice-label{width:28px;height:28px;border:1px solid #e2e4d8;border-radius:8px;display:grid;place-items:center;font-size:.72rem;color:#8c937d;flex-shrink:0}.choice.selected{border-color:var(--forest);background:#e9efdf}.choice.correct{border-color:#7ca266;background:#e1efd9}.choice.wrong{border-color:#c28376;background:#f9e7df}.choice.correct .choice-label{background:var(--forest);border-color:var(--forest);color:white}.choice.wrong .choice-label{color:var(--red);border-color:#c28376}.choice .result-icon{margin-left:auto}.feedback-dock{background:var(--success);border-top:1px solid #cfdfc5}.feedback-dock.error{background:#f6e3dd;border-color:#eccac0}.feedback-title{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:1.13rem;font-weight:600;color:#37632c}.feedback-dock.error .feedback-title{color:#994337}.feedback-copy{font-size:.83rem;line-height:1.5;margin-bottom:16px}.feedback-dock.error .button{background:#ac6251}.exercise-word{margin:30px 0 15px;padding:23px 18px}.exercise-word .ce-word{font-size:1.85rem}.tile-answer{min-height:125px;margin:27px 0 24px;padding:15px;background:#eeeee3;border-radius:17px;border:1.5px dashed #c7cebd;display:flex;align-content:flex-start;flex-wrap:wrap;gap:8px}.tile-answer:empty:before{content:'Touche les mots dans le bon ordre';font-size:.82rem;color:#8d9681;padding:18px 10px;line-height:1.6}.tile-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.word-tile{min-height:46px;padding:10px 14px;background:var(--paper);border:1px solid #d4dac9;border-bottom:3px solid #d4dac9;border-radius:12px;font-size:1rem}.word-tile:hover{background:#edf2e5}.word-tile:disabled{opacity:.32}.tile-answer .word-tile{background:#fffef8}.large-audio{width:100px;height:100px;border-radius:28px;background:var(--forest);border:0;color:white;display:grid;place-items:center;margin:30px auto 12px;box-shadow:0 0 0 12px #e7edde}.audio-sub{text-align:center;color:var(--muted);font-size:.77rem;margin:23px 0 10px}.audio-fallback{border-radius:12px;background:#eeeee2;font-size:.79rem;line-height:1.55;padding:12px 15px;margin-top:15px;color:#626e59}.mic-button{width:92px;height:92px;border:0;border-radius:50%;background:var(--forest);color:white;display:grid;place-items:center;margin:28px auto 17px;box-shadow:0 0 0 12px #e5ebdb,0 0 0 24px #edefe3}.mic-button.recording{background:#b65f50;animation:pulse 1.5s infinite}.record-label{text-align:center;font-size:.85rem;color:var(--forest);margin:20px 0}.record-controls{text-align:center}.record-controls audio{max-width:100%;height:40px;margin-top:8px}.record-note{font-size:.73rem;line-height:1.6;text-align:center;color:#858d7a;margin-top:16px}.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}.match-column{display:grid;gap:12px}.match-button{min-height:70px;border:1px solid #dce0d2;border-radius:14px;background:var(--paper);padding:12px 9px;font-size:.88rem}.match-button.selected{border-color:var(--forest);background:#e8efde}.match-button.matched{background:#deebd3;color:#426f35;border-color:#b8cea8;opacity:.8}.match-button.wrong{animation:shake .3s;background:#f6e1db}.match-count{text-align:center;font-size:.75rem;color:var(--muted);margin-top:21px}.success-screen{padding:35px 25px 38px;min-height:100dvh;text-align:center;position:relative;overflow:hidden}.success-screen .brand{justify-content:center}.success-screen .character-wrap{height:240px;margin-top:15px}.success-screen .character{height:235px}.success-screen h1{font-size:2rem;letter-spacing:-.04em;margin:12px 0}.success-screen>.muted{font-size:.87rem;line-height:1.6}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:28px 0 25px}.stat{padding:17px 5px 15px;border-radius:17px;border:1px solid #e4e4d4;background:var(--paper)}.stat-icon{color:#8a9e70;margin-bottom:7px}.stat.orange .stat-icon{color:var(--orange)}.stat strong{display:block;font-size:1.17rem;color:var(--deep);margin:4px 0}.stat span{font-size:.6rem;color:var(--muted)}.success-quote{font-family:var(--serif);font-size:1.2rem;line-height:1.5;margin:20px 15px 26px;font-style:italic;color:#667958}.success-screen .button+.button{margin-top:10px}.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-20px;width:7px;height:11px;border-radius:2px;animation:fall 3s ease-in forwards;opacity:0}
/* Progress, profile, introduction footer, modal. */
.progress-summary{padding:23px;margin-bottom:22px;text-align:center}.progress-summary .big-number{font-family:var(--serif);font-size:3.2rem;color:var(--forest)}.week{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:20px 0 5px}.day-cell{text-align:center;font-size:.62rem;color:var(--muted)}.day-circle{width:31px;height:31px;border-radius:50%;background:#eceee2;display:grid;place-items:center;margin:9px auto;color:#8d9880}.day-circle.complete{background:var(--forest);color:white}.day-circle.today{outline:1px solid var(--forest);outline-offset:3px}.history-item{padding:16px;display:flex;align-items:center;gap:12px}.history-item h3{font-size:.87rem;font-family:var(--sans);margin-bottom:4px}.empty-state{padding:32px 24px;text-align:center}.empty-state h2{font-size:1.45rem;margin:15px 0 10px}.empty-state p{font-size:.85rem;line-height:1.65;color:var(--muted);margin-bottom:20px}.profile-card{padding:24px;text-align:center;margin-bottom:22px}.profile-card .avatar{width:68px;height:68px;font-size:1.9rem;margin:0 auto 12px}.profile-card h2{font-size:1.6rem;margin-bottom:7px}.field{display:grid;gap:8px;margin-bottom:18px;text-align:left}.field label{font-size:.78rem;font-weight:600}.field input,.field select{min-height:49px;border:1px solid #d9decf;border-radius:12px;background:#fffdf7;padding:12px 14px;width:100%;color:var(--ink)}.settings-row{width:100%;border:0;border-bottom:1px solid #e5e7da;background:none;padding:18px 0;display:flex;align-items:center;gap:12px;text-align:left;font-size:.88rem;min-height:58px}.settings-row>svg:last-child{margin-left:auto;color:#a0aa95}.settings-row.danger{color:#a64e42}.profile-note{font-size:.75rem;line-height:1.7;color:var(--muted);margin:23px 0}.marketing-footer{background:#102e24;color:#f3f1e3;padding:38px 25px 30px}.marketing-footer .brandmark{background:#f6f3e413}.marketing-footer .wordmark{font-size:2rem}.marketing-footer .footer-tagline{font-family:var(--serif);font-size:1.5rem;margin:20px 0 23px}.footer-features{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;padding:20px 0;border-block:1px solid #ffffff1a}.footer-features span{font-size:.75rem;display:flex;gap:9px;align-items:center;color:#dee7d4}.footer-quote{font-family:var(--serif);font-size:1rem;text-align:center;line-height:1.6;margin-top:24px}.footer-translation{font-size:.65rem;text-align:center;line-height:1.6;color:#b2c4a7;margin:7px 0 20px}.footer-bottom{font-size:.6rem;color:#91a38a;display:flex;justify-content:space-between}.about-body{padding:24px}.about-body p{font-size:.9rem;line-height:1.8;margin:14px 0}.about-body h2{font-size:1.5rem;margin-top:24px}dialog{border:0;border-radius:24px;background:var(--cream);color:var(--ink);width:calc(100% - 40px);max-width:370px;padding:27px;box-shadow:0 15px 60px #102b2260}dialog::backdrop{background:#071c15a6;backdrop-filter:blur(4px)}dialog h2{font-size:1.65rem;margin-bottom:12px}dialog p{font-size:.88rem;line-height:1.7;color:var(--muted);margin:12px 0 22px}dialog .button{margin-top:10px}dialog .close-modal{position:absolute;right:12px;top:10px}#toast{position:fixed;z-index:100;left:50%;bottom:100px;transform:translateX(-50%) translateY(15px);width:max-content;max-width:min(380px,calc(100% - 35px));padding:13px 18px;background:#183c2f;color:white;border-radius:14px;box-shadow:0 5px 20px #0002;font-size:.8rem;line-height:1.5;opacity:0;pointer-events:none;transition:.2s}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{50%{box-shadow:0 0 0 17px #eadbd4,0 0 0 29px #eee5dd}}@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(650px) rotate(480deg)}}
@media(min-width:760px){body{padding:28px 0}.phone{border-radius:30px;min-height:calc(100dvh - 56px);box-shadow:0 0 0 1px #e9eed81a,0 35px 100px #0004}.screen,.lesson-screen,.success-screen{min-height:calc(100dvh - 56px)}.splash{min-height:calc(100dvh - 56px);padding-top:32px}.splash-content{padding-top:170px}.bottom-nav{bottom:28px;border-radius:0 0 30px 30px}.lesson-dock{bottom:28px;border-radius:0 0 30px 30px}.desktop-brand{position:fixed;left:5vw;top:44px;color:#e5e5cf;display:grid;gap:26px}.desktop-wordmark{font-family:var(--serif);font-size:2rem;letter-spacing:-.07em}.desktop-wordmark span{font-family:var(--sans);font-size:.65rem;margin-left:4px;vertical-align:super}.desktop-brand>span:last-child{font-size:.6rem;letter-spacing:.2em;line-height:1.8;color:#b8c5ae}.desktop-note{position:fixed;left:5vw;bottom:45px;display:grid;gap:11px;color:#a9bda4}.desktop-note span:first-child{font-size:.5rem;letter-spacing:.18em}.desktop-note span:last-child{font-family:var(--serif);font-size:.85rem;font-style:italic}.phone:focus{outline:none}}
@media(max-width:360px){.screen-inner,.home-body{padding-left:18px;padding-right:18px}.home-header{padding-left:18px;padding-right:18px}.home-header .header-sub{max-width:155px;font-size:.61rem}.splash{padding-left:24px;padding-right:24px}.lesson-body{padding-left:20px;padding-right:20px}.stats-row{gap:6px}.word-card .ce-word{font-size:1.38rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.confetti{display:none}}
/* Keep small-screen metadata readable without changing the visual hierarchy. */
.header-sub,.home-header .header-sub,.daily-card p,.progress-label,.meta,.trail-card .meta,.audio-sub,.course-card p,.home-footnote,.nav-item,.day-cell,.stat span,.footer-translation,.footer-bottom,.splash-bottom .translation{font-size:.75rem}
.daily-card h2,.course-card h3{font-size:.875rem}
.course-level span,.tag,.trail-card .tag,.continue-card .tag,.lesson-kicker,.translation-card .tag{font-size:.65rem}
.pill{font-size:.75rem}.home-header .greeting{max-width:215px;overflow-wrap:anywhere}.home-header>div:nth-child(2){min-width:0;flex:1}.avatar{flex-shrink:0}.streak{flex-shrink:0}
@media(min-width:760px) and (max-width:1000px){.desktop-brand,.desktop-note{display:none}}
@media(max-width:360px){.streak{font-size:.7rem;padding:7px}.home-header .header-sub{font-size:.7rem}.home-header .greeting{font-size:1.25rem}.home-header{gap:8px}.home-header .avatar{width:39px;height:39px}}
/* Touch targets, readable secondary text and the desktop phone frame. */
:root{--muted:#626c5c}
.nav-item{color:#66715e}.meta,.progress-label,.home-footnote,.course-card p,.trail-card .tag,.tag,.lesson-kicker,.translation-card .tag{color:#66715e}
.trail-card .tag,.continue-card .tag,.lesson-kicker,.translation-card .tag{font-size:.75rem}
.lesson-header .icon-button{width:44px;flex-basis:44px}.home-header .avatar{width:46px;height:46px}
@media(min-width:760px){.phone{height:calc(100dvh - 56px);overflow-y:auto;scrollbar-width:none}.phone::-webkit-scrollbar{display:none}}

/* Latin reading is primary; the original spelling is an optional reference. */
.original-script{display:block;font-size:.62em;font-weight:400;line-height:1.5;margin-top:8px;opacity:.7;overflow-wrap:anywhere}
.choice .original-script,.match-button .original-script{font-size:.78em}
.ce-word,.choice,.match-button,.word-tile{overflow-wrap:anywhere}
.reading-help{display:block;min-height:44px;margin:8px auto 0;border:0;background:transparent;color:var(--green,#2f6b4f);font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.reading-help span{display:block;font-size:10px;color:#62685f;text-decoration:none}
.script-toggle{justify-content:space-between;gap:12px}.script-toggle strong{font-size:12px}
.reading-guide{font-size:14px;line-height:1.6}.reading-guide dt{font-weight:700;margin-top:16px}.reading-guide dd{margin:4px 0 0}
dialog{max-height:85dvh;overflow-y:auto}

.lesson-plan{padding:24px;text-align:left}.lesson-plan h2,.explanation-card h2{font-size:18px;margin:0 0 12px}.lesson-plan ol{padding-left:20px;line-height:1.8}.lesson-plan p{font-size:12px;color:#62685f;margin-top:16px}
.study-card{margin-top:24px}.study-card .ce-word{margin-top:16px}.study-meaning{font-size:20px;margin:14px 0}.usage-note{font-size:13px;background:#e9edde;border-radius:10px;padding:10px;line-height:1.5}
.explanation-card,.context-card{background:#ecefdf;border-radius:18px;padding:20px;margin-top:20px;line-height:1.65;text-align:left}.explanation-card p{margin:0}.lesson-reference{margin:22px auto 10px;min-height:44px;display:flex;align-items:center;gap:8px}
.dialogue-context{line-height:1.65;margin:18px 0}.dialogue-lines{display:grid;gap:15px;margin:20px 0}.dialogue-bubble{background:#fffdfa;border:1px solid #e8e3d8;border-radius:20px 20px 20px 4px;padding:18px;margin-right:20px}.dialogue-bubble.reply{background:#e7eddf;border-radius:20px 20px 4px 20px;margin-right:0;margin-left:20px}.dialogue-ce{font-size:19px;margin:10px 0 4px;overflow-wrap:anywhere}.dialogue-fr{font-size:14px;color:#62685f;margin:0 0 12px}.review-list section{padding:14px 0;border-bottom:1px solid #e8e3d8}.review-list h3{font-size:19px;margin:0 0 8px}.review-list p{line-height:1.55}

.alternative-card{margin-top:18px;padding:20px;border:1px solid #d4ddc9;border-radius:18px;text-align:left;background:#fafbf5}.alternative-card p{line-height:1.6}.source-reference{display:block;margin:18px auto;min-height:44px;font-size:12px}.branch-note{display:block;font-size:11px;line-height:1.5;color:#68725f;margin:6px 0;max-width:220px}

/* Course library: an editorial catalogue, separate from the daily dashboard. */
.catalogue-header{padding:30px 24px 23px;display:flex;justify-content:space-between;align-items:center;gap:12px}.catalogue-eyebrow{display:block;font-size:.75rem;font-weight:650;letter-spacing:.09em;line-height:1.5}.catalogue-header .catalogue-eyebrow{color:var(--muted);margin-bottom:7px}.catalogue-header h1{font-size:2rem;letter-spacing:-.055em}.catalogue-mark{width:48px;height:48px;background:#e5eadd;border-radius:16px;display:grid;place-items:center;flex-shrink:0;color:#32563e}.catalogue-switch{display:flex;margin:0 24px;padding:5px;background:#e9e9df;border-radius:15px;gap:5px}.catalogue-switch button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:none;border:0;min-height:46px;border-radius:11px;font-size:.875rem;font-weight:600;color:#606b5e}.catalogue-switch button.active{background:#fffdf8;color:#244e39;box-shadow:0 2px 8px #12281b0b}.catalogue-body{padding:23px 24px 12px}.library-cover{background:#204b39;color:#fff9e9;padding:25px 24px 0;border-radius:23px;overflow:hidden}.library-cover .catalogue-eyebrow{color:#d0dec0;font-size:.68rem}.library-cover h2{font-size:2.05rem;line-height:1.15;letter-spacing:-.04em;margin:16px 0 13px}.library-cover h2 em{color:#d8d8ae;font-weight:400}.library-cover p{font-size:.875rem;line-height:1.6;color:#e1e7d8}.library-cover-stats{display:flex;justify-content:space-between;gap:12px;margin-top:23px;padding:16px 0 19px;border-top:1px solid #ffffff26;font-size:.75rem;color:#d6e2ca}.library-cover-stats strong{font-family:var(--serif);font-size:1.4rem;font-weight:400;color:#fffdf2;margin-right:3px}.catalogue-section-heading{margin:29px 0 15px;display:flex;justify-content:space-between;align-items:center;gap:10px}.catalogue-section-heading h2{font-size:1.4rem;letter-spacing:-.035em}.catalogue-section-heading>span{font-size:.75rem;color:#566d51;white-space:nowrap}.catalogue-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}.catalogue-filters button{min-height:44px;border:1px solid #dce0d2;background:transparent;border-radius:30px;padding:9px 15px;font-size:.875rem}.catalogue-filters button.active{background:#2e6047;border-color:#2e6047;color:#fff}.catalogue-tracks{display:grid;gap:22px}.catalogue-track{border:1px solid #e0e3d6;border-radius:21px;background:#fffdf8;overflow:hidden}.track-heading{display:flex;align-items:center;gap:11px;padding:21px 19px 0}.track-symbol{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:14px;background:#edf0dd;color:#506535}.track-a1 .track-symbol{background:#e1ebdf;color:#275b40}.track-a2 .track-symbol{background:#f5e9d6;color:#856039}.track-heading>div{flex:1}.track-heading .catalogue-eyebrow{font-size:.68rem;color:#69765f;letter-spacing:.065em}.track-heading h3{font-size:1.4rem;margin-top:4px;letter-spacing:-.035em}.track-fraction{font-size:.875rem;color:#626f59}.track-description{font-size:.875rem;line-height:1.5;color:#626c5c;padding:13px 19px}.track-progress{height:4px;background:#edf0e3;margin:0 19px 17px;border-radius:8px;overflow:hidden}.track-progress span{display:block;background:#56825a;height:100%}.catalogue-lessons{list-style:none;padding:0;margin:0}.catalogue-lessons li{border-top:1px solid #eeeee3}.catalogue-lesson{border:0;background:none;width:100%;text-align:left;padding:17px 18px;display:flex;align-items:center;gap:12px;min-height:82px}.catalogue-lesson:hover{background:#f1f4e9}.catalogue-number{width:30px;height:34px;display:grid;place-items:center;color:#376344;font-size:.875rem;flex-shrink:0}.is-complete .catalogue-number{background:#e3edd9;border-radius:11px}.is-locked .catalogue-number{color:#78826f}.catalogue-lesson-copy{flex:1;min-width:0}.catalogue-lesson-copy strong{display:block;font-size:1rem;line-height:1.4;font-weight:550}.catalogue-lesson-copy small{display:block;font-size:.75rem;line-height:1.6;color:#62705b;margin-top:5px}.is-open .catalogue-lesson-copy small{color:#397149}.is-locked .catalogue-lesson-copy strong{color:#64715c}.training-callout{width:100%;display:flex;align-items:center;gap:13px;border:1px solid #d8e0ce;background:#eaf0e0;border-radius:19px;padding:17px 15px;text-align:left;margin-top:25px}.training-callout>span:nth-child(2){flex:1}.training-callout strong{display:block;font-size:.875rem;line-height:1.5}.training-callout small{display:block;font-size:.75rem;color:#5e6e55;margin-top:4px;line-height:1.4}.catalogue-note{font-size:.875rem;color:#64705e;line-height:1.7;margin:23px 0}.catalogue-empty{padding:26px 19px;background:#fffdf7;border:1px dashed #cfd9c5;border-radius:19px;text-align:center}.catalogue-empty h3{font-size:1.5rem;margin:13px 0}.catalogue-empty p{font-size:1rem;line-height:1.65;color:#66715e;margin-bottom:22px}.training-intro{padding:6px 0 26px}.training-intro .catalogue-eyebrow{color:#626f58}.training-intro h2{font-size:2.05rem;letter-spacing:-.04em;line-height:1.17;margin:14px 0}.training-intro h2 em{color:#55734b;font-weight:400}.training-intro p{font-size:1rem;line-height:1.65;color:#606d59;max-width:310px}.method-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px}.method-card{border:1px solid #dae3cf;border-radius:20px;padding:18px 16px;text-align:left;display:flex;align-items:flex-start;flex-direction:column;min-height:285px;background:#eaf0df;transition:transform .18s}.method-card:hover{transform:translateY(-3px)}.method-card.gold{background:#f4ecd9;border-color:#e9dfc7}.method-card.clay{background:#f5e7df;border-color:#ead8ce}.method-card.pine{background:#264f3e;border-color:#264f3e;color:#fffaea}.method-top{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:22px;gap:8px}.method-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#ffffff65;flex-shrink:0}.method-icon.sage{background:#e6eedc}.method-icon.gold{background:#f4ebd6}.method-icon.clay{background:#f2e5db}.method-icon.pine{background:#dfe9da}.method-index{font-size:.75rem;opacity:.65}.method-verb{font-size:.75rem;letter-spacing:.03em;color:#627455;margin-bottom:7px}.gold .method-verb{color:#7d673e}.clay .method-verb{color:#856052}.pine .method-verb{color:#d3ddc0}.method-card>strong{font-family:var(--serif);font-size:1.4rem;font-weight:500;line-height:1.15;letter-spacing:-.035em}.method-description{font-size:.875rem;line-height:1.55;display:block;margin:12px 0 22px;color:#52614c}.pine .method-description{color:#e1e5d7}.method-count{font-size:.75rem;font-weight:600;margin-top:auto;padding-top:12px;border-top:1px solid #223f2e21;width:100%;line-height:1.4}.pine .method-count{border-color:#ffffff2b}.practice-rule{display:flex;align-items:flex-start;gap:12px;padding:23px 0;color:#64715b}.practice-rule p{font-size:.875rem;line-height:1.65}.practice-heading{margin:0 0 25px}.practice-heading>.method-icon{width:62px;height:62px;margin-bottom:20px}.practice-heading h2{font-size:1.8rem;line-height:1.2;letter-spacing:-.04em;margin-bottom:13px}.practice-heading p{font-size:1rem;line-height:1.65;color:#63705b}.training-topics{display:grid;gap:12px}.training-topic{border:1px solid #dfe3d5;background:#fffdf7;display:flex;gap:14px;align-items:center;padding:21px 19px;border-radius:17px;width:100%;text-align:left}.training-topic>span{flex:1}.training-topic strong{font-size:1rem;font-weight:550;display:block;line-height:1.5}.training-topic small{font-size:.875rem;line-height:1.5;display:block;color:#6a755e;margin-top:6px}.memory-card{border:1px solid #dbe2cf;border-radius:25px;background:#fffdf7;padding:32px 22px;min-height:330px;margin-top:25px;text-align:center;display:flex;flex-direction:column;justify-content:center;box-shadow:0 5px 0 #e7e9dc,0 10px 0 -3px #eff0e6}.memory-card .catalogue-eyebrow{color:#607454}.memory-word{font-family:var(--serif);font-size:2rem;line-height:1.35;margin:28px 0;overflow-wrap:anywhere}.memory-card>p{font-size:.875rem;color:#6b745f;line-height:1.7}.memory-card.revealed{background:#edf2e3}.memory-answer{border-top:1px solid #d4dec8;padding-top:22px}.memory-answer h2{font-size:1.5rem;line-height:1.35;margin-bottom:15px}.memory-answer p{font-size:1rem;line-height:1.65;color:#52634b}.memory-decisions{display:flex;gap:10px}.memory-decisions .button{flex:1;padding:15px 10px}.practice-finish{padding:55px 25px 40px;text-align:center}.practice-complete-icon{display:grid;place-items:center;width:88px;height:88px;background:#e4edda;border-radius:50%;margin:0 auto 27px;color:#3a6544}.practice-finish h1{font-size:2.3rem;line-height:1.15;letter-spacing:-.045em;margin:17px 0}.practice-finish>p{line-height:1.65;color:#637258;margin-top:12px}.practice-result{padding:24px;background:#fffdf7;border:1px solid #e1e5d5;border-radius:20px;margin:25px 0}.practice-result strong{font-family:var(--serif);font-size:3rem;display:block}.practice-result span{font-size:.875rem;line-height:1.5;display:block;margin-top:6px}.practice-finish .button{margin-top:12px}
@media(max-width:360px){.catalogue-header{padding-left:18px;padding-right:18px}.catalogue-header h1{font-size:1.8rem}.catalogue-body{padding-left:18px;padding-right:18px}.catalogue-switch{margin-left:18px;margin-right:18px}.catalogue-section-heading{align-items:flex-start;flex-direction:column;gap:5px}.catalogue-filters{gap:5px}.catalogue-filters button{padding:8px 12px;font-size:.8rem}.method-grid{gap:10px}.method-card{padding:16px 12px}.method-card>strong{font-size:1.25rem}.method-description{font-size:.875rem}.method-top{gap:4px}.catalogue-lesson{padding-left:12px;padding-right:12px;gap:8px}.library-cover{padding-left:20px;padding-right:20px}.library-cover-stats{gap:8px;font-size:.7rem}.library-cover-stats strong{font-size:1.3rem}}

.phone:focus{outline:none}

/* One speaker, one phrase, one intentional gesture. */
.mascot-image{display:block;object-fit:contain;flex-shrink:0;mix-blend-mode:normal}
.mascot-welcome{display:flex;justify-content:center;align-items:flex-end;gap:12px;margin:22px 0 25px;padding:8px 0}.mascot-welcome .mascot-image{height:225px;width:calc(50% - 12px);max-width:150px}
.dialogue-cast{margin:20px 0 24px}.cast-people{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.cast-people figure{margin:0;text-align:center;flex:0 1 calc(50% - 14px)}.cast-people .mascot-image{width:48px;height:72px;margin:0 auto 6px}.cast-people figcaption{font-size:.75rem;line-height:1.5;color:#626e5b}
.illustrated-dialogue{gap:18px}.dialogue-turn{display:flex;align-items:flex-start;gap:8px}.dialogue-turn.turn-right{flex-direction:row-reverse}.speaker-portrait{width:58px;flex:0 0 58px;padding-top:2px}.speaker-portrait .mascot-image{width:58px;height:87px}.dialogue-turn .dialogue-bubble{flex:1;min-width:0;margin:0;padding:14px 16px;border-radius:5px 20px 20px 20px}.dialogue-turn.turn-right .dialogue-bubble{margin:0;border-radius:20px 5px 20px 20px;background:#f6e8e2;border-color:#ebdad2}.turn-header strong{font-size:.75rem;font-weight:600;color:#626e5b}.turn-header small{display:block;font-size:.75rem;color:#676f5d;line-height:1.5;margin:4px 0}.dialogue-turn .dialogue-ce{font-size:1.15rem;line-height:1.5;margin:0 0 5px}.turn-header+.dialogue-ce{margin-top:6px}.dialogue-turn .dialogue-fr{font-size:.875rem;line-height:1.65;margin:0}
.grammar-role{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fffdf7;border:1px solid #e1e5d8;border-radius:16px;margin-top:16px;text-align:left}.grammar-role .mascot-image{width:45px;height:68px}.grammar-role p{font-size:.875rem;line-height:1.55}.grammar-role small{display:block;font-size:.75rem;color:#68725e;line-height:1.6;margin-top:4px}.memory-answer .grammar-role{padding:10px;gap:8px}.memory-answer .grammar-role p{font-size:.875rem}.success-screen .mascot-welcome{margin-top:20px}.success-screen .mascot-welcome .mascot-image{height:210px}
@media(max-width:360px){.speaker-portrait{width:46px;flex-basis:46px}.speaker-portrait .mascot-image{width:46px;height:69px}.dialogue-turn{gap:6px}.dialogue-turn .dialogue-bubble{padding:12px}.mascot-welcome .mascot-image{height:195px}.dialogue-turn .dialogue-ce{font-size:1.05rem}}

/* =====================================================================
   Relief et lumière — finitions des accès aux cours (Claude, 2026-10-08)
   Couche ajoutée à la fin : complète les règles précédentes sans les
   réécrire. Idée : les cartes de cours sont des dalles de pierre, comme
   celles des tours du Caucase. Elles ont une épaisseur, une crête de
   montagnes gravée, s’inclinent vers la souris (js/relief.js) avec une
   lumière qui suit le curseur, et s’enfoncent quand on appuie.
   ===================================================================== */
:root{
 --ease-stone:cubic-bezier(.2,.8,.2,1);
 --edge-light:#d8dbca;          /* tranche des dalles claires */
 --edge-forest:#1d4532;         /* tranche des boutons verts */
 --drop:0 12px 22px -16px #173e3059;
 --drop-lifted:0 22px 34px -18px #173e3066,0 8px 14px -10px #173e3038;
 --ridge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64'%3E%3Cpath d='M0 56 26 38l14 9 26-27 18 18 6-5V16l3-5 3 5v20l10 6 20-22 16 17 13-9 22 18 20-11 38 23' fill='none' stroke='%232f6b4f' stroke-opacity='.13' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M0 62 34 49l22 7 30-17 28 14 30-12 26 11 34-9 36 16' fill='none' stroke='%232f6b4f' stroke-opacity='.07' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
 --ridge-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64'%3E%3Cpath d='M0 56 26 38l14 9 26-27 18 18 6-5V16l3-5 3 5v20l10 6 20-22 16 17 13-9 22 18 20-11 38 23' fill='none' stroke='%23fff6dc' stroke-opacity='.22' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M0 62 34 49l22 7 30-17 28 14 30-12 26 11 34-9 36 16' fill='none' stroke='%23fff6dc' stroke-opacity='.12' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Les dalles : cartes qui mènent à un cours ou à une leçon --- */
.course-card,.continue-card,.method-card,.training-callout,.training-topic,.trail-step.current .trail-card{
 --edge:var(--edge-light);
 position:relative;isolation:isolate;
 box-shadow:inset 0 1px 0 #ffffffd0,0 1px 0 var(--edge),0 5px 0 -1px var(--edge),var(--drop);
 transition:transform .45s var(--ease-stone),box-shadow .45s var(--ease-stone),background-color .25s,border-color .25s;
}
.continue-card{--edge:#c4d2b6;background:#e6eedb linear-gradient(160deg,#eef3e6 0,#e2ebd6 100%)}
.trail-step.current .trail-card{--edge:#c8d6bc}
.training-callout{--edge:#cbd7bf}
.method-card{--edge:#d0dac3}
.method-card.gold{--edge:#e0d1ae}
.method-card.clay{--edge:#e2c9ba}
.method-card.pine{--edge:#122f24;box-shadow:inset 0 1px 0 #ffffff1f,0 1px 0 var(--edge),0 5px 0 -1px var(--edge),var(--drop)}

/* La crête de montagnes gravée dans la pierre. */
.course-card,.continue-card{background-image:var(--ridge);background-repeat:no-repeat;background-size:150px auto;background-position:right 30px bottom -17px}
.continue-card{background-image:var(--ridge),linear-gradient(160deg,#eef3e6 0,#e2ebd6 100%);background-repeat:no-repeat,no-repeat;background-size:170px auto,100% 100%;background-position:right 74px bottom -19px,0 0}
.library-cover{position:relative;isolation:isolate;background-image:var(--ridge-light);background-repeat:no-repeat;background-size:190px auto;background-position:right -18px bottom 70px;box-shadow:0 1px 0 #0e2a1f,0 6px 0 -1px #0e2a1f,var(--drop)}

/* La lumière qui suit le curseur (variables posées par js/relief.js). */
.course-card::after,.continue-card::after,.method-card::after,.training-callout::after,.training-topic::after,.trail-step.current .trail-card::after{
 content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
 background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),#ffffffa8 0,#ffffff00 46%,#173e3010 100%);
 transition:opacity .4s var(--ease-stone);
}
.method-card.pine::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),#fff6dc33 0,#fff6dc00 50%,#00000026 100%)}
.is-tilting::after{opacity:1}

.continue-card:hover{background-color:#e0e9d3;background-image:var(--ridge),linear-gradient(160deg,#eaf1e0 0,#dbe6cd 100%);background-repeat:no-repeat,no-repeat;background-size:170px auto,100% 100%;background-position:right 74px bottom -19px,0 0}

/* Détails qui réagissent avec la dalle. */
.course-card>.icon,.trail-card>.icon,.training-callout>.icon,.training-topic>.icon{transition:transform .35s var(--ease-stone),color .25s}
.course-level{box-shadow:inset 0 1px 0 #ffffffb0,inset 0 -2px 0 #173e3012,0 1px 2px #173e301a;transition:transform .45s var(--ease-stone)}
.play-circle{box-shadow:inset 0 1px 0 #ffffff33,0 3px 0 var(--edge-forest),0 10px 16px -8px #173e3080;transition:transform .3s var(--ease-stone),box-shadow .3s var(--ease-stone)}
.method-icon{box-shadow:inset 0 1px 0 #ffffffa6,0 1px 2px #173e3014;transition:transform .45s var(--ease-stone)}

@media (hover:hover) and (pointer:fine){
 .course-card:hover,.continue-card:hover,.method-card:hover,.training-callout:hover,.training-topic:hover,.trail-step.current .trail-card:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 #ffffffe6,0 1px 0 var(--edge),0 8px 0 -1px var(--edge),var(--drop-lifted);
 }
 .method-card.pine:hover{box-shadow:inset 0 1px 0 #ffffff26,0 1px 0 var(--edge),0 8px 0 -1px var(--edge),var(--drop-lifted)}
 .course-card:hover{border-color:#c7d2bb}
 .course-card:hover>.icon,.trail-card:hover>.icon,.training-callout:hover>.icon,.training-topic:hover>.icon{transform:translateX(4px);color:var(--forest)}
 .course-card:hover .course-level{transform:translateY(-2px) scale(1.05)}
 .continue-card:hover .play-circle{transform:scale(1.07);box-shadow:inset 0 1px 0 #ffffff40,0 4px 0 var(--edge-forest),0 14px 20px -8px #173e3090}
 .method-card:hover .method-icon{transform:translateY(-2px) rotate(-4deg)}
 /* Inclinaison 3D : la dalle se tourne vers la souris. */
 .is-tilting,.is-tilting:hover,.trail-step.current .trail-card.is-tilting{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);
  transition:transform .14s linear,box-shadow .45s var(--ease-stone),background-color .25s,border-color .25s;
 }
}

/* Appuyer : la dalle s’enfonce, sur ordinateur comme au doigt. */
.course-card:active,.continue-card:active,.method-card:active,.training-callout:active,.training-topic:active,.trail-step.current .trail-card:active,.is-tilting:active,.trail-step.current .trail-card.is-tilting:active{
 transform:translateY(3px) scale(.992);
 box-shadow:inset 0 1px 0 #ffffffb0,0 1px 0 var(--edge),0 2px 0 -1px var(--edge),0 4px 8px -6px #173e3040;
 transition-duration:.09s;
}
.continue-card:active .play-circle{transform:scale(.94);box-shadow:inset 0 1px 0 #ffffff33,0 1px 0 var(--edge-forest),0 4px 8px -6px #173e3080}

/* --- Liste des leçons du catalogue : des pastilles en relief --- */
.catalogue-track{box-shadow:inset 0 1px 0 #fff,0 1px 0 #e1e4d6,0 5px 0 -1px #e5e7da,var(--drop)}
.catalogue-lesson{position:relative;transition:background-color .25s var(--ease-stone)}
.catalogue-lesson>.icon{transition:transform .35s var(--ease-stone),color .25s;color:#8c9687}
.catalogue-number{border-radius:12px;transition:transform .35s var(--ease-stone),background-color .25s,color .25s,box-shadow .35s var(--ease-stone)}
.is-open .catalogue-number{background:#fffdf8;color:var(--forest);font-weight:650;box-shadow:inset 0 1px 0 #fff,0 1px 0 #d4dbc8,0 3px 0 -1px #d4dbc8,0 6px 10px -6px #173e3040}
.is-complete .catalogue-number{box-shadow:inset 0 1px 0 #ffffffa0,inset 0 -1px 0 #2f6b4f1f}
.is-locked .catalogue-number{background:#eef0e6;border-radius:12px;box-shadow:inset 0 1px 3px #173e301c}
.catalogue-lesson::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--forest);transform:scaleY(0);transition:transform .35s var(--ease-stone)}
@media (hover:hover) and (pointer:fine){
 .catalogue-lesson.is-open:hover::before,.catalogue-lesson.is-complete:hover::before{transform:scaleY(1)}
 .catalogue-lesson.is-open:hover .catalogue-number{transform:translateY(-2px);background:var(--forest);color:#fff;box-shadow:inset 0 1px 0 #ffffff33,0 1px 0 var(--edge-forest),0 4px 0 -1px var(--edge-forest),0 9px 14px -7px #173e3080}
 .catalogue-lesson:not(.is-locked):hover>.icon{transform:translateX(4px);color:var(--forest)}
}
.catalogue-lesson.is-open:active .catalogue-number{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 1px 0 #d4dbc8,0 1px 4px -2px #173e3040}

/* --- Parcours d’un cours : nœuds en relief --- */
.trail-node{transition:transform .45s var(--ease-stone),box-shadow .45s var(--ease-stone)}
.trail-step.current .trail-node{box-shadow:0 0 0 1px var(--forest),0 4px 0 var(--edge-forest),0 10px 16px -8px #173e3080}
.trail-step.done .trail-node{box-shadow:inset 0 1px 0 #ffffffa0,0 2px 0 #c3d6b6}
.trail-step.done .trail-card{transition:background-color .25s}
@media (hover:hover) and (pointer:fine){
 .trail-step.current:hover .trail-node{transform:translateY(-2px) scale(1.06)}
 .trail-step.done .trail-card:hover{background:#fffdf8a6}
}

/* --- Boutons d’action : une tranche qu’on enfonce --- */
.button:not(.outline):not(.secondary):not(:disabled){box-shadow:inset 0 1px 0 #ffffff26,0 3px 0 var(--edge-forest),0 10px 18px -10px #173e3099}
.button.cream:not(:disabled){box-shadow:inset 0 1px 0 #fff,0 3px 0 #cfc6ad,0 12px 22px -10px #0006}
@media (hover:hover) and (pointer:fine){
 .button:not(.outline):not(.secondary):not(:disabled):hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #ffffff2e,0 4px 0 var(--edge-forest),0 14px 22px -10px #173e30a6}
 .button.cream:not(:disabled):hover{background:#fffaf0;box-shadow:inset 0 1px 0 #fff,0 4px 0 #cfc6ad,0 16px 26px -10px #0007}
}
.button:not(.outline):not(.secondary):not(:disabled):active{transform:translateY(3px);box-shadow:inset 0 1px 0 #ffffff1a,0 0 0 var(--edge-forest),0 3px 6px -4px #173e3099;transition-duration:.08s}
.button.cream:not(:disabled):active{box-shadow:inset 0 1px 0 #fff,0 0 0 #cfc6ad,0 4px 8px -4px #0006}
.button.outline:active,.button.secondary:active{transform:translateY(1px)}

/* --- Sélecteurs et navigation : transitions douces --- */
.catalogue-switch button,.catalogue-filters button,.tab,.nav-item,.nav-icon{transition:background-color .3s var(--ease-stone),color .25s,box-shadow .3s var(--ease-stone),transform .3s var(--ease-stone)}
.catalogue-switch button.active,.tab.active{box-shadow:inset 0 1px 0 #fff,0 1px 0 #d9ddcd,0 4px 10px -6px #173e3033}
.catalogue-filters button.active{box-shadow:inset 0 1px 0 #ffffff26,0 2px 0 var(--edge-forest)}
.nav-item.active .nav-icon{box-shadow:inset 0 1px 0 #ffffffb0,0 1px 0 #cfdcc2}
@media (hover:hover) and (pointer:fine){
 .catalogue-filters button:not(.active):hover{background:#eef1e6;border-color:#c5cfba}
 .catalogue-switch button:not(.active):hover{color:var(--forest);background:#f3f3ea}
 .nav-item:not(.active):hover .nav-icon{background:#eef0e5;transform:translateY(-1px)}
}
.nav-item:active .nav-icon{transform:scale(.92)}

/* Clavier : le contour de focus suit l’arrondi de la dalle. */
.course-card:focus-visible,.continue-card:focus-visible,.method-card:focus-visible,.training-callout:focus-visible,.training-topic:focus-visible,.trail-card:focus-visible,.catalogue-lesson:focus-visible{outline:3px solid #b5702e;outline-offset:3px}
.catalogue-lesson:focus-visible{outline-offset:-3px;border-radius:12px}

/* Mouvement réduit : ni inclinaison ni enfoncement animé. */
@media (prefers-reduced-motion:reduce){
 .is-tilting,.is-tilting:hover{transform:none!important}
 .is-tilting::after{opacity:0}
}

/* Keep the opening screen’s original, simple cream button. */
.splash .button.cream:not(:disabled){box-shadow:0 4px 10px #214b2710}
.splash .button.cream:not(:disabled):hover{background:#fbf7ed;transform:translateY(-1px);box-shadow:0 4px 10px #214b2710}
.splash .button.cream:not(:disabled):active{transform:scale(.985);box-shadow:0 4px 10px #214b2710;transition-duration:.16s}

/* Conversations à compléter — une réplique à la fois. */
.conversation-callout{width:100%;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;padding:24px;margin:0 0 24px;border:1px solid #d4ddc9;border-radius:24px;background:#e9eedf;color:var(--deep);position:relative;overflow:hidden}
.conversation-callout strong{font-family:var(--serif);font-size:2rem;font-weight:500;line-height:1.1}
.conversation-callout>span:not(.conversation-callout-art){max-width:100%;line-height:1.6;font-size:.85rem}
.conversation-callout .tag{font-size:.6rem!important;letter-spacing:.08em}
.conversation-callout-art{display:flex;align-self:center;justify-content:center;height:112px;gap:26px;width:100%}
.conversation-callout-art img{height:112px;width:75px;object-fit:contain}
.conversation-callout-link{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--forest)}
.conversation-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}
.conversation-role{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 8px;border:1px solid #d9dfcf;border-radius:22px;background:var(--paper);color:var(--deep)}
.conversation-role .mascot-image{height:145px;width:97px;object-fit:contain}
.conversation-role strong{font-size:.95rem;overflow-wrap:anywhere}
.conversation-role span{font-size:.7rem;color:var(--muted)}
.conversation-role:hover,.conversation-role:focus-visible{background:#e9efdf;border-color:var(--forest)}
.conversation-intro h2{font-family:var(--serif);font-size:2rem;font-weight:500}
.conversation-compose{margin:24px 0 0;scroll-margin-top:18px}
.conversation-cue{display:flex;align-items:center;gap:12px;padding:16px;background:#eceee2;border-radius:20px}
.conversation-cue .mascot-image{height:87px;width:58px;flex:0 0 58px;object-fit:contain}
.conversation-cue h2{font-size:.85rem;font-weight:500;margin:6px 0;color:var(--muted)}
.conversation-cue p{font-family:var(--serif);font-size:1.35rem;line-height:1.35;overflow-wrap:anywhere}
.conversation-compose .choices{margin-top:14px}
.conversation-compose .choice{width:100%;overflow-wrap:anywhere}
.conversation-feedback{margin-top:20px;border-radius:20px;padding:20px;background:#e1efd9;scroll-margin-top:16px}
.conversation-feedback.is-error{background:#f6e3dd}
.conversation-feedback h2{font-size:1.15rem;margin-bottom:12px}
.conversation-feedback p{font-size:.9rem;line-height:1.65;margin:10px 0;overflow-wrap:anywhere}
.conversation-log article{scroll-margin-bottom:120px}
.conversation-finish .button+.button{margin-top:12px}
.conversation-finish-cast{display:flex;justify-content:center;flex-wrap:wrap;margin:10px 0 20px}
.conversation-finish-cast .mascot-image{width:85px;height:128px;object-fit:contain}
.conversation-replay{margin:24px 0;text-align:left}
.conversation-replay summary{min-height:44px;padding:12px 0;color:var(--forest);cursor:pointer}
.conversation-screen .lesson-body{padding-bottom:20px}
/* =====================================================================
   Cartes mémoire qui se retournent (Claude, 2026-10-08)
   Toucher la carte la retourne ; la toucher encore la remet à l’endroit.
   ===================================================================== */
.flip-card{display:block;margin-top:22px;perspective:1500px;cursor:pointer;border-radius:26px;-webkit-tap-highlight-color:transparent;outline:none}
.flip-card:focus-visible{outline:3px solid #b5702e;outline-offset:5px}
.flip-inner{display:grid;transform-style:preserve-3d;transition:transform .75s var(--ease-stone)}
.flip-card.is-flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative;isolation:isolate;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px 22px 22px;text-align:center;border:1px solid #dbe2cf;border-radius:26px;background:#fffdf7 var(--ridge) no-repeat right 22px bottom -14px/170px auto;box-shadow:inset 0 1px 0 #fff,0 1px 0 var(--edge-light),0 6px 0 -1px var(--edge-light),var(--drop)}
.flip-back{transform:rotateY(180deg);background-color:#eef3e5;border-color:#d3dec6;box-shadow:inset 0 1px 0 #fffc,0 1px 0 #c6d4b9,0 6px 0 -1px #c6d4b9,var(--drop)}
.flip-side-label{font-size:.75rem;font-weight:600;color:#5f7154;letter-spacing:.02em}
.flip-face .memory-word{font-family:var(--serif);font-size:2rem;line-height:1.25;color:var(--deep);overflow-wrap:anywhere}
.flip-face .memory-meaning{font-family:var(--serif);font-size:1.75rem;line-height:1.25;font-weight:500;letter-spacing:-.02em;color:var(--deep)}
.flip-question{font-size:.95rem;line-height:1.6;color:#5f6b58;margin:4px 0 0}
.flip-back .memory-answer{width:100%}
.flip-back .memory-answer>p{font-size:.92rem;line-height:1.65;color:#4f5d49;text-align:left}
.memory-variant{font-size:.85rem;color:#5f7154;margin-top:10px;text-align:left}
.flip-hint{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;font-size:.75rem;color:#6a765f}
.flip-front .flip-hint{margin-top:18px}
.memory-question{text-align:center;margin-bottom:10px}
@media (hover:hover) and (pointer:fine){
 .flip-card:hover .flip-face{box-shadow:inset 0 1px 0 #fff,0 1px 0 var(--edge-light),0 9px 0 -1px var(--edge-light),var(--drop-lifted)}
 .flip-card:hover .flip-back{box-shadow:inset 0 1px 0 #fffc,0 1px 0 #c6d4b9,0 9px 0 -1px #c6d4b9,var(--drop-lifted)}
 .flip-card:hover .flip-inner{transform:translateY(-3px)}
 .flip-card.is-flipped:hover .flip-inner{transform:translateY(-3px) rotateY(180deg)}
}
.flip-card:active .flip-inner{transform:translateY(2px) scale(.99)}
.flip-card.is-flipped:active .flip-inner{transform:translateY(2px) scale(.99) rotateY(180deg)}

/* Paquets de cartes dans le choix des thèmes. */
.training-subheading{font-family:var(--serif);font-size:1.25rem;font-weight:500;letter-spacing:-.02em;margin:6px 0 12px;color:var(--deep)}
.training-topics+.training-subheading{margin-top:28px}
.deck-topic{background:#f2f5ea}
.deck-topic.deck-deck-reverse{background:#f6eedd;--edge:#e3d4b4}
.deck-topic.deck-deck-review{background:#f6e9e1;--edge:#e6cfc2}

/* =====================================================================
   Comptes (Claude, 2026-10-09) : bloc du profil et formulaires.
   ===================================================================== */
.account-card{position:relative;margin:0 0 22px;padding:20px 18px;border:1px solid #dfe5d4;border-radius:22px;background:#fffdf7;box-shadow:inset 0 1px 0 #fff,0 1px 0 var(--edge-light),0 5px 0 -1px var(--edge-light),var(--drop)}
.account-card h2{font-size:1.3rem;letter-spacing:-.02em;margin-bottom:8px}
.account-card>p{font-size:.9rem;line-height:1.6;color:#5e6b57;margin-bottom:16px}
.account-card .button+.button{margin-top:10px}
.account-card.account-off{background:#f3f4ec;box-shadow:none}
.account-card.account-off>p{margin-bottom:0}
.account-identity{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.account-identity h2{margin:0 0 2px;font-size:1.2rem;overflow-wrap:anywhere}
.account-identity .small{overflow-wrap:anywhere}
.account-badge{flex:0 0 46px;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--forest);color:#fff;font-family:var(--serif);font-size:1.35rem;box-shadow:inset 0 1px 0 #ffffff33,0 3px 0 var(--edge-forest)}
.account-plan{display:inline-block;font-size:.75rem;font-weight:600;color:#3f6347;background:#e5eedb;border-radius:20px;padding:6px 11px;margin:0 0 10px}
.sync-status{font-size:.82rem;line-height:1.55;color:#4f6b4b;margin:0 0 6px;padding-left:20px;position:relative}
.sync-status::before{content:'';position:absolute;left:3px;top:.45em;width:8px;height:8px;border-radius:50%;background:#5c9a63}
.sync-status[data-state="pending"]::before,.sync-status[data-state="saving"]::before{background:#d9a640}
.sync-status[data-state="error"]{color:#8d4a3e}.sync-status[data-state="error"]::before{background:#b65f50}
.account-card .settings-row:last-child{border-bottom:0;padding-bottom:4px}
.account-screen .section-heading{margin-bottom:10px}
.account-screen .intro-text{font-size:.95rem;margin-bottom:24px}
.account-form{margin-bottom:18px}
.account-form .field{margin-bottom:20px}
.account-form .field input{font-size:1rem}
.account-form .field input:focus-visible{outline:3px solid #b5702e;outline-offset:2px}
.field-hint{font-size:.75rem;line-height:1.5;color:#66715e}
.password-wrap{position:relative}
.password-wrap input{padding-right:92px}
.password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:38px;padding:0 12px;border:0;border-radius:9px;background:#eef1e6;color:var(--forest);font-size:.8rem;font-weight:600}
.form-error{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:#f6e3dd;color:#8d3e33;font-size:.88rem;line-height:1.55}
.form-error:focus{outline:none}
.account-switch{font-size:.88rem;color:#5e6b57;text-align:center;margin:4px 0}
.account-switch .text-button{padding:10px 6px}
.account-privacy{font-size:.78rem;line-height:1.6;color:#6a7462;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.account-mark{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#e4edda;color:var(--forest);margin:8px 0 20px}

/* ===== Histoire de la Tchétchénie (ajout Claude, 2026-10-09 ; version illustrée) =====
   Une veillée : la peinture de chaque page en haut, le texte posé dans sa couleur de fond (--ground,
   mesurée sur le bas de la peinture par scripts/history-art.mjs). Police Jost, déclarée dans veillee.css. */
.bottom-nav{grid-template-columns:repeat(5,1fr);padding-left:6px;padding-right:6px}
.nav-icon{width:40px}
.hx,.hx-home{--snow:#f3eee4;--mist:#bcc3c4;--ember:#f0a65a;--lichen:#a6d1a2;--rust:#ef9a85;--night:#121922;--story:'Jost Nokh',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--ground,var(--night));color:var(--snow)}
.hx :focus-visible,.hx-home :focus-visible{outline-color:var(--ember)}
.hx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hx-sup{font-size:.62em;vertical-align:.5em;line-height:0;margin-left:.02em}

/* Lecture d’un chapitre */
.hx{position:relative;isolation:isolate;padding-bottom:0;animation:none}
.hx-art{position:sticky;top:0;z-index:0;margin:0;height:min(60svh,640px);overflow:hidden;background:var(--ground);view-transition-name:hx-art}
.hx-art img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;transform-origin:50% 75%;animation:hx-drift 28s ease-in-out infinite alternate}
.hx-art:after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgb(0 0 0 / .4) 0,rgb(0 0 0 / 0) 17%,rgb(0 0 0 / 0) 50%,var(--ground) 99%)}
/* Grain de papier par-dessus les peintures : masque les dégradés et donne la matière (aucune image en plus). */
.hx-art:before,.hx-hero:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hx-hero:before{z-index:-1}
@keyframes hx-drift{from{transform:scale(1.02)}to{transform:scale(1.09) translate3d(0,-1.4%,0)}}
.hx-top{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:calc(14px + env(safe-area-inset-top)) 16px 0}
.hx .icon-button{width:48px;height:48px;flex:0 0 48px;border-radius:50%;color:var(--snow);background:rgb(12 16 22 / .4);border:1px solid rgb(243 238 228 / .16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hx-bars{flex:1;display:flex;gap:4px}
.hx-bars span{flex:1;height:3px;border-radius:3px;background:rgb(243 238 228 / .3);transition:background .4s}
.hx-bars .done{background:rgb(243 238 228 / .92)}
.hx-bars .current{background:var(--ember)}
.hx-sheet{position:relative;z-index:1;margin-top:-15svh;padding:10svh 24px 150px;background:linear-gradient(180deg,transparent 0,var(--ground) 9svh)}
.hx-era{font-family:var(--story);font-style:italic;font-size:.95rem;line-height:1.4;color:var(--mist);margin-bottom:6px}
.hx-title{font-family:var(--story);font-weight:600;font-size:clamp(1.85rem,7.4vw,2.25rem);line-height:1.12;letter-spacing:-.015em;color:var(--snow);margin-bottom:18px;text-wrap:balance}
.hx-text p{font-family:var(--story);font-size:1.075rem;line-height:1.78;margin-bottom:16px;color:var(--snow)}
.hx-aside-label{font-family:var(--story);font-style:italic;font-size:.95rem;color:var(--ember);margin-bottom:6px}
.hx-fact{margin:24px 0 8px;padding:2px 0 2px 18px;border-left:2px solid var(--ember)}
.hx-fact p:last-child{font-family:var(--story);font-size:1rem;line-height:1.66;opacity:.92}
.hx-word{margin:30px 0 8px;padding-top:18px;border-top:1px solid rgb(243 238 228 / .18)}
.hx-word-ce{font-family:var(--story);font-weight:600;font-size:1.95rem;line-height:1.15;color:var(--snow);margin:2px 0 4px}
.hx-word-ce small{display:block;font-family:Georgia,serif;font-weight:400;font-size:.55em;opacity:.7;margin-top:4px}
.hx-word-fr{font-size:1rem;opacity:.9}
.hx-word-note{font-size:.84rem;line-height:1.55;color:var(--mist);margin-top:8px}
.hx-dock{position:fixed;z-index:15;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;display:flex;align-items:center;gap:12px;padding:30px 20px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--ground) 44%)}
.hx-dock [data-dir="back"] svg{transform:rotate(180deg)}
.hx .button,.hx-home .button{margin:0;border-radius:999px;min-height:54px;background:var(--snow);color:#1b1e23;box-shadow:none}
.hx .button:hover,.hx-home .button:hover{background:#fff;transform:none}
.hx .button:disabled{background:rgb(243 238 228 / .2);color:rgb(243 238 228 / .62)}
.hx .button.outline{background:transparent;color:var(--snow);border:1px solid rgb(243 238 228 / .35)}
.hx-dock .button{flex:1}

/* Couverture du chapitre : la peinture en plein écran, le grand chiffre */
.hx-cover .hx-art{height:100svh;max-height:none}
.hx-cover .hx-art:after{background:linear-gradient(180deg,rgb(0 0 0 / .4) 0,rgb(0 0 0 / 0) 18%,rgb(0 0 0 / 0) 36%,color-mix(in srgb,var(--ground) 72%,transparent) 64%,var(--ground) 100%)}
.hx-cover .hx-sheet{position:absolute;left:0;right:0;bottom:0;margin:0;padding:0 26px 118px;background:none}
.hx-numeral{font-family:var(--story);font-style:italic;font-size:clamp(5.5rem,30vw,8rem);line-height:.82;letter-spacing:-.04em;color:var(--snow);margin-bottom:12px;text-shadow:0 2px 40px rgb(0 0 0 / .3)}
.hx-title-cover{font-size:clamp(2.15rem,9.5vw,2.75rem);margin-bottom:10px}
.hx-teaser{font-family:var(--story);font-style:italic;font-size:1.06rem;line-height:1.55;opacity:.92;max-width:34ch}
.hx-length{font-size:.8rem;color:var(--mist);margin-top:14px}

/* Quiz : la dernière peinture, voilée */
.hx-quiz .hx-art{position:absolute;inset:0;height:auto;max-height:none}
.hx-quiz .hx-art img{filter:blur(20px) brightness(.48) saturate(1.15);transform:scale(1.15);animation:none}
.hx-quiz .hx-art:after{background:linear-gradient(180deg,transparent 40%,var(--ground))}
.hx-quiz .hx-sheet{margin-top:0;padding-top:104px;min-height:100svh;background:none}
.hx-options{display:grid;gap:10px;margin-top:6px}
.hx-option{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:14px 16px;text-align:left;font-size:1rem;line-height:1.4;color:var(--snow);background:rgb(243 238 228 / .07);border:1px solid rgb(243 238 228 / .22);border-radius:16px;transition:background .2s,border-color .2s}
.hx-option:not(:disabled):hover{background:rgb(243 238 228 / .14);border-color:rgb(243 238 228 / .42)}
.hx-option:disabled{cursor:default}
.hx-option-mark{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;border-radius:50%;border:1.5px solid rgb(243 238 228 / .5)}
.hx-option.is-correct{background:rgb(166 209 162 / .2);border-color:var(--lichen)}
.hx-option.is-correct .hx-option-mark{background:var(--lichen);border-color:var(--lichen);color:#10200f}
.hx-option.is-wrong{background:rgb(239 154 133 / .16);border-color:var(--rust)}
.hx-option.is-wrong .hx-option-mark{background:var(--rust);border-color:var(--rust);color:#2a0e08}
.hx-feedback{margin-top:20px;padding:2px 0 2px 18px;border-left:2px solid var(--lichen)}
.hx-feedback.bad{border-color:var(--rust)}
.hx-feedback strong{font-family:var(--story);font-style:italic;font-weight:400;font-size:1.06rem}
.hx-feedback p{font-size:.98rem;line-height:1.62;margin-top:4px;opacity:.92}

/* Fin du chapitre */
.hx-end .hx-art{height:min(50svh,520px)}
.hx-end .hx-sheet{margin-top:-10svh;padding-bottom:60px}
.hx-score{display:flex;align-items:center;gap:12px;margin:-6px 0 26px;font-size:.95rem;color:var(--mist)}
.hx-dots{display:flex;gap:6px}
.hx-dots span{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--mist)}
.hx-dots .on{background:var(--ember);border-color:var(--ember)}
.hx-end-actions{display:grid;gap:12px}
.hx-next-chapter{position:relative;isolation:isolate;display:grid;align-content:end;gap:2px;min-height:148px;padding:16px 18px;text-align:left;color:var(--snow);background:#000;border:0;border-radius:18px;overflow:hidden}
.hx-next-chapter img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hx-next-chapter:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(0 0 0 / 0) 25%,rgb(0 0 0 / .66))}
.hx-next-chapter:hover img{transform:scale(1.05)}
.hx-next-label{font-size:.8rem;opacity:.88}
.hx-next-chapter strong{font-family:var(--story);font-weight:600;font-size:1.35rem;line-height:1.2}
.hx-last{font-family:var(--story);font-style:italic;font-size:1.06rem;line-height:1.6}
.hx-sources{margin-top:26px;font-size:.82rem;color:var(--mist)}
.hx-sources summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--snow);font-weight:600}
.hx-sources ul{padding-left:18px;margin:4px 0 0;display:grid;gap:8px;line-height:1.5}
.hx-sources a{color:var(--snow);overflow-wrap:anywhere}

/* Accueil de l’onglet : la peinture d’ouverture, puis les dix chapitres comme une bande de couleurs */
.hx-home{--ground:var(--night);padding-bottom:110px}
.hx-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:min(80svh,740px);overflow:hidden}
.hx-hero-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform-origin:50% 60%;animation:hx-drift 32s ease-in-out infinite alternate}
.hx-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(0 0 0 / .25) 0,rgb(0 0 0 / 0) 22%,rgb(18 25 34 / .55) 58%,var(--night) 100%)}
.hx-hero-text{width:100%;padding:0 24px 26px}
.hx-kicker{font-family:var(--story);font-style:italic;font-size:1rem;color:var(--ember);margin-bottom:6px}
.hx-hero h1{font-family:var(--story);font-weight:600;font-size:clamp(2.3rem,10.5vw,3rem);line-height:1.03;letter-spacing:-.025em;color:var(--snow);text-wrap:balance}
.hx-sub{font-family:var(--story);font-style:italic;font-size:1.05rem;line-height:1.5;opacity:.88;margin-top:10px}
.hx-cta{margin-top:22px}
.hx-progress{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:.8rem;color:var(--mist)}
.hx-progress-track{flex:1;height:3px;border-radius:3px;background:rgb(243 238 228 / .2);overflow:hidden}
.hx-progress-track span{display:block;height:100%;background:var(--ember)}
.hx-narrator{display:flex;align-items:flex-end;gap:14px;padding:4px 24px 22px}
.hx-narrator .mascot-image{width:70px;height:auto;flex-shrink:0}
.hx-narrator p{font-family:var(--story);font-style:italic;font-size:.98rem;line-height:1.6;opacity:.9;padding-bottom:8px}
.hx-chapters{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hx-chapter{position:relative;isolation:isolate;display:flex;align-items:flex-end;gap:14px;width:100%;min-height:132px;padding:14px 18px;text-align:left;color:var(--snow);background:#000;border:0;overflow:hidden}
.hx-chapter img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hx-chapter:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(8 10 14 / .74) 0,rgb(8 10 14 / .28) 58%,rgb(8 10 14 / .04)),linear-gradient(180deg,rgb(8 10 14 / 0) 40%,rgb(8 10 14 / .5))}
.hx-chapter:hover img{transform:scale(1.05)}
.hx-chapter:focus-visible{outline-offset:-4px}
.hx-chapter-num{font-family:var(--story);font-style:italic;font-size:2.6rem;line-height:.9;min-width:2.1ch}
.is-read .hx-chapter-num{color:var(--ember)}
.hx-chapter-text{display:grid;gap:3px;flex:1;min-width:0}
.hx-chapter-era{font-family:var(--story);font-style:italic;font-size:.82rem;opacity:.86}
.hx-chapter-text strong{font-family:var(--story);font-weight:600;font-size:1.2rem;line-height:1.2}
.hx-chapter-read{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-size:.72rem;border-radius:999px;background:rgb(12 16 22 / .45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hx-note{padding:22px 24px 10px;font-size:.78rem;line-height:1.6;font-style:italic;color:var(--mist)}
.hx-empty{display:grid;gap:16px;padding:120px 24px;text-align:center;color:var(--mist)}

/* Ambiance de certaines pages : neige, braises, étoiles, pétales, pluie, brume */
.hx-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hx-fx:before,.hx-fx:after{content:'';position:absolute;inset:-20% -10% 0}
[data-fx="snow"] .hx-fx:before,[data-fx="snow"] .hx-fx:after{background-image:radial-gradient(circle at 20% 30%,#fff 0 1.5px,transparent 2.2px),radial-gradient(circle at 70% 62%,#fff 0 1.1px,transparent 1.8px),radial-gradient(circle at 44% 86%,#fff 0 .9px,transparent 1.5px);background-size:120px 140px;opacity:.85;animation:hx-snow 10s linear infinite}
[data-fx="snow"] .hx-fx:after{background-size:200px 230px;opacity:.55;filter:blur(.8px);animation:hx-snow-far 17s linear infinite}
@keyframes hx-snow{to{background-position:-120px 140px}}
@keyframes hx-snow-far{to{background-position:200px 230px}}
[data-fx="embers"] .hx-fx:before,[data-fx="embers"] .hx-fx:after{inset:0 0 -20%;background-image:radial-gradient(circle at 30% 70%,#ffc46a 0 1.6px,transparent 2.6px),radial-gradient(circle at 64% 40%,#ff9a3a 0 1.2px,transparent 2.2px),radial-gradient(circle at 48% 12%,#ffe0a0 0 1px,transparent 1.8px);background-size:150px 170px;animation:hx-rise 7s linear infinite;mask-image:linear-gradient(0deg,transparent,#000 35%,#000 60%,transparent);-webkit-mask-image:linear-gradient(0deg,transparent,#000 35%,#000 60%,transparent)}
[data-fx="embers"] .hx-fx:after{background-size:230px 260px;animation-duration:11s;opacity:.7}
@keyframes hx-rise{to{background-position:60px -170px}}
[data-fx="stars"] .hx-fx:before{inset:0 0 50%;background-image:radial-gradient(circle at 12% 20%,#fff 0 1.2px,transparent 2px),radial-gradient(circle at 78% 34%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 46% 70%,#fff 0 1.4px,transparent 2.4px);background-size:170px 150px;animation:hx-twinkle 4.5s ease-in-out infinite alternate}
@keyframes hx-twinkle{from{opacity:.15}to{opacity:.9}}
[data-fx="petals"] .hx-fx:before,[data-fx="petals"] .hx-fx:after{background-image:radial-gradient(ellipse 3px 2px at 25% 35%,#fff4f6 0 98%,transparent),radial-gradient(ellipse 2.5px 1.8px at 72% 66%,#ffd9e2 0 98%,transparent),radial-gradient(ellipse 2px 1.5px at 46% 88%,#fff 0 98%,transparent);background-size:160px 180px;opacity:.9;animation:hx-petals 13s linear infinite}
[data-fx="petals"] .hx-fx:after{background-size:240px 260px;opacity:.6;animation-duration:20s}
@keyframes hx-petals{to{background-position:160px 180px}}
[data-fx="rain"] .hx-fx:before,[data-fx="rain"] .hx-fx:after{background-image:linear-gradient(176deg,transparent 46%,rgb(185 205 235 / .5) 49%,transparent 52%);background-size:23px 70px;animation:hx-rain .7s linear infinite;mask-image:linear-gradient(90deg,#000 0 30%,transparent 31% 47%,#000 48% 70%,transparent 71% 83%,#000 84%);-webkit-mask-image:linear-gradient(90deg,#000 0 30%,transparent 31% 47%,#000 48% 70%,transparent 71% 83%,#000 84%)}
[data-fx="rain"] .hx-fx:after{background-size:37px 110px;opacity:.6;animation-duration:1.1s;mask-image:none;-webkit-mask-image:none}
@keyframes hx-rain{to{background-position:-5px 70px}}
[data-fx="mist"] .hx-fx:before{inset:30% -60% 10%;background:radial-gradient(ellipse 30% 22% at 30% 60%,rgb(255 255 255 / .2),transparent 70%),radial-gradient(ellipse 26% 18% at 72% 46%,rgb(255 255 255 / .16),transparent 70%);animation:hx-mist 26s ease-in-out infinite alternate}
@keyframes hx-mist{to{transform:translateX(-28%)}}

/* Changement de page : la peinture passe en fondu (navigateurs qui le permettent). */
::view-transition-old(hx-art),::view-transition-new(hx-art){animation-duration:.6s;animation-timing-function:cubic-bezier(.3,0,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
@media(min-width:760px){.hx-dock{bottom:28px;border-radius:0 0 30px 30px}.hx-cover .hx-art{height:calc(100dvh - 56px)}.hx-quiz .hx-sheet{min-height:calc(100dvh - 56px)}}
@media(prefers-reduced-motion:reduce){.hx-art img,.hx-hero-art,.hx-fx:before,.hx-fx:after{animation:none!important}.hx-chapter img,.hx-next-chapter img{transition:none}}