> ## Documentation Index
> Fetch the complete documentation index at: https://adminroletesting-justin-client-exports.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Scripts personnalisés

> Ajoutez du JavaScript et du CSS personnalisés à votre documentation pour les analyses, widgets, ajustements de styles et intégrations tierces.

Utilisez CSS pour mettre en forme les éléments HTML, ou ajoutez du CSS et du JavaScript personnalisés afin d'adapter entièrement l'apparence et l'expérience de votre documentation.

<div id="style-with-tailwind-css">
  ## Styliser avec Tailwind CSS
</div>

Utilisez Tailwind CSS v3 pour styliser les éléments HTML. Vous pouvez contrôler la mise en page, l'espacement, les couleurs et d'autres propriétés visuelles. Quelques classes courantes :

* `w-full` - Pleine largeur
* `aspect-video` - Ratio 16:9
* `rounded-xl` - Grandes bordures arrondies
* `block`, `hidden` - Contrôle de l'affichage
* `dark:hidden`, `dark:block` - Visibilité en mode sombre

Les valeurs arbitraires de Tailwind CSS ne sont pas prises en charge. Pour des valeurs personnalisées, utilisez plutôt la prop `style`.

```html theme={null}
<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />
```

<Warning>
  L'utilisation de la prop `style` peut provoquer un décalage de la mise en page au chargement, en particulier sur les pages en mode personnalisé. Utilisez plutôt des classes Tailwind CSS ou des fichiers CSS personnalisés pour éviter les décalages ou le scintillement.
</Warning>

<div id="add-custom-css">
  ## Ajouter du CSS personnalisé
</div>

Ajoutez des fichiers CSS à votre référentiel pour appliquer les noms de classes qu'ils définissent et les rendre disponibles dans tous vos fichiers MDX.

Les références et la mise en forme des éléments courants sont susceptibles de changer. Utilisez les styles personnalisés avec prudence, car des changements incompatibles peuvent survenir lors de futures mises à jour.

Par exemple, vous pouvez ajouter le fichier `style.css` suivant pour personnaliser la barre de navigation et le pied de page.

```css theme={null}
#navbar {
  background: #fffff2;
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}
```

Mintlify expose deux types de hooks CSS pour le ciblage :

* **Sélecteurs d'ID** : éléments uniques au niveau de la page ciblés avec `#value { }` en CSS
* **Sélecteurs d'éléments** : composants et éléments de mise en page ciblés avec `value { }` en CSS (sans préfixe `#` ou `.`)

<Tip>
  Utilisez l'outil d'inspection des éléments pour trouver les références aux éléments que vous souhaitez personnaliser.
</Tip>

<div id="id-selectors">
  ### Sélecteurs d'ID
</div>

Chaque ID apparaît une seule fois par page. Utilisez-les comme `#value` en CSS. Par exemple, `#navbar { background: red; }`.

