templates/base.html.twig line 1

  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.     <head>
  4.     
  5.         <meta charset="UTF-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">   
  7.    
  8.         <!-- Mobile Metas -->
  9.         <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  10.     
  11.         <!-- Site Metas -->
  12.         <title>B&B Computer Solutions - {% block title %}{% endblock %}</title>  
  14.         <meta name="keywords" content="Infogérance, informatique, solutions informatiques, dépannage informatique, maintenance informatique ,réseau informatique, sécurité informatique, Prestataire IT, prestataire informatique, IT, support informatique, support IT, maintient informatique,
  15.         installation informatique, logiciel, matériel informatique, serveur, cloud computing, sauvegarde de données, backup, gestion de projet informatique, assistance informatique, conseil informatique, formation informatique, B&B Computer solutions, taille humaine, société familliale, 
  16.         Belge, Belgique, Bruxelles, Limal">
  18.         <meta name="description" content="B&B Computer Solutions est une entreprise spécialisée dans les solutions informatiques pour les PME, écoles, administrations et ONG. 
  19.         Nous offrons une large gamme de services informatiques pour répondre aux besoins de nos clients. Nos services incluent la vente de matériel informatique, tels que des ordinateurs, des imprimantes et des périphériques, ainsi que des logiciels et des solutions de sécurité informatique pour protéger les données de nos clients. Nous sommes situés à Limal, dans le Brabant wallon.">
  22.         <meta name="author" content="B&B Computer Solutions">
  24.         <!-- Site Icons -->
  25.         <link rel="shortcut icon" href="{{ asset('build/favicon.ico') }}" type="image/x-icon" />
  26.         <link rel="apple-touch-icon" href="{{ asset('build/apple-touch-icon.png') }}">
  28.         <!-- Bootstrap CSS -->
  29.         <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
  30.         <!-- Site CSS -->
  31.         <link rel="stylesheet" href="{{ asset('assets/style.css') }}">
  32.         <!-- Colors CSS -->
  33.         <link rel="stylesheet" href="{{ asset('assets/css/colors.css') }}">
  34.         <!-- ALL VERSION CSS -->
  35.         <link rel="stylesheet" href="{{ asset('assets/css/versions.css') }}">
  36.         <!-- Responsive CSS -->
  37.         <link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}">
  38.         <!-- Custom CSS -->
  39.         <!-- <link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}"> -->
  40.         <!-- Endblock -->
  41.         <!-- <link rel="stylesheet" href="{{ asset('assets/css/endblock.css') }}"> -->
  43.         <!-- Font Awesome -->
  44.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  46.         <!-- Owl Carousel -->
  47.         <link rel="stylesheet" href="{{ asset('assets/css/owl.carousel.css') }}">
  48.         <link rel="stylesheet" href="{{ asset('assets/css/owl.theme.default.css') }}">
  50.         <!-- ALL JS FILES -->
  51.         <script src="{{ asset('assets/js/all.js') }}"></script>
  53.         <!-- Modernizer for Portfolio -->
  54.         <script src="{{ asset('assets/js/modernizer.js') }}"></script>
  56.         <!-- Owl Carousel -->
  57.         <script src="{{ asset('assets/js/owl.carousel.min.js') }}"></script>
  59.          <!--[if lt IE 9]>
  60.             <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  61.             <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  62.         <![endif]-->
  64.         {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
  65.         {% block stylesheets %}
  66.             {{ encore_entry_link_tags('app') }}
  67.         {% endblock %}
  68.         
  69.         {% block javascripts %}
  70.             {{ encore_entry_script_tags('app') }}
  71.         {% endblock %}
  73.     </head>
  74.     <body class="host_version">
  75.         {% block body %}
  77.             <!-- LOADER -->
  78.             <div id="preloader">
  79.                 <div class="loading">
  80.                     <div class="finger finger-1">
  81.                         <div class="finger-item">
  82.                         <span></span><i></i>
  83.                         </div>
  84.                     </div>
  85.                     <div class="finger finger-2">
  86.                         <div class="finger-item">
  87.                         <span></span><i></i>
  88.                         </div>
  89.                     </div>
  90.                     <div class="finger finger-3">
  91.                         <div class="finger-item">
  92.                         <span></span><i></i>
  93.                         </div>
  94.                     </div>
  95.                     <div class="finger finger-4">
  96.                         <div class="finger-item">
  97.                         <span></span><i></i>
  98.                         </div>
  99.                     </div>
  100.                     <div class="last-finger">
  101.                         <div class="last-finger-item"><i></i></div>
  102.                     </div>
  103.                 </div>
  104.             </div>
  105.             <!-- END LOADER -->
  107.             <header class="header header_style_01">
  108.                 <nav class="megamenu navbar navbar-default">
  109.                     <div class="container">
  110.                         <div class="navbar-header">
  111.                             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  112.                                 <span class="sr-only">Toggle navigation</span>
  113.                                 <span class="icon-bar"></span>
  114.                                 <span class="icon-bar"></span>
  115.                                 <span class="icon-bar"></span>
  116.                             </button>
  117.                             <a class="navbar-brand" href="{{ path('app_home') }}">
  118.                                 <img src="{{ asset('build/bbcs_logo.png') }}" alt="Logo B&B Computer Solutions"></a>
  119.                         </div>
  120.                         <div id="navbar" class="navbar-collapse collapse">
  121.                             <ul class="nav navbar-nav navbar-center">
  122.                                 <li class="menu-titre"><a {% if active_menu == 'home' %}class="active"{% endif %} href="{{ path('app_home') }}">{% trans %}Accueil {% endtrans %}</a></li>
  123.                                 
  124.                                 <li class="menu-deroulant menu-titre">
  125.                                     <a href="{{ path('app_about') }}" role="button" {% if active_menu in ['about', 'customers']%}class="active"{% endif %}>{% trans %}A propos{% endtrans %}</a>
  126.                                     <span class="fleche" tabindex="0"><i class="fa-solid fa-chevron-down"></i></i></span>
  127.                                     <ul class="sous-menu a-propos-menu">
  128.                                         {#<li><a {% if active_menu == 'about' %}class="active"{% endif %} href="{{ path('app_about') }}">{% trans %}Notre société {% endtrans %}</a></li>#}
  129.                                         <li><a {% if active_menu == 'customers' %}class="active"{% endif %} href="{{ path('app_customers') }}">{% trans %}Votre Entreprise {% endtrans %}</a></li>
  130.                                     </ul>
  131.                                 </li>
  132.                                 
  133.                                 
  134.                                 <li class="menu-deroulant menu-titre">
  135.                                     <a href="{{ path('app_solutions') }}" role="button" {% if active_menu in ['solutions', 'expertise', 'audit', 'backup', 'management', 'maintenance', 'venteLeasing', 'microsoft', 'openSource', 'doli', 'next']%}class="active"{% endif %}>
  136.                                     {% trans %}Nos Solutions{% endtrans %}
  137.                                     </a>
  138.                                     <span class="fleche" tabindex="0"><i class="fa-solid fa-chevron-down"></i></i></span>
  139.                                     <ul class="sous-menu">
  140.                                         <li><a {% if active_menu == 'expertise' %}class="active"{% endif %} href="{{ path('app_expertise') }}">{% trans %}Notre Expertise {% endtrans %}</a></li>
  141.                                         {#<li><a {% if active_menu == 'tarification' %}class="active"{% endif %} href="{{ path('app_tarification') }}">{% trans %}Tarification {% endtrans %}</a></li>#}
  142.                                         <li class="menu-deroulant menu-titre sous-sous-menu-titre">
  143.                                             <a  {% if active_menu in ['audit', 'backup', 'management', 'maintenance', 'venteLeasing', 'microsoft']%}class="active"{% endif %}>
  144.                                             {% trans %}Nos Services {% endtrans %}
  145.                                             </a>
  146.                                             <span class="fleche" tabindex="0"><i class="fa-solid fa-chevron-down"></i></span>
  147.                                             <ul class="sous-menu sous-menu-droite">
  148.                                                 <li><a {% if active_menu == 'audit' %}class="active"{% endif %} href="{{ path('app_audit') }}">{% trans %}Audit {% endtrans %}</a></li>
  149.                                                 <li><a {% if active_menu == 'backup' %}class="active"{% endif %} href="{{ path('app_backup') }}">{% trans %}Backup {% endtrans %}</a></li>
  150.                                                 <li><a {% if active_menu == 'management' %}class="active"{% endif %} href="{{ path('app_management') }}">{% trans %}IT Management {% endtrans %}</a></li>
  151.                                                 <li><a {% if active_menu == 'maintenance' %}class="active"{% endif %} href="{{ path('app_maintenance') }}">{% trans %}Maintenance {% endtrans %}</a></li>
  152.                                                 <li><a {% if active_menu == 'venteLeasing' %}class="active"{% endif %} href="{{ path('app_venteLeasing') }}">{% trans %}Vente et Leasing {% endtrans %}</a></li>
  153.                                                 <li><a {% if active_menu == 'microsoft' %}class="active"{% endif %} href="{{ path('app_microsoft') }}">{% trans %}Microsoft 365 {% endtrans %}</a></li>
  154.                                             </ul>
  155.                                         </li>
  156.                                         <li class="menu-deroulant menu-titre sous-sous-menu-titre">
  157.                                             <a href="{{ path('app_openSource') }}" {% if active_menu in ['openSource', 'doli', 'next']%}class="active"{% endif %}>Open Source</a>
  158.                                             <span class="fleche" tabindex="0"><i class="fa-solid fa-chevron-down"></i></span>
  159.                                             <ul class="sous-menu sous-menu-droite">
  160.                                                 <li><a {% if active_menu == 'doli' %}class="active"{% endif %} href="{{ path('app_doli') }}">{% trans %}Dolibarr {% endtrans %}</a></li>
  161.                                                 <li><a {% if active_menu == 'next' %}class="active"{% endif %} href="{{ path('app_next') }}">{% trans %}NextCloud {% endtrans %}</a></li>
  162.                                             </ul>
  163.                                         </li>
  164.                                     </ul>
  165.                                 </li>
  167.                                 {#
  168.                                 <li class="menu-deroulant menu-titre">
  169.                                     <a href="{{ path('app_contact') }}" role="button" {% if active_menu in ['contact', 'jobs']%}class="active"{% endif %}>Contact</a>
  170.                                     <span class="fleche" tabindex="0"><i class="fa-solid fa-chevron-down"></i></span>
  171.                                     <ul class="sous-menu">
  172.                                         <li><a {% if active_menu == 'jobs' %}class="active"{% endif %} href="{{ path('app_jobs') }}">{% trans %}Jobs {% endtrans %}</a></li>
  173.                                     </ul>
  174.                                 </li>#}
  175.                                 <li class="menu-titre"><a {% if active_menu == 'contact' %}class="active"{% endif %} href="{{ path('app_contact') }}">{% trans %}Contact {% endtrans %}</a></li>
  176.                                 <li class="menu-titre"><a {% if active_menu == 'jobs' %}class="active"{% endif %} href="{{ path('app_jobs') }}">{% trans %}Jobs {% endtrans %}</a></li>
  177.                                 
  178.                                
  179.                             </ul>
  180.                             <ul class="nav navbar-nav navbar-right">
  181.                                 <li>
  182.                                     {% if app.request.locale == 'en' %}
  183.                                         <li><a href="{{ path(app.request.attributes.get('_route'), {_locale: 'fr' } ) }}">FR</a></li>
  184.                                     {% else %}
  185.                                          <li><a href="{{ path(app.request.attributes.get('_route'), {_locale: 'en' } ) }}">ENG</a></li>
  186.                                     {% endif %}
  187.                                 </li>
  188.                                 <li><a class="btn-light btn-radius btn-brd log" href="https://helpdesk.bbcs.be/" target="_blank"><i class="flaticon-padlock"></i> {% trans %}Support Client {% endtrans %}</a></li>
  189.                             </ul>
  190.                         </div>
  191.                     </div>
  192.                 </nav>
  193.             </header>
  194.         <!-- START CONTENT -->
  195.         
  196.         {% block content %}    
  197.         
  198.         {% endblock %}
  199.         <!-- END CONTENT -->
  200.             <div class="parallax section db parallax-off" style="background-image:url('{{ asset('build/ethernet-1.jpg') }}');">
  201.                 <div class="container">
  202.                     <div class="row logos">
  203.                         <div class="partners-carousel owl-carousel owl-theme">
  204.                             <div class="wow fadeInUp item">
  205.                                 <a href="https://www.adobe.com/fr/" target="_blank">
  206.                                     <img src="{{ asset('build/partners/adobe.png') }}" alt="logo Entreprise Adobe">
  207.                                 </a>
  208.                             </div>
  209.                             <div class="wow fadeInUp item">
  210.                                 <a href="https://www.fortinet.com" target="_blank">
  211.                                     <img src="{{ asset('build/partners/fortinet.png') }}" alt="Logo Entreprise Fortinet">
  212.                                 </a>
  213.                             </div>
  214.                             <div class="wow fadeInUp item">
  215.                                 <a href="https://www.se.com/be/fr/brands/apc/" target="_blank">
  216.                                     <img src="{{ asset('build/partners/apc.png') }}" alt="logo Entreprise Apc"> 
  217.                                 </a>
  218.                             </div>
  219.                           <div class="wow fadeInUp item">
  220.                                 <a href="https://www.cisco.com/" target="_blank">
  221.                                     <img src="{{ asset('build/partners/cisco.png') }}" alt="logo Entreprise Cisco">
  222.                                 </a>
  223.                             </div>
  224.                             <div class="wow fadeInUp item">
  225.                                 <a href="https://www.brother.be/" target="_blank">
  226.                                     <img src="{{ asset('build/partners/brother.png') }}" alt="logo Entreprise Brother">
  227.                                 </a>
  228.                             </div>
  229.                             <div class="wow fadeInUp item">
  230.                                 <a href="https://www.hp.com/be-fr/home.html" target="_blank">
  231.                                     <img src="{{ asset('build/partners/hp.png') }}" alt="logo Entreprise Hp">
  232.                                 </a>
  233.                             </div>
  234.                             <div class="wow fadeInUp item">
  235.                                 <a href="https://www.lenovo.com/be/fr/" target="_blank">
  236.                                     <img src="{{ asset('build/partners/lenovo.png') }}" alt="logo Entreprise Lenovo">
  237.                                 </a>
  238.                             </div>
  239.                             <div class="wow fadeInUp item">
  240.                                 <a href="https://www.microsoft.com/fr-be/" target="_blank">
  241.                                     <img src="{{ asset('build/partners/microsoft_365.png') }}" alt="logo Entreprise Microsoft">
  242.                                 </a>
  243.                             </div>
  244.                             <div class="wow fadeInUp item">
  245.                                 <a href="https://www.synology.com/en-global" target="_blank">
  246.                                     <img src="{{ asset('build/partners/synology.png') }}" alt="logo Entreprise Synology">
  247.                                 </a>
  248.                             </div>
  249.                         </div>
  250.                     </div><!-- end row -->
  251.                 </div><!-- end container -->
  252.             </div><!-- end section -->
  255. {#
  257.             <footer class="footer">
  258.                 <div class="container">
  259.                     <div class="row">
  260.                         
  261.                         <div class="col-md-4 col-sm-4 col-xs-12">
  262.                             <div class="widget clearfix">
  263.                                 <div class="widget-title">
  264.                                     <h3>Liens</h3>
  265.                                 </div>
  266.                                 <div class="col-md-6 col-sm-6 col-xs-12">
  267.                                     <ul class="footer-links">
  268.                                         <li><a href="{{ path('app_home') }}">{% trans %}Accueil {% endtrans %}</a></li>
  269.                                         <li><a href="{{ path('app_about') }}">{% trans %}Qui sommes-nous ? {% endtrans %}</a></li>
  270.                                         <li><a href="{{ path('app_solutions') }}">{% trans %}Nos Solutions {% endtrans %}</a></li>
  271.                                     </ul><!-- end links -->
  272.                                 </div>
  273.                                 <div class="col-md-6 col-sm-6 col-xs-12">
  274.                                     <ul class="footer-links">
  275.                                         <li><a href="https://helpdesk.bbcs.be/" target="_blank">{% trans %}Support {% endtrans %}</a></li>
  276.                                         <li><a href="{{ path('app_contact') }}">{% trans %}Contact {% endtrans %}</a></li>
  277.                                         <li><a href="{{ path('app_jobs') }}">{% trans %}Jobs {% endtrans %}</a></li>
  278.                                     </ul><!-- end links -->
  279.                                 </div>
  280.                             </div><!-- end clearfix -->
  281.                         </div><!-- end col -->
  282.                         
  283.                         <div class="col-md-4 col-sm-4 col-xs-12">
  284.                             <div class="widget clearfix">
  285.                                 <div class="widget-title">
  286.                                     <h3>{% trans %}Infos de contact {% endtrans %}</h3>
  287.                                 </div>
  289.                                 <ul class="footer-links">
  290.                                     <li><a href="#">www.bbcs.be</a></li>
  291.                                     <li>Pl. Albert 1er 9, 1300 <br>Limal - Belgique </li>
  292.                                     <li>+32 (0)2 646 58 18</li>
  293.                                 </ul><!-- end links -->
  294.                             </div><!-- end clearfix -->
  295.                         </div><!-- end col -->
  297.                         <div class="col-md-4 col-sm-4 col-xs-12">
  298.                             <div class="widget clearfix">
  299.                                 <div class="widget-title">
  300.                                     <h3>Social</h3>
  301.                                 </div>
  302.                                 <ul class="footer-links">
  303.                                     <li><a href="https://www.facebook.com/profile.php?id=100057278446932" target="_blank"><i class="fa-brands fa-facebook"></i> {% trans %}Likez-nous {% endtrans %}</a></li>
  304.                                     <li><a href="https://www.linkedin.com/company/bandb-computer-solutions/"><i class="fa-brands fa-linkedin"></i> {% trans %}Suivez-nous {% endtrans %}</a></li>
  305.                                     
  306.                                 </ul><!-- end links -->
  307.                             </div><!-- end clearfix -->
  308.                         </div><!-- end col -->
  309.                     </div><!-- end row -->
  310.                 </div><!-- end container -->
  311.             </footer><!-- end footer -->
  313. #}
  315.             <footer class="footer">
  316.                 <div class="container">
  317.                     <div class="footer-container-cols">
  318.                         <div class="footer-col">
  319.                             <p><a class=" footer-title" href="{{ path('app_home') }}">{% trans %}Accueil{% endtrans %}</a></p>
  320.                         </div>
  321.                         <div class="footer-col">
  322.                             <p><a class="footer-text footer-title" href="{{ path('app_about') }}">{% trans %}A Propos{% endtrans %}</a></p>
  323.                             {#<p><a class="footer-text" href="{{ path('app_about') }}">{% trans %}Notre société{% endtrans %}</a></p>#}
  324.                             <p><a class="footer-text" href="{{ path('app_customers') }}">{% trans %}Votre Entreprise{% endtrans %}</a></p>
  325.                         </div>
  326.                         <div class="footer-col">
  327.                             <p><a class="footer-text footer-title" href="{{ path('app_solutions') }}">{% trans %}Nos Solutions{% endtrans %}</a></p>
  328.                             <p><a class="footer-text" href="{{ path('app_expertise') }}">{% trans %}Notre Expertise{% endtrans %}</a></p>
  329.                             {#<p><a class="footer-text" href="{{ path('app_tarification') }}">{% trans %}Tarification{% endtrans %}</a></p>#}
  330.                             <p><a class="footer-text" href="{{ path('app_solutions') }}">{% trans %}Nos Services{% endtrans %}</a></p>
  331.                             <p><a class="footer-text" href="{{ path('app_openSource') }}">{% trans %}Open Source{% endtrans %}</a></p>
  332.                         </div>
  333.                         
  336.                         <div class="footer-col">
  337.                             <p><a class="footer-text footer-title" href="{{ path('app_contact') }}">{% trans %}Contact{% endtrans %}</a></p>
  338.                             <p><a class="footer-text" href="{{ path('app_jobs') }}">{% trans %}Jobs{% endtrans %}</a></p>
  339.                         </div>
  341.                         <div class="footer-col">
  342.                                 <p><a class="footer-text footer-title" href="tel:+3226465818">+32 (0)2 646 58 18</a></p>
  343.                                 <p class="footer-text">Pl. Albert 1er 9, 1300</p>
  344.                                 <p class="footer-text">{% trans %} Limal - Belgique {% endtrans %}</p>
  345.                         </div>
  346.                         
  347.                     </div>
  348.                 </div><!-- end container -->
  349.             </footer><!-- end footer -->
  359.             <div class="copyrights">
  360.                 <div class="container">
  361.                     <div class="footer-distributed">
  362.                         <div class="footer-center">                  
  363.                             <p class="footer-company-name">
  364.                                 {% trans %}Tous droits réservés. {% endtrans %}&copy; 
  365.                                 <script>
  366.                                     document.write(new Date().getFullYear());
  367.                                 </script>  
  368.                                     | <img src="{{ asset('build/bbcs_small.png') }}" alt="bbcs logo miniature"> Computer Solutions 
  369.                             </p> 
  370.                             <p class="footer-company-name reseaux-sociaux">
  371.                                 <a href="https://www.facebook.com/profile.php?id=100057278446932" target="_blank"><i class="fa-brands fa-facebook"></i></a>
  372.                                 <a href="https://www.linkedin.com/company/bandb-computer-solutions/"><i class="fa-brands fa-linkedin"></i></a>
  373.                             </p>
  374.                     </div>
  375.                 </div><!-- end container -->
  376.             </div><!-- end copyrights -->
  378.             <a href="#" id="scroll-to-top" class="dmtop global-radius"><i class="fa fa-angle-up"></i></a>
  381.         {% endblock %}
  383.         <script>
  384.             $(".partners-carousel").owlCarousel({
  385.                 loop:true,
  386.                 autoplay:3000,
  387.                 smartSpeed: 3000,
  388.                 margin: 150,
  389.                 nav:false,
  390.                 dots: false,
  391.                 responsive:{
  392.                     0:{
  393.                         items:1,
  394.                         nav:false
  395.                     },
  396.                     600:{
  397.                         items:2,
  398.                         nav:false
  399.                     },
  400.                     1000:{
  401.                         items:4,
  402.                         loop: true
  403.                     },
  404.                     1200:{
  405.                         items:4,
  406.                         loop: true
  407.                     }
  408.                 }
  409.             });
  411.             $('.testi-carousel').owlCarousel({
  412.                 margin:30,
  413.                 dots:false,
  414.                 nav: true,
  415.                 responsiveClass:true,
  416.                 navText: [
  417.                 "<i class='fa fa-angle-left effect-1'></i>",
  418.                 "<i class='fa fa-angle-right effect-1'></i>"
  419.                 ],
  420.                 responsive:{
  421.                     0:{
  422.                         items:1,
  423.                         nav:true
  424.                     },
  425.                     600:{
  426.                         items:2,
  427.                         nav:true
  428.                     },
  429.                     1000:{
  430.                         items:3,
  431.                         loop: true
  432.                     },
  433.                     1200:{
  434.                         items:3,
  435.                         loop: true
  436.                     }
  437.                 }
  438.             })
  439.         </script>
  441.         <script>
  442.             document.addEventListener('DOMContentLoaded', function () {
  443.                 document.querySelectorAll('.menu-deroulant .fleche').forEach(fleche => {
  444.                     fleche.addEventListener('click', function (e) {
  445.                         e.stopPropagation();
  446.                         const sousMenu = this.nextElementSibling;
  447.                         sousMenu.classList.toggle('open');
  448.                         this.classList.toggle('rotated');
  449.                     });
  451.                     //fermer le menu quand on clique ailleurs
  452.                     document.addEventListener('click', function () {
  453.                         document.querySelectorAll('.menu-deroulant .sous-menu').forEach(menu => {
  454.                             menu.classList.remove('open');
  455.                         });
  456.                         document.querySelectorAll('.menu-deroulant .fleche').forEach(f => {
  457.                             f.classList.remove('rotated');
  458.                         });
  459.                     });
  460.                 });
  461.             });
  462.         </script>
  463.     </body>
  464. </html>