{{-- <div class="header d-flex justify-content-center align-items-center">
    <div class="row">
        <div class="col-1">
            <div class="social-icons">
                <a href="https://www.facebook.com/lacpg/" target="_blank"><i class="fab fa-facebook-f"></i></a>
                <a href="https://twitter.com/la_feg" target="_blank" class="twitter-link">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 31"
                        version="1.1"  height="40" width="37" >
                        <path
                          d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
                           fill="#cfd09c"></path>
                      </svg>
                </a>

            </div>
        </div>
        <div class="col-1">
            <div class="social-icons">

                <a href="https://www.youtube.com/channel/UCrCe_grY8Jxe3fOVOUR_i1w" target="_blank"><i class="fab fa-youtube"></i></a>
                <a href="https://www.linkedin.com/company/28423130/"><i class="fab fa-linkedin"></i></a>
            </div>
        </div>
        <div class="col-10">
            <div style="font-size: 10px;color:rgb(6 58 30);">Immeuble ODYSSÉE, Boulevard de l’Indépendance,
                BP: 410, Libreville GABON</div>
                Tél: (+241) 02 05 42 82  Email:  info@lafeg.ga
                support@lafeg.ga
        </div>

    </div>
    <div class="header-title">Répertoire des Textes Juridiques pour les PME Gabonaises</div>
    <img src="{{asset('assets/website/img/logo_footer.png')}}" alt="Logo" class="logo">
</div> --}}
<div class="group-for-fixing-purpose">
    <div class="header11" style="background-color: white !important;">
        <div class="resp-cont top-bar d-flex justify-content-between align-items-center px-4 py-2 flex-wrap">

            <div class="m-left title-row d-flex justify-content-center align-items-center mt-3 flex-wrap text-center">
                <img src="{{asset('assets/website/img/logo_vert.jpeg')}}" style="height:65px;" alt="Logo" class="logo-feg">
                <div class="header-title me-3" style="margin-bottom: 15px;color:#003f1f;">Répertoire des Textes <br> Juridiques  et des<br> structures d'appui aux PME</div>

            </div>

            <style>

                .resp-cont{
                    margin: 0 auto;
                    max-width: clamp(1140px, 65vw + 100px, 1299px);
                }

                .m-left{
                    margin-left:30px;
                }

                @media screen and (max-width: 767px) {
                    .resp-cont {
                        max-width: 100%;
                        padding: 0 15px;
                    }
                }



/* PC < 13 pouces */
@media screen and (min-width: 768px) and (max-width: 1279px) {
    .taille_img {
        width: 610px;
    }
}

/* PC 13 à 15 pouces */
@media screen and (min-width: 1280px) and (max-width: 1599px) {
    .taille_img {
        /* ancienne valeur : 640 */
        width: 610px;
    }
}

/* PC 16 à 32 pouces */
@media screen and (min-width: 1600px) and (max-width: 2560px) {
    .taille_img {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .resp-cont {
        max-width: 100%;
        padding: 10px 15px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .m-left {
        margin-left: 0;
        flex-direction: column;
        align-items: center;
        margin-top: 15px;
    }

    .m-left .header-title {
        font-size: 16px; /* ↓ plus petit pour mobile */
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .logo-feg {
        height: 75px; /* ↑ agrandit le logo */
    }

    .taille_img {
        width: 100%;
        max-width: 90vw;
        margin: 10px 0;
    }

    .social-icons-grid {
        justify-content: center;
        margin-top: 10px;
    }
}


            </style>


            <div>
                <img src="{{asset('assets/website/img/adresse-feg.png')}}" class="taille_img" alt="Logo" >
            </div>

            <div class="social-icons-grid">
                <a href="https://www.facebook.com/lacpg/" target="_blank"><i class="fab fa-facebook-f"></i></a>
                <a href="https://twitter.com/la_feg" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3 23 29" height="19" width="20">
                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="white"></path>
                    </svg>
                </a>
                <a href="https://www.youtube.com/channel/UCrCe_grY8Jxe3fOVOUR_i1w" target="_blank"><i class="fab fa-youtube"></i></a>
                <a href="https://www.linkedin.com/company/28423130/" target="_blank"><i class="fab fa-linkedin"></i></a>
            </div>

        </div>

        <!-- Ligne du titre avec logo à droite -->

    </div>


<style>
    /* Adresse bien compacte */
.adresse-header {
    max-width: 470px;
    font-size: 13px;
    line-height: 1.4;
    text-align: right;
}

.adresse-header p {
    margin: 2px 0;
}

.adresse-header i {
    margin-right: 5px;
    color: #063a1e;
}

</style>

    <div class="group-for-fixing-mobile">
        <nav class="navbar navbar-expand-lg navbar-dark navbar-expand-lg">
            <div class="container">
                <a class="navbar-brand" target="_blank" href="https://www.lafeg.ga/"> <img src="{{asset('assets/website/img/logo_footer.png')}}" alt="Logo" class="logo_feg" id="logo_feg">LA FEG</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item active"><a class="nav-link" href="/">Accueil</a></li>
                        {{-- <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle1" href="#" role="button" data-bs-toggle="dropdown">Textes Juridiques</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" style="color: #00682b;">Missions</a></li>
                                <li><a class="dropdown-item" href="#" style="color: #00682b;">Organigramme</a></li>
                            </ul>
                        </li> --}}
                        <li class="nav-item"><a class="nav-link" href="{{url('/textes-juridiques')}}">Textes Juridiques</a></li>
                        <li class="nav-item"><a class="nav-link" href="{{url('/institutions-financieres')}}">Institutions Financières</a></li>
                        <!-- <li class="nav-item"><a class="nav-link" href="#">SEA</a></li> -->
                        <li class="nav-item nav-item1">
                            <a class="nav-link" href="{{url('/sea')}}">SEA</a>
                            <span class="tooltip-text">Structure d'Encadrement<br> et d'Accompagnement</span>
                        </li>
                        <!-- <li class="nav-item"><a class="nav-link" href="#">Espace PME</a></li> -->
                        <!-- <li class="nav-item"><a class="nav-link" href="#">Institutions Financières</a></li> -->
                        <li class="nav-item"><a class="nav-link" href="{{url('/alerte')}}">Alerte</a></li>
                        <li class="nav-item"><a target="_blank" class="nav-link" href="https://www.lafeg.ga/contact">Contact</a></li>

                    </ul>
                </div>
            </div>
        </nav>


    </div>

</div>
<div class="ticker-container">
    <div class="fixed-label">FLASH INFOS</div>
    <div class="mask"></div>  <!-- Cache le texte derrière FLASH INFOS -->
    <div class="ticker-wrapper">
        <div class="ticker-text1" id="tickerText" style="animation: scrollText 25s linear infinite;font-weight: 900;"></div>
    </div>
</div>