Update README.md

supprime une dépendance inutilisée

.browserslistrc

@@ -0,0 +1,2 @@
+>1.5%
+not op_mini all

.editorconfig

@@ -0,0 +1,7 @@
+root = true
+
+[*]
+end_of_line = lf
+indent_style = space
+indent_size = 2
+charset = utf-8

.gitignore

@@ -59,7 +59,6 @@ local.properties
 *.tlb
 *.tli
 *.tlh
-*.tmp
 *.vspscc
 .builds
 *.dotCover
@@ -94,6 +93,7 @@ DocProject/Help/*.hhp
 DocProject/Help/Html2
 DocProject/Help/html
 
+
 # Click-Once directory
 publish
 
@@ -162,3 +162,17 @@ pip-log.txt
 
 # Mac crap
 .DS_Store
+/README 1.md
+*.cfg
+
+# parce qu'on s'en fout
+*.log
+
+# parce que trop lourd, ...
+node_modules/
+package-lock.json
+yarn.lock
+
+# parce que certaines personnes utilisent de vrais IDEs
+.idea
+*.iml

LICENSE

@@ -0,0 +1,13 @@
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                    Version 2, December 2004
+
+ Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document, and changing it is allowed as long
+ as the name is changed.
+
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.

README.md

@@ -1,32 +1,14 @@
-KNACSS
+# KNACSS
-======
-http://www.knacss.com
 
-KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. 
+**Né en 2012 et après plus de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations est officiellement obsolète, n'est plus maintenu et ne sera plus mis à jour.**
 
-Designed by [Alsacreations agency](http://alsacreations.fr) and used on a daily basis in production, KNACSS is not only a lightweight documented framework but also a CSS reset, adapted to every project no matter its size.
+## Documentation version v8 (v8 = Reborn)
 
-It handles basic elements, box sizing, margins, floats, simple and complex aligns, positioning, layout grids, gutters, old IE fallbacks and last but not least responsiveness, everything automagically !
+- Site web de présentation de KNACSS Reborn : <https://www.knacss.com/>
+- [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)
 
-Installation
+## Documentation anciennes versions (v7)
------------
-There is nothing to install. It is only a CSS file you can call as usual in the head of your document with a link element:
 
-    <link rel="stylesheet" href="knacss.css" media="all">
+- [**Documentation KNACSS v7**](https://www.knacss.com/doc-old.html)
+- [**Pense-bête PDF KNACSS v7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)
 
-You can also install KNACSS with [Bower](http://bower.io/) : ```bower install knacss```
-
-... Or you can also choose the KNACSS Builder : http://knacss.com/builder/
-
-
-Usage
------
-KNACSS is a collection of ready to use styles and snippets to kick start your project. Feel free to use it as a “reset”, then make it grow to suit your needs.
-Take the time to read the documentation before jumping in. Indeed, KNACSS doesn’t always suit beginners’ needs since a little thing can have big consequences.
-
-Useful links
-------------
-* Website and download : http://knacss.com/
-* Tutorial : http://knacss.com/demos/tutoriel.html
-* Commented code : http://knacss.com/knacss.html
-* Sass version on Hugo Giraudel's repo : https://github.com/HugoGiraudel/KNACSS-Sass

bower.json

@@ -1,23 +0,0 @@
-{
-  "name": "KNACSS",
-  "version": "2.9.2",
-  "homepage": "http://www.knacss.com/",
-  "authors": [
-    "Raphaël GOETTER, Alsacreations"
-  ],
-  "description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.",
-  "main": "css/knacss.css",
-  "keywords": [
-    "css", "framework", "reset", "responsive", "rwd", "boilerplate", "workflow"
-  ],
-  "license": "WTFPL",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "less/knackLESS.zip",
-    "tests",
-    "README.md"
-  ]
-}

changelog.md

@@ -0,0 +1,357 @@
+# Changelog
+
+- 24 janvier 2022 (8.2.1) : corrections des radio / checkbox
+- 19 janvier 2022 (8.2) : refonte des variables d'espacement
+- 5 janvier 2022 (8.1) : refonte des variables de couleur
+- 9 juillet 2021 (8.0.5) : suppression min-height: 0 par défaut
+- 26 avril 2021 : taille de base 100% (et non plus 62.5%) et corrections Grillade
+- 5 mars 2021 : les classes utilitaires font à présent partie du Core
+- 26 novembre 2020 : Documentation + V1.0.0
+- 22 octobre 2020 : grosse remise à jour. V0.9.0
+- 12 octobre 2020 : début de refonte classes utilitaires
+- 11 août 2020 : refonte des composants principaux
+- 19 mai 2020 : fichier de composant `button.scss` et mixin Sass
+- 29 février 2020 : feuille de style accessibilité
+- 13 février 2020 : on repart de zéro...
+
+## Changelog 2020
+
+Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn, correspondant à la Branche et version 8.
+
+## Changelog v8.0.0 (xxx 2019)
+
+- Architecture : mise à jour du reset, suppression des reset vendors (Reboot de Boostrap)
+- Architecture : renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss`
+- Architecture : modification de l'ordre d'import des fichiers : les utilitaires sont importées à la fin à présent
+- Compatibilité : support passé de IE10 à IE11 (browserlist)
+- Compatibilité : Browserslist devenu `.browserslistrc` et mise à jour du support à `>0.25% not op_mini all`
+- Compatibilité : fichier gulpfile.js dorénavant compatible Gulp 4
+- Compatibilité : versions exactes des dépendances dans package.json (pour éviter "latest")
+- Grillade :renommage des classes `grid-` en `grillade-` pour éviter tout conflit
+- Grillade : ajout du constructeur `medium-X` en plus de `small-X`
+- Grillade : ajout des constructeus `-start`, `-end`, `-center`, `-space-between`, `-space-around`, `-space-evenly` pour l'alignement général de la grille
+- Divers : ajout d'une variable pour supporter ou non IE11 : `$ie: true !default;`.
+- Divers :ajout d'une variable pour supporter ou non WordPress : `$wordpress: false !default;`.
+- Divers :`visually-hidden` devient un mixin
+- Divers :corrections typo
+
+## Changelog v7.1.2 (30 janvier 2019)
+
+- ajout de la règle `@media (prefers-reduced-motion: reduce)`
+- ajout de `@supports (display: grid)` dans le mixin de grille
+
+## Changelog v7.1.1 (10 decembre 2018)
+
+- patch correctif de gulpfile
+
+## Changelog v7.1.0 (31 octobre 2018)
+
+- mise à jour et meilleure intégration de gulp / postCSS :
+  - autoprefixer version postCSS (avec browserslist officielle),
+  - unprefix : pour supprimer les vieux préfixes inutiles
+  - flexbox-fixes : pour corriger les erreurs connues sur IE
+  - gap-properties : polyfill de gap -> grid-gap
+  - minification CSS avec CSSnano
+- application de `white-space: pre-rap` sur les textarea
+
+## Changelog v7.0.9 (24 octobre 2018)
+
+- correction d'alignement vertical de `.nav-button`
+
+## Changelog v7.0.8 (20 septembre 2018)
+
+- suppression de `white-space: nowrap` sur les éléments de formulaire
+
+## Changelog v7.0.7 (3 juillet 2018)
+
+- cohérence de renommage pour les classes utilitaires (ajout du préfixe `.u-` uniformément)
+
+## Changelog v7.0.5 (25 mai 2018)
+
+- mise à jour des styles, SVG, et variables des checkbox, radio et switches
+
+## Changelog v7.0.4 (04 avril 2018)
+
+- ajout de `::placeholder` cf. issue #276
+
+## Changelog v7.0.3 (01 mars 2018)
+
+- suppression de commentaires inutiles
+
+## Changelog v7.0.2 (04 janvier 2018)
+
+- intégration de (auto)grid dans Grillade
+
+## Changelog v7.0.1 (22 décembre 2017)
+
+- meilleure gestion des hyphens
+- mise en commentaire du fix SVG our IE11
+
+## Changelog v7.0.0 (août - novembre 2017)
+
+- modifications, mises à jour :
+  - architecture globale revisitée (vendor, config, library, components)
+  - remplacement de normalize.css par Bootstrap reboot.css
+  - déplacement des variables de gouttières de grillade.scss vers variables.scss
+  - déplacement des variables de breakpoints de breakpoints.scss vers variables.scss
+  - regroupement des styles des tableaux
+  - renommage des variables couleur de projets
+  - renommage des variables de composants
+  - renommage des variables d'espacement (`$tiny-value` -> `$spacer-micro`)
+  - automatisation des classes utilitaires via Sass
+  - suppression du namespace "kna-"
+- refonte :
+  - système de grille (dorénavant basé sur Grid Layout)
+  - boutons, avec possibilités de variantes (primary, success, warning, etc.)
+  - styles de formulaires
+  - styles des tableaux
+  - l'objet autogrid passe en Grid Layout
+- ajouts :
+  - des badges (tags), avec possibilités de variantes (primary, success, warning, etc.)
+  - des alertes, avec possibilités de variantes (primary, success, warning, etc.)
+  - d'un bouton de navigation `.nav-button`
+  - des checkbox, radio et bouton "switch" stylés
+  - des onglets (tabs)
+  - des flèches courantes (haut, droit, bas, gauche) en SVG data-URI
+  - création d'un mixin de grille
+  - création d'un mixin de tailles de polices (responsive)
+  - `* {min-width: 0}` pour éviter la valeur `auto` sur les flex-items et grid-items
+
+## Changelog v6.1.2 (21 juin 2017)
+
+- alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`)
+- alignement des breakpoints sur ceux de Bootstrap (576, 768, 992, 1200) et réorganisation des intervalles
+- `tab-size: 2;` sur les `<pre>`
+- passage en System Font Stack. cf. <https://css-tricks.com/snippets/css/system-font-stack/>
+
+## Changelog v6.1.1 (21 avril 2017)
+
+- amélioration du mixin "respond-to()"
+
+## Changelog v6.1.0 (3 mars 2017)
+
+- passage à [Normalize 5.0.0](https://github.com/necolas/normalize.css/blob/5.0.0/CHANGELOG.md)
+- ajout de variables pour tailles de polices différentes sur petits et sur grands écrans (`$h1-size` et `$h1-size-l` par exemple). Par défaut, les tailles "mobile" sont appliquées, et les tailles "desktop" s'appliquent en min-width `$tiny +1`
+- convention de nommage des variables pour faciliter les recherches : `$base-color` devient `$color-base`, `$link-color` devient `$link-color`, etc.
+- typo fix
+
+## Changelog v6.0.8 (10 janvier 2017)
+
+- application de `$link-color-hover` uniquement si différent de `$link-color`
+
+## Changelog v6.0.7 (7 décembre 2016)
+
+- application de `$font-family-headings` uniquement si différent de `$font-stack-base`
+
+## Changelog v6.0.6 (2 décembre 2016)
+
+- Grillade : redéfinition du périmètre de `-small` : passe de `(min-width: ($tiny + 1)) and (max-width: $small)` à `(min-width: ($tiny + 1)) and (max-width: $medium)` (de 544px à 991px par défaut)
+
+## Changelog v6.0.5 (1er décembre 2016)
+
+- redéfinition des variables de breakpoints, à présent calées sur [celles de Bootstrap](https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints)
+
+## Changelog v6.0.4 (22 novembre 2016)
+
+- renommage des variables
+
+## Changelog v6.0.3 (10 novembre 2016)
+
+- renommage `grid-item-*` en `item-*` pour éviter [les conflits](https://github.com/alsacreations/KNACSS/issues/222)
+
+## Changelog v6.0.2 (27 octobre 2016)
+
+- optimisation de la grille (de 8ko à 3ko pour la version Sass)
+
+## Changelog v6.0.0 (26 septembre 2016)
+
+- refonte intégrale de la grille de mise en forme (adoption de [grillade.css](http://grillade.knacss.com))
+- suppression de include-media (cause de bugs d'encodage : cf. [#203](https://github.com/alsacreations/KNACSS/issues/203) / [#197](https://github.com/alsacreations/KNACSS/issues/197) , nécessite un temps d'apprentissage, et n'apporte pas grand chose au final).
+- refonte des valeurs des Breakpoints et des classes responsive. [voir issue #210](https://github.com/alsacreations/KNACSS/issues/210)
+- modularisation des fichiers et dossiers, classés par fonctions (config, vendor, library, objects, utility)
+- ajout des objects courants : [media](http://codepen.io/raphaelgoetter/pen/KMWWwj) et [autogrid](http://codepen.io/raphaelgoetter/pen/KMgBJd?editors=1100)
+- suppression des positionnements tabulaires. `.row`, `.col` et `.line` n'ont plus lieu d'être depuis Flexbox, pouvaient entrer en conflit avec d'autres frameworks et ne font que parasiter KNACSS
+- amélioration du fichier Gulpfile.js
+- corrections de bugs divers
+- mise à jour de la doc
+
+## Changelog v5.0.1 (24 mai 2016)
+
+- les helpers de largeurs deviennent mobile-first et ne s'activent que sur écran d'une certaine taille. Ex. `.w700p {width: 700px;}` devient `@include media('>640px') {.w700p {width: 700px;}}`. Ainsi il n'est plus nécessaire de les écraser dans la feuille de style responsive.
+
+## Changelog v5.0.0 (23 mai 2016)
+
+- suppression du support IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
+- suppression du support LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge pour des raisons de maintenabilité)
+- mise à jour vers Normalize 4.1.1 : <https://github.com/necolas/normalize.css/blob/4.1.1/CHANGELOG.md>
+- restructuration / renommage des fichiers avec préfixes `_config-`, `_layout-`, `_library-`, `_object-`, `_override-`
+- ajout de la library include-media (<http://include-media.com/>) pour faciliter la gestion des media queries
+- adaptation des variables de breakpoint pour les rendre compatibles avec include-media
+- grille "grillade" à présent en mobile first (par défaut 1 colonne sur "tiny", 2 colonnes sur "small", valeurs modifiables)
+- nommage de variables préfixé pour plus de maintenabilité : `$gutter` -> `$grid-gutter`, `$number` -> `$grid-number`, `$left` -> `$grid-left` et `$right` -> `$grid-right`
+- renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent)
+- ajout des éléments de layout : `.grid-item-first`, `.grid-item-medium` et `.grid-item-last`
+- ajout de Table des Matières dans la feuille de style non minifiée
+- adaptation des fichiers gulpfile, package.json et bower.json
+- mise à jour de la documentation
+
+## Changelog v4.4.5 (1er avril 2016)
+
+- mise à jour vers Normalize 4 : <https://github.com/necolas/normalize.css/blob/4.0.0/CHANGELOG.md>
+- application de min-width: 0 sur les flex-item-fluid pour éviter les minimum automatiques des flex-items
+- suppression des styles spécifiques à Gmap (sélecteurs trop lourds pour un cas très particuliers)
+
+## Changelog v4.4.4 (23 janvier 2016)
+
+- mise à jour vers Normalize 3.0.3 : <https://github.com/necolas/normalize.css/>
+- réalignement vertical des input et des label
+
+## Changelog v4.4.3 (14 janvier 2016)
+
+- ajout du patch `min-width: 0` sur les flex-items de grilles
+
+## Changelog v4.4.2 (24 décembre 2015)
+
+- correction d'un bug responsive des classes `.flex-item-double`
+- création de la feuille de style dédiée aux grilles : _grillade.css_ pour ceux qui souhaitent se contenter des grilles de KNACSS
+
+## Changelog v4.4.0 (12 décembre 2015)
+
+- ajout de classes d'état dans les helpers (`is-disabled`, `is-hidden`, `is-visually-hidden`, `is-unstyled`)
+- import de la feuille de style dédiée WordPress mise en commentaire par défaut et activable au besoin
+- la taille de police de base est à présent de "1.4rem" et non un calcul en `em` à partir d'une valeur en pixels
+- suppression de `@font-stack-universal` devenue inutile (servait dans les grilles inline-block)
+- suppression de "helvetica, arial" dans les font-stacks par défaut (seul reste "sans-serif")
+- ajout d'une classe `.bfc` (actuellement alias de l'existante `.mod`)
+- ajout d'une classe `.no-wrapping` pour les éléments qui ne doivent pas adopter de césures sur petit écran
+- ajout de classes helpers pour les marges automatiques (`.mtauto`, `mrauto`, `.mauto`, etc.)
+
+## Changelog v4.3.6 (10 novembre 2015)
+
+- modification de la valeur par défaut de gouttière (`1em` -> `2rem`)
+- correction d'un `padding: none` en `padding: 0` dans styling.less|sass
+
+## Changelog v4.3.5 (20 octobre 2015)
+
+- correction de doublons
+- ajout de `word-break: break-all` sur les liens en responsive
+- suppression du `outline: 0` sur les boutons au focus
+- correction de visuels dans la documentation
+
+## Changelog v4.3.4 (27 août 2015)
+
+- ajout des classes `.pull` et `.push` pour les offsets des grilles
+- corrections de la doc Print et Commencer
+- corrections de nommages reliquats : `.flexitem-double` -> `.flex-item-double`
+- suppression des styles graphiques pour tableaux alternate et striped
+- modifications sur la classe `.visually-hidden`
+
+## Changelog v4.3.3 (6 août 2015)
+
+- ajout de helpers (breakpoints responsive)
+- modification du seuil de breakpoint pour les grilles inégales `@tiny-screen` -> `@small-screen`
+- corrections feuille de style print (modifications plus faciles pour l'utilisateur)
+
+## Changelog v4.3.1 (5 juillet 2015)
+
+- Amélioration des grilles responsive. Par exemple la classe `grid-4-small-2-tiny-1` définira une grille de 4 colonnes sur grand écran, puis en 2 colonnes sur un écran réduit, puis en une seule colonne sur petit écran. La notation `grid-4` fonctionne toujours, mais ne sera pas automatiquement responsive.
+
+## Changelog v4.3.0 (3 juillet 2015)
+
+- Les grilles de KNACSS sont à présent rétrocompatibles jusqu'à IE8 et Android2 grâce à un fallback en `display: inline-block` pour ces anciens navigateurs. Cependant les fonctionnalités resteront limitées chez ces dinosaures (pas de `flex-item-double`, de `flex-item-first`, etc.)
+
+## Changelog v4.2.3 (2 juillet 2015)
+
+- Passage à l'indentation via 2 espaces et non plus tabulations (+ `.editorconfig` à jour)
+- Répartition des styles tabulaires entre les fichiers `tables` et `styling`
+- pas de namespace sur les classes `.clear`, `.clearfix` et `.visually-hidden`
+- ajout d'une classe `.bfc` (identique à `.mod`) et qui crée un contexte de formatage block
+
+## Changelog v4.2.2 (26 juin 2015)
+
+- Ajout de !default aux variables SASS dans le fichier `_00-config.scss`
+- Flex-container enhancement
+- select element enhancement on webkit
+- correction largeurs des grilles pour IE
+- correction de divers doublons
+
+## Changelog v4.2.1 (25 mai 2015)
+
+- pour les grilles, suppression de l'alignement justifié par défaut (justify-content: space-between)
+
+## Changelog v4.2.0 (05 mai 2015)
+
+- possibilité d'ajouter un namespace à l'ensemble des classes (configurable dans le fichier config de Less et Sass)
+
+## Changelog v4.1.6 (17 avril 2015)
+
+- mise en commentaire des sauts de page print avant un h1
+- correction d'anomalie sur les input (user-select: none)
+- correction d'erreur de compilation Sass
+
+## Changelog v4.1.4 (14 avril 2015)
+
+- ajout de node_modules dans le .gitignore
+- ajout d'un gulpfile.js et des dépendances dans package.json
+- ajout de la classe .unstyled destinée aux éléments de formulaires
+
+## Changelog v4.1.3 (13 avril 2015)
+
+Les classes relatives à flexbox ont été renommées pour ne pas entrer en conflit avec des outils tels que Modernizer (qui ajoutent aux-aussi ce genre de classes).
+
+Anciens noms :
+
+```
+.flexbox, .flexbox-h
+.flexbox-v
+.flexitem-fluid
+.flexitem-center
+.flexitem-first, .flexitem-medium, .flexitem-last
+```
+
+Nouveaux noms :
+
+```
+.flex-container, .flex-container-h
+.flex-container-v
+.flex-item-fluid
+.flex-item-center
+.flex-item-first, .flex-item-medium, .flex-item-last
+```
+
+## Changelog v4.1.1 (30 mars 2015)
+
+## Vite fait
+
+- grosse remise à jour, orientée vers les technos modernes (flexbox, rem, calc, ...) et moins de "bidouille"
+- fin du support d'IE6-IE8 Si vous souhaitez utiliser KNACSS sur d'anciens navigateurs, préférez la [Version 3](https://github.com/raphaelgoetter/KNACSS/tree/3.1.0)
+- ajout du reset [normalize.css](http://necolas.github.io/normalize.css/)
+- un grand merci à @7studio pour ses conseils et observations sur la version beta de KNACSS 4.0
+- attention : rétrocompatibilité non préservée pour certaines classes ( .left, .start, .txtleft, .fl, .table-, .flex-start, .flex-end)
+- attention : rétrocompatibilité non préservée pour les grilles de mise en page (passage à flexbox et simplification de la structure)
+
+## Done
+
+- documentation en français
+- PDF pense-bête mis à jour : <http://knacss.com/KNACSS-cheatsheet.pdf>
+- gros ménage de printemps (gros nettoyage de tous les espaces et tabulations disgrâcieux)
+- dans la section "quick print reset", ajout des classes .p-like, h1-like, h2-like etc.
+- mise en commun globale de tous les styles p avec .p-like (h1 et h1-like, etc.).
+- déplacement et commentaire sur la règle body > script
+- correction du bug des height: auto sur les images au format SVG
+- meilleure intégration de box-sizing
+- suppression du fichier dédié aux réglages des bugs des anciennes versions d'IE6-IE8
+- fin du support d'IE9 pour les grilles : KNACSS v4 compatible IE10+ pour ce qui concerne les mises en page en grilles (flexbox FTW!)
+- réorganisation des fichiers (le fichier dédié "IE.css" disparait, le fichier "booleans" devient "misc" (plus cohérent), le fichier "gmaps" est désormais inclus dans "misc")
+- ajout des préfixes ".table-" devant les styles de décoration des tableaux
+- suppression du fichier icons.css, statistiquement inutile en pratique
+- meilleure cohérence de nommage entre .left, .start, .txtleft, .fl
+- ajout d'un fichier de reset dédié à WordPress
+- refonte intégrale des grilles en Flexbox (et en plus ça marche sur IE10 !)
+- ajout d'un fichier .editorconfig (<http://editorconfig.org/>)
+- passage des :before/:after en ::before/::after
+- ajout de sourcemaps CSS
+- suppression des images noir et blanc forcées en media print
+- correction de la formule LESS `{calc(1em * .625);`
+- ajout du reset [normalize.css](http://necolas.github.io/normalize.css/)
+- mise à jour du générateur de gabarits [Schnaps.it](http://schnaps.it/)

css/flexbox.css

@@ -1,65 +0,0 @@
-
-
-/* ----------------------------- */
-/* ==flexbox classes */
-/* ----------------------------- */
-
-/* flexbox layout context on container */
-.flex {
-	display: -webkit-box;
-	display: -moz-box;
-	display: -ms-flexbox;
-	display: -webkit-flex;
-	display: flex;
-}
-/* horizontal alignment */
-.flex-h {
-	    -webkit-box-orient: horizontal;
-	       -moz-box-orient: horizontal;
-	-webkit-flex-direction: row;
-	    -ms-flex-direction: row;
-	        flex-direction: row;
-}
-/* vertical alignment */
-.flex-v {
-	    -webkit-box-orient: vertical;
-	       -moz-box-orient: vertical;
-	-webkit-flex-direction: column;
-	    -ms-flex-direction: column;
-	        flex-direction: column;
-}
-/* for fluid items */
-.flex-fluid {
-	-moz-box-flex: 1;
-	 -webkit-flex: 1;
-	    -moz-flex: 1;
-	     -ms-flex: 1;
-	         flex: 1;
-}
-/* for items that must appear first */
-.flex-start {
-	-webkit-box-ordinal-group: -1;
-	   -moz-box-ordinal-group: 0;
-	           -ms-flex-order: -1;
-	            -webkit-order: -1;
-	               -moz-order: -1;
-	                    order: -1;
-}
-/* for items that must appear middle */
-.flex-mid {
-	-webkit-box-ordinal-group: 1;
-	   -moz-box-ordinal-group: 1;
-	           -ms-flex-order: 1;
-	            -webkit-order: 1;
-	               -moz-order: 1;
-	                    order: 1;
-}
-/* for items that must appear at the end */
-.flex-end {
-	-webkit-box-ordinal-group: 42;
-	   -moz-box-ordinal-group: 42;
-	           -ms-flex-order: 42;
-	            -webkit-order: 42;
-			       -moz-order: 42;
-	                    order: 42;
-}

