
        <!--/
        [32]

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⢤⣔⣄⡲⠶⢖⢢⡠⢄⡀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡠⡾⠷⣯⢲⡖⣹⢎⡳⢭⡛⣷⡽⣄⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣹⣱⠻⣜⢣⢞⡱⢎⡵⢣⡝⢾⣻⣾⡴⡀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠜⡎⣞⡱⢫⡜⣣⢎⡳⣍⢞⡱⢮⣹⢷⣯⡿⠃
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⢳⢫⢞⡵⣩⠳⣜⡱⢮⡱⢎⢮⡱⢣⣟⡿⣾⣽⡇
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⢟⡏⡞⡴⢣⡛⡴⣙⠦⡝⣎⠶⣩⢧⡿⣽⣳⠗⠁
⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⡻⢾⡹⣜⡱⣣⢝⡲⢭⣚⠵⣊⠷⣡⣿⣻⣷⡟⡆⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢸⣟⡴⣋⠶⣡⢗⡱⢮⡙⢶⡩⢞⡭⢺⣯⢷⣯⣷⡎⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢠⢾⢫⡳⣍⠾⡱⢎⡵⢣⡝⣲⡙⢮⣜⣯⣟⡿⣎⡟⠁⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠸⡾⢺⡱⢎⣳⡙⢮⡜⣣⠞⣥⢋⡷⣼⣳⢯⡿⠻⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⡐⣇⡷⣙⢎⠶⣩⠳⡜⣥⢛⡴⣋⢶⡿⣽⢯⣟⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣾⡟⣼⢣⡝⣎⠳⣥⢛⡜⢦⣋⠶⣩⣾⢿⡽⣟⡎⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣮⢿⢏⠶⣩⢎⡳⢬⡓⣎⢳⢬⠳⣽⢯⡿⣽⣿⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣿⢾⣬⠷⡵⠾⣵⣧⣽⣬⣓⣎⣷⣟⣯⣟⡷⡏⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢶⣟⡾⠛⠒⠣⡠⠗⠒⠠⣽⢛⣾⢷⣻⣞⣯⡏⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠈⣿⡀⠰⠀⢰⠁⠀⢠⡄⠈⣞⣯⣟⡷⣯⣯⠇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢀⣵⡷⡎⠉⠉⠢⣀⣀⣀⠜⢸⣾⣽⣻⣽⣽⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠠⠯⡋⠀⠈⠉⠁⠀⠀⠀⠀⠀⢐⣖⣽⣿⣵⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠑⠋⢗⡶⢶⠴⠦⠖⠒⠊⠃⢸⣿⢟⠗⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠈⣳⣿⠀⠀⠀⠀⠀⢸⢿⡁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠰⣯⢿⣀⣀⣀⣠⣴⣾⡿⠵⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢸⣽⠚⠣⠿⠿⠛⠟⠉⠈⠺⣴⢄⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢠⣿⢃⠁⠀⠀⠀⠀⠀⠀⠀⠀⠠⠑⢭⡦⡀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⢠⣶⠫⠤⢀⣀⣀⣀⣀⠀⠤⠦⡀⠀⠈⠢⡈⢺⡆⡀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⢺⣸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣯⣳⢄⢠⠈⢂⢱⣛⡀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠈⠯⢆⠀⠀⠀⠀⠀⠀⠀⢰⠀⣿⣿⣿⠇⠀⡄⢰⣣⠁⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⢿⢢⠀⠀⠀⠀⠀⠀⠈⡄⠘⢿⡟⠀⡘⢠⣯⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⡛⢨⠆⠀⠀⠀⠀⠀⠀⠘⢠⠎⠀⠐⡰⡯⠃⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠸⡇⢸⠀⠀⠀⠀⠀⠀⠀⠀⢹⣄⠀⢸⣷⡅⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⢀⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠳⢷⡻⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⡸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣯⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣟⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⢰⣽⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣏⡅⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣼⡎⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡿⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⡿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣻⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣷⡃⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠃⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢰⣟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡷⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠈⠫⠗⠒⠒⠤⣤⣤⣤⣤⢄⣀⣀⣠⠤⣴⡿⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣼⠀⠀⠀⢸⣽⠀⠉⠉⣾⠀⠀⠀⢸⣽⠄⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣿⠀⠀⢁⣷⠏⠀⠀⠀⣉⡘⠀⠀⡸⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠰⡿⠀⠈⢸⣺⠀⠀⠀⠀⣏⡇⠀⠀⣿⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢀⢰⡮⠋⠀⢀⣠⣼⠽⠲⠶⠤⠤⢾⢇⠀⠀⢫⢷⣀⣀⡀⠀⠀⠀⠀⠀⠀
⢠⡪⣳⠳⣖⣶⡾⠟⠿⠛⠀⠀⠀⠀⡠⠊⠀⢀⣴⣿⠀⠀⠉⠉⠓⢦⡀⠀⠀⠀
⠈⠪⢭⢩⢍⣀⣀⡀⠀⠀⠀⠀⠀⡔⣽⡛⣟⡿⠏⠀⠀⠀⠀⠀⠀⣼⠃⠀⠀⠀
⠀⠀⠀⠀⠀⠉⠉⠁⠈⠉⠓⡶⡤⠽⠖⠩⠁⠄⠀⠠⠤⠄⢶⠞⠉⠁⠀⠀⠀⠀

            [FR]
        Bonjour à toi petit curieux qui regarde ce code, sois le/la bienvenu(e) dans ma matrice.
        N'hésites pas à aller voir mes projets sur la page projets - https://www.wanalike.net/projets.html
        Si tu trouve une faille dans ce code, je te remercie d'avance pour le signalement via ma page contact - https://www.wanalike.net/contact.html
        Si tu aime ce site de par son design, sa navigation ou son contenu, partage-le via son URL :)
    
        Bon chat & bets avec la communauté Tipsters Pronostics hébergé par WanaLike Network.
    
        Cordialement KoS_.
    
            [EN]
        Hello to you little curious who looks at this code, be welcome in my matrix.
        Do not hesitate to go see my projects on the projects page - https://www.wanalike.net/projets.html
        If you find a flaw in this code, I thank you in advance for the report via my contact page - https://www.wanalike.net/contact.html
        If you like this site because of its design, navigation or content, share it via its URL :)
    
        Good chat & bets with the Tipsters Pronostics community hosted by WanaLike Network.
    
        Sincerely KoS_.
        
        /-->
        <!doctype html>
<html dir="ltr" lang="en-US" class="no-js">
<head>
    <!-- meta -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Token pour l’API de recherche -->
    <meta name="tp-srch-t" content="10c3eb70ad019abb0808d17230197d6f">

        <!-- Title -->
    <title>TIPSTERS PRONOSTICS - Club pour parieurs initiés</title>

    
    <meta name="keywords" content="Tipsters pronostics, Club de pronostics sportifs, Passionnés de paris sportifs, Pronostics gratuits, Meilleurs tipsters, Enseignements paris sportifs, Stratégies de paris, Conseils paris sportifs, Astuces pour gagner aux paris, Communauté de parieurs, Pronostics de qualité, Parieurs professionnels, Apprendre à parier, Méthodes pour parier, Analyse des matchs, Prédictions sportives fiables, Suivi de tipsters, Gagner avec les paris, Pronostics experts, Pronostics détaillés, Comment choisir les meilleurs tipsters ?, Pronostics gratuits et fiables pour paris sportifs, Club de parieurs passionnés en ligne, Stratégies avancées pour paris sportifs gagnants, Le guide ultime des paris sportifs gratuits, Astuces pour maximiser vos gains aux paris sportifs, Apprendre les bases des paris sportifs pour débutants, Pronostics 100% gratuits par des experts, Rejoignez un club de passionnés de paris sportifs, Pourquoi suivre des tipsters pour réussir vos paris sportifs ?">
    <meta name="description" content="TIPSTERS PRONOSTICS club de passionnés, par des passionnés, pour des passionnés. Nous sommes les seuls à vous offrir un contenu gratuit aussi qualitatif. Êtes vous prêt à vivre le meilleur des enseignements relatifs aux paris sportifs ?"/>
    <link rel="canonical" href="https://tipsters-pronostics.com/"/>
    <meta property="og:locale" content="fr_FR"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="Tipsters-Pronostics - Investissements et club pour parieurs confirmés"/>
    <meta property="og:description" content="TP c&#039;est une alchimie entre compétence technique et bonne humeur ... un club entièrement composé de parieurs initiés que nous accompagnons avec soins."/>
    <meta property="og:url" content="https://tipsters-pronostics.com/"/>
    <meta property="og:site_name" content="Tipsters-Pronostics"/>
    <meta property="article:publisher" content="https://www.facebook.com/clubTP/"/>
    <meta property="article:modified_time" content="2020-08-25T14:48:50+00:00"/>
    <meta name="twitter:card" content="summary_large_image"/>

    <meta name="generator" content="WordPress 6.9.4"/>
    <link rel='shortlink' href='https://tipsters-pronostics.com/'/>
    <link rel="alternate" type="application/json+oembed" href="https://tipsters-pronostics.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Ftipsters-pronostics.com%2F"/>
    <link rel="alternate" type="text/xml+oembed" href="https://tipsters-pronostics.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Ftipsters-pronostics.com%2F&#038;format=xml"/>
    <meta name="bmi-version" content="1.4.3"/>
    <meta name="theme-color" content="#a6da07">

    <meta name="generator" content="Powered by WPBakery Page Builder - drag and drop page builder for WordPress."/>
    <meta name="onesignal" content="wordpress-plugin"/>

    <meta name="generator" content="Powered by Slider Revolution 6.7.28 - responsive, Mobile-Friendly Slider Plugin for WordPress with comfortable drag and drop interface."/>
    <!-- iDevices & Retina Favicons -->
    <link rel="icon" type="image/png" sizes="32x32" href="https://dev.tipsters-pronostics.com/images/TP/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="https://dev.tipsters-pronostics.com/images/TP/favicons/favicon-16x16.png">
    <link rel="shortcut icon" href="https://dev.tipsters-pronostics.com/images/TP/favicons/favicon.ico">

    <!-- Google Fonts CSS Stylesheet -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600,600italic,700,800,800italic" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Font Awesome icons library -->
    <link rel="stylesheet" href="https://dev.tipsters-pronostics.com/fonts/font-awesome/css/font-awesome.min.css" type="text/css" media="all">

    <!-- Required CSS file for iOS Slider element -->
    <link rel="stylesheet" href="https://dev.tipsters-pronostics.com/css/sliders/ios/style.css" type="text/css" media="all">

    <!-- Main + Responsive & Base sizing -->
    <link rel="stylesheet" href="https://dev.tipsters-pronostics.com/css/template.min.css">
    <link rel="stylesheet" href="https://dev.tipsters-pronostics.com/css/responsive.min.css" type="text/css" media="all">
    <link rel="stylesheet" href="https://dev.tipsters-pronostics.com/css/base-sizing.css" type="text/css" media="all">
    <link rel="stylesheet" href="https://dev.tipsters-pronostics.com/css/dp.css" type="text/css" media="all">

    <!-- Charte graphique -->
    <link id="template-colors" rel="stylesheet" href="https://dev.tipsters-pronostics.com/css/custom.css">

    <!-- CSS spécifique header / search / alerts -->
    <link rel="stylesheet" href="https://dev.tipsters-pronostics.com/css/koscmos-header.css">

    <noscript>
        <link rel="stylesheet" href="https://dev.tipsters-pronostics.com/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://dev.tipsters-pronostics.com/css/template.min.css">
    </noscript>

    <!-- jQuery -->
    <script type="text/javascript" src="https://dev.tipsters-pronostics.com/js/jquery-3.5.1.min.js"></script>
    <!-- Prettify -->
    <script src="https://dev.tipsters-pronostics.com/js/prettify.min.js"></script>
    <!-- Topbar -->
    <script src="https://dev.tipsters-pronostics.com/js/topbar.min.js"></script>

    <!-- Analytics Wanalike -->
    <script>
    var _paq = window._paq = window._paq || [];
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function() {
        var u="//analytics.wanalike.net/";
        _paq.push(['setTrackerUrl', u+'matomo.php']);
        _paq.push(['setSiteId', '4']);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
    })();
    </script>
    <!-- End Analytics Wanalike Code -->

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script>
        (function(){
        function unhide(){
            var main = document.getElementById('main_content');
            if (!main) return;
            main.style.visibility = 'visible';
            main.style.opacity = '1';
            main.style.pointerEvents = 'auto';
        }

        // visible ASAP
        unhide();

        // DOM ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', unhide, { once:true });
        }

        // Topbar : best-effort only
        window.addEventListener('load', function(){
            unhide();
            if (!window.topbar) return;
            try{
            topbar.config({ barColors:{
                '0':'rgba(0,32,0,.9)',
                '.25':'rgba(0,64,0,.9)',
                '.50':'rgba(0,128,0,.9)',
                '.75':'rgba(0,192,0,.9)',
                '1.0':'rgba(0,255,0,.9)'
            }});
            topbar.show();
            setTimeout(function(){ try{ topbar.hide(); }catch(e){} }, 600);
            } catch(e) { /* ignore */ }
        }, { once:true });

        // ultime garde-fou
        setTimeout(unhide, 1200);
        })();
    </script>
