diff --git a/squelettes/scss/base/_typo.scss b/squelettes/scss/base/_typo.scss
new file mode 100644
index 0000000..ed78f4c
--- /dev/null
+++ b/squelettes/scss/base/_typo.scss
@@ -0,0 +1,133 @@
+
+
+
+.fas {
+	font-family:Fontawesome-s;
+	color:$couleurPrincipale;
+}
+.fab {
+	font-family:Fontawesome-b;
+	color:$couleurPrincipale;
+}
+
+
+
+$typo-Merriweather:     'Merriweather', serif;
+
+$typo-texte:      $typo-Merriweather;
+$typo-titres:     $typo-Merriweather;
+
+body {
+    $_computed_bfs: strip-unit($body-font-size) / strip-unit($_base-font-size);
+    font-size:      $_computed_bfs * (14/strip-unit($body-font-size))*1em;
+    @include media($bp-small-up) {
+        font-size: $_computed_bfs * (15/strip-unit($body-font-size))*1em;
+    }
+    @include media($bp-medium-up) {
+        font-size: $_computed_bfs * (16/strip-unit($body-font-size))*1em;
+    }
+    @include media($bp-large-up) {
+        font-size: $_computed_bfs*1em;
+    }
+
+    font-family:    $typo-texte;
+    font-weight:    normal;
+    line-height:    $typo-line-height;
+    color:          $couleur-texte;
+    text-rendering: geometricPrecision;
+}
+
+html.rtl * {
+    // pas d'italique pour les langues RTL
+    font-style: normal !important;
+}
+
+a {
+    text-decoration: none;
+    color:           $couleur-lien;
+    &:hover, &:focus {
+        text-decoration: underline;
+        color:           $couleur-lien-hover;
+        border-color:    $couleur-lien-hover;
+        outline:         0;
+    }
+/*    &:focus {
+        background-color: $couleur-lien !important;
+        border-color:     $couleur-lien !important;
+        color:            white !important;
+        text-shadow:      none !important;
+        transition:       all 0s !important;
+        svg * {
+            //fill: white !important;
+        }
+    }*/
+}
+
+.nav.principale {
+	font-family:$typo-Merriweather;
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+    font-family:    $typo-titres;
+	font-weight:	200;
+    line-height:    1.2;
+    font-style:     normal;
+    color:          $couleur-titres;
+    margin:         1em 0 0.8em 0;
+    letter-spacing: 0.02em;
+    a:link, a:visited {
+        /*color: $couleur-titres;*/
+    }
+    a:hover {
+        color: $couleur-lien-hover;
+    }
+}
+
+h1, .h1 {
+    font-size: em(26px);
+    @include media($bp-medium-up) {
+        font-size: em(30px);
+    }
+}
+
+h2, .h2 {
+    font-size: em(22px);
+    @include media($bp-medium-up) {
+        font-size: em(26px);
+    }
+}
+
+h3, .h3 {
+    font-size: em(20px);
+    @include media($bp-medium-up) {
+        font-size: em(23px);
+    }
+}
+
+h4, .h4 {
+    font-size: em(18px);
+    @include media($bp-medium-up) {
+        font-size: em(20px);
+    }
+}
+
+h5, .h5,
+h6, .h6 {
+    @include media($bp-medium-up) {
+        font-size: em(18px);
+    }
+}
+
+::selection {
+    color:       white !important;
+    background:  darken($couleur-lien, 10%) !important;
+    text-shadow: none !important;
+    transition:  all 0s !important;
+}
+
+