Update supplements following merge

Merge branch 'dev' into other-works
Fix bad characters
2022-08-17 13:35:45 +02:00 · 2022-08-17 13:34:44 +02:00 · 2022-08-10 00:37:50 +02:00 · 2022-08-10 00:18:52 +02:00 · 2022-08-09 23:35:46 +02:00 · 2022-08-09 19:49:30 +02:00
31 changed files with 1655 additions and 1014 deletions
--- a/README.md
+++ b/README.md
@ -23,7 +23,6 @@ Tools used:
 Fonts used:
 * [Rubik](https://github.com/googlefonts/Rubik)
 * [Commissioner](https://github.com/kosbarts/Commissioner)
 * [Hot August Night](https://www.1001fonts.com/hot-august-night-font.html)
 ### Export Excel spreadsheet to JSON
--- a/biographie.html
+++ b/biographie.html
@ -8,23 +8,24 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="stylesheet" href="styles/main.css" media="screen">
-    <script src="plugins/jquery-3.5.1.min.js"></script>
+    <script src="plugins/jquery-3.6.0.min.js"></script>
    <script src="scripts/menu.js"></script>
 </head>
 <body>
    <header>
        <nav>
            <img src="styles/icons/ginou.svg" class="ginou-icon">
            <div id="hamburger">
                <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
            </div>
            <ul>
                <li class="title">Ginou</li>
                <div class="hidden">
                    <li><a href="index.html">Accueil</a></li>
                    <li class="selected"><a href="biographie.html">Biographie</a></li>
-                    <li><a href="exposition.html">Exposition</a></li>
+                    <li><a href="peinture.html">Peinture</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="divers.html">Divers</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="supplements.html">Suppléments</a></li>
                    <li><a href="informations.html">Informations</a></li>
                </div>
            </ul>
@ -34,7 +35,8 @@
    <article class="main">
        <h1>Biographie</h1>
-        <p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vécu la plus grande partie de sa vie à Dugny-sur-Meuse, village de la vallée de la Meuse où elle trouvera de nombreux sujets d’inspiration.</p>
+        <img src="images/ginou50.jpg" class="bio-img" alt="Ginou, peignant dans les années 50">
        <p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vécu la plus grande partie de sa vie à Dugny-sur-Meuse, village de la vallée de la Meuse où elle trouvera de nombreux sujets d'inspiration.</p>
        <p>Comme l'écrit Ginou en 2016 dans un texte sur sa jeunesse, &laquo;&#8239;je suis née un jour de mars 1936 dans un petit village de la Meuse : Mouilly, le berceau des parents de mon père&#8239;&raquo;. Elle a 4 ans quand la Seconde Guerre Mondiale éclate, et en garde des souvenirs très précis, même 75 ans après. Après avoir passé le certificat d'études avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du petit village isolé dans la forêt meusienne, dans une maison sur les berges du petit ruisseau qui serpente au fond d'une vallée accrochée aux contreforts des côtes de Meuse.</p>
@ -50,7 +52,7 @@
        <p>Hasard de la vie, Ginou était en train de compléter la dernière page de son petit carnet lorsque qu'elle s'est éteinte le 02 avril 2017. Elle laissa également deux tableaux inachevés&#8239;: deux esquisses au fusain représentant une 54ème &laquo;&#8239;Vieille Église&#8239;&raquo; (Église romane de Dugny-sur-Meuse) et un paysage asiatique.</p>
-        <p class="signature">Pour en découvrir plus sur la vie de Ginou, visitez notre section <a href="divers.html">Divers</a>.</p>
+        <p class="signature">Pour en découvrir plus sur la vie de Ginou, visitez notre section <a href="supplements.html">Suppléments</a>.</p>
        <p><img src="images/genevievedugny.jpg" alt="Geneviève Marchal, Dugny"></p>
    </article>
--- a/data.json
+++ b/data.json
--- a/divers.html
+++ b/divers.html
@ -2,157 +2,99 @@
 <html lang="fr">
 <head>
    <meta charset="utf-8">
-    <title>Ginou • divers</title>
+    <title>Ginou • objets</title>
    <meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
    <meta name="author" content="Famille Marchal">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="stylesheet" href="styles/main.css" media="screen">
-    <script src="plugins/jquery-3.5.1.min.js"></script>
+    <link rel="stylesheet" href="styles/fancybox.css" media="screen">
-    <script src="scripts/menu.js"></script>
+    <link rel="stylesheet" href="styles/pagination.css" media="screen">
-    <link  href="plugins/jquery.fancybox.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="plugins/pagination.css" media="screen">
    <link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen">
    <script src="plugins/jquery-3.6.0.min.js"></script>
    <script src="plugins/jquery.fancybox.min.js"></script>
-    <link  href="plugins/chart.min.css" rel="stylesheet">
+    <script src="plugins/pagination.min.js"></script>
-	<script src="plugins/chart.bundle.min.js"></script>
+    <script src="scripts/menu.js"></script>
-	<script src="scripts/divers.js"></script>
+    <script src="scripts/fancybox.js"></script>
-	<script src="scripts/stats.js"></script>
+    <script src="scripts/objets.js"></script>
 </head>
 <body>
    <header>
        <nav>
            <img src="styles/icons/ginou.svg" class="ginou-icon">
            <div id="hamburger">
                <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
            </div>
            <ul>
                <li class="title">Ginou</li>
                <div class="hidden">
                    <li><a href="index.html">Accueil</a></li>
                    <li><a href="biographie.html">Biographie</a></li>
-                    <li><a href="exposition.html">Exposition</a></li>
+                    <li><a href="peinture.html">Peinture</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li class="selected"><a href="divers.html">Divers</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="supplements.html">Suppléments</a></li>
                    <li><a href="informations.html">Informations</a></li>
                </div>
            </ul>
        </nav>
    </header>
-    <article class="divers">
+    <article class="objets">
-		<h1>Divers</h1>
+        <h1>Divers</h1>
        <div class="intro center">
            <p>En plus des peintures consignées dans le petit carnet, Ginou s'est intéressée à d'autres supports, tels que la peinture sur soie ou bois, ou la poésie illustrée.</p>
            <p>Cette section a pour but de présenter quelques objets représentatifs.</p>
            <!--<p>Pour voir un objet en haute résolution ainsi que ses informations, veuillez cliquer sur celui-ci.</p>-->
        </div>
        <h2>Croquis</h2>
-        <p class="center">Pour voir une photo en haute résolution et ses informations, veuillez cliquer sur celle-ci.</p>
+        <p>premiers travaux</p>
        <h2>Petit carnet</h2>
        <p>Ce site est né grâce à ce petit carnet appartenant à Ginou et dans lequel elle a consigné les informations de quasiment l'intégralité de ses tableaux (nous avons retrouvé quatre inédits). Il nous a permis de faire un index complet de ses &oelig;uvres à travers les années.
        </p>
        <div class="gallery">
-            <a data-fancybox="divers" href="photos/divers/normal/carnet.png" data-caption="Couverture du petit carnet qui nous a permis de lister l'intégralité des tableaux.">
+            <a data-fancybox="divers" href="" data-caption="">
-                <img src="photos/divers/mini/carnet.jpg" alt="Couverture du petit carnet qui nous a permis de lister l'intégralité des tableaux.">
+                <img src="" alt="">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/carnetpremierepage.png" data-caption="Première page du petit carnet et les premiers tableaux à l’huile de Ginou.">
                <img src="photos/divers/mini/carnetpremierepage.jpg" alt="Première page du petit carnet et les premiers tableaux à l’huile de Ginou.">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/carnetpage.png" data-caption="Pages du petit carnet dans les années 2001.">
                <img src="photos/divers/mini/carnetpage.jpg" alt="Pages du petit carnet dans les années 2001.">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/carnetdernierepage.png" data-caption="Dernière page du petit carnet et derniers tableaux de Ginou.">
                <img src="photos/divers/mini/carnetdernierepage.jpg" alt="Dernière page du petit carnet et derniers tableaux de Ginou.">
            </a>
        </div>
        <h2>Peinture sur soie</h2>
-		<h2>Atelier</h2>
+        <p>coussins, tableaux</p>
        <p>Voici quelques photos du dernier atelier que Ginou utilisait, chez elle, entre 2011 et 2017.</p>
 		<div class="gallery">
            <a data-fancybox="divers" href="photos/divers/normal/atelier.jpg" data-caption="Atelier dans lequel Ginou peignait (vers 2012).">
                <img src="photos/divers/mini/atelier.jpg" alt="L'atelier dans lequel Ginou peignait (vers 2012).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/atelier2.jpg" data-caption="Trépied et tableau (nº375, Venise, le Cannareggio) dans l’atelier de Ginou (2015).">
                <img src="photos/divers/mini/atelier2.jpg" alt="Trépied et tableau (nº375, Venise, le Cannareggio) dans l’atelier de Ginou (2015).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/palette.jpg" data-caption="La palette de Ginou !">
                <img src="photos/divers/mini/palette.jpg" alt="La palette de Ginou !">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/palettezoom.jpg" data-caption="Zoom sur la palette.">
                <img src="photos/divers/mini/palettezoom.jpg" alt="Zoom sur la palette.">
 			</a>
 		</div>
 		<h2>Expositions</h2>
        <p>Ginou a participé à de nombreuses foires et expositions en Lorraine, principalement dans la Meuse : à Bar-le-Duc, Étain, Verdun et ses alentours, ou encore à Vigneulles-les Hattonchâtel.<br>
        Voici une sélection de quelques photos issues de ces événements.</p>
        <div class="gallery">
-            <a data-fancybox="divers" href="photos/divers/normal/expodugny.jpg" data-caption="Exposition à Dugny-sur-Meuse (1996).">
+            <a data-fancybox="divers" href="" data-caption="">
-                <img src="photos/divers/mini/expodugny.jpg" alt="Exposition à Dugny-sur-Meuse (1996).">
+                <img src="" alt="">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/exposaintjean.jpg" data-caption="Fête du collège Saint-Jean de Verdun (2005).">
                <img src="photos/divers/mini/exposaintjean.jpg" alt="Fête du collège Saint-Jean de Verdun (2005).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/foiredugny.jpg" data-caption="Foire aux puces de Dugny-sur-Meuse (2004).">
                <img src="photos/divers/mini/foiredugny.jpg" alt="Foire aux puces de Dugny-sur-Meuse (2004).">
 			</a>
            <a data-fancybox="divers" href="photos/divers/normal/foirethierville.jpg" data-caption="Foire de Thierville-sur-Meuse (2002).">
                <img src="photos/divers/mini/foirethierville.jpg" alt="Foire de Thierville-sur-Meuse (2002).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/derniereexpo.jpg" data-caption="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017).">
                <img src="photos/divers/mini/derniereexpo.jpg" alt="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017).">
 			</a>
 		</div>
 		<h2>Presse</h2>
        <p>Ginou a eu plusieurs articles à son propos dans le journal local, cependant nous n'en possédons qu'un seul. N'hésitez pas <a href="informations.html">à nous contacter</a> si vous avez un en votre possession.</p>
        <div class="gallery">
            <a data-fancybox="divers" href="photos/divers/normal/ainesdugny.jpg" data-caption="Ginou était engagée dans des &oelig;uvres caritatives, comme le montre cette coupure de presse.">
                <img src="photos/divers/mini/ainesdugny.jpg" alt="Ginou était engagée dans des &oelig;uvres caritatives, comme le montre cette coupure de presse.">
            </a>
        </div>
-		<h2>Autres</h2>
+        <h2>Boîtes</h2>
        <p>boites</p>
        <div class="gallery">
-            <a data-fancybox="divers" href="photos/divers/normal/ginouchloe.jpg" data-caption="Ginou posant à côté d'un de ses tableaux (vers 2011).">
+            <a data-fancybox="divers" href="" data-caption="">
-                <img src="photos/divers/mini/ginouchloe.jpg" alt="Ginou posant à côté d'un de ses tableaux (vers 2011).">
+                <img src="" alt="">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/ginou.jpg" data-caption="Ginou en voyage en Argentine (2012).">
                <img src="photos/divers/mini/ginou.jpg" alt="Ginou en voyage en Argentine (2012).">
            </a>
        </div>
-        <h2>Statistiques</h2>
+        <h2>Cartes</h2>
        <p>
            De 1956 à 2016, soit sur une période de 60 ans, Ginou a peint plus de de 385 tableaux.<br>
            Parmi ceux-ci, elle a le plus souvent aimé travailler à la lumière printanière du mois de mai avec un total de 50 tableaux.<br>
            Son année la plus active fut 1988 où elle réalisa 23 &oelig;uvres. Enfin, le format qu'elle privilégia fut le <em>55x46</em>, utilisé pour 53 toiles.
        </p>
-        <div id="stats">
+        <p>cartes</p>
-            <div class="stat">
+
-                <canvas id="month" width="400" height="200"></canvas>
+        <div class="gallery">
-            </div>
+            <a data-fancybox="divers" href="" data-caption="">
-            <div class="stat">
+                <img src="" alt="">
-                <canvas id="year" width="400" height="200"></canvas>
+            </a>
-            </div>
+        </div>
-            <div class="stat">
+
-                <canvas id="dimension" width="400" height="200"></canvas>
+        <h2>Poésie</h2>
-            </div>
+
        <p>poésie</p>
        <div class="gallery">
            <a data-fancybox="divers" href="" data-caption="">
                <img src="" alt="">
            </a>
        </div>
    </article>
 </body>
--- a/explorer.html
+++ b/explorer.html
@ -8,31 +8,32 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="stylesheet" href="styles/main.css" media="screen">
    <script src="plugins/jquery-3.5.1.min.js"></script>
    <script src="scripts/menu.js"></script>
    <link rel="stylesheet" href="styles/fancybox.css" media="screen">
-    <script src="plugins/jquery-3.5.1.min.js"></script>
+    <link rel="stylesheet" href="styles/pagination.css" media="screen">
-    <link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen">
    <link rel="stylesheet" href="plugins/pagination.css" media="screen">
    <script src="plugins/jquery-3.6.0.min.js"></script>
    <script src="plugins/jquery.fancybox.min.js"></script>
    <script src="plugins/pagination.min.js"></script>
-    <link rel="stylesheet" href="plugins/pagination.css" media="screen">
+    <script src="scripts/menu.js"></script>
-    <link rel="stylesheet" href="styles/pagination.css" media="screen">
+    <script src="scripts/fancybox.js"></script>
    <script src="scripts/explorer.js"></script>
 </head>
 <body>
    <header>
        <nav>
            <img src="styles/icons/ginou.svg" class="ginou-icon">
            <div id="hamburger">
                <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
            </div>
            <ul>
                <li class="title">Ginou</li>
                <div class="hidden">
                    <li><a href="index.html">Accueil</a></li>
                    <li><a href="biographie.html">Biographie</a></li>
-                    <li><a href="exposition.html">Exposition</a></li>
+                    <li><a href="peinture.html">Peinture</a></li>
                    <li class="selected"><a href="explorer.html">Explorer</a></li>
                    <li><a href="divers.html">Divers</a></li>
                    <li class="selected"><a href="explorer.html">Explorer</a></li>
                    <li><a href="supplements.html">Suppléments</a></li>
                    <li><a href="informations.html">Informations</a></li>
                </div>
            </ul>
@ -42,7 +43,7 @@
    <article class="explorer">
        <h1>Explorer</h1>
        <div class="intro" style="text-align:justify;">
-            <p>Cette section permet de générer une <img width="14rem" src="styles/icons/list.svg" alt="liste"> <strong>liste</strong> (aussi visible sous la forme d'une <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> <strong>galerie</strong>) en fonction de différents paramètres, listés ci-dessous. Elle permet d'explorer l'&oelig;uvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo, grâce aux informations du petit carnet (voir la section <a href="divers.html">Divers</a>).</p>
+            <p>Cette section permet de générer une <img width="14rem" src="styles/icons/list.svg" alt="liste"> <strong>liste</strong> (aussi visible sous la forme d'une <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> <strong>galerie</strong>) en fonction de différents paramètres, listés ci-dessous. Elle permet d'explorer l'&oelig;uvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo, grâce aux informations du petit carnet (voir la section <a href="supplements.html">Suppléments</a>).</p>
            <p>En mode <img width="14rem" src="styles/icons/list.svg" alt="liste"> liste, l'<strong>icône <img width="16.5rem" src="styles/icons/eye-black.svg" alt="&oelig;il"> &oelig;il</strong> permet de voir la photo du tableau ; en mode <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> galerie, il faut <strong>cliquer sur les tableaux</strong> pour accéder à leurs informations.</p>
@ -61,16 +62,7 @@
                    <div class="item-cont">
                        <span><input type="checkbox" id="photos" name="photos" value="all">
                        <label for="photos">Tout état</label></span>
-                        <span><input type="checkbox" id="none" name="photo" value="none">
+                        <div class="generated"></div>
                        <label for="none">&#x2606; manquant</label></span>
                        <span><input type="checkbox" id="exist" name="photo" value="exist">
                        <label for="exist">Disponible</label></span>
                        <span><input type="checkbox" id="bad" name="photo" value="bad">
                        <label for="bad">&#x2605; mauvais</label></span>
                        <span><input type="checkbox" id="ok" name="photo" value="ok">
                        <label for="ok">&#x2605;&#x2605; acceptable</label></span>
                        <span><input type="checkbox" id="good" name="photo" value="good">
                        <label for="good">&#x2605;&#x2605;&#x2605; bon</label></span>
                    </div>
                </div>
                <div class="box years">
@ -78,20 +70,7 @@
                    <div class="item-cont">
                        <span><input type="checkbox" id="years" name="years" value="all">
                        <label for="years">Toutes</label></span>
-                        <span><input type="checkbox" id="50s" name="year" value="50s">
+                        <div class="generated"></div>
                        <label for="50s">1956 - 1959</label></span>
                        <span><input type="checkbox" id="60s" name="year" value="60s">
                        <label for="60s">1960 - 1969</label></span>
                        <span><input type="checkbox" id="70s" name="year" value="70s">
                        <label for="70s">1970 - 1979</label></span>
                        <span><input type="checkbox" id="80s" name="year" value="80s">
                        <label for="80s">1980 - 1989</label></span>
                        <span><input type="checkbox" id="90s" name="year" value="90s">
                        <label for="90s">1990 - 1999</label></span>
                        <span><input type="checkbox" id="00s" name="year" value="00s">
                        <label for="00s">2000 - 2009</label></span>
                        <span><input type="checkbox" id="10s" name="year" value="10s">
                        <label for="10s">2010 - 2016</label></span>
                    </div>
                </div>
                <div class="box months">
@ -99,30 +78,7 @@
                    <div class="item-cont">
                        <span><input type="checkbox" id="months" name="months" value="all">
                        <label for="months">Tous</label></span>
-                        <span><input type="checkbox" id="01" name="month" value="01">
+                        <div class="generated"></div>
                        <label for="01">Janvier</label></span>
                        <span><input type="checkbox" id="02" name="month" value="02">
                        <label for="02">Février</label></span>
                        <span><input type="checkbox" id="03" name="month" value="03">
                        <label for="03">Mars</label></span>
                        <span><input type="checkbox" id="04" name="month" value="04">
                        <label for="04">Avril</label></span>
                        <span><input type="checkbox" id="05" name="month" value="05">
                        <label for="05">Mai</label></span>
                        <span><input type="checkbox" id="06" name="month" value="06">
                        <label for="06">Juin</label></span>
                        <span><input type="checkbox" id="07" name="month" value="07">
                        <label for="07">Juillet</label></span>
                        <span><input type="checkbox" id="08" name="month" value="08">
                        <label for="08">Août</label></span>
                        <span><input type="checkbox" id="09" name="month" value="09">
                        <label for="09">Septembre</label></span>
                        <span><input type="checkbox" id="10" name="month" value="10">
                        <label for="10">Octobre</label></span>
                        <span><input type="checkbox" id="11" name="month" value="11">
                        <label for="11">Novembre</label></span>
                        <span><input type="checkbox" id="12" name="month" value="12">
                        <label for="12">Décembre</label></span>
                    </div>
                </div>
                <div class="box genres">
@ -130,6 +86,7 @@
                    <div class="item-cont">
                        <span><input type="checkbox" id="genres" name="genres" value="all">
                        <label for="genres">Tous</label></span>
                        <div class="generated"></div>
                    </div>
                </div>
                <div class="box themes">
@ -137,6 +94,7 @@
                    <div class="item-cont">
                        <span><input type="checkbox" id="themes" name="themes" value="all">
                        <label for="themes">Tous</label></span>
                        <div class="generated"></div>
                    </div>
                </div>
                <div class="box places">
@ -152,7 +110,7 @@
                    <div class="item-cont">
                        <span><input type="checkbox" id="tags" name="tags" value="all">
                        <label for="tags">Tous</label></span>
-                        <span><span class="inline">&#x203B;&nbsp;</span><select name="tag"></select></span>
+                        <span class="first"><span class="inline">&#x203B;&nbsp;</span><select name="tag"></select></span>
                    </div>
                </div>
                <div class="box dimensions">
@ -160,26 +118,7 @@
                    <div class="item-cont">
                        <span><input type="checkbox" id="dimensions" name="dimensions" value="all">
                        <label for="dimensions">Toutes</label></span>
-                        <span><input type="checkbox" id="18" name="dimension" value="18">
+                        <div class="generated"></div>
                        <label for="18">&lt; 20cm</label></span>
                        <span><input type="checkbox" id="20" name="dimension" value="20">
                        <label for="20">20cm - 29cm</label></span>
                        <span><input type="checkbox" id="30" name="dimension" value="30">
                        <label for="30">30cm - 39cm</label></span>
                        <span><input type="checkbox" id="40" name="dimension" value="40">
                        <label for="40">40cm - 49cm</label></span>
                        <span><input type="checkbox" id="50" name="dimension" value="50">
                        <label for="50">50cm - 59cm</label></span>
                        <span><input type="checkbox" id="60" name="dimension" value="60">
                        <label for="60">60cm - 69cm</label></span>
                        <span><input type="checkbox" id="70" name="dimension" value="70">
                        <label for="70">70cm - 79cm</label></span>
                        <span><input type="checkbox" id="80" name="dimension" value="80">
                        <label for="80">80cm - 89cm</label></span>
                        <span><input type="checkbox" id="90" name="dimension" value="90">
                        <label for="90">90cm - 99cm</label></span>
                        <span><input type="checkbox" id="100" name="dimension" value="100">
                        <label for="100">>= 100cm</label></span>
                    </div>
                </div>
                <div class="box help">
@ -187,23 +126,24 @@
                    <div class="item-cont">
                        <span><input type="checkbox" id="helps" name="helps" value="all">
                        <label for="helps">Toute</label></span>
-                        <span><input type="checkbox" id="no" name="help" value="no">
+                        <div class="generated"></div>
                        <label for="no">Non</label></span>
                        <span><input type="checkbox" id="yes" name="help" value="yes">
                        <label for="yes"><img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"> Oui</label></span>
                    </div>
                </div>
            </div>
-            <input type="submit" value="Générer">
+            <div class="button-cont">
                <input type="submit" value="Générer">
                <input type="button" value="Réinitialiser" class="reinit">
            </div>
        </form>
        <p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>
        <div id="style-container">
            <img class="style-select list active" src="styles/icons/list.svg" alt="liste">
            <img class="style-select frame" src="styles/icons/frame.svg" alt="galerie">
            <img class="style-select list" src="styles/icons/list.svg" alt="liste">
        </div>
        <div id="gallery">
-            <div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
+            <div id="pagination"></div>
            <div class="gallery"></div>
            <div id="pagination-sec"></div>
        </div>
        <table>
            <thead>
--- a/images/favicon.png
+++ b/images/favicon.png
--- a/images/ginou50.jpg
+++ b/images/ginou50.jpg
--- a/index.html
+++ b/index.html
@ -8,23 +8,24 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="stylesheet" href="styles/main.css" media="screen">
-    <script src="plugins/jquery-3.5.1.min.js"></script>
+    <script src="plugins/jquery-3.6.0.min.js"></script>
    <script src="scripts/menu.js"></script>
 </head>
 <body>
    <header>
        <nav>
            <img src="styles/icons/ginou.svg" class="ginou-icon">
            <div id="hamburger">
                <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
            </div>
            <ul>
                <li class="title">Ginou</li>
                <div class="hidden">
                    <li class="selected"><a href="index.html">Accueil</a></li>
                    <li><a href="biographie.html">Biographie</a></li>
-                    <li><a href="exposition.html">Exposition</a></li>
+                    <li><a href="peinture.html">Peinture</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="divers.html">Divers</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="supplements.html">Suppléments</a></li>
                    <li><a href="informations.html">Informations</a></li>
                </div>
            </ul>
@ -33,11 +34,13 @@
    <article class="main">
        <h1>L'art de Ginou</h1>
-        <p>Ginou était une artiste peintre autodidacte très appréciée dans son entourage. Elle a réalisé de nombreuses &oelig;uvres, principalement à la <strong>peinture à l’huile</strong>, occasionnellement à l’<strong>aquarelle</strong>, mais aussi par le biais de la <strong>peinture sur soie</strong> et <strong>sur bois</strong> ou bien encore dans les cahiers où elle écrivait des <strong>poèmes illustrés</strong>.</p>
+        <p>Ginou était une artiste peintre autodidacte très appréciée dans son entourage et dans un cercle plus élargi grâce aux expositions de peinture annuelles dans sa région. Elle a réalisé de nombreuses &oelig;uvres, principalement des <strong>peintures à l'huile</strong>, plus rarement des <strong>aquarelles</strong>. Elle a également réalisé de nombreuses <strong>peintures sur soie</strong> et plus occasionnellement <strong>sur bois</strong>. Elle illustrait aussi ses <strong>cahiers de poèmes</strong>.</p>
-        <p>Tout au long de sa vie, Ginou a tenu à jour un petit carnet où elle consignait ses tableaux, en leur attribuant un numéro et un titre et reportait les dimensions et leur destinataires / acheteurs / commanditaires. Dans ce petit carnet, <strong>de 1958 à 2017</strong>, sont référencés 383 tableaux. Cependant 2 tableaux (nº33 et nº49) ont été recouverts par Ginou elle-même. Nous avons aussi retrouvé 4 inédits. Ginou a commencé à prendre en photos certains tableaux qu’elle peignait dans les années 1980 puis plus systématiquement à partir des années 2000. Pour compléter cette base iconographique, nous avons repris en photo haute résolution les tableaux en notre possession. Ainsi, pour le moment, nous pouvons présenter sur ce site <strong>249 des 385 tableaux recensés.</strong></p>
+        <p>Tout au long de sa vie, Ginou a tenu à jour un petit carnet où elle consignait ses tableaux. Elle leur attribuait un numéro et un titre. Elle notait leurs dimensions ainsi que le nom de leur destinataires ou acheteurs. De <strong>1958 à 2017</strong> sont référencés 383 tableaux. Deux d'entre eux (nº33 et nº49) ont été recouverts par Ginou elle-même. Nous avons pour l'instant retrouvé quatre tableaux inédits, non listés dans ce carnet. Ginou a commencé à prendre en photos certains tableaux dans les années 1980 puis plus systématiquement à partir des années 2000. Pour compléter et améliorer cette base iconographique, nous avons photographié en haute résolution les tableaux en notre possession.
        <p>Ce site est conçu pour présenter un aperçu de son talent et pour que tout le monde puisse apprécier son &oelig;uvre. comprend actuellement <strong>249 tableaux</strong> sur les <strong>385 peints à l'huile</strong>.</p>
-        <p>Ce site est conçu pour présenter un aperçu de son talent et pour que tout le monde puisse apprécier son &oelig;uvre.</p>
+        <p>Vous pouvez commencer votre visite par la section <a href="peinture.html">Peinture</a>.</p>
        <p class="signature center">Ses enfants, Denis et Laurence, et ses petits-enfants, Théo, Chloé et Maxime</p>
--- a/informations.html
+++ b/informations.html
@ -8,26 +8,26 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="stylesheet" href="styles/main.css" media="screen">
-    <script src="plugins/jquery-3.5.1.min.js"></script>
+    <script src="plugins/jquery-3.6.0.min.js"></script>
-    <link  href="plugins/chart.min.css" rel="stylesheet">
+	<script src="plugins/chart-3.9.1.min.js"></script>
 	<script src="plugins/chart.bundle.min.js"></script>
    <script src="scripts/menu.js"></script>
-    <script src="scripts/mail.js"></script>
+    <script src="scripts/informations.js"></script>
 </head>
 <body>
    <header>
        <nav>
            <img src="styles/icons/ginou.svg" class="ginou-icon">
            <div id="hamburger">
                <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
            </div>
            <ul>
                <li class="title">Ginou</li>
                <div class="hidden">
                    <li><a href="index.html">Accueil</a></li>
                    <li><a href="biographie.html">Biographie</a></li>
-                    <li><a href="exposition.html">Exposition</a></li>
+                    <li><a href="peinture.html">Peinture</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="divers.html">Divers</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="supplements.html">Suppléments</a></li>
                    <li class="selected"><a href="informations.html">Informations</a></li>
                </div>
            </ul>
@ -44,7 +44,7 @@
        <div class="stat">
            <canvas id="photo"></canvas>
-            <span class="legend-cont"><span class="legend none"></span><span>Pas de photo</span></span>
+            <span class="legend-cont"><span class="legend none"></span><span>Photo manquante</span></span>
            <span class="legend-cont"><span class="legend bad"></span><span>Photo de mauvaise qualité</span></span>
            <span class="legend-cont"><span class="legend ok"></span><span>Photo de qualité acceptable</span></span>
            <span class="legend-cont"><span class="legend good"></span><span>Photo de bonne qualité</span></span>
@ -53,24 +53,27 @@
        <p>Certains noms de famille ont été remplacé par leurs initiales afin de respecter la vie privée des personnes dont Ginou a réalisé un portrait. Si ces personnes ou leur famille nous autorisent à publier le nom de famille complet en nous contactant, nous le feront avec plaisir.</p>
        <h2>Notice d'utilisation</h2>
-        <p>Le site est constitué autour de deux rubriques majeures&#8239;: <em>Exposition</em> et <em>Explorer</em>.<br></p>
+        <p>TODO expliquer le carnet</p>
-        <h4>Exposition</h4>
+        <h4>Peinture</h4>
        <p>Cette rubrique se présente sous la forme d'une galerie de tableaux représentatifs dont nous possédons une photo de qualité correcte. Ceci la rend incomplète, mais c'est le meilleur moyen de découvrir de manière agréable l'&oelig;uvre de Ginou. En cliquant sur la photo d'un tableau, une galerie interactive s'ouvre. Il est alors possible de se déplacer à l'intérieur de cette galerie (avec les flèches de son clavier ou en glissant son doigt sur l'écran de son téléphone ou tablette) tout en visualisant les tableaux en haute résolution. Dans ce mode, au bas du tableau se trouve un cartel avec ses informations essentielles. En appuyant sur le <strong>&#8505;&#xFE0E;</strong> situé en haut à droite du cartel, on accède à une page incluant également les méta-données du tableau. Il est ainsi possible de voir la photo dans sa qualité maximale, par exemple, ou encore son thème, le lieu représenté, etc.</p>
        <h4>Explorer</h4>
        <p>Cette rubrique quant à elle est interactive et permet de visualiser l'ensemble des créations de Ginou. En effet, elle regorge d'options pour pouvoir choisir précisément les tableaux à afficher. Par exemple, il est possible de créer un filtre pour voir tous les tableaux de chiens dont la photo est de bonne qualité réalisés un mois de février&#8239;: il suffit de sélectionner ces options et de cliquer sur le bouton <strong>Générer</strong>. Bien évidemment, il est possible qu'il n'existe pas de tableau réunissant ces critères, ce qui sera alors indiqué.<br>
        Le résultat affiché sera sous la forme d'une liste, mais il est également possible de l'afficher sous forme d'une galerie (comme dans la rubrique Exposition) en cliquant sur le bouton en haut à droite. Dans ce mode, les tableaux n’ayant pas de photo disponible montreront une icône indiquant que la photo est manquante.</p>
        <h4>Divers</h4>
-        <p>Cette page regroupe diverses photos et informations en complément de la biographie&#8239;: une vue de son atelier, des photos d'expositions, des coupures de presse, ainsi que des statistiques intéressantes (on peut remarquer que le printemps l'inspirait&#8239;!). N'hésitez pas à nous contacter si vous avez un document, une photo, des coupures de presse, tout ce qui peut être en relation avec l’art de Ginou.</p>
+        <p>En plus des peintures indexées dans le carnet, Ginou a réalisé d'autres &oelig;uvres. Nous avons bien moins d'informations sur celles-ci, mais nous avons réuni une sélection représentative sur cette page.</p>
        <h4>Explorer</h4>
        <p>Cette rubrique quant à elle est interactive et permet de visualiser l'ensemble des peintures de Ginou. En effet, elle regorge d'options pour pouvoir choisir précisément les tableaux à afficher. Par exemple, il est possible de créer un filtre pour voir tous les tableaux de chiens dont la photo est de bonne qualité réalisés un mois de février&#8239;: il suffit de sélectionner ces options et de cliquer sur le bouton <strong>Générer</strong>. Bien évidemment, il est possible qu'il n'existe pas de tableau réunissant ces critères, ce qui sera alors indiqué.<br>
        Le résultat affiché sera sous la forme d'une liste, mais il est également possible de l'afficher sous forme d'une galerie (comme dans la rubrique Peinture) en cliquant sur le bouton en haut à droite. Dans ce mode, les tableaux n'ayant pas de photo disponible montreront une icône indiquant que la photo est manquante.</p>
        <h4>Suppléments</h4>
        <p>Cette page regroupe diverses photos et informations en complément de la biographie&#8239;: une vue de son atelier, des photos d'expositions, des coupures de presse, ainsi que des statistiques intéressantes (on peut remarquer que le printemps l'inspirait&#8239;!). N'hésitez pas à nous contacter si vous avez un document, une photo, des coupures de presse, tout ce qui peut être en relation avec l'art de Ginou.</p>
        <h2>Informations technique</h2>
-        <p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que des plugins <a href="https://fancyapps.com/fancybox/3/">fancybox 3</a>, <a href="https://www.chartjs.org/">Chart.js</a> et <a href="https://pagination.js.org/">Pagination.js</a>. Les polices de caractères utilisées sont <a href="https://github.com/googlefonts/Rubik">Rubik</a>, <a href="https://github.com/kosbarts/Commissioner">Commissioner</a> et <a href="https://www.1001fonts.com/hot-august-night-font.html">Hot August Night</a>. Emoji "tableau" par <a href="https://openmoji.org/">OpenMoji</a>.</p>
+        <p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que des plugins <a href="https://fancyapps.com/fancybox/3/">fancybox 3</a>, <a href="https://www.chartjs.org/">Chart.js</a> et <a href="https://pagination.js.org/">Pagination.js</a>. Les polices de caractères utilisées sont <a href="https://github.com/googlefonts/Rubik">Rubik</a> et <a href="https://github.com/kosbarts/Commissioner">Commissioner</a>. Emoji "tableau" par <a href="https://openmoji.org/">OpenMoji</a>.</p>
        <p>Le code source est librement disponible <em>via git</em> en <a href="https://git.n700.ovh/keb/ginou">cliquant ici</a>. Cela signifie qu'il est possible d'obtenir le site en local pour son utilisation personnelle, moyennant quelques connaissances techniques.</p>
-        <p>Site réalisé par <a href="https://theo.marchal.dev">Théo</a> et Denis Marchal avec la participation de toute la famille. Dernière mise à jour en février 2021.</p>
+        <p>Site réalisé par <a href="https://theo.marchal.dev">Théo</a> et Denis Marchal avec la participation de toute la famille. Dernière mise à jour en août 2022.</p>
    </article>
 </body>
 </html>
--- a/painting.html
+++ b/painting.html
@ -8,24 +8,25 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="stylesheet" href="styles/main.css" media="screen">
-    <script src="plugins/jquery-3.5.1.min.js"></script>
+    <script src="plugins/jquery-3.6.0.min.js"></script>
    <script src="scripts/menu.js"></script>
    <script src="scripts/painting.js"></script>
 </head>
 <body>
    <header>
        <nav>
            <img src="styles/icons/ginou.svg" class="ginou-icon">
            <div id="hamburger">
                <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
            </div>
            <ul>
                <li class="title">Ginou</li>
                <div class="hidden">
                    <li><a href="index.html">Accueil</a></li>
                    <li><a href="biographie.html">Biographie</a></li>
-                    <li><a href="exposition.html">Exposition</a></li>
+                    <li><a href="peinture.html">Peinture</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="divers.html">Divers</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="supplements.html">Suppléments</a></li>
                    <li><a href="informations.html">Informations</a></li>
                </div>
            </ul>
@ -44,17 +45,17 @@
            <div>
                <ul class="metadata">
-                    <li><span class="title">numéro :</span><span class="content number">&nbsp;</span></li>
+                    <li><span class="title">numéro&#8239;:</span><span class="content number">&#8239;</span></li>
-                    <li><span class="title">date :</span><span class="content date">&nbsp;</span></li>
+                    <li><span class="title">date&#8239;:</span><span class="content date">&#8239;</span></li>
-                    <li><span class="title">format :</span><span class="content dimension">&nbsp;</span></li>
+                    <li><span class="title">format&#8239;:</span><span class="content dimension">&#8239;</span></li>
-                    <li><span class="title">support :</span><span class="content support">&nbsp;</span></li>
+                    <li><span class="title">support&#8239;:</span><span class="content support">&#8239;</span></li>
-                    <li><span class="title">genre :</span><span class="content genre">&nbsp;</span></li>
+                    <li><span class="title">genre&#8239;:</span><span class="content genre">&#8239;</span></li>
-                    <li><span class="title">thème :</span><span class="content theme">&nbsp;</span></li>
+                    <li><span class="title">thème&#8239;:</span><span class="content theme">&#8239;</span></li>
-                    <li><span class="title">lieu :</span><span class="content place">&nbsp;</span></li>
+                    <li><span class="title">lieu&#8239;:</span><span class="content place">&#8239;</span></li>
-                    <li><span class="title">état photo :</span><span class="content photo">&nbsp;</span></li>
+                    <li><span class="title">état photo&#8239;:</span><span class="content photo">&#8239;</span></li>
-                    <li><span class="title">aide requise :</span><span class="content help">&nbsp;</span></li>
+                    <li><span class="title">aide requise&#8239;:</span><span class="content help">&#8239;</span></li>
-                    <li><span class="title">tags :</span><span class="content tag">&nbsp;</span></li>
+                    <li><span class="title">tags&#8239;:</span><span class="content tag">&#8239;</span></li>
-                    <li><span class="title">commentaire :</span><span class="content comment"> </span></li>
+                    <li><span class="title">commentaire&#8239;:</span><span class="content comment"> </span></li>
                    <li><span class="content original"><a href="photos/paintings/original/42.jpg">photo originale <img src="styles/icons/arrow.svg"></a></span></li>
                </ul>
            </div>
--- a/exposition.html
+++ b/exposition.html
@ -2,7 +2,7 @@
 <html lang="fr">
 <head>
    <meta charset="utf-8">
-    <title>Ginou • exposition</title>
+    <title>Ginou • peinture</title>
    <meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
    <meta name="author" content="Famille Marchal">
    <meta name="viewport" content="width=device-width, initial-scale=1">
@ -10,28 +10,30 @@
    <link rel="stylesheet" href="styles/main.css" media="screen">
    <link rel="stylesheet" href="styles/fancybox.css" media="screen">
    <link rel="stylesheet" href="styles/pagination.css" media="screen">
-    <script src="plugins/jquery-3.5.1.min.js"></script>
+    <link rel="stylesheet" href="plugins/pagination.css" media="screen">
-    <script src="scripts/menu.js"></script>
+    <link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen">
-    <link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
+    <script src="plugins/jquery-3.6.0.min.js"></script>
    <script src="plugins/jquery.fancybox.min.js"></script>
    <script src="plugins/pagination.min.js"></script>
-    <link rel="stylesheet" href="plugins/pagination.css" media="screen">
+    <script src="scripts/menu.js"></script>
    <script src="scripts/fancybox.js"></script>
    <script src="scripts/exposition.js"></script>
 </head>
 <body>
    <header>
        <nav>
            <img src="styles/icons/ginou.svg" class="ginou-icon">
            <div id="hamburger">
                <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
            </div>
            <ul>
                <li class="title">Ginou</li>
                <div class="hidden">
                    <li><a href="index.html">Accueil</a></li>
                    <li><a href="biographie.html">Biographie</a></li>
-                    <li class="selected"><a href="exposition.html">Exposition</a></li>
+                    <li class="selected"><a href="peinture.html">Peinture</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="divers.html">Divers</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="supplements.html">Suppléments</a></li>
                    <li><a href="informations.html">Informations</a></li>
                </div>
            </ul>
@ -39,13 +41,14 @@
    </header>
    <article class="exposition">
-        <h1>Exposition</h1>
+        <h1>Peinture</h1>
        <div class="intro center">
-            <p>Cette section présente une sélection de tableaux représentatifs de l'&oelig;uvre de Ginou. La section <a href="explorer.html">Explorer</a> permet de tous les consulter.</p>
+            <p>Cette section présente une sélection de tableaux représentatifs de l'&oelig;uvre de Ginou, regroupés à partir du petit carnet. La section <a href="explorer.html">Explorer</a> permet de tous les consulter.</p>
-            <p>Pour voir un tableau en haute résolution ainsi que ses informations, veuillez cliquer sur celui-ci.</p>
+            <!--<p>Pour voir un tableau en haute résolution ainsi que ses informations, veuillez cliquer sur celui-ci.</p>-->
        </div>
-        <div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
+        <div id="pagination"></div>
        <div class="gallery"></div>
        <div id="pagination-sec"></div>
    </article>
 </body>
 </html>
--- a/2
+++ b/2
--- a/plugins/chart-3.9.1.min.js
+++ b/plugins/chart-3.9.1.min.js
--- a/plugins/chart.bundle.min.js
+++ b/plugins/chart.bundle.min.js
--- a/plugins/chart.min.css
+++ b/plugins/chart.min.css
@ -1 +0,0 @@
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}
--- a/plugins/jquery-3.5.1.min.js
+++ b/plugins/jquery-3.5.1.min.js
--- a/plugins/jquery-3.6.0.min.js
+++ b/plugins/jquery-3.6.0.min.js
--- a/scripts/divers.js
+++ b/scripts/divers.js
@ -5,8 +5,12 @@ jQuery(document).ready(function($)
        infobar: false,
        toolbar: true,
        smallBtn: false,
-        buttons : [ "close" ],
+        buttons: ["arrowLeft", "arrowRight", "close"],
-        arrows: true,
+        arrows: false,
        transitionEffect: "fade",
        baseClass: 'fancybox-custom-layout',
        mobile: {
            preventCaptionOverlap: true,
        },
    });
 });
--- a/scripts/explorer.js
+++ b/scripts/explorer.js
@ -12,6 +12,13 @@ function onSubmit() {
    return true;
 }
 function removeFromArray(array, item)
 {
    index = array.indexOf(item);
    if (index > -1)
        array.splice(index, 1);
 }
 jQuery(document).ready(function($)
 {
    // get URL parameters
@ -25,6 +32,8 @@ jQuery(document).ready(function($)
    paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags'));
    paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos'));
    paramHelp = (urlParams.get('helps') == null ? urlParams.getAll('help') : urlParams.getAll('helps'));
    paramView = (urlParams.get('view'));
    params = { "year": paramYear, "month": paramMonth, "dimension": paramDimension, "genre": paramGenre, "theme": paramTheme, "place": paramPlace, "tag": paramTag, "photo": paramPhoto, "help": paramHelp }
    $.getJSON("data.json", function(data)
    {
@ -33,21 +42,120 @@ jQuery(document).ready(function($)
 /** MENU **/
 /**********/
-        var genres = [];
+        fancyboxInit(data, true);
        var themes = [];
        var places = [];
        var tags = [];
-        function generateMenu()
+        var availableOptions = [];
        var selectedOptions = [];
        // filter data depending of parameters
        function filterData(selectedOptions)
        {
            function CheckItem(name, selectedElements)
            {
                return function(item)
                {
                    if (selectedElements.length == 0)
                        return true;
                    for (elem of selectedElements)
                    {
                        if (elem == "all")
                            return true;
                        if (item[name] == elem)
                            return true;
                    }
                    return false;
                }
            }
            function CheckTag(item)
            {
                for (tag of selectedOptions.tags)
                {
                    if (tag == "all")
                        return true;
                    if (!item.tags.includes(tag))
                        return false;
                }
                return true;
            }
            function CheckDimension(item)
            {
                if (selectedOptions.dimensions.length == 0)
                    return true;
                for (dimension of selectedOptions.dimensions)
                {
                    if (dimension == "all")
                        return true;
                    if (item.dimension.split("x")[0] == dimension)
                        return true;
                }
                return false;
            }
            data = data.filter(CheckTag);
            data = data.filter(CheckDimension);
            data = data.filter(CheckItem("year", selectedOptions.years));
            data = data.filter(CheckItem("photo", selectedOptions.photos));
            data = data.filter(CheckItem("month", selectedOptions.months));
            data = data.filter(CheckItem("genre", selectedOptions.genres));
            data = data.filter(CheckItem("theme", selectedOptions.themes));
            data = data.filter(CheckItem("place", selectedOptions.places));
            data = data.filter(CheckItem("help", selectedOptions.helps));
        }
        // gather data from json to make form
        function gatherData()
        {
            var photos = []; var years = []; var months = []; var genres = [];
            var themes = []; var places = []; var tags = []; var dimensions = []; var helps = [];
            function makeItem(item, array, displayName, min, max)
            {
                if (item >= min && item <= max)
                {
                    if (array.indexOf(displayName) === -1)
                        array.push(displayName);
                }
            }
            for (i of data)
            {
                if (photos.indexOf(i.photo) === -1 && i.photo != "" && i.photo != "—")
                    photos.push(i.photo);
                if (months.indexOf(i.month) === -1 && i.month != "" && i.month != "—")
                    months.push(i.month);
                if (genres.indexOf(i.genre) === -1 && i.genre != "" && i.genre != "—")
                    genres.push(i.genre);
                if (themes.indexOf(i.theme) === -1 && i.theme != "" && i.theme != "—")
                    themes.push(i.theme);
                if (places.indexOf(i.place) === -1 && i.place != "" && i.place != "—")
                    places.push(i.place);
                if (helps.indexOf(i.help) === -1 && i.help != "" && i.help != "—")
                    helps.push(i.help);
                if (i.year != "" && i.year != "—")
                {
                    makeItem(i.year, years, "50s", 1956, 1959);
                    makeItem(i.year, years, "60s", 1960, 1969);
                    makeItem(i.year, years, "70s", 1970, 1979);
                    makeItem(i.year, years, "80s", 1980, 1989);
                    makeItem(i.year, years, "90s", 1990, 1999);
                    makeItem(i.year, years, "00s", 2000, 2009);
                    makeItem(i.year, years, "10s", 2010, 2016);
                }
                if (i.dimension != "" && i.dimension != "—")
                {
                    makeItem(i.dimension.split("x")[0], dimensions, "18", 0, 19);
                    makeItem(i.dimension.split("x")[0], dimensions, "20", 20, 29);
                    makeItem(i.dimension.split("x")[0], dimensions, "30", 30, 39);
                    makeItem(i.dimension.split("x")[0], dimensions, "40", 40, 49);
                    makeItem(i.dimension.split("x")[0], dimensions, "50", 50, 59);
                    makeItem(i.dimension.split("x")[0], dimensions, "60", 60, 69);
                    makeItem(i.dimension.split("x")[0], dimensions, "70", 70, 79);
                    makeItem(i.dimension.split("x")[0], dimensions, "80", 80, 89);
                    makeItem(i.dimension.split("x")[0], dimensions, "90", 90, 99);
                    makeItem(i.dimension.split("x")[0], dimensions, "100", 100, 109);
                }
                if (tags.indexOf(i.tags) === -1 && i.tags != "" && i.tags != "—")
                {
                    splitTags = i.tags.split(", ");
@ -62,145 +170,145 @@ jQuery(document).ready(function($)
            genres.sort();
            themes.sort();
            helps.sort();
            places.sort(Intl.Collator().compare);
            tags.sort(Intl.Collator().compare);
            dimensions.sort(function(a, b) { return a - b; });
            var targetMonths = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
            months.sort(function(a, b) { return targetMonths.indexOf(a) - targetMonths.indexOf(b); });
            var targetPhotos = ["none", "bad", "ok", "good"];
            photos.sort(function(a, b) { return targetPhotos.indexOf(a) - targetPhotos.indexOf(b); });
-            for (genre of genres)
+            return {"photos": photos, "years": years, "months": months, "genres": genres, "themes": themes, "places": places, "tags": tags, "dimensions": dimensions, "helps": helps};
        }
        // gather data from url to check available options
        function gatherURLdata()
        {
            selectedYears = [];
            selectedDimensions = [];
            selectedPhotos = params.photo;
            if (selectedPhotos.includes("exist"))
            {
-                html = '<span><input type="checkbox" id="' + genre + '" name="genre" value="' + genre + '"></input>\n';
+                if (selectedPhotos.indexOf("bad") === -1) selectedPhotos.push("bad");
-                html += '<label for="' + genre + '">' + genre + '</label></span>';
+                if (selectedPhotos.indexOf("ok") === -1) selectedPhotos.push("ok");
-                $(".box.genres .item-cont").append(html);
+                if (selectedPhotos.indexOf("good") === -1) selectedPhotos.push("good");
            }
-
+            selectedMonths = params.month;
-            for (theme of themes)
+            selectedGenres = params.genre;
            selectedThemes = params.theme;
            selectedPlaces = params.place;
            selectedTags = params.tag;
            selectedHelps = params.help;
            for (p of params.year)
            {
-                html = '<span><input type="checkbox" id="' + theme + '" name="theme" value="' + theme + '"></input>\n';
+                if (p == "50s") for (i = 1956; i <= 1959; i++) selectedYears.push(i);
-                html += '<label for="' + theme + '">' + theme + '</label></span>';
+                if (p == "60s") for (i = 1960; i <= 1969; i++) selectedYears.push(i);
-                $(".box.themes .item-cont").append(html);
+                if (p == "70s") for (i = 1970; i <= 1979; i++) selectedYears.push(i);
                if (p == "80s") for (i = 1980; i <= 1989; i++) selectedYears.push(i);
                if (p == "90s") for (i = 1990; i <= 1999; i++) selectedYears.push(i);
                if (p == "00s") for (i = 2000; i <= 2009; i++) selectedYears.push(i);
                if (p == "10s") for (i = 2010; i <= 2016; i++) selectedYears.push(i);
            }
-
+            for (p of params.dimension)
            $(".box.places select").append('<option value="">Aucun</option');
            for (place of places)
                $(".box.places select").append('<option value="' + place + '">' + place + '</option');
            $(".box.tags select").append('<option value="">Aucun</option');
            for (tag of tags)
                $(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
            function URLGeneration()
            {
-                // populate checkboxes depending on URL
+                if (p == "18") for (i = 18; i <= 19; i++) selectedDimensions.push(i);
-                function URLcheckBoxSelector(names, name, urlParam)
+                if (p == "20") for (i = 20; i <= 29; i++) selectedDimensions.push(i);
                if (p == "30") for (i = 30; i <= 39; i++) selectedDimensions.push(i);
                if (p == "40") for (i = 40; i <= 49; i++) selectedDimensions.push(i);
                if (p == "50") for (i = 50; i <= 59; i++) selectedDimensions.push(i);
                if (p == "60") for (i = 60; i <= 69; i++) selectedDimensions.push(i);
                if (p == "70") for (i = 70; i <= 79; i++) selectedDimensions.push(i);
                if (p == "80") for (i = 80; i <= 89; i++) selectedDimensions.push(i);
                if (p == "90") for (i = 90; i <= 99; i++) selectedDimensions.push(i);
                if (p == "100") for (i = 100; i <= 109; i++) selectedDimensions.push(i);
            }
            return {"photos": selectedPhotos, "years": selectedYears, "months": selectedMonths, "genres": selectedGenres, "themes": selectedThemes,
                    "places": selectedPlaces, "tags": selectedTags, "dimensions": selectedDimensions, "helps": selectedHelps};
        }
        var originalData = data;
        var originalAvailableOptions = gatherData();
        selectedOptions = gatherURLdata();
        filterData(selectedOptions);
        $("input.reinit").click(function()
        {
            $('input').prop("disabled", false);
            $('input').prop("checked", false);
            $('select').val("");
            data = originalData;
            availableOptions = originalAvailableOptions;
            params = {};
            updateMenu(availableOptions);
        });
        // menu initial generation
        $.getScript("scripts/explorer_menu.js", function()
        {
            generateMenu(originalAvailableOptions);
            availableOptions = gatherData();
            userActionHandle(availableOptions);
            URLGeneration(originalAvailableOptions);
            updateMenu(availableOptions);
            function handleVisualFilterChanges()
            {
                function makeFilterChanges()
                {
-                    if (urlParam == "all")
+                    selectedOptions = gatherURLdata();
-                    {
+                    data = originalData;
-                        $('input[name="'+names+'"]').prop("checked", true);
+                    filterData(selectedOptions);
-                        $('input[name="'+name+'"]').prop("disabled", true);
+                    availableOptions = [];
-                        $('input[name="'+name+'"]').prop("checked", true);
+                    availableOptions = gatherData();
-                    }
+                    updateMenu(availableOptions);
                    else
                    {
                        for (a of urlParam)
                        {
                            $('input[id="'+a+'"]').prop("checked", true);
                        }
                    }
                }
-                // populate list depending on URL
+                // handle tags
-                function URLlistSelector(selector, name, param, names)
+                function handleTags()
                {
-                    if (param.length >= 1)
+                    $('input[name="tags"]').change(function()
                        $(selector + ' select').parent().remove();
                    for (a of param)
                    {
-                        html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">';
+                        params["tag"] = []; // remove filter
-                        html += '<option value="">Aucun</option>';
+                        if (this.checked)
                        for (i of names)
                        {
-                            if (i == a)
+                            $('select[name="tag"] option[value=""]').prop('selected', true);
-                                html += '<option value="' + i + '" selected>' + i + '</option>';
+                            $('select[name="tag"]').attr('disabled', 'disabled');
-                            else
+                            $(".box.tags span:not(.first) select").parent().remove();
                                html += '<option value="' + i + '">' + i + '</option>';
                        }
-                        html += '</select></span>';
+                        else
-                        $(selector + ' .item-cont').append(html);
+                            $('select[name="tag"]').removeAttr('disabled');
                    }
                    if (!param.includes("all") && param.length >= 1)
                    {
                        html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">';
                        html += '<option value="">Aucun</option>';
                        for (i of names)
                            html += '<option value="' + i + '">' + i + '</option>';
                        html += '</select></span>';
                        $(selector + ' .item-cont').append(html);
                    }
                }
-                URLcheckBoxSelector("years", "year", paramYear)
+                        makeFilterChanges();
                URLcheckBoxSelector("months", "month", paramMonth);
                URLcheckBoxSelector("dimensions", "dimension", paramDimension);
                URLcheckBoxSelector("genres", "genre", paramGenre);
                URLcheckBoxSelector("themes", "theme", paramTheme);
                URLcheckBoxSelector("places", "place", paramPlace);
                URLcheckBoxSelector("tags", "tag", paramTag);
                URLcheckBoxSelector("photos", "photo", paramPhoto);
                URLcheckBoxSelector("helps", "help", paramHelp);
                URLlistSelector(".box.places", "place", paramPlace, places);
                URLlistSelector(".box.tags", "tag", paramTag, tags);
                // URL special case for photos with "exist"
                if (paramPhoto == "exist")
                {
                    $('input[id="exist"]').prop("checked", true);
                    $('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
                    $('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
                    $('input[id="good"]').prop("checked", true); $('input[id="good"]').prop("disabled", true);
                }
            }
            function userActionHandle()
            {
                // if "all" is selected, check all other options and disable them
                function allCheckBoxSelected(names, name)
                {
                    $('input[id="' + names + '"]').click(function()
                    {
                        if ($(this).prop("checked") == true)
                        {
                            $('input[name="' + name + '"]').prop("checked", true);
                            $('input[name="' + name + '"]').prop("disabled", true);
                        }
                        else if ($(this).prop("checked") == false)
                        {
                            $('input[name="' + name + '"]').prop("checked", false);
                            $('input[name="' + name + '"]').prop("disabled", false);
                        }
                    });
                }
-                // for places and tags
+                    $('.box.tags .item-cont').delegate('select[name="tag"]', 'change', function()
                function listOptionSelected(selector, name, names)
                {
                    $(selector).on('change', 'select[name="' + name + '"]', function()
                    {
                        params.tag = []; // collect all tags from all dropdowns
                        $('.box.tags .item-cont select[name="tag"]').each(function()
                        {
                            if (params.tag.indexOf(this.value) === -1 && this.value != "")
                                params.tag.push(this.value);
                        });
                        if (this.value != "")
                        {
                            createNewElem = true; // if we modify an existing element to a value, we don't delete it
-                            $(selector + ' select').each(function()
+                            $('.box.tags select').each(function()
                            {
                                if ($(this).val() == "")
                                    createNewElem = false;
                            });
                            if (createNewElem)
                            {
-                                html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">';
+                                html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="tag">';
-                                html += '<option value="">Aucun</option>';
+                                html += '<option value="">Aucun filtre</option>';
-                                for (a of names)
+                                for (a of originalAvailableOptions.tags)
                                    html += '<option value="' + a + '">' + a + '</option>';
                                html += '</select></span>';
-                                $(selector + " .item-cont").append(html);
+                                $(".box.tags .item-cont").append(html);
                            }
                        }
                        else
@ -208,191 +316,93 @@ jQuery(document).ready(function($)
                            // if the element has no value, we delete it
                            $(this).parent().remove();
                        }
                        makeFilterChanges();
                    });
                }
                handleTags();
                function visualFilterCheckboxItem(name)
                {
                    $('input[name="' + name + 's"]').change(function()
                    {
                        params[name] = []; // remove filter
                        makeFilterChanges();
                    });
                    $('input[name="' + name + '"]').change(function()
                    {
                        if (this.checked)
                        {
                            if (this.id == "exist") // photos special case
                            {
                                params[name].push("bad");
                                params[name].push("ok");
                                params[name].push("good");
                            }
                            params[name].push(this.id);
                        }
                        else
                        {
                            if (this.id == "exist") // photos special case
                            {
                                removeFromArray(params[name], "bad");
                                removeFromArray(params[name], "ok");
                                removeFromArray(params[name], "good");
                            }
                            removeFromArray(params[name], this.id);
                        }
                        makeFilterChanges();
                    });
                }
-                $("input").prop("checked", false); // by default, uncheck all options
+                function visualFilterListItem(name)
                allCheckBoxSelected("years", "year");
                allCheckBoxSelected("months", "month");
                allCheckBoxSelected("dimensions", "dimension");
                allCheckBoxSelected("genres", "genre");
                allCheckBoxSelected("themes", "theme");
                allCheckBoxSelected("places", "place");
                allCheckBoxSelected("tags", "tag");
                allCheckBoxSelected("photos", "photo");
                allCheckBoxSelected("helps", "help");
                listOptionSelected(".box.places", "place", places);
                listOptionSelected(".box.tags", "tag", tags);
                // special case for photos with "exist"
                $('input[id="exist"]').click(function()
                {
-                    if ($(this).prop("checked") == true)
+                    $('input[name="' + name + 's"]').change(function()
                    {
-                        $('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
+                        params[name] = []; // remove filter
-                        $('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
+                        if (this.checked)
-                        $('input[id="good"]').prop("checked", true); $('input[id="good"]').prop("disabled", true);
+                        {
-                    }
+                            $('select[name="' + name + '"] option[value=""]').prop('selected', true);
-                    else
+                            $('select[name="' + name + '"]').attr('disabled', 'disabled');
-                    {
+                        }
-                        $('input[id="bad"]').prop("checked", false); $('input[id="bad"]').prop("disabled", false);
+                        else
-                        $('input[id="ok"]').prop("checked", false); $('input[id="ok"]').prop("disabled", false);
+                            $('select[name="' + name + '"]').removeAttr('disabled');
                        $('input[id="good"]').prop("checked", false); $('input[id="good"]').prop("disabled", false);
                    }
                });
            }
-            // menu configurer show / hide
+                        makeFilterChanges();
-            $("article.explorer h2").click(function()
+                    });
-            {
+
-                if ($(this).hasClass("active"))
+                    $('select[name="' + name + '"]').change(function()
-                {
+                    {
-                    $(this).removeClass("active");
+                        if (this.value == "" && name == "place")
-                    $("form").slideUp(200);
+                            params[name].pop();
                        else
                            params[name].push(this.value);
                        makeFilterChanges();
                    });
                }
                else
                {
                    $(this).addClass("active");
                    $("form").slideDown(200);
                }
            });
-            // menu configurer child on mobile show/hide
+                visualFilterCheckboxItem("photo");
-            if ($(window).width() <= 600)
+                visualFilterCheckboxItem("year");
-            {
+                visualFilterCheckboxItem("month");
-                $("article.explorer .box h3").click(function()
+                visualFilterCheckboxItem("genre");
-                {
+                visualFilterCheckboxItem("theme");
-                    if ($(this).parent().hasClass("active"))
+                visualFilterCheckboxItem("dimension");
-                    {
+                visualFilterCheckboxItem("help");
-                        $(this).parent().removeClass("active");
+                visualFilterListItem("place");
                        $(this).parent().children(".item-cont").slideUp(200);
                    }
                    else
                    {
                        $(this).parent().addClass("active");
                        $(this).parent().children(".item-cont").slideDown(200);
                    }
                });
            }
-
+            handleVisualFilterChanges();
-            userActionHandle();
+        });
            URLGeneration();
        }
 /*********************/
 /** TABLE & GALLERY **/
 /*********************/
        function checkYear(year)
        {
            if (paramYear == "all")                                         return true;
            if (paramYear.includes("50s") && year >= 1950 && year <= 1959)  return true;
            if (paramYear.includes("60s") && year >= 1960 && year <= 1969)  return true;
            if (paramYear.includes("70s") && year >= 1970 && year <= 1979)  return true;
            if (paramYear.includes("80s") && year >= 1980 && year <= 1989)  return true;
            if (paramYear.includes("90s") && year >= 1990 && year <= 1999)  return true;
            if (paramYear.includes("00s") && year >= 2000 && year <= 2009)  return true;
            if (paramYear.includes("10s") && year >= 2010 && year <= 2020)  return true;
            return false;
        }
        function checkMonth(month)
        {
            if (paramMonth == "all") return true;
            if (paramMonth.includes("01") && month == "Janvier")    return true;
            if (paramMonth.includes("02") && month == "Février")    return true;
            if (paramMonth.includes("03") && month == "Mars")       return true;
            if (paramMonth.includes("04") && month == "Avril")      return true;
            if (paramMonth.includes("05") && month == "Mai")        return true;
            if (paramMonth.includes("06") && month == "Juin")       return true;
            if (paramMonth.includes("07") && month == "Juillet")    return true;
            if (paramMonth.includes("08") && month == "Août")       return true;
            if (paramMonth.includes("09") && month == "Septembre")  return true;
            if (paramMonth.includes("10") && month == "Octobre")    return true;
            if (paramMonth.includes("11") && month == "Novembre")   return true;
            if (paramMonth.includes("12") && month == "Décembre")   return true;
            return false;
        }
        function checkDimension(dimension)
        {
            if (paramDimension == "all")                                                                             return true;
            if (paramDimension.includes("18") && dimension.split("x")[0] >= 18 && dimension.split("x")[0] <= 19)     return true;
            if (paramDimension.includes("20") && dimension.split("x")[0] >= 20 && dimension.split("x")[0] <= 29)     return true;
            if (paramDimension.includes("30") && dimension.split("x")[0] >= 30 && dimension.split("x")[0] <= 39)     return true;
            if (paramDimension.includes("40") && dimension.split("x")[0] >= 40 && dimension.split("x")[0] <= 49)     return true;
            if (paramDimension.includes("50") && dimension.split("x")[0] >= 50 && dimension.split("x")[0] <= 59)     return true;
            if (paramDimension.includes("60") && dimension.split("x")[0] >= 60 && dimension.split("x")[0] <= 69)     return true;
            if (paramDimension.includes("70") && dimension.split("x")[0] >= 70 && dimension.split("x")[0] <= 79)     return true;
            if (paramDimension.includes("80") && dimension.split("x")[0] >= 80 && dimension.split("x")[0] <= 89)     return true;
            if (paramDimension.includes("90") && dimension.split("x")[0] >= 90 && dimension.split("x")[0] <= 99)     return true;
            if (paramDimension.includes("100") && dimension.split("x")[0] >= 100 && dimension.split("x")[0] <= 109)  return true;
            return false;
        }
        function checkGenre(genre)
        {
            if (paramGenre == "all")
                return true;
            if (paramGenre.includes(genre))
                return true;
            return false;
        }
        function checkTheme(theme)
        {
            if (paramTheme == "all")
                return true;
            if (paramTheme.includes(theme))
                return true;
            return false;
        }
        function checkPlace(place)
        {
            if (paramPlace == "all")
                return true;
            if (paramPlace.includes(place))
                return true;
            return false;
        }
        function checkTag(tag)
        {
            if (paramTag == "all")
                return true;
            splitTag = tag.split(", ");
            for (t of paramTag)
            {
                if (!splitTag.includes(t))
                    return false;
            }
            return true;
        }
        function checkPhoto(photo)
        {
            if (paramPhoto == "all") return true;
            if (paramPhoto.includes("none") && photo == "none") return true;
            if (paramPhoto.includes("bad") && photo == "bad")   return true;
            if (paramPhoto.includes("ok") && photo == "ok")     return true;
            if (paramPhoto.includes("good") && photo == "good") return true;
            if (paramPhoto.includes("exist") && (photo == "bad" || photo == "ok" || photo == "good")) return true;
            return false;
        }
        function checkHelp(help)
        {
            if (paramHelp == "all") return true;
            if (paramHelp.includes("no") && help == "no")   return true;
            if (paramHelp.includes("yes") && help == "yes") return true;
            return false;
        }
        // gallery vars
-        var pageSize = 14;
+        window.pageSize = 14;
-        var paintingList = [];
+        window.paintingList = [];
        function generateTable()
        {
@ -407,17 +417,6 @@ jQuery(document).ready(function($)
                else
                    res = true;
                // check URL parameters and compute result
                if (paramYear != "")        res = res && checkYear(i.year);
                if (paramMonth != "")       res = res && checkMonth(i.month);
                if (paramDimension != "")   res = res && checkDimension(i.dimension);
                if (paramGenre != "")       res = res && checkGenre(i.genre);
                if (paramTheme != "")       res = res && checkTheme(i.theme);
                if (paramPlace != "")       res = res && checkPlace(i.place);
                if (paramTag != "")         res = res && checkTag(i.tags);
                if (paramPhoto != "")       res = res && checkPhoto(i.photo);
                if (paramHelp != "")        res = res && checkHelp(i.help);
                if (!res)
                    continue;
@ -451,7 +450,7 @@ jQuery(document).ready(function($)
                else
                    result += '<td>&nbsp;</td>'
-                result += '<td><a data-fancybox="exposition-list" href="';
+                result += '<td><a class="list-preview" data-fancybox="exposition-list" href="';
                if (i.photo == "none")
                    result += 'images/unknown.jpg';
                else
@ -461,6 +460,7 @@ jQuery(document).ready(function($)
                $("table").append(result);
                // gallery
                paintingList.push(i.number);
                if (paintingList.length % (pageSize + 1) == 0)
@ -469,8 +469,9 @@ jQuery(document).ready(function($)
                paintingHtml = '<div class="gallery-item ';
                if (canDisplay)
                        paintingHtml += 'active">';
-                    else
+                else
-                        paintingHtml += 'inactive">';
+                    paintingHtml += 'inactive">';
                if (i.photo == "none")
                {
                    paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
@ -481,6 +482,7 @@ jQuery(document).ready(function($)
                    paintingHtml += '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
                    paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>'
                }
                paintingHtml += '<span class="item-title">' + i.title;
                if (i.year != '—')
                    paintingHtml += ' (' + i.year + ')';
@ -498,7 +500,6 @@ jQuery(document).ready(function($)
        if (urlParams.get('page') != "")
            targetPage = urlParams.get('page');
        generateMenu();
        var res = generateTable();
        if (res) // display table or no result depending of computed result
@ -508,70 +509,15 @@ jQuery(document).ready(function($)
            $("form").slideUp(200);
            $("article.explorer p.result").css("display", "block");
            // pagination configuration
            window.currentPage = 0;
            window.previousArray = []
            $.getScript("scripts/pagination.js", function() {
                paginationInit(data, paintingList, true);
-            // pagination
+                if (targetPage > 0)
-            function getPageRange()
+                    $("#pagination").pagination('go', targetPage);
-            {
+            });
                if (window.innerWidth >= 600)
                    return 6;
                else if (window.innerWidth < 600 && window.innerWidth > 450)
                    return 4;
                else
                    return 1;
            }
            var currentPage = 0;
            var previousArray = []
            var options = 
            {
                dataSource: paintingList,
                pageSize: pageSize,
                pageRange: getPageRange(),
                className: 'paginationjs-theme-ginou',
                hideWhenLessThanOnePage: true,
                callback: function (response, pagination)
                {
                    currentPage = pagination.pageNumber;
                    urlParams = new URLSearchParams(window.location.search)
                    if (urlParams.get('page') == undefined)
                    {
                        window.history.replaceState('', '', window.location.pathname + window.location.search + '&page=' + currentPage + window.location.hash);
                    }
                    else
                    {
                        trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
                        window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
                    }
                    if (previousArray.length > 0)
                    {
                        for (i of previousArray)
                            $('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
                    }
                    previousArray = response;
                    $.each(response, function(index, item)
                    {
                        $('[data-fancybox="exposition"][data-fancybox-index="'+item+'"]').parent().removeClass("inactive").addClass("active");
                        idx = item-1;
                        if (item >= 1000)
                            idx = item - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
                        if (data[idx].photo != "none")
                            $('[data-fancybox="exposition"][data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg");
                        else
                            $('[data-fancybox="exposition"][data-fancybox-index="'+item+'"] img').attr("src", "images/unknown.jpg");
                    });
                }
            };
            $('#pagination').pagination(options);
            if (targetPage > 0)
                $("#pagination").pagination('go', targetPage);
        }
        else
        {
@ -579,90 +525,38 @@ jQuery(document).ready(function($)
            $("article.explorer p.result").css("display", "none");
        }
-        // on mobile, show only the first item slided down
+        function setGallery()
        if ($(window).width() <= 600)
        {
            $("article.explorer .container .box").each(function()
            {
                if (!$(this).hasClass('active'))
                {
                    $(this).children(".item-cont").slideUp(200);
                }
            });
        }
        // change display: gallery/table
        $(".style-select.frame").click(function()
        {
            $("table").hide();
            $("#gallery").show();
-        })
+            $(".style-select.frame").addClass('active');
-        $(".style-select.list").click(function()
+            $(".style-select.list").removeClass('active');
            window.localStorage.setItem('explorer-view', 'gallery');
        }
        function setTable()
        {
            $("#gallery").hide();
            $("table").show();
-        })
+            $(".style-select.frame").removeClass('active');
            $(".style-select.list").addClass('active');
            window.localStorage.setItem('explorer-view', 'table');
        }
-
+        if (paramView == "gallery")
-        // fancybox configuration
+            setGallery();
-        $('[data-fancybox="exposition"], [data-fancybox="exposition-list"]').fancybox(
+        else if (paramView == "table")
            setTable();
        else
        {
-            infobar: false,
+            if (res)
            toolbar: true,
            smallBtn: false,
            buttons: ["arrowLeft", "arrowRight", "close"],
            arrows: false,
            transitionEffect: "fade",
            baseClass: 'fancybox-custom-layout',
            mobile: {
                preventCaptionOverlap: true,
            },
            caption: function(instance, item)
            {
-                var idx = item.opts.fancyboxIndex - 1; // painting number
+                explorerView = window.localStorage.getItem('explorer-view');
-                if (item.opts.fancyboxIndex >= 1000)
+                if (explorerView == "gallery")
-                    idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
+                    setGallery();
-                
+                else if (explorerView == "table")
-                function generateCartel()
+                    setTable();
                {
                    cartel = '<div id="info"><span class="info">';
                    cartel += '<a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>';
                    cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
                    if (data[idx].month != '—')
                        cartel += data[idx].month + '&nbsp;';
                    if (data[idx].year != '—')
                        cartel += data[idx].year;
                    cartel += '&nbsp;</span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
                    if (data[idx].dimension != '—')
                        cartel += ' (' + data[idx].dimension + ')';
                    cartel += '</span>';
                    if (data[idx].comment != '—')
                        cartel += '<span class="comment">' + data[idx].comment + '</span>';
                    cartel += '</div>';
                    return cartel;
                }
                return generateCartel();
            },
            beforeShow : function(instance, current)
            {
                if (current.opts.fancyboxIndex > previousArray[previousArray.length - 1])
                    $('#pagination').pagination('next');
                if (current.opts.fancyboxIndex < previousArray[0])
                    $('#pagination').pagination('previous');
            },
            afterClose : function(instance)
            {
                // after closing, changing the URL again. I guess there's no better way except by changing fancybox code...
                // (apparently fancybox changes back to the original url it had when starting)
                urlParams = new URLSearchParams(window.location.search)
                trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
                window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
            }
-        });
+        }
    });
 });
--- a/scripts/explorer_menu.js
+++ b/scripts/explorer_menu.js
@ -0,0 +1,355 @@
 function generateMenu(availableOptions)
 {
    function createPhotoName(photo)
    {
        if (photo == "none") return "&#x2606; manquant";
        if (photo == "bad") return "&#x2605; mauvais";
        if (photo == "ok") return "&#x2605;&#x2605; acceptable";
        if (photo == "good") return "&#x2605;&#x2605;&#x2605; bon";
    }
    function createYearName(year)
    {
        if (year == "50s") return "1956 - 1959";
        if (year == "60s") return "1960 - 1969";
        if (year == "70s") return "1970 - 1979";
        if (year == "80s") return "1980 - 1989";
        if (year == "90s") return "1990 - 1999";
        if (year == "00s") return "2000 - 2009";
        if (year == "10s") return "2010 - 2016";
    }
    function createDimensionName(dimension)
    {
        if (dimension == "18") return "< 20cm";
        if (dimension == "20") return "20cm - 29cm";
        if (dimension == "30") return "30cm - 39cm";
        if (dimension == "40") return "40cm - 49cm";
        if (dimension == "50") return "50cm - 59cm";
        if (dimension == "60") return "60cm - 69cm";
        if (dimension == "70") return "70cm - 79cm";
        if (dimension == "80") return "80cm - 89cm";
        if (dimension == "90") return "90cm - 99cm";
        if (dimension == "100") return ">= 100cm";
    }
    function createHelpName(photo)
    {
        if (photo == "yes") return '<img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"> Oui';
        if (photo == "no") return "Non";
    }
    hasExist = false;
    for (photo of availableOptions.photos)
    {
        if (!hasExist && (photo == "bad" || photo == "ok" || photo == "good"))
        {
            html = '<span><input type="checkbox" id="exist" name="photo" value="exist"></input>\n';
            html += '<label for="exist">Disponible</label></span>';
            $(".box.photos .item-cont .generated").append(html);
            hasExist = true;
        }
        html = '<span><input type="checkbox" id="' + photo + '" name="photo" value="' + photo + '"></input>\n';
        html += '<label for="' + photo + '">' + createPhotoName(photo) + '</label></span>';
        $(".box.photos .item-cont .generated").append(html);
    }
    for (year of availableOptions.years)
    {
        html = '<span><input type="checkbox" id="' + year + '" name="year" value="' + year + '"></input>\n';
        html += '<label for="' + year + '">' + createYearName(year) + '</label></span>';
        $(".box.years .item-cont .generated").append(html);
    }
    for (month of availableOptions.months)
    {
        html = '<span><input type="checkbox" id="' + month + '" name="month" value="' + month + '"></input>\n';
        html += '<label for="' + month + '">' + month + '</label></span>';
        $(".box.months .item-cont .generated").append(html);
    }
    for (genre of availableOptions.genres)
    {
        html = '<span><input type="checkbox" id="' + genre + '" name="genre" value="' + genre + '"></input>\n';
        html += '<label for="' + genre + '">' + genre + '</label></span>';
        $(".box.genres .item-cont .generated").append(html);
    }
    for (theme of availableOptions.themes)
    {
        html = '<span><input type="checkbox" id="' + theme + '" name="theme" value="' + theme + '"></input>\n';
        html += '<label for="' + theme + '">' + theme + '</label></span>';
        $(".box.themes .item-cont .generated").append(html);
    }
    for (dimension of availableOptions.dimensions)
    {
        html = '<span><input type="checkbox" id="' + dimension + '" name="dimension" value="' + dimension + '"></input>\n';
        html += '<label for="' + dimension + '">' + createDimensionName(dimension) + '</label></span>';
        $(".box.dimensions .item-cont .generated").append(html);
    }
    for (help of availableOptions.helps)
    {
        html = '<span><input type="checkbox" id="' + help + '" name="help" value="' + help + '"></input>\n';
        html += '<label for="' + help + '">' + createHelpName(help) + '</label></span>';
        $(".box.help .item-cont .generated").append(html);
    }
    $(".box.places select").append('<option value="">Aucun filtre</option');
    for (place of availableOptions.places)
        $(".box.places select").append('<option value="' + place + '">' + place + '</option');
    $(".box.tags select").append('<option value="">Aucun filtre</option');
    for (tag of availableOptions.tags)
        $(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
 }
 function updateMenu(availableOptions)
 {
    function checkItem(name, array)
    {
        $('.' + name + ' .item-cont span input').each(function()
        {
            if (!array.includes($(this).prop("value")))
            {
                if ($(this).prop("value") != "all" && $(this).prop("value") != "exist")
                    $(this).parent().addClass("filter");
                if ($(this).prop("value") == "exist") // special case for "exist" in photos
                {
                    if (array.includes("none") && !array.includes("bad") && !array.includes("ok") && !array.includes("good"))
                        $(this).parent().addClass("filter");
                    else
                        $(this).parent().removeClass("filter");
                }
            }
            else
                $(this).parent().removeClass("filter");
        });
    }
    function checkListItem(name, array)
    {
        $('.' + name + ' select option').each(function()
        {
            if (!array.includes($(this).prop("value")))
            {
                if ($(this).prop("value") != "")
                {
                    $(this).hide();
                    $(this).attr('disabled', 'disabled'); // for iOS
                }
            }
            else
            {
                $(this).show();
                $(this).removeAttr('disabled'); // for iOS
            }
        });
    }
    checkItem("photos", availableOptions.photos);
    checkItem("years", availableOptions.years);
    checkItem("months", availableOptions.months);
    checkItem("genres", availableOptions.genres);
    checkItem("themes", availableOptions.themes);
    checkItem("dimensions", availableOptions.dimensions);
    checkItem("help", availableOptions.helps);
    checkListItem("places", availableOptions.places);
    checkListItem("tags", availableOptions.tags);
 }
 function URLGeneration(availableOptions)
 {
    // populate checkboxes depending on URL
    function URLcheckBoxSelector(names, name, urlParam)
    {
        if (urlParam == "all")
        {
            $('input[name="'+names+'"]').prop("checked", true);
            $('input[name="'+name+'"]').prop("disabled", true);
            $('input[name="'+name+'"]').prop("checked", true);
        }
        else
        {
            for (a of urlParam)
            {
                $('input[id="'+a+'"]').prop("checked", true);
            }
        }
    }
    // populate list depending on URL
    function URLlistSelector(selector, name, param, names)
    {
        if (param.length >= 1)
            $(selector + ' select').parent().remove();
        for (a of param)
        {
            html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">';
            html += '<option value="">Aucun filtre</option>';
            for (i of names)
            {
                if (i == a)
                    html += '<option value="' + i + '" selected>' + i + '</option>';
                else
                    html += '<option value="' + i + '">' + i + '</option>';
            }
            html += '</select></span>';
            $(selector + ' .item-cont').append(html);
        }
        if (!param.includes("all") && param.length >= 1 && name != "place")
        {
            html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">';
            html += '<option value="">Aucun filtre</option>';
            for (i of names)
                html += '<option value="' + i + '">' + i + '</option>';
            html += '</select></span>';
            $(selector + ' .item-cont').append(html);
        }
    }
    URLcheckBoxSelector("years", "year", paramYear)
    URLcheckBoxSelector("months", "month", paramMonth);
    URLcheckBoxSelector("dimensions", "dimension", paramDimension);
    URLcheckBoxSelector("genres", "genre", paramGenre);
    URLcheckBoxSelector("themes", "theme", paramTheme);
    URLcheckBoxSelector("places", "place", paramPlace);
    URLcheckBoxSelector("tags", "tag", paramTag);
    URLcheckBoxSelector("photos", "photo", paramPhoto);
    URLcheckBoxSelector("helps", "help", paramHelp);
    URLlistSelector(".box.places", "place", paramPlace, availableOptions.places);
    URLlistSelector(".box.tags", "tag", paramTag, availableOptions.tags);
    // URL special case for photos with "exist"
    if (paramPhoto.includes("exist"))
    {
        $('input[id="exist"]').prop("checked", true);
        $('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
        $('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
        $('input[id="good"]').prop("checked", true); $('input[id="good"]').prop("disabled", true);
    }
 }
 function userActionHandle(availableOptions)
 {
    // if "all" is selected, check all other options and disable them
    function allCheckBoxSelected(names, name)
    {
        $('input[id="' + names + '"]').click(function()
        {
            if ($(this).prop("checked") == true)
            {
                $('input[name="' + name + '"]').prop("checked", true);
                $('input[name="' + name + '"]').prop("disabled", true);
            }
            else if ($(this).prop("checked") == false)
            {
                $('input[name="' + name + '"]').prop("checked", false);
                $('input[name="' + name + '"]').prop("disabled", false);
            }
        });
    }
    $("input").prop("checked", false); // by default, uncheck all options
    allCheckBoxSelected("years", "year");
    allCheckBoxSelected("months", "month");
    allCheckBoxSelected("dimensions", "dimension");
    allCheckBoxSelected("genres", "genre");
    allCheckBoxSelected("themes", "theme");
    allCheckBoxSelected("places", "place");
    allCheckBoxSelected("tags", "tag");
    allCheckBoxSelected("photos", "photo");
    allCheckBoxSelected("helps", "help");
    // special case for photos with "exist"
    $('input[id="exist"]').click(function()
    {
        if ($(this).prop("checked") == true)
        {
            $('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
            $('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
            $('input[id="good"]').prop("checked", true); $('input[id="good"]').prop("disabled", true);
        }
        else
        {
            $('input[id="bad"]').prop("checked", false); $('input[id="bad"]').prop("disabled", false);
            $('input[id="ok"]').prop("checked", false); $('input[id="ok"]').prop("disabled", false);
            $('input[id="good"]').prop("checked", false); $('input[id="good"]').prop("disabled", false);
        }
    });
    // menu configurer show / hide
    $("article.explorer h2").click(function()
    {
        if ($(this).hasClass("active"))
        {
            $(this).removeClass("active");
            $("form").slideUp(200);
        }
        else
        {
            $(this).addClass("active");
            $("form").slideDown(200);
        }
    });
    // menu configurer child on mobile show/hide
    if ($(window).width() <= 600)
    {
        $("article.explorer .box h3").click(function()
        {
            if ($(this).parent().hasClass("active"))
            {
                $(this).parent().removeClass("active");
                $(this).parent().children(".item-cont").slideUp(200);
            }
            else
            {
                $(this).parent().addClass("active");
                $(this).parent().children(".item-cont").slideDown(200);
            }
        });
    }
    // on mobile, show only the first item slided down
    if ($(window).width() <= 600)
    {
        $("article.explorer .container .box").each(function()
        {
            if (!$(this).hasClass('active'))
            {
                $(this).children(".item-cont").slideUp(200);
            }
        });
    }
    // change display: gallery/table
    $(".style-select.frame").click(function()
    {
        $("table").hide();
        $("#gallery").show();
        $(".style-select.frame").addClass('active');
        $(".style-select.list").removeClass('active');
        window.localStorage.setItem('explorer-view', 'gallery');
    });
    $(".style-select.list").click(function()
    {
        $("#gallery").hide();
        $("table").show();
        $(".style-select.frame").removeClass('active');
        $(".style-select.list").addClass('active');
        window.localStorage.setItem('explorer-view', 'table');
    });
 }
--- a/scripts/exposition.js
+++ b/scripts/exposition.js
@ -2,7 +2,9 @@ jQuery(document).ready(function($)
 {
    $.getJSON("data.json", function(data)
    {
-        var pageSize = 14;
+        fancyboxInit(data, false);
        window.pageSize = 14;
        var paintingList = [];
        canDisplay = true;
@ -18,12 +20,12 @@ jQuery(document).ready(function($)
                if (canDisplay)
                {
                    paintingHtml += 'active"><a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
-                    paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>';
+                    paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>';
                }
                else
                {
                    paintingHtml += 'inactive"><a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
-                    paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>';
+                    paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>';
                }
                paintingHtml += '<span class="item-title">' + i.title;
                if (i.year != '—')
@ -38,110 +40,15 @@ jQuery(document).ready(function($)
        if (urlParams.get('page') != "")
            targetPage = urlParams.get('page');
-        function getPageRange()
+        // pagination configuration
-        {
+        window.currentPage = 0;
-            if (window.innerWidth >= 600)
+        window.previousArray = [];
-                return null;
+        $.getScript("scripts/pagination.js", function() {
-            else if (window.innerWidth < 600 && window.innerWidth > 450)
+            paginationInit(data, paintingList, false);
                return 4;
            else
                return 1;
        }
        var currentPage = 0;
        var previousArray = []
        var options = 
        {
            dataSource: paintingList,
            pageSize: pageSize,
            pageRange: getPageRange(),
            className: 'paginationjs-theme-ginou',
            hideWhenLessThanOnePage: true,
            callback: function (response, pagination)
            {
                currentPage = pagination.pageNumber;
                window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
-                if (previousArray.length > 0)
+            if (targetPage > 0)
-                {
+                $("#pagination").pagination('go', targetPage);
                    for (i of previousArray)
                        $('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
                }
-                previousArray = response;
+        });
                $.each(response, function(index, item)
                {
                    $('[data-fancybox-index="'+item+'"]').parent().removeClass("inactive").addClass("active");
                    $('[data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg");
                });
            }
        };
        $('#pagination').pagination(options);
        if (targetPage > 0)
            $("#pagination").pagination('go', targetPage);
        $('[data-fancybox="exposition"]').fancybox(
            {
                selector: '.gallery a',
                infobar: false,
                toolbar: true,
                smallBtn: false,
                buttons: ["arrowLeft", "arrowRight", "close"],
                arrows: false,
                transitionEffect: "fade",
                baseClass: 'fancybox-custom-layout',
                mobile: {
                    preventCaptionOverlap: true,
                },
                caption: function(instance, item)
                {
                    var idx = item.opts.fancyboxIndex - 1; // painting number
                    if (item.opts.fancyboxIndex >= 1000)
                        idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
                    function generateCartel()
                    {
                        cartel = '<div id="info"><span class="info">';
                        cartel += '<a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>';
                        cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
                        if (data[idx].month != '—')
                            cartel += data[idx].month + '&nbsp;';
                        if (data[idx].year != '—')
                            cartel += data[idx].year;
                        cartel += '&nbsp;</span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
                        if (data[idx].dimension != '—')
                            cartel += ' (' + data[idx].dimension + ')';
                        cartel += '</span>';
                        if (data[idx].comment != '—')
                            cartel += '<span class="comment">' + data[idx].comment + '</span>';
                        cartel += '</div>';
                        return cartel;
                    }
                    return generateCartel();
                },
                beforeShow : function(instance, current)
                {
                    if (current.opts.fancyboxIndex > previousArray[previousArray.length - 1])
                        $('#pagination').pagination('next');
                    if (current.opts.fancyboxIndex < previousArray[0])
                        $('#pagination').pagination('previous');
                },
                afterClose : function(instance)
                {
                    // after closing, changing the URL again. I guess there's no better way except by changing fancybox code...
                    // (apparently fancybox changes back to the original url it had when starting)
                    window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
                }
            });
    });
 });
--- a/scripts/fancybox.js
+++ b/scripts/fancybox.js
@ -0,0 +1,96 @@
 function fancyboxInit(data, explorer)
 {
    $('[data-fancybox="exposition"]').fancybox(
    {
        selector: '.gallery a',
        infobar: false,
        toolbar: true,
        smallBtn: false,
        buttons: ["arrowLeft", "arrowRight", "close"],
        arrows: false,
        transitionEffect: "fade",
        baseClass: 'fancybox-custom-layout',
        mobile: {
            preventCaptionOverlap: true,
        },
        caption: function(instance, item) { return caption(item, data); },
        beforeShow : function(instance, current) { return beforeShow(instance, current); },
        afterClose : function(instance) { return afterClose(instance); }
    });
    $('[data-fancybox="exposition-list"]').fancybox(
    {
        selector: 'a.list-preview',
        infobar: false,
        toolbar: true,
        smallBtn: false,
        buttons: ["arrowLeft", "arrowRight", "close"],
        arrows: false,
        transitionEffect: "fade",
        baseClass: 'fancybox-custom-layout',
        mobile: {
            preventCaptionOverlap: true,
        },
        caption: function(instance, item) { return caption(item, data); },
        beforeShow : function(instance, current) { return beforeShow(instance, current); },
        afterClose : function(instance) { return afterClose(instance); }
    });
    function caption(item, data)
    {
        var idx = 0; // search the index of the painting of filtered data
        for (i = 0; i < data.length; i++)
        {
            if (data[i].number == item.opts.fancyboxIndex)
                idx = i;
        }
        function generateCartel()
        {
            cartel = '<div id="info"><span class="info">';
            cartel += '<a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>';
            cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
            if (data[idx].month != '—')
                cartel += data[idx].month + '&nbsp;';
            if (data[idx].year != '—')
                cartel += data[idx].year;
            cartel += '&nbsp;</span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
            if (data[idx].dimension != '—')
                cartel += ' (' + data[idx].dimension + ')';
            cartel += '</span>';
            if (data[idx].comment != '—')
                cartel += '<span class="comment">' + data[idx].comment + '</span>';
            cartel += '</div>';
            return cartel;
        }
        return generateCartel();
    }
    function beforeShow(instance, current)
    {
        if (current.opts.fancyboxIndex > previousArray[previousArray.length - 1])
            $('#pagination').pagination('next');
        if (current.opts.fancyboxIndex < previousArray[0])
            $('#pagination').pagination('previous');
    }
    function afterClose(instance)
    {
        // after closing, changing the URL again. I guess there's no better way except by changing fancybox code...
        // (apparently fancybox changes back to the original url it had when starting)
        if (explorer)
        {
            urlParams = new URLSearchParams(window.location.search)
            trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
            window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
        }
        else
            window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
    }
 }
--- a/scripts/informations.js
+++ b/scripts/informations.js
@ -50,8 +50,11 @@ jQuery(document).ready(function($)
            gatherYear(tens, 2010, 2020);
        }
-        var canvasDimension = document.getElementById("photo").getContext('2d');
+        Chart.defaults.font.family = "'Rubik', Helvetica";
-        var chartDimension = new Chart(canvasDimension, {
+        Chart.defaults.color = "#000000";
        var canvasPhoto = document.getElementById("photo").getContext('2d');
        var chartPhoto = new Chart(canvasPhoto, {
            type: 'bar',
            data: {
                labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
@ -83,36 +86,60 @@ jQuery(document).ready(function($)
                }]
            },
            options: {
-                tooltips: {
+                plugins: {
-                    mode: 'index',
+                    tooltip: {
-                    intersect: false
+                        mode: 'index',
                        intersect: false,
                        titleFont: {
                            size: 14
                        },
                        bodyFont: {
                            size: 14
                        },
                    },
                    legend: {
                        display: false,
                        position: "bottom",
                    },
                },
                responsive: true,
                scales: {
-                    yAxes: [{
+                    y: {
                        ticks: {
                            font: {
                                size: 14
                            },
                            beginAtZero: true
                        }, gridLines: {
                            display: true
                        },
-                        scaleLabel: {
+                        grid: {
                            lineWidth: 0
                        },
                        title: {
                            display: true,
-                            labelString: 'Tableaux'
+                            text: 'Tableaux',
                            font: {
                                size: 16
                            }
                        },
                        stacked: true,
-                    }],
+                    },
-                    xAxes: [{
+                    x: {
-                        gridLines: {
+                        ticks: {
-                            display: false
+                            font: {
                                size: 14
                            },
                        },
                        grid: {
                            lineWidth: 0
                        },
                        stacked: true,
-                    }]
+                    },
                },
-                legend: {
+                animation: {
-                    display: false,
+                    duration: 0
-                    position: "bottom",
+                },
-                }
+                responsiveAnimationDuration: 0,
-            }
+            },
        });
    });
 });
--- a/scripts/pagination.js
+++ b/scripts/pagination.js
@ -0,0 +1,84 @@
 function paginationInit(data, paintingList, explorer)
 {
    function getPageRange()
    {
        if (window.innerWidth >= 600)
            return explorer ? 6 : null;
        else if (window.innerWidth < 600 && window.innerWidth > 450)
            return 4;
        else
            return 1;
    }
    var options = 
    {
        dataSource: paintingList,
        pageSize: pageSize,
        pageRange: getPageRange(),
        className: 'paginationjs-theme-ginou',
        hideWhenLessThanOnePage: true,
        callback: function (response, pagination)
        {
            currentPage = pagination.pageNumber;
            // fix to have two synced pagination bars
            var paginationClone = $("#pagination > *").clone(true);
            $("#pagination-sec").empty();
            paginationClone.appendTo("#pagination-sec");
            // url handling
            if (explorer)
            {
                urlParams = new URLSearchParams(window.location.search)
                if (urlParams.get('page') == undefined)
                {
                    window.history.replaceState('', '', window.location.pathname + window.location.search + '&page=' + currentPage + window.location.hash);
                }
                else
                {
                    trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
                    window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
                }
            }
            else
            {
                window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
            }
            if (previousArray.length > 0)
            {
                for (i of previousArray)
                    $('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
            }
            previousArray = response;
            infoArray = []
            for (a of response)
            {
                for (d of data)
                {
                    if (a == d.number)
                        infoArray.push({"number": d.number, "photo": d.photo});
                }
            }
            $.each(response, function(index, item)
            {
                for (i of infoArray)
                {
                    if (i.number == item)
                    {
                        $('[data-fancybox="exposition"][data-fancybox-index="' + item + '"]').parent().removeClass("inactive").addClass("active");
                        if (i.photo != "none")
                            $('[data-fancybox="exposition"][data-fancybox-index="' + item + '"] img').attr("src", "photos/paintings/mini/" + item + ".jpg");
                        else
                            $('[data-fancybox="exposition"][data-fancybox-index="' + item + '"] img').attr("src", "images/unknown.jpg");
                    }
                }
            });
        }
    };
    $('#pagination').pagination(options);
 }
--- a/scripts/painting.js
+++ b/scripts/painting.js
@ -2,14 +2,17 @@ jQuery(document).ready(function($)
 {
    const urlParams = new URLSearchParams(window.location.search);
    const pageId = urlParams.get('number');
    if (pageId > 1000)
        i = pageId - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
    else
        i = pageId - 1; // index is 0
    $.getJSON("data.json", function(data)
    {
-        if (!data[i]) // the number specified in URL does not exist
+        var idx = 0; // search the index of the painting of filtered data
        for (i = 0; i < data.length; i++)
        {
            if (data[i].number == pageId)
                idx = i;
        }
        if (!data[idx]) // the number specified in URL does not exist
        {
            $(".container").css("display", "none");
            $("#info").css("display", "none");
@ -18,75 +21,85 @@ jQuery(document).ready(function($)
        function GetNumber()
        {
-            if (data[i].number > 1000)
+            if (data[idx].number > 1000)
                return "Inédit";
-            return data[i].number;
+            return data[idx].number;
        }
        // page title
        $("head title").append(GetNumber());
        // photo
-        if (data[i].photo != "none")
+        if (data[idx].photo != "none")
-            $(".photo img").attr("src", "photos/paintings/normal/" + data[i].number + ".jpg");
+            $(".photo img").attr("src", "photos/paintings/normal/" + data[idx].number + ".jpg");
        else
            $(".photo img").attr("src", "images/unknown.jpg");
-        $(".photo img").attr("alt", "Tableau " + data[i].number);
+        $(".photo img").attr("alt", "Tableau " + data[idx].number);
        // metadata
        $(".metadata .content.number").append(GetNumber());
-        if (data[i].month != "—")
+        if (data[idx].month != "—")
-            $(".metadata .content.date").append(data[i].month + " " + data[i].year);
+            $(".metadata .content.date").append(data[idx].month + " " + data[idx].year);
        else
-            $(".metadata .content.date").append(data[i].year);
+            $(".metadata .content.date").append(data[idx].year);
-        $(".metadata .content.dimension").append(data[i].dimension);
+        $(".metadata .content.dimension").append(data[idx].dimension);
-        $(".metadata .content.support").append(data[i].support);
+        $(".metadata .content.support").append(data[idx].support);
-        $(".metadata .content.genre").append(data[i].genre);
+        $(".metadata .content.genre").append('<a href="explorer.html?genre='+ data[idx].genre +'">' + data[idx].genre + '</a>');
-        $(".metadata .content.theme").append(data[i].theme);
+        $(".metadata .content.theme").append('<a href="explorer.html?theme='+ data[idx].theme +'">' + data[idx].theme + '</a>');
-        $(".metadata .content.place").append(data[i].place);
+        $(".metadata .content.place").append('<a href="explorer.html?place='+ data[idx].place +'">' + data[idx].place + '</a>');
-        if (data[i].photo == "none") photoState = "aucune";
+        if (data[idx].photo == "none") photoState = "aucune";
-        if (data[i].photo == "bad") photoState = "mauvais";
+        if (data[idx].photo == "bad") photoState = "mauvais";
-        if (data[i].photo == "ok") photoState = "acceptable";
+        if (data[idx].photo == "ok") photoState = "acceptable";
-        if (data[i].photo == "good") photoState = "bon";
+        if (data[idx].photo == "good") photoState = "bon";
-        $(".metadata .content.photo").append(photoState);
+        $(".metadata .content.photo").append('<a href="explorer.html?photo='+ data[idx].photo +'">' + photoState + '</a>');
-        if (data[i].help == "yes")
+        if (data[idx].help == "yes")
-            $(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>');
+            $(".metadata .content.help").append('<a class="metadata-help" href="informations.html">oui (!)</a>');
        else
            $(".metadata .content.help").append("non");
-        if (data[i].tags != "—")
+        // split tags to have a link to each one of them
-            $(".metadata .content.tag").append(data[i].tags);
+        if (data[idx].tags != "—")
        {
            var splitTags = data[idx].tags.split(", ");
            splitTags.forEach(function(tag, idx, array)
            {
                $(".metadata .content.tag").append('<a href="explorer.html?tag='+ tag +'">' + tag + '</a>');
                if (idx != array.length - 1)
                    $(".metadata .content.tag").append(', ');
            });
        }
        else 
            $(".metadata .content.tag").parent().css("display", "none");
-        if (data[i].comment != "—")
+        if (data[idx].comment != "—")
-            $(".metadata .content.comment").append(data[i].comment);
+            $(".metadata .content.comment").append(data[idx].comment);
        else 
            $(".metadata .content.comment").parent().css("display", "none");
-        if (data[i].photo != "none")
+        if (data[idx].photo != "none")
-            $(".metadata .content.original a").attr("href", "photos/paintings/original/" + data[i].number + ".jpg");
+            $(".metadata .content.original a").attr("href", "photos/paintings/original/" + data[idx].number + ".jpg");
        else
            $(".metadata .content.original").parent().css("display", "none");
        // cartel
-        $("#info .title").append(data[i].title);
+        $("#info .title").append(data[idx].title);
-        if (data[i].month != "—")
+        if (data[idx].month != "—")
-            $("#info .year").append(data[i].month + " " + data[i].year);
+            $("#info .year").append(data[idx].month + " " + data[idx].year);
        else
-            $("#info .year").append(data[i].year);
+            $("#info .year").append(data[idx].year);
-            format = data[i].paint + " sur " + data[i].support.toLowerCase();
+            format = data[idx].paint + " sur " + data[idx].support.toLowerCase();
-        if (data[i].dimension != "—")
+        if (data[idx].dimension != "—")
-            format += " (" + data[i].dimension + ")";
+            format += " (" + data[idx].dimension + ")";
        $("#info .format").append(format);
-        if (data[i].comment != "—")
+        if (data[idx].comment != "—")
-            $("#info .comment").prepend(data[i].comment);
+            $("#info .comment").prepend(data[idx].comment);
        else
        $("#info .comment").css("display", "none");
    });
--- a/scripts/stats.js
+++ b/scripts/stats.js
@ -1,116 +1,172 @@
 jQuery(document).ready(function($)
 {
-    var canvasMonth = document.getElementById("month").getContext('2d');
+    document.fonts.ready.then(function() {
-    var chartMonth = new Chart(canvasMonth, {
+        Chart.defaults.font.family = "'Rubik', Helvetica";
-        type: 'bar',
+        Chart.defaults.color = "#000000";
        data: {
            labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
            datasets: [{
                label: 'nombre de tableaux',
                data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
                backgroundColor: '#2589BD',
                borderColor: '#187795',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }, gridLines: {
                        display: false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Tableaux'
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display: false
                    }
                }]
            },
            legend: {
                display: false
            }
        }
    });
-    var canvasYear = document.getElementById("year").getContext('2d');
+        var canvasMonth = document.getElementById("month").getContext('2d');
-    var chartYear = new Chart(canvasYear, {
+        var chartMonth = new Chart(canvasMonth, {
-        type: 'bar',
+            type: 'bar',
-        data: {
+            data: {
-            labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
+                labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
-            datasets: [{
+                datasets: [{
-                label: 'nombre de tableaux',
+                    label: 'nombre de tableaux',
-                data: [24, 16, 7, 57, 117, 112, 52],
+                    data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
-                backgroundColor: '#2589BD',
+                    backgroundColor: '#2589BD',
                borderColor: '#187795',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }, gridLines: {
                        display: false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Tableaux'
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display: false
                    }
                }]
            },
-            legend: {
+            options: {
-                display: false
+                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        titleFont: {
                            size: 13
                        },
                        bodyFont: {
                            size: 13
                        },
                    },
                    legend: {
                        display: false,
                        position: "bottom",
                    },
                },
                scales: {
                    y: {
                        ticks: {
                            beginAtZero: true
                        },
                        grid: {
                            lineWidth: 0
                        },
                        title: {
                            display: true,
                            text: 'Tableaux'
                        }
                    },
                    xAxes: {
                        grid: {
                            lineWidth: 0
                        },
                    }
                },
                animation: {
                    duration: 0
                },
                responsiveAnimationDuration: 0
            }
-        }
+        });
    });
-    var canvasDimension = document.getElementById("dimension").getContext('2d');
+        var canvasYear = document.getElementById("year").getContext('2d');
-    var chartDimension = new Chart(canvasDimension, {
+        var chartYear = new Chart(canvasYear, {
-        type: 'bar',
+            type: 'bar',
-        data: {
+            data: {
-            labels: ["Allégorique", "Animal domestique", "Animalier", "Campagne", "Forêt", "Marine", "Montagne", "Métier", "Personne", "Urbain", "Végétal"],
+                labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
-            datasets: [{
+                datasets: [{
-                label: 'nombre de tableaux',
+                    label: 'nombre de tableaux',
-                data: [2, 11, 67, 126, 3, 10, 5, 10, 46, 39, 39],
+                    data: [24, 16, 7, 57, 117, 112, 52],
-                backgroundColor: '#2589BD',
+                    backgroundColor: '#2589BD',
                borderColor: '#187795',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }, gridLines: {
                        display: false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Tableaux'
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display: false
                    }
                }]
            },
-            legend: {
+            options: {
-                display: false
+                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        titleFont: {
                            size: 13
                        },
                        bodyFont: {
                            size: 13
                        },
                    },
                    legend: {
                        display: false,
                        position: "bottom",
                    },
                },
                scales: {
                    y: {
                        ticks: {
                            beginAtZero: true
                        },
                        grid: {
                            lineWidth: 0
                        },
                        title: {
                            display: true,
                            text: 'Tableaux'
                        }
                    },
                    x: {
                        grid: {
                            lineWidth: 0
                        },
                    }
                },
                animation: {
                    duration: 0
                },
                responsiveAnimationDuration: 0
            }
-        }
+        });
        var canvasDimension = document.getElementById("dimension").getContext('2d');
        var chartDimension = new Chart(canvasDimension, {
            type: 'bar',
            data: {
                labels: ["Histoire", "Nature morte", "Paysage", "Portrait", "Scène"],
                datasets: [{
                    label: 'nombre de tableaux',
                    data: [2, 42, 173, 59, 107],
                    backgroundColor: '#2589BD',
                }]
            },
            options: {
                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        titleFont: {
                            size: 13
                        },
                        bodyFont: {
                            size: 13
                        },
                    },
                    legend: {
                        display: false,
                        position: "bottom",
                    },
                },
                responsive: true,
                scales: {
                    y: {
                        ticks: {
                            beginAtZero: true
                        },
                        grid: {
                            lineWidth: 0
                        },
                        title: {
                            display: true,
                            text: 'Tableaux'
                        },
                        stacked: true,
                    },
                    x: {
                        grid: {
                            lineWidth: 0
                        },
                        stacked: true,
                    }
                },
                animation: {
                    duration: 0
                },
                responsiveAnimationDuration: 0
            }
        });
    });
 });
--- a/styles/fonts/hot-august-night.medium.ttf
+++ b/styles/fonts/hot-august-night.medium.ttf
--- a/styles/icons/ginou.svg
+++ b/styles/icons/ginou.svg
@ -0,0 +1,22 @@
 <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="svg52" sodipodi:docname="ginou.svg" inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)" viewBox="1.82 1.52 289.15 146.13">
  <metadata id="metadata58">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
        <dc:title/>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs id="defs56"/>
  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1017" id="namedview54" showgrid="false" inkscape:zoom="2.8284271" inkscape:cx="105.70332" inkscape:cy="30.086436" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg52"/>
  <g id="cvpage1_top" width="2115px" height="1531px" transform="matrix(0.21874614,0,0,0.21874614,-81.303809,-83.352205)">
    <path d="m 617.834,445.367 c -3.87,-7.793 -10.141,-14.66 -19.11,-20.929 -8.969,-6.269 -20.055,-11.096 -33.785,-14.709 -13.73,-3.613 -26.663,-2.011 -39.415,4.884 -12.752,6.894 -28.229,19.654 -47.169,38.888 -18.94,19.233 -34.745,39.475 -48.166,61.688 -13.422,22.214 -24.569,45.435 -33.974,70.769 -9.404,25.333 -13.637,49.503 -12.902,73.659 0.735,24.157 5.068,43.206 13.206,58.055 8.138,14.849 18.882,27.613 32.744,38.9 13.863,11.288 29.771,19.647 48.482,25.475 18.712,5.828 31.831,9.896 39.984,12.398 8.153,2.502 13.306,7.141 15.704,14.139 2.399,6.997 10.031,8.334 23.261,4.074 13.23,-4.26 24.341,-8.935 33.863,-14.247 9.521,-5.312 18.39,-8.413 27.028,-9.451 8.639,-1.037 16.261,-2.259 23.229,-3.723 6.968,-1.464 12.768,-5.758 17.676,-13.086 4.908,-7.329 2.908,-13.947 -6.096,-20.169 -9.004,-6.222 -13.945,-14.692 -15.058,-25.813 -1.113,-11.121 0.223,-26.909 4.071,-48.114 3.849,-21.206 5.286,-36.532 4.379,-46.708 -0.907,-10.177 -2.377,-18.628 -4.479,-25.759 -2.102,-7.13 -6.046,-10.795 -12.021,-11.171 -5.975,-0.375 -16.626,1.299 -32.461,5.103 -15.834,3.804 -30.427,5.902 -44.474,6.395 -14.047,0.493 -23.925,3.744 -30.106,9.91 -6.181,6.166 -10.766,12.509 -13.974,19.329 -3.209,6.821 -5.444,13.969 -6.813,21.783 -1.369,7.814 0.142,13.414 4.605,17.066 4.462,3.651 10.057,5.861 17.051,6.733 6.994,0.871 13.443,0.73 19.653,-0.43 6.21,-1.161 14.083,-1.666 23.995,-1.541 9.911,0.125 18.349,-0.888 25.714,-3.088 7.366,-2.2 10.528,1.828 9.637,12.277 -0.891,10.448 -3.377,19.781 -7.579,28.441 -4.202,8.66 -9.423,14.891 -15.913,18.99 -6.49,4.098 -14.791,6.577 -25.298,7.556 -10.508,0.978 -23.009,0.492 -38.101,-1.48 -15.091,-1.972 -29.882,-8.103 -45.076,-18.684 -15.194,-10.581 -25.126,-20.122 -30.269,-29.077 -5.143,-8.955 -8.133,-18.46 -9.111,-28.967 -0.979,-10.507 -0.091,-24.184 2.706,-41.682 2.796,-17.497 7.019,-32.622 12.869,-46.094 5.85,-13.473 13.72,-25.468 23.984,-36.556 10.265,-11.088 18.865,-20.137 26.208,-27.575 7.344,-7.439 16.92,-12.711 29.186,-16.066 12.266,-3.355 24.344,-6.811 36.809,-10.534 12.464,-3.723 19.421,-4.144 21.202,-1.281 1.78,2.862 7.102,5.04 16.219,6.637 9.117,1.597 15.121,-0.498 18.3,-6.385 3.179,-5.886 4.832,-11.955 5.038,-18.497 0.207,-6.541 -1.583,-13.541 -5.453,-21.333" fill="#187795" fill-rule="evenodd" stroke="none" id="path37"/>
    <path d="m 800.121,526.53 c 1.747,-8.066 1.543,-13.141 -0.621,-15.468 -2.165,-2.326 -8.674,-2.261 -19.837,0.198 -11.163,2.459 -23.869,8.973 -38.725,19.854 -14.856,10.881 -23.504,21.095 -26.356,31.128 -2.853,10.033 -2.451,17.409 1.225,22.48 3.675,5.072 5.628,14.604 5.95,29.052 0.322,14.448 -1.593,30.37 -5.838,48.524 -4.245,18.154 -5.978,36.059 -5.283,54.566 0.696,18.508 1.512,34.398 2.488,48.427 0.976,14.03 3.878,22.191 8.844,24.873 4.966,2.681 11.864,1.508 21.024,-3.576 9.159,-5.084 14.943,-12.699 17.625,-23.21 2.683,-10.511 5.892,-25.734 9.781,-46.395 3.888,-20.662 6.886,-40.521 9.136,-60.524 2.25,-20.003 4.933,-39.279 8.176,-58.745 3.243,-19.467 5.644,-33.929 7.319,-44.076 1.674,-10.146 3.345,-19.041 5.092,-27.108" fill="#187795" fill-rule="evenodd" stroke="none" id="path39"/>
    <path d="m 986.156,456.14 c -5.209,-0.912 -15.415,-1.782 -31.102,-2.651 -15.688,-0.868 -25.343,1.111 -29.427,6.034 -4.084,4.922 -7.426,12.4 -10.186,22.79 -2.759,10.389 -5.464,19.372 -8.241,27.376 -2.778,8.003 -7.82,25.935 -15.367,54.648 -7.546,28.712 -12.633,46.62 -15.503,54.573 -2.869,7.955 -5.493,15.821 -7.995,23.973 -2.502,8.153 -7.023,18.243 -13.778,30.752 -6.755,12.509 -11.426,21.589 -14.237,27.674 -2.811,6.085 -3.149,11.008 -1.03,15.004 2.119,3.995 4.358,8.337 6.822,13.232 2.465,4.895 5.448,8.826 9.09,11.981 3.642,3.155 9.081,5.976 16.575,8.598 7.494,2.621 14.753,4.22 22.122,4.873 7.369,0.654 13.846,-0.49 19.74,-3.484 5.894,-2.995 10.221,-12.726 13.187,-29.657 2.965,-16.931 5.283,-35.405 7.064,-56.302 1.782,-20.896 5.44,-38.415 11.15,-53.388 5.711,-14.974 9.376,-26.918 11.172,-36.403 1.795,-9.484 6.363,-12.355 13.919,-8.75 7.557,3.606 14.672,9.769 21.684,18.783 7.012,9.013 12.151,14.109 15.66,15.529 13.6,15.075 5.642,43.191 3.087,61.077 -3.51,22.339 -5.178,40.468 -5.082,55.251 0.095,14.782 3.056,25.199 9.023,31.748 5.967,6.549 16.061,8.055 30.763,4.59 14.701,-3.466 24.398,-8.208 29.553,-14.453 5.154,-6.245 9.988,-11.757 14.73,-16.799 4.742,-5.042 11.376,-18.401 20.218,-40.712 8.841,-22.312 15.504,-41.392 20.306,-58.151 4.803,-16.759 7.985,-32.213 9.699,-47.1 1.714,-14.886 3.593,-26.235 5.727,-34.586 2.134,-8.351 4.538,-17.96 7.327,-29.284 2.789,-11.324 4.644,-23.783 5.652,-37.969 1.008,-14.187 1.275,-28.431 0.811,-43.412 -0.463,-14.981 -0.976,-24.773 -1.565,-29.843 -0.588,-5.07 -2.202,-8.958 -4.917,-11.85 -2.715,-2.892 -9.125,-2.247 -19.536,1.964 -10.41,4.212 -17.967,9.181 -23.031,15.146 -5.064,5.964 -8.18,11.895 -9.497,18.074 -1.318,6.179 -2.956,11.792 -4.995,17.106 -2.038,5.314 -2.789,11.755 -2.289,19.628 0.5,7.873 0.518,16.005 0.054,24.783 -0.463,8.778 -1.818,19.882 -4.129,33.84 -2.311,13.959 -5.402,30.855 -9.42,51.494 -6.865,39.492 -12.7,52.661 -16.296,22.319 -0.868,-8.072 -3.211,-14.907 -7.14,-20.83 -3.929,-5.923 -10.394,-12.431 -19.701,-19.834 -9.308,-7.402 -16.229,-13.924 -21.093,-19.877 -4.863,-5.953 -8.809,-14.117 -12.024,-24.882 -3.215,-10.765 -3.991,-20.931 -2.365,-30.982 1.627,-10.051 0.804,-15.833 -2.507,-17.621 -3.311,-1.788 -7.473,-3.107 -12.682,-4.02" fill="#187795" fill-rule="evenodd" stroke="none" id="path41"/>
    <path d="m 746.58,499.577 c 4.168,1.486 8.476,0.078 13.129,-4.291 4.653,-4.369 9.502,-11.273 14.777,-21.041 5.275,-9.768 11.237,-17.005 18.17,-22.055 6.932,-5.05 11.689,-9.016 14.495,-12.089 2.806,-3.072 4.437,-8.166 4.97,-15.525 0.533,-7.359 0.784,-13.011 0.767,-17.227 -0.018,-4.215 -4.086,-8.092 -12.397,-11.816 -8.312,-3.724 -15.899,-5.58 -23.121,-5.657 -7.223,-0.077 -13.859,2.874 -20.223,8.996 -6.364,6.121 -11.12,10.088 -14.495,12.089 -3.374,2.001 -5.181,5.693 -5.507,11.252 -0.326,5.559 -0.132,11.078 0.59,16.821 0.722,5.742 0.667,14.488 -0.168,26.654 -0.835,12.166 -0.578,20.334 0.783,24.892 1.362,4.559 4.062,7.511 8.23,8.997" fill="#187795" fill-rule="evenodd" stroke="none" id="path43"/>
    <path d="m 1543.368,587.308 c 0.691,-10.08 1.691,-24.393 3.045,-43.62 1.354,-19.226 2.902,-34.709 4.717,-47.184 1.814,-12.476 1.908,-21.244 0.285,-26.722 -1.623,-5.478 -5.901,-7.715 -13.039,-6.818 -7.137,0.898 -13.321,2.896 -18.847,6.089 -5.526,3.193 -10.32,10.351 -14.61,21.815 -4.29,11.464 -8.844,25.482 -13.877,42.722 -5.033,17.24 -8.037,31.398 -9.156,43.149 -1.119,11.75 -3.196,25.481 -6.331,41.845 -3.135,16.365 -4.716,31.755 -4.82,46.906 -0.103,15.15 1.002,27.637 3.369,38.056 2.366,10.419 4.679,19.381 7.048,27.313 2.369,7.932 11.545,14.225 27.963,19.177 16.418,4.953 29.539,7.806 39.987,8.697 10.449,0.89 21.168,-0.051 32.669,-2.869 11.501,-2.818 22.914,-5.473 34.782,-8.092 11.869,-2.619 20.572,-6.274 26.525,-11.137 5.953,-4.864 10.941,-12.381 15.201,-22.911 4.261,-10.529 7.082,-21.769 8.598,-34.256 1.516,-12.487 4.039,-28.761 7.689,-49.599 3.65,-20.838 6.231,-36.978 7.867,-49.188 1.635,-12.211 3.116,-24.627 4.514,-37.841 1.398,-13.214 1.976,-24.841 1.762,-35.434 -0.214,-10.594 -1.735,-23.03 -4.633,-37.9 -2.899,-14.871 -6.568,-23.118 -11.181,-25.134 -4.614,-2.017 -10.92,-1.941 -19.22,0.229 -8.3,2.171 -13.798,8.484 -16.757,19.242 -2.958,10.757 -5.269,23.201 -7.042,37.925 -1.774,14.723 -2.497,28.953 -2.203,43.368 0.294,14.414 -0.762,30.552 -3.22,49.183 -2.458,18.63 -4.442,35.196 -6.047,50.486 -1.604,15.291 -4.037,25.812 -7.415,32.066 -3.377,6.255 -6.356,10.912 -9.079,14.193 -2.722,3.282 -7.911,5.585 -15.814,7.02 -7.903,1.435 -15.209,1.668 -22.266,0.712 -7.057,-0.956 -12.158,-5.701 -15.547,-14.459 -3.388,-8.758 -5.378,-18.421 -6.065,-29.449 -0.687,-11.028 -0.835,-22.347 -0.452,-34.495 0.383,-12.148 0.908,-23.004 1.6,-33.085" fill="#187795" fill-rule="evenodd" stroke="none" id="path45"/>
    <path d="m 1195.972,614.631 c 0.244,-13.649 0.919,-23.495 2.06,-30.007 1.141,-6.512 1.944,-13.156 2.448,-20.249 0.335,-4.717 9.962,-34.82 13.645,-41.639 12.22,-22.199 11.035,-19.897 20.619,-42.764 3.973,-7.358 8.007,-15.042 12.293,-23.419 0.085,-0.165 0.171,-0.329 0.259,-0.492 4.388,-8.125 13.41,-14.075 27.477,-18.126 14.348,-4.131 25.075,-5.3 32.69,-3.564 10.819,2.923 20.143,8.675 30.5,12.935 8.76,4.018 13.862,7.635 20.517,7.19 6.656,-0.445 15.983,0.763 28.425,3.68 6.857,1.608 12.217,3.457 16.139,5.575 11.95,10.104 11.405,16.81 18.729,29.682 4.043,5.272 5.426,18.17 7.924,24.983 2.498,6.814 3.042,14.186 1.658,22.467 -1.858,12.147 -2.993,24.363 -5.186,36.453 -0.966,4.596 -2.794,9.369 -5.547,14.467 -4.733,10.302 -6.056,15.1 -9.233,25.998 -3.087,11.876 -10.75,28.624 -15.875,39.874 -1.717,3.77 -3.471,7.314 -5.272,10.648 -3.573,6.617 -7.331,12.41 -11.348,17.508 -6.041,7.667 -12.815,16.773 -20.644,27.751 -7.829,10.978 -17.05,19.459 -28.102,25.845 -11.052,6.387 -22.785,10.494 -35.757,12.517 -12.633,1.97 -20.714,1.907 -24.605,-0.193 -0.104,-0.057 -0.206,-0.115 -0.304,-0.174 -3.764,-2.27 -8.427,-6.529 -14.21,-12.978 -5.783,-6.45 -11.82,-12.031 -18.398,-17.008 -6.578,-4.978 -12.669,-11.749 -18.562,-20.634 -5.894,-8.885 -9.881,-17.187 -12.151,-25.303 -2.269,-8.116 -4.555,-16.777 -6.964,-26.394 -2.41,-9.617 -3.468,-20.979 -3.225,-34.629 m 152.179,-90.914 c -2.284,-1.233 -15.975,-2.646 -19.198,-2.384 -9.929,1.543 -8.101,6.117 -18.064,7.539 -5.438,0.39 -10.564,2.147 -15.623,5.355 -5.058,3.208 -9.579,7.497 -13.777,13.071 -5.113,7.352 -10.033,14.686 -14.341,22.552 -3.703,6.858 -6.435,13.453 -8.302,20.032 -2.105,7.417 -2.349,15.176 -0.745,23.645 1.603,8.469 4.056,16.175 7.473,23.485 3.418,7.311 6.061,11.871 8.055,13.898 1.994,2.027 4.423,6.124 7.403,12.485 2.377,5.075 5.882,8.842 10.63,11.406 7.806,3.838 15.926,4.656 24.48,5.433 7.108,0.037 13.312,-1.138 18.908,-3.581 5.596,-2.443 10.561,-7.768 15.13,-16.23 4.57,-8.461 7.989,-16.942 10.421,-25.845 2.021,-7.4 4.849,-14.441 8.581,-21.352 5.236,-9.206 8.661,-17.825 10.804,-28.297 0.718,-7.928 0.271,-15.48 -1.363,-23.014 -1.633,-7.535 -2.39,-17.363 -6.308,-20.667 -9.587,-14.051 -6.409,-8.319 -24.164,-17.531" fill="#187795" fill-rule="evenodd" stroke="none" id="path47"/>
    <path d="m 516.693,948.759 c -18.555,11.586 -31.766,20.77 -40.263,27.99 -8.496,7.22 -16.074,11.919 -23.093,14.321 -4.327,1.48 -8.904,2.132 -13.815,1.956 -3.057,-0.109 -6.243,-0.539 -9.58,-1.288 -3.959,-0.889 -8.458,-1.424 -13.549,-1.606 -6.096,-0.218 -13.041,0.07 -20.921,0.862 -2.719,0.273 -5.078,0.374 -7.078,0.303 -5.703,-0.204 -8.485,-1.815 -8.376,-4.858 0.056,-1.563 0.874,-3.504 2.452,-5.827 5.725,-8.428 22.768,-18.773 51.939,-31.526 29.172,-12.754 58.458,-27.287 89.254,-44.293 30.795,-17.006 61.275,-28.488 92.892,-34.992 31.616,-6.505 70.636,-14.89 118.916,-25.555 48.28,-10.665 95.595,-18.428 144.198,-23.658 48.602,-5.23 88.959,-10.011 122.993,-14.569 34.034,-4.559 68.888,-6.404 106.222,-5.622 27.918,0.584 55.931,1.381 84.784,2.413 9.732,0.348 19.559,0.723 29.51,1.125 1.329,0.054 2.655,0.105 3.979,0.152 37.971,1.358 73.716,0.076 108.827,-3.899 15.973,-1.808 30.446,-2.876 43.558,-3.845 16.714,-1.233 31.216,-2.304 43.794,-4.535 14.329,-2.543 22.78,-2.894 37,-3.485 8.053,-0.335 17.956,-0.747 31.823,-1.677 8.34,-0.559 17.127,-0.526 26.437,-0.492 17.314,0.065 36.434,0.136 57.839,-3.581 32.913,-5.716 59.92,-12.098 82.307,-19.449 11.967,-3.93 21.344,-5.771 28.228,-5.525 5.993,0.214 10.095,2.011 12.372,5.39 1.724,2.558 2.547,4.975 2.465,7.264 -0.15,4.208 -3.359,7.982 -9.657,11.402 -9.725,5.282 -30.218,12.947 -62.455,23.36 -14.43,4.662 -27.988,7.731 -42.349,9.834 -7.729,3.274 -18.96,6.954 -34.246,10.977 -36.502,9.607 -79.239,16.55 -127.179,24.339 -10.45,1.698 -21.147,3.436 -32.081,5.25 -61.094,10.139 -122.109,24.449 -185.951,43.611 -63.842,19.163 -123.194,35.253 -180.881,49.035 -57.687,13.783 -109.933,26.731 -159.224,39.461 -49.292,12.73 -97.724,27.51 -147.604,45.044 -11.941,4.198 -21.78,7.739 -29.993,10.695 -26.095,9.391 -35.773,12.875 -44.283,12.731 -0.985,-0.016 -2.039,-0.043 -3.138,-0.082 -10.307,-0.368 -24.656,-1.885 -24.461,-7.34 0.02,-0.573 0.201,-1.19 0.564,-1.853 4.187,-7.65 21.708,-17.63 53.399,-30.415 31.691,-12.784 62.516,-23.389 93.945,-32.319 31.43,-8.93 60.195,-17.804 87.665,-27.045 27.47,-9.241 56.273,-17.834 87.78,-26.188 31.507,-8.354 53.11,-13.615 65.838,-16.035 12.727,-2.42 25.659,-4.855 39.411,-7.423 13.752,-2.567 42.017,-11.369 86.14,-26.825 28.567,-10.007 61.227,-15.125 101.848,-21.49 22.119,-3.466 46.6,-7.303 74.065,-12.5 35.081,-6.637 64.001,-12.829 90.466,-18.733 -19.782,3.103 -32.889,3.337 -48.628,3.619 -8.272,0.147 -17.271,0.308 -28.349,0.905 -15.59,0.841 -29.733,2.203 -42.516,3.434 -16.136,1.554 -30.105,2.899 -42.083,2.723 -9.003,-0.132 -30.21,0.257 -55.011,0.712 -34.334,0.63 -75.556,1.386 -100.83,1.06 -43.53,-0.561 -71.703,2.888 -115.522,8.724 -11.852,1.578 -23.56,3.181 -35.059,4.756 -31.012,4.246 -60.504,8.284 -87.208,11.072 -31.861,3.326 -61.703,7.621 -94.419,12.329 -4.87,0.701 -9.804,1.411 -14.817,2.129 -20.951,2.997 -35.399,7.466 -48.752,11.596 -11.308,3.498 -21.832,6.753 -34.855,8.666 -28.401,4.171 -52.902,10.448 -74.67,19.128 -21.768,8.68 -41.46,18.577 -60.014,30.162" fill="#187795" fill-rule="evenodd" stroke="none" id="path49"/>
  </g>
 </svg>
--- a/styles/main.css
+++ b/styles/main.css
@ -26,6 +26,10 @@ a {
    color:#38686A;
 }
 a:hover {
    color:#2589BD;
 }
 .gallery a, nav a {
    text-decoration:none;
 }
@ -39,8 +43,8 @@ nav .hidden {
 }
 .IE-header {
-    font-size: 1.5rem;
+    font-size:1.5rem;
-    margin: 1rem;
+    margin:1rem;
 }
 header {
@ -50,6 +54,24 @@ header {
    margin-bottom:1.5rem;
 }
 nav {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:flex-end;
    text-align:center;
    height:3rem;
 }
 .ginou-icon {
    padding:0;
    margin:0;
    margin-bottom:0.4rem;
    margin-right:2rem;
    margin-left:2rem;
    width:4rem;
 }
 header nav ul {
    padding:0;
    margin:0.6rem;
@ -58,17 +80,10 @@ header nav ul {
 header nav ul li {
    display:inline;
    list-style-type:none;
-    margin:0 2.8rem;
+    margin:0 2rem;
    padding:0;
 }
 header nav ul li.title {
    font-weight:bold;
    font-size:1.8rem;
    font-family:'HotAugust', 'Comic Sans MS';
    color:#187795;
 }
 header nav ul li a:hover,
 header nav ul li.selected a {
    color:#2589BD;
@ -78,10 +93,18 @@ header nav ul li a {
    padding:0;
 }
-@media only screen and (min-width:500px) and (max-width:1200px) {
+@media only screen and (min-width:650px) and (max-width:1200px) {
-    header nav ul li.title {
+    header nav {
        display:block;
        height:auto;
    }
    header nav .ginou-icon {
        display:block;
        text-align:center;
        margin:auto;
        margin-bottom:0.5rem;
        margin-top:0.5rem;
    }
    header nav ul li {
@ -89,17 +112,34 @@ header nav ul li a {
    }
 }
-@media only screen and (max-width:600px) {
+@media only screen and (max-width:650px) {
    header nav {
        margin:0;
        display:block;
        height:auto;
    }
    header nav .ginou-icon {
        margin:0;
        margin-top:0.5rem;
-        margin-bottom:0.5rem;
+        margin-bottom:0.2rem;
        display:inline-block;
    }
    header nav ul {
        margin:0;
    }
    header nav ul .hidden {
        margin:0.6rem;
    }
    header nav #hamburger {
-        display:block;
+        display:inline-block;
        right:1rem;
        font-size:1.5rem;
        position:absolute;
        margin-top:0.35rem;
    }
    header nav #hamburger .container {
@ -138,18 +178,6 @@ header nav ul li a {
        font-size:1.2rem;
        padding:0.2rem;
    }
    header nav.active ul li:nth-child(1) {
        padding-top:1rem;
    }
    header nav ul li.title {
        font-size:1.8rem;
    }
    header nav ul li.title {
        display:inline;
    }
 }
 article {
@ -208,14 +236,36 @@ article.main p.signature {
 }
-/* Exposition */
+article.main .bio-img {
    float:right;
    padding:1rem;
    padding-top:0.25rem;
    padding-right:0;
    max-width:25vw;
 }
-article #pagination {
+@media only screen and (max-width:1200px) {
    article.main .bio-img {
        float:none;
        padding:0;
        max-width:90vw;
    }
 }
 #pagination, #pagination-sec {
    display:table;
    text-align:center;
    margin:auto;
 }
 #pagination-sec {
    margin-top:1rem;
    margin-bottom:1.5rem;
 }
 /* Exposition */
 article .gallery .gallery-item.active {
    display:initial;
 }
@ -231,7 +281,6 @@ article .gallery {
    justify-content:space-around;
    align-self:flex-end;
    flex-wrap:wrap;
    margin:auto;
    margin-top:0;
 }
@ -293,7 +342,7 @@ article .gallery img {
@media only screen and (max-width:600px) {
    #info {
-        min-width:280px;
+        min-width:85vw;
    }
 }
@ -328,6 +377,10 @@ article .gallery img {
 /* Painting */
 article.painting {
    width:unset;
 }
 article.painting .container {
    display:flex;
    flex-direction:row;
@ -346,13 +399,30 @@ article.painting .container img {
 }
 article.painting .container ul.metadata {
    width:15vw;
    display:block;
    margin:auto;
    margin-left:0;
    position:absolute;
    bottom:0;
    list-style-type:square;
    padding-left: 1.5rem;
    list-style-position:outside;
 }
 article.painting .container ul.metadata .metadata-help {
    font-weight:bold;
    color:#38686A;
 }
 article.painting .container ul.metadata a {
    text-decoration:none;
    color:unset;
 }
 article.painting .container ul li {
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
    break-inside:avoid;
 }
 article.painting .container .metadata span.title {
@ -390,9 +460,11 @@ article.painting .container .metadata span.content img {
    article.painting .container ul.metadata {
        position:relative;
        columns:2;
-        width:80vw;
+        width:95vw;
        margin:auto;
        margin-top:1rem;
        list-style-position:inside;
        padding:0;
    }
 }
@ -456,9 +528,15 @@ article.explorer img.style-select {
    margin-bottom:0.25rem;
    margin-right:0.4rem;
    margin-left:0.4rem;
    padding-bottom:6px;
    cursor:pointer;
 }
 article.explorer img.style-select.active {
    border-bottom:2px solid black;
    padding-bottom:4px;
 }
 article.explorer h3 {
    margin-bottom:0.3rem;
 }
@ -495,25 +573,51 @@ article.explorer form .inline {
    margin:0.1rem;
 }
 .button-cont {
    margin:auto;
    margin-top:1.5rem;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    width:-moz-fit-content;
    width:fit-content;
 }
 article.explorer input[type = submit] {
    display:block;
    margin:auto;
    text-align:center;
    border:none;
    padding:0.8rem;
    margin-top:1.5rem;
    border-radius:5%;
    background:#2589BD;
    text-decoration:none;
    font-size:1.1rem;
    cursor:pointer;
    color:white;
    margin-right:1rem;
 }
 article.explorer input[type = button] {
    margin:auto;
    text-align:center;
    border:none;
    padding:0.4rem;
    border-radius:5%;
    background:grey;
    text-decoration:none;
    font-size:1.1rem;
    cursor:pointer;
    color:white;
 }
 input:checked + label {
    font-weight:bold;
 }
 .item-cont span.filter {
    color:gray;
 }
@media only screen and (max-width:600px) {
    article.explorer form .container {
        display:block;
@ -762,15 +866,16 @@ article.infos h4 + p {
 }
@media only screen and (max-width:1200px) {
    article, article.main {
        width:95vw;
        text-align:justify;
    }
    article .center {
-        text-align:left;
+        text-align:justify;
    }
-}
+
    article.explorer .center {
        text-align:center;
 }
--- a/styles/pagination.css
+++ b/styles/pagination.css
@ -4,6 +4,10 @@
    line-height:0.2rem;
 }
 .paginationjs.paginationjs-theme-ginou .paginationjs-pages li:last-child {
    border-right: 1px solid #187795;
 }
 .paginationjs.paginationjs-theme-ginou .paginationjs-go-input > input[type="text"], .paginationjs.paginationjs-theme-ginou .paginationjs-pages li {
    border-color:#187795;
 }
--- a/supplements.html
+++ b/supplements.html
@ -0,0 +1,176 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
    <meta charset="utf-8">
    <title>Ginou • divers</title>
    <meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
    <meta name="author" content="Famille Marchal">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="stylesheet" href="styles/main.css" media="screen">
    <link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen">
    <link rel="stylesheet" href="plugins/chart.min.css" media="screen">
    <script src="plugins/jquery-3.5.1.min.js"></script>
    <script src="plugins/jquery.fancybox.min.js"></script>
 	<script src="plugins/chart.bundle.min.js"></script>
    <script src="scripts/menu.js"></script>
 	<script src="scripts/divers.js"></script>
 	<script src="scripts/stats.js"></script>
 </head>
 <body>
    <header>
        <nav>
            <img src="styles/icons/ginou.svg" class="ginou-icon">
            <div id="hamburger">
                <div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
            </div>
            <ul>
                <div class="hidden">
                    <li><a href="index.html">Accueil</a></li>
                    <li><a href="biographie.html">Biographie</a></li>
                    <li><a href="peinture.html">Peinture</a></li>
                    <li><a href="divers.html">Divers</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li class="selected"><a href="supplements.html">Suppléments</a></li>
                    <li><a href="informations.html">Informations</a></li>
                </div>
            </ul>
        </nav>
    </header>
    <article class="divers">
 		<h1>Suppléments</h1>
        <p class="center">Pour voir une photo en haute résolution et ses informations, veuillez cliquer sur celle-ci.</p>
        <h2>Petit carnet</h2>
        <p>Ce site est né grâce à ce petit carnet appartenant à Ginou et dans lequel elle a consigné les informations de quasiment l'intégralité de ses tableaux (nous avons retrouvé quatre inédits). Il nous a permis de faire un index complet de ses &oelig;uvres à travers les années.
        </p>
        <div class="gallery">
            <a data-fancybox="divers" href="photos/divers/normal/carnet.png" data-caption="Couverture du petit carnet qui nous a permis de lister l'intégralité des tableaux.">
                <img src="photos/divers/mini/carnet.jpg" alt="Couverture du petit carnet qui nous a permis de lister l'intégralité des tableaux.">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/carnetpremierepage.png" data-caption="Première page du petit carnet et les premiers tableaux à l'huile de Ginou.">
                <img src="photos/divers/mini/carnetpremierepage.jpg" alt="Première page du petit carnet et les premiers tableaux à l'huile de Ginou.">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/carnetpage.png" data-caption="Pages du petit carnet dans les années 2001.">
                <img src="photos/divers/mini/carnetpage.jpg" alt="Pages du petit carnet dans les années 2001.">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/carnetdernierepage.png" data-caption="Dernière page du petit carnet et derniers tableaux de Ginou.">
                <img src="photos/divers/mini/carnetdernierepage.jpg" alt="Dernière page du petit carnet et derniers tableaux de Ginou.">
            </a>
        </div>
 		<h2>Atelier</h2>
        <p>Voici quelques photos du dernier atelier que Ginou utilisait, chez elle, entre 2011 et 2017.</p>
 		<div class="gallery">
            <a data-fancybox="divers" href="photos/divers/normal/atelier.jpg" data-caption="Atelier dans lequel Ginou peignait (vers 2012).">
                <img src="photos/divers/mini/atelier.jpg" alt="L'atelier dans lequel Ginou peignait (vers 2012).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/atelier2.jpg" data-caption="Trépied et tableau (nº375, Venise, le Cannareggio) dans l'atelier de Ginou (2015).">
                <img src="photos/divers/mini/atelier2.jpg" alt="Trépied et tableau (nº375, Venise, le Cannareggio) dans l'atelier de Ginou (2015).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/palette.jpg" data-caption="La palette de Ginou !">
                <img src="photos/divers/mini/palette.jpg" alt="La palette de Ginou !">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/palettezoom.jpg" data-caption="Zoom sur la palette.">
                <img src="photos/divers/mini/palettezoom.jpg" alt="Zoom sur la palette.">
 			</a>
 		</div>
 		<h2>Expositions</h2>
        <p>Ginou a participé à de nombreuses foires et expositions en Lorraine, principalement dans la Meuse : à Bar-le-Duc, Étain, Verdun et ses alentours, ou encore à Vigneulles-les Hattonchâtel.<br>
        Voici une sélection de quelques photos issues de ces événements.</p>
        <div class="gallery">
            <a data-fancybox="divers" href="photos/divers/normal/expodugny.jpg" data-caption="Exposition à Dugny-sur-Meuse (1996).">
                <img src="photos/divers/mini/expodugny.jpg" alt="Exposition à Dugny-sur-Meuse (1996).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/exposaintjean.jpg" data-caption="Fête du collège Saint-Jean de Verdun (2005).">
                <img src="photos/divers/mini/exposaintjean.jpg" alt="Fête du collège Saint-Jean de Verdun (2005).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/expojeannot.jpg" data-caption="Exposition à la foire aux puces de Dugny, avec le Jeannot (1995).">
                <img src="photos/divers/mini/expojeannot.jpg" alt="Exposition à la foire aux puces de Dugny, avec le Jeannot (1995).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/foiredugny.jpg" data-caption="Foire aux puces de Dugny-sur-Meuse (2004).">
                <img src="photos/divers/mini/foiredugny.jpg" alt="Foire aux puces de Dugny-sur-Meuse (2004).">
 			</a>
            <a data-fancybox="divers" href="photos/divers/normal/foirethierville.jpg" data-caption="Foire de Thierville-sur-Meuse (2002).">
                <img src="photos/divers/mini/foirethierville.jpg" alt="Foire de Thierville-sur-Meuse (2002).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/expobarleduc.jpg" data-caption="Exposition au siège du Conseil Général de Bar-le-Duc (1994).">
                <img src="photos/divers/mini/expobarleduc.jpg" alt="Exposition au siège du Conseil Général de Bar-le-Duc (1994).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/derniereexpo.jpg" data-caption="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017).">
                <img src="photos/divers/mini/derniereexpo.jpg" alt="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017).">
 			</a>
 		</div>
 		<h2>Presse</h2>
        <p>Ginou a eu plusieurs articles à son propos dans le journal local, cependant nous n'en possédons qu'un seul. N'hésitez pas <a href="informations.html">à nous contacter</a> si vous avez un en votre possession.</p>
        <div class="gallery">
            <a data-fancybox="divers" href="photos/divers/normal/ainesdugny.jpg" data-caption="Ginou était engagée dans des &oelig;uvres caritatives, comme le montre cette coupure de presse.">
                <img src="photos/divers/mini/ainesdugny.jpg" alt="Ginou était engagée dans des &oelig;uvres caritatives, comme le montre cette coupure de presse.">
            </a>
        </div>
 		<h2>Autres</h2>
        <div class="gallery">
            <a data-fancybox="divers" href="photos/divers/normal/ginouchloe.jpg" data-caption="Ginou posant à côté d'un de ses tableaux (vers 2011).">
                <img src="photos/divers/mini/ginouchloe.jpg" alt="Ginou posant à côté d'un de ses tableaux (vers 2011).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/ginou.jpg" data-caption="Ginou en voyage en Argentine (2012).">
                <img src="photos/divers/mini/ginou.jpg" alt="Ginou en voyage en Argentine (2012).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/nature2.jpg" data-caption="Ginou observe les fleurs dans les bois de Dugny-sur-Meuse (2016).">
                <img src="photos/divers/mini/nature2.jpg" alt="Ginou observe les fleurs dans les bois de Dugny-sur-Meuse (2016).">
            </a>
            <a data-fancybox="divers" href="photos/divers/normal/nature1.jpg" data-caption="Ginou dans son jardin, au milieu des fleurs (2002).">
                <img src="photos/divers/mini/nature1.jpg" alt="Ginou dans son jardin, au milieu des fleurs (2002).">
            </a>
        </div>
        <h2>Statistiques</h2>
        <p>
            De 1956 à 2016, soit sur une période de 60 ans, Ginou a peint plus de de 385 tableaux.<br>
            Parmi ceux-ci, elle a le plus souvent aimé travailler à la lumière printanière du mois de mai avec un total de 50 tableaux.<br>
            Son année la plus active fut 1988 où elle réalisa 23 &oelig;uvres. Enfin, le genre de tableau qu'elle préféra peindre était des paysages, plus particulièrement à la campagne.
        </p>
        <div id="stats">
            <div class="stat">
                <canvas id="month"></canvas>
            </div>
            <div class="stat">
                <canvas id="year"></canvas>
            </div>
            <div class="stat">
                <canvas id="dimension"></canvas>
            </div>
        </div>
    </article>
 </body>
 </html>
Author	SHA1	Message	Date
Théo Marchal	46729478a6	Update supplements following merge	2022-08-17 13:35:45 +02:00
Théo Marchal	3400db36b9	Merge branch 'dev' into other-works	2022-08-17 13:34:44 +02:00
Théo Marchal	6480eee97c	Fix bad characters	2022-08-10 00:37:50 +02:00
Théo Marchal	a2ec68d02e	Update jquery version	2022-08-10 00:18:52 +02:00
Théo Marchal	9ca53a4176	Update Chart.js and change style for a more fitting one	2022-08-09 23:35:46 +02:00
Théo Marchal	302f51dcb3	Prevent metadata overflowing on painting page	2022-08-09 19:49:30 +02:00
Théo Marchal	002486725d	Fix some styling issues, particularly on Divers	2022-08-09 19:24:43 +02:00
Théo Marchal	962b085d94	Preparation of pages to integrate other works of Ginou	2022-08-09 19:02:45 +02:00
Théo Marchal	c7dcc688e7	Small mobile style improvements	2022-08-08 16:50:42 +02:00
Théo Marchal	16f6e0778a	CSS harmonization	2022-08-08 15:16:04 +02:00
Théo Marchal	86bf57df0d	Avoid painting metadata to be cut down	2022-08-08 15:15:07 +02:00
Théo Marchal	31ba8358d1	Header harmonization	2022-08-08 15:09:16 +02:00
Théo Marchal	c00d966fd7	Fix no fancybox configuration on reload fixes #18	2022-08-08 12:28:33 +02:00
Théo Marchal	ff2e32d2d9	Mobile style fixes	2022-08-08 01:41:02 +02:00
Théo Marchal	56fd55d09d	Selected view in Explorer is now visible fixes #6	2022-08-04 22:26:51 +02:00
Théo Marchal	adbd09c060	Better sized favicon	2022-08-04 18:43:33 +02:00
Théo Marchal	aa3e4ffded	Remove initial animation from charts	2022-08-04 18:38:18 +02:00
Théo Marchal	67b9847587	Update deprecated favicon	2022-08-04 14:25:23 +02:00
Théo Marchal	8d39956724	LocalStorage used for Explorer view	2022-08-04 14:15:51 +02:00
Théo Marchal	5ed5aff945	Better pagination view	2022-08-04 13:10:06 +02:00
Théo Marchal	f1849eccf0	Better pagination (multi-sync) fixes #19	2022-08-03 18:17:38 +02:00
Théo Marchal	e5d4f26fc2	Fix FancyBox in the list view of Explorer	2022-08-03 12:30:56 +02:00
Théo Marchal	5da19afed3	Metadata link to explorer in painting page fixes #12	2022-08-03 01:47:41 +02:00
Théo Marchal	5540ba095d	Fix wrong characters	2022-08-03 00:58:06 +02:00
Théo Marchal	af82dac4bc	Fix "Metadata text is cut if the page is too small" fixes #13	2022-08-03 00:53:15 +02:00
Théo Marchal	aa693c7672	Fix typo in Accueil	2022-08-03 00:52:39 +02:00
Théo Marchal	3e2866b9b9	Update accueil	2021-04-03 19:00:27 +02:00
Théo Marchal	f50a9fbb59	Update logo and misc renames	2021-04-03 18:37:16 +02:00
Théo Marchal	c9c587d489	Update photos and divers section	2021-04-03 17:49:18 +02:00
Théo Marchal	88950d7529	Add functionally to reset button	2021-03-30 21:37:13 +02:00
Théo Marchal	60422a6400	Update data	2021-03-07 01:58:22 +01:00
Théo Marchal	47a0dcd200	Update divers	2021-03-07 01:55:34 +01:00
Théo Marchal	e923c9404e	Update photos submodule	2021-03-07 01:46:13 +01:00
Théo Marchal	e31639d340	New photo in bio	2021-03-07 01:23:32 +01:00
Théo Marchal	61511ecc95	Update misc pages	2021-03-07 01:06:12 +01:00
Théo Marchal	e0ebd28dcb	Fix exist photos tag	2021-03-07 00:44:29 +01:00
Théo Marchal	e41ccc5549	Fix visual appearance of "disponible" photos in explorer	2021-03-07 00:36:07 +01:00
Théo Marchal	862a7348e6	Simplification in explorer	2021-03-07 00:27:45 +01:00
Théo Marchal	3283d11c02	Simplification	2021-03-06 14:13:35 +01:00
Théo Marchal	25a09015d1	Working "tous" filter for tags	2021-03-06 14:05:04 +01:00
Théo Marchal	34e8fe9b12	Working "tous" filter for places	2021-03-06 12:30:44 +01:00
Théo Marchal	4effbe657e	Fix iOS Safari dropdown visibility	2021-03-06 12:09:24 +01:00
Théo Marchal	35b1e06dfc	Fix painting not working with filter	2021-03-06 11:43:53 +01:00
Théo Marchal	3a964098e7	Fix regression on tags	2021-03-06 01:32:09 +01:00
Théo Marchal	3fe24e502e	Fix "Tous" not filtering visually in explorer	2021-03-06 01:22:59 +01:00
Théo Marchal	44a5f52e94	Fix issue with "exist" in photos that was not filtering	2021-03-05 01:18:52 +01:00
Théo Marchal	5b79f924cb	Forgot this file.	2021-03-04 10:13:54 +01:00
Théo Marchal	936af2a9fd	Merge branch 'dev' into filter	2021-03-04 10:13:28 +01:00
Théo Marchal	f37a2fde6e	Fix tags handling that was broken with filter	2021-03-04 02:14:51 +01:00
Théo Marchal	ab5710e69e	Fix cartel generation issue Was preventing the ability to click on paintings	2021-03-03 19:32:59 +01:00
Théo Marchal	dae17821ad	Clean up organisation and comments	2021-03-03 09:56:26 +01:00
Théo Marchal	10dea8e993	Working filters ; cleaning needs to be done	2021-03-03 09:38:55 +01:00
Théo Marchal	fece1eab16	Update on filter	2021-02-22 13:33:19 +01:00
Théo Marchal	4739726e5c	WIP filter, has some basic features	2021-02-18 22:07:26 +01:00
Théo Marchal	bf60722e22	First test of separation of javascript	2021-02-17 18:48:52 +01:00
		`@ -1 +0,0 @@`
			@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}