<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --> <title>{% block title %}Welcome!{% endblock %}</title> <link rel="icon" href="{{asset('img/favicon-16x16.png')}}"> <link rel="stylesheet" href="{{ asset('css/style.css') }}"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css"> <link rel="stylesheet" href="{{asset('slick/slick.css')}}"> <link rel="stylesheet" href="{{asset('slick/slick-theme.css')}}"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" > <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> {% if app.user%} {%else%} <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> {%endif%} <script src="https://kit.fontawesome.com/d2408fdc07.js" crossorigin="anonymous"></script> {% block stylesheet %} {% endblock %} {% block javascripts %} {% endblock %} <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-065YCH9G8X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-065YCH9G8X'); </script> </head> <body> <style> @media (max-width: 1400px) { section{ background-size:contain!important; } } .joinUsResp { border: white solid 2px!important; } .formResp i { left: -19px!important; bottom: -8px!important; } .searchResp{ margin-right:45px!important; } </style>{% if app.user %} {% include 'cms.html.twig' %}{% endif %} <!-- effet flou --> <div class="side-bar-content bg-red"> <div class="row" style="width: 100%; height: 100%; margin: 0;"> <div class="col-2 blur"></div> <div class="col-10 content"> <div class="d-flex justify-content-between align-items-center" style="width:100%;height:50px;margin-top:20px;margin-bottom:32px;"> <a href="{{path('app_home')}}"> <img style="width:40%;margin-left:14px;" src="{{asset('img/accueil/Groupe 134.svg')}}" alt="logo" style="cursor:pointer;"> </a> <i class="fa-regular fa-circle-xmark circlemark" style="width:20px;height:20px;color:white;margin-right:20px;cursor:pointer;"></i> </div> <div class="div d-flex"> <form style="margin-bottom:30px;" action="{{path('resultatRecherche')}}" class="formResp d-flex w-100"method="post" > <input type="search" name="search" class="searchResp" placeholder="{% trans %}tapez-votre-recherche{% endtrans %}"> <i class="searchLink fa-solid fa-magnifying-glass" style="color:white"></i> <input type="submit" hidden /> </form> </div> <div class="nav-links"> <ul style="margin:0;padding:0;padding-right:20px;margin-left: 20px;"> <li> <a class="nav-link {% if app.request.get('_route') == 'app_industrialisation' %}active{% endif %}" aria-current="page" href="{{path('app_industrialisation',{'locale':app.request.locale})}}">{% trans %}navbar-menu-industrialisation{% endtrans %}</a> </li> <hr> <li> <a class="nav-link {% if app.request.get('_route') == 'formations' %}active{% endif %}" href="{{path('formations',{'locale':app.request.locale})}}" >{% trans %}navbar-menu-formation{% endtrans %}</a> </li> <hr> <li> <a class="nav-link {% if app.request.get('_route') == 'app_digitalManufacturingServices' %}active{% endif %}" href="{{path('app_digitalManufacturingServices',{'locale':app.request.locale})}}">{% trans %}navbar-menu-digital{% endtrans %}</a> </li> <hr> {% if app.user %} <div class="dropdown-text"> <a class="nav-link-text" id="dropdown-toggle-text">{% trans %}navbar-manufacturingerp{% endtrans %}</a> </div> </li> <li> <div class="dropdown-text dropdown-content-text"> <a class="{% if app.request.get('_route') == 'app_manufacturingERP' %}active{% endif %}" href="{{ path('app_manufacturingERP',{'locale':app.request.locale}) }}" style="padding-top: 6px!important;padding-bottom: 6px!important; color: #0C24B3;">{% trans %}navbar-menu-erp-presentation{% endtrans %}</a> <a class="{% if app.request.get('_route') == 'presentationERP' %}active{% endif %}" href="{{ path('presentationERP',{'locale':app.request.locale}) }}" style="padding-top: 6px!important;padding-bottom: 6px!important; color: #0C24B3;">{% trans %}navbar-menu-erp-fonctionnalites{% endtrans %}</a> </div> <script> document.addEventListener("DOMContentLoaded", function() { const dropdownToggleText = document.getElementById("dropdown-toggle-text"); const dropdownContentText = document.querySelector(".dropdown-content-text"); const marge = document.querySelector(".testMarge"); // Corrigé le ':' par un ';' dropdownToggleText.addEventListener("click", function() { if (dropdownContentText.style.display === "block") { dropdownContentText.style.display = "none"; marge.style.marginTop = "0px"; // Retire la marge } else { dropdownContentText.style.display = "block"; marge.style.marginTop = "98px"; // Ajoute la marge } }); document.addEventListener("click", function(event) { if (!event.target.matches(".nav-link-text") && !event.target.matches(".dropdown-content-text a")) { dropdownContentText.style.display = "none"; marge.style.marginTop = "0px"; // Retire la marge } }); }); </script> </li> <hr> {% endif %} <li class="testMarge"> <a class="nav-link {% if app.request.get('_route') == 'app_baseOutils' %}active{% endif %}" href="{{path('app_baseOutils',{'locale':app.request.locale})}}">{% trans %}navbar-menu-baseoutils{% endtrans %}</a> </li> <hr> <li> <a class="nav-link {% if app.request.get('_route') == 'app_societe' %}active{% endif %}" href="{{path('app_societe',{'locale':app.request.locale})}}">{% trans %}navbar-menu-societe{% endtrans %}</a> </li> <hr> <li> <a class="nav-link {% if app.request.get('_route') == 'app_actualites' %}active{% endif %}" href="{{path('app_actualites',{'locale':app.request.locale})}}">{% trans %}navbar-menu-actu{% endtrans %}</a> </li> <hr> <li> <a class="nav-link {% if app.request.get('_route') == 'app_contact' %}active{% endif %}" href="{{path('app_contact',{'locale':app.request.locale})}}">{% trans %}navbar-menu-contact{% endtrans %}</a> </li> <hr> <div class="d-flex justify-content-between" style="margin-top:16px"> <div class="col-3 joinUs joinUsResp"> <li class="nav-item"> <a class="nav-link {% if app.request.get('_route') == 'app_joinus' %}active{% endif %}" href="{{path('app_joinus',{'locale':app.request.locale})}}">JOIN US</a> </li> </div> <li class="nav-item"> <a href="https://www.linkedin.com/company/cpi-luxembourg" target="_blank"><img class="img-fluid" src="{{asset('img/accueil/linkedIn.png')}}" alt="linkedIn"></a> </li> </div> <li> <p style="font-size:8px!important;color:white;text-decoration:none;margin:0;padding:0;margin-top:15px;margin-bottom:25px;"> <a href="{{ path('politique',{'locale':app.request.locale})}}" style="font-size:12px!important;">{% trans %}footer-text3{% endtrans %}</a> | <a href="{{ path('cookies',{'locale':app.request.locale})}}" style="font-size:12px!important;">Cookies</a> </p> </li> <li class="d-none"> <p style="font-size:12px;font-weight:bold;color:#7393FA; margin-top:15px;margin-bottom: 0!important;">{% trans %}footer-text2{% endtrans %}</p> <div class="d-flex justify-content-between" style="margin:0;padding:0"> <a href="https://www.wintool.com/en" target="_blank" style="text-decoration:none;"><img src="{{asset('img/accueil/wintool-ag-logo-vector-white.png')}}" alt="" style="margin:0;padding:0"></a> <a href="https://www.3ds.com/fr/" target="_blank" style="text-decoration:none;"><img src="{{asset('img/accueil/delmiaworks-logo.png')}}" style="margin:0;padding:0;width:135px;margin-left: 15px;" alt=""></a> </div> </li> </ul> </div> </div> </div> </div> <div class="side-bar"> <a href="{{path('app_home')}}"> <img src="{{asset('img/industrialisation/Groupe 287.svg')}}" alt="logo" style="cursor:pointer;"> </a> <div class="d-flex"> <div class="radio-nav" style="margin-right:15px;"> <a href="{{path('changerLocale',{'locale':'fr'})}}" style="color:black;text-decoration:none;" class="{% if app.request.locale == 'fr' %}radio-nav-active{% endif %}">FR</a> <a href="{{path('changerLocale',{'locale':'en'})}}" style="color:black;text-decoration:none;" class="{% if app.request.locale == 'en' %}radio-nav-active{% endif %}">EN</a> </div> <img src="{{asset('img/burger-menu-svgrepo-com.svg')}}" alt="menu burger logo" class="menu-hamburger" style="width: 30px!important;cursor:pointer;"> </div> </div> <script> const menuHamburger = document.querySelector(".menu-hamburger"); const sideBarContent = document.querySelector(".side-bar-content"); let buttonClose = document.querySelector(".circlemark"); menuHamburger.addEventListener('click', () => { if (sideBarContent.style.display === 'block') { sideBarContent.style.display = 'none'; } else { sideBarContent.style.display = 'block'; } }); buttonClose.addEventListener('click', () => { if (sideBarContent.style.display === 'block') { sideBarContent.style.display = 'none'; } else { sideBarContent.style.display = 'block'; } }); </script> <header> <div class="navigation-header container-fluid" style="border-bottom: solid 2px blue;"> <div class="row py-4 d-flex" id="header" style=" margin-right:5%!important"> <div class=" col-4 col-md-2 d-flex align-items-center justify-content-center justify-content-md-end" id="logo-responsive"> <div class="logo"> <a href="{{path('app_home')}}"><img class="d-block" style="width:150px !important;" src="{{asset('img/industrialisation/Groupe 287.svg')}}" alt="accueil" /></a> </div> </div> <div class="col-10 d-flex justify-content-lg-end justify-content-center" > <nav class="navbar navbar-expand-lg "> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse " id="navbarNav"> <ul class="navbar-nav " style="padding:0;position: relative;top: 14px;"> <li class="nav-item nav-edit d-flex flex-column align-items-center justify-content-between" style="text-transform:uppercase"> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':1})}}"><button type="button" style="" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} <a class="nav-link {% if app.request.get('_route') == 'app_industrialisation' %}active{% endif %}" aria-current="page" href="{{path('app_industrialisation',{'locale':app.request.locale})}}">{% trans %}navbar-menu-industrialisation{% endtrans %}</a> <img class="circle-hover-nav" src="{{asset('img/iconizer-image-rond-bleu-2.svg')}}" alt=""> </li> <li class="nav-item nav-edit d-flex flex-column align-items-center justify-content-between"> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':2})}}"><button type="button" style="" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} <a class="nav-link {% if app.request.get('_route') == 'formations' %}active{% endif %}" href="{{path('formations',{'locale':app.request.locale})}}" >{% trans %}navbar-menu-formation{% endtrans %}</a> <img class="circle-hover-nav" src="{{asset('img/iconizer-image-rond-bleu-2.svg')}}" alt=""> </li> <li class="nav-item nav-edit d-flex flex-column align-items-center justify-content-between"> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':53})}}"><button type="button" style="" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} <a class="nav-link {% if app.request.get('_route') == 'app_digitalManufacturingServices' %}active{% endif %}" href="{{path('app_digitalManufacturingServices',{'locale':app.request.locale})}}">{% trans %}navbar-menu-digital{% endtrans %}</a> <img class="circle-hover-nav" src="{{asset('img/iconizer-image-rond-bleu-2.svg')}}" alt=""> </li> {% if app.user %} <li class="nav-item nav-edit d-flex flex-column align-items-center justify-content-between "> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':60})}}"><button type="button" style="" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} <div class="dropdown d-flex flex-column align-items-center justify-content-between"> <a class="nav-link {% if app.request.get('_route') == 'app_manufacturingERP' %}active{% endif %}" style="cursor:pointer;margin-bottom:20px">{% trans %}navbar-manufacturingerp{% endtrans %}</a> <img class="circle-hover-nav" src="{{asset('img/iconizer-image-rond-bleu-2.svg')}}" alt=""> <div class="dropdown-content dropdown-base"> <a class="{% if app.request.get('_route') == 'app_manufacturingERP' %}active{% endif %}" href="{{ path('app_manufacturingERP',{'locale':app.request.locale}) }}">{% trans %}navbar-menu-erp-presentation{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':54})}}"><button type="button" style="" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</a> <a class="{% if app.request.get('_route') == 'presentationERP' %}active{% endif %}" href="{{ path('presentationERP',{'locale':app.request.locale}) }}">{% trans %}navbar-menu-erp-fonctionnalites{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':55})}}"><button type="button" style="" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</a> </div></div> <script> // Récupérez le lien MANUFACTURING et le menu déroulant const manufacturingLink = document.querySelector('.dropdown a'); const dropdownContent = document.querySelector('.dropdown .dropdown-content'); // Ajoutez un gestionnaire d'événement au lien manufacturingLink.addEventListener('click', function (e) { e.preventDefault(); // Empêche le lien de suivre le lien href // Vérifiez si le menu est actuellement caché if (dropdownContent.style.display === 'none' || !dropdownContent.style.display) { // Affichez le menu déroulant avec une hauteur adaptée au contenu dropdownContent.style.display = 'block'; dropdownContent.style.height = 'auto'; const height = dropdownContent.clientHeight + 'px'; dropdownContent.style.height = '0'; // Réinitialisez la hauteur à 0 setTimeout(() => { dropdownContent.style.height = height; // Appliquez la hauteur réelle pour l'animation }, 0); } else { // Masquez le menu déroulant dropdownContent.style.height = '0'; setTimeout(() => { dropdownContent.style.display = 'none'; }, 300); // Durée de l'animation CSS } }); </script> </li> {% endif %} <li class="nav-item nav-edit d-flex flex-column align-items-center justify-content-between"> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':56})}}"><button type="button" style="" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} <a class="nav-link {% if app.request.get('_route') == 'app_baseOutils' %}active{% endif %}" href="{{path('app_baseOutils',{'locale':app.request.locale})}}">{% trans %}navbar-menu-baseoutils{% endtrans %}</a> <img class="circle-hover-nav" src="{{asset('img/iconizer-image-rond-bleu-2.svg')}}" alt=""> </li> <li class="nav-item nav-edit d-flex flex-column align-items-center justify-content-between"> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':57})}}"><button type="button" style="" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} <a class="nav-link {% if app.request.get('_route') == 'app_societe' %}active{% endif %}" href="{{path('app_societe',{'locale':app.request.locale})}}">{% trans %}navbar-menu-societe{% endtrans %}</a> <img class="circle-hover-nav" src="{{asset('img/iconizer-image-rond-bleu-2.svg')}}" alt=""> </li> <li class="nav-item nav-edit d-flex flex-column align-items-center justify-content-between"> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':58})}}"><button type="button" style="" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} <a class="nav-link {% if app.request.get('_route') == 'app_actualites' %}active{% endif %}" href="{{path('app_actualites',{'locale':app.request.locale})}}">{% trans %}navbar-menu-actu{% endtrans %}</a> <img class="circle-hover-nav" src="{{asset('img/iconizer-image-rond-bleu-2.svg')}}" alt=""> </li> <li class="nav-item nav-edit d-flex flex-column align-items-center justify-content-between"> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':59})}}"><button type="button" style="" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} <a class="nav-link {% if app.request.get('_route') == 'app_contact' %}active{% endif %}" href="{{path('app_contact',{'locale':app.request.locale})}}">{% trans %}navbar-menu-contact{% endtrans %}</a> <img class="circle-hover-nav" src="{{asset('img/iconizer-image-rond-bleu-2.svg')}}" alt=""> </li> <div class="joinUs"> <li class="nav-item"> <a class="nav-link {% if app.request.get('_route') == 'app_joinus' %}active{% endif %}" href="{{path('app_joinus',{'locale':app.request.locale})}}">JOIN US</a> </li> </div> <div class="radio-nav"> <a href="{{path('changerLocale',{'locale':'fr'})}}" style="color:black;text-decoration:none;" class="{% if app.request.locale == 'fr' %}radio-nav-active{% endif %}">FR</a> <a href="{{path('changerLocale',{'locale':'en'})}}" style="color:black;text-decoration:none;" class="{% if app.request.locale == 'en' %}radio-nav-active{% endif %}">EN</a> </div> <script> document.querySelectorAll('input[name="language"]').forEach(function(radio) { radio.addEventListener('change', function() { console.log("Langue du site:", this.value); // Affiche la valeur dans la console document.getElementById('languageForm').submit(); }); }); </script> <li id="search-icon"> <i class="searchLinkDesktop fa-solid fa-magnifying-glass"></i> </li> </ul> </div> </div> </nav> </div> </div> </div> <div class="container-form" id="search-container"> <form action="{{path('resultatRecherche')}}" method="post"> <input type="search" name="search" placeholder="{% trans %}tapez-votre-recherche{% endtrans %}"> <input type="submit" hidden /> </form></div><script>document.addEventListener("DOMContentLoaded", function () { const searchIcon = document.getElementById("search-icon"); const searchContainer = document.getElementById("search-container"); searchIcon.addEventListener("click", function (event) { // Empêcher la propagation du clic pour éviter la fermeture immédiate event.stopPropagation(); if (searchContainer.style.height === "0px" || searchContainer.style.height === "") { // Afficher le formulaire searchContainer.style.height = "90px"; searchContainer.style.opacity = "1"; // Ajouter un gestionnaire d'événements de clic au document pour masquer le formulaire document.addEventListener("click", function closeSearchContainer() { // Masquer le formulaire searchContainer.style.height = "0px"; searchContainer.style.opacity = "0"; // Retirer le gestionnaire d'événements une fois le formulaire masqué document.removeEventListener("click", closeSearchContainer); }); } else { // Masquer le formulaire searchContainer.style.height = "0px"; searchContainer.style.opacity = "0"; } }); // Empêcher la propagation du clic depuis le conteneur du formulaire searchContainer.addEventListener("click", function (event) { event.stopPropagation(); });});</script> {% if app.user %} {% endif %} </header> {% block body %} {% endblock %}<div class="footer "> <div class="container"> <div class=" row text"> <div class="d-md-block d-none col-xl-3 col-4 d-flex align-items-center justify-content-center justify-content-lg-start pictureFooter deleteResponsive deleteResponsiveTablet"> <a href ="#"><img class="d-md-block d-none w-75 img-fluid pictureFooter" src="{{asset('img/accueil/footer.png')}}" alt="accueil" /></a> </div> <div class="col-xl-3 col-md-4 col-6 justify-content-center justify-content-lg-start "> <div class="txt1"> <p>LUXEMBOURG</p> </div> <div class="d-flex flex-column"> <p>21, rue de l'innovation,</p> <p>1896 Kockelscheuer</p> <p>Tél : +352 26 17 68 81</p> <p>Email: info@cpi.lu</p> </div> <div class="row mt-4 deleteResponsiveTablet"> <div class="suivez-nous"> <p>{% trans %}footer-text1{% endtrans %}:</p> <a href="https://www.linkedin.com/company/cpi-luxembourg" target="_blank"><img class="img-fluid" src="{{asset('img/accueil/linkedIn.png')}}" alt="linkedIn"></a> </div> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':80})}}"><button type="button" style="position:relative;top:20px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} </div> </div> <div class="col-xl-3 col-md-4 col-6 justify-content-center justify-content-lg-start "> <div class="txt2"> <p>FRANCE</p> </div> <div class="d-flex flex-wrap flex-xl-column flex-row"> <p>Buropole Services</p> <p>478, rue de la Découverte</p> <p>MiniParc 3 • CS 67624</p> <p>31676 LABEGE</p><br> <p>Tél.: +33 (0)5 81 91 90 42</p> <p>Email: info@cpi.lu</p> </div> </div> <div class="col-md-3 deleteResponsive deleteResponsiveTablet"> <div class="txt2"> <p>{% trans %}footer-text2{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':81})}}"><button type="button" style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</p> </div> <div class="row"> <div class="partenariat"> <div class="col"> <a href="#"><img class="img-fluid" src="{{asset('img/societe/09-Logo Wintool Logo.png')}}" alt="wintool"></a> </div> </div> </div> <div class="row mt-5"> <div class="partenariat"> <div class="col"> <a href="#"><img class="img-fluid" src="{{asset('img/societe/03-logo dassault system-01.png')}}" alt="delmia2"></a> </div> <br> </div> </div> </div> </div> </div></div><div class="footer2"> <div class="container "> <div class="row pt-1 d-flex flex-column flex-md-row " > <div class="col-md-4 col-12 d-flex justify-content-center justify-content-md-start justify-content-xl-center" > <p class="txt1">EVAMILL S.A. -©2023 - All Rights Reserved</p> </div> <div class="col-md-4 col-12 d-flex justify-content-center justify-content-md-start justify-content-xl-center deleteResponsive" > <style> .txt2 a:hover{ opacity: 0.8; } </style> <p class="txt2" style="position:relative;bottom:3px;"><a href="{{ path('politique',{'locale':app.request.locale})}}">{% trans %}footer-text3{% endtrans %}</a> | <a href="{{ path('cookies',{'locale':app.request.locale})}}" >Cookies</a></p> </div> <div class="col-md-4 col-12 d-flex justify-content-center justify-content-md-start justify-content-xl-center"> <p class="txt3" ><a href="https://www.piranha.lu/" target="_blank" style="text-decoration:none !important">Designed by Piranha et Petits Poissons <span id="footerRouge">Rouges</span></a></p> </div> </div> </div></div> <script src="{{ asset('js/jquery-latest.min.js')}}"></script> <script src="{{asset('slick/slick.js')}}"></script> <!-- pour les annimation de scroll --> {% if app.user%} {%else%} <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> {%endif%} <script src="https://cdn.ckeditor.com/ckeditor5/38.1.1/classic/ckeditor.js"></script> <script type="text/javascript" src="{{ asset('cookies/jquery.ihavecookies.js')}}"></script> <script type="text/javascript"> var options = { title: '{% if app.request.locale == 'fr' %}Acceptation des cookies{% else %}Cookie Policy{% endif %} ', message: "{% if app.request.locale == 'fr' %}Nous utilisons des cookies nécessaires au fonctionnement de ce site Web et également des cookies nous permettant d'analyser notre trafic.{% else %}We use cookies that are required for the operation of this website, they are cookies that enable us to analyze the website traffic.{% endif %}", delay: 600, expires: 1, link: "{{ path('politique',{'locale':app.request.locale})}}", onAccept: function(){ var myPreferences = $.fn.ihavecookies.cookie(); console.log('Yay! The following preferences were saved...'); console.log(myPreferences); }, uncheckBoxes: true, acceptBtnLabel: '{% if app.request.locale == 'fr' %}Tout accepter{% else %}Accept all{% endif %}', refuseBtnLabel: '{% if app.request.locale == 'fr' %}Tout refuser{% else %}Refuse all{% endif %}', advancedBtnLabel: '{% if app.request.locale == 'fr' %}Personnaliser{% else %}Customize{% endif %}', moreInfoLabel: '{% if app.request.locale == 'fr' %}En savoir plus{% else %}Read more{% endif %}', cookieTypesTitle: '{% if app.request.locale == 'fr' %}Choisissez les cookies que vous souhaitez accepter{% else %}Choose the cookies you want to accept{% endif %}', fixedCookieTypeLabel: '{% if app.request.locale == 'fr' %}Nécessaires{% else %}Required{% endif %}', fixedCookieTypeDesc: 'These are essential for the website to work correctly.', uncheckBoxes: true, cookieTypes: [ { type: '{% if app.request.locale == 'fr' %}Préférences{% else %}Preferences{% endif %}', value: 'préférences', description: 'Cookies related to site visits, browser types, etc.' }, { type: '{% if app.request.locale == 'fr' %}Fonctionnels{% else %}Functional{% endif %}', value: 'fonctionnels', description: 'Cookies related to site visits, browser types, etc.' }, { type: '{% if app.request.locale == 'fr' %}Marketing{% else %}Marketing{% endif %}', value: 'marketing', description: 'Cookies related to site visits, browser types, etc.' }, ], } $(document).ready(function() { $('body').ihavecookies(options); if ($.fn.ihavecookies.preference('marketing') === true) { console.log('This should run because marketing is accepted.'); } $('.ihavecookiesBtn').on('click', function(e){ e.preventDefault() $('body').ihavecookies(options, 'reinit'); }); }); // Toggle advanced cookie options $('body').on('click', '#gdpr-cookie-advanced', function(){ // Uncheck all checkboxes except for the disabled 'necessary' // one and set 'data-auto' to OFF for all. The user can now // select the cookies they want to accept. $('input[name="gdpr[]"]:not(:disabled)').attr('data-auto', 'off').prop('checked', false); $('#gdpr-cookie-types').slideDown('fast', function(){ $('#gdpr-cookie-advanced').prop('disabled', true); $('#gdpr-cookie-advanced').hide(); $('#gdpr-cookie-refuse').hide(); $('#gdpr-cookie-accept').html('{% if app.request.locale == 'fr' %}Accepter{% else %}Accept{% endif %}'); }); }); </script> <link href="{{ asset('cookies/cookies.css')}}" rel="stylesheet"> <script type="text/javascript"> $(document).ready(function(){ $('.slider-demo-formation').slick({ arrows: true, infinite:true, prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>', nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>', slidesToShow:4, slidesToScroll:4, responsive:[{ breakpoint:1024, settings:{ slidesToShow:2, } },{ breakpoint:900, settings:{ slidesToShow:1, } }], }); }); $(document).ready(function(){ $('.slider-demo-actu').slick({ arrows: true, infinite:true, prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>', nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>', slidesToShow:4, slidesToScroll:4, responsive:[{ breakpoint:1024, settings:{ slidesToShow:2, } },{ breakpoint:900, settings:{ slidesToShow:1, } }], }); }); $(document).ready(function(){ $('.slider-demo-partenaire').slick({ arrows: true, infinite:true, prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>', nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>', slidesToShow:4, slidesToScroll:4, responsive:[{ breakpoint:1024, settings:{ slidesToShow:2, } },{ breakpoint:900, settings:{ slidesToShow:1, } }], }); }); </script> <script type="text/javascript"> $(document).ready(function() { $('.imgAnimee img').captall({ backgroundColor: 'rgba(0,0,255,0.5)', animation: 'slide', caption:'<button class="EnSavoirPlus">En savoir plus</button>', textAlign:'center', slideTo:'center', paddingTop:300, paddingBottom:300, }); }); </script> <script type="text/javascript"> // Affiche flèche quand hover sur le paragraphe BOX 1 let box1 = document.querySelector('.box-doc-1'); let text1 = document.querySelector('.p1box'); let iconArrow1 = document.querySelector('.arrow1'); let box2 = document.querySelector('.box-doc-2'); let text2 = document.querySelector('.p2box'); let iconArrow2 = document.querySelector('.arrow2'); let box3 = document.querySelector('.box-doc-3'); let text3 = document.querySelector('.p3box'); let iconArrow3 = document.querySelector('.arrow3'); let box4 = document.querySelector('.box-doc-4'); let text4 = document.querySelector('.p4box'); let iconArrow4 = document.querySelector('.arrow4'); let box5 = document.querySelector('.box-doc-5'); let text5 = document.querySelector('.p5box'); let iconArrow5 = document.querySelector('.arrow5'); let box6 = document.querySelector('.box-doc-6'); let text6 = document.querySelector('.p6box'); let iconArrow6 = document.querySelector('.arrow6'); box1.addEventListener('mouseenter', function() { iconArrow1.style.visibility = 'visible'; text1.style.fontWeight = '500'; text1.style.color = '#fff'; }); box1.addEventListener('mouseleave', function() { iconArrow1.style.visibility = 'hidden'; text1.style.fontWeight = '300'; text1.style.color = 'rgba(255, 255, 255, 0.713)'; }); box2.addEventListener('mouseenter', function() { iconArrow2.style.visibility = 'visible'; text2.style.fontWeight = '500'; text2.style.color = '#fff'; }); box2.addEventListener('mouseleave', function() { iconArrow2.style.visibility = 'hidden'; text2.style.fontWeight = '300'; text2.style.color = 'rgba(255, 255, 255, 0.713)'; }); box3.addEventListener('mouseenter', function() { iconArrow3.style.visibility = 'visible'; text3.style.fontWeight = '500'; text3.style.color = '#fff'; }); box3.addEventListener('mouseleave', function() { iconArrow3.style.visibility = 'hidden'; text3.style.fontWeight = '300'; text3.style.color = 'rgba(255, 255, 255, 0.713)'; }); box4.addEventListener('mouseenter', function() { iconArrow4.style.visibility = 'visible'; text4.style.fontWeight = '500'; text4.style.color = '#fff'; }); box4.addEventListener('mouseleave', function() { iconArrow4.style.visibility = 'hidden'; text4.style.fontWeight = '300'; text4.style.color = 'rgba(255, 255, 255, 0.713)'; }); box5.addEventListener('mouseenter', function() { iconArrow5.style.visibility = 'visible'; text5.style.fontWeight = '500'; text5.style.color = '#fff'; }); box5.addEventListener('mouseleave', function() { iconArrow5.style.visibility = 'hidden'; text5.style.fontWeight = '300'; text5.style.color = 'rgba(255, 255, 255, 0.713)'; }); box6.addEventListener('mouseenter', function() { iconArrow6.style.visibility = 'visible'; text6.style.fontWeight = '500'; text6.style.color = '#fff'; }); box6.addEventListener('mouseleave', function() { iconArrow6.style.visibility = 'hidden'; text6.style.fontWeight = '300'; text6.style.color = 'rgba(255, 255, 255, 0.713)'; }); // Affiche flèche quand hover sur le paragraphe BOX 2 let box12 = document.querySelector('.box-doc-1-2'); let text12 = document.querySelector('.p1box-2'); let iconArrow12 = document.querySelector('.arrow1-2'); let box22 = document.querySelector('.box-doc-2-2'); let text22 = document.querySelector('.p2box-2'); let iconArrow22 = document.querySelector('.arrow2-2'); let box32 = document.querySelector('.box-doc-3-2'); let text32 = document.querySelector('.p3box-2'); let iconArrow32 = document.querySelector('.arrow3-2'); let box42 = document.querySelector('.box-doc-4-2'); let text42 = document.querySelector('.p4box-2'); let iconArrow42 = document.querySelector('.arrow4-2'); let box52 = document.querySelector('.box-doc-5-2'); let text52 = document.querySelector('.p5box-2'); let iconArrow52 = document.querySelector('.arrow5-2'); let box62 = document.querySelector('.box-doc-6-2'); let text62 = document.querySelector('.p6box-2'); let iconArrow62 = document.querySelector('.arrow6-2'); box12.addEventListener('mouseenter', function() { iconArrow12.style.visibility = 'visible'; text12.style.fontWeight = '500'; text12.style.color = '#fff'; }); box12.addEventListener('mouseleave', function() { iconArrow12.style.visibility = 'hidden'; text12.style.fontWeight = '300'; text12.style.color = 'rgba(255, 255, 255, 0.713)'; }); box22.addEventListener('mouseenter', function() { iconArrow22.style.visibility = 'visible'; text22.style.fontWeight = '500'; text22.style.color = '#fff'; }); box22.addEventListener('mouseleave', function() { iconArrow22.style.visibility = 'hidden'; text22.style.fontWeight = '300'; text22.style.color = 'rgba(255, 255, 255, 0.713)'; }); box32.addEventListener('mouseenter', function() { iconArrow32.style.visibility = 'visible'; text32.style.fontWeight = '500'; text32.style.color = '#fff'; }); box32.addEventListener('mouseleave', function() { iconArrow32.style.visibility = 'hidden'; text32.style.fontWeight = '300'; text32.style.color = 'rgba(255, 255, 255, 0.713)'; }); box42.addEventListener('mouseenter', function() { iconArrow42.style.visibility = 'visible'; text42.style.fontWeight = '500'; text42.style.color = '#fff'; }); box42.addEventListener('mouseleave', function() { iconArrow42.style.visibility = 'hidden'; text42.style.fontWeight = '300'; text42.style.color = 'rgba(255, 255, 255, 0.713)'; }); box52.addEventListener('mouseenter', function() { iconArrow52.style.visibility = 'visible'; text52.style.fontWeight = '500'; text52.style.color = '#fff'; }); box52.addEventListener('mouseleave', function() { iconArrow52.style.visibility = 'hidden'; text52.style.fontWeight = '300'; text52.style.color = 'rgba(255, 255, 255, 0.713)'; }); box62.addEventListener('mouseenter', function() { iconArrow62.style.visibility = 'visible'; text62.style.fontWeight = '500'; text62.style.color = '#fff'; }); box62.addEventListener('mouseleave', function() { iconArrow62.style.visibility = 'hidden'; text62.style.fontWeight = '300'; text62.style.color = 'rgba(255, 255, 255, 0.713)'; }); // Affiche flèche quand hover sur le paragraphe BOX 3 let box13 = document.querySelector('.box-doc-1-3'); let text13 = document.querySelector('.p1box-3'); let iconArrow13 = document.querySelector('.arrow1-3'); let box23 = document.querySelector('.box-doc-2-3'); let text23 = document.querySelector('.p2box-3'); let iconArrow23 = document.querySelector('.arrow2-3'); let box33 = document.querySelector('.box-doc-3-3'); let text33 = document.querySelector('.p3box-3'); let iconArrow33 = document.querySelector('.arrow3-3'); let box43 = document.querySelector('.box-doc-4-3'); let text43 = document.querySelector('.p4box-3'); let iconArrow43 = document.querySelector('.arrow4-3'); let box53 = document.querySelector('.box-doc-5-3'); let text53 = document.querySelector('.p5box-3'); let iconArrow53 = document.querySelector('.arrow5-3'); let box63 = document.querySelector('.box-doc-6-3'); let text63 = document.querySelector('.p6box-3'); let iconArrow63 = document.querySelector('.arrow6-3'); box13.addEventListener('mouseenter', function() { iconArrow13.style.visibility = 'visible'; text13.style.fontWeight = '500'; text13.style.color = '#fff'; }); box13.addEventListener('mouseleave', function() { iconArrow13.style.visibility = 'hidden'; text13.style.fontWeight = '300'; text13.style.color = 'rgba(255, 255, 255, 0.713)'; }); box23.addEventListener('mouseenter', function() { iconArrow23.style.visibility = 'visible'; text23.style.fontWeight = '500'; text23.style.color = '#fff'; }); box23.addEventListener('mouseleave', function() { iconArrow23.style.visibility = 'hidden'; text23.style.fontWeight = '300'; text23.style.color = 'rgba(255, 255, 255, 0.713)'; }); box33.addEventListener('mouseenter', function() { iconArrow33.style.visibility = 'visible'; text33.style.fontWeight = '500'; text33.style.color = '#fff'; }); box33.addEventListener('mouseleave', function() { iconArrow33.style.visibility = 'hidden'; text33.style.fontWeight = '300'; text33.style.color = 'rgba(255, 255, 255, 0.713)'; }); box43.addEventListener('mouseenter', function() { iconArrow43.style.visibility = 'visible'; text43.style.fontWeight = '500'; text43.style.color = '#fff'; }); box43.addEventListener('mouseleave', function() { iconArrow43.style.visibility = 'hidden'; text43.style.fontWeight = '300'; text43.style.color = 'rgba(255, 255, 255, 0.713)'; }); box53.addEventListener('mouseenter', function() { iconArrow53.style.visibility = 'visible'; text53.style.fontWeight = '500'; text53.style.color = '#fff'; }); box53.addEventListener('mouseleave', function() { iconArrow53.style.visibility = 'hidden'; text53.style.fontWeight = '300'; text53.style.color = 'rgba(255, 255, 255, 0.713)'; }); box63.addEventListener('mouseenter', function() { iconArrow63.style.visibility = 'visible'; text63.style.fontWeight = '500'; text63.style.color = '#fff'; }); box63.addEventListener('mouseleave', function() { iconArrow63.style.visibility = 'hidden'; text63.style.fontWeight = '300'; text63.style.color = 'rgba(255, 255, 255, 0.713)'; }); // Affiche flèche quand hover sur le paragraphe BOX 4 let box14 = document.querySelector('.box-doc-1-4'); let text14 = document.querySelector('.p1box-4'); let iconArrow14 = document.querySelector('.arrow1-4'); let box24 = document.querySelector('.box-doc-2-4'); let text24 = document.querySelector('.p2box-4'); let iconArrow24 = document.querySelector('.arrow2-4'); let box34 = document.querySelector('.box-doc-3-4'); let text34 = document.querySelector('.p3box-4'); let iconArrow34 = document.querySelector('.arrow3-4'); let box44 = document.querySelector('.box-doc-4-4'); let text44 = document.querySelector('.p4box-4'); let iconArrow44 = document.querySelector('.arrow4-4'); let box54 = document.querySelector('.box-doc-5-4'); let text54 = document.querySelector('.p5box-4'); let iconArrow54 = document.querySelector('.arrow5-4'); let box64 = document.querySelector('.box-doc-6-4'); let text64 = document.querySelector('.p6box-4'); let iconArrow64 = document.querySelector('.arrow6-4'); box14.addEventListener('mouseenter', function() { iconArrow14.style.visibility = 'visible'; text14.style.fontWeight = '500'; text14.style.color = '#fff'; }); box14.addEventListener('mouseleave', function() { iconArrow14.style.visibility = 'hidden'; text14.style.fontWeight = '300'; text14.style.color = 'rgba(255, 255, 255, 0.713)'; }); box24.addEventListener('mouseenter', function() { iconArrow24.style.visibility = 'visible'; text24.style.fontWeight = '500'; text24.style.color = '#fff'; }); box24.addEventListener('mouseleave', function() { iconArrow24.style.visibility = 'hidden'; text24.style.fontWeight = '300'; text24.style.color = 'rgba(255, 255, 255, 0.713)'; }); box34.addEventListener('mouseenter', function() { iconArrow34.style.visibility = 'visible'; text34.style.fontWeight = '500'; text34.style.color = '#fff'; }); box34.addEventListener('mouseleave', function() { iconArrow34.style.visibility = 'hidden'; text34.style.fontWeight = '300'; text34.style.color = 'rgba(255, 255, 255, 0.713)'; }); box44.addEventListener('mouseenter', function() { iconArrow44.style.visibility = 'visible'; text44.style.fontWeight = '500'; text44.style.color = '#fff'; }); box44.addEventListener('mouseleave', function() { iconArrow44.style.visibility = 'hidden'; text44.style.fontWeight = '300'; text44.style.color = 'rgba(255, 255, 255, 0.713)'; }); box54.addEventListener('mouseenter', function() { iconArrow54.style.visibility = 'visible'; text54.style.fontWeight = '500'; text54.style.color = '#fff'; }); box54.addEventListener('mouseleave', function() { iconArrow54.style.visibility = 'hidden'; text54.style.fontWeight = '300'; text54.style.color = 'rgba(255, 255, 255, 0.713)'; }); box64.addEventListener('mouseenter', function() { iconArrow64.style.visibility = 'visible'; text64.style.fontWeight = '500'; text64.style.color = '#fff'; }); box64.addEventListener('mouseleave', function() { iconArrow64.style.visibility = 'hidden'; text64.style.fontWeight = '300'; text64.style.color = 'rgba(255, 255, 255, 0.713)'; }); // Affiche flèche quand hover sur le paragraphe BOX 5 let box15 = document.querySelector('.box-doc-1-5'); let text15 = document.querySelector('.p1box-5'); let iconArrow15 = document.querySelector('.arrow1-5'); let box25 = document.querySelector('.box-doc-2-5'); let text25 = document.querySelector('.p2box-5'); let iconArrow25 = document.querySelector('.arrow2-5'); let box35 = document.querySelector('.box-doc-3-5'); let text35 = document.querySelector('.p3box-5'); let iconArrow35 = document.querySelector('.arrow3-5'); let box45 = document.querySelector('.box-doc-4-5'); let text45 = document.querySelector('.p4box-5'); let iconArrow45 = document.querySelector('.arrow4-5'); let box55 = document.querySelector('.box-doc-5-5'); let text55 = document.querySelector('.p5box-5'); let iconArrow55 = document.querySelector('.arrow5-5'); let box65 = document.querySelector('.box-doc-6-5'); let text65 = document.querySelector('.p6box-5'); let iconArrow65 = document.querySelector('.arrow6-5'); box15.addEventListener('mouseenter', function() { iconArrow15.style.visibility = 'visible'; text15.style.fontWeight = '500'; text15.style.color = '#fff'; }); box15.addEventListener('mouseleave', function() { iconArrow15.style.visibility = 'hidden'; text15.style.fontWeight = '300'; text15.style.color = 'rgba(255, 255, 255, 0.713)'; }); box25.addEventListener('mouseenter', function() { iconArrow25.style.visibility = 'visible'; text25.style.fontWeight = '500'; text25.style.color = '#fff'; }); box25.addEventListener('mouseleave', function() { iconArrow25.style.visibility = 'hidden'; text25.style.fontWeight = '300'; text25.style.color = 'rgba(255, 255, 255, 0.713)'; }); box35.addEventListener('mouseenter', function() { iconArrow35.style.visibility = 'visible'; text35.style.fontWeight = '500'; text35.style.color = '#fff'; }); box35.addEventListener('mouseleave', function() { iconArrow35.style.visibility = 'hidden'; text35.style.fontWeight = '300'; text35.style.color = 'rgba(255, 255, 255, 0.713)'; }); box45.addEventListener('mouseenter', function() { iconArrow45.style.visibility = 'visible'; text45.style.fontWeight = '500'; text45.style.color = '#fff'; }); box45.addEventListener('mouseleave', function() { iconArrow45.style.visibility = 'hidden'; text45.style.fontWeight = '300'; text45.style.color = 'rgba(255, 255, 255, 0.713)'; }); box55.addEventListener('mouseenter', function() { iconArrow55.style.visibility = 'visible'; text55.style.fontWeight = '500'; text55.style.color = '#fff'; }); box55.addEventListener('mouseleave', function() { iconArrow55.style.visibility = 'hidden'; text55.style.fontWeight = '300'; text55.style.color = 'rgba(255, 255, 255, 0.713)'; }); box65.addEventListener('mouseenter', function() { iconArrow65.style.visibility = 'visible'; text65.style.fontWeight = '500'; text65.style.color = '#fff'; }); box65.addEventListener('mouseleave', function() { iconArrow65.style.visibility = 'hidden'; text65.style.fontWeight = '300'; text65.style.color = 'rgba(255, 255, 255, 0.713)'; }); // gère les différent catégorie challenge let buttonChallenge1 = document.querySelector('.challenge-button-1'); let buttonChallenge2 = document.querySelector('.challenge-button-2'); let buttonChallenge3 = document.querySelector('.challenge-button-3'); let buttonChallenge4 = document.querySelector('.challenge-button-4'); let buttonChallenge5 = document.querySelector('.challenge-button-5'); let containerDoc1 = document.querySelector('.container-document-1'); let containerDoc2 = document.querySelector('.container-document-2'); let containerDoc3 = document.querySelector('.container-document-3'); let containerDoc4 = document.querySelector('.container-document-4'); let containerDoc5 = document.querySelector('.container-document-5'); buttonChallenge1.addEventListener('click', function() { containerDoc1.style.display = 'block'; containerDoc2.style.display = 'none'; containerDoc3.style.display = 'none'; containerDoc4.style.display = 'none'; containerDoc5.style.display = 'none'; buttonChallenge1.style.backgroundColor = '#2462FF'; buttonChallenge2.style.backgroundColor = 'transparent'; buttonChallenge3.style.backgroundColor = 'transparent'; buttonChallenge4.style.backgroundColor = 'transparent'; buttonChallenge5.style.backgroundColor = 'transparent'; }); buttonChallenge2.addEventListener('click', function() { containerDoc2.style.display = 'block'; containerDoc1.style.display = 'none'; containerDoc3.style.display = 'none'; containerDoc4.style.display = 'none'; containerDoc5.style.display = 'none'; buttonChallenge1.style.backgroundColor = 'transparent'; buttonChallenge2.style.backgroundColor = '#2462FF'; buttonChallenge3.style.backgroundColor = 'transparent'; buttonChallenge4.style.backgroundColor = 'transparent'; buttonChallenge5.style.backgroundColor = 'transparent'; }); buttonChallenge3.addEventListener('click', function() { containerDoc3.style.display = 'block'; containerDoc1.style.display = 'none'; containerDoc2.style.display = 'none'; containerDoc4.style.display = 'none'; containerDoc5.style.display = 'none'; buttonChallenge1.style.backgroundColor = 'transparent'; buttonChallenge2.style.backgroundColor = 'transparent'; buttonChallenge3.style.backgroundColor = '#2462FF'; buttonChallenge4.style.backgroundColor = 'transparent'; buttonChallenge5.style.backgroundColor = 'transparent'; }); buttonChallenge4.addEventListener('click', function() { containerDoc4.style.display = 'block'; containerDoc1.style.display = 'none'; containerDoc2.style.display = 'none'; containerDoc3.style.display = 'none'; containerDoc5.style.display = 'none'; buttonChallenge1.style.backgroundColor = 'transparent'; buttonChallenge2.style.backgroundColor = 'transparent'; buttonChallenge3.style.backgroundColor = 'transparent'; buttonChallenge4.style.backgroundColor = '#2462FF'; buttonChallenge5.style.backgroundColor = 'transparent'; }); buttonChallenge5.addEventListener('click', function() { containerDoc5.style.display = 'block'; containerDoc1.style.display = 'none'; containerDoc2.style.display = 'none'; containerDoc3.style.display = 'none'; containerDoc4.style.display = 'none'; buttonChallenge1.style.backgroundColor = 'transparent'; buttonChallenge2.style.backgroundColor = 'transparent'; buttonChallenge3.style.backgroundColor = 'transparent'; buttonChallenge4.style.backgroundColor = 'transparent'; buttonChallenge5.style.backgroundColor = '#2462FF'; }); let circle2 = document.querySelector('.circle-container-2'); let circle4 = document.querySelector('.circle-container-4'); let circle5 = document.querySelector('.circle-container-5'); let circle6 = document.querySelector('.circle-container-6'); let imgCircle2 = document.querySelector('.img-circle-2'); let imgCircle4 = document.querySelector('.img-circle-4'); let imgCircle5 = document.querySelector('.img-circle-5'); let imgCircle6 = document.querySelector('.img-circle-6'); circle6.addEventListener("mouseenter", function() { imgCircle6.src = "img/accueil/cpi-industrialisation-hover.svg"; }); circle6.addEventListener('mouseleave', function() { imgCircle6.src = "img/accueil/cpi-industrialisation.svg"; }); circle5.addEventListener("mouseenter", function() { imgCircle5.src = "img/accueil/cpi-formation-hover.svg"; }); circle5.addEventListener('mouseleave', function() { imgCircle5.src = "img/accueil/cpi-formation.svg"; }); circle4.addEventListener("mouseenter", function() { imgCircle4.src = "img/accueil/cpi-recrutement-hover.svg"; }); circle4.addEventListener('mouseleave', function() { imgCircle4.src = "img/accueil/cpi-recrutement.svg"; }); circle2.addEventListener("mouseenter", function() { imgCircle2.src = "img/accueil/cpi-digital-services-hover.svg"; }); circle2.addEventListener('mouseleave', function() { imgCircle2.src = "img/accueil/cpi-digital-services.svg"; }); </script> </script> <script type="text/javascript"> $(document).ready(function() { $('.slider-demo-galerie').slick({ arrows: true, infinite:true, autoplay: true, // Ajout de l'option autoplay autoplaySpeed: 4000, // Durée de chaque diapositive en millisecondes slidesToShow:4, slidesToScroll:4, prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>', nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>', responsive:[{ breakpoint:1400, settings:{ slidesToShow:3, slidesToScroll:3, } },{ breakpoint:1200, settings:{ slidesToShow:2, slidesToScroll:2, } }, { breakpoint:769, settings:{ slidesToShow:1, slidesToScroll:1, } }], }); $('.slider-demo-actu').slick({ arrows: true, infinite: true, prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>', nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>', slidesToShow: 4, slidesToScroll: 4, responsive:[{ breakpoint:1400, settings:{ slidesToShow:3, slidesToScroll:3, } },{ breakpoint:1200, settings:{ slidesToShow:2, slidesToScroll:2, } }, { breakpoint:769, settings:{ slidesToShow:1, slidesToScroll:1, } }], }); }); </script> {% if app.user%} {%else%} <script> AOS.init(); </script> {%endif%}<script> $(document).ready(function(){ $('.carousel').slick({ prevArrow: '<button type="button" class="slick-prev"><img src="{{asset('img/arrow-g.svg')}}"></button>', nextArrow: '<button type="button" class="slick-next"><img src="{{asset('img/arrow-d.svg')}}"></button>' });});</script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script> </body></html>