</head>

<body>
    <!-- Support Panel -->
    <input type="checkbox" id="support_p" class="panel-checkbox">
    <div class="support_panel">
        <div class="support-close-inner">
            <label for="support_p" class="spanel-label inner">
                <span class="support-panel-close">×</span>
            </label>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-9">
                    <h4 class="m_title mb-20">HOW TO SHOP</h4>
                    <div class="m_content how_to_shop">
                        <div class="row">
                            <div class="col-sm-4"><span class="number">1</span> Login or create new account.</div>
                            <div class="col-sm-4"><span class="number">2</span> Review your order.</div>
                            <div class="col-sm-4"><span class="number">3</span> Payment <strong>FREE</strong> shipment</div>
                        </div>
                        <p>If you still have problems, please let us know, by sending an email to support@website.com . Thank you!</p>
                    </div>
                </div>

                <div class="col-sm-12 col-md-12 col-lg-3">
                    <h4 class="m_title mb-20">SHOWROOM HOURS</h4>
                    <div class="m_content">
                        Mon-Fri 9:00AM - 6:00AM<br>
                        Sat - 9:00AM-5:00PM<br>
                        Sundays by appointment only!
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/ Support Panel -->

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const supportPanelCheckbox = document.getElementById('support_p');
            let lastScrollY = window.scrollY;

            window.addEventListener('scroll', function () {
                if (supportPanelCheckbox && supportPanelCheckbox.checked) {
                    const currentScrollY = window.scrollY;
                    if (currentScrollY > lastScrollY) {
                        supportPanelCheckbox.checked = false;
                    }
                    lastScrollY = currentScrollY;
                }
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const body = document.body;
            const header = document.getElementById('header');
            if (!header) return;

            body.classList.add('sticky-header');

            window.addEventListener('scroll', () => {
                if (window.scrollY >= 10) {
                    header.classList.add('header--is-sticked');
                    header.classList.remove('header--no-sticked');
                } else {
                    header.classList.remove('header--is-sticked');
                    header.classList.add('header--no-sticked');
                }
            });
        });
    </script>

    <!-- Page Wrapper -->
    <div id="page_wrapper">
        <div id="dp-js-header-helper" style="height:0 !important; display:none !important;"></div>

        <header id="header" class="site-header cta_button" data-header-style="5">
            <div class="kl-header-bg"></div>

            <div class="site-header-wrapper">
                <div class="site-header-top-wrapper">
                    <div class="siteheader-container container">
                        <div class="site-header-row site-header-top d-flex justify-content-between">
                            <div class="site-header-top-left d-flex">
                                <ul class="topnav social-icons sc--clean align-self-center">
                                    <li><a href="https://www.facebook.com/clubTP/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="https://twitter.com/tipsterspronos" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="https://www.youtube.com/channel/UClNeQU4Tnll-TmPhfF4rcWQ" target="_blank" title="Youtube"><i class="fab fa-youtube"></i></a></li>
                                </ul>
                                <div class="clearfix visible-xxs"></div>
                            </div>

                            <div class="site-header-top-right d-flex">
                                <div class="topnav support--panel align-self-center"></div>

                                <button id="search-toggle-btn"
                                        type="button"
                                        class="search-toggle-btn align-self-center ms-3"
                                        aria-label="Ouvrir la recherche"
                                        onclick="TP_toggleSearch(event)">
                                    <i class="fas fa-search"></i>
                                </button>

                                <div id="tp-search" class="tp-search-wrapper align-self-center ms-3" style="position:relative;">
                                    <div class="search-container">
                                        <form id="tp-site-search" class="tp-searchform" autocomplete="off" role="search" aria-label="Recherche sur le site">
                                            <input
                                                id="tp-search-input"
                                                name="q"
                                                class="tp-search-input"
                                                type="search"
                                                minlength="2"
                                                maxlength="100"
                                                placeholder="Rechercher un article, une catégorie…"
                                                aria-label="Rechercher">
                                        </form>

                                        <div id="tp-search-results" class="tp-search-dropdown" role="listbox" aria-label="Résultats de recherche" hidden></div>
                                    </div>
                                </div>

                                                                    <div class="topnav login--panel align-self-center ms-3">
                                        <a class="topnav-item" href="https://dev.tipsters-pronostics.com/connexion" aria-label="Connexion">
                                            <i class="login-icon fas fa-sign-in-alt visible-xs xs-icon"></i>
                                            <span class="topnav-item--text">ME CONNECTER</span>
                                        </a>
                                    </div>

                                    <div class="topnav login--panel align-self-center ms-3">
                                        <a class="topnav-item" href="https://dev.tipsters-pronostics.com/contact" aria-label="Nous contacter">
                                            <i class="login-icon fas fa-envelope visible-xs xs-icon"></i>
                                            <span class="topnav-item--text">NOUS CONTACTER</span>
                                        </a>
                                    </div>
                                                            </div>
                        </div>
                    </div>
                </div>

                <div class="site-header-main-wrapper d-flex">
                    <div class="siteheader-container container align-self-center">
                        <div class="site-header-row site-header-main d-flex flex-row justify-content-between">
                            <div class="site-header-main-left d-flex justify-content-start align-items-center">
                                <div class="logo-container hasInfoCard logosize--yes">
                                    <h1 class="site-logo logo" id="logo">
                                        <a href="https://dev.tipsters-pronostics.com/" title="Tipsters Pronostics">
                                            <img src="https://dev.tipsters-pronostics.com/images/TP/new-logo-tipsters-pronostics.webp" class="logo-img" alt="Tipsters Pronostics" title="Tipsters Pronostics" />
                                        </a>
                                    </h1>

                                    <div id="infocard" class="logo-infocard">
                                        <div class="custom">
                                            <div class="row">
                                                <div class="col-sm-6 left-side d-flex">
                                                    <div class="align-self-center">
                                                        <div class="infocard-wrapper text-center">
                                                            <img src="https://dev.tipsters-pronostics.com/images/TP/newtp.webp" class="mb-25" alt="Tipsters Pronostics" title="Tipsters Pronostics" />
                                                            <p>Nous sommes une école pour tout parieur débutant, et un réel club pour <strong>tout parieur confirmé.</strong>.</p>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-sm-6 right-side">
                                                    <div class="custom contact-details">
                                                        <p>
                                                            TIPSTERS INVEST SAS<br>
                                                            Porto-Vecchio, France <br>
                                                            <a href="mailto:support@tipsters-pronostics.com">support@tipsters-pronostics.com</a>
                                                        </p>
                                                        <a href="https://maps.app.goo.gl/EvuTSoVCvYBvKbVW6" class="map-link" target="_blank" title="">
                                                            <span class="fas fa-map-marker-alt white-icon mr-10"></span>
                                                            <span>Ouvrir avec Google Maps</span>
                                                        </a>
                                                    </div>
                                                    <div style="height:20px;"></div>
                                                    <ul class="social-icons sc--clean">
                                                        <li><a href="#" target="_self" class="fab fa-twitter" title="Twitter"></a></li>
                                                        <li><a href="#" target="_self" class="fab fa-facebook-f" title="Facebook"></a></li>
                                                        <li><a href="#" target="_self" class="fab fa-dribbble" title="Dribbble"></a></li>
                                                        <li><a href="#" target="_blank" class="fab fa-google-plus-g" title="Google Plus"></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="separator visible-xxs"></div>
                            </div>

                            <div class="site-header-main-center d-flex justify-content-center align-items-center">
                                <div class="main-menu-wrapper">
                                    <div id="zn-res-menuwrapper"><a href="#" class="zn-res-trigger "></a></div>

                                    <div id="main-menu" class="main-nav zn_mega_wrapper">
                                        <ul id="menu-main-menu" class="main-menu zn_mega_menu">
                                                                                                                                                                                                    <li class="menu-item">
                                                        <a href="https://dev.tipsters-pronostics.com">
                                                            Accueil                                                                                                                    </a>

                                                                                                            </li>
                                                                                                                                                        <li class="menu-item">
                                                        <a href="https://dev.tipsters-pronostics.com/articles">
                                                            Articles                                                                                                                    </a>

                                                                                                            </li>
                                                                                                                                                        <li class="menu-item">
                                                        <a href="https://dev.tipsters-pronostics.com/categories">
                                                            Catégories                                                                                                                    </a>

                                                                                                            </li>
                                                                                                                                                        <li class="menu-item-has-children">
                                                        <a href="https://dev.tipsters-pronostics.com/nos-tipsters">
                                                            NOS TIPSTERS                                                                                                                    </a>

                                                                                                                    <ul class="sub-menu clearfix">
                                                                                                                                                                                                        <li class="">
                                                                        <a href="https://dev.tipsters-pronostics.com/tipster-foot-france">
                                                                            ED - Football                                                                        </a>
                                                                    </li>
                                                                                                                                                                                                        <li class="">
                                                                        <a href="/tipster-foot">
                                                                            VIERI - Football                                                                        </a>
                                                                    </li>
                                                                                                                                                                                                        <li class="">
                                                                        <a href="https://dev.tipsters-pronostics.com/tipster-nfl">
                                                                            CAT-BK - NFL &amp; Football                                                                        </a>
                                                                    </li>
                                                                                                                                                                                                        <li class="">
                                                                        <a href="https://dev.tipsters-pronostics.com/tipster-cyclisme">
                                                                            Luigi - Cyclisme &amp; Tennis                                                                        </a>
                                                                    </li>
                                                                                                                            </ul>
                                                                                                            </li>
                                                                                                                                                        <li class="menu-item-has-children button-animation:hover">
                                                        <a href="https://dev.tipsters-pronostics.com/integrer-le-club" class="box__link button-animation">
                                                            Integrer le Club                                                            <span></span><span></span><span></span><span></span>                                                        </a>

                                                                                                            </li>
                                                                                                                                    </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="site-header-main-right d-flex justify-content-end align-items-center"></div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Alerts flash -->
        <div class="custom-alerts">
            <div class="alerts-container">
                            </div>
        </div>

    <!-- (Le reste du contenu page continue ici) -->

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const alerts = document.querySelectorAll('.alert');
            const closeButtons = document.querySelectorAll('.close-btn');

            alerts.forEach(alert => {
                setTimeout(() => { alert.classList.add('fade-out'); }, 3000);
            });

            closeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const alert = this.parentElement;
                    alert.classList.add('fade-out');
                });
            });
        });
    </script>

    <!-- === Intégration AJAX avec /api/search.php (token t=…) === -->
    <script>
        (function(){
            const API_URL = "https://dev.tipsters-pronostics.com/api/search.php";
            const TOKEN   = (document.querySelector('meta[name="tp-srch-t"]') || {}).content || "";
            const $input  = document.getElementById('tp-search-input');
            const $form   = document.getElementById('tp-site-search');
            const $box    = document.getElementById('tp-search-results');

            if (!$input || !$form || !$box) return;

            let activeIndex = -1;
            let debounceTimer = null;

            function showBox(){ $box.hidden = false; }
            function hideBox(){ $box.hidden = true; activeIndex = -1; }
            function setActive(i){
                const nodes = $box.querySelectorAll('.tp-search-item');
                nodes.forEach((n, idx)=> n.setAttribute('aria-selected', idx === i ? 'true' : 'false'));
                activeIndex = i;
            }
            function itemHTML(r, idx){
                const url   = r.url || '#';
                const title = r.title || 'Sans titre';
                const type  = r.type || '';
                const meta  = r.published_at ? new Date(r.published_at).toLocaleDateString() : (r.visibility ? r.visibility : '');
                return `
                    <a class="tp-search-item" role="option" data-index="${idx}" href="${url}">
                        <div>
                            <div class="tp-search-title">${title}${type ? `<span class="tp-search-badge">${type}</span>`:''}</div>
                            ${meta ? `<div class="tp-search-meta">${meta}</div>`:''}
                        </div>
                    </a>
                `;
            }
            function render(results){
                if (!Array.isArray(results) || results.length === 0){
                    $box.innerHTML = '<div class="tp-search-empty">Aucun résultat.</div>';
                    showBox(); return;
                }
                $box.innerHTML = results.map(itemHTML).join('');
                showBox();
            }
            async function query(q){
                if (!q || q.trim().length < 2){ hideBox(); return; }
                const params = new URLSearchParams({ q: q.trim(), type: 'all', limit: '10', t: TOKEN });
                try{
                    const res = await fetch(API_URL + "?" + params.toString(), {
                        method: "GET",
                        headers: { "Accept": "application/json" },
                        credentials: "same-origin",
                        cache: "no-store"
                    });
                    if (res.status === 403){
                        $box.innerHTML = '<div class="tp-search-error">Accès refusé (token invalide).</div>'; showBox(); return;
                    }
                    if (res.status === 429){
                        $box.innerHTML = '<div class="tp-search-error">Trop de requêtes. Réessayez dans 2s.</div>'; showBox(); return;
                    }
                    if (!res.ok){
                        $box.innerHTML = '<div class="tp-search-error">Erreur '+res.status+'.</div>'; showBox(); return;
                    }
                    const data = await res.json();
                    render(data.results || []);
                }catch(e){
                    console.error(e);
                    $box.innerHTML = '<div class="tp-search-error">Réseau indisponible.</div>'; showBox();
                }
            }
            function debouncedQuery(q){
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(()=> query(q), 220);
            }

            $input.addEventListener('input', (e)=> debouncedQuery(e.target.value));
            $input.addEventListener('focus', ()=> { if ($box.innerHTML.trim()!=="") showBox(); });
            document.addEventListener('click', (e)=> { if (!e.target.closest('#tp-search')) hideBox(); });

            $input.addEventListener('keydown', (e)=>{
                const items = $box.querySelectorAll('.tp-search-item');
                if (e.key === 'ArrowDown'){
                    if ($box.hidden) showBox();
                    if (items.length){
                        e.preventDefault();
                        setActive((activeIndex + 1) % items.length);
                        items[activeIndex].scrollIntoView({block:'nearest'});
                    }
                } else if (e.key === 'ArrowUp'){
                    if (items.length){
                        e.preventDefault();
                        setActive((activeIndex - 1 + items.length) % items.length);
                        items[activeIndex].scrollIntoView({block:'nearest'});
                    }
                } else if (e.key === 'Enter'){
                    if (!$box.hidden && items.length){
                        e.preventDefault();
                        const target = (activeIndex >= 0 ? items[activeIndex] : items[0]);
                        if (target && target.href){ window.location.href = target.href; }
                    } else {
                        window.location.href = "https://dev.tipsters-pronostics.com/recherche/q/" + encodeURIComponent($input.value.trim());
                    }
                } else if (e.key === 'Escape'){
                    hideBox();
                }
            });

            $form.addEventListener('submit', (e)=>{
                e.preventDefault();
                const first = $box.querySelector('.tp-search-item');
                if (!$box.hidden && first && first.href){ window.location.href = first.href; return; }
                window.location.href = "https://dev.tipsters-pronostics.com/recherche/q/" + encodeURIComponent($input.value.trim());
            });
        })();

        function TP_toggleSearch(e) {
            if (e) { e.stopPropagation(); e.preventDefault(); }
            var box = document.getElementById('tp-search');
            var input = document.getElementById('tp-search-input');
            if (!box) return;
            var isOpen = box.classList.toggle('is-open');
            if (isOpen && input) { setTimeout(() => input.focus(), 100); }
        }

        document.addEventListener('click', function(evt) {
            var box = document.getElementById('tp-search');
            var btn = document.getElementById('search-toggle-btn');
            if (!box || !btn) return;
            if (!box.contains(evt.target) && !btn.contains(evt.target)) {
                box.classList.remove('is-open');
            }
        });
    </script>

