/*
 * Surfaces Bonbon Piment : admin agence, puis tableau de bord commerçant (charte §1, §6).
 * Fond crème, zones de contenu sur blanc. Le rouge se dépense à un seul endroit par écran :
 * le bouton principal OU le chiffre clé, pas les deux.
 */

.bbp {
  --accent: var(--lagon);
  --accent-texte: var(--ecume);
  --accent-survol: var(--lagon-profond);
  --accent-sur-blanc: var(--lagon);
  --focus: var(--lagon);
  min-height: 100vh;
  background: var(--ecume);
  color: var(--encre);
}

.bbp-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-4);
  padding: var(--espace-3) var(--espace-4);
  border-block-end: var(--trait) solid var(--ligne);
}

@media (min-width: 768px) {
  .bbp-entete {
    padding-inline: var(--espace-8);
  }
}

.bbp-entete__marque {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  border-radius: var(--rayon-petit);
}

.bbp-entete__logo {
  height: var(--hauteur-logo-marque);
  width: auto;
}

.bbp-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bbp-navigation a,
.bbp-navigation button {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-3);
  border: 0;
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--encre);
  font-size: var(--taille-16);
  text-decoration: none;
  cursor: pointer;
}

.bbp-navigation a:hover,
.bbp-navigation button:hover {
  background: var(--ecume-profonde);
}

.bbp-navigation [aria-current="page"] {
  font-weight: var(--graisse-forte);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .35em;
}

.bbp-contenu {
  max-width: var(--largeur-bbp);
  margin: 0 auto;
  padding: var(--espace-6) var(--espace-4) var(--espace-12);
}

@media (min-width: 768px) {
  .bbp-contenu {
    padding: var(--espace-8) var(--espace-8) var(--espace-12);
  }
}

.bbp-contenu--etroite {
  max-width: var(--largeur-etroite);
}

/* Zone de contenu sur blanc. Une seule hiérarchie de conteneurs : ce qui est secondaire reste
   sur le crème, sans bordure. */
.zone {
  margin: 0 0 var(--espace-8);
  padding: var(--espace-6);
  background: var(--blanc);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon-grand);
}

.zone > :last-child {
  margin-bottom: 0;
}

.bbp-intro {
  color: var(--encre-douce);
}