<AccordionGroup>
  <Accordion title="Mise en page">
    * `#body-content` — Conteneur externe du corps de la page.
    * `#content-area` — Zone de contenu principale, hors barre latérale et table des matières.
    * `#content` — Élément de contenu interne au sein de la zone de contenu.
    * `#header` — Élément d'en-tête au niveau de la page.
    * `#banner` — Bannière d'annonce affichée au-dessus de la barre de navigation.
    * `#footer` — Pied de page. Aussi ciblable en tant que sélecteur d'élément : `footer`.
    * `#page-title` — Le titre `<h1>` en haut de chaque page.
    * `#pagination` — Barre de pagination en bas avec les liens page précédente et suivante.
    * `#panel` — Panneau flottant en superposition. Aussi ciblable en tant que sélecteur d'élément : `panel`.
    * `#background-color` — Élément de couleur d'arrière-plan de la page.
  </Accordion>

  <Accordion title="Navigation">
    * `#navbar` — Barre de navigation supérieure.
    * `#topbar-cta-button` — Bouton d'appel à l'action dans la barre supérieure.
    * `#mobile-nav` — Superposition de la navigation mobile.
    * `#mobile-nav-content` — Zone de contenu au sein de la superposition de navigation mobile.
  </Accordion>

  <Accordion title="Barre latérale">
    * `#sidebar` — Panneau de navigation de la barre latérale.
    * `#sidebar-content` — Zone de contenu défilable au sein de la barre latérale.
  </Accordion>

  <Accordion title="Table des matières">
    * `#table-of-contents` — Panneau de la table des matières sur le côté droit de la page.
    * `#table-of-contents-layout` — Conteneur de mise en page pour la table des matières.
    * `#table-of-contents-content` — Contenu défilable au sein de la table des matières.
  </Accordion>

  <Accordion title="Recherche">
    * `#search-bar-entry` — Déclencheur de la barre de recherche dans la barre supérieure.
    * `#search-bar-entry-mobile` — Déclencheur de la barre de recherche sur mobile.
    * `#search-input` — Champ de saisie dans la fenêtre modale de recherche.
  </Accordion>

  <Accordion title="Assistant IA">
    * `#assistant-entry` — Bouton de l'assistant IA dans la barre supérieure.
    * `#assistant-entry-mobile` — Bouton de l'assistant IA sur mobile.
    * `#chat-assistant-sheet` — Panneau de chat de l'assistant IA.
    * `#chat-assistant-textarea` — Champ de saisie dans le panneau de l'assistant IA.
  </Accordion>

  <Accordion title="Référence API">
    * `#request-example` — Panneau d'exemple de requête dans le playground API.
    * `#response-example` — Panneau d'exemple de réponse dans le playground API.
    * `#api-playground-input` — Section d'entrée du playground API.
    * `#endpoints-menu-trigger` — Bouton qui ouvre le menu déroulant de sélection des endpoints.
  </Accordion>

  <Accordion title="Blocs de code">
    * `#ask-assistant-code-block-button` — Bouton "Demander à l'assistant" qui apparaît sur les blocs de code.
    * `#code-snippet-feedback-button` — Bouton de retour d'expérience sur les extraits de code.
    * `#code-snippet-feedback-textarea` — Zone de texte dans le formulaire de retour d'expérience des extraits de code.
  </Accordion>

  <Accordion title="Retour d'expérience">
    * `#feedback-thumbs-up` — Bouton pouce en haut en bas de la page.
    * `#feedback-thumbs-down` — Bouton pouce en bas en bas de la page.
    * `#feedback-form` — Formulaire de retour d'expérience affiché après une réponse négative.
    * `#feedback-form-input` — Champ de saisie dans le formulaire de retour d'expérience.
    * `#feedback-form-cancel` — Bouton d'annulation dans le formulaire de retour d'expérience.
    * `#feedback-form-submit` — Bouton d'envoi dans le formulaire de retour d'expérience.
  </Accordion>

  <Accordion title="Menu contextuel de la page">
    * `#page-context-menu` — Menu d'options contextuelles pour la page actuelle.
    * `#page-context-menu-button` — Bouton qui déclenche le menu contextuel de la page.
  </Accordion>

  <Accordion title="Localisation">
    * `#localization-select-trigger` — Bouton qui ouvre le sélecteur de langue.
    * `#localization-select-content` — Contenu du menu déroulant du sélecteur de langue.
    * `#localization-select-item` — Option de langue individuelle dans le sélecteur.
  </Accordion>

  <Accordion title="Journal des modifications">
    * `#changelog-filters` — Contrôles de filtre sur une page de journal des modifications.
    * `#changelog-filters-content` — Zone de contenu dans le panneau de filtres du journal des modifications.
  </Accordion>

  <Accordion title="Multi-vues">
    * `#multi-view-dropdown` — Menu déroulant pour basculer entre les vues de documentation.
  </Accordion>

  <Accordion title="Sélection de texte">
    * `#text-selection-tooltip` — Infobulle qui apparaît lorsque du texte est sélectionné sur la page.
    * `#text-selection-tooltip-button` — Bouton d'action dans l'infobulle de sélection de texte.
  </Accordion>
</AccordionGroup>

<div id="element-selectors">
  ### Sélecteurs d'éléments
</div>

Plusieurs instances de ces éléments peuvent apparaître sur une page. Utilisez-les comme `value` en CSS. Par exemple, `accordion { border: 1px solid red; }`.

