<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=100%, initial-scale=1.0"> <title>CPI | Home</title> <link href="{{asset('css/accueil.css')}}" rel="stylesheet"/> <link href="{{asset('css/style.css')}}" rel="stylesheet"/> <link rel="icon" href="{{asset('img/favicon-16x16.png')}}"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <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 href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <script src="https://kit.fontawesome.com/d2408fdc07.js" crossorigin="anonymous"></script> </head> <body><style> header { background-color:transparent !important; z-index: 99!important; } .nav li a:hover{ color:red !important } header nav li a:hover { color:#00CEFF; !important } .logoImg { width:200px!important; } .slick-slide img { width: 100% !important; } .joinUsResp { border: white solid 2px!important; } @media screen and (max-width: 1200px){ .text-manu{ padding-right: 0px!important; margin-bottom:60px!important; } } @media screen and (max-width: 770px){ .text-manu{ margin-bottom:20px!important; } .cartePartenaire{ position: relative; top:-30px; } } </style>{# CMS LOAD ADMIN MODE #}{% if app.user %} {% include 'cms.html.twig' %} <style> .stuck{ min-height:110px; } .circle-services-6 h4 { bottom: -21px!important; } </style>{% endif %} <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:50%;margin-left:20px;" 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;cursor:pointer;"></i> </div> <div class="div d-flex"> <form style="margin-bottom:30px;" action="{{path('resultatRecherche')}}" style="border:1px solid white!important" class="formResp d-flex w-100" method="post" > <input type="search" name="search" class="searchResp" placeholder="Tapez votre recherche"> <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: 8px;"> <li> <a class="nav-link mb-0 {% 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 style="margin-bottom:0!important" class="nav-link formanavlink {% 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 d-flex"> <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:14px!important;" >{% trans %}footer-text3{% endtrans %}</a> | <a href="{{ path('cookies',{'locale':app.request.locale})}}" style="font-size:14px!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 side-bar-responsive"> <a href="{{path('app_home')}}"> <img src="{{asset('img/industrialisation/Groupe 13.svg')}}" alt="logo" style="width:50%;cursor:pointer;"> </a> <div class="d-flex"> <div class="radio-nav-ac" style="margin-right:15px;"> <a href="{{path('changerLocale',{'locale':'fr'})}}" style="color:white;text-decoration:none;" class="{% if app.request.locale == 'fr' %}radio-nav-active-ac{% endif %}">FR</a> <a href="{{path('changerLocale',{'locale':'en'})}}" style="color:white;text-decoration:none;" class="{% if app.request.locale == 'en' %}radio-nav-active-ac{% endif %}">EN</a> </div> <img src="{{asset('img/burger-menu-svgrepo-com.png')}}" 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><script> // Fonction pour changer la couleur de fondfunction changeHeaderBackground() { const scrollPosition = window.pageYOffset; // Position de défilement vertical var e = document.getElementById("myHeader2"); // Changer la couleur de fond en fonction de la position de défilement if (scrollPosition > 100) { $("#myHeader2").css("background", "#0039fe"); $("#myHeader2").css("border-bottom", "solid 1px #fff"); $(".logoImg").css('width','150px'); } else { $("#myHeader2").css("background-color", "transparent"); $("#myHeader2").css("border-bottom", "none"); $(".logoImg").css('width','300px');; }}// Écouter l'événement de défilementwindow.addEventListener("scroll", changeHeaderBackground);</script> <header> <div class="navigation-header container-fluid" id="myHeader2"> <div class="row py-4 d-flex" id="header" style="margin-left:8%; margin-right:3%"> <div class=" col-4 col-md-2 align-items-center justify-content-center justify-content-md-end" id="logo-responsive"> <div class="logo"> <a><img class="d-block logoImg" src="{{asset('img/accueil/Groupe 134.svg')}}" alt="accueil" /></a> </div> </div> <div class="col-10 d-flex justify-content-end"> <nav class="navbar navbar-expand-lg " style="position: relative;top: 6px;"> <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="display: flex; flex-direction: row;"> <li class="nav-item nav-edit d-flex flex-column justify-content-between align-items-center"> {% 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" aria-current="page" href="{{path('app_industrialisation',{'locale':app.request.locale})}}">{% trans %}navbar-menu-industrialisation{% endtrans %}</a> <div class='littleCircle'></div> </li> <li class="nav-item nav-edit d-flex flex-column justify-content-between align-items-center"> {% 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" href="{{path('formations',{'locale':app.request.locale})}}">{% trans %}navbar-menu-formation{% endtrans %}</a> <div class='littleCircle'></div> </li> <li class="nav-item nav-edit d-flex flex-column align-items-center"> {% 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" href="{{path('app_digitalManufacturingServices',{'locale':app.request.locale})}}">{% trans %}navbar-menu-digital{% endtrans %}</a> <div class='littleCircle littleCircleBig'></div> </li> {% if app.user %} <li class="nav-item nav-edit d-flex flex-column align-items-center e"> {% 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"> <div class="d-flex flex-column align-items-center" style="padding:0;"> <a class="nav-link {% if app.request.get('_route') == 'app_manufacturingERP' %}active{% endif %}" style="cursor:pointer">{% trans %}navbar-manufacturingerp{% endtrans %}</a> <div class='littleCircle littleCircleBig'></div> </div> <div class="dropdown-content "> <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 justify-content-between align-items-center"> {% 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" href="{{path('app_baseOutils',{'locale':app.request.locale})}}">{% trans %}navbar-menu-baseoutils{% endtrans %}</a> <div class='littleCircle'></div> </li> <li class="nav-item nav-edit d-flex flex-column justify-content-between align-items-center"> {% 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" href="{{path('app_societe',{'locale':app.request.locale})}}">{% trans %}navbar-menu-societe{% endtrans %}</a> <div class='littleCircle'></div> </li> <li class="nav-item nav-edit d-flex flex-column justify-content-between align-items-center"> {% 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" href="{{path('app_actualites',{'locale':app.request.locale})}}">{% trans %}navbar-menu-actu{% endtrans %}</a> <div class='littleCircle'></div> </li> <li class="nav-item nav-edit d-flex flex-column justify-content-between align-items-center"> {% 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" href="{{path('app_contact',{'locale':app.request.locale})}}">{% trans %}navbar-menu-contact{% endtrans %}</a> <div class='littleCircle'></div> </li> <div class="joinUs-index"> <li class="nav-item"> <a class="nav-link" href="{{path('app_joinus',{'locale':app.request.locale})}}">JOIN US</a> </li> </div> <div class="radio-nav-ac"> <a href="{{path('changerLocale',{'locale':'fr'})}}" style="color:white;text-decoration:none;" class="{% if app.request.locale == 'fr' %}radio-nav-active-ac{% endif %}">FR</a> <a href="{{path('changerLocale',{'locale':'en'})}}" style="color:white;text-decoration:none;" class="{% if app.request.locale == 'en' %}radio-nav-active-ac{% 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 style="color:white!important" 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="Tapez votre recherche"> <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> </header> <main style="overflow:hidden"> <div class="navigation" style="display:none"> <div class="container"> <div class="row"> <div class="col-3"> <div class="logo"> <a href ="#"><img class="d-block w-100 img-fluid" src="{{asset('img/accueil/Groupe 134.svg')}}" alt="accueil" /></a> </div> </div> <div class="col-8 offset-1 d-flex justify-content-end"> <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 "> <li class="nav-item"> <a class="nav-link " aria-current="page" href="{{path('app_industrialisation',{'locale':app.request.locale})}}">{% trans %}navbar-menu-industrialisation{% endtrans %}</a> </li> <li class="nav-item"> <a class="nav-link" href="{{path('formations',{'locale':app.request.locale})}}">{% trans %}navbar-menu-formation{% endtrans %}</a> </li> <li class="nav-item"> <a class="nav-link" href="{{path('app_digitalManufacturingServices',{'locale':app.request.locale})}}">{% trans %}navbar-menu-digital{% endtrans %}</a> </li> <li class="nav-item"> <a class="nav-link" href="{{path('app_manufacturingERP',{'locale':app.request.locale})}}">{% trans %}navbar-manufacturingerp{% endtrans %}</a> </li> <li class="nav-item"> <a class="nav-link" href="{{path('app_baseOutils',{'locale':app.request.locale})}}">{% trans %}navbar-menu-baseoutils{% endtrans %}</a> </li> <li class="nav-item"> <a class="nav-link" href="{{path('app_societe',{'locale':app.request.locale})}}">{% trans %}navbar-menu-societe{% endtrans %}</a> </li> <li class="nav-item"> <a class="nav-link" href="{{path('app_actualites',{'locale':app.request.locale})}}">{% trans %}navbar-menu-actu{% endtrans %}</a> </li> <li class="nav-item"> <a class="nav-link" href="{{path('app_contact',{'locale':app.request.locale})}}">{% trans %}navbar-menu-contact{% endtrans %}</a> </li> <div class="joinUs"> <li class="nav-item"> <a class="nav-link" href="{{path('app_joinus',{'locale':app.request.locale})}}">JOIN US</a> </li> </div> </ul> </div> </div> </nav> </div> </div> </div> </div> <div class="accueil "> <div data-aos="fade-up" data-aos-duration="1000" class="carousel mb-5" style="padding-top: 250px;min-height: 860px; max-height: 485px;margin-bottom:0px;"> <div class="container"> <div class="row align-items-center"> <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> {% set i = 0 %} {% for res in actus %} {% set i = i + 1 %} {% set titreNew = res.titreFr %} <div class="carousel-item {% if i == 1 %}active{% endif %}"> <div class="container"> <div class="row justify-content-center responsive-carousel"> <div class="col-lg-4 col-lg-offset-1 d-flex justify-content-center justify-content-md-start align-items-start"> <div class="circle-container-carousel"> <img src=" {% if res.image == 'ok' %} {{asset('uploads/actualites/cpi-actu-defaut.jpg')}} {% else %} {{asset('uploads/actualites/'~res.image)}} {% endif %} " class="imgCircle" alt="..."> </div> </div> <div class="col-12 col-md-8 d-flex justify-content-center align-self-center "> <div class="text "> <div class="row "> <div class="p1"> <p style="font-family: 'Open Sans', sans-serif; color:white !important;">{% if app.request.locale == 'fr' %}{{res.titreFr}}{% else %}{{res.titreEn}}{% endif %}</p> </div> </div> <div class="row"> <div class="p2"> <div class="traitBlanc2"></div> </div> </div> <div class="row"> <div class="p3"> <p>{% if app.request.locale == 'fr' %}{{res.introFr|raw}}{% else %}{{res.introEn|raw}}{% endif %}</p> </div> </div> <div class="row pt-3 noPaddingResp"> <div class="p4 d-flex justify-content-start align-items-start"> {% set modifiedUrl = path('actualitesD', {'id': res.id, 'titre': titreNew, 'locale': app.request.locale})|replace({'%': '_'}) %} <a href="{{ modifiedUrl }}"> <button type="button" class="btn btn-outline-light buttonMore">{% trans %}accueil-carousel-bouton{% endtrans %}</button>{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':79})}}"><button type="button" style="margin-top:35px;margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</a> </div> </div> </div> </div> </div> </div> </div> {% endfor %} </div> </div> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev" style="padding-right:50px;margin-right:10px; opacity: 1; z-index:90!important;"> <img class="arrowCarousel" src="{{asset('img/arrow-g.svg')}}" style="width: 40px;"> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next" style="padding-left:100px;margin-right:10px; opacity: 1; z-index:90!important;"> <img class="arrowCarousel" src="{{asset('img/arrow-d.svg')}}" style="width: 40px;"> <span class="visually-hidden">Next</span> </button> <script> let arrowG = document.querySelector('.carousel-control-prev'); let arrowD = document.querySelector('.carousel-control-next'); arrowG.addEventListener('mouseover', function() { let img = arrowG.querySelector('.arrowCarousel'); img.src = "{{asset('img/arrow-g-hover.svg')}}"; }); arrowG.addEventListener('mouseout', function() { let img = arrowG.querySelector('.arrowCarousel'); img.src = "{{asset('img/arrow-g.svg')}}"; }); arrowD.addEventListener('mouseover', function() { let img = arrowD.querySelector('.arrowCarousel'); img.src = "{{asset('img/arrow-d-hover.svg')}}"; }); arrowD.addEventListener('mouseout', function() { let img = arrowD.querySelector('.arrowCarousel'); img.src = "{{asset('img/arrow-d.svg')}}"; }); </script> <div class="lesservices " style="padding-top:60px"> <div class="container"> <div class="row"> <div class="col-12"> <div class="row text-light"> <div class="col"> <div class="row"> <h1 data-aos="fade-right" data-aos-duration="1000" class="h1Resp2 pb-4" >{% trans %}titre-driving{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':62})}}"><button type="button" style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h1> <div class="col-lg-5 col-6 traitBlanc4"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="container-top-services d-flex flex-column flex-md-row" > <div class="col-lg-6 "> <p class="text-manu" data-aos="fade-right" data-aos-duration="1000" style="padding-right: 170px;">{% trans %}text-driving{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':63})}}"><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="col-lg-6 d-flex "> <a href="{{path('app_industrialisation',{'locale':app.request.locale})}}" style="text-decoration:none;!important"> <div style="text-decoration:none;" data-aos="fade-up" data-aos-duration="1000" class="circle-services circle-services-1 d-flex flex-column justify-content-between align-items-center text-center"> <img style="text-decoration:none;" class="" src="{{asset('img/accueil/services1.svg')}}" alt=""> <h4 style="text-decoration:none;">{% trans %}circle-text-1{% endtrans %}</h4> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':73})}}"><button type="button" style="position:relative;bottom:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} </div> </a> <a href="{{path('formations',{'locale':app.request.locale})}}" style="text-decoration:none;"> <div data-aos="fade-up" data-aos-duration="1000" class="circle-services circle-services-2 d-flex flex-column justify-content-between align-items-center text-center"> <img class="" src="{{asset('img/accueil/services4.svg')}}" alt=""> <h4 style="text-decoration:none;">{% trans %}circle-text-2{% endtrans %}</h4> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':74})}}"><button type="button" style="position:relative;bottom:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} </div> </a> </div> </div> <div class="container-bottom-services d-flex flex-column flex-md-row "> <div class="col-lg-6 d-flex "> <a href="{{path('app_manufacturingERP',{'locale':app.request.locale})}}" style="text-decoration:none;{% if app.user %}{% else %}visibility:hidden{% endif %}" class=""> <div data-aos="fade-up" data-aos-duration="1000" class="circle-services circle-services-3 d-flex flex-column justify-content-between align-items-center text-center"> <img class="" src="{{asset('img/accueil/services3.png')}}" alt=""> <h4 style="text-decoration:none;">{% trans %}circle-text-3{% endtrans %}</h4> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':75})}}"><button type="button" style="position:relative;bottom:30px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} </div> </a> <a href="{{path('app_baseOutils',{'locale':app.request.locale})}}" style="text-decoration:none;"> <div data-aos="fade-up" data-aos-duration="1000" class="circle-services circle-services-4 d-flex flex-column justify-content-between align-items-center text-center"> <img class="" src="{{asset('img/accueil/services2.png')}}" alt=""> <h4 style="text-decoration:none;">{% trans %}circle-text-4{% endtrans %}</h4> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':76})}}"><button type="button" style="position:relative;bottom:25px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} </div> </a> </div> <div class="col-lg-6 d-flex"> <a href="{{path('app_digitalManufacturingServices',{'locale':app.request.locale})}}" style="text-decoration:none;"> <div data-aos="fade-up" data-aos-duration="1000" class="circle-services circle-services-5 d-flex flex-column justify-content-between align-items-center text-center"> <img class="" src="{{asset('img/accueil/services5.svg')}}" alt=""> <h4>{% trans %}circle-text-5{% endtrans %}</h4> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':77})}}"><button type="button" style="position:relative;bottom:50px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} </div> </a> <a href="{{path('app_digitalManufacturingServices',{'locale':app.request.locale})}}" style="text-decoration:none;"> <div data-aos="fade-up" data-aos-duration="1000" class="circle-services circle-services-6 d-flex flex-column justify-content-between align-items-center text-center"> <img class="" src="{{asset('img/accueil/services6.svg')}}" alt=""> <h4>{% trans %}circle-text-6{% endtrans %}</h4> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':78})}}"><button type="button" style="position:relative;bottom:5px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %} </div> </a> </div> </div> </div> </div> </div> <script> let circleServices3 = document.querySelector('.circle-services-3'); let circleServices3h4 = document.querySelector('.circle-services-3 h4'); circleServices3.addEventListener('mouseover', () => { circleServices3h4.style.color = '#0C24B3'; }); circleServices3.addEventListener('mouseout', () => { circleServices3h4.style.color = 'white'; }); let circleServices2 = document.querySelector('.circle-services-2'); let circleServices2h4 = document.querySelector('.circle-services-2 h4'); let circleServices2img = document.querySelector('.circle-services-2 img'); circleServices2.addEventListener('mouseover', () => { circleServices2h4.style.color = 'WHITE'; circleServices2img.src = "{{asset('img/accueil/services4hover.svg')}}"; }); circleServices2.addEventListener('mouseout', () => { circleServices2h4.style.color = 'WHITE'; circleServices2img.src = "{{asset('img/accueil/services4.svg')}}"; }); let circleServices1 = document.querySelector('.circle-services-1'); let circleServices1h4 = document.querySelector('.circle-services-1 h4'); let circleServices1img = document.querySelector('.circle-services-1 img'); circleServices1.addEventListener('mouseover', () => { circleServices1h4.style.color = 'white'; circleServices1img.src = "{{asset('img/accueil/services1hover.svg')}}"; }); circleServices1.addEventListener('mouseout', () => { circleServices1h4.style.color = 'WHITE'; circleServices1img.src = "{{asset('img/accueil/services1.svg')}}"; }); let circleServices4 = document.querySelector('.circle-services-4'); let circleServices4h4 = document.querySelector('.circle-services-4 h4'); circleServices4.addEventListener('mouseout', () => { circleServices4h4.style.color = 'white'; }); let circleServices5 = document.querySelector('.circle-services-5'); let circleServices5img = document.querySelector('.circle-services-5 img'); circleServices5.addEventListener('mouseover', () => { circleServices5img.src = "{{asset('img/accueil/services5hover.svg')}}"; }); circleServices5.addEventListener('mouseout', () => { circleServices5img.src = "{{asset('img/accueil/services5.svg')}}"; }); let circleServices6 = document.querySelector('.circle-services-6'); let circleServices6img = document.querySelector('.circle-services-6 img'); circleServices6.addEventListener('mouseover', () => { circleServices6img.src = "{{asset('img/accueil/services6hover.svg')}}"; }); circleServices6.addEventListener('mouseout', () => { circleServices6img.src = "{{asset('img/accueil/services6.svg')}}"; }); </script> <div class="challenge" style="padding-top:100px"> <div class="container"> <div class="row"> <div class="col-12"> <div class="row text-light"> <div class="col"> <div class="row"> <h1 data-aos="fade-right" data-aos-duration="1000" class="h1Resp2 pb-4" style="padding-right:250px!important;" >{% trans %}titre-problématique-indus{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':61})}}"><button type="button" style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h1> <div class="col-xl-6 col-8 traitBlanc4"></div> </div> </div> </div> </div> </div> </div> <div class="container d-flex flex-xl-row flex-column" style="margin-top:40px;margin-bottom:40px;"> <div data-aos="fade-up" data-aos-duration="1000" class="container-gauche d-flex flex-column col-xl-2 col-12"> <div class="button-cg button1-cg d-flex flex-xl-column"> <h3>{% trans %}problematique-titre-1{% endtrans %}</h3> <div class="button-hr button1-hr"></div> </div> <div class="button-cg button2-cg d-flex flex-xl-column"> <h3>{% trans %}problematique-titre-2{% endtrans %}</h3> <div class="button-hr button2-hr"></div> </div> <div class="button-cg button3-cg d-flex flex-xl-column"> <h3>{% trans %}problematique-titre-3{% endtrans %}</h3> <div class="button-hr button3-hr"></div> </div> <div class="button-cg button4-cg d-flex flex-xl-column"> <h3>{% trans %}problematique-titre-4{% endtrans %}</h3> <div class="button-hr button4-hr"></div> </div> <div class="button-cg button5-cg d-flex flex-xl-column"> <h3>{% trans %}problematique-titre-5{% endtrans %}</h3> <div class="button-hr button5-hr"></div> </div> </div> <div data-aos="fade-up" data-aos-duration="1000" class="container-droite container-droite-1 col-xl-10 col-12" > <div class="col-12 d-flex flex-column title-cd title-cd-1"> <h3>{% trans %}problematique-titre-1{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':4})}}"><button type="button" style="margin-left:5px" class="btn btn-warning" ><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h3> <div class="button-hr button1-hr"></div> </div> <div class="col-12 d-flex flex-wrap container-text-cd container-text-cd-1"> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToIndustri()" {% if dico[9-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part1-text1{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':9})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToIndustri()" {% if dico[10-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part1-text2{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':10})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text cd-block-text-3" onclick="redirectToIndustri()" {% if dico[11-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part1-text3{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':11})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToIndustri()" {% if dico[12-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part1-text4{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':12})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToIndustri()" {% if dico[13-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part1-text5{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':13})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div class="d-flex align-items-end"> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToIndustri()" {% if dico[14-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part1-text6{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':14})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div class="d-flex align-items-end"> <div class="hr-block-text"></div> </div> </div> <script> function redirectToIndustri() { window.location.href = '{{path('app_industrialisation',{'locale':app.request.locale})}}'; } </script> </div> </div> <div class="container-droite container-droite-2 col-xl-10 col-12" > <div class="col-12 d-flex flex-column title-cd title-cd-1"> <h3>{% trans %}problematique-titre-2{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':5})}}"><button type="button" style="margin-left:5px" class="btn btn-warning" ><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h3> <div class="button-hr button2-hr"></div> </div> <div class="col-12 d-flex flex-wrap container-text-cd container-text-cd-1"> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToForma()" {% if dico[15-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part2-text1{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':15})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToForma()" {% if dico[16-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part2-text2{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':16})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text cd-block-text-3" onclick="redirectToForma()" {% if dico[17-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part2-text3{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':17})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToForma()" {% if dico[18-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part2-text4{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':18})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToForma()" {% if dico[19-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part2-text5{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':19})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div class="d-flex align-items-end"> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToForma()" {% if dico[20-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part2-text6{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':20})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div class="d-flex align-items-end"> <div class="hr-block-text"></div> </div> </div> <script> function redirectToForma() { window.location.href = '{{ path('formations',{'locale':app.request.locale}) }}'; } </script> </div> </div> <div class="container-droite container-droite-3 col-xl-10 col-12" > <div class="col-12 d-flex flex-column title-cd title-cd-1"> <h3>{% trans %}problematique-titre-3{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':6})}}"><button type="button" style="margin-left:5px" class="btn btn-warning" ><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h3> <div class="button-hr button2-hr"></div> </div> <div class="col-12 d-flex flex-wrap container-text-cd container-text-cd-1"> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToDigital()" {% if dico[21-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part3-text1{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':21})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToDigital()" {% if dico[22-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part3-text2{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':22})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text cd-block-text-3" onclick="redirectToDigital()" {% if dico[23-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part3-text3{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':23})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToDigital()" {% if dico[24-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part3-text4{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':24})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToDigital()" {% if dico[25-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part3-text5{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':25})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div class="d-flex align-items-end"> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToDigital()" {% if dico[26-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part3-text6{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':26})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div class="d-flex align-items-end"> <div class="hr-block-text"></div> </div> </div> <script> function redirectToDigital() { window.location.href = '{{ path('app_digitalManufacturingServices',{'locale':app.request.locale}) }}'; } </script> </div> </div> <div class="container-droite container-droite-4 col-xl-10 col-12" > <div class="col-12 d-flex flex-column title-cd title-cd-1"> <h3>{% trans %}problematique-titre-4{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':7})}}"><button type="button" style="margin-left:5px" class="btn btn-warning" ><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h3> <div class="button-hr button4-hr"></div> </div> <div class="col-12 d-flex flex-wrap container-text-cd container-text-cd-1"> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToERP()" {% if dico[27-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part4-text1{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':27})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToERP()" {% if dico[28-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part4-text2{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':28})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text cd-block-text-3" onclick="redirectToERP()" {% if dico[29-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part4-text3{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':29})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToERP()" {% if dico[30-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part4-text4{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':30})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToERP()" {% if dico[31-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part4-text5{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':31})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div class="d-flex align-items-end"> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToERP()" {% if dico[32-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part4-text6{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':32})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div class="d-flex align-items-end"> <div class="hr-block-text"></div> </div> </div> <script> function redirectToERP() { window.location.href = '{{path('app_manufacturingERP',{'locale':app.request.locale})}}'; } </script> </div> </div> <div class="container-droite container-droite-5 col-xl-10 col-12" > <div class="col-12 d-flex flex-column title-cd title-cd-1"> <h3>{% trans %}problematique-titre-5{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':8})}}"><button type="button" style="margin-left:5px" class="btn btn-warning" ><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h3> <div class="button-hr button5-hr"></div> </div> <div class="col-12 d-flex flex-wrap container-text-cd container-text-cd-1"> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToBase()" {% if dico[33-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part5-text1{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':33})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToBase()" {% if dico[34-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part5-text2{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':34})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text cd-block-text-3" onclick="redirectToBase()" {% if dico[35-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part5-text3{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':35})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToBase()" {% if dico[36-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part5-text4{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':36})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToBase()" {% if dico[37-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part5-text5{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':37})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div class="d-flex align-items-end"> <div class="hr-block-text"></div> </div> </div> <div class="col-xl-4 col-12 d-flex flex-column cd-block-text" onclick="redirectToBase()" {% if dico[38-1].fr is empty %}style="visibility:hidden"{% else %}style="visibility:visible"{% endif %}> <div class="d-flex flex-xl-column flex-row"> <p>{% trans %}problematique-part5-text6{% endtrans %}</p> {% if app.user %}<style>.btn-warning{visibility:visible!important}</style><a href="{{path('app_dictionnaire_edit',{'id':38})}}"><button type="button" style="width:15px;height:25px;" class="btn btn-warning"><i class="fa-solid fa-pen" style="color:black;visibility:visible;position:relative;left:8px;bottom:2px;"></i></button></a>{% endif %} <div class="d-flex justify-content-end align-items-center align-items-xl-start"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <div class="d-flex align-items-end"> <div class="hr-block-text"></div> </div> </div> <script> function redirectToBase() { window.location.href = '{{path('app_baseOutils',{'locale':app.request.locale})}}'; } </script> </div> </div> </div> </div> <script> let container1 = document.querySelector('.container-droite-1'); let container2 = document.querySelector('.container-droite-2'); let container3 = document.querySelector('.container-droite-3'); let container4 = document.querySelector('.container-droite-4'); let container5 = document.querySelector('.container-droite-5'); let buttonContainer1 = document.querySelector('.button1-cg'); let buttonContainer2 = document.querySelector('.button2-cg'); let buttonContainer3 = document.querySelector('.button3-cg'); let buttonContainer4 = document.querySelector('.button4-cg'); let buttonContainer5 = document.querySelector('.button5-cg'); // Écouteurs d'événement pour chaque bouton buttonContainer1.addEventListener('click', function () { container1.style.display = "block"; container2.style.display = "none"; container3.style.display = "none"; container4.style.display = "none"; container5.style.display = "none"; }); buttonContainer2.addEventListener('click', function () { container1.style.display = "none"; container2.style.display = "block"; container3.style.display = "none"; container4.style.display = "none"; container5.style.display = "none"; }); buttonContainer3.addEventListener('click', function () { container1.style.display = "none"; container2.style.display = "none"; container3.style.display = "block"; container4.style.display = "none"; container5.style.display = "none"; }); buttonContainer4.addEventListener('click', function () { container1.style.display = "none"; container2.style.display = "none"; container3.style.display = "none"; container4.style.display = "block"; container5.style.display = "none"; }); buttonContainer5.addEventListener('click', function () { container1.style.display = "none"; container2.style.display = "none"; container3.style.display = "none"; container4.style.display = "none"; container5.style.display = "block"; }); </script><!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --><!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ GESTION DES SECTION ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ -->{% set i = 0 %}{% for section in sections %}{% set i = i +1 %} <section id="section" style=" {% if i > 1 %} margin-top:-54px {% endif %} "><style>.accordion-body li{ color:white;}.accordion-body li p{ margin-bottom:0}.modal-backdrop{ display:none!important}</style><!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ -->{% for res in section.lignes %} <div data-aos="fade-up" data-aos-duration="1000" style="{% if i == 1 %}padding-top:20px;padding-bottom:50px;{% else %}padding-top:20px; padding-bottom:20px;{% endif %}"> <div class="container text-light pb-3"> <div class="row pt-5 justify-content-center justify-content-md-start"> {% set y =0 %} {% for res2 in res.blocs %} {% set y = y+1 %} <div data-aos="fade-up" data-aos-duration="1000" class="col-lg-{{res2.type}}" {% if app.user %} style="border:dashed 1px grey; border-radius:10px; margin-bottom:10px"{% endif %}> {% if res2.contenuses is not empty %} {% if res2.contenuses.0.typesContenus.id != 8 %} {% endif %} {% endif %}<!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --> <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ AFFCHER CONTENUS ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --><!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --> {% for resC in res2.contenuses %} <!-- ///\\\ ///\\\ TEXTE ///\\\ ///\\\ --> {% if resC.typesContenus.id == 1 %} {% if app.request.locale == 'en' %}{{resC.TexteEn|raw}}{% else %}{{resC.TexteFr|raw}}{% endif %} {% if resC.document is not empty %} <a href="{{resC.document}}" target="_blank" style="text-decoration:none;"> <button type="button btn-modal" class="justify-content-center align-items-center text-center" style=" background-color:{{resC.background}}!important; border:solid 3px {{resC.couleur1}}!important; border-radius: 30px!important; color: rgb(0, 206, 255); font-weight: bold; background-color: #0c24b3; cursor: pointer; padding-top: 12px; padding-left: 50px; padding-right: 50px; margin-top:20px "> {% if app.request.locale == 'en' %}{{resC.TitreEn|raw}}{% else %}{{resC.TitreFr|raw}}{% endif %}</button> </a> {% endif %} {% endif %} {% if y == 1 %} {% if loop.first %} <div class="traitBlanc"></div> {% endif %} {% endif %} <!-- ///\\\ ///\\\ FIN TEXTE ///\\\ ///\\\ --> <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --> <!-- ///\\\ ///\\\ IMAGE ///\\\ ///\\\ --> {% if res2.contenuses is not empty %} {% if resC.typesContenus.id == 2 %} <div class="col-12 d-flex d-lg-block justify-content-center align-items-center"> <img data-aos="fade-up" data-aos-duration="1000" class="img-fluid imgRadius" src="{{asset('uploads/contenus/'~resC.image)}}" alt="{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}"> </div> {% endif %} {% endif %} <!-- ///\\\ ///\\\ FIN IMAGE ///\\\ ///\\\ --> <!-- ///\\\ ///\\\ BOUTON MODIFIER CMS ///\\\ ///\\\ --> {% if res2.contenuses is not empty %} {% if resC.typesContenus.id != 8 and resC.typesContenus.id != 10 and resC.typesContenus.id != 9 %} {% if app.user %} <div class="d-flex justify-content-center mb-3"> <a href="{{path('app_editContent',{'id':resC.id,'type':resC.typesContenus.libelle})}}"> <div class="d-flex justify-content-center align-items-center cubeIcon"> <i class="fa-solid fa-pen"></i> </div> </a> </div> {% endif %} {% endif %} {% endif %}{% endfor %} <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --> <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ MODAL CONTENUS ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --><!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --><!-- ///\\\ ///\\\ FIN MODAL CONTENUS 2 ///\\\ ///\\\ --> </div>{% endfor %} </div><!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --> <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ MODAL BLOCK ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --><!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --> </div></div>{% endfor %}<!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --> <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ MODAL SECTION ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --><!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --><!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --> <!-- ///\\\ ///\\\ FIN SECTION + FORME BLEU SOUS SECTION DANS LE DOM ///\\\ ///\\\ --> </section><div class="container"> <div class="formeBleu"> <div class="row justify-content-center d-flex"> {% if section.rond != '' %} <img src="{{asset('uploads/sections/'~section.rond)}}" class="img-fluid d-none d-lg-block"> {% endif %} </div> </div></div>{% endfor %}<!-- ///\\\ ///\\\ AJOUT SECTION DANS LE DOM ///\\\ ///\\\ --> {% if app.user %} <!-- ///\\\ ///\\\ MODAL AJOUT SECTION ///\\\ ///\\\ --> <div class="modal fade" id="addSection" tabindex="-1" aria-labelledby="addSection" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="container-modal d-flex flex-column"> <h2>Ajouter une section</h2> <p>Les pages dont composées «Sections» contenant chacune des « Blocs » de « Contenus » répartis en colonnes</p> </div> <form action="{{path('app_addSection')}}" method="post" enctype="multipart/form-data"> <input type="hidden" name="actualite" value="{{page.id}}"> <div class="container-contenus-modal"> <h3>Ordre affichage</h3> <input type="number" name="ordreSection" id="ordreSection" value="{{ordreMax}}"> </div> <div class="container-contenus-modal"> <input type="hidden" name="couleurSection" id="couleurSection" value="#fff"> </div> <div class="modal-submit d-flex justify-content-center"> <button type="submit" class=" btnAdd">Ajouter</button> </div> </form> </div> </div> </div> </div>{% endif %}<!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --> <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ SCRIPT PCONTENT ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --><!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --><!-- ///\\\ ///\\\ SCRIPT ACCORDEON ///\\\ ///\\\ --> <script> let accordionHeaders = document.querySelectorAll('.accordion-header'); accordionHeaders.forEach(header => { let button = header.querySelector('.texteDeroulant button'); button.addEventListener('click', function () { let parentAccordion = header.closest('.accordion'); let buttons = parentAccordion.querySelectorAll('.texteDeroulant button'); let content = header.nextElementSibling; // The content section to show/hide // Check if the content section is already open if (content.classList.contains('show')) { // Close the content section content.classList.remove('show'); content.classList.add('collapse'); } else { // Close all other open sections (if any) and open this content section buttons.forEach(btn => { let contentToClose = btn.parentElement.nextElementSibling; if (contentToClose.classList.contains('show')) { contentToClose.classList.remove('show'); contentToClose.classList.add('collapse'); } }); // Open the content section content.classList.remove('collapse'); content.classList.add('show'); } // Toggle the button color if (button.style.color !== 'red') { buttons.forEach(btn => { btn.style.color = 'white'; }); button.style.color = 'red'; } else { button.style.color = 'white'; } }); }); let buttonsForIcon = document.querySelectorAll('.texteDeroulant button'); let icons = document.querySelectorAll('.jsIcon'); let previousIcon = null; buttonsForIcon.forEach((button, index) => { let icon = icons[index]; button.addEventListener('click', function () { if (previousIcon !== null && previousIcon !== icon) { // Restore the previous icon to fa-plus-circle previousIcon.classList.remove('fa-minus-circle'); previousIcon.classList.add('fa-plus-circle'); } if (icon.classList.contains('fa-plus-circle')) { icon.classList.remove('fa-plus-circle'); icon.classList.add('fa-minus-circle'); } else { icon.classList.remove('fa-minus-circle'); icon.classList.add('fa-plus-circle'); } previousIcon = icon; }); });</script></section></main> <script type="text/javascript"> $(document).ready(function(){ $('.slider-demo-valeur').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:1, responsive:[{ breakpoint:1400, settings:{ slidesToShow:3, slidesToScroll:3, } },{ breakpoint:1200, settings:{ slidesToShow:2, slidesToScroll:2, } }, { breakpoint:769, settings:{ slidesToShow:1, slidesToScroll:1, } }], }); }); </script> <script> function changeLanguage(selectedButton, modalId) { let modal = document.getElementById(modalId); let buttons = modal.querySelectorAll(".button-langue"); let inputField = modal.querySelector(".sectionTitle"); buttons.forEach((button) => { if (button === selectedButton) { button.classList.add("button-langue-active"); button.classList.remove("button-langue-noactive"); // Set the input field value based on the active language switch (button.textContent) { case "FR": inputField.value = "Titre de la section FR"; break; case "EN": inputField.value = "Section Title EN"; break; case "DE": inputField.value = "Abschnittstitel DE"; break; // Add cases for other languages if needed default: inputField.value = ""; } } else { button.classList.remove("button-langue-active"); button.classList.add("button-langue-noactive"); } }); } function changeColor(selectedColorButton, modalId) { let modal = document.getElementById(modalId); const colorButtons = modal.querySelectorAll(".button-couleur"); colorButtons.forEach((colorButton) => { if (colorButton === selectedColorButton) { colorButton.classList.add("button-color-active"); colorButton.classList.remove("button-color-noactive"); } else { colorButton.classList.remove("button-color-active"); colorButton.classList.add("button-color-noactive"); } }); } function clearDefaultText(inputField) { // Clear the default value if it matches the default text if (inputField.value === inputField.defaultValue) { inputField.value = ''; } } function restoreDefaultText(inputField) { // Restore the default value if the input is empty if (inputField.value === '') { inputField.value = inputField.defaultValue; } }</script> <!-- ///\\\ ///\\\ IMPORT ///\\\ ///\\\ --> <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script><script src="{{asset('js/jquery-latest.min.js')}}"></script><script src="{{asset('slick/slick.js')}}"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></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:1, 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, } },{ breakpoint:1200, settings:{ slidesToShow:2, } }, { breakpoint:769, settings:{ slidesToShow: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: 1, responsive:[{ breakpoint:1400, settings:{ slidesToShow:3, } },{ breakpoint:1200, settings:{ slidesToShow:2, } }, { breakpoint:500, settings:{ slidesToShow:1, } }], }); }); </script> <!-- FIN CMS --> <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ --> <div class="formation pb-5"> <div class="container pb-3"> <div class="formeBleu"> <div class="row justify-content-center d-flex"> <img src="{{asset('img/accueil/Groupe 197.svg')}}" class="img-fluid" style="border-radius: 0!important;"> </div> </div> <div class="row justify-content-center justify-content-md-start mt-2"> <div class="col-12"> <div class="titre" style="margin-top:40px;"> </div> </div> </div> <div class="row justify-content-center justify-content-md-start text-light"> <div class="col-12"> <h1 data-aos="fade-right" data-aos-duration="1000" class="pb-4" style="margin-bottom:8px;">{% trans %}titre-prochaine-formation{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':68})}}" style="margin-left:5px"><button type="button" class="btn btn-warning" ><i class="fa-solid fa-pen" ></i></button></a> {% endif %}</h1> </div> </div> </div> <div class="container pb-3"> <div class="row"> <div class="col-12"> <div data-aos="fade-up" data-aos-duration="1000" class="container-carousel-true"> <div class="slider-demo-formation"> {% set formationsWithDates = [] %}{% set formationsWithoutDates = [] %}{% set currentDate = "now"|date("Y-m-d") %}{% set currentDateTimestamp = "now"|date("U") %}{% for res in formations %} {% if res.afficher == 1 %} {% set closestFutureDate = null %} {% set mostRecentPastDate = null %} {% set correspondingLocation = null %} {# Iterate through each session to find the most relevant date #} {% for session in res.sessionsFormations %} {% if session.date is not null %} {% set sessionDate = session.date|date("Y-m-d") %} {# Check for closest future date or most recent past date #} {% if sessionDate >= currentDate %} {# Update the closest future date if this session date is closer #} {% if closestFutureDate is null or sessionDate < closestFutureDate %} {% set closestFutureDate = sessionDate %} {% set correspondingLocation = session.lieu %} {# Assuming session.lieu is the location #} {% endif %} {% elseif mostRecentPastDate is null or sessionDate > mostRecentPastDate %} {# Update the most recent past date if this session date is more recent #} {% set mostRecentPastDate = sessionDate %} {% set correspondingLocation = session.lieu %} {% endif %} {% endif %} {% endfor %} {# Determine which date to use for the formation #} {% set chosenDate = closestFutureDate is not null ? closestFutureDate : mostRecentPastDate %} {# Add formation to the appropriate list #} {% if chosenDate is not null %} {% set formationsWithDates = formationsWithDates|merge([{ 'formation': res, 'date': chosenDate, 'location': correspondingLocation }]) %} {% else %} {% set formationsWithoutDates = formationsWithoutDates|merge([res]) %} {% endif %} {% endif %}{% endfor %}{# Sort formations by the closest date to the current date #}{% set sortedFormationsWithDates = formationsWithDates|sort((a, b) => (a.date|date("U") >= currentDateTimestamp ? a.date|date("U") - currentDateTimestamp : currentDateTimestamp - a.date|date("U")) - (b.date|date("U") >= currentDateTimestamp ? b.date|date("U") - currentDateTimestamp : currentDateTimestamp - b.date|date("U"))) %} {% for item in sortedFormationsWithDates %} {% if item.date >= currentDate %} <a style="margin: 0 10px;" href="{{path('detailsFormation',{'ref':item.formation.reference,'locale':app.request.locale})}}"> <div class=" carteFormation" style="height: 260px;"> <div class="imgAnimee"> <div class="gradient-effect"></div> <img src="{{asset('uploads/formations/'~item.formation.image)}}" alt="Votre image"> <p class="titre-card">{% if app.request.locale == 'fr' %}{{item.formation.titreFr}}{% else %}{{item.formation.titreEn}}{% endif %}</p> <div class="hover-effect" style="padding:15px;"> <p class="hover-effcet-txt"><i class="far fa-calendar"></i> {{ item.date|date('d/m/Y') }}</p> </p> <p class="card-text" style="font-size: 20px; font-weight: 700;">{% if app.request.locale == 'fr' %}{{item.formation.titreFr}}{% else %}{{item.formation.titreEn}}{% endif %}</p> <div class="d-flex justify-content-between" style="padding-bottom: 5px;"> <p class="hover-effcet-txt"><i class="fas fa-user-plus"></i>{% if app.request.locale == 'fr' %}{{item.formation.nbParticipants}}{% else %}{{item.formation.nbParticipantsEn}}{% endif %}</p> <p class="hover-effcet-txt"><i class="fas fa-location-dot"></i> {{ item.location}} </div> <center> <button type="button" class="btn btn-outline-light hover-btn buttonMore">{% trans %}accueil-carousel-bouton{% endtrans %}</button> </center> </div> </div> </div> </a> {% endif %} {% endfor %}{% for res in formationsWithoutDates %} <a style="margin: 0 10px;" href="{{path('detailsFormation',{'ref':res.reference,'locale':app.request.locale})}}"> <div class=" carteFormation" style="height: 260px;"> <div class="imgAnimee"> <div class="gradient-effect"></div> <img src="{{asset('uploads/formations/'~res.image)}}" alt="Votre image"> <p class="titre-card">{% if app.request.locale == 'fr' %}{{res.titreFr}}{% else %}{{res.titreEn}}{% endif %}</p> <div class="hover-effect" style="padding:15px;"> <p class="hover-effcet-txt"><i class="far fa-calendar"></i> {% if app.request.locale == 'fr' %}Nous consulter{% else %}Contact us{% endif %}</p> <p class="card-text" style="font-size: 20px; font-weight: 700;">{% if app.request.locale == 'fr' %}{{res.titreFr}}{% else %}{{res.titreEn}}{% endif %}</p> <div class="d-flex justify-content-between" style="padding-bottom: 5px;"> <p class="hover-effcet-txt"><i class="fas fa-user-plus"></i>{% if app.request.locale == 'fr' %}{{res.nbParticipants}}{% else %}{{res.nbParticipantsEn}}{% endif %}</p> <p class="hover-effcet-txt"><i class="fas fa-location-dot"></i>{% if app.request.locale == 'fr' %}A convenir{% else %}To be agreed{% endif %} </p> </div> <center> <button type="button" class="btn btn-outline-light hover-btn buttonMore">{% trans %}accueil-carousel-bouton{% endtrans %}</button> </center> </div> </div> </div> </a>{% endfor %} </div> </div> </div> </div> <div data-aos="fade-up" data-aos-duration="1000" class="container pb-3 pt-3"> <div class="row"> <div class="col-12"> <div class=""> <a href="{{path('formations',{'locale':app.request.locale})}}" style="text-decoration:none;color:white;"><button class="buttonFormation" style="color:white!important"> {% trans %}bouton-prochaine-formation{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':69})}}" style="margin-left:5px;text-decoration:none"><button type="button" class="btn btn-warning" ><i class="fa-solid fa-pen" ></i></button></a> {% endif %} </button></A> </div> </div> </div> </div> </div> </div> <div class="actualites"> <div class="container pb-3"> <div class="formeBleu"> <div class="row justify-content-center d-flex"> <img src="{{asset('img/accueil/Groupe 198.svg')}}" class="img-fluid" style="border-radius: 0!important;"> </div> </div> <div class="row mt-2 justify-content-center justify-content-md-start"> <div class="col-12"> <div class="titre"> <p class="serviceP" style="display:none;">ACTUALITES</p> </div> </div> </div> <div class="row text-light justify-content-center justify-content-md-start mt-5"> <div class="col-12"> <h1 data-aos="fade-right" data-aos-duration="1000" style="margin-bottom:32px;">{% trans %}titre-derniere-actu{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':70})}}"><button type="button" style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h1> </div> </div> </div> <div class="container pb-3"> <div class="row"> <div class="col-12"> <div data-aos="fade-up" data-aos-duration="1000" class="container-carousel-true"> <div class="slider-demo-actu"> {% for res in lastActus %} {% set titreNew = res.titreFr %} <div class="carte "> <div class=""> {% set modifiedUrl = path('actualitesD', {'id': res.id, 'titre': titreNew, 'locale': app.request.locale})|replace({'%': '_'}) %} <a href="{{ modifiedUrl }}"> <div class="imgAnimee"> <img class="img-fluid" src=" {% if res.image == 'ok' %} {{asset('uploads/actualites/cpi-actu-defaut.jpg')}} {% else %} {{asset('uploads/actualites/'~res.image)}} {% endif %} " alt="salon aeronautique"> <div class="hover-effect d-flex justify-content-center aligne-items-center" style="background-color : rgba(25,0,105,0.75);"> <button type="button" class="btn btn-outline-light buttonMore hover-btn-actu" >{% if app.request.locale == 'fr' %}Lire l'article{% else %}Read article{% endif %}</button> </div> </div> <div class="texte-carte pt-1 pt-md-2"> <div class="titre" style="height:100%;"> <p>{% if app.request.locale == 'fr' %}{{ res.titreFr|slice(0, 45) }}{% else %}{{ res.titreEn|slice(0, 45) }}{% endif %}...</p> </div> <div class="description d-flex align-items-end" style="height:100%;"> {% if app.request.locale == 'fr' %}{{ res.introFr|slice(0, 132)|raw }}{% else %}{{ res.introEn|slice(0, 132)|raw }}{% endif %}... </div> <div class="date d-flex align-items-end" style="height:100%;"> <div class="row"> <p> <i class="far fa-clock"></i> {{res.date|date('d')}} {% if app.request.locale == 'fr' %} {% if res.date|date('m') == '01' %}JANVIER{% endif %} {% if res.date|date('m') == '02' %}FEVRIER{% endif %} {% if res.date|date('m') == '03' %}MARS{% endif %} {% if res.date|date('m') == '04' %}AVRIL{% endif %} {% if res.date|date('m') == '05' %}MAI{% endif %} {% if res.date|date('m') == '06' %}JUIN{% endif %} {% if res.date|date('m') == '07' %}JUILLET{% endif %} {% if res.date|date('m') == '08' %}AOUT{% endif %} {% if res.date|date('m') == '09' %}SEPTEMBRE{% endif %} {% if res.date|date('m') == '10' %}OCTOBRE{% endif %} {% if res.date|date('m') == '11' %}NOVEMBRE{% endif %} {% if res.date|date('m') == '12' %}DECEMBRE{% endif %} {% else %} {% if res.date|date('m') == '01' %}JANUARY{% endif %} {% if res.date|date('m') == '02' %}FEBRUARY{% endif %} {% if res.date|date('m') == '03' %}MARCH{% endif %} {% if res.date|date('m') == '04' %}APRIL{% endif %} {% if res.date|date('m') == '05' %}MAY{% endif %} {% if res.date|date('m') == '06' %}JUNE{% endif %} {% if res.date|date('m') == '07' %}JULY{% endif %} {% if res.date|date('m') == '08' %}AUGUST{% endif %} {% if res.date|date('m') == '09' %}SEPTEMBER{% endif %} {% if res.date|date('m') == '10' %}OCTOBER{% endif %} {% if res.date|date('m') == '11' %}NOVEMBER{% endif %} {% if res.date|date('m') == '12' %}DECEMBER{% endif %} {% endif %} {{res.date|date('Y')}} </p> </div> </div> </div> </a> </div> </div> {% endfor %} </div> </div> </div> </div> <div data-aos="fade-up" data-aos-duration="1000" class="container pb-3"> <div class="row"> <div class="col-12"> <div class="d-flex justify-content-start w-100"> <a href="{{path('app_actualites',{'locale':app.request.locale})}}"> <button class="buttonActu"> {% trans %}bouton-derniere-actualites{% endtrans %} </button> {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':71})}}" style="margin-left:5px;margin-top:35px;text-decoration:none"><button type="button" class="btn btn-warning" ><i class="fa-solid fa-pen" ></i></button></a>{% endif %} </a> </div> </div> </div> </div> </div> <div class="partenaires"> <div class="container pb-3"> <div class="row"> <div class="formeBleu"> <div class="row justify-content-center d-flex"> <img src="{{asset('img/accueil/Groupe 197.svg')}}" class="img-fluid" style="border-radius: 0!important;"> </div> </div> </div> <div class="row justify-content-center justify-content-md-start text-light"> <div class="col-12" style="margin-top:50px;"> <h1 style"margin-top:40px;!important" data-aos="fade-right" data-aos-duration="1000" class="pb-4">{% trans %}titre-synergies{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':72})}}" style="margin-left:5px;text-decoration:none"><button type="button" class="btn btn-warning" ><i class="fa-solid fa-pen" ></i></button></a>{% endif %}</h1> </div> <div class="container pb-3"> <div class="row"> <div class="col-12"> <div data-aos="fade-up" data-aos-duration="1000" class="container-carousel-true"> <div class="slider-demo-partenaire"> {% for res in carousels %} <div class="cartePartenaire"> <img class="img-fluid " src="{{asset('uploads/carousels/'~res.Image)}}" alt=""> </div> {% endfor %} </div> </div> </div> </div> </div> {% if app.user %} <br> <div data-aos="fade-up" data-aos-duration="1000" class="d-flex justify-content-center"> <a href="{{path('app_carousels_index',{'contenu':367})}}"><button type="button" style="margin-bottom:5px" class="btn btn-info" ><i class="fa-solid fa-pen"></i> Gérer le carousel</button></a> </div> {% endif %} </div> </div> </div> </main><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;color:#0d6efd;!important">Designed by Piranha et Petits Poissons <span id="footerRouge">Rouges</span></a></p> </div> </div> </div></div> <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script> <script src="{{asset('js/jquery-latest.min.js')}}"></script> <script src="{{asset('slick/slick.js')}}"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> <script src="https://unpkg.com/aos@2.3.1/dist/aos.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-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:1, responsive:[{ breakpoint:1400, settings:{ slidesToShow:4, slidesToScroll:4, } },{ breakpoint:1200, settings:{ slidesToShow:3, slidesToScroll:3, } }, { breakpoint:990, settings:{ slidesToShow:2, slidesToScroll:2, } },{ breakpoint:500, settings:{ slidesToShow:1, slidesToScroll:1, } }], }); $('.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:1, responsive:[{ breakpoint:1400, settings:{ slidesToShow:3, slidesToScroll:3, } },{ breakpoint:1200, settings:{ slidesToShow:2, slidesToScroll:2, } },{ breakpoint:500, settings:{ slidesToShow:1, slidesToScroll: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:1, responsive:[{ breakpoint:1400, settings:{ slidesToShow:3, } },{ breakpoint:1200, settings:{ slidesToShow:2, } }, { breakpoint:500, 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-3'); let buttonChallenge2 = document.querySelector('.challenge-button-2'); let buttonChallenge3 = document.querySelector('.challenge-button-1'); 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 = " {{asset('img/accueil/cpi-industrialisation-hover.svg')}}"; }); circle6.addEventListener('mouseleave', function() { imgCircle6.src = " {{asset('img/accueil/cpi-industrialisation.svg')}}"; }); circle5.addEventListener("mouseenter", function() { imgCircle5.src = " {{asset('img/accueil/cpi-formation-hover.svg')}}"; }); circle5.addEventListener('mouseleave', function() { imgCircle5.src = " {{asset('img/accueil/cpi-formation.svg')}}"; }); circle4.addEventListener("mouseenter", function() { imgCircle4.src = " {{asset('img/accueil/cpi-recrutement-hover.svg')}}"; }); circle4.addEventListener('mouseleave', function() { imgCircle4.src = " {{asset('img/accueil/cpi-recrutement.svg')}}"; }); circle2.addEventListener("mouseenter", function() { imgCircle2.src = " {{asset('img/accueil/cpi-digital-services-hover.svg')}}"; }); circle2.addEventListener('mouseleave', function() { imgCircle2.src = " {{asset('img/accueil/cpi-digital-services.svg')}}"; }); </script> <script> AOS.init(); </script> </body></html>