/* Veramind — CSS de base (zéro framework, sera enrichi avec l'UI complète) */

:root {
    --violet: #6c5ce7;
    --violet-fonce: #5546d1;
    --fond: #f4f4fb;
    --texte: #23233b;
    --gris: #8a8aa3;
    --rouge: #d63031;
    --blanc: #ffffff;
    --rayon: 12px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fond);
    color: var(--texte);
    min-height: 100vh;
}

.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: var(--blanc);
    box-shadow: 0 1px 4px rgb(35 35 59 / 8%);
}

.logo {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--violet);
    text-decoration: none;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pseudo { font-weight: 600; color: var(--texte); text-decoration: none; }
.pseudo:hover { color: var(--violet); }
.xp, .streak { color: var(--gris); font-size: 0.95rem; }

.btn-lien {
    background: none;
    border: none;
    color: var(--gris);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    padding: 0;
}

.contenu {
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.carte {
    background: var(--blanc);
    border-radius: var(--rayon);
    padding: 2rem;
    box-shadow: 0 2px 8px rgb(35 35 59 / 6%);
}

.carte-auth {
    max-width: 420px;
    margin: 3rem auto;
}

.carte h1 {
    margin-top: 0;
    font-size: 1.5rem;
}

label {
    display: block;
    margin: 1rem 0 0.35rem;
    font-weight: 600;
    font-size: 0.95rem;
}

input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d5d5e6;
    border-radius: 8px;
    font: inherit;
    background: var(--blanc);
}

input:focus {
    outline: 2px solid var(--violet);
    outline-offset: 1px;
    border-color: var(--violet);
}

