index example with tailwind

config.toml

@@ -1,5 +1,7 @@
 base_url = "/"
 
+ignored_content = ["*.kate-swp"]
+
 compile_sass = true
 
 build_search_index = false

content/404.md

@@ -2,4 +2,6 @@
 title = "Erreur 404"
 +++
 
-Nous ne savons pas quelle page vous cherchez...
+<div style="text-align:center">
+	<img style="max-width: 100%" alt="Erreur 404" src="/img/drawings/404.webp"/>
+</div>

content/_index.md

@@ -2,66 +2,60 @@
 title = "Librezo"
 +++
 
-<picture>
+<picture class="mx-auto container flex flex-col max-w-3xl my-10 justify-center">
 	<source srcset="/img/logo-color-dark.png" media="(prefers-color-scheme: dark)" />
 	<source srcset="/img/logo-color-light.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" />
-	<img decoding="async" class="big-logo" src="/img/logo-color-light.png" alt="Logo Librezo" aria-hidden/>
+	<img decoding="async" class="" src="/img/logo-color-light.png" alt="Logo Librezo" aria-hidden/>
 </picture>
-
+<span class=" my-10 text-center text-6xl font-librezo">Collectif d'artisans numériques</span>
-<span class="slogan3">Collectif d'artisans numériques</span>
+<div class=" my-20 flex flex-row justify-center items-center font-librezo text-xl md:text-3xl gap-x-2 md:gap-x-7 text-opacity-70 ">
-
+	<p class="gap-x-8 place-content-center flex flex-row max-w-[30%] flex-wrap"><span class="city">Aix</span> <span class="city">Bastia</span> <span class="city">Cajarc</span> <span class="city">Grasse</span> <span class="city">Le&nbsp;Havre</span> <span class="city">Limoux</span> <span class="city">Marseille</p>
-<div class="cities nn">
+	<div class="">
-	<p><span class="city">Aix</span> <span class="city">Bastia</span> <span class="city">Cajarc</span> <span class="city">Cambrai</span> <span class="city">Grasse</span> <span class="city">Le&nbsp;Havre</span> <span class="city">Limoux</span> <span class="city">Marseille</p>
+		<img class="-rotate-45" alt="Made in Chez Vous" src="/img/madein-purple.png"/>
-	<div class="madein-wrapper">
-		<img class="madein" alt="Made in Chez Vous" src="/img/madein-purple.png"/>
 	</div>
-	<p><span class="city">Montreuil</span> <span class="city">Nantes</span> <span class="city">Paris</span> <span class="city">Pau</span> <span class="city">Rennes</span> <span class="city">Rohanne</span> <span class="city">Toulouse</span></p>
+	<p class="gap-x-5 place-content-center flex flex-row max-w-[30%] flex-wrap"><span class="city">Montreuil</span> <span class="city">Nantes</span> <span class="city">Paris</span> <span class="city">Pau</span> <span class="city">Rennes</span> <span class="city">Rohanne</span> <span class="city">Toulouse</span></p>
 </div>
-
+<a class="mx-auto my-10" href="https://www.francenum.gouv.fr/activateurs/librezo" target="_blank">
-<span class="slogan2">Vos données personnelles devraient le rester</span>
+		<img alt="Activateur France Num" src="/img/francenum-activateur.jpg" style="width: 128px;"/>
-
+</a>
-<a href="/logiciel-libre" class="slogan1">Reprenez le contrôle</a>
+<a href="/logiciel-libre" class="hover:underline text-center font-librezo text-4xl md:text-8xl text-lib-blue">Reprenez le contrôle</a>
-
+<div class="container mx-auto flex flex-row gap-x-5 my-10 flex-wrap gap-y-5 justify-center">
-<div class="square_boxes">
+{{ square_box(title="Confidentialité", text="Vos données personnelles le restent") }}
-{{ square_box(title="Confidentialité", text="Vos données personnelles devraient le rester") }}
+{{ square_box(title="Résilience", text="Récupérez rapidement d'une panne avec des sauvegardes") }}
-{{ square_box(title="Sécurité", text="Boîtiers de serveurs en titane") }}
-{{ square_box(title="Résilience", text="Résistant à l'apocalypse") }}
 {{ square_box(title="Souveraineté", text="Reprenez le contrôle de votre infrastructure informatique") }}
-{{ square_box(title="Liberté", text="Choisissez, personnalisez") }}
+{{ square_box(title="Liberté", text="Choisissez, personnalisez&nbsp;: c'est du logiciel libre") }}
 {{ square_box(title="Interopérabilité", text="Passez vos données d’un système à l’autre sans contrainte") }}
-{{ square_box(title="Accessibilité", text="Des prix honnêtes") }}
+{{ square_box(title="Accessibilité", text="Des prix honnêtes et des logiciels faciles à prendre en main") }}
 {{ square_box(title="Proximité", text="On vient l’installer chez vous") }}
-{{ square_box(title="Écologie", text="On sauve des pandas") }}
+{{ square_box(title="Écologie", text="Ensemble, on cherche la solution adaptée à vos besoins, sans superflu") }}
 {{ square_box(title="Savoir-faire", text="Vous êtes au contact des experts") }}
-{{ square_box(title="Solidarité", text="Nous reversons une partie de nos revenus au développement des logiciels utilisés") }}
+{{ square_box(title="Solidarité", text="15% de nos bénéfices sont reversés au développement des logiciels utilisés") }}
 </div>
+<h2 class="text-5xl text-center w-full bg-gradient-to-r from-lib-blue to-lib-purple text-white py-3 font-librezo" style="margin-top: 96px;">Pour qui&#8239;?</h2>
+<p class="text-center my-5">PME, Associations, Tout type de structure, Collectifs<p>
 
-<h2 class="title-bar">Pour qui&#8239;?</h2>
+<h2 class="text-5xl text-center w-full bg-gradient-to-r from-lib-blue to-lib-purple text-white py-3 font-librezo">Comment ça se passe&#8239;?</h2>
 
-PME, Associations, Tout type de structure, Collectifs
+<h3 class="text-4xl text-center w-full font-librezo my-5">Autonomisation de l'infrastructure réseau</h3>
 
-<h2 class="title-bar">Comment ça se passe&#8239;?</h2>
+<div class="flex flex-row flex-wrap gap-x-1 container mx-auto justify-center">
-
-<h3 class="title-bar2">Autonomisation de l'infrastructure réseau</h3>
-
-<div class="process_boxes">
 {{ process_box(number="1", title="Étude", description="Définition du besoin et propositions de solutions adaptées.") }}
 {{ process_box(number="2", title="Installation", description="Montage du serveur à domicile et installation du système et des composants logiciels.") }}
 {{ process_box(number="3", title="Configuration", description="Réglages sur mesure et configurations de sécurité.") }}
 {{ process_box(number="4", title="Acquisition", description="Votre serveur GNU/Linux est prêt et 100% entre vos mains. Tests.") }}
 </div>
 
-<h3 class="title-bar2">Formations optionnelles</h3>
+<h3 class="text-4xl text-center w-full font-librezo my-5">Accompagnements optionnels</h3>
 
-<div class="process_boxes">
+<div class="flex flex-row flex-wrap gap-x-5 container mx-auto justify-center">
 {{ process_box(number="5", title="Accompagnement utilisateur", description="Apprenez en quelques heures à utiliser vos outils.") }}
 {{ process_box(number="6", title="Accompagnement administrateur", description="Devenez administrateur-système de votre propre infrastructure (plusieurs semaines).") }}
 {{ process_box(number="7", title="Autonomie", description="Vous êtes capable de gérer votre système et vos applications : vous êtes autonome et n'avez plus besoin de tiers de confiance.") }}
 </div>
 
-<h2 class="title-bar" style="margin-top: 96px;">Ils nous font confiance</h2>
+<h2 class="text-5xl text-center w-full bg-gradient-to-r from-lib-blue to-lib-purple text-white py-3 font-librezo" style="margin-top: 96px;">Ils nous font confiance</h2>
 
