:root { --fond:#f4f5f7; --carte:#fff; --texte:#1f2937; --discret:#6b7280; --bord:#e5e7eb; --accent:#f59e0b; --accent-texte:#92400e; --champ:#fff;
  --plan:#fbfbfc; --grille:#eceff3; --plaque:#f8fafc; --plaque-bord:#cbd5e1; color-scheme:light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fond:#0f1115; --carte:#181b21; --texte:#e5e7eb; --discret:#9ca3af; --bord:#2a2f38; --champ:#11141a;
  --plan:#14171d; --grille:#1f242c; --plaque:#e2e8f0; --plaque-bord:#94a3b8; --accent-texte:#fcd34d; color-scheme:dark; } }
:root[data-theme="dark"] { --fond:#0f1115; --carte:#181b21; --texte:#e5e7eb; --discret:#9ca3af; --bord:#2a2f38; --champ:#11141a;
  --plan:#14171d; --grille:#1f242c; --plaque:#e2e8f0; --plaque-bord:#94a3b8; --accent-texte:#fcd34d; 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; }
.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; }
.entete h1 { margin:0; font-size:18px; display:flex; gap:6px; align-items:center; } .entete h1 a { text-decoration:none; }
.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:14px; }
.carte { background:var(--carte); border:1px solid var(--bord); border-radius:10px; padding:12px; margin-bottom:12px; }
.carte h3 { margin:0 0 8px; font-size:15px; } .carte h3 small { font-weight:400; }
.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; text-decoration:none; display:inline-block; }
.bouton:hover { border-color:var(--accent); } .bouton.petit { padding:4px 9px; font-size:13px; } .bouton.discret { background:none; }
.bouton.danger { color:#dc2626; border-color:#dc2626; background:none; } .bouton:disabled { opacity:.4; cursor:default; }
input, select { font:inherit; color:var(--texte); background:var(--champ); border:1px solid var(--bord); border-radius:6px; padding:6px 8px; min-width:0; }
label { display:block; margin:8px 0; font-size:14px; } label > input, label > select { display:block; width:100%; margin-top:3px; }
.deux { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ligne { display:flex; gap:8px; } .ligne input { flex:1; }
.ligne-boutons { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.liste { list-style:none; margin:0 0 8px; padding:0; }
.element { display:block; width:100%; text-align:left; border:1px solid transparent; background:none; color:var(--texte); border-radius:7px; padding:6px 8px; cursor:pointer; font:inherit; }
.element small { display:block; color:var(--discret); font-size:12px; } .element.actif { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
.famille { margin-bottom:8px; } .famille > span { display:block; font-size:12px; color:var(--discret); text-transform:uppercase; letter-spacing:.03em; margin-bottom:3px; }
.famille .bouton { margin:0 4px 4px 0; }
.materiel li { display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid var(--bord); font-size:14px; }
.bandeau { background:#fef3c7; color:#78350f; border:1px solid #f59e0b; border-radius:8px; padding:8px 10px; margin-bottom:10px; }
.espace-travail { display:grid; grid-template-columns:250px minmax(0,1fr) 300px; gap:12px; align-items:start; }
.centre { padding:8px; margin:0; } .barre { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:6px; } .sep { width:8px; }
.cadre-plan { position:relative; }
.plan { display:block; width:100%; height:calc(100vh - 150px); min-height:420px; background:var(--plan); border-radius:8px; touch-action:none; user-select:none; cursor:grab; }
.grille { fill:none; stroke:var(--grille); stroke-width:1; }
.vide-plan { position:absolute; inset:40% 10% auto; text-align:center; color:var(--discret); pointer-events:none; }
.pastille-fil { display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:6px; vertical-align:-2px; }
@media (max-width: 1100px) { .espace-travail { grid-template-columns:1fr; } .plan { height:65vh; } }

/* ---- Dessin des composants (couleurs fixes : ce sont des objets réels) */
.composant { cursor:move; }
.halo { fill:none; stroke:var(--accent); stroke-width:3; stroke-dasharray:6 4; }
.module { fill:#f8fafc; stroke:#94a3b8; stroke-width:2; } .module-face { fill:#e2e8f0; stroke:#94a3b8; } .levier { fill:#1f2937; }
.boite { fill:#cbd5e1; fill-opacity:.35; stroke:#94a3b8; stroke-width:2; } .boite-int { fill:none; stroke:#94a3b8; stroke-dasharray:4 4; }
.composant.fond { cursor:move; }
.wago { fill:#e5e7eb; fill-opacity:.75; stroke:#9ca3af; stroke-width:1.5; } .wago-levier { fill:#f97316; stroke:#c2410c; } .wago-trou { fill:#6b7280; }
.shelly { fill:#1f2937; stroke:#0f172a; stroke-width:2; } .bornier { fill:#374151; } .vis { fill:#cbd5e1; stroke:#94a3b8; } .fente { stroke:#64748b; stroke-width:1.5; }
.plaque { fill:var(--plaque); stroke:var(--plaque-bord); stroke-width:2; } .plaque-int { fill:none; stroke:var(--plaque-bord); stroke-opacity:.6; }
.touche { fill:#fff; stroke:#94a3b8; stroke-width:1.5; } .voyant { fill:#f59e0b; }
.puits { fill:#e2e8f0; stroke:#94a3b8; stroke-width:1.5; } .trou { fill:#334155; } .broche { fill:#94a3b8; } .contact { fill:#eab308; }
.dcl { fill:#fef9c3; stroke:#ca8a04; stroke-width:2; } .croix { stroke:#ca8a04; stroke-width:2.5; }
.tube { fill:#e5e7eb; stroke:#9ca3af; stroke-width:2; } .moteur { fill:#475569; stroke:#334155; }
.composant text { font-family:system-ui, sans-serif; pointer-events:none; }
.t-fort { font-size:13px; font-weight:700; fill:#1f2937; } .t { font-size:12px; fill:#334155; } .t-petit { font-size:11px; fill:#64748b; }
.t-mini { font-size:10px; fill:#475569; font-weight:600; } .t-mini.clair { fill:#e2e8f0; } .t-discret { font-size:12px; fill:#475569; }
.t-shelly { font-size:13px; font-weight:700; fill:#f8fafc; letter-spacing:.02em; } .t-borne { font-size:10px; font-weight:700; fill:#cbd5e1; }
.t-nom { font-size:12px; font-weight:700; fill:var(--texte); }
.t-borne-ext { font-size:10px; font-weight:700; fill:var(--discret); }
/* ---- Bornes : la zone sert à tirer un fil */
.borne { cursor:crosshair; } .borne-zone { fill:transparent; }
.borne-point { stroke:#fff; stroke-width:1.5; fill:#9ca3af; }
.role-phase { fill:#8b4513; } .role-neutre { fill:#2563eb; } .role-terre { fill:#16a34a; } .role-retour { fill:#ea580c; } .role-commande { fill:#7c3aed; } .role-reseau { fill:#64748b; }
.borne:hover .borne-zone, .borne.visee .borne-zone { fill:rgba(245,158,11,.35); }
.borne.occupee .borne-point { stroke:#111827; stroke-width:2; }
/* ---- Fils */
.fil { cursor:pointer; }
.fil-gaine { fill:none; stroke:#0f172a; stroke-opacity:.35; stroke-width:6.5; stroke-linecap:round; }
.fil-ame { fill:none; stroke-width:4; stroke-linecap:round; }
.fil-rayure { fill:none; stroke-width:4; stroke-dasharray:8 8; stroke-linecap:butt; }
.fil-cible { fill:none; stroke:transparent; stroke-width:16; }
.fil-halo { fill:none; stroke:var(--accent); stroke-opacity:.45; stroke-width:14; stroke-linecap:round; }
.fil-temp { fill:none; stroke-width:4; stroke-dasharray:6 5; pointer-events:none; }
@media print { .entete, .gauche, .droite, .barre, #vide-plan { display:none !important; } .espace-travail { display:block; } .plan { height:95vh; background:#fff; }
  .grille { stroke:none; } .carte { border:0; } }
.bouton.principal { background:var(--accent); border-color:var(--accent); color:#111827; font-weight:600; }