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

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

@@ -57,9 +57,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 >}}
@@ -149,6 +149,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.3/components/buttons.md

@@ -319,7 +319,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.3/components/collapse.md

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

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

@@ -509,7 +509,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">
@@ -803,6 +803,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.3/components/list-group.md

@@ -168,6 +168,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 [issue #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.3/components/navs-tabs.md

@@ -22,7 +22,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 +67,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 +116,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">
@@ -254,6 +275,12 @@ Nav tabs light is nested in a tab for adding a level of depth in information org
 
 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, nav tabs and `<a>` html tags should not look like buttons.
+
+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">
@@ -316,6 +343,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, nav tabs and `<a>` html tags should not look like buttons.
+
+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>

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

@@ -164,6 +164,12 @@ Alternatively, you can use the new combined [color and background]({{< docsref "
 
 You can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s.
 
+{{< 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-stacked">
   <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">

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

@@ -62,7 +62,7 @@ Hover over the links below to see 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.
+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 >}}
 
 You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.

site/content/docs/5.3/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>
@@ -273,6 +279,14 @@ Visually, these checkbox toggle buttons are identical to the [button plugin togg
 
 <!-- Boosted mod: our radio toggle buttons need a `.btn-group[role="group"]` wrapper. -->
 
+{{< ods-incompatibility-alert >}}
+These **radio toggle button** and **radio toggle button with icon** variants should not be used because they do not respect the Orange Design System specifications.
+
+From the Orange Design System point of view a radio buttons should be represented like in our Boosted [Radios]({{< docsref "/forms/checks-radios#radios" >}}) components.
+
+You can also refer to [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 >}}
+
 Boosted requires to group its radio toggle buttons in a [button group]({{< docsref "/components/button-group" >}}) to display properly.
 
 {{< example >}}

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

@@ -53,6 +53,12 @@ Form text below inputs can be styled with `.form-text`. If a block-level element
 
 Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class.
 
+{{< ods-incompatibility-alert >}}
+This form version, with an **horizontal layout** (i.e. labels not above the input fields), should not be used because it does 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="row g-3 align-items-center">
   <div class="col-auto">
@@ -90,6 +96,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 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="mb-3 row">
     <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>

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

@@ -73,6 +73,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** because of its height, 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>
@@ -278,6 +284,13 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 ### Custom select
 
+{{< ods-incompatibility-alert >}}
+These **first 3** form variants should not be used because they do not respect the Orange Design System specifications. The **first 2** 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>
@@ -322,6 +335,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>