templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. {% set canEdit = canEdit|default(is_granted('ROLE_MANAGER')) %}
  3. <html lang="{{ app.request.locale|split('_')[0] }}">
  4.    <head>
  5.       <meta charset="UTF-8">
  6.       <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.       <meta http-equiv="Cache-Control" content="max-age=0">
  8.       <meta http-equiv="Cache-Control" content="no-store">
  9.       <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  10.       <meta http-equiv="Cache-Control" content="no-cache">
  11.       <meta http-equiv="Pragma" content="no-cache">
  12.       <meta http-equiv="Expires" content="0">
  13.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.       <title>
  15.          {% block title %}
  16.          Welcome!
  17.          {% endblock %}
  18.       </title>
  19.       {% block meta %}
  20.       {% if  content.blocks[1]["description"] is defined  %}  
  21.       <meta name="description" content="{{content.blocks[1]["description"]|striptags}}"> 
  22.       {% else %}
  23.       <meta name="description" content="">
  24.       {% endif
  25.       %} {% endblock %}
  26.       {% block keywords %}
  27.       {% if  content.blocks[1]["keywords"] is defined  %}  
  28.       <meta name="keywords" content="{{content.blocks[1]["keywords"]|striptags}}"> 
  29.       {% else %}
  30.       <meta name="keywords" content="">
  31.       {% endif
  32.       %} {% endblock %}
  33.       <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" rel="stylesheet">
  34.       <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"rel="stylesheet">
  35.       <link rel="preconnect" href="https://fonts.googleapis.com">
  36.       <link rel="stylesheet" href="https://unpkg.com/swiper@9/swiper-bundle.min.css">
  37.       <script src="https://unpkg.com/swiper@9/swiper-bundle.min.js"></script>
  38.       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  39.       <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;600&display=swap" rel="stylesheet">
  40.       {#
  41.       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
  42.       #}
  43.       <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');</style>
  44.       <link href="https://fonts.cdnfonts.com/css/billion-dreams" rel="stylesheet">
  45.       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  46.       <link href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" rel="stylesheet">
  47.       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
  48.       <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  49.       {% block stylesheets %}
  50.       {{ encore_entry_link_tags('tailwind') }}
  51.       {{ encore_entry_link_tags('acoa') }}
  52.       {{ encore_entry_link_tags('app') }}
  53.       {% endblock %}
  54.       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  55.       <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>
  56.       <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  57.       <style>
  59.          html, body{
  60.            width:100%;
  61.            overflow-x: clip;
  62.          }
  63.          @supports not (overflow: clip){
  64.            html, body{ overflow-x: hidden; }
  65.          }
  67.          #loading {
  68.          position: fixed;
  69.          left: 0px;
  70.          top: 0px;
  71.          width: 100%;
  72.          height: 100%;
  73.          z-index: 9999;
  74.          opacity: 0.9;
  75.          background: url("{{ asset('/images/Preloader_2.gif') }}") center no-repeat #fff;  
  76.          }
  77.          .home-nav-overlay {
  78.          position: absolute;
  79.          top: 0;
  80.          left: 0;
  81.          right: 0;
  82.          z-index: 50;
  83.          background: transparent;
  84.          }
  85.          .hero {
  86.          position: relative;
  87.          margin-top: 0;
  88.          }
  89.          .hero-slide {
  90.          position: relative;
  91.          min-height: 80vh;
  92.          }
  93.          .hero-slide::before {
  94.          content: "";
  95.          position: absolute;
  96.          inset: 0;
  97.          background: var(--bg) center/cover no-repeat;
  98.          z-index: 0;
  99.          }
  100.          .hero-overlay {
  101.          position: absolute;
  102.          inset: 0;
  103.          background: rgba(7,51,73,.55); 
  104.          z-index: 1;
  105.          }
  106.          .hero-content {
  107.          position: relative;
  108.          z-index: 2; 
  109.          padding-top: 180px;
  110.          }
  111.          :root{
  112.          --topbar-h: 50px;     
  113.          --pill-h: 64px;       
  114.          --ribbon-h: 28px;     
  115.          --gap: 8px;           
  116.          --nav-offset: 22px; 
  117.          }
  118.          .home-nav-overlay{
  119.          position: absolute;
  120.          top: var(--topbar-h);   
  121.          left: 0; right: 0;
  122.          z-index: 50;
  123.          background: transparent;
  124.          }
  125.          .is-home #navbarindex > .container{
  126.          margin-top: var(--nav-offset);
  127.          }
  128.          .hero{ position: relative; margin-top: 0; }
  129.          .hero-slide{ position: relative; min-height: 80vh; }
  130.          .hero-slide::before{
  131.          content:""; position:absolute; inset:0;
  132.          background: var(--bg) center/cover no-repeat; z-index:0;
  133.          }
  134.          .hero-overlay{ position:absolute; inset:0; background:rgba(7,51,73,.55); z-index:1; }
  135.          .hero-content{
  136.          position:relative; z-index:2;
  137.          padding-top: calc(var(--topbar-h) + var(--nav-offset) + var(--pill-h) + var(--ribbon-h) + var(--gap));
  138.          }
  139.          @media (max-width: 768px){
  140.          :root{ --topbar-h: 46px; --ribbon-h: 24px; --nav-offset: 14px; }
  141.          }
  142.          :root{
  143.          --ribbon-h: 24px;         
  144.          --ribbon-radius: 9999px; 
  145.          }
  146.          .home-event-ribbon{
  147.          margin-top: 10px;                
  148.          height: var(--ribbon-h);
  149.          border-radius: var(--ribbon-radius);
  150.          background: #F14816;
  151.          display: flex;
  152.          align-items: center;
  153.          justify-content: center;
  154.          box-shadow: 0 3px 8px rgba(0,0,0,.15);
  155.          }
  156.          .home-event-text{
  157.          color: #fff;
  158.          font-weight: 700;
  159.          text-transform: uppercase;
  160.          letter-spacing: .04em;
  161.          font-size: 11px;
  162.          line-height: 1;
  163.          white-space: nowrap;      
  164.          }
  165.          @media (max-width: 768px){
  166.          :root{ --ribbon-h: 20px; }
  167.          .home-event-text{ font-size: 10px; letter-spacing: .03em; }
  168.          }
  169.          .home-event-ribbon{
  170.          width: 100%;                
  171.          margin: 10px 0 0 0;       
  172.          height: var(--ribbon-h, 24px);
  173.          border-radius: 9999px;
  174.          background: #F14816;
  175.          display: flex;
  176.          align-items: center;
  177.          justify-content: center;
  178.          box-shadow: 0 3px 8px rgba(0,0,0,.15);
  179.          }
  180.          #navbarindex > .container { padding-left: .75rem; padding-right: .75rem; } 
  181.          .home-event-text{
  182.          color:#fff; font-weight:700; text-transform:uppercase;
  183.          letter-spacing:.04em; font-size:11px; line-height:1;
  184.          white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  185.          }
  186.          .home-event-ribbon--editable form,
  187.          .m-ribbon--editable form{
  188.          display:flex;
  189.          align-items:center;
  190.          width:100%;
  191.          }
  192.          .home-event-ribbon--editable .home-event-text,
  193.          .m-ribbon--editable .home-event-text{
  194.          flex:1;
  195.          border:0;
  196.          background:transparent;
  197.          color:#fff;
  198.          font-weight:700;
  199.          text-transform:uppercase;
  200.          letter-spacing:.04em;
  201.          font-size:11px;
  202.          line-height:1;
  203.          padding:0 12px;
  204.          outline:none;
  205.          }
  206.          .home-event-save{
  207.          border:0;
  208.          background:rgba(255,255,255,.25);
  209.          color:#fff;
  210.          border-radius:9999px;
  211.          padding:4px 10px;
  212.          margin-left:8px;
  213.          font-size:11px;
  214.          font-weight:600;
  215.          cursor:pointer;
  216.          white-space:nowrap;
  217.          }
  218.          .home-event-save:hover{
  219.          background:rgba(255,255,255,.35);
  220.          }
  221.          @media (max-width: 768px){
  222.          .m-ribbon--editable .home-event-text{
  223.          font-size:10px;
  224.          padding:0 8px;
  225.          }
  226.          .home-event-save{
  227.          font-size:10px;
  228.          padding:3px 8px;
  229.          }
  230.          }
  231.          :root { --nav-offset: 22px; }
  232.          .home-event-ribbon { margin-top: 10px; } 
  233.          .home-event-ribbon {
  234.          margin: 0 auto;
  235.          margin-top: 8px;      
  236.          max-width: 80%;       
  237.          background: #F14816;  
  238.          border-radius: 9999px;
  239.          text-align: center;
  240.          padding: 6px 20px;
  241.          font-weight: 700;
  242.          color: #fff;
  243.          font-size: 0.875rem;
  244.          }
  245.          :root{
  246.          --tabW: 42px;          
  247.          --tabH: 117px;         
  248.          --tabR: 20px;          
  249.          --chevW: 10px;          
  250.          --chevH: 8px;          
  251.          }
  252.          .hero-nav{
  253.          position: absolute;
  254.          top: 50%;
  255.          transform: translateY(-50%);
  256.          z-index: 3;
  257.          width: var(--tabW);
  258.          height: var(--tabH);
  259.          box-sizing: border-box;
  260.          background: rgba(217,217,217,.30);
  261.          border: 1px solid rgba(255,255,255,.30);
  262.          box-shadow: 0 2px 8px rgba(0,0,0,.20);
  263.          backdrop-filter: blur(2px);
  264.          -webkit-backdrop-filter: blur(2px);
  265.          display: grid;           
  266.          place-items: center;
  267.          cursor: pointer;
  268.          line-height: 0;
  269.          }
  270.          .hero-nav.prev{
  271.          left: 0;
  272.          border-radius: 0 var(--tabR) var(--tabR) 0;  
  273.          }
  274.          .hero-nav.next{
  275.          right: 0;
  276.          border-radius: var(--tabR) 0 0 var(--tabR);  
  277.          }
  278.          .hero-nav::before{
  279.          content: "";
  280.          width: 0; height: 0;
  281.          border-top: var(--chevH) solid transparent;
  282.          border-bottom: var(--chevH) solid transparent;
  283.          }
  285.          .hero-nav.prev{ left:0; }
  286.          .hero-nav.next{
  287.          right:0;
  288.          border-radius: 20px 0 0 20px;
  289.          }
  291.          .hero-nav:hover{ box-shadow: 0 3px 12px rgba(0,0,0,.28); }
  292.          @media (max-width:768px){
  293.          :root{ --tabW:36px; --tabH:100px; }
  294.          }
  295.          .hero { position: relative; }
  296.          .hero-nav{
  297.          position:absolute;
  298.          top:50%;
  299.          transform:translateY(-50%);
  300.          z-index:5;
  301.          width:42px;
  302.          height:117px;
  303.          border:1px solid rgba(217,217,217,.30);
  304.          background: rgba(141,156,165,.85);       
  305.          border-radius: 0 20px 20px 0;            
  306.          box-shadow:
  307.          0 6px 14px rgba(0,0,0,.18),
  308.          inset 0 1px 0 rgba(255,255,255,.25);
  309.          display:flex;
  310.          align-items:center;
  311.          justify-content:center;
  312.          font-size:0;
  313.          color:transparent;
  314.          }
  315.          .hero-nav.prev{ left:-1px; }              
  316.          .hero-nav.next{
  317.          right:-1px;
  318.          border-radius: 20px 0 0 20px;            
  319.          }
  320.          .hero-nav::before{
  321.          content:"";
  322.          display:block;
  323.          width:0; height:0;
  324.          border-top:8px solid transparent;
  325.          border-bottom:8px solid transparent;
  326.          }
  327.          .hero-nav.prev::before{
  328.          border-right:10px solid #fff;
  329.          margin-left:2px;                         
  330.          }
  331.          .hero-nav.next::before{
  332.          border-left:10px solid #fff;
  333.          margin-right:2px;                       
  334.          }
  335.          .hero-nav:hover{
  336.          background: rgba(141,156,165,.95);
  337.          box-shadow:
  338.          0 8px 16px rgba(0,0,0,.22),
  339.          inset 0 1px 0 rgba(255,255,255,.3);
  340.          }
  341.          :root{
  342.          --paddle-h: 72px;       
  343.          }
  344.          .hero-nav{
  345.          height: var(--paddle-h);
  346.          }
  347.          .hero-nav.prev{  border-radius: 0 16px 16px 0; }
  348.          .hero-nav.next{  border-radius: 16px 0 0 16px; }
  349.          @media (max-width: 768px){
  350.          :root{ --paddle-h: 64px; }
  351.          .hero-nav.prev{ border-radius: 0 14px 14px 0; }
  352.          .hero-nav.next{ border-radius: 14px 0 0 14px; }
  353.          }
  354.          .boxFooter{ max-width:1280px }
  355.          .footer-grid{
  356.          display:grid;
  357.          grid-template-columns: repeat(3, 1fr);
  358.          gap: clamp(28px, 4vw, 60px);
  359.          align-items:start;
  360.          }
  361.          .footer-col{ min-width:0 }
  362.          .footer-title{
  363.          margin: 0 0 10px 0;
  364.          font-weight:700;
  365.          font-size: clamp(20px, 2.3vw, 34px);
  366.          line-height:1.1;
  367.          text-transform:none;
  368.          }
  369.          .footer-text{ color:#E8F2F7; line-height:1.8; margin:0 }
  370.          .footer-list{ margin:14px 0 0 0; padding:0; list-style:none }
  371.          .footer-list li{
  372.          position:relative;
  373.          margin: 12px 0 0 0;
  374.          padding-left: 18px;
  375.          }
  376.          .footer-list li::before{
  377.          content:""; position:absolute; left:0; top:.62em;
  378.          width:6px; height:6px; border-radius:2px; background:#6CA1B8;
  379.          }
  380.          .footer-logo img{ width:auto; height:64px; display:block; margin:0 0 24px 0; background:#fff; padding:4px 6px; border-radius:4px }
  381.          .qualio-badge{ height:125px; width:auto; display:block; margin: 6px 0 0 0 }
  382.          .news-form{ margin-top:6px }
  383.          .news-row{
  384.          display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  385.          margin: 6px 0 12px 0;
  386.          }
  387.          .news-row input{
  388.          height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.25);
  389.          background: #0f4b67; color:#fff; padding:0 12px;
  390.          }
  391.          .news-row input::placeholder{ color:#C8D8E1 }
  392.          .news-submit{
  393.          display:inline-flex; align-items:center; justify-content:center;
  394.          min-height:44px; padding:0 22px; border-radius:9999px; border:0;
  395.          background:#F14816; color:#fff; font-weight:700;
  396.          box-shadow:0 10px 22px rgba(241,72,22,.25);
  397.          }
  398.          .news-submit:hover{ filter:brightness(1.06); transform:translateY(-1px) }
  399.          @media (max-width: 1024px){
  400.          .footer-grid{ grid-template-columns: 1fr; }
  401.          .news-row{ grid-template-columns: 1fr; }
  402.          }
  403.          .boxFooter{ max-width:1280px }
  404.          .footer-grid{
  405.          display:grid;
  406.          grid-template-columns: 1.2fr 1.2fr 1fr 1fr;
  407.          gap: clamp(24px, 4vw, 56px);
  408.          align-items:start;
  409.          }
  410.          .footer-col{ min-width:0 }
  411.          .footer-title{
  412.          margin: 0 0 10px 0;
  413.          font-weight:700;
  414.          font-size: clamp(14px, 1.4vw, 18px);
  415.          line-height:1.2;
  416.          text-transform:none;
  417.          color:#fff;
  418.          }
  419.          .footer-text{ color:#E8F2F7; line-height:1.8; margin:0 }
  420.          .footer-list{ margin:12px 0 0 0; padding:0; list-style:none }
  421.          .footer-list li{ position:relative; margin:10px 0 0 0; padding-left:16px }
  422.          .footer-list li::before{
  423.          content:""; position:absolute; left:0; top:.6em;
  424.          width:6px; height:6px; border-radius:2px; background:#6CA1B8;
  425.          }
  426.          .footer-list a{ color:#E8F2F7; }
  427.          .footer-list a:hover{ color:#fff; text-decoration:underline }
  428.          .footer-logo img{ height:64px; width:auto; background:#fff; padding:4px 6px; border-radius:4px; display:block; margin-bottom:16px }
  429.          .footer-logo--secondary img{ height:56px; margin-top:14px; margin-bottom:0; }
  430.          .qualio-badge{ height:125px; width:auto; display:block }
  431.          .news-form{ margin-top:6px }
  432.          .news-col{ display:grid; grid-template-columns:1fr; gap:8px; max-width:280px }
  433.          .news-col input{
  434.          height:38px; border-radius:6px; border:1px solid rgba(255,255,255,.25);
  435.          background:#0f4b67; color:#fff; padding:0 10px; width:100%;
  436.          }
  437.          .news-col input::placeholder{ color:#C8D8E1 }
  438.          .news-submit{
  439.          margin-top:10px;
  440.          display:inline-flex; align-items:center; justify-content:center;
  441.          min-height:36px; padding:0 18px; border-radius:9999px; border:0;
  442.          background:#F14816; color:#fff; font-weight:700;
  443.          box-shadow:0 10px 22px rgba(241,72,22,.25);
  444.          }
  445.          .news-submit:hover{ filter:brightness(1.06); transform:translateY(-1px) }
  446.          @media (max-width: 1100px){
  447.          .footer-grid{ grid-template-columns: 1fr 1fr; }
  448.          }
  449.          @media (max-width: 640px){
  450.          .footer-grid{ grid-template-columns: 1fr; }
  451.          }
  452.          .footer-col--news .news-col input{
  453.          background:#fff;
  454.          color:#BA501D;
  455.          border:1px solid rgba(10,42,69,.18);
  456.          }
  457.          .footer-col--news .news-col input::placeholder{
  458.          color:#6B7280; opacity:1;
  459.          }
  460.          @media (max-width:768px){
  461.          #navbarindex{ display:none !important; }      
  462.          }
  463.          @media (min-width:769px){
  464.          .m-header, #m-drawer, .m-ribbon{ display:none !important; } 
  465.          }
  466.          .m-header{ position:sticky; top:0; z-index:60; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06); }
  467.          .m-burger,.m-account{ display:grid; place-items:center; width:40px; height:40px; border:0; background:none; cursor:pointer; }
  468.          .m-burger span{
  469.          display:block;
  470.          width:22px;
  471.          height:3px;
  472.          background:#F14816;
  473.          border-radius:2px;
  474.          margin:3px 0;
  475.          box-shadow:0 0 0 1px rgba(241,72,22,.08) inset;
  476.          }
  477.          .m-burger:focus-visible{ outline:2px solid #F14816; outline-offset:2px; }
  478.          .m-account i{
  479.          color:#F14816 !important;
  480.          font-weight:900;
  481.          font-size:1.25rem;
  482.          }
  483.          .m-ribbon{
  484.          height:22px; display:flex; align-items:center; justify-content:center;
  485.          background:#F14816; color:#fff; font-weight:700; font-size:10px; letter-spacing:.03em;
  486.          }
  487.          .m-drawer{ position:fixed; inset:0; z-index:70; }
  488.          .m-drawer[hidden]{ display:none !important; }
  489.          .m-drawer__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:0; }
  490.          .m-drawer__panel{
  491.          position:absolute; top:0; left:0; bottom:0; width:min(84vw,360px);
  492.          background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25);
  493.          padding:18px 14px; transform:translateX(-102%); transition:transform .2s ease;
  494.          z-index:1;
  495.          }
  496.          .m-drawer.open .m-drawer__panel{ transform:translateX(0); }
  497.          .m-drawer__close{ position:absolute; top:8px; right:8px; width:36px; height:36px; border:0; background:#f5f5f6; border-radius:8px; font-size:20px; }
  498.          .m-drawer__nav{ list-style:none; margin:48px 0 0; padding:0; display:grid; gap:10px; }
  499.          .m-drawer__nav a{
  500.          display:block; padding:12px 10px; border-radius:10px; color:#BA501D; font-weight:700; text-decoration:none;
  501.          }
  502.          .m-drawer__nav a:hover{ background:#f3f6f9; }
  503.          @media (max-width:768px){
  504.          .hero .container.hero-content{
  505.          display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  506.          padding:140px 16px 88px !important;
  507.          text-align:left;
  508.          }
  509.          .hero .hero-kicker{ order:1; font-size:12px; }
  510.          .hero .hero-title{ order:2; font-size:clamp(22px,7vw,30px); margin:8px 0 4px; }
  511.          .hero .hero-ctas{ order:99; margin-top:6px; }   
  512.          .hero .hero-ctas .btn{ padding:12px 20px; }
  513.          .hero .hero-nav{ display:none !important; }    
  514.          .hero .hero-dots{ bottom:16px; }
  515.          }
  516.          @media (max-width: 640px){
  517.          .footer-grid{
  518.          display: grid !important;
  519.          grid-template-columns: 1fr;
  520.          gap: 20px;
  521.          align-items: start;
  522.          }
  523.          .footer-col{
  524.          display:block !important;
  525.          min-width:0;
  526.          }
  527.          .footer-col--about .footer-logo,
  528.          .footer-col--quality .qualio-badge{
  529.          justify-self:center;
  530.          margin-left:auto;
  531.          margin-right:auto;
  532.          }
  533.          .footer-col--about .footer-logo img,
  534.          .footer-col--about .footer-logo--secondary img,
  535.          .footer-col--quality .qualio-badge{
  536.          height:125px;
  537.          width:auto;
  538.          }
  539.          .footer-title{
  540.          text-align:center;
  541.          font-size:14px;
  542.          }
  543.          .footer-text,
  544.          .footer-list{
  545.          font-size:13px;
  546.          line-height:1.6;
  547.          }
  548.          .footer-col--news .news-col{
  549.          max-width:320px;
  550.          margin:8px auto 0;
  551.          display:grid;
  552.          grid-template-columns:1fr;
  553.          gap:10px;
  554.          }
  555.          .footer-col--news .news-submit{
  556.          display:block;
  557.          margin:10px auto 0;
  558.          min-width:180px;
  559.          border-radius:9999px;
  560.          }
  561.          }
  562.          @media (max-width: 767.98px){
  563.          #topnav{ display:none !important; }
  564.          :root{ --topbar-h: 0px !important; } 
  565.          }
  567.          :root{--aoca-orange:#BA501D}
  568.          .bg-aoca-orange{background-color:var(--aoca-orange)!important}
  569.          .aoca-orange-bar{background-color:var(--aoca-orange)}
  571.          .navbar .nav-link{font-size:14px;line-height:1.1}
  572.          .navbar-brand img{max-height:32px;width:auto;height:auto}
  574.          @media (width:1920px) and (height:1080px), (min-width:1920px){
  575.            #navbarindex ul{font-size:12px}
  576.            #navbarindex a.py-2{padding-top:.375rem;padding-bottom:.375rem}
  577.          }
  578.          html, body{
  579.   max-width:100%;
  580.   overflow-x:hidden;
  581. }
  583.          .nav-dd{ position:relative; }
  584.          .nav-dd__trigger{
  585.            display:inline-flex;
  586.            align-items:center;
  587.            gap:.5rem;
  588.            border:0;
  589.            background:transparent;
  590.            cursor:pointer;
  591.            padding: .5rem 0;
  592.            color: inherit;
  593.            font: inherit;
  594.            letter-spacing: inherit;
  595.            text-transform: inherit;
  596.            line-height: inherit;
  597.          }
  598.          .nav-dd__chev{ width:14px; height:14px; display:inline-block; transition:transform .15s ease; }
  599.          .nav-dd__menu{
  600.            display:none;
  601.            position:absolute;
  602.            left:50%;
  603.            top:100%;
  604.            transform:translateX(-50%);
  605.            margin-top:14px;
  606.            min-width: 360px;
  607.            max-width: min(520px, 80vw);
  608.            background:#fff;
  609.            border:1px solid rgba(229,231,235,1);
  610.            border-radius: 18px;
  611.            box-shadow: 0 18px 40px rgba(0,0,0,.12);
  612.            padding: 12px 0;
  613.            z-index: 1000;
  614.          }
  615.          .nav-dd__menu::before{
  616.            content:"";
  617.            position:absolute;
  618.            left:0;
  619.            right:0;
  620.            top:-14px;
  621.            height:14px;
  622.          }
  623.          .nav-dd:hover .nav-dd__menu,
  624.          .nav-dd:focus-within .nav-dd__menu{ display:block; }
  625.          .nav-dd:hover .nav-dd__chev,
  626.          .nav-dd:focus-within .nav-dd__chev{ transform: rotate(180deg); }
  627.          .nav-dd__menu a{
  628.            display:block;
  629.            padding: 12px 18px;
  630.            color:#4B5563;
  631.            font-weight:600;
  632.            text-transform:none;
  633.            letter-spacing:0;
  634.            white-space:nowrap;
  635.          }
  636.          .nav-dd__menu a:hover{
  637.            background:#F3F6F9;
  638.            color:#111827;
  639.          }
  640.          .nav-dd__menu a.is-active{ color:#F14816; }
  642.          .m-subnav__btn{
  643.            width:100%;
  644.            display:flex;
  645.            align-items:center;
  646.            justify-content:space-between;
  647.            padding:12px 10px;
  648.            border-radius:10px;
  649.            color:#BA501D;
  650.            font-weight:700;
  651.            background:transparent;
  652.            border:0;
  653.            cursor:pointer;
  654.          }
  655.          .m-subnav__btn:hover{ background:#f3f6f9; }
  656.          .m-subnav__list{
  657.            list-style:none;
  658.            padding:0;
  659.            margin: 6px 0 0;
  660.            display:grid;
  661.            gap:6px;
  662.          }
  663.          .m-subnav__list[hidden]{ display:none !important; }
  664.          .m-subnav__list a{
  665.            display:block;
  666.            padding:10px 10px 10px 14px;
  667.            border-radius:10px;
  668.            color:#4B5563;
  669.            font-weight:700;
  670.            text-decoration:none;
  671.          }
  672.          .m-subnav__list a:hover{ background:#f3f6f9; color:#111827; }
  673.          .m-subnav__list a.is-active{ color:#F14816; }
  675.       </style>
  676.       <script>
  677.          function onReady2(callback) {
  678.              var intervalId = window.setInterval(function() {
  679.                  if (document.getElementsByTagName('body')[0] !== undefined) {
  680.                  window.clearInterval(intervalId);
  681.                  callback.call(this);
  682.                  }
  683.              }, 100);
  684.          }
  685.          
  686.          function setVisible2(selector, visible) {
  687.              document.querySelector(selector).style.display = visible ? 'block' : 'none';
  688.          }
  689.          
  690.          window.onload = function(e){ 
  691.              onReady2(function() {
  692.                  setVisible2('#loading', false);
  693.              });
  694.          }
  695.       </script>
  696.    </head>
  697.    {% set route_name = app.request.attributes.get('_route') %}
  698.    {% set is_home = route_name in ['home','homepage','app_home','website_home','front_home'] %}
  699.    <body class="{{ is_home ? 'is-home' : '' }}">
  700.       <div id="loading"></div>
  701.       <div class="mx-auto overflow-x-hidden {% if route_name == 'student_lms_course_read' %}StudentContainer{% endif %}">
  702.          {% set route_name = app.request.attributes.get('_route') %}
  703.          {% set is_home = route_name in ['home','homepage','app_home','website_home','front_home'] %}
  704.          {% set route_name = app.request.attributes.get('_route') %}
  705.          {% set path      = app.request.pathinfo %}
  706.          {% set locale    = app.request.locale|split('_')[0] %}
  707.          {% set is_home =
  708.          route_name in ['home','homepage','app_home','website_home','front_home'] 
  709.          or path == '/'                                                             
  710.          or path == '/' ~ locale
  711.          %}
  712.          {% set eventRibbonText = eventRibbonText|default(
  713.          'JEUDI 5 ET VENDREDI 6 DÉCEMBRE 2024 · HÔTEL ARAWAK · GOSIER, GUADELOUPE'
  714.          ) %}
  715.          <header class="{{ is_home ? 'absolute top-0 left-0 right-0 z-50' : 'relative z-10' }}">
  716.             {% block header %}
  717.             <div id="topnav" style="background-color: #041F60;">
  718.                <div class="container mx-auto px-3">
  719.                   <div class="flex flex-wrap items-center gap-x-6 gap-y-2 py-2 text-white">
  720.                      <div class="text-left font-[600]">
  721.                         Avez-vous une question?
  722.                      </div>
  723.                      <div class="flex items-center gap-2 whitespace-nowrap text-sm">
  724.                         <a href="tel:+0590445599"> Tel: 05 90 44 55 99</a>
  725.                      </div>
  726.                      <div class="flex items-center gap-2 text-sm">
  727.                         <a href="mailto:contact@acoa.fr">contact@acoa.fr</a>
  728.                      </div>
  729.                      <div class="flex items-center gap-2 min-w-0 flex-1 text-sm">
  730.                         <p class="truncate xl:whitespace-normal">
  731.                            7 Immeuble Plein Sud – rue Claude Emmanuel Blandin – ZAC de Moudong Sud 97122 BAIE-MAHAULT (Guadeloupe)
  732.                         </p>
  733.                      </div>
  734.                      <div class="ml-auto md:flex">
  735.                         {% if is_granted('IS_AUTHENTICATED_FULLY') %}
  736.                         <div id="login" class="mt-2">
  737.                            <button class="loginConnected h-8 rounded-full -mt-1 text-white inline-flex items-center justify-center gap-2 px-4">
  738.                            <a href="{{ path('backend_my_account') }}">Mon compte</a>
  739.                            <span class="px-1" aria-hidden="true">|</span>
  740.                            <a href="{{ path('app_logout') }}">Deconnexion</a>
  741.                            </button>
  742.                         </div>
  743.                         {% else %}
  744.                         <div id="login" class="mt-2">
  745.                            <button class="loginDeconnected h-8 rounded-full -mt-1 text-white inline-flex items-center justify-center gap-2 px-4">
  746.                            <i class="fa-solid fa-user text-[#F14816] text-base leading-none align-middle"></i>
  747.                            <a href="{{ path('login') }}">Login</a>
  748.                            <span class="px-1" aria-hidden="true">|</span>
  749.                            <a href="{{ path('login') }}">Inscription</a>
  750.                            </button>
  751.                         </div>
  752.                         {% endif %}
  753.                      </div>
  754.                   </div>
  755.                </div>
  756.             </div>
  757.            <div class="m-header md:hidden">
  758.   <div class="container mx-auto px-3 h-14 flex items-center justify-between">
  759.     <button class="m-burger" style="height:20px;" type="button"
  760.             aria-controls="m-drawer" aria-expanded="false"
  761.             aria-label="Ouvrir le menu">
  762.       <span></span><span></span><span></span>
  763.     </button>
  765.     <a class="m-brand" href="{{ path('homepage') }}" aria-label="Accueil">
  766.       <img src="{{ asset('/images/logo_acoa.png') }}" style="height:30px;" alt="ACOA" class="h-7 w-auto">
  767.     </a>
  769.     {% if is_granted('IS_AUTHENTICATED_FULLY') %}
  770.       <a class="m-account" href="{{ path('backend_my_account') }}" aria-label="Mon compte">
  771.         <i class="fa-solid fa-user text-[#F14816] text-xl font-black"></i>
  772.       </a>
  773.     {% else %}
  774.       <a class="m-account" href="{{ path('login') }}" aria-label="Se connecter">
  775.         <i class="fa-solid fa-user text-[#F14816] text-xl font-black"></i>
  776.       </a>
  777.     {% endif %}
  778.   </div>
  780.  {% if is_home %}
  781.   <div class="m-ribbon">
  782.     <span class="home-event-text">{{ eventRibbonText }}</span>
  783.   </div>
  784. {% endif %}
  786. </div>
  788.             <nav id="m-drawer" class="m-drawer md:hidden" hidden>
  789.                <div class="m-drawer__panel" role="dialog" aria-modal="true" aria-label="Navigation">
  790.                   <button class="m-drawer__close" type="button" aria-label="Fermer le menu">×</button>
  791.                   {% set current_path = app.request.pathInfo %}
  792.                   {% set dom_paths = [
  793.                     '/organisation-sociale-medico-social',
  794.                     '/management',
  795.                     '/evolution-transition-pro',
  796.                     '/gestion-des-risques',
  797.                     '/mobilisation-et-cohesion-d-equipes',
  798.                     '/equipe-cadres-managers',
  799.                     '/organisation-travail-approche-qualite',
  800.                     '/elaboration-et-conduite-de-projet',
  801.                     '/sante-au-travail'
  802.                   ] %}
  803.                   {% set pre_routes = ['catalog_professionnel','catalog_entreprise'] %}
  804.                   <ul class="m-drawer__nav" role="list">
  805.                      <li><a href="{{ path('homepage') }}">Accueil</a></li>
  806.                      <li><a href="/about">Qui sommes-nous ?</a></li>
  808.                      <li class="m-subnav">
  809.                         <button class="m-subnav__btn" type="button" aria-expanded="false" aria-controls="m-subnav-dom">
  810.                           <span>Domaines de compétences</span>
  811.                           <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
  812.                         </button>
  813.                         <ul id="m-subnav-dom" class="m-subnav__list" hidden>
  814.                           <li><a class="{% if current_path == '/organisation-sociale-medico-social' %}is-active{% endif %}" href="/organisation-sociale-medico-social">Organisation sociale &amp; médico sociale</a></li>
  815.                           <li><a class="{% if current_path == '/management' %}is-active{% endif %}" href="/management">Management des ressources humaines</a></li>
  816.                           <li><a class="{% if current_path == '/gestion-des-risques' %}is-active{% endif %}" href="/gestion-des-risques">Gestion globale des risques, des crises &amp; développement durable</a></li>
  817.                           <li><a class="{% if current_path == '/evolution-transition-pro' %}is-active{% endif %}" href="/evolution-transition-pro">Évolution et transition professionnelle</a></li>
  818.                           <li><a class="{% if current_path == '/mobilisation-et-cohesion-d-equipes' %}is-active{% endif %}" href="/mobilisation-et-cohesion-d-equipes">Mobilisation et cohésion d’équipes</a></li>
  819.                           <li><a class="{% if current_path == '/equipe-cadres-managers' %}is-active{% endif %}" href="/equipe-cadres-managers">Equipe de cadres et managers</a></li>
  820.                           <li><a class="{% if current_path == '/organisation-travail-approche-qualite' %}is-active{% endif %}" href="/organisation-travail-approche-qualite">Organisation du travail par l’approche qualité</a></li>
  821.                           <li><a class="{% if current_path == '/elaboration-et-conduite-de-projet' %}is-active{% endif %}" href="/elaboration-et-conduite-de-projet">Élaboration et conduite de projet</a></li>
  822.                           <li><a class="{% if current_path == '/sante-au-travail' %}is-active{% endif %}" href="/sante-au-travail">Santé au travail</a></li>
  823.                         </ul>
  824.                      </li>
  826.                      <li class="m-subnav">
  827.                         <button class="m-subnav__btn" type="button" aria-expanded="false" aria-controls="m-subnav-pre">
  828.                           <span>Prestations</span>
  829.                           <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
  830.                         </button>
  831.                         <ul id="m-subnav-pre" class="m-subnav__list" hidden>
  832.                           <li><a class="{% if route_name == 'catalog_professionnel' %}is-active{% endif %}" href="{{ path('catalog_professionnel') }}">Actions de formation</a></li>
  833.                           <li><a class="{% if route_name == 'catalog_entreprise' %}is-active{% endif %}" href="{{ path('catalog_entreprise') }}">Interventions en entreprise</a></li>
  834.                         </ul>
  835.                      </li>
  837.                      <li><a href="{{ path('_contact') }}">Contact</a></li>
  838.                   </ul>
  839.                </div>
  840.                <div class="m-drawer__backdrop" tabindex="-1" aria-hidden="true"></div>
  841.             </nav>
  842.             {% block navbar %}
  843.             {% set route_name = app.request.attributes.get('_route') %}
  844.            <style>
  845. #navbarindex .nav-logo{display:flex;align-items:center;justify-content:center;height:64px;padding-left:16px;padding-right:24px;line-height:0}
  846. #navbarindex .nav-logo img{height:38px;width:auto;display:block}
  847. @media (min-width:768px){
  848.   #navbarindex .nav-logo img{height:40px}
  849. }
  850. @media (width:1920px) and (height:1080px), (min-width:1920px){
  851.   #navbarindex .nav-logo img{height:32px}
  852. }
  853. </style>
  855. {% set current_path = app.request.pathInfo %}
  856. {% set dom_paths = [
  857.   '/organisation-sociale-medico-social',
  858.   '/management',
  859.   '/gestion-des-risques',
  860.   '/evolution-transition-pro',
  861.   '/mobilisation-et-cohesion-d-equipes',
  862.   '/equipe-cadres-managers',
  863.   '/organisation-travail-approche-qualite',
  864.   '/elaboration-et-conduite-de-projet',
  865.   '/sante-au-travail'
  866. ] %}
  867. {% set pre_routes = ['catalog_professionnel','catalog_entreprise'] %}
  868. {% set dom_active = current_path in dom_paths %}
  869. {% set pre_active = route_name in pre_routes %}
  871. <div id="navbarindex" class="{{ is_home ? 'home-nav-overlay' : 'bg-white shadow' }}">
  872.   <div class="container mx-auto px-3">
  873.     <div class="bg-white rounded-full shadow-md border border-gray-100 flex items-center min-h-[64px] px-3 sm:px-4">
  874.       <a href="{{ path('homepage') }}" class="nav-logo shrink-0">
  875.         <img src="{{ asset('/images/logo_acoa.png') }}" alt="acoa">
  876.       </a>
  877.       <nav class="flex-1">
  878.         <ul class="flex justify-center items-center gap-6 lg:gap-10 text-[#BA501D] font-semibold uppercase text-sm md:text-base">
  879.           <li><a class="py-2 {% if route_name == 'homepage' %}text-[#F14816]{% endif %}" href="{{ path('homepage') }}">ACCUEIL</a></li>
  880.           <li><a class="py-2 {% if app.request.pathInfo == '/about' %}text-[#F14816]{% endif %}" href="/about">QUI SOMMES-NOUS ?</a></li>
  882.           <li class="nav-dd">
  883.             <button type="button" class="nav-dd__trigger {% if dom_active %}text-[#F14816]{% endif %}" aria-haspopup="true">
  884.               <span>DOMAINES DE COMPÉTENCES</span>
  885.               <svg class="nav-dd__chev" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  886.                 <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" clip-rule="evenodd"></path>
  887.               </svg>
  888.             </button>
  889.             <div class="nav-dd__menu" role="menu" aria-label="Domaines de compétences">
  890.               <a role="menuitem" class="{% if current_path == '/organisation-sociale-medico-social' %}is-active{% endif %}" href="/organisation-sociale-medico-social">Organisation sociale &amp; médico sociale</a>
  891.               <a role="menuitem" class="{% if current_path == '/management' %}is-active{% endif %}" href="/management">Management des ressources humaines</a>
  892.               <a role="menuitem" class="{% if current_path == '/gestion-des-risques' %}is-active{% endif %}" href="/gestion-des-risques">Gestion globale des risques, des crises &amp; développement durable</a>
  893.               <a role="menuitem" class="{% if current_path == '/evolution-transition-pro' %}is-active{% endif %}" href="/evolution-transition-pro">Évolution et transition professionnelle</a>
  894.               <a role="menuitem" class="{% if current_path == '/mobilisation-et-cohesion-d-equipes' %}is-active{% endif %}" href="/mobilisation-et-cohesion-d-equipes">Mobilisation et cohésion d’équipes</a>
  895.               <a role="menuitem" class="{% if current_path == '/equipe-cadres-managers' %}is-active{% endif %}" href="/equipe-cadres-managers">Equipe de cadres et managers</a>
  896.               <a role="menuitem" class="{% if current_path == '/organisation-travail-approche-qualite' %}is-active{% endif %}" href="/organisation-travail-approche-qualite">Organisation du travail par l’approche qualité</a>
  897.               <a role="menuitem" class="{% if current_path == '/elaboration-et-conduite-de-projet' %}is-active{% endif %}" href="/elaboration-et-conduite-de-projet">Élaboration et conduite de projet</a>
  898.               <a role="menuitem" class="{% if current_path == '/sante-au-travail' %}is-active{% endif %}" href="/sante-au-travail">Santé au travail</a>
  899.             </div>
  900.           </li>
  902.           <!--<li class="nav-dd">
  903.             <button type="button" class="nav-dd__trigger {% if pre_active %}text-[#F14816]{% endif %}" aria-haspopup="true">
  904.               <span>PRESTATIONS</span>
  905.               <svg class="nav-dd__chev" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  906.                 <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z" clip-rule="evenodd"></path>
  907.               </svg>
  908.             </button>
  909.             <div class="nav-dd__menu" role="menu" aria-label="Prestations">
  910.               <a role="menuitem" class="{% if route_name == 'catalog_professionnel' %}is-active{% endif %}" href="{{ path('catalog_professionnel') }}">Actions de formation</a>
  911.               <a role="menuitem" class="{% if route_name == 'catalog_entreprise' %}is-active{% endif %}" href="{{ path('catalog_entreprise') }}">Interventions en entreprise</a>
  912.             </div>
  913.           </li>-->
  915.           <li><a class="py-2 {% if route_name == '_contact' %}text-[#F14816]{% endif %}" href="{{ path('_contact') }}">CONTACT</a></li>
  916.         </ul>
  917.       </nav>
  918.       <div class="shrink-0 w-10 md:w-14"></div>
  919.     </div>
  920.   </div>
  921. </div>
  923.             {% endblock %}
  924.             <script>
  925.                document.getElementById('navToggle')?.addEventListener('click', () => {
  926.                  const el = document.getElementById('mobileNav');
  927.                  el.classList.toggle('hidden');
  928.                });
  929.             </script>
  930.             {% endblock %}
  931.          </header>
  932.          <main>
  933.             {% block content %}{% endblock %}
  934.          </main>
  935.          {% block footer %}
  936.          <footer class="flex flex-col {% if route_name == 'student_lms_course_read' %}StudentFooter{% endif %}">
  937.   <div class="text-white" style="background:#16235E; font-family:Poppins;">
  938.     <div class="boxFooter mx-auto py-10 px-6">
  939.       <div class="footer-grid">
  940.         <section class="footer-col footer-col--about">
  941.           <div class="footer-logo">
  942.             <img src="{{ asset('/images/logo_acoa.png')|replace({' ': '%20'}) }}" alt="ACOA">
  943.           </div>
  944.           <p class="footer-text">
  945.             Pour toute prestation ou partenariat, bénéficiez d'un accompagnement adapté et des
  946.             solutions d'une équipe dédiée pour tous vos projets d'entreprise. Nous avons sûrement
  947.             une solution pour vous.
  948.           </p>
  949.           <div class="footer-logo footer-logo--secondary">
  950.             <img src="{{ asset('assets/img/logo-guadeloupe.png')|replace({' ': '%20'}) }}" alt="ACOA - L’énergie du changement">
  951.           </div>
  952.         </section>
  954.         <section class="footer-col footer-col--quality">
  955.           <h3 class="footer-title">Qualité et certification</h3>
  956.           <a href="https://www.dropbox.com/scl/fi/zkw0uqey6dkpu2iws7536/Certificat-Qualiopi-ACOA-SARL.pdf?rlkey=dovm2ge3x9joont4i8fp4tqx5&e=1&dl=0" target="_blank" rel="noopener noreferrer" aria-label="Ouvrir le certificat Qualiopi (nouvel onglet)">
  957.             <img src="{{ asset('assets/img/new-logo-qualiopi.png')|replace({' ': '%20'}) }}" alt="Qualiopi" class="qualio-badge">
  958.           </a>
  959.           <p class="footer-text mt-4">
  960.             La certification Qualiopi a été délivrée au cabinet ACOA au titre des catégories d’actions suivantes&nbsp;:
  961.           </p>
  962.           <ul class="footer-list">
  963.             <li>Action de formation</li>
  964.             <li>Bilan de compétences</li>
  965.           </ul>
  966.         </section>
  968.         <section class="footer-col footer-col--links">
  969.           <h3 class="footer-title">À propos de nous</h3>
  970.           <ul class="footer-list">
  971.             <li><a href="/about">Qui sommes-nous</a></li>
  972.             <li><a href="{{ path('_contact') }}">Contact</a></li>
  973.             <li><a href="/politique-de-confidentialite">Politique de confidentialité</a></li>
  974.             <li><a href="/conditions-generales-de-vente">Conditions Générales de ventes</a></li>
  975.           </ul>
  976.         </section>
  978.         <section class="footer-col footer-col--news">
  979.           <h3 class="footer-title">ABONNEZ VOUS A NOTRE NEWSLETTER</h3>
  980.           <form class="news-form" action="#" method="post">
  981.             <div class="news-col">
  982.               <input type="text" name="lastname" placeholder="Nom">
  983.               <input type="text" name="firstname" placeholder="Prénom">
  984.               <input type="email" name="email" placeholder="Email">
  985.             </div>
  986.             <button type="submit" class="news-submit">Abonnez-vous</button>
  987.           </form>
  988.         </section>
  989.       </div>
  990.     </div>
  991.   </div>
  992. </footer>
  994.          {% block javascripts %}
  995.          <script src="https://unpkg.com/flowbite@1.3.4/dist/flowbite.js"></script>
  996.          {{ encore_entry_script_tags('app') }}
  997.          <script>
  998.             const btn = document.querySelector('.btn');
  999.             
  1000.                 btn.addEventListener('click', () => {
  1001.             
  1002.                     window.scrollTo({
  1003.                         top: 0,
  1004.                         left: 0,
  1005.                         behavior: "smooth"
  1006.                     })
  1007.             
  1008.                 })
  1009.                 
  1010.          </script>
  1011.          <script>
  1012.             window.onscroll = function() {myFunction()};
  1013.             
  1014.                
  1015.                 var header = document.getElementById("navbarindex");
  1016.             
  1017.                
  1018.                 var sticky = header.offsetTop;
  1019.             
  1020.                 function myFunction() {
  1021.                 if (window.pageYOffset > sticky) {
  1022.                     header.classList.add("sticky");
  1023.                 } else {
  1024.                     header.classList.remove("sticky");
  1025.                 }
  1026.             }
  1027.             
  1028.             function DisplayFond() {
  1029.                 var x = document.getElementById('MenuM');
  1030.                 var fdnoir = document.getElementById('fdBlack');
  1031.                 
  1032.                 if (x.style.display === 'none') {
  1033.                     x.style.display = 'block';
  1034.                     fdnoir.style.display = 'block';
  1035.                 } else {
  1036.                     x.style.display = 'none';
  1037.                     fdnoir.style.display = 'none';
  1038.                 }
  1039.             }
  1040.             function DisplayMenu() {
  1041.                 var x = document.getElementById('MenuM');
  1042.                 var fdnoir = document.getElementById('fdBlack');
  1043.                 x.style.display = 'block';
  1044.                 fdnoir.style.display = 'none';
  1045.             }
  1046.             
  1047.             function HideMenu() {
  1048.                 var x = document.getElementById('MenuM');
  1049.                 var fdnoir = document.getElementById('fdBlack');
  1050.                 x.style.display = 'none';
  1051.                 fdnoir.style.display = 'none';
  1052.             }
  1053.             
  1054.             function sayHi(){
  1055.                 var largeur = window.innerWidth;
  1056.                
  1057.                 if(largeur > 767) {
  1058.                     DisplayMenu();
  1059.                 }
  1060.                 if(largeur < 768) {
  1061.                     HideMenu();
  1062.                 }
  1063.             }
  1064.             
  1065.             window.onresize = sayHi;
  1066.             
  1067.             
  1068.             
  1069.          </script>
  1070.          <script type="application/javascript">
  1071.             const btnShow = document.querySelectorAll('div.input-eye i');
  1072.             
  1073.             btnShow.forEach(item =>{
  1074.                 let show = false;
  1075.                 item.addEventListener('click', ()=>{
  1076.                     show = !show;
  1077.             
  1078.                     item.parentElement.children[0].setAttribute(
  1079.                         'type',
  1080.                         show ? 'text' : 'password'
  1081.                     );
  1082.             
  1083.                     item.parentElement.children[1].setAttribute(
  1084.                         'class',
  1085.                         show ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'
  1086.                     );
  1087.                 });
  1088.             });
  1089.             
  1090.          </script>
  1091.          <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  1092.          <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  1093.          <script type="text/javascript">
  1094.             document.addEventListener("DOMContentLoaded", function() {
  1095.                 const navigation = $( "div.navigation" );
  1096.                 navigation.addClass("w-full flex justify-center mx-auto mt-2 pt-2"); 
  1097.                 
  1098.                 const pagination = $("div.pagination"); 
  1099.                 pagination.addClass("flex mx-1 px-1 inline-flex items-center -space-x-px");
  1100.                 pagination.children().addClass('h-6 px-5 text-gray-600 bg-white border border-gray-600');
  1101.                 const current = $("span.current"); 
  1102.                 current.addClass("h-6 px-5 bg-gray-400 border border-gray-500");
  1103.             });
  1104.             
  1105.          </script>
  1106.          <script>
  1107.             function onReady(callback) {
  1108.                 var intervalId = window.setInterval(function() {
  1109.                     if (document.getElementsByTagName('body')[0] !== undefined) {
  1110.                     window.clearInterval(intervalId);
  1111.                     callback.call(this);
  1112.                     }
  1113.                 }, 1000);
  1114.             }
  1115.             
  1116.             function setVisible(selector, visible) {
  1117.                 document.querySelector(selector).style.display = visible ? 'block' : 'none';
  1118.             }
  1119.             
  1120.             window.onload = function(e){ 
  1121.                 onReady(function() {
  1122.                     setVisible('#loading', false);
  1123.                 });
  1124.             
  1125.                 document.getElementById("MenuDropImg").onclick = function(){
  1126.                     DisplayFond();
  1127.                 }; 
  1128.                 document.getElementById("fdBlack").onclick = function(){
  1129.                     DisplayFond();
  1130.                 }; 
  1131.             }
  1132.             
  1133.             function set_alpha_lock()
  1134.             {
  1135.                 $(".numeric_input").keypress(function(event)
  1136.                 {
  1137.                     var allowed_list = ["0","1","2","3","4","5","6","7","8","9",".",","];
  1138.                     var x = event.key;
  1139.                     
  1140.                     if (allowed_list.indexOf(x)==-1) {
  1141.                         return false;
  1142.                     }
  1143.                 });
  1144.             }
  1145.             
  1146.             $(document).ready(function() {
  1147.                     set_alpha_lock();
  1148.                 });
  1149.                 
  1150.          </script>
  1151.          <script>
  1152.             (function () {
  1153.               const drawer   = document.getElementById('m-drawer');
  1154.               const burger   = document.querySelector('.m-burger');
  1155.               const closeBtn = drawer?.querySelector('.m-drawer__close');
  1156.               const backdrop = drawer?.querySelector('.m-drawer__backdrop');
  1157.             
  1158.               if (!drawer || !burger) return;
  1159.             
  1160.               function open(){
  1161.                 drawer.hidden = false;
  1162.                 requestAnimationFrame(()=> drawer.classList.add('open'));
  1163.                 burger.setAttribute('aria-expanded','true');
  1164.                 document.body.style.overflow = 'hidden';
  1165.               }
  1166.               function close(){
  1167.                 drawer.classList.remove('open');
  1168.                 burger.setAttribute('aria-expanded','false');
  1169.                 document.body.style.overflow = '';
  1170.                 setTimeout(()=>{ drawer.hidden = true; }, 200);
  1171.               }
  1172.             
  1173.               burger.addEventListener('click', () => drawer.hidden ? open() : close());
  1174.               closeBtn?.addEventListener('click', close);
  1175.               backdrop?.addEventListener('click', close);
  1176.               document.addEventListener('keydown', e => { if (e.key === 'Escape' && !drawer.hidden) close(); });
  1177.             })();
  1178.          </script>
  1179.          <script>
  1180.             document.addEventListener('DOMContentLoaded', function(){
  1181.               const btns = document.querySelectorAll('.m-subnav__btn');
  1182.               btns.forEach(function(btn){
  1183.                 btn.addEventListener('click', function(){
  1184.                   const controls = btn.getAttribute('aria-controls');
  1185.                   const panel = controls ? document.getElementById(controls) : null;
  1186.                   if(!panel) return;
  1187.                   const isOpen = !panel.hasAttribute('hidden');
  1188.                   if(isOpen){
  1189.                     panel.setAttribute('hidden','hidden');
  1190.                     btn.setAttribute('aria-expanded','false');
  1191.                   }else{
  1192.                     panel.removeAttribute('hidden');
  1193.                     btn.setAttribute('aria-expanded','true');
  1194.                   }
  1195.                 });
  1196.               });
  1197.             });
  1198.          </script>
  1199.          <script>
  1200.             document.addEventListener('DOMContentLoaded',function(){
  1201.               var track=document.querySelector('.hero-track');
  1202.               if(!track)return;
  1203.               var slides=Array.prototype.slice.call(track.querySelectorAll('article[data-scope]'));
  1204.               if(!slides.length)return;
  1205.               var index=0;
  1206.               var prevBtn=document.querySelector('.hero-nav.prev');
  1207.               var nextBtn=document.querySelector('.hero-nav.next');
  1208.               function getRibbonText(slide){
  1209.                 return slide.getAttribute('data-ribbon-text')||'';
  1210.               }
  1211.               function getRibbonScope(slide){
  1212.                 return slide.getAttribute('data-ribbon-scope')||'';
  1213.               }
  1214.               function updateRibbon(slide){
  1215.                 var text=getRibbonText(slide);
  1216.                 var scope=getRibbonScope(slide);
  1217.                 var ribbons=[document.querySelector('.home-event-ribbon'),document.querySelector('.m-ribbon')];
  1218.                 ribbons.forEach(function(ribbon){
  1219.                   if(!ribbon)return;
  1220.                   var input=ribbon.querySelector('input.home-event-text');
  1221.                   var span=ribbon.querySelector('span.home-event-text');
  1222.                   var scopeInput=ribbon.querySelector('input[name="scope"]');
  1223.                   if(input)input.value=text;
  1224.                   if(span)span.textContent=text;
  1225.                   if(scopeInput)scopeInput.value=scope;
  1226.                 });
  1227.               }
  1228.               function goTo(i){
  1229.                 index=(i+slides.length)%slides.length;
  1230.                 slides.forEach(function(slide,idx){
  1231.                   if(idx===index){
  1232.                     slide.removeAttribute('hidden');
  1233.                     slide.classList.add('is-active');
  1234.                   }else{
  1235.                     slide.setAttribute('hidden','hidden');
  1236.                     slide.classList.remove('is-active');
  1237.                   }
  1238.                 });
  1239.                 updateRibbon(slides[index]);
  1240.               }
  1241.               if(prevBtn)prevBtn.addEventListener('click',function(){goTo(index-1);});
  1242.               if(nextBtn)nextBtn.addEventListener('click',function(){goTo(index+1);});
  1243.               goTo(0);
  1244.             });
  1245.          </script>
  1246.          {% endblock %}
  1247.          {% endblock %}
  1248.       </div>
  1249. <style></style>
  1250.    </body>
  1251. </html>