css/forms.css

@@ -1,88 +0,0 @@
-
-/* ----------------------------- */
-/* ==forms                       */
-/* ----------------------------- */
-
-/* thanks to HTML5boilerplate,
-* github.com/nathansmith/formalize 
-* and www.sitepen.com
-*/
-
-
-/* buttons */
-.btn {
-	display: inline-block;
-}
-
-/* forms items */
-form,
-fieldset {
-	border: none;
-}
-input,
-button,
-select,
-label,
-.btn {
-	vertical-align: middle;
-	font-family: inherit;
-	font-size: inherit;
-}
-label { 
-	display: inline-block;
-	vertical-align: middle;
-	cursor: pointer;
-}
-legend {
-	border: 0;
-	white-space: normal;
-}
-textarea {
-	overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
-	min-height: 5em;
-	vertical-align: top;
-	font-family: inherit;
-	font-size: inherit;
-	resize: vertical;
-}
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-	cursor: pointer;
-	-webkit-appearance: button; /* clickable input types in iOS */
-}
-input[type="checkbox"],
-input[type="radio"] {
-	padding: 0; /* Corrects excess space around these inputs in IE8/9 */
-}
-input[type="search"] {
-	-webkit-appearance: textfield;
-}
-
-/* if select styling bugs on WebKit */
-/* select { -webkit-appearance: none; } */
-
-/* 'x' appears on right of search input when text is entered. This removes it */
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-	display: none;
-}
-::-webkit-input-placeholder {
-	color: #777;
-}
-input:-moz-placeholder,
-textarea:-moz-placeholder {
-	color: #777;
-}
-
-/* Removes inner padding and border in FF3+ */
-button::-moz-focus-inner,
-input[type='button']::-moz-focus-inner,
-input[type='reset']::-moz-focus-inner,
-input[type='submit']::-moz-focus-inner {
-	border: 0;
-	padding: 0;
-}

css/grids.css

@@ -1,77 +0,0 @@
-
-/* ----------------------------- */
-/* ==grids                       */
-/* ----------------------------- */
-
-/* grids inspired from SUIT https://github.com/suitcss/suit */
-/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */
-
-.grid {
-	overflow: hidden;
-	font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
-}
-.grid > * {
-	display: block;
-	padding: 0;
-	margin-left: -20px; /* gutter value */
-	text-align: left;
-	letter-spacing: -0.31em;
-	text-rendering: optimizespeed;
-}
-/* Opera hack */
-.opera:-o-prefocus,
-.grid > * {
-	word-spacing: -0.43em;
-}
-.grid > * > * {
-	display: inline-block;
-	width: 100%;	
-	padding-left: 20px; /* gutter value */
-	margin-left: 0;
-	vertical-align: top;
-	text-align: left;
-	letter-spacing: normal;
-	word-spacing: normal;
-	text-rendering: auto;
-	*display: inline; *zoom: 1; /* IE67 hack */
-	font-family: helvetica, arial, sans-serif;
-}
-.grid2 > * {width: 50%;}
-.grid3 > * {width: 33.333%;}
-.grid4 > * {width: 25%;}
-.grid5 > * {width: 20%;}
-.grid6 > * {width: 16.667%;}
-.grid8 > * {width: 12.5%;}
-.grid10 > * {width: 10%;}
-.grid12 > * {width: 8.333%;}
-
-/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
-.grid2-1 > *:first-child,
-.grid1-2 > * + * { width: 66.666%; }
-.grid1-2 > *:first-child,
-.grid2-1 > * + * { width: 33.333%; }
-.grid1-3 > *:first-child,
-.grid3-1 > * + * { width: 25%; }
-.grid3-1 > *:first-child,
-.grid1-3 > * + * { width: 75%; }
-
-/* Responsiv-o-matic */
-@media (max-width: 1024px) {
-	.grid5 > *,
-	.grid6 > *,
-	.grid8 > *,
-	.grid10 > *,
-	.grid12 > * {width: 33.333%}
-}
-@media (max-width: 768px) {
-	.grid3 > *,
-	.grid4 > *,
-	.grid5 > *,
-	.grid6 > *,
-	.grid8 > *,
-	.grid10 > *,
-	.grid12 > * {width: 50%}
-}
-@media (max-width: 640px) {
-	.grid > * > * {width: 100% !important}
-}

css/icons.css

