From 7aa83f91c6a65ea18978108d5c46f5fb447fbfd0 Mon Sep 17 00:00:00 2001
From: Alexis <alexis.boulerice@montreal.ca>
Date: Wed, 12 Jun 2024 17:13:00 -0400
Subject: [PATCH] =?UTF-8?q?Ajustement=20des=20styles=20de=20focus=20de=20t?=
 =?UTF-8?q?ous=20les=20=C3=A9l=C3=A9ments=20focusables=20(#123)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Alexis Boulerice <alexis.boulerice@ville.montreal.qc.ca>
---
 CHANGELOG.md                                  | 10 ++-
 .../20-navbar-interne.mustache                |  7 +-
 .../02-components/collapse/05-accordeons.json |  1 -
 .../02-components/collapse/_accordeon.json    |  1 -
 .../collapse/_accordeon.mustache              |  2 +-
 .../entree-de-donnees/05-selects.json         | 22 +++++
 .../entree-de-donnees/05-selects.mustache     | 13 ++-
 .../_input-file-item-v2.mustache              |  2 +-
 .../entree-de-donnees/_select-item.mustache   |  2 +-
 .../modale/00-modal-content.json              | 10 +--
 .../modale/01-modal-content~centred-icon.json | 12 +--
 .../02-components/modale/10-modal-sizes.json  | 30 +++----
 .../modale/20-modal-live-example.json         | 82 +++++++++----------
 .../02-components/modale/_modal.mustache      |  2 +-
 .../tableau/02-table-complex.json             |  6 +-
 .../tableau/02-table-complex~large.json       |  6 +-
 .../content/_article-content.mustache         |  2 +-
 .../_content/_demarche-arron.mustache         |  2 +-
 .../_content/_demarche-content.mustache       |  2 +-
 .../30-programme/01-programme.json            | 10 +--
 .../01-programme~multi-volet.json             | 10 +--
 .../content/_content-programme.mustache       |  2 +-
 .../35-sujets/content/_sujet-content.mustache |  2 +-
 .../60-wizard/01-wizard.json                  |  4 +
 .../05-vue-agent-311/01-vue-agent-311.json    |  3 +-
 source/css/scss/_button-group.scss            | 27 +++++-
 source/css/scss/_buttons.scss                 |  9 +-
 source/css/scss/_card.scss                    |  2 +-
 source/css/scss/_collapse.scss                |  4 +-
 source/css/scss/_dropdown.scss                |  7 +-
 source/css/scss/_footer.scss                  | 18 ++--
 source/css/scss/_forms.scss                   | 12 ++-
 source/css/scss/_list-group.scss              | 53 ++++++------
 source/css/scss/_main-navbar.scss             | 75 +++++++++++------
 source/css/scss/_menu-item.scss               | 11 ++-
 source/css/scss/_messaging.scss               | 31 ++++++-
 source/css/scss/_modal.scss                   | 23 +++---
 source/css/scss/_nav.scss                     |  2 +-
 source/css/scss/_type.scss                    |  1 +
 source/css/scss/_variables.scss               | 25 ++++--
 source/css/scss/mixins/_buttons.scss          | 19 -----
 source/css/scss/mixins/_forms.scss            |  3 -
 source/css/scss/utilities/_text.scss          | 16 ++--
 43 files changed, 361 insertions(+), 222 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e00d121b7..f7a1163f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,8 +12,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Changed
 - Styles - Typographie: Remplacement de Open Sans par la nouvelle police Montreal.
 - Components - Onglet: Modifications état onglet. Ajout variante onglets verticaux.
+- Global: Modification des états focus de la plupart des éléments pouvant recevoir le focus: boutons, liens, input.
+  Il y a 3 grandes familles de focus: normal, inversé et intérieur.
+  Normal pour les composant de base.
+  Inversé pour les composant sur fond foncé.
+  Intérieur pour les éléments pleine largeur.
 
-## Fixed
+### PatternLab
+- PL: Mise à jour des gabarits
+
+### Fixed
 - Components - Toasts: Ajustement fonction fermeture et styles boutons.
 
 
diff --git a/source/_patterns/02-components/barre-de-navigation/20-navbar-interne.mustache b/source/_patterns/02-components/barre-de-navigation/20-navbar-interne.mustache
index 6740410f7..8ad3c6e5e 100644
--- a/source/_patterns/02-components/barre-de-navigation/20-navbar-interne.mustache
+++ b/source/_patterns/02-components/barre-de-navigation/20-navbar-interne.mustache
@@ -1,14 +1,19 @@
 <nav class="main-navbar navbar navbar-dark navbar-expand w-100" role="navigation">
   {{# navbarInterneHasMenu}}
-  <button type="button" id="menu-interne-toggler" class="btn navbar-btn navbar-btn-icon btn-hide-label-sm ml-0" aria-expanded="false" aria-controls="slide-menu-left">
+  <button type="button" id="menu-interne-toggler" class="btn navbar-btn navbar-btn-icon btn-hide-label-sm ml-0{{# isHomeLink}} mr-2{{/ isHomeLink}}" aria-expanded="false" aria-controls="slide-menu-left">
     <span class="icon icon-menu" aria-hidden="true"></span>
     <span class="sr-only btn-label">Menu</span>
   </button>
   {{> components-main-menu-interne }}
   {{/ navbarInterneHasMenu}}
+  {{^ isHomeLink}}
   <div class="navbar-sitename">
     <span class="sitename">{{ applicationName }}</span>
   </div>
+  {{/ isHomeLink}}
+  {{# isHomeLink}}
+  <a class="navbar-brand" href="/">{{ applicationName }}</a>
+  {{/ isHomeLink}}
   <div class="navbar-div ml-auto">
     <div class="d-flex align-items-center">
       {{# navbarInterneHasSearch}}
diff --git a/source/_patterns/02-components/collapse/05-accordeons.json b/source/_patterns/02-components/collapse/05-accordeons.json
index 6c63125ac..361b18c32 100644
--- a/source/_patterns/02-components/collapse/05-accordeons.json
+++ b/source/_patterns/02-components/collapse/05-accordeons.json
@@ -1,6 +1,5 @@
 {
   "accordion": {
-    "collapsibleClasses": "accordeon-listed",
     "collapsibleItem": [
       {
         "title": "Titre",
diff --git a/source/_patterns/02-components/collapse/_accordeon.json b/source/_patterns/02-components/collapse/_accordeon.json
index ae3d2af8d..da0b69adb 100644
--- a/source/_patterns/02-components/collapse/_accordeon.json
+++ b/source/_patterns/02-components/collapse/_accordeon.json
@@ -1,5 +1,4 @@
 {
-  "collapsibleClasses": false,
   "collapsibleItem": [
     {
       "title": "Collapsible item #1",
diff --git a/source/_patterns/02-components/collapse/_accordeon.mustache b/source/_patterns/02-components/collapse/_accordeon.mustache
index 67b6e0b69..bde1d72ee 100644
--- a/source/_patterns/02-components/collapse/_accordeon.mustache
+++ b/source/_patterns/02-components/collapse/_accordeon.mustache
@@ -1,4 +1,4 @@
-<div id="accordion" class="{{ collapsibleClasses }}">
+<div id="accordion" class="accordeon-listed {{ collapsibleClasses }}">
   {{^ hideButton}}
   <button type="button" class="btn btn-accordion-collapse d-flex ml-auto" data-bs-toggle="collapse" aria-expanded="false">Tout ouvrir</button>
   {{/ hideButton}}
diff --git a/source/_patterns/02-components/entree-de-donnees/05-selects.json b/source/_patterns/02-components/entree-de-donnees/05-selects.json
index 617b3fe5b..159a28b27 100755
--- a/source/_patterns/02-components/entree-de-donnees/05-selects.json
+++ b/source/_patterns/02-components/entree-de-donnees/05-selects.json
@@ -50,5 +50,27 @@
         "formAriaInputError": true
       }
     }
+  ],
+  "selectDisabled": [
+    {
+      "formGroupClass": false,
+      "formGroupSelectID": "custom-select-disabled",
+      "formGroupSelectLabel": "Libellé",
+      "formGroupSelectClass": false,
+      "formGroupSelect": {
+        "defaultOption": "Option par défaut",
+        "options": [
+          {
+            "option-text" : "Option 1",
+            "option-value" : "option-1"
+          },
+          {
+            "option-text" : "Option 2",
+            "option-value" : "option-2"
+          }
+        ]
+      },
+      "formGroupSelectState": "disabled"
+    }
   ]
 }
diff --git a/source/_patterns/02-components/entree-de-donnees/05-selects.mustache b/source/_patterns/02-components/entree-de-donnees/05-selects.mustache
index fa68d0e47..d421c425f 100644
--- a/source/_patterns/02-components/entree-de-donnees/05-selects.mustache
+++ b/source/_patterns/02-components/entree-de-donnees/05-selects.mustache
@@ -1,5 +1,5 @@
 <h4 class="pl-pattern-subtitle">Taille</h4>
-<div class="row list-unstyled">
+<div class="row">
   {{# selectSize }}
   <div class="col-xs-6 col-md-4">
     {{> components-select-item }}
@@ -8,10 +8,19 @@
 </div>
 
 <h4 class="pl-pattern-subtitle">Validation</h4>
-<div class="row list-unstyled">
+<div class="row">
   {{# selectValidation }}
   <div class="col-xs-6 col-md-4">
     {{> components-select-item }}
   </div>
   {{/ selectValidation}}
 </div>
+
+<h4 class="pl-pattern-subtitle">Désactivé</h4>
+<div class="row">
+  {{# selectDisabled }}
+  <div class="col-xs-6 col-md-4">
+    {{> components-select-item }}
+  </div>
+  {{/ selectDisabled}}
+</div>
diff --git a/source/_patterns/02-components/entree-de-donnees/_input-file-item-v2.mustache b/source/_patterns/02-components/entree-de-donnees/_input-file-item-v2.mustache
index bb042a0eb..d4e0336e9 100644
--- a/source/_patterns/02-components/entree-de-donnees/_input-file-item-v2.mustache
+++ b/source/_patterns/02-components/entree-de-donnees/_input-file-item-v2.mustache
@@ -38,7 +38,7 @@
           <div class="font-size-xs-interface">{{ fileSize}}</div>
         </div>
         <div class="ml-2 dropdown">
-          <button class="btn btn-primary btn-reversed btn-icon" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Button aria label">
+          <button class="btn btn-tertiary btn-squared btn-icon" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Button aria label">
             <span class="icon icon-more-vertical" aria-hidden="true"></span>
           </button>
           {{> components-dropdown}}
diff --git a/source/_patterns/02-components/entree-de-donnees/_select-item.mustache b/source/_patterns/02-components/entree-de-donnees/_select-item.mustache
index fc4a9ba65..e860dc702 100755
--- a/source/_patterns/02-components/entree-de-donnees/_select-item.mustache
+++ b/source/_patterns/02-components/entree-de-donnees/_select-item.mustache
@@ -5,7 +5,7 @@
   {{# formGroupInputHelpText}}
   <span id="{{id}}" class="form-text">{{ text }}</span>
   {{/ formGroupInputHelpText}}
-  <select class="custom-select {{formGroupSelectClass}}" name="{{ formGroupSelectID }}" id="{{formGroupSelectID}}"{{^formGroupInputError}}{{# formGroupInputHelpText}} aria-describedby="{{id}}"{{/ formGroupInputHelpText}}{{/formGroupInputError}}{{#formGroupInputError}} aria-describedby="{{id}}" {{#formAriaInputError}} aria-invalid="true"{{/formAriaInputError}}{{/formGroupInputError}}{{# formGroupSelectRequired}} required{{/ formGroupSelectRequired}}>
+  <select class="custom-select {{formGroupSelectClass}}" name="{{ formGroupSelectID }}" id="{{formGroupSelectID}}"{{^formGroupInputError}}{{# formGroupInputHelpText}} aria-describedby="{{id}}"{{/ formGroupInputHelpText}}{{/ formGroupInputError}}{{# formGroupInputError}} aria-describedby="{{id}}" {{# formAriaInputError}} aria-invalid="true"{{/ formAriaInputError}}{{/ formGroupInputError}}{{# formGroupSelectState}} {{ formGroupSelectState}}{{/ formGroupSelectState}}{{# formGroupSelectRequired}} required{{/ formGroupSelectRequired}}>
     <option value="">{{ formGroupSelect.defaultOption}}</option>
     {{# formGroupSelect.options }}
       {{> components-option }}
diff --git a/source/_patterns/02-components/modale/00-modal-content.json b/source/_patterns/02-components/modale/00-modal-content.json
index dea84175d..e7491ed08 100644
--- a/source/_patterns/02-components/modale/00-modal-content.json
+++ b/source/_patterns/02-components/modale/00-modal-content.json
@@ -8,16 +8,16 @@
   "modalHasIcon": false,
   "modalFooter": {
     "buttons": [
-      {
-        "buttonType": "submit",
-        "buttonClass": "btn-primary",
-        "buttonText": "Action"
-      },
       {
         "buttonType": "button",
         "buttonClass": "btn-link",
         "buttonText": "Annuler",
         "buttonState": "data-dismiss=modal"
+      },
+      {
+        "buttonType": "submit",
+        "buttonClass": "btn-primary",
+        "buttonText": "Action"
       }
     ]
   }
diff --git a/source/_patterns/02-components/modale/01-modal-content~centred-icon.json b/source/_patterns/02-components/modale/01-modal-content~centred-icon.json
index 649bec6d4..cc290ee08 100644
--- a/source/_patterns/02-components/modale/01-modal-content~centred-icon.json
+++ b/source/_patterns/02-components/modale/01-modal-content~centred-icon.json
@@ -10,16 +10,16 @@
   },
   "modalFooter": {
     "buttons": [
+      {
+        "buttonType": "button",
+        "buttonClass": "btn-link",
+        "buttonText": "Annuler",
+        "buttonState": "data-dismiss=modal"
+      },
       {
         "buttonType": "submit",
         "buttonClass": "btn-primary",
         "buttonText": "Action"
-      },
-      {
-        "buttonType": "button",
-        "buttonClass": "btn-secondary",
-        "buttonText": "Action secondaire",
-        "buttonState": false
       }
     ]
   }
diff --git a/source/_patterns/02-components/modale/10-modal-sizes.json b/source/_patterns/02-components/modale/10-modal-sizes.json
index e86d14f80..73de2b6cd 100644
--- a/source/_patterns/02-components/modale/10-modal-sizes.json
+++ b/source/_patterns/02-components/modale/10-modal-sizes.json
@@ -9,16 +9,16 @@
       "modalBody": " <p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
       "modalFooter": {
         "buttons": [
-          {
-            "buttonType": "submit",
-            "buttonClass": "btn-primary",
-            "buttonText": "Action"
-          },
           {
             "buttonType": "button",
             "buttonClass": "btn-link",
             "buttonText": "Annuler",
             "buttonState": "data-dismiss=modal"
+          },
+          {
+            "buttonType": "submit",
+            "buttonClass": "btn-primary",
+            "buttonText": "Action"
           }
         ]
       }
@@ -32,16 +32,16 @@
       "modalBody": " <p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
       "modalFooter": {
         "buttons": [
-          {
-            "buttonType": "submit",
-            "buttonClass": "btn-primary",
-            "buttonText": "Action"
-          },
           {
             "buttonType": "button",
             "buttonClass": "btn-link",
             "buttonText": "Annuler",
             "buttonState": "data-dismiss=modal"
+          },
+          {
+            "buttonType": "submit",
+            "buttonClass": "btn-primary",
+            "buttonText": "Action"
           }
         ]
       }
@@ -55,16 +55,16 @@
       "modalBody": " <p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
       "modalFooter": {
         "buttons": [
-          {
-            "buttonType": "submit",
-            "buttonClass": "btn-primary",
-            "buttonText": "Action"
-          },
           {
             "buttonType": "button",
             "buttonClass": "btn-link",
             "buttonText": "Annuler",
             "buttonState": "data-dismiss=modal"
+          },
+          {
+            "buttonType": "submit",
+            "buttonClass": "btn-primary",
+            "buttonText": "Action"
           }
         ]
       }
diff --git a/source/_patterns/02-components/modale/20-modal-live-example.json b/source/_patterns/02-components/modale/20-modal-live-example.json
index c472a7ad7..ac321db17 100644
--- a/source/_patterns/02-components/modale/20-modal-live-example.json
+++ b/source/_patterns/02-components/modale/20-modal-live-example.json
@@ -10,16 +10,16 @@
         "modalBody": " <p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
         "modalFooter": {
           "buttons": [
-            {
-              "buttonType": "submit",
-              "buttonClass": "btn-primary",
-              "buttonText": "Action"
-            },
             {
               "buttonType": "button",
               "buttonClass": "btn-link",
               "buttonText": "Annuler",
               "buttonState": "data-dismiss=modal"
+            },
+            {
+              "buttonType": "submit",
+              "buttonClass": "btn-primary",
+              "buttonText": "Action"
             }
           ]
         }
@@ -34,16 +34,16 @@
         "modalBody": " <p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
         "modalFooter": {
           "buttons": [
+            {
+              "buttonType": "button",
+              "buttonClass": "btn-link",
+              "buttonText": "Annuler",
+              "buttonState": "data-dismiss=modal"
+            },
             {
               "buttonType": "submit",
               "buttonClass": "btn-primary",
               "buttonText": "Action"
-            },
-            {
-              "buttonType": "button",
-              "buttonClass": "btn-secondary",
-              "buttonText": "Action secondaire",
-              "buttonState": false
             }
           ]
         }
@@ -58,16 +58,16 @@
         "modalBody": "<p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><h2>Sit sed lorem ipsum</h2><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
         "modalFooter": {
           "buttons": [
-            {
-              "buttonType": "submit",
-              "buttonClass": "btn-primary",
-              "buttonText": "Action"
-            },
             {
               "buttonType": "button",
               "buttonClass": "btn-link",
               "buttonText": "Annuler",
               "buttonState": "data-dismiss=modal"
+            },
+            {
+              "buttonType": "submit",
+              "buttonClass": "btn-primary",
+              "buttonText": "Action"
             }
           ]
         }
@@ -82,16 +82,16 @@
         "modalBody": "<p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><h2>Sit sed lorem ipsum</h2><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><h3>Takimata lorem dolores diam</h3><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><h3>Takimata lorem dolores diam</h3><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><h3>Takimata lorem dolores diam</h3><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
         "modalFooter": {
           "buttons": [
-            {
-              "buttonType": "submit",
-              "buttonClass": "btn-primary",
-              "buttonText": "Action"
-            },
             {
               "buttonType": "button",
               "buttonClass": "btn-link",
               "buttonText": "Annuler",
               "buttonState": "data-dismiss=modal"
+            },
+            {
+              "buttonType": "submit",
+              "buttonClass": "btn-primary",
+              "buttonText": "Action"
             }
           ]
         }
@@ -107,16 +107,16 @@
         "modalBody": " <p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
         "modalFooter": {
           "buttons": [
-            {
-              "buttonType": "submit",
-              "buttonClass": "btn-primary",
-              "buttonText": "Action"
-            },
             {
               "buttonType": "button",
               "buttonClass": "btn-link",
               "buttonText": "Annuler",
               "buttonState": "data-dismiss=modal"
+            },
+            {
+              "buttonType": "submit",
+              "buttonClass": "btn-primary",
+              "buttonText": "Action"
             }
           ]
         }
@@ -131,16 +131,16 @@
         "modalBody": " <p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
         "modalFooter": {
           "buttons": [
-            {
-              "buttonType": "submit",
-              "buttonClass": "btn-primary",
-              "buttonText": "Action"
-            },
             {
               "buttonType": "button",
               "buttonClass": "btn-link",
               "buttonText": "Annuler",
               "buttonState": "data-dismiss=modal"
+            },
+            {
+              "buttonType": "submit",
+              "buttonClass": "btn-primary",
+              "buttonText": "Action"
             }
           ]
         }
@@ -155,16 +155,16 @@
         "modalBody": "<p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><h2>Sit sed lorem ipsum</h2><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
         "modalFooter": {
           "buttons": [
-            {
-              "buttonType": "submit",
-              "buttonClass": "btn-primary",
-              "buttonText": "Action"
-            },
             {
               "buttonType": "button",
               "buttonClass": "btn-link",
               "buttonText": "Annuler",
               "buttonState": "data-dismiss=modal"
+            },
+            {
+              "buttonType": "submit",
+              "buttonClass": "btn-primary",
+              "buttonText": "Action"
             }
           ]
         }
@@ -179,16 +179,16 @@
         "modalBody": "<p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><h2>Sit sed lorem ipsum</h2><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><h3>Takimata lorem dolores diam</h3><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><h3>Takimata lorem dolores diam</h3><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><h3>Takimata lorem dolores diam</h3><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p><p>Et duo takimata elitr sit clita et accusam voluptua. Diam dolor duo et consetetur lorem gubergren, no gubergren diam tempor et sadipscing et et. Voluptua rebum et dolor sanctus gubergren.</p>",
         "modalFooter": {
           "buttons": [
-            {
-              "buttonType": "submit",
-              "buttonClass": "btn-primary",
-              "buttonText": "Action"
-            },
             {
               "buttonType": "button",
               "buttonClass": "btn-link",
               "buttonText": "Annuler",
               "buttonState": "data-dismiss=modal"
+            },
+            {
+              "buttonType": "submit",
+              "buttonClass": "btn-primary",
+              "buttonText": "Action"
             }
           ]
         }
diff --git a/source/_patterns/02-components/modale/_modal.mustache b/source/_patterns/02-components/modale/_modal.mustache
index 0ae43c83a..ece9ba427 100644
--- a/source/_patterns/02-components/modale/_modal.mustache
+++ b/source/_patterns/02-components/modale/_modal.mustache
@@ -17,7 +17,7 @@
         {{{modalBody}}}
       </div>
       {{# modalFooter}}
-      <div class="modal-footer modal-footer-order">
+      <div class="modal-footer">
         {{# buttons}}{{> components-button}}{{/buttons}}
       </div>
       {{/ modalFooter}}
diff --git a/source/_patterns/02-components/tableau/02-table-complex.json b/source/_patterns/02-components/tableau/02-table-complex.json
index 6848efa7a..d614a50da 100644
--- a/source/_patterns/02-components/tableau/02-table-complex.json
+++ b/source/_patterns/02-components/tableau/02-table-complex.json
@@ -33,7 +33,7 @@
                 "buttonText": "Libellé"
               },
               "moreVertical": {
-                "buttonClass": "btn-primary btn-reversed btn-squared btn-icon btn-sm ml-1",
+                "buttonClass": "btn-tertiary btn-squared btn-icon btn-sm ml-1",
                 "dropdownMenu": {
                   "dropdownMenuClass": "dropdown-menu-right",
                   "dropdownMenuID": "dropdownTableMoreVertical",
@@ -84,7 +84,7 @@
                 "buttonText": "Libellé"
               },
               "moreVertical": {
-                "buttonClass": "btn-primary btn-reversed btn-squared btn-icon btn-sm ml-1",
+                "buttonClass": "btn-tertiary btn-squared btn-icon btn-sm ml-1",
                 "dropdownMenu": {
                   "dropdownMenuClass": "dropdown-menu-right",
                   "dropdownMenuID": "dropdownTableMoreVertical2",
@@ -135,7 +135,7 @@
                 "buttonText": "Libellé"
               },
               "moreVertical": {
-                "buttonClass": "btn-primary btn-reversed btn-squared btn-icon btn-sm ml-1",
+                "buttonClass": "btn-tertiary btn-squared btn-icon btn-sm ml-1",
                 "dropdownMenu": {
                   "dropdownMenuClass": "dropdown-menu-right",
                   "dropdownMenuID": "dropdownTableMoreVertical3",
diff --git a/source/_patterns/02-components/tableau/02-table-complex~large.json b/source/_patterns/02-components/tableau/02-table-complex~large.json
index ee2b2f0d4..fef3904fe 100644
--- a/source/_patterns/02-components/tableau/02-table-complex~large.json
+++ b/source/_patterns/02-components/tableau/02-table-complex~large.json
@@ -33,7 +33,7 @@
                 "buttonText": "Libellé"
               },
               "moreVertical": {
-                "buttonClass": "btn-primary btn-reversed btn-icon ml-1",
+                "buttonClass": "btn-tertiary btn-squared btn-icon ml-1",
                 "dropdownMenu": {
                   "dropdownMenuClass": "dropdown-menu-right",
                   "dropdownMenuID": "dropdownTableMoreVertical",
@@ -84,7 +84,7 @@
                 "buttonText": "Libellé"
               },
               "moreVertical": {
-                "buttonClass": "btn-primary btn-reversed btn-icon ml-1",
+                "buttonClass": "btn-tertiary btn-squared btn-icon ml-1",
                 "dropdownMenu": {
                   "dropdownMenuClass": "dropdown-menu-right",
                   "dropdownMenuID": "dropdownTableMoreVertical2",
@@ -135,7 +135,7 @@
                 "buttonText": "Libellé"
               },
               "moreVertical": {
-                "buttonClass": "btn-primary btn-reversed btn-icon ml-1",
+                "buttonClass": "btn-tertiary btn-squared btn-icon ml-1",
                 "dropdownMenu": {
                   "dropdownMenuClass": "dropdown-menu-right",
                   "dropdownMenuID": "dropdownTableMoreVertical3",
diff --git a/source/_patterns/04-templates-citoyens/20-article/content/_article-content.mustache b/source/_patterns/04-templates-citoyens/20-article/content/_article-content.mustache
index 5fd8c5146..1543354eb 100644
--- a/source/_patterns/04-templates-citoyens/20-article/content/_article-content.mustache
+++ b/source/_patterns/04-templates-citoyens/20-article/content/_article-content.mustache
@@ -112,7 +112,7 @@
 {{# module-collapse}}
 <h2>Contenus imbriqués Accordéons - module titre</h2>
 <div class="content-module-stacked">
-  <div id="accordion" class="wrapper-accordion">
+  <div id="accordion" class="accordeon-listed wrapper-accordion">
     {{> components-collapsible-item }}
   </div>
 </div>
diff --git a/source/_patterns/04-templates-citoyens/25-demarche/_content/_demarche-arron.mustache b/source/_patterns/04-templates-citoyens/25-demarche/_content/_demarche-arron.mustache
index f22e9beb2..5b65ad71c 100644
--- a/source/_patterns/04-templates-citoyens/25-demarche/_content/_demarche-arron.mustache
+++ b/source/_patterns/04-templates-citoyens/25-demarche/_content/_demarche-arron.mustache
@@ -74,7 +74,7 @@
 {{# module-canaux-comm}}
 <h3>Canaux de communication</h3>
 <div class="content-module-stacked">
-  <div id="accordion" class="wrapper-accordion">
+  <div id="accordion" class="accordeon-listed wrapper-accordion">
   {{> components-collapsible-item }}
   </div>
 </div>
diff --git a/source/_patterns/04-templates-citoyens/25-demarche/_content/_demarche-content.mustache b/source/_patterns/04-templates-citoyens/25-demarche/_content/_demarche-content.mustache
index 91bf1c381..a27edb2e4 100644
--- a/source/_patterns/04-templates-citoyens/25-demarche/_content/_demarche-content.mustache
+++ b/source/_patterns/04-templates-citoyens/25-demarche/_content/_demarche-content.mustache
@@ -70,7 +70,7 @@
   {{# module-canaux-comm}}
   <h2>Canaux de communication</h2>
   <div class="content-module-stacked">
-    <div id="accordion" class="wrapper-accordion">
+    <div id="accordion" class="accordeon-listed wrapper-accordion">
     {{> components-collapsible-item }}
     </div>
   </div>
diff --git a/source/_patterns/04-templates-citoyens/30-programme/01-programme.json b/source/_patterns/04-templates-citoyens/30-programme/01-programme.json
index f666ae12f..211204a37 100644
--- a/source/_patterns/04-templates-citoyens/30-programme/01-programme.json
+++ b/source/_patterns/04-templates-citoyens/30-programme/01-programme.json
@@ -99,7 +99,7 @@
             "url": "https://desjardins.com",
             "name": "Partenaire A",
             "logo": {
-              "src": "https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo2.jpg",
+              "src": "https://dummyimage.com/100x100/ffffff/212529.png&text=Logo+Desjardins",
               "alt": "Partenaire A"
             }
           },
@@ -107,7 +107,7 @@
             "url": "https://google.com",
             "name": "Partenaire B",
             "logo": {
-              "src": "https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg",
+              "src": "https://dummyimage.com/100x100/ffffff/212529.png&text=Logo+Québec",
               "alt": "Partenaire B"
             }
           },
@@ -120,7 +120,7 @@
             "url": "https://google.com",
             "name": "Partenaire D",
             "logo": {
-              "src": "https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo3.jpg",
+              "src": "https://dummyimage.com/100x100/ffffff/212529.png&text=Logo+Canada",
               "alt": "Partenaire D"
             }
           },
@@ -128,7 +128,7 @@
             "url": false,
             "name": "Partenaire E",
             "logo": {
-              "src": "https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo4.jpg",
+              "src": "https://dummyimage.com/100x100/ffffff/212529.png&text=Logo+Hydro-Québec",
               "alt": "Partenaire E"
             }
           },
@@ -136,7 +136,7 @@
             "url": "https://google.com",
             "name": "Partenaire F",
             "logo": {
-              "src": "https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg",
+              "src": "https://dummyimage.com/100x100/ffffff/212529.png&text=Logo+Google",
               "alt": "Partenaire F"
             }
           }
diff --git a/source/_patterns/04-templates-citoyens/30-programme/01-programme~multi-volet.json b/source/_patterns/04-templates-citoyens/30-programme/01-programme~multi-volet.json
index 21476c7bc..73b3ce71f 100644
--- a/source/_patterns/04-templates-citoyens/30-programme/01-programme~multi-volet.json
+++ b/source/_patterns/04-templates-citoyens/30-programme/01-programme~multi-volet.json
@@ -278,7 +278,7 @@
           "url": "https://desjardins.com",
           "name": "Partenaire A",
           "logo": {
-            "src": "https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo3.jpg",
+            "src": "https://dummyimage.com/100x100/ffffff/212529.png&text=Logo+Desjardins",
             "alt": "Partenaire A"
           }
         },
@@ -286,7 +286,7 @@
           "url": "https://google.com",
           "name": "Partenaire B",
           "logo": {
-            "src": "https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg",
+            "src": "https://dummyimage.com/100x100/ffffff/212529.png&text=Logo+Québec",
             "alt": "Partenaire B"
           }
         },
@@ -299,7 +299,7 @@
           "url": "https://google.com",
           "name": "Partenaire D",
           "logo": {
-            "src": "https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo2.jpg",
+            "src": "https://dummyimage.com/100x100/ffffff/212529.png&text=Logo+Canada",
             "alt": "Partenaire D"
           }
         },
@@ -307,7 +307,7 @@
           "url": false,
           "name": "Partenaire E",
           "logo": {
-            "src": "https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo4.jpg",
+            "src": "https://dummyimage.com/100x100/ffffff/212529.png&text=Logo+Hydro-Québec",
             "alt": "Partenaire E"
           }
         },
@@ -315,7 +315,7 @@
           "url": "https://google.com",
           "name": "Partenaire F",
           "logo": {
-            "src": "https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo3.jpg",
+            "src": "https://dummyimage.com/100x100/ffffff/212529.png&text=Logo+Google",
             "alt": "Partenaire F"
           }
         }
diff --git a/source/_patterns/04-templates-citoyens/30-programme/content/_content-programme.mustache b/source/_patterns/04-templates-citoyens/30-programme/content/_content-programme.mustache
index edecb6f08..227bcefcf 100644
--- a/source/_patterns/04-templates-citoyens/30-programme/content/_content-programme.mustache
+++ b/source/_patterns/04-templates-citoyens/30-programme/content/_content-programme.mustache
@@ -52,7 +52,7 @@
   {{# module-collapse}}
   <h3>Contenus imbriqués Accordéons - module titre</h3>
   <div class="content-module-stacked">
-    <div id="accordion" class="wrapper-accordion">
+    <div id="accordion" class="accordeon-listed wrapper-accordion">
       {{> components-collapsible-item }}
     </div>
   </div>
diff --git a/source/_patterns/04-templates-citoyens/35-sujets/content/_sujet-content.mustache b/source/_patterns/04-templates-citoyens/35-sujets/content/_sujet-content.mustache
index 8da830d80..cd98cf0c4 100644
--- a/source/_patterns/04-templates-citoyens/35-sujets/content/_sujet-content.mustache
+++ b/source/_patterns/04-templates-citoyens/35-sujets/content/_sujet-content.mustache
@@ -58,7 +58,7 @@
 {{# module-collapse}}
 <h2>Contenus imbriqués Accordéons - module titre</h2>
 <div class="content-module-stacked">
-  <div id="accordion" class="wrapper-accordion">
+  <div id="accordion" class="accordeon-listed wrapper-accordion">
     {{> components-collapsible-item }}
   </div>
 </div>
diff --git a/source/_patterns/04-templates-citoyens/60-wizard/01-wizard.json b/source/_patterns/04-templates-citoyens/60-wizard/01-wizard.json
index b27bc9a6b..2b050bc22 100644
--- a/source/_patterns/04-templates-citoyens/60-wizard/01-wizard.json
+++ b/source/_patterns/04-templates-citoyens/60-wizard/01-wizard.json
@@ -138,6 +138,10 @@
       "formGroupInputLabel": "Libellé",
       "formGroupInputPlaceholder": {
         "text": "Placeholder"
+      },
+      "formGroupInputHelpText": {
+        "id": "form-group-textearea-help-text",
+        "text": "Texte d'assistance."
       }
     }
   ],
diff --git a/source/_patterns/05-templates-outils-interne/05-vue-agent-311/01-vue-agent-311.json b/source/_patterns/05-templates-outils-interne/05-vue-agent-311/01-vue-agent-311.json
index d5cdbc0d6..2f2bb9ee2 100644
--- a/source/_patterns/05-templates-outils-interne/05-vue-agent-311/01-vue-agent-311.json
+++ b/source/_patterns/05-templates-outils-interne/05-vue-agent-311/01-vue-agent-311.json
@@ -10,6 +10,7 @@
     "email": "courriel@montreal.ca"
   },
   "applicationName": "Outil intégré",
+  "isHomeLink": true,
   "menuItemVerticalLabeledBar": {
     "menuItemClass": "menu-items-column menu-items-labeled-bar menu-items-right",
     "menuItem": [
@@ -77,7 +78,7 @@
       }
     ],
     "accordion": {
-      "collapsibleClasses": "accordeon-listed mb-2 px-2",
+      "collapsibleClasses": "mb-2 px-2",
       "collapsibleItem": [
         {
           "disabled": false,
diff --git a/source/css/scss/_button-group.scss b/source/css/scss/_button-group.scss
index 020510e61..79ae9968c 100644
--- a/source/css/scss/_button-group.scss
+++ b/source/css/scss/_button-group.scss
@@ -27,6 +27,13 @@
       color: $neutral-tertiary;
     }
 
+    &:not(:disabled):not(.disabled):not(.dropdown-toggle):active,
+    &:not(:disabled):not(.disabled):not(.dropdown-toggle).active {
+      &:focus {
+        box-shadow: $input-btn-focus-inside-box-shadow;
+      }
+    }
+
     // We need to fix padding and margin for btn-icon
     &.btn-icon {
       flex: 0 0 auto;
@@ -47,19 +54,25 @@
         .icon {
           @include icon-color($primary);
         }
+
+        &:not(.dropdown-toggle):focus {
+          box-shadow: $input-btn-focus-inside-box-shadow;
+        }
       }
     }
 
     // Bring the hover, focused, and "active" buttons to the front to overlay
     // the borders properly
-    @include hover {
-      z-index: 1;
-    }
+    &:hover,
     &:focus,
     &:active,
     &.active {
       z-index: 1;
     }
+
+    &:not(.dropdown-toggle):focus {
+      box-shadow: $input-btn-focus-inside-box-shadow;
+    }
   }
 
   > .btn-group-div {
@@ -119,6 +132,14 @@
   @extend .btn-lg;
 }
 
+.btn-group-stepper {
+  .form-control {
+    &:focus {
+      box-shadow: $input-btn-focus-inside-box-shadow;
+    }
+  }
+}
+
 
 //
 // Split button dropdowns
diff --git a/source/css/scss/_buttons.scss b/source/css/scss/_buttons.scss
index bc1c34806..4f79834e4 100644
--- a/source/css/scss/_buttons.scss
+++ b/source/css/scss/_buttons.scss
@@ -138,7 +138,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-secondary {
-  @include button-variant($background: $white, $border: $neutral-stroke, $color: $action, $hover-background: $white, $hover-border: $action, $hover-color: $action, $active-background: $white, $active-border: $action, $active-color: $action);
+  @include button-variant($background: $white, $border: $neutral-stroke, $color: $action, $hover-background: $highlight-light, $hover-border: $action, $hover-color: $action, $active-background: $highlight-light, $active-border: $action, $active-color: $action);
 }
 
 .btn-link,
@@ -173,7 +173,7 @@ fieldset:disabled a.btn {
 // DEPRECATED
 // USE .btn-reversed modifier
 .btn-primary-reverse {
-  @include button-variant($background: $white, $border: $white, $color: $neutral-primary, $hover-background: $white, $hover-border: $white, $hover-color: $action, $active-background: $white, $active-border: $white, $active-color: $action, $reversed: true);
+  @include button-variant($background: $white, $border: $white, $color: $neutral-primary, $hover-background: $highlight-light, $hover-border: $highlight-light, $hover-color: $action, $active-background: $highlight-light, $active-border: $highlight-light, $active-color: $action, $reversed: true);
 }
 
 .btn-secondary-reverse {
@@ -188,7 +188,7 @@ fieldset:disabled a.btn {
 // Reversed modifier
 .btn-reversed {
   &.btn-primary {
-    @include button-variant($background: $white, $border: $white, $color: $neutral-primary, $hover-background: $white, $hover-border: $white, $hover-color: $action, $active-background: $white, $active-border: $white, $active-color: $action, $reversed: true);
+    @include button-variant($background: $white, $border: $white, $color: $neutral-primary, $hover-background: $highlight-light, $hover-border: $highlight-light, $hover-color: $action, $active-background: $highlight-light, $active-border: $white, $active-color: $action, $reversed: true);
   }
   &.btn-secondary {
     @include button-variant($background: transparent, $border: $overlay-mid-reversed, $color: $white, $hover-background: transparent, $hover-border: $white, $hover-color: $white, $active-background: transparent, $active-border: $white, $active-color: $white, $reversed: true);
@@ -276,7 +276,8 @@ fieldset:disabled a.btn {
   padding-top: .375rem;
   padding-bottom: .375rem;
   text-decoration: none;
-  @include hover-focus {
+  &:hover,
+  &:focus {
     border: none;
   }
 }
diff --git a/source/css/scss/_card.scss b/source/css/scss/_card.scss
index 683ef1a7e..80233d42c 100755
--- a/source/css/scss/_card.scss
+++ b/source/css/scss/_card.scss
@@ -489,7 +489,7 @@ a.card {
   }
   &:focus,
   &.focus {
-    box-shadow: $card-box-shadow, $input-btn-focus-box-shadow;
+    box-shadow: $input-btn-focus-box-shadow;
   }
 
   &.card-multi,
diff --git a/source/css/scss/_collapse.scss b/source/css/scss/_collapse.scss
index fe982233c..058fedfc0 100644
--- a/source/css/scss/_collapse.scss
+++ b/source/css/scss/_collapse.scss
@@ -1,6 +1,6 @@
 //
 // Collapsible Item
-// TODO: merge accordion-listed since listed became the only available version.
+// TODO: merge accordion-listed since listed became the only version available.
 //
 .collapsible-item {
   background-color: $white;
@@ -95,7 +95,7 @@
       }
 
       &:focus {
-        box-shadow: $btn-focus-inset-box-shadow;
+        box-shadow: $btn-focus-inside-box-shadow;
         border-radius: subtract($border-radius, 1px);
       }
 
diff --git a/source/css/scss/_dropdown.scss b/source/css/scss/_dropdown.scss
index 11670d451..a37ef56ae 100755
--- a/source/css/scss/_dropdown.scss
+++ b/source/css/scss/_dropdown.scss
@@ -36,12 +36,17 @@
       color: $neutral-secondary;
     }
 
-    @include hover-focus {
+    &:hover,
+    &:focus {
       color: $neutral-primary;
       border: none;
       @include gradient-bg($neutral-underground-1);
     }
 
+    &:focus {
+      box-shadow: $btn-focus-inside-box-shadow;
+    }
+
     &.active,
     &:active {
       color: $neutral-primary;
diff --git a/source/css/scss/_footer.scss b/source/css/scss/_footer.scss
index c55f9d48b..6a00aa9de 100755
--- a/source/css/scss/_footer.scss
+++ b/source/css/scss/_footer.scss
@@ -13,7 +13,9 @@ footer {
       border: none;
       color: $white;
       font-weight: $font-weight-normal;
-      @include hover-focus {
+      display: inline-block;
+      &:hover,
+      &:focus {
         background-color: transparent;
         text-decoration: none;
         border-bottom: none;
@@ -22,7 +24,7 @@ footer {
       // Custom focus for footer links
       &:focus,
       &.focus {
-        box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-reverse-color;
+        box-shadow: $input-btn-reverse-focus-box-shadow;
       }
 
       &.link-page-top {
@@ -125,9 +127,15 @@ footer {
     }
 
     .btn-lang {
-      padding-left: 0;
-      padding-right: 0;
-      margin-right: .5rem;
+      padding: 0;
+      border-radius: 0;
+      display: block;
+      transition: none;
+      display: inline-block;
+    }
+
+    .footer-last {
+      line-height: 1.25;
     }
   }
 
diff --git a/source/css/scss/_forms.scss b/source/css/scss/_forms.scss
index ed0c97c44..635b16b97 100644
--- a/source/css/scss/_forms.scss
+++ b/source/css/scss/_forms.scss
@@ -80,7 +80,6 @@ legend,
   padding: $input-padding-y-sm $input-padding-x-sm;
   @include font-size($input-font-size-sm);
   line-height: $input-line-height-sm;
-  // @include border-radius($input-border-radius-sm);
 }
 
 .form-group {
@@ -219,7 +218,7 @@ legend,
     transform: translateY(-50%);
     display: flex;
     color: $neutral-primary;
-    margin-right: .3rem;
+    margin-right: .5rem;
     padding: 0;
     border-radius: 50%;
 
@@ -459,6 +458,15 @@ legend,
     }
   }
 
+  .custom-control-input:focus ~ .custom-control-label {
+    &::before {
+      box-shadow: none;
+    }
+    &::after {
+      box-shadow: $input-btn-focus-box-shadow;
+    }
+  }
+
   .custom-control-input:disabled {
     ~ .custom-control-label::before {
       cursor: not-allowed;
diff --git a/source/css/scss/_list-group.scss b/source/css/scss/_list-group.scss
index abdb7e6ad..9406eead9 100644
--- a/source/css/scss/_list-group.scss
+++ b/source/css/scss/_list-group.scss
@@ -85,7 +85,8 @@
       > a {
         align-items: center;
       }
-      @include hover-focus {
+      &:hover,
+      &:focus {
         border-bottom: none;
         border-top: 1px solid transparent;
         + .list-group-item-action {
@@ -99,7 +100,8 @@
       &.active {
         border-bottom: 1px solid transparent;
       }
-      @include hover-focus {
+      &:hover,
+      &:focus {
         border-bottom: 1px solid transparent;
       }
     }
@@ -131,7 +133,8 @@
   text-align: inherit; // For `<button>`s (anchors inherit)
   text-decoration: none;
 
-  @include hover-focus {
+  &:hover,
+  &:focus {
     z-index: 1; // Place hover/focus items above their siblings for proper border styling
     color: $list-group-action-hover-color;
     text-decoration: none;
@@ -203,6 +206,10 @@
       }
     }
 
+    &:focus {
+      box-shadow: $input-btn-focus-inside-box-shadow;
+    }
+
   }
 
   .icon {
@@ -230,6 +237,10 @@
       text-decoration: none;
       // align-items: center;
       width: 100%;
+
+      &:focus {
+        box-shadow: $input-btn-focus-inside-box-shadow;
+      }
     }
   }
 
@@ -242,28 +253,14 @@
   a {
     text-decoration: none;
     border-bottom: none;
-      // Hover state
-    @include hover-focus {
-      .icon {
-        @include icon-color($action-lighter);
-      }
-      svg {
-        fill: $action-lighter;
-      }
+    .icon {
+      @include icon-color($action);
     }
-
-    &:active,
-    &.active {
-      .icon {
-        @include icon-color($action-lighter);
-      }
-      svg {
-        fill: $action-lighter;
-      }
+    svg {
+      fill: $action;
     }
   }
   .icon {
-    @include icon-color($neutral-tertiary);
     &:before {
       height: 2.5rem;
       width: 2.5rem;
@@ -314,7 +311,8 @@
     }
 
     a.list-group-item-title {
-      @include hover-focus {
+      &:hover,
+      &:focus {
         background-color: transparent;
         color: $list-group-action-active-color;
       }
@@ -327,7 +325,8 @@
     color: $neutral-secondary;
     font-weight: $font-weight-normal;
 
-    @include hover-focus {
+    &:hover,
+    &:focus {
       background-color: transparent;
       cursor: pointer;
 
@@ -339,6 +338,11 @@
         color: $list-group-action-active-color;
       }
     }
+
+    &:focus {
+      box-shadow: $input-btn-focus-inside-box-shadow;
+    }
+
   }
 
   .list-group-thumb {
@@ -573,7 +577,8 @@
   }
 
   .list-group-item {
-    @include hover-focus {
+    &:hover,
+    &:focus {
       background-color: $neutral-underground-1;
 
       .list-group-icon {
diff --git a/source/css/scss/_main-navbar.scss b/source/css/scss/_main-navbar.scss
index 35e1cb949..f94b9dc02 100755
--- a/source/css/scss/_main-navbar.scss
+++ b/source/css/scss/_main-navbar.scss
@@ -27,17 +27,9 @@
     a,
     button,
     .btn {
-      &:focus {
-        box-shadow: $main-navbar-focus-box-shadow;
-      }
       &:not(:disabled):not(.disabled):active,
       &:not(:disabled):not(.disabled).active {
         background-image: none;
-        box-shadow: $main-navbar-focus-box-shadow;
-
-        &:focus {
-          box-shadow: $main-navbar-focus-box-shadow;
-        }
       }
     }
 
@@ -55,7 +47,8 @@
       display: inline-flex;
       padding: .5rem;
       margin: 0;
-      @include hover-focus {
+      &:hover,
+      &:focus {
         background-color: transparent;
       }
       svg {
@@ -70,11 +63,16 @@
       line-height: $line-height-md;
       font-weight: $font-weight-bold;
       align-items: center;
-      @include transition(color .15s ease-in-out);
     }
 
     a.navbar-brand {
-      @include hover-focus {
+      border-radius: $btn-border-radius-squared;
+      background-color: $white;
+      @include transition(color .15s ease-in-out, box-shadow .15s ease-in-out);
+
+      &:hover,
+      &:focus {
+        background-color: $white;
         color: $action;
       }
     }
@@ -123,6 +121,7 @@
     // Navbar buttons styles
     .navbar-btn {
       @include button-reset();
+      background-color: $white;
       display: inline-flex;
       align-items: center;
       font-weight: $btn-font-weight;
@@ -163,8 +162,10 @@
         }
       }
 
-      @include hover-focus {
+      &:hover,
+      &:focus {
         color: $action;
+        background-color: $white;
         .icon {
           @include icon-color($action);
         }
@@ -196,7 +197,8 @@
           fill: $white;
         }
 
-        @include hover-focus {
+        &:hover,
+        &:focus {
           background-color: $negative-dark;
         }
       }
@@ -208,7 +210,8 @@
         .icon {
           @include icon-color($negative-dark);
         }
-        @include hover-focus {
+        &:hover,
+        &:focus {
           .btn-label {
             color: $negative;
           }
@@ -258,7 +261,8 @@
         content: none;
       }
 
-      @include hover-focus {
+      &:hover,
+      &:focus {
         .user-avatar,
         .media-avatar {
           background-color: $action-darker;
@@ -304,6 +308,7 @@
 
       .navbar-btn {
         color: $white;
+        background-color: transparent;
         .icon {
           @include icon-color($white);
         }
@@ -312,7 +317,8 @@
           color: $white;
         }
 
-        @include hover-focus {
+        &:hover,
+        &:focus {
           color: $action-lighter;
           .icon {
             @include icon-color($action-lighter);
@@ -321,6 +327,10 @@
             color: $action-lighter;
           }
         }
+
+        &:focus {
+          box-shadow: $input-btn-reverse-focus-box-shadow;
+        }
       }
       .navbar-separator {
         &:after {
@@ -332,10 +342,21 @@
         line-height: $line-height-md;
         font-weight: $font-weight-bold;
         align-items: center;
+      }
+
+      a.navbar-brand {
+        background-color: transparent;
+        @include transition(color .15s ease-in-out, box-shadow .15s ease-in-out);
 
-        @include hover-focus {
+        &:hover,
+        &:focus {
+          background-color: transparent;
           color: $action-lighter;
         }
+
+        &:focus {
+          box-shadow: $input-btn-reverse-focus-box-shadow;
+        }
       }
 
       .navbar-sitename {
@@ -351,7 +372,8 @@
           background-color: $white;
         }
 
-        @include hover-focus {
+        &:hover,
+        &:focus {
           &::after {
             background-color: $action-lighter;
           }
@@ -433,9 +455,10 @@
           content: '';
           background-color: $neutral-tertiary;
         }
-        @include hover-focus {
+        &:hover,
+        &:focus {
           &::after {
-            background-color: $primary;
+            background-color: $action;
           }
         }
       }
@@ -446,14 +469,17 @@
 .navbar-lang-switcher {
   background-color: $neutral-primary;
   color: $white;
-  padding: 0;
+  padding: 0 2rem 0 0;
   height: $navbar-lang-height;
   position: relative;
   z-index: $zindex-fixed + 1;
   align-items: center;
   .btn-lang {
-    padding-top: .125rem;
-    padding-bottom: .125rem;
+    padding: 0;
+    border-radius: 0;
+    &:focus {
+      box-shadow: $input-btn-reverse-focus-box-shadow;
+    }
   }
   .not-translated {
     @include font-size($font-size-sm);
@@ -466,9 +492,6 @@
       margin-bottom: 0;
     }
   }
-  @include media-breakpoint-up(lg) {
-    padding: 0 1rem;
-  }
 }
 
 //
diff --git a/source/css/scss/_menu-item.scss b/source/css/scss/_menu-item.scss
index fd0b8ba87..d57dfefa4 100644
--- a/source/css/scss/_menu-item.scss
+++ b/source/css/scss/_menu-item.scss
@@ -116,7 +116,8 @@
       .menu-item-label {
         color: $neutral-secondary;
       }
-      @include hover-focus {
+      &:hover,
+      &:focus {
         background-color: transparent;
         z-index: 2;
         .icon {
@@ -127,6 +128,10 @@
         }
       }
 
+      &:focus {
+        box-shadow: $input-btn-focus-inside-box-shadow;
+      }
+
       &.active,
       &:active {
         background-color: $highlight-light;
@@ -376,6 +381,10 @@
         background-color: $action;
       }
     }
+
+    &:focus {
+      box-shadow: $input-btn-focus-inside-box-shadow;
+    }
   }
 
   .disabled {
diff --git a/source/css/scss/_messaging.scss b/source/css/scss/_messaging.scss
index 75a4b73a8..4cc076aee 100755
--- a/source/css/scss/_messaging.scss
+++ b/source/css/scss/_messaging.scss
@@ -113,6 +113,7 @@
 
   // Adjust close link position
   .close {
+    border-radius: $btn-border-radius-squared;
     margin: .5rem;
     padding: .5rem;
   }
@@ -239,6 +240,11 @@
   .close .icon {
     @include icon-color($white);
   }
+  .close {
+    &:focus {
+      box-shadow: $input-btn-reverse-focus-box-shadow;
+    }
+  }
 
   .message-bar-container {
     display: block;
@@ -251,11 +257,14 @@
     // Default link colors and underline, overrides in mixins
     a {
       color: $white;
-      @include hover-focus {
+      &:hover,
+      &:focus {
         color: $white;
         background-color: $black;
       }
-
+      &:focus {
+        box-shadow: $input-btn-reverse-focus-box-shadow;
+      }
       &:after {
         background-color: $white;
       }
@@ -318,16 +327,23 @@
       .close .icon {
         @include icon-color($neutral-primary);
       }
+      .close:focus {
+        box-shadow: $input-btn-focus-box-shadow;
+      }
       .message-bar-container {
         a {
           color: $neutral-primary;
           &:after {
             background-color: $neutral-primary;
           }
-          @include hover-focus {
+          &:hover,
+          &:focus {
             color: $neutral-primary;
             background-color: lighten($color-base, 10%);
           }
+          &:focus {
+            box-shadow: $input-btn-focus-box-shadow;
+          }
         }
       }
     }
@@ -340,11 +356,18 @@
       .close .icon {
         @include icon-color($white);
       }
+      .close:focus {
+        box-shadow: $input-btn-reverse-focus-box-shadow;
+      }
       .message-bar-container {
         a {
-          @include hover-focus {
+          &:hover,
+          &:focus {
             background-color: darken($color-base, 6%);
           }
+          &:focus {
+            box-shadow: $input-btn-reverse-focus-box-shadow;
+          }
         }
       }
     }
diff --git a/source/css/scss/_modal.scss b/source/css/scss/_modal.scss
index 6e07ad3ea..9319c93a7 100755
--- a/source/css/scss/_modal.scss
+++ b/source/css/scss/_modal.scss
@@ -11,7 +11,12 @@
   .modal-header {
     padding: 1rem;
     flex: 0 0 auto; // IE need this
+    .close,
     .btn-close {
+      padding: .4375rem;
+      border: $btn-border-width solid transparent;
+      border-radius: $btn-border-radius-squared;
+      margin: -.5rem -.5rem -.5rem auto;
       .icon {
         @include icon-color($action);
       }
@@ -23,16 +28,14 @@
         }
       }
       &:not(:disabled):not(.disabled) {
-        @include hover-focus {
-          opacity: 1;
-          .icon {
-            @include icon-color($action-darker);
-          }
-          svg {
-            path {
-              fill: $neutral-primary;
-            }
-          }
+        &:hover,
+        &:focus {
+          opacity: 1; // Fix what is herited from bootstrap
+          background-color: $highlight-light;
+        }
+        &:focus {
+          outline: 0;
+          box-shadow: $btn-focus-box-shadow;
         }
       }
     }
diff --git a/source/css/scss/_nav.scss b/source/css/scss/_nav.scss
index b3b499d70..a9348bde5 100755
--- a/source/css/scss/_nav.scss
+++ b/source/css/scss/_nav.scss
@@ -125,7 +125,7 @@ nav {
 
     &:focus {
       background-color: $neutral-ground;
-      box-shadow: $btn-focus-inset-box-shadow;
+      box-shadow: $input-btn-focus-inside-box-shadow;
     }
     // Disabled state lightens text
     &.disabled {
diff --git a/source/css/scss/_type.scss b/source/css/scss/_type.scss
index 68b6f9bdf..1f6968f84 100755
--- a/source/css/scss/_type.scss
+++ b/source/css/scss/_type.scss
@@ -156,6 +156,7 @@ a {
   &.link-sm {
     @include font-size($font-size-sm);
     line-height: $line-height-sm;
+    text-underline-offset: .1875em;
   }
 
   &.link-xs {
diff --git a/source/css/scss/_variables.scss b/source/css/scss/_variables.scss
index 5a315508d..10a4e9c24 100755
--- a/source/css/scss/_variables.scss
+++ b/source/css/scss/_variables.scss
@@ -346,7 +346,7 @@ $component-active-color:      $white;
 $component-active-bg:         $primary;
 
 $focus-color:                 $informative;
-$focus-reverse-color:         $informative-light;
+$focus-reverse-color:         $yellow;
 
 // generic variable box-shadow apply to card, popover, dropdown and modal
 $box-shadow:                  $shadow-strong;
@@ -454,11 +454,15 @@ $input-btn-font-family:       null;
 $input-btn-font-size:         $font-size-sm;
 $input-btn-line-height:       $line-height-sm; // 14/20
 
-$input-btn-focus-width:       .1875rem;
-$input-btn-focus-color:       rgba($focus-color, .5);
+$input-btn-focus-width:        .125rem;
+$input-btn-focus-color:         rgba($focus-color, .5);
 $input-btn-focus-reverse-color: rgba($focus-reverse-color, .3);
-$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color;
-$input-btn-reverse-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-reverse-color;
+
+// Custom focus box-shadows
+$input-btn-focus-box-shadow:                  0 0 0 .125rem $white, 0 0 0 .25rem $focus-color;
+$input-btn-focus-inside-box-shadow:           inset 0 0 0 .25rem $white, inset 0 0 0 .375rem $focus-color;
+$input-btn-reverse-focus-box-shadow:          0 0 0 .125rem #101215, 0 0 0 .25rem $focus-reverse-color;
+$input-btn-reverse-focus-inside-box-shadow:   inset 0 0 0 .25rem $white, inset 0 0 0 .375rem $focus-color;
 
 $input-btn-padding-y-sm:      .4375rem;
 $input-btn-padding-x-sm:      .4375rem;
@@ -499,7 +503,7 @@ $btn-font-weight:             $font-weight-bold;
 $btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
 $btn-focus-width:             $input-btn-focus-width;
 $btn-focus-box-shadow:        $input-btn-focus-box-shadow;
-$btn-focus-inset-box-shadow:  inset $input-btn-focus-box-shadow;
+$btn-focus-inside-box-shadow:  $input-btn-focus-inside-box-shadow;
 $btn-disabled-opacity:        .65;
 $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);
 
@@ -615,9 +619,14 @@ $custom-switch-indicator-handle:                  $white;
 $custom-switch-indicator-handle-disabled:         $neutral-underground-2;
 $custom-switch-indicator-checked-handle:          $action;
 
+$custom-select-padding-x:           $input-padding-x;
+$custom-select-disabled-color:      $neutral-secondary;
+
+$custom-select-focus-box-shadow:    $input-btn-focus-box-shadow;
+
 $custom-select-padding-x-sm:          $input-padding-x-sm;
 
-$custom-select-indicator-padding:     2.5625rem; // Extra padding to account for the presence of the background-image based indicator
+$custom-select-indicator-padding:     2rem; // Extra padding to account for the presence of the background-image based indicator
 $custom-select-indicator-padding-sm:  1.5rem;
 $custom-select-bg-size-sm:            16px 16px;
 $custom-select-bg-size:               24px 24px; // In pixels because image dimensions
@@ -720,7 +729,7 @@ $pagination-bg:                     $white;
 $pagination-border-width:           1px;
 $pagination-border-color:           $neutral-stroke;
 
-$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
+$pagination-focus-box-shadow:       $input-btn-focus-inside-box-shadow;
 $pagination-focus-outline:          0;
 
 $pagination-hover-color:            $primary;
diff --git a/source/css/scss/mixins/_buttons.scss b/source/css/scss/mixins/_buttons.scss
index 0e2b0b326..d1f8b104a 100755
--- a/source/css/scss/mixins/_buttons.scss
+++ b/source/css/scss/mixins/_buttons.scss
@@ -72,25 +72,6 @@
     }
   }
 
-  @if $box-shadow-color {
-    // Scoped dialog-box-shadow variable definition
-    $custom-box-shadow: 0 0 0 $input-btn-focus-width rgba($box-shadow-color, .3);
-
-    &:focus,
-    &.focus {
-      box-shadow: $custom-box-shadow;
-    }
-
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active {
-
-      &:focus {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: $custom-box-shadow;
-      }
-    }
-  }
-
 }
 
 // Button sizes
diff --git a/source/css/scss/mixins/_forms.scss b/source/css/scss/mixins/_forms.scss
index 244214767..431cef12a 100644
--- a/source/css/scss/mixins/_forms.scss
+++ b/source/css/scss/mixins/_forms.scss
@@ -105,7 +105,6 @@
 
       &:focus {
         border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
       }
       // form-group avec un custom-control invalid
       :has(.custom-control-input:invalid) {
@@ -170,7 +169,6 @@
 
       &:focus {
         border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
       }
     }
   }
@@ -230,7 +228,6 @@
       &:focus {
         ~ .custom-file-label {
           border-color: $color;
-          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
         }
       }
     }
diff --git a/source/css/scss/utilities/_text.scss b/source/css/scss/utilities/_text.scss
index 065d4fc80..c9f6e9c99 100644
--- a/source/css/scss/utilities/_text.scss
+++ b/source/css/scss/utilities/_text.scss
@@ -7,7 +7,7 @@
 // Define the default link before the mixin
 a {
   color: $primary;
-  text-underline-offset: .3125em;
+  text-underline-offset: .25em;
   font-weight: $font-weight-bold;
   @include hover-focus {
     color: $primary;
@@ -190,9 +190,13 @@ a {
 
 a.text-light,
 a.text-white {
-  @include hover-focus {
+  &:hover,
+  &:focus {
     color: $white !important;
-    background-color: transparent;
+    background-color: $overlay-light-reversed;
+  }
+  &:focus {
+    box-shadow: $input-btn-reverse-focus-box-shadow;
   }
   // Handle specific cases here...
   &:after {
@@ -203,12 +207,6 @@ a.text-white {
   }
 }
 
-a.text-white {
-  @include hover-focus {
-    background-color: $overlay-light-reversed;
-  }
-}
-
 a.text-muted {
   border-bottom: none;
   text-decoration: none;