/* Le style commun du site : cartes blanches sur fond foncé, bordures noires, peu de couleurs. */
:root{--bg:#e3e0d6;--card:#fff;--ink:#1d2733;--muted:#4e5a66;--line:#000;--pink:#ff90e8;
  --quiet:#f1efe9;--quiet-bd:#b9b2a3;--ok:#c4f1d6;--focus:#f0b429}
*{box-sizing:border-box}
html{font-size:21px}
html.size-1{font-size:24px}
html.size-2{font-size:28px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Verdana,Arial,system-ui,sans-serif;font-size:1rem;line-height:1.6}
main{max-width:900px;margin:0 auto;padding:0 16px 2rem}
a{color:inherit}
:focus-visible{outline:4px solid var(--focus);outline-offset:2px}

/* barre du haut : le bouton Accueil est toujours au même endroit */
.topbar{max-width:900px;margin:0 auto;padding:1rem 16px 1.2rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.homebtn{display:inline-flex;align-items:center;gap:.4rem;min-height:48px;padding:.3rem .9rem;background:#fff;border:2px solid #000;border-radius:6px;box-shadow:3px 3px 0 #000;font-weight:bold;text-decoration:none;color:#000}
.homebtn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}
.homebtn svg{width:26px;height:26px;flex:none}
.homebtn.here{opacity:.45;box-shadow:none}
.homebtn.here:hover{transform:none;box-shadow:none}

/* une carte par partie */
.card{background:var(--card);border:2px solid #000;border-radius:8px;padding:1.3rem 1.4rem;margin:0 0 2rem}
.card>h2{display:inline-block;margin:0 0 1rem;font-size:1.15rem;line-height:1.3;border-bottom:5px solid var(--u,var(--pink));padding-bottom:2px}
h1{font-size:1.5rem;line-height:1.25;margin:0 0 1.5rem;display:flex;align-items:center;gap:.7rem}
h1 .pic{width:52px;height:52px}
.lead{margin:-1rem 0 1.5rem;color:var(--muted);font-size:.9rem}

/* pictogramme de matière : un carré de couleur avec un dessin noir */
.pic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:2px solid #000;border-radius:6px;background:var(--c,#eee)}
.pic svg{width:70%;height:70%}

/* lignes de leçons */
.theme{margin:0 0 1rem}
.theme h3{font-size:.85rem;margin:0 0 .4rem;color:var(--muted)}
.lesson{display:flex;align-items:center;gap:.8rem;min-height:56px;padding:.6rem .9rem;margin:0 0 .6rem;background:#fff;border:2px solid #000;border-radius:6px;box-shadow:3px 3px 0 #000;text-decoration:none;color:#000}
.lesson:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}
.lesson .t{font-weight:900}
.lesson .d{color:var(--muted);font-size:.85rem}
.tag{margin-left:auto;flex:none;font-size:.75rem;font-weight:bold;border:2px solid #000;border-radius:5px;padding:0 .5rem;background:var(--quiet)}
.tag.go{background:var(--ok)}
.tag.new{background:var(--pink)}
.lesson.big{min-height:72px}
.lesson.big .t{font-size:1.1rem}
.lesson .go{margin-left:auto;flex:none;background:var(--pink);border:2px solid #000;border-radius:6px;padding:.3rem .9rem;font-weight:bold}

/* accueil : grille des matières et collection */
.subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.subject{display:flex;align-items:center;gap:.7rem;min-height:64px;padding:.6rem .8rem;background:#fff;border:2px solid #000;border-radius:6px;box-shadow:3px 3px 0 #000;text-decoration:none;color:#000;line-height:1.3}
.subject:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}
.subject .t{font-weight:900}
.subject .d{font-size:.8rem;color:var(--muted)}
.subject.quiet{background:var(--quiet);border-color:var(--quiet-bd);box-shadow:none;color:var(--muted)}
.subject.quiet:hover{transform:none;box-shadow:none;border-color:#000}
.subject.quiet .pic{opacity:.55;border-color:var(--quiet-bd)}
.won{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:0 0 .6rem}
.won .t{font-weight:bold}
.won .crowns{display:flex;flex-wrap:wrap;gap:2px}
.won .d{font-size:.8rem;color:var(--muted)}
.soon{color:var(--muted);font-size:.85rem;margin:.2rem 0 0;padding:.6rem .9rem;background:var(--quiet);border:2px solid var(--quiet-bd);border-radius:6px}
.soon b{font-weight:bold}

/* glossaire */
.words{display:grid;gap:1rem}
.word{border:2px solid #000;border-radius:6px;padding:.8rem 1rem}
.word h3{margin:0 0 .2rem;font-size:1.1rem}
.word p{margin:0 0 .4rem}
.etym{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.85rem;margin:.3rem 0}
.etp{display:inline-flex;flex-direction:column;border:2px solid #000;border-radius:5px;padding:.1rem .5rem;background:#fbf3d6}
.etp span{font-size:.75rem;color:var(--muted)}
.op{font-weight:900}
.seen{font-size:.8rem;color:var(--muted)}
.letters{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.5rem}
.letters a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:2px solid #000;border-radius:6px;font-weight:bold;text-decoration:none}

/* réglages */
.setrow{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;padding:.7rem 0;border-bottom:2px solid var(--quiet)}
.setrow:last-child{border-bottom:0}
.setrow .lbl{flex:1 1 14rem;font-weight:bold}
.seg{display:inline-flex;border:2px solid #000;border-radius:6px;overflow:hidden}
.seg button{min-height:48px;min-width:72px;padding:0 .8rem;font:inherit;font-size:.9rem;background:#fff;border:0;border-right:2px solid #000;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--pink);font-weight:bold}
.saved{font-size:.85rem;color:var(--muted);min-height:1.4em;margin:.5rem 0 0}

/* espace parent */
table{border-collapse:collapse;width:100%;font-size:.8rem}
th,td{border:2px solid #000;padding:.35rem .5rem;text-align:left;vertical-align:top}
th{background:#f6f4ef}
details{margin:.6rem 0;border:2px solid #000;border-radius:6px;padding:.4rem .8rem}
summary{cursor:pointer;font-weight:bold;min-height:44px;display:flex;align-items:center}
.small{font-size:.8rem;color:var(--muted)}
.bar{height:14px;border:2px solid #000;border-radius:4px;background:#fff;overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;background:var(--ok)}

/* ligne du bas : toujours les mêmes liens */
.foot{max-width:900px;margin:0 auto;padding:0 16px 2.5rem;display:flex;justify-content:center;flex-wrap:wrap;gap:1.6rem;font-size:.8rem}
.foot a{color:var(--muted);min-height:44px;display:inline-flex;align-items:center}
.foot a[aria-current]{font-weight:bold;color:#000;text-decoration:none}

@media (prefers-reduced-motion:reduce){.homebtn:hover,.lesson:hover,.subject:hover{transform:none}}
@media print{.topbar,.foot{display:none}body{background:#fff}.card{border:0;padding:0}}