<style>
/* ================================
   Slider bottom mask (scoped)
   - pattern identique à band-usp
   ================================ */

/* Parent du mask : doit être relative + overflow hidden, sinon bande noire */
.kl-slideshow.iosslider-slideshow{
  position: relative;
  overflow: hidden;
}

/* Le mask doit être en overlay (absolute), pas “dans le flux” */
.tp-slider-mask{
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  z-index: 50;
  height: 57px;
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
}

/* Centre le SVG 5000px comme Kallyas sans provoquer de scroll horizontal */
.tp-slider-mask .svgmask{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 5000px;
  height: 57px;
  max-width: none;
  display: block;
}

/* Chevron */
.tp-slider-mask .tp-slider-chev{
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 18px;
  color: rgba(0,0,0,.25);
  z-index: 60;
}

/* Optionnel : évite que le slider “recouvre” le mask selon certains z-index Kallyas */
.kl-slideshow.iosslider-slideshow .iosSlider.kl-slideshow-inner{
  position: relative;
  z-index: 10;
}
</style>

<br />
<br />
<br />
<br />
<br />

<!-- Slideshow - iOS Slider element with animateme scroll efect, custom height and bottom mask style 2 -->
<div class="kl-slideshow iosslider-slideshow uh_light_gray maskcontainer--shadow_ud iosslider--custom-height scrollme">
  <div class="bgback"></div>

  <!-- Animated Sparkles -->
  <div class="th-sparkles"></div>
  <!--/ Animated Sparkles -->

  <!-- iOS Slider wrapper with animateme scroll efect -->
  <div class="iosSlider kl-slideshow-inner animateme"
       data-trans="6000"
       data-autoplay="1"
       data-infinite="true"
       data-when="span"
       data-from="0"
       data-to="0.75"
       data-translatey="300"
       data-easing="linear">

    <!-- Slides -->
    <div class="kl-iosslider hideControls">
      <!-- Slide 1 -->
      <div class="item iosslider__item">
        <div class="slide-item-bg" style="background-image:url(https://dev.tipsters-pronostics.com/images/TP/nouveaux-prix-slider-3000x818.webp);"></div>

        <!-- Captions container -->
        <div class="container kl-iosslide-caption kl-ioscaption--style4 s4ext fromleft klios-alignleft kl-caption-posv-middle">
          <div class="animateme" data-when="span" data-from="0" data-to="0.75" data-opacity="0.1" data-easing="linear">
            <!-- Titles disabled by KoS_ -->
          </div>
        </div>
        <!--/ Captions container -->
      </div>
      <!--/ Slide 1 -->

      <!-- Slide 2 -->
      <div class="item iosslider__item">
        <div class="slide-item-bg" style="background-image:url(https://dev.tipsters-pronostics.com/images/TP/djoko-mental-paris-sportifs.webp);"></div>

        <!-- Captions container -->
        <div class="container kl-iosslide-caption kl-ioscaption--style4 fromright klios-alignright kl-caption-posv-middle">
          <div class="animateme" data-when="span" data-from="0" data-to="0.75" data-opacity="0.1" data-easing="linear">
            <!-- Titles disabled by KoS_ -->
          </div>
        </div>
        <!--/ Captions container -->
      </div>
      <!--/ Slide 2 -->
    </div>
    <!--/ Slides -->

    <!-- Navigation Controls - Prev -->
    <div class="kl-iosslider-prev">
      <span class="thin-arrows ta__prev"></span>
      <div class="btn-label">PREV</div>
    </div>
    <!--/ Navigation Controls - Prev -->

    <!-- Navigation Controls - Next -->
    <div class="kl-iosslider-next">
      <span class="thin-arrows ta__next"></span>
      <div class="btn-label">NEXT</div>
    </div>
    <!--/ Navigation Controls - Next -->
  </div>
  <!--/ iOS Slider wrapper with animateme scroll efect -->

  <!-- Bullets -->
  <div class="kl-ios-selectors-block bullets2">
    <div class="selectors">
      <div class="item iosslider__bull-item first"></div>
      <div class="item iosslider__bull-item"></div>
      <div class="item iosslider__bull-item"></div>
      <div class="item iosslider__bull-item"></div>
      <div class="item iosslider__bull-item"></div>
    </div>
  </div>
  <!--/ Bullets -->

  <div class="scrollbarContainer"></div>

  <!-- ✅ Bottom mask (overlay) sous le slider -->
  <div class="tp-slider-mask kl-mask kl-bottommask kl-mask--mask3 kl-mask--light" aria-hidden="true">
    <svg width="5000px" height="57px" class="svgmask" viewBox="0 0 5000 57" version="1.1"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <!-- ID UNIQUE pour éviter collisions -->
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="tp-filter-mask3-slider">
          <feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
          <feGaussianBlur stdDeviation="2" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
          <feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
          <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.4 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
          <feMerge>
            <feMergeNode in="SourceGraphic"></feMergeNode>
            <feMergeNode in="shadowMatrixInner1"></feMergeNode>
          </feMerge>
        </filter>
      </defs>

      <path
        d="M0,57.0005249 L0,34.0075249 L2418,34.0075249 L2434,34.0075249 C2434,34.0075249 2441.89,33.2585249 2448,31.0245249 C2454.11,28.7905249 2479,11.0005249 2479,11.0005249 L2492,2.00052487 C2492,2.00052487 2495.121,-0.0374751261 2500,0.000524873861 C2505.267,-0.0294751261 2508,2.00052487 2508,2.00052487 L2521,11.0005249 C2521,11.0005249 2545.89,28.7905249 2552,31.0245249 C2558.11,33.2585249 2566,34.0075249 2566,34.0075249 L2582,34.0075249 L5000,34.0075249 L5000,57.0005249 L2500,57.0005249 L1148,57.0005249 L0,57.0005249 Z"
        class="bmask-bgfill"
        filter="url(#tp-filter-mask3-slider)"
        fill="#fbfbfb">
      </path>
    </svg>

    <i class="tp-slider-chev fas fa-angle-down" aria-hidden="true"></i>
  </div>
  <!-- ✅ End mask -->
