
                    <!-- <div class="swm-header-placeholder" data-header-d="107" data-header-t="107" data-header-m="80" style="height: 0px;"></div> -->
                    <div id="swm-sub-header" class="swm-sub-header swm-title-position-title-center" style="background: white">
                        <img src="media/sub-header2.jpg">
                        <div class="swm-container swm-css-transition" style="display:none">
                            <div class="swm-sub-header-title-bc">
                                <div class="swm-sub-header-title-wrap" >
                                    <h1 class="swm-sub-header-title entry-title"><span style="color:white">Médiathèque</span></h1>
                                    <div class="clear"></div>
                                </div>
                                <div class="swm-sub-header-breadcrumbs swm-hide-">
                                    <div class="swm-breadcrumbs">
                                        <a href="home" title="accueil" rel="home" class="swm-bc-trail-begin" style="color:white">Accueil</a> <span class="swm-bc-sep" style="color:white"></span>
                                        <span class="swm-bc-trail-end" style="color:white">Médiathèque</span>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                    <div class="swm-main-container swm-site-content swm-css-transition">
                        <div data-elementor-type="wp-page" data-elementor-id="162" class="elementor elementor-162" data-elementor-settings="[]">
                            <div class="elementor-inner">
                                <div class="elementor-section-wrap">
                                    <section
                                        class="elementor-element elementor-element-f80274f elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section"
                                        data-id="f80274f"
                                        data-element_type="section"
                                    >
                                        <div class="elementor-container elementor-column-gap-no">
                                            <div class="elementor-row">
                                                <div class="elementor-element elementor-element-5816efcb elementor-column elementor-col-100 elementor-top-column" data-id="5816efcb" data-element_type="column">
                                                    <div class="elementor-column-wrap elementor-element-populated">
                                                        <div class="elementor-widget-wrap">
                                                            <div
                                                                class="elementor-element elementor-element-febea5e elementor-grid-3 elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-widget elementor-widget-gyan_portfolio"
                                                                data-id="febea5e"
                                                                data-element_type="widget"
                                                                data-settings='{"columns":"3","columns_tablet":"2","columns_mobile":"1"}'
                                                                data-widget_type="gyan_portfolio.default"
                                                            >
                                                                <div class="elementor-widget-container">
                                                                    <div class="gyan-portfolio gyan-portfolio-febea5e" data-layout="grid" data-rtl="false">
                                                                        <div class="gyan-portfolio-btns">
                                                                            <button class="gyan-portfolio-btn gyan-button is-checked" data-filter="*">Tout</button>
                                                                            <button href="#" class="gyan-portfolio-btn gyan-button" data-filter=".cat-19" title="Images">Images</button>
                                                                            <button href="#" class="gyan-portfolio-btn gyan-button" data-filter=".cat-20" title="Vidéos">Vidéos</button>
                                                                        </div>
                                                                        <div class="gyan-portfolio-grid gyan-elementor-grid gyan-pf-style-1 gyan-pf-overlay-scale gyan-pf-content-" style="position: relative; height: 1523.34px;">
                                                                            <?php
                                                                                $dir_nom = 'media/galerie';
                                                                                $dir = opendir($dir_nom) or die('Erreur de listage : le répertoire n\'existe pas'); // on ouvre le contenu du dossier courant
                                                                                $fichier= array(); // on déclare le tableau contenant le nom des fichiers
                                                                                
                                                                                while($element = readdir($dir)) {
                                                                                    if($element != "." && $element != ".."){
                                                                                        if (!is_dir($dir_nom.'/'.$element)){
                                                                                            $fichier[] = $element;
                                                                                        }                                                                                    }
                                                                                }
                                                                                
                                                                                closedir($dir);
                                                                                
                                                                                $dir_nom1 = 'media/video';
                                                                                $dir1 = opendir($dir_nom1) or die('Erreur de listage : le répertoire n\'existe pas'); // on ouvre le contenu du dossier courant
                                                                                $video= array(); // on déclare le tableau contenant le nom des videos
                                                                                
                                                                                while($element = readdir($dir1)) {
                                                                                    if($element != "." && $element != ".."){
                                                                                        if (!is_dir($dir_nom1.'/'.$element)){
                                                                                            $video[] = $element;
                                                                                        }                                                                                    }
                                                                                }
                                                                                
                                                                                closedir($dir1); 
                                                                                if(!empty($fichier)){
                                                                                    sort($fichier);
                                                                                    $j = 0;
                                                                                    foreach($fichier as $lien){
                                                                            ?>
                                                                            <div class="gyan-portfolio-item gyan-grid-item-wrap gyan-grid-item-wrap cat-19" style="position: absolute; left: 0px; top: 0px;">
                                                                                <div class="gyan-portfolio-item-inner gyan-grid-item text-center" style="height: 300px;justify-content: center;display: flex;align-items: center;">
                                                                                    <?php
                                                                                       // pour le tri croissant, rsort() pour le tri décroissant
                                                                                            
                                                                                                ?>
                                                                                                    <img src="<?=$dir_nom.'/'.$lien?>" alt="" style="max-height:300px;width:auto; margin:auto"/>
                                                                                    
                                                                                                <?php
                                                                                                $j++;
                                                                                           
                                                                                                                                                    ?>
                                                                                    
                                                                                    <?php
                                                                                        ?>
                                                                                </div>
                                                                            </div>
                                                                            <?php 
                                                                                }
                                                                            }
                                                                                if(!empty($video)){
                                                                                    sort($video);
                                                                                    $j = 0;
                                                                                    foreach($video as $lien){
                                                                            ?>
                                                                            <div class="gyan-portfolio-item gyan-grid-item-wrap cat-20" style="position: absolute; left: 0px; top: 0px;">
                                                                                <div class="gyan-portfolio-item-inner gyan-grid-item text-center">
                                                                                    <?php
                                                                                       // pour le tri croissant, rsort() pour le tri décroissant
                                                                                            
                                                                                                ?>
                                                                                                    <video height="400" style="width:100%" controls>
                                                                                                        <source src="<?=$dir_nom1.'/'.$lien?>" type="video/mp4">
                                                                                                    </video>
                                                                                    
                                                                                                <?php
                                                                                                $j++;
                                                                                           
                                                                                                                                                    ?>
                                                                                    
                                                                                    <?php
                                                                                        ?>
                                                                                </div>
                                                                            </div>
                                                                            <?php 
                                                                                }
                                                                            }
                                                                                    ?>
                                                                        </div>
                                                                        <div class="clear"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
