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

# Personnaliser le style et les thèmes avec Auth0 Universal Components

> Personnalisez le système de conception d’Auth0 Universal Components à l’aide de Tailwind CSS, de variables CSS et de préréglages de thème intégrés.

<Warning>
  Auth0 Universal Components est actuellement en accès anticipé. En l’utilisant, vous
  acceptez les conditions applicables de l’essai gratuit dans le [Master Subscription
  Agreement d’Okta](https://www.okta.com/agreements/). Pour en savoir plus, consultez [les phases de lancement des
  produits](/fr-CA/docs/troubleshoot/product-lifecycle/product-release-stages).
</Warning>

Auth0 Universal Components repose sur un système de conception flexible qui utilise [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) et les [primitives de Radix UI](https://www.radix-ui.com/primitives/docs/overview/introduction). Le style est géré par [`Auth0ComponentProvider`](/fr-CA/docs/get-started/universal-components/auth0-component-provider), ce qui vous permet de choisir entre des préréglages de haut niveau ou des surcharges précises au moyen de variables CSS.

Cette architecture garantit que vos flux d’identité aient l’apparence et le comportement d’éléments natifs de votre application.

<Tabs>
  <Tab title="React">
    ## Démarrer

    1. Importez la feuille de style.

    ```tsx theme={null}
    import "@auth0/universal-components-react/styles";
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Utilisateurs de Tailwind v4 :** ajoutez `@import "@auth0/universal-components-react/tailwind"` à votre fichier CSS.
    </Callout>

    2. Ajoutez la couleur de votre marque.

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* couleur de votre marque */
      --primary-foreground: #ffffff; /* texte sur les boutons */
    }
    ```

    Terminé. Tous les boutons, liens et états actifs reflètent maintenant votre marque.

    ***

    ## Préréglages de thème

    Transmettez `themeSettings` à `Auth0ComponentProvider` pour basculer entre les thèmes intégrés.

    ```tsx App.tsx theme={null}
    <Auth0ComponentProvider
      themeSettings={{
        mode: "light", // 'light' | 'dark' (clair | sombre)
        theme: "default", // 'default' | 'minimal' | 'rounded' (défaut | minimal | arrondi)
      }}
    >
      <App />
    </Auth0ComponentProvider>
    ```

    <table class="table">
      <thead>
        <tr>
          <th>Préréglage</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>default</code>
          </td>

          <td>Style Auth0 standard avec des ombres et des bordures équilibrées</td>
        </tr>

        <tr>
          <td>
            <code>minimal</code>
          </td>

          <td>Impact visuel réduit avec moins d’ombres et des bordures plus discrètes</td>
        </tr>

        <tr>
          <td>
            <code>rounded</code>
          </td>

          <td>Coins plus arrondis pour une apparence plus douce</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Examiner les variables CSS

    Toutes les propriétés visuelles sont définies par des propriétés personnalisées CSS. Remplacez-les dans votre feuille de style ou via la prop `themeSettings.variables`.

    <Tabs>
      <Tab title="Couleurs (claires)">
        ```css theme={null}
        :root {
          /* Marque - les variables les plus importantes */
          --primary: oklch(37% 0 0);              /* boutons, liens, états actifs */
          --primary-foreground: oklch(100% 0 0);  /* texte sur les surfaces primaires */

        /_ Surfaces _/
        --background: oklch(100% 0 0); /_ arrière-plan de la page _/
        --foreground: oklch(9% 0 0); /_ texte par défaut _/
        --card: oklch(100% 0 0); /_ arrière-plan de la carte _/
        --card-foreground: oklch(0% 0 0); /_ texte à l'intérieur des cartes _/
        --popover: oklch(100% 0 0); /_ arrière-plan du menu déroulant/dialogue _/
        --popover-foreground: oklch(9% 0 0); /_ texte à l'intérieur des popovers _/
        --input: oklch(100% 0 0); /_ arrière-plan du champ de saisie _/

        /_ Secondaire et atténué _/
        --secondary: oklch(96% 0 0);
        --secondary-foreground: oklch(100% 0 0);
        --muted: oklch(96% 0 0); /_ arrière-plans désactivés _/
        --muted-foreground: oklch(45% 0 0); /_ texte d'espace réservé _/

        /_ Accent et destructif _/
        --accent: oklch(97% 0 0); /_ surlignages au survol _/
        --accent-foreground: oklch(9% 0 0);
        --destructive: oklch(93% 0.03 17); /_ états d'erreur _/
        --destructive-foreground: oklch(36% 0.14 17);

        /_ Bordures _/
        --border: oklch(89% 0 0);
        --ring: oklch(89% 0 0); /_ anneau de focus _/
        }

        ```
      </Tab>

      <Tab title="Couleurs (thème sombre)">
        ```css theme={null}
        .dark {
          /* Marque */
          --primary: oklch(70% 0.15 250);         /* plus lumineux pour les arrière-plans sombres */
          --primary-foreground: oklch(10% 0 0);

          /* Surfaces */
          --background: oklch(12% 0 0);
          --foreground: oklch(95% 0 0);
          --card: oklch(15% 0 0);
          --card-foreground: oklch(95% 0 0);
          --popover: oklch(15% 0 0);
          --popover-foreground: oklch(95% 0 0);
          --input: oklch(18% 0 0);

          /* Secondaire et atténué */
          --secondary: oklch(20% 0 0);
          --secondary-foreground: oklch(95% 0 0);
          --muted: oklch(20% 0 0);
          --muted-foreground: oklch(60% 0 0);

          /* Accent et destructif */
          --accent: oklch(25% 0 0);
          --accent-foreground: oklch(95% 0 0);
          --destructive: oklch(30% 0.15 17);
          --destructive-foreground: oklch(95% 0.05 17);

          /* Bordures */
          --border: oklch(25% 0 0);
          --ring: oklch(35% 0 0);
        }
        ```
      </Tab>

      <Tab title="Rayon de la bordure">
        ```css theme={null}
        :root {
          /* Commun - ajustez ces valeurs pour l'apparence générale */
          --radius-sm:  4px;    /* étiquettes, puces */
          --radius-md:  6px;    /* petits éléments */
          --radius-lg:  10px;   /* boutons, champs */
          --radius-xl:  12px;   /* cartes */
          --radius-2xl: 16px;   /* fenêtres modales, grands panneaux */

        /_ Granularité fine (rarement nécessaire) _/
        --radius-xs: 2px;
        --radius-3xl: 20px;
        --radius-4xl: 24px;
        --radius-5xl: 32px;
        }

        ```
      </Tab>

      <Tab title="Typographie">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36px - titre principal */
          --font-size-heading:          1.5rem;    /* 24px - titres de section */
          --font-size-title:            1.25rem;   /* 20px - titres de carte */
          --font-size-subtitle:         1.125rem;  /* 18px - titres secondaires */
          --font-size-body:             1rem;      /* 16px - texte courant */
          --font-size-paragraph:        0.875rem;  /* 14px - descriptions */
          --font-size-label:            0.875rem;  /* 14px - étiquettes de formulaire */
          --font-size-page-description: 0.875rem;  /* 14px - sous-titres */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## Composants de style

    Chaque composant accepte une prop `styling` pour des substitutions ciblées sans affecter les styles globaux.

    ```tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--primary": "#059669", // remplacer uniquement pour ce composant
          },
          light: { "--card": "#f8fafc" },
          dark: { "--card": "#1e293b" },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    **Quand utiliser :**

    * `variables` - redéfinitions des propriétés personnalisées CSS propres au composant
    * `classes` - classes Tailwind ou personnalisées appliquées à des parties précises du composant

    <Accordion title="Classes cibles disponibles par composant">
      Chaque composant expose des classes cibles pour ses principales sections :

      **SsoProviderCreate**

      * `SsoProviderCreate-header`, `SsoProviderCreate-wizard`
      * `ProviderSelect-root`, `ProviderDetails-root`, `ProviderConfigure-root`

      **SsoProviderTable**

      * `SsoProviderTable-header`, `SsoProviderTable-table`, `SsoProviderTable-row`

      **SsoProviderEdit**

      * `SsoProviderEdit-header`, `SsoProviderEdit-tabs`
      * `SsoProviderEdit-ssoTab`, `SsoProviderEdit-provisioningTab`, `SsoProviderEdit-domainsTab`

      **DomainTable**

      * `DomainTable-header`, `DomainTable-table`
      * `DomainTable-createModal`, `DomainTable-configureModal`, `DomainTable-deleteModal`

      **OrganizationDetailsEdit**

      * `OrganizationDetailsEdit-header`, `OrganizationDetailsEdit-form`, `OrganizationDetailsEdit-actions`
    </Accordion>

    ***

    ## Personnalisations courantes

    ### Couleurs de marque (Hex)

    Convertissez la couleur hexadécimale de votre marque au format utilisé en CSS :

    ```css theme={null}
    :root {
      /* Utilisation directe de la valeur hexadécimale */
      --primary: #4f46e5;
      --primary-foreground: #ffffff;

      /* Ou oklch pour une meilleure manipulation des couleurs */
      --primary: oklch(50% 0.2 265); /* violet */
    }
    ```

    ### Coins arrondis

    Pour une esthétique plus arrondie sur l'ensemble des composants :

    ```css theme={null}
    :root {
      --radius-lg: 16px; /* boutons, champs de saisie */
      --radius-xl: 20px; /* cartes */
      --radius-2xl: 24px; /* fenêtres modales */
    }
    ```

    ### Typographie compacte

    Pour les interfaces plus denses :

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## Mode sombre

    Les composants répondent automatiquement au paramètre `mode` dans `themeSettings`. Pour synchroniser avec le mode sombre de votre application :

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

      return (
        <Auth0ComponentProvider
          themeSettings={{
            mode: isDark ? "dark" : "light",
          }}
        >
          <YourApp />
        </Auth0ComponentProvider>
      );
    }
    ```

    Ou utiliser la préférence système :

    ```tsx theme={null}
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    <Auth0ComponentProvider
      themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
    >
    ```
  </Tab>

  <Tab title="Next.js">
    ## Premiers pas

    1. Importez la feuille de style.

    Dans votre fichier de disposition racine :

    ```tsx layout.tsx theme={null}
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";
    import "@auth0/universal-components-react/styles";

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              mode="proxy"
              domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
              proxyConfig={{ baseUrl: "/api/auth" }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Utilisateurs de Tailwind v4 :** Ajoutez `@import "@auth0/universal-components-react/tailwind"` à votre fichier CSS.

      **Utilisateurs de Shadcn :** Aucun import n’est nécessaire ; les styles sont déjà inclus dans votre build Tailwind.
    </Callout>

    2. Ajoutez la couleur de votre marque.

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* couleur de votre marque */
      --primary-foreground: #ffffff; /* texte sur les boutons */
    }
    ```

    Terminé. Tous les boutons, liens et états actifs utilisent désormais votre marque.

    ***

    ## Préréglages de thème

    Passez `themeSettings` à `Auth0ComponentProvider` pour alterner entre les thèmes intégrés.

    ```tsx layout.tsx theme={null}
    <Auth0ComponentProvider
      mode="proxy"
      domain="your-tenant.auth0.com"
      proxyConfig={{ baseUrl: "/api/auth" }}
      themeSettings={{
        mode: "light", // 'light' | 'dark'
        theme: "default", // 'default' | 'minimal' | 'rounded'
      }}
    >
      {/* Les composants de votre application */}
    </Auth0ComponentProvider>
    ```

    <table class="table">
      <thead>
        <tr>
          <th>Préréglage</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>default</code>
          </td>

          <td>Apparence standard d’Auth0 avec des ombres et des bordures bien équilibrées</td>
        </tr>

        <tr>
          <td>
            <code>minimal</code>
          </td>

          <td>Poids visuel réduit, avec moins d’ombres et des bordures plus légères</td>
        </tr>

        <tr>
          <td>
            <code>rounded</code>
          </td>

          <td>Coins plus arrondis pour une apparence plus douce</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Examiner les variables CSS

    Toutes les propriétés visuelles sont définies par des propriétés personnalisées CSS. Remplacez-les dans votre feuille de style ou via la prop `themeSettings.variables`.

    <Tabs>
      <Tab title="Couleurs (claires)">
        ```css theme={null}
        :root {
          /* Marque - les variables les plus importantes */
          --primary: oklch(37% 0 0);              /* boutons, liens, états actifs */
          --primary-foreground: oklch(100% 0 0);  /* texte sur les surfaces primaires */

        /_ Surfaces _/
        --background: oklch(100% 0 0); /_ arrière-plan de la page _/
        --foreground: oklch(9% 0 0); /_ texte par défaut _/
        --card: oklch(100% 0 0); /_ arrière-plan de la carte _/
        --card-foreground: oklch(0% 0 0); /_ texte dans les cartes _/
        --popover: oklch(100% 0 0); /_ arrière-plan du menu déroulant/boîte de dialogue _/
        --popover-foreground: oklch(9% 0 0); /_ texte dans les fenêtres contextuelles _/
        --input: oklch(100% 0 0); /_ arrière-plan du champ de saisie _/

        /_ Secondaire et atténué _/
        --secondary: oklch(96% 0 0);
        --secondary-foreground: oklch(100% 0 0);
        --muted: oklch(96% 0 0); /_ arrière-plans désactivés _/
        --muted-foreground: oklch(45% 0 0); /_ texte d'espace réservé _/

        /_ Accent et destructif _/
        --accent: oklch(97% 0 0); /_ mises en évidence au survol _/
        --accent-foreground: oklch(9% 0 0);
        --destructive: oklch(93% 0.03 17); /_ états d'erreur _/
        --destructive-foreground: oklch(36% 0.14 17);

        /_ Bordures _/
        --border: oklch(89% 0 0);
        --ring: oklch(89% 0 0); /_ anneau de focus _/
        }

        ```
      </Tab>

      <Tab title="Couleurs (foncées)">
        ```css theme={null}
        .dark {
          /* Marque */
          --primary: oklch(70% 0.15 250);         /* plus lumineux pour les arrière-plans sombres */
          --primary-foreground: oklch(10% 0 0);

          /* Surfaces */
          --background: oklch(12% 0 0);
          --foreground: oklch(95% 0 0);
          --card: oklch(15% 0 0);
          --card-foreground: oklch(95% 0 0);
          --popover: oklch(15% 0 0);
          --popover-foreground: oklch(95% 0 0);
          --input: oklch(18% 0 0);

          /* Secondaire et atténué */
          --secondary: oklch(20% 0 0);
          --secondary-foreground: oklch(95% 0 0);
          --muted: oklch(20% 0 0);
          --muted-foreground: oklch(60% 0 0);

          /* Accent et destructif */
          --accent: oklch(25% 0 0);
          --accent-foreground: oklch(95% 0 0);
          --destructive: oklch(30% 0.15 17);
          --destructive-foreground: oklch(95% 0.05 17);

          /* Bordures */
          --border: oklch(25% 0 0);
          --ring: oklch(35% 0 0);
        }
        ```
      </Tab>

      <Tab title="Rayon des bordures">
        ```css theme={null}
        :root {
          /* Commun - ajustez ces valeurs pour l'apparence générale */
          --radius-sm:  4px;    /* étiquettes, puces */
          --radius-md:  6px;    /* petits éléments */
          --radius-lg:  10px;   /* boutons, champs */
          --radius-xl:  12px;   /* cartes */
          --radius-2xl: 16px;   /* fenêtres modales, grands panneaux */

        /_ Granularité fine (rarement nécessaire) _/
        --radius-xs: 2px;
        --radius-3xl: 20px;
        --radius-4xl: 24px;
        --radius-5xl: 32px;
        }

        ```
      </Tab>

      <Tab title="Typographie">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36px - titre principal */
          --font-size-heading:          1.5rem;    /* 24px - titres de section */
          --font-size-title:            1.25rem;   /* 20px - titres de carte */
          --font-size-subtitle:         1.125rem;  /* 18px - titres secondaires */
          --font-size-body:             1rem;      /* 16px - texte courant */
          --font-size-paragraph:        0.875rem;  /* 14px - descriptions */
          --font-size-label:            0.875rem;  /* 14px - étiquettes de formulaire */
          --font-size-page-description: 0.875rem;  /* 14px - sous-titres */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## Composants de style

    Chaque composant accepte une prop `styling` pour des substitutions ciblées sans affecter les styles globaux.

    ```tsx layout.tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--primary": "#059669", // remplacer uniquement pour ce composant
          },
          light: { "--card": "#f8fafc" },
          dark: { "--card": "#1e293b" },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    **Quand utiliser :**

    * `variables` - redéfinitions de propriétés CSS personnalisées propres au composant
    * `classes` - classes Tailwind ou personnalisées appliquées à certaines parties du composant

    <Accordion title="Classes cibles disponibles par composant">
      Chaque composant expose des sélecteurs de classe pour ses sections principales :

      **SsoProviderCreate**

      * `SsoProviderCreate-header`, `SsoProviderCreate-wizard`
      * `ProviderSelect-root`, `ProviderDetails-root`, `ProviderConfigure-root`

      **SsoProviderTable**

      * `SsoProviderTable-header`, `SsoProviderTable-table`, `SsoProviderTable-row`

      **SsoProviderEdit**

      * `SsoProviderEdit-header`, `SsoProviderEdit-tabs`
      * `SsoProviderEdit-ssoTab`, `SsoProviderEdit-provisioningTab`, `SsoProviderEdit-domainsTab`

      **DomainTable**

      * `DomainTable-header`, `DomainTable-table`
      * `DomainTable-createModal`, `DomainTable-configureModal`, `DomainTable-deleteModal`

      **OrganizationDetailsEdit**

      * `OrganizationDetailsEdit-header`, `OrganizationDetailsEdit-form`, `OrganizationDetailsEdit-actions`
    </Accordion>

    ***

    ## Personnalisations courantes

    ### Couleurs de marque (Hex)

    Convertissez la couleur hexadécimale de votre marque au format utilisé en CSS :

    ```css theme={null}
    :root {
      /* Utilisation directe de la valeur hexadécimale */
      --primary: #4f46e5;
      --primary-foreground: #ffffff;

      /* Ou oklch pour une meilleure manipulation des couleurs */
      --primary: oklch(50% 0.2 265); /* violet */
    }
    ```

    ### Coins arrondis

    Pour un style plus arrondi sur l'ensemble des composants :

    ```css theme={null}
    :root {
      --radius-lg: 16px; /* boutons, champs de saisie */
      --radius-xl: 20px; /* cartes */
      --radius-2xl: 24px; /* fenêtres modales */
    }
    ```

    ### Typographie compacte

    Pour les interfaces plus denses :

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## Mode sombre

    Les composants répondent automatiquement au paramètre `mode` dans `themeSettings`. Pour synchroniser avec le mode sombre de votre application :

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

      return (
        <Auth0ComponentProvider
          mode="proxy"
          domain="your-tenant.auth0.com"
          proxyConfig={{ baseUrl: "/api/auth" }}
          themeSettings={{
            mode: isDark ? "dark" : "light",
          }}
        >
          <YourApp />
        </Auth0ComponentProvider>
      );
    }
    ```

    Ou utiliser la préférence système :

    ```tsx theme={null}
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    <Auth0ComponentProvider
      mode="proxy"
      domain="your-tenant.auth0.com"
      proxyConfig={{ baseUrl: "/api/auth" }}
      themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
    >
    ```
  </Tab>

  <Tab title="shadcn">
    ## Premiers pas

    1. Aucun import de style n’est nécessaire.

    Avec Shadcn, les styles sont déjà inclus dans votre build Tailwind. Aucune importation supplémentaire n'est nécessaire.

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Si vous utilisez Tailwind v4, ajoutez `@import
                                "@auth0/universal-components-react/tailwind"` dans votre fichier CSS.
    </Callout>

    2. Ajoutez votre couleur de marque.

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* couleur de votre marque */
      --primary-foreground: #ffffff; /* texte sur les boutons */
    }
    ```

    Terminé. Tous les boutons, liens et états actifs utilisent désormais votre marque.

    ***

    ## Préréglages de thème

    Passez `themeSettings` à `Auth0ComponentProvider` pour alterner entre les thèmes intégrés.

    ```tsx App.tsx theme={null}
    <Auth0ComponentProvider
      themeSettings={{
        mode: "light", // 'light' | 'dark'
        theme: "default", // 'default' | 'minimal' | 'rounded'
      }}
    >
      <App />
    </Auth0ComponentProvider>
    ```

    <table class="table">
      <thead>
        <tr>
          <th>Préréglage</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>default</code>
          </td>

          <td>Apparence Auth0 standard avec des ombres et des bordures équilibrées</td>
        </tr>

        <tr>
          <td>
            <code>minimal</code>
          </td>

          <td>Impact visuel réduit avec moins d’ombres et des bordures plus légères</td>
        </tr>

        <tr>
          <td>
            <code>rounded</code>
          </td>

          <td>Rayons de bordure plus grands pour une apparence plus douce</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Examiner les variables CSS

    Toutes les propriétés visuelles sont définies par des propriétés personnalisées CSS. Remplacez-les dans votre feuille de style ou via la prop `themeSettings.variables`.

    <Tabs>
      <Tab title="Couleurs (claires)">
        ```css theme={null}
        :root {
          /* Marque - les variables les plus importantes */
          --primary: oklch(37% 0 0);              /* boutons, liens, états actifs */
          --primary-foreground: oklch(100% 0 0);  /* texte sur les surfaces primaires */

        /_ Surfaces _/
        --background: oklch(100% 0 0); /_ arrière-plan de la page _/
        --foreground: oklch(9% 0 0); /_ texte par défaut _/
        --card: oklch(100% 0 0); /_ arrière-plan de la carte _/
        --card-foreground: oklch(0% 0 0); /_ texte dans les cartes _/
        --popover: oklch(100% 0 0); /_ arrière-plan du menu déroulant/dialogue _/
        --popover-foreground: oklch(9% 0 0); /_ texte dans les fenêtres contextuelles _/
        --input: oklch(100% 0 0); /_ arrière-plan du champ de saisie _/

        /_ Secondaire et atténué _/
        --secondary: oklch(96% 0 0);
        --secondary-foreground: oklch(100% 0 0);
        --muted: oklch(96% 0 0); /_ arrière-plans désactivés _/
        --muted-foreground: oklch(45% 0 0); /_ texte d'espace réservé _/

        /_ Accentuation et destructif _/
        --accent: oklch(97% 0 0); /_ surlignages au survol _/
        --accent-foreground: oklch(9% 0 0);
        --destructive: oklch(93% 0.03 17); /_ états d'erreur _/
        --destructive-foreground: oklch(36% 0.14 17);

        /_ Bordures _/
        --border: oklch(89% 0 0);
        --ring: oklch(89% 0 0); /_ anneau de focus _/
        }

        ```
      </Tab>

      <Tab title="Couleurs (mode sombre)">
        ```css theme={null}
        .dark {
          /* Marque */
          --primary: oklch(70% 0.15 250);         /* plus lumineux pour les arrière-plans sombres */
          --primary-foreground: oklch(10% 0 0);

          /* Surfaces */
          --background: oklch(12% 0 0);
          --foreground: oklch(95% 0 0);
          --card: oklch(15% 0 0);
          --card-foreground: oklch(95% 0 0);
          --popover: oklch(15% 0 0);
          --popover-foreground: oklch(95% 0 0);
          --input: oklch(18% 0 0);

          /* Secondaire et atténué */
          --secondary: oklch(20% 0 0);
          --secondary-foreground: oklch(95% 0 0);
          --muted: oklch(20% 0 0);
          --muted-foreground: oklch(60% 0 0);

          /* Accent et destructif */
          --accent: oklch(25% 0 0);
          --accent-foreground: oklch(95% 0 0);
          --destructive: oklch(30% 0.15 17);
          --destructive-foreground: oklch(95% 0.05 17);

          /* Bordures */
          --border: oklch(25% 0 0);
          --ring: oklch(35% 0 0);
        }
        ```
      </Tab>

      <Tab title="Rayon de la bordure">
        ```css theme={null}
        :root {
          /* Commun - ajustez ces valeurs pour l'apparence générale */
          --radius-sm:  4px;    /* étiquettes, puces */
          --radius-md:  6px;    /* petits éléments */
          --radius-lg:  10px;   /* boutons, champs */
          --radius-xl:  12px;   /* cartes */
          --radius-2xl: 16px;   /* fenêtres modales, grands panneaux */

        /_ Granularité fine (rarement nécessaire) _/
        --radius-xs: 2px;
        --radius-3xl: 20px;
        --radius-4xl: 24px;
        --radius-5xl: 32px;
        }

        ```
      </Tab>

      <Tab title="Typographie">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36px - titre principal */
          --font-size-heading:          1.5rem;    /* 24px - titres de section */
          --font-size-title:            1.25rem;   /* 20px - titres de carte */
          --font-size-subtitle:         1.125rem;  /* 18px - titres secondaires */
          --font-size-body:             1rem;      /* 16px - texte courant */
          --font-size-paragraph:        0.875rem;  /* 14px - descriptions */
          --font-size-label:            0.875rem;  /* 14px - étiquettes de formulaire */
          --font-size-page-description: 0.875rem;  /* 14px - sous-titres */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## Composants de style

    Chaque composant accepte une prop `styling` pour des substitutions ciblées sans affecter les styles globaux.

    ```tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--primary": "#059669", // remplacer uniquement pour ce composant
          },
          light: { "--card": "#f8fafc" },
          dark: { "--card": "#1e293b" },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    **Quand utiliser :**

    * `variables` - redéfinitions des propriétés CSS personnalisées propres au composant
    * `classes` - classes Tailwind ou personnalisées appliquées à des parties spécifiques du composant

    <Accordion title="Classes cibles disponibles par composant">
      Chaque composant expose des classes cibles pour ses principales sections :

      **SsoProviderCreate**

      * `SsoProviderCreate-header`, `SsoProviderCreate-wizard`
      * `ProviderSelect-root`, `ProviderDetails-root`, `ProviderConfigure-root`

      **SsoProviderTable**

      * `SsoProviderTable-header`, `SsoProviderTable-table`, `SsoProviderTable-row`

      **SsoProviderEdit**

      * `SsoProviderEdit-header`, `SsoProviderEdit-tabs`
      * `SsoProviderEdit-ssoTab`, `SsoProviderEdit-provisioningTab`, `SsoProviderEdit-domainsTab`

      **DomainTable**

      * `DomainTable-header`, `DomainTable-table`
      * `DomainTable-createModal`, `DomainTable-configureModal`, `DomainTable-deleteModal`

      **OrganizationDetailsEdit**

      * `OrganizationDetailsEdit-header`, `OrganizationDetailsEdit-form`, `OrganizationDetailsEdit-actions`
    </Accordion>

    ***

    ## Personnalisations courantes

    ### Couleurs de marque (Hex)

    Convertissez la couleur hexadécimale de votre marque au format utilisé en CSS :

    ```css theme={null}
    :root {
      /* Utilisation directe de la valeur hexadécimale */
      --primary: #4f46e5;
      --primary-foreground: #ffffff;

      /* Ou oklch pour une meilleure manipulation des couleurs */
      --primary: oklch(50% 0.2 265); /* violet */
    }
    ```

    ### Coins arrondis

    Pour un style plus arrondi sur l'ensemble des composants :

    ```css theme={null}
    :root {
      --radius-lg: 16px; /* boutons, champs de saisie */
      --radius-xl: 20px; /* cartes */
      --radius-2xl: 24px; /* fenêtres modales */
    }
    ```

    ### Typographie compacte

    Pour les interfaces plus denses :

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## Mode sombre

    Les composants répondent automatiquement au paramètre `mode` dans `themeSettings`. Pour synchroniser avec le mode sombre de votre application :

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

      return (
        <Auth0ComponentProvider
          themeSettings={{
            mode: isDark ? "dark" : "light",
          }}
        >
          <YourApp />
        </Auth0ComponentProvider>
      );
    }
    ```

    Ou utiliser la préférence système :

    ```tsx theme={null}
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    <Auth0ComponentProvider
      themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
    >
    ```
  </Tab>
</Tabs>