theme_parisfr_commons.html

 1   <#-- WARNING : be careful to white-space and lines break in FreeMarker macros.
 2    # This macro template can be used to output white-space-sensitive formats (like RSS files).
 3    # See http://dev.lutece.${mainSite}/jira/browse/LUTECE-765
 4   -->
 5   <#-- THEME LINKS AND LABELS VARIABLES                                               -->
 6   <#assign logoHeader>images/header-logo-paris.svg</#assign>
 7   <#assign logoFooter>images/footer-logo-paris.svg</#assign>
 8   <#assign mainSite>Paris.fr</#assign>
 9   <#assign urlMainSite>http://www.${mainSite?lower_case}</#assign>
 10   <#assign footerLinkContact>${dskey('themeparisfr.site_property.Url.contactURL')!'${urlMainSite}/contact'}</#assign>
 11   <#assign footerLinkLegal>${dskey('themeparisfr.site_property.Url.legalURL')!'${urlMainSite}/mentionslegales'}</#assign>
 12   <#assign footerLinkCgu>${dskey('themeparisfr.site_property.Url.cguURL')!'${urlMainSite}/mentionslegales'}</#assign>
 13   <#assign footerLinkDataProtection>${dskey('themeparisfr.site_property.Url.dataURL')!'${urlMainSite}/mentionslegales'}</#assign>
 14   <#assign footerLinkAccessibility>${dskey('themeparisfr.site_property.Url.accessibilityURL')!'${urlMainSite}/accessibilite'}</#assign>
 15   <#assign footerLinkCookies>${dskey('themeparisfr.site_property.Url.cookieURL')!'${urlMainSite}/cookies'}</#assign>
 16   <#assign footerSocialTitleFb>Facebook</#assign>       
 17   <#assign footerSocialLinkFb>https://www.facebook.com/paris</#assign>       
 18   <#assign footerSocialTitleTw>Twitter</#assign>        
 19   <#assign footerSocialLinkTw>https://twitter.com/paris</#assign>        
 20   <#assign footerSocialTitleIn>Instagram</#assign>        
 21   <#assign footerSocialLinkIn>https://www.instagram.com/paris_maville/</#assign>        
 22   <#assign footerSocialTitleLi>LinkedIn</#assign>
 23   <#assign footerSocialLinkLi>https://www.linkedin.com/company/villedeparis/</#assign>
 24   <#assign urlMonCompte>${dskey('themeparisfr.site_property.Url.monparis')!'https://moncompte.paris.fr/moncompte'}</#assign>
 25   <#assign urlDefaultSearch>${dskey('themeparisfr.site_property.Url.search')!}</#assign>
 26   <#assign urlDefaultBannerImage>${dskey('themeparisfr.site_property.banner')}</#assign>
 27   <#assign urlDefaultShowSiteBanner>${dskey('themeparisfr.site_property.banner.showSiteImg.checkbox')}</#assign>
 28   <#assign urlHasDefaultBannerImage>${dskey('themeparisfr.site_property.bannerForm.showBannerImg.checkbox')}</#assign>
 29   <#assign urlHasFormBannerImage>${dskey('themeparisfr.site_property.bannerForm.showFormImg.checkbox')}</#assign>
 30   <#assign urlHasBannerTitle>${dskey('themeparisfr.site_property.bannerForm.showFormTitle.checkbox')}</#assign>
 31   <#assign xssChars>${dskey('themeparisfr.site_property.xss.xssChars')}</#assign>
 32   <#assign xssMessage>${dskey('themeparisfr.site_property.xss.xssMsg')}</#assign>
 33   <#assign isMainSidebarMenu><#if dskey('themeparisfr.site_property.menu.sidebarMenu.checkbox')?is_number && dskey('themeparisfr.site_property.menu.sidebarMenu.checkbox')?number=1>true<#else>false</#if></#assign>
 34   <#assign isMainSidebarMenuCollapse><#if dskey('themeparisfr.site_property.menu.sidebarMenuCollapse.checkbox')?is_number && dskey('themeparisfr.site_property.menu.sidebarMenuCollapse.checkbox')?number=1>true<#else>false</#if></#assign>
 35   <#-- END THEME LINKS AND LABELS VARIABLES                                          -->
 36   <#-- MACROS                                                                        -->
 37   <#-- NAVIGATION                                                                    -->
 38   <#-- SkipNav -->
 39   <#-- Params
 40       - title   : Title shown over the banner
 41       - logoImg : Default: Empty string, show logo instead of text title, title is set as title html attribute for the logo image.
 42       - hasMenu : Default: true; 
 43       Nested content : Shows default page menu, but can other item can be add using @mainNavItem macro.
 44   -->
 45   <#macro skipNav>
 46   <nav role="navigation" aria-label="#i18n{themeparisfr.skipNavLabel}">
 47       <ul class="skip-links">
 48           <li><a href="#main">#i18n{themeparisfr.skipNavMain}</a></li>
 49           <li><a id="skip-nav" href="#main-site-menu">#i18n{themeparisfr.skipNavMenu}</a></li>
 50       </ul>
 51   </nav>
 52   <div id="top" class="sr-only sr-only-focusable">#i18n{themeparisfr.gohome}</div>
 53   </#macro>
 54   <#-- cMainNav mainMenu -->
 55   <#-- Params
 56       - title   : Title shown over the banner
 57       - logoImg : Default: Empty string, show logo instead of text title, title is set as title html attribute for the logo image.
 58       - hasMenu : Default: true; 
 59       - isSidebar=false 
 60       - isSibebarCollapsible=false 
 61       - showDefaultMenu=true 
 62       - hasSearchMenu=false 
 63       - typeSearch='field' 
 64       - searchUrl=urlDefaultSearch 
 65       - searchAction='jsp/site/Portal.jsp' 
 66       - searchSolr=false 
 67       - searchParams='' 
 68       - hasLogin=true 
 69       - loginClass='' 
 70       - id='' 
 71       - class='' 
 72       - role='banner' 
 73       - params=''
 74       Nested content : Shows default page menu, but can other item can be add using @mainNavItem macro.
 75   -->
 76   <#macro cMainNav title=favourite logoImg='' hasMenu=true isSidebar=isMainSidebarMenu?boolean isSibebarCollapsible=isMainSidebarMenuCollapse?boolean showDefaultMenu=true hasSearchMenu=false typeSearch='field' searchUrl=urlDefaultSearch searchAction='jsp/site/Portal.jsp' searchSolr=false searchParams='' hasLogin=true loginClass='' id='' class='' role='' params='' deprecated...>
 77   <#if isSidebar>
 78   <#assign isMainSidebarMenu=isSidebar  >
 79   <div id="layout-sidebar-wrapper">
 80   </#if>
 81   <div class="main-header<#if class !=''> ${class!}</#if>"<#if role !=''> role='${role!}'</#if><#if id !=''> id="${id!}"</#if><#if params!=''> ${params}</#if>>
 82       <nav class="navbar navbar-paris navbar-light" aria-label="#i18n{themeparisfr.mainMenu}">
 83           <a class="navbar-brand" href="." aria-label="#i18n{portal.util.labelHome} {title}">
 84               <img src="${logoHeader!}" class="logo" alt="#i18n{themeparisfr.logoAltDesc}">
 85               <span class="sr-only">Paris</span>
 86               <hr>
 87               <span class="main-service-title main-color">
 88                   ${title}
 89                   <#if logoImg !=''><img src="${logoImg}" class="d-inline-block" alt="" aria-hidden="true"></#if>
 90               </span>
 91           </a>
 92           <span class="d-flex align-items-center">
 93               <#if hasSearchMenu && typeSearch='button'>
 94               <a class="d-block d-md-none" href="${searchUrl!}" >
 95                   <svg class="paris-icon paris-icon-search" aria-hidden="true" focusable="false">
 96                       <title id="paris-icon-title-search">search</title>
 97                       <use xlink:href="#paris-icon-search"></use>
 98                   </svg>
 99                   <span class="sr-only">#i18n{portal.util.labelSearch}</span>
 100               </a>
 101               </#if>
 102               <button class="navbar-toggler" data-toggle="offcanvas" data-target="#navbarMainMenu" aria-expanded="false" aria-label="#i18n{themeparisfr.showmenu}">
 103                   <span id="navbar-icon" >
 104                       <span></span>
 105                       <span></span>
 106                       <span></span>
 107                   </span>
 108               </button>
 109           </span>
 110           <div class="navbar-collapse offcanvas-collapse <#if hasMenu>has-menu</#if> align-items-center" id="navbarMainMenu">
 111           <#if hasMenu>
 112               <#assign menu=page_main_menu!>
 113               <div class="navbar-main" aria-label="#i18n{themeparisfr.mainMenu}">
 114                   <ul id="main-site-menu" class="navbar-nav navbar-main">
 115                       <#if showDefaultMenu>
 116                           ${page_main_menu_html!menu}
 117                       </#if>
 118                       <#nested>
 119                       <#if hasSearchMenu && typeSearch='icon'>
 120                           <@cMainNavItem title='' url=searchUrl >
 121                               <svg class="paris-icon paris-icon-search main-color" aria-hidden="true" focusable="false">
 122                                   <title id="paris-icon-title-search">search</title>
 123                                   <use xlink:href="#paris-icon-search"></use>
 124                               </svg>
 125                               <span class="sr-only">#i18n{portal.util.labelSearch}</span>
 126                           </@cMainNavItem>
 127                       </#if>
 128                   </ul>
 129                   <button class="btn btn-link hidden" tabindex="0" aria-label="Voir la suite du menu">
 130                       <i class="fa fa-angle-double-down" aria-hidden="true"></i>
 131                   </button>
 132                   <ul id="navbar-hidden-links" class="navbar-nav hidden"></ul>
 133               </div>
 134           </#if>
 135           <#if hasSearchMenu && typeSearch='field'>
 136               <div class="navbar-menu-search ml-auto" aria-label="#i18n{portal.util.labelSearch}" role="navigation">
 137                   <form class="form-inline" role="search" action="<#if searchAction=''>${urlSearch!}<#else>${searchAction!}</#if>" method="get">
 138                       <input type="hidden" name="page" value="search<#if searchSolr>-solr</#if>">
 139                       <#if searchParams !=''>${searchParams!}</#if>
 140                       <label for="header-query" class="sr-only">#i18n{portal.util.labelSearch}</label>
 141                       <div class="input-group">
 142                           <input type="text" name="query" id="header-query" class="form-control mr-sm-2" placeholder="#i18n{portal.site.page_menu_tools.labelSearch}" >
 143                           <button id="button-main-search" class="btn btn-primary p-0 border-1" type="submit" aria-label="#i18n{portal.site.page_menu_tools.labelSearch}" >
 144                               <@parisIcon name='search' title='#i18n{portal.site.page_menu_tools.labelSearch}' />
 145                           </button>
 146                       </div>
 147                   </form>  
 148               </div>
 149           </#if>
 150           <#if hasLogin>
 151               <div class="navbar-mon-paris<#if loginClass !='' > ${loginClass!}</#if>" aria-label="#i18n{themeparisfr.labelMonParis}" role="navigation">
 152               ${pageinclude_userlogin?default("")}
 153               </div>
 154           </#if>
 155           </div>
 156       </nav>
 157   </div>
 158   <div class="main-service-title"><span>${title}</span></div>
 159   <#if isSidebar>
 160       <#assign menu=page_main_menu!>
 161       <#if isSibebarCollapsible>
 162       <button id="main-sidebar-collapse" type="button" class="btn btn-light bg-white">
 163           <i class="fa fa-bars mr-2"></i>
 164           <small class="text-uppercase font-weight-bold sr-only">#i18n{portal.util.labelShow} / #i18n{portal.util.labelHide}</small>
 165       </button> 
 166       </#if>  
 167       <div class="navbar-main sidebar-nav" id="main-menu-sidebar" aria-label="#i18n{themeparisfr.mainMenu}" role="navigation">
 168           <ul class="navbar-nav navbar-main flex-column">
 169               <#if showDefaultMenu>
 170                   ${page_main_menu_html!menu}
 171               </#if>
 172               <#if hasSearchMenu && typeSearch='icon'>
 173                   <@cMainNavItem title='' url=searchUrl >
 174                       <svg class="paris-icon paris-icon-search main-color" aria-hidden="true" focusable="false">
 175                           <title id="paris-icon-title-search">search</title>
 176                           <use xlink:href="#paris-icon-search"></use>
 177                       </svg>
 178                       <span class="sr-only">#i18n{portal.util.labelSearch}</span>
 179                   </@cMainNavItem>
 180               </#if>
 181           </ul>    
 182           <#nested>
 183           <#if hasSearchMenu && typeSearch='field'>
 184               <div class="navbar-menu-search ml-auto" aria-label="#i18n{portal.util.labelSearch}" role="navigation">
 185                   <form class="form-inline pl-3" role="search" action="<#if searchAction=''>${urlSearch!}<#else>${searchAction!}</#if>" method="get">
 186                       <input type="hidden" name="page" value="search<#if searchSolr>-solr</#if>">
 187                       <#if searchParams !=''>${searchParams!}</#if>
 188                       <div class="input-group">
 189                           <input type="text" name="query" id="query" class="form-control mr-sm-2" placeholder="#i18n{portal.site.page_menu_tools.labelSearch}" aria-label="#i18n{portal.site.page_menu_tools.labelSearch}" aria-describedby="button-main-search">
 190                           <button id="button-main-search" class="btn btn-primary p-0 border-1" type="submit">
 191                               <@parisIcon name='search' title='#i18n{portal.site.page_menu_tools.labelSearch}' />
 192                           </button>
 193                       </div>
 194                   </form>  
 195               </div>
 196           </#if>
 197       </div>
 198       <div id="layout-sidebar">
 199   </#if>
 200   </#macro>
 201   <#-- cMainNavUser -->
 202   <#-- Params
 203       - title   : Title shown over the banner
 204       - logoImg : Default: Empty string, show logo instead of text title, title is set as title html attribute for the logo image.
 205       - hasMenu : Default: true; 
 206       Nested content : Shows default page menu, but can other item can be add using @mainNavItem macro.
 207   -->
 208   <#macro cMainNavUser connected userName urlConnect title='#i18n{themeparisfr.labelConnect}' id='' class='' params=''>
 209   <ul class="navbar-nav mon-paris">
 210       <li class="nav-item">
 211           <#if !connected>
 212               <a class="nav-link btn-connect" href="${urlConnect!'jsp/site/Portal.jsp?page=mylutece&amp;action=login'}" aria-label="#i18n{themeparisfr.titleConnect}" title="${title}">
 213                   <@parisIcon name='user' title=title class='user-logo' /> 
 214                   <span>#i18n{themeparisfr.labelMonParis}</span>
 215               </a>
 216           <#else>
 217               <div class="dropdown<#if class !='' > ${class!}</#if>"<#if id !='' > id="${id!}"</#if><#if params!=''> ${params}</#if> >
 218                   <a class="nav-link" href="#" role="button" id="dropdownMenuUser" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
 219                       <@parisIcon name='user' title=title class='user-logo' /> 
 220                       <span>${userName}</span>  
 221                   </a>
 222                   <div class="dropdown-menu" aria-labelledby="dropdownMenuUser">
 223                       <div class="dropdown-content">
 224                           <ul class="navbar-nav menu-app my-apps">
 225                               <#nested>
 226                               <li>
 227                                   <a class="dropdown-item monparis" href="${urlMonCompte}" title="#i18n{themeparisfr.goToMonParis}">
 228                                       <@parisIcon name='user' title=title class='user-logo' /> 
 229                                       <span>#i18n{themeparisfr.labelMonParis}</span>  
 230                                   </a>
 231                               </li>
 232                               <li>
 233                                   <a class="dropdown-item" href="${urlConnect!}" title="#i18n{themeparisfr.titleDisconnect}">
 234                                       <i class="fa fa-power-off pl-2 pr-3" aria-hidden="true"></i> 
 235                                       <span>#i18n{themeparisfr.labelDisconnect}</span>  
 236                                   </a>
 237                               </li>
 238                           </ul>
 239                       </div>
 240                   </div>
 241               </div>
 242           </#if>
 243       </li>
 244   </ul>
 245   </#macro>
 246   <#-- cDropNav -->
 247   <#-- Params
 248       - title   : Title shown over the banner
 249       - logoImg : Default: Empty string, show logo instead of text title, title is set as title html attribute for the logo image.
 250       - hasMenu : Default: true; 
 251       Nested content : Shows default page menu, but can other item can be add using @mainNavItem macro.
 252   -->
 253   <#macro cDropNav title icon='' caret='' expanded=false id='' class='' params=''>
 254   <#local cId=rand('drop')>
 255   <#if id !=''><#local cId=id /></#if>
 256   <div class="dropdown" <#if class !='' > ${class!}</#if>"<#if params!=''> ${params}</#if>>
 257       <a class="nav-link" href="#" role="button" id="dropdownMenu${cId!}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="${expanded?c}">
 258           ${icon!} ${title!} ${caret!}
 259       </a>
 260       <div class="dropdown-menu" aria-labelledby="dropdownMenu${cId!}">
 261           <div class="dropdown-content">
 262               <#nested>
 263           </div>
 264       </div>
 265   </div>
 266   </#macro>
 267   <#-- mainNavItem -->
 268   <#-- 
 269       Params
 270       - title   : Default:'Menu', Title 
 271       - url     : Default: Empty string, Url link
 272       - target  : Default: Empty string, values  are _top, _blank, _parent
 273   -->
 274   <#macro cMainNavItem title url target='' id='' class=''  params=''>
 275   <li class="nav-item<#if class !='' > ${class!}</#if>"<#if id !='' > id="${id!}"</#if><#if params!=''> ${params}</#if>>
 276       <a class="nav-link" href="${url}" title="${title!}<#if target='_blank'> #i18n{themeparisfr.newWindowLink}</#if>" <#if target!=''>target="${target}"</#if>>
 277           ${title!}
 278           <#nested>
 279       </a>
 280   </li> 
 281   </#macro>
 282   <#-- cMainBanner -->
 283   <#-- 
 284       Params
 285       - title : Default: Site Favorite value, String title shown over the banner
 286       - titleBorder : Default: true, add a border on banner text for accessibility purpose.
 287       - onlyHome : Default: true, banner will be displayed only on home.
 288       - imageSrc : Default: Site property themeparisfr.site_property.Url.bannerURL or ${urlDefaultBannerImage} see above, background image for banner idealy 1440*300 px
 289   -->
 290   <#macro cMainBanner title=favourite onlyHome=true darken=true imageSrc=urlDefaultBannerImage class='' id='main-banner' params=''  >
 291   <#-- Comment tester une XPage ???? -->
 292   <#local bannerClass=class />
 293   <#if imageSrc !='' && urlDefaultShowSiteBanner?number=1><#local bannerClass+=' bg-banner' /></#if>
 294   <#if page_id??>
 295       <#if onlyHome && page_id gt 1>
 296           <#return>
 297       <#else>
 298           <#if page_id gt 1 >
 299               <#local bannerClass+=' internal' />    
 300           </#if>
 301       </#if>
 302   </#if>
 303   <div class="banner<#if darken> darken</#if><#if bannerClass !='' > ${bannerClass!}</#if>"<#if id !='' > id="${id!}"</#if><#if params!=''> ${params}</#if> <#if urlDefaultShowSiteBanner?number=1 && imageSrc !='' > style="background-image:url(${imageSrc!});"</#if>>
 304       <#if urlHasBannerTitle?number=1 && title?trim !=''><h1>${title}</h1></#if>
 305       <#nested>
 306   </div>
 307   </#macro>
 308   <#-- cBreadCrumb -->
 309   <#-- 
 310       Params
 311       - home : Default: 'Home', String name of the home page
 312       - items : Default: '', list of items
 313   -->
 314   <#macro cBreadCrumb home='#i18n{themeparisfr.home}' items='' class='' params=''>
 315   <nav aria-label="#i18n{themeparisfr.breadcrumb}" class="breadcrumb-nav<#if class!=''> ${class!}</#if>"<#if params!=''> ${params!}</#if>>
 316   	<div class="container">
 317   		<ol class="breadcrumb">
 318               <#if home!=''>
 319                   <li class="breadcrumb-item">
 320                       <a target="_top" href=".">${home!}</a>
 321                   </li>
 322               </#if>
 323               <#if items?has_content>
 324                   <#assign iMax=items?size>
 325                   <#assign idx=1>
 326                   <#list items as i>
 327                       <li class="breadcrumb-item <#if iMax==idx>active</#if>"<#if iMax==idx> aria-current="page"</#if>>
 328                           <#if idx lt iMax>
 329                           <a href="${i.url!}" title="${i.title!}" target="_top">
 330                           </#if>
 331                           ${i.title!}
 332                           <#if idx lt iMax>
 333                           </a>
 334                           </#if>
 335                       </li>
 336                       <#assign idx+=1>
 337                   </#list>
 338               </#if>
 339              <#nested> 
 340           </ol>
 341   	</div>
 342   </nav>
 343   </#macro> 
 344   <#-- _footerMenu -->
 345   <#-- 
 346   Private : Only for cMainFooter's macros
 347   -->
 348   <#macro _footerMenu>
 349   <@cMainNavItem title='${mainSite}' url=urlMainSite target="_blank" />
 350   <@cMainNavItem title='#i18n{portal.site.site_map.pathLabel}' url="jsp/site/Portal.jsp?page=map" />
 351   <@cMainNavItem title='#i18n{themeparisfr.labelContact}' url=footerLinkContact target="_blank" />
 352   <@cMainNavItem title='#i18n{themeparisfr.labelLegalInfo}' url=footerLinkLegal target="_blank" />
 353   <@cMainNavItem title='#i18n{themeparisfr.labelCgu}' url=footerLinkCgu target="_blank" />
 354   <@cMainNavItem title='#i18n{themeparisfr.labelDataProtection}' url=footerLinkDataProtection target="_blank" />
 355   <@cMainNavItem title='#i18n{themeparisfr.labelAccessibility}' url=footerLinkAccessibility target="_blank" />
 356   <@cMainNavItem title='#i18n{themeparisfr.labelCookies}' url=footerLinkCookies target="_blank" />
 357   </#macro>
 358   <#-- mainFooter -->
 359   <#-- Params
 360       - title : Default: 'Service', String title shown after the logo
 361       -nested_pos : Default:'after', Position of nested content, 2 values before or after
 362       Only nested content
 363   -->
 364   <#macro cMainFooter title='${mainSite}' nested_pos='after'>
 365   <#if isMainSidebarMenu?? || isMainSidebarMenu></div></div></#if>
 366   <footer role="contentinfo">
 367       <div class="container">
 368           <div class="row flex-column m-0">
 369               <div class="main-footer col pb-3">
 370                   <a class="logo" href="${urlMainSite}" target="_blank">
 371                       <img src="${logoFooter}" class="d-inline-block" alt="" aria-hidden="true"> 
 372                       <span class="sr-only">${mainSite} #i18n{themeparisfr.newWindowLink}</span>
 373                   </a>
 374                   <hr>
 375                   <a title="${title!}" href=".">${title!}</a>
 376               </div>
 377               <div class="col justify-content-center mt-3">
 378                   <nav class="navbar" aria-label="#i18n{themeparisfr.footerInfo}">
 379                       <ul class="nav">
 380                           <#if nested_pos='before'>
 381                               <#nested>
 382                           </#if>
 383                           <@_footerMenu />
 384                           <#if nested_pos='after'>
 385                               <#nested>
 386                           </#if>    
 387                       </ul>    
 388                   </nav>
 389               </div>
 390           </div>
 391       </div>
 392   </footer>
 393   <@parisIconPack />
 394   </#macro> 
 395   <#-- cMainFooterSocial -->
 396   <#-- Params
 397       -pos : Default:'bottom', Position of nested content, 2 values top or bottom
 398       Only nested content
 399   -->
 400   <#macro cMainFooterSocial title nested_pos='after' socialNested='' align='around' classColMain='col-md-7' classColSocial='col-md-5'>
 401   <#if isMainSidebarMenu?? || isMainSidebarMenu></div></div></#if>
 402   <footer class="social" role="contentinfo">
 403       <div class="row m-0">
 404           <div class="col-12 <#if classColMain !=''> ${classColMain}</#if>">
 405               <div class="main-footer justify-content-${align} py-4">
 406                   <div class="d-flex align-items-center">
 407                       <a class="logo" title="${mainSite} #i18n{themeparisfr.newWindowLink}" href="${urlMainSite}" target="_blank"><img src="${logoFooter}" class="d-inline-block" alt="" title="${mainSite}"></a>
 408                       <hr>
 409                       <a class="site" title="${title}" href=".">${title}</a>
 410                   </div>
 411               </div>  
 412               <div class="main-footer justify-content-${align}">
 413                   <nav class="navbar d-flex align-items-center" aria-label="#i18n{themeparisfr.footerInfo}">
 414                       <ul class="nav">
 415                           <#if nested_pos='before'><#nested></#if>
 416                           <@_footerMenu />
 417                           <#if nested_pos='after'>
 418                               <#nested>
 419                           </#if>    
 420                       </ul>    
 421                   </nav>
 422               </div>
 423           </div>
 424           <div class="col-12 main-bg-color<#if classColSocial !=''> ${classColSocial}</#if>">
 425               <div class="social-links">
 426                   <#if socialNested !=''><div class="d-flex justify-content-center align-items-center">${socialNested}</div></#if>
 427                   <h2 class="paris-footer-social-title text-center text-gray">#i18n{themeparisfr.labelFollow}</h2>
 428                   <ul class="list-inline text-center">
 429                       <li class="list-inline-item">
 430                           <a class="social-link has-icon" target="_blank" href="${footerSocialLinkFb}">        
 431                               <svg class="paris-icon paris-icon-facebook" role="img" aria-labelledby="paris-icon-title-fb" focusable="false">
 432                                   <title id="paris-icon-title-fb">${footerSocialTitleFb}</title>
 433                                   <use xlink:href="#paris-icon-facebook"></use>
 434                               </svg>
 435                           </a>    
 436                       </li>
 437                       <li class="list-inline-item">
 438                           <a class="social-link has-icon" target="_blank" href="${footerSocialLinkTw}">        
 439                               <svg class="paris-icon paris-icon-twitter" role="img" aria-labelledby="paris-icon-title-tw" focusable="false">
 440                                   <title id="paris-icon-title-tw">${footerSocialTitleTw}</title>
 441                                   <use xlink:href="#paris-icon-twitter"></use>
 442                               </svg>
 443                           </a>    
 444                       </li>
 445                       <li class="list-inline-item">
 446                           <a class="social-link has-icon" target="_blank" href="${footerSocialLinkIn}">        
 447                               <svg class="paris-icon paris-icon-instagram" role="img" aria-labelledby="paris-icon-title-in" focusable="false">
 448                                   <title id="paris-icon-title-in">${footerSocialTitleIn}</title>
 449                                   <use xlink:href="#paris-icon-instagram"></use>
 450                               </svg>
 451                           </a>    
 452                       </li>
 453                       <li class="list-inline-item">
 454                           <a class="social-link has-icon" target="_blank" href="${footerSocialLinkLi}">        
 455                               <svg class="paris-icon paris-icon-linkedin" role="img" aria-labelledby="paris-icon-title-li" focusable="false">
 456                                   <title id="paris-icon-title-li">${footerSocialTitleLi}</title>
 457                                   <use xlink:href="#paris-icon-linkedin"></use>
 458                               </svg>
 459                           </a>    
 460                       </li>
 461                   </ul>
 462                   <p class="paris-footer-social-title text-center">#i18n{themeparisfr.footerSocialText}</p>
 463               </div>
 464           </div>
 465       </div>
 466   </footer>
 467   <@parisIconPack />
 468   </#macro>
 469   <#-- END NAVIGATION                                                                     -->
 470   <#-- PARIS ICON PACK                                                                    -->
 471   <#-- PARIS ICON PACK                                                                    -->
 472   <#macro parisIconPack>
 473   <!-- SVG paris icon-set Nef -->
 474   <svg class="paris-icon-sprite">
 475       <defs>
 476           <symbol id="paris-icon-location" viewBox="0 0 32 32">
 477               <path d="M16,26.667 C13.641,23.52 9,16.936 9,13 C9,9.14 12.14,6 16,6 C19.86,6 23,9.14 23,13 C23,16.936 18.359,23.521 16,26.667 Z M16,11 C14.898,11 14,11.898 14,13 C14,14.104 14.898,15 16,15 C17.102,15 18,14.104 18,13 C18,11.898 17.102,11 16,11 Z"></path>
 478           </symbol>
 479           <symbol id="paris-icon-shortcut-coins" viewBox="0 0 30 30">
 480               <path d="M20.306 2.715a6.89 6.89 0 0 0-6.314 4.789 9.35 9.35 0 0 0-9.981 15.27.44.44 0 0 0 .096.146l1.63 1.63a9.32 9.32 0 0 0 6.62 2.74 9.35 9.35 0 0 0 9.35-9.595 6.85 6.85 0 0 0 .07.004 6.9 6.9 0 0 0 6.511-4.771.43.43 0 0 0 .028-.096 6.9 6.9 0 0 0 .289-2.603.44.44 0 0 0-.02-.145 6.9 6.9 0 0 0-1.927-4.113l-1.18-1.182a.44.44 0 0 0-.096-.09 6.89 6.89 0 0 0-5.076-1.984zm-.027.853a6.06 6.06 0 0 1 4.435 1.627.43.43 0 0 0 .104.164l.498.5a6.06 6.06 0 0 1 .133 7.352.431.431 0 0 0-.03.041 6.06 6.06 0 0 1-3.07 2.162.431.431 0 0 0-.26.068 6.06 6.06 0 0 1-.83.155.434.434 0 0 0-.428.031 6.06 6.06 0 0 1-4.172-1.424l-.332-.334a.431.431 0 0 0-.107-.078 6.06 6.06 0 0 1-1.562-5.492.432.432 0 0 0 .072-.31 6 6 0 0 1 1.568-2.7 6.06 6.06 0 0 1 3.98-1.762zm1.529 2.252a3.86 3.86 0 0 0-3.65 2.6h-1.561a.44.44 0 0 0-.43.44.43.43 0 0 0 .43.43h1.375a3.86 3.86 0 0 0-.002.78h-1.373a.43.43 0 1 0 0 .86h1.562a3.86 3.86 0 0 0 3.649 2.61v.01a.44.44 0 0 0 0-.87 3 3 0 0 1-2.727-1.75h1.625a.43.43 0 1 0 0-.86h-1.875a3 3 0 0 1 .006-.78h1.87a.44.44 0 0 0 .44-.43.44.44 0 0 0-.44-.44h-1.618a3 3 0 0 1 2.719-1.74.43.43 0 1 0 0-.86zM10.833 7.76a8.49 8.49 0 0 1 2.946.595 6.9 6.9 0 0 0 1.875 6.084.431.431 0 0 0 .064.08l1.18 1.18a6.85 6.85 0 0 0 2.287 1.504 10 10 0 0 1-2.508 5.057 8.49 8.49 0 0 1-7.258 2.38.44.44 0 0 0-.123-.017A8.49 8.49 0 0 1 10.833 7.76zm16.522.844a6 6 0 0 1 .1.263l-.067-.066a.431.431 0 0 1-.002-.002 6.89 6.89 0 0 0-.031-.196zm.06 1.443l.346.346a6 6 0 0 1-.084 1.537l-.496-.496a6.89 6.89 0 0 0 .234-1.387zm-.554 2.299l.537.558a6 6 0 0 1-.522 1.065l-.58-.58a6.89 6.89 0 0 0 .565-1.043zm-18.022.185a2.85 2.85 0 0 0-2.822 2.35 3.66 3.66 0 0 0 .16 1.629 6 6 0 0 0 1 1.89 8.87 8.87 0 0 0 2.66 2.39l.49.29.19.09.24-.37-.19.4a.54.54 0 0 0 .21 0 .48.48 0 0 0 .21-.07 7.36 7.36 0 0 0 2-1.29 8.47 8.47 0 0 0 1.891-2.31 5 5 0 0 0 .6-1.95 2.79 2.79 0 0 0-1.56-2.77 2.83 2.83 0 0 0-3.17.5 2.8 2.8 0 0 0-1.59-.76 2.85 2.85 0 0 0-.319-.019zm-.062.889l.3.01a1.92 1.92 0 0 1 1.301.75l.069.09a.49.49 0 0 0 .34.14.48.48 0 0 0 .341-.16l.05-.06a2 2 0 0 1 2.4-.58 1.94 1.94 0 0 1 1.1 1.89 4.29 4.29 0 0 1-.5 1.61 7.48 7.48 0 0 1-1.7 2.08 6.4 6.4 0 0 1-1.74 1.05h-.121l-.38-.19a8 8 0 0 1-2.4-2.15 5.28 5.28 0 0 1-.85-1.62 2.66 2.66 0 0 1-.13-1.24 2 2 0 0 1 1.92-1.62zm16.986.674l.576.613a6 6 0 0 1-.332.363 6 6 0 0 1-.521.46l-.567-.61a6.89 6.89 0 0 0 .844-.826zm-1.547 1.334l.578.58a6 6 0 0 1-1.164.533.43.43 0 0 1-.002-.002l-.537-.537a6.89 6.89 0 0 0 1.125-.574zm-2.058.863l.484.484a6 6 0 0 1-.994.069 9.35 9.35 0 0 0-.073-.438 6.89 6.89 0 0 0 .583-.115zm-2.717.1a6.9 6.9 0 0 0 1.117.1 6.89 6.89 0 0 0 .156-.007 8.48 8.48 0 0 1 .05.28 6 6 0 0 1-1.323-.373zm.578 1.082a6.85 6.85 0 0 0 .822.16 8.48 8.48 0 0 1-.22 2.25l-.983-.98a10.84 10.84 0 0 0 .38-1.43zm-.717 2.314l1.041 1.047a8.48 8.48 0 0 1-.922 1.82l-1.092-1.091a10.84 10.84 0 0 0 .973-1.776zm-1.49 2.485l1.09 1.082a8.48 8.48 0 0 1-1.41 1.351l-1.067-1.074a9.33 9.33 0 0 0 .861-.75 10.84 10.84 0 0 0 .526-.61zm-2.104 1.869l1.059 1.058a8.48 8.48 0 0 1-1.912.862.44.44 0 0 0-.069-.09l-.925-.926a9.33 9.33 0 0 0 1.847-.904zm-7.742 1.054a9.35 9.35 0 0 0 1.12.262l.501.502a8.48 8.48 0 0 1-1.62-.764zm4.951.135l.965.965a8.48 8.48 0 0 1-2.678.053l-.75-.75a9.35 9.35 0 0 0 .223.011 9.33 9.33 0 0 0 2.24-.279z" />
 481           </symbol>
 482           <symbol id="paris-icon-shortcut-cloud" viewBox="0 0 30 30">
 483               <path d="M6.46,24.07a5.64,5.64,0,0,1-1.91-11,5.6,5.6,0,0,1,5.92-3.61A7.24,7.24,0,0,1,24,12.8a5.64,5.64,0,0,1-.41,11.27H6.46ZM9.81,10.43a4.6,4.6,0,0,0-4.42,3.22l-.07.24L5.07,14a4.67,4.67,0,0,0,1.39,9.14H23.54a4.68,4.68,0,0,0,0-9.36v0H23v-.49a6.28,6.28,0,0,0-11.84-3l-.16.32-.36-.07A4.47,4.47,0,0,0,9.81,10.43Z" />
 484           </symbol>
 485           <symbol id="paris-icon-shortcut-form" viewBox="0 0 30 30">
 486               <path d="M14.915 10.57a.48.48 0 0 1-.48-.47v-.21a.49.49 0 0 1 .48-.48.48.48 0 0 1 .47.48v.21a.47.47 0 0 1-.47.47zm-2.37.58a.47.47 0 0 1-.38-.19l-1.42-1.89a.48.48 0 0 1 .09-.67.49.49 0 0 1 .67.1l1 1.36 2.96-4.42a.47.47 0 0 1 .66-.13.48.48 0 0 1 .13.66l-3.32 5a.44.44 0 0 1-.38.21zm7.78 4.5H9.675a.47.47 0 0 1-.48-.47.48.48 0 0 1 .48-.48h10.65a.48.48 0 0 1 .48.48.47.47 0 0 1-.48.47zm-10.62 2.84h10.66m0 .48H9.705a.48.48 0 0 1-.48-.48.47.47 0 0 1 .48-.47h10.66a.47.47 0 0 1 .47.47.48.48 0 0 1-.47.48zm-10.63 2.84h10.66m0 .43H9.735a.47.47 0 1 1 0-.94h10.66a.47.47 0 0 1 0 .94zm-5.48-9.67h-5.21a.47.47 0 0 1-.48-.47V6.89a.48.48 0 0 1 .48-.48h2.6a.49.49 0 0 1 .48.48.48.48 0 0 1-.48.47h-2.13v4.26h4.26V10.1a.49.49 0 0 1 .48-.48.48.48 0 0 1 .47.48v2a.47.47 0 0 1-.47.47zm8.76 13.98H6.325a.47.47 0 0 1-.47-.47V3.92a.47.47 0 0 1 .47-.47h17.35a.47.47 0 0 1 .47.47v22.16a.47.47 0 0 1-.47.47zm-16.88-1h16.41V4.39H6.795zm2.88-10.37h10.65" />
 487           </symbol>
 488           <symbol id="paris-icon-shortcut-family" viewBox="0 0 30 30">
 489               <path d="M22.235 26.855a7.13 7.13 0 0 1-4.18-1.21.53.53 0 0 1-.21-.42v-3.72c0-1.87 2-3.4 4.39-3.4 2.39 0 4.38 1.56 4.38 3.4v3.69a.52.52 0 0 1-.2.42 7.17 7.17 0 0 1-4.18 1.24zm-3.46-1.91a7.1 7.1 0 0 0 6.92 0v-3.44c0-1.29-1.59-2.38-3.46-2.38-1.87 0-3.46 1.12-3.46 2.38zm7.38.28zm-3.92-6.38a3.38 3.38 0 1 1 3.37-3.34 3.38 3.38 0 0 1-3.37 3.34zm0-5.83a2.46 2.46 0 1 0 2.45 2.49 2.45 2.45 0 0 0-2.45-2.49zm-12.82 13.85h-.15a8.33 8.33 0 0 1-5.75-2.29.51.51 0 0 1-.13-.33v-7a6 6 0 0 1 11.91 0v7a.47.47 0 0 1-.14.33 8.06 8.06 0 0 1-5.74 2.29zm-5.08-2.81a7.64 7.64 0 0 0 10.06 0v-6.8a5.03 5.03 0 1 0-10.06 0zm10.52.19zm-5.65-12.01a4.55 4.55 0 1 1 4.55-4.55 4.55 4.55 0 0 1-4.55 4.55zm0-8.16a3.62 3.62 0 1 0 3.62 3.61 3.61 3.61 0 0 0-3.62-3.61z" />
 490           </symbol>
 491           <symbol id="paris-icon-shortcut-id-card" viewBox="0 0 30 30">
 492               <path d="M8.115 21a4.2 4.2 0 0 1-3-1.17.47.47 0 0 1-.14-.33v-3.37a3.11 3.11 0 0 1 6.22 0v3.37a.46.46 0 0 1-.13.33A4.21 4.21 0 0 1 8.115 21zm-2.17-1.67a3.42 3.42 0 0 0 4.35 0v-3.2a2.18 2.18 0 0 0-4.35 0zm4.82.2zm13.9-8.71h-9.79a.47.47 0 1 1 0-.93h9.75a.47.47 0 1 1 0 .93zm0 3.11h-9.79a.46.46 0 0 1-.47-.46.47.47 0 0 1 .47-.47h9.75a.47.47 0 0 1 .47.47.46.46 0 0 1-.43.46zm0 3.12h-9.79a.47.47 0 0 1 0-.94h9.75a.47.47 0 0 1 0 .94zm0 3.11h-9.79a.47.47 0 1 1 0-.93h9.75a.47.47 0 1 1 0 .93zm-16.62-6.2a2.43 2.43 0 1 1 2.43-2.43 2.43 2.43 0 0 1-2.43 2.43zm0-3.93a1.5 1.5 0 1 0 1.5 1.5 1.5 1.5 0 0 0-1.5-1.5zm18.08 14.07H3.875a3 3 0 0 1-3-3V8.9a3 3 0 0 1 3-3h22.25a3 3 0 0 1 3 3v12.25a3 3 0 0 1-3 2.95zM3.875 6.88a2 2 0 0 0-2 2v12.27a2 2 0 0 0 2 2h22.25a2 2 0 0 0 2-2V8.9a2 2 0 0 0-2-2z" />
 493           </symbol>
 494           <symbol id="paris-icon-shortcut-housing" viewBox="0 0 30 30">
 495               <path d="M20.705 25.908h1.37c.26 0 .47.21.47.47v1.83c0 .26-.21.47-.47.47h-1.37c-.26 0-.47-.21-.47-.47v-1.83c0-.26.21-.47.47-.47zm2.03-5.19h1.37c.26 0 .47.21.47.47v1.37c0 .26-.21.47-.47.47h-1.37c-.26 0-.47-.21-.47-.47v-1.37c0-.26.21-.47.47-.47zm-3.82 0h1.37c.26 0 .47.21.47.47v1.37c0 .26-.21.47-.47.47h-1.37c-.26 0-.47-.21-.47-.47v-1.37c0-.26.21-.47.47-.47zm3.82-4.41h1.37c.26 0 .47.21.47.47v1.37c0 .26-.21.47-.47.47h-1.37c-.26 0-.47-.21-.47-.47v-1.37c0-.26.21-.47.47-.47zm-3.82 0h1.37c.26 0 .47.21.47.47v1.37c0 .26-.21.47-.47.47h-1.37c-.26 0-.47-.21-.47-.47v-1.37c0-.26.21-.47.47-.47zm3.82-4.28h1.37c.26 0 .47.21.47.47v1.37c0 .26-.21.47-.47.47h-1.37c-.26 0-.47-.21-.47-.47v-1.37c0-.26.21-.47.47-.47zm-3.82 0h1.37c.26 0 .47.21.47.47v1.37c0 .26-.21.47-.47.47h-1.37c-.26 0-.47-.21-.47-.47v-1.37c0-.26.21-.47.47-.47zm3.7-4.44h1.37c.26 0 .47.21.47.47v1.37c0 .26-.21.47-.47.47h-1.37c-.26 0-.47-.21-.47-.47v-1.37c0-.26.21-.47.47-.47zm-3.82 0h1.37c.26 0 .47.21.47.47v1.37c0 .26-.21.47-.47.47h-1.37c-.26 0-.47-.21-.47-.47v-1.37c0-.26.21-.47.47-.47zm3.84-4.44h1.37c.26 0 .47.21.47.47v1.37c0 .26-.21.47-.47.47h-1.37c-.26 0-.47-.21-.47-.47v-1.37c0-.26.21-.47.47-.47zm-3.82 0h1.37c.26 0 .47.21.47.47v1.37c0 .26-.21.47-.47.47h-1.37c-.26 0-.47-.21-.47-.47v-1.37c0-.26.21-.47.47-.47zm-9.84 9.441h-2.69a.4.4 0 0 1-.4-.41V9.76a.4.4 0 0 1 .4-.4h2.69a.4.4 0 0 1 .41.4v2.42a.41.41 0 0 1-.41.41zm-2.29-.81h1.89v-1.62h-1.89zm7.47.81h-2.7a.4.4 0 0 1-.4-.41V9.76a.4.4 0 0 1 .4-.4h2.7a.4.4 0 0 1 .4.4v2.42a.4.4 0 0 1-.4.41zm-2.29-.81h1.88v-1.62h-1.88zm-2.86 6.49h-2.69a.4.4 0 0 1-.41-.4v-2.43a.4.4 0 0 1 .41-.4h2.69a.41.41 0 0 1 .41.4v2.43a.41.41 0 0 1-.41.4zm-2.29-.77h1.89v-1.65h-1.89zm7.47.77h-2.7a.4.4 0 0 1-.4-.4v-2.43a.4.4 0 0 1 .4-.4h2.7a.4.4 0 0 1 .4.4v2.43a.4.4 0 0 1-.4.4zm-2.26-.77h1.88v-1.65h-1.88zm-2.92 6.46h-2.69a.41.41 0 0 1-.41-.41v-2.42a.41.41 0 0 1 .41-.41h2.69a.41.41 0 0 1 .41.41v2.42a.42.42 0 0 1-.41.41zm-2.29-.81h1.89V21.5h-1.89zm7.47.81h-2.7a.41.41 0 0 1-.4-.41v-2.42a.4.4 0 0 1 .4-.41h2.7a.4.4 0 0 1 .4.41v2.42a.41.41 0 0 1-.4.41zm-2.26-.81h1.88V21.5h-1.88zm-.33 5.99h-2.67a.4.4 0 0 1-.4-.4v-2.42a.4.4 0 0 1 .4-.41h2.7a.4.4 0 0 1 .4.41v2.42a.4.4 0 0 1-.43.4zm-2.29-.8h1.88v-1.62h-1.88zm7.33.8H3.855a.4.4 0 0 1-.4-.4V7.26a.4.4 0 0 1 .4-.4h12.78a.4.4 0 0 1 .4.4v21.48a.4.4 0 0 1-.4.4zm-12.37-.8h12V7.66h-12zm21.88.8h-9.51a.41.41 0 0 1-.41-.4V1.26a.41.41 0 0 1 .41-.4h9.51a.4.4 0 0 1 .4.4v27.48a.4.4 0 0 1-.4.4zm-9.11-.8h8.71V1.66h-8.71z" />
 496           </symbol>
 497           <symbol id="paris-icon-shortcut-trash-can-dirty" viewBox="0 0 30 30">
 498               <path d="M2.82 18.38l-.55-1-1.27-.51v-1.54l.33-1.09 1-.61v-.57l1.67-1.06 1.8.78 1.56 2.8-.53.29-.27 1.13-2.37 1.15zm-1.32-1.85l1.13.47.45.82 1-.16.74-.37c-.36.09-.79.17-1.21.25l-.1-.49c.35-.06.7-.13 1-.21l-1.27-1.08.76-1.57.44.22-.61 1.23 1 .85.74-.5 1.1-.59-1.2-2.2-1.4-.62-1.27.76v1.66h-.5v-.78l-.54.34-.26.88zm3.5.47v.17l1.14-.57.11-.42-.38.21zM13.56 24.23l-2.7-4.87-3-1.19-3.11 1.54v1.21l-1.86 1-.44 2.08v2.5l2.2.94 1 1.68 2.35-.32 4-2.09.57-2zm-2.06 2.06l-3.64 1.92-1.86.27-.95-1.48-2-.86v-2l.37-1.76 1.34-.7v1.7h.6v-3.18l2.51-1.26 2.58 1 2.29 4.06-2.17 1.09-1.22.91-1.07-2 1.19-3.13-1.9 1.71-3.06 2.36 2.19 1.22.3-.52-1.41-.78 2.41-1.86-.38 1 1.25 2.31a9.1 9.1 0 0 1-2 .47l.06.6a10.91 10.91 0 0 0 2.58-.62l-.05-.13 1.47-1.08 1-.48zM19 .78a17.77 17.77 0 0 0-2.55-.18c-3.2 0-6.4.8-6.4 2.3a1 1 0 0 0 .07.34.48.48 0 0 0-.07.26c1 2.4.5 5.8 0 8.1a33.05 33.05 0 0 0-.52 7.24l.74.29a30.22 30.22 0 0 1 .48-7.33 18 18 0 0 0 .25-7.63 6.05 6.05 0 0 0 1.08.45c.84 2.4.35 5.72 0 8a31.37 31.37 0 0 0-.41 8.17l1.92 3.46a12 12 0 0 0 3 .37 12.71 12.71 0 0 0 4-.81 4.65 4.65 0 0 0 1.69-1.08c1.7-2.4 1-8.6.5-11a17.41 17.41 0 0 1-.33-7c5.25-.91 2.94-3.46-3.45-3.95zm-4.64 22.92a8.46 8.46 0 0 1-1.25-.31.54.54 0 0 0-.06-.29c-1.4-1.8-1-7.2-.4-10.4a19 19 0 0 0 .18-7.88 12.62 12.62 0 0 0 1.33.24 37.26 37.26 0 0 1 0 8c-.16 2.82-.48 8.34.2 10.64zm1.69.18c-.33 0-.66 0-1-.07a.45.45 0 0 0 0-.11c-.7-1.8-.5-7.3-.2-10.5a29.87 29.87 0 0 0 0-8.07 11.12 11.12 0 0 0 1.16.06zm.4-19.38a14.38 14.38 0 0 1-3.9-.5.63.63 0 0 0-.26 0c-1-.31-1.54-.71-1.54-1.06 0-.7 2.2-1.6 5.7-1.6a15.45 15.45 0 0 1 3.42.34 8.31 8.31 0 0 1 2.2 1.05.46.46 0 0 1 .08.21c0 .66-2.15 1.56-5.7 1.56zm1.4 19.3c-.35 0-.72.06-1.09.07v-18.67c.43 0 .86 0 1.28-.07a29.42 29.42 0 0 0 0 8.17c.31 3.2.51 8.6-.19 10.5zm2.1-.6a.58.58 0 0 0-.06.17 8 8 0 0 1-1.22.33c.65-2.44.36-7.85.08-10.5a36.92 36.92 0 0 1 0-8.14 12.34 12.34 0 0 0 1.49-.28c-.73 2.47-.27 5.74.11 8 .5 3.02.8 8.52-.35 10.42zm1.7-1a2.57 2.57 0 0 1-.63.59c1-2.83.38-8 0-10-.39-2.26-.78-5.56 0-8l.65-.07a19.54 19.54 0 0 0 .39 7c.59 3.08.99 8.58-.41 10.48z" />
 499           </symbol>
 500           <symbol id="paris-icon-shortcut-bulky" viewBox="0 0 30 30">
 501               <path  d="M18.628 26.6H4.106a.466.466 0 0 1-.476-.467v-3.407a.475.475 0 0 1 .476-.476h14.522a.475.475 0 0 1 .466.476v3.387a.466.466 0 0 1-.466.486zm-14.076-.942h13.6v-2.457h-13.6zm16.117-14.037a.475.475 0 0 1-.476-.466V9.333a.495.495 0 0 1 .99 0v1.822a.475.475 0 0 1-.514.466zM22.254 26.6h-3.626a.466.466 0 0 1-.476-.466v-8.35a2.288 2.288 0 0 1 4.577 0v8.33a.466.466 0 0 1-.475.486zm-3.16-.99h2.694v-7.827a1.347 1.347 0 1 0-2.694 0zm-14.988.99H.47a.466.466 0 0 1-.466-.466v-8.35a2.288 2.288 0 1 1 4.567 0v8.33a.466.466 0 0 1-.466.486zm-3.16-.99H3.63v-7.827a1.347 1.347 0 1 0-2.684 0zm28.569-11.947H18.618a.466.466 0 0 1-.475-.466V4.32a.931.931 0 0 1 .93-.92h9.996a.921.921 0 0 1 .92.92v8.916a.466.466 0 0 1-.474.426zm-10.421-.94h9.905v-8.4h-9.905zm9.975 13.877h-9.985a.931.931 0 0 1-.932-.922v-12.44a.466.466 0 0 1 .476-.477h10.896a.466.466 0 0 1 .476.476v12.481a.921.921 0 0 1-.931.882zm-9.975-.99h9.905V13.661h-9.905z" />
 502           </symbol>
 503           <symbol id="paris-icon-shortcut-car" viewBox="0 0 30 30">
 504               <path d="M21.597 20.055H7.291a.458.458 0 1 1 0-.906h14.306a.458.458 0 1 1 0 .906zm-11.349-6.714a.448.448 0 0 1-.449-.448v-2.785a.458.458 0 0 1 .906 0v2.785a.448.448 0 0 1-.457.448zm-5.78 9.356a3.004 3.004 0 1 1 2.995-2.995 3.004 3.004 0 0 1-2.995 2.995zm0-5.083a2.089 2.089 0 1 0 2.09 2.088 2.089 2.089 0 0 0-2.09-2.088zm19.914 5.083a3.004 3.004 0 1 1 3.005-2.995 3.004 3.004 0 0 1-3.005 2.995zm0-5.083a2.089 2.089 0 1 0 2.09 2.088 2.098 2.098 0 0 0-2.09-2.088zm-4.377-4.045H4.745a.448.448 0 0 1-.41-.257.458.458 0 0 1 0-.467 8.765 8.765 0 0 1 7.067-3.3c3.53-.095 7.258 1.287 8.898 3.28a.458.458 0 0 1-.353.745zm-14.26-.953H18.88a12.15 12.15 0 0 0-7.4-2.194 8.03 8.03 0 0 0-5.733 2.242zM1.921 20.37a.439.439 0 0 1-.238-.076 4.502 4.502 0 0 1-1.66-3.968 4.092 4.092 0 0 1 1.65-3.405C2.856 9.89 5.631 7.943 9.503 7.43 14.75 6.742 20.787 8.907 23.4 12.4c4.77.504 6.6 3.947 6.6 6.036 0 1.078-1.154 1.717-3.07 1.717a.458.458 0 1 1 .018-.859c.801 0 2.155-.17 2.155-.81 0-1.793-1.62-4.77-5.97-5.15a.467.467 0 0 1-.334-.19c-2.356-3.34-8.135-5.428-13.162-4.77-3.586.477-6.123 2.27-7.143 5.055a.43.43 0 0 1-.21.238 3.1 3.1 0 0 0-1.326 2.737 3.682 3.682 0 0 0 1.192 3.13.458.458 0 0 1 .143.63.477.477 0 0 1-.372.21z" />
 505           </symbol>
 506           <symbol id="paris-icon-shortcut-briefcase" viewBox="0 0 30 30">
 507               <path d="M14.994 3.87a5.84 5.84 0 0 0-5.59 5.6H3.285a.56.56 0 0 0-.57.56v15.53a.56.56 0 0 0 .57.57h23.43a.57.57 0 0 0 .57-.57V10.03a.57.57 0 0 0-.57-.56h-6.14a5.85 5.85 0 0 0-5.58-5.6zm0 1.14a4.68 4.68 0 0 1 4.41 4.46h-8.82a4.68 4.68 0 0 1 4.41-4.46zm-9.44 5.59h19.302l-8.452 5.62v-.36a.57.57 0 0 0-.609-.57h-2.13a.57.57 0 0 0-.56.57v.24zm-1.708.16l9.26 6.76v2.58a.57.57 0 0 0 .558.57h2.131a.57.57 0 0 0 .61-.57v-2.519l9.74-6.48V25l-22.3.01zm10.388 5.67h1v3.12h-1z" />
 508           </symbol>
 509           <symbol id="paris-icon-loader" viewBox="0 0 8 8">
 510               <path d="M4,0C1.8,0,0,1.8,0,4s1.8,4,4,4c0,0,0-0.3,0-1C2.3,7,1,5.7,1,4s1.3-3,3-3C4,0.5,4,0.6,4,0L4,0z">
 511                   <animateTransform attributeName="transform" type="rotate" from="0 4 4" to="360 4 4" dur="0.6s" repeatCount="indefinite" />
 512               </path>
 513           </symbol>
 514           <symbol id="paris-icon-check" viewBox="0 0 14 14">
 515               <path  d="M 11.516602,1.7578123 5.0205081,8.2539061 2.5107424,5.6718748 0.50293,7.6230467 4.9931643,12.242188 13.49707,3.7382811 Z" />
 516           </symbol>
 517           <symbol id="paris-icon-share" viewBox="0 0 32 32">
 518               <path d="M22,18 C20.8,18 19.734,18.541 19,19.381 L13.908,16.836 C13.967,16.567 14,16.288 14,16 C14,15.712 13.967,15.434 13.908,15.163 L19,12.618 C19.734,13.458 20.8,14 22,14 C24.205,14 26,12.205 26,10 C26,7.794 24.205,6 22,6 C19.795,6 18,7.794 18,10 C18,10.287 18.033,10.566 18.092,10.836 L13,13.381 C12.266,12.542 11.2,12 10,12 C7.795,12 6,13.794 6,16 C6,18.205 7.795,20 10,20 C11.2,20 12.266,19.457 13,18.617 L18.092,21.163 C18.033,21.434 18,21.713 18,22 C18,24.205 19.795,26 22,26 C24.205,26 26,24.205 26,22 C26,19.794 24.205,18 22,18 Z M22,8 C23.104,8 24,8.895 24,10 C24,11.104 23.104,12 22,12 C20.896,12 20,11.104 20,10 C20,8.895 20.896,8 22,8 Z M10,18 C8.896,18 8,17.104 8,16 C8,14.895 8.896,14 10,14 C11.104,14 12,14.895 12,16 C12,17.104 11.104,18 10,18 Z M22,24 C20.896,24 20,23.104 20,22 C20,20.895 20.896,20 22,20 C23.104,20 24,20.895 24,22 C24,23.104 23.104,24 22,24 Z"></path>
 519           </symbol>
 520           <symbol id="paris-icon-facebook" viewBox="0 0 32 32">
 521               <path d="M16.546 24H8.883A.883.883 0 0 1 8 23.117V8.883C8 8.395 8.395 8 8.883 8h14.234c.488 0 .883.395.883.883v14.234a.883.883 0 0 1-.883.883H19.04v-6.196h2.08l.31-2.415h-2.39v-1.541c0-.7.194-1.176 1.196-1.176h1.28v-2.16c-.222-.03-.981-.095-1.864-.095-1.844 0-3.106 1.125-3.106 3.191v1.781h-2.085v2.415h2.085V24z" />
 522           </symbol>
 523           <symbol id="paris-icon-twitter" viewBox="0 0 32 32">
 524               <path d="M25 10.776a7.213 7.213 0 0 1-2.12.596 3.778 3.778 0 0 0 1.623-2.095 7.273 7.273 0 0 1-2.346.918A3.642 3.642 0 0 0 19.462 9c-2.038 0-3.692 1.696-3.692 3.787 0 .296.032.585.095.862-3.069-.158-5.79-1.664-7.612-3.958a3.856 3.856 0 0 0-.5 1.906c0 1.313.652 2.472 1.643 3.152a3.626 3.626 0 0 1-1.673-.473v.047c0 1.835 1.273 3.366 2.963 3.713-.31.089-.636.133-.973.133-.238 0-.47-.023-.695-.067.47 1.504 1.833 2.599 3.45 2.628A7.292 7.292 0 0 1 7 22.3a10.282 10.282 0 0 0 5.66 1.7c6.794 0 10.508-5.77 10.508-10.774 0-.164-.003-.329-.01-.49A7.58 7.58 0 0 0 25 10.776"/>
 525           </symbol>
 526           <symbol id="paris-icon-instagram" viewBox="0 0 32 32">
 527               <path d="M16 7c-2.444 0-2.75.01-3.71.054-.959.044-1.613.196-2.185.419A4.411 4.411 0 0 0 8.51 8.51c-.5.5-.809 1.002-1.038 1.594-.223.572-.375 1.226-.419 2.184C7.01 13.25 7 13.556 7 16s.01 2.75.054 3.71c.044.959.196 1.613.419 2.185.23.592.537 1.094 1.038 1.594.5.5 1.002.809 1.594 1.039.572.222 1.226.374 2.184.418.96.044 1.267.054 3.711.054s2.75-.01 3.71-.054c.959-.044 1.613-.196 2.185-.418a4.412 4.412 0 0 0 1.594-1.039c.5-.5.809-1.002 1.039-1.594.222-.572.374-1.226.418-2.184.044-.96.054-1.267.054-3.711s-.01-2.75-.054-3.71c-.044-.959-.196-1.613-.418-2.185a4.412 4.412 0 0 0-1.039-1.594c-.5-.5-1.002-.809-1.594-1.038-.572-.223-1.226-.375-2.184-.419C18.75 7.01 18.444 7 16 7zm0 1.622c2.403 0 2.688.009 3.637.052.877.04 1.354.187 1.67.31.421.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.671.043.95.052 1.234.052 3.637s-.009 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.67-.163.421-.358.72-.673 1.036-.315.315-.615.51-1.035.673-.317.123-.794.27-1.671.31-.95.043-1.234.052-3.637.052s-2.688-.009-3.637-.052c-.877-.04-1.354-.187-1.67-.31a2.788 2.788 0 0 1-1.036-.673 2.789 2.789 0 0 1-.673-1.035c-.123-.317-.27-.794-.31-1.671-.043-.95-.052-1.234-.052-3.637s.009-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.421.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.671-.31.95-.043 1.234-.052 3.637-.052zm0 2.756a4.622 4.622 0 1 0 0 9.244 4.622 4.622 0 0 0 0-9.244zM16 19a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm5.884-7.804a1.08 1.08 0 1 1-2.16 0 1.08 1.08 0 0 1 2.16 0z" />
 528           </symbol>
 529           <symbol id="paris-icon-linkedin" viewBox="0 0 32 32">
 530               <path d="M26 23h-3.757v-5.273c0-1.38-.588-2.323-1.88-2.323-.989 0-1.539.636-1.795 1.25-.095.219-.08.525-.08.832V23h-3.723s.048-9.34 0-10.19h3.723v1.6c.22-.7 1.409-1.698 3.307-1.698 2.355 0 4.205 1.466 4.205 4.622V23zM11.001 11.536h-.024c-1.2 0-1.977-.78-1.977-1.767C9 8.763 9.8 8 11.024 8c1.222 0 1.974.76 1.998 1.766 0 .988-.776 1.77-2.02 1.77zM9.43 12.81h3.313V23H9.43V12.81z" />
 531           </symbol>
 532           <symbol id="paris-icon-download" viewBox="0 0 32 32">
 533               <path d="M17.004 17.662l3.067-3.067 1.414 1.415-5.475 5.475-5.476-5.475 1.414-1.415 3.056 3.057V8.027h2v9.635zM11 23h10v2H11v-2z" />
 534           </symbol>
 535           <symbol id="paris-icon-info" viewBox="0 0 32 32">
 536               <path d="M12.5 11.25c-.69 0-1.25.56-1.25 1.25v5a1.25 1.25 0 1 0 2.5 0v-5c0-.69-.56-1.25-1.25-1.25M12.5 7.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5" />
 537               <path d="M12.5 22.5c-5.522 0-10-4.477-10-10 0-5.522 4.478-10 10-10 5.523 0 10 4.478 10 10 0 5.523-4.477 10-10 10M0 12.5C0 19.402 5.596 25 12.5 25 19.402 25 25 19.402 25 12.5 25 5.596 19.402 0 12.5 0 5.596 0 0 5.596 0 12.5z" />
 538           </symbol>
 539           <symbol id="paris-icon-clock" viewBox="0 0 32 32">
 540               <path d="M16 9c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7zm0 12.444A5.45 5.45 0 0 0 21.444 16 5.45 5.45 0 0 0 16 10.556 5.45 5.45 0 0 0 10.556 16 5.45 5.45 0 0 0 16 21.444zm.778-9.333v3.473l1.987 1.324-.863 1.295-2.68-1.787v-4.305h1.556z" />
 541           </symbol>
 542           <symbol id="paris-icon-search" viewBox="0 0 32 32">
 543               <path d="M20.2517783,18.9919966 L25.0362131,24.0664448 L22.8534353,26.1244732 L17.9712161,20.9463133 C16.8010506,21.6167419 15.4452827,22 14,22 C9.581722,22 6,18.418278 6,14 C6,9.581722 9.581722,6 14,6 C18.418278,6 22,9.581722 22,14 C22,15.8882102 21.3458363,17.6236322 20.2517783,18.9919966 L20.2517783,18.9919966 Z M14,19 C16.7614237,19 19,16.7614237 19,14 C19,11.2385763 16.7614237,9 14,9 C11.2385763,9 9,11.2385763 9,14 C9,16.7614237 11.2385763,19 14,19 Z">
 544               </path>
 545           </symbol>
 546           <symbol id="paris-icon-close" viewBox="0 0 32 32">
 547               <path d="M16 13.379l6.718-6.718 2.12 2.121-6.717 6.718 6.718 6.718-2.121 2.12L16 17.622 9.282 24.34l-2.12-2.121 6.717-6.718L7.16 8.782l2.121-2.12z" />
 548           </symbol>
 549           <symbol id="paris-icon-bookmark" viewBox="0 0 32 32">
 550               <path d="M16.5 20.989L12.722 25 11 24.295V7.018L12 6h9l1 1.018v17.277L20.278 25 16.5 20.989zM13 8v14l2.778-3.019h1.444L20 22V8h-7z" />
 551           </symbol>
 552           <!-- ParisFr Theme Icons -->
 553           <symbol id="paris-icon-external-link" width="13.459" height="13.512" viewBox="0 0 13.459 13.512">
 554               <path d="M20.635,13,17.569,9.933l1.414-1.414,5.476,5.476-5.476,5.476-1.414-1.414L20.625,15H13v7.031H11V13Z" transform="translate(-11 -8.519)"/>
 555           </symbol>
 556           <symbol id="paris-icon-arrow-left" viewBox="0 0 9.638 15.153">
 557               <g transform="translate(8.279 13.676) rotate(180)">
 558                   <path d="M1.309,0,0,1.423,4.3,6.1,0,10.776,1.309,12.2,6.92,6.1Z"></path>
 559               </g>
 560           </symbol>
 561           <symbol id="paris-icon-arrow-right" viewBox="0 0 9.638 15.153">
 562               <g transform="translate(1.359 1.477)">
 563                   <path d="M1.309,0,0,1.423,4.3,6.1,0,10.776,1.309,12.2,6.92,6.1Z"></path>
 564               </g>
 565           </symbol>
 566           <symbol id="paris-icon-user" viewBox="0 0 32 32">
 567               <path d="M18.875 12.066a6.613 6.613 0 0 1 3.326 5.727v7.02c0 .287-.114.563-.318.767-3.354 3.354-9.303 3.263-12.565 0A1.086 1.086 0 0 1 9 24.812v-7.02a6.61 6.61 0 0 1 3.14-5.615 5.183 5.183 0 1 1 6.735-.11zm-3.264 1.297l-.165.003c-2.363.082-4.275 2.045-4.275 4.427v6.546c2.382 2.04 6.421 2.095 8.86 0v-6.546c0-2.43-1.99-4.424-4.42-4.43zm-.041-2.171a3.012 3.012 0 1 0-.254-6.019 3.012 3.012 0 0 0 .254 6.019z" />
 568           </symbol>
 569           <symbol id="paris-icon-eye" width="15.38" height="9.168" viewBox="0 0 15.38 9.168">
 570               <path d="M7.69,98.725a9.594,9.594,0,0,0-7.57,4.219.609.609,0,0,0,0,.727,9.589,9.589,0,0,0,7.57,4.222,9.594,9.594,0,0,0,7.57-4.219.609.609,0,0,0,0-.727A9.589,9.589,0,0,0,7.69,98.725Zm.211,7.812a3.235,3.235,0,1,1,3.017-3.017A3.237,3.237,0,0,1,7.9,106.537Zm-.1-1.491a1.742,1.742,0,1,1,1.627-1.627A1.739,1.739,0,0,1,7.8,105.046Z" transform="translate(0 -98.725)" />
 571           </symbol>
 572           <symbol id="paris-icon-calendar" width="15.785" height="17" viewBox="0 0 15.785 17">
 573               <g transform="translate(-18.276)">
 574                   <path d="M33.7,2.789a1.166,1.166,0,0,0-.854-.361H31.633V1.518A1.462,1.462,0,0,0,31.187.446,1.462,1.462,0,0,0,30.115,0h-.607a1.462,1.462,0,0,0-1.072.446,1.461,1.461,0,0,0-.446,1.072v.911H24.348V1.518A1.462,1.462,0,0,0,23.9.446,1.461,1.461,0,0,0,22.83,0h-.607A1.462,1.462,0,0,0,21.15.446,1.462,1.462,0,0,0,20.7,1.518v.911H19.49a1.167,1.167,0,0,0-.854.361,1.167,1.167,0,0,0-.361.854V15.786A1.231,1.231,0,0,0,19.49,17H32.847a1.231,1.231,0,0,0,1.214-1.214V3.643A1.167,1.167,0,0,0,33.7,2.789Zm-11.479,13H19.49V13.053h2.732Zm0-3.339H19.49V9.411h2.732Zm0-3.643H19.49V6.071h2.732Zm-.213-4.34a.291.291,0,0,1-.09-.213V1.518a.308.308,0,0,1,.3-.3h.607a.308.308,0,0,1,.3.3V4.25a.308.308,0,0,1-.3.3h-.607A.291.291,0,0,1,22.009,4.463Zm3.856,11.322H22.829V13.053h3.036v2.732Zm0-3.339H22.829V9.411h3.036v3.036Zm0-3.643H22.829V6.071h3.036V8.8Zm3.643,6.982H26.472V13.053h3.036Zm0-3.339H26.472V9.411h3.036Zm0-3.643H26.472V6.071h3.036Zm-.214-4.34a.292.292,0,0,1-.09-.213V1.518a.307.307,0,0,1,.3-.3h.607a.307.307,0,0,1,.3.3V4.25a.307.307,0,0,1-.3.3h-.607A.291.291,0,0,1,29.295,4.463Zm3.552,11.322H30.115V13.053h2.732Zm0-3.339H30.115V9.411h2.732Zm0-3.643H30.115V6.071h2.732Z"/>
 575               </g>
 576           </symbol>
 577           <symbol id="paris-icon-arrow-bottom" viewBox="0 0 32 32">
 578               <path d="M16 16.172l4.586-4.586 2.828 2.828L16 21.828l-7.414-7.414 2.828-2.828z" />
 579           </symbol>
 580           <symbol id="paris-icon-comment" width="25.826" height="22" viewBox="0 0 25.826 22">
 581               <path d="M15.3,27C8.517,27,3,22.066,3,16S8.516,5,15.3,5,27.6,9.934,27.6,16a10.052,10.052,0,0,1-1.933,5.911L28.5,24.946a1.21,1.21,0,0,1,.227,1.32A1.228,1.228,0,0,1,27.6,27Zm9.477-2.445-1.633-1.748a1.218,1.218,0,0,1-.026-1.636A7.779,7.779,0,0,0,25.136,16c0-4.716-4.412-8.555-9.837-8.555S5.461,11.283,5.461,16s4.413,8.555,9.838,8.555Zm-5.428-9.42a1.235,1.235,0,0,1,1.739,0,1.217,1.217,0,0,1,0,1.729,1.235,1.235,0,0,1-1.739,0,1.217,1.217,0,0,1,0-1.729Zm-4.918,0a1.235,1.235,0,0,1,1.739,0,1.217,1.217,0,0,1,0,1.729,1.235,1.235,0,0,1-1.739,0,1.217,1.217,0,0,1,0-1.729Zm-4.919,0a1.235,1.235,0,0,1,1.739,0,1.217,1.217,0,0,1,0,1.729,1.235,1.235,0,0,1-1.739,0,1.217,1.217,0,0,1,0-1.729Z" transform="translate(-3 -5)"/>
 582           </symbol>
 583           <symbol id="paris-icon-edit" viewBox="0 0 20 20">
 584               <g transform="translate(0.25 0.25)">
 585                   <path d="M18.391,49.594a.494.494,0,0,0-.5.492v4.369a1.484,1.484,0,0,1-1.489,1.476H2.481A1.484,1.484,0,0,1,.993,54.455V41.632a1.484,1.484,0,0,1,1.489-1.476H6.888a.492.492,0,1,0,0-.984H2.481A2.474,2.474,0,0,0,0,41.632V54.455a2.474,2.474,0,0,0,2.481,2.46H16.406a2.474,2.474,0,0,0,2.481-2.46V50.086A.494.494,0,0,0,18.391,49.594Zm0,0" transform="translate(0 -36.916)"/>
 586                   <path d="M123.756,1.025a2.609,2.609,0,0,0-3.69,0L109.72,11.37a.58.58,0,0,0-.149.255l-1.36,4.911a.58.58,0,0,0,.714.714l4.911-1.361a.58.58,0,0,0,.255-.149L124.436,5.4a2.612,2.612,0,0,0,0-3.69ZM110.984,11.747,119.45,3.28l2.731,2.731-8.467,8.467Zm-.545,1.095,2.182,2.182-3.018.836Zm13.178-8.266L123,5.191,120.27,2.46l.615-.615a1.45,1.45,0,0,1,2.05,0l.681.68A1.452,1.452,0,0,1,123.616,4.576Zm0,0" transform="translate(-105.098 -0.261)"/>
 587               </g>
 588           </symbol>
 589           <symbol id="paris-icon-upload" viewBox="0 0 48 48" width="48" height="48">
 590               <path d="M13.66 33.08L30.66 33.08L30.66 37.08L13.66 37.08L13.66 37.08L13.66 33.08ZM23.81 15.83L23.81 31.65L20.52 31.65L20.52 15.82L15.48 20.86L13.16 18.53L22.15 9.53L31.15 18.53L28.83 20.86L28.83 20.86L23.81 15.83Z"></path>
 591           </symbol>
 592           <!-- Alert icons -->
 593           <symbol id="paris-icon-alert-warning" viewBox="0 0 32 32">
 594               <path d="M2.222,6.667A2.223,2.223,0,0,0,0,8.889v8.889a2.222,2.222,0,0,0,4.444,0V8.889A2.223,2.223,0,0,0,2.222,6.667M2.222,0A2.222,2.222,0,1,1,0,2.222,2.222,2.222,0,0,1,2.222,0" transform="translate(4 13) rotate(180)"/>
 595           </symbol>   
 596           <symbol id="paris-icon-alert-danger" viewBox="0 0 32 32">
 597               <path d="M14.912,12.552,20.8,6.661l1.859,1.86-5.89,5.891L22.663,20.3,20.8,22.162l-5.891-5.889L9.021,22.164,7.162,20.3l5.89-5.891L7.16,8.521,9.02,6.662Z" transform="translate(-6 -14)"/>
 598           </symbol>
 599           <symbol id="paris-icon-alert-info" viewBox="0 0 32 32">
 600               <path d="M2.18,6.54A2.181,2.181,0,0,0,0,8.72v8.72a2.18,2.18,0,0,0,4.36,0V8.72A2.181,2.181,0,0,0,2.18,6.54M2.18,0A2.18,2.18,0,1,1,0,2.18,2.18,2.18,0,0,1,2.18,0"  />
 601           </symbol>
 602           <symbol id="paris-icon-alert-check" viewBox="0 0 32 32">
 603               <path d="M20.782,1.758,8.821,14.15,4.2,9.224.5,12.946l8.268,8.811L24.428,5.536Z" transform="translate(0 -10)"/>
 604           </symbol>
 605           <symbol id="paris-icon-alert-close" viewBox="0 0 32 32">
 606               <path d="M13.32,11.342,18,6.661l1.477,1.478L14.8,12.82,19.479,17.5,18,18.978,13.32,14.3,8.639,18.98,7.161,17.5l4.68-4.681L7.16,8.139,8.638,6.662Z" />
 607           </symbol>
 608           <symbol id="paris-icon-mail" viewBox="0 0 32 32">
 609               <path d="M8,12.0175112 L8,21 L24,21 L24,12.079919 L15.9965153,17.3969692 L8,12.0175112 Z M22.0112562,11 L10.0705809,11 L16.0034847,14.9912143 L22.0112562,11 L22.0112562,11 Z M6,9 L26,9 L26,23 L6,23 L6,9 Z"></path>
 610           </symbol>
 611       </defs>
 612   </svg>
 613   </#macro>
 614   <#-- macro parisIcons     
 615   name                       
 616   title                      
 617   id                         
 618   class                      
 619   params                     
 620   -->
 621   <#macro parisIcon name title id='' class='' params=''>
 622   <#assign svgId=random /> 
 623   <svg class="paris-icon paris-icon-${name!}<#if class!=''> ${class!}</#if>"<#if id!=''> id="${id!}"</#if> aria-labelledby="svg-label-${name}" role="img" aria-hidden="true" focusable="false" <#if params!=''> ${params!}</#if>>
 624       <title id="svg-label-${name}">${title!}</title>
 625       <use xlink:href="#paris-icon-${name!}"></use>
 626   </svg>
 627   </#macro>
 628   <#-- END PARIS ICON PACK                                                                    -->
 629   <#-- HTML TAGS                  -->
 630   <#-- Name :   cImg              -->
 631   <#-- Attributes List  :         -->
 632   <#-- src                        -->
 633   <#-- title                      -->
 634   <#-- alt                        -->
 635   <#-- id                         -->
 636   <#-- class                      -->
 637   <#-- params                     -->
 638   <#macro cImg src title alt='' id='' class='img-fluid' params=''>
 639   <img src="${src!}" <#if title !=''>title="${title!}" </#if><#if alt !='' || title!=''><#if alt !=''>alt="${alt!}<#else>${title!}</#if>"</#if> class="<#if class!=''>${class!}</#if>"<#if id!=''> id="${id!}"</#if><#if params!=''> ${params!}</#if> >
 640   </#macro>
 641   <#-- Name :   cTitle            -->
 642   <#-- Attributes List  :         -->
 643   <#-- level                      -->
 644   <#-- id                         -->
 645   <#-- class                      -->
 646   <#-- params                     -->
 647   <#macro cTitle level=1 id='' class='' params=''>
 648   <h${level}<#if class!=''> class="${class!}"</#if><#if id!=''> id="${id!}"</#if><#if params!=''> ${params!}</#if>>
 649   <#nested/>
 650   </h${level}>
 651   </#macro>
 652   <#-- Name :   cInline           -->
 653   <#-- Attributes List  :         -->
 654   <#-- type: section, div         -->
 655   <#-- class (default) : ''       -->
 656   <#-- id                         -->
 657   <#-- params                     -->
 658   <#macro cInline type='span' class='' id='' params=''>
 659   <${type}<#if class!=''> class="${class}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 660   <#nested>
 661   </${type}>
 662   </#macro>
 663   <#-- Name :   cBlock            -->
 664   <#-- Attributes List  :         -->
 665   <#-- type: section, div         -->
 666   <#-- class (default) : ''       -->
 667   <#-- id                         -->
 668   <#-- params                     -->
 669   <#macro cBlock type='div' class='' id='' params=''>
 670   <${type}<#if class!=''> class="${class}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 671   <#nested>
 672   </${type}>
 673   </#macro>
 674   <#-- Name :   cText    Inline text elements     -->
 675   <#-- Attributes List  :                         -->
 676   <#-- type: p, div, span, blockquote, strong, small   -->
 677   <#-- id                                         -->
 678   <#-- class                                      -->
 679   <#-- params                                     -->
 680   <#macro cText type='p' id='' class='' params=''>
 681   <${type}<#if class!=''> class="${class!}"</#if><#if id!=''> id="${id!}"</#if><#if params!=''> ${params!}</#if>>
 682   <#nested/>
 683   </${type}>
 684   </#macro>
 685   <#-- Name :   cSection          -->
 686   <#-- Attributes List  :         -->
 687   <#-- type: section, div         -->
 688   <#-- class (default) : ''       -->
 689   <#-- id                         -->
 690   <#-- params                     -->
 691   <#macro cSection type='section' class='' id='' params=''>
 692   <${type}<#if class!=''> class="${class}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 693   <#nested>
 694   </${type}>
 695   </#macro>
 696   <#-- Name : cFigure             -->
 697   <#-- Attributes List  :         -->
 698   <#-- desc                       -->
 699   <#-- id                         -->
 700   <#-- class                      -->
 701   <#-- params                     -->
 702   <#macro cFigure caption='' id='' class='figure' params=''>
 703   <figure <#if class!=''>class="${class!}"</#if><#if id!=''> id="${id!}"</#if><#if params!=''> ${params!}</#if>>
 704   <#nested/>
 705   <#if caption!=''><figcaption class="figure-caption">${caption}</figcaption></#if>
 706   </figure>
 707   </#macro>
 708   <#-- Name : FigCaption          -->
 709   <#-- Attributes List  :         -->
 710   <#-- desc                       -->
 711   <#-- id                         -->
 712   <#-- class                      -->
 713   <#-- params                     -->
 714   <#macro cFigCaption id='' class='' params=''>
 715   <figcaption <#if class!=''>class="${class!}"</#if><#if id!=''> id="${id!}"</#if><#if params!=''> ${params!}</#if>>
 716   <#nested/>
 717   </figcaption>
 718   </#macro>
 719   <#-- Name : cPicture            -->
 720   <#-- Attributes List  :         -->
 721   <#-- id                         -->
 722   <#-- class                      -->
 723   <#-- params                     -->
 724   <#macro cPicture id='' class='' params=''>
 725   <picture<#if class!=''> class="${class!}"</#if><#if id!=''> id="${id!}"</#if><#if params!=''> ${params!}</#if>>
 726   <#nested/>
 727   </picture>
 728   </#macro>
 729   <#-- Name :   cPicSource       -->
 730   <#-- Attributes List  :        -->
 731   <#-- srcset                    -->
 732   <#-- media                     -->
 733   <#-- type                      -->
 734   <#macro cPictureSrc srcset media='' type='' class='' id='' params=''>
 735   <source srcset="${srcset}" <#if media!=''>media="${media!}"</#if><#if type!=''> type="${type!}"</#if><#if class!=''> class="${class!}"</#if><#if id!=''> id="${id!}"</#if><#if params!=''> ${params!}</#if>>
 736   </#macro>
 737   <#-- Name : chList              -->
 738   <#-- Attributes List  :         -->
 739   <#-- type                       -->
 740   <#-- id                         -->
 741   <#-- class                      -->
 742   <#-- role : default "listbox"   -->
 743   <#-- params                     -->
 744   <#macro chList type='u' id='' class='' role='listbox' params=''>
 745   <${type}l class="<#if class != ''>${class}</#if>"<#if id!=''> id="${id}"</#if><#if role!=''> role="${role}"</#if><#if params!=''> ${params}</#if> >
 746       <#nested>
 747   </${type}l>
 748   </#macro>
 749   <#-- Name : chItem              -->
 750   <#-- Attributes List  :         -->
 751   <#-- id                         -->
 752   <#-- class                      -->
 753   <#-- role : default "option"    -->
 754   <#-- params                     -->
 755   <#macro chItem id='' class='' role='option' params=''>
 756   <li <#if class != ''>class="${class}"</#if><#if id!=''> id="${id}"</#if><#if role!=''> role="${role}"</#if><#if params!=''> ${params}</#if>>
 757   <#nested>
 758   </li>
 759   </#macro>
 760   <#-- Name : cBadge              -->
 761   <#-- Attributes List  :         -->
 762   <#-- type  : pill, default ""   -->
 763   <#-- id                         -->
 764   <#-- class                      -->
 765   <#-- params                     -->
 766   <#macro cBadge class='' id='' params=''>
 767   <span class="badge<#if class != ''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if> >
 768   <#nested>
 769   </span>
 770   </#macro>
 771   <#-- Name : chItem              -->
 772   <#-- Attributes List  :         -->
 773   <#-- id                         -->
 774   <#-- class                      -->
 775   <#-- params                     -->
 776   <#macro chItem id='' class='' params=''>
 777   <li <#if class != ''>class="${class}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 778   <#nested>
 779   </li>
 780   </#macro>
 781   <#-- Name : cTable              -->
 782   <#-- Attributes List  :         -->
 783   <#-- caption                    -->
 784   <#-- breakpoint                 -->
 785   <#-- themed                     -->
 786   <#-- collapsible                -->
 787   <#-- id                         -->
 788   <#-- class                      -->
 789   <#-- params                     -->
 790   <#macro cTable caption='' summary='' breakpoint='' themed=true collapsible=true class='' id='' params=''>
 791   <div class="table-responsive<#if breakpoint!=''>${breakpoint}</#if>">
 792   <table class="table<#if themed> ctable<#if collapsible> xs-collapsed</#if></#if><#if class !=''> ${class}</#if>"<#if summary !=''> summary="${summary!}"</#if><#if id !=''> id="${id!}"</#if><#if params!=''> ${params}</#if> >
 793       <#if caption !=''> <caption class="sr-only">${caption!}</caption></#if>
 794       <#nested>
 795   </table>
 796   </div>
 797   </#macro>
 798   <#-- Name : cThead              -->
 799   <#-- Attributes List  :         -->
 800   <#-- class                      -->
 801   <#-- id                         -->
 802   <#-- params                     -->
 803   <#macro cThead class='' id='' params=''>
 804   <thead <#if class!=''>thead-${class!}</#if><#if id !=''> id="${id!}"</#if><#if params!=''> ${params!}</#if> >
 805   <#nested>
 806   </thead>
 807   </#macro>
 808   <#-- Name : cTfoot              -->
 809   <#-- Attributes List  :         -->
 810   <#-- class                      -->
 811   <#-- id                         -->
 812   <#-- params                     -->
 813   <#macro cTfoot class='' id='' params=''>
 814   <tfoot <#if class!=''>thead-${class!}</#if><#if id !=''> id="${id!}"</#if><#if params!=''> ${params!}</#if> >
 815   <#nested>
 816   </tfoot>
 817   </#macro>
 818   <#-- Name : cTbody              -->
 819   <#-- Attributes List  :         -->
 820   <#-- class                      -->
 821   <#-- id                         -->
 822   <#-- params                     -->
 823   <#macro cTbody class='' id='' params=''>
 824   <tbody <#if class!=''>${class!}</#if><#if id !=''> id="${id!}"</#if><#if params!=''> ${params!}</#if> >
 825   <#nested>
 826   </tbody>
 827   </#macro>
 828   <#-- Name : cTr                 -->
 829   <#-- Attributes List  :         -->
 830   <#-- class                      -->
 831   <#-- id                         -->
 832   <#-- params                     -->
 833   <#macro cTr class='' id='' params=''>
 834   <tr<#if class!=''> class="${class!}"</#if><#if id !=''> id="${id!}"</#if><#if params!=''> ${params!}</#if> >
 835   <#nested>
 836   </tr>
 837   </#macro>
 838   <#-- Name : cTh                 -->
 839   <#-- Attributes List  :         -->
 840   <#-- scope                      -->
 841   <#-- class                      -->
 842   <#-- id                         -->
 843   <#-- params                     -->
 844   <#macro cTh id='' class='' scope='col' role='columnheader' params=''>
 845   <th scope="${scope!}" class="<#if class != ''>${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if> >
 846       <#nested>
 847   </th>
 848   </#macro>
 849   <#-- Name : cTd                 -->
 850   <#-- Attributes List  :         -->
 851   <#-- id                         -->
 852   <#-- class                      -->
 853   <#-- scope                      -->
 854   <#-- headers                    -->
 855   <#-- role                       -->
 856   <#-- colspan                    -->
 857   <#-- nospan                     -->
 858   <#-- params                     -->
 859   <#macro cTd id='' class='' scope='' headers='' role='cell' colspan='' nospan=false params=''>
 860   <td<#if scope!=''> scope="${scope!}"</#if><#if colspan!=''> colspan="${colspan!}"</#if><#if headers!=''> headers="${headers!}"</#if><#if class != ''> class="${class}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if role!=''> role="${role!}"</#if>>
 861   <#if !nospan><span><#nested></span><#else><#nested></#if>
 862   </td>
 863   </#macro>
 864   <#-- MACRO FOR LAYOUT / GRID    -->
 865   <#-- Name : cHeader             -->
 866   <#-- Attributes List  :         -->
 867   <#-- title                      -->
 868   <#-- titleUrl                   -->
 869   <#-- titleClass                 -->
 870   <#-- class                      -->
 871   <#-- id                         -->
 872   <#-- params                     -->
 873   <#macro cHeader title='' titleUrl='' titleUrlClass='' class='' id='' params=''>
 874   <header <#if class!=''> class="${class!}"</#if><#if id!=''> id="${id!}"</#if><#if params!=''> ${params!}</#if> >
 875       <#if title !=''><@cTitle><#if titleUrl !=''><a href="${titleUrl!}"<#if titleUrlClass !=''> class="${titleUrlClass!}"</#if> title="${title!}"></#if>${title!}<#if titleUrl !=''></a></#if></@cTitle></#if>
 876       <#nested>
 877   </header>
 878   </#macro>
 879   <#-- Name : cFooter             -->
 880   <#-- Attributes List  :         -->
 881   <#-- title                      -->
 882   <#-- class                      -->
 883   <#-- id                         -->
 884   <#-- params                     -->
 885   <#macro cFooter title='' class='' id='' params=''>
 886   <footer<#if class!=''> class="${class}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if> >
 887       <#if title !=''><@cTitle>${title}</@cTitle></#if>
 888       <#nested>
 889   </footer>
 890   </#macro>  
 891   <#-- Name : cArticle             -->
 892   <#-- Attributes List  :         -->
 893   <#-- title                      -->
 894   <#-- class                      -->
 895   <#-- titleUrl                   -->
 896   <#-- titleClass                 -->
 897   <#-- id                         -->
 898   <#-- params                     -->
 899   <#macro cArticle title='#i18n{themeparisfr.defaultArticleTitle}' titleClass='' class='portlet' id='' params=''>
 900   <article class="<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if> >
 901       <#if title!=''><@cHeader title=title class=titleClass /></#if> 
 902       <@cSection type='div' class='article-content'>
 903           <#nested>
 904       </@cSection>
 905   </article>
 906   </#macro>
 907   <#-- Name :   cContainer        -->
 908   <#-- Attributes List  :         -->
 909   <#-- class (default) : row      -->
 910   <#-- id                         -->
 911   <#-- params                     -->
 912   <#macro cContainer type='' class='' id='' params=''>
 913   <#if class!=''>
 914       <#local cClass>container<#if type!=''>-${type}</#if> ${class}</#local> 
 915   <#else>
 916       <#local cClass>container<#if type!=''>-fluid</#if></#local>
 917   </#if>
 918   <@cSection type='div' class=cClass id=id params=params >
 919   <#nested>
 920   </@cSection>
 921   </#macro>
 922   <#-- Name :   cRow              -->
 923   <#-- Attributes List  :         -->
 924   <#-- class (default) : row      -->
 925   <#-- id                         -->
 926   <#-- params                     -->
 927   <#macro cRow class='' id='' params=''>
 928   <@cSection type='div' class='row ${class}' id=id params=params >
 929   <#nested>
 930   </@cSection>
 931   </#macro>
 932   <#-- Name :   cCol                      -->
 933   <#-- Attributes List  :                 -->
 934   <#-- Attributes                         -->
 935   <#-- cols                              -->
 936   <#-- class                              -->
 937   <#-- id                                 -->
 938   <#-- params                             -->
 939   <#macro cCol cols='' default='col' class='' id='' params=''>
 940   <#if cols!=''>
 941       <#local cClass>col-${cols} ${class}</#local> 
 942   <#else>
 943       <#local cClass>${default!} ${class}</#local>
 944   </#if>
 945   <@cSection type='div' class=cClass id=id params=params >
 946   <#nested>
 947   </@cSection>
 948   </#macro>
 949   <#-- Progress macro
 950       token : the progress manager Feed Token
 951       interval : refresh period in milli seconds (if the feed token is provided) 
 952       showReport : display the messages report (if the feed token is provided) -->
 953   <#macro cProgress label labelClass='' class='' color='primary' id='' params='' value=0 min=0 max=100 text='' progressId='progressbar' token='' role='progressbar' showReport=false intervalTime=2000 >
 954   <#if max?number != 100><#assign progPercent=( (value?number / max?number ) * 100) /><#else><#assign progPercent=value /></#if>
 955   <p id="${progressId}-label" class="label-progress<#if labelClass!=''> ${labelClass}</#if>">${label}</p>
 956   <#if role='progressbar'>
 957   <div class="progress<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 958       <div id="${progressId}" aria-labelledby="${progressId}-label" class="progress-bar bg-${color}<#if token!=''> progressmanager</#if>" <#if role!=''>role="${role}"</#if> style="width:${progPercent?replace(',','.')}%;" <#if role='progressbar'>aria-valuenow="${value}"  aria-valuemin="${min}" aria-valuemax="${max}"</#if> <#if token!=''>token="${token}" intervalTime=${intervalTime} showReport=${showReport?c}</#if> >
 959           <#if text=''>${progPercent}%<#else>${text}</#if>
 960       </div>
 961   </div>
 962   <#else>
 963   <div class="progress<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 964       <p id="${progressId}" aria-hidden="true" class="progress-bar bg-${color}<#if token!=''> progressmanager</#if>" style="width:${progPercent?replace(',','.')}%;">
 965           <#if text=''>${progPercent}%<#else>${text}</#if>
 966       </p>
 967   </div>
 968   </#if>
 969   <#if showReport ><p id="${progressId}-report" class="progress-bar-report" lastline=0></p></#if>
 970   </#macro>
 971   <#-- Macro for FORMS                -->
 972   <#-- Name :   cStepDone             -->
 973   <#-- Attributes List  :             -->
 974   <#-- step                           -->
 975   <#-- title                          --> 
 976   <#-- actionName='action_doGoToStep' --> 
 977   <#-- actionLabel='Modifier'         --> 
 978   <#-- class                          -->
 979   <#-- id                             -->
 980   <#-- params                         -->
 981   <#macro cStepDone step title idx actionName='action_doGoToStep' actionLabel='#i18n{themeparisfr.labelUpdate}' actionAriaLabelKey='themeparisfr.ariaLabelUpdate' actionHref='' actionClass='' actionParams='' class='' id='' params=''>
 982   <@cSection type='div' class='step step-done ${class!}' id=id params=params>
 983   	<@cSection type='div' class='step-title'>
 984           <@cContainer>
 985               <@cTitle>
 986                   <@cText type='span'>${title}</@cText>
 987                   <#if actionHref !=''>
 988                       <@cSection type='div' class='d-none d-sm-block pl-2'>
 989                           <a class="btn btn-primary btn-sm-block<#if actionClass !=''> ${actionClass}</#if>" href="${actionHref}" title="#i18n{themeparisfr.labelUpdate}" aria-label="${i18n(actionAriaLabelKey, title)?html}"<#if actionParams !=''> ${actionParams}</#if>>
 990                               ${actionLabel!}
 991                           </a>
 992                       </@cSection>   
 993                   <#elseif actionName !=''>
 994                       <@cSection type='div' class='d-none d-sm-block pl-2'>
 995                           <button class="btn btn-primary btn-sm-block" name="${actionName}" type="submit" value="${idx!}" aria-label="${i18n(actionAriaLabelKey, title)?html}" formnovalidate>
 996                           ${actionLabel!}
 997                           </button>
 998                       </@cSection>    
 999                   </#if>
 1000               </@cTitle>    
 1001           </@cContainer>    
 1002   	</@cSection>
 1003   	<@cContainer>
 1004           <@cSection class='step-content'>
 1005               <#nested>   
 1006               <#if actionHref !=''>
 1007                   <@cSection type='div' class='d-block d-sm-none'>
 1008                       <a class="btn btn-primary btn-sm-block<#if actionClass !=''> ${actionClass}</#if>" href="${actionHref}" title="#i18n{themeparisfr.labelUpdate}" aria-label="${i18n(actionAriaLabelKey, title)?html}"<#if actionParams !=''> ${actionParams}</#if>>
 1009                           ${actionLabel!}
 1010                       </a>
 1011                   </@cSection>   
 1012               <#elseif actionName !=''>
 1013                   <@cSection type='div' class='d-block d-sm-none'>
 1014                       <button class="btn btn-primary btn-sm-block" name="${actionName}" type="submit" value="${idx!}" aria-label="${i18n(actionAriaLabelKey, title)?html}" formnovalidate>
 1015                       ${actionLabel!}
 1016                       </button>
 1017                   </@cSection>    
 1018               </#if>
 1019           </@cSection>
 1020       </@cContainer>
 1021   </@cSection>
 1022   </#macro>
 1023   <#macro cStepCurrent step title actionNextStep='' labelNextStep='#i18n{themeparisfr.labelNextStep}' actionPrevStep='' labelPrevStep='#i18n{themeparisfr.labelPrevStep}' actionSaveStep='' labelSaveStep='#i18n{themeparisfr.labelSaveStep}' actionSaveForBackUpStep='' labelForBackUpStep='#i18n{forms.step.saveResponse}' actionResetBackUpStep='' labelResetBackUpStep='#i18n{forms.step.resetResponse}' showPrevStep=true hasSteps=true hasMandatory=true class='' params=''>
 1024   <@cSection type='div' id='current_step' class='step step-current ${class!}' params=params >
 1025   	<@cSection type='div' class='step-title'>
 1026   		<@cContainer>
 1027               <#if hasSteps>
 1028                   <@cTitle params='data-step="${step}" title="${title}"'><@cText type='span'>${title}</@cText></@cTitle>
 1029               <#else>
 1030                   <@cTitle class="no-step" params='title="${title}"'>${title}</@cTitle>    
 1031               </#if>
 1032           </@cContainer>
 1033   	</@cSection>
 1034       <@cContainer>
 1035           <@cSection class="step-content">
 1036               <#if hasMandatory>
 1037                   <@cFormRow>
 1038                       <@cCol class="sr-only">
 1039                           <@cText class="mandatory-warning">#i18n{themeparisfr.msgMandatory}</@cText>
 1040                       </@cCol>
 1041                   </@cFormRow>	
 1042               </#if>
 1043               <#nested>
 1044               <#if hasMandatory>
 1045                   <@cFormRow>
 1046                       <@cCol cols='12 col-md-10'>
 1047                           <@cText class="mandatory-warning">#i18n{themeparisfr.msgMandatory}</@cText>
 1048                       </@cCol>
 1049                   </@cFormRow>	
 1050               </#if>
 1051               <@cFormRow>	
 1052                   <@cCol cols='12' class='d-flex justify-content-end mb-5'>
 1053                       <#if actionPrevStep !='' && showPrevStep >
 1054                           <button class="btn btn-link-action mr-2 mt-1 order-sm-1" name="${actionPrevStep}" type="submit">
 1055                               <span class="d-inline mr-2">${labelPrevStep}</span> 
 1056                           </button>
 1057                       </#if> 
 1058                       <#if actionNextStep !=''>
 1059                           <button class="btn btn-action mr-2 mt-1 order-sm-2" name="${actionNextStep}" type="submit">
 1060                               <span class="d-inline mr-2">${labelNextStep}</span> 
 1061                           </button>
 1062                       </#if>    
 1063                       <#if actionSaveForBackUpStep !=''>    
 1064                           <button class="btn btn-action mr-2 mt-1 order-sm-2" name="${actionSaveForBackUpStep}" type="submit">
 1065                               <span class="d-inline mr-2">#i18n{themeparisfr.labelSaveStep}</span> 
 1066                           </button>
 1067                       </#if>
 1068                       <#if actionResetBackUpStep !=''>    
 1069                           <button class="btn btn-action mr-2 mt-1 order-sm-2" name="${actionResetBackUpStep}" type="submit">
 1070                               <span class="d-inline mr-2">${labelResetBackUpStep}</span> 
 1071                           </button>
 1072                       </#if>
 1073                       <#if actionSaveStep !=''>    
 1074                           <button class="btn btn-action mr-2 mt-1 order-sm-2" name="${actionSaveStep}" type="submit">
 1075                               <span class="d-inline mr-2">${labelSaveStep}</span> 
 1076                           </button>
 1077                       </#if>
 1078                   </@cCol>
 1079               </@cFormRow>
 1080   	    </@cSection>
 1081       </@cContainer>    
 1082   </@cSection>   
 1083   <script>
 1084   $( function() {
 1085   	<#if step?number gt 1 >
 1086   	var current = document.querySelector('#current_step');
 1087   	var y = current.offsetTop - 180;
 1088   	window.scrollBy(0, y);
 1089   	</#if>
 1090   });
 1091   </script> 
 1092   </#macro>
 1093   <#macro cStepNext step title class='' id='' params=''>
 1094   <#local stepClass>step step-next<#if class!=''>${class}</#if></#local>
 1095   <@cSection type='div' class=stepClass id=id params=params>
 1096       <@cSection type='div' class='step-title'>
 1097           <@cSection type='div' class='container'>
 1098               <@cTitle params=' data-step="${step}"'><@cText type='span'>${title}</@cText></@cTitle>
 1099           </@cSection>
 1100       </@cSection>
 1101   </@cSection>
 1102   </#macro>
 1103   <#macro cStepGroup title iterable=false iteration=0 iterationMax=10 labelAddIteration='#i18n{themeparisfr.labelAdd}' labelDelIteration='#i18n{themeparisfr.labelDelete}' headerParams='' help='' class='' id='' params=''>
 1104   <@cFormRow>
 1105   	<@cSection type='div' class='col step-group ${class!}' id=id params=params >
 1106   	    <a name="last_"></a>
 1107           <@cRow>
 1108               <#local headerClass>col px-3 <#if iterable && iteration gt 0>d-flex justify-content-between</#if></#local>
 1109               <@cHeader class=headerClass params=headerParams >
 1110                   <@cTitle>${title!} <#if iteration gt 0>(${iteration+1})</#if></@cTitle>
 1111                   <#if iterable && iteration gt 0>
 1112                       <@cSection type='div' class='text-right'>
 1113                           <button class="btn btn-link-action" name="action_removeIteration"  value="rm_${iteration}" type="submit">
 1114                               <i class="fa fa-trash" aria-hidden="true"></i> <small class="d-inline">${labelDelIteration}</small>
 1115                           </button>
 1116                       </@cSection>
 1117                   </#if>
 1118               </@cHeader>
 1119           </@cRow>
 1120   		<#if help!=''>
 1121   			<@cFormRow>
 1122   				<@cCol>
 1123                       <@cAccordion id=iteration title='${i18n( "themeparisfr.msgHelpAbout", title )}' class='outline my-5' >
 1124                       ${help}
 1125                       </@cAccordion>			
 1126                   </@cCol>
 1127   			</@cFormRow>
 1128   		</#if>
 1129   		<#nested>
 1130   		<#if iterable && iteration lte iterationMax>
 1131               <@cFormRow>
 1132                   <@cCol class='px-4 px-sm-5 d-flex justify-content-end'>
 1133                       <button class="btn btn-action btn-sm" name="action_addIteration" value="add_${iteration}" type="submit">
 1134                           <span class="fa fa-plus-circle"></span> ${labelAddIteration}
 1135                       </button>
 1136                   </@cCol>	
 1137               </@cFormRow>	
 1138   	    </#if>
 1139   	</@cSection>		
 1140   </@cFormRow>
 1141   </#macro>
 1142   <#-- cForm FORM        -->
 1143   <#macro cForm class='' id='' params='' name='' method='post' role='' action='' >
 1144   <form <#if class!=''>class="${class}"</#if> <#if id!=''> id="${id!name}"</#if><#if action!=''> action="${action}"</#if><#if method!=''> method="${method}"</#if><#if name!=''> name="${name}"</#if><#if role!=''> aria-label="${role}"</#if><#if params!=''> ${params}</#if>>
 1145   <#nested>
 1146   </form>
 1147   </#macro>
 1148   <#-- cFormRow FORM ROW -->
 1149   <#macro cFormRow class='' id='' params=''>
 1150   <div class="form-row<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1151   <#nested>
 1152   </div>
 1153   </#macro>
 1154   <#-- cLabel LABEL      -->
 1155   <#macro cLabel label class='' id='' params='' for='' showLabel=true required=false >
 1156   <label class="<#if class!=''>${class}</#if><#if !showLabel> sr-only</#if>"<#if for!=''> for="${for!}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1157   ${label!} <#if required><abbr class="main-warning-color" tabindex="-1" title="#i18n{themeparisfr.labelMandatory}">*</abbr></#if>
 1158   </label>
 1159   </#macro>
 1160   <#-- cFieldset Fieldset      -->
 1161   <#macro cFieldset legend='' class='' id='' params='' for='' showLabel=true required=false >
 1162   <fieldset class="<#if class!=''>${class}</#if><#if !showLabel> sr-only</#if>"<#if for!=''> for="${for!}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1163   <#if legend!=''><legend>${legend!}<#if required> <abbr class="main-warning-color" tabindex="-1" title="#i18n{themeparisfr.labelMandatory}">*</abbr></#if></legend></#if>
 1164   <#nested>
 1165   </fieldset>
 1166   </#macro>
 1167   <#-- cInput TEXT/SEARCH/PASSWORD/EMAIL/HIDDEN/DATE...         -->
 1168   <#macro cInput name class='form-control' id='' type='text' value='' placeholder='' required=false disabled=false readonly=false pattern='' accept='' title='' maxlength=0 min=0 max=0 helpMsg='' errorMsg='' params=''>
 1169   <input type="${type!}" class="<#if class!=''> ${class!}</#if><#if errorMsg!=''> is-invalid</#if>" name="${name!}" id="<#if id!=''>${id}<#else>${name!}</#if>" value="${value!}"<#if placeholder!=''> placeholder="${placeholder!}"</#if><#if title!=''> title="${title}"</#if><#if maxlength &gt; 0> maxlength="${maxlength}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if params!=''> ${params}</#if><#if pattern!=''> pattern=${pattern}</#if><#if accept !=''> accept=${accept}</#if><#if min!=0> min="${min}"</#if><#if max!=0> max="${max}"</#if><#if required> required</#if><#if errorMsg!=''> is-invalid aria-invalid="true" aria-describedby="error_<#if id!=''>${id!}<#else>${name}</#if>"<#elseif helpMsg!=''> aria-describedby="help_<#if id!=''>${id!}<#else>${name}"</#if></#if>>
 1170   <#assign idMsg><#if id!=''>${id}<#else>${name!}</#if></#assign>
 1171   <#if helpMsg !=''><@cFormHelp idMsg helpMsg /></#if>
 1172   <#if errorMsg !=''><@cFormError idMsg errorMsg /></#if>
 1173   </#macro>
 1174   <#-- cTextArea        -->
 1175   <#macro cTextArea name class='form-control' id='' placeholder='' required=false disabled=false readonly=false title='' maxlength=0 helpMsg='' rows=0 errorMsg='' params=''>
 1176   <textarea class="<#if class!=''> ${class!}</#if><#if errorMsg!=''> is-invalid</#if>" name="${name!}" id="<#if id!=''>${id}<#else>${name!}</#if>" <#if placeholder!=''> placeholder="${placeholder!}"</#if><#if title!=''> title="${title}"</#if><#if maxlength &gt; 0> maxlength="${maxlength}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if params!=''> ${params}</#if><#if rows!=0>rows=${rows}</#if><#if required> required</#if><#if errorMsg!=''> is-invalid aria-invalid="true" aria-describedby="error_<#if id!=''>${id!}<#else>${name}</#if>"<#elseif helpMsg!=''> aria-describedby="help_<#if id!=''>${id!}<#else>${name}"</#if></#if>>
 1177   <#nested>
 1178   </textarea>
 1179   <#assign idMsg><#if id!=''>${id}<#else>${name!}</#if></#assign>
 1180   <#if helpMsg !=''><@cFormHelp idMsg helpMsg /></#if>
 1181   <#if errorMsg !=''><@cFormError idMsg errorMsg /></#if>
 1182   </#macro>
 1183   <#-- cField = FormGroup + label + nested input and else     -->
 1184   <#macro cField label='' labelClass='' labelData='' for='' showLabel=true required=false class='' id='' params='' >
 1185   <div class="form-group<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1186   <#if label!=''>
 1187   <#assign fieldLabel>${label!} ${labelData!}</#assign>
 1188   <@cLabel label=fieldLabel class=labelClass for=for showLabel=showLabel required=required />
 1189   </#if>
 1190   <#nested>
 1191   </div>
 1192   </#macro>
 1193   <#macro cInputDropFiles name handler={} type='dropzone' nbFiles=1 showAllFilesBtn=1 nbCol=1 maxFileSize=0 accept='' label='#i18n{themeparisfr.labelUploadFiles}' showLabel=1 labelPos=1 labelSelect='#i18n{themeparisfr.labelSelect}' labelSubmit='#i18n{themeparisfr.labelSubmit}' labelDelete='#i18n{themeparisfr.labelDelete}' required=false disabled=false multiple=true noJs=false helpMsg='' hasFiles=false errorMsg='' class='' id='' params='' >
 1194   <#local cId><#if id!=''>${id!}<#else>${name!}</#if></#local>
 1195   <#local nbFiles = nbFiles?number >
 1196   <#local maxFileSize = maxFileSize?number >
 1197   <#if handler?has_content>
 1198   <#local deleteBtnName='_form_upload_delete_${cId}' >
 1199   <input type="hidden" name="asynchronousupload.handler" value="${handler.handlerName}">
 1200   <div class="form-row group-files">
 1201   	<div class="col">
 1202           <#if nbCol == 1 && labelPos == 1>
 1203               <label id="lb${cId!}" <#if showLabel=0>class="sr-only sr-only-focusable" </#if>for="${cId!}">${label}</label>
 1204           </#if>
 1205           <#if type="dropzone">
 1206               <div class="file-input <#if errorMsg!=''> is-invalid</#if>">
 1207                   <input type="file" class="form-control my-1 ${cssClass!}<#if handler?has_content> ${handler.handlerName}</#if><#if class!=''> ${class}</#if>" <#if required>aria-required="true"</#if> name="${name}" id="${cId!}" <#if multiple>multiple="multiple"</#if><#if nbFiles gt 0> data-nof="${nbFiles}"</#if><#if maxFileSize gt 0> data-mfs="${maxFileSize}"</#if><#if accept !=''> accept="${accept}" data-atf="${accept}"</#if>>
 1208                   <p>
 1209                       <svg class="paris-icon paris-icon-upload" role="img" aria-labelledby="paris-icon-title-group" focusable="false">
 1210                           <title id="paris-icon-title-group">#i18n{asynchronousupload.action.browse.name}</title>
 1211                           <use xlink:href="#paris-icon-upload"></use>
 1212                       </svg>
 1213                   </p>
 1214                   <p class="text-uppercase">#i18n{themeparisfr.labelDropFiles} #i18n{asynchronousupload.action.browse.name}</p>
 1215               </div>    
 1216               <#if errorMsg!=''><div class="invalid-feedback" id="${cId}Error">${errorMsg}</div></#if>
 1217           <#elseif type="button">
 1218               <div class="custom-file<#if errorMsg!=''> is-invalid</#if>">
 1219                   <input type="file" <#if required>aria-required="true"</#if><#if helpMsg!=''> aria-labelledby="${cId}Help"</#if> name="${name}" id="${cId}" class="custom-file-input ${cssClass!} ${uploadHandler.handlerName}"<#if multiple> multiple</#if><#if accept !=''> accept=${accept}</#if>>
 1220                   <label class="custom-file-label" for="${cId}" data-browse="#i18n{asynchronousupload.action.browse.name}">#i18n{asynchronousupload.action.browse.name}</label>
 1221                   <#if helpMsg!=''><small id="${cId}Help" class="form-text text-muted">${helpMsg}</small></#if>	
 1222                   <button hidden class="btn btn-action" name="${handler.uploadSubmitPrefix}${cId}" id="${handler.uploadSubmitPrefix}${cId}" value="${handler.uploadSubmitPrefix}${cId}" type="submit" >
 1223                       <i class="fa fa-upload"></i>
 1224                       <span class="file-input-text-noscript">#i18n{asynchronousupload.action.send.name}</span>
 1225                       <span class="file-input-text-js" style="display:none;">#i18n{asynchronousupload.action.browse.name}</span>
 1226                   </button>
 1227               </div>	
 1228               <#if errorMsg!=''><div class="invalid-feedback" id="${cId}Error">${errorMsg}</div></#if>
 1229           </#if>	
 1230           <#if nbCol != 1>
 1231           </div>
 1232           <div class="col pl-3">
 1233               <#if nbCol != 1 && labelPos != 1>
 1234               <label id="lb${cId!}" class="<#if showLabel=0>sr-only sr-only-focusable<#else>mt-3</#if>" for="${cId!}">${label}</label>
 1235               </#if>
 1236           </#if>
 1237           <div id="_file_error_box_${cId}"></div>
 1238           <div id="progress_${cId}" class="progress" style="display:none;">
 1239               <div id="progress-bar_${cId}" class="progress-bar progress-bar-success progress-bar-striped"></div>
 1240           </div>
 1241           <div class="form-group" <#if !hasFiles>style="display:none;"</#if> id="_file_deletion_label_${cId!}">
 1242               <label>#i18n{themeparisfr.labelFileSent}</label>
 1243               <div id="_file_deletion_${cId}" class="col py-2 pl-0 files-group">
 1244                   <#nested>
 1245               </div>
 1246           </div>
 1247           <#if nbFiles gt 1 && showAllFilesBtn = 1 >
 1248               <div class="col select-all">
 1249                   <button id="btn-select-all-${cId}" type="button" class="btn btn-link-primary">
 1250                       <i class="fa fa-check" aria-hidden="true"></i> #i18n{portal.util.labelCheckAll}
 1251                   </button>
 1252                   <button id="rmAll-${cId}" class="btn btn-danger" disabled name="${deleteBtnName!}" value="${deleteBtnName!}" type="button" <#if noJs>nojs</#if>>
 1253                       <i class="fa fa-trash" aria-hidden="true"></i>  #i18n{portal.util.labelDelete}
 1254                   </button>
 1255               </div>
 1256           </#if>
 1257       </div>
 1258   </div>
 1259   <script>
 1260   $( function(){
 1261       <#if showAllFilesBtn != 1 >
 1262       var hasChecked = false, countFiles=<#if hasFiles>1<#else>0</#if>;
 1263       btnAll( '${cId}', hasChecked, countFiles )
 1264       $( '#btn-select-all-${cId}' ).on( 'click', function(){
 1265           nbListFiles = $('.files-group .files-item').length;
 1266           btnAll( '${cId}', hasChecked, nbListFiles )
 1267           hasChecked = !hasChecked;
 1268       });
 1269       </#if>
 1270       mapFilesNumber.set( "${cId!}", ${nbFiles!} );
 1271       <#if errorMsg!=''>mapFileErrors.set( "${cId!}", "${errorMsg!}" );</#if>
 1272       <#-- Add FileUpload option to control number of files max to upload -->
 1273       <#if nbFiles?number &gt; 0>$('#${cId!}').fileupload( {dropZone: $('#${cId!}')<#if accept !=''>,acceptFileTypes: /(\.|\/)(${accept?replace('.','')?replace(',','|')})$/i</#if>});</#if>
 1274   });
 1275   </script>
 1276   <#else>
 1277   <div class="custom-file">
 1278       <input type="file" <#if required>aria-required="true"</#if><#if helpMsg!=''> aria-labelledby="${name}Help"</#if> name="${name}" id="${cId}" class="custom-file-input ${cssClass!}<#if class!=''> ${class}</#if>"<#if multiple> multiple</#if>>
 1279       <label class="custom-file-label" for="${name}" data-browse="#i18n{asynchronousupload.action.browse.name}"></label>
 1280       <#if helpMsg!=''><small id="${name}Help" class="form-text text-muted">${helpMsg}</small></#if>	
 1281   </div>	
 1282   <script src="js/plugins/forms/bs-custom-file-input.min.js"></script>
 1283   <script>
 1284   $( function(){
 1285       bsCustomFileInput.init()
 1286   });
 1287   </script>
 1288   </#if>
 1289   </#macro>
 1290   <#-- cInputDropFilesItem                     -->
 1291   <#-- --------------------------------------  -->
 1292   <#-- Attributes                              -->
 1293   <#-- --------------------------------------  -->
 1294   <#-- name                                    -->
 1295   <#-- label                                   -->
 1296   <#-- idx                                     -->
 1297   <#-- fileSize                                -->
 1298   <#-- ext                                     -->
 1299   <#-- maxChars                                -->
 1300   <#-- urlDl                                   -->
 1301   <#-- maxChars                                -->
 1302   <#-- urlRm                                   -->
 1303   <#-- id                                      -->
 1304   <#-- params                                  -->
 1305   <#macro cInputDropFilesItem name label idx handler fileSize=0 ext='' maxChars=24 urlDl='' urlRm='' class=''>
 1306   <#local fileLabel><#if label?length gt maxChars>${label[0..maxChars]}...<#else>${label}</#if></#local>
 1307   <#if handler?has_content>
 1308       <#local handlerName>${handler.handlerName}</#local>
 1309       <#local cUrlDl>jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=${name}&field_index=${idx}&fileName=${label}&asynchronousupload.handler=${handler.handlerName}</#local>
 1310       <#local cUrlRm>#</#local>
 1311       <#local cName>${handler.uploadCheckboxPrefix}${name}${idx}</#local>
 1312       <#local cId>${handler.uploadCheckboxPrefix}${name}${idx}</#local>
 1313   <#else>
 1314       <#local cUrlDl>${urlDl}</#local>
 1315       <#local cUrlRm>${urlRm!}</#local>
 1316       <#local cName>_form_upload_checkbox_${name}${idx}</#local>
 1317       <#local cId>_form_upload_checkbox_${name}${idx}</#local>
 1318   </#if>
 1319   <div class="files-item<#if class!=''> ${class}</#if>" id="_file_uploaded_${name}${idx}">
 1320       <label class="files-item-label" for="${cId}">
 1321           <input type="checkbox" name="${cName}" id="${cId}"> 
 1322           <a class="files-item-link" title="${label}" href="${cUrlDl}" data-type="${ext!}" data-img="">
 1323               <span>${fileLabel}</span>
 1324           </a>
 1325           <br>
 1326           <#if fileSize??>
 1327               <#if fileSize < 1024 >
 1328                   <#assign octetUnit="o">
 1329                   <#assign octetNumber=fileSize>
 1330               <#elseif fileSize < 1024 * 1024 >
 1331                   <#assign octetUnit="Ko">
 1332                   <#assign octetNumber=fileSize/1024>
 1333               <#else>
 1334                   <#assign octetUnit="Mo">
 1335                   <#assign octetNumber=fileSize/(1024*1024)>
 1336               </#if>
 1337           </#if>
 1338           <small><#if fileSize?has_content>${octetNumber?string["0"]} ${octetUnit}</#if></small>
 1339       </label>
 1340       <a href="${cUrlRm!}" class="text-danger deleteSingleFile" fieldname="${name}"  handlername="${handlerName!}" index="${idx}"> 
 1341           <i class="fa fa-times fa-fw"></i> 
 1342       </a>
 1343   </div>
 1344   </#macro>
 1345   <#-- cInputGroup                             -->
 1346   <#-- --------------------------------------  -->
 1347   <#-- Attributes                              -->
 1348   <#-- --------------------------------------  -->
 1349   <#-- class                                   -->
 1350   <#-- id                                      -->
 1351   <#-- params                                  -->
 1352   <#macro cInputGroup class='' id='' params='' >
 1353   <div class="input-group<#if class!=''> ${class!}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1354   <#nested>
 1355   </div>
 1356   </#macro>
 1357   <#-- cInputGroupAddon                        -->
 1358   <#-- --------------------------------------  -->
 1359   <#-- Attributes                              -->
 1360   <#-- --------------------------------------  -->
 1361   <#-- class                                   -->
 1362   <#-- id                                      -->
 1363   <#-- params                                  -->
 1364   <#macro cInputGroupAddon append=true addonText='' class='' id='' params='' >
 1365   <div class="input-group-<#if append>append<#else>prepend</#if><#if class!=''> ${class!}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1366       <#if addonText !=''><@cInputGroupAddonText>${addonText!}</@cInputGroupAddonText></#if>
 1367       <#nested>
 1368   </div>
 1369   </#macro>
 1370   <#-- cInputGroupAddonText                    -->
 1371   <#-- --------------------------------------  -->
 1372   <#-- Attributes                              -->
 1373   <#-- --------------------------------------  -->
 1374   <#-- class                                   -->
 1375   <#-- id                                      -->
 1376   <#-- params                                  -->
 1377   <#macro cInputGroupAddonText tag='span' class='' id='' params='' >
 1378   <${tag} class="input-group-text<#if class!=''> ${class!}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1379       <#nested>
 1380   </${tag}>
 1381   </#macro>
 1382   <#-- cRadio RADIO BUTTON                     -->
 1383   <#-- --------------------------------------  -->
 1384   <#-- Attributes                              -->
 1385   <#-- --------------------------------------  -->
 1386   <#-- name  : mandatory                       -->
 1387   <#-- label : mandatory                       -->
 1388   <#-- type  : default 'radio'                 -->
 1389   <#-- class : default ''                      -->
 1390   <#-- id : default ''                         -->
 1391   <#-- value : default ''                      -->
 1392   <#-- params : default ''                     -->
 1393   <#-- inline : boolean default false          -->
 1394   <#-- disabled : boolean default false        -->
 1395   <#-- readonly : boolean default false        -->
 1396   <#-- checked : boolean default false         -->
 1397   <#-- required : boolean default false        -->
 1398   <#macro cRadio name label type='radio' class='' id='' value='' params='' inline=false disabled=false readonly=false checked=false required=false>
 1399   <#if id=''><#assign cId=name + random()><#else><#assign cId=id ></#if>    
 1400   <#if type='radio'>
 1401   <div class="custom-control custom-radio<#if inline> custom-control-inline</#if><#if class!=''> ${class}</#if>">
 1402       <input type="radio" id="${cId!}" name="${name!}" class="custom-control-input" <#if value!=''>value="${value}"</#if><#if disabled> disabled</#if><#if required> required</#if><#if readonly> readonly</#if><#if checked> checked</#if><#if params!=''> ${params!}</#if>>
 1403       <label class="custom-control-label" for="${cId!}">${label!}</label>
 1404       <#nested>
 1405   </div>
 1406   <#elseif type='button'>
 1407   <input type="radio" name="${name!}" class="btn-check<#if class!=''> ${class}</#if>" id="${cId!}" autocomplete="off"<#if value!=''> value="${value}"</#if><#if disabled> disabled</#if><#if required> required</#if><#if readonly> readonly</#if><#if checked> checked</#if><#if params!=''> ${params!}</#if>>
 1408   <label class="btn btn-outline" for="${cId!}">${label!}</label>
 1409   <#nested>
 1410   </#if>
 1411   </#macro>
 1412   <#-- cCheckbox CHECKBOX                      -->
 1413   <#-- --------------------------------------  -->
 1414   <#-- Attributes                              -->
 1415   <#-- --------------------------------------  -->
 1416   <#-- name  : mandatory                       -->
 1417   <#-- label : mandatory                       -->
 1418   <#-- type  : default 'checkbox'              -->
 1419   <#-- class : default 'custom-checkbox'       -->
 1420   <#-- id : default ''                         -->
 1421   <#-- value : default ''                      -->
 1422   <#-- params : default ''                     -->
 1423   <#-- inline : boolean default false          -->
 1424   <#-- disabled : boolean default false        -->
 1425   <#-- readonly : boolean default false        -->
 1426   <#-- checked : boolean default false         -->
 1427   <#-- required : boolean default false        -->
 1428   <#macro cCheckbox name label type='checkbox' class='custom-checkbox' id='' value='' params='' inline=false disabled=false readonly=false checked=false required=false>
 1429   <#if id=''><#assign cId=name + rand( .now?long?number ) ><#else><#assign cId=id ></#if>  
 1430   <#if type='checkbox'>
 1431   <div class="custom-control <#if inline> custom-control-inline</#if><#if class!=''> ${class}</#if>">
 1432       <input type="checkbox" id="${cId!}" name="${name!}" class="custom-control-input" <#if value!=''>value="${value}"</#if><#if disabled> disabled</#if><#if required> required</#if><#if readonly> readonly</#if><#if checked> checked</#if><#if params!=''> ${params!}</#if>>
 1433       <label class="custom-control-label" for="${cId!}">${label!}<#if required> <abbr class="main-warning-color" tabindex="-1" title="#i18n{themeparisfr.labelMandatory}">*</abbr></#if></label>
 1434   </div>
 1435   <#elseif type='button'>
 1436   <input type="checkbox" name="${name!}" class="btn-check<#if class!=''> ${class}</#if>" id="${cId!}" autocomplete="off"<#if value!=''> value="${value}"</#if><#if disabled> disabled</#if><#if required> required</#if><#if readonly> readonly</#if><#if checked> checked</#if><#if params!=''> ${params!}</#if>>
 1437   <label class="btn btn-outline" for="${cId!}">${label!}</label>
 1438   </#if>  
 1439   </#macro>
 1440   <#-- cSelect SELECT                          -->
 1441   <#-- --------------------------------------  -->
 1442   <#-- Attributes                              -->
 1443   <#-- --------------------------------------  -->
 1444   <#-- name                                    -->
 1445   <#-- class : defaut "custom-select"          -->
 1446   <#-- id                                      -->
 1447   <#-- params                                  -->
 1448   <#-- role : defaut "listbox"                 -->
 1449   <#-- multiple : defaut "listbox"             -->
 1450   <#-- disabled : defaut false                 -->
 1451   <#-- readonly : defaut false                 -->
 1452   <#-- required : defaut false                 -->
 1453   <#-- helpMsg : defaut ""                     -->
 1454   <#-- errorMsg : defaut ""                    -->
 1455   <#macro cSelect name class='custom-select' id='' params='' multiple=false disabled=false readonly=false required=false helpMsg='' errorMsg=''>
 1456   <select name="${name!}" class="form-control<#if class!=''> ${class!}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if multiple> multiple</#if>>
 1457   <#nested>
 1458   </select>
 1459   <#if  helpMsg!=''><@cFormHelp label=helpMsg id=id /></#if>
 1460   <#if  errorMsg!=''>
 1461   <#assign idErr><#if id!=''>${id}<#else>${name!}</#if></#assign>
 1462   <@cFormError label=errorMsg id=idErr />
 1463   </#if>
 1464   </#macro>
 1465   <#-- cOption SELECT                          -->
 1466   <#-- --------------------------------------  -->
 1467   <#-- Attributes                              -->
 1468   <#-- --------------------------------------  -->
 1469   <#-- class                                   -->
 1470   <#-- id                                      -->
 1471   <#-- params                                  -->
 1472   <#macro cOption label value class='' selected=false disabled=false params=''>
 1473   <option <#if class!=''>class="${class}"</#if> value="${value!}"<#if selected> selected</#if><#if disabled> disabled</#if><#if params!=''>${params}</#if>>${label!}</option>
 1474   </#macro>
 1475   <#-- cOptgroup SELECT                        -->
 1476   <#-- --------------------------------------  -->
 1477   <#-- Attributes                              -->
 1478   <#-- --------------------------------------  -->
 1479   <#-- class                                   -->
 1480   <#-- id                                      -->
 1481   <#-- params                                  -->
 1482   <#macro cOptgroup label class='' disabled=false params=''>
 1483   <optgroup label="${label!}" <#if class!=''>class="${class}"</#if><#if disabled> disabled</#if><#if params!=''>${params}</#if>>
 1484   <#nested>
 1485   </optgroup>
 1486   </#macro>
 1487   <#-- cFormHelp                               -->
 1488   <#-- --------------------------------------  -->
 1489   <#-- Attributes                              -->
 1490   <#-- --------------------------------------  -->
 1491   <#-- class                                   -->
 1492   <#-- id                                      -->
 1493   <#-- params                                  -->
 1494   <#macro cFormHelp id label class='' params=''>
 1495   <small id="help_${id!}" class="form-text text-muted<#if class!=''> ${class!}</#if>"<#if params!=''> ${params!}</#if>>${label!}</small>
 1496   </#macro>
 1497   <#-- cFormError                              -->
 1498   <#-- --------------------------------------  -->
 1499   <#-- Attributes                              -->
 1500   <#-- --------------------------------------  -->
 1501   <#-- class                                   -->
 1502   <#-- id                                      -->
 1503   <#-- params                                  -->
 1504   <#macro cFormError id label class='' params=''>
 1505   <div class="invalid-feedback<#if class!=''> ${class!}</#if>" role="alert" id="error_${id!}"<#if params!=''> ${params!}</#if>>${label!}</div>
 1506   </#macro>
 1507   <#macro cPasswordCheck id >
 1508   <#local checkMsg><span class="charlength"><i class="fa fa-check"></i> #i18n{themeparisfr.labelNbChars}</span> <span class="uppercase"><i class="fa fa-check"></i> #i18n{themeparisfr.labelNbUppercase} </span> <span class="digit"><i class="fa fa-check"></i> #i18n{themeparisfr.labelNbDigit}</span></#local>
 1509   <@cFormHelp id checkMsg />
 1510   </#macro>
 1511   <#-- cBtn BUTTON                             -->
 1512   <#-- --------------------------------------  -->
 1513   <#-- Attributes                              -->
 1514   <#-- --------------------------------------  -->
 1515   <#-- label                                   -->
 1516   <#-- class                                   -->
 1517   <#-- id                                      -->
 1518   <#-- params                                  -->
 1519   <#-- type                                    -->
 1520   <#-- nestedPos                               -->
 1521   <#-- disabled                                -->
 1522   <#macro cBtn label class='primary' id='' params='' type='submit' nestedPos='before' disabled=false>
 1523   <button class="btn btn-${class!}" type="${type!}"<#if id!=''> id="${id!}"</#if><#if params!=''>${params!}</#if><#if disabled> disabled</#if>> 
 1524       <#if nestedPos='before'><#nested></#if><#if label!=''><span class="btn-label">${label!}</span></#if><#if nestedPos='after'><#nested></#if>
 1525   </button>
 1526   </#macro>
 1527   <#-- cLink                                  -->
 1528   <#-- -------------------------------------- -->
 1529   <#-- Attributes                             -->
 1530   <#-- -------------------------------------- -->
 1531   <#-- href: Mandatory                        -->
 1532   <#-- label: Mandatory                       -->
 1533   <#-- title:                                 -->
 1534   <#-- nestedPos: 'after'                     -->
 1535   <#-- target:                                -->
 1536   <#-- class:                                 -->
 1537   <#-- id:                                    -->
 1538   <#-- params:                                -->
 1539   <#macro cLink href label title='' nestedPos='after' target='' class='' id='' params=''>
 1540   <a href="${href!}" <#if id!=''> id="${id!}"</#if> <#if class !='' >class="${class!}"</#if> title="<#if title!=''>${title!}<#else>${label!}</#if><#if target='_blank'> #i18n{themeparisfr.newWindowLink}</#if>"<#if target!=''> target="${target}"</#if><#if params!=''> ${params}</#if> > 
 1541   <#if nestedPos!='after'><#nested></#if>
 1542   <#if label!=''><span class="link-label">${label!}</span></#if> 
 1543   <#if nestedPos='after'> <#nested></#if>
 1544   <#if target='_blank'><span class="sr-only sr-only-focusable">#i18n{themeparisfr.newWindowLink}</span></#if>
 1545   </a>
 1546   </#macro>
 1547   <#-- cBtnImg BUTTON                          -->
 1548   <#-- --------------------------------------  -->
 1549   <#-- Attributes                              -->
 1550   <#-- --------------------------------------  -->
 1551   <#-- img                                     -->
 1552   <#-- title                                   -->
 1553   <#-- type                                    -->
 1554   <#-- class   default action                  -->
 1555   <#-- id                                      -->
 1556   <#-- params                                  -->
 1557   <#-- nestedPos                               -->
 1558   <#-- disabled                                -->
 1559   <#macro cBtnImg src title class='action' id='' type='submit' params='' imgPos='before' disabled=false>
 1560   <@cBtn label='' class='${class!} btn-img' type=submit  disabled=disabled>
 1561       <@cFigure caption=''>
 1562           <#if imgPos='before'>
 1563               <@cImg src="${src!}" title="${title!}" alt='' />
 1564           </#if>
 1565           <@cFigCaption>
 1566               <#nested>
 1567           </@cFigCaption>
 1568           <#if imgPos='after'>
 1569               <@cImg src="${src!}" title="${title!}" alt='' class='after' />
 1570           </#if>
 1571       </@cFigure>
 1572   </@cBtn>
 1573   </#macro>
 1574   <#-- cBtnGroup GROUP BUTTONS                 -->
 1575   <#-- --------------------------------------  -->
 1576   <#-- Attributes                              -->
 1577   <#-- --------------------------------------  -->
 1578   <#-- label   Obligatoire                     -->
 1579   <#-- class   default ''                      -->
 1580   <#-- id                                      -->
 1581   <#-- type    value: '' / vertical            -->
 1582   <#-- params                                  -->
 1583   <#macro cBtnGroup label class='' id='' type='' params='' >
 1584   <#local btnClass>btn-group<#if type='vertical'>-vertical</#if><#if class!=''> ${class}</#if></#local>
 1585   <@cSection type='div' class=btnClass id=id params='${params} role="group" aria-label="${label}"'>
 1586       <#nested>
 1587   </@cSection>
 1588   </#macro>
 1589   <#-- cBtnToolbar TOOLBAR OF GROUP BUTTONS    -->
 1590   <#-- --------------------------------------  -->
 1591   <#-- Attributes                              -->
 1592   <#-- --------------------------------------  -->
 1593   <#-- class   default action                  -->
 1594   <#-- id                                      -->
 1595   <#-- params                                  -->
 1596   <#macro cBtnToolbar label type='' class='' id='' params='' >
 1597   <#local btnClass>btn-toolbar<#if type='vertical'>-vertical</#if><#if class!=''> ${class}</#if></#local>
 1598   <@cSection type='div' class=btnClass id=id params='${params} role="toolbar" aria-label="${label}"'>
 1599       <#nested>
 1600   </@cSection>
 1601   </#macro>
 1602   <#-- END FORM                                               -->
 1603   <#-- COMPONENTS                                             -->
 1604   <#-- icon ICON                                                           
 1605   Icons change prefix if needed. FontAwesome 5 is the default library 
 1606    -->
 1607   <#macro cIcon label class id='' params='' prefix='fas fa-' type='span'>
 1608   <#local labelTitle><#if label !=''>title="${label}"<#else></#if></#local>
 1609   <@cText type=type class='${prefix}${class!"check"}' id=id params='${labelTitle!} aria-hidden="true" ${params}'>
 1610   <#nested>
 1611   </@cText>
 1612   </#macro>
 1613   <#-- cList                          -->
 1614   <#-- items: Mandatory               -->
 1615   <#-- type: default / more / files   -->
 1616   <#-- itemsShown: 0                  -->
 1617   <#-- labelMore: 'VOIR PLUS'         -->
 1618   <#-- class:                         -->
 1619   <#-- id:                            -->
 1620   <#-- params:                        -->
 1621   <#macro cList items type='default' itemsShown=0 indexShown=false labelMore=i18n("themeparisfr.labelShowMore") class='' id='' params=''>        
 1622   <ul class="custom-list list-${type!}<#if class!=''> ${class}</#if>" <#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if> >
 1623   <#if items?has_content>
 1624       <#list items as i>
 1625           <li class="<#if i.class?? && i.class !=''>${i.class}</#if><#if type='more' && i?index &gt; itemsShown>extra hidden</#if>">
 1626               <a class="d-flex justify-content-between" href="${i.url!'return false;'}" title="${i.title}" <#if i.target !=''> target="${i.target}"</#if><#if type='files'> download="${i.title!?replace(' ','_')?replace('"','_')?replace('\'','_')}"</#if>>
 1627                   <span>${i.title!} <#if indexShown>${i?index}</#if></span>
 1628                   <#if type='files'>
 1629                   <div class="files-info">
 1630                       <small>${i.size!}</small>
 1631                       <span>${i.type!}</span>
 1632                   </div>    
 1633                   </#if>
 1634               </a>
 1635           </li>
 1636       </#list>
 1637   </#if>
 1638   <#nested>
 1639   <#if type ='more'>
 1640       <li class="more">
 1641           <@cLink href='#' nestedPos='before' class='text-danger btn-more' label=labelMore title=labelMore >
 1642               <@cIcon label=labelMore class='plus' /> 
 1643           </@cLink>
 1644       </li>
 1645   </#if> 
 1646   </ul>
 1647   </#macro>  
 1648   <#-- @macro cInfoStep                                       -->
 1649   <#-- @summary Macro for Editorials Contents                 -->
 1650   <#-- @tags step, indicator, progressbar                     -->
 1651   <#-- @param steps       | Mandatory |                       -->
 1652   <#-- @param haspicto    | false     |                       -->
 1653   <#-- @param hasidx | false  |                               -->
 1654   <#-- @param title | false   |                               -->
 1655   <#-- @param shownMore | 0 |                                 -->
 1656   <#-- @param labelMore | i18n("themeparisfr.labelShowMore")| -->
 1657   <#-- @param a11StatusMsg | '' |                             -->
 1658   <#-- @param class | '' |                                    -->
 1659   <#-- @param id | '' |                                       -->
 1660   <#-- @param params | '' |                                   -->
 1661   <#-- @nested | false | No content                            -->
 1662   <#macro cInfoStep steps haspicto=false hasidx=false title=false showMore=0 labelMore=i18n("themeparisfr.labelShowMore") a11StatusMsg='' class='' id='' params=''>
 1663   <div class="info-step">
 1664       <ol class="<#if hasidx> list-idx</#if><#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if> >
 1665       <#if steps?has_content>
 1666           <#list steps as step>
 1667           <#if class='pie'>
 1668               <li class="step-${step?index + 1}<#if step.status!=''> ${step.status!}</#if>">
 1669                   <span>${step?index + 1} - ${step.title!}</span>
 1670                   <#if step.status?contains('active')><span class="sr-only">${a11StatusMsg}</span></#if>
 1671               </li>
 1672           <#else>
 1673               <li<#if step.status??> class="${step.status}"</#if>>
 1674                   <#if haspicto>
 1675                       <figure class="p-3" data-idx="${step?index + 1}" aria-hidden="true">
 1676                           <img src="${step.url!}" class="img-fluid" title="${step.title!}" alt="${step.title!}" aria-hidden="true">
 1677                       </figure>
 1678                   <#else>
 1679                       <div class="idx" data-idx="${step?index + 1}" aria-hidden="true">
 1680                           <span>${step?index + 1}</span>
 1681                       </div>
 1682                   </#if>
 1683                   <#if step.content??>
 1684                       <#if showMore gt 0>
 1685                           <#local content>
 1686                           <#if step.content?length gt showMore>
 1687                               <#assign truncated=step.content?truncate_w(showMore, '') >
 1688                               ${truncated}<span class="ellipsis">...</span>
 1689                               <span class="extra sr-only">${step.content?remove_beginning(truncated)}</span>
 1690                               <span class="d-block text-center mt-2">
 1691                                   <@cLink href='#' nestedPos='before' class='btn-infostep-more main-color text-decoration-none h6' label=labelMore title=labelMore >
 1692                                       <@cIcon label=i18n("portal.util.labelBack") class='angle-up hidden' />
 1693                                   </@cLink>
 1694                               </span>
 1695                           <#else>
 1696                           ${step.content}
 1697                           </#if>
 1698                           </#local>
 1699                       </#if>
 1700                   </#if>
 1701                   <#if title>
 1702                       <h2 id="step-title-${step?index + 1}" class="h3 text-center font-weight-bold mt-2">${step.title!}</h2>
 1703                       <#if step.content??><p class="infostep-more">${content!}</p></#if>
 1704                   <#else>
 1705                       <p id="step-title-${step?index + 1}" class="mt-2">${step.title!}<#if step.content??> ${content!}</#if></p>
 1706                   </#if>
 1707               </li>
 1708           </#if>
 1709           </#list>
 1710       </#if>
 1711       <#nested>    
 1712       </ol>
 1713   </div>
 1714   </#macro>    
 1715   <#-- cContentFrame      -->
 1716   <#-- title: Mandatory   -->
 1717   <#-- class:             -->
 1718   <#-- id:                -->
 1719   <#-- params:            -->
 1720   <#-- Macro for Editorials Contents   -->
 1721   <#macro cContentFrame title class='' id='' params=''>
 1722   <div class="content-frame ${class}" <#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if> >
 1723   <#if title?? && title !=''><h3>${title}</h3></#if>
 1724   <#nested>    
 1725   </div>
 1726   </#macro> 
 1727   <#-- cCard                      -->
 1728   <#-- title: Mandatory           -->
 1729   <#-- titleClass: Mandatory      -->
 1730   <#-- titleUrl: Mandatory        -->
 1731   <#-- subtitle: Mandatory        -->
 1732   <#-- subtitleClass: Mandatory   -->
 1733   <#-- class:                     -->
 1734   <#-- id:                        -->
 1735   <#-- img: Mandatory             -->
 1736   <#-- imgAlt: Mandatory          -->
 1737   <#-- header: Mandatory          -->
 1738   <#-- headerClass: Mandatory     -->
 1739   <#-- headerimg: Mandatory       -->
 1740   <#-- subHeader: Mandatory       -->
 1741   <#-- subHeaderClass: Mandatory  -->
 1742   <#-- footer: Mandatory          -->
 1743   <#-- footerClass: Mandatory     -->
 1744   <#-- orientation:               -->
 1745   <#-- hoverEffect:               -->
 1746   <#-- shadow:                    -->
 1747   <#-- params:                    -->
 1748   <#macro cCard title='' titleClass='' titleUrl='' subtitle='' subtitleClass='' class='' id='' img='' imgAlt='' header='' headerClass='' headerImg='' subHeader='' subHeaderClass='' footer='' footerClass='' orientation='v' hoverEffect=true shadow=true params=''>
 1749   <#if orientation='v'>
 1750       <div class="card ${class!}<#if !shadow> no-shadow</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params!}</#if>>
 1751           <#if header!=''><div class="card-header<#if headerClass !=''> ${headerClass}</#if><#if headerImg!=''> card-header-img</#if>"<#if headerImg!=''>style="background-image:url(${headerImg});"</#if>>${header!}</div></#if>
 1752           <#if subHeader!=''><div class="card-sub-header<#if subHeaderClass !=''> ${subHeaderClass}</#if>">${subHeader!}</div>
 1753           </#if>
 1754           <#if img!=''><figure<#if hoverEffect> class="card-figure"</#if>><img src="${img!}" class="card-img-top" alt="${imgAlt!}"></figure></#if>
 1755           <div class="card-body">
 1756               <#if title!=''><h3 class="card-title<#if titleClass !=''> ${titleClass}</#if>"><#if titleUrl!=''><a href="${titleUrl}" class="card-title-link" title=""></#if>${title}<#if titleUrl!=''></a></#if></h3></#if>
 1757               <#if subtitle!=''><h4 class="card-subtitle mb-2 text-muted<#if subtitleClass !=''> ${subtitleClass}</#if>">${subtitle}</h4></#if>
 1758               <#nested>
 1759           </div>
 1760           <#if footer!=''><div class="card-footer text-muted<#if footerClass !=''> ${footerClass}</#if>">${footer!}</div></#if>
 1761       </div>
 1762   <#else>
 1763       <div class="card ${class!}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params!}</#if>>
 1764           <div class="row no-gutters">
 1765               <#if img!=''>
 1766               <div class="col-md-4">
 1767                   <img src="${img!}" class="card-img" alt="${imgAlt!}">
 1768               </div>
 1769               </#if>
 1770               <div class="<#if img!=''>col-md-8<#else>col</#if>">
 1771                   <div class="card-body">
 1772                       <#if title!=''><h5 class="card-title">${title}</h5></#if>
 1773                       <#if subtitle!=''><h6 class="card-subtitle mb-2 text-muted">${subtitle}</h6></#if>
 1774                       <#nested>
 1775                   </div>
 1776                   <#if footer!=''><div class="card-footer text-muted">${footer!}</div></#if>
 1777               </div>
 1778           </div>
 1779       </div>
 1780   </#if>    
 1781   </#macro>
 1782   <#-- cCardFloating              -->
 1783   <#-- id: Mandatory              -->
 1784   <#-- title: ''                  -->
 1785   <#-- class:                     -->
 1786   <#-- dismissible: true          -->
 1787   <#-- shadow:                    -->
 1788   <#-- params:                    -->
 1789   <#macro cCardFloating id title='' class='' dismissible=true shadow=true params=''>
 1790   <div class="card card-floating<#if class!=''> ${class!}</#if><#if !shadow> no-shadow</#if>" id="${id!}-card" <#if params!=''> ${params!}</#if>>
 1791       <div class="card-header">
 1792           <#if dismissible><span class="ml-auto"><@cIcon class='times' label='#i18n{themeparisfr.labelClose}' params='data-target="#${id!}-card" data-dismiss="alert" role="button"' /></span></#if>
 1793       </div>
 1794       <div class="card-body">
 1795           <h3 class="card-title">${title!}</h3>
 1796           <#if title!=''></#if>
 1797           <#nested>
 1798       </div>
 1799   </div>
 1800   </#macro>
 1801   <#-- cCardLayout -->
 1802   <#-- type: group / deck / columns -->
 1803   <#macro cCardLayout type='group' class='' id='' params=''>
 1804   <div class="card-${type!}<#if class !='' > ${class!}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
 1805       <#nested>
 1806   </div>
 1807   </#macro>
 1808   <#-- cAccordion             -->
 1809   <#-- title: Mandatory       -->
 1810   <#-- id: Mandatory          -->
 1811   <#-- class:    ''           -->
 1812   <#-- titleClass:''          -->
 1813   <#-- btnClass:''            -->
 1814   <#-- params: ''             -->
 1815   <#-- header: ''             -->
 1816   <#-- border:  true          -->
 1817   <#-- state:  true           -->
 1818   <#-- hasCollapse:  true     -->
 1819   <#macro cAccordion title id class='' titleClass='' subTitle='' subTitleClass='' btnClass='' params='' header='' border=false state=true hasCollapse=true>
 1820   <div class="accordion" id="acc${id!}">
 1821       <div class="card ${class!}<#if border> with-border</#if><#if subTitle !=''> with-subtitle</#if>" ${params!} >
 1822           <div class="card-header<#if !state> collapsed</#if>" data-toggle="collapse" data-target="#collapseAcc${id}" aria-expanded="<#if state>true<#else>false</#if>">
 1823               <button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-target="#collapseAcc${id}" aria-expanded="<#if state>true<#else>false</#if>" aria-controls="collapseAcc${id}">
 1824               <#if class?starts_with('outline')>
 1825                   <div class="card-header-prepend">
 1826                       <div class="rounded-bg-icon">
 1827                           <@parisIcon name='alert-info' title='#i18n{themeparisfr.labelInfo}' />
 1828                       </div>    
 1829                   </div>    
 1830                   <h3<#if titleClass !=''> class="${titleClass}"</#if> id="headingAcc${id}">${title}</h3>
 1831                    <#if header !=''>${header}</#if>
 1832                   <#if hasCollapse><span class="card-header-separator"></span></#if>
 1833               <#else>
 1834                   <h3 class="card-title<#if titleClass !=''> ${titleClass}</#if>" id="headingAcc${id}">${title}</h3>
 1835                   <#if header !=''>${header}</#if>
 1836               </#if>
 1837               <#if hasCollapse>
 1838               <span class="btn-accordion<#if btnClass !=''> ${btnClass}</#if>" >
 1839                   <span class="sr-only">${title}</span>
 1840                   <@parisIcon name='arrow-bottom' class=btnClass title='' />
 1841               </span>
 1842               </#if>
 1843               </button>
 1844               <#if subTitle !=''><p class="card-subtitle w-100<#if subTitleClass !=''> ${subTitleClass}</#if>">${subTitle}</p></#if>
 1845           </div>
 1846           <#if hasCollapse>
 1847               <div id="collapseAcc${id}" class="collapse <#if state>show</#if>" role="region" aria-labelledby="headingAcc${id}"  data-parent="#acc${id!}">
 1848                   <div class="card-body">
 1849                       <#nested>
 1850                   </div>
 1851               </div>
 1852               <div class="card-footer d-block d-sm-none text-center">
 1853                   <button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-target="#collapseAcc${id}" aria-expanded="<#if state>true<#else>false</#if>" aria-controls="collapseAcc${id}">
 1854                       <svg class="paris-icon paris-icon-arrow-bottom" aria-hidden="true" focusable="false">
 1855                           <use xlink:href="#paris-icon-arrow-bottom"></use>
 1856                       </svg>
 1857                   </button>	
 1858               </div>
 1859           </#if>
 1860       </div>
 1861   </div>
 1862   </#macro>
 1863   <#-- cAlert                                     -->
 1864   <#-- title: '#i18n{themeparisfr.labelWarning}'  -->
 1865   <#-- dismissible:  true                         -->
 1866   <#-- class:    'primary'                        -->
 1867   <#-- id:  ''                                    -->
 1868   <#-- outline:  false                            -->
 1869   <#-- params: ''                                 -->
 1870   <#macro cAlert title='' dismissible=true class='primary' classText='' outline=true id='' params='' >
 1871   <#local parisIconName='alert-info' />
 1872   <#local ariaLabel='status' />
 1873   <#if class?starts_with('danger')>
 1874       <#local parisIconName='alert-danger' />
 1875       <#local ariaLabel='alert' />
 1876   <#elseif class?starts_with('warning')>
 1877       <#local parisIconName='alert-warning' />
 1878       <#local ariaLabel='alert' />
 1879   <#elseif class?starts_with('success')>
 1880       <#local parisIconName='alert-check' />
 1881       <#local ariaLabel='status' />
 1882   </#if>
 1883   <div class="alert<#if outline> alert-outline </#if> alert-${class}<#if dismissible> alert-dismissible fade show</#if>" role="${ariaLabel}">
 1884   <div class="alert-icon">
 1885       <div class="rounded-bg-icon">
 1886           <@parisIcon name=parisIconName title='#i18n{themeparisfr.labelInfo}' />
 1887       </div>
 1888   </div>
 1889   <div class="alert-text<#if classText!=''> ${classText!}</#if>">
 1890       <#if title !=''><div class="alert-title">${title!}</div></#if>
 1891       <#nested>
 1892   </div>
 1893   <#if dismissible>
 1894   <div class="alert-dismiss">
 1895       <button type="button" class="close" data-dismiss="alert" aria-label="#i18n{themeparisfr.labelClose}">
 1896           <@parisIcon 'alert-close' '#i18n{themeparisfr.labelClose}' />
 1897       </button>
 1898   </div>
 1899   </#if>
 1900   </div>
 1901   </#macro>
 1902   <#-- cModal                                         -->
 1903   <#-- title: Mandatory                               -->
 1904   <#-- id: Mandatory                                  -->
 1905   <#-- size:    ''                                    -->
 1906   <#-- static:  false                                 -->
 1907   <#-- pos:    'centered'                             -->
 1908   <#-- role:    ''                                    -->
 1909   <#-- type:    ''                                    -->
 1910   <#-- scrollable:  false                             -->
 1911   <#-- dismissible:  true                             -->
 1912   <#-- dismissLabel='#i18n{themeparisfr.labelClose}'  -->
 1913   <#-- footer: ''                                     -->
 1914   <#-- class:    ''                                   -->
 1915   <#-- params: ''                                     -->
 1916   <#macro cModal title id size='lg' static=false pos='centered' role='' type='' scrollable=false dismissible=true dismissLabel='#i18n{themeparisfr.labelClose}' footer='' class='' params=''>
 1917   <div class="modal cmodal fade<#if class!=''> ${class}</#if>" id="${id}Modal"<#if static> data-backdrop="static"</#if> tabindex="-1" role="dialog" aria-labelledby="modal${id}Title" aria-hidden="true" <#if params!=''> ${params}</#if>>
 1918       <div class="modal-dialog <#if pos!=''>modal-dialog-${pos} </#if> <#if scrollable>modal-dialog-scrollable</#if><#if size!=''>modal-${size}</#if>"<#if role !=''> role="${role}"</#if>>
 1919           <div class="modal-content">
 1920               <div class="modal-header">
 1921                   <h5 class="modal-title" id="modal${id}Title">${title}</h5>
 1922                   <#if dismissible>
 1923                       <button type="button" class="close" data-dismiss="modal" aria-label="#i18n{themeparisfr.labelClose}">
 1924                           <@parisIcon name='close' title='#i18n{themeparisfr.labelClose}' />
 1925                       </button> 
 1926                   </#if>
 1927               </div>
 1928               <div class="modal-body">
 1929                   <#nested>
 1930               </div>
 1931               <div class="modal-footer">
 1932                   ${footer!}
 1933                   <#if dismissible>
 1934                       <button type="button" class="btn <#if type='info'>btn-link-primary<#else>btn-link-action</#if>" data-dismiss="modal">${dismissLabel}</button>
 1935                   </#if>
 1936               </div>
 1937           </div>
 1938       </div>
 1939   </div>
 1940   </#macro>
 1941   <#-- cCarousel                                      -->
 1942   <#-- id: Mandatory                                  -->
 1943   <#-- items: null / sequence                         -->
 1944   <#-- indicatorSize: 1                               -->
 1945   <#-- controls:  false                               -->
 1946   <#-- labelPrev: ''                                  -->
 1947   <#-- labelNext: ''                                  -->
 1948   <#-- class:    ''                                   -->
 1949   <#-- params: ''                                     -->
 1950   <#macro cCarousel id='manege' items='' indicatorSize=1 controls=false label='Carousel' labelPrev='' labelNext='' class='' params=''>
 1951   <#local itemSize = indicatorSize />
 1952   <#if items != ''><#local itemSize = items?size - 1 /></#if>
 1953   <div id="${id!}" class="carousel carousel-themed slide" data-ride="carousel" aria-roledescription="carousel" aria-label="${label}">
 1954   <#if itemSize &gt; 1>
 1955       <ol class="carousel-indicators pagination">
 1956       <#list 0..( itemSize - 1) as idx>
 1957           <li class="page-item<#if idx=0> active</#if>" data-target="#${id!}" data-slide-to="${idx}" aria-label="Slide ${idx}" aria-selected="false" aria-controls="carousel-item-${idx}"><span class="page-link">${idx+1}</span></li>
 1958       </#list>
 1959       </ol>
 1960   </#if>
 1961       <div class="carousel-inner">
 1962       <#if items != ''>
 1963           <#local itemIdx = 1>
 1964           <#local isActive = true>
 1965           <#list items as cItem>
 1966               <@cCarouselItem img=cItem.img active=isActive idx=itemIdx max=itemSize alt=cItem.alt title=cItem.title subtitle=cItem.subTitle class=cItem.class params=cItem.class />
 1967               <#local itemIdx = itemIdx + 1 />
 1968               <#local isActive = false />
 1969           </#list>
 1970       <#else>
 1971           <#nested>
 1972       </#if>
 1973       </div>
 1974       <#if controls>
 1975       <a class="carousel-control-prev" href="#${id!}" role="button" data-slide="prev">
 1976           <span class="carousel-bg-control">
 1977               <span class="carousel-control-prev-icon" aria-hidden="true"></span>
 1978               <span class="sr-only">${labelPrev}</span>
 1979           </span>
 1980       </a>
 1981       <a class="carousel-control-next" href="#${id!}" role="button" data-slide="next">
 1982           <span class="carousel-bg-control">
 1983               <span class="carousel-control-next-icon" aria-hidden="true"></span>
 1984               <span class="sr-only">${labelNext}</span>
 1985           </span>
 1986       </a>
 1987       </#if>
 1988   </div>
 1989   </#macro>
 1990   <#-- cCarouselItem           -->
 1991   <#-- img: Mandatory          -->
 1992   <#-- active:  false          -->
 1993   <#-- alt: ''                 -->
 1994   <#-- title: ''               -->
 1995   <#-- subtitle: ''            -->
 1996   <#-- class:    ''            -->
 1997   <#-- params: ''              -->
 1998   <#macro cCarouselItem img active=false id='manege' idx=1 max=1 alt='' title='' subtitle='' class='' params=''>
 1999   <div id="${id}-item-${idx}" class="carousel-item<#if active> active</#if><#if class !=''> ${class}</#if>" role="group" aria-roledescription="slide" aria-label="${idx} of ${max}"<#if params !=''> ${params}</#if>>
 2000       <img src="${img!}" class="d-block w-100" alt="${alt!'...'}">
 2001       <div class="carousel-caption">
 2002           <h3>${title}</h3>
 2003           <p>${subtitle}</p>
 2004       </div>
 2005   </div>
 2006   </#macro>  
 2007   <#-- cPagination            -->
 2008   <#-- paginator: Mandatory   -->
 2009   <#-- label:'Pagination'     -->
 2010   <#-- class: ''              -->
 2011   <#-- id: ''                 -->
 2012   <#-- params: ''             -->
 2013   <#macro cPagination paginator label='Pagination' class='' id='' params='' >
 2014   <nav aria-label="${label!}" <#if id!=''> id="${id}"</#if><#if class!=''> class="${class}"</#if><#if params!=''> ${params}</#if> >
 2015   <#if (paginator.pagesCount > 1) >
 2016   	<@cPaginationLinks paginator=paginator class=class />
 2017   </#if>
 2018   </nav>
 2019   </#macro>
 2020   <#-- cPaginationLinks       -->
 2021   <#-- paginator: Mandatory   -->
 2022   <#-- class: ''              -->
 2023   <#macro cPaginationLinks paginator class=''>
 2024   <#local nbLinkPagesToDisplay = 10 />
 2025   <#local offsetPrev = nbLinkPagesToDisplay / 2 />
 2026   <#local offsetNext = nbLinkPagesToDisplay / 2 />
 2027   <#if ( paginator.pageCurrent <= nbLinkPagesToDisplay - offsetPrev )>
 2028   	<#local offsetPrev = paginator.pageCurrent - 1 />
 2029   	<#local offsetNext = nbLinkPagesToDisplay - offsetPrev />
 2030   <#elseif ( paginator.pageCurrent + offsetNext > paginator.pagesCount )>
 2031   	<#local offsetNext = paginator.pagesCount - paginator.pageCurrent />
 2032   	<#local offsetPrev = nbLinkPagesToDisplay - offsetNext />
 2033   </#if>
 2034   <ul class="pagination<#if class!=''> ${class}</#if>">
 2035   <#if ( paginator.pageCurrent - offsetPrev > 1 )>
 2036   	<li class="page-item">
 2037   		<a class="page-link" href="${paginator.firstPageLink?xhtml}" title="${paginator.labelFirst}">
 2038   			<svg xmlns="http://www.w3.org/2000/svg" width="9.638" height="15.153" viewBox="0 0 9.638 15.153">
 2039   				<g transform="translate(8.279 13.676) rotate(180)">
 2040   					<g transform="translate(0 0)">
 2041   						<path class="a" d="M1.309,0,0,1.423,4.3,6.1,0,10.776,1.309,12.2,6.92,6.1Z"/>
 2042   					</g>
 2043   				</g>
 2044   			</svg>
 2045   		</a>
 2046   	</li>
 2047   </#if>
 2048   <#if (paginator.pageCurrent > 1) >
 2049   	<li class="page-item">
 2050   		<a class="page-link" href="${paginator.previousPageLink?xhtml}" title="#i18n{themeparisfr.labelPrev}">
 2051   			<svg xmlns="http://www.w3.org/2000/svg" width="9.638" height="15.153" viewBox="0 0 9.638 15.153">
 2052   				<g transform="translate(8.279 13.676) rotate(180)">
 2053   					<g transform="translate(0 0)">
 2054   						<path class="a" d="M1.309,0,0,1.423,4.3,6.1,0,10.776,1.309,12.2,6.92,6.1Z"/>
 2055   					</g>
 2056   				</g>
 2057   			</svg>
 2058   		</a>
 2059   	</li>
 2060   <#else>
 2061   	<li class="page-item disabled">
 2062   		<a class="page-link" href="${paginator.firstPageLink?xhtml}" title="${paginator.labelFirst}">
 2063   			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.638 15.153">
 2064   				<g transform="translate(8.279 13.676) rotate(180)">
 2065   					<path class="a" d="M1.309,0,0,1.423,4.3,6.1,0,10.776,1.309,12.2,6.92,6.1Z"/>
 2066   				</g>
 2067   			</svg>
 2068   		</a>
 2069   	</li>
 2070   </#if>
 2071   <#if ( paginator.pageCurrent - offsetPrev > 1 )>
 2072   	<li class="page-item group">
 2073   		<a class="page-link" href="${(paginator.pagesLinks?first).url?xhtml}" title="#i18n{themeparisfr.labelNextGroup}"><strong>...</strong></a>
 2074   	</li>
 2075   </#if>
 2076   <#list paginator.pagesLinks as link>
 2077   	<#if ( link.index == paginator.pageCurrent )>
 2078   		<li class="page-item active" disabled aria-current="page" >
 2079   			<span class="page-link">${link.name}</span>
 2080   		</li>
 2081   	<#else>
 2082   		<li class="page-item">
 2083   			<a class="page-link" title="${link.name}" href="${link.url?xhtml}">${link.name}</a>
 2084   		</li>
 2085   	</#if>
 2086   </#list>
 2087   <#if ( paginator.pageCurrent + offsetNext < paginator.pagesCount) >
 2088   	<li class="page-item group">
 2089   		<a class="page-link" href="${(paginator.pagesLinks?last).url?xhtml}" title="#i18n{themeparisfr.labelNextGroup}" >
 2090   			<strong>...</strong>
 2091   		</a>
 2092   	</li>
 2093   </#if>
 2094   <#if (paginator.pageCurrent < paginator.pagesCount) >
 2095   	<li class="page-item">
 2096   		<a class="page-link" href="${paginator.nextPageLink?xhtml}" title="#i18n{themeparisfr.labelNext}">
 2097   			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.638 15.153">
 2098   				<g transform="translate(1.359 1.477)">
 2099   					<path class="a" d="M1.309,0,0,1.423,4.3,6.1,0,10.776,1.309,12.2,6.92,6.1Z"/>
 2100   				</g>
 2101   			</svg>
 2102   		</a>
 2103   	</li>
 2104   	<#if ( paginator.pageCurrent + offsetNext < paginator.pagesCount) >
 2105   		<li class="page-item">
 2106   			<a class="page-link" href="${paginator.lastPageLink?xhtml}" title="${paginator.labelLast}">
 2107   				${paginator.labelLast}
 2108   			</a>
 2109   		</li>
 2110   	</#if>
 2111   <#else>
 2112   	<li class="page-item disabled">
 2113   		<a class="page-link" href="${paginator.lastPageLink?xhtml}" title="${paginator.labelLast}" >
 2114   			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.638 15.153">
 2115   				<g transform="translate(1.359 1.477)">
 2116   					<path class="a" d="M1.309,0,0,1.423,4.3,6.1,0,10.776,1.309,12.2,6.92,6.1Z"/>
 2117   				</g>
 2118   			</svg>
 2119   		</a>
 2120   	</li>
 2121   </#if>
 2122   </ul>
 2123   </#macro>
 2124   <#-- cTabs                  -->
 2125   <#-- navigation: true       -->
 2126   <#-- id: ''                 -->
 2127   <#-- class: ''              -->
 2128   <#-- params: ''             -->
 2129   <#macro cTabs navigation=true id='' class='' params='' >
 2130   <#if navigation><nav></#if>
 2131   <ul class="nav nav-tabs<#if class!=''> ${class!}</#if>"<#if !navigation> role="tablist"</#if><#if id !=''> id="${id!}"</#if><#if params!=''> ${params!}</#if> >
 2132     <#nested>
 2133   </ul>
 2134   <#if navigation></nav></#if>
 2135   </#macro>
 2136   <#-- cTab                   -->
 2137   <#-- url: Mandatory         -->
 2138   <#-- id: ''                 -->
 2139   <#-- active: false          -->
 2140   <#-- navigation: true       -->
 2141   <#-- disabled: false        -->
 2142   <#-- class: ''              -->
 2143   <#-- params: ''             -->
 2144   <#macro cTab url id='' active=false navigation=true disabled=false class='' params=''>
 2145     <li class="nav-item" <#if !navigation> role="presentation"</#if>>
 2146       <<#if navigation>a<#else>button type="button"</#if> id="<#if id=''>tab_${url!?remove_beginning("#")}<#else>${id}</#if>" class="nav-link <#if !navigation>btn</#if> <#if active>active</#if> <#if disabled>disabled</#if><#if class!=''> ${class!}</#if>"<#if !navigation> data-toggle="tab" role="tab"  </#if><#if disabled> disabled tabindex="-1" aria-disabled="true"</#if> <#if active>tabindex=0</#if> href="${url!}">
 2147           <#nested>
 2148       </<#if navigation>a<#else>button</#if>>
 2149     </li>
 2150   </#macro>
 2151   <#-- cTabContent            -->
 2152   <#-- id: ''                 -->
 2153   <#-- class: ''              -->
 2154   <#-- params: ''             -->
 2155   <#macro cTabContent id class='' params=''>
 2156   <div class="tab-content<#if class!=''> ${class!}</#if>" id="${id}" ${params!} >
 2157       <#nested>
 2158   </div>
 2159   </#macro>
 2160   <#-- cTabPane               -->
 2161   <#-- id: Mandatory          -->
 2162   <#-- active: false          -->
 2163   <#-- disabled: false        -->
 2164   <#-- class: ''              -->
 2165   <#-- params: ''             -->
 2166   <#macro cTabPane id active=false disabled=false class='' params=''>
 2167   <div class="tab-pane fade <#if active>show active</#if><#if disabled> disabled</#if><#if class!=''> ${class!}</#if>"<#if disabled>disabled aria-disabled="true"</#if> id="${id}" role="tabpanel" aria-labelledby="tab_${id}" ${params!}>    
 2168       <#nested>
 2169   </div>
 2170   </#macro>
 2171   <#-- MACRO cConsentTac : Consent RGPD needs Tarteaucitron library - https://tarteaucitron.io/fr /      -->
 2172   <#-- Attributes                                                                                        -->
 2173   <#-- privacyLink='//www.paris.fr/pages/mentions-legales-235#confidentialite-et-protection-des-donnees' -->
 2174   <#-- denyAll='false' Show / Hide Denyall button                                                        -->
 2175   <#-- cookieMenu='Gestion des cookies'                                                                  -->
 2176   <#-- cookiePolicyLink='https://www.paris.fr/pages/cookies-234'                                         -->
 2177   <#-- hashtag='cookiepolicyparisfr'                                                                     -->
 2178   <#-- cookiename='cookieparisfr'                                                                        -->
 2179   <#macro cConsentTac title='Ce site' privacyLink='//www.paris.fr/pages/mentions-legales-235#confidentialite-et-protection-des-donnees' denyAll=false cookieMenu='Gestion des cookies' cookiePolicyLink='https://www.paris.fr/pages/cookies-234' hashtag='cookiepolicyparisfr' cookiename='cookieparisfr' nocredit=false>
 2180   <link rel="stylesheet" href="js/tarteaucitron/css/theme-parisfr-tac.css" >
 2181   <script src="js/tarteaucitron/tarteaucitron.js"></script>
 2182   <!-- Service Mon Paris -->
 2183   <script>
 2184   tarteaucitron.services.monparis={
 2185     "key": "monparis",
 2186     "type": "api",
 2187     "name": "Mon Paris",
 2188     "uri": "https://moncompte.paris.fr",
 2189     "readmoreLink": "${cookiePolicyLink}",
 2190     "needconsent": false,
 2191     "useExternalCss" : true,
 2192     "mandatory": true,
 2193     "cookies": ['mcpAuth','JSESSIONID','AUTH_SESSION_ID','KEYCLOAK_IDENTITY','KEYCLOAK_SESSION'],
 2194     "js": function () {
 2195       "use strict";
 2196       // When user allow cookie
 2197     },
 2198     "fallback": function () {
 2199       "use strict";
 2200       // when use deny cookie
 2201     }
 2202   };
 2203   tarteaucitron.init({
 2204       "privacyUrl": "${privacyLink}", /* Privacy policy url */
 2205       "hashtag": "#${hashtag}",       /* Open the panel with this hashtag */
 2206       "cookieName": "${cookiename}",  /* Cookie name */
 2207       "orientation": "bottom",        /* Banner position (top - bottom) */
 2208       "showAlertSmall": false,        /* Show the small banner on bottom right */
 2209       "cookieslist": true,            /* Show the cookie list */
 2210       "adblocker": true,             /* Show a Warning if an adblocker is detected */
 2211       "AcceptAllCta" : true,          /* Show the accept all button when highPrivacy on */
 2212       "DenyAllCta" : ${denyAll?c},           /* Show the Deny all button when highPrivacy on */
 2213       "highPrivacy": true,            /* Disable auto consent */
 2214       "handleBrowserDNTRequest": true, /* If Do Not Track == 1, disallow all */
 2215       "removeCredit": ${nocredit?c},          /* Remove credit link */
 2216       "moreInfoLink": true,           /* Show more info link */
 2217       "useExternalCss": true,         /* If false, the tarteaucitron.css file will be loaded */        
 2218       "readmoreLink": "${cookiePolicyLink}", /* Change the default readmore link */
 2219       "mandatory": true,             /* Show a message about mandatory cookies */
 2220   });
 2221   <#nested>
 2222   </script>
 2223   </#macro>
 2224   <#-- Services List for @cConsentTac https://tarteaucitron.io/fr/install/                                                -->
 2225   <#-- Refer to doc for correct use with embed for services. Most of them need to upldate your js/html source code :      -->
 2226   <#-- Most used: monparis, twitter, addThis, dailymotion, facebook, googlefonts, slideshare, vimeo,  youtube             -->
 2227   <#-- MACRO cConsentTacService :            -->
 2228   <#-- Attributes                            -->
 2229   <#-- code: 'monparis'                      -->
 2230   <#macro cConsentTacService code='monparis'>
 2231   <#nested>
 2232   (tarteaucitron.job = tarteaucitron.job ||   []).push('${code}');
 2233   </#macro>
 2234   <#-- MACRO cConsentTacServiceMatomo :                                             -->
 2235   <#-- Attributes                                                                   -->
 2236   <#-- id: 0                                                                        -->
 2237   <#-- host: https://mtmdsin.apps.paris.fr/matomo/                                  -->
 2238   <#-- matomo: 0=use nested to get Matomo params  / 1  use id and host macro params -->
 2239   <#macro cConsentTacServiceMatomo id=0 host='https://mtmdsin.apps.paris.fr/matomo/'>
 2240   <@cConsentTacService code='matomohightrack'>
 2241   tarteaucitron.user.matomoId = ${id};
 2242   tarteaucitron.user.matomoHost = '${host}';
 2243   </@cConsentTacService>
 2244   </#macro>
 2245   <#-- MACRO cErrorMessage -->
 2246   <#-- Attributes          -->
 2247   <#-- title  : mandatory  -->
 2248   <#-- text   : mandatory  -->
 2249   <#-- linkUrl: ''         -->
 2250   <#-- linkLabelUrl: ''    -->
 2251   <#-- id: ''              -->
 2252   <#-- class: ''           -->
 2253   <#-- params: ''          -->
 2254   <#macro cErrorMessage title text linkUrl='' linkLabelUrl='' id='' class='text-center' params=''>
 2255   <#local linkLabelUrl>${linkLabelUrl}</#local>
 2256   <@cContainer>
 2257     <@cRow class='align-items-center justify-content-center'>
 2258       <@cCol class='col mt-5 pt-5 ${class!}' id=id params=params >
 2259         <@cTitle class='main-info-color font-black'>
 2260           <@parisIcon name='info' title=title params='style="fill:var( --main-info-color);width:64px;height:64px;"'/> ${title}
 2261         </@cTitle>
 2262         <@cTitle level=2 class='py-5 font-extra-bold dark-color'>${text}</@cTitle>
 2263         <#nested>
 2264         <@cText class="text-center">
 2265         <#if linkUrl !=''>
 2266           <#if linkLabelUrl=''>
 2267               <#local linkLabelUrl>#i18n{portal.util.labelBackHome}</#local>
 2268           </#if>
 2269           <@cLink href=linkUrl label=linkLabelUrl  class='btn btn-action mt-5' />
 2270         </#if>
 2271         </@cText>
 2272       </@cCol>
 2273     </@cRow>
 2274   </@cContainer>
 2275   </#macro>
 2276   <#-- cToastr                                 -->
 2277   <#-- --------------------------------------  -->
 2278   <#-- Attributes                              -->
 2279   <#-- --------------------------------------  -->
 2280   <#-- infos                                   -->
 2281   <#-- warnings                                -->
 2282   <#-- errors                                  -->
 2283   <#-- msg                                     -->
 2284   <#-- msgType                                 -->
 2285   <#macro cToastr infos warnings errors msg='' msgType='info'>
 2286   <script>
 2287   $( function(){
 2288   <#if warnings?has_content>
 2289   <#list warnings as warning >
 2290       toastr.warning("${warning.message}");
 2291   </#list>	
 2292   </#if>
 2293   <#if errors?has_content>
 2294   <#list errors as error >
 2295       toastr.error("${error.message}");
 2296   </#list>	
 2297   </#if>
 2298   <#if infos?has_content>
 2299   <#list infos as info >
 2300       toastr.info("${info.message}");
 2301   </#list>	
 2302   </#if>
 2303   <#if msg !=''>
 2304   <#if msgType='info'>
 2305       toastr.info("${msg}");
 2306   </#if>
 2307   <#if msgType='warning'>
 2308       toastr.warning("${msg}");
 2309   </#if>
 2310   <#if msgType='danger'>
 2311       toastr.warning("${msg}");
 2312   </#if>
 2313   </#if>
 2314   });
 2315   </script>
 2316   </#macro>
 2317   <#-- THEME DATE PICKER COMPONENT                            -->
 2318   <#-- getThemeDatePicker                                     -->
 2319   <#-- ------------------------------------------------------ -->
 2320   <#-- @tag | date, datepicker, flatpikr                      -->
 2321   <#-- ------------------------------------------------------ -->
 2322   <#-- @summary | Add datepicker with flatpickr lib           -->
 2323   <#-- ------------------------------------------------------ -->
 2324   <#-- @param idField | mandatory |  -->
 2325   <#-- @param showFormat | ''     |  -->
 2326   <#-- @param minDate | ''        |  -->
 2327   <#-- @param maxDate | ''        |  -->
 2328   <#-- @param defaultDate | ''    |  -->
 2329   <#-- @param mode    | 'single'  |  -->
 2330   <#-- @param time    | false     |  --> 
 2331   <#-- @param range   | false     |  --> 
 2332   <#-- @param rangeIdField | ''   |  -->
 2333   <#-- @param customArrows | ['<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="15 6 9 12 15 18"></polyline></svg>','<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="9 6 15 12 9 18"></polyline></svg>'] |  -->
 2334   <#-- ------------------------------------------------------ -->
 2335   <#-- @nested        | true      | Shows default page menu, but can other item can be add using @mainNavItem macro. -->
 2336   <#-- ------------------------------------------------------ -->
 2337   <#macro getThemeDatePicker idField format='' showFormat='' minDate='' maxDate='' defaultDate='' mode='single' time=false range=false rangeIdField='' customArrows=['<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="15 6 9 12 15 18"></polyline></svg>','<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="9 6 15 12 9 18"></polyline></svg>']>
 2338   <script>
 2339   $( function() {
 2340   <#if showFormat == ''>
 2341   let showFormat${idField} = getFlatPickerDateFormat( browserCurrentLocale );
 2342   <#else>
 2343   let showFormat${idField} = '${showFormat}';
 2344   </#if>
 2345   <#-- The server parses dates on a per locale basis. The formats here much match those specified by lutece.format.date.short -->
 2346   <#if format == ''>    
 2347   let dtFormat${idField}='Y-m-d H:i:S'; // Default for most DB
 2348   <#else>
 2349   let dtFormat${idField}='${format}';
 2350   </#if>
 2351   $('#${idField}').flatpickr( 
 2352       { allowInput    : true, 
 2353           mode        : "${mode}",
 2354           enableTime  : ${time?c}, 
 2355           altInput    : true, 
 2356           altFormat   : showFormat${idField}, 
 2357           dateFormat  : dtFormat${idField}, 
 2358           "locale"    : browserLang<#if defaultDate !=''>, 
 2359           defaultDate : "${defaultDate}"</#if><#if minDate !=''>, 
 2360           minDate     : "${minDate?date("yyyy-MM-dd")}"</#if><#if maxDate !=''>, 
 2361           maxDate     : "${maxDate?date("yyyy-MM-dd")}"</#if><#if customArrows?size == 2 >,
 2362           prevArrow   : '${customArrows[0]}',
 2363           nextArrow   : '${customArrows[1]}'</#if><#if range && rangeIdField !=''>,
 2364           "plugins"   : [new rangePlugin( {input:"#${rangeIdField}" } )]<#else> // ! Range usage error -> Missing id (rangeidField param) for end range field</#if>
 2365       });
 2366   });
 2367   </script>
 2368   </#macro>
 2369   <#-- INIT THEME DATE PICKER COMPONENT                       -->
 2370   <#-- initThemeDatePicker                                    -->
 2371   <#-- ------------------------------------------------------ -->
 2372   <#-- @tag | date, datepicker, flatpikr                      -->
 2373   <#-- ------------------------------------------------------ -->
 2374   <#-- @summary | Init datepicker flatpickr lib               -->
 2375   <#-- ------------------------------------------------------ -->
 2376   <#macro initThemeDatePicker>
 2377   <#if themePickerIsLoaded?? && themePickerIsLoaded>
 2378   <#else>
 2379   <link rel="stylesheet" href="js/flatpickr/bootstrap-flatpickr.min.css">
 2380   <link rel="stylesheet" href="js/flatpickr/style/themeparisfr-flatpickr-min.css">
 2381   <script src="js/util/lutece.js" charset="utf-8"></script>
 2382   <script src="js/flatpickr/bootstrap-flatpickr.min.js" charset="utf-8"></script>
 2383   <script src="js/flatpickr/plugins/rangePlugin.min.js" charset="utf-8"></script>
 2384   <script src="js/flatpickr/locales/bootstrap-flatpickr.fr.js" charset="utf-8"></script>
 2385   <script>
 2386   // Get current browser lang
 2387   var browserCurrentLocale = navigator.language
 2388   var browserLang = browserCurrentLocale.split('-')[0]
 2389   if( !browserCurrentLocale.startsWith('fr') ){
 2390       let langLib = 'js/flatpickr/locales/bootstrap-flatpickr.' + browserLang + '.js';
 2391       loadScript( langLib );
 2392   }
 2393   </script>
 2394   <#assign themePickerIsLoaded = true />
 2395   </#if>
 2396   </#macro>
 2397   <#-- END COMPONENTS                     -->
 2398   <#-- END THEME MACROS                   -->
 2399   <#-- DEPRECATED MACROS                  -->
 2400   <#-- Compatibility version 1            -->
 2401   <#-- cStepContent -->
 2402   <#macro cStepContent title id='' class='' help='' iterable=false iteration=0 labelAddIteration='Ajouter' labelDelIteration='#i18n{themeparisfr.labelDelete}' params=''></#macro>
 2403   <#-- cCustomListArrow USE cList  DEPRECATED  -->
 2404   <#macro cCustomListArrow items=''>
 2405   <@cList items />
 2406   </#macro>  
 2407   <#-- cCustomList USE cList DEPRECATED  -->
 2408   <#macro cCustomList items type='arrow' class='' id='' params=''>
 2409   <@cList items type class id params >
 2410       <#nested>    
 2411   </@cList>
 2412   </#macro>  
 2413   <#-- MACRO consentement cookies CNIL            -->
 2414   <#-- Name : DEPRECATED  cConsent                -->
 2415   <#-- Attributes List  :                         -->
 2416   <#-- title : 'Ce site'                          -->
 2417   <#-- linkLabel='cookies'                        -->
 2418   <#-- link='/pages/mentions-legales-234'         -->
 2419   <#-- id='cookie-banner-parisfr'                 -->
 2420   <#-- class                                      -->
 2421   <#-- params                                     -->
 2422   <#macro cConsent title='Ce site' linkLabel='cookies' link='/pages/mentions-legales-234' id='cookie-banner-parisfr' class='' params=''>
 2423   <#-- Managed in init_site.js -->
 2424   <@cSection type='div' class='cookies ${class}' id=id >
 2425     <@cSection type='div' class='cookies-banner'>
 2426       <@cText class='cookies-banner-text'>
 2427           <#local legalLink><@cLink href=link label=linkLabel class='font-' /></#local>
 2428           ${i18n( "themeparisfr.msgLegal", title, legalLink )}
 2429       </@cText>
 2430       <@cBtn label='#i18n{themeparisfr.labelAccept}' type='button' class='action' id='cookie-banner-parisfr-accept' />            
 2431     </@cSection>
 2432   </@cSection>
 2433   </#macro>
 2434   <#-- END DEPRECATED MACROS -->
 2435   <#-- INTERNAL FUNCTIONS -->
 2436   <#--
 2437   * Generates a "random" integer between min and max (inclusive)
 2438   *
 2439   * Note the values this function returns are based on the current
 2440   * second the function is called and thus are highly deterministic
 2441   * and SHOULD NOT be used for anything other than inconsequential
 2442   * purposes, such as picking a random image to display.
 2443   -->
 2444   <#function rand v>
 2445     <#local now = .now?long?c />
 2446     <#local randomNum = v + ( now?substring(now?length-1) + now?substring(now?length-2))?number />
 2447     <#if (randomNum gt 1)>
 2448       <#assign _rand = randomNum % 1 />
 2449     <#else>
 2450       <#assign _rand = randomNum />
 2451     </#if>
 2452     <#local n = .now?long?c />
 2453     <#local randomN = (n?substring( n?length-1) + n?substring( n?length-2 ))?number />
 2454     <#return ( randomN + (( 30 - randomN ) * _rand))?round />
 2455   </#function>
 2456   <#assign rnd="0.${turnoverstr(.now?long?string)}"?number />
 2457   <#function random >
 2458   <#local h="0.${turnoverstr(.now?long?string)}" />
 2459   <#local r=h?number + rnd />
 2460   <#if r gte 1>
 2461       <#local r=r-1 />
 2462   </#if>
 2463   <#assign rnd=r />
 2464   <#return r />
 2465   </#function>
 2466   <#function turnoverstr str >
 2467   <#local l = str?length />
 2468   <#local r = ""/>
 2469   <#list 1..l as i>
 2470       <#local r = r+str?substring(l-i,l-i+1) />
 2471   </#list>
 2472   <#return r/>
 2473   </#function>