/* Abécédaire commun G3 / G4 / G5 — feuille de style autonome */
:root{ --navy:#14284A; --blue:#1E6FB8; --purple:#6A3D9A; --green:#2E8B57; --red:#C0504D; --bg:#F7F9FC; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:"Nunito","Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif; background:var(--bg); color:#222; line-height:1.45; }
a{ color:inherit; }
.flag-strip{ height:6px; display:flex; } .flag-strip span{ flex:1; } .flag-strip .b{ background:#0055A4; } .flag-strip .w{ background:#fff; } .flag-strip .r{ background:#EF4135; }

/* en-tête */
header.site{ color:#fff; padding:56px 24px 40px; text-align:center; position:relative; }
header.site .eyebrow{ font-size:13px; letter-spacing:2px; text-transform:uppercase; opacity:.88; }
header.site h1{ margin:8px 0 6px; font-size:36px; line-height:1.15; }
header.site p{ opacity:.93; font-size:15px; max-width:660px; margin:0 auto; }
.lang-switch{ position:absolute; top:14px; right:14px; display:flex; gap:6px; }
.lang-btn{ background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.45); color:#fff; font:800 12.5px "Nunito","Segoe UI",sans-serif; padding:6px 11px; border-radius:20px; cursor:pointer; }
.lang-btn.active{ background:#fff; color:var(--navy); border-color:#fff; }
.home-btn{ position:absolute; top:14px; left:14px; background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.55); color:#fff; text-decoration:none; font-weight:800; font-size:13px; padding:6px 14px; border-radius:20px; }
.home-btn:hover{ background:#fff; color:var(--navy); }
footer{ text-align:center; padding:20px; color:#999; font-size:12.5px; }
.hint{ color:#667; font-size:14px; margin:0 0 10px; }
.spk-btn{ background:none; border:none; cursor:pointer; font-size:17px; vertical-align:middle; padding:2px 4px; } .spk-btn:hover{ transform:scale(1.2); }

main.abc{ max-width:1080px; margin:0 auto; padding:0 16px 50px; }
.toolbar{ background:#fff; border-radius:16px; padding:16px 18px; margin:-26px 0 14px; box-shadow:0 4px 16px rgba(20,40,74,.14); position:relative; z-index:3; display:flex; flex-direction:column; gap:12px; }
.tb-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.tb-row input[type=search]{ flex:1; min-width:220px; padding:11px 14px; border-radius:12px; border:2px solid var(--blue); font:700 15px "Nunito","Segoe UI","Microsoft YaHei",sans-serif; }
.tb-row select{ padding:10px 12px; border-radius:12px; border:2px solid #cfd8e6; font:700 14px "Nunito","Segoe UI","Microsoft YaHei",sans-serif; color:var(--navy); background:#fff; min-width:150px; max-width:100%; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{ border:2px solid #dfe5ee; background:#fff; color:var(--navy); border-radius:20px; padding:6px 12px; font:800 13px "Nunito","Segoe UI","Microsoft YaHei",sans-serif; cursor:pointer; }
.chip.on{ background:var(--navy); border-color:var(--navy); color:#fff; }
.tbtn{ border:none; border-radius:14px; padding:10px 16px; font:900 14px "Nunito","Segoe UI","Microsoft YaHei",sans-serif; cursor:pointer; color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.2); }
.tbtn.game{ background:linear-gradient(120deg,#ff5d73,#ffb703); color:#2a1b00; }
.tbtn.rand{ background:linear-gradient(120deg,#2ec4b6,#4d7cfe); }
.tbtn.tog{ background:#eef2f8; color:var(--navy); box-shadow:none; }
.tbtn.tog.on{ background:var(--navy); color:#fff; }
.tbtn:active{ transform:translateY(2px); }

/* ruban A–Z */
.ribbon{ position:sticky; top:0; z-index:15; display:flex; flex-wrap:wrap; gap:5px; justify-content:center; padding:9px 6px; background:rgba(247,249,252,.95); backdrop-filter:blur(6px); border-bottom:2px solid #e4eaf3; margin:0 -16px 8px; }
.ribbon button{ width:34px; height:34px; border-radius:50%; border:none; background:var(--lc); color:#fff; font:900 16px "Nunito","Segoe UI",sans-serif; cursor:pointer; position:relative; box-shadow:0 2px 0 rgba(0,0,0,.18); transition:transform .12s; }
.ribbon button:hover:not(:disabled){ transform:translateY(-3px) scale(1.12); }
.ribbon button:disabled{ background:#d9dfe9; box-shadow:none; cursor:default; opacity:.7; }
.ribbon button small{ position:absolute; top:-5px; right:-5px; background:#fff; color:var(--navy); border-radius:9px; font:900 10px "Nunito",sans-serif; padding:0 4px; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.count{ text-align:center; color:#667; font-weight:800; font-size:14px; margin:10px 0 4px; }

/* sections par lettre */
.letter-sec{ margin:26px 0 8px; scroll-margin-top:62px; }
.letter-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.bubble{ width:64px; height:64px; border-radius:50% 50% 50% 14px; background:var(--lc); color:#fff; display:grid; place-items:center; font:900 38px "Comic Neue","Nunito","Trebuchet MS",sans-serif; box-shadow:0 5px 0 rgba(0,0,0,.18); transform:rotate(-6deg); }
.letter-head .lc{ font-weight:900; color:var(--navy); font-size:15px; } .letter-head .lc span{ color:var(--lc); }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px 14px; padding:6px 2px; }
.wcard{ --tilt:0deg; --uc:#1E6FB8; background:#fff; border-radius:16px; padding:12px 14px 10px; display:flex; gap:11px; border:3px solid var(--uc); box-shadow:0 5px 0 rgba(20,40,74,.10),0 8px 16px rgba(20,40,74,.08); transform:rotate(var(--tilt)); transition:transform .15s; position:relative; }
.wcard:hover{ transform:rotate(0) translateY(-4px); z-index:2; }
.wico{ font-size:2.3rem; line-height:1; flex:none; align-self:center; }
.wmain{ flex:1; min-width:0; }
.wfr{ font-weight:900; color:var(--navy); font-size:17px; line-height:1.2; word-break:break-word; }
.wfr .star{ background:none; border:none; cursor:pointer; font-size:17px; padding:2px 3px; }
.wtr{ margin-top:3px; font-size:14px; transition:filter .2s; }
.wtr .en{ color:#445; font-weight:700; } .wtr .zh{ color:var(--purple); display:block; font-style:italic; }
.hide-tr .wtr{ filter:blur(7px); cursor:pointer; user-select:none; } .hide-tr .wtr.show{ filter:none; }
.badges{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.badge{ --uc:#1E6FB8; text-decoration:none; font:900 10.5px "Nunito","Segoe UI",sans-serif; color:#fff; background:var(--uc); padding:2px 8px; border-radius:10px; }
.badge:hover{ filter:brightness(1.15); }
.empty-abc{ text-align:center; padding:40px 10px; color:#889; font-weight:800; font-size:18px; }

/* fenêtre : défi / mot surprise */
.modal{ position:fixed; inset:0; background:rgba(10,18,40,.72); display:none; align-items:center; justify-content:center; z-index:60; padding:14px; }
.modal.on{ display:flex; }
.modal-box{ background:#fff; border-radius:22px; padding:22px 22px 18px; width:min(520px,100%); max-height:92vh; overflow:auto; text-align:center; position:relative; }
.modal-box .x{ position:absolute; top:10px; right:12px; background:#eef2f8; border:none; border-radius:50%; width:34px; height:34px; cursor:pointer; font-size:17px; }
.modal-box h2{ margin:0 0 4px; color:var(--navy); }
.modal-box .big{ font-size:3.6rem; line-height:1; margin:6px 0; }
.q-word{ font-size:30px; font-weight:900; color:var(--navy); margin:4px 0 12px; }
.q-opts{ display:grid; gap:9px; margin:10px 0; }
.q-opt{ border:3px solid #dfe5ee; background:#f7f9fc; border-radius:14px; padding:12px; font:800 17px "Nunito","Segoe UI","Microsoft YaHei",sans-serif; cursor:pointer; color:var(--navy); }
.q-opt:hover:not(:disabled){ border-color:var(--blue); }
.q-opt.ok{ background:#d9f4e4; border-color:var(--green); } .q-opt.ko{ background:#fbe3e3; border-color:var(--red); }
.q-bar{ height:10px; background:#e6ecf5; border-radius:6px; overflow:hidden; margin:6px 0 12px; } .q-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--purple)); }
.q-modes{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:12px 0; }
.q-foot{ min-height:24px; font-weight:800; margin-top:6px; }
.stars-big{ font-size:2.4rem; letter-spacing:4px; }
@media (max-width:560px){ header.site h1{ font-size:26px; } .ribbon button{ width:30px; height:30px; font-size:14px; } .bubble{ width:54px; height:54px; font-size:32px; } }