@import url("../../dev/css/couleurs-fr.css");/* ou insertion direct du code de cette feuille ici  */

     html, body {
        z-index:1;
        margin: 0;
        padding: 0;
        height: 100%;
        background: #000;
        font-family: "Segoe UI", sans-serif;
        display: flex;
        flex-direction: column;
    }
	/* #buttons , .container */
    .container {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .container:hover {
        
    }
    
    .metro-btn {
        position: relative;
        flex: 1;
        width: calc(100% - 80px);
        margin: 20px auto;
        overflow: hidden;
        text-align: center;
        text-decoration: none;
        font-size: clamp(18px, 4vw, 32px);
        /* Couleur du texte */
        color: #fff;
        /* Bordure des boutons */
        border: 10px solid #222;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.7;
    }
    .metro-btn:hover {
        transform: translateY(-3px);
        opacity: 1;
    }
    .scroll-box {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .scroll-text {
        position: absolute;
        width: 100%;
        text-align: center;
        font-size: 28px;
        top: 100%;
        animation: scrollDown 8s linear infinite;
    }
    @keyframes scrollDown {
        0%   { top: 0%; }
        20%  { top: 20%; }
        50%  { top: 50%; }
        80%  { top: 80%; }
        100% { top: 100%; }
    }
    @media (max-width: 600px) {
        .metro-btn {
            width: calc(100% - 80px);
            margin: 10px auto;
            border-width: 10px;
            border-radius: 18px;
        }
        .scroll-text {
            font-size: 22px;
        }
    }