/* //{    GENERAL              */
        
        
        * { /* //{ */
            
            box-sizing: border-box;
        
        } /* //} */
        
        
        html,
        body { /* //{ */
            
            margin: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: Arial, Helvetica, sans-serif;
        background: #111;
        
        } /* //} */
        
        
        
        /* //} */
    
    
    /* //{    SIMULATEUR              */
        
        
        .simulateur { /* //{ */
            
            width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: 1fr 360px;
        
        } /* //} */
        
        
        
        /* //} */
    
    
    /* //{    ZONE AGV              */
        
        
        .zone-agv { /* //{ */
            
            position: relative;
        overflow: hidden;
        background: #d8d8d8;
        border-right: 5px solid #0324FC;
        
        } /* //} */
        
        
        #scene { /* //{ */
        
        position: absolute;
        inset: 0;
        overflow: hidden;
        
        } /* //} */
        
        #simulationZoom { /* //{ */
        
        position: absolute;
        inset: 0;
        transform: scale(0.5);
        transform-origin: center center;
        
        } /* //} */
        
        #cameraCarte { /* //{ */
        
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0px;
        height: 0px;
        will-change: transform;
        
        } /* //} */
        
        
        #carte { /* //{ */
        
        position: absolute;
        left: -2500px;
        top: -2500px;
        width: 5000px;
        height: 5000px;
        
        background-color: #fafafa;
        
        background-image:
        
        linear-gradient(#9d9d9d 2px, transparent 2px),
            linear-gradient(90deg, #9d9d9d 2px, transparent 2px);
        
        background-size:
        
        125px 125px,
            125px 125px;
        
        transform-origin: 2500px 2500px;
        will-change: transform;
        
        } /* //} */
        
        
        .fil-enterre { /* //{ */
            
            position: absolute;
        top: 0px;
        width: 6px;
        height: 100%;
        background: #ff2020;
        box-shadow: 0px 0px 0px 1px rgba(160, 0, 0, .45);
        
        } /* //} */
        
        
        .fil-enterre.fil-centre { /* //{ */
            
            left: calc(50% - 3px);
        
        } /* //} */
        
        
        .fil-enterre.fil-gauche { /* //{ */
            
            left: calc(
            50%
            + var(--fil-gauche-x, -375px)
            - 3px
            );
        
        } /* //} */
        
        .fil-enterre.fil-droit { /* //{ */
            
            left: calc(
            50%
            + var(--fil-droit-x, 375px)
            - 3px
            );
        
        } /* //} */
        
        #filArcHaut { /* //{ */
        
        position: absolute;
        
        width: var(--arc-diametre, 750px);
        height: var(--arc-rayon, 375px);
        
        left: calc(
            50%
            + var(--arc-centre-x, 0px)
            - var(--arc-rayon, 375px)
            );
        
        top: calc(
            50%
            + var(--arc-centre-y, 600px)
            );
        
        border: 8px solid #ff2020;
        border-top: none;
        border-radius: 0px 0px 375px 375px;
        
        box-sizing: border-box;
        pointer-events: none;
        
        } /* //} */
        
        #filArcBas { /* //{ */
        
        position: absolute;
        
        width: var(--arc-bas-diametre, 750px);
        height: var(--arc-bas-rayon, 375px);
        
        left: calc(
            50%
            + var(--arc-bas-centre-x, 0px)
            - var(--arc-bas-rayon, 375px)
            );
        
        top: calc(
            50%
            + var(--arc-bas-centre-y, -800px)
            - var(--arc-bas-rayon, 375px)
            );
        
        border: 8px solid #ff2020;
        border-bottom: none;
        border-radius: 375px 375px 0px 0px;
        
        box-sizing: border-box;
        pointer-events: none;
        
        } /* //} */
        
        #agvFixe { /* //{ */
        
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(58%, 600px);
        
        transform:
        translate(-50%, -50%)
            rotate(90deg);
        
        transform-origin: center center;
        
        z-index: 10;
        pointer-events: none;
        
        filter:
        drop-shadow(
            0px 8px 7px rgba(0, 0, 0, .25)
            );
        
        } /* //} */
        
        
        #agvFixe img { /* //{ */
        
        display: block;
        width: 100%;
        height: auto;
        
        } /* //} */
        
        
        .hud { /* //{ */
            
            position: absolute;
        left: 12px;
        top: 12px;
        z-index: 20;
        
        min-width: 180px;
        padding: 10px 12px;
        
        border-radius: 8px;
        
        background: rgba(0, 0, 0, .72);
        color: #fff;
        
        line-height: 1.5;
        font-size: 14px;
        
        } /* //} */
        
        
        
        /* //} */
    
    
    /* //{    ZONE TELECOMMANDE              */
        
        
        .zone-telecommande { /* //{ */
            
            display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        width: 360px;
        height: 100vh;
        overflow: hidden;
        
        background: #000;
        
        } /* //} */
        
        
        #telecommande { /* //{ */
        
        position: relative;
        width: 324px;
        height: 486px;
        flex: 0 0 auto;
        user-select: none;
        touch-action: none;
        
        } /* //} */
        
        
        #ecranTelecommande { /* //{ */
        
        position: absolute;
        left: 0px;
        top: 0px;
        display: block;
        width: 324px;
        height: 486px;
        object-fit: fill;
        z-index: 1;
        pointer-events: none;
        
        } /* //} */
        
        
        #zonesBoutons { /* //{ */
        
        position: absolute;
        left: 0px;
        top: 0px;
        width: 324px;
        height: 486px;
        z-index: 10;
        
        } /* //} */
        
        
        
        /* //} */
    
    
    /* //{    BOUTONS TELECOMMANDE              */
        
        
        .bouton-telecommande { /* //{ */
            
            position: absolute;
        padding: 0px;
        margin: 0px;
        border: 0px;
        outline: 0px;
        background: rgba(0, 0, 0, 0);
        cursor: pointer;
        
        } /* //} */
        
        
        
        
        .bouton-telecommande:hover { /* //{ */
            
            outline: 1px dashed rgba(255, 255, 255, .25);
        
        } /* //} */
        
        
        .image-bouton-actif { /* //{ */
            
            position: absolute;
        display: none;
        z-index: 20;
        pointer-events: none;
        
        } /* //} */
        
        .image-vitesse-active { /* //{ */
            
            position: absolute;
        display: none;
        z-index: 21;
        pointer-events: none;
        
        } /* //} */
        
        /* //} */
    
    
    /* //{    MESSAGE TELECOMMANDE              */
        
        
        .message-telecommande { /* //{ */
            
            position: absolute;
        left: 12px;
        right: 12px;
        bottom: -80px;
        display: none;
        padding: 10px;
        z-index: 40;
        border: 1px solid #000;
        border-radius: 5px;
        background: rgba(155, 155, 0, .90);
        color: #fff;
        font-size: 14px;
        text-align: center;
        
        } /* //} */
        
        
        .message-telecommande.visible { /* //{ */
            
            display: block;
        
        } /* //} */
        
        
        .nom-ecran { /* //{ */
            
            margin-top: 8px;
        color: #aaa;
        font-size: 12px;
        
        } /* //} */
        
        
        
        /* //} */
    
    
    /* //{    CACHE LEGACY              */
        
        
        .legacy-cache { /* //{ */
            
            display: none;
        
        } /* //} */
        
        
        
        /* //} */
    
    
    /* //{    AFFICHAGE FILO              */
        
        
        #affichageFilos { /* //{ */
        
        position: absolute;
        left: 0px;
        top: 0px;
        width: 324px;
        height: 486px;
        z-index: 25;
        pointer-events: none;
        display: none;
        
        } /* //} */
        
        
        .filo-affichage { /* //{ */
            
            position: absolute;
        left: 50%;
        width: 28%;
        height: 5px;
        transform: translateX(-50%);
        border-radius: 2px;
        
        } /* //} */
        
        
        .filo-affichage.detecte { /* //{ */
            
            background: #ffffff;
        
        } /* //} */
        
        
        .filo-affichage.non-detecte { /* //{ */
            
            background: #ff2020;
        
        } /* //} */
        
        
        .filo-position { /* //{ */
            
            position: absolute;
        left: 50%;
        top: 50%;
        width: 8px;
        height: 12px;
        transform: translate(-50%, -50%);
        background: #00ef42;
        display: none;
        
        } /* //} */
        
        
        .filo-affichage.detecte .filo-position { /* //{ */
            
            display: block;
        
        } /* //} */
        
        
        .filo-arriere-arriere { /* //{ */
            
            top: 62px;
        
        } /* //} */
        
        
        .filo-arriere-avant { /* //{ */
            
            top: 128px;
        
        } /* //} */
        
        
        .filo-avant-arriere { /* //{ */
            
            top: 342px;
        
        } /* //} */
        
        
        .filo-avant-avant { /* //{ */
            
            top: 410px;
        
        } /* //} */
        
        
        
        /* //} */
    
    /* //{    obstacle              */
        
        
        .obstacle { /* //{ */
            
            position: absolute;
        z-index: 2;
        
        } /* //} */
        
        
        
        
        /* //} */
    
    
    /* //{    AFFICHAGE TOURELLES              */
        
        
        #affichageTourelles { /* //{ */
        
        position: absolute;
        left: 0px;
        top: 0px;
        width: 324px;
        height: 486px;
        z-index: 24;
        pointer-events: none;
        display: none;
        
        } /* //} */
        
        
        .indicateur-angle { /* //{ */
            
            position: absolute;
        left: 50%;
        width: 48px;
        height: 48px;
        transform: translateX(-50%);
        border: 2px solid #00e72c;
        border-radius: 50%;
        background: #b8b8b8;
        display: grid;
        place-items: center;
        
        } /* //} */
        
        
        .indicateur-angle.arriere { /* //{ */
            
            top: 74px;
        
        } /* //} */
        
        
        .indicateur-angle.avant { /* //{ */
            
            top: 355px;
        
        } /* //} */
        
        
        .fleche-direction { /* //{ */
            
            position: relative;
        width: 7px;
        height: 38px;
        background: #00df28;
        border-radius: 5px;
        transform-origin: 50% 50%;
        
        } /* //} */
        
        
        .fleche-direction::after { /* //{ */
            
            content: "";
        position: absolute;
        left: 50%;
        bottom: -5px;
        transform: translateX(-50%);
        width: 0px;
        height: 0px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 12px solid #00df28;
        
        } /* //} */
        
        
        /* //} */