@@ -1,139 +0,0 @@
-
-/* ----------------------------- */
-/* ==icons and bullets	         */
-/* ----------------------------- */
-
-.icon {display: inline-block;}
-
-.icon:before,
-.icon.after:after {
-	content: "";
-	display: inline-block;
-	vertical-align: middle;
-	position: relative; top: -.1em;
-	margin: 0 0.3em 0 0;
-	font: 1.4em/1 sans-serif;
-	color: #000;
-	text-shadow: 1px 1px 0 rgba(0,0,0,.1);
-	speak: none;
-}
-
-@media (min-device-width: 768px) {
-	.icon:before,
-	.icon.after:after {
-	font: 1em/0.6 sans-serif;
-	-webkit-transform: rotateZ(0.05deg);
-	}
-}
-
-.icon.after:after {
-	margin: 0 0 0 8px;
-}
-.icon.after:before {
-	content: "" !important
-}
-.icon-rate:before,
-.icon-rate.after:after {
-	content: "\2605";
-}
-.icon-unrate:before,
-.icon-unrate.after:after{
-	content: "\2606";
-}
-.icon-check:before,
-.icon-check.after:after{
-	content: "\2713";
-}
-.icon-uncheck:before,
-.icon-uncheck.after:after{
-	content: "\2717";
-}
-.icon-cloud:before,
-.icon-cloud.after:after {
-	content: "\2601";
-}
-.icon-dl:before,
-.icon-dl.after:after {
-	content: "\21E3";
-	font-weight: bold;
-}
-.icon-cross:before,
-.icon-cross.after:after {
-	content: "\2716";
-	font-weight: bold;
-}
-.icon-arrow1:before, 
-.icon-arrow1.after:after {
-	content: "\2192";
-	position: relative; 
-		top: -0.15em;
-}
-.icon-arrow2:before,
-.icon-arrow2.after:after {
-	content: "\279E";
-}
-.icon-arrow3:before,
-.icon-arrow3.after:after {
-	content: "\279A";
-}
-.icon-bracket1:before,
-.icon-bracket1.after:after {
-	content: "\2039";
-	font-weight: bold;
-	font-size: 1.6em;
-	position: relative; 
-		top: -0.15em;
-}
-.icon-bracket2:before,
-.icon-bracket2.after:after {
-	content: "\203A";
-	font-weight: bold;
-	font-size: 1.6em;
-	position: relative; 
-		top: -0.15em;
-}
-.icon-up:before,
-.icon-up.after:after {
-	content: "\25B2";
-}
-.icon-down:before,
-.icon-down.after:after {
-	content: "\25BC";
-}
-.icon-bull:before,
-.icon-bull.after:after {
-	content: "\2022";
-	font-size: 1.2em;
-	top: -0.05em;
-}
-.icon-bull2:before,
-.icon-bull2.after:after {
-	content: "\25E6";
-	top: -0.05em;
-}
-.icon-bull3:before,
-.icon-bull3.after:after{
-	content: "\2023";
-	font-size: 1.6em;
-	top: -0.05em;
-}
-.icon-nav:before,
-.icon-nav.after:after {
-	content: "\2261";
-	font-weight: bold;
-}
-.icon-losange:before,
-.icon-losange.after:after {
-	content: "\25C6";
-}
-.icon-asteri:before,
-.icon-asteri.after:after {
-	content: "\2731";
-	font-weight: bold;
-}
-.icon-mail:before,
-.icon-mail.after:after {
-	content: "\2709";
-	font-size: 1.6em;
-	top: -.05em;
-}

css/knacss.css

