docs: add design callouts in all the documentation when incompatibility with ODS

site/content/docs/5.2/components/button-group.md

@@ -61,9 +61,9 @@ Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples"
 Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/checks-radios" >}}) into a seamless looking button group.
 
 {{< ods-incompatibility-alert >}}
-This **checkbox** variant should not be used because it does not respect the Orange Design System specifications.
+These **checkbox** and **radio button** variants should not be used because they do not respect the Orange Design System specifications.
 
-From the Orange Design System point of view, checkboxes should be represented like in our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}) component. You can also refer to the [Checkbox](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) guidelines on the Orange Design System website.
+From the Orange Design System point of view, checkboxes and radio buttons should respectively be represented like in our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}) or [Radios]({{< docsref "/forms/checks-radios#radios" >}}) components. You can also refer to the [Checkbox](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) and [Radio button](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789)  guidelines on the Orange Design System website.
 {{< /ods-incompatibility-alert >}}
 
 {{< example >}}
@@ -153,6 +153,12 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
 
 Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
 
+{{< ods-incompatibility-alert >}}
+The **first size variant (50px height) and the last one (30px height)** should not be used because they do not respect the Orange Design System specifications.
+
+Please refer to the [Toggle buttons](https://system.design.orange.com/0c1af118d/p/59c349-toggle-buttons/b/91bf23) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
   <button type="button" class="btn btn-secondary">Left</button>

site/content/docs/5.2/components/buttons.md

@@ -307,7 +307,7 @@ Additional utilities can be used to adjust the alignment of buttons when horizon
 The button plugin allows you to create simple on/off toggle buttons.
 
 {{< ods-incompatibility-alert >}}
-These variants with only **one toggle button** should not be used because they do not respect the Orange Design System specifications. From the Orange Design System point of view and for usability reasons, a toggle button should not be used alone.
+These variants with only **one toggle button instead of a group of buttons** should not be used because they do not respect the Orange Design System specifications. From the Orange Design System point of view and for usability reasons, [Toggle buttons](https://system.design.orange.com/0c1af118d/p/59c349-toggle-buttons/b/91bf23) should not be used alone.
 
 Instead, consider using our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}), [Radios]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}) components.
 {{< /ods-incompatibility-alert >}}

site/content/docs/5.2/components/collapse.md

@@ -20,6 +20,7 @@ Triggering a collapse behavior from a button component should not be used becaus
 {{< partial "callout-info-prefersreducedmotion.md" >}}
 {{< /callout >}}
 
+
 ## Example
 
 Click the buttons below to show and hide another element via class changes:

site/content/docs/5.2/components/dropdowns.md

@@ -146,6 +146,12 @@ This small variant should not be used because it does not respect the Orange Des
 Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b9b-dropdown/b/04c480) guidelines on the Orange Design System website.
 {{< /ods-incompatibility-alert >}}
 
+{{< ods-incompatibility-alert >}}
+This small variant should not be used because it does not respect the Orange Design System specifications.
+
+Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b9b-dropdown/b/04c480) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 <div class="bd-example">
   <div class="btn-group">
     <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -510,7 +516,7 @@ You can use `<a>` or `<button>` elements as dropdown items.
 </div>
 {{< /example >}}
 
-You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities.
+You can also create non-interactive dropdown items with `.dropdown-item-text`.
 
 {{< example >}}
 <ul class="dropdown-menu">
@@ -804,6 +810,12 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
 
 Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdown.
 
+{{< ods-incompatibility-alert >}}
+This variant with a `data-bs-offset` attribute having values different than `"0,0"` should not be used because it does not respect the Orange Design System specifications.
+
+Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b9b-dropdown/b/04c480) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="d-flex">
   <div class="dropdown me-1">

site/content/docs/5.2/components/list-group.md

@@ -164,6 +164,12 @@ This variant, which is just an **example illustrating the use of the layout util
 
 Use contextual classes to style list items with a stateful background and color.
 
