addition of <details></details> + more content

content/CTG_50_docs/CTG_25_front/LSN_10_theme/theme.md

@@ -17,19 +17,35 @@ This tool allows you to customize your instances design globally, giving you con
 
 **Example**: here are few example already created and available in the default Simplicité's solution.
 
-![](theme-admin-overview.png)
 * **ThemeAdmin**: main administrator theme created with `Dark Base`, used mainly by Simplicité's administrator or *designer users*.
+<details>
+<summary>ThemeAdmin Overview</summary>
+
+![](theme-admin-overview.png)
+</details>
 
-![](theme-design-overview.png)
 * **ThemeDesign**: theme made up from `Light Base` this theme is the equivalent of the *ThemeAdmin* for users that would prefer light mode.
+<details>
+<summary>ThemeDesign Overview</summary>
+
+![](theme-design-overview.png)
+</details>
 
-![](theme-etat-overview.png)
 * **ThemeEtat**: this theme is created based on the *DSFR* design norms from & for french government. It is applied to there solutions in order to follow specific rules of contrasts and spacings.
+<details>
+<summary>ThemeEtat Overview</summary>
+
+![](theme-etat-overview.png)
+</details>
 
 > 2 new themes (Dark & Light) are coming, matching the Simplicité's new look & identity !
 
+<details>
+<summary>"Mazette" Themes Overview</summary>
+
 ![](theme-mazettelight-overview.png)
 ![](theme-mazettedark-overview.png)
+</details>
 
 ### Theme Creation
 
@@ -69,36 +85,60 @@ getting back to the tool itself, it is divided in *three parts*, each hosting an
 
 The Theme Editor’s Preview Section displays a *live preview* of your themes and the styles you are currently applying. It allows you to instantly see the results of your design. You can navigate through *Simplicité’s interface elements* using the tabs menu, enabling you to explore all contexts and situations with your custom styles applied.
 
-![](theme-editor-preview-home.png)
 * **Home**: presents the main shared elements across Simplicité’s UI, including the header and menu. The menu showcases various states and hierarchy cases, such as sub-menus and active domains.
+<details>
+<summary>Home Preview</summary>
+
+![](theme-editor-preview-home.png)
+</details>
 
-![](theme-editor-preview-buttons.png)
 * **Buttons**: unique as it combines both elements and their style options. It displays all button types available in Simplicité and allows you to customize the following properties; `background-color`, `text-color` or `icon-color`, `border-radius` and `border-width`. The button types are:
 1 - ***Primary:*** represent main actions shared across various contexts and interfaces.
 2 - ***Secondary:*** represent secondary or less critical actions with text labels.
 3 - ***Action:*** specific to the current object or context.
 4 - ***Transition:*** used for state-switching handlers for business objects or fields.
 5 - ***Icon:*** represent actions using icons instead of text.
+<details>
+<summary>Buttons Preview</summary>
+
+![](theme-editor-preview-buttons.png)
+</details>
 
-![](theme-editor-preview-panels.png)
 * **Panels**: contains core UI elements that structure Simplicité’s interface:
 1 - ***Panels:*** Found primarily in the `WORK` section of the UI, these display the content of selected menus or objects.
 2 - ***Sub-Panels:*** nest within Panels, typically containing *fields* for displayed objects.
 3 - ***Tabs:*** Organize fields and are available in four layouts: *Left*, *Right*, *Top*, and *Bottom*. These layouts determine the position of tab navigation items.
+<details>
+<summary>Panels Preview</summary>
+
+![](theme-editor-preview-panels.png)
+</details>
 
