first commit

README.md

@@ -0,0 +1,9 @@
+# grav4arn
+
+## Contenu ##
+Page presentant les offres VPS
+
+## Installation ##
+Contenu du repertoire "user" à copier dans une install grav.
+Il faut en plus ajouter les plugins : email (https://getgrav.org/download/plugins/email/2.7.2) et form (https://getgrav.org/download/plugins/form/2.16.4)
+

user/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Grav
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

user/blueprints.yaml

@@ -0,0 +1,13 @@
+name: Site d'**Alsace Réseau Neutre**
+version: 1.0.0
+description: "Le site d'ARN"
+icon: group
+author:
+  name: ARN
+  email: contact@arn-fai.net
+  url: 
+homepage: 
+demo: 
+keywords: 
+bugs: 
+license: MIT

user/config/plugins/email.yaml

@@ -0,0 +1,17 @@
+enabled: true
+from:
+from_name:
+to:
+to_name:
+mailer:
+  engine: sendmail
+  smtp:
+    server: localhost
+    port: 25
+    encryption: none
+    user: ''
+    password: ''
+  sendmail:
+    bin: '/usr/sbin/sendmail -bs'
+content_type: text/html
+debug: false

user/config/plugins/error.yaml

@@ -0,0 +1,3 @@
+enabled: true
+routes:
+  404: '/error'

user/config/plugins/form.yaml

@@ -0,0 +1,15 @@
+enabled: true
+built_in_css: true
+inline_css: true
+refresh_prevention: false
+client_side_validation: true
+inline_errors: false
+files:
+  multiple: false          # To allow multiple files, default is single
+  limit: 10                # Number of allowed files per field (multiple required)
+  destination: 'self@'     # Where to upload the files (path and self@, page@, theme@)
+  avoid_overwriting: false # Prevent files with the same name to be overridden. Date prefix will be added
+  random_name: false       # Generate a random 15 long string name for the uploaded files
+  filesize: 0              # Maximum file size allowed (in MB)
+  accept:                  # List of mime/types or file extensions allowed (ie, image/*,.zip,.mp4)
+    - image/*

user/config/plugins/markdown-notices.yaml

@@ -0,0 +1,3 @@
+enabled: true
+built_in_css: true
+level_classes: [yellow, red, blue, green]

user/config/plugins/problems.yaml

@@ -0,0 +1,2 @@
+enabled: true
+built_in_css: true

user/config/site.yaml

@@ -0,0 +1,41 @@
+title: Alsace Réseau Neutre
+author:
+  name:
+  email:
+metadata:
+    description: 'Alsace Reseau Neutre, fournisseur d acces internet associatif'
+
+# Site settings
+title: Les offres VPS d'ARN
+email: contact@arn-fai.net
+description: "Page présentant les offres VPS (serveur virtuel) proposées par Alsace Réseau Neutre"
+
+# Links to include in footer navigation
+# For external links add external: true
+links:
+  - title: Nos offres
+    url: '#services'
+  - title: Questions fréquentes
+    url: '#questions'
+  - title: Souscrire
+    url: '#souscrire'
+  - title: Contact
+    url: '#contact'
+
+# Social networks usernames (many more available: google-plus, flickr, dribbble, pinterest, instagram, tumblr, linkedin, etc.)
+social:
+  - title: mastodon
+    url: https://toot.aquilenet.fr/@arn_fai
+  - title: twitter
+    url: https://twitter.com/arn_fai
+
+# Postal address (add as many lines as necessary)
+address:
+  - line:
+  - line:
+
+quicklinks:
+  - title: Mentions légales
+    url: https://arn-fai.net/mentions
+  - title: Crédits
+    url: credits

user/config/system.yaml

@@ -0,0 +1,40 @@
+home:
+  alias: '/home'
+
+pages:
+  theme: arn
+  process:
+    markdown: true
+    twig: false
+  markdown:
+    extra: true  
+
+cache:
+  enabled: true
+  check:
+    method: file
+  driver: auto
+  prefix: 'g'
+
+twig:
+  cache: true
+  debug: false
+  auto_reload: true
+  autoescape: false
+
+assets:
+  css_pipeline: false
+  css_minify: false
+  css_rewrite: false
+  js_pipeline: false
+  js_minify: false
+
+errors:
+  display: 0
+  log: true
+
+debugger:
+  enabled: false
+  twig: false
+  shutdown:
+    close_connection: true

user/pages/01.home/_header/header.md

@@ -0,0 +1,7 @@
+---
+title: Construisez votre morceau d'Internet
+menu: Top
+featured: header.jpg
+---
+
+Installez | Administrez | Stockez

user/pages/01.home/_offres/offres-ssd/service.md

@@ -0,0 +1,27 @@
+---
+title: Nos offres "performances"
+menu: Nos offres SSD
+class: small
+services:
+    - header: decalage
+    - header: VPS "SSD-1G-50"
+      icon: rocket
+      text:
+      prix : 10€/mois
+      cpu  : 1vcpu
+      disque : 50Go SSD
+      ipv4 : 1 adresse IPv4
+      ipv6 : 1 adresse IPv6
+      ram : 1Go de RAM
+    - header: VPS "SSD-2G-100"
+      icon: rocket
+      text:
+      prix : 20€/mois
+      cpu  : 2vcpu
+      disque : 100Go SSD
+      ipv4 : 1 adresse IPv4
+      ipv6 : 1 adresse IPv6
+      ram : 2Go
+
+---
+Les VPS SSD privilégient la performance grâce à l'utilisation de disques SSD en grappe raid6 (distribution et réplication des données) qui permet de meilleurs temps d'accès. Il est possible d'obtenir une adresse IP supplémentaire pour 4€/mois.

user/pages/01.home/_offres/offres-sto/service.md

@@ -0,0 +1,36 @@
+---
+title: Nos offres "stockage"
+menu: Nos offres STO
+class: small
+services:
+    - header: VPS "STO-1G-200"
+      icon: database
+      text:
+      prix : 10€/mois
+      cpu  : 1vcpu
+      disque : 200Go HDD
+      ipv4 : 1 adresse IPv4
+      ipv6 : 1 adresse IPv6      
+      ram : 1Go de RAM       
+    - header: VPS "STO-2G-200"
+      icon: database
+      text:
+      prix : 12€/mois
+      cpu  : 2vcpu
+      disque : 200Go HDD
+      ipv4 : 1 adresse IPv4
+      ipv6 : 1 adresse IPv6      
+      ram : 2Go de RAM     
+    - header: VPS "STO-4G-400"
+      icon: database
+      text:
+      prix : 24€/mois
+      cpu  : 4vcpu
+      disque : 400Go HDD
+      ipv4 : 1 adresse IPv4
+      ipv6 : 1 adresse IPv6      
+      ram : 4Go de RAM
+
+---
+
+Nos VPS STO offrent une solution avantageuse pour mettre en place votre propre service de stockage (cloud personnel, système de sauvegarde,...). Il est possible de demander une extension de votre espace de stockage pour +3€/mois par tranche de +200Go; et une adresse IP supplémentaire pour 4€/mois.

user/pages/01.home/_offres/services.md

@@ -0,0 +1,18 @@
+---
+title: Nos offres
+menu: Nos offres
+class: small
+
+content:
+    items: '@self.children'
+---
+
+Alsace Réseau Neutre, votre fournisseurs d'accès associatif, vous propose d'héberger vos serveurs virtuels au sein de son infrastructure. Vos serveurs profitent ainsi des conditions (connexions, débits, stabilité, ...) présentent dans un data-center, tout en participant à la construction d'un Internet respectueux de ses usagers. En devenant adhérant vous obtenez aussi un droit de vote sur les décisions prises par l'association et rejoignez une équipe de militant-e-s passionné-e-s.
+
+L'objectif de ce service est de vous proposer un espace d'hébergement totalement personnalisable sans que vous ayez à vous soucier de la gestion du matériel sur lequel il repose (achat, réparation, maintenance, nettoyage, etc.) puisque cette charge incombe à l'association.
+
+Un minimum de compétences (ou d'envie de les acquérir) en administration d'un serveur informatique est requis. Avec un VPS, rien n'est pré-configuré ni clé en main, à vous de construire brique après brique le service dont vous avez besoin, aucun-e technicien-ne de l'association ne gère votre VPS à votre place (mais les abonné-e-s s'entraident) : autonomie maximale.
+
+ARN propose deux gammes de VPS:
+- les VPS SSD, qui privilégient la performance (disque SSD en grappe raid6),
+- les VPS STOCKAGE, qui privilégient le stockage.

user/pages/01.home/_questions/question-a1/question.md

@@ -0,0 +1,16 @@
+---
+title: C'est quoi un VPS ?   
+---
+Un VPS est avant tout un serveur, c'est à dire une machine qui fonctionne et est connectée à Internet en permanence. Le but d'un serveur est de fournir un service (hébergement, stockage, ...).
+
+Pour profiter de bonnes conditions (débit, latence, température, stabilité électrique... ). les serveurs sont généralement installés dans un datacenter. Mais les places sont chers, aussi afin de mutualiser les coûts il est possible de découper un serveur physique en plusieurs serveurs virtuels. Chaque serveur virtuel reçoit alors une partie des ressources (mémoire, processeur, stockage, ...) et est isolé des autres serveurs virtuels tournant sur la même machine.
+
+Les avantages de la virtualisation sont multiples :
+- Réduction des coûts et de l’encombrement grâce à la mutualisation
+- Installation, déploiement facilité
+- l'utilisateur n'a pas besoin de s'occuper de la couche matérielle
+- migration possible en cas de problèmes matériels
+- Isolation des serveurs entre eux
+- Possibilité de faire évoluer les caractéristiques de son serveur en fonction de ses besoins
+
+Ce service constitue une alternative aux offres d'hébergement mutualisé qui, certes, ne requièrent que très peu de compétences informatiques mais sont limitées : les services et les logiciels sont limités à ceux que le prestataire propose (parfois uniquement l'hébergement d'un site web) et la configuration est standardisée (pas personnalisable). Autrement dit, un VPS est à mi-chemin entre héberger un serveur physique chez soi ou dans l'association et un hébergement mutualisé.

user/pages/01.home/_questions/question-b1/question.md

@@ -0,0 +1,11 @@
+---
+title: Est-il possible de faire évoluer mon offre ?
+---
+Il est possible de passer à une offre supérieure tant qu'on reste dans la même gamme (STO ou SSD). Le passage à une offre inférieure n'est pas possible en ce qui concerne la quantité de SSD ou HDD.
+
+Nos ressources (stockage, RAM, CPU) sont limitées. Nous prônons un usage optimal et responsable des ressources ainsi que la solidarité entre les membres de l'association, pas l'accaparation de toutes les ressources par quelques un-e-s ni le gaspillage. Dans ce contexte, si vous savez que vous n'utiliserez pas une des ressources de votre offre, vous pouvez l'indiquer lors de la création de votre VPS afin que l'administrateur dimensionne votre VPS en fonction.
+
+Vous pouvez demander une adresse IP supplémentaire pour 4€/mois quelque soit votre offre.
+
+Pour nos offres VPS STO, il est possible d'augmenter votre espace de stockage pour +3€/mois par tranche de +200Go supplémentaire.
+

user/pages/01.home/_questions/question-b2/question.md

@@ -0,0 +1,8 @@
+---
+title: Reverses IP personnalisables ?   
+---
+Oui. 
+
+Pour l'IPv4, il faut nous indiquer le nom désiré. 
+
+Pour l'IPv6, soit vous nous indiquez le nom désiré pour une ou plusieurs adresses, soit nous vous déléguons la zone qui correspond à votre /56 afin que vous gériez vous-même les reverses associés à vos adresses. La deuxième méthode suppose que vous disposez d'au moins un serveur de noms qui fait autorité.

user/pages/01.home/_questions/question-c1/question.md

@@ -0,0 +1,6 @@
+---
+title: Quels systèmes d'exploitation sont disponibles ?    
+---
+Par défaut,  Debian GNU/Linux stable x86-64. Installation automatique standardisée (seuls les utilitaires de base et un serveur SSH sont installés).
+
+À votre demande, tout système libre sur architecture x86/x86-64. Exemples : Debian, Ubuntu Server, CentOS, OpenBSD, FreeBSD, etc. L'installation est alors entièrement à votre charge (elle n'est ni automatique, ni clé en main).

user/pages/01.home/_questions/question-c2/question.md

@@ -0,0 +1,4 @@
+---
+title: Est-il possible de faire une installation personnalisée du système d'exploitation ?   
+---
+Oui, à votre demande. Cela vous permet d'activer le chiffrement de votre disque dur, par exemple. À défaut, la configuration est celle de l'installation standard (une seule partition non chiffrée, système en anglais, etc.).

user/pages/01.home/_questions/question-c3/question.md

@@ -0,0 +1,9 @@
+---
+title: Comment accéder à mon VPS ?  
+---
+
+Deux possibilités.
+
+Par SSH, accès en ligne de commande / texte. Nous préférons une authentification par clé afin d'éviter des attaques par bruteforce (force brute en français, essai systématique et automatique de toutes les combinaisons identifiant + mot de passe possibles afin de trouver celle que vous avez choisie). Une authentification par mot de passe reste possible, mais est vivement déconseillée. Depuis Stretch l'accès SSH par mot de passe a été désactivé.
+
+Par VNC, affichage graphique à distance. Cela permet de se dépanner soi-même suite à la commission d'une erreur qui vous empêche d'avoir un accès SSH (mauvaise configuration du pare-feu, VPS qui ne redémarre pas comme prévu, etc.). C'est également cette fonctionnalité qui rend possible une installation personnalisée du système d'exploitation et la saisie de votre phrase de passe pour démarrer un système chiffré.

user/pages/01.home/_questions/question-c4/question.md

@@ -0,0 +1,4 @@
+---
+title: Comment ça marche ? (Technologies utilisées )
+---
+KVM pour l'hyperviseur ; Ganeti pour la redondance : en cas de panne matérielle sur l'un de nos serveurs, votre VPS sera transféré sur un autre serveur. De plus, aucune interruption de service à prévoir lors d'une maintenance de notre côté.

user/pages/01.home/_questions/question-d1/question.md

@@ -0,0 +1,4 @@
+---
+title: Où se trouve le datacenter qui héberge les serveurs d'ARN ?   
+---
+Il s'agit du datacenter Cogent situé 46 route de Bischwiller à Schiltigheim, Alsace, France.

user/pages/01.home/_questions/question-d2/question.md

@@ -0,0 +1,4 @@
+---
+title: Quel est le débit ?   
+---
+Capacité max. : <a href="http://arn-fai.net/factu-opes#graphes-du-trafic-r-seau-de-l-association">100 Mbps mutualisés</a> entre tous les abonné-e-s, aucune limite de volume.

user/pages/01.home/_questions/question-d3/question.md

@@ -0,0 +1,4 @@
+---
+title: Est-ce qu'ARN conserve des informations / traces / logs ?   
+---
+Oui, tel que requis par la législation française : votre identité (prénom + nom + adresse postale + numéro de téléphone) + les adresses IP assignées par ARN à votre VPS. Pas plus, pas moins. Tout cela est conservé pendant 1 an. ARN se réserve le droit de vérifier la véracité de votre identité.

user/pages/01.home/_questions/question-d4/question.md

@@ -0,0 +1,4 @@
+---
+title: Est-ce que ARN sauvegarde automatiquement mon VPS ?
+---
+NON. La sauvegarde de vos données et de vos configurations présentes sur votre VPS est entièrement à votre charge.

user/pages/01.home/_questions/question-e1/question.md

@@ -0,0 +1,6 @@
+---
+title: Modalités de paiement
+---
+Le mois de la souscription est un mois d'essai. Le premier paiement est donc attendu au plus tard dans la première quinzaine du mois suivant avec possibilité de régler jusqu'à 12 mois d'avance en une seule fois.
+
+Le paiement est a effectué par virement bancaire. Les références bancaires se trouvent dans l'espace adhérent. N'oubliez pas d'indiquer  « ID » + le numéro d'identifiant qui vous a été attribué, tel que demandé dans l'espace adhérant.

user/pages/01.home/_questions/questions.md

@@ -0,0 +1,12 @@
+---
+title: Les questions fréquentes
+menu: Questions
+class: small
+
+content:
+    items: '@self.children'    
+    order:
+        by: folder
+        dir: asc
+
+---

user/pages/01.home/modular.md

@@ -0,0 +1,16 @@
+---
+title: VPS
+menu: Home
+onpage_menu: true
+content:
+    items: @self.modular
+    order:
+        by: default
+        dir: asc
+        custom:
+            - _header          
+            - _offres
+            - _questions            
+            - _souscrire           
+
+---

user/pages/credits/default.md

@@ -0,0 +1,7 @@
+---
+title: Crédits
+---
+
+Ce site utilise le framework Grav, Skeleton CSS, les polices d'écriture <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>, Zilla-slab  et Fira.
+
+Sauf mention contraire, le contenu des sites est placé sous licence libre <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr">Creative Commons By-SA 4.0</a>

user/pages/thankyou/default.md

@@ -0,0 +1,5 @@
+---
+title: Thank you !
+---
+
+Your email was sent. Thank you ! 

user/themes/arn/CHANGELOG.md

@@ -0,0 +1,6 @@
+# v1.0.0
+## 01/01/2019
+
+1. [](#improved)
+1. [](#bugfix)
+1. [](#new

user/themes/arn/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Grav
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

user/themes/arn/README.md

@@ -0,0 +1,76 @@
+# Agency Theme for Grav
+
+![Agency](assets/readme_1.png)
+
+This Grav theme is a port of the [Jekyll Agency theme](https://github.com/y7kim/agency-jekyll-theme) by [Rick Kim (y7kim)](https://github.com/y7kim), which originated from the [Agency Bootstrap theme by Start Bootstrap](http://startbootstrap.com/template-overviews/agency/).
+
+# Features
+
+* Fully responsive
+* Custom collapsing navigation with active classes, smooth page scrolling, and responsive fallback stylings
+* Services section with CSS only circle icons by Font Awesome
+* Portfolio grid with modal window popup previews for portfolio item details
+* About section with a responsive timeline, special thanks to Bootsnipp
+* Team member section with circle profile images and social media links
+* Working PHP contact form with validation
+* Footer with social links, copyright information, and other links
+* LESS files included for deeper customization options
+
+# Installation
+
+Installing the Agency theme can be done in one of two ways. Our GPM (Grav Package Manager) installation method enables you to quickly and easily install the theme with a simple terminal command, while the manual method enables you to do so via a zip file.
+
+The theme by itself is useful, but you may have an easier time getting up and running by installing a skeleton. The [Agency Site Skeleton](https://github.com/getgrav/grav-skeleton-agency-site) is a self-contained repository for a complete sites which includes: sample content, configuration, theme, and plugins.
+
+## GPM Installation (Preferred)
+
+The simplest way to install this theme is via the [Grav Package Manager (GPM)](http://learn.getgrav.org/advanced/grav-gpm) through your system's Terminal (also called the command line).  From the root of your Grav install type:
+
+    bin/gpm install agency
+
+This will install the Agency theme into your `/user/themes` directory within Grav. Its files can be found under `/your/site/grav/user/themes/agency`.
+
+## Manual Installation
+
+To install this theme, just download the zip version of this repository and unzip it under `/your/site/grav/user/themes`. Then, rename the folder to `agency`. You can find these files either on [GitHub](https://github.com/getgrav/grav-theme-agency) or via [GetGrav.org](http://getgrav.org/downloads/themes).
+
+You should now have all the theme files under
+
+    /your/site/grav/user/themes/agency
+
+>> NOTE: This theme is a modular component for Grav which requires the [Grav](http://github.com/getgrav/grav), [Error](https://github.com/getgrav/grav-theme-error) and [Problems](https://github.com/getgrav/grav-plugin-problems) plugins.
+
+# Updating
+
+As development for the Agency theme continues, new versions may become available that add additional features and functionality, improve compatibility with newer Grav releases, and generally provide a better user experience. Updating Agency is easy, and can be done through Grav's GPM system, as well as manually.
+
+## GPM Update (Preferred)
+
+The simplest way to update this theme is via the [Grav Package Manager (GPM)](http://learn.getgrav.org/advanced/grav-gpm). You can do this with this by navigating to the root directory of your Grav install using your system's Terminal (also called command line) and typing the following:
+
+    bin/gpm update agency
+
+This command will check your Grav install to see if your Agency theme is due for an update. If a newer release is found, you will be asked whether or not you wish to update. To continue, type `y` and hit enter. The theme will automatically update and clear Grav's cache.
+
+## Manual Update
+
+Manually updating Agency is pretty simple. Here is what you will need to do to get this done:
+
+* Delete the `your/site/user/themes/agency` directory.
+* Download the new version of the Agency theme from either [GitHub](https://github.com/getgrav/grav-theme-agency) or [GetGrav.org](http://getgrav.org/downloads/themes).
+* Unzip the zip file in `your/site/user/themes` and rename the resulting folder to `agency`.
+* Clear the Grav cache. The simplest way to do this is by going to the root Grav directory in terminal and typing `bin/grav clear-cache`.
+
+> Note: Any changes you have made to any of the files listed under this directory will also be removed and replaced by the new set. Any files located elsewhere (for example a YAML settings file placed in `user/config/themes`) will remain intact.
+
+# Setup
+
+If you want to set Agency as the default theme, you can do so by following these steps:
+
+* Navigate to `/your/site/grav/user/config`.
+* Open the **system.yaml** file.
+* Change the `theme:` setting to `theme: agency`.
+* Save your changes.
+* Clear the Grav cache. The simplest way to do this is by going to the root Grav directory in Terminal and typing `bin/grav clear-cache`.
+
+Once this is done, you should be able to see the new theme on the frontend. Keep in mind any customizations made to the previous theme will not be reflected as all of the theme and templating information is now being pulled from the **agency** folder.

user/themes/arn/arn.php

@@ -0,0 +1,9 @@
+<?php
+namespace Grav\Theme;
+
+use Grav\Common\Theme;
+
+class ARN extends Theme
+{
+
+}

user/themes/arn/arn.yaml

@@ -0,0 +1,4 @@
+enabled: true
+color: blue
+dropdown:
+  enabled: false

user/themes/arn/blueprints.yaml

@@ -0,0 +1,35 @@
+name: ARN
+version: 1.0.0
+description: "Un theme pour le site d'ARN"
+icon: group
+author:
+  name: Gyom
+  email: gyom@nebucca.fr
+  url: 
+homepage: hhttp://arn-fai.net
+demo: http://arn-fai.net
+keywords: 
+bugs: 
+license: MIT
+
+form:
+  validation: loose
+  fields:
+    dropdown.enabled:
+        type: toggle
+        label: Dropdown in navbar
+        highlight: 1
+        default: 0
+        options:
+          1: Enabled
+          0: Disabled
+        validate:
+          type: bool
+
+    color:
+        type: text
+        size: medium
+        label: Color
+        default: 'blue'
+        validate:
+          type: text

user/themes/arn/css/custom.css

@@ -0,0 +1,193 @@
+/* Shared
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button {
+  border-radius: 100px;
+}
+
+/* Sections
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.section {
+  padding: 8rem 0 7rem;
+  text-align: center;
+}
+.section-heading,
+.section-description {
+  margin-bottom: 1.2rem;
+}
+
+.section-description {
+  text-align: justify;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.subsection {
+  padding: 3rem 0 2rem;
+  text-align: center;
+}
+
+/* Hero
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.header {
+  background-image: url('../img/header-bg.jpg');
+  background-size: cover;
+  color: #fff;
+  padding-bottom: 5rem;
+  text-align: center;
+}
+
+/* Values
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.values {
+  /*padding-bottom: 5rem;*/
+}
+.value-multiplier {
+  margin-bottom: .5rem;
+  color: #11DFC7;
+}
+.value-heading {
+  margin-bottom: .3rem;
+}
+.value-description {
+  opacity: .8;
+  font-weight: 300;
+}
+
+/* Help
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.get-help {
+  border-bottom: 1px solid #ddd;
+}
+
+/* Categories
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.categories {
+  color: #fff;
+}
+.categories .section-description {
+  margin-bottom: 4rem;
+}
+
+
+/* Questions
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+details {
+    text-align: left;
+}
+
+details summary::-webkit-details-marker {
+  display:none;
+}
+
+details summary {
+    display: block;
+}
+
+.question {
+    font-size: 20px;
+    line-height: 30px;
+    border-bottom: 1px solid #DDD;
+    font-weight: 200;
+    padding: 10px 0 10px 60px;
+    cursor: pointer;
+    position: relative;
+    box-sizing: border-box;
+}
+
+details span::after {
+    font-size: 26px;
+    content: '+';
+
+    height: 30px;
+    width: 30px;
+    content: '\f138';
+	color: #334d63;
+	font-size: 30px;
+	font-family: 'ForkAwesome';
+}
+
+details[open] span::after {
+    content: '-';
+    line-height: 26px;
+    content : "\f13a";
+color: #334d63;
+font-size: 30px;
+font-family: 'ForkAwesome';
+}
+
+.question span {
+    position: absolute;
+    left: 10px;
+    /*background: transparent;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 30px;
+    background-color: #334d63;
+    color: white;
+    -webkit-transition: all 0.2s ease;
+    -moz-transition: all 0.2s ease;
+    -o-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+    box-sizing: content-box;*/
+}
+
+
+/* Media
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Bigger than 550 */
+@media (min-width: 550px) {
+  .section {
+  padding: 8rem 0 7rem;
+  }
+  .header {
+    padding-bottom: 12rem;
+    height: 165px;
+  }
+
+  .header-heading {
+    font-size: 2.4rem;
+  }
+}
+
+/* Bigger than 750 */
+@media (min-width: 750px) {
+  .header {
+    height: 190px;
+  }
+  .header-heading {
+    font-size: 2.6rem;
+  }
+  .section {
+  padding: 8rem 0 7rem;
+  }
+  .header {
+    padding: 16rem 0 14rem;
+  }
+  .section-description {
+    max-width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .categories {
+    padding: 15rem 0 8rem;
+  }
+}
+
+/* Bigger than 1000 */
+@media (min-width: 1000px) {
+  .section {
+   padding: 8rem 0 7rem;
+  }
+  .header {
+    padding: 22rem 0;
+  }
+  .header-heading {
+    font-size: 3.0rem;
+  }
+
+}

user/themes/arn/css/normalize.css

@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

user/themes/arn/css/skeleton.css

@@ -0,0 +1,447 @@
+/*
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
+
+
+/* Table of contents
+––––––––––––––––––––––––––––––––––––––––––––––––––
+- Grid
+- Base Styles
+- Typography
+- Links
+- Buttons
+- Forms
+- Lists
+- Code
+- Tables
+- Spacing
+- Utilities
+- Clearing
+- Media Queries
+*/
+
+
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box; }
+.column,
+.columns {
+  width: 100%;
+  float: left;
+  box-sizing: border-box; }
+
+.column table {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* For devices larger than 400px */
+@media (min-width: 400px) {
+  .container {
+    width: 85%;
+    padding: 0; }
+}
+
+/* For devices larger than 550px */
+@media (min-width: 550px) {
+  .container {
+    width: 80%; }
+  .column,
+  .columns {
+    margin-left: 4%; }
+  .column:first-child,
+  .columns:first-child {
+    margin-left: 0; }
+
+  .one.column,
+  .one.columns                    { width: 4.66666666667%; }
+  .two.columns                    { width: 13.3333333333%; }
+  .three.columns                  { width: 22%;            }
+  .four.columns                   { width: 30.6666666667%; }
+  .five.columns                   { width: 39.3333333333%; }
+  .six.columns                    { width: 48%;            }
+  .seven.columns                  { width: 56.6666666667%; }
+  .eight.columns                  { width: 65.3333333333%; }
+  .nine.columns                   { width: 74.0%;          }
+  .ten.columns                    { width: 82.6666666667%; }
+  .eleven.columns                 { width: 91.3333333333%; }
+  .twelve.columns                 { width: 100%; margin-left: 0; }
+
+  .one-quarter.column             { width: 22%; }
+  .one-third.column               { width: 30.6666666667%; }
+  .two-thirds.column              { width: 65.3333333333%; }
+
+  .one-half.column                { width: 48%; }
+
+  /* Offsets */
+  .offset-by-one.column,
+  .offset-by-one.columns          { margin-left: 8.66666666667%; }
+  .offset-by-two.column,
+  .offset-by-two.columns          { margin-left: 17.3333333333%; }
+  .offset-by-three.column,
+  .offset-by-three.columns        { margin-left: 26%;            }
+  .offset-by-four.column,
+  .offset-by-four.columns         { margin-left: 34.6666666667%; }
+  .offset-by-five.column,
+  .offset-by-five.columns         { margin-left: 43.3333333333%; }
+  .offset-by-six.column,
+  .offset-by-six.columns          { margin-left: 52%;            }
+  .offset-by-seven.column,
+  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
+  .offset-by-eight.column,
+  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
+  .offset-by-nine.column,
+  .offset-by-nine.columns         { margin-left: 78.0%;          }
+  .offset-by-ten.column,
+  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
+  .offset-by-eleven.column,
+  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
+
+  .offset-by-one-third.column,
+  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
+  .offset-by-two-thirds.column,
+  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
+
+  .offset-by-one-half.column,
+  .offset-by-one-half.columns     { margin-left: 52%; }
+
+}
+
+
+/* Base Styles
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* NOTE
+html is set to 62.5% so that all the REM measurements throughout Skeleton
+are based on 10px sizing. So basically 1.5rem = 15px :) */
+html {
+  font-size: 62.5%; }
+body {
+  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  line-height: 1.6;
+  font-weight: 400;
+  /*font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
+  font-family: 'Fira Sans', sans-serif;
+  color: #222; }
+
+
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1 {
+  font-weight: bold;
+}
+
+h2, h3, h4, h5, h6 {
+  font-weight: 300;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  font-family: 'Zilla Slab', serif;
+  text-align: center;
+}
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.5rem; }
+}
+
+p {
+  margin-top: 0;
+  text-align:justify;
+}
+
+h3 {
+color: #334d63;
+}
+
+
+/* Links
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a {
+  color: #0FA0CE; }
+a:hover {
+  color: #1EAEDB; }
+
+.text-left {
+ text-align : left;
+}
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  color: #555;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+  color: #333;
+  border-color: #888;
+  outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+  color: #FFF;
+  background-color: #334d63;
+  border-color: #334d63; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+  color: #FFF;
+  background-color: #334d43;
+  border-color: #334d43; }
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+  height: 38px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  background-color: #fff;
+  border: 1px solid #D1D1D1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; }
+textarea {
+  min-height: 65px;
+  padding-top: 6px;
+  padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid #33C3F0;
+  outline: 0; }
+label,
+legend {
+  display: block;
+  margin-bottom: .5rem;
+  font-weight: 600; }
+fieldset {
+  padding: 0;
+  border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline-block;
+  margin-left: .5rem;
+  font-weight: normal; }
+
+
+/* Lists
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+ul {
+  list-style: circle inside; }
+ol {
+  list-style: decimal inside; }
+ol, ul {
+  padding-left: 0;
+  margin-top: 0; }
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin: 1.5rem 0 1.5rem 3rem;
+  font-size: 90%; }
+li {
+  margin-bottom: 1rem; }
+
+
+/* Code
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+code {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+  font-size: 90%;
+  white-space: nowrap;
+  background: #F1F1F1;
+  border: 1px solid #E1E1E1;
+  border-radius: 4px; }
+pre > code {
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre; }
+
+
+/* Tables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+th,
+td {
+  padding: 12px 15px;
+  border-bottom: 1px solid #E1E1E1; }
+th:first-child,
+td:first-child {
+  padding-left: 0; }
+th:last-child,
+td:last-child {
+  padding-right: 0; }
+
+
+/* Spacing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+button,
+.button {
+  margin-bottom: 1rem; }
+input,
+textarea,
+select,
+fieldset {
+  margin-bottom: 1.5rem; }
+pre,
+blockquote,
+dl,
+figure,
+table,
+p,
+ul,
+ol,
+form {
+  margin-bottom: 2rem; }
+
+
+table {
+  text-align: center;
+}
+
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 3rem;
+  margin-bottom: 3.5rem;
+  border-width: 0;
+  border-top: 1px solid #E1E1E1; }
+
+
+/* Clearing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Self Clearing Goodness */
+.container:after,
+.row:after,
+.u-cf {
+  content: "";
+  display: table;
+  clear: both; }
+
+
+/* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/*
+Note: The best way to structure the use of media queries is to create the queries
+near the relevant code. For example, if you wanted to change the styles for buttons
+on small devices, paste the mobile query code up in the buttons section and style it
+there.
+*/
+
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}

user/themes/arn/css/style (copie 1).css

@@ -0,0 +1,258 @@
+/* --------------------------------
+
+Vertical Timeline - by CodyHouse.co
+
+-------------------------------- */
+
+
+.navbar, footer {
+	background-color: #334d63;
+        color:#938A86;
+}
+
+
+.nav li a {
+	text-transform: uppercase;
+	text-decoration: none;
+	font-weight: 400;
+	letter-spacing: 1px;
+	color: #0FA0CE;
+}
+.nav li a:hover {
+	color: #fff;
+}
+
+.nav > li > a {
+	padding-top: 19.5px;
+	padding-bottom: 19.5px;
+}
+
+
+.nav > li {
+	position: relative;
+	display: block;
+	padding: 10px 15px;
+}
+
+.nav > li {
+	float: left;
+	margin : 0;
+}
+
+a, a:hover, a:focus, a:active, a.active {
+	outline: 0;
+}
+
+a {
+	color: #334d63;
+	/*text-decoration: none;*/
+}
+
+a:hover {
+  color: #1EAEDB; }
+
+.nav {
+	list-style: none;
+        float: right !important;
+	margin: auto;
+}
+
+/*.fa {
+	display: inline-block;
+	font: normal normal normal 14px/1 ForkAwesome;
+	font-size: 14px;
+	font-size: inherit;
+	text-rendering: auto;
+}*/
+
+.social-buttons {
+	margin-bottom: 0;
+	text-align: right;
+}
+
+.copyright {
+	margin-bottom: 0;
+	text-align: center;
+}
+
+ul.social-buttons li a {
+    font-size: 30px;
+    line-height: 40px;
+    color: #1EAEDB;
+		display: block;
+/*width: 40px;
+height: 40px;*/
+/*border-radius: 100%;*/
+outline: 0;
+/*color: #fff;*/
+/*background-color: #222;*/
+}
+
+ul.quicklinks{
+	margin-bottom: 0;
+	text-align: left;
+}
+
+ul.quicklinks li {
+	margin-bottom: 0;
+}
+
+ul.quicklinks li a {
+	margin-bottom: 0;
+}
+
+
+footer  a {
+	color: #1EAEDB;
+}
+
+footer {
+	line-height: 40px;
+}
+
+.list-inline > li {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+
+/*::before, ::after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.fa-twitter::before {
+    content: "\f099";
+}
+.fa-mastodon::before {
+    content: "\f2e1";
+}*/
+
+/* Bigger than 500 */
+@media (max-width: 500px) {
+.nav > li {
+	float: none;
+}
+.nav {
+        float: none;
+        text-align: center;
+}
+}
+
+
+.timeline {
+  overflow: hidden;
+  margin: 2em auto;
+  /*background-color: #a3d4ff;*/
+}
+
+.lesEtapes {
+  position: relative;
+  width: 90%;
+  max-width: 1170px;
+  margin: 0 auto;
+  padding: 2em 0;
+}
+
+.lesEtapes::before {
+  /* this is the vertical line */
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 18px;
+  height: 100%;
+  width: 4px;
+  /*background: #d7e4ed;*/
+  background-color: #334d63;
+}
+
+
+.uneEtape {
+  text-align: left;
+  position: relative;
+  margin: 2em 0;
+}
+
+.uneEtape:after {
+  /* clearfix */
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.uneEtape:first-child {
+  margin-top: 0;
+}
+
+.uneEtape:last-child {
+  margin-bottom: 0;
+}
+
+.uneEtapeImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background:#334d63;
+}
+
+.uneEtapeImage img {
+  display: block;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  margin-left: -12px;
+  margin-top: -12px;
+}
+
+
+.uneEtapeTxt {
+  position: relative;
+  margin-left: 60px;
+  background: #a3d4ff;
+  border-radius: 0.25em;
+  padding: 1em;
+  -webkit-box-shadow: 0 3px 0 #d7e4ed;
+          box-shadow: 0 3px 0 #d7e4ed;
+  background: #a3d4ff;
+	/*border-style: solid;
+	border-width: 5px;
+	border-color: #a8151500;*/
+}
+
+.uneEtapeTxt:after {
+  /* clearfix */
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.uneEtapeTxt::before {
+  /* triangle next to content block */
+  content: '';
+  position: absolute;
+  top: 16px;
+  right: 100%;
+  height: 0;
+  width: 0;
+  border: 7px solid transparent;
+  border-right: 7px solid #a3d4ff;
+}
+
+/* Bigger than 500 */
+@media (max-width: 500px) {
+  .uneEtapeTxt {
+   margin-left: 0px;
+  }
+  .uneEtapeImage {
+    visibility: hidden;
+  }
+  .uneEtapeTxt::before {
+    visibility: hidden;
+  }
+}

user/themes/arn/css/style.css

@@ -0,0 +1,228 @@
+/* --------------------------------
+
+Vertical Timeline - by CodyHouse.co
+
+-------------------------------- */
+
+footer {
+	background-color: #334d63;
+        color:#938A86;
+}
+
+a, a:hover, a:focus, a:active, a.active {
+	outline: 0;
+}
+
+a {
+	color: #334d63;
+	/*text-decoration: none;*/
+}
+
+a:hover {
+  color: #1EAEDB; }
+
+.nav {
+	list-style: none;
+        float: right !important;
+	margin: auto;
+}
+
+/*.fa {
+	display: inline-block;
+	font: normal normal normal 14px/1 ForkAwesome;
+	font-size: 14px;
+	font-size: inherit;
+	text-rendering: auto;
+}*/
+
+.social-buttons {
+	margin-bottom: 0;
+	text-align: right;
+}
+
+.copyright {
+	margin-bottom: 0;
+	text-align: center;
+}
+
+ul.social-buttons li a {
+    font-size: 30px;
+    line-height: 40px;
+    color: #1EAEDB;
+		display: block;
+/*width: 40px;
+height: 40px;*/
+/*border-radius: 100%;*/
+outline: 0;
+/*color: #fff;*/
+/*background-color: #222;*/
+}
+
+ul.quicklinks{
+	margin-bottom: 0;
+	text-align: left;
+}
+
+ul.quicklinks li {
+	margin-bottom: 0;
+}
+
+ul.quicklinks li a {
+	margin-bottom: 0;
+}
+
+
+footer  a {
+	color: #1EAEDB;
+}
+
+footer {
+	line-height: 40px;
+}
+
+.list-inline > li {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+
+/*::before, ::after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.fa-twitter::before {
+    content: "\f099";
+}
+.fa-mastodon::before {
+    content: "\f2e1";
+}*/
+
+/* Bigger than 500 */
+@media (max-width: 500px) {
+.nav > li {
+	float: none;
+}
+.nav {
+        float: none;
+        text-align: center;
+}
+}
+
+
+.timeline {
+  overflow: hidden;
+  margin: 2em auto;
+  /*background-color: #a3d4ff;*/
+}
+
+.lesEtapes {
+  position: relative;
+  width: 90%;
+  max-width: 1170px;
+  margin: 0 auto;
+  padding: 2em 0;
+}
+
+.lesEtapes::before {
+  /* this is the vertical line */
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 18px;
+  height: 100%;
+  width: 4px;
+  /*background: #d7e4ed;*/
+  background-color: #334d63;
+}
+
+
+.uneEtape {
+  text-align: left;
+  position: relative;
+  margin: 2em 0;
+}
+
+.uneEtape:after {
+  /* clearfix */
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.uneEtape:first-child {
+  margin-top: 0;
+}
+
+.uneEtape:last-child {
+  margin-bottom: 0;
+}
+
+.uneEtapeImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background:#334d63;
+}
+
+.uneEtapeImage img {
+  display: block;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  margin-left: -12px;
+  margin-top: -12px;
+}
+
+
+.uneEtapeTxt {
+  position: relative;
+  margin-left: 60px;
+  background: #a3d4ff;
+  border-radius: 0.25em;
+  padding: 1em;
+  -webkit-box-shadow: 0 3px 0 #d7e4ed;
+          box-shadow: 0 3px 0 #d7e4ed;
+  background: #a3d4ff;
+	/*border-style: solid;
+	border-width: 5px;
+	border-color: #a8151500;*/
+}
+
+.uneEtapeTxt:after {
+  /* clearfix */
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.uneEtapeTxt::before {
+  /* triangle next to content block */
+  content: '';
+  position: absolute;
+  top: 16px;
+  right: 100%;
+  height: 0;
+  width: 0;
+  border: 7px solid transparent;
+  border-right: 7px solid #a3d4ff;
+}
+
+/* Bigger than 500 */
+@media (max-width: 500px) {
+  .uneEtapeTxt {
+   margin-left: 0px;
+  }
+  .uneEtapeImage {
+    visibility: hidden;
+  }
+  .uneEtapeTxt::before {
+    visibility: hidden;
+  }
+}

user/themes/arn/fonts/fork-awesome/css/v5-compat.css

@@ -0,0 +1,446 @@
+/*!
+Fork Awesome 1.1.5
+License - http://forkawesome.github.io/Fork-Awesome/license
+
+Copyright 2018 Dave Gandy & Fork Awesome
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+.fas,
+.fab,
+.far {
+  display: inline-block;
+  font: normal normal normal 14px/1 ForkAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.fas.fa-chart-area:before {
+  content: "\f1fe";
+}
+.fas.fa-arrows-alt:before {
+  content: "\f047";
+}
+.fas.fa-expand-arrows-alt:before {
+  content: "\f0b2";
+}
+.fas.fa-arrows-alt-h:before {
+  content: "\f07e";
+}
+.fas.fa-arrows-alt-v:before {
+  content: "\f07d";
+}
+.fas.fa-calendar-alt:before {
+  content: "\f073";
+}
+.fas.fa-circle-notch:before {
+  content: "\f1ce";
+}
+.fas.fa-cloud-download-alt:before {
+  content: "\f0ed";
+}
+.fas.fa-cloud-upload-alt:before {
+  content: "\f0ee";
+}
+.fas.fa-credit-card:before {
+  content: "\f283";
+}
+.fas.fa-dollar-sign:before {
+  content: "\f155";
+}
+.fas.fa-euro-sign:before {
+  content: "\f153";
+}
+.fas.fa-exchange-alt:before {
+  content: "\f0ec";
+}
+.fas.fa-external-link-alt:before {
+  content: "\f08e";
+}
+.fas.fa-external-link-square-alt:before {
+  content: "\f14c";
+}
+.fas.fa-eye-dropper:before {
+  content: "\f1fb";
+}
+.fas.fa-pound-sign:before {
+  content: "\f154";
+}
+.fas.fa-glass-martini:before {
+  content: "\f000";
+}
+.fas.fa-shekel-sign:before {
+  content: "\f20b";
+}
+.fas.fa-rupee-sign:before {
+  content: "\f156";
+}
+.fas.fa-won-sign:before {
+  content: "\f159";
+}
+.fas.fa-level-down-alt:before {
+  content: "\f149";
+}
+.fas.fa-level-up-alt:before {
+  content: "\f148";
+}
+.fas.fa-chart-line:before {
+  content: "\f201";
+}
+.fas.fa-long-arrow-alt-down:before {
+  content: "\f175";
+}
+.fas.fa-long-arrow-alt-left:before {
+  content: "\f177";
+}
+.fas.fa-long-arrow-alt-right:before {
+  content: "\f178";
+}
+.fas.fa-long-arrow-alt-up:before {
+  content: "\f176";
+}
+.fas.fa-map-marker-alt:before {
+  content: "\f041";
+}
+.fas.fa-mobile-alt:before {
+  content: "\f10b";
+}
+.fas.fa-pencil-alt:before {
+  content: "\f040";
+}
+.fas.fa-pen-square:before {
+  content: "\f14b";
+}
+.fas.fa-chart-pie:before {
+  content: "\f200";
+}
+.fas.fa-yen-sign:before {
+  content: "\f157";
+}
+.fas.fa-ruble-sign:before {
+  content: "\f158";
+}
+.fas.fa-shield-alt:before {
+  content: "\f132";
+}
+.fas.fa-sign-in-alt:before {
+  content: "\f090";
+}
+.fas.fa-sign-out-alt:before {
+  content: "\f08b";
+}
+.fas.fa-sliders-h:before {
+  content: "\f1de";
+}
+.fas.fa-tablet-alt:before {
+  content: "\f10a";
+}
+.fas.fa-tachometer-alt:before {
+  content: "\f0e4";
+}
+.fas.fa-thumbtack:before {
+  content: "\f08d";
+}
+.fas.fa-ticket-alt:before {
+  content: "\f145";
+}
+.fas.fa-trash-alt:before {
+  content: "\f1f8";
+}
+.fas.fa-lira-sign:before {
+  content: "\f195";
+}
+.fab.fa-linkedin-in:before {
+  content: "\fe01";
+}
+.fab.fa-linkedin:before {
+  content: "\f08c";
+}
+.far.fa-address-book:before {
+  content: "\f2ba";
+}
+.far.fa-address-card:before {
+  content: "\f2bc";
+}
+.far.fa-arrow-alt-circle-down:before {
+  content: "\f01a";
+}
+.far.fa-arrow-alt-circle-left:before {
+  content: "\f190";
+}
+.far.fa-arrow-alt-circle-right:before {
+  content: "\f18e";
+}
+.far.fa-arrow-alt-circle-up:before {
+  content: "\f01b";
+}
+.far.fa-bell:before {
+  content: "\f0f3";
+}
+.far.fa-bell-slash:before {
+  content: "\f1f7";
+}
+.far.fa-bookmark:before {
+  content: "\f097";
+}
+.far.fa-building:before {
+  content: "\f0f7";
+}
+.far.fa-calendar-check:before {
+  content: "\f274";
+}
+.far.fa-calendar-minus:before {
+  content: "\f272";
+}
+.far.fa-calendar:before {
+  content: "\f133";
+}
+.far.fa-calendar-plus:before {
+  content: "\f271";
+}
+.far.fa-calendar-times:before {
+  content: "\f273";
+}
+.far.fa-caret-square-down:before {
+  content: "\f150";
+}
+.far.fa-caret-square-left:before {
+  content: "\f191";
+}
+.far.fa-caret-square-right:before {
+  content: "\f152";
+}
+.far.fa-caret-square-up:before {
+  content: "\f151";
+}
+.far.fa-check-circle:before {
+  content: "\f05d";
+}
+.far.fa-check-square:before {
+  content: "\f046";
+}
+.far.fa-circle:before {
+  content: "\f10c";
+}
+.far.fa-clock:before {
+  content: "\f017";
+}
+.far.fa-comment:before {
+  content: "\f0e5";
+}
+.far.fa-comment-dots:before {
+  content: "\f27b";
+}
+.far.fa-comments:before {
+  content: "\f0e6";
+}
+.far.fa-dot-circle:before {
+  content: "\f192";
+}
+.far.fa-id-card:before {
+  content: "\f2c3";
+}
+.far.fa-envelope:before {
+  content: "\f003";
+}
+.far.fa-envelope-open:before {
+  content: "\f2b7";
+}
+.far.fa-file-archive:before {
+  content: "\f1c6";
+}
+.far.fa-file-audio:before {
+  content: "\f1c7";
+}
+.far.fa-file-code:before {
+  content: "\f1c9";
+}
+.far.fa-file-excel:before {
+  content: "\f1c3";
+}
+.far.fa-file-image:before {
+  content: "\f1c5";
+}
+.far.fa-file-video:before {
+  content: "\f1c8";
+}
+.far.fa-copy:before,
+.far.fa-file:before {
+  content: "\f016";
+}
+.far.fa-file-pdf:before {
+  content: "\f1c1";
+}
+.far.fa-file-powerpoint:before {
+  content: "\f1c4";
+}
+.far.fa-file-alt:before {
+  content: "\f0f6";
+}
+.far.fa-file-word:before {
+  content: "\f1c2";
+}
+.far.fa-flag:before {
+  content: "\f11d";
+}
+.far.fa-save:before {
+  content: "\f0c7";
+}
+.far.fa-folder:before {
+  content: "\f114";
+}
+.far.fa-folder-open:before {
+  content: "\f115";
+}
+.far.fa-frown:before {
+  content: "\f119";
+}
+.far.fa-futbol:before {
+  content: "\f1e3";
+}
+.far.fa-hand-rock:before {
+  content: "\f255";
+}
+.far.fa-hand-lizard:before {
+  content: "\f258";
+}
+.far.fa-hand-point-down:before {
+  content: "\f0a7";
+}
+.far.fa-hand-point-left:before {
+  content: "\f0a5";
+}
+.far.fa-hand-point-right:before {
+  content: "\f0a4";
+}
+.far.fa-hand-point-up:before {
+  content: "\f0a6";
+}
+.far.fa-hand-paper:before {
+  content: "\256";
+}
+.far.fa-hand-pointer:before {
+  content: "\f25a";
+}
+.far.fa-hand-scissors:before {
+  content: "\f257";
+}
+.far.fa-hand-spock:before {
+  content: "\f259";
+}
+.far.fa-handshake:before {
+  content: "\f2b5";
+}
+.far.fa-hdd:before {
+  content: "\f0a0";
+}
+.far.fa-heart:before {
+  content: "\f08a";
+}
+.far.fa-hospital:before {
+  content: "\f0f8";
+}
+.far.fa-hourglass:before {
+  content: "\f250";
+}
+.far.fa-id-card:before {
+  content: "\f2c3";
+}
+.far.fa-keyboard:before {
+  content: "\f11c";
+}
+.far.fa-lemon:before {
+  content: "\f094";
+}
+.far.fa-lightbulb:before {
+  content: "\f0eb";
+}
+.far.fa-meh:before {
+  content: "\f11a";
+}
+.far.fa-minus-square:before {
+  content: "\f147";
+}
+.far.fa-money-bill-alt:before {
+  content: "\f0d6";
+}
+.far.fa-moon:before {
+  content: "\f186";
+}
+.far.fa-newspaper:before {
+  content: "\f1ea";
+}
+.far.fa-paper-plane:before {
+  content: "\f1d9";
+}
+.far.fa-pause-circle:before {
+  content: "\f28c";
+}
+.far.fa-edit:before {
+  content: "\f044";
+}
+.far.fa-image:before {
+  content: "\f03e";
+}
+.far.fa-play-circle:before {
+  content: "\f01d";
+}
+.far.fa-plus-square:before {
+  content: "\f196";
+}
+.far.fa-question-circle:before {
+  content: "\f92c";
+}
+.far.fa-share-square:before {
+  content: "\f045";
+}
+.far.fa-smile:before {
+  content: "\f118";
+}
+.far.fa-snowflake:before {
+  content: "\f2dc";
+}
+.far.fa-futbol:before {
+  content: "\f1e3";
+}
+.far.fa-star-half:before {
+  content: "\f089";
+}
+.far.fa-star:before {
+  content: "\f006";
+}
+.far.fa-sticky-note:before {
+  content: "\f24a";
+}
+.far.fa-stop-circle:before {
+  content: "\f28e";
+}
+.far.fa-sun:before {
+  content: "\f185";
+}
+.far.fa-thumbs-down:before {
+  content: "\f088";
+}
+.far.fa-thumbs-up:before {
+  content: "\f087";
+}
+.far.fa-times-circle:before {
+  content: "\f05c";
+}
+.far.fa-window-close:before {
+  content: "\f2d4";
+}
+.far.fa-trash-alt:before {
+  content: "\f014";
+}
+.far.fa-user-circle:before {
+  content: "\f2be";
+}
+.far.fa-user:before {
+  content: "\f2c0";
+}

user/themes/arn/img/database.svg

@@ -0,0 +1,3 @@
+<svg width="1536" height="1536" xmlns="http://www.w3.org/2000/svg">
+    <path d="M768 768c301 0 603-54 768-170v170c0 141-344 256-768 256S0 909 0 768V598c165 116 467 170 768 170zm0 768c301 0 603-54 768-170v170c0 141-344 256-768 256S0 1677 0 1536v-170c165 116 467 170 768 170zm0-384c301 0 603-54 768-170v170c0 141-344 256-768 256S0 1293 0 1152V982c165 116 467 170 768 170zM768 0c424 0 768 115 768 256v128c0 141-344 256-768 256S0 525 0 384V256C0 115 344 0 768 0z"/>
+</svg>

user/themes/arn/img/plug.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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"
+   width="1791.75"
+   height="1791.75"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="plug.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata10">
+    <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="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1608"
+     inkscape:window-height="583"
+     id="namedview6"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="0.15364583"
+     inkscape:cx="-754.98308"
+     inkscape:cy="1024"
+     inkscape:window-x="2053"
+     inkscape:window-y="140"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4" />
+  <path
+     d="m 1755,452.75 c 49,50 49,131 0,181 l -401,400 150,150 -160,160 c -219,219 -553,250 -801,86 l -362,362 H 0 v -181 l 362,-362 c -164,-248 -133,-582 86,-801 l 160,-160 150,150 400,-401 c 50,-49 131,-49 181,0 50,50 50,132 0,181 l -400,401 234,234 401,-400 c 50,-50 131,-50 181,0 z"
+     id="path2"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" />
+</svg>

user/themes/arn/img/rocket.svg

@@ -0,0 +1,3 @@
+<svg width="1536" height="1536" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1440 448c0-53-43-96-96-96s-96 43-96 96 43 96 96 96 96-43 96-96zm224-288c0 332-92 553-329 791-58 57-124 116-195 176l-20 379c-1 10-7 20-16 26l-384 224c-5 3-10 4-16 4-8 0-16-3-23-9l-64-64c-8-9-11-21-8-32l85-276-281-281-276 85c-3 1-6 1-9 1-8 0-17-3-23-9l-64-64c-10-11-12-27-5-39l224-384c6-9 16-15 26-16l379-20c60-71 119-137 176-195 250-249 441-329 789-329 18 0 34 14 34 32z"/>
+</svg>

user/themes/arn/templates/default.html.twig

@@ -0,0 +1,17 @@
+{% extends 'partials/base.html.twig' %}
+{% block header_navigation %}{% endblock %}
+{% block content %}
+	<div class="container">
+        <div class="row">
+          <div class="col-lg-12 text-center">
+            <div id="error">
+              <div>
+                 <h2>{{ page.header.title }}</h2>
+                 <h3>
+                    {{ page.content }}
+                </h3>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

user/themes/arn/templates/error.html.twig

@@ -0,0 +1,17 @@
+{% extends 'partials/base.html.twig' %}
+{% block header_navigation %}{% endblock %}
+{% block content %}
+	<div class="container">
+        <div class="row">
+          <div class="col-lg-12 text-center">
+            <div id="error">
+              <div>
+                 <h2>Error {{ page.header.http_response_code }}</h2>
+                 <h3>
+                    {{ page.content }}
+                </h3>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

user/themes/arn/templates/modular.html.twig

@@ -0,0 +1,12 @@
+{% extends 'partials/base.html.twig' %}
+
+{% set show_onpage_menu = header.onpage_menu == true or header.onpage_menu is null %}
+{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
+
+
+{% block content %}
+    {{ page.content }}
+    {% for module in page.collection() %}
+        {{ module.content }}
+    {% endfor %}
+{% endblock %}

user/themes/arn/templates/modular/etapes.html.twig

@@ -0,0 +1,27 @@
+<section class="section souscrire" id="souscrire">
+    <div class="container">
+      <h3 class="section-heading">
+          {{ page.header.title }}
+      </h3>
+      <h4 class="section-description">
+          {{ page.content }}
+      </h4>
+
+        <div class="timeline">
+            <div class="lesEtapes">
+                {% for about in page.header.abouts %}
+                <div class="uneEtape">
+                    <div class="uneEtapeTxt">
+                        <h4>{{ about.heading }}</h4>
+                        <h4 class="subheading">{{ about.subheading }}</h4>
+                        <p>{{ about.body }}</p>
+                    </div>
+                    <div class="uneEtapeImage">
+                        <img src="{{ url('theme://img')}}/{{about.icon}}"/>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</section>

user/themes/arn/templates/modular/form.html.twig

@@ -0,0 +1,27 @@
+<section id="contact">
+    <div class="container">
+        <h3 class="section-heading">
+            {{ page.header.title }}
+        </h3>
+        <p class="section-description">
+            {{ page.content }}
+        </p>
+
+        <form name="{{ form.name }}" action="{{ action }}">
+            <div class="row">
+                <div class="six columns">
+                    <label for="exampleEmailInput">Votre adresse e-mail</label>
+                    <input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
+                </div>
+                <div class="six columns">
+                    <label for="exampleEmailInput">Sujet</label>
+                    <input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
+                </div>
+            </div>
+            <label for="exampleMessage">Message</label>
+            <textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
+            <input class="button-primary" type="submit" value="Envoyer">
+        </form>
+
+    </div>
+</section>

user/themes/arn/templates/modular/header.html.twig

@@ -0,0 +1,10 @@
+<header class="section header">
+    <div class="container">
+        <h1 class="section-heading">
+            {{ page.header.title }}
+        </h1>
+        <h2 class="section-description">
+            {{ page.content }}
+        </h2>
+    </div>
+</header>

user/themes/arn/templates/modular/questions.html.twig

@@ -0,0 +1,20 @@
+<section class="section questions" id="questions">
+    <div class="container">
+      <h3 class="section-heading">
+          {{ page.header.title }}
+      </h3>
+      <h4 class="section-description">
+          {{ page.content }}
+      </h4>
+
+        {% set collection = page.collection() %}
+
+        {% for child in collection %}
+        {% include 'partials/question.html.twig' with {
+        'blog' : page,
+        'page' : child,
+        'truncate' : true
+        } %}
+        {% endfor %}
+    </div>
+</section>

user/themes/arn/templates/modular/services.html.twig

@@ -0,0 +1,17 @@
+<section class="section services" id="services">
+    <div class="container">
+        <div class="section-description">
+        {{ page.content }}
+        </div>
+
+        {% set collection = page.collection() %}
+
+        {% for child in collection %}
+        {% include 'partials/service.html.twig' with {
+        'blog' : page,
+        'page' : child,
+        'truncate' : true
+        } %}
+        {% endfor %}
+    </div>
+</section>

user/themes/arn/templates/modular/text.html.twig

@@ -0,0 +1,9 @@
+<section class="section presentation">
+<div class="container">
+    <div class="row">
+        <div class="col-lg-12 text-left">
+            {{ content }}
+        </div>
+    </div>
+</div>
+</section>

user/themes/arn/templates/partials/base.html.twig

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="{{ grav.language.getLanguage ?: 'en' }}">
+<head>
+  {% block head %}
+  <meta charset="utf-8" />
+  <title>{% if header.title %}{{ header.title }} | {% endif %}{{ site.title }}</title>
+  {% include 'partials/metadata.html.twig' %}
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/png" href="{{ url('theme://img/favicon.png') }}" />
+
+  {% block stylesheets %}
+    {% do assets.addCss('theme://fonts/fork-awesome/css/fork-awesome.min.css',100) %}
+    {% do assets.addCss('theme://css/normalize.css',100) %}
+    {% do assets.addCss('theme://css/skeleton.css',100) %}
+    {% do assets.addCss('theme://css/custom.css',100) %}
+    {% do assets.addCss('theme://css/style.css',100) %}
+    <link href="https://code.cdn.mozilla.net/fonts/zilla-slab.css" rel="stylesheet">
+    <link href="https://code.cdn.mozilla.net/fonts/fira.css" rel="stylesheet">
+  {% endblock %}
+  {{ assets.css() }}
+
+  {% endblock head%}
+</head>
+<body id="page-top" class="index">
+  {% block header_navigation %}
+    {% include 'partials/navigation.html.twig' %}
+  {% endblock %}
+  {% block body %}
+    {% block content %}{% endblock %}
+  {% endblock %}
+
+  {% block footer %}
+    {% include 'partials/footer.html.twig' %}
+  {% endblock %}
+
+</body>
+</html>

user/themes/arn/templates/partials/base2.html.twig

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="{{ grav.language.getLanguage ?: 'en' }}">
+<head>
+  {% block head %}
+  <meta charset="utf-8" />
+  <title>{% if header.title %}{{ header.title }} | {% endif %}{{ site.title }}</title>
+  {% include 'partials/metadata.html.twig' %}
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/png" href="{{ url('theme://img/favicon.png') }}" />
+
+  {% block stylesheets %}
+    {% do assets.addCss('theme://fonts/fork-awesome/css/fork-awesome.min.css',100) %}
+    {% do assets.addCss('theme://css/normalize.css',100) %}
+    {% do assets.addCss('theme://css/skeleton.css',100) %}
+    {% do assets.addCss('theme://css/custom.css',100) %}
+    {% do assets.addCss('theme://css/style.css',100) %}
+    <link href="https://code.cdn.mozilla.net/fonts/zilla-slab.css" rel="stylesheet">
+    <link href="https://code.cdn.mozilla.net/fonts/fira.css" rel="stylesheet">
+  {% endblock %}
+  {{ assets.css() }}
+
+  {% endblock head%}
+</head>
+<body id="page-top" class="index">
+  <script src="https://www.nebucca.fr/ARN/nav.js"></script>
+
+  {% block header_navigation %}
+    {% include 'partials/navigation.html.twig' %}
+  {% endblock %}
+  {% block body %}
+    {% block content %}{% endblock %}
+  {% endblock %}
+
+  {% block footer %}
+    {% include 'partials/footer.html.twig' %}
+  {% endblock %}
+
+</body>
+</html>

user/themes/arn/templates/partials/footer.html.twig

@@ -0,0 +1,36 @@
+<footer>
+  <div class="container">
+    <div class="row">
+    <div class="one-half column value">
+      <ul class="list-inline quicklinks">
+
+        {% for link in site.quicklinks %}
+          {% if link.url | contains('http') %}
+            {% set domain = '' %}
+          {% elseif link.url | contains('#') %}
+            {% set domain = '' %}
+          {% else %}
+            {% set domain = base_url_absolute %}
+          {% endif %}
+          <li>
+            <a href="{{ domain }}{{ link.url }}" {% if link.url | contains('http') %} target="_blank" {% endif %}>{{ link.title }}</a>
+          </li>
+        {% endfor %}
+
+      </ul>
+    </div>
+
+      <div class="one-half column value">
+        <ul class="list-inline social-buttons">
+          {% for network in site.social %}
+            <li>
+              <a href="{{ network.url }}">
+                <i class="fa fa-{{ network.title }}"></i>
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+  </div>
+</footer>

user/themes/arn/templates/partials/metadata.html.twig

@@ -0,0 +1,3 @@
+{% for meta in page.metadata %}
+<meta {% if meta.name %}name="{{ meta.name }}" {% endif %}{% if meta.http_equiv %}http-equiv="{{ meta.http_equiv }}" {% endif %}{% if meta.charset %}charset="{{ meta.charset }}" {% endif %}{% if meta.property %}property="{{ meta.property }}" {% endif %}{% if meta.content %}content="{{ meta.content }}" {% endif %}/>
+{% endfor %}

user/themes/arn/templates/partials/navigation.html.twig

@@ -0,0 +1,2 @@
+<!-- Navigation -->
+  <script src="https://www.nebucca.fr/ARN/nav.js"></script>

user/themes/arn/templates/partials/navigation2.html.twig

@@ -0,0 +1,19 @@
+<!-- Navigation -->
+<nav class="navbar">
+  <div class="container">
+    <ul class="nav">
+      {% for link in site.links %}
+        {% if link.url | contains('http') %}
+          {% set domain = '' %}
+        {% elseif link.url | contains('#') %}
+          {% set domain = '' %}
+        {% else %}
+          {% set domain = base_url_absolute %}
+        {% endif %}
+        <li>
+          <a class="page-scroll" href="{{ domain }}{{ link.url }}" {% if link.url | contains('http') %} target="_blank" {% endif %}>{{ link.title }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+</nav>

user/themes/arn/templates/partials/question.html.twig

@@ -0,0 +1,8 @@
+<div class="row text-left">
+  <details>
+    <summary class="question"><span></span>{{ page.title }}</summary>
+    <div class="section-description">
+      {{ page.content }}
+    </div>
+  </details>
+</div>

user/themes/arn/templates/partials/service.html.twig

@@ -0,0 +1,81 @@
+<div class="subsection">
+  <h3>{{ page.header.title}}</h3>
+
+  <div class="values align-content:center;">
+    <div class="row ">
+      {% for service in page.header.services %}
+        {% if service.header == 'decalage' %}
+          <div class="two columns">
+            <table></table>
+          </div>
+        {% else %}
+
+          <div class="one-third column value">
+            <table>
+              {% if service.icon %}
+                <thead>
+                  <tr>
+                    <th>
+                      <span class="fa-stack fa-4x">
+                        <i class="fa fa-circle fa-stack-2x" style="color:#334d63;"></i>
+                        <i class="fa fa-{{ service.icon }} fa-stack-1x fa-inverse"></i>
+                      </span>
+                      {% if service.header %}
+                        <h5 class="service-heading">{{ service.header }}</h5>
+                      {% endif %}
+                    </th>
+                  </tr>
+                </thead>
+              {% endif %}
+              <tbody>
+              {% if service.text %}
+                <tr>
+                  <td>{{ service.text }}</td>
+                </tr>
+              {% endif %}
+              {% if service.cpu %}
+                <tr>
+                  <td>{{ service.cpu }}</td>
+                </tr>
+              {% endif %}
+              {% if service.ram %}
+                <tr>
+                  <td>{{ service.ram }}</td>
+                </tr>
+              {% endif %}
+              {% if service.disque %}
+                <tr>
+                  <td>{{ service.disque }}</td>
+                </tr>
+              {% endif %}
+              {% if service.ipv4%}
+                <tr>
+                  <td>{{ service.ipv4 }}</td>
+                </tr>
+              {% endif %}
+              {% if service.ipv6%}
+                <tr>
+                  <td>{{ service.ipv6 }}</td>
+                </tr>
+              {% endif %}
+              {% if service.prix %}
+                <tr>
+                  <td>{{ service.prix }}</td>
+                </tr>
+              {% endif %}
+              <tr>
+                <td>
+                  <a class="button button-primary" href="#souscrire">Souscrire</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      {% endif %}
+    {% endfor %}
+  </div>
+</div>
+<div class="section-description">
+  {{ page.content }}
+</div>
+</div>