+{{< ods-incompatibility-alert >}}
+This variant should not be used as is because its rendering does not respect the Orange Design System specifications.
+However, please note that the HTML markup remains valid and will be used as is when the [pull request #1452](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/1452) will be closed.
+
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <ul class="list-group">
   <li class="list-group-item">A simple default list group item</li>

site/content/docs/5.2/components/navs-tabs.md

@@ -12,6 +12,12 @@ toc: true
 
 ## Base nav
 
+{{< ods-incompatibility-alert >}}
+This component variant should not be used because it does not respect the Orange Design System specifications.
+
+Instead, please consider using our Boosted [Tabs light]({{< docsref "/components/navs-tabs#tabs-light" >}}) variant. You can also refer to [Navigation](https://system.design.orange.com/0c1af118d/p/44331c-navigation/b/9105e6) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 Navigation available in Boosted share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.
 
 The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
@@ -22,7 +28,14 @@ Note that the `.nav-link` can be used out of any context and combined with our [
 The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
 
 To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for current page, or `true` for the current item in a set.
+
 {{< /callout >}}
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This component variant should not be used because it does not respect the Orange Design System specifications.
+
+Instead, please consider using our Boosted [Tabs light]({{< docsref "/components/navs-tabs#tabs-light" >}}) variant. You can also refer to [Navigation](https://system.design.orange.com/0c1af118d/p/44331c-navigation/b/9105e6) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
 
 {{< example >}}
 <ul class="nav">
@@ -60,6 +73,13 @@ Change the style of `.nav`s component with modifiers and utilities. Mix and matc
 
 Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/layout/grid#horizontal-alignment" >}}). By default, navs are left-aligned, but you can easily change them to center or right aligned.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+These **centered** and **right aligned** component variants should not be used because they do not respect the Orange Design System specifications. Indeed, nav items should be left aligned.
+
+Instead, please consider using our Boosted [Tabs light]({{< docsref "/components/navs-tabs#tabs-light" >}}) variant. You can also refer to [Navigation](https://system.design.orange.com/0c1af118d/p/44331c-navigation/b/9105e6) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 Centered with `.justify-content-center`:
 
 {{< example >}}
@@ -102,6 +122,13 @@ Right-aligned with `.justify-content-end`:
 
 Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+These **vertical** component variants should not be used because they do not respect the Orange Design System specifications. Indeed, nav items should be displayed horizontally.
+
+Instead, please consider using our Boosted [Tabs light]({{< docsref "/components/navs-tabs#tabs-light" >}}) variant. You can also refer to [Navigation](https://system.design.orange.com/0c1af118d/p/44331c-navigation/b/9105e6) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <ul class="nav flex-column">
   <li class="nav-item">
@@ -255,6 +282,12 @@ This variant should not be used because it is a button component in the Orange D
 
 Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
 
+{{< ods-incompatibility-alert >}}
+These **link** variants, which are just **examples illustrating the use of the fill and justify utilities**, should not be used because they do not respect the Orange Design System specifications. Indeed, they should be `<button>` components and not `<li><a></a></li>` components.
+
+Instead, please consider using our Boosted [Tabs light]({{< docsref "/components/navs-tabs#tabs-light" >}}) variant. You can also refer to [Navigation](https://system.design.orange.com/0c1af118d/p/44331c-navigation/b/9105e6) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <ul class="nav nav-pills nav-fill">
   <li class="nav-item">
@@ -317,6 +350,12 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation.
 
 If you need responsive nav variations, consider using a series of [flexbox utilities]({{< docsref "/utilities/flex" >}}). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
 
+{{< ods-incompatibility-alert >}}
+This **link** variant, which is just an **example illustrating the use of the flexbox utilities**, should not be used because it does not respect the Orange Design System specifications. Indeed, they should be `<button>` components and not `<li><a></a></li>` components.
+
+Instead, please consider using our Boosted [Tabs light]({{< docsref "/components/navs-tabs#tabs-light" >}}) variant. You can also refer to [Navigation](https://system.design.orange.com/0c1af118d/p/44331c-navigation/b/9105e6) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <nav class="nav nav-pills flex-column flex-sm-row">
   <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
@@ -338,6 +377,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 
 ### Tabs with dropdowns
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This component variant with a **dropdown menu not placed at the very end of the line** should not be used because it does not respect the Orange Design System specifications.
+
+Please refer to [Navigation](https://system.design.orange.com/0c1af118d/p/44331c-navigation/b/9105e6) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <ul class="nav nav-tabs">
   <li class="nav-item">

site/content/docs/5.2/components/progress.md

@@ -122,6 +122,12 @@ Please refer to the [Progress indicators](https://system.design.orange.com/0c1af
 
 Include multiple progress bars in a progress component if you need.
 
+{{< ods-incompatibility-alert >}}
+This variant should not be used because it does not respect the Orange Design System specifications.
+
+Please refer to the [Progress indicators](https://system.design.orange.com/0c1af118d/p/45093c-progress-indicators/b/2875f1) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="progress">
   <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>

site/content/docs/5.2/components/tooltips.md

@@ -58,6 +58,12 @@ Hover over the links below to see tooltips:
 
 ### Custom tooltips
 
+{{< ods-incompatibility-alert >}}
+This **customized** variant should not be used because it does not respect the Orange Design System specifications. More generally, customizing tooltip CSS might lead to mismatch the Orange Design System.
+
+Please refer to the [Tooltip](https://system.design.orange.com/0c1af118d/p/932946-tooltip/b/417f3e) guidelines  on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< added-in "5.2.0" >}}
 
 {{< ods-incompatibility-alert >}}

site/content/docs/5.2/forms/checks-radios.md

@@ -250,6 +250,12 @@ Create button-like checkboxes and radio buttons by using `.btn` styles rather th
 
 ### Checkbox toggle buttons
 
+{{< ods-incompatibility-alert >}}
+These **checkbox toggle button** variants should not be used because they do not respect the Orange Design System specifications. Indeed, from the Orange Design System point of view a checkbox should always look like a checkbox component.
+
+Instead, consider using our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}), [Radios]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}) components.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
 <label class="btn btn-primary" for="btn-check">Single toggle</label>

site/content/docs/5.2/forms/form-control.md

@@ -52,6 +52,13 @@ Add the `readonly` boolean attribute on an input to prevent modification of the
 
 If you want to have `<input readonly>` elements in your form styled as plain text, replace `.form-control` with `.form-control-plaintext` to remove the default form field styling and preserve the correct `margin` and `padding`.
 
+{{< ods-incompatibility-alert >}}
+This form variant with an **horizontal layout** (i.e. labels not above the input fields) should not be used because it does no respect the Orange Design System specifications.
+
+Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) guidelines and to the [Pages](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) form examples on the Orange Design System website.
+
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
   <div class="mb-3 row">
     <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>

site/content/docs/5.2/forms/input-group.md

@@ -70,6 +70,12 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
 
 **Sizing on the individual input group elements isn't supported.**
 
+{{< ods-incompatibility-alert >}}
+These 3 form variants, with an **horizontal layout** (i.e. labels not above the input fields), and the **small** one with a height of 28px, should not be used because they do not respect the Orange Design System specifications.
+
+Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) guidelines and to the [Pages](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) form examples on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="input-group input-group-sm mb-3">
   <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
@@ -275,6 +281,13 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 ### Custom select
 
+{{< ods-incompatibility-alert >}}
+These **3 first** form variants should not be used because they do not respect the Orange Design System specifications. The **2 first** form variants should have a vertical layout (i.e., having their label above the input field. The **third** form variant should be split in 2 elements (a button and a dropdown)  which should be presented in a more logical way : the dropdown first and then the button.
+
+Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) guidelines and to the [Pages](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) form examples on  the Orange Design System website.
+
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="input-group mb-3">
   <label class="input-group-text" for="inputGroupSelect01">Options</label>
@@ -319,6 +332,12 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 ### Custom file input
 
+{{< ods-incompatibility-alert >}}
+These form variants should not be used because they do not respect the Orange Design System specifications.
+
+Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459) guidelines and to the [Pages](https://system.design.orange.com/0c1af118d/p/20500e-form/b/16bb53) form examples on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="input-group mb-3">
   <label for="inputGroupFile01" class="input-group-text">Upload</label>