@@ -1,489 +0,0 @@
-/*!
-* www.KNACSS.com V2.9.2 (2014-01) @author: Raphael Goetter, Alsacreations
-* Licence WTFPL http://www.wtfpl.net/ 
-*/
-
-/* ----------------------------- */
-/* == soft reset                 */
-/* ----------------------------- */
-
-/* switching box model for all elements */
-* {
-	-webkit-box-sizing: border-box;
-	   -moz-box-sizing: border-box;
-	        box-sizing: border-box;
-}
-
-/* soft reset */
-html,
-body {
-	margin: 0;
-	padding: 0;
-}
-ul,
-ol {
-	padding-left: 2em;
-}
-ul.unstyled {
-	list-style: none;
-}
-img {
-	vertical-align: middle;
-	border: 0;
-}
-audio,
-canvas,
-video {
-	display: inline-block;
-}
-svg:not(:root) {
-	overflow: hidden;
-}
-figure {
-	margin: 0;
-}
-
-
-/* ----------------------------- */
-/* == typography                 */
-/* ----------------------------- */
-
-/* base font-size corresponds to 10px and is adapted to rem unit */
-html {
-	font-size: 62.5%;
-	-webkit-text-size-adjust: 100%;
-	    -ms-text-size-adjust: 100%;
-}
-body {
-	background-color: #fff;
-	color: #000;
-	font-family: helvetica, arial, sans-serif;
-	font-size: 1.4em; /* equiv 14px */
-	line-height: 1.5; /* adapt to your design */
-}
-
-/* font-sizing for content */
-/* preserves vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
-p,
-ul,
-ol,
-dl,
-blockquote,
-pre,
-td,
-th,
-label,
-textarea,
-caption,
-details,
-figure {
-	margin: .75em 0 0;
-	line-height: 1.5;
-}
-h1, .h1-like {
-	margin: 0.6563em 0 0 0;
-	font-size: 2.2857em; /* equiv 32px */
-	line-height: 1.3126;
-}
-h2, .h2-like {
-	margin: 0.75em 0 0 0;
-	font-size: 2em; /* equiv 28px */
-	line-height: 1.5;
-}
-h3, .h3-like {
-	margin: 0.875em 0 0 0;
-	font-size: 1.7143em; /* equiv 24px */
-	line-height: 1.75;
-}
-h4, .h4-like {
-	margin: 1.05em 0 0 0;
-	font-size: 1.4286em; /* equiv 20px */
-	line-height: 1.05;
-}
-h5, .h5-like {
-	margin: 1.1667em 0 0 0;
-	font-size: 1.2857em; /* equiv 18px */
-	line-height: 1.1667;
-}
-h6, .h6-like {
-	margin: 1.3125em 0 0 0;
-	font-size: 1.1429em; /* equiv 16px */
-	line-height: 1.3125;
-}
-
-/* alternate font-sizing */
-.smaller {
-	font-size: .7143em; /* equiv 10px */
-}
-.small {
-	font-size: .8571em; /* equiv 12px */
-}
-.big {
-	font-size: 1.1429em; /* equiv 16px */
-}
-.bigger {
-	font-size: 1.2857em; /* equiv 18px */
-}
-.biggest {
-	font-size: 1.4286em; /* equiv 20px */
-}
-
-code, 
-pre,
-samp,
-kbd {
-	white-space: pre-line; /* IE fix */
-	white-space: pre-wrap;
-	font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
-	line-height: 1em;
-}
-code, kbd, mark {
-	border-radius: 2px;
-}
-em {
-	font-style: italic;
-}
-strong {
-	font-weight: bold;
-}
-kbd {
-	padding: 0 2px;
-	border: 1px solid #999;
-}
-code {
-	padding: 2px 4px;
-	background: rgba(0,0,0,.04);
-	color: #b11; 
-}
-mark {
-	padding:2px 4px;
-	background: #ff0;
-}
-sup,
-sub {
-	vertical-align: 0;
-	position: relative;
-}
-sup {
-	bottom: 1ex;
-}
-sub {
-	top: .5ex;
-}
-
-/* ----------------------------- */
-/* == hiding content             */
-/* ----------------------------- */
-
-/* hiding content */
-.visually-hidden {
-	position: absolute;
-	left: -7000px;
-	overflow: hidden;
-}
-[dir=rtl] .visually-hidden {
-	left: auto;
-	right: -7000px;
-}
-.desktop-hidden { display: none; } /* hidden on desktop */
-
-
-/* ----------------------------- */
-/* == skip links styling         */
-/* ----------------------------- */
-
-.skip-links {
-	position: absolute;
-}
-.skip-links a {
-	position: absolute;
-	left: -7000px;
-	padding: 0.5em;
-	background: #000;
-	color:#fff;
-	text-decoration: none;
-}
-.skip-links a:focus {
-	position: static;
-}
-
-
-/* ----------------------------- */
-/* == browsers consistency       */
-/* ----------------------------- */
-
-/* avoid top margins on first content element */
-p:first-child,
-ul:first-child,
-ol:first-child,
-dl:first-child,
-blockquote:first-child,
-pre:first-child,
-h1:first-child,
-h2:first-child,
-h3:first-child,
-h4:first-child,
-h5:first-child,
-h6:first-child {
-	margin-top: 0;
-}
-
-/* avoid margins on nested elements */
-li p,
-li ul,
-li ol {
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-/* max values */
-img, table, td, blockquote, code, pre, textarea, input, video {
-	max-width: 100%;
-}
-
-/* margin-bottom on tables */
-table { margin-bottom: 1.5em; }
-
-/* Google Gmap3 bug fix on images */
-:not(.gm-style) img {
-	height: auto !important;
-}
-.ie678 .gm-style img {
-	height: 100%;  /* IE678 hack */
-}
-.gm-style img,
-.gmnoscreen img,
-.gmnoprint img {
-	max-width: none !important;
-}
-
-/* scripts */
-body > script {display: none !important;}
-
-
-/* ----------------------------- */
-/* ==layout and modules          */
-/* ----------------------------- */
-
-/* float layout */
-/* module, gains superpower "BFC" Block Formating Context */
-.mod { 
-	overflow: hidden;
-}
-
-/* blocks that needs to be placed under floats */
-.clear,
-.line,
-.row {
-	clear: both;
-}
-
-/* blocks that must contain floats */
-.clearfix:after,
-.line:after,
-.mod:after {
-	content: "";
-	display: table;
-	clear: both;
-}
-
-/* table layout */
-.row {
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-}
-.row > *,
-.col {
-	display: table-cell;
-	vertical-align: top;
-}
-
-/* inline-block */
-.inbl {
-	display: inline-block;
-	vertical-align: top;
-}
-
-/* alignments (blocks and inline) */
-/* ------------------------------ */
-
-/* left elements */
-.left {
-	float: left;
-}
-img.left {
-	margin-right: 1em;
-}
-
-/* right elements */
-.right {
-	float: right;
-}
-img.right {
-	margin-left: 1em;
-}
-
-img.left, img.right {
-	margin-bottom: 5px;
-}
-
-.center    { margin-left: auto; margin-right: auto; }
-.txtleft   { text-align: left; }
-.txtright  { text-align: right; }
-.txtcenter { text-align: center; }
-
-/* ----------------------------- */
-/* == width helpers              */
-/* .. use only when needed       */
-/* ----------------------------- */
-
-/* blocks widths (percentages and pixels) */
-.w10    { width: 10%; }
-.w20    { width: 20%; }
-.w25    { width: 25%; }
-.w30    { width: 30%; }
-.w33    { width: 33.3333%; }
-.w40    { width: 40%; }
-.w50    { width: 50%; }
-.w60    { width: 60%; }
-.w66    { width: 66.6666%; }
-.w70    { width: 70%; }
-.w75    { width: 75%; }
-.w80    { width: 80%; }
-.w90    { width: 90%; }
-.w100   { width: 100%; }
-
-.w50p   { width: 50px; }
-.w100p  { width: 100px; }
-.w150p  { width: 150px; }
-.w200p  { width: 200px; }
-.w300p  { width: 300px; }
-.w400p  { width: 400px; }
-.w500p  { width: 500px; }
-.w600p  { width: 600px; }
-.w700p  { width: 700px; }
-.w800p  { width: 800px; }
-.w960p  { width: 960px; }
-.mw960p { max-width: 960px; }
-.w1140p  { width: 1140px; }
-.mw1140p { max-width: 1140px; }
-
-
-/* ----------------------------- */
-/* == spacing helpers            */
-/* .. use only when needed       */
-/* ----------------------------- */
-
-/* spacing helpers
-p,m = padding,margin
-a,t,r,b,l = all,top,right,bottom,left
-s,m,l,n,0 = small(10px),medium(20px),large(30px), zero or none(0)
-source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
-*/
-.m-reset, .ma0 { margin: 0; }
-.p-reset, .pa0 { padding: 0; }
-.ma1, .mas { margin: 10px; }
-.ma2, .mam { margin: 20px; }
-.ma3, .mal { margin: 30px; }
-.pa1, .pas { padding: 10px; }
-.pa2, .pam { padding: 20px; }
-.pa3, .pal { padding: 30px; }
-
-.mt0, .mtn { margin-top: 0; }
-.mt1, .mts { margin-top: 10px; }
-.mt2, .mtm { margin-top: 20px; }
-.mt3, .mtl { margin-top: 30px; }
-.mr0, .mrn { margin-right: 0; }
-.mr1, .mrs { margin-right: 10px; }
-.mr2, .mrm { margin-right: 20px; }
-.mr3, .mrl { margin-right: 30px; }
-.mb0, .mbn { margin-bottom: 0; }
-.mb1, .mbs { margin-bottom: 10px; }
-.mb2, .mbm { margin-bottom: 20px; }
-.mb3, .mbl { margin-bottom: 30px; }
-.ml0, .mln { margin-left: 0; }
-.ml1, .mls { margin-left: 10px; }
-.ml2, .mlm { margin-left: 20px; }
-.ml3, .mll { margin-left: 30px; }
-
-.pt0, .ptn { padding-top: 0; }
-.pt1, .pts { padding-top: 10px; }
-.pt2, .ptm { padding-top: 20px; }
-.pt3, .ptl { padding-top: 30px; }
-.pr0, .prn { padding-right: 0; }
-.pr1, .prs { padding-right: 10px; }
-.pr2, .prm { padding-right: 20px; }
-.pr3, .prl { padding-right: 30px; }
-.pb0, .pbn { padding-bottom: 0; }
-.pb1, .pbs { padding-bottom: 10px; }
-.pb2, .pbm { padding-bottom: 20px; }
-.pb3, .pbl { padding-bottom: 30px; }
-.pl0, .pln { padding-left: 0; }
-.pl1, .pls { padding-left: 10px; }
-.pl2, .plm { padding-left: 20px; }
-.pl3, .pll { padding-left: 30px; }
-
-
-/* ----------------------------- */
-/* == iefix                      */
-/* ----------------------------- */
-
-/* hasLayout for IE6/IE7 */
-.ie67 .clearfix,
-.ie67 .line,
-.ie67 .mod,
-.ie67 .row,
-.ie67 .col {
-	zoom: 1;
-}
-
-/* inline-block and table-cell for IE6/IE7 */
-/* warning: .col needs a width on IE6/IE7 */
-.ie67 .btn,
-.ie67 .col,
-.ie67 .inbl {
-	display: inline;
-	zoom: 1;
-}
-.ie8 img {
-	width: auto; /* @bugfix for IE8 */
-}
-
-/* Active box-sizing for IE6/IE7 */
-/* @source https://github.com/Schepp/box-sizing-polyfill */
-/*
-.ie67 * {
-	behavior: url(/lib/box-sizing-polyfill/boxsizing.htc);
-}
-*/
-
-
-/* ----------------------------- */
-/* == quick print reset          */
-/* ----------------------------- */
-
-@media print {
-	p,
-	blockquote {
-		orphans: 2;
-		widows: 2;
-	}
-	blockquote,
-	ul,
-	ol {
-		page-break-inside: avoid;
-	}
-	h1,
-	h2,
-	h3,
-	caption {
-		page-break-after: avoid;
-	}
-}
-
-/* debug helper */
-.knacss-debug {
-	background: pink;
-	outline: 3px solid maroon;
-}

css/print.css

@@ -1,69 +0,0 @@
-/* quick print reset */
-@media print {
-	* {
-		background: transparent !important;
-		box-shadow: none !important;
-		text-shadow: none !important;
-	}
-	body {
-		width: auto !important;
-		margin: auto !important;
-		font-family: serif;
-		font-size: 12pt;
-		background-color: #fff !important;
-		color: #333 !important;
-	}
-	p,
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6,
-	blockquote,
-	ul,
-	ol {
-		color: #000 !important;
-		margin: auto !important;
-	}
-	.print {
-		display: block; /* displaying .print elements */
-	}
-	img { 
-		-webkit-filter: grayscale(100%);
-		-moz-filter: grayscale(100%);
-		-ms-filter: grayscale(100%);
-		-o-filter: grayscale(100%);
-		filter: grayscale(100%);
-	}
-	p,
-	blockquote {
-		orphans: 3; /* no orphans */
-		widows: 3; /* no widows */
-	}
-	blockquote,
-	ul,
-	ol {
-		page-break-inside: avoid; /* no breaks inside these elements */
-	}
-	h1 {
-		page-break-before: always; /* page break before main headers */
-	}
-	h1,
-	h2,
-	h3,
-	caption {
-		page-break-after: avoid; /* no breaks after these elements */
-	}
-	a {
-		color: #000 !important;
-		text-decoration: underline !important;
-	}
-	a[href]:after {
-		content: " (" attr(href) ")"; /* displaying URLs */
-	}
-	a[href^="javascript:"]:after,
-	a[href^="#"]:after {
-		content: "";
-	}
-}

css/rwd.css

@@ -1,214 +0,0 @@
-
-/* ----------------------------- */
-/* ==viewport fixing for RWD     */
-/* ----------------------------- */
-@-webkit-viewport {
-	width: device-width;
-	zoom: 1.0;
-}
-@-moz-viewport {
-	width: device-width;
-	zoom: 1.0;
-}
-@-ms-viewport {
-	width: device-width;
-	zoom: 1.0;
-}
-@-o-viewport {
-	width: device-width;
-	zoom: 1.0;
-}
-@viewport {
-	width: device-width;
-	zoom: 1.0;
-}
-
-/* ----------------------------- */
-/* ==desktop and retina medias   */
-/* ----------------------------- */
-
-@media (min-width: 641px) {
-/* here go rules for big resources and big screens like: background-images, font-faces, etc. */
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
-/* Style adjustments for retina devices */
-}
-
-/* ---------------------------------- */
-/* ==Responsive large / small / tiny  */
-/* ---------------------------------- */
-
-@media (min-width: 1280px) {
-
-	/* layouts for large (l) screens */
-	.large-hidden,
-	.tablet-hidden { display: none !important; }
-	.large-visible { display: block !important; }
-	.large-no-float {float: none; }
-	.large-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	.large-row {
-		display: table;
-		table-layout: fixed;
-		width: 100% !important;
-	}
-	.large-col {
-		display: table-cell;
-		vertical-align: top;
-	}
-
-	/* widths for large (l) screens */
-	.large-w25 { width: 25% !important; }
-	.large-w33 { width: 33.3333% !important; }
-	.large-w50 { width: 50% !important; }
-	.large-w66 { width: 66.6666% !important; }
-	.large-w75 { width: 75% !important; }
-	.large-w100 {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;		
-	}
-
-	/* margins for large (l) screens */
-	.large-ma0 { margin: 0 !important; }
-}
-
-@media (max-width: 768px) {
-
-	/* quick tablet reset */
-	.w600p,
-	.w700p,
-	.w800p,
-	.w960p,
-	.mw960p,
-	.small-wauto { 
-		width: auto;
-		float: none;
-		} 
-
-	/* you shall not pass */
-	div, textarea, table, td, th, code, pre, samp {
-		word-wrap: break-word;
-		-webkit-hyphens: auto;
-		   -moz-hyphens: auto;
-		    -ms-hyphens: auto;
-		     -o-hyphens: auto;
-		        hyphens: auto;
-	}
-
-	/* layouts for small (s) screens */
-	.small-hidden,
-	.tablet-hidden { display: none !important; }
-	.small-visible { display: block !important; }
-	.small-no-float {float: none; }
-	.small-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	.small-row {
-		display: table !important;
-		table-layout: fixed !important;
-		width: 100% !important;
-	}
-	.small-col {
-		display: table-cell !important;
-		vertical-align: top !important;
-	}
-
-	/* widths for small (s) screens */
-	.small-w25 { width: 25% !important; }
-	.small-w33 { width: 33.3333% !important; }
-	.small-w50 { width: 50% !important; }
-	.small-w66 { width: 66.6666% !important; }
-	.small-w75 { width: 75% !important; }
-	.small-w100 {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;		
-	}
-	/* margins for small (s) screens */
-	.small-ma0 { margin: 0 !important; }
-}
-
-@media (max-width: 640px) {
-
-	/* quick smartphone reset */
-	.mod,
-	.col,
-	fieldset {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;
-	}
-	.w300p,
-	.w400p,
-	.w500p {
-		width: auto;
-		float: none;
-	}
-	.row { 
-		display: block !important;
-		width: 100% !important;
-	}
-
-	/* layouts for tiny (t) screens */
-	.tiny-hidden,
-	.phone-hidden { display: none !important; }
-	.tiny-visible { display: block !important; }
-	.tiny-no-float {float: none;}
-	.tiny-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	.tiny-row {
-		display: table !important;
-		table-layout: fixed !important;
-		width: 100% !important;
-	}
-	.tiny-col {
-		display: table-cell !important;
-		vertical-align: top !important;
-	}
-	th,
-	td {
-		display: block !important;
-		width: auto !important;
-		text-align: left !important;
-	}
-	thead { display: none; }
-
-	/* widths for tiny (t) screens */
-	.tiny-w25 { width: 25% !important; }
-	.tiny-w33 { width: 33.3333% !important; }
-	.tiny-w50 { width: 50% !important; }
-	.tiny-w66 { width: 66.6666% !important; }
-	.tiny-w75 { width: 75% !important; }
-	.tiny-w100 { 
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;
-	}
-	/* margins for tiny (t) screens */
-	.tiny-ma0 { margin: 0 !important; }
-}

css/tables.css

@@ -1,78 +0,0 @@
-
-/* ----------------------------- */
-/* ==tables                      */
-/* ----------------------------- */
-
-table,
-.table {
-	max-width : 100%;
-	table-layout: fixed;
-	border-collapse: collapse;
-	vertical-align: top;
-}
-table {
-	width: 100%;
-}
-.table {
-	display: table;
-}
-table#recaptcha_table,
-table.table-auto {
-	table-layout:auto;
-}
-caption {
-	padding: 10px;
-	color: #555;
-	font-style: italic;	
-}
-table { 
-	border: 1px solid #ccc;
-}
-tr > * + * {
-	border-left: 1px solid #ccc;
-}
-th,
-td {
-	padding: .3em .8em;
-	text-align: left;
-	border-bottom: 1px solid #ccc;
-}
-td {
-	color: #333;
-}
-
-/* alternate tables */
-.alternate { border: 0; }
-.alternate tbody { 
-	border: 1px solid #ccc; 
-}
-.alternate thead tr > * + * {
-	border-left: 0;
-}
-.alternate tbody tr > * + * {
-	border-left: 1px solid #ccc;
-}
-
-/* alternate-vert tables */
-.alternate-vert { 
-	border: 0;
-	border-right: 1px solid #ccc;
-}
-.alternate-vert tr > :first-child {
-	border-bottom: 0;
-}
-.alternate-vert tr > * + * {
-	border-top: 1px solid #ccc;
-}
-
-/* striped tables */
-.striped tbody tr:nth-child(odd) {
-	background: #eee;
-	background: rgba(0, 0, 0, .05);
-}
-
-/* striped-vert tables */
-.striped-vert tr > :first-child {
-	background: #eee;
-	background: rgba(0, 0, 0, .05);
-}

gulpfile.js

@@ -0,0 +1,55 @@
+const gulp = require('gulp');
+var sass = require('gulp-sass');
+var postcss = require('gulp-postcss');
+var CombineMQ = require('postcss-combine-media-query');
+var autoprefixer = require('autoprefixer');
+var CSSnano = require('cssnano');
+
+gulp.task('css:full', () => {
+  return gulp.src('sass/knacss.scss')
+    .pipe(sass(
+      {
+      outputStyle: 'expanded'
+      }))
+    .pipe(
+      postcss([
+        autoprefixer, // ajoute les préfixes vendeurs
+      ]))
+    .pipe(gulp.dest('css/knacss-full'));
+});
+
+gulp.task('css:mini', () => {
+  return gulp.src('sass/knacss.scss')
+    .pipe(sass(
+      {
+      outputStyle: 'compact'
+      }))
+    .pipe(
+      postcss([
+        CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
+        autoprefixer, // ajoute les préfixes vendeurs
+        CSSnano // minification 
+      ]))
+    .pipe(gulp.dest('css/knacss-mini'));
+});
+
+gulp.task('css:grillade', () => {
+  return gulp.src('sass/utils/grillade.scss')
+    .pipe(sass(
+      {
+      outputStyle: 'compact'
+      }))
+    .pipe(
+      postcss([
+        CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
+        autoprefixer, // ajoute les préfixes vendeurs
+        CSSnano // minification 
+      ]))
+    .pipe(gulp.dest('css/grillade'));
+});
+
+// Tâche BUILD : tapez "gulp" ou "gulp build"
+gulp.task('build', gulp.series('css:full', 'css:mini', 'css:grillade'));
+
+// Tâche par défaut
+gulp.task('default', gulp.series('build'));

less/_00-config.less

@@ -1,47 +0,0 @@
-// Config file : variables, mixins, ...
-
-// LESS values : adapt them to your design
-@basefont				: 14px; // if "14px" then 1em = 14px
-@lh						: 1.5; // equiv line-height 1.5em
-@h1-size				: 32px; // equiv "32px"
-@h2-size				: 28px; // equiv "28px"
-@h3-size				: 24px; // equiv "24px"
-@h4-size				: 20px; // equiv "20px"
-@h5-size				: 18px; // equiv "18px"
-@h6-size				: 16px; // equiv "16px"
-@basecolor				: #000; // text color on body
-@basebg					: #fff; // body background color
-@basecolor-link			: #333; // primary links color;
-@basecolor-link-hover	: #000; // primary hovered/focused links color;
-@smallvalue				: 10px; // small value for margins / paddings
-@mediumvalue			: 20px; // medium value for margins / paddings
-@largevalue				: 30px; // large value for margins / paddings
-@tinyscreen				: 480px; // tiny screens media query
-@smallscreen			: 768px; // small screens media query
-@largescreen			: 1280px; // large screens media query
-@gutter					: 20px; // gutter value (%, px, em, rem, etc) for grid layouts
-@fontstack1				: Helvetica, Arial, sans-serif; // common font
-@fontstack2				: Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
-@fontstack3				: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
-
-// LESS mixins : don't touch or you'll be banned ;)
-// px to em/rem 
-.rem(@size, @bf: @basefont){
-	@rem: @size / 10;
-	font-size: unit(@rem, rem);
-}
-.em(@size, @bf: @basefont){
-	@em: @size / @bf;
-	font-size: unit(@em, em);
-}
-// flow for headings
-.flow(@size, @bf: @basefont, @bh: @lh) {
-	@marg: @bh * @bf / @size;
-	@mt: unit(@marg,em);
-	margin-top: @mt;
-	margin-bottom: 0; 
-	@rem: @size / 10;
-	font-size: unit(@rem, rem);
-	@coef: ceil(1/@mt);
-	line-height: unit((@mt * @coef));    
-}

less/_01-base.less

@@ -1,496 +0,0 @@
-
-/* ----------------------------- */
-/* == soft reset                 */
-/* ----------------------------- */
-
-/* switching box model for all elements */
-* {
-	-webkit-box-sizing: border-box;
-	   -moz-box-sizing: border-box;
-	        box-sizing: border-box;
-}
-
-/* soft reset */
-html,
-body {
-	margin: 0;
-	padding: 0;
-}
-ul,
-ol {
-	padding-left: 2em;
-}
-ul.unstyled {
-	list-style: none;
-}
-img {
-	vertical-align: middle;
-	border: 0;
-}
-audio,
-canvas,
-video {
-	display: inline-block;
-}
-svg:not(:root) {
-	overflow: hidden;
-}
-figure {
-	margin: 0;
-}
-
-
-
-/* ----------------------------- */
-/* == typography                 */
-/* ----------------------------- */
-
-/* base font-size corresponds to 10px and is adapted to rem unit */
-html {
-	font-size: 62.5%;
-	-webkit-text-size-adjust: 100%;
-	    -ms-text-size-adjust: 100%;
-}
-body {
-	background-color: @basebg;
-	color: @basecolor;
-	font-family: @fontstack1;
-	font-size: unit((@basefont / 10), em);
-	line-height: @lh; // adapt to your design
-}
-
-/* font-sizing for content */
-/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
-p,
-ul,
-ol,
-dl,
-blockquote,
-pre,
-td,
-th,
-label,
-textarea,
-caption,
-details, 
-figure, 
-hgroup {
-	margin-top: .75em;
-	margin-bottom: 0;
-	line-height: @lh;
-}
-h1, .h1-like {
-	.flow(@h1-size);
-}
-h2, .h2-like {
-	.flow(@h2-size);
-}
-h3, .h3-like {
-	.flow(@h3-size);
-}
-h4, .h4-like {
-	.flow(@h4-size);
-}
-h5, .h5-like {
-	.flow(@h5-size);
-}
-h6, .h6-like {
-	.flow(@h6-size);
-}
-
-/* alternate font-sizing */
-.smaller {
-	.em(@basefont - 4);
-}
-.small {
-	.em(@basefont - 2);
-}
-.big {
-	.em(@basefont + 2);
-}
-.bigger {
-	.em(@basefont + 4);
-}
-.biggest {
-	.em(@basefont + 6);
-}
-
-code, 
-pre,
-samp,
-kbd {
-	white-space: pre-line; /* IE fix */
-	white-space: pre-wrap;
-	font-family: @fontstack2;
-	line-height: 1;
-}
-code, kbd, mark {
-	border-radius: 2px;
-}
-em {
-	font-style: italic;
-}
-strong {
-	font-weight: bold;
-}
-kbd {
-	padding: 0 2px;
-	border: 1px solid #999;
-}
-code {
-	padding: 2px 4px;
-	background: rgba(0,0,0,.04);
-	color: #b11; 
-}
-mark {
-	padding:2px 4px;
-	background: #ff0;
-}
-sup,
-sub {
-	vertical-align: 0;
-	position: relative;
-}
-sup {
-	bottom: 1ex;
-}
-sub {
-	top: .5ex;
-}
-
-
-/* ----------------------------- */
-/* == hiding content             */
-/* ----------------------------- */
-
-/* hiding content */
-.visually-hidden {
-	position: absolute;
-	left: -7000px;
-	overflow: hidden;
-}
-[dir=rtl] .visually-hidden {
-	left: auto;
-	right: -7000px;
-}
-.desktop-hidden { display: none; } /* hidden on desktop */
-
-
-/* ----------------------------- */
-/* == skip links styling         */
-/* ----------------------------- */
-
-.skip-links {
-	position: absolute;
-
-	a {
-		position: absolute;
-		left: -7000px;
-		padding: 0.5em;
-		background: black;
-		color: white;
-		text-decoration: none;
-	
-		&:focus {
-			position: static;
-		}
-	}
-}
-
-
-/* ----------------------------- */
-/* == browsers consistency       */
-/* ----------------------------- */
-
-/* avoid top margins on first content element */
-p, ul, ol, dl,
-blockquote, pre,
-h1, h2, h3, h4, h5, h6 {
-	&:first-child {
-		margin-top: 0;
-	}
-}
-
-/* avoid margins on nested elements */
-li p,
-li ul,
-li ol {
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-/* max values */
-img, table, td, blockquote, code, pre, textarea, input, video {
-	max-width: 100%;
-}
-
-/* margin-bottom on tables */
-table { margin-bottom: 1.5em; }
-
-/* Google Gmap3 bug fix on images */
-:not(.gm-style) img {
-	height: auto !important;
-}
-.ie678 .gm-style img {
-	height: 100%;  /* IE678 hack */
-}
-.gm-style img,
-.gmnoscreen img,
-.gmnoprint img {
-	max-width: none !important;
-}
-
-/* scripts */
-body > script {display: none !important;}
-
-
-/* ----------------------------- */
-/* ==layout and modules          */
-/* ----------------------------- */
-
-/* float layout */
-/* module, gains superpower "BFC" Block Formating Context */
-.mod { 
-	overflow: hidden;
-}
-
-/* blocks that needs to be placed under floats */
-.clear,
-.line,
-.row {
-	clear: both;
-}
-
-/* blocks that must contain floats */
-.clearfix:after,
-.line:after,
-.mod:after {
-	content: "";
-	display: table;
-	clear: both;
-}
-
-/* table layout */
-.row {
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-}
-.row > *,
-.col {
-	display: table-cell;
-	vertical-align: top;
-}
-
-/* inline-block */
-.inbl {
-	display: inline-block;
-	vertical-align: top;
-}
-
-
-/* alignments (blocks and inline) */
-/* ------------------------------ */
-
-/* left elements */
-.left {
-	float: left;
-}
-img.left {
-	margin-right: 1em;
-}
-
-/* right elements */
-.right {
-	float: right;
-}
-img.right {
-	margin-left: 1em;
-}
-
-img.left, img.right {
-	margin-bottom: 5px;
-}
-
-.center    { margin-left: auto; margin-right: auto; }
-.txtleft   { text-align: left; }
-.txtright  { text-align: right; }
-.txtcenter { text-align: center; }
-
-
-/* ----------------------------- */
-/* == width helpers              */
-/* .. use only when needed       */
-/* ----------------------------- */
-
-/* blocks widths (percentage and pixels) */
-.w10    { width: 10%; }
-.w20    { width: 20%; }
-.w25    { width: 25%; }
-.w30    { width: 30%; }
-.w33    { width: 33.3333%; }
-.w40    { width: 40%; }
-.w50    { width: 50%; }
-.w60    { width: 60%; }
-.w66    { width: 66.6666%; }
-.w70    { width: 70%; }
-.w75    { width: 75%; }
-.w80    { width: 80%; }
-.w90    { width: 90%; }
-.w100   { width: 100%; }
-
-.w50p   { width: 50px; }
-.w100p  { width: 100px; }
-.w150p  { width: 150px; }
-.w200p  { width: 200px; }
-.w300p  { width: 300px; }
-.w400p  { width: 400px; }
-.w500p  { width: 500px; }
-.w600p  { width: 600px; }
-.w700p  { width: 700px; }
-.w800p  { width: 800px; }
-.w960p  { width: 960px; }
-.mw960p { max-width: 960px; }
-.w1140p  { width: 1140px; }
-.mw1140p { max-width: 1140px; }
-
-
-/* ----------------------------- */
-/* == spacing helpers            */
-/* .. use only when needed       */
-/* ----------------------------- */
-
-/* spacing helpers
-p,m = padding,margin
-a,t,r,b,l = all,top,right,bottom,left
-s,m,l,n = small(10px),medium(20px),large(30px),none(0)
-source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
-*/
-.m-reset, .ma0 { margin: 0; }
-.p-reset, .pa0 { padding: 0; }
-.ma1, .mas { margin: @smallvalue; }
-.ma2, .mam { margin: @mediumvalue; }
-.ma3, .mal { margin: @largevalue; }
-.pa1, .pas { padding: @smallvalue; }
-.pa2, .pam { padding: @mediumvalue; }
-.pa3, .pal { padding: @largevalue; }
-
-.mt0, .mtn { margin-top: 0; }
-.mt1, .mts { margin-top: @smallvalue; }
-.mt2, .mtm { margin-top: @mediumvalue; }
-.mt3, .mtl { margin-top: @largevalue; }
-.mr0, .mrn { margin-right: 0; }
-.mr1, .mrs { margin-right: @smallvalue; }
-.mr2, .mrm { margin-right: @mediumvalue; }
-.mr3, .mrl { margin-right: @largevalue; }
-.mb0, .mbn { margin-bottom: 0; }
-.mb1, .mbs { margin-bottom: @smallvalue; }
-.mb2, .mbm { margin-bottom: @mediumvalue; }
-.mb3, .mbl { margin-bottom: @largevalue; }
-.ml0, .mln { margin-left: 0; }
-.ml1, .mls { margin-left: @smallvalue; }
-.ml2, .mlm { margin-left: @mediumvalue; }
-.ml3, .mll { margin-left: @largevalue; }
-
-.pt0, .ptn { padding-top: 0; }
-.pt1, .pts { padding-top: @smallvalue; }
-.pt2, .ptm { padding-top: @mediumvalue; }
-.pt3, .ptl { padding-top: @largevalue; }
-.pr0, .prn { padding-right: 0; }
-.pr1, .prs { padding-right: @smallvalue; }
-.pr2, .prm { padding-right: @mediumvalue; }
-.pr3, .prl { padding-right: @largevalue; }
-.pb0, .pbn { padding-bottom: 0; }
-.pb1, .pbs { padding-bottom: @smallvalue; }
-.pb2, .pbm { padding-bottom: @mediumvalue; }
-.pb3, .pbl { padding-bottom: @largevalue; }
-.pl0, .pln { padding-left: 0; }
-.pl1, .pls { padding-left: @smallvalue; }
-.pl2, .plm { padding-left: @mediumvalue; }
-.pl3, .pll { padding-left: @largevalue; }
-
-
-/* ----------------------------- */
-/* == iefix                      */
-/* ----------------------------- */
-
-/* Make sure you are using Conditional Classes in your HTML */
-/* see : http://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html */
-
-.ie678 h1, .ie678 .h1-like {
-	.em(@h1-size);
-}
-.ie678 h2, .ie678 .h2-like {
-	.em(@h2-size);
-}
-.ie678 h3, .ie678 .h3-like {
-	.em(@h3-size);
-}
-.ie678 h4, .ie678 .h4-like {
-	.em(@h4-size);
-}
-.ie678 h5, .ie678 .h5-like {
-	.em(@h5-size);
-}
-.ie678 h6, .ie678 .h6-like {
-	.em(@h6-size);
-}
-
-/* haslayout for IE6/IE7 */
-.ie67 .clearfix,
-.ie67 .line,
-.ie67 .mod,
-.ie67 .row,
-.ie67 .col {
-	zoom: 1;
-}
-
-/* inline-block and table-cell for IE6/IE7 */
-/* warning: .col needs width on IE6/IE7 */
-.ie67 .btn,
-.ie67 .col,
-.ie67 .inbl {
-	display: inline;
-	zoom: 1;
-}
-.ie8 img {
-	width: auto; /* @bugfix for IE8 */
-}
-
-/* Active box-sizing for IE6/IE7 */
-/* @source https://github.com/Schepp/box-sizing-polyfill */
-/*
-.ie67 * {
-	behavior: url(/lib/box-sizing-polyfill/boxsizing.htc);
-}
-*/
-
-
-/* ----------------------------- */
-/* == quick print reset          */
-/* ----------------------------- */
-
-@media print {
-	p,
-	blockquote {
-		orphans: 2;
-		widows: 2;
-	}
-	blockquote,
-	ul,
-	ol {
-		page-break-inside: avoid;
-	}
-	h1,
-	h2,
-	h3,
-	caption {
-		page-break-after: avoid;
-	}
-}
-
-/* debug helper */
-.knacss-debug {
-	background: pink;
-	outline: 3px solid maroon;
-}

less/_02-grids.less

@@ -1,73 +0,0 @@
-
-/* grids inspired from SUIT https://github.com/suitcss/suit */
-/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */
-
-.grid {
-	overflow: hidden;
-	font-family: @fontstack3;
-}
-.grid > * {
-	display: block;
-	padding: 0;
-	margin-left: -@gutter; /* gutter value */
-	text-align: left;
-	letter-spacing: -0.31em;
-	text-rendering: optimizespeed;
-}
-/* Opera hack */
-.opera:-o-prefocus,
-.grid > * {
-	word-spacing: -0.43em;
-}
-.grid > * > * {
-	display: inline-block;
-	width: 100%;
-	padding-left: @gutter; /* gutter value */
-	margin-left: 0;
-	vertical-align: top;
-	text-align: left;
-	letter-spacing: normal;
-	word-spacing: normal;
-	text-rendering: auto;
-	*display: inline; *zoom: 1; /* IE67 hack */
-	font-family: @fontstack1;
-}
-.grid2 > * {width: 50%;}
-.grid3 > * {width: 33.333%;}
-.grid4 > * {width: 25%;}
-.grid5 > * {width: 20%;}
-.grid6 > * {width: 16.667%;}
-.grid8 > * {width: 12.5%;}
-.grid10 > * {width: 10%;}
-.grid12 > * {width: 8.333%;}
-
-/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
-.grid2-1 > *:first-child,
-.grid1-2 > * + * { width: 66.666%; }
-.grid1-2 > *:first-child,
-.grid2-1 > * + * { width: 33.333%; }
-.grid1-3 > *:first-child,
-.grid3-1 > * + * { width: 25%; }
-.grid3-1 > *:first-child,
-.grid1-3 > * + * { width: 75%; }
-
-/* Responsiv-o-matic */
-@media (max-width: @largescreen) {
-	.grid5 > *,
-	.grid6 > *,
-	.grid8 > *,
-	.grid10 > *,
-	.grid12 > * {width: 33.333%}
-}
-@media (max-width: @smallscreen) {
-	.grid3 > *,
-	.grid4 > *,
-	.grid5 > *,
-	.grid6 > *,
-	.grid8 > *,
-	.grid10 > *,
-	.grid12 > * {width: 50%}
-}
-@media (max-width: @tinyscreen) {
-	.grid > * > * {width: 100% !important}
-}

less/_03-tables.less

@@ -1,78 +0,0 @@
-
-/* ----------------------------- */
-/* ==tables                      */
-/* ----------------------------- */
-
-table,
-.table {
-	max-width : 100%;
-	table-layout: fixed;
-	border-collapse: collapse;
-	vertical-align: top;
-}
-table {
-	width: 100%;
-}
-.table {
-	display: table;
-}
-table#recaptcha_table,
-table.table-auto {
-	table-layout:auto;
-}
-caption {
-	padding: 10px;
-	color: #555;
-	font-style: italic;	
-}
-table { 
-	border: 1px solid #ccc;
-}
-tr > * + * {
-	border-left: 1px solid #ccc;
-}
-th,
-td {
-	padding: .3em .8em;
-	text-align: left;
-	border-bottom: 1px solid #ccc;
-}
-td {
-	color: #333;
-}
-
-/* alternate tables */
-.alternate { border: 0; }
-.alternate tbody { 
-	border: 1px solid #ccc; 
-}
-.alternate thead tr > * + * {
-	border-left: 0;
-}
-.alternate tbody tr > * + * {
-	border-left: 1px solid #ccc;
-}
-
-/* alternate-vert tables */
-.alternate-vert { 
-	border: 0;
-	border-right: 1px solid #ccc;
-}
-.alternate-vert tr > :first-child {
-	border-bottom: 0;
-}
-.alternate-vert tr > * + * {
-	border-top: 1px solid #ccc;
-}
-
-/* striped tables */
-.striped tbody tr:nth-child(odd) {
-	background: #eee;
-	background: rgba(0, 0, 0, .05);
-}
-
-/* striped-vert tables */
-.striped-vert tr > :first-child {
-	background: #eee;
-	background: rgba(0, 0, 0, .05);
-}

less/_04-forms.less

@@ -1,87 +0,0 @@
-
-/* ----------------------------- */
-/* ==forms                       */
-/* ----------------------------- */
-
-/* thanks to HTML5boilerplate,
-* github.com/nathansmith/formalize 
-* and www.sitepen.com
-*/
-
-/* buttons */
-.btn {
-	display: inline-block;
-}
-
-/* forms items */
-form,
-fieldset {
-	border: none;
-}
-input,
-button,
-select,
-label,
-.btn {
-	vertical-align: middle;
-	font-family: inherit;
-	font-size: inherit;
-}
-label { 
-	display: inline-block;
-	vertical-align: middle;
-	cursor: pointer;
-}
-legend {
-	border: 0;
-	white-space: normal;
-}
-textarea {
-	overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
-	min-height: 5em;
-	vertical-align: top;
-	font-family: inherit;
-	font-size: inherit;
-	resize: vertical;
-}
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-	cursor: pointer;
-	-webkit-appearance: button; /* clickable input types in iOS */
-}
-input[type="checkbox"],
-input[type="radio"] {
-	padding: 0; /* Corrects excess space around these inputs in IE8/9 */
-}
-input[type="search"] {
-	-webkit-appearance: textfield;
-}
-
-/* if select styling bugs on WebKit */
-/* select { -webkit-appearance: none; } */
-
-/* 'x' appears on right of search input when text is entered. This removes it */
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-	display: none;
-}
-::-webkit-input-placeholder {
-	color: #777;
-}
-input:-moz-placeholder,
-textarea:-moz-placeholder {
-	color: #777;
-}
-
-/* Removes inner padding and border in FF3+ */
-button::-moz-focus-inner,
-input[type='button']::-moz-focus-inner,
-input[type='reset']::-moz-focus-inner,
-input[type='submit']::-moz-focus-inner {
-	border: 0;
-	padding: 0;
-}

