body { font-family: sans-serif; }
    header, footer { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #eee; }
    .logo { height: 40px; }
    .ecluse { position: relative; height: 300px; width: 800px; margin: 20px auto; background: #cce3f9; border: 2px solid #333; overflow: hidden; }
    .porte { width: 20px; height: 100%; background: #666; position: absolute; z-index: 2; transition: all 1s ease; }
    .porte.amont { left: 240px; }
    .porte.aval { right: 240px; }
    .porte.open { height: 0; top: 100%; }
    .eau { position: absolute; bottom: 0; width: 100%; background: #3399ff; z-index: 1; transition: height 2s ease; }
    .bateau { width: 60px; height: 30px; background: red; position: absolute; bottom: 50%; left: 0; z-index: 3; transition: left 2s ease, bottom 2s ease; }
    .feu { width: 20px; height: 20px; border-radius: 50%; background: darkred; position: absolute; top: 10px; left: 390px; z-index: 5; }
    .feu.vert { background: green; }
    .controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
    button { padding: 8px 12px; }
    #message { text-align: center; margin-top: 10px; font-weight: bold; }