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

# Personnalisez les jeux de couleurs de votre espace de travail AgencyHandy

> Appliquez les couleurs de votre marque à la barre latérale et à l'interface d'AgencyHandy — couleur principale, arrière-plan, texte et états de survol — visibles instantanément par tous les utilisateurs.

Les paramètres d'apparence vous donnent un contrôle total sur l'aspect de votre espace de travail AgencyHandy. Vous pouvez aligner le jeu de couleurs de la plateforme sur l'identité de marque de votre agence en personnalisant la couleur principale, l'arrière-plan de la barre latérale, la couleur du texte de la barre latérale et la couleur de surbrillance au survol des éléments de navigation de la barre latérale. Chaque modification que vous enregistrez prend effet immédiatement dans l'ensemble de l'espace de travail pour tous les utilisateurs — aucun rafraîchissement de page n'est nécessaire.

<Note>
  Seuls les **Super Admins** et les **Admins** peuvent accéder aux paramètres d'apparence et les modifier. Si vous ne voyez pas cette option sous **Workspace Config**, demandez à votre Super Admin de vérifier votre rôle.
</Note>

## Accéder aux paramètres d'apparence

<Steps>
  <Step title="Ouvrez Workspace Config">
    Dans le menu de navigation gauche, cliquez sur **Workspace Config**.
  </Step>

  <Step title="Sélectionnez Appearance">
    Cliquez sur **Appearance** (parfois libellé **Visual Settings**) dans le sous-menu.
  </Step>
</Steps>

***

## Personnaliser chaque élément visuel

### Couleur principale

La couleur principale est appliquée aux boutons, aux liens actifs, aux états en surbrillance et aux éléments clés de l'interface sur toute la plateforme.

* Choisissez une couleur qui reflète l'identité fondamentale de votre marque.
* C'est le paramètre de couleur le plus impactant, car il apparaît partout dans l'interface.

### Couleur d'arrière-plan de la barre latérale

L'arrière-plan de la barre latérale définit la teinte de base du panneau de navigation gauche.

* Utilisez une couleur qui crée une séparation visuelle nette entre la barre latérale et la zone de contenu principale.
* Les arrière-plans sombres avec un texte clair offrent généralement la meilleure lisibilité.

### Couleur du texte de la barre latérale

La couleur du texte de la barre latérale contrôle la couleur des libellés de tous les éléments de navigation du menu gauche.

* Choisissez toujours une couleur qui présente un fort contraste avec la couleur d'arrière-plan de votre barre latérale.
* Un mauvais contraste rend les liens plus difficiles à lire et réduit l'accessibilité.

### Couleur d'arrière-plan au survol de la barre latérale

Cette couleur apparaît comme surbrillance d'arrière-plan lorsqu'un utilisateur déplace son curseur sur un élément de navigation de la barre latérale.

* Elle signale l'interactivité et aide les utilisateurs à comprendre sur quel élément ils s'apprêtent à cliquer.
* Choisissez une couleur visiblement distincte à la fois de l'arrière-plan par défaut de la barre latérale et de la couleur de l'élément actif.

***

## Appliquer vos choix de couleurs

<Steps>
  <Step title="Ouvrez le sélecteur de couleurs pour chaque champ">
    Cliquez sur l'échantillon de couleur à côté de l'un des quatre champs d'apparence — couleur principale, arrière-plan de la barre latérale, couleur du texte de la barre latérale ou couleur d'arrière-plan au survol de la barre latérale — pour ouvrir le sélecteur de couleurs.
  </Step>

  <Step title="Saisissez un code hexadécimal ou choisissez une couleur">
    Tapez le code hexadécimal exact de votre marque (par ex. `#3B5BDB`) directement dans le champ de saisie, ou utilisez le sélecteur visuel pour choisir une teinte.
  </Step>

  <Step title="Prévisualisez les changements">
    Examinez l'aspect des couleurs mises à jour dans la barre latérale et dans l'interface avant d'enregistrer.
  </Step>

  <Step title="Cliquez sur Save Changes">
    Lorsque le résultat vous convient, cliquez sur **Save Changes**. L'apparence mise à jour est appliquée globalement et instantanément à tous les utilisateurs de l'espace de travail.
  </Step>
</Steps>

<Tip>
  Conservez un enregistrement des codes de couleur hexadécimaux de votre marque dans un endroit accessible (une charte graphique ou un fichier de notes). Vous voudrez réutiliser exactement les mêmes valeurs de manière cohérente — surtout si vous devez un jour réinitialiser et reconfigurer vos paramètres d'apparence.
</Tip>

***

## Réinitialiser au thème par défaut

Si vous voulez supprimer toute personnalisation de marque et restaurer le jeu de couleurs d'origine d'AgencyHandy, cliquez sur le bouton **Reset Default Settings** sur la page Appearance.

<Warning>
  La réinitialisation aux valeurs par défaut supprime définitivement toutes les modifications de couleurs personnalisées. Cette action ne peut pas être annulée. Si vous voulez conserver vos paramètres actuels, notez vos codes hexadécimaux avant de réinitialiser.
</Warning>

***

## Bonnes pratiques de contraste des couleurs

Un bon contraste des couleurs n'est pas seulement une préférence de conception — il affecte directement la lisibilité et l'accessibilité pour votre équipe et vos clients.

<CardGroup cols={2}>
  <Card title="Visez les ratios de contraste WCAG AA" icon="eye">
    Pour le texte courant, utilisez un ratio de contraste d'au moins **4,5:1** entre le texte et l'arrière-plan. Pour le texte de grande taille ou les icônes, un ratio de **3:1** est acceptable. Utilisez un outil comme le [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) pour vérifier.
  </Card>

  <Card title="Évitez les combinaisons à faible contraste" icon="triangle-exclamation">
    Ne juxtaposez pas des couleurs comme un texte gris clair sur blanc, ou un texte jaune sur blanc — elles ne respectent pas les normes d'accessibilité et fatiguent les yeux lors de longues sessions.
  </Card>

  <Card title="Testez délibérément les états de survol" icon="arrow-pointer">
    Les couleurs de survol doivent être nettement différentes à la fois de l'état au repos et de l'état actif. Si elles se ressemblent, les utilisateurs perdent un retour visuel important.
  </Card>

  <Card title="Restez cohérent avec votre marque" icon="paintbrush">
    Utilisez ici la même couleur principale que sur votre site web, vos propositions et vos factures. La cohérence renforce la reconnaissance et le professionnalisme sur tous les points de contact avec les clients.
  </Card>
</CardGroup>

***

## Remarques importantes

* **Effet global instantané :** toutes les modifications d'apparence enregistrées sont appliquées immédiatement dans l'ensemble de l'espace de travail. Chaque utilisateur connecté voit la mise à jour lors de sa prochaine action de navigation.
* **Un seul thème actif :** il n'y a pas de prise en charge de plusieurs thèmes — un seul jeu de couleurs s'applique à tout l'espace de travail pour tous les rôles.
* **Restriction par rôle :** seuls les Super Admins et les Admins peuvent modifier l'apparence. Les membres ordinaires de l'équipe et les clients ne peuvent pas modifier les couleurs.
* **La réinitialisation est permanente :** le bouton **Reset Default Settings** ne peut pas être annulé, alors ne l'utilisez que lorsque vous voulez intentionnellement supprimer toutes les couleurs personnalisées.