> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging.auth0-mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Modifier les détails de l’organisation sur le Web

> Modifiez les détails de l’organisation, notamment son nom, son nom d’affichage, les couleurs de son image de marque et son logo.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "bêta",
    "ea": "Accès anticipé"
  };
  const stageText = stageTextMap[stage] || "une phase de lancement du produit";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>Cette fonctionnalité est offerte avec les forfaits {linkify(`${plans}`, "https://auth0.com/pricing")}. </>}
            {contact && "Pour y participer, communiquez avec " + contact + ". "}
            {terms && <>En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} d’Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La fonctionnalité {feature} est en {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const themePref = window?.localStorage?.getItem?.("isDarkMode");
  const theme = themePref === "dark" || themePref === "light" ? themePref : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <div aria-label="Chargement" role="status" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}>
          <svg width={40} height={40} viewBox="0 0 50 50" style={{
    display: "block"
  }}>
            <circle cx="25" cy="25" r="20" fill="none" stroke="#8A94A6" strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
              <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
            </circle>
          </svg>
        </div>
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

Le composant `OrganizationDetailsEdit` offre une interface unifiée pour modifier les détails de votre [organisation](/docs/fr-ca/manage-users/organizations).

<ComponentLoader componentSelector="organization-details-edit" componentPreviewText="Aperçu du composant de modification des détails de l’organisation" />

<h2 id="third-party-application-access">
  Accès des applications tierces
</h2>

`third_party_client_access` est un paramètre au niveau de l'Organization qui détermine si les applications tierces peuvent authentifier les utilisateurs au moyen des fournisseurs SSO de l'Organization. Ses valeurs possibles sont `"allow"` et `"block"`, la valeur par défaut étant `"block"`.

Le composant lit `GET /my-org/config` pour déterminer les valeurs permises par le locataire. Lorsque `third_party_client_access.allowed_values` ne contient que `"block"`, le groupe de boutons radio s'affiche, mais en lecture seule — l'administrateur de l'Organization ne peut pas le modifier. Lorsque les deux valeurs sont permises, le champ devient modifiable et son contenu est enregistré dans la ressource des détails de l'Organization.

Ce paramètre agit comme un verrou à l'échelle de l'Organization. Il ne configure pas le Cross App Access (XAA), qui constitue un chemin d'autorisation distinct, contrôlé au niveau du fournisseur SSO.

