body {
      background: #fff;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    
    .marquee-container {
        width: 100%;
        height: 25px;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FD4600;
    }

    .info-icon {
        background-color: #306D00;
        border-radius: 0px;
        border: 2px solid #306D00;
        /* ✅ rend la bordure visible */
        white-space: nowrap;
    }

    .message {
        position: absolute;
        white-space: nowrap;
        font-size: clamp(16px, 4vw, 24px);
        font-weight: bold;
        color: #ffffff;
        opacity: 0;
        transform: translateX(0%);

    }

    .animate {
        animation: sequence 10s linear forwards;
    }

    @keyframes sequence {
        0% {
            opacity: 0;
            transform: translateX(0%);
        }

        10% {
            opacity: 1;
        }

        20% {
            opacity: 0;
        }

        30% {
            opacity: 1;
        }

        40% {
            opacity: 0;
        }

        50% {
            opacity: 1;
            transform: translateX(0%);
        }

        70% {
            transform: translateX(-100%);
        }

        90% {
            transform: translateX(-120%);
        }

        100% {
            opacity: 0;
            transform: translateX(-120%);
        }
    }