:root{--page:#ebe9e2;--cadre:#ffffff;--doux:#f7f6f2;--encre:#1b1b1a;--encre-douce:#5d5d59;--trait:#e2e0d9;--accent:#0072b2;--vert:#1b7f5a;--jauge:#bcdcf2;--ortho:#d55e00;--ortho-f:rgba(213,94,0,.15);--gram:#0072b2;--gram-f:rgba(0,114,178,.13);--typo:#009e73;--typo-f:rgba(0,158,115,.15);--style:#b8578f;--style-f:rgba(184,87,143,.14)}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--encre);font:18px/1.62 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.cadre{max-width:1000px;margin:8px auto 46px;background:var(--cadre);border:1px solid var(--trait);border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.06)}
.entete,main,.pied{padding:0 42px}
.entete{padding-top:22px}
.marque{margin:0 0 10px;text-align:center}
.logo{display:block;margin:0 auto;width:min(420px,86vw);height:auto}
.logo-lien{display:inline-block;line-height:0}
h1{margin:0 0 10px;font-size:29px;line-height:1.28;text-align:center}
.chapeau{margin:0 0 18px;font-size:20px;color:var(--encre-douce);text-align:center}
.outil{background:var(--doux);border:1px solid var(--trait);border-radius:14px;padding:18px;margin-bottom:44px}
.onglets{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.onglet{border:1px solid var(--trait);background:var(--cadre);color:var(--encre-douce);padding:9px 16px;border-radius:9px;font:inherit;font-size:15px;cursor:pointer}
.onglet.actif{background:var(--encre);border-color:var(--encre);color:#fff}
a.onglet{display:inline-block;text-decoration:none;color:var(--accent);border-color:var(--accent);background:var(--cadre)}
a.onglet:hover{background:var(--doux)}
.panneau{display:none}
.panneau.actif{display:block}
label{display:block;margin-bottom:8px;font-size:15px;color:var(--encre-douce)}
label.case{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:15px;color:var(--encre);cursor:pointer}
label.case input{margin-top:5px;flex:0 0 auto}
textarea,input[type=url],input[type=search]{width:100%;padding:13px;border:1px solid var(--trait);border-radius:10px;font:inherit;background:var(--cadre);color:var(--encre)}
textarea{resize:vertical;min-height:360px}
textarea:focus,input:focus{outline:2px solid var(--accent);outline-offset:1px}
.compteur{margin:8px 0 0;font-size:14px;color:var(--encre-douce)}
.compteur.trop{color:var(--ortho);font-weight:600}
.aide{margin:10px 0 0;font-size:14px;color:var(--encre-douce)}
button[type=submit]{margin:0 0 0 auto;background:var(--accent);color:#fff;border:0;padding:10px 28px;border-radius:9px;font:inherit;font-weight:600;cursor:pointer}
button[type=submit]:disabled{opacity:.55;cursor:default}
.attente{margin-top:22px}
.barre{height:8px;background:var(--trait);border-radius:99px;overflow:hidden}
.barre-remplie{height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .25s linear}
.etape{margin:10px 0 0;font-size:15px}
.message{margin-top:20px;border:1px solid var(--trait);border-left:4px solid var(--encre-douce);border-radius:10px;padding:12px 16px;background:var(--cadre);font-size:16px}
.message.erreur{border-left-color:var(--ortho)}
.message.note{border-left-color:var(--accent)}
.resultat{margin-top:24px}
.bilan-total{margin:0 0 10px;font-size:20px;font-weight:700}
.puces{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.puce{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--trait);border-radius:99px;background:var(--cadre);color:var(--encre);font:inherit;font-size:15px;cursor:pointer}
.puce.fixe{cursor:default}
.puce:disabled{opacity:.45;cursor:default}
.puce.eteinte{opacity:.55;text-decoration:line-through}
.pastille{width:11px;height:11px;border-radius:50%;background:var(--c)}
.orthographe{--c:var(--ortho);--f:var(--ortho-f)}
.grammaire{--c:var(--gram);--f:var(--gram-f)}
.typographie{--c:var(--typo);--f:var(--typo-f)}
.style{--c:var(--style);--f:var(--style-f)}
.barre-outils{position:sticky;top:0;z-index:4;display:flex;flex-wrap:wrap;gap:8px;padding:10px 0;background:var(--doux)}
.outil-bouton{padding:8px 14px;border:1px solid var(--trait);border-radius:8px;background:var(--cadre);color:var(--encre);font:inherit;font-size:15px;cursor:pointer}
.outil-bouton:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.outil-bouton:disabled{opacity:.5;cursor:default}
.outil-bouton.principal{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.outil-bouton.principal:hover:not(:disabled){color:#fff;filter:brightness(1.08)}
.zone-texte{position:relative;margin-top:12px}
.texte-corrige{white-space:pre-wrap;overflow-wrap:break-word;font-size:17px;line-height:1.85;background:var(--cadre);border:1px solid var(--trait);border-radius:10px;padding:18px 20px;min-height:120px}
mark.e{background:var(--f);color:inherit;border-bottom:2px solid var(--c);border-radius:2px;padding:0 1px;cursor:pointer}
mark.e:hover{background:var(--c);color:#fff}
mark.e.active{background:var(--c);color:#fff;outline:2px solid var(--c);outline-offset:1px}
mark.e.espace{padding:0 3px}
mark.e.cache{background:none;border-bottom:0;padding:0;cursor:text;pointer-events:none}
.bulle{position:absolute;z-index:6;width:min(380px,calc(100% - 16px));background:var(--cadre);border:1px solid var(--trait);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:14px 16px}
.bulle-type{margin:0 0 4px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c)}
.bulle-message{margin:0 0 12px;font-size:16px;line-height:1.45}
.bulle-vide{margin:0 0 12px;font-size:14px;color:var(--encre-douce)}
.bulle-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.suggestion{padding:6px 12px;border:0;border-radius:7px;background:var(--accent);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;white-space:pre}
.suggestion:hover{filter:brightness(1.1)}
.bulle-actions{display:flex;gap:6px;align-items:center}
.bulle-actions button{padding:5px 11px;border:1px solid var(--trait);border-radius:7px;background:var(--cadre);color:var(--encre-douce);font:inherit;font-size:14px;cursor:pointer}
.bulle-actions button:hover{color:var(--accent);border-color:var(--accent)}
.bulle-actions .fermer{margin-left:auto;font-size:18px;line-height:1;padding:4px 10px}
.details{margin:12px 0 0;font-size:14px;color:var(--encre-douce);overflow-wrap:anywhere}
.petit{font-size:15px;color:var(--encre-douce)}
.franchise{margin-bottom:50px}
.franchise h2{font-size:21px;margin:30px 0 14px}
.franchise h2:first-child{margin-top:0}
.franchise h3{font-size:18px;margin:22px 0 8px}
.franchise p{margin:0 0 12px}
.franchise p.methode{margin:26px 0 0;text-align:center}
a{color:var(--accent)}
code{font-size:.92em;background:var(--doux);border:1px solid var(--trait);border-radius:5px;padding:0 5px}
.pied{border-top:1px solid var(--trait);padding-top:24px;padding-bottom:34px;font-size:15px;color:var(--encre-douce);text-align:center}
.pied p{margin:0 0 10px}
.pied p:last-child{margin-bottom:0}
.legal a{margin:0;padding:0 14px;display:inline-block}
.legal a + a{border-left:1px solid var(--trait)}
.liste{margin-top:24px}
.resume{margin:0 0 12px;font-size:15px;color:var(--encre-douce)}
.options-site{margin:0 0 12px}
.liste-outils{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.liste-outils .filtre{flex:1 1 260px;width:auto;padding:9px 12px;font-size:16px}
.collant{position:sticky;bottom:0;z-index:4;background:var(--doux);padding:10px 0;margin:0;border-top:1px solid var(--trait)}
.compteur-selection{font-size:15px;color:var(--encre-douce)}
.encore{margin-top:16px;text-align:center}
.continuer{background:var(--cadre);color:var(--accent);border:1px solid var(--accent);padding:10px 22px;border-radius:9px;font:inherit;font-weight:600;cursor:pointer}
.continuer:hover{background:var(--doux)}
ol.pages{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
ol.pages>li{display:grid;grid-template-columns:22px minmax(0,1fr) 160px 84px;align-items:center;gap:6px 12px;padding:8px 2px;border-bottom:1px solid var(--trait)}
ol.pages>li[hidden]{display:none}
ol.pages>li.encours{background:var(--cadre)}
ol.pages input.choix{width:18px;height:18px;margin:0;cursor:pointer}
.adresse{font-size:16px;overflow-wrap:anywhere;min-width:0;color:var(--encre);text-decoration:none}
.adresse:hover{color:var(--accent);text-decoration:underline}
.statut{font-size:15px;color:var(--encre-douce);min-width:0}
.statut .ok{color:var(--vert);font-weight:600}
.statut .fautes{color:var(--ortho)}
.statut .echec{font-style:italic;font-size:14px}
.attente-ligne::after{content:"…";animation:clignote 1s steps(2) infinite}
@keyframes clignote{50%{opacity:0}}
button.voir{padding:6px 10px;border:1px solid var(--trait);border-radius:8px;background:var(--cadre);color:var(--accent);font:inherit;font-size:14px;cursor:pointer}
button.voir[hidden]{display:none}
.detail{grid-column:1/-1;background:var(--cadre);border:1px solid var(--trait);border-radius:10px;padding:12px 16px;margin:4px 0 6px}
.detail[hidden]{display:none}
.fautes-liste{margin:0;padding:0 0 0 22px;font-size:15px}
.fautes-liste li{display:block;padding:8px 0;border-bottom:1px solid var(--trait)}
.fautes-liste li:last-child{border-bottom:0}
.etiquette{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--c);margin-right:4px}
.contexte{display:block;margin:2px 0;font-size:16px}
.contexte mark.e{cursor:default}
.explication{display:block;color:var(--encre-douce)}
.propose{display:block;color:var(--encre-douce)}
.propose b{color:var(--encre)}
.rapport{margin-top:22px;border:1px solid var(--trait);border-left:4px solid var(--vert);border-radius:10px;padding:14px 18px;background:var(--cadre)}
.rapport h2{margin:0 0 8px;font-size:19px}
.rapport p{margin:0 0 10px}
.rapport p:last-child{margin-bottom:0}
@media (max-width:640px){.onglets{gap:6px}button[type=submit]{margin:6px 0 0;width:100%;padding:13px 0}h1{font-size:24px}.chapeau{font-size:17px}.outil{padding:14px}.cadre{margin:0;border-radius:0;border-left:0;border-right:0;box-shadow:none}.entete,main,.pied{padding-left:16px;padding-right:16px}.texte-corrige{padding:14px;font-size:16px}ol.pages>li{grid-template-columns:22px minmax(0,1fr) 84px}.statut{grid-column:2/3}ol.pages>li>.voir{grid-column:3;grid-row:1}.barre-outils{position:static}.barre-outils .outil-bouton{flex:1 1 auto;font-size:14px;padding:7px 10px}}
@media (prefers-color-scheme:dark){:root{--page:#100f0e;--cadre:#1b1b19;--doux:#232321;--encre:#f2f0eb;--encre-douce:#a7a49d;--trait:#33322e;--accent:#56b3f0;--vert:#5fc79b;--jauge:#2b4c66;--ortho:#f08a4b;--ortho-f:rgba(240,138,75,.2);--gram:#56b3f0;--gram-f:rgba(86,179,240,.18);--typo:#4fd1a5;--typo-f:rgba(79,209,165,.17);--style:#e08cc0;--style-f:rgba(224,140,192,.18)}.cadre{box-shadow:none}.logo-lien{background:#fbfbf9;padding:10px 16px;border-radius:14px}.onglet.actif{color:#111}mark.e:hover,mark.e.active{color:#111}.outil-bouton.principal,.suggestion,button[type=submit]{color:#0b1d2a}}
