Tutoriel : Créer une page de tarification (pricing) responsive

La page de pricing : anatomie d’un composant essentiel

La page de tarification est l’une des pages les plus consultées sur un site SaaS ou de services. Elle doit être claire, responsive et guider l’utilisateur vers le plan recommandé. Dans ce tutoriel, vous construisez une page de pricing complète avec HTML et CSS, incluant un switch mensuel/annuel, un plan mis en avant, et un design qui fonctionne sur mobile et desktop.

Le HTML structuré

<section class="pricing">
  <h2 class="pricing-title">Choisissez votre plan</h2>
  <p class="pricing-subtitle">Commencez gratuitement, évoluez quand vous êtes prêt</p>
  
  <!-- Switch mensuel/annuel -->
  <div class="billing-toggle">
    <span class="toggle-label">Mensuel</span>
    <label class="toggle-switch">
      <input type="checkbox" id="billingToggle">
      <span class="toggle-slider"></span>
    </label>
    <span class="toggle-label">Annuel <span class="badge">-20%</span></span>
  </div>

  <div class="pricing-cards">
    <!-- Plan Starter -->
    <div class="pricing-card">
      <h3 class="card-plan">Starter</h3>
      <div class="card-price">
        <span class="price-amount" data-monthly="0" data-annual="0">0</span>
        <span class="price-currency">FCFA</span>
        <span class="price-period">/mois</span>
      </div>
      <p class="card-description">Pour découvrir et tester</p>
      <ul class="card-features">
        <li class="feature-included">1 site web</li>
        <li class="feature-included">5 Go de stockage</li>
        <li class="feature-included">Support par email</li>
        <li class="feature-excluded">Domaine personnalisé</li>
        <li class="feature-excluded">Analytics avancés</li>
      </ul>
      <a href="#" class="card-button">Commencer gratuitement</a>
    </div>

    <!-- Plan Pro (recommandé) -->
    <div class="pricing-card featured">
      <span class="card-badge">Le plus populaire</span>
      <h3 class="card-plan">Pro</h3>
      <div class="card-price">
        <span class="price-amount" data-monthly="15000" data-annual="12000">15 000</span>
        <span class="price-currency">FCFA</span>
        <span class="price-period">/mois</span>
      </div>
      <p class="card-description">Pour les professionnels et freelances</p>
      <ul class="card-features">
        <li class="feature-included">10 sites web</li>
        <li class="feature-included">50 Go de stockage</li>
        <li class="feature-included">Support prioritaire</li>
        <li class="feature-included">Domaine personnalisé</li>
        <li class="feature-included">Analytics avancés</li>
      </ul>
      <a href="#" class="card-button primary">Choisir Pro</a>
    </div>

    <!-- Plan Business -->
    <div class="pricing-card">
      <h3 class="card-plan">Business</h3>
      <div class="card-price">
        <span class="price-amount" data-monthly="45000" data-annual="36000">45 000</span>
        <span class="price-currency">FCFA</span>
        <span class="price-period">/mois</span>
      </div>
      <p class="card-description">Pour les équipes et entreprises</p>
      <ul class="card-features">
        <li class="feature-included">Sites illimités</li>
        <li class="feature-included">Stockage illimité</li>
        <li class="feature-included">Support 24/7 par téléphone</li>
        <li class="feature-included">Domaine personnalisé</li>
        <li class="feature-included">API et intégrations</li>
      </ul>
      <a href="#" class="card-button">Contacter l'équipe</a>
    </div>
  </div>
</section>

Le CSS complet

/* Layout général */
.pricing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
}

.pricing-title { font-size: 2.5rem; margin-bottom: 8px; }
.pricing-subtitle { color: #666; margin-bottom: 30px; }

/* Toggle mensuel/annuel */
.billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
}

.toggle-switch input { display: none; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 28px;
  cursor: pointer;
  transition: background 0.3s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
  background: #4a90d9;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(24px);
}

.badge {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Cartes de prix */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.pricing-card {
  background: white;
  border: 2px solid #e8e8e8;
  border-radius: 16px;
  padding: 40px 30px;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

.pricing-card.featured {
  border-color: #4a90d9;
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(74, 144, 217, 0.2);
}

.card-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #4a90d9;
  color: white;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.price-amount { font-size: 3rem; font-weight: 800; }
.price-currency { font-size: 1.2rem; }
.price-period { color: #999; }

.card-features {
  list-style: none;
  padding: 0;
  text-align: left;
  margin: 24px 0;
}

.card-features li {
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.feature-included::before { content: '✓ '; color: #4caf50; font-weight: bold; }
.feature-excluded { color: #ccc; }
.feature-excluded::before { content: '✕ '; }

.card-button {
  display: block;
  padding: 14px;
  border: 2px solid #4a90d9;
  color: #4a90d9;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
}

.card-button:hover {
  background: #4a90d9;
  color: white;
}

.card-button.primary {
  background: #4a90d9;
  color: white;
}

.card-button.primary:hover {
  background: #3a7bc8;
}

/* Responsive */
@media (max-width: 768px) {
  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
  .pricing-card.featured {
    transform: none;
    order: -1; /* Le plan recommandé en premier sur mobile */
  }
}

Le JavaScript : switch des prix

const toggle = document.getElementById('billingToggle');
const prices = document.querySelectorAll('.price-amount');

toggle.addEventListener('change', () => {
  const isAnnual = toggle.checked;
  
  prices.forEach(price => {
    const amount = isAnnual 
      ? parseInt(price.dataset.annual)
      : parseInt(price.dataset.monthly);
    
    // Animation de transition
    price.style.opacity = '0';
    setTimeout(() => {
      price.textContent = amount.toLocaleString('fr-FR');
      price.style.opacity = '1';
    }, 200);
  });
});

Bonnes pratiques UX pour une page pricing

• 3 plans maximum — au-delà, l’utilisateur est paralysé par le choix
• Mettre en avant le plan recommandé — bordure colorée, badge, taille plus grande
• Nommer les plans simplement — Starter, Pro, Business (pas Plan A, Plan B)
• Montrer ce qui est inclus ET exclu — les ✕ aident à comparer
• Prix en monnaie locale — FCFA au Sénégal, pas USD
• CTA clair — « Commencer gratuitement » > « S’inscrire »

Exercice

1. Reproduisez cette page de pricing avec vos propres services
2. Ajoutez une FAQ sous les cartes avec des accordéons
3. Ajoutez une animation d’entrée avec Intersection Observer quand l’utilisateur scrolle jusqu’aux cartes
4. Rendez le toggle mensuel/annuel accessible au clavier