<Tabs>
  <Tab title="React">
    <h2 id="setup-requirements">
      Exigences de configuration
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration d’Auth0 requise**—Assurez-vous que votre tenant est configuré avec l’API
      My Organization. [Consulter le guide de configuration
      →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

    <h2 id="installation">
      Installation
    </h2>

    <CodeGroup>
      ```bash pnpm  wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      L’exécution de l’une ou l’autre de ces commandes installe également la dépendance @auth0/universal-components-core
      pour les utilitaires partagés et l’intégration avec Auth0.
    </Callout>

    <h2 id="get-started">
      Pour commencer
    </h2>

    ```tsx wrap lines theme={null}
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
    import { useNavigate } from "react-router-dom";

    export function OrganizationSettingsPage() {
      const navigate = useNavigate();

      return (
        <OrganizationDetailsEdit
          saveAction={{
            onAfter: () => navigate("/organization"),
          }}
          backButton={{
            onClick: () => navigate("/organization"),
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple complet d’intégration">
      ```tsx lines theme={null}
      import React from "react";
      import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate } from "react-router-dom";
      import { analytics } from "./lib/analytics";

      function OrganizationSettingsPage() {
        const navigate = useNavigate();

        const handleSaveSuccess = (org) => {
          analytics.track("Organization Updated", {
            name: org.name,
            displayName: org.display_name,
          });
          navigate("/organization");
        };

        return (
          <div className="max-w-2xl mx-auto p-6">
            <OrganizationDetailsEdit
              schema={{
                details: {
                  displayName: {
                    required: true,
                    maxLength: 100,
                  },
                  color: {
                    regex: /^#[0-9A-Fa-f]{6}$/,
                    errorMessage: "Enter a valid hex color",
                  },
                },
              }}
              saveAction={{
                onBefore: (org) => {
                  return confirm(`Save changes to "${org.display_name}"?`);
                },
                onAfter: handleSaveSuccess,
              }}
              cancelAction={{
                onAfter: () => navigate("/organization"),
              }}
              backButton={{
                onClick: () => navigate("/organization"),
              }}
              customMessages={{
                header: {
                  title: "Organization Settings",
                },
                save_organization_changes_message: "Settings saved successfully!",
              }}
              styling={{
                variables: {
                  common: {
                    "--color-primary": "#059669",
                  },
                },
                classes: {
                  "OrganizationDetails_Card": "shadow-xl rounded-lg",
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "your-domain.auth0.com";
        const clientId = "your-client-id";

        return (
          <Auth0Provider
            domain={domain}
            clientId={clientId}
            authorizationParams={{
              redirect_uri: window.location.origin,
            }}
            interactiveErrorHandler="popup" // Requis pour gérer les défis d’authentification renforcée via la fenêtre contextuelle Universal Login
          >
            <Auth0ComponentProvider>
              <OrganizationSettingsPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    <h2 id="props">
      Props
    </h2>

    <h3 id="required-props">
      Props obligatoires
    </h3>

    Les props obligatoires sont essentiels au fonctionnement du composant. `OrganizationDetailsEdit` n'a aucun prop obligatoire : il charge automatiquement les détails de l'organization actuelle depuis My Organization API.

    ***

    <h3 id="display-props">
      Props d'affichage
    </h3>

    Les props d'affichage déterminent la façon dont le composant est rendu, sans modifier son comportement. Utilisez-les pour masquer des sections ou activer le mode lecture seule.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Désactive tous les champs du formulaire. Par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Masque la section d’en-tête. Par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="action-props">
      Props de l’Action
    </h3>

    Les props d'action gèrent les interactions des utilisateurs et définissent ce qui se passe lorsque ceux-ci enregistrent ou annulent des modifications. Utilisez les hooks du cycle de vie (`onBefore`, `onAfter`) pour intégrer le routage et l'analytique de votre application.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>saveAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            Action d’enregistrement des modifications.
          </td>
        </tr>

        <tr>
          <td>
            <code>cancelAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            Action d’annulation ou d’abandon des modifications.
          </td>
        </tr>

        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            Configuration du bouton Retour.
          </td>
        </tr>
      </tbody>
    </table>

    **saveAction**

    **Type :** `ComponentAction<OrganizationPrivate>`

    Contrôle le flux d'enregistrement lorsque les utilisateurs soumettent des modifications à une organisation. Utilisez `onAfter` pour quitter la page après un enregistrement réussi.

    **Propriétés :**

    * `disabled`—Désactive le bouton Enregistrer (par exemple, pendant qu’une autre opération est en cours)
    * `onBefore(data)`—S’exécute avant l’opération d’enregistrement. Retournez `false` pour empêcher l’enregistrement (par exemple, afin d’afficher d’abord une boîte de dialogue de confirmation).
    * `onAfter(data)`—S’exécute une fois que l’organisation a été enregistrée avec succès. Utilisez cette fonction pour quitter la page ou suivre l’événement.

    **Exemple :**

    ```tsx wrap lines theme={null}
    // Revenir en arrière après l'enregistrement
    saveAction={{
      onAfter: () => navigate("/organization"),
    }}

    // Ajouter une confirmation avant l'enregistrement
    saveAction={{
      onBefore: (org) => {
        return confirm(`Save changes to "${org.display_name}"?`);
      },
      onAfter: () => navigate("/organization"),
    }}

    // Suivre les données analytiques au moment de l'enregistrement
    saveAction={{
      onAfter: (org) => {
        analytics.track("Organization Updated", {
          name: org.name,
          displayName: org.display_name,
        });
        navigate("/organization");
      },
    }}
    ```

    ***

    **cancelAction**

    **Type :** `ComponentAction<OrganizationPrivate>`

    Contrôle le flux d’annulation/abandon. Utilisez cette action pour gérer les modifications abandonnées.

    **Propriétés :**

    * `disabled`—Désactive le bouton Annuler
    * `onAfter(data)`—S’exécute une fois l’annulation confirmée. Utilisez cette fonction pour quitter le formulaire.

    **Exemple :**

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      cancelAction={{
        onAfter: () => navigate("/organization"),
      }}
    />
    ```

    ***

    **backButton**

    **Type :** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }`

    Configure le bouton de retour dans l'en-tête du composant. Utilisez-le pour revenir à l'aperçu de votre organisation ou à la page précédente.

    **Propriétés :**

    * `icon`—Composant d’icône Lucide personnalisé (facultatif; ArrowLeft par défaut)
    * `onClick`—Gestionnaire de clic pour la navigation

    **Exemple :**

    ```tsx wrap lines theme={null}
    import { ChevronLeft } from "lucide-react";

    <OrganizationDetailsEdit
      backButton={{
        icon: ChevronLeft,
        onClick: () => navigate("/organization"),
      }}
    />;
    ```

    ***

    <h3 id="customization-props">
      Props de personnalisation
    </h3>

    Les props de personnalisation vous permettent d'adapter le composant à votre image de marque, à votre locale et à vos exigences de validation, sans modifier le code source.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>OrganizationDetailsEditSchemas</code>
          </td>

          <td>
            Règles de validation des champs.
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<OrganizationDetailsEditMessages></code>
          </td>

          <td>
            Substitutions de texte i18n.
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<OrganizationEditClasses></code>
          </td>

          <td>
            Variables CSS et substitutions de classes.
          </td>
        </tr>
      </tbody>
    </table>

    **schema**

    Définissez des règles de validation personnalisées pour les champs de détails de l’organisation.

    <Accordion title="Champs de schéma disponibles">
      Tous les champs du schéma prennent en charge : `regex`, `errorMessage`, `minLength`, `maxLength`, `required`

      **details.name**—Nom interne de l’organisation
      **details.displayName**—Nom d’affichage de l’organisation
      **details.primaryColor**—Couleur principale de l’image de marque (format hexadécimal)
      **details.backgroundColor**—Couleur d’arrière-plan de la page (format hexadécimal)
      **details.logoURL**—URL du logo
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      schema={{
        details: {
          name: {
            minLength: 3,
            maxLength: 50,
            regex: /^[a-zA-Z0-9-_]+$/,
            errorMessage: "Name must be alphanumeric with hyphens/underscores",
          },
          displayName: {
            required: true,
            maxLength: 100,
          },
          primaryColor: {
            regex: /^#[0-9A-Fa-f]{6}$/,
            errorMessage: "Enter a valid hex color (e.g., #FF5500)",
          },
          backgroundColor: {
            regex: /^#[0-9A-Fa-f]{6}$/,
            errorMessage: "Enter a valid hex color (e.g., #FFFFFF)",
          },
          logoURL: {
            regex: /^https:\/\/.+/,
            errorMessage: "Logo URL must use HTTPS",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    Personnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs; s'ils ne sont pas fournis, les valeurs par défaut s'appliquent.

    <Accordion title="Messages disponibles">
      **header**—En-tête du composant

      * `title`, `back_button_text`

      **details.sections.settings**—Section des paramètres

      * `title`
      * `fields.name`—`label`, `placeholder`, `helper_text`, `error`
      * `fields.display_name`—`label`, `placeholder`, `helper_text`, `error`
      * `fields.third_party_client_access`—`label`, `options.block.label`, `options.block.helper_text`, `options.allow.label`, `options.allow.helper_text`

      **details.sections.branding**—Section de l’image de marque

      * `title`
      * `fields.logo`—`label`, `helper_text`, `error`
      * `fields.primary_color`—`label`, `helper_text`, `error`
      * `fields.page_background_color`—`label`, `helper_text`, `error`

      **details**—Libellés du formulaire

      * `unsaved_changes_text`, `submit_button_label`, `cancel_button_label`

      **notifications**—Réponses de l’API

      * `save_organization_changes_message`, `organization_changes_error_message`, `organization_changes_error_message_generic`
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      customMessages={{
        header: {
          title: "Edit Organization",
        },
        details: {
          sections: {
            settings: {
              fields: {
                name: {
                  label: "Organization ID",
                  helper_text: "Internal identifier (cannot be changed after creation)",
                },
                display_name: {
                  label: "Organization Name",
                  placeholder: "Enter display name",
                },
                third_party_client_access: {
                  label: "Third-Party Application Access",
                  options: {
                    block: {
                      label: "Block Third-Party Access",
                      helper_text: "Users can only authenticate through official apps",
                    },
                    allow: {
                      label: "Allow Third-Party Access",
                      helper_text: "Users can authenticate through external applications",
                    },
                  },
                },
              },
            },
          },
        },
        save_organization_changes_message: "Organization updated successfully!",
      }}
    />
    ```

    ***

    **styling**

    Personnalisez l'apparence à l'aide de variables CSS et de remplacements de classes. Prend en charge un style adapté au thème.

    <Accordion title="Options de style disponibles">
      **Variables**—Propriétés CSS personnalisées

      * `common`—S’appliquent à tous les thèmes
      * `light`—Thème clair uniquement
      * `dark`—Thème sombre uniquement

      **Classes**—Remplacements des classes de composants

      * `OrganizationDetails_Card`
      * `OrganizationDetails_FormActions`
      * `OrganizationDetails_SettingsDetails`
      * `OrganizationDetails_BrandingDetails`
      * `OrganizationDetails_ThirdPartyAccess`
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.5rem",
          },
          light: {
            "--color-primary": "#059669",
          },
        },
        classes: {
          "OrganizationDetails_Card": "shadow-lg rounded-xl p-6",
        },
      }}
    />
    ```

    ***

    <h2 id="advanced-customization">
      Personnalisation avancée
    </h2>

    <h3 id="available-hooks">
      Hooks disponibles
    </h3>

    Ces hooks fournissent la logique sous-jacente, sans aucune UI. Utilisez-les pour créer des interfaces entièrement personnalisées tout en tirant parti de l’intégration au niveau de l’API Auth0.

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useOrganizationDetailsEdit</code>
          </td>

          <td>Logique de modification de l’organisation et intégration au niveau de l’API</td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="Next.js">
    <h2 id="setup-requirements-2">
      Exigences de configuration
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration d’Auth0 requise**—Assurez-vous que votre tenant est configuré avec l’API
      My Organization. [Consulter le guide de configuration
      →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-2">
      Installation
    </h2>

    <CodeGroup>
      ```bash npm (Recommended) wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```

      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      L’exécution des commandes npm ou pnpm installe la dépendance @auth0/universal-components-core
      qui fournit des utilitaires partagés et l’intégration à Auth0.
    </Callout>

    <h2 id="get-started-2">
      Pour commencer
    </h2>

    ```tsx page.tsx wrap lines theme={null}
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
    import { useRouter } from "next/navigation";

    export function OrganizationSettingsPage() {
      const router = useRouter();

      return (
        <OrganizationDetailsEdit
          saveAction={{
            onAfter: () => router.push("/organization"),
          }}
          backButton={{
            onClick: () => router.push("/organization"),
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple complet d’intégration">
      ```tsx lines theme={null}
      import React from "react";
      import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
      import { useRouter } from "next/navigation";
      import { analytics } from "./lib/analytics";

      function OrganizationSettingsPage() {
        const router = useRouter();

        const handleSaveSuccess = (org) => {
          analytics.track("Organization Updated", {
            name: org.name,
            displayName: org.display_name,
          });
          router.push("/organization");
        };

        return (
          <div className="max-w-2xl mx-auto p-6">
            <OrganizationDetailsEdit
              schema={{
                details: {
                  displayName: {
                    required: true,
                    maxLength: 100,
                  },
                  color: {
                    regex: /^#[0-9A-Fa-f]{6}$/,
                    errorMessage: "Enter a valid hex color",
                  },
                },
              }}
              saveAction={{
                onBefore: (org) => {
                  return confirm(`Save changes to "${org.display_name}"?`);
                },
                onAfter: handleSaveSuccess,
              }}
              cancelAction={{
                onAfter: () => router.push("/organization"),
              }}
              backButton={{
                onClick: () => router.push("/organization"),
              }}
              customMessages={{
                header: {
                  title: "Organization Settings",
                },
                save_organization_changes_message: "Settings saved successfully!",
              }}
              styling={{
                variables: {
                  common: {
                    "--color-primary": "#059669",
                  },
                },
                classes: {
                  "OrganizationDetails_Card": "shadow-xl rounded-lg",
                },
              }}
            />
          </div>
        );
      }

      export default OrganizationSettingsPage;
      ```
    </Accordion>

    <h2 id="props-2">
      Props
    </h2>

    <h3 id="core-props">
      Props principaux
    </h3>

    Les props de base sont essentielles au fonctionnement du composant. `OrganizationDetailsEdit` n'exige aucune prop : il charge automatiquement les détails de l'organisation actuelle depuis l'API Mon organisation.

    ***

    <h3 id="display-props-2">
      Props d'affichage
    </h3>

    Les props d'affichage déterminent la façon dont le composant est rendu, sans modifier son comportement. Utilisez-les pour masquer des sections ou activer le mode lecture seule.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Désactive tous les champs du formulaire. Par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Masque la section d’en-tête. Par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="action-props-2">
      Props de l’Action
    </h3>

    Les props d'action gèrent les interactions des utilisateurs et définissent ce qui se passe lorsque ceux-ci enregistrent ou annulent des modifications. Utilisez les hooks du cycle de vie (`onBefore`, `onAfter`) pour intégrer le routage et l'analytique de votre application.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>saveAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            Action d’enregistrement des modifications.
          </td>
        </tr>

        <tr>
          <td>
            <code>cancelAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            Action d’annulation ou d’abandon des modifications.
          </td>
        </tr>

        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            Configuration du bouton Retour.
          </td>
        </tr>
      </tbody>
    </table>

    **saveAction**

    **Type :** `ComponentAction<OrganizationPrivate>`

    Contrôle le flux d'enregistrement lorsque les utilisateurs soumettent des modifications à une organisation. Utilisez `onAfter` pour quitter la page après un enregistrement réussi.

    **Propriétés :**

    * `disabled`—Désactive le bouton Enregistrer (par exemple, pendant qu’une autre opération est en cours)
    * `onBefore(data)`—S’exécute avant l’opération d’enregistrement. Retournez `false` pour empêcher l’enregistrement (par exemple, afin d’afficher d’abord une boîte de dialogue de confirmation).
    * `onAfter(data)`—S’exécute une fois que l’organisation a été enregistrée avec succès. Utilisez cette fonction pour quitter la page ou suivre l’événement.

    **Modèles courants :**

    ```tsx wrap lines theme={null}
    // Revenir en arrière après l'enregistrement
    saveAction={{
      onAfter: () => router.push("/organization"),
    }}

    // Ajouter une confirmation avant l'enregistrement
    saveAction={{
      onBefore: (org) => {
        return confirm(`Save changes to "${org.display_name}"?`);
      },
      onAfter: () => router.push("/organization"),
    }}

    // Suivre les données analytiques au moment de l'enregistrement
    saveAction={{
      onAfter: (org) => {
        analytics.track("Organization Updated", {
          name: org.name,
          displayName: org.display_name,
        });
        router.push("/organization");
      },
    }}
    ```

    ***

    **cancelAction**

    **Type :** `ComponentAction<OrganizationPrivate>`

    Contrôle le flux d’annulation ou d’abandon. Utilisez cette action pour gérer les modifications abandonnées.

    **Propriétés :**

    * `disabled`—Désactive le bouton Annuler
    * `onAfter(data)`—S’exécute une fois l’annulation confirmée. Utilisez cette fonction pour quitter le formulaire.

    **Exemple :**

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      cancelAction={{
        onAfter: () => router.push("/organization"),
      }}
    />
    ```

    ***

    **backButton**

    **Type :** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }`

    Configure le bouton de retour dans l'en-tête du composant. Utilisez-le pour revenir à l'aperçu de votre organisation ou à la page précédente.

    **Propriétés :**

    * `icon`—Composant d’icône Lucide personnalisé (facultatif; ArrowLeft par défaut)
    * `onClick`—Gestionnaire de clic pour la navigation

    **Exemple :**

    ```tsx wrap lines theme={null}
    import { ChevronLeft } from "lucide-react";

    <OrganizationDetailsEdit
      backButton={{
        icon: ChevronLeft,
        onClick: () => router.push("/organization"),
      }}
    />;
    ```

    ***

    <h3 id="customization-props-2">
      Props de personnalisation
    </h3>

    Les props de personnalisation vous permettent d'adapter le composant à votre image de marque, à votre locale et à vos exigences de validation, sans modifier le code source.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>OrganizationDetailsEditSchemas</code>
          </td>

          <td>
            Règles de validation des champs.
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<OrganizationDetailsEditMessages></code>
          </td>

          <td>
            Substitutions de texte i18n.
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<OrganizationEditClasses></code>
          </td>

          <td>
            Variables CSS et substitutions de classes.
          </td>
        </tr>
      </tbody>
    </table>

    **schema**

    Définissez des règles de validation personnalisées pour les champs de détails de l’organisation.

    <Accordion title="Champs de schéma disponibles">
      Tous les champs du schéma prennent en charge : `regex`, `errorMessage`, `minLength`, `maxLength`, `required`

      **details.name**—Nom interne de l’organisation
      **details.displayName**—Nom d’affichage de l’organisation
      **details.primaryColor**—Couleur principale de l’image de marque (format hexadécimal)
      **details.backgroundColor**—Couleur d’arrière-plan de la page (format hexadécimal)
      **details.logoURL**—URL du logo
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      schema={{
        details: {
          name: {
            minLength: 3,
            maxLength: 50,
            regex: /^[a-zA-Z0-9-_]+$/,
            errorMessage: "Name must be alphanumeric with hyphens/underscores",
          },
          displayName: {
            required: true,
            maxLength: 100,
          },
          primaryColor: {
            regex: /^#[0-9A-Fa-f]{6}$/,
            errorMessage: "Enter a valid hex color (e.g., #FF5500)",
          },
          backgroundColor: {
            regex: /^#[0-9A-Fa-f]{6}$/,
            errorMessage: "Enter a valid hex color (e.g., #FFFFFF)",
          },
          logoURL: {
            regex: /^https:\/\/.+/,
            errorMessage: "Logo URL must use HTTPS",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    Personnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs; s'ils ne sont pas fournis, les valeurs par défaut s'appliquent.

    <Accordion title="Messages disponibles">
      **header**—En-tête du composant

      * `title`, `back_button_text`

      **details.sections.settings**—Section des paramètres

      * `title`
      * `fields.name`—`label`, `placeholder`, `helper_text`, `error`
      * `fields.display_name`—`label`, `placeholder`, `helper_text`, `error`
      * `fields.third_party_client_access`—`label`, `options.block.label`, `options.block.helper_text`, `options.allow.label`, `options.allow.helper_text`

      **details.sections.branding**—Section de l’image de marque

      * `title`
      * `fields.logo`—`label`, `helper_text`, `error`
      * `fields.primary_color`—`label`, `helper_text`, `error`
      * `fields.page_background_color`—`label`, `helper_text`, `error`

      **details**—Libellés du formulaire

      * `unsaved_changes_text`, `submit_button_label`, `cancel_button_label`

      **notifications**—Réponses de l’API

      * `save_organization_changes_message`, `organization_changes_error_message`, `organization_changes_error_message_generic`
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      customMessages={{
        header: {
          title: "Edit Organization",
        },
        details: {
          sections: {
            settings: {
              fields: {
                name: {
                  label: "Organization ID",
                  helper_text: "Internal identifier (cannot be changed after creation)",
                },
                display_name: {
                  label: "Organization Name",
                  placeholder: "Enter display name",
                },
                third_party_client_access: {
                  label: "Third-Party Application Access",
                  options: {
                    block: {
                      label: "Block Third-Party Access",
                      helper_text: "Users can only authenticate through official apps",
                    },
                    allow: {
                      label: "Allow Third-Party Access",
                      helper_text: "Users can authenticate through external applications",
                    },
                  },
                },
              },
            },
          },
        },
        save_organization_changes_message: "Organization updated successfully!",
      }}
    />
    ```

    ***

    **styling**

    Personnalisez l'apparence à l'aide de variables CSS et de remplacements de classes. Prend en charge un style adapté au thème.

    <Accordion title="Options de style disponibles">
      **Variables**—Propriétés CSS personnalisées

      * `common`—S’appliquent à tous les thèmes
      * `light`—Thème clair uniquement
      * `dark`—Thème sombre uniquement

      **Classes**—Remplacements des classes de composants

      * `OrganizationDetails_Card`
      * `OrganizationDetails_FormActions`
      * `OrganizationDetails_SettingsDetails`
      * `OrganizationDetails_BrandingDetails`
      * `OrganizationDetails_ThirdPartyAccess`
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.5rem",
          },
          light: {
            "--color-primary": "#059669",
          },
        },
        classes: {
          "OrganizationDetails_Card": "shadow-lg rounded-xl p-6",
        },
      }}
    />
    ```

    ***

    <h2 id="advanced-customization-2">
      Personnalisation avancée
    </h2>

    <h3 id="available-hooks-2">
      Hooks disponibles
    </h3>

    Ces hooks fournissent la logique sous-jacente, sans aucune UI. Utilisez-les pour créer des interfaces entièrement personnalisées tout en tirant parti de l’intégration au niveau de l’API Auth0.

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useOrganizationDetailsEdit</code>
          </td>

          <td>Logique de modification de l’organisation et intégration au niveau de l’API</td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="shadcn">
    <h2 id="setup-requirements-3">
      Exigences de configuration
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Configuration d’Auth0 requise**—Assurez-vous que votre tenant est configuré avec l’API
      My Organization. [Consulter le guide de configuration
      →](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-3">
      Installation
    </h2>

    Installez le composant à l’aide de la CLI shadcn depuis le registre GitHub :

    ```bash wrap lines theme={null}
    npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/organization-details-edit
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Le CLI shadcn installe également la dépendance `@auth0/universal-components-core`
      pour les utilitaires partagés et l’intégration avec Auth0.
      Nécessite **shadcn CLI v2.5.0+**.
    </Callout>

    <details>
      <summary>Registre Vercel existant (déconseillé)</summary>

      Les clients existants peuvent continuer à utiliser le chemin hébergé par Vercel jusqu’au **17 septembre 2026** :

      ```bash wrap lines theme={null}
      npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/organization-details-edit.json
      ```

      Les nouveaux projets doivent utiliser le chemin du registre GitHub indiqué ci-dessus.
    </details>

    <h2 id="get-started-3">
      Pour commencer
    </h2>

    ```tsx wrap lines theme={null}
    import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

    export function OrganizationSettingsPage() {
      const navigate = useNavigate();

      return (
        <OrganizationDetailsEdit
          saveAction={{
            onAfter: () => navigate("/organization"),
          }}
          backButton={{
            onClick: () => navigate("/organization"),
          }}
        />
      );
    }
    ```

    <Accordion title="Exemple complet d’intégration">
      ```tsx lines theme={null}
      import React from "react";
      import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate } from "react-router-dom";
      import { analytics } from "./lib/analytics";

      function OrganizationSettingsPage() {
        const navigate = useNavigate();

        const handleSaveSuccess = (org) => {
          analytics.track("Organization Updated", {
            name: org.name,
            displayName: org.display_name,
          });
          navigate("/organization");
        };

        return (
          <div className="max-w-2xl mx-auto p-6">
            <OrganizationDetailsEdit
              schema={{
                details: {
                  displayName: {
                    required: true,
                    maxLength: 100,
                  },
                  color: {
                    regex: /^#[0-9A-Fa-f]{6}$/,
                    errorMessage: "Enter a valid hex color",
                  },
                },
              }}
              saveAction={{
                onBefore: (org) => {
                  return confirm(`Save changes to "${org.display_name}"?`);
                },
                onAfter: handleSaveSuccess,
              }}
              cancelAction={{
                onAfter: () => navigate("/organization"),
              }}
              backButton={{
                onClick: () => navigate("/organization"),
              }}
              customMessages={{
                header: {
                  title: "Organization Settings",
                },
                save_organization_changes_message: "Settings saved successfully!",
              }}
              styling={{
                variables: {
                  common: {
                    "--color-primary": "#059669",
                  },
                },
                classes: {
                  "OrganizationDetails_Card": "shadow-xl rounded-lg",
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "your-domain.auth0.com";
        const clientId = "your-client-id";

        return (
          <Auth0Provider
            domain={domain}
            clientId={clientId}
            authorizationParams={{
              redirect_uri: window.location.origin,
            }}
            interactiveErrorHandler="popup" // Requis pour gérer les défis d’authentification renforcée au moyen de la fenêtre contextuelle Universal Login
          >
            <Auth0ComponentProvider>
              <OrganizationSettingsPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    <h2 id="props-3">
      Props
    </h2>

    <h3 id="core-props-2">
      Props principaux
    </h3>

    Les props de base sont essentielles au fonctionnement du composant. `OrganizationDetailsEdit` n'exige aucune prop : il charge automatiquement les détails de l'organization actuelle depuis la My Organization API.

    ***

    <h3 id="display-props-3">
      Props d'affichage
    </h3>

    Les props d'affichage déterminent la façon dont le composant est rendu, sans modifier son comportement. Utilisez-les pour masquer des sections ou activer le mode lecture seule.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Désactive tous les champs du formulaire. Par défaut : <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            Masque la section d’en-tête. Par défaut : <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    <h3 id="action-props-3">
      Props de l’Action
    </h3>

    Les props d'action gèrent les interactions des utilisateurs et définissent ce qui se passe lorsque ceux-ci enregistrent ou annulent des modifications. Utilisez les hooks du cycle de vie (`onBefore`, `onAfter`) pour intégrer le routage et l'analytique de votre application.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>saveAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            Action d’enregistrement des modifications.
          </td>
        </tr>

        <tr>
          <td>
            <code>cancelAction</code>
          </td>

          <td>
            <code>ComponentAction\<OrganizationPrivate></code>
          </td>

          <td>
            Action d’annulation ou d’abandon des modifications.
          </td>
        </tr>

        <tr>
          <td>
            <code>backButton</code>
          </td>

          <td>
            <code>Object</code>
          </td>

          <td>
            Configuration du bouton Retour.
          </td>
        </tr>
      </tbody>
    </table>

    **saveAction**

    **Type :** `ComponentAction<OrganizationPrivate>`

    Contrôle le flux d'enregistrement lorsque les utilisateurs soumettent des modifications à une organisation. Utilisez `onAfter` pour quitter la page après un enregistrement réussi.

    **Propriétés :**

    * `disabled`—Désactive le bouton Enregistrer (par exemple, pendant qu’une autre opération est en cours)
    * `onBefore(data)`—S’exécute avant l’opération d’enregistrement. Retournez `false` pour empêcher l’enregistrement (par exemple, afin d’afficher d’abord une boîte de dialogue de confirmation).
    * `onAfter(data)`—S’exécute une fois que l’organisation a été enregistrée avec succès. Utilisez cette fonction pour quitter la page ou suivre l’événement.

    **Modèles courants :**

    ```tsx wrap lines theme={null}
    // Revenir en arrière après l'enregistrement
    saveAction={{
      onAfter: () => navigate("/organization"),
    }}

    // Ajouter une confirmation avant l'enregistrement
    saveAction={{
      onBefore: (org) => {
        return confirm(`Save changes to "${org.display_name}"?`);
      },
      onAfter: () => navigate("/organization"),
    }}

    // Suivre les données analytiques au moment de l'enregistrement
    saveAction={{
      onAfter: (org) => {
        analytics.track("Organization Updated", {
          name: org.name,
          displayName: org.display_name,
        });
        navigate("/organization");
      },
    }}
    ```

    ***

    **cancelAction**

    **Type :** `ComponentAction<OrganizationPrivate>`

    Contrôle le flux d’annulation/abandon. Utilisez cette action pour gérer les modifications abandonnées.

    **Propriétés :**

    * `disabled`—Désactive le bouton Annuler
    * `onAfter(data)`—S’exécute une fois l’annulation confirmée. Utilisez cette fonction pour quitter le formulaire.

    **Exemple :**

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      cancelAction={{
        onAfter: () => navigate("/organization"),
      }}
    />
    ```

    ***

    **backButton**

    **Type :** `{ icon?: LucideIcon; onClick: (e: MouseEvent) => void }`

    Configure le bouton de retour dans l'en-tête du composant. Utilisez-le pour revenir à l'aperçu de votre organisation ou à la page précédente.

    **Propriétés :**

    * `icon`—Composant d’icône Lucide personnalisé (facultatif; ArrowLeft par défaut)
    * `onClick`—Gestionnaire de clic pour la navigation

    **Exemple :**

    ```tsx wrap lines theme={null}
    import { ChevronLeft } from "lucide-react";

    <OrganizationDetailsEdit
      backButton={{
        icon: ChevronLeft,
        onClick: () => navigate("/organization"),
      }}
    />;
    ```

    ***

    <h3 id="customization-props-3">
      Props de personnalisation
    </h3>

    Les props de personnalisation vous permettent d'adapter le composant à votre image de marque, à votre locale et à vos exigences de validation, sans modifier le code source.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>OrganizationDetailsEditSchemas</code>
          </td>

          <td>
            Règles de validation des champs.
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<OrganizationDetailsEditMessages></code>
          </td>

          <td>
            Substitutions de texte i18n.
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling\<OrganizationEditClasses></code>
          </td>

          <td>
            Variables CSS et substitutions de classes.
          </td>
        </tr>
      </tbody>
    </table>

    **schema**

    Définissez des règles de validation personnalisées pour les champs de détails de l’organisation.

    <Accordion title="Champs de schéma disponibles">
      Tous les champs du schéma prennent en charge : `regex`, `errorMessage`, `minLength`, `maxLength`, `required`

      **details.name**—Nom interne de l’organisation
      **details.displayName**—Nom d’affichage de l’organisation
      **details.primaryColor**—Couleur principale de l’image de marque (format hexadécimal)
      **details.backgroundColor**—Couleur d’arrière-plan de la page (format hexadécimal)
      **details.logoURL**—URL du logo
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      schema={{
        details: {
          name: {
            minLength: 3,
            maxLength: 50,
            regex: /^[a-zA-Z0-9-_]+$/,
            errorMessage: "Name must be alphanumeric with hyphens/underscores",
          },
          displayName: {
            required: true,
            maxLength: 100,
          },
          primaryColor: {
            regex: /^#[0-9A-Fa-f]{6}$/,
            errorMessage: "Enter a valid hex color (e.g., #FF5500)",
          },
          backgroundColor: {
            regex: /^#[0-9A-Fa-f]{6}$/,
            errorMessage: "Enter a valid hex color (e.g., #FFFFFF)",
          },
          logoURL: {
            regex: /^https:\/\/.+/,
            errorMessage: "Logo URL must use HTTPS",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    Personnalisez tous les textes et toutes les traductions. Tous les champs sont facultatifs; s'ils ne sont pas fournis, les valeurs par défaut s'appliquent.

    <Accordion title="Messages disponibles">
      **header**—En-tête du composant

      * `title`, `back_button_text`

      **details.sections.settings**—Section des paramètres

      * `title`
      * `fields.name`—`label`, `placeholder`, `helper_text`, `error`
      * `fields.display_name`—`label`, `placeholder`, `helper_text`, `error`
      * `fields.third_party_client_access`—`label`, `options.block.label`, `options.block.helper_text`, `options.allow.label`, `options.allow.helper_text`

      **details.sections.branding**—Section de l’image de marque

      * `title`
      * `fields.logo`—`label`, `helper_text`, `error`
      * `fields.primary_color`—`label`, `helper_text`, `error`
      * `fields.page_background_color`—`label`, `helper_text`, `error`

      **details**—Libellés du formulaire

      * `unsaved_changes_text`, `submit_button_label`, `cancel_button_label`

      **notifications**—Réponses de l’API

      * `save_organization_changes_message`, `organization_changes_error_message`, `organization_changes_error_message_generic`
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      customMessages={{
        header: {
          title: "Edit Organization",
        },
        details: {
          sections: {
            settings: {
              fields: {
                name: {
                  label: "Organization ID",
                  helper_text: "Internal identifier (cannot be changed after creation)",
                },
                display_name: {
                  label: "Organization Name",
                  placeholder: "Enter display name",
                },
                third_party_client_access: {
                  label: "Third-Party Application Access",
                  options: {
                    block: {
                      label: "Block Third-Party Access",
                      helper_text: "Users can only authenticate through official apps",
                    },
                    allow: {
                      label: "Allow Third-Party Access",
                      helper_text: "Users can authenticate through external applications",
                    },
                  },
                },
              },
            },
          },
        },
        save_organization_changes_message: "Organization updated successfully!",
      }}
    />
    ```

    ***

    **styling**

    Personnalisez l'apparence à l'aide de variables CSS et de remplacements de classes. Prend en charge un style adapté au thème.

    <Accordion title="Options de style disponibles">
      **Variables**—Propriétés CSS personnalisées

      * `common`—S’appliquent à tous les thèmes
      * `light`—Thème clair uniquement
      * `dark`—Thème sombre uniquement

      **Classes**—Remplacements des classes de composants

      * `OrganizationDetails_Card`
      * `OrganizationDetails_FormActions`
      * `OrganizationDetails_SettingsDetails`
      * `OrganizationDetails_BrandingDetails`
      * `OrganizationDetails_ThirdPartyAccess`
    </Accordion>

    ```tsx wrap lines theme={null}
    <OrganizationDetailsEdit
      styling={{
        variables: {
          common: {
            "--font-size-title": "1.5rem",
          },
          light: {
            "--color-primary": "#059669",
          },
        },
        classes: {
          "OrganizationDetails_Card": "shadow-lg rounded-xl p-6",
        },
      }}
    />
    ```

    ***

    <h2 id="advanced-customization-3">
      Personnalisation avancée
    </h2>

    <h3 id="available-hooks-3">
      Hooks disponibles
    </h3>

    Ces hooks fournissent la logique sous-jacente, sans aucune UI. Utilisez-les pour créer des interfaces entièrement personnalisées tout en tirant parti de l’intégration au niveau de l’API Auth0.

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useOrganizationDetailsEdit</code>
          </td>

          <td>Logique de récupération et de modification des données de l’organisation</td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>