/* --------------------------------------------------------------------
   Flashcards — feuille de style unique.

   Mobile d'abord : le cas d'usage dominant est l'iPhone et l'iPad, pas le
   MacBook. Les cibles tactiles font 44 px minimum, la zone de notation reste
   dans le pouce, et rien d'important ne se joue au survol.

   Thème clair et sombre suivent le réglage du système.
   -------------------------------------------------------------------- */

:root {
    --bg:        #f6f7f9;
    --surface:   #ffffff;
    --surface-2: #eef0f4;
    --border:    #d9dee6;
    --text:      #16181d;
    --muted:     #646c7a;
    --accent:    #2563eb;

    --rate:      #dc2626;   /* Raté   */
    --almost:    #d97706;   /* Presque */
    --right:     #059669;   /* Juste  */

    --radius: 14px;
    --shadow: 0 1px 2px rgba(16, 20, 28, .06), 0 4px 16px rgba(16, 20, 28, .06);

    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:        #0f1115;
        --surface:   #171a21;
        --surface-2: #212630;
        --border:    #2c323d;
        --text:      #e8eaee;
        --muted:     #969ead;
        --accent:    #5b8def;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* Empêche le rebond élastique pendant la révision : un glissement doit
       noter une carte, pas faire tressauter la page. */
    overscroll-behavior-y: none;
}

h1 { font-size: 1.45rem; margin: 0 0 1rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem;  margin: 1.6rem 0 .7rem; letter-spacing: -.01em; }

a { color: var(--accent); }

code {
    font: .875em ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--surface-2);
    padding: .1em .35em;
    border-radius: 5px;
}

.muted { color: var(--muted); font-size: .9rem; }
.hidden { display: none !important; }

/* --- Mise en page ---------------------------------------------------- */

.app { max-width: 780px; margin: 0 auto; padding: 1rem 1rem calc(1rem + var(--safe-bottom)); }

.sheet {
    max-width: 560px;
    margin: 0 auto;
    padding: 2rem 1.25rem calc(2rem + var(--safe-bottom));
}

.stack { display: grid; gap: .9rem; }

.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

.spread { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }

/* --- Barre de navigation --------------------------------------------- */

.topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem 1rem calc(.6rem);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.topbar .brand { font-weight: 650; letter-spacing: -.02em; margin-right: auto; }

.tab {
    appearance: none; border: 0; cursor: pointer;
    background: transparent; color: var(--muted);
    font: inherit; font-size: .9rem; font-weight: 550;
    padding: .45rem .7rem; border-radius: 9px;
    min-height: 38px;
}
.tab[aria-current="true"] { background: var(--surface-2); color: var(--text); }

/* --- Cartes de contenu ------------------------------------------------ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
}

.card + .card { margin-top: .75rem; }

.subject-line { display: flex; align-items: baseline; gap: .5rem; }

.dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

.pill {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
}
.pill.urgent { background: color-mix(in srgb, var(--rate) 18%, transparent); color: var(--rate); }
.pill.due    { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }

/* --- Formulaires ------------------------------------------------------ */

label { display: grid; gap: .3rem; font-size: .88rem; font-weight: 550; color: var(--muted); }

input, select, textarea {
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .6rem .7rem;
    min-height: 44px;
    width: 100%;
}

textarea { min-height: 180px; resize: vertical; font: .9rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.btn {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font: inherit; font-weight: 600;
    min-height: 44px; padding: .55rem 1rem;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: transparent; color: #fff; }
.btn.ghost   { background: transparent; }

/* --- Messages --------------------------------------------------------- */

.alert {
    border-radius: var(--radius);
    padding: .85rem 1rem;
    margin: 0 0 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: .92rem;
}
.alert p:first-child { margin-top: 0; }
.alert p:last-child  { margin-bottom: 0; }
.alert.ok   { border-color: var(--right);  background: color-mix(in srgb, var(--right) 10%, var(--surface)); }
.alert.err  { border-color: var(--rate);   background: color-mix(in srgb, var(--rate) 10%, var(--surface)); }
.alert.warn { border-color: var(--almost); background: color-mix(in srgb, var(--almost) 10%, var(--surface)); }
.alert.info { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }

.alert ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.alert li { margin: .15rem 0; }

/* --- Import ----------------------------------------------------------- */

.prompt-box {
    max-height: 260px;
    overflow: auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .8rem;
    font: .82rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap;
    -webkit-overflow-scrolling: touch;
}

.preview-card {
    border-top: 1px solid var(--border);
    padding: .7rem 0;
}
.preview-card:first-of-type { border-top: 0; }
.preview-card .q { font-weight: 600; }
.preview-card .a { color: var(--muted); font-size: .9rem; white-space: pre-wrap; margin-top: .2rem; }

/* --- Révision --------------------------------------------------------- */

.study { display: flex; flex-direction: column; min-height: calc(100dvh - 56px); }

.study-meta { display: flex; gap: .5rem; align-items: center; padding: .5rem 0; font-size: .82rem; color: var(--muted); }

.progress { flex: 1; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }

.flashcard {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem 1.25rem;
    margin: .5rem 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
}

.flashcard .question { font-size: 1.2rem; font-weight: 600; line-height: 1.4; }

.flashcard .answer { border-top: 1px solid var(--border); padding-top: 1rem; }
.flashcard .answer ul { margin: 0; padding-left: 1.25rem; }
.flashcard .answer li { margin: .3rem 0; }
.flashcard .answer p  { margin: 0; }

.flashcard .hint { font-size: .9rem; color: var(--muted); font-style: italic; }

.tap-hint { text-align: center; color: var(--muted); font-size: .85rem; }

.grade-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding-bottom: .5rem; }

.grade {
    appearance: none; cursor: pointer;
    font: inherit; font-weight: 650;
    min-height: 60px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.grade small { font-weight: 500; font-size: .72rem; opacity: .85; }
.grade.g1 { background: var(--rate); }
.grade.g2 { background: var(--almost); }
.grade.g3 { background: var(--right); }

/* --- Divers ----------------------------------------------------------- */

body.plain { background: var(--bg); }

.empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }