/* The illustrated city is a cover. Game navigation stays outside the artwork. */
.cover-screen .city-map{width:calc(100% - 48px);max-width:1120px;border-radius:24px;box-shadow:0 8px 36px #24362b0a}
.cover-instruction{text-align:center;margin:22px 20px 12px;font-size:16px;color:var(--muted);line-height:1.5}
.cover-screen .mobile-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:calc(100% - 48px);max-width:680px;margin:0 auto}
.cover-screen .entry{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:72px;padding:20px 24px;border:1px solid #c8dccd;border-radius:18px;background:#edf5ef;color:#285d42;font-size:20px;line-height:1.4;font-weight:650;letter-spacing:-.4px;transition:background .15s ease,box-shadow .15s ease}
.cover-screen .entry.maths{background:#fbf5e8;border-color:#e9dcbf;color:#745313}
.cover-screen .entry>span:last-child{font-size:24px;font-weight:400}
.cover-screen .entry:hover{box-shadow:0 5px 18px #24362b10;background:#e3efe6}
.cover-screen .entry.maths:hover{background:#f7edd7}
.cover-screen .places-disclosure{margin:12px auto 20px}

@media(max-width:640px){.cover-screen .city-map{width:calc(100% - 24px);border-radius:18px}.cover-instruction{margin:20px 16px 12px}.cover-screen .mobile-entries{width:calc(100% - 32px);grid-template-columns:1fr;gap:10px}.cover-screen .entry{min-height:64px;padding:16px 20px;font-size:20px;border-radius:16px}}

/* Readable subject names live in HTML, outside the decorative town artwork. */
.subjects-menu{max-width:1120px;margin:24px auto 40px;padding:0 24px}
.subjects-menu h2{font-size:26px;line-height:1.3;letter-spacing:-.6px;margin:0 0 22px;text-align:center}
.subjects-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.cover-screen{padding-top:16px}
/* Four equal columns, with the last pair centred for the fourteen subjects. */
@media(min-width:851px){.subject-card:nth-last-child(2):nth-child(4n + 1){grid-column:2}}
.subject-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #e0e5e6;border-radius:22px;background:#fff;color:#253340;text-align:left;padding:0;font:inherit;box-shadow:0 3px 14px #20392a05;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;min-width:0}
.subject-card.ready{border-color:#b7d1c0;background:#f5faf6}
.subject-card.ready.maths{border-color:#e5d3a7;background:#fffcf4}
.subject-art{display:block;width:100%;aspect-ratio:1;background-image:url('assets/matieres-batiments-atlas-v2.png');background-size:444.4444% 444.4444%;background-position:var(--tile-x) var(--tile-y);background-repeat:no-repeat;background-color:#f5f7f7}
.subject-caption{display:flex;flex-direction:column;gap:10px;padding:18px 20px 22px;order:-1;flex:1;border-bottom:1px solid #edf0ef}
.subject-name{font-size:20px;line-height:1.35;font-weight:650;letter-spacing:-.4px;overflow-wrap:anywhere;min-height:2.7em}
.subject-caption small{font-size:13px;line-height:1.5;color:#66716c;margin-top:auto}
.subject-card.ready .subject-name{color:#285d42}
.subject-card.ready.maths .subject-name{color:#745313}
.subject-card.ready small{font-weight:650;color:#2e6747}
.subject-card.ready.maths small{color:#745313}
.subject-card:focus-visible{outline:3px solid #2057a2;outline-offset:5px;box-shadow:0 8px 28px #20392a18}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.subject-card:hover{transform:translateY(-4px) scale(1.025);box-shadow:0 12px 30px #20392a18;border-color:#a4b8a9;z-index:1}}
@media(max-width:850px){.cover-screen .city-map{width:calc(100% - 32px)}.subjects-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:640px){.cover-screen .city-map{width:calc(100% - 24px);border-radius:18px}.subjects-menu{margin:20px auto 30px;padding:0 16px}.subjects-menu h2{font-size:24px;margin-bottom:18px}.subjects-grid{gap:12px}.subject-card{border-radius:18px}.subject-caption{padding:14px 14px 18px;gap:8px}.subject-name,.subject-card.ready .subject-name{font-size:19px}}
@media(max-width:360px){.subjects-grid{grid-template-columns:1fr}.subject-card .subject-art{width:74%;margin:0 auto}.subject-name,.subject-card.ready .subject-name{font-size:22px}}

/* The atlas has slightly less spacing above its final row. Keep those neighbouring plants outside the two middle-row cards. */
.subject-card.informatique .subject-art,.subject-card.culture .subject-art{background-position:var(--tile-x) 64.6%}

/* Leave the beginning of the subject menu visible on short landscape screens. */
@media(max-height:500px){.cover-screen{padding-top:12px}.cover-screen .city-map{width:calc(100% - 24px)}.subjects-menu{margin-top:18px}.subjects-menu h2{margin-bottom:14px}}

/* A panoramic cover with live, responsive branding instead of tiny baked-in text. */
.city-banner{height:clamp(260px,31vw,374px)}
.city-banner .city-image{height:100%;object-fit:cover;object-position:center center}
.banner-identity{position:absolute;inset:22px 24px auto;display:flex;align-items:center;justify-content:center;gap:28px;color:#1e2937;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.banner-game{display:flex;align-items:center;flex-direction:column;gap:6px}
.banner-game>strong{font-size:clamp(34px,4.4vw,56px);font-weight:750;line-height:1.05;letter-spacing:-2px;white-space:nowrap}
.banner-game>strong>span{color:#168c9c}
.banner-course{font-size:clamp(12px,1.5vw,18px);line-height:1.2;letter-spacing:2px}
.banner-school{display:flex;align-items:center;gap:12px;border-left:1px solid #36465670;padding-left:24px}
.banner-school>img{height:66px;width:auto;flex-shrink:0;object-fit:contain}
.banner-school>div{display:flex;flex-direction:column;gap:2px}
.banner-school strong{font-size:18px;line-height:1.25;font-weight:650}
.banner-school span{font-size:15px;line-height:1.3}
@media(max-width:850px){.city-banner{height:300px}.banner-identity{inset:18px 18px auto;gap:20px}.banner-school{padding-left:18px;gap:10px}.banner-school>img{height:54px}.banner-school strong{font-size:15px}.banner-school span{font-size:13px}}
@media(max-width:640px){.city-banner{height:230px}.banner-identity{inset:16px 10px auto;gap:12px}.banner-game{gap:5px}.banner-game>strong{font-size:28px;letter-spacing:-1.1px}.banner-course{font-size:11px;letter-spacing:1px}.banner-school{padding-left:10px;gap:6px}.banner-school>img{height:38px}.banner-school strong{font-size:11px;max-width:88px}.banner-school span{font-size:10px}}
@media(max-width:360px){.banner-game>strong{font-size:25px}.banner-identity{gap:9px}.banner-school{padding-left:8px}.banner-school>img{height:34px}.banner-school strong{font-size:10px}}
@media(max-height:500px) and (min-width:641px){.city-banner{height:190px}.banner-identity{inset:10px 16px auto;gap:18px}.banner-game>strong{font-size:32px}.banner-course{font-size:11px;letter-spacing:1px}.banner-school>img{height:40px}.banner-school strong{font-size:13px}.banner-school span{font-size:11px}}

/* Approved compact cover, with live branding and full building illustrations. */
.cover-screen .city-map{height:300px;border-radius:28px;background:#ddf2fa}
.city-banner .city-image{object-position:center bottom}
.city-banner::after{content:"";position:absolute;inset:0 0 auto;height:125px;background:linear-gradient(#e6f6ffe8 0%,#e6f6ffd9 70%,#e6f6ff00 100%);pointer-events:none}
.banner-identity{inset:20px 20px auto;gap:30px;z-index:1;color:#183043}
.banner-game{gap:9px}
.banner-game>strong{display:flex;align-items:center;font-size:clamp(36px,4.2vw,54px);font-weight:750;letter-spacing:-2.1px;line-height:1}
.banner-game>strong>img{width:59px;height:59px;margin-right:-1px}
.banner-game>strong .cap{color:#218b95}
.banner-course{color:#216a78;font-size:15px;letter-spacing:3px;font-weight:550}
.banner-school{gap:12px;padding-left:25px;border-color:#426e7d80}
.banner-school>img{height:67px}.banner-school strong{font-size:20px}.banner-school span{font-size:17px}
.subject-caption{order:0;border-bottom:0;padding:16px;gap:8px}.subject-name{font-size:18px;min-height:0}.subject-art{aspect-ratio:1.45;background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#fff}.subjects-grid{gap:16px}.subject-card{border-radius:20px}
@media(max-width:850px){.cover-screen .city-map{height:250px}.banner-identity{gap:20px}.banner-game>strong{font-size:38px;letter-spacing:-1.5px}.banner-game>strong>img{width:44px;height:44px}.banner-school{padding-left:16px;gap:8px}.banner-school>img{height:49px}.banner-school strong{font-size:16px}.banner-school span{font-size:14px}.banner-course{font-size:12px;letter-spacing:2px}}
@media(max-width:600px){.cover-screen .city-map{height:auto;border-radius:22px;background:#edf7fb}.city-banner::after{display:none}.banner-identity{position:relative;inset:auto;padding:18px 10px;gap:12px}.banner-game>strong{font-size:27px;letter-spacing:-1.2px}.banner-game>strong>img{width:31px;height:31px}.banner-game{gap:5px}.banner-course{font-size:10px;letter-spacing:1.5px}.banner-school{gap:6px;padding-left:10px}.banner-school>img{height:38px}.banner-school strong{font-size:11px;max-width:90px;line-height:1.3}.banner-school span{font-size:10px}.city-banner .city-image{height:155px}.subjects-menu{margin-top:22px}.subjects-menu h2{font-size:22px;margin-bottom:16px}.subjects-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.subject-caption{padding:13px}.subject-name,.subject-card.ready .subject-name{font-size:16px}.subject-card{border-radius:17px}.subject-art{aspect-ratio:1.2;background-size:contain}}
@media(max-width:360px){.banner-identity{gap:8px;padding:16px 7px}.banner-game>strong{font-size:23px}.banner-game>strong>img{width:27px;height:27px}.banner-school{padding-left:7px}.banner-school>img{height:32px}.banner-school strong{font-size:10px;max-width:75px}.city-banner .city-image{height:135px}.subject-card .subject-art{width:100%;margin:0}}

.banner-game>strong>span{color:#183043}.banner-game>strong>span .cap{color:#218b95}

/* Letter proportions aligned with the approved wordmark reference. */
.banner-game>strong{font-weight:800;letter-spacing:-.035em;align-items:baseline}
.banner-game>strong>img{width:.8em;height:.725em;margin-right:.015em;transform:translateY(.02em)}
.banner-course{display:flex;align-items:center;gap:14px;font-weight:500;letter-spacing:.19em}
.banner-course::before,.banner-course::after{content:"";width:38px;height:1px;background:#216a78;opacity:.8}
@media(max-width:600px){.banner-course{gap:8px}.banner-course::before,.banner-course::after{width:20px}}