je veux fixer iframe-container eb haut de page 
padding depuis top pour que img/fond-iptv.png ne recouvre pas search-box

iframe-container doit passer en plein écran quand le telephone passe à l'horizontale etrevenir en fenetré quand ilrevient à la verticale 

Modifie mon code 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mosaïque IPTV</title>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* Styles généraux */
        body {
            z-index: 1;
            font-family: 'Ubuntu', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            background-color: transparent;
            background-image: url("https://monpetitcoindeweb.myqnapcloud.com:8081/images/fonds/fond-etoiles-l.png");
            background-attachment: fixed;
            background-position: left;
            animation: background-slide 1800s linear infinite;
        }
        @keyframes background-slide {
            from {
                background-position: left;
            }
            to {
                background-position: right;
            }
        }

        .fond {
            z-index: -1;
            background-image: url("../images/fonds/terre-fond-transparent.png");
            background-size: cover;
            background-position: top;
            background-repeat: no-repeat;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0;
            padding: 0;
        }

        .iframe-container {
            width: 99%;
            height: 30vh; /* Ajustez la hauteur selon vos besoins */
            position: relative;
            background: url('img/fond-iptv.png') no-repeat center center;
            background-size: cover;
        }

        .iframe-container iframe {
            width: 99%;
            height: 100%;
            border: none;
            background-color: transparent;
        }


        .accordion-container {
            width: 90%;
            margin: 0;
            padding: 10px;
        }

        .accordion {
            margin-top: 10px;
        }

        .accordion h5 {
            font-family: 'Ubuntu', sans-serif;
            font-weight: 700;
            cursor: pointer;
            background-color: #21272a;
            color: #ffffff;
            font-size: 22px;
            padding: 5px;
            border-radius: 9px;
            margin: 5px;
            border: 5px solid #4d5254;
        }

        .accordion h5:active {
            color: white;
            background-color: #21272a;
            border: 5px solid #4d5254;
        }

        .panel {
            display: none;
            overflow: hidden;
            padding: 0 5px;
            border-radius: 9px;
        }

        .panel a {
            font-family: 'Ubuntu', sans-serif;
            font-weight: 400;
            display: block;
            background-color: #353e4c;
            color: #e5e5e5;
            font-weight: bold;
            font-size: 20px;
            padding: 5px;
            margin: 5px 0;
            border-radius: 9px;
            text-decoration: none;
            border: 5px solid #6a6d72;
        }

        .panel a:active {
            font-family: 'Ubuntu', sans-serif;
            font-weight: 700;
            background-color: #353e4c;
            color: white;
            font-weight: bold;
            text-decoration: bolder;
            border: 5px solid white;
        }

        .search-box {
            margin: 10px;
            text-align: center; /* Centre le contenu horizontalement */
        }

        .search-box input {
            width: 70%; /* Largeur du champ de recherche à 70% */
            padding: 8px;
            border-radius: 5px;
            border: 2px solid #a4a4a4;
            background-color: #21272a;
            color: white;
            font-size: 16px;
            display: inline-block; /* Assure que le champ de recherche est traité comme un élément en ligne */
        }

        .quick-search-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .quick-search-buttons button {
            padding: 8px 12px;
            background-color: #21272a;
            color: white;
            border: 2px solid #a4a4a4;
            border-radius: 5px;
            cursor: pointer;
        }

        .quick-search-buttons button:hover {
            background-color: #343c49;
            border: 2px solid white;
        }
        
        .navbar {
            width: 100%;
            position: fixed;
            bottom: 0;
            display: flex;
            justify-content: space-around;
            background-color: #000000;
            padding: 10px 0;
        }

        .navbar a {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .navbar img {
            width: 55px;
            height: 55px;
            background-color: #21272a;
            border-radius: 65px;
            border: 5px solid #4d5254;
        }
    </style>
</head>
<body>
    <div class="fond"></div>

    <div class="iframe-container" id="iframe-container">
        <iframe name="content-frame-1" id="content-frame-1" webkitallowfullscreen="true" mozallowfullscreen="true" allow="autoplay" allowfullscreen="true" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
    </div>

    <div class="search-box">
        <input type="text" id="searchInput" placeholder="🔍 Rechercher une chaîne...">
    </div>

    <div class="accordion-container">
        <div class="quick-search-buttons">
            <button onclick="setSearch('beIN Sport')">beIN</button>
            <button onclick="setSearch('Canal+')">Canal+</button>
            <button onclick="setSearch('TF1')">TF1</button>
            <button onclick="setSearch('M6')">M6</button>
            <button onclick="setSearch('RMC')">RMC</button>
            <button onclick="setSearch('DAZN')">DAZN</button>
            <button onclick="setSearch('news')">News</button>
        </div>
<br>
        <div class="accordion">
<!-- -->
            <h5> 🖥️ Frembed Club</h5>
            <div class="panel" style="display: none;">
                <a href="https://play.frembed.site/api/player.php?id=8" target="content-frame"> 📺 beIN Sport 1</a>
                <a href="https://play.frembed.site/api/player.php?id=9" target="content-frame"> 📺 beIN Sport 2</a>
            </div>

            <h5> 🖥️ WiTV</h5>
            <div class="panel" style="display: none;">
                <a href="https://witv.skin/player/playerjs/witv-player.php?id=159" target="_blank"> 📺 6ter</a>
                <a href="https://witv.skin/player/playerjs/witv-player.php?id=234" target="_blank"> 📺 Arte</a>
            </div>

            <h5> 🖥️ TuTVlive</h5>
            <div class="panel" style="display: none;">
                <a href="https://tutvlive.ru/player/3/1" target="content-iframe"> 📺 beIN SPORT 1</a>
                <a href="https://tutvlive.ru/player/3/2" target="content-iframe"> 📺 beIN SPORT 2</a>
                <a href="https://tutvlive.ru/player/3/3" target="content-iframe"> 📺 beIN SPORT 3</a>
            </div>

            <h5> 🖥️ Rereyano</h5>
            <div class="panel" style="display: none;">
                <a href="https://rereyano.ru/player/3/1" target="content-iframe"> 📺 beIN SPORT 1</a>
                <a href="https://rereyano.ru/player/3/2" target="content-iframe"> 📺 beIN SPORT 2</a>
                <a href="https://rereyano.ru/player/3/3" target="content-iframe"> 📺 beIN SPORT 3</a>
            </div>

        </div>
    </div>
    <nav class="navbar">
        <a href="index.html"><img src="img/iptv.png" alt="Accueil"></a>        
        <a href="films-cinema.html"><img src="img/films.png" alt="Films"></a>
        <a href="dessins-animes.html"><img src="img/animes.png" alt="Animés"></a>
        <a href="documentaires.html"><img src="img/documentaires.png" alt="Documentaires"></a>
        <a href="spectacles.html"><img src="img/spectacles.png" alt="Spectacles"></a>
    </nav>
    <script>
        const searchInput = document.getElementById("searchInput");
        const accordions = document.querySelectorAll(".accordion h5");

        function setSearch(query) {
            searchInput.value = query;
            const event = new Event('input', { bubbles: true });
            searchInput.dispatchEvent(event);
        }

        searchInput.addEventListener("input", () => {
            const filter = searchInput.value.toLowerCase();

            accordions.forEach(header => {
                const panel = header.nextElementSibling;
                const links = panel.querySelectorAll("a");
                let found = false;

                links.forEach(link => {
                    if (link.textContent.toLowerCase().includes(filter)) {
                        link.style.display = "block";
                        found = true;
                    } else {
                        link.style.display = "none";
                    }
                });

                if (filter === "") {
                    header.style.display = "";
                    panel.style.display = "none";
                } else if (found) {
                    header.style.display = "";
                    panel.style.display = "block";
                } else {
                    header.style.display = "none";
                    panel.style.display = "none";
                }
            });
        });

        let currentMode = 1;
        let lastUsedIframeIndex = 0;

        document.querySelectorAll('.accordion h5').forEach(header => {
            header.addEventListener('click', function () {
                const panel = this.nextElementSibling;
                const isVisible = panel.style.display === 'block';
                document.querySelectorAll('.panel').forEach(p => p.style.display = 'none');
                if (!isVisible) {
                    panel.style.display = 'block';
                }
            });
        });

        document.querySelectorAll('.panel a').forEach(link => {
            link.addEventListener('click', function (event) {
                event.preventDefault();
                const targetURL = this.href;
                const iframes = document.querySelectorAll('iframe');
                if (currentMode === 1) {
                    const iframe = document.querySelector('iframe#content-frame-1');
                    if (iframe) {
                        iframe.src = targetURL;
                    }
                } else {
                    iframes[ lastUsedIframeIndex ].src = targetURL;
                    lastUsedIframeIndex = (lastUsedIframeIndex + 1) % iframes.length;
                }
            });
        });

        function showIframes(count) {
            currentMode = count;
            lastUsedIframeIndex = 0;
            const iframeContainer = document.getElementById('iframe-container');
            iframeContainer.className = 'iframe-container iframe-container-' + count;
            iframeContainer.innerHTML = '';
            for (let i = 1; i <= count; i++) {
                const iframe = document.createElement('iframe');
                iframe.name = `content-frame-${i}`;
                iframe.id = `content-frame-${i}`;
                iframe.setAttribute('webkitallowfullscreen', 'true');
                iframe.setAttribute('mozallowfullscreen', 'true');
                iframe.setAttribute('allow', 'autoplay; fullscreen');
                iframe.setAttribute('allowfullscreen', 'true');
                iframe.setAttribute('scrolling', 'no');
                iframe.setAttribute('frameborder', '0');
                iframe.setAttribute('allowtransparency', 'true');
                iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms');
                iframeContainer.appendChild(iframe);
            }
        }

        window.onload = function () {
            showIframes(1);
        };
    </script>
</body>
</html>