.btn {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.7rem;
    background: var(--violet);
    color: var(--blanc);
    border: none;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.btn:hover { background: var(--violet-fonce); }

.erreur {
    color: var(--rouge);
    font-size: 0.9rem;
    margin: 0.35rem 0 0;
}

.note {
    color: var(--gris);
    font-size: 0.92rem;
    margin-top: 1.25rem;
}

.note a { color: var(--violet); }

/* ── Navigation & flash ─────────────────────────── */

.nav-liens { display: flex; gap: 1.25rem; }
.nav-liens a { color: var(--texte); text-decoration: none; font-weight: 600; }
.nav-liens a:hover { color: var(--violet); }

.bonus-chip { background: linear-gradient(90deg, #fdcb6e, #e17055); color: #fff; border-radius: 999px; padding: 0.15rem 0.6rem; font-weight: 700; font-size: 0.85rem; }

.flash { background: #d1f2eb; color: #0e6655; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1.25rem; font-weight: 600; }

.titre-page { font-size: 1.6rem; }
.titre-section { font-size: 1.15rem; color: var(--gris); margin: 1.75rem 0 0.75rem; }
.fil-ariane { color: var(--gris); font-size: 0.92rem; }
.fil-ariane a { color: var(--violet); }

.bandeau-bonus { background: linear-gradient(90deg, #fff3cd, #ffeaa7); border-radius: 8px; padding: 0.75rem 1rem; margin: 1rem 0; }
.bandeau-brouillon { background: #fdebd0; border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 1rem; font-size: 0.92rem; }

/* ── Dashboard : matieres ───────────────────────── */

.grille-matieres { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }

.carte-matiere { display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none; color: var(--texte); border-top: 4px solid var(--couleur, var(--violet)); padding: 1.25rem; transition: transform 0.12s ease; }
.carte-matiere:hover { transform: translateY(-3px); }
.matiere-icone { font-size: 1.8rem; }
.matiere-nom { font-weight: 700; }
.matiere-progression { font-size: 0.85rem; color: var(--gris); }

.barre { display: block; height: 7px; background: #ececf6; border-radius: 999px; margin-bottom: 0.3rem; overflow: hidden; }
.barre-remplie { display: block; height: 100%; background: var(--couleur, var(--violet)); border-radius: 999px; }

.liste-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge { background: var(--blanc); border-radius: 999px; padding: 0.35rem 0.8rem; box-shadow: 0 1px 4px rgb(35 35 59 / 8%); font-size: 0.92rem; }

/* ── Matiere : chapitres & notions ──────────────── */

.carte-chapitre { margin-bottom: 1.25rem; }
.carte-chapitre h2 { font-size: 1.15rem; margin: 0 0 0.25rem; }
.niveau { background: #ececf6; color: var(--violet); border-radius: 6px; padding: 0.1rem 0.45rem; font-size: 0.8rem; margin-left: 0.5rem; vertical-align: middle; }

.liste-notions { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.notion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.55rem 0.25rem; border-top: 1px solid #f0f0f7; }
.notion-titre { flex: 1; min-width: 200px; }
.notion-actions { display: flex; gap: 0.4rem; align-items: center; }
.passerelle { flex-basis: 100%; color: var(--gris); font-size: 0.85rem; padding-left: 1.9rem; }

.btn-petit { border: 1px solid var(--violet); color: var(--violet); border-radius: 6px; padding: 0.25rem 0.7rem; text-decoration: none; font-size: 0.88rem; font-weight: 600; }
.btn-petit-violet { background: var(--violet); color: var(--blanc); }
.btn-petit:hover { opacity: 0.85; }

/* ── Lecon ──────────────────────────────────────── */

.lecon-contenu { line-height: 1.65; }
.lecon-contenu h2 { font-size: 1.25rem; margin-top: 1.5rem; }
.lecon-contenu h3 { font-size: 1.05rem; }
.lecon-contenu code { background: #f0f0f7; border-radius: 4px; padding: 0.1rem 0.35rem; }
.lecon-contenu blockquote { border-left: 3px solid var(--violet); margin-left: 0; padding-left: 1rem; color: var(--gris); }

/* ── Quiz ───────────────────────────────────────── */

.quiz-progression { color: var(--gris); font-size: 0.9rem; }
.quiz-enonce { font-size: 1.2rem; }
.quiz-options { display: grid; gap: 0.6rem; margin-top: 1rem; }
.quiz-option { text-align: left; background: var(--fond); border: 2px solid #e2e2f0; border-radius: 10px; padding: 0.8rem 1rem; font: inherit; cursor: pointer; }
.quiz-option:hover { border-color: var(--violet); }

.quiz-resultat-titre { margin-bottom: 0.25rem; }
.quiz-score { font-size: 1.1rem; font-weight: 700; }
.quiz-xp { color: #e17055; font-weight: 700; }
.quiz-bonus-info { background: #fff3cd; border-radius: 8px; padding: 0.6rem 0.9rem; }

.quiz-corrections { margin: 1.25rem 0; display: grid; gap: 0.75rem; }
.correction { border-radius: 10px; padding: 0.8rem 1rem; }
.correction-ok { background: #eafaf1; }
.correction-ko { background: #fdedec; }
.correction-enonce { font-weight: 600; margin: 0 0 0.3rem; }
.correction-reponse { margin: 0; font-size: 0.95rem; }
.correction-explication { margin: 0.4rem 0 0; color: var(--gris); font-size: 0.92rem; }

/* ── Tuteur (chat) ──────────────────────────────── */

.carte-chat { display: flex; flex-direction: column; min-height: 60vh; }
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.7rem; padding: 0.5rem 0; max-height: 60vh; }
.message { max-width: 85%; border-radius: 14px; padding: 0.7rem 1rem; white-space: pre-wrap; line-height: 1.5; }
.message-user { align-self: flex-end; background: var(--violet); color: var(--blanc); border-bottom-right-radius: 4px; }
.message-assistant { align-self: flex-start; background: var(--fond); border-bottom-left-radius: 4px; }

.chat-form { display: flex; gap: 0.6rem; margin-top: 1rem; }
.chat-form input { flex: 1; }
.btn-chat { width: auto; margin-top: 0; padding: 0.6rem 1.25rem; }

.liste-conversations { list-style: none; padding: 0; }
.liste-conversations li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid #f0f0f7; }

/* ── Defi du jour ───────────────────────────────── */

.carte-defi { border-left: 5px solid #e17055; margin-bottom: 1.25rem; }
.carte-defi h2 { margin-top: 0; font-size: 1.1rem; }
.btn-defi { display: inline-block; width: auto; padding: 0.6rem 1.4rem; background: #e17055; }
.btn-defi:hover { background: #d35400; }

/* ── Suivi parent ───────────────────────────────── */

.carte-enfant { margin-bottom: 1.25rem; }
.enfant-entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.enfant-entete h2 { margin: 0; }
.enfant-stats { display: flex; gap: 1rem; }
.carte-enfant h3 { font-size: 1rem; color: var(--gris); margin: 1.25rem 0 0.5rem; }

.parent-progression { display: grid; gap: 0.4rem; }
.parent-matiere { display: grid; grid-template-columns: 200px 1fr 60px; align-items: center; gap: 0.75rem; }
.parent-matiere .barre { margin-bottom: 0; }

.activite-lecon span { margin-right: 0.3rem; cursor: help; }
.legende-activite { margin-top: 0.35rem; font-size: 0.85rem; }

.tableau { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tableau th { text-align: left; color: var(--gris); font-weight: 600; padding: 0.35rem 0.5rem; border-bottom: 1px solid #e8e8f2; }
.tableau td { padding: 0.35rem 0.5rem; border-bottom: 1px solid #f3f3f9; }

/* ── Responsive mobile ──────────────────────────── */

.tableau-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 720px) {
    .entete {
        flex-wrap: wrap;
        gap: 0.4rem 1rem;
        padding: 0.6rem 0.9rem;
    }

    .logo { font-size: 1.05rem; }

    .nav-liens { gap: 0.9rem; font-size: 0.95rem; }

    .nav-user {
        width: 100%;
        justify-content: flex-end;
        gap: 0.6rem;
        font-size: 0.9rem;
    }

    .nav-user .pseudo-nom { display: none; } /* sur mobile, seul l'engrenage ⚙️ (accès profil) reste */

    .contenu { margin: 1rem auto; padding: 0 0.75rem; }

    .carte { padding: 1.1rem; }
    .carte-auth { margin: 1.25rem auto; }

    .titre-page { font-size: 1.3rem; }

    .parent-matiere {
        grid-template-columns: 1fr auto;
        grid-template-areas: "nom compte" "barre barre";
        row-gap: 0.15rem;
    }
    .parent-matiere > :first-child { grid-area: nom; }
    .parent-matiere > .barre { grid-area: barre; }
    .parent-matiere > .note { grid-area: compte; }

    .enfant-stats { flex-wrap: wrap; gap: 0.6rem; }

    .notion-titre { min-width: 140px; }
    .passerelle { padding-left: 0; }

    .message { max-width: 95%; }
    .carte-chat { min-height: 70vh; }
    .chat-messages { max-height: none; }
}

/* iOS : un input < 16px declenche un zoom automatique au focus */
input, button, select, textarea { font-size: max(1rem, 16px); }

/* ── Auth : séparateur, demande d'accès ─────────── */

.separateur-auth { border: none; border-top: 1px solid #ececf6; margin: 1.5rem 0 1rem; }
textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #d5d5e6; border-radius: 8px; font: inherit; background: var(--blanc); resize: vertical; }
textarea:focus { outline: 2px solid var(--violet); outline-offset: 1px; border-color: var(--violet); }
.sr-inline { display: inline; margin: 0 0.25rem 0 0; font-weight: 400; font-size: 0.85rem; color: var(--gris); }

.pastille { background: var(--rouge); color: #fff; border-radius: 999px; padding: 0.05rem 0.45rem; font-size: 0.78rem; font-weight: 700; margin-left: 0.2rem; }

.carte-demande { margin-bottom: 1rem; }
.demande-entete { margin-bottom: 0.4rem; }
.demande-message { background: var(--fond); border-radius: 8px; padding: 0.6rem 0.9rem; margin: 0.4rem 0; font-style: italic; }
.demande-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0; }

/* ── Profil ─────────────────────────────────────── */

.carte-profil { margin: 0 0 1.25rem; max-width: 480px; }
.carte-profil h2 { margin-top: 0; font-size: 1.15rem; }

/* ── Duels ──────────────────────────────────────── */

.bandeau-duel { background: #ede7ff; border-left: 5px solid var(--violet); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem; }

.carte-defier { margin-top: 1.25rem; }
.carte-defier h2 { margin-top: 0; font-size: 1.1rem; }
.carte-defier .note { margin-top: 0.25rem; }
.liste-copains { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

.carte-duel-attente { border-left: 5px solid var(--violet); margin-bottom: 1rem; }
.carte-duel-attente h2 { margin-top: 0; font-size: 1.1rem; }
.carte-duel-envoye { margin-bottom: 1rem; }
.carte-duel-attente p, .carte-duel-envoye p { margin: 0.25rem 0 0.6rem; }

.duel-resultat { background: #ede7ff; border-radius: 10px; padding: 0.8rem 1rem; font-weight: 600; margin: 0.75rem 0; }

.classement-moi td { background: #f2f0fd; font-weight: 700; }

/* ── Lecture audio ──────────────────────────────── */

.btn-audio {
    display: inline-block;
    margin: 0.25rem 0 0.75rem;
    padding: 0.5rem 1.1rem;
    background: var(--blanc);
    border: 2px solid var(--violet);
    color: var(--violet);
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.btn-audio:hover { background: #f2f0fd; }