:root { --fond:#f5f6f8; --carte:#fff; --texte:#1f2937; --discret:#6b7280; --bord:#e5e7eb; --accent:#0ea5e9; --danger:#dc2626;
  --selection:rgba(14,165,233,.35); --sans-piece:#cbd5e1; --champ:#fff; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fond:#0f1115; --carte:#181b21; --texte:#e5e7eb; --discret:#9ca3af; --bord:#2a2f38;
  --selection:rgba(56,189,248,.35); --sans-piece:#475569; --champ:#11141a; color-scheme: dark; } }
:root[data-theme="dark"] { --fond:#0f1115; --carte:#181b21; --texte:#e5e7eb; --discret:#9ca3af; --bord:#2a2f38;
  --selection:rgba(56,189,248,.35); --sans-piece:#475569; --champ:#11141a; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, sans-serif; background:var(--fond); color:var(--texte); }
a { color:inherit; text-decoration:none; }
.entete { display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--carte); border-bottom:1px solid var(--bord); position:sticky; top:0; z-index:5; flex-wrap:wrap; }
.entete h1 { margin:0; font-size:18px; display:flex; align-items:center; gap:6px; }
.entete h1 svg { width:20px; height:20px; fill:var(--accent); }
.nom-projet { font-weight:600; }
.code-projet { font:600 13px ui-monospace, monospace; border:1px solid var(--bord); background:var(--fond); color:var(--texte); border-radius:6px; padding:3px 8px; cursor:pointer; }
.espace { flex:1; }
.etat { color:var(--discret); font-size:13px; }
.bouton-theme { border:0; background:none; color:var(--texte); font-size:18px; cursor:pointer; }
main { padding:16px; max-width:1500px; margin:0 auto; }
.carte { background:var(--carte); border:1px solid var(--bord); border-radius:10px; padding:14px; margin-bottom:14px; }
.carte h2, .carte h3 { margin:0 0 10px; }
.carte h3 { font-size:16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.carte h3 .discret { font-weight:400; font-size:13px; }
.carte h3 [data-supprimer-reseau] { margin-left:auto; }
.etroite { max-width:520px; margin:40px auto; }
.discret { color:var(--discret); }
.bouton { border:1px solid var(--bord); background:var(--fond); color:var(--texte); border-radius:7px; padding:7px 12px; cursor:pointer; font:inherit; }
.bouton:hover { border-color:var(--accent); }
.bouton.petit { padding:4px 9px; font-size:13px; }
.bouton.discret { background:none; }
.bouton.actif { background:var(--accent); color:#fff; border-color:var(--accent); }
.bouton.danger { color:var(--danger); border-color:var(--danger); background:none; }
.bouton.fleche { width:40px; height:36px; font-size:18px; padding:0; }
input, select { font:inherit; color:var(--texte); background:var(--champ); border:1px solid var(--bord); border-radius:6px; padding:6px 8px; min-width:0; }
input[type=color] { padding:0; width:32px; height:32px; border:0; background:none; }
input[type=checkbox] { padding:0; }
.court { width:70px; }
.ligne { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ligne input:not(.court), .ligne select { flex:1; }
label { display:block; margin:8px 0; font-size:14px; }
label > input:not([type=checkbox]), label > select { display:block; width:100%; margin-top:3px; }
.reglages label { margin:0; } .reglages label > input { width:90px; }
.champ { margin:10px 0; font-size:14px; }
.ligne-boutons { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.puces { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.puce { display:inline-flex; align-items:center; gap:4px; margin:0; padding:3px 8px; border-radius:999px; border:2px solid var(--c); font-size:13px; cursor:pointer; }
.liste { list-style:none; margin:0 0 10px; padding:0; }
.liste li { padding:5px 0; }
.liste.lignes li { display:flex; gap:6px; align-items:center; border-bottom:1px solid var(--bord); }
.liste.lignes li input:not([type=color]), .liste.lignes li select { flex:1; }
.alertes li { padding-left:18px; position:relative; font-size:14px; }
.alertes li::before { content:"!"; position:absolute; left:2px; color:#d97706; font-weight:700; }
.alertes li.ok::before { content:"✓"; color:#16a34a; }
.racs { display:flex; gap:3px; }
.rac { font-size:11px; font-weight:600; padding:1px 5px; border-radius:4px; }
.rac.oui { background:#dcfce7; color:#166534; } .rac.non { background:#fee2e2; color:#991b1b; }
.pastille { width:12px; height:12px; border-radius:3px; display:inline-block; }
.barre { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; font-size:14px; }
.groupe { display:inline-flex; gap:4px; align-items:center; flex-wrap:wrap; }
.grille { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:14px; align-items:start; }
.colonne-cote { position:sticky; top:64px; max-height:calc(100vh - 80px); overflow:auto; }
@media (max-width: 900px) { .grille { grid-template-columns:1fr; } .colonne-cote { position:static; max-height:none; } }
.dessin { overflow:auto; }
.dessin svg { display:block; margin:0 auto; height:auto; }
.dessin text { font-size:12px; fill:var(--texte); paint-order:stroke; stroke:var(--carte); stroke-width:3px; }
.dessin text.nom-eq { font-weight:600; }
.dessin text.petit { font-size:11px; fill:#fff; stroke:none; font-weight:700; }
.dessin .cible, .dessin .racine { cursor:pointer; }
.dessin .racine.sel { stroke:var(--accent); stroke-width:4; }
.dessin .equipement { fill:var(--carte); stroke:var(--texte); stroke-width:3; }
.dessin .nourrice { fill:#0f766e; }
.dessin .te { fill:var(--texte); }
.dessin .libre { fill:none; stroke:#d97706; stroke-width:2; stroke-dasharray:3 2; }
.bandeau { background:#fef3c7; color:#78350f; border:1px solid #f59e0b; border-radius:8px; padding:10px; margin-bottom:12px; }
.defile { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { padding:5px 6px; border-bottom:1px solid var(--bord); text-align:left; }
td input { width:100%; } td input.court { width:64px; }
.nb { text-align:right; white-space:nowrap; }
tr.categorie th { background:var(--fond); font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--discret); }
.totaux { text-align:right; }
dialog { background:var(--carte); color:var(--texte); border:1px solid var(--bord); border-radius:10px; max-width:560px; width:calc(100% - 32px); }
@media print { .entete .bouton-theme, .barre, .colonne-cote, #reglages, [data-supprimer-reseau] { display:none !important; } .grille { display:block; }
  body { background:#fff; } .carte { break-inside:avoid; border-color:#ccc; } }
.piquage { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; padding:6px; margin:6px 0; border:1px dashed var(--bord); border-radius:8px; }
.piquage select { flex:1 1 100%; } .piquage label { margin:0; display:inline-flex; gap:4px; align-items:center; font-size:13px; }
.piquage label > input, .piquage label > select { display:inline-block; width:auto; margin:0; }
.piquage label > input.court { width:70px; }
:root { --trait:#9ca3af; }
.dessin .forme { fill:var(--carte); stroke-width:3; cursor:pointer; }
.dessin .racine { fill:#374151; }
.dessin text.petit-txt { font-size:11px; fill:var(--discret); }
.lien { background:none; border:0; padding:2px 0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.lien:hover, .lien.actif { color:var(--accent); text-decoration:underline; }
.detail-ligne { margin-top:8px; font-size:14px; }
.detail-ligne ol { margin:4px 0; padding-left:22px; }
.branche { margin-left:4px; color:var(--discret); font-size:13px; }
.branche .lien { color:var(--texte); }
.bouton:disabled { opacity:.4; cursor:default; } .champ input.court { display:inline-block; width:70px; }
.dessin .renvoi { fill:#0ea5e9; cursor:pointer; }
.dessin .depart-suite { fill:var(--carte); stroke:#0ea5e9; stroke-width:4; cursor:pointer; }
.dessin .depart-suite.sel { stroke-width:7; }
.dessin .lien-svg { fill:#0284c7; cursor:pointer; text-decoration:underline; }
.ligne-evac.suite { border-left:4px solid #0ea5e9; }
.ligne-evac { scroll-margin-top:70px; }
:root { --tube:#9ca3af; }