:root { --fond: #f7f7f5; --carte: #fff; --texte: #1d1d1b; --doux: #6b6b66; --bord: #d9d9d4; --accent: #0b6bcb;
        --ok: #1a9641; --corr: #0b6bcb; --dout: #e67e22; --ret: #8e44ad; --err: #c0392b; }
* { box-sizing: border-box; }
html, body { margin: 0; font: 15px/1.5 system-ui, sans-serif; color: var(--texte); background: var(--fond); }
a { color: var(--accent); }
.barre { display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: #20262e; color: #fff; flex-wrap: wrap; }
.barre a, .barre .lien { color: #dfe7ef; text-decoration: none; }
.barre a:hover, .barre .lien:hover { color: #fff; text-decoration: underline; }
.barre .marque { font-weight: 600; color: #fff; }
.barre .espace { flex: 1; }
.barre .qui { font-weight: 600; background: #37414d; padding: 1px 8px; border-radius: 10px; }
.enligne { display: inline; margin: 0; }
button.lien { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
main.etroit { max-width: 560px; margin: 28px auto; padding: 0 16px; }
main.large { max-width: 1000px; margin: 28px auto; padding: 0 16px; }
h1 { font-size: 24px; margin: 0 0 12px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); margin: 18px 0 6px; }
form label { display: block; margin: 10px 0; color: var(--doux); }
form label input, form label textarea { display: block; width: 100%; margin-top: 3px; color: var(--texte); }
input, select, textarea { font: inherit; padding: 5px 7px; border: 1px solid var(--bord); border-radius: 5px; background: #fff; }
textarea { width: 100%; resize: vertical; }
.bouton, button { font: inherit; padding: 6px 12px; border: 1px solid var(--bord); border-radius: 6px; background: #fff; cursor: pointer; color: var(--texte); text-decoration: none; display: inline-block; }
.bouton { background: var(--accent); color: #fff; border-color: var(--accent); }
.bouton.ok, button.ok { background: var(--ok); color: #fff; border-color: var(--ok); }
button.corr { background: var(--corr); color: #fff; border-color: var(--corr); }
button.dout { background: var(--dout); color: #fff; border-color: var(--dout); }
button.ret { background: var(--ret); color: #fff; border-color: var(--ret); }
button:disabled { opacity: .45; cursor: default; }
.erreur { color: var(--err); background: #fbeceb; padding: 8px 12px; border-radius: 6px; }
.erreur p { margin: 2px 0; }
.flash { background: #e3f3e7; padding: 8px 16px; }
.petit { font-size: 13px; color: var(--doux); }
.cache { position: absolute; left: -9999px; }
kbd { font: 11px ui-monospace, monospace; border: 1px solid var(--bord); border-bottom-width: 2px; border-radius: 3px; padding: 0 3px; background: #fff; color: var(--texte); }
.pastille { color: #fff; padding: 1px 8px; border-radius: 4px; font-weight: 600; }
.pastille.ok { background: var(--ok); } .pastille.corr { background: var(--corr); } .pastille.ret { background: var(--ret); } .pastille.dout { background: var(--dout); }
dt { margin-top: 12px; } dd { margin: 4px 0 0 0; }
.compte { background: var(--carte); border: 1px solid var(--bord); border-left: 5px solid var(--bord); border-radius: 6px; padding: 10px 14px; margin: 10px 0; }
.compte.attente { border-left-color: var(--dout); } .compte.actif { border-left-color: var(--ok); } .compte.refuse, .compte.suspendu { border-left-color: var(--err); opacity: .8; }
.compte blockquote { margin: 8px 0; padding: 6px 10px; background: var(--fond); border-radius: 4px; white-space: pre-wrap; }
.etiquette { font-size: 12px; background: var(--fond); border: 1px solid var(--bord); border-radius: 10px; padding: 0 8px; margin-left: 6px; }
.actions { margin-top: 6px; }
.tableau { border-collapse: collapse; width: 100%; background: var(--carte); }
.tableau th, .tableau td { border-bottom: 1px solid var(--bord); padding: 6px 8px; text-align: left; }
/* page de vérification */
body.appli { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.appli-corps { flex: 1; display: flex; min-height: 0; }
#panneau { width: 370px; min-width: 370px; overflow-y: auto; padding: 4px 14px 14px; border-right: 1px solid var(--bord); font-size: 14px; }
#carte { flex: 1; }
#panneau section { border-bottom: 1px solid var(--bord); padding: 8px 0; }
.ligne { display: flex; gap: 6px; align-items: center; margin: 5px 0; flex-wrap: wrap; }
.ligne label { color: var(--doux); }
.ligne input[type=search], .ligne input[type=text] { flex: 1; }
.ligne input[type=range] { flex: 1; }
.boutons button { padding: 5px 9px; }
#nom { font-size: 16px; font-weight: 600; margin: 4px 0 0; overflow-wrap: anywhere; }
#couche { color: var(--doux); }
#etat { padding: 5px 8px; border-radius: 5px; margin: 6px 0; background: #ecece8; font-size: 13px; }
#etat.confirme { background: #e3f3e7; } #etat.corrige { background: #e3eefb; } #etat.douteux { background: #fbeee0; } #etat.retire { background: #f1e6f7; }
table.infos { border-collapse: collapse; width: 100%; }
table.infos td { padding: 1px 0; vertical-align: top; }
table.infos td:first-child { color: var(--doux); width: 46%; }
.mono { font-family: ui-monospace, monospace; font-size: 12.5px; }
#note { height: 46px; }
#barre { height: 6px; background: #e2e2dd; border-radius: 3px; overflow: hidden; display: flex; margin-top: 6px; }
#barre span { display: block; height: 100%; }
#legende { height: 10px; border-radius: 3px; background: linear-gradient(to right, #30123b, #4686fb, #1ae4b6, #a2fc3c, #fabb39, #e4460a, #7a0403); }
.legende-bornes { justify-content: space-between; }
#msg { min-height: 1.2em; font-size: 13px; }
#msg.err { color: var(--err); }
#autres { font-size: 13px; }
#autres div { padding: 3px 6px; margin: 3px 0; background: var(--fond); border-radius: 4px; }
.cible { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid #ff2d2d; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 6px rgba(0,0,0,.6); position: relative; }
.cible::before, .cible::after { content: ""; position: absolute; background: #ff2d2d; box-shadow: 0 0 0 1px #fff; }
.cible::before { left: 50%; top: -10px; bottom: -10px; width: 2px; margin-left: -1px; }
.cible::after { top: 50%; left: -10px; right: -10px; height: 2px; margin-top: -1px; }
@media (max-width: 760px) {
  body.appli { height: auto; overflow: auto; }
  .appli-corps { flex-direction: column; }
  #panneau { width: 100%; min-width: 0; border-right: 0; }
  #carte { height: 70vh; flex: none; }
}
/* page des liens */
.legende-liens { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0; }
.legende-liens i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 4px; }
.legende-liens i.pointille { border-top: 3px dashed #555; height: 0; }
.legende-liens b { display: inline-block; width: 9px; height: 9px; vertical-align: middle; margin-right: 4px; }
#liste-liens { max-height: 38vh; overflow-y: auto; font-size: 13px; }
#liste-liens div { padding: 3px 6px; border-bottom: 1px solid var(--bord); cursor: pointer; }
#liste-liens div:hover { background: #eef3fa; }
#liste-liens .v-FAISABLE { border-left: 4px solid #1a9641; } #liste-liens .v-LIMITE { border-left: 4px solid #f39c12; }
#liste-liens .v-NON { border-left: 4px solid #d7191c; }
#site-nom { font-weight: 600; margin-top: 6px; }
pre#rapport { white-space: pre-wrap; font-size: 11.5px; max-height: 30vh; overflow: auto; background: var(--fond); padding: 6px; }