/* components.css — Composants réutilisables Outillée */

/* Boutons */
.btn {
  display: inline-block;
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-full);
  font-family: var(--font-corps);
  font-size: var(--size-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s, transform 0.1s;
}
.btn:hover { opacity: 0.9; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-principal {
  background-color: var(--color-cta);
  color: white;
}

.btn-secondaire {
  background-color: transparent;
  color: var(--color-corail);
  border: 2px solid var(--color-corail);
}

/* Cartes */
.carte {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
}

/* Encadré pédagogique */
.encadre-pedagogique {
  background-color: color-mix(in srgb, var(--color-bleu) 15%, white);
  border-left: 4px solid var(--color-bleu);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
}

/* Badge */
.badge {
  display: inline-block;
  background-color: var(--color-badge);
  color: var(--color-fonce);
  font-size: var(--size-sm);
  font-weight: 700;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
}

/* Bulle de témoignage */
.temoignage {
  background-color: color-mix(in srgb, var(--color-rose) 20%, white);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
}

/* ─── Bannière avec bloc ─────────────────────────────────────
   Structure HTML :
   <div class="banniere banniere-corail">
     <div class="banniere-bloc">
       <h2>Titre</h2>
       <p>Texte</p>
     </div>
   </div>

   Variantes de fond : banniere-corail · banniere-bleu · banniere-rose
                       banniere-ocre · banniere-olive · banniere-fonce
──────────────────────────────────────────────────────────── */
.banniere {
  padding: var(--space-3xl) var(--space-xl);
  display: flex;
  justify-content: center;
  align-items: center;
}

.banniere-bloc {
  background-color: var(--color-creme);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-3xl);
  max-width: 680px;
  width: 100%;
  text-align: center;
}

/* Variantes de couleur de fond */
.banniere-corail { background-color: var(--color-corail); }
.banniere-bleu   { background-color: var(--color-bleu); }
.banniere-rose   { background-color: var(--color-rose); }
.banniere-ocre   { background-color: var(--color-ocre); }
.banniere-olive  { background-color: var(--color-olive); }
.banniere-fonce  { background-color: var(--color-fonce); }

/* Ombre légère sur le bloc */
.banniere-corail .banniere-bloc,
.banniere-bleu   .banniere-bloc,
.banniere-rose   .banniere-bloc,
.banniere-ocre   .banniere-bloc,
.banniere-olive  .banniere-bloc,
.banniere-fonce  .banniere-bloc { box-shadow: var(--shadow-md); }

@media (max-width: 768px) {
  .banniere { padding: var(--space-2xl) var(--space-md); }
  .banniere-bloc { padding: var(--space-xl) var(--space-lg); }
}