<AccordionGroup>
  <Accordion title="Composants de contenu">
    * `accordion` — Élément accordéon repliable.
    * `accordion-group` — Conteneur regroupant plusieurs accordéons.
    * `callout` — Bloc d'encadré (Note, Warning, Tip, etc.).
    * `card` — Élément de carte individuel.
    * `card-group` — Conteneur regroupant plusieurs cartes. Obsolète au profit de `columns`, mais conservé pour la compatibilité.
    * `columns` — Conteneur de mise en page multi-colonnes.
    * `code-block` — Élément de bloc de code.
    * `code-block-icon` — Icône affichée dans l'en-tête d'un bloc de code.
    * `code-group` — Groupe d'onglets de blocs de code.
    * `expandable` — Élément de section extensible.
    * `frame` — Cadre pour les images ou le contenu intégré.
    * `icon` — Élément d'icône en ligne.
    * `mermaid` — Conteneur de diagramme Mermaid.
    * `step` — Étape individuelle dans une séquence d'étapes.
    * `steps` — Conteneur d'étapes numérotées.
    * `tab-icon` — Icône affichée dans un onglet.
    * `tabs` — Conteneur de contenu à onglets.
    * `tile` — Élément de composant tuile.
    * `tooltip` — Élément d'infobulle.
    * `update` — Entrée de mise à jour du journal des modifications.
  </Accordion>

  <Accordion title="Mise en page">
    * `mdx-content` — Zone de contenu MDX rendu.
    * `panel` — Composant de panneau flottant. Aussi ciblable en tant que sélecteur d'ID : `#panel`.
    * `eyebrow` — Petit libellé affiché au-dessus du titre de la page.
    * `link` — Élément de lien ancré.
    * `breadcrumb-list` — Liste de navigation fil d'Ariane.
    * `breadcrumb-item` — Élément individuel du fil d'Ariane.
  </Accordion>

  <Accordion title="Navigation de la barre supérieure">
    * `nav-logo` — Logo dans la barre de navigation.
    * `navbar-link` — Élément de lien dans la barre de navigation.
    * `nav-anchors` — Conteneur des liens d'ancrage dans la barre supérieure.
    * `nav-anchor` — Lien d'ancrage individuel dans la barre supérieure.
    * `nav-tabs` — Barre d'onglets dans la navigation supérieure.
    * `nav-tabs-item` — Élément d'onglet individuel dans la barre d'onglets de la navigation supérieure.
    * `mobile-nav-tabs-item` — Élément d'onglet dans la barre d'onglets de la navigation mobile.
    * `topbar-right-container` — Section droite de la barre supérieure.
    * `nav-tag-pill` — Pastille de tag affichée dans la navigation.
    * `nav-tag-pill-text` — Texte au sein d'une pastille de tag de navigation.
  </Accordion>

  <Accordion title="Menu déroulant de la barre supérieure">
    * `nav-dropdown-trigger` — Bouton qui ouvre un menu déroulant de navigation.
    * `nav-dropdown-content` — Conteneur de contenu d'un menu déroulant de navigation.
    * `nav-dropdown-item` — Élément individuel au sein d'un menu déroulant de navigation.
    * `nav-dropdown-item-text-container` — Conteneur de texte au sein d'un élément du menu déroulant.
    * `nav-dropdown-item-title` — Texte du titre au sein d'un élément du menu déroulant.
    * `nav-dropdown-item-description` — Texte de description au sein d'un élément du menu déroulant.
    * `nav-dropdown-item-icon` — Icône au sein d'un élément du menu déroulant.
  </Accordion>

  <Accordion title="Sélecteur de produits">
    * `nav-dropdown-products-selector-trigger` — Bouton qui ouvre le menu déroulant du sélecteur de produits.
    * `nav-dropdown-products-selector-content` — Conteneur de contenu du sélecteur de produits.
    * `nav-dropdown-products-selector-item` — Produit individuel dans le sélecteur.
    * `nav-dropdown-products-selector-item-title` — Titre d'un élément du sélecteur de produits.
    * `nav-dropdown-products-selector-item-description` — Description d'un élément du sélecteur de produits.
    * `nav-dropdown-products-selector-item-icon` — Icône d'un élément du sélecteur de produits.
  </Accordion>

  <Accordion title="Barre latérale">
    * `sidebar-group` — Groupe de liens associés dans la barre latérale.
    * `sidebar-group-icon` — Icône d'un groupe de la barre latérale.
    * `sidebar-group-header` — Libellé d'en-tête d'un groupe de la barre latérale.
    * `sidebar-title` — Titre de niveau supérieur dans la barre latérale.
    * `sidebar-nav-group-divider` — Séparateur entre les groupes de navigation de la barre latérale.
  </Accordion>

  <Accordion title="Table des matières">
    * `toc` — Conteneur de la table des matières.
    * `toc-item` — Entrée d'en-tête individuelle dans la table des matières.
  </Accordion>

  <Accordion title="Pied de page">
    * `footer` — Pied de page standard. Aussi ciblable en tant que sélecteur d'ID : `#footer`.
    * `advanced-footer` — Pied de page étendu avec des colonnes ou du contenu supplémentaire.
  </Accordion>

  <Accordion title="Pagination">
    * `pagination-prev` — Lien vers la page précédente dans la barre de pagination.
    * `pagination-next` — Lien vers la page suivante dans la barre de pagination.
    * `pagination-title` — Titre de la page affiché dans la barre de pagination.
  </Accordion>

  <Accordion title="Référence API">
    * `api-section` — Section complète pour un endpoint d'API.
    * `api-section-heading` — Zone d'en-tête d'une section d'endpoint d'API.
    * `api-section-heading-title` — Titre au sein de l'en-tête d'une section d'endpoint d'API.
    * `api-section-heading-subtitle` — Sous-titre au sein de l'en-tête d'une section d'endpoint d'API.
    * `field` — Champ de paramètre ou de propriété dans la référence API.
    * `option-dropdown` — Menu déroulant pour sélectionner entre les options d'API.
    * `tryit-button` — Bouton "Try it" qui ouvre le playground API.
    * `method-pill` — Badge de méthode HTTP (GET, POST, etc.) sur un endpoint.
    * `method-nav-pill` — Badge de méthode HTTP affiché dans la navigation de la barre latérale.
    * `prompt` — Composant prompt dans la référence API.
  </Accordion>

  <Accordion title="Assistant IA">
    * `chat-assistant-sheet` — Conteneur du panneau de l'assistant IA.
    * `chat-assistant-sheet-header` — En-tête du panneau de l'assistant IA.
    * `chat-assistant-sheet-content` — Zone de contenu du panneau de l'assistant IA.
    * `chat-assistant-input` — Champ de saisie dans le panneau de l'assistant IA.
    * `chat-assistant-floating-input` — Variante de saisie flottante de l'assistant IA.
    * `chat-assistant-send-button` — Bouton d'envoi dans le panneau de l'assistant IA.
    * `chat-assistant-disclaimer-text` — Texte de clause de non-responsabilité dans le panneau de l'assistant IA.
    * `chat-assistant-payload-item` — Message ou résultat individuel dans le panneau de l'assistant.
    * `starter-question-text` — Question de démarrage suggérée affichée dans un panneau d'assistant vide.
  </Accordion>

  <Accordion title="Retour d'expérience">
    * `feedback-toolbar` — Barre d'outils contenant les contrôles de retour d'expérience de la page.
    * `contextual-feedback-container` — Conteneur pour le retour d'expérience contextuel en ligne.
    * `contextual-feedback-form` — Formulaire de retour d'expérience contextuel en ligne.
    * `contextual-feedback-form-title` — Titre du formulaire de retour d'expérience contextuel.
    * `contextual-feedback-input` — Champ de saisie dans le formulaire de retour d'expérience contextuel.
    * `contextual-feedback-button` — Bouton d'action dans le formulaire de retour d'expérience contextuel.
    * `contextual-feedback-form-submit-button` — Bouton d'envoi du formulaire de retour d'expérience contextuel.
  </Accordion>

  <Accordion title="Retour d'expérience sur les extraits de code">
    * `code-snippet-feedback-popover-content` — Contenu du popover pour le retour d'expérience sur les extraits de code.
    * `code-snippet-feedback-form` — Formulaire de retour d'expérience pour un extrait de code.
    * `code-snippet-feedback-textarea` — Zone de texte dans le formulaire de retour d'expérience de l'extrait de code.
    * `code-snippet-feedback-form-title` — Titre du formulaire de retour d'expérience de l'extrait de code.
    * `code-snippet-feedback-form-description` — Texte descriptif dans le formulaire de retour d'expérience de l'extrait de code.
    * `code-snippet-feedback-form-submit-button` — Bouton d'envoi du formulaire de retour d'expérience de l'extrait de code.
  </Accordion>

  <Accordion title="Authentification">
    * `login-link` — Lien qui initie le processus de connexion.
    * `logout-link` — Lien qui initie le processus de déconnexion.
  </Accordion>

  <Accordion title="Multi-vues">
    * `multi-view-item` — Option de vue individuelle dans un commutateur multi-vues.
    * `multi-view-dropdown` — Menu déroulant pour sélectionner entre plusieurs vues.
    * `multi-view-dropdown-trigger` — Bouton qui ouvre le menu déroulant multi-vues.
    * `multi-view-dropdown-content` — Zone de contenu du menu déroulant multi-vues.
    * `multi-view-dropdown-item` — Élément individuel au sein du menu déroulant multi-vues.
  </Accordion>

  <Accordion title="Répertoire">
    * `directory` — Conteneur racine d'une page de répertoire.
    * `directory-group` — Groupe de pages associées au sein d'un répertoire.
    * `directory-page` — Entrée de page individuelle dans un répertoire.
    * `directory-card` — Entrée de page sous forme de carte dans un répertoire.
  </Accordion>

  <Accordion title="Page 404">
    * `not-found-container` — Conteneur racine de la page 404.
    * `not-found-status-code` — Affichage du code de statut sur la page 404.
    * `not-found-title` — Titre de la page 404.
    * `not-found-description` — Texte descriptif sur la page 404.
    * `not-found-recommended-pages-list` — Liste de pages recommandées affichées sur la page 404.
    * `not-found-recommended-page-link` — Lien individuel dans la liste des pages recommandées.
  </Accordion>

  <Accordion title="Couleur">
    * `color` — Élément d'échantillon de couleur.
    * `color-row` — Ligne regroupant des échantillons de couleur.
    * `color-item` — Élément de couleur individuel au sein d'une ligne de couleurs.
  </Accordion>

  <Accordion title="Arborescence">
    * `tree` — Conteneur d'arborescence de fichiers.
    * `tree-folder` — Entrée de dossier dans une arborescence de fichiers.
    * `tree-file` — Entrée de fichier dans une arborescence de fichiers.
  </Accordion>

  <Accordion title="Attributs de données">
    Certains éléments exposent des attributs de données que vous pouvez utiliser comme sélecteurs CSS.

    État actif (`data-active`) :

    * `nav-dropdown-item[data-active]` — Élément actif dans un menu déroulant de navigation.
    * `mobile-nav-tabs-item[data-active]` — Onglet actif dans la navigation mobile.
    * `sidebar-group[data-active]` — Groupe actif de la barre latérale.
    * `#sidebar-content li[data-active]` — Lien actif de la barre latérale.
    * `.nav-tabs-item[data-active]` — Onglet actif de la navigation supérieure. S'applique uniquement aux onglets simples ; les onglets avec menus déroulants ne reçoivent pas `data-active`. Notez le `.` initial : il cible une classe sur un élément `<a>` standard, contrairement à la plupart des autres composants qui utilisent des noms d'éléments personnalisés.
    * `toc-item[data-active]` — Élément actif de la table des matières.
    * `toc-item[data-active-deepest]` — Élément le plus profond actif de la table des matières. Uniquement présent sur le titre exactement visible, contrairement à `data-active` qui est également défini sur ses titres parents.

    Nom de composant (`data-component-name`) :

    Utilisez `data-component-name` pour cibler des composants d'interface spécifiques avec un sélecteur stable qui persiste même si les noms de classes internes changent.

    * `[data-component-name="mermaid-container"]` — Conteneur de diagramme Mermaid, y compris la superposition des contrôles de zoom.
    * `[data-component-name="mermaid-controls-wrapper"]` — Contrôles de zoom et de déplacement Mermaid.
    * `[data-component-name="primary-header-button"]` — Bouton principal de l'en-tête. Thème Sequoia uniquement.
    * `[data-component-name="theme-toggle"]` — Bascule de thème.

    Partie de composant (`data-component-part`) :

    Utilisez `data-component-part` pour cibler les sous-éléments d'un composant.

    * `[data-component-part="contact-support-button"]` — Le wrapper `<a>` autour du lien de contact support dans le panneau assistant.
    * `[data-component-part="contact-support-icon"]` — Le `<span>` englobant l'icône.
    * `[data-component-part="contact-support-text"]` — L'élément `<p>` contenant le libellé.

    Attributs Badge :

    * `[data-badge]` — Tout élément badge.
    * `[data-badge][data-color="blue"]` — Badge filtré par couleur.
    * `[data-badge][data-size="sm"]` — Badge filtré par taille.

    Chemin actuel (`data-current-path`) :

    Utilisez `data-current-path` pour appliquer du CSS personnalisé sur des pages ou des sous-chemins spécifiques.

    * `html[data-current-path="/"]` — Correspond à la page racine.
    * `html[data-current-path="/quickstart"]` — Correspond à une page spécifique.
    * `html[data-current-path^="/api-reference/"]` — Correspond à toute page d'une section.
  </Accordion>
</AccordionGroup>

<div id="custom-javascript">
  ## JavaScript personnalisé
</div>

Le JavaScript personnalisé vous permet d'ajouter du code exécutable personnalisé à l'échelle du site. C'est l'équivalent d'ajouter une balise `<script>` contenant du code JS sur chaque page.

Mintlify inclut tout fichier `.js` situé dans le répertoire de contenu de votre documentation dans chaque page de votre site de documentation. Les fichiers JavaScript personnalisés s'exécutent une fois que la page devient interactive. Vous ne pouvez pas les limiter à des pages spécifiques. Par exemple, vous pouvez ajouter le fichier `ga.js` suivant pour activer [Google Analytics](https://marketingplatform.google.com/about/analytics) sur l'ensemble de la documentation.

```js theme={null}
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');
```

<Warning>
  Veuillez l'utiliser avec prudence afin de ne pas introduire de vulnérabilités de sécurité.
</Warning>