</div>
<!--/ Slideshow -->


<!-- Accordions element style 5 - section with custom bottom padding -->


<section class="tp-become" aria-label="Devenir parieur">
  <div class="container">
    <div class="row align-items-center tp-become__row">
      <div class="col-12 col-lg-6 tp-become__left">
        <header class="tp-become__head">
          <h2 class="tp-become__title">DEVENIR PARIEUR ?</h2>
          <div class="tp-become__subtitle">Que peut vous apporter le Club ?</div>
          <div class="tp-become__line" aria-hidden="true"></div>
        </header>

        <div class="tp-become__text">
          <p>
            Chez Tipsters-Pronostics nous avons la volonté de vous faire gagner de l’argent au long terme et pour cela,
            il vous suffit de suivre les tipsters de l’équipe.
            <em>Vous ne trouverez pas ici de méthodes miracles, de montantes, ou autres stratégies foireuses que vous vendent nos concurrents.</em>
            Aussi, nous souhaitons vous faire devenir un meilleur parieur, en vous apportant compétences et maîtrise des différentes facettes du betting.
            <strong>Nous sommes une école pour tout parieur débutant, et un réel club pour tout parieur confirmé.</strong>
          </p>

          <p>
            Enfin, sachez une chose, être parieur c’est un travail. Nous vous devons la transparence et l’honnêteté dans nos résultats
            mais vous devez être sérieux, respectueux et déterminés !
            TP c’est une alchimie entre compétence technique et bonne humeur…
            <strong>un club entièrement composé de parieurs initiés que nous accompagnons avec soins.</strong>
          </p>
        </div>

        <div class="tp-become__cta" role="note">
          <div class="tp-become__ctaBox">
            On prend un 1er pari avec vous : <strong>&quot; Vous ne serez pas déçu ! &quot;</strong>
          </div>
        </div>
      </div>

      <div class="col-12 col-lg-6 tp-become__right">
        <figure class="tp-become__figure">
          <img
            class="tp-become__img"
            src="https://dev.tipsters-pronostics.com/images/TP/au-dela-du-jeu.webp"
            alt="Tipsters-Pronostics — Au-delà du jeu, le hasard n'existe plus"
            loading="lazy"
          >
        </figure>
      </div>
    </div>
  </div>

  <!-- Bottom mask triangles (Kallyas-like mask5) -->
  <div class="tp-become__mask kl-mask kl-bottommask kl-mask--mask5 kl-mask--light" aria-hidden="true">
    <svg width="5000px" height="64px" class="svgmask" viewBox="0 0 2700 64" version="1.1"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="tp-filter-mask5-become">
          <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
          <feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
          <feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
          <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.45 0"
                         in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
          <feMerge>
            <feMergeNode in="SourceGraphic"></feMergeNode>
            <feMergeNode in="shadowMatrixInner1"></feMergeNode>
          </feMerge>
        </filter>
      </defs>

      <!-- fond (qui devient la couleur de la section suivante) -->
      <path d="M1892,0 L2119,44.993 L2701,45 L2701.133,63.993 L-0.16,63.993 L1.73847048e-12,45 L909,44.993 L1892,0 Z"
            class="bmask-bgfill" fill="#1f2328" filter="url(#tp-filter-mask5-become)"></path>

      <!-- sur-couche lime -->
      <path d="M2216,44.993 L2093,55 L1882,6 L995,62 L966,42 L1892,0 L2118,44.993 L2216,44.993 Z"
            class="bmask-customfill" fill="#a6e21a" filter="url(#tp-filter-mask5-become)"></path>
    </svg>
  </div>
</section>

<style>
/* =========================
   DEV. PARIEUR (scoped)
   ========================= */
.tp-become{
  --tp-lime:#a6e21a;
  --tp-text:#1a1a1a;
  --tp-muted:#7b7b7b;

  position:relative;
  background:#ffffff;
  padding: 70px 0 110px;
  overflow:hidden;
}

.tp-become__row{ gap: 28px 0; }

.tp-become__title{
  margin:0;
  font-weight:900;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--tp-lime);
  font-size: 30px;
  line-height:1.1;
}

.tp-become__subtitle{
  margin-top: 6px;
  color:#b9b9b9;
  font-size: 14px;
}

.tp-become__line{
  width: 54px;
  height: 2px;
  background: var(--tp-lime);
  margin-top: 14px;
}