less/_05-icons.less

@@ -1,139 +0,0 @@
-
-/* ----------------------------- */
-/* ==icons and bullets	         */
-/* ----------------------------- */
-
-.icon {display: inline-block;}
-
-.icon:before,
-.icon.after:after {
-	content: "";
-	display: inline-block;
-	vertical-align: middle;
-	position: relative; top: -.1em;
-	margin: 0 0.3em 0 0;
-	font: 1.4em/1 sans-serif;
-	color: #000;
-	text-shadow: 1px 1px 0 rgba(0,0,0,.1);
-	speak: none;
-}
-
-@media (min-device-width: @smallscreen) {
-	.icon:before,
-	.icon.after:after {
-	font: 1em/0.6 sans-serif;
-	-webkit-transform: rotateZ(0.05deg);
-	}
-}
-
-.icon.after:after {
-	margin: 0 0 0 8px;
-}
-.icon.after:before {
-	content: "" !important
-}
-.icon-rate:before,
-.icon-rate.after:after {
-	content: "\2605";
-}
-.icon-unrate:before,
-.icon-unrate.after:after{
-	content: "\2606";
-}
-.icon-check:before,
-.icon-check.after:after{
-	content: "\2713";
-}
-.icon-uncheck:before,
-.icon-uncheck.after:after{
-	content: "\2717";
-}
-.icon-cloud:before,
-.icon-cloud.after:after {
-	content: "\2601";
-}
-.icon-dl:before,
-.icon-dl.after:after {
-	content: "\21E3";
-	font-weight: bold;
-}
-.icon-cross:before,
-.icon-cross.after:after {
-	content: "\2716";
-	font-weight: bold;
-}
-.icon-arrow1:before, 
-.icon-arrow1.after:after {
-	content: "\2192";
-	position: relative; 
-		top: -0.15em;
-}
-.icon-arrow2:before,
-.icon-arrow2.after:after {
-	content: "\279E";
-}
-.icon-arrow3:before,
-.icon-arrow3.after:after {
-	content: "\279A";
-}
-.icon-bracket1:before,
-.icon-bracket1.after:after {
-	content: "\2039";
-	font-weight: bold;
-	font-size: 1.6em;
-	position: relative; 
-		top: -0.15em;
-}
-.icon-bracket2:before,
-.icon-bracket2.after:after {
-	content: "\203A";
-	font-weight: bold;
-	font-size: 1.6em;
-	position: relative; 
-		top: -0.15em;
-}
-.icon-up:before,
-.icon-up.after:after {
-	content: "\25B2";
-}
-.icon-down:before,
-.icon-down.after:after {
-	content: "\25BC";
-}
-.icon-bull:before,
-.icon-bull.after:after {
-	content: "\2022";
-	font-size: 1.2em;
-	top: -0.05em;
-}
-.icon-bull2:before,
-.icon-bull2.after:after {
-	content: "\25E6";
-	top: -0.05em;
-}
-.icon-bull3:before,
-.icon-bull3.after:after{
-	content: "\2023";
-	font-size: 1.6em;
-	top: -0.05em;
-}
-.icon-nav:before,
-.icon-nav.after:after {
-	content: "\2261";
-	font-weight: bold;
-}
-.icon-losange:before,
-.icon-losange.after:after {
-	content: "\25C6";
-}
-.icon-asteri:before,
-.icon-asteri.after:after {
-	content: "\2731";
-	font-weight: bold;
-}
-.icon-mail:before,
-.icon-mail.after:after {
-	content: "\2709";
-	font-size: 1.6em;
-	top: -.05em;
-}

