body {
            font-family: 'Segoe UI', sans-serif;
            background: #ffffff;
            color: #0f172a;
            margin: 0;
            padding: 15px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }

        .header-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f8fafc;
            padding: 6px 12px;
            border-radius: 8px;
            margin-bottom: 8px;
            border: 1px solid #cbd5e1;
            flex-shrink: 0;
            min-height: 45px;
            height: auto;
            flex-wrap: wrap;
            gap: 5px;
        }

        .container {
            display: flex;
            gap: 15px;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        .palette {
            width: 340px;
            min-width: 340px;
            background: #f8fafc;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #cbd5e1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
            flex-shrink: 0;
        }

        .cat-titre {
            font-size: 0.8rem;
            color: #f59e0b;
            border-bottom: 1px solid #475569;
            padding-bottom: 4px;
            font-weight: bold;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .btn-module {
            display: block;
            width: 100%;
            padding: 8px;
            margin-bottom: 5px;
            background: #ffffff;
            color: #0f172a;
            border: 1px solid #cbd5e1;
            border-radius: 4px;
            cursor: pointer;
            text-align: left;
            font-size: 12px;
        }

        .btn-module:hover {
            background: #f1f5f9;
            border-color: #f59e0b;
        }

        .cable-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 5px;
        }

        .btn-cable {
            padding: 6px 2px;
            font-size: 11px;
            font-weight: bold;
            border-radius: 4px;
            border: 2px solid transparent;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .btn-cable.active {
            border-color: #000;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
            transform: scale(1.05);
        }

        .c-p {
            background: #ef4444;
            color: white;
        }

        .c-n {
            background: #3b82f6;
            color: white;
        }

        .c-t {
            background: linear-gradient(135deg, #eab308 50%, #22c55e 50%);
            color: black;
        }

        .c-o {
            background: #f97316;
            color: white;
        }

        .c-v {
            background: #a855f7;
            color: white;
        }

        .c-m {
            background: #78350f;
            color: white;
        }

        .c-ro {
            background: #ff00ff;
            color: white;
        }

        .c-no {
            background: #d1d5db;
            color: #1f2937;
        }

        /* Conteneur flex qui prend tout l'espace disponible */
        #workspace-outer {
            flex: 1;
            overflow: hidden;
            position: relative;
            min-width: 400px;
            border-radius: 8px;
            border: 2px solid #cbd5e1;
        }

        /* Workspace interne à dimensions FIXES (600px référence) — mis à l'échelle par JS */
        .workspace {
            position: absolute;
            top: 0;
            left: 0;
            /* width défini dynamiquement par JS */
            height: 600px;
            background: #ffffff;
            background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
            background-size: 10px 10px;
            border-radius: 6px;
            transform-origin: top left;
            overflow: hidden;
        }

        /* Les section-rows occupent toujours 100% de la hauteur de référence */
        .section-row {
            position: absolute;
            left: 0;
            width: 100%;
            border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
        }

        /* Hauteurs FIXES en pixels basées sur 600px de référence */
        #sec-protection {
            top: 6px;    /* juste après busPhase (6px) */
            height: calc(15.625% - 5px);
        }

        #sec-commandes {
            top: calc(6px + 15.625% - 5px);
            height: 40.625%;
        }

        #sec-recepteurs {
            top: calc(6px + 56.25% - 5px);
            height: 28.125%;
        }

        #sec-coupure {
            top: calc(6px + 84.375% - 5px);
            height: calc(15.625% + 5px - 6px - 26px); /* jusqu'aux barres du bas */
        }

        .section-row:last-child {
            border-bottom: none;
        }

        .section-label {
            position: absolute;
            top: 15px;
            left: 10px;
            background: rgba(255, 255, 255, 0.9);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: bold;
            color: #475569;
            border: 1px solid #cbd5e1;
            pointer-events: none;
            z-index: 1;
            text-transform: uppercase;
        }

        /* Lignes d'alimentation principales (Jeux de barres) */
        .ligne-phase {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: #ef4444;
            z-index: 2;
            box-shadow: 0 2px 5px rgba(239, 68, 68, 0.5);
        }

        .ligne-neutre {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            height: 6px;
            background: #3b82f6;
            z-index: 2;
            box-shadow: 0 -2px 5px rgba(59, 130, 246, 0.5);
        }

        .ligne-terre {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: repeating-linear-gradient(45deg, #22c55e, #22c55e 10px, #eab308 10px, #eab308 20px);
            z-index: 2;
            box-shadow: 0 -2px 5px rgba(34, 197, 94, 0.5);
        }

        .comp-card {
            position: absolute;
            width: 48px;
            height: 48px;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 10;
            cursor: move;
            user-select: none;
            transition: transform 0.1s;
        }

        .comp-card.pushed {
            transform: scale(0.95);
        }

        .comp-label {
            position: absolute;
            font-size: 11px;
            font-weight: bold;
            color: #0f172a;
            font-family: sans-serif;
            pointer-events: none;
            z-index: 25;
            background: rgba(255, 255, 255, 0.85);
            padding: 0px 2px;
            border-radius: 2px;
        }

        .comp-card:hover .symb {
            filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
        }

        .comp-card.allume:not(.is-voyant) .symb {
            color: #ca8a04;
            filter: drop-shadow(0 0 6px #eab308);
        }
        .comp-card.allume.is-voyant-bleu .symb {
            filter: drop-shadow(0 0 8px #2563eb);
        }
        .comp-card.allume.is-voyant-vert .symb {
            filter: drop-shadow(0 0 8px #22c55e);
        }
        .comp-card.allume.is-voyant-rouge .symb {
            filter: drop-shadow(0 0 8px #ef4444);
        }
        .comp-card.allume.is-voyant-orange .symb {
            filter: drop-shadow(0 0 8px #f59e0b);
        }

        .symb {
            width: 100%;
            height: 100%;
            color: #000;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .symb svg {
            width: 100%;
            height: 100%;
            transform: scale(1.25);
            overflow: visible;
        }

        .btn-del {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 16px;
            height: 16px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            border: none;
            font-size: 9px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            z-index: 11;
            opacity: 0;
            transition: opacity 0.2s, transform 0.1s;
        }

        .btn-del:hover {
            background: #dc2626;
            transform: scale(1.1);
        }

        .btn-rot {
            position: absolute;
            top: -8px;
            left: -8px;
            width: 16px;
            height: 16px;
            background: #6366f1;
            color: white;
            border-radius: 50%;
            border: none;
            font-size: 10px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            z-index: 11;
            opacity: 0;
            transition: opacity 0.2s, transform 0.1s;
        }

        .btn-rot:hover {
            background: #4f46e5;
            transform: scale(1.1);
        }

        .btn-opt {
            position: absolute;
            bottom: -8px;
            right: -8px;
            width: 16px;
            height: 16px;
            background: #3b82f6;
            color: white;
            border-radius: 50%;
            border: none;
            font-size: 9px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            z-index: 11;
            opacity: 0;
            transition: opacity 0.2s, transform 0.1s;
            padding: 0;
        }

        .btn-opt:hover {
            background: #2563eb;
            transform: scale(1.1);
        }

        .btn-move {
            position: absolute;
            bottom: -8px;
            left: -8px;
            width: 16px;
            height: 16px;
            background: #10b981;
            color: white;
            border-radius: 50%;
            border: none;
            font-size: 10px;
            cursor: move;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            z-index: 11;
            opacity: 0;
            transition: opacity 0.2s, transform 0.1s;
            padding: 0;
        }

        .btn-move:hover {
            background: #059669;
            transform: scale(1.1);
        }

        .comp-card:hover .btn-del,
        .comp-card:hover .btn-rot,
        .comp-card:hover .btn-opt,
        .comp-card:hover .btn-move {
            opacity: 1;
        }

        .borniers-container {
            display: flex;
            gap: 8px;
            margin-bottom: 4px;
        }

        body.schema-mode .bornier {
            opacity: 0 !important;
            pointer-events: none;
        }

        /* En mode schéma : afficher uniquement les paramètres du disjoncteur et masquer toutes les écritures/sélecteurs des récepteurs et autres composants */
        body.schema-mode .inline-select:not(.disj-param),
        body.schema-mode .tempo-label,
        body.schema-mode .var-slider,
        body.schema-mode .baes-remote-controls {
            display: none !important;
        }

        /* Mode Schéma vs Mode Simulation pour BAES et Télécommande BAES */
        .baes-schema-text, .tl-baes-schema-text {
            display: none;
        }
        .baes-simu-elements, .tl-baes-simu-elements {
            display: inline;
        }

        body.schema-mode .baes-schema-text,
        body.schema-mode .tl-baes-schema-text {
            display: inline !important;
        }
        body.schema-mode .baes-simu-elements,
        body.schema-mode .tl-baes-simu-elements {
            display: none !important;
        }

        .bornier {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #e2e8f0;
            border: 1px solid #64748b;
            border-radius: 2px;
            cursor: crosshair;
            transition: all 0.2s;
            z-index: 20;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bornier::after {
            content: '';
            width: 4px;
            height: 1px;
            background: #000;
            transform: rotate(45deg);
        }

        .bornier:hover {
            background: #f59e0b;
            border-color: #000;
            transform: scale(1.5);
        }

        .bornier.selected {
            background: #ef4444;
            border-color: #000;
            box-shadow: 0 0 8px #ef4444;
            transform: scale(1.5);
        }

        /* Positions Borniers */
        .b-top {
            top: -4px;
            left: calc(50% - 4px);
            z-index: 21;
        }

        .b-top-disj {
            top: -5px;
            left: calc(50% - 6px);
            z-index: 21;
        }

        .b-top-disj-phase {
            top: -5px;
            left: calc(50% - 7px);
            z-index: 21;
        }

        .b-bottom-disj {
            bottom: -3px;
            left: calc(50% - 8px);
            z-index: 21;
        }

        .b-bottom {
            bottom: -4px;
            left: calc(50% - 4px);
            z-index: 21;
        }

        .b-bl {
            bottom: -4px;
            left: -4px;
        }

        .b-br {
            bottom: -4px;
            right: -4px;
        }

        .b-tl {
            top: -4px;
            left: -4px;
        }

        .b-tr {
            top: -4px;
            right: -4px;
        }

        /* Bornier terre externe à la carte */
        .b-terre-ext {
            bottom: -4px;
            right: -4px;
            background: linear-gradient(135deg, #22c55e 50%, #eab308 50%) !important;
            border-color: #22c55e !important;
        }

        /* Points de connexion sur les barres */
        .bus-point {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            cursor: crosshair;
            z-index: 15;
            border: 2px solid rgba(0, 0, 0, 0.2);
            transition: all 0.2s;
            top: -3px;
        }

        .bus-point:hover {
            transform: scale(1.4);
            border-color: #000;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
        }

        .bus-point.selected {
            border-color: #000;
            box-shadow: 0 0 10px #000;
            transform: scale(1.4);
        }

        .bus-point-phase {
            background: #ef4444;
        }

        .bus-point-neutre {
            background: #3b82f6;
        }

        .bus-point-terre {
            background: #22c55e;
        }

        .inline-select {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 4px;
            background: #ffffff;
            color: #000;
            border: 1px solid #000;
            font-size: 9px;
            border-radius: 3px;
            padding: 2px;
            outline: none;
            cursor: pointer;
            text-align: center;
            white-space: nowrap;
        }

        .var-slider {
            position: absolute;
            left: 0px;
            top: 20px;
            width: 32px;
            height: 6px;
            transform: rotate(-90deg);
            z-index: 15;
            cursor: pointer;
            accent-color: #f59e0b;
            margin: 0;
            padding: 0;
        }

        .comp-card.selected-multi {
            outline: 2.5px solid #3b82f6 !important;
            box-shadow: 0 0 14px rgba(59, 130, 246, 0.7) !important;
        }

        #selectionBox {
            position: absolute;
            border: 1.5px dashed #2563eb;
            background: rgba(59, 130, 246, 0.18);
            pointer-events: none;
            display: none;
            z-index: 2000;
            border-radius: 2px;
        }

        #svgCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 5;
        }

        .btn-top {
            padding: 5px 6px;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            font-size: 11px;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .btn-sim {
            background: #22c55e;
            color: #020617;
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
        }

        .btn-sim:hover {
            background: #4ade80;
        }

        .btn-aide {
            background: #a855f7;
            color: #fff;
            box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
        }

        .btn-aide:hover {
            background: #c084fc;
        }

        .btn-aide:disabled {
            background: #475569;
            color: #94a3b8;
            box-shadow: none;
            cursor: not-allowed;
        }

        .sim-status {
            padding: 8px 10px;
            background: #ffffff;
            border-radius: 5px;
            font-size: 11px;
            font-weight: bold;
            border: 1px solid #cbd5e1;
            width: 303px;
            min-width: 303px;
            max-width: 303px;
            flex-shrink: 0;
            height: calc(2 * 11px * 1.3 + 16px);
            overflow-y: auto;
            line-height: 1.3;
            display: flex;
            align-items: center;
        }

        /* Animations pour le flux d'air de la VMC */
        @keyframes flow-up {
            0% {
                transform: translateY(4px);
                opacity: 0;
            }

            30% {
                opacity: 1;
            }

            70% {
                opacity: 1;
            }

            100% {
                transform: translateY(-4px);
                opacity: 0;
            }
        }

        .flow-v1 {
            animation: flow-up 1.2s infinite ease-in-out;
            stroke: #3b82f6;
            stroke-width: 1px;
        }

        .flow-v2 {
            animation: flow-up 0.5s infinite ease-in-out;
            stroke: #0ea5e9;
            stroke-width: 1.5px;
        }

        /* Animation de surbrillance pour l'association bobine/disjoncteur */
        @keyframes pulse-highlight {
            0% {
                box-shadow: 0 0 4px #3b82f6;
                border-color: #3b82f6;
            }

            50% {
                box-shadow: 0 0 16px #3b82f6;
                border-color: #2563eb;
            }

            100% {
                box-shadow: 0 0 4px #3b82f6;
                border-color: #3b82f6;
            }
        }

        .comp-highlight-target {
            animation: pulse-highlight 1.5s infinite;
            cursor: pointer;
            border: 2px solid #3b82f6 !important;
            border-radius: 4px;
        }