templates/application/whileresume/website/components/footer.html.twig line 7

Open in your IDE?
  1. {% set _locale = app.request.locale %}
  2. {% set _isFr = _locale == 'fr' %}
  4. {# Données dynamiques #}
  5. {% set footerArticles = getFooterArticles(_locale, 5) %}
  6. {% set footerLandingJobs = getFooterFeaturedLandingJobs(_locale, 5) %}
  7. {% set footerJobsCities = getFooterJobsCities(_locale, 6) %}
  8. {% set footerEnterprisesCities = getFooterEnterprisesCities(_locale, 6) %}
  10. {# Liens stores : nouvelle source de vérité (table cvs_app_store_links) #}
  11. {% set _storeData = getAppStoreCountries() %}
  12. {% set _storePrimary = _storeData.primary|default({}) %}
  13. {% set _storeOthers = _storeData.others|default({}) %}
  15. <style>
  16.     /* ---------- Footer WhileResume ---------- */
  17.     .whr-footer {
  18.         margin-top: 32px;
  19.         padding: 36px 24px 24px;
  20.         background: #F9FAFD;
  21.         border-radius: 16px;
  22.         color: #2c2c46;
  23.         width: auto;
  24.         max-width: none;
  25.         margin-left: 16px;
  26.         margin-right: 16px;
  27.     }
  28.     .theme-dark .whr-footer {
  29.         background: #2a2a3c;
  30.         color: #e9e9ef;
  31.     }
  33.     .middle-sidebar-left .whr-footer {
  34.         width: 100%;
  35.         margin-left: 0;
  36.         margin-right: 0;
  37.     }
  39.     /* Stores en haut de la col 1 */
  40.     .whr-footer .whr-stores {
  41.         display: flex;
  42.         flex-direction: column;
  43.         gap: 8px;
  44.         margin-bottom: 18px;
  45.         position: relative; /* pour le dropdown */
  46.     }
  47.     .whr-footer .whr-store-link {
  48.         display: inline-flex;
  49.         align-items: center;
  50.         gap: 10px;
  51.         padding: 8px 14px;
  52.         background: #111;
  53.         color: #fff !important;
  54.         border-radius: 10px;
  55.         font-size: 12px;
  56.         font-weight: 600;
  57.         text-decoration: none !important;
  58.         line-height: 1.2;
  59.         transition: transform .15s ease, background .2s ease;
  60.         max-width: 200px;
  61.         cursor: pointer;
  62.         border: none;
  63.         font-family: inherit;
  64.         text-align: left;
  65.     }
  66.     .whr-footer .whr-store-link:hover {
  67.         background: #2c2c46;
  68.         transform: translateY(-1px);
  69.     }
  70.     .whr-footer .whr-store-link small {
  71.         display: block;
  72.         font-weight: 400;
  73.         font-size: 10px;
  74.         opacity: .7;
  75.     }
  76.     .whr-footer .whr-store-link strong { font-size: 13px; display: block; }
  78.     /* Wrapper du bouton + dropdown (version EN) */
  79.     .whr-store-wrap {
  80.         position: relative;
  81.         display: inline-block;
  82.     }
  83.     .whr-store-wrap .whr-store-link {
  84.         width: 100%;
  85.         max-width: 200px;
  86.     }
  88.     /* === Dropdown élargi (2 colonnes + search + featured pinné) === */
  89.     .whr-store-dropdown {
  90.         position: absolute;
  91.         bottom: calc(100% + 6px);
  92.         left: 0;
  93.         width: 380px;
  94.         max-width: calc(100vw - 32px);
  95.         background: #fff;
  96.         border-radius: 12px;
  97.         box-shadow: 0 -8px 24px rgba(0,0,0,.15), 0 -2px 6px rgba(0,0,0,.08);
  98.         z-index: 1000;
  99.         display: none;
  100.         overflow: hidden;
  101.     }
  102.     .theme-dark .whr-store-dropdown {
  103.         background: #34344a;
  104.         box-shadow: 0 -8px 24px rgba(0,0,0,.4), 0 -2px 6px rgba(0,0,0,.2);
  105.     }
  106.     .whr-store-wrap.is-open .whr-store-dropdown {
  107.         display: flex;
  108.         flex-direction: column;
  109.         animation: whrFadeInUp .15s ease;
  110.     }
  111.     @keyframes whrFadeInUp {
  112.         from { opacity: 0; transform: translateY(4px); }
  113.         to { opacity: 1; transform: translateY(0); }
  114.     }
  116.     /* Chevron */
  117.     .whr-store-link .whr-store-chevron {
  118.         margin-left: auto;
  119.         font-size: 10px;
  120.         opacity: .7;
  121.         transition: transform .2s ease;
  122.     }
  123.     .whr-store-wrap.is-open .whr-store-link .whr-store-chevron {
  124.         transform: rotate(180deg);
  125.     }
  127.     /* Zone search en haut */
  128.     .whr-store-search-wrap {
  129.         padding: 10px 10px 6px;
  130.         border-bottom: 1px solid rgba(0,0,0,.06);
  131.         flex-shrink: 0;
  132.     }
  133.     .theme-dark .whr-store-search-wrap { border-bottom-color: rgba(255,255,255,.08); }
  135.     .whr-store-search {
  136.         width: 100%;
  137.         height: 34px;
  138.         padding: 0 12px 0 32px;
  139.         border: 1px solid rgba(0,0,0,.1);
  140.         border-radius: 8px;
  141.         background: #f5f5f8 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 10px center;
  142.         font-size: 13px;
  143.         color: #2c2c46;
  144.         outline: none;
  145.         transition: border-color .15s ease, background-color .15s ease;
  146.         font-family: inherit;
  147.     }
  148.     .whr-store-search:focus {
  149.         border-color: var(--theme-color, #6C3AED);
  150.         background-color: #fff;
  151.     }
  152.     .theme-dark .whr-store-search {
  153.         background-color: #2a2a3c;
  154.         border-color: rgba(255,255,255,.1);
  155.         color: #e9e9ef;
  156.     }
  157.     .theme-dark .whr-store-search:focus { background-color: #3c3c52; }
  158.     .whr-store-search::placeholder { color: #999; }
  160.     /* Featured pinné (toujours visible, hors scroll) */
  161.     .whr-store-featured {
  162.         padding: 8px 8px 4px;
  163.         flex-shrink: 0;
  164.         border-bottom: 1px solid rgba(0,0,0,.06);
  165.     }
  166.     .theme-dark .whr-store-featured { border-bottom-color: rgba(255,255,255,.08); }
  168.     /* Zone scrollable des "other regions" */
  169.     .whr-store-others {
  170.         padding: 8px;
  171.         max-height: 280px;
  172.         overflow-y: auto;
  173.         flex: 1;
  174.     }
  175.     .whr-store-others::-webkit-scrollbar { width: 6px; }
  176.     .whr-store-others::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }
  177.     .theme-dark .whr-store-others::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }
  179.     /* Header de section */
  180.     .whr-store-dropdown-header {
  181.         font-size: 10px;
  182.         font-weight: 700;
  183.         text-transform: uppercase;
  184.         letter-spacing: .5px;
  185.         opacity: .55;
  186.         padding: 4px 8px 6px;
  187.         color: #2c2c46;
  188.     }
  189.     .theme-dark .whr-store-dropdown-header { color: #e9e9ef; }
  191.     /* Grille 2 colonnes pour les pays */
  192.     .whr-store-grid {
  193.         display: grid;
  194.         grid-template-columns: 1fr 1fr;
  195.         gap: 2px;
  196.     }
  198.     /* Item pays */
  199.     .whr-store-country {
  200.         display: flex;
  201.         align-items: center;
  202.         gap: 8px;
  203.         padding: 7px 9px;
  204.         border-radius: 6px;
  205.         text-decoration: none !important;
  206.         color: #2c2c46 !important;
  207.         font-size: 12.5px;
  208.         transition: background .15s ease;
  209.         min-width: 0;
  210.     }
  211.     .theme-dark .whr-store-country { color: #e9e9ef !important; }
  212.     .whr-store-country:hover {
  213.         background: rgba(108, 58, 237, .08);
  214.         color: var(--theme-color, #6C3AED) !important;
  215.     }
  216.     .theme-dark .whr-store-country:hover { background: rgba(108, 58, 237, .2); }
  217.     .whr-store-country .whr-flag {
  218.         font-size: 16px;
  219.         line-height: 1;
  220.         width: 18px;
  221.         text-align: center;
  222.         flex-shrink: 0;
  223.     }
  224.     .whr-store-country .whr-country-name {
  225.         flex: 1;
  226.         font-weight: 500;
  227.         white-space: nowrap;
  228.         overflow: hidden;
  229.         text-overflow: ellipsis;
  230.         min-width: 0;
  231.     }
  233.     /* Featured = pleine largeur, plus mis en avant */
  234.     .whr-store-featured .whr-store-country {
  235.         background: linear-gradient(135deg, rgba(108, 58, 237, .08), rgba(108, 58, 237, .03));
  236.         font-weight: 600;
  237.         padding: 9px 10px;
  238.     }
  239.     .theme-dark .whr-store-featured .whr-store-country {
  240.         background: linear-gradient(135deg, rgba(108, 58, 237, .25), rgba(108, 58, 237, .1));
  241.     }
  243.     /* Message "aucun résultat" */
  244.     .whr-store-empty {
  245.         text-align: center;
  246.         padding: 20px 12px;
  247.         font-size: 12px;
  248.         color: #999;
  249.         font-style: italic;
  250.     }
  251.     .theme-dark .whr-store-empty { color: #aaa; }
  253.     /* Item caché par la recherche */
  254.     .whr-store-country.is-hidden { display: none; }
  256.     /* Responsive : sur mobile, 1 colonne et largeur ajustée */
  257.     @media (max-width: 575.98px) {
  258.         .whr-store-dropdown {
  259.             width: calc(100vw - 32px);
  260.             max-width: 360px;
  261.         }
  262.         .whr-store-grid {
  263.             grid-template-columns: 1fr;
  264.         }
  265.     }
  267.     /* Colonnes */
  268.     .whr-footer .whr-foot-col h4 {
  269.         font-size: 13px;
  270.         font-weight: 700;
  271.         margin: 0 0 14px 0;
  272.         color: inherit;
  273.         text-transform: uppercase;
  274.         letter-spacing: .3px;
  275.     }
  276.     .whr-footer .whr-foot-col ul {
  277.         list-style: none;
  278.         padding: 0;
  279.         margin: 0;
  280.         font-size: 13px;
  281.     }
  282.     .whr-footer .whr-foot-col ul li { margin-bottom: 10px; }
  283.     .whr-footer .whr-foot-col a {
  284.         color: inherit;
  285.         opacity: .75;
  286.         text-decoration: none;
  287.         transition: opacity .2s ease, color .2s ease;
  288.     }
  289.     .whr-footer .whr-foot-col a:hover { opacity: 1; color: var(--theme-color, #6C3AED); }
  290.     .whr-footer .whr-foot-empty {
  291.         font-size: 12px;
  292.         opacity: .5;
  293.         font-style: italic;
  294.     }
  296.     .whr-footer .whr-foot-action-links a {
  297.         display: inline-flex;
  298.         align-items: center;
  299.         gap: 8px;
  300.     }
  301.     .whr-footer .whr-foot-action-links a i {
  302.         font-size: 14px;
  303.         opacity: .7;
  304.         width: 16px;
  305.         text-align: center;
  306.     }
  308.     .whr-footer .whr-foot-col .whr-city-link {
  309.         display: inline-flex;
  310.         align-items: center;
  311.         gap: 6px;
  312.     }
  313.     .whr-footer .whr-foot-col .whr-city-link .whr-city-icon {
  314.         font-size: 14px;
  315.         line-height: 1;
  316.         display: inline-block;
  317.         width: 18px;
  318.         text-align: center;
  319.         opacity: .85;
  320.     }
  322.     .whr-footer .whr-foot-grid {
  323.         display: grid;
  324.         gap: 28px;
  325.         grid-template-columns: 1fr;
  326.     }
  327.     @media (min-width: 576px) {
  328.         .whr-footer .whr-foot-grid { grid-template-columns: 1fr 1fr; }
  329.     }
  331.     @media (min-width: 992px) {
  332.         .whr-footer .whr-foot-grid {
  333.             grid-template-columns: repeat(5, 1fr);
  334.             gap: 32px;
  335.         }
  336.     }
  338.     .whr-footer .whr-foot-bottom {
  339.         margin-top: 32px;
  340.         padding-top: 20px;
  341.         border-top: 1px solid rgba(0,0,0,.08);
  342.         display: flex;
  343.         flex-direction: column;
  344.         gap: 14px;
  345.         align-items: center;
  346.         text-align: center;
  347.     }
  348.     .theme-dark .whr-footer .whr-foot-bottom { border-top-color: rgba(255,255,255,.1); }
  350.     @media (min-width: 768px) {
  351.         .whr-footer .whr-foot-bottom {
  352.             flex-direction: row;
  353.             justify-content: space-between;
  354.             text-align: left;
  355.         }
  356.     }
  358.     .whr-footer .whr-foot-copy {
  359.         display: inline-flex;
  360.         align-items: center;
  361.         gap: 8px;
  362.         font-size: 12px;
  363.         opacity: .7;
  364.         margin: 0;
  365.     }
  366.     .whr-footer .whr-foot-copy img.whr-favicon {
  367.         width: 18px;
  368.         height: 18px;
  369.         border-radius: 4px;
  370.         flex-shrink: 0;
  371.     }
  373.     .whr-footer .whr-foot-legal {
  374.         display: flex;
  375.         flex-wrap: wrap;
  376.         gap: 6px 16px;
  377.         justify-content: center;
  378.         font-size: 12px;
  379.     }
  380.     .whr-footer .whr-foot-legal a {
  381.         color: inherit;
  382.         opacity: .75;
  383.         text-decoration: none;
  384.     }
  385.     .whr-footer .whr-foot-legal a:hover { opacity: 1; }
  386.     .whr-footer .whr-foot-legal .whr-admin-link { color: #e74c3c !important; opacity: 1; }
  388.     .whr-footer .whr-foot-social {
  389.         display: flex;
  390.         flex-wrap: wrap;
  391.         gap: 6px;
  392.         list-style: none;
  393.         padding: 0;
  394.         margin: 0;
  395.     }
  396.     .whr-footer .whr-foot-social a {
  397.         width: 32px; height: 32px;
  398.         border-radius: 8px;
  399.         background: #fff;
  400.         display: inline-flex;
  401.         align-items: center;
  402.         justify-content: center;
  403.         color: #2c2c46;
  404.         text-decoration: none !important;
  405.         transition: background .2s ease, color .2s ease, transform .15s ease;
  406.         box-shadow: 0 1px 2px rgba(0,0,0,.04);
  407.     }
  408.     .whr-footer .whr-foot-social a:hover {
  409.         background: var(--theme-color, #6C3AED);
  410.         color: #fff;
  411.         transform: translateY(-1px);
  412.     }
  413.     .theme-dark .whr-footer .whr-foot-social a {
  414.         background: #34344a;
  415.         color: #fff;
  416.         box-shadow: none;
  417.     }
  418.     .whr-footer .whr-foot-social i { font-size: 14px; }
  420.     @media (max-width: 575.98px) {
  421.         .whr-footer {
  422.             padding: 24px 18px 20px;
  423.             margin-left: 8px;
  424.             margin-right: 8px;
  425.         }
  426.         .whr-store-dropdown {
  427.             min-width: 220px;
  428.             max-width: 90vw;
  429.         }
  430.     }
  431. </style>
  433. <footer class="whr-footer" role="contentinfo">
  435.     {# === Grille principale 5 colonnes === #}
  436.     <div class="whr-foot-grid">
  438.         {# ===== Col 1 : Mon compte / Commencer ici ===== #}
  439.         <div class="whr-foot-col whr-foot-col-action">
  440.             {% if connectUser %}
  441.                 <h4>{{ 'layout.footer.my_account'|trans({}, 'whr-public')|default('Mon compte') }}</h4>
  442.             {% else %}
  443.                 <h4>{{ 'layout.footer.start_here'|trans({}, 'whr-public')|default('Commencer ici') }}</h4>
  444.             {% endif %}
  446.             <div class="whr-stores">
  447.                 {# === Dropdown unifié (FR & EN) — la version FR aura FR en featured, la EN aura US === #}
  449.                 {# -- Bouton App Store + dropdown -- #}
  450.                 {% set _hasIos = false %}
  451.                 {% for c in _storePrimary %}{% if c.ios %}{% set _hasIos = true %}{% endif %}{% endfor %}
  452.                 {% for c in _storeOthers %}{% if c.ios %}{% set _hasIos = true %}{% endif %}{% endfor %}
  454.                 {% if _hasIos %}
  455.                     <div class="whr-store-wrap" data-whr-store="ios">
  456.                         <button type="button" class="whr-store-link" aria-haspopup="true" aria-expanded="false" aria-label="App Store - Choose your country">
  457.                             <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">
  458.                                 <path d="M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 17 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z"/>
  459.                             </svg>
  460.                             <span>
  461.                                     <small>{{ 'layout.download_on'|trans({}, 'whr-public')|default('Download on') }}</small>
  462.                                     <strong>App Store</strong>
  463.                                 </span>
  464.                             <span class="whr-store-chevron" aria-hidden="true">▲</span>
  465.                         </button>
  466.                         <div class="whr-store-dropdown" role="menu">
  468.                             {# Search bar (n'apparaît que si > 20 pays "others") #}
  469.                             {% set _iosOthersCount = 0 %}
  470.                             {% for c in _storeOthers %}{% if c.ios %}{% set _iosOthersCount = _iosOthersCount + 1 %}{% endif %}{% endfor %}
  471.                             {% if _iosOthersCount > 20 %}
  472.                                 <div class="whr-store-search-wrap">
  473.                                     <input type="text"
  474.                                            class="whr-store-search"
  475.                                            placeholder="{{ 'layout.search_country'|trans({}, 'whr-public')|default('Search country...') }}"
  476.                                            aria-label="Search country"
  477.                                            autocomplete="off">
  478.                                 </div>
  479.                             {% endif %}
  481.                             {# Featured (pinné, pas dans le scroll) #}
  482.                             {% set _iosPrimaryCount = 0 %}
  483.                             {% for c in _storePrimary %}{% if c.ios %}{% set _iosPrimaryCount = _iosPrimaryCount + 1 %}{% endif %}{% endfor %}
  484.                             {% if _iosPrimaryCount > 0 %}
  485.                                 <div class="whr-store-featured">
  486.                                     <div class="whr-store-dropdown-header">
  487.                                         {{ 'layout.featured'|trans({}, 'whr-public')|default('Featured') }}
  488.                                     </div>
  489.                                     {% for code, country in _storePrimary %}
  490.                                         {% if country.ios %}
  491.                                             <a href="{{ country.ios }}"
  492.                                                class="whr-store-country"
  493.                                                data-search="{{ country.label|lower }} {{ code|lower }}"
  494.                                                target="_blank" rel="noopener" role="menuitem">
  495.                                                 {% if country.flag %}<span class="whr-flag">{{ country.flag }}</span>{% endif %}
  496.                                                 <span class="whr-country-name">{{ country.label }}</span>
  497.                                             </a>
  498.                                         {% endif %}
  499.                                     {% endfor %}
  500.                                 </div>
  501.                             {% endif %}
  503.                             {# Other regions (grille 2 colonnes, scrollable) #}
  504.                             {% if _storeOthers is not empty %}
  505.                                 <div class="whr-store-others">
  506.                                     <div class="whr-store-dropdown-header">
  507.                                         {{ 'layout.other_regions'|trans({}, 'whr-public')|default('Other regions') }}
  508.                                     </div>
  509.                                     <div class="whr-store-grid">
  510.                                         {% for code, country in _storeOthers %}
  511.                                             {% if country.ios %}
  512.                                                 <a href="{{ country.ios }}"
  513.                                                    class="whr-store-country"
  514.                                                    data-search="{{ country.label|lower }} {{ code|lower }}"
  515.                                                    target="_blank" rel="noopener" role="menuitem">
  516.                                                     {% if country.flag %}<span class="whr-flag">{{ country.flag }}</span>{% endif %}
  517.                                                     <span class="whr-country-name">{{ country.label }}</span>
  518.                                                 </a>
  519.                                             {% endif %}
  520.                                         {% endfor %}
  521.                                     </div>
  522.                                     <div class="whr-store-empty" style="display: none;">
  523.                                         {{ 'layout.no_country_found'|trans({}, 'whr-public')|default('No country found') }}
  524.                                     </div>
  525.                                 </div>
  526.                             {% endif %}
  527.                         </div>
  528.                     </div>
  529.                 {% endif %}
  531.                 {# -- Bouton Google Play + dropdown -- #}
  532.                 {% set _hasAndroid = false %}
  533.                 {% for c in _storePrimary %}{% if c.android %}{% set _hasAndroid = true %}{% endif %}{% endfor %}
  534.                 {% for c in _storeOthers %}{% if c.android %}{% set _hasAndroid = true %}{% endif %}{% endfor %}
  536.                 {% if _hasAndroid %}
  537.                     <div class="whr-store-wrap" data-whr-store="android">
  538.                         <button type="button" class="whr-store-link" aria-haspopup="true" aria-expanded="false" aria-label="Google Play - Choose your country">
  539.                             <svg width="18" height="18" viewBox="0 0 512 512" aria-hidden="true">
  540.                                 <path style="fill:#3A9BC8;" d="M225.656,256.052L14.016,485.451l-6.442,7.052c-4.005-5.919-6.704-12.972-7.313-20.806C0.087,470.305,0,468.91,0,467.518V44.499c0-9.488,2.873-18.02,7.574-24.987L225.656,256.052z"/>
  541.                                 <path style="fill:#9BCD83;" d="M320.811,152.8l-95.155,103.253L7.574,19.512C19.936,1.405,45.183-6.342,66.6,6.02L320.811,152.8z"/>
  542.                                 <path style="fill:#EEB84C;" d="M455.056,257.27c-0.348,14.453-7.748,28.904-22.113,37.174l-112.132,64.771l-95.155-103.163L320.811,152.8l70.518,40.745l41.614,24.026C448.178,226.366,455.579,241.861,455.056,257.27z"/>
  543.                                 <path style="fill:#B43F70;" d="M7.591,492.492c12.368,18.116,37.599,25.838,58.976,13.496L320.775,359.22l-95.156-103.209L7.591,492.492z"/>
  544.                             </svg>
  545.                             <span>
  546.                                     <small>{{ 'layout.available_on'|trans({}, 'whr-public')|default('Available on') }}</small>
  547.                                     <strong>Google Play</strong>
  548.                                 </span>
  549.                             <span class="whr-store-chevron" aria-hidden="true">▲</span>
  550.                         </button>
  551.                         <div class="whr-store-dropdown" role="menu">
  553.                             {# Search bar (n'apparaît que si > 20 pays "others") #}
  554.                             {% set _androidOthersCount = 0 %}
  555.                             {% for c in _storeOthers %}{% if c.android %}{% set _androidOthersCount = _androidOthersCount + 1 %}{% endif %}{% endfor %}
  556.                             {% if _androidOthersCount > 20 %}
  557.                                 <div class="whr-store-search-wrap">
  558.                                     <input type="text"
  559.                                            class="whr-store-search"
  560.                                            placeholder="{{ 'layout.search_country'|trans({}, 'whr-public')|default('Search country...') }}"
  561.                                            aria-label="Search country"
  562.                                            autocomplete="off">
  563.                                 </div>
  564.                             {% endif %}
  566.                             {# Featured (pinné) #}
  567.                             {% set _androidPrimaryCount = 0 %}
  568.                             {% for c in _storePrimary %}{% if c.android %}{% set _androidPrimaryCount = _androidPrimaryCount + 1 %}{% endif %}{% endfor %}
  569.                             {% if _androidPrimaryCount > 0 %}
  570.                                 <div class="whr-store-featured">
  571.                                     <div class="whr-store-dropdown-header">
  572.                                         {{ 'layout.featured'|trans({}, 'whr-public')|default('Featured') }}
  573.                                     </div>
  574.                                     {% for code, country in _storePrimary %}
  575.                                         {% if country.android %}
  576.                                             <a href="{{ country.android }}"
  577.                                                class="whr-store-country"
  578.                                                data-search="{{ country.label|lower }} {{ code|lower }}"
  579.                                                target="_blank" rel="noopener" role="menuitem">
  580.                                                 {% if country.flag %}<span class="whr-flag">{{ country.flag }}</span>{% endif %}
  581.                                                 <span class="whr-country-name">{{ country.label }}</span>
  582.                                             </a>
  583.                                         {% endif %}
  584.                                     {% endfor %}
  585.                                 </div>
  586.                             {% endif %}
  588.                             {# Other regions (grille 2 colonnes) #}
  589.                             {% if _storeOthers is not empty %}
  590.                                 <div class="whr-store-others">
  591.                                     <div class="whr-store-dropdown-header">
  592.                                         {{ 'layout.other_regions'|trans({}, 'whr-public')|default('Other regions') }}
  593.                                     </div>
  594.                                     <div class="whr-store-grid">
  595.                                         {% for code, country in _storeOthers %}
  596.                                             {% if country.android %}
  597.                                                 <a href="{{ country.android }}"
  598.                                                    class="whr-store-country"
  599.                                                    data-search="{{ country.label|lower }} {{ code|lower }}"
  600.                                                    target="_blank" rel="noopener" role="menuitem">
  601.                                                     {% if country.flag %}<span class="whr-flag">{{ country.flag }}</span>{% endif %}
  602.                                                     <span class="whr-country-name">{{ country.label }}</span>
  603.                                                 </a>
  604.                                             {% endif %}
  605.                                         {% endfor %}
  606.                                     </div>
  607.                                     <div class="whr-store-empty" style="display: none;">
  608.                                         {{ 'layout.no_country_found'|trans({}, 'whr-public')|default('No country found') }}
  609.                                     </div>
  610.                                 </div>
  611.                             {% endif %}
  612.                         </div>
  613.                     </div>
  614.                 {% endif %}
  615.             </div>
  617.             <ul class="whr-foot-action-links">
  618.                 <li>
  619.                     <a href="{{ path('whileresume_homepage') }}">
  620.                         <i class="feather-flag"></i>
  621.                         English
  622.                     </a>
  623.                 </li>
  624.                 <li>
  625.                     <a href="{{ path('locale_whileresume_homepage',{'_locale':'fr'}) }}">
  626.                         <i class="feather-flag"></i>
  627.                         Français
  628.                     </a>
  629.                 </li>
  630.             </ul>
  631.         </div>
  633.         {# ===== Col 2 : Articles récents (featured) ===== #}
  634.         <div class="whr-foot-col">
  635.             <h4>{{ 'layout.footer.latest_articles'|trans({}, 'whr-public')|default('Articles récents') }}</h4>
  636.             {% if footerArticles is not empty %}
  637.                 <ul>
  638.                     {% for article in footerArticles %}
  639.                         <li>
  640.                             <a href="{% if _isFr %}{{ path('locale_cvs_website_article', {'_locale': _locale, 'slug': article.slug}) }}{% else %}{{ path('cvs_website_article', {'slug': article.slug}) }}{% endif %}"
  641.                                title="{{ article.title }}">
  642.                                 {{ article.shortTitle ?: cleanSubstr(article.title, 45) }}
  643.                             </a>
  644.                         </li>
  645.                     {% endfor %}
  646.                 </ul>
  647.             {% else %}
  648.                 <p class="whr-foot-empty">{{ 'layout.footer.coming_soon'|trans({}, 'whr-public')|default('Bientôt disponible') }}</p>
  649.             {% endif %}
  650.         </div>
  652.         {# ===== Col 3 : Emplois par ville ===== #}
  653.         <div class="whr-foot-col">
  654.             <h4>{{ 'layout.footer.jobs_by_city'|trans({}, 'whr-public')|default('Emplois par ville') }}</h4>
  655.             {% if footerJobsCities is not empty %}
  656.                 <ul>
  657.                     {% for city in footerJobsCities %}
  658.                         <li>
  659.                             <a class="whr-city-link"
  660.                                href="{% if _isFr %}{{ path('locale_cvs_application_jobs_filter', {'_locale': _locale, 'slug': city.slug}) }}{% else %}{{ path('cvs_application_jobs_filter', {'slug': city.slug}) }}{% endif %}"
  661.                                title="{{ city.shortTitle ?: city.label }}">
  662.                                 {% if city.icon %}
  663.                                     <span class="whr-city-icon">{{ city.icon }}</span>
  664.                                 {% else %}
  665.                                     <i class="feather-map-pin whr-city-icon"></i>
  666.                                 {% endif %}
  667.                                 <span>{{ city.label }}</span>
  668.                             </a>
  669.                         </li>
  670.                     {% endfor %}
  671.                 </ul>
  672.             {% else %}
  673.                 <p class="whr-foot-empty">{{ 'layout.footer.coming_soon'|trans({}, 'whr-public')|default('Bientôt disponible') }}</p>
  674.             {% endif %}
  675.         </div>
  677.         {# ===== Col 4 : Entreprises par ville ===== #}
  678.         <div class="whr-foot-col">
  679.             <h4>{{ 'layout.footer.companies_by_city'|trans({}, 'whr-public')|default('Entreprises par ville') }}</h4>
  680.             {% if footerEnterprisesCities is not empty %}
  681.                 <ul>
  682.                     {% for city in footerEnterprisesCities %}
  683.                         <li>
  684.                             <a class="whr-city-link"
  685.                                href="{% if _isFr %}{{ path('locale_cvs_application_companies_filter', {'_locale': _locale, 'slug': city.slug}) }}{% else %}{{ path('cvs_application_companies_filter', {'slug': city.slug}) }}{% endif %}"
  686.                                title="{{ city.shortTitle ?: city.label }}">
  687.                                 {% if city.icon %}
  688.                                     <span class="whr-city-icon">{{ city.icon }}</span>
  689.                                 {% else %}
  690.                                     <i class="feather-map-pin whr-city-icon"></i>
  691.                                 {% endif %}
  692.                                 <span>{{ city.label }}</span>
  693.                             </a>
  694.                         </li>
  695.                     {% endfor %}
  696.                 </ul>
  697.             {% else %}
  698.                 <p class="whr-foot-empty">{{ 'layout.footer.coming_soon'|trans({}, 'whr-public')|default('Bientôt disponible') }}</p>
  699.             {% endif %}
  700.         </div>
  702.         {# ===== Col 5 : Pages SEO (LandingJobs featured) ===== #}
  703.         <div class="whr-foot-col">
  704.             <h4>{{ 'layout.footer.featured_pages'|trans({}, 'whr-public')|default('À découvrir') }}</h4>
  705.             {% if footerLandingJobs is not empty %}
  706.                 <ul>
  707.                     {% for landing in footerLandingJobs %}
  708.                         <li>
  709.                             <a href="{% if _isFr %}{{ path('locale_whileresume_homepage_landing', {'_locale': _locale, 'slug': landing.slug}) }}{% else %}{{ path('whileresume_homepage_landing', {'slug': landing.slug}) }}{% endif %}">
  710.                                 {{ landing.title }}
  711.                             </a>
  712.                         </li>
  713.                     {% endfor %}
  714.                 </ul>
  715.             {% endif %}
  716.         </div>
  717.     </div>
  719.     {# === Bas du footer === #}
  720.     <div class="whr-foot-bottom">
  721.         <p class="whr-foot-copy">
  722.             {% if favicon %}
  723.                 <img src="{{ favicon }}" alt="" class="whr-favicon" />
  724.             {% endif %}
  725.             <span>&copy; {{ "now"|date('Y') }} {{ websitename }}. {{ 'layout.rights_reserved'|trans({}, 'whr-public')|default('Tous droits réservés.') }}</span>
  726.         </p>
  728.         <div class="whr-foot-legal">
  729.             {% set menuFooter = getMenuWebsiteLocaleArray(_locale, "footer", connectUser) %}
  730.             {% if menuFooter is not empty %}
  731.                 {% for m in menuFooter %}
  732.                     <a href="{{ m.link }}"
  733.                        aria-label="{{ m.title }}"
  734.                        title="{{ m.title }}"
  735.                        {% if m.targetBlank == 1 %}target="_blank" rel="noreferrer"{% endif %}>
  736.                         {{ m.title }}
  737.                     </a>
  738.                 {% endfor %}
  739.             {% endif %}
  740.             {% if app.user is not null and is_granted("ROLE_SUPER_ADMIN") %}
  741.                 <a href="{{ path('backoffice_dashboard') }}" class="whr-admin-link" title="Administration">
  742.                     <i class="feather-settings"></i> Administration
  743.                 </a>
  744.             {% endif %}
  745.         </div>
  747.         <ul class="whr-foot-social">
  748.             {% if facebook %}
  749.                 <li><a href="{{ facebook }}" target="_blank" rel="noopener" aria-label="Facebook"><i class="feather-facebook"></i></a></li>
  750.             {% endif %}
  751.             {% if twitter %}
  752.                 <li><a href="{{ twitter }}" target="_blank" rel="noopener" aria-label="X / Twitter"><i class="feather-twitter"></i></a></li>
  753.             {% endif %}
  754.             {% if instagram %}
  755.                 <li><a href="{{ instagram }}" target="_blank" rel="noopener" aria-label="Instagram"><i class="feather-instagram"></i></a></li>
  756.             {% endif %}
  757.             {% if linkedin %}
  758.                 <li><a href="{{ linkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="feather-linkedin"></i></a></li>
  759.             {% endif %}
  760.             {% if youtube %}
  761.                 <li><a href="{{ youtube }}" target="_blank" rel="noopener" aria-label="YouTube"><i class="feather-youtube"></i></a></li>
  762.             {% endif %}
  763.         </ul>
  764.     </div>
  766. </footer>
  768. {# ====== JS dropdown stores (vanilla, autonome, pas de dépendance) ====== #}
  769. <script>
  770.     (function() {
  771.         'use strict';
  773.         function closeAllDropdowns() {
  774.             document.querySelectorAll('.whr-store-wrap.is-open').forEach(function(w) {
  775.                 w.classList.remove('is-open');
  776.                 var b = w.querySelector('.whr-store-link');
  777.                 if (b) b.setAttribute('aria-expanded', 'false');
  778.                 // Reset search à la fermeture
  779.                 var input = w.querySelector('.whr-store-search');
  780.                 if (input) {
  781.                     input.value = '';
  782.                     applyFilter(w, '');
  783.                 }
  784.             });
  785.         }
  787.         function applyFilter(wrap, query) {
  788.             query = (query || '').trim().toLowerCase();
  789.             var items = wrap.querySelectorAll('.whr-store-country');
  790.             var othersWrap = wrap.querySelector('.whr-store-others');
  791.             var emptyMsg = wrap.querySelector('.whr-store-empty');
  792.             var grid = wrap.querySelector('.whr-store-grid');
  793.             var visibleInOthers = 0;
  795.             items.forEach(function(item) {
  796.                 var searchData = item.dataset.search || '';
  797.                 var matches = query === '' || searchData.indexOf(query) !== -1;
  798.                 if (matches) {
  799.                     item.classList.remove('is-hidden');
  800.                     // Compter uniquement les items dans la grille "others" (pas le featured)
  801.                     if (grid && grid.contains(item)) {
  802.                         visibleInOthers++;
  803.                     }
  804.                 } else {
  805.                     item.classList.add('is-hidden');
  806.                 }
  807.             });
  809.             // Afficher le message "aucun résultat" si rien ne matche dans others
  810.             if (emptyMsg && grid) {
  811.                 if (query !== '' && visibleInOthers === 0) {
  812.                     grid.style.display = 'none';
  813.                     emptyMsg.style.display = 'block';
  814.                 } else {
  815.                     grid.style.display = '';
  816.                     emptyMsg.style.display = 'none';
  817.                 }
  818.             }
  819.         }
  821.         function initWhrStoreDropdowns() {
  822.             var wraps = document.querySelectorAll('.whr-store-wrap');
  823.             if (!wraps.length) return;
  825.             wraps.forEach(function(wrap) {
  826.                 var btn = wrap.querySelector('.whr-store-link');
  827.                 if (!btn || btn.dataset.whrInit === '1') return;
  828.                 btn.dataset.whrInit = '1';
  830.                 // === Toggle au clic sur le bouton ===
  831.                 btn.addEventListener('click', function(e) {
  832.                     e.preventDefault();
  833.                     e.stopPropagation();
  834.                     var isOpen = wrap.classList.contains('is-open');
  836.                     closeAllDropdowns();
  838.                     if (!isOpen) {
  839.                         wrap.classList.add('is-open');
  840.                         btn.setAttribute('aria-expanded', 'true');
  842.                         // Auto-focus sur la search à l'ouverture (desktop seulement,
  843.                         // pour éviter le clavier qui pop sur mobile)
  844.                         var input = wrap.querySelector('.whr-store-search');
  845.                         if (input && window.innerWidth >= 768) {
  846.                             setTimeout(function() { input.focus(); }, 50);
  847.                         }
  848.                     }
  849.                 });
  851.                 // === Filtrage live sur la search ===
  852.                 var input = wrap.querySelector('.whr-store-search');
  853.                 if (input) {
  854.                     input.addEventListener('input', function() {
  855.                         applyFilter(wrap, this.value);
  856.                     });
  858.                     // Empêcher la fermeture du dropdown quand on clique dans le champ
  859.                     input.addEventListener('click', function(e) {
  860.                         e.stopPropagation();
  861.                     });
  863.                     // Échap dans le champ → vider la recherche d'abord, puis fermer
  864.                     input.addEventListener('keydown', function(e) {
  865.                         if (e.key === 'Escape') {
  866.                             if (this.value !== '') {
  867.                                 this.value = '';
  868.                                 applyFilter(wrap, '');
  869.                                 e.stopPropagation();
  870.                             }
  871.                         }
  872.                     });
  873.                 }
  874.             });
  876.             // === Listeners globaux (un seul fois) ===
  877.             if (!document.body.dataset.whrStoreOutsideInit) {
  878.                 document.body.dataset.whrStoreOutsideInit = '1';
  880.                 // Click outside → close
  881.                 document.addEventListener('click', function(e) {
  882.                     if (!e.target.closest('.whr-store-wrap')) {
  883.                         closeAllDropdowns();
  884.                     }
  885.                 });
  887.                 // ESC → close
  888.                 document.addEventListener('keydown', function(e) {
  889.                     if (e.key === 'Escape') {
  890.                         closeAllDropdowns();
  891.                     }
  892.                 });
  893.             }
  894.         }
  896.         if (document.readyState === 'loading') {
  897.             document.addEventListener('DOMContentLoaded', initWhrStoreDropdowns);
  898.         } else {
  899.             initWhrStoreDropdowns();
  900.         }
  901.     })();
  902. </script>