less/_06-rwd.less

@@ -1,190 +0,0 @@
-
-/* ----------------------------- */
-/* ==desktop and retina medias   */
-/* ----------------------------- */
-
-@media (min-width: @smallscreen) {
-/* here go rules for big resources and big screens like: background-images, font-faces, etc. */
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
-/* Style adjustments for retina devices */
-}
-
-/* ---------------------------------- */
-/* ==Responsive large / medium / tiny */
-/* ---------------------------------- */
-
-@media (min-width: @largescreen) {
-
-	/* layouts for large (l) screens */
-	.large-hidden,
-	.tablet-hidden { display: none !important; }
-	.large-visible { display: block !important; }
-	.large-no-float {float: none; }
-	.large-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	.large-row {
-		display: table;
-		table-layout: fixed;
-		width: 100% !important;
-	}
-	.large-col {
-		display: table-cell;
-		vertical-align: top;
-	}
-
-	/* widths for large (l) screens */
-	.large-w25 { width: 25% !important; }
-	.large-w33 { width: 33.3333% !important; }
-	.large-w50 { width: 50% !important; }
-	.large-w66 { width: 66.6666% !important; }
-	.large-w75 { width: 75% !important; }
-	.large-w100 {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;		
-	}
-
-	/* margins for large (l) screens */
-	.large-ma0 { margin: 0 !important; }
-}
-
-@media (max-width: @smallscreen) {
-
-	/* quick tablet reset */
-	.w600p,
-	.w700p,
-	.w800p,
-	.w960p,
-	.mw960p,
-	.small-wauto {
-		width: auto;
-		float: none;
-	} 
-
-	/* layouts for medium (m) screens */
-	.small-hidden,
-	.tablet-hidden { display: none !important; }
-	.small-visible { display: block !important; }
-	.small-no-float {float: none; }
-	.small-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	.small-row {
-		display: table !important;
-		table-layout: fixed !important;
-		width: 100% !important;
-	}
-	.small-col {
-		display: table-cell !important;
-		vertical-align: top !important;
-	}
-
-	/* you shall not pass */
-	div, textarea, table, td, th, code, pre, samp {
-		word-wrap: break-word;
-		-webkit-hyphens: auto;
-		-moz-hyphens: auto;
-		-ms-hyphens: auto;
-		-o-hyphens: auto;
-		hyphens: auto;
-	}
-
-	/* widths for small (s) screens */
-	.small-w25 { width: 25% !important; }
-	.small-w33 { width: 33.3333% !important; }
-	.small-w50 { width: 50% !important; }
-	.small-w66 { width: 66.6666% !important; }
-	.small-w75 { width: 75% !important; }
-	.small-w100  {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;		
-	}
-	/* margins for small (s) screens */
-	.small-ma0 { margin: 0 !important; }
-}
-
-@media (max-width: @tinyscreen) {
-
-	/* quick smartphone reset */
-	.mod,
-	.col,
-	fieldset {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;
-	}
-	.w300p,
-	.w400p,
-	.w500p {
-		width: auto;
-		float: none;
-	}
-	.row { 
-		display: block !important;
-		width: 100% !important;
-	}
-
-	/* layouts for tiny (t) screens */
-	.tiny-hidden,
-	.phone-hidden { display: none !important; }
-	.tiny-visible { display: block !important; }
-	.tiny-no-float {float: none;}
-	.tiny-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	.tiny-row {
-		display: table !important;
-		table-layout: fixed !important;
-		width: 100% !important;
-	}
-	.tiny-col {
-		display: table-cell !important;
-		vertical-align: top !important;
-	}
-	th,
-	td {
-		display: block !important;
-		width: auto !important;
-		text-align: left !important;
-	}
-	thead { display: none; }
-
-	/* widths for tiny (t) screens */
-	.tiny-w25 { width: 25% !important; }
-	.tiny-w33 { width: 33.3333% !important; }
-	.tiny-w50 { width: 50% !important; }
-	.tiny-w66 { width: 66.6666% !important; }
-	.tiny-w75 { width: 75% !important; }
-	.tiny-w100 { 
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;
-	}
-	/* margins for tiny (t) screens */
-	.tiny-ma0 { margin: 0 !important; }
-}

less/_07-flexbox.less

@@ -1,54 +0,0 @@
-
-/* flexbox layout */
-.flex {
-	display : -webkit-box;
-	display : -moz-box;
-	display: -ms-flexbox;
-	display : -webkit-flex;
-	display : flex;
-}
-.flex-h {
-	-webkit-box-orient: horizontal;
-	-moz-box-orient: horizontal;
-	-webkit-flex-direction: row;
-	-ms-flex-direction: row;
-	flex-direction: row;
-}
-.flex-v {
-	-webkit-box-orient: vertical;
-	-moz-box-orient: vertical;
-	-webkit-flex-direction: column;
-	-ms-flex-direction: column;
-	flex-direction: column;
-}
-.flex-fluid {
-	-moz-box-flex: 1;
-	-webkit-flex: 1;
-	-moz-flex: 1;
-	-ms-flex: 1;
-	flex: 1;
-}
-.flex-start {
-	-webkit-box-ordinal-group: -1;
-	-moz-box-ordinal-group: 0;
-	-ms-flex-order : -1;
-	-webkit-order : -1;
-	-moz-order : -1;
-	order : -1;
-}
-.flex-mid {
-	-webkit-box-ordinal-group: 1;
-	-moz-box-ordinal-group: 1;
-	-ms-flex-order : 1;
-	-webkit-order : 1;
-	-moz-order : 1;
-	order : 1;
-}
-.flex-end {
-	-webkit-box-ordinal-group: 42;
-	-moz-box-ordinal-group: 42;
-	-ms-flex-order : 42;
-	-webkit-order : 42;
-	-moz-order : 42;
-	order : 42;
-}

less/_08-print.less

@@ -1,69 +0,0 @@
-/* quick print reset */
-@media print {
-	* {
-		background: transparent !important;
-		box-shadow: none !important;
-		text-shadow: none !important;
-	}
-	body {
-		width: auto !important;
-		margin: auto !important;
-		font-family: serif;
-		font-size: 12pt;
-		background-color: #fff !important;
-		color: #333 !important;
-	}
-	p,
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6,
-	blockquote,
-	ul,
-	ol {
-		color: #000 !important;
-		margin: auto !important;
-	}
-	.print {
-		display: block; /* displaying .print elements */
-	}
-	img { 
-		-webkit-filter: grayscale(100%);
-		-moz-filter: grayscale(100%);
-		-ms-filter: grayscale(100%);
-		-o-filter: grayscale(100%);
-		filter: grayscale(100%);
-	}
-	p,
-	blockquote {
-		orphans: 3; /* no orphans */
-		widows: 3; /* no widows */
-	}
-	blockquote,
-	ul,
-	ol {
-		page-break-inside: avoid; /* no breaks inside these elements */
-	}
-	h1 {
-		page-break-before: always; /* page break before main headers */
-	}
-	h1,
-	h2,
-	h3,
-	caption {
-		page-break-after: avoid; /* no breaks after these elements */
-	}
-	a {
-		color: #000 !important;
-		text-decoration: underline !important;
-	}
-	a[href]:after {
-		content: " (" attr(href) ")"; /* displaying URLs */
-	}
-	a[href^="javascript:"]:after,
-	a[href^="#"]:after {
-		content: "";
-	}
-}

less/knacss.less

@@ -1,27 +0,0 @@
-/*!
-* www.KNACSS.com V2.9.2 (2014-01) @author: Raphael Goetter, Alsacreations
-* Licence WTFPL http://www.wtfpl.net/
-*/
-
-// LESS config file
-@import "_00-config";
-
-// LESS base styles
-@import "_01-base";
-
-// LESS files : chose the ones you need
-@import "_02-grids";
-@import "_03-tables"; 
-@import "_04-forms";
-@import "_05-icons";
-@import "_06-rwd";
-@import "_07-flexbox"; 
-@import "_08-print";
-
-/* ----------------------------- */
-/* ==own stylesheet              */
-/* ----------------------------- */
-
-/* Here should go your own CSS styles */
-/* You can also link them with a LESS @import */
-/* @import "my-styles.less"; */

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "knacss",
+  "version": "8.2.1",
+  "homepage": "http://www.knacss.com/",
+  "bugs": "https://github.com/alsacreations/KNACSS/issues",
+  "author": "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)",
+  "contributors": [
+    "Raphaël GOETTER, Alsacreations"
+  ],
+  "description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.",
+  "main": "https://github.com/alsacreations/KNACSS/tree/master/css",
+  "keywords": [
+    "css",
+    "framework",
+    "reset",
+    "responsive",
+    "sass",
+    "rwd",
+    "boilerplate",
+    "workflow"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alsacreations/KNACSS"
+  },
+  "license": "WTFPL",
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-postcss": "^8.0.0",
+    "gulp-sass": "^4.1.0"
+  },
+  "dependencies": {
+    "autoprefixer": "^9.7.1",
+    "postcss-combine-media-query": "^1.0.1",
+    "cssnano": "^4.1.10"
+  }
+}

sass/abstracts/_mixins-sass.scss

