:root {
    --fond: #f4f1ea;
    --papier: #fffdf8;
    --encre: #1d2330;
    --doux: #6b7280;
    --bleu: #1f3a5f;
    --rouge: #b42318;
    --orange: #c26a00;
    --vert: #1f7a3d;
    --ciel: #1d6fa5;
    --bord: #e2ddd0;
    --rayon: 14px;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        --fond: #14171c;
        --papier: #1e232b;
        --encre: #e9e6df;
        --doux: #9aa1ad;
        --bleu: #8db4e2;
        --bord: #2f3540;
        color-scheme: dark;
    }
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fond);
    color: var(--encre);
    min-height: 100dvh;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }

.barre {
    position: sticky; top: 0; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem;
    padding: .6rem 1rem calc(.6rem) ;
    padding-top: max(.6rem, env(safe-area-inset-top));
    background: var(--papier); border-bottom: 1px solid var(--bord);
}
.barre h1 { font-size: 1.1rem; margin: 0; color: var(--bleu); }
.barre h1 span { color: var(--doux); font-weight: 400; font-size: .9rem; }
nav { display: flex; gap: .25rem; }
nav button {
    border: 0; background: none; padding: .45rem .6rem; border-radius: 999px; cursor: pointer; color: var(--doux);
}
nav button.actif { background: var(--bleu); color: var(--papier); }

main { max-width: 40rem; margin: 0 auto; padding: 1rem 1rem 6rem; }

.principal, .bouton, .danger, .notes-boutons button {
    border: 1px solid var(--bord); border-radius: var(--rayon); padding: .7rem 1rem;
    background: var(--papier); cursor: pointer; text-decoration: none; display: inline-block; text-align: center;
}
.principal { background: var(--bleu); color: var(--papier); border-color: var(--bleu); font-weight: 600; }
.danger { color: var(--rouge); border-color: currentColor; background: none; }
.lien { border: 0; background: none; color: var(--doux); text-decoration: underline; cursor: pointer; }
.large { width: 100%; padding: 1rem; font-size: 1.05rem; }
.erreur { color: var(--rouge); min-height: 1.2em; }
.vide { text-align: center; color: var(--doux); padding: 2rem 1rem; }
.vide .principal { margin-top: 1rem; }

/* Paquets */
.paquet {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1rem 1.1rem; margin-bottom: .7rem; text-align: left; cursor: pointer;
    background: var(--papier); border: 1px solid var(--bord); border-radius: var(--rayon);
}
.paquet .nom { font-weight: 600; font-size: 1.05rem; }
.paquet .compteurs { color: var(--doux); font-size: .9rem; text-align: right; white-space: nowrap; }
.paquet .compteurs small { display: block; }
.paquet .due { color: var(--vert); }
.paquet .nouv { color: var(--ciel); }

/* Fiche de révision */
.progression { display: flex; justify-content: space-between; color: var(--doux); font-size: .9rem; margin-bottom: .6rem; }
.fiche {
    background: var(--papier); border: 1px solid var(--bord); border-radius: calc(var(--rayon) * 1.4);
    padding: 1.5rem 1.2rem; min-height: 46dvh; text-align: center; cursor: pointer;
    box-shadow: 0 6px 24px rgb(0 0 0 / .06);
}
.etiquette { font-size: .8rem; color: var(--doux); text-transform: uppercase; letter-spacing: .06em; }
.fiche .mot { font-size: clamp(2rem, 9vw, 3rem); margin: 1.2rem 0; font-weight: 600; word-break: break-word; }
.verso { border-top: 1px dashed var(--bord); padding-top: 1rem; }
.traduction { font-size: 1.4rem; font-weight: 600; margin: .2rem 0; }
.grammaire { color: var(--doux); font-style: italic; margin: .2rem 0 1rem; }
.exemple { font-size: 1.15rem; margin: .3rem 0; }
.exemple-fr { color: var(--doux); margin: 0; }
.notes { color: var(--doux); font-size: .9rem; white-space: pre-line; }
.grammaire:empty, .exemple:empty, .exemple-fr:empty, .notes:empty { display: none; }

