> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Style personnalisé avec CSS (Legacy Banner)

### Vue d'ensemble

Sur la Legacy Banner, la plupart des options d'apparence se trouvent dans **Settings > Banner > Style** : mise en page (position, largeur, thème), couleurs, logo, polices, **z-index** et animations. N'utilisez du **CSS personnalisé** que lorsque ces champs ne suffisent pas.

||| **Le CSS personnalisé et le style avancé sont disponibles avec les plans payants** (par exemple Plus et supérieurs), pas avec le plan gratuit Basic.

||| **Legacy Banner.** Pour les boutiques **sans** le badge **New version** sur **Settings > Banner**. Pour la nouvelle bannière (New Banner), consultez [Comment passer à la nouvelle bannière ou revenir à la version précédente](/fr/article/comment-passer-a-la-nouvelle-banniere-ou-revenir-a-la-version-precedente-12cd6wh/).

Étapes pour la New Banner : [Style personnalisé avec CSS](/fr/article/personnalisation-avec-du-css-1yap2gc/).

### Où ajouter du CSS (Legacy Banner)

1. Ouvrez **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Allez dans **Settings > Banner**.
3. Vérifiez que vous ne voyez **pas** le badge **New version** (l'interface Legacy utilise les onglets **Behavior**, **Style** et **Content**).
4. Ouvrez l'onglet **Style**.
5. Utilisez **Layout**, **Colors** et **Advanced styling** pour les polices, le **z-index** et les animations.
6. Ajoutez vos règles dans la zone de **CSS personnalisé** de l'onglet Style (incluse avec **Advanced styling** sur les plans payants).
7. **Save**, puis testez sur la boutique en ligne dans une fenêtre privée.

### Comment la Legacy Banner apparaît dans le DOM

Racines typiques sur la boutique en ligne :

* `#pandectes-banner`
* Classes CookieConsent : `.cc-window`, `.cc-message`, `.cc-compliance`, `.cc-btn`

Le CSS du thème **peut** affecter la bannière legacy, car elle n'est pas dans un shadow root comme la New Banner. Préférez tout de même le champ de CSS personnalisé de **Style** dans Pandectes, pour que les règles suivent vos paramètres Pandectes.

### Privilégiez les paramètres de l'application avant le CSS

| Objectif | Emplacement Legacy |
| --- | --- |
| Barre, flottante ou popup | **Style > Layout > Position** |
| Largeur | **Style > Layout > Width** |
| Couleurs | **Style > Colors** |
| Logo | **Style > Banner logo** |
| Polices | **Style > Advanced styling** |
| z-index | **Style > Advanced styling > z-index** |
| Libellés des boutons | Onglet **Content** |

### Exemples de sélecteurs (à vérifier sur votre boutique)

Limitez si possible les règles à la racine de la bannière :

#### Fenêtre de la bannière

```css
#pandectes-banner .cc-window {
  border-top: 3px solid #00ffbf;
}
```

#### Texte du message

```css
#pandectes-banner .cc-message {
  font-size: 14px;
}
```

#### Boutons Accept / Decline

```css
#pandectes-banner .cc-btn.cc-allow {
  background-color: #111111;
}

#pandectes-banner .cc-btn.cc-deny {
  background-color: #666666;
}
```

#### Popup des préférences

Ouvrez le panneau des préférences sur votre boutique et inspectez les noms de classes. Ils varient selon le type de bannière (**Preferences**, **Informative**, etc.). Consultez [Modes de la bannière de cookies (version Legacy)](/fr/article/modes-de-la-banniere-de-cookies-ancienne-version-839k7m/).

### Inspecter la bannière en direct

1. Ouvrez la boutique en ligne avec la bannière visible.
2. Faites un clic droit sur la bannière puis **Inspect**.
3. Repérez `#pandectes-banner` ou `.cc-window` dans le DOM.
4. Copiez les noms de classes des éléments que vous voulez styliser. Ne collez pas les sélecteurs du guide de la New Banner (`dialog.notice`, `pandectes-cmp`).

### Passer à la New Banner

Le CSS personnalisé de la Legacy **ne migre pas automatiquement**. Après la mise à niveau, recréez les règles dans **Style > Custom styling** sur la New Banner. Consultez :

* [Comment passer à la nouvelle bannière ou revenir à la version précédente](/en/article/how-to-switch-to-the-new-banner-or-switch-back-to-the-previous-version-1r1oqc2/)
* [Style personnalisé avec CSS (New Banner)](/fr/article/personnalisation-avec-du-css-1yap2gc/)

### Articles associés

* [Personnaliser la mise en page de la bannière (version Legacy)](/fr/article/personnaliser-la-mise-en-page-de-la-banniere-version-legacy-t3cb0f/)
* [Modes de la bannière de cookies (version Legacy)](/fr/article/modes-de-la-banniere-de-cookies-ancienne-version-839k7m/)