.tp-become__text{
  margin-top: 18px;
  color: var(--tp-text);
  font-size: 14px;
  line-height: 1.7;
}
.tp-become__text em{ color:#3b3b3b; }
.tp-become__text strong{ font-weight:800; }

.tp-become__figure{
  margin:0;
  display:flex;
  justify-content:center;
}
.tp-become__img{
  width:100%;
  max-width: 560px;
  height:auto;
  border-radius: 2px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.tp-become__cta{ margin-top: 22px; }
.tp-become__ctaBox{
  border: 2px solid #111;
  padding: 18px 18px;
  text-align:center;
  background:#fff;
  font-size: 13px;
}

.tp-become__mask{
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height:64px;
  overflow-x: clip;
  overflow-y: visible;
  pointer-events:none;
  z-index: 3;
}
.tp-become__mask .svgmask{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:5000px;
  height:64px;
  max-width:none;
  display:block;
}

@media (max-width: 991px){
  .tp-become{ padding: 56px 0 110px; }
  .tp-become__title{ font-size: 26px; letter-spacing:.28em; }
}
</style>

<section class="tp-club" aria-label="Club pour parieurs initiés">
  <div class="container tp-club__container">
    <header class="tp-club__head text-center">
      <h2 class="tp-club__title">CLUB POUR PARIEUR INITIÉS</h2>
      <div class="tp-club__quote">&quot; Au dela du jeu, le hasard n'existe plus. &quot;</div>
      <div class="tp-club__line" aria-hidden="true"></div>
    </header>

    <div class="row tp-club__cards text-center">

      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="tp-club__card">
          <div class="tp-club__num">100%</div>
          <div class="tp-club__small">suivable</div>
          <div class="tp-club__sep" aria-hidden="true"></div>
          <div class="tp-club__desc">
            Nous parions essentiellement sur des marchés de masse et avec bookmaker qui ne limite pas.
            Notre but, vous faire profiter d’une cote qui ne subira &quot;quasiment&quot; pas de chute!
            <br><br><em>Ainsi nos statistiques seront aussi les vôtres...</em>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="tp-club__card">
          <div class="tp-club__num">250</div>
          <div class="tp-club__small">bets par tipster</div>
          <div class="tp-club__sep" aria-hidden="true"></div>
          <div class="tp-club__desc">
            Notre stratégie est de rendre le suivi de tipsters simple avec 1 à 3 bets par tipsters avec des pronostics sélectionnés avec soin.
            <br><br><em>Parier professionnellement demande de l'investissement, chez TP vous serez servis !</em>
          </div>
        </div>
      </div>

      <!-- ✅ Carte active : flip 180° lisible (front cloné vers back) -->
      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="tp-club__card tp-club__card--active">
          <div class="tp-club__flip">
            <div class="tp-club__face tp-club__face--front">
              <div class="tp-club__num">69</div>
              <div class="tp-club__small">car on est fan de J.M Aulas</div>
              <div class="tp-club__sep" aria-hidden="true"></div>
              <div class="tp-club__desc">
                Et oui chez TP le fun est aussi un des points forts, que ce soit en off sur notre groupe de discussion avec nos membres
                ou bien en direct sur nos émissions sportives.
                <br><br><em>JM.Aulas, on va tout casser chez toi ... !!</em>
              </div>
            </div>

            <!-- back rempli automatiquement en JS -->
            <div class="tp-club__face tp-club__face--back" aria-hidden="true"></div>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="tp-club__card">
          <div class="tp-club__num">4</div>
          <div class="tp-club__small">tipsters inclus dans l'abonnement</div>
          <div class="tp-club__sep" aria-hidden="true"></div>
          <div class="tp-club__desc">
            En moyenne un bon tipster vous fait gagner entre 10 et 15% de ROC par année.
            Il peut arriver également qu'il fasse une année à l'équilibre voire perdante.
            <br><br><em>Travaillez avec plusieurs tipsters afin de maximiser vos gains et votre ROC !</em>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<style>
/* =========================
   CLUB PARIEURS INITIÉS (scoped)
   ========================= */
.tp-club{
  --tp-lime:#a6e21a;
  --tp-bg:#1f2328;

  background: var(--tp-bg);
  padding: 110px 0 90px;
  position: relative;
}

.tp-club__title{
  margin:0;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(255,255,255,.22);
  font-size: 52px;
}

.tp-club__quote{
  color: rgba(255,255,255,.55);
  margin-top: 10px;
  font-size: 16px;
}

.tp-club__line{
  width: 44px;
  height: 2px;
  background: var(--tp-lime);
  margin: 18px auto 0;
  opacity: .9;
}

.tp-club__cards{ margin-top: 60px; }

/* --- Layout cards (moins large + plus haut) --- */
.tp-club__cards .col-12.col-md-6.col-lg-3{ display:flex; }
.tp-club__card{
  width: 100%;
  max-width: 255px;   /* moins large */
  margin: 0 auto;
  min-height: 360px;  /* plus haut */
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.16);
  padding: 30px 18px;
  border-radius: 2px;
  height: 100%;

  /* base anim (pas d'opacité) */
  transform: translate3d(0, 14px, 0) scale(0.86);
  will-change: transform;
  transform-style: preserve-3d;
}

.tp-club__card--active{
  border-color: rgba(166,226,26,.75);
  background: rgba(0,0,0,.22);
  perspective: 1100px;
}

/* --- Typo --- */
.tp-club__num{
  font-weight: 900;
  font-size: 44px;
  color: #fff;
  line-height: 1;
}

.tp-club__small{
  margin-top: 8px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  text-transform: lowercase;
}

.tp-club__sep{
  width: 56px;
  height: 1px;
  background: rgba(255,255,255,.28);
  margin: 16px auto 0;
}

.tp-club__desc{
  margin-top: 16px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.55;
}
.tp-club__desc em{ color: rgba(255,255,255,.6); font-style: italic; }

/* =========================
   FLIP STRUCTURE (carte verte)
   ========================= */
.tp-club__flip{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  transform-style: preserve-3d;
  will-change: transform;
}

.tp-club__face{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.tp-club__face--front{ transform: rotateY(0deg); }
.tp-club__face--back { transform: rotateY(180deg); }

/* =========================
   ANIMATIONS (no opacity fade)
   - Pop + slide doux
   - Flip 180° (sur l'inner .tp-club__flip)
   ========================= */
.tp-club__card[data-anim]{
  transform: translate3d(0, 14px, 0) scale(0.86);
}

.tp-club.is-animated .tp-club__card[data-anim="pop"]{
  animation: tpCardPop 740ms cubic-bezier(.18,.9,.22,1) both;
  animation-delay: var(--tp-delay, 0ms);
}

/* carte active : pop sur la card + flip sur inner */
.tp-club.is-animated .tp-club__card[data-anim="flip"]{
  animation: tpCardPop 740ms cubic-bezier(.18,.9,.22,1) both;
  animation-delay: var(--tp-delay, 0ms);
}
.tp-club.is-animated .tp-club__card[data-anim="flip"] .tp-club__flip{
  animation: tpCardFlip 780ms cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--tp-delay, 0ms) + 140ms);
}