.actions-revision {
    position: fixed; left: 0; right: 0; bottom: 0; padding: .7rem 1rem;
    padding-bottom: max(.7rem, env(safe-area-inset-bottom));
    background: linear-gradient(transparent, var(--fond) 30%);
}
.actions-revision > * { max-width: 40rem; margin: 0 auto; }
.notes-boutons { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.notes-boutons button { padding: .75rem .2rem; font-weight: 600; color: var(--papier); border: 0; }
.notes-boutons small { display: block; font-weight: 400; opacity: .85; font-size: .8rem; }
.n0 { background: var(--rouge) !important; }
.n1 { background: var(--orange) !important; }
.n2 { background: var(--vert) !important; }
.n3 { background: var(--ciel) !important; }

/* Liste */
.filtres { display: flex; gap: .5rem; margin-bottom: .6rem; }
.filtres input { flex: 1; min-width: 0; }
.filtres input, .filtres select, .carte-form input, .carte-form textarea {
    padding: .65rem .8rem; border: 1px solid var(--bord); border-radius: 10px; background: var(--papier);
}
.outils { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.outils > * { padding: .45rem .8rem; font-size: .9rem; }
.liste { list-style: none; padding: 0; margin: 0; }
.liste li[data-id] {
    background: var(--papier); border: 1px solid var(--bord); border-radius: 10px;
    padding: .7rem .9rem; margin-bottom: .45rem; cursor: pointer;
    display: grid; grid-template-columns: auto 1fr; column-gap: .8rem;
}
.liste .mot { font-weight: 600; font-size: 1.1rem; }
.liste .trad { align-self: center; }
.liste small { grid-column: 1 / -1; color: var(--doux); }

/* Formulaire */
.carte-form { display: flex; flex-direction: column; gap: .7rem; }
.carte-form h2 { margin: 0 0 .2rem; font-size: 1.2rem; }
.carte-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--doux); }
.carte-form label > * { color: var(--encre); font-size: 1rem; }
.boutons { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
#vue-connexion { max-width: 22rem; margin: 18vh auto 0; }

.toast {
    position: fixed; left: 50%; bottom: 6.5rem; transform: translateX(-50%); z-index: 5;
    background: var(--encre); color: var(--fond); padding: .6rem 1rem; border-radius: 999px; font-size: .95rem;
}

/* Depuis un texte */
.aide { color: var(--doux); font-size: .9rem; margin: 0; }
.carte-form textarea[name="text"] { font-family: inherit; }
#propositions { margin-top: 1.2rem; }
.propositions li[data-i] {
    display: grid; grid-template-columns: auto auto 1fr; column-gap: .6rem; align-items: center;
    background: var(--papier); border: 1px solid var(--bord); border-radius: 10px;
    padding: .7rem .9rem; margin-bottom: .45rem; cursor: pointer; opacity: .55;
}
.propositions li.garde { opacity: 1; border-color: var(--vert); }
.propositions input { width: 1.2rem; height: 1.2rem; pointer-events: none; }
.propositions small { grid-column: 2 / -1; color: var(--doux); }
.deja { color: var(--orange); font-style: normal; font-size: .85rem; }
#propositions .boutons { position: sticky; bottom: 0; padding: .6rem 0; background: var(--fond); }
#erreur-texte { white-space: pre-line; }

/* Statistiques */
#vue-stats h2 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; }
#vue-stats h2 small { display: block; font-weight: 400; color: var(--doux); font-size: .85rem; }
.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.tuile {
    background: var(--papier); border: 1px solid var(--bord); border-radius: var(--rayon);
    padding: .8rem 1rem; display: flex; flex-direction: column;
}
.tuile b { font-size: 1.7rem; line-height: 1.1; }
.tuile span { color: var(--doux); font-size: .85rem; }
.repartition { display: flex; gap: 2px; height: 1rem; }
.repartition span { border-radius: 4px; min-width: 4px; }
.r-nouv { background: #b9d3ea; }
.r-appr { background: #6f9fcb; }
.r-jeune { background: #2f6aa3; }
.r-mure { background: #173f66; }
@media (prefers-color-scheme: dark) {
    .r-nouv { background: #2a4a6e; }
    .r-appr { background: #3f72a8; }
    .r-jeune { background: #6d9fd6; }
    .r-mure { background: #b3d0f0; }
}
.legende { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem .8rem; font-size: .9rem; color: var(--doux); }
.legende b { color: var(--encre); }
.legende i { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }
.histogramme {
    display: flex; align-items: flex-end; gap: 2px; height: 8rem;
    border-bottom: 1px solid var(--bord); padding-bottom: 1.2rem; position: relative;
}
.histogramme .colonne {
    flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    position: relative; cursor: pointer; outline: none;
}
.histogramme .colonne span { width: 100%; max-width: 2.2rem; background: var(--bleu); border-radius: 4px 4px 0 0; min-height: 0; }
.histogramme .colonne:hover span, .histogramme .colonne:focus span, .histogramme .colonne.choisie span { opacity: .7; }
.histogramme .colonne small { position: absolute; bottom: -1.2rem; font-size: .7rem; color: var(--doux); white-space: nowrap; }
.histogramme .colonne em { font-style: normal; font-size: .8rem; color: var(--doux); }
.detail-barre { min-height: 1.3em; margin: .3rem 0 0; font-size: .85rem; color: var(--doux); }

/* Fiche : indice au recto français, réponse en russe, conjugaison */
.indice { color: var(--doux); font-style: italic; margin: -.6rem 0 0; }
.indice:empty, .conjugaison:empty { display: none; }
.traduction.en-russe { font-size: 1.9rem; }
.conjugaison { font-size: 1.05rem; margin: 0 0 1rem; white-space: pre-line; }

/* Six boutons dans la barre : on resserre sur les petits écrans */
@media (max-width: 30rem) {
    nav { gap: 0; width: 100%; justify-content: space-between; }
    nav button { padding: .4rem .45rem; font-size: .92rem; }
}

/* Complétion par Claude dans le formulaire */
.completion { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.completion .bouton { padding: .45rem .8rem; font-size: .9rem; }
.completion small { color: var(--doux); }
.bouton:disabled { opacity: .6; cursor: wait; }