.french-page { background: #f5f6fa; color: #18243f; }
.french-page #app { max-width: 1050px; padding: 0 28px 65px; }
.french-topbar { padding: 22px 0; border: 0; }
.french-main { padding-top: 26px; }
.french-state-card { display: grid; justify-items: center; gap: 14px; padding: 70px 30px; border: 1px solid #dfe3ed; border-radius: 28px; background: white; text-align: center; }
.french-state-card h1 { margin: 0; font: 800 40px 'Baloo 2',sans-serif; }.french-state-card p { max-width: 540px; margin: 0 0 8px; color: #687187; }
.french-state-icon { font-size: 40px; }.french-loader { width: 36px; height: 36px; border: 4px solid #e1e5ef; border-top-color: #294a91; border-radius: 50%; animation: french-spin .8s linear infinite; }
@keyframes french-spin { to { transform: rotate(360deg); } }
.french-hero { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; padding: 43px 46px; border-radius: 28px; background: linear-gradient(135deg,#183366,#294f9a); color: white; }
.french-hero .lesson-eyebrow { margin: 0 0 5px; color: #f5cad2; }.french-hero h1 { margin: 0; font: 800 52px/1 'Baloo 2',sans-serif; }.french-hero p:not(.lesson-eyebrow) { max-width: 650px; margin: 12px 0 0; color: #d5e1f5; line-height: 1.6; }.french-hero p strong { color: white; }
.french-score-card { min-width: 190px; padding: 23px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.08); }.french-score-card span,.french-score-card small { display: block; color: #bdcdec; }.french-score-card span { font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.french-score-card strong { display: block; margin: 3px 0; color: white; font: 800 39px 'Baloo 2',sans-serif; }.french-score-card small { font-size: 10px; }
.french-daily-card { margin-top: 22px; padding: 34px 39px; overflow: hidden; border: 1px solid #e3d5aa; border-radius: 28px; background: #fffaf0; box-shadow: 0 18px 55px rgba(85,66,21,.06); }
.french-daily-intro { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.french-daily-intro .lesson-eyebrow,.french-section-heading .lesson-eyebrow { margin: 0 0 2px; color: #b44b59; }.french-daily-intro h2,.french-section-heading h2 { margin: 0; color: #183366; font: 800 34px/1.15 'Baloo 2',sans-serif; }.french-daily-intro p:not(.lesson-eyebrow) { max-width: 650px; margin: 8px 0 0; color: #687187; line-height: 1.55; }.french-daily-intro .primary-btn { flex: 0 0 auto; }
.french-daily-status { margin-top: 21px; padding: 14px 17px; border-radius: 14px; background: rgba(209,164,46,.12); color: #69571f; font-weight: 800; }
.french-daily-game { margin-top: 24px; }.french-daily-game .french-prompt-card { background: white; border: 1px solid #ece3c9; }
.french-daily-review { margin-top: 18px; padding: 22px; border: 1px solid #efc7cc; border-radius: 18px; background: #fff; }.french-daily-review .lesson-eyebrow { margin: 0 0 2px; color: #b44b59; }.french-daily-review h3 { margin: 0; color: #183366; font: 800 24px/1.2 'Baloo 2',sans-serif; }.french-daily-review > p:not(.lesson-eyebrow) { margin: 5px 0 0; color: #687187; }.french-daily-mistakes { display: grid; gap: 10px; margin-top: 17px; }.french-daily-mistake { display: grid; grid-template-columns: 36px 1fr; gap: 13px; padding: 15px; border: 1px solid #f0d8dc; border-radius: 14px; background: #fff8f9; }.french-daily-mistake-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fde7ea; color: #a8444d; font-weight: 900; }.french-daily-mistake h4 { margin: 0 0 8px; color: #183366; font: 800 22px 'Baloo 2',sans-serif; }.french-daily-mistake p { display: grid; grid-template-columns: 112px 1fr; gap: 10px; margin: 4px 0; }.french-daily-mistake p span { color: #7a8295; font-size: 12px; font-weight: 900; text-transform: uppercase; }.french-daily-mistake p strong { color: #a8444d; }.french-daily-mistake p.correct-answer strong { color: #24764f; }.french-daily-review.perfect { border-color: #b9dfca; background: #f0faf4; }.french-daily-review.perfect > p:not(.lesson-eyebrow) { color: #24764f; font-weight: 800; }
.french-daily-leaderboard { margin-top: 18px; padding: 18px; border-radius: 17px; background: white; border: 1px solid #ece3c9; }.french-daily-leaderboard h3 { margin: 0 0 10px; color: #183366; font: 800 22px 'Baloo 2',sans-serif; }.french-daily-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 11px; }.french-daily-row + .french-daily-row { border-top: 1px solid #eef0f5; }.french-daily-row > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #edf1f8; color: #294a91; font-weight: 900; }.french-daily-row small { color: #687187; font-weight: 800; }.french-daily-row.winner { background: #edf8f1; }.french-daily-row.winner > span { background: #d8f0e1; }
.french-quiz-shell,.french-result { margin-top: 22px; padding: 39px 43px; border: 1px solid #dfe3ed; border-radius: 28px; background: white; box-shadow: 0 18px 55px rgba(24,51,102,.07); }
.french-section-heading { margin-bottom: 24px; }
.french-progress-copy { display: flex; justify-content: space-between; gap: 20px; color: #768098; font-size: 12px; font-weight: 900; }.french-progress-copy strong { color: #294a91; }
.french-progress-track { height: 8px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: #e9edf5; }.french-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#294f9a,#e56979); transition: width .25s ease; }
.french-prompt-card { margin: 31px 0 23px; padding: 34px; border-radius: 22px; background: #f1f4fb; text-align: center; }.french-prompt-card span { color: #74809a; font-size: 10px; font-weight: 900; letter-spacing: .1em; }.french-prompt-card h2 { margin: 6px 0 0; color: #183366; font: 800 48px 'Baloo 2',sans-serif; }
.french-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.french-option { display: grid; grid-template-columns: 35px 1fr; gap: 12px; align-items: center; min-height: 66px; padding: 13px 16px; border: 1.5px solid #dfe3ed; border-radius: 15px; background: white; color: #26334e; font: 700 15px 'Nunito',sans-serif; text-align: left; cursor: pointer; }.french-option:hover:not(:disabled) { border-color: #5270ad; background: #f5f7fc; }.french-option > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; background: #edf1f8; color: #294a91; font-size: 12px; font-weight: 900; }.french-option.correct { border-color: #2c9463; background: #e8f7ef; }.french-option.incorrect { border-color: #d55b66; background: #fdecee; }
.french-feedback { margin-top: 18px; padding: 14px 16px; border-radius: 13px; font-weight: 800; }.french-feedback.correct { background: #e8f7ef; color: #24764f; }.french-feedback.incorrect { background: #fdecee; color: #a8444d; }.french-actions { display: flex; justify-content: flex-end; margin-top: 19px; }
.french-result { text-align: center; }.french-result-icon { display: grid; place-items: center; width: 75px; height: 75px; margin: 0 auto 20px; border-radius: 50%; background: #e8f7ef; color: #278058; font-size: 37px; font-weight: 900; }.french-result .lesson-eyebrow { margin-bottom: 2px; color: #b44b59; }.french-result h2 { margin: 0; color: #183366; font: 800 44px 'Baloo 2',sans-serif; }.french-result > p:not(.lesson-eyebrow) { color: #687187; }.french-result-stats { display: flex; justify-content: center; gap: 12px; margin: 25px 0; }.french-result-stats span { padding: 13px 17px; border-radius: 13px; background: #f1f4fb; color: #6f7890; }.french-result-stats b { display: block; color: #183366; }
html[data-theme='dark'] .french-page { background: #111725; color: #edf2fb; }html[data-theme='dark'] .french-state-card,html[data-theme='dark'] .french-quiz-shell,html[data-theme='dark'] .french-result { border-color: #303c55; background: #1a2335; }html[data-theme='dark'] .french-prompt-card,html[data-theme='dark'] .french-result-stats span { background: #222e45; }html[data-theme='dark'] .french-prompt-card h2,html[data-theme='dark'] .french-result h2,html[data-theme='dark'] .french-result-stats b { color: #edf2fb; }html[data-theme='dark'] .french-option { border-color: #34425e; background: #172033; color: #edf2fb; }html[data-theme='dark'] .french-option > span { background: #273651; color: #d7e5ff; }
html[data-theme='dark'] .french-daily-card { border-color: #514b39; background: #201f1b; }html[data-theme='dark'] .french-daily-intro h2,html[data-theme='dark'] .french-section-heading h2,html[data-theme='dark'] .french-daily-leaderboard h3 { color: #edf2fb; }html[data-theme='dark'] .french-daily-status { background: #332f22; color: #f0daa0; }html[data-theme='dark'] .french-daily-leaderboard,html[data-theme='dark'] .french-daily-game .french-prompt-card { border-color: #514b39; background: #1a2335; }
html[data-theme='dark'] .french-daily-review { border-color: #583a42; background: #1a2335; }html[data-theme='dark'] .french-daily-review h3,html[data-theme='dark'] .french-daily-mistake h4 { color: #edf2fb; }html[data-theme='dark'] .french-daily-mistake { border-color: #55353e; background: #251d28; }html[data-theme='dark'] .french-daily-review.perfect { border-color: #315b46; background: #182c24; }
@media(max-width:720px) { .french-page #app { padding: 0 17px 45px; }.french-hero { grid-template-columns: 1fr; padding: 32px 26px; }.french-score-card { min-width: 0; }.french-daily-card { padding: 28px 22px; }.french-daily-intro { align-items: stretch; flex-direction: column; }.french-daily-intro .primary-btn { width: 100%; }.french-options { grid-template-columns: 1fr; }.french-quiz-shell,.french-result { padding: 29px 22px; }.french-prompt-card h2 { font-size: 41px; }.french-result-stats { flex-direction: column; }.french-daily-mistake p { grid-template-columns: 1fr; gap: 1px; }.french-daily-mistake p + p { margin-top: 10px; } }
@media (hover:none), (pointer:coarse) {
  .french-option { -webkit-tap-highlight-color:transparent; }
  .french-option:hover:not(:disabled),.french-option:focus:not(:focus-visible) { border-color:#dfe3ed; background:#fff; }
  html[data-theme='dark'] .french-option:hover:not(:disabled),html[data-theme='dark'] .french-option:focus:not(:focus-visible) { border-color:#34425e; background:#172033; }
}
.french-daily-review { scroll-margin-top: 18px; }