@@ -0,0 +1,40 @@
+// Respond-to mixin
+// ex. @include respond-to("medium-up") {...}
+
+$bp-aliases: (
+  "small": (
+    max-width: #{$small - 1},
+  ),
+  "medium": (
+    max-width: #{$medium - 1},
+  ),
+  "large": (
+    max-width: #{$large - 1},
+  ),
+  "small-up": (
+    min-width: #{$small},
+  ),
+  "medium-up": (
+    min-width: #{$medium},
+  ),
+  "large-up": (
+    min-width: #{$large},
+  ),
+);
+
+// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
+@mixin respond-to($name) {
+  // If the key exists in the map
+  @if map-has-key($bp-aliases, $name) {
+    // Prints a media query based on the value
+    @media #{inspect(map-get($bp-aliases, $name))} {
+      @content;
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$name}`. "
+    +"Please make sure it is defined in `$bp-aliases` map.";
+  }
+}

sass/abstracts/_variables-sass.scss

@@ -0,0 +1,230 @@
+// ----------------
+// Config Sass et variables
+// ----------------
+
+// ----------------
+// Valeurs de Breakpoints
+// ----------------
+
+// Hypothèse : smartphone portrait/paysage < 576px < gros smartphone paysage + tablette portrait < 992px < tablette paysage < 1330px < laptop et plus
+$breakpoints: (
+  sm: 576px,
+  md: 992px,
+  lg: 1400px,
+) !default;
+
+$small: map-get($breakpoints, sm) !default;
+$medium: map-get($breakpoints, md) !default;
+$large: map-get($breakpoints, lg) !default;
+
+// ----------------
+// Spacers
+// ----------------
+
+$spacer: 1rem;
+$spacers: (
+  "0": 0, // none
+  "1": 1px, // mono
+  "2": 0.125rem, // nano
+  "4": 0.25rem, // micro
+  "8": 0.5rem, // mini
+  "12": 0.75rem, // small
+  "16": 1rem, // medium
+  "20": 1.25rem, // large
+  "24": 1.5rem, // wide
+  "36": 2.25rem, // ultra
+  "auto": auto,
+);
+
+$spacer-none: map-get($spacers, "0");
+$spacer-mono: map-get($spacers, "1");
+$spacer-nano: map-get($spacers, "2");
+$spacer-micro: map-get($spacers, "4");
+$spacer-mini: map-get($spacers, "8");
+$spacer-small: map-get($spacers, "12");
+$spacer-medium: map-get($spacers, "16");
+$spacer-large: map-get($spacers, "20");
+$spacer-wide: map-get($spacers, "24");
+$spacer-ultra: map-get($spacers, "36");
+
+// ----------------
+// Grid layout
+// ----------------
+
+$grid-columns: 6 !default;
+
+$gaps: (
+  "0": 0,
+  "5": 0.313rem,
+  "10": 0.625rem,
+  "16": 1rem,
+  "20": 1.25rem,
+  "36": 2.25rem,
+) !default;
+
+// ----------------
+// Fonts
+// ----------------
+
+// Familles de fonts
+$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-headings: $font-family-base;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+$line-height-base: 1.5;
+
+// Font sizes
+$font-size: (
+  "10": 0.625rem,
+  "11": 0.6875rem,
+  "12": 0.75rem,
+  "14": 0.875rem,
+  "16": 1rem,
+  "18": 1.125rem,
+  "20": 1.25rem,
+  "24": 1.5rem,
+  "30": 1.875rem,
+  "36": 2.25rem,
+  "base": 1rem,
+  "inherit": inherit,
+);
+
+$font-size-html: 100%;
+$font-size-base: 1rem;
+
+// Graisses des Fonts
+$weight-light: 200;
+$weight-book: 300;
+$weight-regular: 400;
+$weight-medium: 500;
+$weight-bold: 700;
+
+// ----------------
+// Couleurs
+// ----------------
+
+// Variables niveaux de gris
+
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$white: #FFFFFF;
+$black: #0F0F0F;
+
+
+// Variables couleurs globales
+
+$body-color: $gray-900;
+$body-bg: $white;
+
+$primary: #6fa939; // Couleur dominante. Elle peut s'appliquer à la fois à des surfaces ou à des contenus.
+$primary-accent: #4e920f; // Modifieur de couleur dominante (survol, bordure)
+$on-primary: $white; // Contenus (texte, lien, icône) affichés par-dessus une couche $primary
+
+$secondary: #008cba; // Couleur d'accentuation. Elle s'applique généralement aux liens, mais peut s'appliquer à la fois à des surfaces ou à des contenus.
+$secondary-accent: #027da7; // Modifieur de couleur d'accentuation (survol, bordure)
+$on-secondary: $white; // Contenus affichés par-dessus une couche $secondary
+
+// Variables couleurs statuts
+
+$success-bg: #dff0d9;
+$success-border: #d6e9c6;
+$success: #3c763d;
+$success-hover: #275c28;
+
+$info-bg: #d9edf7;
+$info-border: #bce8f1;
+$info: #0d7192;
+$info-hover: #005e7d;
+
+$warning-bg: #fcf8e3;
+$warning-border: #faebcc;
+$warning: #8a6d3b;
+$warning-hover: #654f29;
+
+$error-bg: #fff2f2;
+$error-border: #ebccd1;
+$error: #e3224a;
+$error-hover: #a00d10;
+
+
+// Links
+$link-decoration: underline;
+$link-decoration-hover: underline;
+
+// Border radius
+$radius-none: 0;
+$radius-small: 0.5rem;
+$radius-medium: 1rem;
+$radius-large: 20rem;
+$radius-circle: 50%;
+
+// ----------------
+// Liste des propriétés utilitaires (note display: grid se trouve dans Grillade)
+// ----------------
+$utils: ((hidden, display, none),
+  (block, display, block),
+  (inline, display, inline),
+  (inline-block, display, inline-block),
+  (flex, display, flex),
+  (flex-row, flex-direction, row),
+  (flex-col, flex-direction, column),
+  (flex-wrap, flex-wrap, wrap),
+  (flex-no-wrap, flex-wrap, nowrap),
+  (flex-shrink, flex-shrink, 1),
+  (flex-no-shrink, flex-shrink, 0),
+  (flex-grow, flex-grow, 1),
+  (flex-no-grow, flex-grow, 0),
+  (float-left, float, left),
+  (float-right, float, right),
+  (float-none, float, none),
+  (text-bold, font-weight, bold),
+  (text-italic, font-style, italic),
+  (text-uppercase, text-transform, uppercase),
+  (text-lowercase, text-transform, lowercase),
+  (text-smaller, font-size, smaller),
+  (text-larger, font-size, larger),
+  (text-left, text-align, left),
+  (text-center, text-align, center),
+  (text-right, text-align, right),
+  (text-justify, text-align, justify),
+  (text-wrap, overflow-wrap, break-word),
+  (justify-start, justify-content, flex-start),
+  (justify-end, justify-content, flex-end),
+  (justify-center, justify-content, center),
+  (justify-between, justify-content, space-between),
+  (justify-around, justify-content, space-around),
+  (justify-evenly, justify-content, space-evenly),
+  (justify-items-start, justify-items, start),
+  (justify-items-end, justify-items, end),
+  (justify-items-center, justify-items, center),
+  (align-start, align-content, start),
+  (align-end, align-content, end),
+  (align-center, align-content, center),
+  (align-between, align-content, space-between),
+  (align-around, align-content, space-around),
+  (align-evenly, align-content, space-evenly),
+  (align-items-start, align-items, flex-start),
+  (align-items-end, align-items, flex-end),
+  (align-items-center, align-items, center),
+  (place-center, place-content, center),
+  (justify-self-auto, justify-self, auto),
+  (justify-self-start, justify-self, start),
+  (justify-self-end, justify-self, end),
+  (justify-self-center, justify-self, center),
+  (justify-self-stretch, justify-self, stretch),
+  (align-self-auto, align-self, auto),
+  (align-self-start, align-self, flex-start),
+  (align-self-end, align-self, flex-end),
+  (align-self-center, align-self, center),
+  (align-self-stretch, align-self, stretch),
+  (align-top, vertical-align, top),
+  (align-bottom, vertical-align, bottom),
+  (align-middle, vertical-align, middle),
+  (item-first, order, -100),
+  (item-last, order, 100)) !default;

sass/base/_layout.scss

@@ -0,0 +1,41 @@
+/* ----------------------------  */
+/* ==Layout classes              */
+/* ----------------------------- */
+
+/* Global container */
+.layout-maxed {
+  display: grid;
+
+  @each $key,
+  $value in $breakpoints {
+    @media (min-width: #{$value}) {
+      grid-template-columns:
+        minmax($spacer-small, 1fr)
+        minmax(auto, $value)
+        minmax($spacer-small, 1fr);
+    }
+  }
+}
+
+/* Center all children */
+.layout-maxed > * {
+  grid-column: 2;
+}
+
+/* Hero box  */
+.layout-hero {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: inherit;
+}
+
+.layout-hero > * {
+  grid-column: 2;
+}
+
+/* Hero image */
+.layout-hero-img {
+  grid-column: 1 / -1;
+  justify-self: center;
+  max-width: 100%;
+}

sass/base/_reset-accessibility.scss

@@ -0,0 +1,65 @@
+/* 
+ * Hidden but not for an assistive technology like a screen reader, Yahoo! method 
+ */
+
+.visually-hidden,
+.sr-only {
+  position: absolute !important;
+  border: 0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+}
+
+/*
+ * Disable animations styles when reduced motion is enabled
+ */
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/*
+ * Change the cursor on busy elements in all browsers.
+ */
+
+[aria-busy="true"] {
+  cursor: progress;
+}
+
+/*
+ * Change the cursor on control elements in all browsers.
+ */
+
+[aria-controls] {
+  cursor: pointer;
+}
+
+/*
+ * Change the cursor on disabled, not-editable, or otherwise
+ * inoperable elements in all browsers.
+ */
+
+[aria-disabled="true"],
+[disabled] {
+  cursor: not-allowed;
+}
+
+/*
+ * Change the display on visually hidden accessible elements
+ * in all browsers.
+ */
+
+[aria-hidden="false"][hidden] {
+  display: initial;
+}
+
+[aria-hidden="false"][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}

sass/base/_reset-base.scss

@@ -0,0 +1,257 @@
+/* ----------------------------- */
+/* ==Reset (base)                */
+/* ----------------------------- */
+
+/*
+ * 1. Switch to border-box model for all elements
+ * 2. Avoid min-width: auto on flex and grid items
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  /* 1 */
+  min-width: 0;
+  /* 2 */
+}
+
+/*
+ * 1. Remove the grey highlight on links in iOS 
+ * 2. Prevent orientation font changes in iOS
+ * 3. Breaks words to prevent overflow in all browsers
+ */
+
+html {
+  font-size: $font-size-html;
+  -webkit-tap-highlight-color: transparent;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  overflow-wrap: break-word;
+  /* 3 */
+}
+
+body {
+  margin: 0;
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  background-color: $body-bg;
+  color: $body-color;
+}
+
+/*
+ * Headings
+ */
+
+h1,
+.h1-like,
+h2,
+.h2-like,
+h3,
+.h3-like,
+h4,
+.h4-like,
+h5,
+.h5-like,
+h6,
+.h6-like {
+  color: $gray-900;
+}
+
+/*
+ * Links
+ */
+
+a {
+  color: $gray-600;
+  text-decoration: $link-decoration;
+}
+
+a:focus,
+a:hover,
+a:active {
+  color: $gray-900;
+  text-decoration: $link-decoration-hover;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */
+}
+
+/*
+ * Vertical rythm
+ */
+
+h1,
+.h1-like,
+h2,
+.h2-like {
+  margin-top: 0;
+  margin-bottom: $spacer-medium;
+}
+
+p,
+address,
+ol,
+ul,
+dl,
+blockquote,
+pre,
+h3,
+.h3-like,
+h4,
+.h4-like,
+h5,
+.h5-like,
+h6,
+.h6-like,
+dt,
+dd {
+  margin-top: 0;
+  margin-bottom: $spacer-small;
+}
+
+/*
+ * Nested elements
+ */
+
+ol ol,
+ol ul,
+ul ol,
+ul ul,
+li ul,
+li ol,
+nav ul,
+nav ol,
+li p,
+li .p-like {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/*
+ * Lists
+ */
+
+ul,
+ol {
+  padding-left: $spacer-medium;
+}
+
+nav ul,
+nav ol {
+  list-style: none;
+  padding: 0;
+}
+
+/*
+ * Embed content
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+img,
+table,
+td,
+blockquote,
+pre,
+code,
+input,
+textarea,
+select,
+video,
+svg,
+iframe {
+  max-width: 100%;
+}
+
+iframe,
+img,
+input,
+select,
+textarea {
+  height: auto;
+}
+
+img {
+  border-style: none;
+}
+
+/**
+ * Remove the border on iframes in all browsers
+ */
+
+iframe {
+  border-style: none;
+}
+
+/*
+ * Fill color matching to text color
+ */
+
+svg:not([fill]) {
+  fill: currentColor;
+}
+
+/*
+ * Hide the overflow in IE
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/*
+ * Tables
+ */
+
+table {
+  border-collapse: collapse;
+}
+
+/*
+ * Rulers
+ */
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border: 0;
+  border-top: 1px solid;
+  margin: $spacer-medium 0;
+  clear: both;
+  color: inherit;
+}
+
+/*
+ * table styles
+ */
+
+table {
+  width: 100%;
+  max-width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  vertical-align: top;
+  margin-bottom: $spacer-medium;
+}

sass/base/_reset-forms.scss

@@ -0,0 +1,224 @@
+/* ----------------------------- */
+/* ==Reset (forms)               */
+/* ----------------------------- */
+
+/*
+ * Remove the tapping delay on clickable elements in all browsers .
+ */
+
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+}
+
+/*
+ * 1. Change the inconsistent appearance in all browsers.
+ * 2. Add typography inheritance in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  background-color: transparent; /* 1 */
+  color: inherit; /* 1 */
+  font-family: inherit; /* 2 */
+  font-size: inherit; /* 2 */
+  line-height: inherit; /* 2 */
+  letter-spacing: inherit; /* 2 */
+  vertical-align: middle;
+}
+
+/*
+ * Basic User Interface reset
+ */
+
+button,
+input:not([type="radio"]):not([type="checkbox"]),
+select,
+textarea {
+  border: 0;
+}
+
+/*
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre,
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+pre {
+  tab-size: 2;
+  white-space: pre-wrap;
+  line-height: normal;
+  overflow: auto;
+  -ms-overflow-style: scrollbar;
+}
+
+/*
+ * Show overflow in IE/Edge
+ */
+
+button,
+input {
+  overflow: visible;
+}
+
+/* 
+ * Remove the inheritance of text transform in Firefox
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+form,
+fieldset {
+  border: none;
+}
+
+fieldset {
+  margin: 0;
+  padding: $spacer-medium;
+}
+
+legend {
+  display: table;
+  max-width: 100%;
+  padding: 0 $spacer-micro;
+  border: 0;
+  color: inherit;
+  white-space: normal;
+}
+
+label {
+  display: inline-block;
+  cursor: pointer;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  resize: vertical;
+  white-space: pre-wrap;
+}
+
+progress {
+  display: inline-block;
+  width: 100%;
+  vertical-align: baseline;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+/* ----------------------------- */
+/* Form oddities                 */
+/* ----------------------------- */
+
+/*
+ * 1. Correct the odd appearance in Chrome, Edge, and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+ * Correct the cursor style of increment and decrement buttons in Safari.
+ */
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/*
+ * Remove the inner padding in Chrome, Edge, and Safari on macOS.
+ */
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+ * 1. Correct the inability to style upload buttons in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+ * Remove the inner border and padding of focus outlines in Firefox.
+ */
+
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/*
+ * Restore the focus outline styles unset by the previous rule in Firefox.
+ */
+
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/*
+ * Remove the additional :invalid styles in Firefox.
+ */
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}

sass/base/_reset-print.scss

@@ -0,0 +1,96 @@
+/* ----------------------------- */
+/* ==Print (quick print reset)   */
+/* ----------------------------- */
+
+@media print {
+  * {
+    background: transparent !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  body {
+    width: auto;
+    margin: auto;
+    font-family: serif;
+    font-size: 12pt;
+  }
+
+  p,
+  .p-like,
+  h1,
+  .h1-like,
+  h2,
+  .h2-like,
+  h3,
+  .h3-like,
+  h4,
+  .h4-like,
+  h5,
+  .h5-like,
+  h6,
+  .h6-like,
+  blockquote,
+  label,
+  ul,
+  ol {
+    color: #000;
+    margin: auto;
+  }
+
+  .print {
+    display: block;
+  }
+
+  .no-print {
+    display: none;
+  }
+
+  /* no orphans, no widows */
+  p,
+  .p-like,
+  blockquote {
+    orphans: 3;
+    widows: 3;
+  }
+
+  /* no breaks inside these elements */
+  blockquote,
+  ul,
+  ol {
+    page-break-inside: avoid;
+  }
+
+  /* page break before main headers
+  h1,
+  .h1-like {
+    page-break-before: always;
+  }
+  */
+
+  /* no breaks after these elements */
+  h1,
+  .h1-like,
+  h2,
+  .h2-like,
+  h3,
+  .h3-like,
+  caption {
+    page-break-after: avoid;
+  }
+
+  a {
+    color: #000;
+  }
+
+  /* displaying URLs
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+  */
+
+  a[href^="javascript:"]::after,
+  a[href^="#"]::after {
+    content: "";
+  }
+}

sass/components/_burger.scss

@@ -0,0 +1,85 @@
+/*
+ * component nav "burger" button
+ */
+/*
+ * HTML template example:
+ * <button class="burger-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
+ * activate it with a JS toggle-class to .is-active
+ * see doc : https: //www.knacss.com/doc.html#buttons
+ */
+
+/*
+ * burger variables (you can change them)
+ */
+
+$burger-color : #333;
+$burger-background : transparent;
+$burger-hover-background : transparent;
+$burger-size : 2.6rem;
+$burger-weight : 5px; // size of stripes
+$burger-padding : 0;
+
+/*
+ * burger button styles
+ */
+
+.burger-button {
+  padding: 0;
+  background-color: transparent;
+  box-shadow: none;
+  outline: 0;
+  border: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.burger-button > * {
+  display: inline-flex;
+  vertical-align: top;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+  height: $burger-size;
+  width: $burger-size;
+  padding: $burger-padding;
+  background-color: $burger-background;
+  background-image: linear-gradient($burger-color, $burger-color);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  background-size: 100% $burger-weight;
+  transition: .25s;
+  transition-property: transform, background;
+  will-change: transform, background;
+}
+
+.burger-button > *::before,
+.burger-button > *::after {
+  content: "";
+  height: $burger-weight;
+  background: $burger-color;
+  transition: .25s;
+  transition-property: transform, top;
+  will-change: transform, top;
+}
+
+.burger-button:hover > * {
+  background-color: $burger-hover-background;
+}
+
+.burger-button:focus {
+  outline: 0;
+}
+
+.burger-button.is-active > * {
+  background-image: none;
+  justify-content: center;
+}
+
+.burger-button.is-active>*::before {
+  transform: translateY(50%) rotate3d(0, 0, 1, 45deg);
+}
+
+.burger-button.is-active>*::after {
+  transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
+}

sass/components/_button.scss

@@ -0,0 +1,71 @@
+/*
+ * basic button component
+ */
+/*
+ * HTML template example:
+ * preferably use <button> for buttons !
+ * use .button or .btn (for structure) and .btn-- (for variants) (see appearance mixin)
+ */
+
+/*
+ * button reset
+ */
+
+%btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: $spacer-small $spacer-medium;
+  cursor: pointer;
+  user-select: none;
+  transition: 0.25s;
+  transition-property: box-shadow, background-color, color, border;
+  text-decoration: none;
+  border: none;
+  box-shadow: none;
+}
+
+.btn,
+.button {
+  @extend %btn;
+
+  &:focus {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+
+// button state variants
+.btn,
+.button {
+  &--small {
+    padding: $spacer-micro-plus $spacer-small;
+    font-size: .8em;
+  }
+
+  &--big {
+    padding: $spacer-medium $spacer-medium;
+    font-size: 1.4em;
+  }
+
+  &--block {
+    width: 100% !important;
+    display: block;
+  }
+
+  &--unstyled {
+    padding: 0;
+    border: none;
+    text-align: left;
+    background: none;
+    border-radius: 0;
+    box-shadow: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    &:focus {
+      box-shadow: none;
+      outline: none;
+    }
+  }
+}

sass/components/_checkbox.scss

@@ -0,0 +1,58 @@
+/*
+ * component checkbox
+ */
+/*
+ * HTML template example:
+ * <input type="checkbox" class="checkbox" id="c1">
+ * <label for="c1">click here</label>
+ */
+
+/*
+ * checkbox variables (you can change them)
+ */
+
+$checkbox-color: $white;
+$checkbox-background: $primary;
+$checkbox-size: 2rem;
+$checkbox-border-radius: 4px;
+
+/*
+ * checkbox styles
+ */
+
+.checkbox {
+  border-radius: $checkbox-border-radius;
+}
+
+.checkbox {
+  -webkit-appearance: none;
+  appearance: none;
+  width: $checkbox-size;
+  height: $checkbox-size;
+  vertical-align: text-bottom;
+  box-shadow: inset 0 0 0 1px $primary;
+  background-color: $checkbox-color;
+  transition: background-color 0.15s;
+  cursor: pointer;
+}
+
+.checkbox + label {
+  cursor: pointer;
+}
+
+.checkbox:disabled {
+  opacity: 0.6;
+}
+
+.checkbox:disabled + label {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.checkbox:checked {
+  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=");
+  background-size: 60% 60%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: $checkbox-background;
+}

sass/components/_quote.scss

@@ -0,0 +1,60 @@
+/*
+ * component quote
+ */
+/*
+ * HTML template example:
+ * <blockquote>
+ *   <p>Lorem Elsass Ipsum mitt picon bière</p>
+ * </blockquote>
+ */
+
+/*
+ * quotes variables (you can change them)
+ */
+
+$blockquote-color: #454d5d;
+
+/*
+ * quotes styles
+ */
+
+blockquote {
+  position: relative;
+  padding-left: 3em;
+  min-height: 2em;
+}
+
+blockquote::before {
+  content: "\201C";
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-family: georgia, serif;
+  font-size: 5em;
+  height: .4em;
+  line-height: .9;
+  color: $blockquote-color;
+}
+
+blockquote > footer {
+  margin-top: .75em;
+  font-size: 0.9em;
+  color: rgba(0, 0, 0, .7);
+
+  &::before {
+    content: "\2014 \0020";
+  }
+}
+
+q {
+  font-style: normal;
+}
+
+q,
+.q {
+  quotes: "“" "”" "‘" "’";
+
+  &:lang(fr) {
+    quotes: "«\00a0" "\00a0»" "“" "”";
+  }
+}

sass/components/_radio.scss

@@ -0,0 +1,58 @@
+/*
+ * component radio
+ */
+/*
+ * HTML template example:
+ * <input type="radio" class="radio" name="radio" id="r1">
+ * <label for="r1">Click here</label>
+ */
+
+/*
+ * radio variables (you can change them)
+ */
+
+$radio-color: $primary;
+$radio-background: $white;
+$radio-size: 2rem;
+$radio-border-radius: 50%;
+
+/*
+ * radio styles
+ */
+
+.radio {
+  border-radius: $radio-border-radius;
+}
+
+.radio {
+  -webkit-appearance: none;
+  appearance: none;
+  width: $radio-size;
+  height: $radio-size;
+  vertical-align: text-bottom;
+  box-shadow: inset 0 0 0 1px $primary;
+  background-color: $radio-background;
+  transition: background-size 0.15s;
+  cursor: pointer;
+}
+
+.radio + label {
+  cursor: pointer;
+}
+
+.radio:disabled {
+  opacity: 0.6;
+}
+
+.radio:disabled + label {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.radio:checked {
+  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E");
+  background-size: 70% 70%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: $primary;
+}

sass/components/_select.scss

@@ -0,0 +1,19 @@
+/*
+ * basic select component
+ */
+/*
+HTML template example:
+<select>
+  <option value="salade">salade</option>
+  <option value="tomate">tomate</option>
+  <option value="oignons">oignons</option>
+</select>
+ */
+
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
+  background-position: right 0.8rem center;
+  background-repeat: no-repeat;
+  background-size: 1.2rem;
+}

sass/knacss.scss

@@ -0,0 +1,32 @@
+/*!
+* KNACSS Reborn: Just keep it simple!
+* @author: Alsacreations
+* v8.2 2022/01
+* Licence WTFPL http://www.wtfpl.net/
+*/
+
+// IMPORTANT : Seuls les fichiers "Noyau" et "Utilitaires" sont importés par défaut. Ajoutez les fichiers de composants si nécessaires dans votre projet.
+
+// NOYAU
+@import "abstracts/variables-sass";
+@import "abstracts/mixins-sass";
+
+@import "base/reset-base";
+@import "base/reset-accessibility";
+@import "base/reset-forms";
+@import "base/reset-print";
+@import "base/layout";
+
+// UTILITAIRES
+@import "utils/utils-global";
+@import "utils/utils-font-sizes";
+@import "utils/utils-spacers";
+@import "utils/grillade";
+
+// COMPOSANTS (à ajouter au besoin)
+// @import "components/button";
+// @import "components/burger";
+// @import "components/checkbox";
+// @import "components/radio";
+// @import "components/select";
+// @import "components/quote";

sass/utils/_utils-font-sizes.scss

@@ -0,0 +1,19 @@
+/* Font sizes utility classes */
+
+// loop for each font-size
+@each $key, $value in $font-size {
+  .text-#{$key} {
+    font-size: $value;
+  }
+}
+
+// loop for each breakpoint
+@each $key, $value in $font-size {
+  @each $bp, $bpv in $breakpoints {
+    @media (min-width: #{$bpv}) {
+      .#{$bp}\:text-#{$key} {
+        font-size: $value;
+      }
+    }
+  }
+}

sass/utils/_utils-global.scss

@@ -0,0 +1,66 @@
+/* 
+ * Global utility classes 
+ */
+
+@each $class, $prop, $value in $utils {
+  .#{$class} {
+    #{$prop}: #{$value};
+  }
+}
+
+// loop for each breakpoint
+@each $class, $prop, $value in $utils {
+  @each $bp, $bpv in $breakpoints {
+    @media (min-width: #{$bpv}) {
+      .#{$bp}\:#{$class} {
+        #{$prop}: #{$value};
+      }
+    }
+  }
+}
+
+// multi-properties utils
+.is-unstyled {
+  list-style: none;
+  padding-left: 0;
+}
+.is-disabled,
+[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed !important;
+  filter: grayscale(1);
+}
+.text-normal {
+  font-weight: normal;
+  font-style: normal;
+  text-transform: none;
+}
+
+// loop for each breakpoint
+@each $bp, $bpv in $breakpoints {
+  @media (min-width: #{$bpv}) {
+    .#{$bp}\:visually-hidden {
+      position: absolute !important;
+      border: 0 !important;
+      height: 1px !important;
+      width: 1px !important;
+      padding: 0 !important;
+      overflow: hidden !important;
+      clip: rect(0, 0, 0, 0) !important;
+    }
+    .#{$bp}\:is-unstyled {
+      list-style: none;
+      padding-left: 0;
+    }
+    .#{$bp}\:is-disabled {
+      opacity: 0.6;
+      cursor: not-allowed !important;
+      filter: grayscale(1);
+    }
+    .#{$bp}\:text-normal {
+      font-weight: normal;
+      font-style: normal;
+      text-transform: none;
+    }
+  }
+}

sass/utils/_utils-spacers.scss

@@ -0,0 +1,134 @@
+/* Spacers utility classes */
+
+// loop for each spacer
+@each $key,
+$value in $spacers {
+
+  .p-#{$key} {
+    padding: $value;
+  }
+
+  .pt-#{$key} {
+    padding-top: $value;
+  }
+
+  .pr-#{$key} {
+    padding-right: $value;
+  }
+
+  .pb-#{$key} {
+    padding-bottom: $value;
+  }
+
+  .pl-#{$key} {
+    padding-left: $value;
+  }
+
+  .px-#{$key} {
+    padding-left: $value;
+    padding-right: $value;
+  }
+
+  .py-#{$key} {
+    padding-top: $value;
+    padding-bottom: $value;
+  }
+
+  .m-#{$key} {
+    margin: $value;
+  }
+
+  .mt-#{$key} {
+    margin-top: $value;
+  }
+
+  .mr-#{$key} {
+    margin-right: $value;
+  }
+
+  .mb-#{$key} {
+    margin-bottom: $value;
+  }
+
+  .ml-#{$key} {
+    margin-left: $value;
+  }
+
+  .mx-#{$key} {
+    margin-left: $value;
+    margin-right: $value;
+  }
+
+  .my-#{$key} {
+    margin-top: $value;
+    margin-bottom: $value;
+  }
+
+  // loop for each breakpoint
+  @each $bp,
+  $bpv in $breakpoints {
+
+    @media (min-width: #{$bpv}) {
+      .#{$bp}\:p-#{$key} {
+        padding: $value;
+      }
+
+      .#{$bp}\:pt-#{$key} {
+        padding-top: $value;
+      }
+
+      .#{$bp}\:pr-#{$key} {
+        padding-right: $value;
+      }
+
+      .#{$bp}\:pb-#{$key} {
+        padding-bottom: $value;
+      }
+
+      .#{$bp}\:pl-#{$key} {
+        padding-left: $value;
+      }
+
+      .#{$bp}\:px-#{$key} {
+        padding-left: $value;
+        padding-right: $value;
+      }
+
+      .#{$bp}\:py-#{$key} {
+        padding-top: $value;
+        padding-bottom: $value;
+      }
+
+      .#{$bp}\:m-#{$key} {
+        margin: $value;
+      }
+
+      .#{$bp}\:mt-#{$key} {
+        margin-top: $value;
+      }
+
+      .#{$bp}\:mr-#{$key} {
+        margin-right: $value;
+      }
+
+      .#{$bp}\:mb-#{$key} {
+        margin-bottom: $value;
+      }
+
+      .#{$bp}\:ml-#{$key} {
+        margin-left: $value;
+      }
+
+      .#{$bp}\:mx-#{$key} {
+        margin-left: $value;
+        margin-right: $value;
+      }
+
+      .#{$bp}\:my-#{$key} {
+        margin-top: $value;
+        margin-bottom: $value;
+      }
+    }
+  }
+
+}

sass/utils/grillade.scss

@@ -0,0 +1,152 @@
+/* -------------------------------------------------- */
+/* ==Grillade : système de micro-grille  de KNACSS   */
+/* ------------------------------------------------ */
+// Grillade est directement inspiré tailwindcss.com et de ses classes utilitaires
+
+// Les variables ci-dessous ne sont appliquées que si elles n'ont pas été renseignées
+// dans le fichiers de variables de KNACSS.
+
+@if variable_exists(grid-columns) {
+  $grid-columns: $grid-columns !global;
+} @else {
+  $grid-columns: 6 !global;
+}
+
+@if variable_exists(gaps) {
+  $gaps: $gaps !global;
+} @else {
+  $gaps: (
+    "0": 0,
+    "5": 0.313rem,
+    "10": 0.625rem,
+    "16": 1rem,
+    "20": 1.25rem,
+    "36": 2.25rem,
+  ) !global;
+}
+
+@if variable_exists(breakpoints) {
+  $breakpoints: $breakpoints !global;
+} @else {
+  $breakpoints: (
+    sm: 576px,
+    md: 992px,
+    lg: 1330px,
+  ) !global;
+}
+
+.grid {
+  display: grid;
+}
+// grid class for each breakpoint
+@each $bp, $bpv in $breakpoints {
+  @media (min-width: #{$bpv}) {
+    .#{$bp}\:grid {
+      display: grid;
+    }
+  }
+}
+
+/* grid-template-columns initialisation */
+@for $i from 1 through $grid-columns {
+  .grid-cols-#{$i} {
+    grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+  }
+}
+
+/* grid-template-columns au sein des breakpoints */
+@each $bp, $bpv in $breakpoints {
+  @media (min-width: #{$bpv}) {
+    @for $i from 1 through $grid-columns {
+      .#{$bp}\:grid-cols-#{$i} {
+        grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+      }
+    }
+  }
+}
+
+/* gap initialisation */
+@each $key, $value in $gaps {
+  .gap-#{$key} {
+    gap: $value;
+  }
+  .gap-x-#{$key} {
+    column-gap: $value;
+  }
+  .gap-y-#{$key} {
+    row-gap: $value;
+  }
+}
+
+/* gap au sein des breakpoints */
+@each $bp, $bpv in $breakpoints {
+  @media (min-width: #{$bpv}) {
+    @each $key, $value in $gaps {
+      .#{$bp}\:gap-#{$key} {
+        gap: $value;
+      }
+      .#{$bp}\:gap-x-#{$key} {
+        column-gap: $value;
+      }
+      .#{$bp}\:gap-y-#{$key} {
+        row-gap: $value;
+      }
+    }
+  }
+}
+
+/* grid-items initialisation */
+@for $i from 1 through $grid-columns {
+  .col-start-#{$i} {
+    grid-column-start: #{$i};
+  }
+  .col-end-#{$i} {
+    grid-column-end: #{$i};
+  }
+  .col-span-#{$i} {
+    grid-column: span #{$i} / span #{$i};
+  }
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
+  .row-start-#{$i} {
+    grid-row-start: #{$i};
+  }
+  .row-end-#{$i} {
+    grid-row-end: #{$i};
+  }
+  .row-span-#{$i} {
+    grid-row: span #{$i} / span #{$i};
+  }
+}
+
+/* grid-items au sein des breakpoints */
+@each $bp, $bpv in $breakpoints {
+  @media (min-width: #{$bpv}) {
+    @for $i from 1 through $grid-columns {
+      // loop for each breakpoint
+
+      .#{$bp}\:col-start-#{$i} {
+        grid-column-start: #{$i};
+      }
+      .#{$bp}\:col-end-#{$i} {
+        grid-column-end: #{$i};
+      }
+      .#{$bp}\:col-span-#{$i} {
+        grid-column: span #{$i} / span #{$i};
+      }
+      .#{$bp}\:col-span-full {
+        grid-column: 1 / -1;
+      }
+      .#{$bp}\:row-start-#{$i} {
+        grid-row-start: #{$i};
+      }
+      .#{$bp}\:row-end-#{$i} {
+        grid-row-end: #{$i};
+      }
+      .#{$bp}\:row-span-#{$i} {
+        grid-row: span #{$i} / span #{$i};
+      }
+    }
+  }
+}