-<div class="client_boxes">
+<div class="flex flex-col container mx-auto">
 {% client_box(
 	title = "Novelcast"
 	href = "https://novelcast.com"
@@ -99,3 +93,7 @@ PME, Associations, Tout type de structure, Collectifs
 {% end %}
 
 </div>
+
+<div  class="container mx-auto" style="text-align:center">
+	<img class="inline mb-5" style="max-width: 100%" alt="Librezo : Parce que oui !" src="/img/drawings/rejoignez-nous-affiche.webp" loading="lazy"/>
+</div>

content/charte.md

@@ -2,6 +2,10 @@
 title = "Charte"
 +++
 
+<div style="text-align:center">
+	<img style="max-width:100%;max-height:600px" alt="Charte" src="/img/drawings/charte.webp" aria-hidden/>
+</div>
+
 Librezo est un collectif autogéré d'individus, d’associations et d’entreprises qui mutualisent leurs ressources, compétences et connaissances au sein d'une structure à taille humaine dans le but de&nbsp;:
 
 * promouvoir des solutions informatiques en licences libres comme alternatives aux systèmes privateurs des GAFAM

content/contact.md

@@ -4,28 +4,11 @@ title = "Contact"
 leaflet = 1
 +++
 
-Pour un devis, pour rejoindre notre collectif ou pour toute question relative à nos services,
+<div style="text-align:center">
+	<img style="max-width: 100%" alt="Contactez-nous" src="/img/drawings/contact.webp" aria-hidden/>
+</div>
 
-## On est là
+Pour un devis, pour rejoindre notre collectif ou pour toute question relative à nos services&nbsp;:
-
-{% map() %}
-[[43.3879, 6.0785], "Brignoles", [["Francis Drubigny"]]],
-//[[42.6998, 9.4518], "Bastia", [["Fred"]]],
-[[44.4742, 1.8296], "Cajarc", [["Sylvestre Mignot"]]],
-[[50.1718, 3.2305], "Cambrai", [["Tobias Ollive"]]],
-[[43.6578, 6.9228], "Grasse", [["Ismaël Bouya"], ["Vincent Dubois"]]],
-[[49.4927, 0.1641], "Le Havre", [["Pierre-Jean Chancellier"]]],
-[[43.0465, 2.2449], "Limoux", [["Fabrice"]]],
-[[43.3099, 5.4127], "Marseille", [["Jean-Jacques Brucker"]]],
-[[48.5421, 2.6551], "Melun", [["Étienne Bouché"]]],
-//[[43.6048, 3.8818], "Montpellier", []],
-[[48.8584, 2.4371], "Montreuil", [["Cédric Dumond"]]],
-//[[47.2084, -1.6026], "Nantes", [["Clément"]]],
-[[43.2926, -0.3703], "Pau", [["Thibaut Parent"]]],
-[[48.1077, -1.6795], "Rennes", [["Philippe Lhardy"]]],
-[[46.0321, 4.0730], "Roanne", [["Pierre Kuhn"]]],
-[[43.5931, 1.4272], "Toulouse", [["Baptiste Malet-Schalck"], ["Mathilde Longuet"]]],
-{% end %}
 
 Librezo<br/>
 Chez Oasis21<br/>
@@ -34,3 +17,24 @@ Chez Oasis21<br/>
 
 tel&nbsp;: <a href="tel:+33782306653">07.82.30.66.53</a><br/>
 Courriel&nbsp;: <a href="mailto:contact@librezo.fr">contact@librezo.fr</a>
+
+## On est là
+
+{% map() %}
+[[43.3879, 6.0785], "Brignoles", [["Francis Drubigny"]]],
+[[42.6998, 9.4518], "Bastia", [["Fred Romboni"]]],
+[[44.4742, 1.8296], "Cajarc", [["Sylvestre Mignot"]]],
+//[[50.1718, 3.2305], "Cambrai", []],
+[[43.6578, 6.9228], "Grasse", [["Ismaël Bouya"], ["Vincent Dubois"]]],
+[[49.4927, 0.1641], "Le Havre", [["Pierre-Jean Chancellier"]]],
+[[43.0465, 2.2449], "Limoux", [["Fabrice"]]],
+[[43.3099, 5.4127], "Marseille", [["Jean-Jacques Brucker"]]],
+[[48.5421, 2.6551], "Melun", [["Étienne Bouché"]]],
+//[[43.6048, 3.8818], "Montpellier", []],
+[[48.8584, 2.4371], "Montreuil", [["Cédric Dumond"]]],
+[[47.2084, -1.6026], "Nantes", [["Clément Thomas"]]],
+[[43.2926, -0.3703], "Pau", [["Thibaut Parent"]]],
+[[48.1077, -1.6795], "Rennes", [["Tobias Ollive"], ["Philippe Lhardy"]]],
+[[46.0321, 4.0730], "Roanne", [["Pierre Kuhn"]]],
+[[43.5931, 1.4272], "Toulouse", [["Baptiste Malet-Schalck"], ["Mathilde Longuet"]]],
+{% end %}

content/fonctionnement.md

@@ -2,6 +2,12 @@
 title = "Fonctionnement"
 +++
 
+<div style="text-align:center">
+	<img style="max-width: 100%" alt="Fonctionnement" src="/img/drawings/usine.webp" aria-hidden/>
+</div>
+
+Tout libriste désireux de rejoindre le collectif est libre d'en faire la demande sous réserve d'avoir [lu, compris et accepté la charte](/charte).
+
 ## Fonctionnement de Librezo avec ses clients
 
 - Librezo est à la fois un collectif de membres prestataires informel _et_ une SAS tout à fait officielle. Librezo n'a pas de salariés, uniquement des prestataires.

content/logiciel-libre.md

@@ -2,6 +2,10 @@
 title = "Le logiciel libre, nécessaire outil de notre souveraineté numérique"
 +++
 
+<div style="text-align:center">
+	<img style="max-width: 100%" alt="Reprenez le contrôle" src="/img/drawings/dragon.webp" aria-hidden/>
+</div>
+
 Pourquoi proposons-nous des logiciels libres, et d'abord qu'entendons-nous par "libre"&#8239;?
 
 ## Les libertés informatiques

content/mentions-legales.md

@@ -11,7 +11,7 @@ dont le siège social est situé : Chez Oasis21, 2 rue de la Clôture 75019
 représentée par Cédric Dumond, en sa qualité de Président<br/>
 immatriculée au RCS de Paris 910096619<br/>
 n<sup>o</sup> de téléphone&nbsp;: [07.82.30.66.53](tel:+33782306653)</a><br/>
-adresse mail : [contact@librezo.fr](mailto:contact@librezo.fr)</a>
+adresse mail&nbsp;: [contact@librezo.fr](mailto:contact@librezo.fr)</a>
 
 ## Directeur de publication
 
@@ -21,3 +21,9 @@ Cédric Dumond
 
 - [EthicIT](https://ethicit.fr/)
 - Chez Cédric Dumond, 53 rue Colmet Lépinay 93100 Montreuil
+
+## Conception
+
+Site conçu par <a href="https://txmn.tk" target="_blank">tuxmain</a> avec la complicité de GRA, Djool et Attilax.
+
+Le [code source](https://git.txmn.tk/Librezo/website) du site est disponible sous licence <a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>.

content/qui-sommes-nous.md

@@ -1,15 +1,15 @@
 +++
 title = "Qui sommes-nous ?"
+[extra]
+carousel = true
 +++
 
-Librezo est un collectif décentralisé, né de la rencontre d'ami·es libristes désirant partager leur passion et leur savoir-faire dans le domaine des réseaux et du logiciel libre.
+<div style="text-align:center">
-
+	<img style="max-width: 100%;max-height: 400px;" alt="Qui sommes-nous" src="/img/drawings/qui.webp" aria-hidden/>
-<div style="text-align: center; margin-bottom: 32px;">
-	<a href="https://www.francenum.gouv.fr/activateurs/librezo" target="_blank">
-		<img alt="Activateur France Num" src="/img/francenum-activateur.jpg" style="width: 128px;"/>
-	</a>
 </div>
 
+Librezo est un collectif décentralisé, né de la rencontre d'ami·es libristes désirant partager leur passion et leur savoir-faire dans le domaine des réseaux et du logiciel libre.
+
 <div class="team nn">
 {% team_box(
 	title = "Étienne Bouché"
@@ -38,7 +38,7 @@ Librezo est un collectif décentralisé, né de la rencontre d'ami·es libristes
 {% end %}
 {% team_box(
 	title = "Tobias Ollive"
-	place = "Cambrai"
+	place = "Rennes"
 	subtitle = "Le monocycliste"
 	img = "tobias.jpg"
 ) %}
@@ -150,6 +150,10 @@ Librezo est un collectif décentralisé, né de la rencontre d'ami·es libristes
 {% end %}
 </div>
 
+<div style="text-align:center">
+	<img style="max-width: 100%;max-height: 400px;" alt="Qui sommes-nous" src="/img/drawings/masque.webp" aria-hidden/>
+</div>
+
 ## Partenaires
 
 <div class="partners nn1200">
@@ -182,4 +186,30 @@ Librezo est un collectif décentralisé, né de la rencontre d'ami·es libristes
 
 ## Nos prestataires ont travaillé pour...
 
-Edf, Air-France, Airbus, CNES, Météo France, La Poste, la Ruche qui dit Oui, solucom, Tera
+Hors du cadre de Librezo, nos prestataires ont travaillé pour&nbsp;:
+
+{% carousel(id="carousel-prestaworkedfor") %}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Airbus" alt="Airbus" src="/img/prestasworkedfor/airbus.svg"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Air France" alt="Air France" src="/img/prestasworkedfor/airfrance.png"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="EADS Astrium" alt="EADS Astrium" src="/img/prestasworkedfor/astrium.jpg"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Axiom-Team" alt="Axiom-Team" src="/img/prestasworkedfor/axiom.svg"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="CNES" alt="CNES" src="/img/prestasworkedfor/cnes.png"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="EDF" alt="EDF" src="/img/prestasworkedfor/edf.svg"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Elsys Design" alt="Elsys Design" src="/img/prestasworkedfor/elsysdesign.svg"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="FretLink" alt="FretLink" src="/img/prestasworkedfor/fretlink.png"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Hologic" alt="Hologic" src="/img/prestasworkedfor/hologic.webp"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="La Poste" alt="La Poste" src="/img/prestasworkedfor/laposte.svg"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="La Ruche qui dit Oui" alt="La Ruche qui dit Oui" src="/img/prestasworkedfor/laruchequiditoui.svg"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Lycée professionnel Jean-Pierre Timbaud" alt="Lycée professionnel Jean-Pierre Timbaud" src="/img/prestasworkedfor/lyceejptimbaud.png"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Météo France" alt="Météo France" src="/img/prestasworkedfor/meteofrance.png"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Nova Discovery" alt="Nova Discovery" src="/img/prestasworkedfor/novadiscovery.png"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Open.global" alt="Open.global" src="/img/prestasworkedfor/open.global.png"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Orange" alt="Orange" src="/img/prestasworkedfor/orange.svg"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Philips" alt="Philips" src="/img/prestasworkedfor/philips.svg"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Sagem" alt="Sagem" src="/img/prestasworkedfor/sagem.png"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="SII" alt="SII" src="/img/prestasworkedfor/sii.png"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Solucom" alt="Solucom" src="/img/prestasworkedfor/solucom.webp"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Tera" alt="Tera" src="/img/prestasworkedfor/tera.png"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Thales" alt="Thales" src="/img/prestasworkedfor/thales.svg"/>') }}
+{{ carousel_item(msg='<img loading="lazy" class="prestaworkedfor"title="Trainline" alt="Trainline" src="/img/prestasworkedfor/trainline.svg"/>') }}
+{% end %}

content/rejoignez-nous.md

@@ -0,0 +1,13 @@
++++
+title = "Rejoignez-nous"
++++
+
+<div style="text-align:center">
+	<img style="max-width: 100%" alt="Rejoignez-nous" src="/img/drawings/rejoignez-nous.webp" aria-hidden/>
+</div>
+
+Vous connaissez bien GNU/Linux, le réseau, vous savez installer du hardware, un OS, ouvrir des ports sur une box, coder en bash, débugger un logiciel, identifier des failles, les licences libres sont vos livres de chevet... Ou simplement, vous voulez vous investir dans la promotion du logiciel libre au sein d'une équipe de personnes très diverses mais partageant des valeurs communes&#8239;? Devenez membre et prestataire Librezo&#8239;!
+
+La condition&#8239;? Être en accord avec [la charte de Librezo](/charte) et s'engager à la respecter.
+
+Notre Collectif est à l'image de notre code&nbsp;: ouvert et transparent. Les nouveaux membres sont toujours les bienvenus&nbsp;: nouvelles compétences, nouvelles idées, nouveaux clients et nouvelles localités, pour pouvoir à terme agir sur l'ensemble du territoire.

content/tarifs.md

@@ -2,6 +2,10 @@
 title = "Services et tarifs"
 +++
 
+<div style="text-align:center">
+	<img style="max-width:100%;max-height:600px" alt="Services et tarifs" src="/img/drawings/tarifs.webp" aria-hidden/>
+</div>
+
 ## Auto-hébergement
 
 Chaque service informatique en ligne, que ce soit un site web, une boîte mail, un document partagé, etc. fonctionne en général sur un ordinateur relié à Internet en permanence, que l'on nomme un _serveur_. On dit que le serveur héberge le service. Beaucoup de ces serveurs sont gérés par très peu d'acteurs ([les géants du web](https://degooglisons-internet.org/fr/)) et regroupés par milliers dans des datacenters.

sass/css/base.scss

@@ -1,5 +1,6 @@
 @import "defs";
 
+@import "carousel";
 @import "clients";
 @import "footer";
 @import "header";
@@ -168,11 +169,11 @@ h3 {
 	max-height: calc(100vh - 64px);
 }
 
-@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
+/*@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
 	html {
 		background: radial-gradient(circle at 100%, rgba(2, 148, 217, 0.2) 20%, white);
 	}
-}
+}*/
 
 @media (prefers-color-scheme: dark) {
 	html {
@@ -188,3 +189,18 @@ h3 {
 		color: $grey2;
 	}
 }
+
+@media screen and (min-width: 641px) {
+	.img-right {
+		float: right;
+	}
+}
+@media screen and (max-width: 640px) {
+	.img-right {
+		text-align: center;
+	}
+}
+
+.img-right img {
+	max-width: 100vw;
+}

sass/css/carousel.scss

@@ -0,0 +1,35 @@
+.carousel {
+	width: 100%;
+	display: flex;
+	gap: 16px;
+	align-content: center;
+	align-items: center;
+	justify-content: space-evenly;
+}
+
+// Zola generates noisy empty paragraphs
+.carousel p {
+	display: none;
+}
+
+.carousel-item {
+	display: inline-block;
+}
+
+.carousel-hidden {
+	display: none;
+}
+
+// Carousel: prestas worked for...
+
+#carousel-prestaworkedfor {
+	min-height: 128px;
+	background-color: white;
+	padding-top: 7px;
+}
+
+.prestaworkedfor {
+	max-width: 128px;
+	max-height: 128px;
+	margin: auto;
+}

sass/css/footer.scss

@@ -12,6 +12,10 @@ footer {
 	max-width: 1100px;
 	padding: 16px 4px;
 	margin: auto;
+	gap: 20px;
+	justify-content: center;
+	align-items: center;
+	
 }
 
 .footer-pane {

sass/css/process.scss

@@ -1,7 +1,6 @@
 @import "defs";
 
 .process_boxes {
-	flex: 62%;
 	text-align: center;
 	font-family: LunaSans;
 }
@@ -11,7 +10,7 @@
 	width: 256px;
 	padding-top: 4px;
 	vertical-align: top;
-	margin: 8px 16px;
+	margin: 8px 20px;
 }
 
 .process_box-number {

sass/css/square_box.scss

@@ -12,9 +12,11 @@
 }
 
 .square_box {
-	width: 256px;
+	width: 200px;
-	height: 256px;
+	min-height: 200px;
+	padding: 8px;
 	background: linear-gradient(-0.125turn, $blue, $violet);
+	color: white;
 }
 
 .square_box-title {

src-styles/base.scss

@@ -0,0 +1,17 @@
+
+@import "./markdown.scss";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "LunaSans";
+  src: url("../fonts/LunaSans-Regular.ttf");
+}
+
+
+@font-face {
+  font-family: "Neucha";
+  src: url("../fonts/Neucha.ttf");
+}

src-styles/markdown.scss

@@ -0,0 +1,168 @@
+.markdown {
+  @apply text-lg;
+  @apply font-serif;
+}
+
+/* Font class used for headers */
+.markdown-header {
+    @apply font-sans;
+}
+
+/* Base spacing between paragraph */
+.markdown-p-spacing {
+    @apply mb-4;
+}
+
+.markdown-list-styling {
+    @apply list-inside;
+    @apply markdown-p-spacing;
+}
+
+.markdown:last-child {
+    @apply mb-0;
+}
+
+/* Header styling */
+.markdown h1 {
+  @apply mb-6;
+  @apply text-5xl;
+}
+.markdown h2 {
+  @apply mb-5;
+  @apply text-4xl;
+}
+.markdown h3 {
+  @apply mb-4;
+  @apply text-3xl;
+}
+.markdown h4 {
+  @apply mb-3;
+  @apply text-2xl;
+}
+.markdown h5 {
+  @apply mb-2;
+  @apply text-xl;
+}
+.markdown h6 {
+  @apply mb-1;
+  @apply text-lg;
+}
+
+/* Highlighting styling */
+.markdown em {
+  @apply italic;
+}
+.markdown strong {
+  @apply font-bold;
+}
+.markdown del {
+  @apply line-through;
+}
+
+/* Link styling */
+.markdown a {
+  @apply underline;
+  @apply text-blue-400;
+}
+
+/* Code/Verbatim styling */
+.markdown pre {
+  @apply p-4;
+  @apply text-lg;
+  @apply font-mono;
+  @apply bg-gray-100;
+  @apply markdown-p-spacing;
+}
+.markdown code {
+  @apply px-1;
+  @apply font-mono;
+  @apply bg-gray-100;
+}
+
+/* Blockquote styling */
+.markdown blockquote {
+  @apply py-4;
+  @apply px-2;
+  @apply markdown-p-spacing;
+
+  @apply border-2;
+  @apply border-l-0;
+  @apply border-r-0;
+  @apply border-gray-900;
+
+  @apply bg-gray-400;
+  @apply bg-opacity-50;
+}
+/* Fix embedded blockquotes */
+.markdown blockquote>blockquote {
+    @apply ml-4;
+    @apply mt-1;
+    @apply mb-0;
+}
+
+/* List styling */
+.markdown ul {
+    @apply markdown-list-styling;
+    @apply list-disc;
+}
+.markdown ol {
+    @apply markdown-list-styling;
+    @apply list-decimal;
+}
+.markdown ul li > ul {
+    @apply ml-4;
+    @apply mb-0;
+}
+.markdown ol li > ol {
+    @apply ml-4;
+    @apply mb-0;
+}
+.markdown ol li p {
+    @apply inline;
+}
+
+/* Img styling */
+.markdown img {
+  @apply max-w-full;
+}
+
+/* Table Styling */
+.markdown p {
+    @apply markdown-p-spacing;
+}
+
+/* Table Styling */
+.markdown table {
+    @apply border-2;
+    @apply border-b-0;
+    @apply border-black;
+}
+.markdown table thead {
+    @apply border-b-4;
+    @apply border-black;
+}
+.markdown table tbody tr {
+    @apply border-b-2;
+    @apply border-black;
+}
+.markdown table tr th {
+    @apply border-r-2;
+    @apply border-black;
+    @apply px-1;
+}
+.markdown table tr th:last-of-type {
+    @apply border-r-0;
+}
+.markdown table tr td {
+    @apply border-r-2;
+    @apply border-black;
+    @apply px-1;
+}
+.markdown table tr td:last-of-type {
+    @apply border-r-0;
+}
+
+/* Footnote Styling */
+.markdown .footnote-definition p {
+    @apply inline;
+}

static/img/prestasworkedfor/airbus.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="398.97101" height="73.885002" viewBox="0 0 398.971 73.884998">
+  <path fill="#00205b" d="M183.899 25.24c0-13.482-8.845-23.729-27.073-23.729h-36.672v70.863h17.258V16.826h19.522c7.227 0 9.814 4.1 9.814 8.845 0 4.854-2.696 8.845-9.923 8.845h-16.718l23.729 37.858h19.631s-16.18-25.455-16.071-25.455c10.032-2.372 16.503-9.383 16.503-21.679M91.248 1.511h17.257999v70.863998H91.248zM47.134 45.625H32.611l10.747-21.787h.217l24.16 48.536h19.846L51.448 1.511H36.133L0 72.374h19.414l5.853-11.864H54.36zm199.758-10.03c5.502-3.021 8.414-7.874 8.414-14.993 0-11.433-8.521-19.091-22.866-19.091h-40.342v70.863h41.96c14.668 0 24.268-7.874 24.268-19.846-.001-8.304-4.638-14.56-11.434-16.933m-37.534-19.092h23.082c3.452 0 6.148 2.696 6.148 6.256s-2.696 6.256-6.257 6.256h-22.974V16.503zm23.512 40.986h-23.513V43.036h23.513c4.207 0 7.443 3.021 7.443 7.119.001 4.206-3.236 7.334-7.443 7.334m79.924-16.394c0 10.756-4.962 16.718-14.776 16.718-9.707 0-14.669-5.962-14.669-16.718V1.511h-17.688v38.29c0 21.896 11.541 34.084 32.357 34.084s32.465-12.188 32.465-34.084V1.511h-17.689Zm63.744-11.433c-16.383-3.989-19.953-4.37-19.953-9.061 0-3.629 4.098-5.393 11.001-5.393 9.168 0 18.931 2.3 24.484 5.717l5.501-14.453C390.453 2.697 379.99 0 367.802 0c-18.229 0-28.476 9.061-28.476 21.248 0 13.114 7.654 18.442 25.239 22.219 13.69 3.018 16.609 4.901 16.609 8.736 0 4.166-3.774 6.041-11.216 6.041-10.786 0-20.548-2.62-28.367-6.903l-5.285 15.1c8.521 4.53 21.248 7.443 34.083 7.443 17.905 0 28.582-8.306 28.582-22.22.002-11.163-7.22-18.334-22.433-22.002"/>
+<style xmlns="" id="custom-style-code-0" type="text/css">body.didomi-popup-open[class] {
+  overflow: initial !important;
+}</style></svg>

static/img/prestasworkedfor/edf.svg

@@ -0,0 +1,3 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="126.245 53.187 47.027 20" width="47.027" height="20">
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#FF5E11" d="M138.305 56.251c.075-.625-.018-1.537.476-1.967.144-.666 1.192-.511 1.029-.935-.101-.266-.595-.139-.794-.091-.15.037-1.589.491-2.142.554l-.702-.196c-.902.121-1.423.84-1.925 1.41-.422.479-.991 1.648-.538 2.35l-.075.46 1.025 1.498c.354.254.4.442.781.692l.235.354c.312.204 1.229.207 1.385.074 1.478.138 1.317-2.855 1.786-3.483-.058-.282-.306-.575-.541-.72zm-6.371 8.986c.313-.081.848-.123 1.128-.263.446-.224 1.98-1.296 1.492-2.169-.151-1.84-2.371-.285-3.316-.93-.956-.123-2.031-1.933-2.319-2.707-.112-.308-.065-.202-.219-.445.001-.024-.098.085-.097.059-.28.326-.231.61-.275 1.404l-.376-.023c-.024.288-.053.445-.188.593-.026.049-.056.096-.083.145-.237-.079-.119.034-.216-.165-.881.044-.815.929-1.22 1.433.017 1.651 3.289 3.69 5.689 3.068zm10.864-5.019c-1.427.216-2.3.671-2.839 1.044-.376.263-.486.439-.567.549-.081.111-.137.355-.096.613.041.256.145.528.367.68 1.753-.13 4.795-.24 5.388 1.232.031.204.077.327.082.376.58-.143.155-.092 1.01.043.196.03.679-.078.999-.157.146-.033.228-.166.228-.166s-.027-.14-.02-.216c0 0 .3.021.423-.072.811-.132.384-.513.768-.941-.231-2.752-3.054-3.392-5.743-2.985zm-3.128 5.987c-.406.31-.577.233-.816.714-.023 0 .037.073.012.073.243.483.798.679 1.207 1.019.128.107.473.705.636.748.184.22.304.826.424.826.125.171-.01.573.111.729.01.72-.091.771-.216.908 0 .051.069.182.069.23.033.034.322.241.447.216.392.012 1.997 1.265 2.125 1.506 1.151.087 1.067-.265 1.862-.603.215-.092.386-.005.526-.151.147-.15.16-.448.302-.603.019-2.831-3.834-5.515-6.689-5.612zm-4.537.646c-.16.171-.601.234-.724.428-.188.296-.621.969-.96 1.289-1.091 1.035-3.425 1.556-4.577.566-.075.005-.031.048.059.331.084.536.516 1.794.356 2.115.104.356.212.227.407.424.134.134.188.483.342.578.176-.012.352-.023.527-.036l.096.296c.225-.018.45-.033.676-.05.127.028.51.227.622.257l.751-.052c.572.152 1.072-.087 1.556-.413.27-.182.564-.152.804-.357a5.575 5.575 0 001.04-1.28c.543-.986.359-3.347-.133-3.931-.191-.21-.419-.214-.842-.165z"/><path fill="#07387A" d="M162.778 60.414c2.371 0 3.977 1.498 3.977 4.181 0 3.37-2.203 4.367-4.512 4.367h-3.09c.01-.187 0-.685 0-1.311v-5.928c0-.624.01-1.022 0-1.31h3.625zm-.693 6.924c1.311 0 2.375-.433 2.375-2.744 0-1.967-1.064-2.621-2.375-2.621h-.686v5.365h.686zm8.029.313c0 .626.029 1.311.029 1.311h-2.291s.016-.685.016-1.311v-5.928c0-.624-.016-1.31-.016-1.31h5.418v1.654s-1.211-.031-1.621-.031h-1.535v1.722l1.535.017c.287 0 1.275-.017 1.275-.017v1.574s-.877-.023-1.275-.023l-1.535.01v2.332zm-15.535-.417c-1.079 0-1.908-.726-1.908-1.859v-.096s2.003-.05 2.682-.05c1.156 0 1.631-.011 2.542-.022v-.646c0-2.913-1.236-4.33-3.779-4.33-1.173 0-3.9.44-3.9 4.52 0 2.721 1.374 4.347 3.775 4.347 1.886 0 3.043-.48 3.882-1.093-.094-.142-.797-1.403-.889-1.541-.505.384-1.335.77-2.405.77zm-1.909-3.59c.033-.495.211-1.644 1.459-1.644 1.28 0 1.351 1.08 1.351 1.649v.115s-.854.023-1.365.023-1.452-.023-1.452-.023l.007-.12z"/>
+</svg>

static/img/prestasworkedfor/elsysdesign.svg

@@ -0,0 +1,19 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 670 180" width="670" height="180">
+	<style type="text/css"> .st0{fill:none;} .st1{fill:#243884;} .st2{fill:#F9B803;} .st3{fill:#7685BC;} .st4{fill:#89A4D5;} </style>
+	<rect class="st0" width="670" height="180"/>
+	<path class="st1" d="M271.3,109.6v-54h48.2V65h-38.8v35.1h38.9v9.4L271.3,109.6z M287.5,86.1v-7.9h29.9v7.9H287.5z"/>
+	<path class="st1" d="M327.6,109.6v-54h9.4v44.5h36.3v9.4L327.6,109.6z"/>
+	<path class="st1" d="M380.1,109.6v-9.4h40.4c2.1,0.1,4.2-0.6,5.8-1.9c1.4-1.3,2.1-3.2,2-5.1c0.2-2-0.6-3.9-2-5.2 c-1.6-1.2-3.7-1.9-5.7-1.7h-24.9c-2.3,0-4.6-0.4-6.8-1.2c-1.9-0.7-3.7-1.8-5.2-3.2c-1.4-1.4-2.5-3-3.3-4.8 c-0.8-2-1.2-4.1-1.1-6.2c0-2.1,0.3-4.1,1-6.1c0.7-1.8,1.8-3.4,3.2-4.8c1.5-1.4,3.3-2.5,5.2-3.2c2.3-0.8,4.7-1.2,7.1-1.2h38.7v9.4 h-38.7c-1.9-0.1-3.7,0.5-5,1.8c-1.2,1.3-1.9,3.1-1.8,4.9c-0.1,1.8,0.6,3.6,1.9,4.8c1.4,1.2,3.1,1.8,4.9,1.7h24.7 c5.5,0,9.7,1.3,12.5,3.9s4.3,6.5,4.3,11.7c0,2.1-0.3,4.3-1,6.3c-0.7,1.9-1.7,3.6-3.1,5c-1.5,1.5-3.3,2.6-5.2,3.3 c-2.4,0.8-4.8,1.2-7.4,1.2L380.1,109.6z"/>
+	<path class="st1" d="M470.4,109.6V89.1l-28.6-33.5h12.7l21,24.9l21.1-24.9h12l-28.7,33.5v20.5H470.4z"/>
+	<path class="st1" d="M510,109.6v-9.4h40.4c2.1,0.1,4.2-0.6,5.8-1.9c1.4-1.3,2.1-3.2,2-5.1c0.2-2-0.6-3.9-2-5.2 c-1.7-1.3-3.7-1.9-5.8-1.8h-24.8c-2.3,0-4.7-0.4-6.9-1.2c-1.9-0.7-3.7-1.8-5.2-3.2c-1.4-1.4-2.5-3-3.3-4.8 c-0.8-2-1.2-4.1-1.1-6.2c0-2.1,0.3-4.1,1.1-6.1c0.7-1.8,1.8-3.4,3.2-4.8c1.5-1.4,3.3-2.5,5.2-3.2c2.3-0.8,4.7-1.2,7.1-1.2h38.8 v9.4h-38.7c-1.9-0.1-3.7,0.5-5,1.8c-1.2,1.3-1.9,3.1-1.8,4.9c-0.1,1.8,0.6,3.6,1.9,4.8c1.4,1.2,3.1,1.8,4.9,1.7h24.7 c5.5,0,9.7,1.3,12.5,3.9c2.8,2.6,4.3,6.5,4.3,11.7c0,2.1-0.3,4.3-1,6.3c-0.7,1.9-1.7,3.6-3.2,5c-1.5,1.5-3.3,2.6-5.2,3.3 c-2.4,0.8-4.8,1.2-7.4,1.2L510,109.6z"/>
+	<path class="st1" d="M422.9,121.3h9c8.2,0,13.8,4.6,13.8,10.5v0.1c0,5.9-5.7,10.6-13.8,10.6h-9V121.3z M425.9,123.5v16.7h6.1 c6.6,0,10.8-3.6,10.8-8.3v-0.1c0-4.7-4.2-8.3-10.8-8.3L425.9,123.5z"/>
+	<path class="st1" d="M452,121.3h18.8v2.2H455v7.2h14.2v2.2H455v7.4H471v2.2h-19L452,121.3z"/>
+	<path class="st1" d="M475.3,139.4l1.9-1.8c2.5,2,5.7,3.1,8.9,3c3.5,0,5.8-1.5,5.8-3.6v-0.1c0-2-1.3-3.1-6.8-4 c-6-1.1-8.8-2.6-8.8-6.1v-0.1c0-3.3,3.6-5.8,8.5-5.8c3.3-0.1,6.5,0.8,9.2,2.6l-1.7,1.9c-2.2-1.5-4.8-2.3-7.5-2.3 c-3.4,0-5.5,1.5-5.5,3.4v0.1c0,2,1.3,3.1,7.1,4.1s8.5,2.8,8.5,6v0.1c0,3.6-3.7,6-8.9,6C482.1,142.9,478.4,141.7,475.3,139.4z"/>
+	<path class="st1" d="M501,121.3h2.9v21.2H501V121.3z"/>
+	<path class="st1" d="M510.4,131.9L510.4,131.9c0-5.8,5.2-11,13.1-11c3.5-0.2,6.9,0.8,9.7,2.8l-1.9,1.9c-2.3-1.7-5.1-2.5-7.9-2.4 c-5.8,0-9.9,4-9.9,8.7v0.1c0,5,4,8.8,10.3,8.8c2.7,0,5.3-0.7,7.5-2.1v-5.2h-8v-2.2h10.8v8.4c-3.1,2.1-6.7,3.3-10.5,3.2 C515.5,142.8,510.4,138,510.4,131.9z"/>
+	<path class="st1" d="M540.8,121.3h2.8l16.4,16.9v-16.9h2.9v21.2h-2.3l-16.8-17.3v17.3h-2.9V121.3z"/>
+	<path class="st2" d="M174.3,108h-17.1c-2.3,0-4.2-1.9-4.2-4.2c0-0.8,0.3-1.6,0.7-2.3l8.5-13c1.2-1.9,3.8-2.5,5.7-1.2 c0.5,0.3,0.9,0.7,1.2,1.2l8.6,13c1.3,1.9,0.7,4.6-1.2,5.8C175.9,107.8,175.2,108,174.3,108L174.3,108z"/>
+	<path class="st3" d="M175.1,149.2c53.7-1.2,50.6-12.2,33-41.5c-15.2-25.2-24.7-37.4-35.7-30.1c3.1,4.5,6.4,9.8,10.1,15.9 c21.9,36.4,9.1,40.5-33,41.4c-2.7,0.1-5.3,0.1-7.7,0C141.7,145.6,151.1,149.7,175.1,149.2"/>
+	<path class="st1" d="M117.5,79.8c-26.4,48.2-15.7,51.2,17.7,50.5c28.7-0.6,43.7-2.8,43.3-16.3c-5.3,0.5-11.4,0.7-18.4,0.8 c-41.5,0.9-38.4-12.6-17.7-50.4c1.4-2.5,2.7-4.7,3.9-6.8C137.6,51.9,129.3,58.2,117.5,79.8"/>
+	<path class="st4" d="M211.8,64.3C184.6,12.2,176,20,157.7,50.2c-15.8,26-22.3,40.6-10.3,48.2c2.6-5,5.9-10.6,9.7-16.9 c22.8-37.5,32.8-26.7,54.1,14.1c1.4,2.7,2.6,5.2,3.7,7.5C224.7,98.6,223.9,87.6,211.8,64.3"/>
+</svg>

static/img/prestasworkedfor/laposte.svg

@@ -0,0 +1,36 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1497 1157" width="1497" height="1157">
+	<title>20221102_lp_logotype_bleu_vertical_rvb-63652c442d623-ai</title>
+	<style>
+		.s0 { fill: #ffcb05 } 
+		.s1 { fill: #003da5 } 
+	</style>
+	<g id="LA POSTE bleu vertic fd jaune rvb">
+		<g id="&lt;Group&gt;">
+			<path id="&lt;Path&gt;" class="s0" d="m1496.7 1156.8h-1496.7v-1156.5h1496.7z"/>
+			<g id="&lt;Group&gt;">
+				<g id="&lt;Group&gt;">
+					<g id="&lt;Group&gt;">
+						<path id="&lt;Path&gt;" class="s1" d="m476.5 248.6h543.2c30.2 0 50.2 34.5 33.6 63.3l-27.6 47.9h-333.7l-217.8-99c-6.8-3.1-5-12.2 2.3-12.2z"/>
+						<path id="&lt;Path&gt;" class="s1" d="m692.1 402.3h543.5c6.3 0 12.3 4.9 12.3 12.3 0 6.5-4.4 10.7-8.9 11.9l-983.4 266.3c-6.4 1.8-11-6.5-5.6-10.8z"/>
+						<g id="&lt;Group&gt;">
+							<path id="&lt;Path&gt;" class="s1" d="m910.7 559.5l-42.8 74.3c-18.5 32.1-59.1 52-93.7 52.7l-356.8 6.6z"/>
+						</g>
+					</g>
+					<g id="&lt;Group&gt;">
+						<g id="&lt;Group&gt;">
+							<g id="&lt;Group&gt;">
+								<path id="path6 00000034068371187463065150000000408205262632485029 " fill-rule="evenodd" class="s1" d="m520.3 912.9h-14.3c-9.7 0-13.1-0.5-16.8-7.8l-7.6-15h-77.1l-11.5 22.8h-26.8l64.3-124.1h25.5zm-50-45.1l-27.3-54.1-27.3 54.1z"/>
+								<path id="path8 00000004520143955491896060000013227297966408741815 " fill-rule="evenodd" class="s1" d="m594.8 876.2v36.7h-25v-123c13.1-0.3 30.8-0.8 45.4-0.8 28.5 0 47.4 4 58.7 15.3 6.9 7.2 10.5 16.9 10 26.8 0 35.5-27.7 45.2-67.3 45.2-5.4 0-15.5-0.2-21.8-0.2zm0-22.8c6.2 0.1 14.1 0.2 19.6 0.2 16 0 30.6-0.5 38.4-8.3 3.6-3.6 5.5-8.6 5.2-13.7 0.1-4.2-1.4-8.3-4.2-11.5-7.8-7.8-19.2-8.3-39.4-8.3-5.5 0-13.4 0.1-19.6 0.3z"/>
+								<path id="path10 00000065790594047962160590000007701534720150946964 " fill-rule="evenodd" class="s1" d="m845.9 851.4c0 35.2-27.8 63.9-74.4 63.9-46.6 0-74.3-28.7-74.3-63.9 0-35.2 27.7-63.9 74.3-63.9 46.6 0 74.4 28.7 74.4 63.9zm-74.4-41.5c-28.2 0-48.3 16.3-48.3 41.5 0 25.2 20.1 41.6 48.3 41.6 28.3 0 48.4-16.4 48.4-41.6 0-25.2-20.1-41.5-48.4-41.5z"/>
+								<path id="path12 00000104670540483031483880000011727881976820259252 " class="s1" d="m960 820.9c-12.1-7.9-26.3-12.2-40.8-12.4-15 0-29 4.4-29 14.4 0 23.7 84.4 10.1 84.4 53.8 0 24.2-25.9 38.6-56.9 38.6-19.8 0-44.7-7-60.1-17.5l12.7-19c14.6 10 31.9 15.4 49.6 15.5 13.2 0 28.7-4.4 28.7-14.8 0-25.6-84.8-9.6-84.8-52.7 0-22.9 24.6-39.3 55.9-39.3 16.6 0 38.5 5.3 52 13.8z"/>
+								<path id="polygon14 00000092439648608340538940000003915751334627379846 " class="s1" d="m1102.4 812.7h-47.4v100.2h-24.9v-100.2h-46.6v-22.9h118.9z"/>
+								<path id="&lt;Path&gt;" class="s1" d="m1224.9 789.8v22.9h-82v26h75.2v22.8h-75.2v28.6h84.3v22.8h-100.3c-5.7 0-8.9-3.7-8.9-8.9v-114.2z"/>
+								<path id="&lt;Path&gt;" class="s1" d="m293.3 890.1h70.2l-11.8 22.8h-74.4c-5.7 0-8.9-3.7-8.9-8.9v-114.2h24.9z"/>
+							</g>
+						</g>
+					</g>
+				</g>
+			</g>
+		</g>
+	</g>
+</svg>

static/img/prestasworkedfor/laruchequiditoui.svg

@@ -0,0 +1 @@
+<svg width="262" height="44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M119.334 0h-1.98c-.067 0-.101 0-.093.11l.518 5.947c0 .026.011.052.031.07a.092.092 0 00.071.024h.935a.094.094 0 00.119-.051l.518-5.947c-.017-.128-.051-.153-.119-.153zm-15.618 2.57l-1.699.993c-.06 0-.068.077 0 .145l3.398 4.893a.092.092 0 00.136 0l.849-.467a.092.092 0 000-.128l-2.548-5.411c-.034-.051-.077-.06-.136-.026zm29.822 0l1.699.993c.059 0 .068.077 0 .145L131.839 8.6a.095.095 0 01-.068.03.092.092 0 01-.068-.03l-.85-.467a.094.094 0 010-.128l2.549-5.411c.034-.051.076-.06.136-.026zm-.981 27.165h3.602v3.602h-3.602v-3.602zm-32.317 0h3.602v3.602h-3.602v-3.602z" fill="#146E7C"/><path fill-rule="evenodd" clip-rule="evenodd" d="M139.279 36.85V23.74l-10.143-10.15h-22.088L96.004 24.234v17.5h43.326l-.051-4.884zm-.935-12.742v16.736h-9.914V29.638h-3.602v11.189h-6.303v-16.6l10.441-9.523 9.378 9.404zM117.622 40.83V24.265l-20.728-.026V40.83h20.728zm41.844-.048a2.311 2.311 0 01-1.495-.91 8.244 8.244 0 00.79-3.1v-15.08a6.945 6.945 0 00-.629-2.752 4.51 4.51 0 00-4.434-2.786c-3.313 0-4.902 2.42-5.012 5.539v15.079c.015.962.229 1.91.628 2.786a4.46 4.46 0 004.392 2.753 5.9 5.9 0 001.878-.315 4.102 4.102 0 003.882 1.988v-3.202zm-4.482-19.088v15.08h.008c0 .977-.323 1.877-1.266 1.877-.943 0-1.257-.926-1.257-1.878V21.694c0-.917.272-1.877 1.257-1.877.986 0 1.258.943 1.258 1.877z" fill="#146E7C"/><path d="M167.689 36.477V16.139h3.764v20.338a5.719 5.719 0 01-2.124 4.663 4.994 4.994 0 01-7.28-1.877 6.967 6.967 0 01-.629-2.786V16.139h3.763v20.338c0 .951.315 1.877 1.258 1.877.943 0 1.248-.9 1.248-1.877zm10.201-20.338v25.596h-3.755V16.14h3.755z" fill="#146E7C"/><path fill-rule="evenodd" clip-rule="evenodd" d="M186.055 41.735h2.965c3.483 0 5.352-.688 6.371-2.642 1.019-1.954 1.113-5.072 1.113-10.11 0-5.038-.102-8.24-1.113-10.194-1.011-1.954-2.888-2.65-6.371-2.65h-2.965v25.596zm6.531-7.871c-.004.917-.121 1.83-.348 2.718v.009c-.382 1.249-1.113 1.393-2.404 1.393V19.898c1.291 0 2.022.144 2.404 1.359a11.7 11.7 0 01.348 2.718v9.889z" fill="#146E7C"/><path d="M202.562 16.139v25.596h-3.763V16.14h3.763zm1.331 0h10.857v3.865h-3.551v21.731h-3.755V20.004h-3.551v-3.865z" fill="#146E7C"/><path fill-rule="evenodd" clip-rule="evenodd" d="M224.718 42.147c1.395.36 2.877.1 4.066-.713a5.717 5.717 0 002.124-4.672v-15.08a6.944 6.944 0 00-.629-2.752 4.51 4.51 0 00-4.392-2.786c-3.313 0-4.902 2.42-5.012 5.539V36.77c.015.963.229 1.911.629 2.787a4.992 4.992 0 003.214 2.59zm2.446-20.462v15.088l.009-.009c0 .977-.323 1.877-1.266 1.877-.943 0-1.257-.925-1.257-1.877v-15.08c0-.917.272-1.877 1.257-1.877.985 0 1.257.943 1.257 1.878z" fill="#146E7C"/><path d="M239.918 36.477V16.139h3.763v20.338a5.715 5.715 0 01-2.123 4.663 4.997 4.997 0 01-7.281-1.877 7 7 0 01-.629-2.786V16.139h3.764v20.338c0 .951.314 1.877 1.257 1.877.943 0 1.249-.9 1.249-1.877zm10.211-20.338v25.596h-3.764V16.14h3.764z" fill="#146E7C"/><path fill-rule="evenodd" clip-rule="evenodd" d="M260.557 34.828l.943-18.69h-4.078l.943 18.69h2.192zm.716 6.906v-3.866h-3.662v3.866h3.662z" fill="#146E7C"/><path d="M3.767 16.139v22.088h4.979v3.483H.004V16.139h3.763z" fill="#146E7C"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17.784 16.139h-4.596L9.34 41.735h3.653l.68-5.216h3.618l.697 5.225h3.662l-3.866-25.605zm-2.388 7.647h.212l.077.662 1.079 8.08h-2.55c.156-1.128.304-2.262.453-3.396.234-1.789.469-3.579.729-5.346zm17.31 7.158h.994l1.946 10.806h3.78l-2.404-12.403c1.427-.977 2.09-3.27 2.09-5.82 0-4.833-1.912-7.382-6.406-7.382h-3.78v25.597h3.78V30.944zm.003-11.078c2.005 0 2.786 1.163 2.786 3.797 0 2.608-.824 3.797-2.786 3.797v-7.595z" fill="#146E7C"/><path d="M47.101 36.477V16.139h3.764v20.338a5.717 5.717 0 01-2.124 4.663 4.995 4.995 0 01-7.323-1.877 6.983 6.983 0 01-.629-2.786V16.139h3.764v20.338c0 .951.314 1.877 1.257 1.877.943 0 1.291-.9 1.291-1.877zm12.917.285v-3.517h3.517v3.517a5.717 5.717 0 01-2.124 4.664 4.995 4.995 0 01-7.28-1.877 6.983 6.983 0 01-.629-2.787V21.683c.11-3.118 1.699-5.539 5.012-5.539a4.511 4.511 0 014.392 2.787 6.95 6.95 0 01.629 2.752v3.509h-3.517v-3.509c0-.985-.357-1.877-1.427-1.877s-1.232.977-1.326 1.877v15.08c.043.934.383 1.877 1.326 1.877 1.112.008 1.427-.816 1.427-1.878zm10.048-6.172v11.145h-3.789V16.14h3.79v10.585h2.922V16.139h3.763v25.596H72.99V30.59h-2.923zm17.526-14.451v3.865H82.75v6.72h3.483v4.129H82.75v7.034h4.842v3.865h-8.606V16.14h8.606z" fill="#146E7C"/></svg>

static/img/prestasworkedfor/orange.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="283.5px" height="283.5px" viewBox="0 0 283.5 283.5" enable-background="new 0 0 283.5 283.5" xml:space="preserve">
+<g>
+	<rect x="0" y="0" fill="#FF7900" width="283.5" height="283.5"/>
+	<g>
+		<path fill="#FFFFFF" d="M111.2,256c-4,2.6-8.4,3.9-13,3.9c-7.4,0-11.7-4.9-11.7-11.5c0-8.8,8.1-13.5,24.8-15.4v-2.2    c0-2.9-2.2-4.5-6.2-4.5c-4,0-7.3,1.6-9.6,4.5l-7-4c3.7-5.1,9.3-7.7,16.8-7.7c10.3,0,16.1,4.5,16.1,11.7c0,0,0,28.5,0,28.6h-9.2    L111.2,256z M96.6,247.7c0,2.6,1.7,5.1,4.7,5.1c3.3,0,6.4-1.4,9.6-4.2v-9.3C101.2,240.6,96.6,243,96.6,247.7z"/>
+		<path fill="#FFFFFF" d="M129.5,221.1l8.6-1.2l0.9,4.7c4.9-3.5,8.7-5.4,13.6-5.4c8.1,0,12.3,4.3,12.3,12.8v27.5h-10.4v-25.7    c0-4.8-1.3-7-5-7c-3.1,0-6.2,1.4-9.7,4.4v28.3h-10.3V221.1z"/>
+		<path fill="#FFFFFF" d="M233.7,260.2c-11.6,0-18.6-7.5-18.6-20.5c0-13.1,7-20.6,18.4-20.6c11.4,0,18.2,7.2,18.2,20.1    c0,0.7-0.1,1.4-0.1,2h-26.3c0.1,7.5,3.2,11.2,9.3,11.2c3.9,0,6.5-1.6,8.9-5.1l7.6,4.2C247.8,257.2,241.8,260.2,233.7,260.2z     M241.5,234.5c0-5.3-3-8.4-7.9-8.4c-4.7,0-7.6,3-8,8.4H241.5z"/>
+		<path fill="#FFFFFF" d="M34.9,260.6c-10.3,0-19.5-6.5-19.5-20.8c0-14.3,9.3-20.8,19.5-20.8c10.3,0,19.5,6.5,19.5,20.8    C54.4,254.1,45.2,260.6,34.9,260.6z M34.9,227.7c-7.7,0-9.2,7-9.2,12c0,5.1,1.4,12,9.2,12c7.8,0,9.2-7,9.2-12    C44.1,234.7,42.6,227.7,34.9,227.7z"/>
+		<path fill="#FFFFFF" d="M61.5,220h9.9v4.6c1.9-2.5,6.5-5.5,10.9-5.5c0.4,0,0.9,0,1.3,0.1v9.7c-0.2,0-0.3,0-0.5,0    c-4.5,0-9.5,0.7-11,4.2v26.2H61.5V220z"/>
+		<path fill="#FFFFFF" d="M190.3,251c7.9-0.1,8.5-8.1,8.5-13.3c0-6.2-3-11.2-8.6-11.2c-3.7,0-7.9,2.7-7.9,11.6    C182.4,243,182.7,251,190.3,251z M208.9,219.9v37.4c0,6.6-0.5,17.4-19.3,17.6c-7.8,0-14.9-3.1-16.4-9.8l10.2-1.6    c0.4,1.9,1.6,3.9,7.4,3.9c5.4,0,8-2.6,8-8.7v-4.6l-0.1-0.1c-1.6,2.9-4.2,5.7-10.2,5.7c-9.2,0-16.4-6.4-16.4-19.7    c0-13.2,7.5-20.6,15.9-20.6c7.9,0,10.8,3.6,11.5,5.5l-0.1,0l0.9-4.7H208.9z"/>
+		<path fill="#FFFFFF" d="M255.7,206.8h-4.1v11.3h-2.2v-11.3h-4.1v-1.7h10.3V206.8z M272.7,218.1h-2.2v-10.9h-0.1l-4.3,10.9h-1.4    l-4.3-10.9h-0.1v10.9h-2.2v-13h3.3l3.9,9.9l3.8-9.9h3.3V218.1z"/>
+	</g>
+</g>
+<style xmlns="" id="custom-style-code-0" type="text/css">body.didomi-popup-open[class] {
+  overflow: initial !important;
+}</style></svg>

static/img/prestasworkedfor/philips.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg id="svg2759" xmlns="http://www.w3.org/2000/svg" height="91.636" width="499.76" version="1.0">
+ <defs id="defs2761">
+  <clipPath id="clipPath2855">
+   <path id="path2857" d="m0 595.28h841.89v-595.28h-841.89v595.28z"/>
+  </clipPath>
+ </defs>
+ <g id="layer1" transform="translate(-127.26 -383.69)">
+  <g id="g2851" transform="matrix(1.25 0 0 -1.25 -154.36 849.47)">
+   <g id="g2853" clip-path="url(#clipPath2855)">
+    <path id="path2859" d="m360.92 371.16h-21.48v-27.97h-22.36v27.97h-21.48v-70.37h21.48v27.68h22.36v-27.68h21.48v70.37zm74.72-56.23v56.23h-21.48v-70.37h38.84l3.23 14.14h-20.59zm-37.36 56.23h-21.48v-70.37h21.48v70.37zm87.08 0h-21.47v-70.37h21.47v70.37zm105.9-17.96c0 3.83 3.83 5.6 10 5.6 6.77 0 14.13-1.48 19.13-3.55l-1.76 15.32c-5.6 1.18-10.6 2.06-19.71 2.06-17.36 0-29.13-6.85-29.13-21.2 0-24.73 33.55-19.73 33.55-31.21 0-4.41-3.25-6.76-11.19-6.76-7.05 0-17.95 2.35-24.42 5.59l2.36-16.2c6.47-2.36 15.29-3.53 22.36-3.53 17.94 0 32.65 5.89 32.65 23.56 0 23.54-33.84 19.13-33.84 30.32m-60.59-35.63c19.99 0 32.65 10.31 32.65 28.27 0 19.72-13.53 26.79-35.6 26.79-8.53 0-18.83-0.59-26.18-1.47v-70.37h21.48v16.78h7.65zm11.47 27.97c0-9.12-4.41-15.31-15.6-15.31h-3.52v29.08c1.25 0.07 2.42 0.07 3.52 0.07 10.59 0 15.6-5 15.6-13.84m-287.72-27.97c20 0 32.65 10.31 32.65 28.27 0 19.72-13.53 26.79-35.59 26.79-8.54 0-18.83-0.59-26.19-1.47v-70.37h21.48v16.78h7.65zm11.48 27.97c0-9.12-4.42-15.31-15.6-15.31h-3.53v29.08c1.25 0.07 2.43 0.07 3.53 0.07 10.59 0 15.6-5 15.6-13.84" fill="#0B5ED7"/>
+   </g>
+  </g>
+ </g>
+<style xmlns="" id="custom-style-code-0" type="text/css">body.didomi-popup-open[class] {
+  overflow: initial !important;
+}</style></svg>

static/img/prestasworkedfor/thales.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="484" height="57.4" version="1.1" viewBox="0 0 484 57.4" xmlns="http://www.w3.org/2000/svg">
+<title>Thales Group logo</title>
+ <style type="text/css">.logoSt2{fill:#2C2F73;}
+	.logoSt4{fill:#5EBFD4;}</style>
+ <path class="logoSt2" d="m484 42.1c0 7.8-2.3 10.1-8.5 12-6.7 2-18.6 3.3-25.7 3.3-8.4 0-18.9-0.5-27.8-2.6v-9h49.3v-12.3h-34.9c-10.5 0-14.4-2.9-14.4-13.1v-5.4c0-8.1 2.4-10.5 8.9-12.2 6.6-1.7 17.4-2.8 24.5-2.8 8.6 0 18.9 0.7 27.8 2.7v9h-48.5v10.3h34.9c10.5 0 14.4 2.8 14.4 13.1z"/>
+ <path class="logoSt2" d="m400 54.7c-10.2 2-20.5 2.6-30.5 2.6s-20.4-0.6-30.7-2.6v-52c10.2-2 20.6-2.7 30.5-2.7 10 0 20.1 0.6 30.3 2.7v9.3h-46.2v10.4h30.1v10.8h-30.1v12.3h46.4v9.2z"/>
+ <path class="logoSt2" d="m321 54.7c-9.2 2-18.4 2.6-27.3 2.6s-18.3-0.5-27.5-2.6v-53.4h14.7v43.5h40.1z"/>
+ <path class="logoSt2" d="m249 55.1c-4.9 1.4-11.4 1.9-16.2 2l-22.7-45.8h-1.3l-22.6 45.8c-4.8-0.1-10.5-0.6-15.4-2l28.7-53.7h20.5z"/>
+ <path class="logoSt4" d="m219 41.4c0 5.3-4.3 9.5-9.6 9.5s-9.5-4.3-9.5-9.5c0-5.3 4.3-9.5 9.5-9.5 5.3 0 9.6 4.2 9.6 9.5"/>
+ <path class="logoSt2" d="m153 55.1c-4.7 1.4-9.7 1.8-14.7 1.9v-23.3h-36.5v23.3c-5-0.1-10-0.6-14.7-1.9v-52.8c4.7-1.4 9.7-1.8 14.7-1.9v22.5h36.5v-22.5c5 0.1 10 0.6 14.7 1.9z"/>
+ <path class="logoSt2" d="m66.2 12.1h-25.8v44h-14.6v-44h-25.8v-9.4c11.1-2 22.3-2.7 33.1-2.7s22 0.6 33.1 2.7z"/>
+</svg>

static/js/carousel.js

@@ -0,0 +1,51 @@
+var carousels = [];
+
+class Carousel {
+	constructor(obj) {
+		this.obj = obj;
+		this.current = 0;
+		this.items = [];
+		this.items_widths = [];
+		for(var i = 0; i < this.obj.children.length; i ++) {
+			var item = this.obj.children[i];
+			if(item.classList.contains("carousel-item")) {
+				this.items.push(item);
+				this.items_widths.push(Math.min(item.offsetWidth, 128));
+			}
+		}
+	}
+	step() {
+		this.current = (this.current+1) % this.items.length;
+		var max_width = this.obj.offsetWidth;
+		var width = 16*this.items.length;
+		for(var i = 0; i < this.items.length; i ++) {
+			var j = (i + this.current) % this.items.length;
+			var item = this.items[j];
+			if(!item.classList.contains("carousel-hidden")) {
+				// Update width
+				this.items_widths[j] = Math.min(item.offsetWidth, 128);
+			}
+			width += this.items_widths[j];
+			if(width > max_width) {
+				item.classList.add("carousel-hidden");
+			} else {
+				this.obj.appendChild(item);
+				item.classList.remove("carousel-hidden");
+			}
+		}
+	}
+}
+
+function step_carousels() {
+	for(carousel of carousels) {
+		carousel.step();
+	}
+}
+
+window.onload = function() {
+	for(obj of document.getElementsByClassName("carousel")) {
+		carousels.push(new Carousel(obj))
+	}
+	step_carousels();
+	setInterval(step_carousels, 2000);
+};

tailwind.config.js

@@ -0,0 +1,38 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./templates/**/*.html",
+    "./content/**/*.md",
+           ],
+  theme: {
+    extend: {
+        fontFamily: {
+          'sans': ['LunaSans', 'system-ui', 'sans-serif'],
+          'librezo': ["Neucha"],
+        },
+        dropShadow: {
+          'purple' :  '1px 2px 1px rgba(172, 68, 255, 1)',
+        },
+        colors: {
+          "mattermost": "#734596",
+          "nexctloud": "#99cde9",
+          "bbb": "#83d0f5",
+          "lib-purple": "#ac44ff",
+          "lib-blue": "#0294d9",
+        },
+    },
+    container: {
+      padding: {
+        DEFAULT: '1rem',
+        sm: '2rem',
+        lg: '4rem',
+        xl: '5rem',
+        '2xl': '6rem',
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+    ],
+}
+

templates/base.html

@@ -2,9 +2,12 @@
 <!doctype html>
 <html lang="fr">
 	<head>
-		<meta charset="utf-8"/>
+		 <meta name="apple-mobile-web-app-capable" content="yes">
-		<title>{% block title %}{% endblock title %}</title>
+    <meta charset="utf-8" />
-		<link rel="stylesheet" href="/css/base.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <!-- Stylesheets -->
+    <link href="{{get_url(path='styles/main.css',cachebust=true)}}" rel="stylesheet" type="text/css" />
 		{% if page.extra.leaflet or section.extra.leaflet %}<link rel="stylesheet" href="/vendor/leaflet/leaflet.css"/>{% endif %}
 		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
 		<meta name="viewport" content="width=device-width"/>
@@ -18,8 +21,8 @@
 			</p>
 			<a href="#" onclick="document.getElementById('dev-warning').remove()">fermer</a>
 		</div>
-		<header>
+		<header class="w-full h-16 bg-white container px-4 md:px-0 h-full mx-auto flex justify-between items-center">
-			<a href="/">
+			<a href="/" class="hover:drop-shadow-purple">
 				<picture>
 					<source srcset="/img/librezo-little-white.png" media="(prefers-color-scheme: dark)"/>
 					<source srcset="/img/librezo-little-black.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"/>
@@ -27,41 +30,61 @@
 				</picture>
 				<h1 class="sr-only">Librezo</h1>
 			</a>
-			<nav id="header-menu">
+			<nav id="header-menu" class="text-2xl hidden xl:flex z-0">
-				<ul>
+				<ul class="fixed top-0 left-0 px-10 py-16 bg-white w-full z-50 space-y-5 h-full
-					<li><a href="/fonctionnement">Fonctionnement</a></li>
+                xl:relative xl:flex xl:p-0 xl:bg-transparent xl:flex-row xl:space-x-6 xl:space-y-0">
-					<li><a href="/tarifs">Services et tarifs</a></li>
+					<li><a class="hover:drop-shadow-purple" href="/fonctionnement">Fonctionnement</a></li>
-					<li><a href="/qui-sommes-nous">Qui sommes-nous</a></li>
+					<li><a class="hover:drop-shadow-purple" href="/tarifs">Services et tarifs</a></li>
-					<li><a href="/charte">Charte</a></li>
+					<li><a class="hover:drop-shadow-purple" href="/qui-sommes-nous">Qui sommes-nous</a></li>
-					<li><a href="/contact">Contact</a></li>
+					<li><a class="hover:drop-shadow-purple" href="/charte">Charte</a></li>
+					<li><a class="hover:drop-shadow-purple" href="/contact">Contact</a></li>
 				</ul>
 			</nav>
+			<div class="flex items-center xl:hidden z-10">
+                <button class="texte-neutral-800 text-4xl font-bold hover:drop-shadow-purple duration-300"
+                    onclick="toggleMenu()">
+                    &#9776;
+                </button>
+            </div>
+            
+	<script>
+        var menu = document.getElementById('header-menu');
+        function toggleMenu() {
+            menu.classList.toggle('hidden');
+            menu.classList.toggle('space-y-3');
+        }
+    </script>
+            
 		</header>
 		{% block body %}{% endblock body %}
-		<footer>
+		<footer class="w-full bg-gradient-to-r from-lib-blue to-lib-purple pt-5 text-neutral-200 pb-10">
-			<div class="footer-wrapper">
+			<div class="grid grid-cols-3 container mx-auto">
-				<div class="footer-pane">
+				<div class="">
-					<a href="/contact" class="footer-bigger">Contactez-nous</a>
+					<a href="/contact" class="hover:underline text-[#ffddbb] text-3xl">Contactez-nous</a>
-					<ul>
+					<ul class="list-disc text-xl space-y-0.5 mt-5 pl-10">
-						<li><a href="tel:+33782306653">07.82.30.66.53</a></li>
+						<li><a class="hover:underline text-[#ffddbb]" href="tel:+33782306653">07.82.30.66.53</a></li>
-						<li><a href="mailto:contact@librezo.fr">contact@librezo.fr</a></li>
+						<li><a class="hover:underline text-[#ffddbb]" href="mailto:contact@librezo.fr">contact@librezo.fr</a></li>
-						<li>Rejoignez-nous</li>
+						<li><a  class="hover:underline text-[#ffddbb]" href="/rejoignez-nous">Rejoignez-nous</a></li>
 					</ul>
 				</div>
-				<div class="footer-pane">
+				<div>
-					<ul>
+					<ul class="list-disc text-xl space-y-0.5 mt-5 pl-10 pb-10">
-						<li><a href="/mentions-legales">Mentions légales</a></li>
+						<li><a class="hover:underline  text-[#ffddbb]" href="/mentions-legales">Mentions légales</a></li>
-						<li><a href="/rgpd">RGPD</a></li>
+						<li><a class="hover:underline  text-[#ffddbb]" href="/rgpd">RGPD</a></li>
 						<li>SIRET 91009661900028</li>
 					</ul>
-					<span><a href="https://git.txmn.tk/Librezo/website">Code source du site</a> sous licence <a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a></span> 
-				</div>
-				<div class="footer-pane">
 					<p>
-						Librezo propose une alternative aux services en ligne en favorisant l'auto-hébergement. Avec un accompagnement sur mesure et des solutions logicielles libres installées sur votre serveur, reprendre et garder le contrôle de vos données n'a jamais été aussi facile.
+						<a class="hover:underline text-[#ffddbb]" href="https://git.txmn.tk/Librezo/website">Code source du site</a> sous licence <a class="hover:underline text-[#ffddbb]" href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a><br/>
+						Dessins de GRA, licence <a class="hover:underline text-[#ffddbb]" href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a> 
+					</p>
+				</div>
+				<div class="text-xl">
+					<p>
+						Librezo propose une alternative aux services en ligne en favorisant l'auto-hébergement. Avec un accompagnement sur mesure et des <a class="hover:underline text-[#ffddbb]" href="/logiciel-libre">solutions logicielles libres</a> installées sur votre serveur, reprendre et garder le contrôle de vos données n'a jamais été aussi facile.
 					</p>
 				</div>
 			</div>
 		</footer>
+		{% if page.extra.carousel or section.extra.carousel %}<script type="text/javascript" src="/js/carousel.js"></script>{% endif %}
 	</body>
 </html>

templates/index.html

@@ -6,7 +6,7 @@
 {% endblock head %}
 
 {% block body %}
-<main class="center">
+<main class="flex flex-col">
 	{{section.content | safe}}
 </main>
 {% endblock body %}

templates/shortcodes/carousel.html

@@ -0,0 +1,3 @@
+<div id="{{ id | safe }}" class="carousel">
+	{{ body | markdown | safe }}
+</div>

templates/shortcodes/carousel_item.html

@@ -0,0 +1,3 @@
+<div class="carousel-item">
+	{{ msg | safe }}
+</div>

templates/shortcodes/client_box.html

@@ -1,6 +1,5 @@
-<div class="client_box">
+<div class="flex flex-col md:grid md:grid-cols-4 my-10 gap-x-3">
-	<div class="client_box-left">
+	<div class="col-span-1 self-center justify-self-center mb-5">
-		<div class="client_box-left-row">
 			<a class="client_box-link" href="{{href|safe}}">
 				{% if img_dark %}
 				<picture>
@@ -12,12 +11,10 @@
 				<img class="client_box-img" src="{{img|safe}}" alt="{{title}}" title="{{title}}" loading="lazy"/>
 				{% endif %}
 			</a>
-		</div>
 	</div>
-	<div class="client_box-right">
+	<div class="col-span-3">
-		<p class="client_box-text">
 			{{body|safe}}
-			{% if sign %}<br/><span class="client_box-sign">{{sign|safe}}</span>{% endif %}
+			{% if sign %}<br/><span class="text-neutral-700">{{sign|safe}}</span>{% endif %}
 		</p>
 	</div>
 </div>

templates/shortcodes/process_box.html

@@ -1,5 +1,5 @@
-<div class="process_box">
+<div class="max-w-[250px] text-center font-librezo flex flex-col ">
-	<span class="process_box-number">{{number|safe}}</span><br/>
+	<span class=" mx-auto py-4  text-3xl  font-bold text-white w-16 h-16 rounded-full bg-gradient-to-r from-lib-blue to-lib-purple">{{number|safe}}</span><br/>
-	<span class="process_box-title">{{title|safe}}</span>{% if description %}<br/>
+	<span class="text-2xl font-bold mt-5">{{title|safe}}</span>{% if description %}<br/>
-	<span class="process_box-description">{{description|safe}}</span>{% endif %}
+	<span class="text-xl">{{description|safe}}</span>{% endif %}
 </div>

templates/shortcodes/square_box.html

@@ -1,4 +1,4 @@
-<div class="square_box">
+<div class="w-[200px] min-h-[200px] p-2 text-white from-lib-purple to-lib-blue bg-gradient-to-br rounded-md text-center">
-	<span class="square_box-title">{{ title }}</span>
+	<span class="mx-auto text-2xl font-librezo">{{ title | safe }}</span>
-	<p class="square_box-text">{{ text }}</p>
+	<p class="mt-5">{{ text | safe }}</p>
 </div>