-![](theme-editor-preview-form.png)
 * **Form**: essential components in Simplicité’s UI. They combine Panels, *Sub-Panels*, and *Tabs* to organize `fields and inputs. The types of customizable fields include:
 1 - ***Field:*** casual element for text inputs within objects' forms.
 2 - ***Readonly:*** non-editable fields displaying static information.
 3 - ***References:*** editable link to other objects or data.
+<details>
+<summary>Form Preview</summary>
+
+![](theme-editor-preview-form.png)
+</details>
 
 Other input types, such as radio buttons, dropdown menus, or code editors, are not customizable in the Theme Editor. However, they adapt their styles based on the selected `base theme`.
 
-![](theme-editor-preview-list.png)
 * **List**: core element in Simplicité, appearing at various levels of the UI. They display rows of data in table format and can be customized for style consistency.
+<details>
+<summary>List Preview</summary>
+
+![](theme-editor-preview-list.png)
+</details>
 
-![](theme-editor-preview-dialog.png)
 * **Dialog**: pop-up interfaces used for confirmations, alerts, or additional inputs. They can be styled to align with the overall theme. Similar look to panels and sub-panel, but are meant to contain easily understandable contents with clear actions at hand.
+<details>
+<summary>Dialog Preview</summary>
+
+![](theme-editor-preview-dialog.png)
+</details>
 
 * **Addons**: provides customization options for external plugins or integrations, ensuring a cohesive design across additional functionalities. This is the `addon.less` file mentionned above
 

content/CTG_50_docs/CTG_25_front/LSN_20_styles/styles.md

@@ -17,14 +17,21 @@ Leaner CSS (Less), is a dynamic preprocessor style sheet language that extends t
 ### Key Features
 
 *Variables:* Store reusable values for colors, fonts or dimensions:
+<details>
+<summary>Code Snippet<summary>
+
 ```less
 @primary-color: #3498db;
 body {
     color: @primary-color;
 }
 ```
+</details>
 
 *Nesting:* Write styles in a structured & hierarchical way. Allowing to specify depending on contexts when it's needed. Below are shown two ways to use nesting, and shows a use case where items with same class have different styles depending on their parent:
+<details>
+<summary>Code Snippet<summary>
+
 ```less
 .container {
     .header {
@@ -37,8 +44,12 @@ body {
     }
 }
 ```
+</details>
 
 *Interactions Nesting:* Same way as nesting works for children elements or contexts, yo ucan use it to dynamically handle different type of interactions for your elements:
+<details>
+<summary>Code Snippet<summary>
+
 ```less
 body {
     .container {
@@ -56,8 +67,12 @@ body {
     }
 }
 ```
+</details>
 
 *Mixins:* Define reusable style blocks for consistency:
+<details>
+<summary>Code Snippet<summary>
+
 ```less
 .rounded-corners(@radius: 0.5rem) {
     border-radius: @radius;
@@ -66,14 +81,19 @@ div {
     .rounded-corners(1rem);
 }
 ```
+</details>
 
 *Functions:* Perform calculations and color operations directly in your styles:
+<details>
+<summary>Code Snippet<summary>
+
 ```less
 @primary-color: #3498db;
 body {
     color: darken(@primary-color, 16%);
 }
 ```
+</details>
 
 Combining all these features can allow you to go very far in the customization of your UI, but the use of the *addon.less* file to add more specificities should be limited to not create too much of less programming for your devs.
 

content/CTG_50_docs/CTG_25_front/LSN_30_javascript-dev/javascript-dev.md

@@ -140,6 +140,8 @@ products.search(function(){
 }
 ```
 
+
+
 ## External Objects (external pages)
 
 Another slightly different case of javascript development within Simplicité can be the implementation of **External Object** being used as *external pages* (so of type `com.simplicite.webapp.web.WebPageExternalObject`), furtherly explored in the [External Pages](https://docs.simplicite.io/lesson/docs/front/external-pages) lesson.

content/CTG_50_docs/CTG_25_front/LSN_35_lib-ajax/lib-ajax.md

@@ -30,21 +30,19 @@ The Controller is the central orchestrator of the Simplicité solution, managing
 
 Simplicité allows you to also communicate only with specific parts of it --some like `$ui`, `$app` or `$view` have been quickly explained before-- but there are other that are important to be aware of in order to enhance your capacities with Simplicité's development.
 
-* [`$ui`](https://platform.simplicite.io/6.1/jsdoc/global.html#$ui) represents the **UI Singleton** of type `Simplicite.UI.Engine`, it basically is the *Main UI Controller* with an abstract view to display components.
+* [`$ui`](https://platform.simplicite.io/6.1/jsdoc/global.html#$ui) represents the **UI Singleton** --of type `Simplicite.UI.Engine`-- that basically is the *Main UI Controller* with an abstract view to display components.
 
-* [`$app`](https://platform.simplicite.io/6.1/jsdoc/global.html#$app) represents the **Ajax Service** of type `Simplicite.Application`, and behaves like the *Main Model* for your current Simplicité instance/session.
+* [`$app`](https://platform.simplicite.io/6.1/jsdoc/global.html#$app) represents the **Ajax Service** --of type `Simplicite.Application`-- that behaves like the *Main Model* for your current Simplicité instance/session.
 
-* [`$view`](https://platform.simplicite.io/6.1/jsdoc/global.html#$view) represents the **View Engine** of type `Simplicite.UI.View`, it is the *Main View* that must be loaded by the *Model* in order to access and use display controls. It implements the UI interfaces, and interacts with the *Controller* to access data.
+* [`$view`](https://platform.simplicite.io/6.1/jsdoc/global.html#$view) represents the **View Engine** --of type `Simplicite.UI.View`-- which is the *Main View* that must be loaded by the *Model* in order to access and use display controls. It implements the UI interfaces, and interacts with the *Controller* to access data.
 
-* [`$T`](https://platform.simplicite.io/6.1/jsdoc/global.html#$t)
+* [`$grant`](https://platform.simplicite.io/6.1/jsdoc/global.html#$grant) represent the **User Rights** --of type `Simplicite.Ajax.Grant`-- and allows to access and possibly manipulate the instance through the rights of the current user.
 
-* [`$grant`](https://platform.simplicite.io/6.1/jsdoc/global.html#$grant)
+* [`$nav`](https://platform.simplicite.io/6.1/jsdoc/global.html#$nav) represents the **Navigation Controller** --of type `Simplicite.UI.Navigator`-- thanks to which you can possibly navigate through your Simplicité application through the *Navigation* tool.
 
-* [`$nav`](https://platform.simplicite.io/6.1/jsdoc/global.html#$nav)
+* [`$root`](https://platform.simplicite.io/6.1/jsdoc/global.html#$root) represents the **Server Root URL** --of type `String`-- through which you can get and access the static resources of your Simplicité instance/session.
 
-* [`$root`](https://platform.simplicite.io/6.1/jsdoc/global.html#$root)
-
-* [`$tools`](https://platform.simplicite.io/6.1/jsdoc/global.html#$tools)
+* [`$tools`](https://platform.simplicite.io/6.1/jsdoc/global.html#$tools) represents the **Bootstrap Tools** --of type `Simplicite.UI.View`-- that allows you to use a bunch of Bootstrap specific methods and workflows (for example BootstrapWebPages for external pages, or bootstrap's specific widgets).
 
 # Accessing Simplicité's session