/* Correcteur SLC — feuille de style */
:root {
    --encre: #1B2B4B;
    --encre-claire: #2C4170;
    --fond: #EEF1F5;
    --papier: #FFFFFF;
    --feuille: #FBFCFD;
    --texte: #1C2330;
    --discret: #5B6577;
    --ligne: #D5DBE4;
    --focus: #7FA3E0;

    --ortho: #B71C1C;      --ortho-fond: #FDECEC;
    --gram: #1558A8;       --gram-fond: #E7F0FB;
    --typo: #4F5B6B;       --typo-fond: #ECEFF3;
    --style: #8A5700;      --style-fond: #FCF2DF;
    --slc: #5E35A6;        --slc-fond: #F0EAFA;
    --abrev: #0B6B66;      --abrev-fond: #E2F3F1;

    color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--texte);
    background: var(--fond);
}

/* En-tête */
.barre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 28px;
    background: var(--encre);
    color: #fff;
}
.marque { font-weight: 600; font-size: 1.125rem; }
.marque span { font-weight: 400; opacity: .75; margin-left: .5em; }
.session { display: flex; align-items: center; gap: 16px; font-size: .9375rem; }
.session form { margin: 0; }
.lien {
    background: none; border: 0; padding: 0;
    color: #fff; text-decoration: underline; font: inherit; cursor: pointer;
}

/* Disposition */
.espace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    max-width: 1280px;
    margin: 24px auto;
    padding: 0 24px;
}
.espace section {
    background: var(--papier);
    border: 1px solid var(--ligne);
    border-radius: 6px;
    padding: 20px;
}
.titre-zone, .entete-resultat h2 {
    display: block;
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--encre);
}

/* Saisie */
textarea {
    width: 100%;
    min-height: 440px;
    resize: vertical;
    padding: 14px;
    border: 1px solid var(--ligne);
    border-radius: 4px;
    font: inherit;
    line-height: 1.6;
    color: var(--texte);
}
textarea:focus-visible, button:focus-visible, a:focus-visible,
mark:focus-visible, .suggestion:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}
.actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
#compteur { color: var(--discret); font-size: .875rem; }

/* Boutons */
button { font: inherit; cursor: pointer; border-radius: 4px; }
.principal {
    background: var(--encre); color: #fff; border: 0;
    padding: 10px 22px; font-weight: 600;
}
.principal:hover { background: var(--encre-claire); }
.principal:disabled { opacity: .6; cursor: wait; }
.secondaire {
    background: #fff; color: var(--encre); border: 1px solid var(--encre);
    padding: 6px 14px; font-size: .9375rem;
}
.secondaire:hover:not(:disabled) { background: var(--encre); color: #fff; }
.secondaire:disabled { opacity: .45; cursor: not-allowed; }

/* Résultat */
.entete-resultat {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-bottom: 12px;
}
.entete-resultat h2 { margin: 0; }
.boutons-resultat { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
[hidden] { display: none !important; }
.boutons-saisie { display: flex; flex-wrap: wrap; gap: 8px; }
.secondaire { padding: 8px 16px; }

.apercu {
    min-height: 160px;
    max-height: 360px;
    overflow-y: auto;
    padding: 16px 20px;
    border-left: 3px solid var(--encre);
    background: var(--feuille);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.0625rem;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.apercu.vide {
    font-family: inherit;
    font-size: .9375rem;
    color: var(--discret);
    border-left-color: var(--ligne);
}

mark {
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}
mark.m-orthographe { background: var(--ortho-fond); text-decoration-color: var(--ortho); }
mark.m-grammaire   { background: var(--gram-fond);  text-decoration-color: var(--gram); }
mark.m-typographie { background: var(--typo-fond);  text-decoration-color: var(--typo); }
mark.m-style       { background: var(--style-fond); text-decoration-color: var(--style); }
mark.m-style_slc   { background: var(--slc-fond);   text-decoration-color: var(--slc); }
mark.m-abreviation { background: var(--abrev-fond); text-decoration-color: var(--abrev); }

.resume { margin: 14px 0 6px; font-size: .9375rem; color: var(--discret); }
.resume.erreur { color: var(--ortho); font-weight: 600; }
.resume.parfait { color: #1E6B3A; font-weight: 600; }

/* Liste des suggestions */
.suggestions {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 440px;
    overflow-y: auto;
}
.suggestion { border-top: 1px solid var(--ligne); padding: 12px 6px; }
.suggestion.active { background: #F4F7FC; }

.etiquette {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 9px;
    border-radius: 10px;
    font-size: .8125rem;
    font-weight: 600;
}
.etiquette.m-orthographe { color: var(--ortho); background: var(--ortho-fond); }
.etiquette.m-grammaire   { color: var(--gram);  background: var(--gram-fond); }
.etiquette.m-typographie { color: var(--typo);  background: var(--typo-fond); }
.etiquette.m-style       { color: var(--style); background: var(--style-fond); }
.etiquette.m-style_slc   { color: var(--slc);   background: var(--slc-fond); }
.etiquette.m-abreviation { color: var(--abrev); background: var(--abrev-fond); }

.extrait { font-family: Georgia, "Times New Roman", serif; }
.message { margin: 6px 0 10px; font-size: .9375rem; }
.sans-suggestion { margin: 0 0 6px; font-size: .875rem; color: var(--discret); }

.choix-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.choix {
    background: #fff; color: var(--encre); border: 1px solid var(--encre);
    padding: 4px 12px;
    font-family: Georgia, "Times New Roman", serif;
}
.choix:hover { background: var(--encre); color: #fff; }
.ignorer {
    background: none; border: 0; padding: 4px 6px;
    color: var(--discret); text-decoration: underline; font-size: .875rem;
}

.mention {
    max-width: 1280px;
    margin: 0 auto 32px;
    padding: 0 24px;
    font-size: .8125rem;
    color: var(--discret);
}

/* Page de connexion */
.page-connexion {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.carte {
    width: 100%;
    max-width: 440px;
    padding: 36px 32px;
    background: var(--papier);
    border: 1px solid var(--ligne);
    border-top: 4px solid var(--encre);
    border-radius: 6px;
}
.carte h1 { margin: 0 0 8px; font-size: 1.375rem; color: var(--encre); }
.carte p { margin: 0 0 24px; color: var(--discret); }
.bouton-ms {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 4px;
    background: var(--encre);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.bouton-ms:hover { background: var(--encre-claire); }
.alerte {
    margin-bottom: 18px;
    padding: 10px 12px;
    border-radius: 4px;
    background: var(--ortho-fond);
    color: var(--ortho);
    font-size: .9375rem;
}

@media (max-width: 900px) {
    .espace { grid-template-columns: 1fr; padding: 0 12px; margin: 12px auto; }
    .barre { padding: 12px 16px; }
    textarea { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}