/**
 * Klaro CMP — Overrides visuels Pharm'Alpha
 * Conformite CNIL : symetrie des 3 boutons (accepter / refuser / personnaliser)
 * WCAG 2.5.5 : taille minimum 44x44px — contraste AA minimum
 * Palette Pharm'Alpha : orange #f97316, noir #0a0a0a, blanc #fafafa
 *
 * Classes Klaro v0.7 :
 *   .cm-btn                — base commune tous boutons
 *   .cm-btn-accept-all     — "Tout accepter"
 *   .cm-btn-decline        — "Tout refuser"
 *   .cm-btn-info / .cm-learn-more — "Personnaliser" (notice)
 *   .cm-btn-accept         — "Tout accepter" (modal)
 */

/* Base commune — taille, padding, border-radius, font */
.cm-btn {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 10px 18px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: opacity 0.15s ease !important;
}

.cm-btn:hover {
  opacity: 0.88 !important;
}

/* Bouton "Tout accepter" — orange assombri #e67835 (contraste 3:1 sur fond clair) */
.cm-btn-accept-all,
.cm-btn-accept {
  background-color: #e67835 !important;
  color: #ffffff !important;
  border-color: #e67835 !important;
}

/* Bouton "Tout refuser" — fond blanc, texte noir #0a0a0a (contraste 20:1 AAA), bordure visible */
/* Visuellement equivalent en poids au bouton accepter */
.cm-btn-decline {
  background-color: #f5f5f5 !important;
  color: #0a0a0a !important;
  border-color: #0a0a0a !important;
}

/* Bouton "Personnaliser" / "En savoir plus" — equivalent visuel, fond gris moyen */
.cm-btn-info,
.cm-learn-more,
.cm-btn[data-action="accept-selected"] {
  background-color: #e8e8e8 !important;
  color: #0a0a0a !important;
  border-color: #888888 !important;
}

/* Alignement horizontal des 3 boutons dans le bandeau notice */
.cn-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Sur mobile : boutons pleine largeur empiles */
@media (max-width: 480px) {
  .cn-buttons {
    flex-direction: column !important;
  }
  .cm-btn {
    width: 100% !important;
  }
}