diff --git a/site/docs/4.4/examples/orange-grid/index-fluid.html b/site/docs/4.4/examples/orange-grid/index-fluid.html
index e3ac4656a4..50da28b7d4 100644
--- a/site/docs/4.4/examples/orange-grid/index-fluid.html
+++ b/site/docs/4.4/examples/orange-grid/index-fluid.html
@@ -4,102 +4,48 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Orange grid sample</title>
-
-        <link rel="stylesheet" href="../../dist/css/boosted.css" />
+    <link href="../../dist/css/orangeHelvetica.min.css" rel="stylesheet">
+    <link href="../../dist/css/boosted.min.css" rel="stylesheet"/>
     <link href="styles.css" rel="stylesheet">
   </head>
 
   <body>
-
-    <div class="skiplinks" >
-      <div class="skiplinks-section sr-only">
-        <ul>
-          <li id="cdu-skiplink">
-          </li>
-          <li>
-            <a href="#mainNav" class="skiplinks-trigger">main navigation</a>
-          </li>
-          <li>
-            <a href="#content" class="skiplinks-trigger">content</a>
-          </li>
-        </ul>
+    <main role="main" id="content" class="container-fluid">
+      <div class="row">
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
       </div>
-    </div>
-
-
-  <main role="main" id="content" class="container-fluid">
-    <div class="row">
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-    </div>
-    <div class="row">
-      <div class="col-12"><div>12 cols alltime</div></div>
-      <div class="col-6"><div>6 cols alltime</div></div>
-      <div class="col-6"><div>6 cols alltime</div></div>
-      <div class="col-4"><div>4 cols alltime</div></div>
-      <div class="col-4"><div>4 cols alltime</div></div>
-      <div class="col-4"><div>4 cols alltime</div></div>
-      <div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
-      <div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
-      <div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
-      <div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
-      <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
-      <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
-      <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
-      <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
-      <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
-      <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
-    </div>
-  </main><!--/.container-fluid-->
-
-
-    <!-- Boosted core JavaScript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="../../assets/js/vendor/jquery-slim.min.js"></script>
-    <script src="../../assets/js/vendor/popper.min.js"></script>
-    <!-- Include all compiled plugins bootstrap, bootstrap accessibility plugin and boosted specific components (below), or include individual files as needed -->
-    <script src="../../dist/js/boosted.js"></script>
-
-  <script>
-    // Surcharge des valeurs du script de la toolbar
-    accessibilitytoolbar_custom={
-      idLinkModeContainer:"id-for-cdu-link",
-      cssLinkModeClassName:"nav-item-cdu",
-      idSkipLinkIdLinkMode:"cdu-skiplink",
-      cssSkipLinkClassName: "skiplinks-trigger",
-      callback:skiplinksAfterLoad
-    };
-
-
-    $(".skiplinks-trigger").focus(function(){
-      $(".skiplinks-section").addClass("skiplinks-show").removeClass("sr-only")
-    });
-    $(".skiplinks-trigger").blur(function(){
-      $(".skiplinks-section").removeClass("skiplinks-show").addClass("sr-only")
-    });
-
-    function skiplinksAfterLoad(){
-      $(".skiplinks-trigger").focus(function(){
-        $(".skiplinks-section").addClass("skiplinks-show").removeClass("sr-only")
-      });
-      $(".skiplinks-trigger").blur(function(){
-        $(".skiplinks-section").removeClass("skiplinks-show").addClass("sr-only")
-      });
-    }
-
-  </script>
+      <div class="row">
+        <div class="col-12"><div>12 cols all time</div></div>
+        <div class="col-6"><div>6 cols all time</div></div>
+        <div class="col-6"><div>6 cols all time</div></div>
+        <div class="col-4"><div>4 cols all time</div></div>
+        <div class="col-4"><div>4 cols all time</div></div>
+        <div class="col-4"><div>4 cols all time</div></div>
+        <div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
+        <div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
+        <div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
+        <div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
+        <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
+        <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
+        <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
+        <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
+        <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
+        <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
+      </div>
+    </main><!--/.container-fluid-->
 
+    <script src="https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js" integrity="sha256-sz9/xSAM6mrw3l6hJWDgc7nEbzUeO5e8CXwYoECOEKI=" crossorigin="anonymous"></script>
   </body>
 </html>
 
diff --git a/site/docs/4.4/examples/orange-grid/index.html b/site/docs/4.4/examples/orange-grid/index.html
index 193a7b0614..d6995908e1 100644
--- a/site/docs/4.4/examples/orange-grid/index.html
+++ b/site/docs/4.4/examples/orange-grid/index.html
@@ -4,104 +4,47 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Orange grid sample</title>
-
-    <link href="../../dist/css/orangeHelvetica.css" rel="stylesheet">
-    <link href="../../dist/css/orangeIcons.css" rel="stylesheet">
-        <link rel="stylesheet" href="../../dist/css/boosted.css" />
+    <link href="../../dist/css/orangeHelvetica.min.css" rel="stylesheet">
+    <link href="../../dist/css/boosted.min.css" rel="stylesheet"/>
     <link href="styles.css" rel="stylesheet">
   </head>