@keyframes tpCardPop{
  0%   { transform: translate3d(0, 14px, 0) scale(0.86); }
  55%  { transform: translate3d(0, -2px, 0) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes tpCardFlip{
  0%   { transform: rotateY(0deg); }
  60%  { transform: rotateY(120deg); }
  100% { transform: rotateY(180deg); }
}

/* hover léger */
.tp-club__card:hover{
  transform: translate3d(0, -2px, 0) scale(1.01);
  transition: transform 180ms ease-out;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .tp-club__card,
  .tp-club__flip{
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Responsive */
@media (max-width: 991px){
  .tp-club{ padding: 80px 0 70px; }
  .tp-club__title{ font-size: 34px; letter-spacing:.14em; }
  .tp-club__cards{ margin-top: 38px; }
  .tp-club__card{ max-width: 320px; min-height: 320px; }
  .tp-club__flip{ min-height: 320px; }
}
</style>

<script>
(function(){
  "use strict";

  const section = document.querySelector(".tp-club");
  if (!section) return;

  const cards = Array.from(section.querySelectorAll(".tp-club__card"));
  if (!cards.length) return;

  const prefersReduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (prefersReduced) return;

  // type anim + delays
  const baseDelay = 90;
  const startDelay = 80;

  cards.forEach((card, idx) => {
    const isActive = card.classList.contains("tp-club__card--active");
    card.setAttribute("data-anim", isActive ? "flip" : "pop");
    card.style.setProperty("--tp-delay", (startDelay + idx * baseDelay) + "ms");
  });

  // Clone front -> back pour la carte active (sinon à 180° c’est vide)
  const activeCard = section.querySelector(".tp-club__card--active");
  if (activeCard){
    const front = activeCard.querySelector(".tp-club__face--front");
    const back  = activeCard.querySelector(".tp-club__face--back");
    if (front && back && back.children.length === 0){
      back.innerHTML = front.innerHTML;
    }
  }

  let fired = false;
  const fire = () => {
    if (fired) return;
    fired = true;
    section.classList.add("is-animated");
  };

  // Déclenche dès que visible (et sinon direct)
  if ("IntersectionObserver" in window){
    const io = new IntersectionObserver((entries) => {
      for (const e of entries){
        if (e.isIntersecting){
          fire();
          io.disconnect();
          break;
        }
      }
    }, { threshold: 0.22 });
    io.observe(section);
  } else {
    fire();
  }

  // Si la section est déjà dans le viewport au load (cas reload au scroll)
  window.addEventListener("load", () => {
    const r = section.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (r.top < vh * 0.85) fire();
  }, { once: true });

})();
</script>
<section class="hg_section pt-80 pb-100 frequent-questions-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-12">
        <div class="kl-title-block text-center">
          <h2>Questions fréquentes ?</h2>
          <div style="height: 50px;"></div>
        </div>
      </div>

      <div class="col-sm-12 col-md-12">
        <div class="hg_accordion_element style5">
          <div class="th-accordion">

            <div class="acc-group">
              <div id="heading1">
                <a role="button" data-toggle="collapse" href="#acc1" aria-expanded="false" aria-controls="acc1">
                  <span class="acc-number">1.</span> Qu'est-ce qu'un parieur confirmé ?<span class="acc-icon"></span>
                </a>
              </div>
              <div id="acc1" class="collapse show" aria-labelledby="heading1">
                <div class="content">
                  <p>Attention de ne pas confondre tipsters et parieurs ... un parieur confirmé travaille grâce aux analyses du tipster en suivant ses mises et son BRM afin d'avoir un ROI similaire en fin d'année.</p>
                  <p>Un parieur confirmé peut suivre plusieurs tipsters sérieux afin d'avoir un ROC plus important et limiter le risque pour son capital... vous connaissez le fameux adage : <strong>"ne pas mettre tous ses œufs dans le même panier" ?</strong></p>
                </div>
              </div>
            </div>

            <div class="acc-group">
              <div id="heading2">
                <a role="button" data-toggle="collapse" href="#acc2" class="collapsed" aria-expanded="false" aria-controls="acc2">
                  <span class="acc-number">2.</span> Peut-on vivre des paris sportifs ?<span class="acc-icon"></span>
                </a>
              </div>
              <div id="acc2" class="collapse" aria-labelledby="heading2">
                <div class="content">
                  <p>Effectivement il est possible de vivre des paris sportifs, mais il y a différentes aptitudes à maîtriser avant cela :</p>
                  <ul>
                    <li>Être un parieur gagnant sur le long terme</li>
                    <li>Avoir une gestion de bankroll saine</li>
                    <li>Avoir un mental sans faille</li>
                  </ul>
                  <p>Enfin, pour arriver à vivre de cette discipline il faut un capital de départ très conséquent. N’oubliez jamais que cela reste un jeu et qu’aucun gain n’est garanti en fin de mois ! <strong>Seul le long terme compte.</strong></p>
                  <p><em>Donc oui, vivre des paris sportifs est possible, mais attention à ne jamais brûler les étapes !</em></p>
                </div>
              </div>
            </div>

            <div class="acc-group">
              <div id="heading3">
                <a role="button" data-toggle="collapse" href="#acc3" class="collapsed" aria-expanded="false" aria-controls="acc3">
                  <span class="acc-number">3.</span> Quelle bankroll pour débuter ?<span class="acc-icon"></span>
                </a>
              </div>
              <div id="acc3" class="collapse" aria-labelledby="heading3">
                <div class="content">
                  <p>Pour débuter dans ce domaine il n’y a pas de bankroll minimum. Il vous faudra apprendre ! Et il vaut mieux apprendre avec une petite bankroll pour « se faire la main ».</p>
                  <p>Tous nos bets sont à suivre en 1%, donc si vous avez 1000€ de bankroll / capital dédié aux paris sportifs, cela vous permet de placer un pari de 10€ et d'éviter de mettre en danger ce capital en cas de mauvaise série.</p>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
</section>
<!--/ Accordions -->

<section class="tp-uspband" aria-label="Points forts">
  <div class="container tp-uspband__container">
    <div class="row align-items-center text-center tp-uspband__row">

      <div class="col-12 col-md-6 col-lg-3 tp-uspband__item">
        <div class="tp-uspband__icon">
          <i class="fas fa-shield-alt" aria-hidden="true"></i>
        </div>
        <div class="tp-uspband__title">MÉTHODE &amp; DISCIPLINE</div>
        <div class="tp-uspband__desc">BRM, suivi, process. Pas de “coup sûr”, que du long terme.</div>
      </div>

      <div class="col-12 col-md-6 col-lg-3 tp-uspband__item">
        <div class="tp-uspband__icon">
          <i class="fas fa-users" aria-hidden="true"></i>
        </div>
        <div class="tp-uspband__title">COMMUNAUTÉ ACTIVE</div>
        <div class="tp-uspband__desc">Échanges, feedback, entraide. Progression accélérée.</div>

        <!-- <div class="tp-uspband__cta mt-3">
          <a class="tp-uspband__btn" href="/integrer-le-club/">DÉCOUVRIR LE CLUB</a>
        </div> -->
      </div>

      <div class="col-12 col-md-6 col-lg-3 tp-uspband__item">
        <div class="tp-uspband__icon">
          <i class="fas fa-chart-line" aria-hidden="true"></i>
        </div>
        <div class="tp-uspband__title">VISION ROI</div>
        <div class="tp-uspband__desc">Objectif : stabilité, maîtrise du risque, régularité.</div>
      </div>

      <div class="col-12 col-md-6 col-lg-3 tp-uspband__item">
        <div class="tp-uspband__icon">
          <i class="fas fa-chart-pie" aria-hidden="true"></i>
        </div>
        <div class="tp-uspband__title">BANKROLL AUTOMATIQUE</div>
        <div class="tp-uspband__desc">Gestion auto, limites, paliers. Tu joues structuré, pas au feeling.</div>
      </div>

    </div>
  </div>

  <!-- Bottom mask -->
  <div class="tp-uspband__bottommask kl-mask kl-bottommask kl-mask--mask3 kl-mask--light" aria-hidden="true">
    <svg width="5000px" height="57px" class="svgmask" viewBox="0 0 5000 57" version="1.1"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <!-- ID UNIQUE pour éviter collisions -->
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="tp-filter-mask3">
          <feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
          <feGaussianBlur stdDeviation="2" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
          <feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
          <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.4 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
          <feMerge>
            <feMergeNode in="SourceGraphic"></feMergeNode>
            <feMergeNode in="shadowMatrixInner1"></feMergeNode>
          </feMerge>
        </filter>
      </defs>

      <path
        d="M0,57.0005249 L0,34.0075249 L2418,34.0075249 L2434,34.0075249 C2434,34.0075249 2441.89,33.2585249 2448,31.0245249 C2454.11,28.7905249 2479,11.0005249 2479,11.0005249 L2492,2.00052487 C2492,2.00052487 2495.121,-0.0374751261 2500,0.000524873861 C2505.267,-0.0294751261 2508,2.00052487 2508,2.00052487 L2521,11.0005249 C2521,11.0005249 2545.89,28.7905249 2552,31.0245249 C2558.11,33.2585249 2566,34.0075249 2566,34.0075249 L2582,34.0075249 L5000,34.0075249 L5000,57.0005249 L2500,57.0005249 L1148,57.0005249 L0,57.0005249 Z"
        class="bmask-bgfill"
        filter="url(#tp-filter-mask3)"
        fill="#fbfbfb">
      </path>
    </svg>

    <i class="tp-uspband__chev fas fa-angle-down" aria-hidden="true"></i>
  </div>
</section>

<style>
/* === USP Band scoped (no neon, no gradients) === */
.tp-uspband{
  --tp-lime: #a6e21a;
  --tp-bg-1: #1f2328;   /* gris 1 */
  --tp-bg-2: #2a2f36;   /* gris 2 (diagonale) */
  --tp-mask-fill: #fbfbfb;

  position: relative;
  padding: 88px 0 82px; /* plus épais comme la démo */
  background: var(--tp-bg-1);
  overflow: hidden;
}

/* diagonale géométrique (2 gris, pas de dégradé) */
.tp-uspband::before{
  content:"";
  position:absolute;
  inset: 0;
  background: var(--tp-bg-2);
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 60% 100%);
  opacity: 1;
  pointer-events:none;
}

.tp-uspband__container{ position: relative; z-index: 2; }

.tp-uspband__row{ row-gap: 28px; }

.tp-uspband__item{ padding: 18px 14px; }

.tp-uspband__icon{
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 999px;
  border: 1px solid rgba(166,226,26,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--tp-lime);
  font-size: 26px;
}

.tp-uspband__title{
  color: var(--tp-lime);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 8px;
}

.tp-uspband__desc{
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 320px;
}

.tp-uspband__btn{
  display:inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(166,226,26,.55);
  color: var(--tp-lime);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 12px;
}
.tp-uspband__btn:hover{ color:#0b0f14; background: var(--tp-lime); }

/* Bottom mask : centre le SVG 5000px comme Kallyas (et évite le scroll) */
.tp-uspband__bottommask{
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  z-index: 3;
  height: 57px;
  overflow-x: clip; /* compatible avec ton custom.css */
  overflow-y: visible;
}

.tp-uspband__bottommask .svgmask{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 5000px;
  height: 57px;
  max-width: none;
  display: block;
}

.tp-uspband__bottommask .bmask-bgfill{
  fill: var(--tp-mask-fill);
}

.tp-uspband__chev{
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 18px;
  color: rgba(0,0,0,.25);
}

@media (max-width: 767px){
  .tp-uspband{
    padding: 64px 0 64px;
  }
  .tp-uspband::before{
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 55% 100%);
  }
  .tp-uspband__icon{
    width: 56px;
    height: 56px;
    font-size: 22px;
  }
}
</style>

<style>
/* ==== Tweets section (safe-scoped) ==== */
.tp-tweets-team { padding: 40px 0 10px; background: transparent; }
.tp-tweets-team .tp-tt-head { text-align:center; margin-bottom: 18px; }
.tp-tweets-team .tp-tt-title { letter-spacing:.25em; opacity:.18; font-weight:800; margin:0; }
.tp-tweets-team .tp-tt-subtitle { margin-top: 6px; color:#6c6c6c; }
.tp-tweets-team .tp-tt-accent { width:44px; height:2px; margin: 12px auto 0; background:#a6d10c; }

/* Card centrée + largeur max */
.tp-tweets-team .tp-tt-grid { display:flex; flex-direction:column; align-items:center; gap: 14px; }
.tp-tweets-team .tp-tweetcard {
  width: min(720px, 100%); /* <= un poil plus compact */
  background:#fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  overflow:hidden;
}
.tp-tweets-team .tp-tweetcard__header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px; border-bottom:1px solid rgba(0,0,0,.06);
}
.tp-tweets-team .tp-tweetcard__name { font-weight:700; color:#222; }
.tp-tweets-team .tp-tweetcard__user { font-size: 12px; color:#666; }
.tp-tweets-team .tp-tweetcard__follow {
  background:#1d9bf0; color:#fff; border-radius: 16px;
  padding: 6px 12px; font-weight:700; font-size: 12px;
}
.tp-tweets-team .tp-tweetcard__follow:hover { filter: brightness(.95); color:#fff; }

.tp-tweets-team .tp-tweetcard__body { padding: 14px 16px 16px; }
.tp-tweets-team .tp-tweetcard__text { color:#333; line-height:1.5; }
.tp-tweets-team .tp-tweetcard__text a { color:#8fbf00; text-decoration: none; }
.tp-tweets-team .tp-tweetcard__text a:hover { text-decoration: underline; }

/* Thumb image */
.tp-tweets-team .tp-tweetcard__imgwrap { margin-top: 12px; }
.tp-tweets-team .tp-tweetcard__img {
  width:100%;
  max-height: 280px; /* <= réduit encore */
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
  display:block;
}

/* Meta */
.tp-tweets-team .tp-tweetcard__meta { margin-top: 10px; font-size: 13px; color:#6b6b6b; }
.tp-tweets-team .tp-tweetcard__meta a { color:#6b6b6b; }

/* CTA */
.tp-tweets-team .tp-tt-cta__btn {
  display:inline-block;
  background:#eaeaea;
  border:1px solid rgba(0,0,0,.08);
  padding: 10px 18px;
  border-radius: 4px;
  font-weight:700;
  color:#333;
}
.tp-tweets-team .tp-tt-cta__btn:hover { background:#e0e0e0; color:#222; }

/* Modal (no deps) */
.tp-img-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.82);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 99999;
  padding: 24px;
}
.tp-img-modal.is-open { display:flex; }
.tp-img-modal__img {
  max-width: min(1100px, 94vw);
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.tp-img-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  font-size: 18px;
  font-weight: 800;
}
.tp-img-modal__close:hover { background: rgba(255,255,255,.18); }

/* Preview / Expand */
.tp-tweets-team .tp-tweetcard__text.tp-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6; /* <= change à 4 si tu veux ultra court */
  overflow: hidden;
}

.tp-tweets-team .tp-tweetcard__more {
  margin-top: 10px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #f3f3f3;
  color: #222;
  cursor: pointer;
  user-select: none;
}
.tp-tweets-team .tp-tweetcard__more:hover { background:#ececec; }
.tp-tweets-team .tp-tweetcard__more .chev { display:inline-block; transition: transform .18s ease; }
.tp-tweets-team .tp-tweetcard__more.is-open .chev { transform: rotate(180deg); }
</style>

<section class="tp-tweets-team" id="tweets-team">
  <div class="container">
    <div class="tp-tt-head">
      <h2 class="tp-tt-title">LES TWEETS DE LA TEAM</h2>
      <div class="tp-tt-subtitle">“Rejoins nos experts sur twitter”</div>
      <div class="tp-tt-accent"></div>
    </div>

    <div class="tp-tt-grid">
      <article class="tp-tweetcard">
        <header class="tp-tweetcard__header">
          <div class="tp-tweetcard__id">
            <div class="tp-tweetcard__name">Tipsters-Pronostics</div>
            <div class="tp-tweetcard__user">@TipstersPronos</div>
          </div>

          <a class="tp-tweetcard__follow"
             href="https://twitter.com/TipstersPronos"
             target="_blank" rel="noopener">
            Suivre
          </a>
        </header>

        <div class="tp-tweetcard__body">
          <!-- PREVIEW TEXT (clamp) -->
          <div class="tp-tweetcard__text tp-clamp" id="tpTweetText">
            Notre Telegram Public <a href="https://t.me/+UdaE33VWxqzu8CdE" target="_blank" rel="noopener noreferrer">https://t.me/+UdaE33VWxqzu8CdE</a><br />
<br />
<a href="https://twitter.com/search?f=tweets&amp;q=%23TeamParieur" target="_blank" rel="noopener noreferrer">https://twitter.com/search?f=tweets&amp;q=%23TeamParieur</a> <a href="https://twitter.com/search?f=tweets&amp;q=%23prono" target="_blank" rel="noopener noreferrer">https://twitter.com/search?f=tweets&amp;q=%23prono</a> <a href="https://twitter.com/search?f=tweets&amp;q=%23BettingTips" target="_blank" rel="noopener noreferrer">https://twitter.com/search?f=tweets&amp;q=%23BettingTips</a> <a href="https://twitter.com/search?f=tweets&amp;q=%23value" target="_blank" rel="noopener noreferrer">https://twitter.com/search?f=tweets&amp;q=%23value</a> <a href="https://twitter.com/search?f=tweets&amp;q=%23ValueBets" target="_blank" rel="noopener noreferrer">https://twitter.com/search?f=tweets&amp;q=%23ValueBets</a> <a href="https://twitter.com/search?f=tweets&amp;q=%23tennis" target="_blank" rel="noopener noreferrer">https://twitter.com/search?f=tweets&amp;q=%23tennis</a>          </div>

          <!-- Toggle (auto display si ça dépasse) -->
                      <button class="tp-tweetcard__more" type="button" id="tpTweetToggle">
              <span class="label">Lire la suite</span>
              <span class="chev">▾</span>
            </button>
          

                      <div class="tp-tweetcard__meta">
              <a href="https://twitter.com/superpro22110/status/2042313610005749863" target="_blank" rel="noopener">
                jeudi 9 avril 2026 à 20:48              </a>
            </div>
                  </div>
      </article>

      <div class="tp-tt-cta">
        <a class="tp-tt-cta__btn"
           href="https://twitter.com/TipstersPronos"
           target="_blank" rel="noopener">
          Charger plus de Tweets
        </a>
      </div>
    </div>
  </div>

  <!-- Modal image -->
  <div class="tp-img-modal" id="tpImgModal" aria-hidden="true">
    <button class="tp-img-modal__close" type="button" aria-label="Fermer">✕</button>
    <img class="tp-img-modal__img" id="tpImgModalImg" alt="Aperçu">
  </div>

  <script>
    (function(){
      // ===== Modal image =====
      const modal = document.getElementById('tpImgModal');
      const modalImg = document.getElementById('tpImgModalImg');
      const closeBtn = modal ? modal.querySelector('.tp-img-modal__close') : null;

      function openModal(src){
        if(!modal || !modalImg) return;
        modalImg.src = src;
        modal.classList.add('is-open');
        modal.setAttribute('aria-hidden', 'false');
        document.documentElement.style.overflow = 'hidden';
      }
      function closeModal(){
        if(!modal || !modalImg) return;
        modal.classList.remove('is-open');
        modal.setAttribute('aria-hidden', 'true');
        modalImg.src = '';
        document.documentElement.style.overflow = '';
      }

      document.addEventListener('click', function(e){
        const img = e.target.closest && e.target.closest('.tp-tweetcard__img');
        if(img){
          const src = img.getAttribute('data-full') || img.src;
          openModal(src);
          return;
        }
        if(e.target === modal) closeModal();
      });

      if(closeBtn) closeBtn.addEventListener('click', closeModal);

      document.addEventListener('keydown', function(e){
        if(e.key === 'Escape') closeModal();
      });
      // ===== Preview / Expand =====
      const textEl = document.getElementById('tpTweetText');
      const btn = document.getElementById('tpTweetToggle');

      if (textEl && btn) {
        btn.addEventListener('click', () => {
          const isClamped = textEl.classList.contains('tp-clamp');
          if (isClamped) {
            textEl.classList.remove('tp-clamp');
            btn.classList.add('is-open');
            btn.querySelector('.label').textContent = 'Réduire';
          } else {
            textEl.classList.add('tp-clamp');
            btn.classList.remove('is-open');
            btn.querySelector('.label').textContent = 'Lire la suite';
          }
        });
      }
    })();
  </script>
</section>
<section class="tp-section-divider" aria-hidden="true">
  <div class="tp-section-divider__inner">
    <span class="tp-section-divider__line"></span>
    <span class="tp-section-divider__dot"></span>
    <span class="tp-section-divider__line"></span>
  </div>
</section>

<style>
.tp-section-divider{
  padding: 26px 0;
  background: #fff; /* ou transparent si tu préfères */
}
.tp-section-divider__inner{
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: .9;
}
.tp-section-divider__line{
  height: 1px;
  flex: 1;
  background: rgba(2,6,23,.14);
}
.tp-section-divider__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: #a6e21a; /* ton vert citron */
  box-shadow: 0 0 0 4px rgba(166,226,26,.12);
}
</style>
<div id="dp-js-footer-helper" style="height:0 !important; display:none !important;"></div>

<footer id="footer" class="footer" data-footer-style="1">
  <div class="container">

    <!-- TOP FOOTER -->
    <div class="row">

      
        <!-- DB GROUPS -->
                            <div class="col-sm-12 col-md-3 mb-30">
            <h3 class="title m_title">TIPSTERS PRONOSTICS</h3>
            <div class="sbs">
              <ul class="menu">
                                                    <li>
                                          <a href="/accueil"
                         target="_self"
                         >
                        Accueil                      </a>
                                      </li>
                                                    <li>
                                          <a href="/integrer-le-club"
                         target="_self"
                         >
                        Integrer le Club                      </a>
                                      </li>
                                                    <li>
                                          <a href="/articles"
                         target="_self"
                         >
                        Articles                      </a>
                                      </li>
                                                    <li>
                                          <a href="/categories"
                         target="_self"
                         >
                        Catégories                      </a>
                                      </li>
                                                    <li>
                                          <a href="/nos-tipsters"
                         target="_self"
                         >
                        NOS TIPSTERS                      </a>
                                      </li>
                              </ul>
            </div>
          </div>
                            <div class="col-sm-12 col-md-3 mb-30">
            <h3 class="title m_title">INFOS LÉGALES</h3>
            <div class="sbs">
              <ul class="menu">
                                                    <li>
                                          <a href="/conditions-generales-de-ventes"
                         target="_self"
                         >
                        CGV                      </a>
                                      </li>
                                                    <li>
                                          <a href="/page-conditions-generales-d-utilisation"
                         target="_self"
                         >
                        CGU                      </a>
                                      </li>
                                                    <li>
                                          <a href="/mentions-legales"
                         target="_self"
                         >
                        Mentions légales                      </a>
                                      </li>
                                                    <li>
                                          <a href="/politique-de-confidentialite"
                         target="_self"
                         >
                        Politique de confidentialité                      </a>
                                      </li>
                                                    <li>
                                          <a href="/page-politique-de-cookies"
                         target="_self"
                         >
                        Politique des cookies                      </a>
                                      </li>
                              </ul>
            </div>
          </div>
        
        <!-- NEWSLETTER (footer_settings) -->
                            <div class="col-sm-12 col-md-3 mb-30">
            <div class="newsletter-signup">
              <h3 class="title m_title">INSCRIPTION À LA NEWSLETTER</h3>
              <p>Recevez nos dernières informations par email.</p>

              <!-- ✅ Branché sur /newsletter/subscribe.php + UI message (pas de JSON visible) -->
              <form class="tp-newsletter-form" method="post" action="https://dev.tipsters-pronostics.com/newsletter/subscribe.php" novalidate>
                <label for="newsletter-email" class="sr-only">Adresse e-mail</label>
                <input type="email"
                       id="newsletter-email"
                       name="email"
                       class="nl-email form-control"
                       placeholder="ton.adresse@email.com"
                       required
                       autocomplete="email">
                <!-- honeypot anti-bot (cheap & efficace) -->
                <input type="text" name="website" value=""
                       style="position:absolute;left:-9999px;top:-9999px" tabindex="-1" autocomplete="off">
                <input type="submit" class="nl-submit" value="VALIDER">
                <p class="tp-newsletter-msg small mt-2" aria-live="polite"></p>
              </form>

              <p class="small mt-2">Aucun spam. Désinscription à tout moment.</p>
            </div>
          </div>
        
        <!-- CONTACT (footer_settings) -->
                            <div class="col-sm-12 col-md-3 mb-30">
            <h3 class="title m_title">CONTACT</h3>
            <div class="contact-details">
                              <p>Email : <a href="mailto:support@tipsters-pronostics.com">support@tipsters-pronostics.com</a></p>
              
                              <p>Tipsters-Pronostics<br>Porto-Vecchio, France</p>
              
                              <p>
                  <a href="https://www.google.com/maps" target="_blank" rel="noopener">
                    <i class="icon-map-marker white-icon"></i> Voir sur Google Maps
                  </a>
                </p>
                          </div>
          </div>
        
      
    </div>
    <!-- /TOP FOOTER -->

    <!-- BOTTOM FOOTER -->
    <div class="row">
      <div class="col-sm-12">
        <div class="bottom clearfix">

          <ul class="social-icons sc--clean clearfix">
            <li class="title">GET SOCIAL</li>
            <li><a href="https://www.facebook.com/clubTP/" target="_blank" rel="noopener" class="fab fa-facebook-f"></a></li>
            <li><a href="https://twitter.com/tipsterspronos" target="_blank" rel="noopener" class="fab fa-twitter"></a></li>
            <li><a href="https://www.youtube.com/channel/UClNeQU4Tnll-TmPhfF4rcWQ" target="_blank" rel="noopener" class="fab fa-youtube"></a></li>
            <li><a href="https://fr.trustpilot.com/review/tipsters-pronostics.com" target="_blank" rel="noopener" class="fas fa-star"></a></li>
          </ul>

          <div class="copyright">
            <a href="/">
              <img src="https://dev.tipsters-pronostics.com/images/TP/new-logo-tipsters-pronostics.webp"
                   alt="Tipsters Pronostics"
                   style="width:160px; height:auto; margin-top:-10px;">
            </a>

            <span>© 2018-2026 TIPSTERS-INVEST SAS — SIRET 83416489900017</span>
            <span>HardCodé avec ❤️ par <a href="https://www.wanalike.net/">KoS_</a></span>
          </div>

        </div>
      </div>
    </div>
    <!-- /BOTTOM FOOTER -->

  </div>
</footer>

<!-- ✅ Telegram Applet (fix bottom-right, anti-troncage, responsive) -->
<div class="telegram-container" id="tp-telegram-applet" role="button" tabindex="0" aria-label="Ouvrir Telegram">
  <div class="telegram-icon">
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Telegram_logo.svg" alt="Telegram Logo">
    <span class="ch-pending-msg" aria-hidden="true">1</span>
  </div>
  <div class="telegram-text" data-long='Luigi: "JE SUIS LÀ POUR VOUS AIDER"' data-short="Telegram">
    Luigi: "JE SUIS LÀ POUR VOUS AIDER"
  </div>
</div>


<script>
(function () {
  const telegramContainer = document.getElementById('tp-telegram-applet');
  const telegramText = telegramContainer?.querySelector('.telegram-text');
  if (!telegramContainer || !telegramText) return;

  const TG_URL = 'https://t.me/luiginvest';

  function openTelegram(e){
    // on bloque les doubles déclenchements et les click internes
    if (e) { e.preventDefault(); e.stopPropagation(); }
    window.open(TG_URL, '_blank', 'noopener,noreferrer');
  }

  // Desktop hover: texte court
  let hoverState = false;

  telegramContainer.addEventListener('mouseenter', () => {
    // sur mobile ça sert à rien, mais ça casse rien
    if (hoverState) return;
    hoverState = true;
    telegramText.textContent = telegramText.getAttribute('data-short') || 'Telegram';
    telegramText.classList.add('short');
  });

  telegramContainer.addEventListener('mouseleave', () => {
    if (!hoverState) return;
    hoverState = false;
    telegramText.textContent = telegramText.getAttribute('data-long') || 'Luigi: "JE SUIS LÀ POUR VOUS AIDER"';
    telegramText.classList.remove('short');
  });

  // Click + clavier
  telegramContainer.addEventListener('click', openTelegram);
  telegramContainer.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') openTelegram(e);
  });
})();
</script>

<!-- COOKIE CONSENT BANNER -->
<div id="tp-cookie-banner" class="tp-cookie-banner d-none" role="dialog" aria-live="polite">
  <div class="tp-cookie-content">
    <p>
      Ce site utilise des cookies nécessaires à son fonctionnement.
      Des cookies optionnels peuvent être utilisés avec votre consentement.
      <a href="/cookies" class="tp-cookie-link">En savoir plus</a>
    </p>
    <div class="tp-cookie-actions">
      <button id="tp-cookie-refuse" class="btn btn-outline-light btn-sm">Refuser</button>
      <button id="tp-cookie-accept" class="btn btn-success btn-sm">Accepter</button>
    </div>
  </div>
</div>

<style>
.tp-cookie-banner{
  position:fixed; left:0; right:0; bottom:0;
  z-index:10000;
  background:rgba(15,23,42,.98);
  color:#e5e7eb;
  padding:16px;
  box-shadow:0 -4px 20px rgba(0,0,0,.45);
}
.tp-cookie-content{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.tp-cookie-content p{margin:0;font-size:14px;line-height:1.4}
.tp-cookie-link{color:#38bdf8;text-decoration:underline}
.tp-cookie-actions{display:flex;gap:8px}
</style>

<script>
(function(){
  const KEY = 'tp_cookie_consent';

  function show(){ document.getElementById('tp-cookie-banner')?.classList.remove('d-none'); }
  function hide(){ document.getElementById('tp-cookie-banner')?.classList.add('d-none'); }

  document.addEventListener('DOMContentLoaded', function(){
    if(!localStorage.getItem(KEY)) show();

    document.getElementById('tp-cookie-accept')?.addEventListener('click', function(){
      localStorage.setItem(KEY, 'accepted');
      hide();
    });

    document.getElementById('tp-cookie-refuse')?.addEventListener('click', function(){
      localStorage.setItem(KEY, 'refused');
      hide();
    });
  });
})();
</script>

<!-- ✅ Newsletter AJAX handler (affiche le message JSON même si HTTP != 200) -->
<script>
(function(){
  const forms = document.querySelectorAll('form.tp-newsletter-form');
  if(!forms || !forms.length) return;

  function setMsg(el, text, ok){
    if(!el) return;
    el.textContent = text || '';
    el.style.opacity = '1';
    el.style.fontWeight = '600';
    el.style.marginTop = '10px';
    el.style.color = ok ? '#22c55e' : '#ef4444';
  }

  async function safeJson(res){
    try { return await res.json(); } catch(e){ return null; }
  }

  forms.forEach((form) => {
    form.addEventListener('submit', async function(e){
      e.preventDefault();

      const emailInput = form.querySelector('input[name="email"]');
      const hp = form.querySelector('input[name="website"]');
      const msgEl = form.querySelector('.tp-newsletter-msg');

      // honeypot: si rempli => bot
      if(hp && (hp.value || '').trim() !== ''){
        setMsg(msgEl, "✅ Ton email a bien été inscrit à la newsletter.", true);
        form.reset();
        return;
      }

      const email = (emailInput?.value || '').trim();
      if(!email){
        setMsg(msgEl, "Mets une adresse email valide.", false);
        return;
      }

      setMsg(msgEl, "Inscription en cours...", true);

      try {
        const body = new URLSearchParams();
        body.set('email', email);

        const res = await fetch(form.getAttribute('action') || '/newsletter/subscribe.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
          },
          body: body.toString()
        });

        // IMPORTANT : on parse le JSON même si res.ok === false (409, 422, 500…)
        const data = await safeJson(res);

        // Si pas de JSON exploitable => fallback générique
        if(!data || typeof data !== 'object'){
          setMsg(msgEl, "Erreur serveur. Réessaie plus tard.", false);
          return;
        }

        // Message prioritaire venant du backend
        const backendMsg = (typeof data.message === 'string' && data.message.trim() !== '')
          ? data.message.trim()
          : (data.success ? "✅ Inscription réussie !" : "Impossible d’inscrire cet email.");

        if(data.success === true){
          setMsg(msgEl, backendMsg, true);
          form.reset();
        } else {
          // Même si HTTP 409/422 => on affiche le message backend (pas “Erreur serveur”)
          setMsg(msgEl, backendMsg, false);
        }
      } catch (err){
        setMsg(msgEl, "Erreur réseau. Vérifie ta connexion.", false);
      }
    });
  });
})();
</script>

<!-- ToTop -->
<a href="#" id="totop">TOP</a>


<script src="https://dev.tipsters-pronostics.com/js/modernizr.min.js"></script>
<script src="https://dev.tipsters-pronostics.com/js/bootstrap.min.js"></script>
<script src="https://dev.tipsters-pronostics.com/js/kl-plugins.js"></script>
<script src="https://dev.tipsters-pronostics.com/js/plugins/scrollme/jquery.scrollme.js"></script>
<script src="https://dev.tipsters-pronostics.com/js/plugins/_sliders/ios/jquery.iosslider.min.js"></script>
<script src="https://dev.tipsters-pronostics.com/js/trigger/slider/ios/kl-ios-slider.js"></script>
<script src="https://dev.tipsters-pronostics.com/js/plugins/_sliders/slick/slick.js"></script>
<script src="https://dev.tipsters-pronostics.com/js/trigger/kl-slick-slider.js"></script>
<script src="https://dev.tipsters-pronostics.com/js/trigger/kl-slick-slider.js"></script>
<script src="https://dev.tipsters-pronostics.com/js/kl-scripts.js"></script>

</body>
</html>