Add plumbing for English website

No link to switch from one language to the other yet.

Also, some pages are now out-of-date wrt their French version; not a
big deal, since we'll need to go over each page anyway.

24 files changed, 631 insertions, 14 deletions

diff --git a/Makefile b/Makefile
index 8dc01e7..bbec445 100644
--- a/Makefile
+++ b/Makefile
@@ -3,10 +3,17 @@ OUTDIR = public
 dirname = $(patsubst %/,%,$(dir $(1)))
 dirnames = $(sort $(call dirname,$(1)))
 
-pages_src = $(filter-out template.html,$(wildcard *.html))
+languages = en
+languages_folders = $(foreach l,$(languages),$(OUTDIR)/$(l))
+
+pages_src = $(filter-out template.html,$(wildcard *.html))      \
+$(foreach l,$(languages),                                       \
+$(filter-out $(l)/template.html,$(wildcard $(l)/*.html)))
+
 pages = $(foreach p,$(pages_src),$(OUTDIR)/$(p))
 
-members_src = $(wildcard *.membre.in)
+members_src = $(wildcard *.membre.in            \
+$(foreach l,$(languages),$(l))/*.membre.in)
 members_pages = $(patsubst %.membre.in,$(OUTDIR)/%.html,$(members_src))
 
 feeds = $(wildcard *.xml)
@@ -31,22 +38,32 @@ site: $(pages) $(members_pages) $(resources) $(images) $(stylesheets)
 $(resources) $(images) $(stylesheets): $(OUTDIR)/%: %
 	cp $< $@
 
-$(pages): $(OUTDIR)/%.html: %.html %.sh template.html
-	./build.sh $< $*.sh $@
+.SECONDEXPANSION:
+
+# 🔪 HACK ATTACK 🔪
+# Ideally I'd like to just stick $$(<D)/template.html in the
+# prerequisite list, but unlike $$(@D), $$(<D) seems to expand to
+# nothing.  No idea if that's a bug or if I'm just Doing It Wrong.
+langdir = .
+$(OUTDIR)/en/%: langdir = en
+
+$(pages): $(OUTDIR)/%.html: %.html %.sh $$(langdir)/template.html
+	./build.sh $< $*.sh $(langdir)/template.html $@
 
-$(members_pages): $(OUTDIR)/%.html: %.membre.in build-member.sh template.html
-	./build-member.sh $< $@
+$(members_pages): $(OUTDIR)/%.html: %.membre.in build-member.sh $$(langdir)/template.html
+	./build-member.sh $< $(langdir)/template.html $@
 
 $(OUTDIR)/quatuor.html: quatuor.md
 $(OUTDIR)/programmes.html: programs.in
+$(OUTDIR)/en/quartet.html: en/quartet.md
+$(OUTDIR)/en/programs.html: en/programs.in
 
 # Rules for automatic, incremental folder creation.
 
 # Our lists of target directories are created from the lists of leaf
 # resources; some intermediate directories that only hold subdirs do
 # not appear in these lists.  Work around that with -p.
-$(OUTDIR) $(images_folders) $(stylesheets_folders):
+$(OUTDIR) $(languages_folders) $(images_folders) $(stylesheets_folders):
 	mkdir -p $@
 
-.SECONDEXPANSION:
 $(resources) $(images) $(stylesheets) $(pages) $(members_pages): | $$(@D)
diff --git a/build-member.sh b/build-member.sh
index 49a9205..d19c835 100755
--- a/build-member.sh
+++ b/build-member.sh
@@ -3,7 +3,8 @@
 set -eu
 
 input=$1
-output=$2
+template=$2
+output=$3
 
 firstname ()
 {
@@ -72,4 +73,5 @@ EOF
 
 ./build.sh <(generate-main < "${input}")        \
            <(generate-parameters < "${input}")  \
+           "${template}"                        \
            "${output}"
diff --git a/build.sh b/build.sh
index 74e9ab8..a9035f3 100755
--- a/build.sh
+++ b/build.sh
@@ -4,9 +4,10 @@ set -eu
 
 input=$1
 parameters=$2
-output=$3
+template=$3
+output=$4
 
-cp template.html ${output}
+cp ${template} ${output}
 
 transform-li-current-a ()
 {
@@ -31,8 +32,9 @@ sed -i s/'{TITLE}'/"${title}"/ ${output}
 link_stylesheets=''
 for s in "${stylesheets[@]}"
 do
-    link_template='<link rel="stylesheet" href="stylesheets/%s.css">\n'
-    link_stylesheets+=$(printf "${link_template}" "${s}")
+    spath=$(realpath --relative-to $(dirname "${input}") stylesheets/"${s}".css)
+    link_template='<link rel="stylesheet" href="%s">\n'
+    link_stylesheets+=$(printf "${link_template}" "${spath}")
 done
 
 sed -i /'{STYLESHEETS}'/'c\'"${link_stylesheets}" ${output}
diff --git a/en/contact.html b/en/contact.html
new file mode 100644
index 0000000..d250ea1
--- /dev/null
+++ b/en/contact.html
@@ -0,0 +1,36 @@
+<main>
+  <div id="contact-us">
+    <h1>Nos coordonnées</h1>
+    <dl>
+      <dt>Email : </dt>
+      <dd><a href="mailto:quatuorbellefeuille@gmail.com">quatuorbellefeuille@gmail.com</a></dd>
+    <dl>
+    </dl>
+      <dt>Téléphone : </dt>
+      <dd><a href="tel:+33-06-52-26-21-92">06 52 26 21 92</a></dd>
+    </dl>
+    <figure>
+      <img src="../images/contact.jpg">
+    </figure>
+  </div>
+  <div id="partners">
+    <h1>Partenaires</h1>
+    <p>
+      Nous adressons nos plus sincères remerciements à nos partenaires :
+    </p>
+      <ul>
+        <li><a href="https://www.musiqueaflaine.fr/"
+               target="_blank">
+            <img src="https://www.musiqueaflaine.fr/wp-content/themes/musiqueaflaine/image/logo-maf.png"
+                 alt="Musique à Flaine"
+                 style="width: 12em">
+        </a></li>
+        <li><a href="https://www.ledimoredelquartetto.eu"
+               target="_blank">
+            <img src="https://www.ledimoredelquartetto.eu/lddqwp/wp-content/uploads/2017/03/DQ_logoVERT350-267x300.png"
+                 alt="Le Dimore del Quartetto"
+                 style="width: 4em">
+        </a></li>
+      </ul>
+  </div>
+</main>
diff --git a/en/contact.sh b/en/contact.sh
new file mode 100644
index 0000000..6a7a40c
--- /dev/null
+++ b/en/contact.sh
@@ -0,0 +1,4 @@
+title=Contact
+stylesheets=(contact)
+transforms=('s/class="contact"/class="contact current"/' # Desktop.
+            "$(transform-li-current-a contact)")         # Mobile.
diff --git a/en/david.membre.in b/en/david.membre.in
new file mode 100644
index 0000000..19d6ed9
--- /dev/null
+++ b/en/david.membre.in
@@ -0,0 +1,16 @@
+David Forest
+violon
+#e05a00
+#bf9000
+Ta maison Poudlard ? Poufsouffle, c'est le résultat du test officiel !
+Une feuille préférée ? L'érable, de préférence avec des pancakes !
+Une période de l'histoire à revivre ? Les années 60, pour pouvoir assister aux concerts des Beatles ou de Jimi Hendrix.
+Mon choix d’instrument ? J'ai vu à 6 ans le documentaire "l'art du violon" qui m'a fait découvrir les grands violonistes du 20e s, c'est là que je me suis mis à adorer cet instrument.
+Un artiste qui me touche ? Le violoniste Christian Ferras pour la générosité du son et l'intensité du vibrato.
+Une œuvre qui te bouleverse ? Même après l'avoir écouté des dizaines de fois je suis toujours aussi bouleversé par le 15e quatuor de Beethoven.
+Un film marquant ? M le maudit de Fritz Lang.
+Un souvenir marquant ? Mon premier voyage aux États Unis quand j'ai découvert les cinémas en drive, je n'aurais jamais cru que ça puisse exister !
+Ta blague préférée ? C'est l'histoire d'une courgette, elle court elle se jette.
+Si je n'étais pas musicien ? J'aurais probablement étudié l'astrophysique, j'ai toujours été fasciné par ce domaine.
+Un livre que j'ai aimé ? La série des rois maudits de Maurice Druon, l'histoire de France est plus incroyable qu'un roman d'aventure !
+Mon parcours ? Je viens d'une famille de mélomanes et j'ai débuté le violon à l'âge de 5 ans dans une école de musique en région parisienne. Durant ma scolarité je ne me prédestinais pas spécialement pour la musique, j'étais plutôt intéressé par les sciences. C'est vers l'âge de 16 ans que j'ai eu le "déclic", j'étudiais avec Dorothée Nodé-Langlois qui m'a vraiment transmis cette passion pour le violon. J'ai continué mes études au conservatoire de Boulogne Billancourt et finalement au CNSM où j'ai intégré le quatuor Bellefeuille.
diff --git a/en/enguerrand.membre.in b/en/enguerrand.membre.in
new file mode 100644
index 0000000..4b872cd
--- /dev/null
+++ b/en/enguerrand.membre.in
@@ -0,0 +1,16 @@
+Enguerrand Bontoux
+violoncelle
+#6e9928
+#203864
+Ton arbre préféré ? l'Epicéa.
+Ta maison Poudlard ? Serdaigle (seule maison vraiment respectable).
+Une œuvre bouleversante ? la 2e de Mahler, Résurrection, et son choeur final.
+Un livre ? Le Chat de Geluck, pour son humour en acier trempé.
+Une ville ? Vienne, pour sa beauté incomparable et sa vie trépidante.
+Ton film favori ? Sacré Graal, Monty Python (We-are-the-knights-who-say-NI).
+Ce qui nous rassemble ? La contradiction surtout, et l'amour de la nourriture. Et le quatuor aussi.
+Tes loisirs ? Les jeux vidéo, les séries, le vélo et les mikados géants.
+Un rêve ? Gagner mon poids en Schoko-Bons.
+Des artistes inspirants ? Banksy, Ivry Gitlis, Joao Gilberto, Paul Klee.
+Ton plat préféré ? Les lasagnes sous toutes leurs formes.
+Ton parcours ? Pêle-mêle du violoncelle, du chant, de l'informatique, des lettres ... Entre Paris et Lyon.
diff --git a/en/feed.xml b/en/feed.xml
new file mode 100644
index 0000000..eee318a
--- /dev/null
+++ b/en/feed.xml
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="utf-8"?>
+<rss version="2.0">
+  <channel>
+    <title>Quatuor Bellefeuille</title>
+    <link>https://quatuor.kevinlegouguec.net</link>
+    <description>Des nouvelles du quatuor Bellefeuille</description>
+    <image>
+      <url>https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png</url>
+      <link>https://quatuor.kevinlegouguec.net</link>
+    </image>
+    <language>fr</language>
+    <item>
+      <title>Concert #8</title>
+      <link>https://quatuor.kevinlegouguec.net/actualités.html#concert-8</link>
+      <description><![CDATA[
+        Prochain concert le <em>jour</em> à <em>l'endroit</em> !
+      ]]></description>
+      <pubDate>Tue, 15 Dec 2020 23:25:16 +0100</pubDate>
+    </item>
+    <item>
+      <title>Concert #7</title>
+      <link>https://quatuor.kevinlegouguec.net/actualités.html#concert-7</link>
+      <description><![CDATA[
+        Prochain concert le <em>jour</em> à <em>l'endroit</em> !
+      ]]></description>
+      <pubDate>Tue, 08 Dec 2020 23:25:30 +0100</pubDate>
+    </item>
+    <item>
+      <title>Concert #6</title>
+      <link>https://quatuor.kevinlegouguec.net/actualités.html#concert-6</link>
+      <description><![CDATA[
+        Prochain concert le <em>jour</em> à <em>l'endroit</em> !
+      ]]></description>
+      <pubDate>Wed, 02 Dec 2020 00:26:24 +0100</pubDate>
+    </item>
+    <item>
+      <title>Concert #5</title>
+      <link>https://quatuor.kevinlegouguec.net/actualités.html#concert-5</link>
+      <description><![CDATA[
+        Prochain concert le <em>jour</em> à <em>l'endroit</em> !
+      ]]></description>
+      <pubDate>Wed, 25 Nov 2020 00:26:39 +0100</pubDate>
+    </item>
+    <item>
+      <title>Concert #4</title>
+      <link>https://quatuor.kevinlegouguec.net/actualités.html#concert-4</link>
+      <description><![CDATA[
+        Prochain concert le <em>jour</em> à <em>l'endroit</em> !
+      ]]></description>
+      <pubDate>Wed, 18 Nov 2020 00:26:43 +0100</pubDate>
+    </item>
+    <item>
+      <title>Concert #3</title>
+      <link>https://quatuor.kevinlegouguec.net/actualités.html#concert-3</link>
+      <description><![CDATA[
+        Prochain concert le <em>jour</em> à <em>l'endroit</em> !
+      ]]></description>
+      <pubDate>Wed, 11 Nov 2020 00:26:44 +0100</pubDate>
+    </item>
+    <item>
+      <title>Concert #2</title>
+      <link>https://quatuor.kevinlegouguec.net/actualités.html#concert-2</link>
+      <description><![CDATA[
+        Prochain concert le <em>jour</em> à <em>l'endroit</em> !
+      ]]></description>
+      <pubDate>Wed, 04 Nov 2020 00:26:44 +0100</pubDate>
+    </item>
+    <item>
+      <title>Concert #1</title>
+      <link>https://quatuor.kevinlegouguec.net/actualités.html#concert-1</link>
+      <description><![CDATA[
+        Prochain concert le <em>jour</em> à <em>l'endroit</em> !
+      ]]></description>
+      <pubDate>Wed, 28 Oct 2020 00:26:44 +0100</pubDate>
+    </item>
+  </channel>
+</rss>
diff --git a/en/gallery.html b/en/gallery.html
new file mode 100644
index 0000000..3606239
--- /dev/null
+++ b/en/gallery.html
@@ -0,0 +1,47 @@
+<main>
+  <h1>Photos</h1>
+  <div class="mosaic photos">
+    <div class="photo">
+      <a href="images/photos/PierreVaillant2.jpg"
+         target="_blank">
+        <img src="../images/photos/PierreVaillant2.jpg"
+             style="object-position: center bottom">
+      </a>
+      <p class="credits"><span class="name">Pierre Vaillant</span></p>
+    </div>
+    <div class="photo">
+      <a href="images/photos/PierreVaillant1.jpg"
+         target="_blank">
+        <img src="../images/photos/PierreVaillant1.jpg">
+      </a>
+      <p class="credits"><span class="name">Pierre Vaillant</span></p>
+    </div>
+    <div class="photo">
+      <a href="images/photos/CyrilGhestem1.jpg"
+         target="_blank">
+        <img src="../images/photos/CyrilGhestem1.jpg">
+      </a>
+      <p class="credits">
+        <a class="name" href="https://www.operadeparis.fr/artistes/cyril-ghestem">
+          Cyril Ghestem
+        </a>
+      </p>
+    </div>
+    <div class="photo">
+      <a href="images/photos/PierreVaillant3.jpg"
+         target="_blank">
+        <img src="../images/photos/PierreVaillant3.jpg"
+             style="object-position: 20% center">
+      </a>
+      <p class="credits"><span class="name">Pierre Vaillant</span></p>
+    </div>
+  </div>
+  <h1>Vidéos</h1>
+  <div class="mosaic videos">
+    <div class="video">
+      <iframe src="https://www.youtube.com/embed/1aDVqNtYbbI"
+              frameborder="0" allowfullscreen class="yt">
+      </iframe>
+    </div>
+  </div>
+</main>
diff --git a/en/gallery.sh b/en/gallery.sh
new file mode 100644
index 0000000..04b5a5e
--- /dev/null
+++ b/en/gallery.sh
@@ -0,0 +1,3 @@
+title=Gallery
+stylesheets=galerie
+transforms=("$(transform-li-current-a gallery)")
diff --git a/en/hervé.membre.in b/en/hervé.membre.in
new file mode 100644
index 0000000..4e38861
--- /dev/null
+++ b/en/hervé.membre.in
@@ -0,0 +1,17 @@
+Hervé Blandinières
+alto
+#4e8761
+#1368a1
+Ta feuille préférée ? Celle du figuier.
+Une période de l'histoire à vivre ? Le néolithique (vaste sujet...).
+Ta maison à Poudlard ? Serdaigle, la raison l’emporte.
+Un jeu vidéo favori ? Mario Kart.
+Un compositeur de prédilection ? Brahms, depuis toujours et sans hésitation !
+Une œuvre qui te bouleverse ? La nuit transfigurée d’Arnold Schoenberg.
+Un souvenir marquant ? Un lac de montagne au bout d’une randonnée en Ariège.
+Un monument favori ? La cathédrale d’Amiens, son immense volume et sa façade foisonnante de détails.
+Qu’est-ce que tu apportes au quatuor ? Ma mauvaise humeur et un peu de miel entre le grave et les aigus.
+Tes loisirs ? La cuisine ! Ainsi que le sport (avec modération).
+Un rêve ? Je tombe à vélo et tout à coup je me réveille... Mais je n’ai peut-être pas bien compris la question.
+Ton plat préféré ? La blanquette est bonne.
+Ton parcours ? J’ai toujours été attiré par les activités manuelles (bricolage, peinture, sculpture...) ce qui m’a valu de longues hésitations quant à mon choix d’orientation post-terminale. J’ai fini par me décider à continuer à suivre la voie musicale que je traçais depuis mes sept ans et partir écumer les conservatoires de Gennevilliers, Boulogne-Billancourt et le CNSMDP. Je suis aujourd’hui l’heureux altiste du quatuor Bellefeuille et membre de l’Orchestre de Paris.
diff --git a/en/index.html b/en/index.html
new file mode 100644
index 0000000..6e50e8a
--- /dev/null
+++ b/en/index.html
@@ -0,0 +1,9 @@
+<main>
+    <a id="next-concert" href="actualités.html#concert-2021-04-03">
+      <p>
+        <span id="day">3</span>
+        <br>
+        <span id="month">avril</span>
+      </p>
+    </a>
+</main>
diff --git a/en/index.sh b/en/index.sh
new file mode 100644
index 0000000..934a371
--- /dev/null
+++ b/en/index.sh
@@ -0,0 +1,2 @@
+title=Welcome
+stylesheets=(index dark)
diff --git a/en/news.html b/en/news.html
new file mode 100644
index 0000000..694f04f
--- /dev/null
+++ b/en/news.html
@@ -0,0 +1,106 @@
+<main>
+  <div id="event-list">
+    <h1>Prochains concerts</h1>
+    <div class="events">
+      <a class="event canceled" href="#concert-2021-04-03">
+        <img src="../images/concerts/dinard.jpg">
+        <p class="summary">Dinard<br>3 avril 2021</p>
+      </a>
+      <a class="event" href="#concert-2021-06-21">
+        <img src="../images/concerts/pantin.jpg">
+        <p class="summary">Paris<br>13 juin 2021</p>
+      </a>
+    </div>
+    <h1>Concerts passés</h1>
+    <div class="events">
+    </div>
+  </div>
+
+  <div id="event-details">
+    <p class="hint">Cliquez sur un concert pour obtenir plus d'informations.</p>
+
+    <div class="details canceled" id="concert-2021-04-03">
+      <p class="detail date">Samedi 3 avril 2021</p>
+      <p class="detail time">20h00</p>
+      <p class="detail place">Dinard</p>
+      <ol class="detail program">
+        <li>Haydn quatuor op.76 n°1​</li>
+        <li>Brahms quatuor n°7, op.59 n°1​</li>
+        <li>Ravel quatuor à cordes</li>
+      </ol>
+      <p class="more">
+        Informations et réservations :
+        <a href="https://weekenddemusiqueclassique.fr">
+          https://weekenddemusiqueclassique.fr
+        </a>
+      </p>
+      <p class="photo-credits">
+        Photo fournie par
+        <a href="https://www.piqsels.com/fr/public-domain-photo-zxmbk">
+          Piqsels
+        </a>
+        / <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>
+      </p>
+    </div>
+    <div class="details" id="concert-2021-06-21">
+      <p class="detail date">Dimanche 13 juin 2021</p>
+      <p class="detail time">15h00</p>
+      <p class="detail place">
+        Église Sainte-Claire d’Assise<br>
+        Place de la Porte-de-Pantin<br>
+        75019 Paris
+      </p>
+      <ol class="detail program">
+        <li>Haydn quatuor op.76 n°1​</li>
+        <li>Beethoven quatuor n°7, op.59 n°1</li>
+      </ol>
+      <p class="more">Entrée libre</p>
+      <p class="photo-credits">
+        Photo fournie par
+        <a href="https://www.flickr.com/photos/129231073@N06/23414771992/">
+          Fred Romero
+        </a>
+        / <a href="https://creativecommons.org/licenses/by/2.0/">CC BY</a>
+      </p>
+    </div>
+  </div>
+
+  <script>
+    // When JS is enabled, hide concert details by default, and
+    // allow the user to display concerts selectively.
+    var detailsStyle = document.createElement('style');
+    document.head.appendChild(detailsStyle);
+    detailsStyle.sheet.insertRule('.details:not(.active) {display:none}');
+
+    var pHint = document.querySelector('p.hint');
+
+    var anchor = document.location.hash;
+    if (anchor.match(/#concert-/)) {
+        document.querySelector(anchor).classList.add('active');
+        document.querySelector(`a[href="${document.location.hash}"]`)
+            .classList.add('active');
+        pHint.style.display = 'none';
+    }
+    document.querySelectorAll('a.event').forEach((link) => {
+        link.addEventListener('click', function(click) {
+            if (click.ctrlKey || click.shiftKey)
+                return;
+
+            var prev = document.querySelector('.details.active');
+            if (prev)
+                prev.classList.remove('active');
+            var id = link.attributes['href'].value;
+            document.querySelector(id).classList.add('active');
+
+            prev = document.querySelector('a.event.active');
+            if (prev) {
+                prev.classList.remove('active');
+            }
+            link.classList.add('active');
+
+            pHint.style.display = 'none';
+        });
+    });
+  </script>
+
+</main>
diff --git a/en/news.sh b/en/news.sh
new file mode 100644
index 0000000..08b6528
--- /dev/null
+++ b/en/news.sh
@@ -0,0 +1,3 @@
+title=News
+stylesheets=actualités
+transforms=("$(transform-li-current-a news)")
diff --git a/en/programs.html b/en/programs.html
new file mode 100644
index 0000000..d8ac1f5
--- /dev/null
+++ b/en/programs.html
@@ -0,0 +1,3 @@
+<main>
+{PROGRAMS}
+</main>
diff --git a/en/programs.in b/en/programs.in
new file mode 100644
index 0000000..650dafa
--- /dev/null
+++ b/en/programs.in
@@ -0,0 +1,41 @@
+NOM : Beethoven
+COMPOSITEURS : Beethoven, Beethoven, Beethoven
+DESCRIPTION :
+1h50 avec entracte
+
+> Croyez-vous que je pense à vos misérables cordes quand l'esprit me parle ?
+
+Voilà ce qu’aurait répondu Beethoven au quatuor Schuppanzigh qui se serait plaint de la difficulté technique de ses quatuors à cordes. Du trio au quatuor, explorez l’univers d’un Beethoven sans concession et sans limite. De l’infiniment petit à l’immensité de l’univers, de l’introspection la plus intime à la transcendance la plus totale, (re-)découvrez son écriture contrastée et éternellement moderne.
+MORCEAUX :
+- Trio op.9 n°3 (1798)
+- Quatuor op.18 n°4 (1799)
+- entracte
+- Quatuor op.59 n°1 (1806)
+
+NOM : Con Spirito
+COMPOSITEURS : Haydn, Beethoven, Mendelssohn
+DESCRIPTION :
+2h00 avec entracte
+
+Ce programme plein d’esprit, énergique et espiègle réunit trois compositeurs germaniques. On y retrouve des caractères communs à la musique ultra-rhénane : la structure, la puissance, l’explosivité et la virtuosité.
+
+L’écoute des trois mouvements lents nous fait mesurer l’évolution du style classique au style romantique. La pureté et l’équilibre d’une écriture chorale dans l’Adagio sostenuto de Haydn, l’intériorité du sentiment dans la triste complainte de l’Adagio molto e mesto de Beethoven et la mélancolie douce et rêveuse de l’Andante espressivo ma con moto de Mendelssohn.
+MORCEAUX :
+- Haydn — quatuor op.76 n°1 (1797)
+- Beethoven — quatuor op.59 n°1 (1806)
+- entracte
+- Mendelssohn — quatuor op.44 n°1 (1839)
+
+NOM : Champagne
+COMPOSITEURS : Mozart, Mendelssohn, Ravel
+DESCRIPTION :
+1h50 avec entracte
+
+Partez à la découverte d’un répertoire pétillant, effervescent et lumineux.
+
+Ces quatuors écrits par trois compositeurs de trois siècles différents nous évoquent tous les caractères du champagne : la noblesse et la majesté chez Mozart, la fête et l’ivresse avec Mendelssohn tandis que Ravel y contemple les jeux de bulles et de lumière.
+MORCEAUX :
+- Mozart — quatuor op.10 n°3 KV. 458 « La chasse » (1785)
+- Mendelssohn — quatuor op.44 n°1 (1839)
+- entracte
+- Ravel — quatuor à cordes (1903)
diff --git a/en/programs.sh b/en/programs.sh
new file mode 100644
index 0000000..3f90fb5
--- /dev/null
+++ b/en/programs.sh
@@ -0,0 +1,12 @@
+add-programs ()
+{
+    sed -i                                              \
+        -e /'{PROGRAMS}'/'r '<(./build-programs.py)     \
+        -e /'{PROGRAMS}'/'c\'                           \
+        $1
+}
+
+title=Programs
+stylesheets=programmes
+transforms=("$(transform-li-current-a programs)")
+postprocess=add-programs
diff --git a/en/quartet.html b/en/quartet.html
new file mode 100644
index 0000000..bc432f0
--- /dev/null
+++ b/en/quartet.html
@@ -0,0 +1,27 @@
+<main>
+  <div id="photos">
+    <a class="member" href="sophie.html">
+      <img class="portrait" src="images/sophie/full.png">
+      <p class="name">Sophie Guille des Buttes</p>
+      <p class="instrument">violon</p>
+    </a>
+    <a class="member" href="david.html">
+      <img class="portrait" src="images/david/full.png">
+      <p class="name">David Forest</p>
+      <p class="instrument">violon</p>
+    </a>
+    <a class="member" href="hervé.html">
+      <img class="portrait" src="images/hervé/full.png">
+      <p class="name">Hervé Blandinières</p>
+      <p class="instrument">alto</p>
+    </a>
+    <a class="member" href="enguerrand.html">
+      <img class="portrait" src="images/enguerrand/full.png">
+      <p class="name">Enguerrand Bontoux</p>
+      <p class="instrument">violoncelle</p>
+    </a>
+  </div>
+  <div id="bio">
+{BIO}
+  </div>
+</main>
diff --git a/en/quartet.md b/en/quartet.md
new file mode 100644
index 0000000..b18e25a
--- /dev/null
+++ b/en/quartet.md
@@ -0,0 +1,19 @@
+[En 2015, quatre jeunes musiciens du Conservatoire Régional de Boulogne-Billancourt - situé rue de la Bellefeuille - fondent le quatuor Bellefeuille, en hommage à leur lieu de rencontre.]{.emph1} Ils découvrent dans cette formation l’équilibre idéal entre expression personnelle et force collective. Les ‘jeunes pousses’ entrent dans la classe d’Aline Bartissol et obtiennent en 2016 leur Diplôme d’Études Musicales avec les félicitations du jury.
+
+Leur personnalité se forme au gré de rencontres déterminantes comme celle de [Luc-Marie Aguera]{.emph1}, membre du quatuor Ysaye qui partage avec eux son expérience, son goût, son enthousiasme. Il les encourage à exprimer leurs émotions et à explorer en profondeur l’essence des œuvres qu’ils interprètent. Le quatuor se perfectionne par ailleurs auprès de Yovan Markovitch, de Jean Sulem et de Xavier Gagnepain.
+
+L'ensemble partage le répertoire du quatuor à cordes avec les publics accueillants des festivals de France. Il se produit dans les conservatoires d’Ile de France et a le plaisir de jouer dans la grande salle de la Philharmonie de Paris. Lors d’une série de concerts en partenariat avec le festival Virtuoso & Belcanto et le Dimore del Quartetto, les Bellefeuille savourent la beauté de la Toscane et l’engouement des italiens pour le quatuor à cordes. Ils s’appliquent également à aller [à la rencontre de nouveaux publics]{.emph1} comme lors de leur concert-médiation au centre de détention de Mauzac.
+
+[Le quatuor se plaît à aborder tous les styles et caractères,]{.emph1} de l'espièglerie de Haydn à l’intensité de Chostakovitch en passant par la passion Beethovenienne, la fougue de Mendelssohn et l'impressionnisme cher à Ravel. Le groupe enrichit et diversifie son répertoire en interprétant Dutilleux, Bartok et Brahms.
+
+[Le quatuor remercie chaleureusement Musique à Flaine et Le Dimore del Quartetto pour leur fidèle soutien.]{.emph2}
+
+## Instruments
+
+Sophie Guille des Buttes joue un violon de [Jean-Baptiste Vuillaume]{.emph3} (Paris, 1845) et un archet de [Pierre Grunberger]{.emph3} (2018).
+
+David Forest joue un violon de [Charles Enel]{.emph3} (Paris, 1928) gracieusement prêté par l’association “Talents et Violoncelles” et un archet de [Louis Bazin]{.emph3}.
+
+Hervé Blandinières joue un alto de [Stefan Von Baehr]{.emph3} (Paris, 2002) et un archet de [Louis Joseph Morisot]{.emph3}.
+
+Enguerrand Bontoux joue un violoncelle de [Jacquet-Gand]{.emph3} (Paris, 1898) et un archet de [Jean-Frédéric Schmitt]{.emph3}.
diff --git a/en/quartet.sh b/en/quartet.sh
new file mode 100644
index 0000000..48d83b5
--- /dev/null
+++ b/en/quartet.sh
@@ -0,0 +1,13 @@
+add-bio ()
+{
+    sed -i                                      \
+        -e /'{BIO}'/'r '<(pandoc en/quartet.md) \
+        -e /'{BIO}'/'c\'                        \
+        $1
+}
+
+title=Biography
+stylesheets=quatuor
+transforms=("$(transform-li-dropdown-current-a quartet)" # Desktop.
+            "$(transform-li-current-a quartet)")         # Mobile.
+postprocess=add-bio
diff --git a/en/sophie.membre.in b/en/sophie.membre.in
new file mode 100644
index 0000000..0054a3d
--- /dev/null
+++ b/en/sophie.membre.in
@@ -0,0 +1,16 @@
+Sophie Guille des Buttes
+violon
+#f0b607
+#203864
+Ta feuille préférée ? Celle du Ginkgo Biloba.
+Ta maison à Poudlard ? Poufsouffle ! “Si à Poufsouffle vous allez / Comme eux vous s'rez juste et loyal / Ceux de Poufsouffle aiment travailler / Et leur patience est proverbiale.”
+Un compositeur de prédilection ? Deux ! Beethoven et Ravel.
+Une œuvre qui te bouleverse ? Le 14e quatuor de Beethoven.
+Tes loisirs ? La lecture, le cinéma, la cuisine et les discussions au coin du feu… avec ou sans feu.
+Un souvenir marquant ? Un concert du quatuor Tetzlaff à la Philharmonie de Paris qui interprétait le 11eme quatuor de Chostakovitch. Hypnotisant !
+Une ville ? Barcelone pour l'univers fantastique de Gaudí.
+Des livres préférés ? La saga Ellana de Pierre Bottero, les aventures d’une jeune femme éprise de liberté. Les Frères Karamazov de Dostoïevski et la série Malaussène de Daniel Pennac, la vie d’une famille peu conventionnelle.
+Des films qui te parlent ? Le goût des merveilles d'Éric Besnard pour la douceur, Le brio de Ivan Attal pour la beauté de l'enseignement.
+Ce qui vous rassemble ? Un bon repas et une partie de tarot !
+Un rêve ? Partir avec le quatuor en tournée dans les petites villes de France pour rencontrer les gens, partager notre musique… et à 2 tandems !!
+Quel est ton parcours ? J'ai commencé le violon à 7 ans, après avoir été bouleversée par un disque de Christian Ferras interprétant le concerto de Sibelius. J’ai ensuite été accompagnée par trois grands pédagogues à qui je dois mon esthétique musicale : Christophe Poiget, Roland Daugareil et Luc-Marie Aguera.
diff --git a/en/template.html b/en/template.html
new file mode 100644
index 0000000..16d80e0
--- /dev/null
+++ b/en/template.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>{TITLE} - Bellefeuille Quartet</title>
+    <link rel="icon" href="../images/favicon.svg">
+    <link rel="stylesheet" href="../stylesheets/commun.css">
+{STYLESHEETS}
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@1,500&display=swap" rel="stylesheet">
+    <link rel="alternate" type="application/rss+xml" href="feed.xml">
+  </head>
+  <body>
+    <header class="slidingmenu">
+      <input type="checkbox">
+      <img class="button open" src="../images/menu.svg">
+      <div class="content">
+        <img class="button close" src="../images/close.svg">
+        <header class="banner">
+          <a href="index.html">
+            <img src="../images/logo.svg"
+                 alt="logo">
+            <h1>Bellefeuille Quartet</h1>
+          </a>
+        </header>
+        <a class="lang" href="{FR}">
+          EN
+        </a>
+        <nav class="menu">
+          <ol>
+            <li class="dropdown"><a href="quartet.html">The quartet</a>
+              <ul>
+                <li><a href="sophie.html">Sophie</a></li>
+                <li><a href="david.html">David</a></li>
+                <li><a href="hervé.html">Hervé</a></li>
+                <li><a href="enguerrand.html">Enguerrand</a></li>
+              </ul>
+            </li>
+            <li><a href="news.html">News</a></li>
+            <li><a href="programs.html">Programs</a></li>
+            <li><a href="gallery.html">Gallery</a></li>
+            <li><a href="contact.html">Contact</a></li>
+          </ol>
+        </nav>
+        <nav class="social">
+          <ul>
+            <li>
+              <a href="https://www.facebook.com/quatuorbellefeuille/"
+                 target="_blank" rel="noreferrer noopener">
+                <img src="../images/facebook-logo.svg">
+              </a>
+            </li>
+            <li>
+              <a href="https://www.instagram.com/quatuor.bellefeuille/"
+                 target="_blank" rel="noreferrer noopener">
+                <img src="../images/instagram-logo.svg">
+              </a>
+            </li>
+            <li>
+              <a href="https://www.youtube.com/playlist?list=PLtRSY8N4Fwcmh7e5lVPzQIqTukRRwHfts"
+                 target="_blank" rel="noreferrer noopener">
+                <img src="../images/youtube-logo.svg">
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <header class="banner">
+      <a href="index.html">
+        <img src="../images/logo.svg"
+             alt="logo">
+        <h1>Bellefeuille Quartet</h1>
+      </a>
+    </header>
+
+    <header class="menu">
+      <nav>
+        <ol>
+          <li class="dropdown"><a href="quartet.html">The quartet</a>
+            <ul>
+              <li><a href="sophie.html">Sophie</a></li>
+              <li><a href="david.html">David</a></li>
+              <li><a href="hervé.html">Hervé</a></li>
+              <li><a href="enguerrand.html">Enguerrand</a></li>
+            </ul>
+          </li>
+          <li><a href="news.html">News</a></li>
+          <li><a href="programs.html">Programs</a></li>
+          <li><a href="gallery.html">Gallery</a></li>
+        </ol>
+      </nav>
+    </header>
+
+{MAIN}
+
+    <footer class="social">
+      <a class="lang" href="">
+        EN
+      </a>
+      <a href="https://www.facebook.com/quatuorbellefeuille/"
+         target="_blank" rel="noreferrer noopener">
+        <img src="../images/facebook-logo.svg">
+      </a>
+      <a href="https://www.instagram.com/quatuor.bellefeuille/"
+         target="_blank" rel="noreferrer noopener">
+        <img src="../images/instagram-logo.svg">
+      </a>
+      <a href="https://www.youtube.com/playlist?list=PLtRSY8N4Fwcmh7e5lVPzQIqTukRRwHfts"
+         target="_blank" rel="noreferrer noopener">
+        <img src="../images/youtube-logo.svg">
+      </a>
+      <a class="contact" href="contact.html">
+        Contact
+      </a>
+    </footer>
+
+    <footer class="legal">
+      <p>
+        Legal mentions
+        - Icons adapted from : <a href="https://feathericons.com">Feather</a> ; <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
+        - Site map
+      </p>
+    </footer>
+  </body>
+</html>
diff --git a/template.html b/template.html
index dfcd294..d6c3581 100644
--- a/template.html
+++ b/template.html
@@ -25,7 +25,7 @@
             <h1>Quatuor Bellefeuille</h1>
           </a>
         </header>
-        <a class="lang" href="">
+        <a class="lang" href="{EN}">
           EN
         </a>
         <nav class="menu">