-
   <body>
-
-    <div class="skiplinks" >
-      <div class="skiplinks-section sr-only">
-        <ul>
-          <li id="cdu-skiplink">
-          </li>
-          <li>
-            <a href="#mainNav" class="skiplinks-trigger">main navigation</a>
-          </li>
-          <li>
-            <a href="#content" class="skiplinks-trigger">content</a>
-          </li>
-        </ul>
+    <main role="main" id="content" class="container">
+      <div class="row">
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
+        <div class="col-1"><div>1 col</div></div>
       </div>
-    </div>
-
-
-  <main role="main" id="content" class="container">
-    <div class="row">
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-      <div class="col-1"><div>1 col</div></div>
-    </div>
-    <div class="row">
-      <div class="col-12"><div>12 cols alltime</div></div>
-      <div class="col-6"><div>6 cols alltime</div></div>
-      <div class="col-6"><div>6 cols alltime</div></div>
-      <div class="col-4"><div>4 cols alltime</div></div>
-      <div class="col-4"><div>4 cols alltime</div></div>
-      <div class="col-4"><div>4 cols alltime</div></div>
-      <div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
-      <div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
-      <div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
-      <div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
-      <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
-      <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
-      <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
-      <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
-      <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
-      <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
-    </div>
-  </main><!--/.container-->
-
-
-    <!-- Boosted core JavaScript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="../../assets/js/vendor/jquery-slim.min.js"></script>
-    <script src="../../assets/js/vendor/popper.min.js"></script>
-    <!-- Include all compiled plugins bootstrap, bootstrap accessibility plugin and boosted specific components (below), or include individual files as needed -->
-    <script src="../../dist/js/boosted.js"></script>
-
-  <script>
-    // Surcharge des valeurs du script de la toolbar
-    accessibilitytoolbar_custom={
-      idLinkModeContainer:"id-for-cdu-link",
-      cssLinkModeClassName:"nav-item-cdu",
-      idSkipLinkIdLinkMode:"cdu-skiplink",
-      cssSkipLinkClassName: "skiplinks-trigger",
-      callback:skiplinksAfterLoad
-    };
-
-
-    $(".skiplinks-trigger").focus(function(){
-      $(".skiplinks-section").addClass("skiplinks-show").removeClass("sr-only")
-    });
-    $(".skiplinks-trigger").blur(function(){
-      $(".skiplinks-section").removeClass("skiplinks-show").addClass("sr-only")
-    });
-
-    function skiplinksAfterLoad(){
-      $(".skiplinks-trigger").focus(function(){
-        $(".skiplinks-section").addClass("skiplinks-show").removeClass("sr-only")
-      });
-      $(".skiplinks-trigger").blur(function(){
-        $(".skiplinks-section").removeClass("skiplinks-show").addClass("sr-only")
-      });
-    }
-
-  </script>
+      <div class="row">
+        <div class="col-12"><div>12 cols all time</div></div>
+        <div class="col-6"><div>6 cols all time</div></div>
+        <div class="col-6"><div>6 cols all time</div></div>
+        <div class="col-4"><div>4 cols all time</div></div>
+        <div class="col-4"><div>4 cols all time</div></div>
+        <div class="col-4"><div>4 cols all time</div></div>
+        <div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
+        <div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
+        <div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
+        <div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
+        <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
+        <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
+        <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
+        <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
+        <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
+        <div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
+      </div>
+    </main><!--/.container-->
 
+    <script src="https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js" integrity="sha256-sz9/xSAM6mrw3l6hJWDgc7nEbzUeO5e8CXwYoECOEKI=" crossorigin="anonymous"></script>
   </body>
 </html>
 
diff --git a/site/docs/4.4/examples/orange-grid/styles.css b/site/docs/4.4/examples/orange-grid/styles.css
index 3ce17451f1..638c815b16 100644
--- a/site/docs/4.4/examples/orange-grid/styles.css
+++ b/site/docs/4.4/examples/orange-grid/styles.css
@@ -1,18 +1,11 @@
-.container{
-  background-color: #f00;
+[class*="col-"],
+[class*="col-"] > div {
+  min-height: calc((100vh - 12 * .625rem) / 6);
+  background-color: rgba(75, 180, 230, .5);
 }
 
-.row{
-  background-color: #00f;
-}
-
-[class*="col-"]{
-  min-height: 100px;
-  background-color: #0f0;
-}
-
-[class*="col-"] > div{
-  min-height: 100px;
-  background-color: #ddd;
-  border: 1px solid #f00;
+[class*="col-"] > div {
+  margin: .625rem 0;
+  line-height: calc((100vh - 12 * .625rem) / 6);
+  text-align: center;
 }
