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

# CSS personnalisé

> Ajoutez du CSS personnalisé pour affiner votre Aftersell Cart au-delà des paramètres de design intégrés.

Lorsque les [paramètres de design](/fr/aftersell/cart/design-settings) intégrés ne suffisent pas, ajoutez votre propre **CSS personnalisé** pour styliser le panier.

<div id="where-to-add-it">
  ## Où l'ajouter
</div>

Dans l'éditeur de panier, ouvrez **Cart settings → Custom CSS**. Votre CSS **s'applique à tout le panier** et est chargé **après** les styles de base du panier, vos règles ont donc la priorité.

<div id="target-public-classes-only">
  ## Ne ciblez que les classes publiques
</div>

Stylisez le panier en utilisant ses **classes publiques `cart-external-*`**. L'éditeur les complète automatiquement et vous met en garde contre les autres :

* **`cart-external-*`** : la cible publique et prise en charge. Utilisez-les. Elles ne portent aucun style propre, elles existent donc uniquement pour que votre CSS puisse s'y accrocher.
* **`cart-internal-*`** : la tuyauterie interne du panier, où réside tout son style intégré. L'éditeur signale les sélecteurs qui les ciblent comme des erreurs. Elles ne sont pas modifiées à la légère, puisque chaque panier existant en dépend, mais elles appartiennent au panier plutôt que d'être un contrat avec vous. Restylisez plutôt via la jumelle `cart-external-*`.
* Les autres classes `cart-*` que l'éditeur ne reconnaît pas sont signalées comme des avertissements.

<Note>
  Vous verrez des classes `cart-internal-*` dans le balisage, y compris dans le [modèle personnalisé](/fr/aftersell/cart/custom-templates) par défaut de chaque bloc. C'est normal : ce sont elles qui donnent à un bloc son apparence intégrée. La règle ici concerne les **sélecteurs que vous écrivez** dans ce panneau, pas les noms de classes que le panier affiche.

  Si vous écrivez un modèle personnalisé qui modifie la structure DOM d'un bloc, consultez [Styliser un modèle personnalisé](/fr/aftersell/cart/custom-templates#styling-a-custom-template) pour savoir quels noms de classes conserver et lesquels abandonner.
</Note>

<div id="shadow-dom-the-cart-is-self-contained">
  ## Shadow DOM : le panier est autonome
</div>

Sur la boutique, tout le panier s'affiche à l'intérieur de son propre **shadow DOM**. Cela signifie :

* Le CSS de votre thème ne peut pas s'infiltrer dans le panier, et le CSS du panier ne peut pas s'en échapper, donc votre CSS personnalisé est automatiquement limité au panier et n'entrera pas en conflit avec le reste de votre site.
* Vos sélecteurs doivent référencer des éléments et des classes **à l'intérieur du panier**. Les sélecteurs visant des éléments de page en dehors du panier ne peuvent pas y accéder.

La même frontière s'applique au JavaScript : `document.querySelector` ne peut pas non plus voir à l'intérieur du tiroir. Un script cherchant à atteindre un élément du panier doit passer par [`shadowRoot`](/fr/aftersell/cart/sdk-overview#shadowroot), et il cible ces mêmes classes `cart-external-*`.

<div id="when-to-use-design-settings-instead">
  ## Quand utiliser plutôt les paramètres de design
</div>

Pour les couleurs, les arrondis, les espacements et la largeur, les [paramètres de design](/fr/aftersell/cart/design-settings) intégrés sont plus simples et plus sûrs, ne recourez donc au CSS personnalisé que pour ce qu'ils ne couvrent pas.

<div id="where-to-go-next">
  ## Pour aller plus loin
</div>

* **[Paramètres de design](/fr/aftersell/cart/design-settings)** : les contrôles de style intégrés, et la première chose à essayer.
* **[Modèles personnalisés](/fr/aftersell/cart/custom-templates)** : remplacez entièrement le balisage d'un bloc lorsque le CSS seul ne suffit pas.
* **[Cart SDK](/fr/aftersell/cart/sdk-overview)** : pour le comportement plutôt que l'apparence.