:root { --bg:#f6f5f2; --panel:#fff; --txt:#222; --mut:#777; --bord:#ddd; --acc:#2a6fdb; --danger:#c0392b; --zone:#d0563b; }
@media (prefers-color-scheme: dark) { :root { --bg:#16171a; --panel:#1f2125; --txt:#e8e8e8; --mut:#999; --bord:#33363c; --acc:#5b9bff; --danger:#e8705f; } }
* { box-sizing:border-box; }
body { margin:0; font:14px system-ui, sans-serif; background:var(--bg); color:var(--txt); height:100vh;
       display:grid; grid-template-columns:340px 1fr; }
main { display:grid; grid-template-rows:1fr 6px 1fr; min-height:0; min-width:0; overflow:hidden; }
[hidden] { display:none !important; }

/* panneau : en-tête et recherche fixes, onglets au milieu, génération et résultat en bas */
aside { background:var(--panel); border-right:1px solid var(--bord); display:flex; flex-direction:column; min-height:0; }
aside > * { padding:0 14px; }
.entete { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:12px; }
h1 { font-size:17px; margin:0; }
h2 { font-size:15px; margin:0; }
.recherche { position:relative; margin-top:8px; }
.pages { flex:1; overflow:auto; padding-top:8px; padding-bottom:8px; }
.action { border-top:1px solid var(--bord); padding-top:10px; padding-bottom:12px; }

/* textes et champs */
.mut { color:var(--mut); }
input, select, button { font:inherit; color:inherit; }
input[type=text], input[type=number], select { background:var(--bg); border:1px solid var(--bord); border-radius:6px; padding:5px 7px; }
input[type=number] { width:70px; } input.court { width:52px; }
input[type=color] { width:30px; height:24px; border:none; background:none; padding:0; }
button { background:var(--bg); border:1px solid var(--bord); border-radius:6px; padding:6px 10px; cursor:pointer; }
button.prim { background:var(--acc); color:#fff; border-color:var(--acc); width:100%; padding:9px; font-weight:600; }
button.danger { color:var(--danger); }
button.danger.confirmer { background:var(--danger); border-color:var(--danger); color:#fff; }
button:disabled { opacity:.5; cursor:default; }
.ligne { display:flex; align-items:center; gap:8px; margin:5px 0; } .ligne label { flex:1; } .ligne select { min-width:0; }
[title] > label:not(.inter) { text-decoration:underline dotted var(--mut); text-underline-offset:3px; cursor:help; }

/* interrupteurs (à la place des cases à cocher) */
.inter { display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.inter input { appearance:none; flex:none; width:32px; height:18px; margin:0; border-radius:9px; background:var(--bord);
               position:relative; cursor:pointer; transition:background .15s; }
.inter input::before { content:""; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%;
                       background:#fff; box-shadow:0 1px 2px #0004; transition:transform .15s; }
.inter input:checked { background:var(--acc); }
.inter input:checked::before { transform:translateX(14px); }
.inter input:disabled { opacity:.45; cursor:default; }
.inter input:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.pastille-nb { display:inline-block; min-width:20px; padding:0 5px; border-radius:10px; background:var(--acc); color:#fff;
               font-size:12px; text-align:center; }
.pastille-nb:empty { display:none; }

/* onglets */
.onglets { display:flex; gap:2px; margin-top:10px; border-bottom:1px solid var(--bord); }
.onglets button { flex:1; border:none; border-bottom:2px solid transparent; border-radius:0; background:none; padding:8px 4px; color:var(--mut); }
.onglets button.actif { color:var(--txt); border-bottom-color:var(--acc); font-weight:600; }

/* zone simple ou multiple */
.modes { display:flex; border:1px solid var(--bord); border-radius:6px; overflow:hidden; margin-bottom:8px; }
.modes label { flex:1; } .modes input { display:none; }
.modes span { display:block; text-align:center; padding:6px 4px; cursor:pointer; }
.modes input:checked + span { background:var(--acc); color:#fff; font-weight:600; }
#zoneInfo { margin-top:6px; }

/* filaments et éléments */
#filaments { display:flex; gap:6px; margin-bottom:6px; }
.element { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:27px; }
.element .inter { flex:1; }
select.fil { width:48px; padding:2px 4px; text-align:center; font-weight:600; border-color:#0003; }
.sous { display:flex; align-items:center; gap:6px; margin:1px 0 5px 41px; }
.sous.en-ligne { margin:0; }
.sous select { min-width:0; } .sous input.court, .sous select { padding:3px 5px; }
#arbresTaille { display:flex; gap:6px; }
.nom-gpx { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filament { display:flex; align-items:center; justify-content:center; gap:5px; flex:1; padding:3px 0;
            border:1px solid var(--bord); border-radius:6px; font-size:12px; color:var(--mut); }

/* recherche : résultats par-dessus le panneau */
#res { list-style:none; margin:0; padding:0; position:absolute; left:14px; right:14px; top:100%; z-index:1000;
       max-height:260px; overflow:auto; background:var(--panel); border-radius:6px; box-shadow:0 4px 16px #0003; }
#res li { padding:6px 8px; cursor:pointer; } #res li:hover { background:var(--bg); }
#res small { color:var(--mut); }

/* carte, séparateur, aperçu 3D */
#carte, #vue { min-height:0; position:relative; }
#separateur { background:var(--bord); cursor:row-resize; position:relative; }
#separateur::after { content:""; position:absolute; left:50%; top:1px; width:40px; height:4px; margin-left:-20px;
                     border-radius:2px; background:var(--mut); }
#separateur:hover, body.redimension #separateur { background:var(--acc); }
body.redimension { cursor:row-resize; user-select:none; }
body.redimension #carte, body.redimension #vue { pointer-events:none; }
.tracer #carte { cursor:crosshair; }
path.zone { cursor:move; }
.poignee { background:#fff; border:2px solid var(--zone); border-radius:2px; cursor:nwse-resize; }
.etiquette-dalle { color:var(--zone); font-weight:700; font-size:13px; text-align:center; line-height:20px;
                   text-shadow:0 0 3px #fff, 0 0 3px #fff; pointer-events:none; }
#vue { background:#cfd6dd; }
@media (prefers-color-scheme: dark) { #vue { background:#2b2f36; } }
#vue canvas { display:block; position:absolute; inset:0; }
#echelle { position:absolute; right:12px; bottom:12px; display:flex; flex-direction:column; align-items:flex-end; gap:1px;
           padding:6px 10px; border-radius:6px; background:#000a; color:#fff; font-size:12px; pointer-events:none; }
#echelle b { font-size:15px; }

/* résultat de la carte affichée */
#statut { margin-top:8px; white-space:pre-line; }
#avance { display:block; width:100%; height:6px; margin-top:8px; accent-color:var(--acc); }
#statut:empty { display:none; }
#noteVue { margin-top:4px; font-size:12px; color:var(--acc); white-space:pre-line; }
#noteVue:empty { display:none; }
#resultat .ligne { gap:5px; }
#resultat .ligne > * { flex:1 1 auto; text-align:center; white-space:nowrap; padding:6px 6px; font-size:13px; }
#resultat a { color:var(--acc); text-decoration:none; }
#etat3mf { word-break:break-all; }
#etat3mf:empty { display:none; }

/* fenêtre des projets */
#projets { width:min(980px, 92vw); max-height:86vh; padding:0 0 16px; border:1px solid var(--bord); border-radius:10px;
           background:var(--panel); color:var(--txt); box-shadow:0 10px 40px #0005; }
#projets::backdrop { background:#0006; }
#projets .entete { position:sticky; top:0; background:var(--panel); padding:14px 18px 10px; z-index:1; }
#historique { list-style:none; margin:0; padding:4px 18px; display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px; }
#historique li { border:1px solid var(--bord); border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:6px; }
#historique li.actif { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
#historique li.vide { grid-column:1 / -1; border:none; color:var(--mut); }
#historique .vignette { width:100%; aspect-ratio:1; border-radius:5px; object-fit:cover; background:var(--bg); cursor:pointer; }
#historique .titre { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#historique .titre input { width:100%; font-weight:600; padding:2px 5px; }
#historique .infos { font-size:13px; }
#historique .actions { display:flex; gap:6px; } #historique .actions button { flex:1; padding:4px 6px; font-size:13px; }

/* titre : ouvre la fenêtre d'aide */
#titre { background:none; border:none; padding:0; font:inherit; display:inline-flex; align-items:center; gap:6px; }
.aide-rond { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%;
             border:1px solid var(--bord); color:var(--mut); font-size:11px; font-weight:600; }
#titre:hover .aide-rond { border-color:var(--acc); color:var(--acc); }

/* fenêtre « Comment ça marche » */
#fenetreAide { width:min(680px, 92vw); max-height:88vh; padding:0; border:1px solid var(--bord); border-radius:10px;
               background:var(--panel); color:var(--txt); box-shadow:0 10px 40px #0005; }
#fenetreAide::backdrop { background:#0006; }
#fenetreAide .entete { position:sticky; top:0; background:var(--panel); padding:14px 18px 10px; z-index:1; }
.aide { padding:0 18px 18px; line-height:1.45; }
.aide .chapeau { margin:4px 0 14px; }
.aide h3 { font-size:14px; margin:18px 0 6px; }
.aide p { margin:3px 0 0; } .aide > p.mut { margin-top:14px; }
.etapes { list-style:none; counter-reset:etape; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.etapes li { counter-increment:etape; position:relative; padding-left:34px; }
.etapes li::before { content:counter(etape); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%;
                     background:var(--acc); color:#fff; font-weight:600; display:flex; align-items:center; justify-content:center; }
.etapes p, .astuces { color:var(--mut); } .etapes p i, .astuces i, .etapes p b, .astuces b { color:var(--txt); }
.astuces { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
#commencer { margin-top:14px; }

/* administrateur dans l'espace d'un utilisateur */
#bandeauEspace { margin:10px 14px 0; padding:7px 10px; border-radius:6px; background:color-mix(in srgb, var(--zone) 18%, transparent);
                 border:1px solid var(--zone); display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
#bandeauEspace button { margin-left:auto; padding:3px 8px; font-size:12px; }
#espaceProjets { margin-left:auto; max-width:50%; }

/* compte et administration des utilisateurs */
.bouton-compte { position:relative; padding:2px; border-radius:50%; line-height:0; }
.bouton-compte .pastille-nb { position:absolute; right:-6px; top:-6px; line-height:18px; }
.avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; object-fit:cover;
          background:var(--acc); color:#fff; font-weight:600; flex:none; }
#fenetreCompte { width:min(720px, 92vw); max-height:86vh; padding:0 0 16px; border:1px solid var(--bord); border-radius:10px;
                 background:var(--panel); color:var(--txt); box-shadow:0 10px 40px #0005; }
#fenetreCompte::backdrop { background:#0006; }
#fenetreCompte .entete { padding:14px 18px 10px; }
#moi { display:flex; align-items:center; gap:12px; padding:6px 18px 12px; border-bottom:1px solid var(--bord); }
#moi > div { flex:1; }
a.bouton { border:1px solid var(--bord); border-radius:6px; padding:6px 10px; color:inherit; text-decoration:none; }
#admin { padding:12px 18px 0; } #admin p { margin:4px 0 10px; }
#utilisateurs { width:100%; border-collapse:collapse; }
#utilisateurs td:first-child { width:34px; }
#utilisateurs td { padding:6px 4px; vertical-align:middle; border-bottom:1px solid var(--bord); }
#utilisateurs td.actions { text-align:right; white-space:nowrap; }
#utilisateurs td.actions > * { margin-left:4px; } #utilisateurs .inter { display:inline-flex; font-size:13px; }
#utilisateurs tr.en_attente { background:color-mix(in srgb, var(--acc) 10%, transparent); }
.statut { font-size:12px; padding:2px 7px; border-radius:10px; background:var(--bg); white-space:nowrap; }
.statut.autorise { color:#2e9d4f; } .statut.refuse { color:var(--danger); } .statut.en_attente { color:var(--acc); font-weight:600; }

/* page de connexion */
body.connexion { display:flex; align-items:center; justify-content:center; padding:16px; }
.carte-connexion { width:min(400px, 100%); background:var(--panel); border:1px solid var(--bord); border-radius:12px;
                   padding:28px; display:flex; flex-direction:column; gap:12px; text-align:center; }
.carte-connexion h1 { font-size:22px; } .carte-connexion p { margin:0; }
.bouton-google { display:flex; align-items:center; justify-content:center; gap:10px; padding:10px; border-radius:6px;
                 border:1px solid var(--bord); background:var(--bg); color:inherit; text-decoration:none; font-weight:600; }
.bouton-google:hover { border-color:var(--acc); }
.message { background:var(--bg); border-radius:6px; padding:10px; line-height:1.4; }
.message.refus { color:var(--danger); }
#autre { color:var(--acc); font-size:13px; }

@media (max-width:800px) {
  body { grid-template-columns:1fr; height:auto; }
  aside { max-height:none; }
  main { grid-template-rows:55vh 6px 55vh !important; }
}