> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.poool.fr/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).

# Personnaliser le countdown (compte à rebours) en CSS

Le countdown peut être entièrement personnalisé via CSS.
L’objectif est de vous permettre d’adapter facilement son apparence (taille, couleurs, espacements, bordures, etc.) tout en gardant une base stable.

## Structure CSS de base

Voici une structure CSS guidée que vous pouvez utiliser comme point de départ.
Chaque section correspond à une partie précise du composant.

### 1. Conteneur global

Le conteneur principal regroupe l’ensemble du countdown.

```
.p3-countdown {
  /* Fond global du countdown */
  /* background: */

  /* Espace intérieur global */
  /* padding: */

  /* Espace entre les blocs (Heure / Minute / Seconde) */
  /* gap: */
}
```

### 2. Blocs (heure / minute / seconde)

Chaque unité du countdown est contenue dans un bloc.

```
.p3-countdown .unit {
  /* Fond de chaque bloc */
  /* background: */

  /* Espace intérieur du bloc */
  /* padding: */
}
```

### 3. Chiffres (00, 12, etc.)

Cette partie concerne l’affichage des chiffres.

```
.p3-countdown .unit h3 {
  /* Taille des chiffres */
  /* font-size: */

  /* Couleur des chiffres */
  /* color: */

  /* Espace avec le texte */
  /* line-height: */
}
```

### 4. Textes (heure / minute / seconde)

Les labels sous les chiffres peuvent également être stylisés.
```
.p3-countdown .unit .secondary {
  /* Taille du texte */
  /* font-size: */

  /* Couleur du texte */
  /* color: */
}
```

## Exemple d’ajustements

De notre côté, voici un exemple de quelques ajustements CSS afin d’améliorer le rendu global du countdown avec un séparateur “:” ajouté automatiquement entre les blocs pour améliorer la lisibilité.

```
.p3-countdown {
  gap: 30px;
}

.p3-countdown .unit {
  position: relative;
}

.p3-countdown h3.junipero {
  line-height: 33px;
}
```
```
.p3-countdown .unit:not(:last-child)::after {
  content: ":";
  position: absolute;
  right: -18px;
  top: 45%;
  transform: translateY(-50%);
  font-size: 24px;
}
```

## Bonnes pratiques

Pour un rendu propre et cohérent :
* gardez des contrastes simples pour la lisibilité
* évitez de surcharger les blocs avec trop d’effets
* testez le rendu sur mobile