templates/main/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Le Son MiRé{% endblock %}
  5. {% block stylesheets %}
  6. <link rel="stylesheet" href="{{asset('css/common/style.css')}}">
  7. <link rel="stylesheet" href="{{asset('css/index/style.css')}}">
  8. <link rel="stylesheet" href="{{asset('css/le_festival/style.css')}}">
  9. <link rel="stylesheet" href="{{asset('css/qui_sommes_nous/style.css')}}">
  10. <link rel="stylesheet" href="{{asset('css/informations_pratiques/style.css')}}">
  11. <link rel="stylesheet" href="{{asset('css/expos_permanentes/style.css')}}">
  12. <link rel="stylesheet" href="{{asset('css/du_son_en_plus/style.css')}}">
  13. <link rel="stylesheet" href="{{asset('css/archives/style.css')}}">
  14. <link rel="stylesheet" href="{{asset('css/nos_partenaires/style.css')}}">
  16. {% endblock stylesheets %}
  18. {% block javascripts %}
  19.     <script src="{{asset('scripts/index/script.js')}}"></script>
  20. {% endblock javascripts %}
  22. {% block body %}
  24. </div>
  26. <header>
  27.     <a href="{{path('app_home')}}" class="son_mire_logo">
  28.         <img src="{{asset('css/common/header/icon/logo_sonmire.svg')}}" alt="">
  29.     </a>
  31.     <div id="burger_menu_button">
  32.         <img src="{{asset('css/common/header/icon/burger_menu.svg')}}" alt="">
  33.     </div>
  35.     <div class="main_title_mobile">
  36.         
  37.         <div class="logo">
  38.             <img src="{{asset('css/common/header/icon/logo_sonmire.svg')}}" alt="">
  39.         </div>
  40.         <h1>
  41.             <a href="{{path('app_home')}}">
  42.                 Le 21ème FESTIVAL DÉBRANCHÉ
  43.             </a>
  44.         </h1>
  46.     </div>
  48.     <nav>
  49.         <ul>
  50.             <li><div class="hover_lines"></div><span class="nav_button" data-page="1">Accueil</span></li>
  51.                 <div class="separators" data-linked-page="2">
  52.                     <svg class="indicator" width="15" height="15">
  53.                         <polygon points="0,0 0,15 15,7.5" fill="white"/>
  54.                     </svg>
  55.                 </div>
  56.             <li><div class="hover_lines"></div><span class="nav_button" data-page="2">Le Festival</span></li>
  57.                 <div class="separators" data-linked-page="3">
  58.                     <svg class="indicator" width="15" height="15">
  59.                         <polygon points="0,0 0,15 15,7.5" fill="white"/>
  60.                     </svg>
  61.                 </div>
  62.             <li><div class="hover_lines"></div><span class="nav_button" data-page="3">Qui sommes-nous ?</span></li>
  63.                 <div class="separators" data-linked-page="4">
  64.                     <svg class="indicator" width="15" height="15">
  65.                         <polygon points="0,0 0,15 15,7.5" fill="white"/>
  66.                     </svg>
  67.                 </div>
  68.             <li><div class="hover_lines"></div><span class="nav_button" data-page="4">Infos pratiques</span></li>
  69.                 <div class="separators" data-linked-page="5">
  70.                     <svg class="indicator" width="15" height="15">
  71.                         <polygon points="0,0 0,15 15,7.5" fill="white"/>
  72.                     </svg>
  73.                 </div>
  74.             <li><div class="hover_lines"></div><span class="nav_button" data-page="5">Évènements permanents</span></li>
  75.                 <div class="separators" data-linked-page="6">
  76.                     <svg class="indicator" width="15" height="15">
  77.                         <polygon points="0,0 0,15 15,7.5" fill="white"/>
  78.                     </svg>
  79.                 </div>
  80.             <li><div class="hover_lines"></div><span class="nav_button" data-page="6">Du son en +</span></li>
  81.                 <div class="separators" data-linked-page="7">
  82.                     <svg class="indicator" width="15" height="15">
  83.                         <polygon points="0,0 0,15 15,7.5" fill="white"/>
  84.                     </svg>
  85.                 </div>
  86.             <li><div class="hover_lines"></div><span class="nav_button" data-page="7">Archives</span></li>
  87.                 <div class="separators" data-linked-page="8">
  88.                     <svg class="indicator" width="15" height="15">
  89.                         <polygon points="0,0 0,15 15,7.5" fill="white"/>
  90.                     </svg>
  91.                 </div>
  92.             <li><div class="hover_lines"></div><span class="nav_button" data-page="8">Nos partenaires</span></li>
  93.             
  94.         </ul>
  95.     </nav>
  97. </header>
  99. <div id="contribution-content">
  101.     <div class="close_button">
  102.         <img class="img_mobile" src="{{asset('css/le_festival/img/close_button.svg')}}" alt="close_button">
  103.     </div>    
  104.     
  105.     <div class="wrapper">
  106.         <iframe id="haWidget" allowtransparency="true" scrolling="auto" src="https://www.helloasso.com/associations/le-mat-greca/formulaires/1/widget" style="width: 100%; height: 750px; border: none;"></iframe>
  107.     </div>
  109. </div>
  111. <div id="burger_menu" class="burger_menu_closed" data-open="0">
  112.     <ul>
  113.         <li><span class="nav_button" data-page="1">Accueil</span></li>
  114.         <li><span class="nav_button" data-page="2">Le Festival</span></li>
  115.         <li><span class="nav_button" data-page="3">Qui sommes-nous ?</span></li>
  116.         <li><span class="nav_button" data-page="4">Infos pratiques</span></li>
  117.         <li><span class="nav_button" data-page="5">Évènements permanents</span></li>
  118.         <li><span class="nav_button" data-page="6">Du son en +</span></li>
  119.         <li><span class="nav_button" data-page="7">Archives</span></li>
  120.         <li><span class="nav_button" data-page="8">Nos partenaires</span></li>
  121.         <li class="download"><a href="{{asset('css/le_festival/img/programme_2025.pdf')}}">TÉLÉCHARGER LE PROGRAMME</a></li>
  122.     </ul>
  123. </div>
  126. <main data-page="1">
  128.     <div id="main_container">
  130.         <div id="index" {#class="index_overflow_standard"#}>
  131.             
  132.             <div class="contribution-wrapper">
  133.                 <div id="contribution-background-button">
  134.                 </div>
  136.                 <div id="contribution-button" title="Soutenez-nous !">
  137.                     <img class="img-desktop" src="{{asset('css/index/img/donate.png')}}" alt="Badge de soutien au festival">
  138.                     <img class="img-mobile" src="{{asset('css/index/img/donate_mobile.png')}}" alt="Badge de soutien au festival">
  139.                 </div>
  140.             </div>
  142.             
  143.             <div class="container">
  144.                 <div class="background_megaphone">
  145.                     <img src="{{asset('css/index/icon/background_megaphone.svg')}}" alt="">
  146.                 </div>
  147.             
  148.                 <div class="affiche">
  149.                 
  150.                     <img class="desktop" src="{{asset('css/index/img/affiche_2025.webp')}}" alt="">
  151.                     <img class="mobile" src="{{asset('css/index/img/affiche_2025_mobile.webp')}}" alt="">
  152.  
  153.                 </div>
  154.         
  155.                 <div id="main_title">
  156.                     <h1>Le 21ème <br>
  157.                          FESTIVAL <br>
  158.                          <br>
  159.                           DÉBRANCHÉ</h1>
  160.                     <div id="waveform_illustration">
  161.                         <img src="{{asset('css/index/img/waveform_0.svg')}}" alt="">
  162.                     </div>
  163.                 </div>
  164.                 
  165.                 <div class="waveform_bottom_mobile_illustration">
  166.                     <img src="{{asset('css/index/img/waveform_mobile.png')}}" alt="">
  167.                 </div>
  168.                 
  169.                 <div class="waveform_half_bottom_illustration">
  170.                     <img src="{{asset('css/index/img/waveform_half.png')}}" alt="">
  171.                 </div>
  172.             </div>
  174.         </div>
  175.     
  176.         <div id="le_festival">
  177.     
  178.             <div class="background_mobile">
  179.                 <img loading="lazy" src="{{asset('css/le_festival/img/sculpture_lumiere_lezignan_mobile.webp')}}" alt="">
  180.             </div>
  181.     
  182.             <div class="background_desktop">
  183.                 <img loading="lazy" src="{{asset('css/le_festival/img/festival_background_desktop.webp')}}" alt="">
  184.             </div>
  185.     
  186.             <div class="program" data-artist-content-link="{{path('artist_content')}}">
  187.                 <div class="no_click_frame"></div>
  188.     
  189.                 <div class="affiche_container">
  190.                     <div class="affiche">
  191.                         <img loading="lazy" src="{{asset('/css/le_festival/img/affiche_light_full_2025.webp')}}" alt="">
  192.     
  193.                         <div class="download_button_desktop">
  194.                             <a href="{{asset('css/le_festival/img/programme_2025.pdf')}}" target="_blank" class="container" title="Télécharger le programme">
  195.                                 <img class="part_1" src="{{asset('css/le_festival/img/download_button_desktop/part_1.png')}}" alt="">
  196.                                 <img class="part_2" src="{{asset('css/le_festival/img/download_button_desktop/part_2.png')}}" alt="">
  197.                             </a>
  198.                         </div>
  199.                     </div>
  200.     
  201.                 </div>
  202.     
  203.                 <div class="artists_list_container">
  204.     
  205.                     <div id="artists_wrapper">
  206.                         <h1 data-date="4">JEUDI 4 <br>
  207.                             SEPTEMBRE
  208.                         </h1>
  209.             
  210.                         <div id="0" class="artist_lines" data-date="4">
  211.                             <p>
  212.                                 <span>18h - </span> 
  213.                                 # Synthèse modulaire <br>
  214.                                 De <strong>de Viktor Alles</strong>.
  215.                             </p>                            
  216.                             
  217.                             <div class="artist_img">                                
  218.                                 <div>                                    
  219.                                     <img loading="lazy" loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Viktor Alles/viktor_alle_short.jpg')}}" alt="">
  220.                                 </div>
  221.                             </div>
  222.   
  223.                         </div>
  225.                         <h1 data-date="5">VENDREDI 5 <br>
  226.                             SEPTEMBRE
  227.                         </h1>
  228.             
  229.                         <div id="1" class="artist_lines" data-date="5">
  230.                             <div class="artist_img">                                
  231.                                 <div>                                    
  232.                                     <img loading="lazy" loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Jacques Duault/jacques_duault_short.jpg')}}" alt="Artist'image">
  233.                                 </div>
  234.                             </div>
  235.                             <p>
  236.                                 <span>17h - </span> 
  237.                                 L’après guerre, c’est l’avant guerre (6e sculpture) <br>
  238.                                 De <strong>Jacques Duault</strong>.
  239.                             </p>
  240.                         </div>
  241.             
  242.                         <div id="2" class="artist_lines" data-date="5">
  243.                             <p>
  244.                                 <span>19h - </span>Le jour (acousmatique). <br>
  245.                                 De <strong>François Buffet</strong>.
  246.                                 
  247.                             </p>
  248.                             <div class="artist_img">                                
  249.                                 <div>                                    
  250.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/François Buffet/IMG20250808210155.jpg')}}" alt="">
  251.                                 </div>
  252.                             </div>
  253.             
  254.                         </div>
  255.             
  256.                         <div id="3" class="artist_lines" data-date="5">
  257.                             <div class="artist_img">                                
  258.                                 <div>                                    
  259.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Marie et Georges/photo marie et Georges.PNG')}}" alt="">
  260.                                 </div>
  261.                             </div>
  262.             
  263.                             <p>
  264.                                 <span>19h15 -</span> L’oeil de la Vouivre. Récit légendaire. <br>
  265.                                 de <strong>Marie Bunod</strong> conteuse & <strong>Georges PETIT</strong> musicien.
  266.                             </p>
  267.             
  268.                         </div>
  269.             
  270.                         <div id="4" class="artist_lines" data-date="5">
  271.                             <p>
  272.                                 <span>20h15 - </span>Improvisation poétique <br>
  273.                                 De <strong>Marco r</strong>.
  274.                             </p>
  275.             
  276.                             <div class="artist_img">                                
  277.                                 <div>                                    
  278.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Marco/marc_ravayrol_short.png')}}" alt="Marco r">
  279.                                 </div>
  280.                             </div>
  281.                             
  282.                         </div>
  283.                         
  284.                         <div id="5" class="artist_lines" data-date="5">                
  285.                             
  286.                             <div class="artist_img">                                
  287.                                 <div>                                    
  288.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Di Santo/les_levres_de_oeil.jpg')}}" alt="">
  289.                                 </div>
  290.                             </div>
  291.             
  292.                             <p>
  293.                                 <span>20h30 - </span>Les loges de la féminité. <br>
  294.                                 Théâtre vocal acousmatique de <strong>Jean-Louis Di Santo</strong>  et <strong>Fabienne GAY</strong>.<br>
  295.                             </p>
  296.                         </div>
  298.                         {#
  299.                         <div class="disclaimer" style="text-align: center;">
  300.                             <div>
  301.                                 <img src="{{asset('css/le_festival/img/warning.png')}}" alt="">
  302.                             </div>
  303.                             <p>
  304.                                 En raison du risque d'intempéries,<br>
  305.                                 les représentations suivantes auront lieu dans la salle des fêtes. </strong>.
  306.                             </p>
  307.                         </div>
  308.                         #}
  310.                         <div id="6" class="artist_lines" data-date="5">                
  311.                             <p>
  312.                                 <span>21h </span>- Suffocation Opus 38. Acousmatique. <br>
  313.                                 De <strong>Alexandre Yterce</strong>.
  314.                             </p>
  315.             
  316.                             <div class="artist_img">                                
  317.                                 <div>                                    
  318.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Alexandre Yterce/yterce 1.jpg')}}" alt="">
  319.                                 </div>
  320.                             </div>
  321.                         </div>
  323.                         <div id="7" class="artist_lines" data-date="5">                
  324.                             <div class="artist_img">                                
  325.                                 <div>                                    
  326.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Louis-Michel/photo Louis-Michel-Humanity-Dawn.jpg')}}" alt="Louis-Michel"> {# Ratio à modifier #}
  327.                                 </div>
  328.                             </div>
  329.             
  330.                             <p>
  331.                                 <span>21h10 - </span>The forest dawn.<br>
  332.                                 De <strong>Louis-Michel Lefeuvre</strong>.
  333.                             </p>
  334.                         </div>
  337.                         <h1 data-date="-">SAMEDI 6 <br>
  338.                             SEPTEMBRE
  339.                             <br>
  340.                         </h1>
  342.                         <div id="8" class="artist_lines" data-date="6">                
  343.                             <p>
  344.                                 <span>11h </span>- Conte sonore pour les plus jeunes.<br>
  345.                                 De <strong>Laurent Barbry</strong>.
  346.                             </p>
  347.             
  348.                             <div class="artist_img">                                
  349.                                 <div>                                    
  350.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Laurent Barbry/guirigabacho enfants-0001.png')}}" alt="Laurent Barbry">
  351.                                 </div>
  352.                             </div>
  353.                         </div>
  354.                         
  355.                         <div id="9" class="artist_lines" data-date="6">                
  356.                             <div class="artist_img">                                
  357.                                 <div>                                    
  358.                                     <img loading="lazy" style="object-fit: cover;" src="{{asset('css/le_festival/img/artistes/2025/program/Arnaud Romet/Affiche du Brame de la Licorne.jpg')}}" alt="">
  359.                                 </div>
  360.                             </div>
  361.             
  362.                             <p>
  363.                                 <span>14h - </span>Film : Le Brame de la Licorne.<br>
  364.                                 Long métrage de fiction d'<strong>Arnaud Romet</strong>.
  365.                             </p>
  366.                         </div>
  367.             
  368.                         <div id="10" class="artist_lines" data-date="6">                
  369.                             <p>
  370.                                 <span>15h30 - </span>Ciné-concert : sélection de courts-métrages d’ <strong>Alice Guy</strong>.
  371.                                 <strong> Lucie Mousset</strong><br>
  372.                                 (voix, looper, batterie). <br>
  373.                                 
  374.                             </p>
  375.             
  376.                             <div class="artist_img">                                
  377.                                 <div>                                    
  378.                                     <img loading="lazy" style="object-fit: cover;" src="{{asset('css/le_festival/img/artistes/2025/program/Lucie Mousset/Alice  Guy.jpg')}}" alt="">
  379.                                 </div>
  380.                             </div>
  381.                         </div>
  382.             
  383.                         <div id="11" class="artist_lines" data-date="6">                
  384.                             <div class="artist_img">                                
  385.                                 <div>                                    
  386.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/André Xicluna Laure/A.jpg')}}" alt="">
  387.                                 </div>
  388.                             </div>
  389.             
  390.                             <p>
  391.                                 <span>17h - </span>Mon village spatial. Radiophonie.<br>
  392.                                 De <strong>Patrick Xicluna</strong> & <strong>André Dion</strong>.
  393.                             </p>
  394.                         </div>
  396.                         <div id="12" class="artist_lines" data-date="6">                                            
  397.                             <p>
  398.                                 <span>17h30 </span>- Résistance et poésie. Veillée poétique.<br><br>
  399.                                 <strong>Philippe Audibert</strong> et <strong>Jean-Paul Cathala</strong>, accompagnés par un choix de musiques d'André Dion, Arvo Part, Tchaïkovski… disent des poèmes de Hikmet, Ritsos, Lorca, Neruda, Aragon, Akhmatova.
  400.                             </p>
  401.                             <div class="artist_img">                                
  402.                                 <div>                                    
  403.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Jean-Paul Poètes/Photo poètes.png')}}" alt="">
  404.                                 </div>
  405.                             </div>
  406.                         </div>
  408.                         <div id="13" class="artist_lines" data-date="6">                
  409.                             <div class="artist_img">
  410.                                 <div>                                    
  411.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Viktor Alles/viktor_alle_short.jpg')}}" alt="Viktor Alles">
  412.                                 </div>
  413.                             </div>
  414.                             <p>
  415.                                 <span>18h - </span># Synthèse modulaire. Concert.<br>
  416.                                 De <strong>Viktor Alles</strong>.
  417.                             </p>
  418.                         </div>
  419.                         
  420.                         <div id="14" class="artist_lines" data-date="6">                                            
  421.                             <p>
  422.                                 <span>19h - </span>Didgeridanse. Danse et didgeridoo. <br>
  423.                                 De  <strong>Marie Bo</strong> & <strong>Guillem</strong>.
  424.                             </p>
  426.                             <div class="artist_img">                                
  427.                                 <div>                                    
  428.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Mari Bo/marie-bo-short.webp')}}" alt="">
  429.                                 </div>
  430.                             </div>
  431.                         </div>
  433.                         <div id="15" class="artist_lines" data-date="6">                
  434.                             <div class="artist_img">                                
  435.                                 <div>                                    
  436.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Mylva/mylva_short.jpg')}}" alt="Mylva">
  437.                                 </div>
  438.                             </div>
  439.                             <p>
  440.                                 <span>19h30 - </span>Pour parler. Théâtre.<br>
  441.                                 De <strong>Mylva</strong>.
  442.                             </p>
  443.                         </div>
  445.                         <div id="16" class="artist_lines" data-date="6">       
  446.                             <p>
  447.                                 <span>20h - </span>Les ouds du maghreb. Concert. <br>
  448.                                 <strong>M<i style="font-style: normal; text-transform: lowercase;">UHANAD</i> Z<i style="font-style: normal; text-transform: lowercase;">AHRA</i></strong>
  449.                             </p>         
  450.                             <div class="artist_img">                                
  451.                                 <div>                                    
  452.                                     <img loading="lazy" style="object-fit: cover;" src="{{asset('css/le_festival/img/artistes/2025/program/Muhanad/ouds_short.jpeg')}}" alt=""> {# La photo est coupée en bas, y remédier #}
  453.                                 </div>
  454.                             </div>
  455.                         </div>
  457.                         <div id="17" class="artist_lines" data-date="6">
  458.                             <div class="artist_img">                                
  459.                                 <div>                                    
  460.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Laurent Barbry/scene adulte barbry.jpg')}}" alt="">
  461.                                 </div>
  462.                             </div>
  463.                             <p>
  464.                                 <span>21h - </span>Guirigabacho. Théâtre sonore <br>
  465.                                 De <strong>Laurent Barbry</strong>.
  466.                             </p>
  467.                         </div>                        
  468.             
  469.                         <h1 data-date="7">DIMANCHE 7<br>
  470.                             SEPTEMBRE
  471.                         </h1>
  472.             
  473.                         <div id="18" class="artist_lines" data-date="7">       
  474.                             <p>
  475.                                 <span>11h - </span>Les hortillonnages.<br>
  476.                                 De <strong>LAURE BIGNON & ANDRÉ DION</strong>
  477.                                 
  478.                             </p>         
  479.                             <div class="artist_img">                                
  480.                                 <div>                                    
  481.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/André Laure Bignon/hortillonnages 1.jpg')}}" alt=""> {# La photo est coupée en bas, y remédier #}
  482.                                 </div>
  483.                             </div>
  484.                         </div>
  486.                         <div id="19" class="artist_lines" data-date="7">
  487.                             <div class="artist_img">                                
  488.                                 <div>                                    
  489.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Janick Marine/jm-short-2.jpg')}}" alt="">
  490.                                 </div>
  491.                             </div>
  492.                             <p>
  493.                                 <span>11h30 - </span>Le geste et la parole. <br>
  494.                                 <strong>1ère partie</strong> anthropologique, rite païen alsacien. <br>
  495.                                 De <strong>Marine Froeliger</strong>, enseignante à la HEAR de Strasbourg, et <strong>Janick Deneux</strong>, compositeur.
  497.                             </p>
  498.                         </div>
  499.             
  500.                         <div id="20" class="artist_lines" data-date="7">
  501.                             <p>
  502.                                 <span>16h - </span>Le geste et la parole. <br>
  503.                                 <strong>2ème partie</strong> anthropologique, rite païen alsacien. <br>
  504.                                 De <strong>Marine Froeliger</strong>, enseignante à la HEAR de Strasbourg, et <strong>Janick Deneux</strong>, compositeur.
  505.                             </p>         
  506.                             <div class="artist_img">                                
  507.                                 <div>                                    
  508.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Janick Marine/jm-short-1.jpg')}}" alt="">
  509.                                 </div>
  510.                             </div>
  511.                         </div>
  513.                         <div id="21" class="artist_lines" data-date="7">
  514.                             <div class="artist_img">                                
  515.                                 <div>                                    
  516.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/vincent_lengaigne/portrait.webp')}}" alt="Vincent Lengaigne">
  517.                                 </div>
  518.                             </div>
  519.                             <p>
  520.                                 Sieste sonore octophonique.<br>
  521.                                 De <strong>Vincent Lengaigne</strong>.<br> <br>
  522.                             </p>
  523.                         </div>
  524.             
  525.                         <div id="22" class="artist_lines" data-date="7">
  526.                             <p>
  527.                                 <span>17h30 - </span>Sous l’astre en feu du ciel libéré, opus 43 (9’31 / 1990). <br>
  528.                                 D'<strong>Alexandre Yterce</strong>.
  529.                             </p>         
  530.                             <div class="artist_img">                                
  531.                                 <div>                                    
  532.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Alexandre Yterce/yterce 1.jpg')}}" alt=""> {# La photo est coupée en bas, y remédier #}
  533.                                 </div>
  534.                             </div>
  535.                         </div>
  537.                         <div id="23" class="artist_lines" data-date="7">
  538.                             <div class="artist_img">                                
  539.                                 <div>                                    
  540.                                     <img loading="lazy" src="{{asset('css/le_festival/img/artistes/2025/program/Claire Newland/photo claire 1.jpg')}}" alt="Claire Newland">
  541.                                 </div>
  542.                             </div>
  543.                             <p>
  544.                                 <span>18h - </span>Improvisation enregistrée dans la forêt de Saou, L.I.E.U. Path Under <br>
  545.                                 De <strong>Clair Newland</strong>, danse <br>
  546.                                 et <strong>Michel Doneda</strong>, sax.
  547.                             </p>
  548.                         </div>
  549.             
  550.                         <div id="24" class="artist_lines" data-date="7">
  551.                             <p>
  552.                                 <span>20h30 - </span>Concert, Oud maghrébin. <br>
  553.                                 De <strong>Muhanad Zahra</strong>
  554.                             </p>         
  555.                             <div class="artist_img">                                
  556.                                 <div>                                    
  557.                                     <img loading="lazy" style="object-fit: cover;" src="{{asset('css/le_festival/img/artistes/2025/program/Muhanad/ouds_short.jpeg')}}" alt=""> {# La photo est coupée en bas, y remédier #}
  558.                                 </div>
  559.                             </div>
  560.                         </div>
  562.                         <div id="25" class="artist_lines" data-date="7">
  563.                             <div class="artist_img">                                
  564.                                 <div>                                    
  565.                                     <img loading="lazy" style="object-fit: cover;" src="{{asset('css/le_festival/img/artistes/2025/program/Fabienne Lucie/crux_1_short.jpg')}}" alt="Fabienne Lucie">
  566.                                 </div>
  567.                             </div>
  568.                             <p style="text-shadow: 2px 2px 1px black;">
  569.                                 <span>18h - </span>Crux (à Catherine Ribeiro + Alpes) sur le fil de l’inouï, chaos du monde, vertige sonore<br>
  570.                                 De <strong>Fabienne GAY</strong> voix, violoncelle, tuba, objets<br>
  571.                                 et <strong>Lucie Mousset</strong> voix, batterie, looper, otamatone, objets.
  573.                             </p>
  574.                         </div>
  576.                     </div>
  577.     
  578.                 </div>
  579.     
  580.     
  581.             </div>
  582.     
  583.             <div class="artist_card" data-open="0">
  584.                 <div class="background">
  585.                     
  586.                     <img src="{{asset('css/le_festival/img/megaphone_background_artist_card.svg')}}" alt="">
  587.                 </div>
  588.                 
  589.                 <div class="artist_content">
  590.                     
  591.                 </div>
  592.                 
  593.                 <div class="close_button">
  594.                     <img src="{{asset('css/le_festival/img/close_button.svg')}}" alt="">
  595.                 </div>
  596.                 
  597.                 <div class="waveform_background">
  598.                     <img src="{{asset('css/le_festival/img/waveforme_mobile.png')}}" alt="">
  599.                 </div>
  600.     
  601.             </div>
  602.     
  603.             <div class="download_button_mobile" data-deploy-state="0">
  604.                 <a href="{{asset('css/le_festival/img/programme_2025.pdf')}}"></a>
  605.                 <img src="{{asset('css/le_festival/img/dl_button_mobile.svg')}}" alt="">
  606.             </div>
  607.     
  608.     
  609.         </div>
  610.     
  611.         <div id="qui_sommes_nous">
  612.             <p id="quote">
  613.                 Pour que le désir s'entende, il faut être trois :
  614.                  celui qui parle, celui à qui l'on parle et l'Autre, l'inconscient... <br>
  615.                  <br>
  616.                 J.Lacan, psychanalyste
  617.             </p>
  618.     
  619.             <div class="text_description">
  620.                 <div class="upper_decoration">
  621.                     <img loading="lazy" src="{{asset('css/qui_sommes_nous/img/upper_decoration.svg')}}" alt="">
  622.                 </div>
  623.     
  624.                 <div class="text_area">
  625.                     <h2>QUI SOMMES-NOUS ?</h2>
  626.     
  627.                     <p><strong>Nous sommes compositeurs, en électroacoustique</strong> (on dit aussi acousmatique, ou musique concrète), c'est à dire que nous composons non pas pour piano ou orchestre, mais pour haut-parleurs, c'est notre instrument
  628.     
  629.                         Quand notre musique s'entend, il n'y a rien à voir. Personne ne joue ce que nous avons composé ; l'oeuvre est enregistrée sur un objet-support (bande, CD ou autres), et des machines la diffusent, souvent contrôlées par une sorte de technicien-interprète, conducteur-projectionniste.
  630.                         
  631.                         Pour plus de détail, vous pouvez lire : <a href="#">Le Son Miré, ou Le Haut-Parleur comme Miroir Sonore - Conférence du GRECA - FÊTE DE LA SCIENCE 2003
  632.                         Informations diverses ... </a>(activités de l'association et de ses adhérents, ...)</p>
  633.                 </div>
  634.             </div>
  635.     
  636.             <div class="background mobile">
  637.                 <img loading="lazy" src="{{asset('css/qui_sommes_nous/img/background_mobile.png')}}" alt="">
  638.             </div>
  639.             <div class="background desktop">
  640.                 <img loading="lazy" src="{{asset('css/qui_sommes_nous/img/background_desktop.jpg')}}" alt="">
  641.             </div>
  642.         </div>
  643.     
  644.         <div id="infos_pratiques">
  645.     
  646.             <div class="information_left_container">
  647.                 <div class="container">
  648.     
  649.                     <div class="infos">
  650.                         <h2>Informations pratiques</h2>
  651.                         <h3>Localistation:</h3>
  652.                         <p>Le village de Fabrezan est dans l’Aude, à 5 km de Lézignan-Corbières <br>
  653.                             par le RN 113, accessible par la sortie A61, sortie n°25 et par le train, gare de Lézignan-Corbières.
  654.                         </p>
  655.                     </div>
  656.     
  657.                     <div class="background">
  658.                         <img loading="lazy" src="{{asset('css/informations_pratiques/img/background_infos_pratiques.svg')}}" alt="">
  659.                     </div>
  660.     
  661.                     <div class="petite_restauration_panel" data-open="0">
  662.                         <div class="header">
  663.                             <span>Plus d'infos</span><svg width="15" height="15">
  664.                                 <polygon points="0,0 0,15 15,7.5" fill="#ae4c4c">
  665.     
  666.                                 </polygon>
  667.                             </svg>
  668.     
  669.                             <div class="button"><img src="{{asset('css/informations_pratiques/img/resto_button_no_shadow.svg')}}" alt=""></div>
  670.     
  671.                             <svg width="15" height="15">
  672.                                 <polygon points="15,0 15,15 0,7.5" fill="#ae4c4c">
  673.     
  674.                                 </polygon>
  675.                             </svg><span>Plus d'infos</span>
  676.                         </div>
  677.     
  678.                         <div class="container_info">
  679.                             <h3>Petite restauration</h3>
  680.                             {#
  681.                             <p>
  682.                                 <strong>QUICOM MAI Géraldine</strong>
  683.                                 Vendredi de 17 h à 23 h / devant la Chapelle
  684.                                 Crêpes et galettes, petite restauration et boissons variées
  685.                             </p>
  686.                             #}
  687.         
  688.                             <p>
  689.                                 <strong>LES ARBRES CITOYENS Association</strong>:<br>
  690.                                 Samedi 6 à partir de 18h à 23h, derrière la salle polyvalente.
  691.                             </p>
  692.                         </div>
  693.                     </div>
  694.                 </div>
  695.             </div>
  696.     
  697.             <div class="information_right_container">
  698.     
  699.                 <div class="background">
  700.                     <img src="{{asset('css/informations_pratiques/img/background_map.webp')}}" alt="">
  701.                 </div>
  702.     
  703.                 <div class="map_container_desktop">
  704.         
  705.                     <div class="arrow_decoration_desktop">
  706.                         <svg width="35px" height="100px">
  707.                             <polygon points="0,0 0,100 35,50" fill="white">
  708.         
  709.                             </polygon>
  710.                         </svg>
  711.                     </div>
  712.                     <div class="arrow_decoration_desktop full">
  713.                         <svg width="70px" height="200px">
  714.                             <polygon points="0,0 0,200 70,100" fill="white">
  715.         
  716.                             </polygon>
  717.                         </svg>
  718.                     </div>
  719.     
  720.                     <div class="map"><iframe frameborder="0" height="100%" width="100%" src="https://www.google.com/maps/embed?pb=!1m24!1m12!1m3!1d93138.7716553312!2d2.6823804092359578!3d43.15520926786077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m9!1i0!3e6!4m0!4m5!1s0x12b033551c0c3d7f%3A0xafd2e46e1a24c5a!2sFabrezan!3m2!1d43.137479!2d2.7001079999999997!5e0!3m2!1sfr!2sfr!4v1419088177686" style="border:0"></iframe></div>
  721.                 </div>
  722.     
  723.                 <div class="location_info">
  724.     
  725.                     <div class="container">
  726.                         
  727.                         <div class="left_part">
  728.     
  729.                             <h3>
  730.                                 Les lieux du festival dans le village:
  731.                             </h3>
  732.     
  733.                             <ul>
  734.                                 <li>Devant la Tour Carrée.</li>
  735.                                 <li>Derrière la salle polyvalente.</li>
  736.                                 {#<li>Devant la chapelle</li>#}
  737.                                 <li>Sentier des sculptures derrière la chapelle.</li>
  738.                                 <li>Centre des arts.</li>
  739.                                 {#<li>Salle des fêtes</li>#}
  740.                             </ul>
  741.     
  742.                             <h3>
  743.                                 Tarifs:
  744.                             </h3>
  745.                             <p>
  746.                                 Prix libre.
  747.                             </p>
  748.     
  749.                             <h3 class="h3_restauration">
  750.                                 Restauration  <li></li>
  751.                                 <div>
  752.                                     <img class="restauration_button" src="{{asset('css/informations_pratiques/img/resto_button.svg')}}" alt="">
  753.                                 </div>
  754.                             </h3>
  755.     
  756.                             <h3>
  757.                                 Contacts:
  758.                             </h3>
  759.                             <p>
  760.                                 GRECA LE MAT<br>
  761.                                 MAIRIE<br>
  762.                                 AVENUE DE FABREZAN<br>
  763.                                 11200 FABREZAN<br>
  764.                             </p>
  765.                             
  766.     
  767.     
  768.     
  769.                         </div>
  770.     
  771.                         <div class="right_part">
  772.                             <div class="pictures_frame">
  773.     
  774.                                 <img loading="lazy" src="{{asset('css/informations_pratiques/img/illustration_1.webp')}}" alt="">
  775.                                 <img loading="lazy" src="{{asset('css/informations_pratiques/img/illustration_2.webp')}}" alt="">
  776.     
  777.                             </div>
  778.                         </div>
  779.     
  780.                     </div>
  781.     
  782.                 </div>
  783.             </div>
  784.     
  785.             <div class="map_container_mobile">
  786.     
  787.                 <div class="map"><iframe frameborder="0" height="100%" width="100%" src="https://www.google.com/maps/embed?pb=!1m24!1m12!1m3!1d93138.7716553312!2d2.6823804092359578!3d43.15520926786077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m9!1i0!3e6!4m0!4m5!1s0x12b033551c0c3d7f%3A0xafd2e46e1a24c5a!2sFabrezan!3m2!1d43.137479!2d2.7001079999999997!5e0!3m2!1sfr!2sfr!4v1419088177686" style="border:0"></iframe></div>
  788.                 <div class="background">
  789.                     <img src="{{asset('css/informations_pratiques/img/background_map.webp')}}" alt="">
  790.                 </div>
  791.     
  792.             </div>
  793.     
  794.             <div class="informations_mobile_container">
  795.     
  796.                 <div class="map_link">
  797.                     <a href="https://www.google.com/maps/dir//Fabrezan,+11200,+France/@43.209369,2.595055,11z/data=!4m9!4m8!1m0!1m5!1m1!1s0x12b033551c0c3d7f:0xafd2e46e1a24c5a!2m2!1d2.700108!2d43.137479!3e0?hl=fr-FR&entry=ttu"></a>
  798.                 </div>
  799.                 <div class="informations">
  800.     
  801.                     <div class="arrow_deco_container">
  802.     
  803.                         <svg class="arrow_decoration_black" width="200" height="30" fill="#00000061">
  804.                             <polygon points="100,0 0,30  200,30">
  805.             
  806.                             </polygon>
  807.                         </svg>
  808.     
  809.                         <svg class="arrow_decoration" width="200" height="30" fill="white">
  810.                             <polygon points="100,0 0,30  200,30">
  811.             
  812.                             </polygon>
  813.                         </svg>
  814.                         
  815.                     </div>
  816.     
  817.                     <div class="location_description">
  818.                         <div class="container">
  819.                             <h3>Informations pratiques</h3>
  820.                             <p><strong>Localistation:</strong></p>
  821.                             <p>Le village de Fabrezan est dans l’Aude, à 5 km de Lézignan-Corbières
  822.                                 par le RN 113, accessible par la sortie A61, sortie n°25 et par le train, gare de Lézignan-Corbières.
  823.                             </p>
  824.         
  825.                             <div class="background">
  826.                                 <img src="{{asset('css/informations_pratiques/img/background_infos_pratiques.svg')}}" alt="">
  827.                             </div>
  828.                         </div>
  829.                     </div>
  830.     
  831.                     <div class="petite_restauration_mobile" data-open="0">
  832.     
  833.                         <div id="petite_restauration_button_mobile">
  834.                             <img src="{{asset('css/informations_pratiques/img/resto_button.svg')}}" alt="Bouton informations sur la petite restauration du festival ">
  835.                         </div>
  836.     
  837.                         <div class="container">
  838.     
  839.                             <h3>Petite restauration</h3>
  841.         
  842.                             <p>
  843.                                 <strong>LES ARBRES CITOYENS Association</strong>
  844.                                 Samedi à partir de 18h Place de la Tour Carrée.
  845.                             </p>
  846.     
  847.                         </div>
  848.                     </div>
  849.     
  850.                     <div class="festival_places">
  851.                         <div class="left_part">
  852.                             <h3>Les lieux du festival dans le village:</h3>
  853.     
  854.                             <ul>
  855.                                 <li>Devant la tour Carrée</li>
  856.                                 <li>Derrière la salle poyvanlente</li>
  857.                                 {#<li>Devant la chapelle</li>#}
  858.                                 <li>Sentier des sculptures derrière la chapelle</li>
  859.                                 <li>Centre des arts</li>
  860.                                 {#<li>Salle des fêtes</li>#}
  861.                             </ul>
  862.     
  863.                             <h3>Tarifs</h3>
  864.                             <p>
  865.                                 Prix libre
  866.                             </p>
  867.     
  868.                             <h3>Contacts:</h3>
  869.                             <p>
  870.                                 GRECA LE MAT <br>
  871.                                 MAIRIE <br>
  872.                                 AVENUE DE FABREZAN <br>
  873.                                 11200 FABREZAN <br>
  874.                                 <br>
  875.                                 Téléphone: 06 78 77 12 44
  876.                             </p>
  877.                         </div>
  878.     
  879.                         <div class="right_part">
  880.                             <div class="pictures_frame">
  881.     
  882.                                 <img src="{{asset('css/informations_pratiques/img/illustration_1.webp')}}" alt="">
  883.                                 <img src="{{asset('css/informations_pratiques/img/illustration_2.webp')}}" alt="">
  884.     
  885.                             </div>
  886.     
  887.                         </div>
  888.                     </div>
  889.                 </div>
  890.             
  891.             </div>
  892.         </div>
  893.     
  894.         <div id="expos_permanentes">
  895.             <div class="expos_permanentes_container">
  896.                 <div class="big_title">
  897.                     <img src="{{asset('css/expos_permanentes/img/expo_text_illustation.png')}}" alt="">
  898.                     <img src="{{asset('css/expos_permanentes/img/expo_text_illustation_desktop.png')}}" alt="">
  899.                 </div>
  900.     
  901.                 <div class="slider_component">
  902.                     <div class="slider_container">
  903.     
  904.                         <div class="slider">
  905.                             <div class="img_container img_container_1">
  906.                                 <img src="{{asset('css/expos_permanentes/img/centre_des_arts.webp')}}" alt="">
  907.                                 <div class="filter"></div>
  908.                             </div>
  909.     
  910.                             <div class="img_container img_container_2">
  911.                                 <div class="next_button">
  912.                                     <img src="{{asset('css/expos_permanentes/img/next_slider_button.svg')}}" alt="">
  913.                                 </div>
  914.     
  915.                                 <img class="img_2" src="{{asset('css/expos_permanentes/img/jacques_duault.webp')}}" alt="">
  916.                                 <img class="img_2_blurry" src="{{asset('css/expos_permanentes/img/jacques_duault.webp')}}" alt="">
  917.     
  918.                                 <div class="filter"></div>
  919.                             </div>
  920.     
  921.                             <div class="img_container img_container_3">
  922.                                 <div class="second_next_button">
  923.                                     <img src="{{asset('css/expos_permanentes/img/next_slider_button.svg')}}" alt="">
  924.                                 </div>
  925.                                 <img src="{{asset('css/expos_permanentes/img/sculpture_robert_cros.webp')}}" alt="">
  926.                                 <div class="filter"></div>
  927.                             </div>
  928.                         </div>
  929.     
  930.                         <div class="slider_control">
  931.                             <div>
  932.     
  933.                                 <div class="left_button button">
  934.                                     <img src="{{asset('css/expos_permanentes/img/left_button_light.svg')}}" alt="">
  935.                                 </div>
  936.         
  937.                                 <div class="reset_button button">
  938.                                     <img src="{{asset('css/expos_permanentes/img/reset_button_light.svg')}}" alt="">
  939.                                 </div>
  940.         
  941.         
  942.                                 <div class="right_button button">
  943.                                     <img src="{{asset('css/expos_permanentes/img/right_button_light.svg')}}" alt="">
  944.                                 </div>
  945.     
  946.                             </div>
  947.     
  948.     
  949.                         </div>
  950.     
  951.                     </div>
  952.     
  953.                     <div class="info_container">
  954.                         <div class="text_description description_1">
  955.     
  956.                             <div class="title">
  957.     
  958.                                 <div class="indicators">
  959.                                     <svg width="20" height="20" fill="red">
  960.                                         <polygon points="20,0 0,0 10,20"></polygon>
  961.                                     </svg>
  962.                                 </div>
  963.         
  964.                                 <h3>
  965.                                     EXPOSITION D’ARTS PLASTIQUES AU CENTRE DES ARTS
  966.                                 </h3>
  967.         
  968.                                 <div class="indicators">
  969.                                     <svg width="20" height="20" fill="red">
  970.                                         <polygon points="20,0 0,0 10,20"></polygon>
  971.                                     </svg>
  972.                                 </div>
  973.     
  974.                             </div>
  975.         
  976.                             <p>Fabrezan - 07 62 48 02 24 Du 11 août au 11 septembre / Tout public : ouverture de 10h à 13h le matin et de 14h à 19h l'après midi.
  977.                                  Cette année une "immense" surprise de David Samblanet sur Charles Cros sur la façade du Centre des Arts</p>
  978.                         </div>
  979.     
  980.                         <div class="text_description description_2">
  981.                             <div class="title">
  982.     
  983.                                 <div class="indicators">
  984.                                     <svg width="20" height="20" fill="red">
  985.                                         <polygon points="20,0 0,0 10,20"></polygon>
  986.                                     </svg>
  987.                                 </div>
  988.                                 
  989.                                 <h3>Photographie sculpture de Robert cros
  990.                                     EXPOSITION permanente sur le Sentier des Sculptures derrière la chapelle Notre-Dame de Consolation
  991.                                 </h3>
  992.                                 
  993.                                 <div class="indicators">
  994.                                     <svg width="20" height="20" fill="red">
  995.                                         <polygon points="20,0 0,0 10,20"></polygon>
  996.                                     </svg>
  997.                                 </div>
  998.                             </div>
  999.         
  1000.                             <p>Sculptures de Jacques Duault (2020), Robert Cros (2021), Mattia Polli (2022).
  1001.                                  Ce projet est né de la rencontre entre la pierre de Ferrals (ou pierre de Lègnes, patrimoine local), et de l’envie de passer commande à des sculpteurs pour la travailler, puis d'exposer le résultat sur ce petit sentier escarpé du Son MiRé, "Les 5 éléments", autour de Notre Dame de Consolation, qui se prête bien à une marche méditative, dans ce lieu chargé d’histoire et de spiritualité.</p>
  1002.                         </div>
  1003.     
  1004.                         <div class="text_description description_3">
  1005.     
  1006.                             <div class="title">
  1007.     
  1008.                                 <div class="indicators">
  1009.                                     <svg width="20" height="20" fill="red">
  1010.                                         <polygon points="20,0 0,0 10,20"></polygon>
  1011.                                     </svg>
  1012.                                 </div>
  1013.     
  1014.                                 <h3>Photographie sculpture de Robert cros
  1015.                                     EXPOSITION permanente sur le Sentier des Sculptures derrière la chapelle Notre-Dame de Consolation
  1016.                                 </h3>
  1017.     
  1018.                                 <div class="indicators">
  1019.                                     <svg width="20" height="20" fill="red">
  1020.                                         <polygon points="20,0 0,0 10,20"></polygon>
  1021.                                     </svg>
  1022.                                 </div>
  1023.                             </div>
  1024.     
  1025.         
  1026.         
  1027.                                 <p>Sculptures de Jacques Duault (2020), Robert Cros (2021), Mattia Polli (2022).
  1028.                                     Ce projet est né de la rencontre entre la pierre de Ferrals (ou pierre de Lègnes, patrimoine local), et de l’envie de passer commande à des sculpteurs pour la travailler, puis d'exposer le résultat sur ce petit sentier escarpé du Son MiRé, "Les 5 éléments", autour de Notre Dame de Consolation, qui se prête bien à une marche méditative, dans ce lieu chargé d’histoire et de spiritualité.</p>
  1029.                         </div>
  1030.                     </div>
  1031.                 </div>
  1032.             </div>
  1033.         </div>
  1034.         
  1035.         <div id="du_son_en_plus">
  1036.             <div class="container">
  1037.                 <div class="vinyle_background">
  1038.                     <img class="mobile" src="{{asset('css/du_son_en_plus/img/vinyle_full_mobile.png')}}" alt="">
  1039.                     <img class="desktop" src="{{asset('css/du_son_en_plus/img/vinyle_full.png')}}" alt="">
  1040.                     <img class="waveform_part" src="{{asset('css/du_son_en_plus/img/waveform_part.webp')}}" alt="">
  1041.                 </div>
  1043.                 <div class="waveform_background">
  1044.                     <img src="{{asset('css/du_son_en_plus/img/waveforme.png')}}" alt="">
  1045.                 </div>
  1047.                 <div class="du_son_en_plus_content">
  1048.                     <div class="page_title">
  1050.                         <div>
  1051.                             <img src="{{asset('css/du_son_en_plus/img/little_megaphone.svg')}}" alt="">
  1052.                             <p>DU SON <br> EN</p>
  1053.                             <img src="{{asset('css/du_son_en_plus/img/plus_icon.svg')}}" alt="">
  1054.                         </div>
  1057.                     </div>
  1059.                     <div class="date_selector">
  1060.                         
  1061.                         <div>
  1062.                             <svg class="prev_date_selector" width="19" height="19">
  1063.                                 <polygon points="19,0 0,9.5 19,19" fill="#D9D9D9">
  1064.     
  1065.                                 </polygon>
  1066.                             </svg>
  1068.                             <p class="date" data-date-content-link="{{path('du_son_en_plus_data', {date: '2015'})}}">2015</p>
  1070.                             <svg class="next_date_selector" width="19" height="19">
  1071.                                 <polygon points="0,0 0,19 19,9.5" fill="#D9D9D9">
  1072.     
  1073.                                 </polygon>
  1074.                             </svg>
  1075.                         </div>
  1077.                     </div>
  1079.                     <div class="date_content">
  1083.                     </div>
  1084.                 </div>
  1085.             </div>
  1086.         </div>
  1088.         <div id="archives">
  1089.             <div class="container">
  1091.                 <div class="date_selector">
  1092.                     <p data-date-data-link="{{path('arhives_data', {date: '2004'})}}">2004</p>
  1093.                     <p data-date-data-link="{{path('arhives_data', {date: '2005'})}}">2005</p>
  1094.                     <p data-date-data-link="{{path('arhives_data', {date: '2006'})}}">2006</p>
  1095.                     <p data-date-data-link="{{path('arhives_data', {date: '2007'})}}">2007</p>
  1096.                     <p data-date-data-link="{{path('arhives_data', {date: '2008'})}}">2008</p>
  1097.                     <p data-date-data-link="{{path('arhives_data', {date: '2009'})}}">2009</p>
  1098.                     <p data-date-data-link="{{path('arhives_data', {date: '2010'})}}">2010</p>
  1099.                     <p data-date-data-link="{{path('arhives_data', {date: '2011'})}}">2011</p>
  1100.                     <p data-date-data-link="{{path('arhives_data', {date: '2012'})}}">2012</p>
  1101.                     <p data-date-data-link="{{path('arhives_data', {date: '2013'})}}">2013</p>
  1102.                     <p data-date-data-link="{{path('arhives_data', {date: '2014'})}}">2014</p>
  1103.                     <p data-date-data-link="{{path('arhives_data', {date: '2015'})}}">2015</p>
  1104.                     <p data-date-data-link="{{path('arhives_data', {date: '2016'})}}">2016</p>
  1105.                     <p data-date-data-link="{{path('arhives_data', {date: '2017'})}}">2017</p>
  1106.                     <p data-date-data-link="{{path('arhives_data', {date: '2018'})}}">2018</p>
  1107.                     <p data-date-data-link="{{path('arhives_data', {date: '2019'})}}">2019</p>
  1108.                     <p data-date-data-link="{{path('arhives_data', {date: '2020'})}}">2020</p>
  1109.                     <p data-date-data-link="{{path('arhives_data', {date: '2021'})}}">2021</p>
  1110.                     <p data-date-data-link="{{path('arhives_data', {date: '2022'})}}">2022</p>
  1111.                     <p data-date-data-link="{{path('arhives_data', {date: '2023'})}}">2023</p>
  1112.                     <p data-date-data-link="{{path('arhives_data', {date: '2024'})}}">2024</p>
  1114.                     <div class="indicator_area">
  1115.                         <div class="indicator">
  1117.                             <svg width="10" height="20">
  1118.                                 <polygon points="10,0 0,10 10,20" fill="black">
  1119.     
  1120.                                 </polygon>
  1121.                             </svg>
  1123.                         </div>
  1124.                     </div>
  1125.                 </div>
  1127.                 <div class="date_data">
  1129.                 </div>
  1130.             </div>
  1131.         </div>
  1133.         <div id="nos_partenaires">
  1134.             <div class="content">
  1135.                 <div class="top_part">
  1136.                     <div class="partenaires_container">
  1137.                         <h2>Nos partenaires</h2>
  1138.                         <img class="mobile" src="{{asset('css/nos_partenaires/img/partenaires_1.png')}}" alt="">
  1139.                         <img class="mobile" src="{{asset('css/nos_partenaires/img/partenaires_2.png')}}" alt="">
  1141.                         <img class="desktop" src="{{asset('css/nos_partenaires/img/nos_partenaires_desktop.png')}}" alt="">
  1142.                     </div>
  1143.                     <div class="background">
  1144.                         <img class="mobile" src="{{asset('css/nos_partenaires/img/background.png')}}" alt="">
  1145.                         <img class="desktop" src="{{asset('css/nos_partenaires/img/background_desktop.png')}}" alt="">
  1146.                     </div>
  1147.                 </div>
  1148.                 <div class="bottom_part">
  1149.                     <div>
  1150.                         <ul>
  1151.                             <li><a href="#">Préfet de la région Occitanie</a></li>
  1152.                             <li><a href="#">La région Occitanie</a></li>
  1153.                             <li><a href="#">Aude</a></li>
  1154.                             <li><a href="#">Région Lézignanaise Corbières Minervois</a></li>
  1155.                             <li><a href="#">Commune de Fabrezan</a></li>
  1156.                         </ul>
  1157.     
  1158.                         <ul>
  1159.                             <li><a href="#">Médiathèques intercommunales</a></li>
  1160.                             <li><a href="#">Centre des arts de Fabrezan</a></li>
  1161.                             <li><a href="#">La Buissonnières du Vin</a></li>
  1162.                             <li><a href="#">Les arbres Citoyens</a></li>
  1163.                             <li><a href="#">GRECA</a></li>
  1164.                         </ul>
  1165.                     </div>
  1166.                 </div>
  1167.             </div>
  1168.         </div>
  1170.     </div>
  1172. </main>
  1174. {# Selectors #}
  1175. <div class="previous_page selectors" data-hide-state="1">
  1176.     <img class="white_selector" data-page-selector="previous" src="{{asset('css/common/main/icon/selector/mobile/selector_white_left_mobile.svg')}}" alt="">
  1177.     <img class="black_selector" data-page-selector="previous" src="{{asset('css/common/main/icon/selector/mobile/selector_black_left_mobile.svg')}}" alt="">
  1178. </div>
  1180. <div class="next_page selectors" data-hide-state="0">
  1181.     <img class="white_selector" data-page-selector="next" src="{{asset('css/common/main/icon/selector/mobile/selector_white_right_mobile.svg')}}" alt="">
  1182.     <img class="black_selector" data-page-selector="next" src="{{asset('css/common/main/icon/selector/mobile/selector_black_right_mobile.svg')}}" alt="">
  1183. </div>
  1188. {% endblock %}